[
  {
    "path": ".editorconfig",
    "content": "root = true\n\n[*]\ncharset = utf-8\nindent_style = space\nindent_size = 2\nend_of_line = lf\ninsert_final_newline = true\ntrim_trailing_whitespace = true\n"
  },
  {
    "path": ".eslintignore",
    "content": "/*.json\n/*.js\n"
  },
  {
    "path": ".eslintrc.js",
    "content": "// Adapt to vscode.\n// This file will be found in the root directory of vscode.\n// If it cannot be found, it will report an error and cannot run eslint in the editor.\nmodule.exports = {};\n"
  },
  {
    "path": ".gitattributes",
    "content": "# This file is inspired by https://github.com/alexkaratarakis/gitattributes\n#\n# Auto detect text files and perform LF normalization\n* text=auto\n\n# The above will handle all files NOT found below\n# These files are text and should be normalized (Convert crlf => lf)\n\n# Source code\n*.coffee          text\n*.css             text diff=css\n*.htm             text diff=html\n*.html            text diff=html\n*.inc             text\n*.ini             text\n*.java            text\n*.js              text\n*.jsx             text\n*.less            text\n*.ls              text\n*.map             text -diff\n*.od              text\n*.onlydata        text\n*.php             text diff=php\n*.pl              text\n*.ps1             text eol=crlf\n*.py              text diff=python\n*.rb              text diff=ruby\n*.sass            text\n*.scm             text\n*.scss            text diff=css\n.husky/*          text eol=lf\n*.sql             text\n*.styl            text\n*.tag             text\n*.ts              text\n*.xml             text\n*.xhtml           text diff=html\n*.md              text eol=lf\n*.vue             text eol=lf\n*.tsx             text eol=lf\n\n# Scripts\n*.bash            text eol=lf\n*.fish            text eol=lf\n*.sh              text eol=lf\n*.zsh             text eol=lf\n# These are explicitly windows files and should use crlf\n*.bat             text eol=crlf\n*.cmd             text eol=crlf\n*.ps1             text eol=crlf\n\n# Serialisation\n*.json            text\n*.toml            text\n*.xml             text\n*.yaml            text\n*.yml             text\n\n# Documents\n*.bibtex          text diff=bibtex\n*.doc             diff=astextplain\n*.DOC             diff=astextplain\n*.docx            diff=astextplain\n*.DOCX            diff=astextplain\n*.dot             diff=astextplain\n*.DOT             diff=astextplain\n*.pdf             diff=astextplain\n*.PDF             diff=astextplain\n*.rtf             diff=astextplain\n*.RTF             diff=astextplain\n*.md              text diff=markdown\n*.mdx             text diff=markdown\n*.tex             text diff=tex\n*.adoc            text\n*.textile         text\n*.mustache        text\n*.csv             text\n*.tab             text\n*.tsv             text\n*.txt             text\n*.sql             text\n*.epub            diff=astextplain\nAUTHORS           text\nCHANGELOG         text\nCHANGES           text\nCONTRIBUTING      text\nCOPYING           text\ncopyright         text\n*COPYRIGHT*       text\nINSTALL           text\nlicense           text\nLICENSE           text\nNEWS              text\nreadme            text\n*README*          text\nTODO              text\n\n# Graphics\n*.ai              binary\n*.bmp             binary\n*.eps             binary\n*.gif             binary\n*.gifv            binary\n*.ico             binary\n*.jng             binary\n*.jp2             binary\n*.jpg             binary\n*.jpeg            binary\n*.jpx             binary\n*.jxr             binary\n*.pdf             binary\n*.png             binary\n*.psb             binary\n*.psd             binary\n# SVG treated as an asset (binary) by default. If you want to treat it as text,\n# comment-out the following line and uncomment the line after.\n*.svg             binary\n#*.svg            text\n*.svgz            binary\n*.tif             binary\n*.tiff            binary\n*.wbmp            binary\n*.webp            binary\n\n# These files are binary and should be left untouched\n# (binary is a macro for -text -diff)\n*.class           binary\n*.jar             binary\n*.war             binary\n\n## LINTERS\n.csslintrc        text\n.eslintrc         text\n.jscsrc           text\n.jshintrc         text\n.jshintignore     text\n.stylelintrc      text\n\n# Configs\n*.cnf             text\n*.conf            text\n*.config          text\n.editorconfig     text\n.env              text\n.gitattributes    text eol=lf\n.gitconfig        text\n.htaccess         text\n*.lock            text -diff\npackage.json      text eol=lf\npackage-lock.json text eol=lf -diff\n*.npmignore       text\npnpm-lock.yaml    text eol=lf -diff\n.prettierrc       text\nyarn.lock         text -diff\nbrowserslist      text\nMakefile          text\nmakefile          text\n\n## HEROKU\nProcfile          text\n.slugignore       text\n\n## AUDIO\n*.kar             binary\n*.m4a             binary\n*.mid             binary\n*.midi            binary\n*.mp3             binary\n*.ogg             binary\n*.ra              binary\n\n## VIDEO\n*.3gpp            binary\n*.3gp             binary\n*.as              binary\n*.asf             binary\n*.asx             binary\n*.fla             binary\n*.flv             binary\n*.m4v             binary\n*.mng             binary\n*.mov             binary\n*.mp4             binary\n*.mpeg            binary\n*.mpg             binary\n*.swc             binary\n*.swf             binary\n*.webm            binary\n\n## ARCHIVES\n*.7z              binary\n*.gz              binary\n*.rar             binary\n*.tar             binary\n*.zip             binary\n\n## FONTS\n*.ttf             binary\n*.eot             binary\n*.otf             binary\n*.woff            binary\n*.woff2           binary\n\n# Executables\n*.exe             binary\n*.pyc             binary\n\n# Text files where line endings should be preserved\n*.patch           -text\n\n#\n# Exclude files from exporting\n#\n\n.gitattributes    export-ignore\n.gitignore        export-ignore\n.gitkeep          export-ignore\n"
  },
  {
    "path": ".github/ISSUE_TEMPLATE/config.yml",
    "content": "blank_issues_enabled: true\ncontact_links:\n  - name: Create new issue\n    url: https://arco.design/issue-helper?repo=arco-design-vue\n    about: Please use the following link to create a new issue.\n"
  },
  {
    "path": ".github/PULL_REQUEST_TEMPLATE.md",
    "content": "<!--\n  Thanks so much for your PR and contribution.\n\n  Before submitting, please make sure to follow the Pull Request Guidelines: https://github.com/arco-design/arco-design-vue/blob/main/CONTRIBUTING.md\n-->\n\n<!-- Put an `x` in \"[ ]\" to check a box) -->\n\n## Types of changes\n\n<!-- What types of changes does this PR introduce -->\n<!-- Only support choose one type, if there are multiple types, you can add the `Type` column in the Changelog. -->\n\n- [ ] New feature\n- [ ] Bug fix\n- [ ] Enhancement\n- [ ] Component style change\n- [ ] Typescript definition change\n- [ ] Documentation change\n- [ ] Coding style change\n- [ ] Refactoring\n- [ ] Test cases\n- [ ] Continuous integration\n- [ ] Breaking change\n- [ ] Others\n\n## Background and context\n\n<!-- Explain what problem does the PR solve -->\n<!-- Link to related open issues if applicable -->\n\n## Solution\n\n<!-- Describe how the problem is fixed in detail -->\n\n## How is the change tested?\n\n<!-- Unit tests should be added/updated for bug fixes and new features, if applicable -->\n<!-- Please describe how you tested the change. E.g. Creating/updating unit tests or attaching a screenshot of how it works with your change -->\n\n## Changelog\n\n| Component | Changelog(CN) | Changelog(EN) | Related issues |\n| --------- | ------------- | ------------- | -------------- |\n|           |               |               |                |\n\n<!-- If there are multiple types, you can add the `Type` column in the Changelog, the value of the column is the same as `Types of changes` -->\n\n## Checklist:\n\n- [ ] Test suite passes (`npm run test`)\n- [ ] Provide changelog for relevant changes (e.g. bug fixes and new features) if applicable.\n- [ ] Changes are submitted to the appropriate branch (e.g. features should be submitted to `feature` branch and others\n  should be submitted to `main` branch)\n\n## Other information\n\n<!-- Please describe what other information that should be taken care of. E.g. describe the impact if introduce a breaking change -->\n"
  },
  {
    "path": ".github/workflows/deploy-site-preview.yml",
    "content": "name: deploy-site-preview\non:\n  pull_request:\n    types: [opened, synchronize, reopened]\n  workflow_dispatch:\n\njobs:\n  deploy-preview:\n    permissions:\n      actions: read\n    runs-on: ubuntu-latest\n    steps:\n      - name: checkout\n        uses: actions/checkout@v4\n\n      - name: Setup pnpm\n        uses: pnpm/action-setup@v4\n\n      - name: Setup node\n        uses: actions/setup-node@v4\n        with:\n          node-version: 18\n          cache: 'pnpm'\n\n      - name: Get pnpm store directory\n        id: pnpm-cache\n        run: |\n          echo \"pnpm_cache_dir=$(pnpm store path)\" >> $GITHUB_OUTPUT\n\n      - uses: actions/cache@v4\n        name: Setup pnpm cache\n        with:\n          path: ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }}\n          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}\n          restore-keys: |\n            ${{ runner.os }}-pnpm-store-\n\n      - name: Install deps\n        run: pnpm i\n\n      - run: pnpm run init\n\n      - name: build site\n        run: NODE_OPTIONS=--max-old-space-size=8192 AssetsPublicPath=/ pnpm run build:site\n\n      - name: netlify install\n        run: pnpm add netlify-cli -D\n\n      - name: get PreviewID\n        run: |\n          if ${{ github.event_name == 'pull_request' }}; then\n            echo \"PreviewID=${{ github.event.number }}\" >> $GITHUB_ENV\n          else\n            echo \"PreviewID=main\" >> $GITHUB_ENV\n          fi\n\n      - name: netlify deploy\n        env:\n          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}\n          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}\n        run: netlify deploy --auth $NETLIFY_AUTH_TOKEN --site $NETLIFY_SITE_ID  --dir=packages/arco-vue-docs/dist --alias=pr-preview-${{ env.PreviewID }}\n\n  add-pr-comment:\n    runs-on: ubuntu-latest\n    needs: deploy-preview\n    if: github.event_name == 'pull_request'\n    steps:\n      - name: PR Comment\n        uses: mshick/add-pr-comment@v2\n        env:\n          PR_NUMBER: ${{ github.event.number }}\n        with:\n          # Message to comment\n          message: |\n            [📚 📚 Site Preview: https://pr-preview-${{ env.PR_NUMBER }}--arco-design-vue.netlify.app](https://pr-preview-${{ env.PR_NUMBER }}--arco-design-vue.netlify.app)\n\n  image-test:\n    runs-on: ubuntu-latest\n    needs: deploy-preview\n    steps:\n      - name: checkout\n        uses: actions/checkout@v4\n        with:\n          fetch-depth: 2\n\n      - name: Setup pnpm\n        uses: pnpm/action-setup@v4\n\n      - name: Setup node\n        uses: actions/setup-node@v4\n        with:\n          node-version: 18\n\n      - name: Get pnpm store directory\n        id: pnpm-cache\n        run: |\n          echo \"pnpm_cache_dir=$(pnpm store path)\" >> $GITHUB_OUTPUT\n\n      - uses: actions/cache@v4\n        name: Setup pnpm cache\n        with:\n          path: ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }}\n          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}\n          restore-keys: |\n            ${{ runner.os }}-pnpm-store-\n\n      - run: pnpm i\n\n      - run: pnpm run init\n\n      - name: get PreviewID\n        run: |\n          if ${{ github.event_name == 'pull_request' }}; then\n            echo \"PreviewID=${{ github.event.number }}\" >> $GITHUB_ENV\n          else\n            echo \"PreviewID=main\" >> $GITHUB_ENV\n          fi\n\n      - name: gen screenshots\n        run: pnpm run test:screenshot --domain=https://pr-preview-${{ env.PreviewID }}--arco-design-vue.netlify.app\n\n      - name: upload screenshots to argos-cli\n        run: npx @argos-ci/cli upload ./packages/web-vue/__screenshots__\n"
  },
  {
    "path": ".github/workflows/issue-duplicate.yml",
    "content": "name: Issue Mark Duplicate\n\non:\n  issue_comment:\n    types: [created, edited]\n\njobs:\n  mark-duplicate:\n    runs-on: ubuntu-latest\n    steps:\n      - name: mark-duplicate\n        uses: actions-cool/issues-helper@v2\n        with:\n          actions: 'mark-duplicate'\n          token: ${{ secrets.GITHUB_TOKEN }}\n          duplicate-labels: \"🔄 Duplicate\"\n          close-issue: true\n"
  },
  {
    "path": ".github/workflows/issue-labeled.yml",
    "content": "name: Issue Labeled\n\non:\n  issues:\n    types: [labeled]\n\npermissions:\n  contents: read\n\njobs:\n  issue-labeled:\n    permissions:\n      issues: write\n      pull-requests: write\n    runs-on: ubuntu-latest\n    steps:\n      - name: PR Welcome\n        if: github.event.label.name == '❤️ PR Welcome' || github.event.label.name == '🙏 Help wanted'\n        uses: actions-cool/issues-helper@v3\n        with:\n          actions: 'create-comment'\n          token: ${{ secrets.GITHUB_TOKEN }}\n          issue-number: ${{ github.event.issue.number }}\n          body: |\n            我们完全同意该提议/反馈，欢迎直接在此仓库创建 Pull Request 来解决这个问题。贡献前请务必阅读[贡献指南](https://github.com/arco-design/arco-design-vue/blob/main/CONTRIBUTING.zh-CN.md)，Pull Request 时根据需改动内容填写[预设模板](https://github.com/arco-design/arco-design-vue/blob/main/.github/PULL_REQUEST_TEMPLATE.md)，我们会尽快进行 Review，感谢您的贡献！\n\n            We agree with this suggestion/feedback and welcome to create a Pull Request in this repository to help address the issue. Before contributing, please make sure to read the [Contributing Guide](https://github.com/arco-design/arco-design-vue/blob/main/CONTRIBUTING.md). When submitting a Pull Request, kindly use the appropriate [PR template](https://github.com/arco-design/arco-design-vue/blob/main/.github/PULL_REQUEST_TEMPLATE.md) based on the changes you’re making. We’ll review it as soon as possible. Thank you for your contribution!\n\n      - name: Need more info\n        if: github.event.label.name == '📄 Need more info'\n        uses: actions-cool/issues-helper@v3\n        with:\n          actions: 'create-comment'\n          token: ${{ secrets.GITHUB_TOKEN }}\n          issue-number: ${{ github.event.issue.number }}\n          body: |\n            你好 @${{ github.event.issue.user.login }}，我们需要你提供更多的信息或复现链接以便于我们帮你排查定位问题。7 天内未跟进此 issue 将会被自动关闭。\n\n            Hello @${{ github.event.issue.user.login }}, we need more information or a reproducible link from you to help us investigate and pinpoint the issue. If there is no follow-up within 7 days, this issue will be automatically closed.\n\n      - name: Invalid\n        if: github.event.label.name == '🙅 Invalid'\n        uses: actions-cool/issues-helper@v3\n        with:\n          actions: 'create-comment,close-issue'\n          token: ${{ secrets.GITHUB_TOKEN }}\n          issue-number: ${{ github.event.issue.number }}\n          body: |\n            你好 @${{ github.event.issue.user.login }}, 您的 Issue 已被标记为无效而自动关闭，原因可能如下：\n\n            - 不符合我们的格式要求、可能缺少足够的上下文或关键信息，无法有效解决问题。\n            - 非 bug 反馈和需求讨论(如询问如何使用等问题)。\n            - 它可能是已有 Issue 的重复项。请在提交新的 Issue 之前检查现有的 Issue。\n\n            可点击加入[Arco Design 飞书用户群](https://applink.feishu.cn/client/chat/chatter/add_by_link?link_token=0c2qaa71-ed40-40e7-9389-9f3e182011a5)询问，感谢您的理解与配合！\n\n            <img src=\"https://github.com/user-attachments/assets/65abfd92-38a4-4d34-ad3e-59b9031ca7c3\" height=\"200\" />\n"
  },
  {
    "path": ".github/workflows/issue-manager.yml",
    "content": "name: Issue Manager\n\non:\n  schedule:\n    - cron: \"0 0 * * *\"\n\npermissions:\n  contents: read\n\njobs:\n  issue-close:\n    permissions:\n      issues: write\n      pull-requests: write\n    runs-on: ubuntu-latest\n    if: ${{ github.repository_owner == 'arco-design' }}\n    steps:\n      - name: Needs more info\n        uses: actions-cool/issues-helper@v3\n        with:\n          actions: 'close-issues'\n          labels: '📄 Need more info'\n          inactive-day: 7\n          body: |\n            由于该 issue 被标记为需要更多信息，却 7 天未收到回应。现关闭 issue，若有任何问题，可评论回复或点击加入[Arco Design 飞书用户群](https://applink.feishu.cn/client/chat/chatter/add_by_link?link_token=0c2qaa71-ed40-40e7-9389-9f3e182011a5)询问。\n\n            This issue has been marked as needing more information, but there hasn’t been a response for 7 days, so we’re closing it for now. If you have any questions, feel free to comment here or join the [Arco Design Feishu user group](https://applink.feishu.cn/client/chat/chatter/add_by_link?link_token=0c2qaa71-ed40-40e7-9389-9f3e182011a5) to ask for help.\n\n            <img src=\"https://github.com/user-attachments/assets/65abfd92-38a4-4d34-ad3e-59b9031ca7c3\" height=\"200\" />\n\n  check-inactive:\n    permissions:\n      issues: write\n      pull-requests: write\n    runs-on: ubuntu-latest\n    if: ${{ github.repository_owner == 'arco-design' }}\n    steps:\n      - name: check-inactive\n        uses: actions-cool/issues-helper@v3\n        with:\n          actions: 'check-inactive'\n          inactive-label: '💤 Inactive'\n          inactive-day: 30\n\n"
  },
  {
    "path": ".github/workflows/issue-remove-inactive.yml",
    "content": "name: Issue Remove Inactive\n\non:\n  issues:\n    types: [edited]\n  issue_comment:\n    types: [created, edited]\n\npermissions:\n  contents: read\n\njobs:\n  issue-remove-inactive:\n    permissions:\n      issues: write\n      pull-requests: write\n    runs-on: ubuntu-latest\n    steps:\n      - name: remove inactive\n        if: github.event.issue.state == 'open' && github.actor == github.event.issue.user.login\n        uses: actions-cool/issues-helper@v3\n        with:\n          actions: 'remove-labels'\n          issue-number: ${{ github.event.issue.number }}\n          labels: '💤 Inactive, 📄 Need more info'\n"
  },
  {
    "path": ".github/workflows/pr_check.yml",
    "content": "name: pr_check\non:\n  pull_request:\n    types: [ opened, synchronize, reopened ]\n\njobs:\n  check:\n    runs-on: ubuntu-latest\n    steps:\n      - uses: actions/checkout@v4\n\n      - name: Setup pnpm\n        uses: pnpm/action-setup@v4\n\n      - name: Setup node\n        uses: actions/setup-node@v4\n        with:\n          node-version: 18\n          cache: 'pnpm'\n\n      - name: Get pnpm store directory\n        id: pnpm-cache\n        run: |\n          echo \"pnpm_cache_dir=$(pnpm store path)\" >> $GITHUB_OUTPUT\n\n      - uses: actions/cache@v4\n        name: Setup pnpm cache\n        with:\n          path: ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }}\n          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}\n          restore-keys: |\n            ${{ runner.os }}-pnpm-store-\n\n      - run: pnpm i --frozen-lockfile\n\n      - run: pnpm run init\n\n      - name: mock time\n        uses: szenius/set-timezone@v1.0\n        with:\n          timezoneLinux: 'Asia/Singapore'\n          timezoneMacos: 'Asia/Singapore'\n          timezoneWindows: 'Singapore Standard Time'\n\n      - name: run test\n        run: pnpm run test\n"
  },
  {
    "path": ".github/workflows/release.yml",
    "content": "name: auto-release\non: create\njobs:\n  release:\n    runs-on: ubuntu-latest\n    steps:\n      - name: checkout\n        uses: actions/checkout@v2\n\n      - name: Get the version\n        id: get_version\n        run: echo ::set-output name=VERSION::${GITHUB_REF/refs\\/tags\\//}\n\n      - name: create-release\n        if: github.event.ref_type == 'tag'\n        uses: arco-design/arco-auto-release@main\n        with:\n          token: ${{ secrets.GITHUB_TOKEN }}\n          changelogPaths: 'packages/web-vue/CHANGELOG.md,packages/web-vue/CHANGELOG.zh-CN.md'\n          tagName: ${{ steps.get_version.outputs.VERSION }}\n"
  },
  {
    "path": ".gitignore",
    "content": ".idea/\n# .vscode/\n\nnode_modules/\nstorybook-static/\n**/.DS_Store\n\npackage-lock.json\nlerna-debug.log\nnpm-debug.log\npnpm-debug.log\n\npackage-lock.json\nyarn.lock\n"
  },
  {
    "path": ".husky/commit-msg",
    "content": "#!/bin/sh\n. \"$(dirname \"$0\")/_/husky.sh\"\n\npnpm exec commitlint --edit $1\n"
  },
  {
    "path": ".husky/pre-commit",
    "content": "#!/bin/sh\n. \"$(dirname \"$0\")/_/husky.sh\"\n\npnpm -r run lint-staged\n"
  },
  {
    "path": ".npmrc",
    "content": "shell-emulator=true\n# 提升依赖项\nshamefully-hoist=true\n"
  },
  {
    "path": ".nvmrc",
    "content": "v18\n"
  },
  {
    "path": ".prettierrc.js",
    "content": "module.exports = {\n  tabWidth: 2,\n  semi: true,\n  printWidth: 80,\n  singleQuote: true,\n  quoteProps: 'consistent',\n  endOfLine: 'auto',\n  htmlWhitespaceSensitivity: 'strict',\n};\n"
  },
  {
    "path": ".vscode/settings.json",
    "content": "{\n  \"eslint.workingDirectories\": [{\n    \"pattern\": \"./packages/*/\"\n  }]\n}\n"
  },
  {
    "path": "CODE_OF_CONDUCT.md",
    "content": "# Contributor Covenant Code of Conduct\n\n## Our Pledge\n\nIn the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, sex characteristics, gender identity and expression, level of experience, education, socio-economic status, nationality, personal appearance, race, religion, or sexual identity and orientation.\n\n## Our Standards\n\nExamples of behavior that contributes to creating a positive environment include:\n\n- Using welcoming and inclusive language\n- Being respectful of differing viewpoints and experiences\n- Gracefully accepting constructive criticism\n- Focusing on what is best for the community\n- Showing empathy towards other community members\n\nExamples of unacceptable behavior by participants include:\n\n- The use of sexualized language or imagery and unwelcome sexual attention or advances\n- Trolling, insulting/derogatory comments, and personal or political attacks\n- Public or private harassment\n- Publishing others' private information, such as a physical or electronic address, without explicit permission\n- Other conduct which could reasonably be considered inappropriate in a professional setting\n\n## Our Responsibilities\n\nProject maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior.\n\nProject maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.\n\n## Scope\n\nThis Code of Conduct applies within all project spaces, and it also applies when an individual is representing the project or its community in public spaces. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers.\n\n## Enforcement\n\nInstances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at pengjiyuan@bytendance.com. All complaints will be reviewed and investigated and will result in a response that is deemed necessary and appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.\n\nProject maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership.\n\n## Attribution\n\nThis Code of Conduct is adapted from the [Contributor Covenant](https://www.contributor-covenant.org), version 1.4,\navailable at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html\n\nFor answers to common questions about this code of conduct, see\nhttps://www.contributor-covenant.org/faq"
  },
  {
    "path": "CONTRIBUTING.md",
    "content": "\n> English | [简体中文](./CONTRIBUTING.zh-CN.md)\n# Contributing\n\nThank you for taking your time to contribute and make this project better! Here are some guidelines to help you get started. Please make sure to take a moment and read through them before submitting your contributions.\n\n## Code of Conduct\n\nThis project is governed by the [Contributor Covenant Code of Conduct](./CODE_OF_CONDUCT.md). By participating, you are expected to adhere to it.\n\n## Open Development\n\nAll work happens directly on GitHub. Both core team members and external contributors send pull requests which go through the same review process.\n\n## Semantic Versioning\n\nThis project follows semantic versioning. We release patch versions for bug fixes or other changes that do not change the behavior of the API, minor versions for new features that are backward-compatible, and major versions for any breaking changes.\n\nEvery significant change is documented in the changelog file.\n\n## Reporting Issues\n\nWe use [Github issues](https://github.com/arco-design/arco-design-vue/issues) for bug reports and feature requests. Before reporting an issue, please make sure you have searched for similar [issues](https://github.com/arco-design/arco-design-vue/issues) as they may have been already answered or being fixed. A new issue should be submitted via [issue helper](https://arco.design/issue-helper?repo=arco-design-vue). For bug reporting, please include the minimum code that can be used to reproduce the problem. For feature request, please specify what changes you want and what behavior you expect.\n\n## Sending a pull request\nThis project uses [pnpm](https://pnpm.io/) for package management. Please install Yarn before development.\n\n### Contribution Process\n\n- **Claim an Issue**: Create an issue on GitHub and claim it (or directly claim an existing issue) to let others know you are working on it, preventing duplicate efforts.\n- **Development**: After preparing for development, proceed with bug fixes or feature implementation.\n- **Add Unit Tests**: Write unit tests for your code changes and ensure all test cases pass, aiming for reasonable test coverage.\n- **Update Snapshots**: If your changes affect the component’s DOM structure, class names, or add/remove demos, update the snapshots accordingly.\n- **Generate Documentation**: If the component API is modified, run `pnpm run docgen` to regenerate the documentation.\n- **Submit a Pull Request**\n\n### Development\n\n1. Fork [this repository](https://github.com/arco-design/arco-design-vue) and create a branch from `main`.\n   - For new features, submit a pull request to the `feature` branch.\n   - For other changes, submit to the `main` branch.\n\n```bash\ngit clone git@github.com:arco-design/arco-design-vue.git\n```\n\n2. Install the dependencies of each package in `workspaces`.\n\n```bash\npnpm install\n```\n\n3. Initialize the project.\n\n```bash\npnpm run init\n```\n\n4. Start and preview the site.\n\n```bash\npnpm run start\n```\n\n```bash\n# Start Storybook (optional, as debugging can also be done on the official website)\npnpm run storybook\n```\n\n5. Make changes to the codebase. If applicable, ensure that you have written the corresponding tests.\n6. Make sure all tests pass after running `pnpm run test`.\n7. Commit your changes, adhering to the [Commit Guidelines](#commit-guidelines).\n8. Open a new pull request, [referencing corresponding issues](https://docs.github.com/en/issues/tracking-your-work-with-issues/linking-a-pull-request-to-an-issue#linking-a-pull-request-to-an-issue-using-a-keyword) if available.\n\n\n## Commit Guidelines\n\nCommit messages are required to follow the [conventional-changelog standard](https://www.conventionalcommits.org/en/v1.0.0/):\n\n```bash\n<type>[optional scope]: <description>\n\n[optional body]\n\n[optional footer(s)]\n```\n\n### Commit types\n\nThe following is a list of commit types:\n\n- feat: A new feature or functionality\n- fix: A bug fix\n- docs: Documentation only changes\n- style: Code formatting or component style changes\n- refactor: Code changes that neither fixes a bug nor adds a feature.\n- perf: Improve performance.\n- test: Add missing or correct existing tests.\n- chore: Other commits that don’t modify src or test files.\n\n\n## Arco-Vue Repository Structure\n\nThis repository is managed by pnpm workspace and includes the following packages:\n\n1. `web-vue`: UI component library\n2. `vue-site`: Component documentation site\n3. `arco-vue-scripts`: Component scripts\n4. `arco-vue-md-loader`: Webpack loader for markdown parsing\n5. `arco-vue-site-nav`: Navigation bar of documentation site (using React materials)\n\n### Web-Vue Component Directory\n\n> components/componentName\n\n```\n├── README.zh-CN.md (Note:Don't edit this file, it's generated by script)\n├── README.en-US.md (Note:Don't edit this file, it's generated by script)\n├── TEMPLATE.md (Template used to generate README file)\n├── __test__\n│   ├── __snapshots__\n│   │   └── demo.test.js.snap (Snapshot)\n│   ├── demo.test.ts (Snapshot test)\n│   └── index.test.ts (Unit test)\n├── __demo__ (Demos for each component)\n│   ├── basic.md\n│   └── advanced.md\n├── index.tsx(Component export)\n└── style\n    └── index.less(Component style)\n    └── index.ts (Component style entry)\n```\n\nPlease note that if you make changes that will affect README (e.g. API changes), make sure to run `npm run docgen` to update README of the component.\n\nFor scripts related to the component library, please run under the `web-vue` directory.\n\n## License\n\nBy contributing your code to the repository, you agree to license your contribution under the [MIT license](./LICENSE).\n"
  },
  {
    "path": "CONTRIBUTING.zh-CN.md",
    "content": "\n> [English](./CONTRIBUTING.md) | 简体中文\n\n# 贡献指南\n\n感谢你的宝贵时间。你的贡献将使这个项目变得更好！在提交贡献之前，请务必花点时间阅读下面的入门指南。\n\n## 行为准则\n\n该项目有一份 [行为准则](./CODE_OF_CONDUCT.md)，希望参与项目的贡献者都能严格遵守。\n\n## 透明的开发\n\n所有工作都直接透明地在 GitHub 上进行。核心团队成员和外部贡献者的 pull requests 都需要经过相同的 review 流程。\n\n## 语义化版本\n\n该项目遵循语义化版本。我们对重要的漏洞修复发布修订号，对新特性或不重要的变更发布次版本号，对重大且不兼容的变更发布主版本号。\n\n每个重大更改都将记录在 changelog 中。\n\n## 报告 Issues\n\n我们使用 [Github issues](https://github.com/arco-design/arco-design-vue/issues) 进行 bug 报告和新 feature 建议。在报告 bug 之前，请确保已经搜索过类似的 [问题](https://github.com/arco-design/arco-design-vue/issues)，因为它们可能已经得到解答或正在被修复。新问题应通过 [问题助手](https://arco.design/issue-helper?repo=arco-design-vue) 提交。对于 bug 报告，请包含可用于重现问题的代码。对于新 feature 建议，请指出你想要的更改以及期望的行为。\n\n## 提交 Pull Request\n\n本项目使用 [pnpm](https://pnpm.io/zh/) 进行多包管理，请在开发前准备好开发环境。\n\n### 共建流程\n- 认领 issue： 在 github 建立 issue 并认领（或直接认领已有 issue），告知大家自己正在修复，避免重复工作。\n- 项目开发：在完成开发前准备后，进行 bug 修复或功能开发。\n- 添加单测：针对代码变动添加单元测试，确认测试用例通过，尽量保证一定的测试覆盖率。\n- 更新快照：如果涉及到组件 dom 层级变动，类名增删或新增/删除了 Demo，快照需要重新生成更新。\n- 文档生成：组件 API 存在调整时需执行 `pnpm run docgen` 重新生成文档。\n- 提交 PR\n\n### 开发\n\n1. Fork [此仓库](https://github.com/arco-design/arco-design-vue)，从 `main` 创建分支。新功能实现请发 pull request 到 `feature` 分支。其他更改发到 `main` 分支。\n\n```bash\ngit clone git@github.com:arco-design/arco-design-vue.git\n```\n\n2. 安装 `workspaces` 中各个包的依赖。\n\n```bash\npnpm install\n```\n\n3. 初始化项目\n\n```bash\npnpm run init\n```\n\n4. 启动和预览站点\n\n```bash\npnpm run start\n```\n\n```bash\n# 启动 storybook 。 这里启动不启动都可以，官网也可以调试组件\npnpm run storybook\n```\n\n5. 对代码库进行更改。如果适用的话，请确保写了相应的测试。\n6. 确认执行 `pnpm run test` 后所有的测试都是通过的。\n7. 提交 git commit, 请同时遵守 [Commit 规范](#commit-指南)。\n8. 提交 pull request, 如果有对应的 issue，请进行[关联](https://docs.github.com/en/issues/tracking-your-work-with-issues/linking-a-pull-request-to-an-issue#linking-a-pull-request-to-an-issue-using-a-keyword)。\n\n## Commit 指南\n\nCommit messages 请遵循[conventional-changelog 标准](https://www.conventionalcommits.org/en/v1.0.0/)：\n\n```bash\n<类型>[可选 范围]: <描述>\n\n[可选 正文]\n\n[可选 脚注]\n```\n\n### Commit 类型\n\n以下是 commit 类型列表:\n\n- feat: 新特性或功能\n- fix: 缺陷修复\n- docs: 文档更新\n- style: 代码风格或者组件样式更新\n- refactor: 代码重构，不引入新功能和缺陷修复\n- perf: 性能优化\n- test: 单元测试\n- chore: 其他不修改 src 或测试文件的提交\n\n## Web-Vue 项目结构\n\n本仓库多包管理，包括以下packages：\n\n1. `web-vue`: Vue组件库\n2. `vue-site`: Vue组件库文档站\n3. `arco-vue-scripts`: Vue组件库脚本\n4. `arco-vue-md-loader`: Vue组件库中markdown文档的webpack loader\n5. `arco-vue-site-nav`: Vue组件库文档站的顶部导航栏(使用React物料)\n\n### Web-Vue 组件目录\n\n> components/componentName\n\n```\n├── README.zh-CN.md (注意：不要编辑这个文件，它是由脚本自动生成的)\n├── README.en-US.md (注意：不要编辑这个文件，它是由脚本自动生成的)\n├── TEMPLATE.md (用于生成 README 文件的模板)\n├── __test__\n│   ├── __snapshots__\n│   │   └── demo.test.js.snap\n│   ├── demo.test.ts (快照测试)\n│   └── index.test.ts (单元测试)\n├── __demo__ (组件演示)\n│   ├── basic.md\n│   └── advanced.md\n├── index.tsx(组件导出)\n└── style\n    └── index.less(组件样式)\n    └── index.ts (组件样式导出)\n```\n\n请注意: 如果进行了会影响 README 的变更(例如 API 变更)，请确保运行 `pnpm run docgen` 来更新组件的 README。\n\n组件库的相关操作在`web-vue`目录下操作.\n\n## License\n\n[MIT 协议](./LICENSE).\n"
  },
  {
    "path": "LICENSE",
    "content": "MIT License\n\nCopyright (c) 2021 Bytedance, Inc. and its affiliates.\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."
  },
  {
    "path": "README.md",
    "content": "<div align=\"center\">\n  <a href=\"https://arco.design\" target=\"_blank\">\n    <img alt=\"Arco Design Logo\" width=\"200\" src=\"https://avatars.githubusercontent.com/u/64576149?s=200&v=4\"/>\n  </a>\n</div>\n<div align=\"center\">\n  <h1>Arco Design</h1>\n</div>\n\n<div align=\"center\">\n\nA comprehensive Vue UI components library based on the [Arco Design](https://arco.design/) system.\n\n[![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/arco-design/arco-design-vue/blob/main/LICENSE)\n\n</div>\n\n<div align=\"center\">\n\nEnglish | [简体中文](./README.zh-CN.md)\n\n</div>\n\n# Features\n\n## Comprehensive\n\nWith more than 60 crafted components that you can use out of the box.\n\n## Customizable theme\n\nExtensive theme tokens can be customized to build your own theme. Two ways of customization are supported:\n\n* [With less-loader](https://arco.design/vue/docs/theme)\n* [Design Lab](https://arco.design/themes) - Recommended!\n\n## TypeScript friendly\n\nAll components are written in TypeScript so it's type friendly.\n\n# Installation\n\nAvailable as an [npm package](https://www.npmjs.com/package/@arco-design/web-vue)\n\n```bash\n// with npm\nnpm install @arco-design/web-vue\n\n// with yarn\nyarn add @arco-design/web-vue\n\n// with pnpm\npnpm add @arco-design/web-vue\n```\n\n# Examples\n\n```typescript\nimport { createApp } from 'vue'\nimport ArcoVue from '@arco-design/web-vue';\nimport App from './App.vue';\nimport '@arco-design/web-vue/dist/arco.css';\n\nconst app = createApp(App);\napp.use(ArcoVue);\napp.mount('#app');\n```\n\n# Useful Links\n\n* [Documentation website](https://arco.design/)\n* [Dark mode](https://arco.design/vue/docs/dark)\n* [Theme customization](https://arco.design/vue/docs/theme)\n* [Figma component library](https://www.figma.com/file/FVu1DydEeXvJqXrkOb90Oi/ArcoDesign%E7%BB%84%E4%BB%B6%E8%AE%BE%E8%AE%A1_2.0?node-id=5472%3A308)\n* [Awesome Arco](https://github.com/arco-design/awesome-arco)\n\n# Ecosystems\n\n| Project               | Description                                             |\n| --------------------- | ------------------------------------------------------- |\n| [React Component Library] | A comprehensive React UI components library based on the Arco Design system |\n| [Design Lab] | A platform to create and manage your themes with ease. |\n| [Material Market] | A platform that provides massive high-quality customized materials to greatly boost development efficiency. |\n| [Icon Box] | One-stop platform to manage your icons. |\n| [Arco Pro] | A solution to quickly building applications from scratch. |\n\n[React Component Library]: https://arco.design/react/docs/start\n\n[Design Lab]: https://arco.design/themes\n\n[Material Market]: https://arco.design/material\n\n[Icon Box]: https://arco.design/iconbox\n\n[Arco Pro]: https://arco.design/pro/\n\n# Contributing\n\nDevelopers interested in contributing should read the [Code of Conduct](./CODE_OF_CONDUCT.md) and\nthe [Contributing Guide](./CONTRIBUTING.md).\n\nThank you to all the people who already contributed to ArcoDesign!\n\n<a href=\"https://github.com/arco-design/arco-design-vue/graphs/contributors\"><img src=\"https://contrib.rocks/image?repo=arco-design/arco-design-vue\" /></a>\n\n# License\n\nThs project is [MIT licensed](./LICENSE).\n"
  },
  {
    "path": "README.zh-CN.md",
    "content": "<div align=\"center\">\n  <a href=\"https://arco.design\" target=\"_blank\">\n    <img alt=\"Arco Design Logo\" width=\"200\" src=\"https://avatars.githubusercontent.com/u/64576149?s=200&v=4\"/>\n  </a>\n</div>\n\n<div align=\"center\">\n  <h1>Arco Design</h1>\n</div>\n\n<div align=\"center\">\n\n基于 [Arco Design](https://arco.design/) 的 Vue UI 组件库。\n\n[![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/arco-design/arco-design-vue/blob/main/LICENSE)\n\n</div>\n\n<div align=\"center\">\n\n[English](./README.md) | 简体中文\n\n</div>\n\n# 特性\n\n## 全面\n\n60多个开箱即用的高质量组件, 可以覆盖绝大部份的业务场景。\n\n## 主题配置\n\n海量的样式 tokens, 支持全局以及组件级别的主题配置。有以下2种方式可以定制主题：\n\n* [Less-loader](https://arco.design/vue/docs/theme)\n* [风格配置平台](https://arco.design/themes) - 推荐!\n\n## TypeScript 友好\n\n所有组件都是用 TypeScript 编写的，所以天然的类型友好。\n\n# 安装\n\n[npm package](https://www.npmjs.com/package/@arco-design/web-vue)\n\n```bash\n// npm\nnpm install @arco-design/web-vue\n\n// yarn\nyarn add @arco-design/web-vue\n\n// pnpm\npnpm add @arco-design/web-vue\n```\n\n# 例子\n\n```typescript\nimport { createApp } from 'vue'\nimport ArcoVue from '@arco-design/web-vue';\nimport App from './App.vue';\nimport '@arco-design/web-vue/dist/arco.css';\n\nconst app = createApp(App);\napp.use(ArcoVue);\napp.mount('#app');\n```\n\n# 相关链接\n\n* [官网](https://arco.design/)\n* [暗黑模式](https://arco.design/vue/docs/dark)\n* [主题配置](https://arco.design/vue/docs/theme)\n* [Figma 设计资源](https://www.figma.com/file/FVu1DydEeXvJqXrkOb90Oi/ArcoDesign%E7%BB%84%E4%BB%B6%E8%AE%BE%E8%AE%A1_2.0?node-id=5472%3A308)\n* [Awesome Arco](https://github.com/arco-design/awesome-arco)\n\n# 生态\n\n| 项目               | 介绍                                             |\n| --------------------- | ------------------------------------------------------- |\n| [React 组件库] | 基于 [Arco Design](https://arco.design/) 的 React UI 组件库。 |\n| [风格配置平台] | 精确到组件级的主题视觉配置平台 |\n| [物料平台] | 丰富可共享的业务定制物料，让效率突破猛进 |\n| [图标平台] | 一站式图标管理平台 |\n| [Arco Pro] | 快速构建中后台的前端解决方案 |\n\n[React 组件库]: https://arco.design/react/docs/start\n[风格配置平台]: https://arco.design/themes\n[物料平台]: https://arco.design/material\n[图标平台]: https://arco.design/iconbox\n[Arco Pro]: https://arco.design/pro/\n\n# 参与贡献\n\n贡献之前请先阅读 [行为准则](./CODE_OF_CONDUCT.md) 和 [贡献指南](./CONTRIBUTING.zh-CN.md)。\n\n感谢所有为 ArcoDesign 做过贡献的人!\n\n<a href=\"https://github.com/arco-design/arco-design-vue/graphs/contributors\"><img src=\"https://contrib.rocks/image?repo=arco-design/arco-design-vue\" /></a>\n\n# License\n\n[MIT 协议](./LICENSE)\n"
  },
  {
    "path": "commitlint.config.js",
    "content": "module.exports = {\n  extends: ['@commitlint/config-conventional'],\n  rules: {\n    'subject-case': [0],\n    'type-enum': [\n      2,\n      'always',\n      [\n        'build',\n        'chore',\n        'ci',\n        'docs',\n        'feat',\n        'fix',\n        'enhance',\n        'refactor',\n        'revert',\n        'style',\n        'test',\n      ],\n    ],\n  },\n};\n"
  },
  {
    "path": "package.json",
    "content": "{\n  \"name\": \"arco-design-vue-monorepo\",\n  \"description\": \"Arco Design Vue 2.0 Monorepo\",\n  \"private\": true,\n  \"scripts\": {\n    \"postinstall\": \"husky install\",\n    \"init\": \"pnpm -F @arco-design/arco-changelog -F @arco-design/vite-plugin-arco-vue-docs -F @arco-design/arco-vue-scripts run build && pnpm i && pnpm -F @arco-design/web-vue run init\",\n    \"start\": \"pnpm --filter @arco-design/arco-vue-docs run start\",\n    \"build:site\": \"pnpm --filter @arco-design/arco-vue-docs run build\",\n    \"test:screenshot\": \"pnpm --filter @arco-design/web-vue run test:screenshot\",\n    \"build:component\": \"pnpm --filter @arco-design/web-vue run build\",\n    \"docgen\": \"pnpm --filter @arco-design/web-vue run docgen\",\n    \"clean\": \"pnpm -r exec rimraf dist node_modules\",\n    \"test\": \"pnpm --filter @arco-design/web-vue run test\",\n    \"storybook\": \"pnpm --filter @arco-design/web-vue-storybook run storybook\"\n  },\n  \"packageManager\": \"pnpm@9.5.0\",\n  \"workspaces\": [\n    \"packages/*\"\n  ],\n  \"author\": \"ArcoDesign Team\",\n  \"license\": \"MIT\",\n  \"devDependencies\": {\n    \"@commitlint/cli\": \"^11.0.0\",\n    \"@commitlint/config-conventional\": \"^12.1.4\",\n    \"@typescript-eslint/eslint-plugin\": \"^4.33.0\",\n    \"@typescript-eslint/parser\": \"^4.33.0\",\n    \"eslint\": \"^7.32.0\",\n    \"eslint-config-airbnb-base\": \"^14.2.1\",\n    \"eslint-config-prettier\": \"^8.10.0\",\n    \"eslint-import-resolver-typescript\": \"^2.7.1\",\n    \"eslint-plugin-import\": \"^2.31.0\",\n    \"eslint-plugin-prettier\": \"^3.4.1\",\n    \"eslint-plugin-vue\": \"^7.20.0\",\n    \"husky\": \"^7.0.4\",\n    \"lint-staged\": \"^10.5.4\",\n    \"prettier\": \"^2.8.8\",\n    \"rimraf\": \"^6.0.1\",\n    \"stylelint\": \"^13.13.1\",\n    \"stylelint-config-prettier\": \"^8.0.2\",\n    \"stylelint-config-rational-order\": \"^0.1.2\",\n    \"stylelint-config-standard\": \"^20.0.0\",\n    \"stylelint-order\": \"^4.1.0\",\n    \"typescript\": \"^4.9.5\"\n  },\n  \"pnpm\": {\n    \"peerDependencyRules\": {\n      \"ignoreMissing\": [\n        \"react-dom\"\n      ]\n    }\n  }\n}\n"
  },
  {
    "path": "packages/arco-changelog/.eslintignore",
    "content": "node_modules/*\ndist/*\n/*.json\n/*.js\n"
  },
  {
    "path": "packages/arco-changelog/.eslintrc.js",
    "content": "module.exports = {\n  parser: '@typescript-eslint/parser',\n  parserOptions: {\n    sourceType: 'module',\n    ecmaVersion: 2020,\n  },\n  env: {\n    node: true,\n  },\n  plugins: ['@typescript-eslint'],\n  extends: [\n    // Airbnb JavaScript Style Guide https://github.com/airbnb/javascript\n    'airbnb-base',\n    'plugin:@typescript-eslint/recommended',\n    'plugin:import/typescript',\n    'plugin:prettier/recommended',\n  ],\n  settings: {\n    'import/resolver': {\n      typescript: {\n        project: './tsconfig.json',\n      },\n    },\n  },\n  rules: {\n    'prettier/prettier': 1,\n    '@typescript-eslint/no-explicit-any': 0,\n    '@typescript-eslint/explicit-module-boundary-types': 0,\n    '@typescript-eslint/no-non-null-assertion': 0,\n    '@typescript-eslint/no-empty-function': 1,\n    '@typescript-eslint/ban-ts-comment': 0,\n    'import/extensions': [\n      'error',\n      'ignorePackages',\n      { js: 'never', jsx: 'never', ts: 'never', tsx: 'never' },\n    ],\n    'import/no-extraneous-dependencies': 0,\n    'import/no-unresolved': [2, { caseSensitive: false }],\n    'import/prefer-default-export': 0,\n    'no-underscore-dangle': 0,\n    'no-nested-ternary': 0,\n    'no-shadow': 0,\n    'prefer-template': 1,\n    'no-param-reassign': 0,\n    'no-plusplus': 0,\n    'no-use-before-define': 0,\n    'no-restricted-syntax': 0,\n    'no-empty': [2, { allowEmptyCatch: true }],\n    'no-bitwise': 0,\n    'no-return-assign': 0,\n    'no-unused-expressions': [\n      'error',\n      { allowShortCircuit: true, allowTernary: true },\n    ],\n    'no-continue': 0,\n  },\n};\n"
  },
  {
    "path": "packages/arco-changelog/.gitignore",
    "content": ".idea/\n.vscode/\n\ndist/\nnode_modules/\n**/.DS_Store\n"
  },
  {
    "path": "packages/arco-changelog/.prettierrc.js",
    "content": "module.exports = {\n  tabWidth: 2,\n  semi: true,\n  printWidth: 80,\n  singleQuote: true,\n  quoteProps: 'consistent',\n  endOfLine: 'auto',\n  htmlWhitespaceSensitivity: 'strict',\n};\n"
  },
  {
    "path": "packages/arco-changelog/README.md",
    "content": "# Arco Changelog\n\nA simple github changelog generator\n\n## Installation\n\n```\nnpm install @arco-design/arco-changelog\n```\n\n## Command\n\n+ `arco-changelog`\n\n生成日志文件\n\n+ `arco-changelog template`\n  + `--gitlab` 生成 Gitlab 项目的 MR 模板\n\n在项目中创建 Github 的 Pull Request 模板\n\n## Usage\n\n1. Create a 'changelog.config.js' file and fill in the necessary config. You can find all configuration properties below\n\n```js\n// changelog.config.js\n\nmodule.exports = {\n  repo: 'arco-design/arco-design-vue'\n}\n\n```\n\n2. run `arco-changelog`\n\n## Config Options\n\n### repo\n\n+ Type: string\n+ Required\n\n用于获取 Pull Request 的项目地址\n\n### type\n\n+ Type: String\n+ Default: \"github\"\n\n指定项目仓库的类型\n\n### merged\n\n+ Type: boolean\n+ Default: true\n\n是否只获取合并过的 PR\n\n### requestConfig\n\n+ Type: Function `(config: {\n  repo: string;\n  version: string;\n  merged: boolean;\n  }) => AxiosRequestConfig`\n+ Default: undefined\n\n自定义请求信息，返回结果可参考 [axios](https://github.com/axios/axios#request-config)\n\n### emitFiles\n\n+ Type: Function `(changelog: Changelog) => EmitFile[]`\n+ Default: undefined\n\n生成更新日志文件的方法\n\nchangelog 工具使用 [nunjucks](https://mozilla.github.io/nunjucks/) 作为模板引擎。返回数据中的 `template` 字段指定模板文件的位置，`data` 字段指定模板数据\n\n### filename\n\n+ Type: Object `{ zh: string; en: string }`\n+ Default: undefined\n\n指定默认配置生成日志文件的文件名，分为中英文文件。例如：`{ zh: 'changelog/CHANGELOG.zh.md'; en: 'changelog/CHANGELOG.en.md' }`\n\n```ts\nexport interface EmitFile {\n  file: string;\n  template: string;\n  data: Record<string, any>;\n}\n\nexport interface Changelog {\n  version: string;\n  date: string;\n  list: ChangelogData[];\n}\n\nexport interface ChangelogData {\n  type: string;\n  pr: PullRequest;\n  issues?: string[];\n\n  [key: string]: any;\n}\n\nexport interface PullRequest {\n  id: number;\n  url: string;\n}\n```\n\n### typeDict\n\n+ Type: Object\n+ Default: typeDict\n\n更新日志的类型字典\n\n```js\nconst typeDict = {\n  feature: 'New feature',\n  bugfix: 'Bug fix',\n  docs: 'Documentation change',\n  refactor: 'Refactoring',\n  style: 'Component style change',\n  enhancement: 'Enhancement',\n  test: 'Test cases',\n  ci: 'Continuous integration',\n  typescript: 'Typescript definition change',\n  attention: 'Breaking change',\n}\n```\n\n### keyDict\n\n+ Type: Object\n+ Default: keyDict\n\n更新日志数据的 key 所对应的表格标题字典\n\n```js\nconst keyDict = {\n  type: 'Type',\n  component: 'Component',\n  changelogZh: 'Changelog(CN)',\n  changelogEn: 'Changelog(EN)',\n  issues: 'Related issues',\n}\n```\n"
  },
  {
    "path": "packages/arco-changelog/copy-template.js",
    "content": "#!/usr/bin/env node\n\nconst fs = require('fs-extra');\n\nfs.copySync('src/vue/template.en-US.njk', 'dist/vue/template.en-US.njk', {\n  overwrite: true,\n});\nfs.copySync('src/vue/template.zh-CN.njk', 'dist/vue/template.zh-CN.njk', {\n  overwrite: true,\n});\nfs.copySync(\n  'src/default/template.en-US.njk',\n  'dist/default/template.en-US.njk',\n  {\n    overwrite: true,\n  }\n);\nfs.copySync(\n  'src/default/template.zh-CN.njk',\n  'dist/default/template.zh-CN.njk',\n  {\n    overwrite: true,\n  }\n);\nfs.copySync('src/.github', 'dist/.github', {\n  overwrite: true,\n});\nfs.copySync('src/.gitlab', 'dist/.gitlab', {\n  overwrite: true,\n});\n"
  },
  {
    "path": "packages/arco-changelog/package.json",
    "content": "{\n  \"name\": \"@arco-design/arco-changelog\",\n  \"version\": \"0.3.2\",\n  \"description\": \"Arco Changelog\",\n  \"author\": \"ArcoDesign Team\",\n  \"license\": \"MIT\",\n  \"main\": \"dist/index.js\",\n  \"bin\": \"dist/cmd.js\",\n  \"files\": [\n    \"dist\"\n  ],\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/arco-design/arco-design-vue.git\"\n  },\n  \"scripts\": {\n    \"dev\": \"tsc --watch\",\n    \"build\": \"tsc && node copy-template.js\",\n    \"lint-staged\": \"npx lint-staged\"\n  },\n  \"lint-staged\": {\n    \"*.{js,ts,jsx,tsx}\": [\n      \"eslint --fix\",\n      \"prettier --write\"\n    ]\n  },\n  \"devDependencies\": {\n    \"@types/fs-extra\": \"^9.0.13\",\n    \"@types/inquirer\": \"^7.3.3\",\n    \"@types/nunjucks\": \"^3.2.6\",\n    \"@typescript-eslint/eslint-plugin\": \"^4.33.0\",\n    \"@typescript-eslint/parser\": \"^4.33.0\",\n    \"eslint\": \"^7.32.0\",\n    \"eslint-config-airbnb-base\": \"^14.2.1\",\n    \"eslint-config-prettier\": \"^8.10.0\",\n    \"eslint-import-resolver-typescript\": \"^2.7.1\",\n    \"eslint-plugin-import\": \"^2.31.0\",\n    \"eslint-plugin-prettier\": \"^3.4.1\",\n    \"prettier\": \"^2.8.8\",\n    \"ts-node\": \"^10.9.2\"\n  },\n  \"dependencies\": {\n    \"axios\": \"^0.21.4\",\n    \"chalk\": \"^4.1.2\",\n    \"commander\": \"^7.2.0\",\n    \"comment-parser\": \"^1.4.1\",\n    \"fast-glob\": \"^3.3.3\",\n    \"fs-extra\": \"^9.1.0\",\n    \"glob\": \"^7.2.3\",\n    \"inquirer\": \"^8.2.6\",\n    \"moment\": \"^2.30.1\",\n    \"nunjucks\": \"^3.2.4\",\n    \"ora\": \"^5.4.1\",\n    \"typescript\": \"^4.9.5\"\n  }\n}\n"
  },
  {
    "path": "packages/arco-changelog/src/.github/PULL_REQUEST_TEMPLATE.md",
    "content": "<!--\n  Thanks so much for your PR and contribution.\n\n  Before submitting, please make sure to follow the Pull Request Guidelines: https://github.com/arco-design/arco-design-vue/blob/main/CONTRIBUTING.md\n-->\n\n<!-- Put an `x` in \"[ ]\" to check a box) -->\n\n## Type of changes\n\n<!-- What type of changes does this PR introduce -->\n<!-- Only support choose one type, if there are multiple types, you can add the `Type` column in the Changelog. -->\n\n- [ ] New feature\n- [ ] Bug fix\n- [ ] Enhancement\n- [ ] Component style change\n- [ ] Typescript definition change\n- [ ] Documentation change\n- [ ] Coding style change\n- [ ] Refactoring\n- [ ] Test cases\n- [ ] Continuous integration\n- [ ] Breaking change\n- [ ] Others\n\n## Background and context\n\n<!-- Explain what problem does the PR solve -->\n<!-- Link to related open issues if applicable -->\n\n## Solution\n\n<!-- Describe how the problem is fixed in detail -->\n\n## How is the change tested?\n\n<!-- Unit tests should be added/updated for bug fixes and new features, if applicable -->\n<!-- Please describe how you tested the change. E.g. Creating/updating unit tests or attaching a screenshot of how it works with your change -->\n\n## Changelog\n\n| Component | Changelog(CN) | Changelog(EN) | Related issues |\n| --------- | ------------- | ------------- | -------------- |\n|           |               |               |                |\n\n<!-- If there are multiple types, you can add the `Type` column in the Changelog, the value of the column is the same as `Types of changes` -->\n\n## Checklist:\n\n- [ ] Test suite passes (`npm run test`)\n- [ ] Provide changelog for relevant changes (e.g. bug fixes and new features) if applicable.\n- [ ] Changes are submitted to the appropriate branch (e.g. features should be submitted to `feature` branch and others\n  should be submitted to `main` branch)\n\n## Other information\n\n<!-- Please describe what other information that should be taken care of. E.g. describe the impact if introduce a breaking change -->\n"
  },
  {
    "path": "packages/arco-changelog/src/.gitlab/merge_request_templates/CHANGELOG.md",
    "content": "<!--\n  Thanks so much for your PR and contribution.\n\n  Before submitting, please make sure to follow the Pull Request Guidelines: https://github.com/arco-design/arco-design-vue/blob/main/CONTRIBUTING.md\n-->\n\n<!-- Put an `x` in \"[ ]\" to check a box) -->\n\n## Type of changes\n\n<!-- What type of changes does this PR introduce -->\n<!-- Only support choose one type, if there are multiple types, you can add the `Type` column in the Changelog. -->\n\n- [ ] New feature\n- [ ] Bug fix\n- [ ] Enhancement\n- [ ] Component style change\n- [ ] Typescript definition change\n- [ ] Documentation change\n- [ ] Coding style change\n- [ ] Refactoring\n- [ ] Test cases\n- [ ] Continuous integration\n- [ ] Breaking change\n- [ ] Others\n\n## Background and context\n\n<!-- Explain what problem does the PR solve -->\n<!-- Link to related open issues if applicable -->\n\n## Solution\n\n<!-- Describe how the problem is fixed in detail -->\n\n## How is the change tested?\n\n<!-- Unit tests should be added/updated for bug fixes and new features, if applicable -->\n<!-- Please describe how you tested the change. E.g. Creating/updating unit tests or attaching a screenshot of how it works with your change -->\n\n## Changelog\n\n| Component | Changelog(CN) | Changelog(EN) | Related issues |\n| --------- | ------------- | ------------- | -------------- |\n|           |               |               |                |\n\n<!-- If there are multiple types, you can add the `Type` column in the Changelog, the value of the column is the same as `Types of changes` -->\n\n## Checklist:\n\n- [ ] Test suite passes (`npm run test`)\n- [ ] Provide changelog for relevant changes (e.g. bug fixes and new features) if applicable.\n- [ ] Changes are submitted to the appropriate branch (e.g. features should be submitted to `feature` branch and others\n  should be submitted to `main` branch)\n\n## Other information\n\n<!-- Please describe what other information that should be taken care of. E.g. describe the impact if introduce a breaking change -->\n"
  },
  {
    "path": "packages/arco-changelog/src/changelog.ts",
    "content": "import marked, { Tokens } from 'marked';\nimport { invertKeyValues } from './utils/invert';\nimport { ChangelogData } from './interface';\n\nexport const getChangelogList = (\n  content: string,\n  config: {\n    pr: any;\n    typeDict: Record<string, string>;\n    keyDict: Record<string, string>;\n  }\n) => {\n  const _content = content.replace(/\\r\\n/g, '\\n');\n  const _typeDict = invertKeyValues(config.typeDict);\n  const _keyDict = invertKeyValues(config.keyDict);\n\n  const typeRule = new RegExp(\n    '##\\\\s*Types? of changes.+?\\\\[\\\\s*[xX]\\\\s*]\\\\s*(.+?)(?:\\\\n|$)',\n    'si'\n  );\n  const typeMatch = _content.match(typeRule)?.[1].trim();\n  const defaultType = typeMatch && _typeDict[typeMatch];\n\n  const rule = new RegExp('##\\\\s*Changelog\\\\n(.+?)(?:##|$)', 'si');\n  const match = _content.match(rule)?.[1];\n  if (!match) return undefined;\n  const tokens = marked.lexer(match);\n  const table = tokens.filter(\n    (token) => token.type === 'table'\n  )[0] as Tokens.Table;\n  if (!table) return undefined;\n\n  const keys = table.header.map((header) => {\n    return _keyDict[header];\n  });\n\n  return table.cells.reduce((list, cur) => {\n    const data = cur.reduce(\n      (data, value, index) => {\n        const key = keys[index];\n        if (key === 'type') {\n          data[key] = _typeDict[value];\n        } else if (key === 'issues') {\n          data[key] = value\n            .split(',')\n            .map((item) => item.match(/#\\d+/)?.[0])\n            .filter((item) => Boolean(item)) as string[];\n        } else {\n          data[key] = value;\n        }\n\n        return data;\n      },\n      {\n        type: defaultType,\n        pr: config.pr,\n      } as ChangelogData\n    );\n\n    list.push(data);\n    return list;\n  }, [] as ChangelogData[]);\n};\n"
  },
  {
    "path": "packages/arco-changelog/src/cmd.ts",
    "content": "#!/usr/bin/env node\n\nimport { Command } from 'commander';\nimport fs from 'fs-extra';\nimport path from 'path';\nimport { changelog } from './index';\nimport { run } from './copy-github';\n\nconst program = new Command();\n\nconst packageContent = fs.readFileSync(\n  path.resolve(__dirname, '../package.json'),\n  'utf8'\n);\nconst packageData: any = JSON.parse(packageContent);\n\nprogram\n  .name('arco-changelog')\n  .version(packageData.version)\n  .action(async () => {\n    await changelog();\n  })\n  .command('template')\n  .option('--gitlab', 'generate gitlab template')\n  .action(async ({ gitlab }) => {\n    run({ gitlab });\n  });\n\nprogram.parse(process.argv);\n"
  },
  {
    "path": "packages/arco-changelog/src/config.ts",
    "content": "import path from 'path';\nimport fs from 'fs-extra';\nimport { ChangelogConfig } from './interface';\nimport { getEmitFiles } from './default/emit-files';\nimport vueConfig from './vue/vue.config';\n\nexport const typeDict = {\n  feature: 'New feature',\n  bugfix: 'Bug fix',\n  docs: 'Documentation change',\n  refactor: 'Refactoring',\n  style: 'Component style change',\n  enhancement: 'Enhancement',\n  test: 'Test cases',\n  ci: 'Continuous integration',\n  typescript: 'Typescript definition change',\n  attention: 'Breaking change',\n};\n\nexport const keyDict = {\n  type: 'Type',\n  component: 'Component',\n  changelogZh: 'Changelog(CN)',\n  changelogEn: 'Changelog(EN)',\n  issues: 'Related issues',\n};\n\nconst defaultConfig: ChangelogConfig = {\n  repo: '',\n  merged: true,\n  type: 'github',\n  emitFiles: getEmitFiles(),\n  typeDict,\n  keyDict,\n};\n\nexport const getConfig = async (): Promise<Required<ChangelogConfig>> => {\n  const config = { ...defaultConfig } as Required<ChangelogConfig>;\n  const filename = path.resolve(process.cwd(), 'changelog.config.js');\n  try {\n    await fs.access(filename);\n    const data = (await import(filename)).default as ChangelogConfig;\n    if (data.arcoComponent === 'vue') {\n      Object.assign(config, vueConfig);\n    }\n    Object.assign(config, data);\n    if (data.filename) {\n      config.emitFiles = getEmitFiles({ filename: data.filename });\n    }\n  } catch (err) {\n    console.log(err);\n  }\n  return config;\n};\n"
  },
  {
    "path": "packages/arco-changelog/src/copy-github.js",
    "content": "import path from 'path';\nimport fs from 'fs-extra';\n\nexport const run = ({ gitlab }) => {\n  if (gitlab) {\n    fs.copySync(\n      path.resolve(__dirname, '.gitlab'),\n      path.resolve(process.cwd(), '.gitlab'),\n      {\n        overwrite: true,\n      }\n    );\n  } else {\n    fs.copySync(\n      path.resolve(__dirname, '.github'),\n      path.resolve(process.cwd(), '.github'),\n      {\n        overwrite: true,\n      }\n    );\n  }\n};\n"
  },
  {
    "path": "packages/arco-changelog/src/default/emit-files.ts",
    "content": "import path from 'path';\nimport { Changelog, EmitFile } from '../interface';\n\nexport const getEmitFiles = (config?: any) => {\n  return (changelog: Changelog): EmitFile[] => {\n    const allCN: Record<string, any> = {};\n    const addEN: Record<string, any> = {};\n\n    for (const item of changelog.list) {\n      const contentCN = `${item.changelogZh} ([#${item.pr.id}](${item.pr.url}))`;\n      const contentEN = `${item.changelogEn} ([#${item.pr.id}](${item.pr.url}))`;\n      addAll({ ...item, content: contentCN }, allCN);\n      addAll({ ...item, content: contentEN }, addEN);\n    }\n\n    return [\n      {\n        file: config?.filename?.zh ?? 'CHANGELOG.zh-CN.md',\n        template: path.resolve(__dirname, 'template.zh-CN.njk'),\n        data: { version: changelog.version, date: changelog.date, ...allCN },\n      },\n      {\n        file: config?.filename?.en ?? 'CHANGELOG.md',\n        template: path.resolve(__dirname, 'template.en-US.njk'),\n        data: { version: changelog.version, date: changelog.date, ...addEN },\n      },\n    ];\n  };\n};\n\nconst addAll = (data: any, changelog: any) => {\n  if (!changelog[data.type]) {\n    changelog[data.type] = [];\n  }\n  if (!data.component || data.component === 'common') {\n    changelog[data.type].push(data.content);\n  } else {\n    changelog[data.type].push(`**${data.component}:** ${data.content}`);\n  }\n};\n"
  },
  {
    "path": "packages/arco-changelog/src/default/template.en-US.njk",
    "content": "## {{ version }}\n\n`{{ date }}`\n\n{% if attention -%}\n  ### ⚠️ Important Attention\n\n  {% for content in attention -%}\n    - {{ content }}\n  {% endfor %}\n\n{% endif %}\n{% if feature -%}\n  ### 🆕 Feature\n\n  {% for content in feature -%}\n    - {{ content }}\n  {% endfor %}\n\n{% endif %}\n{% if bugfix -%}\n  ### 🐛 BugFix\n\n  {% for content in bugfix -%}\n    - {{ content }}\n  {% endfor %}\n\n{% endif %}\n{% if enhancement -%}\n  ### 💎 Enhancement\n\n  {% for content in enhancement -%}\n    - {{ content }}\n  {% endfor %}\n\n{% endif %}\n{% if style -%}\n  ### 💅 Style\n\n  {% for content in style -%}\n    - {{ content }}\n  {% endfor %}\n\n{% endif %}\n{% if typescript -%}\n  ### 🆎 TypeScript\n\n  {% for content in typescript -%}\n    - {{ content }}\n  {% endfor %}\n\n{% endif %}\n"
  },
  {
    "path": "packages/arco-changelog/src/default/template.zh-CN.njk",
    "content": "## {{ version }}\n\n`{{ date }}`\n\n{% if attention -%}\n  ### ⚠️ 重点注意\n\n  {% for content in attention -%}\n    - {{ content }}\n  {% endfor %}\n\n{% endif %}\n{% if feature -%}\n  ### 🆕 新增功能\n\n  {% for content in feature -%}\n    - {{ content }}\n  {% endfor %}\n\n{% endif %}\n{% if bugfix -%}\n  ### 🐛 问题修复\n\n  {% for content in bugfix -%}\n    - {{ content }}\n  {% endfor %}\n\n{% endif %}\n{% if enhancement -%}\n  ### 💎 功能优化\n\n  {% for content in enhancement -%}\n    - {{ content }}\n  {% endfor %}\n\n{% endif %}\n{% if style -%}\n  ### 💅 样式更新\n\n  {% for content in style -%}\n    - {{ content }}\n  {% endfor %}\n\n{% endif %}\n{% if typescript -%}\n  ### 🆎 类型修正\n\n  {% for content in typescript -%}\n    - {{ content }}\n  {% endfor %}\n\n{% endif %}\n"
  },
  {
    "path": "packages/arco-changelog/src/index.ts",
    "content": "import fs from 'fs-extra';\nimport inquirer from 'inquirer';\nimport axios from 'axios';\nimport moment from 'moment';\nimport { configure } from 'nunjucks';\nimport { getConfig } from './config';\nimport { getPackage } from './utils/config';\nimport { Changelog, EmitFile } from './interface';\nimport { getChangelogList } from './changelog';\n\nconst nunjucksEnv = configure(__dirname, {\n  autoescape: false,\n  trimBlocks: true,\n  lstripBlocks: true,\n});\n\nconst appendChangelog = async (emit: EmitFile) => {\n  const { file, template, data } = emit;\n  const content = nunjucksEnv.render(template, data);\n\n  try {\n    await fs.access(file);\n    const origin = await fs.readFile(file, 'utf-8');\n    const match = origin.match(/^(```yaml\\n.*?\\n```\\n\\n)?(.*)$/s);\n    if (match) {\n      await fs.writeFile(file, `${match[1] ?? ''}${content}\\n${match[2]}`);\n    }\n  } catch {\n    // eslint-disable-next-line\n    await fs.writeFile(file, '```yaml\\nchangelog: true\\n```\\n\\n' + content);\n  }\n};\n\nconst getRequestURL = (config: {\n  repo: string;\n  version: string;\n  merged?: boolean;\n}) => {\n  let url = `https://api.github.com/search/issues?accept=application/vnd.github.v3+json&q=repo:${config.repo}+is:pr+milestone:${config.version}`;\n\n  if (config.merged) {\n    url += '+is:merged';\n  }\n\n  return url;\n};\n\nexport const changelog = async () => {\n  const config = await getConfig();\n  const packageData = await getPackage();\n\n  let version = (packageData.version ?? '') as string;\n\n  const answer = await inquirer.prompt({\n    type: 'input',\n    name: 'version',\n    message: 'Please input the version',\n    default: version,\n    validate(input: any) {\n      return /\\d+\\.\\d+\\.\\d+(-beta\\.\\d+)?/.test(input);\n    },\n  });\n\n  version = answer.version;\n\n  const res = await axios.request(\n    config.requestConfig?.({\n      repo: config.repo,\n      version,\n      merged: config.merged,\n    }) ?? {\n      method: 'get',\n      url: getRequestURL({\n        repo: config.repo,\n        version,\n        merged: config.merged,\n      }),\n    }\n  );\n\n  if (res.status === 200) {\n    const { data } = res;\n    const changelog: Changelog = {\n      version,\n      date: moment().format('YYYY-MM-DD'),\n      list: [],\n    };\n\n    if (config.type === 'gitlab') {\n      for (const item of data ?? []) {\n        if (item.description) {\n          const list = getChangelogList(item.description, {\n            pr: {\n              id: item.iid,\n              url: item.web_url,\n            },\n            typeDict: config.typeDict,\n            keyDict: config.keyDict,\n          });\n          if (list) {\n            changelog.list = changelog.list.concat(list);\n          }\n        }\n      }\n    } else {\n      for (const item of data?.items ?? []) {\n        const list = getChangelogList(item.body, {\n          pr: item,\n          typeDict: config.typeDict,\n          keyDict: config.keyDict,\n        });\n        if (list) {\n          changelog.list = changelog.list.concat(list);\n        }\n      }\n    }\n\n    if (changelog.list.length > 0) {\n      const emits = config.emitFiles(changelog);\n\n      for (const item of emits) {\n        // eslint-disable-next-line no-await-in-loop\n        await appendChangelog(item);\n      }\n    } else {\n      // eslint-disable-next-line no-console\n      console.log('No update information found');\n    }\n  }\n};\n"
  },
  {
    "path": "packages/arco-changelog/src/interface.ts",
    "content": "import { AxiosRequestConfig } from 'axios';\n\nexport interface ChangelogConfig {\n  repo: string;\n  merged?: boolean;\n  requestConfig?: (config: {\n    repo: string;\n    version: string;\n    merged: boolean;\n  }) => AxiosRequestConfig;\n  emitFiles?: (changelog: Changelog) => EmitFile[];\n  typeDict?: Record<string, string>;\n  type?: 'github' | 'gitlab';\n  arcoComponent?: 'react' | 'vue';\n  keyDict?: Record<string, string>;\n  filename?: { zh: string; en: string };\n}\n\nexport interface PullRequest {\n  id: number;\n  url: string;\n}\n\nexport interface ChangelogData {\n  type: string;\n  pr: PullRequest;\n  issues?: string[];\n\n  [key: string]: any;\n}\n\nexport interface Changelog {\n  version: string;\n  date: string;\n  list: ChangelogData[];\n}\n\nexport interface EmitFile {\n  file: string;\n  template: string;\n  data: Record<string, any>;\n}\n"
  },
  {
    "path": "packages/arco-changelog/src/test.md",
    "content": "<!--\n  Thanks so much for your PR and contribution.\n\n  Before submitting, please make sure to follow the Pull Request Guidelines: https://github.com/arco-design/arco-design-vue/blob/main/CONTRIBUTING.md\n-->\n\n<!-- Put an `x` in \"[ ]\" to check a box) -->\n\n## Types of changes\n\n<!-- What types of changes does this PR introduce -->\n<!-- Only support choose one type, if there are multiple types, you can add the `Type` column in the Changelog. -->\n\n- [x] New feature\n- [ ] Bug fix\n- [ ] Enhancement\n- [ ] Component style change\n- [ ] Typescript definition change\n- [ ] Documentation change\n- [ ] Coding style change\n- [ ] Refactoring\n- [ ] Test cases\n- [ ] Continuous integration\n- [ ] Breaking change\n- [ ] Others\n\n## Background and context\n\n<!-- Explain what problem does the PR solve -->\n<!-- Link to related open issues if applicable -->\n\n## Solution\n\n<!-- Describe how the problem is fixed in detail -->\n\n## How is the change tested?\n\n<!-- Unit tests should be added/updated for bug fixes and new features, if applicable -->\n<!-- Please describe how you tested the change. E.g. Creating/updating unit tests or attaching a screenshot of how it works with your change -->\n\n## Changelog\n\n| Component | Changelog(CN) | Changelog(EN) | Related issues |\n| --------- | ------------- | ------------- | -------------- |\n|  upload  |    新增 `bundle-upload` 属性，支持捆绑上传    |  Added `bundle-upload` property to support bundle upload   |  Close #647  |\n\n<!-- If there are multiple types, you can add the `Type` column in the Changelog, the value of the column is the same as `Types of changes` -->\n\n## Checklist:\n\n- [ ] Test suite passes (`npm run test`)\n- [ ] Provide changelog for relevant changes (e.g. bug fixes and new features) if applicable.\n- [ ] Changes are submitted to the appropriate branch (e.g. features should be submitted to `feature` branch and others\n  should be submitted to `main` branch)\n\n## Other information\n\n<!-- Please describe what other information that should be taken care of. E.g. describe the impact if introduce a breaking change -->\n"
  },
  {
    "path": "packages/arco-changelog/src/utils/config.ts",
    "content": "import path from 'path';\nimport fs from 'fs-extra';\n\nexport const getConfig = async () => {\n  const filename = path.resolve(process.cwd(), 'changelog.config.ts');\n  try {\n    await fs.access(filename);\n    return import(filename);\n  } catch {\n    return {};\n  }\n};\nlet packageCache: Record<string, any>;\n\nexport const getPackage = async (): Promise<Record<string, any>> => {\n  if (!packageCache) {\n    const content = await fs.readFile(\n      path.resolve(process.cwd(), 'package.json'),\n      'utf8'\n    );\n    try {\n      packageCache = JSON.parse(content);\n    } catch {}\n  }\n\n  return packageCache ?? {};\n};\n"
  },
  {
    "path": "packages/arco-changelog/src/utils/convert-case.ts",
    "content": "export const toKebabCase = (string: string): string => {\n  return string.replace(/[A-Z]+/g, (match, offset) => {\n    return `${offset > 0 ? '-' : ''}${match.toLocaleLowerCase()}`;\n  });\n};\n\nexport const toPascalCase = (string: string): string => {\n  return string\n    .replace(/^./, (match) => match.toLocaleUpperCase())\n    .replace(/-(.)/g, (match, p1: string) => {\n      return p1.toLocaleUpperCase();\n    });\n};\n"
  },
  {
    "path": "packages/arco-changelog/src/utils/invert.ts",
    "content": "export const invertKeyValues = (obj: Record<string, string>) => {\n  return Object.keys(obj).reduce((acc, key) => {\n    acc[obj[key]] = key;\n    return acc;\n  }, {} as Record<string, string>);\n};\n"
  },
  {
    "path": "packages/arco-changelog/src/utils/version.ts",
    "content": "const getLastVersion = (content: string) => {\n  const match = content.match(/## (\\d+\\.\\d+\\.\\d+(-beta\\.\\d+)?)/);\n  return match?.[1];\n};\n\nconst getBetaVersions = (content: string) => {\n  const matches = Array.from(\n    content.matchAll(/## (\\d+\\.\\d+\\.\\d+(-beta\\.\\d+)?)/g)\n  );\n  const versions = [];\n  for (const item of matches) {\n    if (/beta/.test(item[1])) {\n      versions.push(item[1]);\n    } else {\n      break;\n    }\n  }\n  return versions;\n};\n\nconst getVersionNumber = (version: string): number => {\n  if (!version) {\n    return 0;\n  }\n  switch (version) {\n    case 'alpha':\n      return -3;\n    case 'beta':\n      return -2;\n    case 'rc':\n      return -1;\n    default:\n      return parseInt(version, 10);\n  }\n};\n\nexport const compareVersion = (v1: string, v2: string) => {\n  const mainArray1 = v1.split('-');\n  const mainArray2 = v2.split('-');\n  // Major version\n  const array1 = mainArray1[0].split('.');\n  const array2 = mainArray2[0].split('.');\n  const maxL = Math.max(array1.length, array2.length);\n  for (let i = 0; i < maxL; i++) {\n    const v1 = getVersionNumber(array1[i]);\n    const v2 = getVersionNumber(array2[i]);\n    if (v1 !== v2) {\n      return v1 > v2 ? 1 : -1;\n    }\n  }\n\n  // Beta part\n  const subArray1 = (mainArray1[1] ?? '').split('.');\n  const subArray2 = (mainArray2[1] ?? '').split('.');\n  const maxSL = Math.max(subArray1.length, subArray2.length);\n  for (let i = 0; i < maxSL; i++) {\n    const v1 = getVersionNumber(subArray1[i]);\n    const v2 = getVersionNumber(subArray2[i]);\n    if (v1 !== v2) {\n      return v1 > v2 ? 1 : -1;\n    }\n  }\n\n  return 0;\n};\n"
  },
  {
    "path": "packages/arco-changelog/src/vue/emit-files.ts",
    "content": "import path from 'path';\nimport { Changelog, EmitFile } from '../interface';\n\nexport const emitFiles = (changelog: Changelog): EmitFile[] => {\n  const allCN: Record<string, any> = {};\n  const addEN: Record<string, any> = {};\n  const componentCN: Record<string, any> = {};\n  const componentEN: Record<string, any> = {};\n\n  for (const item of changelog.list) {\n    const contentCN = `${item.changelogZh} ([#${item.pr.id}](${item.pr.url}))`;\n    const contentEN = `${item.changelogEn} ([#${item.pr.id}](${item.pr.url}))`;\n    addAll({ ...item, content: contentCN }, allCN);\n    addAll({ ...item, content: contentEN }, addEN);\n    addComponent({ ...item, content: contentCN }, componentCN);\n    addComponent({ ...item, content: contentEN }, componentEN);\n  }\n\n  const emits: EmitFile[] = [\n    {\n      file: 'CHANGELOG.zh-CN.md',\n      template: path.resolve(__dirname, 'template.zh-CN.njk'),\n      data: { version: changelog.version, date: changelog.date, ...allCN },\n    },\n    {\n      file: 'CHANGELOG.md',\n      template: path.resolve(__dirname, 'template.en-US.njk'),\n      data: { version: changelog.version, date: changelog.date, ...addEN },\n    },\n  ];\n\n  emits.push(...getComponentEmits(componentCN, true));\n  emits.push(...getComponentEmits(componentEN));\n\n  return emits;\n};\n\nconst addAll = (data: any, changelog: any) => {\n  if (!changelog[data.type]) {\n    changelog[data.type] = [];\n  }\n  if (!data.component || data.component === 'common') {\n    changelog[data.type].push(data.content);\n  } else {\n    changelog[data.type].push(`**${data.component}:** ${data.content}`);\n  }\n};\n\nconst addComponent = (data: any, changelog: any) => {\n  if (!data.component || data.component === 'common') {\n    return;\n  }\n  if (!changelog[data.component]) {\n    changelog[data.component] = {};\n  }\n  if (!changelog[data.component][data.type]) {\n    changelog[data.component][data.type] = [];\n  }\n  changelog[data.component][data.type].push(data.content);\n};\n\nconst getComponentEmits = (changelog: Record<string, any>, zh?: boolean) => {\n  const emits: EmitFile[] = [];\n  for (const component of Object.keys(changelog)) {\n    const file =\n      component === 'icon'\n        ? `components/icon-component/CHANGELOG.${zh ? 'zh-CN.md' : 'md'}`\n        : `components/${component}/CHANGELOG.${zh ? 'zh-CN.md' : 'md'}`;\n\n    emits.push({\n      file,\n      template: path.resolve(\n        __dirname,\n        `template.${zh ? 'zh-CN' : 'en-US'}.njk`\n      ),\n      data: {\n        version: changelog.version,\n        date: changelog.date,\n        ...changelog[component],\n      },\n    });\n  }\n  return emits;\n};\n"
  },
  {
    "path": "packages/arco-changelog/src/vue/template.en-US.njk",
    "content": "## {{ version }}\n\n`{{ date }}`\n\n{% if attention -%}\n  ### ⚠️ Important Attention\n\n  {% for content in attention -%}\n    - {{ content }}\n  {% endfor %}\n\n{% endif %}\n{% if feature -%}\n  ### 🆕 Feature\n\n  {% for content in feature -%}\n    - {{ content }}\n  {% endfor %}\n\n{% endif %}\n{% if bugfix -%}\n  ### 🐛 BugFix\n\n  {% for content in bugfix -%}\n    - {{ content }}\n  {% endfor %}\n\n{% endif %}\n{% if enhancement -%}\n  ### 💎 Enhancement\n\n  {% for content in enhancement -%}\n    - {{ content }}\n  {% endfor %}\n\n{% endif %}\n{% if style -%}\n  ### 💅 Style\n\n  {% for content in style -%}\n    - {{ content }}\n  {% endfor %}\n\n{% endif %}\n{% if typescript -%}\n  ### 🆎 TypeScript\n\n  {% for content in typescript -%}\n    - {{ content }}\n  {% endfor %}\n\n{% endif %}\n"
  },
  {
    "path": "packages/arco-changelog/src/vue/template.zh-CN.njk",
    "content": "## {{ version }}\n\n`{{ date }}`\n\n{% if attention -%}\n  ### ⚠️ 重点注意\n\n  {% for content in attention -%}\n    - {{ content }}\n  {% endfor %}\n\n{% endif %}\n{% if feature -%}\n  ### 🆕 新增功能\n\n  {% for content in feature -%}\n    - {{ content }}\n  {% endfor %}\n\n{% endif %}\n{% if bugfix -%}\n  ### 🐛 问题修复\n\n  {% for content in bugfix -%}\n    - {{ content }}\n  {% endfor %}\n\n{% endif %}\n{% if enhancement -%}\n  ### 💎 功能优化\n\n  {% for content in enhancement -%}\n    - {{ content }}\n  {% endfor %}\n\n{% endif %}\n{% if style -%}\n  ### 💅 样式更新\n\n  {% for content in style -%}\n    - {{ content }}\n  {% endfor %}\n\n{% endif %}\n{% if typescript -%}\n  ### 🆎 类型修正\n\n  {% for content in typescript -%}\n    - {{ content }}\n  {% endfor %}\n\n{% endif %}\n"
  },
  {
    "path": "packages/arco-changelog/src/vue/vue.config.ts",
    "content": "import { emitFiles } from './emit-files';\n\nexport default {\n  repo: 'arco-design/arco-design-vue',\n  merged: true,\n  emitFiles,\n};\n"
  },
  {
    "path": "packages/arco-changelog/tsconfig.json",
    "content": "{\n  \"compilerOptions\": {\n    \"sourceMap\": true,\n    \"outDir\": \"dist\",\n    \"module\": \"CommonJS\",\n    \"target\": \"ES2015\",\n    \"allowJs\": true,\n    \"moduleResolution\": \"node\",\n    \"baseUrl\": \".\",\n    \"strict\": true,\n    \"resolveJsonModule\": true,\n    \"esModuleInterop\": true,\n    \"skipLibCheck\": true,\n    \"lib\": [\n      \"DOM\",\n      \"ES2020\"\n    ]\n  },\n  \"include\": [\n    \"src\"\n  ]\n}\n"
  },
  {
    "path": "packages/arco-vue-docs/.eslintignore",
    "content": "/*.json\n/*.js\n"
  },
  {
    "path": "packages/arco-vue-docs/.eslintrc.js",
    "content": "module.exports = {\n  parser: 'vue-eslint-parser',\n  parserOptions: {\n    // Parser that checks the content of the <script> tag\n    parser: '@typescript-eslint/parser',\n    sourceType: 'module',\n    ecmaVersion: 2020,\n    ecmaFeatures: {\n      jsx: true,\n    },\n  },\n  env: {\n    browser: true,\n    node: true,\n  },\n  plugins: ['@typescript-eslint'],\n  extends: [\n    // Airbnb JavaScript Style Guide https://github.com/airbnb/javascript\n    'airbnb-base',\n    'plugin:@typescript-eslint/recommended',\n    'plugin:import/typescript',\n    'plugin:vue/vue3-recommended',\n    'plugin:prettier/recommended',\n  ],\n  settings: {\n    'import/resolver': {\n      typescript: {\n        project: './tsconfig.json',\n      },\n    },\n  },\n  rules: {\n    'prettier/prettier': 1,\n    'vue/require-default-prop': 0,\n    'vue/singleline-html-element-content-newline': 0,\n    'vue/max-attributes-per-line': 0,\n    'vue/html-self-closing': 0,\n    '@typescript-eslint/no-explicit-any': 0,\n    '@typescript-eslint/explicit-module-boundary-types': 0,\n    '@typescript-eslint/no-non-null-assertion': 0,\n    '@typescript-eslint/ban-ts-comment': 0,\n    'import/extensions': [\n      'error',\n      'ignorePackages',\n      { js: 'never', jsx: 'never', ts: 'never', tsx: 'never' },\n    ],\n    'import/no-extraneous-dependencies': 0,\n    'import/no-unresolved': [2, { caseSensitive: false }],\n    'import/no-named-as-default': 0,\n    'import/prefer-default-export': 0,\n    'no-underscore-dangle': 0,\n    'no-nested-ternary': 0,\n    'no-shadow': 0,\n    'prefer-template': 1,\n    'no-param-reassign': 0,\n    'no-plusplus': 0,\n    'no-use-before-define': 0,\n    'no-restricted-syntax': 0,\n    'no-empty': [2, { allowEmptyCatch: true }],\n    'no-bitwise': 0,\n    'no-return-assign': 0,\n    'no-unused-expressions': [\n      'error',\n      { allowShortCircuit: true, allowTernary: true },\n    ],\n    'no-continue': 0,\n    '@typescript-eslint/no-unused-vars': 0,\n    '@typescript-eslint/no-empty-function': 0,\n  },\n};\n"
  },
  {
    "path": "packages/arco-vue-docs/.gitignore",
    "content": ".idea/\n.vscode/\n\nnode_modules/\n**/.DS_Store\n\ndist/\n\nindex.zip\n"
  },
  {
    "path": "packages/arco-vue-docs/.prettierrc.js",
    "content": "module.exports = {\n  tabWidth: 2,\n  semi: true,\n  printWidth: 80,\n  singleQuote: true,\n  quoteProps: 'consistent',\n  endOfLine: 'auto',\n  htmlWhitespaceSensitivity: 'strict',\n};\n"
  },
  {
    "path": "packages/arco-vue-docs/.stylelintrc.js",
    "content": "module.exports = {\n  extends: [\n    'stylelint-config-standard',\n    'stylelint-config-rational-order',\n    'stylelint-config-prettier',\n  ],\n  defaultSeverity: 'warning',\n  plugins: ['stylelint-order'],\n  rules: {\n    'at-rule-no-unknown': [\n      true,\n      {\n        ignoreAtRules: ['plugin'],\n      },\n    ],\n    'rule-empty-line-before': [\n      'always',\n      {\n        except: ['after-single-line-comment', 'first-nested'],\n      },\n    ],\n    'selector-pseudo-element-no-unknown': [\n      true,\n      {\n        ignorePseudoElements: ['v-deep'],\n      },\n    ],\n  },\n};\n"
  },
  {
    "path": "packages/arco-vue-docs/README.md",
    "content": "# Arco Design Vue Document Station\n\nThe site for Arco Design Vue.\n\n[Official website](https://arco.design/vue)\n\n## Developing\n\n1. Install dependencies\n\n```\nyarn # or npm install\n```\n\n2. Start local development environment\n\n```\nnpm run start\n```\n"
  },
  {
    "path": "packages/arco-vue-docs/app.vue",
    "content": "<template>\n  <div class=\"arco-vue-site\">\n    <div\n      :class=\"[\n        'arco-vue-body',\n        { 'arco-vue-body-has-notice': showGlobalNotice },\n      ]\"\n    >\n      <a-alert\n        v-if=\"showGlobalNotice\"\n        class=\"site-global-notice\"\n        :show-icon=\"false\"\n        closable\n        banner\n        @close=\"handleCloseGlobalNotice\"\n      >\n        <a\n          href=\"https://bytedance.feishu.cn/docx/doxcnHMY3EFM4N7GK8H2no1mZve\"\n          rel=\"Arco Global Notice\"\n          target=\"_blank\"\n        >\n          <span class=\"content\">\n            Arco Toolbox Figma 插件工具全新发布，有奖公测中~\n          </span>\n          <b>\n            查看更多\n            <icon-right />\n          </b>\n        </a>\n      </a-alert>\n      <aside-nav :show=\"showNav\" @button-click=\"toggleNav\" />\n      <router-view />\n    </div>\n    <ThemeBox />\n    <a-back-top :style=\"{ right: '70px', bottom: '80px' }\">\n      <a-button class=\"site-backtop-btn\" shape=\"circle\" size=\"large\">\n        <icon-up />\n      </a-button>\n    </a-back-top>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport {\n  defineComponent,\n  provide,\n  reactive,\n  ref,\n  watch,\n  onMounted,\n  onBeforeUnmount,\n} from 'vue';\nimport { useRoute } from 'vue-router';\nimport { PageDurationTracker, teaLog } from '@arco-materials/site-utils';\nimport { collapseInjectionKey } from './context';\nimport AsideNav from './components/aside-nav/index.vue';\nimport { getLocalStorage, setLocalStorage } from './utils/local-storage';\nimport ThemeBox from './components/theme-box/index.vue';\n// import Locale from '@arco-design/web-vue/es/locale';\n// import { getLocalStorage, setLocalStorage } from './utils/local-storage';\n\nexport default defineComponent({\n  name: 'App',\n  components: {\n    AsideNav,\n    ThemeBox,\n  },\n  props: {\n    theme: String,\n    language: String,\n  },\n  emits: ['themeChange', 'languageChange'],\n  setup() {\n    const showNav = ref(true);\n    const showAnchor = ref(true);\n    const showGlobalNotice = ref(\n      getLocalStorage('arco-global-notice') !== '23-hide'\n    );\n\n    const handleCloseGlobalNotice = () => {\n      showGlobalNotice.value = false;\n      setLocalStorage('arco-global-notice', '23-hide');\n    };\n\n    const toggleNav = () => {\n      showNav.value = !showNav.value;\n    };\n\n    const toggleAnchor = () => {\n      showAnchor.value = !showAnchor.value;\n    };\n\n    provide(\n      collapseInjectionKey,\n      reactive({\n        showNav,\n        showAnchor,\n        toggleNav,\n        toggleAnchor,\n      })\n    );\n\n    // provide('toggleTheme', toggleTheme);\n    // provide('lang', lang);\n    // locale.value = lang.value;\n    // provide('changeLanguage', changeLanguage);\n\n    const route = useRoute();\n    let tracker: PageDurationTracker;\n    let originPath = route.path;\n\n    onMounted(() => {\n      tracker = new PageDurationTracker((params) => {\n        teaLog('page_view', { ...params, url_path: originPath });\n      });\n    });\n\n    onBeforeUnmount(() => {\n      tracker = null;\n    });\n\n    watch(\n      () => route.path,\n      (path, prePath) => {\n        originPath = prePath;\n        tracker.handleReport();\n      }\n    );\n\n    return {\n      showNav,\n      toggleNav,\n      showGlobalNotice,\n      handleCloseGlobalNotice,\n    };\n  },\n});\n</script>\n\n<style lang=\"less\" src=\"./style/index.less\" />\n"
  },
  {
    "path": "packages/arco-vue-docs/components/anchor-head/index.vue",
    "content": "<template>\n  <component :is=\"`h${level}`\" :id=\"href\" class=\"anchor-head\">\n    <a class=\"anchor-link\" :href=\"`#${href}`\" @click.prevent=\"handleClickCopy\">\n      <icon-link />\n    </a>\n    <slot />\n  </component>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue';\nimport { Message } from '@web-vue/components/index';\nimport copy from '../../utils/clipboard';\n\nexport default defineComponent({\n  name: 'AnchorHead',\n  props: {\n    level: [Number, String],\n    href: String,\n  },\n  setup() {\n    const handleClickCopy = (e: MouseEvent) => {\n      const copyLink = (e.currentTarget as HTMLAnchorElement).href;\n      if (copyLink) {\n        copy(copyLink)\n          .then(() => {\n            Message.success('Copy Success!');\n          })\n          .catch(() => {\n            Message.error('Copy Failed! Please try again.');\n          });\n      }\n    };\n\n    return {\n      handleClickCopy,\n    };\n  },\n});\n</script>\n\n<style scoped lang=\"less\" src=\"./style.less\" />\n"
  },
  {
    "path": "packages/arco-vue-docs/components/anchor-head/style.less",
    "content": ".anchor-head {\n  position: relative;\n\n  &:hover {\n    .anchor-link {\n      opacity: 1;\n    }\n  }\n\n  .anchor-link {\n    position: absolute;\n    top: 50%;\n    left: -22px;\n    display: inline-block;\n    padding-right: 6px;\n    color: var(--color-text-3);\n    font-size: 16px;\n    transform: translateY(-50%);\n    opacity: 0;\n\n    &:hover {\n      color: rgb(var(--primary-6));\n    }\n  }\n}\n"
  },
  {
    "path": "packages/arco-vue-docs/components/article/context.ts",
    "content": "import { InjectionKey } from 'vue';\nimport { AnchorData } from '../aside-anchor/interface';\n\ninterface ArticleContext {\n  anchors: AnchorData[];\n  addAnchor: (data: AnchorData) => void;\n  removeAnchor: (href: string) => void;\n}\n\nexport const articleInjectionKey: InjectionKey<ArticleContext> =\n  Symbol('ArcoArticle');\n"
  },
  {
    "path": "packages/arco-vue-docs/components/article/index.vue",
    "content": "<template>\n  <aside-anchor\n    v-if=\"anchors && anchors.length > 0\"\n    :show=\"collapseCtx.showAnchor\"\n    :anchors=\"anchors\"\n    @button-click=\"collapseCtx.toggleAnchor\"\n  />\n  <main :class=\"cls\">\n    <article class=\"arco-vue-article\">\n      <div class=\"article-header\">\n        <div v-if=\"meta\" class=\"article-meta\">\n          <span class=\"article-type\">{{ meta.type }}</span>\n          <template v-if=\"meta.category\">\n            <span class=\"separator\">/</span>\n            <span class=\"article-category\">{{ meta.category }}</span>\n          </template>\n        </div>\n        <h1 class=\"article-title\">{{ title }}</h1>\n        <div v-if=\"description\" class=\"article-description\">\n          {{ description }}\n        </div>\n        <ChangelogBox v-if=\"changelog\" :changelog=\"changelog\" />\n      </div>\n      <div class=\"article-content\">\n        <slot />\n      </div>\n    </article>\n    <arco-footer />\n  </main>\n</template>\n\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  inject,\n  PropType,\n  provide,\n  reactive,\n} from 'vue';\nimport { useI18n } from 'vue-i18n';\nimport AsideAnchor from '../aside-anchor/index.vue';\nimport ArcoFooter from '../footer/index.vue';\nimport { CollapseContext, collapseInjectionKey } from '../../context';\nimport { articleInjectionKey } from './context';\nimport { AnchorData } from '../aside-anchor/interface';\nimport ChangelogBox from '../changelog-box/index.vue';\n\nexport default defineComponent({\n  name: 'ArcoArticle',\n  components: {\n    ChangelogBox,\n    AsideAnchor,\n    ArcoFooter,\n  },\n  props: {\n    title: String,\n    description: String,\n    changelog: Array,\n    meta: Object as PropType<{ category: string; type: string }>,\n  },\n  setup(props) {\n    const { locale } = useI18n();\n    const collapseCtx = inject<CollapseContext>(collapseInjectionKey);\n\n    const getMessage = (zh: string, en: string) => {\n      return locale.value === 'zh-CN' ? zh : en;\n    };\n\n    const anchors = reactive<AnchorData[]>([]);\n\n    provide(\n      articleInjectionKey,\n      reactive({\n        anchors,\n        addAnchor: (data: AnchorData) => {\n          anchors.push(data);\n        },\n        removeAnchor: (href: string) => {},\n      })\n    );\n\n    const cls = computed(() => [\n      'arco-vue-main',\n      {\n        'aside-nav-show': collapseCtx?.showNav,\n        'aside-anchor-show': anchors.length > 0 && collapseCtx?.showAnchor,\n      },\n    ]);\n\n    return {\n      cls,\n      locale,\n      collapseCtx,\n      getMessage,\n      anchors,\n    };\n  },\n});\n</script>\n\n<style scoped lang=\"less\" src=\"./style.less\" />\n"
  },
  {
    "path": "packages/arco-vue-docs/components/article/style.less",
    "content": "@import '../../../web-vue/components/style/theme/css-variables.less';\n\n.arco-vue-main {\n  margin-left: 13px;\n  transition: margin-left 200ms, margin-right 200ms;\n\n  &.aside-nav-show {\n    margin-left: 261px;\n  }\n\n  &.aside-anchor-show {\n    margin-right: 181px;\n    border-right-color: var(--color-bg-1);\n  }\n}\n\n.arco-vue-article {\n  max-width: 985px;\n  min-height: 800px;\n  margin: 0 auto;\n  padding: 0 56px 100px;\n\n  .article-header {\n    position: relative;\n    padding: 36px 0;\n    border-bottom: 1px solid var(--color-border);\n  }\n\n  .article-meta {\n    .separator {\n      padding: 0 5px;\n      color: var(--color-text-4);\n    }\n\n    .article-category {\n      color: var(--color-text-1);\n      font-weight: 500;\n    }\n  }\n\n  .article-title {\n    margin: 20px 0 12px;\n    color: var(--color-text-1);\n    font-weight: 500;\n    font-size: @font-size-display-1;\n  }\n\n  .article-description {\n    color: var(--color-text-2);\n    line-height: 20px;\n\n    &:not(:last-child) {\n      margin-right: 200px;\n    }\n  }\n\n  .article-content {\n    &:deep(img) {\n      max-width: 100%;\n    }\n  }\n\n  //& :deep(a) {\n  //  color: rgb(var(--arcoblue-6));\n  //  text-decoration: none;\n  //}\n  & :deep(h3) {\n    margin-top: 24px;\n    line-height: 24px;\n  }\n\n  & :deep(code) {\n    padding: 2px 8px;\n    color: var(--color-text-2);\n    background-color: var(--color-neutral-2);\n  }\n\n  & :deep(.code-content) {\n    box-sizing: border-box;\n    margin: 0;\n    padding: 28px 48px;\n    background-color: var(--color-neutral-2);\n    border-radius: 4px;\n\n    code {\n      padding: 0;\n      white-space: pre-wrap;\n    }\n  }\n\n  & :deep(.component-api-table) {\n    .arco-table-td:nth-child(1) {\n      white-space: nowrap;\n    }\n\n    .arco-table-td:nth-child(3) {\n      code {\n        color: rgb(var(--primary-6));\n        font-size: 12px;\n        background: unset;\n      }\n    }\n\n    .arco-table-td:nth-child(4) {\n      min-width: 100px;\n\n      code {\n        color: rgb(var(--primary-6));\n        font-size: 12px;\n        background: unset;\n      }\n    }\n\n    .arco-table-td:nth-child(5) {\n      width: 10%;\n      max-width: 100px;\n    }\n  }\n}\n"
  },
  {
    "path": "packages/arco-vue-docs/components/aside-anchor/index.vue",
    "content": "<template>\n  <aside :class=\"cls\">\n    <div class=\"aside-top\">\n      <a-button\n        :class=\"buttonCls\"\n        shape=\"circle\"\n        size=\"large\"\n        @click=\"$emit('buttonClick')\"\n      >\n        <icon-right v-if=\"show\" />\n        <icon-left v-else />\n      </a-button>\n    </div>\n    <a-anchor line-less>\n      <a-anchor-link\n        v-for=\"(item, index) in anchors\"\n        :key=\"index\"\n        :href=\"item.href\"\n      >\n        {{ item.title }}\n      </a-anchor-link>\n      <a-anchor-link v-if=\"hasAPIAnchor\" key=\"article-api\" href=\"#API\">\n        API\n      </a-anchor-link>\n    </a-anchor>\n  </aside>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, inject, onMounted, ref } from 'vue';\nimport { useI18n } from 'vue-i18n';\nimport anchor from '@web-vue/components/anchor/anchor.vue';\n\nexport default defineComponent({\n  name: 'AsideAnchor',\n  props: {\n    anchors: {\n      type: Array,\n    },\n    show: {\n      type: Boolean,\n      default: true,\n    },\n  },\n  emits: ['buttonClick'],\n  setup(props) {\n    const { locale } = useI18n();\n    const hasAPIAnchor = ref(false);\n\n    const getMessage = (zh: string, en: string) => {\n      return locale.value === 'zh-CN' ? zh : en;\n    };\n\n    const cls = computed(() => [\n      'arco-vue-aside',\n      {\n        'arco-vue-aside-collapse': !props.show,\n      },\n    ]);\n\n    const buttonCls = computed(() => [\n      'aside-collapse-btn',\n      {\n        'aside-collapse-btn-collapse': !props.show,\n      },\n    ]);\n\n    onMounted(() => {\n      hasAPIAnchor.value = !!document.querySelector('.article-content #API');\n    });\n\n    return {\n      cls,\n      buttonCls,\n      hasAPIAnchor,\n      getMessage,\n    };\n  },\n});\n</script>\n\n<style scoped lang=\"less\" src=\"./style.less\" />\n"
  },
  {
    "path": "packages/arco-vue-docs/components/aside-anchor/interface.ts",
    "content": "export interface AnchorData {\n  href: string;\n  title: {\n    'zh-CN': string;\n    'en-US': string;\n  };\n}\n"
  },
  {
    "path": "packages/arco-vue-docs/components/aside-anchor/style.less",
    "content": ".arco-vue-aside {\n  position: fixed;\n  top: 61px;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  width: 180px;\n  padding: 0 24px;\n  background-color: var(--color-bg-1);\n  border-left: 1px solid var(--color-border);\n  transition: right 200ms;\n\n  .aside-top {\n    margin: 40px 0;\n  }\n\n  .aside-collapse-btn {\n    position: relative;\n    left: 0;\n    transition: left 200ms;\n\n    &-collapse {\n      left: -52px;\n      width: 28px;\n      background-color: var(--color-bg-5);\n      border-radius: 18px 0 0 18px;\n      box-shadow: -1px 0 5px 0 rgba(0, 0, 0, 0.1);\n    }\n  }\n\n  .aside-expand-btn {\n    position: absolute;\n    left: -28px;\n    width: 28px;\n    color: var(--color-text-2);\n    background-color: var(--color-bg-5);\n    border: 1px solid transparent;\n    border-radius: 18px 0 0 18px;\n    box-shadow: -1px 0 5px 0 rgb(0 0 0 / 10%);\n  }\n\n  &&-collapse {\n    right: -180px;\n  }\n}\n"
  },
  {
    "path": "packages/arco-vue-docs/components/aside-nav/index.vue",
    "content": "<template>\n  <aside\n    :class=\"cls\"\n    @transitionstart=\"handleTranslationStart\"\n    @transitionend=\"handleTranslationEnd\"\n  >\n    <nav class=\"aside-nav\">\n      <div class=\"aside-nav-header\">\n        <div class=\"type-radio-group\">\n          <a class=\"type-radio-button\" href=\"/react/docs/start\">React</a>\n          <a class=\"type-radio-button type-radio-button-active\">Vue</a>\n        </div>\n      </div>\n      <div v-show=\"showNav\" class=\"aside-nav-body\">\n        <template v-for=\"group in docsMenuList\" :key=\"group.name\">\n          <div class=\"aside-nav-group\">\n            <div class=\"aside-nav-group-name\">{{\n              t(`${group.name}.name`)\n            }}</div>\n            <ul class=\"aside-nav-list\">\n              <router-link\n                v-for=\"item of group.menu\"\n                :key=\"item.name\"\n                v-slot=\"{ href, navigate, isActive }\"\n                :to=\"\n                  locale === 'en-US'\n                    ? item.path.replace('vue/', 'vue/en-US/')\n                    : item.path\n                \"\n                custom\n              >\n                <li\n                  :class=\"[\n                    'aside-nav-item',\n                    { 'aside-nav-item-active': isActive },\n                  ]\"\n                >\n                  <a\n                    :href=\"\n                      locale === 'en-US' ? href.replace('#', '#/en-US') : href\n                    \"\n                    class=\"aside-nav-item-link\"\n                    @click=\"navigate\"\n                  >\n                    {{ t(`${group.name}.${item.name}`) }}\n                  </a>\n                </li>\n              </router-link>\n            </ul>\n          </div>\n        </template>\n\n        <div class=\"aside-nav-group\">\n          <div class=\"aside-nav-group-name\">{{ t('component.name') }}</div>\n          <div\n            v-for=\"group of componentMenu\"\n            :key=\"group.name\"\n            class=\"aside-nav-group\"\n          >\n            <h4 class=\"aside-nav-component-group-name\">\n              {{ t(`group.${group.name}`) }}\n            </h4>\n            <ul class=\"aside-nav-list\">\n              <router-link\n                v-for=\"item of group.list\"\n                :key=\"item.name\"\n                v-slot=\"{ href, navigate, isActive }\"\n                :to=\"\n                  locale === 'en-US'\n                    ? item.path.replace('vue/', 'vue/en-US/')\n                    : item.path\n                \"\n                custom\n              >\n                <li\n                  :class=\"[\n                    'aside-nav-item',\n                    { 'aside-nav-item-active': isActive },\n                  ]\"\n                >\n                  <a\n                    :href=\"\n                      locale === 'en-US' ? href.replace('#', '#/en-US') : href\n                    \"\n                    class=\"aside-nav-item-link\"\n                    @click=\"navigate\"\n                  >\n                    {{ t(`component.${item.name}`) }}\n                  </a>\n                </li>\n              </router-link>\n            </ul>\n          </div>\n        </div>\n      </div>\n    </nav>\n    <a-button\n      class=\"aside-nav-btn\"\n      shape=\"circle\"\n      size=\"mini\"\n      @click=\"$emit('buttonClick')\"\n    >\n      <icon-left v-if=\"show\" />\n      <icon-right v-else />\n    </a-button>\n  </aside>\n</template>\n\n<script>\nimport { computed, defineComponent, ref } from 'vue';\nimport { useI18n } from 'vue-i18n';\nimport { componentMenu, docsMenuList } from '../../router';\n\nexport default defineComponent({\n  name: 'AsideNav',\n  props: {\n    show: {\n      type: Boolean,\n      default: true,\n    },\n  },\n  emits: ['buttonClick'],\n  setup(props) {\n    const { t, locale } = useI18n();\n    const showNav = ref(true);\n\n    const handleTranslationStart = () => {\n      if (props.show) {\n        showNav.value = true;\n      }\n    };\n\n    const handleTranslationEnd = () => {\n      if (!props.show) {\n        showNav.value = false;\n      }\n    };\n\n    const cls = computed(() => [\n      'arco-vue-aside-left',\n      {\n        'arco-vue-aside-left-collapse': !props.show,\n      },\n    ]);\n\n    return {\n      showNav,\n      componentMenu,\n      docsMenuList,\n      t,\n      locale,\n      cls,\n      handleTranslationStart,\n      handleTranslationEnd,\n    };\n  },\n});\n</script>\n\n<style scoped lang=\"less\" src=\"./style.less\" />\n"
  },
  {
    "path": "packages/arco-vue-docs/components/aside-nav/style.less",
    "content": ".arco-vue-aside-left {\n  position: fixed;\n  top: 61px;\n  bottom: 0;\n  left: 0;\n  z-index: 100;\n  margin-left: 0;\n  border-right: 1px solid var(--color-border);\n  transition: margin-left 200ms;\n\n  &-collapse {\n    margin-left: -248px;\n  }\n\n  .aside-nav-btn {\n    position: absolute;\n    top: 186px;\n    right: -12px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background-color: var(--color-bg-5);\n    border: 1px solid var(--color-fill-3);\n    box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.1);\n    transition: all 0.15s;\n\n    &:hover {\n      background-color: var(--color-bg-5);\n      border: 1px solid var(--color-fill-3);\n      transform: scale(1.1);\n    }\n  }\n}\n\n.aside-nav {\n  display: flex;\n  flex-direction: column;\n  width: 260px;\n  height: 100%;\n  background-color: var(--color-bg-1);\n\n  &-header {\n    padding: 20px;\n\n    .type-radio {\n      &-group {\n        display: flex;\n        padding: 2px;\n        background-color: var(--color-fill-2);\n      }\n\n      &-button {\n        width: 80px;\n        margin: 2px;\n        padding: 0 12px;\n        color: var(--color-text-2);\n        font-size: 16px;\n        line-height: 28px;\n        text-align: center;\n        text-decoration: none;\n        border-radius: var(--border-radius-small);\n        cursor: pointer;\n\n        &-active {\n          color: rgb(var(--primary-6));\n          background-color: var(--color-bg-5);\n        }\n\n        &:hover {\n          background-color: var(--color-bg-5);\n        }\n      }\n    }\n  }\n\n  &-body {\n    flex-shrink: 1;\n    padding: 4px 12px;\n    overflow-y: auto;\n\n    &:hover {\n      padding-right: 2px;\n\n      &::-webkit-scrollbar {\n        display: block;\n      }\n    }\n\n    &::-webkit-scrollbar {\n      display: none;\n      width: 10px;\n      background: transparent;\n    }\n\n    &::-webkit-scrollbar-thumb {\n      background: var(--color-fill-3) content-box;\n      border: 2px solid transparent;\n      border-radius: 5px;\n\n      &:hover {\n        background-color: var(--color-fill-4);\n      }\n    }\n\n    li {\n      list-style: none;\n    }\n  }\n\n  &-group {\n    &-name {\n      margin: 0 0 4px;\n      padding: 0 12px;\n      color: var(--color-text-1);\n      font-weight: 500;\n      font-size: 16px;\n      line-height: 40px;\n    }\n  }\n\n  &-component-group {\n    &-name {\n      margin: 0 0 4px;\n      padding: 0 12px;\n      color: var(--color-text-3);\n      font-weight: 400;\n      line-height: 40px;\n    }\n  }\n\n  &-list {\n    padding: 0;\n  }\n\n  &-item {\n    margin: 0 0 4px;\n    padding: 0 12px;\n\n    .aside-nav-item-link {\n      overflow: hidden;\n      white-space: nowrap;\n      text-overflow: ellipsis;\n    }\n\n    &-active {\n      font-weight: 500;\n      background-color: var(--color-fill-2) !important;\n\n      .aside-nav-item-link {\n        color: rgb(var(--arcoblue-6));\n      }\n    }\n\n    &:hover {\n      background-color: var(--color-fill-1);\n    }\n\n    &-link {\n      display: block;\n      padding-left: 20px;\n      color: var(--color-text-1);\n      line-height: 40px;\n      text-decoration: none;\n    }\n  }\n}\n"
  },
  {
    "path": "packages/arco-vue-docs/components/cell-code/index.vue",
    "content": "<template>\n  <div :class=\"cls\">\n    <div class=\"cell-code-operation\">\n      <a-tooltip\n        :content=\"showCode ? t('tooltip.collapse') : t('tooltip.expand')\"\n      >\n        <a-button\n          :class=\"[\n            'cell-code-operation-btn',\n            {\n              ['cell-code-operation-btn-active']: showCode,\n            },\n          ]\"\n          shape=\"circle\"\n          size=\"small\"\n          @click=\"handleClick\"\n        >\n          <icon-code />\n        </a-button>\n      </a-tooltip>\n      <a-tooltip :content=\"t('tooltip.copy')\">\n        <a-button\n          class=\"cell-code-operation-btn\"\n          shape=\"circle\"\n          size=\"small\"\n          @click=\"handleClickCopy\"\n        >\n          <icon-copy />\n        </a-button>\n      </a-tooltip>\n      <a-tooltip :content=\"t('tooltip.stackblitz')\">\n        <a-button\n          class=\"cell-code-operation-btn\"\n          shape=\"circle\"\n          size=\"small\"\n          @click=\"handleClickStackblitz\"\n        >\n          <icon-thunderbolt />\n        </a-button>\n      </a-tooltip>\n      <a-tooltip :content=\"t('tooltip.codeSandbox')\">\n        <a-button\n          class=\"cell-code-operation-btn\"\n          shape=\"circle\"\n          size=\"small\"\n          @click=\"handleClickCodeSandbox\"\n        >\n          <icon-code-sandbox />\n        </a-button>\n      </a-tooltip>\n    </div>\n    <div ref=\"contentRef\" class=\"cell-code-content\" :style=\"style\">\n      <slot />\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { computed, CSSProperties, defineComponent, onMounted, ref } from 'vue';\nimport { useI18n } from 'vue-i18n';\nimport { Message } from '@web-vue/components/index';\nimport copy from '../../utils/clipboard';\nimport { openStackblitz } from '../../utils/code-stackblitz';\nimport { openCodeSandbox } from '../../utils/code-sandbox';\n\nexport default defineComponent({\n  name: 'CellCode',\n  setup() {\n    const { t } = useI18n();\n    const showCode = ref(false);\n    const contentRef = ref<HTMLElement>();\n    const contentHeight = ref<number>(0);\n\n    onMounted(() => {\n      if (contentRef.value) {\n        const { height } = contentRef.value.getBoundingClientRect();\n        contentHeight.value = height;\n      }\n    });\n\n    const style = computed<CSSProperties>(() => {\n      if (showCode.value) {\n        const height = contentRef?.value?.firstElementChild?.clientHeight;\n        return { height: height ? `${height}px` : 'auto' };\n      }\n      return { height: 0 };\n    });\n\n    const handleClick = () => {\n      showCode.value = !showCode.value;\n    };\n\n    const handleClickCopy = () => {\n      if (contentRef.value?.textContent) {\n        copy(contentRef.value.textContent)\n          .then(() => {\n            Message.success('Copy Success!');\n          })\n          .catch(() => {\n            Message.error('Copy Failed! Please try again.');\n          });\n      }\n    };\n\n    const handleClickStackblitz = () => {\n      if (contentRef.value?.textContent) {\n        openStackblitz(contentRef.value.textContent);\n      }\n    };\n\n    const handleClickCodeSandbox = () => {\n      if (contentRef.value?.textContent) {\n        openCodeSandbox(contentRef.value.textContent);\n      }\n    };\n\n    const cls = computed(() => ['cell-code']);\n    return {\n      cls,\n      showCode,\n      t,\n      handleClick,\n      handleClickCopy,\n      handleClickStackblitz,\n      handleClickCodeSandbox,\n      contentRef,\n      style,\n    };\n  },\n});\n</script>\n\n<style scoped lang=\"less\" src=\"./style.less\" />\n"
  },
  {
    "path": "packages/arco-vue-docs/components/cell-code/style.less",
    "content": "@import '../web-vue/components/style/theme/css-variables.less';\n\n.cell-code {\n  margin-top: 12px;\n  //&&-collapse {\n  //  max-height: 240px;\n  //}\n  &-content {\n    margin-top: 16px;\n    overflow: hidden;\n    background-color: var(--color-fill-1);\n    transition: height 200ms;\n  }\n\n  &-operation {\n    display: flex;\n    justify-content: flex-end;\n\n    & &-btn {\n      margin-left: 8px;\n      background-color: var(--color-bg-4);\n      border: 1px solid var(--color-fill-3);\n\n      &:hover {\n        color: rgb(var(--primary-6));\n        border-color: rgb(var(--primary-6));\n      }\n\n      &-active {\n        color: rgb(var(--gray-1));\n        background-color: rgb(var(--gray-10));\n        border-color: rgb(var(--gray-1));\n\n        &:hover {\n          color: rgb(var(--gray-1));\n          background-color: rgb(var(--gray-10));\n          border-color: rgb(var(--gray-1));\n        }\n      }\n    }\n  }\n}\n"
  },
  {
    "path": "packages/arco-vue-docs/components/cell-demo/index.vue",
    "content": "<template>\n  <div class=\"cell-demo\">\n    <slot />\n  </div>\n</template>\n\n<script>\nimport { defineComponent } from 'vue';\n\nexport default defineComponent({\n  name: 'CellDemo',\n});\n</script>\n\n<style scoped lang=\"less\" src=\"./style.less\" />\n"
  },
  {
    "path": "packages/arco-vue-docs/components/cell-demo/style.less",
    "content": ".cell-demo {\n  margin-top: 24px;\n  padding: 48px;\n  border: 1px solid var(--color-border);\n  border-radius: 2px 2px 0 0;\n}\n"
  },
  {
    "path": "packages/arco-vue-docs/components/changelog-box/index.vue",
    "content": "<template>\n  <Button class=\"changelog-box-button\" @click=\"drawerVisible = true\">\n    {{ t('changelogBox.changelog') }}\n  </Button>\n  <Drawer\n    class=\"changelog-box\"\n    :visible=\"drawerVisible\"\n    :width=\"800\"\n    :title=\"t('changelogBox.changelog')\"\n    @ok=\"drawerVisible = false\"\n    @cancel=\"drawerVisible = false\"\n  >\n    <div class=\"changelog-box-filter\">\n      <div class=\"changelog-box-filter-title\">\n        {{ t('changelogBox.filter') }}:\n      </div>\n      <Grid :cols=\"5\" :col-gap=\"20\">\n        <GridItem>\n          <Select :model-value=\"filterType\" @change=\"onFilterChange\">\n            <Option value=\"version\">\n              {{ t('changelogBox.version') }}\n            </Option>\n            <Option value=\"date\">\n              {{ t('changelogBox.date') }}\n            </Option>\n          </Select>\n        </GridItem>\n        <GridItem :span=\"2\">\n          <Space v-if=\"filterType === 'version'\" fill>\n            <Select v-model=\"start\" :options=\"[...versions].reverse()\" />\n            {{ t('changelogBox.to') }}\n            <Select v-model=\"end\" :options=\"versions\" />\n          </Space>\n          <RangePicker\n            v-else\n            :model-value=\"[start, end]\"\n            @change=\"onRangePickerChange\"\n          />\n        </GridItem>\n        <GridItem :span=\"2\">\n          <Select v-model=\"type\" multiple :max-tag-count=\"2\">\n            <Option value=\"feature\" :tag-props=\"{ color: 'orangered' }\">\n              {{ t('changelogBox.feature') }}\n            </Option>\n            <Option value=\"bugfix\" :tag-props=\"{ color: 'magenta' }\">\n              {{ t('changelogBox.bugfix') }}\n            </Option>\n            <Option value=\"enhancement\" :tag-props=\"{ color: 'green' }\">\n              {{ t('changelogBox.enhancement') }}\n            </Option>\n            <Option value=\"style\" :tag-props=\"{ color: 'purple' }\">\n              {{ t('changelogBox.style') }}\n            </Option>\n            <Option value=\"typescript\" :tag-props=\"{ color: 'arcoblue' }\">\n              {{ t('changelogBox.typescript') }}\n            </Option>\n            <Option value=\"attention\" :tag-props=\"{ color: 'red' }\">\n              {{ t('changelogBox.attention') }}\n            </Option>\n          </Select>\n        </GridItem>\n      </Grid>\n    </div>\n    <div class=\"changelog-box-content\">\n      <Timeline v-if=\"filterChangelog.length > 0\" class=\"arco-changelog\">\n        <TimelineItem v-for=\"item of filterChangelog\" :key=\"item.version\">\n          <div class=\"changelog-item\">\n            <div class=\"changelog-info\">\n              <h2 class=\"changelog-info-version\">{{ item.version }}</h2>\n              <div class=\"changelog-info-date\">{{ item.date }}</div>\n            </div>\n            <div class=\"changelog-content\">\n              <ul v-if=\"item.extra && item.extra.length\">\n                <li\n                  v-for=\"(text, index) of item.extra\"\n                  :key=\"index\"\n                  v-html=\"text\"\n                />\n              </ul>\n              <section v-for=\"content of item.list\" :key=\"content.type\">\n                <h3 class=\"changelog-content-type\">{{ content.typeText }}</h3>\n                <ul class=\"changelog-content-list\">\n                  <li\n                    v-for=\"(text, index) of content.list\"\n                    :key=\"index\"\n                    v-html=\"text\"\n                  />\n                </ul>\n              </section>\n            </div>\n          </div>\n        </TimelineItem>\n      </Timeline>\n      <Empty v-else></Empty>\n    </div>\n  </Drawer>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, PropType, ref } from 'vue';\nimport { useI18n } from 'vue-i18n';\nimport {\n  Button,\n  Drawer,\n  Select,\n  Timeline,\n  TimelineItem,\n  Option,\n  Space,\n  RangePicker,\n  Empty,\n  Grid,\n  GridItem,\n} from '@arco-design/web-vue';\n\nconst compareVersion = (v1: string, v2: string) => {\n  const mainArray1 = v1.split('-');\n  const mainArray2 = v2.split('-');\n\n  const array1 = mainArray1[0].split('.');\n  const array2 = mainArray2[0].split('.');\n  for (let i = 0; i < 3; i++) {\n    if (array1[i] !== array2[i]) {\n      return parseInt(array1[i] ?? '0', 10) > parseInt(array2[i] ?? '0', 10)\n        ? 1\n        : -1;\n    }\n  }\n  return 0;\n};\n\nexport default defineComponent({\n  name: 'ChangelogBox',\n  components: {\n    Button,\n    Drawer,\n    Select,\n    Timeline,\n    Option,\n    TimelineItem,\n    Grid,\n    GridItem,\n    Space,\n    Empty,\n    RangePicker,\n  },\n  props: {\n    changelog: {\n      type: Array as PropType<any[]>,\n      required: true,\n    },\n  },\n  setup(props) {\n    const { t } = useI18n();\n    const drawerVisible = ref(false);\n    const filterType = ref('version');\n    const start = ref('');\n    const end = ref('');\n    const type = ref([\n      'feature',\n      'bugfix',\n      'enhancement',\n      'style',\n      'typescript',\n      'attention',\n    ]);\n\n    const filterChangelog = computed(() => {\n      return props.changelog.filter((item) => {\n        if (filterType.value === 'version') {\n          if (start.value && compareVersion(start.value, item.version) === 1) {\n            return false;\n          }\n          if (end.value && compareVersion(item.version, end.value) === 1) {\n            return false;\n          }\n        } else {\n          if (start.value && item.date < start.value) {\n            return false;\n          }\n          if (end.value && item.date > end.value) {\n            return false;\n          }\n        }\n        return true;\n      });\n    });\n\n    const versions = computed(() =>\n      props.changelog.map((item: any) => item.version)\n    );\n\n    const onFilterChange = (value: string) => {\n      filterType.value = value;\n      start.value = '';\n      end.value = '';\n    };\n\n    const onRangePickerChange = (data: [string, string]) => {\n      [start.value, end.value] = data;\n    };\n\n    return {\n      t,\n      drawerVisible,\n      filterType,\n      start,\n      versions,\n      end,\n      onFilterChange,\n      onRangePickerChange,\n      type,\n      filterChangelog,\n    };\n  },\n});\n</script>\n\n<style scoped lang=\"less\">\n.changelog-box {\n  &-button {\n    position: absolute;\n    bottom: 36px;\n    right: 0;\n  }\n\n  &-filter {\n    margin-bottom: 20px;\n\n    &-title {\n      margin-bottom: 10px;\n      font-weight: 500;\n    }\n\n    :deep(.arco-space-item):first-of-type,\n    :deep(.arco-space-item):last-of-type {\n      flex: 1;\n    }\n  }\n\n  &-content {\n    padding: 0 20px;\n  }\n}\n</style>\n"
  },
  {
    "path": "packages/arco-vue-docs/components/code-block/index.vue",
    "content": "<template>\n  <section class=\"code-block\">\n    <anchor-head :level=\"2\" :href=\"$attrs.id\">{{ title }}</anchor-head>\n    <slot name=\"description\" />\n    <slot />\n  </section>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, inject } from 'vue';\nimport AnchorHead from '../anchor-head/index.vue';\nimport { articleInjectionKey } from '../article/context';\n\nexport default defineComponent({\n  name: 'CodeBlock',\n  components: {\n    AnchorHead,\n  },\n  props: {\n    title: String,\n  },\n  setup(props, { attrs }) {\n    const articleCtx = inject(articleInjectionKey);\n\n    articleCtx?.addAnchor({\n      href: `#${attrs.id}`,\n      title: props.title,\n    });\n  },\n});\n</script>\n\n<style scoped lang=\"less\" src=\"./style.less\" />\n"
  },
  {
    "path": "packages/arco-vue-docs/components/code-block/style.less",
    "content": ".code-block {\n  h2 {\n    margin: 48px 0 12px;\n    color: var(--color-text-1);\n    font-weight: 500;\n    font-size: 20px;\n  }\n\n  :deep(p) {\n    line-height: 1.5;\n  }\n}\n"
  },
  {
    "path": "packages/arco-vue-docs/components/footer/index.vue",
    "content": "<template>\n  <footer class=\"arco-site-footer\">\n    <div class=\"arco-site-footer-main\">\n      <div class=\"arco-site-footer-content\">\n        <div class=\"arco-site-footer-logo\">\n          <logo />\n        </div>\n        <div class=\"arco-site-relevant\">\n          <div\n            v-for=\"(group, index) of relevant\"\n            :key=\"index\"\n            class=\"arco-site-relevant-group\"\n          >\n            <div class=\"arco-site-relevant-title\">\n              {{ t(`footer.${group.title}`) }}\n              <icon-down />\n            </div>\n            <ul class=\"arco-site-relevant-list\">\n              <li\n                v-for=\"(item, itemIndex) of group.list\"\n                :key=\"itemIndex\"\n                class=\"arco-site-relevant-item\"\n              >\n                <a v-if=\"item.link\" :href=\"item.link\">\n                  {{ t(`footer.${item.text}`) }}\n                </a>\n                <span v-else @click=\"toBeOpen\">\n                  {{ t(`footer.${item.text}`) }}\n                </span>\n              </li>\n            </ul>\n          </div>\n        </div>\n      </div>\n      <div class=\"arco-site-footer-bottom\">\n        <div class=\"arco-site-footer-bottom-left\">\n          <a class=\"arco-site-footer-btn\" href=\"/\">\n            <span class=\"arco-site-footer-icon\">\n              <span class=\"arco-site-footer-icon-gray\">\n                <icon-arco />\n              </span>\n              <span class=\"arco-site-footer-icon-color\">\n                <icon-arco-color />\n              </span>\n            </span>\n            Powered by ArcoDesign\n          </a>\n          <div class=\"arco-site-footer-copyright\">\n            <span>UED-火山引擎 & 架构前端 </span>\n            <span>ⓒ Copyright ByteDance 2019-{{ latestYear }}</span>\n          </div>\n        </div>\n        <div class=\"arco-site-footer-bottom-right\">\n          <a target=\"_blank\" rel=\"noreferrer\" href=\"https://beian.miit.gov.cn/\">\n            京ICP备19059916号-18\n          </a>\n        </div>\n      </div>\n    </div>\n  </footer>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue';\nimport { useI18n } from 'vue-i18n';\nimport { Message } from '@web-vue/components/index';\nimport joinChat from '../../utils/join-chart';\nimport IconArco from '../../assets/footer/arco.svg';\nimport IconArcoColor from '../../assets/footer/arco-color.svg';\nimport Logo from '../logo/index.vue';\n\nexport default defineComponent({\n  name: 'ArcoFooter',\n  components: {\n    IconArco,\n    IconArcoColor,\n    Logo,\n  },\n  setup() {\n    const { t } = useI18n();\n\n    const relevant = [\n      {\n        title: 'design',\n        list: [\n          {\n            text: 'spec',\n            link: '/docs/spec/introduce',\n          },\n          {\n            text: 'principle',\n            link: '/docs/spec/philosophy',\n          },\n        ],\n      },\n      {\n        title: 'component',\n        list: [\n          // {\n          //   text: 'overview',\n          //   link: '/vue/components/overview',\n          // },\n          {\n            text: 'start',\n            link: '/vue/docs/start',\n          },\n          {\n            text: 'changelog',\n            link: '/vue/docs/changelog',\n          },\n        ],\n      },\n      {\n        title: 'ecosystem',\n        list: [\n          {\n            text: 'designLab',\n            link: '/themes/stores',\n          },\n          {\n            text: 'material',\n            link: '/material',\n          },\n          {\n            text: 'pro',\n            link: '/pro',\n          },\n        ],\n      },\n      {\n        title: 'resource',\n        list: [\n          {\n            text: 'componentFigma',\n            link: 'https://www.figma.com/file/M66cTiLXHa4SVyZIlfY5Pb/arco-Design-System?node-id=7945%3A44563',\n          },\n          {\n            text: 'iconFigma',\n            link: 'https://www.figma.com/file/1ohmb16op4ogbI09ojLR5W/Arco-Design-IconsFigma',\n          },\n        ],\n      },\n      // {\n      //   title: 'about',\n      //   list: [\n      //     {\n      //       text: 'dashboard',\n      //       link: '/dashboard',\n      //     },\n      //   ],\n      // },\n    ];\n\n    const toBeOpen = () => {\n      Message.info('Opening soon');\n    };\n\n    const latestYear = new Date().getFullYear();\n\n    return {\n      t,\n      relevant,\n      toBeOpen,\n      joinChat,\n      latestYear,\n    };\n  },\n});\n</script>\n\n<style lang=\"less\" src=\"./style.less\" />\n"
  },
  {
    "path": "packages/arco-vue-docs/components/footer/style.less",
    "content": ".arco-site-footer {\n  display: flex;\n  justify-content: center;\n  box-sizing: border-box;\n  width: 100%;\n  padding: 80px 20px 0 20px;\n  background-color: #f7f8fa;\n\n  &-main {\n    width: 1180px;\n  }\n\n  &-logo {\n    margin-right: 10px;\n  }\n\n  &-content {\n    display: flex;\n    justify-content: space-between;\n  }\n\n  &-bottom {\n    display: flex;\n    justify-content: space-between;\n    margin-top: 80px;\n    padding: 20px 0;\n    border-top: 1px solid var(--color-border);\n\n    &-left {\n      display: flex;\n      align-items: center;\n    }\n\n    &-right {\n      display: flex;\n      align-items: center;\n\n      a {\n        color: var(--color-text-2);\n        text-decoration: none;\n      }\n    }\n  }\n\n  &-btn {\n    display: flex;\n    align-items: center;\n    box-sizing: border-box;\n    height: 28px;\n    padding: 4px 8px;\n    color: var(--color-text-2);\n    font-size: 12px;\n    text-decoration: none;\n    background: var(--color-bg-2);\n    border: 1px solid var(--color-border);\n    border-radius: 4px;\n    outline: none;\n    cursor: pointer;\n    transition: all 0.2s;\n\n    > svg {\n      margin-right: 8px;\n    }\n  }\n\n  &-copyright {\n    margin-left: 12px;\n    color: var(--color-text-3);\n    font-size: 12px;\n    line-height: 12px;\n  }\n\n  &-icon {\n    position: relative;\n\n    &-color {\n      position: absolute;\n      left: 0;\n    }\n\n    &-gray {\n      opacity: 1;\n    }\n\n    &-color {\n      opacity: 0;\n    }\n\n    &:hover {\n      .arco-site-footer-icon-gray {\n        opacity: 0;\n      }\n\n      .arco-site-footer-icon-color {\n        opacity: 1;\n      }\n    }\n  }\n}\n\n.arco-site-relevant {\n  display: flex;\n\n  &-group {\n    margin-left: 68px;\n  }\n\n  &-title {\n    display: flex;\n    justify-content: space-between;\n    height: 24px;\n    margin-bottom: 24px;\n    color: var(--color-text-1);\n    font-weight: 500;\n    font-size: 16px;\n    line-height: 24px;\n\n    svg {\n      display: none;\n    }\n  }\n\n  &-list {\n    display: flex;\n    flex-direction: column;\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n\n  &-item {\n    margin-bottom: 12px;\n    line-height: 22px;\n    cursor: pointer;\n\n    > * {\n      color: var(--color-text-2);\n      font-size: 14px;\n      white-space: nowrap;\n      text-decoration: none;\n      transition: all 0.2s;\n\n      &:hover {\n        color: rgb(var(--primary-6));\n\n        .t,\n        .d {\n          color: rgb(var(--primary-6));\n        }\n      }\n    }\n  }\n}\n\n@media (min-width: 1600px) {\n  .arco-site-relevant-group {\n    margin-left: 56px;\n  }\n}\n\n@media (min-width: 1200px) and (max-width: 1600px) {\n  .arco-site-footer {\n    &-main {\n      width: unset;\n    }\n\n    &-logo {\n      display: none;\n    }\n  }\n\n  .arco-site-relevant-group {\n    margin-left: 56px;\n  }\n}\n\n@media (min-width: 992px) and (max-width: 1200px) {\n  .arco-site-footer {\n    &-main {\n      width: unset;\n    }\n\n    &-logo {\n      display: none;\n    }\n  }\n\n  .arco-site-relevant-group {\n    margin-left: 30px;\n  }\n}\n\nbody[arco-theme='dark'] {\n  .arco-site-footer {\n    background-color: var(--color-bg-3);\n  }\n}\n"
  },
  {
    "path": "packages/arco-vue-docs/components/logo/index.vue",
    "content": "<template>\n  <svg width=\"120px\" height=\"24px\" viewBox=\"0 0 120 24\" version=\"1.1\">\n    <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n      <g id=\"画板\" transform=\"translate(-56.000000, -14.000000)\">\n        <g id=\"编组-6备份\" transform=\"translate(26.000000, 14.000000)\">\n          <g id=\"编组-3\">\n            <g\n              id=\"编组-2\"\n              transform=\"translate(76.300000, 15.000000)\"\n              fill=\"var(--color-text-1)\"\n            >\n              <path\n                id=\"椭圆形备份\"\n                d=\"M2.34361572,4.26825799 C3.36534251,4.26825799 4.19361572,3.43998478 4.19361572,2.41825799 C4.19361572,1.39653121 3.36534251,0.568257993 2.34361572,0.568257993 C1.32188894,0.568257993 0.493615723,1.39653121 0.493615723,2.41825799 C0.493615723,3.43998478 1.32188894,4.26825799 2.34361572,4.26825799 Z\"\n              />\n            </g>\n          </g>\n          <path\n            id=\"arco.design\"\n            d=\"M45.4540018,8.33500087 L45.4540018,18.9940026 L42.6490014,18.9940026 L42.6490014,17.8170024 C41.9560013,18.6750026 40.9220011,19.2690027 39.4590008,19.2690027 C36.5220004,19.2690027 34.3,16.8600023 34.3,13.6590017 C34.3,10.4580012 36.5220004,8.04900083 39.4590008,8.04900083 C40.9220011,8.04900083 41.9450013,8.64300092 42.6490014,9.51200107 L42.6490014,8.33500087 L45.4540018,8.33500087 Z M39.9870009,10.7220013 C38.3040007,10.7220013 37.2370005,12.0310015 37.2370005,13.6590017 C37.2370005,15.287002 38.3040007,16.5960022 39.9870009,16.5960022 C41.6260012,16.5960022 42.7370005,15.342002 42.7370005,13.6590017 C42.7370005,11.9760015 41.6260012,10.7220013 39.9870009,10.7220013 Z M53.1540011,8.04900083 C53.7700012,8.04900083 54.2540012,8.13700084 54.6500013,8.28000087 L54.2210012,11.1290013 C53.7480012,10.9200013 53.066001,10.7880013 52.4830009,10.7880013 C51.1520007,10.7880013 50.2390006,11.6020014 50.2390006,13.1860017 L50.2390006,18.9940026 L47.3680001,18.9940026 L47.3680001,8.33500087 L50.1510006,8.33500087 L50.1510006,9.50100107 C50.8220007,8.5000009 51.8450008,8.04900083 53.1540011,8.04900083 Z M60.1610009,8.04900083 C61.9430012,8.04900083 63.4500015,8.77500095 64.4290016,10.0620012 L62.3610013,11.7890014 C61.7120012,11.0960013 61.0190011,10.7220013 60.0840009,10.7220013 C58.5990007,10.7220013 57.4110005,11.8880015 57.4110005,13.6590017 C57.4110005,15.441002 58.5880007,16.5960022 60.0730009,16.5960022 C60.9970011,16.5960022 61.7890012,16.1780022 62.3940013,15.5180021 L64.4400016,17.2670023 C63.4390015,18.5540025 61.9430012,19.2690027 60.1610009,19.2690027 C56.7620004,19.2690027 54.485,16.8930023 54.485,13.6590017 C54.485,10.4360012 56.7620004,8.04900083 60.1610009,8.04900083 Z M70.2810009,8.04900083 C73.6030015,8.04900083 76.0560019,10.4470012 76.0560019,13.6590017 C76.0560019,16.8710023 73.6030015,19.2690027 70.2810009,19.2690027 C66.9700004,19.2690027 64.528,16.8710023 64.528,13.6590017 C64.528,10.4470012 66.9700004,8.04900083 70.2810009,8.04900083 Z M70.2810009,10.7220013 C68.6640007,10.7220013 67.4540005,11.9320015 67.4540005,13.6590017 C67.4540005,15.386002 68.6640007,16.5960022 70.2810009,16.5960022 C71.8980012,16.5960022 73.1190014,15.386002 73.1190014,13.6590017 C73.1190014,11.9320015 71.8980012,10.7220013 70.2810009,10.7220013 Z M86.5280008,8.04900083 C87.9580011,8.04900083 88.9700012,8.61000092 89.6630014,9.44600106 L89.6630014,3.15400003 L92.5230018,3.15400003 L92.5230018,18.9940026 L89.7180014,18.9940026 L89.7180014,17.8170024 C89.0250013,18.6750026 87.9910011,19.2690027 86.5280008,19.2690027 C83.5910004,19.2690027 81.369,16.8600023 81.369,13.6590017 C81.369,10.4580012 83.5910004,8.04900083 86.5280008,8.04900083 Z M87.0560009,10.7220013 C85.3730007,10.7220013 84.3060005,12.0310015 84.3060005,13.6590017 C84.3060005,15.287002 85.3730007,16.5960022 87.0560009,16.5960022 C88.6950012,16.5960022 89.8060005,15.342002 89.8060005,13.6590017 C89.8060005,11.9760015 88.6950012,10.7220013 87.0560009,10.7220013 Z M99.1670009,8.04900083 C102.236001,8.04900083 104.337002,10.3260012 104.348002,13.6480017 C104.348002,13.9780018 104.326002,14.3740019 104.293002,14.6160019 L96.7360005,14.6160019 C97.0440005,16.1560022 98.1220007,16.8270023 99.4750009,16.8270023 C100.399001,16.8270023 101.400001,16.4530022 102.170001,15.8040021 L103.853002,17.6520024 C102.643001,18.7630026 101.103001,19.2690027 99.3100009,19.2690027 C96.0430004,19.2690027 93.777,17.0470023 93.777,13.6920018 C93.777,10.3370012 95.9770004,8.04900083 99.1670009,8.04900083 Z M99.1450009,10.5240012 C97.7920007,10.5240012 97.0000005,11.3380014 96.7470005,12.6580016 L101.466001,12.6580016 C101.202001,11.2940014 100.377001,10.5240012 99.1450009,10.5240012 Z M114.127002,9.072001 L113.159001,11.3050014 C112.312001,10.8870013 110.959001,10.4470012 109.760001,10.4360012 C108.671001,10.4360012 108.121001,10.8210013 108.121001,11.4040014 C108.121001,12.0200015 108.891001,12.1740015 109.859001,12.3170015 L110.805001,12.4600016 C113.115001,12.8120016 114.402002,13.8460018 114.402002,15.6500021 C114.402002,17.8500024 112.598001,19.2690027 109.507001,19.2690027 C108.055001,19.2690027 106.152,18.9940026 104.766,18.0150025 L105.899,15.8370021 C106.812,16.4420022 107.923001,16.8820023 109.529001,16.8820023 C110.860001,16.8820023 111.498001,16.5080022 111.498001,15.8810021 C111.498001,15.364002 110.959001,15.078002 109.727001,14.902002 L108.858001,14.7810019 C106.394,14.4400019 105.173,13.3620017 105.173,11.5470014 C105.173,9.35800104 106.867,8.06000083 109.672001,8.06000083 C111.377001,8.06000083 112.708001,8.37900088 114.127002,9.072001 Z M118.439001,8.33500087 L118.439001,18.9940026 L115.568,18.9940026 L115.568,8.33500087 L118.439001,8.33500087 Z M116.987,3.15400003 C118.021001,3.15400003 118.824001,3.96800016 118.824001,5.00200033 C118.824001,6.0360005 118.021001,6.82800063 116.987,6.82800063 C115.953,6.82800063 115.161,6.0360005 115.161,5.00200033 C115.161,3.96800016 115.953,3.15400003 116.987,3.15400003 Z M124.599001,8.04900083 C126.084001,8.04900083 127.173001,8.62100092 127.899001,9.52300107 L127.899001,8.33500087 L130.715002,8.33500087 L130.715002,18.1140025 C130.715002,21.535003 128.482001,23.6030034 124.962001,23.6030034 C123.279001,23.6030034 121.497,23.1630033 120.298,22.3160032 L121.321,19.9730028 C122.388,20.6770029 123.565001,21.062003 124.841001,21.062003 C126.623001,21.062003 127.877001,20.0720028 127.877001,18.2350025 L127.877001,17.4870024 C127.151001,18.3780025 126.073001,18.9280026 124.599001,18.9280026 C122.003,18.9280026 119.693,16.7610023 119.693,13.4940017 C119.693,10.2160012 122.003,8.04900083 124.599001,8.04900083 Z M125.325001,10.6890013 C123.686001,10.6890013 122.641,11.9430015 122.641,13.4940017 C122.641,15.034002 123.686001,16.2880022 125.325001,16.2880022 C126.920001,16.2880022 127.998001,15.078002 127.998001,13.4940017 C127.998001,11.8990015 126.920001,10.6890013 125.325001,10.6890013 Z M138.558001,8.04900083 C140.978001,8.04900083 142.705002,9.7320011 142.705002,12.2070015 L142.705002,18.9940026 L139.834001,18.9940026 L139.834001,13.1310017 C139.834001,11.5910014 139.064001,10.7440013 137.755001,10.7440013 C136.523001,10.7440013 135.500001,11.5470014 135.500001,13.1530017 L135.500001,18.9940026 L132.629,18.9940026 L132.629,8.33500087 L135.423001,8.33500087 L135.423001,9.58900108 C136.182001,8.45600089 137.348001,8.04900083 138.558001,8.04900083 Z\"\n            fill=\"var(--color-text-1)\"\n            fill-rule=\"nonzero\"\n          />\n        </g>\n      </g>\n    </g>\n  </svg>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue';\n\nexport default defineComponent({\n  name: 'ArcoLogo',\n});\n</script>\n"
  },
  {
    "path": "packages/arco-vue-docs/components/navbar/index.vue",
    "content": "<template>\n  <nav class=\"arco-nav\">\n    <div class=\"arco-nav-logo\">\n      <logo-arco v-if=\"theme === 'light'\" />\n      <logo-arco-dark v-if=\"theme === 'dark'\" />\n    </div>\n    <div class=\"arco-nav-right\">\n      <a-button class=\"arco-nav-button\" type=\"text\" @click=\"toggleTheme\">\n        <template #icon>\n          <icon-moon-fill v-if=\"theme === 'light'\" />\n          <icon-sun-fill v-if=\"theme === 'dark'\" />\n        </template>\n      </a-button>\n      <a-button class=\"arco-nav-button\" type=\"text\" @click=\"handleClickLang\">\n        <template #icon>\n          <div v-if=\"lang === 'en-US'\">中</div>\n          <div v-if=\"lang === 'zh-CN'\">En</div>\n        </template>\n      </a-button>\n    </div>\n  </nav>\n</template>\n\n<script>\nimport { defineComponent, inject } from 'vue';\nimport LogoArco from '../../assets/logo-arco-design.svg';\nimport LogoArcoDark from '../../assets/logo-arco-design-dark.svg';\n\nexport default defineComponent({\n  name: 'Navbar',\n  components: {\n    LogoArco,\n    LogoArcoDark,\n  },\n  setup() {\n    const theme = inject('theme');\n    const toggleTheme = inject('toggleTheme');\n    const lang = inject('lang');\n    const changeLanguage = inject('changeLanguage');\n\n    const handleClickLang = () => {\n      if (lang.value === 'zh-CN') {\n        changeLanguage('en-US');\n      } else {\n        changeLanguage('zh-CN');\n      }\n    };\n\n    return { theme, toggleTheme, lang, handleClickLang };\n  },\n});\n</script>\n\n<style scoped lang=\"less\" src=\"./style.less\" />\n"
  },
  {
    "path": "packages/arco-vue-docs/components/navbar/style.less",
    "content": ".arco-nav {\n  position: fixed;\n  top: 0;\n  right: 0;\n  left: 0;\n  z-index: 100;\n  display: flex;\n  align-items: center;\n  height: 60px;\n  padding: 0 20px;\n  background-color: var(--color-bg-1);\n  border-bottom: 1px solid var(--color-border);\n\n  &-right {\n    display: flex;\n    margin-left: auto;\n  }\n\n  &-button {\n    margin: 0 4px;\n    color: var(--color-text-1);\n    font-size: 20px;\n  }\n}\n"
  },
  {
    "path": "packages/arco-vue-docs/components/theme-box/index.vue",
    "content": "<template>\n  <Badge class=\"theme-badge\" :count=\"theme ? 1 : 0\" dot>\n    <Button\n      class=\"theme-badge-button\"\n      :shape=\"hover ? 'round' : 'circle'\"\n      size=\"large\"\n      @click=\"modalVisible = true\"\n      @mouseenter=\"hover = true\"\n      @mouseleave=\"hover = false\"\n    >\n      <IconSkin />\n      <span v-if=\"hover\" style=\"margin-left: 8px\">\n        {{ t('themeBox.installTheme') }}\n      </span>\n    </Button>\n  </Badge>\n  <Modal\n    :visible=\"modalVisible\"\n    :width=\"900\"\n    @ok=\"modalVisible = false\"\n    @cancel=\"modalVisible = false\"\n  >\n    <template #title>\n      <div class=\"theme-box-header\">\n        <span>{{ t('themeBox.installTheme') }}</span>\n        <div>\n          <Input\n            :model-value=\"searchValue\"\n            :placeholder=\"t('themeBox.search')\"\n            allow-clear\n            @input=\"onSearchInput\"\n          />\n        </div>\n      </div>\n    </template>\n    <Row :gutter=\"[20, 20]\">\n      <template v-if=\"isLoading\">\n        <Col v-for=\"(_, index) of loadingFillArray\" :key=\"index\" :span=\"8\">\n          <Card v-if=\"isLoading\" class=\"theme-box-card\">\n            <template #cover>\n              <Skeleton animation>\n                <SkeletonShape style=\"width: 272px; height: 160px\" />\n              </Skeleton>\n            </template>\n            <CardMeta>\n              <template #title>\n                <Skeleton animation>\n                  <SkeletonLine :line-height=\"25\" />\n                </Skeleton>\n              </template>\n            </CardMeta>\n            <Skeleton animation>\n              <SkeletonShape\n                style=\"\n                  width: 100px;\n                  height: 24px;\n                  margin-top: 20px;\n                  margin-left: auto;\n                \"\n              />\n            </Skeleton>\n          </Card>\n        </Col>\n      </template>\n      <template v-else-if=\"themeList.length > 0\">\n        <Col v-for=\"item of themeList\" :key=\"item.themeId\" :span=\"8\">\n          <Card class=\"theme-box-card\">\n            <template #cover>\n              <img :src=\"item.cover\" style=\"height: 160px\" alt=\"theme-cover\" />\n            </template>\n            <template #actions>\n              <Button\n                class=\"theme-box-card-link\"\n                type=\"text\"\n                size=\"mini\"\n                :href=\"`https://arco.design/themes/design/${item.themeId}`\"\n              >\n                <template #icon>\n                  <IconLink />\n                </template>\n                {{ t('themeBox.openInDesignLab') }}\n              </Button>\n              <Tag\n                v-if=\"theme && theme.themeId === item.themeId\"\n                color=\"arcoblue\"\n              >\n                {{ t('themeBox.currentTheme') }}\n              </Tag>\n              <Button\n                v-else\n                type=\"primary\"\n                size=\"mini\"\n                @click=\"() => useTheme(item)\"\n              >\n                {{ t('themeBox.install') }}\n              </Button>\n            </template>\n            <CardMeta :title=\"item.packageName\" />\n          </Card>\n        </Col>\n      </template>\n      <template v-else>\n        <Empty style=\"margin: 200px 0\">\n          <template #description>\n            {{ t('themeBox.noResult') }}\n            <Link :href=\"`https://arco.design/themes`\">\n              {{ t('themeBox.createTheme') }}\n            </Link>\n          </template>\n        </Empty>\n      </template>\n    </Row>\n    <div class=\"theme-box-bottom\">\n      <Pagination\n        :total=\"total\"\n        :current=\"page\"\n        :page-size=\"6\"\n        @change=\"onPageChange\"\n      />\n    </div>\n    <template v-if=\"theme\" #footer>\n      <div class=\"theme-box-footer\">\n        <TypographyText bold>\n          {{ t('themeBox.currentTheme') }}: {{ theme.themeName }}\n        </TypographyText>\n        <Button\n          type=\"primary\"\n          status=\"danger\"\n          size=\"small\"\n          @click=\"onResetClick\"\n        >\n          {{ t('themeBox.resetTheme') }}\n        </Button>\n      </div>\n    </template>\n  </Modal>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, onMounted, PropType, ref, watch } from 'vue';\nimport { useI18n } from 'vue-i18n';\nimport {\n  Badge,\n  Button,\n  Modal,\n  Row,\n  Col,\n  Card,\n  CardMeta,\n  Pagination,\n  Skeleton,\n  SkeletonLine,\n  SkeletonShape,\n  Notification,\n  Tag,\n  TypographyText,\n  Input,\n  Empty,\n  Link,\n} from '@arco-design/web-vue';\nimport { IconSkin, IconLink } from '@arco-design/web-vue/es/icon';\nimport axios from 'axios';\nimport { ThemeData } from './interface';\nimport {\n  getLocalStorage,\n  removeLocalStorage,\n  setLocalStorage,\n} from '../../utils/local-storage';\nimport { apiBasename } from '../../utils/api';\n\nconst THEME_LINK_ID = 'arco-custom-theme';\nconst loadingFillArray = Array(6).fill(1);\n\nexport default defineComponent({\n  name: 'ThemeBox',\n  components: {\n    Badge,\n    Button,\n    Modal,\n    Row,\n    Col,\n    Card,\n    CardMeta,\n    Pagination,\n    Skeleton,\n    SkeletonLine,\n    SkeletonShape,\n    Tag,\n    TypographyText,\n    Input,\n    Empty,\n    Link,\n    IconSkin,\n    IconLink,\n  },\n  setup() {\n    const { t } = useI18n();\n    const theme = ref<ThemeData>();\n    const themeList = ref<ThemeData[]>([]);\n    const total = ref(0);\n    const page = ref(1);\n    const modalVisible = ref(false);\n    const searchValue = ref('');\n    const isLoading = ref(false);\n    const hover = ref(false);\n\n    onMounted(() => {\n      const _theme = getLocalStorage<ThemeData>(\n        'vue-custom-theme',\n        true\n      ) as ThemeData;\n      if (_theme) {\n        useTheme(_theme, false);\n      }\n    });\n\n    const useTheme = (_theme: ThemeData, notice = true) => {\n      addTheme(_theme, notice);\n      setLocalStorage('vue-custom-theme', _theme);\n    };\n\n    const fetchThemeList = async (current: number, search: string) => {\n      isLoading.value = true;\n      try {\n        const data = await axios.get(\n          `${apiBasename}/themes/api/open/themes/list?pageSize=6&currentPage=${current}&depLibrary=@arco-design/web-vue&keyword=${search}`\n        );\n\n        themeList.value = data.data.list;\n        total.value = data.data.total;\n      } catch {}\n      isLoading.value = false;\n    };\n\n    watch(modalVisible, (visible) => {\n      if (visible) {\n        fetchThemeList(page.value, searchValue.value);\n      }\n    });\n\n    const addTheme = (_theme: ThemeData, notice: boolean) => {\n      const url = `${_theme.unpkgHost}${_theme.packageName}/css/arco.css`;\n      axios\n        .get(url)\n        .then(() => {\n          if (theme.value) {\n            removeTheme();\n          }\n          const linkElement = document.createElement('link');\n          linkElement.id = THEME_LINK_ID;\n          linkElement.href = url;\n          linkElement.type = 'text/css';\n          linkElement.rel = 'stylesheet';\n          document.body.appendChild(linkElement);\n          theme.value = _theme;\n\n          if (notice) {\n            Notification.success({\n              id: 'theme',\n              title: t('themeBox.installTheme'),\n              content: t('themeBox.installThemeSuccess'),\n              duration: 2000,\n            });\n          }\n        })\n        .catch(() => {\n          Notification.error({\n            id: 'theme',\n            title: t('themeBox.installTheme'),\n            content: t('themeBox.installThemeError'),\n            duration: 2000,\n          });\n        });\n    };\n\n    const removeTheme = () => {\n      const linkElement = document.getElementById(THEME_LINK_ID);\n      if (linkElement) {\n        document.body.removeChild(linkElement);\n      }\n      theme.value = undefined;\n    };\n\n    const onResetClick = () => {\n      removeTheme();\n      removeLocalStorage('vue-custom-theme');\n    };\n\n    const onSearchInput = (value: string) => {\n      searchValue.value = value;\n      page.value = 1;\n      fetchThemeList(1, value);\n    };\n\n    const onPageChange = (_page: number) => {\n      page.value = _page;\n      fetchThemeList(_page, searchValue.value);\n    };\n\n    return {\n      hover,\n      modalVisible,\n      themeList,\n      theme,\n      total,\n      page,\n      isLoading,\n      loadingFillArray,\n      searchValue,\n      useTheme,\n      onSearchInput,\n      onPageChange,\n      onResetClick,\n      t,\n    };\n  },\n});\n</script>\n\n<style scoped lang=\"less\">\n.theme-box {\n  &-header {\n    width: 100%;\n    padding-right: 24px;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n  }\n\n  &-card {\n    &-link {\n      opacity: 0;\n      transition: opacity 100ms;\n    }\n\n    &:hover &-link {\n      opacity: 1;\n    }\n\n    :deep(.arco-card-meta-title) {\n      line-height: 25px;\n    }\n  }\n\n  &-bottom {\n    display: flex;\n    justify-content: flex-end;\n    margin-top: 20px;\n  }\n\n  &-footer {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n  }\n}\n\n.theme-badge {\n  position: fixed;\n  right: 70px;\n  bottom: 124px;\n\n  &-button {\n    background: var(--color-bg-5) !important;\n    border: 1px solid var(--color-fill-3) !important;\n    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);\n  }\n}\n</style>\n"
  },
  {
    "path": "packages/arco-vue-docs/components/theme-box/interface.ts",
    "content": "export interface ThemeData {\n  themeId: number;\n  themeName: string;\n  cover: string;\n  packageName: string;\n  unpkgHost: string;\n}\n"
  },
  {
    "path": "packages/arco-vue-docs/components/token-table/token-table.vue",
    "content": "<template>\n  <a-table :columns=\"columns\" :data=\"data\" :pagination=\"false\">\n    <template #name=\"{ record }\">\n      <div class=\"token-content\">\n        <div\n          v-if=\"type === 'color'\"\n          class=\"token-sample\"\n          :style=\"{\n            backgroundColor: dark\n              ? record.darkValue ?? record.value\n              : record.value,\n          }\"\n        />\n        <div class=\"token-text\">\n          {{ type === 'color' && dark ? `dark-${record.name}` : record.name }}\n        </div>\n      </div>\n    </template>\n    <template #value=\"{ record }\">\n      <span class=\"token-value\" @click=\"onValueClick\">\n        {{ dark ? record.darkValue ?? record.value : record.value }}\n      </span>\n    </template>\n    <template #cssvar=\"{ record }\">\n      {{ record.cssvar ? `--${record.name}` : '-' }}\n    </template>\n  </a-table>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, PropType } from 'vue';\nimport { Message, TableColumnData } from '@web-vue/components/index';\nimport clipboard from '../../utils/clipboard';\n\nexport default defineComponent({\n  name: 'TokenTable',\n  props: {\n    data: Array,\n    type: {\n      type: String as PropType<'color' | 'size'>,\n      default: 'color',\n    },\n    dark: Boolean,\n    local: {\n      type: String,\n      default: 'zh-CN',\n    },\n  },\n  setup(props) {\n    const columns = computed(() => {\n      return [\n        {\n          title: props.local === 'en-US' ? 'Token' : '变量名',\n          dataIndex: 'name',\n          slotName: 'name',\n          width: 200,\n        },\n        {\n          title: props.local === 'en-US' ? 'Value' : '变量值',\n          dataIndex: 'value',\n          width: 250,\n          slotName: 'value',\n        },\n        {\n          title: props.local === 'en-US' ? 'Css Var' : 'CSS变量',\n          dataIndex: 'cssvar',\n          slotName: 'cssvar',\n          width: 200,\n        },\n        {\n          title: props.local === 'en-US' ? 'Description' : '描述',\n          dataIndex: props.local === 'en-US' ? 'descEN' : 'desc',\n        },\n      ];\n    });\n\n    const onValueClick = (ev: Event) => {\n      const text = (ev.target as HTMLElement).textContent;\n      if (text) {\n        clipboard(text)\n          .then(() => {\n            Message.success(`Copy Success!`);\n          })\n          .catch(() => {\n            Message.error('Copy Failed! Please try again.');\n          });\n      }\n    };\n\n    return {\n      columns,\n      onValueClick,\n    };\n  },\n});\n</script>\n\n<style lang=\"less\">\n.token-content {\n  display: flex;\n  align-items: center;\n\n  .token-sample {\n    margin-right: 8px;\n    width: 16px;\n    height: 16px;\n    border-radius: 2px;\n  }\n}\n\n.token-value {\n  cursor: pointer;\n}\n</style>\n"
  },
  {
    "path": "packages/arco-vue-docs/context.ts",
    "content": "import { InjectionKey } from 'vue';\n\nexport interface CollapseContext {\n  showNav: boolean;\n  showAnchor: boolean;\n  toggleNav: () => void;\n  toggleAnchor: () => void;\n}\n\nexport const collapseInjectionKey: InjectionKey<CollapseContext> =\n  Symbol('CollapseContext');\n"
  },
  {
    "path": "packages/arco-vue-docs/docs/dark.en-US.md",
    "content": "```yaml\nmeta:\n  type: Developer Guide\ntitle: Dark mode\ndescription: The dark theme is built in the component library, and you can easily switch to dark.\n```\n\n*Auto translate by google.*\n\n## Switch to dark mode\n\nThe component library uses the arco-theme attribute on the body tag to indicate the current theme, so you only need to modify this attribute to complete the theme switch.\n\n```ts\n// Set as dark theme\ndocument.body.setAttribute('arco-theme', 'dark')\n\n// Restore light theme\ndocument.body.removeAttribute('arco-theme');\n```\n\n## Principle and built-in colors\n\nRefer to [Dark Mode](https://arco.design/react/docs/palette) and [Color](https://arco.design/react/docs/palette)\n"
  },
  {
    "path": "packages/arco-vue-docs/docs/dark.zh-CN.md",
    "content": "```yaml\nmeta:\n  type: 开发指南\ntitle: 暗黑模式\ndescription: 组件库内置暗色的主题，你可以轻易的切换到暗色。\n```\n\n## 切换到暗黑模式\n\n组件库通过 body 标签上的 arco-theme 属性来标明当前的主题，所以你只要修改这个属性，即可完成主题的切换。\n\n```ts\n// 设置为暗黑主题\ndocument.body.setAttribute('arco-theme', 'dark')\n\n// 恢复亮色主题\ndocument.body.removeAttribute('arco-theme');\n```\n\n## 原理和内置颜色\n\n可参考 [暗黑模式](https://arco.design/react/docs/palette) 和 [颜色](https://arco.design/react/docs/palette)\n"
  },
  {
    "path": "packages/arco-vue-docs/docs/faq.en-US.md",
    "content": "```yaml\nmeta:\n  type: Developer Guide\ntitle: FAQ\ndescription: Frequently Asked Questions in the Use of the Component Library\n```\n\n## Controlled and Uncontrolled\n\nThe concept of `controlled` is used in the Arco Design Vue component library, as the name suggests, the display state of the component will always be the same as the incoming value. We recommend using input components in controlled mode.\n\nAt this time, you can modify the value of `model-value` through `two-way binding (v-model)` or `change` event to ensure the same value inside and outside the component.\n\nIn controlled mode, if you want to control the displayed value, you can use the `change` event to handle it.\n\nIf we don't want to control the value of the component, we can use the uncontrolled mode, in which case the value of the component will be maintained inside the component, and the initial value can be set by `default-value`. In uncontrolled mode, you can get the value of the component through the `change` event.\n\npay attention:\nThe `default-*` class attributes are used to set initial values in uncontrolled mode and do not affect subsequent states. When this value and the controlled value are used at the same time, the controlled value takes precedence.\n\n\n## Update At Scroll\n\nBy default, the drop-down menu will follow the change of the window scroll bar to update the position. If the component containing the drop-down menu is placed in a scrollable container, there will be a problem that the drop-down menu does not update the position when the container is scrolled. At this time, you can use the trigger inside the component. configuration, will `updateAtScroll`\nSet to `true` to enable rolling update support.\n\nIf there are many such scenes in the project, you can enable this property globally through the [ConfigProvider](/vue/component/config-provider) component.\n\n## The use of virtual lists\n\nComponents that support setting up virtual lists [List](/vue/component/list) 、[Select](/vue/component/Select)、[Table](/vue/component/table)、[Tree](/vue/component/tree) set `virtual-list-props` Enable the virtual list function.\n\nThe rendering of virtual list elements can be divided into two cases: **elements are highly fixed** and **elements are highly dynamic**.\n\n|Name|Description|Type|Default|version|\n|---|---|---|:---:|:---|\n|height|Viewable area height|`number \\| string`|`-`||\n|fixedSize| Whether the elements in the list are of fixed size (height) |`boolean`|`false`|2.34.1|\n|estimatedSize| Estimated size (height) [this value is not valid when `fixedSize` is `true`], and if it is closer to the average size, the scroll bar length will look more accurate. It is recommended to allocate the average calculated by yourself. The default dynamic height will use the average of the first Section |`number`|`-`|2.34.1|\n|buffer| The number of elements mounted in advance outside the boundary of the viewport. (`Section = buffer * 3`) the default value is `10` (that is, Section defaults to 30). It is recommended to adjust the height of the list viewport. This value will affect performance. |`number`|`10`|2.34.1|\n"
  },
  {
    "path": "packages/arco-vue-docs/docs/faq.zh-CN.md",
    "content": "```yaml\nmeta:\n  type: 开发指南\ntitle: 常见问题\ndescription: 组件库使用中的常见问题解答\n```\n\n## 受控与非受控\n\nArco Design Vue 组件库中使用了 `受控` 的概念，正如其名，组件的显示状态将始终与传入值相同。我们推荐通过受控模式来使用输入组件。\n\n这时可以通过 `双向绑定（v-model）` 或者 `change` 事件来修改 `model-value` 的值，来保证组件内部与外部的值相同。\n\n在受控模式中，如果希望控制显示的值，可以使用 `change` 事件进行处理。\n\n如果我们不希望控制组件的值，可以使用非受控模式，此时组件的值将维护在组件内部，可以通过 `default-value` 来设置初始值。非受控模式下可以通过 `change` 事件来获取组件的值。\n\n特别注意：\n`default-*` 类属性用来设置非受控模式下的初始值，不会影响后续的状态。此值与受控值同时使用时，受控值优先生效。\n\n\n## 下拉菜单的滚动跟随\n\n下拉菜单默认会跟随 window 滚动条的变化更新位置，如果将包含下拉菜单的组件放置在一个可滚动的容器中，会出现容器滚动时下拉菜单没有更新位置的问题，此时可以通过组件内部的 trigger 配置，将 `updateAtScroll`\n设置为 `true` 开启滚动更新的支持。\n\n如果项目内此场景较多，可以通过 [ConfigProvider](/vue/component/config-provider) 组件全局开启此属性。\n\n## 虚拟列表的使用\n\n支持设置虚拟列表的组件 [List](/vue/component/list) 、[Select](/vue/component/Select)、[Table](/vue/component/table)、[Tree](/vue/component/tree) 设置 `virtual-list-props` 开启虚拟列表功能。\n\n虚拟列表元素的渲染分为 **元素高度固定**，**元素高度动态** 两种情况。\n\n|参数名|描述|类型|默认值|版本|\n|---|---|---|:---:|:---|\n|height|可视区域高度|`number \\| string`|`-`||\n|fixedSize| 列表内元素是否为固定大小（高度）|`boolean`|`false`|2.34.1|\n|estimatedSize| 预估大小（高度）[当 `fixedSize` 为 `true` 时，此值无效]，如果它更接近平均大小，则滚动条长度看起来将更准确。建议分配自己计算的平均值。默认动态高度将使用首个 Section 的平均值|`number`|`-`|2.34.1|\n|buffer|视口边界外提前挂载的元素数量。（`Section = buffer * 3`）默认值为 `10`（也就是 Section 默认为 30）, 建议根据列表视口的高度做调整，此值太大会影响性能。|`number`|`10`|2.34.1|\n"
  },
  {
    "path": "packages/arco-vue-docs/docs/i18n.en-US.md",
    "content": "```yaml\nmeta:\n  type: Developer Guide\ntitle: Globalization\ndescription: All component texts use Chinese by default, and other languages can be used by setting.\n```\n\n_Auto translate by google._\n\nInternationalization is achieved through the [ConfigProvider](/vue/component/config-provider) component.\n\n## Basic usage\n\n```vue\n<template>\n  <a-config-provider :locale=\"enUS\">\n    <a-pagination :total=\"50\" show-total show-jumper show-page-size />\n  </a-config-provider>\n</template>\n\n<script>\nimport enUS from '@arco-design/web-vue/es/locale/lang/en-us';\n\nexport default {\n  data() {\n    return {\n      enUS,\n    };\n  },\n};\n</script>\n```\n\n## Supported regional languages\n\n| Language            | Area code |\n| ------------------- | --------- |\n| Simple Chinese      | zh-CN     |\n| English (US)        | en-US     |\n| Japanese            | ja-JP     |\n| Traditional Chinese | zh-TW     |\n| Portuguese          | pt-PT     |\n| Spanish             | es-ES     |\n| Indonesian          | id-ID     |\n| French, France      | fr-FR     |\n| German, Germany     | de-DE     |\n| Korean              | ko-KR     |\n| Italian, Italy      | it-IT     |\n| Thai                | th-TH     |\n| Melayu (Malaysia)   | ms-MY     |\n| Vietnamese          | vi-VN     |\n| Khmer (Cambodia)    | km-KH     |\n| Arabic (Egypt)      | ar-EG     |\n| Russian (Russia)    | ru-RU     |\n| Dutch (Netherlands) | nl-NL     |\n"
  },
  {
    "path": "packages/arco-vue-docs/docs/i18n.zh-CN.md",
    "content": "```yaml\nmeta:\n  type: 开发指南\ntitle: 国际化\ndescription: 所有组件文案默认使用的是中文，通过设置可以使用其它语言。\n```\n\n通过 [ConfigProvider](/vue/component/config-provider) 组件实现国际化。\n\n## 基本用法\n\n```vue\n<template>\n  <a-config-provider :locale=\"enUS\">\n    <a-pagination :total=\"50\" show-total show-jumper show-page-size />\n  </a-config-provider>\n</template>\n\n<script>\nimport enUS from '@arco-design/web-vue/es/locale/lang/en-us';\n\nexport default {\n  data() {\n    return {\n      enUS,\n    };\n  },\n};\n</script>\n```\n\n## 支持的地区语言\n\n| 语言                 | 地区编码 |\n| -------------------- | -------- |\n| 简体中文             | zh-CN    |\n| 英文                 | en-US    |\n| 日文                 | ja-JP    |\n| 繁体中文（中国台湾） | zh-TW    |\n| 葡萄牙语             | pt-PT    |\n| 西班牙语             | es-ES    |\n| 印度尼西亚语         | id-ID    |\n| 法语（法国）         | fr-FR    |\n| 德语（德国）         | de-DE    |\n| 韩语                 | ko-KR    |\n| 意大利语(意大利)     | it-IT    |\n| 马来语(马来西亚)     | ms-MY    |\n| 泰语                 | th-TH    |\n| 越南语               | vi-VN    |\n| 高棉语（柬埔寨）       | km-KH    |\n| 阿拉伯语（埃及）       | ar-EG    |\n| 俄语（俄罗斯）       | ru-RU    |\n| 荷兰语（荷兰）       | nl-NL    |\n"
  },
  {
    "path": "packages/arco-vue-docs/docs/pro/build.en-US.md",
    "content": "```yaml\nmeta:\n  type: Arco Pro\ntitle: Package build\ndescription: Package code\n```\n\n*Auto translate by google.*\n\n## Package and build\n\nWhen the code is written, execute the following command to package the code\n\n```bash\nnpm run build\n```\n\nThis command calls the packaging command provided by vite. After the packaging is completed, a `dist` folder will be generated in the root directory, which is the code that can be used for deployment.\n\nPS: Tips for reducing package size! ! !\n\nBecause in the Pro project, the displayed table component requires the vue compile function, so a version with a compiler is introduced.\n\nIf you don't need the Vue template compilation function, delete the corresponding business code, configure the specified Vue version, and build and package to reduce the package size.\n\nIf you need the ability to compile vue templates, you can configure it in the vite.config.prod.ts file (see below).\n\n ```ts\n// config/vite.config.build.ts\nimport {defineConfig} from'vite';\n\nexport default defineConfig({\n  mode:'production',\n  ...\n  resolve: {\n    alias: [\n      {\n        find:'vue',\n        replacement:'vue/dist/vue.esm-bundler.js', // need to compile tmp\n      },\n    ],\n  },\n});\n```\n\nFor more specific configuration details, please refer to [vite](https://vitejs.dev/)[Official Website](https://vitejs.dev/).\n"
  },
  {
    "path": "packages/arco-vue-docs/docs/pro/build.zh-CN.md",
    "content": "```yaml\nmeta:\n  type: Arco Pro 最佳实践\ntitle: 打包构建\ndescription: 打包代码\n```\n\n## 打包构建\n\n当代码书写完成后，执行以下命令即可打包代码\n\n```bash\nnpm run build\n```\n\n该命令调用的是 vite 提供的打包命令，打包完成后，会在根目录生成 `dist` 文件夹，这里面就是可以用于部署的代码。\n\nPS: 打包体积缩减提示！！！\n\n因为在Pro项目中，展示的table组件需要 vue compile 功能，所以引入了带有编译器的版本。\n\n如果不需要vue 模板编译功能，删除对应的业务代码后，配置指定的vue版本，构建打包以缩小打包体积。\n\n如果需要 vue 模板编译 能力，可在 vite.config.prod.ts 文件 中进行配置（如下）。\n\n ```ts\n// config/vite.config.build.ts\nimport { defineConfig } from 'vite';\n\nexport default defineConfig({\n  mode: 'production',\n  ...\n  resolve: {\n    alias: [\n      {\n        find: 'vue',\n        replacement: 'vue/dist/vue.esm-bundler.js', // 需要编译tmp\n      },\n    ],\n  },\n});\n```\n\n更多具体配置详见[vite](https://vitejs.dev/)[官网](https://vitejs.dev/)。\n"
  },
  {
    "path": "packages/arco-vue-docs/docs/pro/directory.en-US.md",
    "content": "```yaml\nmeta:\n  type: Arco Pro\ntitle: Directory Structure\ndescription: The organizational structure of the project file.\n```\n\n*Auto translate by google.*\n\n## Content\n\n```\n├── README.md\n├── package.json\n├── index.html\n├── src\n│   ├── api # Request interface\n│   ├── assets # Static resources\n│         └── style # Global style\n│   ├── components # General business components\n│   ├── config # Global configuration (including echarts theme)\n│         └── settings.json # Configuration file\n│   ├── directive # Instruction set (if necessary, you can add it yourself)\n│   ├── filters # filter (if necessary, you can add it yourself)\n│   ├── hooks # global hooks\n│   ├── layout # Layout\n│   ├── locale # Internationalized language pack\n│   ├── mock # Mock data\n│   ├── views # Page template\n|   |—— router # Routing configuration\n│   ├── store # State management center\n│   ├── types # Typescript types\n│   └── utils # Tool library\n│   └── App.vue # View entrance\n│   └── main.ts # Entry file\n└── tsconfig.json\n```\n\nps: [Filter description](https://v3-migration.vuejs.org/breaking-changes/filters.html)\n"
  },
  {
    "path": "packages/arco-vue-docs/docs/pro/directory.zh-CN.md",
    "content": "```yaml\nmeta:\n  type: Arco Pro 最佳实践\ntitle: 目录结构\ndescription: 项目文件的组织结构\n```\n\n## 目录\n\n```\n├── README.md\n├── package.json\n├── index.html\n├── src\n│   ├── api  # 请求接口\n│   ├── assets  # 静态资源\n│          └── style 全局样式\n│   ├── components  # 通用业务组件\n│   ├── config  # 全局配置(包含echarts主题)\n│          └── settings.json  # 配置文件\n│   ├── directives # 指令集（如需，可自行补充）\n│   ├── filters # 过滤器（如需，可自行补充）\n│   ├── hooks # 全局hooks\n│   ├── layout  # 布局\n│   ├── locale  # 国际化语言包\n│   ├── mock  # 模拟数据\n│   ├── views  # 页面模板\n│   ├── router # 路由配置\n│   ├── store  # 状态管理中心\n│   ├── types  # Typescript 类型\n│   └── utils  # 工具库\n│   └── App.vue  # 视图入口\n│   └── main.ts  # 入口文件\n└── tsconfig.json\n```\n\nps：[过滤器说明](https://v3-migration.vuejs.org/breaking-changes/filters.html)\n"
  },
  {
    "path": "packages/arco-vue-docs/docs/pro/faq.en-US.md",
    "content": "```yaml\nmeta:\n  type: Arco Pro\ntitle: FAQ\ndescription: Arco Design Pro Vue FAQ Collection\n```\n\n*Auto translate by google.*\n\n## Initialization\n\n### 1. Initialization of arco-cli failed\n\n![](https://p3-armor.byteimg.com/tos-cn-i-49unhts6dw/iShot_2022-05-26_16.12.14.png~tplv-49unhts6dw-image.image)\n\nIf the dependency installation fails, go to the directory of the initialization project and execute the npm install or yarn install installation operation again.\n\n## Development\n\n### 1. How to set highlight for menu items?\nSee [Routes and menu](/vue/docs/pro/routes-and-menu) for details\n\n### 2.Menu hides children\nSee [Routes and menu](/vue/docs/pro/routes-and-menu) for details\n\n### 3.Configure first-level menu items\n\nDue to the architecture, configuring a single first-level menu item requires the cooperation of multiple menu configuration items. See [#85]([/vue/docs/pro/routes-and-menu](https://github.com/arco-design/arco-design-pro-vue/issues/85#issuecomment-1142289501)) for details\n\n### 4.Using jsx in Vue3\n\n详见 [babel-plugin-jsx](https://github.com/vuejs/babel-plugin-jsx)\n\n### 5.Cross-domain proxy\nSee [vite configuration](https://cn.vitejs.dev/config/#server-open) for details\n\n### 6.Code cannot be pushed\n\nBecause of the use of [husky](https://github.com/typicode/husky), the hook [normalizes](https://docs.google.com/document/d/1QrDFcIiPjSLDn3EL15IJygNPiHORgU1_OOAqWjiDU5Y/edit#heading=h.greljkmo14y0) the uploaded commit information check.\n\nPlease follow the documentation for git commit information normalization.\n\nIf you do not need this function, you can delete husky related files and corresponding scripts. (**Not recommended**)\n\n## Build\n\n### 1. Rollup failed to resolve import \"XXXXXX/node_modules/@arco-design/web-vue/es/xxx-xxx/style/css.js”\n\nThe error comes from loading the build plugin (config/plugin/styleImport.ts) on demand. There are several reasons for this problem.\n\n- The new version of the component library has added components.\n\n- The component itself is missing and not added.\n\n- The unplugin-vue-components dependency library version is too low.\n\nSolution please [move](https://github.com/arco-design/arco-design-pro-vue/issues/71).\n\n### 2. Executing build TS type error\n\n![](https://p3-armor.byteimg.com/tos-cn-i-49unhts6dw/iShot_2022-05-26_17.36.59.png~tplv-49unhts6dw-image.image)\n\nReason for error:\n\n- There is a problem with the spelling itself.\n\n- The new version of the component library has made changes to the type declaration.\n\nSolution:\n\n- Follow the type hints to make changes.\n\n- Turn off vue-tsc checks. (**Not recommended**)\n\n```ts\n// package.json\n\n  \"build\": \"vue-tsc --noEmit && vite build --config ./config/vite.config.prod.ts\"  // before fixing\n\n  \"build\": \"vite build --config ./config/vite.config.prod.ts\" // 修改后\n```\n\n### 3. Vue-tsc builds slowly\n\n- Reinstall vue-tsc to the latest version.\n\n```shell\n# npm\nnpm install vue-tsc@latest\n# yarn\nyarn add vue-tsc@latest\n```\n\n- Turn off vue-tsc checks. (**Not recommended**)\n\n\n\n### 4. Preview the packaged project\n\n```shell\n# npm\nnpm run preview\n# yarn\nyarn preview\n```\n**PS: The preview command will execute the build operation first in Pro.**\n\n## Deployment\n\n### 1. After the page is deployed successfully, refresh the 404 page\n\n[Moving to Vue Router](https://router.vuejs.org/guide/essentials/history-mode.html)\n\n## Other\n\n### 1. Can the developed projects be upgraded to the latest version?\n\nArco Pro, as a project template, does not have the ability to smoothly upgrade to the latest version.\n\nIf you need a new version capability, you can initialize a project and copy your business code into it, and then make the corresponding changes.\n"
  },
  {
    "path": "packages/arco-vue-docs/docs/pro/faq.zh-CN.md",
    "content": "```yaml\nmeta:\n  type: Arco Pro 最佳实践\ntitle: 常见问题\ndescription: Arco Design Pro Vue 常见问题合集\n```\n\n## 初始化\n\n### 一、arco-cli初始化失败\n\n![](https://p3-armor.byteimg.com/tos-cn-i-49unhts6dw/iShot_2022-05-26_16.12.14.png~tplv-49unhts6dw-image.image)\n\n依赖安装失败的问题，进入到初始化项目的目录，重新执行执行npm install 或 yarn install安装操作即可。\n\n## 开发相关\n\n### 一、菜单项如何设置高亮？\n详见 [路由和菜单](/vue/docs/pro/routes-and-menu)\n\n### 二、菜单隐藏子项\n详见 [路由和菜单](/vue/docs/pro/routes-and-menu)\n\n### 三、配置一级菜单项\n\n因为架构缘故，配置单独的一级菜单项，需要多个菜单配置项进行配合。详见 [#85]([/vue/docs/pro/routes-and-menu](https://github.com/arco-design/arco-design-pro-vue/issues/85#issuecomment-1142289501))\n\n### 四、Vue3 中使用 jsx 写法\n\n详见 [babel-plugin-jsx](https://github.com/vuejs/babel-plugin-jsx)\n\n### 五、跨域代理\n详见 [vite配置](https://cn.vitejs.dev/config/#server-open)\n\n### 六、代码无法提交\n\n因为使用了 [husky](https://github.com/typicode/husky) 的缘故，钩子对上传的commit信息进行[规范化](https://docs.google.com/document/d/1QrDFcIiPjSLDn3EL15IJygNPiHORgU1_OOAqWjiDU5Y/edit#heading=h.greljkmo14y0)校验。\n\n请按照文档进行git commit信息规范化。\n\n如果不需要该功能，可以删除掉husky相关文件和对应脚本。（**不推荐**）\n\n\n## 构建相关\n\n### 一. Rollup failed to resolve import \"XXXXXX/node_modules/@arco-design/web-vue/es/xxx-xxx/style/css.js”\n\n报错源于按需加载构建插件(config/plugin/styleImport.ts)，该问题产生分别有以下几个原因\n\n- 新版组件库新增了组件。\n\n- 组件本身遗漏未进行添加。\n\n- unplugin-vue-components 依赖库版本过低。\n\n解决方法请 [移步](https://github.com/arco-design/arco-design-pro-vue/issues/71)。\n\n### 二、执行构建TS类型报错\n\n![](https://p3-armor.byteimg.com/tos-cn-i-49unhts6dw/iShot_2022-05-26_17.36.59.png~tplv-49unhts6dw-image.image)\n\n报错原因：\n\n- 写法本身存在问题。\n\n- 新版组件库对类型声明进行了变更修改。\n\n解决方法：\n\n- 按照类型提示进行修改。\n\n- 关闭vue-tsc检查。(**不推荐**)\n\n```ts\n// package.json\n\n  \"build\": \"vue-tsc --noEmit && vite build --config ./config/vite.config.prod.ts\"  // 修改前\n\n  \"build\": \"vite build --config ./config/vite.config.prod.ts\" // 修改后\n```\n\n### 三、vue-tsc构建缓慢\n\n- 重新安装vue-tsc至最新版本。\n\n```shell\n# npm\nnpm install vue-tsc@latest\n# yarn\nyarn add vue-tsc@latest\n```\n\n- 关闭vue-tsc检查。(**不推荐**)\n\n\n### 四、预览打包项目\n\n```shell\n# npm\nnpm run preview\n# yarn\nyarn preview\n```\n**PS: 该预览命令在Pro中会先执行build操作。**\n\n## 部署相关\n\n### 一、页面部署成功后刷新出现404页面\n\n[移步 Vue Router](https://router.vuejs.org/guide/essentials/history-mode.html)\n\n## 其它\n\n### 一、已经开发的项目是否能够升级到最新版？\n\nArco Pro作为一个项目模板，不具备平滑升级过渡到最新版本的能力。\n\n如需新版本能力，可以初始化一个项目后将自己的业务代码拷贝进去，在进行相应的更改即可。\n"
  },
  {
    "path": "packages/arco-vue-docs/docs/pro/i18n.en-US.md",
    "content": "```yaml\nmeta:\n  type: Arco Pro\ntitle: Internationalization\ndescription: Multi-language implementation\n```\n\n*Auto translate by google.*\n\n## Language Pack\n\nInternationalization is firstly the provision of language packs. In Pro, the language packs are defined in `src/locale`, and then imported into `main` to take effect.\n\n```\n├── locale\n│ ├── en-US.ts\n│ └── zh-CN.ts\n├── hooks\n│ ├── locale.ts\n└── main.ts\n```\n\nAt the same time, hooks for obtaining the current language and switching the current language are provided in the hooks directory.\n\n ```ts\nimport {computed} from'vue';\nimport {useI18n} from'vue-i18n';\n\nexport default function useLocale() {\n     const i18 = useI18n();\n     const currentLocale = computed(() => {\n         return i18.locale.value;\n     });\n     const changeLocale = (value: string) => {\n         i18.locale.value = value;\n         localStorage.setItem('arco-locale', value);\n     };\n     return {\n         currentLocale,\n         changeLocale,\n     };\n}\n```\n"
  },
  {
    "path": "packages/arco-vue-docs/docs/pro/i18n.zh-CN.md",
    "content": "```yaml\nmeta:\n  type: Arco Pro 最佳实践\ntitle: 国际化\ndescription: 多语言实现\n```\n\n## 语言包\n\n国际化首先是语言包的提供，Pro 里面将语言包定义在 `src/locale` 中，然后导入 `main` 中生效。\n\n```\n├── locale\n│ ├── en-US.ts\n│ └── zh-CN.ts\n├── hooks\n│ ├── locale.ts\n└── main.ts\n```\n\n同时在hooks目录中提供获取当前语言以及切换当前语言的hook。\n\n ```ts\nimport { computed } from 'vue';\nimport { useI18n } from 'vue-i18n';\n\nexport default function useLocale() {\n    const i18 = useI18n();\n    const currentLocale = computed(() => {\n        return i18.locale.value;\n    });\n    const changeLocale = (value: string) => {\n        i18.locale.value = value;\n        localStorage.setItem('arco-locale', value);\n    };\n    return {\n        currentLocale,\n        changeLocale,\n    };\n}\n```\n"
  },
  {
    "path": "packages/arco-vue-docs/docs/pro/layout.en-US.md",
    "content": "```yaml\nmeta:\n  type: Arco Pro\ntitle: Layout\ndescription: General layout of the page\n```\n\n*Auto translate by google.*\n\n## Layout\n\nThere is only one set of layouts currently provided, which is applied to all routing pages, including side menu bar, top notification bar, footer and content area. The side bar and top notification bar are fixed to facilitate the scrolling process of users Focus on other views.\n\n![](https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/ebd0bd6d4c044c1e945527194384fcaa.png~tplv-uwbnlip3yd-webp.webp)\n\nIn addition, the responsive sidebar will automatically shrink as follows when the window width is less than `1200px`:\n\n![](https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/c730fddca82cf8c4cda27cef9ecd6683.png~tplv-uwbnlip3yd-webp.webp)\n"
  },
  {
    "path": "packages/arco-vue-docs/docs/pro/layout.zh-CN.md",
    "content": "```yaml\nmeta:\n  type: Arco Pro 最佳实践\ntitle: 布局\ndescription: 页面通用布局\n```\n\n## 布局\n\n目前提供的布局只有一套，应用到了所有路由页面上，包含侧边菜单栏，顶部通知栏，页脚和内容区域，其中侧边栏和顶部通知栏都是 fixed 的，方便用户在滚动的过程中关注到其他视图。\n\n![](https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/ebd0bd6d4c044c1e945527194384fcaa.png~tplv-uwbnlip3yd-webp.webp)\n\n此外，响应式的侧边栏会在窗口宽度小于 `1200px` 的时候，自动收缩如下：\n\n![](https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/c730fddca82cf8c4cda27cef9ecd6683.png~tplv-uwbnlip3yd-webp.webp)\n"
  },
  {
    "path": "packages/arco-vue-docs/docs/pro/mock.en-US.md",
    "content": "```yaml\nmeta:\n  type: Arco Pro\ntitle: Interface and Mock\ndescription: Network request, interceptor and simulation data\n```\n\n*Auto translate by google.*\n\n## Network request\n\nUse axios to make remote interface requests.\n\nIt is recommended to improve the type definition of the returned and requested data.\n\n ```ts\nimport axios from'axios';\n\nexport interface UserToken {\n  token: string;\n}\n\nexport interface UserStateTypes {\n  name: string;\n  location: string;\n}\nexport function getUserInfo(data: UserToken) {\n  // Get complete type hints by passing generics.\n  return axios.post<UserStateTypes>('/api/user/info', data);\n}\n```\n\n## Interceptor\n\nMulti-layer interceptors can be added according to the needs of your own system.\n\n ```ts\nimport axios, {AxiosRequestConfig, AxiosResponse} from'axios';\n// Users can modify according to their own background system\nexport interface HttpResponse<T = unknown> {\n  status: number;\n  msg: string;\n  code: number;\n  data: T;\n}\n\naxios.interceptors.request.use(\n  (config: AxiosRequestConfig) => {\n    // Configure the request here\n    return config;\n  },\n  (error) => {\n    // What to do with request errors\n    return Promise.reject(error);\n  }\n);\n// Add response interceptor\naxios.interceptors.response.use(\n  (response: AxiosResponse<HttpResponse>) => {\n    const res = response.data;\n    // if the custom code is not 20000, it is judged as an error.\n    if (res.code !== 20000) {\n      // remind users\n\n      // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;\n      if (\n        [50008, 50012, 50014].includes(res.code)\n      ) {\n        // do something\n      }\n      return Promise.reject(new Error(res.msg ||'Error'));\n    }\n    return res;\n  },\n  (error) => {\n    return Promise.reject(error);\n  }\n);\n```\n\nIntercept ajax and return simulated data\n\n## mock solution\n\nParallel development of the front and back ends means that the front end needs to be developed without interface data. In this case, if the function of simulating data requests can be provided, our data request code can be written normally. Pro uses Mock.js to achieve This feature.\n\nMock.js will intercept the ajax request. If there is a matching mock rule, the ajax will not be sent out, but the mock data will be returned. Mock.js has a wealth of simulation data generation methods, it is recommended to read the document first, the document is very clear and easy to understand [MockJs document](http://mockjs.com/)\n\n ```ts\nimport Mock from'mockjs';\nimport {\n  successResponseWrap,\n} From'@/utils/setup-mock';\n\nMock.mock(new RegExp('/api/chatList'), () => {\n    const data = Mock.mock(successResponseWrap({\n        'data|4-6': [\n            {\n                'id|+1': 1,\n                username:'User 7352772',\n                content:'It will start soon, so excited! ',\n                time: '13:09:12',\n                'isCollect|2': true,\n            },\n        ],\n    }));\n\n    return data.data;\n});\n```\n\nWhen the request url sent by the client is matched by `new RegExp('/api/chatList')`, Mock.js will intercept the request, execute the corresponding callback function, and return the data returned in the callback function.\n\n> Note: Requests that are matched and intercepted by Mock.js will not appear in the network panel of the developer tools.\n\n## Close Mock\n\nIn order to facilitate the opening and closing of the data simulation function, each `Mock` will be wrapped by `setupMock.setup`, the setupMock is as follows:\n\n ```ts\nimport {debug} from'./env';\nexport default ({ mock, setup }: {mock?: boolean; setup: () => void; }) => {\n  if (mock !== false && debug) setup();\n};\n```\n\nData simulation is started by default in a non-production environment. When we need to debug the interface, we only need to set the mock parameter of setupMock to false, as follows:\n\n ```ts\nimport Mock from'mockjs';\nimport setupMock from'../utils/setupMock';\n\nsetupMock({\n  mock: false\n  setup() {\n  // User Info\n    Mock.mock(new RegExp('/api/userInfo'), () => {\n        return {\n          name:'name',\n        };\n    });\n  },\n});\n```\n"
  },
  {
    "path": "packages/arco-vue-docs/docs/pro/mock.zh-CN.md",
    "content": "```yaml\nmeta:\n  type: Arco Pro 最佳实践\ntitle: 接口和数据模拟\ndescription: 网络请求、拦截器及模拟数据\n```\n\n## 网络请求\n\n使用axios进行远程接口请求。\n\n建议完善返回及请求数据的类型定义。\n\n ```ts\nimport axios from 'axios';\n\nexport interface UserToken {\n  token: string;\n}\n\nexport interface UserStateTypes {\n  name: string;\n  location: string;\n}\nexport function getUserInfo(data: UserToken) {\n  // 通过传递泛型，以获得完整的类型提示。\n  return axios.post<UserStateTypes>('/api/user/info', data);\n}\n```\n\n## 拦截器\n\n可以根据自身系统需要增加多层拦截器。\n\n ```ts\nimport axios, { AxiosRequestConfig, AxiosResponse } from 'axios';\n// 用户可以根据自身后台系统进行修改\nexport interface HttpResponse<T = unknown> {\n  status: number;\n  msg: string;\n  code: number;\n  data: T;\n}\n\naxios.interceptors.request.use(\n  (config: AxiosRequestConfig) => {\n    // 此处对请求进行配置\n    return config;\n  },\n  (error) => {\n    // 对请求错误做些什么\n    return Promise.reject(error);\n  }\n);\n// 添加响应拦截器\naxios.interceptors.response.use(\n  (response: AxiosResponse<HttpResponse>) => {\n    const res = response.data;\n    // if the custom code is not 20000, it is judged as an error.\n    if (res.code !== 20000) {\n      // remind users\n\n      // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;\n      if (\n        [50008, 50012, 50014].includes(res.code)\n      ) {\n        // do something\n      }\n      return Promise.reject(new Error(res.msg || 'Error'));\n    }\n    return res;\n  },\n  (error) => {\n    return Promise.reject(error);\n  }\n);\n```\n\n拦截 ajax 并返回模拟的数据\n\n## mock解决方案\n\n前后端并行开发意味着前端需要在没有接口数据的情况下进行开发，在这种情况下如果能提供模拟数据请求的功能，我们的数据请求代码就能正常书写，Pro 采用了 Mock.js 来实现这个功能。\n\nMock.js 会拦截 ajax 请求，如果有匹配的 mock 规则，就不会将 ajax 发出去，而是返回 mock 的数据。Mock.js 有着丰富的模拟数据生成方法，建议先读一下文档，文档写的很清晰易懂 [MockJs 文档](http://mockjs.com/)\n\n ```ts\nimport Mock from 'mockjs';\nimport {\n  successResponseWrap,\n} from '@/utils/setup-mock';\n\nMock.mock(new RegExp('/api/chatList'), () => {\n    const data = Mock.mock(successResponseWrap({\n        'data|4-6': [\n            {\n                'id|+1': 1,\n                username: '用户7352772',\n                content: '马上就开始了，好激动！',\n                time: '13:09:12',\n                'isCollect|2': true,\n            },\n        ],\n    }));\n\n    return data.data;\n});\n```\n\n当客户端发送请求的 url 被 `new RegExp('/api/chatList')` 匹配到，Mock.js 就会拦截这条请求，并执行对应的回调函数，返回回调函数中 return 的数据。\n\n> 注意：被 Mock.js 匹配并拦截的请求，不会出现在开发者工具的 network 面板中。\n\n## 关闭 Mock\n\n为了方便开启和关闭数据模拟功能，每个 `Mock` 都会被 `setupMock.setup` 包裹，setupMock 如下：\n\n```\nimport { debug } from './env';\nexport default ({ mock, setup }: { mock?: boolean; setup: () => void; }) => {\n  if (mock !== false && debug) setup();\n};\n```\n\n非生产环境下默认启动数据模拟，当我们需要调试接口的时候只需要将 setupMock 的 mock 参数置为 false 即可，如下：\n\n ```ts\nimport Mock from 'mockjs';\nimport setupMock from '../utils/setupMock';\n\nsetupMock({\n  mock: false\n  setup() {\n  // 用户信息\n    Mock.mock(new RegExp('/api/userInfo'), () => {\n        return {\n          name: 'name',\n        };\n    });\n  },\n});\n```\n"
  },
  {
    "path": "packages/arco-vue-docs/docs/pro/npm-scripts.en-US.md",
    "content": "```yaml\nmeta:\n  type: Arco Pro\ntitle: Npm Scripts\ndescription: package.json script presets convenient and practical commands\n```\n\n*Auto translate by google.*\n\n## Configuration file\n\n```\n├── README.md\n├── config\n│ ├── plugin  # vite plugin\n│ ├── vite.config.base.ts  # Basic Environment Configuration\n│ ├── vite.config.dev.ts # Development environment configuration\n│ ├── vite.config.prod.ts # Production environment configuration\n└── package.json\n```\n\n## Local development\n\n```bash\nnpm run dev\n```\n\nThe command invoked is as follows\n\n```json\n{\n   \"scripts\": {\n     \"dev\": \"vite --config ./config/vite.config.dev.ts\",\n   }\n}\n```\n\n## Build production\n\n```bash\nnpm run build\n```\n\nThe commands to be called are as follows. According to actual needs, please refer to [vite](https://vitejs.dev/)[Official Website](https://vitejs.dev/) for output configuration.\n\n```json\n{\n   \"scripts\": {\n     \"build\": \"vue-tsc --noEmit && vite build --config ./config/vite.config.prod.ts\",\n   }\n}\n```\n"
  },
  {
    "path": "packages/arco-vue-docs/docs/pro/npm-scripts.zh-CN.md",
    "content": "```yaml\nmeta:\n  type: Arco Pro 最佳实践\ntitle: npm 命令\ndescription: package.json script 预置方便实用的命令\n```\n\n## 配置文件\n\n```\n├── README.md\n├── config\n│   ├── plugin  # vite插件\n│   ├── vite.config.base.ts  # 基础环境配置\n│   ├── vite.config.dev.ts  # 开发环境配置\n│   ├── vite.config.prod.ts  # 生产环境配置\n└── package.json\n```\n\n## 本地开发\n\n```bash\nnpm run dev\n```\n\n调用的命令如下\n\n```json\n{\n  \"scripts\": {\n    \"dev\": \"vite --config ./config/vite.config.dev.ts\",\n  }\n}\n```\n\n## 构建生产\n\n```bash\nnpm run build\n```\n\n调用的命令如下，可以根据实际需要，查阅[vite](https://vitejs.dev/)[官网](https://vitejs.dev/)，进行输出配置。\n\n```json\n{\n  \"scripts\": {\n    \"build\": \"vue-tsc --noEmit && vite build --config ./config/vite.config.prod.ts\",\n  }\n}\n```\n"
  },
  {
    "path": "packages/arco-vue-docs/docs/pro/permission.en-US.md",
    "content": "```yaml\nmeta:\n  type: Arco Pro\ntitle: Permission control\ndescription: Permission control is a very common basic function in middle and background scenarios. In v2.2.0, the permission control function was integrated into Arco Design Pro\n```\n*Auto translate by google.*\n\n## Applicable scene\n\nThe common front-end permission control in the middle and background can be roughly summarized as the following scenarios:\n\n1. Menu permission control, manage permissions for a certain menu/page , you can see this page, otherwise it will show no permission.\n\n[//]: # (![]&#40;http://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/116622141d7b228ad2259c81cd32d095.gif~tplv-uwbnlip3yd-3.awebp&#41;)\n\n2. Menu permission control, manage permissions for a certain menu/page , you can see this page, otherwise it will show no permission.\n\n\n[//]: # (![]&#40;http://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/7b410fa5dad6e47665c264fae910c0c8.gif~tplv-uwbnlip3yd-3.awebp&#41;)\n\n\n## Usage\n\n### Menu permission management\n\nFor menu and routing permission control, you can add `roles` parameters . (If not added, the default is to have permission)\n\n`roles` can be defined according to their own business.\n\n\n```ts\nexport default {\n  path: 'dashboard',\n  name: 'dashboard',\n  component: () => import('@/views/dashboard/index.vue'),\n  meta: {\n    locale: 'menu.dashboard',\n    requiresAuth: true,\n    icon: 'icon-dashboard',\n  },\n  children: [\n    {\n      path: 'workplace',\n      name: 'workplace',\n      component: () => import('@/views/dashboard/workplace/index.vue'),\n      meta: {\n        locale: 'menu.dashboard.workplace',\n        requiresAuth: true,\n        roles: ['*'], // * Indicates wildcard permissions. Tip: In order to write less code, you can also not define this field.\n      },\n    },\n    {\n      path: 'monitor',\n      name: 'monitor',\n      component: () => import('@/views/dashboard/monitor/index.vue'),\n      meta: {\n        locale: 'menu.dashboard.monitor',\n        requiresAuth: true,\n        roles: ['admin'],\n      },\n    },\n  ],\n};\n```\n\n### A button permission management\n\nArco Design Pro encapsulates the `v-permission` directives . Can be used on components or native elements.\nAs follows, place the authorized role types in the array.\n\n```vue\n<button v-permission=\"['admin']\">Delete</button>\n\n<a-button v-permission=\"['user']\">Delete</a-button>\n```\n\nThe above is the specific method of using the front-end page for permission control, but it needs to combine the back-end interface to return the specific permissions owned by the user to the front-end.\n\nAt the same time, in the middle and back-end systems, it is far from enough to have simple front-end permission control, and the back-end is also required to perform interface permission control. In particular, some interfaces involving write operations need to strictly control permissions.\n\n## Accomplish\n\n### Routing authority management\n\nPro provides corresponding permission management hooks. The permission requirements of the business can be customized.\n\n```ts\n#src/hooks/permission.ts\n\nimport { RouteLocationNormalized, RouteRecordRaw } from 'vue-router';\nimport { useUserStore } from '@/store';\n\nexport default function usePermission() {\n  const userStore = useUserStore();\n  return {\n    accessRouter(route: RouteLocationNormalized | RouteRecordRaw) { // Determine whether the current user has permission to the route\n      return (\n        !route.meta?.requiresAuth ||\n        !route.meta?.roles ||\n        route.meta?.roles?.includes('*') ||\n        route.meta?.roles?.includes(userStore.role)\n      );\n    },\n    // You can add any rules you want\n  };\n}\n```\n\nSet up a route guard, and manage the user's page entry and exit in the route guard. For example, whether the current user has logged in and whether the current user has page permissions.\n\n``` ts\nrouter.beforeEach(async (to, from, next) => {\n  const userStore = useUserStore();\n  async function crossroads() {\n    const Permission = usePermission();\n    if (Permission.accessRouter(to)) await next();\n    else {\n      const destination = Permission.findFirstPermissionRoute(\n        appRoutes,\n        userStore.role\n      ) || {\n        name: 'notFound',\n      }; // Go to the first authorized page or 404.\n      await next(destination);\n    }\n  }\n  if (isLogin()) { // Check if the user is logged in\n    if (userStore.role) { // If there is role information, it means that the current user has logged in and obtained user information.\n      crossroads();\n    } else {\n      try {\n        await userStore.info(); // Obtain user role information and then perform subsequent jump processing\n        crossroads();\n      } catch (error) {\n        next({\n          name: 'login',\n          query: {\n            redirect: to.name,\n            ...to.query,\n          } as LocationQueryRaw,\n        });\n      }\n    }\n  } else {\n    // Redirect to login page if not logged in\n    if (to.name === 'login') {\n      next();\n      return;\n    }\n    next({\n      name: 'login',\n      query: {\n        redirect: to.name,\n        ...to.query,\n      } as LocationQueryRaw,\n    });\n  }\n});\n```\n\nCustom permission directive\n\n```ts\nimport { DirectiveBinding } from 'vue';\nimport { useUserStore } from '@/store';\n\nfunction checkPermission(el: HTMLElement, binding: DirectiveBinding) {\n  const { value } = binding;\n  const userStore = useUserStore();\n  const { role } = userStore;\n\n  if (Array.isArray(value)) {\n    if (value.length > 0) {\n      const permissionValues = value;\n      // Compare the role permission of the current user with the permission type of the incoming command. If the current user does not have permission, the node deletion operation will be performed.\n      const hasPermission = permissionValues.includes(role);\n      if (!hasPermission && el.parentNode) {\n        el.parentNode.removeChild(el);\n      }\n    }\n  } else {\n    throw new Error(`need roles! Like v-permission=\"['admin','user']\"`);\n  }\n}\n\nexport default {\n  mounted(el: HTMLElement, binding: DirectiveBinding) {\n    checkPermission(el, binding);\n  },\n  updated(el: HTMLElement, binding: DirectiveBinding) {\n    checkPermission(el, binding);\n  },\n};\n```\n"
  },
  {
    "path": "packages/arco-vue-docs/docs/pro/permission.zh-CN.md",
    "content": "```yaml\nmeta:\n  type: Arco Pro 最佳实践\ntitle: 权限控制\ndescription: 权限控制是中后台场景非常常见的基础功能，在 v2.2.0 将权限控制功能集成至 Arco Design Pro\n```\n\n## 适用场景\n\n中后台常见的前端权限控制大概可概括为以下场景：\n\n1. 菜单权限控制，针对**某个菜单/页面**进行权限管理，有则能看到此页面，否则将展示无权限。\n\n[//]: # (![]&#40;http://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/116622141d7b228ad2259c81cd32d095.gif~tplv-uwbnlip3yd-3.awebp&#41;)\n\n2. **针对某页面中的某触发器**进行权限管理，例如对列表页的某一条数据进行删除操作。有权限情况下则展示删除按钮。\n\n[//]: # (![]&#40;http://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/7b410fa5dad6e47665c264fae910c0c8.gif~tplv-uwbnlip3yd-3.awebp&#41;)\n\n\n## 使用\n\n### 菜单权限管理\n\n针对菜单及路由权限控制，可以在 路由配置项 中，对某项增加 `roles` 参数即可。（如果不加，默认为拥有权限）\n\n`roles` 可以根据自己的业务进行定义。\n\n```ts\nexport default {\n  path: 'dashboard',\n  name: 'dashboard',\n  component: () => import('@/views/dashboard/index.vue'),\n  meta: {\n    locale: 'menu.dashboard',\n    requiresAuth: true,\n    icon: 'icon-dashboard',\n  },\n  children: [\n    {\n      path: 'workplace',\n      name: 'workplace',\n      component: () => import('@/views/dashboard/workplace/index.vue'),\n      meta: {\n        locale: 'menu.dashboard.workplace',\n        requiresAuth: true,\n        roles: ['*'], // * 表示通配权限。提示：为了少写点代码，也可以不定义这个字段。\n      },\n    },\n    {\n      path: 'monitor',\n      name: 'monitor',\n      component: () => import('@/views/dashboard/monitor/index.vue'),\n      meta: {\n        locale: 'menu.dashboard.monitor',\n        requiresAuth: true,\n        roles: ['admin'],\n      },\n    },\n  ],\n};\n```\n\n### 某按钮权限管理\n\nArco Design Pro 封装了 `v-permission` 指令。可在组件或者原生元素上使用。\n如下，将有权限的角色类型放置在数组中即可。\n\n```vue\n<button v-permission=\"['admin']\">删除</button>\n\n<a-button v-permission=\"['user']\">删除</a-button>\n```\n\n以上是前端页面进行权限控制的具体使用方法，但是需要结合后端接口将用户所拥有的具体权限返回至前端。\n\n同时，在中后台系统中，仅仅有简单的前端权限控制是远远不够的，还需要后端进行接口权限控制。特别是涉及到写操作的一些接口，需要严格把控权限。\n\n## 实现\n\n### 路由权限管理\n\nPro提供对应的权限管理钩子。可以自定义业务的权限需求。\n\n```ts\n#src/hooks/permission.ts\n\nimport { RouteLocationNormalized, RouteRecordRaw } from 'vue-router';\nimport { useUserStore } from '@/store';\n\nexport default function usePermission() {\n  const userStore = useUserStore();\n  return {\n    accessRouter(route: RouteLocationNormalized | RouteRecordRaw) { // 判断当前用户是否有该路由的权限\n      return (\n        !route.meta?.requiresAuth ||\n        !route.meta?.roles ||\n        route.meta?.roles?.includes('*') ||\n        route.meta?.roles?.includes(userStore.role)\n      );\n    },\n    // You can add any rules you want\n  };\n}\n```\n\n设置路由守卫，在路由守卫中对用户的页面进出进行管理。例如 当前用户是否已经登录、当前用户是否有页面权限。\n\n``` ts\nrouter.beforeEach(async (to, from, next) => {\n  const userStore = useUserStore();\n  async function crossroads() {\n    const Permission = usePermission();\n    if (Permission.accessRouter(to)) await next();\n    else {\n      const destination = Permission.findFirstPermissionRoute(\n        appRoutes,\n        userStore.role\n      ) || {\n        name: 'notFound',\n      }; // 前往首个有权限的页面或者404。\n      await next(destination);\n    }\n  }\n  if (isLogin()) { // 判读用户是否登录\n    if (userStore.role) { // 有角色信息表示当前用户已经登录且获取过用户信息\n      crossroads();\n    } else {\n      try {\n        await userStore.info(); // 获取用户角色信息后再进行后续跳转处理\n        crossroads();\n      } catch (error) {\n        next({\n          name: 'login',\n          query: {\n            redirect: to.name,\n            ...to.query,\n          } as LocationQueryRaw,\n        });\n      }\n    }\n  } else {\n    // 如果未登录则重定向到登录页面\n    if (to.name === 'login') {\n      next();\n      return;\n    }\n    next({\n      name: 'login',\n      query: {\n        redirect: to.name,\n        ...to.query,\n      } as LocationQueryRaw,\n    });\n  }\n});\n```\n\n自定义权限指令\n\n```ts\nimport { DirectiveBinding } from 'vue';\nimport { useUserStore } from '@/store';\n\nfunction checkPermission(el: HTMLElement, binding: DirectiveBinding) {\n  const { value } = binding;\n  const userStore = useUserStore();\n  const { role } = userStore;\n\n  if (Array.isArray(value)) {\n    if (value.length > 0) {\n      const permissionValues = value;\n      // 对当前用户的角色权限和传入指令的权限类型进行比对。如果当前用户无权限则会执行节点删除操作。\n      const hasPermission = permissionValues.includes(role);\n      if (!hasPermission && el.parentNode) {\n        el.parentNode.removeChild(el);\n      }\n    }\n  } else {\n    throw new Error(`need roles! Like v-permission=\"['admin','user']\"`);\n  }\n}\n\nexport default {\n  mounted(el: HTMLElement, binding: DirectiveBinding) {\n    checkPermission(el, binding);\n  },\n  updated(el: HTMLElement, binding: DirectiveBinding) {\n    checkPermission(el, binding);\n  },\n};\n```\n\n\n\n\n"
  },
  {
    "path": "packages/arco-vue-docs/docs/pro/routes-and-menu.en-US.md",
    "content": "```yaml\nmeta:\n  type: Arco Pro\ntitle: Routes and menu\ndescription: Route and menu generation\n```\n\n*Auto translate by google.*\n\nThe routing is usually tied to the menu. In order to reduce the amount of maintenance, we directly generate the menu through the routing table.\n\n## Router\n\nFirst, you need to understand the configuration of the routing table. For basic routing configuration, please refer to the official documentation of [Vue-Router](https://router.vuejs.org/)\n\n ```ts\n// In this example, the final path to the page is /dashboard/workplace\nexport default {\n  path: 'dashboard',\n  name: 'dashboard',\n  component: () => import('@/views/dashboard/index.vue'),\n  meta: {\n    locale: 'menu.dashboard',\n    requiresAuth: true,\n    icon: 'icon-dashboard',\n  },\n  children: [\n    {\n      path: 'workplace',\n      name: 'workplace',\n      component: () => import('@/views/dashboard/workplace/index.vue'),\n      meta: {\n        locale: 'menu.dashboard.workplace',\n        requiresAuth: true,\n        roles: ['admin'],\n        hideInMenu: false,\n      },\n    },\n  ],\n};\n```\n\nRoute `Meta` meta information\n\n| Key\t | Description | Type | default|\n| ------------- | ------------- | -------------- | -------------- |\nroles | Configure the role that can access the page. If it does not match, it will be forbidden to access the routing page\t | string[]| - |\nrequiresAuth | Whether login authentication is required | boolean| false |\nicon | Menu configuration icon | string| - |\nlocale | First-level menu name (language pack key name) | string| - |\nhideInMenu | Whether to hide this item in the left menu | boolean| - |\nhideChildrenInMenu | Force single item to be displayed in left menu | boolean| - |\nactiveMenu | If set name, the menu will be highlighted according to the name you set | string| - |\norder | Sort routing menu items. If this value is set, the higher the value, the higher the front. | number| - |\nnoAffix | If set to true, the tabs will not be added to the tab-bar. | boolean| - |\nignoreCache | If set to true the page will not be cached | boolean| - |\n\n## Menu\n\nFront-end menu generation process:\n\n- Through the computed property of [appRoute](https://github.com/arco-design/arco-design-pro-vue/blob/23a21ceb939e1e2334e8c3b0f1f8a8049503ad9d/arco-design-pro-vite/src/components/menu/useMenuTree.ts#L10), a routing tree with routing information is obtained.\n\n- Use the routing information obtained in the previous step to filter permissions to generate a menu [tree for rendering](https://github.com/arco-design/arco-design-pro-vue/blob/23a21ceb939e1e2334e8c3b0f1f8a8049503ad9d/arco-design-pro-vite/src/components/menu/useMenuTree.ts#L23).\n\n- Recursively generate menus by [rendering]((https://github.com/arco-design/arco-design-pro-vue/blob/23a21ceb939e1e2334e8c3b0f1f8a8049503ad9d/arco-design-pro-vite/src/components/menu/index.vue#L48)) the menu tree.\n\nServer menu generation process:\n\n- Add the [action](https://github.com/arco-design/arco-design-pro-vue/blob/23a21ceb939e1e2334e8c3b0f1f8a8049503ad9d/arco-design-pro-vite/src/store/modules/app/index.ts#L47) of the api request to the Store to obtain the routing configuration of the server.\n  \n- Add the action of the api request to the Store to obtain the routing configuration of the server.\n\n- Through the computed property of [appRoute](https://github.com/arco-design/arco-design-pro-vue/blob/23a21ceb939e1e2334e8c3b0f1f8a8049503ad9d/arco-design-pro-vite/src/components/menu/useMenuTree.ts#L10), a routing tree with routing information is obtained.\n\n- Use the routing information obtained in the previous step to filter permissions to generate a menu [tree for rendering](https://github.com/arco-design/arco-design-pro-vue/blob/23a21ceb939e1e2334e8c3b0f1f8a8049503ad9d/arco-design-pro-vite/src/components/menu/useMenuTree.ts#L23).\n\n- Recursively generate menus by [rendering]((https://github.com/arco-design/arco-design-pro-vue/blob/23a21ceb939e1e2334e8c3b0f1f8a8049503ad9d/arco-design-pro-vite/src/components/menu/index.vue#L48)) the menu tree.\n\n**Note: Compared with the local menu generation process, the server menu only has more interface requests and server routing configuration information storage steps.**\n**Individual companies may have corresponding authority management systems to generate corresponding server-side routing configuration information and store them for front-end interface retrieval. However, the overall situation is similar, as long as the routing configuration information returned by the back-end interface conforms to the above routing configuration specifications and can be correctly parsed by the front-end**\n\n## Steps to add a new menu item\n\nAfter understanding the routing and menu generation, you can configure a new menu item. Take a new monitoring page as an example.\n\n- Add a monitor folder in views/dashboard and add index.vue to it\n\n ```ts\n<script lang=\"ts\" setup><script>\n```\n\n- Add the routing configuration of the monitoring page in the routing table\n\n```diff\nexport default {\n  path:'dashboard',\n  name:'dashboard',\n  component: () => import('@/views/dashboard/index.vue'),\n  meta: {\n    locale:'menu.dashboard',\n    requiresAuth: true,\n    icon:'icon-dashboard',\n  },\n  children: [\n    {\n      path:'workplace',\n      name:'workplace',\n      component: () => import('@/views/dashboard/workplace/index.vue'),\n      meta: {\n        locale:'menu.dashboard.workplace',\n        requiresAuth: true,\n      },\n    },\n+   {\n+     path:'monitor',\n+     name:'monitor',\n+     component: () => import('@/views/dashboard/monitor/index.vue'),\n+     meta: {\n+       locale:'menu.dashboard.monitor',\n+       requiresAuth: true,\n+       roles: ['admin'],\n+     },\n+   },\n  ],\n};\n```\n\n- Added menu name in language pack\n\nThe following is the Chinese language pack, other language packs will not be repeated.\n\n```diff\n// src/locale/zh-CN.ts\nexport default {\n  'menu.dashboard':'Dashboard',\n  'menu.dashboard.workplace':'Workbench',\n+ 'menu.dashboard.monitor':'Real-time monitoring',\n}\n```\n\nAbove, the configuration of a menu item is completed. Now refresh the page to see the new menu item."
  },
  {
    "path": "packages/arco-vue-docs/docs/pro/routes-and-menu.zh-CN.md",
    "content": "```yaml\nmeta:\n  type: Arco Pro 最佳实践\ntitle: 路由与菜单\ndescription: 路由和菜单的生成\n```\n\n路由通常都和菜单绑定在一起，为了减少维护的量，我们直接通过路由表生成了菜单。\n\n## 路由\n\n首先，需要先了解一下路由表的配置。基本的路由配置请参阅 [Vue-Router](https://router.vuejs.org/) 官方文档\n\n ```ts\n// 在本例子中，页面最终路径为 /dashboard/workplace\nexport default {\n  path: 'dashboard',\n  name: 'dashboard', // 路由名称\n  component: () => import('@/views/dashboard/index.vue'),\n  meta: {\n    locale: 'menu.dashboard',\n    requiresAuth: true,\n    icon: 'icon-dashboard',\n  },\n  children: [\n    {\n      path: 'workplace',\n      name: 'workplace',\n      component: () => import('@/views/dashboard/workplace/index.vue'),\n      meta: {\n        locale: 'menu.dashboard.workplace',\n        requiresAuth: true,\n        roles: ['admin'],\n        hideInMenu: false,\n      },\n    },\n  ],\n};\n```\n\n路由 `Meta` 元信息\n\n\n| 参数名\t | 说明 | 类型 | 默认值|\n| ------------- | ------------- | -------------- | -------------- |\nroles | 配置能访问该页面的角色，如果不匹配，则会被禁止访问该路由页面\t | string[]| - |\nrequiresAuth | 是否需要登录鉴权 | boolean| false |\nicon | 菜单配置icon | string| - |\nlocale | 一级菜单名（语言包键名） | string| - |\nhideInMenu | 是否在左侧菜单中隐藏该项 | boolean| - |\nhideChildrenInMenu | 强制在左侧菜单中显示单项 | boolean| - |\nactiveMenu | 高亮设置的菜单项 | string| - |\norder | 排序路由菜单项。如果设置该值，值越高，越靠前 | number| - |\nnoAffix | 如果设置为true，标签将不会添加到tab-bar中 | boolean| - |\nignoreCache | 如果设置为true页面将不会被缓存 | boolean| - |\n\n## 菜单\n\n前端菜单生成过程：\n\n- 通过 [appRoute](https://github.com/arco-design/arco-design-pro-vue/blob/23a21ceb939e1e2334e8c3b0f1f8a8049503ad9d/arco-design-pro-vite/src/components/menu/useMenuTree.ts#L10) 计算属性，得到带有路由信息的路由树。\n\n- 使用上一步获取的路由信息进行权限过滤，生成用于渲染的 [菜单树](https://github.com/arco-design/arco-design-pro-vue/blob/23a21ceb939e1e2334e8c3b0f1f8a8049503ad9d/arco-design-pro-vite/src/components/menu/useMenuTree.ts#L23)。\n\n- 通过 [渲染](https://github.com/arco-design/arco-design-pro-vue/blob/23a21ceb939e1e2334e8c3b0f1f8a8049503ad9d/arco-design-pro-vite/src/components/menu/index.vue#L48) 菜单树，递归生成菜单。\n\n服务端菜单生成过程：\n\n- 在Store中增加api请求的 [action](https://github.com/arco-design/arco-design-pro-vue/blob/23a21ceb939e1e2334e8c3b0f1f8a8049503ad9d/arco-design-pro-vite/src/store/modules/app/index.ts#L47)，用于获取服务端的路由配置。\n\n- 发起请求，将服务端的路由配置结果存储在Store中。\n  \n- 通过 [appRoute](https://github.com/arco-design/arco-design-pro-vue/blob/23a21ceb939e1e2334e8c3b0f1f8a8049503ad9d/arco-design-pro-vite/src/components/menu/useMenuTree.ts#L10) 计算属性，得到带有路由信息的路由树。\n\n- 使用上一步获取的路由信息进行权限过滤，生成用于渲染的 [菜单树](https://github.com/arco-design/arco-design-pro-vue/blob/23a21ceb939e1e2334e8c3b0f1f8a8049503ad9d/arco-design-pro-vite/src/components/menu/useMenuTree.ts#L23)。\n\n- 通过 [渲染](https://github.com/arco-design/arco-design-pro-vue/blob/23a21ceb939e1e2334e8c3b0f1f8a8049503ad9d/arco-design-pro-vite/src/components/menu/index.vue#L48) 菜单树，递归生成菜单。\n\n**说明：服务端菜单相对于本地菜单生成过程，仅仅是多了接口请求以及服务端路由配置信息存储的步骤。**\n**个别公司可能会有相应的权限管理系统，以生成相应的服务端路由配置信息，并进行储存，以供前端进行接口调取。但总体大同小异，只要后端接口返回的路由配置信息，符合上述路由配置规范，并能被前端正确解析即可**\n\n## 新增一个菜单项的步骤\n\n了解完路由和菜单的生成，就可以上手配置一个新的菜单项了，以新增一个监控页面为例。\n\n- 在 views/dashboard 中新增一个 monitor 文件夹，并在其中新增 index.vue\n\n ```ts\n<script lang=\"ts\" setup><script>\n```\n\n- 在路由表中新增监控页的路由配置\n\n```diff\nexport default {\n  path: 'dashboard',\n  name: 'dashboard',\n  component: () => import('@/views/dashboard/index.vue'),\n  meta: {\n    locale: 'menu.dashboard',\n    requiresAuth: true,\n    icon: 'icon-dashboard',\n  },\n  children: [\n    {\n      path: 'workplace',\n      name: 'workplace',\n      component: () => import('@/views/dashboard/workplace/index.vue'),\n      meta: {\n        locale: 'menu.dashboard.workplace',\n        requiresAuth: true,\n      },\n    },\n+   {\n+     path: 'monitor',\n+     name: 'monitor',\n+     component: () => import('@/views/dashboard/monitor/index.vue'),\n+     meta: {\n+       locale: 'menu.dashboard.monitor',\n+       requiresAuth: true,\n+       roles: ['admin'],\n+     },\n+   },\n  ],\n};\n```\n\n- 在语言包中新增菜单名\n\n以下是中文语言包，其他语言包不赘述。\n\n```diff\n// src/locale/zh-CN.ts\nexport default {\n  'menu.dashboard': '仪表盘',\n  'menu.dashboard.workplace': '工作台',\n+ 'menu.dashboard.monitor': '实时监控',\n}\n```\n\n以上，就完成了一个菜单项的配置。现在刷新一下页面，就能看到新的菜单项。\n\n\n\n\n"
  },
  {
    "path": "packages/arco-vue-docs/docs/pro/start.en-US.md",
    "content": "```yaml\nmeta:\n  type: Arco Pro\ntitle: Quick start\ndescription: Please follow the steps below to create Arco Design Pro\n```\n\n*Auto translate by google.*\n\n## Environment\n\nBefore starting development, please make sure that `node`, `git` and `arco cli` are installed in the local environment.\n\nAmong them, `arco cli` is a tool for installing project templates, please run the following command to install:\n\n```bash\nnpm i -g arco-cli\n```\n\n## Technology Stack\n\nThe technology stack of this project is `vue` + `ES2015+` + `TypeScript` + `Arco Design` and `echarts`, etc. Learning and understanding this knowledge in advance will help you get started with our project better .\n\n## Install\n\nThis step uses Arco Design Pro as a template to create a new project, please follow the steps below:\n\n- Go to a folder and create a new project\n\n```bash\ncd someDir\narco init hello-arco-pro\n```\n\n- Choose a technology stack\n\n```bash\n ? Please select the technology stack you wish to use\n   React\n ❯ Vue\n```\n\n- Choose `arco-design-pro` category\n\n```bash\n ? please choose a category\n   Business component\n   Component library\n   Lerna Menorepo project\n ❯ Arco Pro project\n```\n\nWait for the dependencies to be installed. . .\n\nWhen you see the following output, the creation is successful\n\n![](https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/8b78dd4bbdba4bf7939bd0a131357b31~tplv-uwbnlip3yd-image.image)\n\n## Development\n\nEnter the project, run the code\n\n```bash\ncd hello-arco-pro\n\nnpm run dev\n```\n\nOpen [localhost:3000](http://localhost:3000) and you will see the following page\n\n![](https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/1e331a3b8e2446e2be6c78b1c86e5e50~tplv-uwbnlip3yd-image.image)\n"
  },
  {
    "path": "packages/arco-vue-docs/docs/pro/start.zh-CN.md",
    "content": "```yaml\nmeta:\n  type: Arco Pro 最佳实践\ntitle: 快速开始\ndescription: 请跟随以下步骤创建 Arco Design Pro\n```\n\n## 环境\n\n开始开发之前，请确认本地环境中安装好了 `node`， `git` 和 `arco cli`。\n\n其中 `arco cli` 是安装项目模版的工具，请运行以下命令安装：\n\n```bash\nnpm i -g arco-cli\n```\n\n## 技术栈\n\n本项目的技术栈为 `vue` + `ES2015+` + `TypeScript` +  `Arco Design ` 和 `echarts`等，提前学习和了解这些知识将帮助你更好地上手我们的项目。\n\n## 安装\n\n这一步是以 Arco Design Pro 为模版创建一个新的项目，请按照以下步骤进行：\n\n-   进入到一个文件夹，新建项目\n\n```bash\ncd someDir\narco init hello-arco-pro\n```\n\n-   选择 技术栈\n\n```bash\n ? 请选择你希望使用的技术栈\n   React\n ❯ Vue\n```\n\n-   选择 `arco-design-pro` 分类\n\n```bash\n ? 请选择一个分类\n   业务组件\n   组件库\n   Lerna Menorepo 项目\n ❯ Arco Pro 项目\n```\n\n等待安装依赖。。。\n\n看到以下输出就是创建成功了\n\n![](https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/8b78dd4bbdba4bf7939bd0a131357b31~tplv-uwbnlip3yd-image.image)\n\n## 开发\n\n进入到项目中，运行代码\n\n```bash\ncd hello-arco-pro\n\nnpm run dev\n```\n\n打开 [localhost:3000](http://localhost:3000) 就能看到如下页面\n\n![](https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/1e331a3b8e2446e2be6c78b1c86e5e50~tplv-uwbnlip3yd-image.image)\n"
  },
  {
    "path": "packages/arco-vue-docs/docs/pro/state-management-pinia.en-US.md",
    "content": "```yaml\nmeta:\n  type: Arco Pro\ntitle: State management - Pinia\ndescription: Site-wide status management\n```\n*Auto translate by google.*\n## Arco Pro Version\n\nArco Pro >= 2.1.0\n\n**Note**： Arco Pro Version 2.1.0 has replaced the state management library with Pinia.\n\n## Pinia description\n\nReplacing Vuex with Pinia is based on technological forward-looking considerations.\n\nAt the same time, Evan You has announced on Twitter on November 24, 2021 that Pinia has officially become the official state library of vuejs, which means that Pinia is Vuex 5.\n\nRegarding the many new features and usages brought by Pinia, you can learn about them on [Pinia](https://pinia.vuejs.org/)'s official website. This article will not go into too much detail.\n\n## Foreword\n\nGlobal state management is an inevitable existence in a large-scale system, because there are often some information that needs to be shared globally, such as user information, so Pinia is built into PRO for information sharing.\n\nWith Pinia, the table of contents is more concise and clear. At the same time, the support for Typescript is more friendly and has unparalleled advantages.\n\n```\n├── modulers\n│ ├── user (specific module, subject to actual project)\n│ │ └── index.ts (module entry)\n│ │ └── types.ts (store type declaration)\n├── index.ts (export store)\n```\n\n## Add new module\n\n1.  Add state type declaration\n\n```ts\n// store/modulers/user/types.ts\nexport interface UserState {\n  name: string;\n  avatar: string;\n}\n```\n\n2.  Defining a store is as easy as defining a component\n\n```ts\n// store/modulers/user/index.ts\nimport { defineStore } from 'pinia';\nimport {\n  login as userLogin,\n  getUserInfo,\n  LoginData,\n} from '@/api/user';\nimport { setToken } from '@/utils/auth';\nimport { UserState } from './types';\n\nexport const useUserStore = defineStore('user', {\n  state: (): UserState => ({\n    name: '',\n    avatar: '',\n  }),\n\n  getters: {\n    userInfo(state: UserState): UserState {\n      return { ...state };\n    },\n  },\n\n  actions: {\n\n    // Get user's information\n    async info() {\n      const res = await getUserInfo();\n\n      this.setInfo(res.data);\n    },\n\n    // Login\n    async login(loginForm: LoginData) {\n      const res = await userLogin(loginForm);\n      setToken(res.data.token);\n    },\n  },\n});\n\n```\n\n## Specific use\n\n```ts\nimport { defineComponent } from 'vue';\nimport { useUserStore } from '@/store';\n\nexport default defineComponent({\n  setup() {\n    const userStore = useUserStore();\n    const login = () => {\n      const userInfo ={\n        username: 'admin',\n        password: 'admin',\n      };\n      await userStore.login(userInfo);\n    }\n    return {\n      login,\n    }\n  }\n})\n```"
  },
  {
    "path": "packages/arco-vue-docs/docs/pro/state-management-pinia.zh-CN.md",
    "content": "```yaml\nmeta:\n  type: Arco Pro 最佳实践\ntitle: 状态管理 - Pinia\ndescription: 全站状态管理\n```\n\n## Arco Pro Version\n\nArco Pro >= 2.1.0\n\n**注意**： `Arco Pro` 2.1.0 版本已经将状态管理库替换为 `Pinia`。\n\n## Pinia 说明\n\n使用Pinia替换Vuex，有基于技术前瞻性的考虑。\n\n同时 Evan You 已经于 2021年11月24日 在推特宣布 Pinia 正式成为 vuejs 官方的状态库，意味着 Pinia 就是 Vuex 5 。\n\n关于 Pinia 带来的众多新特性及用法，大家可以在 [Pinia](https://pinia.vuejs.org/) 官网进行学习了解。本文不做过多赘述。\n\n\n## 前言\n\n全局状态管理是一个大型系统不可避免的存在，因为经常有一些需要全局共享的信息需要存储，比如用户信息，所以 PRO 中内置了 Pinia 用于信息共享。\n\n使用 Pinia ，目录更加简洁明了。 同时对Typescript的支持更加友好，具有无可比拟的优越性。\n\n```\n├── modulers\n│ ├── user (具体模块，以实际项目为准)\n│ │ └── index.ts (store定义)\n│ │ └── types.ts (store类型)\n├── index.ts （用于导出store）\n```\n\n## 添加新模块\n\n1.  添加 state 类型声明\n\n```ts\n// store/modulers/user/types.ts\nexport interface UserState {\n  name: string;\n  avatar: string;\n}\n```\n\n2.  定义store，就像定义一个组件一样简单\n\n```ts\n// store/modulers/user/index.ts\nimport { defineStore } from 'pinia';\nimport {\n  login as userLogin,\n  getUserInfo,\n  LoginData,\n} from '@/api/user';\nimport { setToken } from '@/utils/auth';\nimport { UserState } from './types';\n\nexport const useUserStore = defineStore('user', {\n  state: (): UserState => ({\n    name: '',\n    avatar: '',\n  }),\n\n  getters: {\n    userInfo(state: UserState): UserState {\n      return { ...state };\n    },\n  },\n\n  actions: {\n\n    // Get user's information\n    async info() {\n      const res = await getUserInfo();\n\n      this.setInfo(res.data);\n    },\n\n    // Login\n    async login(loginForm: LoginData) {\n      const res = await userLogin(loginForm);\n      setToken(res.data.token);\n    },\n  },\n});\n\n```\n\n## 具体使用\n\n```ts\nimport { defineComponent } from 'vue';\nimport { useUserStore } from '@/store';\n\nexport default defineComponent({\n  setup() {\n    const userStore = useUserStore();\n    const login = () => {\n      const userInfo ={\n        username: 'admin',\n        password: 'admin',\n      };\n      await userStore.login(userInfo);\n    }\n    return {\n      login,\n    }\n  }\n})\n```\n"
  },
  {
    "path": "packages/arco-vue-docs/docs/pro/state-management.en-US.md",
    "content": "```yaml\nmeta:\n  type: Arco Pro\ntitle: State management - Vuex\ndescription: Site-wide status management\n```\n\n*Auto translate by google.*\n\n## Arco Pro Version\n\nArco Pro < 2.1.0\n\n**Note**： Arco Pro version 2.1.0 has replaced the state management library with Pinia.\n\n## Foreword\n\nGlobal state management is an inevitable existence of a large system, because there are often some information that needs to be shared globally, such as user information, which needs to be stored, so vuex is built into PRO for information sharing.\n\nRegarding the use of vuex + TS, it is recommended to consult the [official document](https://next.vuex.vuejs.org/guide/typescript-support.html).\n\nThe official example of vuex can meet the most basic needs. But it lacks more detailed code hints and type inference. At the same time, TS type errors are prone to occur during the use of vuex official cases.\n\nThis example is improved on the basis of official documents and uses more complete type annotations and declarations to meet actual application scenarios. The amount of code will increase by an order of magnitude compared to before. This is a little \"side effect\" brought by TS, but the benefits it brings are still considerable, the code will be more rigorous, and problem location and troubleshooting will be more convenient.\n\n```\n├── modulers\n│ ├── user (specific module, subject to actual project)\n│ │ └── action-types.ts (action enumeration type)\n│ │ └── actions.ts (action implementation)\n│ │ └── getters.ts (specific implementation of getter)\n│ │ └── index.ts (module entry)\n│ │ └── mutations-types.ts (mutation enumeration type)\n│ │ └── mutations.ts (specific implementation of mutations)\n│ │ └── state.ts (state definition)\n│ │ └── types.ts (Summary of module types)\n│ ├── interface.ts (Summary of export modules)\n├── index.ts (used to export store)\n├── interface.ts (the definition of root)\n├── vuex.d.ts (Declare Vue's custom type)\n```\n\n## Add new module\n\nPS: There is no obvious root node in Pro, or it is recommended to abandon the root node and take the module as a unit for overall processing. No namespace is used between modules. Therefore, when adding a new module by yourself, you need to isolate the namespace of getter, action, and mutation by yourself. Otherwise it will be overwritten.\n\nIn Pro, for state, getter, action, and mutation, type definitions are performed first, and then declarations and assignments are performed.\n\n1. Add state\n\n ```ts\n// store/modulers/user/state.ts\nexport interface UserStateTypes {\n   name?: string;\n   location?: string;\n}\nexport const state: UserStateTypes = {\n     name:'arco',\n     location:'beijing',\n};\n```\n\n2. Add a getter\n\n ```ts\n// store/modulers/user/getters.ts\nimport {GetterTree} from'vuex';\nimport {UserStateTypes} from'./state';\nimport {RootState} from'@/store/interface';\n\nexport interface UserGettersTypes {\n   userInfo(state: UserStateTypes): UserStateTypes;\n}\n\nexport const getters: GetterTree<UserStateTypes, RootState> & UserGettersTypes =\n   {\n     userInfo: (state: UserStateTypes) => {\n       return {...state };\n     },\n   };\n```\n\n3. Add mutation-types\n\n ```ts\n// store/modulers/user/mutation-types.ts\n// It is recommended to add a namespace to the enumeration value to prevent it from being overwritten.\nexport enum MutationTypes {\n   USER_RESET_INFO ='USER/RESET_INFO',\n}\n```\n\n4. Add mutation\n\n ```ts\n// store/modulers/user/mutations.ts\nimport {MutationTree} from'vuex';\nimport {MutationTypes} from'./mutation-types';\nimport {UserStateTypes} from'./state';\n\nexport type UserMutationsTypes<S = UserStateTypes> = {\n  [MutationTypes.USER_RESET_INFO](state: S): void;\n};\n\nexport const mutations: MutationTree<UserStateTypes> & UserMutationsTypes = {\n  [MutationTypes.USER_RESET_INFO](state: UserStateTypes) {},\n};\n```\n\n5. Add action-types\n\n ```ts\n// store/modulers/user/action-types.ts\n// It is recommended to add a namespace to the enumeration value to prevent it from being overwritten.\nexport enum ActionTypes {\n  USER_LOGIN ='USER/USER_LOGIN',\n}\n```\n\n6. Add action\n\n ```ts\n// store/modulers/user/action.ts\nimport {ActionTree} from'vuex';\nimport {UserStateTypes} from'./state';\nimport {ActionTypes} from'./action-types';\nimport {MutationTypes} from'./mutation-types';\nimport {UserMutationsTypes} from'./mutations';\nimport {RootState} from'@/store/interface';\n\nexport type UserAugmentedActionContext = {\n  commit<K extends keyof UserMutationsTypes>(\n    key: K,\n    payload: Parameters<UserMutationsTypes[K]>[1]\n  ): ReturnType<UserMutationsTypes[K]>;\n} & Omit<ActionContext<UserStateTypes, RootState>,'commit'>;\n\nexport interface UserActionsTypes {\n  [ActionTypes.USER_LOGIN](\n    {commit }: UserAugmentedActionContext,\n    payload: LoginData\n  ): Promise<unknown>;\n}\n\nexport const actions: ActionTree<UserStateTypes, RootState> & UserActionsTypes =\n  {\n    [ActionTypes.USER_LOGIN](ctx) {\n      return new Promise((resolve, reject) => {\n          setTimeout(() => {\n            resolve({});\n          }, 1000)\n      });\n    },\n  };\n```\n\n7. Module declaration\n\n ```ts\n// store/modulers/user/type.ts\nimport {Store as VuexStore, CommitOptions, DispatchOptions} from'vuex';\n\nimport {UserStateTypes} from'./state';\nimport {UserMutationsTypes} from'./mutations';\nimport {UserGettersTypes} from'./getters';\nimport {UserActionsTypes} from'./actions';\n\nexport type UserStoreModuleTypes<S = UserStateTypes> = Omit<\n  VuexStore<S>,\n  'commit' |'getters' |'dispatch'\n> & {\n  commit<\n    K extends keyof UserMutationsTypes,\n    P extends Parameters<UserMutationsTypes[K]>[1]\n  >(\n    key: K,\n    payload?: P,\n    options?: CommitOptions\n  ): ReturnType<UserMutationsTypes[K]>;\n} & {\n  getters: {\n    [K in keyof UserGettersTypes]: ReturnType<UserGettersTypes[K]>;\n  };\n} & {\n  // overwrite state\n  // Note!!! Note!!! Note!!! If you do not merge here, there will be an extra state layer in the actual code prompt.\n  // store.state.user.state.name\n  // In order to have a more complete prompt, put the state here for rewriting.\n  // store.state.user.name (For the specific implementation, there will still be one more state prompt, if the correct use is not guaranteed, it is recommended to use a getter)\n  [K in keyof UserStateTypes]: UserStateTypes[K];\n} & {\n  dispatch<K extends keyof UserActionsTypes>(\n    key: K,\n    payload?: Parameters<UserActionsTypes[K]>[1],\n    options?: DispatchOptions\n  ): ReturnType<UserActionsTypes[K]>;\n};\n```\n\n8. Module assembly\n\n```ts\nimport {Module} from'vuex';\nimport {UserStateTypes, RootState} from'@/store/interface';\nimport {getters} from'./getters';\nimport {actions} from'./actions';\nimport {mutations} from'./mutations';\nimport {state} from'./state';\n\n// Module\nconst user: Module<UserStateTypes, RootState> = {\n  state,\n  getters,\n  mutations,\n  actions,\n};\n\nexport default user;\n```\n\n9. Reference Module\n\n```ts\n// store/modulers/index.ts\nimport {ModuleTree} from'vuex';\nimport {RootState} from'@/store/interface';\n\nimport user from'./user';\n// Modules\nconst modules: ModuleTree<RootState> = {\n  user,\n};\n\nexport default modules;\n```\n\n10. Import modules\n\n```ts\n// store/index.ts\n//In the example here, only key statements are kept. See the pro project for details.\nimport {\n  createStore,\n  useStore as VuexUseStore,\n  Store as VuexStore,\n} from'vuex';\nimport {RootState, UserStateTypes} from'./interface';\nimport {UserStoreModuleTypes} from'./modules/interface';\n\nimport modules from'./modules/index';\n\nexport type StoreModules = {\n  user: UserStoreModuleTypes;\n};\nexport interface StateModuler {\n  user: UserStateTypes;\n}\nexport type Store = UserStoreModuleTypes<Pick<StoreModules,'user'>>\n```\n\nThere will be some undefined attributes or types in the actual operation process, and users can expand on this basis according to their needs and draw inferences about them to meet their own needs.\n\nFor this example, there is still room for improvement and improvement. Feedback and exchanges are welcome.\n\n## Specific use\n\n```ts\nimport {defineComponent} from 'vue';\nimport {useStore} from '@/store';\nimport {MutationTypes} from'@/store/modules/user/mutation-types';\nimport {ActionTypes} from'@/store/modules/user/action-types';\n\nexport default defineComponent({\n  setup() {\n    const store = useStore();\n    const resetUserInfo = () => {\n        store.commit(MutationTypes.USER_RESET_INFO)\n    }\n    const login = () => {\n      const userInfo = {\n        username:'admin',\n        password:'admin',\n      };\n      await store.dispatch(ActionTypes.USER_LOGIN, userInfo);\n    }\n    return {\n      login,\n      resetUserInfo\n    }\n  }\n})\n```\n"
  },
  {
    "path": "packages/arco-vue-docs/docs/pro/state-management.zh-CN.md",
    "content": "```yaml\nmeta:\n  type: Arco Pro 最佳实践\ntitle: 状态管理 - Vuex\ndescription: 全站状态管理\n```\n\n## Arco Pro Version\n\nArco Pro < 2.1.0\n\n**注意**： `Arco Pro` 2.1.0 版本已经将状态管理库替换为 `Pinia`。\n\n\n## 前言\n\n全局状态管理是一个大型系统不可避免的存在，因为经常有一些需要全局共享的信息需要存储，比如用户信息，所以 PRO 中内置了 vuex 用于信息共享。\n\n关于vuex + TS的使用，建议先查阅[官方文档](https://next.vuex.vuejs.org/guide/typescript-support.html)。\n\nvuex官方例子，能够满足最基本的需求。但欠缺了更加详实的代码提示，以及类型推断。同时在vuex官方案例中使用过程中容易出现TS类型报错问题。\n\n本例子在官方文档基础上改进而来，使用更加完善的类型注解和声明，以符合实际应用场景。代码量相对之前会有一个量级的提升，这是TS带来的一点点“副作用”，不过带来的收益还是比较可观的，代码会更加严谨，问题定位和排查也更加便捷。\n\n```\n├── modulers\n│ ├── user (具体模块，以实际项目为准)\n│ │ └── action-types.ts (action枚举类型)\n│ │ └── actions.ts (action具体实现)\n│ │ └── getters.ts (getter具体实现)\n│ │ └── index.ts (模块入口)\n│ │ └── mutations-types.ts (mutation枚举类型)\n│ │ └── mutations.ts (mutation具体实现)\n│ │ └── state.ts (state定义)\n│ │ └── types.ts (模块类型汇总)\n│ ├── interface.ts （导出模块汇总）\n├── index.ts （用于导出store）\n├── interface.ts （root的定义）\n├── vuex.d.ts （声明 Vue 的自定义类型）\n```\n\n## 添加新模块\n\nPS：在Pro中没有明显的根节点，或者建议摒弃根节点，以模块为单位进行统筹处理。模块间 不使用 namespace。所以自行增加新模块时，需要自行对getter、action、mutation进行命名空间隔离。否则会被覆盖。\n\n在Pro中，对于state、getter、action、mutation先进行类型定义，再进行声明赋值。\n\n1.  添加state\n\n```ts\n// store/modulers/user/state.ts\nexport interface UserStateTypes {\n  name?: string;\n  location?: string;\n}\nexport const state: UserStateTypes = {\n    name: 'arco',\n    location:'beijing',\n};\n```\n\n2.  添加getter\n\n```ts\n// store/modulers/user/getters.ts\nimport { GetterTree } from 'vuex';\nimport { UserStateTypes } from './state';\nimport { RootState } from '@/store/interface';\n\nexport interface UserGettersTypes {\n  userInfo(state: UserStateTypes): UserStateTypes;\n}\n\nexport const getters: GetterTree<UserStateTypes, RootState> & UserGettersTypes =\n  {\n    userInfo: (state: UserStateTypes) => {\n      return { ...state };\n    },\n  };\n```\n\n3.  添加mutation-types\n\n```ts\n// store/modulers/user/mutation-types.ts\n// 建议枚举值自行添加命名空间，以防止被覆盖。\nexport enum MutationTypes {\n  USER_RESET_INFO = 'USER/RESET_INFO',\n}\n```\n\n4.  添加mutation\n\n```ts\n// store/modulers/user/mutations.ts\nimport { MutationTree } from 'vuex';\nimport { MutationTypes } from './mutation-types';\nimport { UserStateTypes } from './state';\n\nexport type UserMutationsTypes<S = UserStateTypes> = {\n  [MutationTypes.USER_RESET_INFO](state: S): void;\n};\n\nexport const mutations: MutationTree<UserStateTypes> & UserMutationsTypes = {\n  [MutationTypes.USER_RESET_INFO](state: UserStateTypes) {},\n};\n```\n\n5.  添加action-types\n\n```ts\n// store/modulers/user/action-types.ts\n// 建议枚举值自行添加命名空间，以防止被覆盖。\nexport enum ActionTypes {\n  USER_LOGIN = 'USER/USER_LOGIN',\n}\n```\n\n6.  添加action\n\n```ts\n// store/modulers/user/action.ts\nimport { ActionTree } from 'vuex';\nimport { UserStateTypes } from './state';\nimport { ActionTypes } from './action-types';\nimport { MutationTypes } from './mutation-types';\nimport { UserMutationsTypes } from './mutations';\nimport { RootState } from '@/store/interface';\n\nexport type UserAugmentedActionContext = {\n  commit<K extends keyof UserMutationsTypes>(\n    key: K,\n    payload: Parameters<UserMutationsTypes[K]>[1]\n  ): ReturnType<UserMutationsTypes[K]>;\n} & Omit<ActionContext<UserStateTypes, RootState>, 'commit'>;\n\nexport interface UserActionsTypes {\n  [ActionTypes.USER_LOGIN](\n    { commit }: UserAugmentedActionContext,\n    payload: LoginData\n  ): Promise<unknown>;\n}\n\nexport const actions: ActionTree<UserStateTypes, RootState> & UserActionsTypes =\n  {\n    [ActionTypes.USER_LOGIN](ctx) {\n      return new Promise((resolve, reject) => {\n          setTimeout(() => {\n            resolve({});\n          }, 1000)\n      });\n    },\n  };\n```\n\n7.  模块声明\n\n```ts\n// store/modulers/user/type.ts\nimport { Store as VuexStore, CommitOptions, DispatchOptions } from 'vuex';\n\nimport { UserStateTypes } from './state';\nimport { UserMutationsTypes } from './mutations';\nimport { UserGettersTypes } from './getters';\nimport { UserActionsTypes } from './actions';\n\nexport type UserStoreModuleTypes<S = UserStateTypes> = Omit<\n  VuexStore<S>,\n  'commit' | 'getters' | 'dispatch'\n> & {\n  commit<\n    K extends keyof UserMutationsTypes,\n    P extends Parameters<UserMutationsTypes[K]>[1]\n  >(\n    key: K,\n    payload?: P,\n    options?: CommitOptions\n  ): ReturnType<UserMutationsTypes[K]>;\n} & {\n  getters: {\n    [K in keyof UserGettersTypes]: ReturnType<UserGettersTypes[K]>;\n  };\n} & {\n  // overwrite state\n  // 注意!!! 注意!!! 注意!!! 此处如果不进行合并，在实际代码提示中会多出一个state层。\n  // store.state.user.state.name\n  // 为了能够有更加完善的提示，把state放到此处进行重写。\n  // store.state.user.name (具体实现，依旧会保留有多一个state提示，如果无法保障正确使用，建议使用getter)\n  [K in keyof UserStateTypes]: UserStateTypes[K];\n} & {\n  dispatch<K extends keyof UserActionsTypes>(\n    key: K,\n    payload?: Parameters<UserActionsTypes[K]>[1],\n    options?: DispatchOptions\n  ): ReturnType<UserActionsTypes[K]>;\n};\n```\n\n8.  模块拼装\n\n ```ts\nimport { Module } from 'vuex';\nimport { UserStateTypes, RootState } from '@/store/interface';\nimport { getters } from './getters';\nimport { actions } from './actions';\nimport { mutations } from './mutations';\nimport { state } from './state';\n\n// Module\nconst user: Module<UserStateTypes, RootState> = {\n  state,\n  getters,\n  mutations,\n  actions,\n};\n\nexport default user;\n```\n\n9.  引用模块\n\n ```ts\n// store/modulers/index.ts\nimport { ModuleTree } from 'vuex';\nimport { RootState } from '@/store/interface';\n\nimport user from './user';\n// Modules\nconst modules: ModuleTree<RootState> = {\n  user,\n};\n\nexport default modules;\n```\n\n10. 导入模块\n\n```ts\n// store/index.ts\n//此处示例，只保留关键语句。具体参见pro项目。\nimport {\n  createStore,\n  useStore as VuexUseStore,\n  Store as VuexStore,\n} from 'vuex';\nimport { RootState, UserStateTypes } from './interface';\nimport { UserStoreModuleTypes } from './modules/interface';\n\nimport modules from './modules/index';\n\nexport type StoreModules = {\n  user: UserStoreModuleTypes;\n};\nexport interface StateModuler {\n  user: UserStateTypes;\n}\nexport type Store = UserStoreModuleTypes<Pick<StoreModules, 'user'>>\n```\n\n具体实操过程中会存在一些尚未定义的属性或者类型，用户可以在此基础上，根据需要进行拓展，举一反三以满足自身的需要。\n\n对于本例子而言，依旧存在需要健全以及改进的地方。欢迎反馈交流。\n\n## 具体使用\n\n```ts\nimport { defineComponent } from 'vue';\nimport { useStore } from '@/store';\nimport { MutationTypes } from '@/store/modules/user/mutation-types';\nimport { ActionTypes } from '@/store/modules/user/action-types';\n\nexport default defineComponent({\n  setup() {\n    const store = useStore();\n    const resetUserInfo = () => {\n        store.commit(MutationTypes.USER_RESET_INFO)\n    }\n    const login = () => {\n      const userInfo ={\n        username: 'admin',\n        password: 'admin',\n      };\n      await store.dispatch(ActionTypes.USER_LOGIN, userInfo);\n    }\n    return {\n      login,\n      resetUserInfo\n    }\n  }\n})\n```\n"
  },
  {
    "path": "packages/arco-vue-docs/docs/start.en-US.md",
    "content": "```yaml\nmeta:\n  type: Developer Guide\ntitle: Getting Started\ndescription: Follow the steps below to quickly get started using the component library.\n```\n\n*Auto translate by google.*\n\n## Vue Version\n\nvue >= 3.2.0\n\n**Note**: `Vue3` does not support IE browser environment, so ArcoVue does not support IE browser environment.\n\n## Install\n\n```shell\n# npm\nnpm install --save-dev @arco-design/web-vue\n# yarn\nyarn add --dev @arco-design/web-vue\n```\n\n## Full import\n\n```ts\nimport { createApp } from 'vue'\nimport ArcoVue from '@arco-design/web-vue';\nimport App from './App.vue';\nimport '@arco-design/web-vue/dist/arco.css';\n\nconst app = createApp(App);\napp.use(ArcoVue);\napp.mount('#app');\n```\n\n## On-demand Import (template)\n\nIf you use the template method for development, you can use the [unplugin-vue-components](https://github.com/antfu/unplugin-vue-components) and [unplugin-auto-import](https://github.com/antfu/unplugin-auto-import) plugin to enable on-demand import and automatic import support.\nThe plug-in will automatically parse the components used in the template, and import the components and corresponding style files.\nRequires component library `version >= 2.11.0`.\n\n```ts\nimport { defineConfig } from 'vite'\nimport vue from '@vitejs/plugin-vue'\nimport AutoImport from 'unplugin-auto-import/vite'\nimport Components from 'unplugin-vue-components/vite';\nimport { ArcoResolver } from 'unplugin-vue-components/resolvers';\n\n// https://vitejs.dev/config/\nexport default defineConfig({\n  plugins: [\n    vue(),\n    AutoImport({\n      resolvers: [ArcoResolver()],\n    }),\n    Components({\n      resolvers: [\n        ArcoResolver({\n          sideEffect: true\n        })\n      ]\n    })\n  ]\n});\n```\n\nNote: This method does not process the components manually imported by the user in the script, such as the Message component. The user still needs to manually import the style file corresponding to the component, such as `@arco-design/web-vue/es/message/style/css.js` .\n\n## On-demand loading and component library themes (Arco plugin)\n\nIn addition, you can also use the Vite plugin provided by Arco for on-demand loading and component library style configuration, [@arco-plugins/vite-vue](https://github.com/arco-design/arco-plugins/tree/main/ packages/plugin-vite-vue) plugin will automatically load component styles.\n\n```ts\nimport { defineConfig } from 'vite'\nimport vue from '@vitejs/plugin-vue'\nimport { vitePluginForArco } from '@arco-plugins/vite-vue'\n\nexport default defineConfig({\n  plugins: [\n    vue(),\n    vitePluginForArco({\n      style: 'css'\n    })\n  ]\n})\n```\n\n## Global configuration\nWhen ArcoVue is introduced, a global configuration object can be passed in.\n\n```ts\nimport { createApp } from 'vue'\nimport ArcoVue from '@arco-design/web-vue';\nimport App from './App.vue';\nimport '@arco-design/web-vue/dist/arco.css';\n\nconst app = createApp(App);\napp.use(ArcoVue, {\n  // Used to change the prefix name when using components\n  componentPrefix: 'arco'\n});\napp.mount('#app');\n```\n\n## import component\nIn order to be compatible with the nuxt3 environment in the `2.44.3` version of the component library, the `exports` configuration is added. This configuration will have a certain impact on the import of component libraries. It is recommended to import component libraries and icons from `@arco-design/web-vue` and `@arco-design/web-vue/es/icon`.\n\n\n## Supported platforms\n\n| [<img src=\"https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/08095282566ac4e0fd98f89aed934b65.png~tplv-uwbnlip3yd-png.png\" alt=\"Edge\" width=\"24px\" height=\"24px\" />](http://godban.github.io/browsers-support-badges/)<br/>Edge | [<img src=\"https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/40ad73571879dd8d9fd3fd524e0e45a4.png~tplv-uwbnlip3yd-png.png\" alt=\"Firefox\" width=\"24px\" height=\"24px\" />](http://godban.github.io/browsers-support-badges/)<br/>Firefox | [<img src=\"https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/4f59d35f6d6837b042c8badd95871b1d.png~tplv-uwbnlip3yd-png.png\" alt=\"Chrome\" width=\"24px\" height=\"24px\" />](http://godban.github.io/browsers-support-badges/)<br/>Chrome | [<img src=\"https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/eee2667f837a9c2ed531805850bf43ec.png~tplv-uwbnlip3yd-png.png\" alt=\"Safari\" width=\"24px\" height=\"24px\" />](http://godban.github.io/browsers-support-badges/)<br/>Safari | [<img src=\"https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3240334d3967dd263c8f4cdd2d93c525.png~tplv-uwbnlip3yd-png.png\" alt=\"Opera\" width=\"24px\" height=\"24px\" />](http://godban.github.io/browsers-support-badges/)<br/>Opera |\n|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| ≥ 79                                                                                                                                                                                                                          | ≥ 78                                                                                                                                                                                                                                | ≥ 64                                                                                                                                                                                                                              | ≥ 12                                                                                                                                                                                                                              | ≥ 53                                                                                                                                                                                                                            |\n"
  },
  {
    "path": "packages/arco-vue-docs/docs/start.zh-CN.md",
    "content": "```yaml\nmeta:\n  type: 开发指南\ntitle: 快速上手\ndescription: 跟随以下的步骤，快速上手组件库的使用。\n```\n\n## Vue 版本\n\nvue >= 3.2.0\n\n**注意**：由于 `Vue3` 不再支持 IE 浏览器环境，ArcoVue 也不再支持 IE 浏览器环境。\n\n## 安装\n\n```shell\n# npm\nnpm install --save-dev @arco-design/web-vue\n# yarn\nyarn add --dev @arco-design/web-vue\n```\n\n## 完整引入\n\n```ts\nimport { createApp } from 'vue'\nimport ArcoVue from '@arco-design/web-vue';\nimport App from './App.vue';\nimport '@arco-design/web-vue/dist/arco.css';\n\nconst app = createApp(App);\napp.use(ArcoVue);\napp.mount('#app');\n```\n\n## 按需加载（模板）\n\n如果使用模板方式进行开发，可以使用 [unplugin-vue-components](https://github.com/antfu/unplugin-vue-components) 和 [unplugin-auto-import](https://github.com/antfu/unplugin-auto-import) 这两款插件来开启按需加载及自动导入的支持。\n插件会自动解析模板中的使用到的组件，并导入组件和对应的样式文件。\n需要组件库 `version >= 2.11.0`。\n\n```ts\nimport { defineConfig } from 'vite'\nimport vue from '@vitejs/plugin-vue'\nimport AutoImport from 'unplugin-auto-import/vite'\nimport Components from 'unplugin-vue-components/vite';\nimport { ArcoResolver } from 'unplugin-vue-components/resolvers';\n\n// https://vitejs.dev/config/\nexport default defineConfig({\n  plugins: [\n    vue(),\n    AutoImport({\n      resolvers: [ArcoResolver()],\n    }),\n    Components({\n      resolvers: [\n        ArcoResolver({\n          sideEffect: true\n        })\n      ]\n    })\n  ]\n});\n```\n\n注意：这种方法并不会处理用户在 script 中手动导入的组件，比如 Message 组件，用户仍需要手动导入组件对应的样式文件，例如 `@arco-design/web-vue/es/message/style/css.js`。\n\n## 按需加载与组件库主题（Arco 插件）\n\n另外也可以使用 Arco 提供的 Vite 插件进行按需加载和组件库样式配置，[@arco-plugins/vite-vue](https://github.com/arco-design/arco-plugins/tree/main/packages/plugin-vite-vue) 插件会自动加载组件样式。\n\n```ts\nimport { defineConfig } from 'vite'\nimport vue from '@vitejs/plugin-vue'\nimport { vitePluginForArco } from '@arco-plugins/vite-vue'\n\nexport default defineConfig({\n  plugins: [\n    vue(),\n    vitePluginForArco({\n      style: 'css'\n    })\n  ]\n})\n```\n\n## 全局配置\n在引入 ArcoVue 时，可以传入一个全局配置对象。\n\n```ts\nimport { createApp } from 'vue'\nimport ArcoVue from '@arco-design/web-vue';\nimport App from './App.vue';\nimport '@arco-design/web-vue/dist/arco.css';\n\nconst app = createApp(App);\napp.use(ArcoVue, {\n  // 用于改变使用组件时的前缀名称\n  componentPrefix: 'arco'\n});\napp.mount('#app');\n```\n\n## 导入组件\n组件库在 `2.44.3` 版本为了兼容 nuxt3 环境，增加 `exports` 配置。这个配置会对组件库的导入产生一定影响，使用中建议从 `@arco-design/web-vue` 和 `@arco-design/web-vue/es/icon` 导入组件库和图标。\n\n\n## 浏览器兼容性\n\n| [<img src=\"https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/08095282566ac4e0fd98f89aed934b65.png~tplv-uwbnlip3yd-png.png\" alt=\"Edge\" width=\"24px\" height=\"24px\" />](http://godban.github.io/browsers-support-badges/)<br/>Edge | [<img src=\"https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/40ad73571879dd8d9fd3fd524e0e45a4.png~tplv-uwbnlip3yd-png.png\" alt=\"Firefox\" width=\"24px\" height=\"24px\" />](http://godban.github.io/browsers-support-badges/)<br/>Firefox | [<img src=\"https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/4f59d35f6d6837b042c8badd95871b1d.png~tplv-uwbnlip3yd-png.png\" alt=\"Chrome\" width=\"24px\" height=\"24px\" />](http://godban.github.io/browsers-support-badges/)<br/>Chrome | [<img src=\"https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/eee2667f837a9c2ed531805850bf43ec.png~tplv-uwbnlip3yd-png.png\" alt=\"Safari\" width=\"24px\" height=\"24px\" />](http://godban.github.io/browsers-support-badges/)<br/>Safari | [<img src=\"https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3240334d3967dd263c8f4cdd2d93c525.png~tplv-uwbnlip3yd-png.png\" alt=\"Opera\" width=\"24px\" height=\"24px\" />](http://godban.github.io/browsers-support-badges/)<br/>Opera |\n|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| ≥ 79                                                                                                                                                                                                                          | ≥ 78                                                                                                                                                                                                                                | ≥ 64                                                                                                                                                                                                                              | ≥ 12                                                                                                                                                                                                                              | ≥ 53                                                                                                                                                                                                                            |\n"
  },
  {
    "path": "packages/arco-vue-docs/docs/theme.en-US.md",
    "content": "```yaml\nmeta:\n  type: Developer Guide\ntitle: Custom theme\ndescription: ArcoVue provides a set of blue themes (ArcoBlue), users can customize new themes according to their own needs to meet the diverse needs of business and brand.\n```\n\n*Auto translate by google.*\n\nArcoDesign defines a set of default particle variables, and the theme can be customized by modifying and covering the particle variables.\n\n## Less variable substitution\n\nArcoDesign uses [Less](http://lesscss.org/ \"_blank\") as a pre-compiled language. Through the **modifyVars** function of Less, you can easily customize the style particle variables.\n\nGlobal variables can be found in `global.less (@arco-design/web-vue/es/style/theme/global.less)`.\n\nIn the component library, we have made a very detailed extraction of component style variables, which can meet the fine-grained customization of components. For example, the style variable `token.less (@arco-design/web-vue/es/button/style/token.less)` list corresponding to the `Button` component.\n\n### Import component library style files\n\nIf you want to customize the theme, you need to import less style files. The component library less style files can be found in `@arco-design/web-vue/dist/arco.less` or `@arco-design/web-vue/es/index.less`.\nIf you use the on-demand loading method to import components, make sure to enable the import of less style files in the on-demand loading plugin.\n\n### Vite Configuration\nVite itself supports [Less syntax](https://vitejs.dev/guide/features.html#css-pre-processors \"_blank\"), users only need to pass in the Less configuration in the configuration file:\n\n```diff\n// vite.config.js\nexport default {\n  css: {\n+   preprocessorOptions: {\n+     less: {\n+       modifyVars: {\n+         'arcoblue-6': '#f85959',\n+       },\n+       javascriptEnabled: true,\n+     }\n+   }\n  },\n  ...\n}\n```\n\n### Webpack Configuration\nWhen Webpack is packaged, through modifyVars of [less-loader](https://github.com/webpack-contrib/less-loader), all variables can be replaced:\n\n```diff\n// webpack.config.js\nmodule.exports = {\n  rules: [{\n    test: /\\.less$/,\n    use: [{\n      loader: 'style-loader',\n    }, {\n      loader: 'css-loader',\n    }, {\n      loader: 'less-loader',\n+     options: {\n+       lessOptions: {\n+         modifyVars: {\n+           'arcoblue-6': '#f85959',\n+         },\n+         javascriptEnabled: true,\n+       },\n+     },\n    }],\n    ...\n  }],\n  ...\n}\n```\n\n## Design System Lab theme package usage\n\nThe theme package for the style configuration platform Vue is already available.\n\nFor specific usage, please refer to [Style Configuration Platform Documentation](https://arco.design/docs/designlab/guideline)\n"
  },
  {
    "path": "packages/arco-vue-docs/docs/theme.zh-CN.md",
    "content": "```yaml\nmeta:\n  type: 开发指南\ntitle: 定制主题\ndescription: ArcoVue提供了一套蓝色主题（ArcoBlue），用户可以根据自己的需求定制新主题，以满足业务和品牌上的多样化需求。\n```\n\nArcoDesign定义了一套默认粒子变量，可以通过对粒子变量的修改覆盖来定制主题。\n\n## Less 变量替换\n\nArcoDesign 使用了 [Less](http://lesscss.org/ \"_blank\") 作为预编译语言，通过 Less 的 **modifyVars** 功能，可以很方便的对样式粒子变量进行定制。\n\n全局变量可在 `global.less (@arco-design/web-vue/es/style/theme/global.less)` 中可以找到。\n\n在组件库内部我们对组件样式变量做了非常细致的抽离提取，可以满足对组件细粒度的定制。例如 `Button` 组件对应的样式变量 `token.less (@arco-design/web-vue/es/button/style/token.less)` 列表。\n\n### 引入组件库样式文件\n\n如果想要进行主题定制，需要引入 less 样式文件。组件库 less 样式文件可以在 `@arco-design/web-vue/dist/arco.less` 或者 `@arco-design/web-vue/es/index.less` 中找到。\n如果使用了按需加载的方式引入组件，请确保在按需加载插件中开启了 less 样式文件的导入。\n\n### Vite配置\nVite 本身支持 [Less语法](https://vitejs.dev/guide/features.html#css-pre-processors \"_blank\") ，用户只需在配置文件中传入Less的配置即可：\n\n```diff\n// vite.config.js\nexport default {\n  css: {\n+   preprocessorOptions: {\n+     less: {\n+       modifyVars: {\n+         'arcoblue-6': '#f85959',\n+       },\n+       javascriptEnabled: true,\n+     }\n+   }\n  },\n  ...\n}\n```\n\n### Webpack配置\n在 Webpack 打包的时候，通过 [less-loader](https://github.com/webpack-contrib/less-loader) 的 modifyVars，可以对所有的变量进行替换：\n\n```diff\n// webpack.config.js\nmodule.exports = {\n  rules: [{\n    test: /\\.less$/,\n    use: [{\n      loader: 'style-loader',\n    }, {\n      loader: 'css-loader',\n    }, {\n      loader: 'less-loader',\n+     options: {\n+       lessOptions: {\n+         modifyVars: {\n+           'arcoblue-6': '#f85959',\n+         },\n+         javascriptEnabled: true,\n+       },\n+     },\n    }],\n    ...\n  }],\n  ...\n}\n```\n\n## 风格配置平台主题包使用\n\n风格配置平台 Vue 的主题包已经可以使用。\n\n具体使用方法可以参考[风格配置平台文档](https://arco.design/docs/designlab/guideline)\n"
  },
  {
    "path": "packages/arco-vue-docs/global.d.ts",
    "content": "declare module '*.vue' {\n  import { DefineComponent } from 'vue';\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types\n  const component: DefineComponent<{}, {}, any>;\n  export default component;\n}\n\ndeclare module '*.less';\n\ndeclare module '*.svg';\n\ndeclare module '*.md';\n\ninterface Window {\n  isLogin: boolean;\n  user: any;\n  collectEvent: any;\n}\n"
  },
  {
    "path": "packages/arco-vue-docs/hooks/useLanguage.ts",
    "content": "import { ref } from 'vue';\n// import Locale from '@arco-design/web-vue/es/locale';\nimport { getLocalStorage, setLocalStorage } from '../utils/local-storage';\n\nexport const useLanguage = () => {\n  const localLanguage = getLocalStorage('vue-site::lang');\n  const language = ref(localLanguage ?? 'zh-CN');\n\n  const handleLanguageChange = (_language: string) => {\n    if (\n      ['zh-CN', 'en-US'].includes(_language) &&\n      _language !== language.value\n    ) {\n      language.value = _language;\n      // Locale.use(_language);\n      // if (language === 'zh-CN') {\n      //   router.push(route.path.replace('/en-US', ''));\n      // } else {\n      //   router.push(`/en-US${route.path}`);\n      // }\n\n      setLocalStorage('vue-site::lang', _language);\n    }\n  };\n\n  return {\n    language,\n    handleLanguageChange,\n  };\n};\n"
  },
  {
    "path": "packages/arco-vue-docs/hooks/useTheme.ts",
    "content": "import { ref } from 'vue';\nimport { getLocalStorage, setLocalStorage } from '../utils/local-storage';\n\nexport const useTheme = () => {\n  const localTheme = getLocalStorage('vue-site::theme');\n  const theme = ref(localTheme ?? 'light');\n\n  const handleThemeChange = (_theme: string) => {\n    if (_theme !== theme.value) {\n      theme.value = _theme;\n      if (_theme === 'dark') {\n        document.body.setAttribute('arco-theme', 'dark');\n      } else {\n        document.body.removeAttribute('arco-theme');\n      }\n      setLocalStorage('vue-site::theme', _theme);\n    }\n  };\n\n  return {\n    theme,\n    handleThemeChange,\n  };\n};\n"
  },
  {
    "path": "packages/arco-vue-docs/index.html",
    "content": "<!DOCTYPE html>\n<html lang=\"zh\">\n<head>\n  <meta charset=\"UTF-8\">\n  <title>Arco Design Vue</title>\n  <link\n    rel=\"shortcut icon\"\n    type=\"image/x-icon\"\n    href=\"https://unpkg.byted-static.com/latest/byted/arco-config/assets/favicon.ico\"\n  />\n  <script src=\"https://unpkg.byted-static.com/byted/arco-config/1.0.5/index.js\"></script>\n</head>\n<body>\n<div id=\"root\"></div>\n<div id=\"react-root\"></div>\n<script type=\"module\" src=\"./index.ts\"></script>\n<script>\n  (function(win, export_obj) {\n    win['TeaAnalyticsObject'] = export_obj;\n    if (!win[export_obj]) {\n      function _collect() {\n        _collect.q.push(arguments);\n      }\n      _collect.q = _collect.q || [];\n      win[export_obj] = _collect;\n    }\n    win[export_obj].l = +new Date();\n  })(window, 'collectEvent');\n</script>\n<script async src=\"https://lf3-cdn-tos.bytescm.com/obj/static/log-sdk/collect/collect.js\"></script>\n</body>\n</html>\n"
  },
  {
    "path": "packages/arco-vue-docs/index.ts",
    "content": "import { createApp } from 'vue';\nimport { createI18n } from 'vue-i18n';\nimport ArcoVue, { addI18nMessages, useLocale } from '@web-vue/components/index';\nimport ArcoVueIcon from '@web-vue/components/icon';\nimport enUS from '@web-vue/components/locale/lang/en-us';\nimport renderNavBar from '@arco-design/arco-vue-docs-navbar';\nimport packages from '@web-vue/package.json';\nimport router from './router';\nimport locale from './locale';\nimport App from './app.vue';\nimport ArcoArticle from './components/article/index.vue';\nimport AnchorHead from './components/anchor-head/index.vue';\nimport CodeBlock from './components/code-block/index.vue';\nimport CellDemo from './components/cell-demo/index.vue';\nimport CellCode from './components/cell-code/index.vue';\nimport 'prismjs/themes/prism.css';\nimport 'nprogress/nprogress.css';\nimport '@web-vue/components/index.less';\nimport '@arco-design/arco-vue-docs-navbar/dist/style.css';\nimport { getLocalStorage, setLocalStorage } from './utils/local-storage';\nimport { checkLogin } from './utils/login';\n\nlet theme = getLocalStorage('arco-theme') ?? '';\nif (!theme) {\n  theme = 'light';\n  setLocalStorage('arco-theme', theme);\n}\nconst lang = /en-US/i.test(window.location.href) ? 'en-US' : 'zh-CN';\nsetLocalStorage('arco-lang', lang);\n\nconst handleLanguageChange = (lang: string) => {\n  if (lang === 'zh-CN' && /en-US/i.test(window.location.href)) {\n    setLocalStorage('arco-lang', lang);\n    window.location.href = window.location.href.replace(/en-US\\//i, '');\n  } else if (lang === 'en-US' && !/en-US/i.test(window.location.href)) {\n    setLocalStorage('arco-lang', lang);\n    window.location.href = window.location.href.replace('/vue', '/vue/en-US');\n  }\n};\n\n// Ensure that localStorage and URL are consistent\nhandleLanguageChange(lang);\n\ncheckLogin().then(() => {\n  try {\n    renderNavBar({\n      version: packages.version,\n      lang,\n      handleLanguageChange,\n    });\n  } catch (e) {\n    // eslint-disable-next-line no-console\n    console.error(e);\n  }\n\n  const i18n = createI18n({\n    legacy: false,\n    locale: lang,\n    fallbackLocale: 'zh-CN',\n    messages: locale,\n  });\n\n  addI18nMessages({ 'en-US': enUS });\n\n  if (lang === 'en-US') {\n    useLocale(lang);\n  }\n\n  const app = createApp(App, {\n    theme,\n    language: lang,\n  });\n  app.use(ArcoVue);\n  app.use(ArcoVueIcon);\n  app.use(router);\n  app.use(i18n);\n  app.component(CodeBlock.name, CodeBlock);\n  app.component(CellDemo.name, CellDemo);\n  app.component(CellCode.name, CellCode);\n  app.component(AnchorHead.name, AnchorHead);\n  app.component(ArcoArticle.name, ArcoArticle);\n  app.mount('#root');\n});\n"
  },
  {
    "path": "packages/arco-vue-docs/locale/en-us.js",
    "content": "export default {\n  docs: {\n    name: 'Developer Guide',\n    start: 'Quick Start',\n    dark: 'Dark Mode',\n    theme: 'Custom Theme',\n    token: 'Design Token',\n    i18n: 'Internationalization',\n    faq: 'FAQ',\n    changelog: 'Changelog',\n  },\n  group: {\n    common: 'Common',\n    layout: 'Layout',\n    dataDisplay: 'Data Display',\n    dataEntry: 'Data Entry',\n    feedback: 'Feedback',\n    navigation: 'Navigation',\n    other: 'Other',\n  },\n  component: {\n    name: 'Component',\n    // 组件名称\n    icon: 'Icon',\n    button: 'Button',\n    link: 'Link',\n    typography: 'Typography',\n    radio: 'Radio',\n    checkbox: 'Checkbox',\n    switch: 'Switch',\n    anchor: 'Anchor',\n    empty: 'Empty',\n    badge: 'Badge',\n    table: 'Table',\n    tooltip: 'Tooltip',\n    popover: 'Popover',\n    input: 'Input',\n    calendar: 'Calendar',\n    inputNumber: 'InputNumber',\n    alert: 'Alert',\n    result: 'Result',\n    spin: 'Spin',\n    message: 'Message',\n    notification: 'Notification',\n    popconfirm: 'Popconfirm',\n    modal: 'Modal',\n    dropdown: 'Dropdown',\n    backTop: 'BackTop',\n    trigger: 'Trigger',\n    affix: 'Affix',\n    grid: 'Grid',\n    space: 'Space',\n    divider: 'Divider',\n    drawer: 'Drawer',\n    breadcrumb: 'Breadcrumb',\n    pageHeader: 'PageHeader',\n    progress: 'Progress',\n    steps: 'Steps',\n    skeleton: 'Skeleton',\n    slider: 'Slider',\n    rate: 'Rate',\n    avatar: 'Avatar',\n    card: 'Card',\n    carousel: 'Carousel',\n    timeline: 'Timeline',\n    comment: 'Comment',\n    tag: 'Tag',\n    select: 'Select',\n    inputTag: 'InputTag',\n    autoComplete: 'AutoComplete',\n    layout: ' Layout',\n    menu: 'Menu',\n    resizeBox: 'ResizeBox',\n    split: 'Split',\n    statistic: 'Statistic',\n    form: 'Form',\n    collapse: 'Collapse',\n    descriptions: 'Descriptions',\n    pagination: 'Pagination',\n    datePicker: 'DatePicker',\n    timePicker: 'TimePicker',\n    configProvider: 'ConfigProvider',\n    image: 'Image',\n    upload: 'Upload',\n    mention: 'Mention',\n    textarea: 'Textarea',\n    cascader: 'Cascader',\n    tabs: 'Tabs',\n    list: 'List',\n    transfer: 'Transfer',\n    tree: 'Tree',\n    treeSelect: 'TreeSelect',\n    overflow: 'OverflowList',\n    scrollbar: 'Scrollbar',\n    watermark: 'Watermark',\n    verificationCode: 'VerificationCode',\n    colorPicker: 'ColorPicker',\n  },\n  footer: {\n    design: 'Design',\n    component: 'Component',\n    ecosystem: 'Ecosystem',\n    resource: 'Resource',\n    feedback: 'Feedback',\n    about: 'About Arco',\n    overview: 'Overview',\n    spec: 'Specification',\n    principle: 'Principles',\n    start: 'Quick Start',\n    question: 'Question',\n    changelog: 'Changelog',\n    pro: 'ArcoPro Best Practices',\n    componentFigma: 'Figma Of Component',\n    pluginSparrow: 'Figma Plugin Of Sparrow',\n    iconFigma: 'Figma Of Icon',\n    toolMigrate: 'Code migration',\n    toolArcoCli: 'Arco CLI',\n    toolWebpack: 'Webpack Plugin',\n    designLab: 'DesignLab Design System Lab',\n    material: 'ArcoMaterial Component Market',\n    chartSpace: 'ChartSpace Arco Chart Space',\n    fontMall: 'FontMall FontMall',\n    brand: 'BrandStore BrandStore',\n    mobile: 'ArcoMobile React Mobile',\n    team: 'Arco Team',\n    arcoNews: 'Arco News',\n    cli: 'Arco CLI',\n    dashboard: 'Dashboard',\n  },\n  tooltip: {\n    expand: 'Expand code',\n    collapse: 'Collapse code',\n    copy: 'Copy code',\n    stackblitz: 'Open in Stackblitz',\n    codeSandbox: 'Open in CodeSandbox',\n  },\n  icon: {\n    styleAll: 'All',\n    styleOutline: 'Stroke',\n    styleFill: 'Fill',\n    styleColor: 'Color',\n    searchPlaceholder: 'Search icon, click to copy usage',\n    iconClassifyModalTitle: 'Upload an image to search for icons',\n    showConfig: 'Show Config',\n    configTitle: 'Icon Config',\n    configDesc1: 'Global configuration (add the following class to css):',\n    configDesc2: `For a single component, you can directly write the above style to the <code>style</code>\n    of <code>IconXXX</code>`,\n    strokeWidth: 'Stroke width',\n    fontSize: 'Size',\n    strokeLinejoin: 'Line Join',\n    strokeLinecap: 'Line Cap',\n    direction: 'Direction indicator icon',\n    tips: 'Prompt suggestion icon',\n    interactiveButton: 'Interactive button icon',\n    edit: 'Edit icon',\n    media: 'Multimedia icon',\n    logo: 'Trademark icon',\n    general: 'Universal icon',\n  },\n  proDocs: {\n    name: 'Arco Pro',\n    start: 'Quick start',\n    npmScripts: 'Npm Scripts',\n    directory: 'Directory',\n    layout: 'Layout',\n    routesAndMenu: 'Routes and menu',\n    stateManagement: 'State management - Vuex',\n    stateManagementPinia: 'State management - Pinia',\n    i18n: 'Internationalization',\n    mock: 'Interface and Mock',\n    build: 'Build',\n    permission: 'Permission Control',\n    faq: 'FAQ',\n  },\n  themeBox: {\n    currentTheme: 'Current theme',\n    autoUseTheme: 'Automatically use theme',\n    install: 'Install',\n    installTheme: 'Install theme',\n    search: 'Search',\n    installingTheme: 'Installing theme...',\n    installThemeSuccess: 'Install theme successfully! ',\n    installThemeError: 'Install theme failed, please try again! ',\n    resetTheme: 'Reset theme',\n    resetThemeSuccess: 'Reset theme successfully! ',\n    openInDesignLab: 'Open in the Design Lab',\n    noResult: 'No related themes',\n    createTheme: 'Go to the Design Lab to create',\n  },\n  changelogBox: {\n    changelog: 'Changelog',\n    version: 'By version',\n    date: 'By Date',\n    attention: 'Attention',\n    enhancement: 'Enhancement',\n    feature: 'Feature',\n    bugfix: 'Bugfix',\n    style: 'Style',\n    typescript: 'Typescript',\n    chore: 'Chore',\n    to: 'To',\n    filter: 'Filter',\n  },\n};\n"
  },
  {
    "path": "packages/arco-vue-docs/locale/index.js",
    "content": "import zhCN from './zh-cn';\nimport enUS from './en-us';\n\nexport default {\n  'zh-CN': zhCN,\n  'en-US': enUS,\n};\n"
  },
  {
    "path": "packages/arco-vue-docs/locale/zh-cn.js",
    "content": "export default {\n  docs: {\n    name: '开发指南',\n    start: '快速上手',\n    dark: '暗黑模式',\n    theme: '定制主题',\n    token: '设计变量',\n    i18n: '国际化',\n    faq: '常见问题',\n    changelog: '更新日志',\n  },\n  group: {\n    common: '通用',\n    layout: '布局',\n    dataDisplay: '数据展示',\n    dataEntry: '数据输入',\n    feedback: '反馈',\n    navigation: '导航',\n    other: '其他',\n  },\n  component: {\n    name: '组件',\n    // 组件名称\n    calendar: '日历 Calendar',\n    icon: '图标 Icon',\n    button: '按钮 Button',\n    link: '链接 Link',\n    typography: '排版 Typography',\n    empty: '空状态 Empty',\n    badge: '徽标 Badge',\n    table: '表格 Table',\n    tooltip: '文字气泡 Tooltip',\n    popover: '气泡卡片 Popover',\n    input: '输入框 Input',\n    inputNumber: '数字输入框 InputNumber',\n    radio: '单选框 Radio',\n    checkbox: '复选框 Checkbox',\n    switch: '开关 Switch',\n    alert: '警告提示 Alert',\n    result: '结果页 Result',\n    spin: '加载中 Spin',\n    message: '全局提示 Message',\n    drawer: '抽屉 Drawer',\n    breadcrumb: '面包屑 Breadcrumb',\n    pageHeader: '页头 PageHeader',\n    notification: '通知提醒框 Notification',\n    popconfirm: '气泡确认框 Popconfirm',\n    modal: '对话框 Modal',\n    dropdown: '下拉菜单 Dropdown',\n    backTop: '返回顶部 BackTop',\n    trigger: '触发器 Trigger',\n    anchor: '锚点 Anchor',\n    affix: '固钉 Affix',\n    grid: '栅格 Grid',\n    space: '间距 Space',\n    divider: '分割线 Divider',\n    progress: '进度条 Progress',\n    steps: '步骤条 Steps',\n    skeleton: '骨架屏 Skeleton',\n    slider: '滑动输入条 Slider',\n    rate: '评分 Rate',\n    tag: '标签 Tag',\n    select: '选择器 Select',\n    inputTag: '标签输入框 InputTag',\n    autoComplete: '自动补全 AutoComplete',\n    avatar: '头像 Avatar',\n    card: '卡片 Card',\n    carousel: '图片轮播 Carousel',\n    timeline: '时间轴 Timeline',\n    comment: '评论 Comment',\n    layout: '布局 Layout',\n    menu: '菜单 Menu',\n    resizeBox: '伸缩框 ResizeBox',\n    split: '面板分割 Split',\n    statistic: '数值显示 Statistic',\n    form: '表单 Form',\n    collapse: '折叠面板 Collapse',\n    descriptions: '描述列表 Descriptions',\n    pagination: '分页 Pagination',\n    datePicker: '日期选择器 DatePicker',\n    timePicker: '时间选择器 TimePicker',\n    image: '图片 Image',\n    configProvider: '全局配置 ConfigProvider',\n    upload: '上传 Upload',\n    cascader: '级联选择 Cascader',\n    tabs: '标签页 Tabs',\n    list: '列表 List',\n    mention: '提及 Mention',\n    textarea: '文本域 Textarea',\n    transfer: '数据穿梭框 Transfer',\n    tree: '树 Tree',\n    treeSelect: '树选择 TreeSelect',\n    overflow: '折叠列表 OverflowList',\n    scrollbar: '滚动条 Scrollbar',\n    watermark: '水印 Watermark',\n    verificationCode: '验证码输入框 VerificationCode',\n    colorPicker: '颜色选择器 ColorPicker',\n  },\n  footer: {\n    design: '设计',\n    component: '组件',\n    ecosystem: '生态产品',\n    resource: '资源',\n    feedback: '反馈',\n    about: '关于 Arco',\n    overview: '组件索引',\n    spec: '设计规范',\n    principle: '设计原则',\n    start: '快速开始',\n    question: '常见问题',\n    changelog: '更新日志',\n    pro: 'ArcoPro 中后台最佳实践',\n    componentFigma: '组件库 Figma 资源',\n    pluginSparrow: 'Sparrow Figma 插件',\n    iconFigma: '图标 Figma 资源',\n    toolMigrate: '迁移工具',\n    toolArcoCli: 'Arco CLI',\n    toolWebpack: 'Webpack Plugin',\n    designLab: 'DesignLab 设计系统配置平台',\n    material: 'ArcoMaterial 物料平台',\n    chartSpace: 'ChartSpace 图表库',\n    fontMall: 'FontMall 字体库',\n    brand: 'BrandStore 品牌资源',\n    mobile: 'ArcoMobile 移动端组件库',\n    team: '团队介绍',\n    arcoNews: '双周小黑板',\n    cli: 'Arco CLI',\n    dashboard: 'Dashboard',\n  },\n  tooltip: {\n    expand: '展开代码',\n    collapse: '收起代码',\n    copy: '复制代码',\n    stackblitz: '在 Stackblitz 打开',\n    codeSandbox: '在 CodeSandbox 打开',\n  },\n  icon: {\n    styleAll: '全部',\n    styleOutline: '线性图标',\n    styleFill: '面性图标',\n    styleColor: '多色图标',\n    searchPlaceholder: '搜索图标，点击可复制图标用法',\n    iconClassifyModalTitle: '上传图片搜索图标',\n    showConfig: '显示配置',\n    configTitle: '图标配置',\n    configDesc1: '全局配置（将以下的类添加到 css 中）:',\n    configDesc2: `单个组件的话可以直接将以上样式写到 <code>IconXXX</code> 的 <code>style</code> 中`,\n    strokeWidth: '线宽',\n    fontSize: '图标大小',\n    strokeLinejoin: '拐角',\n    strokeLinecap: '端点',\n    direction: '方向指示类图标',\n    tips: '提示建议类图标',\n    interactiveButton: '交互按钮类图标',\n    edit: '编辑类图标',\n    media: '影音类图标',\n    logo: '商标类图标',\n    general: '通用类图标',\n  },\n  proDocs: {\n    name: 'Arco Pro 最佳实践',\n    start: '快速上手',\n    npmScripts: 'Npm 命令',\n    directory: '目录结构',\n    layout: '布局',\n    routesAndMenu: '路由和菜单',\n    stateManagement: '状态管理-Vuex（已迁移）',\n    stateManagementPinia: '状态管理-Pinia',\n    i18n: '国际化',\n    mock: '接口和数据模拟',\n    build: '打包构建',\n    permission: '权限控制',\n    faq: '常见问题',\n  },\n  themeBox: {\n    currentTheme: '当前主题',\n    autoUseTheme: '自动应用主题',\n    install: '安装',\n    installTheme: '安装主题',\n    search: '搜索',\n    installingTheme: '正在安装主题...',\n    installThemeSuccess: '主题安装成功！',\n    installThemeError: '主题安装失败，请重试！',\n    resetTheme: '重置主题',\n    resetThemeSuccess: '重置主题成功！',\n    openInDesignLab: '在主题商店打开',\n    noResult: '没有相关主题',\n    createTheme: '前往主题商店创建',\n  },\n  changelogBox: {\n    changelog: '更新记录',\n    version: '按版本',\n    date: '按日期',\n    attention: '重点注意',\n    enhancement: '功能优化',\n    feature: '功能升级',\n    bugfix: '问题修复',\n    style: '样式更新',\n    typescript: '类型修正',\n    chore: '架构改动',\n    to: '到',\n    filter: '筛选选项',\n  },\n};\n"
  },
  {
    "path": "packages/arco-vue-docs/package.json",
    "content": "{\n  \"name\": \"@arco-design/arco-vue-docs\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"description\": \"Arco Design Vue 2.0 Docs\",\n  \"author\": \"wangchen <wangchen.flsion@bytedance.com>\",\n  \"homepage\": \"https://arco.design/vue\",\n  \"license\": \"MIT\",\n  \"scripts\": {\n    \"start\": \"arco-vue-scripts dev:site\",\n    \"build\": \"arco-vue-scripts build:site\",\n    \"lint-staged\": \"npx lint-staged\"\n  },\n  \"lint-staged\": {\n    \"*.{js,ts,jsx,tsx,vue}\": [\n      \"eslint --fix\",\n      \"prettier --write\"\n    ],\n    \"*.{less,css}\": [\n      \"stylelint --fix\",\n      \"prettier --write\"\n    ]\n  },\n  \"devDependencies\": {\n    \"@arco-design/arco-vue-docs-navbar\": \"workspace:*\",\n    \"@arco-design/arco-vue-scripts\": \"workspace:*\",\n    \"@arco-design/web-vue\": \"workspace:*\",\n    \"@stackblitz/sdk\": \"^1.11.0\",\n    \"@types/nprogress\": \"^0.2.3\",\n    \"@typescript-eslint/eslint-plugin\": \"^4.33.0\",\n    \"@typescript-eslint/parser\": \"^4.33.0\",\n    \"axios\": \"^0.21.4\",\n    \"clipboard\": \"^2.0.11\",\n    \"codesandbox\": \"^2.2.3\",\n    \"eslint\": \"^7.32.0\",\n    \"eslint-config-airbnb-base\": \"^14.2.1\",\n    \"eslint-config-prettier\": \"^8.10.0\",\n    \"eslint-import-resolver-typescript\": \"^2.7.1\",\n    \"eslint-plugin-import\": \"^2.31.0\",\n    \"eslint-plugin-prettier\": \"^3.4.1\",\n    \"eslint-plugin-vue\": \"^7.20.0\",\n    \"nprogress\": \"^0.2.0\",\n    \"prettier\": \"^2.8.8\",\n    \"stylelint\": \"^13.13.1\",\n    \"stylelint-config-prettier\": \"^8.0.2\",\n    \"stylelint-config-rational-order\": \"^0.1.2\",\n    \"stylelint-config-standard\": \"^20.0.0\",\n    \"stylelint-order\": \"^4.1.0\",\n    \"typescript\": \"^4.9.5\",\n    \"vue\": \"^3.5.13\",\n    \"vue-i18n\": \"^9.14.3\",\n    \"vue-router\": \"^4.5.0\"\n  },\n  \"dependencies\": {\n    \"@arco-materials/site-utils\": \"^1.2.0\"\n  }\n}\n"
  },
  {
    "path": "packages/arco-vue-docs/pages/changelog/changelog.vue",
    "content": "<template>\n  <arco-article v-bind=\"data\">\n    <a-timeline class=\"arco-changelog\">\n      <a-timeline-item v-for=\"item of changelog\" :key=\"item.version\">\n        <div class=\"changelog-item\">\n          <div class=\"changelog-info\">\n            <h2 class=\"changelog-info-version\">{{ item.version }}</h2>\n            <div class=\"changelog-info-date\">{{ item.date }}</div>\n          </div>\n          <div class=\"changelog-content\">\n            <ul v-if=\"item.extra && item.extra.length\">\n              <li\n                v-for=\"(text, index) of item.extra\"\n                :key=\"index\"\n                v-html=\"text\"\n              />\n            </ul>\n            <section v-for=\"content of item.list\" :key=\"content.type\">\n              <h3 class=\"changelog-content-type\">{{ content.typeText }}</h3>\n              <ul class=\"changelog-content-list\">\n                <li\n                  v-for=\"(text, index) of content.list\"\n                  :key=\"index\"\n                  v-html=\"text\"\n                />\n              </ul>\n            </section>\n          </div>\n        </div>\n      </a-timeline-item>\n    </a-timeline>\n  </arco-article>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent } from 'vue';\nimport { useI18n } from 'vue-i18n';\nimport changelogCN from '@web-vue/CHANGELOG.zh-CN.md';\nimport changelogEN from '@web-vue/CHANGELOG.md';\n\nexport default defineComponent({\n  name: 'Changelog',\n  setup() {\n    const { locale } = useI18n();\n\n    const data = computed(() => {\n      if (locale.value === 'zh-CN') {\n        return {\n          title: '更新日志',\n          description: '这里会有详细的发版记录，版本号严格遵循 Semver 规范。',\n          meta: {\n            type: '开发指南',\n          },\n        };\n      }\n      return {\n        title: 'Changelog',\n        description: 'Changelogs',\n        meta: {\n          type: 'Guide',\n        },\n      };\n    });\n\n    const changelog = computed(() =>\n      locale.value === 'zh-CN' ? changelogCN : changelogEN\n    );\n\n    return {\n      data,\n      changelog,\n    };\n  },\n});\n</script>\n\n<style scoped lang=\"less\">\n.arco-changelog {\n  margin-top: 20px;\n}\n\n.changelog {\n  &-item {\n    display: flex;\n    margin-bottom: 40px;\n  }\n\n  &-info {\n    flex-grow: 0;\n    flex-shrink: 0;\n    width: 200px;\n\n    &-version {\n      margin: 0;\n    }\n\n    &-date {\n      font-size: 12px;\n      color: var(--color-text-3);\n    }\n  }\n\n  &-content {\n    &-type {\n      margin: 0 !important;\n    }\n\n    &-list {\n      list-style: circle;\n    }\n  }\n}\n</style>\n"
  },
  {
    "path": "packages/arco-vue-docs/pages/changelog/style/index.less",
    "content": ""
  },
  {
    "path": "packages/arco-vue-docs/pages/icon/__demo__/basic.md",
    "content": "```yaml\ntitle:\n  zh-CN: 基础使用\n  en-US: Basic Usage\n```\n\n## zh-CN\n\nArco图标是一个独立的库，需要额外引入并注册使用。\n\n```ts\nimport { createApp } from 'vue'\nimport ArcoVue from '@arco-design/web-vue';\n// 额外引入图标库\nimport ArcoVueIcon from '@arco-design/web-vue/es/icon';\nimport App from './App.vue';\nimport '@arco-design/web-vue/dist/arco.css';\n\nconst app = createApp(App);\napp.use(ArcoVue);\napp.use(ArcoVueIcon);\napp.mount('#app');\n```\n\n注册后可以通过 `<icon-xx />` 的形式即可使用Icon。\n图标使用 `<svg/>` 方式渲染，可以直接设置 `style`, `class` 以及 `<svg/>` 属性。\n\n### `<icon-xx>` Props\n\n|参数名|描述|类型|默认值|\n|---|---|---|:---:|\n|strokeWidth|线宽|`number`|`4`|\n|strokeLinecap|端点类型|`'butt' \\| 'round' \\| 'square'`|`'butt'`|\n|strokeLinejoin|拐角类型|`'arcs' \\| 'bevel' \\| 'miter' \\| 'miter-clip' \\| 'round'`|`'miter'`|\n|rotate|旋转角度|`number`|`-`|\n|spin|是否旋转|`boolean`|`false`|\n|size|尺寸|`number` \\| `string`|`-`|\n\n---\n\n## en-US\n\nThe Arco icon is an independent library and needs to be introduced and registered for use.\n\n```ts\nimport { createApp } from 'vue'\nimport ArcoVue from '@arco-design/web-vue';\n// import additional icon library\nimport ArcoVueIcon from '@arco-design/web-vue/es/icon';\nimport App from './App.vue';\nimport '@arco-design/web-vue/dist/arco.css';\n\nconst app = createApp(App);\napp.use(ArcoVue);\napp.use(ArcoVueIcon);\napp.mount('#app');\n```\n\nAfter registration, you can use the Icon in the form of `<icon-xx />`.\nIcon use `<svg/>` render，can settings `style`, `class` and `<svg/>` attributes.\n\n|Attribute|Description|Type|Default|\n|---|---|---|:---:|\n|strokeWidth|Stroke width|`number`|`4`|\n|strokeLinecap|Stroke linecap|`'butt' \\| 'round' \\| 'square'`|`'butt'`|\n|strokeLinejoin|Stroke linejoin|`'arcs' \\| 'bevel' \\| 'miter' \\| 'miter-clip' \\| 'round'`|`'miter'`|\n|rotate|Rotate angle|`number`|`-`|\n|spin|Whether to spin|`boolean`|`false`|\n|size|Size|`number` \\| `string`|`-`|\n\n---\n\n```vue\n<template>\n  <a-space size=\"large\">\n    <icon-check-circle :style=\"{fontSize:'32px'}\" />\n    <icon-check-circle :style=\"{fontSize:'32px'}\" :stroke-width=\"2\" />\n    <icon-check-circle :style=\"{fontSize:'32px'}\" stroke-linecap=\"round\" />\n    <icon-check-circle :style=\"{fontSize:'32px'}\" stroke-linejoin=\"arcs\" />\n  </a-space>\n</template>\n```\n"
  },
  {
    "path": "packages/arco-vue-docs/pages/icon/__demo__/icon-font.md",
    "content": "```yaml\ntitle:\n  zh-CN: 使用 iconfont.cn 项目\n  en-US: Using the iconfont.cn project\n```\n\n## zh-CN\n\n可以把 iconfont.cn 中的项目添加到 `Icon` 组件的 `type` 中。\n调用组件库暴露的工具方法 `Icon.addFromIconfontCn`，把 iconfont.cn 中导出 symbol 的代码传入 src 属性中加载项目图标库。\n原理是创建了一个使用 `<use>` 标签来渲染图标的组件。\n**暂不支持按需加载**\n\n``` vue\n<template>\n  <icon-font type=\"icon-person\" :size=\"32\"/>\n</template>\n\n<script>\nimport { Icon } from '@arco-design/web-vue';\n\nconst IconFont = Icon.addFromIconFontCn({ src: 'https://at.alicdn.com/t/font_180975_ue66sq60vyd.js' });\n\nexport default {\n  components:{\n    IconFont\n  }\n}\n</script>\n```\n\n### IconFontOptions\n\n|参数名|描述|类型|默认值|\n|---|---|---|:---:|\n|src|iconfont.cn 项目生成的在线 js 文件地址|`string`|`-`|\n|extraProps|传递给内部 Icon 组件的额外属性|`object`|`-`|\n\n在 `src` 都设置有效的情况下，组件在渲染前会自动引入 [iconfont.cn](http://iconfont.cn/ \"_blank\") 项目中的图标符号集，无需手动引入。\n见 [iconfont.cn](https://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.15&helptype=code \"_blank\") 使用帮助: 查看如何生成 js 地址。\n\n### `<icon>` Props\n\n|Attribute|Description|Type|Default|\n|---|---|---|:---:|\n|type|图标类型|`string`|`-`|\n|size|大小|`number` \\| `string`|`-`|\n|rotate|旋转角度|`number`|`-`|\n|spin|是否旋转|`boolean`|`false`|\n\n---\n\n## en-US\n\nItems from iconfont.cn can be added to the `type` of the `Icon` component.\nCall the tool method `Icon.addFromIconfontCn` exposed by the component library, and pass the code that exports the symbol in [iconfont.cn](http://iconfont.cn/ \"_blank\") into the src attribute to load the project icon library.\nThe idea is to create a component that uses the `<use>` tag to render the icon.\n** Currently does not support on-demand loading **\n\n### IconFontOptions\n\n|Name|Description|Type|Default|\n|---|---|---|:---:|\n|src|The online js file address generated by the iconfont.cn project|`string`|`-`|\n|extraProps|Extra properties passed to the inner Icon component|`object`|`-`|\n\nWhen both `src` settings are valid, the component automatically introduces the icon symbol set in the iconfont.cn project before rendering, eliminating the need for manual introduction.\nSee [iconfont.cn](https://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.15&helptype=code \"_blank\") for help on how to generate js addresses.\n\n### `<icon>` Props\n\n|Attribute|Description|Type|Default|\n|---|---|---|:---:|\n|type|Icon type|`string`|`-`|\n|size|Size|`number` \\| `string`|`-`|\n|rotate|Rotate angle|`number`|`-`|\n|spin|Whether to spin|`boolean`|`false`|\n\n---\n\n```vue\n<template>\n  <a-space size=\"large\">\n    <icon-font type=\"icon-person\" :size=\"32\"/>\n    <icon-font type=\"icon-earth\" :size=\"32\"/>\n    <icon-font type=\"icon-flag\" :size=\"32\"/>\n  </a-space>\n</template>\n\n<script>\nimport { Icon } from '@arco-design/web-vue';\n\nconst IconFont = Icon.addFromIconFontCn({ src: 'https://at.alicdn.com/t/font_180975_ue66sq60vyd.js' });\n\nexport default {\n  components:{\n    IconFont\n  }\n}\n</script>\n```\n"
  },
  {
    "path": "packages/arco-vue-docs/pages/icon/__demo__/spin.md",
    "content": "```yaml\ntitle:\n  zh-CN: 旋转状态\n  en-US: Spin Icon\n```\n\n## zh-CN\n\n通过设置 `spin`，可以将图标设置为旋转状态。也可以使用 `rotate` 自定义旋转角度。\n\n---\n\n## en-US\n\nBy setting `spin`, the icon can be set to a rotating state. You can also use `rotate` to customize the rotation angle.\n\n---\n\n```vue\n<template>\n  <a-space size=\"large\">\n    <icon-refresh :style=\"{fontSize:'32px'}\" spin/>\n    <icon-sync :style=\"{fontSize:'32px'}\" spin/>\n    <icon-face-smile-fill :style=\"{fontSize:'32px'}\" :rotate=\"180\"/>\n  </a-space>\n</template>\n```\n"
  },
  {
    "path": "packages/arco-vue-docs/pages/icon/__demo__/tree-shaking.md",
    "content": "```yaml\ntitle:\n  zh-CN: 按需加载\n  en-US: Tree shaking\n```\n\n## zh-CN\n\n可以通过单独引入图标的方式实现按需加载。\n\n---\n\n## en-US\n\nThe on-demand import can be achieved by separately introducing icons.\n\n---\n\n```vue\n<template>\n  <a-space size=\"large\">\n    <icon-plus :style=\"{fontSize:'32px'}\" />\n    <icon-check-circle :style=\"{fontSize:'32px'}\" />\n  </a-space>\n</template>\n\n<script>\nimport { IconPlus, IconCheckCircle } from '@arco-design/web-vue/es/icon';\n\nexport default {\n  components: { IconPlus, IconCheckCircle }\n}\n</script>\n```\n"
  },
  {
    "path": "packages/arco-vue-docs/pages/icon/icon-demo.vue",
    "content": "<template>\n  <arco-article v-bind=\"data\">\n    <div class=\"arco-vue-icon-header\">\n      <div class=\"icon-list-bar\">\n        <a-radio-group v-model=\"form.style\" type=\"button\" size=\"large\">\n          <a-radio value=\"all\">{{ t('icon.styleAll') }}</a-radio>\n          <a-radio value=\"outline\">{{ t('icon.styleOutline') }}</a-radio>\n          <a-radio value=\"fill\">{{ t('icon.styleFill') }}</a-radio>\n          <a-radio value=\"color\">{{ t('icon.styleColor') }}</a-radio>\n        </a-radio-group>\n        <a-input-search\n          v-model=\"form.filter\"\n          size=\"large\"\n          allow-clear\n          :placeholder=\"t('icon.searchPlaceholder')\"\n        />\n      </div>\n      <a-affix :offset-top=\"60\">\n        <div class=\"icon-list-operations\">\n          <a-form layout=\"inline\" :model=\"form\">\n            <a-form-item\n              field=\"strokeWidth\"\n              :label=\"t('icon.strokeWidth')\"\n              show-colon\n            >\n              <a-slider\n                v-model=\"form.strokeWidth\"\n                show-ticks\n                :min=\"1\"\n                :max=\"5\"\n                :style=\"{ width: '90px' }\"\n              />\n            </a-form-item>\n            <a-form-item field=\"size\" :label=\"t('icon.fontSize')\" show-colon>\n              <a-input-number v-model=\"form.size\" :style=\"{ width: '80px' }\" />\n            </a-form-item>\n            <a-form-item\n              field=\"strokeLinejoin\"\n              :label=\"t('icon.strokeLinejoin')\"\n              show-colon\n            >\n              <a-select\n                v-model=\"form.strokeLinejoin\"\n                :options=\"strokeLinejoin\"\n                :style=\"{ width: '116px' }\"\n              />\n            </a-form-item>\n            <a-form-item\n              field=\"strokeLinecap\"\n              :label=\"t('icon.strokeLinecap')\"\n              show-colon\n            >\n              <a-select\n                v-model=\"form.strokeLinecap\"\n                :options=\"strokeLinecap\"\n                :style=\"{ width: '100px' }\"\n              />\n            </a-form-item>\n          </a-form>\n          <a-button type=\"primary\" @click=\"handleOpenConfig\">\n            {{ t('icon.showConfig') }}\n          </a-button>\n        </div>\n      </a-affix>\n    </div>\n    <section\n      v-for=\"data of filteredData\"\n      :key=\"data.type\"\n      class=\"arco-vue-icon-section\"\n    >\n      <template v-if=\"data.list.length\">\n        <h3 class=\"arco-vue-icon-section-title\">\n          {{ t(`icon.${data.type}`) }}\n        </h3>\n        <ul class=\"icon-list\">\n          <li\n            v-for=\"item in data.list\"\n            :key=\"item.name\"\n            class=\"icon-item\"\n            @click=\"() => handleIconClick(item.name)\"\n          >\n            <div class=\"icon-item-name\">{{ item.name }}</div>\n            <div class=\"icon-item-component\">\n              <component :is=\"item.componentName\" v-bind=\"form\" />\n            </div>\n          </li>\n        </ul>\n      </template>\n    </section>\n    <basic-demo />\n    <tree-shaking-demo />\n    <spin-demo />\n    <icon-font />\n  </arco-article>\n  <a-modal v-model:visible=\"configVisible\" simple hide-cancel>\n    <template #title> {{ t('icon.configTitle') }}</template>\n    <div>\n      <a-typography-paragraph>\n        {{ t('icon.configDesc1') }}\n      </a-typography-paragraph>\n      <a-typography-paragraph code>\n        {{ getConfigCode() }}\n      </a-typography-paragraph>\n      <a-typography-paragraph v-html=\"t('icon.configDesc2')\" />\n    </div>\n  </a-modal>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, computed, reactive, ref } from 'vue';\nimport { useI18n } from 'vue-i18n';\nimport * as components from '@web-vue/components/icon';\nimport { clipboard } from '@web-vue/components/_utils/clipboard';\nimport Message from '@web-vue/components/message';\nimport icons from './icons.json';\nimport { strEndsWith, strIncludes } from '../../utils/strings';\nimport BasicDemo from './__demo__/basic.md';\nimport SpinDemo from './__demo__/spin.md';\nimport IconFont from './__demo__/icon-font.md';\nimport TreeShakingDemo from './__demo__/tree-shaking.md';\n\nexport default defineComponent({\n  name: 'IconMain',\n  components: {\n    ...components,\n    BasicDemo,\n    SpinDemo,\n    IconFont,\n    TreeShakingDemo,\n  },\n  setup() {\n    const { t, locale } = useI18n();\n\n    const form = reactive({\n      style: 'all',\n      filter: '',\n      strokeWidth: 4,\n      size: 32,\n      strokeLinejoin: 'miter',\n      strokeLinecap: 'butt',\n    });\n    const configVisible = ref(false);\n\n    const strokeLinejoin = ['arcs', 'bevel', 'miter', 'miter-clip', 'round'];\n    const strokeLinecap = ['butt', 'round', 'square'];\n\n    const getConfigCode = () => {\n      return `.arco-icon {\n  font-size: ${form.size};\n  ${\n    form.strokeLinecap !== 'butt'\n      ? `stroke-linecap: ${form.strokeLinecap};`\n      : ''\n  }\n  ${\n    form.strokeLinejoin !== 'miter'\n      ? `stroke-linejoin: ${form.strokeLinejoin};`\n      : ''\n  }\n  ${form.strokeWidth !== 4 ? `stroke-width: ${form.strokeWidth};` : ''}\n}`;\n    };\n\n    const iconStyleCheck = (name: string) => {\n      if (form.style === 'all') return true;\n      return form.style === 'outline'\n        ? !strEndsWith(name, 'fill') && !strEndsWith(name, 'color')\n        : strEndsWith(name, form.style);\n    };\n\n    const filteredData = computed(() => {\n      return icons.map((section) => ({\n        ...section,\n        list: section.list.filter((svgData) => {\n          return (\n            iconStyleCheck(svgData.name) &&\n            strIncludes(\n              svgData.componentName.toLowerCase(),\n              form.filter.toLowerCase()\n            )\n          );\n        }),\n      }));\n    });\n\n    const data = computed(() => {\n      if (locale.value === 'zh-CN') {\n        return {\n          title: '图标 Icon',\n          description: '这里有 Arco Design 内置的大量图标。',\n          meta: {\n            type: '组件',\n            category: '通用',\n          },\n        };\n      }\n      return {\n        title: 'Icon',\n        description: 'There are a lot of icons built into Arco Design.',\n        meta: {\n          type: 'Component',\n          category: 'Common',\n        },\n      };\n    });\n\n    const getMessage = (zh: string, en: string) => {\n      return locale.value === 'zh-CN' ? zh : en;\n    };\n\n    const handleOpenConfig = () => {\n      configVisible.value = true;\n    };\n\n    const handleIconClick = (iconName: string) => {\n      const componentName = `<${iconName} />`;\n\n      clipboard(componentName);\n      Message.success(\n        `${\n          locale.value === 'zh-CN' ? '复制成功：' : 'Copy Success: '\n        }${componentName}`\n      );\n    };\n\n    return {\n      t,\n      locale,\n      data,\n      form,\n      filteredData,\n      strokeLinejoin,\n      strokeLinecap,\n      configVisible,\n      handleOpenConfig,\n      getConfigCode,\n      getMessage,\n      handleIconClick,\n    };\n  },\n});\n</script>\n\n<style scoped lang=\"less\" src=\"./style.less\" />\n"
  },
  {
    "path": "packages/arco-vue-docs/pages/icon/icons.json",
    "content": "[\n  {\n    \"title\": \"方向指示类图标\",\n    \"type\": \"direction\",\n    \"list\": [\n      {\n        \"name\": \"icon-arrow-down\",\n        \"componentName\": \"IconArrowDown\"\n      },\n      {\n        \"name\": \"icon-arrow-fall\",\n        \"componentName\": \"IconArrowFall\"\n      },\n      {\n        \"name\": \"icon-arrow-left\",\n        \"componentName\": \"IconArrowLeft\"\n      },\n      {\n        \"name\": \"icon-arrow-right\",\n        \"componentName\": \"IconArrowRight\"\n      },\n      {\n        \"name\": \"icon-arrow-rise\",\n        \"componentName\": \"IconArrowRise\"\n      },\n      {\n        \"name\": \"icon-arrow-up\",\n        \"componentName\": \"IconArrowUp\"\n      },\n      {\n        \"name\": \"icon-caret-down\",\n        \"componentName\": \"IconCaretDown\"\n      },\n      {\n        \"name\": \"icon-caret-left\",\n        \"componentName\": \"IconCaretLeft\"\n      },\n      {\n        \"name\": \"icon-caret-right\",\n        \"componentName\": \"IconCaretRight\"\n      },\n      {\n        \"name\": \"icon-caret-up\",\n        \"componentName\": \"IconCaretUp\"\n      },\n      {\n        \"name\": \"icon-double-down\",\n        \"componentName\": \"IconDoubleDown\"\n      },\n      {\n        \"name\": \"icon-double-left\",\n        \"componentName\": \"IconDoubleLeft\"\n      },\n      {\n        \"name\": \"icon-double-right\",\n        \"componentName\": \"IconDoubleRight\"\n      },\n      {\n        \"name\": \"icon-double-up\",\n        \"componentName\": \"IconDoubleUp\"\n      },\n      {\n        \"name\": \"icon-down-circle\",\n        \"componentName\": \"IconDownCircle\"\n      },\n      {\n        \"name\": \"icon-down\",\n        \"componentName\": \"IconDown\"\n      },\n      {\n        \"name\": \"icon-drag-arrow\",\n        \"componentName\": \"IconDragArrow\"\n      },\n      {\n        \"name\": \"icon-expand\",\n        \"componentName\": \"IconExpand\"\n      },\n      {\n        \"name\": \"icon-left-circle\",\n        \"componentName\": \"IconLeftCircle\"\n      },\n      {\n        \"name\": \"icon-left\",\n        \"componentName\": \"IconLeft\"\n      },\n      {\n        \"name\": \"icon-menu-fold\",\n        \"componentName\": \"IconMenuFold\"\n      },\n      {\n        \"name\": \"icon-menu-unfold\",\n        \"componentName\": \"IconMenuUnfold\"\n      },\n      {\n        \"name\": \"icon-right-circle\",\n        \"componentName\": \"IconRightCircle\"\n      },\n      {\n        \"name\": \"icon-right\",\n        \"componentName\": \"IconRight\"\n      },\n      {\n        \"name\": \"icon-rotate-left\",\n        \"componentName\": \"IconRotateLeft\"\n      },\n      {\n        \"name\": \"icon-rotate-right\",\n        \"componentName\": \"IconRotateRight\"\n      },\n      {\n        \"name\": \"icon-shrink\",\n        \"componentName\": \"IconShrink\"\n      },\n      {\n        \"name\": \"icon-swap\",\n        \"componentName\": \"IconSwap\"\n      },\n      {\n        \"name\": \"icon-to-bottom\",\n        \"componentName\": \"IconToBottom\"\n      },\n      {\n        \"name\": \"icon-to-left\",\n        \"componentName\": \"IconToLeft\"\n      },\n      {\n        \"name\": \"icon-to-right\",\n        \"componentName\": \"IconToRight\"\n      },\n      {\n        \"name\": \"icon-to-top\",\n        \"componentName\": \"IconToTop\"\n      },\n      {\n        \"name\": \"icon-up-circle\",\n        \"componentName\": \"IconUpCircle\"\n      },\n      {\n        \"name\": \"icon-up\",\n        \"componentName\": \"IconUp\"\n      }\n    ]\n  },\n  {\n    \"title\": \"提示建议类图标\",\n    \"type\": \"tips\",\n    \"list\": [\n      {\n        \"name\": \"icon-check-circle-fill\",\n        \"componentName\": \"IconCheckCircleFill\"\n      },\n      {\n        \"name\": \"icon-close-circle-fill\",\n        \"componentName\": \"IconCloseCircleFill\"\n      },\n      {\n        \"name\": \"icon-exclamation-circle-fill\",\n        \"componentName\": \"IconExclamationCircleFill\"\n      },\n      {\n        \"name\": \"icon-exclamation-polygon-fill\",\n        \"componentName\": \"IconExclamationPolygonFill\"\n      },\n      {\n        \"name\": \"icon-info-circle-fill\",\n        \"componentName\": \"IconInfoCircleFill\"\n      },\n      {\n        \"name\": \"icon-minus-circle-fill\",\n        \"componentName\": \"IconMinusCircleFill\"\n      },\n      {\n        \"name\": \"icon-plus-circle-fill\",\n        \"componentName\": \"IconPlusCircleFill\"\n      },\n      {\n        \"name\": \"icon-question-circle-fill\",\n        \"componentName\": \"IconQuestionCircleFill\"\n      },\n      {\n        \"name\": \"icon-check-circle\",\n        \"componentName\": \"IconCheckCircle\"\n      },\n      {\n        \"name\": \"icon-check-square\",\n        \"componentName\": \"IconCheckSquare\"\n      },\n      {\n        \"name\": \"icon-check\",\n        \"componentName\": \"IconCheck\"\n      },\n      {\n        \"name\": \"icon-clock-circle\",\n        \"componentName\": \"IconClockCircle\"\n      },\n      {\n        \"name\": \"icon-close-circle\",\n        \"componentName\": \"IconCloseCircle\"\n      },\n      {\n        \"name\": \"icon-close\",\n        \"componentName\": \"IconClose\"\n      },\n      {\n        \"name\": \"icon-exclamation-circle\",\n        \"componentName\": \"IconExclamationCircle\"\n      },\n      {\n        \"name\": \"icon-exclamation\",\n        \"componentName\": \"IconExclamation\"\n      },\n      {\n        \"name\": \"icon-info-circle\",\n        \"componentName\": \"IconInfoCircle\"\n      },\n      {\n        \"name\": \"icon-info\",\n        \"componentName\": \"IconInfo\"\n      },\n      {\n        \"name\": \"icon-minus-circle\",\n        \"componentName\": \"IconMinusCircle\"\n      },\n      {\n        \"name\": \"icon-minus\",\n        \"componentName\": \"IconMinus\"\n      },\n      {\n        \"name\": \"icon-plus-circle\",\n        \"componentName\": \"IconPlusCircle\"\n      },\n      {\n        \"name\": \"icon-plus\",\n        \"componentName\": \"IconPlus\"\n      },\n      {\n        \"name\": \"icon-question-circle\",\n        \"componentName\": \"IconQuestionCircle\"\n      },\n      {\n        \"name\": \"icon-question\",\n        \"componentName\": \"IconQuestion\"\n      },\n      {\n        \"name\": \"icon-stop\",\n        \"componentName\": \"IconStop\"\n      }\n    ]\n  },\n  {\n    \"title\": \"交互按钮类图标\",\n    \"type\": \"interactiveButton\",\n    \"list\": [\n      {\n        \"name\": \"icon-heart-fill\",\n        \"componentName\": \"IconHeartFill\"\n      },\n      {\n        \"name\": \"icon-star-fill\",\n        \"componentName\": \"IconStarFill\"\n      },\n      {\n        \"name\": \"icon-thumb-down-fill\",\n        \"componentName\": \"IconThumbDownFill\"\n      },\n      {\n        \"name\": \"icon-thumb-up-fill\",\n        \"componentName\": \"IconThumbUpFill\"\n      },\n      {\n        \"name\": \"icon-at\",\n        \"componentName\": \"IconAt\"\n      },\n      {\n        \"name\": \"icon-cloud-download\",\n        \"componentName\": \"IconCloudDownload\"\n      },\n      {\n        \"name\": \"icon-code-block\",\n        \"componentName\": \"IconCodeBlock\"\n      },\n      {\n        \"name\": \"icon-code-square\",\n        \"componentName\": \"IconCodeSquare\"\n      },\n      {\n        \"name\": \"icon-code\",\n        \"componentName\": \"IconCode\"\n      },\n      {\n        \"name\": \"icon-customer-service\",\n        \"componentName\": \"IconCustomerService\"\n      },\n      {\n        \"name\": \"icon-download\",\n        \"componentName\": \"IconDownload\"\n      },\n      {\n        \"name\": \"icon-export\",\n        \"componentName\": \"IconExport\"\n      },\n      {\n        \"name\": \"icon-eye-invisible\",\n        \"componentName\": \"IconEyeInvisible\"\n      },\n      {\n        \"name\": \"icon-eye\",\n        \"componentName\": \"IconEye\"\n      },\n      {\n        \"name\": \"icon-heart\",\n        \"componentName\": \"IconHeart\"\n      },\n      {\n        \"name\": \"icon-history\",\n        \"componentName\": \"IconHistory\"\n      },\n      {\n        \"name\": \"icon-home\",\n        \"componentName\": \"IconHome\"\n      },\n      {\n        \"name\": \"icon-import\",\n        \"componentName\": \"IconImport\"\n      },\n      {\n        \"name\": \"icon-launch\",\n        \"componentName\": \"IconLaunch\"\n      },\n      {\n        \"name\": \"icon-list\",\n        \"componentName\": \"IconList\"\n      },\n      {\n        \"name\": \"icon-message-banned\",\n        \"componentName\": \"IconMessageBanned\"\n      },\n      {\n        \"name\": \"icon-message\",\n        \"componentName\": \"IconMessage\"\n      },\n      {\n        \"name\": \"icon-more-vertical\",\n        \"componentName\": \"IconMoreVertical\"\n      },\n      {\n        \"name\": \"icon-more\",\n        \"componentName\": \"IconMore\"\n      },\n      {\n        \"name\": \"icon-poweroff\",\n        \"componentName\": \"IconPoweroff\"\n      },\n      {\n        \"name\": \"icon-refresh\",\n        \"componentName\": \"IconRefresh\"\n      },\n      {\n        \"name\": \"icon-reply\",\n        \"componentName\": \"IconReply\"\n      },\n      {\n        \"name\": \"icon-save\",\n        \"componentName\": \"IconSave\"\n      },\n      {\n        \"name\": \"icon-scan\",\n        \"componentName\": \"IconScan\"\n      },\n      {\n        \"name\": \"icon-search\",\n        \"componentName\": \"IconSearch\"\n      },\n      {\n        \"name\": \"icon-select-all\",\n        \"componentName\": \"IconSelectAll\"\n      },\n      {\n        \"name\": \"icon-send\",\n        \"componentName\": \"IconSend\"\n      },\n      {\n        \"name\": \"icon-settings\",\n        \"componentName\": \"IconSettings\"\n      },\n      {\n        \"name\": \"icon-share-alt\",\n        \"componentName\": \"IconShareAlt\"\n      },\n      {\n        \"name\": \"icon-share-external\",\n        \"componentName\": \"IconShareExternal\"\n      },\n      {\n        \"name\": \"icon-share-internal\",\n        \"componentName\": \"IconShareInternal\"\n      },\n      {\n        \"name\": \"icon-star\",\n        \"componentName\": \"IconStar\"\n      },\n      {\n        \"name\": \"icon-sync\",\n        \"componentName\": \"IconSync\"\n      },\n      {\n        \"name\": \"icon-thumb-down\",\n        \"componentName\": \"IconThumbDown\"\n      },\n      {\n        \"name\": \"icon-thumb-up\",\n        \"componentName\": \"IconThumbUp\"\n      },\n      {\n        \"name\": \"icon-translate\",\n        \"componentName\": \"IconTranslate\"\n      },\n      {\n        \"name\": \"icon-upload\",\n        \"componentName\": \"IconUpload\"\n      },\n      {\n        \"name\": \"icon-voice\",\n        \"componentName\": \"IconVoice\"\n      }\n    ]\n  },\n  {\n    \"title\": \"编辑类图标\",\n    \"type\": \"edit\",\n    \"list\": [\n      {\n        \"name\": \"icon-align-center\",\n        \"componentName\": \"IconAlignCenter\"\n      },\n      {\n        \"name\": \"icon-align-left\",\n        \"componentName\": \"IconAlignLeft\"\n      },\n      {\n        \"name\": \"icon-align-right\",\n        \"componentName\": \"IconAlignRight\"\n      },\n      {\n        \"name\": \"icon-attachment\",\n        \"componentName\": \"IconAttachment\"\n      },\n      {\n        \"name\": \"icon-bg-colors\",\n        \"componentName\": \"IconBgColors\"\n      },\n      {\n        \"name\": \"icon-bold\",\n        \"componentName\": \"IconBold\"\n      },\n      {\n        \"name\": \"icon-brush\",\n        \"componentName\": \"IconBrush\"\n      },\n      {\n        \"name\": \"icon-copy\",\n        \"componentName\": \"IconCopy\"\n      },\n      {\n        \"name\": \"icon-delete\",\n        \"componentName\": \"IconDelete\"\n      },\n      {\n        \"name\": \"icon-edit\",\n        \"componentName\": \"IconEdit\"\n      },\n      {\n        \"name\": \"icon-eraser\",\n        \"componentName\": \"IconEraser\"\n      },\n      {\n        \"name\": \"icon-filter\",\n        \"componentName\": \"IconFilter\"\n      },\n      {\n        \"name\": \"icon-find-replace\",\n        \"componentName\": \"IconFindReplace\"\n      },\n      {\n        \"name\": \"icon-font-colors\",\n        \"componentName\": \"IconFontColors\"\n      },\n      {\n        \"name\": \"icon-formula\",\n        \"componentName\": \"IconFormula\"\n      },\n      {\n        \"name\": \"icon-h1\",\n        \"componentName\": \"IconH1\"\n      },\n      {\n        \"name\": \"icon-h2\",\n        \"componentName\": \"IconH2\"\n      },\n      {\n        \"name\": \"icon-h3\",\n        \"componentName\": \"IconH3\"\n      },\n      {\n        \"name\": \"icon-h4\",\n        \"componentName\": \"IconH4\"\n      },\n      {\n        \"name\": \"icon-h5\",\n        \"componentName\": \"IconH5\"\n      },\n      {\n        \"name\": \"icon-h6\",\n        \"componentName\": \"IconH6\"\n      },\n      {\n        \"name\": \"icon-h7\",\n        \"componentName\": \"IconH7\"\n      },\n      {\n        \"name\": \"icon-highlight\",\n        \"componentName\": \"IconHighlight\"\n      },\n      {\n        \"name\": \"icon-italic\",\n        \"componentName\": \"IconItalic\"\n      },\n      {\n        \"name\": \"icon-line-height\",\n        \"componentName\": \"IconLineHeight\"\n      },\n      {\n        \"name\": \"icon-link\",\n        \"componentName\": \"IconLink\"\n      },\n      {\n        \"name\": \"icon-oblique-line\",\n        \"componentName\": \"IconObliqueLine\"\n      },\n      {\n        \"name\": \"icon-ordered-list\",\n        \"componentName\": \"IconOrderedList\"\n      },\n      {\n        \"name\": \"icon-original-size\",\n        \"componentName\": \"IconOriginalSize\"\n      },\n      {\n        \"name\": \"icon-paste\",\n        \"componentName\": \"IconPaste\"\n      },\n      {\n        \"name\": \"icon-quote\",\n        \"componentName\": \"IconQuote\"\n      },\n      {\n        \"name\": \"icon-redo\",\n        \"componentName\": \"IconRedo\"\n      },\n      {\n        \"name\": \"icon-scissor\",\n        \"componentName\": \"IconScissor\"\n      },\n      {\n        \"name\": \"icon-sort-ascending\",\n        \"componentName\": \"IconSortAscending\"\n      },\n      {\n        \"name\": \"icon-sort-descending\",\n        \"componentName\": \"IconSortDescending\"\n      },\n      {\n        \"name\": \"icon-sort\",\n        \"componentName\": \"IconSort\"\n      },\n      {\n        \"name\": \"icon-strikethrough\",\n        \"componentName\": \"IconStrikethrough\"\n      },\n      {\n        \"name\": \"icon-underline\",\n        \"componentName\": \"IconUnderline\"\n      },\n      {\n        \"name\": \"icon-undo\",\n        \"componentName\": \"IconUndo\"\n      },\n      {\n        \"name\": \"icon-unordered-list\",\n        \"componentName\": \"IconUnorderedList\"\n      },\n      {\n        \"name\": \"icon-zoom-in\",\n        \"componentName\": \"IconZoomIn\"\n      },\n      {\n        \"name\": \"icon-zoom-out\",\n        \"componentName\": \"IconZoomOut\"\n      }\n    ]\n  },\n  {\n    \"title\": \"影音类图标\",\n    \"type\": \"media\",\n    \"list\": [\n      {\n        \"name\": \"icon-mute-fill\",\n        \"componentName\": \"IconMuteFill\"\n      },\n      {\n        \"name\": \"icon-pause-circle-fill\",\n        \"componentName\": \"IconPauseCircleFill\"\n      },\n      {\n        \"name\": \"icon-play-arrow-fill\",\n        \"componentName\": \"IconPlayArrowFill\"\n      },\n      {\n        \"name\": \"icon-play-circle-fill\",\n        \"componentName\": \"IconPlayCircleFill\"\n      },\n      {\n        \"name\": \"icon-skip-next-fill\",\n        \"componentName\": \"IconSkipNextFill\"\n      },\n      {\n        \"name\": \"icon-skip-previous-fill\",\n        \"componentName\": \"IconSkipPreviousFill\"\n      },\n      {\n        \"name\": \"icon-sound-fill\",\n        \"componentName\": \"IconSoundFill\"\n      },\n      {\n        \"name\": \"icon-backward\",\n        \"componentName\": \"IconBackward\"\n      },\n      {\n        \"name\": \"icon-forward\",\n        \"componentName\": \"IconForward\"\n      },\n      {\n        \"name\": \"icon-fullscreen-exit\",\n        \"componentName\": \"IconFullscreenExit\"\n      },\n      {\n        \"name\": \"icon-fullscreen\",\n        \"componentName\": \"IconFullscreen\"\n      },\n      {\n        \"name\": \"icon-live-broadcast\",\n        \"componentName\": \"IconLiveBroadcast\"\n      },\n      {\n        \"name\": \"icon-music\",\n        \"componentName\": \"IconMusic\"\n      },\n      {\n        \"name\": \"icon-mute\",\n        \"componentName\": \"IconMute\"\n      },\n      {\n        \"name\": \"icon-pause-circle\",\n        \"componentName\": \"IconPauseCircle\"\n      },\n      {\n        \"name\": \"icon-pause\",\n        \"componentName\": \"IconPause\"\n      },\n      {\n        \"name\": \"icon-play-arrow\",\n        \"componentName\": \"IconPlayArrow\"\n      },\n      {\n        \"name\": \"icon-play-circle\",\n        \"componentName\": \"IconPlayCircle\"\n      },\n      {\n        \"name\": \"icon-record-stop\",\n        \"componentName\": \"IconRecordStop\"\n      },\n      {\n        \"name\": \"icon-record\",\n        \"componentName\": \"IconRecord\"\n      },\n      {\n        \"name\": \"icon-skip-next\",\n        \"componentName\": \"IconSkipNext\"\n      },\n      {\n        \"name\": \"icon-skip-previous\",\n        \"componentName\": \"IconSkipPrevious\"\n      },\n      {\n        \"name\": \"icon-sound\",\n        \"componentName\": \"IconSound\"\n      }\n    ]\n  },\n  {\n    \"title\": \"商标类图标\",\n    \"type\": \"logo\",\n    \"list\": [\n      {\n        \"name\": \"icon-bytedance-color\",\n        \"componentName\": \"IconBytedanceColor\"\n      },\n      {\n        \"name\": \"icon-lark-color\",\n        \"componentName\": \"IconLarkColor\"\n      },\n      {\n        \"name\": \"icon-tiktok-color\",\n        \"componentName\": \"IconTiktokColor\"\n      },\n      {\n        \"name\": \"icon-xigua-color\",\n        \"componentName\": \"IconXiguaColor\"\n      },\n      {\n        \"name\": \"icon-faceBook-circle-fill\",\n        \"componentName\": \"IconFaceBookCircleFill\"\n      },\n      {\n        \"name\": \"icon-facebook-square-fill\",\n        \"componentName\": \"IconFacebookSquareFill\"\n      },\n      {\n        \"name\": \"icon-google-circle-fill\",\n        \"componentName\": \"IconGoogleCircleFill\"\n      },\n      {\n        \"name\": \"icon-qq-circle-fill\",\n        \"componentName\": \"IconQqCircleFill\"\n      },\n      {\n        \"name\": \"icon-twitter-circle-fill\",\n        \"componentName\": \"IconTwitterCircleFill\"\n      },\n      {\n        \"name\": \"icon-weibo-circle-fill\",\n        \"componentName\": \"IconWeiboCircleFill\"\n      },\n      {\n        \"name\": \"icon-alipay-circle\",\n        \"componentName\": \"IconAlipayCircle\"\n      },\n      {\n        \"name\": \"icon-code-sandbox\",\n        \"componentName\": \"IconCodeSandbox\"\n      },\n      {\n        \"name\": \"icon-codepen\",\n        \"componentName\": \"IconCodepen\"\n      },\n      {\n        \"name\": \"icon-facebook\",\n        \"componentName\": \"IconFacebook\"\n      },\n      {\n        \"name\": \"icon-github\",\n        \"componentName\": \"IconGithub\"\n      },\n      {\n        \"name\": \"icon-gitlab\",\n        \"componentName\": \"IconGitlab\"\n      },\n      {\n        \"name\": \"icon-google\",\n        \"componentName\": \"IconGoogle\"\n      },\n      {\n        \"name\": \"icon-qq-zone\",\n        \"componentName\": \"IconQqZone\"\n      },\n      {\n        \"name\": \"icon-qq\",\n        \"componentName\": \"IconQq\"\n      },\n      {\n        \"name\": \"icon-twitter\",\n        \"componentName\": \"IconTwitter\"\n      },\n      {\n        \"name\": \"icon-wechat\",\n        \"componentName\": \"IconWechat\"\n      },\n      {\n        \"name\": \"icon-wechatpay\",\n        \"componentName\": \"IconWechatpay\"\n      },\n      {\n        \"name\": \"icon-weibo\",\n        \"componentName\": \"IconWeibo\"\n      }\n    ]\n  },\n  {\n    \"title\": \"通用类图标\",\n    \"type\": \"general\",\n    \"list\": [\n      {\n        \"name\": \"icon-chinese-fill\",\n        \"componentName\": \"IconChineseFill\"\n      },\n      {\n        \"name\": \"icon-english-fill\",\n        \"componentName\": \"IconEnglishFill\"\n      },\n      {\n        \"name\": \"icon-face-frown-fill\",\n        \"componentName\": \"IconFaceFrownFill\"\n      },\n      {\n        \"name\": \"icon-face-meh-fill\",\n        \"componentName\": \"IconFaceMehFill\"\n      },\n      {\n        \"name\": \"icon-face-smile-fill\",\n        \"componentName\": \"IconFaceSmileFill\"\n      },\n      {\n        \"name\": \"icon-moon-fill\",\n        \"componentName\": \"IconMoonFill\"\n      },\n      {\n        \"name\": \"icon-pen-fill\",\n        \"componentName\": \"IconPenFill\"\n      },\n      {\n        \"name\": \"icon-sun-fill\",\n        \"componentName\": \"IconSunFill\"\n      },\n      {\n        \"name\": \"icon-apps\",\n        \"componentName\": \"IconApps\"\n      },\n      {\n        \"name\": \"icon-archive\",\n        \"componentName\": \"IconArchive\"\n      },\n      {\n        \"name\": \"icon-bar-chart\",\n        \"componentName\": \"IconBarChart\"\n      },\n      {\n        \"name\": \"icon-book\",\n        \"componentName\": \"IconBook\"\n      },\n      {\n        \"name\": \"icon-bookmark\",\n        \"componentName\": \"IconBookmark\"\n      },\n      {\n        \"name\": \"icon-branch\",\n        \"componentName\": \"IconBranch\"\n      },\n      {\n        \"name\": \"icon-bug\",\n        \"componentName\": \"IconBug\"\n      },\n      {\n        \"name\": \"icon-bulb\",\n        \"componentName\": \"IconBulb\"\n      },\n      {\n        \"name\": \"icon-calendar-clock\",\n        \"componentName\": \"IconCalendarClock\"\n      },\n      {\n        \"name\": \"icon-calendar\",\n        \"componentName\": \"IconCalendar\"\n      },\n      {\n        \"name\": \"icon-camera\",\n        \"componentName\": \"IconCamera\"\n      },\n      {\n        \"name\": \"icon-cloud\",\n        \"componentName\": \"IconCloud\"\n      },\n      {\n        \"name\": \"icon-command\",\n        \"componentName\": \"IconCommand\"\n      },\n      {\n        \"name\": \"icon-common\",\n        \"componentName\": \"IconCommon\"\n      },\n      {\n        \"name\": \"icon-compass\",\n        \"componentName\": \"IconCompass\"\n      },\n      {\n        \"name\": \"icon-computer\",\n        \"componentName\": \"IconComputer\"\n      },\n      {\n        \"name\": \"icon-copyright\",\n        \"componentName\": \"IconCopyright\"\n      },\n      {\n        \"name\": \"icon-dashboard\",\n        \"componentName\": \"IconDashboard\"\n      },\n      {\n        \"name\": \"icon-desktop\",\n        \"componentName\": \"IconDesktop\"\n      },\n      {\n        \"name\": \"icon-dice\",\n        \"componentName\": \"IconDice\"\n      },\n      {\n        \"name\": \"icon-drag-dot-vertical\",\n        \"componentName\": \"IconDragDotVertical\"\n      },\n      {\n        \"name\": \"icon-drag-dot\",\n        \"componentName\": \"IconDragDot\"\n      },\n      {\n        \"name\": \"icon-drive-file\",\n        \"componentName\": \"IconDriveFile\"\n      },\n      {\n        \"name\": \"icon-ear\",\n        \"componentName\": \"IconEar\"\n      },\n      {\n        \"name\": \"icon-email\",\n        \"componentName\": \"IconEmail\"\n      },\n      {\n        \"name\": \"icon-empty\",\n        \"componentName\": \"IconEmpty\"\n      },\n      {\n        \"name\": \"icon-experiment\",\n        \"componentName\": \"IconExperiment\"\n      },\n      {\n        \"name\": \"icon-file-audio\",\n        \"componentName\": \"IconFileAudio\"\n      },\n      {\n        \"name\": \"icon-file-image\",\n        \"componentName\": \"IconFileImage\"\n      },\n      {\n        \"name\": \"icon-file-pdf\",\n        \"componentName\": \"IconFilePdf\"\n      },\n      {\n        \"name\": \"icon-file-video\",\n        \"componentName\": \"IconFileVideo\"\n      },\n      {\n        \"name\": \"icon-file\",\n        \"componentName\": \"IconFile\"\n      },\n      {\n        \"name\": \"icon-fire\",\n        \"componentName\": \"IconFire\"\n      },\n      {\n        \"name\": \"icon-folder-add\",\n        \"componentName\": \"IconFolderAdd\"\n      },\n      {\n        \"name\": \"icon-folder-delete\",\n        \"componentName\": \"IconFolderDelete\"\n      },\n      {\n        \"name\": \"icon-folder\",\n        \"componentName\": \"IconFolder\"\n      },\n      {\n        \"name\": \"icon-gift\",\n        \"componentName\": \"IconGift\"\n      },\n      {\n        \"name\": \"icon-idcard\",\n        \"componentName\": \"IconIdcard\"\n      },\n      {\n        \"name\": \"icon-image-close\",\n        \"componentName\": \"IconImageClose\"\n      },\n      {\n        \"name\": \"icon-image\",\n        \"componentName\": \"IconImage\"\n      },\n      {\n        \"name\": \"icon-interaction\",\n        \"componentName\": \"IconInteraction\"\n      },\n      {\n        \"name\": \"icon-language\",\n        \"componentName\": \"IconLanguage\"\n      },\n      {\n        \"name\": \"icon-layers\",\n        \"componentName\": \"IconLayers\"\n      },\n      {\n        \"name\": \"icon-layout\",\n        \"componentName\": \"IconLayout\"\n      },\n      {\n        \"name\": \"icon-loading\",\n        \"componentName\": \"IconLoading\"\n      },\n      {\n        \"name\": \"icon-location\",\n        \"componentName\": \"IconLocation\"\n      },\n      {\n        \"name\": \"icon-lock\",\n        \"componentName\": \"IconLock\"\n      },\n      {\n        \"name\": \"icon-loop\",\n        \"componentName\": \"IconLoop\"\n      },\n      {\n        \"name\": \"icon-man\",\n        \"componentName\": \"IconMan\"\n      },\n      {\n        \"name\": \"icon-menu\",\n        \"componentName\": \"IconMenu\"\n      },\n      {\n        \"name\": \"icon-mind-mapping\",\n        \"componentName\": \"IconMindMapping\"\n      },\n      {\n        \"name\": \"icon-mobile\",\n        \"componentName\": \"IconMobile\"\n      },\n      {\n        \"name\": \"icon-moon\",\n        \"componentName\": \"IconMoon\"\n      },\n      {\n        \"name\": \"icon-mosaic\",\n        \"componentName\": \"IconMosaic\"\n      },\n      {\n        \"name\": \"icon-nav\",\n        \"componentName\": \"IconNav\"\n      },\n      {\n        \"name\": \"icon-notification-close\",\n        \"componentName\": \"IconNotificationClose\"\n      },\n      {\n        \"name\": \"icon-notification\",\n        \"componentName\": \"IconNotification\"\n      },\n      {\n        \"name\": \"icon-palette\",\n        \"componentName\": \"IconPalette\"\n      },\n      {\n        \"name\": \"icon-pen\",\n        \"componentName\": \"IconPen\"\n      },\n      {\n        \"name\": \"icon-phone\",\n        \"componentName\": \"IconPhone\"\n      },\n      {\n        \"name\": \"icon-printer\",\n        \"componentName\": \"IconPrinter\"\n      },\n      {\n        \"name\": \"icon-public\",\n        \"componentName\": \"IconPublic\"\n      },\n      {\n        \"name\": \"icon-pushpin\",\n        \"componentName\": \"IconPushpin\"\n      },\n      {\n        \"name\": \"icon-qrcode\",\n        \"componentName\": \"IconQrcode\"\n      },\n      {\n        \"name\": \"icon-relation\",\n        \"componentName\": \"IconRelation\"\n      },\n      {\n        \"name\": \"icon-robot-add\",\n        \"componentName\": \"IconRobotAdd\"\n      },\n      {\n        \"name\": \"icon-robot\",\n        \"componentName\": \"IconRobot\"\n      },\n      {\n        \"name\": \"icon-safe\",\n        \"componentName\": \"IconSafe\"\n      },\n      {\n        \"name\": \"icon-schedule\",\n        \"componentName\": \"IconSchedule\"\n      },\n      {\n        \"name\": \"icon-shake\",\n        \"componentName\": \"IconShake\"\n      },\n      {\n        \"name\": \"icon-skin\",\n        \"componentName\": \"IconSkin\"\n      },\n      {\n        \"name\": \"icon-stamp\",\n        \"componentName\": \"IconStamp\"\n      },\n      {\n        \"name\": \"icon-storage\",\n        \"componentName\": \"IconStorage\"\n      },\n      {\n        \"name\": \"icon-subscribe-add\",\n        \"componentName\": \"IconSubscribeAdd\"\n      },\n      {\n        \"name\": \"icon-subscribe\",\n        \"componentName\": \"IconSubscribe\"\n      },\n      {\n        \"name\": \"icon-subscribed\",\n        \"componentName\": \"IconSubscribed\"\n      },\n      {\n        \"name\": \"icon-sun\",\n        \"componentName\": \"IconSun\"\n      },\n      {\n        \"name\": \"icon-tag\",\n        \"componentName\": \"IconTag\"\n      },\n      {\n        \"name\": \"icon-tags\",\n        \"componentName\": \"IconTags\"\n      },\n      {\n        \"name\": \"icon-thunderbolt\",\n        \"componentName\": \"IconThunderbolt\"\n      },\n      {\n        \"name\": \"icon-tool\",\n        \"componentName\": \"IconTool\"\n      },\n      {\n        \"name\": \"icon-trophy\",\n        \"componentName\": \"IconTrophy\"\n      },\n      {\n        \"name\": \"icon-unlock\",\n        \"componentName\": \"IconUnlock\"\n      },\n      {\n        \"name\": \"icon-user-add\",\n        \"componentName\": \"IconUserAdd\"\n      },\n      {\n        \"name\": \"icon-user-group\",\n        \"componentName\": \"IconUserGroup\"\n      },\n      {\n        \"name\": \"icon-user\",\n        \"componentName\": \"IconUser\"\n      },\n      {\n        \"name\": \"icon-video-camera\",\n        \"componentName\": \"IconVideoCamera\"\n      },\n      {\n        \"name\": \"icon-wifi\",\n        \"componentName\": \"IconWifi\"\n      },\n      {\n        \"name\": \"icon-woman\",\n        \"componentName\": \"IconWoman\"\n      }\n    ]\n  }\n]\n"
  },
  {
    "path": "packages/arco-vue-docs/pages/icon/style.less",
    "content": "@import '../../../web-vue/components/style/theme/css-variables.less';\n\n.arco-vue-icon-header {\n  margin-top: 48px;\n\n  .icon-list-bar {\n    display: flex;\n    margin-top: 48px;\n    margin-bottom: 20px;\n\n    .arco-input-search {\n      flex: 1;\n      margin-left: 20px;\n    }\n  }\n\n  .icon-list-operations {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    box-sizing: border-box;\n    width: 100%;\n    height: 56px;\n    padding: 10px;\n    color: var(--color-text-1);\n    background-color: var(--color-bg-2);\n    border: 1px solid var(--color-border);\n\n    .arco-form-item {\n      align-items: center;\n      margin-bottom: 0;\n    }\n  }\n}\n\n.arco-vue-icon-section {\n  margin-top: 40px;\n\n  &-title {\n    margin: 0;\n    padding: 12px;\n    border: 1px solid var(--color-border);\n  }\n\n  .icon {\n    &-list {\n      display: flex;\n      flex-wrap: wrap;\n      margin: 0;\n      padding: 0;\n      list-style: none;\n      border-left: 1px solid var(--color-border);\n    }\n\n    &-item {\n      position: relative;\n      box-sizing: border-box;\n      width: 16.66%;\n      height: 140px;\n      border-right: 1px solid var(--color-border);\n      border-bottom: 1px solid var(--color-border);\n      cursor: pointer;\n      transition: all 200ms ease;\n\n      &-name {\n        position: absolute;\n        top: 0;\n        left: 0;\n        box-sizing: border-box;\n        width: 100%;\n        margin: 0;\n        padding: 12px;\n        overflow: hidden;\n        color: var(--color-text-1);\n        font-size: 12px;\n        white-space: nowrap;\n        text-align: center;\n        text-overflow: ellipsis;\n      }\n\n      &-component {\n        margin-top: 10px;\n        font-size: 32px;\n        line-height: 140px;\n        text-align: center;\n\n        svg {\n          transition: all 200ms ease;\n        }\n      }\n\n      &:hover {\n        background-color: var(--color-fill-2);\n\n        svg {\n          font-size: 32px;\n          transform: scale(1.4, 1.4);\n        }\n      }\n    }\n  }\n}\n"
  },
  {
    "path": "packages/arco-vue-docs/pages/token/token.vue",
    "content": "<template>\n  <arco-article v-bind=\"data\">\n    <div class=\"theme-button\">\n      <a-radio-group\n        :model-value=\"theme\"\n        type=\"button\"\n        @change=\"handleThemeChange\"\n      >\n        <a-radio value=\"light\">\n          <icon-sun-fill />\n          Light\n        </a-radio>\n        <a-radio value=\"dark\">\n          <icon-moon-fill />\n          Dark\n        </a-radio>\n      </a-radio-group>\n    </div>\n    <template v-for=\"(group, index) of tokens\" :key=\"index\">\n      <h2>{{ locale === 'en-US' ? group.nameEN : group.name }}</h2>\n      <TokenTable\n        :data=\"group.tokens\"\n        :type=\"group.type\"\n        :dark=\"theme === 'dark'\"\n        :local=\"locale\"\n        style=\"margin-bottom: 60px\"\n      />\n    </template>\n  </arco-article>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, PropType, ref } from 'vue';\nimport { useI18n } from 'vue-i18n';\nimport { IconSunFill, IconMoonFill } from '@web-vue/components/icon';\nimport TokenTable from '../../components/token-table/token-table.vue';\nimport { tokens } from './tokens';\nimport { useTheme } from '../../hooks/useTheme';\n\nexport default defineComponent({\n  name: 'Token',\n  components: { TokenTable, IconSunFill, IconMoonFill },\n  setup() {\n    const { theme, handleThemeChange } = useTheme();\n\n    const { t, locale } = useI18n();\n\n    const data = computed(() => {\n      if (locale.value === 'zh-CN') {\n        return {\n          title: '设计变量',\n          description:\n            '组件库的全局 Token，可以在此查看组件库内置的设计变量以及默认值',\n          meta: {\n            type: '组件',\n            category: '通用',\n          },\n        };\n      }\n      return {\n        title: 'Design Token',\n        description:\n          'The global Token of the component library, you can view the built-in design variables and default values of the component library here',\n        meta: {\n          type: 'Component',\n          category: 'Common',\n        },\n      };\n    });\n\n    return {\n      data,\n      tokens,\n      locale,\n      theme,\n      handleThemeChange,\n    };\n  },\n});\n</script>\n\n<style>\n.theme-button {\n  display: flex;\n  margin: 20px 0;\n  justify-content: flex-end;\n}\n</style>\n"
  },
  {
    "path": "packages/arco-vue-docs/pages/token/tokens.ts",
    "content": "export const tokens = [\n  {\n    name: '主色',\n    nameEN: 'Primary',\n    type: 'color',\n    tokens: [\n      {\n        name: 'primary-6',\n        desc: '常规',\n        descEN: 'Normal',\n        value: 'rgb(var(--arcoblue-6))',\n        cssvar: true,\n      },\n      {\n        name: 'primary-5',\n        desc: '悬浮（hover）',\n        descEN: 'Hover',\n        value: 'rgb(var(--arcoblue-5))',\n        cssvar: true,\n      },\n      {\n        name: 'primary-7',\n        desc: '点击（click）',\n        descEN: 'Click',\n        value: 'rgb(var(--arcoblue-7))',\n        cssvar: true,\n      },\n      {\n        name: 'primary-4',\n        desc: '特殊场景',\n        descEN: 'Special scene',\n        value: 'rgb(var(--arcoblue-4))',\n        cssvar: true,\n      },\n      {\n        name: 'primary-3',\n        desc: '一般禁用',\n        descEN: 'Normally disabled',\n        value: 'rgb(var(--arcoblue-3))',\n        cssvar: true,\n      },\n      {\n        name: 'primary-2',\n        desc: '文字禁用',\n        descEN: 'Text disabled',\n        value: 'rgb(var(--arcoblue-2))',\n        cssvar: true,\n      },\n      {\n        name: 'primary-1',\n        desc: '浅色/白底悬浮',\n        descEN: 'Light/white suspension',\n        value: 'rgb(var(--arcoblue-1))',\n        cssvar: true,\n      },\n    ],\n  },\n  {\n    name: '成功色',\n    nameEN: 'Success',\n    type: 'color',\n    tokens: [\n      {\n        name: 'success-6',\n        desc: '常规',\n        descEN: 'Normal',\n        value: 'rgb(var(--green-6))',\n        cssvar: true,\n      },\n      {\n        name: 'success-5',\n        desc: '悬浮（hover）',\n        descEN: 'Hover',\n        value: 'rgb(var(--green-5))',\n        cssvar: true,\n      },\n      {\n        name: 'success-7',\n        desc: '点击（click）',\n        descEN: 'Click',\n        value: 'rgb(var(--green-7))',\n        cssvar: true,\n      },\n      {\n        name: 'success-4',\n        desc: '特殊场景',\n        descEN: 'Special scene',\n        value: 'rgb(var(--green-4))',\n        cssvar: true,\n      },\n      {\n        name: 'success-3',\n        desc: '一般禁用',\n        descEN: 'Normally disabled',\n        value: 'rgb(var(--green-3))',\n        cssvar: true,\n      },\n      {\n        name: 'success-2',\n        desc: '文字禁用',\n        descEN: 'Text disabled',\n        value: 'rgb(var(--green-2))',\n        cssvar: true,\n      },\n      {\n        name: 'success-1',\n        desc: '浅色/白底悬浮',\n        descEN: 'Light/white suspension',\n        value: 'rgb(var(--green-1))',\n        cssvar: true,\n      },\n    ],\n  },\n  {\n    name: '警示色',\n    nameEN: 'Warning',\n    type: 'color',\n    tokens: [\n      {\n        name: 'warning-6',\n        desc: '常规',\n        descEN: 'Normal',\n        value: 'rgb(var(--orange-6))',\n        cssvar: true,\n      },\n      {\n        name: 'warning-5',\n        desc: '悬浮（hover）',\n        descEN: 'Hover',\n        value: 'rgb(var(--orange-5))',\n        cssvar: true,\n      },\n      {\n        name: 'warning-7',\n        desc: '点击（click）',\n        descEN: 'Click',\n        value: 'rgb(var(--orange-7))',\n        cssvar: true,\n      },\n      {\n        name: 'warning-4',\n        desc: '特殊场景',\n        descEN: 'Special scene',\n        value: 'rgb(var(--orange-4))',\n        cssvar: true,\n      },\n      {\n        name: 'warning-3',\n        desc: '一般禁用',\n        descEN: 'Normally disabled',\n        value: 'rgb(var(--orange-3))',\n        cssvar: true,\n      },\n      {\n        name: 'warning-2',\n        desc: '文字禁用',\n        descEN: 'Text disabled',\n        value: 'rgb(var(--orange-2))',\n        cssvar: true,\n      },\n      {\n        name: 'warning-1',\n        desc: '浅色/白底悬浮',\n        descEN: 'Light/white suspension',\n        value: 'rgb(var(--orange-1))',\n        cssvar: true,\n      },\n    ],\n  },\n  {\n    name: '错误色',\n    nameEN: 'Danger',\n    type: 'color',\n    tokens: [\n      {\n        name: 'danger-6',\n        desc: '常规',\n        descEN: 'Normal',\n        value: 'rgb(var(--red-6))',\n        cssvar: true,\n      },\n      {\n        name: 'danger-5',\n        desc: '悬浮（hover）',\n        descEN: 'Hover',\n        value: 'rgb(var(--red-5))',\n        cssvar: true,\n      },\n      {\n        name: 'danger-7',\n        desc: '点击（click）',\n        descEN: 'Click',\n        value: 'rgb(var(--red-7))',\n        cssvar: true,\n      },\n      {\n        name: 'danger-4',\n        desc: '特殊场景',\n        descEN: 'Special scene',\n        value: 'rgb(var(--red-4))',\n        cssvar: true,\n      },\n      {\n        name: 'danger-3',\n        desc: '一般禁用',\n        descEN: 'Normally disabled',\n        value: 'rgb(var(--red-3))',\n        cssvar: true,\n      },\n      {\n        name: 'danger-2',\n        desc: '文字禁用',\n        descEN: 'Text disabled',\n        value: 'rgb(var(--red-2))',\n        cssvar: true,\n      },\n      {\n        name: 'danger-1',\n        desc: '浅色/白底悬浮',\n        descEN: 'Light/white suspension',\n        value: 'rgb(var(--red-1))',\n        cssvar: true,\n      },\n    ],\n  },\n  {\n    name: '链接色',\n    nameEN: 'Link',\n    type: 'color',\n    tokens: [\n      {\n        name: 'link-6',\n        desc: '常规',\n        descEN: 'Normal',\n        value: 'rgb(var(--arcoblue-6))',\n        cssvar: true,\n      },\n      {\n        name: 'link-5',\n        desc: '悬浮（hover）',\n        descEN: 'Hover',\n        value: 'rgb(var(--arcoblue-5))',\n        cssvar: true,\n      },\n      {\n        name: 'link-7',\n        desc: '点击（click）',\n        descEN: 'Click',\n        value: 'rgb(var(--arcoblue-7))',\n        cssvar: true,\n      },\n      {\n        name: 'link-4',\n        desc: '特殊场景',\n        descEN: 'Special scene',\n        value: 'rgb(var(--arcoblue-4))',\n        cssvar: true,\n      },\n      {\n        name: 'link-3',\n        desc: '一般禁用',\n        descEN: 'Normally disabled',\n        value: 'rgb(var(--arcoblue-3))',\n        cssvar: true,\n      },\n      {\n        name: 'link-2',\n        desc: '文字禁用',\n        descEN: 'Text disabled',\n        value: 'rgb(var(--arcoblue-2))',\n        cssvar: true,\n      },\n      {\n        name: 'link-1',\n        desc: '浅色/白底悬浮',\n        descEN: 'Light/white suspension',\n        value: 'rgb(var(--arcoblue-1))',\n        cssvar: true,\n      },\n    ],\n  },\n  {\n    name: '边框颜色',\n    nameEN: 'Border Color',\n    type: 'color',\n    tokens: [\n      {\n        name: 'color-border-1',\n        desc: '浅色',\n        descEN: 'Light color',\n        value: 'var(--color-neutral-2)',\n        cssvar: true,\n      },\n      {\n        name: 'color-border-2',\n        desc: '一般',\n        descEN: 'Normal',\n        value: 'var(--color-neutral-3)',\n        cssvar: true,\n      },\n      {\n        name: 'color-border-3',\n        desc: '深/悬浮',\n        descEN: 'Deep/Hover',\n        value: 'var(--color-neutral-4)',\n        cssvar: true,\n      },\n      {\n        name: 'color-border-4',\n        desc: '重/按钮描边',\n        descEN: 'Heavy/Button Border',\n        value: 'var(--color-neutral-6)',\n        cssvar: true,\n      },\n    ],\n  },\n  {\n    name: '填充颜色',\n    nameEN: 'Fill Color',\n    type: 'color',\n    tokens: [\n      {\n        name: 'color-fill-1',\n        desc: '浅/禁用',\n        descEN: 'Light/Disabled',\n        value: 'var(--color-neutral-1)',\n        darkValue: 'fade(#FFF, 4%)',\n        cssvar: true,\n      },\n      {\n        name: 'color-fill-2',\n        desc: '常规/白底悬浮',\n        descEN: 'Normal/White Hover',\n        value: 'var(--color-neutral-2)',\n        darkValue: 'fade(#FFF, 8%)',\n        cssvar: true,\n      },\n      {\n        name: 'color-fill-3',\n        desc: '深/灰底悬浮',\n        descEN: 'Deep/Gray Hover',\n        value: 'var(--color-neutral-3)',\n        darkValue: 'fade(#FFF, 12%)',\n        cssvar: true,\n      },\n      {\n        name: 'color-fill-4',\n        desc: '重/特殊场景',\n        descEN: 'Heavy/Special scene',\n        value: 'var(--color-neutral-4)',\n        darkValue: 'fade(#FFF, 16%)',\n        cssvar: true,\n      },\n    ],\n  },\n  {\n    name: '文字颜色',\n    type: 'color',\n    tokens: [\n      {\n        name: 'color-text-1',\n        desc: '强调/正文标题',\n        descEN: 'Emphasis/Body Title',\n        value: 'var(--color-neutral-10)',\n        darkValue: 'fade(#FFF, 90%)',\n        cssvar: true,\n      },\n      {\n        name: 'color-text-2',\n        desc: '次强调/正文标题',\n        descEN: 'Sub-Emphasis/Body Title',\n        value: 'var(--color-neutral-8)',\n        darkValue: 'fade(#FFF, 70%)',\n        cssvar: true,\n      },\n      {\n        name: 'color-text-3',\n        desc: '次要信息',\n        descEN: 'Secondary information',\n        value: 'var(--color-neutral-6)',\n        darkValue: 'fade(#FFF, 50%)',\n        cssvar: true,\n      },\n      {\n        name: 'color-text-4',\n        desc: '置灰信息',\n        descEN: 'Grayed out information',\n        value: 'var(--color-neutral-4)',\n        darkValue: 'fade(#FFF, 30%)',\n        cssvar: true,\n      },\n    ],\n  },\n  {\n    name: '背景颜色',\n    nameEN: 'Background Color',\n    type: 'color',\n    tokens: [\n      {\n        name: 'color-bg-1',\n        desc: '整体背景色',\n        descEN: 'Overall background color',\n        value: '#FFF',\n        darkValue: '#17171A',\n        cssvar: true,\n      },\n      {\n        name: 'color-bg-2',\n        desc: '一级容器背景',\n        descEN: 'Primary container background',\n        value: '#FFF',\n        darkValue: '#232324',\n        cssvar: true,\n      },\n      {\n        name: 'color-bg-3',\n        desc: '二级容器背景',\n        descEN: 'Secondary container background',\n        value: '#FFF',\n        darkValue: '#2A2A2B',\n        cssvar: true,\n      },\n      {\n        name: 'color-bg-4',\n        desc: '三级容器背景',\n        descEN: 'Tertiary container background',\n        value: '#FFF',\n        darkValue: '#313132',\n        cssvar: true,\n      },\n      {\n        name: 'color-bg-5',\n        desc: '下拉弹出框、Tooltip 背景颜色',\n        descEN: 'Popup, Tooltip background color',\n        value: '#FFF',\n        darkValue: '#373739',\n        cssvar: true,\n      },\n      {\n        name: 'color-bg-white',\n        desc: '白色背景',\n        descEN: 'White background',\n        value: '#FFF',\n        darkValue: '#F6F6F6',\n        cssvar: true,\n      },\n    ],\n  },\n  // size\n  {\n    name: '字体大小',\n    nameEN: 'Font Size',\n    type: 'size',\n    tokens: [\n      {\n        name: 'font-size-body-3',\n        desc: '正文-常规',\n        descEN: 'Body - General',\n        value: '14px',\n      },\n      {\n        name: 'font-size-body-2',\n        desc: '正文-常规-小',\n        descEN: 'Body - Regular - Small',\n        value: '13px',\n      },\n      {\n        name: 'font-size-body-1',\n        desc: '辅助文案/次要文案',\n        descEN: 'Auxiliary Copywriting/Secondary Copywriting',\n        value: '12px',\n      },\n      {\n        name: 'font-size-caption',\n        desc: '水印文本',\n        descEN: 'Watermark text',\n        value: '12px',\n      },\n      {\n        name: 'font-size-title-1',\n        desc: '标题-小',\n        descEN: 'Title - Small',\n        value: '16px',\n      },\n      {\n        name: 'font-size-title-2',\n        desc: '标题-中',\n        descEN: 'Title - Medium',\n        value: '20px',\n      },\n      {\n        name: 'font-size-title-3',\n        desc: '标题-大',\n        descEN: 'Title - Large',\n        value: '24px',\n      },\n      {\n        name: 'font-size-display-1',\n        desc: '运营标题-小',\n        descEN: 'Operational Title - Small',\n        value: '36px',\n      },\n      {\n        name: 'font-size-display-2',\n        desc: '运营标题-中',\n        descEN: 'Operational Title - Medium',\n        value: '48px',\n      },\n      {\n        name: 'font-size-display-3',\n        desc: '运营标题-大',\n        descEN: 'Operational Title - Large',\n        value: '56px',\n      },\n    ],\n  },\n  {\n    name: '字重',\n    nameEN: 'Font Wight',\n    type: 'size',\n    tokens: [\n      {\n        name: 'font-weight-400',\n        desc: '常规',\n        descEN: 'Normal',\n        value: '400',\n      },\n      {\n        name: 'font-weight-500',\n        desc: '中等（加粗）',\n        descEN: 'Medium (bold)',\n        value: '500',\n      },\n      {\n        name: 'font-weight-600',\n        desc: '半粗',\n        descEN: 'Half thick',\n        value: '600',\n      },\n      {\n        name: 'font-weight-700',\n        desc: '粗体',\n        descEN: 'Bold',\n        value: '700',\n      },\n      {\n        name: 'font-weight-800',\n        desc: '中黑',\n        descEN: 'Medium black',\n        value: '800',\n      },\n      {\n        name: 'font-weight-900',\n        desc: '黑体',\n        descEN: 'Black body',\n        value: '900',\n      },\n      {\n        name: 'font-weight-300',\n        desc: '细体',\n        descEN: 'Fine body',\n        value: '300',\n      },\n      {\n        name: 'font-weight-200',\n        desc: '纤细',\n        descEN: 'Slim',\n        value: '200',\n      },\n      {\n        name: 'font-weight-100',\n        desc: '极细',\n        descEN: 'Very fine',\n        value: '100',\n      },\n    ],\n  },\n  {\n    name: '尺寸',\n    nameEN: 'Size',\n    type: 'size',\n    tokens: [\n      {\n        name: 'size-none',\n        desc: '0',\n        value: '0',\n      },\n      {\n        name: 'size-1',\n        desc: '4px',\n        value: '4px',\n      },\n      {\n        name: 'size-2',\n        desc: '8px',\n        value: '8px',\n      },\n      {\n        name: 'size-3',\n        desc: '12px',\n        value: '12px',\n      },\n      {\n        name: 'size-4',\n        desc: '迷你（24px）',\n        value: '16px',\n      },\n      {\n        name: 'size-5',\n        desc: '20px',\n        value: '20px',\n      },\n      {\n        name: 'size-N',\n        desc: '变量对应的值为 (4 * N)px 大小',\n        descEN: 'The corresponding value of the variable is (4 * N)px size',\n        value: '(4 * N)px',\n      },\n      {\n        name: 'size-50',\n        desc: '200px',\n        value: '200px',\n      },\n    ],\n  },\n  {\n    name: '组件尺寸',\n    nameEN: 'Component Size',\n    type: 'size',\n    tokens: [\n      {\n        name: 'size-mini',\n        desc: '迷你（24px）',\n        descEN: 'mini(24px)',\n        value: '@size-6',\n      },\n      {\n        name: 'size-small',\n        desc: '较小（28px）',\n        descEN: 'small(28px)',\n        value: '@size-7',\n      },\n      {\n        name: 'size-default',\n        desc: '中等（32px）',\n        descEN: 'medium(32px)',\n        value: '@size-8',\n      },\n      {\n        name: 'size-large',\n        desc: '较大（36px）',\n        descEN: 'large(36px)',\n        value: '@size-9',\n      },\n    ],\n  },\n  {\n    name: '边框宽度',\n    nameEN: 'Border Size',\n    type: 'size',\n    tokens: [\n      {\n        name: 'border-none',\n        desc: '无边框',\n        descEN: 'None Border',\n        value: '0',\n      },\n      {\n        name: 'border-1',\n        desc: '常规',\n        descEN: 'Normal',\n        value: '1px',\n      },\n      {\n        name: 'border-2',\n        desc: '较粗',\n        descEN: 'Thicker',\n        value: '2px',\n      },\n      {\n        name: 'border-3',\n        desc: '粗',\n        descEN: 'Bold',\n        value: '3px',\n      },\n    ],\n  },\n  {\n    name: '边框圆角',\n    nameEN: 'Border Radius',\n    type: 'size',\n    tokens: [\n      {\n        name: 'border-radius-none',\n        desc: '直角',\n        descEN: 'Right angle',\n        value: '0',\n        cssvar: true,\n      },\n      {\n        name: 'border-radius-small',\n        desc: '圆角-常规',\n        descEN: 'Rounded Corners - Regular',\n        value: '2px',\n        cssvar: true,\n      },\n      {\n        name: 'border-radius-medium',\n        desc: '圆角-中等',\n        descEN: 'Rounded Corners - Medium',\n        value: '4px',\n        cssvar: true,\n      },\n      {\n        name: 'border-radius-large',\n        desc: '圆角-较大',\n        descEN: 'Rounded Corners - Larger',\n        value: '8px',\n        cssvar: true,\n      },\n      {\n        name: 'border-radius-circle',\n        desc: '圆角-全圆角',\n        descEN: 'Rounded Corners - Full Rounded Corners',\n        value: '50%',\n        cssvar: true,\n      },\n    ],\n  },\n  {\n    name: '阴影',\n    nameEN: 'Shadow',\n    type: 'size',\n    tokens: [\n      {\n        name: 'shadow-special',\n        desc: '特殊阴影',\n        descEN: 'Special shade',\n        value: '0 0 1px rgba(0, 0, 0, 0.3)',\n      },\n      {\n        name: 'shadow1-center',\n        desc: '阴影样式1',\n        descEN: 'shadow style 1',\n        value: '0 -2px 5px rgba(0, 0, 0, 0.1)',\n      },\n      {\n        name: 'shadow2-center',\n        desc: '阴影样式2',\n        descEN: 'shadow style 2',\n        value: '0 0 10px rgba(0, 0, 0, 0.1)',\n      },\n      {\n        name: 'shadow3-center',\n        desc: '阴影样式3',\n        descEN: 'shadow style 3',\n        value: '0 0 20px rgba(0, 0, 0, 0.1)',\n      },\n    ],\n  },\n];\n"
  },
  {
    "path": "packages/arco-vue-docs/router.ts",
    "content": "import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';\nimport nProgress from 'nprogress';\n\nconst Start = () => import('./docs/start.zh-CN.md');\nconst StartEn = () => import('./docs/start.en-US.md');\nconst Dark = () => import('./docs/dark.zh-CN.md');\nconst DarkEn = () => import('./docs/dark.en-US.md');\nconst Theme = () => import('./docs/theme.zh-CN.md');\nconst ThemeEn = () => import('./docs/theme.en-US.md');\nconst I18n = () => import('./docs/i18n.zh-CN.md');\nconst I18nEn = () => import('./docs/i18n.en-US.md');\nconst Changelog = () => import('./pages/changelog/changelog.vue');\nconst Button = () => import('@web-vue/components/button/README.zh-CN.md');\nconst ButtonEn = () => import('@web-vue/components/button/README.en-US.md');\nconst Icon = () => import('./pages/icon/icon-demo.vue');\nconst Link = () => import('@web-vue/components/link/README.zh-CN.md');\nconst LinkEn = () => import('@web-vue/components/link/README.en-US.md');\nconst Typography = () =>\n  import('@web-vue/components/typography/README.zh-CN.md');\nconst TypographyEn = () =>\n  import('@web-vue/components/typography/README.en-US.md');\nconst Divider = () => import('@web-vue/components/divider/README.zh-CN.md');\nconst DividerEn = () => import('@web-vue/components/divider/README.en-US.md');\nconst Grid = () => import('@web-vue/components/grid/README.zh-CN.md');\nconst GridEn = () => import('@web-vue/components/grid/README.en-US.md');\nconst Layout = () => import('@web-vue/components/layout/README.zh-CN.md');\nconst LayoutEn = () => import('@web-vue/components/layout/README.en-US.md');\nconst Space = () => import('@web-vue/components/space/README.zh-CN.md');\nconst SpaceEn = () => import('@web-vue/components/space/README.en-US.md');\nconst Avatar = () => import('@web-vue/components/avatar/README.zh-CN.md');\nconst AvatarEn = () => import('@web-vue/components/avatar/README.en-US.md');\nconst Badge = () => import('@web-vue/components/badge/README.zh-CN.md');\nconst BadgeEn = () => import('@web-vue/components/badge/README.en-US.md');\nconst Card = () => import('@web-vue/components/card/README.zh-CN.md');\nconst CardEn = () => import('@web-vue/components/card/README.en-US.md');\nconst Carousel = () => import('@web-vue/components/carousel/README.zh-CN.md');\nconst CarouselEn = () => import('@web-vue/components/carousel/README.en-US.md');\nconst Collapse = () => import('@web-vue/components/collapse/README.zh-CN.md');\nconst CollapseEn = () => import('@web-vue/components/collapse/README.en-US.md');\nconst Calendar = () => import('@web-vue/components/calendar/README.zh-CN.md');\nconst CalendarEn = () => import('@web-vue/components/calendar/README.en-US.md');\nconst Comment = () => import('@web-vue/components/comment/README.zh-CN.md');\nconst CommentEn = () => import('@web-vue/components/comment/README.en-US.md');\nconst Descriptions = () =>\n  import('@web-vue/components/descriptions/README.zh-CN.md');\nconst DescriptionsEn = () =>\n  import('@web-vue/components/descriptions/README.en-US.md');\nconst Empty = () => import('@web-vue/components/empty/README.zh-CN.md');\nconst EmptyEn = () => import('@web-vue/components/empty/README.en-US.md');\nconst Image = () => import('@web-vue/components/image/README.zh-CN.md');\nconst ImageEn = () => import('@web-vue/components/image/README.en-US.md');\nconst List = () => import('@web-vue/components/list/README.zh-CN.md');\nconst ListEn = () => import('@web-vue/components/list/README.en-US.md');\nconst Popover = () => import('@web-vue/components/popover/README.zh-CN.md');\nconst PopoverEn = () => import('@web-vue/components/popover/README.en-US.md');\nconst Statistic = () => import('@web-vue/components/statistic/README.zh-CN.md');\nconst StatisticEn = () =>\n  import('@web-vue/components/statistic/README.en-US.md');\nconst Table = () => import('@web-vue/components/table/README.zh-CN.md');\nconst TableEn = () => import('@web-vue/components/table/README.en-US.md');\nconst Tabs = () => import('@web-vue/components/tabs/README.zh-CN.md');\nconst TabsEn = () => import('@web-vue/components/tabs/README.en-US.md');\nconst Tag = () => import('@web-vue/components/tag/README.zh-CN.md');\nconst TagEn = () => import('@web-vue/components/tag/README.en-US.md');\nconst Timeline = () => import('@web-vue/components/timeline/README.zh-CN.md');\nconst TimelineEn = () => import('@web-vue/components/timeline/README.en-US.md');\nconst Tooltip = () => import('@web-vue/components/tooltip/README.zh-CN.md');\nconst TooltipEn = () => import('@web-vue/components/tooltip/README.en-US.md');\nconst Tree = () => import('@web-vue/components/tree/README.zh-CN.md');\nconst TreeEn = () => import('@web-vue/components/tree/README.en-US.md');\nconst AutoComplete = () =>\n  import('@web-vue/components/auto-complete/README.zh-CN.md');\nconst AutoCompleteEn = () =>\n  import('@web-vue/components/auto-complete/README.en-US.md');\nconst Cascader = () => import('@web-vue/components/cascader/README.zh-CN.md');\nconst CascaderEn = () => import('@web-vue/components/cascader/README.en-US.md');\nconst Checkbox = () => import('@web-vue/components/checkbox/README.zh-CN.md');\nconst CheckboxEn = () => import('@web-vue/components/checkbox/README.en-US.md');\nconst DatePicker = () =>\n  import('@web-vue/components/date-picker/README.zh-CN.md');\nconst DatePickerEn = () =>\n  import('@web-vue/components/date-picker/README.en-US.md');\nconst Form = () => import('@web-vue/components/form/README.zh-CN.md');\nconst FormEn = () => import('@web-vue/components/form/README.en-US.md');\nconst Input = () => import('@web-vue/components/input/README.zh-CN.md');\nconst InputEn = () => import('@web-vue/components/input/README.en-US.md');\nconst InputNumber = () =>\n  import('@web-vue/components/input-number/README.zh-CN.md');\nconst InputNumberEn = () =>\n  import('@web-vue/components/input-number/README.en-US.md');\nconst InputTag = () => import('@web-vue/components/input-tag/README.zh-CN.md');\nconst InputTagEn = () =>\n  import('@web-vue/components/input-tag/README.en-US.md');\nconst Mention = () => import('@web-vue/components/mention/README.zh-CN.md');\nconst MentionEn = () => import('@web-vue/components/mention/README.en-US.md');\nconst Radio = () => import('@web-vue/components/radio/README.zh-CN.md');\nconst RadioEn = () => import('@web-vue/components/radio/README.en-US.md');\nconst Rate = () => import('@web-vue/components/rate/README.zh-CN.md');\nconst RateEn = () => import('@web-vue/components/rate/README.en-US.md');\nconst Select = () => import('@web-vue/components/select/README.zh-CN.md');\nconst SelectEn = () => import('@web-vue/components/select/README.en-US.md');\nconst Slider = () => import('@web-vue/components/slider/README.zh-CN.md');\nconst SliderEn = () => import('@web-vue/components/slider/README.en-US.md');\nconst Switch = () => import('@web-vue/components/switch/README.zh-CN.md');\nconst SwitchEn = () => import('@web-vue/components/switch/README.en-US.md');\nconst Textarea = () => import('@web-vue/components/textarea/README.zh-CN.md');\nconst TextareaEn = () => import('@web-vue/components/textarea/README.en-US.md');\nconst TimePicker = () =>\n  import('@web-vue/components/time-picker/README.zh-CN.md');\nconst TimePickerEn = () =>\n  import('@web-vue/components/time-picker/README.en-US.md');\nconst Transfer = () => import('@web-vue/components/transfer/README.zh-CN.md');\nconst TransferEn = () => import('@web-vue/components/transfer/README.en-US.md');\nconst Upload = () => import('@web-vue/components/upload/README.zh-CN.md');\nconst UploadEn = () => import('@web-vue/components/upload/README.en-US.md');\nconst TreeSelect = () =>\n  import('@web-vue/components/tree-select/README.zh-CN.md');\nconst TreeSelectEn = () =>\n  import('@web-vue/components/tree-select/README.en-US.md');\nconst Alert = () => import('@web-vue/components/alert/README.zh-CN.md');\nconst AlertEn = () => import('@web-vue/components/alert/README.en-US.md');\nconst Drawer = () => import('@web-vue/components/drawer/README.zh-CN.md');\nconst DrawerEn = () => import('@web-vue/components/drawer/README.en-US.md');\nconst Message = () => import('@web-vue/components/message/README.zh-CN.md');\nconst MessageEn = () => import('@web-vue/components/message/README.en-US.md');\nconst Modal = () => import('@web-vue/components/modal/README.zh-CN.md');\nconst ModalEn = () => import('@web-vue/components/modal/README.en-US.md');\nconst Notification = () =>\n  import('@web-vue/components/notification/README.zh-CN.md');\nconst NotificationEn = () =>\n  import('@web-vue/components/notification/README.en-US.md');\nconst Popconfirm = () =>\n  import('@web-vue/components/popconfirm/README.zh-CN.md');\nconst PopconfirmEn = () =>\n  import('@web-vue/components/popconfirm/README.en-US.md');\nconst Progress = () => import('@web-vue/components/progress/README.zh-CN.md');\nconst ProgressEn = () => import('@web-vue/components/progress/README.en-US.md');\nconst Result = () => import('@web-vue/components/result/README.zh-CN.md');\nconst ResultEn = () => import('@web-vue/components/result/README.en-US.md');\nconst Spin = () => import('@web-vue/components/spin/README.zh-CN.md');\nconst SpinEn = () => import('@web-vue/components/spin/README.en-US.md');\nconst Skeleton = () => import('@web-vue/components/skeleton/README.zh-CN.md');\nconst SkeletonEn = () => import('@web-vue/components/skeleton/README.en-US.md');\nconst Breadcrumb = () =>\n  import('@web-vue/components/breadcrumb/README.zh-CN.md');\nconst BreadcrumbEn = () =>\n  import('@web-vue/components/breadcrumb/README.en-US.md');\nconst Dropdown = () => import('@web-vue/components/dropdown/README.zh-CN.md');\nconst DropdownEn = () => import('@web-vue/components/dropdown/README.en-US.md');\nconst Menu = () => import('@web-vue/components/menu/README.zh-CN.md');\nconst MenuEn = () => import('@web-vue/components/menu/README.en-US.md');\nconst PageHeader = () =>\n  import('@web-vue/components/page-header/README.zh-CN.md');\nconst PageHeaderEn = () =>\n  import('@web-vue/components/page-header/README.en-US.md');\nconst Pagination = () =>\n  import('@web-vue/components/pagination/README.zh-CN.md');\nconst PaginationEn = () =>\n  import('@web-vue/components/pagination/README.en-US.md');\nconst Steps = () => import('@web-vue/components/steps/README.zh-CN.md');\nconst StepsEn = () => import('@web-vue/components/steps/README.en-US.md');\nconst Affix = () => import('@web-vue/components/affix/README.zh-CN.md');\nconst AffixEn = () => import('@web-vue/components/affix/README.en-US.md');\nconst Anchor = () => import('@web-vue/components/anchor/README.zh-CN.md');\nconst AnchorEn = () => import('@web-vue/components/anchor/README.en-US.md');\nconst BackTop = () => import('@web-vue/components/back-top/README.zh-CN.md');\nconst BackTopEn = () => import('@web-vue/components/back-top/README.en-US.md');\nconst ConfigProvider = () =>\n  import('@web-vue/components/config-provider/README.zh-CN.md');\nconst ConfigProviderEn = () =>\n  import('@web-vue/components/config-provider/README.en-US.md');\nconst ResizeBox = () =>\n  import('@web-vue/components/resize-box/README.zh-CN.md');\nconst ResizeBoxEn = () =>\n  import('@web-vue/components/resize-box/README.en-US.md');\nconst Trigger = () => import('@web-vue/components/trigger/README.zh-CN.md');\nconst TriggerEn = () => import('@web-vue/components/trigger/README.en-US.md');\nconst Split = () => import('@web-vue/components/split/README.zh-CN.md');\nconst SplitEn = () => import('@web-vue/components/split/README.en-US.md');\nconst OverflowList = () =>\n  import('@web-vue/components/overflow-list/README.zh-CN.md');\nconst OverflowListEn = () =>\n  import('@web-vue/components/overflow-list/README.en-US.md');\nconst Scrollbar = () => import('@web-vue/components/scrollbar/README.zh-CN.md');\nconst ScrollbarEn = () =>\n  import('@web-vue/components/scrollbar/README.en-US.md');\nconst Watermark = () => import('@web-vue/components/watermark/README.zh-CN.md');\nconst WatermarkEn = () =>\n  import('@web-vue/components/watermark/README.en-US.md');\nconst VerificationCode = () =>\n  import('@web-vue/components/verification-code/README.zh-CN.md');\nconst VerificationCodeEn = () =>\n  import('@web-vue/components/verification-code/README.en-US.md');\nconst ColorPicker = () =>\n  import('@web-vue/components/color-picker/README.zh-CN.md');\nconst ColorPickerEn = () =>\n  import('@web-vue/components/color-picker/README.en-US.md');\n\nconst docs = [\n  {\n    name: 'start',\n    component: Start,\n    componentEn: StartEn,\n  },\n  {\n    name: 'dark',\n    component: Dark,\n    componentEn: DarkEn,\n  },\n  {\n    name: 'theme',\n    component: Theme,\n    componentEn: ThemeEn,\n  },\n  {\n    name: 'token',\n    component: () => import('./pages/token/token.vue'),\n  },\n  {\n    name: 'i18n',\n    component: I18n,\n    componentEn: I18nEn,\n  },\n  {\n    name: 'faq',\n    component: () => import('./docs/faq.zh-CN.md'),\n    componentEn: () => import('./docs/faq.en-US.md'),\n  },\n  {\n    name: 'changelog',\n    component: Changelog,\n  },\n];\n\nconst proDocs = [\n  {\n    name: 'start',\n    component: () => import('./docs/pro/start.zh-CN.md'),\n    componentEn: () => import('./docs/pro/start.en-US.md'),\n  },\n  {\n    name: 'npmScripts',\n    component: () => import('./docs/pro/npm-scripts.zh-CN.md'),\n    componentEn: () => import('./docs/pro/npm-scripts.en-US.md'),\n  },\n  {\n    name: 'directory',\n    component: () => import('./docs/pro/directory.zh-CN.md'),\n    componentEn: () => import('./docs/pro/directory.en-US.md'),\n  },\n  {\n    name: 'layout',\n    component: () => import('./docs/pro/layout.zh-CN.md'),\n    componentEn: () => import('./docs/pro/layout.en-US.md'),\n  },\n  {\n    name: 'routesAndMenu',\n    component: () => import('./docs/pro/routes-and-menu.zh-CN.md'),\n    componentEn: () => import('./docs/pro/routes-and-menu.en-US.md'),\n  },\n  {\n    name: 'permission',\n    component: () => import('./docs/pro/permission.zh-CN.md'),\n    componentEn: () => import('./docs/pro/permission.en-US.md'),\n  },\n  {\n    name: 'stateManagementPinia',\n    component: () => import('./docs/pro/state-management-pinia.zh-CN.md'),\n    componentEn: () => import('./docs/pro/state-management-pinia.en-US.md'),\n  },\n  {\n    name: 'stateManagement',\n    component: () => import('./docs/pro/state-management.zh-CN.md'),\n    componentEn: () => import('./docs/pro/state-management.en-US.md'),\n  },\n  {\n    name: 'i18n',\n    component: () => import('./docs/pro/i18n.zh-CN.md'),\n    componentEn: () => import('./docs/pro/i18n.en-US.md'),\n  },\n  {\n    name: 'mock',\n    component: () => import('./docs/pro/mock.zh-CN.md'),\n    componentEn: () => import('./docs/pro/mock.en-US.md'),\n  },\n  {\n    name: 'build',\n    component: () => import('./docs/pro/build.zh-CN.md'),\n    componentEn: () => import('./docs/pro/build.en-US.md'),\n  },\n  {\n    name: 'faq',\n    component: () => import('./docs/pro/faq.zh-CN.md'),\n    componentEn: () => import('./docs/pro/faq.en-US.md'),\n  },\n];\n\nconst components = [\n  {\n    name: 'common',\n    list: [\n      {\n        name: 'button',\n        component: Button,\n        componentEn: ButtonEn,\n      },\n      {\n        name: 'icon',\n        component: Icon,\n      },\n      {\n        name: 'link',\n        component: Link,\n        componentEn: LinkEn,\n      },\n      {\n        name: 'typography',\n        component: Typography,\n        componentEn: TypographyEn,\n      },\n    ],\n  },\n  {\n    name: 'layout',\n    list: [\n      {\n        name: 'divider',\n        component: Divider,\n        componentEn: DividerEn,\n      },\n      {\n        name: 'grid',\n        component: Grid,\n        componentEn: GridEn,\n      },\n      {\n        name: 'layout',\n        component: Layout,\n        componentEn: LayoutEn,\n      },\n      {\n        name: 'space',\n        component: Space,\n        componentEn: SpaceEn,\n      },\n    ],\n  },\n  {\n    name: 'dataDisplay',\n    list: [\n      {\n        name: 'avatar',\n        component: Avatar,\n        componentEn: AvatarEn,\n      },\n      {\n        name: 'badge',\n        component: Badge,\n        componentEn: BadgeEn,\n      },\n      {\n        name: 'calendar',\n        component: Calendar,\n        componentEn: CalendarEn,\n      },\n      {\n        name: 'card',\n        component: Card,\n        componentEn: CardEn,\n      },\n      {\n        name: 'carousel',\n        component: Carousel,\n        componentEn: CarouselEn,\n      },\n      {\n        name: 'collapse',\n        component: Collapse,\n        componentEn: CollapseEn,\n      },\n      {\n        name: 'comment',\n        component: Comment,\n        componentEn: CommentEn,\n      },\n      {\n        name: 'descriptions',\n        component: Descriptions,\n        componentEn: DescriptionsEn,\n      },\n      {\n        name: 'empty',\n        component: Empty,\n        componentEn: EmptyEn,\n      },\n      {\n        name: 'image',\n        component: Image,\n        componentEn: ImageEn,\n      },\n      {\n        name: 'list',\n        component: List,\n        componentEn: ListEn,\n      },\n      {\n        name: 'popover',\n        component: Popover,\n        componentEn: PopoverEn,\n      },\n      {\n        name: 'statistic',\n        component: Statistic,\n        componentEn: StatisticEn,\n      },\n      {\n        name: 'table',\n        component: Table,\n        componentEn: TableEn,\n      },\n      {\n        name: 'tabs',\n        component: Tabs,\n        componentEn: TabsEn,\n      },\n      {\n        name: 'tag',\n        component: Tag,\n        componentEn: TagEn,\n      },\n      {\n        name: 'timeline',\n        component: Timeline,\n        componentEn: TimelineEn,\n      },\n      {\n        name: 'tooltip',\n        component: Tooltip,\n        componentEn: TooltipEn,\n      },\n      {\n        name: 'tree',\n        component: Tree,\n        componentEn: TreeEn,\n      },\n    ],\n  },\n  {\n    name: 'dataEntry',\n    list: [\n      {\n        name: 'autoComplete',\n        component: AutoComplete,\n        componentEn: AutoCompleteEn,\n      },\n      {\n        name: 'cascader',\n        component: Cascader,\n        componentEn: CascaderEn,\n      },\n      {\n        name: 'checkbox',\n        component: Checkbox,\n        componentEn: CheckboxEn,\n      },\n      {\n        name: 'colorPicker',\n        component: ColorPicker,\n        componentEn: ColorPickerEn,\n      },\n      {\n        name: 'datePicker',\n        component: DatePicker,\n        componentEn: DatePickerEn,\n      },\n      {\n        name: 'form',\n        component: Form,\n        componentEn: FormEn,\n      },\n      {\n        name: 'input',\n        component: Input,\n        componentEn: InputEn,\n      },\n      {\n        name: 'inputNumber',\n        component: InputNumber,\n        componentEn: InputNumberEn,\n      },\n      {\n        name: 'verificationCode',\n        component: VerificationCode,\n        componentEn: VerificationCodeEn,\n      },\n      {\n        name: 'inputTag',\n        component: InputTag,\n        componentEn: InputTagEn,\n      },\n      {\n        name: 'mention',\n        component: Mention,\n        componentEn: MentionEn,\n      },\n      {\n        name: 'radio',\n        component: Radio,\n        componentEn: RadioEn,\n      },\n      {\n        name: 'rate',\n        component: Rate,\n        componentEn: RateEn,\n      },\n      {\n        name: 'select',\n        component: Select,\n        componentEn: SelectEn,\n      },\n      {\n        name: 'slider',\n        component: Slider,\n        componentEn: SliderEn,\n      },\n      {\n        name: 'switch',\n        component: Switch,\n        componentEn: SwitchEn,\n      },\n      {\n        name: 'textarea',\n        component: Textarea,\n        componentEn: TextareaEn,\n      },\n      {\n        name: 'timePicker',\n        component: TimePicker,\n        componentEn: TimePickerEn,\n      },\n      {\n        name: 'transfer',\n        component: Transfer,\n        componentEn: TransferEn,\n      },\n      {\n        name: 'treeSelect',\n        component: TreeSelect,\n        componentEn: TreeSelectEn,\n      },\n      {\n        name: 'upload',\n        component: Upload,\n        componentEn: UploadEn,\n      },\n    ],\n  },\n  {\n    name: 'feedback',\n    list: [\n      {\n        name: 'alert',\n        component: Alert,\n        componentEn: AlertEn,\n      },\n      {\n        name: 'drawer',\n        component: Drawer,\n        componentEn: DrawerEn,\n      },\n      {\n        name: 'message',\n        component: Message,\n        componentEn: MessageEn,\n      },\n      {\n        name: 'modal',\n        component: Modal,\n        componentEn: ModalEn,\n      },\n      {\n        name: 'notification',\n        component: Notification,\n        componentEn: NotificationEn,\n      },\n      {\n        name: 'popconfirm',\n        component: Popconfirm,\n        componentEn: PopconfirmEn,\n      },\n      {\n        name: 'progress',\n        component: Progress,\n        componentEn: ProgressEn,\n      },\n      {\n        name: 'result',\n        component: Result,\n        componentEn: ResultEn,\n      },\n      {\n        name: 'spin',\n        component: Spin,\n        componentEn: SpinEn,\n      },\n      {\n        name: 'skeleton',\n        component: Skeleton,\n        componentEn: SkeletonEn,\n      },\n    ],\n  },\n  {\n    name: 'navigation',\n    list: [\n      {\n        name: 'breadcrumb',\n        component: Breadcrumb,\n        componentEn: BreadcrumbEn,\n      },\n      {\n        name: 'dropdown',\n        component: Dropdown,\n        componentEn: DropdownEn,\n      },\n      {\n        name: 'menu',\n        component: Menu,\n        componentEn: MenuEn,\n      },\n      {\n        name: 'pageHeader',\n        component: PageHeader,\n        componentEn: PageHeaderEn,\n      },\n      {\n        name: 'pagination',\n        component: Pagination,\n        componentEn: PaginationEn,\n      },\n      {\n        name: 'steps',\n        component: Steps,\n        componentEn: StepsEn,\n      },\n    ],\n  },\n  {\n    name: 'other',\n    list: [\n      {\n        name: 'affix',\n        component: Affix,\n        componentEn: AffixEn,\n      },\n      {\n        name: 'anchor',\n        component: Anchor,\n        componentEn: AnchorEn,\n      },\n      {\n        name: 'backTop',\n        component: BackTop,\n        componentEn: BackTopEn,\n      },\n      {\n        name: 'configProvider',\n        component: ConfigProvider,\n        componentEn: ConfigProviderEn,\n      },\n      {\n        name: 'resizeBox',\n        component: ResizeBox,\n        componentEn: ResizeBoxEn,\n      },\n      {\n        name: 'trigger',\n        component: Trigger,\n        componentEn: TriggerEn,\n      },\n      {\n        name: 'split',\n        component: Split,\n        componentEn: SplitEn,\n      },\n      {\n        name: 'overflow',\n        component: OverflowList,\n        componentEn: OverflowListEn,\n      },\n      {\n        name: 'scrollbar',\n        component: Scrollbar,\n        componentEn: ScrollbarEn,\n      },\n      {\n        name: 'watermark',\n        component: Watermark,\n        componentEn: WatermarkEn,\n      },\n    ],\n  },\n];\n\nfunction toKebabCase(string: string) {\n  return string.replace(/[A-Z]+/g, (match, offset) => {\n    return `${offset > 0 ? '-' : ''}${match.toLocaleLowerCase()}`;\n  });\n}\n\ninterface ComponentMenuGroup {\n  name: string;\n  list: Array<{\n    name: string;\n    path: string;\n  }>;\n}\n\nconst routes: RouteRecordRaw[] = [];\n\nconst docsMenu = [];\nfor (const item of docs) {\n  const path = `/vue/docs/${toKebabCase(item.name)}`;\n  routes.push(\n    {\n      path,\n      component: item.component,\n    },\n    {\n      path: `/vue/en-US/docs/${toKebabCase(item.name)}`,\n      component: item.componentEn ?? item.component,\n    }\n  );\n  docsMenu.push({\n    name: item.name,\n    path,\n  });\n}\n\nconst componentMenu: ComponentMenuGroup[] = [];\nfor (const group of components) {\n  const menuGroup: ComponentMenuGroup = {\n    name: group.name,\n    list: [],\n  };\n  for (const item of group.list) {\n    const path = `/vue/component/${toKebabCase(item.name)}`;\n    routes.push(\n      {\n        path,\n        component: item.component,\n      },\n      {\n        path: `/vue/en-US/component/${toKebabCase(item.name)}`,\n        component: item.componentEn ?? item.component,\n      }\n    );\n    menuGroup.list.push({\n      name: item.name,\n      path,\n    });\n  }\n  componentMenu.push(menuGroup);\n}\n\nconst proDocsMenu: { path: string; name: string }[] = [];\nproDocs.forEach((item) => {\n  const path = `/vue/docs/pro/${toKebabCase(item.name)}`;\n  routes.push(\n    {\n      path,\n      component: item.component,\n    },\n    {\n      path: `/vue/en-US/docs/pro/${toKebabCase(item.name)}`,\n      component: item.componentEn ?? item.component,\n    }\n  );\n  proDocsMenu.push({\n    name: item.name,\n    path,\n  });\n});\n\n// Add redirects for unmatched routes at the end\nroutes.push({ path: '/vue/en-US', redirect: '/vue/en-US/docs/start' });\nroutes.push({ path: '/:pathMatch(.*)*', redirect: '/vue/docs/start' });\n\nnProgress.configure({ minimum: 0.4, showSpinner: false });\n\nconst router = createRouter({\n  history: createWebHistory(),\n  routes,\n  scrollBehavior(to, from, savedPosition) {\n    // Always scroll to the top\n    return { top: 0 };\n  },\n});\n\nrouter.beforeEach((to, from) => {\n  if (to.path !== from.path) {\n    nProgress.start();\n  }\n});\n\nrouter.afterEach(() => {\n  nProgress.done();\n});\n\nconst docsMenuList = [\n  {\n    name: 'docs',\n    menu: docsMenu,\n  },\n  {\n    name: 'proDocs',\n    menu: proDocsMenu,\n  },\n];\n\nexport { docsMenu, componentMenu, proDocsMenu, docsMenuList };\nexport default router;\n"
  },
  {
    "path": "packages/arco-vue-docs/style/demo.less",
    "content": ""
  },
  {
    "path": "packages/arco-vue-docs/style/index.less",
    "content": "@import '../../web-vue/components/style/index.less';\n@import './demo.less';\n\n.arco-vue-site {\n  color: var(--color-text-2);\n  font-size: 14px;\n  background-color: var(--color-bg-1);\n\n  h1,\n  h2,\n  h3,\n  h4 {\n    color: var(--color-text-1);\n    font-weight: 500;\n  }\n\n  .arco-vue-body {\n    padding-top: 61px;\n  }\n\n  .site-backtop-btn {\n    background: var(--color-bg-5) !important;\n    border: 1px solid var(--color-fill-3) !important;\n    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);\n  }\n\n  .link {\n    color: rgb(var(--arcoblue-6));\n    text-decoration: none;\n  }\n\n  .arco-vue-body-has-notice {\n    padding-top: 99px;\n\n    .arco-vue-aside-left,\n    .arco-vue-aside {\n      top: 99px;\n    }\n  }\n\n  .site-global-notice {\n    position: fixed;\n    top: 60px;\n    z-index: 980;\n    display: flex;\n    justify-content: center;\n    height: 32px;\n    color: var(--color-white);\n    line-height: 32px;\n    background-color: rgb(var(--blue-6));\n\n    .arco-alert-body {\n      display: flex;\n      justify-content: center;\n\n      .arco-alert-content a {\n        color: var(--color-white);\n        text-decoration: none;\n\n        .content {\n          margin-right: 48px;\n          margin-left: 36px;\n          font-size: 13px;\n        }\n      }\n    }\n\n    .arco-alert-close-btn {\n      width: 20px;\n      height: 20px;\n      color: var(--color-white);\n      line-height: 20px;\n      text-align: center;\n      border-radius: 4px;\n\n      & .arco-icon-hover:hover::before {\n        background-color: hsla(0, 0%, 100%, 0.3);\n      }\n    }\n  }\n}\n\n.token.operator,\n.token.entity,\n.token.url,\n.language-css .token.string,\n.style .token.string {\n  background: none !important;\n}\n\n#nprogress .bar {\n  background: rgb(var(--arcoblue-6));\n}\n\n#nprogress .peg {\n  box-shadow: 0 0 10px rgb(var(--arcoblue-6)), 0 0 5px rgb(var(--arcoblue-6));\n}\n\ncode[class*='language-'],\npre[class*='language-'] {\n  text-shadow: none !important;\n}\n"
  },
  {
    "path": "packages/arco-vue-docs/tsconfig.json",
    "content": "{\n  \"compilerOptions\": {\n    \"module\": \"ES2020\",\n    \"moduleResolution\": \"node\",\n    \"allowJs\": true,\n    \"strict\": true,\n    \"isolatedModules\": true,\n    \"esModuleInterop\": true,\n    \"resolveJsonModule\": true,\n    \"jsx\": \"preserve\",\n    \"baseUrl\": \".\",\n    \"paths\": {\n      \"@web-vue/*\": [\n        \"../web-vue/*\"\n      ]\n    }\n  }\n}\n"
  },
  {
    "path": "packages/arco-vue-docs/utils/api.ts",
    "content": "// @ts-ignore\nconst arcoConfig = window.arcoConfig || {};\n\nexport const hostname =\n  window.location.hostname !== arcoConfig.externalHostName &&\n  window.location.hostname !== arcoConfig.internalHostName\n    ? arcoConfig.externalHostName\n    : window.location.hostname;\n\nexport const isExternal =\n  window.location.hostname === arcoConfig.externalHostName;\nexport const apiBasename = `https://${hostname || 'arco.design'}`;\n"
  },
  {
    "path": "packages/arco-vue-docs/utils/clipboard.ts",
    "content": "// https://github.com/feross/clipboard-copy/blob/master/index.js\n\nexport default function clipboard(text: string) {\n  if (navigator.clipboard && navigator.clipboard.writeText) {\n    return navigator.clipboard.writeText(text).catch((err) => {\n      throw err !== undefined\n        ? err\n        : new DOMException('The request is not allowed', 'NotAllowedError');\n    });\n  }\n\n  const span = document.createElement('span');\n  span.textContent = text;\n\n  span.style.whiteSpace = 'pre';\n\n  document.body.appendChild(span);\n\n  const selection = window.getSelection();\n  const range = window.document.createRange();\n  selection?.removeAllRanges();\n  range.selectNode(span);\n  selection?.addRange(range);\n\n  let success = false;\n  try {\n    success = window.document.execCommand('copy');\n  } catch (err) {\n    // eslint-disable-next-line\n    console.log('error', err);\n  }\n\n  selection?.removeAllRanges();\n  window.document.body.removeChild(span);\n\n  return success\n    ? Promise.resolve()\n    : Promise.reject(\n        new DOMException('The request is not allowed', 'NotAllowedError')\n      );\n}\n"
  },
  {
    "path": "packages/arco-vue-docs/utils/code-sandbox.ts",
    "content": "import { getParameters } from 'codesandbox/lib/api/define';\nimport { mainContent, styleContent } from './code-template';\n\nconst babelContent = `module.exports = {\n  presets: [\n    '@vue/cli-plugin-babel/preset'\n  ]\n}\n`;\n\nconst sendPost = (parameters: string) => {\n  const form = document.createElement('form');\n  form.action = 'https://codesandbox.io/api/v1/sandboxes/define';\n  form.target = '_blank';\n  form.method = 'POST';\n  form.style.display = 'none';\n  const field = document.createElement('input');\n  field.name = 'parameters';\n  field.type = 'hidden';\n  field.value = parameters;\n  form.appendChild(field);\n  const query = document.createElement('input');\n  query.name = 'query';\n  query.type = 'hidden';\n  query.value = 'file=/src/App.vue';\n  form.appendChild(query);\n  document.body.appendChild(form);\n  form.submit();\n  document.body.removeChild(form);\n};\n\nexport const openCodeSandbox = (content: string) => {\n  const parameters = getParameters({\n    files: {\n      'package.json': {\n        // @ts-ignore\n        content: {\n          dependencies: {\n            'vue': '^3.2.0',\n            'dayjs': '^1.0',\n            '@arco-design/web-vue': 'latest',\n          },\n          devDependencies: {\n            '@vue/cli-plugin-babel': '^5.0',\n            '@vue/cli-service': '^5.0',\n            '@vue/compiler-sfc': '^3.2.0',\n          },\n        },\n      },\n      // @ts-ignore\n      'babel.config.js': {\n        content: babelContent,\n      },\n      // @ts-ignore\n      'src/style.css': {\n        content: styleContent,\n      },\n      // @ts-ignore\n      'src/main.js': {\n        content: mainContent,\n      },\n      // @ts-ignore\n      'src/App.vue': {\n        content,\n      },\n    },\n  });\n\n  sendPost(parameters);\n};\n"
  },
  {
    "path": "packages/arco-vue-docs/utils/code-stackblitz.ts",
    "content": "import stackblitz from '@stackblitz/sdk';\nimport { mainContent, styleContent } from './code-template';\n\nexport const htmlContent = `\n  <div id=\"app\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n`;\n\nexport const stackblitzRc = `\n  {\n    \"installDependencies\": false,\n    \"startCommand\": \"turbo && turbo dev\"\n  }\n`;\n\nexport const viteConfigContent = `\n  import { defineConfig } from 'vite';\n  import vue from '@vitejs/plugin-vue';\n  import vueJsx from '@vitejs/plugin-vue-jsx';\n  export default defineConfig({\n    plugins: [vue(), vueJsx()],\n  });\n`;\n\nexport const packageJSONContent = JSON.stringify(\n  {\n    name: 'arco-vue-demo',\n    version: '0.0.0',\n    private: true,\n    scripts: {\n      dev: 'vite',\n      build: 'vite build',\n      serve: 'vite preview',\n    },\n    dependencies: {\n      'vue': '^3.2.0',\n      'dayjs': '^1.0',\n      '@arco-design/web-vue': 'latest',\n    },\n    devDependencies: {\n      'vite': '^2.9.8',\n      '@vitejs/plugin-vue': '^2.3.2',\n      '@vitejs/plugin-vue-jsx': '^1.3.10',\n    },\n  },\n  null,\n  2\n);\n\nexport const openStackblitz = (content: string) => {\n  stackblitz.openProject(\n    {\n      title: `arco-design-demo`,\n      description: 'arco-design-demo',\n      template: 'node',\n      files: {\n        'src/App.vue': content,\n        'src/style.css': styleContent,\n        'src/main.js': mainContent,\n        'index.html': htmlContent,\n        'package.json': packageJSONContent,\n        'vite.config.js': viteConfigContent,\n        '.stackblitzrc': stackblitzRc,\n      },\n    },\n    {\n      openFile: 'src/App.vue',\n    }\n  );\n};\n"
  },
  {
    "path": "packages/arco-vue-docs/utils/code-template.ts",
    "content": "export const mainContent = `import { createApp } from 'vue';\nimport ArcoVue from '@arco-design/web-vue';\nimport App from './App.vue';\nimport '@arco-design/web-vue/dist/arco.css';\nimport './style.css';\n\nconst app = createApp(App);\napp.use(ArcoVue);\napp.mount('#app');`;\n\nexport const styleContent = `#app { padding: 20px; }`;\n"
  },
  {
    "path": "packages/arco-vue-docs/utils/codepen.ts",
    "content": "const CSS_EXTERNAL = [\n  'https://unpkg.com/@arco-design/web-vue@2.x/dist/arco.css',\n];\nconst JS_EXTERNAL = [\n  'https://unpkg.com/vue@3.x/dist/vue.global.prod.js',\n  'https://unpkg.com/dayjs@1.x/dayjs.min.js',\n  'https://unpkg.com/@arco-design/web-vue@2.x/dist/arco-vue.min.js',\n  'https://unpkg.com/@arco-design/web-vue@2.x/dist/arco-vue-icon.min.js',\n];\n\nconst parseContent = (content: string) => {\n  const htmlContent = content.match(/<template>(.*)<\\/template>/s)?.[1] ?? '';\n  let jsContent = content.match(/<script.*?>(.*)<\\/script>/s)?.[1] ?? '';\n  let css = content.match(/<style.*?>(.*)<\\/style>/s)?.[1] ?? '';\n\n  jsContent = jsContent\n    .replace(/import (.*?) from '(.*?)'/gs, (match, p1, p2) => {\n      switch (p2) {\n        case 'vue':\n          p2 = 'window.Vue';\n          break;\n        case '@arco-design/web-vue':\n          p2 = 'window.ArcoVue';\n          break;\n        case '@arco-design/web-vue/es/icon':\n          p2 = 'window.ArcoVueIcon';\n          break;\n        default:\n      }\n      return `const ${p1} = ${p2}`;\n    })\n    .replace(/export default (.*)/s, 'const Main = $1');\n\n  const html = `<div id=\"root\" style=\"padding: 20px;\">${htmlContent}</div>\\n`;\n  const js = `${\n    jsContent || 'const Main = {};'\n  }\\nconst app = Vue.createApp(Main);\\napp.use(window.ArcoVue);\\napp.use(window.ArcoVueIcon);\\napp.mount('#root');`;\n\n  css = css.replace(/:deep\\((.+?)\\)/g, (_, p1) => p1);\n\n  return {\n    html,\n    js,\n    css,\n  };\n};\n\nconst post = (data) => {\n  const form = document.createElement('form');\n  form.action = 'https://codepen.io/pen/define';\n  form.target = '_blank';\n  form.method = 'POST';\n  form.style.display = 'none';\n  const field = document.createElement('input');\n  field.name = 'data';\n  field.type = 'hidden';\n  field.setAttribute(\n    'value',\n    JSON.stringify(data).replace(/\"/g, '&quot;').replace(/'/g, '&apos;')\n  );\n  form.appendChild(field);\n  document.body.appendChild(form);\n  form.submit();\n  document.body.removeChild(form);\n};\n\nexport const gotoCodepen = (content: string) => {\n  const { html, js, css } = parseContent(content);\n\n  const data = {\n    title: 'Arco Vue Code Pen',\n    html,\n    js,\n    css,\n    js_pre_processor: 'typescript',\n    css_external: CSS_EXTERNAL.join(';'),\n    js_external: JS_EXTERNAL.join(';'),\n    editors: '001',\n  };\n\n  post(data);\n};\n"
  },
  {
    "path": "packages/arco-vue-docs/utils/join-chart.ts",
    "content": "import axios from 'axios';\nimport { Message } from '@web-vue/components/index';\n\nexport default function joinChat() {\n  if (!window.user) {\n    Message.error({ content: '请先登陆' });\n    return;\n  }\n  axios\n    .get(`/api/oncall/joinChat?email=${window.user?.email}`)\n    .then((res) => {\n      if (res.data.status === 'success') {\n        const aLink = document.createElement('a');\n        aLink.href = ''; // lark link\n        aLink.click();\n      }\n    })\n    .catch((err) => {\n      console.error(err); // eslint-disable-line\n      Message.error({ content: '未知错误，请重试！' });\n    });\n}\n"
  },
  {
    "path": "packages/arco-vue-docs/utils/local-storage.ts",
    "content": "export const getLocalStorage = <T = string>(\n  name: string,\n  isJson?: boolean\n): T | string | null => {\n  try {\n    const value = localStorage.getItem(name);\n    if (value && isJson) {\n      return JSON.parse(value) as T;\n    }\n    return value;\n  } catch {\n    return null;\n  }\n};\n\nexport const setLocalStorage = (name: string, value: any): void => {\n  try {\n    if (typeof value !== 'string') {\n      value = JSON.stringify(value);\n    }\n    localStorage.setItem(name, value);\n  } catch {}\n};\n\nexport const removeLocalStorage = (name: string) => {\n  try {\n    localStorage.removeItem(name);\n  } catch {}\n};\n"
  },
  {
    "path": "packages/arco-vue-docs/utils/login.ts",
    "content": "import axios from 'axios';\n\n// @ts-ignore\nconst isProduction = import.meta.env.PROD;\n\nexport async function checkLogin() {\n  if (!isProduction) {\n    window.isLogin = true;\n    window.user = {\n      email: 'xiaoming@bytedance.com',\n      nickname: '小明',\n      picture:\n        'https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/fbbdefc1702398f2f394c57270f7f727.png~tplv-uwbnlip3yd-png.png',\n      username: 'xiaoming',\n    };\n  } else {\n    if (!window.isLogin) {\n      try {\n        const { data } = await axios.get('/common/api/auth/userInfo', {\n          withCredentials: true,\n        });\n        window.isLogin = true;\n        window.user = data.result;\n      } catch {\n        window.isLogin = false;\n      }\n    }\n    try {\n      const appId = /arco\\.design/.test(window.location.href) ? 4374 : 263440;\n\n      window.collectEvent('init', {\n        app_id: appId,\n        channel: 'cn',\n      });\n      window.collectEvent('config', {\n        evtParams: {\n          site: 'ArcoDesignVue',\n        },\n      });\n      window.collectEvent('start');\n    } catch {}\n  }\n}\n"
  },
  {
    "path": "packages/arco-vue-docs/utils/strings.ts",
    "content": "export const strEndsWith = (str: string, search: string) => {\n  return str.substring(str.length - search.length, str.length) === search;\n};\n\nexport const strIncludes = (str: string, search: string, start = 0) => {\n  if (start + search.length > str.length) {\n    return false;\n  }\n  return str.indexOf(search, start) !== -1;\n};\n"
  },
  {
    "path": "packages/arco-vue-docs-navbar/.eslintignore",
    "content": "dist/*\n/*.json\n/*.js\n/*.ts\n"
  },
  {
    "path": "packages/arco-vue-docs-navbar/.gitignore",
    "content": ".idea/\n.vscode/\n\nnode_modules/\n**/.DS_Store\n"
  },
  {
    "path": "packages/arco-vue-docs-navbar/README.md",
    "content": "# `@arco-design/arco-vue-site-nav`\n\nWIP: Will be removed in the future\n\nArco Design Vue Docs Navbar (from React Material)\n"
  },
  {
    "path": "packages/arco-vue-docs-navbar/dist/index.d.ts",
    "content": "import './index.less';\nimport './navbar.css';\ninterface NavBarOptions {\n    version?: string;\n    lang?: string;\n    handleLanguageChange?: (lang: string) => void;\n}\ndeclare const renderNavBar: (options?: NavBarOptions | undefined) => void;\nexport default renderNavBar;\n"
  },
  {
    "path": "packages/arco-vue-docs-navbar/dist/index.js",
    "content": "var __defProp = Object.defineProperty;\nvar __defProps = Object.defineProperties;\nvar __getOwnPropDescs = Object.getOwnPropertyDescriptors;\nvar __getOwnPropSymbols = Object.getOwnPropertySymbols;\nvar __hasOwnProp = Object.prototype.hasOwnProperty;\nvar __propIsEnum = Object.prototype.propertyIsEnumerable;\nvar __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;\nvar __spreadValues = (a, b) => {\n  for (var prop in b || (b = {}))\n    if (__hasOwnProp.call(b, prop))\n      __defNormalProp(a, prop, b[prop]);\n  if (__getOwnPropSymbols)\n    for (var prop of __getOwnPropSymbols(b)) {\n      if (__propIsEnum.call(b, prop))\n        __defNormalProp(a, prop, b[prop]);\n    }\n  return a;\n};\nvar __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));\nvar __objRest = (source2, exclude) => {\n  var target2 = {};\n  for (var prop in source2)\n    if (__hasOwnProp.call(source2, prop) && exclude.indexOf(prop) < 0)\n      target2[prop] = source2[prop];\n  if (source2 != null && __getOwnPropSymbols)\n    for (var prop of __getOwnPropSymbols(source2)) {\n      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source2, prop))\n        target2[prop] = source2[prop];\n    }\n  return target2;\n};\nvar commonjsGlobal = typeof globalThis !== \"undefined\" ? globalThis : typeof window !== \"undefined\" ? window : typeof global !== \"undefined\" ? global : typeof self !== \"undefined\" ? self : {};\nvar react = { exports: {} };\nvar react_production_min = {};\n/*\nobject-assign\n(c) Sindre Sorhus\n@license MIT\n*/\nvar getOwnPropertySymbols = Object.getOwnPropertySymbols;\nvar hasOwnProperty$4 = Object.prototype.hasOwnProperty;\nvar propIsEnumerable = Object.prototype.propertyIsEnumerable;\nfunction toObject(val) {\n  if (val === null || val === void 0) {\n    throw new TypeError(\"Object.assign cannot be called with null or undefined\");\n  }\n  return Object(val);\n}\nfunction shouldUseNative() {\n  try {\n    if (!Object.assign) {\n      return false;\n    }\n    var test1 = new String(\"abc\");\n    test1[5] = \"de\";\n    if (Object.getOwnPropertyNames(test1)[0] === \"5\") {\n      return false;\n    }\n    var test2 = {};\n    for (var i = 0; i < 10; i++) {\n      test2[\"_\" + String.fromCharCode(i)] = i;\n    }\n    var order2 = Object.getOwnPropertyNames(test2).map(function(n2) {\n      return test2[n2];\n    });\n    if (order2.join(\"\") !== \"0123456789\") {\n      return false;\n    }\n    var test3 = {};\n    \"abcdefghijklmnopqrst\".split(\"\").forEach(function(letter) {\n      test3[letter] = letter;\n    });\n    if (Object.keys(Object.assign({}, test3)).join(\"\") !== \"abcdefghijklmnopqrst\") {\n      return false;\n    }\n    return true;\n  } catch (err) {\n    return false;\n  }\n}\nvar objectAssign = shouldUseNative() ? Object.assign : function(target2, source2) {\n  var from;\n  var to = toObject(target2);\n  var symbols;\n  for (var s = 1; s < arguments.length; s++) {\n    from = Object(arguments[s]);\n    for (var key in from) {\n      if (hasOwnProperty$4.call(from, key)) {\n        to[key] = from[key];\n      }\n    }\n    if (getOwnPropertySymbols) {\n      symbols = getOwnPropertySymbols(from);\n      for (var i = 0; i < symbols.length; i++) {\n        if (propIsEnumerable.call(from, symbols[i])) {\n          to[symbols[i]] = from[symbols[i]];\n        }\n      }\n    }\n  }\n  return to;\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 */\nvar l = objectAssign, n = 60103, p = 60106;\nreact_production_min.Fragment = 60107;\nreact_production_min.StrictMode = 60108;\nreact_production_min.Profiler = 60114;\nvar q = 60109, r$1 = 60110, t = 60112;\nreact_production_min.Suspense = 60113;\nvar u = 60115, v = 60116;\nif (typeof Symbol === \"function\" && Symbol.for) {\n  var w = Symbol.for;\n  n = w(\"react.element\");\n  p = w(\"react.portal\");\n  react_production_min.Fragment = w(\"react.fragment\");\n  react_production_min.StrictMode = w(\"react.strict_mode\");\n  react_production_min.Profiler = w(\"react.profiler\");\n  q = w(\"react.provider\");\n  r$1 = w(\"react.context\");\n  t = w(\"react.forward_ref\");\n  react_production_min.Suspense = w(\"react.suspense\");\n  u = w(\"react.memo\");\n  v = w(\"react.lazy\");\n}\nvar x = typeof Symbol === \"function\" && Symbol.iterator;\nfunction y$1(a) {\n  if (a === null || typeof a !== \"object\")\n    return null;\n  a = x && a[x] || a[\"@@iterator\"];\n  return typeof a === \"function\" ? a : null;\n}\nfunction z(a) {\n  for (var b = \"https://reactjs.org/docs/error-decoder.html?invariant=\" + a, c = 1; c < arguments.length; c++)\n    b += \"&args[]=\" + encodeURIComponent(arguments[c]);\n  return \"Minified React error #\" + a + \"; visit \" + b + \" for the full message or use the non-minified dev environment for full errors and additional helpful warnings.\";\n}\nvar A = { isMounted: function() {\n  return false;\n}, enqueueForceUpdate: function() {\n}, enqueueReplaceState: function() {\n}, enqueueSetState: function() {\n} }, B$1 = {};\nfunction C(a, b, c) {\n  this.props = a;\n  this.context = b;\n  this.refs = B$1;\n  this.updater = c || A;\n}\nC.prototype.isReactComponent = {};\nC.prototype.setState = function(a, b) {\n  if (typeof a !== \"object\" && typeof a !== \"function\" && a != null)\n    throw Error(z(85));\n  this.updater.enqueueSetState(this, a, b, \"setState\");\n};\nC.prototype.forceUpdate = function(a) {\n  this.updater.enqueueForceUpdate(this, a, \"forceUpdate\");\n};\nfunction D$1() {\n}\nD$1.prototype = C.prototype;\nfunction E$1(a, b, c) {\n  this.props = a;\n  this.context = b;\n  this.refs = B$1;\n  this.updater = c || A;\n}\nvar F$1 = E$1.prototype = new D$1();\nF$1.constructor = E$1;\nl(F$1, C.prototype);\nF$1.isPureReactComponent = true;\nvar G$1 = { current: null }, H$1 = Object.prototype.hasOwnProperty, I$1 = { key: true, ref: true, __self: true, __source: true };\nfunction J(a, b, c) {\n  var e, d = {}, k = null, h = null;\n  if (b != null)\n    for (e in b.ref !== void 0 && (h = b.ref), b.key !== void 0 && (k = \"\" + b.key), b)\n      H$1.call(b, e) && !I$1.hasOwnProperty(e) && (d[e] = b[e]);\n  var g = arguments.length - 2;\n  if (g === 1)\n    d.children = c;\n  else if (1 < g) {\n    for (var f = Array(g), m2 = 0; m2 < g; m2++)\n      f[m2] = arguments[m2 + 2];\n    d.children = f;\n  }\n  if (a && a.defaultProps)\n    for (e in g = a.defaultProps, g)\n      d[e] === void 0 && (d[e] = g[e]);\n  return { $$typeof: n, type: a, key: k, ref: h, props: d, _owner: G$1.current };\n}\nfunction K(a, b) {\n  return { $$typeof: n, type: a.type, key: b, ref: a.ref, props: a.props, _owner: a._owner };\n}\nfunction L(a) {\n  return typeof a === \"object\" && a !== null && a.$$typeof === n;\n}\nfunction escape(a) {\n  var b = { \"=\": \"=0\", \":\": \"=2\" };\n  return \"$\" + a.replace(/[=:]/g, function(a2) {\n    return b[a2];\n  });\n}\nvar M$1 = /\\/+/g;\nfunction N$1(a, b) {\n  return typeof a === \"object\" && a !== null && a.key != null ? escape(\"\" + a.key) : b.toString(36);\n}\nfunction O$1(a, b, c, e, d) {\n  var k = typeof a;\n  if (k === \"undefined\" || k === \"boolean\")\n    a = null;\n  var h = false;\n  if (a === null)\n    h = true;\n  else\n    switch (k) {\n      case \"string\":\n      case \"number\":\n        h = true;\n        break;\n      case \"object\":\n        switch (a.$$typeof) {\n          case n:\n          case p:\n            h = true;\n        }\n    }\n  if (h)\n    return h = a, d = d(h), a = e === \"\" ? \".\" + N$1(h, 0) : e, Array.isArray(d) ? (c = \"\", a != null && (c = a.replace(M$1, \"$&/\") + \"/\"), O$1(d, b, c, \"\", function(a2) {\n      return a2;\n    })) : d != null && (L(d) && (d = K(d, c + (!d.key || h && h.key === d.key ? \"\" : (\"\" + d.key).replace(M$1, \"$&/\") + \"/\") + a)), b.push(d)), 1;\n  h = 0;\n  e = e === \"\" ? \".\" : e + \":\";\n  if (Array.isArray(a))\n    for (var g = 0; g < a.length; g++) {\n      k = a[g];\n      var f = e + N$1(k, g);\n      h += O$1(k, b, c, f, d);\n    }\n  else if (f = y$1(a), typeof f === \"function\")\n    for (a = f.call(a), g = 0; !(k = a.next()).done; )\n      k = k.value, f = e + N$1(k, g++), h += O$1(k, b, c, f, d);\n  else if (k === \"object\")\n    throw b = \"\" + a, Error(z(31, b === \"[object Object]\" ? \"object with keys {\" + Object.keys(a).join(\", \") + \"}\" : b));\n  return h;\n}\nfunction P$1(a, b, c) {\n  if (a == null)\n    return a;\n  var e = [], d = 0;\n  O$1(a, e, \"\", \"\", function(a2) {\n    return b.call(c, a2, d++);\n  });\n  return e;\n}\nfunction Q(a) {\n  if (a._status === -1) {\n    var b = a._result;\n    b = b();\n    a._status = 0;\n    a._result = b;\n    b.then(function(b2) {\n      a._status === 0 && (b2 = b2.default, a._status = 1, a._result = b2);\n    }, function(b2) {\n      a._status === 0 && (a._status = 2, a._result = b2);\n    });\n  }\n  if (a._status === 1)\n    return a._result;\n  throw a._result;\n}\nvar R$1 = { current: null };\nfunction S$1() {\n  var a = R$1.current;\n  if (a === null)\n    throw Error(z(321));\n  return a;\n}\nvar T$1 = { ReactCurrentDispatcher: R$1, ReactCurrentBatchConfig: { transition: 0 }, ReactCurrentOwner: G$1, IsSomeRendererActing: { current: false }, assign: l };\nreact_production_min.Children = { map: P$1, forEach: function(a, b, c) {\n  P$1(a, function() {\n    b.apply(this, arguments);\n  }, c);\n}, count: function(a) {\n  var b = 0;\n  P$1(a, function() {\n    b++;\n  });\n  return b;\n}, toArray: function(a) {\n  return P$1(a, function(a2) {\n    return a2;\n  }) || [];\n}, only: function(a) {\n  if (!L(a))\n    throw Error(z(143));\n  return a;\n} };\nreact_production_min.Component = C;\nreact_production_min.PureComponent = E$1;\nreact_production_min.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = T$1;\nreact_production_min.cloneElement = function(a, b, c) {\n  if (a === null || a === void 0)\n    throw Error(z(267, a));\n  var e = l({}, a.props), d = a.key, k = a.ref, h = a._owner;\n  if (b != null) {\n    b.ref !== void 0 && (k = b.ref, h = G$1.current);\n    b.key !== void 0 && (d = \"\" + b.key);\n    if (a.type && a.type.defaultProps)\n      var g = a.type.defaultProps;\n    for (f in b)\n      H$1.call(b, f) && !I$1.hasOwnProperty(f) && (e[f] = b[f] === void 0 && g !== void 0 ? g[f] : b[f]);\n  }\n  var f = arguments.length - 2;\n  if (f === 1)\n    e.children = c;\n  else if (1 < f) {\n    g = Array(f);\n    for (var m2 = 0; m2 < f; m2++)\n      g[m2] = arguments[m2 + 2];\n    e.children = g;\n  }\n  return {\n    $$typeof: n,\n    type: a.type,\n    key: d,\n    ref: k,\n    props: e,\n    _owner: h\n  };\n};\nreact_production_min.createContext = function(a, b) {\n  b === void 0 && (b = null);\n  a = { $$typeof: r$1, _calculateChangedBits: b, _currentValue: a, _currentValue2: a, _threadCount: 0, Provider: null, Consumer: null };\n  a.Provider = { $$typeof: q, _context: a };\n  return a.Consumer = a;\n};\nreact_production_min.createElement = J;\nreact_production_min.createFactory = function(a) {\n  var b = J.bind(null, a);\n  b.type = a;\n  return b;\n};\nreact_production_min.createRef = function() {\n  return { current: null };\n};\nreact_production_min.forwardRef = function(a) {\n  return { $$typeof: t, render: a };\n};\nreact_production_min.isValidElement = L;\nreact_production_min.lazy = function(a) {\n  return { $$typeof: v, _payload: { _status: -1, _result: a }, _init: Q };\n};\nreact_production_min.memo = function(a, b) {\n  return { $$typeof: u, type: a, compare: b === void 0 ? null : b };\n};\nreact_production_min.useCallback = function(a, b) {\n  return S$1().useCallback(a, b);\n};\nreact_production_min.useContext = function(a, b) {\n  return S$1().useContext(a, b);\n};\nreact_production_min.useDebugValue = function() {\n};\nreact_production_min.useEffect = function(a, b) {\n  return S$1().useEffect(a, b);\n};\nreact_production_min.useImperativeHandle = function(a, b, c) {\n  return S$1().useImperativeHandle(a, b, c);\n};\nreact_production_min.useLayoutEffect = function(a, b) {\n  return S$1().useLayoutEffect(a, b);\n};\nreact_production_min.useMemo = function(a, b) {\n  return S$1().useMemo(a, b);\n};\nreact_production_min.useReducer = function(a, b, c) {\n  return S$1().useReducer(a, b, c);\n};\nreact_production_min.useRef = function(a) {\n  return S$1().useRef(a);\n};\nreact_production_min.useState = function(a) {\n  return S$1().useState(a);\n};\nreact_production_min.version = \"17.0.2\";\n{\n  react.exports = react_production_min;\n}\nvar React = react.exports;\nvar reactDom = { exports: {} };\nvar reactDom_production_min = {};\nvar scheduler = { exports: {} };\nvar scheduler_production_min = {};\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(function(exports) {\n  var f, g, h, k;\n  if (typeof performance === \"object\" && typeof performance.now === \"function\") {\n    var l2 = performance;\n    exports.unstable_now = function() {\n      return l2.now();\n    };\n  } else {\n    var p2 = Date, q2 = p2.now();\n    exports.unstable_now = function() {\n      return p2.now() - q2;\n    };\n  }\n  if (typeof window === \"undefined\" || typeof MessageChannel !== \"function\") {\n    var t2 = null, u2 = null, w = function() {\n      if (t2 !== null)\n        try {\n          var a = exports.unstable_now();\n          t2(true, a);\n          t2 = null;\n        } catch (b) {\n          throw setTimeout(w, 0), b;\n        }\n    };\n    f = function(a) {\n      t2 !== null ? setTimeout(f, 0, a) : (t2 = a, setTimeout(w, 0));\n    };\n    g = function(a, b) {\n      u2 = setTimeout(a, b);\n    };\n    h = function() {\n      clearTimeout(u2);\n    };\n    exports.unstable_shouldYield = function() {\n      return false;\n    };\n    k = exports.unstable_forceFrameRate = function() {\n    };\n  } else {\n    var x2 = window.setTimeout, y2 = window.clearTimeout;\n    if (typeof console !== \"undefined\") {\n      var z2 = window.cancelAnimationFrame;\n      typeof window.requestAnimationFrame !== \"function\" && console.error(\"This browser doesn't support requestAnimationFrame. Make sure that you load a polyfill in older browsers. https://reactjs.org/link/react-polyfills\");\n      typeof z2 !== \"function\" && console.error(\"This browser doesn't support cancelAnimationFrame. Make sure that you load a polyfill in older browsers. https://reactjs.org/link/react-polyfills\");\n    }\n    var A2 = false, B2 = null, C2 = -1, D2 = 5, E = 0;\n    exports.unstable_shouldYield = function() {\n      return exports.unstable_now() >= E;\n    };\n    k = function() {\n    };\n    exports.unstable_forceFrameRate = function(a) {\n      0 > a || 125 < a ? console.error(\"forceFrameRate takes a positive int between 0 and 125, forcing frame rates higher than 125 fps is not supported\") : D2 = 0 < a ? Math.floor(1e3 / a) : 5;\n    };\n    var F2 = new MessageChannel(), G2 = F2.port2;\n    F2.port1.onmessage = function() {\n      if (B2 !== null) {\n        var a = exports.unstable_now();\n        E = a + D2;\n        try {\n          B2(true, a) ? G2.postMessage(null) : (A2 = false, B2 = null);\n        } catch (b) {\n          throw G2.postMessage(null), b;\n        }\n      } else\n        A2 = false;\n    };\n    f = function(a) {\n      B2 = a;\n      A2 || (A2 = true, G2.postMessage(null));\n    };\n    g = function(a, b) {\n      C2 = x2(function() {\n        a(exports.unstable_now());\n      }, b);\n    };\n    h = function() {\n      y2(C2);\n      C2 = -1;\n    };\n  }\n  function H2(a, b) {\n    var c = a.length;\n    a.push(b);\n    a:\n      for (; ; ) {\n        var d = c - 1 >>> 1, e = a[d];\n        if (e !== void 0 && 0 < I2(e, b))\n          a[d] = b, a[c] = e, c = d;\n        else\n          break a;\n      }\n  }\n  function J2(a) {\n    a = a[0];\n    return a === void 0 ? null : a;\n  }\n  function K2(a) {\n    var b = a[0];\n    if (b !== void 0) {\n      var c = a.pop();\n      if (c !== b) {\n        a[0] = c;\n        a:\n          for (var d = 0, e = a.length; d < e; ) {\n            var m2 = 2 * (d + 1) - 1, n2 = a[m2], v2 = m2 + 1, r2 = a[v2];\n            if (n2 !== void 0 && 0 > I2(n2, c))\n              r2 !== void 0 && 0 > I2(r2, n2) ? (a[d] = r2, a[v2] = c, d = v2) : (a[d] = n2, a[m2] = c, d = m2);\n            else if (r2 !== void 0 && 0 > I2(r2, c))\n              a[d] = r2, a[v2] = c, d = v2;\n            else\n              break a;\n          }\n      }\n      return b;\n    }\n    return null;\n  }\n  function I2(a, b) {\n    var c = a.sortIndex - b.sortIndex;\n    return c !== 0 ? c : a.id - b.id;\n  }\n  var L2 = [], M2 = [], N2 = 1, O2 = null, P2 = 3, Q2 = false, R2 = false, S2 = false;\n  function T2(a) {\n    for (var b = J2(M2); b !== null; ) {\n      if (b.callback === null)\n        K2(M2);\n      else if (b.startTime <= a)\n        K2(M2), b.sortIndex = b.expirationTime, H2(L2, b);\n      else\n        break;\n      b = J2(M2);\n    }\n  }\n  function U2(a) {\n    S2 = false;\n    T2(a);\n    if (!R2)\n      if (J2(L2) !== null)\n        R2 = true, f(V2);\n      else {\n        var b = J2(M2);\n        b !== null && g(U2, b.startTime - a);\n      }\n  }\n  function V2(a, b) {\n    R2 = false;\n    S2 && (S2 = false, h());\n    Q2 = true;\n    var c = P2;\n    try {\n      T2(b);\n      for (O2 = J2(L2); O2 !== null && (!(O2.expirationTime > b) || a && !exports.unstable_shouldYield()); ) {\n        var d = O2.callback;\n        if (typeof d === \"function\") {\n          O2.callback = null;\n          P2 = O2.priorityLevel;\n          var e = d(O2.expirationTime <= b);\n          b = exports.unstable_now();\n          typeof e === \"function\" ? O2.callback = e : O2 === J2(L2) && K2(L2);\n          T2(b);\n        } else\n          K2(L2);\n        O2 = J2(L2);\n      }\n      if (O2 !== null)\n        var m2 = true;\n      else {\n        var n2 = J2(M2);\n        n2 !== null && g(U2, n2.startTime - b);\n        m2 = false;\n      }\n      return m2;\n    } finally {\n      O2 = null, P2 = c, Q2 = false;\n    }\n  }\n  var W2 = k;\n  exports.unstable_IdlePriority = 5;\n  exports.unstable_ImmediatePriority = 1;\n  exports.unstable_LowPriority = 4;\n  exports.unstable_NormalPriority = 3;\n  exports.unstable_Profiling = null;\n  exports.unstable_UserBlockingPriority = 2;\n  exports.unstable_cancelCallback = function(a) {\n    a.callback = null;\n  };\n  exports.unstable_continueExecution = function() {\n    R2 || Q2 || (R2 = true, f(V2));\n  };\n  exports.unstable_getCurrentPriorityLevel = function() {\n    return P2;\n  };\n  exports.unstable_getFirstCallbackNode = function() {\n    return J2(L2);\n  };\n  exports.unstable_next = function(a) {\n    switch (P2) {\n      case 1:\n      case 2:\n      case 3:\n        var b = 3;\n        break;\n      default:\n        b = P2;\n    }\n    var c = P2;\n    P2 = b;\n    try {\n      return a();\n    } finally {\n      P2 = c;\n    }\n  };\n  exports.unstable_pauseExecution = function() {\n  };\n  exports.unstable_requestPaint = W2;\n  exports.unstable_runWithPriority = function(a, b) {\n    switch (a) {\n      case 1:\n      case 2:\n      case 3:\n      case 4:\n      case 5:\n        break;\n      default:\n        a = 3;\n    }\n    var c = P2;\n    P2 = a;\n    try {\n      return b();\n    } finally {\n      P2 = c;\n    }\n  };\n  exports.unstable_scheduleCallback = function(a, b, c) {\n    var d = exports.unstable_now();\n    typeof c === \"object\" && c !== null ? (c = c.delay, c = typeof c === \"number\" && 0 < c ? d + c : d) : c = d;\n    switch (a) {\n      case 1:\n        var e = -1;\n        break;\n      case 2:\n        e = 250;\n        break;\n      case 5:\n        e = 1073741823;\n        break;\n      case 4:\n        e = 1e4;\n        break;\n      default:\n        e = 5e3;\n    }\n    e = c + e;\n    a = { id: N2++, callback: b, priorityLevel: a, startTime: c, expirationTime: e, sortIndex: -1 };\n    c > d ? (a.sortIndex = c, H2(M2, a), J2(L2) === null && a === J2(M2) && (S2 ? h() : S2 = true, g(U2, c - d))) : (a.sortIndex = e, H2(L2, a), R2 || Q2 || (R2 = true, f(V2)));\n    return a;\n  };\n  exports.unstable_wrapCallback = function(a) {\n    var b = P2;\n    return function() {\n      var c = P2;\n      P2 = b;\n      try {\n        return a.apply(this, arguments);\n      } finally {\n        P2 = c;\n      }\n    };\n  };\n})(scheduler_production_min);\n{\n  scheduler.exports = scheduler_production_min;\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 */\nvar aa = react.exports, m = objectAssign, r = scheduler.exports;\nfunction y(a) {\n  for (var b = \"https://reactjs.org/docs/error-decoder.html?invariant=\" + a, c = 1; c < arguments.length; c++)\n    b += \"&args[]=\" + encodeURIComponent(arguments[c]);\n  return \"Minified React error #\" + a + \"; visit \" + b + \" for the full message or use the non-minified dev environment for full errors and additional helpful warnings.\";\n}\nif (!aa)\n  throw Error(y(227));\nvar ba = new Set(), ca = {};\nfunction da(a, b) {\n  ea(a, b);\n  ea(a + \"Capture\", b);\n}\nfunction ea(a, b) {\n  ca[a] = b;\n  for (a = 0; a < b.length; a++)\n    ba.add(b[a]);\n}\nvar fa = !(typeof window === \"undefined\" || typeof window.document === \"undefined\" || typeof window.document.createElement === \"undefined\"), ha = /^[: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]*$/, ia = Object.prototype.hasOwnProperty, ja = {}, ka = {};\nfunction la(a) {\n  if (ia.call(ka, a))\n    return true;\n  if (ia.call(ja, a))\n    return false;\n  if (ha.test(a))\n    return ka[a] = true;\n  ja[a] = true;\n  return false;\n}\nfunction ma(a, b, c, d) {\n  if (c !== null && c.type === 0)\n    return false;\n  switch (typeof b) {\n    case \"function\":\n    case \"symbol\":\n      return true;\n    case \"boolean\":\n      if (d)\n        return false;\n      if (c !== null)\n        return !c.acceptsBooleans;\n      a = a.toLowerCase().slice(0, 5);\n      return a !== \"data-\" && a !== \"aria-\";\n    default:\n      return false;\n  }\n}\nfunction na(a, b, c, d) {\n  if (b === null || typeof b === \"undefined\" || ma(a, b, c, d))\n    return true;\n  if (d)\n    return false;\n  if (c !== null)\n    switch (c.type) {\n      case 3:\n        return !b;\n      case 4:\n        return b === false;\n      case 5:\n        return isNaN(b);\n      case 6:\n        return isNaN(b) || 1 > b;\n    }\n  return false;\n}\nfunction B(a, b, c, d, e, f, g) {\n  this.acceptsBooleans = b === 2 || b === 3 || b === 4;\n  this.attributeName = d;\n  this.attributeNamespace = e;\n  this.mustUseProperty = c;\n  this.propertyName = a;\n  this.type = b;\n  this.sanitizeURL = f;\n  this.removeEmptyString = g;\n}\nvar D = {};\n\"children dangerouslySetInnerHTML defaultValue defaultChecked innerHTML suppressContentEditableWarning suppressHydrationWarning style\".split(\" \").forEach(function(a) {\n  D[a] = new B(a, 0, false, a, null, false, false);\n});\n[[\"acceptCharset\", \"accept-charset\"], [\"className\", \"class\"], [\"htmlFor\", \"for\"], [\"httpEquiv\", \"http-equiv\"]].forEach(function(a) {\n  var b = a[0];\n  D[b] = new B(b, 1, false, a[1], null, false, false);\n});\n[\"contentEditable\", \"draggable\", \"spellCheck\", \"value\"].forEach(function(a) {\n  D[a] = new B(a, 2, false, a.toLowerCase(), null, false, false);\n});\n[\"autoReverse\", \"externalResourcesRequired\", \"focusable\", \"preserveAlpha\"].forEach(function(a) {\n  D[a] = new B(a, 2, false, a, null, false, false);\n});\n\"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(a) {\n  D[a] = new B(a, 3, false, a.toLowerCase(), null, false, false);\n});\n[\"checked\", \"multiple\", \"muted\", \"selected\"].forEach(function(a) {\n  D[a] = new B(a, 3, true, a, null, false, false);\n});\n[\"capture\", \"download\"].forEach(function(a) {\n  D[a] = new B(a, 4, false, a, null, false, false);\n});\n[\"cols\", \"rows\", \"size\", \"span\"].forEach(function(a) {\n  D[a] = new B(a, 6, false, a, null, false, false);\n});\n[\"rowSpan\", \"start\"].forEach(function(a) {\n  D[a] = new B(a, 5, false, a.toLowerCase(), null, false, false);\n});\nvar oa = /[\\-:]([a-z])/g;\nfunction pa(a) {\n  return a[1].toUpperCase();\n}\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(a) {\n  var b = a.replace(oa, pa);\n  D[b] = new B(b, 1, false, a, null, false, false);\n});\n\"xlink:actuate xlink:arcrole xlink:role xlink:show xlink:title xlink:type\".split(\" \").forEach(function(a) {\n  var b = a.replace(oa, pa);\n  D[b] = new B(b, 1, false, a, \"http://www.w3.org/1999/xlink\", false, false);\n});\n[\"xml:base\", \"xml:lang\", \"xml:space\"].forEach(function(a) {\n  var b = a.replace(oa, pa);\n  D[b] = new B(b, 1, false, a, \"http://www.w3.org/XML/1998/namespace\", false, false);\n});\n[\"tabIndex\", \"crossOrigin\"].forEach(function(a) {\n  D[a] = new B(a, 1, false, a.toLowerCase(), null, false, false);\n});\nD.xlinkHref = new B(\"xlinkHref\", 1, false, \"xlink:href\", \"http://www.w3.org/1999/xlink\", true, false);\n[\"src\", \"href\", \"action\", \"formAction\"].forEach(function(a) {\n  D[a] = new B(a, 1, false, a.toLowerCase(), null, true, true);\n});\nfunction qa(a, b, c, d) {\n  var e = D.hasOwnProperty(b) ? D[b] : null;\n  var f = e !== null ? e.type === 0 : d ? false : !(2 < b.length) || b[0] !== \"o\" && b[0] !== \"O\" || b[1] !== \"n\" && b[1] !== \"N\" ? false : true;\n  f || (na(b, c, e, d) && (c = null), d || e === null ? la(b) && (c === null ? a.removeAttribute(b) : a.setAttribute(b, \"\" + c)) : e.mustUseProperty ? a[e.propertyName] = c === null ? e.type === 3 ? false : \"\" : c : (b = e.attributeName, d = e.attributeNamespace, c === null ? a.removeAttribute(b) : (e = e.type, c = e === 3 || e === 4 && c === true ? \"\" : \"\" + c, d ? a.setAttributeNS(d, b, c) : a.setAttribute(b, c))));\n}\nvar ra = aa.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED, sa = 60103, ta = 60106, ua = 60107, wa = 60108, xa = 60114, ya = 60109, za = 60110, Aa = 60112, Ba = 60113, Ca = 60120, Da = 60115, Ea = 60116, Fa = 60121, Ga = 60128, Ha = 60129, Ia = 60130, Ja = 60131;\nif (typeof Symbol === \"function\" && Symbol.for) {\n  var E = Symbol.for;\n  sa = E(\"react.element\");\n  ta = E(\"react.portal\");\n  ua = E(\"react.fragment\");\n  wa = E(\"react.strict_mode\");\n  xa = E(\"react.profiler\");\n  ya = E(\"react.provider\");\n  za = E(\"react.context\");\n  Aa = E(\"react.forward_ref\");\n  Ba = E(\"react.suspense\");\n  Ca = E(\"react.suspense_list\");\n  Da = E(\"react.memo\");\n  Ea = E(\"react.lazy\");\n  Fa = E(\"react.block\");\n  E(\"react.scope\");\n  Ga = E(\"react.opaque.id\");\n  Ha = E(\"react.debug_trace_mode\");\n  Ia = E(\"react.offscreen\");\n  Ja = E(\"react.legacy_hidden\");\n}\nvar Ka = typeof Symbol === \"function\" && Symbol.iterator;\nfunction La(a) {\n  if (a === null || typeof a !== \"object\")\n    return null;\n  a = Ka && a[Ka] || a[\"@@iterator\"];\n  return typeof a === \"function\" ? a : null;\n}\nvar Ma;\nfunction Na(a) {\n  if (Ma === void 0)\n    try {\n      throw Error();\n    } catch (c) {\n      var b = c.stack.trim().match(/\\n( *(at )?)/);\n      Ma = b && b[1] || \"\";\n    }\n  return \"\\n\" + Ma + a;\n}\nvar Oa = false;\nfunction Pa(a, b) {\n  if (!a || Oa)\n    return \"\";\n  Oa = true;\n  var c = Error.prepareStackTrace;\n  Error.prepareStackTrace = void 0;\n  try {\n    if (b)\n      if (b = function() {\n        throw Error();\n      }, Object.defineProperty(b.prototype, \"props\", { set: function() {\n        throw Error();\n      } }), typeof Reflect === \"object\" && Reflect.construct) {\n        try {\n          Reflect.construct(b, []);\n        } catch (k) {\n          var d = k;\n        }\n        Reflect.construct(a, [], b);\n      } else {\n        try {\n          b.call();\n        } catch (k) {\n          d = k;\n        }\n        a.call(b.prototype);\n      }\n    else {\n      try {\n        throw Error();\n      } catch (k) {\n        d = k;\n      }\n      a();\n    }\n  } catch (k) {\n    if (k && d && typeof k.stack === \"string\") {\n      for (var e = k.stack.split(\"\\n\"), f = d.stack.split(\"\\n\"), g = e.length - 1, h = f.length - 1; 1 <= g && 0 <= h && e[g] !== f[h]; )\n        h--;\n      for (; 1 <= g && 0 <= h; g--, h--)\n        if (e[g] !== f[h]) {\n          if (g !== 1 || h !== 1) {\n            do\n              if (g--, h--, 0 > h || e[g] !== f[h])\n                return \"\\n\" + e[g].replace(\" at new \", \" at \");\n            while (1 <= g && 0 <= h);\n          }\n          break;\n        }\n    }\n  } finally {\n    Oa = false, Error.prepareStackTrace = c;\n  }\n  return (a = a ? a.displayName || a.name : \"\") ? Na(a) : \"\";\n}\nfunction Qa(a) {\n  switch (a.tag) {\n    case 5:\n      return Na(a.type);\n    case 16:\n      return Na(\"Lazy\");\n    case 13:\n      return Na(\"Suspense\");\n    case 19:\n      return Na(\"SuspenseList\");\n    case 0:\n    case 2:\n    case 15:\n      return a = Pa(a.type, false), a;\n    case 11:\n      return a = Pa(a.type.render, false), a;\n    case 22:\n      return a = Pa(a.type._render, false), a;\n    case 1:\n      return a = Pa(a.type, true), a;\n    default:\n      return \"\";\n  }\n}\nfunction Ra(a) {\n  if (a == null)\n    return null;\n  if (typeof a === \"function\")\n    return a.displayName || a.name || null;\n  if (typeof a === \"string\")\n    return a;\n  switch (a) {\n    case ua:\n      return \"Fragment\";\n    case ta:\n      return \"Portal\";\n    case xa:\n      return \"Profiler\";\n    case wa:\n      return \"StrictMode\";\n    case Ba:\n      return \"Suspense\";\n    case Ca:\n      return \"SuspenseList\";\n  }\n  if (typeof a === \"object\")\n    switch (a.$$typeof) {\n      case za:\n        return (a.displayName || \"Context\") + \".Consumer\";\n      case ya:\n        return (a._context.displayName || \"Context\") + \".Provider\";\n      case Aa:\n        var b = a.render;\n        b = b.displayName || b.name || \"\";\n        return a.displayName || (b !== \"\" ? \"ForwardRef(\" + b + \")\" : \"ForwardRef\");\n      case Da:\n        return Ra(a.type);\n      case Fa:\n        return Ra(a._render);\n      case Ea:\n        b = a._payload;\n        a = a._init;\n        try {\n          return Ra(a(b));\n        } catch (c) {\n        }\n    }\n  return null;\n}\nfunction Sa(a) {\n  switch (typeof a) {\n    case \"boolean\":\n    case \"number\":\n    case \"object\":\n    case \"string\":\n    case \"undefined\":\n      return a;\n    default:\n      return \"\";\n  }\n}\nfunction Ta(a) {\n  var b = a.type;\n  return (a = a.nodeName) && a.toLowerCase() === \"input\" && (b === \"checkbox\" || b === \"radio\");\n}\nfunction Ua(a) {\n  var b = Ta(a) ? \"checked\" : \"value\", c = Object.getOwnPropertyDescriptor(a.constructor.prototype, b), d = \"\" + a[b];\n  if (!a.hasOwnProperty(b) && typeof c !== \"undefined\" && typeof c.get === \"function\" && typeof c.set === \"function\") {\n    var e = c.get, f = c.set;\n    Object.defineProperty(a, b, { configurable: true, get: function() {\n      return e.call(this);\n    }, set: function(a2) {\n      d = \"\" + a2;\n      f.call(this, a2);\n    } });\n    Object.defineProperty(a, b, { enumerable: c.enumerable });\n    return { getValue: function() {\n      return d;\n    }, setValue: function(a2) {\n      d = \"\" + a2;\n    }, stopTracking: function() {\n      a._valueTracker = null;\n      delete a[b];\n    } };\n  }\n}\nfunction Va(a) {\n  a._valueTracker || (a._valueTracker = Ua(a));\n}\nfunction Wa(a) {\n  if (!a)\n    return false;\n  var b = a._valueTracker;\n  if (!b)\n    return true;\n  var c = b.getValue();\n  var d = \"\";\n  a && (d = Ta(a) ? a.checked ? \"true\" : \"false\" : a.value);\n  a = d;\n  return a !== c ? (b.setValue(a), true) : false;\n}\nfunction Xa(a) {\n  a = a || (typeof document !== \"undefined\" ? document : void 0);\n  if (typeof a === \"undefined\")\n    return null;\n  try {\n    return a.activeElement || a.body;\n  } catch (b) {\n    return a.body;\n  }\n}\nfunction Ya(a, b) {\n  var c = b.checked;\n  return m({}, b, { defaultChecked: void 0, defaultValue: void 0, value: void 0, checked: c != null ? c : a._wrapperState.initialChecked });\n}\nfunction Za(a, b) {\n  var c = b.defaultValue == null ? \"\" : b.defaultValue, d = b.checked != null ? b.checked : b.defaultChecked;\n  c = Sa(b.value != null ? b.value : c);\n  a._wrapperState = { initialChecked: d, initialValue: c, controlled: b.type === \"checkbox\" || b.type === \"radio\" ? b.checked != null : b.value != null };\n}\nfunction $a(a, b) {\n  b = b.checked;\n  b != null && qa(a, \"checked\", b, false);\n}\nfunction ab(a, b) {\n  $a(a, b);\n  var c = Sa(b.value), d = b.type;\n  if (c != null)\n    if (d === \"number\") {\n      if (c === 0 && a.value === \"\" || a.value != c)\n        a.value = \"\" + c;\n    } else\n      a.value !== \"\" + c && (a.value = \"\" + c);\n  else if (d === \"submit\" || d === \"reset\") {\n    a.removeAttribute(\"value\");\n    return;\n  }\n  b.hasOwnProperty(\"value\") ? bb(a, b.type, c) : b.hasOwnProperty(\"defaultValue\") && bb(a, b.type, Sa(b.defaultValue));\n  b.checked == null && b.defaultChecked != null && (a.defaultChecked = !!b.defaultChecked);\n}\nfunction cb(a, b, c) {\n  if (b.hasOwnProperty(\"value\") || b.hasOwnProperty(\"defaultValue\")) {\n    var d = b.type;\n    if (!(d !== \"submit\" && d !== \"reset\" || b.value !== void 0 && b.value !== null))\n      return;\n    b = \"\" + a._wrapperState.initialValue;\n    c || b === a.value || (a.value = b);\n    a.defaultValue = b;\n  }\n  c = a.name;\n  c !== \"\" && (a.name = \"\");\n  a.defaultChecked = !!a._wrapperState.initialChecked;\n  c !== \"\" && (a.name = c);\n}\nfunction bb(a, b, c) {\n  if (b !== \"number\" || Xa(a.ownerDocument) !== a)\n    c == null ? a.defaultValue = \"\" + a._wrapperState.initialValue : a.defaultValue !== \"\" + c && (a.defaultValue = \"\" + c);\n}\nfunction db(a) {\n  var b = \"\";\n  aa.Children.forEach(a, function(a2) {\n    a2 != null && (b += a2);\n  });\n  return b;\n}\nfunction eb(a, b) {\n  a = m({ children: void 0 }, b);\n  if (b = db(b.children))\n    a.children = b;\n  return a;\n}\nfunction fb(a, b, c, d) {\n  a = a.options;\n  if (b) {\n    b = {};\n    for (var e = 0; e < c.length; e++)\n      b[\"$\" + c[e]] = true;\n    for (c = 0; c < a.length; c++)\n      e = b.hasOwnProperty(\"$\" + a[c].value), a[c].selected !== e && (a[c].selected = e), e && d && (a[c].defaultSelected = true);\n  } else {\n    c = \"\" + Sa(c);\n    b = null;\n    for (e = 0; e < a.length; e++) {\n      if (a[e].value === c) {\n        a[e].selected = true;\n        d && (a[e].defaultSelected = true);\n        return;\n      }\n      b !== null || a[e].disabled || (b = a[e]);\n    }\n    b !== null && (b.selected = true);\n  }\n}\nfunction gb(a, b) {\n  if (b.dangerouslySetInnerHTML != null)\n    throw Error(y(91));\n  return m({}, b, { value: void 0, defaultValue: void 0, children: \"\" + a._wrapperState.initialValue });\n}\nfunction hb(a, b) {\n  var c = b.value;\n  if (c == null) {\n    c = b.children;\n    b = b.defaultValue;\n    if (c != null) {\n      if (b != null)\n        throw Error(y(92));\n      if (Array.isArray(c)) {\n        if (!(1 >= c.length))\n          throw Error(y(93));\n        c = c[0];\n      }\n      b = c;\n    }\n    b == null && (b = \"\");\n    c = b;\n  }\n  a._wrapperState = { initialValue: Sa(c) };\n}\nfunction ib(a, b) {\n  var c = Sa(b.value), d = Sa(b.defaultValue);\n  c != null && (c = \"\" + c, c !== a.value && (a.value = c), b.defaultValue == null && a.defaultValue !== c && (a.defaultValue = c));\n  d != null && (a.defaultValue = \"\" + d);\n}\nfunction jb(a) {\n  var b = a.textContent;\n  b === a._wrapperState.initialValue && b !== \"\" && b !== null && (a.value = b);\n}\nvar kb = { html: \"http://www.w3.org/1999/xhtml\", mathml: \"http://www.w3.org/1998/Math/MathML\", svg: \"http://www.w3.org/2000/svg\" };\nfunction lb(a) {\n  switch (a) {\n    case \"svg\":\n      return \"http://www.w3.org/2000/svg\";\n    case \"math\":\n      return \"http://www.w3.org/1998/Math/MathML\";\n    default:\n      return \"http://www.w3.org/1999/xhtml\";\n  }\n}\nfunction mb(a, b) {\n  return a == null || a === \"http://www.w3.org/1999/xhtml\" ? lb(b) : a === \"http://www.w3.org/2000/svg\" && b === \"foreignObject\" ? \"http://www.w3.org/1999/xhtml\" : a;\n}\nvar nb, ob = function(a) {\n  return typeof MSApp !== \"undefined\" && MSApp.execUnsafeLocalFunction ? function(b, c, d, e) {\n    MSApp.execUnsafeLocalFunction(function() {\n      return a(b, c, d, e);\n    });\n  } : a;\n}(function(a, b) {\n  if (a.namespaceURI !== kb.svg || \"innerHTML\" in a)\n    a.innerHTML = b;\n  else {\n    nb = nb || document.createElement(\"div\");\n    nb.innerHTML = \"<svg>\" + b.valueOf().toString() + \"</svg>\";\n    for (b = nb.firstChild; a.firstChild; )\n      a.removeChild(a.firstChild);\n    for (; b.firstChild; )\n      a.appendChild(b.firstChild);\n  }\n});\nfunction pb(a, b) {\n  if (b) {\n    var c = a.firstChild;\n    if (c && c === a.lastChild && c.nodeType === 3) {\n      c.nodeValue = b;\n      return;\n    }\n  }\n  a.textContent = b;\n}\nvar qb = {\n  animationIterationCount: true,\n  borderImageOutset: true,\n  borderImageSlice: true,\n  borderImageWidth: true,\n  boxFlex: true,\n  boxFlexGroup: true,\n  boxOrdinalGroup: true,\n  columnCount: true,\n  columns: true,\n  flex: true,\n  flexGrow: true,\n  flexPositive: true,\n  flexShrink: true,\n  flexNegative: true,\n  flexOrder: true,\n  gridArea: true,\n  gridRow: true,\n  gridRowEnd: true,\n  gridRowSpan: true,\n  gridRowStart: true,\n  gridColumn: true,\n  gridColumnEnd: true,\n  gridColumnSpan: true,\n  gridColumnStart: true,\n  fontWeight: true,\n  lineClamp: true,\n  lineHeight: true,\n  opacity: true,\n  order: true,\n  orphans: true,\n  tabSize: true,\n  widows: true,\n  zIndex: true,\n  zoom: true,\n  fillOpacity: true,\n  floodOpacity: true,\n  stopOpacity: true,\n  strokeDasharray: true,\n  strokeDashoffset: true,\n  strokeMiterlimit: true,\n  strokeOpacity: true,\n  strokeWidth: true\n}, rb = [\"Webkit\", \"ms\", \"Moz\", \"O\"];\nObject.keys(qb).forEach(function(a) {\n  rb.forEach(function(b) {\n    b = b + a.charAt(0).toUpperCase() + a.substring(1);\n    qb[b] = qb[a];\n  });\n});\nfunction sb(a, b, c) {\n  return b == null || typeof b === \"boolean\" || b === \"\" ? \"\" : c || typeof b !== \"number\" || b === 0 || qb.hasOwnProperty(a) && qb[a] ? (\"\" + b).trim() : b + \"px\";\n}\nfunction tb(a, b) {\n  a = a.style;\n  for (var c in b)\n    if (b.hasOwnProperty(c)) {\n      var d = c.indexOf(\"--\") === 0, e = sb(c, b[c], d);\n      c === \"float\" && (c = \"cssFloat\");\n      d ? a.setProperty(c, e) : a[c] = e;\n    }\n}\nvar ub = m({ menuitem: true }, { area: true, base: true, br: true, col: true, embed: true, hr: true, img: true, input: true, keygen: true, link: true, meta: true, param: true, source: true, track: true, wbr: true });\nfunction vb(a, b) {\n  if (b) {\n    if (ub[a] && (b.children != null || b.dangerouslySetInnerHTML != null))\n      throw Error(y(137, a));\n    if (b.dangerouslySetInnerHTML != null) {\n      if (b.children != null)\n        throw Error(y(60));\n      if (!(typeof b.dangerouslySetInnerHTML === \"object\" && \"__html\" in b.dangerouslySetInnerHTML))\n        throw Error(y(61));\n    }\n    if (b.style != null && typeof b.style !== \"object\")\n      throw Error(y(62));\n  }\n}\nfunction wb(a, b) {\n  if (a.indexOf(\"-\") === -1)\n    return typeof b.is === \"string\";\n  switch (a) {\n    case \"annotation-xml\":\n    case \"color-profile\":\n    case \"font-face\":\n    case \"font-face-src\":\n    case \"font-face-uri\":\n    case \"font-face-format\":\n    case \"font-face-name\":\n    case \"missing-glyph\":\n      return false;\n    default:\n      return true;\n  }\n}\nfunction xb(a) {\n  a = a.target || a.srcElement || window;\n  a.correspondingUseElement && (a = a.correspondingUseElement);\n  return a.nodeType === 3 ? a.parentNode : a;\n}\nvar yb = null, zb = null, Ab = null;\nfunction Bb(a) {\n  if (a = Cb(a)) {\n    if (typeof yb !== \"function\")\n      throw Error(y(280));\n    var b = a.stateNode;\n    b && (b = Db(b), yb(a.stateNode, a.type, b));\n  }\n}\nfunction Eb(a) {\n  zb ? Ab ? Ab.push(a) : Ab = [a] : zb = a;\n}\nfunction Fb() {\n  if (zb) {\n    var a = zb, b = Ab;\n    Ab = zb = null;\n    Bb(a);\n    if (b)\n      for (a = 0; a < b.length; a++)\n        Bb(b[a]);\n  }\n}\nfunction Gb(a, b) {\n  return a(b);\n}\nfunction Hb(a, b, c, d, e) {\n  return a(b, c, d, e);\n}\nfunction Ib() {\n}\nvar Jb = Gb, Kb = false, Lb = false;\nfunction Mb() {\n  if (zb !== null || Ab !== null)\n    Ib(), Fb();\n}\nfunction Nb(a, b, c) {\n  if (Lb)\n    return a(b, c);\n  Lb = true;\n  try {\n    return Jb(a, b, c);\n  } finally {\n    Lb = false, Mb();\n  }\n}\nfunction Ob(a, b) {\n  var c = a.stateNode;\n  if (c === null)\n    return null;\n  var d = Db(c);\n  if (d === null)\n    return null;\n  c = d[b];\n  a:\n    switch (b) {\n      case \"onClick\":\n      case \"onClickCapture\":\n      case \"onDoubleClick\":\n      case \"onDoubleClickCapture\":\n      case \"onMouseDown\":\n      case \"onMouseDownCapture\":\n      case \"onMouseMove\":\n      case \"onMouseMoveCapture\":\n      case \"onMouseUp\":\n      case \"onMouseUpCapture\":\n      case \"onMouseEnter\":\n        (d = !d.disabled) || (a = a.type, d = !(a === \"button\" || a === \"input\" || a === \"select\" || a === \"textarea\"));\n        a = !d;\n        break a;\n      default:\n        a = false;\n    }\n  if (a)\n    return null;\n  if (c && typeof c !== \"function\")\n    throw Error(y(231, b, typeof c));\n  return c;\n}\nvar Pb = false;\nif (fa)\n  try {\n    var Qb = {};\n    Object.defineProperty(Qb, \"passive\", { get: function() {\n      Pb = true;\n    } });\n    window.addEventListener(\"test\", Qb, Qb);\n    window.removeEventListener(\"test\", Qb, Qb);\n  } catch (a) {\n    Pb = false;\n  }\nfunction Rb(a, b, c, d, e, f, g, h, k) {\n  var l2 = Array.prototype.slice.call(arguments, 3);\n  try {\n    b.apply(c, l2);\n  } catch (n2) {\n    this.onError(n2);\n  }\n}\nvar Sb = false, Tb = null, Ub = false, Vb = null, Wb = { onError: function(a) {\n  Sb = true;\n  Tb = a;\n} };\nfunction Xb(a, b, c, d, e, f, g, h, k) {\n  Sb = false;\n  Tb = null;\n  Rb.apply(Wb, arguments);\n}\nfunction Yb(a, b, c, d, e, f, g, h, k) {\n  Xb.apply(this, arguments);\n  if (Sb) {\n    if (Sb) {\n      var l2 = Tb;\n      Sb = false;\n      Tb = null;\n    } else\n      throw Error(y(198));\n    Ub || (Ub = true, Vb = l2);\n  }\n}\nfunction Zb(a) {\n  var b = a, c = a;\n  if (a.alternate)\n    for (; b.return; )\n      b = b.return;\n  else {\n    a = b;\n    do\n      b = a, (b.flags & 1026) !== 0 && (c = b.return), a = b.return;\n    while (a);\n  }\n  return b.tag === 3 ? c : null;\n}\nfunction $b(a) {\n  if (a.tag === 13) {\n    var b = a.memoizedState;\n    b === null && (a = a.alternate, a !== null && (b = a.memoizedState));\n    if (b !== null)\n      return b.dehydrated;\n  }\n  return null;\n}\nfunction ac(a) {\n  if (Zb(a) !== a)\n    throw Error(y(188));\n}\nfunction bc(a) {\n  var b = a.alternate;\n  if (!b) {\n    b = Zb(a);\n    if (b === null)\n      throw Error(y(188));\n    return b !== a ? null : a;\n  }\n  for (var c = a, d = b; ; ) {\n    var e = c.return;\n    if (e === null)\n      break;\n    var f = e.alternate;\n    if (f === null) {\n      d = e.return;\n      if (d !== null) {\n        c = d;\n        continue;\n      }\n      break;\n    }\n    if (e.child === f.child) {\n      for (f = e.child; f; ) {\n        if (f === c)\n          return ac(e), a;\n        if (f === d)\n          return ac(e), b;\n        f = f.sibling;\n      }\n      throw Error(y(188));\n    }\n    if (c.return !== d.return)\n      c = e, d = f;\n    else {\n      for (var g = false, h = e.child; h; ) {\n        if (h === c) {\n          g = true;\n          c = e;\n          d = f;\n          break;\n        }\n        if (h === d) {\n          g = true;\n          d = e;\n          c = f;\n          break;\n        }\n        h = h.sibling;\n      }\n      if (!g) {\n        for (h = f.child; h; ) {\n          if (h === c) {\n            g = true;\n            c = f;\n            d = e;\n            break;\n          }\n          if (h === d) {\n            g = true;\n            d = f;\n            c = e;\n            break;\n          }\n          h = h.sibling;\n        }\n        if (!g)\n          throw Error(y(189));\n      }\n    }\n    if (c.alternate !== d)\n      throw Error(y(190));\n  }\n  if (c.tag !== 3)\n    throw Error(y(188));\n  return c.stateNode.current === c ? a : b;\n}\nfunction cc(a) {\n  a = bc(a);\n  if (!a)\n    return null;\n  for (var b = a; ; ) {\n    if (b.tag === 5 || b.tag === 6)\n      return b;\n    if (b.child)\n      b.child.return = b, b = b.child;\n    else {\n      if (b === a)\n        break;\n      for (; !b.sibling; ) {\n        if (!b.return || b.return === a)\n          return null;\n        b = b.return;\n      }\n      b.sibling.return = b.return;\n      b = b.sibling;\n    }\n  }\n  return null;\n}\nfunction dc(a, b) {\n  for (var c = a.alternate; b !== null; ) {\n    if (b === a || b === c)\n      return true;\n    b = b.return;\n  }\n  return false;\n}\nvar ec, fc, gc, hc, ic = false, jc = [], kc = null, lc = null, mc = null, nc = new Map(), oc = new Map(), pc = [], qc = \"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(\" \");\nfunction rc(a, b, c, d, e) {\n  return { blockedOn: a, domEventName: b, eventSystemFlags: c | 16, nativeEvent: e, targetContainers: [d] };\n}\nfunction sc(a, b) {\n  switch (a) {\n    case \"focusin\":\n    case \"focusout\":\n      kc = null;\n      break;\n    case \"dragenter\":\n    case \"dragleave\":\n      lc = null;\n      break;\n    case \"mouseover\":\n    case \"mouseout\":\n      mc = null;\n      break;\n    case \"pointerover\":\n    case \"pointerout\":\n      nc.delete(b.pointerId);\n      break;\n    case \"gotpointercapture\":\n    case \"lostpointercapture\":\n      oc.delete(b.pointerId);\n  }\n}\nfunction tc(a, b, c, d, e, f) {\n  if (a === null || a.nativeEvent !== f)\n    return a = rc(b, c, d, e, f), b !== null && (b = Cb(b), b !== null && fc(b)), a;\n  a.eventSystemFlags |= d;\n  b = a.targetContainers;\n  e !== null && b.indexOf(e) === -1 && b.push(e);\n  return a;\n}\nfunction uc(a, b, c, d, e) {\n  switch (b) {\n    case \"focusin\":\n      return kc = tc(kc, a, b, c, d, e), true;\n    case \"dragenter\":\n      return lc = tc(lc, a, b, c, d, e), true;\n    case \"mouseover\":\n      return mc = tc(mc, a, b, c, d, e), true;\n    case \"pointerover\":\n      var f = e.pointerId;\n      nc.set(f, tc(nc.get(f) || null, a, b, c, d, e));\n      return true;\n    case \"gotpointercapture\":\n      return f = e.pointerId, oc.set(f, tc(oc.get(f) || null, a, b, c, d, e)), true;\n  }\n  return false;\n}\nfunction vc(a) {\n  var b = wc(a.target);\n  if (b !== null) {\n    var c = Zb(b);\n    if (c !== null) {\n      if (b = c.tag, b === 13) {\n        if (b = $b(c), b !== null) {\n          a.blockedOn = b;\n          hc(a.lanePriority, function() {\n            r.unstable_runWithPriority(a.priority, function() {\n              gc(c);\n            });\n          });\n          return;\n        }\n      } else if (b === 3 && c.stateNode.hydrate) {\n        a.blockedOn = c.tag === 3 ? c.stateNode.containerInfo : null;\n        return;\n      }\n    }\n  }\n  a.blockedOn = null;\n}\nfunction xc(a) {\n  if (a.blockedOn !== null)\n    return false;\n  for (var b = a.targetContainers; 0 < b.length; ) {\n    var c = yc(a.domEventName, a.eventSystemFlags, b[0], a.nativeEvent);\n    if (c !== null)\n      return b = Cb(c), b !== null && fc(b), a.blockedOn = c, false;\n    b.shift();\n  }\n  return true;\n}\nfunction zc(a, b, c) {\n  xc(a) && c.delete(b);\n}\nfunction Ac() {\n  for (ic = false; 0 < jc.length; ) {\n    var a = jc[0];\n    if (a.blockedOn !== null) {\n      a = Cb(a.blockedOn);\n      a !== null && ec(a);\n      break;\n    }\n    for (var b = a.targetContainers; 0 < b.length; ) {\n      var c = yc(a.domEventName, a.eventSystemFlags, b[0], a.nativeEvent);\n      if (c !== null) {\n        a.blockedOn = c;\n        break;\n      }\n      b.shift();\n    }\n    a.blockedOn === null && jc.shift();\n  }\n  kc !== null && xc(kc) && (kc = null);\n  lc !== null && xc(lc) && (lc = null);\n  mc !== null && xc(mc) && (mc = null);\n  nc.forEach(zc);\n  oc.forEach(zc);\n}\nfunction Bc(a, b) {\n  a.blockedOn === b && (a.blockedOn = null, ic || (ic = true, r.unstable_scheduleCallback(r.unstable_NormalPriority, Ac)));\n}\nfunction Cc(a) {\n  function b(b2) {\n    return Bc(b2, a);\n  }\n  if (0 < jc.length) {\n    Bc(jc[0], a);\n    for (var c = 1; c < jc.length; c++) {\n      var d = jc[c];\n      d.blockedOn === a && (d.blockedOn = null);\n    }\n  }\n  kc !== null && Bc(kc, a);\n  lc !== null && Bc(lc, a);\n  mc !== null && Bc(mc, a);\n  nc.forEach(b);\n  oc.forEach(b);\n  for (c = 0; c < pc.length; c++)\n    d = pc[c], d.blockedOn === a && (d.blockedOn = null);\n  for (; 0 < pc.length && (c = pc[0], c.blockedOn === null); )\n    vc(c), c.blockedOn === null && pc.shift();\n}\nfunction Dc(a, b) {\n  var c = {};\n  c[a.toLowerCase()] = b.toLowerCase();\n  c[\"Webkit\" + a] = \"webkit\" + b;\n  c[\"Moz\" + a] = \"moz\" + b;\n  return c;\n}\nvar Ec = { animationend: Dc(\"Animation\", \"AnimationEnd\"), animationiteration: Dc(\"Animation\", \"AnimationIteration\"), animationstart: Dc(\"Animation\", \"AnimationStart\"), transitionend: Dc(\"Transition\", \"TransitionEnd\") }, Fc = {}, Gc = {};\nfa && (Gc = document.createElement(\"div\").style, \"AnimationEvent\" in window || (delete Ec.animationend.animation, delete Ec.animationiteration.animation, delete Ec.animationstart.animation), \"TransitionEvent\" in window || delete Ec.transitionend.transition);\nfunction Hc(a) {\n  if (Fc[a])\n    return Fc[a];\n  if (!Ec[a])\n    return a;\n  var b = Ec[a], c;\n  for (c in b)\n    if (b.hasOwnProperty(c) && c in Gc)\n      return Fc[a] = b[c];\n  return a;\n}\nvar Ic = Hc(\"animationend\"), Jc = Hc(\"animationiteration\"), Kc = Hc(\"animationstart\"), Lc = Hc(\"transitionend\"), Mc = new Map(), Nc = new Map(), Oc = [\n  \"abort\",\n  \"abort\",\n  Ic,\n  \"animationEnd\",\n  Jc,\n  \"animationIteration\",\n  Kc,\n  \"animationStart\",\n  \"canplay\",\n  \"canPlay\",\n  \"canplaythrough\",\n  \"canPlayThrough\",\n  \"durationchange\",\n  \"durationChange\",\n  \"emptied\",\n  \"emptied\",\n  \"encrypted\",\n  \"encrypted\",\n  \"ended\",\n  \"ended\",\n  \"error\",\n  \"error\",\n  \"gotpointercapture\",\n  \"gotPointerCapture\",\n  \"load\",\n  \"load\",\n  \"loadeddata\",\n  \"loadedData\",\n  \"loadedmetadata\",\n  \"loadedMetadata\",\n  \"loadstart\",\n  \"loadStart\",\n  \"lostpointercapture\",\n  \"lostPointerCapture\",\n  \"playing\",\n  \"playing\",\n  \"progress\",\n  \"progress\",\n  \"seeking\",\n  \"seeking\",\n  \"stalled\",\n  \"stalled\",\n  \"suspend\",\n  \"suspend\",\n  \"timeupdate\",\n  \"timeUpdate\",\n  Lc,\n  \"transitionEnd\",\n  \"waiting\",\n  \"waiting\"\n];\nfunction Pc(a, b) {\n  for (var c = 0; c < a.length; c += 2) {\n    var d = a[c], e = a[c + 1];\n    e = \"on\" + (e[0].toUpperCase() + e.slice(1));\n    Nc.set(d, b);\n    Mc.set(d, e);\n    da(e, [d]);\n  }\n}\nvar Qc = r.unstable_now;\nQc();\nvar F = 8;\nfunction Rc(a) {\n  if ((1 & a) !== 0)\n    return F = 15, 1;\n  if ((2 & a) !== 0)\n    return F = 14, 2;\n  if ((4 & a) !== 0)\n    return F = 13, 4;\n  var b = 24 & a;\n  if (b !== 0)\n    return F = 12, b;\n  if ((a & 32) !== 0)\n    return F = 11, 32;\n  b = 192 & a;\n  if (b !== 0)\n    return F = 10, b;\n  if ((a & 256) !== 0)\n    return F = 9, 256;\n  b = 3584 & a;\n  if (b !== 0)\n    return F = 8, b;\n  if ((a & 4096) !== 0)\n    return F = 7, 4096;\n  b = 4186112 & a;\n  if (b !== 0)\n    return F = 6, b;\n  b = 62914560 & a;\n  if (b !== 0)\n    return F = 5, b;\n  if (a & 67108864)\n    return F = 4, 67108864;\n  if ((a & 134217728) !== 0)\n    return F = 3, 134217728;\n  b = 805306368 & a;\n  if (b !== 0)\n    return F = 2, b;\n  if ((1073741824 & a) !== 0)\n    return F = 1, 1073741824;\n  F = 8;\n  return a;\n}\nfunction Sc(a) {\n  switch (a) {\n    case 99:\n      return 15;\n    case 98:\n      return 10;\n    case 97:\n    case 96:\n      return 8;\n    case 95:\n      return 2;\n    default:\n      return 0;\n  }\n}\nfunction Tc(a) {\n  switch (a) {\n    case 15:\n    case 14:\n      return 99;\n    case 13:\n    case 12:\n    case 11:\n    case 10:\n      return 98;\n    case 9:\n    case 8:\n    case 7:\n    case 6:\n    case 4:\n    case 5:\n      return 97;\n    case 3:\n    case 2:\n    case 1:\n      return 95;\n    case 0:\n      return 90;\n    default:\n      throw Error(y(358, a));\n  }\n}\nfunction Uc(a, b) {\n  var c = a.pendingLanes;\n  if (c === 0)\n    return F = 0;\n  var d = 0, e = 0, f = a.expiredLanes, g = a.suspendedLanes, h = a.pingedLanes;\n  if (f !== 0)\n    d = f, e = F = 15;\n  else if (f = c & 134217727, f !== 0) {\n    var k = f & ~g;\n    k !== 0 ? (d = Rc(k), e = F) : (h &= f, h !== 0 && (d = Rc(h), e = F));\n  } else\n    f = c & ~g, f !== 0 ? (d = Rc(f), e = F) : h !== 0 && (d = Rc(h), e = F);\n  if (d === 0)\n    return 0;\n  d = 31 - Vc(d);\n  d = c & ((0 > d ? 0 : 1 << d) << 1) - 1;\n  if (b !== 0 && b !== d && (b & g) === 0) {\n    Rc(b);\n    if (e <= F)\n      return b;\n    F = e;\n  }\n  b = a.entangledLanes;\n  if (b !== 0)\n    for (a = a.entanglements, b &= d; 0 < b; )\n      c = 31 - Vc(b), e = 1 << c, d |= a[c], b &= ~e;\n  return d;\n}\nfunction Wc(a) {\n  a = a.pendingLanes & -1073741825;\n  return a !== 0 ? a : a & 1073741824 ? 1073741824 : 0;\n}\nfunction Xc(a, b) {\n  switch (a) {\n    case 15:\n      return 1;\n    case 14:\n      return 2;\n    case 12:\n      return a = Yc(24 & ~b), a === 0 ? Xc(10, b) : a;\n    case 10:\n      return a = Yc(192 & ~b), a === 0 ? Xc(8, b) : a;\n    case 8:\n      return a = Yc(3584 & ~b), a === 0 && (a = Yc(4186112 & ~b), a === 0 && (a = 512)), a;\n    case 2:\n      return b = Yc(805306368 & ~b), b === 0 && (b = 268435456), b;\n  }\n  throw Error(y(358, a));\n}\nfunction Yc(a) {\n  return a & -a;\n}\nfunction Zc(a) {\n  for (var b = [], c = 0; 31 > c; c++)\n    b.push(a);\n  return b;\n}\nfunction $c(a, b, c) {\n  a.pendingLanes |= b;\n  var d = b - 1;\n  a.suspendedLanes &= d;\n  a.pingedLanes &= d;\n  a = a.eventTimes;\n  b = 31 - Vc(b);\n  a[b] = c;\n}\nvar Vc = Math.clz32 ? Math.clz32 : ad, bd = Math.log, cd = Math.LN2;\nfunction ad(a) {\n  return a === 0 ? 32 : 31 - (bd(a) / cd | 0) | 0;\n}\nvar dd = r.unstable_UserBlockingPriority, ed = r.unstable_runWithPriority, fd = true;\nfunction gd(a, b, c, d) {\n  Kb || Ib();\n  var e = hd, f = Kb;\n  Kb = true;\n  try {\n    Hb(e, a, b, c, d);\n  } finally {\n    (Kb = f) || Mb();\n  }\n}\nfunction id(a, b, c, d) {\n  ed(dd, hd.bind(null, a, b, c, d));\n}\nfunction hd(a, b, c, d) {\n  if (fd) {\n    var e;\n    if ((e = (b & 4) === 0) && 0 < jc.length && -1 < qc.indexOf(a))\n      a = rc(null, a, b, c, d), jc.push(a);\n    else {\n      var f = yc(a, b, c, d);\n      if (f === null)\n        e && sc(a, d);\n      else {\n        if (e) {\n          if (-1 < qc.indexOf(a)) {\n            a = rc(f, a, b, c, d);\n            jc.push(a);\n            return;\n          }\n          if (uc(f, a, b, c, d))\n            return;\n          sc(a, d);\n        }\n        jd(a, b, d, null, c);\n      }\n    }\n  }\n}\nfunction yc(a, b, c, d) {\n  var e = xb(d);\n  e = wc(e);\n  if (e !== null) {\n    var f = Zb(e);\n    if (f === null)\n      e = null;\n    else {\n      var g = f.tag;\n      if (g === 13) {\n        e = $b(f);\n        if (e !== null)\n          return e;\n        e = null;\n      } else if (g === 3) {\n        if (f.stateNode.hydrate)\n          return f.tag === 3 ? f.stateNode.containerInfo : null;\n        e = null;\n      } else\n        f !== e && (e = null);\n    }\n  }\n  jd(a, b, d, e, c);\n  return null;\n}\nvar kd = null, ld = null, md = null;\nfunction nd() {\n  if (md)\n    return md;\n  var a, b = ld, c = b.length, d, e = \"value\" in kd ? kd.value : kd.textContent, f = e.length;\n  for (a = 0; a < c && b[a] === e[a]; a++)\n    ;\n  var g = c - a;\n  for (d = 1; d <= g && b[c - d] === e[f - d]; d++)\n    ;\n  return md = e.slice(a, 1 < d ? 1 - d : void 0);\n}\nfunction od(a) {\n  var b = a.keyCode;\n  \"charCode\" in a ? (a = a.charCode, a === 0 && b === 13 && (a = 13)) : a = b;\n  a === 10 && (a = 13);\n  return 32 <= a || a === 13 ? a : 0;\n}\nfunction pd() {\n  return true;\n}\nfunction qd() {\n  return false;\n}\nfunction rd(a) {\n  function b(b2, d, e, f, g) {\n    this._reactName = b2;\n    this._targetInst = e;\n    this.type = d;\n    this.nativeEvent = f;\n    this.target = g;\n    this.currentTarget = null;\n    for (var c in a)\n      a.hasOwnProperty(c) && (b2 = a[c], this[c] = b2 ? b2(f) : f[c]);\n    this.isDefaultPrevented = (f.defaultPrevented != null ? f.defaultPrevented : f.returnValue === false) ? pd : qd;\n    this.isPropagationStopped = qd;\n    return this;\n  }\n  m(b.prototype, { preventDefault: function() {\n    this.defaultPrevented = true;\n    var a2 = this.nativeEvent;\n    a2 && (a2.preventDefault ? a2.preventDefault() : typeof a2.returnValue !== \"unknown\" && (a2.returnValue = false), this.isDefaultPrevented = pd);\n  }, stopPropagation: function() {\n    var a2 = this.nativeEvent;\n    a2 && (a2.stopPropagation ? a2.stopPropagation() : typeof a2.cancelBubble !== \"unknown\" && (a2.cancelBubble = true), this.isPropagationStopped = pd);\n  }, persist: function() {\n  }, isPersistent: pd });\n  return b;\n}\nvar sd = { eventPhase: 0, bubbles: 0, cancelable: 0, timeStamp: function(a) {\n  return a.timeStamp || Date.now();\n}, defaultPrevented: 0, isTrusted: 0 }, td = rd(sd), ud = m({}, sd, { view: 0, detail: 0 }), vd = rd(ud), wd, xd, yd, Ad = m({}, ud, { screenX: 0, screenY: 0, clientX: 0, clientY: 0, pageX: 0, pageY: 0, ctrlKey: 0, shiftKey: 0, altKey: 0, metaKey: 0, getModifierState: zd, button: 0, buttons: 0, relatedTarget: function(a) {\n  return a.relatedTarget === void 0 ? a.fromElement === a.srcElement ? a.toElement : a.fromElement : a.relatedTarget;\n}, movementX: function(a) {\n  if (\"movementX\" in a)\n    return a.movementX;\n  a !== yd && (yd && a.type === \"mousemove\" ? (wd = a.screenX - yd.screenX, xd = a.screenY - yd.screenY) : xd = wd = 0, yd = a);\n  return wd;\n}, movementY: function(a) {\n  return \"movementY\" in a ? a.movementY : xd;\n} }), Bd = rd(Ad), Cd = m({}, Ad, { dataTransfer: 0 }), Dd = rd(Cd), Ed = m({}, ud, { relatedTarget: 0 }), Fd = rd(Ed), Gd = m({}, sd, { animationName: 0, elapsedTime: 0, pseudoElement: 0 }), Hd = rd(Gd), Id = m({}, sd, { clipboardData: function(a) {\n  return \"clipboardData\" in a ? a.clipboardData : window.clipboardData;\n} }), Jd = rd(Id), Kd = m({}, sd, { data: 0 }), Ld = rd(Kd), Md = {\n  Esc: \"Escape\",\n  Spacebar: \" \",\n  Left: \"ArrowLeft\",\n  Up: \"ArrowUp\",\n  Right: \"ArrowRight\",\n  Down: \"ArrowDown\",\n  Del: \"Delete\",\n  Win: \"OS\",\n  Menu: \"ContextMenu\",\n  Apps: \"ContextMenu\",\n  Scroll: \"ScrollLock\",\n  MozPrintableKey: \"Unidentified\"\n}, Nd = {\n  8: \"Backspace\",\n  9: \"Tab\",\n  12: \"Clear\",\n  13: \"Enter\",\n  16: \"Shift\",\n  17: \"Control\",\n  18: \"Alt\",\n  19: \"Pause\",\n  20: \"CapsLock\",\n  27: \"Escape\",\n  32: \" \",\n  33: \"PageUp\",\n  34: \"PageDown\",\n  35: \"End\",\n  36: \"Home\",\n  37: \"ArrowLeft\",\n  38: \"ArrowUp\",\n  39: \"ArrowRight\",\n  40: \"ArrowDown\",\n  45: \"Insert\",\n  46: \"Delete\",\n  112: \"F1\",\n  113: \"F2\",\n  114: \"F3\",\n  115: \"F4\",\n  116: \"F5\",\n  117: \"F6\",\n  118: \"F7\",\n  119: \"F8\",\n  120: \"F9\",\n  121: \"F10\",\n  122: \"F11\",\n  123: \"F12\",\n  144: \"NumLock\",\n  145: \"ScrollLock\",\n  224: \"Meta\"\n}, Od = { Alt: \"altKey\", Control: \"ctrlKey\", Meta: \"metaKey\", Shift: \"shiftKey\" };\nfunction Pd(a) {\n  var b = this.nativeEvent;\n  return b.getModifierState ? b.getModifierState(a) : (a = Od[a]) ? !!b[a] : false;\n}\nfunction zd() {\n  return Pd;\n}\nvar Qd = m({}, ud, { key: function(a) {\n  if (a.key) {\n    var b = Md[a.key] || a.key;\n    if (b !== \"Unidentified\")\n      return b;\n  }\n  return a.type === \"keypress\" ? (a = od(a), a === 13 ? \"Enter\" : String.fromCharCode(a)) : a.type === \"keydown\" || a.type === \"keyup\" ? Nd[a.keyCode] || \"Unidentified\" : \"\";\n}, code: 0, location: 0, ctrlKey: 0, shiftKey: 0, altKey: 0, metaKey: 0, repeat: 0, locale: 0, getModifierState: zd, charCode: function(a) {\n  return a.type === \"keypress\" ? od(a) : 0;\n}, keyCode: function(a) {\n  return a.type === \"keydown\" || a.type === \"keyup\" ? a.keyCode : 0;\n}, which: function(a) {\n  return a.type === \"keypress\" ? od(a) : a.type === \"keydown\" || a.type === \"keyup\" ? a.keyCode : 0;\n} }), Rd = rd(Qd), Sd = m({}, Ad, { pointerId: 0, width: 0, height: 0, pressure: 0, tangentialPressure: 0, tiltX: 0, tiltY: 0, twist: 0, pointerType: 0, isPrimary: 0 }), Td = rd(Sd), Ud = m({}, ud, { touches: 0, targetTouches: 0, changedTouches: 0, altKey: 0, metaKey: 0, ctrlKey: 0, shiftKey: 0, getModifierState: zd }), Vd = rd(Ud), Wd = m({}, sd, { propertyName: 0, elapsedTime: 0, pseudoElement: 0 }), Xd = rd(Wd), Yd = m({}, Ad, {\n  deltaX: function(a) {\n    return \"deltaX\" in a ? a.deltaX : \"wheelDeltaX\" in a ? -a.wheelDeltaX : 0;\n  },\n  deltaY: function(a) {\n    return \"deltaY\" in a ? a.deltaY : \"wheelDeltaY\" in a ? -a.wheelDeltaY : \"wheelDelta\" in a ? -a.wheelDelta : 0;\n  },\n  deltaZ: 0,\n  deltaMode: 0\n}), Zd = rd(Yd), $d = [9, 13, 27, 32], ae = fa && \"CompositionEvent\" in window, be = null;\nfa && \"documentMode\" in document && (be = document.documentMode);\nvar ce = fa && \"TextEvent\" in window && !be, de = fa && (!ae || be && 8 < be && 11 >= be), ee = String.fromCharCode(32), fe = false;\nfunction ge(a, b) {\n  switch (a) {\n    case \"keyup\":\n      return $d.indexOf(b.keyCode) !== -1;\n    case \"keydown\":\n      return b.keyCode !== 229;\n    case \"keypress\":\n    case \"mousedown\":\n    case \"focusout\":\n      return true;\n    default:\n      return false;\n  }\n}\nfunction he(a) {\n  a = a.detail;\n  return typeof a === \"object\" && \"data\" in a ? a.data : null;\n}\nvar ie = false;\nfunction je(a, b) {\n  switch (a) {\n    case \"compositionend\":\n      return he(b);\n    case \"keypress\":\n      if (b.which !== 32)\n        return null;\n      fe = true;\n      return ee;\n    case \"textInput\":\n      return a = b.data, a === ee && fe ? null : a;\n    default:\n      return null;\n  }\n}\nfunction ke(a, b) {\n  if (ie)\n    return a === \"compositionend\" || !ae && ge(a, b) ? (a = nd(), md = ld = kd = null, ie = false, a) : null;\n  switch (a) {\n    case \"paste\":\n      return null;\n    case \"keypress\":\n      if (!(b.ctrlKey || b.altKey || b.metaKey) || b.ctrlKey && b.altKey) {\n        if (b.char && 1 < b.char.length)\n          return b.char;\n        if (b.which)\n          return String.fromCharCode(b.which);\n      }\n      return null;\n    case \"compositionend\":\n      return de && b.locale !== \"ko\" ? null : b.data;\n    default:\n      return null;\n  }\n}\nvar le = { color: true, date: true, datetime: true, \"datetime-local\": true, email: true, month: true, number: true, password: true, range: true, search: true, tel: true, text: true, time: true, url: true, week: true };\nfunction me(a) {\n  var b = a && a.nodeName && a.nodeName.toLowerCase();\n  return b === \"input\" ? !!le[a.type] : b === \"textarea\" ? true : false;\n}\nfunction ne(a, b, c, d) {\n  Eb(d);\n  b = oe(b, \"onChange\");\n  0 < b.length && (c = new td(\"onChange\", \"change\", null, c, d), a.push({ event: c, listeners: b }));\n}\nvar pe = null, qe = null;\nfunction re(a) {\n  se(a, 0);\n}\nfunction te(a) {\n  var b = ue(a);\n  if (Wa(b))\n    return a;\n}\nfunction ve(a, b) {\n  if (a === \"change\")\n    return b;\n}\nvar we = false;\nif (fa) {\n  var xe;\n  if (fa) {\n    var ye = \"oninput\" in document;\n    if (!ye) {\n      var ze = document.createElement(\"div\");\n      ze.setAttribute(\"oninput\", \"return;\");\n      ye = typeof ze.oninput === \"function\";\n    }\n    xe = ye;\n  } else\n    xe = false;\n  we = xe && (!document.documentMode || 9 < document.documentMode);\n}\nfunction Ae() {\n  pe && (pe.detachEvent(\"onpropertychange\", Be), qe = pe = null);\n}\nfunction Be(a) {\n  if (a.propertyName === \"value\" && te(qe)) {\n    var b = [];\n    ne(b, qe, a, xb(a));\n    a = re;\n    if (Kb)\n      a(b);\n    else {\n      Kb = true;\n      try {\n        Gb(a, b);\n      } finally {\n        Kb = false, Mb();\n      }\n    }\n  }\n}\nfunction Ce(a, b, c) {\n  a === \"focusin\" ? (Ae(), pe = b, qe = c, pe.attachEvent(\"onpropertychange\", Be)) : a === \"focusout\" && Ae();\n}\nfunction De(a) {\n  if (a === \"selectionchange\" || a === \"keyup\" || a === \"keydown\")\n    return te(qe);\n}\nfunction Ee(a, b) {\n  if (a === \"click\")\n    return te(b);\n}\nfunction Fe(a, b) {\n  if (a === \"input\" || a === \"change\")\n    return te(b);\n}\nfunction Ge(a, b) {\n  return a === b && (a !== 0 || 1 / a === 1 / b) || a !== a && b !== b;\n}\nvar He = typeof Object.is === \"function\" ? Object.is : Ge, Ie = Object.prototype.hasOwnProperty;\nfunction Je(a, b) {\n  if (He(a, b))\n    return true;\n  if (typeof a !== \"object\" || a === null || typeof b !== \"object\" || b === null)\n    return false;\n  var c = Object.keys(a), d = Object.keys(b);\n  if (c.length !== d.length)\n    return false;\n  for (d = 0; d < c.length; d++)\n    if (!Ie.call(b, c[d]) || !He(a[c[d]], b[c[d]]))\n      return false;\n  return true;\n}\nfunction Ke(a) {\n  for (; a && a.firstChild; )\n    a = a.firstChild;\n  return a;\n}\nfunction Le(a, b) {\n  var c = Ke(a);\n  a = 0;\n  for (var d; c; ) {\n    if (c.nodeType === 3) {\n      d = a + c.textContent.length;\n      if (a <= b && d >= b)\n        return { node: c, offset: b - a };\n      a = d;\n    }\n    a: {\n      for (; c; ) {\n        if (c.nextSibling) {\n          c = c.nextSibling;\n          break a;\n        }\n        c = c.parentNode;\n      }\n      c = void 0;\n    }\n    c = Ke(c);\n  }\n}\nfunction Me(a, b) {\n  return a && b ? a === b ? true : a && a.nodeType === 3 ? false : b && b.nodeType === 3 ? Me(a, b.parentNode) : \"contains\" in a ? a.contains(b) : a.compareDocumentPosition ? !!(a.compareDocumentPosition(b) & 16) : false : false;\n}\nfunction Ne() {\n  for (var a = window, b = Xa(); b instanceof a.HTMLIFrameElement; ) {\n    try {\n      var c = typeof b.contentWindow.location.href === \"string\";\n    } catch (d) {\n      c = false;\n    }\n    if (c)\n      a = b.contentWindow;\n    else\n      break;\n    b = Xa(a.document);\n  }\n  return b;\n}\nfunction Oe(a) {\n  var b = a && a.nodeName && a.nodeName.toLowerCase();\n  return b && (b === \"input\" && (a.type === \"text\" || a.type === \"search\" || a.type === \"tel\" || a.type === \"url\" || a.type === \"password\") || b === \"textarea\" || a.contentEditable === \"true\");\n}\nvar Pe = fa && \"documentMode\" in document && 11 >= document.documentMode, Qe = null, Re = null, Se = null, Te = false;\nfunction Ue(a, b, c) {\n  var d = c.window === c ? c.document : c.nodeType === 9 ? c : c.ownerDocument;\n  Te || Qe == null || Qe !== Xa(d) || (d = Qe, \"selectionStart\" in d && Oe(d) ? d = { start: d.selectionStart, end: d.selectionEnd } : (d = (d.ownerDocument && d.ownerDocument.defaultView || window).getSelection(), d = { anchorNode: d.anchorNode, anchorOffset: d.anchorOffset, focusNode: d.focusNode, focusOffset: d.focusOffset }), Se && Je(Se, d) || (Se = d, d = oe(Re, \"onSelect\"), 0 < d.length && (b = new td(\"onSelect\", \"select\", null, b, c), a.push({ event: b, listeners: d }), b.target = Qe)));\n}\nPc(\"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);\nPc(\"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);\nPc(Oc, 2);\nfor (var Ve = \"change selectionchange textInput compositionstart compositionend compositionupdate\".split(\" \"), We = 0; We < Ve.length; We++)\n  Nc.set(Ve[We], 0);\nea(\"onMouseEnter\", [\"mouseout\", \"mouseover\"]);\nea(\"onMouseLeave\", [\"mouseout\", \"mouseover\"]);\nea(\"onPointerEnter\", [\"pointerout\", \"pointerover\"]);\nea(\"onPointerLeave\", [\"pointerout\", \"pointerover\"]);\nda(\"onChange\", \"change click focusin focusout input keydown keyup selectionchange\".split(\" \"));\nda(\"onSelect\", \"focusout contextmenu dragend focusin keydown keyup mousedown mouseup selectionchange\".split(\" \"));\nda(\"onBeforeInput\", [\"compositionend\", \"keypress\", \"textInput\", \"paste\"]);\nda(\"onCompositionEnd\", \"compositionend focusout keydown keypress keyup mousedown\".split(\" \"));\nda(\"onCompositionStart\", \"compositionstart focusout keydown keypress keyup mousedown\".split(\" \"));\nda(\"onCompositionUpdate\", \"compositionupdate focusout keydown keypress keyup mousedown\".split(\" \"));\nvar Xe = \"abort canplay canplaythrough durationchange emptied encrypted ended error loadeddata loadedmetadata loadstart pause play playing progress ratechange seeked seeking stalled suspend timeupdate volumechange waiting\".split(\" \"), Ye = new Set(\"cancel close invalid load scroll toggle\".split(\" \").concat(Xe));\nfunction Ze(a, b, c) {\n  var d = a.type || \"unknown-event\";\n  a.currentTarget = c;\n  Yb(d, b, void 0, a);\n  a.currentTarget = null;\n}\nfunction se(a, b) {\n  b = (b & 4) !== 0;\n  for (var c = 0; c < a.length; c++) {\n    var d = a[c], e = d.event;\n    d = d.listeners;\n    a: {\n      var f = void 0;\n      if (b)\n        for (var g = d.length - 1; 0 <= g; g--) {\n          var h = d[g], k = h.instance, l2 = h.currentTarget;\n          h = h.listener;\n          if (k !== f && e.isPropagationStopped())\n            break a;\n          Ze(e, h, l2);\n          f = k;\n        }\n      else\n        for (g = 0; g < d.length; g++) {\n          h = d[g];\n          k = h.instance;\n          l2 = h.currentTarget;\n          h = h.listener;\n          if (k !== f && e.isPropagationStopped())\n            break a;\n          Ze(e, h, l2);\n          f = k;\n        }\n    }\n  }\n  if (Ub)\n    throw a = Vb, Ub = false, Vb = null, a;\n}\nfunction G(a, b) {\n  var c = $e(b), d = a + \"__bubble\";\n  c.has(d) || (af(b, a, 2, false), c.add(d));\n}\nvar bf = \"_reactListening\" + Math.random().toString(36).slice(2);\nfunction cf(a) {\n  a[bf] || (a[bf] = true, ba.forEach(function(b) {\n    Ye.has(b) || df(b, false, a, null);\n    df(b, true, a, null);\n  }));\n}\nfunction df(a, b, c, d) {\n  var e = 4 < arguments.length && arguments[4] !== void 0 ? arguments[4] : 0, f = c;\n  a === \"selectionchange\" && c.nodeType !== 9 && (f = c.ownerDocument);\n  if (d !== null && !b && Ye.has(a)) {\n    if (a !== \"scroll\")\n      return;\n    e |= 2;\n    f = d;\n  }\n  var g = $e(f), h = a + \"__\" + (b ? \"capture\" : \"bubble\");\n  g.has(h) || (b && (e |= 4), af(f, a, e, b), g.add(h));\n}\nfunction af(a, b, c, d) {\n  var e = Nc.get(b);\n  switch (e === void 0 ? 2 : e) {\n    case 0:\n      e = gd;\n      break;\n    case 1:\n      e = id;\n      break;\n    default:\n      e = hd;\n  }\n  c = e.bind(null, b, c, a);\n  e = void 0;\n  !Pb || b !== \"touchstart\" && b !== \"touchmove\" && b !== \"wheel\" || (e = true);\n  d ? e !== void 0 ? a.addEventListener(b, c, { capture: true, passive: e }) : a.addEventListener(b, c, true) : e !== void 0 ? a.addEventListener(b, c, { passive: e }) : a.addEventListener(b, c, false);\n}\nfunction jd(a, b, c, d, e) {\n  var f = d;\n  if ((b & 1) === 0 && (b & 2) === 0 && d !== null)\n    a:\n      for (; ; ) {\n        if (d === null)\n          return;\n        var g = d.tag;\n        if (g === 3 || g === 4) {\n          var h = d.stateNode.containerInfo;\n          if (h === e || h.nodeType === 8 && h.parentNode === e)\n            break;\n          if (g === 4)\n            for (g = d.return; g !== null; ) {\n              var k = g.tag;\n              if (k === 3 || k === 4) {\n                if (k = g.stateNode.containerInfo, k === e || k.nodeType === 8 && k.parentNode === e)\n                  return;\n              }\n              g = g.return;\n            }\n          for (; h !== null; ) {\n            g = wc(h);\n            if (g === null)\n              return;\n            k = g.tag;\n            if (k === 5 || k === 6) {\n              d = f = g;\n              continue a;\n            }\n            h = h.parentNode;\n          }\n        }\n        d = d.return;\n      }\n  Nb(function() {\n    var d2 = f, e2 = xb(c), g2 = [];\n    a: {\n      var h2 = Mc.get(a);\n      if (h2 !== void 0) {\n        var k2 = td, x2 = a;\n        switch (a) {\n          case \"keypress\":\n            if (od(c) === 0)\n              break a;\n          case \"keydown\":\n          case \"keyup\":\n            k2 = Rd;\n            break;\n          case \"focusin\":\n            x2 = \"focus\";\n            k2 = Fd;\n            break;\n          case \"focusout\":\n            x2 = \"blur\";\n            k2 = Fd;\n            break;\n          case \"beforeblur\":\n          case \"afterblur\":\n            k2 = Fd;\n            break;\n          case \"click\":\n            if (c.button === 2)\n              break a;\n          case \"auxclick\":\n          case \"dblclick\":\n          case \"mousedown\":\n          case \"mousemove\":\n          case \"mouseup\":\n          case \"mouseout\":\n          case \"mouseover\":\n          case \"contextmenu\":\n            k2 = Bd;\n            break;\n          case \"drag\":\n          case \"dragend\":\n          case \"dragenter\":\n          case \"dragexit\":\n          case \"dragleave\":\n          case \"dragover\":\n          case \"dragstart\":\n          case \"drop\":\n            k2 = Dd;\n            break;\n          case \"touchcancel\":\n          case \"touchend\":\n          case \"touchmove\":\n          case \"touchstart\":\n            k2 = Vd;\n            break;\n          case Ic:\n          case Jc:\n          case Kc:\n            k2 = Hd;\n            break;\n          case Lc:\n            k2 = Xd;\n            break;\n          case \"scroll\":\n            k2 = vd;\n            break;\n          case \"wheel\":\n            k2 = Zd;\n            break;\n          case \"copy\":\n          case \"cut\":\n          case \"paste\":\n            k2 = Jd;\n            break;\n          case \"gotpointercapture\":\n          case \"lostpointercapture\":\n          case \"pointercancel\":\n          case \"pointerdown\":\n          case \"pointermove\":\n          case \"pointerout\":\n          case \"pointerover\":\n          case \"pointerup\":\n            k2 = Td;\n        }\n        var w = (b & 4) !== 0, z2 = !w && a === \"scroll\", u2 = w ? h2 !== null ? h2 + \"Capture\" : null : h2;\n        w = [];\n        for (var t2 = d2, q2; t2 !== null; ) {\n          q2 = t2;\n          var v2 = q2.stateNode;\n          q2.tag === 5 && v2 !== null && (q2 = v2, u2 !== null && (v2 = Ob(t2, u2), v2 != null && w.push(ef(t2, v2, q2))));\n          if (z2)\n            break;\n          t2 = t2.return;\n        }\n        0 < w.length && (h2 = new k2(h2, x2, null, c, e2), g2.push({ event: h2, listeners: w }));\n      }\n    }\n    if ((b & 7) === 0) {\n      a: {\n        h2 = a === \"mouseover\" || a === \"pointerover\";\n        k2 = a === \"mouseout\" || a === \"pointerout\";\n        if (h2 && (b & 16) === 0 && (x2 = c.relatedTarget || c.fromElement) && (wc(x2) || x2[ff]))\n          break a;\n        if (k2 || h2) {\n          h2 = e2.window === e2 ? e2 : (h2 = e2.ownerDocument) ? h2.defaultView || h2.parentWindow : window;\n          if (k2) {\n            if (x2 = c.relatedTarget || c.toElement, k2 = d2, x2 = x2 ? wc(x2) : null, x2 !== null && (z2 = Zb(x2), x2 !== z2 || x2.tag !== 5 && x2.tag !== 6))\n              x2 = null;\n          } else\n            k2 = null, x2 = d2;\n          if (k2 !== x2) {\n            w = Bd;\n            v2 = \"onMouseLeave\";\n            u2 = \"onMouseEnter\";\n            t2 = \"mouse\";\n            if (a === \"pointerout\" || a === \"pointerover\")\n              w = Td, v2 = \"onPointerLeave\", u2 = \"onPointerEnter\", t2 = \"pointer\";\n            z2 = k2 == null ? h2 : ue(k2);\n            q2 = x2 == null ? h2 : ue(x2);\n            h2 = new w(v2, t2 + \"leave\", k2, c, e2);\n            h2.target = z2;\n            h2.relatedTarget = q2;\n            v2 = null;\n            wc(e2) === d2 && (w = new w(u2, t2 + \"enter\", x2, c, e2), w.target = q2, w.relatedTarget = z2, v2 = w);\n            z2 = v2;\n            if (k2 && x2)\n              b: {\n                w = k2;\n                u2 = x2;\n                t2 = 0;\n                for (q2 = w; q2; q2 = gf(q2))\n                  t2++;\n                q2 = 0;\n                for (v2 = u2; v2; v2 = gf(v2))\n                  q2++;\n                for (; 0 < t2 - q2; )\n                  w = gf(w), t2--;\n                for (; 0 < q2 - t2; )\n                  u2 = gf(u2), q2--;\n                for (; t2--; ) {\n                  if (w === u2 || u2 !== null && w === u2.alternate)\n                    break b;\n                  w = gf(w);\n                  u2 = gf(u2);\n                }\n                w = null;\n              }\n            else\n              w = null;\n            k2 !== null && hf(g2, h2, k2, w, false);\n            x2 !== null && z2 !== null && hf(g2, z2, x2, w, true);\n          }\n        }\n      }\n      a: {\n        h2 = d2 ? ue(d2) : window;\n        k2 = h2.nodeName && h2.nodeName.toLowerCase();\n        if (k2 === \"select\" || k2 === \"input\" && h2.type === \"file\")\n          var J2 = ve;\n        else if (me(h2))\n          if (we)\n            J2 = Fe;\n          else {\n            J2 = De;\n            var K2 = Ce;\n          }\n        else\n          (k2 = h2.nodeName) && k2.toLowerCase() === \"input\" && (h2.type === \"checkbox\" || h2.type === \"radio\") && (J2 = Ee);\n        if (J2 && (J2 = J2(a, d2))) {\n          ne(g2, J2, c, e2);\n          break a;\n        }\n        K2 && K2(a, h2, d2);\n        a === \"focusout\" && (K2 = h2._wrapperState) && K2.controlled && h2.type === \"number\" && bb(h2, \"number\", h2.value);\n      }\n      K2 = d2 ? ue(d2) : window;\n      switch (a) {\n        case \"focusin\":\n          if (me(K2) || K2.contentEditable === \"true\")\n            Qe = K2, Re = d2, Se = null;\n          break;\n        case \"focusout\":\n          Se = Re = Qe = null;\n          break;\n        case \"mousedown\":\n          Te = true;\n          break;\n        case \"contextmenu\":\n        case \"mouseup\":\n        case \"dragend\":\n          Te = false;\n          Ue(g2, c, e2);\n          break;\n        case \"selectionchange\":\n          if (Pe)\n            break;\n        case \"keydown\":\n        case \"keyup\":\n          Ue(g2, c, e2);\n      }\n      var Q2;\n      if (ae)\n        b: {\n          switch (a) {\n            case \"compositionstart\":\n              var L2 = \"onCompositionStart\";\n              break b;\n            case \"compositionend\":\n              L2 = \"onCompositionEnd\";\n              break b;\n            case \"compositionupdate\":\n              L2 = \"onCompositionUpdate\";\n              break b;\n          }\n          L2 = void 0;\n        }\n      else\n        ie ? ge(a, c) && (L2 = \"onCompositionEnd\") : a === \"keydown\" && c.keyCode === 229 && (L2 = \"onCompositionStart\");\n      L2 && (de && c.locale !== \"ko\" && (ie || L2 !== \"onCompositionStart\" ? L2 === \"onCompositionEnd\" && ie && (Q2 = nd()) : (kd = e2, ld = \"value\" in kd ? kd.value : kd.textContent, ie = true)), K2 = oe(d2, L2), 0 < K2.length && (L2 = new Ld(L2, a, null, c, e2), g2.push({ event: L2, listeners: K2 }), Q2 ? L2.data = Q2 : (Q2 = he(c), Q2 !== null && (L2.data = Q2))));\n      if (Q2 = ce ? je(a, c) : ke(a, c))\n        d2 = oe(d2, \"onBeforeInput\"), 0 < d2.length && (e2 = new Ld(\"onBeforeInput\", \"beforeinput\", null, c, e2), g2.push({ event: e2, listeners: d2 }), e2.data = Q2);\n    }\n    se(g2, b);\n  });\n}\nfunction ef(a, b, c) {\n  return { instance: a, listener: b, currentTarget: c };\n}\nfunction oe(a, b) {\n  for (var c = b + \"Capture\", d = []; a !== null; ) {\n    var e = a, f = e.stateNode;\n    e.tag === 5 && f !== null && (e = f, f = Ob(a, c), f != null && d.unshift(ef(a, f, e)), f = Ob(a, b), f != null && d.push(ef(a, f, e)));\n    a = a.return;\n  }\n  return d;\n}\nfunction gf(a) {\n  if (a === null)\n    return null;\n  do\n    a = a.return;\n  while (a && a.tag !== 5);\n  return a ? a : null;\n}\nfunction hf(a, b, c, d, e) {\n  for (var f = b._reactName, g = []; c !== null && c !== d; ) {\n    var h = c, k = h.alternate, l2 = h.stateNode;\n    if (k !== null && k === d)\n      break;\n    h.tag === 5 && l2 !== null && (h = l2, e ? (k = Ob(c, f), k != null && g.unshift(ef(c, k, h))) : e || (k = Ob(c, f), k != null && g.push(ef(c, k, h))));\n    c = c.return;\n  }\n  g.length !== 0 && a.push({ event: b, listeners: g });\n}\nfunction jf() {\n}\nvar kf = null, lf = null;\nfunction mf(a, b) {\n  switch (a) {\n    case \"button\":\n    case \"input\":\n    case \"select\":\n    case \"textarea\":\n      return !!b.autoFocus;\n  }\n  return false;\n}\nfunction nf(a, b) {\n  return a === \"textarea\" || a === \"option\" || a === \"noscript\" || typeof b.children === \"string\" || typeof b.children === \"number\" || typeof b.dangerouslySetInnerHTML === \"object\" && b.dangerouslySetInnerHTML !== null && b.dangerouslySetInnerHTML.__html != null;\n}\nvar of = typeof setTimeout === \"function\" ? setTimeout : void 0, pf = typeof clearTimeout === \"function\" ? clearTimeout : void 0;\nfunction qf(a) {\n  a.nodeType === 1 ? a.textContent = \"\" : a.nodeType === 9 && (a = a.body, a != null && (a.textContent = \"\"));\n}\nfunction rf(a) {\n  for (; a != null; a = a.nextSibling) {\n    var b = a.nodeType;\n    if (b === 1 || b === 3)\n      break;\n  }\n  return a;\n}\nfunction sf(a) {\n  a = a.previousSibling;\n  for (var b = 0; a; ) {\n    if (a.nodeType === 8) {\n      var c = a.data;\n      if (c === \"$\" || c === \"$!\" || c === \"$?\") {\n        if (b === 0)\n          return a;\n        b--;\n      } else\n        c === \"/$\" && b++;\n    }\n    a = a.previousSibling;\n  }\n  return null;\n}\nvar tf = 0;\nfunction uf(a) {\n  return { $$typeof: Ga, toString: a, valueOf: a };\n}\nvar vf = Math.random().toString(36).slice(2), wf = \"__reactFiber$\" + vf, xf = \"__reactProps$\" + vf, ff = \"__reactContainer$\" + vf, yf = \"__reactEvents$\" + vf;\nfunction wc(a) {\n  var b = a[wf];\n  if (b)\n    return b;\n  for (var c = a.parentNode; c; ) {\n    if (b = c[ff] || c[wf]) {\n      c = b.alternate;\n      if (b.child !== null || c !== null && c.child !== null)\n        for (a = sf(a); a !== null; ) {\n          if (c = a[wf])\n            return c;\n          a = sf(a);\n        }\n      return b;\n    }\n    a = c;\n    c = a.parentNode;\n  }\n  return null;\n}\nfunction Cb(a) {\n  a = a[wf] || a[ff];\n  return !a || a.tag !== 5 && a.tag !== 6 && a.tag !== 13 && a.tag !== 3 ? null : a;\n}\nfunction ue(a) {\n  if (a.tag === 5 || a.tag === 6)\n    return a.stateNode;\n  throw Error(y(33));\n}\nfunction Db(a) {\n  return a[xf] || null;\n}\nfunction $e(a) {\n  var b = a[yf];\n  b === void 0 && (b = a[yf] = new Set());\n  return b;\n}\nvar zf = [], Af = -1;\nfunction Bf(a) {\n  return { current: a };\n}\nfunction H(a) {\n  0 > Af || (a.current = zf[Af], zf[Af] = null, Af--);\n}\nfunction I(a, b) {\n  Af++;\n  zf[Af] = a.current;\n  a.current = b;\n}\nvar Cf = {}, M = Bf(Cf), N = Bf(false), Df = Cf;\nfunction Ef(a, b) {\n  var c = a.type.contextTypes;\n  if (!c)\n    return Cf;\n  var d = a.stateNode;\n  if (d && d.__reactInternalMemoizedUnmaskedChildContext === b)\n    return d.__reactInternalMemoizedMaskedChildContext;\n  var e = {}, f;\n  for (f in c)\n    e[f] = b[f];\n  d && (a = a.stateNode, a.__reactInternalMemoizedUnmaskedChildContext = b, a.__reactInternalMemoizedMaskedChildContext = e);\n  return e;\n}\nfunction Ff(a) {\n  a = a.childContextTypes;\n  return a !== null && a !== void 0;\n}\nfunction Gf() {\n  H(N);\n  H(M);\n}\nfunction Hf(a, b, c) {\n  if (M.current !== Cf)\n    throw Error(y(168));\n  I(M, b);\n  I(N, c);\n}\nfunction If(a, b, c) {\n  var d = a.stateNode;\n  a = b.childContextTypes;\n  if (typeof d.getChildContext !== \"function\")\n    return c;\n  d = d.getChildContext();\n  for (var e in d)\n    if (!(e in a))\n      throw Error(y(108, Ra(b) || \"Unknown\", e));\n  return m({}, c, d);\n}\nfunction Jf(a) {\n  a = (a = a.stateNode) && a.__reactInternalMemoizedMergedChildContext || Cf;\n  Df = M.current;\n  I(M, a);\n  I(N, N.current);\n  return true;\n}\nfunction Kf(a, b, c) {\n  var d = a.stateNode;\n  if (!d)\n    throw Error(y(169));\n  c ? (a = If(a, b, Df), d.__reactInternalMemoizedMergedChildContext = a, H(N), H(M), I(M, a)) : H(N);\n  I(N, c);\n}\nvar Lf = null, Mf = null, Nf = r.unstable_runWithPriority, Of = r.unstable_scheduleCallback, Pf = r.unstable_cancelCallback, Qf = r.unstable_shouldYield, Rf = r.unstable_requestPaint, Sf = r.unstable_now, Tf = r.unstable_getCurrentPriorityLevel, Uf = r.unstable_ImmediatePriority, Vf = r.unstable_UserBlockingPriority, Wf = r.unstable_NormalPriority, Xf = r.unstable_LowPriority, Yf = r.unstable_IdlePriority, Zf = {}, $f = Rf !== void 0 ? Rf : function() {\n}, ag = null, bg = null, cg = false, dg = Sf(), O = 1e4 > dg ? Sf : function() {\n  return Sf() - dg;\n};\nfunction eg() {\n  switch (Tf()) {\n    case Uf:\n      return 99;\n    case Vf:\n      return 98;\n    case Wf:\n      return 97;\n    case Xf:\n      return 96;\n    case Yf:\n      return 95;\n    default:\n      throw Error(y(332));\n  }\n}\nfunction fg(a) {\n  switch (a) {\n    case 99:\n      return Uf;\n    case 98:\n      return Vf;\n    case 97:\n      return Wf;\n    case 96:\n      return Xf;\n    case 95:\n      return Yf;\n    default:\n      throw Error(y(332));\n  }\n}\nfunction gg(a, b) {\n  a = fg(a);\n  return Nf(a, b);\n}\nfunction hg(a, b, c) {\n  a = fg(a);\n  return Of(a, b, c);\n}\nfunction ig() {\n  if (bg !== null) {\n    var a = bg;\n    bg = null;\n    Pf(a);\n  }\n  jg();\n}\nfunction jg() {\n  if (!cg && ag !== null) {\n    cg = true;\n    var a = 0;\n    try {\n      var b = ag;\n      gg(99, function() {\n        for (; a < b.length; a++) {\n          var c = b[a];\n          do\n            c = c(true);\n          while (c !== null);\n        }\n      });\n      ag = null;\n    } catch (c) {\n      throw ag !== null && (ag = ag.slice(a + 1)), Of(Uf, ig), c;\n    } finally {\n      cg = false;\n    }\n  }\n}\nvar kg = ra.ReactCurrentBatchConfig;\nfunction lg(a, b) {\n  if (a && a.defaultProps) {\n    b = m({}, b);\n    a = a.defaultProps;\n    for (var c in a)\n      b[c] === void 0 && (b[c] = a[c]);\n    return b;\n  }\n  return b;\n}\nvar mg = Bf(null), ng = null, og = null, pg = null;\nfunction qg() {\n  pg = og = ng = null;\n}\nfunction rg(a) {\n  var b = mg.current;\n  H(mg);\n  a.type._context._currentValue = b;\n}\nfunction sg(a, b) {\n  for (; a !== null; ) {\n    var c = a.alternate;\n    if ((a.childLanes & b) === b)\n      if (c === null || (c.childLanes & b) === b)\n        break;\n      else\n        c.childLanes |= b;\n    else\n      a.childLanes |= b, c !== null && (c.childLanes |= b);\n    a = a.return;\n  }\n}\nfunction tg(a, b) {\n  ng = a;\n  pg = og = null;\n  a = a.dependencies;\n  a !== null && a.firstContext !== null && ((a.lanes & b) !== 0 && (ug = true), a.firstContext = null);\n}\nfunction vg(a, b) {\n  if (pg !== a && b !== false && b !== 0) {\n    if (typeof b !== \"number\" || b === 1073741823)\n      pg = a, b = 1073741823;\n    b = { context: a, observedBits: b, next: null };\n    if (og === null) {\n      if (ng === null)\n        throw Error(y(308));\n      og = b;\n      ng.dependencies = { lanes: 0, firstContext: b, responders: null };\n    } else\n      og = og.next = b;\n  }\n  return a._currentValue;\n}\nvar wg = false;\nfunction xg(a) {\n  a.updateQueue = { baseState: a.memoizedState, firstBaseUpdate: null, lastBaseUpdate: null, shared: { pending: null }, effects: null };\n}\nfunction yg(a, b) {\n  a = a.updateQueue;\n  b.updateQueue === a && (b.updateQueue = { baseState: a.baseState, firstBaseUpdate: a.firstBaseUpdate, lastBaseUpdate: a.lastBaseUpdate, shared: a.shared, effects: a.effects });\n}\nfunction zg(a, b) {\n  return { eventTime: a, lane: b, tag: 0, payload: null, callback: null, next: null };\n}\nfunction Ag(a, b) {\n  a = a.updateQueue;\n  if (a !== null) {\n    a = a.shared;\n    var c = a.pending;\n    c === null ? b.next = b : (b.next = c.next, c.next = b);\n    a.pending = b;\n  }\n}\nfunction Bg(a, b) {\n  var c = a.updateQueue, d = a.alternate;\n  if (d !== null && (d = d.updateQueue, c === d)) {\n    var e = null, f = null;\n    c = c.firstBaseUpdate;\n    if (c !== null) {\n      do {\n        var g = { eventTime: c.eventTime, lane: c.lane, tag: c.tag, payload: c.payload, callback: c.callback, next: null };\n        f === null ? e = f = g : f = f.next = g;\n        c = c.next;\n      } while (c !== null);\n      f === null ? e = f = b : f = f.next = b;\n    } else\n      e = f = b;\n    c = { baseState: d.baseState, firstBaseUpdate: e, lastBaseUpdate: f, shared: d.shared, effects: d.effects };\n    a.updateQueue = c;\n    return;\n  }\n  a = c.lastBaseUpdate;\n  a === null ? c.firstBaseUpdate = b : a.next = b;\n  c.lastBaseUpdate = b;\n}\nfunction Cg(a, b, c, d) {\n  var e = a.updateQueue;\n  wg = false;\n  var f = e.firstBaseUpdate, g = e.lastBaseUpdate, h = e.shared.pending;\n  if (h !== null) {\n    e.shared.pending = null;\n    var k = h, l2 = k.next;\n    k.next = null;\n    g === null ? f = l2 : g.next = l2;\n    g = k;\n    var n2 = a.alternate;\n    if (n2 !== null) {\n      n2 = n2.updateQueue;\n      var A2 = n2.lastBaseUpdate;\n      A2 !== g && (A2 === null ? n2.firstBaseUpdate = l2 : A2.next = l2, n2.lastBaseUpdate = k);\n    }\n  }\n  if (f !== null) {\n    A2 = e.baseState;\n    g = 0;\n    n2 = l2 = k = null;\n    do {\n      h = f.lane;\n      var p2 = f.eventTime;\n      if ((d & h) === h) {\n        n2 !== null && (n2 = n2.next = {\n          eventTime: p2,\n          lane: 0,\n          tag: f.tag,\n          payload: f.payload,\n          callback: f.callback,\n          next: null\n        });\n        a: {\n          var C2 = a, x2 = f;\n          h = b;\n          p2 = c;\n          switch (x2.tag) {\n            case 1:\n              C2 = x2.payload;\n              if (typeof C2 === \"function\") {\n                A2 = C2.call(p2, A2, h);\n                break a;\n              }\n              A2 = C2;\n              break a;\n            case 3:\n              C2.flags = C2.flags & -4097 | 64;\n            case 0:\n              C2 = x2.payload;\n              h = typeof C2 === \"function\" ? C2.call(p2, A2, h) : C2;\n              if (h === null || h === void 0)\n                break a;\n              A2 = m({}, A2, h);\n              break a;\n            case 2:\n              wg = true;\n          }\n        }\n        f.callback !== null && (a.flags |= 32, h = e.effects, h === null ? e.effects = [f] : h.push(f));\n      } else\n        p2 = { eventTime: p2, lane: h, tag: f.tag, payload: f.payload, callback: f.callback, next: null }, n2 === null ? (l2 = n2 = p2, k = A2) : n2 = n2.next = p2, g |= h;\n      f = f.next;\n      if (f === null)\n        if (h = e.shared.pending, h === null)\n          break;\n        else\n          f = h.next, h.next = null, e.lastBaseUpdate = h, e.shared.pending = null;\n    } while (1);\n    n2 === null && (k = A2);\n    e.baseState = k;\n    e.firstBaseUpdate = l2;\n    e.lastBaseUpdate = n2;\n    Dg |= g;\n    a.lanes = g;\n    a.memoizedState = A2;\n  }\n}\nfunction Eg(a, b, c) {\n  a = b.effects;\n  b.effects = null;\n  if (a !== null)\n    for (b = 0; b < a.length; b++) {\n      var d = a[b], e = d.callback;\n      if (e !== null) {\n        d.callback = null;\n        d = c;\n        if (typeof e !== \"function\")\n          throw Error(y(191, e));\n        e.call(d);\n      }\n    }\n}\nvar Fg = new aa.Component().refs;\nfunction Gg(a, b, c, d) {\n  b = a.memoizedState;\n  c = c(d, b);\n  c = c === null || c === void 0 ? b : m({}, b, c);\n  a.memoizedState = c;\n  a.lanes === 0 && (a.updateQueue.baseState = c);\n}\nvar Kg = { isMounted: function(a) {\n  return (a = a._reactInternals) ? Zb(a) === a : false;\n}, enqueueSetState: function(a, b, c) {\n  a = a._reactInternals;\n  var d = Hg(), e = Ig(a), f = zg(d, e);\n  f.payload = b;\n  c !== void 0 && c !== null && (f.callback = c);\n  Ag(a, f);\n  Jg(a, e, d);\n}, enqueueReplaceState: function(a, b, c) {\n  a = a._reactInternals;\n  var d = Hg(), e = Ig(a), f = zg(d, e);\n  f.tag = 1;\n  f.payload = b;\n  c !== void 0 && c !== null && (f.callback = c);\n  Ag(a, f);\n  Jg(a, e, d);\n}, enqueueForceUpdate: function(a, b) {\n  a = a._reactInternals;\n  var c = Hg(), d = Ig(a), e = zg(c, d);\n  e.tag = 2;\n  b !== void 0 && b !== null && (e.callback = b);\n  Ag(a, e);\n  Jg(a, d, c);\n} };\nfunction Lg(a, b, c, d, e, f, g) {\n  a = a.stateNode;\n  return typeof a.shouldComponentUpdate === \"function\" ? a.shouldComponentUpdate(d, f, g) : b.prototype && b.prototype.isPureReactComponent ? !Je(c, d) || !Je(e, f) : true;\n}\nfunction Mg(a, b, c) {\n  var d = false, e = Cf;\n  var f = b.contextType;\n  typeof f === \"object\" && f !== null ? f = vg(f) : (e = Ff(b) ? Df : M.current, d = b.contextTypes, f = (d = d !== null && d !== void 0) ? Ef(a, e) : Cf);\n  b = new b(c, f);\n  a.memoizedState = b.state !== null && b.state !== void 0 ? b.state : null;\n  b.updater = Kg;\n  a.stateNode = b;\n  b._reactInternals = a;\n  d && (a = a.stateNode, a.__reactInternalMemoizedUnmaskedChildContext = e, a.__reactInternalMemoizedMaskedChildContext = f);\n  return b;\n}\nfunction Ng(a, b, c, d) {\n  a = b.state;\n  typeof b.componentWillReceiveProps === \"function\" && b.componentWillReceiveProps(c, d);\n  typeof b.UNSAFE_componentWillReceiveProps === \"function\" && b.UNSAFE_componentWillReceiveProps(c, d);\n  b.state !== a && Kg.enqueueReplaceState(b, b.state, null);\n}\nfunction Og(a, b, c, d) {\n  var e = a.stateNode;\n  e.props = c;\n  e.state = a.memoizedState;\n  e.refs = Fg;\n  xg(a);\n  var f = b.contextType;\n  typeof f === \"object\" && f !== null ? e.context = vg(f) : (f = Ff(b) ? Df : M.current, e.context = Ef(a, f));\n  Cg(a, c, e, d);\n  e.state = a.memoizedState;\n  f = b.getDerivedStateFromProps;\n  typeof f === \"function\" && (Gg(a, b, f, c), e.state = a.memoizedState);\n  typeof b.getDerivedStateFromProps === \"function\" || typeof e.getSnapshotBeforeUpdate === \"function\" || typeof e.UNSAFE_componentWillMount !== \"function\" && typeof e.componentWillMount !== \"function\" || (b = e.state, typeof e.componentWillMount === \"function\" && e.componentWillMount(), typeof e.UNSAFE_componentWillMount === \"function\" && e.UNSAFE_componentWillMount(), b !== e.state && Kg.enqueueReplaceState(e, e.state, null), Cg(a, c, e, d), e.state = a.memoizedState);\n  typeof e.componentDidMount === \"function\" && (a.flags |= 4);\n}\nvar Pg = Array.isArray;\nfunction Qg(a, b, c) {\n  a = c.ref;\n  if (a !== null && typeof a !== \"function\" && typeof a !== \"object\") {\n    if (c._owner) {\n      c = c._owner;\n      if (c) {\n        if (c.tag !== 1)\n          throw Error(y(309));\n        var d = c.stateNode;\n      }\n      if (!d)\n        throw Error(y(147, a));\n      var e = \"\" + a;\n      if (b !== null && b.ref !== null && typeof b.ref === \"function\" && b.ref._stringRef === e)\n        return b.ref;\n      b = function(a2) {\n        var b2 = d.refs;\n        b2 === Fg && (b2 = d.refs = {});\n        a2 === null ? delete b2[e] : b2[e] = a2;\n      };\n      b._stringRef = e;\n      return b;\n    }\n    if (typeof a !== \"string\")\n      throw Error(y(284));\n    if (!c._owner)\n      throw Error(y(290, a));\n  }\n  return a;\n}\nfunction Rg(a, b) {\n  if (a.type !== \"textarea\")\n    throw Error(y(31, Object.prototype.toString.call(b) === \"[object Object]\" ? \"object with keys {\" + Object.keys(b).join(\", \") + \"}\" : b));\n}\nfunction Sg(a) {\n  function b(b2, c2) {\n    if (a) {\n      var d2 = b2.lastEffect;\n      d2 !== null ? (d2.nextEffect = c2, b2.lastEffect = c2) : b2.firstEffect = b2.lastEffect = c2;\n      c2.nextEffect = null;\n      c2.flags = 8;\n    }\n  }\n  function c(c2, d2) {\n    if (!a)\n      return null;\n    for (; d2 !== null; )\n      b(c2, d2), d2 = d2.sibling;\n    return null;\n  }\n  function d(a2, b2) {\n    for (a2 = new Map(); b2 !== null; )\n      b2.key !== null ? a2.set(b2.key, b2) : a2.set(b2.index, b2), b2 = b2.sibling;\n    return a2;\n  }\n  function e(a2, b2) {\n    a2 = Tg(a2, b2);\n    a2.index = 0;\n    a2.sibling = null;\n    return a2;\n  }\n  function f(b2, c2, d2) {\n    b2.index = d2;\n    if (!a)\n      return c2;\n    d2 = b2.alternate;\n    if (d2 !== null)\n      return d2 = d2.index, d2 < c2 ? (b2.flags = 2, c2) : d2;\n    b2.flags = 2;\n    return c2;\n  }\n  function g(b2) {\n    a && b2.alternate === null && (b2.flags = 2);\n    return b2;\n  }\n  function h(a2, b2, c2, d2) {\n    if (b2 === null || b2.tag !== 6)\n      return b2 = Ug(c2, a2.mode, d2), b2.return = a2, b2;\n    b2 = e(b2, c2);\n    b2.return = a2;\n    return b2;\n  }\n  function k(a2, b2, c2, d2) {\n    if (b2 !== null && b2.elementType === c2.type)\n      return d2 = e(b2, c2.props), d2.ref = Qg(a2, b2, c2), d2.return = a2, d2;\n    d2 = Vg(c2.type, c2.key, c2.props, null, a2.mode, d2);\n    d2.ref = Qg(a2, b2, c2);\n    d2.return = a2;\n    return d2;\n  }\n  function l2(a2, b2, c2, d2) {\n    if (b2 === null || b2.tag !== 4 || b2.stateNode.containerInfo !== c2.containerInfo || b2.stateNode.implementation !== c2.implementation)\n      return b2 = Wg(c2, a2.mode, d2), b2.return = a2, b2;\n    b2 = e(b2, c2.children || []);\n    b2.return = a2;\n    return b2;\n  }\n  function n2(a2, b2, c2, d2, f2) {\n    if (b2 === null || b2.tag !== 7)\n      return b2 = Xg(c2, a2.mode, d2, f2), b2.return = a2, b2;\n    b2 = e(b2, c2);\n    b2.return = a2;\n    return b2;\n  }\n  function A2(a2, b2, c2) {\n    if (typeof b2 === \"string\" || typeof b2 === \"number\")\n      return b2 = Ug(\"\" + b2, a2.mode, c2), b2.return = a2, b2;\n    if (typeof b2 === \"object\" && b2 !== null) {\n      switch (b2.$$typeof) {\n        case sa:\n          return c2 = Vg(b2.type, b2.key, b2.props, null, a2.mode, c2), c2.ref = Qg(a2, null, b2), c2.return = a2, c2;\n        case ta:\n          return b2 = Wg(b2, a2.mode, c2), b2.return = a2, b2;\n      }\n      if (Pg(b2) || La(b2))\n        return b2 = Xg(b2, a2.mode, c2, null), b2.return = a2, b2;\n      Rg(a2, b2);\n    }\n    return null;\n  }\n  function p2(a2, b2, c2, d2) {\n    var e2 = b2 !== null ? b2.key : null;\n    if (typeof c2 === \"string\" || typeof c2 === \"number\")\n      return e2 !== null ? null : h(a2, b2, \"\" + c2, d2);\n    if (typeof c2 === \"object\" && c2 !== null) {\n      switch (c2.$$typeof) {\n        case sa:\n          return c2.key === e2 ? c2.type === ua ? n2(a2, b2, c2.props.children, d2, e2) : k(a2, b2, c2, d2) : null;\n        case ta:\n          return c2.key === e2 ? l2(a2, b2, c2, d2) : null;\n      }\n      if (Pg(c2) || La(c2))\n        return e2 !== null ? null : n2(a2, b2, c2, d2, null);\n      Rg(a2, c2);\n    }\n    return null;\n  }\n  function C2(a2, b2, c2, d2, e2) {\n    if (typeof d2 === \"string\" || typeof d2 === \"number\")\n      return a2 = a2.get(c2) || null, h(b2, a2, \"\" + d2, e2);\n    if (typeof d2 === \"object\" && d2 !== null) {\n      switch (d2.$$typeof) {\n        case sa:\n          return a2 = a2.get(d2.key === null ? c2 : d2.key) || null, d2.type === ua ? n2(b2, a2, d2.props.children, e2, d2.key) : k(b2, a2, d2, e2);\n        case ta:\n          return a2 = a2.get(d2.key === null ? c2 : d2.key) || null, l2(b2, a2, d2, e2);\n      }\n      if (Pg(d2) || La(d2))\n        return a2 = a2.get(c2) || null, n2(b2, a2, d2, e2, null);\n      Rg(b2, d2);\n    }\n    return null;\n  }\n  function x2(e2, g2, h2, k2) {\n    for (var l3 = null, t2 = null, u2 = g2, z2 = g2 = 0, q2 = null; u2 !== null && z2 < h2.length; z2++) {\n      u2.index > z2 ? (q2 = u2, u2 = null) : q2 = u2.sibling;\n      var n3 = p2(e2, u2, h2[z2], k2);\n      if (n3 === null) {\n        u2 === null && (u2 = q2);\n        break;\n      }\n      a && u2 && n3.alternate === null && b(e2, u2);\n      g2 = f(n3, g2, z2);\n      t2 === null ? l3 = n3 : t2.sibling = n3;\n      t2 = n3;\n      u2 = q2;\n    }\n    if (z2 === h2.length)\n      return c(e2, u2), l3;\n    if (u2 === null) {\n      for (; z2 < h2.length; z2++)\n        u2 = A2(e2, h2[z2], k2), u2 !== null && (g2 = f(u2, g2, z2), t2 === null ? l3 = u2 : t2.sibling = u2, t2 = u2);\n      return l3;\n    }\n    for (u2 = d(e2, u2); z2 < h2.length; z2++)\n      q2 = C2(u2, e2, z2, h2[z2], k2), q2 !== null && (a && q2.alternate !== null && u2.delete(q2.key === null ? z2 : q2.key), g2 = f(q2, g2, z2), t2 === null ? l3 = q2 : t2.sibling = q2, t2 = q2);\n    a && u2.forEach(function(a2) {\n      return b(e2, a2);\n    });\n    return l3;\n  }\n  function w(e2, g2, h2, k2) {\n    var l3 = La(h2);\n    if (typeof l3 !== \"function\")\n      throw Error(y(150));\n    h2 = l3.call(h2);\n    if (h2 == null)\n      throw Error(y(151));\n    for (var t2 = l3 = null, u2 = g2, z2 = g2 = 0, q2 = null, n3 = h2.next(); u2 !== null && !n3.done; z2++, n3 = h2.next()) {\n      u2.index > z2 ? (q2 = u2, u2 = null) : q2 = u2.sibling;\n      var w2 = p2(e2, u2, n3.value, k2);\n      if (w2 === null) {\n        u2 === null && (u2 = q2);\n        break;\n      }\n      a && u2 && w2.alternate === null && b(e2, u2);\n      g2 = f(w2, g2, z2);\n      t2 === null ? l3 = w2 : t2.sibling = w2;\n      t2 = w2;\n      u2 = q2;\n    }\n    if (n3.done)\n      return c(e2, u2), l3;\n    if (u2 === null) {\n      for (; !n3.done; z2++, n3 = h2.next())\n        n3 = A2(e2, n3.value, k2), n3 !== null && (g2 = f(n3, g2, z2), t2 === null ? l3 = n3 : t2.sibling = n3, t2 = n3);\n      return l3;\n    }\n    for (u2 = d(e2, u2); !n3.done; z2++, n3 = h2.next())\n      n3 = C2(u2, e2, z2, n3.value, k2), n3 !== null && (a && n3.alternate !== null && u2.delete(n3.key === null ? z2 : n3.key), g2 = f(n3, g2, z2), t2 === null ? l3 = n3 : t2.sibling = n3, t2 = n3);\n    a && u2.forEach(function(a2) {\n      return b(e2, a2);\n    });\n    return l3;\n  }\n  return function(a2, d2, f2, h2) {\n    var k2 = typeof f2 === \"object\" && f2 !== null && f2.type === ua && f2.key === null;\n    k2 && (f2 = f2.props.children);\n    var l3 = typeof f2 === \"object\" && f2 !== null;\n    if (l3)\n      switch (f2.$$typeof) {\n        case sa:\n          a: {\n            l3 = f2.key;\n            for (k2 = d2; k2 !== null; ) {\n              if (k2.key === l3) {\n                switch (k2.tag) {\n                  case 7:\n                    if (f2.type === ua) {\n                      c(a2, k2.sibling);\n                      d2 = e(k2, f2.props.children);\n                      d2.return = a2;\n                      a2 = d2;\n                      break a;\n                    }\n                    break;\n                  default:\n                    if (k2.elementType === f2.type) {\n                      c(a2, k2.sibling);\n                      d2 = e(k2, f2.props);\n                      d2.ref = Qg(a2, k2, f2);\n                      d2.return = a2;\n                      a2 = d2;\n                      break a;\n                    }\n                }\n                c(a2, k2);\n                break;\n              } else\n                b(a2, k2);\n              k2 = k2.sibling;\n            }\n            f2.type === ua ? (d2 = Xg(f2.props.children, a2.mode, h2, f2.key), d2.return = a2, a2 = d2) : (h2 = Vg(f2.type, f2.key, f2.props, null, a2.mode, h2), h2.ref = Qg(a2, d2, f2), h2.return = a2, a2 = h2);\n          }\n          return g(a2);\n        case ta:\n          a: {\n            for (k2 = f2.key; d2 !== null; ) {\n              if (d2.key === k2)\n                if (d2.tag === 4 && d2.stateNode.containerInfo === f2.containerInfo && d2.stateNode.implementation === f2.implementation) {\n                  c(a2, d2.sibling);\n                  d2 = e(d2, f2.children || []);\n                  d2.return = a2;\n                  a2 = d2;\n                  break a;\n                } else {\n                  c(a2, d2);\n                  break;\n                }\n              else\n                b(a2, d2);\n              d2 = d2.sibling;\n            }\n            d2 = Wg(f2, a2.mode, h2);\n            d2.return = a2;\n            a2 = d2;\n          }\n          return g(a2);\n      }\n    if (typeof f2 === \"string\" || typeof f2 === \"number\")\n      return f2 = \"\" + f2, d2 !== null && d2.tag === 6 ? (c(a2, d2.sibling), d2 = e(d2, f2), d2.return = a2, a2 = d2) : (c(a2, d2), d2 = Ug(f2, a2.mode, h2), d2.return = a2, a2 = d2), g(a2);\n    if (Pg(f2))\n      return x2(a2, d2, f2, h2);\n    if (La(f2))\n      return w(a2, d2, f2, h2);\n    l3 && Rg(a2, f2);\n    if (typeof f2 === \"undefined\" && !k2)\n      switch (a2.tag) {\n        case 1:\n        case 22:\n        case 0:\n        case 11:\n        case 15:\n          throw Error(y(152, Ra(a2.type) || \"Component\"));\n      }\n    return c(a2, d2);\n  };\n}\nvar Yg = Sg(true), Zg = Sg(false), $g = {}, ah = Bf($g), bh = Bf($g), ch = Bf($g);\nfunction dh(a) {\n  if (a === $g)\n    throw Error(y(174));\n  return a;\n}\nfunction eh(a, b) {\n  I(ch, b);\n  I(bh, a);\n  I(ah, $g);\n  a = b.nodeType;\n  switch (a) {\n    case 9:\n    case 11:\n      b = (b = b.documentElement) ? b.namespaceURI : mb(null, \"\");\n      break;\n    default:\n      a = a === 8 ? b.parentNode : b, b = a.namespaceURI || null, a = a.tagName, b = mb(b, a);\n  }\n  H(ah);\n  I(ah, b);\n}\nfunction fh() {\n  H(ah);\n  H(bh);\n  H(ch);\n}\nfunction gh(a) {\n  dh(ch.current);\n  var b = dh(ah.current);\n  var c = mb(b, a.type);\n  b !== c && (I(bh, a), I(ah, c));\n}\nfunction hh(a) {\n  bh.current === a && (H(ah), H(bh));\n}\nvar P = Bf(0);\nfunction ih(a) {\n  for (var b = a; b !== null; ) {\n    if (b.tag === 13) {\n      var c = b.memoizedState;\n      if (c !== null && (c = c.dehydrated, c === null || c.data === \"$?\" || c.data === \"$!\"))\n        return b;\n    } else if (b.tag === 19 && b.memoizedProps.revealOrder !== void 0) {\n      if ((b.flags & 64) !== 0)\n        return b;\n    } else if (b.child !== null) {\n      b.child.return = b;\n      b = b.child;\n      continue;\n    }\n    if (b === a)\n      break;\n    for (; b.sibling === null; ) {\n      if (b.return === null || b.return === a)\n        return null;\n      b = b.return;\n    }\n    b.sibling.return = b.return;\n    b = b.sibling;\n  }\n  return null;\n}\nvar jh = null, kh = null, lh = false;\nfunction mh(a, b) {\n  var c = nh(5, null, null, 0);\n  c.elementType = \"DELETED\";\n  c.type = \"DELETED\";\n  c.stateNode = b;\n  c.return = a;\n  c.flags = 8;\n  a.lastEffect !== null ? (a.lastEffect.nextEffect = c, a.lastEffect = c) : a.firstEffect = a.lastEffect = c;\n}\nfunction oh(a, b) {\n  switch (a.tag) {\n    case 5:\n      var c = a.type;\n      b = b.nodeType !== 1 || c.toLowerCase() !== b.nodeName.toLowerCase() ? null : b;\n      return b !== null ? (a.stateNode = b, true) : false;\n    case 6:\n      return b = a.pendingProps === \"\" || b.nodeType !== 3 ? null : b, b !== null ? (a.stateNode = b, true) : false;\n    case 13:\n      return false;\n    default:\n      return false;\n  }\n}\nfunction ph(a) {\n  if (lh) {\n    var b = kh;\n    if (b) {\n      var c = b;\n      if (!oh(a, b)) {\n        b = rf(c.nextSibling);\n        if (!b || !oh(a, b)) {\n          a.flags = a.flags & -1025 | 2;\n          lh = false;\n          jh = a;\n          return;\n        }\n        mh(jh, c);\n      }\n      jh = a;\n      kh = rf(b.firstChild);\n    } else\n      a.flags = a.flags & -1025 | 2, lh = false, jh = a;\n  }\n}\nfunction qh(a) {\n  for (a = a.return; a !== null && a.tag !== 5 && a.tag !== 3 && a.tag !== 13; )\n    a = a.return;\n  jh = a;\n}\nfunction rh(a) {\n  if (a !== jh)\n    return false;\n  if (!lh)\n    return qh(a), lh = true, false;\n  var b = a.type;\n  if (a.tag !== 5 || b !== \"head\" && b !== \"body\" && !nf(b, a.memoizedProps))\n    for (b = kh; b; )\n      mh(a, b), b = rf(b.nextSibling);\n  qh(a);\n  if (a.tag === 13) {\n    a = a.memoizedState;\n    a = a !== null ? a.dehydrated : null;\n    if (!a)\n      throw Error(y(317));\n    a: {\n      a = a.nextSibling;\n      for (b = 0; a; ) {\n        if (a.nodeType === 8) {\n          var c = a.data;\n          if (c === \"/$\") {\n            if (b === 0) {\n              kh = rf(a.nextSibling);\n              break a;\n            }\n            b--;\n          } else\n            c !== \"$\" && c !== \"$!\" && c !== \"$?\" || b++;\n        }\n        a = a.nextSibling;\n      }\n      kh = null;\n    }\n  } else\n    kh = jh ? rf(a.stateNode.nextSibling) : null;\n  return true;\n}\nfunction sh() {\n  kh = jh = null;\n  lh = false;\n}\nvar th = [];\nfunction uh() {\n  for (var a = 0; a < th.length; a++)\n    th[a]._workInProgressVersionPrimary = null;\n  th.length = 0;\n}\nvar vh = ra.ReactCurrentDispatcher, wh = ra.ReactCurrentBatchConfig, xh = 0, R = null, S = null, T = null, yh = false, zh = false;\nfunction Ah() {\n  throw Error(y(321));\n}\nfunction Bh(a, b) {\n  if (b === null)\n    return false;\n  for (var c = 0; c < b.length && c < a.length; c++)\n    if (!He(a[c], b[c]))\n      return false;\n  return true;\n}\nfunction Ch(a, b, c, d, e, f) {\n  xh = f;\n  R = b;\n  b.memoizedState = null;\n  b.updateQueue = null;\n  b.lanes = 0;\n  vh.current = a === null || a.memoizedState === null ? Dh : Eh;\n  a = c(d, e);\n  if (zh) {\n    f = 0;\n    do {\n      zh = false;\n      if (!(25 > f))\n        throw Error(y(301));\n      f += 1;\n      T = S = null;\n      b.updateQueue = null;\n      vh.current = Fh;\n      a = c(d, e);\n    } while (zh);\n  }\n  vh.current = Gh;\n  b = S !== null && S.next !== null;\n  xh = 0;\n  T = S = R = null;\n  yh = false;\n  if (b)\n    throw Error(y(300));\n  return a;\n}\nfunction Hh() {\n  var a = { memoizedState: null, baseState: null, baseQueue: null, queue: null, next: null };\n  T === null ? R.memoizedState = T = a : T = T.next = a;\n  return T;\n}\nfunction Ih() {\n  if (S === null) {\n    var a = R.alternate;\n    a = a !== null ? a.memoizedState : null;\n  } else\n    a = S.next;\n  var b = T === null ? R.memoizedState : T.next;\n  if (b !== null)\n    T = b, S = a;\n  else {\n    if (a === null)\n      throw Error(y(310));\n    S = a;\n    a = { memoizedState: S.memoizedState, baseState: S.baseState, baseQueue: S.baseQueue, queue: S.queue, next: null };\n    T === null ? R.memoizedState = T = a : T = T.next = a;\n  }\n  return T;\n}\nfunction Jh(a, b) {\n  return typeof b === \"function\" ? b(a) : b;\n}\nfunction Kh(a) {\n  var b = Ih(), c = b.queue;\n  if (c === null)\n    throw Error(y(311));\n  c.lastRenderedReducer = a;\n  var d = S, e = d.baseQueue, f = c.pending;\n  if (f !== null) {\n    if (e !== null) {\n      var g = e.next;\n      e.next = f.next;\n      f.next = g;\n    }\n    d.baseQueue = e = f;\n    c.pending = null;\n  }\n  if (e !== null) {\n    e = e.next;\n    d = d.baseState;\n    var h = g = f = null, k = e;\n    do {\n      var l2 = k.lane;\n      if ((xh & l2) === l2)\n        h !== null && (h = h.next = { lane: 0, action: k.action, eagerReducer: k.eagerReducer, eagerState: k.eagerState, next: null }), d = k.eagerReducer === a ? k.eagerState : a(d, k.action);\n      else {\n        var n2 = {\n          lane: l2,\n          action: k.action,\n          eagerReducer: k.eagerReducer,\n          eagerState: k.eagerState,\n          next: null\n        };\n        h === null ? (g = h = n2, f = d) : h = h.next = n2;\n        R.lanes |= l2;\n        Dg |= l2;\n      }\n      k = k.next;\n    } while (k !== null && k !== e);\n    h === null ? f = d : h.next = g;\n    He(d, b.memoizedState) || (ug = true);\n    b.memoizedState = d;\n    b.baseState = f;\n    b.baseQueue = h;\n    c.lastRenderedState = d;\n  }\n  return [b.memoizedState, c.dispatch];\n}\nfunction Lh(a) {\n  var b = Ih(), c = b.queue;\n  if (c === null)\n    throw Error(y(311));\n  c.lastRenderedReducer = a;\n  var d = c.dispatch, e = c.pending, f = b.memoizedState;\n  if (e !== null) {\n    c.pending = null;\n    var g = e = e.next;\n    do\n      f = a(f, g.action), g = g.next;\n    while (g !== e);\n    He(f, b.memoizedState) || (ug = true);\n    b.memoizedState = f;\n    b.baseQueue === null && (b.baseState = f);\n    c.lastRenderedState = f;\n  }\n  return [f, d];\n}\nfunction Mh(a, b, c) {\n  var d = b._getVersion;\n  d = d(b._source);\n  var e = b._workInProgressVersionPrimary;\n  if (e !== null)\n    a = e === d;\n  else if (a = a.mutableReadLanes, a = (xh & a) === a)\n    b._workInProgressVersionPrimary = d, th.push(b);\n  if (a)\n    return c(b._source);\n  th.push(b);\n  throw Error(y(350));\n}\nfunction Nh(a, b, c, d) {\n  var e = U;\n  if (e === null)\n    throw Error(y(349));\n  var f = b._getVersion, g = f(b._source), h = vh.current, k = h.useState(function() {\n    return Mh(e, b, c);\n  }), l2 = k[1], n2 = k[0];\n  k = T;\n  var A2 = a.memoizedState, p2 = A2.refs, C2 = p2.getSnapshot, x2 = A2.source;\n  A2 = A2.subscribe;\n  var w = R;\n  a.memoizedState = { refs: p2, source: b, subscribe: d };\n  h.useEffect(function() {\n    p2.getSnapshot = c;\n    p2.setSnapshot = l2;\n    var a2 = f(b._source);\n    if (!He(g, a2)) {\n      a2 = c(b._source);\n      He(n2, a2) || (l2(a2), a2 = Ig(w), e.mutableReadLanes |= a2 & e.pendingLanes);\n      a2 = e.mutableReadLanes;\n      e.entangledLanes |= a2;\n      for (var d2 = e.entanglements, h2 = a2; 0 < h2; ) {\n        var k2 = 31 - Vc(h2), v2 = 1 << k2;\n        d2[k2] |= a2;\n        h2 &= ~v2;\n      }\n    }\n  }, [c, b, d]);\n  h.useEffect(function() {\n    return d(b._source, function() {\n      var a2 = p2.getSnapshot, c2 = p2.setSnapshot;\n      try {\n        c2(a2(b._source));\n        var d2 = Ig(w);\n        e.mutableReadLanes |= d2 & e.pendingLanes;\n      } catch (q2) {\n        c2(function() {\n          throw q2;\n        });\n      }\n    });\n  }, [b, d]);\n  He(C2, c) && He(x2, b) && He(A2, d) || (a = { pending: null, dispatch: null, lastRenderedReducer: Jh, lastRenderedState: n2 }, a.dispatch = l2 = Oh.bind(null, R, a), k.queue = a, k.baseQueue = null, n2 = Mh(e, b, c), k.memoizedState = k.baseState = n2);\n  return n2;\n}\nfunction Ph(a, b, c) {\n  var d = Ih();\n  return Nh(d, a, b, c);\n}\nfunction Qh(a) {\n  var b = Hh();\n  typeof a === \"function\" && (a = a());\n  b.memoizedState = b.baseState = a;\n  a = b.queue = { pending: null, dispatch: null, lastRenderedReducer: Jh, lastRenderedState: a };\n  a = a.dispatch = Oh.bind(null, R, a);\n  return [b.memoizedState, a];\n}\nfunction Rh(a, b, c, d) {\n  a = { tag: a, create: b, destroy: c, deps: d, next: null };\n  b = R.updateQueue;\n  b === null ? (b = { lastEffect: null }, R.updateQueue = b, b.lastEffect = a.next = a) : (c = b.lastEffect, c === null ? b.lastEffect = a.next = a : (d = c.next, c.next = a, a.next = d, b.lastEffect = a));\n  return a;\n}\nfunction Sh(a) {\n  var b = Hh();\n  a = { current: a };\n  return b.memoizedState = a;\n}\nfunction Th() {\n  return Ih().memoizedState;\n}\nfunction Uh(a, b, c, d) {\n  var e = Hh();\n  R.flags |= a;\n  e.memoizedState = Rh(1 | b, c, void 0, d === void 0 ? null : d);\n}\nfunction Vh(a, b, c, d) {\n  var e = Ih();\n  d = d === void 0 ? null : d;\n  var f = void 0;\n  if (S !== null) {\n    var g = S.memoizedState;\n    f = g.destroy;\n    if (d !== null && Bh(d, g.deps)) {\n      Rh(b, c, f, d);\n      return;\n    }\n  }\n  R.flags |= a;\n  e.memoizedState = Rh(1 | b, c, f, d);\n}\nfunction Wh(a, b) {\n  return Uh(516, 4, a, b);\n}\nfunction Xh(a, b) {\n  return Vh(516, 4, a, b);\n}\nfunction Yh(a, b) {\n  return Vh(4, 2, a, b);\n}\nfunction Zh(a, b) {\n  if (typeof b === \"function\")\n    return a = a(), b(a), function() {\n      b(null);\n    };\n  if (b !== null && b !== void 0)\n    return a = a(), b.current = a, function() {\n      b.current = null;\n    };\n}\nfunction $h(a, b, c) {\n  c = c !== null && c !== void 0 ? c.concat([a]) : null;\n  return Vh(4, 2, Zh.bind(null, b, a), c);\n}\nfunction ai() {\n}\nfunction bi(a, b) {\n  var c = Ih();\n  b = b === void 0 ? null : b;\n  var d = c.memoizedState;\n  if (d !== null && b !== null && Bh(b, d[1]))\n    return d[0];\n  c.memoizedState = [a, b];\n  return a;\n}\nfunction ci(a, b) {\n  var c = Ih();\n  b = b === void 0 ? null : b;\n  var d = c.memoizedState;\n  if (d !== null && b !== null && Bh(b, d[1]))\n    return d[0];\n  a = a();\n  c.memoizedState = [a, b];\n  return a;\n}\nfunction di(a, b) {\n  var c = eg();\n  gg(98 > c ? 98 : c, function() {\n    a(true);\n  });\n  gg(97 < c ? 97 : c, function() {\n    var c2 = wh.transition;\n    wh.transition = 1;\n    try {\n      a(false), b();\n    } finally {\n      wh.transition = c2;\n    }\n  });\n}\nfunction Oh(a, b, c) {\n  var d = Hg(), e = Ig(a), f = { lane: e, action: c, eagerReducer: null, eagerState: null, next: null }, g = b.pending;\n  g === null ? f.next = f : (f.next = g.next, g.next = f);\n  b.pending = f;\n  g = a.alternate;\n  if (a === R || g !== null && g === R)\n    zh = yh = true;\n  else {\n    if (a.lanes === 0 && (g === null || g.lanes === 0) && (g = b.lastRenderedReducer, g !== null))\n      try {\n        var h = b.lastRenderedState, k = g(h, c);\n        f.eagerReducer = g;\n        f.eagerState = k;\n        if (He(k, h))\n          return;\n      } catch (l2) {\n      } finally {\n      }\n    Jg(a, e, d);\n  }\n}\nvar Gh = { readContext: vg, useCallback: Ah, useContext: Ah, useEffect: Ah, useImperativeHandle: Ah, useLayoutEffect: Ah, useMemo: Ah, useReducer: Ah, useRef: Ah, useState: Ah, useDebugValue: Ah, useDeferredValue: Ah, useTransition: Ah, useMutableSource: Ah, useOpaqueIdentifier: Ah, unstable_isNewReconciler: false }, Dh = { readContext: vg, useCallback: function(a, b) {\n  Hh().memoizedState = [a, b === void 0 ? null : b];\n  return a;\n}, useContext: vg, useEffect: Wh, useImperativeHandle: function(a, b, c) {\n  c = c !== null && c !== void 0 ? c.concat([a]) : null;\n  return Uh(4, 2, Zh.bind(null, b, a), c);\n}, useLayoutEffect: function(a, b) {\n  return Uh(4, 2, a, b);\n}, useMemo: function(a, b) {\n  var c = Hh();\n  b = b === void 0 ? null : b;\n  a = a();\n  c.memoizedState = [a, b];\n  return a;\n}, useReducer: function(a, b, c) {\n  var d = Hh();\n  b = c !== void 0 ? c(b) : b;\n  d.memoizedState = d.baseState = b;\n  a = d.queue = { pending: null, dispatch: null, lastRenderedReducer: a, lastRenderedState: b };\n  a = a.dispatch = Oh.bind(null, R, a);\n  return [d.memoizedState, a];\n}, useRef: Sh, useState: Qh, useDebugValue: ai, useDeferredValue: function(a) {\n  var b = Qh(a), c = b[0], d = b[1];\n  Wh(function() {\n    var b2 = wh.transition;\n    wh.transition = 1;\n    try {\n      d(a);\n    } finally {\n      wh.transition = b2;\n    }\n  }, [a]);\n  return c;\n}, useTransition: function() {\n  var a = Qh(false), b = a[0];\n  a = di.bind(null, a[1]);\n  Sh(a);\n  return [a, b];\n}, useMutableSource: function(a, b, c) {\n  var d = Hh();\n  d.memoizedState = { refs: { getSnapshot: b, setSnapshot: null }, source: a, subscribe: c };\n  return Nh(d, a, b, c);\n}, useOpaqueIdentifier: function() {\n  if (lh) {\n    var a = false, b = uf(function() {\n      a || (a = true, c(\"r:\" + (tf++).toString(36)));\n      throw Error(y(355));\n    }), c = Qh(b)[1];\n    (R.mode & 2) === 0 && (R.flags |= 516, Rh(5, function() {\n      c(\"r:\" + (tf++).toString(36));\n    }, void 0, null));\n    return b;\n  }\n  b = \"r:\" + (tf++).toString(36);\n  Qh(b);\n  return b;\n}, unstable_isNewReconciler: false }, Eh = { readContext: vg, useCallback: bi, useContext: vg, useEffect: Xh, useImperativeHandle: $h, useLayoutEffect: Yh, useMemo: ci, useReducer: Kh, useRef: Th, useState: function() {\n  return Kh(Jh);\n}, useDebugValue: ai, useDeferredValue: function(a) {\n  var b = Kh(Jh), c = b[0], d = b[1];\n  Xh(function() {\n    var b2 = wh.transition;\n    wh.transition = 1;\n    try {\n      d(a);\n    } finally {\n      wh.transition = b2;\n    }\n  }, [a]);\n  return c;\n}, useTransition: function() {\n  var a = Kh(Jh)[0];\n  return [\n    Th().current,\n    a\n  ];\n}, useMutableSource: Ph, useOpaqueIdentifier: function() {\n  return Kh(Jh)[0];\n}, unstable_isNewReconciler: false }, Fh = { readContext: vg, useCallback: bi, useContext: vg, useEffect: Xh, useImperativeHandle: $h, useLayoutEffect: Yh, useMemo: ci, useReducer: Lh, useRef: Th, useState: function() {\n  return Lh(Jh);\n}, useDebugValue: ai, useDeferredValue: function(a) {\n  var b = Lh(Jh), c = b[0], d = b[1];\n  Xh(function() {\n    var b2 = wh.transition;\n    wh.transition = 1;\n    try {\n      d(a);\n    } finally {\n      wh.transition = b2;\n    }\n  }, [a]);\n  return c;\n}, useTransition: function() {\n  var a = Lh(Jh)[0];\n  return [\n    Th().current,\n    a\n  ];\n}, useMutableSource: Ph, useOpaqueIdentifier: function() {\n  return Lh(Jh)[0];\n}, unstable_isNewReconciler: false }, ei = ra.ReactCurrentOwner, ug = false;\nfunction fi(a, b, c, d) {\n  b.child = a === null ? Zg(b, null, c, d) : Yg(b, a.child, c, d);\n}\nfunction gi(a, b, c, d, e) {\n  c = c.render;\n  var f = b.ref;\n  tg(b, e);\n  d = Ch(a, b, c, d, f, e);\n  if (a !== null && !ug)\n    return b.updateQueue = a.updateQueue, b.flags &= -517, a.lanes &= ~e, hi(a, b, e);\n  b.flags |= 1;\n  fi(a, b, d, e);\n  return b.child;\n}\nfunction ii(a, b, c, d, e, f) {\n  if (a === null) {\n    var g = c.type;\n    if (typeof g === \"function\" && !ji(g) && g.defaultProps === void 0 && c.compare === null && c.defaultProps === void 0)\n      return b.tag = 15, b.type = g, ki(a, b, g, d, e, f);\n    a = Vg(c.type, null, d, b, b.mode, f);\n    a.ref = b.ref;\n    a.return = b;\n    return b.child = a;\n  }\n  g = a.child;\n  if ((e & f) === 0 && (e = g.memoizedProps, c = c.compare, c = c !== null ? c : Je, c(e, d) && a.ref === b.ref))\n    return hi(a, b, f);\n  b.flags |= 1;\n  a = Tg(g, d);\n  a.ref = b.ref;\n  a.return = b;\n  return b.child = a;\n}\nfunction ki(a, b, c, d, e, f) {\n  if (a !== null && Je(a.memoizedProps, d) && a.ref === b.ref)\n    if (ug = false, (f & e) !== 0)\n      (a.flags & 16384) !== 0 && (ug = true);\n    else\n      return b.lanes = a.lanes, hi(a, b, f);\n  return li(a, b, c, d, f);\n}\nfunction mi(a, b, c) {\n  var d = b.pendingProps, e = d.children, f = a !== null ? a.memoizedState : null;\n  if (d.mode === \"hidden\" || d.mode === \"unstable-defer-without-hiding\")\n    if ((b.mode & 4) === 0)\n      b.memoizedState = { baseLanes: 0 }, ni(b, c);\n    else if ((c & 1073741824) !== 0)\n      b.memoizedState = { baseLanes: 0 }, ni(b, f !== null ? f.baseLanes : c);\n    else\n      return a = f !== null ? f.baseLanes | c : c, b.lanes = b.childLanes = 1073741824, b.memoizedState = { baseLanes: a }, ni(b, a), null;\n  else\n    f !== null ? (d = f.baseLanes | c, b.memoizedState = null) : d = c, ni(b, d);\n  fi(a, b, e, c);\n  return b.child;\n}\nfunction oi(a, b) {\n  var c = b.ref;\n  if (a === null && c !== null || a !== null && a.ref !== c)\n    b.flags |= 128;\n}\nfunction li(a, b, c, d, e) {\n  var f = Ff(c) ? Df : M.current;\n  f = Ef(b, f);\n  tg(b, e);\n  c = Ch(a, b, c, d, f, e);\n  if (a !== null && !ug)\n    return b.updateQueue = a.updateQueue, b.flags &= -517, a.lanes &= ~e, hi(a, b, e);\n  b.flags |= 1;\n  fi(a, b, c, e);\n  return b.child;\n}\nfunction pi(a, b, c, d, e) {\n  if (Ff(c)) {\n    var f = true;\n    Jf(b);\n  } else\n    f = false;\n  tg(b, e);\n  if (b.stateNode === null)\n    a !== null && (a.alternate = null, b.alternate = null, b.flags |= 2), Mg(b, c, d), Og(b, c, d, e), d = true;\n  else if (a === null) {\n    var g = b.stateNode, h = b.memoizedProps;\n    g.props = h;\n    var k = g.context, l2 = c.contextType;\n    typeof l2 === \"object\" && l2 !== null ? l2 = vg(l2) : (l2 = Ff(c) ? Df : M.current, l2 = Ef(b, l2));\n    var n2 = c.getDerivedStateFromProps, A2 = typeof n2 === \"function\" || typeof g.getSnapshotBeforeUpdate === \"function\";\n    A2 || typeof g.UNSAFE_componentWillReceiveProps !== \"function\" && typeof g.componentWillReceiveProps !== \"function\" || (h !== d || k !== l2) && Ng(b, g, d, l2);\n    wg = false;\n    var p2 = b.memoizedState;\n    g.state = p2;\n    Cg(b, d, g, e);\n    k = b.memoizedState;\n    h !== d || p2 !== k || N.current || wg ? (typeof n2 === \"function\" && (Gg(b, c, n2, d), k = b.memoizedState), (h = wg || Lg(b, c, h, d, p2, k, l2)) ? (A2 || typeof g.UNSAFE_componentWillMount !== \"function\" && typeof g.componentWillMount !== \"function\" || (typeof g.componentWillMount === \"function\" && g.componentWillMount(), typeof g.UNSAFE_componentWillMount === \"function\" && g.UNSAFE_componentWillMount()), typeof g.componentDidMount === \"function\" && (b.flags |= 4)) : (typeof g.componentDidMount === \"function\" && (b.flags |= 4), b.memoizedProps = d, b.memoizedState = k), g.props = d, g.state = k, g.context = l2, d = h) : (typeof g.componentDidMount === \"function\" && (b.flags |= 4), d = false);\n  } else {\n    g = b.stateNode;\n    yg(a, b);\n    h = b.memoizedProps;\n    l2 = b.type === b.elementType ? h : lg(b.type, h);\n    g.props = l2;\n    A2 = b.pendingProps;\n    p2 = g.context;\n    k = c.contextType;\n    typeof k === \"object\" && k !== null ? k = vg(k) : (k = Ff(c) ? Df : M.current, k = Ef(b, k));\n    var C2 = c.getDerivedStateFromProps;\n    (n2 = typeof C2 === \"function\" || typeof g.getSnapshotBeforeUpdate === \"function\") || typeof g.UNSAFE_componentWillReceiveProps !== \"function\" && typeof g.componentWillReceiveProps !== \"function\" || (h !== A2 || p2 !== k) && Ng(b, g, d, k);\n    wg = false;\n    p2 = b.memoizedState;\n    g.state = p2;\n    Cg(b, d, g, e);\n    var x2 = b.memoizedState;\n    h !== A2 || p2 !== x2 || N.current || wg ? (typeof C2 === \"function\" && (Gg(b, c, C2, d), x2 = b.memoizedState), (l2 = wg || Lg(b, c, l2, d, p2, x2, k)) ? (n2 || typeof g.UNSAFE_componentWillUpdate !== \"function\" && typeof g.componentWillUpdate !== \"function\" || (typeof g.componentWillUpdate === \"function\" && g.componentWillUpdate(d, x2, k), typeof g.UNSAFE_componentWillUpdate === \"function\" && g.UNSAFE_componentWillUpdate(d, x2, k)), typeof g.componentDidUpdate === \"function\" && (b.flags |= 4), typeof g.getSnapshotBeforeUpdate === \"function\" && (b.flags |= 256)) : (typeof g.componentDidUpdate !== \"function\" || h === a.memoizedProps && p2 === a.memoizedState || (b.flags |= 4), typeof g.getSnapshotBeforeUpdate !== \"function\" || h === a.memoizedProps && p2 === a.memoizedState || (b.flags |= 256), b.memoizedProps = d, b.memoizedState = x2), g.props = d, g.state = x2, g.context = k, d = l2) : (typeof g.componentDidUpdate !== \"function\" || h === a.memoizedProps && p2 === a.memoizedState || (b.flags |= 4), typeof g.getSnapshotBeforeUpdate !== \"function\" || h === a.memoizedProps && p2 === a.memoizedState || (b.flags |= 256), d = false);\n  }\n  return qi(a, b, c, d, f, e);\n}\nfunction qi(a, b, c, d, e, f) {\n  oi(a, b);\n  var g = (b.flags & 64) !== 0;\n  if (!d && !g)\n    return e && Kf(b, c, false), hi(a, b, f);\n  d = b.stateNode;\n  ei.current = b;\n  var h = g && typeof c.getDerivedStateFromError !== \"function\" ? null : d.render();\n  b.flags |= 1;\n  a !== null && g ? (b.child = Yg(b, a.child, null, f), b.child = Yg(b, null, h, f)) : fi(a, b, h, f);\n  b.memoizedState = d.state;\n  e && Kf(b, c, true);\n  return b.child;\n}\nfunction ri(a) {\n  var b = a.stateNode;\n  b.pendingContext ? Hf(a, b.pendingContext, b.pendingContext !== b.context) : b.context && Hf(a, b.context, false);\n  eh(a, b.containerInfo);\n}\nvar si = { dehydrated: null, retryLane: 0 };\nfunction ti(a, b, c) {\n  var d = b.pendingProps, e = P.current, f = false, g;\n  (g = (b.flags & 64) !== 0) || (g = a !== null && a.memoizedState === null ? false : (e & 2) !== 0);\n  g ? (f = true, b.flags &= -65) : a !== null && a.memoizedState === null || d.fallback === void 0 || d.unstable_avoidThisFallback === true || (e |= 1);\n  I(P, e & 1);\n  if (a === null) {\n    d.fallback !== void 0 && ph(b);\n    a = d.children;\n    e = d.fallback;\n    if (f)\n      return a = ui(b, a, e, c), b.child.memoizedState = { baseLanes: c }, b.memoizedState = si, a;\n    if (typeof d.unstable_expectedLoadTime === \"number\")\n      return a = ui(b, a, e, c), b.child.memoizedState = { baseLanes: c }, b.memoizedState = si, b.lanes = 33554432, a;\n    c = vi({ mode: \"visible\", children: a }, b.mode, c, null);\n    c.return = b;\n    return b.child = c;\n  }\n  if (a.memoizedState !== null) {\n    if (f)\n      return d = wi(a, b, d.children, d.fallback, c), f = b.child, e = a.child.memoizedState, f.memoizedState = e === null ? { baseLanes: c } : { baseLanes: e.baseLanes | c }, f.childLanes = a.childLanes & ~c, b.memoizedState = si, d;\n    c = xi(a, b, d.children, c);\n    b.memoizedState = null;\n    return c;\n  }\n  if (f)\n    return d = wi(a, b, d.children, d.fallback, c), f = b.child, e = a.child.memoizedState, f.memoizedState = e === null ? { baseLanes: c } : { baseLanes: e.baseLanes | c }, f.childLanes = a.childLanes & ~c, b.memoizedState = si, d;\n  c = xi(a, b, d.children, c);\n  b.memoizedState = null;\n  return c;\n}\nfunction ui(a, b, c, d) {\n  var e = a.mode, f = a.child;\n  b = { mode: \"hidden\", children: b };\n  (e & 2) === 0 && f !== null ? (f.childLanes = 0, f.pendingProps = b) : f = vi(b, e, 0, null);\n  c = Xg(c, e, d, null);\n  f.return = a;\n  c.return = a;\n  f.sibling = c;\n  a.child = f;\n  return c;\n}\nfunction xi(a, b, c, d) {\n  var e = a.child;\n  a = e.sibling;\n  c = Tg(e, { mode: \"visible\", children: c });\n  (b.mode & 2) === 0 && (c.lanes = d);\n  c.return = b;\n  c.sibling = null;\n  a !== null && (a.nextEffect = null, a.flags = 8, b.firstEffect = b.lastEffect = a);\n  return b.child = c;\n}\nfunction wi(a, b, c, d, e) {\n  var f = b.mode, g = a.child;\n  a = g.sibling;\n  var h = { mode: \"hidden\", children: c };\n  (f & 2) === 0 && b.child !== g ? (c = b.child, c.childLanes = 0, c.pendingProps = h, g = c.lastEffect, g !== null ? (b.firstEffect = c.firstEffect, b.lastEffect = g, g.nextEffect = null) : b.firstEffect = b.lastEffect = null) : c = Tg(g, h);\n  a !== null ? d = Tg(a, d) : (d = Xg(d, f, e, null), d.flags |= 2);\n  d.return = b;\n  c.return = b;\n  c.sibling = d;\n  b.child = c;\n  return d;\n}\nfunction yi(a, b) {\n  a.lanes |= b;\n  var c = a.alternate;\n  c !== null && (c.lanes |= b);\n  sg(a.return, b);\n}\nfunction zi(a, b, c, d, e, f) {\n  var g = a.memoizedState;\n  g === null ? a.memoizedState = { isBackwards: b, rendering: null, renderingStartTime: 0, last: d, tail: c, tailMode: e, lastEffect: f } : (g.isBackwards = b, g.rendering = null, g.renderingStartTime = 0, g.last = d, g.tail = c, g.tailMode = e, g.lastEffect = f);\n}\nfunction Ai(a, b, c) {\n  var d = b.pendingProps, e = d.revealOrder, f = d.tail;\n  fi(a, b, d.children, c);\n  d = P.current;\n  if ((d & 2) !== 0)\n    d = d & 1 | 2, b.flags |= 64;\n  else {\n    if (a !== null && (a.flags & 64) !== 0)\n      a:\n        for (a = b.child; a !== null; ) {\n          if (a.tag === 13)\n            a.memoizedState !== null && yi(a, c);\n          else if (a.tag === 19)\n            yi(a, c);\n          else if (a.child !== null) {\n            a.child.return = a;\n            a = a.child;\n            continue;\n          }\n          if (a === b)\n            break a;\n          for (; a.sibling === null; ) {\n            if (a.return === null || a.return === b)\n              break a;\n            a = a.return;\n          }\n          a.sibling.return = a.return;\n          a = a.sibling;\n        }\n    d &= 1;\n  }\n  I(P, d);\n  if ((b.mode & 2) === 0)\n    b.memoizedState = null;\n  else\n    switch (e) {\n      case \"forwards\":\n        c = b.child;\n        for (e = null; c !== null; )\n          a = c.alternate, a !== null && ih(a) === null && (e = c), c = c.sibling;\n        c = e;\n        c === null ? (e = b.child, b.child = null) : (e = c.sibling, c.sibling = null);\n        zi(b, false, e, c, f, b.lastEffect);\n        break;\n      case \"backwards\":\n        c = null;\n        e = b.child;\n        for (b.child = null; e !== null; ) {\n          a = e.alternate;\n          if (a !== null && ih(a) === null) {\n            b.child = e;\n            break;\n          }\n          a = e.sibling;\n          e.sibling = c;\n          c = e;\n          e = a;\n        }\n        zi(b, true, c, null, f, b.lastEffect);\n        break;\n      case \"together\":\n        zi(b, false, null, null, void 0, b.lastEffect);\n        break;\n      default:\n        b.memoizedState = null;\n    }\n  return b.child;\n}\nfunction hi(a, b, c) {\n  a !== null && (b.dependencies = a.dependencies);\n  Dg |= b.lanes;\n  if ((c & b.childLanes) !== 0) {\n    if (a !== null && b.child !== a.child)\n      throw Error(y(153));\n    if (b.child !== null) {\n      a = b.child;\n      c = Tg(a, a.pendingProps);\n      b.child = c;\n      for (c.return = b; a.sibling !== null; )\n        a = a.sibling, c = c.sibling = Tg(a, a.pendingProps), c.return = b;\n      c.sibling = null;\n    }\n    return b.child;\n  }\n  return null;\n}\nvar Bi, Ci, Di, Ei;\nBi = function(a, b) {\n  for (var c = b.child; c !== null; ) {\n    if (c.tag === 5 || c.tag === 6)\n      a.appendChild(c.stateNode);\n    else if (c.tag !== 4 && c.child !== null) {\n      c.child.return = c;\n      c = c.child;\n      continue;\n    }\n    if (c === b)\n      break;\n    for (; c.sibling === null; ) {\n      if (c.return === null || c.return === b)\n        return;\n      c = c.return;\n    }\n    c.sibling.return = c.return;\n    c = c.sibling;\n  }\n};\nCi = function() {\n};\nDi = function(a, b, c, d) {\n  var e = a.memoizedProps;\n  if (e !== d) {\n    a = b.stateNode;\n    dh(ah.current);\n    var f = null;\n    switch (c) {\n      case \"input\":\n        e = Ya(a, e);\n        d = Ya(a, d);\n        f = [];\n        break;\n      case \"option\":\n        e = eb(a, e);\n        d = eb(a, d);\n        f = [];\n        break;\n      case \"select\":\n        e = m({}, e, { value: void 0 });\n        d = m({}, d, { value: void 0 });\n        f = [];\n        break;\n      case \"textarea\":\n        e = gb(a, e);\n        d = gb(a, d);\n        f = [];\n        break;\n      default:\n        typeof e.onClick !== \"function\" && typeof d.onClick === \"function\" && (a.onclick = jf);\n    }\n    vb(c, d);\n    var g;\n    c = null;\n    for (l2 in e)\n      if (!d.hasOwnProperty(l2) && e.hasOwnProperty(l2) && e[l2] != null)\n        if (l2 === \"style\") {\n          var h = e[l2];\n          for (g in h)\n            h.hasOwnProperty(g) && (c || (c = {}), c[g] = \"\");\n        } else\n          l2 !== \"dangerouslySetInnerHTML\" && l2 !== \"children\" && l2 !== \"suppressContentEditableWarning\" && l2 !== \"suppressHydrationWarning\" && l2 !== \"autoFocus\" && (ca.hasOwnProperty(l2) ? f || (f = []) : (f = f || []).push(l2, null));\n    for (l2 in d) {\n      var k = d[l2];\n      h = e != null ? e[l2] : void 0;\n      if (d.hasOwnProperty(l2) && k !== h && (k != null || h != null))\n        if (l2 === \"style\")\n          if (h) {\n            for (g in h)\n              !h.hasOwnProperty(g) || k && k.hasOwnProperty(g) || (c || (c = {}), c[g] = \"\");\n            for (g in k)\n              k.hasOwnProperty(g) && h[g] !== k[g] && (c || (c = {}), c[g] = k[g]);\n          } else\n            c || (f || (f = []), f.push(l2, c)), c = k;\n        else\n          l2 === \"dangerouslySetInnerHTML\" ? (k = k ? k.__html : void 0, h = h ? h.__html : void 0, k != null && h !== k && (f = f || []).push(l2, k)) : l2 === \"children\" ? typeof k !== \"string\" && typeof k !== \"number\" || (f = f || []).push(l2, \"\" + k) : l2 !== \"suppressContentEditableWarning\" && l2 !== \"suppressHydrationWarning\" && (ca.hasOwnProperty(l2) ? (k != null && l2 === \"onScroll\" && G(\"scroll\", a), f || h === k || (f = [])) : typeof k === \"object\" && k !== null && k.$$typeof === Ga ? k.toString() : (f = f || []).push(l2, k));\n    }\n    c && (f = f || []).push(\"style\", c);\n    var l2 = f;\n    if (b.updateQueue = l2)\n      b.flags |= 4;\n  }\n};\nEi = function(a, b, c, d) {\n  c !== d && (b.flags |= 4);\n};\nfunction Fi(a, b) {\n  if (!lh)\n    switch (a.tailMode) {\n      case \"hidden\":\n        b = a.tail;\n        for (var c = null; b !== null; )\n          b.alternate !== null && (c = b), b = b.sibling;\n        c === null ? a.tail = null : c.sibling = null;\n        break;\n      case \"collapsed\":\n        c = a.tail;\n        for (var d = null; c !== null; )\n          c.alternate !== null && (d = c), c = c.sibling;\n        d === null ? b || a.tail === null ? a.tail = null : a.tail.sibling = null : d.sibling = null;\n    }\n}\nfunction Gi(a, b, c) {\n  var d = b.pendingProps;\n  switch (b.tag) {\n    case 2:\n    case 16:\n    case 15:\n    case 0:\n    case 11:\n    case 7:\n    case 8:\n    case 12:\n    case 9:\n    case 14:\n      return null;\n    case 1:\n      return Ff(b.type) && Gf(), null;\n    case 3:\n      fh();\n      H(N);\n      H(M);\n      uh();\n      d = b.stateNode;\n      d.pendingContext && (d.context = d.pendingContext, d.pendingContext = null);\n      if (a === null || a.child === null)\n        rh(b) ? b.flags |= 4 : d.hydrate || (b.flags |= 256);\n      Ci(b);\n      return null;\n    case 5:\n      hh(b);\n      var e = dh(ch.current);\n      c = b.type;\n      if (a !== null && b.stateNode != null)\n        Di(a, b, c, d, e), a.ref !== b.ref && (b.flags |= 128);\n      else {\n        if (!d) {\n          if (b.stateNode === null)\n            throw Error(y(166));\n          return null;\n        }\n        a = dh(ah.current);\n        if (rh(b)) {\n          d = b.stateNode;\n          c = b.type;\n          var f = b.memoizedProps;\n          d[wf] = b;\n          d[xf] = f;\n          switch (c) {\n            case \"dialog\":\n              G(\"cancel\", d);\n              G(\"close\", d);\n              break;\n            case \"iframe\":\n            case \"object\":\n            case \"embed\":\n              G(\"load\", d);\n              break;\n            case \"video\":\n            case \"audio\":\n              for (a = 0; a < Xe.length; a++)\n                G(Xe[a], d);\n              break;\n            case \"source\":\n              G(\"error\", d);\n              break;\n            case \"img\":\n            case \"image\":\n            case \"link\":\n              G(\"error\", d);\n              G(\"load\", d);\n              break;\n            case \"details\":\n              G(\"toggle\", d);\n              break;\n            case \"input\":\n              Za(d, f);\n              G(\"invalid\", d);\n              break;\n            case \"select\":\n              d._wrapperState = { wasMultiple: !!f.multiple };\n              G(\"invalid\", d);\n              break;\n            case \"textarea\":\n              hb(d, f), G(\"invalid\", d);\n          }\n          vb(c, f);\n          a = null;\n          for (var g in f)\n            f.hasOwnProperty(g) && (e = f[g], g === \"children\" ? typeof e === \"string\" ? d.textContent !== e && (a = [\"children\", e]) : typeof e === \"number\" && d.textContent !== \"\" + e && (a = [\"children\", \"\" + e]) : ca.hasOwnProperty(g) && e != null && g === \"onScroll\" && G(\"scroll\", d));\n          switch (c) {\n            case \"input\":\n              Va(d);\n              cb(d, f, true);\n              break;\n            case \"textarea\":\n              Va(d);\n              jb(d);\n              break;\n            case \"select\":\n            case \"option\":\n              break;\n            default:\n              typeof f.onClick === \"function\" && (d.onclick = jf);\n          }\n          d = a;\n          b.updateQueue = d;\n          d !== null && (b.flags |= 4);\n        } else {\n          g = e.nodeType === 9 ? e : e.ownerDocument;\n          a === kb.html && (a = lb(c));\n          a === kb.html ? c === \"script\" ? (a = g.createElement(\"div\"), a.innerHTML = \"<script><\\/script>\", a = a.removeChild(a.firstChild)) : typeof d.is === \"string\" ? a = g.createElement(c, { is: d.is }) : (a = g.createElement(c), c === \"select\" && (g = a, d.multiple ? g.multiple = true : d.size && (g.size = d.size))) : a = g.createElementNS(a, c);\n          a[wf] = b;\n          a[xf] = d;\n          Bi(a, b, false, false);\n          b.stateNode = a;\n          g = wb(c, d);\n          switch (c) {\n            case \"dialog\":\n              G(\"cancel\", a);\n              G(\"close\", a);\n              e = d;\n              break;\n            case \"iframe\":\n            case \"object\":\n            case \"embed\":\n              G(\"load\", a);\n              e = d;\n              break;\n            case \"video\":\n            case \"audio\":\n              for (e = 0; e < Xe.length; e++)\n                G(Xe[e], a);\n              e = d;\n              break;\n            case \"source\":\n              G(\"error\", a);\n              e = d;\n              break;\n            case \"img\":\n            case \"image\":\n            case \"link\":\n              G(\"error\", a);\n              G(\"load\", a);\n              e = d;\n              break;\n            case \"details\":\n              G(\"toggle\", a);\n              e = d;\n              break;\n            case \"input\":\n              Za(a, d);\n              e = Ya(a, d);\n              G(\"invalid\", a);\n              break;\n            case \"option\":\n              e = eb(a, d);\n              break;\n            case \"select\":\n              a._wrapperState = { wasMultiple: !!d.multiple };\n              e = m({}, d, { value: void 0 });\n              G(\"invalid\", a);\n              break;\n            case \"textarea\":\n              hb(a, d);\n              e = gb(a, d);\n              G(\"invalid\", a);\n              break;\n            default:\n              e = d;\n          }\n          vb(c, e);\n          var h = e;\n          for (f in h)\n            if (h.hasOwnProperty(f)) {\n              var k = h[f];\n              f === \"style\" ? tb(a, k) : f === \"dangerouslySetInnerHTML\" ? (k = k ? k.__html : void 0, k != null && ob(a, k)) : f === \"children\" ? typeof k === \"string\" ? (c !== \"textarea\" || k !== \"\") && pb(a, k) : typeof k === \"number\" && pb(a, \"\" + k) : f !== \"suppressContentEditableWarning\" && f !== \"suppressHydrationWarning\" && f !== \"autoFocus\" && (ca.hasOwnProperty(f) ? k != null && f === \"onScroll\" && G(\"scroll\", a) : k != null && qa(a, f, k, g));\n            }\n          switch (c) {\n            case \"input\":\n              Va(a);\n              cb(a, d, false);\n              break;\n            case \"textarea\":\n              Va(a);\n              jb(a);\n              break;\n            case \"option\":\n              d.value != null && a.setAttribute(\"value\", \"\" + Sa(d.value));\n              break;\n            case \"select\":\n              a.multiple = !!d.multiple;\n              f = d.value;\n              f != null ? fb(a, !!d.multiple, f, false) : d.defaultValue != null && fb(a, !!d.multiple, d.defaultValue, true);\n              break;\n            default:\n              typeof e.onClick === \"function\" && (a.onclick = jf);\n          }\n          mf(c, d) && (b.flags |= 4);\n        }\n        b.ref !== null && (b.flags |= 128);\n      }\n      return null;\n    case 6:\n      if (a && b.stateNode != null)\n        Ei(a, b, a.memoizedProps, d);\n      else {\n        if (typeof d !== \"string\" && b.stateNode === null)\n          throw Error(y(166));\n        c = dh(ch.current);\n        dh(ah.current);\n        rh(b) ? (d = b.stateNode, c = b.memoizedProps, d[wf] = b, d.nodeValue !== c && (b.flags |= 4)) : (d = (c.nodeType === 9 ? c : c.ownerDocument).createTextNode(d), d[wf] = b, b.stateNode = d);\n      }\n      return null;\n    case 13:\n      H(P);\n      d = b.memoizedState;\n      if ((b.flags & 64) !== 0)\n        return b.lanes = c, b;\n      d = d !== null;\n      c = false;\n      a === null ? b.memoizedProps.fallback !== void 0 && rh(b) : c = a.memoizedState !== null;\n      if (d && !c && (b.mode & 2) !== 0)\n        if (a === null && b.memoizedProps.unstable_avoidThisFallback !== true || (P.current & 1) !== 0)\n          V === 0 && (V = 3);\n        else {\n          if (V === 0 || V === 3)\n            V = 4;\n          U === null || (Dg & 134217727) === 0 && (Hi & 134217727) === 0 || Ii(U, W);\n        }\n      if (d || c)\n        b.flags |= 4;\n      return null;\n    case 4:\n      return fh(), Ci(b), a === null && cf(b.stateNode.containerInfo), null;\n    case 10:\n      return rg(b), null;\n    case 17:\n      return Ff(b.type) && Gf(), null;\n    case 19:\n      H(P);\n      d = b.memoizedState;\n      if (d === null)\n        return null;\n      f = (b.flags & 64) !== 0;\n      g = d.rendering;\n      if (g === null)\n        if (f)\n          Fi(d, false);\n        else {\n          if (V !== 0 || a !== null && (a.flags & 64) !== 0)\n            for (a = b.child; a !== null; ) {\n              g = ih(a);\n              if (g !== null) {\n                b.flags |= 64;\n                Fi(d, false);\n                f = g.updateQueue;\n                f !== null && (b.updateQueue = f, b.flags |= 4);\n                d.lastEffect === null && (b.firstEffect = null);\n                b.lastEffect = d.lastEffect;\n                d = c;\n                for (c = b.child; c !== null; )\n                  f = c, a = d, f.flags &= 2, f.nextEffect = null, f.firstEffect = null, f.lastEffect = null, g = f.alternate, g === null ? (f.childLanes = 0, f.lanes = a, f.child = null, f.memoizedProps = null, f.memoizedState = null, f.updateQueue = null, f.dependencies = null, f.stateNode = null) : (f.childLanes = g.childLanes, f.lanes = g.lanes, f.child = g.child, f.memoizedProps = g.memoizedProps, f.memoizedState = g.memoizedState, f.updateQueue = g.updateQueue, f.type = g.type, a = g.dependencies, f.dependencies = a === null ? null : { lanes: a.lanes, firstContext: a.firstContext }), c = c.sibling;\n                I(P, P.current & 1 | 2);\n                return b.child;\n              }\n              a = a.sibling;\n            }\n          d.tail !== null && O() > Ji && (b.flags |= 64, f = true, Fi(d, false), b.lanes = 33554432);\n        }\n      else {\n        if (!f)\n          if (a = ih(g), a !== null) {\n            if (b.flags |= 64, f = true, c = a.updateQueue, c !== null && (b.updateQueue = c, b.flags |= 4), Fi(d, true), d.tail === null && d.tailMode === \"hidden\" && !g.alternate && !lh)\n              return b = b.lastEffect = d.lastEffect, b !== null && (b.nextEffect = null), null;\n          } else\n            2 * O() - d.renderingStartTime > Ji && c !== 1073741824 && (b.flags |= 64, f = true, Fi(d, false), b.lanes = 33554432);\n        d.isBackwards ? (g.sibling = b.child, b.child = g) : (c = d.last, c !== null ? c.sibling = g : b.child = g, d.last = g);\n      }\n      return d.tail !== null ? (c = d.tail, d.rendering = c, d.tail = c.sibling, d.lastEffect = b.lastEffect, d.renderingStartTime = O(), c.sibling = null, b = P.current, I(P, f ? b & 1 | 2 : b & 1), c) : null;\n    case 23:\n    case 24:\n      return Ki(), a !== null && a.memoizedState !== null !== (b.memoizedState !== null) && d.mode !== \"unstable-defer-without-hiding\" && (b.flags |= 4), null;\n  }\n  throw Error(y(156, b.tag));\n}\nfunction Li(a) {\n  switch (a.tag) {\n    case 1:\n      Ff(a.type) && Gf();\n      var b = a.flags;\n      return b & 4096 ? (a.flags = b & -4097 | 64, a) : null;\n    case 3:\n      fh();\n      H(N);\n      H(M);\n      uh();\n      b = a.flags;\n      if ((b & 64) !== 0)\n        throw Error(y(285));\n      a.flags = b & -4097 | 64;\n      return a;\n    case 5:\n      return hh(a), null;\n    case 13:\n      return H(P), b = a.flags, b & 4096 ? (a.flags = b & -4097 | 64, a) : null;\n    case 19:\n      return H(P), null;\n    case 4:\n      return fh(), null;\n    case 10:\n      return rg(a), null;\n    case 23:\n    case 24:\n      return Ki(), null;\n    default:\n      return null;\n  }\n}\nfunction Mi(a, b) {\n  try {\n    var c = \"\", d = b;\n    do\n      c += Qa(d), d = d.return;\n    while (d);\n    var e = c;\n  } catch (f) {\n    e = \"\\nError generating stack: \" + f.message + \"\\n\" + f.stack;\n  }\n  return { value: a, source: b, stack: e };\n}\nfunction Ni(a, b) {\n  try {\n    console.error(b.value);\n  } catch (c) {\n    setTimeout(function() {\n      throw c;\n    });\n  }\n}\nvar Oi = typeof WeakMap === \"function\" ? WeakMap : Map;\nfunction Pi(a, b, c) {\n  c = zg(-1, c);\n  c.tag = 3;\n  c.payload = { element: null };\n  var d = b.value;\n  c.callback = function() {\n    Qi || (Qi = true, Ri = d);\n    Ni(a, b);\n  };\n  return c;\n}\nfunction Si(a, b, c) {\n  c = zg(-1, c);\n  c.tag = 3;\n  var d = a.type.getDerivedStateFromError;\n  if (typeof d === \"function\") {\n    var e = b.value;\n    c.payload = function() {\n      Ni(a, b);\n      return d(e);\n    };\n  }\n  var f = a.stateNode;\n  f !== null && typeof f.componentDidCatch === \"function\" && (c.callback = function() {\n    typeof d !== \"function\" && (Ti === null ? Ti = new Set([this]) : Ti.add(this), Ni(a, b));\n    var c2 = b.stack;\n    this.componentDidCatch(b.value, { componentStack: c2 !== null ? c2 : \"\" });\n  });\n  return c;\n}\nvar Ui = typeof WeakSet === \"function\" ? WeakSet : Set;\nfunction Vi(a) {\n  var b = a.ref;\n  if (b !== null)\n    if (typeof b === \"function\")\n      try {\n        b(null);\n      } catch (c) {\n        Wi(a, c);\n      }\n    else\n      b.current = null;\n}\nfunction Xi(a, b) {\n  switch (b.tag) {\n    case 0:\n    case 11:\n    case 15:\n    case 22:\n      return;\n    case 1:\n      if (b.flags & 256 && a !== null) {\n        var c = a.memoizedProps, d = a.memoizedState;\n        a = b.stateNode;\n        b = a.getSnapshotBeforeUpdate(b.elementType === b.type ? c : lg(b.type, c), d);\n        a.__reactInternalSnapshotBeforeUpdate = b;\n      }\n      return;\n    case 3:\n      b.flags & 256 && qf(b.stateNode.containerInfo);\n      return;\n    case 5:\n    case 6:\n    case 4:\n    case 17:\n      return;\n  }\n  throw Error(y(163));\n}\nfunction Yi(a, b, c) {\n  switch (c.tag) {\n    case 0:\n    case 11:\n    case 15:\n    case 22:\n      b = c.updateQueue;\n      b = b !== null ? b.lastEffect : null;\n      if (b !== null) {\n        a = b = b.next;\n        do {\n          if ((a.tag & 3) === 3) {\n            var d = a.create;\n            a.destroy = d();\n          }\n          a = a.next;\n        } while (a !== b);\n      }\n      b = c.updateQueue;\n      b = b !== null ? b.lastEffect : null;\n      if (b !== null) {\n        a = b = b.next;\n        do {\n          var e = a;\n          d = e.next;\n          e = e.tag;\n          (e & 4) !== 0 && (e & 1) !== 0 && (Zi(c, a), $i(c, a));\n          a = d;\n        } while (a !== b);\n      }\n      return;\n    case 1:\n      a = c.stateNode;\n      c.flags & 4 && (b === null ? a.componentDidMount() : (d = c.elementType === c.type ? b.memoizedProps : lg(c.type, b.memoizedProps), a.componentDidUpdate(d, b.memoizedState, a.__reactInternalSnapshotBeforeUpdate)));\n      b = c.updateQueue;\n      b !== null && Eg(c, b, a);\n      return;\n    case 3:\n      b = c.updateQueue;\n      if (b !== null) {\n        a = null;\n        if (c.child !== null)\n          switch (c.child.tag) {\n            case 5:\n              a = c.child.stateNode;\n              break;\n            case 1:\n              a = c.child.stateNode;\n          }\n        Eg(c, b, a);\n      }\n      return;\n    case 5:\n      a = c.stateNode;\n      b === null && c.flags & 4 && mf(c.type, c.memoizedProps) && a.focus();\n      return;\n    case 6:\n      return;\n    case 4:\n      return;\n    case 12:\n      return;\n    case 13:\n      c.memoizedState === null && (c = c.alternate, c !== null && (c = c.memoizedState, c !== null && (c = c.dehydrated, c !== null && Cc(c))));\n      return;\n    case 19:\n    case 17:\n    case 20:\n    case 21:\n    case 23:\n    case 24:\n      return;\n  }\n  throw Error(y(163));\n}\nfunction aj(a, b) {\n  for (var c = a; ; ) {\n    if (c.tag === 5) {\n      var d = c.stateNode;\n      if (b)\n        d = d.style, typeof d.setProperty === \"function\" ? d.setProperty(\"display\", \"none\", \"important\") : d.display = \"none\";\n      else {\n        d = c.stateNode;\n        var e = c.memoizedProps.style;\n        e = e !== void 0 && e !== null && e.hasOwnProperty(\"display\") ? e.display : null;\n        d.style.display = sb(\"display\", e);\n      }\n    } else if (c.tag === 6)\n      c.stateNode.nodeValue = b ? \"\" : c.memoizedProps;\n    else if ((c.tag !== 23 && c.tag !== 24 || c.memoizedState === null || c === a) && c.child !== null) {\n      c.child.return = c;\n      c = c.child;\n      continue;\n    }\n    if (c === a)\n      break;\n    for (; c.sibling === null; ) {\n      if (c.return === null || c.return === a)\n        return;\n      c = c.return;\n    }\n    c.sibling.return = c.return;\n    c = c.sibling;\n  }\n}\nfunction bj(a, b) {\n  if (Mf && typeof Mf.onCommitFiberUnmount === \"function\")\n    try {\n      Mf.onCommitFiberUnmount(Lf, b);\n    } catch (f) {\n    }\n  switch (b.tag) {\n    case 0:\n    case 11:\n    case 14:\n    case 15:\n    case 22:\n      a = b.updateQueue;\n      if (a !== null && (a = a.lastEffect, a !== null)) {\n        var c = a = a.next;\n        do {\n          var d = c, e = d.destroy;\n          d = d.tag;\n          if (e !== void 0)\n            if ((d & 4) !== 0)\n              Zi(b, c);\n            else {\n              d = b;\n              try {\n                e();\n              } catch (f) {\n                Wi(d, f);\n              }\n            }\n          c = c.next;\n        } while (c !== a);\n      }\n      break;\n    case 1:\n      Vi(b);\n      a = b.stateNode;\n      if (typeof a.componentWillUnmount === \"function\")\n        try {\n          a.props = b.memoizedProps, a.state = b.memoizedState, a.componentWillUnmount();\n        } catch (f) {\n          Wi(b, f);\n        }\n      break;\n    case 5:\n      Vi(b);\n      break;\n    case 4:\n      cj(a, b);\n  }\n}\nfunction dj(a) {\n  a.alternate = null;\n  a.child = null;\n  a.dependencies = null;\n  a.firstEffect = null;\n  a.lastEffect = null;\n  a.memoizedProps = null;\n  a.memoizedState = null;\n  a.pendingProps = null;\n  a.return = null;\n  a.updateQueue = null;\n}\nfunction ej(a) {\n  return a.tag === 5 || a.tag === 3 || a.tag === 4;\n}\nfunction fj(a) {\n  a: {\n    for (var b = a.return; b !== null; ) {\n      if (ej(b))\n        break a;\n      b = b.return;\n    }\n    throw Error(y(160));\n  }\n  var c = b;\n  b = c.stateNode;\n  switch (c.tag) {\n    case 5:\n      var d = false;\n      break;\n    case 3:\n      b = b.containerInfo;\n      d = true;\n      break;\n    case 4:\n      b = b.containerInfo;\n      d = true;\n      break;\n    default:\n      throw Error(y(161));\n  }\n  c.flags & 16 && (pb(b, \"\"), c.flags &= -17);\n  a:\n    b:\n      for (c = a; ; ) {\n        for (; c.sibling === null; ) {\n          if (c.return === null || ej(c.return)) {\n            c = null;\n            break a;\n          }\n          c = c.return;\n        }\n        c.sibling.return = c.return;\n        for (c = c.sibling; c.tag !== 5 && c.tag !== 6 && c.tag !== 18; ) {\n          if (c.flags & 2)\n            continue b;\n          if (c.child === null || c.tag === 4)\n            continue b;\n          else\n            c.child.return = c, c = c.child;\n        }\n        if (!(c.flags & 2)) {\n          c = c.stateNode;\n          break a;\n        }\n      }\n  d ? gj(a, c, b) : hj(a, c, b);\n}\nfunction gj(a, b, c) {\n  var d = a.tag, e = d === 5 || d === 6;\n  if (e)\n    a = e ? a.stateNode : a.stateNode.instance, b ? c.nodeType === 8 ? c.parentNode.insertBefore(a, b) : c.insertBefore(a, b) : (c.nodeType === 8 ? (b = c.parentNode, b.insertBefore(a, c)) : (b = c, b.appendChild(a)), c = c._reactRootContainer, c !== null && c !== void 0 || b.onclick !== null || (b.onclick = jf));\n  else if (d !== 4 && (a = a.child, a !== null))\n    for (gj(a, b, c), a = a.sibling; a !== null; )\n      gj(a, b, c), a = a.sibling;\n}\nfunction hj(a, b, c) {\n  var d = a.tag, e = d === 5 || d === 6;\n  if (e)\n    a = e ? a.stateNode : a.stateNode.instance, b ? c.insertBefore(a, b) : c.appendChild(a);\n  else if (d !== 4 && (a = a.child, a !== null))\n    for (hj(a, b, c), a = a.sibling; a !== null; )\n      hj(a, b, c), a = a.sibling;\n}\nfunction cj(a, b) {\n  for (var c = b, d = false, e, f; ; ) {\n    if (!d) {\n      d = c.return;\n      a:\n        for (; ; ) {\n          if (d === null)\n            throw Error(y(160));\n          e = d.stateNode;\n          switch (d.tag) {\n            case 5:\n              f = false;\n              break a;\n            case 3:\n              e = e.containerInfo;\n              f = true;\n              break a;\n            case 4:\n              e = e.containerInfo;\n              f = true;\n              break a;\n          }\n          d = d.return;\n        }\n      d = true;\n    }\n    if (c.tag === 5 || c.tag === 6) {\n      a:\n        for (var g = a, h = c, k = h; ; )\n          if (bj(g, k), k.child !== null && k.tag !== 4)\n            k.child.return = k, k = k.child;\n          else {\n            if (k === h)\n              break a;\n            for (; k.sibling === null; ) {\n              if (k.return === null || k.return === h)\n                break a;\n              k = k.return;\n            }\n            k.sibling.return = k.return;\n            k = k.sibling;\n          }\n      f ? (g = e, h = c.stateNode, g.nodeType === 8 ? g.parentNode.removeChild(h) : g.removeChild(h)) : e.removeChild(c.stateNode);\n    } else if (c.tag === 4) {\n      if (c.child !== null) {\n        e = c.stateNode.containerInfo;\n        f = true;\n        c.child.return = c;\n        c = c.child;\n        continue;\n      }\n    } else if (bj(a, c), c.child !== null) {\n      c.child.return = c;\n      c = c.child;\n      continue;\n    }\n    if (c === b)\n      break;\n    for (; c.sibling === null; ) {\n      if (c.return === null || c.return === b)\n        return;\n      c = c.return;\n      c.tag === 4 && (d = false);\n    }\n    c.sibling.return = c.return;\n    c = c.sibling;\n  }\n}\nfunction ij(a, b) {\n  switch (b.tag) {\n    case 0:\n    case 11:\n    case 14:\n    case 15:\n    case 22:\n      var c = b.updateQueue;\n      c = c !== null ? c.lastEffect : null;\n      if (c !== null) {\n        var d = c = c.next;\n        do\n          (d.tag & 3) === 3 && (a = d.destroy, d.destroy = void 0, a !== void 0 && a()), d = d.next;\n        while (d !== c);\n      }\n      return;\n    case 1:\n      return;\n    case 5:\n      c = b.stateNode;\n      if (c != null) {\n        d = b.memoizedProps;\n        var e = a !== null ? a.memoizedProps : d;\n        a = b.type;\n        var f = b.updateQueue;\n        b.updateQueue = null;\n        if (f !== null) {\n          c[xf] = d;\n          a === \"input\" && d.type === \"radio\" && d.name != null && $a(c, d);\n          wb(a, e);\n          b = wb(a, d);\n          for (e = 0; e < f.length; e += 2) {\n            var g = f[e], h = f[e + 1];\n            g === \"style\" ? tb(c, h) : g === \"dangerouslySetInnerHTML\" ? ob(c, h) : g === \"children\" ? pb(c, h) : qa(c, g, h, b);\n          }\n          switch (a) {\n            case \"input\":\n              ab(c, d);\n              break;\n            case \"textarea\":\n              ib(c, d);\n              break;\n            case \"select\":\n              a = c._wrapperState.wasMultiple, c._wrapperState.wasMultiple = !!d.multiple, f = d.value, f != null ? fb(c, !!d.multiple, f, false) : a !== !!d.multiple && (d.defaultValue != null ? fb(c, !!d.multiple, d.defaultValue, true) : fb(c, !!d.multiple, d.multiple ? [] : \"\", false));\n          }\n        }\n      }\n      return;\n    case 6:\n      if (b.stateNode === null)\n        throw Error(y(162));\n      b.stateNode.nodeValue = b.memoizedProps;\n      return;\n    case 3:\n      c = b.stateNode;\n      c.hydrate && (c.hydrate = false, Cc(c.containerInfo));\n      return;\n    case 12:\n      return;\n    case 13:\n      b.memoizedState !== null && (jj = O(), aj(b.child, true));\n      kj(b);\n      return;\n    case 19:\n      kj(b);\n      return;\n    case 17:\n      return;\n    case 23:\n    case 24:\n      aj(b, b.memoizedState !== null);\n      return;\n  }\n  throw Error(y(163));\n}\nfunction kj(a) {\n  var b = a.updateQueue;\n  if (b !== null) {\n    a.updateQueue = null;\n    var c = a.stateNode;\n    c === null && (c = a.stateNode = new Ui());\n    b.forEach(function(b2) {\n      var d = lj.bind(null, a, b2);\n      c.has(b2) || (c.add(b2), b2.then(d, d));\n    });\n  }\n}\nfunction mj(a, b) {\n  return a !== null && (a = a.memoizedState, a === null || a.dehydrated !== null) ? (b = b.memoizedState, b !== null && b.dehydrated === null) : false;\n}\nvar nj = Math.ceil, oj = ra.ReactCurrentDispatcher, pj = ra.ReactCurrentOwner, X = 0, U = null, Y = null, W = 0, qj = 0, rj = Bf(0), V = 0, sj = null, tj = 0, Dg = 0, Hi = 0, uj = 0, vj = null, jj = 0, Ji = Infinity;\nfunction wj() {\n  Ji = O() + 500;\n}\nvar Z = null, Qi = false, Ri = null, Ti = null, xj = false, yj = null, zj = 90, Aj = [], Bj = [], Cj = null, Dj = 0, Ej = null, Fj = -1, Gj = 0, Hj = 0, Ij = null, Jj = false;\nfunction Hg() {\n  return (X & 48) !== 0 ? O() : Fj !== -1 ? Fj : Fj = O();\n}\nfunction Ig(a) {\n  a = a.mode;\n  if ((a & 2) === 0)\n    return 1;\n  if ((a & 4) === 0)\n    return eg() === 99 ? 1 : 2;\n  Gj === 0 && (Gj = tj);\n  if (kg.transition !== 0) {\n    Hj !== 0 && (Hj = vj !== null ? vj.pendingLanes : 0);\n    a = Gj;\n    var b = 4186112 & ~Hj;\n    b &= -b;\n    b === 0 && (a = 4186112 & ~a, b = a & -a, b === 0 && (b = 8192));\n    return b;\n  }\n  a = eg();\n  (X & 4) !== 0 && a === 98 ? a = Xc(12, Gj) : (a = Sc(a), a = Xc(a, Gj));\n  return a;\n}\nfunction Jg(a, b, c) {\n  if (50 < Dj)\n    throw Dj = 0, Ej = null, Error(y(185));\n  a = Kj(a, b);\n  if (a === null)\n    return null;\n  $c(a, b, c);\n  a === U && (Hi |= b, V === 4 && Ii(a, W));\n  var d = eg();\n  b === 1 ? (X & 8) !== 0 && (X & 48) === 0 ? Lj(a) : (Mj(a, c), X === 0 && (wj(), ig())) : ((X & 4) === 0 || d !== 98 && d !== 99 || (Cj === null ? Cj = new Set([a]) : Cj.add(a)), Mj(a, c));\n  vj = a;\n}\nfunction Kj(a, b) {\n  a.lanes |= b;\n  var c = a.alternate;\n  c !== null && (c.lanes |= b);\n  c = a;\n  for (a = a.return; a !== null; )\n    a.childLanes |= b, c = a.alternate, c !== null && (c.childLanes |= b), c = a, a = a.return;\n  return c.tag === 3 ? c.stateNode : null;\n}\nfunction Mj(a, b) {\n  for (var c = a.callbackNode, d = a.suspendedLanes, e = a.pingedLanes, f = a.expirationTimes, g = a.pendingLanes; 0 < g; ) {\n    var h = 31 - Vc(g), k = 1 << h, l2 = f[h];\n    if (l2 === -1) {\n      if ((k & d) === 0 || (k & e) !== 0) {\n        l2 = b;\n        Rc(k);\n        var n2 = F;\n        f[h] = 10 <= n2 ? l2 + 250 : 6 <= n2 ? l2 + 5e3 : -1;\n      }\n    } else\n      l2 <= b && (a.expiredLanes |= k);\n    g &= ~k;\n  }\n  d = Uc(a, a === U ? W : 0);\n  b = F;\n  if (d === 0)\n    c !== null && (c !== Zf && Pf(c), a.callbackNode = null, a.callbackPriority = 0);\n  else {\n    if (c !== null) {\n      if (a.callbackPriority === b)\n        return;\n      c !== Zf && Pf(c);\n    }\n    b === 15 ? (c = Lj.bind(null, a), ag === null ? (ag = [c], bg = Of(Uf, jg)) : ag.push(c), c = Zf) : b === 14 ? c = hg(99, Lj.bind(null, a)) : (c = Tc(b), c = hg(c, Nj.bind(null, a)));\n    a.callbackPriority = b;\n    a.callbackNode = c;\n  }\n}\nfunction Nj(a) {\n  Fj = -1;\n  Hj = Gj = 0;\n  if ((X & 48) !== 0)\n    throw Error(y(327));\n  var b = a.callbackNode;\n  if (Oj() && a.callbackNode !== b)\n    return null;\n  var c = Uc(a, a === U ? W : 0);\n  if (c === 0)\n    return null;\n  var d = c;\n  var e = X;\n  X |= 16;\n  var f = Pj();\n  if (U !== a || W !== d)\n    wj(), Qj(a, d);\n  do\n    try {\n      Rj();\n      break;\n    } catch (h) {\n      Sj(a, h);\n    }\n  while (1);\n  qg();\n  oj.current = f;\n  X = e;\n  Y !== null ? d = 0 : (U = null, W = 0, d = V);\n  if ((tj & Hi) !== 0)\n    Qj(a, 0);\n  else if (d !== 0) {\n    d === 2 && (X |= 64, a.hydrate && (a.hydrate = false, qf(a.containerInfo)), c = Wc(a), c !== 0 && (d = Tj(a, c)));\n    if (d === 1)\n      throw b = sj, Qj(a, 0), Ii(a, c), Mj(a, O()), b;\n    a.finishedWork = a.current.alternate;\n    a.finishedLanes = c;\n    switch (d) {\n      case 0:\n      case 1:\n        throw Error(y(345));\n      case 2:\n        Uj(a);\n        break;\n      case 3:\n        Ii(a, c);\n        if ((c & 62914560) === c && (d = jj + 500 - O(), 10 < d)) {\n          if (Uc(a, 0) !== 0)\n            break;\n          e = a.suspendedLanes;\n          if ((e & c) !== c) {\n            Hg();\n            a.pingedLanes |= a.suspendedLanes & e;\n            break;\n          }\n          a.timeoutHandle = of(Uj.bind(null, a), d);\n          break;\n        }\n        Uj(a);\n        break;\n      case 4:\n        Ii(a, c);\n        if ((c & 4186112) === c)\n          break;\n        d = a.eventTimes;\n        for (e = -1; 0 < c; ) {\n          var g = 31 - Vc(c);\n          f = 1 << g;\n          g = d[g];\n          g > e && (e = g);\n          c &= ~f;\n        }\n        c = e;\n        c = O() - c;\n        c = (120 > c ? 120 : 480 > c ? 480 : 1080 > c ? 1080 : 1920 > c ? 1920 : 3e3 > c ? 3e3 : 4320 > c ? 4320 : 1960 * nj(c / 1960)) - c;\n        if (10 < c) {\n          a.timeoutHandle = of(Uj.bind(null, a), c);\n          break;\n        }\n        Uj(a);\n        break;\n      case 5:\n        Uj(a);\n        break;\n      default:\n        throw Error(y(329));\n    }\n  }\n  Mj(a, O());\n  return a.callbackNode === b ? Nj.bind(null, a) : null;\n}\nfunction Ii(a, b) {\n  b &= ~uj;\n  b &= ~Hi;\n  a.suspendedLanes |= b;\n  a.pingedLanes &= ~b;\n  for (a = a.expirationTimes; 0 < b; ) {\n    var c = 31 - Vc(b), d = 1 << c;\n    a[c] = -1;\n    b &= ~d;\n  }\n}\nfunction Lj(a) {\n  if ((X & 48) !== 0)\n    throw Error(y(327));\n  Oj();\n  if (a === U && (a.expiredLanes & W) !== 0) {\n    var b = W;\n    var c = Tj(a, b);\n    (tj & Hi) !== 0 && (b = Uc(a, b), c = Tj(a, b));\n  } else\n    b = Uc(a, 0), c = Tj(a, b);\n  a.tag !== 0 && c === 2 && (X |= 64, a.hydrate && (a.hydrate = false, qf(a.containerInfo)), b = Wc(a), b !== 0 && (c = Tj(a, b)));\n  if (c === 1)\n    throw c = sj, Qj(a, 0), Ii(a, b), Mj(a, O()), c;\n  a.finishedWork = a.current.alternate;\n  a.finishedLanes = b;\n  Uj(a);\n  Mj(a, O());\n  return null;\n}\nfunction Vj() {\n  if (Cj !== null) {\n    var a = Cj;\n    Cj = null;\n    a.forEach(function(a2) {\n      a2.expiredLanes |= 24 & a2.pendingLanes;\n      Mj(a2, O());\n    });\n  }\n  ig();\n}\nfunction Wj(a, b) {\n  var c = X;\n  X |= 1;\n  try {\n    return a(b);\n  } finally {\n    X = c, X === 0 && (wj(), ig());\n  }\n}\nfunction Xj(a, b) {\n  var c = X;\n  X &= -2;\n  X |= 8;\n  try {\n    return a(b);\n  } finally {\n    X = c, X === 0 && (wj(), ig());\n  }\n}\nfunction ni(a, b) {\n  I(rj, qj);\n  qj |= b;\n  tj |= b;\n}\nfunction Ki() {\n  qj = rj.current;\n  H(rj);\n}\nfunction Qj(a, b) {\n  a.finishedWork = null;\n  a.finishedLanes = 0;\n  var c = a.timeoutHandle;\n  c !== -1 && (a.timeoutHandle = -1, pf(c));\n  if (Y !== null)\n    for (c = Y.return; c !== null; ) {\n      var d = c;\n      switch (d.tag) {\n        case 1:\n          d = d.type.childContextTypes;\n          d !== null && d !== void 0 && Gf();\n          break;\n        case 3:\n          fh();\n          H(N);\n          H(M);\n          uh();\n          break;\n        case 5:\n          hh(d);\n          break;\n        case 4:\n          fh();\n          break;\n        case 13:\n          H(P);\n          break;\n        case 19:\n          H(P);\n          break;\n        case 10:\n          rg(d);\n          break;\n        case 23:\n        case 24:\n          Ki();\n      }\n      c = c.return;\n    }\n  U = a;\n  Y = Tg(a.current, null);\n  W = qj = tj = b;\n  V = 0;\n  sj = null;\n  uj = Hi = Dg = 0;\n}\nfunction Sj(a, b) {\n  do {\n    var c = Y;\n    try {\n      qg();\n      vh.current = Gh;\n      if (yh) {\n        for (var d = R.memoizedState; d !== null; ) {\n          var e = d.queue;\n          e !== null && (e.pending = null);\n          d = d.next;\n        }\n        yh = false;\n      }\n      xh = 0;\n      T = S = R = null;\n      zh = false;\n      pj.current = null;\n      if (c === null || c.return === null) {\n        V = 1;\n        sj = b;\n        Y = null;\n        break;\n      }\n      a: {\n        var f = a, g = c.return, h = c, k = b;\n        b = W;\n        h.flags |= 2048;\n        h.firstEffect = h.lastEffect = null;\n        if (k !== null && typeof k === \"object\" && typeof k.then === \"function\") {\n          var l2 = k;\n          if ((h.mode & 2) === 0) {\n            var n2 = h.alternate;\n            n2 ? (h.updateQueue = n2.updateQueue, h.memoizedState = n2.memoizedState, h.lanes = n2.lanes) : (h.updateQueue = null, h.memoizedState = null);\n          }\n          var A2 = (P.current & 1) !== 0, p2 = g;\n          do {\n            var C2;\n            if (C2 = p2.tag === 13) {\n              var x2 = p2.memoizedState;\n              if (x2 !== null)\n                C2 = x2.dehydrated !== null ? true : false;\n              else {\n                var w = p2.memoizedProps;\n                C2 = w.fallback === void 0 ? false : w.unstable_avoidThisFallback !== true ? true : A2 ? false : true;\n              }\n            }\n            if (C2) {\n              var z2 = p2.updateQueue;\n              if (z2 === null) {\n                var u2 = new Set();\n                u2.add(l2);\n                p2.updateQueue = u2;\n              } else\n                z2.add(l2);\n              if ((p2.mode & 2) === 0) {\n                p2.flags |= 64;\n                h.flags |= 16384;\n                h.flags &= -2981;\n                if (h.tag === 1)\n                  if (h.alternate === null)\n                    h.tag = 17;\n                  else {\n                    var t2 = zg(-1, 1);\n                    t2.tag = 2;\n                    Ag(h, t2);\n                  }\n                h.lanes |= 1;\n                break a;\n              }\n              k = void 0;\n              h = b;\n              var q2 = f.pingCache;\n              q2 === null ? (q2 = f.pingCache = new Oi(), k = new Set(), q2.set(l2, k)) : (k = q2.get(l2), k === void 0 && (k = new Set(), q2.set(l2, k)));\n              if (!k.has(h)) {\n                k.add(h);\n                var v2 = Yj.bind(null, f, l2, h);\n                l2.then(v2, v2);\n              }\n              p2.flags |= 4096;\n              p2.lanes = b;\n              break a;\n            }\n            p2 = p2.return;\n          } while (p2 !== null);\n          k = Error((Ra(h.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.\");\n        }\n        V !== 5 && (V = 2);\n        k = Mi(k, h);\n        p2 = g;\n        do {\n          switch (p2.tag) {\n            case 3:\n              f = k;\n              p2.flags |= 4096;\n              b &= -b;\n              p2.lanes |= b;\n              var J2 = Pi(p2, f, b);\n              Bg(p2, J2);\n              break a;\n            case 1:\n              f = k;\n              var K2 = p2.type, Q2 = p2.stateNode;\n              if ((p2.flags & 64) === 0 && (typeof K2.getDerivedStateFromError === \"function\" || Q2 !== null && typeof Q2.componentDidCatch === \"function\" && (Ti === null || !Ti.has(Q2)))) {\n                p2.flags |= 4096;\n                b &= -b;\n                p2.lanes |= b;\n                var L2 = Si(p2, f, b);\n                Bg(p2, L2);\n                break a;\n              }\n          }\n          p2 = p2.return;\n        } while (p2 !== null);\n      }\n      Zj(c);\n    } catch (va) {\n      b = va;\n      Y === c && c !== null && (Y = c = c.return);\n      continue;\n    }\n    break;\n  } while (1);\n}\nfunction Pj() {\n  var a = oj.current;\n  oj.current = Gh;\n  return a === null ? Gh : a;\n}\nfunction Tj(a, b) {\n  var c = X;\n  X |= 16;\n  var d = Pj();\n  U === a && W === b || Qj(a, b);\n  do\n    try {\n      ak();\n      break;\n    } catch (e) {\n      Sj(a, e);\n    }\n  while (1);\n  qg();\n  X = c;\n  oj.current = d;\n  if (Y !== null)\n    throw Error(y(261));\n  U = null;\n  W = 0;\n  return V;\n}\nfunction ak() {\n  for (; Y !== null; )\n    bk(Y);\n}\nfunction Rj() {\n  for (; Y !== null && !Qf(); )\n    bk(Y);\n}\nfunction bk(a) {\n  var b = ck(a.alternate, a, qj);\n  a.memoizedProps = a.pendingProps;\n  b === null ? Zj(a) : Y = b;\n  pj.current = null;\n}\nfunction Zj(a) {\n  var b = a;\n  do {\n    var c = b.alternate;\n    a = b.return;\n    if ((b.flags & 2048) === 0) {\n      c = Gi(c, b, qj);\n      if (c !== null) {\n        Y = c;\n        return;\n      }\n      c = b;\n      if (c.tag !== 24 && c.tag !== 23 || c.memoizedState === null || (qj & 1073741824) !== 0 || (c.mode & 4) === 0) {\n        for (var d = 0, e = c.child; e !== null; )\n          d |= e.lanes | e.childLanes, e = e.sibling;\n        c.childLanes = d;\n      }\n      a !== null && (a.flags & 2048) === 0 && (a.firstEffect === null && (a.firstEffect = b.firstEffect), b.lastEffect !== null && (a.lastEffect !== null && (a.lastEffect.nextEffect = b.firstEffect), a.lastEffect = b.lastEffect), 1 < b.flags && (a.lastEffect !== null ? a.lastEffect.nextEffect = b : a.firstEffect = b, a.lastEffect = b));\n    } else {\n      c = Li(b);\n      if (c !== null) {\n        c.flags &= 2047;\n        Y = c;\n        return;\n      }\n      a !== null && (a.firstEffect = a.lastEffect = null, a.flags |= 2048);\n    }\n    b = b.sibling;\n    if (b !== null) {\n      Y = b;\n      return;\n    }\n    Y = b = a;\n  } while (b !== null);\n  V === 0 && (V = 5);\n}\nfunction Uj(a) {\n  var b = eg();\n  gg(99, dk.bind(null, a, b));\n  return null;\n}\nfunction dk(a, b) {\n  do\n    Oj();\n  while (yj !== null);\n  if ((X & 48) !== 0)\n    throw Error(y(327));\n  var c = a.finishedWork;\n  if (c === null)\n    return null;\n  a.finishedWork = null;\n  a.finishedLanes = 0;\n  if (c === a.current)\n    throw Error(y(177));\n  a.callbackNode = null;\n  var d = c.lanes | c.childLanes, e = d, f = a.pendingLanes & ~e;\n  a.pendingLanes = e;\n  a.suspendedLanes = 0;\n  a.pingedLanes = 0;\n  a.expiredLanes &= e;\n  a.mutableReadLanes &= e;\n  a.entangledLanes &= e;\n  e = a.entanglements;\n  for (var g = a.eventTimes, h = a.expirationTimes; 0 < f; ) {\n    var k = 31 - Vc(f), l2 = 1 << k;\n    e[k] = 0;\n    g[k] = -1;\n    h[k] = -1;\n    f &= ~l2;\n  }\n  Cj !== null && (d & 24) === 0 && Cj.has(a) && Cj.delete(a);\n  a === U && (Y = U = null, W = 0);\n  1 < c.flags ? c.lastEffect !== null ? (c.lastEffect.nextEffect = c, d = c.firstEffect) : d = c : d = c.firstEffect;\n  if (d !== null) {\n    e = X;\n    X |= 32;\n    pj.current = null;\n    kf = fd;\n    g = Ne();\n    if (Oe(g)) {\n      if (\"selectionStart\" in g)\n        h = { start: g.selectionStart, end: g.selectionEnd };\n      else\n        a:\n          if (h = (h = g.ownerDocument) && h.defaultView || window, (l2 = h.getSelection && h.getSelection()) && l2.rangeCount !== 0) {\n            h = l2.anchorNode;\n            f = l2.anchorOffset;\n            k = l2.focusNode;\n            l2 = l2.focusOffset;\n            try {\n              h.nodeType, k.nodeType;\n            } catch (va) {\n              h = null;\n              break a;\n            }\n            var n2 = 0, A2 = -1, p2 = -1, C2 = 0, x2 = 0, w = g, z2 = null;\n            b:\n              for (; ; ) {\n                for (var u2; ; ) {\n                  w !== h || f !== 0 && w.nodeType !== 3 || (A2 = n2 + f);\n                  w !== k || l2 !== 0 && w.nodeType !== 3 || (p2 = n2 + l2);\n                  w.nodeType === 3 && (n2 += w.nodeValue.length);\n                  if ((u2 = w.firstChild) === null)\n                    break;\n                  z2 = w;\n                  w = u2;\n                }\n                for (; ; ) {\n                  if (w === g)\n                    break b;\n                  z2 === h && ++C2 === f && (A2 = n2);\n                  z2 === k && ++x2 === l2 && (p2 = n2);\n                  if ((u2 = w.nextSibling) !== null)\n                    break;\n                  w = z2;\n                  z2 = w.parentNode;\n                }\n                w = u2;\n              }\n            h = A2 === -1 || p2 === -1 ? null : { start: A2, end: p2 };\n          } else\n            h = null;\n      h = h || { start: 0, end: 0 };\n    } else\n      h = null;\n    lf = { focusedElem: g, selectionRange: h };\n    fd = false;\n    Ij = null;\n    Jj = false;\n    Z = d;\n    do\n      try {\n        ek();\n      } catch (va) {\n        if (Z === null)\n          throw Error(y(330));\n        Wi(Z, va);\n        Z = Z.nextEffect;\n      }\n    while (Z !== null);\n    Ij = null;\n    Z = d;\n    do\n      try {\n        for (g = a; Z !== null; ) {\n          var t2 = Z.flags;\n          t2 & 16 && pb(Z.stateNode, \"\");\n          if (t2 & 128) {\n            var q2 = Z.alternate;\n            if (q2 !== null) {\n              var v2 = q2.ref;\n              v2 !== null && (typeof v2 === \"function\" ? v2(null) : v2.current = null);\n            }\n          }\n          switch (t2 & 1038) {\n            case 2:\n              fj(Z);\n              Z.flags &= -3;\n              break;\n            case 6:\n              fj(Z);\n              Z.flags &= -3;\n              ij(Z.alternate, Z);\n              break;\n            case 1024:\n              Z.flags &= -1025;\n              break;\n            case 1028:\n              Z.flags &= -1025;\n              ij(Z.alternate, Z);\n              break;\n            case 4:\n              ij(Z.alternate, Z);\n              break;\n            case 8:\n              h = Z;\n              cj(g, h);\n              var J2 = h.alternate;\n              dj(h);\n              J2 !== null && dj(J2);\n          }\n          Z = Z.nextEffect;\n        }\n      } catch (va) {\n        if (Z === null)\n          throw Error(y(330));\n        Wi(Z, va);\n        Z = Z.nextEffect;\n      }\n    while (Z !== null);\n    v2 = lf;\n    q2 = Ne();\n    t2 = v2.focusedElem;\n    g = v2.selectionRange;\n    if (q2 !== t2 && t2 && t2.ownerDocument && Me(t2.ownerDocument.documentElement, t2)) {\n      g !== null && Oe(t2) && (q2 = g.start, v2 = g.end, v2 === void 0 && (v2 = q2), \"selectionStart\" in t2 ? (t2.selectionStart = q2, t2.selectionEnd = Math.min(v2, t2.value.length)) : (v2 = (q2 = t2.ownerDocument || document) && q2.defaultView || window, v2.getSelection && (v2 = v2.getSelection(), h = t2.textContent.length, J2 = Math.min(g.start, h), g = g.end === void 0 ? J2 : Math.min(g.end, h), !v2.extend && J2 > g && (h = g, g = J2, J2 = h), h = Le(t2, J2), f = Le(t2, g), h && f && (v2.rangeCount !== 1 || v2.anchorNode !== h.node || v2.anchorOffset !== h.offset || v2.focusNode !== f.node || v2.focusOffset !== f.offset) && (q2 = q2.createRange(), q2.setStart(h.node, h.offset), v2.removeAllRanges(), J2 > g ? (v2.addRange(q2), v2.extend(f.node, f.offset)) : (q2.setEnd(f.node, f.offset), v2.addRange(q2))))));\n      q2 = [];\n      for (v2 = t2; v2 = v2.parentNode; )\n        v2.nodeType === 1 && q2.push({ element: v2, left: v2.scrollLeft, top: v2.scrollTop });\n      typeof t2.focus === \"function\" && t2.focus();\n      for (t2 = 0; t2 < q2.length; t2++)\n        v2 = q2[t2], v2.element.scrollLeft = v2.left, v2.element.scrollTop = v2.top;\n    }\n    fd = !!kf;\n    lf = kf = null;\n    a.current = c;\n    Z = d;\n    do\n      try {\n        for (t2 = a; Z !== null; ) {\n          var K2 = Z.flags;\n          K2 & 36 && Yi(t2, Z.alternate, Z);\n          if (K2 & 128) {\n            q2 = void 0;\n            var Q2 = Z.ref;\n            if (Q2 !== null) {\n              var L2 = Z.stateNode;\n              switch (Z.tag) {\n                case 5:\n                  q2 = L2;\n                  break;\n                default:\n                  q2 = L2;\n              }\n              typeof Q2 === \"function\" ? Q2(q2) : Q2.current = q2;\n            }\n          }\n          Z = Z.nextEffect;\n        }\n      } catch (va) {\n        if (Z === null)\n          throw Error(y(330));\n        Wi(Z, va);\n        Z = Z.nextEffect;\n      }\n    while (Z !== null);\n    Z = null;\n    $f();\n    X = e;\n  } else\n    a.current = c;\n  if (xj)\n    xj = false, yj = a, zj = b;\n  else\n    for (Z = d; Z !== null; )\n      b = Z.nextEffect, Z.nextEffect = null, Z.flags & 8 && (K2 = Z, K2.sibling = null, K2.stateNode = null), Z = b;\n  d = a.pendingLanes;\n  d === 0 && (Ti = null);\n  d === 1 ? a === Ej ? Dj++ : (Dj = 0, Ej = a) : Dj = 0;\n  c = c.stateNode;\n  if (Mf && typeof Mf.onCommitFiberRoot === \"function\")\n    try {\n      Mf.onCommitFiberRoot(Lf, c, void 0, (c.current.flags & 64) === 64);\n    } catch (va) {\n    }\n  Mj(a, O());\n  if (Qi)\n    throw Qi = false, a = Ri, Ri = null, a;\n  if ((X & 8) !== 0)\n    return null;\n  ig();\n  return null;\n}\nfunction ek() {\n  for (; Z !== null; ) {\n    var a = Z.alternate;\n    Jj || Ij === null || ((Z.flags & 8) !== 0 ? dc(Z, Ij) && (Jj = true) : Z.tag === 13 && mj(a, Z) && dc(Z, Ij) && (Jj = true));\n    var b = Z.flags;\n    (b & 256) !== 0 && Xi(a, Z);\n    (b & 512) === 0 || xj || (xj = true, hg(97, function() {\n      Oj();\n      return null;\n    }));\n    Z = Z.nextEffect;\n  }\n}\nfunction Oj() {\n  if (zj !== 90) {\n    var a = 97 < zj ? 97 : zj;\n    zj = 90;\n    return gg(a, fk);\n  }\n  return false;\n}\nfunction $i(a, b) {\n  Aj.push(b, a);\n  xj || (xj = true, hg(97, function() {\n    Oj();\n    return null;\n  }));\n}\nfunction Zi(a, b) {\n  Bj.push(b, a);\n  xj || (xj = true, hg(97, function() {\n    Oj();\n    return null;\n  }));\n}\nfunction fk() {\n  if (yj === null)\n    return false;\n  var a = yj;\n  yj = null;\n  if ((X & 48) !== 0)\n    throw Error(y(331));\n  var b = X;\n  X |= 32;\n  var c = Bj;\n  Bj = [];\n  for (var d = 0; d < c.length; d += 2) {\n    var e = c[d], f = c[d + 1], g = e.destroy;\n    e.destroy = void 0;\n    if (typeof g === \"function\")\n      try {\n        g();\n      } catch (k) {\n        if (f === null)\n          throw Error(y(330));\n        Wi(f, k);\n      }\n  }\n  c = Aj;\n  Aj = [];\n  for (d = 0; d < c.length; d += 2) {\n    e = c[d];\n    f = c[d + 1];\n    try {\n      var h = e.create;\n      e.destroy = h();\n    } catch (k) {\n      if (f === null)\n        throw Error(y(330));\n      Wi(f, k);\n    }\n  }\n  for (h = a.current.firstEffect; h !== null; )\n    a = h.nextEffect, h.nextEffect = null, h.flags & 8 && (h.sibling = null, h.stateNode = null), h = a;\n  X = b;\n  ig();\n  return true;\n}\nfunction gk(a, b, c) {\n  b = Mi(c, b);\n  b = Pi(a, b, 1);\n  Ag(a, b);\n  b = Hg();\n  a = Kj(a, 1);\n  a !== null && ($c(a, 1, b), Mj(a, b));\n}\nfunction Wi(a, b) {\n  if (a.tag === 3)\n    gk(a, a, b);\n  else\n    for (var c = a.return; c !== null; ) {\n      if (c.tag === 3) {\n        gk(c, a, b);\n        break;\n      } else if (c.tag === 1) {\n        var d = c.stateNode;\n        if (typeof c.type.getDerivedStateFromError === \"function\" || typeof d.componentDidCatch === \"function\" && (Ti === null || !Ti.has(d))) {\n          a = Mi(b, a);\n          var e = Si(c, a, 1);\n          Ag(c, e);\n          e = Hg();\n          c = Kj(c, 1);\n          if (c !== null)\n            $c(c, 1, e), Mj(c, e);\n          else if (typeof d.componentDidCatch === \"function\" && (Ti === null || !Ti.has(d)))\n            try {\n              d.componentDidCatch(b, a);\n            } catch (f) {\n            }\n          break;\n        }\n      }\n      c = c.return;\n    }\n}\nfunction Yj(a, b, c) {\n  var d = a.pingCache;\n  d !== null && d.delete(b);\n  b = Hg();\n  a.pingedLanes |= a.suspendedLanes & c;\n  U === a && (W & c) === c && (V === 4 || V === 3 && (W & 62914560) === W && 500 > O() - jj ? Qj(a, 0) : uj |= c);\n  Mj(a, b);\n}\nfunction lj(a, b) {\n  var c = a.stateNode;\n  c !== null && c.delete(b);\n  b = 0;\n  b === 0 && (b = a.mode, (b & 2) === 0 ? b = 1 : (b & 4) === 0 ? b = eg() === 99 ? 1 : 2 : (Gj === 0 && (Gj = tj), b = Yc(62914560 & ~Gj), b === 0 && (b = 4194304)));\n  c = Hg();\n  a = Kj(a, b);\n  a !== null && ($c(a, b, c), Mj(a, c));\n}\nvar ck;\nck = function(a, b, c) {\n  var d = b.lanes;\n  if (a !== null)\n    if (a.memoizedProps !== b.pendingProps || N.current)\n      ug = true;\n    else if ((c & d) !== 0)\n      ug = (a.flags & 16384) !== 0 ? true : false;\n    else {\n      ug = false;\n      switch (b.tag) {\n        case 3:\n          ri(b);\n          sh();\n          break;\n        case 5:\n          gh(b);\n          break;\n        case 1:\n          Ff(b.type) && Jf(b);\n          break;\n        case 4:\n          eh(b, b.stateNode.containerInfo);\n          break;\n        case 10:\n          d = b.memoizedProps.value;\n          var e = b.type._context;\n          I(mg, e._currentValue);\n          e._currentValue = d;\n          break;\n        case 13:\n          if (b.memoizedState !== null) {\n            if ((c & b.child.childLanes) !== 0)\n              return ti(a, b, c);\n            I(P, P.current & 1);\n            b = hi(a, b, c);\n            return b !== null ? b.sibling : null;\n          }\n          I(P, P.current & 1);\n          break;\n        case 19:\n          d = (c & b.childLanes) !== 0;\n          if ((a.flags & 64) !== 0) {\n            if (d)\n              return Ai(a, b, c);\n            b.flags |= 64;\n          }\n          e = b.memoizedState;\n          e !== null && (e.rendering = null, e.tail = null, e.lastEffect = null);\n          I(P, P.current);\n          if (d)\n            break;\n          else\n            return null;\n        case 23:\n        case 24:\n          return b.lanes = 0, mi(a, b, c);\n      }\n      return hi(a, b, c);\n    }\n  else\n    ug = false;\n  b.lanes = 0;\n  switch (b.tag) {\n    case 2:\n      d = b.type;\n      a !== null && (a.alternate = null, b.alternate = null, b.flags |= 2);\n      a = b.pendingProps;\n      e = Ef(b, M.current);\n      tg(b, c);\n      e = Ch(null, b, d, a, e, c);\n      b.flags |= 1;\n      if (typeof e === \"object\" && e !== null && typeof e.render === \"function\" && e.$$typeof === void 0) {\n        b.tag = 1;\n        b.memoizedState = null;\n        b.updateQueue = null;\n        if (Ff(d)) {\n          var f = true;\n          Jf(b);\n        } else\n          f = false;\n        b.memoizedState = e.state !== null && e.state !== void 0 ? e.state : null;\n        xg(b);\n        var g = d.getDerivedStateFromProps;\n        typeof g === \"function\" && Gg(b, d, g, a);\n        e.updater = Kg;\n        b.stateNode = e;\n        e._reactInternals = b;\n        Og(b, d, a, c);\n        b = qi(null, b, d, true, f, c);\n      } else\n        b.tag = 0, fi(null, b, e, c), b = b.child;\n      return b;\n    case 16:\n      e = b.elementType;\n      a: {\n        a !== null && (a.alternate = null, b.alternate = null, b.flags |= 2);\n        a = b.pendingProps;\n        f = e._init;\n        e = f(e._payload);\n        b.type = e;\n        f = b.tag = hk(e);\n        a = lg(e, a);\n        switch (f) {\n          case 0:\n            b = li(null, b, e, a, c);\n            break a;\n          case 1:\n            b = pi(null, b, e, a, c);\n            break a;\n          case 11:\n            b = gi(null, b, e, a, c);\n            break a;\n          case 14:\n            b = ii(null, b, e, lg(e.type, a), d, c);\n            break a;\n        }\n        throw Error(y(306, e, \"\"));\n      }\n      return b;\n    case 0:\n      return d = b.type, e = b.pendingProps, e = b.elementType === d ? e : lg(d, e), li(a, b, d, e, c);\n    case 1:\n      return d = b.type, e = b.pendingProps, e = b.elementType === d ? e : lg(d, e), pi(a, b, d, e, c);\n    case 3:\n      ri(b);\n      d = b.updateQueue;\n      if (a === null || d === null)\n        throw Error(y(282));\n      d = b.pendingProps;\n      e = b.memoizedState;\n      e = e !== null ? e.element : null;\n      yg(a, b);\n      Cg(b, d, null, c);\n      d = b.memoizedState.element;\n      if (d === e)\n        sh(), b = hi(a, b, c);\n      else {\n        e = b.stateNode;\n        if (f = e.hydrate)\n          kh = rf(b.stateNode.containerInfo.firstChild), jh = b, f = lh = true;\n        if (f) {\n          a = e.mutableSourceEagerHydrationData;\n          if (a != null)\n            for (e = 0; e < a.length; e += 2)\n              f = a[e], f._workInProgressVersionPrimary = a[e + 1], th.push(f);\n          c = Zg(b, null, d, c);\n          for (b.child = c; c; )\n            c.flags = c.flags & -3 | 1024, c = c.sibling;\n        } else\n          fi(a, b, d, c), sh();\n        b = b.child;\n      }\n      return b;\n    case 5:\n      return gh(b), a === null && ph(b), d = b.type, e = b.pendingProps, f = a !== null ? a.memoizedProps : null, g = e.children, nf(d, e) ? g = null : f !== null && nf(d, f) && (b.flags |= 16), oi(a, b), fi(a, b, g, c), b.child;\n    case 6:\n      return a === null && ph(b), null;\n    case 13:\n      return ti(a, b, c);\n    case 4:\n      return eh(b, b.stateNode.containerInfo), d = b.pendingProps, a === null ? b.child = Yg(b, null, d, c) : fi(a, b, d, c), b.child;\n    case 11:\n      return d = b.type, e = b.pendingProps, e = b.elementType === d ? e : lg(d, e), gi(a, b, d, e, c);\n    case 7:\n      return fi(a, b, b.pendingProps, c), b.child;\n    case 8:\n      return fi(a, b, b.pendingProps.children, c), b.child;\n    case 12:\n      return fi(a, b, b.pendingProps.children, c), b.child;\n    case 10:\n      a: {\n        d = b.type._context;\n        e = b.pendingProps;\n        g = b.memoizedProps;\n        f = e.value;\n        var h = b.type._context;\n        I(mg, h._currentValue);\n        h._currentValue = f;\n        if (g !== null)\n          if (h = g.value, f = He(h, f) ? 0 : (typeof d._calculateChangedBits === \"function\" ? d._calculateChangedBits(h, f) : 1073741823) | 0, f === 0) {\n            if (g.children === e.children && !N.current) {\n              b = hi(a, b, c);\n              break a;\n            }\n          } else\n            for (h = b.child, h !== null && (h.return = b); h !== null; ) {\n              var k = h.dependencies;\n              if (k !== null) {\n                g = h.child;\n                for (var l2 = k.firstContext; l2 !== null; ) {\n                  if (l2.context === d && (l2.observedBits & f) !== 0) {\n                    h.tag === 1 && (l2 = zg(-1, c & -c), l2.tag = 2, Ag(h, l2));\n                    h.lanes |= c;\n                    l2 = h.alternate;\n                    l2 !== null && (l2.lanes |= c);\n                    sg(h.return, c);\n                    k.lanes |= c;\n                    break;\n                  }\n                  l2 = l2.next;\n                }\n              } else\n                g = h.tag === 10 ? h.type === b.type ? null : h.child : h.child;\n              if (g !== null)\n                g.return = h;\n              else\n                for (g = h; g !== null; ) {\n                  if (g === b) {\n                    g = null;\n                    break;\n                  }\n                  h = g.sibling;\n                  if (h !== null) {\n                    h.return = g.return;\n                    g = h;\n                    break;\n                  }\n                  g = g.return;\n                }\n              h = g;\n            }\n        fi(a, b, e.children, c);\n        b = b.child;\n      }\n      return b;\n    case 9:\n      return e = b.type, f = b.pendingProps, d = f.children, tg(b, c), e = vg(e, f.unstable_observedBits), d = d(e), b.flags |= 1, fi(a, b, d, c), b.child;\n    case 14:\n      return e = b.type, f = lg(e, b.pendingProps), f = lg(e.type, f), ii(a, b, e, f, d, c);\n    case 15:\n      return ki(a, b, b.type, b.pendingProps, d, c);\n    case 17:\n      return d = b.type, e = b.pendingProps, e = b.elementType === d ? e : lg(d, e), a !== null && (a.alternate = null, b.alternate = null, b.flags |= 2), b.tag = 1, Ff(d) ? (a = true, Jf(b)) : a = false, tg(b, c), Mg(b, d, e), Og(b, d, e, c), qi(null, b, d, true, a, c);\n    case 19:\n      return Ai(a, b, c);\n    case 23:\n      return mi(a, b, c);\n    case 24:\n      return mi(a, b, c);\n  }\n  throw Error(y(156, b.tag));\n};\nfunction ik(a, b, c, d) {\n  this.tag = a;\n  this.key = c;\n  this.sibling = this.child = this.return = this.stateNode = this.type = this.elementType = null;\n  this.index = 0;\n  this.ref = null;\n  this.pendingProps = b;\n  this.dependencies = this.memoizedState = this.updateQueue = this.memoizedProps = null;\n  this.mode = d;\n  this.flags = 0;\n  this.lastEffect = this.firstEffect = this.nextEffect = null;\n  this.childLanes = this.lanes = 0;\n  this.alternate = null;\n}\nfunction nh(a, b, c, d) {\n  return new ik(a, b, c, d);\n}\nfunction ji(a) {\n  a = a.prototype;\n  return !(!a || !a.isReactComponent);\n}\nfunction hk(a) {\n  if (typeof a === \"function\")\n    return ji(a) ? 1 : 0;\n  if (a !== void 0 && a !== null) {\n    a = a.$$typeof;\n    if (a === Aa)\n      return 11;\n    if (a === Da)\n      return 14;\n  }\n  return 2;\n}\nfunction Tg(a, b) {\n  var c = a.alternate;\n  c === null ? (c = nh(a.tag, b, a.key, a.mode), c.elementType = a.elementType, c.type = a.type, c.stateNode = a.stateNode, c.alternate = a, a.alternate = c) : (c.pendingProps = b, c.type = a.type, c.flags = 0, c.nextEffect = null, c.firstEffect = null, c.lastEffect = null);\n  c.childLanes = a.childLanes;\n  c.lanes = a.lanes;\n  c.child = a.child;\n  c.memoizedProps = a.memoizedProps;\n  c.memoizedState = a.memoizedState;\n  c.updateQueue = a.updateQueue;\n  b = a.dependencies;\n  c.dependencies = b === null ? null : { lanes: b.lanes, firstContext: b.firstContext };\n  c.sibling = a.sibling;\n  c.index = a.index;\n  c.ref = a.ref;\n  return c;\n}\nfunction Vg(a, b, c, d, e, f) {\n  var g = 2;\n  d = a;\n  if (typeof a === \"function\")\n    ji(a) && (g = 1);\n  else if (typeof a === \"string\")\n    g = 5;\n  else\n    a:\n      switch (a) {\n        case ua:\n          return Xg(c.children, e, f, b);\n        case Ha:\n          g = 8;\n          e |= 16;\n          break;\n        case wa:\n          g = 8;\n          e |= 1;\n          break;\n        case xa:\n          return a = nh(12, c, b, e | 8), a.elementType = xa, a.type = xa, a.lanes = f, a;\n        case Ba:\n          return a = nh(13, c, b, e), a.type = Ba, a.elementType = Ba, a.lanes = f, a;\n        case Ca:\n          return a = nh(19, c, b, e), a.elementType = Ca, a.lanes = f, a;\n        case Ia:\n          return vi(c, e, f, b);\n        case Ja:\n          return a = nh(24, c, b, e), a.elementType = Ja, a.lanes = f, a;\n        default:\n          if (typeof a === \"object\" && a !== null)\n            switch (a.$$typeof) {\n              case ya:\n                g = 10;\n                break a;\n              case za:\n                g = 9;\n                break a;\n              case Aa:\n                g = 11;\n                break a;\n              case Da:\n                g = 14;\n                break a;\n              case Ea:\n                g = 16;\n                d = null;\n                break a;\n              case Fa:\n                g = 22;\n                break a;\n            }\n          throw Error(y(130, a == null ? a : typeof a, \"\"));\n      }\n  b = nh(g, c, b, e);\n  b.elementType = a;\n  b.type = d;\n  b.lanes = f;\n  return b;\n}\nfunction Xg(a, b, c, d) {\n  a = nh(7, a, d, b);\n  a.lanes = c;\n  return a;\n}\nfunction vi(a, b, c, d) {\n  a = nh(23, a, d, b);\n  a.elementType = Ia;\n  a.lanes = c;\n  return a;\n}\nfunction Ug(a, b, c) {\n  a = nh(6, a, null, b);\n  a.lanes = c;\n  return a;\n}\nfunction Wg(a, b, c) {\n  b = nh(4, a.children !== null ? a.children : [], a.key, b);\n  b.lanes = c;\n  b.stateNode = { containerInfo: a.containerInfo, pendingChildren: null, implementation: a.implementation };\n  return b;\n}\nfunction jk(a, b, c) {\n  this.tag = b;\n  this.containerInfo = a;\n  this.finishedWork = this.pingCache = this.current = this.pendingChildren = null;\n  this.timeoutHandle = -1;\n  this.pendingContext = this.context = null;\n  this.hydrate = c;\n  this.callbackNode = null;\n  this.callbackPriority = 0;\n  this.eventTimes = Zc(0);\n  this.expirationTimes = Zc(-1);\n  this.entangledLanes = this.finishedLanes = this.mutableReadLanes = this.expiredLanes = this.pingedLanes = this.suspendedLanes = this.pendingLanes = 0;\n  this.entanglements = Zc(0);\n  this.mutableSourceEagerHydrationData = null;\n}\nfunction kk(a, b, c) {\n  var d = 3 < arguments.length && arguments[3] !== void 0 ? arguments[3] : null;\n  return { $$typeof: ta, key: d == null ? null : \"\" + d, children: a, containerInfo: b, implementation: c };\n}\nfunction lk(a, b, c, d) {\n  var e = b.current, f = Hg(), g = Ig(e);\n  a:\n    if (c) {\n      c = c._reactInternals;\n      b: {\n        if (Zb(c) !== c || c.tag !== 1)\n          throw Error(y(170));\n        var h = c;\n        do {\n          switch (h.tag) {\n            case 3:\n              h = h.stateNode.context;\n              break b;\n            case 1:\n              if (Ff(h.type)) {\n                h = h.stateNode.__reactInternalMemoizedMergedChildContext;\n                break b;\n              }\n          }\n          h = h.return;\n        } while (h !== null);\n        throw Error(y(171));\n      }\n      if (c.tag === 1) {\n        var k = c.type;\n        if (Ff(k)) {\n          c = If(c, k, h);\n          break a;\n        }\n      }\n      c = h;\n    } else\n      c = Cf;\n  b.context === null ? b.context = c : b.pendingContext = c;\n  b = zg(f, g);\n  b.payload = { element: a };\n  d = d === void 0 ? null : d;\n  d !== null && (b.callback = d);\n  Ag(e, b);\n  Jg(e, g, f);\n  return g;\n}\nfunction mk(a) {\n  a = a.current;\n  if (!a.child)\n    return null;\n  switch (a.child.tag) {\n    case 5:\n      return a.child.stateNode;\n    default:\n      return a.child.stateNode;\n  }\n}\nfunction nk(a, b) {\n  a = a.memoizedState;\n  if (a !== null && a.dehydrated !== null) {\n    var c = a.retryLane;\n    a.retryLane = c !== 0 && c < b ? c : b;\n  }\n}\nfunction ok(a, b) {\n  nk(a, b);\n  (a = a.alternate) && nk(a, b);\n}\nfunction pk() {\n  return null;\n}\nfunction qk(a, b, c) {\n  var d = c != null && c.hydrationOptions != null && c.hydrationOptions.mutableSources || null;\n  c = new jk(a, b, c != null && c.hydrate === true);\n  b = nh(3, null, null, b === 2 ? 7 : b === 1 ? 3 : 0);\n  c.current = b;\n  b.stateNode = c;\n  xg(b);\n  a[ff] = c.current;\n  cf(a.nodeType === 8 ? a.parentNode : a);\n  if (d)\n    for (a = 0; a < d.length; a++) {\n      b = d[a];\n      var e = b._getVersion;\n      e = e(b._source);\n      c.mutableSourceEagerHydrationData == null ? c.mutableSourceEagerHydrationData = [b, e] : c.mutableSourceEagerHydrationData.push(b, e);\n    }\n  this._internalRoot = c;\n}\nqk.prototype.render = function(a) {\n  lk(a, this._internalRoot, null, null);\n};\nqk.prototype.unmount = function() {\n  var a = this._internalRoot, b = a.containerInfo;\n  lk(null, a, null, function() {\n    b[ff] = null;\n  });\n};\nfunction rk(a) {\n  return !(!a || a.nodeType !== 1 && a.nodeType !== 9 && a.nodeType !== 11 && (a.nodeType !== 8 || a.nodeValue !== \" react-mount-point-unstable \"));\n}\nfunction sk(a, b) {\n  b || (b = a ? a.nodeType === 9 ? a.documentElement : a.firstChild : null, b = !(!b || b.nodeType !== 1 || !b.hasAttribute(\"data-reactroot\")));\n  if (!b)\n    for (var c; c = a.lastChild; )\n      a.removeChild(c);\n  return new qk(a, 0, b ? { hydrate: true } : void 0);\n}\nfunction tk(a, b, c, d, e) {\n  var f = c._reactRootContainer;\n  if (f) {\n    var g = f._internalRoot;\n    if (typeof e === \"function\") {\n      var h = e;\n      e = function() {\n        var a2 = mk(g);\n        h.call(a2);\n      };\n    }\n    lk(b, g, a, e);\n  } else {\n    f = c._reactRootContainer = sk(c, d);\n    g = f._internalRoot;\n    if (typeof e === \"function\") {\n      var k = e;\n      e = function() {\n        var a2 = mk(g);\n        k.call(a2);\n      };\n    }\n    Xj(function() {\n      lk(b, g, a, e);\n    });\n  }\n  return mk(g);\n}\nec = function(a) {\n  if (a.tag === 13) {\n    var b = Hg();\n    Jg(a, 4, b);\n    ok(a, 4);\n  }\n};\nfc = function(a) {\n  if (a.tag === 13) {\n    var b = Hg();\n    Jg(a, 67108864, b);\n    ok(a, 67108864);\n  }\n};\ngc = function(a) {\n  if (a.tag === 13) {\n    var b = Hg(), c = Ig(a);\n    Jg(a, c, b);\n    ok(a, c);\n  }\n};\nhc = function(a, b) {\n  return b();\n};\nyb = function(a, b, c) {\n  switch (b) {\n    case \"input\":\n      ab(a, c);\n      b = c.name;\n      if (c.type === \"radio\" && b != null) {\n        for (c = a; c.parentNode; )\n          c = c.parentNode;\n        c = c.querySelectorAll(\"input[name=\" + JSON.stringify(\"\" + b) + '][type=\"radio\"]');\n        for (b = 0; b < c.length; b++) {\n          var d = c[b];\n          if (d !== a && d.form === a.form) {\n            var e = Db(d);\n            if (!e)\n              throw Error(y(90));\n            Wa(d);\n            ab(d, e);\n          }\n        }\n      }\n      break;\n    case \"textarea\":\n      ib(a, c);\n      break;\n    case \"select\":\n      b = c.value, b != null && fb(a, !!c.multiple, b, false);\n  }\n};\nGb = Wj;\nHb = function(a, b, c, d, e) {\n  var f = X;\n  X |= 4;\n  try {\n    return gg(98, a.bind(null, b, c, d, e));\n  } finally {\n    X = f, X === 0 && (wj(), ig());\n  }\n};\nIb = function() {\n  (X & 49) === 0 && (Vj(), Oj());\n};\nJb = function(a, b) {\n  var c = X;\n  X |= 2;\n  try {\n    return a(b);\n  } finally {\n    X = c, X === 0 && (wj(), ig());\n  }\n};\nfunction uk(a, b) {\n  var c = 2 < arguments.length && arguments[2] !== void 0 ? arguments[2] : null;\n  if (!rk(b))\n    throw Error(y(200));\n  return kk(a, b, null, c);\n}\nvar vk = { Events: [Cb, ue, Db, Eb, Fb, Oj, { current: false }] }, wk = { findFiberByHostInstance: wc, bundleType: 0, version: \"17.0.2\", rendererPackageName: \"react-dom\" };\nvar xk = { bundleType: wk.bundleType, version: wk.version, rendererPackageName: wk.rendererPackageName, rendererConfig: wk.rendererConfig, overrideHookState: null, overrideHookStateDeletePath: null, overrideHookStateRenamePath: null, overrideProps: null, overridePropsDeletePath: null, overridePropsRenamePath: null, setSuspenseHandler: null, scheduleUpdate: null, currentDispatcherRef: ra.ReactCurrentDispatcher, findHostInstanceByFiber: function(a) {\n  a = cc(a);\n  return a === null ? null : a.stateNode;\n}, findFiberByHostInstance: wk.findFiberByHostInstance || pk, findHostInstancesForRefresh: null, scheduleRefresh: null, scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null };\nif (typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== \"undefined\") {\n  var yk = __REACT_DEVTOOLS_GLOBAL_HOOK__;\n  if (!yk.isDisabled && yk.supportsFiber)\n    try {\n      Lf = yk.inject(xk), Mf = yk;\n    } catch (a) {\n    }\n}\nreactDom_production_min.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = vk;\nreactDom_production_min.createPortal = uk;\nreactDom_production_min.findDOMNode = function(a) {\n  if (a == null)\n    return null;\n  if (a.nodeType === 1)\n    return a;\n  var b = a._reactInternals;\n  if (b === void 0) {\n    if (typeof a.render === \"function\")\n      throw Error(y(188));\n    throw Error(y(268, Object.keys(a)));\n  }\n  a = cc(b);\n  a = a === null ? null : a.stateNode;\n  return a;\n};\nreactDom_production_min.flushSync = function(a, b) {\n  var c = X;\n  if ((c & 48) !== 0)\n    return a(b);\n  X |= 1;\n  try {\n    if (a)\n      return gg(99, a.bind(null, b));\n  } finally {\n    X = c, ig();\n  }\n};\nreactDom_production_min.hydrate = function(a, b, c) {\n  if (!rk(b))\n    throw Error(y(200));\n  return tk(null, a, b, true, c);\n};\nreactDom_production_min.render = function(a, b, c) {\n  if (!rk(b))\n    throw Error(y(200));\n  return tk(null, a, b, false, c);\n};\nreactDom_production_min.unmountComponentAtNode = function(a) {\n  if (!rk(a))\n    throw Error(y(40));\n  return a._reactRootContainer ? (Xj(function() {\n    tk(null, null, a, false, function() {\n      a._reactRootContainer = null;\n      a[ff] = null;\n    });\n  }), true) : false;\n};\nreactDom_production_min.unstable_batchedUpdates = Wj;\nreactDom_production_min.unstable_createPortal = function(a, b) {\n  return uk(a, b, 2 < arguments.length && arguments[2] !== void 0 ? arguments[2] : null);\n};\nreactDom_production_min.unstable_renderSubtreeIntoContainer = function(a, b, c, d) {\n  if (!rk(c))\n    throw Error(y(200));\n  if (a == null || a._reactInternals === void 0)\n    throw Error(y(38));\n  return tk(a, b, c, false, d);\n};\nreactDom_production_min.version = \"17.0.2\";\nfunction checkDCE() {\n  if (typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ === \"undefined\" || typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.checkDCE !== \"function\") {\n    return;\n  }\n  try {\n    __REACT_DEVTOOLS_GLOBAL_HOOK__.checkDCE(checkDCE);\n  } catch (err) {\n    console.error(err);\n  }\n}\n{\n  checkDCE();\n  reactDom.exports = reactDom_production_min;\n}\nvar ReactDOM = reactDom.exports;\nfunction _extends() {\n  _extends = Object.assign || function(target2) {\n    for (var i = 1; i < arguments.length; i++) {\n      var source2 = arguments[i];\n      for (var key in source2) {\n        if (Object.prototype.hasOwnProperty.call(source2, key)) {\n          target2[key] = source2[key];\n        }\n      }\n    }\n    return target2;\n  };\n  return _extends.apply(this, arguments);\n}\nfunction _objectWithoutPropertiesLoose(source2, excluded) {\n  if (source2 == null)\n    return {};\n  var target2 = {};\n  var sourceKeys = Object.keys(source2);\n  var key, i;\n  for (i = 0; i < sourceKeys.length; i++) {\n    key = sourceKeys[i];\n    if (excluded.indexOf(key) >= 0)\n      continue;\n    target2[key] = source2[key];\n  }\n  return target2;\n}\nfunction _setPrototypeOf(o, p2) {\n  _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf2(o2, p3) {\n    o2.__proto__ = p3;\n    return o2;\n  };\n  return _setPrototypeOf(o, p2);\n}\nfunction _inheritsLoose(subClass, superClass) {\n  subClass.prototype = Object.create(superClass.prototype);\n  subClass.prototype.constructor = subClass;\n  _setPrototypeOf(subClass, superClass);\n}\nvar ReactPropTypesSecret$1 = \"SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED\";\nvar ReactPropTypesSecret_1 = ReactPropTypesSecret$1;\nvar ReactPropTypesSecret = ReactPropTypesSecret_1;\nfunction emptyFunction() {\n}\nfunction emptyFunctionWithReset() {\n}\nemptyFunctionWithReset.resetWarningCache = emptyFunction;\nvar factoryWithThrowingShims = function() {\n  function shim(props, propName, componentName, location2, propFullName, secret) {\n    if (secret === ReactPropTypesSecret) {\n      return;\n    }\n    var err = new Error(\"Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types\");\n    err.name = \"Invariant Violation\";\n    throw err;\n  }\n  shim.isRequired = shim;\n  function getShim() {\n    return shim;\n  }\n  var ReactPropTypes = {\n    array: shim,\n    bool: shim,\n    func: shim,\n    number: shim,\n    object: shim,\n    string: shim,\n    symbol: shim,\n    any: shim,\n    arrayOf: getShim,\n    element: shim,\n    elementType: shim,\n    instanceOf: getShim,\n    node: shim,\n    objectOf: getShim,\n    oneOf: getShim,\n    oneOfType: getShim,\n    shape: getShim,\n    exact: getShim,\n    checkPropTypes: emptyFunctionWithReset,\n    resetWarningCache: emptyFunction\n  };\n  ReactPropTypes.PropTypes = ReactPropTypes;\n  return ReactPropTypes;\n};\n{\n  factoryWithThrowingShims();\n}\nfunction hasClass(element, className) {\n  if (element.classList)\n    return !!className && element.classList.contains(className);\n  return (\" \" + (element.className.baseVal || element.className) + \" \").indexOf(\" \" + className + \" \") !== -1;\n}\nfunction addClass(element, className) {\n  if (element.classList)\n    element.classList.add(className);\n  else if (!hasClass(element, className))\n    if (typeof element.className === \"string\")\n      element.className = element.className + \" \" + className;\n    else\n      element.setAttribute(\"class\", (element.className && element.className.baseVal || \"\") + \" \" + className);\n}\nfunction replaceClassName(origClass, classToRemove) {\n  return origClass.replace(new RegExp(\"(^|\\\\s)\" + classToRemove + \"(?:\\\\s|$)\", \"g\"), \"$1\").replace(/\\s+/g, \" \").replace(/^\\s*|\\s*$/g, \"\");\n}\nfunction removeClass$2(element, className) {\n  if (element.classList) {\n    element.classList.remove(className);\n  } else if (typeof element.className === \"string\") {\n    element.className = replaceClassName(element.className, className);\n  } else {\n    element.setAttribute(\"class\", replaceClassName(element.className && element.className.baseVal || \"\", className));\n  }\n}\nvar config$1 = {\n  disabled: false\n};\nvar TransitionGroupContext$1 = React.createContext(null);\nvar UNMOUNTED$1 = \"unmounted\";\nvar EXITED$1 = \"exited\";\nvar ENTERING$1 = \"entering\";\nvar ENTERED$1 = \"entered\";\nvar EXITING$1 = \"exiting\";\nvar Transition$2 = /* @__PURE__ */ function(_React$Component) {\n  _inheritsLoose(Transition2, _React$Component);\n  function Transition2(props, context) {\n    var _this;\n    _this = _React$Component.call(this, props, context) || this;\n    var parentGroup = context;\n    var appear = parentGroup && !parentGroup.isMounting ? props.enter : props.appear;\n    var initialStatus;\n    _this.appearStatus = null;\n    if (props.in) {\n      if (appear) {\n        initialStatus = EXITED$1;\n        _this.appearStatus = ENTERING$1;\n      } else {\n        initialStatus = ENTERED$1;\n      }\n    } else {\n      if (props.unmountOnExit || props.mountOnEnter) {\n        initialStatus = UNMOUNTED$1;\n      } else {\n        initialStatus = EXITED$1;\n      }\n    }\n    _this.state = {\n      status: initialStatus\n    };\n    _this.nextCallback = null;\n    return _this;\n  }\n  Transition2.getDerivedStateFromProps = function getDerivedStateFromProps(_ref2, prevState) {\n    var nextIn = _ref2.in;\n    if (nextIn && prevState.status === UNMOUNTED$1) {\n      return {\n        status: EXITED$1\n      };\n    }\n    return null;\n  };\n  var _proto = Transition2.prototype;\n  _proto.componentDidMount = function componentDidMount() {\n    this.updateStatus(true, this.appearStatus);\n  };\n  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {\n    var nextStatus = null;\n    if (prevProps !== this.props) {\n      var status = this.state.status;\n      if (this.props.in) {\n        if (status !== ENTERING$1 && status !== ENTERED$1) {\n          nextStatus = ENTERING$1;\n        }\n      } else {\n        if (status === ENTERING$1 || status === ENTERED$1) {\n          nextStatus = EXITING$1;\n        }\n      }\n    }\n    this.updateStatus(false, nextStatus);\n  };\n  _proto.componentWillUnmount = function componentWillUnmount() {\n    this.cancelNextCallback();\n  };\n  _proto.getTimeouts = function getTimeouts() {\n    var timeout = this.props.timeout;\n    var exit, enter, appear;\n    exit = enter = appear = timeout;\n    if (timeout != null && typeof timeout !== \"number\") {\n      exit = timeout.exit;\n      enter = timeout.enter;\n      appear = timeout.appear !== void 0 ? timeout.appear : enter;\n    }\n    return {\n      exit,\n      enter,\n      appear\n    };\n  };\n  _proto.updateStatus = function updateStatus(mounting, nextStatus) {\n    if (mounting === void 0) {\n      mounting = false;\n    }\n    if (nextStatus !== null) {\n      this.cancelNextCallback();\n      if (nextStatus === ENTERING$1) {\n        this.performEnter(mounting);\n      } else {\n        this.performExit();\n      }\n    } else if (this.props.unmountOnExit && this.state.status === EXITED$1) {\n      this.setState({\n        status: UNMOUNTED$1\n      });\n    }\n  };\n  _proto.performEnter = function performEnter(mounting) {\n    var _this2 = this;\n    var enter = this.props.enter;\n    var appearing = this.context ? this.context.isMounting : mounting;\n    var _ref2 = this.props.nodeRef ? [appearing] : [ReactDOM.findDOMNode(this), appearing], maybeNode = _ref2[0], maybeAppearing = _ref2[1];\n    var timeouts = this.getTimeouts();\n    var enterTimeout = appearing ? timeouts.appear : timeouts.enter;\n    if (!mounting && !enter || config$1.disabled) {\n      this.safeSetState({\n        status: ENTERED$1\n      }, function() {\n        _this2.props.onEntered(maybeNode);\n      });\n      return;\n    }\n    this.props.onEnter(maybeNode, maybeAppearing);\n    this.safeSetState({\n      status: ENTERING$1\n    }, function() {\n      _this2.props.onEntering(maybeNode, maybeAppearing);\n      _this2.onTransitionEnd(enterTimeout, function() {\n        _this2.safeSetState({\n          status: ENTERED$1\n        }, function() {\n          _this2.props.onEntered(maybeNode, maybeAppearing);\n        });\n      });\n    });\n  };\n  _proto.performExit = function performExit() {\n    var _this3 = this;\n    var exit = this.props.exit;\n    var timeouts = this.getTimeouts();\n    var maybeNode = this.props.nodeRef ? void 0 : ReactDOM.findDOMNode(this);\n    if (!exit || config$1.disabled) {\n      this.safeSetState({\n        status: EXITED$1\n      }, function() {\n        _this3.props.onExited(maybeNode);\n      });\n      return;\n    }\n    this.props.onExit(maybeNode);\n    this.safeSetState({\n      status: EXITING$1\n    }, function() {\n      _this3.props.onExiting(maybeNode);\n      _this3.onTransitionEnd(timeouts.exit, function() {\n        _this3.safeSetState({\n          status: EXITED$1\n        }, function() {\n          _this3.props.onExited(maybeNode);\n        });\n      });\n    });\n  };\n  _proto.cancelNextCallback = function cancelNextCallback() {\n    if (this.nextCallback !== null) {\n      this.nextCallback.cancel();\n      this.nextCallback = null;\n    }\n  };\n  _proto.safeSetState = function safeSetState(nextState, callback) {\n    callback = this.setNextCallback(callback);\n    this.setState(nextState, callback);\n  };\n  _proto.setNextCallback = function setNextCallback(callback) {\n    var _this4 = this;\n    var active = true;\n    this.nextCallback = function(event) {\n      if (active) {\n        active = false;\n        _this4.nextCallback = null;\n        callback(event);\n      }\n    };\n    this.nextCallback.cancel = function() {\n      active = false;\n    };\n    return this.nextCallback;\n  };\n  _proto.onTransitionEnd = function onTransitionEnd(timeout, handler) {\n    this.setNextCallback(handler);\n    var node = this.props.nodeRef ? this.props.nodeRef.current : ReactDOM.findDOMNode(this);\n    var doesNotHaveTimeoutOrListener = timeout == null && !this.props.addEndListener;\n    if (!node || doesNotHaveTimeoutOrListener) {\n      setTimeout(this.nextCallback, 0);\n      return;\n    }\n    if (this.props.addEndListener) {\n      var _ref3 = this.props.nodeRef ? [this.nextCallback] : [node, this.nextCallback], maybeNode = _ref3[0], maybeNextCallback = _ref3[1];\n      this.props.addEndListener(maybeNode, maybeNextCallback);\n    }\n    if (timeout != null) {\n      setTimeout(this.nextCallback, timeout);\n    }\n  };\n  _proto.render = function render() {\n    var status = this.state.status;\n    if (status === UNMOUNTED$1) {\n      return null;\n    }\n    var _this$props = this.props, children = _this$props.children;\n    _this$props.in;\n    _this$props.mountOnEnter;\n    _this$props.unmountOnExit;\n    _this$props.appear;\n    _this$props.enter;\n    _this$props.exit;\n    _this$props.timeout;\n    _this$props.addEndListener;\n    _this$props.onEnter;\n    _this$props.onEntering;\n    _this$props.onEntered;\n    _this$props.onExit;\n    _this$props.onExiting;\n    _this$props.onExited;\n    _this$props.nodeRef;\n    var childProps = _objectWithoutPropertiesLoose(_this$props, [\"children\", \"in\", \"mountOnEnter\", \"unmountOnExit\", \"appear\", \"enter\", \"exit\", \"timeout\", \"addEndListener\", \"onEnter\", \"onEntering\", \"onEntered\", \"onExit\", \"onExiting\", \"onExited\", \"nodeRef\"]);\n    return /* @__PURE__ */ React.createElement(TransitionGroupContext$1.Provider, {\n      value: null\n    }, typeof children === \"function\" ? children(status, childProps) : React.cloneElement(React.Children.only(children), childProps));\n  };\n  return Transition2;\n}(React.Component);\nTransition$2.contextType = TransitionGroupContext$1;\nTransition$2.propTypes = {};\nfunction noop$1() {\n}\nTransition$2.defaultProps = {\n  in: false,\n  mountOnEnter: false,\n  unmountOnExit: false,\n  appear: false,\n  enter: true,\n  exit: true,\n  onEnter: noop$1,\n  onEntering: noop$1,\n  onEntered: noop$1,\n  onExit: noop$1,\n  onExiting: noop$1,\n  onExited: noop$1\n};\nTransition$2.UNMOUNTED = UNMOUNTED$1;\nTransition$2.EXITED = EXITED$1;\nTransition$2.ENTERING = ENTERING$1;\nTransition$2.ENTERED = ENTERED$1;\nTransition$2.EXITING = EXITING$1;\nvar Transition$3 = Transition$2;\nvar _addClass$1 = function addClass$1(node, classes) {\n  return node && classes && classes.split(\" \").forEach(function(c) {\n    return addClass(node, c);\n  });\n};\nvar removeClass$1 = function removeClass(node, classes) {\n  return node && classes && classes.split(\" \").forEach(function(c) {\n    return removeClass$2(node, c);\n  });\n};\nvar CSSTransition$2 = /* @__PURE__ */ function(_React$Component) {\n  _inheritsLoose(CSSTransition2, _React$Component);\n  function CSSTransition2() {\n    var _this;\n    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {\n      args[_key] = arguments[_key];\n    }\n    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;\n    _this.appliedClasses = {\n      appear: {},\n      enter: {},\n      exit: {}\n    };\n    _this.onEnter = function(maybeNode, maybeAppearing) {\n      var _this$resolveArgument = _this.resolveArguments(maybeNode, maybeAppearing), node = _this$resolveArgument[0], appearing = _this$resolveArgument[1];\n      _this.removeClasses(node, \"exit\");\n      _this.addClass(node, appearing ? \"appear\" : \"enter\", \"base\");\n      if (_this.props.onEnter) {\n        _this.props.onEnter(maybeNode, maybeAppearing);\n      }\n    };\n    _this.onEntering = function(maybeNode, maybeAppearing) {\n      var _this$resolveArgument2 = _this.resolveArguments(maybeNode, maybeAppearing), node = _this$resolveArgument2[0], appearing = _this$resolveArgument2[1];\n      var type = appearing ? \"appear\" : \"enter\";\n      _this.addClass(node, type, \"active\");\n      if (_this.props.onEntering) {\n        _this.props.onEntering(maybeNode, maybeAppearing);\n      }\n    };\n    _this.onEntered = function(maybeNode, maybeAppearing) {\n      var _this$resolveArgument3 = _this.resolveArguments(maybeNode, maybeAppearing), node = _this$resolveArgument3[0], appearing = _this$resolveArgument3[1];\n      var type = appearing ? \"appear\" : \"enter\";\n      _this.removeClasses(node, type);\n      _this.addClass(node, type, \"done\");\n      if (_this.props.onEntered) {\n        _this.props.onEntered(maybeNode, maybeAppearing);\n      }\n    };\n    _this.onExit = function(maybeNode) {\n      var _this$resolveArgument4 = _this.resolveArguments(maybeNode), node = _this$resolveArgument4[0];\n      _this.removeClasses(node, \"appear\");\n      _this.removeClasses(node, \"enter\");\n      _this.addClass(node, \"exit\", \"base\");\n      if (_this.props.onExit) {\n        _this.props.onExit(maybeNode);\n      }\n    };\n    _this.onExiting = function(maybeNode) {\n      var _this$resolveArgument5 = _this.resolveArguments(maybeNode), node = _this$resolveArgument5[0];\n      _this.addClass(node, \"exit\", \"active\");\n      if (_this.props.onExiting) {\n        _this.props.onExiting(maybeNode);\n      }\n    };\n    _this.onExited = function(maybeNode) {\n      var _this$resolveArgument6 = _this.resolveArguments(maybeNode), node = _this$resolveArgument6[0];\n      _this.removeClasses(node, \"exit\");\n      _this.addClass(node, \"exit\", \"done\");\n      if (_this.props.onExited) {\n        _this.props.onExited(maybeNode);\n      }\n    };\n    _this.resolveArguments = function(maybeNode, maybeAppearing) {\n      return _this.props.nodeRef ? [_this.props.nodeRef.current, maybeNode] : [maybeNode, maybeAppearing];\n    };\n    _this.getClassNames = function(type) {\n      var classNames = _this.props.classNames;\n      var isStringClassNames = typeof classNames === \"string\";\n      var prefix = isStringClassNames && classNames ? classNames + \"-\" : \"\";\n      var baseClassName = isStringClassNames ? \"\" + prefix + type : classNames[type];\n      var activeClassName = isStringClassNames ? baseClassName + \"-active\" : classNames[type + \"Active\"];\n      var doneClassName = isStringClassNames ? baseClassName + \"-done\" : classNames[type + \"Done\"];\n      return {\n        baseClassName,\n        activeClassName,\n        doneClassName\n      };\n    };\n    return _this;\n  }\n  var _proto = CSSTransition2.prototype;\n  _proto.addClass = function addClass2(node, type, phase) {\n    var className = this.getClassNames(type)[phase + \"ClassName\"];\n    var _this$getClassNames = this.getClassNames(\"enter\"), doneClassName = _this$getClassNames.doneClassName;\n    if (type === \"appear\" && phase === \"done\" && doneClassName) {\n      className += \" \" + doneClassName;\n    }\n    if (phase === \"active\") {\n      node && node.scrollTop;\n    }\n    if (className) {\n      this.appliedClasses[type][phase] = className;\n      _addClass$1(node, className);\n    }\n  };\n  _proto.removeClasses = function removeClasses(node, type) {\n    var _this$appliedClasses$ = this.appliedClasses[type], baseClassName = _this$appliedClasses$.base, activeClassName = _this$appliedClasses$.active, doneClassName = _this$appliedClasses$.done;\n    this.appliedClasses[type] = {};\n    if (baseClassName) {\n      removeClass$1(node, baseClassName);\n    }\n    if (activeClassName) {\n      removeClass$1(node, activeClassName);\n    }\n    if (doneClassName) {\n      removeClass$1(node, doneClassName);\n    }\n  };\n  _proto.render = function render() {\n    var _this$props = this.props;\n    _this$props.classNames;\n    var props = _objectWithoutPropertiesLoose(_this$props, [\"classNames\"]);\n    return /* @__PURE__ */ React.createElement(Transition$3, _extends({}, props, {\n      onEnter: this.onEnter,\n      onEntered: this.onEntered,\n      onEntering: this.onEntering,\n      onExit: this.onExit,\n      onExiting: this.onExiting,\n      onExited: this.onExited\n    }));\n  };\n  return CSSTransition2;\n}(React.Component);\nCSSTransition$2.defaultProps = {\n  classNames: \"\"\n};\nCSSTransition$2.propTypes = {};\nvar CSSTransition$3 = CSSTransition$2;\nfunction _assertThisInitialized(self2) {\n  if (self2 === void 0) {\n    throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\");\n  }\n  return self2;\n}\nfunction getChildMapping(children, mapFn) {\n  var mapper = function mapper2(child) {\n    return mapFn && react.exports.isValidElement(child) ? mapFn(child) : child;\n  };\n  var result = Object.create(null);\n  if (children)\n    react.exports.Children.map(children, function(c) {\n      return c;\n    }).forEach(function(child) {\n      result[child.key] = mapper(child);\n    });\n  return result;\n}\nfunction mergeChildMappings(prev, next) {\n  prev = prev || {};\n  next = next || {};\n  function getValueForKey(key) {\n    return key in next ? next[key] : prev[key];\n  }\n  var nextKeysPending = Object.create(null);\n  var pendingKeys = [];\n  for (var prevKey in prev) {\n    if (prevKey in next) {\n      if (pendingKeys.length) {\n        nextKeysPending[prevKey] = pendingKeys;\n        pendingKeys = [];\n      }\n    } else {\n      pendingKeys.push(prevKey);\n    }\n  }\n  var i;\n  var childMapping = {};\n  for (var nextKey in next) {\n    if (nextKeysPending[nextKey]) {\n      for (i = 0; i < nextKeysPending[nextKey].length; i++) {\n        var pendingNextKey = nextKeysPending[nextKey][i];\n        childMapping[nextKeysPending[nextKey][i]] = getValueForKey(pendingNextKey);\n      }\n    }\n    childMapping[nextKey] = getValueForKey(nextKey);\n  }\n  for (i = 0; i < pendingKeys.length; i++) {\n    childMapping[pendingKeys[i]] = getValueForKey(pendingKeys[i]);\n  }\n  return childMapping;\n}\nfunction getProp(child, prop, props) {\n  return props[prop] != null ? props[prop] : child.props[prop];\n}\nfunction getInitialChildMapping(props, onExited) {\n  return getChildMapping(props.children, function(child) {\n    return react.exports.cloneElement(child, {\n      onExited: onExited.bind(null, child),\n      in: true,\n      appear: getProp(child, \"appear\", props),\n      enter: getProp(child, \"enter\", props),\n      exit: getProp(child, \"exit\", props)\n    });\n  });\n}\nfunction getNextChildMapping(nextProps, prevChildMapping, onExited) {\n  var nextChildMapping = getChildMapping(nextProps.children);\n  var children = mergeChildMappings(prevChildMapping, nextChildMapping);\n  Object.keys(children).forEach(function(key) {\n    var child = children[key];\n    if (!react.exports.isValidElement(child))\n      return;\n    var hasPrev = key in prevChildMapping;\n    var hasNext = key in nextChildMapping;\n    var prevChild = prevChildMapping[key];\n    var isLeaving = react.exports.isValidElement(prevChild) && !prevChild.props.in;\n    if (hasNext && (!hasPrev || isLeaving)) {\n      children[key] = react.exports.cloneElement(child, {\n        onExited: onExited.bind(null, child),\n        in: true,\n        exit: getProp(child, \"exit\", nextProps),\n        enter: getProp(child, \"enter\", nextProps)\n      });\n    } else if (!hasNext && hasPrev && !isLeaving) {\n      children[key] = react.exports.cloneElement(child, {\n        in: false\n      });\n    } else if (hasNext && hasPrev && react.exports.isValidElement(prevChild)) {\n      children[key] = react.exports.cloneElement(child, {\n        onExited: onExited.bind(null, child),\n        in: prevChild.props.in,\n        exit: getProp(child, \"exit\", nextProps),\n        enter: getProp(child, \"enter\", nextProps)\n      });\n    }\n  });\n  return children;\n}\nvar values = Object.values || function(obj) {\n  return Object.keys(obj).map(function(k) {\n    return obj[k];\n  });\n};\nvar defaultProps$k = {\n  component: \"div\",\n  childFactory: function childFactory(child) {\n    return child;\n  }\n};\nvar TransitionGroup = /* @__PURE__ */ function(_React$Component) {\n  _inheritsLoose(TransitionGroup2, _React$Component);\n  function TransitionGroup2(props, context) {\n    var _this;\n    _this = _React$Component.call(this, props, context) || this;\n    var handleExited = _this.handleExited.bind(_assertThisInitialized(_this));\n    _this.state = {\n      contextValue: {\n        isMounting: true\n      },\n      handleExited,\n      firstRender: true\n    };\n    return _this;\n  }\n  var _proto = TransitionGroup2.prototype;\n  _proto.componentDidMount = function componentDidMount() {\n    this.mounted = true;\n    this.setState({\n      contextValue: {\n        isMounting: false\n      }\n    });\n  };\n  _proto.componentWillUnmount = function componentWillUnmount() {\n    this.mounted = false;\n  };\n  TransitionGroup2.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, _ref2) {\n    var prevChildMapping = _ref2.children, handleExited = _ref2.handleExited, firstRender = _ref2.firstRender;\n    return {\n      children: firstRender ? getInitialChildMapping(nextProps, handleExited) : getNextChildMapping(nextProps, prevChildMapping, handleExited),\n      firstRender: false\n    };\n  };\n  _proto.handleExited = function handleExited(child, node) {\n    var currentChildMapping = getChildMapping(this.props.children);\n    if (child.key in currentChildMapping)\n      return;\n    if (child.props.onExited) {\n      child.props.onExited(node);\n    }\n    if (this.mounted) {\n      this.setState(function(state) {\n        var children = _extends({}, state.children);\n        delete children[child.key];\n        return {\n          children\n        };\n      });\n    }\n  };\n  _proto.render = function render() {\n    var _this$props = this.props, Component = _this$props.component, childFactory2 = _this$props.childFactory, props = _objectWithoutPropertiesLoose(_this$props, [\"component\", \"childFactory\"]);\n    var contextValue = this.state.contextValue;\n    var children = values(this.state.children).map(childFactory2);\n    delete props.appear;\n    delete props.enter;\n    delete props.exit;\n    if (Component === null) {\n      return /* @__PURE__ */ React.createElement(TransitionGroupContext$1.Provider, {\n        value: contextValue\n      }, children);\n    }\n    return /* @__PURE__ */ React.createElement(TransitionGroupContext$1.Provider, {\n      value: contextValue\n    }, /* @__PURE__ */ React.createElement(Component, props, children));\n  };\n  return TransitionGroup2;\n}(React.Component);\nTransitionGroup.propTypes = {};\nTransitionGroup.defaultProps = defaultProps$k;\nvar TransitionGroup$1 = TransitionGroup;\nfunction _defineProperty(obj, key, value) {\n  if (key in obj) {\n    Object.defineProperty(obj, key, {\n      value,\n      enumerable: true,\n      configurable: true,\n      writable: true\n    });\n  } else {\n    obj[key] = value;\n  }\n  return obj;\n}\nvar IconContext = react.exports.createContext({\n  prefixCls: \"arco\"\n});\nfunction ownKeys$v(object, enumerableOnly) {\n  var keys = Object.keys(object);\n  if (Object.getOwnPropertySymbols) {\n    var symbols = Object.getOwnPropertySymbols(object);\n    if (enumerableOnly) {\n      symbols = symbols.filter(function(sym) {\n        return Object.getOwnPropertyDescriptor(object, sym).enumerable;\n      });\n    }\n    keys.push.apply(keys, symbols);\n  }\n  return keys;\n}\nfunction _objectSpread$v(target2) {\n  for (var i = 1; i < arguments.length; i++) {\n    var source2 = arguments[i] != null ? arguments[i] : {};\n    if (i % 2) {\n      ownKeys$v(Object(source2), true).forEach(function(key) {\n        _defineProperty(target2, key, source2[key]);\n      });\n    } else if (Object.getOwnPropertyDescriptors) {\n      Object.defineProperties(target2, Object.getOwnPropertyDescriptors(source2));\n    } else {\n      ownKeys$v(Object(source2)).forEach(function(key) {\n        Object.defineProperty(target2, key, Object.getOwnPropertyDescriptor(source2, key));\n      });\n    }\n  }\n  return target2;\n}\nfunction IconCheckCircleFillComponent(iconProps, ref) {\n  var _useContext = react.exports.useContext(IconContext), prefixCls2 = _useContext.prefixCls;\n  var spin = iconProps.spin, className = iconProps.className;\n  var props = _objectSpread$v(_objectSpread$v({\n    ref\n  }, iconProps), {}, {\n    className: \"\".concat(className ? className + \" \" : \"\").concat(prefixCls2, \"-icon \").concat(prefixCls2, \"-icon-check-circle-fill\")\n  });\n  if (spin) {\n    props.className = \"\".concat(props.className, \" \").concat(prefixCls2, \"-icon-loading\");\n  }\n  delete props.spin;\n  delete props.isIcon;\n  return /* @__PURE__ */ React.createElement(\"svg\", _extends({\n    fill: \"none\",\n    stroke: \"currentColor\",\n    strokeWidth: \"4\",\n    viewBox: \"0 0 48 48\",\n    width: \"1em\",\n    height: \"1em\"\n  }, props), /* @__PURE__ */ React.createElement(\"path\", {\n    fill: \"currentColor\",\n    fillRule: \"evenodd\",\n    stroke: \"none\",\n    d: \"M24 44c11.046 0 20-8.954 20-20S35.046 4 24 4 4 12.954 4 24s8.954 20 20 20Zm10.207-24.379a1 1 0 0 0 0-1.414l-1.414-1.414a1 1 0 0 0-1.414 0L22 26.172l-4.878-4.88a1 1 0 0 0-1.415 0l-1.414 1.415a1 1 0 0 0 0 1.414l7 7a1 1 0 0 0 1.414 0l11.5-11.5Z\",\n    clipRule: \"evenodd\"\n  }));\n}\nvar IconCheckCircleFill = /* @__PURE__ */ React.forwardRef(IconCheckCircleFillComponent);\nIconCheckCircleFill.defaultProps = {\n  isIcon: true\n};\nIconCheckCircleFill.displayName = \"IconCheckCircleFill\";\nvar IconCheckCircleFill$1 = IconCheckCircleFill;\nfunction ownKeys$u(object, enumerableOnly) {\n  var keys = Object.keys(object);\n  if (Object.getOwnPropertySymbols) {\n    var symbols = Object.getOwnPropertySymbols(object);\n    if (enumerableOnly) {\n      symbols = symbols.filter(function(sym) {\n        return Object.getOwnPropertyDescriptor(object, sym).enumerable;\n      });\n    }\n    keys.push.apply(keys, symbols);\n  }\n  return keys;\n}\nfunction _objectSpread$u(target2) {\n  for (var i = 1; i < arguments.length; i++) {\n    var source2 = arguments[i] != null ? arguments[i] : {};\n    if (i % 2) {\n      ownKeys$u(Object(source2), true).forEach(function(key) {\n        _defineProperty(target2, key, source2[key]);\n      });\n    } else if (Object.getOwnPropertyDescriptors) {\n      Object.defineProperties(target2, Object.getOwnPropertyDescriptors(source2));\n    } else {\n      ownKeys$u(Object(source2)).forEach(function(key) {\n        Object.defineProperty(target2, key, Object.getOwnPropertyDescriptor(source2, key));\n      });\n    }\n  }\n  return target2;\n}\nfunction IconCloseCircleFillComponent(iconProps, ref) {\n  var _useContext = react.exports.useContext(IconContext), prefixCls2 = _useContext.prefixCls;\n  var spin = iconProps.spin, className = iconProps.className;\n  var props = _objectSpread$u(_objectSpread$u({\n    ref\n  }, iconProps), {}, {\n    className: \"\".concat(className ? className + \" \" : \"\").concat(prefixCls2, \"-icon \").concat(prefixCls2, \"-icon-close-circle-fill\")\n  });\n  if (spin) {\n    props.className = \"\".concat(props.className, \" \").concat(prefixCls2, \"-icon-loading\");\n  }\n  delete props.spin;\n  delete props.isIcon;\n  return /* @__PURE__ */ React.createElement(\"svg\", _extends({\n    fill: \"none\",\n    stroke: \"currentColor\",\n    strokeWidth: \"4\",\n    viewBox: \"0 0 48 48\",\n    width: \"1em\",\n    height: \"1em\"\n  }, props), /* @__PURE__ */ React.createElement(\"path\", {\n    fill: \"currentColor\",\n    fillRule: \"evenodd\",\n    stroke: \"none\",\n    d: \"M24 44c11.046 0 20-8.954 20-20S35.046 4 24 4 4 12.954 4 24s8.954 20 20 20Zm4.955-27.771-4.95 4.95-4.95-4.95a1 1 0 0 0-1.414 0l-1.414 1.414a1 1 0 0 0 0 1.414l4.95 4.95-4.95 4.95a1 1 0 0 0 0 1.414l1.414 1.414a1 1 0 0 0 1.414 0l4.95-4.95 4.95 4.95a1 1 0 0 0 1.414 0l1.414-1.414a1 1 0 0 0 0-1.414l-4.95-4.95 4.95-4.95a1 1 0 0 0 0-1.414l-1.414-1.414a1 1 0 0 0-1.414 0Z\",\n    clipRule: \"evenodd\"\n  }));\n}\nvar IconCloseCircleFill = /* @__PURE__ */ React.forwardRef(IconCloseCircleFillComponent);\nIconCloseCircleFill.defaultProps = {\n  isIcon: true\n};\nIconCloseCircleFill.displayName = \"IconCloseCircleFill\";\nvar IconCloseCircleFill$1 = IconCloseCircleFill;\nfunction ownKeys$t(object, enumerableOnly) {\n  var keys = Object.keys(object);\n  if (Object.getOwnPropertySymbols) {\n    var symbols = Object.getOwnPropertySymbols(object);\n    if (enumerableOnly) {\n      symbols = symbols.filter(function(sym) {\n        return Object.getOwnPropertyDescriptor(object, sym).enumerable;\n      });\n    }\n    keys.push.apply(keys, symbols);\n  }\n  return keys;\n}\nfunction _objectSpread$t(target2) {\n  for (var i = 1; i < arguments.length; i++) {\n    var source2 = arguments[i] != null ? arguments[i] : {};\n    if (i % 2) {\n      ownKeys$t(Object(source2), true).forEach(function(key) {\n        _defineProperty(target2, key, source2[key]);\n      });\n    } else if (Object.getOwnPropertyDescriptors) {\n      Object.defineProperties(target2, Object.getOwnPropertyDescriptors(source2));\n    } else {\n      ownKeys$t(Object(source2)).forEach(function(key) {\n        Object.defineProperty(target2, key, Object.getOwnPropertyDescriptor(source2, key));\n      });\n    }\n  }\n  return target2;\n}\nfunction IconInfoCircleFillComponent(iconProps, ref) {\n  var _useContext = react.exports.useContext(IconContext), prefixCls2 = _useContext.prefixCls;\n  var spin = iconProps.spin, className = iconProps.className;\n  var props = _objectSpread$t(_objectSpread$t({\n    ref\n  }, iconProps), {}, {\n    className: \"\".concat(className ? className + \" \" : \"\").concat(prefixCls2, \"-icon \").concat(prefixCls2, \"-icon-info-circle-fill\")\n  });\n  if (spin) {\n    props.className = \"\".concat(props.className, \" \").concat(prefixCls2, \"-icon-loading\");\n  }\n  delete props.spin;\n  delete props.isIcon;\n  return /* @__PURE__ */ React.createElement(\"svg\", _extends({\n    fill: \"none\",\n    stroke: \"currentColor\",\n    strokeWidth: \"4\",\n    viewBox: \"0 0 48 48\",\n    width: \"1em\",\n    height: \"1em\"\n  }, props), /* @__PURE__ */ React.createElement(\"path\", {\n    fill: \"currentColor\",\n    fillRule: \"evenodd\",\n    stroke: \"none\",\n    d: \"M24 44c11.046 0 20-8.954 20-20S35.046 4 24 4 4 12.954 4 24s8.954 20 20 20Zm2-30a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-2Zm0 17h1a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-6a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1h1v-8a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1v11Z\",\n    clipRule: \"evenodd\"\n  }));\n}\nvar IconInfoCircleFill = /* @__PURE__ */ React.forwardRef(IconInfoCircleFillComponent);\nIconInfoCircleFill.defaultProps = {\n  isIcon: true\n};\nIconInfoCircleFill.displayName = \"IconInfoCircleFill\";\nvar IconInfoCircleFill$1 = IconInfoCircleFill;\nfunction ownKeys$s(object, enumerableOnly) {\n  var keys = Object.keys(object);\n  if (Object.getOwnPropertySymbols) {\n    var symbols = Object.getOwnPropertySymbols(object);\n    if (enumerableOnly) {\n      symbols = symbols.filter(function(sym) {\n        return Object.getOwnPropertyDescriptor(object, sym).enumerable;\n      });\n    }\n    keys.push.apply(keys, symbols);\n  }\n  return keys;\n}\nfunction _objectSpread$s(target2) {\n  for (var i = 1; i < arguments.length; i++) {\n    var source2 = arguments[i] != null ? arguments[i] : {};\n    if (i % 2) {\n      ownKeys$s(Object(source2), true).forEach(function(key) {\n        _defineProperty(target2, key, source2[key]);\n      });\n    } else if (Object.getOwnPropertyDescriptors) {\n      Object.defineProperties(target2, Object.getOwnPropertyDescriptors(source2));\n    } else {\n      ownKeys$s(Object(source2)).forEach(function(key) {\n        Object.defineProperty(target2, key, Object.getOwnPropertyDescriptor(source2, key));\n      });\n    }\n  }\n  return target2;\n}\nfunction IconExclamationCircleFillComponent(iconProps, ref) {\n  var _useContext = react.exports.useContext(IconContext), prefixCls2 = _useContext.prefixCls;\n  var spin = iconProps.spin, className = iconProps.className;\n  var props = _objectSpread$s(_objectSpread$s({\n    ref\n  }, iconProps), {}, {\n    className: \"\".concat(className ? className + \" \" : \"\").concat(prefixCls2, \"-icon \").concat(prefixCls2, \"-icon-exclamation-circle-fill\")\n  });\n  if (spin) {\n    props.className = \"\".concat(props.className, \" \").concat(prefixCls2, \"-icon-loading\");\n  }\n  delete props.spin;\n  delete props.isIcon;\n  return /* @__PURE__ */ React.createElement(\"svg\", _extends({\n    fill: \"none\",\n    stroke: \"currentColor\",\n    strokeWidth: \"4\",\n    viewBox: \"0 0 48 48\",\n    width: \"1em\",\n    height: \"1em\"\n  }, props), /* @__PURE__ */ React.createElement(\"path\", {\n    fill: \"currentColor\",\n    fillRule: \"evenodd\",\n    stroke: \"none\",\n    d: \"M24 44c11.046 0 20-8.954 20-20S35.046 4 24 4 4 12.954 4 24s8.954 20 20 20Zm-2-11a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1v2Zm4-18a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V15Z\",\n    clipRule: \"evenodd\"\n  }));\n}\nvar IconExclamationCircleFill = /* @__PURE__ */ React.forwardRef(IconExclamationCircleFillComponent);\nIconExclamationCircleFill.defaultProps = {\n  isIcon: true\n};\nIconExclamationCircleFill.displayName = \"IconExclamationCircleFill\";\nvar IconExclamationCircleFill$1 = IconExclamationCircleFill;\nfunction ownKeys$r(object, enumerableOnly) {\n  var keys = Object.keys(object);\n  if (Object.getOwnPropertySymbols) {\n    var symbols = Object.getOwnPropertySymbols(object);\n    if (enumerableOnly) {\n      symbols = symbols.filter(function(sym) {\n        return Object.getOwnPropertyDescriptor(object, sym).enumerable;\n      });\n    }\n    keys.push.apply(keys, symbols);\n  }\n  return keys;\n}\nfunction _objectSpread$r(target2) {\n  for (var i = 1; i < arguments.length; i++) {\n    var source2 = arguments[i] != null ? arguments[i] : {};\n    if (i % 2) {\n      ownKeys$r(Object(source2), true).forEach(function(key) {\n        _defineProperty(target2, key, source2[key]);\n      });\n    } else if (Object.getOwnPropertyDescriptors) {\n      Object.defineProperties(target2, Object.getOwnPropertyDescriptors(source2));\n    } else {\n      ownKeys$r(Object(source2)).forEach(function(key) {\n        Object.defineProperty(target2, key, Object.getOwnPropertyDescriptor(source2, key));\n      });\n    }\n  }\n  return target2;\n}\nfunction IconCloseComponent(iconProps, ref) {\n  var _useContext = react.exports.useContext(IconContext), prefixCls2 = _useContext.prefixCls;\n  var spin = iconProps.spin, className = iconProps.className;\n  var props = _objectSpread$r(_objectSpread$r({\n    ref\n  }, iconProps), {}, {\n    className: \"\".concat(className ? className + \" \" : \"\").concat(prefixCls2, \"-icon \").concat(prefixCls2, \"-icon-close\")\n  });\n  if (spin) {\n    props.className = \"\".concat(props.className, \" \").concat(prefixCls2, \"-icon-loading\");\n  }\n  delete props.spin;\n  delete props.isIcon;\n  return /* @__PURE__ */ React.createElement(\"svg\", _extends({\n    fill: \"none\",\n    stroke: \"currentColor\",\n    strokeWidth: \"4\",\n    viewBox: \"0 0 48 48\",\n    width: \"1em\",\n    height: \"1em\"\n  }, props), /* @__PURE__ */ React.createElement(\"path\", {\n    d: \"M9.857 9.858 24 24m0 0 14.142 14.142M24 24 38.142 9.858M24 24 9.857 38.142\"\n  }));\n}\nvar IconClose = /* @__PURE__ */ React.forwardRef(IconCloseComponent);\nIconClose.defaultProps = {\n  isIcon: true\n};\nIconClose.displayName = \"IconClose\";\nvar IconClose$1 = IconClose;\nvar opt = Object.prototype.toString;\nfunction isArray$5(obj) {\n  return opt.call(obj) === \"[object Array]\";\n}\nfunction isObject$6(obj) {\n  return opt.call(obj) === \"[object Object]\";\n}\nfunction isString$1(obj) {\n  return opt.call(obj) === \"[object String]\";\n}\nfunction isNumber$1(obj) {\n  return opt.call(obj) === \"[object Number]\" && obj === obj;\n}\nfunction isUndefined$1(obj) {\n  return obj === void 0;\n}\nfunction isFunction$3(obj) {\n  return typeof obj === \"function\";\n}\nvar __read$R = globalThis && globalThis.__read || function(o, n2) {\n  var m2 = typeof Symbol === \"function\" && o[Symbol.iterator];\n  if (!m2)\n    return o;\n  var i = m2.call(o), r2, ar = [], e;\n  try {\n    while ((n2 === void 0 || n2-- > 0) && !(r2 = i.next()).done)\n      ar.push(r2.value);\n  } catch (error) {\n    e = { error };\n  } finally {\n    try {\n      if (r2 && !r2.done && (m2 = i[\"return\"]))\n        m2.call(i);\n    } finally {\n      if (e)\n        throw e.error;\n    }\n  }\n  return ar;\n};\nvar __spreadArray$d = globalThis && globalThis.__spreadArray || function(to, from, pack) {\n  if (pack || arguments.length === 2)\n    for (var i = 0, l2 = from.length, ar; i < l2; i++) {\n      if (ar || !(i in from)) {\n        if (!ar)\n          ar = Array.prototype.slice.call(from, 0, i);\n        ar[i] = from[i];\n      }\n    }\n  return to.concat(ar || Array.prototype.slice.call(from));\n};\nfunction cs$1() {\n  var args = [];\n  for (var _i = 0; _i < arguments.length; _i++) {\n    args[_i] = arguments[_i];\n  }\n  var length = args.length;\n  var classNames = [];\n  var _loop_1 = function(i2) {\n    var v2 = args[i2];\n    if (!v2) {\n      return \"continue\";\n    }\n    if (isString$1(v2)) {\n      classNames.push(v2);\n    } else if (isArray$5(v2)) {\n      classNames = classNames.concat(v2);\n    } else if (isObject$6(v2)) {\n      Object.keys(v2).forEach(function(k) {\n        if (v2[k]) {\n          classNames.push(k);\n        }\n      });\n    } else\n      ;\n  };\n  for (var i = 0; i < length; i++) {\n    _loop_1(i);\n  }\n  return __spreadArray$d([], __read$R(new Set(classNames)), false).join(\" \");\n}\nvar Calendar = {\n  formatYear: \"YYYY \\u5E74\",\n  formatMonth: \"YYYY \\u5E74 MM \\u6708\",\n  today: \"\\u4ECA\\u5929\",\n  view: {\n    month: \"\\u6708\",\n    year: \"\\u5E74\",\n    week: \"\\u5468\",\n    day: \"\\u65E5\"\n  },\n  month: {\n    long: {\n      January: \"\\u4E00\\u6708\",\n      February: \"\\u4E8C\\u6708\",\n      March: \"\\u4E09\\u6708\",\n      April: \"\\u56DB\\u6708\",\n      May: \"\\u4E94\\u6708\",\n      June: \"\\u516D\\u6708\",\n      July: \"\\u4E03\\u6708\",\n      August: \"\\u516B\\u6708\",\n      September: \"\\u4E5D\\u6708\",\n      October: \"\\u5341\\u6708\",\n      November: \"\\u5341\\u4E00\\u6708\",\n      December: \"\\u5341\\u4E8C\\u6708\"\n    },\n    short: {\n      January: \"\\u4E00\\u6708\",\n      February: \"\\u4E8C\\u6708\",\n      March: \"\\u4E09\\u6708\",\n      April: \"\\u56DB\\u6708\",\n      May: \"\\u4E94\\u6708\",\n      June: \"\\u516D\\u6708\",\n      July: \"\\u4E03\\u6708\",\n      August: \"\\u516B\\u6708\",\n      September: \"\\u4E5D\\u6708\",\n      October: \"\\u5341\\u6708\",\n      November: \"\\u5341\\u4E00\\u6708\",\n      December: \"\\u5341\\u4E8C\\u6708\"\n    }\n  },\n  week: {\n    long: {\n      self: \"\\u5468\",\n      monday: \"\\u5468\\u4E00\",\n      tuesday: \"\\u5468\\u4E8C\",\n      wednesday: \"\\u5468\\u4E09\",\n      thursday: \"\\u5468\\u56DB\",\n      friday: \"\\u5468\\u4E94\",\n      saturday: \"\\u5468\\u516D\",\n      sunday: \"\\u5468\\u65E5\"\n    },\n    short: {\n      self: \"\\u5468\",\n      monday: \"\\u4E00\",\n      tuesday: \"\\u4E8C\",\n      wednesday: \"\\u4E09\",\n      thursday: \"\\u56DB\",\n      friday: \"\\u4E94\",\n      saturday: \"\\u516D\",\n      sunday: \"\\u65E5\"\n    }\n  }\n};\nvar zhCN = {\n  locale: \"zh-CN\",\n  Calendar,\n  DatePicker: {\n    Calendar,\n    placeholder: {\n      date: \"\\u8BF7\\u9009\\u62E9\\u65E5\\u671F\",\n      week: \"\\u8BF7\\u9009\\u62E9\\u5468\",\n      month: \"\\u8BF7\\u9009\\u62E9\\u6708\\u4EFD\",\n      year: \"\\u8BF7\\u9009\\u62E9\\u5E74\\u4EFD\",\n      quarter: \"\\u8BF7\\u9009\\u62E9\\u5B63\\u5EA6\"\n    },\n    placeholders: {\n      date: [\"\\u5F00\\u59CB\\u65E5\\u671F\", \"\\u7ED3\\u675F\\u65E5\\u671F\"],\n      week: [\"\\u5F00\\u59CB\\u5468\", \"\\u7ED3\\u675F\\u5468\"],\n      month: [\"\\u5F00\\u59CB\\u6708\\u4EFD\", \"\\u7ED3\\u675F\\u6708\\u4EFD\"],\n      year: [\"\\u5F00\\u59CB\\u5E74\\u4EFD\", \"\\u7ED3\\u675F\\u5E74\\u4EFD\"],\n      quarter: [\"\\u5F00\\u59CB\\u5B63\\u5EA6\", \"\\u7ED3\\u675F\\u5B63\\u5EA6\"]\n    },\n    selectTime: \"\\u9009\\u62E9\\u65F6\\u95F4\",\n    selectDate: \"\\u9009\\u62E9\\u65E5\\u671F\",\n    today: \"\\u4ECA\\u5929\",\n    now: \"\\u6B64\\u523B\",\n    ok: \"\\u786E\\u5B9A\"\n  },\n  Drawer: {\n    okText: \"\\u786E\\u5B9A\",\n    cancelText: \"\\u53D6\\u6D88\"\n  },\n  Empty: {\n    noData: \"\\u6682\\u65E0\\u6570\\u636E\"\n  },\n  Modal: {\n    okText: \"\\u786E\\u5B9A\",\n    cancelText: \"\\u53D6\\u6D88\"\n  },\n  Pagination: {\n    goto: \"\\u524D\\u5F80\",\n    page: \"\\u9875\",\n    countPerPage: \"\\u6761/\\u9875\",\n    total: \"\\u5171 {0} \\u6761\"\n  },\n  Popconfirm: {\n    okText: \"\\u786E\\u5B9A\",\n    cancelText: \"\\u53D6\\u6D88\"\n  },\n  Table: {\n    okText: \"\\u786E\\u5B9A\",\n    resetText: \"\\u91CD\\u7F6E\",\n    sortAscend: \"\\u70B9\\u51FB\\u5347\\u5E8F\",\n    sortDescend: \"\\u70B9\\u51FB\\u964D\\u5E8F\",\n    cancelSort: \"\\u53D6\\u6D88\\u6392\\u5E8F\"\n  },\n  TimePicker: {\n    ok: \"\\u786E\\u5B9A\",\n    placeholder: \"\\u8BF7\\u9009\\u62E9\\u65F6\\u95F4\",\n    placeholders: [\"\\u5F00\\u59CB\\u65F6\\u95F4\", \"\\u7ED3\\u675F\\u65F6\\u95F4\"],\n    now: \"\\u6B64\\u523B\"\n  },\n  Progress: {\n    success: \"\\u5B8C\\u6210\",\n    error: \"\\u5931\\u8D25\"\n  },\n  Upload: {\n    start: \"\\u5F00\\u59CB\",\n    cancel: \"\\u53D6\\u6D88\",\n    delete: \"\\u5220\\u9664\",\n    reupload: \"\\u70B9\\u51FB\\u91CD\\u8BD5\",\n    upload: \"\\u70B9\\u51FB\\u4E0A\\u4F20\",\n    preview: \"\\u9884\\u89C8\",\n    drag: \"\\u70B9\\u51FB\\u6216\\u62D6\\u62FD\\u6587\\u4EF6\\u5230\\u6B64\\u5904\\u4E0A\\u4F20\",\n    dragHover: \"\\u91CA\\u653E\\u6587\\u4EF6\\u5E76\\u5F00\\u59CB\\u4E0A\\u4F20\",\n    error: \"\\u4E0A\\u4F20\\u5931\\u8D25\"\n  },\n  Typography: {\n    copy: \"\\u590D\\u5236\",\n    copied: \"\\u5DF2\\u590D\\u5236\",\n    edit: \"\\u7F16\\u8F91\",\n    fold: \"\\u6298\\u53E0\",\n    unfold: \"\\u5C55\\u5F00\"\n  },\n  Transfer: {\n    resetText: \"\\u91CD\\u7F6E\"\n  },\n  ImagePreview: {\n    fullScreen: \"\\u5168\\u5C4F\",\n    rotateRight: \"\\u5411\\u53F3\\u65CB\\u8F6C\",\n    rotateLeft: \"\\u5411\\u5DE6\\u65CB\\u8F6C\",\n    zoomIn: \"\\u653E\\u5927\",\n    zoomOut: \"\\u7F29\\u5C0F\",\n    originalSize: \"\\u539F\\u59CB\\u5C3A\\u5BF8\"\n  }\n};\nfunction hexToRgb(hex) {\n  var rgb = [];\n  var _hex = hex.substr(1);\n  if (hex.length === 3) {\n    _hex = hex.replace(/(.)/g, \"$1$1\");\n  }\n  _hex.replace(/../g, function(color) {\n    rgb.push(parseInt(color, 16));\n  });\n  return {\n    r: rgb[0],\n    g: rgb[1],\n    b: rgb[2],\n    rgb: \"rgb(\" + rgb.join(\",\") + \")\"\n  };\n}\nfunction getRgb(color) {\n  var rgb = hexToRgb(color);\n  return { r: rgb.r, g: rgb.g, b: rgb.b };\n}\nfunction getHsl(color) {\n  var rgb = getRgb(color);\n  var hsl = rgbToHsl(rgb.r, rgb.g, rgb.b);\n  return { h: hsl.h, s: hsl.s, l: hsl.l };\n}\nfunction rgbToHsl(r2, g, b) {\n  var _r = r2 / 255;\n  var _g = g / 255;\n  var _b = b / 255;\n  var max = Math.max(_r, _g, _b);\n  var min = Math.min(_r, _g, _b);\n  var l2 = (max + min) / 2;\n  var h;\n  var s;\n  if (max === min) {\n    h = 0;\n    s = 0;\n  } else {\n    var d = max - min;\n    s = l2 > 0.5 ? d / (2 - max - min) : d / (max + min);\n    switch (max) {\n      case _r:\n        h = (_g - _b) / d + (_g < _b ? 6 : 0);\n        break;\n      case _g:\n        h = (_b - _r) / d + 2;\n        break;\n      case _b:\n        h = (_r - _g) / d + 4;\n        break;\n    }\n    h /= 6;\n  }\n  return {\n    h,\n    s,\n    l: l2,\n    hsl: \"hsl(\" + h * 360 + \", \" + s * 100 + \"%, \" + l2 * 100 + \"%)\"\n  };\n}\nfunction lighten(color, percent) {\n  var hsl = getHsl(color);\n  var h = +hsl.h;\n  var s = +hsl.s;\n  var l2 = +hsl.l * 100 + +percent;\n  var res = hsltorgb([h * 360, s * 100, l2]);\n  return res.join(\",\");\n}\nfunction hsltorgb(hsl) {\n  var h = hsl[0] / 360;\n  var s = hsl[1] / 100;\n  var l2 = hsl[2] / 100;\n  var t2;\n  var t3;\n  var val;\n  if (s === 0) {\n    val = l2 * 255;\n    return [val, val, val];\n  }\n  if (l2 < 0.5) {\n    t2 = l2 * (1 + s);\n  } else {\n    t2 = l2 + s - l2 * s;\n  }\n  var t1 = 2 * l2 - t2;\n  var rgb = [0, 0, 0];\n  for (var i = 0; i < 3; i++) {\n    t3 = h + 1 / 3 * -(i - 1);\n    if (t3 < 0) {\n      t3++;\n    }\n    if (t3 > 1) {\n      t3--;\n    }\n    if (6 * t3 < 1) {\n      val = t1 + (t2 - t1) * 6 * t3;\n    } else if (2 * t3 < 1) {\n      val = t2;\n    } else if (3 * t3 < 2) {\n      val = t1 + (t2 - t1) * (2 / 3 - t3) * 6;\n    } else {\n      val = t1;\n    }\n    rgb[i] = val * 255;\n  }\n  return rgb;\n}\nvar __extends$7 = globalThis && globalThis.__extends || function() {\n  var extendStatics = function(d, b) {\n    extendStatics = Object.setPrototypeOf || { __proto__: [] } instanceof Array && function(d2, b2) {\n      d2.__proto__ = b2;\n    } || function(d2, b2) {\n      for (var p2 in b2)\n        if (Object.prototype.hasOwnProperty.call(b2, p2))\n          d2[p2] = b2[p2];\n    };\n    return extendStatics(d, b);\n  };\n  return function(d, b) {\n    if (typeof b !== \"function\" && b !== null)\n      throw new TypeError(\"Class extends value \" + String(b) + \" is not a constructor or null\");\n    extendStatics(d, b);\n    function __() {\n      this.constructor = d;\n    }\n    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n  };\n}();\nvar __assign$W = globalThis && globalThis.__assign || function() {\n  __assign$W = Object.assign || function(t2) {\n    for (var s, i = 1, n2 = arguments.length; i < n2; i++) {\n      s = arguments[i];\n      for (var p2 in s)\n        if (Object.prototype.hasOwnProperty.call(s, p2))\n          t2[p2] = s[p2];\n    }\n    return t2;\n  };\n  return __assign$W.apply(this, arguments);\n};\nfunction getId(noticeProps) {\n  if (noticeProps.id) {\n    return noticeProps.id;\n  }\n  return \"arco_notice_id_\" + Date.now();\n}\nvar BaseNotice = function(_super) {\n  __extends$7(BaseNotice2, _super);\n  function BaseNotice2(props) {\n    var _this = _super.call(this, props) || this;\n    _this.add = function(noticeProps) {\n      var oldNotices = _this.state.notices;\n      if (noticeProps.id && ~oldNotices.findIndex(function(notice) {\n        return notice.id === noticeProps.id;\n      })) {\n        _this.update(noticeProps);\n        return noticeProps.id;\n      }\n      var id2 = getId(noticeProps);\n      var newNotices = oldNotices.concat(__assign$W(__assign$W({}, noticeProps), { id: id2 }));\n      _this.setState({\n        notices: newNotices,\n        position: noticeProps.position\n      });\n      return id2;\n    };\n    _this.update = function(newNotice) {\n      var updatedNotices = _this.state.notices.map(function(oldNotice) {\n        if (newNotice.id === oldNotice.id) {\n          newNotice.update = true;\n          return newNotice;\n        }\n        return oldNotice;\n      });\n      _this.setState({\n        notices: updatedNotices\n      }, function() {\n        var notices = _this.state.notices.map(function(oldNotice) {\n          if (newNotice.id === oldNotice.id && oldNotice.update) {\n            delete oldNotice.update;\n          }\n          return oldNotice;\n        });\n        _this.setState({ notices });\n      });\n    };\n    _this.clear = function() {\n      _this.setState({\n        notices: []\n      });\n    };\n    _this.state = {\n      notices: [],\n      position: \"topRight\"\n    };\n    _this.remove = _this.remove.bind(_this);\n    return _this;\n  }\n  BaseNotice2.prototype.remove = function(id2) {\n    var newNotices = this.state.notices.filter(function(notice) {\n      return notice.id !== id2;\n    });\n    this.setState({\n      notices: newNotices\n    });\n  };\n  return BaseNotice2;\n}(react.exports.Component);\nvar BaseNotification = BaseNotice;\nfunction ownKeys$q(object, enumerableOnly) {\n  var keys = Object.keys(object);\n  if (Object.getOwnPropertySymbols) {\n    var symbols = Object.getOwnPropertySymbols(object);\n    if (enumerableOnly) {\n      symbols = symbols.filter(function(sym) {\n        return Object.getOwnPropertyDescriptor(object, sym).enumerable;\n      });\n    }\n    keys.push.apply(keys, symbols);\n  }\n  return keys;\n}\nfunction _objectSpread$q(target2) {\n  for (var i = 1; i < arguments.length; i++) {\n    var source2 = arguments[i] != null ? arguments[i] : {};\n    if (i % 2) {\n      ownKeys$q(Object(source2), true).forEach(function(key) {\n        _defineProperty(target2, key, source2[key]);\n      });\n    } else if (Object.getOwnPropertyDescriptors) {\n      Object.defineProperties(target2, Object.getOwnPropertyDescriptors(source2));\n    } else {\n      ownKeys$q(Object(source2)).forEach(function(key) {\n        Object.defineProperty(target2, key, Object.getOwnPropertyDescriptor(source2, key));\n      });\n    }\n  }\n  return target2;\n}\nfunction IconLoadingComponent(iconProps, ref) {\n  var _useContext = react.exports.useContext(IconContext), prefixCls2 = _useContext.prefixCls;\n  var spin = iconProps.spin, className = iconProps.className;\n  var props = _objectSpread$q(_objectSpread$q({\n    ref\n  }, iconProps), {}, {\n    className: \"\".concat(className ? className + \" \" : \"\").concat(prefixCls2, \"-icon \").concat(prefixCls2, \"-icon-loading\")\n  });\n  if (spin) {\n    props.className = \"\".concat(props.className, \" \").concat(prefixCls2, \"-icon-loading\");\n  }\n  delete props.spin;\n  delete props.isIcon;\n  return /* @__PURE__ */ React.createElement(\"svg\", _extends({\n    fill: \"none\",\n    stroke: \"currentColor\",\n    strokeWidth: \"4\",\n    viewBox: \"0 0 48 48\",\n    width: \"1em\",\n    height: \"1em\"\n  }, props), /* @__PURE__ */ React.createElement(\"path\", {\n    d: \"M42 24c0 9.941-8.059 18-18 18S6 33.941 6 24 14.059 6 24 6\"\n  }));\n}\nvar IconLoading = /* @__PURE__ */ React.forwardRef(IconLoadingComponent);\nIconLoading.defaultProps = {\n  isIcon: true\n};\nIconLoading.displayName = \"IconLoading\";\nvar IconLoading$1 = IconLoading;\nvar __assign$V = globalThis && globalThis.__assign || function() {\n  __assign$V = Object.assign || function(t2) {\n    for (var s, i = 1, n2 = arguments.length; i < n2; i++) {\n      s = arguments[i];\n      for (var p2 in s)\n        if (Object.prototype.hasOwnProperty.call(s, p2))\n          t2[p2] = s[p2];\n    }\n    return t2;\n  };\n  return __assign$V.apply(this, arguments);\n};\nvar __rest$r = globalThis && globalThis.__rest || function(s, e) {\n  var t2 = {};\n  for (var p2 in s)\n    if (Object.prototype.hasOwnProperty.call(s, p2) && e.indexOf(p2) < 0)\n      t2[p2] = s[p2];\n  if (s != null && typeof Object.getOwnPropertySymbols === \"function\")\n    for (var i = 0, p2 = Object.getOwnPropertySymbols(s); i < p2.length; i++) {\n      if (e.indexOf(p2[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p2[i]))\n        t2[p2[i]] = s[p2[i]];\n    }\n  return t2;\n};\nfunction IconHover(props) {\n  var _a;\n  var children = props.children, className = props.className, disabled = props.disabled, prefix = props.prefix, _b = props.size, size = _b === void 0 ? \"default\" : _b, rest = __rest$r(props, [\"children\", \"className\", \"disabled\", \"prefix\", \"size\"]);\n  var getPrefixCls = react.exports.useContext(ConfigContext).getPrefixCls;\n  var prefixCls2 = getPrefixCls(\"icon-hover\");\n  return React.createElement(\"span\", __assign$V({ className: cs$1(prefixCls2, (_a = {}, _a[prefix + \"-icon-hover\"] = prefix, _a[prefixCls2 + \"-size-\" + size] = size && size !== \"default\", _a[prefixCls2 + \"-disabled\"] = disabled, _a), className), onClick: props.onClick }, rest), children);\n}\nvar __extends$6 = globalThis && globalThis.__extends || function() {\n  var extendStatics = function(d, b) {\n    extendStatics = Object.setPrototypeOf || { __proto__: [] } instanceof Array && function(d2, b2) {\n      d2.__proto__ = b2;\n    } || function(d2, b2) {\n      for (var p2 in b2)\n        if (Object.prototype.hasOwnProperty.call(b2, p2))\n          d2[p2] = b2[p2];\n    };\n    return extendStatics(d, b);\n  };\n  return function(d, b) {\n    if (typeof b !== \"function\" && b !== null)\n      throw new TypeError(\"Class extends value \" + String(b) + \" is not a constructor or null\");\n    extendStatics(d, b);\n    function __() {\n      this.constructor = d;\n    }\n    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n  };\n}();\nvar Notice = function(_super) {\n  __extends$6(Notice2, _super);\n  function Notice2() {\n    var _this = _super !== null && _super.apply(this, arguments) || this;\n    _this.startTimer = function() {\n      var _a = _this.props, duration2 = _a.duration, onClose = _a.onClose, id2 = _a.id;\n      if (duration2 !== 0) {\n        _this.timer = window.setTimeout(function() {\n          onClose && onClose(id2);\n          _this.removeTimer();\n        }, duration2);\n      }\n    };\n    _this.removeTimer = function() {\n      if (_this.timer) {\n        window.clearTimeout(_this.timer);\n        _this.timer = null;\n      }\n    };\n    _this.onClose = function() {\n      _this.props.onClose && _this.props.onClose(_this.props.id);\n    };\n    _this.renderIcon = function() {\n      var _a = _this.props, showIcon = _a.showIcon, icon2 = _a.icon, type = _a.type, prefixCls2 = _a.prefixCls;\n      var content;\n      if (icon2) {\n        content = icon2;\n      } else if (showIcon) {\n        switch (type) {\n          case \"info\":\n            content = React.createElement(IconInfoCircleFill$1, null);\n            break;\n          case \"success\":\n            content = React.createElement(IconCheckCircleFill$1, null);\n            break;\n          case \"error\":\n            content = React.createElement(IconCloseCircleFill$1, null);\n            break;\n          case \"warning\":\n            content = React.createElement(IconExclamationCircleFill$1, null);\n            break;\n          case \"loading\":\n            content = React.createElement(IconLoading$1, null);\n            break;\n        }\n      }\n      return React.createElement(\"span\", { className: prefixCls2 + \"-icon\" }, content);\n    };\n    _this.onMouseEnter = function() {\n      _this.removeTimer();\n    };\n    _this.onMouseLeave = function() {\n      _this.startTimer();\n    };\n    return _this;\n  }\n  Notice2.prototype.componentDidMount = function() {\n    this.startTimer();\n  };\n  Notice2.prototype.componentDidUpdate = function(nextProps) {\n    if (nextProps.duration !== this.props.duration || this.props.update) {\n      this.removeTimer();\n      this.startTimer();\n    }\n  };\n  Notice2.prototype.componentWillUnmount = function() {\n    this.removeTimer();\n  };\n  Notice2.prototype.render = function() {\n    var _a;\n    var _b = this.props, title = _b.title, content = _b.content, showIcon = _b.showIcon, className = _b.className, style = _b.style, type = _b.type, btn = _b.btn, icon2 = _b.icon, prefixCls2 = _b.prefixCls, closable = _b.closable, noticeType = _b.noticeType;\n    var classNames = cs$1(prefixCls2, prefixCls2 + \"-\" + type, (_a = {}, _a[prefixCls2 + \"-closable\"] = closable, _a), className);\n    var _closable = \"closable\" in this.props ? closable : true;\n    var shouldRenderIcon = showIcon;\n    if (type === \"normal\" && !icon2) {\n      shouldRenderIcon = false;\n    }\n    if (noticeType === \"message\") {\n      _closable = closable;\n      return React.createElement(\"div\", { style: { textAlign: \"center\" }, onMouseEnter: this.onMouseEnter, onMouseLeave: this.onMouseLeave }, React.createElement(\"div\", { className: classNames, style }, shouldRenderIcon && this.renderIcon(), React.createElement(\"span\", { className: prefixCls2 + \"-content\" }, content), _closable && React.createElement(IconHover, { prefix: prefixCls2, className: prefixCls2 + \"-close-btn\", onClick: this.onClose }, React.createElement(IconClose$1, null))));\n    }\n    if (noticeType === \"notification\") {\n      return React.createElement(\"div\", { onMouseEnter: this.onMouseEnter, onMouseLeave: this.onMouseLeave }, React.createElement(\"div\", { className: classNames, style }, shouldRenderIcon && React.createElement(\"div\", { className: prefixCls2 + \"-left\" }, this.renderIcon()), React.createElement(\"div\", { className: prefixCls2 + \"-right\" }, title && React.createElement(\"div\", { className: prefixCls2 + \"-title\" }, title), React.createElement(\"div\", { className: prefixCls2 + \"-content\" }, content), btn && React.createElement(\"div\", { className: prefixCls2 + \"-btn-wrapper\" }, btn)), _closable && React.createElement(IconHover, { prefix: prefixCls2, className: prefixCls2 + \"-close-btn\", onClick: this.onClose }, React.createElement(IconClose$1, null))));\n    }\n  };\n  Notice2.defaultProps = {\n    type: \"info\",\n    showIcon: true,\n    noticeType: \"message\",\n    duration: 3e3\n  };\n  return Notice2;\n}(react.exports.Component);\nvar Notice$1 = Notice;\nvar __extends$5 = globalThis && globalThis.__extends || function() {\n  var extendStatics = function(d, b) {\n    extendStatics = Object.setPrototypeOf || { __proto__: [] } instanceof Array && function(d2, b2) {\n      d2.__proto__ = b2;\n    } || function(d2, b2) {\n      for (var p2 in b2)\n        if (Object.prototype.hasOwnProperty.call(b2, p2))\n          d2[p2] = b2[p2];\n    };\n    return extendStatics(d, b);\n  };\n  return function(d, b) {\n    if (typeof b !== \"function\" && b !== null)\n      throw new TypeError(\"Class extends value \" + String(b) + \" is not a constructor or null\");\n    extendStatics(d, b);\n    function __() {\n      this.constructor = d;\n    }\n    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n  };\n}();\nvar __assign$U = globalThis && globalThis.__assign || function() {\n  __assign$U = Object.assign || function(t2) {\n    for (var s, i = 1, n2 = arguments.length; i < n2; i++) {\n      s = arguments[i];\n      for (var p2 in s)\n        if (Object.prototype.hasOwnProperty.call(s, p2))\n          t2[p2] = s[p2];\n    }\n    return t2;\n  };\n  return __assign$U.apply(this, arguments);\n};\nvar messageTypes = [\"info\", \"success\", \"error\", \"warning\", \"loading\", \"normal\"];\nvar messageInstance = {};\nvar maxCount$1;\nvar prefixCls$1;\nvar duration$1;\nvar container$1;\nfunction addInstance(noticeProps) {\n  var _noticeProps = __assign$U({ position: \"top\", duration: duration$1 }, noticeProps);\n  var position = _noticeProps.position, transitionClassNames = _noticeProps.transitionClassNames;\n  var id2;\n  if (messageInstance[position]) {\n    var notices = messageInstance[position].state.notices;\n    if (notices.length >= maxCount$1) {\n      var updated = notices[0];\n      id2 = updated.id;\n      notices.shift();\n      messageInstance[position].add(__assign$U(__assign$U({}, _noticeProps), { id: id2 }));\n    } else {\n      id2 = messageInstance[position].add(_noticeProps);\n    }\n  } else {\n    var div = document.createElement(\"div\");\n    (container$1 || document.body).appendChild(div);\n    ReactDOM.render(React.createElement(Message, { transitionClassNames, ref: function(instance) {\n      messageInstance[position] = instance;\n      id2 = messageInstance[position].add(_noticeProps);\n    } }), div);\n  }\n  var result = function() {\n    if (messageInstance[position]) {\n      messageInstance[position].remove(id2);\n    }\n  };\n  return result;\n}\nvar Message = function(_super) {\n  __extends$5(Message2, _super);\n  function Message2() {\n    var _this = _super !== null && _super.apply(this, arguments) || this;\n    _this.remove = function(id2) {\n      var noticeItem = _this.state.notices.find(function(item) {\n        return item.id === id2;\n      });\n      if (noticeItem) {\n        _this.update(__assign$U(__assign$U({}, noticeItem), { style: __assign$U(__assign$U({}, noticeItem.style), { opacity: 0 }) }));\n      }\n      setTimeout(function() {\n        _super.prototype.remove.call(_this, id2);\n      }, 100);\n    };\n    return _this;\n  }\n  Message2.prototype.render = function() {\n    var _this = this;\n    var transitionClassNames = this.props.transitionClassNames;\n    var _a = this.state, notices = _a.notices, position = _a.position;\n    var prefixClsMessage = prefixCls$1 ? prefixCls$1 + \"-message\" : \"arco-message\";\n    var classNames = cs$1(prefixClsMessage + \"-wrapper\", prefixClsMessage + \"-wrapper-\" + position);\n    return React.createElement(\"div\", { className: classNames }, React.createElement(TransitionGroup$1, { component: null }, notices.map(function(notice) {\n      return React.createElement(CSSTransition$3, { key: notice.id, timeout: {\n        enter: 100,\n        exit: 300\n      }, classNames: transitionClassNames || \"fadeMessage\", onExit: function(e) {\n        e.style.height = e.scrollHeight + \"px\";\n      }, onExiting: function(e) {\n        e.style.height = 0;\n      }, onExited: function(e) {\n        e.style.height = 0;\n        notice.onClose && notice.onClose();\n      } }, React.createElement(Notice$1, __assign$U({}, notice, { prefixCls: prefixClsMessage, onClose: _this.remove, noticeType: \"message\" })));\n    })));\n  };\n  Message2.config = function(options) {\n    if (options === void 0) {\n      options = {};\n    }\n    if (options.maxCount) {\n      maxCount$1 = options.maxCount;\n    }\n    if (options.prefixCls) {\n      prefixCls$1 = options.prefixCls;\n    }\n    if (options.duration) {\n      duration$1 = options.duration;\n    }\n    if (options.getContainer && options.getContainer() !== container$1) {\n      container$1 = options.getContainer();\n      Object.keys(messageInstance).forEach(function(notice) {\n        return messageInstance[notice].clear();\n      });\n      messageInstance = {};\n    }\n  };\n  Message2.clear = function() {\n    Object.keys(messageInstance).forEach(function(ins) {\n      messageInstance[ins].clear();\n    });\n  };\n  Message2.addInstance = addInstance;\n  return Message2;\n}(BaseNotification);\nmessageTypes.forEach(function(type) {\n  Message[type] = function(noticeProps) {\n    var props = typeof noticeProps === \"string\" ? { content: noticeProps } : noticeProps;\n    return addInstance(__assign$U(__assign$U({}, props), { type }));\n  };\n});\nvar Message$1 = Message;\nvar __extends$4 = globalThis && globalThis.__extends || function() {\n  var extendStatics = function(d, b) {\n    extendStatics = Object.setPrototypeOf || { __proto__: [] } instanceof Array && function(d2, b2) {\n      d2.__proto__ = b2;\n    } || function(d2, b2) {\n      for (var p2 in b2)\n        if (Object.prototype.hasOwnProperty.call(b2, p2))\n          d2[p2] = b2[p2];\n    };\n    return extendStatics(d, b);\n  };\n  return function(d, b) {\n    if (typeof b !== \"function\" && b !== null)\n      throw new TypeError(\"Class extends value \" + String(b) + \" is not a constructor or null\");\n    extendStatics(d, b);\n    function __() {\n      this.constructor = d;\n    }\n    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n  };\n}();\nvar __assign$T = globalThis && globalThis.__assign || function() {\n  __assign$T = Object.assign || function(t2) {\n    for (var s, i = 1, n2 = arguments.length; i < n2; i++) {\n      s = arguments[i];\n      for (var p2 in s)\n        if (Object.prototype.hasOwnProperty.call(s, p2))\n          t2[p2] = s[p2];\n    }\n    return t2;\n  };\n  return __assign$T.apply(this, arguments);\n};\nvar notificationTypes = [\"info\", \"success\", \"error\", \"warning\", \"normal\"];\nvar notificationInstance = {};\nvar maxCount;\nvar prefixCls;\nvar duration;\nvar container;\nvar Notification = function(_super) {\n  __extends$4(Notification2, _super);\n  function Notification2() {\n    var _this = _super !== null && _super.apply(this, arguments) || this;\n    _this.remove = function(id2) {\n      var noticeItem = _this.state.notices.find(function(item) {\n        return item.id === id2;\n      });\n      if (noticeItem) {\n        _this.update(__assign$T(__assign$T({}, noticeItem), { style: __assign$T(__assign$T({}, noticeItem.style), { opacity: 0 }) }));\n      }\n      setTimeout(function() {\n        _super.prototype.remove.call(_this, id2);\n      }, 200);\n    };\n    return _this;\n  }\n  Notification2.prototype.render = function() {\n    var _this = this;\n    var _a = this.state, notices = _a.notices, _b = _a.position, position = _b === void 0 ? \"topRight\" : _b;\n    var prefixClsNotification = prefixCls ? prefixCls + \"-notification\" : \"arco-notification\";\n    var transitionClass;\n    if (position === \"topLeft\" || position === \"bottomLeft\") {\n      transitionClass = \"slideNoticeLeft\";\n    } else {\n      transitionClass = \"slideNoticeRight\";\n    }\n    var classNames = cs$1(prefixClsNotification + \"-wrapper\", prefixClsNotification + \"-wrapper-\" + position);\n    return React.createElement(\"div\", { className: classNames }, React.createElement(TransitionGroup$1, { component: null }, notices.map(function(notice) {\n      return React.createElement(CSSTransition$3, { key: notice.id, timeout: {\n        enter: 400,\n        exit: 300\n      }, classNames: transitionClass, onExit: function(e) {\n        e.style.height = e.scrollHeight + \"px\";\n      }, onExiting: function(e) {\n        e.style.height = 0;\n      }, onExited: function(e) {\n        e.style.height = 0;\n        notice.onClose && notice.onClose();\n      } }, React.createElement(Notice$1, __assign$T({}, notice, { onClose: _this.remove, prefixCls: prefixClsNotification, noticeType: \"notification\" })));\n    })));\n  };\n  Notification2.config = function(options) {\n    if (options === void 0) {\n      options = {};\n    }\n    if (options.maxCount) {\n      maxCount = options.maxCount;\n    }\n    if (options.prefixCls) {\n      prefixCls = options.prefixCls;\n    }\n    if (isNumber$1(options.duration)) {\n      duration = options.duration;\n    }\n    if (options.getContainer && options.getContainer() !== container) {\n      container = options.getContainer();\n      Object.keys(notificationInstance).forEach(function(notice) {\n        return notificationInstance[notice].clear();\n      });\n      notificationInstance = {};\n    }\n  };\n  Notification2.clear = function() {\n    Object.keys(notificationInstance).forEach(function(ins) {\n      notificationInstance[ins].clear();\n    });\n  };\n  Notification2.remove = function(id2) {\n    Object.keys(notificationInstance).forEach(function(ins) {\n      notificationInstance[ins].remove(id2);\n    });\n  };\n  Notification2.addInstance = function(noticeProps) {\n    var _a = noticeProps.position, position = _a === void 0 ? \"topRight\" : _a;\n    var _noticeProps = __assign$T({ duration }, noticeProps);\n    if (notificationInstance[position]) {\n      var notices = notificationInstance[position].state.notices;\n      if (notices.length >= maxCount) {\n        var updated = notices[0];\n        notices.shift();\n        notificationInstance[position].add(__assign$T(__assign$T({}, _noticeProps), { id: updated.id }));\n      } else {\n        notificationInstance[position].add(_noticeProps);\n      }\n      return notificationInstance[position];\n    }\n    var div = document.createElement(\"div\");\n    var instance = null;\n    (container || document.body).appendChild(div);\n    ReactDOM.render(React.createElement(Notification2, { ref: function(ref) {\n      notificationInstance[position] = ref;\n      notificationInstance[position].add(_noticeProps);\n      instance = notificationInstance[position];\n      return instance;\n    } }), div);\n  };\n  return Notification2;\n}(BaseNotification);\nnotificationTypes.forEach(function(type) {\n  Notification[type] = function(noticeProps) {\n    return Notification.addInstance(__assign$T(__assign$T({}, noticeProps), { type }));\n  };\n});\nvar Notification$1 = Notification;\nfunction ownKeys$p(object, enumerableOnly) {\n  var keys = Object.keys(object);\n  if (Object.getOwnPropertySymbols) {\n    var symbols = Object.getOwnPropertySymbols(object);\n    if (enumerableOnly) {\n      symbols = symbols.filter(function(sym) {\n        return Object.getOwnPropertyDescriptor(object, sym).enumerable;\n      });\n    }\n    keys.push.apply(keys, symbols);\n  }\n  return keys;\n}\nfunction _objectSpread$p(target2) {\n  for (var i = 1; i < arguments.length; i++) {\n    var source2 = arguments[i] != null ? arguments[i] : {};\n    if (i % 2) {\n      ownKeys$p(Object(source2), true).forEach(function(key) {\n        _defineProperty(target2, key, source2[key]);\n      });\n    } else if (Object.getOwnPropertyDescriptors) {\n      Object.defineProperties(target2, Object.getOwnPropertyDescriptors(source2));\n    } else {\n      ownKeys$p(Object(source2)).forEach(function(key) {\n        Object.defineProperty(target2, key, Object.getOwnPropertyDescriptor(source2, key));\n      });\n    }\n  }\n  return target2;\n}\nfunction IconEmptyComponent(iconProps, ref) {\n  var _useContext = react.exports.useContext(IconContext), prefixCls2 = _useContext.prefixCls;\n  var spin = iconProps.spin, className = iconProps.className;\n  var props = _objectSpread$p(_objectSpread$p({\n    ref\n  }, iconProps), {}, {\n    className: \"\".concat(className ? className + \" \" : \"\").concat(prefixCls2, \"-icon \").concat(prefixCls2, \"-icon-empty\")\n  });\n  if (spin) {\n    props.className = \"\".concat(props.className, \" \").concat(prefixCls2, \"-icon-loading\");\n  }\n  delete props.spin;\n  delete props.isIcon;\n  return /* @__PURE__ */ React.createElement(\"svg\", _extends({\n    fill: \"none\",\n    stroke: \"currentColor\",\n    strokeWidth: \"4\",\n    viewBox: \"0 0 48 48\",\n    width: \"1em\",\n    height: \"1em\"\n  }, props), /* @__PURE__ */ React.createElement(\"path\", {\n    d: \"M24 5v6m7 1 4-4m-18 4-4-4m28.5 22H28s-1 3-4 3-4-3-4-3H6.5M40 41H8a2 2 0 0 1-2-2v-8.46a2 2 0 0 1 .272-1.007l6.15-10.54A2 2 0 0 1 14.148 18H33.85a2 2 0 0 1 1.728.992l6.149 10.541A2 2 0 0 1 42 30.541V39a2 2 0 0 1-2 2Z\"\n  }));\n}\nvar IconEmpty = /* @__PURE__ */ React.forwardRef(IconEmptyComponent);\nIconEmpty.defaultProps = {\n  isIcon: true\n};\nIconEmpty.displayName = \"IconEmpty\";\nvar IconEmpty$1 = IconEmpty;\nvar __assign$S = globalThis && globalThis.__assign || function() {\n  __assign$S = Object.assign || function(t2) {\n    for (var s, i = 1, n2 = arguments.length; i < n2; i++) {\n      s = arguments[i];\n      for (var p2 in s)\n        if (Object.prototype.hasOwnProperty.call(s, p2))\n          t2[p2] = s[p2];\n    }\n    return t2;\n  };\n  return __assign$S.apply(this, arguments);\n};\nfunction useMergeProps(componentProps, defaultProps2, globalComponentConfig) {\n  var _defaultProps = react.exports.useMemo(function() {\n    return __assign$S(__assign$S({}, defaultProps2), globalComponentConfig);\n  }, [defaultProps2, globalComponentConfig]);\n  var props = react.exports.useMemo(function() {\n    var mProps = __assign$S({}, componentProps);\n    for (var propName in _defaultProps) {\n      if (mProps[propName] === void 0) {\n        mProps[propName] = _defaultProps[propName];\n      }\n    }\n    return mProps;\n  }, [componentProps, _defaultProps]);\n  return props;\n}\nfunction Empty(baseProps, ref) {\n  var _a = react.exports.useContext(ConfigContext), getPrefixCls = _a.getPrefixCls, globalLocale = _a.locale, componentConfig2 = _a.componentConfig;\n  var props = useMergeProps(baseProps, {}, componentConfig2 === null || componentConfig2 === void 0 ? void 0 : componentConfig2.Empty);\n  var style = props.style, className = props.className, description = props.description, icon2 = props.icon, imgSrc = props.imgSrc;\n  var prefixCls2 = getPrefixCls(\"empty\");\n  var classNames = cs$1(prefixCls2, className);\n  var noData = globalLocale.Empty.noData;\n  var alt = typeof description === \"string\" ? description : \"empty\";\n  return React.createElement(\"div\", { ref, className: classNames, style }, React.createElement(\"div\", { className: prefixCls2 + \"-wrapper\" }, React.createElement(\"div\", { className: prefixCls2 + \"-image\" }, imgSrc ? React.createElement(\"img\", { alt, src: imgSrc }) : icon2 || React.createElement(IconEmpty$1, null)), React.createElement(\"div\", { className: prefixCls2 + \"-description\" }, description || noData)));\n}\nvar EmptyComponent = react.exports.forwardRef(Empty);\nEmptyComponent.displayName = \"Empty\";\nvar Empty$1 = react.exports.memo(EmptyComponent);\nvar __assign$R = globalThis && globalThis.__assign || function() {\n  __assign$R = Object.assign || function(t2) {\n    for (var s, i = 1, n2 = arguments.length; i < n2; i++) {\n      s = arguments[i];\n      for (var p2 in s)\n        if (Object.prototype.hasOwnProperty.call(s, p2))\n          t2[p2] = s[p2];\n    }\n    return t2;\n  };\n  return __assign$R.apply(this, arguments);\n};\nvar configProvider = {};\nfunction setConfigProviderProps(configProviderProps) {\n  configProvider = __assign$R({}, configProviderProps);\n}\nfunction getConfigProviderProps() {\n  return configProvider;\n}\nvar modalConfig = {\n  simple: true\n};\nvar setModalConfig = function(config2) {\n  modalConfig = __assign$R(__assign$R({}, modalConfig), config2);\n};\nvar getModalConfig = function() {\n  return modalConfig;\n};\nvar destroyList = [];\nvar __assign$Q = globalThis && globalThis.__assign || function() {\n  __assign$Q = Object.assign || function(t2) {\n    for (var s, i = 1, n2 = arguments.length; i < n2; i++) {\n      s = arguments[i];\n      for (var p2 in s)\n        if (Object.prototype.hasOwnProperty.call(s, p2))\n          t2[p2] = s[p2];\n    }\n    return t2;\n  };\n  return __assign$Q.apply(this, arguments);\n};\nfunction omit(obj, keys) {\n  var clone = __assign$Q({}, obj);\n  keys.forEach(function(key) {\n    if (key in clone) {\n      delete clone[key];\n    }\n  });\n  return clone;\n}\nvar __assign$P = globalThis && globalThis.__assign || function() {\n  __assign$P = Object.assign || function(t2) {\n    for (var s, i = 1, n2 = arguments.length; i < n2; i++) {\n      s = arguments[i];\n      for (var p2 in s)\n        if (Object.prototype.hasOwnProperty.call(s, p2))\n          t2[p2] = s[p2];\n    }\n    return t2;\n  };\n  return __assign$P.apply(this, arguments);\n};\nvar colorList = {\n  primaryColor: {\n    default: \"--arcoblue-6\",\n    hover: \"--arcoblue-5\",\n    active: \"--arcoblue-7\"\n  },\n  successColor: {\n    default: \"--green-6\",\n    hover: \"--green-5\",\n    active: \"--green-7\"\n  },\n  infoColor: {\n    default: \"--arcoblue-6\",\n    hover: \"--arcoblue-5\",\n    active: \"--arcoblue-7\"\n  },\n  warningColor: {\n    default: \"--orangered-6\",\n    hover: \"--orangered-5\",\n    active: \"--orangered-7\"\n  },\n  dangerColor: {\n    default: \"--red-6\",\n    hover: \"--red-5\",\n    active: \"--red-7\"\n  }\n};\nfunction setTheme(theme) {\n  if (theme && isObject$6(theme)) {\n    var root_1 = document.body;\n    Object.keys(colorList).forEach(function(color) {\n      if (theme[color]) {\n        root_1.style.setProperty(colorList[color].default, lighten(theme[color], 0));\n        if (!theme[color + \"Hover\"]) {\n          root_1.style.setProperty(colorList[color].hover, lighten(theme[color], 10));\n        }\n        if (!theme[color + \"Active\"]) {\n          root_1.style.setProperty(colorList[color].active, lighten(theme[color], -10));\n        }\n      }\n    });\n  }\n}\nfunction renderEmpty(componentName) {\n  switch (componentName) {\n    default:\n      return React.createElement(Empty$1, null);\n  }\n}\nvar defaultProps$j = {\n  locale: zhCN,\n  prefixCls: \"arco\",\n  getPopupContainer: function() {\n    return document.body;\n  },\n  size: \"default\",\n  renderEmpty,\n  focusLock: {\n    modal: { autoFocus: true },\n    drawer: { autoFocus: true }\n  }\n};\nvar componentConfig = {};\nvar ConfigContext = react.exports.createContext(__assign$P({ getPrefixCls: function(componentName, customPrefix) {\n  return (customPrefix || \"arco\") + \"-\" + componentName;\n} }, defaultProps$j));\nfunction ConfigProvider(baseProps) {\n  var props = useMergeProps(baseProps, defaultProps$j, componentConfig);\n  var theme = props.theme, prefixCls2 = props.prefixCls, children = props.children, locale2 = props.locale;\n  react.exports.useEffect(function() {\n    setTheme(theme);\n  }, [theme]);\n  react.exports.useEffect(function() {\n    Message$1.config({ prefixCls: prefixCls2 });\n    Notification$1.config({ prefixCls: prefixCls2 });\n  }, [prefixCls2]);\n  function getPrefixCls(componentName, customPrefix) {\n    return (customPrefix || prefixCls2) + \"-\" + componentName;\n  }\n  var config2 = __assign$P(__assign$P({}, omit(props, [\"children\"])), { getPrefixCls });\n  react.exports.useEffect(function() {\n    setConfigProviderProps({ locale: locale2, prefixCls: prefixCls2 });\n  }, [locale2, prefixCls2]);\n  var child = children;\n  if (prefixCls2 && prefixCls2 !== \"arco\") {\n    child = React.createElement(IconContext.Provider, { value: { prefixCls: prefixCls2 } }, children);\n  }\n  return React.createElement(ConfigContext.Provider, { value: config2 }, child);\n}\nConfigProvider.ConfigContext = ConfigContext;\nConfigProvider.displayName = \"ConfigProvider\";\nConfigContext.Consumer;\nvar __read$Q = globalThis && globalThis.__read || function(o, n2) {\n  var m2 = typeof Symbol === \"function\" && o[Symbol.iterator];\n  if (!m2)\n    return o;\n  var i = m2.call(o), r2, ar = [], e;\n  try {\n    while ((n2 === void 0 || n2-- > 0) && !(r2 = i.next()).done)\n      ar.push(r2.value);\n  } catch (error) {\n    e = { error };\n  } finally {\n    try {\n      if (r2 && !r2.done && (m2 = i[\"return\"]))\n        m2.call(i);\n    } finally {\n      if (e)\n        throw e.error;\n    }\n  }\n  return ar;\n};\nvar defaultProps$i = {\n  showIcon: true,\n  type: \"info\"\n};\nfunction Alert(baseProps, ref) {\n  var _a;\n  var _b = react.exports.useContext(ConfigContext), getPrefixCls = _b.getPrefixCls, componentConfig2 = _b.componentConfig;\n  var props = useMergeProps(baseProps, defaultProps$i, componentConfig2 === null || componentConfig2 === void 0 ? void 0 : componentConfig2.Alert);\n  var style = props.style, className = props.className, action = props.action, _c = props.type, type = _c === void 0 ? \"info\" : _c, title = props.title, content = props.content, icon2 = props.icon, showIcon = props.showIcon, closable = props.closable, closeable = props.closeable, afterClose = props.afterClose, onClose = props.onClose, closeElement = props.closeElement, banner = props.banner;\n  var prefixCls2 = getPrefixCls(\"alert\");\n  var _d = __read$Q(react.exports.useState(true), 2), visible = _d[0], setVisible = _d[1];\n  function renderIcon(type2) {\n    if (icon2) {\n      return icon2;\n    }\n    switch (type2) {\n      case \"info\":\n        return React.createElement(IconInfoCircleFill$1, null);\n      case \"success\":\n        return React.createElement(IconCheckCircleFill$1, null);\n      case \"warning\":\n        return React.createElement(IconExclamationCircleFill$1, null);\n      case \"error\":\n        return React.createElement(IconCloseCircleFill$1, null);\n      default:\n        return null;\n    }\n  }\n  function onHandleClose(e) {\n    setVisible(false);\n    onClose && onClose(e);\n  }\n  var classNames = cs$1(prefixCls2, prefixCls2 + \"-\" + type, (_a = {}, _a[prefixCls2 + \"-with-title\"] = title, _a[prefixCls2 + \"-banner\"] = banner, _a), className);\n  var _closable = \"closeable\" in props ? closeable : closable;\n  return React.createElement(CSSTransition$3, { in: visible, timeout: 300, classNames: \"zoomInTop\", unmountOnExit: true, onExited: function() {\n    afterClose && afterClose();\n  } }, React.createElement(\"div\", { ref, style, className: classNames }, showIcon && React.createElement(\"div\", { className: prefixCls2 + \"-icon-wrapper\" }, renderIcon(type)), React.createElement(\"div\", { className: prefixCls2 + \"-content-wrapper\" }, title && React.createElement(\"div\", { className: prefixCls2 + \"-title\" }, title), content && React.createElement(\"div\", { className: prefixCls2 + \"-content\" }, content)), action && React.createElement(\"div\", { className: prefixCls2 + \"-action\" }, action), _closable && React.createElement(\"button\", { onClick: onHandleClose, className: prefixCls2 + \"-close-btn\" }, closeElement || React.createElement(IconClose$1, null))));\n}\nvar AlertComponent = react.exports.forwardRef(Alert);\nAlertComponent.displayName = \"Alert\";\nvar Alert$1 = AlertComponent;\nfunction isObject$5(value) {\n  var type = typeof value;\n  return value != null && (type == \"object\" || type == \"function\");\n}\nvar isObject_1 = isObject$5;\nvar freeGlobal$1 = typeof commonjsGlobal == \"object\" && commonjsGlobal && commonjsGlobal.Object === Object && commonjsGlobal;\nvar _freeGlobal = freeGlobal$1;\nvar freeGlobal = _freeGlobal;\nvar freeSelf = typeof self == \"object\" && self && self.Object === Object && self;\nvar root$4 = freeGlobal || freeSelf || Function(\"return this\")();\nvar _root = root$4;\nvar root$3 = _root;\nvar now$1 = function() {\n  return root$3.Date.now();\n};\nvar now_1 = now$1;\nvar reWhitespace = /\\s/;\nfunction trimmedEndIndex$1(string) {\n  var index2 = string.length;\n  while (index2-- && reWhitespace.test(string.charAt(index2))) {\n  }\n  return index2;\n}\nvar _trimmedEndIndex = trimmedEndIndex$1;\nvar trimmedEndIndex = _trimmedEndIndex;\nvar reTrimStart = /^\\s+/;\nfunction baseTrim$1(string) {\n  return string ? string.slice(0, trimmedEndIndex(string) + 1).replace(reTrimStart, \"\") : string;\n}\nvar _baseTrim = baseTrim$1;\nvar root$2 = _root;\nvar Symbol$4 = root$2.Symbol;\nvar _Symbol = Symbol$4;\nvar Symbol$3 = _Symbol;\nvar objectProto$4 = Object.prototype;\nvar hasOwnProperty$3 = objectProto$4.hasOwnProperty;\nvar nativeObjectToString$1 = objectProto$4.toString;\nvar symToStringTag$1 = Symbol$3 ? Symbol$3.toStringTag : void 0;\nfunction getRawTag$1(value) {\n  var isOwn = hasOwnProperty$3.call(value, symToStringTag$1), tag = value[symToStringTag$1];\n  try {\n    value[symToStringTag$1] = void 0;\n    var unmasked = true;\n  } catch (e) {\n  }\n  var result = nativeObjectToString$1.call(value);\n  if (unmasked) {\n    if (isOwn) {\n      value[symToStringTag$1] = tag;\n    } else {\n      delete value[symToStringTag$1];\n    }\n  }\n  return result;\n}\nvar _getRawTag = getRawTag$1;\nvar objectProto$3 = Object.prototype;\nvar nativeObjectToString = objectProto$3.toString;\nfunction objectToString$1(value) {\n  return nativeObjectToString.call(value);\n}\nvar _objectToString = objectToString$1;\nvar Symbol$2 = _Symbol, getRawTag = _getRawTag, objectToString = _objectToString;\nvar nullTag = \"[object Null]\", undefinedTag = \"[object Undefined]\";\nvar symToStringTag = Symbol$2 ? Symbol$2.toStringTag : void 0;\nfunction baseGetTag$2(value) {\n  if (value == null) {\n    return value === void 0 ? undefinedTag : nullTag;\n  }\n  return symToStringTag && symToStringTag in Object(value) ? getRawTag(value) : objectToString(value);\n}\nvar _baseGetTag = baseGetTag$2;\nfunction isObjectLike$1(value) {\n  return value != null && typeof value == \"object\";\n}\nvar isObjectLike_1 = isObjectLike$1;\nvar baseGetTag$1 = _baseGetTag, isObjectLike = isObjectLike_1;\nvar symbolTag = \"[object Symbol]\";\nfunction isSymbol$4(value) {\n  return typeof value == \"symbol\" || isObjectLike(value) && baseGetTag$1(value) == symbolTag;\n}\nvar isSymbol_1 = isSymbol$4;\nvar baseTrim = _baseTrim, isObject$4 = isObject_1, isSymbol$3 = isSymbol_1;\nvar NAN = 0 / 0;\nvar reIsBadHex = /^[-+]0x[0-9a-f]+$/i;\nvar reIsBinary = /^0b[01]+$/i;\nvar reIsOctal = /^0o[0-7]+$/i;\nvar freeParseInt = parseInt;\nfunction toNumber$1(value) {\n  if (typeof value == \"number\") {\n    return value;\n  }\n  if (isSymbol$3(value)) {\n    return NAN;\n  }\n  if (isObject$4(value)) {\n    var other = typeof value.valueOf == \"function\" ? value.valueOf() : value;\n    value = isObject$4(other) ? other + \"\" : other;\n  }\n  if (typeof value != \"string\") {\n    return value === 0 ? value : +value;\n  }\n  value = baseTrim(value);\n  var isBinary = reIsBinary.test(value);\n  return isBinary || reIsOctal.test(value) ? freeParseInt(value.slice(2), isBinary ? 2 : 8) : reIsBadHex.test(value) ? NAN : +value;\n}\nvar toNumber_1 = toNumber$1;\nvar isObject$3 = isObject_1, now = now_1, toNumber = toNumber_1;\nvar FUNC_ERROR_TEXT$1 = \"Expected a function\";\nvar nativeMax = Math.max, nativeMin = Math.min;\nfunction debounce(func, wait, options) {\n  var lastArgs, lastThis, maxWait, result, timerId, lastCallTime, lastInvokeTime = 0, leading = false, maxing = false, trailing = true;\n  if (typeof func != \"function\") {\n    throw new TypeError(FUNC_ERROR_TEXT$1);\n  }\n  wait = toNumber(wait) || 0;\n  if (isObject$3(options)) {\n    leading = !!options.leading;\n    maxing = \"maxWait\" in options;\n    maxWait = maxing ? nativeMax(toNumber(options.maxWait) || 0, wait) : maxWait;\n    trailing = \"trailing\" in options ? !!options.trailing : trailing;\n  }\n  function invokeFunc(time) {\n    var args = lastArgs, thisArg = lastThis;\n    lastArgs = lastThis = void 0;\n    lastInvokeTime = time;\n    result = func.apply(thisArg, args);\n    return result;\n  }\n  function leadingEdge(time) {\n    lastInvokeTime = time;\n    timerId = setTimeout(timerExpired, wait);\n    return leading ? invokeFunc(time) : result;\n  }\n  function remainingWait(time) {\n    var timeSinceLastCall = time - lastCallTime, timeSinceLastInvoke = time - lastInvokeTime, timeWaiting = wait - timeSinceLastCall;\n    return maxing ? nativeMin(timeWaiting, maxWait - timeSinceLastInvoke) : timeWaiting;\n  }\n  function shouldInvoke(time) {\n    var timeSinceLastCall = time - lastCallTime, timeSinceLastInvoke = time - lastInvokeTime;\n    return lastCallTime === void 0 || timeSinceLastCall >= wait || timeSinceLastCall < 0 || maxing && timeSinceLastInvoke >= maxWait;\n  }\n  function timerExpired() {\n    var time = now();\n    if (shouldInvoke(time)) {\n      return trailingEdge(time);\n    }\n    timerId = setTimeout(timerExpired, remainingWait(time));\n  }\n  function trailingEdge(time) {\n    timerId = void 0;\n    if (trailing && lastArgs) {\n      return invokeFunc(time);\n    }\n    lastArgs = lastThis = void 0;\n    return result;\n  }\n  function cancel() {\n    if (timerId !== void 0) {\n      clearTimeout(timerId);\n    }\n    lastInvokeTime = 0;\n    lastArgs = lastCallTime = lastThis = timerId = void 0;\n  }\n  function flush() {\n    return timerId === void 0 ? result : trailingEdge(now());\n  }\n  function debounced() {\n    var time = now(), isInvoking = shouldInvoke(time);\n    lastArgs = arguments;\n    lastThis = this;\n    lastCallTime = time;\n    if (isInvoking) {\n      if (timerId === void 0) {\n        return leadingEdge(lastCallTime);\n      }\n      if (maxing) {\n        clearTimeout(timerId);\n        timerId = setTimeout(timerExpired, wait);\n        return invokeFunc(lastCallTime);\n      }\n    }\n    if (timerId === void 0) {\n      timerId = setTimeout(timerExpired, wait);\n    }\n    return result;\n  }\n  debounced.cancel = cancel;\n  debounced.flush = flush;\n  return debounced;\n}\nvar debounce_1 = debounce;\nfunction isElement(el) {\n  return el != null && typeof el === \"object\" && el.nodeType === 1;\n}\nfunction canOverflow(overflow, skipOverflowHiddenElements) {\n  if (skipOverflowHiddenElements && overflow === \"hidden\") {\n    return false;\n  }\n  return overflow !== \"visible\" && overflow !== \"clip\";\n}\nfunction isScrollable(el, skipOverflowHiddenElements) {\n  if (el.clientHeight < el.scrollHeight || el.clientWidth < el.scrollWidth) {\n    var style = getComputedStyle(el, null);\n    return canOverflow(style.overflowY, skipOverflowHiddenElements) || canOverflow(style.overflowX, skipOverflowHiddenElements);\n  }\n  return false;\n}\nfunction alignNearest(scrollingEdgeStart, scrollingEdgeEnd, scrollingSize, scrollingBorderStart, scrollingBorderEnd, elementEdgeStart, elementEdgeEnd, elementSize) {\n  if (elementEdgeStart < scrollingEdgeStart && elementEdgeEnd > scrollingEdgeEnd || elementEdgeStart > scrollingEdgeStart && elementEdgeEnd < scrollingEdgeEnd) {\n    return 0;\n  }\n  if (elementEdgeStart <= scrollingEdgeStart && elementSize <= scrollingSize || elementEdgeEnd >= scrollingEdgeEnd && elementSize >= scrollingSize) {\n    return elementEdgeStart - scrollingEdgeStart - scrollingBorderStart;\n  }\n  if (elementEdgeEnd > scrollingEdgeEnd && elementSize < scrollingSize || elementEdgeStart < scrollingEdgeStart && elementSize > scrollingSize) {\n    return elementEdgeEnd - scrollingEdgeEnd + scrollingBorderEnd;\n  }\n  return 0;\n}\nvar compute = function(target2, options) {\n  var scrollMode = options.scrollMode, block = options.block, inline = options.inline, boundary = options.boundary, skipOverflowHiddenElements = options.skipOverflowHiddenElements;\n  var checkBoundary = typeof boundary === \"function\" ? boundary : function(node) {\n    return node !== boundary;\n  };\n  if (!isElement(target2)) {\n    throw new TypeError(\"Invalid target\");\n  }\n  var scrollingElement = document.scrollingElement || document.documentElement;\n  var frames = [];\n  var cursor = target2;\n  while (isElement(cursor) && checkBoundary(cursor)) {\n    cursor = cursor.parentNode;\n    if (cursor === scrollingElement) {\n      frames.push(cursor);\n      break;\n    }\n    if (cursor === document.body && isScrollable(cursor) && !isScrollable(document.documentElement)) {\n      continue;\n    }\n    if (isScrollable(cursor, skipOverflowHiddenElements)) {\n      frames.push(cursor);\n    }\n  }\n  var viewportWidth = window.visualViewport ? visualViewport.width : innerWidth;\n  var viewportHeight = window.visualViewport ? visualViewport.height : innerHeight;\n  var viewportX = window.scrollX || pageXOffset;\n  var viewportY = window.scrollY || pageYOffset;\n  var _target$getBoundingCl = target2.getBoundingClientRect(), targetHeight = _target$getBoundingCl.height, targetWidth = _target$getBoundingCl.width, targetTop = _target$getBoundingCl.top, targetRight = _target$getBoundingCl.right, targetBottom = _target$getBoundingCl.bottom, targetLeft = _target$getBoundingCl.left;\n  var targetBlock = block === \"start\" || block === \"nearest\" ? targetTop : block === \"end\" ? targetBottom : targetTop + targetHeight / 2;\n  var targetInline = inline === \"center\" ? targetLeft + targetWidth / 2 : inline === \"end\" ? targetRight : targetLeft;\n  var computations = [];\n  for (var index2 = 0; index2 < frames.length; index2++) {\n    var frame = frames[index2];\n    var _frame$getBoundingCli = frame.getBoundingClientRect(), _height = _frame$getBoundingCli.height, _width = _frame$getBoundingCli.width, _top = _frame$getBoundingCli.top, right = _frame$getBoundingCli.right, bottom = _frame$getBoundingCli.bottom, _left = _frame$getBoundingCli.left;\n    if (scrollMode === \"if-needed\" && targetTop >= 0 && targetLeft >= 0 && targetBottom <= viewportHeight && targetRight <= viewportWidth && targetTop >= _top && targetBottom <= bottom && targetLeft >= _left && targetRight <= right) {\n      return computations;\n    }\n    var frameStyle = getComputedStyle(frame);\n    var borderLeft = parseInt(frameStyle.borderLeftWidth, 10);\n    var borderTop = parseInt(frameStyle.borderTopWidth, 10);\n    var borderRight = parseInt(frameStyle.borderRightWidth, 10);\n    var borderBottom = parseInt(frameStyle.borderBottomWidth, 10);\n    var blockScroll = 0;\n    var inlineScroll = 0;\n    var scrollbarWidth = \"offsetWidth\" in frame ? frame.offsetWidth - frame.clientWidth - borderLeft - borderRight : 0;\n    var scrollbarHeight = \"offsetHeight\" in frame ? frame.offsetHeight - frame.clientHeight - borderTop - borderBottom : 0;\n    if (scrollingElement === frame) {\n      if (block === \"start\") {\n        blockScroll = targetBlock;\n      } else if (block === \"end\") {\n        blockScroll = targetBlock - viewportHeight;\n      } else if (block === \"nearest\") {\n        blockScroll = alignNearest(viewportY, viewportY + viewportHeight, viewportHeight, borderTop, borderBottom, viewportY + targetBlock, viewportY + targetBlock + targetHeight, targetHeight);\n      } else {\n        blockScroll = targetBlock - viewportHeight / 2;\n      }\n      if (inline === \"start\") {\n        inlineScroll = targetInline;\n      } else if (inline === \"center\") {\n        inlineScroll = targetInline - viewportWidth / 2;\n      } else if (inline === \"end\") {\n        inlineScroll = targetInline - viewportWidth;\n      } else {\n        inlineScroll = alignNearest(viewportX, viewportX + viewportWidth, viewportWidth, borderLeft, borderRight, viewportX + targetInline, viewportX + targetInline + targetWidth, targetWidth);\n      }\n      blockScroll = Math.max(0, blockScroll + viewportY);\n      inlineScroll = Math.max(0, inlineScroll + viewportX);\n    } else {\n      if (block === \"start\") {\n        blockScroll = targetBlock - _top - borderTop;\n      } else if (block === \"end\") {\n        blockScroll = targetBlock - bottom + borderBottom + scrollbarHeight;\n      } else if (block === \"nearest\") {\n        blockScroll = alignNearest(_top, bottom, _height, borderTop, borderBottom + scrollbarHeight, targetBlock, targetBlock + targetHeight, targetHeight);\n      } else {\n        blockScroll = targetBlock - (_top + _height / 2) + scrollbarHeight / 2;\n      }\n      if (inline === \"start\") {\n        inlineScroll = targetInline - _left - borderLeft;\n      } else if (inline === \"center\") {\n        inlineScroll = targetInline - (_left + _width / 2) + scrollbarWidth / 2;\n      } else if (inline === \"end\") {\n        inlineScroll = targetInline - right + borderRight + scrollbarWidth;\n      } else {\n        inlineScroll = alignNearest(_left, right, _width, borderLeft, borderRight + scrollbarWidth, targetInline, targetInline + targetWidth, targetWidth);\n      }\n      var scrollLeft = frame.scrollLeft, scrollTop = frame.scrollTop;\n      blockScroll = Math.max(0, Math.min(scrollTop + blockScroll, frame.scrollHeight - _height + scrollbarHeight));\n      inlineScroll = Math.max(0, Math.min(scrollLeft + inlineScroll, frame.scrollWidth - _width + scrollbarWidth));\n      targetBlock += scrollTop - blockScroll;\n      targetInline += scrollLeft - inlineScroll;\n    }\n    computations.push({\n      el: frame,\n      top: blockScroll,\n      left: inlineScroll\n    });\n  }\n  return computations;\n};\nfunction isOptionsObject(options) {\n  return options === Object(options) && Object.keys(options).length !== 0;\n}\nfunction defaultBehavior(actions, behavior) {\n  if (behavior === void 0) {\n    behavior = \"auto\";\n  }\n  var canSmoothScroll = \"scrollBehavior\" in document.body.style;\n  actions.forEach(function(_ref2) {\n    var el = _ref2.el, top = _ref2.top, left = _ref2.left;\n    if (el.scroll && canSmoothScroll) {\n      el.scroll({\n        top,\n        left,\n        behavior\n      });\n    } else {\n      el.scrollTop = top;\n      el.scrollLeft = left;\n    }\n  });\n}\nfunction getOptions(options) {\n  if (options === false) {\n    return {\n      block: \"end\",\n      inline: \"nearest\"\n    };\n  }\n  if (isOptionsObject(options)) {\n    return options;\n  }\n  return {\n    block: \"start\",\n    inline: \"nearest\"\n  };\n}\nfunction scrollIntoView(target2, options) {\n  var targetIsDetached = !target2.ownerDocument.documentElement.contains(target2);\n  if (isOptionsObject(options) && typeof options.behavior === \"function\") {\n    return options.behavior(targetIsDetached ? [] : compute(target2, options));\n  }\n  if (targetIsDetached) {\n    return;\n  }\n  var computeOptions = getOptions(options);\n  return defaultBehavior(compute(target2, computeOptions), computeOptions.behavior);\n}\nfunction pick(obj, keys) {\n  var clone = {};\n  keys.forEach(function(key) {\n    var k = key;\n    if (key in obj) {\n      clone[k] = obj[k];\n    }\n  });\n  return clone;\n}\nvar NOOP = function() {\n};\nfunction pickTriggerPropsFromRest(rest) {\n  return pick(rest, [\n    \"onMouseEnter\",\n    \"onMouseLeave\",\n    \"onMouseMove\",\n    \"onContextMenu\",\n    \"onClick\",\n    \"onFocus\",\n    \"onBlur\",\n    \"tabIndex\"\n  ]);\n}\nvar isServerRendering = function() {\n  try {\n    return !(typeof window !== \"undefined\" && document !== void 0);\n  } catch (e) {\n    return true;\n  }\n}();\nvar on = function() {\n  if (isServerRendering) {\n    return NOOP;\n  }\n  return function(element, event, handler, options) {\n    element && element.addEventListener(event, handler, options || false);\n  };\n}();\nvar off = function() {\n  if (isServerRendering) {\n    return NOOP;\n  }\n  return function(element, event, handler, options) {\n    element && element.removeEventListener(event, handler, options || false);\n  };\n}();\nvar contains = function(root2, ele) {\n  var node = ele;\n  while (node) {\n    if (node === root2) {\n      return true;\n    }\n    node = node.parentNode;\n  }\n  return false;\n};\nfunction useIsFirstRender() {\n  var isFirst = react.exports.useRef(true);\n  react.exports.useEffect(function() {\n    isFirst.current = false;\n  }, []);\n  return isFirst.current;\n}\nvar target = typeof window === \"undefined\" ? global : window;\nvar vendors = [\"webkit\", \"ms\", \"moz\", \"o\"];\nvar raf = target.requestAnimationFrame;\nvar caf = target.cancelAnimationFrame;\nif (!raf || !caf) {\n  vendors.some(function(prefix) {\n    raf = target[prefix + \"RequestAnimationFrame\"];\n    caf = target[prefix + \"CancelAnimationFrame\"] || target[prefix + \"CancelRequestAnimationFrame\"];\n    return raf && caf;\n  });\n  if (!raf || !caf) {\n    var lastTime_1 = 0;\n    raf = function(cb2) {\n      var currentTime = Date.now();\n      var diff = Math.max(0, 16 - (currentTime - lastTime_1));\n      var timer = setTimeout(function() {\n        cb2();\n        lastTime_1 = currentTime + diff;\n      }, diff);\n      return timer;\n    };\n    caf = function(timer) {\n      clearTimeout(timer);\n    };\n  }\n}\nraf = raf.bind(target);\ncaf = caf.bind(target);\nvar __read$P = globalThis && globalThis.__read || function(o, n2) {\n  var m2 = typeof Symbol === \"function\" && o[Symbol.iterator];\n  if (!m2)\n    return o;\n  var i = m2.call(o), r2, ar = [], e;\n  try {\n    while ((n2 === void 0 || n2-- > 0) && !(r2 = i.next()).done)\n      ar.push(r2.value);\n  } catch (error) {\n    e = { error };\n  } finally {\n    try {\n      if (r2 && !r2.done && (m2 = i[\"return\"]))\n        m2.call(i);\n    } finally {\n      if (e)\n        throw e.error;\n    }\n  }\n  return ar;\n};\nvar __spreadArray$c = globalThis && globalThis.__spreadArray || function(to, from, pack) {\n  if (pack || arguments.length === 2)\n    for (var i = 0, l2 = from.length, ar; i < l2; i++) {\n      if (ar || !(i in from)) {\n        if (!ar)\n          ar = Array.prototype.slice.call(from, 0, i);\n        ar[i] = from[i];\n      }\n    }\n  return to.concat(ar || Array.prototype.slice.call(from));\n};\nfunction throttleByRaf(cb2) {\n  var timer = null;\n  var throttle2 = function() {\n    var args = [];\n    for (var _i = 0; _i < arguments.length; _i++) {\n      args[_i] = arguments[_i];\n    }\n    timer && caf(timer);\n    timer = raf(function() {\n      cb2.apply(void 0, __spreadArray$c([], __read$P(args), false));\n      timer = null;\n    });\n  };\n  throttle2.cancel = function() {\n    caf(timer);\n    timer = null;\n  };\n  return throttle2;\n}\nvar MapShim = function() {\n  if (typeof Map !== \"undefined\") {\n    return Map;\n  }\n  function getIndex(arr, key) {\n    var result = -1;\n    arr.some(function(entry, index2) {\n      if (entry[0] === key) {\n        result = index2;\n        return true;\n      }\n      return false;\n    });\n    return result;\n  }\n  return function() {\n    function class_1() {\n      this.__entries__ = [];\n    }\n    Object.defineProperty(class_1.prototype, \"size\", {\n      get: function() {\n        return this.__entries__.length;\n      },\n      enumerable: true,\n      configurable: true\n    });\n    class_1.prototype.get = function(key) {\n      var index2 = getIndex(this.__entries__, key);\n      var entry = this.__entries__[index2];\n      return entry && entry[1];\n    };\n    class_1.prototype.set = function(key, value) {\n      var index2 = getIndex(this.__entries__, key);\n      if (~index2) {\n        this.__entries__[index2][1] = value;\n      } else {\n        this.__entries__.push([key, value]);\n      }\n    };\n    class_1.prototype.delete = function(key) {\n      var entries = this.__entries__;\n      var index2 = getIndex(entries, key);\n      if (~index2) {\n        entries.splice(index2, 1);\n      }\n    };\n    class_1.prototype.has = function(key) {\n      return !!~getIndex(this.__entries__, key);\n    };\n    class_1.prototype.clear = function() {\n      this.__entries__.splice(0);\n    };\n    class_1.prototype.forEach = function(callback, ctx) {\n      if (ctx === void 0) {\n        ctx = null;\n      }\n      for (var _i = 0, _a = this.__entries__; _i < _a.length; _i++) {\n        var entry = _a[_i];\n        callback.call(ctx, entry[1], entry[0]);\n      }\n    };\n    return class_1;\n  }();\n}();\nvar isBrowser = typeof window !== \"undefined\" && typeof document !== \"undefined\" && window.document === document;\nvar global$1 = function() {\n  if (typeof global !== \"undefined\" && global.Math === Math) {\n    return global;\n  }\n  if (typeof self !== \"undefined\" && self.Math === Math) {\n    return self;\n  }\n  if (typeof window !== \"undefined\" && window.Math === Math) {\n    return window;\n  }\n  return Function(\"return this\")();\n}();\nvar requestAnimationFrame$1 = function() {\n  if (typeof requestAnimationFrame === \"function\") {\n    return requestAnimationFrame.bind(global$1);\n  }\n  return function(callback) {\n    return setTimeout(function() {\n      return callback(Date.now());\n    }, 1e3 / 60);\n  };\n}();\nvar trailingTimeout = 2;\nfunction throttle(callback, delay) {\n  var leadingCall = false, trailingCall = false, lastCallTime = 0;\n  function resolvePending() {\n    if (leadingCall) {\n      leadingCall = false;\n      callback();\n    }\n    if (trailingCall) {\n      proxy();\n    }\n  }\n  function timeoutCallback() {\n    requestAnimationFrame$1(resolvePending);\n  }\n  function proxy() {\n    var timeStamp = Date.now();\n    if (leadingCall) {\n      if (timeStamp - lastCallTime < trailingTimeout) {\n        return;\n      }\n      trailingCall = true;\n    } else {\n      leadingCall = true;\n      trailingCall = false;\n      setTimeout(timeoutCallback, delay);\n    }\n    lastCallTime = timeStamp;\n  }\n  return proxy;\n}\nvar REFRESH_DELAY = 20;\nvar transitionKeys = [\"top\", \"right\", \"bottom\", \"left\", \"width\", \"height\", \"size\", \"weight\"];\nvar mutationObserverSupported = typeof MutationObserver !== \"undefined\";\nvar ResizeObserverController = function() {\n  function ResizeObserverController2() {\n    this.connected_ = false;\n    this.mutationEventsAdded_ = false;\n    this.mutationsObserver_ = null;\n    this.observers_ = [];\n    this.onTransitionEnd_ = this.onTransitionEnd_.bind(this);\n    this.refresh = throttle(this.refresh.bind(this), REFRESH_DELAY);\n  }\n  ResizeObserverController2.prototype.addObserver = function(observer) {\n    if (!~this.observers_.indexOf(observer)) {\n      this.observers_.push(observer);\n    }\n    if (!this.connected_) {\n      this.connect_();\n    }\n  };\n  ResizeObserverController2.prototype.removeObserver = function(observer) {\n    var observers2 = this.observers_;\n    var index2 = observers2.indexOf(observer);\n    if (~index2) {\n      observers2.splice(index2, 1);\n    }\n    if (!observers2.length && this.connected_) {\n      this.disconnect_();\n    }\n  };\n  ResizeObserverController2.prototype.refresh = function() {\n    var changesDetected = this.updateObservers_();\n    if (changesDetected) {\n      this.refresh();\n    }\n  };\n  ResizeObserverController2.prototype.updateObservers_ = function() {\n    var activeObservers = this.observers_.filter(function(observer) {\n      return observer.gatherActive(), observer.hasActive();\n    });\n    activeObservers.forEach(function(observer) {\n      return observer.broadcastActive();\n    });\n    return activeObservers.length > 0;\n  };\n  ResizeObserverController2.prototype.connect_ = function() {\n    if (!isBrowser || this.connected_) {\n      return;\n    }\n    document.addEventListener(\"transitionend\", this.onTransitionEnd_);\n    window.addEventListener(\"resize\", this.refresh);\n    if (mutationObserverSupported) {\n      this.mutationsObserver_ = new MutationObserver(this.refresh);\n      this.mutationsObserver_.observe(document, {\n        attributes: true,\n        childList: true,\n        characterData: true,\n        subtree: true\n      });\n    } else {\n      document.addEventListener(\"DOMSubtreeModified\", this.refresh);\n      this.mutationEventsAdded_ = true;\n    }\n    this.connected_ = true;\n  };\n  ResizeObserverController2.prototype.disconnect_ = function() {\n    if (!isBrowser || !this.connected_) {\n      return;\n    }\n    document.removeEventListener(\"transitionend\", this.onTransitionEnd_);\n    window.removeEventListener(\"resize\", this.refresh);\n    if (this.mutationsObserver_) {\n      this.mutationsObserver_.disconnect();\n    }\n    if (this.mutationEventsAdded_) {\n      document.removeEventListener(\"DOMSubtreeModified\", this.refresh);\n    }\n    this.mutationsObserver_ = null;\n    this.mutationEventsAdded_ = false;\n    this.connected_ = false;\n  };\n  ResizeObserverController2.prototype.onTransitionEnd_ = function(_a) {\n    var _b = _a.propertyName, propertyName = _b === void 0 ? \"\" : _b;\n    var isReflowProperty = transitionKeys.some(function(key) {\n      return !!~propertyName.indexOf(key);\n    });\n    if (isReflowProperty) {\n      this.refresh();\n    }\n  };\n  ResizeObserverController2.getInstance = function() {\n    if (!this.instance_) {\n      this.instance_ = new ResizeObserverController2();\n    }\n    return this.instance_;\n  };\n  ResizeObserverController2.instance_ = null;\n  return ResizeObserverController2;\n}();\nvar defineConfigurable = function(target2, props) {\n  for (var _i = 0, _a = Object.keys(props); _i < _a.length; _i++) {\n    var key = _a[_i];\n    Object.defineProperty(target2, key, {\n      value: props[key],\n      enumerable: false,\n      writable: false,\n      configurable: true\n    });\n  }\n  return target2;\n};\nvar getWindowOf = function(target2) {\n  var ownerGlobal = target2 && target2.ownerDocument && target2.ownerDocument.defaultView;\n  return ownerGlobal || global$1;\n};\nvar emptyRect = createRectInit(0, 0, 0, 0);\nfunction toFloat(value) {\n  return parseFloat(value) || 0;\n}\nfunction getBordersSize(styles) {\n  var positions = [];\n  for (var _i = 1; _i < arguments.length; _i++) {\n    positions[_i - 1] = arguments[_i];\n  }\n  return positions.reduce(function(size, position) {\n    var value = styles[\"border-\" + position + \"-width\"];\n    return size + toFloat(value);\n  }, 0);\n}\nfunction getPaddings(styles) {\n  var positions = [\"top\", \"right\", \"bottom\", \"left\"];\n  var paddings = {};\n  for (var _i = 0, positions_1 = positions; _i < positions_1.length; _i++) {\n    var position = positions_1[_i];\n    var value = styles[\"padding-\" + position];\n    paddings[position] = toFloat(value);\n  }\n  return paddings;\n}\nfunction getSVGContentRect(target2) {\n  var bbox = target2.getBBox();\n  return createRectInit(0, 0, bbox.width, bbox.height);\n}\nfunction getHTMLElementContentRect(target2) {\n  var clientWidth = target2.clientWidth, clientHeight = target2.clientHeight;\n  if (!clientWidth && !clientHeight) {\n    return emptyRect;\n  }\n  var styles = getWindowOf(target2).getComputedStyle(target2);\n  var paddings = getPaddings(styles);\n  var horizPad = paddings.left + paddings.right;\n  var vertPad = paddings.top + paddings.bottom;\n  var width = toFloat(styles.width), height = toFloat(styles.height);\n  if (styles.boxSizing === \"border-box\") {\n    if (Math.round(width + horizPad) !== clientWidth) {\n      width -= getBordersSize(styles, \"left\", \"right\") + horizPad;\n    }\n    if (Math.round(height + vertPad) !== clientHeight) {\n      height -= getBordersSize(styles, \"top\", \"bottom\") + vertPad;\n    }\n  }\n  if (!isDocumentElement(target2)) {\n    var vertScrollbar = Math.round(width + horizPad) - clientWidth;\n    var horizScrollbar = Math.round(height + vertPad) - clientHeight;\n    if (Math.abs(vertScrollbar) !== 1) {\n      width -= vertScrollbar;\n    }\n    if (Math.abs(horizScrollbar) !== 1) {\n      height -= horizScrollbar;\n    }\n  }\n  return createRectInit(paddings.left, paddings.top, width, height);\n}\nvar isSVGGraphicsElement = function() {\n  if (typeof SVGGraphicsElement !== \"undefined\") {\n    return function(target2) {\n      return target2 instanceof getWindowOf(target2).SVGGraphicsElement;\n    };\n  }\n  return function(target2) {\n    return target2 instanceof getWindowOf(target2).SVGElement && typeof target2.getBBox === \"function\";\n  };\n}();\nfunction isDocumentElement(target2) {\n  return target2 === getWindowOf(target2).document.documentElement;\n}\nfunction getContentRect(target2) {\n  if (!isBrowser) {\n    return emptyRect;\n  }\n  if (isSVGGraphicsElement(target2)) {\n    return getSVGContentRect(target2);\n  }\n  return getHTMLElementContentRect(target2);\n}\nfunction createReadOnlyRect(_a) {\n  var x2 = _a.x, y2 = _a.y, width = _a.width, height = _a.height;\n  var Constr = typeof DOMRectReadOnly !== \"undefined\" ? DOMRectReadOnly : Object;\n  var rect = Object.create(Constr.prototype);\n  defineConfigurable(rect, {\n    x: x2,\n    y: y2,\n    width,\n    height,\n    top: y2,\n    right: x2 + width,\n    bottom: height + y2,\n    left: x2\n  });\n  return rect;\n}\nfunction createRectInit(x2, y2, width, height) {\n  return { x: x2, y: y2, width, height };\n}\nvar ResizeObservation = function() {\n  function ResizeObservation2(target2) {\n    this.broadcastWidth = 0;\n    this.broadcastHeight = 0;\n    this.contentRect_ = createRectInit(0, 0, 0, 0);\n    this.target = target2;\n  }\n  ResizeObservation2.prototype.isActive = function() {\n    var rect = getContentRect(this.target);\n    this.contentRect_ = rect;\n    return rect.width !== this.broadcastWidth || rect.height !== this.broadcastHeight;\n  };\n  ResizeObservation2.prototype.broadcastRect = function() {\n    var rect = this.contentRect_;\n    this.broadcastWidth = rect.width;\n    this.broadcastHeight = rect.height;\n    return rect;\n  };\n  return ResizeObservation2;\n}();\nvar ResizeObserverEntry = function() {\n  function ResizeObserverEntry2(target2, rectInit) {\n    var contentRect = createReadOnlyRect(rectInit);\n    defineConfigurable(this, { target: target2, contentRect });\n  }\n  return ResizeObserverEntry2;\n}();\nvar ResizeObserverSPI = function() {\n  function ResizeObserverSPI2(callback, controller, callbackCtx) {\n    this.activeObservations_ = [];\n    this.observations_ = new MapShim();\n    if (typeof callback !== \"function\") {\n      throw new TypeError(\"The callback provided as parameter 1 is not a function.\");\n    }\n    this.callback_ = callback;\n    this.controller_ = controller;\n    this.callbackCtx_ = callbackCtx;\n  }\n  ResizeObserverSPI2.prototype.observe = function(target2) {\n    if (!arguments.length) {\n      throw new TypeError(\"1 argument required, but only 0 present.\");\n    }\n    if (typeof Element === \"undefined\" || !(Element instanceof Object)) {\n      return;\n    }\n    if (!(target2 instanceof getWindowOf(target2).Element)) {\n      throw new TypeError('parameter 1 is not of type \"Element\".');\n    }\n    var observations = this.observations_;\n    if (observations.has(target2)) {\n      return;\n    }\n    observations.set(target2, new ResizeObservation(target2));\n    this.controller_.addObserver(this);\n    this.controller_.refresh();\n  };\n  ResizeObserverSPI2.prototype.unobserve = function(target2) {\n    if (!arguments.length) {\n      throw new TypeError(\"1 argument required, but only 0 present.\");\n    }\n    if (typeof Element === \"undefined\" || !(Element instanceof Object)) {\n      return;\n    }\n    if (!(target2 instanceof getWindowOf(target2).Element)) {\n      throw new TypeError('parameter 1 is not of type \"Element\".');\n    }\n    var observations = this.observations_;\n    if (!observations.has(target2)) {\n      return;\n    }\n    observations.delete(target2);\n    if (!observations.size) {\n      this.controller_.removeObserver(this);\n    }\n  };\n  ResizeObserverSPI2.prototype.disconnect = function() {\n    this.clearActive();\n    this.observations_.clear();\n    this.controller_.removeObserver(this);\n  };\n  ResizeObserverSPI2.prototype.gatherActive = function() {\n    var _this = this;\n    this.clearActive();\n    this.observations_.forEach(function(observation) {\n      if (observation.isActive()) {\n        _this.activeObservations_.push(observation);\n      }\n    });\n  };\n  ResizeObserverSPI2.prototype.broadcastActive = function() {\n    if (!this.hasActive()) {\n      return;\n    }\n    var ctx = this.callbackCtx_;\n    var entries = this.activeObservations_.map(function(observation) {\n      return new ResizeObserverEntry(observation.target, observation.broadcastRect());\n    });\n    this.callback_.call(ctx, entries, ctx);\n    this.clearActive();\n  };\n  ResizeObserverSPI2.prototype.clearActive = function() {\n    this.activeObservations_.splice(0);\n  };\n  ResizeObserverSPI2.prototype.hasActive = function() {\n    return this.activeObservations_.length > 0;\n  };\n  return ResizeObserverSPI2;\n}();\nvar observers = typeof WeakMap !== \"undefined\" ? new WeakMap() : new MapShim();\nvar ResizeObserver$1 = function() {\n  function ResizeObserver2(callback) {\n    if (!(this instanceof ResizeObserver2)) {\n      throw new TypeError(\"Cannot call a class as a function.\");\n    }\n    if (!arguments.length) {\n      throw new TypeError(\"1 argument required, but only 0 present.\");\n    }\n    var controller = ResizeObserverController.getInstance();\n    var observer = new ResizeObserverSPI(callback, controller, this);\n    observers.set(this, observer);\n  }\n  return ResizeObserver2;\n}();\n[\n  \"observe\",\n  \"unobserve\",\n  \"disconnect\"\n].forEach(function(method) {\n  ResizeObserver$1.prototype[method] = function() {\n    var _a;\n    return (_a = observers.get(this))[method].apply(_a, arguments);\n  };\n});\nvar index$f = function() {\n  if (typeof global$1.ResizeObserver !== \"undefined\") {\n    return global$1.ResizeObserver;\n  }\n  return ResizeObserver$1;\n}();\nvar __extends$3 = globalThis && globalThis.__extends || function() {\n  var extendStatics = function(d, b) {\n    extendStatics = Object.setPrototypeOf || { __proto__: [] } instanceof Array && function(d2, b2) {\n      d2.__proto__ = b2;\n    } || function(d2, b2) {\n      for (var p2 in b2)\n        if (Object.prototype.hasOwnProperty.call(b2, p2))\n          d2[p2] = b2[p2];\n    };\n    return extendStatics(d, b);\n  };\n  return function(d, b) {\n    if (typeof b !== \"function\" && b !== null)\n      throw new TypeError(\"Class extends value \" + String(b) + \" is not a constructor or null\");\n    extendStatics(d, b);\n    function __() {\n      this.constructor = d;\n    }\n    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n  };\n}();\nvar ResizeObserverComponent = function(_super) {\n  __extends$3(ResizeObserverComponent2, _super);\n  function ResizeObserverComponent2() {\n    var _this = _super !== null && _super.apply(this, arguments) || this;\n    _this.componentWillUnmount = function() {\n      if (_this.resizeObserver) {\n        _this.destroyResizeObserver();\n      }\n    };\n    _this.createResizeObserver = function() {\n      _this.resizeObserver = new index$f(function(entry) {\n        var onResize = _this.props.onResize;\n        onResize && onResize(entry);\n      });\n      _this.resizeObserver.observe(reactDom.exports.findDOMNode(_this));\n    };\n    _this.destroyResizeObserver = function() {\n      _this.resizeObserver && _this.resizeObserver.disconnect();\n      _this.resizeObserver = null;\n    };\n    return _this;\n  }\n  ResizeObserverComponent2.prototype.componentDidMount = function() {\n    this.createResizeObserver();\n  };\n  ResizeObserverComponent2.prototype.componentDidUpdate = function() {\n    if (!this.resizeObserver && reactDom.exports.findDOMNode(this)) {\n      this.createResizeObserver();\n    }\n  };\n  ResizeObserverComponent2.prototype.render = function() {\n    return this.props.children;\n  };\n  return ResizeObserverComponent2;\n}(React.Component);\nvar ResizeObserver = ResizeObserverComponent;\nvar useIsomorphicLayoutEffect = isServerRendering ? react.exports.useEffect : react.exports.useLayoutEffect;\nvar useIsomorphicLayoutEffect$1 = useIsomorphicLayoutEffect;\nvar __read$O = globalThis && globalThis.__read || function(o, n2) {\n  var m2 = typeof Symbol === \"function\" && o[Symbol.iterator];\n  if (!m2)\n    return o;\n  var i = m2.call(o), r2, ar = [], e;\n  try {\n    while ((n2 === void 0 || n2-- > 0) && !(r2 = i.next()).done)\n      ar.push(r2.value);\n  } catch (error) {\n    e = { error };\n  } finally {\n    try {\n      if (r2 && !r2.done && (m2 = i[\"return\"]))\n        m2.call(i);\n    } finally {\n      if (e)\n        throw e.error;\n    }\n  }\n  return ar;\n};\nfunction useStateWithPromise(defaultVal) {\n  var _a = __read$O(react.exports.useState({\n    value: defaultVal,\n    resolve: function(e) {\n    }\n  }), 2), state = _a[0], setState = _a[1];\n  react.exports.useEffect(function() {\n    state.resolve(state.value);\n  }, [state]);\n  return [\n    state.value,\n    function(updater) {\n      return new Promise(function(resolve) {\n        setState(function(prevState) {\n          var nextVal = updater;\n          if (typeof updater === \"function\") {\n            nextVal = updater(prevState.value);\n          }\n          return {\n            value: nextVal,\n            resolve\n          };\n        });\n      });\n    }\n  ];\n}\nfunction Group$5(props, ref) {\n  var className = props.className, style = props.style, children = props.children;\n  var getPrefixCls = react.exports.useContext(ConfigContext).getPrefixCls;\n  var prefixCls2 = getPrefixCls(\"btn-group\");\n  var classNames = cs$1(prefixCls2, className);\n  return React.createElement(\"div\", { ref, className: classNames, style }, children);\n}\nvar GroupComponent = React.forwardRef(Group$5);\nGroupComponent.displayName = \"ButtonGroup\";\nvar Group$6 = GroupComponent;\nvar __assign$O = globalThis && globalThis.__assign || function() {\n  __assign$O = Object.assign || function(t2) {\n    for (var s, i = 1, n2 = arguments.length; i < n2; i++) {\n      s = arguments[i];\n      for (var p2 in s)\n        if (Object.prototype.hasOwnProperty.call(s, p2))\n          t2[p2] = s[p2];\n    }\n    return t2;\n  };\n  return __assign$O.apply(this, arguments);\n};\nvar __rest$q = globalThis && globalThis.__rest || function(s, e) {\n  var t2 = {};\n  for (var p2 in s)\n    if (Object.prototype.hasOwnProperty.call(s, p2) && e.indexOf(p2) < 0)\n      t2[p2] = s[p2];\n  if (s != null && typeof Object.getOwnPropertySymbols === \"function\")\n    for (var i = 0, p2 = Object.getOwnPropertySymbols(s); i < p2.length; i++) {\n      if (e.indexOf(p2[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p2[i]))\n        t2[p2[i]] = s[p2[i]];\n    }\n  return t2;\n};\nvar __read$N = globalThis && globalThis.__read || function(o, n2) {\n  var m2 = typeof Symbol === \"function\" && o[Symbol.iterator];\n  if (!m2)\n    return o;\n  var i = m2.call(o), r2, ar = [], e;\n  try {\n    while ((n2 === void 0 || n2-- > 0) && !(r2 = i.next()).done)\n      ar.push(r2.value);\n  } catch (error) {\n    e = { error };\n  } finally {\n    try {\n      if (r2 && !r2.done && (m2 = i[\"return\"]))\n        m2.call(i);\n    } finally {\n      if (e)\n        throw e.error;\n    }\n  }\n  return ar;\n};\nvar regexTwoCNChar = /^[\\u4e00-\\u9fa5]{2}$/;\nfunction processChildren(children) {\n  var childrenList = [];\n  var isPrevChildPure = false;\n  React.Children.forEach(children, function(child) {\n    var isCurrentChildPure = typeof child === \"string\" || typeof child === \"number\";\n    if (isCurrentChildPure && isPrevChildPure) {\n      var lastIndex = childrenList.length - 1;\n      var lastChild = childrenList[lastIndex];\n      childrenList[lastIndex] = \"\" + lastChild + child;\n    } else {\n      childrenList.push(child);\n    }\n    isPrevChildPure = isCurrentChildPure;\n  });\n  return React.Children.map(childrenList, function(child) {\n    return typeof child === \"string\" ? React.createElement(\"span\", null, child) : child;\n  });\n}\nvar defaultProps$h = {\n  htmlType: \"button\",\n  type: \"default\",\n  shape: \"square\"\n};\nfunction Button(baseProps, ref) {\n  var _a;\n  var _b = react.exports.useContext(ConfigContext), getPrefixCls = _b.getPrefixCls, ctxSize = _b.size, autoInsertSpaceInButton = _b.autoInsertSpaceInButton, componentConfig2 = _b.componentConfig;\n  var props = useMergeProps(baseProps, defaultProps$h, componentConfig2 === null || componentConfig2 === void 0 ? void 0 : componentConfig2.Button);\n  var style = props.style, className = props.className, children = props.children, htmlType = props.htmlType, type = props.type, status = props.status, size = props.size, shape = props.shape, href = props.href, anchorProps = props.anchorProps, disabled = props.disabled, loading = props.loading, loadingFixedWidth = props.loadingFixedWidth, icon2 = props.icon, iconOnly = props.iconOnly, onClick = props.onClick, long = props.long, rest = __rest$q(props, [\"style\", \"className\", \"children\", \"htmlType\", \"type\", \"status\", \"size\", \"shape\", \"href\", \"anchorProps\", \"disabled\", \"loading\", \"loadingFixedWidth\", \"icon\", \"iconOnly\", \"onClick\", \"long\"]);\n  var iconNode = loading ? React.createElement(IconLoading$1, null) : icon2;\n  var _c = __read$N(react.exports.useState(false), 2), isTwoCNChar = _c[0], setIsTwoCNChar = _c[1];\n  var buttonRef = ref || react.exports.createRef();\n  react.exports.useEffect(function() {\n    if (autoInsertSpaceInButton && buttonRef && buttonRef.current) {\n      var textContent = buttonRef.current.textContent;\n      if (regexTwoCNChar.test(textContent)) {\n        if (!isTwoCNChar) {\n          setIsTwoCNChar(true);\n        }\n      } else if (isTwoCNChar) {\n        setIsTwoCNChar(false);\n      }\n    }\n  }, [buttonRef, autoInsertSpaceInButton]);\n  var prefixCls2 = getPrefixCls(\"btn\");\n  var _type = type === \"default\" ? \"secondary\" : type;\n  var classNames = cs$1(prefixCls2, prefixCls2 + \"-\" + _type, prefixCls2 + \"-size-\" + (size || ctxSize), prefixCls2 + \"-shape-\" + shape, (_a = {}, _a[prefixCls2 + \"-long\"] = long, _a[prefixCls2 + \"-status-\" + status] = status, _a[prefixCls2 + \"-loading-fixed-width\"] = loadingFixedWidth, _a[prefixCls2 + \"-loading\"] = loading, _a[prefixCls2 + \"-link\"] = href, _a[prefixCls2 + \"-icon-only\"] = iconOnly || !children && children !== 0 && iconNode, _a[prefixCls2 + \"-disabled\"] = disabled, _a[prefixCls2 + \"-two-chinese-chars\"] = isTwoCNChar, _a), className);\n  var handleClick = function(event) {\n    if (loading) {\n      typeof (event === null || event === void 0 ? void 0 : event.preventDefault) === \"function\" && event.preventDefault();\n      return;\n    }\n    onClick && onClick(event);\n  };\n  var InnerContent = React.createElement(React.Fragment, null, iconNode, processChildren(children));\n  if (href) {\n    var _anchorProps = __assign$O({}, anchorProps);\n    if (disabled) {\n      delete _anchorProps.href;\n    } else {\n      _anchorProps.href = href;\n    }\n    return React.createElement(\"a\", __assign$O({ ref: buttonRef }, rest, _anchorProps, { style, className: classNames, onClick: handleClick }), InnerContent);\n  }\n  return React.createElement(\"button\", __assign$O({ ref: buttonRef }, rest, { style, className: classNames, type: htmlType, disabled, onClick: handleClick }), InnerContent);\n}\nvar ForwardRefButton = react.exports.forwardRef(Button);\nvar ButtonComponent = ForwardRefButton;\nButtonComponent.__BYTE_BUTTON = true;\nButtonComponent.Group = Group$6;\nButtonComponent.displayName = \"Button\";\nvar Button$1 = ButtonComponent;\nfunction ownKeys$o(object, enumerableOnly) {\n  var keys = Object.keys(object);\n  if (Object.getOwnPropertySymbols) {\n    var symbols = Object.getOwnPropertySymbols(object);\n    if (enumerableOnly) {\n      symbols = symbols.filter(function(sym) {\n        return Object.getOwnPropertyDescriptor(object, sym).enumerable;\n      });\n    }\n    keys.push.apply(keys, symbols);\n  }\n  return keys;\n}\nfunction _objectSpread$o(target2) {\n  for (var i = 1; i < arguments.length; i++) {\n    var source2 = arguments[i] != null ? arguments[i] : {};\n    if (i % 2) {\n      ownKeys$o(Object(source2), true).forEach(function(key) {\n        _defineProperty(target2, key, source2[key]);\n      });\n    } else if (Object.getOwnPropertyDescriptors) {\n      Object.defineProperties(target2, Object.getOwnPropertyDescriptors(source2));\n    } else {\n      ownKeys$o(Object(source2)).forEach(function(key) {\n        Object.defineProperty(target2, key, Object.getOwnPropertyDescriptor(source2, key));\n      });\n    }\n  }\n  return target2;\n}\nfunction IconSearchComponent(iconProps, ref) {\n  var _useContext = react.exports.useContext(IconContext), prefixCls2 = _useContext.prefixCls;\n  var spin = iconProps.spin, className = iconProps.className;\n  var props = _objectSpread$o(_objectSpread$o({\n    ref\n  }, iconProps), {}, {\n    className: \"\".concat(className ? className + \" \" : \"\").concat(prefixCls2, \"-icon \").concat(prefixCls2, \"-icon-search\")\n  });\n  if (spin) {\n    props.className = \"\".concat(props.className, \" \").concat(prefixCls2, \"-icon-loading\");\n  }\n  delete props.spin;\n  delete props.isIcon;\n  return /* @__PURE__ */ React.createElement(\"svg\", _extends({\n    fill: \"none\",\n    stroke: \"currentColor\",\n    strokeWidth: \"4\",\n    viewBox: \"0 0 48 48\",\n    width: \"1em\",\n    height: \"1em\"\n  }, props), /* @__PURE__ */ React.createElement(\"path\", {\n    d: \"M33.072 33.071c6.248-6.248 6.248-16.379 0-22.627-6.249-6.249-16.38-6.249-22.628 0-6.248 6.248-6.248 16.379 0 22.627 6.248 6.248 16.38 6.248 22.628 0Zm0 0 8.485 8.485\"\n  }));\n}\nvar IconSearch = /* @__PURE__ */ React.forwardRef(IconSearchComponent);\nIconSearch.defaultProps = {\n  isIcon: true\n};\nIconSearch.displayName = \"IconSearch\";\nvar IconSearch$1 = IconSearch;\nvar __read$M = globalThis && globalThis.__read || function(o, n2) {\n  var m2 = typeof Symbol === \"function\" && o[Symbol.iterator];\n  if (!m2)\n    return o;\n  var i = m2.call(o), r2, ar = [], e;\n  try {\n    while ((n2 === void 0 || n2-- > 0) && !(r2 = i.next()).done)\n      ar.push(r2.value);\n  } catch (error) {\n    e = { error };\n  } finally {\n    try {\n      if (r2 && !r2.done && (m2 = i[\"return\"]))\n        m2.call(i);\n    } finally {\n      if (e)\n        throw e.error;\n    }\n  }\n  return ar;\n};\nfunction useMergeValue(defaultStateValue, props) {\n  var _a = props || {}, defaultValue = _a.defaultValue, value = _a.value;\n  var firstRenderRef = react.exports.useRef(true);\n  var _b = __read$M(react.exports.useState(!isUndefined$1(value) ? value : !isUndefined$1(defaultValue) ? defaultValue : defaultStateValue), 2), stateValue = _b[0], setStateValue = _b[1];\n  react.exports.useEffect(function() {\n    if (firstRenderRef.current) {\n      firstRenderRef.current = false;\n      return;\n    }\n    if (value === void 0) {\n      setStateValue(value);\n    }\n  }, [value]);\n  var mergedValue = isUndefined$1(value) ? stateValue : value;\n  return [mergedValue, setStateValue, stateValue];\n}\nvar __assign$N = globalThis && globalThis.__assign || function() {\n  __assign$N = Object.assign || function(t2) {\n    for (var s, i = 1, n2 = arguments.length; i < n2; i++) {\n      s = arguments[i];\n      for (var p2 in s)\n        if (Object.prototype.hasOwnProperty.call(s, p2))\n          t2[p2] = s[p2];\n    }\n    return t2;\n  };\n  return __assign$N.apply(this, arguments);\n};\nvar __rest$p = globalThis && globalThis.__rest || function(s, e) {\n  var t2 = {};\n  for (var p2 in s)\n    if (Object.prototype.hasOwnProperty.call(s, p2) && e.indexOf(p2) < 0)\n      t2[p2] = s[p2];\n  if (s != null && typeof Object.getOwnPropertySymbols === \"function\")\n    for (var i = 0, p2 = Object.getOwnPropertySymbols(s); i < p2.length; i++) {\n      if (e.indexOf(p2[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p2[i]))\n        t2[p2[i]] = s[p2[i]];\n    }\n  return t2;\n};\nvar __read$L = globalThis && globalThis.__read || function(o, n2) {\n  var m2 = typeof Symbol === \"function\" && o[Symbol.iterator];\n  if (!m2)\n    return o;\n  var i = m2.call(o), r2, ar = [], e;\n  try {\n    while ((n2 === void 0 || n2-- > 0) && !(r2 = i.next()).done)\n      ar.push(r2.value);\n  } catch (error) {\n    e = { error };\n  } finally {\n    try {\n      if (r2 && !r2.done && (m2 = i[\"return\"]))\n        m2.call(i);\n    } finally {\n      if (e)\n        throw e.error;\n    }\n  }\n  return ar;\n};\nvar Search = React.forwardRef(function(props, ref) {\n  var _a;\n  var getPrefixCls = react.exports.useContext(ConfigContext).getPrefixCls;\n  var _b = __read$L(useMergeValue(\"\", {\n    defaultValue: \"defaultValue\" in props ? formatValue$1(props.defaultValue, props.maxLength) : void 0,\n    value: \"value\" in props ? formatValue$1(props.value, props.maxLength) : void 0\n  }), 2), value = _b[0], setValue = _b[1];\n  var className = props.className, style = props.style, placeholder = props.placeholder, disabled = props.disabled, searchButton = props.searchButton, loading = props.loading, defaultValue = props.defaultValue, rest = __rest$p(props, [\"className\", \"style\", \"placeholder\", \"disabled\", \"searchButton\", \"loading\", \"defaultValue\"]);\n  var prefixCls2 = getPrefixCls(\"input-search\");\n  var classNames = cs$1(prefixCls2, (_a = {}, _a[prefixCls2 + \"-button\"] = searchButton, _a), className);\n  var onSearch = function(e) {\n    !disabled && props.onSearch && props.onSearch(value);\n    props.onPressEnter && props.onPressEnter(e);\n  };\n  return React.createElement(Input$1, __assign$N({}, omit(rest, [\"onSearch\"]), { disabled, className: classNames, style, ref, placeholder, addAfter: searchButton ? React.createElement(Button$1, { disabled, size: rest.size, className: prefixCls2 + \"-btn\", type: \"primary\", onClick: onSearch, loading, loadingFixedWidth: true, icon: searchButton === true && !loading && React.createElement(IconSearch$1, null) }, searchButton !== true && searchButton) : null, suffix: !searchButton && (loading ? React.createElement(IconLoading$1, null) : React.createElement(IconSearch$1, { onClick: onSearch })), onChange: function(value2, e) {\n    setValue(value2);\n    props.onChange && props.onChange(value2, e);\n  }, defaultValue, onPressEnter: onSearch }));\n});\nSearch.displayName = \"Search\";\nvar Search$1 = Search;\nvar Enter = {\n  key: \"Enter\",\n  code: 13\n};\nvar Esc = {\n  key: \"Escape\",\n  code: 27\n};\nvar Backspace = {\n  key: \"Backspace\",\n  code: 8\n};\nvar Tab = {\n  key: \"Tab\",\n  code: 9\n};\nvar ArrowUp = {\n  key: \"ArrowUp\",\n  code: 38\n};\nvar ArrowDown = {\n  key: \"ArrowDown\",\n  code: 40\n};\nvar mirrorTextAreaStyle = \"\\n  position: absolute;\\n  min-height: 0 !important;\\n  max-height: none;\\n  height:0;\\n  visibility: hidden;\\n  z-index: -100;\\n  top: 0;\\n  right: 0;\\n\";\nvar mirrorTextAreaSizing = [\n  \"border-width\",\n  \"box-sizing\",\n  \"font-family\",\n  \"font-weight\",\n  \"font-size\",\n  \"font-variant\",\n  \"letter-spacing\",\n  \"line-height\",\n  \"padding-top\",\n  \"padding-bottom\",\n  \"padding-left\",\n  \"padding-right\",\n  \"text-indent\",\n  \"text-rendering\",\n  \"text-transform\",\n  \"width\"\n];\nvar mirrorTextArea;\nfunction setMirrorTextArea(originTextArea) {\n  if (!mirrorTextArea) {\n    mirrorTextArea = document.createElement(\"textarea\");\n    document.body.appendChild(mirrorTextArea);\n  }\n  var originStyle = window.getComputedStyle(originTextArea);\n  var originSizingStyle = \"\\n    \" + mirrorTextAreaSizing.map(function(attr) {\n    return attr + \":\" + originStyle.getPropertyValue(attr);\n  }).join(\";\") + \"\\n  \";\n  mirrorTextArea.setAttribute(\"style\", \"\" + mirrorTextAreaStyle + originSizingStyle);\n  var paddingSize = parseFloat(originStyle.getPropertyValue(\"padding-top\")) + parseFloat(originStyle.getPropertyValue(\"padding-top\"));\n  var boxSizing = originStyle.getPropertyValue(\"box-sizing\");\n  var borderSize = parseFloat(originStyle.getPropertyValue(\"border-top-width\")) + parseFloat(originStyle.getPropertyValue(\"border-bottom-width\"));\n  return {\n    paddingSize,\n    boxSizing,\n    borderSize\n  };\n}\nfunction autoSizeTextAreaHeight(autoSize, node) {\n  var getRows = function() {\n    var minRows2;\n    var maxRows2;\n    if (isObject$6(autoSize)) {\n      minRows2 = autoSize.minRows;\n      maxRows2 = autoSize.maxRows;\n    }\n    return {\n      minRows: minRows2,\n      maxRows: maxRows2\n    };\n  };\n  if (autoSize) {\n    var _a = getRows(), minRows = _a.minRows, maxRows = _a.maxRows;\n    var originTextNode = node;\n    var _b = setMirrorTextArea(originTextNode), paddingSize = _b.paddingSize, boxSizing = _b.boxSizing, borderSize = _b.borderSize;\n    mirrorTextArea.value = originTextNode.value || originTextNode.placeholder || \"\";\n    var mirrorTextAreaHeight = mirrorTextArea.scrollHeight + borderSize;\n    var minHeight = void 0;\n    var maxHeight = void 0;\n    var overflowY = void 0;\n    if (minRows || maxRows) {\n      mirrorTextArea.value = \"\";\n      var singleRowHeight = mirrorTextArea.scrollHeight - paddingSize;\n      if (isNumber$1(minRows)) {\n        minHeight = singleRowHeight * minRows;\n        if (boxSizing === \"border-box\") {\n          minHeight += paddingSize;\n          minHeight += borderSize;\n        }\n        mirrorTextAreaHeight = Math.max(mirrorTextAreaHeight, minHeight);\n      }\n      if (isNumber$1(maxRows)) {\n        maxHeight = singleRowHeight * maxRows;\n        if (boxSizing === \"border-box\") {\n          maxHeight += paddingSize;\n          maxHeight += borderSize;\n        }\n        overflowY = mirrorTextAreaHeight > maxHeight ? \"auto\" : \"\";\n        maxHeight = Math.min(mirrorTextAreaHeight, maxHeight);\n      }\n    }\n    var textAreaStyle = {};\n    textAreaStyle.height = mirrorTextAreaHeight;\n    if (minHeight) {\n      textAreaStyle.minHeight = minHeight;\n    }\n    if (maxHeight) {\n      textAreaStyle.maxHeight = maxHeight;\n    }\n    if (overflowY) {\n      textAreaStyle.overflowY = overflowY;\n    }\n    return textAreaStyle;\n  }\n}\nvar __assign$M = globalThis && globalThis.__assign || function() {\n  __assign$M = Object.assign || function(t2) {\n    for (var s, i = 1, n2 = arguments.length; i < n2; i++) {\n      s = arguments[i];\n      for (var p2 in s)\n        if (Object.prototype.hasOwnProperty.call(s, p2))\n          t2[p2] = s[p2];\n    }\n    return t2;\n  };\n  return __assign$M.apply(this, arguments);\n};\nvar __rest$o = globalThis && globalThis.__rest || function(s, e) {\n  var t2 = {};\n  for (var p2 in s)\n    if (Object.prototype.hasOwnProperty.call(s, p2) && e.indexOf(p2) < 0)\n      t2[p2] = s[p2];\n  if (s != null && typeof Object.getOwnPropertySymbols === \"function\")\n    for (var i = 0, p2 = Object.getOwnPropertySymbols(s); i < p2.length; i++) {\n      if (e.indexOf(p2[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p2[i]))\n        t2[p2[i]] = s[p2[i]];\n    }\n  return t2;\n};\nvar __read$K = globalThis && globalThis.__read || function(o, n2) {\n  var m2 = typeof Symbol === \"function\" && o[Symbol.iterator];\n  if (!m2)\n    return o;\n  var i = m2.call(o), r2, ar = [], e;\n  try {\n    while ((n2 === void 0 || n2-- > 0) && !(r2 = i.next()).done)\n      ar.push(r2.value);\n  } catch (error) {\n    e = { error };\n  } finally {\n    try {\n      if (r2 && !r2.done && (m2 = i[\"return\"]))\n        m2.call(i);\n    } finally {\n      if (e)\n        throw e.error;\n    }\n  }\n  return ar;\n};\nvar TextArea = function(props, ref) {\n  var _a, _b, _c;\n  var className = props.className, style = props.style, wrapperStyle = props.wrapperStyle, placeholder = props.placeholder, disabled = props.disabled, error = props.error, maxLength = props.maxLength, showWordLimit = props.showWordLimit, allowClear = props.allowClear, onClear = props.onClear, rest = __rest$o(props, [\"className\", \"style\", \"wrapperStyle\", \"placeholder\", \"disabled\", \"error\", \"maxLength\", \"showWordLimit\", \"allowClear\", \"onClear\"]);\n  var trueMaxLength = isObject$6(maxLength) ? maxLength.length : maxLength;\n  var mergedMaxLength = isObject$6(maxLength) && maxLength.errorOnly ? void 0 : trueMaxLength;\n  var isComposition = react.exports.useRef(false);\n  var textareaRef = react.exports.useRef();\n  var _d = __read$K(react.exports.useState(\"\"), 2), compositionValue = _d[0], setCompositionValue = _d[1];\n  var _e = __read$K(react.exports.useState({}), 2), textAreaStyle = _e[0], setTextAreaStyle = _e[1];\n  var _f = __read$K(useMergeValue(\"\", {\n    defaultValue: \"defaultValue\" in props ? formatValue$1(props.defaultValue, mergedMaxLength) : void 0,\n    value: \"value\" in props ? formatValue$1(props.value, mergedMaxLength) : void 0\n  }), 2), value = _f[0], setValue = _f[1];\n  var getPrefixCls = react.exports.useContext(ConfigContext).getPrefixCls;\n  var prefixCls2 = getPrefixCls(\"textarea\");\n  if (disabled) {\n    textAreaStyle.resize = \"none\";\n  }\n  var handleChangeValue = function(value2, e) {\n    var onChange = props.onChange;\n    if (!(\"value\" in props)) {\n      setValue(value2);\n    }\n    onChange && onChange(value2, e);\n  };\n  var handleChange = function(e) {\n    var newValue = e.currentTarget.value;\n    if (!isComposition.current) {\n      if (mergedMaxLength) {\n        if (newValue.length <= trueMaxLength) {\n          handleChangeValue(newValue, e);\n        }\n      } else {\n        handleChangeValue(newValue, e);\n      }\n    } else {\n      setCompositionValue(newValue);\n    }\n  };\n  var onComposition = function(e) {\n    if (e.type === \"compositionend\") {\n      isComposition.current = false;\n      setCompositionValue(void 0);\n      handleChangeValue(e.target.value, e);\n    } else {\n      isComposition.current = true;\n    }\n  };\n  var resizeTextAreaHeight = function() {\n    var textAreaStyle2 = autoSizeTextAreaHeight(props.autoSize, textareaRef.current);\n    if (textAreaStyle2) {\n      setTextAreaStyle(textAreaStyle2);\n    }\n  };\n  var handleClearClick = function(e) {\n    e.stopPropagation();\n    if (textareaRef.current && textareaRef.current.focus) {\n      textareaRef.current.focus();\n    }\n    handleChangeValue(\"\", e);\n    onClear && onClear();\n  };\n  useIsomorphicLayoutEffect$1(function() {\n    resizeTextAreaHeight();\n  }, [value]);\n  react.exports.useImperativeHandle(ref, function() {\n    return {\n      dom: textareaRef.current,\n      focus: function() {\n        textareaRef.current && textareaRef.current.focus && textareaRef.current.focus();\n      },\n      blur: function() {\n        textareaRef.current && textareaRef.current.blur && textareaRef.current.blur();\n      }\n    };\n  }, []);\n  var valueLength = value ? value.length : 0;\n  var withWrapper = trueMaxLength && showWordLimit || allowClear;\n  var lengthError = react.exports.useMemo(function() {\n    if (!mergedMaxLength && trueMaxLength) {\n      return valueLength > trueMaxLength;\n    }\n    return false;\n  }, [valueLength, trueMaxLength, mergedMaxLength]);\n  var classNames = cs$1(prefixCls2, (_a = {}, _a[prefixCls2 + \"-error\"] = error || lengthError, _a[prefixCls2 + \"-disabled\"] = disabled, _a), className);\n  var TextAreaElement = React.createElement(\"textarea\", __assign$M({}, omit(rest, [\"autoSize\", \"defaultValue\", \"onPressEnter\"]), { maxLength: mergedMaxLength, ref: textareaRef, style: __assign$M(__assign$M({}, style), textAreaStyle), className: classNames, placeholder, disabled, onChange: handleChange, onKeyDown: function(e) {\n    var onKeyDown = props.onKeyDown, onPressEnter = props.onPressEnter;\n    var keyCode = e.keyCode || e.which;\n    onKeyDown && onKeyDown(e);\n    if (keyCode === Enter.code) {\n      onPressEnter && onPressEnter(e);\n    }\n  }, onCompositionStart: onComposition, onCompositionUpdate: onComposition, onCompositionEnd: onComposition, value: compositionValue || value || \"\" }));\n  if (withWrapper) {\n    var showClearIcon = !disabled && allowClear && value;\n    return React.createElement(\"div\", { className: cs$1(prefixCls2 + \"-wrapper\", (_b = {}, _b[prefixCls2 + \"-clear-wrapper\"] = allowClear, _b)), style: wrapperStyle }, TextAreaElement, showClearIcon ? React.createElement(IconHover, { className: prefixCls2 + \"-clear-icon\" }, React.createElement(IconClose$1, {\n      onClick: handleClearClick,\n      onMouseDown: function(e) {\n        e.preventDefault();\n      }\n    })) : null, trueMaxLength && showWordLimit && React.createElement(\"span\", { className: cs$1(prefixCls2 + \"-word-limit\", (_c = {}, _c[prefixCls2 + \"-word-limit-error\"] = lengthError, _c)) }, valueLength, \"/\", trueMaxLength));\n  }\n  return TextAreaElement;\n};\nvar TextAreaRef = React.forwardRef(TextArea);\nTextAreaRef.displayName = \"TextArea\";\nvar TextArea$1 = TextAreaRef;\nfunction ownKeys$n(object, enumerableOnly) {\n  var keys = Object.keys(object);\n  if (Object.getOwnPropertySymbols) {\n    var symbols = Object.getOwnPropertySymbols(object);\n    if (enumerableOnly) {\n      symbols = symbols.filter(function(sym) {\n        return Object.getOwnPropertyDescriptor(object, sym).enumerable;\n      });\n    }\n    keys.push.apply(keys, symbols);\n  }\n  return keys;\n}\nfunction _objectSpread$n(target2) {\n  for (var i = 1; i < arguments.length; i++) {\n    var source2 = arguments[i] != null ? arguments[i] : {};\n    if (i % 2) {\n      ownKeys$n(Object(source2), true).forEach(function(key) {\n        _defineProperty(target2, key, source2[key]);\n      });\n    } else if (Object.getOwnPropertyDescriptors) {\n      Object.defineProperties(target2, Object.getOwnPropertyDescriptors(source2));\n    } else {\n      ownKeys$n(Object(source2)).forEach(function(key) {\n        Object.defineProperty(target2, key, Object.getOwnPropertyDescriptor(source2, key));\n      });\n    }\n  }\n  return target2;\n}\nfunction IconEyeComponent(iconProps, ref) {\n  var _useContext = react.exports.useContext(IconContext), prefixCls2 = _useContext.prefixCls;\n  var spin = iconProps.spin, className = iconProps.className;\n  var props = _objectSpread$n(_objectSpread$n({\n    ref\n  }, iconProps), {}, {\n    className: \"\".concat(className ? className + \" \" : \"\").concat(prefixCls2, \"-icon \").concat(prefixCls2, \"-icon-eye\")\n  });\n  if (spin) {\n    props.className = \"\".concat(props.className, \" \").concat(prefixCls2, \"-icon-loading\");\n  }\n  delete props.spin;\n  delete props.isIcon;\n  return /* @__PURE__ */ React.createElement(\"svg\", _extends({\n    fill: \"none\",\n    stroke: \"currentColor\",\n    strokeWidth: \"4\",\n    viewBox: \"0 0 48 48\",\n    width: \"1em\",\n    height: \"1em\"\n  }, props), /* @__PURE__ */ React.createElement(\"path\", {\n    d: \"M24 37c6.627 0 12.627-4.333 18-13-5.373-8.667-11.373-13-18-13-6.627 0-12.627 4.333-18 13 5.373 8.667 11.373 13 18 13Z\",\n    clipRule: \"evenodd\"\n  }), /* @__PURE__ */ React.createElement(\"path\", {\n    d: \"M29 24a5 5 0 1 1-10 0 5 5 0 0 1 10 0Z\"\n  }));\n}\nvar IconEye = /* @__PURE__ */ React.forwardRef(IconEyeComponent);\nIconEye.defaultProps = {\n  isIcon: true\n};\nIconEye.displayName = \"IconEye\";\nvar IconEye$1 = IconEye;\nfunction ownKeys$m(object, enumerableOnly) {\n  var keys = Object.keys(object);\n  if (Object.getOwnPropertySymbols) {\n    var symbols = Object.getOwnPropertySymbols(object);\n    if (enumerableOnly) {\n      symbols = symbols.filter(function(sym) {\n        return Object.getOwnPropertyDescriptor(object, sym).enumerable;\n      });\n    }\n    keys.push.apply(keys, symbols);\n  }\n  return keys;\n}\nfunction _objectSpread$m(target2) {\n  for (var i = 1; i < arguments.length; i++) {\n    var source2 = arguments[i] != null ? arguments[i] : {};\n    if (i % 2) {\n      ownKeys$m(Object(source2), true).forEach(function(key) {\n        _defineProperty(target2, key, source2[key]);\n      });\n    } else if (Object.getOwnPropertyDescriptors) {\n      Object.defineProperties(target2, Object.getOwnPropertyDescriptors(source2));\n    } else {\n      ownKeys$m(Object(source2)).forEach(function(key) {\n        Object.defineProperty(target2, key, Object.getOwnPropertyDescriptor(source2, key));\n      });\n    }\n  }\n  return target2;\n}\nfunction IconEyeInvisibleComponent(iconProps, ref) {\n  var _useContext = react.exports.useContext(IconContext), prefixCls2 = _useContext.prefixCls;\n  var spin = iconProps.spin, className = iconProps.className;\n  var props = _objectSpread$m(_objectSpread$m({\n    ref\n  }, iconProps), {}, {\n    className: \"\".concat(className ? className + \" \" : \"\").concat(prefixCls2, \"-icon \").concat(prefixCls2, \"-icon-eye-invisible\")\n  });\n  if (spin) {\n    props.className = \"\".concat(props.className, \" \").concat(prefixCls2, \"-icon-loading\");\n  }\n  delete props.spin;\n  delete props.isIcon;\n  return /* @__PURE__ */ React.createElement(\"svg\", _extends({\n    fill: \"none\",\n    stroke: \"currentColor\",\n    strokeWidth: \"4\",\n    viewBox: \"0 0 48 48\",\n    width: \"1em\",\n    height: \"1em\"\n  }, props), /* @__PURE__ */ React.createElement(\"path\", {\n    d: \"M14 14.5c-2.69 2-5.415 5.33-8 9.5 5.373 8.667 11.373 13 18 13 3.325 0 6.491-1.09 9.5-3.271M17.463 12.5C19 11 21.75 11 24 11c6.627 0 12.627 4.333 18 13-1.766 2.848-3.599 5.228-5.5 7.14\"\n  }), /* @__PURE__ */ React.createElement(\"path\", {\n    d: \"M29 24a5 5 0 1 1-10 0 5 5 0 0 1 10 0ZM6.852 7.103l34.294 34.294\"\n  }));\n}\nvar IconEyeInvisible = /* @__PURE__ */ React.forwardRef(IconEyeInvisibleComponent);\nIconEyeInvisible.defaultProps = {\n  isIcon: true\n};\nIconEyeInvisible.displayName = \"IconEyeInvisible\";\nvar IconEyeInvisible$1 = IconEyeInvisible;\nvar __assign$L = globalThis && globalThis.__assign || function() {\n  __assign$L = Object.assign || function(t2) {\n    for (var s, i = 1, n2 = arguments.length; i < n2; i++) {\n      s = arguments[i];\n      for (var p2 in s)\n        if (Object.prototype.hasOwnProperty.call(s, p2))\n          t2[p2] = s[p2];\n    }\n    return t2;\n  };\n  return __assign$L.apply(this, arguments);\n};\nvar __rest$n = globalThis && globalThis.__rest || function(s, e) {\n  var t2 = {};\n  for (var p2 in s)\n    if (Object.prototype.hasOwnProperty.call(s, p2) && e.indexOf(p2) < 0)\n      t2[p2] = s[p2];\n  if (s != null && typeof Object.getOwnPropertySymbols === \"function\")\n    for (var i = 0, p2 = Object.getOwnPropertySymbols(s); i < p2.length; i++) {\n      if (e.indexOf(p2[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p2[i]))\n        t2[p2[i]] = s[p2[i]];\n    }\n  return t2;\n};\nvar __read$J = globalThis && globalThis.__read || function(o, n2) {\n  var m2 = typeof Symbol === \"function\" && o[Symbol.iterator];\n  if (!m2)\n    return o;\n  var i = m2.call(o), r2, ar = [], e;\n  try {\n    while ((n2 === void 0 || n2-- > 0) && !(r2 = i.next()).done)\n      ar.push(r2.value);\n  } catch (error) {\n    e = { error };\n  } finally {\n    try {\n      if (r2 && !r2.done && (m2 = i[\"return\"]))\n        m2.call(i);\n    } finally {\n      if (e)\n        throw e.error;\n    }\n  }\n  return ar;\n};\nvar Password = React.forwardRef(function(props, ref) {\n  var _a;\n  var _b = __read$J(useMergeValue(false, {\n    defaultValue: props.defaultVisibility,\n    value: props.visibility\n  }), 2), visibility = _b[0], setVisibility = _b[1];\n  var getPrefixCls = react.exports.useContext(ConfigContext).getPrefixCls;\n  var className = props.className, visibilityToggle = props.visibilityToggle, onVisibilityChange = props.onVisibilityChange, rest = __rest$n(props, [\"className\", \"visibilityToggle\", \"onVisibilityChange\"]);\n  var prefixCls2 = getPrefixCls(\"input-password\");\n  var classNames = cs$1(prefixCls2, (_a = {}, _a[prefixCls2 + \"-visibility\"] = visibilityToggle, _a), className);\n  var onClickVisibility = function(v2) {\n    if (!(\"visibility\" in props)) {\n      setVisibility(v2);\n    }\n    onVisibilityChange && onVisibilityChange(v2);\n  };\n  var icon2 = props.suffix;\n  if (visibilityToggle) {\n    var IconProps = {\n      onClick: function() {\n        return onClickVisibility(!visibility);\n      },\n      onMouseDown: function(e) {\n        return e.preventDefault();\n      },\n      onMouseUp: function(e) {\n        return e.preventDefault();\n      }\n    };\n    if (props.suffix) {\n      icon2 = React.createElement(\"span\", __assign$L({}, IconProps), props.suffix);\n    } else {\n      var IconComponent = visibility ? IconEye$1 : IconEyeInvisible$1;\n      icon2 = React.createElement(IconComponent, __assign$L({}, IconProps));\n    }\n  }\n  return React.createElement(Input$1, __assign$L({}, omit(rest, [\"visibility\", \"defaultVisibility\"]), { type: visibility ? \"text\" : \"password\", className: classNames, ref, suffix: icon2 }));\n});\nPassword.displayName = \"Password\";\nPassword.defaultProps = {\n  visibilityToggle: true\n};\nvar Password$1 = Password;\nvar __assign$K = globalThis && globalThis.__assign || function() {\n  __assign$K = Object.assign || function(t2) {\n    for (var s, i = 1, n2 = arguments.length; i < n2; i++) {\n      s = arguments[i];\n      for (var p2 in s)\n        if (Object.prototype.hasOwnProperty.call(s, p2))\n          t2[p2] = s[p2];\n    }\n    return t2;\n  };\n  return __assign$K.apply(this, arguments);\n};\nvar __rest$m = globalThis && globalThis.__rest || function(s, e) {\n  var t2 = {};\n  for (var p2 in s)\n    if (Object.prototype.hasOwnProperty.call(s, p2) && e.indexOf(p2) < 0)\n      t2[p2] = s[p2];\n  if (s != null && typeof Object.getOwnPropertySymbols === \"function\")\n    for (var i = 0, p2 = Object.getOwnPropertySymbols(s); i < p2.length; i++) {\n      if (e.indexOf(p2[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p2[i]))\n        t2[p2[i]] = s[p2[i]];\n    }\n  return t2;\n};\nvar __read$I = globalThis && globalThis.__read || function(o, n2) {\n  var m2 = typeof Symbol === \"function\" && o[Symbol.iterator];\n  if (!m2)\n    return o;\n  var i = m2.call(o), r2, ar = [], e;\n  try {\n    while ((n2 === void 0 || n2-- > 0) && !(r2 = i.next()).done)\n      ar.push(r2.value);\n  } catch (error) {\n    e = { error };\n  } finally {\n    try {\n      if (r2 && !r2.done && (m2 = i[\"return\"]))\n        m2.call(i);\n    } finally {\n      if (e)\n        throw e.error;\n    }\n  }\n  return ar;\n};\nvar InputComponent = React.forwardRef(function(props, ref) {\n  var _a;\n  var isComposition = react.exports.useRef(false);\n  var _b = __read$I(react.exports.useState(\"\"), 2), compositionValue = _b[0], setCompositionValue = _b[1];\n  var refInput = react.exports.useRef();\n  var refInputMirror = react.exports.useRef();\n  var refPrevInputWidth = react.exports.useRef(null);\n  var allowClear = props.allowClear, error = props.error, disabled = props.disabled, placeholder = props.placeholder, className = props.className, style = props.style, height = props.height, prefixCls2 = props.prefixCls, hasParent = props.hasParent, size = props.size, value = props.value, autoFitWidth = props.autoFitWidth, onClear = props.onClear, onValueChange = props.onValueChange, maxLength = props.maxLength, rest = __rest$m(props, [\"allowClear\", \"error\", \"disabled\", \"placeholder\", \"className\", \"style\", \"height\", \"prefixCls\", \"hasParent\", \"size\", \"value\", \"autoFitWidth\", \"onClear\", \"onValueChange\", \"maxLength\"]);\n  var otherProps = omit(rest, [\n    \"showWordLimit\",\n    \"className\",\n    \"defaultValue\",\n    \"addBefore\",\n    \"addAfter\",\n    \"afterStyle\",\n    \"beforeStyle\",\n    \"onKeyDown\",\n    \"onPressEnter\",\n    \"prefix\",\n    \"suffix\"\n  ]);\n  var inputClassNames = cs$1(prefixCls2, prefixCls2 && (_a = {}, _a[prefixCls2 + \"-size-\" + size] = size, _a[prefixCls2 + \"-error\"] = error, _a[prefixCls2 + \"-disabled\"] = disabled, _a), hasParent ? void 0 : className);\n  react.exports.useImperativeHandle(ref, function() {\n    return {\n      dom: refInput.current,\n      focus: function() {\n        refInput.current && refInput.current.focus && refInput.current.focus();\n      },\n      blur: function() {\n        refInput.current && refInput.current.blur && refInput.current.blur();\n      }\n    };\n  }, []);\n  var updateInputWidth = function() {\n    if (refInputMirror.current && refInput.current) {\n      var width = refInputMirror.current.offsetWidth;\n      refInput.current.style.width = width + (width ? 8 : 4) + \"px\";\n    }\n  };\n  react.exports.useEffect(function() {\n    return autoFitWidth && updateInputWidth();\n  }, []);\n  var trueMaxLength = isObject$6(maxLength) ? maxLength.length : maxLength;\n  var mergedMaxLength = isObject$6(maxLength) && maxLength.errorOnly ? void 0 : trueMaxLength;\n  var onChange = function(e) {\n    var newValue = e.target.value;\n    if (!isComposition.current) {\n      compositionValue && setCompositionValue(void 0);\n      if (!onValueChange) {\n        return;\n      }\n      if (mergedMaxLength) {\n        if (newValue.length <= trueMaxLength) {\n          onValueChange(newValue, e);\n        }\n      } else {\n        onValueChange(newValue, e);\n      }\n    } else {\n      isComposition.current = false;\n      setCompositionValue(newValue);\n    }\n  };\n  var onComposition = function(e) {\n    if (e.type === \"compositionend\") {\n      isComposition.current = false;\n      setCompositionValue(void 0);\n      onValueChange && onValueChange(e.target.value, e);\n    } else {\n      isComposition.current = true;\n    }\n  };\n  var onKeyDown = function(e) {\n    var onKeyDown2 = props.onKeyDown, onPressEnter = props.onPressEnter;\n    var keyCode = e.keyCode || e.which;\n    if (isComposition.current) {\n      return;\n    }\n    onKeyDown2 && onKeyDown2(e);\n    if (keyCode === Enter.code) {\n      onPressEnter && onPressEnter(e);\n    }\n  };\n  var inputProps = __assign$K(__assign$K({}, otherProps), { maxLength: mergedMaxLength, value: compositionValue || value || \"\", disabled, placeholder, onChange, onKeyDown, className: inputClassNames, onCompositionStart: onComposition, onCompositionUpdate: onComposition, onCompositionEnd: onComposition });\n  var mirrorValue = inputProps.value || placeholder;\n  return React.createElement(React.Fragment, null, allowClear ? React.createElement(React.Fragment, null, React.createElement(\"input\", __assign$K({ ref: refInput }, inputProps)), !disabled && allowClear && value ? React.createElement(IconHover, { className: prefixCls2 + \"-clear-icon\", onClick: function(e) {\n    e.stopPropagation();\n    if (refInput.current && refInput.current.focus) {\n      refInput.current.focus();\n    }\n    onValueChange && onValueChange(\"\", e);\n    onClear && onClear();\n  } }, React.createElement(IconClose$1, {\n    onMouseDown: function(e) {\n      e.preventDefault();\n    }\n  })) : null) : React.createElement(\"input\", __assign$K({ ref: refInput }, inputProps, { style: hasParent ? {} : __assign$K(__assign$K({}, style), \"height\" in props ? { height } : {}) })), autoFitWidth && React.createElement(ResizeObserver, { onResize: function() {\n    var inputWidth = refInputMirror.current.offsetWidth;\n    if (typeof autoFitWidth === \"object\") {\n      var delay = typeof autoFitWidth.delay === \"function\" ? autoFitWidth.delay(inputWidth, refPrevInputWidth.current) : autoFitWidth.delay;\n      delay ? setTimeout(updateInputWidth, delay) : updateInputWidth();\n    } else {\n      updateInputWidth();\n    }\n    refPrevInputWidth.current = inputWidth;\n  } }, React.createElement(\"span\", { className: prefixCls2 + \"-mirror\", ref: refInputMirror }, mirrorValue && mirrorValue.replace(/\\s/g, \"\\xA0\"))));\n});\nInputComponent.displayName = \"InputComponent\";\nvar InputComponent$1 = InputComponent;\nvar __assign$J = globalThis && globalThis.__assign || function() {\n  __assign$J = Object.assign || function(t2) {\n    for (var s, i = 1, n2 = arguments.length; i < n2; i++) {\n      s = arguments[i];\n      for (var p2 in s)\n        if (Object.prototype.hasOwnProperty.call(s, p2))\n          t2[p2] = s[p2];\n    }\n    return t2;\n  };\n  return __assign$J.apply(this, arguments);\n};\nvar __rest$l = globalThis && globalThis.__rest || function(s, e) {\n  var t2 = {};\n  for (var p2 in s)\n    if (Object.prototype.hasOwnProperty.call(s, p2) && e.indexOf(p2) < 0)\n      t2[p2] = s[p2];\n  if (s != null && typeof Object.getOwnPropertySymbols === \"function\")\n    for (var i = 0, p2 = Object.getOwnPropertySymbols(s); i < p2.length; i++) {\n      if (e.indexOf(p2[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p2[i]))\n        t2[p2[i]] = s[p2[i]];\n    }\n  return t2;\n};\nvar Group$3 = React.forwardRef(function(props, ref) {\n  var _a;\n  var getPrefixCls = react.exports.useContext(ConfigContext).getPrefixCls;\n  var className = props.className, style = props.style, children = props.children, compact = props.compact, rest = __rest$l(props, [\"className\", \"style\", \"children\", \"compact\"]);\n  var prefixCls2 = getPrefixCls(\"input-group\");\n  var classNames = cs$1(prefixCls2, (_a = {}, _a[prefixCls2 + \"-compact\"] = compact, _a), className);\n  return React.createElement(\"div\", __assign$J({ ref, className: classNames, style }, rest), children);\n});\nGroup$3.displayName = \"InputGroup\";\nvar Group$4 = Group$3;\nvar __assign$I = globalThis && globalThis.__assign || function() {\n  __assign$I = Object.assign || function(t2) {\n    for (var s, i = 1, n2 = arguments.length; i < n2; i++) {\n      s = arguments[i];\n      for (var p2 in s)\n        if (Object.prototype.hasOwnProperty.call(s, p2))\n          t2[p2] = s[p2];\n    }\n    return t2;\n  };\n  return __assign$I.apply(this, arguments);\n};\nvar __read$H = globalThis && globalThis.__read || function(o, n2) {\n  var m2 = typeof Symbol === \"function\" && o[Symbol.iterator];\n  if (!m2)\n    return o;\n  var i = m2.call(o), r2, ar = [], e;\n  try {\n    while ((n2 === void 0 || n2-- > 0) && !(r2 = i.next()).done)\n      ar.push(r2.value);\n  } catch (error) {\n    e = { error };\n  } finally {\n    try {\n      if (r2 && !r2.done && (m2 = i[\"return\"]))\n        m2.call(i);\n    } finally {\n      if (e)\n        throw e.error;\n    }\n  }\n  return ar;\n};\nvar keepFocus$1 = function(e) {\n  e.target.tagName !== \"INPUT\" && e.preventDefault();\n};\nvar inputAddon = function(className, node, style, onClick) {\n  if (style === void 0) {\n    style = {};\n  }\n  return node ? React.createElement(\"span\", { style, className, onClick }, node) : null;\n};\nfunction formatValue$1(value, maxLength) {\n  var str = value !== null && !isUndefined$1(value) && !isString$1(value) ? String(value) : value || \"\";\n  if (maxLength) {\n    return str.slice(0, maxLength);\n  }\n  return str;\n}\nfunction Input(baseProps, ref) {\n  var _a, _b, _c;\n  var _d = react.exports.useContext(ConfigContext), getPrefixCls = _d.getPrefixCls, ctxSize = _d.size, componentConfig2 = _d.componentConfig;\n  var props = useMergeProps(baseProps, {}, componentConfig2 === null || componentConfig2 === void 0 ? void 0 : componentConfig2.Input);\n  var className = props.className, style = props.style, addBefore = props.addBefore, addAfter = props.addAfter, suffix = props.suffix, prefix = props.prefix, beforeStyle = props.beforeStyle, afterStyle = props.afterStyle, height = props.height, disabled = props.disabled, maxLength = props.maxLength, showWordLimit = props.showWordLimit, allowClear = props.allowClear;\n  var trueMaxLength = isObject$6(maxLength) ? maxLength.length : maxLength;\n  var mergedMaxLength = isObject$6(maxLength) && maxLength.errorOnly ? void 0 : trueMaxLength;\n  var _e = __read$H(react.exports.useState(false), 2), focus = _e[0], setFocus2 = _e[1];\n  var inputRef = react.exports.useRef();\n  var inputWrapperRef = react.exports.useRef();\n  var _f = __read$H(useMergeValue(\"\", {\n    defaultValue: \"defaultValue\" in props ? formatValue$1(props.defaultValue, mergedMaxLength) : void 0,\n    value: \"value\" in props ? formatValue$1(props.value, mergedMaxLength) : void 0\n  }), 2), value = _f[0], setValue = _f[1];\n  react.exports.useImperativeHandle(ref, function() {\n    return inputRef.current;\n  }, []);\n  var onChange = function(value2, e) {\n    if (!(\"value\" in props)) {\n      setValue(value2);\n    }\n    props.onChange && props.onChange(value2, e);\n  };\n  var prefixCls2 = getPrefixCls(\"input\");\n  var size = props.size || ctxSize;\n  var isCustomHeight = \"height\" in props;\n  var suffixElement = suffix;\n  var valueLength = value ? value.length : 0;\n  var lengthError = react.exports.useMemo(function() {\n    if (!mergedMaxLength && trueMaxLength) {\n      return valueLength > trueMaxLength;\n    }\n    return false;\n  }, [valueLength, trueMaxLength, mergedMaxLength]);\n  if (trueMaxLength && showWordLimit) {\n    suffixElement = React.createElement(\"span\", { className: cs$1(prefixCls2 + \"-word-limit\", (_a = {}, _a[prefixCls2 + \"-word-limit-error\"] = lengthError, _a)) }, valueLength, \"/\", trueMaxLength);\n  }\n  var classnames2 = cs$1(prefixCls2 + \"-group-wrapper\", prefixCls2 + \"-group-wrapper-\" + size, (_b = {}, _b[prefixCls2 + \"-custom-height\"] = isCustomHeight, _b[prefixCls2 + \"-has-suffix\"] = suffixElement, _b[prefixCls2 + \"-group-wrapper-disabled\"] = disabled, _b), className);\n  var needWrapper = addBefore || addAfter || suffixElement || prefix;\n  var inputElement = React.createElement(InputComponent$1, __assign$I({ ref: inputRef }, props, { onFocus: function(e) {\n    setFocus2(true);\n    props.onFocus && props.onFocus(e);\n  }, onBlur: function(e) {\n    setFocus2(false);\n    props.onBlur && props.onBlur(e);\n  }, prefixCls: prefixCls2, value, onValueChange: onChange, hasParent: !!needWrapper || allowClear, size }));\n  var innerWrapperClassnames = cs$1(prefixCls2 + \"-inner-wrapper\", (_c = {}, _c[prefixCls2 + \"-inner-wrapper-error\"] = props.error || lengthError, _c[prefixCls2 + \"-inner-wrapper-disabled\"] = disabled, _c[prefixCls2 + \"-inner-wrapper-focus\"] = focus, _c[prefixCls2 + \"-inner-wrapper-has-prefix\"] = prefix, _c[prefixCls2 + \"-inner-wrapper-\" + size] = size, _c[prefixCls2 + \"-clear-wrapper\"] = allowClear, _c));\n  return needWrapper ? React.createElement(\"div\", { className: classnames2, style: __assign$I(__assign$I({}, style), isCustomHeight ? { height } : {}) }, React.createElement(\"span\", { className: prefixCls2 + \"-group\" }, inputAddon(prefixCls2 + \"-group-addbefore\", addBefore, beforeStyle), React.createElement(\"span\", { className: innerWrapperClassnames, ref: inputWrapperRef, onMouseDown: function(e) {\n    if (e.target.tagName !== \"INPUT\") {\n      if (inputWrapperRef.current && contains(inputWrapperRef.current, e.target)) {\n        e.preventDefault();\n      }\n    }\n  }, onClick: function(e) {\n    if (inputWrapperRef.current && contains(inputWrapperRef.current, e.target)) {\n      inputRef.current && inputRef.current.focus();\n    }\n  } }, inputAddon(prefixCls2 + \"-group-prefix\", prefix), inputElement, inputAddon(prefixCls2 + \"-group-suffix\", suffixElement)), inputAddon(prefixCls2 + \"-group-addafter\", addAfter, afterStyle))) : allowClear ? React.createElement(\"span\", { className: cs$1(className, innerWrapperClassnames), style: __assign$I(__assign$I({}, style), isCustomHeight ? { height } : {}), onMouseDown: keepFocus$1, onClick: function() {\n    inputRef.current && inputRef.current.focus();\n  } }, inputElement) : inputElement;\n}\nvar InputElement = React.forwardRef(Input);\nInputElement.displayName = \"Input\";\nInputElement.Search = Search$1;\nInputElement.TextArea = TextArea$1;\nInputElement.Password = Password$1;\nInputElement.Group = Group$4;\nvar Input$1 = InputElement;\nvar Portal$3 = function(props) {\n  var getContainer = props.getContainer, children = props.children;\n  var containerRef = react.exports.useRef();\n  var isFirstRender = useIsFirstRender();\n  if (isFirstRender && !isServerRendering) {\n    containerRef.current = getContainer();\n  }\n  react.exports.useEffect(function() {\n    return function() {\n      var container2 = containerRef.current;\n      if (container2 && container2.parentNode) {\n        container2.parentNode.removeChild(container2);\n      }\n    };\n  }, []);\n  return containerRef.current ? ReactDOM.createPortal(children, containerRef.current) : null;\n};\nvar Portal$4 = Portal$3;\nvar __assign$H = globalThis && globalThis.__assign || function() {\n  __assign$H = Object.assign || function(t2) {\n    for (var s, i = 1, n2 = arguments.length; i < n2; i++) {\n      s = arguments[i];\n      for (var p2 in s)\n        if (Object.prototype.hasOwnProperty.call(s, p2))\n          t2[p2] = s[p2];\n    }\n    return t2;\n  };\n  return __assign$H.apply(this, arguments);\n};\nfunction getElementPosition(element, elementRect, root2) {\n  if (!root2 || !element || isServerRendering) {\n    return { left: 0, width: 0, height: 0, top: 0 };\n  }\n  var bodyScroll = function(direction) {\n    return document.documentElement[direction] || document.body[direction];\n  };\n  var pageScrollTop = root2 === document.body ? bodyScroll(\"scrollTop\") : root2.scrollTop;\n  var pageScrollLeft = root2 === document.body ? bodyScroll(\"scrollLeft\") : root2.scrollLeft;\n  var left = elementRect.left, top = elementRect.top, width = elementRect.width, height = elementRect.height;\n  var rootLeft = root2 === document.body ? 0 : root2.getBoundingClientRect().left;\n  var rootTop = root2 === document.body ? 0 : root2.getBoundingClientRect().top;\n  var pTop = top + pageScrollTop - rootTop;\n  var pLeft = left + pageScrollLeft - rootLeft;\n  return {\n    left: pLeft,\n    top: pTop,\n    width,\n    height\n  };\n}\nvar getInsideValue = function(min, max, value) {\n  if (value < min) {\n    return min;\n  }\n  if (value > max) {\n    return max;\n  }\n  return value;\n};\nvar getPopupAlign = function(propsPopupAlign, showArrow) {\n  var horizontalOffset = 0;\n  var verticalOffset = 0;\n  var resultPopupAlign = {};\n  if (!showArrow) {\n    resultPopupAlign = __assign$H({}, propsPopupAlign);\n  } else {\n    resultPopupAlign = __assign$H({ left: 12, right: 12, top: 12, bottom: 12 }, propsPopupAlign);\n  }\n  for (var key in resultPopupAlign) {\n    if (isArray$5(resultPopupAlign[key])) {\n      var index2 = 0;\n      if ([\"top\", \"bottom\"].indexOf(key) > -1) {\n        index2 = 1;\n        horizontalOffset = resultPopupAlign[key][0];\n      } else {\n        verticalOffset = resultPopupAlign[key][1];\n      }\n      resultPopupAlign[key] = resultPopupAlign[key][index2];\n    }\n  }\n  return __assign$H(__assign$H({}, resultPopupAlign), { horizontalOffset, verticalOffset });\n};\nvar getChildRect = function(child, mouseLocation) {\n  return mouseLocation ? {\n    left: mouseLocation.clientX,\n    top: mouseLocation.clientY,\n    width: 0,\n    height: 0,\n    right: mouseLocation.clientX,\n    bottom: mouseLocation.clientY\n  } : child.getBoundingClientRect();\n};\nvar getStyle = function(props, content, child, mountContainer, mouseLocation) {\n  var autoAlignPopupWidth = props.autoAlignPopupWidth, autoAlignPopupMinWidth = props.autoAlignPopupMinWidth, alignPoint = props.alignPoint, propsStyle = props.style;\n  if (!child || !content || !mountContainer) {\n    return {};\n  }\n  var style = {};\n  var childRect = getChildRect(child, alignPoint && mouseLocation);\n  var _a = getElementPosition(child, childRect, mountContainer), left = _a.left, top = _a.top, width = _a.width, height = _a.height;\n  var popupAlign = getPopupAlign(props.popupAlign, props.showArrow);\n  var alignLeft = popupAlign.left || 0;\n  var alignRight = popupAlign.right || 0;\n  var alignTop = popupAlign.top || 0;\n  var alignBottom = popupAlign.bottom || 0;\n  if (autoAlignPopupWidth && (propsStyle === null || propsStyle === void 0 ? void 0 : propsStyle.width) === void 0) {\n    content.style.width = child.offsetWidth + \"px\";\n  }\n  if (autoAlignPopupMinWidth) {\n    content.style.minWidth = child.offsetWidth + \"px\";\n  }\n  var realPosition = props.position;\n  var arrowStyle = {};\n  var autoPosition = function(direction) {\n    var _a2, _b;\n    if (!props.autoFitPosition) {\n      return;\n    }\n    var windowHeight = ((_a2 = document.documentElement) === null || _a2 === void 0 ? void 0 : _a2.clientHeight) || window.innerHeight;\n    var windowWidth = ((_b = document.documentElement) === null || _b === void 0 ? void 0 : _b.clientWidth) || window.innerWidth;\n    var result = false;\n    var boundnary = {\n      left: left - childRect.left,\n      top: top - childRect.top\n    };\n    var _c = style.top, styleTop = _c === void 0 ? 0 : _c, _d = style.left, styleLeft = _d === void 0 ? 0 : _d;\n    if (direction === \"top\" || direction === \"bottom\") {\n      if (boundnary.left > styleLeft && childRect.right > 12) {\n        style.left = Math.max(boundnary.left, left - content.clientWidth);\n        style.left = Math.max(style.left, left - content.clientWidth + 24);\n      } else if (styleLeft - boundnary.left + content.clientWidth > windowWidth && windowWidth - childRect.left > 12) {\n        style.left = Math.max(boundnary.left, boundnary.left + windowWidth - content.clientWidth);\n        style.left = Math.max(style.left, left - content.clientWidth + 24);\n      }\n    }\n    if (direction === \"left\" || direction === \"right\") {\n      if (boundnary.top > styleTop && childRect.bottom > 12) {\n        style.top = boundnary.top;\n        style.top = Math.max(style.top, top - content.clientHeight + childRect.height / 2);\n      } else if (styleTop - boundnary.top + content.clientHeight > windowHeight && windowHeight - childRect.top > 12) {\n        style.top = Math.max(boundnary.top, boundnary.top + windowHeight - content.clientHeight);\n        style.top = Math.max(style.top, top - content.clientHeight + childRect.height / 2);\n      }\n    }\n    if (direction === \"top\" && boundnary.top > styleTop) {\n      if (childRect.top < windowHeight - childRect.bottom) {\n        style.top = Math.min(top + height + (alignTop || 0), boundnary.top + windowHeight - content.clientHeight);\n        result = true;\n      } else {\n        style.top = boundnary.top;\n      }\n    }\n    if (direction === \"bottom\" && styleTop - boundnary.top + content.clientHeight > windowHeight) {\n      if (windowHeight - childRect.bottom < childRect.top) {\n        style.top = Math.max(top - content.clientHeight - (alignBottom || 0), boundnary.top);\n        result = true;\n      } else {\n        style.top = boundnary.top + windowHeight - content.clientHeight;\n      }\n    }\n    if (direction === \"left\" && boundnary.left > styleLeft) {\n      if (childRect.left < windowWidth - childRect.right) {\n        style.left = Math.min(width + left + alignRight, boundnary.left + windowWidth - content.clientWidth);\n        result = true;\n      } else {\n        style.left = boundnary.left;\n      }\n    }\n    if (direction === \"right\" && styleLeft - boundnary.left + content.clientWidth > windowWidth) {\n      if (windowWidth - childRect.right < childRect.left) {\n        style.left = Math.max(left - content.clientWidth - alignLeft, boundnary.left);\n        result = true;\n      } else {\n        style.left = boundnary.left + windowWidth - content.clientWidth;\n      }\n    }\n    if (style.left < 0) {\n      style.left = 0;\n    } else {\n      var maxLeft = mountContainer.scrollWidth - content.clientWidth;\n      style.left = Math.min(maxLeft, style.left);\n    }\n    return result;\n  };\n  var horizontalOffset = popupAlign.horizontalOffset || 0;\n  var verticalOffset = popupAlign.verticalOffset || 0;\n  switch (props.position) {\n    case \"top\": {\n      style.top = top - content.clientHeight - alignTop;\n      style.left = left + width / 2 - content.clientWidth / 2;\n      autoPosition(\"top\") && (realPosition = \"bottom\");\n      style.left += horizontalOffset;\n      var arrowLeft_1 = left - Number(style.left) + width / 2;\n      arrowStyle.left = getInsideValue(12, content.clientWidth - 12, arrowLeft_1);\n      break;\n    }\n    case \"tl\":\n      style.top = top - content.clientHeight - alignTop;\n      style.left = left;\n      autoPosition(\"top\") && (realPosition = \"bl\");\n      style.left += horizontalOffset;\n      var arrowLeft = left - Number(style.left) + Math.min(width / 2, 50);\n      arrowStyle.left = getInsideValue(12, content.clientWidth - 12, arrowLeft);\n      break;\n    case \"tr\":\n      style.top = -content.clientHeight + top - alignTop;\n      style.left = left + width - content.clientWidth;\n      autoPosition(\"top\") && (realPosition = \"br\");\n      style.left += horizontalOffset;\n      arrowLeft = left - Number(style.left) + Math.max(width / 2, width - 50);\n      arrowStyle.left = getInsideValue(12, content.clientWidth - 12, arrowLeft);\n      break;\n    case \"bottom\": {\n      style.top = height + top + alignBottom;\n      style.left = left + width / 2 - content.clientWidth / 2;\n      autoPosition(\"bottom\") && (realPosition = \"top\");\n      style.left += horizontalOffset;\n      var arrowLeft_2 = left - Number(style.left) + width / 2;\n      arrowStyle.left = getInsideValue(12, content.clientWidth - 12, arrowLeft_2);\n      break;\n    }\n    case \"bl\":\n      style.top = height + top + alignBottom;\n      style.left = left;\n      autoPosition(\"bottom\") && (realPosition = \"tl\");\n      style.left += horizontalOffset;\n      arrowLeft = left - Number(style.left) + Math.min(width / 2, 50);\n      arrowStyle.left = getInsideValue(12, content.clientWidth - 12, arrowLeft);\n      break;\n    case \"br\":\n      style.top = height + top + alignBottom;\n      style.left = left + width - content.clientWidth;\n      autoPosition(\"bottom\") && (realPosition = \"tr\");\n      style.left += horizontalOffset;\n      arrowLeft = left - Number(style.left) + Math.max(width / 2, width - 50);\n      arrowStyle.left = getInsideValue(12, content.clientWidth - 12, arrowLeft);\n      break;\n    case \"left\": {\n      style.top = top + height / 2 - content.clientHeight / 2;\n      style.left = left - content.clientWidth - alignLeft;\n      autoPosition(\"left\") && (realPosition = \"right\");\n      style.top += verticalOffset;\n      var arrowTop_1 = top - Number(style.top) + height / 2;\n      arrowStyle.top = getInsideValue(12, content.clientHeight - 12, arrowTop_1);\n      break;\n    }\n    case \"lt\":\n      style.top = top;\n      style.left = left - content.clientWidth - alignLeft;\n      autoPosition(\"left\") && (realPosition = \"rt\");\n      style.top += verticalOffset;\n      var arrowTop = top - Number(style.top) + Math.min(height / 2, 50);\n      arrowStyle.top = getInsideValue(12, content.clientHeight - 12, arrowTop);\n      break;\n    case \"lb\":\n      style.top = top + height - content.clientHeight;\n      style.left = left - content.clientWidth - alignLeft;\n      autoPosition(\"left\") && (realPosition = \"rb\");\n      style.top += verticalOffset;\n      arrowTop = top - Number(style.top) + Math.max(height / 2, height - 50);\n      arrowStyle.top = getInsideValue(12, content.clientHeight - 12, arrowTop);\n      break;\n    case \"right\": {\n      style.top = top + height / 2 - content.clientHeight / 2;\n      style.left = width + left + alignRight;\n      autoPosition(\"right\") && (realPosition = \"left\");\n      style.top += verticalOffset;\n      var arrowTop_2 = top - Number(style.top) + height / 2;\n      arrowStyle.top = getInsideValue(12, content.clientHeight - 12, arrowTop_2);\n      break;\n    }\n    case \"rt\":\n      style.top = top;\n      style.left = width + left + alignRight;\n      autoPosition(\"right\") && (realPosition = \"lt\");\n      style.top += verticalOffset;\n      arrowTop = top - Number(style.top) + Math.min(height / 2, 50);\n      arrowStyle.top = getInsideValue(12, content.clientHeight - 12, arrowTop);\n      break;\n    case \"rb\":\n      style.top = top + height - content.clientHeight;\n      style.left = width + left + alignRight;\n      autoPosition(\"right\") && (realPosition = \"lb\");\n      style.top += verticalOffset;\n      arrowTop = top - Number(style.top) + Math.max(height / 2, height - 50);\n      arrowStyle.top = getInsideValue(12, content.clientHeight - 12, arrowTop);\n      break;\n  }\n  return {\n    style,\n    arrowStyle,\n    realPosition\n  };\n};\nvar __assign$G = globalThis && globalThis.__assign || function() {\n  __assign$G = Object.assign || function(t2) {\n    for (var s, i = 1, n2 = arguments.length; i < n2; i++) {\n      s = arguments[i];\n      for (var p2 in s)\n        if (Object.prototype.hasOwnProperty.call(s, p2))\n          t2[p2] = s[p2];\n    }\n    return t2;\n  };\n  return __assign$G.apply(this, arguments);\n};\nfunction mergeProps(componentProps, defaultProps2, globalComponentConfig) {\n  var _defaultProps = __assign$G(__assign$G({}, defaultProps2), globalComponentConfig);\n  var props = __assign$G({}, componentProps);\n  for (var propName in _defaultProps) {\n    if (props[propName] === void 0) {\n      props[propName] = _defaultProps[propName];\n    }\n  }\n  return props;\n}\nvar __extends$2 = globalThis && globalThis.__extends || function() {\n  var extendStatics = function(d, b) {\n    extendStatics = Object.setPrototypeOf || { __proto__: [] } instanceof Array && function(d2, b2) {\n      d2.__proto__ = b2;\n    } || function(d2, b2) {\n      for (var p2 in b2)\n        if (Object.prototype.hasOwnProperty.call(b2, p2))\n          d2[p2] = b2[p2];\n    };\n    return extendStatics(d, b);\n  };\n  return function(d, b) {\n    if (typeof b !== \"function\" && b !== null)\n      throw new TypeError(\"Class extends value \" + String(b) + \" is not a constructor or null\");\n    extendStatics(d, b);\n    function __() {\n      this.constructor = d;\n    }\n    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n  };\n}();\nvar __assign$F = globalThis && globalThis.__assign || function() {\n  __assign$F = Object.assign || function(t2) {\n    for (var s, i = 1, n2 = arguments.length; i < n2; i++) {\n      s = arguments[i];\n      for (var p2 in s)\n        if (Object.prototype.hasOwnProperty.call(s, p2))\n          t2[p2] = s[p2];\n    }\n    return t2;\n  };\n  return __assign$F.apply(this, arguments);\n};\nfunction getDOMPos(dom) {\n  if (!dom) {\n    return {};\n  }\n  var _a = dom.getBoundingClientRect(), width = _a.width, height = _a.height, left = _a.left, right = _a.right;\n  return {\n    width,\n    height,\n    left,\n    right\n  };\n}\nvar EventsByTriggerNeed = [\n  \"onClick\",\n  \"onMouseEnter\",\n  \"onMouseLeave\",\n  \"onMouseMove\",\n  \"onFocus\",\n  \"onBlur\",\n  \"onContextMenu\",\n  \"onKeyDown\"\n];\nfunction splitChildrenStyle(obj, keys) {\n  var picked = {};\n  var omitted = __assign$F({}, obj);\n  keys.forEach(function(key) {\n    if (obj && key in obj) {\n      picked[key] = obj[key];\n      delete omitted[key];\n    }\n  });\n  return { picked, omitted };\n}\nvar defaultProps$g = {\n  blurToHide: true,\n  clickToClose: true,\n  classNames: \"fadeIn\",\n  trigger: \"hover\",\n  position: \"bottom\",\n  duration: 200,\n  unmountOnExit: true,\n  popupAlign: {},\n  popupHoverStay: true,\n  clickOutsideToClose: true,\n  escToClose: false,\n  mouseLeaveToClose: true,\n  getDocument: function() {\n    return window.document;\n  },\n  autoFixPosition: true,\n  mouseEnterDelay: 100,\n  mouseLeaveDelay: 100,\n  autoFitPosition: true\n};\nvar Trigger = function(_super) {\n  __extends$2(Trigger2, _super);\n  function Trigger2(props, context) {\n    var _this = _super.call(this, props, context) || this;\n    _this.delayTimer = null;\n    _this.updatePositionTimer = null;\n    _this.popupOpen = false;\n    _this.mousedownToHide = false;\n    _this.hasPopupMouseDown = false;\n    _this.unmount = false;\n    _this.mouseLocation = {\n      clientX: 0,\n      clientY: 0\n    };\n    _this.observerContainer = null;\n    _this.resizeObserver = new index$f(function() {\n      _this.handleContainerResize();\n    });\n    _this.childrenDom = null;\n    _this.childrenDomSize = {};\n    _this.getMergedProps = function(baseProps) {\n      var componentConfig2 = _this.context.componentConfig;\n      var props2 = mergeProps(baseProps || _this.props, defaultProps$g, componentConfig2 === null || componentConfig2 === void 0 ? void 0 : componentConfig2.Trigger);\n      return props2;\n    };\n    _this.getRootElement = function() {\n      return reactDom.exports.findDOMNode(_this);\n    };\n    _this.isDidMount = false;\n    _this.offWindowResize = function() {\n      _this.handleWindowResize = false;\n      off(window, \"resize\", _this.handleContainerResize);\n    };\n    _this.offContainerResize = function() {\n      if (_this.resizeObserver && _this.observerContainer) {\n        _this.resizeObserver.unobserve(_this.observerContainer);\n        _this.observerContainer = null;\n      }\n    };\n    _this.onContainerResize = function() {\n      var _a;\n      var containerParent = (_a = _this.popupContainer) === null || _a === void 0 ? void 0 : _a.parentNode;\n      if (_this.resizeObserver && _this.observerContainer !== containerParent) {\n        _this.offContainerResize();\n        containerParent && _this.resizeObserver.observe(containerParent);\n        _this.observerContainer = containerParent;\n      }\n    };\n    _this.handleContainerResize = throttleByRaf(function() {\n      _this.updatePopupPosition();\n    });\n    _this.isClickTrigger = function() {\n      var trigger = _this.getMergedProps().trigger;\n      return [].concat(trigger).indexOf(\"click\") > -1;\n    };\n    _this.isFocusTrigger = function() {\n      var trigger = _this.getMergedProps().trigger;\n      return [].concat(trigger).indexOf(\"focus\") > -1;\n    };\n    _this.isHoverTrigger = function() {\n      var trigger = _this.getMergedProps().trigger;\n      return [].concat(trigger).indexOf(\"hover\") > -1;\n    };\n    _this.isContextMenuTrigger = function() {\n      var trigger = _this.getMergedProps().trigger;\n      return [].concat(trigger).indexOf(\"contextMenu\") > -1;\n    };\n    _this.isMouseLeaveToClose = function() {\n      return _this.isHoverTrigger() && _this.getMergedProps().mouseLeaveToClose;\n    };\n    _this.isPopupHoverHide = function() {\n      return _this.isHoverTrigger() && !_this.getMergedProps().popupHoverStay;\n    };\n    _this.isClickToHide = function() {\n      return (_this.isClickTrigger() || _this.isContextMenuTrigger()) && _this.getMergedProps().clickToClose;\n    };\n    _this.isBlurToHide = function() {\n      return _this.isFocusTrigger() && _this.getMergedProps().blurToHide;\n    };\n    _this.clearTimer = function() {\n      if (_this.updatePositionTimer) {\n        if (_this.updatePositionTimer.cancel) {\n          _this.updatePositionTimer.cancel();\n        } else {\n          clearTimeout(_this.updatePositionTimer);\n          _this.updatePositionTimer = null;\n        }\n      }\n      if (_this.delayTimer) {\n        clearTimeout(_this.delayTimer);\n        _this.delayTimer = null;\n      }\n      if (_this.mouseDownTimeout) {\n        clearTimeout(_this.mouseDownTimeout);\n        _this.mouseDownTimeout = null;\n      }\n    };\n    _this.offClickOutside = function() {\n      if (_this.handleClickOutside) {\n        var getDocument = _this.getMergedProps().getDocument;\n        var root2 = isFunction$3(getDocument) && getDocument();\n        off(root2, \"mousedown\", _this.onClickOutside);\n        _this.handleClickOutside = false;\n      }\n    };\n    _this.getTransformOrigin = function(position) {\n      var _a, _b;\n      var content = reactDom.exports.findDOMNode(_this.triggerRef);\n      if (!content)\n        return {};\n      var _c = _this.getMergedProps(), showArrow = _c.showArrow, classNames = _c.classNames;\n      var top = showArrow && ((_a = _this.arrowStyle) === null || _a === void 0 ? void 0 : _a.top) || 0;\n      var left = showArrow && ((_b = _this.arrowStyle) === null || _b === void 0 ? void 0 : _b.left) || 0;\n      top = top ? top + \"px\" : \"\";\n      left = left ? left + \"px\" : \"\";\n      var transformOrigin = {\n        top: (left || \"50%\") + \" 100% 0\",\n        tl: (left || \"15px\") + \" 100% 0\",\n        tr: (left || content.clientWidth - 15 + \"px\") + \" 100% 0\",\n        bottom: (left || \"50%\") + \" 0 0\",\n        bl: (left || \"15px\") + \" 0 0\",\n        br: (left || content.clientWidth - 15 + \"px\") + \" 0 0\",\n        left: \"100% \" + (top || \"50%\") + \" 0\",\n        lt: \"100% \" + (top || \"15px\") + \" 0\",\n        lb: \"100% \" + (top || content.clientHeight - 15 + \"px\") + \" 0\",\n        right: \"0 \" + (top || \"50%\") + \" 0\",\n        rt: \"0 \" + (top || \"15px\") + \" 0\",\n        rb: \"0 \" + (top || content.clientHeight - 15 + \"px\") + \" 0\"\n      };\n      if (classNames && classNames.indexOf(\"zoom\") > -1) {\n        return {\n          transformOrigin: transformOrigin[position]\n        };\n      }\n      if (classNames === \"slideDynamicOrigin\") {\n        var origin_1 = \"0% 0%\";\n        if ([\"top\", \"tl\", \"tr\"].indexOf(position) > -1) {\n          origin_1 = \"100% 100%\";\n        }\n        return {\n          transformOrigin: origin_1\n        };\n      }\n      return {};\n    };\n    _this.getTransformTranslate = function() {\n      if (_this.getMergedProps().classNames !== \"slideDynamicOrigin\") {\n        return \"\";\n      }\n      switch (_this.realPosition) {\n        case \"bottom\":\n        case \"bl\":\n        case \"br\":\n          return \"scaleY(0.9) translateY(-4px)\";\n        case \"top\":\n        case \"tl\":\n        case \"tr\":\n          return \"scaleY(0.9) translateY(4px)\";\n        default:\n          return \"\";\n      }\n    };\n    _this.getPopupStyle = function() {\n      if (_this.unmount || !_this.popupContainer) {\n        return;\n      }\n      var mountContainer = _this.popupContainer;\n      var content = reactDom.exports.findDOMNode(_this.triggerRef);\n      var child = reactDom.exports.findDOMNode(_this);\n      var _a = getStyle(_this.getMergedProps(), content, child, mountContainer, _this.mouseLocation), style = _a.style, arrowStyle = _a.arrowStyle, realPosition = _a.realPosition;\n      _this.realPosition = realPosition || _this.getMergedProps().position;\n      _this.arrowStyle = arrowStyle || {};\n      return __assign$F(__assign$F({}, style), _this.getTransformOrigin(_this.realPosition));\n    };\n    _this.showPopup = function(callback) {\n      if (callback === void 0) {\n        callback = function() {\n        };\n      }\n      var popupStyle = _this.getPopupStyle();\n      _this.setState({\n        popupStyle\n      }, callback);\n    };\n    _this.update = throttleByRaf(function(callback) {\n      if (_this.unmount || !_this.state.popupVisible) {\n        return;\n      }\n      var popupStyle = _this.getPopupStyle();\n      _this.setState({\n        popupStyle\n      }, function() {\n        callback && callback();\n      });\n    });\n    _this.updatePopupPosition = function(delay, callback) {\n      if (delay === void 0) {\n        delay = 0;\n      }\n      var currentVisible = _this.state.popupVisible;\n      if (!currentVisible) {\n        return;\n      }\n      if (delay < 4) {\n        _this.updatePositionTimer = _this.update(callback);\n        return;\n      }\n      _this.updatePositionTimer = setTimeout(function() {\n        var popupStyle = _this.getPopupStyle();\n        _this.setState({\n          popupStyle\n        }, function() {\n          callback && callback();\n        });\n      }, delay);\n    };\n    _this.setPopupVisible = function(visible, delay, callback) {\n      if (delay === void 0) {\n        delay = 0;\n      }\n      var mergedProps2 = _this.getMergedProps();\n      var onVisibleChange = mergedProps2.onVisibleChange;\n      var currentVisible = _this.state.popupVisible;\n      if (visible !== currentVisible) {\n        _this.delayToDo(delay, function() {\n          onVisibleChange && onVisibleChange(visible);\n          if (!(\"popupVisible\" in mergedProps2)) {\n            if (visible) {\n              _this.setState({\n                popupVisible: true\n              }, function() {\n                _this.showPopup(callback);\n              });\n            } else {\n              _this.setState({\n                popupVisible: false\n              }, function() {\n                callback && callback();\n              });\n            }\n          } else {\n            callback && callback();\n          }\n        });\n      } else {\n        callback && callback();\n      }\n    };\n    _this.delayToDo = function(delay, callback) {\n      if (delay) {\n        _this.clearDelayTimer();\n        _this.delayTimer = setTimeout(function() {\n          callback();\n          _this.clearDelayTimer();\n        }, delay);\n      } else {\n        callback();\n      }\n    };\n    _this.onClickOutside = function(e) {\n      var _a = _this.getMergedProps(), onClickOutside = _a.onClickOutside, clickOutsideToClose = _a.clickOutsideToClose;\n      var triggerNode = reactDom.exports.findDOMNode(_this.triggerRef);\n      var childrenDom = reactDom.exports.findDOMNode(_this);\n      if (!contains(triggerNode, e.target) && !contains(childrenDom, e.target) && !_this.hasPopupMouseDown) {\n        onClickOutside && onClickOutside();\n        if (clickOutsideToClose) {\n          if (!_this.isBlurToHide() && !_this.isHoverTrigger()) {\n            _this.setPopupVisible(false);\n          }\n        }\n      }\n    };\n    _this.onKeyDown = function(e) {\n      var keyCode = e.keyCode || e.which;\n      _this.triggerPropsEvent(\"onKeyDown\", e);\n      if (keyCode === Esc.code) {\n        _this.onPressEsc(e);\n      }\n    };\n    _this.onPressEsc = function(e) {\n      var escToClose = _this.getMergedProps().escToClose;\n      if (escToClose && e && e.key === Esc.key && _this.state.popupVisible) {\n        _this.setPopupVisible(false);\n      }\n    };\n    _this.onMouseEnter = function(e) {\n      var mouseEnterDelay = _this.getMergedProps().mouseEnterDelay;\n      _this.triggerPropsEvent(\"onMouseEnter\", e);\n      _this.clearDelayTimer();\n      _this.setPopupVisible(true, mouseEnterDelay || 0);\n    };\n    _this.onMouseMove = function(e) {\n      _this.triggerPropsEvent(\"onMouseMove\", e);\n      _this.setMouseLocation(e);\n      if (_this.state.popupVisible) {\n        _this.update();\n      }\n    };\n    _this.onMouseLeave = function(e) {\n      var mouseLeaveDelay = _this.getMergedProps().mouseLeaveDelay;\n      _this.clearDelayTimer();\n      _this.triggerPropsEvent(\"onMouseLeave\", e);\n      if (_this.isMouseLeaveToClose()) {\n        if (_this.state.popupVisible) {\n          _this.setPopupVisible(false, mouseLeaveDelay || 0);\n        }\n      }\n    };\n    _this.onPopupMouseEnter = function() {\n      _this.clearDelayTimer();\n    };\n    _this.onPopupMouseLeave = function(e) {\n      _this.onMouseLeave(e);\n    };\n    _this.setMouseLocation = function(e) {\n      if (_this.getMergedProps().alignPoint) {\n        _this.mouseLocation = {\n          clientX: e.clientX,\n          clientY: e.clientY\n        };\n      }\n    };\n    _this.onContextMenu = function(e) {\n      e.preventDefault();\n      _this.triggerPropsEvent(\"onContextMenu\", e);\n      _this.setMouseLocation(e);\n      if (!_this.state.popupVisible) {\n        _this.setPopupVisible(true, 0);\n      } else {\n        _this.getMergedProps().alignPoint && _this.update();\n      }\n    };\n    _this.hideContextMenu = function(e) {\n      var popupVisible2 = _this.state.popupVisible;\n      if (popupVisible2) {\n        _this.mousedownToHide = true;\n      }\n      _this.triggerPropsEvent(\"onClick\", e);\n      if (_this.isClickToHide() && popupVisible2) {\n        _this.setPopupVisible(!popupVisible2, 0);\n      }\n    };\n    _this.onClick = function(e) {\n      var popupVisible2 = _this.state.popupVisible;\n      if (popupVisible2) {\n        _this.mousedownToHide = true;\n      }\n      _this.triggerPropsEvent(\"onClick\", e);\n      _this.setMouseLocation(e);\n      if (!_this.isClickToHide() && popupVisible2) {\n        return;\n      }\n      _this.setPopupVisible(!popupVisible2, 0);\n    };\n    _this.onFocus = function(e) {\n      var focusDelay = _this.getMergedProps().focusDelay;\n      var onFocus3 = function() {\n        _this.triggerPropsEvent(\"onFocus\", e);\n      };\n      _this.clearDelayTimer();\n      if (!_this.mousedownToHide) {\n        if (_this.state.popupVisible) {\n          onFocus3 && onFocus3();\n        } else {\n          _this.setPopupVisible(true, focusDelay || 0, onFocus3);\n        }\n      }\n      _this.mousedownToHide = false;\n    };\n    _this.onBlur = function(e) {\n      _this.setPopupVisible(false, 200, function() {\n        return _this.triggerPropsEvent(\"onBlur\", e);\n      });\n    };\n    _this.onResize = function() {\n      if (_this.getMergedProps().autoFixPosition && _this.state.popupVisible) {\n        _this.updatePopupPosition();\n      }\n    };\n    _this.onPopupMouseDown = function() {\n      _this.hasPopupMouseDown = true;\n      clearTimeout(_this.mouseDownTimeout);\n      _this.mouseDownTimeout = setTimeout(function() {\n        _this.hasPopupMouseDown = false;\n      }, 0);\n    };\n    _this.getChild = function() {\n      var children = _this.getMergedProps().children;\n      var element = children;\n      var elementType = element && typeof element !== \"string\" && element.type;\n      var child = children;\n      if ([\"string\", \"number\"].indexOf(typeof children) > -1 || React.Children.count(children) > 1) {\n        child = React.createElement(\"span\", null, children);\n      } else if (element && elementType && (elementType.__BYTE_BUTTON === true || elementType.__BYTE_CHECKBOX === true || elementType.__BYTE_SWITCH === true || elementType.__BYTE_RADIO === true || elementType === \"button\") && element.props.disabled) {\n        var _a = splitChildrenStyle(element.props.style, [\n          \"position\",\n          \"left\",\n          \"right\",\n          \"top\",\n          \"bottom\",\n          \"float\",\n          \"display\",\n          \"zIndex\"\n        ]), picked = _a.picked, omitted = _a.omitted;\n        child = React.createElement(\"span\", { className: element.props.className, style: __assign$F(__assign$F({ display: \"inline-block\" }, picked), { cursor: \"not-allowed\" }) }, React.cloneElement(element, {\n          style: __assign$F(__assign$F({}, omitted), { pointerEvents: \"none\" }),\n          className: void 0\n        }));\n      }\n      return child || React.createElement(\"span\", null);\n    };\n    _this.appendToContainer = function(node) {\n      caf(_this.rafId);\n      if (_this.isDidMount) {\n        var getGlobalPopupContainer = _this.context.getPopupContainer;\n        var getPopupContainer = _this.getMergedProps().getPopupContainer;\n        var gpc = getPopupContainer || getGlobalPopupContainer;\n        var rootElement = _this.getRootElement();\n        var parent_1 = gpc(rootElement);\n        if (parent_1) {\n          parent_1.appendChild(node);\n          return;\n        }\n      }\n      _this.rafId = raf(function() {\n        _this.appendToContainer(node);\n      });\n    };\n    _this.getContainer = function() {\n      var popupContainer = document.createElement(\"div\");\n      popupContainer.style.width = \"100%\";\n      popupContainer.style.position = \"absolute\";\n      popupContainer.style.top = \"0\";\n      popupContainer.style.left = \"0\";\n      _this.popupContainer = popupContainer;\n      _this.appendToContainer(popupContainer);\n      return popupContainer;\n    };\n    _this.triggerPropsEvent = function(eventName, e) {\n      var child = _this.getChild();\n      var childHandler = child && child.props && child.props[eventName];\n      var props2 = _this.getMergedProps();\n      if (isFunction$3(childHandler)) {\n        childHandler(e);\n      }\n      if (isFunction$3(props2[eventName])) {\n        props2[eventName](e);\n      }\n    };\n    _this.triggerOriginEvent = function(eventName) {\n      var child = _this.getChild();\n      var childHandler = child && child.props && child.props[eventName];\n      var propsHandler = _this.getMergedProps()[eventName];\n      if (isFunction$3(propsHandler) && isFunction$3(childHandler)) {\n        return function(e) {\n          childHandler(e);\n          propsHandler(e);\n        };\n      }\n      return childHandler || propsHandler;\n    };\n    var mergedProps = _this.getMergedProps(props);\n    var popupVisible = \"popupVisible\" in mergedProps ? mergedProps.popupVisible : mergedProps.defaultPopupVisible;\n    _this.popupOpen = !!popupVisible;\n    _this.state = {\n      popupVisible: !!popupVisible,\n      popupStyle: {}\n    };\n    return _this;\n  }\n  Trigger2.getDerivedStateFromProps = function(nextProps, state) {\n    if (\"popupVisible\" in nextProps && nextProps.popupVisible !== state.popupVisible) {\n      return {\n        popupVisible: nextProps.popupVisible\n      };\n    }\n    return null;\n  };\n  Trigger2.prototype.componentDidMount = function() {\n    this.componentDidUpdate(this.getMergedProps());\n    this.isDidMount = true;\n    this.childrenDom = reactDom.exports.findDOMNode(this);\n    this.childrenDomSize = getDOMPos(this.childrenDom);\n  };\n  Trigger2.prototype.componentDidUpdate = function(_prevProps) {\n    var prevProps = this.getMergedProps(_prevProps);\n    var currentProps = this.getMergedProps();\n    if (!prevProps.popupVisible && currentProps.popupVisible) {\n      this.update();\n    }\n    var popupVisible = this.state.popupVisible;\n    this.popupOpen = popupVisible;\n    var getDocument = currentProps.getDocument;\n    if (!popupVisible) {\n      this.offClickOutside();\n      this.offContainerResize();\n      this.offWindowResize();\n      return;\n    }\n    var rect = getDOMPos(this.childrenDom);\n    if (JSON.stringify(rect) !== JSON.stringify(this.childrenDomSize)) {\n      this.updatePopupPosition();\n      this.childrenDomSize = rect;\n    }\n    this.onContainerResize();\n    if (!this.handleWindowResize) {\n      on(window, \"resize\", this.handleContainerResize);\n      this.handleWindowResize = true;\n    }\n    if (!this.handleClickOutside) {\n      var root2 = isFunction$3(getDocument) && getDocument();\n      if (root2) {\n        on(root2, \"mousedown\", this.onClickOutside);\n        this.handleClickOutside = true;\n      }\n    }\n  };\n  Trigger2.prototype.componentWillUnmount = function() {\n    this.unmount = true;\n    this.offClickOutside();\n    this.clearTimer();\n    this.offWindowResize();\n    this.offContainerResize();\n    caf(this.rafId);\n  };\n  Trigger2.prototype.clearDelayTimer = function() {\n    if (this.delayTimer) {\n      clearTimeout(this.delayTimer);\n      this.delayTimer = null;\n    }\n  };\n  Trigger2.prototype.render = function() {\n    var _a, _b;\n    var _this = this;\n    var _c;\n    var _d = this.getMergedProps(), children = _d.children, style = _d.style, className = _d.className, arrowProps = _d.arrowProps, disabled = _d.disabled, popup = _d.popup, classNames = _d.classNames, duration2 = _d.duration, unmountOnExit = _d.unmountOnExit, alignPoint = _d.alignPoint, autoAlignPopupWidth = _d.autoAlignPopupWidth, position = _d.position, childrenPrefix = _d.childrenPrefix, showArrow = _d.showArrow, dropdownPopupStyle = _d.popupStyle;\n    var isExistChildren = children || children === 0;\n    var _e = this.context, getPrefixCls = _e.getPrefixCls, zIndex = _e.zIndex;\n    var _f = this.state, popupVisible = _f.popupVisible, popupStyle = _f.popupStyle;\n    if (!popup) {\n      return null;\n    }\n    var mergeProps2 = {};\n    var popupEventProps = {\n      onMouseDown: this.onPopupMouseDown\n    };\n    if (this.isHoverTrigger() && !disabled) {\n      mergeProps2.onMouseEnter = this.onMouseEnter;\n      mergeProps2.onMouseLeave = this.onMouseLeave;\n      if (alignPoint) {\n        mergeProps2.onMouseMove = this.onMouseMove;\n      }\n      if (!this.isPopupHoverHide()) {\n        popupEventProps.onMouseEnter = this.onPopupMouseEnter;\n        popupEventProps.onMouseLeave = this.onPopupMouseLeave;\n      }\n    } else {\n      mergeProps2.onMouseEnter = this.triggerOriginEvent(\"onMouseEnter\");\n      mergeProps2.onMouseLeave = this.triggerOriginEvent(\"onMouseLeave\");\n    }\n    if (this.isContextMenuTrigger() && !disabled) {\n      mergeProps2.onContextMenu = this.onContextMenu;\n      mergeProps2.onClick = this.hideContextMenu;\n    } else {\n      mergeProps2.onContextMenu = this.triggerOriginEvent(\"onContextMenu\");\n    }\n    if (this.isClickTrigger() && !disabled) {\n      mergeProps2.onClick = this.onClick;\n    } else {\n      mergeProps2.onClick = mergeProps2.onClick || this.triggerOriginEvent(\"onClick\");\n    }\n    if (this.isFocusTrigger() && !disabled) {\n      mergeProps2.onFocus = this.onFocus;\n      if (this.isBlurToHide()) {\n        mergeProps2.onBlur = this.onBlur;\n      }\n    } else {\n      mergeProps2.onFocus = this.triggerOriginEvent(\"onFocus\");\n      mergeProps2.onBlur = this.triggerOriginEvent(\"onBlur\");\n    }\n    if (!disabled) {\n      mergeProps2.onKeyDown = this.onKeyDown;\n    } else {\n      mergeProps2.onKeyDown = this.triggerOriginEvent(\"onKeyDown\");\n    }\n    var child = this.getChild();\n    var popupChildren = React.Children.only(popup());\n    if (child.props.className) {\n      mergeProps2.className = child.props.className;\n    }\n    if (childrenPrefix && popupVisible) {\n      mergeProps2.className = mergeProps2.className ? mergeProps2.className + \" \" + childrenPrefix + \"-open\" : childrenPrefix + \"-open\";\n    }\n    if (this.isFocusTrigger()) {\n      mergeProps2.tabIndex = disabled ? -1 : 0;\n    }\n    var prefixCls2 = getPrefixCls(\"trigger\");\n    var popupClassName = cs$1(prefixCls2, childrenPrefix, prefixCls2 + \"-position-\" + position, className);\n    var childrenComponent = isExistChildren && React.createElement(ResizeObserver, { onResize: this.onResize }, React.cloneElement(child, __assign$F({}, mergeProps2)));\n    var portalContent = React.createElement(CSSTransition$3, { in: !!popupVisible, timeout: duration2, classNames, unmountOnExit, appear: true, mountOnEnter: true, onEnter: function(e) {\n      e.style.display = \"initial\";\n      e.style.pointerEvents = \"none\";\n      if (classNames === \"slideDynamicOrigin\") {\n        e.style.transform = _this.getTransformTranslate();\n      }\n    }, onEntering: function(e) {\n      if (classNames === \"slideDynamicOrigin\") {\n        e.style.transform = \"\";\n      }\n    }, onEntered: function(e) {\n      e.style.pointerEvents = \"auto\";\n      _this.forceUpdate();\n    }, onExit: function(e) {\n      e.style.pointerEvents = \"none\";\n    }, onExited: function(e) {\n      e.style.display = \"none\";\n      if (unmountOnExit) {\n        _this.triggerRef = null;\n      }\n      _this.setState({ popupStyle: {} });\n    } }, React.createElement(ResizeObserver, { onResize: this.onResize }, React.createElement(\"span\", __assign$F({ ref: function(node) {\n      return _this.triggerRef = node;\n    }, \"trigger-placement\": this.realPosition, style: __assign$F(__assign$F(__assign$F({ width: autoAlignPopupWidth && (style === null || style === void 0 ? void 0 : style.width) === void 0 ? (_c = this.childrenDomSize) === null || _c === void 0 ? void 0 : _c.width : \"\" }, popupStyle), { position: \"absolute\", zIndex: zIndex || \"\" }), style) }, popupEventProps, { className: popupClassName }), React.createElement(popupChildren.type, __assign$F({ ref: popupChildren.ref }, popupChildren.props, { style: __assign$F(__assign$F({}, popupChildren.props.style), dropdownPopupStyle) })), (showArrow || arrowProps) && React.createElement(\"div\", { className: cs$1(prefixCls2 + \"-arrow-container\", (_a = {}, _a[childrenPrefix + \"-arrow-container\"] = childrenPrefix, _a)) }, React.createElement(\"div\", __assign$F({}, arrowProps, { className: cs$1(prefixCls2 + \"-arrow\", (_b = {}, _b[childrenPrefix + \"-arrow\"] = childrenPrefix, _b), arrowProps === null || arrowProps === void 0 ? void 0 : arrowProps.className), style: __assign$F(__assign$F({}, this.arrowStyle), arrowProps === null || arrowProps === void 0 ? void 0 : arrowProps.style) }))))));\n    var portal = popupVisible || this.triggerRef ? React.createElement(Portal$4, { getContainer: this.getContainer }, portalContent) : null;\n    return isExistChildren ? React.createElement(React.Fragment, null, childrenComponent, portal) : portal;\n  };\n  Trigger2.displayName = \"Trigger\";\n  Trigger2.contextType = ConfigContext;\n  return Trigger2;\n}(react.exports.PureComponent);\nvar Trigger$1 = Trigger;\nvar __assign$E = globalThis && globalThis.__assign || function() {\n  __assign$E = Object.assign || function(t2) {\n    for (var s, i = 1, n2 = arguments.length; i < n2; i++) {\n      s = arguments[i];\n      for (var p2 in s)\n        if (Object.prototype.hasOwnProperty.call(s, p2))\n          t2[p2] = s[p2];\n    }\n    return t2;\n  };\n  return __assign$E.apply(this, arguments);\n};\nvar __rest$k = globalThis && globalThis.__rest || function(s, e) {\n  var t2 = {};\n  for (var p2 in s)\n    if (Object.prototype.hasOwnProperty.call(s, p2) && e.indexOf(p2) < 0)\n      t2[p2] = s[p2];\n  if (s != null && typeof Object.getOwnPropertySymbols === \"function\")\n    for (var i = 0, p2 = Object.getOwnPropertySymbols(s); i < p2.length; i++) {\n      if (e.indexOf(p2[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p2[i]))\n        t2[p2[i]] = s[p2[i]];\n    }\n  return t2;\n};\nfunction OptGroup(props, ref) {\n  var prefixCls2 = props.prefixCls, label = props.label, rest = __rest$k(props, [\"prefixCls\", \"label\"]);\n  return React.createElement(\"li\", __assign$E({ ref, className: prefixCls2 + \"-group-title\" }, omit(rest, [\"_key\", \"children\", \"isSelectOptGroup\"])), label);\n}\nvar OptGroupComponent = React.forwardRef(OptGroup);\nOptGroupComponent.defaultProps = {\n  isSelectOptGroup: true\n};\nvar OptGroup$1 = OptGroupComponent;\nvar __read$G = globalThis && globalThis.__read || function(o, n2) {\n  var m2 = typeof Symbol === \"function\" && o[Symbol.iterator];\n  if (!m2)\n    return o;\n  var i = m2.call(o), r2, ar = [], e;\n  try {\n    while ((n2 === void 0 || n2-- > 0) && !(r2 = i.next()).done)\n      ar.push(r2.value);\n  } catch (error) {\n    e = { error };\n  } finally {\n    try {\n      if (r2 && !r2.done && (m2 = i[\"return\"]))\n        m2.call(i);\n    } finally {\n      if (e)\n        throw e.error;\n    }\n  }\n  return ar;\n};\nvar __spreadArray$b = globalThis && globalThis.__spreadArray || function(to, from, pack) {\n  if (pack || arguments.length === 2)\n    for (var i = 0, l2 = from.length, ar; i < l2; i++) {\n      if (ar || !(i in from)) {\n        if (!ar)\n          ar = Array.prototype.slice.call(from, 0, i);\n        ar[i] = from[i];\n      }\n    }\n  return to.concat(ar || Array.prototype.slice.call(from));\n};\nvar CheckboxGroupContext = react.exports.createContext({\n  isCheckboxGroup: false,\n  checkboxGroupValue: [],\n  onGroupChange: function() {\n  },\n  registerValue: function() {\n  },\n  unRegisterValue: function() {\n  }\n});\nfunction Group$2(props) {\n  var _a;\n  var _b = __read$G(useMergeValue([], {\n    defaultValue: \"defaultValue\" in props ? props.defaultValue || [] : void 0,\n    value: \"value\" in props ? props.value || [] : void 0\n  }), 2), value = _b[0], setValue = _b[1];\n  var _c = __read$G(react.exports.useState([]), 2), allOptionValues = _c[0], setAllOptionValues = _c[1];\n  var getPrefixCls = react.exports.useContext(ConfigContext).getPrefixCls;\n  var disabled = props.disabled, options = props.options, style = props.style, className = props.className, error = props.error, children = props.children, _d = props.direction, direction = _d === void 0 ? \"horizontal\" : _d;\n  var prefixCls2 = getPrefixCls(\"checkbox\");\n  var classNames = cs$1(prefixCls2 + \"-group\", (_a = {}, _a[prefixCls2 + \"-group-is-error\"] = error, _a[prefixCls2 + \"-group-direction-\" + direction] = direction, _a), className);\n  var onChange = react.exports.useCallback(function(optionValue, checked, e) {\n    var newVal = value.slice();\n    if (checked) {\n      newVal.push(optionValue);\n    } else {\n      newVal.splice(value.indexOf(optionValue), 1);\n    }\n    setValue(newVal);\n    props.onChange && props.onChange(newVal.filter(function(v2) {\n      return allOptionValues.indexOf(v2) > -1;\n    }), e);\n  }, [value, props.onChange, allOptionValues]);\n  return React.createElement(\"span\", { className: classNames, style }, React.createElement(CheckboxGroupContext.Provider, { value: {\n    isCheckboxGroup: true,\n    checkboxGroupValue: value,\n    onGroupChange: onChange,\n    disabled,\n    registerValue: function(value2) {\n      setAllOptionValues(function(allOptionValues2) {\n        return Array.from(new Set(__spreadArray$b(__spreadArray$b([], __read$G(allOptionValues2), false), [value2], false)));\n      });\n    },\n    unRegisterValue: function(value2) {\n      setAllOptionValues(function(allOptionValues2) {\n        return allOptionValues2.filter(function(x2) {\n          return x2 !== value2;\n        });\n      });\n    }\n  } }, isArray$5(options) ? options.map(function(option) {\n    var label = isObject$6(option) ? option.label : option;\n    var checkValue = isObject$6(option) ? option.value : option;\n    return React.createElement(Checkbox$1, { disabled: disabled || isObject$6(option) && option.disabled, key: checkValue, value: checkValue }, label);\n  }) : children));\n}\nGroup$2.displayName = \"CheckboxGroup\";\nvar __read$F = globalThis && globalThis.__read || function(o, n2) {\n  var m2 = typeof Symbol === \"function\" && o[Symbol.iterator];\n  if (!m2)\n    return o;\n  var i = m2.call(o), r2, ar = [], e;\n  try {\n    while ((n2 === void 0 || n2-- > 0) && !(r2 = i.next()).done)\n      ar.push(r2.value);\n  } catch (error) {\n    e = { error };\n  } finally {\n    try {\n      if (r2 && !r2.done && (m2 = i[\"return\"]))\n        m2.call(i);\n    } finally {\n      if (e)\n        throw e.error;\n    }\n  }\n  return ar;\n};\nvar __spreadArray$a = globalThis && globalThis.__spreadArray || function(to, from, pack) {\n  if (pack || arguments.length === 2)\n    for (var i = 0, l2 = from.length, ar; i < l2; i++) {\n      if (ar || !(i in from)) {\n        if (!ar)\n          ar = Array.prototype.slice.call(from, 0, i);\n        ar[i] = from[i];\n      }\n    }\n  return to.concat(ar || Array.prototype.slice.call(from));\n};\nvar useCheckbox = function(values2, defaultSelected) {\n  var _a = __read$F(react.exports.useState(__spreadArray$a([], __read$F(defaultSelected || []), false)), 2), selected = _a[0], setSelected = _a[1];\n  var _b = react.exports.useMemo(function() {\n    var isSelected2 = function(value) {\n      return selected.indexOf(value) > -1;\n    };\n    var setValueSelected2 = function(value, selectStatus) {\n      var list2 = isArray$5(value) ? value : [value];\n      var newSelected;\n      if (selectStatus) {\n        newSelected = __spreadArray$a(__spreadArray$a([], __read$F(selected), false), __read$F(list2), false);\n      } else {\n        newSelected = selected.filter(function(x2) {\n          return list2.indexOf(x2) === -1;\n        });\n      }\n      setSelected(Array.from(new Set(newSelected)));\n    };\n    return {\n      isSelected: isSelected2,\n      setValueSelected: setValueSelected2\n    };\n  }, [selected]), isSelected = _b.isSelected, setValueSelected = _b.setValueSelected;\n  var _c = react.exports.useMemo(function() {\n    var selectAll2 = function() {\n      setSelected(values2);\n    };\n    var unSelectAll2 = function() {\n      setSelected([]);\n    };\n    var toggle2 = function(value) {\n      if (value === void 0) {\n        value = values2;\n      }\n      var list2 = isArray$5(value) ? value : [value];\n      var newSelected = __spreadArray$a([], __read$F(selected), false);\n      list2.forEach(function(x2) {\n        var index2 = newSelected.indexOf(x2);\n        if (index2 > -1) {\n          newSelected.splice(index2, 1);\n        } else {\n          newSelected.push(x2);\n        }\n      });\n      setSelected(newSelected);\n    };\n    var isAllSelected2 = function() {\n      return values2.every(function(x2) {\n        return isSelected(x2);\n      });\n    };\n    var isPartialSelected2 = function() {\n      return values2.some(function(x2) {\n        return isSelected(x2);\n      }) && !isAllSelected2();\n    };\n    return {\n      selectAll: selectAll2,\n      unSelectAll: unSelectAll2,\n      toggle: toggle2,\n      isAllSelected: isAllSelected2,\n      isPartialSelected: isPartialSelected2\n    };\n  }, [selected, values2, isSelected]), selectAll = _c.selectAll, unSelectAll = _c.unSelectAll, toggle = _c.toggle, isAllSelected = _c.isAllSelected, isPartialSelected = _c.isPartialSelected;\n  return {\n    selected,\n    setSelected,\n    setValueSelected,\n    selectAll,\n    unSelectAll,\n    toggle,\n    isSelected,\n    isAllSelected,\n    isPartialSelected\n  };\n};\nvar useCheckbox$1 = useCheckbox;\nfunction IconCheck$2(_a) {\n  var className = _a.className;\n  return React.createElement(\"svg\", { className, viewBox: \"0 0 1024 1024\", width: \"200\", height: \"200\", fill: \"currentColor\" }, React.createElement(\"path\", { d: \"M877.44815445 206.10060629a64.72691371 64.72691371 0 0 0-95.14856334 4.01306852L380.73381888 685.46812814 235.22771741 533.48933518a64.72691371 64.72691371 0 0 0-92.43003222-1.03563036l-45.82665557 45.82665443a64.72691371 64.72691371 0 0 0-0.90617629 90.61767965l239.61903446 250.10479331a64.72691371 64.72691371 0 0 0 71.19960405 15.14609778 64.33855261 64.33855261 0 0 0 35.08198741-21.23042702l36.24707186-42.71976334 40.5190474-40.77795556-3.36579926-3.49525333 411.40426297-486.74638962a64.72691371 64.72691371 0 0 0-3.88361443-87.64024149l-45.3088404-45.43829334z\", \"p-id\": \"840\" }));\n}\nvar __assign$D = globalThis && globalThis.__assign || function() {\n  __assign$D = Object.assign || function(t2) {\n    for (var s, i = 1, n2 = arguments.length; i < n2; i++) {\n      s = arguments[i];\n      for (var p2 in s)\n        if (Object.prototype.hasOwnProperty.call(s, p2))\n          t2[p2] = s[p2];\n    }\n    return t2;\n  };\n  return __assign$D.apply(this, arguments);\n};\nvar __rest$j = globalThis && globalThis.__rest || function(s, e) {\n  var t2 = {};\n  for (var p2 in s)\n    if (Object.prototype.hasOwnProperty.call(s, p2) && e.indexOf(p2) < 0)\n      t2[p2] = s[p2];\n  if (s != null && typeof Object.getOwnPropertySymbols === \"function\")\n    for (var i = 0, p2 = Object.getOwnPropertySymbols(s); i < p2.length; i++) {\n      if (e.indexOf(p2[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p2[i]))\n        t2[p2[i]] = s[p2[i]];\n    }\n  return t2;\n};\nvar __read$E = globalThis && globalThis.__read || function(o, n2) {\n  var m2 = typeof Symbol === \"function\" && o[Symbol.iterator];\n  if (!m2)\n    return o;\n  var i = m2.call(o), r2, ar = [], e;\n  try {\n    while ((n2 === void 0 || n2-- > 0) && !(r2 = i.next()).done)\n      ar.push(r2.value);\n  } catch (error) {\n    e = { error };\n  } finally {\n    try {\n      if (r2 && !r2.done && (m2 = i[\"return\"]))\n        m2.call(i);\n    } finally {\n      if (e)\n        throw e.error;\n    }\n  }\n  return ar;\n};\nfunction Checkbox(baseProps, ref) {\n  var _a;\n  var _b = react.exports.useContext(ConfigContext), getPrefixCls = _b.getPrefixCls, componentConfig2 = _b.componentConfig;\n  var props = useMergeProps(baseProps, {}, componentConfig2 === null || componentConfig2 === void 0 ? void 0 : componentConfig2.Checkbox);\n  var context = react.exports.useContext(CheckboxGroupContext);\n  var prefixCls2 = getPrefixCls(\"checkbox\");\n  var onGroupChange = context.onGroupChange;\n  var mergeProps2 = __assign$D({}, props);\n  if (context.isCheckboxGroup) {\n    mergeProps2.checked = context.checkboxGroupValue.indexOf(props.value) !== -1;\n    mergeProps2.disabled = \"disabled\" in props ? props.disabled : context.disabled;\n  }\n  var disabled = mergeProps2.disabled, children = mergeProps2.children, className = mergeProps2.className, value = mergeProps2.value, style = mergeProps2.style, indeterminate = mergeProps2.indeterminate, error = mergeProps2.error, rest = __rest$j(mergeProps2, [\"disabled\", \"children\", \"className\", \"value\", \"style\", \"indeterminate\", \"error\"]);\n  var _c = __read$E(useMergeValue(false, {\n    value: mergeProps2.checked,\n    defaultValue: mergeProps2.defaultChecked\n  }), 2), checked = _c[0], setChecked = _c[1];\n  var classNames = cs$1(prefixCls2, (_a = {}, _a[prefixCls2 + \"-disabled\"] = !!disabled, _a[prefixCls2 + \"-indeterminate\"] = !!indeterminate, _a[prefixCls2 + \"-checked\"] = checked, _a.error = error, _a), className);\n  react.exports.useEffect(function() {\n    context.registerValue(value);\n    return function() {\n      context.unRegisterValue(value);\n    };\n  }, [value]);\n  var onChange = react.exports.useCallback(function(e) {\n    e.persist();\n    e.stopPropagation();\n    setChecked(e.target.checked);\n    if (context.isCheckboxGroup) {\n      onGroupChange && onGroupChange(props.value, e.target.checked, e);\n    }\n    props.onChange && props.onChange(e.target.checked, e);\n  }, [onGroupChange, context.isCheckboxGroup, props.onChange, props.value]);\n  return React.createElement(\"label\", __assign$D({ ref }, omit(rest, [\"onChange\"]), { className: classNames, style }), React.createElement(\"input\", {\n    value,\n    disabled: !!disabled,\n    checked: !!checked,\n    onChange,\n    onClick: function(e) {\n      return e.stopPropagation();\n    },\n    type: \"checkbox\"\n  }), React.createElement(IconHover, { prefix: prefixCls2, className: prefixCls2 + \"-mask-wrapper\", disabled: checked || disabled || indeterminate }, React.createElement(\"div\", { className: prefixCls2 + \"-mask\" }, React.createElement(IconCheck$2, { className: prefixCls2 + \"-mask-icon\" }))), children && React.createElement(\"span\", { className: prefixCls2 + \"-text\" }, children));\n}\nvar CheckboxComponent = React.forwardRef(Checkbox);\nCheckboxComponent.displayName = \"Checkbox\";\nCheckboxComponent.Group = Group$2;\nCheckboxComponent.useCheckbox = useCheckbox$1;\nvar Checkbox$1 = CheckboxComponent;\nvar __assign$C = globalThis && globalThis.__assign || function() {\n  __assign$C = Object.assign || function(t2) {\n    for (var s, i = 1, n2 = arguments.length; i < n2; i++) {\n      s = arguments[i];\n      for (var p2 in s)\n        if (Object.prototype.hasOwnProperty.call(s, p2))\n          t2[p2] = s[p2];\n    }\n    return t2;\n  };\n  return __assign$C.apply(this, arguments);\n};\nvar __rest$i = globalThis && globalThis.__rest || function(s, e) {\n  var t2 = {};\n  for (var p2 in s)\n    if (Object.prototype.hasOwnProperty.call(s, p2) && e.indexOf(p2) < 0)\n      t2[p2] = s[p2];\n  if (s != null && typeof Object.getOwnPropertySymbols === \"function\")\n    for (var i = 0, p2 = Object.getOwnPropertySymbols(s); i < p2.length; i++) {\n      if (e.indexOf(p2[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p2[i]))\n        t2[p2[i]] = s[p2[i]];\n    }\n  return t2;\n};\nfunction Option(props, ref) {\n  var _a, _b;\n  var style = props.style, className = props.className, wrapperClassName = props.wrapperClassName, disabled = props.disabled, prefixCls2 = props.prefixCls, isMultipleMode = props.isMultipleMode, propValue = props.value, propChildren = props.children, valueActive = props.valueActive, valueSelect = props.valueSelect, onMouseEnter = props.onMouseEnter, onMouseLeave = props.onMouseLeave, onClickOption = props.onClickOption, rest = __rest$i(props, [\"style\", \"className\", \"wrapperClassName\", \"disabled\", \"prefixCls\", \"isMultipleMode\", \"value\", \"children\", \"valueActive\", \"valueSelect\", \"onMouseEnter\", \"onMouseLeave\", \"onClickOption\"]);\n  var value = \"value\" in props ? propValue : \"\" + propChildren;\n  var childNode = \"children\" in props ? propChildren : \"\" + propValue;\n  var isChecked = isMultipleMode ? valueSelect.indexOf(value) !== -1 : valueSelect === value;\n  var optionLabelProps = __assign$C({ style, className: cs$1(prefixCls2 + \"-option\", (_a = {}, _a[prefixCls2 + \"-option-selected\"] = isChecked, _a[prefixCls2 + \"-option-disabled\"] = disabled, _a[prefixCls2 + \"-option-hover\"] = value === valueActive, _a[prefixCls2 + \"-option-empty\"] = !childNode && childNode !== 0, _a), className), onMouseEnter: function() {\n    return onMouseEnter && onMouseEnter(value);\n  }, onMouseLeave: function() {\n    return onMouseLeave && onMouseLeave();\n  }, onClick: function(event) {\n    onClickOption && onClickOption(value, disabled);\n    rest.onClick && rest.onClick(event);\n  } }, omit(rest, [\"_key\", \"extra\", \"isSelectOption\", \"onClick\", \"onMouseEnter\", \"onMouseLeave\"]));\n  if (isMultipleMode) {\n    return React.createElement(\"li\", { ref, className: cs$1(prefixCls2 + \"-option-wrapper\", (_b = {}, _b[prefixCls2 + \"-option-wrapper-selected\"] = isChecked, _b[prefixCls2 + \"-option-wrapper-disabled\"] = disabled, _b), wrapperClassName) }, React.createElement(Checkbox$1, { className: prefixCls2 + \"-checkbox\", checked: isChecked, disabled, onChange: optionLabelProps.onClick }), React.createElement(\"span\", __assign$C({}, optionLabelProps), childNode));\n  }\n  return React.createElement(\"li\", __assign$C({ ref }, optionLabelProps), childNode);\n}\nvar OptionComponent = React.forwardRef(Option);\nOptionComponent.defaultProps = {\n  isSelectOption: true\n};\nvar Option$1 = OptionComponent;\nvar stringifyHotkey = function(k) {\n  return JSON.stringify({\n    code: k.code,\n    ctrl: !!k.ctrl,\n    shift: !!k.shift,\n    alt: !!k.alt,\n    meta: !!k.meta\n  });\n};\nfunction getHotkeyHandler(hotkeyMap) {\n  var map = {};\n  hotkeyMap.forEach(function(callback, hotkey) {\n    hotkey = typeof hotkey === \"number\" ? { code: hotkey } : hotkey;\n    map[stringifyHotkey(hotkey)] = callback;\n  });\n  return function(event) {\n    var key = stringifyHotkey({\n      code: event.keyCode || event.which,\n      ctrl: !!event.ctrlKey,\n      shift: !!event.shiftKey,\n      alt: !!event.altKey,\n      meta: !!event.metaKey\n    });\n    var callback = map[key];\n    if (callback) {\n      event.stopPropagation();\n      if (callback(event) === false) {\n        event.preventDefault();\n      }\n    }\n  };\n}\nfunction ownKeys$l(object, enumerableOnly) {\n  var keys = Object.keys(object);\n  if (Object.getOwnPropertySymbols) {\n    var symbols = Object.getOwnPropertySymbols(object);\n    if (enumerableOnly) {\n      symbols = symbols.filter(function(sym) {\n        return Object.getOwnPropertyDescriptor(object, sym).enumerable;\n      });\n    }\n    keys.push.apply(keys, symbols);\n  }\n  return keys;\n}\nfunction _objectSpread$l(target2) {\n  for (var i = 1; i < arguments.length; i++) {\n    var source2 = arguments[i] != null ? arguments[i] : {};\n    if (i % 2) {\n      ownKeys$l(Object(source2), true).forEach(function(key) {\n        _defineProperty(target2, key, source2[key]);\n      });\n    } else if (Object.getOwnPropertyDescriptors) {\n      Object.defineProperties(target2, Object.getOwnPropertyDescriptors(source2));\n    } else {\n      ownKeys$l(Object(source2)).forEach(function(key) {\n        Object.defineProperty(target2, key, Object.getOwnPropertyDescriptor(source2, key));\n      });\n    }\n  }\n  return target2;\n}\nfunction IconDownComponent(iconProps, ref) {\n  var _useContext = react.exports.useContext(IconContext), prefixCls2 = _useContext.prefixCls;\n  var spin = iconProps.spin, className = iconProps.className;\n  var props = _objectSpread$l(_objectSpread$l({\n    ref\n  }, iconProps), {}, {\n    className: \"\".concat(className ? className + \" \" : \"\").concat(prefixCls2, \"-icon \").concat(prefixCls2, \"-icon-down\")\n  });\n  if (spin) {\n    props.className = \"\".concat(props.className, \" \").concat(prefixCls2, \"-icon-loading\");\n  }\n  delete props.spin;\n  delete props.isIcon;\n  return /* @__PURE__ */ React.createElement(\"svg\", _extends({\n    fill: \"none\",\n    stroke: \"currentColor\",\n    strokeWidth: \"4\",\n    viewBox: \"0 0 48 48\",\n    width: \"1em\",\n    height: \"1em\"\n  }, props), /* @__PURE__ */ React.createElement(\"path\", {\n    d: \"M39.6 17.443 24.043 33 8.487 17.443\"\n  }));\n}\nvar IconDown = /* @__PURE__ */ React.forwardRef(IconDownComponent);\nIconDown.defaultProps = {\n  isIcon: true\n};\nIconDown.displayName = \"IconDown\";\nvar IconDown$1 = IconDown;\nfunction ownKeys$k(object, enumerableOnly) {\n  var keys = Object.keys(object);\n  if (Object.getOwnPropertySymbols) {\n    var symbols = Object.getOwnPropertySymbols(object);\n    if (enumerableOnly) {\n      symbols = symbols.filter(function(sym) {\n        return Object.getOwnPropertyDescriptor(object, sym).enumerable;\n      });\n    }\n    keys.push.apply(keys, symbols);\n  }\n  return keys;\n}\nfunction _objectSpread$k(target2) {\n  for (var i = 1; i < arguments.length; i++) {\n    var source2 = arguments[i] != null ? arguments[i] : {};\n    if (i % 2) {\n      ownKeys$k(Object(source2), true).forEach(function(key) {\n        _defineProperty(target2, key, source2[key]);\n      });\n    } else if (Object.getOwnPropertyDescriptors) {\n      Object.defineProperties(target2, Object.getOwnPropertyDescriptors(source2));\n    } else {\n      ownKeys$k(Object(source2)).forEach(function(key) {\n        Object.defineProperty(target2, key, Object.getOwnPropertyDescriptor(source2, key));\n      });\n    }\n  }\n  return target2;\n}\nfunction IconExpandComponent(iconProps, ref) {\n  var _useContext = react.exports.useContext(IconContext), prefixCls2 = _useContext.prefixCls;\n  var spin = iconProps.spin, className = iconProps.className;\n  var props = _objectSpread$k(_objectSpread$k({\n    ref\n  }, iconProps), {}, {\n    className: \"\".concat(className ? className + \" \" : \"\").concat(prefixCls2, \"-icon \").concat(prefixCls2, \"-icon-expand\")\n  });\n  if (spin) {\n    props.className = \"\".concat(props.className, \" \").concat(prefixCls2, \"-icon-loading\");\n  }\n  delete props.spin;\n  delete props.isIcon;\n  return /* @__PURE__ */ React.createElement(\"svg\", _extends({\n    fill: \"none\",\n    stroke: \"currentColor\",\n    strokeWidth: \"4\",\n    viewBox: \"0 0 48 48\",\n    width: \"1em\",\n    height: \"1em\"\n  }, props), /* @__PURE__ */ React.createElement(\"path\", {\n    d: \"M7 26v14c0 .552.444 1 .996 1H22m19-19V8c0-.552-.444-1-.996-1H26\"\n  }));\n}\nvar IconExpand = /* @__PURE__ */ React.forwardRef(IconExpandComponent);\nIconExpand.defaultProps = {\n  isIcon: true\n};\nIconExpand.displayName = \"IconExpand\";\nvar IconExpand$1 = IconExpand;\nvar __assign$B = globalThis && globalThis.__assign || function() {\n  __assign$B = Object.assign || function(t2) {\n    for (var s, i = 1, n2 = arguments.length; i < n2; i++) {\n      s = arguments[i];\n      for (var p2 in s)\n        if (Object.prototype.hasOwnProperty.call(s, p2))\n          t2[p2] = s[p2];\n    }\n    return t2;\n  };\n  return __assign$B.apply(this, arguments);\n};\nvar __rest$h = globalThis && globalThis.__rest || function(s, e) {\n  var t2 = {};\n  for (var p2 in s)\n    if (Object.prototype.hasOwnProperty.call(s, p2) && e.indexOf(p2) < 0)\n      t2[p2] = s[p2];\n  if (s != null && typeof Object.getOwnPropertySymbols === \"function\")\n    for (var i = 0, p2 = Object.getOwnPropertySymbols(s); i < p2.length; i++) {\n      if (e.indexOf(p2[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p2[i]))\n        t2[p2[i]] = s[p2[i]];\n    }\n  return t2;\n};\nvar __read$D = globalThis && globalThis.__read || function(o, n2) {\n  var m2 = typeof Symbol === \"function\" && o[Symbol.iterator];\n  if (!m2)\n    return o;\n  var i = m2.call(o), r2, ar = [], e;\n  try {\n    while ((n2 === void 0 || n2-- > 0) && !(r2 = i.next()).done)\n      ar.push(r2.value);\n  } catch (error) {\n    e = { error };\n  } finally {\n    try {\n      if (r2 && !r2.done && (m2 = i[\"return\"]))\n        m2.call(i);\n    } finally {\n      if (e)\n        throw e.error;\n    }\n  }\n  return ar;\n};\nvar COLORS = [\n  \"red\",\n  \"orangered\",\n  \"orange\",\n  \"gold\",\n  \"lime\",\n  \"green\",\n  \"cyan\",\n  \"blue\",\n  \"arcoblue\",\n  \"purple\",\n  \"pinkpurple\",\n  \"magenta\",\n  \"gray\"\n];\nvar defaultProps$f = {\n  size: \"default\"\n};\nfunction Tag(baseProps, ref) {\n  var _a;\n  var _b = react.exports.useContext(ConfigContext), getPrefixCls = _b.getPrefixCls, componentConfig2 = _b.componentConfig;\n  var props = useMergeProps(baseProps, defaultProps$f, componentConfig2 === null || componentConfig2 === void 0 ? void 0 : componentConfig2.Tag);\n  var className = props.className, style = props.style, children = props.children, color = props.color, closable = props.closable, checkable = props.checkable, defaultChecked = props.defaultChecked, size = props.size, onClose = props.onClose, onCheck = props.onCheck, icon2 = props.icon, closeIcon = props.closeIcon, bordered = props.bordered, rest = __rest$h(props, [\"className\", \"style\", \"children\", \"color\", \"closable\", \"checkable\", \"defaultChecked\", \"size\", \"onClose\", \"onCheck\", \"icon\", \"closeIcon\", \"bordered\"]);\n  var prefixCls2 = getPrefixCls(\"tag\");\n  var _c = __read$D(react.exports.useState(\"visible\" in props ? props.visible : true), 2), visible = _c[0], setVisible = _c[1];\n  var _d = __read$D(react.exports.useState(\"checked\" in props ? props.checked : defaultChecked), 2), checked = _d[0], setChecked = _d[1];\n  var _e = __read$D(react.exports.useState(), 2), loading = _e[0], setLoading = _e[1];\n  var mergedChecked = \"checked\" in props ? props.checked : checked;\n  var mergedVisible = \"visible\" in props ? props.visible : visible;\n  function onHandleClose(e) {\n    var ret = onClose && onClose(e);\n    if (ret && ret.then) {\n      setLoading(true);\n      ret.then(function() {\n        setLoading(false);\n        setVisible(false);\n      }).catch(function() {\n        setLoading(false);\n      });\n    } else {\n      setVisible(false);\n    }\n  }\n  function onHandleCheck() {\n    var newChecked = !mergedChecked;\n    if (!(\"checked\" in props)) {\n      setChecked(newChecked);\n    }\n    onCheck && onCheck(newChecked);\n  }\n  var _color = color ? COLORS.indexOf(color) !== -1 ? color : \"\" : \"\";\n  var _checked = checkable ? mergedChecked : true;\n  var classNames = cs$1(prefixCls2, (_a = {}, _a[prefixCls2 + \"-loading\"] = loading, _a[prefixCls2 + \"-hide\"] = !mergedVisible, _a[prefixCls2 + \"-\" + _color] = _color, _a[prefixCls2 + \"-checkable\"] = checkable, _a[prefixCls2 + \"-checked\"] = _checked, _a[prefixCls2 + \"-size-\" + size] = size, _a[prefixCls2 + \"-bordered\"] = bordered, _a[prefixCls2 + \"-custom-color\"] = _checked && color && !_color, _a), className);\n  var colorStyle = __assign$B({}, style);\n  if (color && !_color && _checked) {\n    colorStyle.backgroundColor = color;\n    colorStyle.borderColor = color;\n  }\n  var otherProps = omit(rest, [\"visible\"]);\n  if (checkable) {\n    otherProps.onClick = onHandleCheck;\n  }\n  return React.createElement(\"div\", __assign$B({ ref, style: colorStyle, className: classNames }, otherProps), icon2 && React.createElement(\"span\", { className: prefixCls2 + \"-icon\" }, icon2), children, closable && !loading && closeIcon !== null && React.createElement(IconHover, { prefix: prefixCls2, className: prefixCls2 + \"-close-btn\", onClick: onHandleClose }, closeIcon !== void 0 ? closeIcon : React.createElement(IconClose$1, null)), loading && React.createElement(\"span\", { className: prefixCls2 + \"-loading-icon\" }, React.createElement(IconLoading$1, null)));\n}\nvar TagComponent = react.exports.forwardRef(Tag);\nTagComponent.displayName = \"Tag\";\nvar Tag$1 = TagComponent;\nvar __read$C = globalThis && globalThis.__read || function(o, n2) {\n  var m2 = typeof Symbol === \"function\" && o[Symbol.iterator];\n  if (!m2)\n    return o;\n  var i = m2.call(o), r2, ar = [], e;\n  try {\n    while ((n2 === void 0 || n2-- > 0) && !(r2 = i.next()).done)\n      ar.push(r2.value);\n  } catch (error) {\n    e = { error };\n  } finally {\n    try {\n      if (r2 && !r2.done && (m2 = i[\"return\"]))\n        m2.call(i);\n    } finally {\n      if (e)\n        throw e.error;\n    }\n  }\n  return ar;\n};\nfunction Item(props) {\n  var _a;\n  var prefixCls2 = props.prefixCls, style = props.style, children = props.children, direction = props.direction, disabled = props.disabled, droppable = props.droppable, onDrop = props.onDrop, onDragStart = props.onDragStart, onDragEnd = props.onDragEnd, onDragOver = props.onDragOver, onDragLeave = props.onDragLeave;\n  var refItem = react.exports.useRef(null);\n  var refDraggedTimer = react.exports.useRef(null);\n  var _b = __read$C(react.exports.useState(\"none\"), 2), dragStatus = _b[0], setDragStatus = _b[1];\n  var _c = __read$C(react.exports.useState(false), 2), dragOver = _c[0], setDragOver = _c[1];\n  var _d = __read$C(react.exports.useState(null), 2), dragPosition = _d[0], setDragPosition = _d[1];\n  react.exports.useEffect(function() {\n    return function() {\n      refDraggedTimer.current && clearTimeout(refDraggedTimer.current);\n    };\n  }, []);\n  react.exports.useEffect(function() {\n    if (dragStatus === \"dragged\") {\n      refDraggedTimer.current = setTimeout(function() {\n        return setDragStatus(\"none\");\n      }, 1e3);\n    }\n  }, [dragStatus]);\n  return React.createElement(\"li\", { draggable: true, ref: refItem, style, className: cs$1(prefixCls2 + \"-item\", (_a = {}, _a[prefixCls2 + \"-item-\" + dragStatus] = dragStatus !== \"none\", _a[prefixCls2 + \"-item-gap-\" + dragPosition] = dragPosition, _a[prefixCls2 + \"-item-disabled\"] = disabled, _a[prefixCls2 + \"-item-dragover\"] = dragOver, _a)), onDragStart: function(event) {\n    event.stopPropagation();\n    setDragStatus(\"dragging\");\n    try {\n      event.dataTransfer.setData(\"text/plain\", \"\");\n    } catch (error) {\n    }\n    onDragStart && onDragStart(event);\n  }, onDragEnd: function(event) {\n    event.stopPropagation();\n    setDragOver(false);\n    setDragStatus(\"dragged\");\n    onDragEnd && onDragEnd(event);\n  }, onDragOver: function(event) {\n    if (droppable) {\n      event.stopPropagation();\n      event.preventDefault();\n      var rect = refItem.current.getBoundingClientRect();\n      if (direction === \"vertical\") {\n        setDragPosition(event.pageY > window.pageYOffset + rect.top + rect.height / 2 ? \"bottom\" : \"top\");\n      } else {\n        setDragPosition(event.pageX > window.pageXOffset + rect.left + rect.width / 2 ? \"right\" : \"left\");\n      }\n      setDragOver(true);\n      onDragOver && onDragOver(event);\n    }\n  }, onDragLeave: function(event) {\n    if (droppable) {\n      event.stopPropagation();\n      setDragOver(false);\n      onDragLeave && onDragLeave(event);\n    }\n  }, onDrop: function(event) {\n    if (droppable) {\n      event.stopPropagation();\n      event.preventDefault();\n      setDragOver(false);\n      setDragPosition(null);\n      setDragStatus(\"none\");\n      onDrop && onDrop(event, dragPosition);\n    }\n  } }, children);\n}\nItem.defaultProps = {\n  droppable: true\n};\nvar __read$B = globalThis && globalThis.__read || function(o, n2) {\n  var m2 = typeof Symbol === \"function\" && o[Symbol.iterator];\n  if (!m2)\n    return o;\n  var i = m2.call(o), r2, ar = [], e;\n  try {\n    while ((n2 === void 0 || n2-- > 0) && !(r2 = i.next()).done)\n      ar.push(r2.value);\n  } catch (error) {\n    e = { error };\n  } finally {\n    try {\n      if (r2 && !r2.done && (m2 = i[\"return\"]))\n        m2.call(i);\n    } finally {\n      if (e)\n        throw e.error;\n    }\n  }\n  return ar;\n};\nfunction Draggable(props) {\n  var getPrefixCls = react.exports.useContext(ConfigContext).getPrefixCls;\n  var prefixCls2 = getPrefixCls(\"draggable\");\n  var className = props.className, children = props.children, direction = props.direction, onIndexChange = props.onIndexChange, itemWrapperStyle = props.itemWrapperStyle;\n  var _a = __read$B(react.exports.useState(null), 2), dragItemIndex = _a[0], setDragItemIndex = _a[1];\n  return React.createElement(\"div\", { className: cs$1(prefixCls2, className) }, React.Children.map(children, function(child, index2) {\n    return React.createElement(Item, { style: itemWrapperStyle, prefixCls: prefixCls2, direction, onDragStart: function() {\n      return setDragItemIndex(index2);\n    }, onDragEnd: function() {\n      return setDragItemIndex(null);\n    }, onDrop: function(_, dropPosition) {\n      var prevIndex = dragItemIndex;\n      var nextIndex = dropPosition === \"left\" || dropPosition === \"top\" ? index2 : index2 + 1;\n      if (onIndexChange && prevIndex !== nextIndex) {\n        onIndexChange(nextIndex, prevIndex);\n      }\n    } }, child);\n  }));\n}\nDraggable.defaultProps = {\n  direction: \"vertical\"\n};\nvar __assign$A = globalThis && globalThis.__assign || function() {\n  __assign$A = Object.assign || function(t2) {\n    for (var s, i = 1, n2 = arguments.length; i < n2; i++) {\n      s = arguments[i];\n      for (var p2 in s)\n        if (Object.prototype.hasOwnProperty.call(s, p2))\n          t2[p2] = s[p2];\n    }\n    return t2;\n  };\n  return __assign$A.apply(this, arguments);\n};\nvar __awaiter$7 = globalThis && globalThis.__awaiter || function(thisArg, _arguments, P2, generator) {\n  function adopt(value) {\n    return value instanceof P2 ? value : new P2(function(resolve) {\n      resolve(value);\n    });\n  }\n  return new (P2 || (P2 = Promise))(function(resolve, reject) {\n    function fulfilled(value) {\n      try {\n        step(generator.next(value));\n      } catch (e) {\n        reject(e);\n      }\n    }\n    function rejected(value) {\n      try {\n        step(generator[\"throw\"](value));\n      } catch (e) {\n        reject(e);\n      }\n    }\n    function step(result) {\n      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);\n    }\n    step((generator = generator.apply(thisArg, _arguments || [])).next());\n  });\n};\nvar __generator$7 = globalThis && globalThis.__generator || function(thisArg, body) {\n  var _ = { label: 0, sent: function() {\n    if (t2[0] & 1)\n      throw t2[1];\n    return t2[1];\n  }, trys: [], ops: [] }, f, y2, t2, g;\n  return g = { next: verb(0), \"throw\": verb(1), \"return\": verb(2) }, typeof Symbol === \"function\" && (g[Symbol.iterator] = function() {\n    return this;\n  }), g;\n  function verb(n2) {\n    return function(v2) {\n      return step([n2, v2]);\n    };\n  }\n  function step(op) {\n    if (f)\n      throw new TypeError(\"Generator is already executing.\");\n    while (_)\n      try {\n        if (f = 1, y2 && (t2 = op[0] & 2 ? y2[\"return\"] : op[0] ? y2[\"throw\"] || ((t2 = y2[\"return\"]) && t2.call(y2), 0) : y2.next) && !(t2 = t2.call(y2, op[1])).done)\n          return t2;\n        if (y2 = 0, t2)\n          op = [op[0] & 2, t2.value];\n        switch (op[0]) {\n          case 0:\n          case 1:\n            t2 = op;\n            break;\n          case 4:\n            _.label++;\n            return { value: op[1], done: false };\n          case 5:\n            _.label++;\n            y2 = op[1];\n            op = [0];\n            continue;\n          case 7:\n            op = _.ops.pop();\n            _.trys.pop();\n            continue;\n          default:\n            if (!(t2 = _.trys, t2 = t2.length > 0 && t2[t2.length - 1]) && (op[0] === 6 || op[0] === 2)) {\n              _ = 0;\n              continue;\n            }\n            if (op[0] === 3 && (!t2 || op[1] > t2[0] && op[1] < t2[3])) {\n              _.label = op[1];\n              break;\n            }\n            if (op[0] === 6 && _.label < t2[1]) {\n              _.label = t2[1];\n              t2 = op;\n              break;\n            }\n            if (t2 && _.label < t2[2]) {\n              _.label = t2[2];\n              _.ops.push(op);\n              break;\n            }\n            if (t2[2])\n              _.ops.pop();\n            _.trys.pop();\n            continue;\n        }\n        op = body.call(thisArg, _);\n      } catch (e) {\n        op = [6, e];\n        y2 = 0;\n      } finally {\n        f = t2 = 0;\n      }\n    if (op[0] & 5)\n      throw op[1];\n    return { value: op[0] ? op[1] : void 0, done: true };\n  }\n};\nvar __read$A = globalThis && globalThis.__read || function(o, n2) {\n  var m2 = typeof Symbol === \"function\" && o[Symbol.iterator];\n  if (!m2)\n    return o;\n  var i = m2.call(o), r2, ar = [], e;\n  try {\n    while ((n2 === void 0 || n2-- > 0) && !(r2 = i.next()).done)\n      ar.push(r2.value);\n  } catch (error) {\n    e = { error };\n  } finally {\n    try {\n      if (r2 && !r2.done && (m2 = i[\"return\"]))\n        m2.call(i);\n    } finally {\n      if (e)\n        throw e.error;\n    }\n  }\n  return ar;\n};\nvar __spreadArray$9 = globalThis && globalThis.__spreadArray || function(to, from, pack) {\n  if (pack || arguments.length === 2)\n    for (var i = 0, l2 = from.length, ar; i < l2; i++) {\n      if (ar || !(i in from)) {\n        if (!ar)\n          ar = Array.prototype.slice.call(from, 0, i);\n        ar[i] = from[i];\n      }\n    }\n  return to.concat(ar || Array.prototype.slice.call(from));\n};\nvar CSS_TRANSITION_DURATION = 300;\nvar keepFocus = function(e) {\n  e.target.tagName !== \"INPUT\" && e.preventDefault();\n};\nvar formatValue = function(value) {\n  if (!isArray$5(value)) {\n    return [];\n  }\n  return value.map(function(item) {\n    return isObject$6(item) ? __assign$A(__assign$A({}, item), { label: \"label\" in item ? item.label : item.value, value: item.value, closable: item.closable }) : {\n      label: item,\n      value: item\n    };\n  });\n};\nvar useComputeAutoWidthDelay = function(value) {\n  var refDelay = react.exports.useRef(0);\n  var refPrevValueLength = react.exports.useRef(value.length);\n  react.exports.useEffect(function() {\n    refDelay.current = value.length === 0 && refPrevValueLength.current > 0 ? CSS_TRANSITION_DURATION : 0;\n    refPrevValueLength.current = value.length;\n  }, [value]);\n  return refDelay;\n};\nvar UsedDraggableGroup = function(_a) {\n  var children = _a.children, draggable = _a.draggable, onIndexChange = _a.onIndexChange;\n  return draggable ? React.createElement(Draggable, { itemWrapperStyle: { display: \"inline-block\" }, direction: \"horizontal\", onIndexChange }, children) : React.createElement(React.Fragment, null, children);\n};\nvar UsedTransitionGroup = function(_a) {\n  var prefixCls2 = _a.prefixCls, children = _a.children, animation = _a.animation;\n  return animation ? React.createElement(TransitionGroup$1, { component: \"div\", className: prefixCls2 + \"-inner\" }, children) : React.createElement(\"div\", { className: prefixCls2 + \"-inner\" }, children);\n};\nvar defaultProps$e = {\n  animation: true,\n  validate: function(inputValue, values2) {\n    return inputValue && values2.every(function(item) {\n      return item.value !== inputValue;\n    });\n  }\n};\nfunction InputTag(baseProps, ref) {\n  var _a;\n  var _this = this;\n  var _b = react.exports.useContext(ConfigContext), getPrefixCls = _b.getPrefixCls, ctxSize = _b.size, componentConfig2 = _b.componentConfig;\n  var props = useMergeProps(baseProps, defaultProps$e, componentConfig2 === null || componentConfig2 === void 0 ? void 0 : componentConfig2.InputTag);\n  var className = props.className, style = props.style, placeholder = props.placeholder, error = props.error, disabled = props.disabled, readOnly = props.readOnly, allowClear = props.allowClear, autoFocus = props.autoFocus, labelInValue = props.labelInValue, disableInput = props.disableInput, animation = props.animation, saveOnBlur = props.saveOnBlur, dragToSort = props.dragToSort, icon2 = props.icon, suffix = props.suffix, validate = props.validate, renderTag = props.renderTag, tagClassName = props.tagClassName, onInputChange = props.onInputChange, onKeyDown = props.onKeyDown, onPaste = props.onPaste, onChange = props.onChange, onFocus3 = props.onFocus, onBlur3 = props.onBlur, onPressEnter = props.onPressEnter, onRemove = props.onRemove, onClear = props.onClear, onClick = props.onClick;\n  var prefixCls2 = getPrefixCls(\"input-tag\");\n  var size = \"size\" in props ? props.size : ctxSize;\n  var inputRef = react.exports.useRef();\n  var _c = __read$A(react.exports.useState(false), 2), focused = _c[0], setFocused = _c[1];\n  var _d = __read$A(useMergeValue([], {\n    defaultValue: \"defaultValue\" in props ? formatValue(props.defaultValue) : void 0,\n    value: \"value\" in props ? formatValue(props.value) : void 0\n  }), 2), value = _d[0], setValue = _d[1];\n  var _e = __read$A(useMergeValue(\"\", {\n    value: props.inputValue\n  }), 2), inputValue = _e[0], setInputValue = _e[1];\n  var refDelay = useComputeAutoWidthDelay(value);\n  var draggable = !!(dragToSort && !readOnly && !disabled);\n  react.exports.useImperativeHandle(ref, function() {\n    return {\n      blur: inputRef.current && inputRef.current.blur,\n      focus: inputRef.current && inputRef.current.focus\n    };\n  }, []);\n  var valueChangeHandler = function(value2, reason) {\n    if (disabled || readOnly) {\n      return;\n    }\n    if (!(\"value\" in props)) {\n      setValue(value2);\n    }\n    onChange && onChange(labelInValue ? value2 : value2.map(function(x2) {\n      return x2.value;\n    }), reason);\n  };\n  var tagCloseHandler = function(itemValue, index2, event) {\n    onRemove && onRemove(itemValue, index2, event);\n    valueChangeHandler(__spreadArray$9(__spreadArray$9([], __read$A(value.slice(0, index2)), false), __read$A(value.slice(index2 + 1)), false), \"remove\");\n  };\n  var hotkeyHandler = getHotkeyHandler(new Map([\n    [\n      Backspace.code,\n      function(event) {\n        if (!event.target.value && value.length) {\n          for (var index2 = value.length - 1; index2 >= 0; index2--) {\n            var itemValue = value[index2];\n            if (itemValue.closable !== false) {\n              tagCloseHandler(itemValue, index2, event);\n              return;\n            }\n          }\n        }\n      }\n    ]\n  ]));\n  var tryAddInputValueToTag = function() {\n    return __awaiter$7(_this, void 0, void 0, function() {\n      var isLegal, _a2, error_1;\n      return __generator$7(this, function(_b2) {\n        switch (_b2.label) {\n          case 0:\n            _b2.trys.push([0, 4, , 5]);\n            if (!(typeof validate === \"function\"))\n              return [3, 2];\n            return [4, validate(inputValue, value)];\n          case 1:\n            _a2 = _b2.sent();\n            return [3, 3];\n          case 2:\n            _a2 = true;\n            _b2.label = 3;\n          case 3:\n            isLegal = _a2;\n            if (isLegal) {\n              valueChangeHandler(value.concat({ value: inputValue, label: inputValue }), \"add\");\n              setInputValue(\"\");\n            }\n            return [3, 5];\n          case 4:\n            error_1 = _b2.sent();\n            console.error(error_1);\n            return [3, 5];\n          case 5:\n            return [2];\n        }\n      });\n    });\n  };\n  var mergedRenderTag = function(item, index2) {\n    var _a2;\n    var itemValue = item.value, label = item.label;\n    var closable = !readOnly && !disabled && item.closable !== false;\n    var onClose = function(event) {\n      tagCloseHandler(item, index2, event);\n    };\n    if (renderTag) {\n      return renderTag({\n        value: itemValue,\n        label,\n        closable,\n        onClose\n      }, index2, value);\n    }\n    return React.createElement(Tag$1, { visible: true, className: cs$1(prefixCls2 + \"-tag\", (_a2 = {}, _a2[tagClassName] = tagClassName, _a2)), closable, closeIcon: icon2 && icon2.removeIcon, onClose }, React.createElement(\"span\", { title: typeof label === \"string\" ? label : void 0, className: prefixCls2 + \"-tag-content\" }, typeof label === \"string\" ? label.replace(/\\s/g, \"\\xA0\") : label));\n  };\n  var clearIcon = allowClear && !disabled && value.length ? React.createElement(IconHover, { size, key: \"clearIcon\", className: prefixCls2 + \"-clear-icon\", onClick: function(e) {\n    e.stopPropagation();\n    valueChangeHandler([], \"clear\");\n    if (!focused) {\n      inputRef.current && inputRef.current.focus();\n    }\n    onClear && onClear();\n  }, onMouseDown: keepFocus }, icon2 && icon2.clearIcon || React.createElement(IconClose$1, null)) : null;\n  var hasSuffix = !!(clearIcon || suffix);\n  return React.createElement(\"div\", __assign$A({}, pickTriggerPropsFromRest(props), { style, className: cs$1(prefixCls2, (_a = {}, _a[prefixCls2 + \"-size-\" + size] = size, _a[prefixCls2 + \"-disabled\"] = disabled, _a[prefixCls2 + \"-error\"] = error, _a[prefixCls2 + \"-focus\"] = focused, _a[prefixCls2 + \"-readonly\"] = readOnly, _a[prefixCls2 + \"-has-suffix\"] = hasSuffix, _a[prefixCls2 + \"-has-placeholder\"] = !value.length, _a), className), onMouseDown: function(event) {\n    focused && keepFocus(event);\n  }, onClick: function(e) {\n    !focused && inputRef.current && inputRef.current.focus();\n    if (onClick) {\n      onClick(e);\n    }\n  } }), React.createElement(\"div\", { className: prefixCls2 + \"-view\" }, React.createElement(UsedTransitionGroup, { prefixCls: prefixCls2, animation }, React.createElement(UsedDraggableGroup, { draggable, onIndexChange: function(index2, prevIndex) {\n    var moveItem = function(arr, fromIndex, toIndex) {\n      arr = arr.slice();\n      var isMoveLeft = fromIndex > toIndex;\n      var _a2 = __read$A(arr.splice(fromIndex, 1), 1), item = _a2[0];\n      arr.splice(isMoveLeft ? toIndex : toIndex - 1, 0, item);\n      return arr;\n    };\n    valueChangeHandler(moveItem(value, prevIndex, index2), \"sort\");\n  } }, value.map(function(x2, i) {\n    var isRepeat = value.findIndex(function(item) {\n      return item.value === x2.value;\n    }) !== i;\n    var eleTag = mergedRenderTag(x2, i);\n    return React.isValidElement(eleTag) ? React.createElement(CSSTransition$3, { key: typeof x2.value === \"object\" ? i : isRepeat ? x2.value + \"-\" + i : x2.value, timeout: CSS_TRANSITION_DURATION, classNames: \"zoomIn\" }, eleTag) : eleTag;\n  }), React.createElement(CSSTransition$3, { key: \"input\", timeout: CSS_TRANSITION_DURATION, classNames: \"zoomIn\" }, React.createElement(InputComponent$1, { autoComplete: \"off\", size, disabled: disabled || disableInput, readOnly, ref: inputRef, autoFocus, placeholder: !value.length ? placeholder : \"\", prefixCls: prefixCls2 + \"-input\", autoFitWidth: {\n    delay: function() {\n      return refDelay.current;\n    }\n  }, onPressEnter: function(e) {\n    return __awaiter$7(_this, void 0, void 0, function() {\n      return __generator$7(this, function(_a2) {\n        switch (_a2.label) {\n          case 0:\n            inputValue && e.preventDefault();\n            onPressEnter && onPressEnter(e);\n            return [4, tryAddInputValueToTag()];\n          case 1:\n            _a2.sent();\n            return [2];\n        }\n      });\n    });\n  }, onFocus: function(e) {\n    if (!disabled && !readOnly) {\n      setFocused(true);\n      onFocus3 && onFocus3(e);\n    }\n  }, onBlur: function(e) {\n    return __awaiter$7(_this, void 0, void 0, function() {\n      return __generator$7(this, function(_a2) {\n        switch (_a2.label) {\n          case 0:\n            setFocused(false);\n            onBlur3 && onBlur3(e);\n            if (!saveOnBlur)\n              return [3, 2];\n            return [4, tryAddInputValueToTag()];\n          case 1:\n            _a2.sent();\n            _a2.label = 2;\n          case 2:\n            setInputValue(\"\");\n            return [2];\n        }\n      });\n    });\n  }, value: inputValue, onValueChange: function(v2, e) {\n    setInputValue(v2);\n    onInputChange && onInputChange(v2, e);\n  }, onKeyDown: function(event) {\n    hotkeyHandler(event);\n    onKeyDown && onKeyDown(event);\n  }, onPaste })))), hasSuffix && React.createElement(\"div\", { className: prefixCls2 + \"-suffix\", onMouseDown: keepFocus }, clearIcon, suffix)));\n}\nvar InputTagRef = React.forwardRef(InputTag);\nInputTagRef.displayName = \"InputTag\";\nvar InputTag$1 = InputTagRef;\nfunction include(obj, keys) {\n  var clone = {};\n  Object.keys(obj).forEach(function(key) {\n    if (keys.indexOf(key) !== -1) {\n      clone[key] = obj[key];\n    }\n  });\n  return clone;\n}\nvar __read$z = globalThis && globalThis.__read || function(o, n2) {\n  var m2 = typeof Symbol === \"function\" && o[Symbol.iterator];\n  if (!m2)\n    return o;\n  var i = m2.call(o), r2, ar = [], e;\n  try {\n    while ((n2 === void 0 || n2-- > 0) && !(r2 = i.next()).done)\n      ar.push(r2.value);\n  } catch (error) {\n    e = { error };\n  } finally {\n    try {\n      if (r2 && !r2.done && (m2 = i[\"return\"]))\n        m2.call(i);\n    } finally {\n      if (e)\n        throw e.error;\n    }\n  }\n  return ar;\n};\nfunction useForceUpdate() {\n  var _a = __read$z(react.exports.useReducer(function(v2) {\n    return v2 + 1;\n  }, 0), 2), dispatch = _a[1];\n  return dispatch;\n}\nvar __assign$z = globalThis && globalThis.__assign || function() {\n  __assign$z = Object.assign || function(t2) {\n    for (var s, i = 1, n2 = arguments.length; i < n2; i++) {\n      s = arguments[i];\n      for (var p2 in s)\n        if (Object.prototype.hasOwnProperty.call(s, p2))\n          t2[p2] = s[p2];\n    }\n    return t2;\n  };\n  return __assign$z.apply(this, arguments);\n};\nvar __rest$g = globalThis && globalThis.__rest || function(s, e) {\n  var t2 = {};\n  for (var p2 in s)\n    if (Object.prototype.hasOwnProperty.call(s, p2) && e.indexOf(p2) < 0)\n      t2[p2] = s[p2];\n  if (s != null && typeof Object.getOwnPropertySymbols === \"function\")\n    for (var i = 0, p2 = Object.getOwnPropertySymbols(s); i < p2.length; i++) {\n      if (e.indexOf(p2[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p2[i]))\n        t2[p2[i]] = s[p2[i]];\n    }\n  return t2;\n};\nvar __read$y = globalThis && globalThis.__read || function(o, n2) {\n  var m2 = typeof Symbol === \"function\" && o[Symbol.iterator];\n  if (!m2)\n    return o;\n  var i = m2.call(o), r2, ar = [], e;\n  try {\n    while ((n2 === void 0 || n2-- > 0) && !(r2 = i.next()).done)\n      ar.push(r2.value);\n  } catch (error) {\n    e = { error };\n  } finally {\n    try {\n      if (r2 && !r2.done && (m2 = i[\"return\"]))\n        m2.call(i);\n    } finally {\n      if (e)\n        throw e.error;\n    }\n  }\n  return ar;\n};\nvar SearchStatus = {\n  BEFORE: 0,\n  EDITING: 1,\n  NONE: 2\n};\nvar SelectView = function(props, ref) {\n  var _a, _b;\n  var style = props.style, className = props.className, size = props.size, bordered = props.bordered, allowClear = props.allowClear, allowCreate = props.allowCreate, error = props.error, loading = props.loading, disabled = props.disabled, animation = props.animation, prefixCls2 = props.prefixCls, suffixIcon = props.suffixIcon, arrowIcon = props.arrowIcon, removeIcon = props.removeIcon, clearIcon = props.clearIcon, placeholder = props.placeholder, renderText = props.renderText, value = props.value, inputValue = props.inputValue, popupVisible = props.popupVisible, maxTagCount = props.maxTagCount, isMultiple = props.isMultiple, isEmptyValue2 = props.isEmptyValue, prefix = props.prefix, renderTag = props.renderTag, dragToSort = props.dragToSort, onKeyDown = props.onKeyDown, onChangeInputValue = props.onChangeInputValue, onPaste = props.onPaste, onClear = props.onClear, onFocus3 = props.onFocus, onBlur3 = props.onBlur, onRemoveCheckedItem = props.onRemoveCheckedItem, onSort = props.onSort, rest = __rest$g(props, [\"style\", \"className\", \"size\", \"bordered\", \"allowClear\", \"allowCreate\", \"error\", \"loading\", \"disabled\", \"animation\", \"prefixCls\", \"suffixIcon\", \"arrowIcon\", \"removeIcon\", \"clearIcon\", \"placeholder\", \"renderText\", \"value\", \"inputValue\", \"popupVisible\", \"maxTagCount\", \"isMultiple\", \"isEmptyValue\", \"prefix\", \"renderTag\", \"dragToSort\", \"onKeyDown\", \"onChangeInputValue\", \"onPaste\", \"onClear\", \"onFocus\", \"onBlur\", \"onRemoveCheckedItem\", \"onSort\"]);\n  var refInput = react.exports.useRef(null);\n  var refWrapper = react.exports.useRef(null);\n  var _c = react.exports.useContext(ConfigContext), ctxSize = _c.size, getPrefixCls = _c.getPrefixCls;\n  var _d = __read$y(react.exports.useState(SearchStatus.NONE), 2), searchStatus = _d[0], setSearchStatus = _d[1];\n  var _e = __read$y(react.exports.useState(false), 2), focused = _e[0], setFocused = _e[1];\n  var forceUpdate = useForceUpdate();\n  var showSearch = \"showSearch\" in props ? props.showSearch : isMultiple;\n  var canFocusInput = showSearch || allowCreate;\n  var mergedSize = size || ctxSize;\n  var mergedFocused = focused || popupVisible;\n  var isRetainInputValueSearch = isObject$6(showSearch) && showSearch.retainInputValue;\n  var renderedValue = !isMultiple && value !== void 0 ? renderText(value).text : \"\";\n  var keepFocus2 = function(event) {\n    event && event.preventDefault();\n  };\n  var handleFocus = function(action) {\n    var element = canFocusInput ? refInput.current : refWrapper.current;\n    if (element) {\n      action === \"focus\" ? element.focus() : element.blur();\n    }\n  };\n  var tryTriggerFocusChange = function(action, event) {\n    if (canFocusInput && event.target === refWrapper.current) {\n      return;\n    }\n    if (action === \"focus\") {\n      setFocused(true);\n      onFocus3 && onFocus3(event);\n    } else {\n      setFocused(false);\n      onBlur3 && onBlur3(event);\n    }\n  };\n  var tryTriggerKeyDown = function(event) {\n    if (canFocusInput && event.currentTarget === refWrapper.current) {\n      return;\n    }\n    var keyCode = event.keyCode || event.which;\n    if (keyCode === Enter.code) {\n      event.preventDefault();\n    }\n    onKeyDown && onKeyDown(event);\n  };\n  react.exports.useEffect(function() {\n    handleFocus(popupVisible ? \"focus\" : \"blur\");\n    if (canFocusInput) {\n      setSearchStatus(popupVisible ? SearchStatus.BEFORE : SearchStatus.NONE);\n    }\n  }, [popupVisible]);\n  react.exports.useImperativeHandle(ref, function() {\n    return {\n      dom: refWrapper.current,\n      focus: handleFocus.bind(null, \"focus\"),\n      blur: handleFocus.bind(null, \"blur\"),\n      getWidth: function() {\n        return refWrapper.current && refWrapper.current.clientWidth;\n      }\n    };\n  });\n  var mergedArrowIcon = \"arrowIcon\" in props ? arrowIcon === null ? null : React.createElement(\"div\", { className: prefixCls2 + \"-arrow-icon\" }, arrowIcon) : canFocusInput ? React.createElement(\"div\", { className: prefixCls2 + \"-expand-icon\" }, React.createElement(IconExpand$1, { style: { transform: \"rotate(-45deg)\" } })) : React.createElement(\"div\", { className: prefixCls2 + \"-arrow-icon\" }, React.createElement(IconDown$1, null));\n  var mergedSuffixIcon = loading ? React.createElement(\"span\", { className: prefixCls2 + \"-loading-icon\" }, React.createElement(IconLoading$1, null)) : suffixIcon ? React.createElement(\"span\", { className: prefixCls2 + \"-suffix-icon\" }, suffixIcon) : props.showSearch && popupVisible ? React.createElement(\"div\", { className: prefixCls2 + \"-search-icon\" }, React.createElement(IconSearch$1, null)) : mergedArrowIcon;\n  var inputEventHandlers = {\n    paste: onPaste,\n    keyDown: tryTriggerKeyDown,\n    focus: function(event) {\n      event.stopPropagation();\n      tryTriggerFocusChange(\"focus\", event);\n    },\n    blur: function(event) {\n      event.stopPropagation();\n      tryTriggerFocusChange(\"blur\", event);\n    },\n    change: function(newValue, event) {\n      setSearchStatus(SearchStatus.EDITING);\n      onChangeInputValue && onChangeInputValue(newValue, event);\n    }\n  };\n  var renderSingle = function() {\n    var _a2, _b2;\n    var _inputValue;\n    switch (searchStatus) {\n      case SearchStatus.BEFORE:\n        _inputValue = inputValue || (isRetainInputValueSearch ? renderedValue : \"\");\n        break;\n      case SearchStatus.EDITING:\n        _inputValue = inputValue || \"\";\n        break;\n      default:\n        _inputValue = renderedValue;\n        break;\n    }\n    var inputProps = {\n      style: { width: \"100%\" },\n      value: typeof _inputValue !== \"object\" ? _inputValue : \"\",\n      placeholder: canFocusInput && renderedValue && typeof renderedValue !== \"object\" ? renderedValue : placeholder\n    };\n    if (canFocusInput) {\n      inputProps.onPaste = inputEventHandlers.paste;\n      inputProps.onKeyDown = inputEventHandlers.keyDown;\n      inputProps.onFocus = inputEventHandlers.focus;\n      inputProps.onBlur = inputEventHandlers.blur;\n      inputProps.onValueChange = inputEventHandlers.change;\n    } else {\n      inputProps.tabIndex = -1;\n      inputProps.style.pointerEvents = \"none\";\n    }\n    var needShowInput = mergedFocused && canFocusInput || isEmptyValue2;\n    return React.createElement(React.Fragment, null, React.createElement(InputComponent$1, __assign$z({ ref: refInput, disabled, className: cs$1(prefixCls2 + \"-view-input\", (_a2 = {}, _a2[prefixCls2 + \"-hidden\"] = !needShowInput, _a2)), autoComplete: \"off\" }, inputProps)), React.createElement(\"span\", { className: cs$1(prefixCls2 + \"-view-value\", (_b2 = {}, _b2[prefixCls2 + \"-hidden\"] = needShowInput, _b2)) }, _inputValue));\n  };\n  var renderMultiple = function() {\n    var usedValue = isUndefined$1(value) ? [] : [].concat(value);\n    var usedMaxTagCount = typeof maxTagCount === \"number\" ? Math.max(maxTagCount, 0) : usedValue.length;\n    var tagsToShow = usedValue.slice(0, usedMaxTagCount).map(function(v2) {\n      var result = renderText(v2);\n      return {\n        value: v2,\n        label: result.text,\n        closable: !result.disabled\n      };\n    });\n    var invisibleTagCount = usedValue.length - usedMaxTagCount;\n    if (invisibleTagCount > 0) {\n      tagsToShow.push({\n        label: \"+\" + invisibleTagCount + \"...\",\n        closable: false,\n        value: \"__arco_value_tag_placeholder\"\n      });\n    }\n    var eventHandlers = {\n      onPaste: inputEventHandlers.paste,\n      onKeyDown: inputEventHandlers.keyDown,\n      onFocus: inputEventHandlers.focus,\n      onBlur: inputEventHandlers.blur,\n      onInputChange: inputEventHandlers.change,\n      onRemove: function(value2, index2, event) {\n        maxTagCount && forceUpdate();\n        onRemoveCheckedItem && onRemoveCheckedItem(value2, index2, event);\n      }\n    };\n    return React.createElement(InputTag$1, __assign$z({\n      className: mergedFocused ? getPrefixCls(\"input-tag\") + \"-focus\" : \"\",\n      ref: refInput,\n      disabled,\n      dragToSort,\n      disableInput: !showSearch,\n      animation,\n      placeholder,\n      value: tagsToShow,\n      inputValue,\n      size: mergedSize,\n      tagClassName: prefixCls2 + \"-tag\",\n      renderTag,\n      icon: { removeIcon },\n      onChange: function(value2, reason) {\n        if (onSort && reason === \"sort\") {\n          onSort(value2);\n        }\n      }\n    }, eventHandlers));\n  };\n  var classNames = cs$1(prefixCls2, prefixCls2 + \"-\" + (isMultiple ? \"multiple\" : \"single\"), (_a = {}, _a[prefixCls2 + \"-show-search\"] = showSearch, _a[prefixCls2 + \"-open\"] = popupVisible, _a[prefixCls2 + \"-size-\" + mergedSize] = mergedSize, _a[prefixCls2 + \"-focused\"] = mergedFocused, _a[prefixCls2 + \"-error\"] = error, _a[prefixCls2 + \"-disabled\"] = disabled, _a[prefixCls2 + \"-no-border\"] = !bordered, _a), className);\n  var mergedClearIcon = !disabled && !isEmptyValue2 && allowClear ? React.createElement(IconHover, { size: mergedSize, key: \"clearIcon\", className: prefixCls2 + \"-clear-icon\", onClick: onClear, onMouseDown: keepFocus2 }, clearIcon !== void 0 && clearIcon !== null ? clearIcon : React.createElement(IconClose$1, null)) : null;\n  return React.createElement(\"div\", __assign$z({}, include(rest, [\"onClick\", \"onMouseEnter\", \"onMouseLeave\"]), {\n    ref: refWrapper,\n    tabIndex: disabled ? -1 : 0,\n    style,\n    className: classNames,\n    onKeyDown: tryTriggerKeyDown,\n    onFocus: function(event) {\n      if (!disabled && !dragToSort) {\n        if (canFocusInput) {\n          refInput.current && refInput.current.focus();\n        } else {\n          tryTriggerFocusChange(\"focus\", event);\n        }\n      }\n    },\n    onBlur: function(event) {\n      return tryTriggerFocusChange(\"blur\", event);\n    }\n  }), React.createElement(\"div\", { title: typeof renderedValue === \"string\" ? renderedValue : void 0, className: cs$1(prefixCls2 + \"-view\", (_b = {}, _b[prefixCls2 + \"-view-with-prefix\"] = prefix, _b)), onClick: function(e) {\n    return popupVisible && canFocusInput && e.stopPropagation();\n  } }, prefix && React.createElement(\"div\", { className: cs$1(prefixCls2 + \"-prefix\"), onMouseDown: function(event) {\n    return focused && keepFocus2(event);\n  } }, prefix), isMultiple ? renderMultiple() : renderSingle(), React.createElement(\"div\", { className: prefixCls2 + \"-suffix\", onMouseDown: function(event) {\n    return focused && keepFocus2(event);\n  } }, mergedClearIcon, mergedSuffixIcon)));\n};\nvar SelectViewComponent = React.forwardRef(SelectView);\nSelectViewComponent.displayName = \"SelectView\";\nvar SelectView$1 = SelectViewComponent;\nfunction getStringLength(str) {\n  var len = 0;\n  for (var i = 0; i < str.length; i++) {\n    if (str.charCodeAt(i) > 127 || str.charCodeAt(i) === 94) {\n      len += 2;\n    } else {\n      len++;\n    }\n  }\n  return len;\n}\nvar __rest$f = globalThis && globalThis.__rest || function(s, e) {\n  var t2 = {};\n  for (var p2 in s)\n    if (Object.prototype.hasOwnProperty.call(s, p2) && e.indexOf(p2) < 0)\n      t2[p2] = s[p2];\n  if (s != null && typeof Object.getOwnPropertySymbols === \"function\")\n    for (var i = 0, p2 = Object.getOwnPropertySymbols(s); i < p2.length; i++) {\n      if (e.indexOf(p2[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p2[i]))\n        t2[p2[i]] = s[p2[i]];\n    }\n  return t2;\n};\nvar GHOST_ITEM_KEY = \"__rc_ghost_item__\";\nfunction getLocationItem(scrollPtg, total) {\n  var itemIndex = Math.floor(scrollPtg * total);\n  var itemTopPtg = itemIndex / total;\n  var offsetPtg = (scrollPtg - itemTopPtg) / (1 / total);\n  return {\n    index: itemIndex,\n    offsetPtg: Number.isNaN(offsetPtg) ? 0 : offsetPtg\n  };\n}\nfunction getNodeHeight(node) {\n  var element = reactDom.exports.findDOMNode(node);\n  return element ? element.offsetHeight : 0;\n}\nfunction getValidScrollTop(scrollTop, scrollRange) {\n  return scrollTop < 0 ? 0 : scrollTop > scrollRange ? scrollRange : scrollTop;\n}\nfunction getScrollPercentage(_a) {\n  var scrollTop = _a.scrollTop, scrollHeight = _a.scrollHeight, clientHeight = _a.clientHeight;\n  var scrollRange = scrollHeight - clientHeight;\n  return scrollRange <= 0 ? 0 : getValidScrollTop(scrollTop, scrollRange) / scrollRange;\n}\nfunction getRangeIndex(scrollPtg, itemCount, visibleCount) {\n  var _a = getLocationItem(scrollPtg, itemCount), index2 = _a.index, offsetPtg = _a.offsetPtg;\n  var beforeCount = Math.ceil(scrollPtg * visibleCount);\n  var afterCount = Math.ceil((1 - scrollPtg) * visibleCount);\n  return {\n    itemIndex: index2,\n    itemOffsetPtg: offsetPtg,\n    startIndex: Math.max(0, index2 - beforeCount),\n    endIndex: Math.min(itemCount - 1, index2 + afterCount)\n  };\n}\nfunction getItemRelativeTop(_a) {\n  var itemHeight = _a.itemHeight, itemOffsetPtg = _a.itemOffsetPtg, scrollPtg = _a.scrollPtg, clientHeight = _a.clientHeight;\n  return Math.floor(clientHeight * scrollPtg - itemHeight * itemOffsetPtg);\n}\nfunction getItemAbsoluteTop(_a) {\n  var scrollTop = _a.scrollTop, rest = __rest$f(_a, [\"scrollTop\"]);\n  return scrollTop + getItemRelativeTop(rest);\n}\nfunction getCompareItemRelativeTop(_a) {\n  var locatedItemRelativeTop = _a.locatedItemRelativeTop, locatedItemIndex = _a.locatedItemIndex, compareItemIndex = _a.compareItemIndex, startIndex = _a.startIndex, endIndex = _a.endIndex, getItemKey = _a.getItemKey, itemElementHeights = _a.itemElementHeights, itemHeight = _a.itemHeight;\n  var compareItemTop = locatedItemRelativeTop;\n  var compareItemKey = getItemKey(compareItemIndex);\n  if (compareItemIndex <= locatedItemIndex) {\n    for (var index2 = locatedItemIndex; index2 >= startIndex; index2 -= 1) {\n      var key = getItemKey(index2);\n      if (key === compareItemKey) {\n        break;\n      }\n      var prevItemKey = getItemKey(index2 - 1);\n      compareItemTop -= itemElementHeights[prevItemKey] || itemHeight;\n    }\n  } else {\n    for (var index2 = locatedItemIndex; index2 <= endIndex; index2 += 1) {\n      var key = getItemKey(index2);\n      if (key === compareItemKey) {\n        break;\n      }\n      compareItemTop += itemElementHeights[key] || itemHeight;\n    }\n  }\n  return compareItemTop;\n}\nfunction getLongestItemIndex(data2) {\n  var result = -1;\n  var length = 0;\n  data2.forEach(function(item, index2) {\n    var _a;\n    item = typeof item === \"string\" ? item : (_a = item.props) === null || _a === void 0 ? void 0 : _a.children;\n    if (typeof item === \"string\") {\n      var _length = getStringLength(item);\n      if (_length > length) {\n        length = _length;\n        result = index2;\n      }\n    }\n  });\n  return result;\n}\nfunction usePrevious(value) {\n  var ref = react.exports.useRef();\n  react.exports.useEffect(function() {\n    ref.current = value;\n  });\n  return ref.current;\n}\nfunction getIndexByStartLoc(min, max, start, index2) {\n  var beforeCount = start - min;\n  var afterCount = max - start;\n  var balanceCount = Math.min(beforeCount, afterCount) * 2;\n  if (index2 <= balanceCount) {\n    var stepIndex = Math.floor(index2 / 2);\n    if (index2 % 2) {\n      return start + stepIndex + 1;\n    }\n    return start - stepIndex;\n  }\n  if (beforeCount > afterCount) {\n    return start - (index2 - afterCount);\n  }\n  return start + (index2 - beforeCount);\n}\nfunction findListDiffIndex(originList, targetList, getKey) {\n  var originLen = originList.length;\n  var targetLen = targetList.length;\n  var shortList;\n  var longList;\n  if (originLen === 0 && targetLen === 0) {\n    return null;\n  }\n  if (originLen < targetLen) {\n    shortList = originList;\n    longList = targetList;\n  } else {\n    shortList = targetList;\n    longList = originList;\n  }\n  var notExistKey = { __EMPTY_ITEM__: true };\n  function getItemKey(item, index2) {\n    return item !== void 0 ? getKey(item, index2) : notExistKey;\n  }\n  var diffIndex = null;\n  var multiple = Math.abs(originLen - targetLen) !== 1;\n  for (var i = 0; i < longList.length; i += 1) {\n    var shortKey = getItemKey(shortList[i], i);\n    var longKey = getItemKey(longList[i], i);\n    if (shortKey !== longKey) {\n      diffIndex = i;\n      multiple = multiple || shortKey !== getItemKey(longList[i + 1], i + 1);\n      break;\n    }\n  }\n  return diffIndex === null ? null : { index: diffIndex, multiple };\n}\nvar __assign$y = globalThis && globalThis.__assign || function() {\n  __assign$y = Object.assign || function(t2) {\n    for (var s, i = 1, n2 = arguments.length; i < n2; i++) {\n      s = arguments[i];\n      for (var p2 in s)\n        if (Object.prototype.hasOwnProperty.call(s, p2))\n          t2[p2] = s[p2];\n    }\n    return t2;\n  };\n  return __assign$y.apply(this, arguments);\n};\nvar Filler = function(_a) {\n  var height = _a.height, offset = _a.offset, children = _a.children;\n  var outerStyle = {};\n  var innerStyle = {\n    display: \"flex\",\n    flexDirection: \"column\"\n  };\n  if (offset !== void 0) {\n    outerStyle = { height, position: \"relative\", overflow: \"hidden\", zIndex: 0 };\n    innerStyle = __assign$y(__assign$y({}, innerStyle), { transform: \"translateY(\" + offset + \"px)\", position: \"absolute\", left: 0, right: 0, top: 0 });\n  }\n  return react.exports.createElement(\"div\", { style: outerStyle }, react.exports.createElement(\"div\", { style: innerStyle }, children));\n};\nvar Filler$1 = Filler;\nvar __assign$x = globalThis && globalThis.__assign || function() {\n  __assign$x = Object.assign || function(t2) {\n    for (var s, i = 1, n2 = arguments.length; i < n2; i++) {\n      s = arguments[i];\n      for (var p2 in s)\n        if (Object.prototype.hasOwnProperty.call(s, p2))\n          t2[p2] = s[p2];\n    }\n    return t2;\n  };\n  return __assign$x.apply(this, arguments);\n};\nvar __rest$e = globalThis && globalThis.__rest || function(s, e) {\n  var t2 = {};\n  for (var p2 in s)\n    if (Object.prototype.hasOwnProperty.call(s, p2) && e.indexOf(p2) < 0)\n      t2[p2] = s[p2];\n  if (s != null && typeof Object.getOwnPropertySymbols === \"function\")\n    for (var i = 0, p2 = Object.getOwnPropertySymbols(s); i < p2.length; i++) {\n      if (e.indexOf(p2[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p2[i]))\n        t2[p2[i]] = s[p2[i]];\n    }\n  return t2;\n};\nvar __read$x = globalThis && globalThis.__read || function(o, n2) {\n  var m2 = typeof Symbol === \"function\" && o[Symbol.iterator];\n  if (!m2)\n    return o;\n  var i = m2.call(o), r2, ar = [], e;\n  try {\n    while ((n2 === void 0 || n2-- > 0) && !(r2 = i.next()).done)\n      ar.push(r2.value);\n  } catch (error) {\n    e = { error };\n  } finally {\n    try {\n      if (r2 && !r2.done && (m2 = i[\"return\"]))\n        m2.call(i);\n    } finally {\n      if (e)\n        throw e.error;\n    }\n  }\n  return ar;\n};\nvar DEFAULT_VIRTUAL_ITEM_HEIGHT = 32;\nvar KEY_VIRTUAL_ITEM_HEIGHT = \"__fake_item_height_\" + Math.random();\nvar useComputeVirtualItemHeight = function(refItemHeightMap) {\n  var forceUpdate = useForceUpdate();\n  var heightMap = refItemHeightMap.current;\n  react.exports.useEffect(function() {\n    if (Object.keys(heightMap).length && !heightMap[KEY_VIRTUAL_ITEM_HEIGHT]) {\n      heightMap[KEY_VIRTUAL_ITEM_HEIGHT] = Object.entries(heightMap).reduce(function(sum, _a, currentIndex, array) {\n        var _b = __read$x(_a, 2), currentHeight = _b[1];\n        var nextSum = sum + currentHeight;\n        return currentIndex === array.length - 1 ? Math.round(nextSum / array.length) : nextSum;\n      }, 0);\n      forceUpdate();\n    }\n  }, [Object.keys(heightMap).length]);\n};\nvar useCacheChildrenNodes = function(children) {\n  var refCacheMap = react.exports.useRef({});\n  var refPrevChildren = react.exports.useRef(children);\n  react.exports.useEffect(function() {\n    refPrevChildren.current = children;\n  }, [children]);\n  if (children !== refPrevChildren.current) {\n    refCacheMap.current = {};\n  }\n  return function(item, index2, props) {\n    if (!refCacheMap.current.hasOwnProperty(index2)) {\n      refCacheMap.current[index2] = children(item, index2, props);\n    }\n    return refCacheMap.current[index2];\n  };\n};\nvar VirtualList = React.forwardRef(function(props, ref) {\n  var style = props.style, className = props.className, children = props.children, _a = props.data, data2 = _a === void 0 ? [] : _a, _b = props.wrapper, WrapperTagName = _b === void 0 ? \"div\" : _b, _c = props.threshold, threshold = _c === void 0 ? 100 : _c, _d = props.height, propHeight = _d === void 0 ? \"100%\" : _d, _e = props.isStaticItemHeight, isStaticItemHeight = _e === void 0 ? true : _e, itemKey = props.itemKey, onScroll = props.onScroll, measureLongestItem = props.measureLongestItem, scrollOptions = props.scrollOptions, restProps = __rest$e(props, [\"style\", \"className\", \"children\", \"data\", \"wrapper\", \"threshold\", \"height\", \"isStaticItemHeight\", \"itemKey\", \"onScroll\", \"measureLongestItem\", \"scrollOptions\"]);\n  var styleListMaxHeight = style && style.maxHeight || propHeight;\n  var refItemHeightMap = react.exports.useRef({});\n  var _f = __read$x(react.exports.useState(200), 2), stateHeight = _f[0], setStateHeight = _f[1];\n  var renderChild = useCacheChildrenNodes(children);\n  useComputeVirtualItemHeight(refItemHeightMap);\n  var itemCount = data2.length;\n  var viewportHeight = isNumber$1(styleListMaxHeight) ? styleListMaxHeight : stateHeight;\n  var itemHeight = refItemHeightMap.current[KEY_VIRTUAL_ITEM_HEIGHT] || DEFAULT_VIRTUAL_ITEM_HEIGHT;\n  var itemCountVisible = Math.ceil(viewportHeight / itemHeight);\n  var itemTotalHeight = itemHeight * itemCount;\n  var isVirtual = threshold !== null && itemCount >= threshold && itemTotalHeight > viewportHeight;\n  var refList = react.exports.useRef(null);\n  var refRafId = react.exports.useRef(null);\n  var refLockScroll = react.exports.useRef(false);\n  var refIsVirtual = react.exports.useRef(isVirtual);\n  var scrollListPadding = react.exports.useMemo(function() {\n    if (refList.current) {\n      var getPadding = function(property) {\n        return +window.getComputedStyle(refList.current)[property].replace(/\\D/g, \"\");\n      };\n      return {\n        top: getPadding(\"paddingTop\"),\n        bottom: getPadding(\"paddingBottom\")\n      };\n    }\n    return { top: 0, bottom: 0 };\n  }, [refList.current]);\n  var _g = __read$x(useStateWithPromise({\n    status: \"NONE\",\n    startIndex: 0,\n    endIndex: 0,\n    itemIndex: 0,\n    itemOffsetPtg: 0,\n    startItemTop: 0,\n    scrollTop: 0\n  }), 2), state = _g[0], setState = _g[1];\n  var prevData = usePrevious(data2) || [];\n  var isFirstRender = useIsFirstRender();\n  var getItemKey = function(item, index2) {\n    return typeof itemKey === \"function\" ? itemKey(item, index2) : typeof itemKey === \"string\" ? item[itemKey] : item.key || index2;\n  };\n  var getItemKeyByIndex = function(index2, items) {\n    if (items === void 0) {\n      items = data2;\n    }\n    if (index2 === items.length) {\n      return GHOST_ITEM_KEY;\n    }\n    var item = items[index2];\n    return item !== void 0 ? getItemKey(item, index2) : null;\n  };\n  var getCachedItemHeight = function(key) {\n    return refItemHeightMap.current[key] || itemHeight;\n  };\n  var internalScrollTo = function(relativeScroll) {\n    var compareItemIndex = relativeScroll.itemIndex, compareItemRelativeTop = relativeScroll.relativeTop;\n    var _a2 = refList.current, scrollHeight = _a2.scrollHeight, clientHeight = _a2.clientHeight;\n    var originScrollTop = state.scrollTop;\n    var maxScrollTop = scrollHeight - clientHeight;\n    var bestSimilarity = Number.MAX_VALUE;\n    var bestScrollTop = null;\n    var bestItemIndex = null;\n    var bestItemOffsetPtg = null;\n    var bestStartIndex = null;\n    var bestEndIndex = null;\n    var missSimilarity = 0;\n    for (var i = 0; i < maxScrollTop; i++) {\n      var scrollTop = getIndexByStartLoc(0, maxScrollTop, originScrollTop, i);\n      var scrollPtg = getScrollPercentage({ scrollTop, scrollHeight, clientHeight });\n      var _b2 = getRangeIndex(scrollPtg, itemCount, itemCountVisible), itemIndex = _b2.itemIndex, itemOffsetPtg = _b2.itemOffsetPtg, startIndex = _b2.startIndex, endIndex = _b2.endIndex;\n      if (startIndex <= compareItemIndex && compareItemIndex <= endIndex) {\n        var locatedItemRelativeTop = getItemRelativeTop({\n          itemHeight: getCachedItemHeight(getItemKeyByIndex(itemIndex)),\n          itemOffsetPtg,\n          clientHeight,\n          scrollPtg\n        });\n        var compareItemTop = getCompareItemRelativeTop({\n          locatedItemRelativeTop,\n          locatedItemIndex: itemIndex,\n          compareItemIndex,\n          startIndex,\n          endIndex,\n          itemHeight,\n          getItemKey: getItemKeyByIndex,\n          itemElementHeights: refItemHeightMap.current\n        });\n        var similarity = Math.abs(compareItemTop - compareItemRelativeTop);\n        if (similarity < bestSimilarity) {\n          bestSimilarity = similarity;\n          bestScrollTop = scrollTop;\n          bestItemIndex = itemIndex;\n          bestItemOffsetPtg = itemOffsetPtg;\n          bestStartIndex = startIndex;\n          bestEndIndex = endIndex;\n          missSimilarity = 0;\n        } else {\n          missSimilarity += 1;\n        }\n      }\n      if (missSimilarity > 10) {\n        break;\n      }\n    }\n    if (bestScrollTop !== null) {\n      refLockScroll.current = true;\n      refList.current.scrollTop = bestScrollTop;\n      setState(__assign$x(__assign$x({}, state), { status: \"MEASURE_START\", scrollTop: bestScrollTop, itemIndex: bestItemIndex, itemOffsetPtg: bestItemOffsetPtg, startIndex: bestStartIndex, endIndex: bestEndIndex }));\n    }\n    refRafId.current = raf(function() {\n      refLockScroll.current = false;\n    });\n  };\n  var rawListScrollHandler = function(event) {\n    var _a2 = refList.current, rawScrollTop = _a2.scrollTop, clientHeight = _a2.clientHeight, scrollHeight = _a2.scrollHeight;\n    var scrollTop = getValidScrollTop(rawScrollTop, scrollHeight - clientHeight);\n    var scrollPtg = getScrollPercentage({\n      scrollTop,\n      clientHeight,\n      scrollHeight\n    });\n    var _b2 = getLocationItem(scrollPtg, itemCount), index2 = _b2.index, offsetPtg = _b2.offsetPtg;\n    setState(__assign$x(__assign$x({}, state), { scrollTop, itemIndex: index2, itemOffsetPtg: offsetPtg }));\n    event && onScroll && onScroll(event);\n  };\n  var virtualListScrollHandler = function(event, isInit) {\n    if (isInit === void 0) {\n      isInit = false;\n    }\n    var _a2 = refList.current, rawScrollTop = _a2.scrollTop, clientHeight = _a2.clientHeight, scrollHeight = _a2.scrollHeight;\n    var scrollTop = getValidScrollTop(rawScrollTop, scrollHeight - clientHeight);\n    if (!isInit && (scrollTop === state.scrollTop || refLockScroll.current)) {\n      return;\n    }\n    var scrollPtg = getScrollPercentage({\n      scrollTop,\n      clientHeight,\n      scrollHeight\n    });\n    var _b2 = getRangeIndex(scrollPtg, itemCount, itemCountVisible), itemIndex = _b2.itemIndex, itemOffsetPtg = _b2.itemOffsetPtg, startIndex = _b2.startIndex, endIndex = _b2.endIndex;\n    setState(__assign$x(__assign$x({}, state), { scrollTop, itemIndex, itemOffsetPtg, startIndex, endIndex, status: \"MEASURE_START\" }));\n    event && onScroll && onScroll(event);\n  };\n  react.exports.useEffect(function() {\n    return function() {\n      refRafId.current && caf(refRafId.current);\n    };\n  }, []);\n  react.exports.useEffect(function() {\n    if (refList.current) {\n      if (isFirstRender) {\n        refList.current.scrollTop = 0;\n      }\n      virtualListScrollHandler(null, true);\n    }\n  }, [itemCountVisible]);\n  react.exports.useEffect(function() {\n    var changedItemIndex = null;\n    var switchTo = refIsVirtual.current !== isVirtual ? isVirtual ? \"virtual\" : \"raw\" : \"\";\n    refIsVirtual.current = isVirtual;\n    if (viewportHeight && prevData.length !== data2.length) {\n      var diff = findListDiffIndex(prevData, data2, getItemKey);\n      changedItemIndex = diff ? diff.index : null;\n    }\n    if (switchTo || isVirtual && changedItemIndex) {\n      var clientHeight = refList.current.clientHeight;\n      var locatedItemRelativeTop = getItemRelativeTop({\n        itemHeight: getCachedItemHeight(getItemKeyByIndex(state.itemIndex, prevData)),\n        itemOffsetPtg: state.itemOffsetPtg,\n        scrollPtg: getScrollPercentage({\n          scrollTop: state.scrollTop,\n          scrollHeight: prevData.length * itemHeight,\n          clientHeight\n        }),\n        clientHeight\n      });\n      if (switchTo === \"raw\") {\n        var rawTop = locatedItemRelativeTop;\n        for (var index2 = 0; index2 < state.itemIndex; index2++) {\n          rawTop -= getCachedItemHeight(getItemKeyByIndex(index2));\n        }\n        refList.current.scrollTop = -rawTop;\n        refLockScroll.current = true;\n        refRafId.current = raf(function() {\n          refLockScroll.current = false;\n        });\n      } else {\n        internalScrollTo({\n          itemIndex: state.itemIndex,\n          relativeTop: locatedItemRelativeTop\n        });\n      }\n    }\n  }, [data2, isVirtual]);\n  useIsomorphicLayoutEffect$1(function() {\n    if (state.status === \"MEASURE_START\") {\n      var _a2 = refList.current, scrollTop = _a2.scrollTop, scrollHeight = _a2.scrollHeight, clientHeight = _a2.clientHeight;\n      var scrollPtg = getScrollPercentage({\n        scrollTop,\n        scrollHeight,\n        clientHeight\n      });\n      var startItemTop = getItemAbsoluteTop({\n        scrollPtg,\n        clientHeight,\n        scrollTop: scrollTop - (scrollListPadding.top + scrollListPadding.bottom) * scrollPtg,\n        itemHeight: getCachedItemHeight(getItemKeyByIndex(state.itemIndex)),\n        itemOffsetPtg: state.itemOffsetPtg\n      });\n      for (var index2 = state.itemIndex - 1; index2 >= state.startIndex; index2--) {\n        startItemTop -= getCachedItemHeight(getItemKeyByIndex(index2));\n      }\n      setState(__assign$x(__assign$x({}, state), { startItemTop, status: \"MEASURE_DONE\" }));\n    }\n  }, [state]);\n  react.exports.useImperativeHandle(ref, function() {\n    return {\n      dom: refList.current,\n      scrollTo: function(arg) {\n        refRafId.current && caf(refRafId.current);\n        refRafId.current = raf(function() {\n          var _a2;\n          if (typeof arg === \"number\") {\n            refList.current.scrollTop = arg;\n            return;\n          }\n          var index2 = \"index\" in arg ? arg.index : \"key\" in arg ? data2.findIndex(function(item2, index3) {\n            return getItemKey(item2, index3) === arg.key;\n          }) : 0;\n          var item = data2[index2];\n          if (!item) {\n            return;\n          }\n          var align = typeof arg === \"object\" && ((_a2 = arg.options) === null || _a2 === void 0 ? void 0 : _a2.block) ? arg.options.block : (scrollOptions === null || scrollOptions === void 0 ? void 0 : scrollOptions.block) || \"nearest\";\n          var _b2 = refList.current, clientHeight = _b2.clientHeight, scrollTop = _b2.scrollTop;\n          if (isVirtual && !isStaticItemHeight) {\n            if (align === \"nearest\") {\n              var itemIndex = state.itemIndex, itemOffsetPtg = state.itemOffsetPtg;\n              if (Math.abs(itemIndex - index2) < itemCountVisible) {\n                var itemTop = getItemRelativeTop({\n                  itemHeight: getCachedItemHeight(getItemKeyByIndex(itemIndex)),\n                  itemOffsetPtg,\n                  clientHeight,\n                  scrollPtg: getScrollPercentage(refList.current)\n                });\n                if (index2 < itemIndex) {\n                  for (var i = index2; i < itemIndex; i++) {\n                    itemTop -= getCachedItemHeight(getItemKeyByIndex(i));\n                  }\n                } else {\n                  for (var i = itemIndex; i < index2; i++) {\n                    itemTop += getCachedItemHeight(getItemKeyByIndex(i));\n                  }\n                }\n                if (itemTop < 0 || itemTop > clientHeight) {\n                  align = itemTop < 0 ? \"start\" : \"end\";\n                } else {\n                  return;\n                }\n              } else {\n                align = index2 < itemIndex ? \"start\" : \"end\";\n              }\n            }\n            setState(__assign$x(__assign$x({}, state), { startIndex: Math.max(0, index2 - itemCountVisible), endIndex: Math.min(itemCount - 1, index2 + itemCountVisible) })).then(function() {\n              var itemHeight2 = getCachedItemHeight(getItemKey(item, index2));\n              internalScrollTo({\n                itemIndex: index2,\n                relativeTop: align === \"start\" ? 0 : (clientHeight - itemHeight2) / (align === \"center\" ? 2 : 1)\n              });\n            });\n          } else {\n            var indexItemHeight = getCachedItemHeight(getItemKeyByIndex(index2));\n            var itemTop = 0;\n            for (var i = 0; i < index2; i++) {\n              itemTop += getCachedItemHeight(getItemKeyByIndex(i));\n            }\n            var itemBottom = itemTop + indexItemHeight;\n            if (align === \"nearest\") {\n              if (itemTop < scrollTop) {\n                align = \"start\";\n              } else if (itemBottom > scrollTop + clientHeight) {\n                align = \"end\";\n              }\n            }\n            var viewportHeight_1 = clientHeight - indexItemHeight;\n            refList.current.scrollTop = itemTop - (align === \"start\" ? 0 : viewportHeight_1 / (align === \"center\" ? 2 : 1));\n          }\n        });\n      }\n    };\n  }, [data2, itemHeight]);\n  var renderChildren = function(list2, startIndex) {\n    return list2.map(function(item, index2) {\n      var originIndex = startIndex + index2;\n      var node = renderChild(item, originIndex, {\n        style: {}\n      });\n      var key = getItemKey(item, originIndex);\n      return React.cloneElement(node, {\n        key,\n        ref: function(ele) {\n          var heightMap = refItemHeightMap.current;\n          if (ele && state.status === \"MEASURE_START\" && (!isStaticItemHeight || heightMap[key] === void 0)) {\n            if (isStaticItemHeight) {\n              if (!heightMap[KEY_VIRTUAL_ITEM_HEIGHT]) {\n                heightMap[KEY_VIRTUAL_ITEM_HEIGHT] = getNodeHeight(ele);\n              }\n              heightMap[key] = heightMap[KEY_VIRTUAL_ITEM_HEIGHT];\n            } else {\n              heightMap[key] = getNodeHeight(ele);\n            }\n          }\n        }\n      });\n    });\n  };\n  var refLongestItemIndex = react.exports.useRef(null);\n  react.exports.useEffect(function() {\n    refLongestItemIndex.current = null;\n  }, [data2]);\n  var renderLongestItem = function() {\n    if (measureLongestItem) {\n      var index2 = refLongestItemIndex.current === null ? getLongestItemIndex(data2) : refLongestItemIndex.current;\n      var item = data2[index2];\n      refLongestItemIndex.current = index2;\n      return item ? React.createElement(\"div\", { style: { height: 1, overflow: \"hidden\", opacity: 0 } }, renderChild(item, index2, { style: {} })) : null;\n    }\n    return null;\n  };\n  return React.createElement(ResizeObserver, { onResize: function() {\n    if (refList.current && !isNumber$1(styleListMaxHeight)) {\n      var clientHeight = refList.current.clientHeight;\n      setStateHeight(clientHeight);\n    }\n  } }, React.createElement(WrapperTagName, __assign$x({ ref: refList, style: __assign$x(__assign$x({ overflowY: \"auto\", overflowAnchor: \"none\" }, style), { maxHeight: styleListMaxHeight }), className, onScroll: isVirtual ? virtualListScrollHandler : rawListScrollHandler }, restProps), isVirtual ? React.createElement(React.Fragment, null, React.createElement(Filler$1, { height: itemTotalHeight, offset: state.status === \"MEASURE_DONE\" ? state.startItemTop : 0 }, renderChildren(data2.slice(state.startIndex, state.endIndex + 1), state.startIndex)), renderLongestItem()) : React.createElement(Filler$1, { height: viewportHeight }, renderChildren(data2, 0))));\n});\nVirtualList.displayName = \"VirtualList\";\nvar VirtualList$1 = VirtualList;\nvar isArray$4 = Array.isArray;\nvar isArray_1 = isArray$4;\nvar isArray$3 = isArray_1, isSymbol$2 = isSymbol_1;\nvar reIsDeepProp = /\\.|\\[(?:[^[\\]]*|([\"'])(?:(?!\\1)[^\\\\]|\\\\.)*?\\1)\\]/, reIsPlainProp = /^\\w*$/;\nfunction isKey$1(value, object) {\n  if (isArray$3(value)) {\n    return false;\n  }\n  var type = typeof value;\n  if (type == \"number\" || type == \"symbol\" || type == \"boolean\" || value == null || isSymbol$2(value)) {\n    return true;\n  }\n  return reIsPlainProp.test(value) || !reIsDeepProp.test(value) || object != null && value in Object(object);\n}\nvar _isKey = isKey$1;\nvar baseGetTag = _baseGetTag, isObject$2 = isObject_1;\nvar asyncTag = \"[object AsyncFunction]\", funcTag = \"[object Function]\", genTag = \"[object GeneratorFunction]\", proxyTag = \"[object Proxy]\";\nfunction isFunction$2(value) {\n  if (!isObject$2(value)) {\n    return false;\n  }\n  var tag = baseGetTag(value);\n  return tag == funcTag || tag == genTag || tag == asyncTag || tag == proxyTag;\n}\nvar isFunction_1 = isFunction$2;\nvar root$1 = _root;\nvar coreJsData$1 = root$1[\"__core-js_shared__\"];\nvar _coreJsData = coreJsData$1;\nvar coreJsData = _coreJsData;\nvar maskSrcKey = function() {\n  var uid = /[^.]+$/.exec(coreJsData && coreJsData.keys && coreJsData.keys.IE_PROTO || \"\");\n  return uid ? \"Symbol(src)_1.\" + uid : \"\";\n}();\nfunction isMasked$1(func) {\n  return !!maskSrcKey && maskSrcKey in func;\n}\nvar _isMasked = isMasked$1;\nvar funcProto$1 = Function.prototype;\nvar funcToString$1 = funcProto$1.toString;\nfunction toSource$1(func) {\n  if (func != null) {\n    try {\n      return funcToString$1.call(func);\n    } catch (e) {\n    }\n    try {\n      return func + \"\";\n    } catch (e) {\n    }\n  }\n  return \"\";\n}\nvar _toSource = toSource$1;\nvar isFunction$1 = isFunction_1, isMasked = _isMasked, isObject$1 = isObject_1, toSource = _toSource;\nvar reRegExpChar = /[\\\\^$.*+?()[\\]{}|]/g;\nvar reIsHostCtor = /^\\[object .+?Constructor\\]$/;\nvar funcProto = Function.prototype, objectProto$2 = Object.prototype;\nvar funcToString = funcProto.toString;\nvar hasOwnProperty$2 = objectProto$2.hasOwnProperty;\nvar reIsNative = RegExp(\"^\" + funcToString.call(hasOwnProperty$2).replace(reRegExpChar, \"\\\\$&\").replace(/hasOwnProperty|(function).*?(?=\\\\\\()| for .+?(?=\\\\\\])/g, \"$1.*?\") + \"$\");\nfunction baseIsNative$1(value) {\n  if (!isObject$1(value) || isMasked(value)) {\n    return false;\n  }\n  var pattern = isFunction$1(value) ? reIsNative : reIsHostCtor;\n  return pattern.test(toSource(value));\n}\nvar _baseIsNative = baseIsNative$1;\nfunction getValue$1(object, key) {\n  return object == null ? void 0 : object[key];\n}\nvar _getValue = getValue$1;\nvar baseIsNative = _baseIsNative, getValue = _getValue;\nfunction getNative$2(object, key) {\n  var value = getValue(object, key);\n  return baseIsNative(value) ? value : void 0;\n}\nvar _getNative = getNative$2;\nvar getNative$1 = _getNative;\nvar nativeCreate$4 = getNative$1(Object, \"create\");\nvar _nativeCreate = nativeCreate$4;\nvar nativeCreate$3 = _nativeCreate;\nfunction hashClear$1() {\n  this.__data__ = nativeCreate$3 ? nativeCreate$3(null) : {};\n  this.size = 0;\n}\nvar _hashClear = hashClear$1;\nfunction hashDelete$1(key) {\n  var result = this.has(key) && delete this.__data__[key];\n  this.size -= result ? 1 : 0;\n  return result;\n}\nvar _hashDelete = hashDelete$1;\nvar nativeCreate$2 = _nativeCreate;\nvar HASH_UNDEFINED$1 = \"__lodash_hash_undefined__\";\nvar objectProto$1 = Object.prototype;\nvar hasOwnProperty$1 = objectProto$1.hasOwnProperty;\nfunction hashGet$1(key) {\n  var data2 = this.__data__;\n  if (nativeCreate$2) {\n    var result = data2[key];\n    return result === HASH_UNDEFINED$1 ? void 0 : result;\n  }\n  return hasOwnProperty$1.call(data2, key) ? data2[key] : void 0;\n}\nvar _hashGet = hashGet$1;\nvar nativeCreate$1 = _nativeCreate;\nvar objectProto = Object.prototype;\nvar hasOwnProperty = objectProto.hasOwnProperty;\nfunction hashHas$1(key) {\n  var data2 = this.__data__;\n  return nativeCreate$1 ? data2[key] !== void 0 : hasOwnProperty.call(data2, key);\n}\nvar _hashHas = hashHas$1;\nvar nativeCreate = _nativeCreate;\nvar HASH_UNDEFINED = \"__lodash_hash_undefined__\";\nfunction hashSet$1(key, value) {\n  var data2 = this.__data__;\n  this.size += this.has(key) ? 0 : 1;\n  data2[key] = nativeCreate && value === void 0 ? HASH_UNDEFINED : value;\n  return this;\n}\nvar _hashSet = hashSet$1;\nvar hashClear = _hashClear, hashDelete = _hashDelete, hashGet = _hashGet, hashHas = _hashHas, hashSet = _hashSet;\nfunction Hash$1(entries) {\n  var index2 = -1, length = entries == null ? 0 : entries.length;\n  this.clear();\n  while (++index2 < length) {\n    var entry = entries[index2];\n    this.set(entry[0], entry[1]);\n  }\n}\nHash$1.prototype.clear = hashClear;\nHash$1.prototype[\"delete\"] = hashDelete;\nHash$1.prototype.get = hashGet;\nHash$1.prototype.has = hashHas;\nHash$1.prototype.set = hashSet;\nvar _Hash = Hash$1;\nfunction listCacheClear$1() {\n  this.__data__ = [];\n  this.size = 0;\n}\nvar _listCacheClear = listCacheClear$1;\nfunction eq$1(value, other) {\n  return value === other || value !== value && other !== other;\n}\nvar eq_1 = eq$1;\nvar eq = eq_1;\nfunction assocIndexOf$4(array, key) {\n  var length = array.length;\n  while (length--) {\n    if (eq(array[length][0], key)) {\n      return length;\n    }\n  }\n  return -1;\n}\nvar _assocIndexOf = assocIndexOf$4;\nvar assocIndexOf$3 = _assocIndexOf;\nvar arrayProto = Array.prototype;\nvar splice = arrayProto.splice;\nfunction listCacheDelete$1(key) {\n  var data2 = this.__data__, index2 = assocIndexOf$3(data2, key);\n  if (index2 < 0) {\n    return false;\n  }\n  var lastIndex = data2.length - 1;\n  if (index2 == lastIndex) {\n    data2.pop();\n  } else {\n    splice.call(data2, index2, 1);\n  }\n  --this.size;\n  return true;\n}\nvar _listCacheDelete = listCacheDelete$1;\nvar assocIndexOf$2 = _assocIndexOf;\nfunction listCacheGet$1(key) {\n  var data2 = this.__data__, index2 = assocIndexOf$2(data2, key);\n  return index2 < 0 ? void 0 : data2[index2][1];\n}\nvar _listCacheGet = listCacheGet$1;\nvar assocIndexOf$1 = _assocIndexOf;\nfunction listCacheHas$1(key) {\n  return assocIndexOf$1(this.__data__, key) > -1;\n}\nvar _listCacheHas = listCacheHas$1;\nvar assocIndexOf = _assocIndexOf;\nfunction listCacheSet$1(key, value) {\n  var data2 = this.__data__, index2 = assocIndexOf(data2, key);\n  if (index2 < 0) {\n    ++this.size;\n    data2.push([key, value]);\n  } else {\n    data2[index2][1] = value;\n  }\n  return this;\n}\nvar _listCacheSet = listCacheSet$1;\nvar listCacheClear = _listCacheClear, listCacheDelete = _listCacheDelete, listCacheGet = _listCacheGet, listCacheHas = _listCacheHas, listCacheSet = _listCacheSet;\nfunction ListCache$1(entries) {\n  var index2 = -1, length = entries == null ? 0 : entries.length;\n  this.clear();\n  while (++index2 < length) {\n    var entry = entries[index2];\n    this.set(entry[0], entry[1]);\n  }\n}\nListCache$1.prototype.clear = listCacheClear;\nListCache$1.prototype[\"delete\"] = listCacheDelete;\nListCache$1.prototype.get = listCacheGet;\nListCache$1.prototype.has = listCacheHas;\nListCache$1.prototype.set = listCacheSet;\nvar _ListCache = ListCache$1;\nvar getNative = _getNative, root = _root;\nvar Map$2 = getNative(root, \"Map\");\nvar _Map = Map$2;\nvar Hash = _Hash, ListCache = _ListCache, Map$1 = _Map;\nfunction mapCacheClear$1() {\n  this.size = 0;\n  this.__data__ = {\n    \"hash\": new Hash(),\n    \"map\": new (Map$1 || ListCache)(),\n    \"string\": new Hash()\n  };\n}\nvar _mapCacheClear = mapCacheClear$1;\nfunction isKeyable$1(value) {\n  var type = typeof value;\n  return type == \"string\" || type == \"number\" || type == \"symbol\" || type == \"boolean\" ? value !== \"__proto__\" : value === null;\n}\nvar _isKeyable = isKeyable$1;\nvar isKeyable = _isKeyable;\nfunction getMapData$4(map, key) {\n  var data2 = map.__data__;\n  return isKeyable(key) ? data2[typeof key == \"string\" ? \"string\" : \"hash\"] : data2.map;\n}\nvar _getMapData = getMapData$4;\nvar getMapData$3 = _getMapData;\nfunction mapCacheDelete$1(key) {\n  var result = getMapData$3(this, key)[\"delete\"](key);\n  this.size -= result ? 1 : 0;\n  return result;\n}\nvar _mapCacheDelete = mapCacheDelete$1;\nvar getMapData$2 = _getMapData;\nfunction mapCacheGet$1(key) {\n  return getMapData$2(this, key).get(key);\n}\nvar _mapCacheGet = mapCacheGet$1;\nvar getMapData$1 = _getMapData;\nfunction mapCacheHas$1(key) {\n  return getMapData$1(this, key).has(key);\n}\nvar _mapCacheHas = mapCacheHas$1;\nvar getMapData = _getMapData;\nfunction mapCacheSet$1(key, value) {\n  var data2 = getMapData(this, key), size = data2.size;\n  data2.set(key, value);\n  this.size += data2.size == size ? 0 : 1;\n  return this;\n}\nvar _mapCacheSet = mapCacheSet$1;\nvar mapCacheClear = _mapCacheClear, mapCacheDelete = _mapCacheDelete, mapCacheGet = _mapCacheGet, mapCacheHas = _mapCacheHas, mapCacheSet = _mapCacheSet;\nfunction MapCache$1(entries) {\n  var index2 = -1, length = entries == null ? 0 : entries.length;\n  this.clear();\n  while (++index2 < length) {\n    var entry = entries[index2];\n    this.set(entry[0], entry[1]);\n  }\n}\nMapCache$1.prototype.clear = mapCacheClear;\nMapCache$1.prototype[\"delete\"] = mapCacheDelete;\nMapCache$1.prototype.get = mapCacheGet;\nMapCache$1.prototype.has = mapCacheHas;\nMapCache$1.prototype.set = mapCacheSet;\nvar _MapCache = MapCache$1;\nvar MapCache = _MapCache;\nvar FUNC_ERROR_TEXT = \"Expected a function\";\nfunction memoize$1(func, resolver) {\n  if (typeof func != \"function\" || resolver != null && typeof resolver != \"function\") {\n    throw new TypeError(FUNC_ERROR_TEXT);\n  }\n  var memoized = function() {\n    var args = arguments, key = resolver ? resolver.apply(this, args) : args[0], cache2 = memoized.cache;\n    if (cache2.has(key)) {\n      return cache2.get(key);\n    }\n    var result = func.apply(this, args);\n    memoized.cache = cache2.set(key, result) || cache2;\n    return result;\n  };\n  memoized.cache = new (memoize$1.Cache || MapCache)();\n  return memoized;\n}\nmemoize$1.Cache = MapCache;\nvar memoize_1 = memoize$1;\nvar memoize = memoize_1;\nvar MAX_MEMOIZE_SIZE = 500;\nfunction memoizeCapped$1(func) {\n  var result = memoize(func, function(key) {\n    if (cache2.size === MAX_MEMOIZE_SIZE) {\n      cache2.clear();\n    }\n    return key;\n  });\n  var cache2 = result.cache;\n  return result;\n}\nvar _memoizeCapped = memoizeCapped$1;\nvar memoizeCapped = _memoizeCapped;\nvar rePropName = /[^.[\\]]+|\\[(?:(-?\\d+(?:\\.\\d+)?)|([\"'])((?:(?!\\2)[^\\\\]|\\\\.)*?)\\2)\\]|(?=(?:\\.|\\[\\])(?:\\.|\\[\\]|$))/g;\nvar reEscapeChar = /\\\\(\\\\)?/g;\nvar stringToPath$1 = memoizeCapped(function(string) {\n  var result = [];\n  if (string.charCodeAt(0) === 46) {\n    result.push(\"\");\n  }\n  string.replace(rePropName, function(match, number, quote, subString) {\n    result.push(quote ? subString.replace(reEscapeChar, \"$1\") : number || match);\n  });\n  return result;\n});\nvar _stringToPath = stringToPath$1;\nfunction arrayMap$1(array, iteratee) {\n  var index2 = -1, length = array == null ? 0 : array.length, result = Array(length);\n  while (++index2 < length) {\n    result[index2] = iteratee(array[index2], index2, array);\n  }\n  return result;\n}\nvar _arrayMap = arrayMap$1;\nvar Symbol$1 = _Symbol, arrayMap = _arrayMap, isArray$2 = isArray_1, isSymbol$1 = isSymbol_1;\nvar INFINITY$1 = 1 / 0;\nvar symbolProto = Symbol$1 ? Symbol$1.prototype : void 0, symbolToString = symbolProto ? symbolProto.toString : void 0;\nfunction baseToString$1(value) {\n  if (typeof value == \"string\") {\n    return value;\n  }\n  if (isArray$2(value)) {\n    return arrayMap(value, baseToString$1) + \"\";\n  }\n  if (isSymbol$1(value)) {\n    return symbolToString ? symbolToString.call(value) : \"\";\n  }\n  var result = value + \"\";\n  return result == \"0\" && 1 / value == -INFINITY$1 ? \"-0\" : result;\n}\nvar _baseToString = baseToString$1;\nvar baseToString = _baseToString;\nfunction toString$2(value) {\n  return value == null ? \"\" : baseToString(value);\n}\nvar toString_1 = toString$2;\nvar isArray$1 = isArray_1, isKey = _isKey, stringToPath = _stringToPath, toString$1 = toString_1;\nfunction castPath$1(value, object) {\n  if (isArray$1(value)) {\n    return value;\n  }\n  return isKey(value, object) ? [value] : stringToPath(toString$1(value));\n}\nvar _castPath = castPath$1;\nvar isSymbol = isSymbol_1;\nvar INFINITY = 1 / 0;\nfunction toKey$1(value) {\n  if (typeof value == \"string\" || isSymbol(value)) {\n    return value;\n  }\n  var result = value + \"\";\n  return result == \"0\" && 1 / value == -INFINITY ? \"-0\" : result;\n}\nvar _toKey = toKey$1;\nvar castPath = _castPath, toKey = _toKey;\nfunction baseGet$1(object, path) {\n  path = castPath(path, object);\n  var index2 = 0, length = path.length;\n  while (object != null && index2 < length) {\n    object = object[toKey(path[index2++])];\n  }\n  return index2 && index2 == length ? object : void 0;\n}\nvar _baseGet = baseGet$1;\nvar baseGet = _baseGet;\nfunction get(object, path, defaultValue) {\n  var result = object == null ? void 0 : baseGet(object, path);\n  return result === void 0 ? defaultValue : result;\n}\nvar get_1 = get;\nfunction getHighlightText(_a) {\n  var nodeList = _a.nodeList, pattern = _a.pattern, highlightClassName = _a.highlightClassName;\n  if (!pattern) {\n    return nodeList;\n  }\n  var transformNode = function(node) {\n    if (node && node.props && typeof node.props.children === \"string\") {\n      var children_1 = node.props.children;\n      return React.cloneElement(node, {\n        children: function() {\n          var indexOfNextRegTest = 0;\n          var result = [];\n          children_1.replace(pattern, function() {\n            var args = [];\n            for (var _i = 0; _i < arguments.length; _i++) {\n              args[_i] = arguments[_i];\n            }\n            var match = args[0];\n            var index2 = args[args.length - 2];\n            if (index2 > indexOfNextRegTest) {\n              result.push(children_1.slice(indexOfNextRegTest, index2));\n            }\n            result.push(React.createElement(\"span\", { key: index2, className: cs$1(highlightClassName) }, match));\n            indexOfNextRegTest = index2 + match.length;\n          });\n          result.push(children_1.slice(indexOfNextRegTest));\n          return result;\n        }()\n      });\n    }\n    return node;\n  };\n  return isArray$5(nodeList) ? nodeList.map(function(node) {\n    return transformNode(node);\n  }) : transformNode(nodeList);\n}\nvar __assign$w = globalThis && globalThis.__assign || function() {\n  __assign$w = Object.assign || function(t2) {\n    for (var s, i = 1, n2 = arguments.length; i < n2; i++) {\n      s = arguments[i];\n      for (var p2 in s)\n        if (Object.prototype.hasOwnProperty.call(s, p2))\n          t2[p2] = s[p2];\n    }\n    return t2;\n  };\n  return __assign$w.apply(this, arguments);\n};\nfunction preventDefaultEvent(e) {\n  e && e.preventDefault();\n}\nfunction isEmptyValue(value, isMultiple) {\n  return isMultiple ? !isArray$5(value) || !value.length : value === void 0;\n}\nfunction getValidValue(value, isMultiple, labelInValue) {\n  if (labelInValue) {\n    if (isMultiple) {\n      value = Array.isArray(value) ? value.map(function(item) {\n        return isObject$6(item) && \"label\" in item ? item.value : item;\n      }) : value;\n    } else {\n      value = isObject$6(value) && \"label\" in value ? value.value : value;\n    }\n  }\n  return isEmptyValue(value, isMultiple) ? isMultiple ? Array.isArray(value) ? value : [] : void 0 : value;\n}\nfunction isSelectOption(child) {\n  return get_1(child, \"props.isSelectOption\");\n}\nfunction isSelectOptGroup(child) {\n  return get_1(child, \"props.isSelectOptGroup\");\n}\nfunction flatChildren(_a, _b, _c) {\n  var children = _a.children, options = _a.options, filterOption = _a.filterOption;\n  var _d = _b.inputValue, inputValue = _d === void 0 ? \"\" : _d, userCreatedOptions = _b.userCreatedOptions, userCreatingOption = _b.userCreatingOption, prefixCls2 = _b.prefixCls;\n  var _e = _c === void 0 ? {} : _c, _f = _e.optionInfoMap, optionInfoMap = _f === void 0 ? new Map() : _f, _g = _e.optionValueList, optionValueList = _g === void 0 ? [] : _g, _h = _e.customNodeCount, customNodeCount = _h === void 0 ? 0 : _h;\n  var hasOptGroup = false;\n  var hasComplexLabelInOptions = false;\n  var childrenList = [];\n  var optionIndexListForArrowKey = [];\n  var getChildValue = function(child) {\n    var propValue = get_1(child, \"props.value\");\n    return propValue === void 0 ? child.props.children.toString() : propValue;\n  };\n  var getChildKey = function(_a2, key, isGroupTitle) {\n    var label = _a2.label, value = _a2.value;\n    if (!label && !value && !key) {\n      customNodeCount++;\n      return \"custom_node_\" + customNodeCount;\n    }\n    return isGroupTitle ? key || \"group_\" + label : key || typeof value + \"_\" + value || label + \"_\" + optionInfoMap.size;\n  };\n  var handleOption = function(child, origin) {\n    var optionValue = getChildValue(child);\n    var isValidOption = true;\n    if (filterOption === true) {\n      isValidOption = optionValue !== void 0 && String(optionValue).toLowerCase().indexOf(inputValue.toLowerCase()) !== -1;\n    } else if (typeof filterOption === \"function\") {\n      isValidOption = !inputValue || filterOption(inputValue, child);\n    }\n    if (!optionInfoMap.get(optionValue)) {\n      if (!(\"_key\" in child.props)) {\n        child = React.cloneElement(child, {\n          _key: getChildKey(child.props, child.key)\n        });\n      }\n      var index2 = optionInfoMap.size;\n      var option = __assign$w(__assign$w({ child }, child.props), { value: optionValue, _index: index2, _origin: origin, _valid: isValidOption });\n      optionInfoMap.set(optionValue, option);\n      optionValueList.push(optionValue);\n      if (isValidOption) {\n        childrenList.push(child);\n        if (!option.disabled) {\n          optionIndexListForArrowKey.push(index2);\n        }\n      }\n    }\n    if (typeof child.props.children !== \"string\") {\n      hasComplexLabelInOptions = true;\n    }\n  };\n  var extendChildren = function(arr, origin) {\n    if (origin && isArray$5(arr) && arr.length) {\n      arr.forEach(function(option) {\n        option = isString$1(option) || isNumber$1(option) ? {\n          label: option,\n          value: option\n        } : option;\n        var child = React.createElement(Option$1, { _key: getChildKey(option), value: option.value, disabled: option.disabled === true, extra: option.extra }, option.label);\n        handleOption(child, origin);\n      });\n    }\n  };\n  if (userCreatingOption) {\n    extendChildren([userCreatingOption], \"userCreatingOption\");\n  }\n  if (children) {\n    React.Children.map(children, function(child) {\n      if (isSelectOptGroup(child)) {\n        var _a2 = child.props, children_1 = _a2.children, options_1 = _a2.options;\n        var _b2 = flatChildren({ children: children_1, options: options_1, filterOption }, { inputValue, prefixCls: prefixCls2 }, { optionInfoMap, optionValueList, customNodeCount }), _childrenList = _b2.childrenList, _optionIndexListForArrowKey = _b2.optionIndexListForArrowKey, _hasComplexLabelInOptions = _b2.hasComplexLabelInOptions;\n        if (_childrenList.length) {\n          childrenList.push(React.cloneElement(child, {\n            children: null,\n            _key: getChildKey(child.props, child.key, true)\n          }));\n          childrenList = childrenList.concat(_childrenList);\n          optionIndexListForArrowKey = optionIndexListForArrowKey.concat(_optionIndexListForArrowKey);\n          hasOptGroup = true;\n          hasComplexLabelInOptions = hasComplexLabelInOptions || _hasComplexLabelInOptions;\n        }\n      } else if (isSelectOption(child)) {\n        handleOption(child, \"children\");\n      } else if (isObject$6(child) && child.props) {\n        childrenList.push(React.cloneElement(child, {\n          _key: getChildKey(child.props, child.key)\n        }));\n      }\n    });\n  }\n  extendChildren(options, \"options\");\n  extendChildren(userCreatedOptions, \"userCreatedOptions\");\n  return {\n    childrenList: getHighlightText({\n      nodeList: childrenList,\n      pattern: inputValue,\n      highlightClassName: prefixCls2 + \"-highlight\"\n    }),\n    optionInfoMap,\n    optionValueList,\n    optionIndexListForArrowKey,\n    hasOptGroup,\n    hasComplexLabelInOptions\n  };\n}\nvar __assign$v = globalThis && globalThis.__assign || function() {\n  __assign$v = Object.assign || function(t2) {\n    for (var s, i = 1, n2 = arguments.length; i < n2; i++) {\n      s = arguments[i];\n      for (var p2 in s)\n        if (Object.prototype.hasOwnProperty.call(s, p2))\n          t2[p2] = s[p2];\n    }\n    return t2;\n  };\n  return __assign$v.apply(this, arguments);\n};\nvar __read$w = globalThis && globalThis.__read || function(o, n2) {\n  var m2 = typeof Symbol === \"function\" && o[Symbol.iterator];\n  if (!m2)\n    return o;\n  var i = m2.call(o), r2, ar = [], e;\n  try {\n    while ((n2 === void 0 || n2-- > 0) && !(r2 = i.next()).done)\n      ar.push(r2.value);\n  } catch (error) {\n    e = { error };\n  } finally {\n    try {\n      if (r2 && !r2.done && (m2 = i[\"return\"]))\n        m2.call(i);\n    } finally {\n      if (e)\n        throw e.error;\n    }\n  }\n  return ar;\n};\nvar __values = globalThis && globalThis.__values || function(o) {\n  var s = typeof Symbol === \"function\" && Symbol.iterator, m2 = s && o[s], i = 0;\n  if (m2)\n    return m2.call(o);\n  if (o && typeof o.length === \"number\")\n    return {\n      next: function() {\n        if (o && i >= o.length)\n          o = void 0;\n        return { value: o && o[i++], done: !o };\n      }\n    };\n  throw new TypeError(s ? \"Object is not iterable.\" : \"Symbol.iterator is not defined.\");\n};\nvar __spreadArray$8 = globalThis && globalThis.__spreadArray || function(to, from, pack) {\n  if (pack || arguments.length === 2)\n    for (var i = 0, l2 = from.length, ar; i < l2; i++) {\n      if (ar || !(i in from)) {\n        if (!ar)\n          ar = Array.prototype.slice.call(from, 0, i);\n        ar[i] = from[i];\n      }\n    }\n  return to.concat(ar || Array.prototype.slice.call(from));\n};\nvar THRESHOLD_TOKEN_SEPARATOR_TRIGGER = 100;\nvar defaultProps$d = {\n  trigger: \"click\",\n  bordered: true,\n  filterOption: true,\n  unmountOnExit: true,\n  defaultActiveFirstOption: true\n};\nfunction Select(baseProps, ref) {\n  var _a = react.exports.useContext(ConfigContext), getPrefixCls = _a.getPrefixCls, renderEmpty2 = _a.renderEmpty, componentConfig2 = _a.componentConfig;\n  var props = useMergeProps(baseProps, defaultProps$d, componentConfig2 === null || componentConfig2 === void 0 ? void 0 : componentConfig2.Select);\n  var children = props.children, renderFormat = props.renderFormat, defaultActiveFirstOption = props.defaultActiveFirstOption, disabled = props.disabled, unmountOnExit = props.unmountOnExit, notFoundContent = props.notFoundContent, showSearch = props.showSearch, tokenSeparators = props.tokenSeparators, options = props.options, filterOption = props.filterOption, labelInValue = props.labelInValue, getPopupContainer = props.getPopupContainer, trigger = props.trigger, triggerElement = props.triggerElement, triggerProps = props.triggerProps, dropdownRender = props.dropdownRender, dropdownMenuStyle = props.dropdownMenuStyle, dropdownMenuClassName = props.dropdownMenuClassName, virtualListProps = props.virtualListProps, onChange = props.onChange, onDeselect = props.onDeselect, onClear = props.onClear, onSearch = props.onSearch, onFocus3 = props.onFocus, onBlur3 = props.onBlur, onPopupScroll = props.onPopupScroll, onVisibleChange = props.onVisibleChange, onInputValueChange = props.onInputValueChange, onPaste = props.onPaste;\n  var mode = props.mode, allowCreate = props.allowCreate;\n  if (mode === \"tags\") {\n    mode = \"multiple\";\n    allowCreate = true;\n  }\n  var prefixCls2 = getPrefixCls(\"select\");\n  var isMultipleMode = mode === \"multiple\";\n  var _b = __read$w(react.exports.useState(getValidValue(props.defaultValue, isMultipleMode, labelInValue)), 2), stateValue = _b[0], setValue = _b[1];\n  var value = \"value\" in props ? getValidValue(props.value, isMultipleMode, labelInValue) : stateValue;\n  var _c = __read$w(useMergeValue(\"\", {\n    value: \"inputValue\" in props ? props.inputValue || \"\" : void 0\n  }), 3), inputValue = _c[0], setInputValue = _c[1], stateInputValue = _c[2];\n  var _d = __read$w(useMergeValue(false, {\n    defaultValue: props.defaultPopupVisible,\n    value: \"popupVisible\" in props ? props.popupVisible : triggerProps && \"popupVisible\" in triggerProps ? triggerProps.popupVisible : void 0\n  }), 2), popupVisible = _d[0], setPopupVisible = _d[1];\n  var _e = __read$w(react.exports.useState(null), 2), userCreatingOption = _e[0], setUserCreatingOption = _e[1];\n  var _f = __read$w(react.exports.useState([]), 2), userCreatedOptions = _f[0], setUserCreatedOptions = _f[1];\n  var _g = __read$w(react.exports.useState(isArray$5(value) ? value[0] : value), 2), valueActive = _g[0], setValueActive = _g[1];\n  var _h = react.exports.useMemo(function() {\n    return flatChildren({ children, options, filterOption }, {\n      prefixCls: prefixCls2,\n      inputValue,\n      userCreatedOptions,\n      userCreatingOption\n    });\n  }, [children, options, filterOption, inputValue, userCreatingOption, userCreatedOptions]), childrenList = _h.childrenList, optionInfoMap = _h.optionInfoMap, optionValueList = _h.optionValueList, optionIndexListForArrowKey = _h.optionIndexListForArrowKey, hasOptGroup = _h.hasOptGroup, hasComplexLabelInOptions = _h.hasComplexLabelInOptions;\n  var refWrapper = react.exports.useRef(null);\n  var refTrigger = react.exports.useRef(null);\n  var refSelectView = react.exports.useRef(null);\n  var refValueMap = react.exports.useRef([]);\n  var refKeyboardArrowDirection = react.exports.useRef(null);\n  var refOnInputChangeCallbackValue = react.exports.useRef(inputValue);\n  var refOnInputChangeCallbackReason = react.exports.useRef(null);\n  var refTSLastSeparateTriggered = react.exports.useRef(0);\n  var isNoOptionSelected = isEmptyValue(value, isMultipleMode);\n  var valueActiveDefault = defaultActiveFirstOption ? optionValueList[optionIndexListForArrowKey[0]] : void 0;\n  var scrollIntoView2 = function(optionValue) {\n    var activeOption = optionInfoMap.get(optionValue);\n    if (refWrapper.current && activeOption && activeOption.child.props) {\n      refWrapper.current.scrollTo({ key: activeOption.child.props._key });\n    }\n  };\n  var tryUpdateInputValue = function(value2, reason) {\n    if (value2 !== refOnInputChangeCallbackValue.current) {\n      setInputValue(value2);\n      refOnInputChangeCallbackValue.current = value2;\n      refOnInputChangeCallbackReason.current = reason;\n      onInputValueChange && onInputValueChange(value2, reason);\n    }\n  };\n  var tryUpdatePopupVisible = function(value2) {\n    if (popupVisible !== value2) {\n      setPopupVisible(value2);\n      onVisibleChange && onVisibleChange(value2);\n      triggerProps && triggerProps.onVisibleChange && triggerProps.onVisibleChange(value2);\n    }\n  };\n  react.exports.useEffect(function() {\n    if (isMultipleMode) {\n      if (!Array.isArray(value)) {\n        setValue(value === void 0 ? [] : [value]);\n      }\n    } else if (Array.isArray(value)) {\n      setValue(value.length === 0 ? void 0 : value[0]);\n    }\n  }, [isMultipleMode, value]);\n  react.exports.useEffect(function() {\n    if (popupVisible) {\n      var firstValue = isArray$5(value) ? value[0] : value;\n      var nextValueActive_1 = !isNoOptionSelected && optionInfoMap.has(firstValue) ? firstValue : valueActiveDefault;\n      setValueActive(nextValueActive_1);\n      setTimeout(function() {\n        return scrollIntoView2(nextValueActive_1);\n      });\n    } else {\n      tryUpdateInputValue(\"\", \"optionListHide\");\n    }\n  }, [popupVisible]);\n  react.exports.useEffect(function() {\n    if (refKeyboardArrowDirection.current === \"up\" || refKeyboardArrowDirection.current === \"down\") {\n      scrollIntoView2(valueActive);\n      refKeyboardArrowDirection.current = \"none\";\n    }\n  }, [valueActive]);\n  react.exports.useEffect(function() {\n    setValueActive(valueActiveDefault);\n  }, [JSON.stringify(childrenList.map(function(child) {\n    var _a2;\n    return (_a2 = child === null || child === void 0 ? void 0 : child.props) === null || _a2 === void 0 ? void 0 : _a2.value;\n  }))]);\n  react.exports.useEffect(function() {\n    refValueMap.current = refValueMap.current.filter(function(x2) {\n      return isMultipleMode ? isArray$5(value) && value.indexOf(x2.value) > -1 : x2.value === value;\n    });\n  }, [value, isMultipleMode]);\n  react.exports.useEffect(function() {\n    if (allowCreate && Array.isArray(value)) {\n      var newUseCreatedOptions = value.filter(function(v2) {\n        var option = optionInfoMap.get(v2);\n        return !option || option._origin === \"userCreatingOption\";\n      });\n      var validUseCreatedOptions = userCreatedOptions.filter(function(tag) {\n        return value.indexOf(tag) !== -1;\n      });\n      var _userCreatedOptions = validUseCreatedOptions.concat(newUseCreatedOptions);\n      if (_userCreatedOptions.toString() !== userCreatedOptions.toString()) {\n        setUserCreatedOptions(_userCreatedOptions);\n      }\n    }\n  }, [value]);\n  react.exports.useEffect(function() {\n    if (allowCreate) {\n      setUserCreatingOption(optionInfoMap.has(inputValue) ? null : inputValue);\n    }\n  }, [inputValue]);\n  react.exports.useEffect(function() {\n    var reason = refOnInputChangeCallbackReason.current;\n    if (stateInputValue === inputValue && (reason === \"manual\" || reason === \"optionListHide\")) {\n      onSearch && onSearch(inputValue, reason);\n    }\n  }, [inputValue]);\n  var getOptionInfoByValue = function(value2) {\n    var option = optionInfoMap.get(value2);\n    if (option) {\n      var index2 = refValueMap.current.findIndex(function(item2) {\n        return item2.value === value2;\n      });\n      if (index2 > -1) {\n        refValueMap.current.splice(index2, 1, { value: value2, option });\n      } else {\n        refValueMap.current.push({ value: value2, option });\n      }\n      return option;\n    }\n    var item = refValueMap.current.find(function(x2) {\n      return x2.value === value2;\n    });\n    return item && item.option;\n  };\n  var getValueActive = function(direction) {\n    if (!optionIndexListForArrowKey.length) {\n      return void 0;\n    }\n    if (valueActive === void 0 || !optionInfoMap.has(valueActive)) {\n      return optionValueList[optionIndexListForArrowKey[0]];\n    }\n    var activeOption = optionInfoMap.get(valueActive);\n    var activeIndex = activeOption._index;\n    var _index = optionIndexListForArrowKey.indexOf(activeIndex);\n    var _length = optionIndexListForArrowKey.length;\n    return optionValueList[optionIndexListForArrowKey[((direction === \"up\" ? _index - 1 : _index + 1) + _length) % _length]];\n  };\n  var getValueForCallbackParameter = function(value2, option, isEmpty) {\n    if (isEmpty === void 0) {\n      isEmpty = isEmptyValue(value2, isMultipleMode);\n    }\n    if (labelInValue && !isEmpty) {\n      var getOptionLabel_1 = function(optionValue, optionInfo) {\n        var e_1, _a2;\n        if (optionInfo) {\n          return optionInfo.children;\n        }\n        var propValue = \"value\" in props ? props.value : \"defaultValue\" in props ? props.defaultValue : null;\n        if (Array.isArray(propValue)) {\n          try {\n            for (var propValue_1 = __values(propValue), propValue_1_1 = propValue_1.next(); !propValue_1_1.done; propValue_1_1 = propValue_1.next()) {\n              var item = propValue_1_1.value;\n              if (isObject$6(item) && item.value === optionValue) {\n                return item.label;\n              }\n            }\n          } catch (e_1_1) {\n            e_1 = { error: e_1_1 };\n          } finally {\n            try {\n              if (propValue_1_1 && !propValue_1_1.done && (_a2 = propValue_1.return))\n                _a2.call(propValue_1);\n            } finally {\n              if (e_1)\n                throw e_1.error;\n            }\n          }\n        } else if (isObject$6(propValue) && propValue.value === optionValue) {\n          return propValue.label;\n        }\n      };\n      if (Array.isArray(value2)) {\n        return value2.map(function(optionValue, index2) {\n          return {\n            value: optionValue,\n            label: getOptionLabel_1(optionValue, option[index2])\n          };\n        });\n      }\n      return { value: value2, label: getOptionLabel_1(value2, option) };\n    }\n    return value2;\n  };\n  var tryUpdateSelectValue = function(value2) {\n    setValue(value2);\n    if (onChange) {\n      var option = value2 === void 0 ? void 0 : Array.isArray(value2) ? value2.map(getOptionInfoByValue) : getOptionInfoByValue(value2);\n      onChange(getValueForCallbackParameter(value2, option), option);\n    }\n  };\n  var checkOption = function(valueToAdd) {\n    var option = optionInfoMap.get(valueToAdd);\n    if (option) {\n      var newValue = value.concat(valueToAdd);\n      tryUpdateSelectValue(newValue);\n    }\n  };\n  var uncheckOption = function(valueToRemove) {\n    var option = getOptionInfoByValue(valueToRemove);\n    var newValue = value.filter(function(v2) {\n      return v2 !== valueToRemove;\n    });\n    tryUpdateSelectValue(newValue);\n    if (onDeselect) {\n      onDeselect(getValueForCallbackParameter(valueToRemove, option, false), option);\n    }\n  };\n  var handleOptionClick = function(optionValue, disabled2) {\n    if (disabled2) {\n      return;\n    }\n    if (isMultipleMode) {\n      value.indexOf(optionValue) === -1 ? checkOption(optionValue) : uncheckOption(optionValue);\n      if (!isObject$6(showSearch) || !showSearch.retainInputValueWhileSelect) {\n        tryUpdateInputValue(\"\", \"optionChecked\");\n      }\n    } else {\n      if (optionValue !== value) {\n        tryUpdateSelectValue(optionValue);\n      }\n      setTimeout(function() {\n        tryUpdatePopupVisible(false);\n      });\n    }\n  };\n  var hotkeyHandler = getHotkeyHandler(new Map([\n    [Esc.code, function() {\n      return tryUpdatePopupVisible(false);\n    }],\n    [\n      Enter.code,\n      function() {\n        if (popupVisible) {\n          var option = optionInfoMap.get(valueActive);\n          option && handleOptionClick(valueActive, option.disabled);\n        } else {\n          tryUpdatePopupVisible(true);\n        }\n      }\n    ],\n    [\n      Tab.code,\n      function() {\n        return tryUpdatePopupVisible(false);\n      }\n    ],\n    [\n      ArrowUp.code,\n      function() {\n        if (popupVisible) {\n          refKeyboardArrowDirection.current = \"up\";\n          setValueActive(getValueActive(\"up\"));\n          return false;\n        }\n      }\n    ],\n    [\n      ArrowDown.code,\n      function() {\n        if (popupVisible) {\n          refKeyboardArrowDirection.current = \"down\";\n          setValueActive(getValueActive(\"down\"));\n          return false;\n        }\n      }\n    ]\n  ]));\n  var renderPopup = function() {\n    var _a2;\n    var needMeasureLongestItem = (triggerProps === null || triggerProps === void 0 ? void 0 : triggerProps.autoAlignPopupWidth) === false;\n    var needForbidVirtual = needMeasureLongestItem && hasComplexLabelInOptions;\n    var mergedNotFoundContent = \"notFoundContent\" in props ? notFoundContent : renderEmpty2(\"Select\");\n    var eleOptionList = childrenList.length ? React.createElement(VirtualList$1, __assign$v({ style: dropdownMenuStyle, className: cs$1(prefixCls2 + \"-popup-inner\", dropdownMenuClassName), ref: refWrapper, data: childrenList, height: null, isStaticItemHeight: !hasOptGroup, measureLongestItem: needMeasureLongestItem, itemKey: function(child) {\n      return child.props._key;\n    }, onMouseDown: preventDefaultEvent, onMouseMove: function() {\n      refKeyboardArrowDirection.current = null;\n    }, onScroll: function(e) {\n      return onPopupScroll && onPopupScroll(e.target);\n    } }, virtualListProps, { threshold: needForbidVirtual ? null : virtualListProps === null || virtualListProps === void 0 ? void 0 : virtualListProps.threshold }), function(child) {\n      if (isSelectOptGroup(child)) {\n        return React.createElement(child.type, __assign$v({}, child.props, { prefixCls: prefixCls2 }));\n      }\n      if (isSelectOption(child)) {\n        return child && React.createElement(child.type, __assign$v({}, child.props, { prefixCls: prefixCls2, valueSelect: value, valueActive, isMultipleMode, onClickOption: handleOptionClick, onMouseEnter: function(value2) {\n          refKeyboardArrowDirection.current === null && setValueActive(value2);\n        }, onMouseLeave: function() {\n          refKeyboardArrowDirection.current === null && setValueActive(void 0);\n        } }));\n      }\n      return child;\n    }) : null;\n    var eleNoOptionPlaceholder = mergedNotFoundContent ? React.createElement(\"div\", { style: dropdownMenuStyle, className: cs$1(prefixCls2 + \"-popup-inner\", dropdownMenuClassName) }, mergedNotFoundContent) : null;\n    return React.createElement(\"div\", { className: cs$1(prefixCls2 + \"-popup\", (_a2 = {}, _a2[prefixCls2 + \"-popup-hidden\"] = eleOptionList === null && eleNoOptionPlaceholder === null, _a2[prefixCls2 + \"-popup-multiple\"] = isMultipleMode, _a2)) }, typeof dropdownRender === \"function\" ? dropdownRender(eleOptionList || eleNoOptionPlaceholder) : eleOptionList || eleNoOptionPlaceholder);\n  };\n  var handleTokenSeparators = function(str) {\n    var hasSeparator = false;\n    if (isMultipleMode && isArray$5(tokenSeparators) && tokenSeparators.length) {\n      var rawValues_1 = str.split(new RegExp(\"[\" + tokenSeparators.join(\"\") + \"]\"));\n      if (rawValues_1.length > 1) {\n        var splitValues = rawValues_1.filter(function(v2, index2) {\n          return v2 && rawValues_1.indexOf(v2) === index2;\n        });\n        var newValue_1 = value.slice(0);\n        var needUpdate_1 = false;\n        splitValues.forEach(function(v2) {\n          if (newValue_1.indexOf(v2) === -1 && (allowCreate || optionInfoMap.get(v2))) {\n            newValue_1.push(v2);\n            needUpdate_1 = true;\n          }\n        });\n        if (needUpdate_1) {\n          tryUpdateSelectValue(newValue_1);\n        }\n        hasSeparator = true;\n      }\n    }\n    return hasSeparator;\n  };\n  var selectViewEventHandlers = {\n    onFocus: onFocus3,\n    onBlur: function(event) {\n      onBlur3 && onBlur3(event);\n      !popupVisible && tryUpdateInputValue(\"\", \"optionListHide\");\n    },\n    onKeyDown: function(event) {\n      if (event.target.tagName === \"INPUT\" && event.target.value) {\n        var isTab = event.key === Tab.key;\n        var isEnter = event.key === Enter.key;\n        if (isEnter || isTab) {\n          var suffix = isEnter ? \"\\n\" : isTab ? \"\t\" : \"\";\n          if (handleTokenSeparators(event.target.value + suffix)) {\n            refTSLastSeparateTriggered.current = Date.now();\n            tryUpdateInputValue(\"\", \"tokenSeparator\");\n          }\n        }\n      }\n      hotkeyHandler(event);\n    },\n    onChangeInputValue: function(value2, _a2) {\n      var inputType = _a2.nativeEvent.inputType;\n      if (inputType === \"insertFromPaste\" && Date.now() - refTSLastSeparateTriggered.current < THRESHOLD_TOKEN_SEPARATOR_TRIGGER || handleTokenSeparators(value2)) {\n        tryUpdateInputValue(\"\", \"tokenSeparator\");\n      } else {\n        tryUpdateInputValue(value2, \"manual\");\n      }\n      if (!popupVisible && value2) {\n        tryUpdatePopupVisible(true);\n      }\n    },\n    onPaste: function(e) {\n      if (handleTokenSeparators(e.clipboardData.getData(\"text\"))) {\n        refTSLastSeparateTriggered.current = Date.now();\n      }\n      onPaste && onPaste(e);\n    },\n    onRemoveCheckedItem: function(_, index2, event) {\n      event.stopPropagation();\n      uncheckOption(value[index2]);\n    },\n    onClear: function(event) {\n      event.stopPropagation();\n      if (isMultipleMode) {\n        var newValue = value.filter(function(v2) {\n          var item = optionInfoMap.get(v2);\n          return item && item.disabled;\n        });\n        tryUpdateSelectValue(newValue);\n      } else {\n        tryUpdateSelectValue(void 0);\n      }\n      tryUpdateInputValue(\"\", \"manual\");\n      onClear && onClear(popupVisible);\n    }\n  };\n  react.exports.useImperativeHandle(ref, function() {\n    var _a2;\n    return {\n      dom: (_a2 = refSelectView.current) === null || _a2 === void 0 ? void 0 : _a2.dom,\n      focus: function() {\n        refSelectView.current && refSelectView.current.focus();\n      },\n      blur: function() {\n        refSelectView.current && refSelectView.current.blur();\n      },\n      hotkeyHandler,\n      activeOptionValue: valueActive,\n      getOptionInfoByValue,\n      getOptionInfoList: function() {\n        return __spreadArray$8([], __read$w(optionInfoMap.values()), false).filter(function(info) {\n          return info._valid;\n        });\n      }\n    };\n  }, [hotkeyHandler, optionInfoMap, valueActive]);\n  return React.createElement(ResizeObserver, { onResize: function() {\n    return refTrigger.current.updatePopupPosition();\n  } }, React.createElement(Trigger$1, __assign$v({ ref: function(ref2) {\n    return refTrigger.current = ref2;\n  }, popup: renderPopup, trigger, disabled, getPopupContainer, classNames: \"slideDynamicOrigin\", autoAlignPopupWidth: true, popupAlign: { bottom: 4 }, popupVisible, unmountOnExit, onVisibleChange: tryUpdatePopupVisible }, omit(triggerProps, [\"popupVisible\", \"onVisibleChange\"])), triggerElement || React.createElement(SelectView$1, __assign$v({}, props, selectViewEventHandlers, {\n    ref: refSelectView,\n    value,\n    inputValue,\n    popupVisible,\n    prefixCls: prefixCls2,\n    isEmptyValue: isNoOptionSelected,\n    isMultiple: isMultipleMode,\n    onSort: tryUpdateSelectValue,\n    renderText: function(value2) {\n      var option = getOptionInfoByValue(value2);\n      var text = value2;\n      if (isFunction$3(renderFormat)) {\n        text = renderFormat(option || null, getValueForCallbackParameter(value2, option, false));\n      } else if (option) {\n        if (\"children\" in option) {\n          text = option.children;\n        }\n      } else if (labelInValue && isObject$6(props.value)) {\n        text = props.value.label;\n      }\n      return {\n        text,\n        disabled: option && option.disabled\n      };\n    }\n  }))));\n}\nvar ForwardRefSelect = React.forwardRef(Select);\nvar SelectComponent = ForwardRefSelect;\nSelectComponent.displayName = \"Select\";\nSelectComponent.Option = Option$1;\nSelectComponent.OptGroup = OptGroup$1;\nvar Select$1 = SelectComponent;\nvar AvatarContext = react.exports.createContext({});\nvar __assign$u = globalThis && globalThis.__assign || function() {\n  __assign$u = Object.assign || function(t2) {\n    for (var s, i = 1, n2 = arguments.length; i < n2; i++) {\n      s = arguments[i];\n      for (var p2 in s)\n        if (Object.prototype.hasOwnProperty.call(s, p2))\n          t2[p2] = s[p2];\n    }\n    return t2;\n  };\n  return __assign$u.apply(this, arguments);\n};\nvar __rest$d = globalThis && globalThis.__rest || function(s, e) {\n  var t2 = {};\n  for (var p2 in s)\n    if (Object.prototype.hasOwnProperty.call(s, p2) && e.indexOf(p2) < 0)\n      t2[p2] = s[p2];\n  if (s != null && typeof Object.getOwnPropertySymbols === \"function\")\n    for (var i = 0, p2 = Object.getOwnPropertySymbols(s); i < p2.length; i++) {\n      if (e.indexOf(p2[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p2[i]))\n        t2[p2[i]] = s[p2[i]];\n    }\n  return t2;\n};\nvar defaultProps$c = {\n  shape: \"circle\",\n  autoFixFontSize: true,\n  triggerType: \"button\"\n};\nvar Avatar$1 = react.exports.forwardRef(function(props, ref) {\n  var _a;\n  var _b = react.exports.useContext(ConfigContext), getPrefixCls = _b.getPrefixCls, componentConfig2 = _b.componentConfig;\n  var prefixCls2 = getPrefixCls(\"avatar\");\n  var contextProps = react.exports.useContext(AvatarContext);\n  var mergedProps = __assign$u(__assign$u(__assign$u(__assign$u({}, defaultProps$c), componentConfig2 === null || componentConfig2 === void 0 ? void 0 : componentConfig2.Avatar), contextProps), props);\n  var className = mergedProps.className, shape = mergedProps.shape, size = mergedProps.size, children = mergedProps.children, autoFixFontSize = mergedProps.autoFixFontSize, triggerIcon = mergedProps.triggerIcon, triggerIconStyle = mergedProps.triggerIconStyle, triggerType = mergedProps.triggerType, onClick = mergedProps.onClick, rest = __rest$d(mergedProps, [\"className\", \"shape\", \"size\", \"children\", \"autoFixFontSize\", \"triggerIcon\", \"triggerIconStyle\", \"triggerType\", \"onClick\"]);\n  var style = __assign$u(__assign$u({}, contextProps.style), props.style);\n  var textRef = react.exports.useRef(null);\n  var avatarRef = react.exports.useRef(null);\n  react.exports.useEffect(function() {\n    if (autoFixFontSize) {\n      autoFixFontSizeHandler();\n    }\n  }, [size, children]);\n  react.exports.useImperativeHandle(ref, function() {\n    return avatarRef.current;\n  });\n  function autoFixFontSizeHandler() {\n    if (textRef.current) {\n      var textWidth = textRef.current.clientWidth;\n      var size_1 = props.size || avatarRef.current.offsetWidth;\n      var scale = size_1 / (textWidth + 8);\n      if (size_1 && scale < 1) {\n        textRef.current.style.transform = \"scale(\" + scale + \") translateX(-50%)\";\n      }\n    }\n  }\n  var classNames = cs$1(prefixCls2, prefixCls2 + \"-\" + shape, (_a = {}, _a[prefixCls2 + \"-with-trigger-icon\"] = triggerIcon, _a), className);\n  var isImage = children && React.isValidElement(children) && (children.type === \"img\" || children.type === \"picture\");\n  var _triggerIconStyle = triggerIconStyle || {};\n  if (triggerType === \"button\" && (!triggerIconStyle || triggerIconStyle && !triggerIconStyle.color) && style && style.backgroundColor) {\n    _triggerIconStyle.color = style.backgroundColor;\n  }\n  return React.createElement(\"div\", __assign$u({ ref: avatarRef, onClick }, rest, { style: __assign$u({ width: size, height: size, fontSize: isNumber$1(size) ? size / 2 : \"\" }, style), className: classNames }), isImage ? React.createElement(\"span\", { className: prefixCls2 + \"-image\" }, children) : null, !isImage && React.createElement(\"span\", { ref: textRef, className: prefixCls2 + \"-text\" }, children), triggerIcon && React.createElement(\"div\", { className: prefixCls2 + \"-trigger-icon-\" + triggerType, style: _triggerIconStyle }, triggerIcon));\n});\nAvatar$1.displayName = \"Avatar\";\nvar Avatar$2 = Avatar$1;\nvar __assign$t = globalThis && globalThis.__assign || function() {\n  __assign$t = Object.assign || function(t2) {\n    for (var s, i = 1, n2 = arguments.length; i < n2; i++) {\n      s = arguments[i];\n      for (var p2 in s)\n        if (Object.prototype.hasOwnProperty.call(s, p2))\n          t2[p2] = s[p2];\n    }\n    return t2;\n  };\n  return __assign$t.apply(this, arguments);\n};\nvar __rest$c = globalThis && globalThis.__rest || function(s, e) {\n  var t2 = {};\n  for (var p2 in s)\n    if (Object.prototype.hasOwnProperty.call(s, p2) && e.indexOf(p2) < 0)\n      t2[p2] = s[p2];\n  if (s != null && typeof Object.getOwnPropertySymbols === \"function\")\n    for (var i = 0, p2 = Object.getOwnPropertySymbols(s); i < p2.length; i++) {\n      if (e.indexOf(p2[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p2[i]))\n        t2[p2[i]] = s[p2[i]];\n    }\n  return t2;\n};\nvar defaultProps$b = {\n  position: \"top\",\n  trigger: \"hover\",\n  escToClose: false,\n  unmountOnExit: true,\n  blurToHide: true,\n  popupHoverStay: true\n};\nfunction Tooltip(baseProps, ref) {\n  var _a = react.exports.useContext(ConfigContext), getPrefixCls = _a.getPrefixCls, componentConfig2 = _a.componentConfig;\n  var props = useMergeProps(baseProps, defaultProps$b, componentConfig2 === null || componentConfig2 === void 0 ? void 0 : componentConfig2.Tooltip);\n  var style = props.style, className = props.className, children = props.children, trigger = props.trigger, escToClose = props.escToClose, defaultPopupVisible = props.defaultPopupVisible, position = props.position, unmountOnExit = props.unmountOnExit, popupVisible = props.popupVisible, tooltipPrefixCls = props.prefixCls, blurToHide = props.blurToHide, popupHoverStay = props.popupHoverStay, disabled = props.disabled, onVisibleChange = props.onVisibleChange, triggerProps = props.triggerProps, childrenPrefix = props.childrenPrefix, getPopupContainer = props.getPopupContainer, content = props.content, mini = props.mini, color = props.color, rest = __rest$c(props, [\"style\", \"className\", \"children\", \"trigger\", \"escToClose\", \"defaultPopupVisible\", \"position\", \"unmountOnExit\", \"popupVisible\", \"prefixCls\", \"blurToHide\", \"popupHoverStay\", \"disabled\", \"onVisibleChange\", \"triggerProps\", \"childrenPrefix\", \"getPopupContainer\", \"content\", \"mini\", \"color\"]);\n  var refTrigger = react.exports.useRef();\n  var updatePopupPosition = function(delay, callback) {\n    if (delay === void 0) {\n      delay = 0;\n    }\n    refTrigger.current && refTrigger.current.updatePopupPosition(delay, callback);\n  };\n  react.exports.useImperativeHandle(ref, function() {\n    return {\n      updatePopupPosition\n    };\n  }, []);\n  var prefixCls2 = tooltipPrefixCls || getPrefixCls(\"tooltip\");\n  var otherProps = __assign$t(__assign$t({}, pick(rest, EventsByTriggerNeed)), triggerProps);\n  var renderedContent = typeof content === \"function\" ? content() : content;\n  var isEmpty = function(content2) {\n    if (content2 === null || content2 === void 0) {\n      return true;\n    }\n    if (typeof content2 === \"string\" && content2.trim() === \"\") {\n      return true;\n    }\n    return false;\n  };\n  if (\"popupVisible\" in props) {\n    otherProps.popupVisible = popupVisible;\n  } else if (isEmpty(renderedContent)) {\n    otherProps.popupVisible = false;\n  }\n  if (otherProps.showArrow !== false || otherProps.arrowProps) {\n    otherProps.arrowProps = otherProps.arrowProps || {};\n    if (color) {\n      otherProps.arrowProps.style = __assign$t({ backgroundColor: color }, otherProps.arrowProps.style);\n    }\n  }\n  return React.createElement(Trigger$1, __assign$t({ style: __assign$t({ maxWidth: 350 }, style), className, ref: refTrigger, classNames: \"zoomInFadeOut\", duration: {\n    enter: 300,\n    exit: 100\n  }, popup: function() {\n    var _a2;\n    return React.createElement(\"div\", { style: { backgroundColor: color }, className: cs$1(prefixCls2 + \"-content\", prefixCls2 + \"-content-\" + position, (_a2 = {}, _a2[prefixCls2 + \"-mini\"] = mini, _a2)) }, React.createElement(\"div\", { className: prefixCls2 + \"-content-inner\" }, renderedContent));\n  }, position, disabled, trigger, escToClose, showArrow: true, popupAlign: {\n    left: 12,\n    right: 12,\n    top: 12,\n    bottom: 12\n  }, mouseEnterDelay: 200, mouseLeaveDelay: 200, unmountOnExit, popupHoverStay, blurToHide, childrenPrefix: childrenPrefix || prefixCls2, getPopupContainer, onVisibleChange, defaultPopupVisible }, otherProps), children);\n}\nvar TooltipComponent = react.exports.forwardRef(Tooltip);\nTooltipComponent.displayName = \"Tooltip\";\nvar Tooltip$1 = TooltipComponent;\nvar __assign$s = globalThis && globalThis.__assign || function() {\n  __assign$s = Object.assign || function(t2) {\n    for (var s, i = 1, n2 = arguments.length; i < n2; i++) {\n      s = arguments[i];\n      for (var p2 in s)\n        if (Object.prototype.hasOwnProperty.call(s, p2))\n          t2[p2] = s[p2];\n    }\n    return t2;\n  };\n  return __assign$s.apply(this, arguments);\n};\nvar __rest$b = globalThis && globalThis.__rest || function(s, e) {\n  var t2 = {};\n  for (var p2 in s)\n    if (Object.prototype.hasOwnProperty.call(s, p2) && e.indexOf(p2) < 0)\n      t2[p2] = s[p2];\n  if (s != null && typeof Object.getOwnPropertySymbols === \"function\")\n    for (var i = 0, p2 = Object.getOwnPropertySymbols(s); i < p2.length; i++) {\n      if (e.indexOf(p2[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p2[i]))\n        t2[p2[i]] = s[p2[i]];\n    }\n  return t2;\n};\nvar defaultProps$a = {\n  position: \"top\",\n  trigger: \"hover\",\n  unmountOnExit: true\n};\nfunction Popover(baseProps, ref) {\n  var _a = react.exports.useContext(ConfigContext), getPrefixCls = _a.getPrefixCls, componentConfig2 = _a.componentConfig;\n  var props = useMergeProps(baseProps, defaultProps$a, componentConfig2 === null || componentConfig2 === void 0 ? void 0 : componentConfig2.Popover);\n  var style = props.style, className = props.className, children = props.children, position = props.position, getPopupContainer = props.getPopupContainer, trigger = props.trigger, defaultPopupVisible = props.defaultPopupVisible, popupVisible = props.popupVisible, triggerProps = props.triggerProps, unmountOnExit = props.unmountOnExit, onVisibleChange = props.onVisibleChange, content = props.content, title = props.title, rest = __rest$b(props, [\"style\", \"className\", \"children\", \"position\", \"getPopupContainer\", \"trigger\", \"defaultPopupVisible\", \"popupVisible\", \"triggerProps\", \"unmountOnExit\", \"onVisibleChange\", \"content\", \"title\"]);\n  var prefixCls2 = getPrefixCls(\"popover\");\n  return React.createElement(Tooltip$1, __assign$s({}, rest, { ref, style: __assign$s({ maxWidth: 350 }, style), className, prefixCls: prefixCls2, getPopupContainer, position, trigger, content: React.createElement(\"div\", { className: prefixCls2 + \"-inner\" }, title ? React.createElement(\"div\", { className: prefixCls2 + \"-title\" }, title) : null, React.createElement(\"div\", { className: prefixCls2 + \"-inner-content\" }, content)), popupHoverStay: true, unmountOnExit, triggerProps, defaultPopupVisible, onVisibleChange: onVisibleChange || (triggerProps ? triggerProps.onVisibleChange : void 0), childrenPrefix: prefixCls2 }, \"popupVisible\" in props ? { popupVisible } : {}), typeof children === \"string\" ? React.createElement(\"span\", null, children) : children);\n}\nvar PopoverComponent = react.exports.forwardRef(Popover);\nPopoverComponent.displayName = \"Popover\";\nvar Popover$1 = PopoverComponent;\nvar __assign$r = globalThis && globalThis.__assign || function() {\n  __assign$r = Object.assign || function(t2) {\n    for (var s, i = 1, n2 = arguments.length; i < n2; i++) {\n      s = arguments[i];\n      for (var p2 in s)\n        if (Object.prototype.hasOwnProperty.call(s, p2))\n          t2[p2] = s[p2];\n    }\n    return t2;\n  };\n  return __assign$r.apply(this, arguments);\n};\nvar __rest$a = globalThis && globalThis.__rest || function(s, e) {\n  var t2 = {};\n  for (var p2 in s)\n    if (Object.prototype.hasOwnProperty.call(s, p2) && e.indexOf(p2) < 0)\n      t2[p2] = s[p2];\n  if (s != null && typeof Object.getOwnPropertySymbols === \"function\")\n    for (var i = 0, p2 = Object.getOwnPropertySymbols(s); i < p2.length; i++) {\n      if (e.indexOf(p2[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p2[i]))\n        t2[p2[i]] = s[p2[i]];\n    }\n  return t2;\n};\nvar defaultProps$9 = {\n  shape: \"circle\",\n  autoFixFontSize: true\n};\nfunction Group(baseProps, ref) {\n  var _a = react.exports.useContext(ConfigContext), getPrefixCls = _a.getPrefixCls, componentConfig2 = _a.componentConfig;\n  var props = useMergeProps(baseProps, defaultProps$9, componentConfig2 === null || componentConfig2 === void 0 ? void 0 : componentConfig2[\"Avatar.Group\"]);\n  var className = props.className, style = props.style, children = props.children, size = props.size, shape = props.shape, autoFixFontSize = props.autoFixFontSize, zIndexAscend = props.zIndexAscend, maxCount2 = props.maxCount, maxStyle = props.maxStyle, maxPopoverTriggerProps = props.maxPopoverTriggerProps, rest = __rest$a(props, [\"className\", \"style\", \"children\", \"size\", \"shape\", \"autoFixFontSize\", \"zIndexAscend\", \"maxCount\", \"maxStyle\", \"maxPopoverTriggerProps\"]);\n  var prefixCls2 = getPrefixCls(\"avatar-group\");\n  var classNames = cs$1(prefixCls2, className);\n  var childrenArr = React.Children.toArray(children);\n  var avatarCount = childrenArr.length;\n  var avatarsToRender = childrenArr;\n  if (isNumber$1(maxCount2) && maxCount2 >= 0 && avatarCount > maxCount2) {\n    var avatarsInPopover = childrenArr.slice(maxCount2);\n    avatarsToRender = childrenArr.slice(0, maxCount2);\n    avatarsToRender.push(React.createElement(Avatar$2, { key: \"_arco_avatar_group_popup\", style: maxStyle, className: prefixCls2 + \"-max-count-avatar\" }, React.createElement(Popover$1, { triggerProps: maxPopoverTriggerProps, content: React.createElement(AvatarContext.Provider, { value: { size, shape, autoFixFontSize } }, React.createElement(\"div\", { className: prefixCls2 + \"-popover\" }, avatarsInPopover)) }, \"+\", avatarsInPopover.length)));\n  }\n  return React.createElement(\"div\", __assign$r({ ref, style, className: classNames }, rest), avatarsToRender.map(function(item, index2) {\n    var stackedStyle = {\n      zIndex: zIndexAscend ? index2 + 1 : avatarCount - index2,\n      marginLeft: size ? index2 !== 0 ? -size / 4 : 0 : \"\"\n    };\n    return React.createElement(AvatarContext.Provider, { key: index2, value: { size, shape, autoFixFontSize, style: stackedStyle } }, item);\n  }));\n}\nvar AvatarGroupComponent = react.exports.forwardRef(Group);\nAvatarGroupComponent.displayName = \"AvatarGroup\";\nvar Group$1 = AvatarGroupComponent;\nvar AvatarComponent = Avatar$2;\nAvatarComponent.Group = Group$1;\nvar Avatar = AvatarComponent;\nvar __read$v = globalThis && globalThis.__read || function(o, n2) {\n  var m2 = typeof Symbol === \"function\" && o[Symbol.iterator];\n  if (!m2)\n    return o;\n  var i = m2.call(o), r2, ar = [], e;\n  try {\n    while ((n2 === void 0 || n2-- > 0) && !(r2 = i.next()).done)\n      ar.push(r2.value);\n  } catch (error) {\n    e = { error };\n  } finally {\n    try {\n      if (r2 && !r2.done && (m2 = i[\"return\"]))\n        m2.call(i);\n    } finally {\n      if (e)\n        throw e.error;\n    }\n  }\n  return ar;\n};\nfunction Count(_a) {\n  var _b;\n  var prefixCls2 = _a.prefixCls, maxCount2 = _a.maxCount, count = _a.count, className = _a.className, style = _a.style;\n  var _c = __read$v(react.exports.useState(false), 2), isEntered = _c[0], setIsEntered = _c[1];\n  var oldCount = usePrevious(count);\n  var isChanged = count !== oldCount;\n  return React.createElement(CSSTransition$3, { classNames: \"badge-zoom\", in: count > 0, timeout: 300, appear: true, mountOnEnter: true, unmountOnExit: true, onEntered: function() {\n    setIsEntered(true);\n  } }, React.createElement(\"span\", { className, style }, React.createElement(\"span\", { key: count, className: cs$1((_b = {}, _b[prefixCls2 + \"-number-text\"] = isEntered && isChanged, _b)) }, maxCount2 && count > maxCount2 ? maxCount2 + \"+\" : count)));\n}\nvar __assign$q = globalThis && globalThis.__assign || function() {\n  __assign$q = Object.assign || function(t2) {\n    for (var s, i = 1, n2 = arguments.length; i < n2; i++) {\n      s = arguments[i];\n      for (var p2 in s)\n        if (Object.prototype.hasOwnProperty.call(s, p2))\n          t2[p2] = s[p2];\n    }\n    return t2;\n  };\n  return __assign$q.apply(this, arguments);\n};\nvar __rest$9 = globalThis && globalThis.__rest || function(s, e) {\n  var t2 = {};\n  for (var p2 in s)\n    if (Object.prototype.hasOwnProperty.call(s, p2) && e.indexOf(p2) < 0)\n      t2[p2] = s[p2];\n  if (s != null && typeof Object.getOwnPropertySymbols === \"function\")\n    for (var i = 0, p2 = Object.getOwnPropertySymbols(s); i < p2.length; i++) {\n      if (e.indexOf(p2[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p2[i]))\n        t2[p2[i]] = s[p2[i]];\n    }\n  return t2;\n};\nvar __read$u = globalThis && globalThis.__read || function(o, n2) {\n  var m2 = typeof Symbol === \"function\" && o[Symbol.iterator];\n  if (!m2)\n    return o;\n  var i = m2.call(o), r2, ar = [], e;\n  try {\n    while ((n2 === void 0 || n2-- > 0) && !(r2 = i.next()).done)\n      ar.push(r2.value);\n  } catch (error) {\n    e = { error };\n  } finally {\n    try {\n      if (r2 && !r2.done && (m2 = i[\"return\"]))\n        m2.call(i);\n    } finally {\n      if (e)\n        throw e.error;\n    }\n  }\n  return ar;\n};\nvar InnerColors = [\n  \"red\",\n  \"orangered\",\n  \"orange\",\n  \"gold\",\n  \"lime\",\n  \"green\",\n  \"cyan\",\n  \"arcoblue\",\n  \"purple\",\n  \"pinkpurple\",\n  \"magenta\",\n  \"gray\"\n];\nvar defaultProps$8 = {\n  count: 0,\n  maxCount: 99\n};\nfunction Badge(baseProps, ref) {\n  var _a;\n  var _b = react.exports.useContext(ConfigContext), getPrefixCls = _b.getPrefixCls, componentConfig2 = _b.componentConfig;\n  var props = useMergeProps(baseProps, defaultProps$8, componentConfig2 === null || componentConfig2 === void 0 ? void 0 : componentConfig2.Badge);\n  var count = props.count, text = props.text, className = props.className, dotClassName = props.dotClassName, dot = props.dot, maxCount2 = props.maxCount, color = props.color, propsDotStyle = props.dotStyle, offset = props.offset, style = props.style, status = props.status, children = props.children, restProps = __rest$9(props, [\"count\", \"text\", \"className\", \"dotClassName\", \"dot\", \"maxCount\", \"color\", \"dotStyle\", \"offset\", \"style\", \"status\", \"children\"]);\n  var prefixCls2 = getPrefixCls(\"badge\");\n  var dotStyle = __assign$q({}, propsDotStyle || {});\n  var _c = __read$u(offset || [], 2), leftOffset = _c[0], topOffset = _c[1];\n  if (leftOffset) {\n    dotStyle.marginRight = -leftOffset;\n  }\n  if (topOffset) {\n    dotStyle.marginTop = topOffset;\n  }\n  var getDom = function() {\n    var _a2, _b2;\n    if (isObject$6(count)) {\n      return React.createElement(\"span\", { className: cs$1(prefixCls2 + \"-custom-dot\", dotClassName), style: dotStyle }, count);\n    }\n    var colorStyle = !color || InnerColors.indexOf(color) > -1 ? {} : { backgroundColor: color };\n    if (text && !color && !status) {\n      return React.createElement(\"span\", { className: cs$1(prefixCls2 + \"-text\", dotClassName), style: dotStyle }, text);\n    }\n    if (status || color && count <= 0) {\n      return React.createElement(\"span\", { className: prefixCls2 + \"-status-wrapper\" }, React.createElement(\"span\", { className: cs$1(prefixCls2 + \"-status-dot\", (_a2 = {}, _a2[prefixCls2 + \"-status-\" + status] = status, _a2[prefixCls2 + \"-color-\" + color] = color, _a2), dotClassName), style: __assign$q(__assign$q({}, colorStyle), dotStyle) }), text && React.createElement(\"span\", { className: prefixCls2 + \"-status-text\" }, text));\n    }\n    if ((dot || color) && count > 0) {\n      return React.createElement(CSSTransition$3, { classNames: \"badge-zoom\", in: dot || !!color, timeout: 200, appear: true, mountOnEnter: true, unmountOnExit: true }, React.createElement(\"span\", { className: cs$1(prefixCls2 + \"-dot\", (_b2 = {}, _b2[prefixCls2 + \"-color-\" + color] = color, _b2), dotClassName), style: __assign$q(__assign$q({}, colorStyle), dotStyle) }));\n    }\n    return React.createElement(Count, { prefixCls: prefixCls2, className: cs$1(prefixCls2 + \"-number\", dotClassName), style: __assign$q(__assign$q({}, colorStyle), dotStyle), maxCount: maxCount2, count });\n  };\n  return React.createElement(\"span\", __assign$q({ className: cs$1(prefixCls2, (_a = {}, _a[prefixCls2 + \"-status\"] = status, _a[prefixCls2 + \"-no-children\"] = !children, _a), className), ref, style }, restProps), children, getDom());\n}\nvar BadgeComponent = react.exports.forwardRef(Badge);\nBadgeComponent.displayName = \"Badge\";\nvar Badge$1 = BadgeComponent;\nfunction ownKeys$j(object, enumerableOnly) {\n  var keys = Object.keys(object);\n  if (Object.getOwnPropertySymbols) {\n    var symbols = Object.getOwnPropertySymbols(object);\n    if (enumerableOnly) {\n      symbols = symbols.filter(function(sym) {\n        return Object.getOwnPropertyDescriptor(object, sym).enumerable;\n      });\n    }\n    keys.push.apply(keys, symbols);\n  }\n  return keys;\n}\nfunction _objectSpread$j(target2) {\n  for (var i = 1; i < arguments.length; i++) {\n    var source2 = arguments[i] != null ? arguments[i] : {};\n    if (i % 2) {\n      ownKeys$j(Object(source2), true).forEach(function(key) {\n        _defineProperty(target2, key, source2[key]);\n      });\n    } else if (Object.getOwnPropertyDescriptors) {\n      Object.defineProperties(target2, Object.getOwnPropertyDescriptors(source2));\n    } else {\n      ownKeys$j(Object(source2)).forEach(function(key) {\n        Object.defineProperty(target2, key, Object.getOwnPropertyDescriptor(source2, key));\n      });\n    }\n  }\n  return target2;\n}\nfunction IconRightComponent(iconProps, ref) {\n  var _useContext = react.exports.useContext(IconContext), prefixCls2 = _useContext.prefixCls;\n  var spin = iconProps.spin, className = iconProps.className;\n  var props = _objectSpread$j(_objectSpread$j({\n    ref\n  }, iconProps), {}, {\n    className: \"\".concat(className ? className + \" \" : \"\").concat(prefixCls2, \"-icon \").concat(prefixCls2, \"-icon-right\")\n  });\n  if (spin) {\n    props.className = \"\".concat(props.className, \" \").concat(prefixCls2, \"-icon-loading\");\n  }\n  delete props.spin;\n  delete props.isIcon;\n  return /* @__PURE__ */ React.createElement(\"svg\", _extends({\n    fill: \"none\",\n    stroke: \"currentColor\",\n    strokeWidth: \"4\",\n    viewBox: \"0 0 48 48\",\n    width: \"1em\",\n    height: \"1em\"\n  }, props), /* @__PURE__ */ React.createElement(\"path\", {\n    d: \"m16 39.513 15.556-15.557L16 8.4\"\n  }));\n}\nvar IconRight = /* @__PURE__ */ React.forwardRef(IconRightComponent);\nIconRight.defaultProps = {\n  isIcon: true\n};\nIconRight.displayName = \"IconRight\";\nvar IconRight$1 = IconRight;\nvar __assign$p = globalThis && globalThis.__assign || function() {\n  __assign$p = Object.assign || function(t2) {\n    for (var s, i = 1, n2 = arguments.length; i < n2; i++) {\n      s = arguments[i];\n      for (var p2 in s)\n        if (Object.prototype.hasOwnProperty.call(s, p2))\n          t2[p2] = s[p2];\n    }\n    return t2;\n  };\n  return __assign$p.apply(this, arguments);\n};\nvar responsiveArray = [\"xxl\", \"xl\", \"lg\", \"md\", \"sm\", \"xs\"];\nvar responsiveMap = {\n  xs: \"(max-width: 575px)\",\n  sm: \"(min-width: 576px)\",\n  md: \"(min-width: 768px)\",\n  lg: \"(min-width: 992px)\",\n  xl: \"(min-width: 1200px)\",\n  xxl: \"(min-width: 1600px)\"\n};\nvar subscribers = [];\nvar subUid = -1;\nvar screens = {};\nvar responsiveObserve = {\n  matchHandlers: {},\n  dispatch: function(pointMap, breakpointChecked) {\n    screens = pointMap;\n    if (subscribers.length < 1) {\n      return false;\n    }\n    subscribers.forEach(function(item) {\n      item.func(screens, breakpointChecked);\n    });\n    return true;\n  },\n  subscribe: function(func) {\n    if (subscribers.length === 0) {\n      this.register();\n    }\n    var token = (++subUid).toString();\n    subscribers.push({\n      token,\n      func\n    });\n    func(screens, null);\n    return token;\n  },\n  unsubscribe: function(token) {\n    subscribers = subscribers.filter(function(item) {\n      return item.token !== token;\n    });\n    if (subscribers.length === 0) {\n      this.unregister();\n    }\n  },\n  unregister: function() {\n    var _this = this;\n    Object.keys(responsiveMap).forEach(function(screen) {\n      var matchMediaQuery = responsiveMap[screen];\n      var handler = _this.matchHandlers[matchMediaQuery];\n      if (handler && handler.mql && handler.listener) {\n        handler.mql.removeListener(handler.listener);\n      }\n    });\n  },\n  register: function() {\n    var _this = this;\n    Object.keys(responsiveMap).forEach(function(screen) {\n      var matchMediaQuery = responsiveMap[screen];\n      var listener = function(_a) {\n        var _b;\n        var matches = _a.matches;\n        _this.dispatch(__assign$p(__assign$p({}, screens), (_b = {}, _b[screen] = matches, _b)), screen);\n      };\n      var mql = window.matchMedia(matchMediaQuery);\n      mql.addListener(listener);\n      _this.matchHandlers[matchMediaQuery] = {\n        mql,\n        listener\n      };\n      listener(mql);\n    });\n  }\n};\nvar ResponsiveObserve = responsiveObserve;\nvar __read$t = globalThis && globalThis.__read || function(o, n2) {\n  var m2 = typeof Symbol === \"function\" && o[Symbol.iterator];\n  if (!m2)\n    return o;\n  var i = m2.call(o), r2, ar = [], e;\n  try {\n    while ((n2 === void 0 || n2-- > 0) && !(r2 = i.next()).done)\n      ar.push(r2.value);\n  } catch (error) {\n    e = { error };\n  } finally {\n    try {\n      if (r2 && !r2.done && (m2 = i[\"return\"]))\n        m2.call(i);\n    } finally {\n      if (e)\n        throw e.error;\n    }\n  }\n  return ar;\n};\nvar __spreadArray$7 = globalThis && globalThis.__spreadArray || function(to, from, pack) {\n  if (pack || arguments.length === 2)\n    for (var i = 0, l2 = from.length, ar; i < l2; i++) {\n      if (ar || !(i in from)) {\n        if (!ar)\n          ar = Array.prototype.slice.call(from, 0, i);\n        ar[i] = from[i];\n      }\n    }\n  return to.concat(ar || Array.prototype.slice.call(from));\n};\nfunction DotLoading(props) {\n  var getPrefixCls = react.exports.useContext(ConfigContext).getPrefixCls;\n  var prefixCls2 = getPrefixCls(\"spin\") + \"-dot\";\n  var dotStyle = {\n    width: props.size,\n    height: props.size\n  };\n  var sizeNumber = props.size ? parseInt(String(props.size)) : 0;\n  return React.createElement(\"div\", { className: prefixCls2 + \"-list\", style: {\n    height: props.size,\n    width: isNumber$1(sizeNumber) && sizeNumber > 0 ? sizeNumber * 7 : \"\"\n  } }, __spreadArray$7([], __read$t(new Array(5)), false).map(function(_, index2) {\n    return React.createElement(\"div\", { key: index2, className: prefixCls2, style: dotStyle });\n  }));\n}\nvar __read$s = globalThis && globalThis.__read || function(o, n2) {\n  var m2 = typeof Symbol === \"function\" && o[Symbol.iterator];\n  if (!m2)\n    return o;\n  var i = m2.call(o), r2, ar = [], e;\n  try {\n    while ((n2 === void 0 || n2-- > 0) && !(r2 = i.next()).done)\n      ar.push(r2.value);\n  } catch (error) {\n    e = { error };\n  } finally {\n    try {\n      if (r2 && !r2.done && (m2 = i[\"return\"]))\n        m2.call(i);\n    } finally {\n      if (e)\n        throw e.error;\n    }\n  }\n  return ar;\n};\nfunction Spin(baseProps, ref) {\n  var _a;\n  var _b = react.exports.useContext(ConfigContext), getPrefixCls = _b.getPrefixCls, componentConfig2 = _b.componentConfig;\n  var props = useMergeProps(baseProps, {}, componentConfig2 === null || componentConfig2 === void 0 ? void 0 : componentConfig2.Spin);\n  var style = props.style, className = props.className, children = props.children, propLoading = props.loading, size = props.size, icon2 = props.icon, element = props.element, tip = props.tip, dot = props.dot, delay = props.delay;\n  var _c = __read$s(react.exports.useState(delay ? false : propLoading), 2), loading = _c[0], setLoading = _c[1];\n  var debouncedSetLoading = react.exports.useCallback(debounce_1(setLoading, delay), [delay]);\n  var _usedLoading = delay ? loading : propLoading;\n  var prefixCls2 = getPrefixCls(\"spin\");\n  react.exports.useEffect(function() {\n    delay && debouncedSetLoading(propLoading);\n    return function() {\n      debouncedSetLoading && debouncedSetLoading.cancel();\n    };\n  }, [propLoading]);\n  var loadingIcon = React.createElement(\"span\", { className: prefixCls2 + \"-icon\" }, icon2 ? React.cloneElement(icon2, {\n    className: cs$1(prefixCls2.replace(\"-spin\", \"-icon\") + \"-loading\"),\n    style: {\n      fontSize: size\n    }\n  }) : element || (dot ? React.createElement(DotLoading, { size }) : React.createElement(IconLoading$1, { style: { fontSize: size } })));\n  return React.createElement(\"div\", { ref, className: cs$1(prefixCls2, (_a = {}, _a[prefixCls2 + \"-loading\"] = _usedLoading, _a[prefixCls2 + \"-with-tip\"] = tip && !children, _a), className), style }, children ? React.createElement(React.Fragment, null, React.createElement(\"div\", { className: prefixCls2 + \"-children\" }, children), _usedLoading && React.createElement(\"div\", { className: prefixCls2 + \"-loading-layer\", style: { fontSize: size } }, React.createElement(\"span\", { className: prefixCls2 + \"-loading-layer-inner\" }, loadingIcon, tip ? React.createElement(\"div\", { className: prefixCls2 + \"-tip\" }, tip) : null))) : React.createElement(React.Fragment, null, loadingIcon, tip ? React.createElement(\"div\", { className: prefixCls2 + \"-tip\" }, tip) : null));\n}\nvar SpinComponent = React.forwardRef(Spin);\nSpinComponent.displayName = \"Spin\";\nvar Spin$1 = SpinComponent;\nfunction ownKeys$i(object, enumerableOnly) {\n  var keys = Object.keys(object);\n  if (Object.getOwnPropertySymbols) {\n    var symbols = Object.getOwnPropertySymbols(object);\n    if (enumerableOnly) {\n      symbols = symbols.filter(function(sym) {\n        return Object.getOwnPropertyDescriptor(object, sym).enumerable;\n      });\n    }\n    keys.push.apply(keys, symbols);\n  }\n  return keys;\n}\nfunction _objectSpread$i(target2) {\n  for (var i = 1; i < arguments.length; i++) {\n    var source2 = arguments[i] != null ? arguments[i] : {};\n    if (i % 2) {\n      ownKeys$i(Object(source2), true).forEach(function(key) {\n        _defineProperty(target2, key, source2[key]);\n      });\n    } else if (Object.getOwnPropertyDescriptors) {\n      Object.defineProperties(target2, Object.getOwnPropertyDescriptors(source2));\n    } else {\n      ownKeys$i(Object(source2)).forEach(function(key) {\n        Object.defineProperty(target2, key, Object.getOwnPropertyDescriptor(source2, key));\n      });\n    }\n  }\n  return target2;\n}\nfunction IconCheckComponent(iconProps, ref) {\n  var _useContext = react.exports.useContext(IconContext), prefixCls2 = _useContext.prefixCls;\n  var spin = iconProps.spin, className = iconProps.className;\n  var props = _objectSpread$i(_objectSpread$i({\n    ref\n  }, iconProps), {}, {\n    className: \"\".concat(className ? className + \" \" : \"\").concat(prefixCls2, \"-icon \").concat(prefixCls2, \"-icon-check\")\n  });\n  if (spin) {\n    props.className = \"\".concat(props.className, \" \").concat(prefixCls2, \"-icon-loading\");\n  }\n  delete props.spin;\n  delete props.isIcon;\n  return /* @__PURE__ */ React.createElement(\"svg\", _extends({\n    fill: \"none\",\n    stroke: \"currentColor\",\n    strokeWidth: \"4\",\n    viewBox: \"0 0 48 48\",\n    width: \"1em\",\n    height: \"1em\"\n  }, props), /* @__PURE__ */ React.createElement(\"path\", {\n    d: \"M41.678 11.05 19.05 33.678 6.322 20.95\"\n  }));\n}\nvar IconCheck = /* @__PURE__ */ React.forwardRef(IconCheckComponent);\nIconCheck.defaultProps = {\n  isIcon: true\n};\nIconCheck.displayName = \"IconCheck\";\nvar IconCheck$1 = IconCheck;\nvar __read$r = globalThis && globalThis.__read || function(o, n2) {\n  var m2 = typeof Symbol === \"function\" && o[Symbol.iterator];\n  if (!m2)\n    return o;\n  var i = m2.call(o), r2, ar = [], e;\n  try {\n    while ((n2 === void 0 || n2-- > 0) && !(r2 = i.next()).done)\n      ar.push(r2.value);\n  } catch (error) {\n    e = { error };\n  } finally {\n    try {\n      if (r2 && !r2.done && (m2 = i[\"return\"]))\n        m2.call(i);\n    } finally {\n      if (e)\n        throw e.error;\n    }\n  }\n  return ar;\n};\nvar __spreadArray$6 = globalThis && globalThis.__spreadArray || function(to, from, pack) {\n  if (pack || arguments.length === 2)\n    for (var i = 0, l2 = from.length, ar; i < l2; i++) {\n      if (ar || !(i in from)) {\n        if (!ar)\n          ar = Array.prototype.slice.call(from, 0, i);\n        ar[i] = from[i];\n      }\n    }\n  return to.concat(ar || Array.prototype.slice.call(from));\n};\nfunction useUpdate(fn, deps) {\n  if (deps === void 0) {\n    deps = [];\n  }\n  var isDidMount = react.exports.useRef(false);\n  react.exports.useEffect(function() {\n    if (isDidMount.current) {\n      fn();\n    } else {\n      isDidMount.current = true;\n    }\n  }, __spreadArray$6([], __read$r(deps), false));\n}\nfunction ownKeys$h(object, enumerableOnly) {\n  var keys = Object.keys(object);\n  if (Object.getOwnPropertySymbols) {\n    var symbols = Object.getOwnPropertySymbols(object);\n    if (enumerableOnly) {\n      symbols = symbols.filter(function(sym) {\n        return Object.getOwnPropertyDescriptor(object, sym).enumerable;\n      });\n    }\n    keys.push.apply(keys, symbols);\n  }\n  return keys;\n}\nfunction _objectSpread$h(target2) {\n  for (var i = 1; i < arguments.length; i++) {\n    var source2 = arguments[i] != null ? arguments[i] : {};\n    if (i % 2) {\n      ownKeys$h(Object(source2), true).forEach(function(key) {\n        _defineProperty(target2, key, source2[key]);\n      });\n    } else if (Object.getOwnPropertyDescriptors) {\n      Object.defineProperties(target2, Object.getOwnPropertyDescriptors(source2));\n    } else {\n      ownKeys$h(Object(source2)).forEach(function(key) {\n        Object.defineProperty(target2, key, Object.getOwnPropertyDescriptor(source2, key));\n      });\n    }\n  }\n  return target2;\n}\nfunction IconLinkComponent(iconProps, ref) {\n  var _useContext = react.exports.useContext(IconContext), prefixCls2 = _useContext.prefixCls;\n  var spin = iconProps.spin, className = iconProps.className;\n  var props = _objectSpread$h(_objectSpread$h({\n    ref\n  }, iconProps), {}, {\n    className: \"\".concat(className ? className + \" \" : \"\").concat(prefixCls2, \"-icon \").concat(prefixCls2, \"-icon-link\")\n  });\n  if (spin) {\n    props.className = \"\".concat(props.className, \" \").concat(prefixCls2, \"-icon-loading\");\n  }\n  delete props.spin;\n  delete props.isIcon;\n  return /* @__PURE__ */ React.createElement(\"svg\", _extends({\n    fill: \"none\",\n    stroke: \"currentColor\",\n    strokeWidth: \"4\",\n    viewBox: \"0 0 48 48\",\n    width: \"1em\",\n    height: \"1em\"\n  }, props), /* @__PURE__ */ React.createElement(\"path\", {\n    d: \"m14.1 25.414-4.95 4.95a6 6 0 0 0 8.486 8.485l8.485-8.485a6 6 0 0 0 0-8.485m7.779.707 4.95-4.95a6 6 0 1 0-8.486-8.485l-8.485 8.485a6 6 0 0 0 0 8.485\"\n  }));\n}\nvar IconLink = /* @__PURE__ */ React.forwardRef(IconLinkComponent);\nIconLink.defaultProps = {\n  isIcon: true\n};\nIconLink.displayName = \"IconLink\";\nvar IconLink$1 = IconLink;\nvar __assign$o = globalThis && globalThis.__assign || function() {\n  __assign$o = Object.assign || function(t2) {\n    for (var s, i = 1, n2 = arguments.length; i < n2; i++) {\n      s = arguments[i];\n      for (var p2 in s)\n        if (Object.prototype.hasOwnProperty.call(s, p2))\n          t2[p2] = s[p2];\n    }\n    return t2;\n  };\n  return __assign$o.apply(this, arguments);\n};\nvar __rest$8 = globalThis && globalThis.__rest || function(s, e) {\n  var t2 = {};\n  for (var p2 in s)\n    if (Object.prototype.hasOwnProperty.call(s, p2) && e.indexOf(p2) < 0)\n      t2[p2] = s[p2];\n  if (s != null && typeof Object.getOwnPropertySymbols === \"function\")\n    for (var i = 0, p2 = Object.getOwnPropertySymbols(s); i < p2.length; i++) {\n      if (e.indexOf(p2[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p2[i]))\n        t2[p2[i]] = s[p2[i]];\n    }\n  return t2;\n};\nvar defaultProps$7 = {\n  hoverable: true\n};\nfunction Link(baseProps, ref) {\n  var _a;\n  var _b = react.exports.useContext(ConfigContext), getPrefixCls = _b.getPrefixCls, componentConfig2 = _b.componentConfig;\n  var props = useMergeProps(baseProps, defaultProps$7, componentConfig2 === null || componentConfig2 === void 0 ? void 0 : componentConfig2.Link);\n  var className = props.className, style = props.style, children = props.children, icon2 = props.icon, status = props.status, disabled = props.disabled, hoverable = props.hoverable, rest = __rest$8(props, [\"className\", \"style\", \"children\", \"icon\", \"status\", \"disabled\", \"hoverable\"]);\n  var prefixCls2 = getPrefixCls(\"link\");\n  var TagWrapper = \"href\" in props ? \"a\" : \"span\";\n  return React.createElement(TagWrapper, __assign$o({ className: cs$1(prefixCls2, (_a = {}, _a[prefixCls2 + \"-disabled\"] = disabled, _a[prefixCls2 + \"-is-\" + status] = status, _a[prefixCls2 + \"-with-icon\"] = icon2, _a[prefixCls2 + \"-hoverless\"] = !hoverable, _a), className), ref }, rest, { style, onClick: function(e) {\n    if (disabled) {\n      e.preventDefault();\n      e.stopPropagation();\n    } else {\n      props.onClick && props.onClick(e);\n    }\n  } }), icon2 ? React.createElement(\"span\", { className: prefixCls2 + \"-icon\" }, icon2 === true ? React.createElement(IconLink$1, null) : icon2) : null, children);\n}\nvar LinkRef = react.exports.forwardRef(Link);\nLinkRef.displayName = \"Link\";\nvar Link$1 = LinkRef;\nvar __assign$n = globalThis && globalThis.__assign || function() {\n  __assign$n = Object.assign || function(t2) {\n    for (var s, i = 1, n2 = arguments.length; i < n2; i++) {\n      s = arguments[i];\n      for (var p2 in s)\n        if (Object.prototype.hasOwnProperty.call(s, p2))\n          t2[p2] = s[p2];\n    }\n    return t2;\n  };\n  return __assign$n.apply(this, arguments);\n};\nvar __read$q = globalThis && globalThis.__read || function(o, n2) {\n  var m2 = typeof Symbol === \"function\" && o[Symbol.iterator];\n  if (!m2)\n    return o;\n  var i = m2.call(o), r2, ar = [], e;\n  try {\n    while ((n2 === void 0 || n2-- > 0) && !(r2 = i.next()).done)\n      ar.push(r2.value);\n  } catch (error) {\n    e = { error };\n  } finally {\n    try {\n      if (r2 && !r2.done && (m2 = i[\"return\"]))\n        m2.call(i);\n    } finally {\n      if (e)\n        throw e.error;\n    }\n  }\n  return ar;\n};\nvar getLength = function(arr) {\n  return isArray$5(arr) ? arr.reduce(function(p2, n2) {\n    return p2 + (n2.span || 1);\n  }, 0) : 0;\n};\nvar defaultProps$6 = {\n  layout: \"horizontal\",\n  column: 3,\n  tableLayout: \"auto\"\n};\nfunction Descriptions(baseProps) {\n  var _a;\n  var _b = react.exports.useContext(ConfigContext), getPrefixCls = _b.getPrefixCls, componentConfig2 = _b.componentConfig;\n  var props = useMergeProps(baseProps, defaultProps$6, componentConfig2 === null || componentConfig2 === void 0 ? void 0 : componentConfig2.Descriptions);\n  var style = props.style, className = props.className, column = props.column, title = props.title, data2 = props.data, border = props.border, labelStyle = props.labelStyle, valueStyle = props.valueStyle, colon = props.colon, layout = props.layout, size = props.size, tableLayout = props.tableLayout;\n  var prefixCls2 = getPrefixCls(\"descriptions\");\n  var _c = __read$q(react.exports.useState(), 2), screen = _c[0], setScreen = _c[1];\n  var responsiveToken = react.exports.useRef(null);\n  react.exports.useEffect(function() {\n    responsiveToken.current = ResponsiveObserve.subscribe(function(screens2) {\n      for (var i = 0; i < responsiveArray.length; i++) {\n        var breakpoint = responsiveArray[i];\n        if (screens2[breakpoint]) {\n          setScreen(breakpoint);\n          break;\n        }\n      }\n    });\n    return function() {\n      ResponsiveObserve.unsubscribe(responsiveToken.current);\n    };\n  }, []);\n  var currentColumn = 3;\n  if (isObject$6(column)) {\n    currentColumn = column[screen] || 3;\n  }\n  if (isNumber$1(column) && column > 0) {\n    currentColumn = column;\n  }\n  var renderData = [];\n  if (isArray$5(data2) && data2.length > 0 && currentColumn) {\n    data2.forEach(function(d) {\n      var lastOne2 = renderData[renderData.length - 1];\n      var length = getLength(lastOne2);\n      if (length === 0) {\n        renderData.push([\n          __assign$n(__assign$n({}, d), { span: d.span ? d.span > currentColumn ? currentColumn : d.span : 1 })\n        ]);\n      } else if (length === currentColumn) {\n        renderData.push([\n          __assign$n(__assign$n({}, d), { span: d.span ? d.span > currentColumn ? currentColumn : d.span : 1 })\n        ]);\n      } else {\n        lastOne2.push(__assign$n(__assign$n({}, d), { span: d.span ? d.span + length > currentColumn ? currentColumn - length : d.span : 1 }));\n      }\n    });\n    var lastOne = renderData[renderData.length - 1];\n    var lastLength = getLength(lastOne);\n    if (lastLength < currentColumn) {\n      lastOne[lastOne.length - 1].span = lastOne[lastOne.length - 1].span + currentColumn - lastLength;\n    }\n  }\n  function renderVerticalItems(d, i) {\n    return React.createElement(react.exports.Fragment, { key: i }, React.createElement(\"tr\", { className: prefixCls2 + \"-row\" }, d.map(function(_d, _i) {\n      var colSpanProps = _d.span > 1 ? { colSpan: _d.span } : {};\n      return React.createElement(\"td\", __assign$n({ key: (_d.key || _i) + \"_label\", className: prefixCls2 + \"-item-label\" }, colSpanProps, { style: labelStyle }), _d.label, colon);\n    })), React.createElement(\"tr\", { className: prefixCls2 + \"-row\" }, d.map(function(_d, _i) {\n      var colSpanProps = _d.span > 1 ? { colSpan: _d.span } : {};\n      return React.createElement(\"td\", __assign$n({ key: (_d.key || _i) + \"_value\", className: prefixCls2 + \"-item-value\" }, colSpanProps, { style: valueStyle }), _d.value);\n    })));\n  }\n  function renderHorizontalItems(d, i) {\n    return React.createElement(\"tr\", { key: i, className: prefixCls2 + \"-row\" }, d.map(function(_d, _i) {\n      var colSpanProps = _d.span > 1 ? { colSpan: _d.span * 2 - 1 } : {};\n      return React.createElement(react.exports.Fragment, { key: _d.key || _i }, React.createElement(\"td\", { className: prefixCls2 + \"-item-label\", style: labelStyle }, _d.label, colon), React.createElement(\"td\", __assign$n({ className: prefixCls2 + \"-item-value\" }, colSpanProps, { style: valueStyle }), _d.value));\n    }));\n  }\n  function renderInlineItems(d, i) {\n    return React.createElement(\"tr\", { key: i, className: prefixCls2 + \"-row\" }, d.map(function(_d, _i) {\n      var colSpanProps = _d.span > 1 ? { colSpan: _d.span } : {};\n      return React.createElement(\"td\", __assign$n({ key: _d.key || _i }, colSpanProps, { className: prefixCls2 + \"-item\" }), React.createElement(\"div\", { className: prefixCls2 + \"-item-label-inline\", style: labelStyle }, _d.label, colon), React.createElement(\"div\", { className: prefixCls2 + \"-item-value-inline\", style: valueStyle }, _d.value));\n    }));\n  }\n  function renderItems(d, i) {\n    if (layout === \"inline-vertical\" || layout === \"inline-horizontal\") {\n      return renderInlineItems(d, i);\n    }\n    return layout === \"vertical\" ? renderVerticalItems(d, i) : renderHorizontalItems(d, i);\n  }\n  var classNames = cs$1(prefixCls2, (_a = {}, _a[prefixCls2 + \"-border\"] = border, _a[prefixCls2 + \"-layout-\" + layout] = layout, _a[prefixCls2 + \"-size-\" + size] = size, _a[prefixCls2 + \"-table-layout-fixed\"] = tableLayout === \"fixed\", _a), className);\n  return React.createElement(\"div\", { className: classNames, style }, title && React.createElement(\"div\", { className: prefixCls2 + \"-title\" }, title), React.createElement(\"div\", { className: prefixCls2 + \"-body\" }, React.createElement(\"table\", { className: prefixCls2 + \"-table\", cellPadding: 0, cellSpacing: 0 }, React.createElement(\"tbody\", null, renderData.map(function(d, i) {\n    return renderItems(d, i);\n  })))));\n}\nDescriptions.displayName = \"Descriptions\";\nvar FOCUS_GROUP = \"data-focus-lock\";\nvar FOCUS_DISABLED = \"data-focus-lock-disabled\";\nvar FOCUS_ALLOW = \"data-no-focus-lock\";\nvar FOCUS_AUTO = \"data-autofocus-inside\";\nfunction assignRef(ref, value) {\n  if (typeof ref === \"function\") {\n    ref(value);\n  } else if (ref) {\n    ref.current = value;\n  }\n  return ref;\n}\nfunction useCallbackRef(initialValue, callback) {\n  var ref = react.exports.useState(function() {\n    return {\n      value: initialValue,\n      callback,\n      facade: {\n        get current() {\n          return ref.value;\n        },\n        set current(value) {\n          var last = ref.value;\n          if (last !== value) {\n            ref.value = value;\n            ref.callback(value, last);\n          }\n        }\n      }\n    };\n  })[0];\n  ref.callback = callback;\n  return ref.facade;\n}\nfunction useMergeRefs(refs, defaultValue) {\n  return useCallbackRef(defaultValue, function(newValue) {\n    return refs.forEach(function(ref) {\n      return assignRef(ref, newValue);\n    });\n  });\n}\nvar hiddenGuard = {\n  width: \"1px\",\n  height: \"0px\",\n  padding: 0,\n  overflow: \"hidden\",\n  position: \"fixed\",\n  top: \"1px\",\n  left: \"1px\"\n};\n/*! *****************************************************************************\nCopyright (c) Microsoft Corporation.\n\nPermission to use, copy, modify, and/or distribute this software for any\npurpose with or without fee is hereby granted.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH\nREGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY\nAND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,\nINDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM\nLOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR\nOTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR\nPERFORMANCE OF THIS SOFTWARE.\n***************************************************************************** */\nvar __assign$m = function() {\n  __assign$m = Object.assign || function __assign2(t2) {\n    for (var s, i = 1, n2 = arguments.length; i < n2; i++) {\n      s = arguments[i];\n      for (var p2 in s)\n        if (Object.prototype.hasOwnProperty.call(s, p2))\n          t2[p2] = s[p2];\n    }\n    return t2;\n  };\n  return __assign$m.apply(this, arguments);\n};\nfunction ItoI(a) {\n  return a;\n}\nfunction innerCreateMedium(defaults2, middleware) {\n  if (middleware === void 0) {\n    middleware = ItoI;\n  }\n  var buffer = [];\n  var assigned = false;\n  var medium = {\n    read: function() {\n      if (assigned) {\n        throw new Error(\"Sidecar: could not `read` from an `assigned` medium. `read` could be used only with `useMedium`.\");\n      }\n      if (buffer.length) {\n        return buffer[buffer.length - 1];\n      }\n      return defaults2;\n    },\n    useMedium: function(data2) {\n      var item = middleware(data2, assigned);\n      buffer.push(item);\n      return function() {\n        buffer = buffer.filter(function(x2) {\n          return x2 !== item;\n        });\n      };\n    },\n    assignSyncMedium: function(cb2) {\n      assigned = true;\n      while (buffer.length) {\n        var cbs = buffer;\n        buffer = [];\n        cbs.forEach(cb2);\n      }\n      buffer = {\n        push: function(x2) {\n          return cb2(x2);\n        },\n        filter: function() {\n          return buffer;\n        }\n      };\n    },\n    assignMedium: function(cb2) {\n      assigned = true;\n      var pendingQueue = [];\n      if (buffer.length) {\n        var cbs = buffer;\n        buffer = [];\n        cbs.forEach(cb2);\n        pendingQueue = buffer;\n      }\n      var executeQueue = function() {\n        var cbs2 = pendingQueue;\n        pendingQueue = [];\n        cbs2.forEach(cb2);\n      };\n      var cycle = function() {\n        return Promise.resolve().then(executeQueue);\n      };\n      cycle();\n      buffer = {\n        push: function(x2) {\n          pendingQueue.push(x2);\n          cycle();\n        },\n        filter: function(filter) {\n          pendingQueue = pendingQueue.filter(filter);\n          return buffer;\n        }\n      };\n    }\n  };\n  return medium;\n}\nfunction createMedium(defaults2, middleware) {\n  if (middleware === void 0) {\n    middleware = ItoI;\n  }\n  return innerCreateMedium(defaults2, middleware);\n}\nfunction createSidecarMedium(options) {\n  if (options === void 0) {\n    options = {};\n  }\n  var medium = innerCreateMedium(null);\n  medium.options = __assign$m({ async: true, ssr: false }, options);\n  return medium;\n}\nvar mediumFocus = createMedium({}, function(_ref2) {\n  var target2 = _ref2.target, currentTarget = _ref2.currentTarget;\n  return {\n    target: target2,\n    currentTarget\n  };\n});\nvar mediumBlur = createMedium();\nvar mediumEffect = createMedium();\nvar mediumSidecar = createSidecarMedium({\n  async: true\n});\nvar emptyArray = [];\nvar FocusLock$1 = /* @__PURE__ */ react.exports.forwardRef(function FocusLockUI(props, parentRef) {\n  var _extends2;\n  var _React$useState = react.exports.useState(), realObserved = _React$useState[0], setObserved = _React$useState[1];\n  var observed = react.exports.useRef();\n  var isActive = react.exports.useRef(false);\n  var originalFocusedElement = react.exports.useRef(null);\n  var children = props.children, disabled = props.disabled, noFocusGuards = props.noFocusGuards, persistentFocus = props.persistentFocus, crossFrame = props.crossFrame, autoFocus = props.autoFocus;\n  props.allowTextSelection;\n  var group = props.group, className = props.className, whiteList = props.whiteList, _props$shards = props.shards, shards = _props$shards === void 0 ? emptyArray : _props$shards, _props$as = props.as, Container = _props$as === void 0 ? \"div\" : _props$as, _props$lockProps = props.lockProps, containerProps = _props$lockProps === void 0 ? {} : _props$lockProps, SideCar = props.sideCar, shouldReturnFocus = props.returnFocus, onActivationCallback = props.onActivation, onDeactivationCallback = props.onDeactivation;\n  var _React$useState2 = react.exports.useState({}), id2 = _React$useState2[0];\n  var onActivation = react.exports.useCallback(function() {\n    originalFocusedElement.current = originalFocusedElement.current || document && document.activeElement;\n    if (observed.current && onActivationCallback) {\n      onActivationCallback(observed.current);\n    }\n    isActive.current = true;\n  }, [onActivationCallback]);\n  var onDeactivation = react.exports.useCallback(function() {\n    isActive.current = false;\n    if (onDeactivationCallback) {\n      onDeactivationCallback(observed.current);\n    }\n  }, [onDeactivationCallback]);\n  var returnFocus = react.exports.useCallback(function(allowDefer) {\n    var current = originalFocusedElement.current;\n    if (Boolean(shouldReturnFocus) && current && current.focus) {\n      var focusOptions = typeof shouldReturnFocus === \"object\" ? shouldReturnFocus : void 0;\n      originalFocusedElement.current = null;\n      if (allowDefer) {\n        Promise.resolve().then(function() {\n          return current.focus(focusOptions);\n        });\n      } else {\n        current.focus(focusOptions);\n      }\n    }\n  }, [shouldReturnFocus]);\n  var onFocus3 = react.exports.useCallback(function(event) {\n    if (isActive.current) {\n      mediumFocus.useMedium(event);\n    }\n  }, []);\n  var onBlur3 = mediumBlur.useMedium;\n  var setObserveNode = react.exports.useCallback(function(newObserved) {\n    if (observed.current !== newObserved) {\n      observed.current = newObserved;\n      setObserved(newObserved);\n    }\n  }, []);\n  var lockProps = _extends((_extends2 = {}, _extends2[FOCUS_DISABLED] = disabled && \"disabled\", _extends2[FOCUS_GROUP] = group, _extends2), containerProps);\n  var hasLeadingGuards = noFocusGuards !== true;\n  var hasTailingGuards = hasLeadingGuards && noFocusGuards !== \"tail\";\n  var mergedRef = useMergeRefs([parentRef, setObserveNode]);\n  return /* @__PURE__ */ react.exports.createElement(react.exports.Fragment, null, hasLeadingGuards && [\n    /* @__PURE__ */ react.exports.createElement(\"div\", {\n      key: \"guard-first\",\n      \"data-focus-guard\": true,\n      tabIndex: disabled ? -1 : 0,\n      style: hiddenGuard\n    }),\n    /* @__PURE__ */ react.exports.createElement(\"div\", {\n      key: \"guard-nearest\",\n      \"data-focus-guard\": true,\n      tabIndex: disabled ? -1 : 1,\n      style: hiddenGuard\n    })\n  ], !disabled && /* @__PURE__ */ react.exports.createElement(SideCar, {\n    id: id2,\n    sideCar: mediumSidecar,\n    observed: realObserved,\n    disabled,\n    persistentFocus,\n    crossFrame,\n    autoFocus,\n    whiteList,\n    shards,\n    onActivation,\n    onDeactivation,\n    returnFocus\n  }), /* @__PURE__ */ react.exports.createElement(Container, _extends({\n    ref: mergedRef\n  }, lockProps, {\n    className,\n    onBlur: onBlur3,\n    onFocus: onFocus3\n  }), children), hasTailingGuards && /* @__PURE__ */ react.exports.createElement(\"div\", {\n    \"data-focus-guard\": true,\n    tabIndex: disabled ? -1 : 0,\n    style: hiddenGuard\n  }));\n});\nFocusLock$1.propTypes = {};\nFocusLock$1.defaultProps = {\n  children: void 0,\n  disabled: false,\n  returnFocus: false,\n  noFocusGuards: false,\n  autoFocus: true,\n  persistentFocus: false,\n  crossFrame: true,\n  allowTextSelection: void 0,\n  group: void 0,\n  className: void 0,\n  whiteList: void 0,\n  shards: void 0,\n  as: \"div\",\n  lockProps: {},\n  onActivation: void 0,\n  onDeactivation: void 0\n};\nvar FocusLockUI2 = FocusLock$1;\nfunction withSideEffect(reducePropsToState2, handleStateChangeOnClient2) {\n  function getDisplayName(WrappedComponent) {\n    return WrappedComponent.displayName || WrappedComponent.name || \"Component\";\n  }\n  return function wrap2(WrappedComponent) {\n    var mountedInstances = [];\n    var state;\n    function emitChange() {\n      state = reducePropsToState2(mountedInstances.map(function(instance) {\n        return instance.props;\n      }));\n      handleStateChangeOnClient2(state);\n    }\n    var SideEffect = /* @__PURE__ */ function(_PureComponent) {\n      _inheritsLoose(SideEffect2, _PureComponent);\n      function SideEffect2() {\n        return _PureComponent.apply(this, arguments) || this;\n      }\n      SideEffect2.peek = function peek() {\n        return state;\n      };\n      var _proto = SideEffect2.prototype;\n      _proto.componentDidMount = function componentDidMount() {\n        mountedInstances.push(this);\n        emitChange();\n      };\n      _proto.componentDidUpdate = function componentDidUpdate() {\n        emitChange();\n      };\n      _proto.componentWillUnmount = function componentWillUnmount() {\n        var index2 = mountedInstances.indexOf(this);\n        mountedInstances.splice(index2, 1);\n        emitChange();\n      };\n      _proto.render = function render() {\n        return /* @__PURE__ */ React.createElement(WrappedComponent, this.props);\n      };\n      return SideEffect2;\n    }(react.exports.PureComponent);\n    _defineProperty(SideEffect, \"displayName\", \"SideEffect(\" + getDisplayName(WrappedComponent) + \")\");\n    return SideEffect;\n  };\n}\nvar toArray$2 = function(a) {\n  var ret = Array(a.length);\n  for (var i = 0; i < a.length; ++i) {\n    ret[i] = a[i];\n  }\n  return ret;\n};\nvar asArray = function(a) {\n  return Array.isArray(a) ? a : [a];\n};\nvar filterNested = function(nodes) {\n  var contained = new Set();\n  var l2 = nodes.length;\n  for (var i = 0; i < l2; i += 1) {\n    for (var j = i + 1; j < l2; j += 1) {\n      var position = nodes[i].compareDocumentPosition(nodes[j]);\n      if ((position & Node.DOCUMENT_POSITION_CONTAINED_BY) > 0) {\n        contained.add(j);\n      }\n      if ((position & Node.DOCUMENT_POSITION_CONTAINS) > 0) {\n        contained.add(i);\n      }\n    }\n  }\n  return nodes.filter(function(_, index2) {\n    return !contained.has(index2);\n  });\n};\nvar getTopParent = function(node) {\n  return node.parentNode ? getTopParent(node.parentNode) : node;\n};\nvar getAllAffectedNodes = function(node) {\n  var nodes = asArray(node);\n  return nodes.filter(Boolean).reduce(function(acc, currentNode) {\n    var group = currentNode.getAttribute(FOCUS_GROUP);\n    acc.push.apply(acc, group ? filterNested(toArray$2(getTopParent(currentNode).querySelectorAll(\"[\" + FOCUS_GROUP + '=\"' + group + '\"]:not([' + FOCUS_DISABLED + '=\"disabled\"])'))) : [currentNode]);\n    return acc;\n  }, []);\n};\nvar isElementHidden = function(node) {\n  if (node.nodeType !== Node.ELEMENT_NODE) {\n    return false;\n  }\n  var computedStyle = window.getComputedStyle(node, null);\n  if (!computedStyle || !computedStyle.getPropertyValue) {\n    return false;\n  }\n  return computedStyle.getPropertyValue(\"display\") === \"none\" || computedStyle.getPropertyValue(\"visibility\") === \"hidden\";\n};\nvar isVisibleUncached = function(node, checkParent) {\n  return !node || node === document || node && node.nodeType === Node.DOCUMENT_NODE || !isElementHidden(node) && checkParent(node.parentNode && node.parentNode.nodeType === Node.DOCUMENT_FRAGMENT_NODE ? node.parentNode.host : node.parentNode);\n};\nvar isVisibleCached = function(visibilityCache, node) {\n  var cached = visibilityCache.get(node);\n  if (cached !== void 0) {\n    return cached;\n  }\n  var result = isVisibleUncached(node, isVisibleCached.bind(void 0, visibilityCache));\n  visibilityCache.set(node, result);\n  return result;\n};\nvar notHiddenInput = function(node) {\n  return !((node.tagName === \"INPUT\" || node.tagName === \"BUTTON\") && (node.type === \"hidden\" || node.disabled));\n};\nvar isGuard = function(node) {\n  return Boolean(node && node.dataset && node.dataset.focusGuard);\n};\nvar isNotAGuard = function(node) {\n  return !isGuard(node);\n};\nvar isDefined = function(x2) {\n  return Boolean(x2);\n};\nvar tabSort = function(a, b) {\n  var tabDiff = a.tabIndex - b.tabIndex;\n  var indexDiff = a.index - b.index;\n  if (tabDiff) {\n    if (!a.tabIndex) {\n      return 1;\n    }\n    if (!b.tabIndex) {\n      return -1;\n    }\n  }\n  return tabDiff || indexDiff;\n};\nvar orderByTabIndex = function(nodes, filterNegative, keepGuards) {\n  return toArray$2(nodes).map(function(node, index2) {\n    return {\n      node,\n      index: index2,\n      tabIndex: keepGuards && node.tabIndex === -1 ? (node.dataset || {}).focusGuard ? 0 : -1 : node.tabIndex\n    };\n  }).filter(function(data2) {\n    return !filterNegative || data2.tabIndex >= 0;\n  }).sort(tabSort);\n};\nvar tabbables = [\n  \"button:enabled\",\n  \"select:enabled\",\n  \"textarea:enabled\",\n  \"input:enabled\",\n  \"a[href]\",\n  \"area[href]\",\n  \"summary\",\n  \"iframe\",\n  \"object\",\n  \"embed\",\n  \"audio[controls]\",\n  \"video[controls]\",\n  \"[tabindex]\",\n  \"[contenteditable]\",\n  \"[autofocus]\"\n];\nvar queryTabbables = tabbables.join(\",\");\nvar queryGuardTabbables = queryTabbables + \", [data-focus-guard]\";\nvar getFocusables = function(parents, withGuards) {\n  return parents.reduce(function(acc, parent) {\n    return acc.concat(toArray$2(parent.querySelectorAll(withGuards ? queryGuardTabbables : queryTabbables)), parent.parentNode ? toArray$2(parent.parentNode.querySelectorAll(queryTabbables)).filter(function(node) {\n      return node === parent;\n    }) : []);\n  }, []);\n};\nvar getParentAutofocusables = function(parent) {\n  var parentFocus = parent.querySelectorAll(\"[\" + FOCUS_AUTO + \"]\");\n  return toArray$2(parentFocus).map(function(node) {\n    return getFocusables([node]);\n  }).reduce(function(acc, nodes) {\n    return acc.concat(nodes);\n  }, []);\n};\nvar filterFocusable = function(nodes, visibilityCache) {\n  return toArray$2(nodes).filter(function(node) {\n    return isVisibleCached(visibilityCache, node);\n  }).filter(function(node) {\n    return notHiddenInput(node);\n  });\n};\nvar getTabbableNodes = function(topNodes, visibilityCache, withGuards) {\n  return orderByTabIndex(filterFocusable(getFocusables(topNodes, withGuards), visibilityCache), true, withGuards);\n};\nvar getAllTabbableNodes = function(topNodes, visibilityCache) {\n  return orderByTabIndex(filterFocusable(getFocusables(topNodes), visibilityCache), false);\n};\nvar parentAutofocusables = function(topNode, visibilityCache) {\n  return filterFocusable(getParentAutofocusables(topNode), visibilityCache);\n};\nvar getParents = function(node, parents) {\n  if (parents === void 0) {\n    parents = [];\n  }\n  parents.push(node);\n  if (node.parentNode) {\n    getParents(node.parentNode, parents);\n  }\n  return parents;\n};\nvar getCommonParent = function(nodeA, nodeB) {\n  var parentsA = getParents(nodeA);\n  var parentsB = getParents(nodeB);\n  for (var i = 0; i < parentsA.length; i += 1) {\n    var currentParent = parentsA[i];\n    if (parentsB.indexOf(currentParent) >= 0) {\n      return currentParent;\n    }\n  }\n  return false;\n};\nvar getTopCommonParent = function(baseActiveElement, leftEntry, rightEntries) {\n  var activeElements = asArray(baseActiveElement);\n  var leftEntries = asArray(leftEntry);\n  var activeElement = activeElements[0];\n  var topCommon = false;\n  leftEntries.filter(Boolean).forEach(function(entry) {\n    topCommon = getCommonParent(topCommon || entry, entry) || topCommon;\n    rightEntries.filter(Boolean).forEach(function(subEntry) {\n      var common = getCommonParent(activeElement, subEntry);\n      if (common) {\n        if (!topCommon || common.contains(topCommon)) {\n          topCommon = common;\n        } else {\n          topCommon = getCommonParent(common, topCommon);\n        }\n      }\n    });\n  });\n  return topCommon;\n};\nvar allParentAutofocusables = function(entries, visibilityCache) {\n  return entries.reduce(function(acc, node) {\n    return acc.concat(parentAutofocusables(node, visibilityCache));\n  }, []);\n};\nvar getFocusabledIn = function(topNode) {\n  var entries = getAllAffectedNodes(topNode).filter(isNotAGuard);\n  var commonParent = getTopCommonParent(topNode, topNode, entries);\n  var visibilityCache = new Map();\n  var outerNodes = getTabbableNodes([commonParent], visibilityCache, true);\n  var innerElements = getTabbableNodes(entries, visibilityCache).filter(function(_a) {\n    var node = _a.node;\n    return isNotAGuard(node);\n  }).map(function(_a) {\n    var node = _a.node;\n    return node;\n  });\n  return outerNodes.map(function(_a) {\n    var node = _a.node, index2 = _a.index;\n    return {\n      node,\n      index: index2,\n      lockItem: innerElements.indexOf(node) >= 0,\n      guard: isGuard(node)\n    };\n  });\n};\nvar focusInFrame = function(frame) {\n  return frame === document.activeElement;\n};\nvar focusInsideIframe = function(topNode) {\n  return Boolean(toArray$2(topNode.querySelectorAll(\"iframe\")).some(function(node) {\n    return focusInFrame(node);\n  }));\n};\nvar focusInside = function(topNode) {\n  var activeElement = document && document.activeElement;\n  if (!activeElement || activeElement.dataset && activeElement.dataset.focusGuard) {\n    return false;\n  }\n  return getAllAffectedNodes(topNode).reduce(function(result, node) {\n    return result || node.contains(activeElement) || focusInsideIframe(node);\n  }, false);\n};\nvar focusIsHidden = function() {\n  return document && toArray$2(document.querySelectorAll(\"[\" + FOCUS_ALLOW + \"]\")).some(function(node) {\n    return node.contains(document.activeElement);\n  });\n};\nvar isRadio = function(node) {\n  return node.tagName === \"INPUT\" && node.type === \"radio\";\n};\nvar findSelectedRadio = function(node, nodes) {\n  return nodes.filter(isRadio).filter(function(el) {\n    return el.name === node.name;\n  }).filter(function(el) {\n    return el.checked;\n  })[0] || node;\n};\nvar correctNode = function(node, nodes) {\n  if (isRadio(node) && node.name) {\n    return findSelectedRadio(node, nodes);\n  }\n  return node;\n};\nvar correctNodes = function(nodes) {\n  var resultSet = new Set();\n  nodes.forEach(function(node) {\n    return resultSet.add(correctNode(node, nodes));\n  });\n  return nodes.filter(function(node) {\n    return resultSet.has(node);\n  });\n};\nvar pickFirstFocus = function(nodes) {\n  if (nodes[0] && nodes.length > 1) {\n    return correctNode(nodes[0], nodes);\n  }\n  return nodes[0];\n};\nvar pickFocusable = function(nodes, index2) {\n  if (nodes.length > 1) {\n    return nodes.indexOf(correctNode(nodes[index2], nodes));\n  }\n  return index2;\n};\nvar NEW_FOCUS = \"NEW_FOCUS\";\nvar newFocus = function(innerNodes, outerNodes, activeElement, lastNode) {\n  var cnt = innerNodes.length;\n  var firstFocus = innerNodes[0];\n  var lastFocus = innerNodes[cnt - 1];\n  var isOnGuard = isGuard(activeElement);\n  if (innerNodes.indexOf(activeElement) >= 0) {\n    return void 0;\n  }\n  var activeIndex = outerNodes.indexOf(activeElement);\n  var lastIndex = lastNode ? outerNodes.indexOf(lastNode) : activeIndex;\n  var lastNodeInside = lastNode ? innerNodes.indexOf(lastNode) : -1;\n  var indexDiff = activeIndex - lastIndex;\n  var firstNodeIndex = outerNodes.indexOf(firstFocus);\n  var lastNodeIndex = outerNodes.indexOf(lastFocus);\n  var correctedNodes = correctNodes(outerNodes);\n  var correctedIndexDiff = correctedNodes.indexOf(activeElement) - (lastNode ? correctedNodes.indexOf(lastNode) : activeIndex);\n  var returnFirstNode = pickFocusable(innerNodes, 0);\n  var returnLastNode = pickFocusable(innerNodes, cnt - 1);\n  if (activeIndex === -1 || lastNodeInside === -1) {\n    return NEW_FOCUS;\n  }\n  if (!indexDiff && lastNodeInside >= 0) {\n    return lastNodeInside;\n  }\n  if (activeIndex <= firstNodeIndex && isOnGuard && Math.abs(indexDiff) > 1) {\n    return returnLastNode;\n  }\n  if (activeIndex >= lastNodeIndex && isOnGuard && Math.abs(indexDiff) > 1) {\n    return returnFirstNode;\n  }\n  if (indexDiff && Math.abs(correctedIndexDiff) > 1) {\n    return lastNodeInside;\n  }\n  if (activeIndex <= firstNodeIndex) {\n    return returnLastNode;\n  }\n  if (activeIndex > lastNodeIndex) {\n    return returnFirstNode;\n  }\n  if (indexDiff) {\n    if (Math.abs(indexDiff) > 1) {\n      return lastNodeInside;\n    }\n    return (cnt + lastNodeInside + indexDiff) % cnt;\n  }\n  return void 0;\n};\nvar findAutoFocused = function(autoFocusables) {\n  return function(node) {\n    return node.autofocus || node.dataset && !!node.dataset.autofocus || autoFocusables.indexOf(node) >= 0;\n  };\n};\nvar reorderNodes = function(srcNodes, dstNodes) {\n  var remap = new Map();\n  dstNodes.forEach(function(entity) {\n    return remap.set(entity.node, entity);\n  });\n  return srcNodes.map(function(node) {\n    return remap.get(node);\n  }).filter(isDefined);\n};\nvar getFocusMerge = function(topNode, lastNode) {\n  var activeElement = document && document.activeElement;\n  var entries = getAllAffectedNodes(topNode).filter(isNotAGuard);\n  var commonParent = getTopCommonParent(activeElement || topNode, topNode, entries);\n  var visibilityCache = new Map();\n  var anyFocusable = getAllTabbableNodes(entries, visibilityCache);\n  var innerElements = getTabbableNodes(entries, visibilityCache).filter(function(_a) {\n    var node = _a.node;\n    return isNotAGuard(node);\n  });\n  if (!innerElements[0]) {\n    innerElements = anyFocusable;\n    if (!innerElements[0]) {\n      return void 0;\n    }\n  }\n  var outerNodes = getAllTabbableNodes([commonParent], visibilityCache).map(function(_a) {\n    var node = _a.node;\n    return node;\n  });\n  var orderedInnerElements = reorderNodes(outerNodes, innerElements);\n  var innerNodes = orderedInnerElements.map(function(_a) {\n    var node = _a.node;\n    return node;\n  });\n  var newId = newFocus(innerNodes, outerNodes, activeElement, lastNode);\n  if (newId === NEW_FOCUS) {\n    var autoFocusable = anyFocusable.map(function(_a) {\n      var node = _a.node;\n      return node;\n    }).filter(findAutoFocused(allParentAutofocusables(entries, visibilityCache)));\n    return {\n      node: autoFocusable && autoFocusable.length ? pickFirstFocus(autoFocusable) : pickFirstFocus(innerNodes)\n    };\n  }\n  if (newId === void 0) {\n    return newId;\n  }\n  return orderedInnerElements[newId];\n};\nvar focusOn = function(target2) {\n  target2.focus();\n  if (\"contentWindow\" in target2 && target2.contentWindow) {\n    target2.contentWindow.focus();\n  }\n};\nvar guardCount = 0;\nvar lockDisabled = false;\nvar setFocus = function(topNode, lastNode) {\n  var focusable = getFocusMerge(topNode, lastNode);\n  if (lockDisabled) {\n    return;\n  }\n  if (focusable) {\n    if (guardCount > 2) {\n      console.error(\"FocusLock: focus-fighting detected. Only one focus management system could be active. See https://github.com/theKashey/focus-lock/#focus-fighting\");\n      lockDisabled = true;\n      setTimeout(function() {\n        lockDisabled = false;\n      }, 1);\n      return;\n    }\n    guardCount++;\n    focusOn(focusable.node);\n    guardCount--;\n  }\n};\nvar moveFocusInside = setFocus;\nfunction deferAction(action) {\n  var _window = window, setImmediate = _window.setImmediate;\n  if (typeof setImmediate !== \"undefined\") {\n    setImmediate(action);\n  } else {\n    setTimeout(action, 1);\n  }\n}\nvar focusOnBody = function focusOnBody2() {\n  return document && document.activeElement === document.body;\n};\nvar isFreeFocus = function isFreeFocus2() {\n  return focusOnBody() || focusIsHidden();\n};\nvar lastActiveTrap = null;\nvar lastActiveFocus = null;\nvar lastPortaledElement = null;\nvar focusWasOutsideWindow = false;\nvar defaultWhitelist = function defaultWhitelist2() {\n  return true;\n};\nvar focusWhitelisted = function focusWhitelisted2(activeElement) {\n  return (lastActiveTrap.whiteList || defaultWhitelist)(activeElement);\n};\nvar recordPortal = function recordPortal2(observerNode, portaledElement) {\n  lastPortaledElement = {\n    observerNode,\n    portaledElement\n  };\n};\nvar focusIsPortaledPair = function focusIsPortaledPair2(element) {\n  return lastPortaledElement && lastPortaledElement.portaledElement === element;\n};\nfunction autoGuard(startIndex, end, step, allNodes) {\n  var lastGuard = null;\n  var i = startIndex;\n  do {\n    var item = allNodes[i];\n    if (item.guard) {\n      if (item.node.dataset.focusAutoGuard) {\n        lastGuard = item;\n      }\n    } else if (item.lockItem) {\n      if (i !== startIndex) {\n        return;\n      }\n      lastGuard = null;\n    } else {\n      break;\n    }\n  } while ((i += step) !== end);\n  if (lastGuard) {\n    lastGuard.node.tabIndex = 0;\n  }\n}\nvar extractRef = function extractRef2(ref) {\n  return ref && \"current\" in ref ? ref.current : ref;\n};\nvar focusWasOutside = function focusWasOutside2(crossFrameOption) {\n  if (crossFrameOption) {\n    return Boolean(focusWasOutsideWindow);\n  }\n  return focusWasOutsideWindow === \"meanwhile\";\n};\nvar activateTrap = function activateTrap2() {\n  var result = false;\n  if (lastActiveTrap) {\n    var _lastActiveTrap = lastActiveTrap, observed = _lastActiveTrap.observed, persistentFocus = _lastActiveTrap.persistentFocus, autoFocus = _lastActiveTrap.autoFocus, shards = _lastActiveTrap.shards, crossFrame = _lastActiveTrap.crossFrame;\n    var workingNode = observed || lastPortaledElement && lastPortaledElement.portaledElement;\n    var activeElement = document && document.activeElement;\n    if (workingNode) {\n      var workingArea = [workingNode].concat(shards.map(extractRef).filter(Boolean));\n      if (!activeElement || focusWhitelisted(activeElement)) {\n        if (persistentFocus || focusWasOutside(crossFrame) || !isFreeFocus() || !lastActiveFocus && autoFocus) {\n          if (workingNode && !(focusInside(workingArea) || focusIsPortaledPair(activeElement))) {\n            if (document && !lastActiveFocus && activeElement && !autoFocus) {\n              if (activeElement.blur) {\n                activeElement.blur();\n              }\n              document.body.focus();\n            } else {\n              result = moveFocusInside(workingArea, lastActiveFocus);\n              lastPortaledElement = {};\n            }\n          }\n          focusWasOutsideWindow = false;\n          lastActiveFocus = document && document.activeElement;\n        }\n      }\n      if (document) {\n        var newActiveElement = document && document.activeElement;\n        var allNodes = getFocusabledIn(workingArea);\n        var focusedIndex = allNodes.map(function(_ref2) {\n          var node = _ref2.node;\n          return node;\n        }).indexOf(newActiveElement);\n        if (focusedIndex > -1) {\n          allNodes.filter(function(_ref2) {\n            var guard = _ref2.guard, node = _ref2.node;\n            return guard && node.dataset.focusAutoGuard;\n          }).forEach(function(_ref3) {\n            var node = _ref3.node;\n            return node.removeAttribute(\"tabIndex\");\n          });\n          autoGuard(focusedIndex, allNodes.length, 1, allNodes);\n          autoGuard(focusedIndex, -1, -1, allNodes);\n        }\n      }\n    }\n  }\n  return result;\n};\nvar onTrap = function onTrap2(event) {\n  if (activateTrap() && event) {\n    event.stopPropagation();\n    event.preventDefault();\n  }\n};\nvar onBlur = function onBlur2() {\n  return deferAction(activateTrap);\n};\nvar onFocus = function onFocus2(event) {\n  var source2 = event.target;\n  var currentNode = event.currentTarget;\n  if (!currentNode.contains(source2)) {\n    recordPortal(currentNode, source2);\n  }\n};\nvar FocusWatcher = function FocusWatcher2() {\n  return null;\n};\nvar onWindowBlur = function onWindowBlur2() {\n  focusWasOutsideWindow = \"just\";\n  setTimeout(function() {\n    focusWasOutsideWindow = \"meanwhile\";\n  }, 0);\n};\nvar attachHandler = function attachHandler2() {\n  document.addEventListener(\"focusin\", onTrap, true);\n  document.addEventListener(\"focusout\", onBlur);\n  window.addEventListener(\"blur\", onWindowBlur);\n};\nvar detachHandler = function detachHandler2() {\n  document.removeEventListener(\"focusin\", onTrap, true);\n  document.removeEventListener(\"focusout\", onBlur);\n  window.removeEventListener(\"blur\", onWindowBlur);\n};\nfunction reducePropsToState(propsList) {\n  return propsList.filter(function(_ref5) {\n    var disabled = _ref5.disabled;\n    return !disabled;\n  });\n}\nfunction handleStateChangeOnClient(traps) {\n  var trap = traps.slice(-1)[0];\n  if (trap && !lastActiveTrap) {\n    attachHandler();\n  }\n  var lastTrap = lastActiveTrap;\n  var sameTrap = lastTrap && trap && trap.id === lastTrap.id;\n  lastActiveTrap = trap;\n  if (lastTrap && !sameTrap) {\n    lastTrap.onDeactivation();\n    if (!traps.filter(function(_ref6) {\n      var id2 = _ref6.id;\n      return id2 === lastTrap.id;\n    }).length) {\n      lastTrap.returnFocus(!trap);\n    }\n  }\n  if (trap) {\n    lastActiveFocus = null;\n    if (!sameTrap || lastTrap.observed !== trap.observed) {\n      trap.onActivation();\n    }\n    activateTrap();\n    deferAction(activateTrap);\n  } else {\n    detachHandler();\n    lastActiveFocus = null;\n  }\n}\nmediumFocus.assignSyncMedium(onFocus);\nmediumBlur.assignMedium(onBlur);\nmediumEffect.assignMedium(function(cb2) {\n  return cb2({\n    moveFocusInside,\n    focusInside\n  });\n});\nvar FocusTrap = withSideEffect(reducePropsToState, handleStateChangeOnClient)(FocusWatcher);\nvar FocusLockCombination = /* @__PURE__ */ react.exports.forwardRef(function FocusLockUICombination(props, ref) {\n  return /* @__PURE__ */ react.exports.createElement(FocusLockUI2, _extends({\n    sideCar: FocusTrap,\n    ref\n  }, props));\n});\nvar _ref = FocusLockUI2.propTypes || {};\n_ref.sideCar;\n_objectWithoutPropertiesLoose(_ref, [\"sideCar\"]);\nFocusLockCombination.propTypes = {};\nvar FocusLock = FocusLockCombination;\nvar __extends$1 = globalThis && globalThis.__extends || function() {\n  var extendStatics = function(d, b) {\n    extendStatics = Object.setPrototypeOf || { __proto__: [] } instanceof Array && function(d2, b2) {\n      d2.__proto__ = b2;\n    } || function(d2, b2) {\n      for (var p2 in b2)\n        if (Object.prototype.hasOwnProperty.call(b2, p2))\n          d2[p2] = b2[p2];\n    };\n    return extendStatics(d, b);\n  };\n  return function(d, b) {\n    if (typeof b !== \"function\" && b !== null)\n      throw new TypeError(\"Class extends value \" + String(b) + \" is not a constructor or null\");\n    extendStatics(d, b);\n    function __() {\n      this.constructor = d;\n    }\n    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n  };\n}();\nvar Portal$1 = function(_super) {\n  __extends$1(Portal2, _super);\n  function Portal2() {\n    var _this = _super !== null && _super.apply(this, arguments) || this;\n    _this.container = null;\n    return _this;\n  }\n  Portal2.prototype.componentDidMount = function() {\n    var _this = this;\n    this.createContainer();\n    this.timer = setTimeout(function() {\n      if (!_this.container) {\n        _this.createContainer();\n      }\n    });\n  };\n  Portal2.prototype.componentWillUnmount = function() {\n    clearTimeout(this.timer);\n  };\n  Portal2.prototype.createContainer = function() {\n    var getContainer = this.props.getContainer;\n    this.container = getContainer && getContainer();\n    this.forceUpdate();\n  };\n  Portal2.prototype.render = function() {\n    var children = this.props.children;\n    if (this.container) {\n      return ReactDOM.createPortal(children, this.container);\n    }\n    return null;\n  };\n  return Portal2;\n}(react.exports.Component);\nvar Portal$2 = Portal$1;\nvar __extends = globalThis && globalThis.__extends || function() {\n  var extendStatics = function(d, b) {\n    extendStatics = Object.setPrototypeOf || { __proto__: [] } instanceof Array && function(d2, b2) {\n      d2.__proto__ = b2;\n    } || function(d2, b2) {\n      for (var p2 in b2)\n        if (Object.prototype.hasOwnProperty.call(b2, p2))\n          d2[p2] = b2[p2];\n    };\n    return extendStatics(d, b);\n  };\n  return function(d, b) {\n    if (typeof b !== \"function\" && b !== null)\n      throw new TypeError(\"Class extends value \" + String(b) + \" is not a constructor or null\");\n    extendStatics(d, b);\n    function __() {\n      this.constructor = d;\n    }\n    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n  };\n}();\nvar __assign$l = globalThis && globalThis.__assign || function() {\n  __assign$l = Object.assign || function(t2) {\n    for (var s, i = 1, n2 = arguments.length; i < n2; i++) {\n      s = arguments[i];\n      for (var p2 in s)\n        if (Object.prototype.hasOwnProperty.call(s, p2))\n          t2[p2] = s[p2];\n    }\n    return t2;\n  };\n  return __assign$l.apply(this, arguments);\n};\nvar PortalWrapper = function(_super) {\n  __extends(PortalWrapper2, _super);\n  function PortalWrapper2() {\n    return _super !== null && _super.apply(this, arguments) || this;\n  }\n  PortalWrapper2.prototype.componentWillUnmount = function() {\n    this.instance = null;\n  };\n  PortalWrapper2.prototype.render = function() {\n    var _this = this;\n    var _a = this.props, forceRender = _a.forceRender, visible = _a.visible;\n    return forceRender || visible || this.instance ? React.createElement(Portal$2, __assign$l({ ref: function(ref) {\n      return _this.instance = ref;\n    } }, this.props)) : null;\n  };\n  PortalWrapper2.displayName = \"Portal\";\n  PortalWrapper2.defaultProps = {\n    getContainer: function() {\n      return document.body;\n    }\n  };\n  return PortalWrapper2;\n}(react.exports.Component);\nvar Portal = PortalWrapper;\nfunction useOverflowHidden(getContainer, _a) {\n  var hidden = _a.hidden;\n  var needResetContainerStyle = react.exports.useRef(false);\n  var originContainerStyle = react.exports.useRef({});\n  var getScrollBarWidth = function(element) {\n    return element.tagName === \"BODY\" ? window.innerWidth - (document.body.clientWidth || document.documentElement.clientWidth) : element.offsetWidth - element.clientWidth;\n  };\n  var setContainerStyle = function() {\n    var container2 = getContainer();\n    if (container2 && container2.style.overflow !== \"hidden\") {\n      var originStyle = container2.style;\n      needResetContainerStyle.current = true;\n      var containerScrollBarWidth = getScrollBarWidth(container2);\n      if (containerScrollBarWidth) {\n        originContainerStyle.current.width = originStyle.width;\n        container2.style.width = \"calc(\" + (container2.style.width || \"100%\") + \" - \" + containerScrollBarWidth + \"px)\";\n      }\n      originContainerStyle.current.overflow = originStyle.overflow;\n      container2.style.overflow = \"hidden\";\n    }\n  };\n  var resetContainerStyle = function() {\n    if (needResetContainerStyle.current && getContainer()) {\n      var container_1 = getContainer();\n      var originStyle_1 = originContainerStyle.current;\n      Object.keys(originStyle_1).forEach(function(i) {\n        return container_1.style[i] = originStyle_1[i];\n      });\n    }\n    needResetContainerStyle.current = false;\n    originContainerStyle.current = {};\n  };\n  react.exports.useEffect(function() {\n    hidden ? setContainerStyle() : resetContainerStyle();\n    return function() {\n      resetContainerStyle();\n    };\n  }, [getContainer, hidden]);\n  return [resetContainerStyle, setContainerStyle];\n}\nvar __assign$k = globalThis && globalThis.__assign || function() {\n  __assign$k = Object.assign || function(t2) {\n    for (var s, i = 1, n2 = arguments.length; i < n2; i++) {\n      s = arguments[i];\n      for (var p2 in s)\n        if (Object.prototype.hasOwnProperty.call(s, p2))\n          t2[p2] = s[p2];\n    }\n    return t2;\n  };\n  return __assign$k.apply(this, arguments);\n};\nvar __read$p = globalThis && globalThis.__read || function(o, n2) {\n  var m2 = typeof Symbol === \"function\" && o[Symbol.iterator];\n  if (!m2)\n    return o;\n  var i = m2.call(o), r2, ar = [], e;\n  try {\n    while ((n2 === void 0 || n2-- > 0) && !(r2 = i.next()).done)\n      ar.push(r2.value);\n  } catch (error) {\n    e = { error };\n  } finally {\n    try {\n      if (r2 && !r2.done && (m2 = i[\"return\"]))\n        m2.call(i);\n    } finally {\n      if (e)\n        throw e.error;\n    }\n  }\n  return ar;\n};\nvar defaultProps$5 = {\n  placement: \"right\",\n  width: 250,\n  height: 250,\n  escToExit: true,\n  mask: true,\n  closable: true,\n  maskClosable: true,\n  mountOnEnter: true,\n  getPopupContainer: function() {\n    return document.body;\n  }\n};\nfunction Drawer(baseProps, ref) {\n  var _a, _b, _c;\n  var context = react.exports.useContext(ConfigContext);\n  var locale2 = context.locale, getPrefixCls = context.getPrefixCls, componentConfig2 = context.componentConfig;\n  var props = useMergeProps(baseProps, defaultProps$5, componentConfig2 === null || componentConfig2 === void 0 ? void 0 : componentConfig2.Drawer);\n  var style = props.style, className = props.className, children = props.children, wrapClassName = props.wrapClassName, maskStyle = props.maskStyle, headerStyle = props.headerStyle, bodyStyle = props.bodyStyle, title = props.title, footer = props.footer, okText = props.okText, cancelText = props.cancelText, width = props.width, height = props.height, placement = props.placement, mask = props.mask, visible = props.visible, closable = props.closable, maskClosable = props.maskClosable, confirmLoading = props.confirmLoading, mountOnEnter = props.mountOnEnter, unmountOnExit = props.unmountOnExit, afterOpen = props.afterOpen, afterClose = props.afterClose, getPopupContainer = props.getPopupContainer, escToExit = props.escToExit, propGetChildrenPopupContainer = props.getChildrenPopupContainer, focusLock = props.focusLock, autoFocus = props.autoFocus, okButtonProps = props.okButtonProps, cancelButtonProps = props.cancelButtonProps;\n  var drawerWrapperRef = react.exports.useRef(null);\n  var contentWrapperRef = react.exports.useRef(null);\n  var _d = __read$p(react.exports.useState(false), 2), shouldReComputeFixed = _d[0], setShouldReComputeFixed = _d[1];\n  var _e = __read$p(react.exports.useState(), 2), popupZIndex = _e[0], setPopupZIndex = _e[1];\n  var prefixCls2 = getPrefixCls(\"drawer\");\n  var inExit = react.exports.useRef(false);\n  var _f = __read$p(react.exports.useState(false), 2), isOpened = _f[0], setIsOpened = _f[1];\n  var getContainer = react.exports.useCallback(function() {\n    var container2 = getPopupContainer && getPopupContainer();\n    return reactDom.exports.findDOMNode(container2) || document.body;\n  }, [getPopupContainer]);\n  var isFixed = react.exports.useMemo(function() {\n    return !isServerRendering && getContainer() === document.body;\n  }, [shouldReComputeFixed, getContainer]);\n  useOverflowHidden(getContainer, { hidden: visible && mask });\n  react.exports.useImperativeHandle(ref, function() {\n    return drawerWrapperRef.current;\n  });\n  react.exports.useEffect(function() {\n    if (visible && props.getPopupContainer) {\n      setShouldReComputeFixed(true);\n    }\n  }, []);\n  react.exports.useEffect(function() {\n    var _a2;\n    if (visible && popupZIndex === void 0) {\n      if (drawerWrapperRef.current) {\n        var zIndex = +((_a2 = window.getComputedStyle(drawerWrapperRef.current, null)) === null || _a2 === void 0 ? void 0 : _a2.zIndex);\n        if (!isNaN(zIndex)) {\n          setPopupZIndex(zIndex + 1);\n        }\n      }\n    }\n  }, [visible, popupZIndex]);\n  react.exports.useEffect(function() {\n    var onKeyDown = function(e) {\n      if (escToExit && e && e.key === Esc.key && props.onCancel) {\n        props.onCancel();\n      }\n    };\n    if (visible) {\n      on(document, \"keydown\", onKeyDown);\n    }\n    return function() {\n      off(document, \"keydown\", onKeyDown);\n    };\n  }, [visible, escToExit]);\n  var element = React.createElement(\"div\", { className: prefixCls2 + \"-scroll\" }, title !== null && React.createElement(\"div\", { className: prefixCls2 + \"-header\", style: headerStyle }, React.createElement(\"div\", { className: prefixCls2 + \"-header-title\" }, title)), closable && React.createElement(IconHover, { onClick: props.onCancel, className: prefixCls2 + \"-close-icon\" }, React.createElement(IconClose$1, null)), React.createElement(\"div\", { ref: contentWrapperRef, style: bodyStyle, className: cs$1(prefixCls2 + \"-content\", (_a = {}, _a[prefixCls2 + \"-content-nofooter\"] = footer === null, _a[prefixCls2 + \"-content-noheader\"] = title === null, _a)) }, React.createElement(ConfigProvider, __assign$k({}, context, { zIndex: popupZIndex || 1050, getPopupContainer: function(node) {\n    return typeof propGetChildrenPopupContainer === \"function\" ? propGetChildrenPopupContainer(node) : contentWrapperRef.current;\n  } }), children)), footer !== null && (footer ? React.createElement(\"div\", { className: prefixCls2 + \"-footer\" }, footer) : React.createElement(\"div\", { className: prefixCls2 + \"-footer\" }, React.createElement(Button$1, __assign$k({ onClick: props.onCancel }, cancelButtonProps), cancelText || locale2.Drawer.cancelText), React.createElement(Button$1, __assign$k({ type: \"primary\", loading: confirmLoading, onClick: props.onOk }, okButtonProps), okText || locale2.Drawer.okText))));\n  var globalFocusLockConfig = context.focusLock.drawer;\n  var globalFocusLock = !!globalFocusLockConfig;\n  var globalAutoFocus = isObject$6(globalFocusLockConfig) && globalFocusLockConfig.autoFocus;\n  var innerFocusLock = focusLock !== void 0 ? focusLock : globalFocusLock;\n  var innerAutoFocus = autoFocus !== void 0 ? autoFocus : globalAutoFocus;\n  var dom = innerFocusLock ? React.createElement(FocusLock, { as: \"span\", disabled: !isOpened, autoFocus: innerAutoFocus }, element) : element;\n  return React.createElement(Portal, { forceRender: !mountOnEnter, visible, getContainer: getPopupContainer }, React.createElement(\"div\", { ref: drawerWrapperRef, className: cs$1(prefixCls2 + \"-wrapper\", (_b = {}, _b[prefixCls2 + \"-no-mask\"] = !mask, _b[prefixCls2 + \"-wrapper-hide\"] = !visible, _b), wrapClassName), style: isFixed ? { position: \"fixed\" } : { zIndex: \"inherit\", position: \"absolute\" } }, mask ? React.createElement(CSSTransition$3, { in: visible, appear: true, timeout: 300, classNames: \"fadeInStandard\", mountOnEnter, unmountOnExit }, React.createElement(\"div\", { className: prefixCls2 + \"-mask\", style: maskStyle, onClick: function() {\n    if (!inExit.current && maskClosable) {\n      props.onCancel && props.onCancel();\n    }\n  } })) : null, React.createElement(CSSTransition$3, { in: visible, appear: true, timeout: 300, classNames: {\n    top: \"slideTop\",\n    bottom: \"slideBottom\",\n    left: \"slideLeft\",\n    right: \"slideRight\"\n  }[placement], mountOnEnter, unmountOnExit, onEnter: function(e) {\n    e.parentNode.style.display = \"block\";\n  }, onEntered: function() {\n    setIsOpened(true);\n    afterOpen && afterOpen();\n  }, onExit: function() {\n    setIsOpened(false);\n    inExit.current = true;\n  }, onExited: function(e) {\n    inExit.current = false;\n    e.parentNode.style.display = \"\";\n    afterClose && afterClose();\n  } }, React.createElement(\"div\", { className: cs$1(prefixCls2, className), style: Object.assign(placement === \"left\" || placement === \"right\" ? { width } : { height }, (_c = {}, _c[placement] = 0, _c), style) }, React.createElement(\"div\", { className: prefixCls2 + \"-inner\" }, React.createElement(ConfigProvider, __assign$k({}, context, { zIndex: popupZIndex || 1050 }), dom))))));\n}\nvar DrawerComponent = React.forwardRef(Drawer);\nDrawerComponent.displayName = \"Drawer\";\nvar Drawer$1 = DrawerComponent;\nvar RowContext = react.exports.createContext({});\nvar __assign$j = globalThis && globalThis.__assign || function() {\n  __assign$j = Object.assign || function(t2) {\n    for (var s, i = 1, n2 = arguments.length; i < n2; i++) {\n      s = arguments[i];\n      for (var p2 in s)\n        if (Object.prototype.hasOwnProperty.call(s, p2))\n          t2[p2] = s[p2];\n    }\n    return t2;\n  };\n  return __assign$j.apply(this, arguments);\n};\nvar __rest$7 = globalThis && globalThis.__rest || function(s, e) {\n  var t2 = {};\n  for (var p2 in s)\n    if (Object.prototype.hasOwnProperty.call(s, p2) && e.indexOf(p2) < 0)\n      t2[p2] = s[p2];\n  if (s != null && typeof Object.getOwnPropertySymbols === \"function\")\n    for (var i = 0, p2 = Object.getOwnPropertySymbols(s); i < p2.length; i++) {\n      if (e.indexOf(p2[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p2[i]))\n        t2[p2[i]] = s[p2[i]];\n    }\n  return t2;\n};\nvar defaultProps$4 = {\n  span: 24\n};\nfunction getFlexString(flex) {\n  if (typeof flex === \"string\" && /\\d+[px|%|em|rem|]{1}/.test(flex)) {\n    return \"0 0 \" + flex;\n  }\n  return flex;\n}\nfunction Col(baseProps, ref) {\n  var _a;\n  var _b = react.exports.useContext(ConfigContext), getPrefixCls = _b.getPrefixCls, componentConfig2 = _b.componentConfig;\n  var props = useMergeProps(baseProps, defaultProps$4, componentConfig2 === null || componentConfig2 === void 0 ? void 0 : componentConfig2[\"Grid.Col\"]);\n  var _c = react.exports.useContext(RowContext), gutter = _c.gutter, div = _c.div;\n  var className = props.className, style = props.style, children = props.children, span = props.span, offset = props.offset, order = props.order, pull = props.pull, push = props.push, xs = props.xs, sm = props.sm, md2 = props.md, lg2 = props.lg, xl = props.xl, xxl = props.xxl, flex = props.flex, rest = __rest$7(props, [\"className\", \"style\", \"children\", \"span\", \"offset\", \"order\", \"pull\", \"push\", \"xs\", \"sm\", \"md\", \"lg\", \"xl\", \"xxl\", \"flex\"]);\n  function adaptationGrid(prefixCls3, mergeClassName2) {\n    var screenList = { xs, sm, md: md2, lg: lg2, xl, xxl };\n    Object.keys(screenList).forEach(function(screen) {\n      var screenValue = screenList[screen];\n      if (isNumber$1(screenValue)) {\n        if (screenValue >= 0) {\n          mergeClassName2[prefixCls3 + \"-\" + screen + \"-\" + screenValue] = true;\n        }\n      } else if (isObject$6(screenValue)) {\n        mergeClassName2[prefixCls3 + \"-\" + screen + \"-\" + screenValue.span] = screenValue.span;\n        mergeClassName2[prefixCls3 + \"-\" + screen + \"-offset-\" + screenValue.offset] = screenValue.offset;\n        mergeClassName2[prefixCls3 + \"-\" + screen + \"-order-\" + screenValue.order] = screenValue.order;\n        mergeClassName2[prefixCls3 + \"-\" + screen + \"-pull-\" + screenValue.pull] = screenValue.pull;\n        mergeClassName2[prefixCls3 + \"-\" + screen + \"-push-\" + screenValue.push] = screenValue.push;\n      }\n    });\n    return mergeClassName2;\n  }\n  var prefixCls2 = getPrefixCls(\"col\");\n  var mergeClassName = (_a = {}, _a[\"\" + prefixCls2] = !div, _a[prefixCls2 + \"-order-\" + order] = order, _a[prefixCls2 + \"-\" + span] = !div && !xs && !sm && !md2 && !lg2 && !xl && !xxl, _a[prefixCls2 + \"-offset-\" + offset] = offset, _a[prefixCls2 + \"-pull-\" + pull] = pull, _a[prefixCls2 + \"-push-\" + push] = push, _a);\n  mergeClassName = adaptationGrid(prefixCls2, mergeClassName);\n  var classNames = cs$1(flex ? prefixCls2 : mergeClassName, className);\n  var paddingStyle = {};\n  if (Array.isArray(gutter) && !div) {\n    var paddingHorizontal = gutter[0] && gutter[0] / 2 || 0;\n    var paddingVertical = gutter[1] && gutter[1] / 2 || 0;\n    if (paddingHorizontal) {\n      paddingStyle.paddingLeft = paddingHorizontal;\n      paddingStyle.paddingRight = paddingHorizontal;\n    }\n    if (paddingVertical) {\n      paddingStyle.paddingTop = paddingVertical;\n      paddingStyle.paddingBottom = paddingVertical;\n    }\n  }\n  var flexStyle = react.exports.useMemo(function() {\n    return getFlexString(flex) ? { flex: getFlexString(flex) } : {};\n  }, [flex]);\n  return React.createElement(\"div\", __assign$j({ ref }, rest, { style: __assign$j(__assign$j(__assign$j({}, style), paddingStyle), flexStyle), className: classNames }), children);\n}\nvar ColComponent = react.exports.forwardRef(Col);\nColComponent.displayName = \"Col\";\nvar Col$1 = ColComponent;\nvar __assign$i = globalThis && globalThis.__assign || function() {\n  __assign$i = Object.assign || function(t2) {\n    for (var s, i = 1, n2 = arguments.length; i < n2; i++) {\n      s = arguments[i];\n      for (var p2 in s)\n        if (Object.prototype.hasOwnProperty.call(s, p2))\n          t2[p2] = s[p2];\n    }\n    return t2;\n  };\n  return __assign$i.apply(this, arguments);\n};\nvar __rest$6 = globalThis && globalThis.__rest || function(s, e) {\n  var t2 = {};\n  for (var p2 in s)\n    if (Object.prototype.hasOwnProperty.call(s, p2) && e.indexOf(p2) < 0)\n      t2[p2] = s[p2];\n  if (s != null && typeof Object.getOwnPropertySymbols === \"function\")\n    for (var i = 0, p2 = Object.getOwnPropertySymbols(s); i < p2.length; i++) {\n      if (e.indexOf(p2[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p2[i]))\n        t2[p2[i]] = s[p2[i]];\n    }\n  return t2;\n};\nvar __read$o = globalThis && globalThis.__read || function(o, n2) {\n  var m2 = typeof Symbol === \"function\" && o[Symbol.iterator];\n  if (!m2)\n    return o;\n  var i = m2.call(o), r2, ar = [], e;\n  try {\n    while ((n2 === void 0 || n2-- > 0) && !(r2 = i.next()).done)\n      ar.push(r2.value);\n  } catch (error) {\n    e = { error };\n  } finally {\n    try {\n      if (r2 && !r2.done && (m2 = i[\"return\"]))\n        m2.call(i);\n    } finally {\n      if (e)\n        throw e.error;\n    }\n  }\n  return ar;\n};\nvar defaultProps$3 = {\n  gutter: 0,\n  align: \"start\",\n  justify: \"start\"\n};\nfunction Row(baseProps, ref) {\n  var _a;\n  var _b = react.exports.useContext(ConfigContext), getPrefixCls = _b.getPrefixCls, componentConfig2 = _b.componentConfig;\n  var props = useMergeProps(baseProps, defaultProps$3, componentConfig2 === null || componentConfig2 === void 0 ? void 0 : componentConfig2[\"Grid.Row\"]);\n  var className = props.className, style = props.style, children = props.children, div = props.div, align = props.align, justify = props.justify, gutter = props.gutter, rest = __rest$6(props, [\"className\", \"style\", \"children\", \"div\", \"align\", \"justify\", \"gutter\"]);\n  var _c = __read$o(react.exports.useState({\n    xs: true,\n    sm: true,\n    md: true,\n    lg: true,\n    xl: true,\n    xxl: true\n  }), 2), screens2 = _c[0], setScreens = _c[1];\n  var token = react.exports.useRef();\n  react.exports.useEffect(function() {\n    token.current = ResponsiveObserve.subscribe(function(screens3) {\n      if (!Array.isArray(gutter) && typeof gutter === \"object\" || Array.isArray(gutter) && (typeof gutter[0] === \"object\" || typeof gutter[1] === \"object\")) {\n        setScreens(screens3);\n      }\n    });\n    return function() {\n      ResponsiveObserve.unsubscribe(token.current);\n    };\n  }, []);\n  function getGutter(gutter2) {\n    var result = 0;\n    if (typeof gutter2 === \"object\") {\n      for (var i = 0; i < responsiveArray.length; i++) {\n        var breakpoint = responsiveArray[i];\n        if (screens2[breakpoint] && gutter2[breakpoint] !== void 0) {\n          result = gutter2[breakpoint];\n          break;\n        }\n      }\n    } else {\n      result = gutter2;\n    }\n    return result;\n  }\n  var prefixCls2 = getPrefixCls(\"row\");\n  var classNames = cs$1((_a = {}, _a[\"\" + prefixCls2] = !div, _a[prefixCls2 + \"-align-\" + align] = align, _a[prefixCls2 + \"-justify-\" + justify] = justify, _a), className);\n  var marginStyle = {};\n  var gutterHorizontal = getGutter(Array.isArray(gutter) ? gutter[0] : gutter);\n  var gutterVertical = getGutter(Array.isArray(gutter) ? gutter[1] : 0);\n  if ((gutterHorizontal || gutterVertical) && !div) {\n    var marginHorizontal = -gutterHorizontal / 2;\n    var marginVertical = -gutterVertical / 2;\n    if (marginHorizontal) {\n      marginStyle.marginLeft = marginHorizontal;\n      marginStyle.marginRight = marginHorizontal;\n    }\n    if (marginVertical) {\n      marginStyle.marginTop = marginVertical;\n      marginStyle.marginBottom = marginVertical;\n    }\n  }\n  return React.createElement(\"div\", __assign$i({ ref }, omit(rest, [\"gutter\"]), { style: __assign$i(__assign$i({}, style), marginStyle), className: classNames }), React.createElement(RowContext.Provider, { value: { gutter: [gutterHorizontal, gutterVertical], div } }, children));\n}\nvar RowComponent = react.exports.forwardRef(Row);\nRowComponent.displayName = \"Row\";\nvar Row$1 = RowComponent;\nvar Grid = {\n  Col: Col$1,\n  Row: Row$1\n};\nfunction ownKeys$g(object, enumerableOnly) {\n  var keys = Object.keys(object);\n  if (Object.getOwnPropertySymbols) {\n    var symbols = Object.getOwnPropertySymbols(object);\n    if (enumerableOnly) {\n      symbols = symbols.filter(function(sym) {\n        return Object.getOwnPropertyDescriptor(object, sym).enumerable;\n      });\n    }\n    keys.push.apply(keys, symbols);\n  }\n  return keys;\n}\nfunction _objectSpread$g(target2) {\n  for (var i = 1; i < arguments.length; i++) {\n    var source2 = arguments[i] != null ? arguments[i] : {};\n    if (i % 2) {\n      ownKeys$g(Object(source2), true).forEach(function(key) {\n        _defineProperty(target2, key, source2[key]);\n      });\n    } else if (Object.getOwnPropertyDescriptors) {\n      Object.defineProperties(target2, Object.getOwnPropertyDescriptors(source2));\n    } else {\n      ownKeys$g(Object(source2)).forEach(function(key) {\n        Object.defineProperty(target2, key, Object.getOwnPropertyDescriptor(source2, key));\n      });\n    }\n  }\n  return target2;\n}\nfunction IconPlusComponent(iconProps, ref) {\n  var _useContext = react.exports.useContext(IconContext), prefixCls2 = _useContext.prefixCls;\n  var spin = iconProps.spin, className = iconProps.className;\n  var props = _objectSpread$g(_objectSpread$g({\n    ref\n  }, iconProps), {}, {\n    className: \"\".concat(className ? className + \" \" : \"\").concat(prefixCls2, \"-icon \").concat(prefixCls2, \"-icon-plus\")\n  });\n  if (spin) {\n    props.className = \"\".concat(props.className, \" \").concat(prefixCls2, \"-icon-loading\");\n  }\n  delete props.spin;\n  delete props.isIcon;\n  return /* @__PURE__ */ React.createElement(\"svg\", _extends({\n    fill: \"none\",\n    stroke: \"currentColor\",\n    strokeWidth: \"4\",\n    viewBox: \"0 0 48 48\",\n    width: \"1em\",\n    height: \"1em\"\n  }, props), /* @__PURE__ */ React.createElement(\"path\", {\n    d: \"M5 24h38M24 5v38\"\n  }));\n}\nvar IconPlus = /* @__PURE__ */ React.forwardRef(IconPlusComponent);\nIconPlus.defaultProps = {\n  isIcon: true\n};\nIconPlus.displayName = \"IconPlus\";\nvar IconPlus$1 = IconPlus;\nvar __assign$h = globalThis && globalThis.__assign || function() {\n  __assign$h = Object.assign || function(t2) {\n    for (var s, i = 1, n2 = arguments.length; i < n2; i++) {\n      s = arguments[i];\n      for (var p2 in s)\n        if (Object.prototype.hasOwnProperty.call(s, p2))\n          t2[p2] = s[p2];\n    }\n    return t2;\n  };\n  return __assign$h.apply(this, arguments);\n};\nfunction ConfirmModal(props) {\n  var _a = getModalConfig(), prefixCls2 = _a.prefixCls, simple = _a.simple;\n  return React.createElement(Modal$1, __assign$h({ prefixCls: prefixCls2, simple }, props), props.content);\n}\nvar normalizeConfig = function(_config) {\n  if (_config.isNotice) {\n    var icon2 = _config.icon;\n    if (!icon2 && icon2 !== null) {\n      switch (_config.noticeType) {\n        case \"info\":\n          icon2 = React.createElement(IconInfoCircleFill$1, null);\n          break;\n        case \"success\":\n          icon2 = React.createElement(IconCheckCircleFill$1, null);\n          break;\n        case \"warning\":\n          icon2 = React.createElement(IconExclamationCircleFill$1, null);\n          break;\n        case \"error\":\n          icon2 = React.createElement(IconCloseCircleFill$1, null);\n          break;\n      }\n    }\n    _config.title = React.createElement(\"span\", null, icon2, _config.title);\n    _config.hideCancel = true;\n  } else {\n    _config.title = React.createElement(\"span\", null, _config.icon !== null && (_config.icon || React.createElement(IconExclamationCircleFill$1, null)), _config.title);\n  }\n  return _config;\n};\nfunction confirm(config2, renderFunc) {\n  var div = document.createElement(\"div\");\n  document.body.appendChild(div);\n  var configProviderProps = getConfigProviderProps();\n  function render(props) {\n    ReactDOM.render(React.createElement(ConfigProvider, __assign$h({}, configProviderProps), React.createElement(ConfirmModal, __assign$h({}, props, { onCancel }))), div);\n  }\n  var renderFunction = renderFunc || render;\n  var modalConfig2 = __assign$h(__assign$h({}, config2), { visible: false });\n  var onOk = function() {\n    var ret;\n    var _onOk = config2.onOk || config2.onConfirm;\n    if (_onOk) {\n      ret = _onOk();\n    }\n    if (ret && ret.then) {\n      modalConfig2.confirmLoading = true;\n      renderFunction(modalConfig2);\n      ret.then(function() {\n        onCancel(true);\n      }, function(e) {\n        console.error(e);\n        modalConfig2.confirmLoading = false;\n        renderFunction(modalConfig2);\n      });\n    }\n    if (!ret) {\n      onCancel(true);\n    }\n  };\n  modalConfig2.onOk = onOk;\n  modalConfig2 = normalizeConfig(modalConfig2);\n  modalConfig2.visible = true;\n  renderFunction(modalConfig2);\n  function destroy() {\n    var unmountEle = ReactDOM.unmountComponentAtNode(div);\n    if (unmountEle && div.parentNode) {\n      div.parentNode.removeChild(div);\n    }\n    for (var i = 0; i < destroyList.length; i++) {\n      var fn = destroyList[i];\n      if (fn === close) {\n        destroyList.splice(i, 1);\n        break;\n      }\n    }\n  }\n  function onCancel(isOnOk) {\n    !isOnOk && config2.onCancel && config2.onCancel();\n    modalConfig2.visible = false;\n    modalConfig2.afterClose = function() {\n      config2.afterClose && config2.afterClose();\n      destroy();\n    };\n    renderFunction(modalConfig2);\n  }\n  function update(newConfig) {\n    modalConfig2 = __assign$h(__assign$h(__assign$h({}, modalConfig2), { title: config2.title }), newConfig);\n    modalConfig2 = normalizeConfig(modalConfig2);\n    renderFunction(modalConfig2);\n  }\n  function close() {\n    modalConfig2.visible = false;\n    modalConfig2.afterClose = function() {\n      config2.afterClose && config2.afterClose();\n      destroy();\n    };\n    renderFunction(modalConfig2);\n  }\n  destroyList.push(close);\n  return {\n    close,\n    update\n  };\n}\nvar __read$n = globalThis && globalThis.__read || function(o, n2) {\n  var m2 = typeof Symbol === \"function\" && o[Symbol.iterator];\n  if (!m2)\n    return o;\n  var i = m2.call(o), r2, ar = [], e;\n  try {\n    while ((n2 === void 0 || n2-- > 0) && !(r2 = i.next()).done)\n      ar.push(r2.value);\n  } catch (error) {\n    e = { error };\n  } finally {\n    try {\n      if (r2 && !r2.done && (m2 = i[\"return\"]))\n        m2.call(i);\n    } finally {\n      if (e)\n        throw e.error;\n    }\n  }\n  return ar;\n};\nvar __spreadArray$5 = globalThis && globalThis.__spreadArray || function(to, from, pack) {\n  if (pack || arguments.length === 2)\n    for (var i = 0, l2 = from.length, ar; i < l2; i++) {\n      if (ar || !(i in from)) {\n        if (!ar)\n          ar = Array.prototype.slice.call(from, 0, i);\n        ar[i] = from[i];\n      }\n    }\n  return to.concat(ar || Array.prototype.slice.call(from));\n};\nvar ContextHolderElement = react.exports.forwardRef(function(_props, ref) {\n  var _a = __read$n(react.exports.useState([]), 2), instances = _a[0], setInstances = _a[1];\n  function addInstance2(ins) {\n    setInstances(function(originInstances) {\n      return __spreadArray$5(__spreadArray$5([], __read$n(originInstances), false), [ins], false);\n    });\n  }\n  function removeInstance(ins) {\n    setInstances(function(originInstances) {\n      return originInstances.filter(function(originIns) {\n        return ins !== originIns;\n      });\n    });\n  }\n  react.exports.useImperativeHandle(ref, function() {\n    return {\n      addInstance: addInstance2,\n      removeInstance\n    };\n  });\n  return React.createElement(React.Fragment, null, instances);\n});\nvar ContextHolderElement$1 = ContextHolderElement;\nvar __assign$g = globalThis && globalThis.__assign || function() {\n  __assign$g = Object.assign || function(t2) {\n    for (var s, i = 1, n2 = arguments.length; i < n2; i++) {\n      s = arguments[i];\n      for (var p2 in s)\n        if (Object.prototype.hasOwnProperty.call(s, p2))\n          t2[p2] = s[p2];\n    }\n    return t2;\n  };\n  return __assign$g.apply(this, arguments);\n};\nvar __read$m = globalThis && globalThis.__read || function(o, n2) {\n  var m2 = typeof Symbol === \"function\" && o[Symbol.iterator];\n  if (!m2)\n    return o;\n  var i = m2.call(o), r2, ar = [], e;\n  try {\n    while ((n2 === void 0 || n2-- > 0) && !(r2 = i.next()).done)\n      ar.push(r2.value);\n  } catch (error) {\n    e = { error };\n  } finally {\n    try {\n      if (r2 && !r2.done && (m2 = i[\"return\"]))\n        m2.call(i);\n    } finally {\n      if (e)\n        throw e.error;\n    }\n  }\n  return ar;\n};\nfunction HookModal(props, ref) {\n  var _a = __read$m(react.exports.useState(true), 2), visible = _a[0], setVisible = _a[1];\n  var _b = __read$m(react.exports.useState(props), 2), config2 = _b[0], setConfig = _b[1];\n  react.exports.useImperativeHandle(ref, function() {\n    return {\n      update: setConfig,\n      close: function() {\n        setVisible(false);\n      }\n    };\n  });\n  function onOk() {\n    var ret = config2.onOk && config2.onOk();\n    if (ret && ret.then) {\n      setConfig(__assign$g(__assign$g({}, config2), { confirmLoading: true }));\n      ret.then(function() {\n        setVisible(false);\n      }, function(e) {\n        console.error(e);\n        setConfig(__assign$g(__assign$g({}, config2), { confirmLoading: false }));\n      });\n    }\n    if (!ret) {\n      setVisible(false);\n    }\n  }\n  function onCancel() {\n    config2.onCancel && config2.onCancel();\n    setVisible(false);\n  }\n  return React.createElement(Modal$1, __assign$g({}, config2, { simple: true, visible, onOk, onCancel, unmountOnExit: true }), config2.content);\n}\nvar HookModal$1 = react.exports.forwardRef(HookModal);\nvar __assign$f = globalThis && globalThis.__assign || function() {\n  __assign$f = Object.assign || function(t2) {\n    for (var s, i = 1, n2 = arguments.length; i < n2; i++) {\n      s = arguments[i];\n      for (var p2 in s)\n        if (Object.prototype.hasOwnProperty.call(s, p2))\n          t2[p2] = s[p2];\n    }\n    return t2;\n  };\n  return __assign$f.apply(this, arguments);\n};\nfunction useModal() {\n  var contextHolderRef = react.exports.createRef();\n  var holderEle = React.createElement(ContextHolderElement$1, { ref: contextHolderRef });\n  var uuid = 0;\n  function addNewModal(config2) {\n    var _a;\n    uuid += 1;\n    var modalRef = react.exports.createRef();\n    function afterClose() {\n      config2.afterClose && config2.afterClose();\n      removeModalInstance();\n    }\n    var simpleModal = React.createElement(HookModal$1, __assign$f({ key: uuid, ref: modalRef }, normalizeConfig(config2), { afterClose }));\n    contextHolderRef.current.addInstance(simpleModal);\n    function removeModalInstance() {\n      contextHolderRef.current.removeInstance(simpleModal);\n    }\n    function close() {\n      modalRef.current.close();\n    }\n    destroyList.push(close);\n    return {\n      close,\n      update: (_a = modalRef.current) === null || _a === void 0 ? void 0 : _a.update\n    };\n  }\n  var modalFuncs = {\n    confirm: function(config2) {\n      return addNewModal(__assign$f({}, config2));\n    }\n  };\n  [\"info\", \"success\", \"warning\", \"error\"].forEach(function(type) {\n    modalFuncs[type] = function(config2) {\n      return addNewModal(__assign$f(__assign$f({}, config2), { isNotice: true, noticeType: type }));\n    };\n  });\n  return [modalFuncs, holderEle];\n}\nvar __assign$e = globalThis && globalThis.__assign || function() {\n  __assign$e = Object.assign || function(t2) {\n    for (var s, i = 1, n2 = arguments.length; i < n2; i++) {\n      s = arguments[i];\n      for (var p2 in s)\n        if (Object.prototype.hasOwnProperty.call(s, p2))\n          t2[p2] = s[p2];\n    }\n    return t2;\n  };\n  return __assign$e.apply(this, arguments);\n};\nvar __rest$5 = globalThis && globalThis.__rest || function(s, e) {\n  var t2 = {};\n  for (var p2 in s)\n    if (Object.prototype.hasOwnProperty.call(s, p2) && e.indexOf(p2) < 0)\n      t2[p2] = s[p2];\n  if (s != null && typeof Object.getOwnPropertySymbols === \"function\")\n    for (var i = 0, p2 = Object.getOwnPropertySymbols(s); i < p2.length; i++) {\n      if (e.indexOf(p2[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p2[i]))\n        t2[p2[i]] = s[p2[i]];\n    }\n  return t2;\n};\nvar __read$l = globalThis && globalThis.__read || function(o, n2) {\n  var m2 = typeof Symbol === \"function\" && o[Symbol.iterator];\n  if (!m2)\n    return o;\n  var i = m2.call(o), r2, ar = [], e;\n  try {\n    while ((n2 === void 0 || n2-- > 0) && !(r2 = i.next()).done)\n      ar.push(r2.value);\n  } catch (error) {\n    e = { error };\n  } finally {\n    try {\n      if (r2 && !r2.done && (m2 = i[\"return\"]))\n        m2.call(i);\n    } finally {\n      if (e)\n        throw e.error;\n    }\n  }\n  return ar;\n};\nvar cursorPosition = null;\nif (!isServerRendering) {\n  document.documentElement.addEventListener(\"click\", function(e) {\n    cursorPosition = {\n      left: e.clientX,\n      top: e.clientY\n    };\n    setTimeout(function() {\n      cursorPosition = null;\n    }, 100);\n  }, true);\n}\nvar defaultProps$2 = {\n  mask: true,\n  maskClosable: true,\n  mountOnEnter: true,\n  escToExit: true,\n  getPopupContainer: function() {\n    return document.body;\n  },\n  alignCenter: true\n};\nfunction Modal(baseProps, ref) {\n  var _a, _b;\n  var _c;\n  var context = react.exports.useContext(ConfigContext);\n  var props = useMergeProps(baseProps, defaultProps$2, (_c = context.componentConfig) === null || _c === void 0 ? void 0 : _c.Modal);\n  var className = props.className, style = props.style, visible = props.visible, simple = props.simple, title = props.title, children = props.children, cancelText = props.cancelText, okText = props.okText, okButtonProps = props.okButtonProps, cancelButtonProps = props.cancelButtonProps, _d = props.getPopupContainer, getPopupContainer = _d === void 0 ? function() {\n    return document.body;\n  } : _d, footer = props.footer, afterClose = props.afterClose, confirmLoading = props.confirmLoading, mountOnEnter = props.mountOnEnter, unmountOnExit = props.unmountOnExit, afterOpen = props.afterOpen, hideCancel = props.hideCancel, autoFocus = props.autoFocus, focusLock = props.focusLock, maskClosable = props.maskClosable, mask = props.mask, alignCenter = props.alignCenter, getChildrenPopupContainer = props.getChildrenPopupContainer, wrapClassName = props.wrapClassName, escToExit = props.escToExit, modalRender = props.modalRender, maskStyle = props.maskStyle, wrapStyle = props.wrapStyle, closeIcon = props.closeIcon, rest = __rest$5(props, [\"className\", \"style\", \"visible\", \"simple\", \"title\", \"children\", \"cancelText\", \"okText\", \"okButtonProps\", \"cancelButtonProps\", \"getPopupContainer\", \"footer\", \"afterClose\", \"confirmLoading\", \"mountOnEnter\", \"unmountOnExit\", \"afterOpen\", \"hideCancel\", \"autoFocus\", \"focusLock\", \"maskClosable\", \"mask\", \"alignCenter\", \"getChildrenPopupContainer\", \"wrapClassName\", \"escToExit\", \"modalRender\", \"maskStyle\", \"wrapStyle\", \"closeIcon\"]);\n  var modalWrapperRef = react.exports.useRef(null);\n  var contentWrapper = react.exports.useRef(null);\n  var keyboardEventOn = react.exports.useRef(false);\n  var _e = __read$l(react.exports.useState(visible), 2), wrapperVisible = _e[0], setWrapperVisible = _e[1];\n  var _f = __read$l(react.exports.useState(), 2), popupZIndex = _f[0], setPopupZIndex = _f[1];\n  var cursorPositionRef = react.exports.useRef(null);\n  var haveOriginTransformOrigin = react.exports.useRef(false);\n  var maskClickRef = react.exports.useRef(false);\n  var _g = __read$l(useMergeValue(false, {\n    defaultValue: false,\n    value: confirmLoading\n  }), 2), loading = _g[0], setLoading = _g[1];\n  var prefixCls2 = context.getPrefixCls(\"modal\", props.prefixCls);\n  var locale2 = context.locale;\n  var defaultClosable = !simple;\n  var closable = \"closable\" in props ? props.closable : defaultClosable;\n  var getContainer = react.exports.useCallback(function() {\n    return reactDom.exports.findDOMNode(getPopupContainer());\n  }, [getPopupContainer]);\n  useOverflowHidden(getContainer, { hidden: visible && mask });\n  var onCancel = function() {\n    props.onCancel && props.onCancel();\n  };\n  var inExit = react.exports.useRef(false);\n  var onClickMask = function(e) {\n    if (!maskClickRef.current)\n      return;\n    maskClickRef.current = false;\n    if (!inExit.current && maskClosable && mask && e.target === e.currentTarget) {\n      setTimeout(function() {\n        onCancel();\n      }, 100);\n    }\n  };\n  var onConfirmModal = function(e) {\n    var onConfirm = props.onConfirm, onOk = props.onOk;\n    var _onConfirm = onOk || onConfirm;\n    var ret;\n    if (_onConfirm) {\n      ret = _onConfirm(e);\n    }\n    if (ret && ret.then) {\n      setLoading(true);\n      ret.then(function() {\n        setLoading(false);\n      }, function(e2) {\n        setLoading(false);\n        console.error(e2);\n      });\n    }\n  };\n  react.exports.useEffect(function() {\n    var onKeyDown = function(e) {\n      if (escToExit && e && e.key === Esc.key) {\n        onCancel();\n      }\n    };\n    if (visible && !keyboardEventOn.current) {\n      keyboardEventOn.current = true;\n      on(document, \"keydown\", onKeyDown);\n    }\n    return function() {\n      keyboardEventOn.current = false;\n      off(document, \"keydown\", onKeyDown);\n    };\n  }, [visible, escToExit]);\n  react.exports.useEffect(function() {\n    var _a2;\n    if (visible && popupZIndex === void 0) {\n      if (modalWrapperRef.current) {\n        var zIndex = +((_a2 = window.getComputedStyle(modalWrapperRef.current, null)) === null || _a2 === void 0 ? void 0 : _a2.zIndex);\n        if (!isNaN(zIndex)) {\n          setPopupZIndex(zIndex + 1);\n        }\n      }\n    }\n  }, [visible, popupZIndex]);\n  var renderFooter = function() {\n    if (footer === null)\n      return;\n    var cancelButtonNode = React.createElement(Button$1, __assign$e({ onClick: onCancel }, cancelButtonProps), cancelText || locale2.Modal.cancelText);\n    var okButtonNode = React.createElement(Button$1, __assign$e({ loading, onClick: onConfirmModal, type: \"primary\" }, okButtonProps), okText || locale2.Modal.okText);\n    var footerContent = footer || React.createElement(React.Fragment, null, !hideCancel && cancelButtonNode, okButtonNode);\n    if (isFunction$3(footer)) {\n      footerContent = footer(cancelButtonNode, okButtonNode);\n    }\n    return React.createElement(\"div\", { className: prefixCls2 + \"-footer\" }, footerContent);\n  };\n  var globalFocusLockConfig = context.focusLock.modal;\n  var globalFocusLock = !!globalFocusLockConfig;\n  var globalAutoFocus = isObject$6(globalFocusLockConfig) && globalFocusLockConfig.autoFocus;\n  var innerFocusLock = focusLock !== void 0 ? focusLock : globalFocusLock;\n  var innerAutoFocus = autoFocus !== void 0 ? autoFocus : globalAutoFocus;\n  var element = React.createElement(ConfigProvider, __assign$e({}, context, { prefixCls: props.prefixCls || context.prefixCls, locale: locale2, zIndex: popupZIndex || 1050, getPopupContainer: function(node) {\n    return typeof getChildrenPopupContainer === \"function\" ? getChildrenPopupContainer(node) : contentWrapper.current;\n  } }), title && React.createElement(\"div\", { className: prefixCls2 + \"-header\" }, React.createElement(\"div\", { className: prefixCls2 + \"-title\" }, title)), React.createElement(\"div\", { ref: contentWrapper, className: prefixCls2 + \"-content\" }, children), renderFooter(), closable && (closeIcon !== void 0 ? React.createElement(\"span\", { onClick: onCancel, className: prefixCls2 + \"-close-icon\" }, closeIcon) : React.createElement(IconHover, { tabIndex: -1, onClick: onCancel, className: prefixCls2 + \"-close-icon\" }, React.createElement(IconClose$1, null))));\n  var modalDom = React.createElement(\"div\", { className: cs$1(prefixCls2, (_a = {}, _a[prefixCls2 + \"-simple\"] = simple, _a), className), style }, innerFocusLock ? React.createElement(FocusLock, { disabled: !visible, autoFocus: innerAutoFocus }, element) : element);\n  var setTransformOrigin = function(e) {\n    if (haveOriginTransformOrigin.current)\n      return;\n    var transformOrigin = \"\";\n    if (cursorPositionRef.current) {\n      var eRect = e.getBoundingClientRect();\n      var _a2 = cursorPositionRef.current, left = _a2.left, top_1 = _a2.top;\n      transformOrigin = left - eRect.left + \"px \" + (top_1 - eRect.top) + \"px\";\n    }\n    e.style.transformOrigin = transformOrigin;\n  };\n  return React.createElement(Portal, { visible, forceRender: !mountOnEnter, getContainer: getPopupContainer }, React.createElement(\"div\", { ref }, mask ? React.createElement(CSSTransition$3, { in: visible, timeout: 400, appear: true, mountOnEnter, classNames: \"fadeModal\", unmountOnExit, onEnter: function(e) {\n    e.style.display = \"block\";\n  }, onExited: function(e) {\n    e.style.display = \"none\";\n  } }, React.createElement(\"div\", { className: prefixCls2 + \"-mask\", style: maskStyle })) : null, React.createElement(\"div\", __assign$e({ role: \"dialog\", \"aria-hidden\": \"true\" }, omit(rest, [\n    \"content\",\n    \"icon\",\n    \"showIcon\",\n    \"isNotice\",\n    \"noticeType\",\n    \"onCancel\",\n    \"onOk\",\n    \"onConfirm\",\n    \"closable\",\n    \"prefixCls\"\n  ]), { ref: modalWrapperRef, className: cs$1(prefixCls2 + \"-wrapper\", (_b = {}, _b[prefixCls2 + \"-wrapper-no-mask\"] = !mask, _b[prefixCls2 + \"-wrapper-align-center\"] = alignCenter, _b), wrapClassName), style: __assign$e(__assign$e({}, wrapStyle || {}), {\n    display: visible || wrapperVisible ? \"block\" : \"none\",\n    overflow: !visible && wrapperVisible ? \"hidden\" : \"\"\n  }), onMouseDown: function(e) {\n    maskClickRef.current = e.target === e.currentTarget;\n  }, onClick: onClickMask }), React.createElement(CSSTransition$3, { in: visible, timeout: 400, appear: true, classNames: \"zoomModal\", unmountOnExit, mountOnEnter, onEnter: function(e) {\n    setWrapperVisible(true);\n    cursorPositionRef.current = cursorPosition;\n    haveOriginTransformOrigin.current = !!e.style.transformOrigin;\n    setTransformOrigin(e);\n  }, onEntered: function(e) {\n    setTransformOrigin(e);\n    cursorPositionRef.current = null;\n    afterOpen && afterOpen();\n  }, onExit: function() {\n    inExit.current = true;\n  }, onExited: function(e) {\n    setWrapperVisible(false);\n    setTransformOrigin(e);\n    afterClose && afterClose();\n    inExit.current = false;\n  } }, React.cloneElement(isFunction$3(modalRender) ? modalRender(modalDom) : modalDom, {\n    onMouseDown: function() {\n      maskClickRef.current = false;\n    },\n    onMouseUp: function() {\n      maskClickRef.current = false;\n    }\n  })))));\n}\nvar ExportedModalComponent = react.exports.forwardRef(Modal);\nExportedModalComponent.displayName = \"Modal\";\nExportedModalComponent.config = setModalConfig;\nExportedModalComponent.confirm = function(props) {\n  return confirm(props);\n};\nExportedModalComponent.useModal = useModal;\n[\"info\", \"success\", \"warning\", \"error\"].forEach(function(type) {\n  ExportedModalComponent[type] = function(props) {\n    return confirm(__assign$e(__assign$e({}, props), { isNotice: true, noticeType: type }));\n  };\n});\nExportedModalComponent.destroyAll = function() {\n  while (destroyList.length) {\n    var close_1 = destroyList.pop();\n    if (close_1) {\n      close_1();\n    }\n  }\n};\nvar Modal$1 = ExportedModalComponent;\nvar __assign$d = globalThis && globalThis.__assign || function() {\n  __assign$d = Object.assign || function(t2) {\n    for (var s, i = 1, n2 = arguments.length; i < n2; i++) {\n      s = arguments[i];\n      for (var p2 in s)\n        if (Object.prototype.hasOwnProperty.call(s, p2))\n          t2[p2] = s[p2];\n    }\n    return t2;\n  };\n  return __assign$d.apply(this, arguments);\n};\nvar __rest$4 = globalThis && globalThis.__rest || function(s, e) {\n  var t2 = {};\n  for (var p2 in s)\n    if (Object.prototype.hasOwnProperty.call(s, p2) && e.indexOf(p2) < 0)\n      t2[p2] = s[p2];\n  if (s != null && typeof Object.getOwnPropertySymbols === \"function\")\n    for (var i = 0, p2 = Object.getOwnPropertySymbols(s); i < p2.length; i++) {\n      if (e.indexOf(p2[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p2[i]))\n        t2[p2[i]] = s[p2[i]];\n    }\n  return t2;\n};\nvar __read$k = globalThis && globalThis.__read || function(o, n2) {\n  var m2 = typeof Symbol === \"function\" && o[Symbol.iterator];\n  if (!m2)\n    return o;\n  var i = m2.call(o), r2, ar = [], e;\n  try {\n    while ((n2 === void 0 || n2-- > 0) && !(r2 = i.next()).done)\n      ar.push(r2.value);\n  } catch (error) {\n    e = { error };\n  } finally {\n    try {\n      if (r2 && !r2.done && (m2 = i[\"return\"]))\n        m2.call(i);\n    } finally {\n      if (e)\n        throw e.error;\n    }\n  }\n  return ar;\n};\nvar defaultProps$1 = {\n  position: \"top\",\n  okType: \"primary\",\n  icon: React.createElement(IconExclamationCircleFill$1, null),\n  blurToHide: true,\n  unmountOnExit: true,\n  trigger: \"click\",\n  escToClose: true\n};\nfunction Popconfirm(baseProps, ref) {\n  var _a = react.exports.useContext(ConfigContext), getPrefixCls = _a.getPrefixCls, locale2 = _a.locale, componentConfig2 = _a.componentConfig;\n  var props = useMergeProps(baseProps, defaultProps$1, componentConfig2 === null || componentConfig2 === void 0 ? void 0 : componentConfig2.Popconfirm);\n  var style = props.style, className = props.className, children = props.children, position = props.position, getPopupContainer = props.getPopupContainer, blurToHide = props.blurToHide, unmountOnExit = props.unmountOnExit, trigger = props.trigger, escToClose = props.escToClose, onVisibleChange = props.onVisibleChange, triggerProps = props.triggerProps, title = props.title, icon2 = props.icon, okText = props.okText, cancelText = props.cancelText, okType = props.okType, okButtonProps = props.okButtonProps, cancelButtonProps = props.cancelButtonProps, autoFocus = props.autoFocus, focusLock = props.focusLock, rest = __rest$4(props, [\"style\", \"className\", \"children\", \"position\", \"getPopupContainer\", \"blurToHide\", \"unmountOnExit\", \"trigger\", \"escToClose\", \"onVisibleChange\", \"triggerProps\", \"title\", \"icon\", \"okText\", \"cancelText\", \"okType\", \"okButtonProps\", \"cancelButtonProps\", \"autoFocus\", \"focusLock\"]);\n  var _b = __read$k(useMergeValue(false, {\n    defaultValue: props.defaultPopupVisible,\n    value: props.popupVisible\n  }), 2), popupVisible = _b[0], setPopupVisible = _b[1];\n  var _c = __read$k(react.exports.useState(false), 2), buttonLoading = _c[0], setLoading = _c[1];\n  var prefixCls2 = getPrefixCls(\"popconfirm\");\n  var handleVisibleChange = function(visible) {\n    if (!(\"popupVisible\" in props)) {\n      setPopupVisible(visible);\n    }\n    if (triggerProps && triggerProps.onVisibleChange) {\n      triggerProps.onVisibleChange(visible);\n    }\n    onVisibleChange && onVisibleChange(visible);\n  };\n  var closePopconfirm = function() {\n    handleVisibleChange(false);\n  };\n  var onCancelPopconfirm = function() {\n    closePopconfirm();\n    props.onCancel && props.onCancel();\n  };\n  var onConfirmPopconfirm = function() {\n    var _onConfirm = props.onOk || props.onConfirm;\n    var ret;\n    if (_onConfirm) {\n      ret = _onConfirm();\n    }\n    if (ret && ret.then) {\n      setLoading(true);\n      ret.then(function() {\n        closePopconfirm();\n      }, function(e) {\n        setLoading(false);\n        console.error(e);\n      });\n    }\n    if (!ret) {\n      closePopconfirm();\n    }\n  };\n  var renderPopconfirmContent = function() {\n    var element = React.createElement(React.Fragment, null, React.createElement(Button$1, __assign$d({ onClick: onCancelPopconfirm, size: \"mini\" }, cancelButtonProps), cancelText || locale2.Popconfirm.cancelText), React.createElement(Button$1, __assign$d({ loading: buttonLoading, onClick: onConfirmPopconfirm, size: \"mini\", type: okType }, okButtonProps), okText || locale2.Popconfirm.okText));\n    return React.createElement(\"div\", { className: prefixCls2 + \"-wrapper\" }, React.createElement(\"div\", { className: prefixCls2 + \"-title\" }, icon2 && React.createElement(\"span\", { className: prefixCls2 + \"-title-icon\" }, icon2), React.createElement(\"div\", { className: prefixCls2 + \"-title-text\" }, title)), React.createElement(\"div\", { className: prefixCls2 + \"-btn\" }, focusLock ? React.createElement(FocusLock, { disabled: !popupVisible, autoFocus: !!autoFocus }, element) : element));\n  };\n  react.exports.useEffect(function() {\n    if (!popupVisible && buttonLoading) {\n      setLoading(false);\n    }\n    return function() {\n      setLoading(false);\n    };\n  }, [popupVisible]);\n  return React.createElement(Tooltip$1, __assign$d({}, rest, { ref, style: __assign$d({ maxWidth: 350 }, style), className, prefixCls: prefixCls2, getPopupContainer, position, trigger, escToClose, popupVisible, content: renderPopconfirmContent(), unmountOnExit, blurToHide, popupHoverStay: true, triggerProps, onVisibleChange: handleVisibleChange, childrenPrefix: prefixCls2 }), typeof children === \"string\" ? React.createElement(\"span\", null, children) : children);\n}\nvar PopconfirmComponent = react.exports.forwardRef(Popconfirm);\nPopconfirmComponent.displayName = \"Popconfirm\";\nvar Popconfirm$1 = PopconfirmComponent;\nvar __assign$c = globalThis && globalThis.__assign || function() {\n  __assign$c = Object.assign || function(t2) {\n    for (var s, i = 1, n2 = arguments.length; i < n2; i++) {\n      s = arguments[i];\n      for (var p2 in s)\n        if (Object.prototype.hasOwnProperty.call(s, p2))\n          t2[p2] = s[p2];\n    }\n    return t2;\n  };\n  return __assign$c.apply(this, arguments);\n};\nvar __rest$3 = globalThis && globalThis.__rest || function(s, e) {\n  var t2 = {};\n  for (var p2 in s)\n    if (Object.prototype.hasOwnProperty.call(s, p2) && e.indexOf(p2) < 0)\n      t2[p2] = s[p2];\n  if (s != null && typeof Object.getOwnPropertySymbols === \"function\")\n    for (var i = 0, p2 = Object.getOwnPropertySymbols(s); i < p2.length; i++) {\n      if (e.indexOf(p2[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p2[i]))\n        t2[p2[i]] = s[p2[i]];\n    }\n  return t2;\n};\nvar defaultProps = {\n  size: \"small\",\n  direction: \"horizontal\"\n};\nfunction Space(baseProps, ref) {\n  var _a;\n  var _b = react.exports.useContext(ConfigContext), getPrefixCls = _b.getPrefixCls, componentConfig2 = _b.componentConfig;\n  var props = useMergeProps(baseProps, defaultProps, componentConfig2 === null || componentConfig2 === void 0 ? void 0 : componentConfig2.Space);\n  var className = props.className, style = props.style, children = props.children, size = props.size, direction = props.direction, align = props.align, wrap2 = props.wrap, split = props.split, rest = __rest$3(props, [\"className\", \"style\", \"children\", \"size\", \"direction\", \"align\", \"wrap\", \"split\"]);\n  var prefixCls2 = getPrefixCls(\"space\");\n  var innerAlign = align || (direction === \"horizontal\" ? \"center\" : \"\");\n  var classNames = cs$1(prefixCls2, (_a = {}, _a[prefixCls2 + \"-\" + direction] = direction, _a[prefixCls2 + \"-align-\" + innerAlign] = innerAlign, _a[prefixCls2 + \"-wrap\"] = wrap2, _a), className);\n  function getMargin(size2) {\n    if (isNumber$1(size2)) {\n      return size2;\n    }\n    switch (size2) {\n      case \"mini\":\n        return 4;\n      case \"small\":\n        return 8;\n      case \"medium\":\n        return 16;\n      case \"large\":\n        return 24;\n      default:\n        return 8;\n    }\n  }\n  var childrenList = React.Children.toArray(children);\n  function getMarginStyle(index2) {\n    var _a2;\n    var isLastOne = childrenList.length === index2 + 1;\n    if (typeof size === \"string\" || typeof size === \"number\") {\n      var margin = getMargin(size);\n      if (wrap2) {\n        return isLastOne ? { marginBottom: margin } : {\n          marginRight: margin,\n          marginBottom: margin\n        };\n      }\n      return !isLastOne ? (_a2 = {}, _a2[direction === \"vertical\" ? \"marginBottom\" : \"marginRight\"] = margin, _a2) : {};\n    }\n    if (isArray$5(size)) {\n      var marginRight = getMargin(size[0]);\n      var marginBottom = getMargin(size[1]);\n      if (wrap2) {\n        return isLastOne ? { marginBottom } : {\n          marginRight,\n          marginBottom\n        };\n      }\n      if (direction === \"vertical\") {\n        return { marginBottom };\n      }\n      return { marginRight };\n    }\n  }\n  return React.createElement(\"div\", __assign$c({ ref, className: classNames, style }, rest), childrenList.map(function(child, index2) {\n    var shouldRenderSplit = split !== void 0 && split !== null && index2 > 0;\n    return React.createElement(react.exports.Fragment, { key: index2 }, shouldRenderSplit && React.createElement(\"div\", { className: prefixCls2 + \"-item-split\" }, split), React.createElement(\"div\", { className: prefixCls2 + \"-item\", style: getMarginStyle(index2) }, child));\n  }));\n}\nvar SpaceComponent = react.exports.forwardRef(Space);\nSpaceComponent.displayName = \"Space\";\nvar Space$1 = SpaceComponent;\nfunction Typography$2(props, ref) {\n  var getPrefixCls = react.exports.useContext(ConfigContext).getPrefixCls;\n  var prefixCls2 = getPrefixCls(\"typography\");\n  var className = props.className, style = props.style, children = props.children;\n  var classNames = cs$1(prefixCls2, className);\n  return React.createElement(\"article\", { ref, style, className: classNames }, children);\n}\nvar TypographyComponent = react.exports.forwardRef(Typography$2);\nTypographyComponent.displayName = \"Typography\";\nvar OriginTypography = TypographyComponent;\nvar __awaiter$6 = globalThis && globalThis.__awaiter || function(thisArg, _arguments, P2, generator) {\n  function adopt(value) {\n    return value instanceof P2 ? value : new P2(function(resolve) {\n      resolve(value);\n    });\n  }\n  return new (P2 || (P2 = Promise))(function(resolve, reject) {\n    function fulfilled(value) {\n      try {\n        step(generator.next(value));\n      } catch (e) {\n        reject(e);\n      }\n    }\n    function rejected(value) {\n      try {\n        step(generator[\"throw\"](value));\n      } catch (e) {\n        reject(e);\n      }\n    }\n    function step(result) {\n      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);\n    }\n    step((generator = generator.apply(thisArg, _arguments || [])).next());\n  });\n};\nvar __generator$6 = globalThis && globalThis.__generator || function(thisArg, body) {\n  var _ = { label: 0, sent: function() {\n    if (t2[0] & 1)\n      throw t2[1];\n    return t2[1];\n  }, trys: [], ops: [] }, f, y2, t2, g;\n  return g = { next: verb(0), \"throw\": verb(1), \"return\": verb(2) }, typeof Symbol === \"function\" && (g[Symbol.iterator] = function() {\n    return this;\n  }), g;\n  function verb(n2) {\n    return function(v2) {\n      return step([n2, v2]);\n    };\n  }\n  function step(op) {\n    if (f)\n      throw new TypeError(\"Generator is already executing.\");\n    while (_)\n      try {\n        if (f = 1, y2 && (t2 = op[0] & 2 ? y2[\"return\"] : op[0] ? y2[\"throw\"] || ((t2 = y2[\"return\"]) && t2.call(y2), 0) : y2.next) && !(t2 = t2.call(y2, op[1])).done)\n          return t2;\n        if (y2 = 0, t2)\n          op = [op[0] & 2, t2.value];\n        switch (op[0]) {\n          case 0:\n          case 1:\n            t2 = op;\n            break;\n          case 4:\n            _.label++;\n            return { value: op[1], done: false };\n          case 5:\n            _.label++;\n            y2 = op[1];\n            op = [0];\n            continue;\n          case 7:\n            op = _.ops.pop();\n            _.trys.pop();\n            continue;\n          default:\n            if (!(t2 = _.trys, t2 = t2.length > 0 && t2[t2.length - 1]) && (op[0] === 6 || op[0] === 2)) {\n              _ = 0;\n              continue;\n            }\n            if (op[0] === 3 && (!t2 || op[1] > t2[0] && op[1] < t2[3])) {\n              _.label = op[1];\n              break;\n            }\n            if (op[0] === 6 && _.label < t2[1]) {\n              _.label = t2[1];\n              t2 = op;\n              break;\n            }\n            if (t2 && _.label < t2[2]) {\n              _.label = t2[2];\n              _.ops.push(op);\n              break;\n            }\n            if (t2[2])\n              _.ops.pop();\n            _.trys.pop();\n            continue;\n        }\n        op = body.call(thisArg, _);\n      } catch (e) {\n        op = [6, e];\n        y2 = 0;\n      } finally {\n        f = t2 = 0;\n      }\n    if (op[0] & 5)\n      throw op[1];\n    return { value: op[0] ? op[1] : void 0, done: true };\n  }\n};\nfunction clipboard(text) {\n  return __awaiter$6(this, void 0, void 0, function() {\n    var err_1, span, selection, range, success;\n    return __generator$6(this, function(_a) {\n      switch (_a.label) {\n        case 0:\n          if (!(navigator.clipboard && navigator.clipboard.writeText))\n            return [3, 4];\n          _a.label = 1;\n        case 1:\n          _a.trys.push([1, 3, , 4]);\n          return [4, navigator.clipboard.writeText(text)];\n        case 2:\n          _a.sent();\n          return [2];\n        case 3:\n          err_1 = _a.sent();\n          console.error(err_1 !== null && err_1 !== void 0 ? err_1 : new DOMException(\"The request is not allowed\", \"NotAllowedError\"));\n          return [3, 4];\n        case 4:\n          span = document.createElement(\"span\");\n          span.textContent = text;\n          span.style.whiteSpace = \"pre\";\n          document.body.appendChild(span);\n          selection = window.getSelection();\n          range = window.document.createRange();\n          selection.removeAllRanges();\n          range.selectNode(span);\n          selection.addRange(range);\n          success = false;\n          try {\n            success = window.document.execCommand(\"copy\");\n          } catch (err) {\n            console.log(\"error\", err);\n          }\n          selection.removeAllRanges();\n          window.document.body.removeChild(span);\n          return [2, success ? Promise.resolve() : Promise.reject(new DOMException(\"The request is not allowed\", \"NotAllowedError\"))];\n      }\n    });\n  });\n}\nfunction ownKeys$f(object, enumerableOnly) {\n  var keys = Object.keys(object);\n  if (Object.getOwnPropertySymbols) {\n    var symbols = Object.getOwnPropertySymbols(object);\n    if (enumerableOnly) {\n      symbols = symbols.filter(function(sym) {\n        return Object.getOwnPropertyDescriptor(object, sym).enumerable;\n      });\n    }\n    keys.push.apply(keys, symbols);\n  }\n  return keys;\n}\nfunction _objectSpread$f(target2) {\n  for (var i = 1; i < arguments.length; i++) {\n    var source2 = arguments[i] != null ? arguments[i] : {};\n    if (i % 2) {\n      ownKeys$f(Object(source2), true).forEach(function(key) {\n        _defineProperty(target2, key, source2[key]);\n      });\n    } else if (Object.getOwnPropertyDescriptors) {\n      Object.defineProperties(target2, Object.getOwnPropertyDescriptors(source2));\n    } else {\n      ownKeys$f(Object(source2)).forEach(function(key) {\n        Object.defineProperty(target2, key, Object.getOwnPropertyDescriptor(source2, key));\n      });\n    }\n  }\n  return target2;\n}\nfunction IconCopyComponent(iconProps, ref) {\n  var _useContext = react.exports.useContext(IconContext), prefixCls2 = _useContext.prefixCls;\n  var spin = iconProps.spin, className = iconProps.className;\n  var props = _objectSpread$f(_objectSpread$f({\n    ref\n  }, iconProps), {}, {\n    className: \"\".concat(className ? className + \" \" : \"\").concat(prefixCls2, \"-icon \").concat(prefixCls2, \"-icon-copy\")\n  });\n  if (spin) {\n    props.className = \"\".concat(props.className, \" \").concat(prefixCls2, \"-icon-loading\");\n  }\n  delete props.spin;\n  delete props.isIcon;\n  return /* @__PURE__ */ React.createElement(\"svg\", _extends({\n    fill: \"none\",\n    stroke: \"currentColor\",\n    strokeWidth: \"4\",\n    viewBox: \"0 0 48 48\",\n    width: \"1em\",\n    height: \"1em\"\n  }, props), /* @__PURE__ */ React.createElement(\"path\", {\n    d: \"M20 6h18a2 2 0 0 1 2 2v22M8 16v24c0 1.105.891 2 1.996 2h20.007A1.99 1.99 0 0 0 32 40.008V15.997A1.997 1.997 0 0 0 30 14H10a2 2 0 0 0-2 2Z\"\n  }));\n}\nvar IconCopy = /* @__PURE__ */ React.forwardRef(IconCopyComponent);\nIconCopy.defaultProps = {\n  isIcon: true\n};\nIconCopy.displayName = \"IconCopy\";\nvar IconCopy$1 = IconCopy;\nfunction ownKeys$e(object, enumerableOnly) {\n  var keys = Object.keys(object);\n  if (Object.getOwnPropertySymbols) {\n    var symbols = Object.getOwnPropertySymbols(object);\n    if (enumerableOnly) {\n      symbols = symbols.filter(function(sym) {\n        return Object.getOwnPropertyDescriptor(object, sym).enumerable;\n      });\n    }\n    keys.push.apply(keys, symbols);\n  }\n  return keys;\n}\nfunction _objectSpread$e(target2) {\n  for (var i = 1; i < arguments.length; i++) {\n    var source2 = arguments[i] != null ? arguments[i] : {};\n    if (i % 2) {\n      ownKeys$e(Object(source2), true).forEach(function(key) {\n        _defineProperty(target2, key, source2[key]);\n      });\n    } else if (Object.getOwnPropertyDescriptors) {\n      Object.defineProperties(target2, Object.getOwnPropertyDescriptors(source2));\n    } else {\n      ownKeys$e(Object(source2)).forEach(function(key) {\n        Object.defineProperty(target2, key, Object.getOwnPropertyDescriptor(source2, key));\n      });\n    }\n  }\n  return target2;\n}\nfunction IconEditComponent(iconProps, ref) {\n  var _useContext = react.exports.useContext(IconContext), prefixCls2 = _useContext.prefixCls;\n  var spin = iconProps.spin, className = iconProps.className;\n  var props = _objectSpread$e(_objectSpread$e({\n    ref\n  }, iconProps), {}, {\n    className: \"\".concat(className ? className + \" \" : \"\").concat(prefixCls2, \"-icon \").concat(prefixCls2, \"-icon-edit\")\n  });\n  if (spin) {\n    props.className = \"\".concat(props.className, \" \").concat(prefixCls2, \"-icon-loading\");\n  }\n  delete props.spin;\n  delete props.isIcon;\n  return /* @__PURE__ */ React.createElement(\"svg\", _extends({\n    fill: \"none\",\n    stroke: \"currentColor\",\n    strokeWidth: \"4\",\n    viewBox: \"0 0 48 48\",\n    width: \"1em\",\n    height: \"1em\"\n  }, props), /* @__PURE__ */ React.createElement(\"path\", {\n    d: \"m30.48 19.038 5.733-5.734a1 1 0 0 0 0-1.414l-5.586-5.586a1 1 0 0 0-1.414 0l-5.734 5.734m7 7L15.763 33.754a1 1 0 0 1-.59.286l-6.048.708a1 1 0 0 1-1.113-1.069l.477-6.31a1 1 0 0 1 .29-.631l14.7-14.7m7 7-7-7M6 42h36\"\n  }));\n}\nvar IconEdit = /* @__PURE__ */ React.forwardRef(IconEditComponent);\nIconEdit.defaultProps = {\n  isIcon: true\n};\nIconEdit.displayName = \"IconEdit\";\nvar IconEdit$1 = IconEdit;\nvar isSingleNode = function(child) {\n  return isString$1(child) || isNumber$1(child);\n};\nfunction mergedToString(children) {\n  var mergedResult = [\"\"];\n  React.Children.forEach(children, function(child) {\n    var prevIndex = mergedResult.length - 1;\n    var prevChild = mergedResult[prevIndex];\n    if (isSingleNode(child) && isSingleNode(prevChild)) {\n      mergedResult[prevIndex] = \"\" + prevChild + child;\n    } else if (child && child.props && child.props.children) {\n      mergedResult.push(mergedToString(child.props.children));\n    }\n  });\n  return mergedResult.join(\"\");\n}\nvar __read$j = globalThis && globalThis.__read || function(o, n2) {\n  var m2 = typeof Symbol === \"function\" && o[Symbol.iterator];\n  if (!m2)\n    return o;\n  var i = m2.call(o), r2, ar = [], e;\n  try {\n    while ((n2 === void 0 || n2-- > 0) && !(r2 = i.next()).done)\n      ar.push(r2.value);\n  } catch (error) {\n    e = { error };\n  } finally {\n    try {\n      if (r2 && !r2.done && (m2 = i[\"return\"]))\n        m2.call(i);\n    } finally {\n      if (e)\n        throw e.error;\n    }\n  }\n  return ar;\n};\nfunction Operations(props) {\n  var children = props.children, copyable = props.copyable, editable = props.editable, ellipsis = props.ellipsis, isEllipsis = props.isEllipsis, expanding = props.expanding, setEditing = props.setEditing, onClickExpand = props.onClickExpand, forceShowExpand = props.forceShowExpand, _a = props.currentContext, currentContext = _a === void 0 ? {} : _a;\n  var getPrefixCls = currentContext.getPrefixCls, locale2 = currentContext.locale;\n  var prefixCls2 = getPrefixCls(\"typography\");\n  var _b = __read$j(react.exports.useState(false), 2), isCopied = _b[0], setCopied = _b[1];\n  var copyTimer = react.exports.useRef(null);\n  var copyConfig = isObject$6(copyable) ? copyable : {};\n  var ellipsisConfig = isObject$6(ellipsis) ? ellipsis : {};\n  var editableConfig = isObject$6(editable) ? editable : {};\n  var expandNodes = isArray$5(ellipsisConfig.expandNodes) ? ellipsisConfig.expandNodes : [locale2.Typography.fold, locale2.Typography.unfold];\n  react.exports.useEffect(function() {\n    return function() {\n      clearTimeout(copyTimer.current);\n      copyTimer.current = null;\n    };\n  }, []);\n  function onClickCopy() {\n    if (isCopied)\n      return;\n    var text = copyConfig.text !== void 0 ? copyConfig.text : mergedToString(children);\n    clipboard(text);\n    setCopied(true);\n    copyConfig.onCopy && copyConfig.onCopy(text);\n    copyTimer.current = setTimeout(function() {\n      setCopied(false);\n    }, 3e3);\n  }\n  var tooltips = copyConfig.tooltips || [locale2.Typography.copy, locale2.Typography.copied];\n  var copyElement = copyable && React.createElement(Tooltip$1, { content: isCopied ? tooltips[1] : tooltips[0] }, React.createElement(\"span\", { className: isCopied ? prefixCls2 + \"-operation-copied\" : prefixCls2 + \"-operation-copy\", onClick: onClickCopy }, isCopied ? React.createElement(IconCheckCircleFill$1, null) : copyConfig.icon || React.createElement(IconCopy$1, null)));\n  var editElement = editable && React.createElement(Tooltip$1, { content: locale2.Typography.edit }, React.createElement(\"span\", { className: prefixCls2 + \"-operation-edit\", onClick: function() {\n    editableConfig.onStart && editableConfig.onStart(String(children));\n    setEditing(true);\n  } }, React.createElement(IconEdit$1, null)));\n  var ellipsisElement = forceShowExpand || ellipsisConfig.expandable && isEllipsis ? React.createElement(\"a\", { className: prefixCls2 + \"-operation-expand\", onClick: onClickExpand }, expanding ? expandNodes[0] : expandNodes[1]) : null;\n  return React.createElement(React.Fragment, null, ellipsisElement, editElement, copyElement);\n}\nfunction EditContent(props) {\n  var prefixCls2 = props.prefixCls, children = props.children, setEditing = props.setEditing, editableConfig = props.editableConfig;\n  var className = cs$1(prefixCls2 + \"-typography\", prefixCls2 + \"-edit-content\");\n  var str = mergedToString(children);\n  var input = react.exports.useRef(null);\n  react.exports.useEffect(function() {\n    input.current && input.current.focus && input.current.focus();\n    if (input.current && input.current.dom) {\n      var length_1 = input.current.dom.value.length;\n      input.current.dom.setSelectionRange(length_1, length_1);\n    }\n  }, []);\n  function onEnd() {\n    setEditing(false);\n    editableConfig.onEnd && editableConfig.onEnd(str);\n  }\n  function onChange(value) {\n    editableConfig.onChange && editableConfig.onChange(value);\n  }\n  function onBlur3() {\n    onEnd();\n  }\n  return React.createElement(\"div\", { className }, React.createElement(Input$1.TextArea, { onBlur: onBlur3, ref: input, value: str, autoSize: true, onChange, onPressEnter: onEnd }));\n}\nfunction useResizeObserver(onResize) {\n  var resizeObserver = react.exports.useRef();\n  var destroyObserver = function() {\n    if (resizeObserver.current) {\n      resizeObserver.current.disconnect();\n      resizeObserver.current = null;\n    }\n  };\n  var createObserver = function(elem) {\n    if (elem) {\n      if (resizeObserver.current) {\n        destroyObserver();\n      }\n      resizeObserver.current = new index$f(onResize);\n      resizeObserver.current.observe(elem);\n    }\n  };\n  return {\n    currentOr: resizeObserver.current,\n    cor: createObserver,\n    dor: destroyObserver\n  };\n}\nvar __read$i = globalThis && globalThis.__read || function(o, n2) {\n  var m2 = typeof Symbol === \"function\" && o[Symbol.iterator];\n  if (!m2)\n    return o;\n  var i = m2.call(o), r2, ar = [], e;\n  try {\n    while ((n2 === void 0 || n2-- > 0) && !(r2 = i.next()).done)\n      ar.push(r2.value);\n  } catch (error) {\n    e = { error };\n  } finally {\n    try {\n      if (r2 && !r2.done && (m2 = i[\"return\"]))\n        m2.call(i);\n    } finally {\n      if (e)\n        throw e.error;\n    }\n  }\n  return ar;\n};\nfunction styleToString(style, extraStyle) {\n  if (extraStyle === void 0) {\n    extraStyle = {};\n  }\n  var styleNames = Array.prototype.slice.apply(style);\n  var styleString = styleNames.map(function(name) {\n    return name + \": \" + style.getPropertyValue(name) + \";\";\n  }).join(\"\");\n  var extraStyleString = Object.entries(extraStyle).map(function(_a) {\n    var _b = __read$i(_a, 2), key = _b[0], value = _b[1];\n    return key + \": \" + value + \";\";\n  }).join(\"\");\n  return styleString + extraStyleString;\n}\nfunction pxToNumber(value) {\n  if (!value)\n    return 0;\n  var match = value.match(/^\\d*(\\.\\d*)?/);\n  return match ? Number(match[0]) : 0;\n}\nvar mirrorElement;\nfunction measure(originElement, ellipsisConfig, operations, children, simple) {\n  var rows = ellipsisConfig.rows || 1;\n  var ellipsisStr = ellipsisConfig.ellipsisStr !== void 0 ? ellipsisConfig.ellipsisStr : \"...\";\n  var suffix = ellipsisConfig.suffix !== void 0 ? ellipsisConfig.suffix : \"\";\n  if (!mirrorElement) {\n    mirrorElement = document.createElement(originElement.tagName);\n    document.body.appendChild(mirrorElement);\n  }\n  var originStyle = window.getComputedStyle(originElement);\n  var extraStyle = {\n    height: \"auto\",\n    \"min-height\": \"auto\",\n    \"max-height\": \"auto\",\n    left: \"0\",\n    top: \"-99999999px\",\n    position: \"fixed\",\n    \"z-index\": \"-200\",\n    \"white-space\": \"normal\",\n    \"text-overflow\": \"clip\",\n    overflow: \"auto\"\n  };\n  var styleString = styleToString(originStyle, extraStyle);\n  mirrorElement.setAttribute(\"style\", styleString);\n  mirrorElement.setAttribute(\"aria-hidden\", \"true\");\n  reactDom.exports.render(react.exports.createElement(\"span\", null, operations), mirrorElement);\n  var operationsChildNodes = Array.prototype.slice.apply(mirrorElement.childNodes[0].cloneNode(true).childNodes);\n  var fullText = mergedToString(react.exports.Children.toArray(children));\n  reactDom.exports.unmountComponentAtNode(mirrorElement);\n  mirrorElement.innerHTML = \"\";\n  var ellipsisTextNode = document.createTextNode(\"\" + ellipsisStr + suffix);\n  mirrorElement.appendChild(ellipsisTextNode);\n  operationsChildNodes.forEach(function(childNode) {\n    mirrorElement.appendChild(childNode);\n  });\n  var textNode = document.createTextNode(fullText);\n  mirrorElement.insertBefore(textNode, mirrorElement.firstChild);\n  var lineHeight = pxToNumber(originStyle.lineHeight);\n  var maxHeight = Math.round(lineHeight * rows + pxToNumber(originStyle.paddingTop) + pxToNumber(originStyle.paddingBottom));\n  function clearMirrorStyle() {\n    mirrorElement.setAttribute(\"style\", \"display: none\");\n  }\n  function inRange() {\n    return mirrorElement.scrollHeight <= maxHeight;\n  }\n  if (inRange()) {\n    reactDom.exports.unmountComponentAtNode(mirrorElement);\n    clearMirrorStyle();\n    return { text: fullText, ellipsis: false };\n  }\n  if (simple) {\n    clearMirrorStyle();\n    return { ellipsis: true, text: fullText };\n  }\n  function measureText(textNode2, startLoc, endLoc, lastSuccessLoc) {\n    if (startLoc === void 0) {\n      startLoc = 0;\n    }\n    if (endLoc === void 0) {\n      endLoc = fullText.length;\n    }\n    var midLoc = Math.floor((startLoc + endLoc) / 2);\n    var currentText = fullText.slice(0, midLoc);\n    textNode2.textContent = currentText;\n    if (startLoc >= endLoc - 1) {\n      for (var step = endLoc; step >= startLoc; step -= 1) {\n        var currentStepText = fullText.slice(0, step);\n        textNode2.textContent = currentStepText;\n        if (inRange() || !currentStepText) {\n          return;\n        }\n      }\n    }\n    if (inRange()) {\n      return measureText(textNode2, midLoc, endLoc);\n    }\n    return measureText(textNode2, startLoc, midLoc);\n  }\n  measureText(textNode);\n  clearMirrorStyle();\n  return {\n    text: textNode.textContent,\n    ellipsis: true\n  };\n}\nvar __assign$b = globalThis && globalThis.__assign || function() {\n  __assign$b = Object.assign || function(t2) {\n    for (var s, i = 1, n2 = arguments.length; i < n2; i++) {\n      s = arguments[i];\n      for (var p2 in s)\n        if (Object.prototype.hasOwnProperty.call(s, p2))\n          t2[p2] = s[p2];\n    }\n    return t2;\n  };\n  return __assign$b.apply(this, arguments);\n};\nvar __rest$2 = globalThis && globalThis.__rest || function(s, e) {\n  var t2 = {};\n  for (var p2 in s)\n    if (Object.prototype.hasOwnProperty.call(s, p2) && e.indexOf(p2) < 0)\n      t2[p2] = s[p2];\n  if (s != null && typeof Object.getOwnPropertySymbols === \"function\")\n    for (var i = 0, p2 = Object.getOwnPropertySymbols(s); i < p2.length; i++) {\n      if (e.indexOf(p2[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p2[i]))\n        t2[p2[i]] = s[p2[i]];\n    }\n  return t2;\n};\nvar __read$h = globalThis && globalThis.__read || function(o, n2) {\n  var m2 = typeof Symbol === \"function\" && o[Symbol.iterator];\n  if (!m2)\n    return o;\n  var i = m2.call(o), r2, ar = [], e;\n  try {\n    while ((n2 === void 0 || n2-- > 0) && !(r2 = i.next()).done)\n      ar.push(r2.value);\n  } catch (error) {\n    e = { error };\n  } finally {\n    try {\n      if (r2 && !r2.done && (m2 = i[\"return\"]))\n        m2.call(i);\n    } finally {\n      if (e)\n        throw e.error;\n    }\n  }\n  return ar;\n};\nfunction getClassNameAndComponentName(props, prefixCls2) {\n  var type = props.type, bold = props.bold, disabled = props.disabled, mark = props.mark, underline = props.underline, propDelete = props.delete, code = props.code;\n  var component = [];\n  var className = [];\n  if (type) {\n    className.push(prefixCls2 + \"-\" + type);\n  }\n  if (disabled) {\n    className.push(prefixCls2 + \"-disabled\");\n  }\n  if (bold) {\n    component.push(\"b\");\n  }\n  if (underline) {\n    component.push(\"u\");\n  }\n  if (propDelete) {\n    component.push(\"del\");\n  }\n  if (code) {\n    component.push(\"code\");\n  }\n  if (mark) {\n    component.push(\"mark\");\n  }\n  return {\n    component,\n    className\n  };\n}\nfunction wrap(content, component, props) {\n  var currentContent = content;\n  component.forEach(function(c) {\n    var _props = isObject$6(props.mark) && props.mark.color ? { style: { backgroundColor: props.mark.color } } : {};\n    currentContent = React.createElement(c, _props, currentContent);\n  });\n  return currentContent;\n}\nfunction Base(props) {\n  var componentType = props.componentType, style = props.style, className = props.className, children = props.children, editable = props.editable, ellipsis = props.ellipsis, heading = props.heading, blockquote = props.blockquote, copyable = props.copyable, rest = __rest$2(props, [\"componentType\", \"style\", \"className\", \"children\", \"editable\", \"ellipsis\", \"heading\", \"blockquote\", \"copyable\"]);\n  var configContext = react.exports.useContext(ConfigContext);\n  var getPrefixCls = configContext.getPrefixCls;\n  var prefixCls2 = getPrefixCls(\"typography\");\n  var rafId = react.exports.useRef();\n  var _a = getClassNameAndComponentName(props, prefixCls2), component = _a.component, componentClassName = _a.className;\n  var _b = __read$h(react.exports.useState(false), 2), editing = _b[0], setEditing = _b[1];\n  var _c = __read$h(react.exports.useState(false), 2), isEllipsis = _c[0], setEllipsis = _c[1];\n  var _d = __read$h(react.exports.useState(false), 2), expanding = _d[0], setExpanding = _d[1];\n  var _e = __read$h(react.exports.useState(\"\"), 2), ellipsisText = _e[0], setEllipsisText = _e[1];\n  var _f = __read$h(react.exports.useState(false), 2), measuring = _f[0], setMeasuring = _f[1];\n  var componentRef = react.exports.useRef(null);\n  var editableConfig = isObject$6(editable) ? editable : {};\n  var mergedEditing = \"editing\" in editableConfig ? editableConfig.editing : editing;\n  var ellipsisConfig = ellipsis ? __assign$b({ rows: 1, ellipsisStr: \"...\", cssEllipsis: true }, isObject$6(ellipsis) ? ellipsis : {}) : {};\n  function canSimpleEllipsis() {\n    var rows = ellipsisConfig.rows, ellipsisStr = ellipsisConfig.ellipsisStr, suffix = ellipsisConfig.suffix, onEllipsis = ellipsisConfig.onEllipsis, expandable = ellipsisConfig.expandable, cssEllipsis = ellipsisConfig.cssEllipsis;\n    if (!cssEllipsis) {\n      return;\n    }\n    if (suffix || ellipsisStr !== \"...\")\n      return;\n    if (onEllipsis || expandable || onEllipsis)\n      return;\n    if (editable || copyable)\n      return;\n    return rows === 1;\n  }\n  var simpleEllipsis = canSimpleEllipsis();\n  function renderOperations(forceShowExpand) {\n    return React.createElement(React.Fragment, null, React.createElement(Operations, __assign$b({}, props, {\n      setEditing,\n      onClickExpand,\n      expanding,\n      isEllipsis,\n      forceShowExpand,\n      currentContext: configContext\n    })));\n  }\n  function onClickExpand(e) {\n    setExpanding(!expanding);\n    ellipsisConfig.onExpand && ellipsisConfig.onExpand(!expanding, e);\n  }\n  var resizeOnNextFrame = function() {\n    caf(rafId.current);\n    rafId.current = raf(function() {\n      calcEllipsis();\n    });\n  };\n  var _g = useResizeObserver(resizeOnNextFrame), cor = _g.cor, dor = _g.dor, currentOr = _g.currentOr;\n  useIsomorphicLayoutEffect$1(function() {\n    if (!currentOr) {\n      resizeOnNextFrame();\n    }\n  }, [currentOr]);\n  useUpdate(function() {\n    ellipsisConfig.onEllipsis && ellipsisConfig.onEllipsis(isEllipsis);\n  }, [isEllipsis]);\n  useIsomorphicLayoutEffect$1(function() {\n    if (componentRef.current) {\n      cor(componentRef.current);\n    }\n    return function() {\n      dor();\n      caf(rafId.current);\n    };\n  }, [\n    children,\n    expanding,\n    isEllipsis,\n    editing,\n    ellipsisConfig.suffix,\n    ellipsisConfig.ellipsisStr,\n    ellipsisConfig.expandable,\n    ellipsisConfig.expandNodes,\n    ellipsisConfig.rows,\n    ellipsisConfig.cssEllipsis\n  ]);\n  function calcEllipsis() {\n    var currentEllipsis = isEllipsis;\n    if (editing) {\n      return;\n    }\n    if (ellipsisConfig.rows) {\n      if (expanding) {\n        return;\n      }\n      setMeasuring(true);\n      var _a2 = measure(componentRef.current, ellipsisConfig, renderOperations(!!ellipsisConfig.expandable), children, simpleEllipsis), ellipsis_1 = _a2.ellipsis, text = _a2.text;\n      setMeasuring(false);\n      if (ellipsis_1 && text) {\n        setEllipsisText(text);\n      }\n      if (ellipsis_1 !== currentEllipsis) {\n        setEllipsis(ellipsis_1);\n      }\n    } else {\n      var isEllipsis_1 = !!ellipsisConfig.rows;\n      if (isEllipsis_1 !== currentEllipsis) {\n        setEllipsis(isEllipsis_1);\n      }\n    }\n  }\n  function renderContent() {\n    var _a2;\n    var fullText = mergedToString(React.Children.toArray(children));\n    var ellipsisStr = ellipsisConfig.ellipsisStr !== void 0 ? ellipsisConfig.ellipsisStr : \"...\";\n    var suffix = ellipsisConfig.suffix !== void 0 && ellipsisConfig.suffix;\n    var showTooltip = ellipsisConfig.showTooltip;\n    var tooltipType = isObject$6(ellipsisConfig.showTooltip) ? ellipsisConfig.showTooltip.type === \"popover\" ? \"popover\" : \"tooltip\" : \"tooltip\";\n    var tooltipProps = isObject$6(ellipsisConfig.showTooltip) ? ellipsisConfig.showTooltip.props || {} : {};\n    var TooltipComponent2 = tooltipType === \"popover\" ? Popover$1 : Tooltip$1;\n    var titleProps = isEllipsis && !showTooltip && !expanding ? { title: fullText } : {};\n    var baseProps = __assign$b({ ref: componentRef, style }, titleProps);\n    var addTooltip = isEllipsis && showTooltip && !expanding;\n    function renderInnerContent() {\n      var text = isEllipsis && !expanding ? ellipsisText : children;\n      var innerText = component.length ? wrap(text, component, props) : text;\n      return React.createElement(React.Fragment, null, addTooltip ? React.createElement(\"span\", null, innerText) : innerText, measuring || isEllipsis && !expanding && !simpleEllipsis ? ellipsisStr : null, suffix, renderOperations(measuring ? !!ellipsisConfig.expandable : void 0));\n    }\n    var TextComponent;\n    if (componentType === \"Paragraph\") {\n      TextComponent = blockquote ? \"blockquote\" : \"div\";\n    } else if (componentType === \"Title\") {\n      TextComponent = \"h\" + heading;\n    } else if (componentType === \"Text\") {\n      TextComponent = ellipsis ? \"div\" : \"span\";\n    }\n    var node = React.createElement(TextComponent, __assign$b({ className: cs$1(prefixCls2, (_a2 = {}, _a2[prefixCls2 + \"-simple-ellipsis\"] = simpleEllipsis, _a2), componentClassName, className) }, baseProps, omit(rest, [\n      \"spacing\",\n      \"type\",\n      \"close\",\n      \"bold\",\n      \"disabled\",\n      \"mark\",\n      \"underline\",\n      \"delete\",\n      \"code\",\n      \"copyable\",\n      \"isEllipsis\",\n      \"expanding\",\n      \"onClickExpand\",\n      \"setEditing\",\n      \"forceShowExpand\"\n    ])), renderInnerContent());\n    if (addTooltip) {\n      return React.createElement(TooltipComponent2, __assign$b({ content: fullText }, tooltipProps), node);\n    }\n    return node;\n  }\n  return mergedEditing ? React.createElement(EditContent, __assign$b({}, props, { prefixCls: prefixCls2, setEditing, editableConfig })) : renderContent();\n}\nvar __assign$a = globalThis && globalThis.__assign || function() {\n  __assign$a = Object.assign || function(t2) {\n    for (var s, i = 1, n2 = arguments.length; i < n2; i++) {\n      s = arguments[i];\n      for (var p2 in s)\n        if (Object.prototype.hasOwnProperty.call(s, p2))\n          t2[p2] = s[p2];\n    }\n    return t2;\n  };\n  return __assign$a.apply(this, arguments);\n};\nvar __rest$1 = globalThis && globalThis.__rest || function(s, e) {\n  var t2 = {};\n  for (var p2 in s)\n    if (Object.prototype.hasOwnProperty.call(s, p2) && e.indexOf(p2) < 0)\n      t2[p2] = s[p2];\n  if (s != null && typeof Object.getOwnPropertySymbols === \"function\")\n    for (var i = 0, p2 = Object.getOwnPropertySymbols(s); i < p2.length; i++) {\n      if (e.indexOf(p2[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p2[i]))\n        t2[p2[i]] = s[p2[i]];\n    }\n  return t2;\n};\nfunction Title(props) {\n  var _a = props.heading, heading = _a === void 0 ? 1 : _a, rest = __rest$1(props, [\"heading\"]);\n  return React.createElement(Base, __assign$a({ heading }, rest, { componentType: \"Title\" }));\n}\nTitle.displayName = \"Title\";\nvar __assign$9 = globalThis && globalThis.__assign || function() {\n  __assign$9 = Object.assign || function(t2) {\n    for (var s, i = 1, n2 = arguments.length; i < n2; i++) {\n      s = arguments[i];\n      for (var p2 in s)\n        if (Object.prototype.hasOwnProperty.call(s, p2))\n          t2[p2] = s[p2];\n    }\n    return t2;\n  };\n  return __assign$9.apply(this, arguments);\n};\nfunction Text$3(props) {\n  return React.createElement(Base, __assign$9({}, props, { componentType: \"Text\" }));\n}\nText$3.displayName = \"Text\";\nvar __assign$8 = globalThis && globalThis.__assign || function() {\n  __assign$8 = Object.assign || function(t2) {\n    for (var s, i = 1, n2 = arguments.length; i < n2; i++) {\n      s = arguments[i];\n      for (var p2 in s)\n        if (Object.prototype.hasOwnProperty.call(s, p2))\n          t2[p2] = s[p2];\n    }\n    return t2;\n  };\n  return __assign$8.apply(this, arguments);\n};\nfunction Paragraph$1(props) {\n  var _a = props.spacing, spacing = _a === void 0 ? \"default\" : _a, className = props.className;\n  var getPrefixCls = react.exports.useContext(ConfigContext).getPrefixCls;\n  var prefixCls2 = getPrefixCls(\"typography\");\n  var classNames = spacing === \"close\" ? cs$1(prefixCls2 + \"-spacing-close\", className) : className;\n  return React.createElement(Base, __assign$8({}, props, { componentType: \"Paragraph\", className: classNames }));\n}\nParagraph$1.displayName = \"Paragraph\";\nvar Typography = OriginTypography;\nTypography.Title = Title;\nTypography.Text = Text$3;\nTypography.Paragraph = Paragraph$1;\nvar Typography$1 = Typography;\nvar __assign$7 = globalThis && globalThis.__assign || function() {\n  __assign$7 = Object.assign || function(t2) {\n    for (var s, i = 1, n2 = arguments.length; i < n2; i++) {\n      s = arguments[i];\n      for (var p2 in s)\n        if (Object.prototype.hasOwnProperty.call(s, p2))\n          t2[p2] = s[p2];\n    }\n    return t2;\n  };\n  return __assign$7.apply(this, arguments);\n};\nvar teaLog = function(event, params) {\n  if (window.collectEvent) {\n    window.collectEvent(event, __assign$7({ url_path: window.location.pathname, title: window.document.title, url: window.location.href }, params || {}));\n  }\n};\nvar classnames = { exports: {} };\n/*!\n\tCopyright (c) 2018 Jed Watson.\n\tLicensed under the MIT License (MIT), see\n\thttp://jedwatson.github.io/classnames\n*/\n(function(module) {\n  (function() {\n    var hasOwn = {}.hasOwnProperty;\n    function classNames() {\n      var classes = [];\n      for (var i = 0; i < arguments.length; i++) {\n        var arg = arguments[i];\n        if (!arg)\n          continue;\n        var argType = typeof arg;\n        if (argType === \"string\" || argType === \"number\") {\n          classes.push(arg);\n        } else if (Array.isArray(arg)) {\n          if (arg.length) {\n            var inner = classNames.apply(null, arg);\n            if (inner) {\n              classes.push(inner);\n            }\n          }\n        } else if (argType === \"object\") {\n          if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes(\"[native code]\")) {\n            classes.push(arg.toString());\n            continue;\n          }\n          for (var key in arg) {\n            if (hasOwn.call(arg, key) && arg[key]) {\n              classes.push(key);\n            }\n          }\n        }\n      }\n      return classes.join(\" \");\n    }\n    if (module.exports) {\n      classNames.default = classNames;\n      module.exports = classNames;\n    } else {\n      window.classNames = classNames;\n    }\n  })();\n})(classnames);\nvar cs = classnames.exports;\nvar axios$2 = { exports: {} };\nvar bind$2 = function bind(fn, thisArg) {\n  return function wrap2() {\n    var args = new Array(arguments.length);\n    for (var i = 0; i < args.length; i++) {\n      args[i] = arguments[i];\n    }\n    return fn.apply(thisArg, args);\n  };\n};\nvar bind$1 = bind$2;\nvar toString = Object.prototype.toString;\nvar kindOf = function(cache2) {\n  return function(thing) {\n    var str = toString.call(thing);\n    return cache2[str] || (cache2[str] = str.slice(8, -1).toLowerCase());\n  };\n}(Object.create(null));\nfunction kindOfTest(type) {\n  type = type.toLowerCase();\n  return function isKindOf(thing) {\n    return kindOf(thing) === type;\n  };\n}\nfunction isArray(val) {\n  return Array.isArray(val);\n}\nfunction isUndefined(val) {\n  return typeof val === \"undefined\";\n}\nfunction isBuffer(val) {\n  return val !== null && !isUndefined(val) && val.constructor !== null && !isUndefined(val.constructor) && typeof val.constructor.isBuffer === \"function\" && val.constructor.isBuffer(val);\n}\nvar isArrayBuffer = kindOfTest(\"ArrayBuffer\");\nfunction isArrayBufferView(val) {\n  var result;\n  if (typeof ArrayBuffer !== \"undefined\" && ArrayBuffer.isView) {\n    result = ArrayBuffer.isView(val);\n  } else {\n    result = val && val.buffer && isArrayBuffer(val.buffer);\n  }\n  return result;\n}\nfunction isString(val) {\n  return typeof val === \"string\";\n}\nfunction isNumber(val) {\n  return typeof val === \"number\";\n}\nfunction isObject(val) {\n  return val !== null && typeof val === \"object\";\n}\nfunction isPlainObject(val) {\n  if (kindOf(val) !== \"object\") {\n    return false;\n  }\n  var prototype2 = Object.getPrototypeOf(val);\n  return prototype2 === null || prototype2 === Object.prototype;\n}\nvar isDate = kindOfTest(\"Date\");\nvar isFile = kindOfTest(\"File\");\nvar isBlob = kindOfTest(\"Blob\");\nvar isFileList = kindOfTest(\"FileList\");\nfunction isFunction(val) {\n  return toString.call(val) === \"[object Function]\";\n}\nfunction isStream(val) {\n  return isObject(val) && isFunction(val.pipe);\n}\nfunction isFormData(thing) {\n  var pattern = \"[object FormData]\";\n  return thing && (typeof FormData === \"function\" && thing instanceof FormData || toString.call(thing) === pattern || isFunction(thing.toString) && thing.toString() === pattern);\n}\nvar isURLSearchParams = kindOfTest(\"URLSearchParams\");\nfunction trim(str) {\n  return str.trim ? str.trim() : str.replace(/^\\s+|\\s+$/g, \"\");\n}\nfunction isStandardBrowserEnv() {\n  if (typeof navigator !== \"undefined\" && (navigator.product === \"ReactNative\" || navigator.product === \"NativeScript\" || navigator.product === \"NS\")) {\n    return false;\n  }\n  return typeof window !== \"undefined\" && typeof document !== \"undefined\";\n}\nfunction forEach(obj, fn) {\n  if (obj === null || typeof obj === \"undefined\") {\n    return;\n  }\n  if (typeof obj !== \"object\") {\n    obj = [obj];\n  }\n  if (isArray(obj)) {\n    for (var i = 0, l2 = obj.length; i < l2; i++) {\n      fn.call(null, obj[i], i, obj);\n    }\n  } else {\n    for (var key in obj) {\n      if (Object.prototype.hasOwnProperty.call(obj, key)) {\n        fn.call(null, obj[key], key, obj);\n      }\n    }\n  }\n}\nfunction merge() {\n  var result = {};\n  function assignValue(val, key) {\n    if (isPlainObject(result[key]) && isPlainObject(val)) {\n      result[key] = merge(result[key], val);\n    } else if (isPlainObject(val)) {\n      result[key] = merge({}, val);\n    } else if (isArray(val)) {\n      result[key] = val.slice();\n    } else {\n      result[key] = val;\n    }\n  }\n  for (var i = 0, l2 = arguments.length; i < l2; i++) {\n    forEach(arguments[i], assignValue);\n  }\n  return result;\n}\nfunction extend(a, b, thisArg) {\n  forEach(b, function assignValue(val, key) {\n    if (thisArg && typeof val === \"function\") {\n      a[key] = bind$1(val, thisArg);\n    } else {\n      a[key] = val;\n    }\n  });\n  return a;\n}\nfunction stripBOM(content) {\n  if (content.charCodeAt(0) === 65279) {\n    content = content.slice(1);\n  }\n  return content;\n}\nfunction inherits(constructor, superConstructor, props, descriptors2) {\n  constructor.prototype = Object.create(superConstructor.prototype, descriptors2);\n  constructor.prototype.constructor = constructor;\n  props && Object.assign(constructor.prototype, props);\n}\nfunction toFlatObject(sourceObj, destObj, filter) {\n  var props;\n  var i;\n  var prop;\n  var merged = {};\n  destObj = destObj || {};\n  do {\n    props = Object.getOwnPropertyNames(sourceObj);\n    i = props.length;\n    while (i-- > 0) {\n      prop = props[i];\n      if (!merged[prop]) {\n        destObj[prop] = sourceObj[prop];\n        merged[prop] = true;\n      }\n    }\n    sourceObj = Object.getPrototypeOf(sourceObj);\n  } while (sourceObj && (!filter || filter(sourceObj, destObj)) && sourceObj !== Object.prototype);\n  return destObj;\n}\nfunction endsWith(str, searchString, position) {\n  str = String(str);\n  if (position === void 0 || position > str.length) {\n    position = str.length;\n  }\n  position -= searchString.length;\n  var lastIndex = str.indexOf(searchString, position);\n  return lastIndex !== -1 && lastIndex === position;\n}\nfunction toArray$1(thing) {\n  if (!thing)\n    return null;\n  var i = thing.length;\n  if (isUndefined(i))\n    return null;\n  var arr = new Array(i);\n  while (i-- > 0) {\n    arr[i] = thing[i];\n  }\n  return arr;\n}\nvar isTypedArray = function(TypedArray) {\n  return function(thing) {\n    return TypedArray && thing instanceof TypedArray;\n  };\n}(typeof Uint8Array !== \"undefined\" && Object.getPrototypeOf(Uint8Array));\nvar utils$h = {\n  isArray,\n  isArrayBuffer,\n  isBuffer,\n  isFormData,\n  isArrayBufferView,\n  isString,\n  isNumber,\n  isObject,\n  isPlainObject,\n  isUndefined,\n  isDate,\n  isFile,\n  isBlob,\n  isFunction,\n  isStream,\n  isURLSearchParams,\n  isStandardBrowserEnv,\n  forEach,\n  merge,\n  extend,\n  trim,\n  stripBOM,\n  inherits,\n  toFlatObject,\n  kindOf,\n  kindOfTest,\n  endsWith,\n  toArray: toArray$1,\n  isTypedArray,\n  isFileList\n};\nvar utils$g = utils$h;\nfunction encode$1(val) {\n  return encodeURIComponent(val).replace(/%3A/gi, \":\").replace(/%24/g, \"$\").replace(/%2C/gi, \",\").replace(/%20/g, \"+\").replace(/%5B/gi, \"[\").replace(/%5D/gi, \"]\");\n}\nvar buildURL$2 = function buildURL(url, params, paramsSerializer) {\n  if (!params) {\n    return url;\n  }\n  var serializedParams;\n  if (paramsSerializer) {\n    serializedParams = paramsSerializer(params);\n  } else if (utils$g.isURLSearchParams(params)) {\n    serializedParams = params.toString();\n  } else {\n    var parts = [];\n    utils$g.forEach(params, function serialize(val, key) {\n      if (val === null || typeof val === \"undefined\") {\n        return;\n      }\n      if (utils$g.isArray(val)) {\n        key = key + \"[]\";\n      } else {\n        val = [val];\n      }\n      utils$g.forEach(val, function parseValue(v2) {\n        if (utils$g.isDate(v2)) {\n          v2 = v2.toISOString();\n        } else if (utils$g.isObject(v2)) {\n          v2 = JSON.stringify(v2);\n        }\n        parts.push(encode$1(key) + \"=\" + encode$1(v2));\n      });\n    });\n    serializedParams = parts.join(\"&\");\n  }\n  if (serializedParams) {\n    var hashmarkIndex = url.indexOf(\"#\");\n    if (hashmarkIndex !== -1) {\n      url = url.slice(0, hashmarkIndex);\n    }\n    url += (url.indexOf(\"?\") === -1 ? \"?\" : \"&\") + serializedParams;\n  }\n  return url;\n};\nvar utils$f = utils$h;\nfunction InterceptorManager$1() {\n  this.handlers = [];\n}\nInterceptorManager$1.prototype.use = function use(fulfilled, rejected, options) {\n  this.handlers.push({\n    fulfilled,\n    rejected,\n    synchronous: options ? options.synchronous : false,\n    runWhen: options ? options.runWhen : null\n  });\n  return this.handlers.length - 1;\n};\nInterceptorManager$1.prototype.eject = function eject(id2) {\n  if (this.handlers[id2]) {\n    this.handlers[id2] = null;\n  }\n};\nInterceptorManager$1.prototype.forEach = function forEach2(fn) {\n  utils$f.forEach(this.handlers, function forEachHandler(h) {\n    if (h !== null) {\n      fn(h);\n    }\n  });\n};\nvar InterceptorManager_1 = InterceptorManager$1;\nvar utils$e = utils$h;\nvar normalizeHeaderName$1 = function normalizeHeaderName(headers, normalizedName) {\n  utils$e.forEach(headers, function processHeader(value, name) {\n    if (name !== normalizedName && name.toUpperCase() === normalizedName.toUpperCase()) {\n      headers[normalizedName] = value;\n      delete headers[name];\n    }\n  });\n};\nvar utils$d = utils$h;\nfunction AxiosError$5(message, code, config2, request2, response) {\n  Error.call(this);\n  this.message = message;\n  this.name = \"AxiosError\";\n  code && (this.code = code);\n  config2 && (this.config = config2);\n  request2 && (this.request = request2);\n  response && (this.response = response);\n}\nutils$d.inherits(AxiosError$5, Error, {\n  toJSON: function toJSON() {\n    return {\n      message: this.message,\n      name: this.name,\n      description: this.description,\n      number: this.number,\n      fileName: this.fileName,\n      lineNumber: this.lineNumber,\n      columnNumber: this.columnNumber,\n      stack: this.stack,\n      config: this.config,\n      code: this.code,\n      status: this.response && this.response.status ? this.response.status : null\n    };\n  }\n});\nvar prototype = AxiosError$5.prototype;\nvar descriptors = {};\n[\n  \"ERR_BAD_OPTION_VALUE\",\n  \"ERR_BAD_OPTION\",\n  \"ECONNABORTED\",\n  \"ETIMEDOUT\",\n  \"ERR_NETWORK\",\n  \"ERR_FR_TOO_MANY_REDIRECTS\",\n  \"ERR_DEPRECATED\",\n  \"ERR_BAD_RESPONSE\",\n  \"ERR_BAD_REQUEST\",\n  \"ERR_CANCELED\"\n].forEach(function(code) {\n  descriptors[code] = { value: code };\n});\nObject.defineProperties(AxiosError$5, descriptors);\nObject.defineProperty(prototype, \"isAxiosError\", { value: true });\nAxiosError$5.from = function(error, code, config2, request2, response, customProps) {\n  var axiosError = Object.create(prototype);\n  utils$d.toFlatObject(error, axiosError, function filter(obj) {\n    return obj !== Error.prototype;\n  });\n  AxiosError$5.call(axiosError, error.message, code, config2, request2, response);\n  axiosError.name = error.name;\n  customProps && Object.assign(axiosError, customProps);\n  return axiosError;\n};\nvar AxiosError_1 = AxiosError$5;\nvar transitional = {\n  silentJSONParsing: true,\n  forcedJSONParsing: true,\n  clarifyTimeoutError: false\n};\nvar utils$c = utils$h;\nfunction toFormData$1(obj, formData) {\n  formData = formData || new FormData();\n  var stack = [];\n  function convertValue(value) {\n    if (value === null)\n      return \"\";\n    if (utils$c.isDate(value)) {\n      return value.toISOString();\n    }\n    if (utils$c.isArrayBuffer(value) || utils$c.isTypedArray(value)) {\n      return typeof Blob === \"function\" ? new Blob([value]) : Buffer.from(value);\n    }\n    return value;\n  }\n  function build(data2, parentKey) {\n    if (utils$c.isPlainObject(data2) || utils$c.isArray(data2)) {\n      if (stack.indexOf(data2) !== -1) {\n        throw Error(\"Circular reference detected in \" + parentKey);\n      }\n      stack.push(data2);\n      utils$c.forEach(data2, function each(value, key) {\n        if (utils$c.isUndefined(value))\n          return;\n        var fullKey = parentKey ? parentKey + \".\" + key : key;\n        var arr;\n        if (value && !parentKey && typeof value === \"object\") {\n          if (utils$c.endsWith(key, \"{}\")) {\n            value = JSON.stringify(value);\n          } else if (utils$c.endsWith(key, \"[]\") && (arr = utils$c.toArray(value))) {\n            arr.forEach(function(el) {\n              !utils$c.isUndefined(el) && formData.append(fullKey, convertValue(el));\n            });\n            return;\n          }\n        }\n        build(value, fullKey);\n      });\n      stack.pop();\n    } else {\n      formData.append(parentKey, convertValue(data2));\n    }\n  }\n  build(obj);\n  return formData;\n}\nvar toFormData_1 = toFormData$1;\nvar AxiosError$4 = AxiosError_1;\nvar settle$1 = function settle(resolve, reject, response) {\n  var validateStatus2 = response.config.validateStatus;\n  if (!response.status || !validateStatus2 || validateStatus2(response.status)) {\n    resolve(response);\n  } else {\n    reject(new AxiosError$4(\"Request failed with status code \" + response.status, [AxiosError$4.ERR_BAD_REQUEST, AxiosError$4.ERR_BAD_RESPONSE][Math.floor(response.status / 100) - 4], response.config, response.request, response));\n  }\n};\nvar utils$b = utils$h;\nvar cookies$1 = utils$b.isStandardBrowserEnv() ? function standardBrowserEnv() {\n  return {\n    write: function write(name, value, expires, path, domain, secure) {\n      var cookie = [];\n      cookie.push(name + \"=\" + encodeURIComponent(value));\n      if (utils$b.isNumber(expires)) {\n        cookie.push(\"expires=\" + new Date(expires).toGMTString());\n      }\n      if (utils$b.isString(path)) {\n        cookie.push(\"path=\" + path);\n      }\n      if (utils$b.isString(domain)) {\n        cookie.push(\"domain=\" + domain);\n      }\n      if (secure === true) {\n        cookie.push(\"secure\");\n      }\n      document.cookie = cookie.join(\"; \");\n    },\n    read: function read(name) {\n      var match = document.cookie.match(new RegExp(\"(^|;\\\\s*)(\" + name + \")=([^;]*)\"));\n      return match ? decodeURIComponent(match[3]) : null;\n    },\n    remove: function remove(name) {\n      this.write(name, \"\", Date.now() - 864e5);\n    }\n  };\n}() : function nonStandardBrowserEnv() {\n  return {\n    write: function write() {\n    },\n    read: function read() {\n      return null;\n    },\n    remove: function remove() {\n    }\n  };\n}();\nvar isAbsoluteURL$1 = function isAbsoluteURL(url) {\n  return /^([a-z][a-z\\d+\\-.]*:)?\\/\\//i.test(url);\n};\nvar combineURLs$1 = function combineURLs(baseURL, relativeURL) {\n  return relativeURL ? baseURL.replace(/\\/+$/, \"\") + \"/\" + relativeURL.replace(/^\\/+/, \"\") : baseURL;\n};\nvar isAbsoluteURL2 = isAbsoluteURL$1;\nvar combineURLs2 = combineURLs$1;\nvar buildFullPath$2 = function buildFullPath(baseURL, requestedURL) {\n  if (baseURL && !isAbsoluteURL2(requestedURL)) {\n    return combineURLs2(baseURL, requestedURL);\n  }\n  return requestedURL;\n};\nvar utils$a = utils$h;\nvar ignoreDuplicateOf = [\n  \"age\",\n  \"authorization\",\n  \"content-length\",\n  \"content-type\",\n  \"etag\",\n  \"expires\",\n  \"from\",\n  \"host\",\n  \"if-modified-since\",\n  \"if-unmodified-since\",\n  \"last-modified\",\n  \"location\",\n  \"max-forwards\",\n  \"proxy-authorization\",\n  \"referer\",\n  \"retry-after\",\n  \"user-agent\"\n];\nvar parseHeaders$1 = function parseHeaders(headers) {\n  var parsed = {};\n  var key;\n  var val;\n  var i;\n  if (!headers) {\n    return parsed;\n  }\n  utils$a.forEach(headers.split(\"\\n\"), function parser(line) {\n    i = line.indexOf(\":\");\n    key = utils$a.trim(line.substr(0, i)).toLowerCase();\n    val = utils$a.trim(line.substr(i + 1));\n    if (key) {\n      if (parsed[key] && ignoreDuplicateOf.indexOf(key) >= 0) {\n        return;\n      }\n      if (key === \"set-cookie\") {\n        parsed[key] = (parsed[key] ? parsed[key] : []).concat([val]);\n      } else {\n        parsed[key] = parsed[key] ? parsed[key] + \", \" + val : val;\n      }\n    }\n  });\n  return parsed;\n};\nvar utils$9 = utils$h;\nvar isURLSameOrigin$1 = utils$9.isStandardBrowserEnv() ? function standardBrowserEnv2() {\n  var msie = /(msie|trident)/i.test(navigator.userAgent);\n  var urlParsingNode = document.createElement(\"a\");\n  var originURL;\n  function resolveURL(url) {\n    var href = url;\n    if (msie) {\n      urlParsingNode.setAttribute(\"href\", href);\n      href = urlParsingNode.href;\n    }\n    urlParsingNode.setAttribute(\"href\", href);\n    return {\n      href: urlParsingNode.href,\n      protocol: urlParsingNode.protocol ? urlParsingNode.protocol.replace(/:$/, \"\") : \"\",\n      host: urlParsingNode.host,\n      search: urlParsingNode.search ? urlParsingNode.search.replace(/^\\?/, \"\") : \"\",\n      hash: urlParsingNode.hash ? urlParsingNode.hash.replace(/^#/, \"\") : \"\",\n      hostname: urlParsingNode.hostname,\n      port: urlParsingNode.port,\n      pathname: urlParsingNode.pathname.charAt(0) === \"/\" ? urlParsingNode.pathname : \"/\" + urlParsingNode.pathname\n    };\n  }\n  originURL = resolveURL(window.location.href);\n  return function isURLSameOrigin2(requestURL) {\n    var parsed = utils$9.isString(requestURL) ? resolveURL(requestURL) : requestURL;\n    return parsed.protocol === originURL.protocol && parsed.host === originURL.host;\n  };\n}() : function nonStandardBrowserEnv2() {\n  return function isURLSameOrigin2() {\n    return true;\n  };\n}();\nvar AxiosError$3 = AxiosError_1;\nvar utils$8 = utils$h;\nfunction CanceledError$3(message) {\n  AxiosError$3.call(this, message == null ? \"canceled\" : message, AxiosError$3.ERR_CANCELED);\n  this.name = \"CanceledError\";\n}\nutils$8.inherits(CanceledError$3, AxiosError$3, {\n  __CANCEL__: true\n});\nvar CanceledError_1 = CanceledError$3;\nvar parseProtocol$1 = function parseProtocol(url) {\n  var match = /^([-+\\w]{1,25})(:?\\/\\/|:)/.exec(url);\n  return match && match[1] || \"\";\n};\nvar utils$7 = utils$h;\nvar settle2 = settle$1;\nvar cookies = cookies$1;\nvar buildURL$1 = buildURL$2;\nvar buildFullPath$1 = buildFullPath$2;\nvar parseHeaders2 = parseHeaders$1;\nvar isURLSameOrigin = isURLSameOrigin$1;\nvar transitionalDefaults$1 = transitional;\nvar AxiosError$2 = AxiosError_1;\nvar CanceledError$2 = CanceledError_1;\nvar parseProtocol2 = parseProtocol$1;\nvar xhr = function xhrAdapter(config2) {\n  return new Promise(function dispatchXhrRequest(resolve, reject) {\n    var requestData = config2.data;\n    var requestHeaders = config2.headers;\n    var responseType = config2.responseType;\n    var onCanceled;\n    function done() {\n      if (config2.cancelToken) {\n        config2.cancelToken.unsubscribe(onCanceled);\n      }\n      if (config2.signal) {\n        config2.signal.removeEventListener(\"abort\", onCanceled);\n      }\n    }\n    if (utils$7.isFormData(requestData) && utils$7.isStandardBrowserEnv()) {\n      delete requestHeaders[\"Content-Type\"];\n    }\n    var request2 = new XMLHttpRequest();\n    if (config2.auth) {\n      var username = config2.auth.username || \"\";\n      var password = config2.auth.password ? unescape(encodeURIComponent(config2.auth.password)) : \"\";\n      requestHeaders.Authorization = \"Basic \" + btoa(username + \":\" + password);\n    }\n    var fullPath = buildFullPath$1(config2.baseURL, config2.url);\n    request2.open(config2.method.toUpperCase(), buildURL$1(fullPath, config2.params, config2.paramsSerializer), true);\n    request2.timeout = config2.timeout;\n    function onloadend() {\n      if (!request2) {\n        return;\n      }\n      var responseHeaders = \"getAllResponseHeaders\" in request2 ? parseHeaders2(request2.getAllResponseHeaders()) : null;\n      var responseData = !responseType || responseType === \"text\" || responseType === \"json\" ? request2.responseText : request2.response;\n      var response = {\n        data: responseData,\n        status: request2.status,\n        statusText: request2.statusText,\n        headers: responseHeaders,\n        config: config2,\n        request: request2\n      };\n      settle2(function _resolve(value) {\n        resolve(value);\n        done();\n      }, function _reject(err) {\n        reject(err);\n        done();\n      }, response);\n      request2 = null;\n    }\n    if (\"onloadend\" in request2) {\n      request2.onloadend = onloadend;\n    } else {\n      request2.onreadystatechange = function handleLoad() {\n        if (!request2 || request2.readyState !== 4) {\n          return;\n        }\n        if (request2.status === 0 && !(request2.responseURL && request2.responseURL.indexOf(\"file:\") === 0)) {\n          return;\n        }\n        setTimeout(onloadend);\n      };\n    }\n    request2.onabort = function handleAbort() {\n      if (!request2) {\n        return;\n      }\n      reject(new AxiosError$2(\"Request aborted\", AxiosError$2.ECONNABORTED, config2, request2));\n      request2 = null;\n    };\n    request2.onerror = function handleError() {\n      reject(new AxiosError$2(\"Network Error\", AxiosError$2.ERR_NETWORK, config2, request2, request2));\n      request2 = null;\n    };\n    request2.ontimeout = function handleTimeout() {\n      var timeoutErrorMessage = config2.timeout ? \"timeout of \" + config2.timeout + \"ms exceeded\" : \"timeout exceeded\";\n      var transitional3 = config2.transitional || transitionalDefaults$1;\n      if (config2.timeoutErrorMessage) {\n        timeoutErrorMessage = config2.timeoutErrorMessage;\n      }\n      reject(new AxiosError$2(timeoutErrorMessage, transitional3.clarifyTimeoutError ? AxiosError$2.ETIMEDOUT : AxiosError$2.ECONNABORTED, config2, request2));\n      request2 = null;\n    };\n    if (utils$7.isStandardBrowserEnv()) {\n      var xsrfValue = (config2.withCredentials || isURLSameOrigin(fullPath)) && config2.xsrfCookieName ? cookies.read(config2.xsrfCookieName) : void 0;\n      if (xsrfValue) {\n        requestHeaders[config2.xsrfHeaderName] = xsrfValue;\n      }\n    }\n    if (\"setRequestHeader\" in request2) {\n      utils$7.forEach(requestHeaders, function setRequestHeader(val, key) {\n        if (typeof requestData === \"undefined\" && key.toLowerCase() === \"content-type\") {\n          delete requestHeaders[key];\n        } else {\n          request2.setRequestHeader(key, val);\n        }\n      });\n    }\n    if (!utils$7.isUndefined(config2.withCredentials)) {\n      request2.withCredentials = !!config2.withCredentials;\n    }\n    if (responseType && responseType !== \"json\") {\n      request2.responseType = config2.responseType;\n    }\n    if (typeof config2.onDownloadProgress === \"function\") {\n      request2.addEventListener(\"progress\", config2.onDownloadProgress);\n    }\n    if (typeof config2.onUploadProgress === \"function\" && request2.upload) {\n      request2.upload.addEventListener(\"progress\", config2.onUploadProgress);\n    }\n    if (config2.cancelToken || config2.signal) {\n      onCanceled = function(cancel) {\n        if (!request2) {\n          return;\n        }\n        reject(!cancel || cancel && cancel.type ? new CanceledError$2() : cancel);\n        request2.abort();\n        request2 = null;\n      };\n      config2.cancelToken && config2.cancelToken.subscribe(onCanceled);\n      if (config2.signal) {\n        config2.signal.aborted ? onCanceled() : config2.signal.addEventListener(\"abort\", onCanceled);\n      }\n    }\n    if (!requestData) {\n      requestData = null;\n    }\n    var protocol = parseProtocol2(fullPath);\n    if (protocol && [\"http\", \"https\", \"file\"].indexOf(protocol) === -1) {\n      reject(new AxiosError$2(\"Unsupported protocol \" + protocol + \":\", AxiosError$2.ERR_BAD_REQUEST, config2));\n      return;\n    }\n    request2.send(requestData);\n  });\n};\nvar _null = null;\nvar utils$6 = utils$h;\nvar normalizeHeaderName2 = normalizeHeaderName$1;\nvar AxiosError$1 = AxiosError_1;\nvar transitionalDefaults = transitional;\nvar toFormData = toFormData_1;\nvar DEFAULT_CONTENT_TYPE = {\n  \"Content-Type\": \"application/x-www-form-urlencoded\"\n};\nfunction setContentTypeIfUnset(headers, value) {\n  if (!utils$6.isUndefined(headers) && utils$6.isUndefined(headers[\"Content-Type\"])) {\n    headers[\"Content-Type\"] = value;\n  }\n}\nfunction getDefaultAdapter() {\n  var adapter;\n  if (typeof XMLHttpRequest !== \"undefined\") {\n    adapter = xhr;\n  } else if (typeof process !== \"undefined\" && Object.prototype.toString.call(process) === \"[object process]\") {\n    adapter = xhr;\n  }\n  return adapter;\n}\nfunction stringifySafely(rawValue, parser, encoder) {\n  if (utils$6.isString(rawValue)) {\n    try {\n      (parser || JSON.parse)(rawValue);\n      return utils$6.trim(rawValue);\n    } catch (e) {\n      if (e.name !== \"SyntaxError\") {\n        throw e;\n      }\n    }\n  }\n  return (encoder || JSON.stringify)(rawValue);\n}\nvar defaults$3 = {\n  transitional: transitionalDefaults,\n  adapter: getDefaultAdapter(),\n  transformRequest: [function transformRequest(data2, headers) {\n    normalizeHeaderName2(headers, \"Accept\");\n    normalizeHeaderName2(headers, \"Content-Type\");\n    if (utils$6.isFormData(data2) || utils$6.isArrayBuffer(data2) || utils$6.isBuffer(data2) || utils$6.isStream(data2) || utils$6.isFile(data2) || utils$6.isBlob(data2)) {\n      return data2;\n    }\n    if (utils$6.isArrayBufferView(data2)) {\n      return data2.buffer;\n    }\n    if (utils$6.isURLSearchParams(data2)) {\n      setContentTypeIfUnset(headers, \"application/x-www-form-urlencoded;charset=utf-8\");\n      return data2.toString();\n    }\n    var isObjectPayload = utils$6.isObject(data2);\n    var contentType = headers && headers[\"Content-Type\"];\n    var isFileList2;\n    if ((isFileList2 = utils$6.isFileList(data2)) || isObjectPayload && contentType === \"multipart/form-data\") {\n      var _FormData = this.env && this.env.FormData;\n      return toFormData(isFileList2 ? { \"files[]\": data2 } : data2, _FormData && new _FormData());\n    } else if (isObjectPayload || contentType === \"application/json\") {\n      setContentTypeIfUnset(headers, \"application/json\");\n      return stringifySafely(data2);\n    }\n    return data2;\n  }],\n  transformResponse: [function transformResponse(data2) {\n    var transitional3 = this.transitional || defaults$3.transitional;\n    var silentJSONParsing = transitional3 && transitional3.silentJSONParsing;\n    var forcedJSONParsing = transitional3 && transitional3.forcedJSONParsing;\n    var strictJSONParsing = !silentJSONParsing && this.responseType === \"json\";\n    if (strictJSONParsing || forcedJSONParsing && utils$6.isString(data2) && data2.length) {\n      try {\n        return JSON.parse(data2);\n      } catch (e) {\n        if (strictJSONParsing) {\n          if (e.name === \"SyntaxError\") {\n            throw AxiosError$1.from(e, AxiosError$1.ERR_BAD_RESPONSE, this, null, this.response);\n          }\n          throw e;\n        }\n      }\n    }\n    return data2;\n  }],\n  timeout: 0,\n  xsrfCookieName: \"XSRF-TOKEN\",\n  xsrfHeaderName: \"X-XSRF-TOKEN\",\n  maxContentLength: -1,\n  maxBodyLength: -1,\n  env: {\n    FormData: _null\n  },\n  validateStatus: function validateStatus(status) {\n    return status >= 200 && status < 300;\n  },\n  headers: {\n    common: {\n      \"Accept\": \"application/json, text/plain, */*\"\n    }\n  }\n};\nutils$6.forEach([\"delete\", \"get\", \"head\"], function forEachMethodNoData(method) {\n  defaults$3.headers[method] = {};\n});\nutils$6.forEach([\"post\", \"put\", \"patch\"], function forEachMethodWithData(method) {\n  defaults$3.headers[method] = utils$6.merge(DEFAULT_CONTENT_TYPE);\n});\nvar defaults_1 = defaults$3;\nvar utils$5 = utils$h;\nvar defaults$2 = defaults_1;\nvar transformData$1 = function transformData(data2, headers, fns) {\n  var context = this || defaults$2;\n  utils$5.forEach(fns, function transform(fn) {\n    data2 = fn.call(context, data2, headers);\n  });\n  return data2;\n};\nvar isCancel$1 = function isCancel(value) {\n  return !!(value && value.__CANCEL__);\n};\nvar utils$4 = utils$h;\nvar transformData2 = transformData$1;\nvar isCancel2 = isCancel$1;\nvar defaults$1 = defaults_1;\nvar CanceledError$1 = CanceledError_1;\nfunction throwIfCancellationRequested(config2) {\n  if (config2.cancelToken) {\n    config2.cancelToken.throwIfRequested();\n  }\n  if (config2.signal && config2.signal.aborted) {\n    throw new CanceledError$1();\n  }\n}\nvar dispatchRequest$1 = function dispatchRequest(config2) {\n  throwIfCancellationRequested(config2);\n  config2.headers = config2.headers || {};\n  config2.data = transformData2.call(config2, config2.data, config2.headers, config2.transformRequest);\n  config2.headers = utils$4.merge(config2.headers.common || {}, config2.headers[config2.method] || {}, config2.headers);\n  utils$4.forEach([\"delete\", \"get\", \"head\", \"post\", \"put\", \"patch\", \"common\"], function cleanHeaderConfig(method) {\n    delete config2.headers[method];\n  });\n  var adapter = config2.adapter || defaults$1.adapter;\n  return adapter(config2).then(function onAdapterResolution(response) {\n    throwIfCancellationRequested(config2);\n    response.data = transformData2.call(config2, response.data, response.headers, config2.transformResponse);\n    return response;\n  }, function onAdapterRejection(reason) {\n    if (!isCancel2(reason)) {\n      throwIfCancellationRequested(config2);\n      if (reason && reason.response) {\n        reason.response.data = transformData2.call(config2, reason.response.data, reason.response.headers, config2.transformResponse);\n      }\n    }\n    return Promise.reject(reason);\n  });\n};\nvar utils$3 = utils$h;\nvar mergeConfig$2 = function mergeConfig(config1, config2) {\n  config2 = config2 || {};\n  var config3 = {};\n  function getMergedValue(target2, source2) {\n    if (utils$3.isPlainObject(target2) && utils$3.isPlainObject(source2)) {\n      return utils$3.merge(target2, source2);\n    } else if (utils$3.isPlainObject(source2)) {\n      return utils$3.merge({}, source2);\n    } else if (utils$3.isArray(source2)) {\n      return source2.slice();\n    }\n    return source2;\n  }\n  function mergeDeepProperties(prop) {\n    if (!utils$3.isUndefined(config2[prop])) {\n      return getMergedValue(config1[prop], config2[prop]);\n    } else if (!utils$3.isUndefined(config1[prop])) {\n      return getMergedValue(void 0, config1[prop]);\n    }\n  }\n  function valueFromConfig2(prop) {\n    if (!utils$3.isUndefined(config2[prop])) {\n      return getMergedValue(void 0, config2[prop]);\n    }\n  }\n  function defaultToConfig2(prop) {\n    if (!utils$3.isUndefined(config2[prop])) {\n      return getMergedValue(void 0, config2[prop]);\n    } else if (!utils$3.isUndefined(config1[prop])) {\n      return getMergedValue(void 0, config1[prop]);\n    }\n  }\n  function mergeDirectKeys(prop) {\n    if (prop in config2) {\n      return getMergedValue(config1[prop], config2[prop]);\n    } else if (prop in config1) {\n      return getMergedValue(void 0, config1[prop]);\n    }\n  }\n  var mergeMap = {\n    \"url\": valueFromConfig2,\n    \"method\": valueFromConfig2,\n    \"data\": valueFromConfig2,\n    \"baseURL\": defaultToConfig2,\n    \"transformRequest\": defaultToConfig2,\n    \"transformResponse\": defaultToConfig2,\n    \"paramsSerializer\": defaultToConfig2,\n    \"timeout\": defaultToConfig2,\n    \"timeoutMessage\": defaultToConfig2,\n    \"withCredentials\": defaultToConfig2,\n    \"adapter\": defaultToConfig2,\n    \"responseType\": defaultToConfig2,\n    \"xsrfCookieName\": defaultToConfig2,\n    \"xsrfHeaderName\": defaultToConfig2,\n    \"onUploadProgress\": defaultToConfig2,\n    \"onDownloadProgress\": defaultToConfig2,\n    \"decompress\": defaultToConfig2,\n    \"maxContentLength\": defaultToConfig2,\n    \"maxBodyLength\": defaultToConfig2,\n    \"beforeRedirect\": defaultToConfig2,\n    \"transport\": defaultToConfig2,\n    \"httpAgent\": defaultToConfig2,\n    \"httpsAgent\": defaultToConfig2,\n    \"cancelToken\": defaultToConfig2,\n    \"socketPath\": defaultToConfig2,\n    \"responseEncoding\": defaultToConfig2,\n    \"validateStatus\": mergeDirectKeys\n  };\n  utils$3.forEach(Object.keys(config1).concat(Object.keys(config2)), function computeConfigValue(prop) {\n    var merge2 = mergeMap[prop] || mergeDeepProperties;\n    var configValue = merge2(prop);\n    utils$3.isUndefined(configValue) && merge2 !== mergeDirectKeys || (config3[prop] = configValue);\n  });\n  return config3;\n};\nvar data$1 = {\n  \"version\": \"0.27.2\"\n};\nvar VERSION = data$1.version;\nvar AxiosError = AxiosError_1;\nvar validators$1 = {};\n[\"object\", \"boolean\", \"number\", \"function\", \"string\", \"symbol\"].forEach(function(type, i) {\n  validators$1[type] = function validator2(thing) {\n    return typeof thing === type || \"a\" + (i < 1 ? \"n \" : \" \") + type;\n  };\n});\nvar deprecatedWarnings = {};\nvalidators$1.transitional = function transitional2(validator2, version2, message) {\n  function formatMessage(opt2, desc) {\n    return \"[Axios v\" + VERSION + \"] Transitional option '\" + opt2 + \"'\" + desc + (message ? \". \" + message : \"\");\n  }\n  return function(value, opt2, opts) {\n    if (validator2 === false) {\n      throw new AxiosError(formatMessage(opt2, \" has been removed\" + (version2 ? \" in \" + version2 : \"\")), AxiosError.ERR_DEPRECATED);\n    }\n    if (version2 && !deprecatedWarnings[opt2]) {\n      deprecatedWarnings[opt2] = true;\n      console.warn(formatMessage(opt2, \" has been deprecated since v\" + version2 + \" and will be removed in the near future\"));\n    }\n    return validator2 ? validator2(value, opt2, opts) : true;\n  };\n};\nfunction assertOptions(options, schema, allowUnknown) {\n  if (typeof options !== \"object\") {\n    throw new AxiosError(\"options must be an object\", AxiosError.ERR_BAD_OPTION_VALUE);\n  }\n  var keys = Object.keys(options);\n  var i = keys.length;\n  while (i-- > 0) {\n    var opt2 = keys[i];\n    var validator2 = schema[opt2];\n    if (validator2) {\n      var value = options[opt2];\n      var result = value === void 0 || validator2(value, opt2, options);\n      if (result !== true) {\n        throw new AxiosError(\"option \" + opt2 + \" must be \" + result, AxiosError.ERR_BAD_OPTION_VALUE);\n      }\n      continue;\n    }\n    if (allowUnknown !== true) {\n      throw new AxiosError(\"Unknown option \" + opt2, AxiosError.ERR_BAD_OPTION);\n    }\n  }\n}\nvar validator$1 = {\n  assertOptions,\n  validators: validators$1\n};\nvar utils$2 = utils$h;\nvar buildURL2 = buildURL$2;\nvar InterceptorManager = InterceptorManager_1;\nvar dispatchRequest2 = dispatchRequest$1;\nvar mergeConfig$1 = mergeConfig$2;\nvar buildFullPath2 = buildFullPath$2;\nvar validator = validator$1;\nvar validators = validator.validators;\nfunction Axios$1(instanceConfig) {\n  this.defaults = instanceConfig;\n  this.interceptors = {\n    request: new InterceptorManager(),\n    response: new InterceptorManager()\n  };\n}\nAxios$1.prototype.request = function request(configOrUrl, config2) {\n  if (typeof configOrUrl === \"string\") {\n    config2 = config2 || {};\n    config2.url = configOrUrl;\n  } else {\n    config2 = configOrUrl || {};\n  }\n  config2 = mergeConfig$1(this.defaults, config2);\n  if (config2.method) {\n    config2.method = config2.method.toLowerCase();\n  } else if (this.defaults.method) {\n    config2.method = this.defaults.method.toLowerCase();\n  } else {\n    config2.method = \"get\";\n  }\n  var transitional3 = config2.transitional;\n  if (transitional3 !== void 0) {\n    validator.assertOptions(transitional3, {\n      silentJSONParsing: validators.transitional(validators.boolean),\n      forcedJSONParsing: validators.transitional(validators.boolean),\n      clarifyTimeoutError: validators.transitional(validators.boolean)\n    }, false);\n  }\n  var requestInterceptorChain = [];\n  var synchronousRequestInterceptors = true;\n  this.interceptors.request.forEach(function unshiftRequestInterceptors(interceptor) {\n    if (typeof interceptor.runWhen === \"function\" && interceptor.runWhen(config2) === false) {\n      return;\n    }\n    synchronousRequestInterceptors = synchronousRequestInterceptors && interceptor.synchronous;\n    requestInterceptorChain.unshift(interceptor.fulfilled, interceptor.rejected);\n  });\n  var responseInterceptorChain = [];\n  this.interceptors.response.forEach(function pushResponseInterceptors(interceptor) {\n    responseInterceptorChain.push(interceptor.fulfilled, interceptor.rejected);\n  });\n  var promise;\n  if (!synchronousRequestInterceptors) {\n    var chain = [dispatchRequest2, void 0];\n    Array.prototype.unshift.apply(chain, requestInterceptorChain);\n    chain = chain.concat(responseInterceptorChain);\n    promise = Promise.resolve(config2);\n    while (chain.length) {\n      promise = promise.then(chain.shift(), chain.shift());\n    }\n    return promise;\n  }\n  var newConfig = config2;\n  while (requestInterceptorChain.length) {\n    var onFulfilled = requestInterceptorChain.shift();\n    var onRejected = requestInterceptorChain.shift();\n    try {\n      newConfig = onFulfilled(newConfig);\n    } catch (error) {\n      onRejected(error);\n      break;\n    }\n  }\n  try {\n    promise = dispatchRequest2(newConfig);\n  } catch (error) {\n    return Promise.reject(error);\n  }\n  while (responseInterceptorChain.length) {\n    promise = promise.then(responseInterceptorChain.shift(), responseInterceptorChain.shift());\n  }\n  return promise;\n};\nAxios$1.prototype.getUri = function getUri(config2) {\n  config2 = mergeConfig$1(this.defaults, config2);\n  var fullPath = buildFullPath2(config2.baseURL, config2.url);\n  return buildURL2(fullPath, config2.params, config2.paramsSerializer);\n};\nutils$2.forEach([\"delete\", \"get\", \"head\", \"options\"], function forEachMethodNoData2(method) {\n  Axios$1.prototype[method] = function(url, config2) {\n    return this.request(mergeConfig$1(config2 || {}, {\n      method,\n      url,\n      data: (config2 || {}).data\n    }));\n  };\n});\nutils$2.forEach([\"post\", \"put\", \"patch\"], function forEachMethodWithData2(method) {\n  function generateHTTPMethod(isForm) {\n    return function httpMethod(url, data2, config2) {\n      return this.request(mergeConfig$1(config2 || {}, {\n        method,\n        headers: isForm ? {\n          \"Content-Type\": \"multipart/form-data\"\n        } : {},\n        url,\n        data: data2\n      }));\n    };\n  }\n  Axios$1.prototype[method] = generateHTTPMethod();\n  Axios$1.prototype[method + \"Form\"] = generateHTTPMethod(true);\n});\nvar Axios_1 = Axios$1;\nvar CanceledError = CanceledError_1;\nfunction CancelToken(executor) {\n  if (typeof executor !== \"function\") {\n    throw new TypeError(\"executor must be a function.\");\n  }\n  var resolvePromise;\n  this.promise = new Promise(function promiseExecutor(resolve) {\n    resolvePromise = resolve;\n  });\n  var token = this;\n  this.promise.then(function(cancel) {\n    if (!token._listeners)\n      return;\n    var i;\n    var l2 = token._listeners.length;\n    for (i = 0; i < l2; i++) {\n      token._listeners[i](cancel);\n    }\n    token._listeners = null;\n  });\n  this.promise.then = function(onfulfilled) {\n    var _resolve;\n    var promise = new Promise(function(resolve) {\n      token.subscribe(resolve);\n      _resolve = resolve;\n    }).then(onfulfilled);\n    promise.cancel = function reject() {\n      token.unsubscribe(_resolve);\n    };\n    return promise;\n  };\n  executor(function cancel(message) {\n    if (token.reason) {\n      return;\n    }\n    token.reason = new CanceledError(message);\n    resolvePromise(token.reason);\n  });\n}\nCancelToken.prototype.throwIfRequested = function throwIfRequested() {\n  if (this.reason) {\n    throw this.reason;\n  }\n};\nCancelToken.prototype.subscribe = function subscribe(listener) {\n  if (this.reason) {\n    listener(this.reason);\n    return;\n  }\n  if (this._listeners) {\n    this._listeners.push(listener);\n  } else {\n    this._listeners = [listener];\n  }\n};\nCancelToken.prototype.unsubscribe = function unsubscribe(listener) {\n  if (!this._listeners) {\n    return;\n  }\n  var index2 = this._listeners.indexOf(listener);\n  if (index2 !== -1) {\n    this._listeners.splice(index2, 1);\n  }\n};\nCancelToken.source = function source() {\n  var cancel;\n  var token = new CancelToken(function executor(c) {\n    cancel = c;\n  });\n  return {\n    token,\n    cancel\n  };\n};\nvar CancelToken_1 = CancelToken;\nvar spread = function spread2(callback) {\n  return function wrap2(arr) {\n    return callback.apply(null, arr);\n  };\n};\nvar utils$1 = utils$h;\nvar isAxiosError = function isAxiosError2(payload) {\n  return utils$1.isObject(payload) && payload.isAxiosError === true;\n};\nvar utils = utils$h;\nvar bind2 = bind$2;\nvar Axios = Axios_1;\nvar mergeConfig2 = mergeConfig$2;\nvar defaults = defaults_1;\nfunction createInstance(defaultConfig) {\n  var context = new Axios(defaultConfig);\n  var instance = bind2(Axios.prototype.request, context);\n  utils.extend(instance, Axios.prototype, context);\n  utils.extend(instance, context);\n  instance.create = function create(instanceConfig) {\n    return createInstance(mergeConfig2(defaultConfig, instanceConfig));\n  };\n  return instance;\n}\nvar axios$1 = createInstance(defaults);\naxios$1.Axios = Axios;\naxios$1.CanceledError = CanceledError_1;\naxios$1.CancelToken = CancelToken_1;\naxios$1.isCancel = isCancel$1;\naxios$1.VERSION = data$1.version;\naxios$1.toFormData = toFormData_1;\naxios$1.AxiosError = AxiosError_1;\naxios$1.Cancel = axios$1.CanceledError;\naxios$1.all = function all(promises) {\n  return Promise.all(promises);\n};\naxios$1.spread = spread;\naxios$1.isAxiosError = isAxiosError;\naxios$2.exports = axios$1;\naxios$2.exports.default = axios$1;\nvar axios = axios$2.exports;\nvar config = {\n  disabled: false\n};\nvar TransitionGroupContext = React.createContext(null);\nvar forceReflow = function forceReflow2(node) {\n  return node.scrollTop;\n};\nvar UNMOUNTED = \"unmounted\";\nvar EXITED = \"exited\";\nvar ENTERING = \"entering\";\nvar ENTERED = \"entered\";\nvar EXITING = \"exiting\";\nvar Transition = /* @__PURE__ */ function(_React$Component) {\n  _inheritsLoose(Transition2, _React$Component);\n  function Transition2(props, context) {\n    var _this;\n    _this = _React$Component.call(this, props, context) || this;\n    var parentGroup = context;\n    var appear = parentGroup && !parentGroup.isMounting ? props.enter : props.appear;\n    var initialStatus;\n    _this.appearStatus = null;\n    if (props.in) {\n      if (appear) {\n        initialStatus = EXITED;\n        _this.appearStatus = ENTERING;\n      } else {\n        initialStatus = ENTERED;\n      }\n    } else {\n      if (props.unmountOnExit || props.mountOnEnter) {\n        initialStatus = UNMOUNTED;\n      } else {\n        initialStatus = EXITED;\n      }\n    }\n    _this.state = {\n      status: initialStatus\n    };\n    _this.nextCallback = null;\n    return _this;\n  }\n  Transition2.getDerivedStateFromProps = function getDerivedStateFromProps(_ref2, prevState) {\n    var nextIn = _ref2.in;\n    if (nextIn && prevState.status === UNMOUNTED) {\n      return {\n        status: EXITED\n      };\n    }\n    return null;\n  };\n  var _proto = Transition2.prototype;\n  _proto.componentDidMount = function componentDidMount() {\n    this.updateStatus(true, this.appearStatus);\n  };\n  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {\n    var nextStatus = null;\n    if (prevProps !== this.props) {\n      var status = this.state.status;\n      if (this.props.in) {\n        if (status !== ENTERING && status !== ENTERED) {\n          nextStatus = ENTERING;\n        }\n      } else {\n        if (status === ENTERING || status === ENTERED) {\n          nextStatus = EXITING;\n        }\n      }\n    }\n    this.updateStatus(false, nextStatus);\n  };\n  _proto.componentWillUnmount = function componentWillUnmount() {\n    this.cancelNextCallback();\n  };\n  _proto.getTimeouts = function getTimeouts() {\n    var timeout = this.props.timeout;\n    var exit, enter, appear;\n    exit = enter = appear = timeout;\n    if (timeout != null && typeof timeout !== \"number\") {\n      exit = timeout.exit;\n      enter = timeout.enter;\n      appear = timeout.appear !== void 0 ? timeout.appear : enter;\n    }\n    return {\n      exit,\n      enter,\n      appear\n    };\n  };\n  _proto.updateStatus = function updateStatus(mounting, nextStatus) {\n    if (mounting === void 0) {\n      mounting = false;\n    }\n    if (nextStatus !== null) {\n      this.cancelNextCallback();\n      if (nextStatus === ENTERING) {\n        if (this.props.unmountOnExit || this.props.mountOnEnter) {\n          var node = this.props.nodeRef ? this.props.nodeRef.current : ReactDOM.findDOMNode(this);\n          if (node)\n            forceReflow(node);\n        }\n        this.performEnter(mounting);\n      } else {\n        this.performExit();\n      }\n    } else if (this.props.unmountOnExit && this.state.status === EXITED) {\n      this.setState({\n        status: UNMOUNTED\n      });\n    }\n  };\n  _proto.performEnter = function performEnter(mounting) {\n    var _this2 = this;\n    var enter = this.props.enter;\n    var appearing = this.context ? this.context.isMounting : mounting;\n    var _ref2 = this.props.nodeRef ? [appearing] : [ReactDOM.findDOMNode(this), appearing], maybeNode = _ref2[0], maybeAppearing = _ref2[1];\n    var timeouts = this.getTimeouts();\n    var enterTimeout = appearing ? timeouts.appear : timeouts.enter;\n    if (!mounting && !enter || config.disabled) {\n      this.safeSetState({\n        status: ENTERED\n      }, function() {\n        _this2.props.onEntered(maybeNode);\n      });\n      return;\n    }\n    this.props.onEnter(maybeNode, maybeAppearing);\n    this.safeSetState({\n      status: ENTERING\n    }, function() {\n      _this2.props.onEntering(maybeNode, maybeAppearing);\n      _this2.onTransitionEnd(enterTimeout, function() {\n        _this2.safeSetState({\n          status: ENTERED\n        }, function() {\n          _this2.props.onEntered(maybeNode, maybeAppearing);\n        });\n      });\n    });\n  };\n  _proto.performExit = function performExit() {\n    var _this3 = this;\n    var exit = this.props.exit;\n    var timeouts = this.getTimeouts();\n    var maybeNode = this.props.nodeRef ? void 0 : ReactDOM.findDOMNode(this);\n    if (!exit || config.disabled) {\n      this.safeSetState({\n        status: EXITED\n      }, function() {\n        _this3.props.onExited(maybeNode);\n      });\n      return;\n    }\n    this.props.onExit(maybeNode);\n    this.safeSetState({\n      status: EXITING\n    }, function() {\n      _this3.props.onExiting(maybeNode);\n      _this3.onTransitionEnd(timeouts.exit, function() {\n        _this3.safeSetState({\n          status: EXITED\n        }, function() {\n          _this3.props.onExited(maybeNode);\n        });\n      });\n    });\n  };\n  _proto.cancelNextCallback = function cancelNextCallback() {\n    if (this.nextCallback !== null) {\n      this.nextCallback.cancel();\n      this.nextCallback = null;\n    }\n  };\n  _proto.safeSetState = function safeSetState(nextState, callback) {\n    callback = this.setNextCallback(callback);\n    this.setState(nextState, callback);\n  };\n  _proto.setNextCallback = function setNextCallback(callback) {\n    var _this4 = this;\n    var active = true;\n    this.nextCallback = function(event) {\n      if (active) {\n        active = false;\n        _this4.nextCallback = null;\n        callback(event);\n      }\n    };\n    this.nextCallback.cancel = function() {\n      active = false;\n    };\n    return this.nextCallback;\n  };\n  _proto.onTransitionEnd = function onTransitionEnd(timeout, handler) {\n    this.setNextCallback(handler);\n    var node = this.props.nodeRef ? this.props.nodeRef.current : ReactDOM.findDOMNode(this);\n    var doesNotHaveTimeoutOrListener = timeout == null && !this.props.addEndListener;\n    if (!node || doesNotHaveTimeoutOrListener) {\n      setTimeout(this.nextCallback, 0);\n      return;\n    }\n    if (this.props.addEndListener) {\n      var _ref3 = this.props.nodeRef ? [this.nextCallback] : [node, this.nextCallback], maybeNode = _ref3[0], maybeNextCallback = _ref3[1];\n      this.props.addEndListener(maybeNode, maybeNextCallback);\n    }\n    if (timeout != null) {\n      setTimeout(this.nextCallback, timeout);\n    }\n  };\n  _proto.render = function render() {\n    var status = this.state.status;\n    if (status === UNMOUNTED) {\n      return null;\n    }\n    var _this$props = this.props, children = _this$props.children;\n    _this$props.in;\n    _this$props.mountOnEnter;\n    _this$props.unmountOnExit;\n    _this$props.appear;\n    _this$props.enter;\n    _this$props.exit;\n    _this$props.timeout;\n    _this$props.addEndListener;\n    _this$props.onEnter;\n    _this$props.onEntering;\n    _this$props.onEntered;\n    _this$props.onExit;\n    _this$props.onExiting;\n    _this$props.onExited;\n    _this$props.nodeRef;\n    var childProps = _objectWithoutPropertiesLoose(_this$props, [\"children\", \"in\", \"mountOnEnter\", \"unmountOnExit\", \"appear\", \"enter\", \"exit\", \"timeout\", \"addEndListener\", \"onEnter\", \"onEntering\", \"onEntered\", \"onExit\", \"onExiting\", \"onExited\", \"nodeRef\"]);\n    return /* @__PURE__ */ React.createElement(TransitionGroupContext.Provider, {\n      value: null\n    }, typeof children === \"function\" ? children(status, childProps) : React.cloneElement(React.Children.only(children), childProps));\n  };\n  return Transition2;\n}(React.Component);\nTransition.contextType = TransitionGroupContext;\nTransition.propTypes = {};\nfunction noop() {\n}\nTransition.defaultProps = {\n  in: false,\n  mountOnEnter: false,\n  unmountOnExit: false,\n  appear: false,\n  enter: true,\n  exit: true,\n  onEnter: noop,\n  onEntering: noop,\n  onEntered: noop,\n  onExit: noop,\n  onExiting: noop,\n  onExited: noop\n};\nTransition.UNMOUNTED = UNMOUNTED;\nTransition.EXITED = EXITED;\nTransition.ENTERING = ENTERING;\nTransition.ENTERED = ENTERED;\nTransition.EXITING = EXITING;\nvar Transition$1 = Transition;\nvar _addClass = function addClass$12(node, classes) {\n  return node && classes && classes.split(\" \").forEach(function(c) {\n    return addClass(node, c);\n  });\n};\nvar removeClass2 = function removeClass3(node, classes) {\n  return node && classes && classes.split(\" \").forEach(function(c) {\n    return removeClass$2(node, c);\n  });\n};\nvar CSSTransition = /* @__PURE__ */ function(_React$Component) {\n  _inheritsLoose(CSSTransition2, _React$Component);\n  function CSSTransition2() {\n    var _this;\n    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {\n      args[_key] = arguments[_key];\n    }\n    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;\n    _this.appliedClasses = {\n      appear: {},\n      enter: {},\n      exit: {}\n    };\n    _this.onEnter = function(maybeNode, maybeAppearing) {\n      var _this$resolveArgument = _this.resolveArguments(maybeNode, maybeAppearing), node = _this$resolveArgument[0], appearing = _this$resolveArgument[1];\n      _this.removeClasses(node, \"exit\");\n      _this.addClass(node, appearing ? \"appear\" : \"enter\", \"base\");\n      if (_this.props.onEnter) {\n        _this.props.onEnter(maybeNode, maybeAppearing);\n      }\n    };\n    _this.onEntering = function(maybeNode, maybeAppearing) {\n      var _this$resolveArgument2 = _this.resolveArguments(maybeNode, maybeAppearing), node = _this$resolveArgument2[0], appearing = _this$resolveArgument2[1];\n      var type = appearing ? \"appear\" : \"enter\";\n      _this.addClass(node, type, \"active\");\n      if (_this.props.onEntering) {\n        _this.props.onEntering(maybeNode, maybeAppearing);\n      }\n    };\n    _this.onEntered = function(maybeNode, maybeAppearing) {\n      var _this$resolveArgument3 = _this.resolveArguments(maybeNode, maybeAppearing), node = _this$resolveArgument3[0], appearing = _this$resolveArgument3[1];\n      var type = appearing ? \"appear\" : \"enter\";\n      _this.removeClasses(node, type);\n      _this.addClass(node, type, \"done\");\n      if (_this.props.onEntered) {\n        _this.props.onEntered(maybeNode, maybeAppearing);\n      }\n    };\n    _this.onExit = function(maybeNode) {\n      var _this$resolveArgument4 = _this.resolveArguments(maybeNode), node = _this$resolveArgument4[0];\n      _this.removeClasses(node, \"appear\");\n      _this.removeClasses(node, \"enter\");\n      _this.addClass(node, \"exit\", \"base\");\n      if (_this.props.onExit) {\n        _this.props.onExit(maybeNode);\n      }\n    };\n    _this.onExiting = function(maybeNode) {\n      var _this$resolveArgument5 = _this.resolveArguments(maybeNode), node = _this$resolveArgument5[0];\n      _this.addClass(node, \"exit\", \"active\");\n      if (_this.props.onExiting) {\n        _this.props.onExiting(maybeNode);\n      }\n    };\n    _this.onExited = function(maybeNode) {\n      var _this$resolveArgument6 = _this.resolveArguments(maybeNode), node = _this$resolveArgument6[0];\n      _this.removeClasses(node, \"exit\");\n      _this.addClass(node, \"exit\", \"done\");\n      if (_this.props.onExited) {\n        _this.props.onExited(maybeNode);\n      }\n    };\n    _this.resolveArguments = function(maybeNode, maybeAppearing) {\n      return _this.props.nodeRef ? [_this.props.nodeRef.current, maybeNode] : [maybeNode, maybeAppearing];\n    };\n    _this.getClassNames = function(type) {\n      var classNames = _this.props.classNames;\n      var isStringClassNames = typeof classNames === \"string\";\n      var prefix = isStringClassNames && classNames ? classNames + \"-\" : \"\";\n      var baseClassName = isStringClassNames ? \"\" + prefix + type : classNames[type];\n      var activeClassName = isStringClassNames ? baseClassName + \"-active\" : classNames[type + \"Active\"];\n      var doneClassName = isStringClassNames ? baseClassName + \"-done\" : classNames[type + \"Done\"];\n      return {\n        baseClassName,\n        activeClassName,\n        doneClassName\n      };\n    };\n    return _this;\n  }\n  var _proto = CSSTransition2.prototype;\n  _proto.addClass = function addClass2(node, type, phase) {\n    var className = this.getClassNames(type)[phase + \"ClassName\"];\n    var _this$getClassNames = this.getClassNames(\"enter\"), doneClassName = _this$getClassNames.doneClassName;\n    if (type === \"appear\" && phase === \"done\" && doneClassName) {\n      className += \" \" + doneClassName;\n    }\n    if (phase === \"active\") {\n      if (node)\n        forceReflow(node);\n    }\n    if (className) {\n      this.appliedClasses[type][phase] = className;\n      _addClass(node, className);\n    }\n  };\n  _proto.removeClasses = function removeClasses(node, type) {\n    var _this$appliedClasses$ = this.appliedClasses[type], baseClassName = _this$appliedClasses$.base, activeClassName = _this$appliedClasses$.active, doneClassName = _this$appliedClasses$.done;\n    this.appliedClasses[type] = {};\n    if (baseClassName) {\n      removeClass2(node, baseClassName);\n    }\n    if (activeClassName) {\n      removeClass2(node, activeClassName);\n    }\n    if (doneClassName) {\n      removeClass2(node, doneClassName);\n    }\n  };\n  _proto.render = function render() {\n    var _this$props = this.props;\n    _this$props.classNames;\n    var props = _objectWithoutPropertiesLoose(_this$props, [\"classNames\"]);\n    return /* @__PURE__ */ React.createElement(Transition$1, _extends({}, props, {\n      onEnter: this.onEnter,\n      onEntered: this.onEntered,\n      onEntering: this.onEntering,\n      onExit: this.onExit,\n      onExiting: this.onExiting,\n      onExited: this.onExited\n    }));\n  };\n  return CSSTransition2;\n}(React.Component);\nCSSTransition.defaultProps = {\n  classNames: \"\"\n};\nCSSTransition.propTypes = {};\nvar CSSTransition$1 = CSSTransition;\nvar index$e = \"\";\nfunction ownKeys$d(object, enumerableOnly) {\n  var keys = Object.keys(object);\n  if (Object.getOwnPropertySymbols) {\n    var symbols = Object.getOwnPropertySymbols(object);\n    if (enumerableOnly) {\n      symbols = symbols.filter(function(sym) {\n        return Object.getOwnPropertyDescriptor(object, sym).enumerable;\n      });\n    }\n    keys.push.apply(keys, symbols);\n  }\n  return keys;\n}\nfunction _objectSpread$d(target2) {\n  for (var i = 1; i < arguments.length; i++) {\n    var source2 = arguments[i] != null ? arguments[i] : {};\n    if (i % 2) {\n      ownKeys$d(Object(source2), true).forEach(function(key) {\n        _defineProperty(target2, key, source2[key]);\n      });\n    } else if (Object.getOwnPropertyDescriptors) {\n      Object.defineProperties(target2, Object.getOwnPropertyDescriptors(source2));\n    } else {\n      ownKeys$d(Object(source2)).forEach(function(key) {\n        Object.defineProperty(target2, key, Object.getOwnPropertyDescriptor(source2, key));\n      });\n    }\n  }\n  return target2;\n}\nfunction IconArrowRightComponent(iconProps, ref) {\n  var _useContext = react.exports.useContext(IconContext), prefixCls2 = _useContext.prefixCls;\n  var spin = iconProps.spin, className = iconProps.className;\n  var props = _objectSpread$d(_objectSpread$d({\n    ref\n  }, iconProps), {}, {\n    className: \"\".concat(className ? className + \" \" : \"\").concat(prefixCls2, \"-icon \").concat(prefixCls2, \"-icon-arrow-right\")\n  });\n  if (spin) {\n    props.className = \"\".concat(props.className, \" \").concat(prefixCls2, \"-icon-loading\");\n  }\n  delete props.spin;\n  delete props.isIcon;\n  return /* @__PURE__ */ React.createElement(\"svg\", _extends({\n    fill: \"none\",\n    stroke: \"currentColor\",\n    strokeWidth: \"4\",\n    viewBox: \"0 0 48 48\",\n    width: \"1em\",\n    height: \"1em\"\n  }, props), /* @__PURE__ */ React.createElement(\"path\", {\n    d: \"m27.728 11.27 12.728 12.728-12.728 12.728M5 24h34.295\"\n  }));\n}\nvar IconArrowRight = /* @__PURE__ */ React.forwardRef(IconArrowRightComponent);\nIconArrowRight.defaultProps = {\n  isIcon: true\n};\nIconArrowRight.displayName = \"IconArrowRight\";\nvar IconArrowRight$1 = IconArrowRight;\nfunction ownKeys$c(object, enumerableOnly) {\n  var keys = Object.keys(object);\n  if (Object.getOwnPropertySymbols) {\n    var symbols = Object.getOwnPropertySymbols(object);\n    if (enumerableOnly) {\n      symbols = symbols.filter(function(sym) {\n        return Object.getOwnPropertyDescriptor(object, sym).enumerable;\n      });\n    }\n    keys.push.apply(keys, symbols);\n  }\n  return keys;\n}\nfunction _objectSpread$c(target2) {\n  for (var i = 1; i < arguments.length; i++) {\n    var source2 = arguments[i] != null ? arguments[i] : {};\n    if (i % 2) {\n      ownKeys$c(Object(source2), true).forEach(function(key) {\n        _defineProperty(target2, key, source2[key]);\n      });\n    } else if (Object.getOwnPropertyDescriptors) {\n      Object.defineProperties(target2, Object.getOwnPropertyDescriptors(source2));\n    } else {\n      ownKeys$c(Object(source2)).forEach(function(key) {\n        Object.defineProperty(target2, key, Object.getOwnPropertyDescriptor(source2, key));\n      });\n    }\n  }\n  return target2;\n}\nfunction IconCustomerServiceComponent(iconProps, ref) {\n  var _useContext = react.exports.useContext(IconContext), prefixCls2 = _useContext.prefixCls;\n  var spin = iconProps.spin, className = iconProps.className;\n  var props = _objectSpread$c(_objectSpread$c({\n    ref\n  }, iconProps), {}, {\n    className: \"\".concat(className ? className + \" \" : \"\").concat(prefixCls2, \"-icon \").concat(prefixCls2, \"-icon-customer-service\")\n  });\n  if (spin) {\n    props.className = \"\".concat(props.className, \" \").concat(prefixCls2, \"-icon-loading\");\n  }\n  delete props.spin;\n  delete props.isIcon;\n  return /* @__PURE__ */ React.createElement(\"svg\", _extends({\n    fill: \"none\",\n    stroke: \"currentColor\",\n    strokeWidth: \"4\",\n    viewBox: \"0 0 48 48\",\n    width: \"1em\",\n    height: \"1em\"\n  }, props), /* @__PURE__ */ React.createElement(\"path\", {\n    d: \"M11 31V20c0-7.18 5.82-13 13-13s13 5.82 13 13v8c0 5.784-3.778 10.686-9 12.373m0 0A12.99 12.99 0 0 1 24 41h-3a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v2.373Zm0 0V41m9-20h3a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1h-3v-8Zm-26 0H8a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h3v-8Z\"\n  }));\n}\nvar IconCustomerService = /* @__PURE__ */ React.forwardRef(IconCustomerServiceComponent);\nIconCustomerService.defaultProps = {\n  isIcon: true\n};\nIconCustomerService.displayName = \"IconCustomerService\";\nvar IconCustomerService$1 = IconCustomerService;\nfunction ownKeys$b(object, enumerableOnly) {\n  var keys = Object.keys(object);\n  if (Object.getOwnPropertySymbols) {\n    var symbols = Object.getOwnPropertySymbols(object);\n    if (enumerableOnly) {\n      symbols = symbols.filter(function(sym) {\n        return Object.getOwnPropertyDescriptor(object, sym).enumerable;\n      });\n    }\n    keys.push.apply(keys, symbols);\n  }\n  return keys;\n}\nfunction _objectSpread$b(target2) {\n  for (var i = 1; i < arguments.length; i++) {\n    var source2 = arguments[i] != null ? arguments[i] : {};\n    if (i % 2) {\n      ownKeys$b(Object(source2), true).forEach(function(key) {\n        _defineProperty(target2, key, source2[key]);\n      });\n    } else if (Object.getOwnPropertyDescriptors) {\n      Object.defineProperties(target2, Object.getOwnPropertyDescriptors(source2));\n    } else {\n      ownKeys$b(Object(source2)).forEach(function(key) {\n        Object.defineProperty(target2, key, Object.getOwnPropertyDescriptor(source2, key));\n      });\n    }\n  }\n  return target2;\n}\nfunction IconExportComponent(iconProps, ref) {\n  var _useContext = react.exports.useContext(IconContext), prefixCls2 = _useContext.prefixCls;\n  var spin = iconProps.spin, className = iconProps.className;\n  var props = _objectSpread$b(_objectSpread$b({\n    ref\n  }, iconProps), {}, {\n    className: \"\".concat(className ? className + \" \" : \"\").concat(prefixCls2, \"-icon \").concat(prefixCls2, \"-icon-export\")\n  });\n  if (spin) {\n    props.className = \"\".concat(props.className, \" \").concat(prefixCls2, \"-icon-loading\");\n  }\n  delete props.spin;\n  delete props.isIcon;\n  return /* @__PURE__ */ React.createElement(\"svg\", _extends({\n    fill: \"none\",\n    stroke: \"currentColor\",\n    strokeWidth: \"4\",\n    viewBox: \"0 0 48 48\",\n    width: \"1em\",\n    height: \"1em\"\n  }, props), /* @__PURE__ */ React.createElement(\"path\", {\n    d: \"M31.928 33.072 41 24.002l-9.072-9.072M16.858 24h24M31 41H7V7h24\"\n  }));\n}\nvar IconExport = /* @__PURE__ */ React.forwardRef(IconExportComponent);\nIconExport.defaultProps = {\n  isIcon: true\n};\nIconExport.displayName = \"IconExport\";\nvar IconExport$1 = IconExport;\nfunction ownKeys$a(object, enumerableOnly) {\n  var keys = Object.keys(object);\n  if (Object.getOwnPropertySymbols) {\n    var symbols = Object.getOwnPropertySymbols(object);\n    if (enumerableOnly) {\n      symbols = symbols.filter(function(sym) {\n        return Object.getOwnPropertyDescriptor(object, sym).enumerable;\n      });\n    }\n    keys.push.apply(keys, symbols);\n  }\n  return keys;\n}\nfunction _objectSpread$a(target2) {\n  for (var i = 1; i < arguments.length; i++) {\n    var source2 = arguments[i] != null ? arguments[i] : {};\n    if (i % 2) {\n      ownKeys$a(Object(source2), true).forEach(function(key) {\n        _defineProperty(target2, key, source2[key]);\n      });\n    } else if (Object.getOwnPropertyDescriptors) {\n      Object.defineProperties(target2, Object.getOwnPropertyDescriptors(source2));\n    } else {\n      ownKeys$a(Object(source2)).forEach(function(key) {\n        Object.defineProperty(target2, key, Object.getOwnPropertyDescriptor(source2, key));\n      });\n    }\n  }\n  return target2;\n}\nfunction IconHistoryComponent(iconProps, ref) {\n  var _useContext = react.exports.useContext(IconContext), prefixCls2 = _useContext.prefixCls;\n  var spin = iconProps.spin, className = iconProps.className;\n  var props = _objectSpread$a(_objectSpread$a({\n    ref\n  }, iconProps), {}, {\n    className: \"\".concat(className ? className + \" \" : \"\").concat(prefixCls2, \"-icon \").concat(prefixCls2, \"-icon-history\")\n  });\n  if (spin) {\n    props.className = \"\".concat(props.className, \" \").concat(prefixCls2, \"-icon-loading\");\n  }\n  delete props.spin;\n  delete props.isIcon;\n  return /* @__PURE__ */ React.createElement(\"svg\", _extends({\n    fill: \"none\",\n    stroke: \"currentColor\",\n    strokeWidth: \"4\",\n    viewBox: \"0 0 48 48\",\n    width: \"1em\",\n    height: \"1em\"\n  }, props), /* @__PURE__ */ React.createElement(\"path\", {\n    d: \"M6 24c0-9.941 8.059-18 18-18s18 8.059 18 18-8.059 18-18 18c-6.26 0-11.775-3.197-15-8.047M6 24l-.5-.757h1L6 24Zm26 2h-9v-9\"\n  }));\n}\nvar IconHistory = /* @__PURE__ */ React.forwardRef(IconHistoryComponent);\nIconHistory.defaultProps = {\n  isIcon: true\n};\nIconHistory.displayName = \"IconHistory\";\nvar IconHistory$1 = IconHistory;\nfunction ownKeys$9(object, enumerableOnly) {\n  var keys = Object.keys(object);\n  if (Object.getOwnPropertySymbols) {\n    var symbols = Object.getOwnPropertySymbols(object);\n    if (enumerableOnly) {\n      symbols = symbols.filter(function(sym) {\n        return Object.getOwnPropertyDescriptor(object, sym).enumerable;\n      });\n    }\n    keys.push.apply(keys, symbols);\n  }\n  return keys;\n}\nfunction _objectSpread$9(target2) {\n  for (var i = 1; i < arguments.length; i++) {\n    var source2 = arguments[i] != null ? arguments[i] : {};\n    if (i % 2) {\n      ownKeys$9(Object(source2), true).forEach(function(key) {\n        _defineProperty(target2, key, source2[key]);\n      });\n    } else if (Object.getOwnPropertyDescriptors) {\n      Object.defineProperties(target2, Object.getOwnPropertyDescriptors(source2));\n    } else {\n      ownKeys$9(Object(source2)).forEach(function(key) {\n        Object.defineProperty(target2, key, Object.getOwnPropertyDescriptor(source2, key));\n      });\n    }\n  }\n  return target2;\n}\nfunction IconImportComponent(iconProps, ref) {\n  var _useContext = react.exports.useContext(IconContext), prefixCls2 = _useContext.prefixCls;\n  var spin = iconProps.spin, className = iconProps.className;\n  var props = _objectSpread$9(_objectSpread$9({\n    ref\n  }, iconProps), {}, {\n    className: \"\".concat(className ? className + \" \" : \"\").concat(prefixCls2, \"-icon \").concat(prefixCls2, \"-icon-import\")\n  });\n  if (spin) {\n    props.className = \"\".concat(props.className, \" \").concat(prefixCls2, \"-icon-loading\");\n  }\n  delete props.spin;\n  delete props.isIcon;\n  return /* @__PURE__ */ React.createElement(\"svg\", _extends({\n    fill: \"none\",\n    stroke: \"currentColor\",\n    strokeWidth: \"4\",\n    viewBox: \"0 0 48 48\",\n    width: \"1em\",\n    height: \"1em\"\n  }, props), /* @__PURE__ */ React.createElement(\"path\", {\n    d: \"m27.929 33.072-9.071-9.07 9.07-9.072M43 24H19m12 17H7V7h24\"\n  }));\n}\nvar IconImport = /* @__PURE__ */ React.forwardRef(IconImportComponent);\nIconImport.defaultProps = {\n  isIcon: true\n};\nIconImport.displayName = \"IconImport\";\nvar IconImport$1 = IconImport;\nfunction ownKeys$8(object, enumerableOnly) {\n  var keys = Object.keys(object);\n  if (Object.getOwnPropertySymbols) {\n    var symbols = Object.getOwnPropertySymbols(object);\n    if (enumerableOnly) {\n      symbols = symbols.filter(function(sym) {\n        return Object.getOwnPropertyDescriptor(object, sym).enumerable;\n      });\n    }\n    keys.push.apply(keys, symbols);\n  }\n  return keys;\n}\nfunction _objectSpread$8(target2) {\n  for (var i = 1; i < arguments.length; i++) {\n    var source2 = arguments[i] != null ? arguments[i] : {};\n    if (i % 2) {\n      ownKeys$8(Object(source2), true).forEach(function(key) {\n        _defineProperty(target2, key, source2[key]);\n      });\n    } else if (Object.getOwnPropertyDescriptors) {\n      Object.defineProperties(target2, Object.getOwnPropertyDescriptors(source2));\n    } else {\n      ownKeys$8(Object(source2)).forEach(function(key) {\n        Object.defineProperty(target2, key, Object.getOwnPropertyDescriptor(source2, key));\n      });\n    }\n  }\n  return target2;\n}\nfunction IconLaunchComponent(iconProps, ref) {\n  var _useContext = react.exports.useContext(IconContext), prefixCls2 = _useContext.prefixCls;\n  var spin = iconProps.spin, className = iconProps.className;\n  var props = _objectSpread$8(_objectSpread$8({\n    ref\n  }, iconProps), {}, {\n    className: \"\".concat(className ? className + \" \" : \"\").concat(prefixCls2, \"-icon \").concat(prefixCls2, \"-icon-launch\")\n  });\n  if (spin) {\n    props.className = \"\".concat(props.className, \" \").concat(prefixCls2, \"-icon-loading\");\n  }\n  delete props.spin;\n  delete props.isIcon;\n  return /* @__PURE__ */ React.createElement(\"svg\", _extends({\n    fill: \"none\",\n    stroke: \"currentColor\",\n    strokeWidth: \"4\",\n    viewBox: \"0 0 48 48\",\n    width: \"1em\",\n    height: \"1em\"\n  }, props), /* @__PURE__ */ React.createElement(\"path\", {\n    d: \"M41 26v14a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1h14M19.822 28.178 39.899 8.1M41 20V7H28\"\n  }));\n}\nvar IconLaunch = /* @__PURE__ */ React.forwardRef(IconLaunchComponent);\nIconLaunch.defaultProps = {\n  isIcon: true\n};\nIconLaunch.displayName = \"IconLaunch\";\nvar IconLaunch$1 = IconLaunch;\nfunction ownKeys$7(object, enumerableOnly) {\n  var keys = Object.keys(object);\n  if (Object.getOwnPropertySymbols) {\n    var symbols = Object.getOwnPropertySymbols(object);\n    if (enumerableOnly) {\n      symbols = symbols.filter(function(sym) {\n        return Object.getOwnPropertyDescriptor(object, sym).enumerable;\n      });\n    }\n    keys.push.apply(keys, symbols);\n  }\n  return keys;\n}\nfunction _objectSpread$7(target2) {\n  for (var i = 1; i < arguments.length; i++) {\n    var source2 = arguments[i] != null ? arguments[i] : {};\n    if (i % 2) {\n      ownKeys$7(Object(source2), true).forEach(function(key) {\n        _defineProperty(target2, key, source2[key]);\n      });\n    } else if (Object.getOwnPropertyDescriptors) {\n      Object.defineProperties(target2, Object.getOwnPropertyDescriptors(source2));\n    } else {\n      ownKeys$7(Object(source2)).forEach(function(key) {\n        Object.defineProperty(target2, key, Object.getOwnPropertyDescriptor(source2, key));\n      });\n    }\n  }\n  return target2;\n}\nfunction IconGithubComponent(iconProps, ref) {\n  var _useContext = react.exports.useContext(IconContext), prefixCls2 = _useContext.prefixCls;\n  var spin = iconProps.spin, className = iconProps.className;\n  var props = _objectSpread$7(_objectSpread$7({\n    ref\n  }, iconProps), {}, {\n    className: \"\".concat(className ? className + \" \" : \"\").concat(prefixCls2, \"-icon \").concat(prefixCls2, \"-icon-github\")\n  });\n  if (spin) {\n    props.className = \"\".concat(props.className, \" \").concat(prefixCls2, \"-icon-loading\");\n  }\n  delete props.spin;\n  delete props.isIcon;\n  return /* @__PURE__ */ React.createElement(\"svg\", _extends({\n    fill: \"none\",\n    stroke: \"currentColor\",\n    strokeWidth: \"4\",\n    viewBox: \"0 0 48 48\",\n    width: \"1em\",\n    height: \"1em\"\n  }, props), /* @__PURE__ */ React.createElement(\"path\", {\n    fill: \"currentColor\",\n    stroke: \"none\",\n    d: \"M.056 24.618c0 10.454 6.7 19.344 16.038 22.608 1.259.32 1.067-.582 1.067-1.19v-4.148c-7.265.853-7.553-3.957-8.043-4.758-.987-1.686-3.312-2.112-2.62-2.912 1.654-.853 3.34.213 5.291 3.1 1.413 2.09 4.166 1.738 5.562 1.385a6.777 6.777 0 0 1 1.856-3.253C11.687 34.112 8.55 29.519 8.55 24.057c0-2.646.874-5.082 2.586-7.045-1.088-3.243.102-6.01.26-6.422 3.11-.282 6.337 2.225 6.587 2.421 1.766-.474 3.782-.73 6.038-.73 2.266 0 4.293.26 6.069.74.603-.458 3.6-2.608 6.49-2.345.155.41 1.317 3.12.294 6.315 1.734 1.968 2.62 4.422 2.62 7.077 0 5.472-3.158 10.07-10.699 11.397a6.82 6.82 0 0 1 2.037 4.875v6.02c.042.48 0 .96.806.96 9.477-3.194 16.299-12.15 16.299-22.697C47.938 11.396 37.218.68 23.996.68 10.77.675.055 11.391.055 24.617l.001.001Z\"\n  }));\n}\nvar IconGithub = /* @__PURE__ */ React.forwardRef(IconGithubComponent);\nIconGithub.defaultProps = {\n  isIcon: true\n};\nIconGithub.displayName = \"IconGithub\";\nvar IconGithub$1 = IconGithub;\nfunction ownKeys$6(object, enumerableOnly) {\n  var keys = Object.keys(object);\n  if (Object.getOwnPropertySymbols) {\n    var symbols = Object.getOwnPropertySymbols(object);\n    if (enumerableOnly) {\n      symbols = symbols.filter(function(sym) {\n        return Object.getOwnPropertyDescriptor(object, sym).enumerable;\n      });\n    }\n    keys.push.apply(keys, symbols);\n  }\n  return keys;\n}\nfunction _objectSpread$6(target2) {\n  for (var i = 1; i < arguments.length; i++) {\n    var source2 = arguments[i] != null ? arguments[i] : {};\n    if (i % 2) {\n      ownKeys$6(Object(source2), true).forEach(function(key) {\n        _defineProperty(target2, key, source2[key]);\n      });\n    } else if (Object.getOwnPropertyDescriptors) {\n      Object.defineProperties(target2, Object.getOwnPropertyDescriptors(source2));\n    } else {\n      ownKeys$6(Object(source2)).forEach(function(key) {\n        Object.defineProperty(target2, key, Object.getOwnPropertyDescriptor(source2, key));\n      });\n    }\n  }\n  return target2;\n}\nfunction IconMoonFillComponent(iconProps, ref) {\n  var _useContext = react.exports.useContext(IconContext), prefixCls2 = _useContext.prefixCls;\n  var spin = iconProps.spin, className = iconProps.className;\n  var props = _objectSpread$6(_objectSpread$6({\n    ref\n  }, iconProps), {}, {\n    className: \"\".concat(className ? className + \" \" : \"\").concat(prefixCls2, \"-icon \").concat(prefixCls2, \"-icon-moon-fill\")\n  });\n  if (spin) {\n    props.className = \"\".concat(props.className, \" \").concat(prefixCls2, \"-icon-loading\");\n  }\n  delete props.spin;\n  delete props.isIcon;\n  return /* @__PURE__ */ React.createElement(\"svg\", _extends({\n    fill: \"none\",\n    stroke: \"currentColor\",\n    strokeWidth: \"4\",\n    viewBox: \"0 0 48 48\",\n    width: \"1em\",\n    height: \"1em\"\n  }, props), /* @__PURE__ */ React.createElement(\"path\", {\n    fill: \"currentColor\",\n    stroke: \"none\",\n    d: \"M42.108 29.769c.124-.387-.258-.736-.645-.613A17.99 17.99 0 0 1 36 30c-9.941 0-18-8.059-18-18 0-1.904.296-3.74.844-5.463.123-.387-.226-.768-.613-.645C10.558 8.334 5 15.518 5 24c0 10.493 8.507 19 19 19 8.482 0 15.666-5.558 18.108-13.231Z\"\n  }));\n}\nvar IconMoonFill = /* @__PURE__ */ React.forwardRef(IconMoonFillComponent);\nIconMoonFill.defaultProps = {\n  isIcon: true\n};\nIconMoonFill.displayName = \"IconMoonFill\";\nvar IconMoonFill$1 = IconMoonFill;\nfunction ownKeys$5(object, enumerableOnly) {\n  var keys = Object.keys(object);\n  if (Object.getOwnPropertySymbols) {\n    var symbols = Object.getOwnPropertySymbols(object);\n    if (enumerableOnly) {\n      symbols = symbols.filter(function(sym) {\n        return Object.getOwnPropertyDescriptor(object, sym).enumerable;\n      });\n    }\n    keys.push.apply(keys, symbols);\n  }\n  return keys;\n}\nfunction _objectSpread$5(target2) {\n  for (var i = 1; i < arguments.length; i++) {\n    var source2 = arguments[i] != null ? arguments[i] : {};\n    if (i % 2) {\n      ownKeys$5(Object(source2), true).forEach(function(key) {\n        _defineProperty(target2, key, source2[key]);\n      });\n    } else if (Object.getOwnPropertyDescriptors) {\n      Object.defineProperties(target2, Object.getOwnPropertyDescriptors(source2));\n    } else {\n      ownKeys$5(Object(source2)).forEach(function(key) {\n        Object.defineProperty(target2, key, Object.getOwnPropertyDescriptor(source2, key));\n      });\n    }\n  }\n  return target2;\n}\nfunction IconSunFillComponent(iconProps, ref) {\n  var _useContext = react.exports.useContext(IconContext), prefixCls2 = _useContext.prefixCls;\n  var spin = iconProps.spin, className = iconProps.className;\n  var props = _objectSpread$5(_objectSpread$5({\n    ref\n  }, iconProps), {}, {\n    className: \"\".concat(className ? className + \" \" : \"\").concat(prefixCls2, \"-icon \").concat(prefixCls2, \"-icon-sun-fill\")\n  });\n  if (spin) {\n    props.className = \"\".concat(props.className, \" \").concat(prefixCls2, \"-icon-loading\");\n  }\n  delete props.spin;\n  delete props.isIcon;\n  return /* @__PURE__ */ React.createElement(\"svg\", _extends({\n    fill: \"none\",\n    stroke: \"currentColor\",\n    strokeWidth: \"4\",\n    viewBox: \"0 0 48 48\",\n    width: \"1em\",\n    height: \"1em\"\n  }, props), /* @__PURE__ */ React.createElement(\"circle\", {\n    cx: \"24\",\n    cy: \"24\",\n    r: \"9\",\n    fill: \"currentColor\",\n    stroke: \"none\"\n  }), /* @__PURE__ */ React.createElement(\"path\", {\n    fill: \"currentColor\",\n    stroke: \"none\",\n    d: \"M21 5.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-.5.5h-5a.5.5 0 0 1-.5-.5v-5ZM21 37.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-.5.5h-5a.5.5 0 0 1-.5-.5v-5ZM42.5 21a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-.5.5h-5a.5.5 0 0 1-.5-.5v-5a.5.5 0 0 1 .5-.5h5ZM10.5 21a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-.5.5h-5a.5.5 0 0 1-.5-.5v-5a.5.5 0 0 1 .5-.5h5ZM39.203 34.96a.5.5 0 0 1 0 .707l-3.536 3.536a.5.5 0 0 1-.707 0l-3.535-3.536a.5.5 0 0 1 0-.707l3.535-3.535a.5.5 0 0 1 .707 0l3.536 3.535ZM16.575 12.333a.5.5 0 0 1 0 .707l-3.535 3.535a.5.5 0 0 1-.707 0L8.797 13.04a.5.5 0 0 1 0-.707l3.536-3.536a.5.5 0 0 1 .707 0l3.535 3.536ZM13.04 39.203a.5.5 0 0 1-.707 0l-3.536-3.536a.5.5 0 0 1 0-.707l3.536-3.535a.5.5 0 0 1 .707 0l3.536 3.535a.5.5 0 0 1 0 .707l-3.536 3.536ZM35.668 16.575a.5.5 0 0 1-.708 0l-3.535-3.535a.5.5 0 0 1 0-.707l3.535-3.536a.5.5 0 0 1 .708 0l3.535 3.536a.5.5 0 0 1 0 .707l-3.535 3.535Z\"\n  }));\n}\nvar IconSunFill = /* @__PURE__ */ React.forwardRef(IconSunFillComponent);\nIconSunFill.defaultProps = {\n  isIcon: true\n};\nIconSunFill.displayName = \"IconSunFill\";\nvar IconSunFill$1 = IconSunFill;\nfunction ownKeys$4(object, enumerableOnly) {\n  var keys = Object.keys(object);\n  if (Object.getOwnPropertySymbols) {\n    var symbols = Object.getOwnPropertySymbols(object);\n    if (enumerableOnly) {\n      symbols = symbols.filter(function(sym) {\n        return Object.getOwnPropertyDescriptor(object, sym).enumerable;\n      });\n    }\n    keys.push.apply(keys, symbols);\n  }\n  return keys;\n}\nfunction _objectSpread$4(target2) {\n  for (var i = 1; i < arguments.length; i++) {\n    var source2 = arguments[i] != null ? arguments[i] : {};\n    if (i % 2) {\n      ownKeys$4(Object(source2), true).forEach(function(key) {\n        _defineProperty(target2, key, source2[key]);\n      });\n    } else if (Object.getOwnPropertyDescriptors) {\n      Object.defineProperties(target2, Object.getOwnPropertyDescriptors(source2));\n    } else {\n      ownKeys$4(Object(source2)).forEach(function(key) {\n        Object.defineProperty(target2, key, Object.getOwnPropertyDescriptor(source2, key));\n      });\n    }\n  }\n  return target2;\n}\nfunction IconDesktopComponent(iconProps, ref) {\n  var _useContext = react.exports.useContext(IconContext), prefixCls2 = _useContext.prefixCls;\n  var spin = iconProps.spin, className = iconProps.className;\n  var props = _objectSpread$4(_objectSpread$4({\n    ref\n  }, iconProps), {}, {\n    className: \"\".concat(className ? className + \" \" : \"\").concat(prefixCls2, \"-icon \").concat(prefixCls2, \"-icon-desktop\")\n  });\n  if (spin) {\n    props.className = \"\".concat(props.className, \" \").concat(prefixCls2, \"-icon-loading\");\n  }\n  delete props.spin;\n  delete props.isIcon;\n  return /* @__PURE__ */ React.createElement(\"svg\", _extends({\n    fill: \"none\",\n    stroke: \"currentColor\",\n    strokeWidth: \"4\",\n    viewBox: \"0 0 48 48\",\n    width: \"1em\",\n    height: \"1em\"\n  }, props), /* @__PURE__ */ React.createElement(\"path\", {\n    d: \"M24 32v8m0 0h-9m9 0h9M7 32h34a1 1 0 0 0 1-1V9a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1v22a1 1 0 0 0 1 1Z\"\n  }));\n}\nvar IconDesktop = /* @__PURE__ */ React.forwardRef(IconDesktopComponent);\nIconDesktop.defaultProps = {\n  isIcon: true\n};\nIconDesktop.displayName = \"IconDesktop\";\nvar IconDesktop$1 = IconDesktop;\nfunction ownKeys$3(object, enumerableOnly) {\n  var keys = Object.keys(object);\n  if (Object.getOwnPropertySymbols) {\n    var symbols = Object.getOwnPropertySymbols(object);\n    if (enumerableOnly) {\n      symbols = symbols.filter(function(sym) {\n        return Object.getOwnPropertyDescriptor(object, sym).enumerable;\n      });\n    }\n    keys.push.apply(keys, symbols);\n  }\n  return keys;\n}\nfunction _objectSpread$3(target2) {\n  for (var i = 1; i < arguments.length; i++) {\n    var source2 = arguments[i] != null ? arguments[i] : {};\n    if (i % 2) {\n      ownKeys$3(Object(source2), true).forEach(function(key) {\n        _defineProperty(target2, key, source2[key]);\n      });\n    } else if (Object.getOwnPropertyDescriptors) {\n      Object.defineProperties(target2, Object.getOwnPropertyDescriptors(source2));\n    } else {\n      ownKeys$3(Object(source2)).forEach(function(key) {\n        Object.defineProperty(target2, key, Object.getOwnPropertyDescriptor(source2, key));\n      });\n    }\n  }\n  return target2;\n}\nfunction IconMenuComponent(iconProps, ref) {\n  var _useContext = react.exports.useContext(IconContext), prefixCls2 = _useContext.prefixCls;\n  var spin = iconProps.spin, className = iconProps.className;\n  var props = _objectSpread$3(_objectSpread$3({\n    ref\n  }, iconProps), {}, {\n    className: \"\".concat(className ? className + \" \" : \"\").concat(prefixCls2, \"-icon \").concat(prefixCls2, \"-icon-menu\")\n  });\n  if (spin) {\n    props.className = \"\".concat(props.className, \" \").concat(prefixCls2, \"-icon-loading\");\n  }\n  delete props.spin;\n  delete props.isIcon;\n  return /* @__PURE__ */ React.createElement(\"svg\", _extends({\n    fill: \"none\",\n    stroke: \"currentColor\",\n    strokeWidth: \"4\",\n    viewBox: \"0 0 48 48\",\n    width: \"1em\",\n    height: \"1em\"\n  }, props), /* @__PURE__ */ React.createElement(\"path\", {\n    d: \"M5 10h38M5 24h38M5 38h38\"\n  }));\n}\nvar IconMenu = /* @__PURE__ */ React.forwardRef(IconMenuComponent);\nIconMenu.defaultProps = {\n  isIcon: true\n};\nIconMenu.displayName = \"IconMenu\";\nvar IconMenu$1 = IconMenu;\nfunction ownKeys$2(object, enumerableOnly) {\n  var keys = Object.keys(object);\n  if (Object.getOwnPropertySymbols) {\n    var symbols = Object.getOwnPropertySymbols(object);\n    if (enumerableOnly) {\n      symbols = symbols.filter(function(sym) {\n        return Object.getOwnPropertyDescriptor(object, sym).enumerable;\n      });\n    }\n    keys.push.apply(keys, symbols);\n  }\n  return keys;\n}\nfunction _objectSpread$2(target2) {\n  for (var i = 1; i < arguments.length; i++) {\n    var source2 = arguments[i] != null ? arguments[i] : {};\n    if (i % 2) {\n      ownKeys$2(Object(source2), true).forEach(function(key) {\n        _defineProperty(target2, key, source2[key]);\n      });\n    } else if (Object.getOwnPropertyDescriptors) {\n      Object.defineProperties(target2, Object.getOwnPropertyDescriptors(source2));\n    } else {\n      ownKeys$2(Object(source2)).forEach(function(key) {\n        Object.defineProperty(target2, key, Object.getOwnPropertyDescriptor(source2, key));\n      });\n    }\n  }\n  return target2;\n}\nfunction IconNotificationComponent(iconProps, ref) {\n  var _useContext = react.exports.useContext(IconContext), prefixCls2 = _useContext.prefixCls;\n  var spin = iconProps.spin, className = iconProps.className;\n  var props = _objectSpread$2(_objectSpread$2({\n    ref\n  }, iconProps), {}, {\n    className: \"\".concat(className ? className + \" \" : \"\").concat(prefixCls2, \"-icon \").concat(prefixCls2, \"-icon-notification\")\n  });\n  if (spin) {\n    props.className = \"\".concat(props.className, \" \").concat(prefixCls2, \"-icon-loading\");\n  }\n  delete props.spin;\n  delete props.isIcon;\n  return /* @__PURE__ */ React.createElement(\"svg\", _extends({\n    fill: \"none\",\n    stroke: \"currentColor\",\n    strokeWidth: \"4\",\n    viewBox: \"0 0 48 48\",\n    width: \"1em\",\n    height: \"1em\"\n  }, props), /* @__PURE__ */ React.createElement(\"path\", {\n    d: \"M24 9c7.18 0 13 5.82 13 13v13H11V22c0-7.18 5.82-13 13-13Zm0 0V4M6 35h36m-25 7h14\"\n  }));\n}\nvar IconNotification = /* @__PURE__ */ React.forwardRef(IconNotificationComponent);\nIconNotification.defaultProps = {\n  isIcon: true\n};\nIconNotification.displayName = \"IconNotification\";\nvar IconNotification$1 = IconNotification;\nfunction ownKeys$1(object, enumerableOnly) {\n  var keys = Object.keys(object);\n  if (Object.getOwnPropertySymbols) {\n    var symbols = Object.getOwnPropertySymbols(object);\n    if (enumerableOnly) {\n      symbols = symbols.filter(function(sym) {\n        return Object.getOwnPropertyDescriptor(object, sym).enumerable;\n      });\n    }\n    keys.push.apply(keys, symbols);\n  }\n  return keys;\n}\nfunction _objectSpread$1(target2) {\n  for (var i = 1; i < arguments.length; i++) {\n    var source2 = arguments[i] != null ? arguments[i] : {};\n    if (i % 2) {\n      ownKeys$1(Object(source2), true).forEach(function(key) {\n        _defineProperty(target2, key, source2[key]);\n      });\n    } else if (Object.getOwnPropertyDescriptors) {\n      Object.defineProperties(target2, Object.getOwnPropertyDescriptors(source2));\n    } else {\n      ownKeys$1(Object(source2)).forEach(function(key) {\n        Object.defineProperty(target2, key, Object.getOwnPropertyDescriptor(source2, key));\n      });\n    }\n  }\n  return target2;\n}\nfunction IconTagsComponent(iconProps, ref) {\n  var _useContext = react.exports.useContext(IconContext), prefixCls2 = _useContext.prefixCls;\n  var spin = iconProps.spin, className = iconProps.className;\n  var props = _objectSpread$1(_objectSpread$1({\n    ref\n  }, iconProps), {}, {\n    className: \"\".concat(className ? className + \" \" : \"\").concat(prefixCls2, \"-icon \").concat(prefixCls2, \"-icon-tags\")\n  });\n  if (spin) {\n    props.className = \"\".concat(props.className, \" \").concat(prefixCls2, \"-icon-loading\");\n  }\n  delete props.spin;\n  delete props.isIcon;\n  return /* @__PURE__ */ React.createElement(\"svg\", _extends({\n    fill: \"none\",\n    stroke: \"currentColor\",\n    strokeWidth: \"4\",\n    viewBox: \"0 0 48 48\",\n    width: \"1em\",\n    height: \"1em\"\n  }, props), /* @__PURE__ */ React.createElement(\"path\", {\n    d: \"m37.581 28.123-14.849 14.85a1 1 0 0 1-1.414 0L8.59 30.243m25.982-22.68-10.685-.628a1 1 0 0 0-.766.291L9.297 21.052a1 1 0 0 0 0 1.414L20.61 33.78a1 1 0 0 0 1.415 0l13.824-13.825a1 1 0 0 0 .291-.765l-.628-10.686a1 1 0 0 0-.94-.94Zm-6.874 7.729a1 1 0 1 1 1.414-1.414 1 1 0 0 1-1.414 1.414Z\"\n  }), /* @__PURE__ */ React.createElement(\"path\", {\n    fill: \"currentColor\",\n    stroke: \"none\",\n    d: \"M27.697 15.292a1 1 0 1 1 1.414-1.414 1 1 0 0 1-1.414 1.414Z\"\n  }));\n}\nvar IconTags = /* @__PURE__ */ React.forwardRef(IconTagsComponent);\nIconTags.defaultProps = {\n  isIcon: true\n};\nIconTags.displayName = \"IconTags\";\nvar IconTags$1 = IconTags;\nfunction ownKeys(object, enumerableOnly) {\n  var keys = Object.keys(object);\n  if (Object.getOwnPropertySymbols) {\n    var symbols = Object.getOwnPropertySymbols(object);\n    if (enumerableOnly) {\n      symbols = symbols.filter(function(sym) {\n        return Object.getOwnPropertyDescriptor(object, sym).enumerable;\n      });\n    }\n    keys.push.apply(keys, symbols);\n  }\n  return keys;\n}\nfunction _objectSpread(target2) {\n  for (var i = 1; i < arguments.length; i++) {\n    var source2 = arguments[i] != null ? arguments[i] : {};\n    if (i % 2) {\n      ownKeys(Object(source2), true).forEach(function(key) {\n        _defineProperty(target2, key, source2[key]);\n      });\n    } else if (Object.getOwnPropertyDescriptors) {\n      Object.defineProperties(target2, Object.getOwnPropertyDescriptors(source2));\n    } else {\n      ownKeys(Object(source2)).forEach(function(key) {\n        Object.defineProperty(target2, key, Object.getOwnPropertyDescriptor(source2, key));\n      });\n    }\n  }\n  return target2;\n}\nfunction IconUserComponent(iconProps, ref) {\n  var _useContext = react.exports.useContext(IconContext), prefixCls2 = _useContext.prefixCls;\n  var spin = iconProps.spin, className = iconProps.className;\n  var props = _objectSpread(_objectSpread({\n    ref\n  }, iconProps), {}, {\n    className: \"\".concat(className ? className + \" \" : \"\").concat(prefixCls2, \"-icon \").concat(prefixCls2, \"-icon-user\")\n  });\n  if (spin) {\n    props.className = \"\".concat(props.className, \" \").concat(prefixCls2, \"-icon-loading\");\n  }\n  delete props.spin;\n  delete props.isIcon;\n  return /* @__PURE__ */ React.createElement(\"svg\", _extends({\n    fill: \"none\",\n    stroke: \"currentColor\",\n    strokeWidth: \"4\",\n    viewBox: \"0 0 48 48\",\n    width: \"1em\",\n    height: \"1em\"\n  }, props), /* @__PURE__ */ React.createElement(\"path\", {\n    d: \"M7 37c0-4.97 4.03-8 9-8h16c4.97 0 9 3.03 9 8v3a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1v-3Z\"\n  }), /* @__PURE__ */ React.createElement(\"circle\", {\n    cx: \"24\",\n    cy: \"15\",\n    r: \"8\"\n  }));\n}\nvar IconUser = /* @__PURE__ */ React.forwardRef(IconUserComponent);\nIconUser.defaultProps = {\n  isIcon: true\n};\nIconUser.displayName = \"IconUser\";\nvar IconUser$1 = IconUser;\nvar defaultInstanceSettings = {\n  update: null,\n  begin: null,\n  loopBegin: null,\n  changeBegin: null,\n  change: null,\n  changeComplete: null,\n  loopComplete: null,\n  complete: null,\n  loop: 1,\n  direction: \"normal\",\n  autoplay: true,\n  timelineOffset: 0\n};\nvar defaultTweenSettings = {\n  duration: 1e3,\n  delay: 0,\n  endDelay: 0,\n  easing: \"easeOutElastic(1, .5)\",\n  round: 0\n};\nvar validTransforms = [\"translateX\", \"translateY\", \"translateZ\", \"rotate\", \"rotateX\", \"rotateY\", \"rotateZ\", \"scale\", \"scaleX\", \"scaleY\", \"scaleZ\", \"skew\", \"skewX\", \"skewY\", \"perspective\", \"matrix\", \"matrix3d\"];\nvar cache = {\n  CSS: {},\n  springs: {}\n};\nfunction minMax(val, min, max) {\n  return Math.min(Math.max(val, min), max);\n}\nfunction stringContains(str, text) {\n  return str.indexOf(text) > -1;\n}\nfunction applyArguments(func, args) {\n  return func.apply(null, args);\n}\nvar is = {\n  arr: function(a) {\n    return Array.isArray(a);\n  },\n  obj: function(a) {\n    return stringContains(Object.prototype.toString.call(a), \"Object\");\n  },\n  pth: function(a) {\n    return is.obj(a) && a.hasOwnProperty(\"totalLength\");\n  },\n  svg: function(a) {\n    return a instanceof SVGElement;\n  },\n  inp: function(a) {\n    return a instanceof HTMLInputElement;\n  },\n  dom: function(a) {\n    return a.nodeType || is.svg(a);\n  },\n  str: function(a) {\n    return typeof a === \"string\";\n  },\n  fnc: function(a) {\n    return typeof a === \"function\";\n  },\n  und: function(a) {\n    return typeof a === \"undefined\";\n  },\n  nil: function(a) {\n    return is.und(a) || a === null;\n  },\n  hex: function(a) {\n    return /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(a);\n  },\n  rgb: function(a) {\n    return /^rgb/.test(a);\n  },\n  hsl: function(a) {\n    return /^hsl/.test(a);\n  },\n  col: function(a) {\n    return is.hex(a) || is.rgb(a) || is.hsl(a);\n  },\n  key: function(a) {\n    return !defaultInstanceSettings.hasOwnProperty(a) && !defaultTweenSettings.hasOwnProperty(a) && a !== \"targets\" && a !== \"keyframes\";\n  }\n};\nfunction parseEasingParameters(string) {\n  var match = /\\(([^)]+)\\)/.exec(string);\n  return match ? match[1].split(\",\").map(function(p2) {\n    return parseFloat(p2);\n  }) : [];\n}\nfunction spring(string, duration2) {\n  var params = parseEasingParameters(string);\n  var mass = minMax(is.und(params[0]) ? 1 : params[0], 0.1, 100);\n  var stiffness = minMax(is.und(params[1]) ? 100 : params[1], 0.1, 100);\n  var damping = minMax(is.und(params[2]) ? 10 : params[2], 0.1, 100);\n  var velocity = minMax(is.und(params[3]) ? 0 : params[3], 0.1, 100);\n  var w0 = Math.sqrt(stiffness / mass);\n  var zeta = damping / (2 * Math.sqrt(stiffness * mass));\n  var wd2 = zeta < 1 ? w0 * Math.sqrt(1 - zeta * zeta) : 0;\n  var a = 1;\n  var b = zeta < 1 ? (zeta * w0 + -velocity) / wd2 : -velocity + w0;\n  function solver(t2) {\n    var progress = duration2 ? duration2 * t2 / 1e3 : t2;\n    if (zeta < 1) {\n      progress = Math.exp(-progress * zeta * w0) * (a * Math.cos(wd2 * progress) + b * Math.sin(wd2 * progress));\n    } else {\n      progress = (a + b * progress) * Math.exp(-progress * w0);\n    }\n    if (t2 === 0 || t2 === 1) {\n      return t2;\n    }\n    return 1 - progress;\n  }\n  function getDuration() {\n    var cached = cache.springs[string];\n    if (cached) {\n      return cached;\n    }\n    var frame = 1 / 6;\n    var elapsed = 0;\n    var rest = 0;\n    while (true) {\n      elapsed += frame;\n      if (solver(elapsed) === 1) {\n        rest++;\n        if (rest >= 16) {\n          break;\n        }\n      } else {\n        rest = 0;\n      }\n    }\n    var duration3 = elapsed * frame * 1e3;\n    cache.springs[string] = duration3;\n    return duration3;\n  }\n  return duration2 ? solver : getDuration;\n}\nfunction steps(steps2) {\n  if (steps2 === void 0)\n    steps2 = 10;\n  return function(t2) {\n    return Math.ceil(minMax(t2, 1e-6, 1) * steps2) * (1 / steps2);\n  };\n}\nvar bezier = function() {\n  var kSplineTableSize = 11;\n  var kSampleStepSize = 1 / (kSplineTableSize - 1);\n  function A2(aA1, aA2) {\n    return 1 - 3 * aA2 + 3 * aA1;\n  }\n  function B2(aA1, aA2) {\n    return 3 * aA2 - 6 * aA1;\n  }\n  function C2(aA1) {\n    return 3 * aA1;\n  }\n  function calcBezier(aT, aA1, aA2) {\n    return ((A2(aA1, aA2) * aT + B2(aA1, aA2)) * aT + C2(aA1)) * aT;\n  }\n  function getSlope(aT, aA1, aA2) {\n    return 3 * A2(aA1, aA2) * aT * aT + 2 * B2(aA1, aA2) * aT + C2(aA1);\n  }\n  function binarySubdivide(aX, aA, aB, mX1, mX2) {\n    var currentX, currentT, i = 0;\n    do {\n      currentT = aA + (aB - aA) / 2;\n      currentX = calcBezier(currentT, mX1, mX2) - aX;\n      if (currentX > 0) {\n        aB = currentT;\n      } else {\n        aA = currentT;\n      }\n    } while (Math.abs(currentX) > 1e-7 && ++i < 10);\n    return currentT;\n  }\n  function newtonRaphsonIterate(aX, aGuessT, mX1, mX2) {\n    for (var i = 0; i < 4; ++i) {\n      var currentSlope = getSlope(aGuessT, mX1, mX2);\n      if (currentSlope === 0) {\n        return aGuessT;\n      }\n      var currentX = calcBezier(aGuessT, mX1, mX2) - aX;\n      aGuessT -= currentX / currentSlope;\n    }\n    return aGuessT;\n  }\n  function bezier2(mX1, mY1, mX2, mY2) {\n    if (!(0 <= mX1 && mX1 <= 1 && 0 <= mX2 && mX2 <= 1)) {\n      return;\n    }\n    var sampleValues = new Float32Array(kSplineTableSize);\n    if (mX1 !== mY1 || mX2 !== mY2) {\n      for (var i = 0; i < kSplineTableSize; ++i) {\n        sampleValues[i] = calcBezier(i * kSampleStepSize, mX1, mX2);\n      }\n    }\n    function getTForX(aX) {\n      var intervalStart = 0;\n      var currentSample = 1;\n      var lastSample = kSplineTableSize - 1;\n      for (; currentSample !== lastSample && sampleValues[currentSample] <= aX; ++currentSample) {\n        intervalStart += kSampleStepSize;\n      }\n      --currentSample;\n      var dist = (aX - sampleValues[currentSample]) / (sampleValues[currentSample + 1] - sampleValues[currentSample]);\n      var guessForT = intervalStart + dist * kSampleStepSize;\n      var initialSlope = getSlope(guessForT, mX1, mX2);\n      if (initialSlope >= 1e-3) {\n        return newtonRaphsonIterate(aX, guessForT, mX1, mX2);\n      } else if (initialSlope === 0) {\n        return guessForT;\n      } else {\n        return binarySubdivide(aX, intervalStart, intervalStart + kSampleStepSize, mX1, mX2);\n      }\n    }\n    return function(x2) {\n      if (mX1 === mY1 && mX2 === mY2) {\n        return x2;\n      }\n      if (x2 === 0 || x2 === 1) {\n        return x2;\n      }\n      return calcBezier(getTForX(x2), mY1, mY2);\n    };\n  }\n  return bezier2;\n}();\nvar penner = function() {\n  var eases = { linear: function() {\n    return function(t2) {\n      return t2;\n    };\n  } };\n  var functionEasings = {\n    Sine: function() {\n      return function(t2) {\n        return 1 - Math.cos(t2 * Math.PI / 2);\n      };\n    },\n    Circ: function() {\n      return function(t2) {\n        return 1 - Math.sqrt(1 - t2 * t2);\n      };\n    },\n    Back: function() {\n      return function(t2) {\n        return t2 * t2 * (3 * t2 - 2);\n      };\n    },\n    Bounce: function() {\n      return function(t2) {\n        var pow2, b = 4;\n        while (t2 < ((pow2 = Math.pow(2, --b)) - 1) / 11) {\n        }\n        return 1 / Math.pow(4, 3 - b) - 7.5625 * Math.pow((pow2 * 3 - 2) / 22 - t2, 2);\n      };\n    },\n    Elastic: function(amplitude, period) {\n      if (amplitude === void 0)\n        amplitude = 1;\n      if (period === void 0)\n        period = 0.5;\n      var a = minMax(amplitude, 1, 10);\n      var p2 = minMax(period, 0.1, 2);\n      return function(t2) {\n        return t2 === 0 || t2 === 1 ? t2 : -a * Math.pow(2, 10 * (t2 - 1)) * Math.sin((t2 - 1 - p2 / (Math.PI * 2) * Math.asin(1 / a)) * (Math.PI * 2) / p2);\n      };\n    }\n  };\n  var baseEasings = [\"Quad\", \"Cubic\", \"Quart\", \"Quint\", \"Expo\"];\n  baseEasings.forEach(function(name, i) {\n    functionEasings[name] = function() {\n      return function(t2) {\n        return Math.pow(t2, i + 2);\n      };\n    };\n  });\n  Object.keys(functionEasings).forEach(function(name) {\n    var easeIn = functionEasings[name];\n    eases[\"easeIn\" + name] = easeIn;\n    eases[\"easeOut\" + name] = function(a, b) {\n      return function(t2) {\n        return 1 - easeIn(a, b)(1 - t2);\n      };\n    };\n    eases[\"easeInOut\" + name] = function(a, b) {\n      return function(t2) {\n        return t2 < 0.5 ? easeIn(a, b)(t2 * 2) / 2 : 1 - easeIn(a, b)(t2 * -2 + 2) / 2;\n      };\n    };\n    eases[\"easeOutIn\" + name] = function(a, b) {\n      return function(t2) {\n        return t2 < 0.5 ? (1 - easeIn(a, b)(1 - t2 * 2)) / 2 : (easeIn(a, b)(t2 * 2 - 1) + 1) / 2;\n      };\n    };\n  });\n  return eases;\n}();\nfunction parseEasings(easing, duration2) {\n  if (is.fnc(easing)) {\n    return easing;\n  }\n  var name = easing.split(\"(\")[0];\n  var ease = penner[name];\n  var args = parseEasingParameters(easing);\n  switch (name) {\n    case \"spring\":\n      return spring(easing, duration2);\n    case \"cubicBezier\":\n      return applyArguments(bezier, args);\n    case \"steps\":\n      return applyArguments(steps, args);\n    default:\n      return applyArguments(ease, args);\n  }\n}\nfunction selectString(str) {\n  try {\n    var nodes = document.querySelectorAll(str);\n    return nodes;\n  } catch (e) {\n    return;\n  }\n}\nfunction filterArray(arr, callback) {\n  var len = arr.length;\n  var thisArg = arguments.length >= 2 ? arguments[1] : void 0;\n  var result = [];\n  for (var i = 0; i < len; i++) {\n    if (i in arr) {\n      var val = arr[i];\n      if (callback.call(thisArg, val, i, arr)) {\n        result.push(val);\n      }\n    }\n  }\n  return result;\n}\nfunction flattenArray(arr) {\n  return arr.reduce(function(a, b) {\n    return a.concat(is.arr(b) ? flattenArray(b) : b);\n  }, []);\n}\nfunction toArray(o) {\n  if (is.arr(o)) {\n    return o;\n  }\n  if (is.str(o)) {\n    o = selectString(o) || o;\n  }\n  if (o instanceof NodeList || o instanceof HTMLCollection) {\n    return [].slice.call(o);\n  }\n  return [o];\n}\nfunction arrayContains(arr, val) {\n  return arr.some(function(a) {\n    return a === val;\n  });\n}\nfunction cloneObject(o) {\n  var clone = {};\n  for (var p2 in o) {\n    clone[p2] = o[p2];\n  }\n  return clone;\n}\nfunction replaceObjectProps(o1, o2) {\n  var o = cloneObject(o1);\n  for (var p2 in o1) {\n    o[p2] = o2.hasOwnProperty(p2) ? o2[p2] : o1[p2];\n  }\n  return o;\n}\nfunction mergeObjects(o1, o2) {\n  var o = cloneObject(o1);\n  for (var p2 in o2) {\n    o[p2] = is.und(o1[p2]) ? o2[p2] : o1[p2];\n  }\n  return o;\n}\nfunction rgbToRgba(rgbValue) {\n  var rgb = /rgb\\((\\d+,\\s*[\\d]+,\\s*[\\d]+)\\)/g.exec(rgbValue);\n  return rgb ? \"rgba(\" + rgb[1] + \",1)\" : rgbValue;\n}\nfunction hexToRgba(hexValue) {\n  var rgx = /^#?([a-f\\d])([a-f\\d])([a-f\\d])$/i;\n  var hex = hexValue.replace(rgx, function(m2, r3, g2, b2) {\n    return r3 + r3 + g2 + g2 + b2 + b2;\n  });\n  var rgb = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex);\n  var r2 = parseInt(rgb[1], 16);\n  var g = parseInt(rgb[2], 16);\n  var b = parseInt(rgb[3], 16);\n  return \"rgba(\" + r2 + \",\" + g + \",\" + b + \",1)\";\n}\nfunction hslToRgba(hslValue) {\n  var hsl = /hsl\\((\\d+),\\s*([\\d.]+)%,\\s*([\\d.]+)%\\)/g.exec(hslValue) || /hsla\\((\\d+),\\s*([\\d.]+)%,\\s*([\\d.]+)%,\\s*([\\d.]+)\\)/g.exec(hslValue);\n  var h = parseInt(hsl[1], 10) / 360;\n  var s = parseInt(hsl[2], 10) / 100;\n  var l2 = parseInt(hsl[3], 10) / 100;\n  var a = hsl[4] || 1;\n  function hue2rgb(p3, q3, t2) {\n    if (t2 < 0) {\n      t2 += 1;\n    }\n    if (t2 > 1) {\n      t2 -= 1;\n    }\n    if (t2 < 1 / 6) {\n      return p3 + (q3 - p3) * 6 * t2;\n    }\n    if (t2 < 1 / 2) {\n      return q3;\n    }\n    if (t2 < 2 / 3) {\n      return p3 + (q3 - p3) * (2 / 3 - t2) * 6;\n    }\n    return p3;\n  }\n  var r2, g, b;\n  if (s == 0) {\n    r2 = g = b = l2;\n  } else {\n    var q2 = l2 < 0.5 ? l2 * (1 + s) : l2 + s - l2 * s;\n    var p2 = 2 * l2 - q2;\n    r2 = hue2rgb(p2, q2, h + 1 / 3);\n    g = hue2rgb(p2, q2, h);\n    b = hue2rgb(p2, q2, h - 1 / 3);\n  }\n  return \"rgba(\" + r2 * 255 + \",\" + g * 255 + \",\" + b * 255 + \",\" + a + \")\";\n}\nfunction colorToRgb(val) {\n  if (is.rgb(val)) {\n    return rgbToRgba(val);\n  }\n  if (is.hex(val)) {\n    return hexToRgba(val);\n  }\n  if (is.hsl(val)) {\n    return hslToRgba(val);\n  }\n}\nfunction getUnit(val) {\n  var split = /[+-]?\\d*\\.?\\d+(?:\\.\\d+)?(?:[eE][+-]?\\d+)?(%|px|pt|em|rem|in|cm|mm|ex|ch|pc|vw|vh|vmin|vmax|deg|rad|turn)?$/.exec(val);\n  if (split) {\n    return split[1];\n  }\n}\nfunction getTransformUnit(propName) {\n  if (stringContains(propName, \"translate\") || propName === \"perspective\") {\n    return \"px\";\n  }\n  if (stringContains(propName, \"rotate\") || stringContains(propName, \"skew\")) {\n    return \"deg\";\n  }\n}\nfunction getFunctionValue(val, animatable) {\n  if (!is.fnc(val)) {\n    return val;\n  }\n  return val(animatable.target, animatable.id, animatable.total);\n}\nfunction getAttribute(el, prop) {\n  return el.getAttribute(prop);\n}\nfunction convertPxToUnit(el, value, unit) {\n  var valueUnit = getUnit(value);\n  if (arrayContains([unit, \"deg\", \"rad\", \"turn\"], valueUnit)) {\n    return value;\n  }\n  var cached = cache.CSS[value + unit];\n  if (!is.und(cached)) {\n    return cached;\n  }\n  var baseline = 100;\n  var tempEl = document.createElement(el.tagName);\n  var parentEl = el.parentNode && el.parentNode !== document ? el.parentNode : document.body;\n  parentEl.appendChild(tempEl);\n  tempEl.style.position = \"absolute\";\n  tempEl.style.width = baseline + unit;\n  var factor = baseline / tempEl.offsetWidth;\n  parentEl.removeChild(tempEl);\n  var convertedUnit = factor * parseFloat(value);\n  cache.CSS[value + unit] = convertedUnit;\n  return convertedUnit;\n}\nfunction getCSSValue(el, prop, unit) {\n  if (prop in el.style) {\n    var uppercasePropName = prop.replace(/([a-z])([A-Z])/g, \"$1-$2\").toLowerCase();\n    var value = el.style[prop] || getComputedStyle(el).getPropertyValue(uppercasePropName) || \"0\";\n    return unit ? convertPxToUnit(el, value, unit) : value;\n  }\n}\nfunction getAnimationType(el, prop) {\n  if (is.dom(el) && !is.inp(el) && (!is.nil(getAttribute(el, prop)) || is.svg(el) && el[prop])) {\n    return \"attribute\";\n  }\n  if (is.dom(el) && arrayContains(validTransforms, prop)) {\n    return \"transform\";\n  }\n  if (is.dom(el) && (prop !== \"transform\" && getCSSValue(el, prop))) {\n    return \"css\";\n  }\n  if (el[prop] != null) {\n    return \"object\";\n  }\n}\nfunction getElementTransforms(el) {\n  if (!is.dom(el)) {\n    return;\n  }\n  var str = el.style.transform || \"\";\n  var reg = /(\\w+)\\(([^)]*)\\)/g;\n  var transforms = new Map();\n  var m2;\n  while (m2 = reg.exec(str)) {\n    transforms.set(m2[1], m2[2]);\n  }\n  return transforms;\n}\nfunction getTransformValue(el, propName, animatable, unit) {\n  var defaultVal = stringContains(propName, \"scale\") ? 1 : 0 + getTransformUnit(propName);\n  var value = getElementTransforms(el).get(propName) || defaultVal;\n  if (animatable) {\n    animatable.transforms.list.set(propName, value);\n    animatable.transforms[\"last\"] = propName;\n  }\n  return unit ? convertPxToUnit(el, value, unit) : value;\n}\nfunction getOriginalTargetValue(target2, propName, unit, animatable) {\n  switch (getAnimationType(target2, propName)) {\n    case \"transform\":\n      return getTransformValue(target2, propName, animatable, unit);\n    case \"css\":\n      return getCSSValue(target2, propName, unit);\n    case \"attribute\":\n      return getAttribute(target2, propName);\n    default:\n      return target2[propName] || 0;\n  }\n}\nfunction getRelativeValue(to, from) {\n  var operator = /^(\\*=|\\+=|-=)/.exec(to);\n  if (!operator) {\n    return to;\n  }\n  var u2 = getUnit(to) || 0;\n  var x2 = parseFloat(from);\n  var y2 = parseFloat(to.replace(operator[0], \"\"));\n  switch (operator[0][0]) {\n    case \"+\":\n      return x2 + y2 + u2;\n    case \"-\":\n      return x2 - y2 + u2;\n    case \"*\":\n      return x2 * y2 + u2;\n  }\n}\nfunction validateValue(val, unit) {\n  if (is.col(val)) {\n    return colorToRgb(val);\n  }\n  if (/\\s/g.test(val)) {\n    return val;\n  }\n  var originalUnit = getUnit(val);\n  var unitLess = originalUnit ? val.substr(0, val.length - originalUnit.length) : val;\n  if (unit) {\n    return unitLess + unit;\n  }\n  return unitLess;\n}\nfunction getDistance(p1, p2) {\n  return Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2));\n}\nfunction getCircleLength(el) {\n  return Math.PI * 2 * getAttribute(el, \"r\");\n}\nfunction getRectLength(el) {\n  return getAttribute(el, \"width\") * 2 + getAttribute(el, \"height\") * 2;\n}\nfunction getLineLength(el) {\n  return getDistance({ x: getAttribute(el, \"x1\"), y: getAttribute(el, \"y1\") }, { x: getAttribute(el, \"x2\"), y: getAttribute(el, \"y2\") });\n}\nfunction getPolylineLength(el) {\n  var points = el.points;\n  var totalLength = 0;\n  var previousPos;\n  for (var i = 0; i < points.numberOfItems; i++) {\n    var currentPos = points.getItem(i);\n    if (i > 0) {\n      totalLength += getDistance(previousPos, currentPos);\n    }\n    previousPos = currentPos;\n  }\n  return totalLength;\n}\nfunction getPolygonLength(el) {\n  var points = el.points;\n  return getPolylineLength(el) + getDistance(points.getItem(points.numberOfItems - 1), points.getItem(0));\n}\nfunction getTotalLength(el) {\n  if (el.getTotalLength) {\n    return el.getTotalLength();\n  }\n  switch (el.tagName.toLowerCase()) {\n    case \"circle\":\n      return getCircleLength(el);\n    case \"rect\":\n      return getRectLength(el);\n    case \"line\":\n      return getLineLength(el);\n    case \"polyline\":\n      return getPolylineLength(el);\n    case \"polygon\":\n      return getPolygonLength(el);\n  }\n}\nfunction setDashoffset(el) {\n  var pathLength = getTotalLength(el);\n  el.setAttribute(\"stroke-dasharray\", pathLength);\n  return pathLength;\n}\nfunction getParentSvgEl(el) {\n  var parentEl = el.parentNode;\n  while (is.svg(parentEl)) {\n    if (!is.svg(parentEl.parentNode)) {\n      break;\n    }\n    parentEl = parentEl.parentNode;\n  }\n  return parentEl;\n}\nfunction getParentSvg(pathEl, svgData) {\n  var svg = svgData || {};\n  var parentSvgEl = svg.el || getParentSvgEl(pathEl);\n  var rect = parentSvgEl.getBoundingClientRect();\n  var viewBoxAttr = getAttribute(parentSvgEl, \"viewBox\");\n  var width = rect.width;\n  var height = rect.height;\n  var viewBox = svg.viewBox || (viewBoxAttr ? viewBoxAttr.split(\" \") : [0, 0, width, height]);\n  return {\n    el: parentSvgEl,\n    viewBox,\n    x: viewBox[0] / 1,\n    y: viewBox[1] / 1,\n    w: width,\n    h: height,\n    vW: viewBox[2],\n    vH: viewBox[3]\n  };\n}\nfunction getPath(path, percent) {\n  var pathEl = is.str(path) ? selectString(path)[0] : path;\n  var p2 = percent || 100;\n  return function(property) {\n    return {\n      property,\n      el: pathEl,\n      svg: getParentSvg(pathEl),\n      totalLength: getTotalLength(pathEl) * (p2 / 100)\n    };\n  };\n}\nfunction getPathProgress(path, progress, isPathTargetInsideSVG) {\n  function point(offset) {\n    if (offset === void 0)\n      offset = 0;\n    var l2 = progress + offset >= 1 ? progress + offset : 0;\n    return path.el.getPointAtLength(l2);\n  }\n  var svg = getParentSvg(path.el, path.svg);\n  var p2 = point();\n  var p0 = point(-1);\n  var p1 = point(1);\n  var scaleX = isPathTargetInsideSVG ? 1 : svg.w / svg.vW;\n  var scaleY = isPathTargetInsideSVG ? 1 : svg.h / svg.vH;\n  switch (path.property) {\n    case \"x\":\n      return (p2.x - svg.x) * scaleX;\n    case \"y\":\n      return (p2.y - svg.y) * scaleY;\n    case \"angle\":\n      return Math.atan2(p1.y - p0.y, p1.x - p0.x) * 180 / Math.PI;\n  }\n}\nfunction decomposeValue(val, unit) {\n  var rgx = /[+-]?\\d*\\.?\\d+(?:\\.\\d+)?(?:[eE][+-]?\\d+)?/g;\n  var value = validateValue(is.pth(val) ? val.totalLength : val, unit) + \"\";\n  return {\n    original: value,\n    numbers: value.match(rgx) ? value.match(rgx).map(Number) : [0],\n    strings: is.str(val) || unit ? value.split(rgx) : []\n  };\n}\nfunction parseTargets(targets) {\n  var targetsArray = targets ? flattenArray(is.arr(targets) ? targets.map(toArray) : toArray(targets)) : [];\n  return filterArray(targetsArray, function(item, pos, self2) {\n    return self2.indexOf(item) === pos;\n  });\n}\nfunction getAnimatables(targets) {\n  var parsed = parseTargets(targets);\n  return parsed.map(function(t2, i) {\n    return { target: t2, id: i, total: parsed.length, transforms: { list: getElementTransforms(t2) } };\n  });\n}\nfunction normalizePropertyTweens(prop, tweenSettings) {\n  var settings = cloneObject(tweenSettings);\n  if (/^spring/.test(settings.easing)) {\n    settings.duration = spring(settings.easing);\n  }\n  if (is.arr(prop)) {\n    var l2 = prop.length;\n    var isFromTo = l2 === 2 && !is.obj(prop[0]);\n    if (!isFromTo) {\n      if (!is.fnc(tweenSettings.duration)) {\n        settings.duration = tweenSettings.duration / l2;\n      }\n    } else {\n      prop = { value: prop };\n    }\n  }\n  var propArray = is.arr(prop) ? prop : [prop];\n  return propArray.map(function(v2, i) {\n    var obj = is.obj(v2) && !is.pth(v2) ? v2 : { value: v2 };\n    if (is.und(obj.delay)) {\n      obj.delay = !i ? tweenSettings.delay : 0;\n    }\n    if (is.und(obj.endDelay)) {\n      obj.endDelay = i === propArray.length - 1 ? tweenSettings.endDelay : 0;\n    }\n    return obj;\n  }).map(function(k) {\n    return mergeObjects(k, settings);\n  });\n}\nfunction flattenKeyframes(keyframes) {\n  var propertyNames = filterArray(flattenArray(keyframes.map(function(key) {\n    return Object.keys(key);\n  })), function(p2) {\n    return is.key(p2);\n  }).reduce(function(a, b) {\n    if (a.indexOf(b) < 0) {\n      a.push(b);\n    }\n    return a;\n  }, []);\n  var properties = {};\n  var loop = function(i2) {\n    var propName = propertyNames[i2];\n    properties[propName] = keyframes.map(function(key) {\n      var newKey = {};\n      for (var p2 in key) {\n        if (is.key(p2)) {\n          if (p2 == propName) {\n            newKey.value = key[p2];\n          }\n        } else {\n          newKey[p2] = key[p2];\n        }\n      }\n      return newKey;\n    });\n  };\n  for (var i = 0; i < propertyNames.length; i++)\n    loop(i);\n  return properties;\n}\nfunction getProperties(tweenSettings, params) {\n  var properties = [];\n  var keyframes = params.keyframes;\n  if (keyframes) {\n    params = mergeObjects(flattenKeyframes(keyframes), params);\n  }\n  for (var p2 in params) {\n    if (is.key(p2)) {\n      properties.push({\n        name: p2,\n        tweens: normalizePropertyTweens(params[p2], tweenSettings)\n      });\n    }\n  }\n  return properties;\n}\nfunction normalizeTweenValues(tween, animatable) {\n  var t2 = {};\n  for (var p2 in tween) {\n    var value = getFunctionValue(tween[p2], animatable);\n    if (is.arr(value)) {\n      value = value.map(function(v2) {\n        return getFunctionValue(v2, animatable);\n      });\n      if (value.length === 1) {\n        value = value[0];\n      }\n    }\n    t2[p2] = value;\n  }\n  t2.duration = parseFloat(t2.duration);\n  t2.delay = parseFloat(t2.delay);\n  return t2;\n}\nfunction normalizeTweens(prop, animatable) {\n  var previousTween;\n  return prop.tweens.map(function(t2) {\n    var tween = normalizeTweenValues(t2, animatable);\n    var tweenValue = tween.value;\n    var to = is.arr(tweenValue) ? tweenValue[1] : tweenValue;\n    var toUnit = getUnit(to);\n    var originalValue = getOriginalTargetValue(animatable.target, prop.name, toUnit, animatable);\n    var previousValue = previousTween ? previousTween.to.original : originalValue;\n    var from = is.arr(tweenValue) ? tweenValue[0] : previousValue;\n    var fromUnit = getUnit(from) || getUnit(originalValue);\n    var unit = toUnit || fromUnit;\n    if (is.und(to)) {\n      to = previousValue;\n    }\n    tween.from = decomposeValue(from, unit);\n    tween.to = decomposeValue(getRelativeValue(to, from), unit);\n    tween.start = previousTween ? previousTween.end : 0;\n    tween.end = tween.start + tween.delay + tween.duration + tween.endDelay;\n    tween.easing = parseEasings(tween.easing, tween.duration);\n    tween.isPath = is.pth(tweenValue);\n    tween.isPathTargetInsideSVG = tween.isPath && is.svg(animatable.target);\n    tween.isColor = is.col(tween.from.original);\n    if (tween.isColor) {\n      tween.round = 1;\n    }\n    previousTween = tween;\n    return tween;\n  });\n}\nvar setProgressValue = {\n  css: function(t2, p2, v2) {\n    return t2.style[p2] = v2;\n  },\n  attribute: function(t2, p2, v2) {\n    return t2.setAttribute(p2, v2);\n  },\n  object: function(t2, p2, v2) {\n    return t2[p2] = v2;\n  },\n  transform: function(t2, p2, v2, transforms, manual) {\n    transforms.list.set(p2, v2);\n    if (p2 === transforms.last || manual) {\n      var str = \"\";\n      transforms.list.forEach(function(value, prop) {\n        str += prop + \"(\" + value + \") \";\n      });\n      t2.style.transform = str;\n    }\n  }\n};\nfunction setTargetsValue(targets, properties) {\n  var animatables = getAnimatables(targets);\n  animatables.forEach(function(animatable) {\n    for (var property in properties) {\n      var value = getFunctionValue(properties[property], animatable);\n      var target2 = animatable.target;\n      var valueUnit = getUnit(value);\n      var originalValue = getOriginalTargetValue(target2, property, valueUnit, animatable);\n      var unit = valueUnit || getUnit(originalValue);\n      var to = getRelativeValue(validateValue(value, unit), originalValue);\n      var animType = getAnimationType(target2, property);\n      setProgressValue[animType](target2, property, to, animatable.transforms, true);\n    }\n  });\n}\nfunction createAnimation(animatable, prop) {\n  var animType = getAnimationType(animatable.target, prop.name);\n  if (animType) {\n    var tweens = normalizeTweens(prop, animatable);\n    var lastTween = tweens[tweens.length - 1];\n    return {\n      type: animType,\n      property: prop.name,\n      animatable,\n      tweens,\n      duration: lastTween.end,\n      delay: tweens[0].delay,\n      endDelay: lastTween.endDelay\n    };\n  }\n}\nfunction getAnimations(animatables, properties) {\n  return filterArray(flattenArray(animatables.map(function(animatable) {\n    return properties.map(function(prop) {\n      return createAnimation(animatable, prop);\n    });\n  })), function(a) {\n    return !is.und(a);\n  });\n}\nfunction getInstanceTimings(animations, tweenSettings) {\n  var animLength = animations.length;\n  var getTlOffset = function(anim) {\n    return anim.timelineOffset ? anim.timelineOffset : 0;\n  };\n  var timings = {};\n  timings.duration = animLength ? Math.max.apply(Math, animations.map(function(anim) {\n    return getTlOffset(anim) + anim.duration;\n  })) : tweenSettings.duration;\n  timings.delay = animLength ? Math.min.apply(Math, animations.map(function(anim) {\n    return getTlOffset(anim) + anim.delay;\n  })) : tweenSettings.delay;\n  timings.endDelay = animLength ? timings.duration - Math.max.apply(Math, animations.map(function(anim) {\n    return getTlOffset(anim) + anim.duration - anim.endDelay;\n  })) : tweenSettings.endDelay;\n  return timings;\n}\nvar instanceID = 0;\nfunction createNewInstance(params) {\n  var instanceSettings = replaceObjectProps(defaultInstanceSettings, params);\n  var tweenSettings = replaceObjectProps(defaultTweenSettings, params);\n  var properties = getProperties(tweenSettings, params);\n  var animatables = getAnimatables(params.targets);\n  var animations = getAnimations(animatables, properties);\n  var timings = getInstanceTimings(animations, tweenSettings);\n  var id2 = instanceID;\n  instanceID++;\n  return mergeObjects(instanceSettings, {\n    id: id2,\n    children: [],\n    animatables,\n    animations,\n    duration: timings.duration,\n    delay: timings.delay,\n    endDelay: timings.endDelay\n  });\n}\nvar activeInstances = [];\nvar engine = function() {\n  var raf2;\n  function play() {\n    if (!raf2 && (!isDocumentHidden() || !anime.suspendWhenDocumentHidden) && activeInstances.length > 0) {\n      raf2 = requestAnimationFrame(step);\n    }\n  }\n  function step(t2) {\n    var activeInstancesLength = activeInstances.length;\n    var i = 0;\n    while (i < activeInstancesLength) {\n      var activeInstance = activeInstances[i];\n      if (!activeInstance.paused) {\n        activeInstance.tick(t2);\n        i++;\n      } else {\n        activeInstances.splice(i, 1);\n        activeInstancesLength--;\n      }\n    }\n    raf2 = i > 0 ? requestAnimationFrame(step) : void 0;\n  }\n  function handleVisibilityChange() {\n    if (!anime.suspendWhenDocumentHidden) {\n      return;\n    }\n    if (isDocumentHidden()) {\n      raf2 = cancelAnimationFrame(raf2);\n    } else {\n      activeInstances.forEach(function(instance) {\n        return instance._onDocumentVisibility();\n      });\n      engine();\n    }\n  }\n  if (typeof document !== \"undefined\") {\n    document.addEventListener(\"visibilitychange\", handleVisibilityChange);\n  }\n  return play;\n}();\nfunction isDocumentHidden() {\n  return !!document && document.hidden;\n}\nfunction anime(params) {\n  if (params === void 0)\n    params = {};\n  var startTime = 0, lastTime = 0, now2 = 0;\n  var children, childrenLength = 0;\n  var resolve = null;\n  function makePromise(instance2) {\n    var promise = window.Promise && new Promise(function(_resolve) {\n      return resolve = _resolve;\n    });\n    instance2.finished = promise;\n    return promise;\n  }\n  var instance = createNewInstance(params);\n  makePromise(instance);\n  function toggleInstanceDirection() {\n    var direction = instance.direction;\n    if (direction !== \"alternate\") {\n      instance.direction = direction !== \"normal\" ? \"normal\" : \"reverse\";\n    }\n    instance.reversed = !instance.reversed;\n    children.forEach(function(child) {\n      return child.reversed = instance.reversed;\n    });\n  }\n  function adjustTime(time) {\n    return instance.reversed ? instance.duration - time : time;\n  }\n  function resetTime() {\n    startTime = 0;\n    lastTime = adjustTime(instance.currentTime) * (1 / anime.speed);\n  }\n  function seekChild(time, child) {\n    if (child) {\n      child.seek(time - child.timelineOffset);\n    }\n  }\n  function syncInstanceChildren(time) {\n    if (!instance.reversePlayback) {\n      for (var i = 0; i < childrenLength; i++) {\n        seekChild(time, children[i]);\n      }\n    } else {\n      for (var i$1 = childrenLength; i$1--; ) {\n        seekChild(time, children[i$1]);\n      }\n    }\n  }\n  function setAnimationsProgress(insTime) {\n    var i = 0;\n    var animations = instance.animations;\n    var animationsLength = animations.length;\n    while (i < animationsLength) {\n      var anim = animations[i];\n      var animatable = anim.animatable;\n      var tweens = anim.tweens;\n      var tweenLength = tweens.length - 1;\n      var tween = tweens[tweenLength];\n      if (tweenLength) {\n        tween = filterArray(tweens, function(t2) {\n          return insTime < t2.end;\n        })[0] || tween;\n      }\n      var elapsed = minMax(insTime - tween.start - tween.delay, 0, tween.duration) / tween.duration;\n      var eased = isNaN(elapsed) ? 1 : tween.easing(elapsed);\n      var strings = tween.to.strings;\n      var round = tween.round;\n      var numbers = [];\n      var toNumbersLength = tween.to.numbers.length;\n      var progress = void 0;\n      for (var n2 = 0; n2 < toNumbersLength; n2++) {\n        var value = void 0;\n        var toNumber2 = tween.to.numbers[n2];\n        var fromNumber = tween.from.numbers[n2] || 0;\n        if (!tween.isPath) {\n          value = fromNumber + eased * (toNumber2 - fromNumber);\n        } else {\n          value = getPathProgress(tween.value, eased * toNumber2, tween.isPathTargetInsideSVG);\n        }\n        if (round) {\n          if (!(tween.isColor && n2 > 2)) {\n            value = Math.round(value * round) / round;\n          }\n        }\n        numbers.push(value);\n      }\n      var stringsLength = strings.length;\n      if (!stringsLength) {\n        progress = numbers[0];\n      } else {\n        progress = strings[0];\n        for (var s = 0; s < stringsLength; s++) {\n          strings[s];\n          var b = strings[s + 1];\n          var n$1 = numbers[s];\n          if (!isNaN(n$1)) {\n            if (!b) {\n              progress += n$1 + \" \";\n            } else {\n              progress += n$1 + b;\n            }\n          }\n        }\n      }\n      setProgressValue[anim.type](animatable.target, anim.property, progress, animatable.transforms);\n      anim.currentValue = progress;\n      i++;\n    }\n  }\n  function setCallback(cb2) {\n    if (instance[cb2] && !instance.passThrough) {\n      instance[cb2](instance);\n    }\n  }\n  function countIteration() {\n    if (instance.remaining && instance.remaining !== true) {\n      instance.remaining--;\n    }\n  }\n  function setInstanceProgress(engineTime) {\n    var insDuration = instance.duration;\n    var insDelay = instance.delay;\n    var insEndDelay = insDuration - instance.endDelay;\n    var insTime = adjustTime(engineTime);\n    instance.progress = minMax(insTime / insDuration * 100, 0, 100);\n    instance.reversePlayback = insTime < instance.currentTime;\n    if (children) {\n      syncInstanceChildren(insTime);\n    }\n    if (!instance.began && instance.currentTime > 0) {\n      instance.began = true;\n      setCallback(\"begin\");\n    }\n    if (!instance.loopBegan && instance.currentTime > 0) {\n      instance.loopBegan = true;\n      setCallback(\"loopBegin\");\n    }\n    if (insTime <= insDelay && instance.currentTime !== 0) {\n      setAnimationsProgress(0);\n    }\n    if (insTime >= insEndDelay && instance.currentTime !== insDuration || !insDuration) {\n      setAnimationsProgress(insDuration);\n    }\n    if (insTime > insDelay && insTime < insEndDelay) {\n      if (!instance.changeBegan) {\n        instance.changeBegan = true;\n        instance.changeCompleted = false;\n        setCallback(\"changeBegin\");\n      }\n      setCallback(\"change\");\n      setAnimationsProgress(insTime);\n    } else {\n      if (instance.changeBegan) {\n        instance.changeCompleted = true;\n        instance.changeBegan = false;\n        setCallback(\"changeComplete\");\n      }\n    }\n    instance.currentTime = minMax(insTime, 0, insDuration);\n    if (instance.began) {\n      setCallback(\"update\");\n    }\n    if (engineTime >= insDuration) {\n      lastTime = 0;\n      countIteration();\n      if (!instance.remaining) {\n        instance.paused = true;\n        if (!instance.completed) {\n          instance.completed = true;\n          setCallback(\"loopComplete\");\n          setCallback(\"complete\");\n          if (!instance.passThrough && \"Promise\" in window) {\n            resolve();\n            makePromise(instance);\n          }\n        }\n      } else {\n        startTime = now2;\n        setCallback(\"loopComplete\");\n        instance.loopBegan = false;\n        if (instance.direction === \"alternate\") {\n          toggleInstanceDirection();\n        }\n      }\n    }\n  }\n  instance.reset = function() {\n    var direction = instance.direction;\n    instance.passThrough = false;\n    instance.currentTime = 0;\n    instance.progress = 0;\n    instance.paused = true;\n    instance.began = false;\n    instance.loopBegan = false;\n    instance.changeBegan = false;\n    instance.completed = false;\n    instance.changeCompleted = false;\n    instance.reversePlayback = false;\n    instance.reversed = direction === \"reverse\";\n    instance.remaining = instance.loop;\n    children = instance.children;\n    childrenLength = children.length;\n    for (var i = childrenLength; i--; ) {\n      instance.children[i].reset();\n    }\n    if (instance.reversed && instance.loop !== true || direction === \"alternate\" && instance.loop === 1) {\n      instance.remaining++;\n    }\n    setAnimationsProgress(instance.reversed ? instance.duration : 0);\n  };\n  instance._onDocumentVisibility = resetTime;\n  instance.set = function(targets, properties) {\n    setTargetsValue(targets, properties);\n    return instance;\n  };\n  instance.tick = function(t2) {\n    now2 = t2;\n    if (!startTime) {\n      startTime = now2;\n    }\n    setInstanceProgress((now2 + (lastTime - startTime)) * anime.speed);\n  };\n  instance.seek = function(time) {\n    setInstanceProgress(adjustTime(time));\n  };\n  instance.pause = function() {\n    instance.paused = true;\n    resetTime();\n  };\n  instance.play = function() {\n    if (!instance.paused) {\n      return;\n    }\n    if (instance.completed) {\n      instance.reset();\n    }\n    instance.paused = false;\n    activeInstances.push(instance);\n    resetTime();\n    engine();\n  };\n  instance.reverse = function() {\n    toggleInstanceDirection();\n    instance.completed = instance.reversed ? false : true;\n    resetTime();\n  };\n  instance.restart = function() {\n    instance.reset();\n    instance.play();\n  };\n  instance.remove = function(targets) {\n    var targetsArray = parseTargets(targets);\n    removeTargetsFromInstance(targetsArray, instance);\n  };\n  instance.reset();\n  if (instance.autoplay) {\n    instance.play();\n  }\n  return instance;\n}\nfunction removeTargetsFromAnimations(targetsArray, animations) {\n  for (var a = animations.length; a--; ) {\n    if (arrayContains(targetsArray, animations[a].animatable.target)) {\n      animations.splice(a, 1);\n    }\n  }\n}\nfunction removeTargetsFromInstance(targetsArray, instance) {\n  var animations = instance.animations;\n  var children = instance.children;\n  removeTargetsFromAnimations(targetsArray, animations);\n  for (var c = children.length; c--; ) {\n    var child = children[c];\n    var childAnimations = child.animations;\n    removeTargetsFromAnimations(targetsArray, childAnimations);\n    if (!childAnimations.length && !child.children.length) {\n      children.splice(c, 1);\n    }\n  }\n  if (!animations.length && !children.length) {\n    instance.pause();\n  }\n}\nfunction removeTargetsFromActiveInstances(targets) {\n  var targetsArray = parseTargets(targets);\n  for (var i = activeInstances.length; i--; ) {\n    var instance = activeInstances[i];\n    removeTargetsFromInstance(targetsArray, instance);\n  }\n}\nfunction stagger(val, params) {\n  if (params === void 0)\n    params = {};\n  var direction = params.direction || \"normal\";\n  var easing = params.easing ? parseEasings(params.easing) : null;\n  var grid = params.grid;\n  var axis = params.axis;\n  var fromIndex = params.from || 0;\n  var fromFirst = fromIndex === \"first\";\n  var fromCenter = fromIndex === \"center\";\n  var fromLast = fromIndex === \"last\";\n  var isRange = is.arr(val);\n  var val1 = isRange ? parseFloat(val[0]) : parseFloat(val);\n  var val2 = isRange ? parseFloat(val[1]) : 0;\n  var unit = getUnit(isRange ? val[1] : val) || 0;\n  var start = params.start || 0 + (isRange ? val1 : 0);\n  var values2 = [];\n  var maxValue = 0;\n  return function(el, i, t2) {\n    if (fromFirst) {\n      fromIndex = 0;\n    }\n    if (fromCenter) {\n      fromIndex = (t2 - 1) / 2;\n    }\n    if (fromLast) {\n      fromIndex = t2 - 1;\n    }\n    if (!values2.length) {\n      for (var index2 = 0; index2 < t2; index2++) {\n        if (!grid) {\n          values2.push(Math.abs(fromIndex - index2));\n        } else {\n          var fromX = !fromCenter ? fromIndex % grid[0] : (grid[0] - 1) / 2;\n          var fromY = !fromCenter ? Math.floor(fromIndex / grid[0]) : (grid[1] - 1) / 2;\n          var toX = index2 % grid[0];\n          var toY = Math.floor(index2 / grid[0]);\n          var distanceX = fromX - toX;\n          var distanceY = fromY - toY;\n          var value = Math.sqrt(distanceX * distanceX + distanceY * distanceY);\n          if (axis === \"x\") {\n            value = -distanceX;\n          }\n          if (axis === \"y\") {\n            value = -distanceY;\n          }\n          values2.push(value);\n        }\n        maxValue = Math.max.apply(Math, values2);\n      }\n      if (easing) {\n        values2 = values2.map(function(val3) {\n          return easing(val3 / maxValue) * maxValue;\n        });\n      }\n      if (direction === \"reverse\") {\n        values2 = values2.map(function(val3) {\n          return axis ? val3 < 0 ? val3 * -1 : -val3 : Math.abs(maxValue - val3);\n        });\n      }\n    }\n    var spacing = isRange ? (val2 - val1) / maxValue : val1;\n    return start + spacing * (Math.round(values2[i] * 100) / 100) + unit;\n  };\n}\nfunction timeline(params) {\n  if (params === void 0)\n    params = {};\n  var tl = anime(params);\n  tl.duration = 0;\n  tl.add = function(instanceParams, timelineOffset) {\n    var tlIndex = activeInstances.indexOf(tl);\n    var children = tl.children;\n    if (tlIndex > -1) {\n      activeInstances.splice(tlIndex, 1);\n    }\n    function passThrough(ins2) {\n      ins2.passThrough = true;\n    }\n    for (var i = 0; i < children.length; i++) {\n      passThrough(children[i]);\n    }\n    var insParams = mergeObjects(instanceParams, replaceObjectProps(defaultTweenSettings, params));\n    insParams.targets = insParams.targets || params.targets;\n    var tlDuration = tl.duration;\n    insParams.autoplay = false;\n    insParams.direction = tl.direction;\n    insParams.timelineOffset = is.und(timelineOffset) ? tlDuration : getRelativeValue(timelineOffset, tlDuration);\n    passThrough(tl);\n    tl.seek(insParams.timelineOffset);\n    var ins = anime(insParams);\n    passThrough(ins);\n    children.push(ins);\n    var timings = getInstanceTimings(children, params);\n    tl.delay = timings.delay;\n    tl.endDelay = timings.endDelay;\n    tl.duration = timings.duration;\n    tl.seek(0);\n    tl.reset();\n    if (tl.autoplay) {\n      tl.play();\n    }\n    return tl;\n  };\n  return tl;\n}\nanime.version = \"3.2.1\";\nanime.speed = 1;\nanime.suspendWhenDocumentHidden = true;\nanime.running = activeInstances;\nanime.remove = removeTargetsFromActiveInstances;\nanime.get = getOriginalTargetValue;\nanime.set = setTargetsValue;\nanime.convertPx = convertPxToUnit;\nanime.path = getPath;\nanime.setDashoffset = setDashoffset;\nanime.stagger = stagger;\nanime.timeline = timeline;\nanime.easing = parseEasings;\nanime.penner = penner;\nanime.random = function(min, max) {\n  return Math.floor(Math.random() * (max - min + 1)) + min;\n};\nvar __assign$6 = globalThis && globalThis.__assign || function() {\n  __assign$6 = Object.assign || function(t2) {\n    for (var s, i = 1, n2 = arguments.length; i < n2; i++) {\n      s = arguments[i];\n      for (var p2 in s)\n        if (Object.prototype.hasOwnProperty.call(s, p2))\n          t2[p2] = s[p2];\n    }\n    return t2;\n  };\n  return __assign$6.apply(this, arguments);\n};\nvar defaultNavbarTcc = {};\nvar GlobalContext = react.exports.createContext(__assign$6({ prefix: \"ac-navbar\", getPopupContainer: function() {\n  return document.body;\n}, lang: \"zh-CN\", isMobile: false }, defaultNavbarTcc));\nvar arcoConfig = window.arcoConfig || {};\nvar internalUrl = \"https://\" + arcoConfig.internalHostName;\nvar externalUrl = \"https://\" + arcoConfig.externalHostName;\nvar isExternal = location.hostname === arcoConfig.externalHostName;\nvar isInternal = location.host === arcoConfig.internalHostName;\nvar isDev = location.hostname.startsWith(\"localhost\") || location.host.startsWith(\"127.0.0.1\");\nvar isBoe = !isExternal && !isInternal && !isDev;\nvar hostname = isDev ? arcoConfig.externalHostName : location.hostname;\nvar apiBasename = isBoe ? \"http://\" + hostname : \"https://\" + (hostname || \"arco.design\");\nvar internalHost = arcoConfig.internalHostName;\nvar externalHost = arcoConfig.externalHostName;\nvar eventMap = {\n  clickSingleNavigation: \"click_single_navigation\",\n  searchContent: \"search_content\",\n  clickNavigation: \"click_navigation\",\n  clickSiteConfig: \"click_site_config\",\n  clickUserNavigation: \"click_user_navigation\",\n  clickLogout: \"click_logout\",\n  clickLogin: \"click_login\",\n  isLogin: \"is_login\"\n};\nvar localeComponents = {\n  \"zh-CN\": {\n    search: \"\\u641C\\u7D22\",\n    searchedResult: \"\\u641C\\u7D22\\u5230 {0} \\u4E2A\\u7ED3\\u679C\",\n    searchInArcoDesign: \"\\u5728 Arco Design \\u4E2D\\u641C\\u7D22...\",\n    noResult: \"\\u6CA1\\u6709 {0} \\u7684\\u641C\\u7D22\\u7ED3\\u679C\",\n    loading: \"\\u52A0\\u8F7D\\u4E2D\",\n    open: \"\\u6253\\u5F00\",\n    exit: \"\\u9000\\u51FA\",\n    component: \"\\u7EC4\\u4EF6\",\n    material: \"\\u7269\\u6599\",\n    theme: \"\\u4E3B\\u9898\",\n    design: \"\\u8BBE\\u8BA1\",\n    resource: \"\\u8D44\\u6E90\",\n    about: \"\\u5173\\u4E8E Arco\",\n    github: \"GitHub\",\n    modeDark: \"\\u6697\\u9ED1\\u6A21\\u5F0F\",\n    modeLight: \"\\u4EAE\\u8272\\u6A21\\u5F0F\",\n    modeSystem: \"\\u8DDF\\u968F\\u7CFB\\u7EDF\",\n    joinChat: \"\\u52A0\\u5165 Oncall \\u7FA4\\u804A\",\n    needLogin: \"\\u672A\\u767B\\u5F55\",\n    loginNow: \"\\u7ACB\\u5373\\u767B\\u5F55\",\n    logout: \"\\u9000\\u51FA\\u767B\\u5F55\",\n    myTheme: \"\\u6211\\u7684\\u4E3B\\u9898\",\n    myMaterial: \"\\u6211\\u7684\\u7269\\u6599\",\n    internalVersion: \"\\u8DF3\\u8F6C\\u5185\\u7F51\\u7248\",\n    externalVersion: \"\\u8DF3\\u8F6C\\u5916\\u7F51\\u7248\",\n    toBeOpen: \"\\u5373\\u5C06\\u5F00\\u653E\",\n    version: \"\\u7248\\u672C\",\n    Icon: \"\\u56FE\\u6807 Icon\",\n    Button: \"\\u6309\\u94AE Button\",\n    Link: \"\\u94FE\\u63A5 Link\",\n    Typography: \"\\u6392\\u7248 Typography\",\n    Grid: \"\\u6805\\u683C Grid\",\n    Divider: \"\\u5206\\u5272\\u7EBF Divider\",\n    Layout: \"\\u5E03\\u5C40 Layout\",\n    Space: \"\\u95F4\\u8DDD Space\",\n    Avatar: \"\\u5934\\u50CF Avatar\",\n    Badge: \"\\u5FBD\\u6807 Badge\",\n    Calendar: \"\\u65E5\\u5386 Calendar\",\n    Card: \"\\u5361\\u7247 Card\",\n    Collapse: \"\\u6298\\u53E0\\u9762\\u677F Collapse\",\n    Comment: \"\\u8BC4\\u8BBA Comment\",\n    Descriptions: \"\\u63CF\\u8FF0\\u5217\\u8868 Descriptions\",\n    Empty: \"\\u7A7A\\u72B6\\u6001 Empty\",\n    List: \"\\u5217\\u8868 List\",\n    Statistic: \"\\u6570\\u503C\\u663E\\u793A Statistic\",\n    Tabs: \"\\u6807\\u7B7E\\u9875 Tabs\",\n    Table: \"\\u8868\\u683C Table\",\n    Tag: \"\\u6807\\u7B7E Tag\",\n    Timeline: \"\\u65F6\\u95F4\\u8F74 Timeline\",\n    Tooltip: \"\\u6587\\u5B57\\u6C14\\u6CE1 Tooltip\",\n    Popover: \"\\u6C14\\u6CE1\\u5361\\u7247 Popover\",\n    Carousel: \"\\u56FE\\u7247\\u8F6E\\u64AD Carousel\",\n    Tree: \"\\u6811 Tree\",\n    Image: \"\\u56FE\\u7247 Image\",\n    DatePicker: \"\\u65E5\\u671F\\u9009\\u62E9\\u5668 DatePicker\",\n    TimePicker: \"\\u65F6\\u95F4\\u9009\\u62E9\\u5668 TimePicker\",\n    Input: \"\\u8F93\\u5165\\u6846 Input\",\n    InputTag: \"\\u6807\\u7B7E\\u8F93\\u5165\\u6846 InputTag\",\n    InputNumber: \"\\u6570\\u5B57\\u8F93\\u5165\\u6846 InputNumber\",\n    AutoComplete: \"\\u81EA\\u52A8\\u8865\\u5168 AutoComplete\",\n    Checkbox: \"\\u590D\\u9009\\u6846 Checkbox\",\n    Radio: \"\\u5355\\u9009\\u6846 Radio\",\n    Rate: \"\\u8BC4\\u5206 Rate\",\n    Switch: \"\\u5F00\\u5173 Switch\",\n    Select: \"\\u9009\\u62E9\\u5668 Select\",\n    TreeSelect: \"\\u6811\\u9009\\u62E9 TreeSelect\",\n    Cascader: \"\\u7EA7\\u8054\\u9009\\u62E9 Cascader\",\n    Slider: \"\\u6ED1\\u52A8\\u8F93\\u5165\\u6761 Slider\",\n    Form: \"\\u8868\\u5355 Form\",\n    Upload: \"\\u4E0A\\u4F20 Upload\",\n    Transfer: \"\\u6570\\u636E\\u7A7F\\u68AD\\u6846 Transfer\",\n    Mentions: \"\\u63D0\\u53CA Mentions\",\n    Alert: \"\\u8B66\\u544A\\u63D0\\u793A Alert\",\n    Drawer: \"\\u62BD\\u5C49 Drawer\",\n    Message: \"\\u5168\\u5C40\\u63D0\\u793A Message\",\n    Notification: \"\\u901A\\u77E5\\u63D0\\u9192\\u6846 Notification\",\n    Popconfirm: \"\\u6C14\\u6CE1\\u786E\\u8BA4\\u6846 Popconfirm\",\n    Progress: \"\\u8FDB\\u5EA6\\u6761 Progress\",\n    Result: \"\\u7ED3\\u679C\\u9875 Result\",\n    Spin: \"\\u52A0\\u8F7D\\u4E2D Spin\",\n    Modal: \"\\u5BF9\\u8BDD\\u6846 Modal\",\n    Skeleton: \"\\u9AA8\\u67B6\\u5C4F Skeleton\",\n    Breadcrumb: \"\\u9762\\u5305\\u5C51 Breadcrumb\",\n    Dropdown: \"\\u4E0B\\u62C9\\u83DC\\u5355 Dropdown\",\n    Menu: \"\\u83DC\\u5355 Menu\",\n    PageHeader: \"\\u9875\\u5934 PageHeader\",\n    Pagination: \"\\u5206\\u9875 Pagination\",\n    Steps: \"\\u6B65\\u9AA4\\u6761 Steps\",\n    ConfigProvider: \"\\u5168\\u5C40\\u914D\\u7F6E ConfigProvider\",\n    Affix: \"\\u56FA\\u9489 Affix\",\n    Anchor: \"\\u951A\\u70B9 Anchor\",\n    BackTop: \"\\u8FD4\\u56DE\\u9876\\u90E8 BackTop\",\n    Trigger: \"\\u89E6\\u53D1\\u5668 Trigger\",\n    ResizeBox: \"\\u4F38\\u7F29\\u6846 ResizeBox\",\n    TextArea: \"\\u6587\\u672C\\u57DF TextArea\"\n  },\n  \"en-US\": {\n    search: \"Search\",\n    searchedResult: \"{0} results found\",\n    searchInArcoDesign: \"Search in Arco Design...\",\n    noResult: \"No search results for {0}\",\n    loading: \"Loading\",\n    open: \"Open\",\n    exit: \"Exit\",\n    component: \"Component\",\n    material: \"Material\",\n    theme: \"Theme\",\n    design: \"Design\",\n    github: \"GitHub\",\n    resource: \"Resource\",\n    modeDark: \"Dark Mode\",\n    modeLight: \"Light Mode\",\n    modeSystem: \"System theme\",\n    toLight: \"Light style\",\n    joinChat: \"OnCall group chat\",\n    needLogin: \"401\",\n    loginNow: \"Login\",\n    logout: \"Logout\",\n    myTheme: \"My Themes\",\n    myMaterial: \"My Materials\",\n    internalVersion: \"Internal Docs\",\n    externalVersion: \"External Dos\",\n    toBeOpen: \"Open soon\",\n    version: \"Version\",\n    Icon: \"Icon\",\n    Button: \"Button\",\n    Link: \"Link\",\n    Typography: \"Typography\",\n    Grid: \"Grid\",\n    Divider: \"Divider\",\n    Layout: \"Layout\",\n    Space: \"Space\",\n    Avatar: \"Avatar\",\n    Badge: \"Badge\",\n    Calendar: \"Calendar\",\n    Card: \"Card\",\n    Collapse: \"Collapse\",\n    Comment: \"Comment\",\n    Descriptions: \"Descriptions\",\n    Empty: \"Empty\",\n    List: \"List\",\n    Statistic: \"Statistic\",\n    Tabs: \"Tabs\",\n    Table: \"Table\",\n    Tag: \"Tag\",\n    Timeline: \"Timeline\",\n    Tooltip: \"Tooltip\",\n    Popover: \"Popover\",\n    Carousel: \"Carousel\",\n    Tree: \"Tree\",\n    Image: \"Image\",\n    DatePicker: \"DatePicker\",\n    TimePicker: \"TimePicker\",\n    Input: \"Input\",\n    InputTag: \"InputTag\",\n    InputNumber: \"InputNumber\",\n    AutoComplete: \"AutoComplete\",\n    Checkbox: \"Checkbox\",\n    Radio: \"Radio\",\n    Rate: \"Rate\",\n    Switch: \"Switch\",\n    Select: \"Select\",\n    TreeSelect: \"TreeSelect\",\n    Cascader: \"Cascader\",\n    Slider: \"Slider\",\n    Form: \"Form\",\n    Upload: \"Upload\",\n    Transfer: \"Transfer\",\n    Mentions: \"Mentions\",\n    Alert: \"Alert\",\n    Drawer: \"Drawer\",\n    Message: \"Message\",\n    Notification: \"Notification\",\n    Popconfirm: \"Popconfirm\",\n    Progress: \"Progress\",\n    Result: \"Result\",\n    Spin: \"Spin\",\n    Modal: \"Modal\",\n    Skeleton: \"Skeleton\",\n    Breadcrumb: \"Breadcrumb\",\n    Dropdown: \"Dropdown\",\n    Menu: \"Menu\",\n    PageHeader: \"PageHeader\",\n    Pagination: \"Pagination\",\n    Steps: \"Steps\",\n    ConfigProvider: \"ConfigProvider\",\n    Affix: \"Affix\",\n    Anchor: \"Anchor\",\n    BackTop: \"BackTop\",\n    Trigger: \"Trigger\",\n    ResizeBox: \"ResizeBox\",\n    TextArea: \"TextArea\"\n  }\n};\nfunction SvgComponent$2f(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: \"143px\",\n    height: \"24px\",\n    viewBox: \"0 0 143 24\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    stroke: \"none\",\n    strokeWidth: 1,\n    fill: \"none\",\n    fillRule: \"evenodd\"\n  }, /* @__PURE__ */ react.exports.createElement(\"g\", {\n    id: \"\\\\u753B\\\\u677F\",\n    transform: \"translate(-26.000000, -14.000000)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"g\", {\n    id: \"\\\\u7F16\\\\u7EC4-6\\\\u5907\\\\u4EFD\",\n    transform: \"translate(26.000000, 14.000000)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"g\", {\n    id: \"\\\\u7F16\\\\u7EC4-3\"\n  }, /* @__PURE__ */ react.exports.createElement(\"g\", {\n    id: \"\\\\u7F16\\\\u7EC4\\\\u5907\\\\u4EFD-2\"\n  }, /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M5.97892249,6.74254507 L16.53,6.61743348 C19.3443465,6.58406178 21.6528783,8.83848732 21.68625,11.6528339 C21.6867276,11.6931157 21.6867276,11.7334017 21.68625,11.7736835 L21.6848884,11.888511 C21.6512381,14.7263497 19.3589163,17.0186716 16.5210775,17.0523219 L5.97,17.1774335 C3.15565346,17.2108052 0.847121698,14.9563796 0.81375,12.1420331 C0.81327235,12.1017513 0.81327235,12.0614653 0.81375,12.0211835 L0.815111591,11.906356 C0.848761853,9.06851721 3.14108374,6.77619533 5.97892249,6.74254507 Z\",\n    id: \"\\\\u77E9\\\\u5F62\\\\u5907\\\\u4EFD-3\",\n    fill: \"#12D2AC\",\n    transform: \"translate(11.250000, 11.897433) rotate(-45.000000) translate(-11.250000, -11.897433) \"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M13.2680433,6.61743348 L23.7042933,6.74118348 C26.6059852,6.77559089 28.9498858,9.11949151 28.9842933,12.0211835 C29.017665,14.83553 26.7632394,17.1440618 23.9488929,17.1774335 C23.9086111,17.1779111 23.868325,17.1779111 23.8280433,17.1774335 L13.3917933,17.0536835 C10.4901013,17.0192761 8.14620067,14.6753754 8.11179325,11.7736835 C8.07842156,8.95933693 10.3328471,6.65080517 13.1471936,6.61743348 C13.1874754,6.61695583 13.2277615,6.61695583 13.2680433,6.61743348 Z\",\n    id: \"\\\\u77E9\\\\u5F62\\\\u5907\\\\u4EFD-7\",\n    fill: \"#307AF2\",\n    transform: \"translate(18.548043, 11.897433) rotate(-315.000000) translate(-18.548043, -11.897433) \"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M14.9646154,2.94345291 L20.0496701,3.00375 L20.0496701,3.00375 L20.1734201,13.44 L9.7371701,13.31625 L9.67687301,8.23119527 C9.64265028,5.34507853 11.9545672,2.97767564 14.8406839,2.94345291 C14.8819929,2.94296308 14.9233063,2.94296308 14.9646154,2.94345291 Z\",\n    id: \"\\\\u77E9\\\\u5F62\",\n    fill: \"#0057FE\",\n    transform: \"translate(14.893420, 8.160000) rotate(-315.000000) translate(-14.893420, -8.160000) \"\n  })), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    id: \"\\\\u7F16\\\\u7EC4-2\",\n    transform: \"translate(76.300000, 15.000000)\",\n    fill: \"var(--color-text-1)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M2.34361572,4.26825799 C3.36534251,4.26825799 4.19361572,3.43998478 4.19361572,2.41825799 C4.19361572,1.39653121 3.36534251,0.568257993 2.34361572,0.568257993 C1.32188894,0.568257993 0.493615723,1.39653121 0.493615723,2.41825799 C0.493615723,3.43998478 1.32188894,4.26825799 2.34361572,4.26825799 Z\",\n    id: \"\\\\u692D\\\\u5706\\\\u5F62\\\\u5907\\\\u4EFD\"\n  }))), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M45.4540018,8.33500087 L45.4540018,18.9940026 L42.6490014,18.9940026 L42.6490014,17.8170024 C41.9560013,18.6750026 40.9220011,19.2690027 39.4590008,19.2690027 C36.5220004,19.2690027 34.3,16.8600023 34.3,13.6590017 C34.3,10.4580012 36.5220004,8.04900083 39.4590008,8.04900083 C40.9220011,8.04900083 41.9450013,8.64300092 42.6490014,9.51200107 L42.6490014,8.33500087 L45.4540018,8.33500087 Z M39.9870009,10.7220013 C38.3040007,10.7220013 37.2370005,12.0310015 37.2370005,13.6590017 C37.2370005,15.287002 38.3040007,16.5960022 39.9870009,16.5960022 C41.6260012,16.5960022 42.7370005,15.342002 42.7370005,13.6590017 C42.7370005,11.9760015 41.6260012,10.7220013 39.9870009,10.7220013 Z M53.1540011,8.04900083 C53.7700012,8.04900083 54.2540012,8.13700084 54.6500013,8.28000087 L54.2210012,11.1290013 C53.7480012,10.9200013 53.066001,10.7880013 52.4830009,10.7880013 C51.1520007,10.7880013 50.2390006,11.6020014 50.2390006,13.1860017 L50.2390006,18.9940026 L47.3680001,18.9940026 L47.3680001,8.33500087 L50.1510006,8.33500087 L50.1510006,9.50100107 C50.8220007,8.5000009 51.8450008,8.04900083 53.1540011,8.04900083 Z M60.1610009,8.04900083 C61.9430012,8.04900083 63.4500015,8.77500095 64.4290016,10.0620012 L62.3610013,11.7890014 C61.7120012,11.0960013 61.0190011,10.7220013 60.0840009,10.7220013 C58.5990007,10.7220013 57.4110005,11.8880015 57.4110005,13.6590017 C57.4110005,15.441002 58.5880007,16.5960022 60.0730009,16.5960022 C60.9970011,16.5960022 61.7890012,16.1780022 62.3940013,15.5180021 L64.4400016,17.2670023 C63.4390015,18.5540025 61.9430012,19.2690027 60.1610009,19.2690027 C56.7620004,19.2690027 54.485,16.8930023 54.485,13.6590017 C54.485,10.4360012 56.7620004,8.04900083 60.1610009,8.04900083 Z M70.2810009,8.04900083 C73.6030015,8.04900083 76.0560019,10.4470012 76.0560019,13.6590017 C76.0560019,16.8710023 73.6030015,19.2690027 70.2810009,19.2690027 C66.9700004,19.2690027 64.528,16.8710023 64.528,13.6590017 C64.528,10.4470012 66.9700004,8.04900083 70.2810009,8.04900083 Z M70.2810009,10.7220013 C68.6640007,10.7220013 67.4540005,11.9320015 67.4540005,13.6590017 C67.4540005,15.386002 68.6640007,16.5960022 70.2810009,16.5960022 C71.8980012,16.5960022 73.1190014,15.386002 73.1190014,13.6590017 C73.1190014,11.9320015 71.8980012,10.7220013 70.2810009,10.7220013 Z M86.5280008,8.04900083 C87.9580011,8.04900083 88.9700012,8.61000092 89.6630014,9.44600106 L89.6630014,3.15400003 L92.5230018,3.15400003 L92.5230018,18.9940026 L89.7180014,18.9940026 L89.7180014,17.8170024 C89.0250013,18.6750026 87.9910011,19.2690027 86.5280008,19.2690027 C83.5910004,19.2690027 81.369,16.8600023 81.369,13.6590017 C81.369,10.4580012 83.5910004,8.04900083 86.5280008,8.04900083 Z M87.0560009,10.7220013 C85.3730007,10.7220013 84.3060005,12.0310015 84.3060005,13.6590017 C84.3060005,15.287002 85.3730007,16.5960022 87.0560009,16.5960022 C88.6950012,16.5960022 89.8060005,15.342002 89.8060005,13.6590017 C89.8060005,11.9760015 88.6950012,10.7220013 87.0560009,10.7220013 Z M99.1670009,8.04900083 C102.236001,8.04900083 104.337002,10.3260012 104.348002,13.6480017 C104.348002,13.9780018 104.326002,14.3740019 104.293002,14.6160019 L96.7360005,14.6160019 C97.0440005,16.1560022 98.1220007,16.8270023 99.4750009,16.8270023 C100.399001,16.8270023 101.400001,16.4530022 102.170001,15.8040021 L103.853002,17.6520024 C102.643001,18.7630026 101.103001,19.2690027 99.3100009,19.2690027 C96.0430004,19.2690027 93.777,17.0470023 93.777,13.6920018 C93.777,10.3370012 95.9770004,8.04900083 99.1670009,8.04900083 Z M99.1450009,10.5240012 C97.7920007,10.5240012 97.0000005,11.3380014 96.7470005,12.6580016 L101.466001,12.6580016 C101.202001,11.2940014 100.377001,10.5240012 99.1450009,10.5240012 Z M114.127002,9.072001 L113.159001,11.3050014 C112.312001,10.8870013 110.959001,10.4470012 109.760001,10.4360012 C108.671001,10.4360012 108.121001,10.8210013 108.121001,11.4040014 C108.121001,12.0200015 108.891001,12.1740015 109.859001,12.3170015 L110.805001,12.4600016 C113.115001,12.8120016 114.402002,13.8460018 114.402002,15.6500021 C114.402002,17.8500024 112.598001,19.2690027 109.507001,19.2690027 C108.055001,19.2690027 106.152,18.9940026 104.766,18.0150025 L105.899,15.8370021 C106.812,16.4420022 107.923001,16.8820023 109.529001,16.8820023 C110.860001,16.8820023 111.498001,16.5080022 111.498001,15.8810021 C111.498001,15.364002 110.959001,15.078002 109.727001,14.902002 L108.858001,14.7810019 C106.394,14.4400019 105.173,13.3620017 105.173,11.5470014 C105.173,9.35800104 106.867,8.06000083 109.672001,8.06000083 C111.377001,8.06000083 112.708001,8.37900088 114.127002,9.072001 Z M118.439001,8.33500087 L118.439001,18.9940026 L115.568,18.9940026 L115.568,8.33500087 L118.439001,8.33500087 Z M116.987,3.15400003 C118.021001,3.15400003 118.824001,3.96800016 118.824001,5.00200033 C118.824001,6.0360005 118.021001,6.82800063 116.987,6.82800063 C115.953,6.82800063 115.161,6.0360005 115.161,5.00200033 C115.161,3.96800016 115.953,3.15400003 116.987,3.15400003 Z M124.599001,8.04900083 C126.084001,8.04900083 127.173001,8.62100092 127.899001,9.52300107 L127.899001,8.33500087 L130.715002,8.33500087 L130.715002,18.1140025 C130.715002,21.535003 128.482001,23.6030034 124.962001,23.6030034 C123.279001,23.6030034 121.497,23.1630033 120.298,22.3160032 L121.321,19.9730028 C122.388,20.6770029 123.565001,21.062003 124.841001,21.062003 C126.623001,21.062003 127.877001,20.0720028 127.877001,18.2350025 L127.877001,17.4870024 C127.151001,18.3780025 126.073001,18.9280026 124.599001,18.9280026 C122.003,18.9280026 119.693,16.7610023 119.693,13.4940017 C119.693,10.2160012 122.003,8.04900083 124.599001,8.04900083 Z M125.325001,10.6890013 C123.686001,10.6890013 122.641,11.9430015 122.641,13.4940017 C122.641,15.034002 123.686001,16.2880022 125.325001,16.2880022 C126.920001,16.2880022 127.998001,15.078002 127.998001,13.4940017 C127.998001,11.8990015 126.920001,10.6890013 125.325001,10.6890013 Z M138.558001,8.04900083 C140.978001,8.04900083 142.705002,9.7320011 142.705002,12.2070015 L142.705002,18.9940026 L139.834001,18.9940026 L139.834001,13.1310017 C139.834001,11.5910014 139.064001,10.7440013 137.755001,10.7440013 C136.523001,10.7440013 135.500001,11.5470014 135.500001,13.1530017 L135.500001,18.9940026 L132.629,18.9940026 L132.629,8.33500087 L135.423001,8.33500087 L135.423001,9.58900108 C136.182001,8.45600089 137.348001,8.04900083 138.558001,8.04900083 Z\",\n    id: \"arco.design\",\n    fill: \"var(--color-text-1)\",\n    fillRule: \"nonzero\"\n  })))));\n}\nfunction SvgComponent$2e(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 24,\n    height: 24,\n    viewBox: \"0 0 24 24\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M3.52962 12.3681L3.52954 7.22853L20.4156 2.82385L20.4156 7.9628L3.52962 12.3681Z\",\n    fill: \"#165DFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M3.5298 21.1772L3.52972 16.0376L20.4158 11.6329L20.4158 16.7719L3.5298 21.1772Z\",\n    fill: \"#165DFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M20.4156 16.7723L20.4156 11.6327L3.52954 7.22803L3.52962 12.367L20.4156 16.7723Z\",\n    fill: \"#16D2AC\"\n  }));\n}\nfunction SvgComponent$2d(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 24,\n    height: 24,\n    viewBox: \"0 0 24 24\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M3.52962 12.3681L3.52954 7.22853L20.4156 2.82385L20.4156 7.9628L3.52962 12.3681Z\",\n    fill: \"#165DFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M3.5298 21.1772L3.52972 16.0376L20.4158 11.6329L20.4158 16.7719L3.5298 21.1772Z\",\n    fill: \"#165DFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M20.4156 16.7723L20.4156 11.6327L3.52954 7.22803L3.52962 12.367L20.4156 16.7723Z\",\n    fill: \"#6A98FF\"\n  }));\n}\nfunction SvgComponent$2c(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 20,\n    height: 20,\n    viewBox: \"0 0 20 20\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    fillRule: \"evenodd\",\n    clipRule: \"evenodd\",\n    d: \"M2.5 5L5 5L5 2.5L2.5 2.5L2.5 5ZM5 11.25L2.5 11.25L2.5 8.75L5 8.75L5 11.25ZM17.5 11.25L15 11.25L15 8.75L17.5 8.75L17.5 11.25ZM8.75 11.25L11.25 11.25L11.25 8.75L8.75 8.75L8.75 11.25ZM5 17.5L2.5 17.5L2.5 15L5 15L5 17.5ZM15 17.5L17.5 17.5L17.5 15L15 15L15 17.5ZM11.25 17.5L8.75 17.5L8.75 15L11.25 15L11.25 17.5ZM17.5 5L15 5L15 2.5L17.5 2.5L17.5 5ZM8.75 5L11.25 5L11.25 2.5L8.75 2.5L8.75 5Z\",\n    fill: \"currentColor\"\n  }));\n}\nvar __assign$5 = globalThis && globalThis.__assign || function() {\n  __assign$5 = Object.assign || function(t2) {\n    for (var s, i = 1, n2 = arguments.length; i < n2; i++) {\n      s = arguments[i];\n      for (var p2 in s)\n        if (Object.prototype.hasOwnProperty.call(s, p2))\n          t2[p2] = s[p2];\n    }\n    return t2;\n  };\n  return __assign$5.apply(this, arguments);\n};\nvar __read$g = globalThis && globalThis.__read || function(o, n2) {\n  var m2 = typeof Symbol === \"function\" && o[Symbol.iterator];\n  if (!m2)\n    return o;\n  var i = m2.call(o), r2, ar = [], e;\n  try {\n    while ((n2 === void 0 || n2-- > 0) && !(r2 = i.next()).done)\n      ar.push(r2.value);\n  } catch (error) {\n    e = { error };\n  } finally {\n    try {\n      if (r2 && !r2.done && (m2 = i[\"return\"]))\n        m2.call(i);\n    } finally {\n      if (e)\n        throw e.error;\n    }\n  }\n  return ar;\n};\nfunction LeftPanel(props) {\n  var _a, _b, _c, _d;\n  var _e = __read$g(react.exports.useState(false), 2), visible = _e[0], setVisible = _e[1];\n  var _f = react.exports.useContext(GlobalContext), contextList = _f.leftPanels, prefix = _f.prefix, getPopupContainer = _f.getPopupContainer, isMobile = _f.isMobile;\n  var leftPanels = props.list && props.list.length ? props.list : contextList;\n  var t2 = localeComponents[\"zh-CN\"];\n  var prefixCls2 = prefix + \"-left-panel\";\n  function handleClick(item) {\n    teaLog(eventMap.clickSingleNavigation, {\n      link: item.openLink,\n      name: item.name,\n      target: \"_self\"\n    });\n    if (!item.openLink) {\n      Message$1.info(t2.toBeOpen);\n    }\n  }\n  react.exports.useEffect(function() {\n    var panelTL = anime.timeline();\n    var panelTL2 = anime.timeline();\n    if (visible) {\n      panelTL.add({\n        targets: \".\" + prefixCls2 + \"-item\",\n        opacity: [0, 1],\n        duration: 400,\n        translateY: [-4, 0],\n        delay: function(el, i, l2) {\n          return anime.stagger(200 / l2, { start: 100 })(el, i, l2);\n        }\n      });\n    } else {\n      panelTL2.add({\n        targets: \".\" + prefixCls2 + \"-item\",\n        opacity: [1, 0],\n        duration: 300,\n        translateY: [0, -4]\n      });\n    }\n  }, [visible]);\n  var PopupElem = React.createElement(\"div\", { className: cs(prefixCls2, (_a = {}, _a[prefixCls2 + \"-mobile\"] = isMobile, _a)) }, !props.isHome && React.createElement(\"a\", { className: cs(prefixCls2 + \"-return-home\", (_b = {}, _b[prefixCls2 + \"-home-external\"] = !isInternal, _b)), href: isInternal ? internalUrl : externalUrl }, React.createElement(SvgComponent$2f, null), React.createElement(IconArrowRight$1, null)), isInternal && React.createElement(\"a\", { className: cs(prefixCls2 + \"-studio\", (_c = {}, _c[prefixCls2 + \"-return-home\"] = props.isHome, _c)), href: internalUrl + \"/studio\" }, React.createElement(\"div\", { className: prefixCls2 + \"-studio-name\" }, props.isHome ? React.createElement(SvgComponent$2e, null) : React.createElement(React.Fragment, null, React.createElement(SvgComponent$2d, { className: prefixCls2 + \"-studio-logo\" }), React.createElement(SvgComponent$2e, { className: prefixCls2 + \"-studio-logo-active\" })), \"Arco Studio\"), props.isHome && React.createElement(IconArrowRight$1, null)), React.createElement(\"div\", { className: prefixCls2 + \"-list\" }, leftPanels.map(function(item, index2) {\n    var openLink = isInternal ? item.innerLink || item.link : item.link;\n    return React.createElement(\"a\", { key: index2, className: prefixCls2 + \"-item\", href: openLink, onClick: function() {\n      return handleClick(__assign$5(__assign$5({}, item), { openLink }));\n    } }, React.createElement(\"div\", { className: prefixCls2 + \"-item-logo\" }, React.createElement(\"span\", { className: prefixCls2 + \"-item-logo-common\", dangerouslySetInnerHTML: { __html: item.svg } }), React.createElement(\"span\", { className: prefixCls2 + \"-item-logo-active\", dangerouslySetInnerHTML: { __html: item.activeSvg || item.svg } })), React.createElement(\"div\", { className: prefixCls2 + \"-item-text\" }, React.createElement(\"p\", { className: prefixCls2 + \"-item-text-title\" }, item.name), React.createElement(\"span\", { className: prefixCls2 + \"-item-text-desc\" }, item.description)));\n  })));\n  return React.createElement(Trigger$1, { popupVisible: visible, onVisibleChange: setVisible, duration: 300, trigger: isMobile ? \"click\" : \"hover\", position: \"bl\", popupAlign: isMobile ? { bottom: [6, 2] } : { bottom: [12, 4] }, popup: function() {\n    return PopupElem;\n  }, classNames: prefixCls2 + \"-down\", mouseEnterDelay: 0, mouseLeaveDelay: 300, getPopupContainer }, React.createElement(\"div\", { className: cs(prefixCls2 + \"-trigger\", (_d = {}, _d[prefixCls2 + \"-mobile-trigger\"] = isMobile, _d)), role: \"combobox\", tabIndex: 0, \"aria-expanded\": visible, \"aria-controls\": \"arco-logo-panel-popup\", \"aria-haspopup\": \"true\", \"aria-label\": \"Hover to \" + (visible ? \"Close\" : \"Open\") + \" \" }, React.createElement(\"div\", { className: prefixCls2 + \"-trigger-icon\" }, React.createElement(SvgComponent$2c, null))));\n}\nvar __read$f = globalThis && globalThis.__read || function(o, n2) {\n  var m2 = typeof Symbol === \"function\" && o[Symbol.iterator];\n  if (!m2)\n    return o;\n  var i = m2.call(o), r2, ar = [], e;\n  try {\n    while ((n2 === void 0 || n2-- > 0) && !(r2 = i.next()).done)\n      ar.push(r2.value);\n  } catch (error) {\n    e = { error };\n  } finally {\n    try {\n      if (r2 && !r2.done && (m2 = i[\"return\"]))\n        m2.call(i);\n    } finally {\n      if (e)\n        throw e.error;\n    }\n  }\n  return ar;\n};\nfunction useThemeDetector() {\n  var getCurrentTheme = function() {\n    return window.matchMedia(\"(prefers-color-scheme: dark)\").matches;\n  };\n  var _a = __read$f(react.exports.useState(getCurrentTheme()), 2), isDarkTheme = _a[0], setIsDarkTheme = _a[1];\n  var mqListener = function(e) {\n    setIsDarkTheme(e.matches);\n  };\n  react.exports.useEffect(function() {\n    var darkThemeMq = window.matchMedia(\"(prefers-color-scheme: dark)\");\n    darkThemeMq.addListener(mqListener);\n    return function() {\n      return darkThemeMq.removeListener(mqListener);\n    };\n  }, []);\n  return isDarkTheme;\n}\nvar __read$e = globalThis && globalThis.__read || function(o, n2) {\n  var m2 = typeof Symbol === \"function\" && o[Symbol.iterator];\n  if (!m2)\n    return o;\n  var i = m2.call(o), r2, ar = [], e;\n  try {\n    while ((n2 === void 0 || n2-- > 0) && !(r2 = i.next()).done)\n      ar.push(r2.value);\n  } catch (error) {\n    e = { error };\n  } finally {\n    try {\n      if (r2 && !r2.done && (m2 = i[\"return\"]))\n        m2.call(i);\n    } finally {\n      if (e)\n        throw e.error;\n    }\n  }\n  return ar;\n};\nvar NavbarThemeContext = react.exports.createContext({});\nvar BODY_ATTRIBUTE_NAME = \"arco-theme\";\nfunction NavbarThemeProvider(props) {\n  var children = props.children, localStorageKey = props.localStorageKey;\n  var _a = __read$e(react.exports.useState(), 2), theme = _a[0], setTheme2 = _a[1];\n  var isDarkTheme = useThemeDetector();\n  react.exports.useEffect(function() {\n    setTheme2(localStorage.getItem(localStorageKey) || \"light\");\n  }, [localStorageKey]);\n  react.exports.useEffect(function() {\n    if (theme === \"dark\" || theme === \"light\") {\n      changeDarkAndLight(theme);\n    } else if (theme === \"system\") {\n      changeDarkAndLight(isDarkTheme ? \"dark\" : \"light\");\n    }\n  }, [theme]);\n  function changeDarkAndLight(newTheme) {\n    if (newTheme === \"dark\") {\n      document.body.setAttribute(BODY_ATTRIBUTE_NAME, \"dark\");\n    } else if (newTheme === \"light\") {\n      document.body.removeAttribute(BODY_ATTRIBUTE_NAME);\n    }\n  }\n  function onHandleTheme(newTheme) {\n    setTheme2(newTheme);\n    localStorage.setItem(localStorageKey, newTheme);\n  }\n  return React.createElement(NavbarThemeContext.Provider, { value: {\n    theme,\n    onHandleTheme,\n    realTheme: theme === \"system\" ? isDarkTheme ? \"dark\" : \"light\" : theme\n  } }, children);\n}\nNavbarThemeProvider.defaultProps = {\n  localStorageKey: \"arco-theme\"\n};\nvar index$d = \"\";\nvar index$c = \"\";\nvar generateUrl = function(href) {\n  var formatHref = href.startsWith(\"/\") ? href : \"/\" + href;\n  var hostname2 = location.hostname;\n  var globalConfig = window.arcoConfig;\n  if (href.startsWith(\"http\") || href.startsWith(\"https\")) {\n    return href;\n  }\n  if (globalConfig) {\n    var externalHostName = globalConfig.externalHostName, internalHostName = globalConfig.internalHostName;\n    if (hostname2 === externalHostName || hostname2 === internalHostName) {\n      return formatHref;\n    }\n    return \"//\" + externalHostName + formatHref;\n  }\n  return \"//arco.design\" + formatHref;\n};\nvar generateUrl$1 = generateUrl;\nfunction DesignContent(props) {\n  var _a = react.exports.useContext(GlobalContext), contextConfigs = _a.designConfigs, prefix = _a.prefix, lang = _a.lang;\n  var prefixCls2 = prefix + \"-dropdown\";\n  var designConfigs = props.designConfigs && props.designConfigs.length ? props.designConfigs : contextConfigs;\n  var isEn = lang === \"en-US\";\n  react.exports.useEffect(function() {\n    var timeline2 = anime.timeline();\n    timeline2.add({\n      targets: \".\" + prefixCls2 + \"-block\",\n      opacity: [0, 1],\n      duration: 400,\n      translateX: [-20, 0],\n      easing: \"easeOutQuart\",\n      delay: function(el, i, l2) {\n        return anime.stagger(100 / l2, { start: 200 })(el, i, l2);\n      }\n    }).add({\n      targets: \".\" + prefixCls2 + \"-item\",\n      opacity: [0, 1],\n      duration: 450,\n      easing: \"easeOutQuart\",\n      translateX: [-16, 0],\n      delay: function(el, i, l2) {\n        return anime.stagger(200 / l2, { grid: [5, 4], from: \"first\", axis: \"x\" })(el, i, l2);\n      }\n    }, 200);\n  }, []);\n  var reportTea = function(item, type) {\n    var hrefLink = item.link || generateUrl$1(item.path);\n    teaLog(eventMap.clickNavigation, {\n      menu: \"\\u8BBE\\u8BA1\",\n      type,\n      name: isEn ? item.enName : item.name,\n      link: hrefLink,\n      target: \"_blank\"\n    });\n  };\n  return React.createElement(Grid.Row, { className: prefixCls2, gutter: 20 }, designConfigs.map(function(block, index2) {\n    return React.createElement(Grid.Col, { span: 12, className: prefixCls2 + \"-block\", key: index2 }, React.createElement(\"div\", { className: prefixCls2 + \"-title\" }, isEn ? block.enTitle : block.title), React.createElement(\"div\", { className: prefixCls2 + \"-list\" }, block.list.map(function(item, index3) {\n      var icon2 = React.createElement(\"div\", { className: prefixCls2 + \"-item-icon\", dangerouslySetInnerHTML: { __html: item.svg } });\n      return React.createElement(\"a\", { className: prefixCls2 + \"-item\", key: index3, href: item.link || generateUrl$1(item.path), target: \"_blank\", rel: \"noreferrer\", onClick: function() {\n        return reportTea(item, isEn ? block.enTitle : block.title);\n      } }, item.new ? React.createElement(Badge$1, { count: 10, dot: true }, icon2) : icon2, React.createElement(\"span\", { className: prefixCls2 + \"-item-name\" }, isEn ? item.enName : item.name));\n    })));\n  }));\n}\nvar index$b = \"\";\nvar __awaiter$5 = globalThis && globalThis.__awaiter || function(thisArg, _arguments, P2, generator) {\n  function adopt(value) {\n    return value instanceof P2 ? value : new P2(function(resolve) {\n      resolve(value);\n    });\n  }\n  return new (P2 || (P2 = Promise))(function(resolve, reject) {\n    function fulfilled(value) {\n      try {\n        step(generator.next(value));\n      } catch (e) {\n        reject(e);\n      }\n    }\n    function rejected(value) {\n      try {\n        step(generator[\"throw\"](value));\n      } catch (e) {\n        reject(e);\n      }\n    }\n    function step(result) {\n      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);\n    }\n    step((generator = generator.apply(thisArg, _arguments || [])).next());\n  });\n};\nvar __generator$5 = globalThis && globalThis.__generator || function(thisArg, body) {\n  var _ = { label: 0, sent: function() {\n    if (t2[0] & 1)\n      throw t2[1];\n    return t2[1];\n  }, trys: [], ops: [] }, f, y2, t2, g;\n  return g = { next: verb(0), \"throw\": verb(1), \"return\": verb(2) }, typeof Symbol === \"function\" && (g[Symbol.iterator] = function() {\n    return this;\n  }), g;\n  function verb(n2) {\n    return function(v2) {\n      return step([n2, v2]);\n    };\n  }\n  function step(op) {\n    if (f)\n      throw new TypeError(\"Generator is already executing.\");\n    while (_)\n      try {\n        if (f = 1, y2 && (t2 = op[0] & 2 ? y2[\"return\"] : op[0] ? y2[\"throw\"] || ((t2 = y2[\"return\"]) && t2.call(y2), 0) : y2.next) && !(t2 = t2.call(y2, op[1])).done)\n          return t2;\n        if (y2 = 0, t2)\n          op = [op[0] & 2, t2.value];\n        switch (op[0]) {\n          case 0:\n          case 1:\n            t2 = op;\n            break;\n          case 4:\n            _.label++;\n            return { value: op[1], done: false };\n          case 5:\n            _.label++;\n            y2 = op[1];\n            op = [0];\n            continue;\n          case 7:\n            op = _.ops.pop();\n            _.trys.pop();\n            continue;\n          default:\n            if (!(t2 = _.trys, t2 = t2.length > 0 && t2[t2.length - 1]) && (op[0] === 6 || op[0] === 2)) {\n              _ = 0;\n              continue;\n            }\n            if (op[0] === 3 && (!t2 || op[1] > t2[0] && op[1] < t2[3])) {\n              _.label = op[1];\n              break;\n            }\n            if (op[0] === 6 && _.label < t2[1]) {\n              _.label = t2[1];\n              t2 = op;\n              break;\n            }\n            if (t2 && _.label < t2[2]) {\n              _.label = t2[2];\n              _.ops.push(op);\n              break;\n            }\n            if (t2[2])\n              _.ops.pop();\n            _.trys.pop();\n            continue;\n        }\n        op = body.call(thisArg, _);\n      } catch (e) {\n        op = [6, e];\n        y2 = 0;\n      } finally {\n        f = t2 = 0;\n      }\n    if (op[0] & 5)\n      throw op[1];\n    return { value: op[0] ? op[1] : void 0, done: true };\n  }\n};\nvar __read$d = globalThis && globalThis.__read || function(o, n2) {\n  var m2 = typeof Symbol === \"function\" && o[Symbol.iterator];\n  if (!m2)\n    return o;\n  var i = m2.call(o), r2, ar = [], e;\n  try {\n    while ((n2 === void 0 || n2-- > 0) && !(r2 = i.next()).done)\n      ar.push(r2.value);\n  } catch (error) {\n    e = { error };\n  } finally {\n    try {\n      if (r2 && !r2.done && (m2 = i[\"return\"]))\n        m2.call(i);\n    } finally {\n      if (e)\n        throw e.error;\n    }\n  }\n  return ar;\n};\nfunction DevelopContent(props) {\n  var _a = react.exports.useContext(GlobalContext), contextConfigs = _a.developConfigs, prefix = _a.prefix, lang = _a.lang;\n  var _b = __read$d(react.exports.useReducer(function(v2) {\n    return v2 + 1;\n  }, 0), 2);\n  _b[0];\n  var forceUpdate = _b[1];\n  var versionObj = window.navVersionObj || {};\n  react.exports.useEffect(function() {\n    if (typeof versionObj !== \"object\" || !Object.keys(versionObj).length) {\n      getVersions();\n    }\n  }, []);\n  var prefixCls2 = prefix + \"-dropdown\";\n  var developConfigs = props.designConfigs && props.designConfigs.length ? props.designConfigs : contextConfigs;\n  var isEn = lang === \"en-US\";\n  var library = react.exports.useMemo(function() {\n    var library2 = {};\n    developConfigs.forEach(function(block) {\n      block.list.forEach(function(item) {\n        if (item.npm) {\n          library2[item.npm] = (versionObj === null || versionObj === void 0 ? void 0 : versionObj[item.npm]) || \"\";\n        }\n      });\n    });\n    return library2;\n  }, [developConfigs]);\n  function getVersions() {\n    return __awaiter$5(this, void 0, void 0, function() {\n      var versionList;\n      var _this = this;\n      return __generator$5(this, function(_a2) {\n        switch (_a2.label) {\n          case 0:\n            return [4, Promise.all(Object.keys(library).map(function(npmPackage) {\n              return __awaiter$5(_this, void 0, void 0, function() {\n                var _a3, ok2, result;\n                return __generator$5(this, function(_b2) {\n                  switch (_b2.label) {\n                    case 0:\n                      _b2.trys.push([0, 2, , 3]);\n                      return [4, axios.get(\"/material/api/npm?name=\" + npmPackage + \"&version=latest\")];\n                    case 1:\n                      _a3 = _b2.sent().data, ok2 = _a3.ok, result = _a3.result;\n                      if (ok2) {\n                        library[npmPackage] = result.version;\n                        return [2, result.version];\n                      }\n                      return [3, 3];\n                    case 2:\n                      _b2.sent();\n                      return [3, 3];\n                    case 3:\n                      return [2];\n                  }\n                });\n              });\n            }))];\n          case 1:\n            versionList = _a2.sent();\n            window.navVersion = versionList;\n            window.navVersionObj = library;\n            forceUpdate();\n            return [2];\n        }\n      });\n    });\n  }\n  react.exports.useEffect(function() {\n    var timeline2 = anime.timeline();\n    timeline2.add({\n      targets: \".\" + prefixCls2 + \"-block\",\n      opacity: [0, 1],\n      duration: 400,\n      translateX: [-20, 0],\n      easing: \"easeOutQuart\",\n      delay: function(el, i, l2) {\n        return anime.stagger(300 / l2, { start: 200 })(el, i, l2);\n      }\n    }).add({\n      targets: \".\" + prefixCls2 + \"-item\",\n      opacity: [0, 1],\n      duration: 450,\n      easing: \"easeOutQuart\",\n      translateX: [-16, 0],\n      delay: function(el, i, l2) {\n        return anime.stagger(200 / l2, { grid: [5, 4], from: \"first\", axis: \"x\" })(el, i, l2);\n      }\n    }, 200);\n  }, []);\n  var reportTea = function(item, type) {\n    var hrefLink = item.link || generateUrl$1(item.path);\n    teaLog(eventMap.clickNavigation, {\n      menu: \"\\u5F00\\u53D1\",\n      type,\n      name: isEn ? item.enName : item.name,\n      link: hrefLink,\n      target: \"_blank\"\n    });\n  };\n  return React.createElement(Grid.Row, { className: cs(prefixCls2, prefixCls2 + \"-develop\"), gutter: 20 }, developConfigs.map(function(block, index2) {\n    var _a2;\n    return React.createElement(Grid.Col, { span: 12, className: cs(prefixCls2 + \"-block\", (_a2 = {}, _a2[prefixCls2 + \"-block-left\"] = index2 === 0, _a2)), key: index2 }, React.createElement(\"div\", { className: prefixCls2 + \"-title\" }, isEn ? block.enTitle : block.title), React.createElement(\"div\", { className: prefixCls2 + \"-list\" }, block.list.map(function(item, index3) {\n      var icon2 = React.createElement(\"div\", { className: prefixCls2 + \"-item-icon\", dangerouslySetInnerHTML: { __html: item.svg } });\n      return React.createElement(\"a\", { className: prefixCls2 + \"-item\", key: index3, href: item.link || generateUrl$1(item.path), target: \"_blank\", rel: \"noreferrer\", onClick: function() {\n        return reportTea(item, isEn ? block.enTitle : block.title);\n      } }, item.new ? React.createElement(Badge$1, { count: 10, dot: true }, icon2) : icon2, React.createElement(\"div\", null, React.createElement(\"div\", { className: prefixCls2 + \"-item-name\" }, isEn ? item.enName : item.name, item.npm && library[item.npm] ? React.createElement(\"div\", { className: prefixCls2 + \"-item-version\" }, library[item.npm]) : \"\"), item.desc && React.createElement(\"div\", { className: prefixCls2 + \"-item-desc\" }, item.desc)));\n    })));\n  }));\n}\nvar index$a = \"\";\nfunction EcosystemContent(props) {\n  var _a = react.exports.useContext(GlobalContext), contextConfigs = _a.ecosystemConfigs, prefix = _a.prefix, lang = _a.lang;\n  var prefixCls2 = prefix + \"-dropdown\";\n  var ecosystemConfigs = props.ecosystemConfigs && props.ecosystemConfigs.length ? props.ecosystemConfigs : contextConfigs;\n  var isEn = lang === \"en-US\";\n  react.exports.useEffect(function() {\n    var timeline2 = anime.timeline();\n    timeline2.add({\n      targets: \".\" + prefixCls2 + \"-item\",\n      opacity: [0, 1],\n      duration: 450,\n      easing: \"easeOutQuart\",\n      translateX: [-16, 0],\n      delay: function(el, i, l2) {\n        return anime.stagger(500 / l2, { grid: [3, 3], from: \"first\", axis: \"x\" })(el, i, l2);\n      }\n    }, 200);\n  }, []);\n  var reportTea = function(item) {\n    var hrefLink = item.link || generateUrl$1(item.path);\n    teaLog(eventMap.clickNavigation, {\n      menu: \"\\u751F\\u6001\\u4EA7\\u54C1\",\n      name: isEn ? item.enName : item.name,\n      link: hrefLink,\n      target: \"_blank\"\n    });\n  };\n  return React.createElement(\"div\", { className: cs(prefixCls2, prefixCls2 + \"-ecosystem\") }, React.createElement(\"div\", { className: prefixCls2 + \"-list\" }, ecosystemConfigs.map(function(item, index2) {\n    var icon2 = React.createElement(\"div\", { className: prefixCls2 + \"-item-icon\", dangerouslySetInnerHTML: { __html: item.svg } });\n    var showName = isEn ? item.enName : item.name;\n    var showDesc = isEn ? item.enDesc : item.desc;\n    return React.createElement(\"a\", { className: prefixCls2 + \"-item\", key: index2, href: item.link || item.path, target: \"_blank\", rel: \"noreferrer\", onClick: function() {\n      return reportTea(item);\n    } }, item.new ? React.createElement(Badge$1, { count: 10, dot: true }, icon2) : icon2, React.createElement(\"div\", null, React.createElement(\"div\", { className: prefixCls2 + \"-item-name\" }, showName), item.desc && React.createElement(\"div\", { className: prefixCls2 + \"-item-desc\" }, showDesc)));\n  })));\n}\nvar __read$c = globalThis && globalThis.__read || function(o, n2) {\n  var m2 = typeof Symbol === \"function\" && o[Symbol.iterator];\n  if (!m2)\n    return o;\n  var i = m2.call(o), r2, ar = [], e;\n  try {\n    while ((n2 === void 0 || n2-- > 0) && !(r2 = i.next()).done)\n      ar.push(r2.value);\n  } catch (error) {\n    e = { error };\n  } finally {\n    try {\n      if (r2 && !r2.done && (m2 = i[\"return\"]))\n        m2.call(i);\n    } finally {\n      if (e)\n        throw e.error;\n    }\n  }\n  return ar;\n};\nfunction NavTabs(_a) {\n  var tabs = _a.tabs, popupVisible = _a.popupVisible, setPopupVisible = _a.setPopupVisible;\n  var _b = __read$c(react.exports.useState(\"\"), 2), activeKey = _b[0], setActiveKey = _b[1];\n  var _c = react.exports.useContext(GlobalContext), prefix = _c.prefix, getPopupContainer = _c.getPopupContainer, lang = _c.lang;\n  var prefixCls2 = prefix + \"-navTab\";\n  var timer = react.exports.useRef(null);\n  var isEn = lang === \"en-US\";\n  function getActiveClassNames(field) {\n    var _a2;\n    return cs(prefixCls2 + \"-item\", (_a2 = {}, _a2[prefixCls2 + \"-item-active\"] = field === activeKey, _a2));\n  }\n  function onMouseEnter(activeKey2) {\n    setActiveKey(activeKey2);\n  }\n  function getContent(activeKey2) {\n    switch (activeKey2) {\n      case \"Design\":\n        return React.createElement(DesignContent, null);\n      case \"Development\":\n        return React.createElement(DevelopContent, null);\n      case \"Ecosystem\":\n        return React.createElement(EcosystemContent, null);\n      default:\n        return React.createElement(DesignContent, null);\n    }\n  }\n  return React.createElement(\"div\", { className: prefixCls2 + \"-wrapper\" }, React.createElement(Trigger$1, { popup: function() {\n    return React.createElement(\"div\", { className: prefixCls2 + \"-container\" }, getContent(activeKey));\n  }, classNames: \"slideTop\", trigger: \"hover\", style: { zIndex: 998 }, popupVisible, onVisibleChange: function(v2) {\n    setPopupVisible(v2);\n    if (!v2) {\n      setActiveKey(\"\");\n    }\n  }, getPopupContainer }, React.createElement(\"div\", { className: prefixCls2, role: \"navigation\" }, tabs.map(function(tab) {\n    return React.createElement(\"div\", { key: tab.enTitle, className: getActiveClassNames(tab.enTitle), onMouseEnter: function() {\n      timer.current = setTimeout(function() {\n        onMouseEnter(tab.enTitle);\n      }, 200);\n    }, onMouseLeave: function() {\n      clearTimeout(timer.current);\n      timer.current = null;\n    } }, React.createElement(\"a\", { role: \"combobox\", \"aria-controls\": \"arco-nav-dropdown-content\", tabIndex: 0, \"aria-expanded\": activeKey === tab.enTitle, href: tab.href, className: prefixCls2 + \"-item-link\", target: \"_blank\", rel: \"noreferrer\", onClick: function() {\n      teaLog(eventMap.clickNavigation, {\n        menu: isEn ? tab.enTitle || tab.title : tab.title,\n        link: tab.href,\n        target: \"_blank\"\n      });\n    } }, isEn ? tab.enTitle || tab.title : tab.title, tab.dropdown && React.createElement(IconDown$1, null)));\n  }))));\n}\nNavTabs.defaultProps = {\n  tabs: [\n    {\n      title: \"\\u8BBE\\u8BA1\",\n      enTitle: \"Design\",\n      href: \"/docs/spec/introduce\",\n      dropdown: true\n    },\n    {\n      title: \"\\u5F00\\u53D1\",\n      enTitle: \"Development\",\n      href: \"/react/docs/start\",\n      dropdown: true\n    },\n    { title: \"\\u751F\\u6001\\u4EA7\\u54C1\", enTitle: \"Ecosystem\", dropdown: true }\n  ]\n};\nvar index$9 = \"\";\nvar __assign$4 = globalThis && globalThis.__assign || function() {\n  __assign$4 = Object.assign || function(t2) {\n    for (var s, i = 1, n2 = arguments.length; i < n2; i++) {\n      s = arguments[i];\n      for (var p2 in s)\n        if (Object.prototype.hasOwnProperty.call(s, p2))\n          t2[p2] = s[p2];\n    }\n    return t2;\n  };\n  return __assign$4.apply(this, arguments);\n};\nvar __awaiter$4 = globalThis && globalThis.__awaiter || function(thisArg, _arguments, P2, generator) {\n  function adopt(value) {\n    return value instanceof P2 ? value : new P2(function(resolve) {\n      resolve(value);\n    });\n  }\n  return new (P2 || (P2 = Promise))(function(resolve, reject) {\n    function fulfilled(value) {\n      try {\n        step(generator.next(value));\n      } catch (e) {\n        reject(e);\n      }\n    }\n    function rejected(value) {\n      try {\n        step(generator[\"throw\"](value));\n      } catch (e) {\n        reject(e);\n      }\n    }\n    function step(result) {\n      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);\n    }\n    step((generator = generator.apply(thisArg, _arguments || [])).next());\n  });\n};\nvar __generator$4 = globalThis && globalThis.__generator || function(thisArg, body) {\n  var _ = { label: 0, sent: function() {\n    if (t2[0] & 1)\n      throw t2[1];\n    return t2[1];\n  }, trys: [], ops: [] }, f, y2, t2, g;\n  return g = { next: verb(0), \"throw\": verb(1), \"return\": verb(2) }, typeof Symbol === \"function\" && (g[Symbol.iterator] = function() {\n    return this;\n  }), g;\n  function verb(n2) {\n    return function(v2) {\n      return step([n2, v2]);\n    };\n  }\n  function step(op) {\n    if (f)\n      throw new TypeError(\"Generator is already executing.\");\n    while (_)\n      try {\n        if (f = 1, y2 && (t2 = op[0] & 2 ? y2[\"return\"] : op[0] ? y2[\"throw\"] || ((t2 = y2[\"return\"]) && t2.call(y2), 0) : y2.next) && !(t2 = t2.call(y2, op[1])).done)\n          return t2;\n        if (y2 = 0, t2)\n          op = [op[0] & 2, t2.value];\n        switch (op[0]) {\n          case 0:\n          case 1:\n            t2 = op;\n            break;\n          case 4:\n            _.label++;\n            return { value: op[1], done: false };\n          case 5:\n            _.label++;\n            y2 = op[1];\n            op = [0];\n            continue;\n          case 7:\n            op = _.ops.pop();\n            _.trys.pop();\n            continue;\n          default:\n            if (!(t2 = _.trys, t2 = t2.length > 0 && t2[t2.length - 1]) && (op[0] === 6 || op[0] === 2)) {\n              _ = 0;\n              continue;\n            }\n            if (op[0] === 3 && (!t2 || op[1] > t2[0] && op[1] < t2[3])) {\n              _.label = op[1];\n              break;\n            }\n            if (op[0] === 6 && _.label < t2[1]) {\n              _.label = t2[1];\n              t2 = op;\n              break;\n            }\n            if (t2 && _.label < t2[2]) {\n              _.label = t2[2];\n              _.ops.push(op);\n              break;\n            }\n            if (t2[2])\n              _.ops.pop();\n            _.trys.pop();\n            continue;\n        }\n        op = body.call(thisArg, _);\n      } catch (e) {\n        op = [6, e];\n        y2 = 0;\n      } finally {\n        f = t2 = 0;\n      }\n    if (op[0] & 5)\n      throw op[1];\n    return { value: op[0] ? op[1] : void 0, done: true };\n  }\n};\nvar __read$b = globalThis && globalThis.__read || function(o, n2) {\n  var m2 = typeof Symbol === \"function\" && o[Symbol.iterator];\n  if (!m2)\n    return o;\n  var i = m2.call(o), r2, ar = [], e;\n  try {\n    while ((n2 === void 0 || n2-- > 0) && !(r2 = i.next()).done)\n      ar.push(r2.value);\n  } catch (error) {\n    e = { error };\n  } finally {\n    try {\n      if (r2 && !r2.done && (m2 = i[\"return\"]))\n        m2.call(i);\n    } finally {\n      if (e)\n        throw e.error;\n    }\n  }\n  return ar;\n};\nvar locales$3 = {\n  \"zh-CN\": {\n    notifications: \"\\u901A\\u77E5\",\n    clearAll: \"\\u5168\\u90E8\\u5DF2\\u8BFB\"\n  },\n  \"en-US\": {\n    notifications: \"Notifications\",\n    clearAll: \"All Read\"\n  }\n};\nfunction MessageBox() {\n  var _a = react.exports.useContext(GlobalContext), prefix = _a.prefix, lang = _a.lang;\n  var t2 = locales$3[lang];\n  var storage = localStorage.getItem(\"arco-notice-read-list\") || \"[]\";\n  var timer = react.exports.useRef(null);\n  var prefixCls2 = prefix + \"-message-box\";\n  var _b = __read$b(react.exports.useState([]), 2), notices = _b[0], setNotices = _b[1];\n  var _c = __read$b(react.exports.useState(JSON.parse(storage)), 2), readList = _c[0], setReadList = _c[1];\n  var allKeys = notices.map(function(n2) {\n    return n2.key;\n  });\n  var hasUnReadNotices = allKeys.filter(function(k) {\n    return readList.indexOf(k) < 0;\n  }).length;\n  react.exports.useEffect(function() {\n    getNotices();\n  }, []);\n  function getNotices() {\n    return __awaiter$4(this, void 0, void 0, function() {\n      var data2;\n      return __generator$4(this, function(_a2) {\n        switch (_a2.label) {\n          case 0:\n            _a2.trys.push([0, 2, , 3]);\n            return [4, axios.get(apiBasename + \"/admin/api/notice/list\")];\n          case 1:\n            data2 = _a2.sent().data;\n            setNotices(data2.List || []);\n            return [3, 3];\n          case 2:\n            _a2.sent();\n            setNotices([]);\n            return [3, 3];\n          case 3:\n            return [2];\n        }\n      });\n    });\n  }\n  function onHandleRead(key, delay) {\n    timer.current = setTimeout(function() {\n      var newReadList = Array.from(new Set(readList.concat(key)));\n      localStorage.setItem(\"arco-notice-read-list\", JSON.stringify(newReadList));\n      setReadList(newReadList);\n    }, delay);\n  }\n  function onHandleMouseOut() {\n    clearTimeout(timer.current);\n    timer.current = null;\n  }\n  function onHandleReadAll() {\n    localStorage.setItem(\"arco-notice-read-list\", JSON.stringify(allKeys));\n    setReadList(allKeys);\n  }\n  function renderBox() {\n    return notices.length ? React.createElement(\"div\", { className: prefixCls2 }, React.createElement(\"div\", { className: prefixCls2 + \"-header\" }, React.createElement(Typography$1.Text, { className: prefixCls2 + \"-header-title\" }, t2.notifications), React.createElement(Button$1, { disabled: !hasUnReadNotices, type: \"text\", size: \"mini\", style: { marginRight: -12 }, onClick: onHandleReadAll }, t2.clearAll)), React.createElement(\"div\", { className: prefixCls2 + \"-list\" }, notices.map(function(notice, index2) {\n      var title = notice[lang].title;\n      var description = notice[lang].description;\n      var hrefProps = notice.link ? {\n        href: notice.link,\n        target: \"_blank\",\n        rel: \"noreferrer\"\n      } : {};\n      var isNew = notice.new && readList.indexOf(notice.key) < 0;\n      return React.createElement(\"a\", __assign$4({ key: index2, className: prefixCls2 + \"-item\" }, hrefProps, { onMouseEnter: function() {\n        return onHandleRead(notice.key, 300);\n      }, onMouseLeave: onHandleMouseOut }), React.createElement(Badge$1, { count: isNew ? 1 : 0, dot: true, offset: [4, 2], dotStyle: { height: 4, width: 4 } }, React.createElement(Typography$1.Paragraph, { className: prefixCls2 + \"-item-title\", style: { marginBottom: 0 } }, title)), description && React.createElement(Typography$1.Paragraph, { className: prefixCls2 + \"-item-description\", style: { marginBottom: 0, marginTop: 4 } }, description), notice.date && React.createElement(Typography$1.Paragraph, { className: prefixCls2 + \"-item-date\", style: { marginBottom: 0, marginTop: 4 } }, notice.date));\n    }))) : React.createElement(\"span\", null);\n  }\n  if (!notices.length) {\n    return null;\n  }\n  return React.createElement(Badge$1, { count: hasUnReadNotices ? 1 : 0, dot: true, offset: [-12, 2] }, React.createElement(Trigger$1, { disabled: !notices.length, popup: renderBox, classNames: \"slideDynamicOrigin\", trigger: \"hover\", popupAlign: { bottom: 10 } }, React.createElement(Button$1, { type: \"text\", icon: React.createElement(IconNotification$1, null), className: prefix + \"-btn-icon\", size: \"mini\" })));\n}\nfunction getThemeIcon(theme) {\n  switch (theme) {\n    case \"light\":\n      return React.createElement(IconSunFill$1, null);\n    case \"dark\":\n      return React.createElement(IconMoonFill$1, null);\n    case \"system\":\n      return React.createElement(IconDesktop$1, null);\n    default:\n      return \"\";\n  }\n}\nfunction ThemeSelect(props) {\n  var onChangeTheme = props.onChangeTheme;\n  var _a = react.exports.useContext(NavbarThemeContext), _b = _a.theme, theme = _b === void 0 ? \"light\" : _b, onHandleTheme = _a.onHandleTheme;\n  var _c = react.exports.useContext(GlobalContext), prefix = _c.prefix, lang = _c.lang;\n  var prefixCls2 = prefix + \"-select-nav\";\n  var t2 = localeComponents[lang];\n  var handleChange = function(value) {\n    onHandleTheme(value);\n    onChangeTheme && onChangeTheme(value);\n  };\n  var switchTheme = function() {\n    if (theme === \"light\" || theme === \"dark\") {\n      var newValue = theme === \"dark\" ? \"light\" : \"dark\";\n      onHandleTheme(newValue);\n      onChangeTheme && onChangeTheme(newValue);\n    }\n  };\n  var triggerButton = React.createElement(Button$1, { type: \"text\", icon: getThemeIcon(theme), className: prefix + \"-btn-icon\", size: \"mini\", onClick: switchTheme });\n  var themeOptions = [\n    { label: t2.modeLight, value: \"light\" },\n    { label: t2.modeDark, value: \"dark\" },\n    { label: t2.modeSystem, value: \"system\" }\n  ];\n  return React.createElement(Select$1, { value: theme, onChange: handleChange, \"aria-label\": \"Toggle light/dark theme\", trigger: \"hover\", triggerProps: {\n    autoAlignPopupMinWidth: false,\n    autoAlignPopupWidth: false\n  }, triggerElement: triggerButton }, themeOptions.map(function(config2) {\n    return React.createElement(Select$1.Option, { value: config2.value, key: config2.value }, React.createElement(\"div\", { className: prefixCls2 + \"-option\" }, React.createElement(IconCheck$1, { style: { opacity: theme === config2.value ? 1 : 0 } }), config2.label));\n  }));\n}\nvar index$8 = \"\";\nvar langOptions = [\n  { label: \"\\u7B80\\u4F53\\u4E2D\\u6587\", value: \"zh-CN\" },\n  { label: \"English\", value: \"en-US\" }\n];\nfunction LanguageSelect(props) {\n  var _a = props.lang, lang = _a === void 0 ? \"zh-CN\" : _a, onChangeLanguage = props.onChangeLanguage;\n  var prefix = react.exports.useContext(GlobalContext).prefix;\n  var prefixCls2 = prefix + \"-select-nav\";\n  var handleChange = function(value) {\n    onChangeLanguage && onChangeLanguage(value);\n  };\n  return React.createElement(Select$1, { className: prefixCls2, value: lang, onChange: handleChange, \"aria-label\": \"Toggle light/dark theme\", trigger: \"hover\", triggerProps: {\n    autoAlignPopupMinWidth: false,\n    autoAlignPopupWidth: false\n  }, renderFormat: function(option) {\n    return option.title;\n  }, bordered: false }, langOptions.map(function(config2) {\n    return React.createElement(Select$1.Option, { value: config2.value, key: config2.value, title: config2.label }, React.createElement(\"div\", { className: prefixCls2 + \"-option\" }, React.createElement(IconCheck$1, { style: { opacity: lang === config2.value ? 1 : 0 } }), config2.label));\n  }));\n}\nvar rtlOptions = [\n  { label: \"LTR\", value: \"ltr\" },\n  { label: \"RTL\", value: \"rtl\" }\n];\nfunction RtlSelect(props) {\n  var _a = props.value, value = _a === void 0 ? \"ltr\" : _a, onChangeRtl = props.onChangeRtl;\n  var prefix = react.exports.useContext(GlobalContext).prefix;\n  var prefixCls2 = prefix + \"-select-nav\";\n  var handleChange = function(value2) {\n    onChangeRtl && onChangeRtl(value2);\n  };\n  return React.createElement(Select$1, { className: prefixCls2, value, onChange: handleChange, \"aria-label\": \"Toggle lrt/rtl layout\", trigger: \"hover\", triggerProps: {\n    autoAlignPopupMinWidth: false,\n    autoAlignPopupWidth: false\n  }, renderFormat: function(option) {\n    return option.title;\n  }, bordered: false }, rtlOptions.map(function(config2) {\n    return React.createElement(Select$1.Option, { value: config2.value, key: config2.value, title: config2.label }, React.createElement(\"div\", { className: prefixCls2 + \"-option\" }, React.createElement(IconCheck$1, { style: { opacity: value === config2.value ? 1 : 0 } }), config2.label));\n  }));\n}\nfunction joinChat(chatId, email) {\n  if (!email) {\n    Message$1.error({ content: \"\\u6682\\u672A\\u767B\\u5F55\\uFF0C\\u8BF7\\u5148\\u767B\\u9646\\uFF01\" });\n    return;\n  }\n  if (!chatId) {\n    Message$1.error({ content: \"\\u8BF7\\u6307\\u5B9A\\u7FA4\\u804A ID\" });\n    return;\n  }\n  axios.get(apiBasename + \"/api/oncall/joinChat?email=\" + email + \"&chatId=\" + chatId).then(function(res) {\n    if (res.data.status === \"success\") {\n      var aLink = document.createElement(\"a\");\n      aLink.href = \"lark://client/chat/\" + chatId;\n      aLink.click();\n    }\n  }).catch(function(err) {\n    console.error(err);\n    Message$1.error({ content: \"\\u672A\\u77E5\\u9519\\u8BEF\\uFF0C\\u8BF7\\u91CD\\u8BD5\\uFF01\" });\n  });\n}\nfunction ChatSelect(props) {\n  var joinChatId = props.joinChatId;\n  var _a = react.exports.useContext(GlobalContext), prefix = _a.prefix, _b = _a.larkCharts, larkCharts = _b === void 0 ? [] : _b, lang = _a.lang, innerUser = _a.innerUser;\n  var prefixCls2 = prefix + \"-select-nav\";\n  var isEn = lang === \"en-US\";\n  var handleChange = function(value) {\n    joinChat(value, innerUser === null || innerUser === void 0 ? void 0 : innerUser.email);\n  };\n  var joinSingleChat = function() {\n    joinChat(joinChatId, innerUser === null || innerUser === void 0 ? void 0 : innerUser.email);\n  };\n  var triggerButton = React.createElement(Button$1, { type: \"text\", icon: React.createElement(IconCustomerService$1, null), className: prefix + \"-btn-icon\", size: \"mini\" });\n  if (!isInternal) {\n    return null;\n  }\n  if (joinChatId) {\n    return React.cloneElement(triggerButton, { onClick: joinSingleChat });\n  }\n  return React.createElement(Select$1, { className: prefixCls2, onChange: handleChange, \"aria-label\": \"Toggle light/dark theme\", trigger: \"hover\", triggerProps: {\n    autoAlignPopupMinWidth: false,\n    autoAlignPopupWidth: false\n  }, triggerElement: triggerButton, renderFormat: function(option) {\n    return option.title;\n  }, options: larkCharts.map(function(_a2) {\n    var enName = _a2.enName, name = _a2.name, id2 = _a2.id;\n    return {\n      value: id2,\n      label: isEn ? enName : name\n    };\n  }), bordered: false });\n}\nfunction GithubBtn() {\n  var prefix = react.exports.useContext(GlobalContext).prefix;\n  return React.createElement(Button$1, { size: \"mini\", type: \"text\", icon: React.createElement(IconGithub$1, null), className: prefix + \"-btn-icon\", href: \"https://github.com/arco-design\" });\n}\nfunction RightOperation(props) {\n  var prefix = react.exports.useContext(GlobalContext).prefix;\n  return React.createElement(Space$1, { className: prefix + \"-right\", size: 4 }, !props.hideI18n && React.createElement(LanguageSelect, { lang: props.lang, onChangeLanguage: props.onChangeLanguage }), !props.hideRtl && React.createElement(RtlSelect, { onChangeRtl: props.onChangeRtl, value: props.rtl ? \"rtl\" : \"ltr\" }), React.createElement(Space$1, { size: 0 }, !props.hideGitHub && React.createElement(GithubBtn, null), !props.hideTheme && React.createElement(ThemeSelect, { onChangeTheme: props.onChangeTheme }), React.createElement(ChatSelect, { joinChatId: props.joinChatId }), !props.hideMessageBox && React.createElement(MessageBox, null)));\n}\nvar index$7 = \"\";\nvar __awaiter$3 = globalThis && globalThis.__awaiter || function(thisArg, _arguments, P2, generator) {\n  function adopt(value) {\n    return value instanceof P2 ? value : new P2(function(resolve) {\n      resolve(value);\n    });\n  }\n  return new (P2 || (P2 = Promise))(function(resolve, reject) {\n    function fulfilled(value) {\n      try {\n        step(generator.next(value));\n      } catch (e) {\n        reject(e);\n      }\n    }\n    function rejected(value) {\n      try {\n        step(generator[\"throw\"](value));\n      } catch (e) {\n        reject(e);\n      }\n    }\n    function step(result) {\n      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);\n    }\n    step((generator = generator.apply(thisArg, _arguments || [])).next());\n  });\n};\nvar __generator$3 = globalThis && globalThis.__generator || function(thisArg, body) {\n  var _ = { label: 0, sent: function() {\n    if (t2[0] & 1)\n      throw t2[1];\n    return t2[1];\n  }, trys: [], ops: [] }, f, y2, t2, g;\n  return g = { next: verb(0), \"throw\": verb(1), \"return\": verb(2) }, typeof Symbol === \"function\" && (g[Symbol.iterator] = function() {\n    return this;\n  }), g;\n  function verb(n2) {\n    return function(v2) {\n      return step([n2, v2]);\n    };\n  }\n  function step(op) {\n    if (f)\n      throw new TypeError(\"Generator is already executing.\");\n    while (_)\n      try {\n        if (f = 1, y2 && (t2 = op[0] & 2 ? y2[\"return\"] : op[0] ? y2[\"throw\"] || ((t2 = y2[\"return\"]) && t2.call(y2), 0) : y2.next) && !(t2 = t2.call(y2, op[1])).done)\n          return t2;\n        if (y2 = 0, t2)\n          op = [op[0] & 2, t2.value];\n        switch (op[0]) {\n          case 0:\n          case 1:\n            t2 = op;\n            break;\n          case 4:\n            _.label++;\n            return { value: op[1], done: false };\n          case 5:\n            _.label++;\n            y2 = op[1];\n            op = [0];\n            continue;\n          case 7:\n            op = _.ops.pop();\n            _.trys.pop();\n            continue;\n          default:\n            if (!(t2 = _.trys, t2 = t2.length > 0 && t2[t2.length - 1]) && (op[0] === 6 || op[0] === 2)) {\n              _ = 0;\n              continue;\n            }\n            if (op[0] === 3 && (!t2 || op[1] > t2[0] && op[1] < t2[3])) {\n              _.label = op[1];\n              break;\n            }\n            if (op[0] === 6 && _.label < t2[1]) {\n              _.label = t2[1];\n              t2 = op;\n              break;\n            }\n            if (t2 && _.label < t2[2]) {\n              _.label = t2[2];\n              _.ops.push(op);\n              break;\n            }\n            if (t2[2])\n              _.ops.pop();\n            _.trys.pop();\n            continue;\n        }\n        op = body.call(thisArg, _);\n      } catch (e) {\n        op = [6, e];\n        y2 = 0;\n      } finally {\n        f = t2 = 0;\n      }\n    if (op[0] & 5)\n      throw op[1];\n    return { value: op[0] ? op[1] : void 0, done: true };\n  }\n};\nvar __read$a = globalThis && globalThis.__read || function(o, n2) {\n  var m2 = typeof Symbol === \"function\" && o[Symbol.iterator];\n  if (!m2)\n    return o;\n  var i = m2.call(o), r2, ar = [], e;\n  try {\n    while ((n2 === void 0 || n2-- > 0) && !(r2 = i.next()).done)\n      ar.push(r2.value);\n  } catch (error) {\n    e = { error };\n  } finally {\n    try {\n      if (r2 && !r2.done && (m2 = i[\"return\"]))\n        m2.call(i);\n    } finally {\n      if (e)\n        throw e.error;\n    }\n  }\n  return ar;\n};\nvar Text$2 = Typography$1.Text;\nvar locale$1 = {\n  \"zh-CN\": {\n    basicInfo: \"\\u57FA\\u672C\\u4FE1\\u606F\",\n    userName: \"\\u7528\\u6237\\u540D\",\n    connectEmail: \"\\u7ED1\\u5B9A\\u90AE\\u7BB1\",\n    connected: \"\\u5DF2\\u7ED1\\u5B9A\",\n    unconnected: \"\\u672A\\u7ED1\\u5B9A\",\n    accessToken: \"\\u4E2A\\u4EBA\\u5BC6\\u94A5\",\n    createAccessToken: \"\\u65B0\\u589E\\u5BC6\\u94A5\",\n    unconnectedNote: \"\\u60A8\\u6682\\u672A\\u7ED1\\u5B9A\\u90AE\\u7BB1\\uFF0C\\u8BF7\",\n    connectNow: \"\\u7ACB\\u5373\\u7ED1\\u5B9A\",\n    countNote: \"\\u6BCF\\u4E2A\\u8D26\\u53F7\\u53EA\\u53EF\\u62E5\\u6709 1 \\u4E2A\\u6709\\u6548\\u5BC6\\u94A5\\uFF0C\\u53EF\\u5220\\u9664\\u6216\\u8005\\u65B0\\u589E\\u8986\\u76D6\",\n    unableCreate: \"\\u65E0\\u6CD5\\u751F\\u6210\\u5BC6\\u94A5\",\n    createSuccess: \"\\u751F\\u6210\\u5BC6\\u94A5\\u6210\\u529F\\uFF01\",\n    createError: \"\\u751F\\u6210\\u5BC6\\u94A5\\u5931\\u8D25!\",\n    deleteSuccess: \"\\u5220\\u9664\\u5BC6\\u94A5\\u6210\\u529F\\uFF01\",\n    deleteError: \"\\u5220\\u9664\\u5BC6\\u94A5\\u5931\\u8D25!\",\n    accountType: \"\\u767B\\u5F55\\u65B9\\u5F0F\",\n    deleteNote: \"\\u786E\\u8BA4\\u5220\\u9664\\u540E\\uFF0C\\u8BE5\\u5BC6\\u94A5\\u5C06\\u65E0\\u6CD5\\u4F7F\\u7528\\uFF01\"\n  },\n  \"en-US\": {\n    basicInfo: \"Basic Info\",\n    userName: \"User Name\",\n    connectEmail: \"Connect Email\",\n    connected: \"connected\",\n    unconnected: \"unconnected\",\n    accessToken: \"Access Token\",\n    createAccessToken: \"Create Token\",\n    unconnectedNote: \"You have not connect your email  yet, please \",\n    connectNow: \"Connect Now\",\n    countNote: \"Each account can only have 1 valid token, which can be deleted or added\",\n    unableCreate: \"Unable to generate Access Token\",\n    createSuccess: \"Generate key successfully!\",\n    createError: \"Generate key failed!\",\n    deleteSuccess: \"Delete key successfully!\",\n    deleteError: \"Delete key failed!\",\n    accountType: \"Account Type\",\n    deleteNote: \"After confirming the deletion, the key will not be available! \"\n  }\n};\nfunction UserSetting(props) {\n  var prefixCls2 = props.prefixCls, lang = props.lang;\n  var _a = __read$a(react.exports.useState(false), 2), loading = _a[0], setLoading = _a[1];\n  var _b = __read$a(react.exports.useState(props.userInfo), 2), userInfo = _b[0], setUserInfo = _b[1];\n  var _c = (userInfo || {}).tokens, tokens = _c === void 0 ? [] : _c;\n  var isInner = userInfo.accountType === \"sso\" || userInfo.accountType === \"lark\";\n  var t2 = locale$1[lang];\n  var data2 = [\n    {\n      label: t2.userName,\n      value: userInfo.nickname || userInfo.name\n    },\n    {\n      label: isInner ? \"Email\" : \"ID\",\n      value: isInner ? userInfo.email : userInfo.id\n    },\n    {\n      label: t2.accountType,\n      value: userInfo.accountType\n    }\n  ];\n  function updateAccessToken() {\n    return __awaiter$3(this, void 0, void 0, function() {\n      var result;\n      return __generator$3(this, function(_a2) {\n        switch (_a2.label) {\n          case 0:\n            setLoading(true);\n            return [4, axios.post(apiBasename + \"/common/api/user/createToken\", null, { withCredentials: true }).finally(function() {\n              setLoading(false);\n            }).catch(function() {\n              Message$1.error(t2.createError);\n              return null;\n            })];\n          case 1:\n            result = _a2.sent();\n            if (result === null || result === void 0 ? void 0 : result.data) {\n              Message$1.success(t2.createSuccess);\n              setUserInfo(result === null || result === void 0 ? void 0 : result.data);\n              props.updateUserInfo && props.updateUserInfo(result === null || result === void 0 ? void 0 : result.data);\n            }\n            return [2];\n        }\n      });\n    });\n  }\n  function handleDelete() {\n    return __awaiter$3(this, void 0, void 0, function() {\n      var result;\n      return __generator$3(this, function(_a2) {\n        switch (_a2.label) {\n          case 0:\n            setLoading(true);\n            return [4, axios.post(apiBasename + \"/common/api/user/updateUser\", {\n              query: isInner ? { email: userInfo.email } : { id: userInfo.id },\n              updater: { tokens: [] }\n            }, { withCredentials: true }).finally(function() {\n              setLoading(false);\n            }).catch(function() {\n              Message$1.error(t2.deleteError);\n              return null;\n            })];\n          case 1:\n            result = _a2.sent();\n            if (result === null || result === void 0 ? void 0 : result.data) {\n              Message$1.success(t2.deleteSuccess);\n              setUserInfo(result === null || result === void 0 ? void 0 : result.data);\n              props.updateUserInfo && props.updateUserInfo(result === null || result === void 0 ? void 0 : result.data);\n            }\n            return [2];\n        }\n      });\n    });\n  }\n  return React.createElement(\"div\", { className: prefixCls2 }, React.createElement(\"div\", { className: prefixCls2 + \"-card\" }, React.createElement(\"div\", { className: prefixCls2 + \"-card-header\" }, React.createElement(\"h3\", null, t2.basicInfo)), React.createElement(\"div\", { className: prefixCls2 + \"-card-info\", style: { display: \"flex\" } }, React.createElement(Avatar, { size: 68 }, React.createElement(\"img\", { src: userInfo.avatarUrl || userInfo.picture, alt: \"avatar\" })), React.createElement(Descriptions, { column: 1, data: data2, className: prefixCls2 + \"-card-info-desc\", colon: \"\\uFF1A\", labelStyle: { textAlign: \"right\" } }))), React.createElement(\"div\", { className: prefixCls2 + \"-card\" }, React.createElement(\"div\", { className: prefixCls2 + \"-card-header\" }, React.createElement(\"h3\", null, t2.connectEmail)), React.createElement(\"div\", { className: prefixCls2 + \"-card-info\" }, React.createElement(\"div\", { className: prefixCls2 + \"-card-info-email\" }, userInfo.email ? React.createElement(React.Fragment, null, userInfo.email, React.createElement(\"span\", { className: prefixCls2 + \"-card-info-email-success\" }, React.createElement(IconCheckCircleFill$1, null), \" \", t2.connected)) : React.createElement(React.Fragment, null, React.createElement(Button$1, { type: \"text\" }, t2.connectNow), React.createElement(\"span\", { className: prefixCls2 + \"-card-info-emai-wraning\" }, React.createElement(IconExclamationCircleFill$1, null), \" \", t2.unconnected))))), React.createElement(\"div\", { className: prefixCls2 + \"-card\" }, React.createElement(Spin$1, { loading, style: { width: \"100%\" } }, React.createElement(\"div\", { className: prefixCls2 + \"-card-header\" }, React.createElement(\"h3\", null, t2.accessToken), React.createElement(Button$1, { type: \"text\", onClick: updateAccessToken }, React.createElement(IconPlus$1, null), t2.createAccessToken)), React.createElement(\"div\", { className: prefixCls2 + \"-card-info\" }, !userInfo.email ? React.createElement(Alert$1, { type: \"warning\", title: t2.unableCreate, content: React.createElement(\"div\", null, t2.unconnectedNote, React.createElement(Button$1, { type: \"primary\" }, t2.connectNow)) }) : React.createElement(\"div\", null, React.createElement(Alert$1, { type: \"info\", content: React.createElement(\"div\", null, t2.countNote) }), tokens.length ? tokens.map(function(_a2) {\n    var key = _a2.key, time = _a2.time;\n    return React.createElement(\"div\", { className: prefixCls2 + \"-card-info-token\" }, React.createElement(\"div\", null, React.createElement(Text$2, { copyable: true, ellipsis: true }, key), React.createElement(\"div\", { className: prefixCls2 + \"-card-info-token-time\" }, time)), React.createElement(Popconfirm$1, { onOk: handleDelete, title: t2.deleteNote }, React.createElement(Button$1, { type: \"text\", status: \"danger\" }, \"Delete\")));\n  }) : React.createElement(Empty$1, { style: { marginTop: \"20px\" } }))))));\n}\nvar index$6 = \"\";\nvar __read$9 = globalThis && globalThis.__read || function(o, n2) {\n  var m2 = typeof Symbol === \"function\" && o[Symbol.iterator];\n  if (!m2)\n    return o;\n  var i = m2.call(o), r2, ar = [], e;\n  try {\n    while ((n2 === void 0 || n2-- > 0) && !(r2 = i.next()).done)\n      ar.push(r2.value);\n  } catch (error) {\n    e = { error };\n  } finally {\n    try {\n      if (r2 && !r2.done && (m2 = i[\"return\"]))\n        m2.call(i);\n    } finally {\n      if (e)\n        throw e.error;\n    }\n  }\n  return ar;\n};\nvar locale = {\n  \"zh-CN\": {\n    userSettings: \"\\u4E2A\\u4EBA\\u4E2D\\u5FC3\"\n  },\n  \"en-US\": {\n    userSettings: \"User Setting\"\n  }\n};\nfunction UserDrawer(props) {\n  var triggerClassName = props.triggerClassName, afterClose = props.afterClose, user = props.user;\n  var _a = __read$9(react.exports.useState(false), 2), visible = _a[0], setVisible = _a[1];\n  var _b = react.exports.useContext(GlobalContext), prefix = _b.prefix, _c = _b.lang, lang = _c === void 0 ? \"zh-CN\" : _c;\n  var prefixCls2 = prefix + \"-user-settings\";\n  var t2 = locale[lang];\n  return React.createElement(\"div\", null, React.createElement(\"span\", { className: cs(prefixCls2 + \"-trigger\", triggerClassName), onClick: function() {\n    return setVisible(true);\n  } }, React.createElement(\"span\", { className: triggerClassName + \"-icon\" }, React.createElement(IconUser$1, null)), t2.userSettings), React.createElement(Drawer$1, { visible, focusLock: false, autoFocus: false, width: 480, title: \"\\u4E2A\\u4EBA\\u4E2D\\u5FC3\", onCancel: function() {\n    afterClose && afterClose();\n    setVisible(false);\n  }, footer: null }, React.createElement(UserSetting, { userInfo: user, prefixCls: prefixCls2, lang, updateUserInfo: props.updateUserInfo })));\n}\nvar __read$8 = globalThis && globalThis.__read || function(o, n2) {\n  var m2 = typeof Symbol === \"function\" && o[Symbol.iterator];\n  if (!m2)\n    return o;\n  var i = m2.call(o), r2, ar = [], e;\n  try {\n    while ((n2 === void 0 || n2-- > 0) && !(r2 = i.next()).done)\n      ar.push(r2.value);\n  } catch (error) {\n    e = { error };\n  } finally {\n    try {\n      if (r2 && !r2.done && (m2 = i[\"return\"]))\n        m2.call(i);\n    } finally {\n      if (e)\n        throw e.error;\n    }\n  }\n  return ar;\n};\nvar __spreadArray$4 = globalThis && globalThis.__spreadArray || function(to, from, pack) {\n  if (pack || arguments.length === 2)\n    for (var i = 0, l2 = from.length, ar; i < l2; i++) {\n      if (ar || !(i in from)) {\n        if (!ar)\n          ar = Array.prototype.slice.call(from, 0, i);\n        ar[i] = from[i];\n      }\n    }\n  return to.concat(ar || Array.prototype.slice.call(from));\n};\nvar Text$1 = Typography$1.Text;\nfunction Profile(props) {\n  var _a;\n  var _b = __read$8(react.exports.useState(false), 2), popupVisible = _b[0], setPopupVisible = _b[1];\n  var _c = props.loginHref, loginHref = _c === void 0 ? \"/common/login?redirectUrl=\" + encodeURIComponent(location.href) : _c, _d = props.logoutHref, logoutHref = _d === void 0 ? \"/common/logout?redirectUrl=\" + encodeURIComponent(location.href) : _d, user = props.user, userSetting = props.userSetting;\n  var _e = react.exports.useContext(GlobalContext), prefix = _e.prefix, _f = _e.profileLinks, profileLinks = _f === void 0 ? [] : _f, lang = _e.lang;\n  var hasUser = user === null || user === void 0 ? void 0 : user.email;\n  var prefixCls2 = prefix + \"-profile\";\n  var t2 = localeComponents[lang];\n  var isEn = lang === \"en-US\";\n  var loginLink = {\n    svg: React.createElement(IconImport$1, null),\n    name: \"\\u7ACB\\u5373\\u767B\\u5F55\",\n    enName: \"Login\",\n    path: loginHref,\n    target: \"_self\"\n  };\n  var logoutLink = {\n    svg: React.createElement(IconExport$1, null),\n    name: \"\\u9000\\u51FA\\u767B\\u5F55\",\n    enName: \"Logout\",\n    path: logoutHref,\n    target: \"_self\"\n  };\n  var switchLink = {\n    svg: React.createElement(IconLaunch$1, null),\n    name: isExternal ? \"\\u8DF3\\u8F6C\\u5185\\u7F51\\u7248\" : \"\\u8DF3\\u8F6C\\u5916\\u7F51\\u7248\",\n    enName: isExternal ? \"Internal Version\" : \"External Version\",\n    path: isExternal ? document.location.href.replace(externalHost, internalHost) : document.location.href.replace(internalHost, externalHost)\n  };\n  var allLinks = __spreadArray$4(__spreadArray$4([], __read$8(profileLinks), false), [switchLink], false);\n  if (isInternal) {\n    allLinks.push({\n      svg: React.createElement(IconTags$1, null),\n      name: \"1.x \\u6587\\u6863\\u9875\",\n      enName: \"Go to 1.x\",\n      path: internalUrl + \"/react/1.x\",\n      target: \"_blank\",\n      renderName: function(showName) {\n        var _a2;\n        var currentVersion = (_a2 = window.navVersionObj) === null || _a2 === void 0 ? void 0 : _a2[\"@arco-design/web-react\"];\n        if (currentVersion) {\n          return React.createElement(Space$1, { className: prefixCls2 + \"-version\" }, showName, React.createElement(\"div\", null, React.createElement(Text$1, { type: \"secondary\" }, \"latest\\uFF1A\", currentVersion)));\n        }\n        return showName;\n      }\n    });\n  }\n  if (!hasUser) {\n    allLinks = [loginLink, switchLink];\n  }\n  var userElem = hasUser ? React.createElement(\"div\", { className: prefixCls2 + \"-user\" }, React.createElement(Avatar, { size: 36 }, React.createElement(\"img\", { alt: user.email, src: user.picture })), React.createElement(\"div\", { className: prefixCls2 + \"-info\" }, React.createElement(Text$1, { className: prefixCls2 + \"-info-nickname\" }, user.nickname || user.name), React.createElement(Text$1, { className: prefixCls2 + \"-info-email\", type: \"secondary\" }, user.email))) : \"\";\n  var reportTea = function(item) {\n    teaLog(eventMap.clickUserNavigation, {\n      name: isEn ? item.enName : item.name,\n      link: item.path\n    });\n  };\n  var generateMenuItem = function(list2) {\n    return React.createElement(React.Fragment, null, list2.map(function(config2, index2) {\n      var isStringSvg = typeof config2.svg === \"string\";\n      var showName = isEn ? config2.enName : config2.name;\n      return React.createElement(\"a\", { href: config2.path, className: prefixCls2 + \"-item\", target: config2.target || \"_blank\", rel: \"noreferrer\", role: \"menuitem\", \"aria-label\": showName, onClick: function() {\n        return reportTea(config2);\n      }, key: index2 }, isStringSvg ? React.createElement(\"span\", { dangerouslySetInnerHTML: { __html: config2.svg }, className: prefixCls2 + \"-item-icon\" }) : React.createElement(\"span\", { className: prefixCls2 + \"-item-icon\" }, config2.svg), config2.renderName ? config2.renderName(showName) : showName);\n    }));\n  };\n  return React.createElement(Trigger$1, { position: \"br\", trigger: \"click\", classNames: \"slideDynamicOrigin\", popupAlign: { bottom: [12, 6] }, popupVisible, onVisibleChange: setPopupVisible, popup: function() {\n    return React.createElement(\"div\", { className: prefixCls2, role: \"menu\" }, userElem, generateMenuItem(allLinks), hasUser && React.createElement(\"div\", { className: prefixCls2 + \"-user-settings\" }, userSetting && React.createElement(UserDrawer, { triggerClassName: prefixCls2 + \"-item\", afterClose: function() {\n      return setPopupVisible(false);\n    }, user, updateUserInfo: typeof userSetting === \"object\" ? userSetting === null || userSetting === void 0 ? void 0 : userSetting.updateUserInfo : void 0 }), generateMenuItem([logoutLink])));\n  } }, React.createElement(Avatar, { size: 32, className: cs(prefixCls2 + \"-avatar\", (_a = {}, _a[prefixCls2 + \"-avatar-need-login\"] = !(user === null || user === void 0 ? void 0 : user.email), _a)) }, (user === null || user === void 0 ? void 0 : user.picture) ? React.createElement(\"img\", { alt: user.email, src: user.picture }) : t2.needLogin));\n}\nfunction AlgoliaLogo(_ref2) {\n  var _ref$translations = _ref2.translations, translations = _ref$translations === void 0 ? {} : _ref$translations;\n  var _translations$searchB = translations.searchByText, searchByText = _translations$searchB === void 0 ? \"Search by\" : _translations$searchB;\n  return /* @__PURE__ */ React.createElement(\"a\", {\n    href: \"https://www.algolia.com/docsearch\",\n    target: \"_blank\",\n    rel: \"noopener noreferrer\"\n  }, /* @__PURE__ */ React.createElement(\"span\", {\n    className: \"DocSearch-Label\"\n  }, searchByText), /* @__PURE__ */ React.createElement(\"svg\", {\n    width: \"77\",\n    height: \"19\"\n  }, /* @__PURE__ */ React.createElement(\"path\", {\n    d: \"M2.5067 0h14.0245c1.384.001 2.5058 1.1205 2.5068 2.5017V16.5c-.0014 1.3808-1.1232 2.4995-2.5068 2.5H2.5067C1.1232 18.9995.0014 17.8808 0 16.5V2.4958A2.495 2.495 0 01.735.7294 2.505 2.505 0 012.5068 0zM37.95 15.0695c-3.7068.0168-3.7068-2.986-3.7068-3.4634L34.2372.3576 36.498 0v11.1794c0 .2715 0 1.9889 1.452 1.994v1.8961zm-9.1666-1.8388c.694 0 1.2086-.0397 1.5678-.1088v-2.2934a5.3639 5.3639 0 00-1.3303-.1679 4.8283 4.8283 0 00-.758.0582 2.2845 2.2845 0 00-.688.2024c-.2029.0979-.371.2362-.4919.4142-.1268.1788-.185.2826-.185.5533 0 .5297.185.8359.5205 1.0375.3355.2016.7928.3053 1.365.3053v-.0008zm-.1969-8.1817c.7463 0 1.3768.092 1.8856.2767.5088.1838.9195.4428 1.2204.7717.3068.334.5147.7777.6423 1.251.1327.4723.196.991.196 1.5603v5.798c-.5235.1036-1.05.192-1.5787.2649-.7048.1037-1.4976.156-2.3774.156-.5832 0-1.1215-.0582-1.6016-.167a3.385 3.385 0 01-1.2432-.5364 2.6034 2.6034 0 01-.8037-.9565c-.191-.3922-.29-.9447-.29-1.5208 0-.5533.11-.905.3246-1.2863a2.7351 2.7351 0 01.8849-.9329c.376-.242.8029-.415 1.2948-.5187a7.4517 7.4517 0 011.5381-.156 7.1162 7.1162 0 011.6667.2024V8.886c0-.259-.0296-.5061-.093-.7372a1.5847 1.5847 0 00-.3245-.6158 1.5079 1.5079 0 00-.6119-.4158 2.6788 2.6788 0 00-.966-.173c-.5206 0-.9948.0634-1.4283.1384a6.5481 6.5481 0 00-1.065.259l-.2712-1.849c.2831-.0986.7048-.1964 1.2491-.2943a9.2979 9.2979 0 011.752-.1501v.0008zm44.6597 8.1193c.6947 0 1.2086-.0405 1.567-.1097v-2.2942a5.3743 5.3743 0 00-1.3303-.1679c-.2485 0-.503.0177-.7573.0582a2.2853 2.2853 0 00-.688.2024 1.2333 1.2333 0 00-.4918.4142c-.1268.1788-.1843.2826-.1843.5533 0 .5297.1843.8359.5198 1.0375.3414.2066.7927.3053 1.365.3053v.0009zm-.191-8.1767c.7463 0 1.3768.0912 1.8856.2759.5087.1847.9195.4436 1.2204.7717.3.329.5147.7786.6414 1.251a5.7248 5.7248 0 01.197 1.562v5.7972c-.3466.0742-.874.1602-1.5788.2648-.7049.1038-1.4976.1552-2.3774.1552-.5832 0-1.1215-.0573-1.6016-.167a3.385 3.385 0 01-1.2432-.5356 2.6034 2.6034 0 01-.8038-.9565c-.191-.3922-.2898-.9447-.2898-1.5216 0-.5533.1098-.905.3245-1.2854a2.7373 2.7373 0 01.8849-.9338c.376-.2412.8029-.4141 1.2947-.5178a7.4545 7.4545 0 012.325-.1097c.2781.0287.5672.081.879.156v-.3686a2.7781 2.7781 0 00-.092-.738 1.5788 1.5788 0 00-.3246-.6166 1.5079 1.5079 0 00-.612-.415 2.6797 2.6797 0 00-.966-.1729c-.5205 0-.9947.0633-1.4282.1384a6.5608 6.5608 0 00-1.065.259l-.2712-1.8498c.283-.0979.7048-.1957 1.2491-.2935a9.8597 9.8597 0 011.752-.1494zm-6.79-1.072c-.7576.001-1.373-.6103-1.3759-1.3664 0-.755.6128-1.3664 1.376-1.3664.764 0 1.3775.6115 1.3775 1.3664s-.6195 1.3664-1.3776 1.3664zm1.1393 11.1507h-2.2726V5.3409l2.2734-.3568v10.0845l-.0008.0017zm-3.984 0c-3.707.0168-3.707-2.986-3.707-3.4642L59.7069.3576 61.9685 0v11.1794c0 .2715 0 1.9889 1.452 1.994V15.0703zm-7.3512-4.979c0-.975-.2138-1.7873-.6305-2.3516-.4167-.571-.9998-.852-1.747-.852-.7454 0-1.3302.281-1.7452.852-.4166.5702-.6195 1.3765-.6195 2.3516 0 .9851.208 1.6473.6254 2.2183.4158.576.9998.8587 1.7461.8587.7454 0 1.3303-.2885 1.747-.8595.4158-.5761.6237-1.2315.6237-2.2184v.0009zm2.3132-.006c0 .7609-.1099 1.3361-.3356 1.9654a4.654 4.654 0 01-.9533 1.6076A4.214 4.214 0 0155.613 14.69c-.579.2412-1.4697.3795-1.9143.3795-.4462-.005-1.3303-.1324-1.9033-.3795a4.307 4.307 0 01-1.474-1.0316c-.4115-.4445-.7293-.9801-.9609-1.6076a5.3423 5.3423 0 01-.3465-1.9653c0-.7608.104-1.493.3356-2.1155a4.683 4.683 0 01.9719-1.5958 4.3383 4.3383 0 011.479-1.0257c.5739-.242 1.2043-.3567 1.8864-.3567.6829 0 1.3125.1197 1.8906.3567a4.1245 4.1245 0 011.4816 1.0257 4.7587 4.7587 0 01.9592 1.5958c.2426.6225.3643 1.3547.3643 2.1155zm-17.0198 0c0 .9448.208 1.9932.6238 2.431.4166.4386.955.6579 1.6142.6579.3584 0 .6998-.0523 1.0176-.1502.3186-.0978.5721-.2134.775-.3517V7.0784a8.8706 8.8706 0 00-1.4926-.1906c-.8206-.0236-1.4452.312-1.8847.8468-.4335.5365-.6533 1.476-.6533 2.3516v-.0008zm6.2863 4.4485c0 1.5385-.3938 2.662-1.1866 3.3773-.791.7136-2.0005 1.0712-3.6308 1.0712-.5958 0-1.834-.1156-2.8228-.334l.3643-1.7865c.8282.173 1.9202.2193 2.4932.2193.9077 0 1.555-.1847 1.943-.5533.388-.3686.578-.916.578-1.643v-.3687a6.8289 6.8289 0 01-.8848.3349c-.3634.1096-.786.167-1.261.167-.6246 0-1.1917-.0979-1.7055-.2944a3.5554 3.5554 0 01-1.3244-.8645c-.3642-.3796-.6541-.8579-.8561-1.4289-.2028-.571-.3068-1.59-.3068-2.339 0-.7034.1099-1.5856.3245-2.1735.2198-.5871.5316-1.0949.9542-1.515.4167-.42.9255-.743 1.5213-.98a5.5923 5.5923 0 012.052-.3855c.7353 0 1.4114.092 2.0707.2024.6592.1088 1.2204.2236 1.6776.35v8.945-.0008zM11.5026 4.2418v-.6511c-.0005-.4553-.3704-.8241-.8266-.8241H8.749c-.4561 0-.826.3688-.8265.824v.669c0 .0742.0693.1264.1445.1096a6.0346 6.0346 0 011.6768-.2362 6.125 6.125 0 011.6202.2185.1116.1116 0 00.1386-.1097zm-5.2806.852l-.3296-.3282a.8266.8266 0 00-1.168 0l-.393.3922a.8199.8199 0 000 1.164l.3237.323c.0524.0515.1268.0397.1733-.0117.191-.259.3989-.507.6305-.7372.2374-.2362.48-.4437.7462-.6335.0575-.0354.0634-.1155.017-.1687zm3.5159 2.069v2.818c0 .081.0879.1392.1622.0987l2.5102-1.2964c.0574-.0287.0752-.0987.0464-.1552a3.1237 3.1237 0 00-2.603-1.574c-.0575 0-.115.0456-.115.1097l-.0008-.0009zm.0008 6.789c-2.0933.0005-3.7915-1.6912-3.7947-3.7804C5.9468 8.0821 7.6452 6.39 9.7387 6.391c2.0932-.0005 3.7911 1.6914 3.794 3.7804a3.7783 3.7783 0 01-1.1124 2.675 3.7936 3.7936 0 01-2.6824 1.1054h.0008zM9.738 4.8002c-1.9218 0-3.6975 1.0232-4.6584 2.6841a5.359 5.359 0 000 5.3683c.9609 1.661 2.7366 2.6841 4.6584 2.6841a5.3891 5.3891 0 003.8073-1.5725 5.3675 5.3675 0 001.578-3.7987 5.3574 5.3574 0 00-1.5771-3.797A5.379 5.379 0 009.7387 4.801l-.0008-.0008z\",\n    fill: \"currentColor\",\n    fillRule: \"evenodd\"\n  })));\n}\nfunction createBrowserLocalStorageCache(options) {\n  const namespaceKey = `algoliasearch-client-js-${options.key}`;\n  let storage;\n  const getStorage = () => {\n    if (storage === void 0) {\n      storage = options.localStorage || window.localStorage;\n    }\n    return storage;\n  };\n  const getNamespace = () => {\n    return JSON.parse(getStorage().getItem(namespaceKey) || \"{}\");\n  };\n  return {\n    get(key, defaultValue, events = {\n      miss: () => Promise.resolve()\n    }) {\n      return Promise.resolve().then(() => {\n        const keyAsString = JSON.stringify(key);\n        const value = getNamespace()[keyAsString];\n        return Promise.all([value || defaultValue(), value !== void 0]);\n      }).then(([value, exists]) => {\n        return Promise.all([value, exists || events.miss(value)]);\n      }).then(([value]) => value);\n    },\n    set(key, value) {\n      return Promise.resolve().then(() => {\n        const namespace = getNamespace();\n        namespace[JSON.stringify(key)] = value;\n        getStorage().setItem(namespaceKey, JSON.stringify(namespace));\n        return value;\n      });\n    },\n    delete(key) {\n      return Promise.resolve().then(() => {\n        const namespace = getNamespace();\n        delete namespace[JSON.stringify(key)];\n        getStorage().setItem(namespaceKey, JSON.stringify(namespace));\n      });\n    },\n    clear() {\n      return Promise.resolve().then(() => {\n        getStorage().removeItem(namespaceKey);\n      });\n    }\n  };\n}\nfunction createFallbackableCache(options) {\n  const caches = [...options.caches];\n  const current = caches.shift();\n  if (current === void 0) {\n    return createNullCache();\n  }\n  return {\n    get(key, defaultValue, events = {\n      miss: () => Promise.resolve()\n    }) {\n      return current.get(key, defaultValue, events).catch(() => {\n        return createFallbackableCache({ caches }).get(key, defaultValue, events);\n      });\n    },\n    set(key, value) {\n      return current.set(key, value).catch(() => {\n        return createFallbackableCache({ caches }).set(key, value);\n      });\n    },\n    delete(key) {\n      return current.delete(key).catch(() => {\n        return createFallbackableCache({ caches }).delete(key);\n      });\n    },\n    clear() {\n      return current.clear().catch(() => {\n        return createFallbackableCache({ caches }).clear();\n      });\n    }\n  };\n}\nfunction createNullCache() {\n  return {\n    get(_key, defaultValue, events = {\n      miss: () => Promise.resolve()\n    }) {\n      const value = defaultValue();\n      return value.then((result) => Promise.all([result, events.miss(result)])).then(([result]) => result);\n    },\n    set(_key, value) {\n      return Promise.resolve(value);\n    },\n    delete(_key) {\n      return Promise.resolve();\n    },\n    clear() {\n      return Promise.resolve();\n    }\n  };\n}\nfunction createInMemoryCache(options = { serializable: true }) {\n  let cache2 = {};\n  return {\n    get(key, defaultValue, events = {\n      miss: () => Promise.resolve()\n    }) {\n      const keyAsString = JSON.stringify(key);\n      if (keyAsString in cache2) {\n        return Promise.resolve(options.serializable ? JSON.parse(cache2[keyAsString]) : cache2[keyAsString]);\n      }\n      const promise = defaultValue();\n      const miss = events && events.miss || (() => Promise.resolve());\n      return promise.then((value) => miss(value)).then(() => promise);\n    },\n    set(key, value) {\n      cache2[JSON.stringify(key)] = options.serializable ? JSON.stringify(value) : value;\n      return Promise.resolve(value);\n    },\n    delete(key) {\n      delete cache2[JSON.stringify(key)];\n      return Promise.resolve();\n    },\n    clear() {\n      cache2 = {};\n      return Promise.resolve();\n    }\n  };\n}\nfunction createAuth(authMode, appId, apiKey) {\n  const credentials = {\n    \"x-algolia-api-key\": apiKey,\n    \"x-algolia-application-id\": appId\n  };\n  return {\n    headers() {\n      return authMode === AuthMode.WithinHeaders ? credentials : {};\n    },\n    queryParameters() {\n      return authMode === AuthMode.WithinQueryParameters ? credentials : {};\n    }\n  };\n}\nfunction shuffle(array) {\n  let c = array.length - 1;\n  for (c; c > 0; c--) {\n    const b = Math.floor(Math.random() * (c + 1));\n    const a = array[c];\n    array[c] = array[b];\n    array[b] = a;\n  }\n  return array;\n}\nfunction addMethods(base, methods) {\n  if (!methods) {\n    return base;\n  }\n  Object.keys(methods).forEach((key) => {\n    base[key] = methods[key](base);\n  });\n  return base;\n}\nfunction encode(format, ...args) {\n  let i = 0;\n  return format.replace(/%s/g, () => encodeURIComponent(args[i++]));\n}\nconst version$1 = \"4.12.0\";\nconst AuthMode = {\n  WithinQueryParameters: 0,\n  WithinHeaders: 1\n};\nfunction createMappedRequestOptions(requestOptions, timeout) {\n  const options = requestOptions || {};\n  const data2 = options.data || {};\n  Object.keys(options).forEach((key) => {\n    if ([\"timeout\", \"headers\", \"queryParameters\", \"data\", \"cacheable\"].indexOf(key) === -1) {\n      data2[key] = options[key];\n    }\n  });\n  return {\n    data: Object.entries(data2).length > 0 ? data2 : void 0,\n    timeout: options.timeout || timeout,\n    headers: options.headers || {},\n    queryParameters: options.queryParameters || {},\n    cacheable: options.cacheable\n  };\n}\nconst CallEnum = {\n  Read: 1,\n  Write: 2,\n  Any: 3\n};\nconst HostStatusEnum = {\n  Up: 1,\n  Down: 2,\n  Timeouted: 3\n};\nconst EXPIRATION_DELAY = 2 * 60 * 1e3;\nfunction createStatefulHost(host, status = HostStatusEnum.Up) {\n  return __spreadProps(__spreadValues({}, host), {\n    status,\n    lastUpdate: Date.now()\n  });\n}\nfunction isStatefulHostUp(host) {\n  return host.status === HostStatusEnum.Up || Date.now() - host.lastUpdate > EXPIRATION_DELAY;\n}\nfunction isStatefulHostTimeouted(host) {\n  return host.status === HostStatusEnum.Timeouted && Date.now() - host.lastUpdate <= EXPIRATION_DELAY;\n}\nfunction createStatelessHost(options) {\n  if (typeof options === \"string\") {\n    return {\n      protocol: \"https\",\n      url: options,\n      accept: CallEnum.Any\n    };\n  }\n  return {\n    protocol: options.protocol || \"https\",\n    url: options.url,\n    accept: options.accept || CallEnum.Any\n  };\n}\nconst MethodEnum = {\n  Delete: \"DELETE\",\n  Get: \"GET\",\n  Post: \"POST\",\n  Put: \"PUT\"\n};\nfunction createRetryableOptions(hostsCache, statelessHosts) {\n  return Promise.all(statelessHosts.map((statelessHost) => {\n    return hostsCache.get(statelessHost, () => {\n      return Promise.resolve(createStatefulHost(statelessHost));\n    });\n  })).then((statefulHosts) => {\n    const hostsUp = statefulHosts.filter((host) => isStatefulHostUp(host));\n    const hostsTimeouted = statefulHosts.filter((host) => isStatefulHostTimeouted(host));\n    const hostsAvailable = [...hostsUp, ...hostsTimeouted];\n    const statelessHostsAvailable = hostsAvailable.length > 0 ? hostsAvailable.map((host) => createStatelessHost(host)) : statelessHosts;\n    return {\n      getTimeout(timeoutsCount, baseTimeout) {\n        const timeoutMultiplier = hostsTimeouted.length === 0 && timeoutsCount === 0 ? 1 : hostsTimeouted.length + 3 + timeoutsCount;\n        return timeoutMultiplier * baseTimeout;\n      },\n      statelessHosts: statelessHostsAvailable\n    };\n  });\n}\nconst isNetworkError = ({ isTimedOut, status }) => {\n  return !isTimedOut && ~~status === 0;\n};\nconst isRetryable = (response) => {\n  const status = response.status;\n  const isTimedOut = response.isTimedOut;\n  return isTimedOut || isNetworkError(response) || ~~(status / 100) !== 2 && ~~(status / 100) !== 4;\n};\nconst isSuccess = ({ status }) => {\n  return ~~(status / 100) === 2;\n};\nconst retryDecision = (response, outcomes) => {\n  if (isRetryable(response)) {\n    return outcomes.onRetry(response);\n  }\n  if (isSuccess(response)) {\n    return outcomes.onSuccess(response);\n  }\n  return outcomes.onFail(response);\n};\nfunction retryableRequest(transporter, statelessHosts, request2, requestOptions) {\n  const stackTrace = [];\n  const data2 = serializeData(request2, requestOptions);\n  const headers = serializeHeaders(transporter, requestOptions);\n  const method = request2.method;\n  const dataQueryParameters = request2.method !== MethodEnum.Get ? {} : __spreadValues(__spreadValues({}, request2.data), requestOptions.data);\n  const queryParameters = __spreadValues(__spreadValues(__spreadValues({\n    \"x-algolia-agent\": transporter.userAgent.value\n  }, transporter.queryParameters), dataQueryParameters), requestOptions.queryParameters);\n  let timeoutsCount = 0;\n  const retry = (hosts, getTimeout) => {\n    const host = hosts.pop();\n    if (host === void 0) {\n      throw createRetryError(stackTraceWithoutCredentials(stackTrace));\n    }\n    const payload = {\n      data: data2,\n      headers,\n      method,\n      url: serializeUrl(host, request2.path, queryParameters),\n      connectTimeout: getTimeout(timeoutsCount, transporter.timeouts.connect),\n      responseTimeout: getTimeout(timeoutsCount, requestOptions.timeout)\n    };\n    const pushToStackTrace = (response) => {\n      const stackFrame = {\n        request: payload,\n        response,\n        host,\n        triesLeft: hosts.length\n      };\n      stackTrace.push(stackFrame);\n      return stackFrame;\n    };\n    const decisions = {\n      onSuccess: (response) => deserializeSuccess(response),\n      onRetry(response) {\n        const stackFrame = pushToStackTrace(response);\n        if (response.isTimedOut) {\n          timeoutsCount++;\n        }\n        return Promise.all([\n          transporter.logger.info(\"Retryable failure\", stackFrameWithoutCredentials(stackFrame)),\n          transporter.hostsCache.set(host, createStatefulHost(host, response.isTimedOut ? HostStatusEnum.Timeouted : HostStatusEnum.Down))\n        ]).then(() => retry(hosts, getTimeout));\n      },\n      onFail(response) {\n        pushToStackTrace(response);\n        throw deserializeFailure(response, stackTraceWithoutCredentials(stackTrace));\n      }\n    };\n    return transporter.requester.send(payload).then((response) => {\n      return retryDecision(response, decisions);\n    });\n  };\n  return createRetryableOptions(transporter.hostsCache, statelessHosts).then((options) => {\n    return retry([...options.statelessHosts].reverse(), options.getTimeout);\n  });\n}\nfunction createTransporter(options) {\n  const { hostsCache, logger, requester, requestsCache, responsesCache, timeouts, userAgent, hosts, queryParameters, headers } = options;\n  const transporter = {\n    hostsCache,\n    logger,\n    requester,\n    requestsCache,\n    responsesCache,\n    timeouts,\n    userAgent,\n    headers,\n    queryParameters,\n    hosts: hosts.map((host) => createStatelessHost(host)),\n    read(request2, requestOptions) {\n      const mappedRequestOptions = createMappedRequestOptions(requestOptions, transporter.timeouts.read);\n      const createRetryableRequest = () => {\n        return retryableRequest(transporter, transporter.hosts.filter((host) => (host.accept & CallEnum.Read) !== 0), request2, mappedRequestOptions);\n      };\n      const cacheable = mappedRequestOptions.cacheable !== void 0 ? mappedRequestOptions.cacheable : request2.cacheable;\n      if (cacheable !== true) {\n        return createRetryableRequest();\n      }\n      const key = {\n        request: request2,\n        mappedRequestOptions,\n        transporter: {\n          queryParameters: transporter.queryParameters,\n          headers: transporter.headers\n        }\n      };\n      return transporter.responsesCache.get(key, () => {\n        return transporter.requestsCache.get(key, () => {\n          return transporter.requestsCache.set(key, createRetryableRequest()).then((response) => Promise.all([transporter.requestsCache.delete(key), response]), (err) => Promise.all([transporter.requestsCache.delete(key), Promise.reject(err)])).then(([_, response]) => response);\n        });\n      }, {\n        miss: (response) => transporter.responsesCache.set(key, response)\n      });\n    },\n    write(request2, requestOptions) {\n      return retryableRequest(transporter, transporter.hosts.filter((host) => (host.accept & CallEnum.Write) !== 0), request2, createMappedRequestOptions(requestOptions, transporter.timeouts.write));\n    }\n  };\n  return transporter;\n}\nfunction createUserAgent(version2) {\n  const userAgent = {\n    value: `Algolia for JavaScript (${version2})`,\n    add(options) {\n      const addedUserAgent = `; ${options.segment}${options.version !== void 0 ? ` (${options.version})` : \"\"}`;\n      if (userAgent.value.indexOf(addedUserAgent) === -1) {\n        userAgent.value = `${userAgent.value}${addedUserAgent}`;\n      }\n      return userAgent;\n    }\n  };\n  return userAgent;\n}\nfunction deserializeSuccess(response) {\n  try {\n    return JSON.parse(response.content);\n  } catch (e) {\n    throw createDeserializationError(e.message, response);\n  }\n}\nfunction deserializeFailure({ content, status }, stackFrame) {\n  let message = content;\n  try {\n    message = JSON.parse(content).message;\n  } catch (e) {\n  }\n  return createApiError(message, status, stackFrame);\n}\nfunction serializeUrl(host, path, queryParameters) {\n  const queryParametersAsString = serializeQueryParameters(queryParameters);\n  let url = `${host.protocol}://${host.url}/${path.charAt(0) === \"/\" ? path.substr(1) : path}`;\n  if (queryParametersAsString.length) {\n    url += `?${queryParametersAsString}`;\n  }\n  return url;\n}\nfunction serializeQueryParameters(parameters) {\n  const isObjectOrArray = (value) => Object.prototype.toString.call(value) === \"[object Object]\" || Object.prototype.toString.call(value) === \"[object Array]\";\n  return Object.keys(parameters).map((key) => encode(\"%s=%s\", key, isObjectOrArray(parameters[key]) ? JSON.stringify(parameters[key]) : parameters[key])).join(\"&\");\n}\nfunction serializeData(request2, requestOptions) {\n  if (request2.method === MethodEnum.Get || request2.data === void 0 && requestOptions.data === void 0) {\n    return void 0;\n  }\n  const data2 = Array.isArray(request2.data) ? request2.data : __spreadValues(__spreadValues({}, request2.data), requestOptions.data);\n  return JSON.stringify(data2);\n}\nfunction serializeHeaders(transporter, requestOptions) {\n  const headers = __spreadValues(__spreadValues({}, transporter.headers), requestOptions.headers);\n  const serializedHeaders = {};\n  Object.keys(headers).forEach((header) => {\n    const value = headers[header];\n    serializedHeaders[header.toLowerCase()] = value;\n  });\n  return serializedHeaders;\n}\nfunction stackTraceWithoutCredentials(stackTrace) {\n  return stackTrace.map((stackFrame) => stackFrameWithoutCredentials(stackFrame));\n}\nfunction stackFrameWithoutCredentials(stackFrame) {\n  const modifiedHeaders = stackFrame.request.headers[\"x-algolia-api-key\"] ? { \"x-algolia-api-key\": \"*****\" } : {};\n  return __spreadProps(__spreadValues({}, stackFrame), {\n    request: __spreadProps(__spreadValues({}, stackFrame.request), {\n      headers: __spreadValues(__spreadValues({}, stackFrame.request.headers), modifiedHeaders)\n    })\n  });\n}\nfunction createApiError(message, status, transporterStackTrace) {\n  return {\n    name: \"ApiError\",\n    message,\n    status,\n    transporterStackTrace\n  };\n}\nfunction createDeserializationError(message, response) {\n  return {\n    name: \"DeserializationError\",\n    message,\n    response\n  };\n}\nfunction createRetryError(transporterStackTrace) {\n  return {\n    name: \"RetryError\",\n    message: \"Unreachable hosts - your application id may be incorrect. If the error persists, contact support@algolia.com.\",\n    transporterStackTrace\n  };\n}\nconst createSearchClient = (options) => {\n  const appId = options.appId;\n  const auth = createAuth(options.authMode !== void 0 ? options.authMode : AuthMode.WithinHeaders, appId, options.apiKey);\n  const transporter = createTransporter(__spreadProps(__spreadValues({\n    hosts: [\n      { url: `${appId}-dsn.algolia.net`, accept: CallEnum.Read },\n      { url: `${appId}.algolia.net`, accept: CallEnum.Write }\n    ].concat(shuffle([\n      { url: `${appId}-1.algolianet.com` },\n      { url: `${appId}-2.algolianet.com` },\n      { url: `${appId}-3.algolianet.com` }\n    ]))\n  }, options), {\n    headers: __spreadValues(__spreadValues(__spreadValues({}, auth.headers()), { \"content-type\": \"application/x-www-form-urlencoded\" }), options.headers),\n    queryParameters: __spreadValues(__spreadValues({}, auth.queryParameters()), options.queryParameters)\n  }));\n  const base = {\n    transporter,\n    appId,\n    addAlgoliaAgent(segment, version2) {\n      transporter.userAgent.add({ segment, version: version2 });\n    },\n    clearCache() {\n      return Promise.all([\n        transporter.requestsCache.clear(),\n        transporter.responsesCache.clear()\n      ]).then(() => void 0);\n    }\n  };\n  return addMethods(base, options.methods);\n};\nconst customRequest = (base) => {\n  return (request2, requestOptions) => {\n    if (request2.method === MethodEnum.Get) {\n      return base.transporter.read(request2, requestOptions);\n    }\n    return base.transporter.write(request2, requestOptions);\n  };\n};\nconst initIndex = (base) => {\n  return (indexName, options = {}) => {\n    const searchIndex = {\n      transporter: base.transporter,\n      appId: base.appId,\n      indexName\n    };\n    return addMethods(searchIndex, options.methods);\n  };\n};\nconst multipleQueries = (base) => {\n  return (queries, requestOptions) => {\n    const requests = queries.map((query) => {\n      return __spreadProps(__spreadValues({}, query), {\n        params: serializeQueryParameters(query.params || {})\n      });\n    });\n    return base.transporter.read({\n      method: MethodEnum.Post,\n      path: \"1/indexes/*/queries\",\n      data: {\n        requests\n      },\n      cacheable: true\n    }, requestOptions);\n  };\n};\nconst multipleSearchForFacetValues = (base) => {\n  return (queries, requestOptions) => {\n    return Promise.all(queries.map((query) => {\n      const _a = query.params, { facetName, facetQuery } = _a, params = __objRest(_a, [\"facetName\", \"facetQuery\"]);\n      return initIndex(base)(query.indexName, {\n        methods: { searchForFacetValues }\n      }).searchForFacetValues(facetName, facetQuery, __spreadValues(__spreadValues({}, requestOptions), params));\n    }));\n  };\n};\nconst findAnswers = (base) => {\n  return (query, queryLanguages, requestOptions) => {\n    return base.transporter.read({\n      method: MethodEnum.Post,\n      path: encode(\"1/answers/%s/prediction\", base.indexName),\n      data: {\n        query,\n        queryLanguages\n      },\n      cacheable: true\n    }, requestOptions);\n  };\n};\nconst search = (base) => {\n  return (query, requestOptions) => {\n    return base.transporter.read({\n      method: MethodEnum.Post,\n      path: encode(\"1/indexes/%s/query\", base.indexName),\n      data: {\n        query\n      },\n      cacheable: true\n    }, requestOptions);\n  };\n};\nconst searchForFacetValues = (base) => {\n  return (facetName, facetQuery, requestOptions) => {\n    return base.transporter.read({\n      method: MethodEnum.Post,\n      path: encode(\"1/indexes/%s/facets/%s/query\", base.indexName, facetName),\n      data: {\n        facetQuery\n      },\n      cacheable: true\n    }, requestOptions);\n  };\n};\nconst LogLevelEnum = {\n  Debug: 1,\n  Info: 2,\n  Error: 3\n};\nfunction createConsoleLogger(logLevel) {\n  return {\n    debug(message, args) {\n      if (LogLevelEnum.Debug >= logLevel) {\n        console.debug(message, args);\n      }\n      return Promise.resolve();\n    },\n    info(message, args) {\n      if (LogLevelEnum.Info >= logLevel) {\n        console.info(message, args);\n      }\n      return Promise.resolve();\n    },\n    error(message, args) {\n      console.error(message, args);\n      return Promise.resolve();\n    }\n  };\n}\nfunction createBrowserXhrRequester() {\n  return {\n    send(request2) {\n      return new Promise((resolve) => {\n        const baseRequester = new XMLHttpRequest();\n        baseRequester.open(request2.method, request2.url, true);\n        Object.keys(request2.headers).forEach((key) => baseRequester.setRequestHeader(key, request2.headers[key]));\n        const createTimeout = (timeout, content) => {\n          return setTimeout(() => {\n            baseRequester.abort();\n            resolve({\n              status: 0,\n              content,\n              isTimedOut: true\n            });\n          }, timeout * 1e3);\n        };\n        const connectTimeout = createTimeout(request2.connectTimeout, \"Connection timeout\");\n        let responseTimeout;\n        baseRequester.onreadystatechange = () => {\n          if (baseRequester.readyState > baseRequester.OPENED && responseTimeout === void 0) {\n            clearTimeout(connectTimeout);\n            responseTimeout = createTimeout(request2.responseTimeout, \"Socket timeout\");\n          }\n        };\n        baseRequester.onerror = () => {\n          if (baseRequester.status === 0) {\n            clearTimeout(connectTimeout);\n            clearTimeout(responseTimeout);\n            resolve({\n              content: baseRequester.responseText || \"Network request failed\",\n              status: baseRequester.status,\n              isTimedOut: false\n            });\n          }\n        };\n        baseRequester.onload = () => {\n          clearTimeout(connectTimeout);\n          clearTimeout(responseTimeout);\n          resolve({\n            content: baseRequester.responseText,\n            status: baseRequester.status,\n            isTimedOut: false\n          });\n        };\n        baseRequester.send(request2.data);\n      });\n    }\n  };\n}\nfunction algoliasearch(appId, apiKey, options) {\n  const commonOptions = {\n    appId,\n    apiKey,\n    timeouts: {\n      connect: 1,\n      read: 2,\n      write: 30\n    },\n    requester: createBrowserXhrRequester(),\n    logger: createConsoleLogger(LogLevelEnum.Error),\n    responsesCache: createInMemoryCache(),\n    requestsCache: createInMemoryCache({ serializable: false }),\n    hostsCache: createFallbackableCache({\n      caches: [\n        createBrowserLocalStorageCache({ key: `${version$1}-${appId}` }),\n        createInMemoryCache()\n      ]\n    }),\n    userAgent: createUserAgent(version$1).add({\n      segment: \"Browser\",\n      version: \"lite\"\n    }),\n    authMode: AuthMode.WithinQueryParameters\n  };\n  return createSearchClient(__spreadProps(__spreadValues(__spreadValues({}, commonOptions), options), {\n    methods: {\n      search: multipleQueries,\n      searchForFacetValues: multipleSearchForFacetValues,\n      multipleQueries,\n      multipleSearchForFacetValues,\n      customRequest,\n      initIndex: (base) => (indexName) => {\n        return initIndex(base)(indexName, {\n          methods: { search, searchForFacetValues, findAnswers }\n        });\n      }\n    }\n  }));\n}\nalgoliasearch.version = version$1;\nvar version = \"3.0.0-alpha.42\";\nfunction useSearchClient(appId, apiKey, transformSearchClient) {\n  var searchClient = React.useMemo(function() {\n    var client = algoliasearch(appId, apiKey);\n    client.addAlgoliaAgent(\"docsearch\", version);\n    if (/docsearch.js \\(.*\\)/.test(client.transporter.userAgent.value) === false) {\n      client.addAlgoliaAgent(\"docsearch-react\", version);\n    }\n    return transformSearchClient(client);\n  }, [appId, apiKey, transformSearchClient]);\n  return searchClient;\n}\nfunction SvgComponent$2b(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 32,\n    height: 32,\n    viewBox: \"0 0 32 32\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    opacity: 0.8,\n    fillRule: \"evenodd\",\n    clipRule: \"evenodd\",\n    d: \"M7.07053 21.9295C5.48035 20.3011 5.48035 17.7013 7.07053 16.0729L12.9287 10.0742C14.5731 8.39027 17.2814 8.39027 18.9258 10.0742V10.0742C20.516 11.7025 20.516 14.3023 18.9258 15.9307L13.0676 21.9295C11.4232 23.6134 8.71496 23.6134 7.07053 21.9295V21.9295Z\",\n    fill: \"white\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    opacity: 0.4,\n    fillRule: \"evenodd\",\n    clipRule: \"evenodd\",\n    d: \"M12.9336 10.0741C14.578 8.39016 17.2863 8.39016 18.9307 10.0741L24.7889 16.0728C26.379 17.7012 26.379 20.301 24.7889 21.9294V21.9294C23.1444 23.6133 20.4362 23.6133 18.7918 21.9294L12.9336 15.9306C11.3434 14.3022 11.3434 11.7024 12.9336 10.0741V10.0741Z\",\n    fill: \"white\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    fillRule: \"evenodd\",\n    clipRule: \"evenodd\",\n    d: \"M13.063 9.93045C14.6324 8.32337 17.2172 8.32337 18.7866 9.93045L21.783 12.9988L15.9248 18.9976L10.0666 12.9988L13.063 9.93045Z\",\n    fill: \"white\"\n  }));\n}\nfunction SvgComponent$2a(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 16,\n    height: 12,\n    viewBox: \"0 0 16 12\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M1.76021 8L5.09321 11.136C5.14101 11.181 5.17947 11.2351 5.2064 11.295C5.23332 11.3549 5.24819 11.4195 5.25014 11.4852C5.25209 11.5508 5.24109 11.6162 5.21776 11.6776C5.19444 11.739 5.15925 11.7952 5.11421 11.843C5.06917 11.8908 5.01515 11.9293 4.95524 11.9562C4.89534 11.9831 4.83071 11.998 4.76506 11.9999C4.69941 12.0019 4.63402 11.9909 4.57262 11.9676C4.51122 11.9442 4.45501 11.909 4.40721 11.864L0.157212 7.864C0.107572 7.81725 0.0680183 7.76085 0.0409825 7.69825C0.0139467 7.63565 0 7.56819 0 7.5C0 7.43181 0.0139467 7.36435 0.0409825 7.30175C0.0680183 7.23915 0.107572 7.18275 0.157212 7.136L4.40721 3.136C4.45501 3.09096 4.51122 3.05577 4.57262 3.03245C4.63402 3.00913 4.69941 2.99813 4.76506 3.00008C4.83071 3.00203 4.89534 3.01689 4.95524 3.04381C5.01515 3.07074 5.06917 3.1092 5.11421 3.157C5.15925 3.2048 5.19444 3.26101 5.21776 3.32241C5.24109 3.38381 5.25209 3.4492 5.25014 3.51485C5.24819 3.5805 5.23332 3.64512 5.2064 3.70503C5.17947 3.76494 5.14101 3.81896 5.09321 3.864L1.76021 7H13.0002C13.5306 7 14.0394 6.78929 14.4144 6.41421C14.7895 6.03914 15.0002 5.53043 15.0002 5V0.5C15.0002 0.367392 15.0529 0.240215 15.1467 0.146447C15.2404 0.0526785 15.3676 0 15.5002 0C15.6328 0 15.76 0.0526785 15.8538 0.146447C15.9475 0.240215 16.0002 0.367392 16.0002 0.5V5C16.0002 5.79565 15.6841 6.55871 15.1215 7.12132C14.5589 7.68393 13.7959 8 13.0002 8H1.76021Z\",\n    fill: \"var(--color-text-1)\"\n  }));\n}\nfunction SvgComponent$29(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip0)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 9.61621,\n    y: -23.0908,\n    width: 70.5,\n    height: 54.5,\n    rx: 3.25,\n    fill: \"#E8F3FF\",\n    stroke: \"#165DFF\",\n    strokeWidth: 1.5\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 16.8662,\n    y: 16.1592,\n    width: 24,\n    height: 8,\n    rx: 1,\n    fill: \"#165DFF\"\n  })), /* @__PURE__ */ react.exports.createElement(\"defs\", null, /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip0\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 0.866211,\n    y: 0.15918,\n    width: 40,\n    height: 40,\n    rx: 20,\n    fill: \"white\"\n  }))));\n}\nfunction SvgComponent$28(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip0)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 9.61621,\n    y: -23.0908,\n    width: 70.5,\n    height: 54.5,\n    rx: 3.25,\n    fill: \"#4E5969\",\n    fillOpacity: 0.1,\n    stroke: \"#4E5969\",\n    strokeWidth: 1.5\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 16.8662,\n    y: 16.1592,\n    width: 24,\n    height: 8,\n    rx: 1,\n    fill: \"#4E5969\"\n  })), /* @__PURE__ */ react.exports.createElement(\"defs\", null, /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip0\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 0.866211,\n    y: 0.15918,\n    width: 40,\n    height: 40,\n    rx: 20,\n    fill: \"white\"\n  }))));\n}\nfunction SvgComponent$27(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip0)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    width: 108,\n    height: 24,\n    transform: \"translate(-2.13477 8.15918)\",\n    fill: \"#E8F3FF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 5.86523,\n    y: 16.1592,\n    width: 8,\n    height: 8,\n    rx: 4,\n    fill: \"#165DFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 17.8652,\n    y: 18.1592,\n    width: 80,\n    height: 4,\n    rx: 2,\n    fill: \"#94BFFF\"\n  })), /* @__PURE__ */ react.exports.createElement(\"defs\", null, /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip0\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 0.865234,\n    y: 0.15918,\n    width: 40,\n    height: 40,\n    rx: 20,\n    fill: \"white\"\n  }))));\n}\nfunction SvgComponent$26(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip0)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    width: 108,\n    height: 24,\n    transform: \"translate(-2.13477 8.15918)\",\n    fill: \"#4E5969\",\n    fillOpacity: 0.1\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 5.86523,\n    y: 16.1592,\n    width: 8,\n    height: 8,\n    rx: 4,\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    opacity: 0.3,\n    x: 17.8652,\n    y: 18.1592,\n    width: 80,\n    height: 4,\n    rx: 2,\n    fill: \"#4E5969\"\n  })), /* @__PURE__ */ react.exports.createElement(\"defs\", null, /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip0\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 0.865234,\n    y: 0.15918,\n    width: 40,\n    height: 40,\n    rx: 20,\n    fill: \"white\"\n  }))));\n}\nfunction SvgComponent$25(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip0)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 18.1328,\n    y: 9.15918,\n    width: 36,\n    height: 3,\n    rx: 1.5,\n    fill: \"#165DFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 18.1328,\n    y: 19.1592,\n    width: 36,\n    height: 3,\n    rx: 1.5,\n    fill: \"#BEDAFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 18.1328,\n    y: 29.1592,\n    width: 36,\n    height: 3,\n    rx: 1.5,\n    fill: \"#BEDAFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M12.1328 -0.84082V41.1592\",\n    stroke: \"#BEDAFF\",\n    strokeWidth: 4,\n    strokeLinecap: \"round\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M12.1328 6.65918L12.1328 14.6592\",\n    stroke: \"#165DFF\",\n    strokeWidth: 4\n  })), /* @__PURE__ */ react.exports.createElement(\"defs\", null, /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip0\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 0.863281,\n    y: 0.15918,\n    width: 40,\n    height: 40,\n    rx: 20,\n    fill: \"white\"\n  }))));\n}\nfunction SvgComponent$24(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip0)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 18.1328,\n    y: 9.15918,\n    width: 36,\n    height: 3,\n    rx: 1.5,\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    opacity: 0.3,\n    x: 18.1328,\n    y: 19.1592,\n    width: 36,\n    height: 3,\n    rx: 1.5,\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    opacity: 0.3,\n    x: 18.1328,\n    y: 29.1592,\n    width: 36,\n    height: 3,\n    rx: 1.5,\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    opacity: 0.3,\n    d: \"M12.1328 -0.84082V41.1592\",\n    stroke: \"#4E5969\",\n    strokeWidth: 4,\n    strokeLinecap: \"round\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M12.1328 6.65918L12.1328 14.6592\",\n    stroke: \"#4E5969\",\n    strokeWidth: 4\n  })), /* @__PURE__ */ react.exports.createElement(\"defs\", null, /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip0\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 0.863281,\n    y: 0.15918,\n    width: 40,\n    height: 40,\n    rx: 20,\n    fill: \"white\"\n  }))));\n}\nfunction SvgComponent$23(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip0)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip1)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"mask\", {\n    id: \"path-2-inside-1\",\n    fill: \"white\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 11.1719,\n    y: 5.9248,\n    width: 62.8906,\n    height: 21.8039,\n    rx: 1.09375\n  })), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 11.1719,\n    y: 5.9248,\n    width: 62.8906,\n    height: 21.8039,\n    rx: 1.09375,\n    fill: \"#E8F3FF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M15.6748 20.8103L19.28 12.8428H20.4666L24.0718 20.8103H22.6026L21.8115 18.9682H17.9238L17.144 20.8103H15.6748ZM19.8564 14.4137L18.4211 17.8154H21.3143L19.879 14.4137H19.8564Z\",\n    fill: \"#165DFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M24.808 20.8103V15.2839H26.1868V16.2558C26.458 15.6003 27.0382 15.2387 27.9272 15.1709L28.3567 15.137L28.4471 16.3349L27.6334 16.4141C26.7067 16.5045 26.2433 16.9791 26.2433 17.838V20.8103H24.808Z\",\n    fill: \"#165DFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 11.1719,\n    y: 5.9248,\n    width: 62.8906,\n    height: 21.8039,\n    rx: 1.09375,\n    stroke: \"#165DFF\",\n    strokeWidth: 3,\n    mask: \"url(#path-2-inside-1)\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M30.6719 12.4873V21.2373\",\n    stroke: \"#165DFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 11.7344,\n    y: 31.5498,\n    width: 19.6875,\n    height: 2.1875,\n    rx: 1.09375,\n    fill: \"#BEDAFF\"\n  }))), /* @__PURE__ */ react.exports.createElement(\"defs\", null, /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip0\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 0.864258,\n    y: 0.15918,\n    width: 40,\n    height: 40,\n    rx: 20,\n    fill: \"white\"\n  })), /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip1\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    width: 70,\n    height: 70,\n    fill: \"white\",\n    transform: \"translate(-1.95312 -8.84082)\"\n  }))));\n}\nfunction SvgComponent$22(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip0)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip1)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"mask\", {\n    id: \"path-2-inside-1\",\n    fill: \"white\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 11.1719,\n    y: 5.9248,\n    width: 62.8906,\n    height: 21.8039,\n    rx: 1.09375\n  })), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 11.1719,\n    y: 5.9248,\n    width: 62.8906,\n    height: 21.8039,\n    rx: 1.09375,\n    fill: \"#4E5969\",\n    fillOpacity: 0.1\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M15.6748 20.8103L19.28 12.8428H20.4666L24.0718 20.8103H22.6026L21.8115 18.9682H17.9238L17.144 20.8103H15.6748ZM19.8564 14.4137L18.4211 17.8154H21.3143L19.879 14.4137H19.8564Z\",\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M24.808 20.8103V15.2839H26.1868V16.2558C26.458 15.6003 27.0382 15.2387 27.9272 15.1709L28.3567 15.137L28.4471 16.3349L27.6334 16.4141C26.7067 16.5045 26.2433 16.9791 26.2433 17.838V20.8103H24.808Z\",\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 11.1719,\n    y: 5.9248,\n    width: 62.8906,\n    height: 21.8039,\n    rx: 1.09375,\n    stroke: \"#4E5969\",\n    strokeWidth: 3,\n    mask: \"url(#path-2-inside-1)\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M30.6719 12.4873V21.2373\",\n    stroke: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 11.7344,\n    y: 31.5498,\n    width: 19.6875,\n    height: 2.1875,\n    rx: 1.09375,\n    fill: \"#4E5969\",\n    fillOpacity: 0.3\n  }))), /* @__PURE__ */ react.exports.createElement(\"defs\", null, /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip0\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 0.864258,\n    y: 0.15918,\n    width: 40,\n    height: 40,\n    rx: 20,\n    fill: \"white\"\n  })), /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip1\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    width: 70,\n    height: 70,\n    fill: \"white\",\n    transform: \"translate(-1.95312 -8.84082)\"\n  }))));\n}\nfunction SvgComponent$21(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip0)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 7.11523,\n    y: 6.40918,\n    width: 27.5,\n    height: 27.5,\n    rx: 13.75,\n    fill: \"#4080FF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    fillRule: \"evenodd\",\n    clipRule: \"evenodd\",\n    d: \"M18.5114 17.4459C18.5114 16.1616 19.58 15.1206 20.8979 15.1206C22.2157 15.1206 23.2843 16.1616 23.2843 17.4459C23.2843 18.7302 22.2157 19.7711 20.8979 19.7711C19.58 19.7711 18.5114 18.7302 18.5114 17.4459ZM16.6553 24.3366C16.6553 22.7954 17.9227 21.5462 19.4846 21.5462H22.3112C23.873 21.5462 25.1405 22.7954 25.1405 24.3366V25.7317C25.1405 25.9885 24.9283 26.1968 24.6685 26.1968H17.1273C16.8674 26.1968 16.6553 25.9885 16.6553 25.7317V24.3366Z\",\n    fill: \"white\"\n  })), /* @__PURE__ */ react.exports.createElement(\"defs\", null, /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip0\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 0.865234,\n    y: 0.15918,\n    width: 40,\n    height: 40,\n    rx: 20,\n    fill: \"white\"\n  }))));\n}\nfunction SvgComponent$20(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip0)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 7.11523,\n    y: 6.40918,\n    width: 27.5,\n    height: 27.5,\n    rx: 13.75,\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 7.97461,\n    y: 7.26855,\n    width: 25.7812,\n    height: 25.7812,\n    rx: 12.8906,\n    stroke: \"#4E5969\",\n    strokeOpacity: 0.1,\n    strokeWidth: 1.71875\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    fillRule: \"evenodd\",\n    clipRule: \"evenodd\",\n    d: \"M18.5114 17.4459C18.5114 16.1616 19.58 15.1206 20.8979 15.1206C22.2157 15.1206 23.2843 16.1616 23.2843 17.4459C23.2843 18.7302 22.2157 19.7711 20.8979 19.7711C19.58 19.7711 18.5114 18.7302 18.5114 17.4459ZM16.6553 24.3366C16.6553 22.7954 17.9227 21.5462 19.4846 21.5462H22.3112C23.873 21.5462 25.1405 22.7954 25.1405 24.3366V25.7317C25.1405 25.9885 24.9283 26.1968 24.6685 26.1968H17.1273C16.8674 26.1968 16.6553 25.9885 16.6553 25.7317V24.3366Z\",\n    fill: \"white\"\n  })), /* @__PURE__ */ react.exports.createElement(\"defs\", null, /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip0\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 0.865234,\n    y: 0.15918,\n    width: 40,\n    height: 40,\n    rx: 20,\n    fill: \"white\"\n  }))));\n}\nfunction SvgComponent$1$(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip0)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 7.24023,\n    y: 6.53662,\n    width: 27.2453,\n    height: 27.2453,\n    rx: 13.6227,\n    fill: \"#165DFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    fillRule: \"evenodd\",\n    clipRule: \"evenodd\",\n    d: \"M15.5595 17.5907L20.3325 12.8177C20.6254 12.5248 21.1003 12.5248 21.3931 12.8177L26.1661 17.5907C26.459 17.8836 26.459 18.3585 26.1661 18.6514C25.8732 18.9442 25.3983 18.9442 25.1055 18.6514L21.6128 15.1587L21.6128 26.9707L20.1128 26.9707L20.1128 15.1587L16.6202 18.6514C16.3273 18.9442 15.8524 18.9442 15.5595 18.6514C15.2666 18.3585 15.2666 17.8836 15.5595 17.5907Z\",\n    fill: \"white\"\n  })), /* @__PURE__ */ react.exports.createElement(\"defs\", null, /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip0\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 0.863281,\n    y: 0.15918,\n    width: 40,\n    height: 40,\n    rx: 20,\n    fill: \"white\"\n  }))));\n}\nfunction SvgComponent$1_(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip0)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 7.24023,\n    y: 6.53662,\n    width: 27.2453,\n    height: 27.2453,\n    rx: 13.6227,\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 7.99023,\n    y: 7.28662,\n    width: 25.7453,\n    height: 25.7453,\n    rx: 12.8727,\n    stroke: \"#4E5969\",\n    strokeOpacity: 0.1,\n    strokeWidth: 1.5\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    fillRule: \"evenodd\",\n    clipRule: \"evenodd\",\n    d: \"M15.5595 17.5907L20.3325 12.8177C20.6254 12.5248 21.1003 12.5248 21.3931 12.8177L26.1661 17.5907C26.459 17.8836 26.459 18.3585 26.1661 18.6514C25.8732 18.9442 25.3983 18.9442 25.1055 18.6514L21.6128 15.1587L21.6128 26.9707L20.1128 26.9707L20.1128 15.1587L16.6202 18.6514C16.3273 18.9442 15.8524 18.9442 15.5595 18.6514C15.2666 18.3585 15.2666 17.8836 15.5595 17.5907Z\",\n    fill: \"white\"\n  })), /* @__PURE__ */ react.exports.createElement(\"defs\", null, /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip0\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 0.863281,\n    y: 0.15918,\n    width: 40,\n    height: 40,\n    rx: 20,\n    fill: \"white\"\n  }))));\n}\nfunction SvgComponent$1Z(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip0)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M-2.13672 15.6578C-2.13672 14.8506 -1.48236 14.1963 -0.675164 14.1963H26.8017C27.6089 14.1963 28.2633 14.8506 28.2633 15.6578V43.1347C28.2633 43.9419 27.6089 44.5963 26.8017 44.5963H-0.675164C-1.48236 44.5963 -2.13672 43.9419 -2.13672 43.1347V15.6578Z\",\n    fill: \"#E8F3FF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    fillRule: \"evenodd\",\n    clipRule: \"evenodd\",\n    d: \"M26.8017 15.5963H-0.675164C-0.70916 15.5963 -0.736719 15.6238 -0.736719 15.6578V43.1347C-0.736719 43.1687 -0.70916 43.1963 -0.675164 43.1963H26.8017C26.8357 43.1963 26.8633 43.1687 26.8633 43.1347V15.6578C26.8633 15.6238 26.8357 15.5963 26.8017 15.5963ZM-0.675164 14.1963C-1.48236 14.1963 -2.13672 14.8506 -2.13672 15.6578V43.1347C-2.13672 43.9419 -1.48236 44.5963 -0.675164 44.5963H26.8017C27.6089 44.5963 28.2633 43.9419 28.2633 43.1347V15.6578C28.2633 14.8506 27.6089 14.1963 26.8017 14.1963H-0.675164Z\",\n    fill: \"#165DFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 18.3538,\n    y: 7.32746,\n    width: 16.7784,\n    height: 16.7784,\n    rx: 8.38922,\n    fill: \"#165DFF\",\n    stroke: \"white\",\n    strokeWidth: 1.46155\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M26.8589 11.1562C25.8719 11.1562 25.0921 11.611 24.5195 12.5329C23.9712 13.4055 23.7031 14.5486 23.7031 15.9498C23.7031 17.2895 23.9468 18.3343 24.4586 19.084C24.9947 19.8706 25.7867 20.2762 26.8467 20.2762C27.6996 20.2762 28.3941 19.9813 28.9546 19.4159C29.5029 18.8505 29.7831 18.1253 29.7831 17.2649C29.7831 16.4046 29.5273 15.7162 29.0277 15.1754C28.516 14.6346 27.8458 14.3642 27.0173 14.3642C26.5055 14.3642 26.0547 14.4871 25.6648 14.7453C25.2505 14.9911 24.9459 15.3475 24.7266 15.8023H24.6779C24.6657 15.6425 24.6657 15.5319 24.6657 15.4827C24.6657 14.4871 24.8485 13.6636 25.2384 13.0245C25.6283 12.3362 26.1644 12.0043 26.8467 12.0043C27.858 12.0043 28.455 12.496 28.65 13.5039H29.6369C29.3932 11.9306 28.4672 11.1562 26.8589 11.1562ZM26.8223 15.2C27.4194 15.2 27.8945 15.3844 28.2601 15.7777C28.6134 16.1464 28.7962 16.6381 28.7962 17.2649C28.7962 17.8918 28.6134 18.408 28.2479 18.8259C27.8824 19.2192 27.4072 19.4282 26.8223 19.4282C26.2131 19.4282 25.7379 19.2192 25.3724 18.8013C25.0069 18.408 24.8363 17.9041 24.8363 17.2895C24.8363 16.675 25.019 16.1833 25.3968 15.79C25.7745 15.3967 26.2497 15.2 26.8223 15.2Z\",\n    fill: \"white\"\n  })), /* @__PURE__ */ react.exports.createElement(\"defs\", null, /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip0\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 0.863281,\n    y: 0.59668,\n    width: 40,\n    height: 40,\n    rx: 20,\n    fill: \"white\"\n  }))));\n}\nfunction SvgComponent$1Y(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip0)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"path\", {\n    opacity: 0.1,\n    d: \"M-2.13672 15.6578C-2.13672 14.8506 -1.48236 14.1963 -0.675164 14.1963H26.8017C27.6089 14.1963 28.2633 14.8506 28.2633 15.6578V43.1347C28.2633 43.9419 27.6089 44.5963 26.8017 44.5963H-0.675164C-1.48236 44.5963 -2.13672 43.9419 -2.13672 43.1347V15.6578Z\",\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    fillRule: \"evenodd\",\n    clipRule: \"evenodd\",\n    d: \"M26.8017 15.5963H-0.675164C-0.70916 15.5963 -0.736719 15.6238 -0.736719 15.6578V43.1347C-0.736719 43.1687 -0.70916 43.1963 -0.675164 43.1963H26.8017C26.8357 43.1963 26.8633 43.1687 26.8633 43.1347V15.6578C26.8633 15.6238 26.8357 15.5963 26.8017 15.5963ZM-0.675164 14.1963C-1.48236 14.1963 -2.13672 14.8506 -2.13672 15.6578V43.1347C-2.13672 43.9419 -1.48236 44.5963 -0.675164 44.5963H26.8017C27.6089 44.5963 28.2633 43.9419 28.2633 43.1347V15.6578C28.2633 14.8506 27.6089 14.1963 26.8017 14.1963H-0.675164Z\",\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 18.3538,\n    y: 7.32746,\n    width: 16.7784,\n    height: 16.7784,\n    rx: 8.38922,\n    fill: \"#4E5969\",\n    stroke: \"white\",\n    strokeWidth: 1.46155\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M26.8589 11.1562C25.8719 11.1562 25.0921 11.611 24.5195 12.5329C23.9712 13.4055 23.7031 14.5486 23.7031 15.9498C23.7031 17.2895 23.9468 18.3343 24.4586 19.084C24.9947 19.8706 25.7867 20.2762 26.8467 20.2762C27.6996 20.2762 28.3941 19.9813 28.9546 19.4159C29.5029 18.8505 29.7831 18.1253 29.7831 17.2649C29.7831 16.4046 29.5273 15.7162 29.0277 15.1754C28.516 14.6346 27.8458 14.3642 27.0173 14.3642C26.5055 14.3642 26.0547 14.4871 25.6648 14.7453C25.2505 14.9911 24.9459 15.3475 24.7266 15.8023H24.6779C24.6657 15.6425 24.6657 15.5319 24.6657 15.4827C24.6657 14.4871 24.8485 13.6636 25.2384 13.0245C25.6283 12.3362 26.1644 12.0043 26.8467 12.0043C27.858 12.0043 28.455 12.496 28.65 13.5039H29.6369C29.3932 11.9306 28.4672 11.1562 26.8589 11.1562ZM26.8223 15.2C27.4194 15.2 27.8945 15.3844 28.2601 15.7777C28.6134 16.1464 28.7962 16.6381 28.7962 17.2649C28.7962 17.8918 28.6134 18.408 28.2479 18.8259C27.8824 19.2192 27.4072 19.4282 26.8223 19.4282C26.2131 19.4282 25.7379 19.2192 25.3724 18.8013C25.0069 18.408 24.8363 17.9041 24.8363 17.2895C24.8363 16.675 25.019 16.1833 25.3968 15.79C25.7745 15.3967 26.2497 15.2 26.8223 15.2Z\",\n    fill: \"white\"\n  })), /* @__PURE__ */ react.exports.createElement(\"defs\", null, /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip0\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 0.863281,\n    y: 0.59668,\n    width: 40,\n    height: 40,\n    rx: 20,\n    fill: \"white\"\n  }))));\n}\nfunction SvgComponent$1X(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip0)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M26.1657 25.7743L24.3887 25.2549L27.9564 14.1416L29.7334 14.6747L26.1657 25.7743Z\",\n    fill: \"#165DFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: -0.578125,\n    y: 15.9409,\n    width: 22.5157,\n    height: 7.72741,\n    rx: 0.4,\n    fill: \"#94BFFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 32.0518,\n    y: 15.9409,\n    width: 20.6704,\n    height: 7.72741,\n    rx: 0.4,\n    fill: \"#165DFF\"\n  })), /* @__PURE__ */ react.exports.createElement(\"defs\", null, /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip0\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 0.863281,\n    y: 0.15918,\n    width: 40,\n    height: 40,\n    rx: 20,\n    fill: \"white\"\n  }))));\n}\nfunction SvgComponent$1W(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip0)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M26.1657 25.7743L24.3887 25.2549L27.9564 14.1416L29.7334 14.6747L26.1657 25.7743Z\",\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    opacity: 0.3,\n    x: -0.578125,\n    y: 15.9409,\n    width: 22.5157,\n    height: 7.72741,\n    rx: 0.4,\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 32.0518,\n    y: 15.9409,\n    width: 20.6704,\n    height: 7.72741,\n    rx: 0.4,\n    fill: \"#4E5969\"\n  })), /* @__PURE__ */ react.exports.createElement(\"defs\", null, /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip0\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 0.863281,\n    y: 0.15918,\n    width: 40,\n    height: 40,\n    rx: 20,\n    fill: \"white\"\n  }))));\n}\nfunction SvgComponent$1V(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip0)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 6.86328,\n    y: 12.5967,\n    width: 48.1274,\n    height: 16.9409,\n    rx: 1.46155,\n    fill: \"#165DFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M19.8426 23.6703L19.3184 22.452H16.7858L16.2616 23.6703H15.3018L17.6571 18.4649H18.4324L20.7877 23.6703H19.8426ZM17.0959 21.7136H19.0009L18.0484 19.4986L17.0959 21.7136Z\",\n    fill: \"white\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M24.2781 23.7367C23.7662 23.7367 23.3182 23.6284 22.9343 23.4118C22.5553 23.1903 22.2624 22.8778 22.0556 22.4741C21.8538 22.0705 21.7529 21.6004 21.7529 21.0639C21.7529 20.5273 21.8538 20.0597 22.0556 19.661C22.2624 19.2574 22.5553 18.9473 22.9343 18.7307C23.3182 18.5092 23.7662 18.3984 24.2781 18.3984C24.6276 18.3984 24.9574 18.4526 25.2675 18.5609C25.5776 18.6692 25.8385 18.8218 26.0501 19.0187L25.7326 19.7127C25.4964 19.5257 25.2625 19.3903 25.0312 19.3066C24.7998 19.218 24.5537 19.1737 24.2928 19.1737C23.7908 19.1737 23.4019 19.3361 23.1263 19.661C22.8555 19.9859 22.7202 20.4535 22.7202 21.0639C22.7202 21.6792 22.8555 22.1493 23.1263 22.4741C23.4019 22.799 23.7908 22.9614 24.2928 22.9614C24.5537 22.9614 24.7998 22.9196 25.0312 22.8359C25.2625 22.7473 25.4964 22.6095 25.7326 22.4224L26.0501 23.1165C25.8385 23.3134 25.5776 23.466 25.2675 23.5743C24.9574 23.6826 24.6276 23.7367 24.2781 23.7367Z\",\n    fill: \"white\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M28.8113 23.6703V19.2475H27.1131V18.4649H31.462V19.2475H29.7638V23.6703H28.8113Z\",\n    fill: \"white\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M32.8522 23.6703V18.4649H33.8046V23.6703H32.8522Z\",\n    fill: \"white\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M37.9856 23.7367C37.4786 23.7367 37.038 23.6284 36.6639 23.4118C36.2947 23.1953 36.0092 22.8851 35.8074 22.4815C35.6056 22.0779 35.5047 21.6053 35.5047 21.0639C35.5047 20.5224 35.6031 20.0523 35.8 19.6536C36.0019 19.25 36.2898 18.9399 36.6639 18.7233C37.038 18.5067 37.4786 18.3984 37.9856 18.3984C38.4926 18.3984 38.9306 18.5067 39.2998 18.7233C39.6739 18.9399 39.9594 19.25 40.1563 19.6536C40.3581 20.0523 40.459 20.5224 40.459 21.0639C40.459 21.6053 40.3581 22.0779 40.1563 22.4815C39.9545 22.8851 39.6665 23.1953 39.2924 23.4118C38.9233 23.6284 38.4876 23.7367 37.9856 23.7367ZM37.9856 22.9762C38.463 22.9762 38.8347 22.8113 39.1005 22.4815C39.3712 22.1517 39.5066 21.6792 39.5066 21.0639C39.5066 20.4486 39.3712 19.9785 39.1005 19.6536C38.8347 19.3238 38.463 19.1589 37.9856 19.1589C37.5032 19.1589 37.1266 19.3238 36.8559 19.6536C36.5901 19.9785 36.4572 20.4486 36.4572 21.0639C36.4572 21.6792 36.5901 22.1517 36.8559 22.4815C37.1266 22.8113 37.5032 22.9762 37.9856 22.9762Z\",\n    fill: \"white\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M45.6592 18.4649H46.5526V23.6703H45.8364L43.0455 20.0376V23.6703H42.1594V18.4649H42.8682L45.6592 22.0902V18.4649Z\",\n    fill: \"white\"\n  })), /* @__PURE__ */ react.exports.createElement(\"defs\", null, /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip0\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 0.863281,\n    y: 0.59668,\n    width: 40,\n    height: 40,\n    rx: 20,\n    fill: \"white\"\n  }))));\n}\nfunction SvgComponent$1U(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip0)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 6.86328,\n    y: 12.5967,\n    width: 48.1274,\n    height: 16.9409,\n    rx: 1.46155,\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M19.8426 23.6703L19.3184 22.452H16.7858L16.2616 23.6703H15.3018L17.6571 18.4649H18.4324L20.7877 23.6703H19.8426ZM17.0959 21.7136H19.0009L18.0484 19.4986L17.0959 21.7136Z\",\n    fill: \"white\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M24.2781 23.7367C23.7662 23.7367 23.3182 23.6284 22.9343 23.4118C22.5553 23.1903 22.2624 22.8778 22.0556 22.4741C21.8538 22.0705 21.7529 21.6004 21.7529 21.0639C21.7529 20.5273 21.8538 20.0597 22.0556 19.661C22.2624 19.2574 22.5553 18.9473 22.9343 18.7307C23.3182 18.5092 23.7662 18.3984 24.2781 18.3984C24.6276 18.3984 24.9574 18.4526 25.2675 18.5609C25.5776 18.6692 25.8385 18.8218 26.0501 19.0187L25.7326 19.7127C25.4964 19.5257 25.2625 19.3903 25.0312 19.3066C24.7998 19.218 24.5537 19.1737 24.2928 19.1737C23.7908 19.1737 23.4019 19.3361 23.1263 19.661C22.8555 19.9859 22.7202 20.4535 22.7202 21.0639C22.7202 21.6792 22.8555 22.1493 23.1263 22.4741C23.4019 22.799 23.7908 22.9614 24.2928 22.9614C24.5537 22.9614 24.7998 22.9196 25.0312 22.8359C25.2625 22.7473 25.4964 22.6095 25.7326 22.4224L26.0501 23.1165C25.8385 23.3134 25.5776 23.466 25.2675 23.5743C24.9574 23.6826 24.6276 23.7367 24.2781 23.7367Z\",\n    fill: \"white\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M28.8113 23.6703V19.2475H27.1131V18.4649H31.462V19.2475H29.7638V23.6703H28.8113Z\",\n    fill: \"white\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M32.8522 23.6703V18.4649H33.8046V23.6703H32.8522Z\",\n    fill: \"white\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M37.9856 23.7367C37.4786 23.7367 37.038 23.6284 36.6639 23.4118C36.2947 23.1953 36.0092 22.8851 35.8074 22.4815C35.6056 22.0779 35.5047 21.6053 35.5047 21.0639C35.5047 20.5224 35.6031 20.0523 35.8 19.6536C36.0019 19.25 36.2898 18.9399 36.6639 18.7233C37.038 18.5067 37.4786 18.3984 37.9856 18.3984C38.4926 18.3984 38.9306 18.5067 39.2998 18.7233C39.6739 18.9399 39.9594 19.25 40.1563 19.6536C40.3581 20.0523 40.459 20.5224 40.459 21.0639C40.459 21.6053 40.3581 22.0779 40.1563 22.4815C39.9545 22.8851 39.6665 23.1953 39.2924 23.4118C38.9233 23.6284 38.4876 23.7367 37.9856 23.7367ZM37.9856 22.9762C38.463 22.9762 38.8347 22.8113 39.1005 22.4815C39.3712 22.1517 39.5066 21.6792 39.5066 21.0639C39.5066 20.4486 39.3712 19.9785 39.1005 19.6536C38.8347 19.3238 38.463 19.1589 37.9856 19.1589C37.5032 19.1589 37.1266 19.3238 36.8559 19.6536C36.5901 19.9785 36.4572 20.4486 36.4572 21.0639C36.4572 21.6792 36.5901 22.1517 36.8559 22.4815C37.1266 22.8113 37.5032 22.9762 37.9856 22.9762Z\",\n    fill: \"white\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M45.6592 18.4649H46.5526V23.6703H45.8364L43.0455 20.0376V23.6703H42.1594V18.4649H42.8682L45.6592 22.0902V18.4649Z\",\n    fill: \"white\"\n  })), /* @__PURE__ */ react.exports.createElement(\"defs\", null, /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip0\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 0.863281,\n    y: 0.59668,\n    width: 40,\n    height: 40,\n    rx: 20,\n    fill: \"white\"\n  }))));\n}\nfunction SvgComponent$1T(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip0)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M3.59627 23.5251C3.25731 23.5251 2.93506 23.475 2.62952 23.3748C2.32398 23.2697 2.06857 23.1241 1.86328 22.9379L2.12108 22.365C2.34546 22.5465 2.57701 22.6801 2.81571 22.7661C3.05441 22.852 3.30744 22.895 3.57479 22.895C3.91852 22.895 4.17871 22.821 4.35535 22.673C4.53676 22.525 4.62747 22.3125 4.62747 22.0356C4.62747 21.7587 4.53676 21.5534 4.35535 21.4198C4.17871 21.2861 3.92091 21.2193 3.58195 21.2193H2.80139V20.5962H3.51034C3.8111 20.5962 4.04742 20.5199 4.21929 20.3671C4.39593 20.2143 4.48425 20.0043 4.48425 19.7369C4.48425 19.4934 4.40309 19.3072 4.24077 19.1783C4.07845 19.0447 3.84691 18.9778 3.54614 18.9778C3.03532 18.9778 2.58894 19.1616 2.20701 19.5292L1.94921 18.9635C2.14495 18.7678 2.38843 18.6174 2.67965 18.5124C2.97564 18.4026 3.28357 18.3477 3.60343 18.3477C4.10948 18.3477 4.50334 18.4646 4.78502 18.6986C5.06669 18.9277 5.20752 19.2476 5.20752 19.6581C5.20752 19.935 5.13591 20.1785 4.99269 20.3886C4.85424 20.5986 4.66089 20.7514 4.41264 20.8469C4.7134 20.9233 4.94495 21.0713 5.10727 21.2909C5.26958 21.5057 5.35074 21.7707 5.35074 22.0858C5.35074 22.5297 5.1932 22.8806 4.87811 23.1384C4.56779 23.3962 4.14052 23.5251 3.59627 23.5251Z\",\n    fill: \"#94BFFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M6.42927 23.4607V22.9093L8.11214 21.1047C8.34607 20.8517 8.51316 20.6225 8.61341 20.4172C8.71844 20.2119 8.77096 20.0043 8.77096 19.7942C8.77096 19.25 8.4511 18.9778 7.81137 18.9778C7.32441 18.9778 6.88759 19.1616 6.50089 19.5292L6.23592 18.9635C6.42689 18.7773 6.67037 18.6293 6.96636 18.5195C7.26235 18.4049 7.57028 18.3477 7.89014 18.3477C8.41052 18.3477 8.80915 18.467 9.08605 18.7057C9.36772 18.9444 9.50855 19.2858 9.50855 19.7298C9.50855 20.0305 9.43455 20.3241 9.28656 20.6106C9.14334 20.897 8.91657 21.2026 8.60625 21.5272L7.36022 22.8377H9.70906V23.4607H6.42927Z\",\n    fill: \"#94BFFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M17.3732 6.48134V6.05718L19.0219 4.27845C19.2545 4.02305 19.421 3.79044 19.5213 3.58064C19.6262 3.37085 19.6787 3.15649 19.6787 2.93757C19.6787 2.37658 19.3526 2.09609 18.7004 2.09609C18.2124 2.09609 17.7814 2.27852 17.4074 2.64339L17.1953 2.20555C17.3732 2.02312 17.5989 1.87717 17.8726 1.76771C18.1508 1.65369 18.4427 1.59668 18.7483 1.59668C19.2317 1.59668 19.6012 1.7107 19.8566 1.93874C20.1165 2.16222 20.2465 2.48148 20.2465 2.89652C20.2465 3.18385 20.1758 3.46662 20.0344 3.74483C19.893 4.01848 19.6764 4.31038 19.3845 4.62051L18.0915 6.00245H20.4449V6.48134H17.3732Z\",\n    fill: \"#94BFFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M22.5835 6.54291C22.3373 6.54291 22.0887 6.49046 21.8379 6.38556C21.587 6.28066 21.3818 6.13927 21.2221 5.9614L21.4342 5.51672C21.5984 5.69459 21.7786 5.82686 21.9747 5.91351C22.1754 6.00017 22.3806 6.0435 22.5904 6.0435C23.0374 6.0435 23.3817 5.87703 23.6234 5.54408C23.8651 5.21114 23.986 4.71629 23.986 4.05953V3.71747C23.8948 4.01848 23.7306 4.25565 23.4934 4.42896C23.2608 4.59771 22.9849 4.68209 22.6656 4.68209C22.3829 4.68209 22.132 4.61823 21.9131 4.49053C21.6942 4.35827 21.5232 4.17811 21.4 3.95007C21.2769 3.72203 21.2153 3.45978 21.2153 3.16333C21.2153 2.85775 21.2791 2.58866 21.4069 2.35606C21.5391 2.1189 21.7193 1.93418 21.9473 1.80192C22.1799 1.66509 22.4467 1.59668 22.7477 1.59668C23.3178 1.59668 23.7557 1.8042 24.0613 2.21923C24.3714 2.62971 24.5265 3.20666 24.5265 3.95007C24.5265 4.78014 24.3554 5.42094 24.0134 5.87246C23.6713 6.31943 23.1947 6.54291 22.5835 6.54291ZM22.7819 4.21004C23.0875 4.21004 23.3361 4.11198 23.5276 3.91587C23.7192 3.71519 23.815 3.4575 23.815 3.1428C23.815 2.82355 23.7192 2.56586 23.5276 2.36974C23.3361 2.16906 23.0875 2.06873 22.7819 2.06873C22.4809 2.06873 22.2346 2.16906 22.0431 2.36974C21.8515 2.56586 21.7558 2.82355 21.7558 3.1428C21.7558 3.4575 21.8515 3.71519 22.0431 3.91587C22.2346 4.11198 22.4809 4.21004 22.7819 4.21004Z\",\n    fill: \"#94BFFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M21.0283 12.6299H120.715V28.267H21.0283V12.6299Z\",\n    fill: \"#BEDAFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M12.3867 20.4494C12.3867 15.7411 16.2035 11.9243 20.9118 11.9243V11.9243C25.6201 11.9243 29.4369 15.7411 29.4369 20.4494V20.4494C29.4369 25.1577 25.6201 28.9745 20.9118 28.9745V28.9745C16.2035 28.9745 12.3867 25.1577 12.3867 20.4494V20.4494Z\",\n    fill: \"#165DFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M20.8643 24.3347C20.378 24.3347 19.9061 24.2585 19.4485 24.1062C18.998 23.9465 18.6226 23.7253 18.3223 23.4423L18.6977 22.5716C19.3555 23.1085 20.0706 23.377 20.8428 23.377C21.3362 23.377 21.7223 23.2428 22.0012 22.9743C22.28 22.6986 22.4195 22.3394 22.4195 21.8968C22.4195 21.4397 22.2872 21.0661 22.0226 20.7758C21.7581 20.4856 21.3898 20.3405 20.9179 20.3405C20.2529 20.3405 19.7202 20.6199 19.3198 21.1785H18.5475V16.564H23.0523V17.5108H19.6308V19.9378C20.0312 19.5823 20.5389 19.4045 21.1538 19.4045C21.6329 19.4045 22.0477 19.5061 22.398 19.7093C22.7484 19.9124 23.0201 20.199 23.2132 20.5691C23.4062 20.9318 23.5028 21.3563 23.5028 21.8424C23.5028 22.3358 23.3955 22.7711 23.181 23.1484C22.9665 23.5185 22.6626 23.8087 22.2693 24.0191C21.876 24.2295 21.4077 24.3347 20.8643 24.3347Z\",\n    fill: \"white\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M36.039 23.5247C35.4279 23.5247 34.9553 23.3074 34.6211 22.873C34.2917 22.4386 34.127 21.8299 34.127 21.0469C34.127 20.1828 34.3131 19.5168 34.6855 19.049C35.0579 18.5811 35.5735 18.3472 36.2323 18.3472C36.4901 18.3472 36.7503 18.3997 37.0129 18.5047C37.2755 18.605 37.4951 18.7482 37.6717 18.9344L37.4139 19.4929C37.242 19.3211 37.0511 19.1922 36.841 19.1062C36.6357 19.0203 36.4281 18.9773 36.218 18.9773C35.774 18.9773 35.4327 19.1397 35.194 19.4643C34.96 19.7842 34.8431 20.264 34.8431 20.9037V21.1901C34.9385 20.8989 35.1033 20.6721 35.3372 20.5098C35.5759 20.3427 35.8504 20.2592 36.1607 20.2592C36.4567 20.2592 36.7169 20.3284 36.9413 20.4669C37.1704 20.6053 37.3495 20.7963 37.4784 21.0397C37.6073 21.2785 37.6717 21.553 37.6717 21.8633C37.6717 22.1879 37.6025 22.4767 37.464 22.7298C37.3256 22.978 37.1322 23.1738 36.884 23.317C36.6405 23.4554 36.3588 23.5247 36.039 23.5247ZM35.996 22.9231C36.2872 22.9231 36.5235 22.8276 36.705 22.6367C36.8864 22.4457 36.9771 22.1975 36.9771 21.8919C36.9771 21.5864 36.8864 21.3381 36.705 21.1472C36.5235 20.9562 36.2872 20.8607 35.996 20.8607C35.7048 20.8607 35.4685 20.9562 35.2871 21.1472C35.1056 21.3381 35.0149 21.5864 35.0149 21.8919C35.0149 22.1975 35.1056 22.4457 35.2871 22.6367C35.4685 22.8276 35.7048 22.9231 35.996 22.9231Z\",\n    fill: \"#165DFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M17.595 38.8577V38.2346H18.7408V34.6684L17.8457 35.227L17.5449 34.6756L18.9557 33.8091H19.4784V38.2346H20.5526V38.8577H17.595Z\",\n    fill: \"#94BFFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M21.6598 38.8577V38.3063L23.3426 36.5017C23.5766 36.2486 23.7436 36.0195 23.8439 35.8142C23.9489 35.6089 24.0014 35.4012 24.0014 35.1912C24.0014 34.6469 23.6816 34.3748 23.0419 34.3748C22.5549 34.3748 22.1181 34.5586 21.7314 34.9262L21.4664 34.3605C21.6574 34.1743 21.9009 34.0263 22.1968 33.9165C22.4928 33.8019 22.8008 33.7446 23.1206 33.7446C23.641 33.7446 24.0396 33.864 24.3165 34.1027C24.5982 34.3414 24.739 34.6827 24.739 35.1267C24.739 35.4275 24.665 35.7211 24.517 36.0075C24.3738 36.294 24.1471 36.5995 23.8367 36.9242L22.5907 38.2346H24.9396V38.8577H21.6598Z\",\n    fill: \"#94BFFF\"\n  })), /* @__PURE__ */ react.exports.createElement(\"defs\", null, /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip0\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 0.863281,\n    y: 0.59668,\n    width: 40,\n    height: 40,\n    rx: 20,\n    fill: \"white\"\n  }))));\n}\nfunction SvgComponent$1S(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip0)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M3.59627 23.5251C3.25731 23.5251 2.93506 23.475 2.62952 23.3748C2.32398 23.2697 2.06857 23.1241 1.86328 22.9379L2.12108 22.365C2.34546 22.5465 2.57701 22.6801 2.81571 22.7661C3.05441 22.852 3.30744 22.895 3.57479 22.895C3.91852 22.895 4.17871 22.821 4.35535 22.673C4.53676 22.525 4.62747 22.3125 4.62747 22.0356C4.62747 21.7587 4.53676 21.5534 4.35535 21.4198C4.17871 21.2861 3.92091 21.2193 3.58195 21.2193H2.80139V20.5962H3.51034C3.8111 20.5962 4.04742 20.5199 4.21929 20.3671C4.39593 20.2143 4.48425 20.0043 4.48425 19.7369C4.48425 19.4934 4.40309 19.3072 4.24077 19.1783C4.07845 19.0447 3.84691 18.9778 3.54614 18.9778C3.03532 18.9778 2.58894 19.1616 2.20701 19.5292L1.94921 18.9635C2.14495 18.7678 2.38843 18.6174 2.67965 18.5124C2.97564 18.4026 3.28357 18.3477 3.60343 18.3477C4.10948 18.3477 4.50334 18.4646 4.78502 18.6986C5.06669 18.9277 5.20752 19.2476 5.20752 19.6581C5.20752 19.935 5.13591 20.1785 4.99269 20.3886C4.85424 20.5986 4.66089 20.7514 4.41264 20.8469C4.7134 20.9233 4.94495 21.0713 5.10727 21.2909C5.26958 21.5057 5.35074 21.7707 5.35074 22.0858C5.35074 22.5297 5.1932 22.8806 4.87811 23.1384C4.56779 23.3962 4.14052 23.5251 3.59627 23.5251Z\",\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M6.42927 23.4607V22.9093L8.11214 21.1047C8.34607 20.8517 8.51316 20.6225 8.61341 20.4172C8.71844 20.2119 8.77096 20.0043 8.77096 19.7942C8.77096 19.25 8.4511 18.9778 7.81137 18.9778C7.32441 18.9778 6.88759 19.1616 6.50089 19.5292L6.23592 18.9635C6.42689 18.7773 6.67037 18.6293 6.96636 18.5195C7.26235 18.4049 7.57028 18.3477 7.89014 18.3477C8.41052 18.3477 8.80915 18.467 9.08605 18.7057C9.36772 18.9444 9.50855 19.2858 9.50855 19.7298C9.50855 20.0305 9.43455 20.3241 9.28656 20.6106C9.14334 20.897 8.91657 21.2026 8.60625 21.5272L7.36022 22.8377H9.70906V23.4607H6.42927Z\",\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M17.3732 6.48134V6.05718L19.0219 4.27845C19.2545 4.02305 19.421 3.79044 19.5213 3.58064C19.6262 3.37085 19.6787 3.15649 19.6787 2.93757C19.6787 2.37658 19.3526 2.09609 18.7004 2.09609C18.2124 2.09609 17.7814 2.27852 17.4074 2.64339L17.1953 2.20555C17.3732 2.02312 17.5989 1.87717 17.8726 1.76771C18.1508 1.65369 18.4427 1.59668 18.7483 1.59668C19.2317 1.59668 19.6012 1.7107 19.8566 1.93874C20.1165 2.16222 20.2465 2.48148 20.2465 2.89652C20.2465 3.18385 20.1758 3.46662 20.0344 3.74483C19.893 4.01848 19.6764 4.31038 19.3845 4.62051L18.0915 6.00245H20.4449V6.48134H17.3732Z\",\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M22.5835 6.54291C22.3373 6.54291 22.0887 6.49046 21.8379 6.38556C21.587 6.28066 21.3818 6.13927 21.2221 5.9614L21.4342 5.51672C21.5984 5.69459 21.7786 5.82686 21.9747 5.91351C22.1754 6.00017 22.3806 6.0435 22.5904 6.0435C23.0374 6.0435 23.3817 5.87703 23.6234 5.54408C23.8651 5.21114 23.986 4.71629 23.986 4.05953V3.71747C23.8948 4.01848 23.7306 4.25565 23.4934 4.42896C23.2608 4.59771 22.9849 4.68209 22.6656 4.68209C22.3829 4.68209 22.132 4.61823 21.9131 4.49053C21.6942 4.35827 21.5232 4.17811 21.4 3.95007C21.2769 3.72203 21.2153 3.45978 21.2153 3.16333C21.2153 2.85775 21.2791 2.58866 21.4069 2.35606C21.5391 2.1189 21.7193 1.93418 21.9473 1.80192C22.1799 1.66509 22.4467 1.59668 22.7477 1.59668C23.3178 1.59668 23.7557 1.8042 24.0613 2.21923C24.3714 2.62971 24.5265 3.20666 24.5265 3.95007C24.5265 4.78014 24.3554 5.42094 24.0134 5.87246C23.6713 6.31943 23.1947 6.54291 22.5835 6.54291ZM22.7819 4.21004C23.0875 4.21004 23.3361 4.11198 23.5276 3.91587C23.7192 3.71519 23.815 3.4575 23.815 3.1428C23.815 2.82355 23.7192 2.56586 23.5276 2.36974C23.3361 2.16906 23.0875 2.06873 22.7819 2.06873C22.4809 2.06873 22.2346 2.16906 22.0431 2.36974C21.8515 2.56586 21.7558 2.82355 21.7558 3.1428C21.7558 3.4575 21.8515 3.71519 22.0431 3.91587C22.2346 4.11198 22.4809 4.21004 22.7819 4.21004Z\",\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    opacity: 0.2,\n    d: \"M21.0283 12.6299H120.715V28.267H21.0283V12.6299Z\",\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M12.3867 20.4494C12.3867 15.7411 16.2035 11.9243 20.9118 11.9243V11.9243C25.6201 11.9243 29.4369 15.7411 29.4369 20.4494V20.4494C29.4369 25.1577 25.6201 28.9745 20.9118 28.9745V28.9745C16.2035 28.9745 12.3867 25.1577 12.3867 20.4494V20.4494Z\",\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M20.8643 24.3347C20.378 24.3347 19.9061 24.2585 19.4485 24.1062C18.998 23.9465 18.6226 23.7253 18.3223 23.4423L18.6977 22.5716C19.3555 23.1085 20.0706 23.377 20.8428 23.377C21.3362 23.377 21.7223 23.2428 22.0012 22.9743C22.28 22.6986 22.4195 22.3394 22.4195 21.8968C22.4195 21.4397 22.2872 21.0661 22.0226 20.7758C21.7581 20.4856 21.3898 20.3405 20.9179 20.3405C20.2529 20.3405 19.7202 20.6199 19.3198 21.1785H18.5475V16.564H23.0523V17.5108H19.6308V19.9378C20.0312 19.5823 20.5389 19.4045 21.1538 19.4045C21.6329 19.4045 22.0477 19.5061 22.398 19.7093C22.7484 19.9124 23.0201 20.199 23.2132 20.5691C23.4062 20.9318 23.5028 21.3563 23.5028 21.8424C23.5028 22.3358 23.3955 22.7711 23.181 23.1484C22.9665 23.5185 22.6626 23.8087 22.2693 24.0191C21.876 24.2295 21.4077 24.3347 20.8643 24.3347Z\",\n    fill: \"white\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M36.039 23.5247C35.4279 23.5247 34.9553 23.3074 34.6211 22.873C34.2917 22.4386 34.127 21.8299 34.127 21.0469C34.127 20.1828 34.3131 19.5168 34.6855 19.049C35.0579 18.5811 35.5735 18.3472 36.2323 18.3472C36.4901 18.3472 36.7503 18.3997 37.0129 18.5047C37.2755 18.605 37.4951 18.7482 37.6717 18.9344L37.4139 19.4929C37.242 19.3211 37.0511 19.1922 36.841 19.1062C36.6357 19.0203 36.4281 18.9773 36.218 18.9773C35.774 18.9773 35.4327 19.1397 35.194 19.4643C34.96 19.7842 34.8431 20.264 34.8431 20.9037V21.1901C34.9385 20.8989 35.1033 20.6721 35.3372 20.5098C35.5759 20.3427 35.8504 20.2592 36.1607 20.2592C36.4567 20.2592 36.7169 20.3284 36.9413 20.4669C37.1704 20.6053 37.3495 20.7963 37.4784 21.0397C37.6073 21.2785 37.6717 21.553 37.6717 21.8633C37.6717 22.1879 37.6025 22.4767 37.464 22.7298C37.3256 22.978 37.1322 23.1738 36.884 23.317C36.6405 23.4554 36.3588 23.5247 36.039 23.5247ZM35.996 22.9231C36.2872 22.9231 36.5235 22.8276 36.705 22.6367C36.8864 22.4457 36.9771 22.1975 36.9771 21.8919C36.9771 21.5864 36.8864 21.3381 36.705 21.1472C36.5235 20.9562 36.2872 20.8607 35.996 20.8607C35.7048 20.8607 35.4685 20.9562 35.2871 21.1472C35.1056 21.3381 35.0149 21.5864 35.0149 21.8919C35.0149 22.1975 35.1056 22.4457 35.2871 22.6367C35.4685 22.8276 35.7048 22.9231 35.996 22.9231Z\",\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M17.595 38.8577V38.2346H18.7408V34.6684L17.8457 35.227L17.5449 34.6756L18.9557 33.8091H19.4784V38.2346H20.5526V38.8577H17.595Z\",\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M21.6598 38.8577V38.3063L23.3426 36.5017C23.5766 36.2486 23.7436 36.0195 23.8439 35.8142C23.9489 35.6089 24.0014 35.4012 24.0014 35.1912C24.0014 34.6469 23.6816 34.3748 23.0419 34.3748C22.5549 34.3748 22.1181 34.5586 21.7314 34.9262L21.4664 34.3605C21.6574 34.1743 21.9009 34.0263 22.1968 33.9165C22.4928 33.8019 22.8008 33.7446 23.1206 33.7446C23.641 33.7446 24.0396 33.864 24.3165 34.1027C24.5982 34.3414 24.739 34.6827 24.739 35.1267C24.739 35.4275 24.665 35.7211 24.517 36.0075C24.3738 36.294 24.1471 36.5995 23.8367 36.9242L22.5907 38.2346H24.9396V38.8577H21.6598Z\",\n    fill: \"#4E5969\"\n  })), /* @__PURE__ */ react.exports.createElement(\"defs\", null, /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip0\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 0.863281,\n    y: 0.59668,\n    width: 40,\n    height: 40,\n    rx: 20,\n    fill: \"white\"\n  }))));\n}\nfunction SvgComponent$1R(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip0)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"path\", {\n    fillRule: \"evenodd\",\n    clipRule: \"evenodd\",\n    d: \"M49.8633 11.5967L13.8633 11.5967V52.0411L49.8633 52.0411V11.5967ZM13.8633 9.59668C12.7587 9.59668 11.8633 10.4921 11.8633 11.5967V52.0411C11.8633 53.1457 12.7587 54.0411 13.8633 54.0411H49.8633C50.9678 54.0411 51.8633 53.1457 51.8633 52.0411V11.5967C51.8633 10.4921 50.9678 9.59668 49.8633 9.59668H13.8633Z\",\n    fill: \"#165DFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 17.8633,\n    y: 15.5967,\n    width: 33,\n    height: 27,\n    rx: 1,\n    fill: \"#BEDAFF\"\n  })), /* @__PURE__ */ react.exports.createElement(\"defs\", null, /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip0\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 0.863281,\n    y: 0.59668,\n    width: 40,\n    height: 40,\n    rx: 20,\n    fill: \"white\"\n  }))));\n}\nfunction SvgComponent$1Q(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip0)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"path\", {\n    fillRule: \"evenodd\",\n    clipRule: \"evenodd\",\n    d: \"M49.8633 11.5967L13.8633 11.5967V52.0411L49.8633 52.0411V11.5967ZM13.8633 9.59668C12.7587 9.59668 11.8633 10.4921 11.8633 11.5967V52.0411C11.8633 53.1457 12.7587 54.0411 13.8633 54.0411H49.8633C50.9678 54.0411 51.8633 53.1457 51.8633 52.0411V11.5967C51.8633 10.4921 50.9678 9.59668 49.8633 9.59668H13.8633Z\",\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    opacity: 0.1,\n    x: 17.8633,\n    y: 15.5967,\n    width: 33,\n    height: 27,\n    rx: 1,\n    fill: \"#4E5969\"\n  })), /* @__PURE__ */ react.exports.createElement(\"defs\", null, /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip0\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 0.863281,\n    y: 0.59668,\n    width: 40,\n    height: 40,\n    rx: 20,\n    fill: \"white\"\n  }))));\n}\nfunction SvgComponent$1P(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip0)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M34.4727 9.01855H7.34766C7.08014 9.01855 6.86328 9.23542 6.86328 9.50293V26.9404C6.86328 27.2079 7.08014 27.4248 7.34766 27.4248H34.4727C34.7402 27.4248 34.957 27.2079 34.957 26.9404V9.50293C34.957 9.23542 34.7402 9.01855 34.4727 9.01855Z\",\n    fill: \"#165DFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M12.7595 23.684L15.2722 19.548C15.5824 19.0375 16.2756 18.9254 16.7308 19.3121L19.9154 22.0176C20.3969 22.4266 21.1345 22.2743 21.4145 21.7079L24.7145 15.0333C25.0807 14.2927 26.1456 14.3186 26.4753 15.0762L30.2721 23.8007C30.5512 24.442 30.0812 25.1592 29.3817 25.1592H13.5894C12.8322 25.1592 12.3664 24.3311 12.7595 23.684Z\",\n    fill: \"white\"\n  }), /* @__PURE__ */ react.exports.createElement(\"circle\", {\n    cx: 14.8633,\n    cy: 14.1592,\n    r: 2,\n    fill: \"white\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M17.8633 32.6592C17.8633 31.8308 17.1917 31.1592 16.3633 31.1592C15.5349 31.1592 14.8633 31.8308 14.8633 32.6592C14.8633 33.4876 15.5349 34.1592 16.3633 34.1592C17.1917 34.1592 17.8633 33.4876 17.8633 32.6592Z\",\n    fill: \"#165DFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M22.8633 32.6592C22.8633 31.8308 22.1917 31.1592 21.3633 31.1592C20.5349 31.1592 19.8633 31.8308 19.8633 32.6592C19.8633 33.4876 20.5349 34.1592 21.3633 34.1592C22.1917 34.1592 22.8633 33.4876 22.8633 32.6592Z\",\n    fill: \"#94BFFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M27.8633 32.6592C27.8633 31.8308 27.1917 31.1592 26.3633 31.1592C25.5349 31.1592 24.8633 31.8308 24.8633 32.6592C24.8633 33.4876 25.5349 34.1592 26.3633 34.1592C27.1917 34.1592 27.8633 33.4876 27.8633 32.6592Z\",\n    fill: \"#94BFFF\"\n  })), /* @__PURE__ */ react.exports.createElement(\"defs\", null, /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip0\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 0.863281,\n    y: 0.15918,\n    width: 40,\n    height: 40,\n    rx: 20,\n    fill: \"white\"\n  }))));\n}\nfunction SvgComponent$1O(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip0)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M34.4727 9.01855H7.34766C7.08014 9.01855 6.86328 9.23542 6.86328 9.50293V26.9404C6.86328 27.2079 7.08014 27.4248 7.34766 27.4248H34.4727C34.7402 27.4248 34.957 27.2079 34.957 26.9404V9.50293C34.957 9.23542 34.7402 9.01855 34.4727 9.01855Z\",\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M12.7595 23.684L15.2722 19.548C15.5824 19.0375 16.2756 18.9254 16.7308 19.3121L19.9154 22.0176C20.3969 22.4266 21.1345 22.2743 21.4145 21.7079L24.7145 15.0333C25.0807 14.2927 26.1456 14.3186 26.4753 15.0762L30.2721 23.8007C30.5512 24.442 30.0812 25.1592 29.3817 25.1592H13.5894C12.8322 25.1592 12.3664 24.3311 12.7595 23.684Z\",\n    fill: \"white\"\n  }), /* @__PURE__ */ react.exports.createElement(\"circle\", {\n    cx: 14.8633,\n    cy: 14.1592,\n    r: 2,\n    fill: \"white\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M17.8633 32.6592C17.8633 31.8308 17.1917 31.1592 16.3633 31.1592C15.5349 31.1592 14.8633 31.8308 14.8633 32.6592C14.8633 33.4876 15.5349 34.1592 16.3633 34.1592C17.1917 34.1592 17.8633 33.4876 17.8633 32.6592Z\",\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    opacity: 0.3,\n    d: \"M22.8633 32.6592C22.8633 31.8308 22.1917 31.1592 21.3633 31.1592C20.5349 31.1592 19.8633 31.8308 19.8633 32.6592C19.8633 33.4876 20.5349 34.1592 21.3633 34.1592C22.1917 34.1592 22.8633 33.4876 22.8633 32.6592Z\",\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    opacity: 0.3,\n    d: \"M27.8633 32.6592C27.8633 31.8308 27.1917 31.1592 26.3633 31.1592C25.5349 31.1592 24.8633 31.8308 24.8633 32.6592C24.8633 33.4876 25.5349 34.1592 26.3633 34.1592C27.1917 34.1592 27.8633 33.4876 27.8633 32.6592Z\",\n    fill: \"#4E5969\"\n  })), /* @__PURE__ */ react.exports.createElement(\"defs\", null, /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip0\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 0.863281,\n    y: 0.15918,\n    width: 40,\n    height: 40,\n    rx: 20,\n    fill: \"white\"\n  }))));\n}\nfunction SvgComponent$1N(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip0)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 21.4492,\n    y: 8.49658,\n    width: 29.484,\n    height: 7.37101,\n    fill: \"#165DFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 26.1357,\n    y: 21.2383,\n    width: 18.4275,\n    height: 2.84275,\n    rx: 1.42138,\n    fill: \"#BEDAFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 26.1357,\n    y: 30.4512,\n    width: 18.4275,\n    height: 2.84275,\n    rx: 1.42138,\n    fill: \"#BEDAFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M20.5268 -1.63966H50.9323C51.4411 -1.63966 51.8536 -1.22715 51.8536 -0.718283V49.036C51.8536 49.5449 51.4411 49.9574 50.9323 49.9574H20.5268V-1.63966Z\",\n    stroke: \"#4080FF\",\n    strokeWidth: 1.84275\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M-10.7993 -1.63966H20.5275V49.9574H-10.7993V-1.63966Z\",\n    fill: \"#E8F3FF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: -4.19238,\n    y: 13.5254,\n    width: 18.4275,\n    height: 2.84275,\n    rx: 1.42138,\n    fill: \"#94BFFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: -4.19238,\n    y: 4.81104,\n    width: 18.4275,\n    height: 2.84275,\n    rx: 1.42138,\n    fill: \"#94BFFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: -9.87695,\n    y: 22.4731,\n    width: 29.484,\n    height: 7.37101,\n    fill: \"#165DFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M-10.7993 -1.63966H20.5275V49.9574H-10.7993V-1.63966Z\",\n    stroke: \"#165DFF\",\n    strokeWidth: 1.84275\n  })), /* @__PURE__ */ react.exports.createElement(\"defs\", null, /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip0\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 0.863281,\n    y: 0.15918,\n    width: 40,\n    height: 40,\n    rx: 20,\n    fill: \"white\"\n  }))));\n}\nfunction SvgComponent$1M(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip0)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 21.4492,\n    y: 8.49658,\n    width: 29.484,\n    height: 7.37101,\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    opacity: 0.2,\n    x: 26.1357,\n    y: 21.2383,\n    width: 18.4275,\n    height: 2.84275,\n    rx: 1.42138,\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    opacity: 0.2,\n    x: 26.1357,\n    y: 30.4512,\n    width: 18.4275,\n    height: 2.84275,\n    rx: 1.42138,\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M20.5268 -1.63966H50.9323C51.4411 -1.63966 51.8536 -1.22715 51.8536 -0.718283V49.036C51.8536 49.5449 51.4411 49.9574 50.9323 49.9574H20.5268V-1.63966Z\",\n    stroke: \"#4E5969\",\n    strokeWidth: 1.84275\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M-10.7993 -1.63966H20.5275V49.9574H-10.7993V-1.63966Z\",\n    fill: \"#4E5969\",\n    fillOpacity: 0.1\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    opacity: 0.3,\n    x: -4.19238,\n    y: 13.5254,\n    width: 18.4275,\n    height: 2.84275,\n    rx: 1.42138,\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    opacity: 0.3,\n    x: -4.19238,\n    y: 4.81104,\n    width: 18.4275,\n    height: 2.84275,\n    rx: 1.42138,\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: -9.87695,\n    y: 22.4731,\n    width: 29.484,\n    height: 7.37101,\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M-10.7993 -1.63966H20.5275V49.9574H-10.7993V-1.63966Z\",\n    stroke: \"#4E5969\",\n    strokeWidth: 1.84275\n  })), /* @__PURE__ */ react.exports.createElement(\"defs\", null, /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip0\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 0.863281,\n    y: 0.15918,\n    width: 40,\n    height: 40,\n    rx: 20,\n    fill: \"white\"\n  }))));\n}\nfunction SvgComponent$1L(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 10.8633,\n    y: 10.5967,\n    width: 20,\n    height: 20,\n    rx: 2,\n    fill: \"#165DFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    fillRule: \"evenodd\",\n    clipRule: \"evenodd\",\n    d: \"M25.6262 15.5819C25.4191 15.3755 25.0799 15.39 24.8912 15.6133L19.168 22.3871L16.922 20.0416C16.728 19.8391 16.4054 19.8357 16.2072 20.0341L15.0489 21.1933C14.8568 21.3856 14.8535 21.6961 15.0415 21.8925L18.8236 25.8419C18.9622 25.9868 19.1667 26.0298 19.3444 25.97C19.4884 25.9721 19.6326 25.9124 19.7336 25.7928L20.4924 24.8947L21.0423 24.3443L20.9972 24.2972L26.8134 17.4134C26.9813 17.2146 26.9687 16.9203 26.7844 16.7366L25.6262 15.5819Z\",\n    fill: \"white\"\n  }));\n}\nfunction SvgComponent$1K(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 10.8633,\n    y: 10.5967,\n    width: 20,\n    height: 20,\n    rx: 2,\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    fillRule: \"evenodd\",\n    clipRule: \"evenodd\",\n    d: \"M25.6262 15.5819C25.4191 15.3755 25.0799 15.39 24.8912 15.6133L19.168 22.3871L16.922 20.0416C16.728 19.8391 16.4054 19.8357 16.2072 20.0341L15.0489 21.1933C14.8568 21.3856 14.8535 21.6961 15.0415 21.8925L18.8236 25.8419C18.9622 25.9868 19.1667 26.0298 19.3444 25.97C19.4884 25.9721 19.6326 25.9124 19.7336 25.7928L20.4924 24.8947L21.0423 24.3443L20.9972 24.2972L26.8134 17.4134C26.9813 17.2146 26.9687 16.9203 26.7844 16.7366L25.6262 15.5819Z\",\n    fill: \"white\"\n  }));\n}\nfunction SvgComponent$1J(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip0)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 11.7383,\n    y: 8.94043,\n    width: 71.25,\n    height: 53.4375,\n    rx: 1.48438,\n    fill: \"#165DFF\",\n    stroke: \"#165DFF\",\n    strokeWidth: 1.48438\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 11.7383,\n    y: 22.2998,\n    width: 71.25,\n    height: 13.3594,\n    rx: 1.48438,\n    fill: \"white\",\n    stroke: \"#165DFF\",\n    strokeWidth: 1.48438\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 29.5508,\n    y: 28.2373,\n    width: 20.7812,\n    height: 1.48438,\n    rx: 0.742188,\n    fill: \"#165DFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M25.7064 27.9751L24.0798 30.1439C23.9598 30.3039 23.7198 30.3039 23.5998 30.1439L21.9733 27.9751C21.825 27.7773 21.9661 27.4951 22.2133 27.4951L25.4664 27.4951C25.7136 27.4951 25.8547 27.7773 25.7064 27.9751Z\",\n    fill: \"#165DFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 11.7383,\n    y: 35.6592,\n    width: 71.25,\n    height: 13.3594,\n    rx: 1.48438,\n    fill: \"white\",\n    stroke: \"#165DFF\",\n    strokeWidth: 1.48438\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 23.6133,\n    y: 14.8779,\n    width: 26.7188,\n    height: 1.48438,\n    rx: 0.742188,\n    fill: \"white\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M19.7689 14.6157L18.1423 16.7845C18.0223 16.9445 17.7823 16.9445 17.6623 16.7845L16.0358 14.6157C15.8875 14.418 16.0286 14.1357 16.2758 14.1357L19.5289 14.1357C19.7761 14.1357 19.9172 14.418 19.7689 14.6157Z\",\n    fill: \"white\"\n  })), /* @__PURE__ */ react.exports.createElement(\"defs\", null, /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip0\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 0.863281,\n    y: 0.15918,\n    width: 40,\n    height: 40,\n    rx: 20,\n    fill: \"white\"\n  }))));\n}\nfunction SvgComponent$1I(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip0)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 11.7383,\n    y: 8.94043,\n    width: 71.25,\n    height: 53.4375,\n    rx: 1.48438,\n    fill: \"#4E5969\",\n    stroke: \"#4E5969\",\n    strokeWidth: 1.48438\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 11.7383,\n    y: 22.2998,\n    width: 71.25,\n    height: 13.3594,\n    rx: 1.48438,\n    fill: \"white\",\n    stroke: \"#4E5969\",\n    strokeWidth: 1.48438\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 29.5508,\n    y: 28.2373,\n    width: 20.7812,\n    height: 1.48438,\n    rx: 0.742188,\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M25.7064 27.9751L24.0798 30.1439C23.9598 30.3039 23.7198 30.3039 23.5998 30.1439L21.9733 27.9751C21.825 27.7773 21.9661 27.4951 22.2133 27.4951L25.4664 27.4951C25.7136 27.4951 25.8547 27.7773 25.7064 27.9751Z\",\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 11.7383,\n    y: 35.6592,\n    width: 71.25,\n    height: 13.3594,\n    rx: 1.48438,\n    fill: \"white\",\n    stroke: \"#4E5969\",\n    strokeWidth: 1.48438\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 23.6133,\n    y: 14.8779,\n    width: 26.7188,\n    height: 1.48438,\n    rx: 0.742188,\n    fill: \"white\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M19.7689 14.6157L18.1423 16.7845C18.0223 16.9445 17.7823 16.9445 17.6623 16.7845L16.0358 14.6157C15.8875 14.418 16.0286 14.1357 16.2758 14.1357L19.5289 14.1357C19.7761 14.1357 19.9172 14.418 19.7689 14.6157Z\",\n    fill: \"white\"\n  })), /* @__PURE__ */ react.exports.createElement(\"defs\", null, /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip0\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 0.863281,\n    y: 0.15918,\n    width: 40,\n    height: 40,\n    rx: 20,\n    fill: \"white\"\n  }))));\n}\nfunction SvgComponent$1H(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip0)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 7.61328,\n    y: 8.28418,\n    width: 7.5,\n    height: 7.5,\n    rx: 3.75,\n    fill: \"#165DFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 17.6133,\n    y: 8.28418,\n    width: 43.125,\n    height: 2.5,\n    rx: 1.25,\n    fill: \"#165DFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 17.6133,\n    y: 14.2842,\n    width: 43.125,\n    height: 20.8308,\n    rx: 1.25,\n    fill: \"#BEDAFF\"\n  })), /* @__PURE__ */ react.exports.createElement(\"defs\", null, /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip0\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 0.863281,\n    y: 0.15918,\n    width: 40,\n    height: 40,\n    rx: 20,\n    fill: \"white\"\n  }))));\n}\nfunction SvgComponent$1G(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip0)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 7.61328,\n    y: 8.28418,\n    width: 7.5,\n    height: 7.5,\n    rx: 3.75,\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 17.6133,\n    y: 8.28418,\n    width: 43.125,\n    height: 2.5,\n    rx: 1.25,\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    opacity: 0.2,\n    x: 17.6133,\n    y: 14.2842,\n    width: 43.125,\n    height: 20.8308,\n    rx: 1.25,\n    fill: \"#4E5969\"\n  })), /* @__PURE__ */ react.exports.createElement(\"defs\", null, /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip0\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 0.863281,\n    y: 0.15918,\n    width: 40,\n    height: 40,\n    rx: 20,\n    fill: \"white\"\n  }))));\n}\nfunction SvgComponent$1F(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"mask\", {\n    id: \"path-2-inside-1\",\n    fill: \"white\"\n  }, /* @__PURE__ */ react.exports.createElement(\"path\", {\n    fillRule: \"evenodd\",\n    clipRule: \"evenodd\",\n    d: \"M31.4244 8.33643C32.9121 8.33643 34.1182 9.54245 34.1182 11.0302V27.1926C34.1182 28.6803 32.9121 29.8863 31.4244 29.8863H27.7099V33.2016C27.7099 33.7912 27.0463 34.1367 26.5633 33.7986L20.9743 29.8863H10.2603C8.77258 29.8863 7.56656 28.6803 7.56656 27.1926V11.0302C7.56656 9.54245 8.77258 8.33643 10.2603 8.33643H31.4244Z\"\n  })), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    fillRule: \"evenodd\",\n    clipRule: \"evenodd\",\n    d: \"M31.4244 8.33643C32.9121 8.33643 34.1182 9.54245 34.1182 11.0302V27.1926C34.1182 28.6803 32.9121 29.8863 31.4244 29.8863H27.7099V33.2016C27.7099 33.7912 27.0463 34.1367 26.5633 33.7986L20.9743 29.8863H10.2603C8.77258 29.8863 7.56656 28.6803 7.56656 27.1926V11.0302C7.56656 9.54245 8.77258 8.33643 10.2603 8.33643H31.4244Z\",\n    fill: \"#E8F3FF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M27.7099 29.8863H26.2099V28.3863H27.7099V29.8863ZM26.5633 33.7986L27.4235 32.5698L27.4235 32.5698L26.5633 33.7986ZM20.9743 29.8863V28.3863H21.4471L21.8345 28.6575L20.9743 29.8863ZM32.6182 11.0302C32.6182 10.3709 32.0837 9.83643 31.4244 9.83643V6.83643C33.7406 6.83643 35.6182 8.71402 35.6182 11.0302H32.6182ZM32.6182 27.1926V11.0302H35.6182V27.1926H32.6182ZM31.4244 28.3863C32.0837 28.3863 32.6182 27.8519 32.6182 27.1926H35.6182C35.6182 29.5087 33.7406 31.3863 31.4244 31.3863V28.3863ZM27.7099 28.3863H31.4244V31.3863H27.7099V28.3863ZM29.2099 29.8863V33.2016H26.2099V29.8863H29.2099ZM29.2099 33.2016C29.2099 35.0047 27.1802 36.0615 25.7031 35.0274L27.4235 32.5698C26.9123 32.2119 26.2099 32.5776 26.2099 33.2016H29.2099ZM25.7031 35.0275L20.1141 31.1152L21.8345 28.6575L27.4235 32.5698L25.7031 35.0275ZM10.2603 28.3863H20.9743V31.3863H10.2603V28.3863ZM9.06656 27.1926C9.06656 27.8519 9.60101 28.3863 10.2603 28.3863V31.3863C7.94416 31.3863 6.06656 29.5087 6.06656 27.1926H9.06656ZM9.06656 11.0302V27.1926H6.06656V11.0302H9.06656ZM10.2603 9.83643C9.60101 9.83643 9.06656 10.3709 9.06656 11.0302H6.06656C6.06656 8.71403 7.94415 6.83643 10.2603 6.83643V9.83643ZM31.4244 9.83643H10.2603V6.83643H31.4244V9.83643Z\",\n    fill: \"#165DFF\",\n    mask: \"url(#path-2-inside-1)\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M15.8782 18.5584C16.1249 17.6948 16.3717 16.7526 16.5848 15.8441H16.6409C16.8764 16.7414 17.1008 17.6948 17.3587 18.5584L17.6055 19.4669H15.6314L15.8782 18.5584ZM13.0068 22.8879H14.6893L15.2725 20.7568H17.9644L18.5477 22.8879H20.2862L17.6167 14.5767H15.6651L13.0068 22.8879Z\",\n    fill: \"#165DFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M24.0008 23.0449C24.7186 23.0449 25.3467 22.686 25.8963 22.2149H25.9412L26.0533 22.8879H27.3993V19.2202C27.3993 17.4032 26.5805 16.4498 24.9878 16.4498C24.0008 16.4498 23.1035 16.8199 22.3632 17.2798L22.9576 18.3677C23.5409 18.0313 24.1017 17.7733 24.6849 17.7733C25.4589 17.7733 25.7281 18.2444 25.7617 18.8613C23.2268 19.1305 22.1389 19.8371 22.1389 21.183C22.1389 22.2486 22.8791 23.0449 24.0008 23.0449ZM24.5391 21.755C24.0568 21.755 23.7091 21.5419 23.7091 21.0484C23.7091 20.4876 24.2251 20.0614 25.7617 19.8707V21.1382C25.3579 21.5307 25.0102 21.755 24.5391 21.755Z\",\n    fill: \"#165DFF\"\n  }));\n}\nfunction SvgComponent$1E(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"mask\", {\n    id: \"path-2-inside-1\",\n    fill: \"white\"\n  }, /* @__PURE__ */ react.exports.createElement(\"path\", {\n    fillRule: \"evenodd\",\n    clipRule: \"evenodd\",\n    d: \"M31.4244 8.33643C32.9121 8.33643 34.1182 9.54245 34.1182 11.0302V27.1926C34.1182 28.6803 32.9121 29.8863 31.4244 29.8863H27.7099V33.2016C27.7099 33.7912 27.0463 34.1367 26.5633 33.7986L20.9743 29.8863H10.2603C8.77258 29.8863 7.56656 28.6803 7.56656 27.1926V11.0302C7.56656 9.54245 8.77258 8.33643 10.2603 8.33643H31.4244Z\"\n  })), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    fillRule: \"evenodd\",\n    clipRule: \"evenodd\",\n    d: \"M31.4244 8.33643C32.9121 8.33643 34.1182 9.54245 34.1182 11.0302V27.1926C34.1182 28.6803 32.9121 29.8863 31.4244 29.8863H27.7099V33.2016C27.7099 33.7912 27.0463 34.1367 26.5633 33.7986L20.9743 29.8863H10.2603C8.77258 29.8863 7.56656 28.6803 7.56656 27.1926V11.0302C7.56656 9.54245 8.77258 8.33643 10.2603 8.33643H31.4244Z\",\n    fill: \"#4E5969\",\n    fillOpacity: 0.1\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M27.7099 29.8863H26.2099V28.3863H27.7099V29.8863ZM26.5633 33.7986L27.4235 32.5698L27.4235 32.5698L26.5633 33.7986ZM20.9743 29.8863V28.3863H21.4471L21.8345 28.6575L20.9743 29.8863ZM32.6182 11.0302C32.6182 10.3709 32.0837 9.83643 31.4244 9.83643V6.83643C33.7406 6.83643 35.6182 8.71402 35.6182 11.0302H32.6182ZM32.6182 27.1926V11.0302H35.6182V27.1926H32.6182ZM31.4244 28.3863C32.0837 28.3863 32.6182 27.8519 32.6182 27.1926H35.6182C35.6182 29.5087 33.7406 31.3863 31.4244 31.3863V28.3863ZM27.7099 28.3863H31.4244V31.3863H27.7099V28.3863ZM29.2099 29.8863V33.2016H26.2099V29.8863H29.2099ZM29.2099 33.2016C29.2099 35.0047 27.1802 36.0615 25.7031 35.0274L27.4235 32.5698C26.9123 32.2119 26.2099 32.5776 26.2099 33.2016H29.2099ZM25.7031 35.0275L20.1141 31.1152L21.8345 28.6575L27.4235 32.5698L25.7031 35.0275ZM10.2603 28.3863H20.9743V31.3863H10.2603V28.3863ZM9.06656 27.1926C9.06656 27.8519 9.60101 28.3863 10.2603 28.3863V31.3863C7.94416 31.3863 6.06656 29.5087 6.06656 27.1926H9.06656ZM9.06656 11.0302V27.1926H6.06656V11.0302H9.06656ZM10.2603 9.83643C9.60101 9.83643 9.06656 10.3709 9.06656 11.0302H6.06656C6.06656 8.71403 7.94415 6.83643 10.2603 6.83643V9.83643ZM31.4244 9.83643H10.2603V6.83643H31.4244V9.83643Z\",\n    fill: \"#4E5969\",\n    mask: \"url(#path-2-inside-1)\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M15.8782 18.5584C16.1249 17.6948 16.3717 16.7526 16.5848 15.8441H16.6409C16.8764 16.7414 17.1008 17.6948 17.3587 18.5584L17.6055 19.4669H15.6314L15.8782 18.5584ZM13.0068 22.8879H14.6893L15.2725 20.7568H17.9644L18.5477 22.8879H20.2862L17.6167 14.5767H15.6651L13.0068 22.8879Z\",\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M24.0008 23.0449C24.7186 23.0449 25.3467 22.686 25.8963 22.2149H25.9412L26.0533 22.8879H27.3993V19.2202C27.3993 17.4032 26.5805 16.4498 24.9878 16.4498C24.0008 16.4498 23.1035 16.8199 22.3632 17.2798L22.9576 18.3677C23.5409 18.0313 24.1017 17.7733 24.6849 17.7733C25.4589 17.7733 25.7281 18.2444 25.7617 18.8613C23.2268 19.1305 22.1389 19.8371 22.1389 21.183C22.1389 22.2486 22.8791 23.0449 24.0008 23.0449ZM24.5391 21.755C24.0568 21.755 23.7091 21.5419 23.7091 21.0484C23.7091 20.4876 24.2251 20.0614 25.7617 19.8707V21.1382C25.3579 21.5307 25.0102 21.755 24.5391 21.755Z\",\n    fill: \"#4E5969\"\n  }));\n}\nfunction SvgComponent$1D(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip0)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip1)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 9.30078,\n    y: 11.5654,\n    width: 52.8047,\n    height: 17.0625,\n    rx: 1,\n    fill: \"#E8F3FF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 9.30078,\n    y: 11.5654,\n    width: 52.8047,\n    height: 17.0625,\n    rx: 1,\n    stroke: \"#165DFF\",\n    strokeWidth: 2\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M17.9979 22.2269V22.956H14.0348V22.2955L16.1193 20.0138C16.3881 19.7221 16.5825 19.4562 16.7026 19.216C16.8227 18.9758 16.8828 18.7385 16.8828 18.504C16.8828 18.1952 16.7941 17.9607 16.6169 17.8006C16.4396 17.6405 16.1851 17.5604 15.8534 17.5604C15.2873 17.5604 14.7268 17.7806 14.1721 18.2209L13.8633 17.569C14.1035 17.346 14.4066 17.1687 14.7726 17.0371C15.1386 16.9056 15.5074 16.8398 15.8791 16.8398C16.4567 16.8398 16.9142 16.9857 17.2516 17.2773C17.589 17.5633 17.7578 17.9521 17.7578 18.444C17.7578 18.7928 17.6805 19.1245 17.5261 19.439C17.3775 19.7535 17.1258 20.1053 16.7713 20.4941L15.15 22.2269H17.9979Z\",\n    fill: \"#165DFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M21.0656 23.0247C20.3621 23.0247 19.8246 22.7616 19.4529 22.2355C19.0869 21.7094 18.9039 20.943 18.9039 19.9365C18.9039 18.93 19.0869 18.1637 19.4529 17.6376C19.8246 17.1058 20.3621 16.8398 21.0656 16.8398C21.769 16.8398 22.3037 17.1029 22.6697 17.629C23.0414 18.1552 23.2272 18.9215 23.2272 19.928C23.2272 20.9402 23.0414 21.7094 22.6697 22.2355C22.3037 22.7616 21.769 23.0247 21.0656 23.0247ZM21.0656 22.3127C21.5059 22.3127 21.829 22.1211 22.0349 21.738C22.2408 21.3548 22.3437 20.7515 22.3437 19.928C22.3437 19.1102 22.2408 18.5126 22.0349 18.1351C21.829 17.752 21.5059 17.5604 21.0656 17.5604C20.6252 17.5604 20.3021 17.752 20.0962 18.1351C19.8904 18.5126 19.7874 19.1102 19.7874 19.928C19.7874 20.7458 19.8904 21.3491 20.0962 21.738C20.3021 22.1211 20.6252 22.3127 21.0656 22.3127Z\",\n    fill: \"#165DFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M28.285 22.2269V22.956H24.3219V22.2955L26.4064 20.0138C26.6752 19.7221 26.8696 19.4562 26.9897 19.216C27.1098 18.9758 27.1698 18.7385 27.1698 18.504C27.1698 18.1952 27.0812 17.9607 26.9039 17.8006C26.7266 17.6405 26.4721 17.5604 26.1405 17.5604C25.5743 17.5604 25.0139 17.7806 24.4591 18.2209L24.1503 17.569C24.3905 17.346 24.6936 17.1687 25.0596 17.0371C25.4256 16.9056 25.7945 16.8398 26.1662 16.8398C26.7438 16.8398 27.2013 16.9857 27.5387 17.2773C27.8761 17.5633 28.0448 17.9521 28.0448 18.444C28.0448 18.7928 27.9676 19.1245 27.8132 19.439C27.6645 19.7535 27.4129 20.1053 27.0583 20.4941L25.437 22.2269H28.285Z\",\n    fill: \"#165DFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M31.3526 23.0247C30.6492 23.0247 30.1116 22.7616 29.7399 22.2355C29.3739 21.7094 29.1909 20.943 29.1909 19.9365C29.1909 18.93 29.3739 18.1637 29.7399 17.6376C30.1116 17.1058 30.6492 16.8398 31.3526 16.8398C32.056 16.8398 32.5907 17.1029 32.9567 17.629C33.3284 18.1552 33.5143 18.9215 33.5143 19.928C33.5143 20.9402 33.3284 21.7094 32.9567 22.2355C32.5907 22.7616 32.056 23.0247 31.3526 23.0247ZM31.3526 22.3127C31.7929 22.3127 32.1161 22.1211 32.3219 21.738C32.5278 21.3548 32.6307 20.7515 32.6307 19.928C32.6307 19.1102 32.5278 18.5126 32.3219 18.1351C32.1161 17.752 31.7929 17.5604 31.3526 17.5604C30.9123 17.5604 30.5892 17.752 30.3833 18.1351C30.1774 18.5126 30.0745 19.1102 30.0745 19.928C30.0745 20.7458 30.1774 21.3491 30.3833 21.738C30.5892 22.1211 30.9123 22.3127 31.3526 22.3127Z\",\n    fill: \"#165DFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M34.5232 20.3226H37.0022V21.0174H34.5232V20.3226Z\",\n    fill: \"#165DFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M41.1895 22.2269V22.956H37.6553V22.2269H38.9764V17.9636L37.9213 18.6069L37.5438 17.9464L39.2251 16.9085H39.8599V22.2269H41.1895Z\",\n    fill: \"#165DFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M46.333 22.2269V22.956H42.7989V22.2269H44.1199V17.9636L43.0648 18.6069L42.6873 17.9464L44.3687 16.9085H45.0034V22.2269H46.333Z\",\n    fill: \"#165DFF\"\n  }))), /* @__PURE__ */ react.exports.createElement(\"defs\", null, /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip0\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 0.863281,\n    y: 0.59668,\n    width: 40,\n    height: 40,\n    rx: 20,\n    fill: \"white\"\n  })), /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip1\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    width: 61,\n    height: 61,\n    fill: \"white\",\n    transform: \"translate(-4.13672 -10.4033)\"\n  }))));\n}\nfunction SvgComponent$1C(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip0)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip1)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 9.30078,\n    y: 11.5654,\n    width: 52.8047,\n    height: 17.0625,\n    rx: 1,\n    fill: \"#4E5969\",\n    fillOpacity: 0.1\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 9.30078,\n    y: 11.5654,\n    width: 52.8047,\n    height: 17.0625,\n    rx: 1,\n    stroke: \"#4E5969\",\n    strokeWidth: 2\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M17.9979 22.2269V22.956H14.0348V22.2955L16.1193 20.0138C16.3881 19.7221 16.5825 19.4562 16.7026 19.216C16.8227 18.9758 16.8828 18.7385 16.8828 18.504C16.8828 18.1952 16.7941 17.9607 16.6169 17.8006C16.4396 17.6405 16.1851 17.5604 15.8534 17.5604C15.2873 17.5604 14.7268 17.7806 14.1721 18.2209L13.8633 17.569C14.1035 17.346 14.4066 17.1687 14.7726 17.0371C15.1386 16.9056 15.5074 16.8398 15.8791 16.8398C16.4567 16.8398 16.9142 16.9857 17.2516 17.2773C17.589 17.5633 17.7578 17.9521 17.7578 18.444C17.7578 18.7928 17.6805 19.1245 17.5261 19.439C17.3775 19.7535 17.1258 20.1053 16.7713 20.4941L15.15 22.2269H17.9979Z\",\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M21.0656 23.0247C20.3621 23.0247 19.8246 22.7616 19.4529 22.2355C19.0869 21.7094 18.9039 20.943 18.9039 19.9365C18.9039 18.93 19.0869 18.1637 19.4529 17.6376C19.8246 17.1058 20.3621 16.8398 21.0656 16.8398C21.769 16.8398 22.3037 17.1029 22.6697 17.629C23.0414 18.1552 23.2272 18.9215 23.2272 19.928C23.2272 20.9402 23.0414 21.7094 22.6697 22.2355C22.3037 22.7616 21.769 23.0247 21.0656 23.0247ZM21.0656 22.3127C21.5059 22.3127 21.829 22.1211 22.0349 21.738C22.2408 21.3548 22.3437 20.7515 22.3437 19.928C22.3437 19.1102 22.2408 18.5126 22.0349 18.1351C21.829 17.752 21.5059 17.5604 21.0656 17.5604C20.6252 17.5604 20.3021 17.752 20.0962 18.1351C19.8904 18.5126 19.7874 19.1102 19.7874 19.928C19.7874 20.7458 19.8904 21.3491 20.0962 21.738C20.3021 22.1211 20.6252 22.3127 21.0656 22.3127Z\",\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M28.285 22.2269V22.956H24.3219V22.2955L26.4064 20.0138C26.6752 19.7221 26.8696 19.4562 26.9897 19.216C27.1098 18.9758 27.1698 18.7385 27.1698 18.504C27.1698 18.1952 27.0812 17.9607 26.9039 17.8006C26.7266 17.6405 26.4721 17.5604 26.1405 17.5604C25.5743 17.5604 25.0139 17.7806 24.4591 18.2209L24.1503 17.569C24.3905 17.346 24.6936 17.1687 25.0596 17.0371C25.4256 16.9056 25.7945 16.8398 26.1662 16.8398C26.7438 16.8398 27.2013 16.9857 27.5387 17.2773C27.8761 17.5633 28.0448 17.9521 28.0448 18.444C28.0448 18.7928 27.9676 19.1245 27.8132 19.439C27.6645 19.7535 27.4129 20.1053 27.0583 20.4941L25.437 22.2269H28.285Z\",\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M31.3526 23.0247C30.6492 23.0247 30.1116 22.7616 29.7399 22.2355C29.3739 21.7094 29.1909 20.943 29.1909 19.9365C29.1909 18.93 29.3739 18.1637 29.7399 17.6376C30.1116 17.1058 30.6492 16.8398 31.3526 16.8398C32.056 16.8398 32.5907 17.1029 32.9567 17.629C33.3284 18.1552 33.5143 18.9215 33.5143 19.928C33.5143 20.9402 33.3284 21.7094 32.9567 22.2355C32.5907 22.7616 32.056 23.0247 31.3526 23.0247ZM31.3526 22.3127C31.7929 22.3127 32.1161 22.1211 32.3219 21.738C32.5278 21.3548 32.6307 20.7515 32.6307 19.928C32.6307 19.1102 32.5278 18.5126 32.3219 18.1351C32.1161 17.752 31.7929 17.5604 31.3526 17.5604C30.9123 17.5604 30.5892 17.752 30.3833 18.1351C30.1774 18.5126 30.0745 19.1102 30.0745 19.928C30.0745 20.7458 30.1774 21.3491 30.3833 21.738C30.5892 22.1211 30.9123 22.3127 31.3526 22.3127Z\",\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M34.5232 20.3226H37.0022V21.0174H34.5232V20.3226Z\",\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M41.1895 22.2269V22.956H37.6553V22.2269H38.9764V17.9636L37.9213 18.6069L37.5438 17.9464L39.2251 16.9085H39.8599V22.2269H41.1895Z\",\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M46.333 22.2269V22.956H42.7989V22.2269H44.1199V17.9636L43.0648 18.6069L42.6873 17.9464L44.3687 16.9085H45.0034V22.2269H46.333Z\",\n    fill: \"#4E5969\"\n  }))), /* @__PURE__ */ react.exports.createElement(\"defs\", null, /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip0\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 0.863281,\n    y: 0.59668,\n    width: 40,\n    height: 40,\n    rx: 20,\n    fill: \"white\"\n  })), /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip1\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    width: 61,\n    height: 61,\n    fill: \"white\",\n    transform: \"translate(-4.13672 -10.4033)\"\n  }))));\n}\nfunction SvgComponent$1B(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip0)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 9.92578,\n    y: 8.59668,\n    width: 11.25,\n    height: 2.40625,\n    rx: 1,\n    fill: \"#165DFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 9.92578,\n    y: 13.2217,\n    width: 14.0625,\n    height: 5.40625,\n    rx: 1,\n    fill: \"#BEDAFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 9.92578,\n    y: 25.4717,\n    width: 11.25,\n    height: 2.40625,\n    rx: 1,\n    fill: \"#165DFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 9.92578,\n    y: 30.0967,\n    width: 16.875,\n    height: 5.40625,\n    rx: 1,\n    fill: \"#BEDAFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 32.4258,\n    y: 8.59668,\n    width: 11.25,\n    height: 2.40625,\n    rx: 1,\n    fill: \"#165DFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 32.4258,\n    y: 13.2217,\n    width: 14.7656,\n    height: 5.40625,\n    rx: 1,\n    fill: \"#BEDAFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 32.4258,\n    y: 25.4717,\n    width: 11.25,\n    height: 2.40625,\n    rx: 1,\n    fill: \"#165DFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 32.4258,\n    y: 30.0967,\n    width: 14.7656,\n    height: 5.40625,\n    rx: 1,\n    fill: \"#BEDAFF\"\n  })), /* @__PURE__ */ react.exports.createElement(\"defs\", null, /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip0\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 0.863281,\n    y: 0.59668,\n    width: 40,\n    height: 40,\n    rx: 20,\n    fill: \"white\"\n  }))));\n}\nfunction SvgComponent$1A(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip0)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 9.92578,\n    y: 8.59668,\n    width: 11.25,\n    height: 2.40625,\n    rx: 1,\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    opacity: 0.2,\n    x: 9.92578,\n    y: 13.2217,\n    width: 14.0625,\n    height: 5.40625,\n    rx: 1,\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 9.92578,\n    y: 25.4717,\n    width: 11.25,\n    height: 2.40625,\n    rx: 1,\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    opacity: 0.2,\n    x: 9.92578,\n    y: 30.0967,\n    width: 16.875,\n    height: 5.40625,\n    rx: 1,\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 32.4258,\n    y: 8.59668,\n    width: 11.25,\n    height: 2.40625,\n    rx: 1,\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    opacity: 0.2,\n    x: 32.4258,\n    y: 13.2217,\n    width: 14.7656,\n    height: 5.40625,\n    rx: 1,\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 32.4258,\n    y: 25.4717,\n    width: 11.25,\n    height: 2.40625,\n    rx: 1,\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    opacity: 0.2,\n    x: 32.4258,\n    y: 30.0967,\n    width: 14.7656,\n    height: 5.40625,\n    rx: 1,\n    fill: \"#4E5969\"\n  })), /* @__PURE__ */ react.exports.createElement(\"defs\", null, /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip0\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 0.863281,\n    y: 0.59668,\n    width: 40,\n    height: 40,\n    rx: 20,\n    fill: \"white\"\n  }))));\n}\nfunction SvgComponent$1z(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip0)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 12.8633,\n    y: -11.8408,\n    width: 64,\n    height: 24,\n    rx: 1,\n    fill: \"#165DFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 12.8633,\n    y: 28.1592,\n    width: 64,\n    height: 24,\n    rx: 1,\n    fill: \"#BEDAFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M12.8633 20.1592H76.8633\",\n    stroke: \"#165DFF\",\n    strokeWidth: 2\n  })), /* @__PURE__ */ react.exports.createElement(\"defs\", null, /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip0\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 0.863281,\n    y: 0.15918,\n    width: 40,\n    height: 40,\n    rx: 20,\n    fill: \"white\"\n  }))));\n}\nfunction SvgComponent$1y(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip0)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 12.8633,\n    y: -11.8408,\n    width: 64,\n    height: 24,\n    rx: 1,\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    opacity: 0.2,\n    x: 12.8633,\n    y: 28.1592,\n    width: 64,\n    height: 24,\n    rx: 1,\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M12.8633 20.1592H76.8633\",\n    stroke: \"#4E5969\",\n    strokeWidth: 2\n  })), /* @__PURE__ */ react.exports.createElement(\"defs\", null, /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip0\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 0.863281,\n    y: 0.15918,\n    width: 40,\n    height: 40,\n    rx: 20,\n    fill: \"white\"\n  }))));\n}\nfunction SvgComponent$1x(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip0)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 20.8623,\n    y: -3.53467,\n    width: 33.8485,\n    height: 47.3878,\n    fill: \"#BEDAFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M8.30843 19.4521C7.9179 19.8426 7.9179 20.4758 8.30843 20.8663L14.6724 27.2302C15.0629 27.6208 15.6961 27.6208 16.0866 27.2302C16.4771 26.8397 16.4771 26.2066 16.0866 25.816L10.4297 20.1592L16.0866 14.5023C16.4771 14.1118 16.4771 13.4786 16.0866 13.0881C15.6961 12.6976 15.0629 12.6976 14.6724 13.0881L8.30843 19.4521ZM33.5557 19.1592L9.01554 19.1592V21.1592L33.5557 21.1592V19.1592Z\",\n    fill: \"#165DFF\"\n  })), /* @__PURE__ */ react.exports.createElement(\"defs\", null, /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip0\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 0.863281,\n    y: 0.15918,\n    width: 40,\n    height: 40,\n    rx: 20,\n    fill: \"white\"\n  }))));\n}\nfunction SvgComponent$1w(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip0)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    opacity: 0.3,\n    x: 20.8623,\n    y: -3.53467,\n    width: 33.8485,\n    height: 47.3878,\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M8.30843 19.4521C7.9179 19.8426 7.9179 20.4758 8.30843 20.8663L14.6724 27.2302C15.0629 27.6208 15.6961 27.6208 16.0866 27.2302C16.4771 26.8397 16.4771 26.2066 16.0866 25.816L10.4297 20.1592L16.0866 14.5023C16.4771 14.1118 16.4771 13.4786 16.0866 13.0881C15.6961 12.6976 15.0629 12.6976 14.6724 13.0881L8.30843 19.4521ZM33.5557 19.1592L9.01554 19.1592V21.1592L33.5557 21.1592V19.1592Z\",\n    fill: \"#4E5969\"\n  })), /* @__PURE__ */ react.exports.createElement(\"defs\", null, /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip0\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 0.863281,\n    y: 0.15918,\n    width: 40,\n    height: 40,\n    rx: 20,\n    fill: \"white\"\n  }))));\n}\nfunction SvgComponent$1v(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip0)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M-23.1367 31.3855C-23.1367 30.5356 -22.4478 29.8467 -21.5979 29.8467H29.3245C30.1743 29.8467 30.8633 30.5356 30.8633 31.3855V74.0579C30.8633 74.9077 30.1743 75.5967 29.3245 75.5967H-21.5979C-22.4478 75.5967 -23.1367 74.9077 -23.1367 74.0579V31.3855Z\",\n    fill: \"#E8F3FF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    fillRule: \"evenodd\",\n    clipRule: \"evenodd\",\n    d: \"M29.3245 31.3855L-21.5979 31.3855L-21.5979 74.0579H29.3245V31.3855ZM-21.5979 29.8467C-22.4478 29.8467 -23.1367 30.5356 -23.1367 31.3855V74.0579C-23.1367 74.9077 -22.4478 75.5967 -21.5979 75.5967H29.3245C30.1743 75.5967 30.8633 74.9077 30.8633 74.0579V31.3855C30.8633 30.5356 30.1743 29.8467 29.3245 29.8467H-21.5979Z\",\n    fill: \"#165DFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: -14.6367,\n    y: 35.5967,\n    width: 38,\n    height: 1.5,\n    rx: 0.75,\n    fill: \"#165DFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M-23.1367 9.38547C-23.1367 8.53562 -22.4478 7.84668 -21.5979 7.84668H29.3245C30.1743 7.84668 30.8633 8.53562 30.8633 9.38547V24.3079C30.8633 25.1577 30.1743 25.8467 29.3245 25.8467H-21.5979C-22.4478 25.8467 -23.1367 25.1577 -23.1367 24.3079V9.38547Z\",\n    fill: \"#E8F3FF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    fillRule: \"evenodd\",\n    clipRule: \"evenodd\",\n    d: \"M29.3245 9.38547H-21.5979L-21.5979 24.3079H29.3245V9.38547ZM-21.5979 7.84668C-22.4478 7.84668 -23.1367 8.53562 -23.1367 9.38547V24.3079C-23.1367 25.1577 -22.4478 25.8467 -21.5979 25.8467H29.3245C30.1743 25.8467 30.8633 25.1577 30.8633 24.3079V9.38547C30.8633 8.53562 30.1743 7.84668 29.3245 7.84668H-21.5979Z\",\n    fill: \"#165DFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M27.8633 11.8855C27.8633 11.0356 27.1743 10.3467 26.3245 10.3467L17.4021 10.3467C16.5522 10.3467 15.8633 11.0356 15.8633 11.8855L15.8633 20.8079C15.8633 21.6577 16.5522 22.3467 17.4021 22.3467L26.3245 22.3467C27.1743 22.3467 27.8633 21.6577 27.8633 20.8079L27.8633 11.8855Z\",\n    fill: \"#E8F3FF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M24.6416 18.3378C24.4463 18.533 24.1298 18.533 23.9345 18.3378L21.7544 16.1577L19.6368 18.2753C19.4416 18.4705 19.125 18.4705 18.9297 18.2753L18.5762 17.9217C18.3809 17.7265 18.3809 17.4099 18.5762 17.2146L21.4046 14.3862C21.5999 14.1909 21.9165 14.1909 22.1117 14.3862L22.4653 14.7397C22.4828 14.7573 22.4987 14.7758 22.5131 14.7951L24.9952 17.2771C25.1904 17.4724 25.1904 17.7889 24.9952 17.9842L24.6416 18.3378Z\",\n    fill: \"#165DFF\"\n  })), /* @__PURE__ */ react.exports.createElement(\"defs\", null, /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip0\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 0.863281,\n    y: 0.59668,\n    width: 40,\n    height: 40,\n    rx: 20,\n    fill: \"white\"\n  }))));\n}\nfunction SvgComponent$1u(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip0)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M-23.1367 31.3855C-23.1367 30.5356 -22.4478 29.8467 -21.5979 29.8467H29.3245C30.1743 29.8467 30.8633 30.5356 30.8633 31.3855V74.0579C30.8633 74.9077 30.1743 75.5967 29.3245 75.5967H-21.5979C-22.4478 75.5967 -23.1367 74.9077 -23.1367 74.0579V31.3855Z\",\n    fill: \"#4E5969\",\n    fillOpacity: 0.1\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    fillRule: \"evenodd\",\n    clipRule: \"evenodd\",\n    d: \"M29.3245 31.3855L-21.5979 31.3855L-21.5979 74.0579H29.3245V31.3855ZM-21.5979 29.8467C-22.4478 29.8467 -23.1367 30.5356 -23.1367 31.3855V74.0579C-23.1367 74.9077 -22.4478 75.5967 -21.5979 75.5967H29.3245C30.1743 75.5967 30.8633 74.9077 30.8633 74.0579V31.3855C30.8633 30.5356 30.1743 29.8467 29.3245 29.8467H-21.5979Z\",\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: -14.6367,\n    y: 35.5967,\n    width: 38,\n    height: 1.5,\n    rx: 0.75,\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M-22.1367 9.38547C-22.1367 9.08791 -21.8955 8.84668 -21.5979 8.84668H29.3245C29.6221 8.84668 29.8633 9.0879 29.8633 9.38547V24.3079C29.8633 24.6055 29.6221 24.8467 29.3245 24.8467H-21.5979C-21.8955 24.8467 -22.1367 24.6055 -22.1367 24.3079V9.38547Z\",\n    fill: \"#4E5969\",\n    fillOpacity: 0.1,\n    stroke: \"#4E5969\",\n    strokeWidth: 2\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    fillRule: \"evenodd\",\n    clipRule: \"evenodd\",\n    d: \"M29.3245 9.38547H-21.5979L-21.5979 24.3079H29.3245V9.38547ZM-21.5979 7.84668C-22.4478 7.84668 -23.1367 8.53562 -23.1367 9.38547V24.3079C-23.1367 25.1577 -22.4478 25.8467 -21.5979 25.8467H29.3245C30.1743 25.8467 30.8633 25.1577 30.8633 24.3079V9.38547C30.8633 8.53562 30.1743 7.84668 29.3245 7.84668H-21.5979Z\",\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M24.6416 18.3378C24.4463 18.533 24.1298 18.533 23.9345 18.3378L21.7544 16.1577L19.6368 18.2753C19.4416 18.4705 19.125 18.4705 18.9297 18.2753L18.5762 17.9217C18.3809 17.7265 18.3809 17.4099 18.5762 17.2146L21.4046 14.3862C21.5999 14.1909 21.9165 14.1909 22.1117 14.3862L22.4653 14.7397C22.4828 14.7573 22.4987 14.7758 22.5131 14.7951L24.9952 17.2771C25.1904 17.4724 25.1904 17.7889 24.9952 17.9842L24.6416 18.3378Z\",\n    fill: \"#4E5969\"\n  })), /* @__PURE__ */ react.exports.createElement(\"defs\", null, /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip0\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 0.863281,\n    y: 0.59668,\n    width: 40,\n    height: 40,\n    rx: 20,\n    fill: \"white\"\n  }))));\n}\nfunction SvgComponent$1t(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip0)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 9.98828,\n    y: 9.28418,\n    width: 21.75,\n    height: 21.75,\n    rx: 2,\n    fill: \"#E8F3FF\",\n    stroke: \"#165DFF\",\n    strokeWidth: 1.5,\n    strokeDasharray: \"2.84 2.84\"\n  })), /* @__PURE__ */ react.exports.createElement(\"defs\", null, /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip0\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 0.863281,\n    y: 0.15918,\n    width: 40,\n    height: 40,\n    rx: 20,\n    fill: \"white\"\n  }))));\n}\nfunction SvgComponent$1s(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip0)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 9.98828,\n    y: 9.28418,\n    width: 21.75,\n    height: 21.75,\n    rx: 2,\n    fill: \"#4E5969\",\n    fillOpacity: 0.2,\n    stroke: \"#4E5969\",\n    strokeWidth: 1.5,\n    strokeDasharray: \"2.84 2.84\"\n  })), /* @__PURE__ */ react.exports.createElement(\"defs\", null, /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip0\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 0.863281,\n    y: 0.15918,\n    width: 40,\n    height: 40,\n    rx: 20,\n    fill: \"white\"\n  }))));\n}\nfunction SvgComponent$1r(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip0)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip1)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M9.80078 8.99973C9.80078 8.14988 10.4897 7.46094 11.3396 7.46094H51.658C52.5078 7.46094 53.1968 8.14988 53.1968 8.99973V12.803C53.1968 13.6529 52.5078 14.3418 51.658 14.3418H11.3396C10.4897 14.3418 9.80078 13.6529 9.80078 12.803V8.99973Z\",\n    fill: \"#E8F3FF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    fillRule: \"evenodd\",\n    clipRule: \"evenodd\",\n    d: \"M51.658 8.99973H11.3396L11.3396 12.803H51.658V8.99973ZM11.3396 7.46094C10.4897 7.46094 9.80078 8.14988 9.80078 8.99973V12.803C9.80078 13.6529 10.4897 14.3418 11.3396 14.3418H51.658C52.5078 14.3418 53.1968 13.6529 53.1968 12.803V8.99973C53.1968 8.14988 52.5078 7.46094 51.658 7.46094H11.3396Z\",\n    fill: \"#165DFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M9.80078 19.8806C9.80078 19.0307 10.4897 18.3418 11.3396 18.3418H51.658C52.5078 18.3418 53.1968 19.0307 53.1968 19.8806V23.6839C53.1968 24.5337 52.5078 25.2227 51.658 25.2227H11.3396C10.4897 25.2227 9.80078 24.5337 9.80078 23.6839V19.8806Z\",\n    fill: \"#E8F3FF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    fillRule: \"evenodd\",\n    clipRule: \"evenodd\",\n    d: \"M51.658 19.8806H11.3396L11.3396 23.6839H51.658V19.8806ZM11.3396 18.3418C10.4897 18.3418 9.80078 19.0307 9.80078 19.8806V23.6839C9.80078 24.5337 10.4897 25.2227 11.3396 25.2227H51.658C52.5078 25.2227 53.1968 24.5337 53.1968 23.6839V19.8806C53.1968 19.0307 52.5078 18.3418 51.658 18.3418H11.3396Z\",\n    fill: \"#165DFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 9.80078,\n    y: 29.2227,\n    width: 13.8867,\n    height: 5.56641,\n    rx: 0.5,\n    fill: \"#165DFF\"\n  }))), /* @__PURE__ */ react.exports.createElement(\"defs\", null, /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip0\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 0.863281,\n    y: 0.59668,\n    width: 40,\n    height: 40,\n    rx: 20,\n    fill: \"white\"\n  })), /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip1\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    width: 45,\n    height: 29,\n    fill: \"white\",\n    transform: \"translate(8.86328 6.59668)\"\n  }))));\n}\nfunction SvgComponent$1q(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip0)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip1)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"path\", {\n    opacity: 0.1,\n    d: \"M9.80078 8.99973C9.80078 8.14988 10.4897 7.46094 11.3396 7.46094H51.658C52.5078 7.46094 53.1968 8.14988 53.1968 8.99973V12.803C53.1968 13.6529 52.5078 14.3418 51.658 14.3418H11.3396C10.4897 14.3418 9.80078 13.6529 9.80078 12.803V8.99973Z\",\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    fillRule: \"evenodd\",\n    clipRule: \"evenodd\",\n    d: \"M51.658 8.99973H11.3396L11.3396 12.803H51.658V8.99973ZM11.3396 7.46094C10.4897 7.46094 9.80078 8.14988 9.80078 8.99973V12.803C9.80078 13.6529 10.4897 14.3418 11.3396 14.3418H51.658C52.5078 14.3418 53.1968 13.6529 53.1968 12.803V8.99973C53.1968 8.14988 52.5078 7.46094 51.658 7.46094H11.3396Z\",\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    opacity: 0.1,\n    d: \"M9.80078 19.8806C9.80078 19.0307 10.4897 18.3418 11.3396 18.3418H51.658C52.5078 18.3418 53.1968 19.0307 53.1968 19.8806V23.6839C53.1968 24.5337 52.5078 25.2227 51.658 25.2227H11.3396C10.4897 25.2227 9.80078 24.5337 9.80078 23.6839V19.8806Z\",\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    fillRule: \"evenodd\",\n    clipRule: \"evenodd\",\n    d: \"M51.658 19.8806H11.3396L11.3396 23.6839H51.658V19.8806ZM11.3396 18.3418C10.4897 18.3418 9.80078 19.0307 9.80078 19.8806V23.6839C9.80078 24.5337 10.4897 25.2227 11.3396 25.2227H51.658C52.5078 25.2227 53.1968 24.5337 53.1968 23.6839V19.8806C53.1968 19.0307 52.5078 18.3418 51.658 18.3418H11.3396Z\",\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 9.80078,\n    y: 29.2227,\n    width: 13.8867,\n    height: 5.56641,\n    rx: 0.5,\n    fill: \"#4E5969\"\n  }))), /* @__PURE__ */ react.exports.createElement(\"defs\", null, /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip0\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 0.863281,\n    y: 0.59668,\n    width: 40,\n    height: 40,\n    rx: 20,\n    fill: \"white\"\n  })), /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip1\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    width: 45,\n    height: 29,\n    fill: \"white\",\n    transform: \"translate(8.86328 6.59668)\"\n  }))));\n}\nfunction SvgComponent$1p(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M5.86328 12.1592H8.86328V28.1592H5.86328V12.1592Z\",\n    fill: \"#BEDAFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M12.8633 12.1592H15.8633V28.1592H12.8633V12.1592Z\",\n    fill: \"#4080FF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M19.8633 12.1592H22.8633V28.1592H19.8633V12.1592Z\",\n    fill: \"#BEDAFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M26.8633 12.1592H29.8633V28.1592H26.8633V12.1592Z\",\n    fill: \"#4080FF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M33.8633 12.1592H36.8633V28.1592H33.8633V12.1592Z\",\n    fill: \"#BEDAFF\"\n  }));\n}\nfunction SvgComponent$1o(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    opacity: 0.2,\n    d: \"M5.86328 12.1592H8.86328V28.1592H5.86328V12.1592Z\",\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M12.8633 12.1592H15.8633V28.1592H12.8633V12.1592Z\",\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    opacity: 0.2,\n    d: \"M19.8633 12.1592H22.8633V28.1592H19.8633V12.1592Z\",\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M26.8633 12.1592H29.8633V28.1592H26.8633V12.1592Z\",\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    opacity: 0.2,\n    d: \"M33.8633 12.1592H36.8633V28.1592H33.8633V12.1592Z\",\n    fill: \"#4E5969\"\n  }));\n}\nfunction SvgComponent$1n(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip0)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip1)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M29.9453 12.574C32.4155 15.0441 32.4535 19.0255 30.0593 21.5422L29.9453 21.659L21.9959 29.6085C21.3687 30.2357 20.3518 30.2357 19.7246 29.6085L11.7751 21.659L11.6611 21.5422C9.26695 19.0255 9.30496 15.0441 11.7751 12.574C14.2839 10.0652 18.3514 10.0652 20.8602 12.574C23.369 10.0652 27.4365 10.0652 29.9453 12.574Z\",\n    fill: \"#165DFF\"\n  }))), /* @__PURE__ */ react.exports.createElement(\"defs\", null, /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip0\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 0.863281,\n    y: 0.15918,\n    width: 40,\n    height: 40,\n    rx: 20,\n    fill: \"white\"\n  })), /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip1\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    width: 23.5,\n    height: 23.5,\n    fill: \"white\",\n    transform: \"translate(9.11328 8.40918)\"\n  }))));\n}\nfunction SvgComponent$1m(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip0)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip1)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M29.9453 12.574C32.4155 15.0441 32.4535 19.0255 30.0593 21.5422L29.9453 21.659L21.9959 29.6085C21.3687 30.2357 20.3518 30.2357 19.7246 29.6085L11.7751 21.659L11.6611 21.5422C9.26695 19.0255 9.30496 15.0441 11.7751 12.574C14.2839 10.0652 18.3514 10.0652 20.8602 12.574C23.369 10.0652 27.4365 10.0652 29.9453 12.574Z\",\n    fill: \"#4E5969\"\n  }))), /* @__PURE__ */ react.exports.createElement(\"defs\", null, /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip0\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 0.863281,\n    y: 0.15918,\n    width: 40,\n    height: 40,\n    rx: 20,\n    fill: \"white\"\n  })), /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip1\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    width: 23.5,\n    height: 23.5,\n    fill: \"white\",\n    transform: \"translate(9.11328 8.40918)\"\n  }))));\n}\nfunction SvgComponent$1l(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip0)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M10.3701 9.84631C10.3701 8.80397 11.2151 7.95898 12.2574 7.95898H41.9828C43.0251 7.95898 43.8701 8.80397 43.8701 9.84631V31.1967C43.8701 32.239 43.0251 33.084 41.9828 33.084H12.2574C11.2151 33.084 10.3701 32.239 10.3701 31.1967V9.84631Z\",\n    fill: \"#E8F3FF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    fillRule: \"evenodd\",\n    clipRule: \"evenodd\",\n    d: \"M41.9828 9.84631H12.2574L12.2574 31.1967H41.9828V9.84631ZM12.2574 7.95898C11.2151 7.95898 10.3701 8.80397 10.3701 9.84631V31.1967C10.3701 32.239 11.2151 33.084 12.2574 33.084H41.9828C43.0251 33.084 43.8701 32.239 43.8701 31.1967V9.84631C43.8701 8.80397 43.0251 7.95898 41.9828 7.95898H12.2574Z\",\n    fill: \"#165DFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M18.0125 25.8708L20.8748 20.8976C21.1827 20.3626 21.9051 20.247 22.3646 20.6591L25.8715 23.8039C26.3562 24.2385 27.1229 24.0824 27.3991 23.4928L31.042 15.7151C31.4003 14.9501 32.4971 14.9759 32.8191 15.7569L37.0359 25.985C37.2995 26.6242 36.8296 27.3262 36.1382 27.3262H18.854C18.1071 27.3262 17.6399 26.5181 18.0125 25.8708Z\",\n    fill: \"#165DFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"circle\", {\n    cx: 19.792,\n    cy: 14.7637,\n    r: 2.09375,\n    fill: \"#165DFF\"\n  })), /* @__PURE__ */ react.exports.createElement(\"defs\", null, /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip0\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 0.863281,\n    y: 0.59668,\n    width: 40,\n    height: 40,\n    rx: 20,\n    fill: \"white\"\n  }))));\n}\nfunction SvgComponent$1k(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip0)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"path\", {\n    opacity: 0.1,\n    d: \"M10.3701 9.84631C10.3701 8.80397 11.2151 7.95898 12.2574 7.95898H41.9828C43.0251 7.95898 43.8701 8.80397 43.8701 9.84631V31.1967C43.8701 32.239 43.0251 33.084 41.9828 33.084H12.2574C11.2151 33.084 10.3701 32.239 10.3701 31.1967V9.84631Z\",\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    fillRule: \"evenodd\",\n    clipRule: \"evenodd\",\n    d: \"M41.9828 9.84631H12.2574L12.2574 31.1967H41.9828V9.84631ZM12.2574 7.95898C11.2151 7.95898 10.3701 8.80397 10.3701 9.84631V31.1967C10.3701 32.239 11.2151 33.084 12.2574 33.084H41.9828C43.0251 33.084 43.8701 32.239 43.8701 31.1967V9.84631C43.8701 8.80397 43.0251 7.95898 41.9828 7.95898H12.2574Z\",\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M18.0125 25.8708L20.8748 20.8976C21.1827 20.3626 21.9051 20.247 22.3646 20.6591L25.8715 23.8039C26.3562 24.2385 27.1229 24.0824 27.3991 23.4928L31.042 15.7151C31.4003 14.9501 32.4971 14.9759 32.8191 15.7569L37.0359 25.985C37.2995 26.6242 36.8296 27.3262 36.1382 27.3262H18.854C18.1071 27.3262 17.6399 26.5181 18.0125 25.8708Z\",\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"circle\", {\n    cx: 19.792,\n    cy: 14.7637,\n    r: 2.09375,\n    fill: \"#4E5969\"\n  })), /* @__PURE__ */ react.exports.createElement(\"defs\", null, /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip0\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 0.863281,\n    y: 0.59668,\n    width: 40,\n    height: 40,\n    rx: 20,\n    fill: \"white\"\n  }))));\n}\nfunction SvgComponent$1j(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip0)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip1)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 9.30078,\n    y: 11.5654,\n    width: 52.8047,\n    height: 17.0625,\n    rx: 1,\n    fill: \"#E8F3FF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M15.1213 23.5181V17.6374H12.8633V16.5967H18.6459V17.6374H16.3878V23.5181H15.1213Z\",\n    fill: \"#165DFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M22.8494 21.3386H19.5801C19.6194 21.7837 19.7535 22.1142 19.9826 22.3302C20.2117 22.5462 20.539 22.6542 20.9644 22.6542C21.4945 22.6542 21.9789 22.484 22.4174 22.1437L22.7708 22.988C22.5483 23.1712 22.2669 23.3185 21.9265 23.4298C21.5927 23.541 21.2557 23.5967 20.9153 23.5967C20.1299 23.5967 19.5081 23.3741 19.0499 22.9291C18.5983 22.484 18.3725 21.8753 18.3725 21.103C18.3725 20.6121 18.4707 20.1769 18.6671 19.7972C18.8634 19.4176 19.1383 19.1231 19.4917 18.9137C19.8517 18.7042 20.2575 18.5995 20.7091 18.5995C21.3702 18.5995 21.8905 18.8122 22.2701 19.2376C22.6563 19.6631 22.8494 20.2489 22.8494 20.995V21.3386ZM20.7386 19.4634C20.4113 19.4634 20.1463 19.5682 19.9434 19.7776C19.747 19.987 19.6259 20.2881 19.5801 20.6808H21.7989C21.7858 20.2816 21.6876 19.9805 21.5044 19.7776C21.3211 19.5682 21.0658 19.4634 20.7386 19.4634Z\",\n    fill: \"#165DFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M26.5047 21.0441L28.5271 23.5181H27.0741L25.7978 21.9179L24.5314 23.5181H23.0783L25.091 21.0441L23.1863 18.7173H24.6492L25.7978 20.1801L26.9465 18.7173H28.4093L26.5047 21.0441Z\",\n    fill: \"#165DFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M31.5041 22.6738C31.6481 22.6738 31.7987 22.664 31.9557 22.6444L31.8968 23.5574C31.7005 23.577 31.5205 23.5869 31.3569 23.5869C30.6827 23.5869 30.1853 23.4331 29.8646 23.1254C29.5439 22.8113 29.3835 22.3466 29.3835 21.7313V19.6402H28.4606V18.7173H29.3835V17.2839H30.6107V18.7173H31.8772V19.6402H30.6107V21.7117C30.6107 22.3531 30.9085 22.6738 31.5041 22.6738Z\",\n    fill: \"#165DFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    fillRule: \"evenodd\",\n    clipRule: \"evenodd\",\n    d: \"M34.3633 24.4404V15.9404H35.3633V24.4404H34.3633Z\",\n    fill: \"#165DFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 9.30078,\n    y: 11.5654,\n    width: 52.8047,\n    height: 17.0625,\n    rx: 1,\n    stroke: \"#165DFF\",\n    strokeWidth: 2\n  }))), /* @__PURE__ */ react.exports.createElement(\"defs\", null, /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip0\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 0.863281,\n    y: 0.59668,\n    width: 40,\n    height: 40,\n    rx: 20,\n    fill: \"white\"\n  })), /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip1\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    width: 61,\n    height: 61,\n    fill: \"white\",\n    transform: \"translate(-4.13672 -10.4033)\"\n  }))));\n}\nfunction SvgComponent$1i(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip0)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip1)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 9.30078,\n    y: 11.5654,\n    width: 52.8047,\n    height: 17.0625,\n    rx: 1,\n    fill: \"#4E5969\",\n    fillOpacity: 0.1\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M15.1213 23.5181V17.6374H12.8633V16.5967H18.6459V17.6374H16.3878V23.5181H15.1213Z\",\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M22.8494 21.3386H19.5801C19.6194 21.7837 19.7535 22.1142 19.9826 22.3302C20.2117 22.5462 20.539 22.6542 20.9644 22.6542C21.4945 22.6542 21.9789 22.484 22.4174 22.1437L22.7708 22.988C22.5483 23.1712 22.2669 23.3185 21.9265 23.4298C21.5927 23.541 21.2557 23.5967 20.9153 23.5967C20.1299 23.5967 19.5081 23.3741 19.0499 22.9291C18.5983 22.484 18.3725 21.8753 18.3725 21.103C18.3725 20.6121 18.4707 20.1769 18.6671 19.7972C18.8634 19.4176 19.1383 19.1231 19.4917 18.9137C19.8517 18.7042 20.2575 18.5995 20.7091 18.5995C21.3702 18.5995 21.8905 18.8122 22.2701 19.2376C22.6563 19.6631 22.8494 20.2489 22.8494 20.995V21.3386ZM20.7386 19.4634C20.4113 19.4634 20.1463 19.5682 19.9434 19.7776C19.747 19.987 19.6259 20.2881 19.5801 20.6808H21.7989C21.7858 20.2816 21.6876 19.9805 21.5044 19.7776C21.3211 19.5682 21.0658 19.4634 20.7386 19.4634Z\",\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M26.5047 21.0441L28.5271 23.5181H27.0741L25.7978 21.9179L24.5314 23.5181H23.0783L25.091 21.0441L23.1863 18.7173H24.6492L25.7978 20.1801L26.9465 18.7173H28.4093L26.5047 21.0441Z\",\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M31.5041 22.6738C31.6481 22.6738 31.7987 22.664 31.9557 22.6444L31.8968 23.5574C31.7005 23.577 31.5205 23.5869 31.3569 23.5869C30.6827 23.5869 30.1853 23.4331 29.8646 23.1254C29.5439 22.8113 29.3835 22.3466 29.3835 21.7313V19.6402H28.4606V18.7173H29.3835V17.2839H30.6107V18.7173H31.8772V19.6402H30.6107V21.7117C30.6107 22.3531 30.9085 22.6738 31.5041 22.6738Z\",\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    fillRule: \"evenodd\",\n    clipRule: \"evenodd\",\n    d: \"M34.3633 24.4404V15.9404H35.3633V24.4404H34.3633Z\",\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 9.30078,\n    y: 11.5654,\n    width: 52.8047,\n    height: 17.0625,\n    rx: 1,\n    stroke: \"#4E5969\",\n    strokeWidth: 2\n  }))), /* @__PURE__ */ react.exports.createElement(\"defs\", null, /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip0\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 0.863281,\n    y: 0.59668,\n    width: 40,\n    height: 40,\n    rx: 20,\n    fill: \"white\"\n  })), /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip1\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    width: 61,\n    height: 61,\n    fill: \"white\",\n    transform: \"translate(-4.13672 -10.4033)\"\n  }))));\n}\nfunction SvgComponent$1h(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 40,\n    height: 40,\n    viewBox: \"0 0 40 40\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip0_4409_79125)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 8,\n    y: 10,\n    width: 64.75,\n    height: 21,\n    rx: 0.875,\n    fill: \"#E8F3FF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 11.5,\n    y: 13.5,\n    width: 35.4375,\n    height: 14,\n    rx: 0.875,\n    fill: \"#BEDAFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M16.7002 17.1923H14V16H20.9149V17.1923H18.2147V23.9298H16.7002V17.1923Z\",\n    fill: \"#165DFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M23.3704 18.2946C24.1765 18.2946 24.7753 18.4821 25.1666 18.857C25.558 19.2319 25.7536 19.8093 25.7536 20.5892V23.9298H24.3566V23.0862C24.2235 23.3787 24.0122 23.6074 23.7226 23.7724C23.4408 23.9373 23.1121 24.0198 22.7364 24.0198C22.3529 24.0198 22.0046 23.9448 21.6916 23.7948C21.3785 23.6449 21.132 23.4387 20.9519 23.1762C20.7719 22.9138 20.6819 22.6213 20.6819 22.2989C20.6819 21.8939 20.7876 21.5752 20.9989 21.3428C21.2181 21.1103 21.5703 20.9416 22.0555 20.8366C22.5408 20.7316 23.2099 20.6792 24.0631 20.6792H24.3566V20.4205C24.3566 20.0455 24.2705 19.7756 24.0983 19.6106C23.9339 19.4456 23.6561 19.3631 23.2647 19.3631C22.9595 19.3631 22.6386 19.4156 22.302 19.5206C21.9733 19.6181 21.6485 19.7568 21.3276 19.9368L20.9167 18.9695C21.2376 18.7745 21.625 18.6133 22.079 18.4858C22.5329 18.3583 22.9634 18.2946 23.3704 18.2946ZM23.0299 23.0075C23.4213 23.0075 23.7382 22.8838 23.9809 22.6363C24.2313 22.3814 24.3566 22.0552 24.3566 21.6577V21.4215H24.1452C23.6208 21.4215 23.2139 21.444 22.9243 21.489C22.6347 21.534 22.4273 21.6127 22.302 21.7252C22.1768 21.8377 22.1142 21.9914 22.1142 22.1864C22.1142 22.4263 22.2003 22.6251 22.3725 22.7825C22.5447 22.9325 22.7638 23.0075 23.0299 23.0075Z\",\n    fill: \"#165DFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M32.8333 18.4296V23.4237C32.8333 24.286 32.5829 24.9384 32.082 25.3808C31.5889 25.8232 30.8571 26.0444 29.8866 26.0444C29.3857 26.0444 28.9043 25.9807 28.4426 25.8532C27.9808 25.7333 27.5777 25.5608 27.2333 25.3358L27.6442 24.346C28.3565 24.7584 29.0922 24.9646 29.8514 24.9646C30.8688 24.9646 31.3776 24.4847 31.3776 23.5249V22.805C31.2054 23.1125 30.9549 23.3524 30.6262 23.5249C30.2975 23.6899 29.9218 23.7724 29.4992 23.7724C28.9982 23.7724 28.5521 23.6599 28.1608 23.4349C27.7773 23.2025 27.476 22.88 27.2568 22.4676C27.0377 22.0552 26.9281 21.579 26.9281 21.0391C26.9281 20.4992 27.0337 20.023 27.2451 19.6106C27.4642 19.1907 27.7695 18.8682 28.1608 18.6433C28.5521 18.4108 28.9982 18.2946 29.4992 18.2946C29.9218 18.2946 30.2975 18.3808 30.6262 18.5533C30.9549 18.7183 31.2054 18.9545 31.3776 19.2619V18.4296H32.8333ZM29.8866 22.6813C30.3562 22.6813 30.7201 22.5351 30.9784 22.2426C31.2445 21.9502 31.3776 21.549 31.3776 21.0391C31.3776 20.5217 31.2445 20.1168 30.9784 19.8243C30.7201 19.5319 30.3562 19.3856 29.8866 19.3856C29.4248 19.3856 29.0609 19.5319 28.7948 19.8243C28.5286 20.1168 28.3956 20.5217 28.3956 21.0391C28.3956 21.5415 28.5286 21.9427 28.7948 22.2426C29.0609 22.5351 29.4248 22.6813 29.8866 22.6813Z\",\n    fill: \"#165DFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 8,\n    y: 10,\n    width: 64.75,\n    height: 21,\n    rx: 0.875,\n    stroke: \"#165DFF\",\n    strokeWidth: 1.5\n  })), /* @__PURE__ */ react.exports.createElement(\"defs\", null, /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip0_4409_79125\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    width: 40,\n    height: 40,\n    rx: 20,\n    fill: \"white\"\n  }))));\n}\nfunction SvgComponent$1g(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 40,\n    height: 40,\n    viewBox: \"0 0 40 40\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip0_4409_79134)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 8,\n    y: 10,\n    width: 64.75,\n    height: 21,\n    rx: 0.875,\n    fill: \"#EEEFF0\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 11.5,\n    y: 13.5,\n    width: 35.4375,\n    height: 14,\n    rx: 0.875,\n    fill: \"#CACED2\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M16.7002 17.1923H14V16H20.9149V17.1923H18.2147V23.9298H16.7002V17.1923Z\",\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M23.3704 18.2946C24.1765 18.2946 24.7753 18.4821 25.1666 18.857C25.558 19.2319 25.7536 19.8093 25.7536 20.5892V23.9298H24.3566V23.0862C24.2235 23.3787 24.0122 23.6074 23.7226 23.7724C23.4408 23.9373 23.1121 24.0198 22.7364 24.0198C22.3529 24.0198 22.0046 23.9448 21.6916 23.7948C21.3785 23.6449 21.132 23.4387 20.9519 23.1762C20.7719 22.9138 20.6819 22.6213 20.6819 22.2989C20.6819 21.8939 20.7876 21.5752 20.9989 21.3428C21.2181 21.1103 21.5703 20.9416 22.0555 20.8366C22.5408 20.7316 23.2099 20.6792 24.0631 20.6792H24.3566V20.4205C24.3566 20.0455 24.2705 19.7756 24.0983 19.6106C23.9339 19.4456 23.6561 19.3631 23.2647 19.3631C22.9595 19.3631 22.6386 19.4156 22.302 19.5206C21.9733 19.6181 21.6485 19.7568 21.3276 19.9368L20.9167 18.9695C21.2376 18.7745 21.625 18.6133 22.079 18.4858C22.5329 18.3583 22.9634 18.2946 23.3704 18.2946ZM23.0299 23.0075C23.4213 23.0075 23.7382 22.8838 23.9809 22.6363C24.2313 22.3814 24.3566 22.0552 24.3566 21.6577V21.4215H24.1452C23.6208 21.4215 23.2139 21.444 22.9243 21.489C22.6347 21.534 22.4273 21.6127 22.302 21.7252C22.1768 21.8377 22.1142 21.9914 22.1142 22.1864C22.1142 22.4263 22.2003 22.6251 22.3725 22.7825C22.5447 22.9325 22.7638 23.0075 23.0299 23.0075Z\",\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M32.8333 18.4296V23.4237C32.8333 24.286 32.5829 24.9384 32.082 25.3808C31.5889 25.8232 30.8571 26.0444 29.8866 26.0444C29.3857 26.0444 28.9043 25.9807 28.4426 25.8532C27.9808 25.7333 27.5777 25.5608 27.2333 25.3358L27.6442 24.346C28.3565 24.7584 29.0922 24.9646 29.8514 24.9646C30.8688 24.9646 31.3776 24.4847 31.3776 23.5249V22.805C31.2054 23.1125 30.9549 23.3524 30.6262 23.5249C30.2975 23.6899 29.9218 23.7724 29.4992 23.7724C28.9982 23.7724 28.5521 23.6599 28.1608 23.4349C27.7773 23.2025 27.476 22.88 27.2568 22.4676C27.0377 22.0552 26.9281 21.579 26.9281 21.0391C26.9281 20.4992 27.0337 20.023 27.2451 19.6106C27.4642 19.1907 27.7695 18.8682 28.1608 18.6433C28.5521 18.4108 28.9982 18.2946 29.4992 18.2946C29.9218 18.2946 30.2975 18.3808 30.6262 18.5533C30.9549 18.7183 31.2054 18.9545 31.3776 19.2619V18.4296H32.8333ZM29.8866 22.6813C30.3562 22.6813 30.7201 22.5351 30.9784 22.2426C31.2445 21.9502 31.3776 21.549 31.3776 21.0391C31.3776 20.5217 31.2445 20.1168 30.9784 19.8243C30.7201 19.5319 30.3562 19.3856 29.8866 19.3856C29.4248 19.3856 29.0609 19.5319 28.7948 19.8243C28.5286 20.1168 28.3956 20.5217 28.3956 21.0391C28.3956 21.5415 28.5286 21.9427 28.7948 22.2426C29.0609 22.5351 29.4248 22.6813 29.8866 22.6813Z\",\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 8,\n    y: 10,\n    width: 64.75,\n    height: 21,\n    rx: 0.875,\n    stroke: \"#4E5969\",\n    strokeWidth: 1.5\n  })), /* @__PURE__ */ react.exports.createElement(\"defs\", null, /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip0_4409_79134\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    width: 40,\n    height: 40,\n    rx: 20,\n    fill: \"white\"\n  }))));\n}\nfunction SvgComponent$1f(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip0)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip1)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 10.9893,\n    y: 5.59668,\n    width: 86.5469,\n    height: 29.1327,\n    rx: 0.78125,\n    fill: \"#E8F3FF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M22.7174 23.995V22.5586H19.4268V21.5511L22.9532 16.4382H24.0894V21.4225H25.1506V22.5586H24.0894V23.995H22.7174ZM22.7174 21.4225V18.5391L20.7452 21.4225H22.7174Z\",\n    fill: \"#165DFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M26.2611 23.995V22.9767L28.705 20.372C29.0337 20.0147 29.2695 19.7003 29.4124 19.4288C29.5554 19.1501 29.6268 18.8678 29.6268 18.582C29.6268 17.8531 29.1874 17.4887 28.3084 17.4887C27.6224 17.4887 26.99 17.7459 26.4112 18.2604L25.9503 17.2314C26.2504 16.9599 26.6256 16.7419 27.0758 16.5776C27.5259 16.4132 27.994 16.3311 28.4799 16.3311C29.2874 16.3311 29.9055 16.5133 30.3343 16.8777C30.7702 17.2421 30.9881 17.7638 30.9881 18.4426C30.9881 18.9 30.8773 19.3395 30.6558 19.7611C30.4414 20.1827 30.102 20.6364 29.6375 21.1223L27.9761 22.8588H31.2775V23.995H26.2611Z\",\n    fill: \"#165DFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 10.9893,\n    y: 5.59668,\n    width: 86.5469,\n    height: 29.1327,\n    rx: 0.78125,\n    stroke: \"#165DFF\",\n    strokeWidth: 1.5\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M34.7393 14.0342V26.2842\",\n    stroke: \"#165DFF\",\n    strokeWidth: 1.2\n  }))), /* @__PURE__ */ react.exports.createElement(\"defs\", null, /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip0\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 0.864258,\n    y: 0.15918,\n    width: 40,\n    height: 40,\n    rx: 20,\n    fill: \"white\"\n  })), /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip1\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    width: 98,\n    height: 98,\n    fill: \"white\",\n    transform: \"translate(-8.13574 -28.8408)\"\n  }))));\n}\nfunction SvgComponent$1e(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip0)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip1)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 10.9893,\n    y: 5.59668,\n    width: 86.5469,\n    height: 29.1327,\n    rx: 0.78125,\n    fill: \"#4E5969\",\n    fillOpacity: 0.1\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M22.7174 23.995V22.5586H19.4268V21.5511L22.9532 16.4382H24.0894V21.4225H25.1506V22.5586H24.0894V23.995H22.7174ZM22.7174 21.4225V18.5391L20.7452 21.4225H22.7174Z\",\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M26.2611 23.995V22.9767L28.705 20.372C29.0337 20.0147 29.2695 19.7003 29.4124 19.4288C29.5554 19.1501 29.6268 18.8678 29.6268 18.582C29.6268 17.8531 29.1874 17.4887 28.3084 17.4887C27.6224 17.4887 26.99 17.7459 26.4112 18.2604L25.9503 17.2314C26.2504 16.9599 26.6256 16.7419 27.0758 16.5776C27.5259 16.4132 27.994 16.3311 28.4799 16.3311C29.2874 16.3311 29.9055 16.5133 30.3343 16.8777C30.7702 17.2421 30.9881 17.7638 30.9881 18.4426C30.9881 18.9 30.8773 19.3395 30.6558 19.7611C30.4414 20.1827 30.102 20.6364 29.6375 21.1223L27.9761 22.8588H31.2775V23.995H26.2611Z\",\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 10.9893,\n    y: 5.59668,\n    width: 86.5469,\n    height: 29.1327,\n    rx: 0.78125,\n    stroke: \"#4E5969\",\n    strokeWidth: 1.5\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M34.7393 14.0342V26.2842\",\n    stroke: \"#4E5969\",\n    strokeWidth: 1.2\n  }))), /* @__PURE__ */ react.exports.createElement(\"defs\", null, /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip0\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 0.864258,\n    y: 0.15918,\n    width: 40,\n    height: 40,\n    rx: 20,\n    fill: \"white\"\n  })), /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip1\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    width: 98,\n    height: 98,\n    fill: \"white\",\n    transform: \"translate(-8.13574 -28.8408)\"\n  }))));\n}\nfunction SvgComponent$1d(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip0)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M23.2539 15.6699H51.8172V40.1827C51.8172 41.8396 50.474 43.1827 48.8172 43.1827H23.2539V15.6699Z\",\n    fill: \"#94BFFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 11.5244,\n    y: 7.60449,\n    width: 39.5423,\n    height: 34.828,\n    rx: 2.25,\n    stroke: \"#165DFF\",\n    strokeWidth: 1.5\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M13.7744 7.60449H48.8167C50.0593 7.60449 51.0667 8.61185 51.0667 9.85449V14.9197H11.5244V9.85449C11.5244 8.61185 12.5318 7.60449 13.7744 7.60449Z\",\n    stroke: \"#165DFF\",\n    strokeWidth: 1.5\n  })), /* @__PURE__ */ react.exports.createElement(\"defs\", null, /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip0\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 0.864258,\n    y: 0.15918,\n    width: 40,\n    height: 40,\n    rx: 20,\n    fill: \"white\"\n  }))));\n}\nfunction SvgComponent$1c(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip0)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"path\", {\n    opacity: 0.3,\n    d: \"M23.2539 15.6699H51.8172V40.1827C51.8172 41.8396 50.474 43.1827 48.8172 43.1827H23.2539V15.6699Z\",\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 11.5244,\n    y: 7.60449,\n    width: 39.5423,\n    height: 34.828,\n    rx: 2.25,\n    stroke: \"#4E5969\",\n    strokeWidth: 1.5\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M13.7744 7.60449H48.8167C50.0593 7.60449 51.0667 8.61185 51.0667 9.85449V14.9197H11.5244V9.85449C11.5244 8.61185 12.5318 7.60449 13.7744 7.60449Z\",\n    stroke: \"#4E5969\",\n    strokeWidth: 1.5\n  })), /* @__PURE__ */ react.exports.createElement(\"defs\", null, /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip0\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 0.864258,\n    y: 0.15918,\n    width: 40,\n    height: 40,\n    rx: 20,\n    fill: \"white\"\n  }))));\n}\nfunction SvgComponent$1b(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip0)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M11.8377 18.3421L9.09369 21.0861C8.5809 21.5989 8.5809 22.4303 9.09369 22.9431C9.60649 23.4559 10.4379 23.4559 10.9507 22.9431L14.0719 19.8219C14.9241 18.9697 14.9241 17.588 14.0719 16.7358C13.2197 15.8836 11.838 15.8836 10.9858 16.7358L7.74107 19.9805C6.57068 21.1509 6.57068 23.0485 7.74107 24.2189C8.91146 25.3893 10.809 25.3893 11.9794 24.2189L14.3359 21.8624C14.5093 21.689 14.5093 21.4079 14.3359 21.2345C14.1625 21.0611 13.8814 21.0611 13.708 21.2345L11.3515 23.591C10.5279 24.4146 9.19258 24.4146 8.36897 23.591C7.54537 22.7674 7.54537 21.4321 8.36897 20.6085L11.6137 17.3637C12.1191 16.8583 12.9385 16.8583 13.444 17.3637C13.9494 17.8691 13.9494 18.6886 13.444 19.194L10.3228 22.3152C10.1568 22.4812 9.88761 22.4812 9.7216 22.3152C9.55559 22.1492 9.55559 21.88 9.7216 21.714L12.4656 18.97C12.639 18.7966 12.639 18.5155 12.4656 18.3421C12.2922 18.1687 12.0111 18.1687 11.8377 18.3421Z\",\n    fill: \"#4080FF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M17.7033 14.7945V23.3625H23.7153V22.2465H18.9993V14.7945H17.7033Z\",\n    fill: \"#165DFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M25.5731 14.6745C25.3211 14.6745 25.1171 14.7465 24.9491 14.9145C24.7811 15.0705 24.6971 15.2745 24.6971 15.5265C24.6971 15.7665 24.7811 15.9825 24.9491 16.1505C25.1171 16.3065 25.3211 16.3905 25.5731 16.3905C25.8131 16.3905 26.0291 16.3065 26.1971 16.1505C26.3651 15.9825 26.4611 15.7785 26.4611 15.5265C26.4611 15.2745 26.3771 15.0705 26.2091 14.9145C26.0411 14.7465 25.8251 14.6745 25.5731 14.6745ZM24.9371 17.1585V23.3625H26.2091V17.1585H24.9371Z\",\n    fill: \"#165DFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M31.0749 16.9905C30.6909 16.9905 30.3429 17.0625 30.0309 17.2305C29.7189 17.3865 29.4429 17.6145 29.2029 17.9265V17.1585H27.9309V23.3625H29.2029V19.6305C29.2509 19.1265 29.4309 18.7305 29.7189 18.4425C29.9829 18.1785 30.3069 18.0585 30.6669 18.0585C31.6269 18.0585 32.1189 18.5865 32.1189 19.6425V23.3625H33.3909V19.5345C33.3909 17.8305 32.6109 16.9905 31.0749 16.9905Z\",\n    fill: \"#165DFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M34.845 14.6265V23.3625H36.117V21.1905L36.825 20.5305L39.057 23.3625H40.689L37.701 19.7145L40.449 17.1585H38.805L36.117 19.7145V14.6265H34.845Z\",\n    fill: \"#165DFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M16.8633 25.6305H40.689V26.5665H16.8633V25.6305Z\",\n    fill: \"#165DFF\"\n  })), /* @__PURE__ */ react.exports.createElement(\"defs\", null, /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip0\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 0.863281,\n    y: 0.59668,\n    width: 40,\n    height: 40,\n    rx: 20,\n    fill: \"white\"\n  }))));\n}\nfunction SvgComponent$1a(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip0)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M11.8377 18.3421L9.09369 21.0861C8.5809 21.5989 8.5809 22.4303 9.09369 22.9431C9.60649 23.4559 10.4379 23.4559 10.9507 22.9431L14.0719 19.8219C14.9241 18.9697 14.9241 17.588 14.0719 16.7358C13.2197 15.8836 11.838 15.8836 10.9858 16.7358L7.74107 19.9805C6.57068 21.1509 6.57068 23.0485 7.74107 24.2189C8.91146 25.3893 10.809 25.3893 11.9794 24.2189L14.3359 21.8624C14.5093 21.689 14.5093 21.4079 14.3359 21.2345C14.1625 21.0611 13.8814 21.0611 13.708 21.2345L11.3515 23.591C10.5279 24.4146 9.19258 24.4146 8.36897 23.591C7.54537 22.7674 7.54537 21.4321 8.36897 20.6085L11.6137 17.3637C12.1191 16.8583 12.9385 16.8583 13.444 17.3637C13.9494 17.8691 13.9494 18.6886 13.444 19.194L10.3228 22.3152C10.1568 22.4812 9.88761 22.4812 9.7216 22.3152C9.55559 22.1492 9.55559 21.88 9.7216 21.714L12.4656 18.97C12.639 18.7966 12.639 18.5155 12.4656 18.3421C12.2922 18.1687 12.0111 18.1687 11.8377 18.3421Z\",\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M17.7033 14.7945V23.3625H23.7153V22.2465H18.9993V14.7945H17.7033Z\",\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M25.5731 14.6745C25.3211 14.6745 25.1171 14.7465 24.9491 14.9145C24.7811 15.0705 24.6971 15.2745 24.6971 15.5265C24.6971 15.7665 24.7811 15.9825 24.9491 16.1505C25.1171 16.3065 25.3211 16.3905 25.5731 16.3905C25.8131 16.3905 26.0291 16.3065 26.1971 16.1505C26.3651 15.9825 26.4611 15.7785 26.4611 15.5265C26.4611 15.2745 26.3771 15.0705 26.2091 14.9145C26.0411 14.7465 25.8251 14.6745 25.5731 14.6745ZM24.9371 17.1585V23.3625H26.2091V17.1585H24.9371Z\",\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M31.0749 16.9905C30.6909 16.9905 30.3429 17.0625 30.0309 17.2305C29.7189 17.3865 29.4429 17.6145 29.2029 17.9265V17.1585H27.9309V23.3625H29.2029V19.6305C29.2509 19.1265 29.4309 18.7305 29.7189 18.4425C29.9829 18.1785 30.3069 18.0585 30.6669 18.0585C31.6269 18.0585 32.1189 18.5865 32.1189 19.6425V23.3625H33.3909V19.5345C33.3909 17.8305 32.6109 16.9905 31.0749 16.9905Z\",\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M34.845 14.6265V23.3625H36.117V21.1905L36.825 20.5305L39.057 23.3625H40.689L37.701 19.7145L40.449 17.1585H38.805L36.117 19.7145V14.6265H34.845Z\",\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M16.8633 25.6305H40.689V26.5665H16.8633V25.6305Z\",\n    fill: \"#4E5969\"\n  })), /* @__PURE__ */ react.exports.createElement(\"defs\", null, /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip0\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 0.863281,\n    y: 0.59668,\n    width: 40,\n    height: 40,\n    rx: 20,\n    fill: \"white\"\n  }))));\n}\nfunction SvgComponent$19(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip0)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 11.8633,\n    y: 7.15918,\n    width: 12.8125,\n    height: 1.5,\n    rx: 0.75,\n    fill: \"#165DFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 11.8633,\n    y: 12.6592,\n    width: 20.5,\n    height: 2.28125,\n    rx: 1.14062,\n    fill: \"#BEDAFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 11.8633,\n    y: 18.9404,\n    width: 12.8125,\n    height: 1.5,\n    rx: 0.75,\n    fill: \"#165DFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 11.8633,\n    y: 24.4404,\n    width: 20.5,\n    height: 2.28125,\n    rx: 1.14062,\n    fill: \"#BEDAFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 11.8633,\n    y: 30.7217,\n    width: 12.8125,\n    height: 1.5,\n    rx: 0.75,\n    fill: \"#165DFF\"\n  })), /* @__PURE__ */ react.exports.createElement(\"defs\", null, /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip0\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 0.863281,\n    y: 0.15918,\n    width: 40,\n    height: 40,\n    rx: 20,\n    fill: \"white\"\n  }))));\n}\nfunction SvgComponent$18(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip0)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 11.8633,\n    y: 7.15918,\n    width: 12.8125,\n    height: 1.5,\n    rx: 0.75,\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    opacity: 0.3,\n    x: 11.8633,\n    y: 12.6592,\n    width: 20.5,\n    height: 2.28125,\n    rx: 1.14062,\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 11.8633,\n    y: 18.9404,\n    width: 12.8125,\n    height: 1.5,\n    rx: 0.75,\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    opacity: 0.3,\n    x: 11.8633,\n    y: 24.4404,\n    width: 20.5,\n    height: 2.28125,\n    rx: 1.14062,\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 11.8633,\n    y: 30.7217,\n    width: 12.8125,\n    height: 1.5,\n    rx: 0.75,\n    fill: \"#4E5969\"\n  })), /* @__PURE__ */ react.exports.createElement(\"defs\", null, /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip0\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 0.863281,\n    y: 0.15918,\n    width: 40,\n    height: 40,\n    rx: 20,\n    fill: \"white\"\n  }))));\n}\nfunction SvgComponent$17(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip0)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 22.8721,\n    y: 13.0059,\n    width: 39.0839,\n    height: 14.6565,\n    rx: 1.22137,\n    fill: \"#165DFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M13.134 28.1392C11.6834 28.1392 10.4027 27.8332 9.29204 27.2212C8.19271 26.6092 7.33137 25.7535 6.70804 24.6542C6.09604 23.5435 5.79004 22.2515 5.79004 20.7782C5.79004 19.6335 5.97137 18.5965 6.33404 17.6672C6.69671 16.7379 7.21804 15.9389 7.89804 15.2702C8.57804 14.6015 9.38271 14.0859 10.312 13.7232C11.2527 13.3605 12.2897 13.1792 13.423 13.1792C14.7604 13.1792 15.9277 13.4455 16.925 13.9782C17.9337 14.4995 18.7157 15.2362 19.271 16.1882C19.8264 17.1289 20.104 18.2395 20.104 19.5202C20.104 20.5062 19.9624 21.3619 19.679 22.0872C19.407 22.8012 19.0217 23.3565 18.523 23.7532C18.0357 24.1385 17.4634 24.3312 16.806 24.3312C16.2507 24.3312 15.7917 24.2065 15.429 23.9572C15.0664 23.6965 14.8227 23.3339 14.698 22.8692C14.392 23.3565 14.0237 23.7249 13.593 23.9742C13.1624 24.2122 12.7034 24.3312 12.216 24.3312C11.3094 24.3312 10.6067 24.0479 10.108 23.4812C9.60937 22.9145 9.36004 22.1382 9.36004 21.1522C9.36004 20.3249 9.51304 19.5882 9.81904 18.9422C10.1364 18.2962 10.567 17.7862 11.111 17.4122C11.6664 17.0382 12.2954 16.8512 12.998 16.8512C14.0067 16.8512 14.698 17.2535 15.072 18.0582L15.259 17.0212H16.84L16.126 21.1182C16.058 21.4922 16.024 21.7982 16.024 22.0362C16.024 22.7275 16.3187 23.0732 16.908 23.0732C17.4634 23.0732 17.911 22.7502 18.251 22.1042C18.6024 21.4469 18.778 20.5855 18.778 19.5202C18.778 18.4662 18.557 17.5652 18.115 16.8172C17.6844 16.0692 17.0667 15.4969 16.262 15.1002C15.4687 14.6922 14.5167 14.4882 13.406 14.4882C12.1707 14.4882 11.094 14.7489 10.176 15.2702C9.25804 15.7802 8.54404 16.5055 8.03404 17.4462C7.52404 18.3869 7.26904 19.4975 7.26904 20.7782C7.26904 22.0362 7.50704 23.1185 7.98304 24.0252C8.47037 24.9319 9.15037 25.6232 10.023 26.0992C10.907 26.5865 11.944 26.8302 13.134 26.8302C14.8567 26.8302 16.2337 26.3599 17.265 25.4192L17.945 26.5412C17.401 27.0512 16.7154 27.4422 15.888 27.7142C15.0607 27.9975 14.1427 28.1392 13.134 28.1392ZM12.522 22.9882C13.168 22.9882 13.695 22.6992 14.103 22.1212C14.5224 21.5432 14.732 20.7895 14.732 19.8602C14.732 18.7609 14.2447 18.2112 13.27 18.2112C12.6127 18.2112 12.0744 18.4832 11.655 19.0272C11.2357 19.5712 11.026 20.2739 11.026 21.1352C11.026 21.7359 11.1564 22.1949 11.417 22.5122C11.6777 22.8295 12.046 22.9882 12.522 22.9882Z\",\n    fill: \"#165DFF\"\n  })), /* @__PURE__ */ react.exports.createElement(\"defs\", null, /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip0\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 0.864258,\n    y: 0.15918,\n    width: 40,\n    height: 40,\n    rx: 20,\n    fill: \"white\"\n  }))));\n}\nfunction SvgComponent$16(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip0)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 22.8721,\n    y: 13.0059,\n    width: 39.0839,\n    height: 14.6565,\n    rx: 1.22137,\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M13.134 28.1392C11.6834 28.1392 10.4027 27.8332 9.29204 27.2212C8.19271 26.6092 7.33137 25.7535 6.70804 24.6542C6.09604 23.5435 5.79004 22.2515 5.79004 20.7782C5.79004 19.6335 5.97137 18.5965 6.33404 17.6672C6.69671 16.7379 7.21804 15.9389 7.89804 15.2702C8.57804 14.6015 9.38271 14.0859 10.312 13.7232C11.2527 13.3605 12.2897 13.1792 13.423 13.1792C14.7604 13.1792 15.9277 13.4455 16.925 13.9782C17.9337 14.4995 18.7157 15.2362 19.271 16.1882C19.8264 17.1289 20.104 18.2395 20.104 19.5202C20.104 20.5062 19.9624 21.3619 19.679 22.0872C19.407 22.8012 19.0217 23.3565 18.523 23.7532C18.0357 24.1385 17.4634 24.3312 16.806 24.3312C16.2507 24.3312 15.7917 24.2065 15.429 23.9572C15.0664 23.6965 14.8227 23.3339 14.698 22.8692C14.392 23.3565 14.0237 23.7249 13.593 23.9742C13.1624 24.2122 12.7034 24.3312 12.216 24.3312C11.3094 24.3312 10.6067 24.0479 10.108 23.4812C9.60937 22.9145 9.36004 22.1382 9.36004 21.1522C9.36004 20.3249 9.51304 19.5882 9.81904 18.9422C10.1364 18.2962 10.567 17.7862 11.111 17.4122C11.6664 17.0382 12.2954 16.8512 12.998 16.8512C14.0067 16.8512 14.698 17.2535 15.072 18.0582L15.259 17.0212H16.84L16.126 21.1182C16.058 21.4922 16.024 21.7982 16.024 22.0362C16.024 22.7275 16.3187 23.0732 16.908 23.0732C17.4634 23.0732 17.911 22.7502 18.251 22.1042C18.6024 21.4469 18.778 20.5855 18.778 19.5202C18.778 18.4662 18.557 17.5652 18.115 16.8172C17.6844 16.0692 17.0667 15.4969 16.262 15.1002C15.4687 14.6922 14.5167 14.4882 13.406 14.4882C12.1707 14.4882 11.094 14.7489 10.176 15.2702C9.25804 15.7802 8.54404 16.5055 8.03404 17.4462C7.52404 18.3869 7.26904 19.4975 7.26904 20.7782C7.26904 22.0362 7.50704 23.1185 7.98304 24.0252C8.47037 24.9319 9.15037 25.6232 10.023 26.0992C10.907 26.5865 11.944 26.8302 13.134 26.8302C14.8567 26.8302 16.2337 26.3599 17.265 25.4192L17.945 26.5412C17.401 27.0512 16.7154 27.4422 15.888 27.7142C15.0607 27.9975 14.1427 28.1392 13.134 28.1392ZM12.522 22.9882C13.168 22.9882 13.695 22.6992 14.103 22.1212C14.5224 21.5432 14.732 20.7895 14.732 19.8602C14.732 18.7609 14.2447 18.2112 13.27 18.2112C12.6127 18.2112 12.0744 18.4832 11.655 19.0272C11.2357 19.5712 11.026 20.2739 11.026 21.1352C11.026 21.7359 11.1564 22.1949 11.417 22.5122C11.6777 22.8295 12.046 22.9882 12.522 22.9882Z\",\n    fill: \"#4E5969\"\n  })), /* @__PURE__ */ react.exports.createElement(\"defs\", null, /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip0\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 0.864258,\n    y: 0.15918,\n    width: 40,\n    height: 40,\n    rx: 20,\n    fill: \"white\"\n  }))));\n}\nfunction SvgComponent$15(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip0)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"mask\", {\n    id: \"path-2-inside-1\",\n    fill: \"white\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 6.35742,\n    y: 17.4028,\n    width: 29.0113,\n    height: 44.3917,\n    rx: 1.25047\n  })), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 6.35742,\n    y: 17.4028,\n    width: 29.0113,\n    height: 44.3917,\n    rx: 1.25047,\n    fill: \"#E8F3FF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 11.3594,\n    y: 24.9058,\n    width: 11.5047,\n    height: 2.20402,\n    rx: 1.10201,\n    fill: \"#94BFFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 11.3594,\n    y: 30.5327,\n    width: 19.0075,\n    height: 2.20402,\n    rx: 1.10201,\n    fill: \"#94BFFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 6.35742,\n    y: 17.4028,\n    width: 29.0113,\n    height: 44.3917,\n    rx: 1.25047,\n    stroke: \"#165DFF\",\n    strokeWidth: 2.86064,\n    mask: \"url(#path-2-inside-1)\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 6.35742,\n    y: 9.89941,\n    width: 15.0056,\n    height: 5.00188,\n    rx: 0.5,\n    fill: \"#165DFF\"\n  })), /* @__PURE__ */ react.exports.createElement(\"defs\", null, /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip0\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 0.863281,\n    y: 0.15918,\n    width: 40,\n    height: 40,\n    rx: 20,\n    fill: \"white\"\n  }))));\n}\nfunction SvgComponent$14(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip0)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"mask\", {\n    id: \"path-2-inside-1\",\n    fill: \"white\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 6.35742,\n    y: 17.4028,\n    width: 29.0113,\n    height: 44.3917,\n    rx: 1.25047\n  })), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 6.35742,\n    y: 17.4028,\n    width: 29.0113,\n    height: 44.3917,\n    rx: 1.25047,\n    fill: \"#4E5969\",\n    fillOpacity: 0.1\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    opacity: 0.3,\n    x: 11.3594,\n    y: 24.9058,\n    width: 11.5047,\n    height: 2.20402,\n    rx: 1.10201,\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    opacity: 0.3,\n    x: 11.3594,\n    y: 30.5327,\n    width: 19.0075,\n    height: 2.20402,\n    rx: 1.10201,\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 6.35742,\n    y: 17.4028,\n    width: 29.0113,\n    height: 44.3917,\n    rx: 1.25047,\n    stroke: \"#4E5969\",\n    strokeWidth: 3,\n    mask: \"url(#path-2-inside-1)\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 6.35742,\n    y: 9.89941,\n    width: 15.0056,\n    height: 5.00188,\n    rx: 0.5,\n    fill: \"#4E5969\"\n  })), /* @__PURE__ */ react.exports.createElement(\"defs\", null, /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip0\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 0.863281,\n    y: 0.15918,\n    width: 40,\n    height: 40,\n    rx: 20,\n    fill: \"white\"\n  }))));\n}\nfunction SvgComponent$13(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip0)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 8.80078,\n    y: 12.4717,\n    width: 62.125,\n    height: 15.25,\n    rx: 1,\n    fill: \"#E8F3FF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 14.9258,\n    y: 17.5967,\n    width: 4.75,\n    height: 4.75,\n    rx: 2.375,\n    fill: \"#165DFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M22.0508 19.9717C22.0508 19.3158 22.5824 18.7842 23.2383 18.7842H63.6133C64.2691 18.7842 64.8008 19.3158 64.8008 19.9717C64.8008 20.6275 64.2691 21.1592 63.6133 21.1592H23.2383C22.5824 21.1592 22.0508 20.6275 22.0508 19.9717Z\",\n    fill: \"#6AA1FF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 8.80078,\n    y: 12.4717,\n    width: 62.125,\n    height: 15.25,\n    rx: 1,\n    stroke: \"#165DFF\",\n    strokeWidth: 2\n  })), /* @__PURE__ */ react.exports.createElement(\"defs\", null, /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip0\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 0.863281,\n    y: 0.59668,\n    width: 40,\n    height: 40,\n    rx: 20,\n    fill: \"white\"\n  }))));\n}\nfunction SvgComponent$12(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip0)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 8.80078,\n    y: 12.4717,\n    width: 62.125,\n    height: 15.25,\n    rx: 1,\n    fill: \"#4E5969\",\n    fillOpacity: 0.1\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 14.9258,\n    y: 17.5967,\n    width: 4.75,\n    height: 4.75,\n    rx: 2.375,\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M22.0508 19.9717C22.0508 19.3158 22.5824 18.7842 23.2383 18.7842H63.6133C64.2691 18.7842 64.8008 19.3158 64.8008 19.9717C64.8008 20.6275 64.2691 21.1592 63.6133 21.1592H23.2383C22.5824 21.1592 22.0508 20.6275 22.0508 19.9717Z\",\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 8.80078,\n    y: 12.4717,\n    width: 62.125,\n    height: 15.25,\n    rx: 1,\n    stroke: \"#4E5969\",\n    strokeWidth: 2\n  })), /* @__PURE__ */ react.exports.createElement(\"defs\", null, /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip0\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 0.863281,\n    y: 0.59668,\n    width: 40,\n    height: 40,\n    rx: 20,\n    fill: \"white\"\n  }))));\n}\nfunction SvgComponent$11(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip0)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"mask\", {\n    id: \"path-2-inside-1\",\n    fill: \"white\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 6.36426,\n    y: 8.88135,\n    width: 29.0008,\n    height: 22.5561,\n    rx: 1\n  })), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 6.36426,\n    y: 8.88135,\n    width: 29.0008,\n    height: 22.5561,\n    rx: 1,\n    fill: \"#E8F3FF\",\n    stroke: \"#165DFF\",\n    strokeWidth: 3,\n    mask: \"url(#path-2-inside-1)\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 6.36426,\n    y: 8.88135,\n    width: 29.0008,\n    height: 5,\n    rx: 1,\n    fill: \"#165DFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 21.6699,\n    y: 23.9927,\n    width: 7.25019,\n    height: 3.41673,\n    rx: 0.402788,\n    fill: \"#165DFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 12.8086,\n    y: 23.9927,\n    width: 7.25019,\n    height: 3.41673,\n    rx: 0.402788,\n    fill: \"#94BFFF\"\n  })), /* @__PURE__ */ react.exports.createElement(\"defs\", null, /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip0\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 0.864258,\n    y: 0.15918,\n    width: 40,\n    height: 40,\n    rx: 20,\n    fill: \"white\"\n  }))));\n}\nfunction SvgComponent$10(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip0)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"mask\", {\n    id: \"path-2-inside-1\",\n    fill: \"white\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 6.36426,\n    y: 8.88135,\n    width: 29.0008,\n    height: 22.5561,\n    rx: 1\n  })), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 6.36426,\n    y: 8.88135,\n    width: 29.0008,\n    height: 22.5561,\n    rx: 1,\n    fill: \"#4E5969\",\n    fillOpacity: 0.1,\n    stroke: \"#4E5969\",\n    strokeWidth: 3,\n    mask: \"url(#path-2-inside-1)\"\n  }), /* @__PURE__ */ react.exports.createElement(\"mask\", {\n    id: \"path-3-inside-2\",\n    fill: \"white\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 6.36426,\n    y: 8.88135,\n    width: 29.0008,\n    height: 5,\n    rx: 1\n  })), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 6.36426,\n    y: 8.88135,\n    width: 29.0008,\n    height: 5,\n    rx: 1,\n    fill: \"#4E5969\",\n    stroke: \"#4E5969\",\n    strokeOpacity: 0.1,\n    strokeWidth: 3,\n    mask: \"url(#path-3-inside-2)\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 21.6699,\n    y: 23.9927,\n    width: 7.25019,\n    height: 3.41673,\n    rx: 0.402788,\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    opacity: 0.3,\n    x: 12.8086,\n    y: 23.9927,\n    width: 7.25019,\n    height: 3.41673,\n    rx: 0.402788,\n    fill: \"#4E5969\"\n  })), /* @__PURE__ */ react.exports.createElement(\"defs\", null, /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip0\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 0.864258,\n    y: 0.15918,\n    width: 40,\n    height: 40,\n    rx: 20,\n    fill: \"white\"\n  }))));\n}\nfunction SvgComponent$$(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip0)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"mask\", {\n    id: \"path-2-inside-1\",\n    fill: \"white\"\n  }, /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M7.36328 11.6279C7.36328 10.1782 8.53853 9.00293 9.98828 9.00293H67.7383C69.188 9.00293 70.3633 10.1782 70.3633 11.6279V29.3467C70.3633 30.7964 69.188 31.9717 67.7383 31.9717H9.98828C8.53854 31.9717 7.36328 30.7964 7.36328 29.3467V11.6279Z\"\n  })), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M7.36328 11.6279C7.36328 10.1782 8.53853 9.00293 9.98828 9.00293H67.7383C69.188 9.00293 70.3633 10.1782 70.3633 11.6279V29.3467C70.3633 30.7964 69.188 31.9717 67.7383 31.9717H9.98828C8.53854 31.9717 7.36328 30.7964 7.36328 29.3467V11.6279Z\",\n    fill: \"#E8F3FF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M9.98828 10.5029H67.7383V7.50293H9.98828V10.5029ZM68.8633 11.6279V29.3467H71.8633V11.6279H68.8633ZM67.7383 30.4717H9.98828V33.4717H67.7383V30.4717ZM8.86328 29.3467V11.6279H5.86328V29.3467H8.86328ZM9.98828 30.4717C9.36696 30.4717 8.86328 29.968 8.86328 29.3467H5.86328C5.86328 31.6249 7.71011 33.4717 9.98828 33.4717V30.4717ZM68.8633 29.3467C68.8633 29.968 68.3596 30.4717 67.7383 30.4717V33.4717C70.0165 33.4717 71.8633 31.6249 71.8633 29.3467H68.8633ZM67.7383 10.5029C68.3596 10.5029 68.8633 11.0066 68.8633 11.6279H71.8633C71.8633 9.34975 70.0165 7.50293 67.7383 7.50293V10.5029ZM9.98828 7.50293C7.71011 7.50293 5.86328 9.34975 5.86328 11.6279H8.86328C8.86328 11.0066 9.36696 10.5029 9.98828 10.5029V7.50293Z\",\n    fill: \"#165DFF\",\n    mask: \"url(#path-2-inside-1)\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 12.6133,\n    y: 16.2217,\n    width: 5.25,\n    height: 5.25,\n    rx: 2.625,\n    fill: \"#165DFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 20.4883,\n    y: 16.2217,\n    width: 23.625,\n    height: 2.625,\n    rx: 1.3125,\n    fill: \"#165DFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 20.4883,\n    y: 22.1279,\n    width: 45.2812,\n    height: 2.625,\n    rx: 1.3125,\n    fill: \"#94BFFF\"\n  })), /* @__PURE__ */ react.exports.createElement(\"defs\", null, /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip0\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 0.863281,\n    y: 0.15918,\n    width: 40,\n    height: 40,\n    rx: 20,\n    fill: \"white\"\n  }))));\n}\nfunction SvgComponent$_(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip0)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"mask\", {\n    id: \"path-2-inside-1\",\n    fill: \"white\"\n  }, /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M7.36328 11.6279C7.36328 10.1782 8.53853 9.00293 9.98828 9.00293H67.7383C69.188 9.00293 70.3633 10.1782 70.3633 11.6279V29.3467C70.3633 30.7964 69.188 31.9717 67.7383 31.9717H9.98828C8.53854 31.9717 7.36328 30.7964 7.36328 29.3467V11.6279Z\"\n  })), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M7.36328 11.6279C7.36328 10.1782 8.53853 9.00293 9.98828 9.00293H67.7383C69.188 9.00293 70.3633 10.1782 70.3633 11.6279V29.3467C70.3633 30.7964 69.188 31.9717 67.7383 31.9717H9.98828C8.53854 31.9717 7.36328 30.7964 7.36328 29.3467V11.6279Z\",\n    fill: \"#4E5969\",\n    fillOpacity: 0.1\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M9.98828 10.5029H67.7383V7.50293H9.98828V10.5029ZM68.8633 11.6279V29.3467H71.8633V11.6279H68.8633ZM67.7383 30.4717H9.98828V33.4717H67.7383V30.4717ZM8.86328 29.3467V11.6279H5.86328V29.3467H8.86328ZM9.98828 30.4717C9.36696 30.4717 8.86328 29.968 8.86328 29.3467H5.86328C5.86328 31.6249 7.71011 33.4717 9.98828 33.4717V30.4717ZM68.8633 29.3467C68.8633 29.968 68.3596 30.4717 67.7383 30.4717V33.4717C70.0165 33.4717 71.8633 31.6249 71.8633 29.3467H68.8633ZM67.7383 10.5029C68.3596 10.5029 68.8633 11.0066 68.8633 11.6279H71.8633C71.8633 9.34975 70.0165 7.50293 67.7383 7.50293V10.5029ZM9.98828 7.50293C7.71011 7.50293 5.86328 9.34975 5.86328 11.6279H8.86328C8.86328 11.0066 9.36696 10.5029 9.98828 10.5029V7.50293Z\",\n    fill: \"#4E5969\",\n    mask: \"url(#path-2-inside-1)\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 12.6133,\n    y: 16.2217,\n    width: 5.25,\n    height: 5.25,\n    rx: 2.625,\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 20.4883,\n    y: 16.2217,\n    width: 23.625,\n    height: 2.625,\n    rx: 1.3125,\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    opacity: 0.3,\n    x: 20.4883,\n    y: 22.1279,\n    width: 45.2812,\n    height: 2.625,\n    rx: 1.3125,\n    fill: \"#4E5969\"\n  })), /* @__PURE__ */ react.exports.createElement(\"defs\", null, /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip0\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 0.863281,\n    y: 0.15918,\n    width: 40,\n    height: 40,\n    rx: 20,\n    fill: \"white\"\n  }))));\n}\nfunction SvgComponent$Z(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip0)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip1)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M7.89746 13.4261C7.89746 12.5395 8.61616 11.8208 9.50272 11.8208H52.616C53.5025 11.8208 54.2212 12.5395 54.2212 13.4261V28.4974H7.89746V13.4261Z\",\n    fill: \"#E8F3FF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M11.7871 22.8896V17.4292H12.7785V19.7063H15.59V17.4292H16.5814V22.8896H15.59V20.535H12.7785V22.8896H11.7871Z\",\n    fill: \"#165DFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M18.552 22.8896V17.4292H22.1845V18.2192H19.5047V19.7218H22.0141V20.5118H19.5047V22.0995H22.1845V22.8896H18.552Z\",\n    fill: \"#165DFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M23.261 22.8896L25.7317 17.4292H26.5449L29.0157 22.8896H28.0088L27.4666 21.6271H24.8023L24.2679 22.8896H23.261ZM26.1267 18.5058L25.1431 20.8371H27.1258L26.1422 18.5058H26.1267Z\",\n    fill: \"#165DFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M30.3876 22.8896V17.4292H32.4169C33.3308 17.4292 34.0356 17.6641 34.5313 18.134C35.0322 18.6039 35.2826 19.2777 35.2826 20.1555C35.2826 21.0281 35.0322 21.702 34.5313 22.177C34.0356 22.652 33.3308 22.8896 32.4169 22.8896H30.3876ZM31.379 22.0686H32.3549C33.6148 22.0686 34.2447 21.4309 34.2447 20.1555C34.2447 18.8853 33.6148 18.2502 32.3549 18.2502H31.379V22.0686Z\",\n    fill: \"#165DFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M37.0618 22.8896V17.4292H40.6943V18.2192H38.0145V19.7218H40.5239V20.5118H38.0145V22.0995H40.6943V22.8896H37.0618Z\",\n    fill: \"#165DFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M42.4577 22.8896V17.4292H44.8277C45.4267 17.4292 45.8888 17.5738 46.2141 17.8629C46.5394 18.1469 46.7021 18.5471 46.7021 19.0634C46.7021 19.4713 46.5962 19.8096 46.3845 20.0781C46.1728 20.3414 45.8682 20.5195 45.4706 20.6125C45.7339 20.6951 45.9508 20.8939 46.1212 21.2088L47.0351 22.8896H45.943L44.9981 21.1469C44.9052 20.9765 44.7942 20.8603 44.6651 20.7984C44.5412 20.7364 44.3811 20.7054 44.1849 20.7054H43.4491V22.8896H42.4577ZM43.4491 19.9696H44.6573C45.3802 19.9696 45.7417 19.6753 45.7417 19.0867C45.7417 18.5032 45.3802 18.2115 44.6573 18.2115H43.4491V19.9696Z\",\n    fill: \"#165DFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 7.89746,\n    y: 28.4976,\n    width: 35.6915,\n    height: 1.5,\n    fill: \"#165DFF\"\n  }))), /* @__PURE__ */ react.exports.createElement(\"defs\", null, /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip0\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 0.863281,\n    y: 0.15918,\n    width: 40,\n    height: 40,\n    rx: 20,\n    fill: \"white\"\n  })), /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip1\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    width: 55.445,\n    height: 55.445,\n    fill: \"white\",\n    transform: \"translate(-5.85938 -7.56348)\"\n  }))));\n}\nfunction SvgComponent$Y(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip0)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip1)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M7.89746 13.4261C7.89746 12.5395 8.61616 11.8208 9.50272 11.8208H52.616C53.5025 11.8208 54.2212 12.5395 54.2212 13.4261V28.4974H7.89746V13.4261Z\",\n    fill: \"#4E5969\",\n    fillOpacity: 0.1\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M11.7871 22.8896V17.4292H12.7785V19.7063H15.59V17.4292H16.5814V22.8896H15.59V20.535H12.7785V22.8896H11.7871Z\",\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M18.552 22.8896V17.4292H22.1845V18.2192H19.5047V19.7218H22.0141V20.5118H19.5047V22.0995H22.1845V22.8896H18.552Z\",\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M23.261 22.8896L25.7317 17.4292H26.5449L29.0157 22.8896H28.0088L27.4666 21.6271H24.8023L24.2679 22.8896H23.261ZM26.1267 18.5058L25.1431 20.8371H27.1258L26.1422 18.5058H26.1267Z\",\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M30.3876 22.8896V17.4292H32.4169C33.3308 17.4292 34.0356 17.6641 34.5313 18.134C35.0322 18.6039 35.2826 19.2777 35.2826 20.1555C35.2826 21.0281 35.0322 21.702 34.5313 22.177C34.0356 22.652 33.3308 22.8896 32.4169 22.8896H30.3876ZM31.379 22.0686H32.3549C33.6148 22.0686 34.2447 21.4309 34.2447 20.1555C34.2447 18.8853 33.6148 18.2502 32.3549 18.2502H31.379V22.0686Z\",\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M37.0618 22.8896V17.4292H40.6943V18.2192H38.0145V19.7218H40.5239V20.5118H38.0145V22.0995H40.6943V22.8896H37.0618Z\",\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M42.4577 22.8896V17.4292H44.8277C45.4267 17.4292 45.8888 17.5738 46.2141 17.8629C46.5394 18.1469 46.7021 18.5471 46.7021 19.0634C46.7021 19.4713 46.5962 19.8096 46.3845 20.0781C46.1728 20.3414 45.8682 20.5195 45.4706 20.6125C45.7339 20.6951 45.9508 20.8939 46.1212 21.2088L47.0351 22.8896H45.943L44.9981 21.1469C44.9052 20.9765 44.7942 20.8603 44.6651 20.7984C44.5412 20.7364 44.3811 20.7054 44.1849 20.7054H43.4491V22.8896H42.4577ZM43.4491 19.9696H44.6573C45.3802 19.9696 45.7417 19.6753 45.7417 19.0867C45.7417 18.5032 45.3802 18.2115 44.6573 18.2115H43.4491V19.9696Z\",\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 7.89746,\n    y: 28.4976,\n    width: 35.6915,\n    height: 1.5,\n    fill: \"#4E5969\"\n  }))), /* @__PURE__ */ react.exports.createElement(\"defs\", null, /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip0\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 0.863281,\n    y: 0.15918,\n    width: 40,\n    height: 40,\n    rx: 20,\n    fill: \"white\"\n  })), /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip1\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    width: 55.445,\n    height: 55.445,\n    fill: \"white\",\n    transform: \"translate(-5.85938 -7.56348)\"\n  }))));\n}\nfunction SvgComponent$X(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip0)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 5.72852,\n    y: 10.9263,\n    width: 18.466,\n    height: 18.466,\n    rx: 1.02589,\n    fill: \"#165DFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M12.8519 23.6843V22.6243H14.4419V18.0943L13.2119 18.8343L12.7119 17.8943L14.8119 16.6343H15.7219V22.6243H17.2119V23.6843H12.8519Z\",\n    fill: \"white\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 27.2461,\n    y: 10.9263,\n    width: 18.466,\n    height: 18.466,\n    rx: 1.02589,\n    fill: \"#E8F3FF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M34.2841 23.7345V22.7845L36.5641 20.3545C36.8708 20.0211 37.0908 19.7278 37.2241 19.4745C37.3575 19.2145 37.4241 18.9511 37.4241 18.6845C37.4241 18.0045 37.0141 17.6645 36.1941 17.6645C35.5541 17.6645 34.9641 17.9045 34.4241 18.3845L33.9941 17.4245C34.2741 17.1711 34.6241 16.9678 35.0441 16.8145C35.4641 16.6611 35.9008 16.5845 36.3541 16.5845C37.1075 16.5845 37.6841 16.7545 38.0841 17.0945C38.4908 17.4345 38.6941 17.9211 38.6941 18.5545C38.6941 18.9811 38.5908 19.3911 38.3841 19.7845C38.1841 20.1778 37.8675 20.6011 37.4341 21.0545L35.8841 22.6745H38.9641V23.7345H34.2841Z\",\n    fill: \"#165DFF\"\n  })), /* @__PURE__ */ react.exports.createElement(\"defs\", null, /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip0\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 0.863281,\n    y: 0.15918,\n    width: 40,\n    height: 40,\n    rx: 20,\n    fill: \"white\"\n  }))));\n}\nfunction SvgComponent$W(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip0)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 5.72852,\n    y: 10.9263,\n    width: 18.466,\n    height: 18.466,\n    rx: 1.02589,\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M12.8519 23.6843V22.6243H14.4419V18.0943L13.2119 18.8343L12.7119 17.8943L14.8119 16.6343H15.7219V22.6243H17.2119V23.6843H12.8519Z\",\n    fill: \"white\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 27.2461,\n    y: 10.9263,\n    width: 18.466,\n    height: 18.466,\n    rx: 1.02589,\n    fill: \"#4E5969\",\n    fillOpacity: 0.2\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M34.2841 23.7345V22.7845L36.5641 20.3545C36.8708 20.0211 37.0908 19.7278 37.2241 19.4745C37.3575 19.2145 37.4241 18.9511 37.4241 18.6845C37.4241 18.0045 37.0141 17.6645 36.1941 17.6645C35.5541 17.6645 34.9641 17.9045 34.4241 18.3845L33.9941 17.4245C34.2741 17.1711 34.6241 16.9678 35.0441 16.8145C35.4641 16.6611 35.9008 16.5845 36.3541 16.5845C37.1075 16.5845 37.6841 16.7545 38.0841 17.0945C38.4908 17.4345 38.6941 17.9211 38.6941 18.5545C38.6941 18.9811 38.5908 19.3911 38.3841 19.7845C38.1841 20.1778 37.8675 20.6011 37.4341 21.0545L35.8841 22.6745H38.9641V23.7345H34.2841Z\",\n    fill: \"#4E5969\"\n  })), /* @__PURE__ */ react.exports.createElement(\"defs\", null, /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip0\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 0.863281,\n    y: 0.15918,\n    width: 40,\n    height: 40,\n    rx: 20,\n    fill: \"white\"\n  }))));\n}\nfunction SvgComponent$V(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip0)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"mask\", {\n    id: \"path-2-inside-1\",\n    fill: \"white\"\n  }, /* @__PURE__ */ react.exports.createElement(\"path\", {\n    fillRule: \"evenodd\",\n    clipRule: \"evenodd\",\n    d: \"M10.7215 6.95166C9.59921 6.95166 8.68945 7.86142 8.68945 8.98366V29.3036C8.68945 30.4259 9.59921 31.3356 10.7215 31.3356H21.8168L25.8988 34.6012C26.187 34.8318 26.5964 34.8318 26.8845 34.6012L30.9665 31.3356H55.4254C56.5476 31.3356 57.4574 30.4259 57.4574 29.3036V8.98366C57.4574 7.86142 56.5476 6.95166 55.4254 6.95166H10.7215Z\"\n  })), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    fillRule: \"evenodd\",\n    clipRule: \"evenodd\",\n    d: \"M10.7215 6.95166C9.59921 6.95166 8.68945 7.86142 8.68945 8.98366V29.3036C8.68945 30.4259 9.59921 31.3356 10.7215 31.3356H21.8168L25.8988 34.6012C26.187 34.8318 26.5964 34.8318 26.8845 34.6012L30.9665 31.3356H55.4254C56.5476 31.3356 57.4574 30.4259 57.4574 29.3036V8.98366C57.4574 7.86142 56.5476 6.95166 55.4254 6.95166H10.7215Z\",\n    fill: \"#E8F3FF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M21.8168 31.3356L22.7539 30.1643L22.343 29.8356H21.8168V31.3356ZM25.8988 34.6012L24.9618 35.7726L24.9618 35.7726L25.8988 34.6012ZM26.8845 34.6012L27.8215 35.7726L27.8215 35.7726L26.8845 34.6012ZM30.9665 31.3356V29.8356H30.4403L30.0295 30.1643L30.9665 31.3356ZM10.1895 8.98366C10.1895 8.68984 10.4276 8.45166 10.7215 8.45166V5.45166C8.77078 5.45166 7.18945 7.03299 7.18945 8.98366H10.1895ZM10.1895 29.3036V8.98366H7.18945V29.3036H10.1895ZM10.7215 29.8356C10.4276 29.8356 10.1895 29.5975 10.1895 29.3036H7.18945C7.18945 31.2543 8.77078 32.8356 10.7215 32.8356V29.8356ZM21.8168 29.8356H10.7215V32.8356H21.8168V29.8356ZM20.8798 32.5069L24.9618 35.7726L26.8359 33.4299L22.7539 30.1643L20.8798 32.5069ZM24.9618 35.7726C25.7977 36.4413 26.9856 36.4413 27.8215 35.7726L25.9475 33.4299C26.2072 33.2222 26.5762 33.2222 26.8359 33.4299L24.9618 35.7726ZM27.8215 35.7726L31.9036 32.5069L30.0295 30.1643L25.9475 33.4299L27.8215 35.7726ZM55.4254 29.8356H30.9665V32.8356H55.4254V29.8356ZM55.9574 29.3036C55.9574 29.5975 55.7192 29.8356 55.4254 29.8356V32.8356C57.3761 32.8356 58.9574 31.2543 58.9574 29.3036H55.9574ZM55.9574 8.98366V29.3036H58.9574V8.98366H55.9574ZM55.4254 8.45166C55.7192 8.45166 55.9574 8.68984 55.9574 8.98366H58.9574C58.9574 7.03299 57.3761 5.45166 55.4254 5.45166V8.45166ZM10.7215 8.45166H55.4254V5.45166H10.7215V8.45166Z\",\n    fill: \"#165DFF\",\n    mask: \"url(#path-2-inside-1)\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 13.8633,\n    y: 12.1592,\n    width: 6,\n    height: 6,\n    rx: 3,\n    fill: \"#165DFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 22.3447,\n    y: 13.6431,\n    width: 35.052,\n    height: 3.032,\n    rx: 1.516,\n    fill: \"#94BFFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 27.4854,\n    y: 22.6997,\n    width: 9.65224,\n    height: 4.064,\n    rx: 0.507999,\n    fill: \"#94BFFF\"\n  })), /* @__PURE__ */ react.exports.createElement(\"defs\", null, /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip0\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 0.863281,\n    y: 0.15918,\n    width: 40,\n    height: 40,\n    rx: 20,\n    fill: \"white\"\n  }))));\n}\nfunction SvgComponent$U(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip0)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"mask\", {\n    id: \"path-2-inside-1\",\n    fill: \"white\"\n  }, /* @__PURE__ */ react.exports.createElement(\"path\", {\n    fillRule: \"evenodd\",\n    clipRule: \"evenodd\",\n    d: \"M10.7215 6.95166C9.59921 6.95166 8.68945 7.86142 8.68945 8.98366V29.3036C8.68945 30.4259 9.59921 31.3356 10.7215 31.3356H21.8168L25.8988 34.6012C26.187 34.8318 26.5964 34.8318 26.8845 34.6012L30.9665 31.3356H55.4254C56.5476 31.3356 57.4574 30.4259 57.4574 29.3036V8.98366C57.4574 7.86142 56.5476 6.95166 55.4254 6.95166H10.7215Z\"\n  })), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    fillRule: \"evenodd\",\n    clipRule: \"evenodd\",\n    d: \"M10.7215 6.95166C9.59921 6.95166 8.68945 7.86142 8.68945 8.98366V29.3036C8.68945 30.4259 9.59921 31.3356 10.7215 31.3356H21.8168L25.8988 34.6012C26.187 34.8318 26.5964 34.8318 26.8845 34.6012L30.9665 31.3356H55.4254C56.5476 31.3356 57.4574 30.4259 57.4574 29.3036V8.98366C57.4574 7.86142 56.5476 6.95166 55.4254 6.95166H10.7215Z\",\n    fill: \"#4E5969\",\n    fillOpacity: 0.1\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M21.8168 31.3356L22.7539 30.1643L22.343 29.8356H21.8168V31.3356ZM25.8988 34.6012L24.9618 35.7726L24.9618 35.7726L25.8988 34.6012ZM26.8845 34.6012L27.8215 35.7726L27.8215 35.7726L26.8845 34.6012ZM30.9665 31.3356V29.8356H30.4403L30.0295 30.1643L30.9665 31.3356ZM10.1895 8.98366C10.1895 8.68984 10.4276 8.45166 10.7215 8.45166V5.45166C8.77078 5.45166 7.18945 7.03299 7.18945 8.98366H10.1895ZM10.1895 29.3036V8.98366H7.18945V29.3036H10.1895ZM10.7215 29.8356C10.4276 29.8356 10.1895 29.5975 10.1895 29.3036H7.18945C7.18945 31.2543 8.77078 32.8356 10.7215 32.8356V29.8356ZM21.8168 29.8356H10.7215V32.8356H21.8168V29.8356ZM20.8798 32.5069L24.9618 35.7726L26.8359 33.4299L22.7539 30.1643L20.8798 32.5069ZM24.9618 35.7726C25.7977 36.4413 26.9856 36.4413 27.8215 35.7726L25.9475 33.4299C26.2072 33.2222 26.5762 33.2222 26.8359 33.4299L24.9618 35.7726ZM27.8215 35.7726L31.9036 32.5069L30.0295 30.1643L25.9475 33.4299L27.8215 35.7726ZM55.4254 29.8356H30.9665V32.8356H55.4254V29.8356ZM55.9574 29.3036C55.9574 29.5975 55.7192 29.8356 55.4254 29.8356V32.8356C57.3761 32.8356 58.9574 31.2543 58.9574 29.3036H55.9574ZM55.9574 8.98366V29.3036H58.9574V8.98366H55.9574ZM55.4254 8.45166C55.7192 8.45166 55.9574 8.68984 55.9574 8.98366H58.9574C58.9574 7.03299 57.3761 5.45166 55.4254 5.45166V8.45166ZM10.7215 8.45166H55.4254V5.45166H10.7215V8.45166Z\",\n    fill: \"#4E5969\",\n    mask: \"url(#path-2-inside-1)\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 13.8633,\n    y: 12.1592,\n    width: 6,\n    height: 6,\n    rx: 3,\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    opacity: 0.3,\n    x: 22.3447,\n    y: 13.6431,\n    width: 35.052,\n    height: 3.032,\n    rx: 1.516,\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    opacity: 0.3,\n    x: 27.4854,\n    y: 22.6997,\n    width: 9.65224,\n    height: 4.064,\n    rx: 0.507999,\n    fill: \"#4E5969\"\n  })), /* @__PURE__ */ react.exports.createElement(\"defs\", null, /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip0\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 0.863281,\n    y: 0.15918,\n    width: 40,\n    height: 40,\n    rx: 20,\n    fill: \"white\"\n  }))));\n}\nfunction SvgComponent$T(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip0)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"mask\", {\n    id: \"path-2-inside-1\",\n    fill: \"white\"\n  }, /* @__PURE__ */ react.exports.createElement(\"path\", {\n    fillRule: \"evenodd\",\n    clipRule: \"evenodd\",\n    d: \"M7.30078 9.19043C6.3688 9.19043 5.61328 9.94595 5.61328 10.8779V27.7529C5.61328 28.6849 6.3688 29.4404 7.30078 29.4404H18.8633L21.565 32.1421C21.7297 32.3069 21.9968 32.3069 22.1616 32.1421L24.8633 29.4404H35.4258C36.3578 29.4404 37.1133 28.6849 37.1133 27.7529V10.8779C37.1133 9.94595 36.3578 9.19043 35.4258 9.19043H7.30078Z\"\n  })), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    fillRule: \"evenodd\",\n    clipRule: \"evenodd\",\n    d: \"M7.30078 9.19043C6.3688 9.19043 5.61328 9.94595 5.61328 10.8779V27.7529C5.61328 28.6849 6.3688 29.4404 7.30078 29.4404H18.8633L21.565 32.1421C21.7297 32.3069 21.9968 32.3069 22.1616 32.1421L24.8633 29.4404H35.4258C36.3578 29.4404 37.1133 28.6849 37.1133 27.7529V10.8779C37.1133 9.94595 36.3578 9.19043 35.4258 9.19043H7.30078Z\",\n    fill: \"#E8F3FF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M18.8633 29.4404L19.9239 28.3798L19.4846 27.9404H18.8633V29.4404ZM21.565 32.1421L22.6256 31.0815L22.6256 31.0815L21.565 32.1421ZM24.8633 29.4404V27.9404H24.242L23.8026 28.3798L24.8633 29.4404ZM7.11328 10.8779C7.11328 10.7744 7.19723 10.6904 7.30078 10.6904V7.69043C5.54037 7.69043 4.11328 9.11752 4.11328 10.8779H7.11328ZM7.11328 27.7529V10.8779H4.11328V27.7529H7.11328ZM7.30078 27.9404C7.19723 27.9404 7.11328 27.8565 7.11328 27.7529H4.11328C4.11328 29.5133 5.54037 30.9404 7.30078 30.9404V27.9404ZM18.8633 27.9404H7.30078V30.9404H18.8633V27.9404ZM17.8026 30.5011L20.5043 33.2028L22.6256 31.0815L19.9239 28.3798L17.8026 30.5011ZM20.5043 33.2028C21.2548 33.9533 22.4717 33.9533 23.2223 33.2028L21.1009 31.0815C21.522 30.6604 22.2046 30.6604 22.6256 31.0815L20.5043 33.2028ZM23.2223 33.2028L25.9239 30.5011L23.8026 28.3798L21.1009 31.0815L23.2223 33.2028ZM35.4258 27.9404H24.8633V30.9404H35.4258V27.9404ZM35.6133 27.7529C35.6133 27.8565 35.5293 27.9404 35.4258 27.9404V30.9404C37.1862 30.9404 38.6133 29.5133 38.6133 27.7529H35.6133ZM35.6133 10.8779V27.7529H38.6133V10.8779H35.6133ZM35.4258 10.6904C35.5293 10.6904 35.6133 10.7744 35.6133 10.8779H38.6133C38.6133 9.11752 37.1862 7.69043 35.4258 7.69043V10.6904ZM7.30078 10.6904H35.4258V7.69043H7.30078V10.6904Z\",\n    fill: \"#165DFF\",\n    mask: \"url(#path-2-inside-1)\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 10.8633,\n    y: 16.1592,\n    width: 12,\n    height: 2,\n    rx: 1,\n    fill: \"#165DFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 10.8633,\n    y: 21.1592,\n    width: 21,\n    height: 2,\n    rx: 1,\n    fill: \"#94BFFF\"\n  })), /* @__PURE__ */ react.exports.createElement(\"defs\", null, /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip0\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 0.863281,\n    y: 0.15918,\n    width: 40,\n    height: 40,\n    rx: 20,\n    fill: \"white\"\n  }))));\n}\nfunction SvgComponent$S(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip0)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"mask\", {\n    id: \"path-2-inside-1\",\n    fill: \"white\"\n  }, /* @__PURE__ */ react.exports.createElement(\"path\", {\n    fillRule: \"evenodd\",\n    clipRule: \"evenodd\",\n    d: \"M7.30078 9.19043C6.3688 9.19043 5.61328 9.94595 5.61328 10.8779V27.7529C5.61328 28.6849 6.3688 29.4404 7.30078 29.4404H18.8633L21.565 32.1421C21.7297 32.3069 21.9968 32.3069 22.1616 32.1421L24.8633 29.4404H35.4258C36.3578 29.4404 37.1133 28.6849 37.1133 27.7529V10.8779C37.1133 9.94595 36.3578 9.19043 35.4258 9.19043H7.30078Z\"\n  })), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    fillRule: \"evenodd\",\n    clipRule: \"evenodd\",\n    d: \"M7.30078 9.19043C6.3688 9.19043 5.61328 9.94595 5.61328 10.8779V27.7529C5.61328 28.6849 6.3688 29.4404 7.30078 29.4404H18.8633L21.565 32.1421C21.7297 32.3069 21.9968 32.3069 22.1616 32.1421L24.8633 29.4404H35.4258C36.3578 29.4404 37.1133 28.6849 37.1133 27.7529V10.8779C37.1133 9.94595 36.3578 9.19043 35.4258 9.19043H7.30078Z\",\n    fill: \"#4E5969\",\n    fillOpacity: 0.1\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M18.8633 29.4404L19.9239 28.3798L19.4846 27.9404H18.8633V29.4404ZM21.565 32.1421L22.6256 31.0815L22.6256 31.0815L21.565 32.1421ZM24.8633 29.4404V27.9404H24.242L23.8026 28.3798L24.8633 29.4404ZM7.11328 10.8779C7.11328 10.7744 7.19723 10.6904 7.30078 10.6904V7.69043C5.54037 7.69043 4.11328 9.11752 4.11328 10.8779H7.11328ZM7.11328 27.7529V10.8779H4.11328V27.7529H7.11328ZM7.30078 27.9404C7.19723 27.9404 7.11328 27.8565 7.11328 27.7529H4.11328C4.11328 29.5133 5.54037 30.9404 7.30078 30.9404V27.9404ZM18.8633 27.9404H7.30078V30.9404H18.8633V27.9404ZM17.8026 30.5011L20.5043 33.2028L22.6256 31.0815L19.9239 28.3798L17.8026 30.5011ZM20.5043 33.2028C21.2548 33.9533 22.4717 33.9533 23.2223 33.2028L21.1009 31.0815C21.522 30.6604 22.2046 30.6604 22.6256 31.0815L20.5043 33.2028ZM23.2223 33.2028L25.9239 30.5011L23.8026 28.3798L21.1009 31.0815L23.2223 33.2028ZM35.4258 27.9404H24.8633V30.9404H35.4258V27.9404ZM35.6133 27.7529C35.6133 27.8565 35.5293 27.9404 35.4258 27.9404V30.9404C37.1862 30.9404 38.6133 29.5133 38.6133 27.7529H35.6133ZM35.6133 10.8779V27.7529H38.6133V10.8779H35.6133ZM35.4258 10.6904C35.5293 10.6904 35.6133 10.7744 35.6133 10.8779H38.6133C38.6133 9.11752 37.1862 7.69043 35.4258 7.69043V10.6904ZM7.30078 10.6904H35.4258V7.69043H7.30078V10.6904Z\",\n    fill: \"#4E5969\",\n    mask: \"url(#path-2-inside-1)\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 10.8633,\n    y: 16.1592,\n    width: 12,\n    height: 2,\n    rx: 1,\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    opacity: 0.3,\n    x: 10.8633,\n    y: 21.1592,\n    width: 21,\n    height: 2,\n    rx: 1,\n    fill: \"#4E5969\"\n  })), /* @__PURE__ */ react.exports.createElement(\"defs\", null, /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip0\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 0.863281,\n    y: 0.15918,\n    width: 40,\n    height: 40,\n    rx: 20,\n    fill: \"white\"\n  }))));\n}\nfunction SvgComponent$R(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip0)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M6.86328 20.1592L78.8633 20.1592\",\n    stroke: \"#BEDAFF\",\n    strokeWidth: 6,\n    strokeLinecap: \"round\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M6.86328 20.1592H27.046\",\n    stroke: \"#4080FF\",\n    strokeWidth: 6,\n    strokeLinecap: \"round\"\n  })), /* @__PURE__ */ react.exports.createElement(\"defs\", null, /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip0\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 0.863281,\n    y: 0.15918,\n    width: 40,\n    height: 40,\n    rx: 20,\n    fill: \"white\"\n  }))));\n}\nfunction SvgComponent$Q(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip0)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"path\", {\n    opacity: 0.3,\n    d: \"M6.86328 20.1592L78.8633 20.1592\",\n    stroke: \"#4E5969\",\n    strokeWidth: 6,\n    strokeLinecap: \"round\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M6.86328 20.1592H27.046\",\n    stroke: \"#4E5969\",\n    strokeWidth: 6,\n    strokeLinecap: \"round\"\n  })), /* @__PURE__ */ react.exports.createElement(\"defs\", null, /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip0\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 0.863281,\n    y: 0.15918,\n    width: 40,\n    height: 40,\n    rx: 20,\n    fill: \"white\"\n  }))));\n}\nfunction SvgComponent$P(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 10.8633,\n    y: 10.5967,\n    width: 20,\n    height: 20,\n    rx: 10,\n    fill: \"#165DFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 16.8633,\n    y: 16.5967,\n    width: 8,\n    height: 8,\n    rx: 4,\n    fill: \"white\"\n  }));\n}\nfunction SvgComponent$O(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 10.8633,\n    y: 10.5967,\n    width: 20,\n    height: 20,\n    rx: 10,\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 16.8633,\n    y: 16.5967,\n    width: 8,\n    height: 8,\n    rx: 4,\n    fill: \"white\"\n  }));\n}\nfunction SvgComponent$N(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip0)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M7.82682 15.7263C8.00354 15.3143 8.58768 15.3143 8.7644 15.7263L9.66415 17.8241C9.73782 17.9959 9.89954 18.1136 10.0856 18.1309L12.3543 18.3422C12.7995 18.3836 12.9797 18.9369 12.6445 19.2326L10.9298 20.7451C10.7901 20.8683 10.7287 21.0577 10.7695 21.2394L11.2708 23.4727C11.3689 23.9097 10.8966 24.2519 10.5119 24.0226L8.55683 22.857C8.3959 22.761 8.19533 22.761 8.0344 22.857L6.07934 24.0226C5.69467 24.2519 5.22233 23.9097 5.32042 23.4727L5.82174 21.2394C5.86251 21.0577 5.80108 20.8683 5.66145 20.7451L3.94675 19.2326C3.6115 18.9369 3.79177 18.3836 4.23688 18.3422L6.50558 18.1309C6.69168 18.1136 6.8534 17.9959 6.92708 17.8241L7.82682 15.7263Z\",\n    fill: \"#165DFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M21.0602 15.7263C21.2369 15.3143 21.8211 15.3143 21.9978 15.7263L22.8975 17.8241C22.9712 17.9959 23.1329 18.1136 23.319 18.1309L25.5877 18.3422C26.0329 18.3836 26.2131 18.9369 25.8779 19.2326L24.1632 20.7451C24.0235 20.8683 23.9621 21.0577 24.0029 21.2394L24.5042 23.4727C24.6023 23.9097 24.1299 24.2519 23.7453 24.0226L21.7902 22.857C21.6293 22.761 21.4287 22.761 21.2678 22.857L19.3127 24.0226C18.9281 24.2519 18.4557 23.9097 18.5538 23.4727L19.0551 21.2394C19.0959 21.0577 19.0345 20.8683 18.8949 20.7451L17.1801 19.2326C16.8449 18.9369 17.0252 18.3836 17.4703 18.3422L19.739 18.1309C19.9251 18.1136 20.0868 17.9959 20.1605 17.8241L21.0602 15.7263Z\",\n    fill: \"#165DFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M34.2946 15.7263C34.4713 15.3143 35.0555 15.3143 35.2322 15.7263L36.1319 17.8241C36.2056 17.9959 36.3673 18.1136 36.5534 18.1309L38.8221 18.3422C39.2672 18.3836 39.4475 18.9369 39.1122 19.2326L37.3975 20.7451C37.2579 20.8683 37.1965 21.0577 37.2373 21.2394L37.7386 23.4727C37.8367 23.9097 37.3643 24.2519 36.9797 24.0226L35.0246 22.857C34.8637 22.761 34.6631 22.761 34.5022 22.857L32.5471 24.0226C32.1624 24.2519 31.6901 23.9097 31.7882 23.4727L32.2895 21.2394C32.3303 21.0577 32.2688 20.8683 32.1292 20.7451L30.4145 19.2326C30.0793 18.9369 30.2595 18.3836 30.7047 18.3422L32.9734 18.1309C33.1595 18.1136 33.3212 17.9959 33.3948 17.8241L34.2946 15.7263Z\",\n    fill: \"#BEDAFF\"\n  })), /* @__PURE__ */ react.exports.createElement(\"defs\", null, /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip0\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 0.865234,\n    y: 0.15918,\n    width: 40,\n    height: 40,\n    rx: 20,\n    fill: \"white\"\n  }))));\n}\nfunction SvgComponent$M(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip0)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M7.82682 15.7263C8.00354 15.3143 8.58768 15.3143 8.7644 15.7263L9.66415 17.8241C9.73782 17.9959 9.89954 18.1136 10.0856 18.1309L12.3543 18.3422C12.7995 18.3836 12.9797 18.9369 12.6445 19.2326L10.9298 20.7451C10.7901 20.8683 10.7287 21.0577 10.7695 21.2394L11.2708 23.4727C11.3689 23.9097 10.8966 24.2519 10.5119 24.0226L8.55683 22.857C8.3959 22.761 8.19533 22.761 8.0344 22.857L6.07934 24.0226C5.69467 24.2519 5.22233 23.9097 5.32042 23.4727L5.82174 21.2394C5.86251 21.0577 5.80108 20.8683 5.66145 20.7451L3.94675 19.2326C3.6115 18.9369 3.79177 18.3836 4.23688 18.3422L6.50558 18.1309C6.69168 18.1136 6.8534 17.9959 6.92708 17.8241L7.82682 15.7263Z\",\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M21.0602 15.7263C21.2369 15.3143 21.8211 15.3143 21.9978 15.7263L22.8975 17.8241C22.9712 17.9959 23.1329 18.1136 23.319 18.1309L25.5877 18.3422C26.0329 18.3836 26.2131 18.9369 25.8779 19.2326L24.1632 20.7451C24.0235 20.8683 23.9621 21.0577 24.0029 21.2394L24.5042 23.4727C24.6023 23.9097 24.1299 24.2519 23.7453 24.0226L21.7902 22.857C21.6293 22.761 21.4287 22.761 21.2678 22.857L19.3127 24.0226C18.9281 24.2519 18.4557 23.9097 18.5538 23.4727L19.0551 21.2394C19.0959 21.0577 19.0345 20.8683 18.8949 20.7451L17.1801 19.2326C16.8449 18.9369 17.0252 18.3836 17.4703 18.3422L19.739 18.1309C19.9251 18.1136 20.0868 17.9959 20.1605 17.8241L21.0602 15.7263Z\",\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    opacity: 0.3,\n    d: \"M34.2946 15.7263C34.4713 15.3143 35.0555 15.3143 35.2322 15.7263L36.1319 17.8241C36.2056 17.9959 36.3673 18.1136 36.5534 18.1309L38.8221 18.3422C39.2672 18.3836 39.4475 18.9369 39.1122 19.2326L37.3975 20.7451C37.2579 20.8683 37.1965 21.0577 37.2373 21.2394L37.7386 23.4727C37.8367 23.9097 37.3643 24.2519 36.9797 24.0226L35.0246 22.857C34.8637 22.761 34.6631 22.761 34.5022 22.857L32.5471 24.0226C32.1624 24.2519 31.6901 23.9097 31.7882 23.4727L32.2895 21.2394C32.3303 21.0577 32.2688 20.8683 32.1292 20.7451L30.4145 19.2326C30.0793 18.9369 30.2595 18.3836 30.7047 18.3422L32.9734 18.1309C33.1595 18.1136 33.3212 17.9959 33.3948 17.8241L34.2946 15.7263Z\",\n    fill: \"#4E5969\"\n  })), /* @__PURE__ */ react.exports.createElement(\"defs\", null, /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip0\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 0.865234,\n    y: 0.15918,\n    width: 40,\n    height: 40,\n    rx: 20,\n    fill: \"white\"\n  }))));\n}\nfunction SvgComponent$L(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip0)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 16.6641,\n    y: 8.96143,\n    width: 8.39823,\n    height: 22.3953,\n    rx: 1.39971,\n    fill: \"#165DFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    fillRule: \"evenodd\",\n    clipRule: \"evenodd\",\n    d: \"M32.0175 14.8559L36.7905 19.6289C37.0834 19.9218 37.0834 20.3966 36.7905 20.6895L32.0175 25.4625C31.7246 25.7554 31.2497 25.7554 30.9568 25.4625C30.664 25.1696 30.664 24.6947 30.9568 24.4018L34.4495 20.9092L25.0625 20.9092V19.4092L34.4495 19.4092L30.9568 15.9166C30.664 15.6237 30.664 15.1488 30.9568 14.8559C31.2497 14.563 31.7246 14.563 32.0175 14.8559Z\",\n    fill: \"#165DFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M4.97155 19.6643C4.69824 19.9376 4.69824 20.3807 4.97155 20.654L9.42538 25.1079C9.69869 25.3812 10.1418 25.3812 10.4151 25.1079C10.6884 24.8346 10.6884 24.3915 10.4151 24.1181L6.45616 20.1592L10.4151 16.2002C10.6884 15.9269 10.6884 15.4838 10.4151 15.2105C10.1418 14.9372 9.69869 14.9372 9.42538 15.2105L4.97155 19.6643ZM16.6641 19.4593L5.46642 19.4593L5.46642 20.859L16.6641 20.859L16.6641 19.4593Z\",\n    fill: \"#165DFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    fillRule: \"evenodd\",\n    clipRule: \"evenodd\",\n    d: \"M9.70906 25.4625L4.93609 20.6895C4.64319 20.3966 4.64319 19.9217 4.93609 19.6288L9.70906 14.8559C10.002 14.563 10.4768 14.563 10.7697 14.8559C11.0626 15.1487 11.0626 15.6236 10.7697 15.9165L7.27708 19.4092L16.6641 19.4092L16.6641 20.9092L7.27708 20.9092L10.7697 24.4018C11.0626 24.6947 11.0626 25.1696 10.7697 25.4625C10.4768 25.7554 10.002 25.7554 9.70906 25.4625Z\",\n    fill: \"#165DFF\"\n  })), /* @__PURE__ */ react.exports.createElement(\"defs\", null, /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip0\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 0.863281,\n    y: 0.15918,\n    width: 40,\n    height: 40,\n    rx: 20,\n    fill: \"white\"\n  }))));\n}\nfunction SvgComponent$K(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip0)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 16.6641,\n    y: 8.96143,\n    width: 8.39823,\n    height: 22.3953,\n    rx: 1.39971,\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    fillRule: \"evenodd\",\n    clipRule: \"evenodd\",\n    d: \"M32.0175 14.8559L36.7905 19.6289C37.0834 19.9218 37.0834 20.3966 36.7905 20.6895L32.0175 25.4625C31.7246 25.7554 31.2497 25.7554 30.9568 25.4625C30.664 25.1696 30.664 24.6947 30.9568 24.4018L34.4495 20.9092L25.0625 20.9092V19.4092L34.4495 19.4092L30.9568 15.9166C30.664 15.6237 30.664 15.1488 30.9568 14.8559C31.2497 14.563 31.7246 14.563 32.0175 14.8559Z\",\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M4.97155 19.6643C4.69824 19.9376 4.69824 20.3807 4.97155 20.654L9.42538 25.1079C9.69869 25.3812 10.1418 25.3812 10.4151 25.1079C10.6884 24.8346 10.6884 24.3915 10.4151 24.1181L6.45616 20.1592L10.4151 16.2002C10.6884 15.9269 10.6884 15.4838 10.4151 15.2105C10.1418 14.9372 9.69869 14.9372 9.42538 15.2105L4.97155 19.6643ZM16.6641 19.4593L5.46642 19.4593L5.46642 20.859L16.6641 20.859L16.6641 19.4593Z\",\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    fillRule: \"evenodd\",\n    clipRule: \"evenodd\",\n    d: \"M9.70906 25.4625L4.93609 20.6895C4.64319 20.3966 4.64319 19.9217 4.93609 19.6288L9.70906 14.8559C10.002 14.563 10.4768 14.563 10.7697 14.8559C11.0626 15.1487 11.0626 15.6236 10.7697 15.9165L7.27708 19.4092L16.6641 19.4092L16.6641 20.9092L7.27708 20.9092L10.7697 24.4018C11.0626 24.6947 11.0626 25.1696 10.7697 25.4625C10.4768 25.7554 10.002 25.7554 9.70906 25.4625Z\",\n    fill: \"#4E5969\"\n  })), /* @__PURE__ */ react.exports.createElement(\"defs\", null, /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip0\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 0.863281,\n    y: 0.15918,\n    width: 40,\n    height: 40,\n    rx: 20,\n    fill: \"white\"\n  }))));\n}\nfunction SvgComponent$J(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip0)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 10.708,\n    y: 27.9678,\n    width: 20.3126,\n    height: 2.53907,\n    rx: 1.26954,\n    fill: \"#6AA1FF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 16.502,\n    y: 33.0459,\n    width: 8.72456,\n    height: 2.53907,\n    rx: 1.26954,\n    fill: \"#BEDAFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 10.708,\n    y: 4.11621,\n    width: 20.3126,\n    height: 20.3126,\n    rx: 10.1563,\n    fill: \"#165DFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    fillRule: \"evenodd\",\n    clipRule: \"evenodd\",\n    d: \"M21.5384 17.3874C21.8248 17.3874 22.0569 17.6196 22.0569 17.9059V19.254C22.0569 19.5403 21.8248 19.7725 21.5384 19.7725H20.1904C19.904 19.7725 19.6719 19.5403 19.6719 19.254V17.9059C19.6719 17.6196 19.904 17.3874 20.1904 17.3874H21.5384ZM21.5384 8.77246C21.8248 8.77246 22.0569 9.00459 22.0569 9.29094V14.7456C22.0569 15.0319 21.8248 15.2641 21.5384 15.2641H20.1904C19.904 15.2641 19.6719 15.0319 19.6719 14.7456V9.29094C19.6719 9.00459 19.904 8.77246 20.1904 8.77246H21.5384Z\",\n    fill: \"white\"\n  })), /* @__PURE__ */ react.exports.createElement(\"defs\", null, /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip0\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 0.864258,\n    y: 0.15918,\n    width: 40,\n    height: 40,\n    rx: 20,\n    fill: \"white\"\n  }))));\n}\nfunction SvgComponent$I(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip0)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    opacity: 0.4,\n    x: 10.708,\n    y: 27.9678,\n    width: 20.3126,\n    height: 2.53907,\n    rx: 1.26954,\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    opacity: 0.2,\n    x: 16.502,\n    y: 33.0459,\n    width: 8.72456,\n    height: 2.53907,\n    rx: 1.26954,\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 10.708,\n    y: 4.11621,\n    width: 20.3126,\n    height: 20.3126,\n    rx: 10.1563,\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 11.458,\n    y: 4.86621,\n    width: 18.8126,\n    height: 18.8126,\n    rx: 9.4063,\n    stroke: \"#4E5969\",\n    strokeOpacity: 0.1,\n    strokeWidth: 1.5\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    fillRule: \"evenodd\",\n    clipRule: \"evenodd\",\n    d: \"M21.5384 17.3874C21.8248 17.3874 22.0569 17.6196 22.0569 17.9059V19.254C22.0569 19.5403 21.8248 19.7725 21.5384 19.7725H20.1904C19.904 19.7725 19.6719 19.5403 19.6719 19.254V17.9059C19.6719 17.6196 19.904 17.3874 20.1904 17.3874H21.5384ZM21.5384 8.77246C21.8248 8.77246 22.0569 9.00459 22.0569 9.29094V14.7456C22.0569 15.0319 21.8248 15.2641 21.5384 15.2641H20.1904C19.904 15.2641 19.6719 15.0319 19.6719 14.7456V9.29094C19.6719 9.00459 19.904 8.77246 20.1904 8.77246H21.5384Z\",\n    fill: \"white\"\n  })), /* @__PURE__ */ react.exports.createElement(\"defs\", null, /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip0\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 0.864258,\n    y: 0.15918,\n    width: 40,\n    height: 40,\n    rx: 20,\n    fill: \"white\"\n  }))));\n}\nfunction SvgComponent$H(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip0)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip1)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M-22.835 12.5578C-22.835 11.708 -22.146 11.019 -21.2962 11.019H31.0228C31.8727 11.019 32.5616 11.708 32.5616 12.5578V27.9458C32.5616 28.7956 31.8727 29.4846 31.0228 29.4846H-21.2962C-22.146 29.4846 -22.835 28.7956 -22.835 27.9458V12.5578Z\",\n    fill: \"#E8F3FF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    fillRule: \"evenodd\",\n    clipRule: \"evenodd\",\n    d: \"M31.0228 12.5578H-21.2962L-21.2962 27.9458H31.0228V12.5578ZM-21.2962 11.019C-22.146 11.019 -22.835 11.708 -22.835 12.5578V27.9458C-22.835 28.7956 -22.146 29.4846 -21.2962 29.4846H31.0228C31.8727 29.4846 32.5616 28.7956 32.5616 27.9458V12.5578C32.5616 11.708 31.8727 11.019 31.0228 11.019H-21.2962Z\",\n    fill: \"#165DFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M21.085 18.6061C21.2802 18.4108 21.5968 18.4108 21.7921 18.6061L23.9721 20.7862L26.0897 18.6686C26.285 18.4733 26.6016 18.4733 26.7968 18.6686L27.1504 19.0221C27.3456 19.2174 27.3456 19.534 27.1504 19.7292L24.322 22.5577C24.1267 22.7529 23.8101 22.7529 23.6148 22.5577L23.2613 22.2041C23.2438 22.1866 23.2278 22.1681 23.2135 22.1488L20.7314 19.6667C20.5361 19.4715 20.5361 19.1549 20.7314 18.9596L21.085 18.6061Z\",\n    fill: \"#165DFF\"\n  }))), /* @__PURE__ */ react.exports.createElement(\"defs\", null, /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip0\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 0.863281,\n    y: 0.59668,\n    width: 40,\n    height: 40,\n    rx: 20,\n    fill: \"white\"\n  })), /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip1\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    width: 56,\n    height: 19.3103,\n    fill: \"white\",\n    transform: \"translate(-23.1367 10.5967)\"\n  }))));\n}\nfunction SvgComponent$G(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip0)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip1)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"path\", {\n    opacity: 0.1,\n    d: \"M-22.835 12.5578C-22.835 11.708 -22.146 11.019 -21.2962 11.019H31.0228C31.8727 11.019 32.5616 11.708 32.5616 12.5578V27.9458C32.5616 28.7956 31.8727 29.4846 31.0228 29.4846H-21.2962C-22.146 29.4846 -22.835 28.7956 -22.835 27.9458V12.5578Z\",\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    fillRule: \"evenodd\",\n    clipRule: \"evenodd\",\n    d: \"M31.0228 12.5578H-21.2962L-21.2962 27.9458H31.0228V12.5578ZM-21.2962 11.019C-22.146 11.019 -22.835 11.708 -22.835 12.5578V27.9458C-22.835 28.7956 -22.146 29.4846 -21.2962 29.4846H31.0228C31.8727 29.4846 32.5616 28.7956 32.5616 27.9458V12.5578C32.5616 11.708 31.8727 11.019 31.0228 11.019H-21.2962Z\",\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M21.085 18.6061C21.2802 18.4108 21.5968 18.4108 21.7921 18.6061L23.9721 20.7862L26.0897 18.6686C26.285 18.4733 26.6016 18.4733 26.7968 18.6686L27.1504 19.0221C27.3456 19.2174 27.3456 19.534 27.1504 19.7292L24.322 22.5577C24.1267 22.7529 23.8101 22.7529 23.6148 22.5577L23.2613 22.2041C23.2438 22.1866 23.2278 22.1681 23.2135 22.1488L20.7314 19.6667C20.5361 19.4715 20.5361 19.1549 20.7314 18.9596L21.085 18.6061Z\",\n    fill: \"#4E5969\"\n  }))), /* @__PURE__ */ react.exports.createElement(\"defs\", null, /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip0\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 0.863281,\n    y: 0.59668,\n    width: 40,\n    height: 40,\n    rx: 20,\n    fill: \"white\"\n  })), /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip1\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    width: 56,\n    height: 19.3103,\n    fill: \"white\",\n    transform: \"translate(-23.1367 10.5967)\"\n  }))));\n}\nfunction SvgComponent$F(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 7.43457,\n    y: 11.3804,\n    width: 26.8609,\n    height: 3.85247,\n    rx: 0.4,\n    fill: \"#94BFFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 7.43457,\n    y: 18.2329,\n    width: 26.8609,\n    height: 3.85247,\n    rx: 0.4,\n    fill: \"#94BFFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 7.43457,\n    y: 25.0854,\n    width: 16.2092,\n    height: 3.85247,\n    rx: 0.4,\n    fill: \"#94BFFF\"\n  }));\n}\nfunction SvgComponent$E(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 7.43457,\n    y: 11.3804,\n    width: 26.8609,\n    height: 3.85247,\n    rx: 0.4,\n    fill: \"#4E5969\",\n    fillOpacity: 0.3\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 7.43457,\n    y: 18.2329,\n    width: 26.8609,\n    height: 3.85247,\n    rx: 0.4,\n    fill: \"#4E5969\",\n    fillOpacity: 0.3\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 7.43457,\n    y: 25.0854,\n    width: 16.2092,\n    height: 3.85247,\n    rx: 0.4,\n    fill: \"#4E5969\",\n    fillOpacity: 0.3\n  }));\n}\nfunction SvgComponent$D(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip0)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"path\", {\n    fillRule: \"evenodd\",\n    clipRule: \"evenodd\",\n    d: \"M-3.75586 32.4C-3.75586 31.943 -3.38535 31.5724 -2.92831 31.5724L56.6549 31.5724C57.112 31.5724 57.4825 31.943 57.4825 32.4C57.4825 32.857 57.112 33.2275 56.6549 33.2275L-2.92831 33.2275C-3.38535 33.2275 -3.75586 32.857 -3.75586 32.4Z\",\n    fill: \"#BEDAFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    fillRule: \"evenodd\",\n    clipRule: \"evenodd\",\n    d: \"M-3.75586 32.4C-3.75586 31.943 -3.38535 31.5724 -2.92831 31.5724H21.0705C21.5275 31.5724 21.898 31.943 21.898 32.4C21.898 32.857 21.5275 33.2275 21.0705 33.2275H-2.92831C-3.38535 33.2275 -3.75586 32.857 -3.75586 32.4Z\",\n    fill: \"#165DFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 17.8633,\n    y: 28.8999,\n    width: 7,\n    height: 7,\n    rx: 3.5,\n    fill: \"#165DFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"mask\", {\n    id: \"path-5-inside-1\",\n    fill: \"white\"\n  }, /* @__PURE__ */ react.exports.createElement(\"path\", {\n    fillRule: \"evenodd\",\n    clipRule: \"evenodd\",\n    d: \"M7.60832 8.46387C6.92718 8.46387 6.375 9.01604 6.375 9.69719V22.647C6.375 23.3282 6.92718 23.8803 7.60832 23.8803H17.7832L20.4811 26.0386C20.7063 26.2188 21.0263 26.2188 21.2515 26.0386L23.9493 23.8803H34.1247C34.8058 23.8803 35.358 23.3282 35.358 22.647V9.69719C35.358 9.01604 34.8058 8.46387 34.1247 8.46387H7.60832Z\"\n  })), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    fillRule: \"evenodd\",\n    clipRule: \"evenodd\",\n    d: \"M7.60832 8.46387C6.92718 8.46387 6.375 9.01604 6.375 9.69719V22.647C6.375 23.3282 6.92718 23.8803 7.60832 23.8803H17.7832L20.4811 26.0386C20.7063 26.2188 21.0263 26.2188 21.2515 26.0386L23.9493 23.8803H34.1247C34.8058 23.8803 35.358 23.3282 35.358 22.647V9.69719C35.358 9.01604 34.8058 8.46387 34.1247 8.46387H7.60832Z\",\n    fill: \"#E8F3FF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M17.7832 23.8803L18.7203 22.709L18.3094 22.3803H17.7832V23.8803ZM20.4811 26.0386L19.544 27.2099L19.544 27.2099L20.4811 26.0386ZM21.2515 26.0386L20.3145 24.8673L20.3145 24.8673L21.2515 26.0386ZM23.9493 23.8803V22.3803H23.4232L23.0123 22.709L23.9493 23.8803ZM7.875 9.69719C7.875 9.84447 7.7556 9.96387 7.60832 9.96387V6.96387C6.09875 6.96387 4.875 8.18762 4.875 9.69719H7.875ZM7.875 22.647V9.69719H4.875V22.647H7.875ZM7.60832 22.3803C7.7556 22.3803 7.875 22.4997 7.875 22.647H4.875C4.875 24.1566 6.09875 25.3803 7.60832 25.3803V22.3803ZM17.7832 22.3803H7.60832V25.3803H17.7832V22.3803ZM16.8462 25.0516L19.544 27.2099L21.4181 24.8673L18.7203 22.709L16.8462 25.0516ZM19.544 27.2099C20.3171 27.8283 21.4155 27.8283 22.1885 27.2099L20.3145 24.8673C20.6371 24.6092 21.0955 24.6092 21.4181 24.8673L19.544 27.2099ZM22.1885 27.2099L24.8864 25.0516L23.0123 22.709L20.3145 24.8673L22.1885 27.2099ZM34.1247 22.3803H23.9493V25.3803H34.1247V22.3803ZM33.858 22.647C33.858 22.4997 33.9774 22.3803 34.1247 22.3803V25.3803C35.6342 25.3803 36.858 24.1566 36.858 22.647H33.858ZM33.858 9.69719V22.647H36.858V9.69719H33.858ZM34.1247 9.96387C33.9774 9.96387 33.858 9.84447 33.858 9.69719H36.858C36.858 8.18762 35.6342 6.96387 34.1247 6.96387V9.96387ZM7.60832 9.96387H34.1247V6.96387H7.60832V9.96387Z\",\n    fill: \"#165DFF\",\n    mask: \"url(#path-5-inside-1)\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M17.9041 19.2229V17.947H14.8291V17.0519L18.1245 12.5098H19.1862V16.9376H20.1778V17.947H19.1862V19.2229H17.9041ZM17.9041 16.9376V14.3761L16.0611 16.9376H17.9041Z\",\n    fill: \"#165DFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M21.2156 19.2229V18.3183L23.4993 16.0044C23.8065 15.687 24.0269 15.4077 24.1604 15.1665C24.294 14.9189 24.3607 14.6681 24.3607 14.4142C24.3607 13.7667 23.9501 13.443 23.1287 13.443C22.4877 13.443 21.8967 13.6715 21.3558 14.1286L20.9251 13.2144C21.2056 12.9732 21.5562 12.7796 21.9769 12.6336C22.3975 12.4876 22.8349 12.4146 23.289 12.4146C24.0436 12.4146 24.6212 12.5764 25.0218 12.9002C25.4292 13.2239 25.6328 13.6874 25.6328 14.2904C25.6328 14.6967 25.5293 15.0871 25.3223 15.4617C25.122 15.8362 24.8048 16.2393 24.3708 16.671L22.8182 18.2136H25.9033V19.2229H21.2156Z\",\n    fill: \"#165DFF\"\n  })), /* @__PURE__ */ react.exports.createElement(\"defs\", null, /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip0\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 0.863281,\n    y: 0.15918,\n    width: 40,\n    height: 40,\n    rx: 20,\n    fill: \"white\"\n  }))));\n}\nfunction SvgComponent$C(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip0)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"path\", {\n    opacity: 0.2,\n    fillRule: \"evenodd\",\n    clipRule: \"evenodd\",\n    d: \"M-3.75586 32.4C-3.75586 31.943 -3.38535 31.5724 -2.92831 31.5724L56.6549 31.5724C57.112 31.5724 57.4825 31.943 57.4825 32.4C57.4825 32.857 57.112 33.2275 56.6549 33.2275L-2.92831 33.2275C-3.38535 33.2275 -3.75586 32.857 -3.75586 32.4Z\",\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    fillRule: \"evenodd\",\n    clipRule: \"evenodd\",\n    d: \"M-3.75586 32.4C-3.75586 31.943 -3.38535 31.5724 -2.92831 31.5724H21.0705C21.5275 31.5724 21.898 31.943 21.898 32.4C21.898 32.857 21.5275 33.2275 21.0705 33.2275H-2.92831C-3.38535 33.2275 -3.75586 32.857 -3.75586 32.4Z\",\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 17.8633,\n    y: 28.8999,\n    width: 7,\n    height: 7,\n    rx: 3.5,\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"mask\", {\n    id: \"path-5-inside-1\",\n    fill: \"white\"\n  }, /* @__PURE__ */ react.exports.createElement(\"path\", {\n    fillRule: \"evenodd\",\n    clipRule: \"evenodd\",\n    d: \"M7.60832 8.46387C6.92718 8.46387 6.375 9.01604 6.375 9.69719V22.647C6.375 23.3282 6.92718 23.8803 7.60832 23.8803H17.7832L20.4811 26.0386C20.7063 26.2188 21.0263 26.2188 21.2515 26.0386L23.9493 23.8803H34.1247C34.8058 23.8803 35.358 23.3282 35.358 22.647V9.69719C35.358 9.01604 34.8058 8.46387 34.1247 8.46387H7.60832Z\"\n  })), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    fillRule: \"evenodd\",\n    clipRule: \"evenodd\",\n    d: \"M7.60832 8.46387C6.92718 8.46387 6.375 9.01604 6.375 9.69719V22.647C6.375 23.3282 6.92718 23.8803 7.60832 23.8803H17.7832L20.4811 26.0386C20.7063 26.2188 21.0263 26.2188 21.2515 26.0386L23.9493 23.8803H34.1247C34.8058 23.8803 35.358 23.3282 35.358 22.647V9.69719C35.358 9.01604 34.8058 8.46387 34.1247 8.46387H7.60832Z\",\n    fill: \"#4E5969\",\n    fillOpacity: 0.1\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M17.7832 23.8803L18.7203 22.709L18.3094 22.3803H17.7832V23.8803ZM20.4811 26.0386L19.544 27.2099L19.544 27.2099L20.4811 26.0386ZM21.2515 26.0386L20.3145 24.8673L20.3145 24.8673L21.2515 26.0386ZM23.9493 23.8803V22.3803H23.4232L23.0123 22.709L23.9493 23.8803ZM7.875 9.69719C7.875 9.84447 7.7556 9.96387 7.60832 9.96387V6.96387C6.09875 6.96387 4.875 8.18762 4.875 9.69719H7.875ZM7.875 22.647V9.69719H4.875V22.647H7.875ZM7.60832 22.3803C7.7556 22.3803 7.875 22.4997 7.875 22.647H4.875C4.875 24.1566 6.09875 25.3803 7.60832 25.3803V22.3803ZM17.7832 22.3803H7.60832V25.3803H17.7832V22.3803ZM16.8462 25.0516L19.544 27.2099L21.4181 24.8673L18.7203 22.709L16.8462 25.0516ZM19.544 27.2099C20.3171 27.8283 21.4155 27.8283 22.1885 27.2099L20.3145 24.8673C20.6371 24.6092 21.0955 24.6092 21.4181 24.8673L19.544 27.2099ZM22.1885 27.2099L24.8864 25.0516L23.0123 22.709L20.3145 24.8673L22.1885 27.2099ZM34.1247 22.3803H23.9493V25.3803H34.1247V22.3803ZM33.858 22.647C33.858 22.4997 33.9774 22.3803 34.1247 22.3803V25.3803C35.6342 25.3803 36.858 24.1566 36.858 22.647H33.858ZM33.858 9.69719V22.647H36.858V9.69719H33.858ZM34.1247 9.96387C33.9774 9.96387 33.858 9.84447 33.858 9.69719H36.858C36.858 8.18762 35.6342 6.96387 34.1247 6.96387V9.96387ZM7.60832 9.96387H34.1247V6.96387H7.60832V9.96387Z\",\n    fill: \"#4E5969\",\n    mask: \"url(#path-5-inside-1)\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M17.9041 19.2229V17.947H14.8291V17.0519L18.1245 12.5098H19.1862V16.9376H20.1778V17.947H19.1862V19.2229H17.9041ZM17.9041 16.9376V14.3761L16.0611 16.9376H17.9041Z\",\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M21.2156 19.2229V18.3183L23.4993 16.0044C23.8065 15.687 24.0269 15.4077 24.1604 15.1665C24.294 14.9189 24.3607 14.6681 24.3607 14.4142C24.3607 13.7667 23.9501 13.443 23.1287 13.443C22.4877 13.443 21.8967 13.6715 21.3558 14.1286L20.9251 13.2144C21.2056 12.9732 21.5562 12.7796 21.9769 12.6336C22.3975 12.4876 22.8349 12.4146 23.289 12.4146C24.0436 12.4146 24.6212 12.5764 25.0218 12.9002C25.4292 13.2239 25.6328 13.6874 25.6328 14.2904C25.6328 14.6967 25.5293 15.0871 25.3223 15.4617C25.122 15.8362 24.8048 16.2393 24.3708 16.671L22.8182 18.2136H25.9033V19.2229H21.2156Z\",\n    fill: \"#4E5969\"\n  })), /* @__PURE__ */ react.exports.createElement(\"defs\", null, /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip0\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 0.863281,\n    y: 0.15918,\n    width: 40,\n    height: 40,\n    rx: 20,\n    fill: \"white\"\n  }))));\n}\nfunction SvgComponent$B(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip0)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 9.86426,\n    y: 50.1592,\n    width: 61,\n    height: 23,\n    transform: \"rotate(-90 9.86426 50.1592)\",\n    fill: \"#E8F3FF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M9.98926 2.59668V36.7217\",\n    stroke: \"#165DFF\",\n    strokeWidth: 1.42188,\n    strokeDasharray: \"2.84 2.84\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M32.7393 2.59668V36.7217\",\n    stroke: \"#165DFF\",\n    strokeWidth: 1.42188,\n    strokeDasharray: \"2.84 2.84\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    fillRule: \"evenodd\",\n    clipRule: \"evenodd\",\n    d: \"M17.0986 23.7639L9.98926 19.6593L17.0986 15.5547V18.9483H25.6299V15.5547L32.7393 19.6593L25.6299 23.7639V20.3702H17.0986V23.7639Z\",\n    fill: \"#165DFF\"\n  })), /* @__PURE__ */ react.exports.createElement(\"defs\", null, /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip0\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 0.864258,\n    y: 0.15918,\n    width: 40,\n    height: 40,\n    rx: 20,\n    fill: \"white\"\n  }))));\n}\nfunction SvgComponent$A(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip0)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    opacity: 0.1,\n    x: 9.86426,\n    y: 50.1592,\n    width: 61,\n    height: 23,\n    transform: \"rotate(-90 9.86426 50.1592)\",\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M9.98926 2.59668V36.7217\",\n    stroke: \"#4E5969\",\n    strokeWidth: 1.42188,\n    strokeDasharray: \"2.84 2.84\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M32.7393 2.59668V36.7217\",\n    stroke: \"#4E5969\",\n    strokeWidth: 1.42188,\n    strokeDasharray: \"2.84 2.84\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    fillRule: \"evenodd\",\n    clipRule: \"evenodd\",\n    d: \"M17.0986 23.7639L9.98926 19.6593L17.0986 15.5547V18.9483H25.6299V15.5547L32.7393 19.6593L25.6299 23.7639V20.3702H17.0986V23.7639Z\",\n    fill: \"#4E5969\"\n  })), /* @__PURE__ */ react.exports.createElement(\"defs\", null, /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip0\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 0.864258,\n    y: 0.15918,\n    width: 40,\n    height: 40,\n    rx: 20,\n    fill: \"white\"\n  }))));\n}\nfunction SvgComponent$z(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip0)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 8.44336,\n    y: 24.0786,\n    width: 7.42857,\n    height: 7.42857,\n    rx: 3.71429,\n    transform: \"rotate(-90 8.44336 24.0786)\",\n    fill: \"#165DFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 17.3809,\n    y: 33.0161,\n    width: 7.42857,\n    height: 7.42857,\n    rx: 3.71429,\n    transform: \"rotate(-90 17.3809 33.0161)\",\n    fill: \"#4080FF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 17.3809,\n    y: 15.1411,\n    width: 7.42857,\n    height: 7.42857,\n    rx: 3.71429,\n    transform: \"rotate(-90 17.3809 15.1411)\",\n    fill: \"#94BFFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 26.3184,\n    y: 24.0786,\n    width: 7.42857,\n    height: 7.42857,\n    rx: 3.71429,\n    transform: \"rotate(-90 26.3184 24.0786)\",\n    fill: \"#6AA1FF\"\n  })), /* @__PURE__ */ react.exports.createElement(\"defs\", null, /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip0\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    width: 26,\n    height: 26,\n    fill: \"white\",\n    transform: \"translate(7.86328 7.59668)\"\n  }))));\n}\nfunction SvgComponent$y(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip0)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 8.44336,\n    y: 24.0786,\n    width: 7.42857,\n    height: 7.42857,\n    rx: 3.71429,\n    transform: \"rotate(-90 8.44336 24.0786)\",\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    opacity: 0.7\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 17.3809,\n    y: 33.0161,\n    width: 7.42857,\n    height: 7.42857,\n    rx: 3.71429,\n    transform: \"rotate(-90 17.3809 33.0161)\",\n    fill: \"#4E5969\"\n  })), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    opacity: 0.2\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 17.3809,\n    y: 15.1411,\n    width: 7.42857,\n    height: 7.42857,\n    rx: 3.71429,\n    transform: \"rotate(-90 17.3809 15.1411)\",\n    fill: \"#4E5969\"\n  })), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    opacity: 0.4\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 26.3184,\n    y: 24.0786,\n    width: 7.42857,\n    height: 7.42857,\n    rx: 3.71429,\n    transform: \"rotate(-90 26.3184 24.0786)\",\n    fill: \"#4E5969\"\n  }))), /* @__PURE__ */ react.exports.createElement(\"defs\", null, /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip0\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    width: 26,\n    height: 26,\n    fill: \"white\",\n    transform: \"translate(7.86328 7.59668)\"\n  }))));\n}\nfunction SvgComponent$x(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip0)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip1)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M10.9867 23.9139V25.2402H4.55831V23.9139H6.96117V16.1592L5.042 17.3294L4.35547 16.128L7.41365 14.2401H8.56827V23.9139H10.9867Z\",\n    fill: \"#165DFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M20.4516 23.9139V25.2402H13.2431V24.0387L17.0346 19.8883C17.5235 19.3578 17.8772 18.8741 18.0956 18.4373C18.314 18.0004 18.4233 17.5687 18.4233 17.1422C18.4233 16.5805 18.262 16.154 17.9396 15.8628C17.6171 15.5715 17.1542 15.4259 16.5509 15.4259C15.5211 15.4259 14.5017 15.8264 13.4927 16.6273L12.931 15.4415C13.3679 15.0358 13.9192 14.7133 14.5849 14.4741C15.2507 14.2349 15.9216 14.1152 16.5977 14.1152C17.6483 14.1152 18.4805 14.3805 19.0942 14.911C19.7079 15.4311 20.0148 16.1384 20.0148 17.033C20.0148 17.6675 19.8743 18.2708 19.5935 18.8429C19.323 19.415 18.8653 20.0548 18.2204 20.7621L15.2715 23.9139H20.4516Z\",\n    fill: \"#165DFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M26.5619 18.2812C27.2485 18.2812 27.8518 18.4269 28.3719 18.7181C28.892 19.0094 29.2924 19.4202 29.5733 19.9507C29.8646 20.4813 30.0102 21.0898 30.0102 21.7763C30.0102 22.4836 29.8489 23.1078 29.5265 23.6487C29.2144 24.1896 28.7619 24.6108 28.169 24.9125C27.5865 25.2038 26.9052 25.3494 26.125 25.3494C25.4489 25.3494 24.778 25.2298 24.1123 24.9905C23.4569 24.7513 22.9108 24.4288 22.4739 24.0231L23.0356 22.8373C24.0238 23.6383 25.0588 24.0387 26.1406 24.0387C26.8688 24.0387 27.4357 23.8463 27.8414 23.4614C28.247 23.0661 28.4499 22.5148 28.4499 21.8075C28.4499 21.1314 28.247 20.5905 27.8414 20.1848C27.4357 19.7791 26.8948 19.5763 26.2187 19.5763C25.2513 19.5763 24.4555 19.9508 23.8314 20.6997H22.8016V14.2401H29.5421V15.5351H24.3931V18.999C24.9652 18.5205 25.6882 18.2812 26.5619 18.2812Z\",\n    fill: \"#165DFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M33.4835 23.3834V24.6472C33.4835 25.1361 33.4003 25.5782 33.2339 25.9735C33.0779 26.3792 32.8074 26.7745 32.4225 27.1593L31.736 26.6132C32.1729 26.1451 32.4225 25.6874 32.485 25.2402H31.6268V23.3834H33.4835Z\",\n    fill: \"#165DFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M39.6667 18.2656C40.3324 18.2656 40.9202 18.4165 41.4299 18.7181C41.95 19.0094 42.3504 19.4202 42.6313 19.9507C42.9225 20.4813 43.0682 21.0898 43.0682 21.7763C43.0682 22.4628 42.9121 23.0817 42.6001 23.6331C42.2984 24.174 41.8719 24.6004 41.3206 24.9125C40.7693 25.2142 40.1504 25.365 39.4639 25.365C38.1012 25.365 37.0506 24.9021 36.3121 23.9763C35.5839 23.0401 35.2199 21.7087 35.2199 19.982C35.2199 18.7545 35.3915 17.7039 35.7348 16.8302C36.078 15.946 36.5773 15.2751 37.2327 14.8174C37.888 14.3493 38.6681 14.1152 39.5731 14.1152C40.218 14.1152 40.8473 14.2297 41.4611 14.4585C42.0748 14.6873 42.6105 15.015 43.0682 15.4415L42.4909 16.6273C41.5131 15.8264 40.5561 15.4259 39.6199 15.4259C38.7253 15.4259 38.0336 15.8212 37.5447 16.6117C37.0558 17.3919 36.8114 18.5049 36.8114 19.9507V19.9976C37.0402 19.4567 37.4095 19.0354 37.9192 18.7337C38.4393 18.4217 39.0218 18.2656 39.6667 18.2656ZM39.3859 24.0543C40.0308 24.0543 40.5457 23.8515 40.9306 23.4458C41.3154 23.0297 41.5079 22.4836 41.5079 21.8075C41.5079 21.1314 41.3102 20.5905 40.915 20.1848C40.5301 19.7791 40.0152 19.5763 39.3703 19.5763C38.7253 19.5763 38.1948 19.7843 37.7788 20.2004C37.3627 20.6061 37.1546 21.1418 37.1546 21.8075C37.1546 22.4732 37.3575 23.0141 37.7632 23.4302C38.1792 23.8463 38.7201 24.0543 39.3859 24.0543Z\",\n    fill: \"#165DFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M52.1746 14.2401V15.4415L47.088 25.2402H45.3717L50.427 15.5663H44.732V14.2401H52.1746Z\",\n    fill: \"#165DFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M57.8012 25.365C56.5217 25.365 55.5439 24.8865 54.8678 23.9295C54.2021 22.9725 53.8692 21.5787 53.8692 19.7479C53.8692 17.9172 54.2021 16.5233 54.8678 15.5663C55.5439 14.5989 56.5217 14.1152 57.8012 14.1152C59.0806 14.1152 60.0532 14.5937 60.7189 15.5507C61.395 16.5077 61.7331 17.9016 61.7331 19.7323C61.7331 21.5735 61.395 22.9725 60.7189 23.9295C60.0532 24.8865 59.0806 25.365 57.8012 25.365ZM57.8012 24.0699C58.6021 24.0699 59.1898 23.7215 59.5643 23.0245C59.9388 22.3276 60.126 21.2302 60.126 19.7323C60.126 18.2448 59.9388 17.1578 59.5643 16.4713C59.1898 15.7744 58.6021 15.4259 57.8012 15.4259C57.0002 15.4259 56.4125 15.7744 56.038 16.4713C55.6635 17.1578 55.4763 18.2448 55.4763 19.7323C55.4763 21.2198 55.6635 22.3172 56.038 23.0245C56.4125 23.7215 57.0002 24.0699 57.8012 24.0699Z\",\n    fill: \"#165DFF\"\n  }))), /* @__PURE__ */ react.exports.createElement(\"defs\", null, /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip0\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 0.864258,\n    y: 0.15918,\n    width: 40,\n    height: 40,\n    rx: 20,\n    fill: \"white\"\n  })), /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip1\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    width: 46,\n    height: 46,\n    fill: \"white\",\n    transform: \"translate(-2.13574 -2.84082)\"\n  }))));\n}\nfunction SvgComponent$w(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip0)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip1)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M10.9867 23.9139V25.2402H4.55831V23.9139H6.96117V16.1592L5.042 17.3294L4.35547 16.128L7.41365 14.2401H8.56827V23.9139H10.9867Z\",\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M20.4516 23.9139V25.2402H13.2431V24.0387L17.0346 19.8883C17.5235 19.3578 17.8772 18.8741 18.0956 18.4373C18.314 18.0004 18.4233 17.5687 18.4233 17.1422C18.4233 16.5805 18.262 16.154 17.9396 15.8628C17.6171 15.5715 17.1542 15.4259 16.5509 15.4259C15.5211 15.4259 14.5017 15.8264 13.4927 16.6273L12.931 15.4415C13.3679 15.0358 13.9192 14.7133 14.5849 14.4741C15.2507 14.2349 15.9216 14.1152 16.5977 14.1152C17.6483 14.1152 18.4805 14.3805 19.0942 14.911C19.7079 15.4311 20.0148 16.1384 20.0148 17.033C20.0148 17.6675 19.8743 18.2708 19.5935 18.8429C19.323 19.415 18.8653 20.0548 18.2204 20.7621L15.2715 23.9139H20.4516Z\",\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M26.5619 18.2812C27.2485 18.2812 27.8518 18.4269 28.3719 18.7181C28.892 19.0094 29.2924 19.4202 29.5733 19.9507C29.8646 20.4813 30.0102 21.0898 30.0102 21.7763C30.0102 22.4836 29.8489 23.1078 29.5265 23.6487C29.2144 24.1896 28.7619 24.6108 28.169 24.9125C27.5865 25.2038 26.9052 25.3494 26.125 25.3494C25.4489 25.3494 24.778 25.2298 24.1123 24.9905C23.4569 24.7513 22.9108 24.4288 22.4739 24.0231L23.0356 22.8373C24.0238 23.6383 25.0588 24.0387 26.1406 24.0387C26.8688 24.0387 27.4357 23.8463 27.8414 23.4614C28.247 23.0661 28.4499 22.5148 28.4499 21.8075C28.4499 21.1314 28.247 20.5905 27.8414 20.1848C27.4357 19.7791 26.8948 19.5763 26.2187 19.5763C25.2513 19.5763 24.4555 19.9508 23.8314 20.6997H22.8016V14.2401H29.5421V15.5351H24.3931V18.999C24.9652 18.5205 25.6882 18.2812 26.5619 18.2812Z\",\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M33.4835 23.3834V24.6472C33.4835 25.1361 33.4003 25.5782 33.2339 25.9735C33.0779 26.3792 32.8074 26.7745 32.4225 27.1593L31.736 26.6132C32.1729 26.1451 32.4225 25.6874 32.485 25.2402H31.6268V23.3834H33.4835Z\",\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M39.6667 18.2656C40.3324 18.2656 40.9202 18.4165 41.4299 18.7181C41.95 19.0094 42.3504 19.4202 42.6313 19.9507C42.9225 20.4813 43.0682 21.0898 43.0682 21.7763C43.0682 22.4628 42.9121 23.0817 42.6001 23.6331C42.2984 24.174 41.8719 24.6004 41.3206 24.9125C40.7693 25.2142 40.1504 25.365 39.4639 25.365C38.1012 25.365 37.0506 24.9021 36.3121 23.9763C35.5839 23.0401 35.2199 21.7087 35.2199 19.982C35.2199 18.7545 35.3915 17.7039 35.7348 16.8302C36.078 15.946 36.5773 15.2751 37.2327 14.8174C37.888 14.3493 38.6681 14.1152 39.5731 14.1152C40.218 14.1152 40.8473 14.2297 41.4611 14.4585C42.0748 14.6873 42.6105 15.015 43.0682 15.4415L42.4909 16.6273C41.5131 15.8264 40.5561 15.4259 39.6199 15.4259C38.7253 15.4259 38.0336 15.8212 37.5447 16.6117C37.0558 17.3919 36.8114 18.5049 36.8114 19.9507V19.9976C37.0402 19.4567 37.4095 19.0354 37.9192 18.7337C38.4393 18.4217 39.0218 18.2656 39.6667 18.2656ZM39.3859 24.0543C40.0308 24.0543 40.5457 23.8515 40.9306 23.4458C41.3154 23.0297 41.5079 22.4836 41.5079 21.8075C41.5079 21.1314 41.3102 20.5905 40.915 20.1848C40.5301 19.7791 40.0152 19.5763 39.3703 19.5763C38.7253 19.5763 38.1948 19.7843 37.7788 20.2004C37.3627 20.6061 37.1546 21.1418 37.1546 21.8075C37.1546 22.4732 37.3575 23.0141 37.7632 23.4302C38.1792 23.8463 38.7201 24.0543 39.3859 24.0543Z\",\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M52.1746 14.2401V15.4415L47.088 25.2402H45.3717L50.427 15.5663H44.732V14.2401H52.1746Z\",\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M57.8012 25.365C56.5217 25.365 55.5439 24.8865 54.8678 23.9295C54.2021 22.9725 53.8692 21.5787 53.8692 19.7479C53.8692 17.9172 54.2021 16.5233 54.8678 15.5663C55.5439 14.5989 56.5217 14.1152 57.8012 14.1152C59.0806 14.1152 60.0532 14.5937 60.7189 15.5507C61.395 16.5077 61.7331 17.9016 61.7331 19.7323C61.7331 21.5735 61.395 22.9725 60.7189 23.9295C60.0532 24.8865 59.0806 25.365 57.8012 25.365ZM57.8012 24.0699C58.6021 24.0699 59.1898 23.7215 59.5643 23.0245C59.9388 22.3276 60.126 21.2302 60.126 19.7323C60.126 18.2448 59.9388 17.1578 59.5643 16.4713C59.1898 15.7744 58.6021 15.4259 57.8012 15.4259C57.0002 15.4259 56.4125 15.7744 56.038 16.4713C55.6635 17.1578 55.4763 18.2448 55.4763 19.7323C55.4763 21.2198 55.6635 22.3172 56.038 23.0245C56.4125 23.7215 57.0002 24.0699 57.8012 24.0699Z\",\n    fill: \"#4E5969\"\n  }))), /* @__PURE__ */ react.exports.createElement(\"defs\", null, /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip0\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 0.864258,\n    y: 0.15918,\n    width: 40,\n    height: 40,\n    rx: 20,\n    fill: \"white\"\n  })), /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip1\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    width: 46,\n    height: 46,\n    fill: \"white\",\n    transform: \"translate(-2.13574 -2.84082)\"\n  }))));\n}\nfunction SvgComponent$v(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip0)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"path\", {\n    fillRule: \"evenodd\",\n    clipRule: \"evenodd\",\n    d: \"M17.3909 16.8223C17.2553 16.6871 17.0332 16.6966 16.9096 16.8428L12.3658 22.2208L10.5544 20.3293C10.4274 20.1967 10.2161 20.1944 10.0863 20.3244L9.08343 21.3281C8.95759 21.454 8.95543 21.6574 9.07856 21.786L12.1415 24.9845C12.2337 25.0807 12.3702 25.1084 12.4877 25.0667C12.5891 25.0748 12.6932 25.036 12.7644 24.9516L13.4047 24.1938L13.8389 23.7592L13.8033 23.722L18.4133 18.2658C18.5232 18.1356 18.515 17.9428 18.3943 17.8225L17.3909 16.8223Z\",\n    fill: \"#165DFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M16.0049 20.1592H29.723\",\n    stroke: \"#94BFFF\",\n    strokeWidth: 1.5,\n    strokeLinecap: \"round\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 5.66699,\n    y: 12.3003,\n    width: 15.7181,\n    height: 15.7181,\n    rx: 7.85905,\n    fill: \"#165DFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    fillRule: \"evenodd\",\n    clipRule: \"evenodd\",\n    d: \"M16.199 17.5942C16.0634 17.459 15.8413 17.4685 15.7177 17.6148L12.2188 21.756L10.8548 20.3317C10.7277 20.1991 10.5165 20.1968 10.3866 20.3267L9.70465 21.0093C9.57881 21.1352 9.57665 21.3386 9.69979 21.4672L11.9931 23.862C12.0841 23.9571 12.2183 23.9852 12.3349 23.9457C12.426 23.9444 12.5164 23.9053 12.5804 23.8296L13.0282 23.2996L13.3696 22.9579L13.3416 22.9286L16.8998 18.7172C17.0098 18.587 17.0016 18.3943 16.8809 18.274L16.199 17.5942Z\",\n    fill: \"white\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 29.9977,\n    y: 12.9547,\n    width: 14.4083,\n    height: 14.4083,\n    rx: 7.20413,\n    fill: \"#E8F3FF\",\n    stroke: \"#165DFF\",\n    strokeWidth: 1.30984\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M35.3155 22.9546V22.0835L37.4061 19.8555C37.6872 19.5499 37.8889 19.2809 38.0112 19.0486C38.1334 18.8103 38.1946 18.5688 38.1946 18.3243C38.1946 17.7008 37.8187 17.3891 37.0668 17.3891C36.48 17.3891 35.939 17.6091 35.4439 18.0492L35.0496 17.169C35.3064 16.9367 35.6273 16.7503 36.0124 16.6097C36.3975 16.4691 36.7978 16.3988 37.2135 16.3988C37.9042 16.3988 38.433 16.5547 38.7997 16.8664C39.1726 17.1782 39.359 17.6244 39.359 18.2051C39.359 18.5963 39.2643 18.9722 39.0748 19.3329C38.8914 19.6935 38.6011 20.0817 38.2037 20.4973L36.7826 21.9827H39.6066V22.9546H35.3155Z\",\n    fill: \"#165DFF\"\n  })), /* @__PURE__ */ react.exports.createElement(\"defs\", null, /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip0\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 0.864258,\n    y: 0.15918,\n    width: 40,\n    height: 40,\n    rx: 20,\n    fill: \"white\"\n  }))));\n}\nfunction SvgComponent$u(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip0)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"path\", {\n    fillRule: \"evenodd\",\n    clipRule: \"evenodd\",\n    d: \"M17.39 16.8223C17.2544 16.6871 17.0322 16.6966 16.9086 16.8428L12.3648 22.2208L10.5535 20.3293C10.4264 20.1967 10.2151 20.1944 10.0853 20.3244L9.08245 21.3281C8.95661 21.454 8.95445 21.6574 9.07759 21.786L12.1405 24.9845C12.2327 25.0807 12.3692 25.1084 12.4868 25.0667C12.5881 25.0748 12.6922 25.036 12.7635 24.9516L13.4037 24.1938L13.838 23.7592L13.8023 23.722L18.4123 18.2658C18.5223 18.1356 18.514 17.9428 18.3933 17.8225L17.39 16.8223Z\",\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    opacity: 0.3,\n    d: \"M16.0039 20.1592H29.722\",\n    stroke: \"#4E5969\",\n    strokeWidth: 1.5,\n    strokeLinecap: \"round\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 5.66602,\n    y: 12.3003,\n    width: 15.7181,\n    height: 15.7181,\n    rx: 7.85905,\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    fillRule: \"evenodd\",\n    clipRule: \"evenodd\",\n    d: \"M16.1981 17.5942C16.0625 17.459 15.8403 17.4685 15.7167 17.6148L12.2178 21.756L10.8538 20.3317C10.7268 20.1991 10.5155 20.1968 10.3857 20.3267L9.70367 21.0093C9.57784 21.1352 9.57568 21.3386 9.69881 21.4672L11.9921 23.862C12.0831 23.9571 12.2174 23.9852 12.3339 23.9457C12.425 23.9444 12.5154 23.9053 12.5794 23.8296L13.0272 23.2996L13.3687 22.9579L13.3406 22.9286L16.8989 18.7172C17.0088 18.587 17.0006 18.3943 16.8799 18.274L16.1981 17.5942Z\",\n    fill: \"white\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 29.9967,\n    y: 12.9547,\n    width: 14.4083,\n    height: 14.4083,\n    rx: 7.20413,\n    fill: \"#4E5969\",\n    fillOpacity: 0.1,\n    stroke: \"#4E5969\",\n    strokeWidth: 1.30984\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M35.3146 22.9546V22.0835L37.4051 19.8555C37.6863 19.5499 37.888 19.2809 38.0102 19.0486C38.1325 18.8103 38.1936 18.5688 38.1936 18.3243C38.1936 17.7008 37.8177 17.3891 37.0658 17.3891C36.479 17.3891 35.9381 17.6091 35.4429 18.0492L35.0487 17.169C35.3054 16.9367 35.6263 16.7503 36.0114 16.6097C36.3965 16.4691 36.7969 16.3988 37.2125 16.3988C37.9032 16.3988 38.432 16.5547 38.7987 16.8664C39.1716 17.1782 39.358 17.6244 39.358 18.2051C39.358 18.5963 39.2633 18.9722 39.0738 19.3329C38.8904 19.6935 38.6001 20.0817 38.2028 20.4973L36.7816 21.9827H39.6056V22.9546H35.3146Z\",\n    fill: \"#4E5969\"\n  })), /* @__PURE__ */ react.exports.createElement(\"defs\", null, /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip0\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 0.863281,\n    y: 0.15918,\n    width: 40,\n    height: 40,\n    rx: 20,\n    fill: \"white\"\n  }))));\n}\nfunction SvgComponent$t(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 5.86328,\n    y: 11.5967,\n    width: 30,\n    height: 18,\n    rx: 9,\n    fill: \"#165DFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"circle\", {\n    cx: 14.8633,\n    cy: 20.5967,\n    r: 5,\n    fill: \"white\"\n  }));\n}\nfunction SvgComponent$s(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 5.86328,\n    y: 11.5967,\n    width: 30,\n    height: 18,\n    rx: 9,\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"circle\", {\n    cx: 14.8633,\n    cy: 20.5967,\n    r: 5,\n    fill: \"white\"\n  }));\n}\nfunction SvgComponent$r(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip0)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"path\", {\n    fillRule: \"evenodd\",\n    clipRule: \"evenodd\",\n    d: \"M11.2959 10.5186C11.2959 9.38972 12.211 8.47461 13.3399 8.47461H61.3867C62.5156 8.47461 63.4307 9.38972 63.4307 10.5186V45.6748C63.4307 46.8037 62.5156 47.7188 61.3867 47.7188H13.3399C12.211 47.7188 11.2959 46.8037 11.2959 45.6748V10.5186ZM13.3399 10.2188C13.1743 10.2188 13.0401 10.353 13.0401 10.5186V45.6748C13.0401 45.8404 13.1743 45.9746 13.3399 45.9746H61.3867C61.5523 45.9746 61.6865 45.8404 61.6865 45.6748V10.5186C61.6865 10.353 61.5523 10.2188 61.3867 10.2188H13.3399Z\",\n    fill: \"#165DFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 12.168,\n    y: 9.34668,\n    width: 50.3906,\n    height: 9.375,\n    rx: 1.17188,\n    fill: \"#165DFF\",\n    stroke: \"#165DFF\",\n    strokeWidth: 1.17188\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    fillRule: \"evenodd\",\n    clipRule: \"evenodd\",\n    d: \"M11.582 19.8936C11.582 18.9227 12.369 18.1357 13.3398 18.1357H61.3867C62.3575 18.1357 63.1445 18.9227 63.1445 19.8936V26.9248C63.1445 27.8956 62.3575 28.6826 61.3867 28.6826H13.3398C12.369 28.6826 11.582 27.8956 11.582 26.9248V19.8936ZM13.3398 19.3076C13.0162 19.3076 12.7539 19.57 12.7539 19.8936V26.9248C12.7539 27.2484 13.0162 27.5107 13.3398 27.5107H61.3867C61.7103 27.5107 61.9727 27.2484 61.9727 26.9248V19.8936C61.9727 19.57 61.7103 19.3076 61.3867 19.3076H13.3398Z\",\n    fill: \"#165DFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    fillRule: \"evenodd\",\n    clipRule: \"evenodd\",\n    d: \"M11.582 29.2686C11.582 28.2977 12.369 27.5107 13.3398 27.5107H61.3867C62.3575 27.5107 63.1445 28.2977 63.1445 29.2686V36.2998C63.1445 37.2706 62.3575 38.0576 61.3867 38.0576H13.3398C12.369 38.0576 11.582 37.2706 11.582 36.2998V29.2686ZM13.3398 28.6826C13.0162 28.6826 12.7539 28.945 12.7539 29.2686V36.2998C12.7539 36.6234 13.0162 36.8857 13.3398 36.8857H61.3867C61.7103 36.8857 61.9727 36.6234 61.9727 36.2998V29.2686C61.9727 28.945 61.7103 28.6826 61.3867 28.6826H13.3398Z\",\n    fill: \"#165DFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 12.168,\n    y: 37.4717,\n    width: 50.3906,\n    height: 9.375,\n    rx: 1.17188,\n    stroke: \"#165DFF\",\n    strokeWidth: 1.17188\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 15.5605,\n    y: 22.8643,\n    width: 9.59302,\n    height: 1.74419,\n    rx: 0.872093,\n    fill: \"#BEDAFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 28.6426,\n    y: 22.8643,\n    width: 9.59302,\n    height: 1.74419,\n    rx: 0.872093,\n    fill: \"#BEDAFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 15.5605,\n    y: 32.457,\n    width: 9.59302,\n    height: 1.74419,\n    rx: 0.872093,\n    fill: \"#BEDAFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 28.6426,\n    y: 32.457,\n    width: 9.59302,\n    height: 1.74419,\n    rx: 0.872093,\n    fill: \"#BEDAFF\"\n  })), /* @__PURE__ */ react.exports.createElement(\"defs\", null, /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip0\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 0.863281,\n    y: 0.59668,\n    width: 40,\n    height: 40,\n    rx: 20,\n    fill: \"white\"\n  }))));\n}\nfunction SvgComponent$q(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip0)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"path\", {\n    fillRule: \"evenodd\",\n    clipRule: \"evenodd\",\n    d: \"M11.2959 10.5186C11.2959 9.38972 12.211 8.47461 13.3399 8.47461H61.3867C62.5156 8.47461 63.4307 9.38972 63.4307 10.5186V45.6748C63.4307 46.8037 62.5156 47.7188 61.3867 47.7188H13.3399C12.211 47.7188 11.2959 46.8037 11.2959 45.6748V10.5186ZM13.3399 10.2188C13.1743 10.2188 13.0401 10.353 13.0401 10.5186V45.6748C13.0401 45.8404 13.1743 45.9746 13.3399 45.9746H61.3867C61.5523 45.9746 61.6865 45.8404 61.6865 45.6748V10.5186C61.6865 10.353 61.5523 10.2188 61.3867 10.2188H13.3399Z\",\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 12.168,\n    y: 9.34668,\n    width: 50.3906,\n    height: 9.375,\n    rx: 1.17188,\n    fill: \"#4E5969\",\n    stroke: \"#4E5969\",\n    strokeWidth: 1.17188\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    fillRule: \"evenodd\",\n    clipRule: \"evenodd\",\n    d: \"M11.582 19.8936C11.582 18.9227 12.369 18.1357 13.3398 18.1357H61.3867C62.3575 18.1357 63.1445 18.9227 63.1445 19.8936V26.9248C63.1445 27.8956 62.3575 28.6826 61.3867 28.6826H13.3398C12.369 28.6826 11.582 27.8956 11.582 26.9248V19.8936ZM13.3398 19.3076C13.0162 19.3076 12.7539 19.57 12.7539 19.8936V26.9248C12.7539 27.2484 13.0162 27.5107 13.3398 27.5107H61.3867C61.7103 27.5107 61.9727 27.2484 61.9727 26.9248V19.8936C61.9727 19.57 61.7103 19.3076 61.3867 19.3076H13.3398Z\",\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    fillRule: \"evenodd\",\n    clipRule: \"evenodd\",\n    d: \"M11.582 29.2686C11.582 28.2977 12.369 27.5107 13.3398 27.5107H61.3867C62.3575 27.5107 63.1445 28.2977 63.1445 29.2686V36.2998C63.1445 37.2706 62.3575 38.0576 61.3867 38.0576H13.3398C12.369 38.0576 11.582 37.2706 11.582 36.2998V29.2686ZM13.3398 28.6826C13.0162 28.6826 12.7539 28.945 12.7539 29.2686V36.2998C12.7539 36.6234 13.0162 36.8857 13.3398 36.8857H61.3867C61.7103 36.8857 61.9727 36.6234 61.9727 36.2998V29.2686C61.9727 28.945 61.7103 28.6826 61.3867 28.6826H13.3398Z\",\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 12.168,\n    y: 37.4717,\n    width: 50.3906,\n    height: 9.375,\n    rx: 1.17188,\n    stroke: \"#4E5969\",\n    strokeWidth: 1.17188\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    opacity: 0.3,\n    x: 15.5605,\n    y: 22.8643,\n    width: 9.59302,\n    height: 1.74419,\n    rx: 0.872093,\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    opacity: 0.3,\n    x: 28.6426,\n    y: 22.8643,\n    width: 9.59302,\n    height: 1.74419,\n    rx: 0.872093,\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    opacity: 0.3,\n    x: 15.5605,\n    y: 32.457,\n    width: 9.59302,\n    height: 1.74419,\n    rx: 0.872093,\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    opacity: 0.3,\n    x: 28.6426,\n    y: 32.457,\n    width: 9.59302,\n    height: 1.74419,\n    rx: 0.872093,\n    fill: \"#4E5969\"\n  })), /* @__PURE__ */ react.exports.createElement(\"defs\", null, /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip0\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 0.863281,\n    y: 0.59668,\n    width: 40,\n    height: 40,\n    rx: 20,\n    fill: \"white\"\n  }))));\n}\nfunction SvgComponent$p(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip0)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 12.0508,\n    y: 14.4092,\n    width: 15.5,\n    height: 13.375,\n    rx: 2,\n    fill: \"#165DFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 30.8633,\n    y: 14.4092,\n    width: 15.5,\n    height: 13.375,\n    rx: 2,\n    fill: \"#BEDAFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 7.48828,\n    y: 26.2529,\n    width: 56.75,\n    height: 1.03125,\n    fill: \"#E8F3FF\",\n    stroke: \"#165DFF\"\n  })), /* @__PURE__ */ react.exports.createElement(\"defs\", null, /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip0\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 0.863281,\n    y: 0.59668,\n    width: 40,\n    height: 40,\n    rx: 20,\n    fill: \"white\"\n  }))));\n}\nfunction SvgComponent$o(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip0)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 12.0508,\n    y: 14.4092,\n    width: 15.5,\n    height: 13.375,\n    rx: 2,\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    opacity: 0.2,\n    x: 30.8633,\n    y: 14.4092,\n    width: 15.5,\n    height: 13.375,\n    rx: 2,\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 7.48828,\n    y: 26.2529,\n    width: 56.75,\n    height: 1.03125,\n    fill: \"#E8F3FF\",\n    stroke: \"#4E5969\"\n  })), /* @__PURE__ */ react.exports.createElement(\"defs\", null, /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip0\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 0.863281,\n    y: 0.59668,\n    width: 40,\n    height: 40,\n    rx: 20,\n    fill: \"white\"\n  }))));\n}\nfunction SvgComponent$n(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip0)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"mask\", {\n    id: \"path-2-inside-1\",\n    fill: \"white\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 8.71875,\n    y: 9.85938,\n    width: 37.6667,\n    height: 21.3444,\n    rx: 1.33403\n  })), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 8.71875,\n    y: 9.85938,\n    width: 37.6667,\n    height: 21.3444,\n    rx: 1.33403,\n    fill: \"#E8F3FF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M17.4404 17.329H14.7402V16.1367H21.6551V17.329H18.9549V24.0665H17.4404V17.329Z\",\n    fill: \"#165DFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M24.1106 18.4313C24.9168 18.4313 25.5155 18.6188 25.9069 18.9937C26.2982 19.3686 26.4939 19.946 26.4939 20.7259V24.0665H25.0968V23.2229C24.9637 23.5154 24.7524 23.7441 24.4628 23.9091C24.1811 24.074 23.8523 24.1565 23.4767 24.1565C23.0932 24.1565 22.7449 24.0815 22.4318 23.9316C22.1187 23.7816 21.8722 23.5754 21.6922 23.3129C21.5122 23.0505 21.4222 22.758 21.4222 22.4356C21.4222 22.0307 21.5278 21.712 21.7391 21.4795C21.9583 21.247 22.3105 21.0783 22.7957 20.9733C23.281 20.8684 23.9502 20.8159 24.8033 20.8159H25.0968V20.5572C25.0968 20.1822 25.0107 19.9123 24.8385 19.7473C24.6742 19.5823 24.3963 19.4999 24.005 19.4999C23.6997 19.4999 23.3788 19.5524 23.0423 19.6573C22.7136 19.7548 22.3888 19.8935 22.0679 20.0735L21.657 19.1062C21.9779 18.9112 22.3653 18.75 22.8192 18.6225C23.2732 18.495 23.7036 18.4313 24.1106 18.4313ZM23.7702 23.1442C24.1615 23.1442 24.4785 23.0205 24.7211 22.773C24.9716 22.5181 25.0968 22.1919 25.0968 21.7945V21.5582H24.8855C24.3611 21.5582 23.9541 21.5807 23.6645 21.6257C23.3749 21.6707 23.1675 21.7495 23.0423 21.8619C22.9171 21.9744 22.8544 22.1281 22.8544 22.3231C22.8544 22.5631 22.9405 22.7618 23.1127 22.9192C23.2849 23.0692 23.5041 23.1442 23.7702 23.1442Z\",\n    fill: \"#165DFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M33.5736 18.5663V23.5604C33.5736 24.4227 33.3231 25.0751 32.8222 25.5175C32.3291 25.96 31.5973 26.1812 30.6268 26.1812C30.1259 26.1812 29.6446 26.1174 29.1828 25.9899C28.721 25.87 28.3179 25.6975 27.9736 25.4725L28.3845 24.4827C29.0967 24.8951 29.8324 25.1014 30.5916 25.1014C31.6091 25.1014 32.1178 24.6214 32.1178 23.6616V22.9417C31.9456 23.2492 31.6952 23.4891 31.3664 23.6616C31.0377 23.8266 30.662 23.9091 30.2394 23.9091C29.7385 23.9091 29.2924 23.7966 28.901 23.5716C28.5175 23.3392 28.2162 23.0167 27.997 22.6043C27.7779 22.1919 27.6683 21.7157 27.6683 21.1758C27.6683 20.6359 27.774 20.1597 27.9853 19.7473C28.2045 19.3274 28.5097 19.005 28.901 18.78C29.2924 18.5475 29.7385 18.4313 30.2394 18.4313C30.662 18.4313 31.0377 18.5175 31.3664 18.69C31.6952 18.855 31.9456 19.0912 32.1178 19.3986V18.5663H33.5736ZM30.6268 22.818C31.0964 22.818 31.4604 22.6718 31.7186 22.3793C31.9847 22.0869 32.1178 21.6857 32.1178 21.1758C32.1178 20.6584 31.9847 20.2535 31.7186 19.961C31.4604 19.6686 31.0964 19.5224 30.6268 19.5224C30.165 19.5224 29.8011 19.6686 29.535 19.961C29.2689 20.2535 29.1358 20.6584 29.1358 21.1758C29.1358 21.6782 29.2689 22.0794 29.535 22.3793C29.8011 22.6718 30.165 22.818 30.6268 22.818Z\",\n    fill: \"#165DFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 8.71875,\n    y: 9.85938,\n    width: 37.6667,\n    height: 21.3444,\n    rx: 1.33403,\n    stroke: \"#165DFF\",\n    strokeWidth: 3,\n    mask: \"url(#path-2-inside-1)\"\n  })), /* @__PURE__ */ react.exports.createElement(\"defs\", null, /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip0\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 0.864258,\n    y: 0.15918,\n    width: 40,\n    height: 40,\n    rx: 20,\n    fill: \"white\"\n  }))));\n}\nfunction SvgComponent$m(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip0)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"mask\", {\n    id: \"path-2-inside-1\",\n    fill: \"white\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 8.71875,\n    y: 9.85938,\n    width: 37.6667,\n    height: 21.3444,\n    rx: 1.33403\n  })), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 8.71875,\n    y: 9.85938,\n    width: 37.6667,\n    height: 21.3444,\n    rx: 1.33403,\n    fill: \"#4E5969\",\n    fillOpacity: 0.1\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M17.4404 17.329H14.7402V16.1367H21.6551V17.329H18.9549V24.0665H17.4404V17.329Z\",\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M24.1106 18.4313C24.9168 18.4313 25.5155 18.6188 25.9069 18.9937C26.2982 19.3686 26.4939 19.946 26.4939 20.7259V24.0665H25.0968V23.2229C24.9637 23.5154 24.7524 23.7441 24.4628 23.9091C24.1811 24.074 23.8523 24.1565 23.4767 24.1565C23.0932 24.1565 22.7449 24.0815 22.4318 23.9316C22.1187 23.7816 21.8722 23.5754 21.6922 23.3129C21.5122 23.0505 21.4222 22.758 21.4222 22.4356C21.4222 22.0307 21.5278 21.712 21.7391 21.4795C21.9583 21.247 22.3105 21.0783 22.7957 20.9733C23.281 20.8684 23.9502 20.8159 24.8033 20.8159H25.0968V20.5572C25.0968 20.1822 25.0107 19.9123 24.8385 19.7473C24.6742 19.5823 24.3963 19.4999 24.005 19.4999C23.6997 19.4999 23.3788 19.5524 23.0423 19.6573C22.7136 19.7548 22.3888 19.8935 22.0679 20.0735L21.657 19.1062C21.9779 18.9112 22.3653 18.75 22.8192 18.6225C23.2732 18.495 23.7036 18.4313 24.1106 18.4313ZM23.7702 23.1442C24.1615 23.1442 24.4785 23.0205 24.7211 22.773C24.9716 22.5181 25.0968 22.1919 25.0968 21.7945V21.5582H24.8855C24.3611 21.5582 23.9541 21.5807 23.6645 21.6257C23.3749 21.6707 23.1675 21.7495 23.0423 21.8619C22.9171 21.9744 22.8544 22.1281 22.8544 22.3231C22.8544 22.5631 22.9405 22.7618 23.1127 22.9192C23.2849 23.0692 23.5041 23.1442 23.7702 23.1442Z\",\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M33.5736 18.5663V23.5604C33.5736 24.4227 33.3231 25.0751 32.8222 25.5175C32.3291 25.96 31.5973 26.1812 30.6268 26.1812C30.1259 26.1812 29.6446 26.1174 29.1828 25.9899C28.721 25.87 28.3179 25.6975 27.9736 25.4725L28.3845 24.4827C29.0967 24.8951 29.8324 25.1014 30.5916 25.1014C31.6091 25.1014 32.1178 24.6214 32.1178 23.6616V22.9417C31.9456 23.2492 31.6952 23.4891 31.3664 23.6616C31.0377 23.8266 30.662 23.9091 30.2394 23.9091C29.7385 23.9091 29.2924 23.7966 28.901 23.5716C28.5175 23.3392 28.2162 23.0167 27.997 22.6043C27.7779 22.1919 27.6683 21.7157 27.6683 21.1758C27.6683 20.6359 27.774 20.1597 27.9853 19.7473C28.2045 19.3274 28.5097 19.005 28.901 18.78C29.2924 18.5475 29.7385 18.4313 30.2394 18.4313C30.662 18.4313 31.0377 18.5175 31.3664 18.69C31.6952 18.855 31.9456 19.0912 32.1178 19.3986V18.5663H33.5736ZM30.6268 22.818C31.0964 22.818 31.4604 22.6718 31.7186 22.3793C31.9847 22.0869 32.1178 21.6857 32.1178 21.1758C32.1178 20.6584 31.9847 20.2535 31.7186 19.961C31.4604 19.6686 31.0964 19.5224 30.6268 19.5224C30.165 19.5224 29.8011 19.6686 29.535 19.961C29.2689 20.2535 29.1358 20.6584 29.1358 21.1758C29.1358 21.6782 29.2689 22.0794 29.535 22.3793C29.8011 22.6718 30.165 22.818 30.6268 22.818Z\",\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 8.71875,\n    y: 9.85938,\n    width: 37.6667,\n    height: 21.3444,\n    rx: 1.33403,\n    stroke: \"#4E5969\",\n    strokeWidth: 3,\n    mask: \"url(#path-2-inside-1)\"\n  })), /* @__PURE__ */ react.exports.createElement(\"defs\", null, /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip0\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 0.864258,\n    y: 0.15918,\n    width: 40,\n    height: 40,\n    rx: 20,\n    fill: \"white\"\n  }))));\n}\nfunction SvgComponent$l(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip0)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip1)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 9.30078,\n    y: 11.5654,\n    width: 52.8047,\n    height: 17.0625,\n    rx: 1,\n    fill: \"#E8F3FF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M16.1776 22.3897H17.5061V23.1183H13.9747V22.3897H15.2947V18.1297L14.2404 18.7726L13.8633 18.1126L15.5433 17.0754H16.1776V22.3897Z\",\n    fill: \"#165DFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M20.6314 23.1868C19.9285 23.1868 19.3914 22.924 19.0199 22.3983C18.6542 21.8726 18.4714 21.1068 18.4714 20.1011C18.4714 19.0954 18.6542 18.3297 19.0199 17.804C19.3914 17.2726 19.9285 17.0068 20.6314 17.0068C21.3342 17.0068 21.8685 17.2697 22.2342 17.7954C22.6056 18.3211 22.7914 19.0868 22.7914 20.0926C22.7914 21.104 22.6056 21.8726 22.2342 22.3983C21.8685 22.924 21.3342 23.1868 20.6314 23.1868ZM20.6314 22.4754C21.0714 22.4754 21.3942 22.284 21.5999 21.9011C21.8056 21.5183 21.9085 20.9154 21.9085 20.0926C21.9085 19.2754 21.8056 18.6783 21.5999 18.3011C21.3942 17.9183 21.0714 17.7268 20.6314 17.7268C20.1914 17.7268 19.8685 17.9183 19.6628 18.3011C19.4571 18.6783 19.3542 19.2754 19.3542 20.0926C19.3542 20.9097 19.4571 21.5126 19.6628 21.9011C19.8685 22.284 20.1914 22.4754 20.6314 22.4754Z\",\n    fill: \"#165DFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M23.7052 18.9354H24.7252V19.9554H23.7052V18.9354ZM23.7052 22.0983H24.7252V23.1183H23.7052V22.0983Z\",\n    fill: \"#165DFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M28.499 22.3897H29.8276V23.1183H26.2961V22.3897H27.6161V18.1297L26.5619 18.7726L26.1847 18.1126L27.8647 17.0754H28.499V22.3897Z\",\n    fill: \"#165DFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M32.9528 23.1868C32.2499 23.1868 31.7128 22.924 31.3414 22.3983C30.9756 21.8726 30.7928 21.1068 30.7928 20.1011C30.7928 19.0954 30.9756 18.3297 31.3414 17.804C31.7128 17.2726 32.2499 17.0068 32.9528 17.0068C33.6556 17.0068 34.1899 17.2697 34.5556 17.7954C34.9271 18.3211 35.1128 19.0868 35.1128 20.0926C35.1128 21.104 34.9271 21.8726 34.5556 22.3983C34.1899 22.924 33.6556 23.1868 32.9528 23.1868ZM32.9528 22.4754C33.3928 22.4754 33.7156 22.284 33.9214 21.9011C34.1271 21.5183 34.2299 20.9154 34.2299 20.0926C34.2299 19.2754 34.1271 18.6783 33.9214 18.3011C33.7156 17.9183 33.3928 17.7268 32.9528 17.7268C32.5128 17.7268 32.1899 17.9183 31.9842 18.3011C31.7785 18.6783 31.6756 19.2754 31.6756 20.0926C31.6756 20.9097 31.7785 21.5126 31.9842 21.9011C32.1899 22.284 32.5128 22.4754 32.9528 22.4754Z\",\n    fill: \"#165DFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 9.30078,\n    y: 11.5654,\n    width: 52.8047,\n    height: 17.0625,\n    rx: 1,\n    stroke: \"#165DFF\",\n    strokeWidth: 2\n  }))), /* @__PURE__ */ react.exports.createElement(\"defs\", null, /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip0\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 0.863281,\n    y: 0.59668,\n    width: 40,\n    height: 40,\n    rx: 20,\n    fill: \"white\"\n  })), /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip1\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    width: 61,\n    height: 61,\n    fill: \"white\",\n    transform: \"translate(-4.13672 -10.4033)\"\n  }))));\n}\nfunction SvgComponent$k(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip0)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip1)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 9.30078,\n    y: 11.5654,\n    width: 52.8047,\n    height: 17.0625,\n    rx: 1,\n    fill: \"#4E5969\",\n    fillOpacity: 0.1\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M16.1776 22.3897H17.5061V23.1183H13.9747V22.3897H15.2947V18.1297L14.2404 18.7726L13.8633 18.1126L15.5433 17.0754H16.1776V22.3897Z\",\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M20.6314 23.1868C19.9285 23.1868 19.3914 22.924 19.0199 22.3983C18.6542 21.8726 18.4714 21.1068 18.4714 20.1011C18.4714 19.0954 18.6542 18.3297 19.0199 17.804C19.3914 17.2726 19.9285 17.0068 20.6314 17.0068C21.3342 17.0068 21.8685 17.2697 22.2342 17.7954C22.6056 18.3211 22.7914 19.0868 22.7914 20.0926C22.7914 21.104 22.6056 21.8726 22.2342 22.3983C21.8685 22.924 21.3342 23.1868 20.6314 23.1868ZM20.6314 22.4754C21.0714 22.4754 21.3942 22.284 21.5999 21.9011C21.8056 21.5183 21.9085 20.9154 21.9085 20.0926C21.9085 19.2754 21.8056 18.6783 21.5999 18.3011C21.3942 17.9183 21.0714 17.7268 20.6314 17.7268C20.1914 17.7268 19.8685 17.9183 19.6628 18.3011C19.4571 18.6783 19.3542 19.2754 19.3542 20.0926C19.3542 20.9097 19.4571 21.5126 19.6628 21.9011C19.8685 22.284 20.1914 22.4754 20.6314 22.4754Z\",\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M23.7052 18.9354H24.7252V19.9554H23.7052V18.9354ZM23.7052 22.0983H24.7252V23.1183H23.7052V22.0983Z\",\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M28.499 22.3897H29.8276V23.1183H26.2961V22.3897H27.6161V18.1297L26.5619 18.7726L26.1847 18.1126L27.8647 17.0754H28.499V22.3897Z\",\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M32.9528 23.1868C32.2499 23.1868 31.7128 22.924 31.3414 22.3983C30.9756 21.8726 30.7928 21.1068 30.7928 20.1011C30.7928 19.0954 30.9756 18.3297 31.3414 17.804C31.7128 17.2726 32.2499 17.0068 32.9528 17.0068C33.6556 17.0068 34.1899 17.2697 34.5556 17.7954C34.9271 18.3211 35.1128 19.0868 35.1128 20.0926C35.1128 21.104 34.9271 21.8726 34.5556 22.3983C34.1899 22.924 33.6556 23.1868 32.9528 23.1868ZM32.9528 22.4754C33.3928 22.4754 33.7156 22.284 33.9214 21.9011C34.1271 21.5183 34.2299 20.9154 34.2299 20.0926C34.2299 19.2754 34.1271 18.6783 33.9214 18.3011C33.7156 17.9183 33.3928 17.7268 32.9528 17.7268C32.5128 17.7268 32.1899 17.9183 31.9842 18.3011C31.7785 18.6783 31.6756 19.2754 31.6756 20.0926C31.6756 20.9097 31.7785 21.5126 31.9842 21.9011C32.1899 22.284 32.5128 22.4754 32.9528 22.4754Z\",\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 9.30078,\n    y: 11.5654,\n    width: 52.8047,\n    height: 17.0625,\n    rx: 1,\n    stroke: \"#4E5969\",\n    strokeWidth: 2\n  }))), /* @__PURE__ */ react.exports.createElement(\"defs\", null, /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip0\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 0.863281,\n    y: 0.59668,\n    width: 40,\n    height: 40,\n    rx: 20,\n    fill: \"white\"\n  })), /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip1\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    width: 61,\n    height: 61,\n    fill: \"white\",\n    transform: \"translate(-4.13672 -10.4033)\"\n  }))));\n}\nfunction SvgComponent$j(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip0)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M13.6621 -1.40332V6.95605\",\n    stroke: \"#6AA1FF\",\n    strokeWidth: 1.67188\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M13.6621 18.6592V25.0186\",\n    stroke: \"#6AA1FF\",\n    strokeWidth: 1.67188\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 11.1543,\n    y: 10.2998,\n    width: 5.01562,\n    height: 5.01562,\n    rx: 2.50781,\n    fill: \"#165DFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 19.5137,\n    y: 10.6436,\n    width: 26.75,\n    height: 5.67188,\n    rx: 2,\n    fill: \"#165DFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 11.1543,\n    y: 28.3623,\n    width: 5.01562,\n    height: 5.01562,\n    rx: 2.50781,\n    fill: \"#165DFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 19.5137,\n    y: 27.8701,\n    width: 26.75,\n    height: 5.67188,\n    rx: 2,\n    fill: \"#BEDAFF\"\n  })), /* @__PURE__ */ react.exports.createElement(\"defs\", null, /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip0\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 0.865234,\n    y: 0.15918,\n    width: 40,\n    height: 40,\n    rx: 20,\n    fill: \"white\"\n  }))));\n}\nfunction SvgComponent$i(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip0)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"path\", {\n    opacity: 0.6,\n    d: \"M13.6621 -1.40332V6.95605\",\n    stroke: \"#4E5969\",\n    strokeWidth: 1.67188\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    opacity: 0.6,\n    d: \"M13.6621 18.6592V25.0186\",\n    stroke: \"#4E5969\",\n    strokeWidth: 1.67188\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 11.1543,\n    y: 10.2998,\n    width: 5.01562,\n    height: 5.01562,\n    rx: 2.50781,\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 19.5137,\n    y: 10.6436,\n    width: 26.75,\n    height: 5.67188,\n    rx: 2,\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 11.1543,\n    y: 28.3623,\n    width: 5.01562,\n    height: 5.01562,\n    rx: 2.50781,\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    opacity: 0.2,\n    x: 19.5137,\n    y: 27.8701,\n    width: 26.75,\n    height: 5.67188,\n    rx: 2,\n    fill: \"#4E5969\"\n  })), /* @__PURE__ */ react.exports.createElement(\"defs\", null, /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip0\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 0.865234,\n    y: 0.15918,\n    width: 40,\n    height: 40,\n    rx: 20,\n    fill: \"white\"\n  }))));\n}\nfunction SvgComponent$h(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"mask\", {\n    id: \"path-2-inside-1\",\n    fill: \"white\"\n  }, /* @__PURE__ */ react.exports.createElement(\"path\", {\n    fillRule: \"evenodd\",\n    clipRule: \"evenodd\",\n    d: \"M7.17578 10.1592C6.45091 10.1592 5.86328 10.7468 5.86328 11.4717V27.2529C5.86328 27.9778 6.45091 28.5654 7.17578 28.5654H17.8633L20.3992 31.1014C20.6555 31.3577 21.071 31.3577 21.3273 31.1014L23.8633 28.5654H35.3945C36.1194 28.5654 36.707 27.9778 36.707 27.2529V11.4717C36.707 10.7468 36.1194 10.1592 35.3945 10.1592H7.17578Z\"\n  })), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    fillRule: \"evenodd\",\n    clipRule: \"evenodd\",\n    d: \"M7.17578 10.1592C6.45091 10.1592 5.86328 10.7468 5.86328 11.4717V27.2529C5.86328 27.9778 6.45091 28.5654 7.17578 28.5654H17.8633L20.3992 31.1014C20.6555 31.3577 21.071 31.3577 21.3273 31.1014L23.8633 28.5654H35.3945C36.1194 28.5654 36.707 27.9778 36.707 27.2529V11.4717C36.707 10.7468 36.1194 10.1592 35.3945 10.1592H7.17578Z\",\n    fill: \"#E8F3FF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M17.8633 28.5654L18.9239 27.5048L18.4846 27.0654H17.8633V28.5654ZM20.3992 31.1014L19.3386 32.1621L19.3386 32.1621L20.3992 31.1014ZM21.3273 31.1014L22.388 32.1621L22.388 32.1621L21.3273 31.1014ZM23.8633 28.5654V27.0654H23.242L22.8026 27.5048L23.8633 28.5654ZM7.36328 11.4717C7.36328 11.5752 7.27933 11.6592 7.17578 11.6592V8.65918C5.62248 8.65918 4.36328 9.91838 4.36328 11.4717H7.36328ZM7.36328 27.2529V11.4717H4.36328V27.2529H7.36328ZM7.17578 27.0654C7.27933 27.0654 7.36328 27.1494 7.36328 27.2529H4.36328C4.36328 28.8062 5.62248 30.0654 7.17578 30.0654V27.0654ZM17.8633 27.0654H7.17578V30.0654H17.8633V27.0654ZM16.8026 29.6261L19.3386 32.1621L21.4599 30.0407L18.9239 27.5048L16.8026 29.6261ZM19.3386 32.1621C20.1807 33.0041 21.5459 33.0041 22.388 32.1621L20.2667 30.0407C20.5962 29.7112 21.1304 29.7112 21.4599 30.0407L19.3386 32.1621ZM22.388 32.1621L24.9239 29.6261L22.8026 27.5048L20.2667 30.0407L22.388 32.1621ZM35.3945 27.0654H23.8633V30.0654H35.3945V27.0654ZM35.207 27.2529C35.207 27.1494 35.291 27.0654 35.3945 27.0654V30.0654C36.9478 30.0654 38.207 28.8062 38.207 27.2529H35.207ZM35.207 11.4717V27.2529H38.207V11.4717H35.207ZM35.3945 11.6592C35.291 11.6592 35.207 11.5752 35.207 11.4717H38.207C38.207 9.91838 36.9478 8.65918 35.3945 8.65918V11.6592ZM7.17578 11.6592H35.3945V8.65918H7.17578V11.6592Z\",\n    fill: \"#165DFF\",\n    mask: \"url(#path-2-inside-1)\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M17.4731 23.1592V21.6599H13.8633V20.6081L17.7317 15.2711H18.9781V20.4739H20.1422V21.6599H18.9781V23.1592H17.4731ZM17.4731 20.4739V17.4641L15.3095 20.4739H17.4731Z\",\n    fill: \"#165DFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M21.3604 23.1592V22.0962L24.0413 19.3774C24.4019 19.0044 24.6606 18.6762 24.8174 18.3927C24.9741 18.1018 25.0525 17.8072 25.0525 17.5088C25.0525 16.748 24.5704 16.3676 23.6063 16.3676C22.8537 16.3676 22.16 16.6361 21.525 17.1732L21.0194 16.099C21.3487 15.8156 21.7602 15.5881 22.2541 15.4165C22.7479 15.245 23.2613 15.1592 23.7944 15.1592C24.6802 15.1592 25.3582 15.3494 25.8286 15.7298C26.3067 16.1102 26.5458 16.6548 26.5458 17.3634C26.5458 17.8408 26.4243 18.2995 26.1813 18.7396C25.9461 19.1797 25.5738 19.6534 25.0643 20.1606L23.2417 21.9732H26.8633V23.1592H21.3604Z\",\n    fill: \"#165DFF\"\n  }));\n}\nfunction SvgComponent$g(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"mask\", {\n    id: \"path-2-inside-1\",\n    fill: \"white\"\n  }, /* @__PURE__ */ react.exports.createElement(\"path\", {\n    fillRule: \"evenodd\",\n    clipRule: \"evenodd\",\n    d: \"M7.17578 10.1592C6.45091 10.1592 5.86328 10.7468 5.86328 11.4717V27.2529C5.86328 27.9778 6.45091 28.5654 7.17578 28.5654H17.8633L20.3992 31.1014C20.6555 31.3577 21.071 31.3577 21.3273 31.1014L23.8633 28.5654H35.3945C36.1194 28.5654 36.707 27.9778 36.707 27.2529V11.4717C36.707 10.7468 36.1194 10.1592 35.3945 10.1592H7.17578Z\"\n  })), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    fillRule: \"evenodd\",\n    clipRule: \"evenodd\",\n    d: \"M7.17578 10.1592C6.45091 10.1592 5.86328 10.7468 5.86328 11.4717V27.2529C5.86328 27.9778 6.45091 28.5654 7.17578 28.5654H17.8633L20.3992 31.1014C20.6555 31.3577 21.071 31.3577 21.3273 31.1014L23.8633 28.5654H35.3945C36.1194 28.5654 36.707 27.9778 36.707 27.2529V11.4717C36.707 10.7468 36.1194 10.1592 35.3945 10.1592H7.17578Z\",\n    fill: \"#4E5969\",\n    fillOpacity: 0.1\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M17.8633 28.5654L18.9239 27.5048L18.4846 27.0654H17.8633V28.5654ZM20.3992 31.1014L19.3386 32.1621L19.3386 32.1621L20.3992 31.1014ZM21.3273 31.1014L22.388 32.1621L22.388 32.1621L21.3273 31.1014ZM23.8633 28.5654V27.0654H23.242L22.8026 27.5048L23.8633 28.5654ZM7.36328 11.4717C7.36328 11.5752 7.27933 11.6592 7.17578 11.6592V8.65918C5.62248 8.65918 4.36328 9.91838 4.36328 11.4717H7.36328ZM7.36328 27.2529V11.4717H4.36328V27.2529H7.36328ZM7.17578 27.0654C7.27933 27.0654 7.36328 27.1494 7.36328 27.2529H4.36328C4.36328 28.8062 5.62248 30.0654 7.17578 30.0654V27.0654ZM17.8633 27.0654H7.17578V30.0654H17.8633V27.0654ZM16.8026 29.6261L19.3386 32.1621L21.4599 30.0407L18.9239 27.5048L16.8026 29.6261ZM19.3386 32.1621C20.1807 33.0041 21.5459 33.0041 22.388 32.1621L20.2667 30.0407C20.5962 29.7112 21.1304 29.7112 21.4599 30.0407L19.3386 32.1621ZM22.388 32.1621L24.9239 29.6261L22.8026 27.5048L20.2667 30.0407L22.388 32.1621ZM35.3945 27.0654H23.8633V30.0654H35.3945V27.0654ZM35.207 27.2529C35.207 27.1494 35.291 27.0654 35.3945 27.0654V30.0654C36.9478 30.0654 38.207 28.8062 38.207 27.2529H35.207ZM35.207 11.4717V27.2529H38.207V11.4717H35.207ZM35.3945 11.6592C35.291 11.6592 35.207 11.5752 35.207 11.4717H38.207C38.207 9.91838 36.9478 8.65918 35.3945 8.65918V11.6592ZM7.17578 11.6592H35.3945V8.65918H7.17578V11.6592Z\",\n    fill: \"#4E5969\",\n    mask: \"url(#path-2-inside-1)\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M17.4731 23.1592V21.6599H13.8633V20.6081L17.7317 15.2711H18.9781V20.4739H20.1422V21.6599H18.9781V23.1592H17.4731ZM17.4731 20.4739V17.4641L15.3095 20.4739H17.4731Z\",\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M21.3604 23.1592V22.0962L24.0413 19.3774C24.4019 19.0044 24.6606 18.6762 24.8174 18.3927C24.9741 18.1018 25.0525 17.8072 25.0525 17.5088C25.0525 16.748 24.5704 16.3676 23.6063 16.3676C22.8537 16.3676 22.16 16.6361 21.525 17.1732L21.0194 16.099C21.3487 15.8156 21.7602 15.5881 22.2541 15.4165C22.7479 15.245 23.2613 15.1592 23.7944 15.1592C24.6802 15.1592 25.3582 15.3494 25.8286 15.7298C26.3067 16.1102 26.5458 16.6548 26.5458 17.3634C26.5458 17.8408 26.4243 18.2995 26.1813 18.7396C25.9461 19.1797 25.5738 19.6534 25.0643 20.1606L23.2417 21.9732H26.8633V23.1592H21.3604Z\",\n    fill: \"#4E5969\"\n  }));\n}\nfunction SvgComponent$f(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip0)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: -15.5475,\n    y: 1.12588,\n    width: 28.1363,\n    height: 38.0668,\n    rx: 0.827538,\n    fill: \"#165DFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: -11.5498,\n    y: 10.1768,\n    width: 19.8609,\n    height: 2.65508,\n    rx: 1.32754,\n    fill: \"white\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: -11.5498,\n    y: 18.832,\n    width: 19.8609,\n    height: 2.65508,\n    rx: 1.32754,\n    fill: \"white\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: -11.5498,\n    y: 27.4868,\n    width: 19.8609,\n    height: 2.65508,\n    rx: 1.32754,\n    fill: \"white\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: -15.5475,\n    y: 1.12588,\n    width: 28.1363,\n    height: 38.0668,\n    rx: 0.827538,\n    stroke: \"#165DFF\",\n    strokeWidth: 1.65508\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 28.3119,\n    y: 1.12588,\n    width: 28.1363,\n    height: 38.0668,\n    rx: 0.827538,\n    fill: \"#E8F3FF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 32.4502,\n    y: 10.1768,\n    width: 19.8609,\n    height: 2.65508,\n    rx: 1.32754,\n    fill: \"#94BFFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 32.4502,\n    y: 18.832,\n    width: 19.8609,\n    height: 2.65508,\n    rx: 1.32754,\n    fill: \"#94BFFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 32.4502,\n    y: 27.4868,\n    width: 19.8609,\n    height: 2.65508,\n    rx: 1.32754,\n    fill: \"#94BFFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 28.3119,\n    y: 1.12588,\n    width: 28.1363,\n    height: 38.0668,\n    rx: 0.827538,\n    stroke: \"#165DFF\",\n    strokeWidth: 1.65508\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M22.0485 11.2474C22.1817 11.1641 22.3545 11.2599 22.3545 11.417L22.3545 15.6605C22.3545 15.8176 22.1817 15.9134 22.0485 15.8301L18.6537 13.7084C18.5283 13.63 18.5283 13.4475 18.6537 13.3692L22.0485 11.2474Z\",\n    fill: \"#165DFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M18.6048 29.6398C18.4716 29.7231 18.2988 29.6273 18.2988 29.4702L18.2988 24.9163C18.2988 24.7593 18.4716 24.6635 18.6048 24.7467L22.2479 27.0237C22.3732 27.102 22.3732 27.2845 22.2479 27.3629L18.6048 29.6398Z\",\n    fill: \"#165DFF\"\n  })), /* @__PURE__ */ react.exports.createElement(\"defs\", null, /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip0\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 0.864258,\n    y: 0.15918,\n    width: 40,\n    height: 40,\n    rx: 20,\n    fill: \"white\"\n  }))));\n}\nfunction SvgComponent$e(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip0)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: -15.5475,\n    y: 1.12588,\n    width: 28.1363,\n    height: 38.0668,\n    rx: 0.827538,\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: -11.5498,\n    y: 10.1768,\n    width: 19.8609,\n    height: 2.65508,\n    rx: 1.32754,\n    fill: \"white\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: -11.5498,\n    y: 18.832,\n    width: 19.8609,\n    height: 2.65508,\n    rx: 1.32754,\n    fill: \"white\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: -11.5498,\n    y: 27.4868,\n    width: 19.8609,\n    height: 2.65508,\n    rx: 1.32754,\n    fill: \"white\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: -15.5475,\n    y: 1.12588,\n    width: 28.1363,\n    height: 38.0668,\n    rx: 0.827538,\n    stroke: \"#4E5969\",\n    strokeWidth: 1.65508\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 28.3119,\n    y: 1.12588,\n    width: 28.1363,\n    height: 38.0668,\n    rx: 0.827538,\n    fill: \"#4E5969\",\n    fillOpacity: 0.1\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    opacity: 0.3,\n    x: 32.4502,\n    y: 10.1768,\n    width: 19.8609,\n    height: 2.65508,\n    rx: 1.32754,\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    opacity: 0.3,\n    x: 32.4502,\n    y: 18.832,\n    width: 19.8609,\n    height: 2.65508,\n    rx: 1.32754,\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    opacity: 0.3,\n    x: 32.4502,\n    y: 27.4868,\n    width: 19.8609,\n    height: 2.65508,\n    rx: 1.32754,\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 28.3119,\n    y: 1.12588,\n    width: 28.1363,\n    height: 38.0668,\n    rx: 0.827538,\n    stroke: \"#4E5969\",\n    strokeWidth: 1.65508\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M22.0485 11.2474C22.1817 11.1641 22.3545 11.2599 22.3545 11.417L22.3545 15.6605C22.3545 15.8176 22.1817 15.9134 22.0485 15.8301L18.6537 13.7084C18.5283 13.63 18.5283 13.4475 18.6537 13.3692L22.0485 11.2474Z\",\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M18.6048 29.6398C18.4716 29.7231 18.2988 29.6273 18.2988 29.4702L18.2988 24.9163C18.2988 24.7593 18.4716 24.6635 18.6048 24.7467L22.2479 27.0237C22.3732 27.102 22.3732 27.2845 22.2479 27.3629L18.6048 29.6398Z\",\n    fill: \"#4E5969\"\n  })), /* @__PURE__ */ react.exports.createElement(\"defs\", null, /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip0\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 0.864258,\n    y: 0.15918,\n    width: 40,\n    height: 40,\n    rx: 20,\n    fill: \"white\"\n  }))));\n}\nfunction SvgComponent$d(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip0)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 15.1758,\n    y: 12.2217,\n    width: 32.625,\n    height: 2.8125,\n    rx: 1.40625,\n    fill: \"#165DFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 22.4258,\n    y: 21.2842,\n    width: 25.375,\n    height: 2.8125,\n    rx: 1.40625,\n    fill: \"#165DFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 29.6758,\n    y: 30.3467,\n    width: 18.125,\n    height: 2.8125,\n    rx: 1.40625,\n    fill: \"#BEDAFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 29.6758,\n    y: 39.4092,\n    width: 18.125,\n    height: 1.8125,\n    rx: 0.90625,\n    fill: \"#BEDAFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M11.3633 12.3154L8.64453 15.9404L5.92578 12.3154L11.3633 12.3154Z\",\n    fill: \"#165DFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M18.6133 21.3779L15.8945 25.0029L13.1758 21.3779L18.6133 21.3779Z\",\n    fill: \"#165DFF\"\n  })), /* @__PURE__ */ react.exports.createElement(\"defs\", null, /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip0\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 0.863281,\n    y: 0.15918,\n    width: 40,\n    height: 40,\n    rx: 20,\n    fill: \"white\"\n  }))));\n}\nfunction SvgComponent$c(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip0)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 15.1758,\n    y: 12.2217,\n    width: 32.625,\n    height: 2.8125,\n    rx: 1.40625,\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 22.4258,\n    y: 21.2842,\n    width: 25.375,\n    height: 2.8125,\n    rx: 1.40625,\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    opacity: 0.3,\n    x: 29.6758,\n    y: 30.3467,\n    width: 18.125,\n    height: 2.8125,\n    rx: 1.40625,\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M11.3633 12.3154L8.64453 15.9404L5.92578 12.3154L11.3633 12.3154Z\",\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M18.6133 21.3779L15.8945 25.0029L13.1758 21.3779L18.6133 21.3779Z\",\n    fill: \"#4E5969\"\n  })), /* @__PURE__ */ react.exports.createElement(\"defs\", null, /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip0\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 0.863281,\n    y: 0.15918,\n    width: 40,\n    height: 40,\n    rx: 20,\n    fill: \"white\"\n  }))));\n}\nfunction SvgComponent$b(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip0)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 12.2393,\n    y: 12.5386,\n    width: 29.7915,\n    height: 3.65508,\n    rx: 1.82754,\n    fill: \"#165DFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 18.8594,\n    y: 20.814,\n    width: 23.1712,\n    height: 3.65508,\n    rx: 1.82754,\n    fill: \"#BEDAFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 25.4805,\n    y: 29.0894,\n    width: 16.5508,\n    height: 3.65508,\n    rx: 1.82754,\n    fill: \"#BEDAFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M9.46301 12.8709L7.18038 15.9144C7.14038 15.9678 7.06038 15.9678 7.02038 15.9144L4.73776 12.8709C4.68832 12.805 4.73535 12.7109 4.81776 12.7109L9.38301 12.7109C9.46541 12.7109 9.51245 12.805 9.46301 12.8709Z\",\n    fill: \"#165DFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M16.0841 21.1463L13.8015 24.1898C13.7615 24.2432 13.6815 24.2432 13.6415 24.1898L11.3589 21.1463C11.3094 21.0804 11.3564 20.9863 11.4389 20.9863L16.0041 20.9863C16.0865 20.9863 16.1335 21.0804 16.0841 21.1463Z\",\n    fill: \"#BEDAFF\"\n  })), /* @__PURE__ */ react.exports.createElement(\"defs\", null, /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip0\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 0.863281,\n    y: 0.15918,\n    width: 40,\n    height: 40,\n    rx: 20,\n    fill: \"white\"\n  }))));\n}\nfunction SvgComponent$a(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip0)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 12.2393,\n    y: 12.5386,\n    width: 29.7915,\n    height: 3.65508,\n    rx: 1.82754,\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    opacity: 0.3,\n    x: 18.8594,\n    y: 20.814,\n    width: 23.1712,\n    height: 3.65508,\n    rx: 1.82754,\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    opacity: 0.3,\n    x: 25.4805,\n    y: 29.0894,\n    width: 16.5508,\n    height: 3.65508,\n    rx: 1.82754,\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M9.46301 12.8709L7.18038 15.9144C7.14038 15.9678 7.06038 15.9678 7.02038 15.9144L4.73776 12.8709C4.68832 12.805 4.73535 12.7109 4.81776 12.7109L9.38301 12.7109C9.46541 12.7109 9.51245 12.805 9.46301 12.8709Z\",\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    opacity: 0.3,\n    d: \"M16.0841 21.1463L13.8015 24.1898C13.7615 24.2432 13.6815 24.2432 13.6415 24.1898L11.3589 21.1463C11.3094 21.0804 11.3564 20.9863 11.4389 20.9863L16.0041 20.9863C16.0865 20.9863 16.1335 21.0804 16.0841 21.1463Z\",\n    fill: \"#4E5969\"\n  })), /* @__PURE__ */ react.exports.createElement(\"defs\", null, /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip0\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 0.863281,\n    y: 0.15918,\n    width: 40,\n    height: 40,\n    rx: 20,\n    fill: \"white\"\n  }))));\n}\nfunction SvgComponent$9(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip0)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M6.86328 24.1592C6.86328 23.0546 7.75871 22.1592 8.86328 22.1592H32.8633C33.9679 22.1592 34.8633 23.0546 34.8633 24.1592V51.1592H6.86328V24.1592Z\",\n    fill: \"#BEDAFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M16.8633 17.1592L12.8633 10.1592\",\n    stroke: \"#165DFF\",\n    strokeWidth: 2,\n    strokeLinecap: \"round\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M25.8633 17.1592L29.8633 10.1592\",\n    stroke: \"#165DFF\",\n    strokeWidth: 2,\n    strokeLinecap: \"round\"\n  })), /* @__PURE__ */ react.exports.createElement(\"defs\", null, /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip0\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 0.863281,\n    y: 0.15918,\n    width: 40,\n    height: 40,\n    rx: 20,\n    fill: \"white\"\n  }))));\n}\nfunction SvgComponent$8(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip0)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"path\", {\n    opacity: 0.3,\n    d: \"M6.86328 24.1592C6.86328 23.0546 7.75871 22.1592 8.86328 22.1592H32.8633C33.9679 22.1592 34.8633 23.0546 34.8633 24.1592V51.1592H6.86328V24.1592Z\",\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M16.8633 17.1592L12.8633 10.1592\",\n    stroke: \"#4E5969\",\n    strokeWidth: 2,\n    strokeLinecap: \"round\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M25.8633 17.1592L29.8633 10.1592\",\n    stroke: \"#4E5969\",\n    strokeWidth: 2,\n    strokeLinecap: \"round\"\n  })), /* @__PURE__ */ react.exports.createElement(\"defs\", null, /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip0\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 0.863281,\n    y: 0.15918,\n    width: 40,\n    height: 40,\n    rx: 20,\n    fill: \"white\"\n  }))));\n}\nfunction SvgComponent$7(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip0)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 22.8086,\n    y: 10.1592,\n    width: 10.1231,\n    height: 2.15385,\n    rx: 1.07692,\n    fill: \"#165DFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 22.8086,\n    y: 16.6206,\n    width: 25.3077,\n    height: 2.15385,\n    rx: 1.07692,\n    fill: \"#BEDAFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 22.8086,\n    y: 23.082,\n    width: 25.3077,\n    height: 2.15385,\n    rx: 1.07692,\n    fill: \"#BEDAFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 22.8086,\n    y: 29.5439,\n    width: 18.3481,\n    height: 2.15385,\n    rx: 1.07692,\n    fill: \"#BEDAFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M5.86328 17.962L9.44925 10.1592H10.8327L14.4187 17.962H12.6921L11.9616 16.2686H8.32033L7.60093 17.962H5.86328ZM10.1244 11.9854L8.89586 14.9294H11.3972L10.1465 11.9854H10.1244Z\",\n    fill: \"#165DFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M16.7864 18.0837C16.3806 18.0837 16.0228 18.0063 15.7129 17.8513C15.403 17.6964 15.1558 17.4861 14.9713 17.2204C14.7942 16.9548 14.7057 16.656 14.7057 16.3239C14.7057 15.9329 14.809 15.6193 15.0156 15.3832C15.2222 15.1471 15.5579 14.9811 16.0228 14.8851C16.4876 14.7818 17.1037 14.7302 17.8711 14.7302H18.2695V14.542C18.2695 14.2174 18.1957 13.9886 18.0482 13.8558C17.9006 13.7156 17.6497 13.6455 17.2956 13.6455C17.0004 13.6455 16.6868 13.6935 16.3548 13.7894C16.0301 13.878 15.7055 14.0145 15.3808 14.1989L14.927 13.0811C15.1189 12.9556 15.3513 12.8413 15.6243 12.738C15.9047 12.6347 16.1961 12.5572 16.4987 12.5056C16.8012 12.4465 17.089 12.417 17.362 12.417C18.2031 12.417 18.8303 12.6089 19.2435 12.9925C19.6567 13.3688 19.8633 13.9554 19.8633 14.7523V17.962H18.3027V17.143C18.192 17.4307 18.0039 17.6595 17.7383 17.8292C17.48 17.9989 17.1627 18.0837 16.7864 18.0837ZM17.1627 16.9659C17.4726 16.9659 17.7346 16.8589 17.9486 16.6449C18.1625 16.4309 18.2695 16.1542 18.2695 15.8148V15.5935H17.8821C17.314 15.5935 16.9119 15.6451 16.6758 15.7484C16.4396 15.8443 16.3216 16.0141 16.3216 16.2575C16.3216 16.4641 16.3917 16.6338 16.5319 16.7667C16.6794 16.8995 16.8897 16.9659 17.1627 16.9659Z\",\n    fill: \"#165DFF\"\n  })), /* @__PURE__ */ react.exports.createElement(\"defs\", null, /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip0\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 0.863281,\n    y: 0.15918,\n    width: 40,\n    height: 40,\n    rx: 20,\n    fill: \"white\"\n  }))));\n}\nfunction SvgComponent$6(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip0)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 22.8086,\n    y: 10.1592,\n    width: 10.1231,\n    height: 2.15385,\n    rx: 1.07692,\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    opacity: 0.2,\n    d: \"M22.8086 17.6975C22.8086 17.1028 23.2907 16.6206 23.8855 16.6206H47.0394C47.6341 16.6206 48.1163 17.1028 48.1163 17.6975V17.6975C48.1163 18.2923 47.6341 18.7745 47.0394 18.7745H23.8855C23.2907 18.7745 22.8086 18.2923 22.8086 17.6975V17.6975Z\",\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    opacity: 0.2,\n    x: 22.8086,\n    y: 23.082,\n    width: 25.3077,\n    height: 2.15385,\n    rx: 1.07692,\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    opacity: 0.2,\n    x: 22.8086,\n    y: 29.5439,\n    width: 18.3481,\n    height: 2.15385,\n    rx: 1.07692,\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M5.86328 17.962L9.44925 10.1592H10.8327L14.4187 17.962H12.6921L11.9616 16.2686H8.32033L7.60093 17.962H5.86328ZM10.1244 11.9854L8.89586 14.9294H11.3972L10.1465 11.9854H10.1244Z\",\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M16.7864 18.0837C16.3806 18.0837 16.0228 18.0063 15.7129 17.8513C15.403 17.6964 15.1558 17.4861 14.9713 17.2204C14.7942 16.9548 14.7057 16.656 14.7057 16.3239C14.7057 15.9329 14.809 15.6193 15.0156 15.3832C15.2222 15.1471 15.5579 14.9811 16.0228 14.8851C16.4876 14.7818 17.1037 14.7302 17.8711 14.7302H18.2695V14.542C18.2695 14.2174 18.1957 13.9886 18.0482 13.8558C17.9006 13.7156 17.6497 13.6455 17.2956 13.6455C17.0004 13.6455 16.6868 13.6935 16.3548 13.7894C16.0301 13.878 15.7055 14.0145 15.3808 14.1989L14.927 13.0811C15.1189 12.9556 15.3513 12.8413 15.6243 12.738C15.9047 12.6347 16.1961 12.5572 16.4987 12.5056C16.8012 12.4465 17.089 12.417 17.362 12.417C18.2031 12.417 18.8303 12.6089 19.2435 12.9925C19.6567 13.3688 19.8633 13.9554 19.8633 14.7523V17.962H18.3027V17.143C18.192 17.4307 18.0039 17.6595 17.7383 17.8292C17.48 17.9989 17.1627 18.0837 16.7864 18.0837ZM17.1627 16.9659C17.4726 16.9659 17.7346 16.8589 17.9486 16.6449C18.1625 16.4309 18.2695 16.1542 18.2695 15.8148V15.5935H17.8821C17.314 15.5935 16.9119 15.6451 16.6758 15.7484C16.4396 15.8443 16.3216 16.0141 16.3216 16.2575C16.3216 16.4641 16.3917 16.6338 16.5319 16.7667C16.6794 16.8995 16.8897 16.9659 17.1627 16.9659Z\",\n    fill: \"#4E5969\"\n  })), /* @__PURE__ */ react.exports.createElement(\"defs\", null, /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip0\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 0.863281,\n    y: 0.15918,\n    width: 40,\n    height: 40,\n    rx: 20,\n    fill: \"white\"\n  }))));\n}\nfunction SvgComponent$5(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip0)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 8.21973,\n    y: 7.1416,\n    width: 25.7787,\n    height: 25.7787,\n    rx: 2.14822,\n    fill: \"#165DFF\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    fillRule: \"evenodd\",\n    clipRule: \"evenodd\",\n    d: \"M20.3786 16.0303C20.2303 16.0303 20.1101 16.1505 20.1101 16.2988V19.0302H17.3789C17.2306 19.0302 17.1104 19.1505 17.1104 19.2988V20.7617C17.1104 20.91 17.2306 21.0302 17.3789 21.0302H20.1101V23.7617C20.1101 23.91 20.2303 24.0303 20.3786 24.0303H21.8415C21.9898 24.0303 22.1101 23.91 22.1101 23.7617V21.0302H24.8418C24.9901 21.0302 25.1104 20.91 25.1104 20.7617V19.2988C25.1104 19.1505 24.9901 19.0302 24.8418 19.0302H22.1101V16.2988C22.1101 16.1505 21.9898 16.0303 21.8415 16.0303H20.3786Z\",\n    fill: \"white\"\n  })), /* @__PURE__ */ react.exports.createElement(\"defs\", null, /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip0\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 0.863281,\n    y: 0.15918,\n    width: 40,\n    height: 40,\n    rx: 20,\n    fill: \"white\"\n  }))));\n}\nfunction SvgComponent$4(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 41,\n    height: 41,\n    viewBox: \"0 0 41 41\",\n    fill: \"none\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    clipPath: \"url(#clip0)\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 8.21973,\n    y: 7.1416,\n    width: 25.7787,\n    height: 25.7787,\n    rx: 2.14822,\n    fill: \"#4E5969\"\n  }), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    fillRule: \"evenodd\",\n    clipRule: \"evenodd\",\n    d: \"M20.3786 16.0303C20.2303 16.0303 20.1101 16.1505 20.1101 16.2988V19.0302H17.3789C17.2306 19.0302 17.1104 19.1505 17.1104 19.2988V20.7617C17.1104 20.91 17.2306 21.0302 17.3789 21.0302H20.1101V23.7617C20.1101 23.91 20.2303 24.0303 20.3786 24.0303H21.8415C21.9898 24.0303 22.1101 23.91 22.1101 23.7617V21.0302H24.8418C24.9901 21.0302 25.1104 20.91 25.1104 20.7617V19.2988C25.1104 19.1505 24.9901 19.0302 24.8418 19.0302H22.1101V16.2988C22.1101 16.1505 21.9898 16.0303 21.8415 16.0303H20.3786Z\",\n    fill: \"white\"\n  })), /* @__PURE__ */ react.exports.createElement(\"defs\", null, /* @__PURE__ */ react.exports.createElement(\"clipPath\", {\n    id: \"clip0\"\n  }, /* @__PURE__ */ react.exports.createElement(\"rect\", {\n    x: 0.863281,\n    y: 0.15918,\n    width: 40,\n    height: 40,\n    rx: 20,\n    fill: \"white\"\n  }))));\n}\nvar icon = {\n  IconAffixBlue: React.createElement(SvgComponent$29, null),\n  IconAffixGray: React.createElement(SvgComponent$28, null),\n  IconAlertBlue: React.createElement(SvgComponent$27, null),\n  IconAlertGray: React.createElement(SvgComponent$26, null),\n  IconAnchorBlue: React.createElement(SvgComponent$25, null),\n  IconAnchorGray: React.createElement(SvgComponent$24, null),\n  IconAutoCompleteBlue: React.createElement(SvgComponent$23, null),\n  IconAutoCompleteGray: React.createElement(SvgComponent$22, null),\n  IconAvatarBlue: React.createElement(SvgComponent$21, null),\n  IconAvatarGray: React.createElement(SvgComponent$20, null),\n  IconBackTopBlue: React.createElement(SvgComponent$1$, null),\n  IconBackTopGray: React.createElement(SvgComponent$1_, null),\n  IconBadgeBlue: React.createElement(SvgComponent$1Z, null),\n  IconBadgeGray: React.createElement(SvgComponent$1Y, null),\n  IconBreadcrumbBlue: React.createElement(SvgComponent$1X, null),\n  IconBreadcrumbGray: React.createElement(SvgComponent$1W, null),\n  IconButtonBlue: React.createElement(SvgComponent$1V, null),\n  IconButtonGray: React.createElement(SvgComponent$1U, null),\n  IconCalendarBlue: React.createElement(SvgComponent$1T, null),\n  IconCalendarGray: React.createElement(SvgComponent$1S, null),\n  IconCardBlue: React.createElement(SvgComponent$1R, null),\n  IconCardGray: React.createElement(SvgComponent$1Q, null),\n  IconCarouselBlue: React.createElement(SvgComponent$1P, null),\n  IconCarouselGray: React.createElement(SvgComponent$1O, null),\n  IconCascaderBlue: React.createElement(SvgComponent$1N, null),\n  IconCascaderGray: React.createElement(SvgComponent$1M, null),\n  IconCheckboxBlue: React.createElement(SvgComponent$1L, null),\n  IconCheckboxGray: React.createElement(SvgComponent$1K, null),\n  IconCollapseBlue: React.createElement(SvgComponent$1J, null),\n  IconCollapseGray: React.createElement(SvgComponent$1I, null),\n  IconCommentBlue: React.createElement(SvgComponent$1H, null),\n  IconCommentGray: React.createElement(SvgComponent$1G, null),\n  IconConfigProviderBlue: React.createElement(SvgComponent$1F, null),\n  IconConfigProviderGray: React.createElement(SvgComponent$1E, null),\n  IconDatePickerBlue: React.createElement(SvgComponent$1D, null),\n  IconDatePickerGray: React.createElement(SvgComponent$1C, null),\n  IconDescriptionsBlue: React.createElement(SvgComponent$1B, null),\n  IconDescriptionsGray: React.createElement(SvgComponent$1A, null),\n  IconDividerBlue: React.createElement(SvgComponent$1z, null),\n  IconDividerGray: React.createElement(SvgComponent$1y, null),\n  IconDrawerBlue: React.createElement(SvgComponent$1x, null),\n  IconDrawerGray: React.createElement(SvgComponent$1w, null),\n  IconDropdownBlue: React.createElement(SvgComponent$1v, null),\n  IconDropdownGray: React.createElement(SvgComponent$1u, null),\n  IconEmptyBlue: React.createElement(SvgComponent$1t, null),\n  IconEmptyGray: React.createElement(SvgComponent$1s, null),\n  IconFormBlue: React.createElement(SvgComponent$1r, null),\n  IconFormGray: React.createElement(SvgComponent$1q, null),\n  IconGridBlue: React.createElement(SvgComponent$1p, null),\n  IconGridGray: React.createElement(SvgComponent$1o, null),\n  IconIconBlue: React.createElement(SvgComponent$1n, null),\n  IconIconGray: React.createElement(SvgComponent$1m, null),\n  IconImageBlue: React.createElement(SvgComponent$1l, null),\n  IconImageGray: React.createElement(SvgComponent$1k, null),\n  IconInputBlue: React.createElement(SvgComponent$1j, null),\n  IconInputGray: React.createElement(SvgComponent$1i, null),\n  IconInputTagBlue: React.createElement(SvgComponent$1h, null),\n  IconInputTagGray: React.createElement(SvgComponent$1g, null),\n  IconInputNumberBlue: React.createElement(SvgComponent$1f, null),\n  IconInputNumberGray: React.createElement(SvgComponent$1e, null),\n  IconLayoutBlue: React.createElement(SvgComponent$1d, null),\n  IconLayoutGray: React.createElement(SvgComponent$1c, null),\n  IconLinkBlue: React.createElement(SvgComponent$1b, null),\n  IconLinkGray: React.createElement(SvgComponent$1a, null),\n  IconListBlue: React.createElement(SvgComponent$19, null),\n  IconListGray: React.createElement(SvgComponent$18, null),\n  IconMentionsBlue: React.createElement(SvgComponent$17, null),\n  IconMentionsGray: React.createElement(SvgComponent$16, null),\n  IconMenuBlue: React.createElement(SvgComponent$15, null),\n  IconMenuGray: React.createElement(SvgComponent$14, null),\n  IconMessageBlue: React.createElement(SvgComponent$13, null),\n  IconMessageGray: React.createElement(SvgComponent$12, null),\n  IconModalBlue: React.createElement(SvgComponent$11, null),\n  IconModalGray: React.createElement(SvgComponent$10, null),\n  IconNotificationBlue: React.createElement(SvgComponent$$, null),\n  IconNotificationGray: React.createElement(SvgComponent$_, null),\n  IconPageHeaderBlue: React.createElement(SvgComponent$Z, null),\n  IconPageHeaderGray: React.createElement(SvgComponent$Y, null),\n  IconPaginationBlue: React.createElement(SvgComponent$X, null),\n  IconPaginationGray: React.createElement(SvgComponent$W, null),\n  IconPopconfirmBlue: React.createElement(SvgComponent$V, null),\n  IconPopconfirmGray: React.createElement(SvgComponent$U, null),\n  IconPopoverBlue: React.createElement(SvgComponent$T, null),\n  IconPopoverGray: React.createElement(SvgComponent$S, null),\n  IconProgressBlue: React.createElement(SvgComponent$R, null),\n  IconProgressGray: React.createElement(SvgComponent$Q, null),\n  IconRadioBlue: React.createElement(SvgComponent$P, null),\n  IconRadioGray: React.createElement(SvgComponent$O, null),\n  IconRateBlue: React.createElement(SvgComponent$N, null),\n  IconRateGray: React.createElement(SvgComponent$M, null),\n  IconResizeboxBlue: React.createElement(SvgComponent$L, null),\n  IconResizeboxGray: React.createElement(SvgComponent$K, null),\n  IconResultBlue: React.createElement(SvgComponent$J, null),\n  IconResultGray: React.createElement(SvgComponent$I, null),\n  IconSelectBlue: React.createElement(SvgComponent$H, null),\n  IconSelectGray: React.createElement(SvgComponent$G, null),\n  IconSkeletonBlue: React.createElement(SvgComponent$F, null),\n  IconSkeletonGray: React.createElement(SvgComponent$E, null),\n  IconSliderBlue: React.createElement(SvgComponent$D, null),\n  IconSliderGray: React.createElement(SvgComponent$C, null),\n  IconSpaceBlue: React.createElement(SvgComponent$B, null),\n  IconSpaceGray: React.createElement(SvgComponent$A, null),\n  IconSpinBlue: React.createElement(SvgComponent$z, null),\n  IconSpinGray: React.createElement(SvgComponent$y, null),\n  IconStatisticBlue: React.createElement(SvgComponent$x, null),\n  IconStatisticGray: React.createElement(SvgComponent$w, null),\n  IconStepsBlue: React.createElement(SvgComponent$v, null),\n  IconStepsGray: React.createElement(SvgComponent$u, null),\n  IconSwitchBlue: React.createElement(SvgComponent$t, null),\n  IconSwitchGray: React.createElement(SvgComponent$s, null),\n  IconTableBlue: React.createElement(SvgComponent$r, null),\n  IconTableGray: React.createElement(SvgComponent$q, null),\n  IconTabsBlue: React.createElement(SvgComponent$p, null),\n  IconTabsGray: React.createElement(SvgComponent$o, null),\n  IconTagBlue: React.createElement(SvgComponent$n, null),\n  IconTagGray: React.createElement(SvgComponent$m, null),\n  IconTimePickerBlue: React.createElement(SvgComponent$l, null),\n  IconTimePickerGray: React.createElement(SvgComponent$k, null),\n  IconTimelineBlue: React.createElement(SvgComponent$j, null),\n  IconTimelineGray: React.createElement(SvgComponent$i, null),\n  IconTooltipBlue: React.createElement(SvgComponent$h, null),\n  IconTooltipGray: React.createElement(SvgComponent$g, null),\n  IconTransferBlue: React.createElement(SvgComponent$f, null),\n  IconTransferGray: React.createElement(SvgComponent$e, null),\n  IconTreeBlue: React.createElement(SvgComponent$d, null),\n  IconTreeGray: React.createElement(SvgComponent$c, null),\n  IconTreeSelectBlue: React.createElement(SvgComponent$b, null),\n  IconTreeSelectGray: React.createElement(SvgComponent$a, null),\n  IconTriggerBlue: React.createElement(SvgComponent$9, null),\n  IconTriggerGray: React.createElement(SvgComponent$8, null),\n  IconTypographyBlue: React.createElement(SvgComponent$7, null),\n  IconTypographyGray: React.createElement(SvgComponent$6, null),\n  IconUploadBlue: React.createElement(SvgComponent$5, null),\n  IconUploadGray: React.createElement(SvgComponent$4, null),\n  IconSearchIcEnter: React.createElement(SvgComponent$2a, null),\n  IconBranding: React.createElement(SvgComponent$2b, null)\n};\nfunction SvgComponent$3(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    viewBox: \"0 0 24 54\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    stroke: \"currentColor\",\n    fill: \"none\",\n    fillRule: \"evenodd\",\n    strokeLinecap: \"round\",\n    strokeLinejoin: \"round\"\n  }, /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M8 6v42M20 27H8.3\"\n  })));\n}\nfunction SvgComponent$2(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    viewBox: \"0 0 24 54\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"g\", {\n    stroke: \"currentColor\",\n    fill: \"none\",\n    fillRule: \"evenodd\",\n    strokeLinecap: \"round\",\n    strokeLinejoin: \"round\"\n  }, /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M8 6v21M20 27H8.3\"\n  })));\n}\nfunction SvgComponent$1(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 20,\n    height: 20,\n    viewBox: \"0 0 20 20\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M17 6v12c0 .52-.2 1-1 1H4c-.7 0-1-.33-1-1V2c0-.55.42-1 1-1h8l5 5zM14 8h-3.13c-.51 0-.87-.34-.87-.87V4\",\n    stroke: \"currentColor\",\n    fill: \"none\",\n    fillRule: \"evenodd\",\n    strokeLinejoin: \"round\"\n  }));\n}\nfunction SvgComponent(props) {\n  return /* @__PURE__ */ react.exports.createElement(\"svg\", __spreadValues({\n    width: 20,\n    height: 20,\n    viewBox: \"0 0 20 20\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, props), /* @__PURE__ */ react.exports.createElement(\"path\", {\n    d: \"M13 13h4-4V8H7v5h6v4-4H7V8H3h4V3v5h6V3v5h4-4v5zm-6 0v4-4H3h4z\",\n    stroke: \"currentColor\",\n    fill: \"none\",\n    fillRule: \"evenodd\",\n    strokeLinecap: \"round\",\n    strokeLinejoin: \"round\"\n  }));\n}\nvar list = \"\";\nvar __read$7 = globalThis && globalThis.__read || function(o, n2) {\n  var m2 = typeof Symbol === \"function\" && o[Symbol.iterator];\n  if (!m2)\n    return o;\n  var i = m2.call(o), r2, ar = [], e;\n  try {\n    while ((n2 === void 0 || n2-- > 0) && !(r2 = i.next()).done)\n      ar.push(r2.value);\n  } catch (error) {\n    e = { error };\n  } finally {\n    try {\n      if (r2 && !r2.done && (m2 = i[\"return\"]))\n        m2.call(i);\n    } finally {\n      if (e)\n        throw e.error;\n    }\n  }\n  return ar;\n};\nvar __spreadArray$3 = globalThis && globalThis.__spreadArray || function(to, from, pack) {\n  if (pack || arguments.length === 2)\n    for (var i = 0, l2 = from.length, ar; i < l2; i++) {\n      if (ar || !(i in from)) {\n        if (!ar)\n          ar = Array.prototype.slice.call(from, 0, i);\n        ar[i] = from[i];\n      }\n    }\n  return to.concat(ar || Array.prototype.slice.call(from));\n};\nvar Text = Typography$1.Text, Paragraph = Typography$1.Paragraph;\nvar locales$2 = {\n  \"zh-CN\": {\n    component: \"\\u7EC4\\u4EF6\",\n    ecosystem: \"\\u751F\\u6001\",\n    design: \"\\u8BBE\\u8BA1\\u6307\\u5357\"\n  },\n  \"en-US\": {\n    component: \"Component\",\n    ecosystem: \"Ecosystem\",\n    design: \"Design Language\"\n  }\n};\nfunction List(_a) {\n  var _b = _a.exactList, exactList = _b === void 0 ? [] : _b, _c = _a.docsList, docsList = _c === void 0 ? [] : _c, _d = _a.queryList, queryList = _d === void 0 ? [] : _d, _e = _a.lang, lang = _e === void 0 ? \"zh-CN\" : _e, activeIndex = _a.activeIndex, onMouseEnterItem = _a.onMouseEnterItem, onClickItem = _a.onClickItem, algoliaTag = _a.algoliaTag;\n  var exactListRef = react.exports.useRef(null);\n  var docListRef = react.exports.useRef(null);\n  var queryListRef = react.exports.useRef(null);\n  var prefix = react.exports.useContext(GlobalContext).prefix;\n  var prefixCls2 = prefix + \"-search-modal-container\";\n  var t2 = locales$2[lang];\n  react.exports.useEffect(function() {\n    var exactList2 = exactListRef.current ? __spreadArray$3([], __read$7(exactListRef.current.childNodes), false) : [];\n    var docsList2 = docListRef.current ? docListRef.current.querySelectorAll(\".algolia-link\") : [];\n    var queryList2 = queryListRef.current ? __spreadArray$3([], __read$7(queryListRef.current.childNodes), false) : [];\n    var allList = __spreadArray$3(__spreadArray$3(__spreadArray$3([], __read$7(exactList2), false), __read$7(queryList2), false), __read$7(docsList2), false);\n    if (allList.length && allList[activeIndex]) {\n      scrollIntoView(allList[activeIndex], {\n        scrollMode: \"if-needed\",\n        block: \"nearest\",\n        inline: \"nearest\"\n      });\n    }\n  }, [activeIndex]);\n  return React.createElement(\"div\", { className: \"\" + prefixCls2 }, !!exactList.length && React.createElement(\"div\", { className: prefixCls2 + \"-exact\", ref: exactListRef, role: \"listbox\" }, exactList.map(function(ex, index2) {\n    var _a2, _b2;\n    var exactStyle = { backgroundColor: ex.backgroundColor };\n    if (ex.borderRadius) {\n      exactStyle.borderRadius = ex.borderRadius;\n    }\n    return React.createElement(\"div\", { role: \"option\", tabIndex: 0, \"aria-selected\": activeIndex === index2, className: cs(prefixCls2 + \"-exact-item\", (_a2 = {}, _a2[prefixCls2 + \"-item-active\"] = activeIndex === index2, _a2)), key: ex.key, onMouseEnter: function() {\n      return onMouseEnterItem(index2);\n    }, onClick: function() {\n      window.open(ex.url, ex.type !== \"component\" && ex.type !== \"design\" ? \"_black\" : \"_self\");\n      onClickItem();\n    } }, ex.svg && React.createElement(\"div\", { className: prefixCls2 + \"-exact-icon\", style: exactStyle, \"aria-hidden\": true }, ex.svg), React.createElement(\"div\", { className: prefixCls2 + \"-item-text\", dangerouslySetInnerHTML: { __html: ex.text } }), React.createElement(\"div\", { className: cs(prefixCls2 + \"-item-type\", (_b2 = {}, _b2[prefixCls2 + \"-item-design\"] = ex.type === \"design\", _b2)) }, t2[ex.type]), algoliaTag === \"vue\" && React.createElement(\"div\", { className: cs(prefixCls2 + \"-item-type\", prefixCls2 + \"-item-vue\") }, \"vue\"), React.createElement(\"div\", { className: prefixCls2 + \"-enter-icon\" }, icon.IconSearchIcEnter));\n  })), React.createElement(\"div\", { ref: queryListRef, role: \"listbox\" }, queryList.map(function(l2, index2) {\n    var _a2;\n    return React.createElement(\"div\", { role: \"option\", tabIndex: 0, \"aria-selected\": activeIndex === index2 + exactList.length, onMouseEnter: function() {\n      return onMouseEnterItem(exactList.length + index2);\n    }, className: cs(prefixCls2 + \"-item\", (_a2 = {}, _a2[prefixCls2 + \"-item-active\"] = activeIndex === index2 + exactList.length, _a2)), onClick: function() {\n      window.open(l2.url);\n      onClickItem();\n    }, key: l2.key }, React.createElement(\"div\", { className: prefixCls2 + \"-item-title\" }, l2.title), React.createElement(\"div\", { className: prefixCls2 + \"-item-desc\", dangerouslySetInnerHTML: { __html: l2.description } }), React.createElement(\"div\", { className: prefixCls2 + \"-enter-icon\", \"aria-hidden\": true }, icon.IconSearchIcEnter));\n  })), React.createElement(\"div\", { ref: docListRef, role: \"listbox\" }, docsList.map(function(doc, index2) {\n    var rootName = doc.rootName, lists = doc.lists;\n    return React.createElement(\"div\", { className: prefixCls2 + \"-doc\", key: index2 }, React.createElement(\"div\", { className: cs(prefixCls2 + \"-doc-title\", prefixCls2 + \"-doc-result\"), role: \"heading\", \"aria-level\": 2 }, React.createElement(Text, { type: \"primary\", bold: true }, rootName)), lists.map(function(item, index3) {\n      var _a2;\n      var url = item.url, label = item.label, tag = item.tag, anchor = item.anchor, currentIndex = item.currentIndex;\n      return React.createElement(\"div\", { role: \"option\", tabIndex: 0, \"aria-selected\": activeIndex === currentIndex, onClick: function() {\n        return window.open(url);\n      }, onMouseEnter: function() {\n        return onMouseEnterItem(currentIndex);\n      }, className: cs(\"algolia-link\", prefixCls2 + \"-doc-item\", (_a2 = {}, _a2[prefixCls2 + \"-item-active\"] = activeIndex === currentIndex, _a2)), key: index3 }, React.createElement(\"div\", { className: prefixCls2 + \"-doc-item-icon\", \"aria-hidden\": true }, index3 !== lists.length - 1 ? React.createElement(SvgComponent$3, { className: prefixCls2 + \"-doc-item-icon-line\" }) : React.createElement(SvgComponent$2, { className: prefixCls2 + \"-doc-item-icon-line\" }), anchor ? React.createElement(SvgComponent, { className: prefixCls2 + \"-doc-item-icon-anchor\" }) : React.createElement(SvgComponent$1, { className: prefixCls2 + \"-doc-item-icon-doc\" })), React.createElement(\"div\", { className: prefixCls2 + \"-doc-item-result\" }, React.createElement(\"div\", { className: prefixCls2 + \"-doc-item-result-label\" }, React.createElement(Text, { bold: true }, React.createElement(\"span\", { dangerouslySetInnerHTML: { __html: label } }))), tag && React.createElement(\"div\", { className: prefixCls2 + \"-doc-item-result-desc\" }, React.createElement(Paragraph, { type: \"secondary\", style: { marginBottom: 0, fontSize: \"12px\" } }, React.createElement(\"span\", { dangerouslySetInnerHTML: { __html: tag } })))), React.createElement(\"div\", { className: prefixCls2 + \"-enter-icon\" }, icon.IconSearchIcEnter));\n    }));\n  })));\n}\nvar __read$6 = globalThis && globalThis.__read || function(o, n2) {\n  var m2 = typeof Symbol === \"function\" && o[Symbol.iterator];\n  if (!m2)\n    return o;\n  var i = m2.call(o), r2, ar = [], e;\n  try {\n    while ((n2 === void 0 || n2-- > 0) && !(r2 = i.next()).done)\n      ar.push(r2.value);\n  } catch (error) {\n    e = { error };\n  } finally {\n    try {\n      if (r2 && !r2.done && (m2 = i[\"return\"]))\n        m2.call(i);\n    } finally {\n      if (e)\n        throw e.error;\n    }\n  }\n  return ar;\n};\nvar __spreadArray$2 = globalThis && globalThis.__spreadArray || function(to, from, pack) {\n  if (pack || arguments.length === 2)\n    for (var i = 0, l2 = from.length, ar; i < l2; i++) {\n      if (ar || !(i in from)) {\n        if (!ar)\n          ar = Array.prototype.slice.call(from, 0, i);\n        ar[i] = from[i];\n      }\n    }\n  return to.concat(ar || Array.prototype.slice.call(from));\n};\nvar reactComponents = [\n  \"Icon\",\n  \"Button\",\n  \"Link\",\n  \"Typography\",\n  \"Grid\",\n  \"Divider\",\n  \"Layout\",\n  \"Space\",\n  \"Avatar\",\n  \"Badge\",\n  \"Calendar\",\n  \"Card\",\n  \"Collapse\",\n  \"Comment\",\n  \"Descriptions\",\n  \"Empty\",\n  \"List\",\n  \"Statistic\",\n  \"Tabs\",\n  \"Table\",\n  \"Tag\",\n  \"Timeline\",\n  \"Tooltip\",\n  \"Popover\",\n  \"Carousel\",\n  \"Tree\",\n  \"Image\",\n  \"DatePicker\",\n  \"TimePicker\",\n  \"Input\",\n  \"InputTag\",\n  \"InputNumber\",\n  \"AutoComplete\",\n  \"Checkbox\",\n  \"Radio\",\n  \"Rate\",\n  \"Switch\",\n  \"Select\",\n  \"TreeSelect\",\n  \"Cascader\",\n  \"Slider\",\n  \"Form\",\n  \"Upload\",\n  \"Transfer\",\n  \"Mentions\",\n  \"Alert\",\n  \"Drawer\",\n  \"Message\",\n  \"Notification\",\n  \"Popconfirm\",\n  \"Progress\",\n  \"Result\",\n  \"Spin\",\n  \"Modal\",\n  \"Skeleton\",\n  \"Breadcrumb\",\n  \"Dropdown\",\n  \"Menu\",\n  \"PageHeader\",\n  \"Pagination\",\n  \"Steps\",\n  \"ConfigProvider\",\n  \"Affix\",\n  \"Anchor\",\n  \"BackTop\",\n  \"Trigger\",\n  \"ResizeBox\"\n];\nvar designComponents = [\n  \"Link\",\n  \"Typography\",\n  \"Grid\",\n  \"Layout\",\n  \"Avatar\",\n  \"Badge\",\n  \"Comment\",\n  \"Descriptions\",\n  \"Empty\",\n  \"List\",\n  \"Popover\",\n  \"Table\",\n  \"Tabs\",\n  \"Tooltip\",\n  \"Cascader\",\n  \"Checkbox\",\n  \"Input\",\n  \"Radio\",\n  \"Select\",\n  \"Transfer\",\n  \"Upload\",\n  \"Alert\",\n  \"Drawer\",\n  \"Message\",\n  \"Notification\",\n  \"Popconfirm\",\n  \"Progress\",\n  \"Skeleton\",\n  \"Breadcrumb\",\n  \"Dropdown\",\n  \"Menu\",\n  \"ConfigProvider\"\n];\nvar vueComponents = __spreadArray$2(__spreadArray$2([], __read$6(reactComponents.filter(function(item) {\n  return item !== \"Calendar\";\n})), false), [\"TextArea\"], false);\nvar components = reactComponents;\nvar data = [\n  {\n    keyword: [\"Material\", \"\\u7269\\u6599\\u5E73\\u53F0\"],\n    type: \"ecosystem\",\n    svg: \"IconLogoArcoMaterialW\",\n    url: \"/material\",\n    key: \"material\"\n  },\n  {\n    keyword: [\"Theme\", \"DesignLab\", \"\\u4E3B\\u9898\\u5546\\u5E97\", \"\\u98CE\\u683C\\u914D\\u7F6E\\u5E73\\u53F0\"],\n    type: \"ecosystem\",\n    svg: \"IconLogoDesignLabW\",\n    url: \"/themes\",\n    key: \"theme\"\n  },\n  {\n    keyword: [\"ArcoDesign Pro\", \"\\u6700\\u4F73\\u5B9E\\u8DF5\"],\n    type: \"ecosystem\",\n    svg: \"IconLogoArcoProW\",\n    url: \"https://pro.arco.design/\",\n    key: \"pro\"\n  },\n  {\n    keyword: [\"Color\", \"Palette\", \"\\u8272\\u5F69\\u5E73\\u53F0\", \"\\u8272\\u5F69\\u5BF9\\u6BD4\\u5EA6\", \"\\u65E0\\u969C\\u788D\"],\n    type: \"ecosystem\",\n    svg: \"IconDashboard\",\n    url: \"/palette\",\n    key: \"color\"\n  }\n];\nfunction underscored(str) {\n  return str.replace(/([a-z\\d])([A-Z]+)/g, \"$1-$2\").replace(/[-\\s]+/g, \"-\").toLowerCase();\n}\nfunction decodeHTMLEntities(text) {\n  var textArea = document.createElement(\"textarea\");\n  textArea.innerHTML = text;\n  return textArea.value;\n}\nvar __assign$3 = globalThis && globalThis.__assign || function() {\n  __assign$3 = Object.assign || function(t2) {\n    for (var s, i = 1, n2 = arguments.length; i < n2; i++) {\n      s = arguments[i];\n      for (var p2 in s)\n        if (Object.prototype.hasOwnProperty.call(s, p2))\n          t2[p2] = s[p2];\n    }\n    return t2;\n  };\n  return __assign$3.apply(this, arguments);\n};\nvar __read$5 = globalThis && globalThis.__read || function(o, n2) {\n  var m2 = typeof Symbol === \"function\" && o[Symbol.iterator];\n  if (!m2)\n    return o;\n  var i = m2.call(o), r2, ar = [], e;\n  try {\n    while ((n2 === void 0 || n2-- > 0) && !(r2 = i.next()).done)\n      ar.push(r2.value);\n  } catch (error) {\n    e = { error };\n  } finally {\n    try {\n      if (r2 && !r2.done && (m2 = i[\"return\"]))\n        m2.call(i);\n    } finally {\n      if (e)\n        throw e.error;\n    }\n  }\n  return ar;\n};\nvar __spreadArray$1 = globalThis && globalThis.__spreadArray || function(to, from, pack) {\n  if (pack || arguments.length === 2)\n    for (var i = 0, l2 = from.length, ar; i < l2; i++) {\n      if (ar || !(i in from)) {\n        if (!ar)\n          ar = Array.prototype.slice.call(from, 0, i);\n        ar[i] = from[i];\n      }\n    }\n  return to.concat(ar || Array.prototype.slice.call(from));\n};\nvar highlightStr = function(name, query) {\n  var regex = new RegExp(\"(\" + query.replace(/\\\\/g, \"\\\\\\\\\") + \")\", \"gi\");\n  return name.replace(regex, '<span class=\"highlight-word\">$1</span>');\n};\nfunction getBackgroundColor(svg) {\n  var blueList = [\n    \"IconLogoArcoMaterialW\",\n    \"IconLogoArcoProW\",\n    \"IconLogoDesignLabW\",\n    \"IconBranding\",\n    \"IconDashboard\",\n    \"IconCli\"\n  ];\n  if (svg && (blueList.indexOf(svg) > -1 || !icon[svg])) {\n    return \"#165DFF\";\n  }\n  return void 0;\n}\nfunction getComponentUrl(component, lang, type) {\n  var langLink = lang === \"en-US\" ? \"/en-US\" : \"\";\n  if (type === \"vue\") {\n    return \"/vue\" + langLink + \"/component/\" + underscored(component);\n  }\n  return \"/react\" + langLink + \"/components/\" + underscored(component);\n}\nvar useSearchResult = function(inputValue, hits, lang, algoliaTag, queryData, prefixCls2) {\n  var _a = __read$5(react.exports.useState([]), 2), exactList = _a[0], setExactList = _a[1];\n  var _b = __read$5(react.exports.useState([]), 2), algoliaList = _b[0], setAlgoliaList = _b[1];\n  var _c = __read$5(react.exports.useState([]), 2), queryList = _c[0], setQueryList = _c[1];\n  function getQueryList(inputValue2) {\n    return queryData.filter(function(q2) {\n      return q2.description.toLowerCase().indexOf(inputValue2.toLowerCase()) > -1;\n    }).map(function(q2) {\n      var desc;\n      var i = q2.description.indexOf(inputValue2);\n      if (i > 50) {\n        desc = q2.description.slice(i - 50, i + 50);\n      } else {\n        desc = q2.description.slice(0, 100);\n      }\n      return __assign$3(__assign$3({}, q2), { title: q2.title, description: highlightStr(desc, inputValue2) });\n    });\n  }\n  var tComponents = localeComponents[lang];\n  var getExactList = function(inputValue2) {\n    var com = (algoliaTag === \"react\" ? components : vueComponents).map(function(c) {\n      return {\n        label: tComponents[c],\n        value: c\n      };\n    }).filter(function(c) {\n      return c.label.toLowerCase().indexOf(inputValue2.toLowerCase()) > -1;\n    }).map(function(c) {\n      return {\n        key: c.value,\n        type: \"component\",\n        svg: React.createElement(React.Fragment, null, React.createElement(\"div\", { className: prefixCls2 + \"-item-icon\" }, icon[\"Icon\" + c.value + \"Gray\"]), React.createElement(\"div\", { className: prefixCls2 + \"-item-icon-active\" }, icon[\"Icon\" + c.value + \"Blue\"])),\n        backgroundColor: getBackgroundColor(\"Icon\" + c.value + \"Gray\"),\n        text: highlightStr(c.label, inputValue2),\n        url: getComponentUrl(c.value, lang, algoliaTag),\n        label: c.label\n      };\n    });\n    var design = algoliaTag === \"react\" ? designComponents.map(function(c) {\n      return {\n        label: tComponents[c],\n        value: c\n      };\n    }).filter(function(c) {\n      return c.label.toLowerCase().indexOf(inputValue2.toLowerCase()) > -1;\n    }).map(function(c) {\n      return {\n        key: c.value + \"-design-language\",\n        type: \"design\",\n        svg: React.createElement(React.Fragment, null, React.createElement(\"div\", { className: prefixCls2 + \"-item-icon\" }, icon[\"Icon\" + c.value + \"Gray\"]), React.createElement(\"div\", { className: prefixCls2 + \"-item-icon-active\" }, icon[\"Icon\" + c.value + \"Blue\"])),\n        backgroundColor: getBackgroundColor(\"Icon\" + c.value + \"Gray\"),\n        text: highlightStr(c.label, inputValue2),\n        url: \"/docs\" + (lang === \"en-US\" ? \"/en-US\" : \"\") + \"/spec/\" + underscored(c.value),\n        label: c.label\n      };\n    }) : [];\n    var ecosystem = data.filter(function(d) {\n      return d.keyword.find(function(dk2) {\n        return dk2.toLowerCase().indexOf(inputValue2.toLowerCase()) > -1;\n      });\n    }).map(function(d) {\n      return __assign$3(__assign$3({}, d), { keyword: d.keyword.find(function(dk2) {\n        return dk2.toLowerCase().indexOf(inputValue2.toLowerCase()) > -1;\n      }) });\n    }).map(function(d) {\n      return __assign$3(__assign$3({}, d), { svg: icon[d.svg] || icon.IconBranding, backgroundColor: getBackgroundColor(d.svg), text: highlightStr(d.keyword, inputValue2), label: d.keyword, borderRadius: 8 });\n    });\n    return __spreadArray$1(__spreadArray$1(__spreadArray$1([], __read$5(com), false), __read$5(design), false), __read$5(ecosystem), false);\n  };\n  var getHitData = function(inputValue2, hits2) {\n    var exactList2 = getExactList(inputValue2);\n    var queryList2 = getQueryList(inputValue2);\n    setQueryList(queryList2);\n    setExactList(exactList2);\n    var formatedHits = hits2.filter(function(hit) {\n      var hierarchy = hit.hierarchy;\n      var keywords = Object.values(hierarchy).filter(function(value) {\n        return value;\n      }).map(function(value) {\n        return decodeHTMLEntities(value);\n      });\n      hit.keywords = keywords;\n      return keywords.length < 4 && keywords.length > 0 && keywords.slice(-1)[0] !== \"API\";\n    }).map(function(hit) {\n      var keywords = hit.keywords, url = hit.url, content = hit.content;\n      var mainKey = keywords.slice(-1)[0];\n      var order = 0;\n      var isExact = exactList2.filter(function(item) {\n        return item.label.toLowerCase().indexOf(mainKey.toLocaleLowerCase()) > -1;\n      });\n      order += isExact.length;\n      if (!content) {\n        order++;\n      }\n      if (keywords.includes(\"API\")) {\n        order++;\n      }\n      if (url.includes(\"/components/\") || url.includes(\"/component/\")) {\n        order++;\n      }\n      var desc = algoliaTag === \"react\" && keywords.length === 3 ? keywords[1] : decodeHTMLEntities(content);\n      return __assign$3(__assign$3({}, hit), { url: isInternal ? url.replace(externalUrl, internalUrl) : url, parent: keywords.length >= 1 ? keywords[0] : void 0, tag: highlightStr(desc, inputValue2), label: highlightStr(mainKey, inputValue2), order });\n    }).sort(function(a, b) {\n      return b.order - a.order;\n    });\n    var obj = {};\n    formatedHits.forEach(function(item) {\n      var parent = item.parent;\n      if (parent) {\n        if (obj[parent]) {\n          obj[parent].push(item);\n        } else {\n          obj[parent] = [item];\n        }\n      }\n    });\n    var lists = [];\n    Object.entries(obj).forEach(function(_a2) {\n      var _b2 = __read$5(_a2, 2), key = _b2[0], item = _b2[1];\n      lists.push({\n        rootName: key,\n        lists: item.slice(0, 5)\n      });\n    });\n    lists = lists.slice(0, 3);\n    var currentIndex = exactList2.length + queryList2.length;\n    lists.forEach(function(group) {\n      if (Array.isArray(group.lists)) {\n        group.lists = group.lists.map(function(item) {\n          return __assign$3(__assign$3({}, item), { currentIndex: currentIndex++ });\n        });\n      }\n    });\n    setAlgoliaList(lists.slice(0, 3));\n  };\n  react.exports.useEffect(function() {\n    getHitData(inputValue, hits);\n  }, [inputValue, hits]);\n  return [exactList, queryList, algoliaList];\n};\nvar useSearchResult$1 = useSearchResult;\nvar __read$4 = globalThis && globalThis.__read || function(o, n2) {\n  var m2 = typeof Symbol === \"function\" && o[Symbol.iterator];\n  if (!m2)\n    return o;\n  var i = m2.call(o), r2, ar = [], e;\n  try {\n    while ((n2 === void 0 || n2-- > 0) && !(r2 = i.next()).done)\n      ar.push(r2.value);\n  } catch (error) {\n    e = { error };\n  } finally {\n    try {\n      if (r2 && !r2.done && (m2 = i[\"return\"]))\n        m2.call(i);\n    } finally {\n      if (e)\n        throw e.error;\n    }\n  }\n  return ar;\n};\nfunction useDebounce(value, delay) {\n  var _a = __read$4(react.exports.useState(value), 2), debouncedValue = _a[0], setDebouncedValue = _a[1];\n  react.exports.useEffect(function() {\n    var handler = setTimeout(function() {\n      setDebouncedValue(value);\n    }, delay);\n    return function() {\n      clearTimeout(handler);\n    };\n  }, [value, delay]);\n  return debouncedValue;\n}\nvar index$5 = \"\";\nvar hot = \"\";\nvar history = \"\";\nvar __assign$2 = globalThis && globalThis.__assign || function() {\n  __assign$2 = Object.assign || function(t2) {\n    for (var s, i = 1, n2 = arguments.length; i < n2; i++) {\n      s = arguments[i];\n      for (var p2 in s)\n        if (Object.prototype.hasOwnProperty.call(s, p2))\n          t2[p2] = s[p2];\n    }\n    return t2;\n  };\n  return __assign$2.apply(this, arguments);\n};\nvar __awaiter$2 = globalThis && globalThis.__awaiter || function(thisArg, _arguments, P2, generator) {\n  function adopt(value) {\n    return value instanceof P2 ? value : new P2(function(resolve) {\n      resolve(value);\n    });\n  }\n  return new (P2 || (P2 = Promise))(function(resolve, reject) {\n    function fulfilled(value) {\n      try {\n        step(generator.next(value));\n      } catch (e) {\n        reject(e);\n      }\n    }\n    function rejected(value) {\n      try {\n        step(generator[\"throw\"](value));\n      } catch (e) {\n        reject(e);\n      }\n    }\n    function step(result) {\n      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);\n    }\n    step((generator = generator.apply(thisArg, _arguments || [])).next());\n  });\n};\nvar __generator$2 = globalThis && globalThis.__generator || function(thisArg, body) {\n  var _ = { label: 0, sent: function() {\n    if (t2[0] & 1)\n      throw t2[1];\n    return t2[1];\n  }, trys: [], ops: [] }, f, y2, t2, g;\n  return g = { next: verb(0), \"throw\": verb(1), \"return\": verb(2) }, typeof Symbol === \"function\" && (g[Symbol.iterator] = function() {\n    return this;\n  }), g;\n  function verb(n2) {\n    return function(v2) {\n      return step([n2, v2]);\n    };\n  }\n  function step(op) {\n    if (f)\n      throw new TypeError(\"Generator is already executing.\");\n    while (_)\n      try {\n        if (f = 1, y2 && (t2 = op[0] & 2 ? y2[\"return\"] : op[0] ? y2[\"throw\"] || ((t2 = y2[\"return\"]) && t2.call(y2), 0) : y2.next) && !(t2 = t2.call(y2, op[1])).done)\n          return t2;\n        if (y2 = 0, t2)\n          op = [op[0] & 2, t2.value];\n        switch (op[0]) {\n          case 0:\n          case 1:\n            t2 = op;\n            break;\n          case 4:\n            _.label++;\n            return { value: op[1], done: false };\n          case 5:\n            _.label++;\n            y2 = op[1];\n            op = [0];\n            continue;\n          case 7:\n            op = _.ops.pop();\n            _.trys.pop();\n            continue;\n          default:\n            if (!(t2 = _.trys, t2 = t2.length > 0 && t2[t2.length - 1]) && (op[0] === 6 || op[0] === 2)) {\n              _ = 0;\n              continue;\n            }\n            if (op[0] === 3 && (!t2 || op[1] > t2[0] && op[1] < t2[3])) {\n              _.label = op[1];\n              break;\n            }\n            if (op[0] === 6 && _.label < t2[1]) {\n              _.label = t2[1];\n              t2 = op;\n              break;\n            }\n            if (t2 && _.label < t2[2]) {\n              _.label = t2[2];\n              _.ops.push(op);\n              break;\n            }\n            if (t2[2])\n              _.ops.pop();\n            _.trys.pop();\n            continue;\n        }\n        op = body.call(thisArg, _);\n      } catch (e) {\n        op = [6, e];\n        y2 = 0;\n      } finally {\n        f = t2 = 0;\n      }\n    if (op[0] & 5)\n      throw op[1];\n    return { value: op[0] ? op[1] : void 0, done: true };\n  }\n};\nvar __read$3 = globalThis && globalThis.__read || function(o, n2) {\n  var m2 = typeof Symbol === \"function\" && o[Symbol.iterator];\n  if (!m2)\n    return o;\n  var i = m2.call(o), r2, ar = [], e;\n  try {\n    while ((n2 === void 0 || n2-- > 0) && !(r2 = i.next()).done)\n      ar.push(r2.value);\n  } catch (error) {\n    e = { error };\n  } finally {\n    try {\n      if (r2 && !r2.done && (m2 = i[\"return\"]))\n        m2.call(i);\n    } finally {\n      if (e)\n        throw e.error;\n    }\n  }\n  return ar;\n};\nvar __spreadArray = globalThis && globalThis.__spreadArray || function(to, from, pack) {\n  if (pack || arguments.length === 2)\n    for (var i = 0, l2 = from.length, ar; i < l2; i++) {\n      if (ar || !(i in from)) {\n        if (!ar)\n          ar = Array.prototype.slice.call(from, 0, i);\n        ar[i] = from[i];\n      }\n    }\n  return to.concat(ar || Array.prototype.slice.call(from));\n};\nvar locales$1 = {\n  \"zh-CN\": {\n    component: \"\\u7EC4\\u4EF6\",\n    ecosystem: \"\\u751F\\u6001\",\n    noData: \"\\u6682\\u65E0\\u641C\\u7D22\\u8BB0\\u5F55\",\n    openSearch: \"\\u6253\\u5F00\\u641C\\u7D22\",\n    exit: \"\\u9000\\u51FA\",\n    recentSearch: \"\\u6700\\u8FD1\\u641C\\u7D22\",\n    searchResult: \"\\u641C\\u7D22\\u5230 {0} \\u4E2A\\u7ED3\\u679C\",\n    clearAll: \"\\u6E05\\u9664\\u5168\\u90E8\",\n    popularComponents: \"\\u70ED\\u95E8\\u7EC4\\u4EF6\",\n    popularResource: \"\\u70ED\\u95E8\\u8D44\\u6E90\",\n    button: \"\\u6309\\u94AE Button\",\n    table: \"\\u8868\\u683C Table\",\n    form: \"\\u8868\\u5355 Form\",\n    select: \"\\u9009\\u62E9\\u5668 Select\"\n  },\n  \"en-US\": {\n    component: \"Component\",\n    ecosystem: \"Ecosystem\",\n    noData: \"No search history\",\n    openSearch: \"Open Search\",\n    exit: \"Exit\",\n    recentSearch: \"Recent Search\",\n    searchResult: \"{0} results found\",\n    clearAll: \"Clear All\",\n    popularComponents: \"Popular components\",\n    popularResource: \"Popular Resource\",\n    button: \"Button\",\n    table: \"Table\",\n    form: \"Form\",\n    select: \"Select\"\n  }\n};\nvar popularComponents = function(prefixCls2) {\n  return [\n    {\n      name: \"button\",\n      svg: React.createElement(React.Fragment, null, React.createElement(\"span\", { className: prefixCls2 + \"-item-icon\" }, icon.IconButtonGray), React.createElement(\"span\", { className: prefixCls2 + \"-item-icon-active\" }, icon.IconButtonBlue))\n    },\n    {\n      name: \"table\",\n      svg: React.createElement(React.Fragment, null, React.createElement(\"span\", { className: prefixCls2 + \"-item-icon\" }, icon.IconTableGray), React.createElement(\"span\", { className: prefixCls2 + \"-item-icon-active\" }, icon.IconTableBlue))\n    },\n    {\n      name: \"form\",\n      svg: React.createElement(React.Fragment, null, React.createElement(\"span\", { className: prefixCls2 + \"-item-icon\" }, icon.IconFormGray), React.createElement(\"span\", { className: prefixCls2 + \"-item-icon-active\" }, icon.IconFormBlue))\n    },\n    {\n      name: \"select\",\n      svg: React.createElement(React.Fragment, null, React.createElement(\"span\", { className: prefixCls2 + \"-item-icon\" }, icon.IconSelectGray), React.createElement(\"span\", { className: prefixCls2 + \"-item-icon-active\" }, icon.IconSelectBlue))\n    }\n  ];\n};\nvar searchClientData = {\n  appId: \"DUNS74UKNX\",\n  apiKey: \"772dfb43a548eea1c9be72262b2c390d\",\n  indexName: \"arco\"\n};\nfunction SearchModal(_a) {\n  var _this = this;\n  var visible = _a.visible, setVisible = _a.setVisible, onChangeSearchInput = _a.onChangeSearchInput, _b = _a.queryData, queryData = _b === void 0 ? [] : _b, _c = _a.algoliaTag, algoliaTag = _c === void 0 ? \"react\" : _c;\n  var _d = react.exports.useContext(GlobalContext), prefix = _d.prefix, _e = _d.searchPopular, searchPopular = _e === void 0 ? [] : _e, lang = _d.lang;\n  var prefixCls2 = prefix + \"-search-modal\";\n  var historyPrefixCls = prefix + \"-search-history\";\n  var hotPrefixCls = prefix + \"-search-hot\";\n  var inputPrefixCls = prefix + \"-search-input\";\n  var _f = __read$3(react.exports.useState(\"\"), 2), inputValue = _f[0], setInputValue = _f[1];\n  var _g = __read$3(react.exports.useState(false), 2), loading = _g[0], setLoading = _g[1];\n  var _h = __read$3(react.exports.useState(0), 2), activeIndex = _h[0], setActiveIndex = _h[1];\n  var _j = __read$3(react.exports.useState([]), 2), hitData = _j[0], setHitData = _j[1];\n  var _k = __read$3(useSearchResult$1(inputValue, hitData, lang, algoliaTag, queryData, hotPrefixCls), 3), exactList = _k[0], queryList = _k[1], docsList = _k[2];\n  var timeRef = react.exports.useRef();\n  var debounceValue = useDebounce(inputValue, 500);\n  var _l = __read$3(react.exports.useReducer(function(v2) {\n    return v2 + 1;\n  }, 0), 2);\n  _l[0];\n  var forceUpdate = _l[1];\n  var totalList = react.exports.useMemo(function() {\n    var docsLinks = [];\n    docsList.forEach(function(_a2) {\n      var lists = _a2.lists;\n      docsLinks = docsLinks.concat.apply(docsLinks, __spreadArray([], __read$3(lists), false));\n    });\n    return __spreadArray(__spreadArray(__spreadArray([], __read$3(exactList), false), __read$3(queryList), false), __read$3(docsLinks), false);\n  }, [exactList, docsList, queryList]);\n  var totalLength = totalList.length;\n  var searchClient = useSearchClient(searchClientData.appId, searchClientData.apiKey, function(client) {\n    return client;\n  });\n  var t2 = locales$1[lang];\n  var isEn = lang === \"en-US\";\n  var storageKey = algoliaTag === \"vue\" ? \"arco-vue-latest-search\" : \"arco-latest-search\";\n  var latest = localStorage.getItem(storageKey) ? JSON.parse(localStorage.getItem(storageKey)) : [];\n  var reportTea = function(resource, _blank) {\n    var currentItem = resource || totalList[activeIndex];\n    var params = {\n      text: inputValue,\n      link: currentItem.url,\n      target: _blank ? \"_blank\" : \"_self\",\n      name: currentItem.key || currentItem.name\n    };\n    teaLog(eventMap.searchContent, params);\n  };\n  var putInStorage = react.exports.useCallback(function() {\n    reportTea();\n    latest.unshift(__assign$2(__assign$2({}, totalList[activeIndex]), { inputValue }));\n    latest = latest.slice(0, 10);\n    localStorage.setItem(storageKey, JSON.stringify(latest));\n  }, [activeIndex, inputValue, totalList]);\n  var onKeyDown = react.exports.useCallback(function(e) {\n    var newActiveIndex = activeIndex;\n    if (visible) {\n      if ([\"ArrowDown\", \"ArrowUp\", \"Enter\"].includes(e.key)) {\n        e.preventDefault();\n        e.stopPropagation();\n      }\n      if (e.key === \"ArrowDown\") {\n        if (activeIndex + 1 > totalLength - 1) {\n          newActiveIndex = 0;\n        } else {\n          newActiveIndex += 1;\n        }\n      } else if (e.key === \"ArrowUp\") {\n        if (activeIndex - 1 < 0) {\n          newActiveIndex = totalLength - 1;\n        } else {\n          newActiveIndex -= 1;\n        }\n      } else if (e.key === \"Enter\") {\n        if (totalList[activeIndex] && totalList[activeIndex].url) {\n          window.open(totalList[activeIndex].url);\n          putInStorage();\n        }\n      }\n    }\n    setActiveIndex(newActiveIndex);\n  }, [visible, activeIndex, totalLength, setActiveIndex, putInStorage, totalList]);\n  react.exports.useEffect(function() {\n    window.addEventListener(\"keydown\", onKeyDown);\n    return function() {\n      window.removeEventListener(\"keydown\", onKeyDown);\n    };\n  }, [onKeyDown]);\n  react.exports.useEffect(function() {\n    if (visible) {\n      setInputValue(\"\");\n    }\n  }, [visible]);\n  var getAlgoliaResult = function(value) {\n    return __awaiter$2(_this, void 0, void 0, function() {\n      var results, hitData_1;\n      return __generator$2(this, function(_a2) {\n        switch (_a2.label) {\n          case 0:\n            if (!value) {\n              return [2];\n            }\n            setLoading(true);\n            return [4, searchClient.search([\n              {\n                query: value,\n                indexName: searchClientData.indexName,\n                params: {\n                  facetFilters: [[\"lang:\" + (lang === \"zh-CN\" ? \"zh\" : \"en\")], [\"tags:\" + algoliaTag]],\n                  typoTolerance: false\n                }\n              }\n            ]).finally(function() {\n              setLoading(false);\n            })];\n          case 1:\n            results = _a2.sent().results;\n            if (results && results[0]) {\n              hitData_1 = results[0].hits;\n              setHitData(hitData_1);\n            }\n            return [2];\n        }\n      });\n    });\n  };\n  react.exports.useEffect(function() {\n    setActiveIndex(-1);\n    getAlgoliaResult(debounceValue);\n    onChangeSearchInput && onChangeSearchInput(debounceValue);\n    timeRef.current = setTimeout(function() {\n      setActiveIndex(0);\n    }, 500);\n    return function() {\n      setActiveIndex(0);\n    };\n  }, [debounceValue]);\n  var onChangeInputValue = function(e) {\n    var iv = e.target.value;\n    setInputValue(iv);\n  };\n  function onMouseEnterItem(index2) {\n    if (activeIndex >= 0) {\n      setActiveIndex(index2);\n    }\n  }\n  function clearAllHistory() {\n    localStorage.setItem(storageKey, \"[]\");\n    forceUpdate();\n  }\n  function onCloseHistory(e, key) {\n    e.stopPropagation();\n    localStorage.setItem(storageKey, JSON.stringify(latest.filter(function(l2) {\n      return l2.key !== key;\n    })));\n    forceUpdate();\n  }\n  function renderPreSearch() {\n    return React.createElement(\"div\", { className: prefixCls2 + \"-content\" }, latest.length ? React.createElement(\"div\", { className: \"\" + historyPrefixCls }, React.createElement(\"div\", { className: historyPrefixCls + \"-header\" }, React.createElement(\"div\", null, t2.recentSearch), React.createElement(Link$1, { onClick: clearAllHistory }, t2.clearAll)), React.createElement(\"ul\", { className: historyPrefixCls + \"-list\" }, latest.map(function(l2, index2) {\n      return React.createElement(\"li\", { key: index2, className: historyPrefixCls + \"-item\", onClick: function() {\n        reportTea(l2);\n        window.open(l2.url, l2.type !== \"component\" && l2.type !== \"style\" ? \"_blank\" : \"_self\");\n      } }, React.createElement(IconHistory$1, null), React.createElement(\"span\", { className: historyPrefixCls + \"-title\" }, l2.inputValue), React.createElement(\"span\", { className: historyPrefixCls + \"-close arco-icon-hover\", onClick: function(e) {\n        return onCloseHistory(e, l2.key);\n      } }, React.createElement(IconClose$1, null)));\n    }))) : null, React.createElement(\"div\", { className: hotPrefixCls }, React.createElement(\"div\", { className: hotPrefixCls + \"-half\" }, React.createElement(\"div\", { className: hotPrefixCls + \"-title\" }, t2.popularComponents), React.createElement(\"div\", { className: hotPrefixCls + \"-list\" }, popularComponents(hotPrefixCls).map(function(p2, index2) {\n      return React.createElement(\"div\", { className: hotPrefixCls + \"-item\", onClick: function() {\n        reportTea(p2);\n        var url = algoliaTag === \"vue\" ? \"/vue/component/\" + p2.name : \"/react/components/\" + p2.name;\n        window.open(url);\n      }, key: index2 }, React.createElement(\"div\", { className: hotPrefixCls + \"-svg-wrapper\" }, p2.svg), t2[p2.name], React.createElement(\"div\", { className: hotPrefixCls + \"-enter-icon\" }, icon.IconSearchIcEnter));\n    }))), React.createElement(\"div\", { className: hotPrefixCls + \"-half\" }, React.createElement(\"div\", { className: hotPrefixCls + \"-title\" }, t2.popularResource), React.createElement(\"div\", { className: hotPrefixCls + \"-list\" }, searchPopular.map(function(p2, index2) {\n      return React.createElement(\"div\", { className: hotPrefixCls + \"-item\", onClick: function() {\n        reportTea(p2, true);\n        window.open(p2.href || p2.path, \"_blank\");\n      }, key: index2 }, React.createElement(\"div\", { className: cs(hotPrefixCls + \"-svg-wrapper\", hotPrefixCls + \"-svg-wrapper-rect\"), style: { backgroundColor: p2.color }, dangerouslySetInnerHTML: { __html: p2.svg } }), isEn ? p2.enName : p2.name, React.createElement(\"div\", { className: hotPrefixCls + \"-enter-icon\" }, icon.IconSearchIcEnter));\n    })))));\n  }\n  return React.createElement(Modal$1, { alignCenter: false, style: { top: 150 }, title: null, visible, onOk: function() {\n    return setVisible(false);\n  }, onCancel: function() {\n    return setVisible(false);\n  }, footer: null, closable: false, className: prefixCls2, unmountOnExit: false }, React.createElement(\"div\", { className: prefixCls2 + \"-input-wrapper\" }, React.createElement(\"div\", { className: prefixCls2 + \"-left\" }, React.createElement(IconSearch$1, null), React.createElement(\"input\", { value: inputValue, onChange: onChangeInputValue, placeholder: \"Search\" })), React.createElement(\"div\", { className: prefixCls2 + \"-right\" }, React.createElement(\"div\", { className: prefixCls2 + \"-key-word\" }, t2.openSearch), \" \", React.createElement(\"div\", { className: inputPrefixCls + \"-command\" }, React.createElement(\"div\", { className: inputPrefixCls + \"-key\" }, \"\\u2318\"), React.createElement(\"div\", { className: inputPrefixCls + \"-key\" }, \"K\")), React.createElement(\"div\", { className: prefixCls2 + \"-key-word\" }, t2.exit), React.createElement(\"div\", { className: inputPrefixCls + \"-key\", style: { width: 29 } }, \"ESC\"))), inputValue ? React.createElement(Spin$1, { loading, style: { width: \"100%\" } }, React.createElement(\"div\", { className: prefixCls2 + \"-count\" }, t2.searchResult.replace(\"{0}\", totalLength)), totalLength > 0 ? React.createElement(React.Fragment, null, React.createElement(List, { exactList, docsList, queryList, lang, activeIndex, loading, onMouseEnterItem, onClickItem: putInStorage, algoliaTag }), React.createElement(\"footer\", { className: \"DocSearch-Footer\" }, algoliaTag === \"vue\" && React.createElement(Tag$1, { color: \"arcoblue\" }, \"Vue Components\"), React.createElement(AlgoliaLogo, null))) : React.createElement(Empty$1, { style: { marginBottom: 32 } })) : renderPreSearch());\n}\nvar index$4 = \"\";\nvar __assign$1 = globalThis && globalThis.__assign || function() {\n  __assign$1 = Object.assign || function(t2) {\n    for (var s, i = 1, n2 = arguments.length; i < n2; i++) {\n      s = arguments[i];\n      for (var p2 in s)\n        if (Object.prototype.hasOwnProperty.call(s, p2))\n          t2[p2] = s[p2];\n    }\n    return t2;\n  };\n  return __assign$1.apply(this, arguments);\n};\nvar __read$2 = globalThis && globalThis.__read || function(o, n2) {\n  var m2 = typeof Symbol === \"function\" && o[Symbol.iterator];\n  if (!m2)\n    return o;\n  var i = m2.call(o), r2, ar = [], e;\n  try {\n    while ((n2 === void 0 || n2-- > 0) && !(r2 = i.next()).done)\n      ar.push(r2.value);\n  } catch (error) {\n    e = { error };\n  } finally {\n    try {\n      if (r2 && !r2.done && (m2 = i[\"return\"]))\n        m2.call(i);\n    } finally {\n      if (e)\n        throw e.error;\n    }\n  }\n  return ar;\n};\nvar locales = {\n  \"zh-CN\": {\n    search: \"\\u641C\\u7D22\"\n  },\n  \"en-US\": {\n    search: \"Search\"\n  }\n};\nfunction SearchInput(props) {\n  var _a = react.exports.useContext(GlobalContext), prefix = _a.prefix, lang = _a.lang;\n  var prefixCls2 = prefix + \"-search-input\";\n  var t2 = locales[lang];\n  var _b = __read$2(react.exports.useState(false), 2), modalVisible = _b[0], setModalVisible = _b[1];\n  function onKeyDown(e) {\n    if (document.activeElement === document.body) {\n      if (e.key === \"k\" && (e.ctrlKey || e.metaKey)) {\n        e.preventDefault();\n        e.stopPropagation();\n        setTimeout(function() {\n          setModalVisible(true);\n        }, 10);\n      }\n    }\n  }\n  react.exports.useEffect(function() {\n    window.addEventListener(\"keydown\", onKeyDown);\n    return function() {\n      window.removeEventListener(\"keydown\", onKeyDown);\n    };\n  }, []);\n  return React.createElement(\"div\", { className: \"\" + prefixCls2, onClick: function() {\n    return setModalVisible(true);\n  }, \"aria-label\": \"Open Search Modal\", role: \"button\", tabIndex: 0 }, React.createElement(\"div\", { className: prefixCls2 + \"-left\" }, React.createElement(IconSearch$1, null), React.createElement(\"span\", { className: prefixCls2 + \"-placeholder\" }, t2.search)), React.createElement(\"div\", { className: prefixCls2 + \"-command\" }, React.createElement(\"div\", { className: prefixCls2 + \"-key\" }, \"\\u2318\"), React.createElement(\"div\", { className: prefixCls2 + \"-key\" }, \"K\")), React.createElement(SearchModal, __assign$1({}, props, { visible: modalVisible, setVisible: setModalVisible })));\n}\nvar index$3 = \"\";\nfunction NavbarLogo(props) {\n  var prefix = react.exports.useContext(GlobalContext).prefix;\n  var _a = props.logoHref, logoHref = _a === void 0 ? \"/\" : _a, _b = props.logo, logo = _b === void 0 ? React.createElement(SvgComponent$2f, null) : _b;\n  return React.createElement(\"a\", { href: logoHref, className: prefix + \"-logo\" }, logo);\n}\nvar index$2 = \"\";\nvar __awaiter$1 = globalThis && globalThis.__awaiter || function(thisArg, _arguments, P2, generator) {\n  function adopt(value) {\n    return value instanceof P2 ? value : new P2(function(resolve) {\n      resolve(value);\n    });\n  }\n  return new (P2 || (P2 = Promise))(function(resolve, reject) {\n    function fulfilled(value) {\n      try {\n        step(generator.next(value));\n      } catch (e) {\n        reject(e);\n      }\n    }\n    function rejected(value) {\n      try {\n        step(generator[\"throw\"](value));\n      } catch (e) {\n        reject(e);\n      }\n    }\n    function step(result) {\n      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);\n    }\n    step((generator = generator.apply(thisArg, _arguments || [])).next());\n  });\n};\nvar __generator$1 = globalThis && globalThis.__generator || function(thisArg, body) {\n  var _ = { label: 0, sent: function() {\n    if (t2[0] & 1)\n      throw t2[1];\n    return t2[1];\n  }, trys: [], ops: [] }, f, y2, t2, g;\n  return g = { next: verb(0), \"throw\": verb(1), \"return\": verb(2) }, typeof Symbol === \"function\" && (g[Symbol.iterator] = function() {\n    return this;\n  }), g;\n  function verb(n2) {\n    return function(v2) {\n      return step([n2, v2]);\n    };\n  }\n  function step(op) {\n    if (f)\n      throw new TypeError(\"Generator is already executing.\");\n    while (_)\n      try {\n        if (f = 1, y2 && (t2 = op[0] & 2 ? y2[\"return\"] : op[0] ? y2[\"throw\"] || ((t2 = y2[\"return\"]) && t2.call(y2), 0) : y2.next) && !(t2 = t2.call(y2, op[1])).done)\n          return t2;\n        if (y2 = 0, t2)\n          op = [op[0] & 2, t2.value];\n        switch (op[0]) {\n          case 0:\n          case 1:\n            t2 = op;\n            break;\n          case 4:\n            _.label++;\n            return { value: op[1], done: false };\n          case 5:\n            _.label++;\n            y2 = op[1];\n            op = [0];\n            continue;\n          case 7:\n            op = _.ops.pop();\n            _.trys.pop();\n            continue;\n          default:\n            if (!(t2 = _.trys, t2 = t2.length > 0 && t2[t2.length - 1]) && (op[0] === 6 || op[0] === 2)) {\n              _ = 0;\n              continue;\n            }\n            if (op[0] === 3 && (!t2 || op[1] > t2[0] && op[1] < t2[3])) {\n              _.label = op[1];\n              break;\n            }\n            if (op[0] === 6 && _.label < t2[1]) {\n              _.label = t2[1];\n              t2 = op;\n              break;\n            }\n            if (t2 && _.label < t2[2]) {\n              _.label = t2[2];\n              _.ops.push(op);\n              break;\n            }\n            if (t2[2])\n              _.ops.pop();\n            _.trys.pop();\n            continue;\n        }\n        op = body.call(thisArg, _);\n      } catch (e) {\n        op = [6, e];\n        y2 = 0;\n      } finally {\n        f = t2 = 0;\n      }\n    if (op[0] & 5)\n      throw op[1];\n    return { value: op[0] ? op[1] : void 0, done: true };\n  }\n};\nvar __read$1 = globalThis && globalThis.__read || function(o, n2) {\n  var m2 = typeof Symbol === \"function\" && o[Symbol.iterator];\n  if (!m2)\n    return o;\n  var i = m2.call(o), r2, ar = [], e;\n  try {\n    while ((n2 === void 0 || n2-- > 0) && !(r2 = i.next()).done)\n      ar.push(r2.value);\n  } catch (error) {\n    e = { error };\n  } finally {\n    try {\n      if (r2 && !r2.done && (m2 = i[\"return\"]))\n        m2.call(i);\n    } finally {\n      if (e)\n        throw e.error;\n    }\n  }\n  return ar;\n};\nvar getNoticeStatus = function(notice) {\n  if (notice === void 0) {\n    notice = \"\";\n  }\n  var _a = __read$1((notice || \"\").split(\"-\"), 2), id2 = _a[0], status = _a[1];\n  return { id: id2 || \"0\", status: status || \"show\" };\n};\nvar GLOBAL_NOTICE_KEY = \"arco-global-notice\";\nfunction GlobalNotice(props) {\n  var _this = this;\n  var className = props.className, style = props.style, onHeightChange = props.onHeightChange, lang = props.lang;\n  var prefix = \"ac-navbar\";\n  var prefixCls2 = prefix + \"-global-notice\";\n  var _a = getNoticeStatus(localStorage.getItem(GLOBAL_NOTICE_KEY)), noticeId = _a.id, noticeStatus = _a.status;\n  var wrapperRef = react.exports.useRef();\n  var _b = __read$1(react.exports.useState(noticeStatus !== \"hide\"), 2), visible = _b[0], setVisible = _b[1];\n  var _c = __read$1(react.exports.useState({}), 2), notice = _c[0], setNotice = _c[1];\n  var globalNotice = react.exports.useMemo(function() {\n    var link2 = notice.link;\n    var _a2 = notice[lang] || {}, _b2 = _a2.title, title2 = _b2 === void 0 ? \"\" : _b2, _c2 = _a2.description, description = _c2 === void 0 ? \"\" : _c2;\n    return {\n      link: link2,\n      desc: title2.length + description.length < 50 ? description : \"\",\n      title: title2\n    };\n  }, [lang, notice]);\n  var link = globalNotice.link, title = globalNotice.title, desc = globalNotice.desc;\n  var handleClose = function() {\n    setVisible(false);\n    var id2 = getNoticeStatus(localStorage.getItem(GLOBAL_NOTICE_KEY)).id;\n    var newNoticeStatus = [id2, \"hide\"].join(\"-\");\n    localStorage.setItem(GLOBAL_NOTICE_KEY, newNoticeStatus);\n  };\n  var getGlobalNotice = function() {\n    return __awaiter$1(_this, void 0, void 0, function() {\n      var data2, list2, currentNotice, latestNotice, key;\n      return __generator$1(this, function(_a2) {\n        switch (_a2.label) {\n          case 0:\n            return [4, axios.get(apiBasename + \"/admin/api/notice/list\")];\n          case 1:\n            data2 = _a2.sent().data;\n            list2 = data2.List;\n            currentNotice = list2.find(function(item) {\n              return item.key === noticeId;\n            });\n            latestNotice = list2[0];\n            if (latestNotice && latestNotice.global) {\n              key = latestNotice.key;\n              setNotice(latestNotice);\n              if (key !== noticeId) {\n                localStorage.setItem(GLOBAL_NOTICE_KEY, [key, \"show\"].join(\"-\"));\n                setVisible(true);\n              }\n            } else if (currentNotice) {\n              setNotice(currentNotice);\n              if (!currentNotice.global && visible) {\n                localStorage.setItem(GLOBAL_NOTICE_KEY, [noticeId, \"hide\"].join(\"-\"));\n                setVisible(false);\n              }\n            }\n            return [2];\n        }\n      });\n    });\n  };\n  react.exports.useEffect(function() {\n    getGlobalNotice();\n  }, []);\n  react.exports.useEffect(function() {\n    if (visible && wrapperRef.current) {\n      var height = wrapperRef.current.offsetHeight;\n      onHeightChange && onHeightChange(height);\n    } else {\n      onHeightChange && onHeightChange(0);\n    }\n  }, [visible, onHeightChange, globalNotice.link, globalNotice.title]);\n  if (!link && !title) {\n    return React.createElement(\"div\", null);\n  }\n  return React.createElement(CSSTransition$1, { in: visible, timeout: 300, unmountOnExit: true, classNames: \"slideTop\" }, React.createElement(\"div\", { id: \"arco-global-notice\", ref: wrapperRef, style, className: cs(prefixCls2, className) }, React.createElement(\"a\", { href: link, rel: \"Arco Global Notice noreferrer\", target: \"_blank\", className: prefixCls2 + \"-container\" }, React.createElement(\"b\", null, title), React.createElement(\"span\", { className: prefixCls2 + \"-desc\" }, desc), React.createElement(\"b\", null, lang === \"en-US\" ? \"more\" : \"\\u67E5\\u770B\\u66F4\\u591A\", \" \", React.createElement(IconRight$1, null))), React.createElement(\"div\", { className: prefixCls2 + \"-close-icon\", onClick: handleClose }, React.createElement(IconClose$1, null))));\n}\nvar index$1 = \"\";\nvar mobile = \"\";\nfunction MobileMenu() {\n  var _a = react.exports.useContext(GlobalContext), prefix = _a.prefix, lang = _a.lang;\n  var isEn = lang === \"en-US\";\n  var menuConfig = [\n    {\n      name: \"\\u8BBE\\u8BA1\\u6307\\u5357\",\n      enName: \"Design Guideline\",\n      path: \"/docs/spec/introduce\"\n    },\n    {\n      name: \"\\u5F00\\u53D1\\u6307\\u5357\",\n      enName: \"Develop Guideline\",\n      path: \"/react/docs/start\"\n    },\n    {\n      name: \"GitHub\",\n      enName: \"GitHub\",\n      link: \"https://github.com/arco-design/arco-design\"\n    }\n  ];\n  var triggerButton = React.createElement(Button$1, { type: \"text\", icon: React.createElement(IconMenu$1, null), className: prefix + \"-btn-icon\", size: \"mini\" });\n  return React.createElement(Select$1, { className: prefix + \"-select-nav\", onChange: function(value) {\n    return window.open(value, value.link ? \"_blank\" : \"_self\");\n  }, \"aria-label\": \"Toggle light/dark theme\", trigger: \"click\", triggerProps: {\n    autoAlignPopupMinWidth: false,\n    autoAlignPopupWidth: false\n  }, triggerElement: triggerButton, options: menuConfig.map(function(item) {\n    return {\n      label: isEn ? item.enName : item.name,\n      value: item.link\n    };\n  }), bordered: false });\n}\nfunction MobileNavbar(props) {\n  return React.createElement(\"div\", { className: props.className }, React.createElement(LeftPanel, null), React.createElement(NavbarLogo, null), React.createElement(Space$1, { size: 0, style: { padding: \"0 10px\" } }, !props.hideTheme && React.createElement(ThemeSelect, { onChangeTheme: props.onChangeTheme }), React.createElement(MobileMenu, null)));\n}\nvar __assign = globalThis && globalThis.__assign || function() {\n  __assign = Object.assign || function(t2) {\n    for (var s, i = 1, n2 = arguments.length; i < n2; i++) {\n      s = arguments[i];\n      for (var p2 in s)\n        if (Object.prototype.hasOwnProperty.call(s, p2))\n          t2[p2] = s[p2];\n    }\n    return t2;\n  };\n  return __assign.apply(this, arguments);\n};\nvar __awaiter = globalThis && globalThis.__awaiter || function(thisArg, _arguments, P2, generator) {\n  function adopt(value) {\n    return value instanceof P2 ? value : new P2(function(resolve) {\n      resolve(value);\n    });\n  }\n  return new (P2 || (P2 = Promise))(function(resolve, reject) {\n    function fulfilled(value) {\n      try {\n        step(generator.next(value));\n      } catch (e) {\n        reject(e);\n      }\n    }\n    function rejected(value) {\n      try {\n        step(generator[\"throw\"](value));\n      } catch (e) {\n        reject(e);\n      }\n    }\n    function step(result) {\n      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);\n    }\n    step((generator = generator.apply(thisArg, _arguments || [])).next());\n  });\n};\nvar __generator = globalThis && globalThis.__generator || function(thisArg, body) {\n  var _ = { label: 0, sent: function() {\n    if (t2[0] & 1)\n      throw t2[1];\n    return t2[1];\n  }, trys: [], ops: [] }, f, y2, t2, g;\n  return g = { next: verb(0), \"throw\": verb(1), \"return\": verb(2) }, typeof Symbol === \"function\" && (g[Symbol.iterator] = function() {\n    return this;\n  }), g;\n  function verb(n2) {\n    return function(v2) {\n      return step([n2, v2]);\n    };\n  }\n  function step(op) {\n    if (f)\n      throw new TypeError(\"Generator is already executing.\");\n    while (_)\n      try {\n        if (f = 1, y2 && (t2 = op[0] & 2 ? y2[\"return\"] : op[0] ? y2[\"throw\"] || ((t2 = y2[\"return\"]) && t2.call(y2), 0) : y2.next) && !(t2 = t2.call(y2, op[1])).done)\n          return t2;\n        if (y2 = 0, t2)\n          op = [op[0] & 2, t2.value];\n        switch (op[0]) {\n          case 0:\n          case 1:\n            t2 = op;\n            break;\n          case 4:\n            _.label++;\n            return { value: op[1], done: false };\n          case 5:\n            _.label++;\n            y2 = op[1];\n            op = [0];\n            continue;\n          case 7:\n            op = _.ops.pop();\n            _.trys.pop();\n            continue;\n          default:\n            if (!(t2 = _.trys, t2 = t2.length > 0 && t2[t2.length - 1]) && (op[0] === 6 || op[0] === 2)) {\n              _ = 0;\n              continue;\n            }\n            if (op[0] === 3 && (!t2 || op[1] > t2[0] && op[1] < t2[3])) {\n              _.label = op[1];\n              break;\n            }\n            if (op[0] === 6 && _.label < t2[1]) {\n              _.label = t2[1];\n              t2 = op;\n              break;\n            }\n            if (t2 && _.label < t2[2]) {\n              _.label = t2[2];\n              _.ops.push(op);\n              break;\n            }\n            if (t2[2])\n              _.ops.pop();\n            _.trys.pop();\n            continue;\n        }\n        op = body.call(thisArg, _);\n      } catch (e) {\n        op = [6, e];\n        y2 = 0;\n      } finally {\n        f = t2 = 0;\n      }\n    if (op[0] & 5)\n      throw op[1];\n    return { value: op[0] ? op[1] : void 0, done: true };\n  }\n};\nvar __rest = globalThis && globalThis.__rest || function(s, e) {\n  var t2 = {};\n  for (var p2 in s)\n    if (Object.prototype.hasOwnProperty.call(s, p2) && e.indexOf(p2) < 0)\n      t2[p2] = s[p2];\n  if (s != null && typeof Object.getOwnPropertySymbols === \"function\")\n    for (var i = 0, p2 = Object.getOwnPropertySymbols(s); i < p2.length; i++) {\n      if (e.indexOf(p2[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p2[i]))\n        t2[p2[i]] = s[p2[i]];\n    }\n  return t2;\n};\nvar __read = globalThis && globalThis.__read || function(o, n2) {\n  var m2 = typeof Symbol === \"function\" && o[Symbol.iterator];\n  if (!m2)\n    return o;\n  var i = m2.call(o), r2, ar = [], e;\n  try {\n    while ((n2 === void 0 || n2-- > 0) && !(r2 = i.next()).done)\n      ar.push(r2.value);\n  } catch (error) {\n    e = { error };\n  } finally {\n    try {\n      if (r2 && !r2.done && (m2 = i[\"return\"]))\n        m2.call(i);\n    } finally {\n      if (e)\n        throw e.error;\n    }\n  }\n  return ar;\n};\nvar PREFIX = \"ac-navbar\";\nvar Navbar = function(props) {\n  var _a, _b;\n  var _c = __read(react.exports.useState(false), 2), visible = _c[0], setVisible = _c[1];\n  var _d = __read(react.exports.useState(\"\"), 2), screen = _d[0], setScreen = _d[1];\n  var _e = __read(react.exports.useState(defaultNavbarTcc), 2), tccConfig = _e[0], setTccConfig = _e[1];\n  var wrapperRef = react.exports.useRef();\n  var navElementRef = react.exports.useRef();\n  var className = props.className, style = props.style, _f = props.lang, lang = _f === void 0 ? \"zh-CN\" : _f, isHome = props.isHome, logo = props.logo, logoHref = props.logoHref, loginHref = props.loginHref, logoutHref = props.logoutHref, user = props.user, renderNavTabs = props.renderNavTabs, renderNavOptions = props.renderNavOptions, renderSearchInput = props.renderSearchInput, hideSearch = props.hideSearch, hideUser = props.hideUser, queryData = props.queryData, _g = props.algoliaTag, algoliaTag = _g === void 0 ? \"react\" : _g, onChangeSearchInput = props.onChangeSearchInput, userSetting = props.userSetting, rest = __rest(props, [\"className\", \"style\", \"lang\", \"isHome\", \"logo\", \"logoHref\", \"loginHref\", \"logoutHref\", \"user\", \"renderNavTabs\", \"renderNavOptions\", \"renderSearchInput\", \"hideSearch\", \"hideUser\", \"queryData\", \"algoliaTag\", \"onChangeSearchInput\", \"userSetting\"]);\n  var innerUser = user || window.user;\n  react.exports.useEffect(function() {\n    teaLog(eventMap.isLogin, {\n      isLogin: !!(innerUser === null || innerUser === void 0 ? void 0 : innerUser.email)\n    });\n  }, [innerUser === null || innerUser === void 0 ? void 0 : innerUser.email]);\n  function getTccConfig() {\n    return __awaiter(this, void 0, void 0, function() {\n      var data2;\n      return __generator(this, function(_a2) {\n        switch (_a2.label) {\n          case 0:\n            return [4, axios.get((isInternal ? internalUrl : externalUrl) + \"/common/api/getNavConfig\")];\n          case 1:\n            data2 = _a2.sent().data;\n            if (data2 && data2.leftPanels) {\n              setTccConfig(data2 || {});\n            }\n            return [2];\n        }\n      });\n    });\n  }\n  react.exports.useEffect(function() {\n    getTccConfig();\n  }, []);\n  var NavTabElement = React.createElement(NavTabs, { popupVisible: visible, setPopupVisible: setVisible });\n  var NavOptionElement = React.createElement(RightOperation, __assign({}, rest, { lang }));\n  var SearchInputElem = React.createElement(SearchInput, { algoliaTag, queryData, onChangeSearchInput });\n  function updateScreen() {\n    var width = navElementRef.current.clientWidth;\n    if (width < 920) {\n      setScreen(\"mobile\");\n    } else if (width >= 920) {\n      setScreen(\"\");\n    }\n  }\n  var isMobile = screen === \"mobile\";\n  return React.createElement(\"div\", { className: cs(PREFIX, (_a = {}, _a[PREFIX + \"-mobile\"] = isMobile, _a), className), style, ref: wrapperRef }, React.createElement(ResizeObserver, { onResize: updateScreen }, React.createElement(\"div\", { ref: navElementRef, className: cs(PREFIX + \"-container\", (_b = {}, _b[PREFIX + \"-container-no-border\"] = visible, _b)) }, React.createElement(GlobalContext.Provider, { value: {\n    leftPanels: tccConfig.leftPanels || [],\n    prefix: PREFIX,\n    designConfigs: tccConfig.designConfigs || [],\n    developConfigs: tccConfig.developConfigs || [],\n    ecosystemConfigs: tccConfig.ecosystemConfigs || [],\n    larkCharts: tccConfig.larkCharts || [],\n    profileLinks: tccConfig.profileLinks || [],\n    searchPopular: tccConfig.searchPopular || [],\n    getPopupContainer: function() {\n      return wrapperRef.current;\n    },\n    lang,\n    isMobile,\n    innerUser\n  } }, isMobile ? React.createElement(MobileNavbar, { className: PREFIX + \"-mobile-container\", onChangeTheme: props.onChangeTheme }) : React.createElement(React.Fragment, null, React.createElement(Space$1, { size: 12 }, React.createElement(LeftPanel, { isHome }), React.createElement(NavbarLogo, { logo, logoHref }), !hideSearch && (renderSearchInput ? renderSearchInput(SearchInputElem) : SearchInputElem)), React.createElement(Space$1, { size: 8 }, renderNavTabs ? renderNavTabs(NavTabElement) : NavTabElement, renderNavOptions ? renderNavOptions(NavOptionElement) : NavOptionElement, !hideUser && React.createElement(Profile, { user: innerUser, loginHref, logoutHref, userSetting })))))), React.createElement(CSSTransition$1, { in: visible, timeout: 300, unmountOnExit: true, classNames: PREFIX + \"-fadeIn\" }, React.createElement(\"div\", { className: PREFIX + \"-mask\" })));\n};\nvar ForwardRefNavbar = react.exports.forwardRef(Navbar);\nvar NavbarComponent = ForwardRefNavbar;\nNavbarComponent.NavbarThemeContext = NavbarThemeContext;\nNavbarComponent.NavbarThemeProvider = NavbarThemeProvider;\nNavbarComponent.GlobalNotice = GlobalNotice;\nvar Navbar$1 = NavbarComponent;\nvar index = \"\";\nvar navbar = \"\";\nconst ReactApp = ({\n  lang = \"zh-CN\",\n  handleLanguageChange = () => {\n  },\n  version: version2\n}) => {\n  return /* @__PURE__ */ React.createElement(ConfigProvider, {\n    prefixCls: \"arco-react\"\n  }, /* @__PURE__ */ React.createElement(Navbar$1.NavbarThemeProvider, null, /* @__PURE__ */ React.createElement(Navbar$1, {\n    lang,\n    onChangeLanguage: handleLanguageChange,\n    algoliaTag: \"vue\",\n    defaultVersion: version2,\n    onChangeTheme: (theme) => {\n      var _a;\n      (_a = document.querySelector(\"#react-root\")) == null ? void 0 : _a.setAttribute(\"arco-theme\", theme);\n    },\n    loginHref: `/common/login?redirectUrl=${window.location.href}`,\n    hideRtl: true,\n    versions: [\n      {\n        version: \"1.x\",\n        link: \"https://design.bytedance.com/vue/docs/start\"\n      },\n      { version: version2, link: \"/vue\" }\n    ]\n  })));\n};\nconst renderNavBar = (options) => {\n  ReactDOM.render(/* @__PURE__ */ React.createElement(ReactApp, __spreadValues({}, options != null ? options : {})), document.getElementById(\"react-root\"));\n};\nexport { renderNavBar as default };\n"
  },
  {
    "path": "packages/arco-vue-docs-navbar/dist/style.css",
    "content": ".arco-react-left-panel{background:var(--color-bg-3);border:1px solid var(--color-border);box-shadow:0 8px 20px #0000001a;border-radius:8px;padding:0 16px 16px;font-family:PingFang SC,Nunito Sans,sans-serif}.arco-react-left-panel-list{display:grid;grid-template-columns:50% 50%;width:400px;border-top:1px solid var(--color-border);padding-top:8px}.arco-react-left-panel-studio{display:flex;justify-content:space-between;align-items:center;color:var(--color-text-1);text-decoration:none}.arco-react-left-panel-studio-name{display:flex;align-items:center;font-size:16px;font-weight:800}.arco-react-left-panel-studio-name>svg{margin-right:16px}.arco-react-left-panel-studio:not(.arco-react-left-panel-return-home){display:block;height:56px;line-height:56px;box-sizing:border-box;padding:0 16px;border-radius:4px;margin:8px 0}.arco-react-left-panel-studio:not(.arco-react-left-panel-return-home) .arco-react-left-panel-studio-logo-active{display:none}.arco-react-left-panel-studio:not(.arco-react-left-panel-return-home):hover{background-color:var(--color-fill-1)}.arco-react-left-panel-studio:not(.arco-react-left-panel-return-home):hover .arco-react-left-panel-studio-logo{display:none}.arco-react-left-panel-studio:not(.arco-react-left-panel-return-home):hover .arco-react-left-panel-studio-logo-active{display:block}.arco-react-left-panel-return-home{display:block;display:flex;justify-content:space-between;position:relative;align-items:center;padding:0 16px;height:64px;box-sizing:border-box;border-bottom:1px solid var(--color-border);transition:all .2s;cursor:pointer}.arco-react-left-panel-return-home .arco-icon-arrow-right,.arco-react-left-panel-return-home .arco-react-icon-arrow-right{color:var(--color-text-1);font-size:18px}.arco-react-left-panel-return-home:hover .arco-icon-arrow-right,.arco-react-left-panel-return-home:hover .arco-react-icon-arrow-right{color:rgb(var(--primary-6))}.arco-react-left-panel-return-home.arco-react-left-panel-studio,.arco-react-left-panel-return-home.arco-react-left-panel-home-external{border-bottom:none}.arco-react-left-panel-item{cursor:pointer;position:relative;z-index:2;padding:16px;display:flex;justify-content:flex-start;align-items:center;text-decoration:none}.arco-react-left-panel-item:after{position:absolute;z-index:-1;content:\"\";display:block;width:100%;height:100%;background:var(--color-fill-1);border-radius:4px;left:0;opacity:0;transform:scale(.94);transition:all .4s cubic-bezier(.34,1.56,.64,1)}.arco-react-left-panel-item-logo{position:relative;width:24px;height:24px;margin-right:16px}.arco-react-left-panel-item-logo>span{display:block;position:absolute;top:0;left:0;transition:all .25s ease-out}.arco-react-left-panel-item-logo-common{opacity:1}.arco-react-left-panel-item-logo-active{opacity:0}.arco-react-left-panel-item-text-title{font-size:16px;font-weight:800;color:var(--color-text-1);margin:0;transition:all .2s ease-out}.arco-react-left-panel-item-text-desc{font-style:normal;font-weight:400;font-size:12px;line-height:12px;color:var(--color-text-2);position:absolute;word-break:keep-all;transform:translateY(0);opacity:0;transition:all .2s ease-out}.arco-react-left-panel-item:hover:after{opacity:1;transform:scale(1)}.arco-react-left-panel-item:hover .arco-react-left-panel-item-text-title{transform:translateY(-8px);color:var(--color-text-1)}.arco-react-left-panel-item:hover .arco-react-left-panel-item-text-desc{transform:translateY(-4px);opacity:1}.arco-react-left-panel-item:hover .arco-react-left-panel-item-logo-common{opacity:0}.arco-react-left-panel-item:hover .arco-react-left-panel-item-logo-active{opacity:1}.arco-react-left-panel-trigger{position:relative;display:flex;align-items:center;justify-content:center;color:var(--color-text-1);width:60px;height:60px;box-sizing:border-box;cursor:pointer}.arco-react-left-panel-trigger-icon{width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:4px}.arco-react-left-panel-trigger:hover .arco-react-left-panel-trigger-icon{background-color:var(--color-fill-1)}.arco-react-left-panel-trigger:focus-visible .arco-react-left-panel-trigger-icon{outline:2px solid rgb(var(--primary-6))}.arco-react-left-panel-trigger:after{content:\" \";display:block;position:absolute;width:1px;height:24px;background-color:var(--color-border);right:0;top:50%;transform:translateY(-50%)}.arco-react-left-panel-down-enter,.arco-react-left-panel-down-appear{opacity:0;box-shadow:0 0 #0000;transform-origin:0% 0%;transform:scale(.55) translateY(-6px)}.arco-react-left-panel-down-enter-active,.arco-react-left-panel-down-appear-active{opacity:1;transform:scale(1) translateY(0);transform-origin:0% 0%;box-shadow:0 8px 20px #0000001a;transition:all .3s cubic-bezier(.16,1,.3,1)}.arco-react-left-panel-down-exit{opacity:1;transform:scale(1) translateY(0);transform-origin:0% 0%;box-shadow:0 8px 20px #0000001a}.arco-react-left-panel-down-exit-active{opacity:0;box-shadow:0 0 #0000;transform-origin:0% 0%;transform:scale(.55) translateY(-6px);transition:all .3s cubic-bezier(.16,1,.3,1)}html.rtl .arco-react-left-panel{direction:rtl}html.rtl .arco-react-left-panel-item-logo{margin-right:0;margin-left:16px}html.rtl .arco-react-left-panel-return-home .arco-icon-arrow-right,html.rtl .arco-react-left-panel-return-home .arco-react-icon-arrow-right{transform:scaleX(-1)}html.rtl .arco-react-left-panel-trigger:after{content:\" \";display:block;position:absolute;width:1px;height:24px;background-color:var(--color-border);right:inherit;left:0;top:50%;transform:translateY(-50%)}.arco-react-left-panel-mobile .arco-react-left-panel-list{display:grid;grid-template-columns:100%;padding:8px;width:260px}.arco-react-left-panel-mobile-trigger{width:48px;height:48px}.arco-react-left-panel-mobile-trigger .arco-react-left-panel-trigger-icon{transform:scale(.8)}.arco-react-navTab{display:flex}.arco-react-navTab-item{display:flex;padding:18px 8px;height:60px;box-sizing:border-box;align-items:center}.arco-react-navTab-item-link{padding:0 8px;height:24px;line-height:24px;border-radius:2px;color:var(--color-text-1);position:relative;font-weight:500;cursor:pointer;text-decoration:none}.arco-react-navTab-item-link:hover{color:var(--color-text-1)}.arco-react-navTab-item-link svg{font-size:12px;stroke-width:6px;vertical-align:-1px;color:var(--color-text-1);margin:0 4px;transition:all .2s}.arco-react-navTab-item-link:focus-visible{outline:2px solid rgb(var(--primary-6))}.arco-react-navTab-item-active .arco-react-navTab-item-link{background-color:var(--color-fill-2)}.arco-react-navTab-item-active .arco-react-navTab-item-link svg{transform:rotate(180deg)}.arco-react-navTab-container{width:100vw;display:flex;justify-content:center;position:relative;z-index:998;background-color:var(--color-bg-2);overflow:hidden}.arco-react-dropdown{display:flex;justify-content:center;padding-bottom:20px;width:1180px}.arco-react-dropdown-block{padding-top:30px;box-sizing:border-box;overflow:hidden;height:100%}.arco-react-dropdown-title{display:flex;justify-content:space-between;align-items:center;height:48px;border-bottom:1px solid var(--color-border);color:var(--color-text-1);font-size:20px}.arco-react-dropdown-list{display:grid;grid-template-columns:1fr 1fr;grid-row-gap:12px;grid-column-gap:24px;padding:20px 0}.arco-react-dropdown-item{display:flex;align-items:center;cursor:pointer;box-sizing:border-box;padding:4px;border-radius:8px;color:var(--color-text-1);text-decoration:none}.arco-react-dropdown-item-icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:8px;background-color:rgb(var(--primary-6));flex-shrink:0;margin-right:8px}.arco-react-dropdown-item-name{margin:0 16px;font-weight:500}.arco-react-dropdown-item-desc{margin-top:2px;color:var(--color-text-2);font-size:12px}.arco-react-dropdown-item:hover{background-color:var(--color-fill-2);color:rgb(var(--primary-6))}.arco-react-dropdown-develop .arco-react-dropdown-item-icon{background-color:#000}.arco-react-dropdown-develop .arco-react-dropdown-block-left .arco-react-dropdown-item-icon{background-color:transparent}.arco-react-dropdown-develop .arco-react-dropdown-block-left .arco-react-dropdown-item-name{margin:0 8px 0 0;display:flex}.arco-react-dropdown-develop .arco-react-dropdown-block-left .arco-react-dropdown-item-version{display:flex;align-items:center;padding:0 8px;background-color:var(--color-fill-3);border-radius:2px;margin:0 8px;font-size:12px;color:var(--color-text-1);transition:all .2s}.arco-react-dropdown-develop .arco-react-dropdown-block-left .arco-react-dropdown-item:hover .arco-react-dropdown-item-version{background-color:rgb(var(--primary-6));color:#fff}.arco-react-dropdown-ecosystem .arco-react-dropdown-list{width:100%;padding:24px 0;display:grid;grid-template-columns:33% 33% 33%;grid-row-gap:12px;grid-column-gap:20px}.arco-react-dropdown-ecosystem .arco-react-dropdown-item-desc{margin:2px 16px 0;color:var(--color-text-2);font-size:12px;font-weight:normal}.arco-react-message-box{display:flex;flex-direction:column;box-shadow:0 4px 10px #0000001a;border-radius:var(--border-radius-medium);border:1px solid var(--color-fill-3);box-sizing:border-box;background-color:var(--color-bg-popup);width:324px;max-height:360px}.arco-react-message-box-header{width:100%;height:40px;min-height:40px;display:flex;justify-content:space-between;align-items:center;padding:0 20px;box-sizing:border-box;border-bottom:1px solid var(--color-fill-3)}.arco-react-message-box-header-title{font-weight:500}.arco-react-message-box-list{flex:1;padding:4px 0;box-sizing:border-box;overflow-y:auto;overflow-x:hidden}.arco-react-message-box-item{display:inline-block;width:100%;padding:8px 20px;box-sizing:border-box;text-decoration:none;transition:all .2s}.arco-react-message-box-item:hover{background-color:var(--color-fill-2)}.arco-react-message-box-item[href]:hover .title{color:rgb(var(--primary-6))}.arco-react-message-box-item-description{font-size:12px;color:var(--color-text-2);line-height:auto}.arco-react-message-box-item-date{font-size:12px;color:var(--color-text-3)}.arco-react-select-nav{padding:18px 2px;height:60px;box-sizing:border-box;display:flex;align-items:center}.arco-react-select-nav .arco-select-view{font-weight:500;height:24px!important;line-height:24px!important}.arco-react-select-nav .arco-select-view svg{stroke-width:6px;color:var(--color-text-1)}.arco-react-select-nav-option svg{padding-right:8px}html.rtl .arco-react-select-nav-option svg{padding-left:8px;padding-right:0}.arco-react-profile{padding:4px 0;box-shadow:0 4px 10px #0000001a;border-radius:var(--border-radius-medium);border:1px solid var(--color-fill-3);box-sizing:border-box;background-color:var(--color-bg-popup)}.arco-react-profile-user{display:flex;padding:12px;align-items:center;box-sizing:border-box;border-bottom:1px solid var(--color-fill-3)}.arco-react-profile-user-settings{margin-top:4px!important;margin-bottom:4px!important;padding-top:4px;border-top:1px solid var(--color-fill-3)}.arco-react-profile-info{display:flex;flex-direction:column;justify-content:center;margin-left:8px}.arco-react-profile-info-nickname{font-weight:500;font-size:14px}.arco-react-profile-info-email{font-size:12px;line-height:13px;width:100%}.arco-react-profile-version{justify-content:space-between;width:100%}.arco-react-profile-version svg{color:var(--color-text-2)}.arco-react-profile-item{display:flex;align-items:center;height:36px;padding:0 14px;box-sizing:border-box;color:var(--color-text-1);text-decoration:none;cursor:pointer;transition:all .2s}.arco-react-profile-item-icon{margin-right:10px;font-size:16px;margin-bottom:-2px;color:var(--color-text-1)}.arco-react-profile-item:hover{background-color:var(--color-fill-2)}.arco-react-profile-avatar{background-color:var(--color-bg-4)!important;cursor:pointer;box-sizing:content-box!important;padding:2px;transition:all .2s;margin-right:20px}.arco-react-profile-avatar:hover{filter:drop-shadow(0 2px 3px rgba(78,89,105,.14))}.arco-react-profile-avatar-need-login{background-color:var(--color-fill-4)!important}html.rtl .arco-react-profile-info{margin-left:0;margin-right:8px}html.rtl .arco-react-profile-item svg{margin-right:0;margin-left:10px}html.rtl .arco-react-profile-avatar{margin-right:0;margin-left:20px}.arco-react-user-settings{padding:4px}.arco-react-user-settings-card{margin-bottom:30px}.arco-react-user-settings-card-header{display:flex;justify-content:space-between;align-items:center}.arco-react-user-settings-card-header h3{font-size:14px;color:var(--color-text-2);margin-bottom:12px}.arco-react-user-settings-card-info{padding:8px;align-items:center}.arco-react-user-settings-card-info-desc{margin-left:18px}.arco-react-user-settings-card-info-desc .arco-descriptions-item-label{font-size:13px}.arco-react-user-settings-card-info-desc td{padding:4px 6px}.arco-react-user-settings-card-info-desc .arco-typography{font-size:16px;line-height:22px;color:var(--color-text-2)}.arco-react-user-settings-card-info-desc-id{display:flex;font-size:13px;color:var(--color-text-3);line-height:16px;margin-top:6px}.arco-react-user-settings-card-info-desc-id>div{text-align:center;font-size:12px;line-height:16px;width:16px;height:16px;font-weight:bold;border-radius:4px;background-color:var(--color-text-4);color:var(--color-white);margin-right:4px}.arco-react-user-settings-card-info-desc-id>span{line-height:14px}.arco-react-user-settings-card-info-email{color:var(--color-text-2)}.arco-react-user-settings-card-info-email>span{margin-left:12px;font-size:12px}.arco-react-user-settings-card-info-email-success{color:rgb(var(--green-6))}.arco-react-user-settings-card-info-email-warning{color:rgb(var(--orange-6))}.arco-react-user-settings-card-info-token{display:flex;justify-content:space-between;margin-top:14px;border-bottom:1px solid var(--color-border-2);padding-bottom:4px}.arco-react-user-settings-card-info-token .arco-typography{font-size:13px;width:280px;margin-bottom:8px}.arco-react-user-settings-card-info-token-time{color:var(--color-text-3);font-size:12px;margin-top:4px;line-height:22px}.arco-react-search-modal-container{height:460px;padding:0 24px 24px;box-sizing:border-box;overflow-y:auto}.arco-react-search-modal-container-exact{padding:12px 0 16px;box-sizing:border-box}.arco-react-search-modal-container-exact-item{position:relative;display:flex;align-items:center;padding:8px;height:56px;box-sizing:border-box;border-radius:8px;margin:2px 0;cursor:pointer;transition:all .2s}.arco-react-search-modal-container-exact-icon{position:relative;display:flex;align-items:center;justify-content:center;border-radius:50%;margin-right:24px;width:40px;height:40px;background-color:var(--color-fill-1)}.arco-react-search-modal-container-item{position:relative;padding:8px 16px;border-radius:4px;cursor:pointer;transition:all .2s}.arco-react-search-modal-container-item-type{display:flex;align-items:center;justify-content:center;height:22px;padding:1px 8px;background-color:#4e5969;border-radius:2px;color:#fff;margin-left:12px;font-size:12px;box-sizing:border-box}.arco-react-search-modal-container-item-vue{font-weight:bold}.arco-react-search-modal-container-item-design{background:var(--color-fill-2);color:var(--color-text-1)}.arco-react-search-modal-container-item-title{line-height:24px;font-size:16px;margin-bottom:6px;color:var(--color-text-2)}.arco-react-search-modal-container-item-desc{color:var(--color-text-2);font-size:14px;line-height:22px}.arco-react-search-modal-container-item-active{background-color:var(--color-fill-1)}.arco-react-search-modal-container-item-active .arco-react-search-modal-container-item-type{background-color:rgb(var(--primary-6))}.arco-react-search-modal-container-item-active .arco-react-search-modal-container-item-vue{background-color:rgb(var(--cyan-6))}.arco-react-search-modal-container-item-active .arco-react-search-modal-container-item-design{color:#fff;border:none}.arco-react-search-modal-container-item-active .arco-react-search-modal-container-exact-icon{opacity:1}.arco-react-search-modal-container-item-active .arco-react-search-modal-container-enter-icon{opacity:1}.arco-react-search-modal-container-enter-icon{position:absolute;display:flex;align-items:center;justify-content:center;width:28px;height:24px;background:var(--color-fill-3);border-radius:4px;right:10px;top:50%;transform:translateY(-50%);opacity:0;transition:all .2s}.arco-react-search-modal-container-doc{margin-bottom:8px}.arco-react-search-modal-container-doc-title{font-size:12px;margin-bottom:4px}.arco-react-search-modal-container-doc-item{display:flex;box-sizing:border-box;padding:4px 8px;border-radius:4px;cursor:pointer;position:relative}.arco-react-search-modal-container-doc-item-icon{transform:scale(.8);display:flex}.arco-react-search-modal-container-doc-item-icon svg{color:var(--color-text-3);opacity:.6;stroke-width:1.8}.arco-react-search-modal-container-doc-item-icon-anchor,.arco-react-search-modal-container-doc-item-icon-doc{height:20px;padding:14px 0;margin-right:6px}.arco-react-search-modal-container-doc-item-icon-line{height:48px}.arco-react-search-modal-container-doc-item-result{font-size:13px;display:flex;flex-direction:column;justify-content:center}.arco-react-search-modal-container-doc-item-result-desc{vertical-align:middle;padding-right:36px}html.rtl .arco-react-search-modal-container-exact-icon{margin-left:24px;margin-right:0}html.rtl .arco-react-search-modal-container-list-item-type{margin-right:12px;margin-left:0}html.rtl .arco-react-search-modal-container-enter-icon{right:initial;left:10px;transform:scaleX(-1) translateY(-50%)}html.rtl .arco-react-search-modal-container-doc-title{text-align:right}html.rtl .arco-react-search-modal-container-doc-item-result-desc{padding-right:0;padding-left:36px}html.rtl .arco-react-search-modal-container-doc-item-result-label{text-align:right}html.rtl .arco-react-search-modal-container-doc-item-icon svg{transform:scaleX(-1)}.arco-react-search-modal{border-radius:8px!important;box-shadow:0 8px 20px #0000001a!important}.arco-react-search-modal .arco-modal-content,.arco-react-search-modal .arco-react-modal-content{padding:0}.arco-react-search-modal-content{padding:24px}.arco-react-search-modal-input-wrapper{display:flex;align-items:center;justify-content:space-between;height:60px;padding:0 20px;box-sizing:border-box;background:var(--color-bg-3);border-bottom:1px solid var(--color-border);border-radius:8px 8px 0 0}.arco-react-search-modal-left{display:flex;align-items:center}.arco-react-search-modal-left svg{color:rgb(var(--primary-6));font-size:20px;margin-right:10px}.arco-react-search-modal-left input{border:none;outline:none;height:32px;line-height:32px;font-size:16px;background-color:transparent;color:var(--color-text-1)}.arco-react-search-modal-right{display:flex}.arco-react-search-modal-key-word{font-size:12px;color:var(--color-text-3);margin-left:8px;margin-right:4px}.arco-react-search-modal-count{padding:24px 24px 12px}html.rtl .arco-react-search-modal-left svg{margin-right:0;margin-left:10px}html.rtl .arco-react-search-modal-key-word{margin-right:8px;margin-left:4px}.arco-react-search-hot{display:flex}.arco-react-search-hot-half{width:50%}.arco-react-search-hot-title{margin-bottom:12px}.arco-react-search-hot-list{display:flex;flex-direction:column;padding:0}.arco-react-search-hot-item{position:relative;display:flex;align-items:center;width:100%;height:56px;margin:2px 0;color:var(--color-text-2);padding:0 8px;box-sizing:border-box;font-size:16px;font-weight:400;border-radius:4px;text-decoration:none;transition:all .2s;cursor:pointer}.arco-react-search-hot-item-icon,.arco-react-search-hot-item-icon-active{position:absolute;top:0;left:0}.arco-react-search-hot-item-icon{opacity:1}.arco-react-search-hot-item-icon-active{opacity:0}.arco-react-search-hot-item:hover{color:rgb(var(--primary-6));background-color:var(--color-fill-2)}.arco-react-search-hot-item:hover .arco-react-search-hot-svg-wrapper{background:var(--color-bg-2)}.arco-react-search-hot-item:hover .arco-react-search-hot-enter-icon{opacity:1}.arco-react-search-hot-item:hover .arco-react-search-hot-item-icon{opacity:0}.arco-react-search-hot-item:hover .arco-react-search-hot-item-icon-active{opacity:1}.arco-react-search-hot-svg-wrapper{position:relative;background:var(--color-fill-2);display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;margin-right:20px}.arco-react-search-hot-enter-icon{position:absolute;display:flex;align-items:center;justify-content:center;width:28px;height:24px;background:var(--color-fill-3);border-radius:4px;right:10px;top:50%;transform:translateY(-50%);opacity:0}.arco-react-search-hot-svg-wrapper-rect{border-radius:8px}body[arco-theme=dark] .arco-react-search-hot-item-icon{filter:invert(1) grayscale(1) brightness(1.1)}html.rtl .arco-react-search-hot-half:first-child{margin-left:20px;margin-right:0}html.rtl .arco-react-search-hot-svg-wrapper{margin-left:20px;margin-right:0}html.rtl .arco-react-search-hot-title{text-align:right}html.rtl .arco-react-search-hot-enter-icon{right:initial;left:10px;transform:scaleX(-1) translateY(-50%)}.arco-react-search-history-header{display:flex;align-items:center;justify-content:space-between}.arco-react-search-history-list{padding:0;margin:12px 0 32px;max-height:170px;overflow-y:auto}.arco-react-search-history-item{position:relative;display:flex;align-items:center;height:40px;padding:0 10px;margin-bottom:2px;color:var(--color-text-1);text-decoration:none;cursor:pointer}.arco-react-search-history-item:hover{background-color:var(--color-fill-1)}.arco-react-search-history-item:hover .arco-react-search-history-title{color:rgb(var(--primary-6))}.arco-react-search-history-item .arco-icon-history,.arco-react-search-history-item .arco-react-icon-history{font-size:16px;margin-right:8px}.arco-react-search-history-close{position:absolute!important;right:10px;top:14px}html.rtl .arco-react-search-history-close{position:absolute!important;right:initial;left:10px;top:14px}html.rtl .arco-react-search-history-item .arco-icon-history,html.rtl .arco-react-search-history-item .arco-react-icon-history{font-size:16px;margin-right:0;margin-left:8px}.arco-react-search-input{display:flex;align-items:center;justify-content:space-between;height:32px;width:140px;background-color:var(--color-fill-2);border-radius:2px;padding:0 8px;margin:0 24px;transition:all .2s;cursor:pointer}.arco-react-search-input:hover{background-color:var(--color-fill-3)}.arco-react-search-input:focus-visible{outline:2px solid rgb(var(--primary-6))}.arco-react-search-input svg{color:var(--color-text-1);vertical-align:-1px}.arco-react-search-input-placeholder{color:var(--color-text-3);margin:0 6px;vertical-align:1px}.arco-react-search-input-command{display:flex}.arco-react-search-input-key{display:flex;flex-direction:row;justify-content:center;align-items:center;padding:6px;width:17.21px;height:20px;left:117px;top:6px;background:#fff;border:1px solid #c9cdd4;box-sizing:border-box;box-shadow:0 1px #c9cdd4;border-radius:3px;font-size:12px;color:var(--color-text-3)}.arco-react-search-input-key:first-child{margin:0 4px}body[arco-theme=dark] .arco-react-search-input-key{background:#202022;border:1px solid rgba(255,255,255,.12);box-shadow:0 1px #ffffff1f;color:#fff6}.arco-react-logo{display:flex;align-items:center;justify-content:center;width:180px;height:60px;box-sizing:border-box;text-decoration:none}.arco-react-logo .logo:focus-visible>svg{outline:2px solid rgb(var(--primary-6))}.arco-react-global-notice{position:fixed;top:60px;width:100%;height:32px;line-height:32px;background-color:rgb(var(--blue-6));color:var(--color-white);display:flex;justify-content:center;z-index:980}.arco-react-global-notice-container{width:calc(100% - 120px);text-align:center;color:var(--color-white)!important;text-decoration:none}.arco-react-global-notice-container>span{font-size:13px;margin-left:36px;margin-right:48px}.arco-react-global-notice-close-icon{position:absolute;right:20px;cursor:pointer;width:20px;height:20px;line-height:20px;margin-top:6px;text-align:center;border-radius:4px}.arco-react-global-notice-close-icon:hover{background-color:#ffffff4d}@media screen and (max-width: 920px){.arco-react-global-notice{position:relative;top:0;height:28px;line-height:28px}.arco-react-global-notice a>b{display:none}.arco-react-global-notice a>span{font-weight:500;margin:0;font-size:12px}.arco-react-global-notice-close-icon{margin-top:4px}}:global(html.rtl) .arco-react-global-notice svg{transform:scaleX(-1)}.arco-react-container{width:100%;height:60px;box-sizing:border-box;min-height:60px;max-height:60px;display:flex;justify-content:space-between;position:fixed;top:0;left:0;right:0;z-index:999;border-bottom:1px solid var(--color-border);background-color:var(--color-bg-2)}.arco-react-container-no-border{border-bottom:none}.arco-react-btn-icon{font-size:18px!important;color:var(--color-text-1)!important;margin:0 10px;line-height:24px!important}.arco-react-mask{position:fixed;width:100vw;height:100vh;background-color:var(--color-mask-bg);left:0;top:0;z-index:990}.arco-react-fadeIn-enter,.arco-react-fadeIn-appear{opacity:0}.arco-react-fadeIn-enter-active,.arco-react-fadeIn-appear-active{opacity:1;transition:opacity .3s}.arco-react-fadeIn-exit{opacity:1}.arco-react-fadeIn-exit-active{opacity:0;transition:opacity .3s}.arco-react-mobile .arco-react-container{height:48px;min-height:48px;max-height:48px}.arco-react-mobile-container{width:100%;display:flex;align-items:center;justify-content:space-between}.arco-react-mobile .arco-react-btn-icon{font-size:14px!important;margin:0 4px}#react-root{--red-1: 255,236,232;--red-2: 253,205,197;--red-3: 251,172,163;--red-4: 249,137,129;--red-5: 247,101,96;--red-6: 245,63,63;--red-7: 203,39,45;--red-8: 161,21,30;--red-9: 119,8,19;--red-10: 77,0,10;--orangered-1: 255,243,232;--orangered-2: 253,221,195;--orangered-3: 252,197,159;--orangered-4: 250,172,123;--orangered-5: 249,144,87;--orangered-6: 247,114,52;--orangered-7: 204,81,32;--orangered-8: 162,53,17;--orangered-9: 119,31,6;--orangered-10: 77,14,0;--orange-1: 255,247,232;--orange-2: 255,228,186;--orange-3: 255,207,139;--orange-4: 255,182,93;--orange-5: 255,154,46;--orange-6: 255,125,0;--orange-7: 210,95,0;--orange-8: 166,69,0;--orange-9: 121,46,0;--orange-10: 77,27,0;--gold-1: 255,252,232;--gold-2: 253,244,191;--gold-3: 252,233,150;--gold-4: 250,220,109;--gold-5: 249,204,69;--gold-6: 247,186,30;--gold-7: 204,146,19;--gold-8: 162,109,10;--gold-9: 119,75,4;--gold-10: 77,45,0;--yellow-1: 254,255,232;--yellow-2: 254,254,190;--yellow-3: 253,250,148;--yellow-4: 252,242,107;--yellow-5: 251,232,66;--yellow-6: 250,220,25;--yellow-7: 207,175,15;--yellow-8: 163,132,8;--yellow-9: 120,93,3;--yellow-10: 77,56,0;--lime-1: 252,255,232;--lime-2: 237,248,187;--lime-3: 220,241,144;--lime-4: 201,233,104;--lime-5: 181,226,65;--lime-6: 159,219,29;--lime-7: 126,183,18;--lime-8: 95,148,10;--lime-9: 67,112,4;--lime-10: 42,77,0;--green-1: 232,255,234;--green-2: 175,240,181;--green-3: 123,225,136;--green-4: 76,210,99;--green-5: 35,195,67;--green-6: 0,180,42;--green-7: 0,154,41;--green-8: 0,128,38;--green-9: 0,102,34;--green-10: 0,77,28;--cyan-1: 232,255,251;--cyan-2: 183,244,236;--cyan-3: 137,233,224;--cyan-4: 94,223,214;--cyan-5: 55,212,207;--cyan-6: 20,201,201;--cyan-7: 13,165,170;--cyan-8: 7,130,139;--cyan-9: 3,97,108;--cyan-10: 0,66,77;--blue-1: 232,247,255;--blue-2: 195,231,254;--blue-3: 159,212,253;--blue-4: 123,192,252;--blue-5: 87,169,251;--blue-6: 52,145,250;--blue-7: 32,108,207;--blue-8: 17,75,163;--blue-9: 6,48,120;--blue-10: 0,26,77;--arcoblue-1: 232,243,255;--arcoblue-2: 190,218,255;--arcoblue-3: 148,191,255;--arcoblue-4: 106,161,255;--arcoblue-5: 64,128,255;--arcoblue-6: 22,93,255;--arcoblue-7: 14,66,210;--arcoblue-8: 7,44,166;--arcoblue-9: 3,26,121;--arcoblue-10: 0,13,77;--purple-1: 245,232,255;--purple-2: 221,190,246;--purple-3: 195,150,237;--purple-4: 168,113,227;--purple-5: 141,78,218;--purple-6: 114,46,209;--purple-7: 85,29,176;--purple-8: 60,16,143;--purple-9: 39,6,110;--purple-10: 22,0,77;--pinkpurple-1: 255,232,251;--pinkpurple-2: 247,186,239;--pinkpurple-3: 240,142,230;--pinkpurple-4: 232,101,223;--pinkpurple-5: 225,62,219;--pinkpurple-6: 217,26,217;--pinkpurple-7: 176,16,182;--pinkpurple-8: 138,9,147;--pinkpurple-9: 101,3,112;--pinkpurple-10: 66,0,77;--magenta-1: 255,232,241;--magenta-2: 253,194,219;--magenta-3: 251,157,199;--magenta-4: 249,121,183;--magenta-5: 247,84,168;--magenta-6: 245,49,157;--magenta-7: 203,30,131;--magenta-8: 161,16,105;--magenta-9: 119,6,79;--magenta-10: 77,0,52;--gray-1: 247,248,250;--gray-2: 242,243,245;--gray-3: 229,230,235;--gray-4: 201,205,212;--gray-5: 169,174,184;--gray-6: 134,144,156;--gray-7: 107,119,133;--gray-8: 78,89,105;--gray-9: 39,46,59;--gray-10: 29,33,41;--success-1: var(--green-1);--success-2: var(--green-2);--success-3: var(--green-3);--success-4: var(--green-4);--success-5: var(--green-5);--success-6: var(--green-6);--success-7: var(--green-7);--success-8: var(--green-8);--success-9: var(--green-9);--success-10: var(--green-10);--primary-1: var(--arcoblue-1);--primary-2: var(--arcoblue-2);--primary-3: var(--arcoblue-3);--primary-4: var(--arcoblue-4);--primary-5: var(--arcoblue-5);--primary-6: var(--arcoblue-6);--primary-7: var(--arcoblue-7);--primary-8: var(--arcoblue-8);--primary-9: var(--arcoblue-9);--primary-10: var(--arcoblue-10);--danger-1: var(--red-1);--danger-2: var(--red-2);--danger-3: var(--red-3);--danger-4: var(--red-4);--danger-5: var(--red-5);--danger-6: var(--red-6);--danger-7: var(--red-7);--danger-8: var(--red-8);--danger-9: var(--red-9);--danger-10: var(--red-10);--warning-1: var(--orange-1);--warning-2: var(--orange-2);--warning-3: var(--orange-3);--warning-4: var(--orange-4);--warning-5: var(--orange-5);--warning-6: var(--orange-6);--warning-7: var(--orange-7);--warning-8: var(--orange-8);--warning-9: var(--orange-9);--warning-10: var(--orange-10);--link-1: var(--arcoblue-1);--link-2: var(--arcoblue-2);--link-3: var(--arcoblue-3);--link-4: var(--arcoblue-4);--link-5: var(--arcoblue-5);--link-6: var(--arcoblue-6);--link-7: var(--arcoblue-7);--link-8: var(--arcoblue-8);--link-9: var(--arcoblue-9);--link-10: var(--arcoblue-10)}#react-root[arco-theme=dark]{--red-1: 77,0,10;--red-2: 119,6,17;--red-3: 161,22,31;--red-4: 203,46,52;--red-5: 245,78,78;--red-6: 247,105,101;--red-7: 249,141,134;--red-8: 251,176,167;--red-9: 253,209,202;--red-10: 255,240,236;--orangered-1: 77,14,0;--orangered-2: 119,30,5;--orangered-3: 162,55,20;--orangered-4: 204,87,41;--orangered-5: 247,126,69;--orangered-6: 249,146,90;--orangered-7: 250,173,125;--orangered-8: 252,198,161;--orangered-9: 253,222,197;--orangered-10: 255,244,235;--orange-1: 77,27,0;--orange-2: 121,48,4;--orange-3: 166,75,10;--orange-4: 210,105,19;--orange-5: 255,141,31;--orange-6: 255,150,38;--orange-7: 255,179,87;--orange-8: 255,205,135;--orange-9: 255,227,184;--orange-10: 255,247,232;--gold-1: 77,45,0;--gold-2: 119,75,4;--gold-3: 162,111,15;--gold-4: 204,150,31;--gold-5: 247,192,52;--gold-6: 249,204,68;--gold-7: 250,220,108;--gold-8: 252,233,149;--gold-9: 253,244,190;--gold-10: 255,252,232;--yellow-1: 77,56,0;--yellow-2: 120,94,7;--yellow-3: 163,134,20;--yellow-4: 207,179,37;--yellow-5: 250,225,60;--yellow-6: 251,233,75;--yellow-7: 252,243,116;--yellow-8: 253,250,157;--yellow-9: 254,254,198;--yellow-10: 254,255,240;--lime-1: 42,77,0;--lime-2: 68,112,6;--lime-3: 98,148,18;--lime-4: 132,183,35;--lime-5: 168,219,57;--lime-6: 184,226,75;--lime-7: 203,233,112;--lime-8: 222,241,152;--lime-9: 238,248,194;--lime-10: 253,255,238;--green-1: 0,77,28;--green-2: 4,102,37;--green-3: 10,128,45;--green-4: 18,154,55;--green-5: 29,180,64;--green-6: 39,195,70;--green-7: 80,210,102;--green-8: 126,225,139;--green-9: 178,240,183;--green-10: 235,255,236;--cyan-1: 0,66,77;--cyan-2: 6,97,108;--cyan-3: 17,131,139;--cyan-4: 31,166,170;--cyan-5: 48,201,201;--cyan-6: 63,212,207;--cyan-7: 102,223,215;--cyan-8: 144,233,225;--cyan-9: 190,244,237;--cyan-10: 240,255,252;--blue-1: 0,26,77;--blue-2: 5,47,120;--blue-3: 19,76,163;--blue-4: 41,113,207;--blue-5: 70,154,250;--blue-6: 90,170,251;--blue-7: 125,193,252;--blue-8: 161,213,253;--blue-9: 198,232,254;--blue-10: 234,248,255;--arcoblue-1: 0,13,77;--arcoblue-2: 4,27,121;--arcoblue-3: 14,50,166;--arcoblue-4: 29,77,210;--arcoblue-5: 48,111,255;--arcoblue-6: 60,126,255;--arcoblue-7: 104,159,255;--arcoblue-8: 147,190,255;--arcoblue-9: 190,218,255;--arcoblue-10: 234,244,255;--purple-1: 22,0,77;--purple-2: 39,6,110;--purple-3: 62,19,143;--purple-4: 90,37,176;--purple-5: 123,61,209;--purple-6: 142,81,218;--purple-7: 169,116,227;--purple-8: 197,154,237;--purple-9: 223,194,246;--purple-10: 247,237,255;--pinkpurple-1: 66,0,77;--pinkpurple-2: 101,3,112;--pinkpurple-3: 138,13,147;--pinkpurple-4: 176,27,182;--pinkpurple-5: 217,46,217;--pinkpurple-6: 225,61,219;--pinkpurple-7: 232,102,223;--pinkpurple-8: 240,146,230;--pinkpurple-9: 247,193,240;--pinkpurple-10: 255,242,253;--magenta-1: 77,0,52;--magenta-2: 119,8,80;--magenta-3: 161,23,108;--magenta-4: 203,43,136;--magenta-5: 245,69,166;--magenta-6: 247,86,169;--magenta-7: 249,122,184;--magenta-8: 251,158,200;--magenta-9: 253,195,219;--magenta-10: 255,232,241;--gray-1: 23,23,26;--gray-2: 46,46,48;--gray-3: 72,72,73;--gray-4: 95,95,96;--gray-5: 120,120,122;--gray-6: 146,146,147;--gray-7: 171,171,172;--gray-8: 197,197,197;--gray-9: 223,223,223;--gray-10: 246,246,246;--primary-1: var(--arcoblue-1);--primary-2: var(--arcoblue-2);--primary-3: var(--arcoblue-3);--primary-4: var(--arcoblue-4);--primary-5: var(--arcoblue-5);--primary-6: var(--arcoblue-6);--primary-7: var(--arcoblue-7);--primary-8: var(--arcoblue-8);--primary-9: var(--arcoblue-9);--primary-10: var(--arcoblue-10);--success-1: var(--green-1);--success-2: var(--green-2);--success-3: var(--green-3);--success-4: var(--green-4);--success-5: var(--green-5);--success-6: var(--green-6);--success-7: var(--green-7);--success-8: var(--green-8);--success-9: var(--green-9);--success-10: var(--green-10);--danger-1: var(--red-1);--danger-2: var(--red-2);--danger-3: var(--red-3);--danger-4: var(--red-4);--danger-5: var(--red-5);--danger-6: var(--red-6);--danger-7: var(--red-7);--danger-8: var(--red-8);--danger-9: var(--red-9);--danger-10: var(--red-10);--warning-1: var(--orange-1);--warning-2: var(--orange-2);--warning-3: var(--orange-3);--warning-4: var(--orange-4);--warning-5: var(--orange-5);--warning-6: var(--orange-6);--warning-7: var(--orange-7);--warning-8: var(--orange-8);--warning-9: var(--orange-9);--warning-10: var(--orange-10);--link-1: var(--arcoblue-1);--link-2: var(--arcoblue-2);--link-3: var(--arcoblue-3);--link-4: var(--arcoblue-4);--link-5: var(--arcoblue-5);--link-6: var(--arcoblue-6);--link-7: var(--arcoblue-7);--link-8: var(--arcoblue-8);--link-9: var(--arcoblue-9);--link-10: var(--arcoblue-10)}#react-root{--color-white: #ffffff;--color-black: #000000;--color-border: rgb(var(--gray-3));--color-bg-popup: var(--color-bg-5);--color-bg-1: #fff;--color-bg-2: #fff;--color-bg-3: #fff;--color-bg-4: #fff;--color-bg-5: #fff;--color-bg-white: #fff;--color-neutral-1: rgb(var(--gray-1));--color-neutral-2: rgb(var(--gray-2));--color-neutral-3: rgb(var(--gray-3));--color-neutral-4: rgb(var(--gray-4));--color-neutral-5: rgb(var(--gray-5));--color-neutral-6: rgb(var(--gray-6));--color-neutral-7: rgb(var(--gray-7));--color-neutral-8: rgb(var(--gray-8));--color-neutral-9: rgb(var(--gray-9));--color-neutral-10: rgb(var(--gray-10));--color-text-1: var(--color-neutral-10);--color-text-2: var(--color-neutral-8);--color-text-3: var(--color-neutral-6);--color-text-4: var(--color-neutral-4);--color-border-1: var(--color-neutral-2);--color-border-2: var(--color-neutral-3);--color-border-3: var(--color-neutral-4);--color-border-4: var(--color-neutral-6);--color-fill-1: var(--color-neutral-1);--color-fill-2: var(--color-neutral-2);--color-fill-3: var(--color-neutral-3);--color-fill-4: var(--color-neutral-4);--color-primary-light-1: rgb(var(--primary-1));--color-primary-light-2: rgb(var(--primary-2));--color-primary-light-3: rgb(var(--primary-3));--color-primary-light-4: rgb(var(--primary-4));--color-secondary: var(--color-neutral-2);--color-secondary-hover: var(--color-neutral-3);--color-secondary-active: var(--color-neutral-4);--color-secondary-disabled: var(--color-neutral-1);--color-danger-light-1: rgb(var(--danger-1));--color-danger-light-2: rgb(var(--danger-2));--color-danger-light-3: rgb(var(--danger-3));--color-danger-light-4: rgb(var(--danger-4));--color-success-light-1: rgb(var(--success-1));--color-success-light-2: rgb(var(--success-2));--color-success-light-3: rgb(var(--success-3));--color-success-light-4: rgb(var(--success-4));--color-warning-light-1: rgb(var(--warning-1));--color-warning-light-2: rgb(var(--warning-2));--color-warning-light-3: rgb(var(--warning-3));--color-warning-light-4: rgb(var(--warning-4));--color-link-light-1: rgb(var(--link-1));--color-link-light-2: rgb(var(--link-2));--color-link-light-3: rgb(var(--link-3));--color-link-light-4: rgb(var(--link-4));--border-radius-none: 0;--border-radius-small: 2px;--border-radius-medium: 4px;--border-radius-large: 8px;--border-radius-circle: 50%;--color-tooltip-bg: rgb(var(--gray-10));--color-spin-layer-bg: rgba(255, 255, 255, .6);--color-menu-dark-bg: #232324;--color-menu-light-bg: #ffffff;--color-menu-dark-hover: rgba(255, 255, 255, .04);--color-mask-bg: rgba(29, 33, 41, .6)}#react-root[arco-theme=dark]{--color-white: rgba(255, 255, 255, .9);--color-black: #000000;--color-border: #333335;--color-bg-1: #17171a;--color-bg-2: #232324;--color-bg-3: #2a2a2b;--color-bg-4: #313132;--color-bg-5: #373739;--color-bg-white: #f6f6f6;--color-text-1: rgba(255, 255, 255, .9);--color-text-2: rgba(255, 255, 255, .7);--color-text-3: rgba(255, 255, 255, .5);--color-text-4: rgba(255, 255, 255, .3);--color-fill-1: rgba(255, 255, 255, .04);--color-fill-2: rgba(255, 255, 255, .08);--color-fill-3: rgba(255, 255, 255, .12);--color-fill-4: rgba(255, 255, 255, .16);--color-primary-light-1: rgba(var(--primary-6), .2);--color-primary-light-2: rgba(var(--primary-6), .35);--color-primary-light-3: rgba(var(--primary-6), .5);--color-primary-light-4: rgba(var(--primary-6), .65);--color-secondary: rgba(var(--gray-9), .08);--color-secondary-hover: rgba(var(--gray-8), .16);--color-secondary-active: rgba(var(--gray-7), .24);--color-secondary-disabled: rgba(var(--gray-9), .08);--color-danger-light-1: rgba(var(--danger-6), .2);--color-danger-light-2: rgba(var(--danger-6), .35);--color-danger-light-3: rgba(var(--danger-6), .5);--color-danger-light-4: rgba(var(--danger-6), .65);--color-success-light-1: rgba(var(--success-6), .2);--color-success-light-2: rgba(var(--success-6), .35);--color-success-light-3: rgba(var(--success-6), .5);--color-success-light-4: rgba(var(--success-6), .65);--color-warning-light-1: rgba(var(--warning-6), .2);--color-warning-light-2: rgba(var(--warning-6), .35);--color-warning-light-3: rgba(var(--warning-6), .5);--color-warning-light-4: rgba(var(--warning-6), .65);--color-link-light-1: rgba(var(--link-6), .2);--color-link-light-2: rgba(var(--link-6), .35);--color-link-light-3: rgba(var(--link-6), .5);--color-link-light-4: rgba(var(--link-6), .65);--color-tooltip-bg: #373739;--color-spin-layer-bg: rgba(51, 51, 51, .6);--color-menu-dark-bg: #232324;--color-menu-light-bg: #232324;--color-menu-dark-hover: var(--color-fill-2);--color-mask-bg: rgba(23, 23, 26, .6)}/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html,body{line-height:1.5;-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,-apple-system,BlinkMacSystemFont,PingFang SC,Hiragino Sans GB,noto sans,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif}body{margin:0;padding:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}tr,th{margin:0;padding:0}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}*{outline:none}input::-ms-clear,input::-ms-reveal{display:none}.arco-react-icon{display:inline-block;color:inherit;font-style:normal;width:1em;height:1em;vertical-align:-2px;stroke:currentColor}.arco-react-icon[fill=currentColor]{fill:currentColor;stroke:none}.arco-react-icon[stroke=currentColor]{stroke:currentColor;fill:none}.arco-react-icon[fill=currentColor][stroke=currentColor]{fill:currentColor;stroke:currentColor}.arco-react-icon-loading{animation:arco-react-loading-circle 1s infinite cubic-bezier(0,0,1,1)}@keyframes arco-react-loading-circle{to{transform:rotate(360deg)}}.arco-react-icon-hover{position:relative;display:inline-block;cursor:pointer;line-height:0}.arco-react-icon-hover .arco-react-icon{position:relative;vertical-align:-.09em}.arco-react-icon-hover:before{content:\"\";position:absolute;display:block;border-radius:var(--border-radius-circle);background-color:transparent;box-sizing:border-box;transition:background-color .1s cubic-bezier(0,0,1,1)}.arco-react-icon-hover:hover:before{background-color:var(--color-fill-2)}.arco-react-icon-hover.arco-react-icon-hover-disabled:before{opacity:0}.arco-react-icon-hover:before{top:50%;left:50%;height:20px;width:20px;transform:translate(-50%,-50%)}.arco-react-icon-hover-size-mini:before{top:50%;left:50%;height:20px;width:20px;transform:translate(-50%,-50%)}.arco-react-icon-hover-size-small:before{top:50%;left:50%;height:20px;width:20px;transform:translate(-50%,-50%)}.arco-react-icon-hover-size-large:before{top:50%;left:50%;height:24px;width:24px;transform:translate(-50%,-50%)}.arco-react-icon-hover-size-huge:before{top:50%;left:50%;height:24px;width:24px;transform:translate(-50%,-50%)}.fadeInStandard-enter,.fadeInStandard-appear{opacity:0}.fadeInStandard-enter-active,.fadeInStandard-appear-active{opacity:1;transition:opacity .3s cubic-bezier(.34,.69,.1,1)}.fadeInStandard-exit{opacity:1}.fadeInStandard-exit-active{opacity:0;transition:opacity .3s cubic-bezier(.34,.69,.1,1)}.fadeIn-enter,.fadeIn-appear{opacity:0}.fadeIn-enter-active,.fadeIn-appear-active{opacity:1;transition:opacity .1s cubic-bezier(0,0,1,1)}.fadeIn-exit{opacity:1}.fadeIn-exit-active{opacity:0;transition:opacity .1s cubic-bezier(0,0,1,1)}.slideDynamicOrigin-enter,.slideDynamicOrigin-appear{opacity:0;transform-origin:0 0;transform:scaleY(.9) translateZ(0)}.slideDynamicOrigin-enter-active,.slideDynamicOrigin-appear-active{opacity:1;transform-origin:0 0;transform:scaleY(1) translateZ(0);transition:transform .2s cubic-bezier(.34,.69,.1,1),opacity .2s cubic-bezier(.34,.69,.1,1)}.slideDynamicOrigin-exit{opacity:1;transform-origin:0 0;transform:scaleY(1) translateZ(0);transition:transform .2s cubic-bezier(.34,.69,.1,1),opacity .2s cubic-bezier(.34,.69,.1,1)}.slideDynamicOrigin-exit-active{opacity:0;transform-origin:0 0;transform:scaleY(.9) translateZ(0);transition:transform .2s cubic-bezier(.34,.69,.1,1),opacity .2s cubic-bezier(.34,.69,.1,1)}.slideLeft-enter,.slideLeft-appear{transform:translate(-100%)}.slideLeft-enter-active,.slideLeft-appear-active{transform:translate(0);transition:transform .3s cubic-bezier(.34,.69,.1,1)}.slideLeft-exit{transform:translate(0)}.slideLeft-exit-active{transform:translate(-100%);transition:transform .3s cubic-bezier(.34,.69,.1,1)}.slideRight-enter,.slideRight-appear{transform:translate(100%)}.slideRight-enter-active,.slideRight-appear-active{transform:translate(0);transition:transform .3s cubic-bezier(.34,.69,.1,1)}.slideRight-exit{transform:translate(0)}.slideRight-exit-active{transform:translate(100%);transition:transform .3s cubic-bezier(.34,.69,.1,1)}.slideTop-enter,.slideTop-appear{transform:translateY(-100%)}.slideTop-enter-active,.slideTop-appear-active{transform:translateY(0);transition:transform .3s cubic-bezier(.34,.69,.1,1)}.slideTop-exit{transform:translateY(0)}.slideTop-exit-active{transform:translateY(-100%);transition:transform .3s cubic-bezier(.34,.69,.1,1)}.slideBottom-enter,.slideBottom-appear{transform:translateY(100%)}.slideBottom-enter-active,.slideBottom-appear-active{transform:translateY(0);transition:transform .3s cubic-bezier(.34,.69,.1,1)}.slideBottom-exit{transform:translateY(0)}.slideBottom-exit-active{transform:translateY(100%);transition:transform .3s cubic-bezier(.34,.69,.1,1)}.zoomIn-enter,.zoomIn-appear{opacity:0;transform:scale(.5)}.zoomIn-enter-active,.zoomIn-appear-active{opacity:1;transform:scale(1);transition:opacity .3s cubic-bezier(.34,.69,.1,1),transform .3s cubic-bezier(.34,.69,.1,1)}.zoomIn-exit{opacity:1;transform:scale(1)}.zoomIn-exit-active{opacity:0;transform:scale(.5);transition:opacity .3s cubic-bezier(.3,1.3,.3,1),transform .3s cubic-bezier(.3,1.3,.3,1)}.zoomInFadeOut-enter,.zoomInFadeOut-appear{opacity:0;transform:scale(.5)}.zoomInFadeOut-enter-active,.zoomInFadeOut-appear-active{opacity:1;transform:scale(1);transition:opacity .3s cubic-bezier(.3,1.3,.3,1),transform .3s cubic-bezier(.3,1.3,.3,1)}.zoomInFadeOut-exit{opacity:1;transform:scale(1)}.zoomInFadeOut-exit-active{opacity:0;transform:scale(.5);transition:opacity .3s cubic-bezier(.3,1.3,.3,1),transform .3s cubic-bezier(.3,1.3,.3,1)}.zoomInBig-enter,.zoomInBig-appear{opacity:0;transform:scale(.5)}.zoomInBig-enter-active,.zoomInBig-appear-active{opacity:1;transform:scale(1);transition:opacity .2s cubic-bezier(0,0,1,1),transform .2s cubic-bezier(0,0,1,1)}.zoomInBig-exit{opacity:1;transform:scale(1)}.zoomInBig-exit-active{opacity:0;transform:scale(.2);transition:opacity .2s cubic-bezier(0,0,1,1),transform .2s cubic-bezier(0,0,1,1)}.zoomInLeft-enter,.zoomInLeft-appear{opacity:.1;transform-origin:0 50%;transform:scale(.1)}.zoomInLeft-enter-active,.zoomInLeft-appear-active{opacity:1;transform:scale(1);transition:opacity .3s cubic-bezier(0,0,1,1),transform .3s cubic-bezier(.3,1.3,.3,1)}.zoomInLeft-exit{opacity:1;transform-origin:0 50%;transform:scale(1)}.zoomInLeft-exit-active{opacity:.1;transform:scale(.1);transition:opacity .3s cubic-bezier(0,0,1,1),transform .3s cubic-bezier(.3,1.3,.3,1)}.zoomInTop-enter,.zoomInTop-appear{opacity:0;transform-origin:0% 0%;transform:scaleY(.8) translateZ(0)}.zoomInTop-enter-active,.zoomInTop-appear-active{opacity:1;transform-origin:0% 0%;transform:scaleY(1) translateZ(0);transition:transform .3s cubic-bezier(.3,1.3,.3,1),opacity .3s cubic-bezier(.3,1.3,.3,1)}.zoomInTop-exit{opacity:1;transform-origin:0% 0%;transform:scaleY(1) translateZ(0)}.zoomInTop-exit-active{opacity:0;transform-origin:0% 0%;transform:scaleY(.8) translateZ(0);transition:transform .3s cubic-bezier(.3,1.3,.3,1),opacity .3s cubic-bezier(.3,1.3,.3,1)}.zoomInBottom-enter,.zoomInBottom-appear{opacity:0;transform-origin:100% 100%;transform:scaleY(.8) translateZ(0)}.zoomInBottom-enter-active,.zoomInBottom-appear-active{opacity:1;transform-origin:100% 100%;transform:scaleY(1) translateZ(0);transition:transform .3s cubic-bezier(.3,1.3,.3,1),opacity .3s cubic-bezier(.3,1.3,.3,1)}.zoomInBottom-exit{opacity:1;transform-origin:100% 100%;transform:scaleY(1) translateZ(0)}.zoomInBottom-exit-active{opacity:0;transform-origin:100% 100%;transform:scaleY(.8) translateZ(0);transition:transform .3s cubic-bezier(.3,1.3,.3,1),opacity .3s cubic-bezier(.3,1.3,.3,1)}body{font-size:14px}@keyframes arco-react-draggable-item-blink{0%{opacity:1}50%{opacity:.3}to{opacity:1}}.arco-draggable-item{box-sizing:border-box;list-style:none;user-select:none}.arco-draggable-item-dragging{opacity:.3}.arco-draggable-item-dragover.arco-draggable-item-gap-left{box-shadow:-1px 0 rgb(var(--primary-6))}.arco-draggable-item-dragover.arco-draggable-item-gap-right{box-shadow:1px 0 rgb(var(--primary-6))}.arco-draggable-item-dragover.arco-draggable-item-gap-top{box-shadow:0 -1px rgb(var(--primary-6))}.arco-draggable-item-dragover.arco-draggable-item-gap-bottom{box-shadow:0 1px rgb(var(--primary-6))}.arco-draggable-item-dragged{animation:arco-react-draggable-item-blink .8s;animation-timing-function:cubic-bezier(0,0,1,1)}.arco-react-picker{position:relative;display:inline-flex;align-items:center;padding:4px 11px 4px 4px;line-height:1.5715;border-radius:var(--border-radius-small);background-color:var(--color-fill-2);border:1px solid transparent;box-sizing:border-box;transition:all .1s cubic-bezier(0,0,1,1)}.arco-react-picker-input{display:inline-flex;flex:1}.arco-react-picker input{text-align:left;padding:0 0 0 8px;border:none;width:100%;color:var(--color-text-1);background-color:transparent;line-height:1.5715;transition:all .1s cubic-bezier(0,0,1,1)}.arco-react-picker input::placeholder{color:var(--color-text-3)}.arco-react-picker-input-placeholder input{color:var(--color-text-3)}.arco-react-picker-suffix{width:14px;margin-left:4px;text-align:center}.arco-react-picker-suffix-icon{color:var(--color-text-2)}.arco-react-picker .arco-react-picker-clear-icon{display:none;font-size:12px;color:var(--color-text-2)}.arco-react-picker:hover{background-color:var(--color-fill-3);border-color:transparent}.arco-react-picker:not(.arco-react-picker-disabled):hover .arco-react-picker-clear-icon{display:inline-block}.arco-react-picker:not(.arco-react-picker-disabled):hover .arco-react-picker-suffix .arco-react-picker-clear-icon+span{display:none}.arco-react-picker-error{background-color:var(--color-danger-light-1);border-color:transparent}.arco-react-picker-error:hover{background-color:var(--color-danger-light-2);border-color:transparent}.arco-react-picker-focused{box-shadow:0 0 0 0 var(--color-primary-light-2)}.arco-react-picker-focused,.arco-react-picker-focused:hover{background-color:var(--color-bg-2);border-color:rgb(var(--primary-6))}.arco-react-picker-focused.arco-react-picker-error{border-color:rgb(var(--danger-6));box-shadow:0 0 0 0 var(--color-danger-light-2)}.arco-react-picker-focused .arco-react-picker-input-active input,.arco-react-picker-focused:hover .arco-react-picker-input-active input{background:var(--color-primary-light-1)}.arco-react-picker input[disabled]{cursor:not-allowed;color:var(--color-text-4);-webkit-text-fill-color:var(--color-text-4)}.arco-react-picker input[disabled]::placeholder{color:var(--color-text-4)}.arco-react-picker-disabled,.arco-react-picker-disabled:hover{color:var(--color-text-4);border-color:transparent;background-color:var(--color-fill-2);cursor:not-allowed}.arco-react-picker-disabled input[disabled],.arco-react-picker-disabled:hover input[disabled]{cursor:not-allowed;color:var(--color-text-4);-webkit-text-fill-color:var(--color-text-4)}.arco-react-picker-disabled input[disabled]::placeholder,.arco-react-picker-disabled:hover input[disabled]::placeholder{color:var(--color-text-4)}.arco-react-picker-separator{min-width:10px;padding:0 8px;color:var(--color-text-3)}.arco-react-picker-disabled .arco-react-picker-separator{color:var(--color-text-4)}.arco-react-picker-disabled .arco-react-picker-suffix-icon{color:var(--color-text-4)}.arco-react-picker-size-mini{height:24px}.arco-react-picker-size-mini input{font-size:12px}.arco-react-picker-size-small{height:28px}.arco-react-picker-size-small input{font-size:14px}.arco-react-picker-size-default{height:32px}.arco-react-picker-size-default input{font-size:14px}.arco-react-picker-size-large{height:36px}.arco-react-picker-size-large input{font-size:14px}.arco-react-affix{position:fixed;z-index:999}.arco-react-alert{box-sizing:border-box;border-radius:var(--border-radius-small);padding:8px 15px;font-size:14px;overflow:hidden;display:flex;width:100%;text-align:left;align-items:center;line-height:1.5715}.arco-react-alert-with-title{padding:15px}.arco-react-alert-with-title{align-items:flex-start}.arco-react-alert-info{border:1px solid transparent;background-color:var(--color-primary-light-1)}.arco-react-alert-success{border:1px solid transparent;background-color:var(--color-success-light-1)}.arco-react-alert-warning{border:1px solid transparent;background-color:var(--color-warning-light-1)}.arco-react-alert-error{border:1px solid transparent;background-color:var(--color-danger-light-1)}.arco-react-alert-banner{border:none;border-radius:0}.arco-react-alert-content-wrapper{position:relative;flex:1}.arco-react-alert-title{font-size:16px;font-weight:500;line-height:1.5;margin-bottom:4px}.arco-react-alert-info .arco-react-alert-title{color:var(--color-text-1)}.arco-react-alert-info .arco-react-alert-content{color:var(--color-text-1)}.arco-react-alert-info.arco-react-alert-with-title .arco-react-alert-content{color:var(--color-text-2)}.arco-react-alert-success .arco-react-alert-title{color:var(--color-text-1)}.arco-react-alert-success .arco-react-alert-content{color:var(--color-text-1)}.arco-react-alert-success.arco-react-alert-with-title .arco-react-alert-content{color:var(--color-text-2)}.arco-react-alert-warning .arco-react-alert-title{color:var(--color-text-1)}.arco-react-alert-warning .arco-react-alert-content{color:var(--color-text-1)}.arco-react-alert-warning.arco-react-alert-with-title .arco-react-alert-content{color:var(--color-text-2)}.arco-react-alert-error .arco-react-alert-title{color:var(--color-text-1)}.arco-react-alert-error .arco-react-alert-content{color:var(--color-text-1)}.arco-react-alert-error.arco-react-alert-with-title .arco-react-alert-content{color:var(--color-text-2)}.arco-react-alert-icon-wrapper{margin-right:8px;height:22.001px;display:flex;align-items:center}.arco-react-alert-icon-wrapper svg{font-size:16px}.arco-react-alert-with-title .arco-react-alert-icon-wrapper{height:24px}.arco-react-alert-with-title .arco-react-alert-icon-wrapper svg{font-size:18px}.arco-react-alert-info .arco-react-alert-icon-wrapper svg{color:rgb(var(--primary-6))}.arco-react-alert-success .arco-react-alert-icon-wrapper svg{color:rgb(var(--success-6))}.arco-react-alert-warning .arco-react-alert-icon-wrapper svg{color:rgb(var(--warning-6))}.arco-react-alert-error .arco-react-alert-icon-wrapper svg{color:rgb(var(--danger-6))}.arco-react-alert-close-btn{box-sizing:border-box;padding:0;border:none;outline:none;font-size:12px;color:var(--color-text-2);background-color:transparent;cursor:pointer;transition:color .1s cubic-bezier(0,0,1,1);margin-left:8px;top:4px;right:0}.arco-react-alert-close-btn:hover{color:var(--color-text-1)}.arco-react-alert-action+.arco-react-alert-close-btn{margin-left:8px}.arco-react-alert-action{margin-left:8px}.arco-react-alert-with-title .arco-react-alert-close-btn{margin-top:0;margin-right:0}.arco-react-anchor{position:relative;width:150px;overflow:auto}.arco-react-anchor-line-slider{position:absolute;height:12px;width:2px;margin-top:9.0005px;background-color:rgb(var(--primary-6));left:0;top:0;transition:top .2s cubic-bezier(.34,.69,.1,1);z-index:1}.arco-react-anchor-list{margin-left:6px;position:relative}.arco-react-anchor-list:before{content:\"\";position:absolute;height:100%;background-color:var(--color-fill-3);width:2px;left:-6px}.arco-react-anchor-link{margin-bottom:2px}.arco-react-anchor-link-title{color:var(--color-text-2);line-height:1.5715;font-size:14px;margin-bottom:2px;padding:4px 8px;text-decoration:none;cursor:pointer;text-overflow:ellipsis;overflow:hidden;display:block;white-space:nowrap;border-radius:var(--border-radius-small)}.arco-react-anchor-link-title:hover{background-color:var(--color-fill-2);color:var(--color-text-1);font-weight:500}.arco-react-anchor-link-active>.arco-react-anchor-link-title{transition:all .1s cubic-bezier(0,0,1,1);color:var(--color-text-1);font-weight:500}.arco-react-anchor-link .arco-react-anchor-link{margin-left:16px}.arco-react-anchor-lineless .arco-react-anchor-list{margin-left:0}.arco-react-anchor-lineless .arco-react-anchor-list:before{display:none}.arco-react-anchor-lineless .arco-react-anchor-link-active>.arco-react-anchor-link-title{background-color:var(--color-fill-2);color:rgb(var(--primary-6));font-weight:500}.arco-react-autocomplete-popup .arco-react-select-popup{border:1px solid var(--color-fill-3);border-radius:var(--border-radius-medium);background-color:var(--color-bg-popup);box-shadow:0 4px 10px #0000001a}.arco-react-autocomplete-popup .arco-react-select-popup .arco-react-select-popup-inner{padding:4px 0;max-height:200px}.arco-react-autocomplete-popup .arco-react-select-popup .arco-react-select-option{height:36px;padding:0 12px;font-size:14px;line-height:36px;color:var(--color-text-1);background-color:var(--color-bg-popup)}.arco-react-autocomplete-popup .arco-react-select-popup .arco-react-select-option-selected{color:var(--color-text-1);background-color:var(--color-bg-popup)}.arco-react-autocomplete-popup .arco-react-select-popup .arco-react-select-option-hover{color:var(--color-text-1);background-color:var(--color-fill-2)}.arco-react-autocomplete-popup .arco-react-select-popup .arco-react-select-option-disabled{color:var(--color-text-4);background-color:var(--color-bg-popup)}.arco-react-autocomplete-popup .arco-react-select-popup .arco-react-select-option-selected{font-weight:500}.arco-react-avatar{display:inline-flex;align-items:center;position:relative;background-color:var(--color-fill-4);white-space:nowrap;color:var(--color-white);box-sizing:border-box;vertical-align:middle;width:40px;height:40px;font-size:20px}.arco-react-avatar-circle{border-radius:var(--border-radius-circle)}.arco-react-avatar-circle .arco-react-avatar-image{border-radius:var(--border-radius-circle);overflow:hidden}.arco-react-avatar-square{border-radius:var(--border-radius-medium)}.arco-react-avatar-square .arco-react-avatar-image{border-radius:var(--border-radius-medium);overflow:hidden}.arco-react-avatar-text{position:absolute;left:50%;transform-origin:0 center;transform:translate(-50%);font-weight:500;line-height:1}.arco-react-avatar-image{display:inline-block;width:100%;height:100%}.arco-react-avatar-image img,.arco-react-avatar-image picture{width:100%;height:100%}.arco-react-avatar-trigger-icon-button{position:absolute;display:inline-flex;align-items:center;justify-content:center;bottom:-4px;right:-4px;color:var(--color-fill-4);font-size:12px;border-radius:var(--border-radius-circle);width:20px;height:20px;line-height:20px;background-color:var(--color-neutral-2);transition:background-color .1s cubic-bezier(0,0,1,1);z-index:1}.arco-react-avatar-trigger-icon-mask{position:absolute;display:flex;opacity:0;z-index:0;align-items:center;justify-content:center;width:100%;height:100%;top:0;left:0;font-size:16px;transition:all .1s cubic-bezier(0,0,1,1);border-radius:var(--border-radius-medium);background-color:#1d212999;color:var(--color-white)}.arco-react-avatar-circle .arco-react-avatar-trigger-icon-mask{border-radius:var(--border-radius-circle)}.arco-react-avatar-with-trigger-icon{cursor:pointer}.arco-react-avatar-with-trigger-icon:hover .arco-react-avatar-trigger-icon-mask{z-index:2;opacity:1}.arco-react-avatar-with-trigger-icon:hover .arco-react-avatar-trigger-icon-button{background-color:var(--color-neutral-3)}.arco-react-avatar-group{display:inline-block;line-height:0}.arco-react-avatar-group-max-count-avatar{cursor:default;color:var(--color-white);font-size:20px}.arco-react-avatar-group .arco-react-avatar{border:2px solid var(--color-bg-2)}.arco-react-avatar-group .arco-react-avatar:not(:first-child){margin-left:-10px}.arco-react-avatar-group-popover .arco-react-avatar:not(:first-child){margin-left:4px}.arco-react-backtop{position:fixed;bottom:24px;right:24px;z-index:100;cursor:pointer}.arco-react-backtop-button{width:40px;height:40px;font-size:12px;text-align:center;outline:none;background-color:rgb(var(--primary-6));border-radius:var(--border-radius-circle);color:var(--color-white);transition:all .2s cubic-bezier(0,0,1,1);cursor:pointer;border:none}.arco-react-backtop-button:hover{background-color:rgb(var(--primary-5))}.arco-react-backtop-button svg{font-size:14px}.arco-react-badge{display:inline-block;position:relative;line-height:1}.arco-react-badge-number,.arco-react-badge-dot,.arco-react-badge-text,.arco-react-badge-custom-dot{position:absolute;z-index:2;transform:translate(50%,-50%);transform-origin:100% 0%;top:2px;right:2px;border-radius:20px;box-sizing:border-box;text-align:center;overflow:hidden}.arco-react-badge-custom-dot{background-color:var(--color-bg-2)}.arco-react-badge-number,.arco-react-badge-text{height:20px;min-width:20px;line-height:20px;font-weight:500;padding:0 6px;font-size:12px;color:var(--color-white);background-color:rgb(var(--danger-6));box-shadow:0 0 0 2px var(--color-bg-2)}.arco-react-badge-dot{width:6px;height:6px;background-color:rgb(var(--danger-6));border-radius:var(--border-radius-circle);box-shadow:0 0 0 2px var(--color-bg-2)}.arco-react-badge-no-children .arco-react-badge-dot,.arco-react-badge-no-children .arco-react-badge-number,.arco-react-badge-no-children .arco-react-badge-text{position:relative;display:inline-block;top:unset;right:unset;transform:none}.arco-react-badge-status-wrapper{display:inline-flex;align-items:center}.arco-react-badge-status-dot{display:inline-block;width:6px;height:6px;border-radius:var(--border-radius-circle)}.arco-react-badge-status-default{background-color:var(--color-fill-4)}.arco-react-badge-status-processing{background-color:rgb(var(--primary-6))}.arco-react-badge-status-success{background-color:rgb(var(--success-6))}.arco-react-badge-status-warning{background-color:rgb(var(--warning-6))}.arco-react-badge-status-error{background-color:rgb(var(--danger-6))}.arco-react-badge-color-red{background-color:rgb(var(--danger-6))}.arco-react-badge-color-orangered{background-color:#f77234}.arco-react-badge-color-orange{background-color:rgb(var(--orange-6))}.arco-react-badge-color-gold{background-color:rgb(var(--gold-6))}.arco-react-badge-color-lime{background-color:rgb(var(--lime-6))}.arco-react-badge-color-green{background-color:rgb(var(--success-6))}.arco-react-badge-color-cyan{background-color:rgb(var(--cyan-6))}.arco-react-badge-color-arcoblue{background-color:rgb(var(--primary-6))}.arco-react-badge-color-purple{background-color:rgb(var(--purple-6))}.arco-react-badge-color-pinkpurple{background-color:rgb(var(--pinkpurple-6))}.arco-react-badge-color-magenta{background-color:rgb(var(--magenta-6))}.arco-react-badge-color-gray{background-color:rgb(var(--gray-4))}.arco-react-badge .arco-react-badge-status-text{color:var(--color-text-1);margin-left:8px;font-size:12px;line-height:1.5715}.arco-react-badge-number-text{display:inline-block;animation:arco-react-badge-scale .5s cubic-bezier(.3,1.3,.3,1)}@keyframes arco-react-badge-scale{0%{transform:scale(0)}to{transform:scale(1)}}.badge-zoom-enter,.badge-zoom-appear{transform-origin:center;transform:translate(50%,-50%) scale(.2)}.badge-zoom-enter-active,.badge-zoom-appear-active{opacity:1;transform-origin:center;transform:translate(50%,-50%) scale(1);transition:opacity .3s cubic-bezier(.3,1.3,.3,1),transform .3s cubic-bezier(.3,1.3,.3,1)}.badge-zoom-exit{opacity:1;transform-origin:center;transform:translate(50%,-50%) scale(1)}.badge-zoom-exit-active{opacity:0;transform-origin:center;transform:translate(50%,-50%) scale(.2);transition:opacity .3s cubic-bezier(.3,1.3,.3,1),transform .3s cubic-bezier(.3,1.3,.3,1)}.arco-react-breadcrumb{display:inline-block;font-size:14px;color:var(--color-text-2)}.arco-react-breadcrumb-icon{color:var(--color-text-2)}.arco-react-breadcrumb-item{display:inline-flex;align-items:center;padding:0 4px;vertical-align:middle;line-height:24px;color:var(--color-text-2)}.arco-react-breadcrumb-item>.arco-react-icon{color:var(--color-text-3)}.arco-react-breadcrumb-item a{display:inline-block;border-radius:var(--border-radius-small);padding:0 4px;margin:0 -4px;text-decoration:none;color:var(--color-text-2);background-color:transparent}.arco-react-breadcrumb-item a:hover{background-color:var(--color-fill-2);color:rgb(var(--link-6))}.arco-react-breadcrumb-item:last-child{color:var(--color-text-1);font-weight:500}.arco-react-breadcrumb-item-ellipses{display:inline-block;position:relative;top:-3px;padding:0 4px;color:var(--color-text-2)}.arco-react-breadcrumb-item-separator{display:inline-block;margin:0 4px;vertical-align:middle;line-height:24px;color:var(--color-text-4)}.arco-react-breadcrumb-item-with-dropdown{cursor:pointer}.arco-react-breadcrumb-item-dropdown-icon{font-size:12px;margin-left:4px;color:var(--color-text-2)}.arco-react-breadcrumb-item-dropdown-icon-active svg{transform:rotate(180deg)}.arco-react-btn{display:inline-block;position:relative;outline:none;font-weight:400;appearance:none;user-select:none;cursor:pointer;white-space:nowrap;transition:all .1s cubic-bezier(0,0,1,1);box-sizing:border-box;line-height:1.5715}.arco-react-btn>a:only-child{color:currentColor}.arco-react-btn:active{transition:none}.arco-react-btn:empty{display:inline-block;vertical-align:bottom}.arco-react-btn-long{display:block;width:100%}.arco-react-btn-link{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}.arco-react-btn-link:not([href]){color:var(--color-text-4)}.arco-react-btn-link:hover{text-decoration:none}.arco-react-btn-loading{cursor:default;position:relative}.arco-react-btn-loading:before{content:\"\";position:absolute;top:-1px;right:-1px;bottom:-1px;left:-1px;z-index:1;display:block;background:#fff;border-radius:inherit;opacity:.4;transition:opacity .1s cubic-bezier(0,0,1,1);pointer-events:none}.arco-react-btn-loading-fixed-width{transition:none}.arco-react-btn-two-chinese-chars>*:not(svg){letter-spacing:.3em;margin-right:-.3em}a.arco-react-btn-icon-only{display:inline-flex;align-items:center;justify-content:center;vertical-align:top}.arco-react-btn-outline:not(.arco-react-btn-disabled){background-color:transparent;color:rgb(var(--primary-6));border:1px solid rgb(var(--primary-6))}.arco-react-btn-outline:not(.arco-react-btn-disabled):not(.arco-react-btn-loading):hover{border-color:rgb(var(--primary-5));color:rgb(var(--primary-5));background-color:transparent}.arco-react-btn-outline:not(.arco-react-btn-disabled):not(.arco-react-btn-loading):active{border-color:rgb(var(--primary-7));color:rgb(var(--primary-7));background-color:transparent}.arco-react-btn-outline.arco-react-btn-disabled{background-color:transparent;color:var(--color-primary-light-3);border:1px solid var(--color-primary-light-3);cursor:not-allowed}.arco-react-btn-outline.arco-react-btn-status-warning:not(.arco-react-btn-disabled){background-color:transparent;color:rgb(var(--warning-6));border-color:rgb(var(--warning-6))}.arco-react-btn-outline.arco-react-btn-status-warning:not(.arco-react-btn-disabled):not(.arco-react-btn-loading):hover{border-color:rgb(var(--warning-5));color:rgb(var(--warning-5));background-color:transparent}.arco-react-btn-outline.arco-react-btn-status-warning:not(.arco-react-btn-disabled):not(.arco-react-btn-loading):active{border-color:rgb(var(--warning-7));color:rgb(var(--warning-7));background-color:transparent}.arco-react-btn-outline.arco-react-btn-status-warning.arco-react-btn-disabled{color:var(--color-warning-light-3);background-color:transparent;border:1px solid var(--color-warning-light-3)}.arco-react-btn-outline.arco-react-btn-status-danger:not(.arco-react-btn-disabled){background-color:transparent;color:rgb(var(--danger-6));border-color:rgb(var(--danger-6))}.arco-react-btn-outline.arco-react-btn-status-danger:not(.arco-react-btn-disabled):not(.arco-react-btn-loading):hover{border-color:rgb(var(--danger-5));color:rgb(var(--danger-5));background-color:transparent}.arco-react-btn-outline.arco-react-btn-status-danger:not(.arco-react-btn-disabled):not(.arco-react-btn-loading):active{border-color:rgb(var(--danger-7));color:rgb(var(--danger-7));background-color:transparent}.arco-react-btn-outline.arco-react-btn-status-danger.arco-react-btn-disabled{color:var(--color-danger-light-3);background-color:transparent;border:1px solid var(--color-danger-light-3)}.arco-react-btn-outline.arco-react-btn-status-success:not(.arco-react-btn-disabled){background-color:transparent;color:rgb(var(--success-6));border-color:rgb(var(--success-6))}.arco-react-btn-outline.arco-react-btn-status-success:not(.arco-react-btn-disabled):not(.arco-react-btn-loading):hover{border-color:rgb(var(--success-5));color:rgb(var(--success-5));background-color:transparent}.arco-react-btn-outline.arco-react-btn-status-success:not(.arco-react-btn-disabled):not(.arco-react-btn-loading):active{border-color:rgb(var(--success-7));color:rgb(var(--success-7));background-color:transparent}.arco-react-btn-outline.arco-react-btn-status-success.arco-react-btn-disabled{color:var(--color-success-light-3);background-color:transparent;border:1px solid var(--color-success-light-3)}.arco-react-btn-primary:not(.arco-react-btn-disabled){background-color:rgb(var(--primary-6));color:#fff;border:1px solid transparent}.arco-react-btn-primary:not(.arco-react-btn-disabled):not(.arco-react-btn-loading):hover{border-color:transparent;color:#fff;background-color:rgb(var(--primary-5))}.arco-react-btn-primary:not(.arco-react-btn-disabled):not(.arco-react-btn-loading):active{border-color:transparent;color:#fff;background-color:rgb(var(--primary-7))}.arco-react-btn-primary.arco-react-btn-disabled{background-color:var(--color-primary-light-3);color:#fff;border:1px solid transparent;cursor:not-allowed}.arco-react-btn-primary.arco-react-btn-status-warning:not(.arco-react-btn-disabled){background-color:rgb(var(--warning-6));color:#fff;border-color:transparent}.arco-react-btn-primary.arco-react-btn-status-warning:not(.arco-react-btn-disabled):not(.arco-react-btn-loading):hover{border-color:transparent;color:#fff;background-color:rgb(var(--warning-5))}.arco-react-btn-primary.arco-react-btn-status-warning:not(.arco-react-btn-disabled):not(.arco-react-btn-loading):active{border-color:transparent;color:#fff;background-color:rgb(var(--warning-7))}.arco-react-btn-primary.arco-react-btn-status-warning.arco-react-btn-disabled{color:#fff;background-color:var(--color-warning-light-3);border:1px solid transparent}.arco-react-btn-primary.arco-react-btn-status-danger:not(.arco-react-btn-disabled){background-color:rgb(var(--danger-6));color:#fff;border-color:transparent}.arco-react-btn-primary.arco-react-btn-status-danger:not(.arco-react-btn-disabled):not(.arco-react-btn-loading):hover{border-color:transparent;color:#fff;background-color:rgb(var(--danger-5))}.arco-react-btn-primary.arco-react-btn-status-danger:not(.arco-react-btn-disabled):not(.arco-react-btn-loading):active{border-color:transparent;color:#fff;background-color:rgb(var(--danger-7))}.arco-react-btn-primary.arco-react-btn-status-danger.arco-react-btn-disabled{color:#fff;background-color:var(--color-danger-light-3);border:1px solid transparent}.arco-react-btn-primary.arco-react-btn-status-success:not(.arco-react-btn-disabled){background-color:rgb(var(--success-6));color:#fff;border-color:transparent}.arco-react-btn-primary.arco-react-btn-status-success:not(.arco-react-btn-disabled):not(.arco-react-btn-loading):hover{border-color:transparent;color:#fff;background-color:rgb(var(--success-5))}.arco-react-btn-primary.arco-react-btn-status-success:not(.arco-react-btn-disabled):not(.arco-react-btn-loading):active{border-color:transparent;color:#fff;background-color:rgb(var(--success-7))}.arco-react-btn-primary.arco-react-btn-status-success.arco-react-btn-disabled{color:#fff;background-color:var(--color-success-light-3);border:1px solid transparent}.arco-react-btn-secondary:not(.arco-react-btn-disabled){background-color:var(--color-secondary);color:var(--color-text-2);border:1px solid transparent}.arco-react-btn-secondary:not(.arco-react-btn-disabled):not(.arco-react-btn-loading):hover{border-color:transparent;color:var(--color-text-2);background-color:var(--color-secondary-hover)}.arco-react-btn-secondary:not(.arco-react-btn-disabled):not(.arco-react-btn-loading):active{border-color:transparent;color:var(--color-text-2);background-color:var(--color-secondary-active)}.arco-react-btn-secondary.arco-react-btn-disabled{background-color:var(--color-secondary-disabled);color:var(--color-text-4);border:1px solid transparent;cursor:not-allowed}.arco-react-btn-secondary.arco-react-btn-status-warning:not(.arco-react-btn-disabled){background-color:var(--color-warning-light-1);color:rgb(var(--warning-6));border-color:transparent}.arco-react-btn-secondary.arco-react-btn-status-warning:not(.arco-react-btn-disabled):not(.arco-react-btn-loading):hover{border-color:transparent;color:rgb(var(--warning-6));background-color:var(--color-warning-light-2)}.arco-react-btn-secondary.arco-react-btn-status-warning:not(.arco-react-btn-disabled):not(.arco-react-btn-loading):active{border-color:transparent;color:rgb(var(--warning-6));background-color:var(--color-warning-light-3)}.arco-react-btn-secondary.arco-react-btn-status-warning.arco-react-btn-disabled{color:var(--color-warning-light-3);background-color:var(--color-warning-light-1);border:1px solid transparent}.arco-react-btn-secondary.arco-react-btn-status-danger:not(.arco-react-btn-disabled){background-color:var(--color-danger-light-1);color:rgb(var(--danger-6));border-color:transparent}.arco-react-btn-secondary.arco-react-btn-status-danger:not(.arco-react-btn-disabled):not(.arco-react-btn-loading):hover{border-color:transparent;color:rgb(var(--danger-6));background-color:var(--color-danger-light-2)}.arco-react-btn-secondary.arco-react-btn-status-danger:not(.arco-react-btn-disabled):not(.arco-react-btn-loading):active{border-color:transparent;color:rgb(var(--danger-6));background-color:var(--color-danger-light-3)}.arco-react-btn-secondary.arco-react-btn-status-danger.arco-react-btn-disabled{color:var(--color-danger-light-3);background-color:var(--color-danger-light-1);border:1px solid transparent}.arco-react-btn-secondary.arco-react-btn-status-success:not(.arco-react-btn-disabled){background-color:var(--color-success-light-1);color:rgb(var(--success-6));border-color:transparent}.arco-react-btn-secondary.arco-react-btn-status-success:not(.arco-react-btn-disabled):not(.arco-react-btn-loading):hover{border-color:transparent;color:rgb(var(--success-6));background-color:var(--color-success-light-2)}.arco-react-btn-secondary.arco-react-btn-status-success:not(.arco-react-btn-disabled):not(.arco-react-btn-loading):active{border-color:transparent;color:rgb(var(--success-6));background-color:var(--color-success-light-3)}.arco-react-btn-secondary.arco-react-btn-status-success.arco-react-btn-disabled{color:var(--color-success-light-3);background-color:var(--color-success-light-1);border:1px solid transparent}.arco-react-btn-dashed:not(.arco-react-btn-disabled){background-color:var(--color-fill-2);color:var(--color-text-2);border:1px dashed var(--color-neutral-3)}.arco-react-btn-dashed:not(.arco-react-btn-disabled):not(.arco-react-btn-loading):hover{border-color:var(--color-neutral-4);color:var(--color-text-2);background-color:var(--color-fill-3)}.arco-react-btn-dashed:not(.arco-react-btn-disabled):not(.arco-react-btn-loading):active{border-color:var(--color-neutral-5);color:var(--color-text-2);background-color:var(--color-fill-4)}.arco-react-btn-dashed.arco-react-btn-disabled{background-color:var(--color-fill-2);color:var(--color-text-4);border:1px dashed var(--color-neutral-3);cursor:not-allowed}.arco-react-btn-dashed.arco-react-btn-status-warning:not(.arco-react-btn-disabled){background-color:var(--color-warning-light-1);color:rgb(var(--warning-6));border-color:var(--color-warning-light-2)}.arco-react-btn-dashed.arco-react-btn-status-warning:not(.arco-react-btn-disabled):not(.arco-react-btn-loading):hover{border-color:var(--color-warning-light-3);color:rgb(var(--warning-6));background-color:var(--color-warning-light-2)}.arco-react-btn-dashed.arco-react-btn-status-warning:not(.arco-react-btn-disabled):not(.arco-react-btn-loading):active{border-color:var(--color-warning-light-4);color:rgb(var(--warning-6));background-color:var(--color-warning-light-3)}.arco-react-btn-dashed.arco-react-btn-status-warning.arco-react-btn-disabled{color:var(--color-warning-light-3);background-color:var(--color-warning-light-1);border:1px dashed var(--color-warning-light-2)}.arco-react-btn-dashed.arco-react-btn-status-danger:not(.arco-react-btn-disabled){background-color:var(--color-danger-light-1);color:rgb(var(--danger-6));border-color:var(--color-danger-light-2)}.arco-react-btn-dashed.arco-react-btn-status-danger:not(.arco-react-btn-disabled):not(.arco-react-btn-loading):hover{border-color:var(--color-danger-light-3);color:rgb(var(--danger-6));background-color:var(--color-danger-light-2)}.arco-react-btn-dashed.arco-react-btn-status-danger:not(.arco-react-btn-disabled):not(.arco-react-btn-loading):active{border-color:var(--color-danger-light-4);color:rgb(var(--danger-6));background-color:var(--color-danger-light-3)}.arco-react-btn-dashed.arco-react-btn-status-danger.arco-react-btn-disabled{color:var(--color-danger-light-3);background-color:var(--color-danger-light-1);border:1px dashed var(--color-danger-light-2)}.arco-react-btn-dashed.arco-react-btn-status-success:not(.arco-react-btn-disabled){background-color:var(--color-success-light-1);color:rgb(var(--success-6));border-color:var(--color-success-light-2)}.arco-react-btn-dashed.arco-react-btn-status-success:not(.arco-react-btn-disabled):not(.arco-react-btn-loading):hover{border-color:var(--color-success-light-3);color:rgb(var(--success-6));background-color:var(--color-success-light-2)}.arco-react-btn-dashed.arco-react-btn-status-success:not(.arco-react-btn-disabled):not(.arco-react-btn-loading):active{border-color:var(--color-success-light-4);color:rgb(var(--success-6));background-color:var(--color-success-light-3)}.arco-react-btn-dashed.arco-react-btn-status-success.arco-react-btn-disabled{color:var(--color-success-light-3);background-color:var(--color-success-light-1);border:1px dashed var(--color-success-light-2)}.arco-react-btn-text:not(.arco-react-btn-disabled){background-color:transparent;color:rgb(var(--primary-6));border:1px solid transparent}.arco-react-btn-text:not(.arco-react-btn-disabled):not(.arco-react-btn-loading):hover{border-color:transparent;color:rgb(var(--primary-6));background-color:var(--color-fill-2)}.arco-react-btn-text:not(.arco-react-btn-disabled):not(.arco-react-btn-loading):active{border-color:transparent;color:rgb(var(--primary-6));background-color:var(--color-fill-3)}.arco-react-btn-text.arco-react-btn-disabled{background-color:transparent;color:var(--color-primary-light-3);border:1px solid transparent;cursor:not-allowed}.arco-react-btn-text.arco-react-btn-status-warning:not(.arco-react-btn-disabled){background-color:transparent;color:rgb(var(--warning-6));border-color:transparent}.arco-react-btn-text.arco-react-btn-status-warning:not(.arco-react-btn-disabled):not(.arco-react-btn-loading):hover{border-color:transparent;color:rgb(var(--warning-6));background-color:var(--color-fill-2)}.arco-react-btn-text.arco-react-btn-status-warning:not(.arco-react-btn-disabled):not(.arco-react-btn-loading):active{border-color:transparent;color:rgb(var(--warning-6));background-color:var(--color-fill-3)}.arco-react-btn-text.arco-react-btn-status-warning.arco-react-btn-disabled{color:var(--color-warning-light-3);background-color:transparent;border:1px solid transparent}.arco-react-btn-text.arco-react-btn-status-danger:not(.arco-react-btn-disabled){background-color:transparent;color:rgb(var(--danger-6));border-color:transparent}.arco-react-btn-text.arco-react-btn-status-danger:not(.arco-react-btn-disabled):not(.arco-react-btn-loading):hover{border-color:transparent;color:rgb(var(--danger-6));background-color:var(--color-fill-2)}.arco-react-btn-text.arco-react-btn-status-danger:not(.arco-react-btn-disabled):not(.arco-react-btn-loading):active{border-color:transparent;color:rgb(var(--danger-6));background-color:var(--color-fill-3)}.arco-react-btn-text.arco-react-btn-status-danger.arco-react-btn-disabled{color:var(--color-danger-light-3);background-color:transparent;border:1px solid transparent}.arco-react-btn-text.arco-react-btn-status-success:not(.arco-react-btn-disabled){background-color:transparent;color:rgb(var(--success-6));border-color:transparent}.arco-react-btn-text.arco-react-btn-status-success:not(.arco-react-btn-disabled):not(.arco-react-btn-loading):hover{border-color:transparent;color:rgb(var(--success-6));background-color:var(--color-fill-2)}.arco-react-btn-text.arco-react-btn-status-success:not(.arco-react-btn-disabled):not(.arco-react-btn-loading):active{border-color:transparent;color:rgb(var(--success-6));background-color:var(--color-fill-3)}.arco-react-btn-text.arco-react-btn-status-success.arco-react-btn-disabled{color:var(--color-success-light-3);background-color:transparent;border:1px solid transparent}.arco-react-btn-size-mini{padding:0 11px;font-size:12px;height:24px;border-radius:var(--border-radius-small)}.arco-react-btn-size-mini>svg+span,.arco-react-btn-size-mini>span+svg{margin-left:4px}.arco-react-btn-size-mini svg{vertical-align:-2px}.arco-react-btn-size-mini.arco-react-btn-loading-fixed-width.arco-react-btn-loading{padding-left:3px;padding-right:3px}.arco-react-btn-size-mini.arco-react-btn-icon-only{width:24px;height:24px;padding:0}.arco-react-btn-size-mini.arco-react-btn-shape-circle{width:24px;height:24px;padding:0;text-align:center;border-radius:var(--border-radius-circle)}.arco-react-btn-size-mini.arco-react-btn-shape-round{border-radius:12px}.arco-react-btn-size-small{padding:0 15px;font-size:14px;height:28px;border-radius:var(--border-radius-small)}.arco-react-btn-size-small>svg+span,.arco-react-btn-size-small>span+svg{margin-left:6px}.arco-react-btn-size-small svg{vertical-align:-2px}.arco-react-btn-size-small.arco-react-btn-loading-fixed-width.arco-react-btn-loading{padding-left:5px;padding-right:5px}.arco-react-btn-size-small.arco-react-btn-icon-only{width:28px;height:28px;padding:0}.arco-react-btn-size-small.arco-react-btn-shape-circle{width:28px;height:28px;padding:0;text-align:center;border-radius:var(--border-radius-circle)}.arco-react-btn-size-small.arco-react-btn-shape-round{border-radius:14px}.arco-react-btn-size-default{padding:0 15px;font-size:14px;height:32px;border-radius:var(--border-radius-small)}.arco-react-btn-size-default>svg+span,.arco-react-btn-size-default>span+svg{margin-left:8px}.arco-react-btn-size-default svg{vertical-align:-2px}.arco-react-btn-size-default.arco-react-btn-loading-fixed-width.arco-react-btn-loading{padding-left:4px;padding-right:4px}.arco-react-btn-size-default.arco-react-btn-icon-only{width:32px;height:32px;padding:0}.arco-react-btn-size-default.arco-react-btn-shape-circle{width:32px;height:32px;padding:0;text-align:center;border-radius:var(--border-radius-circle)}.arco-react-btn-size-default.arco-react-btn-shape-round{border-radius:16px}.arco-react-btn-size-large{padding:0 19px;font-size:14px;height:36px;border-radius:var(--border-radius-small)}.arco-react-btn-size-large>svg+span,.arco-react-btn-size-large>span+svg{margin-left:8px}.arco-react-btn-size-large svg{vertical-align:-2px}.arco-react-btn-size-large.arco-react-btn-loading-fixed-width.arco-react-btn-loading{padding-left:8px;padding-right:8px}.arco-react-btn-size-large.arco-react-btn-icon-only{width:36px;height:36px;padding:0}.arco-react-btn-size-large.arco-react-btn-shape-circle{width:36px;height:36px;padding:0;text-align:center;border-radius:var(--border-radius-circle)}.arco-react-btn-size-large.arco-react-btn-shape-round{border-radius:18px}.arco-react-btn-group{display:inline-block}.arco-react-btn-group .arco-react-btn-outline:not(:first-child),.arco-react-btn-group .arco-react-btn-dashed:not(:first-child){margin-left:-1px}.arco-react-btn-group .arco-react-btn-primary:not(:last-child){border-right:1px solid rgb(var(--primary-5))}.arco-react-btn-group .arco-react-btn-secondary:not(:last-child){border-right:1px solid var(--color-secondary-hover)}.arco-react-btn-group .arco-react-btn-status-warning:not(:last-child){border-right:1px solid rgb(var(--warning-5))}.arco-react-btn-group .arco-react-btn-status-danger:not(:last-child){border-right:1px solid rgb(var(--danger-5))}.arco-react-btn-group .arco-react-btn-status-success:not(:last-child){border-right:1px solid rgb(var(--success-5))}.arco-react-btn-group .arco-react-btn-outline:hover,.arco-react-btn-group .arco-react-btn-dashed:hover,.arco-react-btn-group .arco-react-btn-outline:active,.arco-react-btn-group .arco-react-btn-dashed:active{z-index:2}.arco-react-btn-group .arco-react-btn:first-child{border-top-right-radius:0;border-bottom-right-radius:0}.arco-react-btn-group .arco-react-btn:last-child{border-top-left-radius:0;border-bottom-left-radius:0}.arco-react-btn-group .arco-react-btn:not(:first-child):not(:last-child){border-radius:0}#react-root[arco-theme=dark] .arco-react-btn-primary.arco-react-btn-disabled{color:#ffffff4d}.arco-react-calendar{box-sizing:border-box;border:1px solid var(--color-neutral-3)}.arco-react-calendar-header{display:flex;padding:24px}.arco-react-calendar-header-left{display:flex;flex:1;align-items:center;position:relative;height:28px;line-height:28px}.arco-react-calendar-header-right{height:28px;position:relative}.arco-react-calendar-header-value{font-size:20px;font-weight:500;color:var(--color-text-1)}.arco-react-calendar-header-icon{width:28px;height:28px;line-height:28px;border-radius:50%;text-align:center;font-size:12px;transition:all .1s cubic-bezier(0,0,1,1);user-select:none;margin-right:12px;color:var(--color-text-2);background-color:var(--color-bg-5)}.arco-react-calendar-header-icon:not(:first-child){margin-left:12px;margin-right:32px}.arco-react-calendar-header-icon:not(.arco-react-calendar-header-icon-hidden){cursor:pointer}.arco-react-calendar-header-icon:not(.arco-react-calendar-header-icon-hidden):hover{background-color:var(--color-fill-3)}.arco-react-calendar .arco-react-calendar-header-value-year{width:100px;margin-right:8px}.arco-react-calendar .arco-react-calendar-header-value-month{width:76px;margin-right:32px}.arco-react-calendar-month{width:100%}.arco-react-calendar-month-row{height:100px;display:flex}.arco-react-calendar-month-row .arco-react-calendar-cell{flex:1;border-bottom:1px solid var(--color-neutral-3);overflow:hidden}.arco-react-calendar-month-row:last-child .arco-react-calendar-cell{border-bottom:unset}.arco-react-calendar-month-cell-body{box-sizing:border-box}.arco-react-calendar-mode-month:not(.arco-react-calendar-panel) .arco-react-calendar-cell:not(:last-child){border-right:1px solid var(--color-neutral-3)}.arco-react-calendar-week-list{display:flex;padding:0;width:100%;box-sizing:border-box;border-bottom:1px solid var(--color-neutral-3)}.arco-react-calendar-week-list-item{padding:20px 16px;text-align:left;color:#7d7d7f;flex:1}.arco-react-calendar-cell .arco-react-calendar-date{height:100%;width:100%;padding:10px;box-sizing:border-box;cursor:pointer}.arco-react-calendar-cell .arco-react-calendar-date-circle{width:28px;height:28px;line-height:28px;border-radius:50%;text-align:center}.arco-react-calendar-date-content{height:70px;overflow-y:auto}.arco-react-calendar-cell-today .arco-react-calendar-date-circle{border:1px solid rgb(var(--primary-6))}.arco-react-calendar-date-value{font-size:16px;font-weight:500;color:var(--color-text-4)}.arco-react-calendar-cell-in-view .arco-react-calendar-date-value{color:var(--color-text-1)}.arco-react-calendar-mode-month .arco-react-calendar-cell-selected .arco-react-calendar-date-circle{border:1px solid rgb(var(--primary-6));background-color:rgb(var(--primary-6));color:#fff}.arco-react-calendar-mode-year:not(.arco-react-calendar-panel){min-width:820px}.arco-react-calendar-mode-year .arco-react-calendar-header{border-bottom:1px solid var(--color-neutral-3)}.arco-react-calendar-mode-year .arco-react-calendar-body{padding:12px}.arco-react-calendar-mode-year .arco-react-calendar-year-row{display:flex}.arco-react-calendar-year-row>.arco-react-calendar-cell{flex:1;padding:20px 8px}.arco-react-calendar-year-row>.arco-react-calendar-cell:not(:last-child){border-right:1px solid var(--color-neutral-3)}.arco-react-calendar-year-row:not(:last-child)>.arco-react-calendar-cell{border-bottom:1px solid var(--color-neutral-3)}.arco-react-calendar-month-with-days .arco-react-calendar-month-row{height:26px}.arco-react-calendar-month-with-days .arco-react-calendar-cell{border-bottom:0}.arco-react-calendar-month-with-days .arco-react-calendar-month-cell-body{padding:0}.arco-react-calendar-month-with-days .arco-react-calendar-month-title{padding:10px 6px;font-size:16px;font-weight:500;color:var(--color-text-1)}.arco-react-calendar-month-cell{font-size:12px;width:100%}.arco-react-calendar-month-cell .arco-react-calendar-week-list{border-bottom:unset;padding:0}.arco-react-calendar-month-cell .arco-react-calendar-week-list-item{padding:6px;text-align:center;color:#7d7d7f}.arco-react-calendar-month-cell .arco-react-calendar-cell{text-align:center}.arco-react-calendar-month-cell .arco-react-calendar-date{padding:2px}.arco-react-calendar-month-cell .arco-react-calendar-date-value{font-size:14px}.arco-react-calendar-month-cell .arco-react-calendar-date-circle{display:inline-block;width:22px;height:22px;line-height:22px;border-radius:50%;text-align:center}.arco-react-calendar-panel{border:1px solid var(--color-neutral-3);background-color:var(--color-bg-5)}.arco-react-calendar-panel .arco-react-calendar-header{padding:8px 16px;border-bottom:1px solid var(--color-neutral-3)}.arco-react-calendar-panel .arco-react-calendar-header-value{font-size:14px;line-height:24px;flex:1;text-align:center}.arco-react-calendar-panel .arco-react-calendar-header-icon{width:24px;height:24px;line-height:24px;margin-left:2px;margin-right:2px}.arco-react-calendar-panel .arco-react-calendar-body{padding:14px 16px}.arco-react-calendar-panel .arco-react-calendar-month-cell-body{padding:0}.arco-react-calendar-panel .arco-react-calendar-month-row{height:unset}.arco-react-calendar-panel .arco-react-calendar-week-list{padding:0;border-bottom:unset}.arco-react-calendar-panel .arco-react-calendar-week-list-item{padding:0;text-align:center;font-weight:400;height:32px;line-height:32px}.arco-react-calendar-panel .arco-react-calendar-cell,.arco-react-calendar-panel .arco-react-calendar-year-row .arco-react-calendar-cell{text-align:center;box-sizing:border-box;padding:2px 0;border-bottom:0;border-right:0}.arco-react-calendar-panel .arco-react-calendar-cell .arco-react-calendar-date{padding:4px 0;display:flex;justify-content:center}.arco-react-calendar-panel .arco-react-calendar-cell .arco-react-calendar-date-value{font-size:14px;min-width:24px;height:24px;line-height:24px;cursor:pointer}.arco-react-calendar-panel.arco-react-calendar-mode-year .arco-react-calendar-cell{padding:4px 0}.arco-react-calendar-panel.arco-react-calendar-mode-year .arco-react-calendar-cell .arco-react-calendar-date{padding:4px}.arco-react-calendar-panel.arco-react-calendar-mode-year .arco-react-calendar-cell .arco-react-calendar-date-value{border-radius:12px;width:100%}.arco-react-calendar-panel .arco-react-calendar-cell-selected .arco-react-calendar-date-value{color:var(--color-white);background-color:rgb(var(--primary-6));border-radius:50%}.arco-react-calendar-panel .arco-react-calendar-cell:not(.arco-react-calendar-cell-selected):not(.arco-react-calendar-cell-range-start):not(.arco-react-calendar-cell-range-end):not(.arco-react-calendar-cell-hover-range-start):not(.arco-react-calendar-cell-hover-range-end):not(.arco-react-calendar-cell-disabled):not(.arco-react-calendar-cell-week) .arco-react-calendar-date-value:hover{background-color:var(--color-primary-light-1);border-radius:50%;color:rgb(var(--primary-6))}.arco-react-calendar-panel.arco-react-calendar-mode-year .arco-react-calendar-cell:not(.arco-react-calendar-cell-selected):not(.arco-react-calendar-cell-range-start):not(.arco-react-calendar-cell-range-end):not(.arco-react-calendar-cell-hover-range-start):not(.arco-react-calendar-cell-hover-range-end):not(.arco-react-calendar-cell-disabled) .arco-react-calendar-date-value:hover{border-radius:12px}.arco-react-calendar-panel .arco-react-calendar-cell-today{position:relative}.arco-react-calendar-panel .arco-react-calendar-cell-today:after{content:\"\";display:block;position:absolute;bottom:0;left:50%;margin-left:-2px;width:4px;height:4px;border-radius:50%;background-color:rgb(var(--primary-6))}.arco-react-calendar-cell-in-range .arco-react-calendar-date{background-color:var(--color-primary-light-1)}.arco-react-calendar-cell-range-start .arco-react-calendar-date{border-radius:16px 0 0 16px}.arco-react-calendar-cell-range-end .arco-react-calendar-date{border-radius:0 16px 16px 0}.arco-react-calendar-cell-in-range-near-hover .arco-react-calendar-date{border-radius:0}.arco-react-calendar-cell-range-start .arco-react-calendar-date-value,.arco-react-calendar-cell-range-end .arco-react-calendar-date-value{background-color:rgb(var(--primary-6));border-radius:50%;color:var(--color-white)}.arco-react-calendar-cell-hover-in-range .arco-react-calendar-date{background-color:var(--color-primary-light-1)}.arco-react-calendar-cell-hover-range-start .arco-react-calendar-date{border-radius:16px 0 0 16px}.arco-react-calendar-cell-hover-range-end .arco-react-calendar-date{border-radius:0 16px 16px 0}.arco-react-calendar-cell-hover-range-start .arco-react-calendar-date-value,.arco-react-calendar-cell-hover-range-end .arco-react-calendar-date-value{background-color:var(--color-primary-light-2);border-radius:50%;color:var(--color-text-1)}.arco-react-calendar-panel .arco-react-calendar-cell-disabled>.arco-react-calendar-date{background-color:var(--color-fill-1);cursor:not-allowed}.arco-react-calendar-panel .arco-react-calendar-cell-disabled>.arco-react-calendar-date>.arco-react-calendar-date-value{color:var(--color-text-4);background-color:var(--color-fill-1);cursor:not-allowed}.arco-react-calendar-panel .arco-react-calendar-footer-btn-wrapper{height:38px;line-height:38px;text-align:center;border-top:1px solid var(--color-neutral-3);cursor:pointer;color:var(--color-text-1)}.arco-react-card{position:relative;background:var(--color-bg-2);transition:box-shadow .2s cubic-bezier(0,0,1,1);border-radius:var(--border-radius-none)}.arco-react-card-header{display:flex;align-items:center;justify-content:space-between;position:relative;box-sizing:border-box;border-bottom:1px solid var(--color-neutral-3);overflow:hidden}.arco-react-card-header-no-title:before{content:\" \";display:block}.arco-react-card-header-title{flex:1;font-weight:500;color:var(--color-text-1);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.arco-react-card-header-extra{color:rgb(var(--primary-6));overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.arco-react-card-body{color:var(--color-text-2)}.arco-react-card-cover{overflow:hidden}.arco-react-card-cover>*{display:block;width:100%}.arco-react-card-actions{display:flex;align-items:center;justify-content:space-between;margin-top:20px}.arco-react-card-actions:before{content:\"\";visibility:hidden}.arco-react-card-actions-right{display:flex;align-items:center}.arco-react-card-actions-item{display:flex;align-items:center;justify-content:center;color:var(--color-text-2);cursor:pointer;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;transition:color .2s cubic-bezier(0,0,1,1)}.arco-react-card-actions-item:hover{color:rgb(var(--primary-6))}.arco-react-card-actions-item:not(:last-child){margin-right:12px}.arco-react-card-meta-footer{display:flex;align-items:center;justify-content:space-between}.arco-react-card-meta-footer:last-child{margin-top:20px}.arco-react-card-meta-footer-only-actions:before{content:\"\";visibility:hidden}.arco-react-card-meta-footer .arco-react-card-actions{margin-top:0}.arco-react-card-meta-title{font-weight:500;color:var(--color-text-1);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.arco-react-card-meta-description:not(:first-child){margin-top:4px}.arco-react-card-grid{position:relative;box-sizing:border-box;width:33.33%;box-shadow:1px 0 0 0 var(--color-neutral-3),0 1px 0 0 var(--color-neutral-3),1px 1px 0 0 var(--color-neutral-3),1px 0 0 0 var(--color-neutral-3) inset,0 1px 0 0 var(--color-neutral-3) inset}.arco-react-card-grid:before{content:\"\";pointer-events:none;position:absolute;left:0;right:0;top:0;bottom:0;transition:box-shadow .2s cubic-bezier(0,0,1,1)}.arco-react-card-grid-hoverable:hover{z-index:1}.arco-react-card-grid-hoverable:hover:before{box-shadow:0 4px 10px rgb(var(--gray-2))}.arco-react-card-grid .arco-react-card{background:none;box-shadow:none}.arco-react-card-contain-grid:not(.arco-react-card-loading)>.arco-react-card-body{display:flex;flex-wrap:wrap;margin:0 -1px;padding:0}.arco-react-card-hoverable:hover{box-shadow:0 4px 10px rgb(var(--gray-2))}.arco-react-card-bordered{border:1px solid var(--color-neutral-3);border-radius:var(--border-radius-small)}.arco-react-card-bordered .arco-react-card-cover{border-radius:var(--border-radius-small) var(--border-radius-small) 0 0}.arco-react-card-loading .arco-react-card-body{overflow:hidden;text-align:center}.arco-react-card-size-default{font-size:14px}.arco-react-card-size-default .arco-react-card-header{height:46px;padding-left:16px;padding-right:16px}.arco-react-card-size-default .arco-react-card-header-title,.arco-react-card-size-default .arco-react-card-meta-title{font-size:16px}.arco-react-card-size-default .arco-react-card-header-extra{font-size:14px}.arco-react-card-size-default .arco-react-card-body{padding:16px}.arco-react-card-size-small{font-size:14px}.arco-react-card-size-small .arco-react-card-header{height:40px;padding-left:16px;padding-right:16px}.arco-react-card-size-small .arco-react-card-header-title,.arco-react-card-size-small .arco-react-card-meta-title{font-size:16px}.arco-react-card-size-small .arco-react-card-header-extra{font-size:14px}.arco-react-card-size-small .arco-react-card-body{padding:12px 16px}#react-root[arco-theme=dark] .arco-react-card-grid-hoverable:hover:before,#react-root[arco-theme=dark] .arco-react-card-hoverable:hover{box-shadow:0 4px 10px rgba(var(--gray-1),40%)}@keyframes arco-react-carousel-slide-x-in{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes arco-react-carousel-slide-x-out{0%{transform:translate(0)}to{transform:translate(-100%)}}@keyframes arco-react-carousel-slide-x-in-reverse{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes arco-react-carousel-slide-x-out-reverse{0%{transform:translate(0)}to{transform:translate(100%)}}@keyframes arco-react-carousel-slide-y-in{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes arco-react-carousel-slide-y-out{0%{transform:translateY(0)}to{transform:translateY(-100%)}}@keyframes arco-react-carousel-slide-y-in-reverse{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes arco-react-carousel-slide-y-out-reverse{0%{transform:translateY(0)}to{transform:translateY(100%)}}@keyframes arco-react-carousel-card-bottom-to-middle{0%{opacity:0;transform:translate(0) translateZ(-400px)}to{opacity:.4;transform:translate(0) translateZ(-200px)}}@keyframes arco-react-carousel-card-middle-to-bottom{0%{opacity:.4;transform:translate(-100%) translateZ(-200px)}to{opacity:0;transform:translate(-100%) translateZ(-400px)}}@keyframes arco-react-carousel-card-top-to-middle{0%{opacity:1;transform:translate(-50%) translateZ(0)}to{opacity:.4;transform:translate(-100%) translateZ(-200px)}}@keyframes arco-react-carousel-card-middle-to-top{0%{opacity:.4;transform:translate(0) translateZ(-200px)}to{opacity:1;transform:translate(-50%) translateZ(0)}}@keyframes arco-react-carousel-card-bottom-to-middle-reverse{0%{opacity:0;transform:translate(-100%) translateZ(-400px)}to{opacity:.4;transform:translate(-100%) translateZ(-200px)}}@keyframes arco-react-carousel-card-middle-to-bottom-reverse{0%{opacity:.4;transform:translate(0) translateZ(-200px)}to{opacity:0;transform:translate(0) translateZ(-400px)}}@keyframes arco-react-carousel-card-top-to-middle-reverse{0%{opacity:1;transform:translate(-50%) translateZ(0)}to{opacity:.4;transform:translate(0) translateZ(-200px)}}@keyframes arco-react-carousel-card-middle-to-top-reverse{0%{opacity:.4;transform:translate(-100%) translateZ(-200px)}to{opacity:1;transform:translate(-50%) translateZ(0)}}.arco-react-carousel{position:relative}.arco-react-carousel-indicator-position-outer{margin-bottom:30px}.arco-react-carousel-slide,.arco-react-carousel-card,.arco-react-carousel-fade{width:100%;height:100%;overflow:hidden;position:relative}.arco-react-carousel-slide>*,.arco-react-carousel-card>*,.arco-react-carousel-fade>*{position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden}.arco-react-carousel-item-current{z-index:1}.arco-react-carousel-slide>*:not(.arco-react-carousel-item-current){visibility:hidden}.arco-react-carousel-slide.arco-react-carousel-horizontal .arco-react-carousel-item-slide-out{display:block;animation:arco-react-carousel-slide-x-out}.arco-react-carousel-slide.arco-react-carousel-horizontal .arco-react-carousel-item-slide-in{display:block;animation:arco-react-carousel-slide-x-in}.arco-react-carousel-slide.arco-react-carousel-horizontal.arco-react-carousel-negative .arco-react-carousel-item-slide-out{animation:arco-react-carousel-slide-x-out-reverse}.arco-react-carousel-slide.arco-react-carousel-horizontal.arco-react-carousel-negative .arco-react-carousel-item-slide-in{animation:arco-react-carousel-slide-x-in-reverse}.arco-react-carousel-slide.arco-react-carousel-vertical .arco-react-carousel-item-slide-out{display:block;animation:arco-react-carousel-slide-y-out}.arco-react-carousel-slide.arco-react-carousel-vertical .arco-react-carousel-item-slide-in{display:block;animation:arco-react-carousel-slide-y-in}.arco-react-carousel-slide.arco-react-carousel-vertical.arco-react-carousel-negative .arco-react-carousel-item-slide-out{animation:arco-react-carousel-slide-y-out-reverse}.arco-react-carousel-slide.arco-react-carousel-vertical.arco-react-carousel-negative .arco-react-carousel-item-slide-in{animation:arco-react-carousel-slide-y-in-reverse}.arco-react-carousel-card{perspective:800px}.arco-react-carousel-card>*{left:50%;opacity:0;transform:translate(-50%) translateZ(-400px);animation:arco-react-carousel-card-middle-to-bottom}.arco-react-carousel-card .arco-react-carousel-item-prev{opacity:.4;transform:translate(-100%) translateZ(-200px);animation:arco-react-carousel-card-top-to-middle}.arco-react-carousel-card .arco-react-carousel-item-next{opacity:.4;transform:translate(0) translateZ(-200px);animation:arco-react-carousel-card-bottom-to-middle}.arco-react-carousel-card .arco-react-carousel-item-current{opacity:1;transform:translate(-50%) translateZ(0);animation:arco-react-carousel-card-middle-to-top}.arco-react-carousel-card.arco-react-carousel-negative>*{animation:arco-react-carousel-card-middle-to-bottom-reverse}.arco-react-carousel-card.arco-react-carousel-negative .arco-react-carousel-item-prev{animation:arco-react-carousel-card-bottom-to-middle-reverse}.arco-react-carousel-card.arco-react-carousel-negative .arco-react-carousel-item-next{animation:arco-react-carousel-card-top-to-middle-reverse}.arco-react-carousel-card.arco-react-carousel-negative .arco-react-carousel-item-current{animation:arco-react-carousel-card-middle-to-top-reverse}.arco-react-carousel-fade>*{left:50%;transform:translate(-50%);opacity:0}.arco-react-carousel-fade .arco-react-carousel-item-current{opacity:1}.arco-react-carousel-indicator{display:flex;position:absolute;margin:0;padding:0}.arco-react-carousel-indicator-wrapper{position:absolute;z-index:2}.arco-react-carousel-indicator-wrapper-top{left:0;right:0;top:0;height:48px;background:linear-gradient(180deg,rgba(0,0,0,.15) 0%,rgba(0,0,0,0) 87%)}.arco-react-carousel-indicator-wrapper-bottom{left:0;right:0;bottom:0;height:48px;background:linear-gradient(180deg,rgba(0,0,0,0) 13%,rgba(0,0,0,.15) 100%)}.arco-react-carousel-indicator-wrapper-left{left:0;top:0;width:48px;height:100%;background:linear-gradient(90deg,rgba(0,0,0,.15) 0%,rgba(0,0,0,0) 87%)}.arco-react-carousel-indicator-wrapper-right{right:0;top:0;width:48px;height:100%;background:linear-gradient(90deg,rgba(0,0,0,0) 13%,rgba(0,0,0,.15) 100%)}.arco-react-carousel-indicator-wrapper-outer{left:0;right:0;background:none}.arco-react-carousel-indicator-bottom{bottom:12px;left:50%;transform:translate(-50%)}.arco-react-carousel-indicator-top{top:12px;left:50%;transform:translate(-50%)}.arco-react-carousel-indicator-left{left:12px;top:50%;transform:translate(-50%,-50%) rotate(90deg)}.arco-react-carousel-indicator-right{right:12px;top:50%;transform:translate(50%,-50%) rotate(90deg)}.arco-react-carousel-indicator-outer{left:50%;transform:translate(-50%);padding:4px;border-radius:20px;background-color:transparent}.arco-react-carousel-indicator-outer.arco-react-carousel-indicator-dot{bottom:-22px}.arco-react-carousel-indicator-outer.arco-react-carousel-indicator-line{bottom:-20px}.arco-react-carousel-indicator-outer.arco-react-carousel-indicator-slider{padding:0;bottom:-16px;background-color:rgba(var(--gray-4),.5)}.arco-react-carousel-indicator-outer .arco-react-carousel-indicator-item{background-color:rgba(var(--gray-4),.5)}.arco-react-carousel-indicator-outer .arco-react-carousel-indicator-item:hover,.arco-react-carousel-indicator-outer .arco-react-carousel-indicator-item-active{background-color:var(--color-fill-4)}.arco-react-carousel-indicator-item{display:inline-block;border-radius:var(--border-radius-medium);background-color:#ffffff4d;cursor:pointer}.arco-react-carousel-indicator-item:hover,.arco-react-carousel-indicator-item-active{background-color:var(--color-white)}.arco-react-carousel-indicator-dot .arco-react-carousel-indicator-item{width:6px;height:6px;border-radius:50%}.arco-react-carousel-indicator-dot .arco-react-carousel-indicator-item:not(:last-child){margin-right:8px}.arco-react-carousel-indicator-line .arco-react-carousel-indicator-item{width:12px;height:4px}.arco-react-carousel-indicator-line .arco-react-carousel-indicator-item:not(:last-child){margin-right:8px}.arco-react-carousel-indicator-slider{width:48px;height:4px;border-radius:var(--border-radius-medium);background-color:#ffffff4d;cursor:pointer}.arco-react-carousel-indicator-slider .arco-react-carousel-indicator-item{position:absolute;top:0;height:100%;transition:left .3s}.arco-react-carousel-arrow>div{display:flex;align-items:center;justify-content:center;position:absolute;width:24px;height:24px;border-radius:50%;color:var(--color-white);background-color:#ffffff4d;cursor:pointer;z-index:2}.arco-react-carousel-arrow>div>svg{color:var(--color-white);font-size:14px}.arco-react-carousel-arrow>div:hover{background-color:#ffffff80}.arco-react-carousel-arrow-left{left:12px;top:50%;transform:translateY(-50%)}.arco-react-carousel-arrow-right{top:50%;transform:translateY(-50%);right:12px}.arco-react-carousel-arrow-top{left:50%;transform:translate(-50%);top:12px}.arco-react-carousel-arrow-bottom{left:50%;transform:translate(-50%);bottom:12px}.arco-react-carousel-arrow-hover div{opacity:0;transition:all .3s}.arco-react-carousel:hover .arco-react-carousel-arrow-hover div{opacity:1}#react-root[arco-theme=dark] .arco-react-carousel-arrow>div{background-color:rgba(var(--gray-1),.3)}#react-root[arco-theme=dark] .arco-react-carousel-arrow>div:hover{background-color:rgba(var(--gray-1),.5)}#react-root[arco-theme=dark] .arco-react-carousel-indicator-item,#react-root[arco-theme=dark] .arco-react-carousel-indicator-slider{background-color:rgba(var(--gray-1),.3)}#react-root[arco-theme=dark] .arco-react-carousel-indicator-item-active,#react-root[arco-theme=dark] .arco-react-carousel-indicator-item:hover{background-color:var(--color-white)}#react-root[arco-theme=dark] .arco-react-carousel-indicator-outer.arco-react-carousel-indicator-slider{background-color:rgba(var(--gray-4),.5)}#react-root[arco-theme=dark] .arco-react-carousel-indicator-outer .arco-react-carousel-indicator-item:hover,#react-root[arco-theme=dark] .arco-react-carousel-indicator-outer .arco-react-carousel-indicator-item-active{background-color:var(--color-fill-4)}.arco-react-cascader .arco-react-cascader-view{color:var(--color-text-1);background-color:var(--color-fill-2);border:1px solid transparent}.arco-react-cascader:hover .arco-react-cascader-view{background-color:var(--color-fill-3);border-color:transparent}.arco-react-cascader.arco-react-cascader-focused .arco-react-cascader-view{color:var(--color-text-1);background-color:var(--color-bg-2);border-color:rgb(var(--primary-6));box-shadow:0 0 0 0 var(--color-primary-light-2)}.arco-react-cascader .arco-react-cascader-suffix-icon,.arco-react-cascader .arco-react-cascader-loading-icon,.arco-react-cascader .arco-react-cascader-search-icon,.arco-react-cascader .arco-react-cascader-clear-icon,.arco-react-cascader .arco-react-cascader-arrow-icon,.arco-react-cascader .arco-react-cascader-expand-icon{color:var(--color-text-2)}.arco-react-cascader-error .arco-react-cascader-view{background-color:var(--color-danger-light-1);border:1px solid transparent}.arco-react-cascader-error:hover .arco-react-cascader-view{background-color:var(--color-danger-light-2);border-color:transparent}.arco-react-cascader-error.arco-react-cascader-focused .arco-react-cascader-view{color:var(--color-text-1);background-color:var(--color-bg-2);border-color:rgb(var(--danger-6));box-shadow:0 0 0 0 var(--color-danger-light-2)}.arco-react-cascader-disabled .arco-react-cascader-view{color:var(--color-text-4);background-color:var(--color-fill-2);border:1px solid transparent}.arco-react-cascader-disabled:hover .arco-react-cascader-view{background-color:var(--color-fill-2);border-color:transparent}.arco-react-cascader-disabled .arco-react-cascader-suffix-icon,.arco-react-cascader-disabled .arco-react-cascader-loading-icon,.arco-react-cascader-disabled .arco-react-cascader-search-icon,.arco-react-cascader-disabled .arco-react-cascader-clear-icon,.arco-react-cascader-disabled .arco-react-cascader-arrow-icon,.arco-react-cascader-disabled .arco-react-cascader-expand-icon{color:var(--color-text-4)}.arco-react-cascader-no-border .arco-react-cascader-view{border:none!important;background:none!important}.arco-react-cascader-size-mini.arco-react-cascader-multiple .arco-react-cascader-view{height:auto;font-size:12px;padding:0 3px;line-height:0}.arco-react-cascader-size-mini.arco-react-cascader-multiple .arco-react-input-tag-has-placeholder input,.arco-react-cascader-size-mini.arco-react-cascader-multiple .arco-react-input-tag-has-placeholder .arco-react-input-tag-input-mirror{box-sizing:border-box;padding-left:4px}.arco-react-cascader-size-mini.arco-react-cascader-multiple .arco-react-cascader-suffix{padding-right:4px}.arco-react-cascader-size-mini.arco-react-cascader-multiple input{font-size:12px}.arco-react-cascader-size-mini.arco-react-cascader-single .arco-react-cascader-view{height:24px;line-height:22px;font-size:12px;padding:0 7px}.arco-react-cascader-size-mini.arco-react-cascader-single input{font-size:12px}.arco-react-cascader-size-mini.arco-react-cascader-multiple .arco-react-cascader-view-with-prefix{padding-left:7px}.arco-react-cascader-size-small.arco-react-cascader-multiple .arco-react-cascader-view{height:auto;font-size:14px;padding:0 3px;line-height:0}.arco-react-cascader-size-small.arco-react-cascader-multiple .arco-react-input-tag-has-placeholder input,.arco-react-cascader-size-small.arco-react-cascader-multiple .arco-react-input-tag-has-placeholder .arco-react-input-tag-input-mirror{box-sizing:border-box;padding-left:8px}.arco-react-cascader-size-small.arco-react-cascader-multiple .arco-react-cascader-suffix{padding-right:8px}.arco-react-cascader-size-small.arco-react-cascader-multiple input{font-size:14px}.arco-react-cascader-size-small.arco-react-cascader-single .arco-react-cascader-view{height:28px;line-height:26px;font-size:14px;padding:0 11px}.arco-react-cascader-size-small.arco-react-cascader-single input{font-size:14px}.arco-react-cascader-size-small.arco-react-cascader-multiple .arco-react-cascader-view-with-prefix{padding-left:11px}.arco-react-cascader-size-default.arco-react-cascader-multiple .arco-react-cascader-view{height:auto;font-size:14px;padding:0 3px;line-height:0}.arco-react-cascader-size-default.arco-react-cascader-multiple .arco-react-input-tag-has-placeholder input,.arco-react-cascader-size-default.arco-react-cascader-multiple .arco-react-input-tag-has-placeholder .arco-react-input-tag-input-mirror{box-sizing:border-box;padding-left:8px}.arco-react-cascader-size-default.arco-react-cascader-multiple .arco-react-cascader-suffix{padding-right:8px}.arco-react-cascader-size-default.arco-react-cascader-multiple input{font-size:14px}.arco-react-cascader-size-default.arco-react-cascader-single .arco-react-cascader-view{height:32px;line-height:30px;font-size:14px;padding:0 11px}.arco-react-cascader-size-default.arco-react-cascader-single input{font-size:14px}.arco-react-cascader-size-default.arco-react-cascader-multiple .arco-react-cascader-view-with-prefix{padding-left:11px}.arco-react-cascader-size-large.arco-react-cascader-multiple .arco-react-cascader-view{height:auto;font-size:16px;padding:0 3px;line-height:0}.arco-react-cascader-size-large.arco-react-cascader-multiple .arco-react-input-tag-has-placeholder input,.arco-react-cascader-size-large.arco-react-cascader-multiple .arco-react-input-tag-has-placeholder .arco-react-input-tag-input-mirror{box-sizing:border-box;padding-left:12px}.arco-react-cascader-size-large.arco-react-cascader-multiple .arco-react-cascader-suffix{padding-right:12px}.arco-react-cascader-size-large.arco-react-cascader-multiple input{font-size:16px}.arco-react-cascader-size-large.arco-react-cascader-single .arco-react-cascader-view{height:36px;line-height:34px;font-size:16px;padding:0 15px}.arco-react-cascader-size-large.arco-react-cascader-single input{font-size:16px}.arco-react-cascader-size-large.arco-react-cascader-multiple .arco-react-cascader-view-with-prefix{padding-left:15px}.arco-react-cascader{display:inline-block;position:relative;box-sizing:border-box;width:100%;cursor:pointer}.arco-react-cascader-view{display:flex;position:relative;box-sizing:border-box;width:100%;border-radius:var(--border-radius-small);outline:none;user-select:none;text-align:left;transition:all .1s cubic-bezier(0,0,1,1),padding 0s linear}.arco-react-cascader-view input{color:inherit;cursor:inherit}.arco-react-cascader-view input::placeholder{color:var(--color-text-3)}.arco-react-cascader-multiple,.arco-react-cascader-show-search{cursor:text}.arco-react-cascader-disabled{cursor:not-allowed}.arco-react-cascader-disabled .arco-react-cascader-view input::placeholder{color:var(--color-text-4)}.arco-react-cascader-single .arco-react-cascader-view-input{box-sizing:border-box;width:100%;padding:0;border:none;outline:none;background:transparent;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.arco-react-cascader-single .arco-react-cascader-view-value{display:inline-block;box-sizing:border-box;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.arco-react-cascader-single .arco-react-cascader-view-value:after{content:\".\";font-size:0;line-height:0;visibility:hidden}.arco-react-cascader-single .arco-react-cascader-view .arco-react-cascader-hidden{width:0!important;position:absolute}.arco-react-cascader-multiple{vertical-align:top}.arco-react-cascader-multiple .arco-react-cascader-view{padding:0 4px;line-height:0}.arco-react-cascader-multiple .arco-react-cascader-view-with-prefix{padding-left:12px}.arco-react-cascader-multiple .arco-react-input-tag{flex:1;padding:0;border:none!important;background:none!important;box-shadow:none!important;overflow:hidden}.arco-react-cascader-multiple .arco-react-tag{max-width:100%}.arco-react-cascader-multiple:not(.arco-react-cascader-focused) .arco-react-input-tag input:not(:first-child)[value=\"\"]{width:0!important;position:absolute}.arco-react-cascader-prefix{display:flex;align-items:center;margin-right:12px;white-space:nowrap;color:var(--color-text-2)}.arco-react-cascader-suffix{display:flex;align-items:center;margin-left:4px}.arco-react-cascader-suffix-icon,.arco-react-cascader-search-icon,.arco-react-cascader-loading-icon,.arco-react-cascader-expand-icon,.arco-react-cascader-clear-icon{font-size:12px;transition:all .1s cubic-bezier(0,0,1,1)}.arco-react-cascader-arrow-icon{font-size:12px}.arco-react-cascader-open .arco-react-cascader-arrow-icon svg{transform:rotate(180deg)}.arco-react-cascader .arco-react-cascader-clear-icon{display:none;cursor:pointer}.arco-react-cascader .arco-react-cascader-clear-icon>svg{position:relative;transition:all .1s cubic-bezier(0,0,1,1)}.arco-react-cascader:hover .arco-react-cascader-clear-icon{display:block}.arco-react-cascader:hover .arco-react-cascader-clear-icon~*{display:none}.arco-react-cascader-popup{top:4px;box-sizing:border-box;border:1px solid var(--color-fill-3);border-radius:var(--border-radius-medium);background-color:var(--color-bg-popup);box-shadow:0 4px 10px #0000001a;overflow:hidden}.arco-react-cascader-popup-trigger-hover .arco-react-cascader-list-item{transition:font-weight 0s}.arco-react-cascader-popup .arco-react-cascader-popup-inner{width:100%;white-space:nowrap;list-style:none;height:200px}.arco-react-cascader-highlight{font-weight:500}.arco-react-cascader-list-column{position:relative;vertical-align:top;display:inline-block;background-color:var(--color-bg-popup);height:100%}.arco-react-cascader-list-column:not(:last-of-type){border-right:1px solid var(--color-fill-3)}.arco-react-cascader-list-wrapper{position:relative;white-space:nowrap;box-sizing:border-box;height:100%;display:flex;padding:4px 0;flex-direction:column}.arco-react-cascader-list-wrapper-with-footer{padding-bottom:0}.arco-react-cascader-list-empty{height:100%;display:flex;align-items:center}.arco-react-cascader-list{padding:0;margin:0;list-style:none;box-sizing:border-box;overflow-y:auto;flex:1}.arco-react-cascader-list-item,.arco-react-cascader-list-search-item{position:relative;height:36px;line-height:36px;min-width:100px;font-size:14px;color:var(--color-text-1);box-sizing:border-box;display:flex;cursor:pointer;background-color:transparent}.arco-react-cascader-list-item-label,.arco-react-cascader-list-search-item-label{flex-grow:1;padding-left:12px;padding-right:34px}.arco-react-cascader-list-item .arco-react-icon-right,.arco-react-cascader-list-search-item .arco-react-icon-right,.arco-react-cascader-list-item .arco-react-icon-check,.arco-react-cascader-list-search-item .arco-react-icon-check{position:absolute;color:var(--color-text-2);top:50%;font-size:12px;transform:translateY(-50%);right:10px}.arco-react-cascader-list-item .arco-react-icon-check,.arco-react-cascader-list-search-item .arco-react-icon-check{color:rgb(var(--primary-6))}.arco-react-cascader-list-item .arco-react-icon-loading,.arco-react-cascader-list-search-item .arco-react-icon-loading{position:absolute;margin-top:-6px;top:50%;font-size:12px;right:10px;color:rgb(var(--primary-6))}.arco-react-cascader-list-item:hover,.arco-react-cascader-list-search-item-hover{color:var(--color-text-1);background-color:var(--color-fill-2)}.arco-react-cascader-list-item:hover .arco-react-checkbox:not(.arco-react-checkbox-disabled):not(.arco-react-checkbox-checked):hover .arco-react-checkbox-icon-hover:before,.arco-react-cascader-list-search-item-hover .arco-react-checkbox:not(.arco-react-checkbox-disabled):not(.arco-react-checkbox-checked):hover .arco-react-checkbox-icon-hover:before{background-color:var(--color-fill-3)}.arco-react-cascader-list-item-disabled,.arco-react-cascader-list-search-item-disabled,.arco-react-cascader-list-item-disabled:hover,.arco-react-cascader-list-search-item-disabled:hover{cursor:not-allowed;background-color:transparent;color:var(--color-text-4)}.arco-react-cascader-list-item-disabled .arco-react-icon-right,.arco-react-cascader-list-search-item-disabled .arco-react-icon-right,.arco-react-cascader-list-item-disabled:hover .arco-react-icon-right,.arco-react-cascader-list-search-item-disabled:hover .arco-react-icon-right{color:inherit}.arco-react-cascader-list-item-disabled .arco-react-icon-check,.arco-react-cascader-list-search-item-disabled .arco-react-icon-check,.arco-react-cascader-list-item-disabled:hover .arco-react-icon-check,.arco-react-cascader-list-search-item-disabled:hover .arco-react-icon-check{color:var(--color-primary-light-3)}.arco-react-cascader-list-item-active{transition:all .2s cubic-bezier(0,0,1,1);background-color:var(--color-fill-2);color:var(--color-text-1);font-weight:500}.arco-react-cascader-list-item-active:hover{background-color:var(--color-fill-2);font-weight:500;color:var(--color-text-1)}.arco-react-cascader-list-item-active.arco-react-cascader-list-item-disabled,.arco-react-cascader-list-item-active.arco-react-cascader-list-item-disabled:hover{background-color:var(--color-fill-2);font-weight:500;color:var(--color-text-4)}.arco-react-cascader-list-multiple .arco-react-cascader-list-item-label{padding-left:0}.arco-react-cascader-list-multiple .arco-react-cascader-list-item,.arco-react-cascader-list-multiple .arco-react-cascader-list-search-item{padding-left:12px}.arco-react-cascader-list-multiple .arco-react-cascader-list-item .arco-react-checkbox,.arco-react-cascader-list-multiple .arco-react-cascader-list-search-item .arco-react-checkbox{padding-left:0;margin-right:8px}.arco-react-cascader-list-search.arco-react-cascader-list-multiple .arco-react-cascader-list-item-label{padding-right:12px}.arco-react-cascader-list-footer{height:36px;line-height:36px;padding-left:12px;border-top:1px solid var(--color-fill-3);box-sizing:border-box}.cascaderSlide-enter-active,.cascaderSlide-appear-active{transition:margin .3s cubic-bezier(.34,.69,.1,1)}.arco-react-icon-hover.arco-react-checkbox-icon-hover:before{width:24px;height:24px}.arco-react-checkbox{display:inline-block;cursor:pointer;box-sizing:border-box;font-size:14px;padding-left:5px;line-height:unset;position:relative}.arco-react-checkbox>input[type=checkbox]{position:absolute;opacity:0;top:0;left:0;width:0;height:0}.arco-react-checkbox>input[type=checkbox]:focus+.arco-react-checkbox-icon-hover:before{background-color:var(--color-fill-2)}.arco-react-checkbox:hover .arco-react-checkbox-icon-hover:before{background-color:var(--color-fill-2)}.arco-react-checkbox-text{color:var(--color-text-1);margin-left:8px}.arco-react-checkbox-mask-wrapper{vertical-align:middle;top:-.09em;position:relative;line-height:1}.arco-react-checkbox-mask{position:relative;box-sizing:border-box;width:14px;height:14px;border:2px solid var(--color-fill-3);border-radius:var(--border-radius-small);background-color:var(--color-bg-2);user-select:none}.arco-react-checkbox-mask:after{content:\"\";display:block;height:2px;width:6px;background:var(--color-white);top:50%;left:50%;transform:translate(-50%) translateY(-50%) scale(0);position:absolute;border-radius:.5px}.arco-react-checkbox-mask-icon{position:relative;height:100%;transform:scale(0);color:var(--color-white);transform-origin:center 75%;margin:0 auto;display:block;width:8px}.arco-react-checkbox:hover .arco-react-checkbox-mask{border-color:var(--color-fill-4);transition:border-color .1s cubic-bezier(0,0,1,1),transform .3s cubic-bezier(.3,1.3,.3,1)}.arco-react-checkbox-checked:hover .arco-react-checkbox-mask,.arco-react-checkbox-indeterminate:hover .arco-react-checkbox-mask{transition:transform .3s cubic-bezier(.3,1.3,.3,1)}.arco-react-checkbox-checked .arco-react-checkbox-mask{border-color:transparent;background-color:rgb(var(--primary-6))}.arco-react-checkbox-checked .arco-react-checkbox-mask-icon{transform:scale(1);transition:transform .3s cubic-bezier(.3,1.3,.3,1)}.arco-react-checkbox-indeterminate .arco-react-checkbox-mask{border-color:transparent;background-color:rgb(var(--primary-6))}.arco-react-checkbox-indeterminate .arco-react-checkbox-mask-icon{transform:scale(0)}.arco-react-checkbox-indeterminate .arco-react-checkbox-mask:after{transform:translate(-50%) translateY(-50%) scale(1);transition:transform .3s cubic-bezier(.3,1.3,.3,1)}.arco-react-checkbox.arco-react-checkbox-disabled{cursor:not-allowed}.arco-react-checkbox.arco-react-checkbox-disabled .arco-react-checkbox-icon-hover{cursor:not-allowed}.arco-react-checkbox.arco-react-checkbox-disabled:hover .arco-react-checkbox-mask{border-color:var(--color-fill-3)}.arco-react-checkbox-checked:hover .arco-react-checkbox-mask,.arco-react-checkbox-indeterminate:hover .arco-react-checkbox-mask{border-color:transparent}.arco-react-checkbox-disabled .arco-react-checkbox-mask{border-color:var(--color-fill-3);background-color:var(--color-fill-2)}.arco-react-checkbox-disabled.arco-react-checkbox-checked .arco-react-checkbox-mask,.arco-react-checkbox-disabled.arco-react-checkbox-checked:hover .arco-react-checkbox-mask,.arco-react-checkbox-disabled.arco-react-checkbox-indeterminate .arco-react-checkbox-mask,.arco-react-checkbox-disabled.arco-react-checkbox-indeterminate:hover .arco-react-checkbox-mask{border-color:transparent;background-color:var(--color-primary-light-3)}.arco-react-checkbox-disabled:hover .arco-react-checkbox-mask-wrapper:before,.arco-react-checkbox-checked:hover .arco-react-checkbox-mask-wrapper:before,.arco-react-checkbox-indeterminate:hover .arco-react-checkbox-mask-wrapper:before{background-color:transparent}.arco-react-checkbox-disabled .arco-react-checkbox-text{color:var(--color-text-4)}.arco-react-checkbox-disabled .arco-react-checkbox-mask-icon{color:var(--color-fill-3)}.arco-react-checkbox-group{display:inline-block}.arco-react-checkbox-group .arco-react-checkbox{margin-right:16px}.arco-react-checkbox-group-direction-vertical .arco-react-checkbox{display:block;margin-right:0;line-height:32px}.arco-react-icon-hover.arco-react-collapse-item-icon-hover:before{width:16px;height:16px}.arco-react-icon-hover.arco-react-collapse-item-icon-hover:hover:before{background-color:var(--color-fill-2)}.arco-react-collapse{overflow:hidden;border-radius:var(--border-radius-medium);border:1px solid var(--color-neutral-3);line-height:1.5715}.arco-react-collapse-item{border-bottom:1px solid var(--color-neutral-3);box-sizing:border-box}.arco-react-collapse-item-active>.arco-react-collapse-item-header{background-color:var(--color-bg-2);border-color:var(--color-neutral-3);transition:border-color 0s ease 0s}.arco-react-collapse-item-active>.arco-react-collapse-item-header .arco-react-collapse-item-header-title{font-weight:500}.arco-react-collapse-item-header{display:flex;align-items:center;justify-content:space-between;position:relative;box-sizing:border-box;padding-top:8px;padding-bottom:8px;background-color:var(--color-bg-2);border-bottom:1px solid transparent;color:var(--color-text-1);cursor:pointer;font-size:14px;overflow:hidden;line-height:24px;transition:border-color 0s ease .19s}.arco-react-collapse-item-header-left{padding-left:32px;padding-right:13px}.arco-react-collapse-item-header-right{padding-left:13px;padding-right:32px}.arco-react-collapse-item-header-disabled{cursor:not-allowed;color:var(--color-text-4);background-color:var(--color-bg-2)}.arco-react-collapse-item-header-disabled .arco-react-collapse-item-header-icon{color:var(--color-text-4)}.arco-react-collapse-item-header-title{display:inline}.arco-react-collapse-item-header-extra{float:right}.arco-react-collapse-item .arco-react-collapse-item-icon-hover{position:absolute;top:50%;transform:translateY(-50%);left:13px;text-align:center}.arco-react-collapse-item .arco-react-collapse-item-icon-hover-right{right:13px;left:unset}.arco-react-collapse-item .arco-react-collapse-item-icon-hover-right>.arco-react-collapse-item-header-icon-down{transform:rotate(-90deg)}.arco-react-collapse-item-header-icon{color:var(--color-neutral-7);font-size:14px;transition:transform .2s cubic-bezier(.34,.69,.1,1);vertical-align:middle;position:relative;display:block}.arco-react-collapse-item-header-icon-down{transform:rotate(90deg)}.arco-react-collapse-item-content{display:none;overflow:hidden;position:relative;color:var(--color-text-1);background-color:var(--color-fill-1);font-size:14px;transition:height .2s cubic-bezier(.34,.69,.1,1)}.arco-react-collapse-item-content-expanded{display:block;height:auto}.arco-react-collapse-item-content-box{padding:8px 13px 8px 34px}.arco-react-collapse-item.arco-react-collapse-item-disabled>.arco-react-collapse-item-content{color:var(--color-text-1)}.arco-react-collapse-item-no-icon>.arco-react-collapse-item-header{padding-left:13px;padding-right:13px}.arco-react-collapse-item:last-of-type{border-bottom:none}.arco-react-collapse.arco-react-collapse-borderless{border:none}.arco-react-collapse:after{display:table;content:\"\";clear:both}.arco-react-comment{display:flex;flex-wrap:nowrap;line-height:1.5715}.arco-react-comment:not(:first-of-type),.arco-react-comment-inner-comment{margin-top:20px}.arco-react-comment-inner{flex:1}.arco-react-comment-avatar{flex-shrink:0;margin-right:12px;cursor:pointer}.arco-react-comment-avatar>img{width:32px;height:32px;border-radius:var(--border-radius-circle)}.arco-react-comment-author{color:var(--color-text-2);font-size:14px;margin-right:8px}.arco-react-comment-datetime{color:var(--color-text-3);font-size:12px}.arco-react-comment-content{font-size:14px;color:var(--color-text-1)}.arco-react-comment-title-align-right{display:flex;justify-content:space-between}.arco-react-comment-actions{margin-top:8px;color:var(--color-text-2);font-size:14px}.arco-react-comment-actions>*:not(:last-child){margin-right:8px}.arco-react-comment-actions-align-right{display:flex;justify-content:flex-end}.arco-react-picker-container,.arco-react-picker-range-container{border:1px solid var(--color-neutral-3);box-shadow:0 2px 5px #0000001a;border-radius:var(--border-radius-medium);background-color:var(--color-bg-popup);box-sizing:border-box;min-height:60px;overflow:hidden}.arco-react-picker-container-shortcuts-placement-left,.arco-react-picker-range-container-shortcuts-placement-left{display:flex;align-items:flex-start}.arco-react-picker-container-shortcuts-placement-left>.arco-react-picker-shortcuts,.arco-react-picker-range-container-shortcuts-placement-left>.arco-react-picker-shortcuts{display:flex;flex-direction:column;padding:5px 8px;box-sizing:border-box;overflow-x:hidden;overflow-y:auto}.arco-react-picker-container-shortcuts-placement-left>.arco-react-picker-shortcuts>*,.arco-react-picker-range-container-shortcuts-placement-left>.arco-react-picker-shortcuts>*{margin:5px 0}.arco-react-picker-container-shortcuts-placement-left .arco-react-picker-panel-wrapper,.arco-react-picker-range-container-shortcuts-placement-left .arco-react-picker-panel-wrapper,.arco-react-picker-container-shortcuts-placement-left .arco-react-picker-range-panel-wrapper,.arco-react-picker-range-container-shortcuts-placement-left .arco-react-picker-range-panel-wrapper{border-left:1px solid var(--color-neutral-3)}.arco-react-picker-panel-only,.arco-react-picker-range-panel-only{box-shadow:none}.arco-react-picker-panel-only .arco-react-panel-date-inner,.arco-react-picker-range-panel-only .arco-react-panel-date-inner{width:100%}.arco-react-picker-range-panel-only .arco-react-panel-date,.arco-react-picker-range-panel-only .arco-react-panel-month,.arco-react-picker-range-panel-only .arco-react-panel-year{width:100%}.arco-react-picker-header{display:flex;padding:8px 16px;border-bottom:1px solid var(--color-neutral-3)}.arco-react-picker-header-value{font-size:14px;line-height:24px;flex:1;text-align:center;color:var(--color-text-1);font-weight:500;box-sizing:border-box}.arco-react-picker-header-icon{border-radius:50%;text-align:center;font-size:12px;transition:all .1s cubic-bezier(0,0,1,1);user-select:none;color:var(--color-text-2);background-color:var(--color-bg-popup);width:24px;height:24px;line-height:24px;margin-left:2px;margin-right:2px;box-sizing:border-box}.arco-react-picker-header-icon:not(.arco-react-picker-header-icon-hidden){cursor:pointer}.arco-react-picker-header-icon:not(.arco-react-picker-header-icon-hidden):hover{background-color:var(--color-fill-3)}.arco-react-picker-header-label{cursor:pointer;padding:2px;border-radius:2px;transition:all .1s}.arco-react-picker-header-label:hover{background-color:var(--color-fill-3)}.arco-react-picker-body{padding:14px 16px}.arco-react-picker-week-list{display:flex;width:100%;box-sizing:border-box;padding:14px 16px 0}.arco-react-picker-week-list-item{color:var(--color-text-2);flex:1;padding:0;text-align:center;font-weight:500;height:32px;line-height:32px}.arco-react-picker-row{display:flex}.arco-react-picker-cell{position:relative;flex:1;cursor:pointer;padding:2px 0}.arco-react-picker-cell .arco-react-picker-date{display:flex;height:100%;width:100%;box-sizing:border-box;cursor:pointer;padding:4px 0;justify-content:center}.arco-react-picker-date-value{color:var(--color-text-4);font-size:14px;min-width:24px;height:24px;line-height:24px;text-align:center;border-radius:24px;font-weight:500}.arco-react-picker-cell-in-view .arco-react-picker-date-value{color:var(--color-text-1);font-weight:500}.arco-react-picker-cell:hover .arco-react-picker-date-value{background-color:var(--color-fill-3);color:var(--color-text-1)}.arco-react-picker-cell-disabled .arco-react-picker-date{background-color:var(--color-fill-1);cursor:not-allowed}.arco-react-picker-cell-disabled .arco-react-picker-date-value,.arco-react-picker-cell-disabled:hover .arco-react-picker-date-value{color:var(--color-text-4);background-color:transparent}.arco-react-picker-cell-selected .arco-react-picker-date-value,.arco-react-picker-cell-selected:hover .arco-react-picker-date-value{color:var(--color-white);background-color:rgb(var(--primary-6));transition:background-color .1s cubic-bezier(0,0,1,1)}.arco-react-picker-cell-today{position:relative}.arco-react-picker-cell-today:after{content:\"\";display:block;position:absolute;bottom:-2px;left:50%;margin-left:-2px;width:4px;height:4px;border-radius:50%;background-color:rgb(var(--primary-6))}.arco-react-picker-cell-in-range .arco-react-picker-date{background-color:var(--color-primary-light-1)}.arco-react-picker-cell-range-start .arco-react-picker-date,.arco-react-picker-cell-hover-range-start .arco-react-picker-date{border-top-left-radius:24px;border-bottom-left-radius:24px}.arco-react-picker-cell-range-end .arco-react-picker-date,.arco-react-picker-cell-hover-range-end .arco-react-picker-date{border-top-right-radius:24px;border-bottom-right-radius:24px}.arco-react-picker-cell-range-start .arco-react-picker-date-value,.arco-react-picker-cell-range-end .arco-react-picker-date-value,.arco-react-picker-cell-range-start:hover .arco-react-picker-date-value,.arco-react-picker-cell-range-end:hover .arco-react-picker-date-value{background-color:rgb(var(--primary-6));border-radius:24px;color:var(--color-white)}.arco-react-picker-cell-hover-in-range .arco-react-picker-date,.arco-react-picker-cell-hover-range-start:not(.arco-react-picker-cell-range-start):not(.arco-react-picker-cell-range-end) .arco-react-picker-date-value,.arco-react-picker-cell-hover-range-end:not(.arco-react-picker-cell-range-start):not(.arco-react-picker-cell-range-end) .arco-react-picker-date-value{background-color:var(--color-primary-light-2)}.arco-react-picker-cell-range-edge-in-hover-range .arco-react-picker-date{border-radius:0}.arco-react-picker-cell-hover-range-edge-in-range .arco-react-picker-date{border-radius:0}.arco-react-picker-cell-hidden .arco-react-picker-date{display:none}.arco-react-picker-footer{width:min-content;min-width:100%}.arco-react-picker-footer-btn-wrapper{border-top:1px solid var(--color-neutral-3);padding:3px 8px;display:flex;justify-content:space-between;align-items:center;box-sizing:border-box}.arco-react-picker-footer-extra-wrapper{padding:8px 24px;color:var(--color-text-1);border-top:1px solid var(--color-neutral-3);box-sizing:border-box;font-size:12px}.arco-react-picker-footer-now-wrapper{border-top:1px solid var(--color-neutral-3);box-sizing:border-box;height:36px;line-height:36px;text-align:center}.arco-react-picker-btn-select-date,.arco-react-picker-btn-select-time{margin-right:8px}.arco-react-picker-btn-confirm{margin:5px 0}.arco-react-picker-shortcuts{flex:1}.arco-react-picker-shortcuts>*{margin:5px 10px 5px 0}.arco-react-panel-date{display:flex;flex-direction:column;justify-content:space-between;box-sizing:border-box}.arco-react-panel-date-inner{width:265px}.arco-react-panel-date-inner .arco-react-picker-body{padding-top:0}.arco-react-panel-date-timepicker{display:flex;flex-direction:column}.arco-react-panel-date-timepicker-title{width:100%;text-align:center;font-weight:400;font-size:14px;height:40px;line-height:40px;border-bottom:1px solid var(--color-neutral-3);color:var(--color-text-1)}.arco-react-panel-date-timepicker .arco-react-timepicker{width:265px;height:276px;padding:0 6px;overflow:hidden}.arco-react-panel-date-timepicker .arco-react-timepicker-list{width:100%;height:100%;padding:0 4px;box-sizing:border-box}.arco-react-panel-date-timepicker .arco-react-timepicker-list:not(:last-child){border-right:0}.arco-react-panel-date-timepicker .arco-react-timepicker ul:after{height:236px}.arco-react-panel-date-timepicker .arco-react-timepicker-cell{width:100%}.arco-react-panel-date-holder{display:flex;width:100%;border-top:1px solid var(--color-neutral-3)}.arco-react-panel-date-holder-btn{display:flex;align-items:center;justify-content:center;flex:1;height:50px;box-sizing:border-box;cursor:pointer;color:var(--color-text-3);font-size:16px;transition:color .2s}.arco-react-panel-date-holder-btn:first-child{border-right:1px solid var(--color-neutral-3)}.arco-react-panel-date-holder-btn:hover,.arco-react-panel-date-holder-btn:active,.arco-react-panel-date-holder-btn-active{color:var(--color-text-1)}.arco-react-panel-date-holder-btn-value{margin-left:8px}.arco-react-panel-date:first-child .arco-react-panel-date-holder{border-right:1px solid var(--color-neutral-3)}.arco-react-panel-month,.arco-react-panel-quarter,.arco-react-panel-year{box-sizing:border-box;width:265px}.arco-react-panel-month .arco-react-picker-date,.arco-react-panel-quarter .arco-react-picker-date,.arco-react-panel-year .arco-react-picker-date{padding:4px}.arco-react-panel-month .arco-react-picker-date-value,.arco-react-panel-quarter .arco-react-picker-date-value,.arco-react-panel-year .arco-react-picker-date-value{border-radius:24px;width:100%}.arco-react-panel-month .arco-react-picker-cell:not(.arco-react-picker-cell-selected):not(.arco-react-picker-cell-range-start):not(.arco-react-picker-cell-range-end):not(.arco-react-picker-cell-disabled):not(.arco-react-picker-cell-week) .arco-react-picker-date-value:hover,.arco-react-panel-quarter .arco-react-picker-cell:not(.arco-react-picker-cell-selected):not(.arco-react-picker-cell-range-start):not(.arco-react-picker-cell-range-end):not(.arco-react-picker-cell-disabled):not(.arco-react-picker-cell-week) .arco-react-picker-date-value:hover,.arco-react-panel-year .arco-react-picker-cell:not(.arco-react-picker-cell-selected):not(.arco-react-picker-cell-range-start):not(.arco-react-picker-cell-range-end):not(.arco-react-picker-cell-disabled):not(.arco-react-picker-cell-week) .arco-react-picker-date-value:hover{border-radius:24px}.arco-react-panel-year{box-sizing:border-box;width:265px}.arco-react-panel-week{box-sizing:border-box}.arco-react-panel-week-wrapper{display:flex}.arco-react-panel-week-inner{width:298px}.arco-react-panel-week-inner .arco-react-picker-body{padding-top:0}.arco-react-panel-week .arco-react-picker-row-week{cursor:pointer}.arco-react-panel-week .arco-react-picker-row-week .arco-react-picker-date-value{width:100%;border-radius:0}.arco-react-panel-week .arco-react-picker-cell .arco-react-picker-date{border-radius:0}.arco-react-panel-week .arco-react-picker-cell:nth-child(2) .arco-react-picker-date{padding-left:4px;border-top-left-radius:24px;border-bottom-left-radius:24px}.arco-react-panel-week .arco-react-picker-cell:nth-child(2) .arco-react-picker-date .arco-react-picker-date-value{border-top-left-radius:24px;border-bottom-left-radius:24px}.arco-react-panel-week .arco-react-picker-cell:nth-child(8) .arco-react-picker-date{padding-right:4px;border-top-right-radius:24px;border-bottom-right-radius:24px}.arco-react-panel-week .arco-react-picker-cell:nth-child(8) .arco-react-picker-date .arco-react-picker-date-value{border-top-right-radius:24px;border-bottom-right-radius:24px}.arco-react-panel-week .arco-react-picker-row-week:hover .arco-react-picker-cell:not(.arco-react-picker-cell-week):not(.arco-react-picker-cell-selected):not(.arco-react-picker-cell-range-start):not(.arco-react-picker-cell-range-end):not(.arco-react-picker-cell-in-range):not(.arco-react-picker-cell-hover-in-range) .arco-react-picker-date-value{background-color:var(--color-fill-3)}.arco-react-panel-quarter{box-sizing:border-box;width:265px}.arco-react-picker-range-wrapper{display:flex}.arco-react-datepicker-shortcuts-wrapper{width:106px;height:100%;max-height:300px;overflow-y:auto;box-sizing:border-box;list-style:none;padding:0;margin:10px 0 0}.arco-react-datepicker-shortcuts-wrapper>li{width:100%;padding:6px 16px;cursor:pointer;box-sizing:border-box}.arco-react-datepicker-shortcuts-wrapper>li:hover{color:rgb(var(--primary-6))}.arco-react-descriptions-table{width:100%;border-collapse:collapse}.arco-react-descriptions-table-layout-fixed table{table-layout:fixed}.arco-react-descriptions-title{font-size:16px;color:var(--color-text-1);font-weight:500;line-height:1.5715;margin-bottom:16px}.arco-react-descriptions-item,.arco-react-descriptions-item-label,.arco-react-descriptions-item-value{padding:0 4px 12px 0;text-align:left;box-sizing:border-box;font-size:14px;line-height:1.5715}.arco-react-descriptions-item-label{color:var(--color-text-3);font-weight:500;width:1px;white-space:nowrap}.arco-react-descriptions-table-layout-fixed .arco-react-descriptions-item-label{width:auto}.arco-react-descriptions-item-value{color:var(--color-text-1);font-weight:400}.arco-react-descriptions-item-label-inline,.arco-react-descriptions-item-value-inline{text-align:left;box-sizing:border-box;font-size:14px;line-height:1.5715}.arco-react-descriptions-item-label-inline{color:var(--color-text-3);font-weight:500;margin-bottom:2px}.arco-react-descriptions-item-value-inline{color:var(--color-text-1);font-weight:400}.arco-react-descriptions-layout-inline-horizontal .arco-react-descriptions-item-label-inline{margin-right:4px}.arco-react-descriptions-layout-inline-horizontal .arco-react-descriptions-item-label-inline,.arco-react-descriptions-layout-inline-horizontal .arco-react-descriptions-item-value-inline{display:inline-block;margin-bottom:0}.arco-react-descriptions-border.arco-react-descriptions-layout-inline-vertical .arco-react-descriptions-item{padding:12px 20px}.arco-react-descriptions-border .arco-react-descriptions-body{border:1px solid var(--color-neutral-3);border-radius:var(--border-radius-medium);overflow:hidden}.arco-react-descriptions-border .arco-react-descriptions-row:not(:last-child){border-bottom:1px solid var(--color-neutral-3)}.arco-react-descriptions-border .arco-react-descriptions-item,.arco-react-descriptions-border .arco-react-descriptions-item-label,.arco-react-descriptions-border .arco-react-descriptions-item-value{border-right:1px solid var(--color-neutral-3);padding:7px 20px}.arco-react-descriptions-border .arco-react-descriptions-item-label{background-color:var(--color-fill-1)}.arco-react-descriptions-border .arco-react-descriptions-item-value:last-child{border-right:none}.arco-react-descriptions-border .arco-react-descriptions-item:last-child{border-right:none}.arco-react-descriptions-border.arco-react-descriptions-layout-vertical .arco-react-descriptions-item-label:last-child{border-right:none}.arco-react-descriptions-layout-vertical:not(.arco-react-descriptions-border) .arco-react-descriptions-item-value:first-child{padding-left:0}.arco-react-descriptions-size-mini .arco-react-descriptions-title{margin-bottom:6px}.arco-react-descriptions-size-mini .arco-react-descriptions-item-label,.arco-react-descriptions-size-mini .arco-react-descriptions-item-value{padding-bottom:2px;padding-right:20px;font-size:12px}.arco-react-descriptions-size-mini.arco-react-descriptions-border .arco-react-descriptions-item-label,.arco-react-descriptions-size-mini.arco-react-descriptions-border .arco-react-descriptions-item-value{padding:3px 20px}.arco-react-descriptions-size-mini.arco-react-descriptions-border.arco-react-descriptions-layout-inline-vertical .arco-react-descriptions-item{padding:8px 20px}.arco-react-descriptions-size-small .arco-react-descriptions-title{margin-bottom:8px}.arco-react-descriptions-size-small .arco-react-descriptions-item-label,.arco-react-descriptions-size-small .arco-react-descriptions-item-value{padding-bottom:4px;padding-right:20px;font-size:14px}.arco-react-descriptions-size-small.arco-react-descriptions-border .arco-react-descriptions-item-label,.arco-react-descriptions-size-small.arco-react-descriptions-border .arco-react-descriptions-item-value{padding:3px 20px}.arco-react-descriptions-size-small.arco-react-descriptions-border.arco-react-descriptions-layout-inline-vertical .arco-react-descriptions-item{padding:8px 20px}.arco-react-descriptions-size-medium .arco-react-descriptions-title{margin-bottom:12px}.arco-react-descriptions-size-medium .arco-react-descriptions-item-label,.arco-react-descriptions-size-medium .arco-react-descriptions-item-value{padding-bottom:8px;padding-right:20px;font-size:14px}.arco-react-descriptions-size-medium.arco-react-descriptions-border .arco-react-descriptions-item-label,.arco-react-descriptions-size-medium.arco-react-descriptions-border .arco-react-descriptions-item-value{padding:5px 20px}.arco-react-descriptions-size-medium.arco-react-descriptions-border.arco-react-descriptions-layout-inline-vertical .arco-react-descriptions-item{padding:10px 20px}.arco-react-descriptions-size-large .arco-react-descriptions-title{margin-bottom:20px}.arco-react-descriptions-size-large .arco-react-descriptions-item-label,.arco-react-descriptions-size-large .arco-react-descriptions-item-value{padding-bottom:16px;padding-right:20px;font-size:14px}.arco-react-descriptions-size-large.arco-react-descriptions-border .arco-react-descriptions-item-label,.arco-react-descriptions-size-large.arco-react-descriptions-border .arco-react-descriptions-item-value{padding:9px 20px}.arco-react-descriptions-size-large.arco-react-descriptions-border.arco-react-descriptions-layout-inline-vertical .arco-react-descriptions-item{padding:14px 20px}.arco-react-divider-horizontal{position:relative;width:100%;min-width:100%;max-width:100%;margin:20px 0;border-bottom:1px solid var(--color-neutral-3);clear:both}.arco-react-divider-horizontal.arco-react-divider-with-text{margin:20px 0;display:flex;align-items:center;border-bottom-width:0}.arco-react-divider-horizontal.arco-react-divider-with-text:before,.arco-react-divider-horizontal.arco-react-divider-with-text:after{content:\"\";height:0;flex:1;border-bottom:1px solid;border-bottom-color:inherit}.arco-react-divider-horizontal.arco-react-divider-with-text-left:before{flex-basis:24px;flex-grow:0}.arco-react-divider-horizontal.arco-react-divider-with-text-right:after{flex-basis:24px;flex-grow:0}.arco-react-divider-vertical{display:inline-block;min-width:1px;max-width:1px;height:1em;margin:0 12px;border-left:1px solid var(--color-neutral-3);vertical-align:middle}.arco-react-divider-text{box-sizing:border-box;padding:0 16px;font-size:14px;font-weight:500;line-height:2;color:var(--color-text-1)}.arco-react-drawer-mask{position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--color-mask-bg)}.arco-react-drawer-no-mask{pointer-events:none}.arco-react-drawer-no-mask .arco-react-drawer{pointer-events:auto}.arco-react-drawer-wrapper{position:fixed;width:100%;height:100%;top:0;left:0;z-index:1001}.arco-react-drawer-wrapper-hide{display:none}.arco-react-drawer{position:absolute;width:100%;height:100%;background-color:var(--color-bg-3);line-height:1.5715}.arco-react-drawer-wrapper{position:relative;height:100%}.arco-react-drawer-fixed{position:fixed;top:0;z-index:1001}.arco-react-drawer-inner{height:100%;overflow:hidden}.arco-react-drawer-scroll{overflow:auto;height:100%;display:flex;flex-direction:column}.arco-react-drawer-header{height:48px;display:flex;align-items:center;width:100%;box-sizing:border-box;padding:0 16px;border-bottom:1px solid var(--color-neutral-3);flex-shrink:0}.arco-react-drawer-header-title{font-size:16px;font-weight:500;color:var(--color-text-1);text-align:left}.arco-react-drawer-footer{box-sizing:border-box;padding:16px;border-top:1px solid var(--color-neutral-3);text-align:right;flex-shrink:0}.arco-react-drawer-footer>.arco-react-btn{margin-left:12px}.arco-react-drawer .arco-react-drawer-close-icon{position:absolute;right:20px;top:18px;cursor:pointer;z-index:1;font-size:12px;color:var(--color-text-1)}.arco-react-drawer-content{flex:1;height:100%;padding:12px 16px;color:var(--color-text-1);box-sizing:border-box;position:relative;overflow:auto}.arco-react-dropdown-menu{position:relative;box-sizing:border-box;max-height:200px;padding:4px 0;border:1px solid var(--color-fill-3);border-radius:var(--border-radius-medium);background-color:var(--color-bg-popup);box-shadow:0 4px 10px #0000001a;overflow:auto}.arco-react-dropdown-menu-hidden{display:none}.arco-react-dropdown-menu-item,.arco-react-dropdown-menu-pop-header{position:relative;box-sizing:border-box;width:100%;height:36px;padding:0 12px;font-size:14px;line-height:36px;text-align:left;cursor:pointer;z-index:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--color-text-1);background-color:transparent}.arco-react-dropdown-menu-item.arco-react-dropdown-menu-selected,.arco-react-dropdown-menu-pop-header.arco-react-dropdown-menu-selected{color:var(--color-text-1);background-color:transparent;font-weight:500;transition:all .1s cubic-bezier(0,0,1,1)}.arco-react-dropdown-menu-item:hover,.arco-react-dropdown-menu-pop-header:hover{color:var(--color-text-1);background-color:var(--color-fill-2)}.arco-react-dropdown-menu-item.arco-react-dropdown-menu-active,.arco-react-dropdown-menu-pop-header.arco-react-dropdown-menu-active{box-shadow:0 0 0 1px rgb(var(--primary-6)) inset}.arco-react-dropdown-menu-item.arco-react-dropdown-menu-disabled,.arco-react-dropdown-menu-pop-header.arco-react-dropdown-menu-disabled{color:var(--color-text-4);background-color:transparent;cursor:not-allowed}.arco-react-dropdown-menu-pop-header{display:flex;align-items:center;justify-content:space-between}.arco-react-dropdown-menu-pop-header .arco-react-dropdown-menu-icon-suffix{margin-left:12px}.arco-react-dropdown-menu-group:first-child .arco-react-dropdown-menu-group-title{margin-top:4px}.arco-react-dropdown-menu-group-title{margin-top:8px;box-sizing:border-box;width:100%;padding:0 12px;line-height:20px;font-size:12px;color:var(--color-text-3);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.arco-react-dropdown-menu-dark{border-color:var(--color-menu-dark-bg);background-color:var(--color-menu-dark-bg)}.arco-react-dropdown-menu-dark .arco-react-dropdown-menu-item,.arco-react-dropdown-menu-dark .arco-react-dropdown-menu-pop-header{color:var(--color-text-4);background-color:transparent}.arco-react-dropdown-menu-dark .arco-react-dropdown-menu-item.arco-react-dropdown-menu-selected,.arco-react-dropdown-menu-dark .arco-react-dropdown-menu-pop-header.arco-react-dropdown-menu-selected{color:var(--color-white);background-color:transparent}.arco-react-dropdown-menu-dark .arco-react-dropdown-menu-item.arco-react-dropdown-menu-selected:hover,.arco-react-dropdown-menu-dark .arco-react-dropdown-menu-pop-header.arco-react-dropdown-menu-selected:hover{color:var(--color-white)}.arco-react-dropdown-menu-dark .arco-react-dropdown-menu-item:hover,.arco-react-dropdown-menu-dark .arco-react-dropdown-menu-pop-header:hover{color:var(--color-text-4);background-color:var(--color-menu-dark-hover)}.arco-react-dropdown-menu-dark .arco-react-dropdown-menu-item.arco-react-dropdown-menu-disabled,.arco-react-dropdown-menu-dark .arco-react-dropdown-menu-pop-header.arco-react-dropdown-menu-disabled{color:var(--color-text-2);background-color:transparent}.arco-react-dropdown-menu-dark .arco-react-dropdown-menu-group-title{color:var(--color-text-3)}.arco-react-dropdown-menu-pop-trigger .arco-react-trigger-arrow{display:none}.arco-react-dropdown-menu+.arco-react-trigger-arrow{background-color:var(--color-bg-popup)}.arco-react-empty{width:100%;padding:10px 0;box-sizing:border-box}.arco-react-empty .arco-react-empty-wrapper{width:100%;box-sizing:border-box;text-align:center;color:rgb(var(--gray-5))}.arco-react-empty .arco-react-empty-wrapper .arco-react-empty-image{font-size:48px;line-height:1;margin-bottom:4px}.arco-react-empty .arco-react-empty-wrapper img{height:80px}.arco-react-empty .arco-react-empty-description{color:rgb(var(--gray-5));font-size:14px}.arco-react-form{width:100%;display:flex;flex-direction:column}.arco-react-form-inline{flex-flow:row wrap}.arco-react-form-inline .arco-react-form-item{width:auto;margin-bottom:8px}.arco-react-form-item{width:100%;margin-bottom:20px;display:flex;justify-content:flex-start;align-items:flex-start}.arco-react-form-item>.arco-react-form-label-item{padding-right:16px}.arco-react-form-item.arco-react-form-item-error{margin-bottom:0}.arco-react-form-item-wrapper-flex.arco-react-col{flex:1}.arco-react-form-size-mini .arco-react-form-label-item{line-height:24px;font-size:12px}.arco-react-form-size-mini .arco-react-form-label-item>label{font-size:12px}.arco-react-form-size-mini .arco-react-form-item-control{min-height:24px}.arco-react-form-size-small .arco-react-form-label-item{line-height:28px}.arco-react-form-size-small .arco-react-form-label-item>label{font-size:14px}.arco-react-form-size-small .arco-react-form-item-control{min-height:28px}.arco-react-form-size-large .arco-react-form-label-item{line-height:36px}.arco-react-form-size-large .arco-react-form-label-item>label{font-size:14px}.arco-react-form-size-large .arco-react-form-item-control{min-height:36px}.arco-react-form-extra{font-size:12px;color:var(--color-text-3);margin-top:4px}.arco-react-form-message{font-size:12px;color:rgb(var(--danger-6));min-height:20px;line-height:20px}.arco-react-form-message-help{color:var(--color-text-3)}.arco-react-form-message+.arco-react-form-extra{margin-bottom:4px;margin-top:0}.arco-react-form-layout-vertical{display:block}.arco-react-form-layout-vertical>.arco-react-form-label-item{line-height:1.5715;white-space:normal;text-align:left;padding:0;margin-bottom:8px}.arco-react-form-layout-inline{margin-right:24px}.arco-react-form-label-item{text-align:right;white-space:nowrap;line-height:32px}.arco-react-form-label-item-flex.arco-react-col{flex:0}.arco-react-form-label-item-flex.arco-react-col>label{white-space:nowrap}.arco-react-form-label-item>label{font-size:14px;white-space:normal;color:var(--color-text-2)}.arco-react-form-label-item .arco-react-form-item-symbol{color:rgb(var(--danger-6));font-size:12px;line-height:1}.arco-react-form-label-item .arco-react-form-item-symbol svg{transform:scale(.5)}.arco-react-form-label-item-left{text-align:left}.arco-react-form-item-control{display:flex;align-items:center;min-height:32px;width:100%}.arco-react-form-item-control-children{width:100%;flex:1}.arco-react-form-item-control-wrapper{display:flex;width:100%;flex-direction:column;align-items:flex-start}.arco-react-form .arco-react-slider{display:block}.arco-react-form-item-status-validating .arco-react-input:not(.arco-react-input-disabled),.arco-react-form-item-status-validating .arco-react-input-inner-wrapper:not(.arco-react-input-inner-wrapper-disabled),.arco-react-form-item-status-validating .arco-react-textarea:not(.arco-react-textarea-disabled){border-color:transparent;background-color:var(--color-fill-2)}.arco-react-form-item-status-validating .arco-react-input:not(.arco-react-input-disabled):hover,.arco-react-form-item-status-validating .arco-react-input-inner-wrapper:not(.arco-react-input-inner-wrapper-disabled):hover,.arco-react-form-item-status-validating .arco-react-textarea:not(.arco-react-textarea-disabled):hover{border-color:transparent;background-color:var(--color-fill-3)}.arco-react-form-item-status-validating .arco-react-input-inner-wrapper.arco-react-input-inner-wrapper-focus,.arco-react-form-item-status-validating .arco-react-input-inner-wrapper.arco-react-textarea-focus,.arco-react-form-item-status-validating .arco-react-textarea.arco-react-input-inner-wrapper-focus,.arco-react-form-item-status-validating .arco-react-textarea.arco-react-textarea-focus,.arco-react-form-item-status-validating .arco-react-input-inner-wrapper.arco-react-input-inner-wrapper-focus:hover,.arco-react-form-item-status-validating .arco-react-input-inner-wrapper.arco-react-textarea-focus:hover,.arco-react-form-item-status-validating .arco-react-textarea.arco-react-input-inner-wrapper-focus:hover,.arco-react-form-item-status-validating .arco-react-textarea.arco-react-textarea-focus:hover{border-color:rgb(var(--primary-6));background-color:var(--color-bg-2);box-shadow:0 0 0 0 var(--color-primary-light-2)}.arco-react-form-item-status-validating .arco-react-input:focus,.arco-react-form-item-status-validating .arco-react-input:focus:hover{border-color:rgb(var(--primary-6));background-color:var(--color-bg-2);box-shadow:0 0 0 0 var(--color-primary-light-2)}.arco-react-form-item-status-validating .arco-react-input-inner-wrapper .arco-react-input{background:none;box-shadow:none}.arco-react-form-item-status-validating .arco-react-input-inner-wrapper .arco-react-input:hover{background:none;box-shadow:none}.arco-react-form-item-status-validating .arco-react-select:not(.arco-react-select-disabled) .arco-react-select-view{background-color:var(--color-fill-2);border-color:transparent}.arco-react-form-item-status-validating .arco-react-select:not(.arco-react-select-disabled):hover .arco-react-select-view{background-color:var(--color-fill-3);border-color:transparent}.arco-react-form-item-status-validating .arco-react-select:not(.arco-react-select-disabled).arco-react-select-focused .arco-react-select-view{background-color:var(--color-bg-2);border-color:rgb(var(--primary-6));box-shadow:0 0 0 0 var(--color-primary-light-2)}.arco-react-form-item-status-validating .arco-react-cascader:not(.arco-react-cascader-disabled) .arco-react-cascader-view{background-color:var(--color-fill-2);border-color:transparent}.arco-react-form-item-status-validating .arco-react-cascader:not(.arco-react-cascader-disabled):hover .arco-react-cascader-view{background-color:var(--color-fill-3);border-color:transparent}.arco-react-form-item-status-validating .arco-react-cascader:not(.arco-react-cascader-disabled).arco-react-cascader-focused .arco-react-cascader-view{background-color:var(--color-bg-2);border-color:rgb(var(--primary-6));box-shadow:0 0 0 0 var(--color-primary-light-2)}.arco-react-form-item-status-validating .arco-react-tree-select:not(.arco-react-tree-select-disabled) .arco-react-tree-select-view{background-color:var(--color-fill-2);border-color:transparent}.arco-react-form-item-status-validating .arco-react-tree-select:not(.arco-react-tree-select-disabled):hover .arco-react-tree-select-view{background-color:var(--color-fill-3);border-color:transparent}.arco-react-form-item-status-validating .arco-react-tree-select:not(.arco-react-tree-select-disabled).arco-react-tree-select-focused .arco-react-tree-select-view{background-color:var(--color-bg-2);border-color:rgb(var(--primary-6));box-shadow:0 0 0 0 var(--color-primary-light-2)}.arco-react-form-item-status-validating .arco-react-picker:not(.arco-react-picker-disabled){border-color:transparent;background-color:var(--color-fill-2)}.arco-react-form-item-status-validating .arco-react-picker:not(.arco-react-picker-disabled):hover{border-color:transparent;background-color:var(--color-fill-3)}.arco-react-form-item-status-validating .arco-react-picker-focused:not(.arco-react-picker-disabled),.arco-react-form-item-status-validating .arco-react-picker-focused:not(.arco-react-picker-disabled):hover{border-color:rgb(var(--primary-6));background-color:var(--color-bg-2);box-shadow:0 0 0 0 var(--color-primary-light-2)}.arco-react-form-item-status-validating .arco-react-input-tag{background-color:var(--color-fill-2);border-color:transparent}.arco-react-form-item-status-validating .arco-react-input-tag:hover{border-color:transparent;background-color:var(--color-fill-3)}.arco-react-form-item-status-validating .arco-react-input-tag.arco-react-input-tag-focus{border-color:rgb(var(--primary-6));background-color:var(--color-bg-2);box-shadow:0 0 0 0 var(--color-primary-light-2)}.arco-react-form-item-status-validating .arco-react-form-message-help{color:rgb(var(--primary-6))}.arco-react-form-item-status-validating .arco-react-form-message-help .arco-react-form-message-help-warning{color:rgb(var(--warning-6))}.arco-react-form-item-status-validating .arco-react-form-item-feedback{color:rgb(var(--primary-6))}.arco-react-form-item-status-success .arco-react-input:not(.arco-react-input-disabled),.arco-react-form-item-status-success .arco-react-input-inner-wrapper:not(.arco-react-input-inner-wrapper-disabled),.arco-react-form-item-status-success .arco-react-textarea:not(.arco-react-textarea-disabled){border-color:transparent;background-color:var(--color-fill-2)}.arco-react-form-item-status-success .arco-react-input:not(.arco-react-input-disabled):hover,.arco-react-form-item-status-success .arco-react-input-inner-wrapper:not(.arco-react-input-inner-wrapper-disabled):hover,.arco-react-form-item-status-success .arco-react-textarea:not(.arco-react-textarea-disabled):hover{border-color:transparent;background-color:var(--color-fill-3)}.arco-react-form-item-status-success .arco-react-input-inner-wrapper.arco-react-input-inner-wrapper-focus,.arco-react-form-item-status-success .arco-react-input-inner-wrapper.arco-react-textarea-focus,.arco-react-form-item-status-success .arco-react-textarea.arco-react-input-inner-wrapper-focus,.arco-react-form-item-status-success .arco-react-textarea.arco-react-textarea-focus,.arco-react-form-item-status-success .arco-react-input-inner-wrapper.arco-react-input-inner-wrapper-focus:hover,.arco-react-form-item-status-success .arco-react-input-inner-wrapper.arco-react-textarea-focus:hover,.arco-react-form-item-status-success .arco-react-textarea.arco-react-input-inner-wrapper-focus:hover,.arco-react-form-item-status-success .arco-react-textarea.arco-react-textarea-focus:hover{border-color:rgb(var(--success-6));background-color:var(--color-bg-2);box-shadow:0 0 0 0 var(--color-success-light-2)}.arco-react-form-item-status-success .arco-react-input:focus,.arco-react-form-item-status-success .arco-react-input:focus:hover{border-color:rgb(var(--success-6));background-color:var(--color-bg-2);box-shadow:0 0 0 0 var(--color-success-light-2)}.arco-react-form-item-status-success .arco-react-input-inner-wrapper .arco-react-input{background:none;box-shadow:none}.arco-react-form-item-status-success .arco-react-input-inner-wrapper .arco-react-input:hover{background:none;box-shadow:none}.arco-react-form-item-status-success .arco-react-select:not(.arco-react-select-disabled) .arco-react-select-view{background-color:var(--color-fill-2);border-color:transparent}.arco-react-form-item-status-success .arco-react-select:not(.arco-react-select-disabled):hover .arco-react-select-view{background-color:var(--color-fill-3);border-color:transparent}.arco-react-form-item-status-success .arco-react-select:not(.arco-react-select-disabled).arco-react-select-focused .arco-react-select-view{background-color:var(--color-bg-2);border-color:rgb(var(--success-6));box-shadow:0 0 0 0 var(--color-success-light-2)}.arco-react-form-item-status-success .arco-react-cascader:not(.arco-react-cascader-disabled) .arco-react-cascader-view{background-color:var(--color-fill-2);border-color:transparent}.arco-react-form-item-status-success .arco-react-cascader:not(.arco-react-cascader-disabled):hover .arco-react-cascader-view{background-color:var(--color-fill-3);border-color:transparent}.arco-react-form-item-status-success .arco-react-cascader:not(.arco-react-cascader-disabled).arco-react-cascader-focused .arco-react-cascader-view{background-color:var(--color-bg-2);border-color:rgb(var(--success-6));box-shadow:0 0 0 0 var(--color-success-light-2)}.arco-react-form-item-status-success .arco-react-tree-select:not(.arco-react-tree-select-disabled) .arco-react-tree-select-view{background-color:var(--color-fill-2);border-color:transparent}.arco-react-form-item-status-success .arco-react-tree-select:not(.arco-react-tree-select-disabled):hover .arco-react-tree-select-view{background-color:var(--color-fill-3);border-color:transparent}.arco-react-form-item-status-success .arco-react-tree-select:not(.arco-react-tree-select-disabled).arco-react-tree-select-focused .arco-react-tree-select-view{background-color:var(--color-bg-2);border-color:rgb(var(--success-6));box-shadow:0 0 0 0 var(--color-success-light-2)}.arco-react-form-item-status-success .arco-react-picker:not(.arco-react-picker-disabled){border-color:transparent;background-color:var(--color-fill-2)}.arco-react-form-item-status-success .arco-react-picker:not(.arco-react-picker-disabled):hover{border-color:transparent;background-color:var(--color-fill-3)}.arco-react-form-item-status-success .arco-react-picker-focused:not(.arco-react-picker-disabled),.arco-react-form-item-status-success .arco-react-picker-focused:not(.arco-react-picker-disabled):hover{border-color:rgb(var(--success-6));background-color:var(--color-bg-2);box-shadow:0 0 0 0 var(--color-success-light-2)}.arco-react-form-item-status-success .arco-react-input-tag{background-color:var(--color-fill-2);border-color:transparent}.arco-react-form-item-status-success .arco-react-input-tag:hover{border-color:transparent;background-color:var(--color-fill-3)}.arco-react-form-item-status-success .arco-react-input-tag.arco-react-input-tag-focus{border-color:rgb(var(--success-6));background-color:var(--color-bg-2);box-shadow:0 0 0 0 var(--color-success-light-2)}.arco-react-form-item-status-success .arco-react-form-message-help{color:rgb(var(--success-6))}.arco-react-form-item-status-success .arco-react-form-message-help .arco-react-form-message-help-warning{color:rgb(var(--warning-6))}.arco-react-form-item-status-success .arco-react-form-item-feedback{color:rgb(var(--success-6))}.arco-react-form-item-status-warning .arco-react-input:not(.arco-react-input-disabled),.arco-react-form-item-status-warning .arco-react-input-inner-wrapper:not(.arco-react-input-inner-wrapper-disabled),.arco-react-form-item-status-warning .arco-react-textarea:not(.arco-react-textarea-disabled){border-color:transparent;background-color:var(--color-warning-light-1)}.arco-react-form-item-status-warning .arco-react-input:not(.arco-react-input-disabled):hover,.arco-react-form-item-status-warning .arco-react-input-inner-wrapper:not(.arco-react-input-inner-wrapper-disabled):hover,.arco-react-form-item-status-warning .arco-react-textarea:not(.arco-react-textarea-disabled):hover{border-color:transparent;background-color:var(--color-warning-light-2)}.arco-react-form-item-status-warning .arco-react-input-inner-wrapper.arco-react-input-inner-wrapper-focus,.arco-react-form-item-status-warning .arco-react-input-inner-wrapper.arco-react-textarea-focus,.arco-react-form-item-status-warning .arco-react-textarea.arco-react-input-inner-wrapper-focus,.arco-react-form-item-status-warning .arco-react-textarea.arco-react-textarea-focus,.arco-react-form-item-status-warning .arco-react-input-inner-wrapper.arco-react-input-inner-wrapper-focus:hover,.arco-react-form-item-status-warning .arco-react-input-inner-wrapper.arco-react-textarea-focus:hover,.arco-react-form-item-status-warning .arco-react-textarea.arco-react-input-inner-wrapper-focus:hover,.arco-react-form-item-status-warning .arco-react-textarea.arco-react-textarea-focus:hover{border-color:rgb(var(--warning-6));background-color:var(--color-bg-2);box-shadow:0 0 0 0 var(--color-warning-light-2)}.arco-react-form-item-status-warning .arco-react-input:focus,.arco-react-form-item-status-warning .arco-react-input:focus:hover{border-color:rgb(var(--warning-6));background-color:var(--color-bg-2);box-shadow:0 0 0 0 var(--color-warning-light-2)}.arco-react-form-item-status-warning .arco-react-input-inner-wrapper .arco-react-input{background:none;box-shadow:none}.arco-react-form-item-status-warning .arco-react-input-inner-wrapper .arco-react-input:hover{background:none;box-shadow:none}.arco-react-form-item-status-warning .arco-react-select:not(.arco-react-select-disabled) .arco-react-select-view{background-color:var(--color-warning-light-1);border-color:transparent}.arco-react-form-item-status-warning .arco-react-select:not(.arco-react-select-disabled):hover .arco-react-select-view{background-color:var(--color-warning-light-2);border-color:transparent}.arco-react-form-item-status-warning .arco-react-select:not(.arco-react-select-disabled).arco-react-select-focused .arco-react-select-view{background-color:var(--color-bg-2);border-color:rgb(var(--warning-6));box-shadow:0 0 0 0 var(--color-warning-light-2)}.arco-react-form-item-status-warning .arco-react-cascader:not(.arco-react-cascader-disabled) .arco-react-cascader-view{background-color:var(--color-warning-light-1);border-color:transparent}.arco-react-form-item-status-warning .arco-react-cascader:not(.arco-react-cascader-disabled):hover .arco-react-cascader-view{background-color:var(--color-warning-light-2);border-color:transparent}.arco-react-form-item-status-warning .arco-react-cascader:not(.arco-react-cascader-disabled).arco-react-cascader-focused .arco-react-cascader-view{background-color:var(--color-bg-2);border-color:rgb(var(--warning-6));box-shadow:0 0 0 0 var(--color-warning-light-2)}.arco-react-form-item-status-warning .arco-react-tree-select:not(.arco-react-tree-select-disabled) .arco-react-tree-select-view{background-color:var(--color-warning-light-1);border-color:transparent}.arco-react-form-item-status-warning .arco-react-tree-select:not(.arco-react-tree-select-disabled):hover .arco-react-tree-select-view{background-color:var(--color-warning-light-2);border-color:transparent}.arco-react-form-item-status-warning .arco-react-tree-select:not(.arco-react-tree-select-disabled).arco-react-tree-select-focused .arco-react-tree-select-view{background-color:var(--color-bg-2);border-color:rgb(var(--warning-6));box-shadow:0 0 0 0 var(--color-warning-light-2)}.arco-react-form-item-status-warning .arco-react-picker:not(.arco-react-picker-disabled){border-color:transparent;background-color:var(--color-warning-light-1)}.arco-react-form-item-status-warning .arco-react-picker:not(.arco-react-picker-disabled):hover{border-color:transparent;background-color:var(--color-warning-light-2)}.arco-react-form-item-status-warning .arco-react-picker-focused:not(.arco-react-picker-disabled),.arco-react-form-item-status-warning .arco-react-picker-focused:not(.arco-react-picker-disabled):hover{border-color:rgb(var(--warning-6));background-color:var(--color-bg-2);box-shadow:0 0 0 0 var(--color-warning-light-2)}.arco-react-form-item-status-warning .arco-react-input-tag{background-color:var(--color-warning-light-1);border-color:transparent}.arco-react-form-item-status-warning .arco-react-input-tag:hover{border-color:transparent;background-color:var(--color-warning-light-2)}.arco-react-form-item-status-warning .arco-react-input-tag.arco-react-input-tag-focus{border-color:rgb(var(--warning-6));background-color:var(--color-bg-2);box-shadow:0 0 0 0 var(--color-warning-light-2)}.arco-react-form-item-status-warning .arco-react-form-message-help{color:rgb(var(--warning-6))}.arco-react-form-item-status-warning .arco-react-form-message-help .arco-react-form-message-help-warning{color:rgb(var(--warning-6))}.arco-react-form-item-status-warning .arco-react-form-item-feedback{color:rgb(var(--warning-6))}.arco-react-form-item-status-error .arco-react-input:not(.arco-react-input-disabled),.arco-react-form-item-status-error .arco-react-input-inner-wrapper:not(.arco-react-input-inner-wrapper-disabled),.arco-react-form-item-status-error .arco-react-textarea:not(.arco-react-textarea-disabled){border-color:transparent;background-color:var(--color-danger-light-1)}.arco-react-form-item-status-error .arco-react-input:not(.arco-react-input-disabled):hover,.arco-react-form-item-status-error .arco-react-input-inner-wrapper:not(.arco-react-input-inner-wrapper-disabled):hover,.arco-react-form-item-status-error .arco-react-textarea:not(.arco-react-textarea-disabled):hover{border-color:transparent;background-color:var(--color-danger-light-2)}.arco-react-form-item-status-error .arco-react-input-inner-wrapper.arco-react-input-inner-wrapper-focus,.arco-react-form-item-status-error .arco-react-input-inner-wrapper.arco-react-textarea-focus,.arco-react-form-item-status-error .arco-react-textarea.arco-react-input-inner-wrapper-focus,.arco-react-form-item-status-error .arco-react-textarea.arco-react-textarea-focus,.arco-react-form-item-status-error .arco-react-input-inner-wrapper.arco-react-input-inner-wrapper-focus:hover,.arco-react-form-item-status-error .arco-react-input-inner-wrapper.arco-react-textarea-focus:hover,.arco-react-form-item-status-error .arco-react-textarea.arco-react-input-inner-wrapper-focus:hover,.arco-react-form-item-status-error .arco-react-textarea.arco-react-textarea-focus:hover{border-color:rgb(var(--danger-6));background-color:var(--color-bg-2);box-shadow:0 0 0 0 var(--color-danger-light-2)}.arco-react-form-item-status-error .arco-react-input:focus,.arco-react-form-item-status-error .arco-react-input:focus:hover{border-color:rgb(var(--danger-6));background-color:var(--color-bg-2);box-shadow:0 0 0 0 var(--color-danger-light-2)}.arco-react-form-item-status-error .arco-react-input-inner-wrapper .arco-react-input{background:none;box-shadow:none}.arco-react-form-item-status-error .arco-react-input-inner-wrapper .arco-react-input:hover{background:none;box-shadow:none}.arco-react-form-item-status-error .arco-react-select:not(.arco-react-select-disabled) .arco-react-select-view{background-color:var(--color-danger-light-1);border-color:transparent}.arco-react-form-item-status-error .arco-react-select:not(.arco-react-select-disabled):hover .arco-react-select-view{background-color:var(--color-danger-light-2);border-color:transparent}.arco-react-form-item-status-error .arco-react-select:not(.arco-react-select-disabled).arco-react-select-focused .arco-react-select-view{background-color:var(--color-bg-2);border-color:rgb(var(--danger-6));box-shadow:0 0 0 0 var(--color-danger-light-2)}.arco-react-form-item-status-error .arco-react-cascader:not(.arco-react-cascader-disabled) .arco-react-cascader-view{background-color:var(--color-danger-light-1);border-color:transparent}.arco-react-form-item-status-error .arco-react-cascader:not(.arco-react-cascader-disabled):hover .arco-react-cascader-view{background-color:var(--color-danger-light-2);border-color:transparent}.arco-react-form-item-status-error .arco-react-cascader:not(.arco-react-cascader-disabled).arco-react-cascader-focused .arco-react-cascader-view{background-color:var(--color-bg-2);border-color:rgb(var(--danger-6));box-shadow:0 0 0 0 var(--color-danger-light-2)}.arco-react-form-item-status-error .arco-react-tree-select:not(.arco-react-tree-select-disabled) .arco-react-tree-select-view{background-color:var(--color-danger-light-1);border-color:transparent}.arco-react-form-item-status-error .arco-react-tree-select:not(.arco-react-tree-select-disabled):hover .arco-react-tree-select-view{background-color:var(--color-danger-light-2);border-color:transparent}.arco-react-form-item-status-error .arco-react-tree-select:not(.arco-react-tree-select-disabled).arco-react-tree-select-focused .arco-react-tree-select-view{background-color:var(--color-bg-2);border-color:rgb(var(--danger-6));box-shadow:0 0 0 0 var(--color-danger-light-2)}.arco-react-form-item-status-error .arco-react-picker:not(.arco-react-picker-disabled){border-color:transparent;background-color:var(--color-danger-light-1)}.arco-react-form-item-status-error .arco-react-picker:not(.arco-react-picker-disabled):hover{border-color:transparent;background-color:var(--color-danger-light-2)}.arco-react-form-item-status-error .arco-react-picker-focused:not(.arco-react-picker-disabled),.arco-react-form-item-status-error .arco-react-picker-focused:not(.arco-react-picker-disabled):hover{border-color:rgb(var(--danger-6));background-color:var(--color-bg-2);box-shadow:0 0 0 0 var(--color-danger-light-2)}.arco-react-form-item-status-error .arco-react-input-tag{background-color:var(--color-danger-light-1);border-color:transparent}.arco-react-form-item-status-error .arco-react-input-tag:hover{border-color:transparent;background-color:var(--color-danger-light-2)}.arco-react-form-item-status-error .arco-react-input-tag.arco-react-input-tag-focus{border-color:rgb(var(--danger-6));background-color:var(--color-bg-2);box-shadow:0 0 0 0 var(--color-danger-light-2)}.arco-react-form-item-status-error .arco-react-form-message-help{color:rgb(var(--danger-6))}.arco-react-form-item-status-error .arco-react-form-message-help .arco-react-form-message-help-warning{color:rgb(var(--warning-6))}.arco-react-form-item-status-error .arco-react-form-item-feedback{color:rgb(var(--danger-6))}.arco-react-form-item-control-children{position:relative}.arco-react-form-item-feedback{position:absolute;right:9px;top:50%;font-size:14px;transform:translateY(-50%)}.arco-react-form-item-feedback .arco-react-icon-loading{font-size:12px}.arco-react-form-item-has-feedback .arco-react-input,.arco-react-form-item-has-feedback .arco-react-input-inner-wrapper,.arco-react-form-item-has-feedback .arco-react-textarea{padding-right:28px}.arco-react-form-item-has-feedback .arco-react-input-number-mode-embed .arco-react-input-number-step-layer{right:24px}.arco-react-form-item-has-feedback .arco-react-select.arco-react-select-multiple .arco-react-select-view,.arco-react-form-item-has-feedback .arco-react-select.arco-react-select-single .arco-react-select-view{padding-right:28px}.arco-react-form-item-has-feedback .arco-react-select.arco-react-select-multiple .arco-react-select-suffix{padding-right:0}.arco-react-form-item-has-feedback .arco-react-cascader.arco-react-cascader-multiple .arco-react-cascader-view,.arco-react-form-item-has-feedback .arco-react-cascader.arco-react-cascader-single .arco-react-cascader-view{padding-right:28px}.arco-react-form-item-has-feedback .arco-react-cascader.arco-react-cascader-multiple .arco-react-cascader-suffix{padding-right:0}.arco-react-form-item-has-feedback .arco-react-tree-select.arco-react-tree-select-multiple .arco-react-tree-select-view,.arco-react-form-item-has-feedback .arco-react-tree-select.arco-react-tree-select-single .arco-react-tree-select-view{padding-right:28px}.arco-react-form-item-has-feedback .arco-react-tree-select.arco-react-tree-select-multiple .arco-react-tree-select-suffix{padding-right:0}.arco-react-form-item-has-feedback .arco-react-picker{padding-right:28px}.arco-react-form-item-has-feedback .arco-react-picker-suffix .arco-react-picker-suffix-icon,.arco-react-form-item-has-feedback .arco-react-picker-suffix .arco-react-picker-clear-icon{margin-right:0;margin-left:0}.arco-react-form-item-has-feedback .arco-react-input-tag{padding-right:23px}.arco-react-form-item-has-feedback .arco-react-input-tag-suffix{padding-right:0}.formblink-enter,.formblink-appear{opacity:0}.formblink-enter-active,.formblink-appear-active{opacity:1;transition:opacity .3s cubic-bezier(0,0,1,1)}.formblink-enter-done{animation:arco-react-form-blink .5s cubic-bezier(0,0,1,1)}@keyframes arco-react-form-blink{0%{opacity:1}50%{opacity:.2}to{opacity:1}}.arco-react-row{display:flex;flex-flow:row wrap}.arco-react-row-align-start{align-items:flex-start}.arco-react-row-align-center{align-items:center}.arco-react-row-align-end{align-items:flex-end}.arco-react-row-justify-start{justify-content:flex-start}.arco-react-row-justify-center{justify-content:center}.arco-react-row-justify-end{justify-content:flex-end}.arco-react-row-justify-space-around{justify-content:space-around}.arco-react-row-justify-space-between{justify-content:space-between}.arco-react-col{position:relative;box-sizing:border-box}.arco-react-col-0{display:none}.arco-react-col-1{width:4.16666667%;flex:0 0 4.16666667%}.arco-react-col-2{width:8.33333333%;flex:0 0 8.33333333%}.arco-react-col-3{width:12.5%;flex:0 0 12.5%}.arco-react-col-4{width:16.66666667%;flex:0 0 16.66666667%}.arco-react-col-5{width:20.83333333%;flex:0 0 20.83333333%}.arco-react-col-6{width:25%;flex:0 0 25%}.arco-react-col-7{width:29.16666667%;flex:0 0 29.16666667%}.arco-react-col-8{width:33.33333333%;flex:0 0 33.33333333%}.arco-react-col-9{width:37.5%;flex:0 0 37.5%}.arco-react-col-10{width:41.66666667%;flex:0 0 41.66666667%}.arco-react-col-11{width:45.83333333%;flex:0 0 45.83333333%}.arco-react-col-12{width:50%;flex:0 0 50%}.arco-react-col-13{width:54.16666667%;flex:0 0 54.16666667%}.arco-react-col-14{width:58.33333333%;flex:0 0 58.33333333%}.arco-react-col-15{width:62.5%;flex:0 0 62.5%}.arco-react-col-16{width:66.66666667%;flex:0 0 66.66666667%}.arco-react-col-17{width:70.83333333%;flex:0 0 70.83333333%}.arco-react-col-18{width:75%;flex:0 0 75%}.arco-react-col-19{width:79.16666667%;flex:0 0 79.16666667%}.arco-react-col-20{width:83.33333333%;flex:0 0 83.33333333%}.arco-react-col-21{width:87.5%;flex:0 0 87.5%}.arco-react-col-22{width:91.66666667%;flex:0 0 91.66666667%}.arco-react-col-23{width:95.83333333%;flex:0 0 95.83333333%}.arco-react-col-24{width:100%;flex:0 0 100%}.arco-react-col-offset-0{margin-left:0%}.arco-react-col-offset-1{margin-left:4.16666667%}.arco-react-col-offset-2{margin-left:8.33333333%}.arco-react-col-offset-3{margin-left:12.5%}.arco-react-col-offset-4{margin-left:16.66666667%}.arco-react-col-offset-5{margin-left:20.83333333%}.arco-react-col-offset-6{margin-left:25%}.arco-react-col-offset-7{margin-left:29.16666667%}.arco-react-col-offset-8{margin-left:33.33333333%}.arco-react-col-offset-9{margin-left:37.5%}.arco-react-col-offset-10{margin-left:41.66666667%}.arco-react-col-offset-11{margin-left:45.83333333%}.arco-react-col-offset-12{margin-left:50%}.arco-react-col-offset-13{margin-left:54.16666667%}.arco-react-col-offset-14{margin-left:58.33333333%}.arco-react-col-offset-15{margin-left:62.5%}.arco-react-col-offset-16{margin-left:66.66666667%}.arco-react-col-offset-17{margin-left:70.83333333%}.arco-react-col-offset-18{margin-left:75%}.arco-react-col-offset-19{margin-left:79.16666667%}.arco-react-col-offset-20{margin-left:83.33333333%}.arco-react-col-offset-21{margin-left:87.5%}.arco-react-col-offset-22{margin-left:91.66666667%}.arco-react-col-offset-23{margin-left:95.83333333%}.arco-react-col-order-0{order:0}.arco-react-col-order-1{order:1}.arco-react-col-order-2{order:2}.arco-react-col-order-3{order:3}.arco-react-col-order-4{order:4}.arco-react-col-order-5{order:5}.arco-react-col-order-6{order:6}.arco-react-col-order-7{order:7}.arco-react-col-order-8{order:8}.arco-react-col-order-9{order:9}.arco-react-col-order-10{order:10}.arco-react-col-order-11{order:11}.arco-react-col-order-12{order:12}.arco-react-col-order-13{order:13}.arco-react-col-order-14{order:14}.arco-react-col-order-15{order:15}.arco-react-col-order-16{order:16}.arco-react-col-order-17{order:17}.arco-react-col-order-18{order:18}.arco-react-col-order-19{order:19}.arco-react-col-order-20{order:20}.arco-react-col-order-21{order:21}.arco-react-col-order-22{order:22}.arco-react-col-order-23{order:23}.arco-react-col-order-24{order:24}.arco-react-col-pull-0{right:0%}.arco-react-col-pull-1{right:4.16666667%}.arco-react-col-pull-2{right:8.33333333%}.arco-react-col-pull-3{right:12.5%}.arco-react-col-pull-4{right:16.66666667%}.arco-react-col-pull-5{right:20.83333333%}.arco-react-col-pull-6{right:25%}.arco-react-col-pull-7{right:29.16666667%}.arco-react-col-pull-8{right:33.33333333%}.arco-react-col-pull-9{right:37.5%}.arco-react-col-pull-10{right:41.66666667%}.arco-react-col-pull-11{right:45.83333333%}.arco-react-col-pull-12{right:50%}.arco-react-col-pull-13{right:54.16666667%}.arco-react-col-pull-14{right:58.33333333%}.arco-react-col-pull-15{right:62.5%}.arco-react-col-pull-16{right:66.66666667%}.arco-react-col-pull-17{right:70.83333333%}.arco-react-col-pull-18{right:75%}.arco-react-col-pull-19{right:79.16666667%}.arco-react-col-pull-20{right:83.33333333%}.arco-react-col-pull-21{right:87.5%}.arco-react-col-pull-22{right:91.66666667%}.arco-react-col-pull-23{right:95.83333333%}.arco-react-col-pull-24{right:100%}.arco-react-col-push-0{left:0%}.arco-react-col-push-1{left:4.16666667%}.arco-react-col-push-2{left:8.33333333%}.arco-react-col-push-3{left:12.5%}.arco-react-col-push-4{left:16.66666667%}.arco-react-col-push-5{left:20.83333333%}.arco-react-col-push-6{left:25%}.arco-react-col-push-7{left:29.16666667%}.arco-react-col-push-8{left:33.33333333%}.arco-react-col-push-9{left:37.5%}.arco-react-col-push-10{left:41.66666667%}.arco-react-col-push-11{left:45.83333333%}.arco-react-col-push-12{left:50%}.arco-react-col-push-13{left:54.16666667%}.arco-react-col-push-14{left:58.33333333%}.arco-react-col-push-15{left:62.5%}.arco-react-col-push-16{left:66.66666667%}.arco-react-col-push-17{left:70.83333333%}.arco-react-col-push-18{left:75%}.arco-react-col-push-19{left:79.16666667%}.arco-react-col-push-20{left:83.33333333%}.arco-react-col-push-21{left:87.5%}.arco-react-col-push-22{left:91.66666667%}.arco-react-col-push-23{left:95.83333333%}.arco-react-col-push-24{left:100%}.arco-react-col-xs-0{display:none}.arco-react-col-xs-1{width:4.16666667%;flex:0 0 4.16666667%}.arco-react-col-xs-2{width:8.33333333%;flex:0 0 8.33333333%}.arco-react-col-xs-3{width:12.5%;flex:0 0 12.5%}.arco-react-col-xs-4{width:16.66666667%;flex:0 0 16.66666667%}.arco-react-col-xs-5{width:20.83333333%;flex:0 0 20.83333333%}.arco-react-col-xs-6{width:25%;flex:0 0 25%}.arco-react-col-xs-7{width:29.16666667%;flex:0 0 29.16666667%}.arco-react-col-xs-8{width:33.33333333%;flex:0 0 33.33333333%}.arco-react-col-xs-9{width:37.5%;flex:0 0 37.5%}.arco-react-col-xs-10{width:41.66666667%;flex:0 0 41.66666667%}.arco-react-col-xs-11{width:45.83333333%;flex:0 0 45.83333333%}.arco-react-col-xs-12{width:50%;flex:0 0 50%}.arco-react-col-xs-13{width:54.16666667%;flex:0 0 54.16666667%}.arco-react-col-xs-14{width:58.33333333%;flex:0 0 58.33333333%}.arco-react-col-xs-15{width:62.5%;flex:0 0 62.5%}.arco-react-col-xs-16{width:66.66666667%;flex:0 0 66.66666667%}.arco-react-col-xs-17{width:70.83333333%;flex:0 0 70.83333333%}.arco-react-col-xs-18{width:75%;flex:0 0 75%}.arco-react-col-xs-19{width:79.16666667%;flex:0 0 79.16666667%}.arco-react-col-xs-20{width:83.33333333%;flex:0 0 83.33333333%}.arco-react-col-xs-21{width:87.5%;flex:0 0 87.5%}.arco-react-col-xs-22{width:91.66666667%;flex:0 0 91.66666667%}.arco-react-col-xs-23{width:95.83333333%;flex:0 0 95.83333333%}.arco-react-col-xs-24{width:100%;flex:0 0 100%}.arco-react-col-xs-offset-0{margin-left:0%}.arco-react-col-xs-offset-1{margin-left:4.16666667%}.arco-react-col-xs-offset-2{margin-left:8.33333333%}.arco-react-col-xs-offset-3{margin-left:12.5%}.arco-react-col-xs-offset-4{margin-left:16.66666667%}.arco-react-col-xs-offset-5{margin-left:20.83333333%}.arco-react-col-xs-offset-6{margin-left:25%}.arco-react-col-xs-offset-7{margin-left:29.16666667%}.arco-react-col-xs-offset-8{margin-left:33.33333333%}.arco-react-col-xs-offset-9{margin-left:37.5%}.arco-react-col-xs-offset-10{margin-left:41.66666667%}.arco-react-col-xs-offset-11{margin-left:45.83333333%}.arco-react-col-xs-offset-12{margin-left:50%}.arco-react-col-xs-offset-13{margin-left:54.16666667%}.arco-react-col-xs-offset-14{margin-left:58.33333333%}.arco-react-col-xs-offset-15{margin-left:62.5%}.arco-react-col-xs-offset-16{margin-left:66.66666667%}.arco-react-col-xs-offset-17{margin-left:70.83333333%}.arco-react-col-xs-offset-18{margin-left:75%}.arco-react-col-xs-offset-19{margin-left:79.16666667%}.arco-react-col-xs-offset-20{margin-left:83.33333333%}.arco-react-col-xs-offset-21{margin-left:87.5%}.arco-react-col-xs-offset-22{margin-left:91.66666667%}.arco-react-col-xs-offset-23{margin-left:95.83333333%}.arco-react-col-xs-order-0{order:0}.arco-react-col-xs-order-1{order:1}.arco-react-col-xs-order-2{order:2}.arco-react-col-xs-order-3{order:3}.arco-react-col-xs-order-4{order:4}.arco-react-col-xs-order-5{order:5}.arco-react-col-xs-order-6{order:6}.arco-react-col-xs-order-7{order:7}.arco-react-col-xs-order-8{order:8}.arco-react-col-xs-order-9{order:9}.arco-react-col-xs-order-10{order:10}.arco-react-col-xs-order-11{order:11}.arco-react-col-xs-order-12{order:12}.arco-react-col-xs-order-13{order:13}.arco-react-col-xs-order-14{order:14}.arco-react-col-xs-order-15{order:15}.arco-react-col-xs-order-16{order:16}.arco-react-col-xs-order-17{order:17}.arco-react-col-xs-order-18{order:18}.arco-react-col-xs-order-19{order:19}.arco-react-col-xs-order-20{order:20}.arco-react-col-xs-order-21{order:21}.arco-react-col-xs-order-22{order:22}.arco-react-col-xs-order-23{order:23}.arco-react-col-xs-order-24{order:24}.arco-react-col-xs-pull-0{right:0%}.arco-react-col-xs-pull-1{right:4.16666667%}.arco-react-col-xs-pull-2{right:8.33333333%}.arco-react-col-xs-pull-3{right:12.5%}.arco-react-col-xs-pull-4{right:16.66666667%}.arco-react-col-xs-pull-5{right:20.83333333%}.arco-react-col-xs-pull-6{right:25%}.arco-react-col-xs-pull-7{right:29.16666667%}.arco-react-col-xs-pull-8{right:33.33333333%}.arco-react-col-xs-pull-9{right:37.5%}.arco-react-col-xs-pull-10{right:41.66666667%}.arco-react-col-xs-pull-11{right:45.83333333%}.arco-react-col-xs-pull-12{right:50%}.arco-react-col-xs-pull-13{right:54.16666667%}.arco-react-col-xs-pull-14{right:58.33333333%}.arco-react-col-xs-pull-15{right:62.5%}.arco-react-col-xs-pull-16{right:66.66666667%}.arco-react-col-xs-pull-17{right:70.83333333%}.arco-react-col-xs-pull-18{right:75%}.arco-react-col-xs-pull-19{right:79.16666667%}.arco-react-col-xs-pull-20{right:83.33333333%}.arco-react-col-xs-pull-21{right:87.5%}.arco-react-col-xs-pull-22{right:91.66666667%}.arco-react-col-xs-pull-23{right:95.83333333%}.arco-react-col-xs-pull-24{right:100%}.arco-react-col-xs-push-0{left:0%}.arco-react-col-xs-push-1{left:4.16666667%}.arco-react-col-xs-push-2{left:8.33333333%}.arco-react-col-xs-push-3{left:12.5%}.arco-react-col-xs-push-4{left:16.66666667%}.arco-react-col-xs-push-5{left:20.83333333%}.arco-react-col-xs-push-6{left:25%}.arco-react-col-xs-push-7{left:29.16666667%}.arco-react-col-xs-push-8{left:33.33333333%}.arco-react-col-xs-push-9{left:37.5%}.arco-react-col-xs-push-10{left:41.66666667%}.arco-react-col-xs-push-11{left:45.83333333%}.arco-react-col-xs-push-12{left:50%}.arco-react-col-xs-push-13{left:54.16666667%}.arco-react-col-xs-push-14{left:58.33333333%}.arco-react-col-xs-push-15{left:62.5%}.arco-react-col-xs-push-16{left:66.66666667%}.arco-react-col-xs-push-17{left:70.83333333%}.arco-react-col-xs-push-18{left:75%}.arco-react-col-xs-push-19{left:79.16666667%}.arco-react-col-xs-push-20{left:83.33333333%}.arco-react-col-xs-push-21{left:87.5%}.arco-react-col-xs-push-22{left:91.66666667%}.arco-react-col-xs-push-23{left:95.83333333%}.arco-react-col-xs-push-24{left:100%}@media (min-width: 576px){.arco-react-col-sm-0{display:none}.arco-react-col-sm-1{width:4.16666667%;flex:0 0 4.16666667%}.arco-react-col-sm-2{width:8.33333333%;flex:0 0 8.33333333%}.arco-react-col-sm-3{width:12.5%;flex:0 0 12.5%}.arco-react-col-sm-4{width:16.66666667%;flex:0 0 16.66666667%}.arco-react-col-sm-5{width:20.83333333%;flex:0 0 20.83333333%}.arco-react-col-sm-6{width:25%;flex:0 0 25%}.arco-react-col-sm-7{width:29.16666667%;flex:0 0 29.16666667%}.arco-react-col-sm-8{width:33.33333333%;flex:0 0 33.33333333%}.arco-react-col-sm-9{width:37.5%;flex:0 0 37.5%}.arco-react-col-sm-10{width:41.66666667%;flex:0 0 41.66666667%}.arco-react-col-sm-11{width:45.83333333%;flex:0 0 45.83333333%}.arco-react-col-sm-12{width:50%;flex:0 0 50%}.arco-react-col-sm-13{width:54.16666667%;flex:0 0 54.16666667%}.arco-react-col-sm-14{width:58.33333333%;flex:0 0 58.33333333%}.arco-react-col-sm-15{width:62.5%;flex:0 0 62.5%}.arco-react-col-sm-16{width:66.66666667%;flex:0 0 66.66666667%}.arco-react-col-sm-17{width:70.83333333%;flex:0 0 70.83333333%}.arco-react-col-sm-18{width:75%;flex:0 0 75%}.arco-react-col-sm-19{width:79.16666667%;flex:0 0 79.16666667%}.arco-react-col-sm-20{width:83.33333333%;flex:0 0 83.33333333%}.arco-react-col-sm-21{width:87.5%;flex:0 0 87.5%}.arco-react-col-sm-22{width:91.66666667%;flex:0 0 91.66666667%}.arco-react-col-sm-23{width:95.83333333%;flex:0 0 95.83333333%}.arco-react-col-sm-24{width:100%;flex:0 0 100%}.arco-react-col-sm-offset-0{margin-left:0%}.arco-react-col-sm-offset-1{margin-left:4.16666667%}.arco-react-col-sm-offset-2{margin-left:8.33333333%}.arco-react-col-sm-offset-3{margin-left:12.5%}.arco-react-col-sm-offset-4{margin-left:16.66666667%}.arco-react-col-sm-offset-5{margin-left:20.83333333%}.arco-react-col-sm-offset-6{margin-left:25%}.arco-react-col-sm-offset-7{margin-left:29.16666667%}.arco-react-col-sm-offset-8{margin-left:33.33333333%}.arco-react-col-sm-offset-9{margin-left:37.5%}.arco-react-col-sm-offset-10{margin-left:41.66666667%}.arco-react-col-sm-offset-11{margin-left:45.83333333%}.arco-react-col-sm-offset-12{margin-left:50%}.arco-react-col-sm-offset-13{margin-left:54.16666667%}.arco-react-col-sm-offset-14{margin-left:58.33333333%}.arco-react-col-sm-offset-15{margin-left:62.5%}.arco-react-col-sm-offset-16{margin-left:66.66666667%}.arco-react-col-sm-offset-17{margin-left:70.83333333%}.arco-react-col-sm-offset-18{margin-left:75%}.arco-react-col-sm-offset-19{margin-left:79.16666667%}.arco-react-col-sm-offset-20{margin-left:83.33333333%}.arco-react-col-sm-offset-21{margin-left:87.5%}.arco-react-col-sm-offset-22{margin-left:91.66666667%}.arco-react-col-sm-offset-23{margin-left:95.83333333%}.arco-react-col-sm-order-0{order:0}.arco-react-col-sm-order-1{order:1}.arco-react-col-sm-order-2{order:2}.arco-react-col-sm-order-3{order:3}.arco-react-col-sm-order-4{order:4}.arco-react-col-sm-order-5{order:5}.arco-react-col-sm-order-6{order:6}.arco-react-col-sm-order-7{order:7}.arco-react-col-sm-order-8{order:8}.arco-react-col-sm-order-9{order:9}.arco-react-col-sm-order-10{order:10}.arco-react-col-sm-order-11{order:11}.arco-react-col-sm-order-12{order:12}.arco-react-col-sm-order-13{order:13}.arco-react-col-sm-order-14{order:14}.arco-react-col-sm-order-15{order:15}.arco-react-col-sm-order-16{order:16}.arco-react-col-sm-order-17{order:17}.arco-react-col-sm-order-18{order:18}.arco-react-col-sm-order-19{order:19}.arco-react-col-sm-order-20{order:20}.arco-react-col-sm-order-21{order:21}.arco-react-col-sm-order-22{order:22}.arco-react-col-sm-order-23{order:23}.arco-react-col-sm-order-24{order:24}.arco-react-col-sm-pull-0{right:0%}.arco-react-col-sm-pull-1{right:4.16666667%}.arco-react-col-sm-pull-2{right:8.33333333%}.arco-react-col-sm-pull-3{right:12.5%}.arco-react-col-sm-pull-4{right:16.66666667%}.arco-react-col-sm-pull-5{right:20.83333333%}.arco-react-col-sm-pull-6{right:25%}.arco-react-col-sm-pull-7{right:29.16666667%}.arco-react-col-sm-pull-8{right:33.33333333%}.arco-react-col-sm-pull-9{right:37.5%}.arco-react-col-sm-pull-10{right:41.66666667%}.arco-react-col-sm-pull-11{right:45.83333333%}.arco-react-col-sm-pull-12{right:50%}.arco-react-col-sm-pull-13{right:54.16666667%}.arco-react-col-sm-pull-14{right:58.33333333%}.arco-react-col-sm-pull-15{right:62.5%}.arco-react-col-sm-pull-16{right:66.66666667%}.arco-react-col-sm-pull-17{right:70.83333333%}.arco-react-col-sm-pull-18{right:75%}.arco-react-col-sm-pull-19{right:79.16666667%}.arco-react-col-sm-pull-20{right:83.33333333%}.arco-react-col-sm-pull-21{right:87.5%}.arco-react-col-sm-pull-22{right:91.66666667%}.arco-react-col-sm-pull-23{right:95.83333333%}.arco-react-col-sm-pull-24{right:100%}.arco-react-col-sm-push-0{left:0%}.arco-react-col-sm-push-1{left:4.16666667%}.arco-react-col-sm-push-2{left:8.33333333%}.arco-react-col-sm-push-3{left:12.5%}.arco-react-col-sm-push-4{left:16.66666667%}.arco-react-col-sm-push-5{left:20.83333333%}.arco-react-col-sm-push-6{left:25%}.arco-react-col-sm-push-7{left:29.16666667%}.arco-react-col-sm-push-8{left:33.33333333%}.arco-react-col-sm-push-9{left:37.5%}.arco-react-col-sm-push-10{left:41.66666667%}.arco-react-col-sm-push-11{left:45.83333333%}.arco-react-col-sm-push-12{left:50%}.arco-react-col-sm-push-13{left:54.16666667%}.arco-react-col-sm-push-14{left:58.33333333%}.arco-react-col-sm-push-15{left:62.5%}.arco-react-col-sm-push-16{left:66.66666667%}.arco-react-col-sm-push-17{left:70.83333333%}.arco-react-col-sm-push-18{left:75%}.arco-react-col-sm-push-19{left:79.16666667%}.arco-react-col-sm-push-20{left:83.33333333%}.arco-react-col-sm-push-21{left:87.5%}.arco-react-col-sm-push-22{left:91.66666667%}.arco-react-col-sm-push-23{left:95.83333333%}.arco-react-col-sm-push-24{left:100%}}@media (min-width: 768px){.arco-react-col-md-0{display:none}.arco-react-col-md-1{width:4.16666667%;flex:0 0 4.16666667%}.arco-react-col-md-2{width:8.33333333%;flex:0 0 8.33333333%}.arco-react-col-md-3{width:12.5%;flex:0 0 12.5%}.arco-react-col-md-4{width:16.66666667%;flex:0 0 16.66666667%}.arco-react-col-md-5{width:20.83333333%;flex:0 0 20.83333333%}.arco-react-col-md-6{width:25%;flex:0 0 25%}.arco-react-col-md-7{width:29.16666667%;flex:0 0 29.16666667%}.arco-react-col-md-8{width:33.33333333%;flex:0 0 33.33333333%}.arco-react-col-md-9{width:37.5%;flex:0 0 37.5%}.arco-react-col-md-10{width:41.66666667%;flex:0 0 41.66666667%}.arco-react-col-md-11{width:45.83333333%;flex:0 0 45.83333333%}.arco-react-col-md-12{width:50%;flex:0 0 50%}.arco-react-col-md-13{width:54.16666667%;flex:0 0 54.16666667%}.arco-react-col-md-14{width:58.33333333%;flex:0 0 58.33333333%}.arco-react-col-md-15{width:62.5%;flex:0 0 62.5%}.arco-react-col-md-16{width:66.66666667%;flex:0 0 66.66666667%}.arco-react-col-md-17{width:70.83333333%;flex:0 0 70.83333333%}.arco-react-col-md-18{width:75%;flex:0 0 75%}.arco-react-col-md-19{width:79.16666667%;flex:0 0 79.16666667%}.arco-react-col-md-20{width:83.33333333%;flex:0 0 83.33333333%}.arco-react-col-md-21{width:87.5%;flex:0 0 87.5%}.arco-react-col-md-22{width:91.66666667%;flex:0 0 91.66666667%}.arco-react-col-md-23{width:95.83333333%;flex:0 0 95.83333333%}.arco-react-col-md-24{width:100%;flex:0 0 100%}.arco-react-col-md-offset-0{margin-left:0%}.arco-react-col-md-offset-1{margin-left:4.16666667%}.arco-react-col-md-offset-2{margin-left:8.33333333%}.arco-react-col-md-offset-3{margin-left:12.5%}.arco-react-col-md-offset-4{margin-left:16.66666667%}.arco-react-col-md-offset-5{margin-left:20.83333333%}.arco-react-col-md-offset-6{margin-left:25%}.arco-react-col-md-offset-7{margin-left:29.16666667%}.arco-react-col-md-offset-8{margin-left:33.33333333%}.arco-react-col-md-offset-9{margin-left:37.5%}.arco-react-col-md-offset-10{margin-left:41.66666667%}.arco-react-col-md-offset-11{margin-left:45.83333333%}.arco-react-col-md-offset-12{margin-left:50%}.arco-react-col-md-offset-13{margin-left:54.16666667%}.arco-react-col-md-offset-14{margin-left:58.33333333%}.arco-react-col-md-offset-15{margin-left:62.5%}.arco-react-col-md-offset-16{margin-left:66.66666667%}.arco-react-col-md-offset-17{margin-left:70.83333333%}.arco-react-col-md-offset-18{margin-left:75%}.arco-react-col-md-offset-19{margin-left:79.16666667%}.arco-react-col-md-offset-20{margin-left:83.33333333%}.arco-react-col-md-offset-21{margin-left:87.5%}.arco-react-col-md-offset-22{margin-left:91.66666667%}.arco-react-col-md-offset-23{margin-left:95.83333333%}.arco-react-col-md-order-0{order:0}.arco-react-col-md-order-1{order:1}.arco-react-col-md-order-2{order:2}.arco-react-col-md-order-3{order:3}.arco-react-col-md-order-4{order:4}.arco-react-col-md-order-5{order:5}.arco-react-col-md-order-6{order:6}.arco-react-col-md-order-7{order:7}.arco-react-col-md-order-8{order:8}.arco-react-col-md-order-9{order:9}.arco-react-col-md-order-10{order:10}.arco-react-col-md-order-11{order:11}.arco-react-col-md-order-12{order:12}.arco-react-col-md-order-13{order:13}.arco-react-col-md-order-14{order:14}.arco-react-col-md-order-15{order:15}.arco-react-col-md-order-16{order:16}.arco-react-col-md-order-17{order:17}.arco-react-col-md-order-18{order:18}.arco-react-col-md-order-19{order:19}.arco-react-col-md-order-20{order:20}.arco-react-col-md-order-21{order:21}.arco-react-col-md-order-22{order:22}.arco-react-col-md-order-23{order:23}.arco-react-col-md-order-24{order:24}.arco-react-col-md-pull-0{right:0%}.arco-react-col-md-pull-1{right:4.16666667%}.arco-react-col-md-pull-2{right:8.33333333%}.arco-react-col-md-pull-3{right:12.5%}.arco-react-col-md-pull-4{right:16.66666667%}.arco-react-col-md-pull-5{right:20.83333333%}.arco-react-col-md-pull-6{right:25%}.arco-react-col-md-pull-7{right:29.16666667%}.arco-react-col-md-pull-8{right:33.33333333%}.arco-react-col-md-pull-9{right:37.5%}.arco-react-col-md-pull-10{right:41.66666667%}.arco-react-col-md-pull-11{right:45.83333333%}.arco-react-col-md-pull-12{right:50%}.arco-react-col-md-pull-13{right:54.16666667%}.arco-react-col-md-pull-14{right:58.33333333%}.arco-react-col-md-pull-15{right:62.5%}.arco-react-col-md-pull-16{right:66.66666667%}.arco-react-col-md-pull-17{right:70.83333333%}.arco-react-col-md-pull-18{right:75%}.arco-react-col-md-pull-19{right:79.16666667%}.arco-react-col-md-pull-20{right:83.33333333%}.arco-react-col-md-pull-21{right:87.5%}.arco-react-col-md-pull-22{right:91.66666667%}.arco-react-col-md-pull-23{right:95.83333333%}.arco-react-col-md-pull-24{right:100%}.arco-react-col-md-push-0{left:0%}.arco-react-col-md-push-1{left:4.16666667%}.arco-react-col-md-push-2{left:8.33333333%}.arco-react-col-md-push-3{left:12.5%}.arco-react-col-md-push-4{left:16.66666667%}.arco-react-col-md-push-5{left:20.83333333%}.arco-react-col-md-push-6{left:25%}.arco-react-col-md-push-7{left:29.16666667%}.arco-react-col-md-push-8{left:33.33333333%}.arco-react-col-md-push-9{left:37.5%}.arco-react-col-md-push-10{left:41.66666667%}.arco-react-col-md-push-11{left:45.83333333%}.arco-react-col-md-push-12{left:50%}.arco-react-col-md-push-13{left:54.16666667%}.arco-react-col-md-push-14{left:58.33333333%}.arco-react-col-md-push-15{left:62.5%}.arco-react-col-md-push-16{left:66.66666667%}.arco-react-col-md-push-17{left:70.83333333%}.arco-react-col-md-push-18{left:75%}.arco-react-col-md-push-19{left:79.16666667%}.arco-react-col-md-push-20{left:83.33333333%}.arco-react-col-md-push-21{left:87.5%}.arco-react-col-md-push-22{left:91.66666667%}.arco-react-col-md-push-23{left:95.83333333%}.arco-react-col-md-push-24{left:100%}}@media (min-width: 992px){.arco-react-col-lg-0{display:none}.arco-react-col-lg-1{width:4.16666667%;flex:0 0 4.16666667%}.arco-react-col-lg-2{width:8.33333333%;flex:0 0 8.33333333%}.arco-react-col-lg-3{width:12.5%;flex:0 0 12.5%}.arco-react-col-lg-4{width:16.66666667%;flex:0 0 16.66666667%}.arco-react-col-lg-5{width:20.83333333%;flex:0 0 20.83333333%}.arco-react-col-lg-6{width:25%;flex:0 0 25%}.arco-react-col-lg-7{width:29.16666667%;flex:0 0 29.16666667%}.arco-react-col-lg-8{width:33.33333333%;flex:0 0 33.33333333%}.arco-react-col-lg-9{width:37.5%;flex:0 0 37.5%}.arco-react-col-lg-10{width:41.66666667%;flex:0 0 41.66666667%}.arco-react-col-lg-11{width:45.83333333%;flex:0 0 45.83333333%}.arco-react-col-lg-12{width:50%;flex:0 0 50%}.arco-react-col-lg-13{width:54.16666667%;flex:0 0 54.16666667%}.arco-react-col-lg-14{width:58.33333333%;flex:0 0 58.33333333%}.arco-react-col-lg-15{width:62.5%;flex:0 0 62.5%}.arco-react-col-lg-16{width:66.66666667%;flex:0 0 66.66666667%}.arco-react-col-lg-17{width:70.83333333%;flex:0 0 70.83333333%}.arco-react-col-lg-18{width:75%;flex:0 0 75%}.arco-react-col-lg-19{width:79.16666667%;flex:0 0 79.16666667%}.arco-react-col-lg-20{width:83.33333333%;flex:0 0 83.33333333%}.arco-react-col-lg-21{width:87.5%;flex:0 0 87.5%}.arco-react-col-lg-22{width:91.66666667%;flex:0 0 91.66666667%}.arco-react-col-lg-23{width:95.83333333%;flex:0 0 95.83333333%}.arco-react-col-lg-24{width:100%;flex:0 0 100%}.arco-react-col-lg-offset-0{margin-left:0%}.arco-react-col-lg-offset-1{margin-left:4.16666667%}.arco-react-col-lg-offset-2{margin-left:8.33333333%}.arco-react-col-lg-offset-3{margin-left:12.5%}.arco-react-col-lg-offset-4{margin-left:16.66666667%}.arco-react-col-lg-offset-5{margin-left:20.83333333%}.arco-react-col-lg-offset-6{margin-left:25%}.arco-react-col-lg-offset-7{margin-left:29.16666667%}.arco-react-col-lg-offset-8{margin-left:33.33333333%}.arco-react-col-lg-offset-9{margin-left:37.5%}.arco-react-col-lg-offset-10{margin-left:41.66666667%}.arco-react-col-lg-offset-11{margin-left:45.83333333%}.arco-react-col-lg-offset-12{margin-left:50%}.arco-react-col-lg-offset-13{margin-left:54.16666667%}.arco-react-col-lg-offset-14{margin-left:58.33333333%}.arco-react-col-lg-offset-15{margin-left:62.5%}.arco-react-col-lg-offset-16{margin-left:66.66666667%}.arco-react-col-lg-offset-17{margin-left:70.83333333%}.arco-react-col-lg-offset-18{margin-left:75%}.arco-react-col-lg-offset-19{margin-left:79.16666667%}.arco-react-col-lg-offset-20{margin-left:83.33333333%}.arco-react-col-lg-offset-21{margin-left:87.5%}.arco-react-col-lg-offset-22{margin-left:91.66666667%}.arco-react-col-lg-offset-23{margin-left:95.83333333%}.arco-react-col-lg-order-0{order:0}.arco-react-col-lg-order-1{order:1}.arco-react-col-lg-order-2{order:2}.arco-react-col-lg-order-3{order:3}.arco-react-col-lg-order-4{order:4}.arco-react-col-lg-order-5{order:5}.arco-react-col-lg-order-6{order:6}.arco-react-col-lg-order-7{order:7}.arco-react-col-lg-order-8{order:8}.arco-react-col-lg-order-9{order:9}.arco-react-col-lg-order-10{order:10}.arco-react-col-lg-order-11{order:11}.arco-react-col-lg-order-12{order:12}.arco-react-col-lg-order-13{order:13}.arco-react-col-lg-order-14{order:14}.arco-react-col-lg-order-15{order:15}.arco-react-col-lg-order-16{order:16}.arco-react-col-lg-order-17{order:17}.arco-react-col-lg-order-18{order:18}.arco-react-col-lg-order-19{order:19}.arco-react-col-lg-order-20{order:20}.arco-react-col-lg-order-21{order:21}.arco-react-col-lg-order-22{order:22}.arco-react-col-lg-order-23{order:23}.arco-react-col-lg-order-24{order:24}.arco-react-col-lg-pull-0{right:0%}.arco-react-col-lg-pull-1{right:4.16666667%}.arco-react-col-lg-pull-2{right:8.33333333%}.arco-react-col-lg-pull-3{right:12.5%}.arco-react-col-lg-pull-4{right:16.66666667%}.arco-react-col-lg-pull-5{right:20.83333333%}.arco-react-col-lg-pull-6{right:25%}.arco-react-col-lg-pull-7{right:29.16666667%}.arco-react-col-lg-pull-8{right:33.33333333%}.arco-react-col-lg-pull-9{right:37.5%}.arco-react-col-lg-pull-10{right:41.66666667%}.arco-react-col-lg-pull-11{right:45.83333333%}.arco-react-col-lg-pull-12{right:50%}.arco-react-col-lg-pull-13{right:54.16666667%}.arco-react-col-lg-pull-14{right:58.33333333%}.arco-react-col-lg-pull-15{right:62.5%}.arco-react-col-lg-pull-16{right:66.66666667%}.arco-react-col-lg-pull-17{right:70.83333333%}.arco-react-col-lg-pull-18{right:75%}.arco-react-col-lg-pull-19{right:79.16666667%}.arco-react-col-lg-pull-20{right:83.33333333%}.arco-react-col-lg-pull-21{right:87.5%}.arco-react-col-lg-pull-22{right:91.66666667%}.arco-react-col-lg-pull-23{right:95.83333333%}.arco-react-col-lg-pull-24{right:100%}.arco-react-col-lg-push-0{left:0%}.arco-react-col-lg-push-1{left:4.16666667%}.arco-react-col-lg-push-2{left:8.33333333%}.arco-react-col-lg-push-3{left:12.5%}.arco-react-col-lg-push-4{left:16.66666667%}.arco-react-col-lg-push-5{left:20.83333333%}.arco-react-col-lg-push-6{left:25%}.arco-react-col-lg-push-7{left:29.16666667%}.arco-react-col-lg-push-8{left:33.33333333%}.arco-react-col-lg-push-9{left:37.5%}.arco-react-col-lg-push-10{left:41.66666667%}.arco-react-col-lg-push-11{left:45.83333333%}.arco-react-col-lg-push-12{left:50%}.arco-react-col-lg-push-13{left:54.16666667%}.arco-react-col-lg-push-14{left:58.33333333%}.arco-react-col-lg-push-15{left:62.5%}.arco-react-col-lg-push-16{left:66.66666667%}.arco-react-col-lg-push-17{left:70.83333333%}.arco-react-col-lg-push-18{left:75%}.arco-react-col-lg-push-19{left:79.16666667%}.arco-react-col-lg-push-20{left:83.33333333%}.arco-react-col-lg-push-21{left:87.5%}.arco-react-col-lg-push-22{left:91.66666667%}.arco-react-col-lg-push-23{left:95.83333333%}.arco-react-col-lg-push-24{left:100%}}@media (min-width: 1200px){.arco-react-col-xl-0{display:none}.arco-react-col-xl-1{width:4.16666667%;flex:0 0 4.16666667%}.arco-react-col-xl-2{width:8.33333333%;flex:0 0 8.33333333%}.arco-react-col-xl-3{width:12.5%;flex:0 0 12.5%}.arco-react-col-xl-4{width:16.66666667%;flex:0 0 16.66666667%}.arco-react-col-xl-5{width:20.83333333%;flex:0 0 20.83333333%}.arco-react-col-xl-6{width:25%;flex:0 0 25%}.arco-react-col-xl-7{width:29.16666667%;flex:0 0 29.16666667%}.arco-react-col-xl-8{width:33.33333333%;flex:0 0 33.33333333%}.arco-react-col-xl-9{width:37.5%;flex:0 0 37.5%}.arco-react-col-xl-10{width:41.66666667%;flex:0 0 41.66666667%}.arco-react-col-xl-11{width:45.83333333%;flex:0 0 45.83333333%}.arco-react-col-xl-12{width:50%;flex:0 0 50%}.arco-react-col-xl-13{width:54.16666667%;flex:0 0 54.16666667%}.arco-react-col-xl-14{width:58.33333333%;flex:0 0 58.33333333%}.arco-react-col-xl-15{width:62.5%;flex:0 0 62.5%}.arco-react-col-xl-16{width:66.66666667%;flex:0 0 66.66666667%}.arco-react-col-xl-17{width:70.83333333%;flex:0 0 70.83333333%}.arco-react-col-xl-18{width:75%;flex:0 0 75%}.arco-react-col-xl-19{width:79.16666667%;flex:0 0 79.16666667%}.arco-react-col-xl-20{width:83.33333333%;flex:0 0 83.33333333%}.arco-react-col-xl-21{width:87.5%;flex:0 0 87.5%}.arco-react-col-xl-22{width:91.66666667%;flex:0 0 91.66666667%}.arco-react-col-xl-23{width:95.83333333%;flex:0 0 95.83333333%}.arco-react-col-xl-24{width:100%;flex:0 0 100%}.arco-react-col-xl-offset-0{margin-left:0%}.arco-react-col-xl-offset-1{margin-left:4.16666667%}.arco-react-col-xl-offset-2{margin-left:8.33333333%}.arco-react-col-xl-offset-3{margin-left:12.5%}.arco-react-col-xl-offset-4{margin-left:16.66666667%}.arco-react-col-xl-offset-5{margin-left:20.83333333%}.arco-react-col-xl-offset-6{margin-left:25%}.arco-react-col-xl-offset-7{margin-left:29.16666667%}.arco-react-col-xl-offset-8{margin-left:33.33333333%}.arco-react-col-xl-offset-9{margin-left:37.5%}.arco-react-col-xl-offset-10{margin-left:41.66666667%}.arco-react-col-xl-offset-11{margin-left:45.83333333%}.arco-react-col-xl-offset-12{margin-left:50%}.arco-react-col-xl-offset-13{margin-left:54.16666667%}.arco-react-col-xl-offset-14{margin-left:58.33333333%}.arco-react-col-xl-offset-15{margin-left:62.5%}.arco-react-col-xl-offset-16{margin-left:66.66666667%}.arco-react-col-xl-offset-17{margin-left:70.83333333%}.arco-react-col-xl-offset-18{margin-left:75%}.arco-react-col-xl-offset-19{margin-left:79.16666667%}.arco-react-col-xl-offset-20{margin-left:83.33333333%}.arco-react-col-xl-offset-21{margin-left:87.5%}.arco-react-col-xl-offset-22{margin-left:91.66666667%}.arco-react-col-xl-offset-23{margin-left:95.83333333%}.arco-react-col-xl-order-0{order:0}.arco-react-col-xl-order-1{order:1}.arco-react-col-xl-order-2{order:2}.arco-react-col-xl-order-3{order:3}.arco-react-col-xl-order-4{order:4}.arco-react-col-xl-order-5{order:5}.arco-react-col-xl-order-6{order:6}.arco-react-col-xl-order-7{order:7}.arco-react-col-xl-order-8{order:8}.arco-react-col-xl-order-9{order:9}.arco-react-col-xl-order-10{order:10}.arco-react-col-xl-order-11{order:11}.arco-react-col-xl-order-12{order:12}.arco-react-col-xl-order-13{order:13}.arco-react-col-xl-order-14{order:14}.arco-react-col-xl-order-15{order:15}.arco-react-col-xl-order-16{order:16}.arco-react-col-xl-order-17{order:17}.arco-react-col-xl-order-18{order:18}.arco-react-col-xl-order-19{order:19}.arco-react-col-xl-order-20{order:20}.arco-react-col-xl-order-21{order:21}.arco-react-col-xl-order-22{order:22}.arco-react-col-xl-order-23{order:23}.arco-react-col-xl-order-24{order:24}.arco-react-col-xl-pull-0{right:0%}.arco-react-col-xl-pull-1{right:4.16666667%}.arco-react-col-xl-pull-2{right:8.33333333%}.arco-react-col-xl-pull-3{right:12.5%}.arco-react-col-xl-pull-4{right:16.66666667%}.arco-react-col-xl-pull-5{right:20.83333333%}.arco-react-col-xl-pull-6{right:25%}.arco-react-col-xl-pull-7{right:29.16666667%}.arco-react-col-xl-pull-8{right:33.33333333%}.arco-react-col-xl-pull-9{right:37.5%}.arco-react-col-xl-pull-10{right:41.66666667%}.arco-react-col-xl-pull-11{right:45.83333333%}.arco-react-col-xl-pull-12{right:50%}.arco-react-col-xl-pull-13{right:54.16666667%}.arco-react-col-xl-pull-14{right:58.33333333%}.arco-react-col-xl-pull-15{right:62.5%}.arco-react-col-xl-pull-16{right:66.66666667%}.arco-react-col-xl-pull-17{right:70.83333333%}.arco-react-col-xl-pull-18{right:75%}.arco-react-col-xl-pull-19{right:79.16666667%}.arco-react-col-xl-pull-20{right:83.33333333%}.arco-react-col-xl-pull-21{right:87.5%}.arco-react-col-xl-pull-22{right:91.66666667%}.arco-react-col-xl-pull-23{right:95.83333333%}.arco-react-col-xl-pull-24{right:100%}.arco-react-col-xl-push-0{left:0%}.arco-react-col-xl-push-1{left:4.16666667%}.arco-react-col-xl-push-2{left:8.33333333%}.arco-react-col-xl-push-3{left:12.5%}.arco-react-col-xl-push-4{left:16.66666667%}.arco-react-col-xl-push-5{left:20.83333333%}.arco-react-col-xl-push-6{left:25%}.arco-react-col-xl-push-7{left:29.16666667%}.arco-react-col-xl-push-8{left:33.33333333%}.arco-react-col-xl-push-9{left:37.5%}.arco-react-col-xl-push-10{left:41.66666667%}.arco-react-col-xl-push-11{left:45.83333333%}.arco-react-col-xl-push-12{left:50%}.arco-react-col-xl-push-13{left:54.16666667%}.arco-react-col-xl-push-14{left:58.33333333%}.arco-react-col-xl-push-15{left:62.5%}.arco-react-col-xl-push-16{left:66.66666667%}.arco-react-col-xl-push-17{left:70.83333333%}.arco-react-col-xl-push-18{left:75%}.arco-react-col-xl-push-19{left:79.16666667%}.arco-react-col-xl-push-20{left:83.33333333%}.arco-react-col-xl-push-21{left:87.5%}.arco-react-col-xl-push-22{left:91.66666667%}.arco-react-col-xl-push-23{left:95.83333333%}.arco-react-col-xl-push-24{left:100%}}@media (min-width: 1600px){.arco-react-col-xxl-0{display:none}.arco-react-col-xxl-1{width:4.16666667%;flex:0 0 4.16666667%}.arco-react-col-xxl-2{width:8.33333333%;flex:0 0 8.33333333%}.arco-react-col-xxl-3{width:12.5%;flex:0 0 12.5%}.arco-react-col-xxl-4{width:16.66666667%;flex:0 0 16.66666667%}.arco-react-col-xxl-5{width:20.83333333%;flex:0 0 20.83333333%}.arco-react-col-xxl-6{width:25%;flex:0 0 25%}.arco-react-col-xxl-7{width:29.16666667%;flex:0 0 29.16666667%}.arco-react-col-xxl-8{width:33.33333333%;flex:0 0 33.33333333%}.arco-react-col-xxl-9{width:37.5%;flex:0 0 37.5%}.arco-react-col-xxl-10{width:41.66666667%;flex:0 0 41.66666667%}.arco-react-col-xxl-11{width:45.83333333%;flex:0 0 45.83333333%}.arco-react-col-xxl-12{width:50%;flex:0 0 50%}.arco-react-col-xxl-13{width:54.16666667%;flex:0 0 54.16666667%}.arco-react-col-xxl-14{width:58.33333333%;flex:0 0 58.33333333%}.arco-react-col-xxl-15{width:62.5%;flex:0 0 62.5%}.arco-react-col-xxl-16{width:66.66666667%;flex:0 0 66.66666667%}.arco-react-col-xxl-17{width:70.83333333%;flex:0 0 70.83333333%}.arco-react-col-xxl-18{width:75%;flex:0 0 75%}.arco-react-col-xxl-19{width:79.16666667%;flex:0 0 79.16666667%}.arco-react-col-xxl-20{width:83.33333333%;flex:0 0 83.33333333%}.arco-react-col-xxl-21{width:87.5%;flex:0 0 87.5%}.arco-react-col-xxl-22{width:91.66666667%;flex:0 0 91.66666667%}.arco-react-col-xxl-23{width:95.83333333%;flex:0 0 95.83333333%}.arco-react-col-xxl-24{width:100%;flex:0 0 100%}.arco-react-col-xxl-offset-0{margin-left:0%}.arco-react-col-xxl-offset-1{margin-left:4.16666667%}.arco-react-col-xxl-offset-2{margin-left:8.33333333%}.arco-react-col-xxl-offset-3{margin-left:12.5%}.arco-react-col-xxl-offset-4{margin-left:16.66666667%}.arco-react-col-xxl-offset-5{margin-left:20.83333333%}.arco-react-col-xxl-offset-6{margin-left:25%}.arco-react-col-xxl-offset-7{margin-left:29.16666667%}.arco-react-col-xxl-offset-8{margin-left:33.33333333%}.arco-react-col-xxl-offset-9{margin-left:37.5%}.arco-react-col-xxl-offset-10{margin-left:41.66666667%}.arco-react-col-xxl-offset-11{margin-left:45.83333333%}.arco-react-col-xxl-offset-12{margin-left:50%}.arco-react-col-xxl-offset-13{margin-left:54.16666667%}.arco-react-col-xxl-offset-14{margin-left:58.33333333%}.arco-react-col-xxl-offset-15{margin-left:62.5%}.arco-react-col-xxl-offset-16{margin-left:66.66666667%}.arco-react-col-xxl-offset-17{margin-left:70.83333333%}.arco-react-col-xxl-offset-18{margin-left:75%}.arco-react-col-xxl-offset-19{margin-left:79.16666667%}.arco-react-col-xxl-offset-20{margin-left:83.33333333%}.arco-react-col-xxl-offset-21{margin-left:87.5%}.arco-react-col-xxl-offset-22{margin-left:91.66666667%}.arco-react-col-xxl-offset-23{margin-left:95.83333333%}.arco-react-col-xxl-order-0{order:0}.arco-react-col-xxl-order-1{order:1}.arco-react-col-xxl-order-2{order:2}.arco-react-col-xxl-order-3{order:3}.arco-react-col-xxl-order-4{order:4}.arco-react-col-xxl-order-5{order:5}.arco-react-col-xxl-order-6{order:6}.arco-react-col-xxl-order-7{order:7}.arco-react-col-xxl-order-8{order:8}.arco-react-col-xxl-order-9{order:9}.arco-react-col-xxl-order-10{order:10}.arco-react-col-xxl-order-11{order:11}.arco-react-col-xxl-order-12{order:12}.arco-react-col-xxl-order-13{order:13}.arco-react-col-xxl-order-14{order:14}.arco-react-col-xxl-order-15{order:15}.arco-react-col-xxl-order-16{order:16}.arco-react-col-xxl-order-17{order:17}.arco-react-col-xxl-order-18{order:18}.arco-react-col-xxl-order-19{order:19}.arco-react-col-xxl-order-20{order:20}.arco-react-col-xxl-order-21{order:21}.arco-react-col-xxl-order-22{order:22}.arco-react-col-xxl-order-23{order:23}.arco-react-col-xxl-order-24{order:24}.arco-react-col-xxl-pull-0{right:0%}.arco-react-col-xxl-pull-1{right:4.16666667%}.arco-react-col-xxl-pull-2{right:8.33333333%}.arco-react-col-xxl-pull-3{right:12.5%}.arco-react-col-xxl-pull-4{right:16.66666667%}.arco-react-col-xxl-pull-5{right:20.83333333%}.arco-react-col-xxl-pull-6{right:25%}.arco-react-col-xxl-pull-7{right:29.16666667%}.arco-react-col-xxl-pull-8{right:33.33333333%}.arco-react-col-xxl-pull-9{right:37.5%}.arco-react-col-xxl-pull-10{right:41.66666667%}.arco-react-col-xxl-pull-11{right:45.83333333%}.arco-react-col-xxl-pull-12{right:50%}.arco-react-col-xxl-pull-13{right:54.16666667%}.arco-react-col-xxl-pull-14{right:58.33333333%}.arco-react-col-xxl-pull-15{right:62.5%}.arco-react-col-xxl-pull-16{right:66.66666667%}.arco-react-col-xxl-pull-17{right:70.83333333%}.arco-react-col-xxl-pull-18{right:75%}.arco-react-col-xxl-pull-19{right:79.16666667%}.arco-react-col-xxl-pull-20{right:83.33333333%}.arco-react-col-xxl-pull-21{right:87.5%}.arco-react-col-xxl-pull-22{right:91.66666667%}.arco-react-col-xxl-pull-23{right:95.83333333%}.arco-react-col-xxl-pull-24{right:100%}.arco-react-col-xxl-push-0{left:0%}.arco-react-col-xxl-push-1{left:4.16666667%}.arco-react-col-xxl-push-2{left:8.33333333%}.arco-react-col-xxl-push-3{left:12.5%}.arco-react-col-xxl-push-4{left:16.66666667%}.arco-react-col-xxl-push-5{left:20.83333333%}.arco-react-col-xxl-push-6{left:25%}.arco-react-col-xxl-push-7{left:29.16666667%}.arco-react-col-xxl-push-8{left:33.33333333%}.arco-react-col-xxl-push-9{left:37.5%}.arco-react-col-xxl-push-10{left:41.66666667%}.arco-react-col-xxl-push-11{left:45.83333333%}.arco-react-col-xxl-push-12{left:50%}.arco-react-col-xxl-push-13{left:54.16666667%}.arco-react-col-xxl-push-14{left:58.33333333%}.arco-react-col-xxl-push-15{left:62.5%}.arco-react-col-xxl-push-16{left:66.66666667%}.arco-react-col-xxl-push-17{left:70.83333333%}.arco-react-col-xxl-push-18{left:75%}.arco-react-col-xxl-push-19{left:79.16666667%}.arco-react-col-xxl-push-20{left:83.33333333%}.arco-react-col-xxl-push-21{left:87.5%}.arco-react-col-xxl-push-22{left:91.66666667%}.arco-react-col-xxl-push-23{left:95.83333333%}.arco-react-col-xxl-push-24{left:100%}}.arco-react-image-trigger{padding:6px 4px;background:var(--color-bg-5);border:1px solid var(--color-neutral-3);border-radius:4px}.arco-react-image-trigger .arco-react-trigger-arrow{border:1px solid var(--color-neutral-3);background-color:var(--color-bg-5)}.arco-react-image{position:relative;display:inline-block;border-radius:var(--border-radius-small);vertical-align:middle}.arco-react-image-img{vertical-align:middle;border-radius:inherit}.arco-react-image-overlay{position:absolute;top:0;left:0;width:100%;height:100%}.arco-react-image-footer{width:100%;max-width:100%;display:flex}.arco-react-image-footer-block{flex:auto}.arco-react-image-caption-title{font-size:16px;font-weight:500}.arco-react-image-caption-description{font-size:14px}.arco-react-image-actions{padding-left:12px}.arco-react-image-actions-list{display:flex;justify-content:flex-end;align-items:center}.arco-react-image-actions-item{font-size:14px;line-height:1;margin-left:12px;border-radius:var(--border-radius-small);padding:0;cursor:pointer}.arco-react-image-actions-item:first-child{margin-left:0}.arco-react-image-actions-item-trigger{padding:5px 4px;display:inline-block}.arco-react-image-with-footer-inner .arco-react-image-footer{background:linear-gradient(360deg,rgba(0,0,0,.3) 0%,rgba(0,0,0,0) 100%);color:var(--color-white);box-sizing:border-box;padding:9px 16px;align-items:center;position:absolute;left:0;bottom:0}.arco-react-image-with-footer-inner .arco-react-image-caption-title{color:var(--color-white)}.arco-react-image-with-footer-inner .arco-react-image-caption-description{color:var(--color-white)}.arco-react-image-with-footer-inner .arco-react-image-actions-item:hover{background:rgba(0,0,0,.5)}.arco-react-image-with-footer-outer .arco-react-image-footer{color:var(--color-neutral-8);margin-top:4px}.arco-react-image-with-footer-outer .arco-react-image-caption-title{color:var(--color-text-1)}.arco-react-image-with-footer-outer .arco-react-image-caption-description{color:var(--color-neutral-6)}.arco-react-image-with-footer-outer .arco-react-image-actions-item:hover{background:var(--color-neutral-2)}.arco-react-image-error{width:100%;height:100%;background-color:var(--color-neutral-1);color:var(--color-neutral-4);box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;align-items:center}.arco-react-image-error-icon{width:60px;height:60px;max-width:100%;max-height:100%}.arco-react-image-error-icon>svg{width:100%;height:100%}.arco-react-image-error-alt{font-size:12px;line-height:1.6667;text-align:center;padding:8px 16px}.arco-react-image-loader{width:100%;height:100%;position:absolute;top:0;left:0;background-color:var(--color-neutral-1)}.arco-react-image-loader-spin{font-size:32px;transform:translate(-50%,-50%);position:absolute;color:rgb(var(--primary-6));left:50%;top:50%;text-align:center}.arco-react-image-loader-spin-text{color:var(--color-neutral-6);font-size:16px}.arco-react-image-simple.arco-react-image-with-footer-inner .arco-react-image-footer{padding:12px 16px}.arco-react-image-loading .arco-react-image-img,.arco-react-image-loading-error .arco-react-image-img{visibility:hidden}.arco-react-image-trigger .arco-react-image-actions-list{flex-direction:column}.arco-react-image-trigger .arco-react-image-actions-item{color:var(--color-neutral-8);margin-left:0}.arco-react-image-trigger .arco-react-image-actions-item:hover{background:var(--color-neutral-2)}.arco-react-image-preview{position:fixed;width:100%;height:100%;top:0;left:0;z-index:1001}.arco-react-image-preview-hide{display:none}.arco-react-image-preview-mask,.arco-react-image-preview-wrapper{position:absolute;width:100%;height:100%;top:0;left:0}.arco-react-image-preview-mask{background-color:var(--color-mask-bg)}.arco-react-image-preview-img-container{width:100%;height:100%;text-align:center}.arco-react-image-preview-img-container:before{content:\"\";width:0;height:100%;vertical-align:middle;display:inline-block}.arco-react-image-preview-img-container .arco-react-image-preview-img{max-width:100%;max-height:100%;display:inline-block;vertical-align:middle;user-select:none;cursor:grab}.arco-react-image-preview-img-container .arco-react-image-preview-img.arco-react-image-preview-img-moving{cursor:grabbing}.arco-react-image-preview-scale-value{padding:7px 10px;box-sizing:border-box;font-size:12px;color:var(--color-white);background-color:#ffffff14;line-height:initial;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}.arco-react-image-preview-toolbar{background-color:var(--color-bg-2);border-radius:var(--border-radius-medium);display:flex;align-items:flex-start;padding:4px 16px;position:absolute;bottom:46px;left:50%;transform:translate(-50%)}.arco-react-image-preview-toolbar-action{font-size:14px;color:var(--color-neutral-8);border-radius:var(--border-radius-small);background-color:transparent;cursor:pointer;display:flex;align-items:center}.arco-react-image-preview-toolbar-action:not(:last-of-type){margin-right:0}.arco-react-image-preview-toolbar-action:hover{background-color:var(--color-neutral-2);color:rgb(var(--primary-6))}.arco-react-image-preview-toolbar-action-disabled,.arco-react-image-preview-toolbar-action-disabled:hover{color:var(--color-text-4);background-color:transparent;cursor:not-allowed}.arco-react-image-preview-toolbar-action-name{font-size:12px;padding-right:12px}.arco-react-image-preview-toolbar-action-content{padding:13px;line-height:1}.arco-react-image-preview-toolbar-simple{padding:4px}.arco-react-image-preview-toolbar-simple .arco-react-image-preview-toolbar-action{margin-right:0}.arco-react-image-preview-trigger.arco-react-image-trigger{padding:12px 16px}.arco-react-image-preview-trigger.arco-react-image-trigger .arco-react-image-preview-toolbar-action{text-align:left;margin-right:0}.arco-react-image-preview-trigger.arco-react-image-trigger .arco-react-image-preview-toolbar-action:not(:last-of-type){margin-bottom:0}.arco-react-image-preview-loading{color:rgb(var(--primary-6));background-color:#232324;font-size:18px;padding:10px;width:48px;height:48px;border-radius:var(--border-radius-medium);box-sizing:border-box;display:flex;align-items:center;justify-content:center;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}.arco-react-image-preview-close-btn{width:32px;height:32px;line-height:32px;background:rgba(0,0,0,.5);color:var(--color-white);text-align:center;border-radius:50%;position:absolute;right:36px;top:36px;cursor:pointer;font-size:14px}.arco-react-image-preview-arrow-left,.arco-react-image-preview-arrow-right{display:flex;align-items:center;justify-content:center;position:absolute;width:32px;height:32px;border-radius:50%;color:var(--color-white);background-color:#ffffff4d;cursor:pointer;z-index:2}.arco-react-image-preview-arrow-left>svg,.arco-react-image-preview-arrow-right>svg{color:var(--color-white);font-size:16px}.arco-react-image-preview-arrow-left:hover,.arco-react-image-preview-arrow-right:hover{background-color:#ffffff80}.arco-react-image-preview-arrow-left{left:20px;top:50%;transform:translateY(-50%)}.arco-react-image-preview-arrow-right{top:50%;transform:translateY(-50%);right:20px}.arco-react-image-preview-arrow-disabled{cursor:not-allowed;background-color:#fff3;color:#ffffff4d}.arco-react-image-preview-arrow-disabled>svg{color:#ffffff4d}.arco-react-image-preview-arrow-disabled:hover{background-color:#fff3}.fadeImage-enter,.fadeImage-appear{opacity:0}.fadeImage-enter-active,.fadeImage-appear-active{opacity:1;transition:opacity .4s cubic-bezier(.3,1.3,.3,1)}.fadeImage-exit{opacity:1}.fadeImage-exit-active{opacity:0;transition:opacity .4s cubic-bezier(.3,1.3,.3,1)}.arco-react-input{line-height:1.5715;outline:none;appearance:none;-webkit-tap-highlight-color:rgba(0,0,0,0);width:100%;border-radius:var(--border-radius-small);color:var(--color-text-1);padding:4px 12px;font-size:14px;box-sizing:border-box;transition:color .1s cubic-bezier(0,0,1,1),border-color .1s cubic-bezier(0,0,1,1),background-color .1s cubic-bezier(0,0,1,1);border:1px solid transparent;background-color:var(--color-fill-2)}.arco-react-input::placeholder{color:var(--color-text-3)}.arco-react-input:hover{background-color:var(--color-fill-3);border-color:transparent}.arco-react-input:focus,.arco-react-input.arco-react-input-focus{border-color:rgb(var(--primary-6));background-color:var(--color-bg-2);box-shadow:0 0 0 0 var(--color-primary-light-2)}.arco-react-input-error{border-color:transparent;background-color:var(--color-danger-light-1)}.arco-react-input-error:hover{border-color:transparent;background-color:var(--color-danger-light-2)}.arco-react-input-error:focus,.arco-react-input-error.arco-react-input-focus{border-color:rgb(var(--danger-6));background-color:var(--color-bg-2);box-shadow:0 0 0 0 var(--color-danger-light-2)}.arco-react-input-disabled{background-color:var(--color-fill-2);cursor:not-allowed;color:var(--color-text-4);-webkit-text-fill-color:var(--color-text-4);border-color:transparent}.arco-react-input-disabled:hover{border-color:transparent;background-color:var(--color-fill-2);color:var(--color-text-4)}.arco-react-input-disabled::placeholder{color:var(--color-text-4)}.arco-react-input input:disabled{color:var(--color-text-4);opacity:1;-webkit-text-fill-color:var(--color-text-4)}.arco-react-input-word-limit{font-size:12px;color:var(--color-text-3);padding-left:8px}.arco-react-input-word-limit-error{color:rgb(var(--danger-6))}.arco-react-input-size-mini{line-height:1.667;font-size:12px;padding-top:1px;padding-bottom:1px}.arco-react-input-size-small{padding-top:2px;padding-bottom:2px;font-size:14px}.arco-react-input-size-large{padding-top:6px;padding-bottom:6px;font-size:14px}.arco-react-input-group-wrapper-mini .arco-react-input-group-addbefore,.arco-react-input-group-wrapper-mini .arco-react-input-group-addafter{padding-left:8px;padding-right:8px}.arco-react-input-inner-wrapper.arco-react-input-inner-wrapper-mini{padding-left:8px;padding-right:8px}.arco-react-input-size-mini{padding-left:8px;padding-right:8px}.arco-react-input-group-wrapper-small .arco-react-input-group-addbefore,.arco-react-input-group-wrapper-small .arco-react-input-group-addafter{padding-left:12px;padding-right:12px}.arco-react-input-inner-wrapper.arco-react-input-inner-wrapper-small{padding-left:12px;padding-right:12px}.arco-react-input-size-small{padding-left:12px;padding-right:12px}.arco-react-input-group-wrapper-large .arco-react-input-group-addbefore,.arco-react-input-group-wrapper-large .arco-react-input-group-addafter{padding-left:16px;padding-right:16px}.arco-react-input-inner-wrapper.arco-react-input-inner-wrapper-large{padding-left:16px;padding-right:16px}.arco-react-input-size-large{padding-left:16px;padding-right:16px}.arco-react-input-clear-wrapper .arco-react-input{padding-right:24px}.arco-react-input-clear-icon{display:none;font-size:12px;cursor:pointer;color:var(--color-text-2)}.arco-react-input-clear-icon>svg{transition:color .1s cubic-bezier(0,0,1,1);position:relative}.arco-react-input-inner-wrapper{outline:none;appearance:none;-webkit-tap-highlight-color:rgba(0,0,0,0);border-radius:var(--border-radius-small);color:var(--color-text-1);padding-left:12px;padding-right:12px;font-size:14px;box-sizing:border-box;transition:color .1s cubic-bezier(0,0,1,1),border-color .1s cubic-bezier(0,0,1,1),background-color .1s cubic-bezier(0,0,1,1);border:1px solid transparent;background-color:var(--color-fill-2);display:inline-flex;width:100%;position:relative;align-items:center}.arco-react-input-inner-wrapper::placeholder{color:var(--color-text-3)}.arco-react-input-inner-wrapper:hover{background-color:var(--color-fill-3);border-color:transparent}.arco-react-input-inner-wrapper:focus,.arco-react-input-inner-wrapper.arco-react-input-inner-wrapper-focus{border-color:rgb(var(--primary-6));background-color:var(--color-bg-2);box-shadow:0 0 0 0 var(--color-primary-light-2)}.arco-react-input-inner-wrapper-error{border-color:transparent;background-color:var(--color-danger-light-1)}.arco-react-input-inner-wrapper-error:hover{border-color:transparent;background-color:var(--color-danger-light-2)}.arco-react-input-inner-wrapper-error:focus,.arco-react-input-inner-wrapper-error.arco-react-input-inner-wrapper-focus{border-color:rgb(var(--danger-6));background-color:var(--color-bg-2);box-shadow:0 0 0 0 var(--color-danger-light-2)}.arco-react-input-inner-wrapper .arco-react-input{padding-left:0;padding-right:0;border-radius:0;border:none;background:none}.arco-react-input-inner-wrapper .arco-react-input:hover,.arco-react-input-inner-wrapper .arco-react-input:focus{background:none;box-shadow:none}.arco-react-input-inner-wrapper-has-prefix>.arco-react-input-clear-wrapper .arco-react-input,.arco-react-input-inner-wrapper-has-prefix>.arco-react-input{padding-left:12px}.arco-react-input-inner-wrapper>.arco-react-input-clear-wrapper{height:100%}.arco-react-input-inner-wrapper>.arco-react-input-clear-wrapper .arco-react-input{padding-right:12px}.arco-react-input-inner-wrapper>.arco-react-input-clear-wrapper .arco-react-input-clear-icon{right:8px}.arco-react-input-inner-wrapper .arco-react-input-group-prefix,.arco-react-input-inner-wrapper .arco-react-input-group-suffix{user-select:none;white-space:nowrap;display:inline-flex;align-items:center;height:100%}.arco-react-input-inner-wrapper .arco-react-input-group-prefix>svg,.arco-react-input-inner-wrapper .arco-react-input-group-suffix>svg{font-size:14px}.arco-react-input-inner-wrapper .arco-react-input-group-prefix{color:var(--color-text-2)}.arco-react-input-inner-wrapper .arco-react-input-group-suffix{color:var(--color-text-2)}.arco-react-input-inner-wrapper-disabled{background-color:var(--color-fill-2);cursor:not-allowed;color:var(--color-text-4);-webkit-text-fill-color:var(--color-text-4);border-color:transparent}.arco-react-input-inner-wrapper-disabled:hover{border-color:transparent;background-color:var(--color-fill-2);color:var(--color-text-4)}.arco-react-input-inner-wrapper-disabled::placeholder{color:var(--color-text-4)}.arco-react-input-inner-wrapper-disabled .arco-react-input-group-prefix,.arco-react-input-inner-wrapper-disabled .arco-react-input-group-suffix{color:inherit}.arco-react-input-inner-wrapper:hover .arco-react-input-clear-icon{display:inline-block}.arco-react-input-inner-wrapper:hover .arco-react-input-clear-icon~.arco-react-input-group-suffix{margin-left:4px}.arco-react-input-inner-wrapper:not(.arco-react-input-inner-wrapper-focus) .arco-react-input-clear-icon:hover:before{background-color:var(--color-fill-4)}.arco-react-input-group{display:table;width:100%;height:100%}.arco-react-input-group>.arco-react-input-inner-wrapper,.arco-react-input-group>.arco-react-input{border-radius:0}.arco-react-input-group>.arco-react-input-inner-wrapper-focus,.arco-react-input-group>.arco-react-input-focus{border-radius:var(--border-radius-small)}.arco-react-input-group>:first-child{border-top-left-radius:var(--border-radius-small);border-bottom-left-radius:var(--border-radius-small)}.arco-react-input-group>:last-child{border-top-right-radius:var(--border-radius-small);border-bottom-right-radius:var(--border-radius-small)}.arco-react-input-group-addbefore,.arco-react-input-group-addafter{width:1px;display:table-cell;white-space:nowrap;height:100%;vertical-align:middle;box-sizing:border-box;padding:0 12px;color:var(--color-text-1);background-color:var(--color-fill-2);border:1px solid transparent}.arco-react-input-group-addbefore>svg,.arco-react-input-group-addafter>svg{font-size:14px}.arco-react-input-group-addafter{border-left:1px solid var(--color-neutral-3)}.arco-react-input-group-addafter .item-style{width:auto;height:100%;margin:-1px -13px -1px -12px}.arco-react-input-group-addafter .arco-react-input{width:auto;height:100%;margin:-1px -13px -1px -12px;border-color:transparent;border-top-left-radius:0;border-bottom-left-radius:0}.arco-react-input-group-addafter .arco-react-select{width:auto;height:100%;margin:-1px -13px -1px -12px}.arco-react-input-group-addafter .arco-react-select .arco-react-select-view{border-radius:0;background-color:inherit;border-color:transparent}.arco-react-input-group-addafter .arco-react-select.arco-react-select-single .arco-react-select-view{height:100%}.arco-react-input-group-addbefore{border-right:1px solid var(--color-neutral-3)}.arco-react-input-group-addbefore .item-style{width:auto;height:100%;margin:-1px -12px -1px -13px}.arco-react-input-group-addbefore .arco-react-input{width:auto;height:100%;margin:-1px -12px -1px -13px;border-color:transparent;border-top-right-radius:0;border-bottom-right-radius:0}.arco-react-input-group-addbefore .arco-react-select{width:auto;height:100%;margin:-1px -12px -1px -13px}.arco-react-input-group-addbefore .arco-react-select .arco-react-select-view{border-radius:0;background-color:inherit;border-color:transparent}.arco-react-input-group-addbefore .arco-react-select.arco-react-select-single .arco-react-select-view{height:100%}.arco-react-input-group-wrapper{width:100%;display:inline-block;vertical-align:top}.arco-react-input-group-wrapper.arco-react-input-group-wrapper-mini .arco-react-input-group{font-size:12px}.arco-react-input-group-wrapper.arco-react-input-group-wrapper-mini .arco-react-input-inner-wrapper .arco-react-input-group-prefix,.arco-react-input-group-wrapper.arco-react-input-group-wrapper-mini .arco-react-input-inner-wrapper .arco-react-input-group-suffix{font-size:12px}.arco-react-input-group-wrapper.arco-react-input-group-wrapper-mini .arco-react-input-inner-wrapper .arco-react-input-group-prefix>svg,.arco-react-input-group-wrapper.arco-react-input-group-wrapper-mini .arco-react-input-inner-wrapper .arco-react-input-group-suffix>svg{font-size:12px}.arco-react-input-group-wrapper.arco-react-input-group-wrapper-mini .arco-react-input-group-addbefore,.arco-react-input-group-wrapper.arco-react-input-group-wrapper-mini .arco-react-input-group-addafter{font-size:12px;height:22px}.arco-react-input-group-wrapper.arco-react-input-group-wrapper-mini .arco-react-input-group-addbefore>svg,.arco-react-input-group-wrapper.arco-react-input-group-wrapper-mini .arco-react-input-group-addafter>svg{font-size:12px}.arco-react-input-group-wrapper.arco-react-input-group-wrapper-mini .arco-react-input-group-addafter .item-style{width:auto;height:100%;margin:-1px -13px -1px -12px}.arco-react-input-group-wrapper.arco-react-input-group-wrapper-mini .arco-react-input-group-addafter .arco-react-input{width:auto;height:100%;margin:-1px -13px -1px -12px;border-color:transparent;border-top-left-radius:0;border-bottom-left-radius:0}.arco-react-input-group-wrapper.arco-react-input-group-wrapper-mini .arco-react-input-group-addafter .arco-react-select{width:auto;height:100%;margin:-1px -13px -1px -12px}.arco-react-input-group-wrapper.arco-react-input-group-wrapper-mini .arco-react-input-group-addafter .arco-react-select .arco-react-select-view{border-radius:0;background-color:inherit;border-color:transparent}.arco-react-input-group-wrapper.arco-react-input-group-wrapper-mini .arco-react-input-group-addafter .arco-react-select.arco-react-select-single .arco-react-select-view{height:100%}.arco-react-input-group-wrapper.arco-react-input-group-wrapper-mini .arco-react-input-group-addbefore .item-style{width:auto;height:100%;margin:-1px -12px -1px -13px}.arco-react-input-group-wrapper.arco-react-input-group-wrapper-mini .arco-react-input-group-addbefore .arco-react-input{width:auto;height:100%;margin:-1px -12px -1px -13px;border-color:transparent;border-top-right-radius:0;border-bottom-right-radius:0}.arco-react-input-group-wrapper.arco-react-input-group-wrapper-mini .arco-react-input-group-addbefore .arco-react-select{width:auto;height:100%;margin:-1px -12px -1px -13px}.arco-react-input-group-wrapper.arco-react-input-group-wrapper-mini .arco-react-input-group-addbefore .arco-react-select .arco-react-select-view{border-radius:0;background-color:inherit;border-color:transparent}.arco-react-input-group-wrapper.arco-react-input-group-wrapper-mini .arco-react-input-group-addbefore .arco-react-select.arco-react-select-single .arco-react-select-view{height:100%}.arco-react-input-group-wrapper.arco-react-input-group-wrapper-small .arco-react-input-group{font-size:14px}.arco-react-input-group-wrapper.arco-react-input-group-wrapper-small .arco-react-input-inner-wrapper .arco-react-input-group-prefix,.arco-react-input-group-wrapper.arco-react-input-group-wrapper-small .arco-react-input-inner-wrapper .arco-react-input-group-suffix{font-size:14px}.arco-react-input-group-wrapper.arco-react-input-group-wrapper-small .arco-react-input-inner-wrapper .arco-react-input-group-prefix>svg,.arco-react-input-group-wrapper.arco-react-input-group-wrapper-small .arco-react-input-inner-wrapper .arco-react-input-group-suffix>svg{font-size:14px}.arco-react-input-group-wrapper.arco-react-input-group-wrapper-small .arco-react-input-group-addbefore,.arco-react-input-group-wrapper.arco-react-input-group-wrapper-small .arco-react-input-group-addafter{font-size:14px;height:26px}.arco-react-input-group-wrapper.arco-react-input-group-wrapper-small .arco-react-input-group-addbefore>svg,.arco-react-input-group-wrapper.arco-react-input-group-wrapper-small .arco-react-input-group-addafter>svg{font-size:14px}.arco-react-input-group-wrapper.arco-react-input-group-wrapper-small .arco-react-input-group-addafter .item-style{width:auto;height:100%;margin:-1px -13px -1px -12px}.arco-react-input-group-wrapper.arco-react-input-group-wrapper-small .arco-react-input-group-addafter .arco-react-input{width:auto;height:100%;margin:-1px -13px -1px -12px;border-color:transparent;border-top-left-radius:0;border-bottom-left-radius:0}.arco-react-input-group-wrapper.arco-react-input-group-wrapper-small .arco-react-input-group-addafter .arco-react-select{width:auto;height:100%;margin:-1px -13px -1px -12px}.arco-react-input-group-wrapper.arco-react-input-group-wrapper-small .arco-react-input-group-addafter .arco-react-select .arco-react-select-view{border-radius:0;background-color:inherit;border-color:transparent}.arco-react-input-group-wrapper.arco-react-input-group-wrapper-small .arco-react-input-group-addafter .arco-react-select.arco-react-select-single .arco-react-select-view{height:100%}.arco-react-input-group-wrapper.arco-react-input-group-wrapper-small .arco-react-input-group-addbefore .item-style{width:auto;height:100%;margin:-1px -12px -1px -13px}.arco-react-input-group-wrapper.arco-react-input-group-wrapper-small .arco-react-input-group-addbefore .arco-react-input{width:auto;height:100%;margin:-1px -12px -1px -13px;border-color:transparent;border-top-right-radius:0;border-bottom-right-radius:0}.arco-react-input-group-wrapper.arco-react-input-group-wrapper-small .arco-react-input-group-addbefore .arco-react-select{width:auto;height:100%;margin:-1px -12px -1px -13px}.arco-react-input-group-wrapper.arco-react-input-group-wrapper-small .arco-react-input-group-addbefore .arco-react-select .arco-react-select-view{border-radius:0;background-color:inherit;border-color:transparent}.arco-react-input-group-wrapper.arco-react-input-group-wrapper-small .arco-react-input-group-addbefore .arco-react-select.arco-react-select-single .arco-react-select-view{height:100%}.arco-react-input-group-wrapper.arco-react-input-group-wrapper-large .arco-react-input-group{font-size:14px}.arco-react-input-group-wrapper.arco-react-input-group-wrapper-large .arco-react-input-inner-wrapper .arco-react-input-group-prefix,.arco-react-input-group-wrapper.arco-react-input-group-wrapper-large .arco-react-input-inner-wrapper .arco-react-input-group-suffix{font-size:14px}.arco-react-input-group-wrapper.arco-react-input-group-wrapper-large .arco-react-input-inner-wrapper .arco-react-input-group-prefix>svg,.arco-react-input-group-wrapper.arco-react-input-group-wrapper-large .arco-react-input-inner-wrapper .arco-react-input-group-suffix>svg{font-size:14px}.arco-react-input-group-wrapper.arco-react-input-group-wrapper-large .arco-react-input-group-addbefore,.arco-react-input-group-wrapper.arco-react-input-group-wrapper-large .arco-react-input-group-addafter{font-size:14px;height:34px}.arco-react-input-group-wrapper.arco-react-input-group-wrapper-large .arco-react-input-group-addbefore>svg,.arco-react-input-group-wrapper.arco-react-input-group-wrapper-large .arco-react-input-group-addafter>svg{font-size:14px}.arco-react-input-group-wrapper.arco-react-input-group-wrapper-large .arco-react-input-group-addafter .item-style{width:auto;height:100%;margin:-1px -13px -1px -12px}.arco-react-input-group-wrapper.arco-react-input-group-wrapper-large .arco-react-input-group-addafter .arco-react-input{width:auto;height:100%;margin:-1px -13px -1px -12px;border-color:transparent;border-top-left-radius:0;border-bottom-left-radius:0}.arco-react-input-group-wrapper.arco-react-input-group-wrapper-large .arco-react-input-group-addafter .arco-react-select{width:auto;height:100%;margin:-1px -13px -1px -12px}.arco-react-input-group-wrapper.arco-react-input-group-wrapper-large .arco-react-input-group-addafter .arco-react-select .arco-react-select-view{border-radius:0;background-color:inherit;border-color:transparent}.arco-react-input-group-wrapper.arco-react-input-group-wrapper-large .arco-react-input-group-addafter .arco-react-select.arco-react-select-single .arco-react-select-view{height:100%}.arco-react-input-group-wrapper.arco-react-input-group-wrapper-large .arco-react-input-group-addbefore .item-style{width:auto;height:100%;margin:-1px -12px -1px -13px}.arco-react-input-group-wrapper.arco-react-input-group-wrapper-large .arco-react-input-group-addbefore .arco-react-input{width:auto;height:100%;margin:-1px -12px -1px -13px;border-color:transparent;border-top-right-radius:0;border-bottom-right-radius:0}.arco-react-input-group-wrapper.arco-react-input-group-wrapper-large .arco-react-input-group-addbefore .arco-react-select{width:auto;height:100%;margin:-1px -12px -1px -13px}.arco-react-input-group-wrapper.arco-react-input-group-wrapper-large .arco-react-input-group-addbefore .arco-react-select .arco-react-select-view{border-radius:0;background-color:inherit;border-color:transparent}.arco-react-input-group-wrapper.arco-react-input-group-wrapper-large .arco-react-input-group-addbefore .arco-react-select.arco-react-select-single .arco-react-select-view{height:100%}.arco-react-input-group-wrapper.arco-react-input-custom-height .arco-react-input-group{font-size:14px}.arco-react-input-group-wrapper.arco-react-input-custom-height .arco-react-input-inner-wrapper .arco-react-input-group-prefix,.arco-react-input-group-wrapper.arco-react-input-custom-height .arco-react-input-inner-wrapper .arco-react-input-group-suffix{font-size:14px}.arco-react-input-group-wrapper.arco-react-input-custom-height .arco-react-input-inner-wrapper .arco-react-input-group-prefix>svg,.arco-react-input-group-wrapper.arco-react-input-custom-height .arco-react-input-inner-wrapper .arco-react-input-group-suffix>svg{font-size:14px}.arco-react-input-group-wrapper.arco-react-input-custom-height .arco-react-input-group-addbefore,.arco-react-input-group-wrapper.arco-react-input-custom-height .arco-react-input-group-addafter{font-size:14px;height:22px}.arco-react-input-group-wrapper.arco-react-input-custom-height .arco-react-input-group-addbefore>svg,.arco-react-input-group-wrapper.arco-react-input-custom-height .arco-react-input-group-addafter>svg{font-size:14px}.arco-react-input-group-wrapper.arco-react-input-custom-height .arco-react-input-group-addafter .item-style{width:auto;height:100%;margin:-1px -13px -1px -12px}.arco-react-input-group-wrapper.arco-react-input-custom-height .arco-react-input-group-addafter .arco-react-input{width:auto;height:100%;margin:-1px -13px -1px -12px;border-color:transparent;border-top-left-radius:0;border-bottom-left-radius:0}.arco-react-input-group-wrapper.arco-react-input-custom-height .arco-react-input-group-addafter .arco-react-select{width:auto;height:100%;margin:-1px -13px -1px -12px}.arco-react-input-group-wrapper.arco-react-input-custom-height .arco-react-input-group-addafter .arco-react-select .arco-react-select-view{border-radius:0;background-color:inherit;border-color:transparent}.arco-react-input-group-wrapper.arco-react-input-custom-height .arco-react-input-group-addafter .arco-react-select.arco-react-select-single .arco-react-select-view{height:100%}.arco-react-input-group-wrapper.arco-react-input-custom-height .arco-react-input-group-addbefore .item-style{width:auto;height:100%;margin:-1px -12px -1px -13px}.arco-react-input-group-wrapper.arco-react-input-custom-height .arco-react-input-group-addbefore .arco-react-input{width:auto;height:100%;margin:-1px -12px -1px -13px;border-color:transparent;border-top-right-radius:0;border-bottom-right-radius:0}.arco-react-input-group-wrapper.arco-react-input-custom-height .arco-react-input-group-addbefore .arco-react-select{width:auto;height:100%;margin:-1px -12px -1px -13px}.arco-react-input-group-wrapper.arco-react-input-custom-height .arco-react-input-group-addbefore .arco-react-select .arco-react-select-view{border-radius:0;background-color:inherit;border-color:transparent}.arco-react-input-group-wrapper.arco-react-input-custom-height .arco-react-input-group-addbefore .arco-react-select.arco-react-select-single .arco-react-select-view{height:100%}.arco-react-input-group-wrapper.arco-react-input-custom-height .arco-react-input-inner-wrapper{height:100%}.arco-react-input-group-wrapper.arco-react-input-custom-height .arco-react-input-inner-wrapper .arco-react-input{height:100%}.arco-react-input-group-wrapper.arco-react-input-custom-height .arco-react-input-inner-wrapper .arco-react-input-clear-wrapper{height:100%}.arco-react-input-group-wrapper.arco-react-input-custom-height .arco-react-input-inner-wrapper .arco-react-input-clear-wrapper .arco-react-input{height:100%}.arco-react-input-group-wrapper .arco-react-input-inner-wrapper{height:100%}.arco-react-input-group-wrapper.arco-react-input-disabled{cursor:not-allowed}.arco-react-input-mirror{position:absolute;top:0;left:0;visibility:hidden}.arco-react-textarea{outline:none;appearance:none;-webkit-tap-highlight-color:rgba(0,0,0,0);width:100%;border-radius:var(--border-radius-small);color:var(--color-text-1);box-sizing:border-box;transition:color .1s cubic-bezier(0,0,1,1),border-color .1s cubic-bezier(0,0,1,1),background-color .1s cubic-bezier(0,0,1,1);border:1px solid transparent;background-color:var(--color-fill-2);font-size:14px;vertical-align:top;position:relative;padding:4px 12px;max-width:100%;min-height:32px;height:auto;line-height:1.5715;resize:vertical;overflow:auto}.arco-react-textarea::placeholder{color:var(--color-text-3)}.arco-react-textarea:hover{background-color:var(--color-fill-3);border-color:transparent}.arco-react-textarea:focus,.arco-react-textarea.arco-react-textarea-focus{border-color:rgb(var(--primary-6));background-color:var(--color-bg-2);box-shadow:0 0 0 0 var(--color-primary-light-2)}.arco-react-textarea-error{border-color:transparent;background-color:var(--color-danger-light-1)}.arco-react-textarea-error:hover{border-color:transparent;background-color:var(--color-danger-light-2)}.arco-react-textarea-error:focus,.arco-react-textarea-error.arco-react-textarea-focus{border-color:rgb(var(--danger-6));background-color:var(--color-bg-2);box-shadow:0 0 0 0 var(--color-danger-light-2)}.arco-react-textarea-disabled{background-color:var(--color-fill-2);cursor:not-allowed;color:var(--color-text-4);-webkit-text-fill-color:var(--color-text-4);border-color:transparent}.arco-react-textarea-disabled:hover{border-color:transparent;background-color:var(--color-fill-2);color:var(--color-text-4)}.arco-react-textarea-disabled::placeholder{color:var(--color-text-4)}.arco-react-input-group.arco-react-input-group-compact>.arco-react-select{vertical-align:unset}.arco-react-input-group.arco-react-input-group-compact>.arco-react-select .arco-react-select-view{border-radius:0}.arco-react-input-group.arco-react-input-group-compact>*{border-radius:0}.arco-react-input-group.arco-react-input-group-compact>* .arco-react-input-group>:last-child,.arco-react-input-group.arco-react-input-group-compact>* .arco-react-input-group>:first-child{border-radius:0}.arco-react-input-group.arco-react-input-group-compact>*:not(:last-child){position:relative;border-right:1px solid var(--color-neutral-3);box-sizing:border-box}.arco-react-input-group.arco-react-input-group-compact>*:first-child,.arco-react-input-group.arco-react-input-group-compact>*:first-child .arco-react-input-group>*:first-child{border-top-left-radius:var(--border-radius-small);border-bottom-left-radius:var(--border-radius-small)}.arco-react-input-group.arco-react-input-group-compact>*:first-child .arco-react-select .arco-react-select-view,.arco-react-input-group.arco-react-input-group-compact>*:first-child .arco-react-input-group>*:first-child .arco-react-select .arco-react-select-view{border-top-left-radius:var(--border-radius-small);border-bottom-left-radius:var(--border-radius-small)}.arco-react-input-group.arco-react-input-group-compact>*:last-child,.arco-react-input-group.arco-react-input-group-compact>*:last-child .arco-react-input-group>*:last-child{border-top-right-radius:var(--border-radius-small);border-bottom-right-radius:var(--border-radius-small)}.arco-react-input-group.arco-react-input-group-compact>*:last-child .arco-react-select .arco-react-select-view,.arco-react-input-group.arco-react-input-group-compact>*:last-child .arco-react-input-group>*:last-child .arco-react-select .arco-react-select-view{border-top-right-radius:var(--border-radius-small);border-bottom-right-radius:var(--border-radius-small)}.arco-react-input-group.arco-react-input-group-compact>.arco-react-input:not(:last-child){border-right-color:var(--color-neutral-3)}.arco-react-input-group.arco-react-input-group-compact>.arco-react-input:not(:last-child):focus{border-right-color:rgb(var(--primary-6))}.size-height-size-mini{line-height:1.667;font-size:12px;padding-top:1px;padding-bottom:1px}.size-height-size-small{padding-top:2px;padding-bottom:2px;font-size:14px}.size-height-size-large{padding-top:6px;padding-bottom:6px;font-size:14px}.size-height-group-wrapper-mini .arco-react-input-group-addbefore,.size-height-group-wrapper-mini .arco-react-input-group-addafter{padding-left:8px;padding-right:8px}.size-height-inner-wrapper.size-height-inner-wrapper-mini{padding-left:8px;padding-right:8px}.size-height-size-mini{padding-left:8px;padding-right:8px}.size-height-group-wrapper-small .arco-react-input-group-addbefore,.size-height-group-wrapper-small .arco-react-input-group-addafter{padding-left:12px;padding-right:12px}.size-height-inner-wrapper.size-height-inner-wrapper-small{padding-left:12px;padding-right:12px}.size-height-size-small{padding-left:12px;padding-right:12px}.size-height-group-wrapper-large .arco-react-input-group-addbefore,.size-height-group-wrapper-large .arco-react-input-group-addafter{padding-left:16px;padding-right:16px}.size-height-inner-wrapper.size-height-inner-wrapper-large{padding-left:16px;padding-right:16px}.size-height-size-large{padding-left:16px;padding-right:16px}.group-size.group-size-mini .arco-react-input-group{font-size:12px}.group-size.group-size-mini .arco-react-input-inner-wrapper .arco-react-input-group-prefix,.group-size.group-size-mini .arco-react-input-inner-wrapper .arco-react-input-group-suffix{font-size:12px}.group-size.group-size-mini .arco-react-input-inner-wrapper .arco-react-input-group-prefix>svg,.group-size.group-size-mini .arco-react-input-inner-wrapper .arco-react-input-group-suffix>svg{font-size:12px}.group-size.group-size-mini .arco-react-input-group-addbefore,.group-size.group-size-mini .arco-react-input-group-addafter{font-size:12px;height:22px}.group-size.group-size-mini .arco-react-input-group-addbefore>svg,.group-size.group-size-mini .arco-react-input-group-addafter>svg{font-size:12px}.group-size.group-size-mini .arco-react-input-group-addafter .item-style{width:auto;height:100%;margin:-1px -13px -1px -12px}.group-size.group-size-mini .arco-react-input-group-addafter .arco-react-input{width:auto;height:100%;margin:-1px -13px -1px -12px;border-color:transparent;border-top-left-radius:0;border-bottom-left-radius:0}.group-size.group-size-mini .arco-react-input-group-addafter .arco-react-select{width:auto;height:100%;margin:-1px -13px -1px -12px}.group-size.group-size-mini .arco-react-input-group-addafter .arco-react-select .arco-react-select-view{border-radius:0;background-color:inherit;border-color:transparent}.group-size.group-size-mini .arco-react-input-group-addafter .arco-react-select.arco-react-select-single .arco-react-select-view{height:100%}.group-size.group-size-mini .arco-react-input-group-addbefore .item-style{width:auto;height:100%;margin:-1px -12px -1px -13px}.group-size.group-size-mini .arco-react-input-group-addbefore .arco-react-input{width:auto;height:100%;margin:-1px -12px -1px -13px;border-color:transparent;border-top-right-radius:0;border-bottom-right-radius:0}.group-size.group-size-mini .arco-react-input-group-addbefore .arco-react-select{width:auto;height:100%;margin:-1px -12px -1px -13px}.group-size.group-size-mini .arco-react-input-group-addbefore .arco-react-select .arco-react-select-view{border-radius:0;background-color:inherit;border-color:transparent}.group-size.group-size-mini .arco-react-input-group-addbefore .arco-react-select.arco-react-select-single .arco-react-select-view{height:100%}.group-size.group-size-small .arco-react-input-group{font-size:14px}.group-size.group-size-small .arco-react-input-inner-wrapper .arco-react-input-group-prefix,.group-size.group-size-small .arco-react-input-inner-wrapper .arco-react-input-group-suffix{font-size:14px}.group-size.group-size-small .arco-react-input-inner-wrapper .arco-react-input-group-prefix>svg,.group-size.group-size-small .arco-react-input-inner-wrapper .arco-react-input-group-suffix>svg{font-size:14px}.group-size.group-size-small .arco-react-input-group-addbefore,.group-size.group-size-small .arco-react-input-group-addafter{font-size:14px;height:26px}.group-size.group-size-small .arco-react-input-group-addbefore>svg,.group-size.group-size-small .arco-react-input-group-addafter>svg{font-size:14px}.group-size.group-size-small .arco-react-input-group-addafter .item-style{width:auto;height:100%;margin:-1px -13px -1px -12px}.group-size.group-size-small .arco-react-input-group-addafter .arco-react-input{width:auto;height:100%;margin:-1px -13px -1px -12px;border-color:transparent;border-top-left-radius:0;border-bottom-left-radius:0}.group-size.group-size-small .arco-react-input-group-addafter .arco-react-select{width:auto;height:100%;margin:-1px -13px -1px -12px}.group-size.group-size-small .arco-react-input-group-addafter .arco-react-select .arco-react-select-view{border-radius:0;background-color:inherit;border-color:transparent}.group-size.group-size-small .arco-react-input-group-addafter .arco-react-select.arco-react-select-single .arco-react-select-view{height:100%}.group-size.group-size-small .arco-react-input-group-addbefore .item-style{width:auto;height:100%;margin:-1px -12px -1px -13px}.group-size.group-size-small .arco-react-input-group-addbefore .arco-react-input{width:auto;height:100%;margin:-1px -12px -1px -13px;border-color:transparent;border-top-right-radius:0;border-bottom-right-radius:0}.group-size.group-size-small .arco-react-input-group-addbefore .arco-react-select{width:auto;height:100%;margin:-1px -12px -1px -13px}.group-size.group-size-small .arco-react-input-group-addbefore .arco-react-select .arco-react-select-view{border-radius:0;background-color:inherit;border-color:transparent}.group-size.group-size-small .arco-react-input-group-addbefore .arco-react-select.arco-react-select-single .arco-react-select-view{height:100%}.group-size.group-size-large .arco-react-input-group{font-size:14px}.group-size.group-size-large .arco-react-input-inner-wrapper .arco-react-input-group-prefix,.group-size.group-size-large .arco-react-input-inner-wrapper .arco-react-input-group-suffix{font-size:14px}.group-size.group-size-large .arco-react-input-inner-wrapper .arco-react-input-group-prefix>svg,.group-size.group-size-large .arco-react-input-inner-wrapper .arco-react-input-group-suffix>svg{font-size:14px}.group-size.group-size-large .arco-react-input-group-addbefore,.group-size.group-size-large .arco-react-input-group-addafter{font-size:14px;height:34px}.group-size.group-size-large .arco-react-input-group-addbefore>svg,.group-size.group-size-large .arco-react-input-group-addafter>svg{font-size:14px}.group-size.group-size-large .arco-react-input-group-addafter .item-style{width:auto;height:100%;margin:-1px -13px -1px -12px}.group-size.group-size-large .arco-react-input-group-addafter .arco-react-input{width:auto;height:100%;margin:-1px -13px -1px -12px;border-color:transparent;border-top-left-radius:0;border-bottom-left-radius:0}.group-size.group-size-large .arco-react-input-group-addafter .arco-react-select{width:auto;height:100%;margin:-1px -13px -1px -12px}.group-size.group-size-large .arco-react-input-group-addafter .arco-react-select .arco-react-select-view{border-radius:0;background-color:inherit;border-color:transparent}.group-size.group-size-large .arco-react-input-group-addafter .arco-react-select.arco-react-select-single .arco-react-select-view{height:100%}.group-size.group-size-large .arco-react-input-group-addbefore .item-style{width:auto;height:100%;margin:-1px -12px -1px -13px}.group-size.group-size-large .arco-react-input-group-addbefore .arco-react-input{width:auto;height:100%;margin:-1px -12px -1px -13px;border-color:transparent;border-top-right-radius:0;border-bottom-right-radius:0}.group-size.group-size-large .arco-react-input-group-addbefore .arco-react-select{width:auto;height:100%;margin:-1px -12px -1px -13px}.group-size.group-size-large .arco-react-input-group-addbefore .arco-react-select .arco-react-select-view{border-radius:0;background-color:inherit;border-color:transparent}.group-size.group-size-large .arco-react-input-group-addbefore .arco-react-select.arco-react-select-single .arco-react-select-view{height:100%}.group-size.arco-react-input-custom-height .arco-react-input-group{font-size:14px}.group-size.arco-react-input-custom-height .arco-react-input-inner-wrapper .arco-react-input-group-prefix,.group-size.arco-react-input-custom-height .arco-react-input-inner-wrapper .arco-react-input-group-suffix{font-size:14px}.group-size.arco-react-input-custom-height .arco-react-input-inner-wrapper .arco-react-input-group-prefix>svg,.group-size.arco-react-input-custom-height .arco-react-input-inner-wrapper .arco-react-input-group-suffix>svg{font-size:14px}.group-size.arco-react-input-custom-height .arco-react-input-group-addbefore,.group-size.arco-react-input-custom-height .arco-react-input-group-addafter{font-size:14px;height:22px}.group-size.arco-react-input-custom-height .arco-react-input-group-addbefore>svg,.group-size.arco-react-input-custom-height .arco-react-input-group-addafter>svg{font-size:14px}.group-size.arco-react-input-custom-height .arco-react-input-group-addafter .item-style{width:auto;height:100%;margin:-1px -13px -1px -12px}.group-size.arco-react-input-custom-height .arco-react-input-group-addafter .arco-react-input{width:auto;height:100%;margin:-1px -13px -1px -12px;border-color:transparent;border-top-left-radius:0;border-bottom-left-radius:0}.group-size.arco-react-input-custom-height .arco-react-input-group-addafter .arco-react-select{width:auto;height:100%;margin:-1px -13px -1px -12px}.group-size.arco-react-input-custom-height .arco-react-input-group-addafter .arco-react-select .arco-react-select-view{border-radius:0;background-color:inherit;border-color:transparent}.group-size.arco-react-input-custom-height .arco-react-input-group-addafter .arco-react-select.arco-react-select-single .arco-react-select-view{height:100%}.group-size.arco-react-input-custom-height .arco-react-input-group-addbefore .item-style{width:auto;height:100%;margin:-1px -12px -1px -13px}.group-size.arco-react-input-custom-height .arco-react-input-group-addbefore .arco-react-input{width:auto;height:100%;margin:-1px -12px -1px -13px;border-color:transparent;border-top-right-radius:0;border-bottom-right-radius:0}.group-size.arco-react-input-custom-height .arco-react-input-group-addbefore .arco-react-select{width:auto;height:100%;margin:-1px -12px -1px -13px}.group-size.arco-react-input-custom-height .arco-react-input-group-addbefore .arco-react-select .arco-react-select-view{border-radius:0;background-color:inherit;border-color:transparent}.group-size.arco-react-input-custom-height .arco-react-input-group-addbefore .arco-react-select.arco-react-select-single .arco-react-select-view{height:100%}.group-size.arco-react-input-custom-height .arco-react-input-inner-wrapper{height:100%}.group-size.arco-react-input-custom-height .arco-react-input-inner-wrapper .arco-react-input{height:100%}.group-size.arco-react-input-custom-height .arco-react-input-inner-wrapper .arco-react-input-clear-wrapper{height:100%}.group-size.arco-react-input-custom-height .arco-react-input-inner-wrapper .arco-react-input-clear-wrapper .arco-react-input{height:100%}.arco-react-textarea-wrapper{display:inline-block;position:relative;width:100%}.arco-react-textarea-clear-wrapper:hover .arco-react-textarea-clear-icon{display:inline-block}.arco-react-textarea-clear-wrapper .arco-react-textarea{padding-right:20px}.arco-react-textarea-word-limit{position:absolute;font-size:12px;bottom:6px;right:10px;color:var(--color-text-3);user-select:none}.arco-react-textarea-word-limit-error{color:rgb(var(--danger-6))}.arco-react-textarea-clear-icon{display:none;position:absolute;right:10px;top:10px;font-size:12px;color:var(--color-text-2)}.arco-react-textarea-clear-icon>svg{transition:color .1s cubic-bezier(0,0,1,1);position:relative}.arco-react-input-search.arco-react-input-group-wrapper .arco-react-input-group-addbefore{transition:all .1s cubic-bezier(0,0,1,1)}.arco-react-input-search.arco-react-input-group-wrapper .arco-react-input-group-addafter{padding:0;border:none}.arco-react-input-search.arco-react-input-group-wrapper .arco-react-input-group-suffix{color:var(--color-text-2);font-size:14px}.arco-react-input-search.arco-react-input-group-wrapper:not(.arco-react-input-disabled) .arco-react-input-group-addbefore{cursor:pointer;color:var(--color-text-2);font-size:14px}.arco-react-input-search.arco-react-input-group-wrapper .arco-react-input-search-btn{border-top-left-radius:0;border-bottom-left-radius:0;height:100%;font-size:14px;color:var(--color-white)}.arco-react-input-search-button .arco-react-input-inner-wrapper{border-right:none;border-top-right-radius:0;border-bottom-right-radius:0}.arco-react-input-password.arco-react-input-group-wrapper:not(.arco-react-input-disabled) .arco-react-input-group-suffix{cursor:pointer;color:var(--color-text-2);font-size:12px}.arco-react-input-number{position:relative;display:inline-block;width:100%;box-sizing:border-box;border-radius:var(--border-radius-small)}.arco-react-input-number-step-button{display:flex;align-items:center;justify-content:center;box-sizing:border-box;border-color:var(--color-neutral-3);background-color:var(--color-fill-2);color:var(--color-text-2);cursor:pointer;user-select:none;transition:all .1s cubic-bezier(0,0,1,1)}.arco-react-input-number-step-button:hover{border-color:var(--color-fill-3);background-color:var(--color-fill-3)}.arco-react-input-number-step-button:active{border-color:var(--color-fill-4);background-color:var(--color-fill-4)}.arco-react-input-number-step-button-disabled{cursor:not-allowed;background-color:var(--color-fill-2);color:var(--color-text-4)}.arco-react-input-number-step-button-disabled:hover,.arco-react-input-number-step-button-disabled:active{border-color:var(--color-neutral-3);background-color:var(--color-fill-2)}.arco-react-input-number-prefix,.arco-react-input-number-suffix{transition:all .1s cubic-bezier(0,0,1,1)}.arco-react-input-number-mode-embed .arco-react-input-number-step-layer{opacity:0;position:absolute;right:4px;top:4px;bottom:4px;width:18px;border-radius:1px;overflow:hidden;transition:all .1s cubic-bezier(0,0,1,1)}.arco-react-input-number-mode-embed .arco-react-input-number-step-layer .arco-react-input-number-step-button{width:100%;height:50%;font-size:10px}.arco-react-input-number-mode-embed:not(.arco-react-input-group-wrapper-disabled):hover .arco-react-input-number-step-layer{opacity:1}.arco-react-input-number-mode-embed:not(.arco-react-input-group-wrapper-disabled):hover .arco-react-input-number-step-layer~.arco-react-input-number-suffix{opacity:0;pointer-events:none}.arco-react-input-number-mode-embed .arco-react-input-inner-wrapper:not(.arco-react-input-inner-wrapper-focus) .arco-react-input-number-step-button:not(.arco-react-input-number-step-button-disabled):hover{background-color:var(--color-fill-4)}.arco-react-input-number-mode-button .arco-react-input{text-align:center}.arco-react-input-number-mode-button .arco-react-input-group{position:relative}.arco-react-input-number-mode-button .arco-react-input-group-addbefore,.arco-react-input-number-mode-button .arco-react-input-group-addafter{padding:0}.arco-react-input-number-mode-button .arco-react-input-group .arco-react-input-number-step-button{position:absolute;top:0;height:100%;border:inherit}.arco-react-input-number-mode-button .arco-react-input-group .arco-react-input-number-step-button:active{border-color:var(--color-fill-4)}.arco-react-input-number-mode-button .arco-react-input-group-addbefore .arco-react-input-number-step-button{left:0;border-right-color:var(--color-neutral-3)}.arco-react-input-number-mode-button .arco-react-input-group-addafter .arco-react-input-number-step-button{right:0;border-left-color:var(--color-neutral-3)}.arco-react-input-number-mode-button.arco-react-input-number-size-mini .arco-react-input-group-addbefore,.arco-react-input-number-mode-button.arco-react-input-number-size-mini .arco-react-input-group-addafter{width:24px}.arco-react-input-number-mode-button.arco-react-input-number-size-mini .arco-react-input-group-addbefore .arco-react-input-number-step-button,.arco-react-input-number-mode-button.arco-react-input-number-size-mini .arco-react-input-group-addafter .arco-react-input-number-step-button{width:24px}.arco-react-input-number-mode-button.arco-react-input-number-size-small .arco-react-input-group-addbefore,.arco-react-input-number-mode-button.arco-react-input-number-size-small .arco-react-input-group-addafter{width:28px}.arco-react-input-number-mode-button.arco-react-input-number-size-small .arco-react-input-group-addbefore .arco-react-input-number-step-button,.arco-react-input-number-mode-button.arco-react-input-number-size-small .arco-react-input-group-addafter .arco-react-input-number-step-button{width:28px}.arco-react-input-number-mode-button.arco-react-input-number-size-default .arco-react-input-group-addbefore,.arco-react-input-number-mode-button.arco-react-input-number-size-default .arco-react-input-group-addafter{width:32px}.arco-react-input-number-mode-button.arco-react-input-number-size-default .arco-react-input-group-addbefore .arco-react-input-number-step-button,.arco-react-input-number-mode-button.arco-react-input-number-size-default .arco-react-input-group-addafter .arco-react-input-number-step-button{width:32px}.arco-react-input-number-mode-button.arco-react-input-number-size-large .arco-react-input-group-addbefore,.arco-react-input-number-mode-button.arco-react-input-number-size-large .arco-react-input-group-addafter{width:36px}.arco-react-input-number-mode-button.arco-react-input-number-size-large .arco-react-input-group-addbefore .arco-react-input-number-step-button,.arco-react-input-number-mode-button.arco-react-input-number-size-large .arco-react-input-group-addafter .arco-react-input-number-step-button{width:36px}.arco-react-input-number-readonly .arco-react-input-number-step-button{pointer-events:none;color:var(--color-text-4)}.arco-react-input-number-illegal-value input{color:rgb(var(--danger-6))}.arco-react-input-tag{display:inline-block;box-sizing:border-box;width:100%;padding-left:4px;padding-right:4px;border-radius:var(--border-radius-small);vertical-align:top;cursor:text;transition:all .1s cubic-bezier(0,0,1,1);background-color:var(--color-fill-2);color:var(--color-text-1);border:1px solid transparent}.arco-react-input-tag-view{display:flex;width:100%}.arco-react-input-tag-inner{display:flex;align-items:center;flex-wrap:wrap;flex-grow:1;position:relative;box-sizing:border-box;overflow:hidden}.arco-react-input-tag-suffix{display:flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:22px;padding-right:8px}.arco-react-input-tag .arco-react-input-tag-clear-icon{display:none;font-size:12px;color:var(--color-text-2);cursor:pointer}.arco-react-input-tag .arco-react-input-tag-clear-icon>svg{transition:color .1s cubic-bezier(0,0,1,1);position:relative}.arco-react-input-tag:hover .arco-react-input-tag-clear-icon{display:block}.arco-react-input-tag:hover .arco-react-input-tag-clear-icon~*{display:none}.arco-react-input-tag:not(.arco-react-input-tag-focus) -clear-icon:hover:before{background-color:var(--color-fill-4)}.arco-react-input-tag:not(.arco-react-input-tag-focus) .arco-react-draggable-item{cursor:move}.arco-react-input-tag-input{width:100%;padding:0;border:none;outline:none;background:none;font-size:inherit;cursor:inherit;color:inherit}.arco-react-input-tag-input-mirror{position:absolute;top:0;left:0;visibility:hidden;pointer-events:none}.arco-react-input-tag-input::placeholder{color:var(--color-text-3)}.arco-react-input-tag-tag{margin-right:4px;font-size:12px}.arco-react-input-tag .arco-react-icon-hover{cursor:pointer}.arco-react-input-tag .arco-react-icon-hover.arco-react-icon-hover-disabled{cursor:not-allowed}.arco-react-input-tag:hover{background-color:var(--color-fill-3);border:1px solid transparent}.arco-react-input-tag.arco-react-input-tag-focus{background-color:var(--color-bg-2);border:1px solid rgb(var(--primary-6));box-shadow:0 0 0 0 rgb(var(--primary-2))}.arco-react-input-tag .arco-react-input-tag-tag{color:var(--color-text-1);border-color:var(--color-fill-3);background-color:var(--color-bg-2);display:inline-flex;align-items:center}.arco-react-input-tag .arco-react-input-tag-tag-content{flex:1;overflow:hidden;text-overflow:ellipsis}.arco-react-input-tag .arco-react-icon-hover:hover:before{background-color:var(--color-fill-2)}.arco-react-input-tag.arco-react-input-tag-focus .arco-react-input-tag-tag{border-color:var(--color-fill-2);background-color:var(--color-fill-2)}.arco-react-input-tag.arco-react-input-tag-focus .arco-react-icon-hover:hover:before{background-color:var(--color-fill-3)}.arco-react-input-tag.arco-react-input-tag-disabled .arco-react-input-tag-tag{color:var(--color-text-4);border-color:var(--color-fill-3);background-color:var(--color-fill-2)}.arco-react-input-tag-disabled{background-color:var(--color-fill-2);color:var(--color-text-4);border:1px solid transparent;cursor:not-allowed}.arco-react-input-tag-disabled:hover{background-color:var(--color-fill-2);border:1px solid transparent}.arco-react-input-tag-disabled .arco-react-input-tag-input::placeholder{color:var(--color-text-4)}.arco-react-input-tag-error{background-color:rgb(var(--danger-1));color:var(--color-text-1);border:1px solid transparent}.arco-react-input-tag-error:hover{background-color:rgb(var(--danger-2));border:1px solid transparent}.arco-react-input-tag-error.arco-react-input-tag-focus{background-color:var(--color-bg-2);border:1px solid rgb(var(--danger-6));box-shadow:0 0 0 0 rgb(var(--danger-2))}.arco-react-input-tag-readonly{cursor:default}.arco-react-input-tag-size-mini{font-size:12px}.arco-react-input-tag-size-mini .arco-react-input-tag-view{min-height:22px}.arco-react-input-tag-size-mini .arco-react-input-tag-inner{padding-top:-1px;padding-bottom:-1px}.arco-react-input-tag-size-mini .arco-react-input-tag-tag,.arco-react-input-tag-size-mini .arco-react-input-tag-tag+.arco-react-input-tag-input{margin-top:1px;margin-bottom:1px;height:20px;line-height:18px}.arco-react-input-tag-size-mini.arco-react-input-tag-has-placeholder input,.arco-react-input-tag-size-mini.arco-react-input-tag-has-placeholder .arco-react-input-tag-input-mirror{box-sizing:border-box;padding-left:4px}.arco-react-input-tag-size-default{font-size:14px}.arco-react-input-tag-size-default .arco-react-input-tag-view{min-height:30px}.arco-react-input-tag-size-default .arco-react-input-tag-inner{padding-top:1px;padding-bottom:1px}.arco-react-input-tag-size-default .arco-react-input-tag-tag,.arco-react-input-tag-size-default .arco-react-input-tag-tag+.arco-react-input-tag-input{margin-top:1px;margin-bottom:1px;height:24px;line-height:22px}.arco-react-input-tag-size-default.arco-react-input-tag-has-placeholder input,.arco-react-input-tag-size-default.arco-react-input-tag-has-placeholder .arco-react-input-tag-input-mirror{box-sizing:border-box;padding-left:8px}.arco-react-input-tag-size-small{font-size:14px}.arco-react-input-tag-size-small .arco-react-input-tag-view{min-height:26px}.arco-react-input-tag-size-small .arco-react-input-tag-inner{padding-top:1px;padding-bottom:1px}.arco-react-input-tag-size-small .arco-react-input-tag-tag,.arco-react-input-tag-size-small .arco-react-input-tag-tag+.arco-react-input-tag-input{margin-top:1px;margin-bottom:1px;height:20px;line-height:18px}.arco-react-input-tag-size-small.arco-react-input-tag-has-placeholder input,.arco-react-input-tag-size-small.arco-react-input-tag-has-placeholder .arco-react-input-tag-input-mirror{box-sizing:border-box;padding-left:8px}.arco-react-input-tag-size-large{font-size:16px}.arco-react-input-tag-size-large .arco-react-input-tag-view{min-height:34px}.arco-react-input-tag-size-large .arco-react-input-tag-inner{padding-top:1px;padding-bottom:1px}.arco-react-input-tag-size-large .arco-react-input-tag-tag,.arco-react-input-tag-size-large .arco-react-input-tag-tag+.arco-react-input-tag-input{margin-top:1px;margin-bottom:1px;height:28px;line-height:26px}.arco-react-input-tag-size-large.arco-react-input-tag-has-placeholder input,.arco-react-input-tag-size-large.arco-react-input-tag-has-placeholder .arco-react-input-tag-input-mirror{box-sizing:border-box;padding-left:12px}.arco-react-layout{display:flex;flex:1;margin:0;padding:0;flex-direction:column}.arco-react-layout-sider{position:relative;width:auto;margin:0;padding:0;flex:none;background:var(--color-menu-dark-bg);transition:width .2s cubic-bezier(.34,.69,.1,1)}.arco-react-layout-sider-children{height:100%;overflow:auto}.arco-react-layout-sider-collapsed .arco-react-layout-sider-children::-webkit-scrollbar{width:0}.arco-react-layout-sider-has-trigger{padding-bottom:48px;box-sizing:border-box}.arco-react-layout-sider-trigger{box-sizing:border-box;width:100%;height:48px;line-height:48px;text-align:center;background:rgba(255,255,255,.2);color:var(--color-white);cursor:pointer;transition:width .2s cubic-bezier(.34,.69,.1,1);z-index:1}.arco-react-layout-sider-trigger-light{background:var(--color-menu-light-bg);border-top:1px solid var(--color-bg-5);color:var(--color-text-1)}.arco-react-layout-sider-light{background:var(--color-menu-light-bg);box-shadow:0 2px 5px #00000014}.arco-react-layout-header{margin:0;flex:0 0 auto;box-sizing:border-box}.arco-react-layout-content{flex:1}.arco-react-layout-footer{flex:0 0 auto;margin:0}.arco-react-layout-has-sider{flex-direction:row}.arco-react-layout-has-sider>.arco-react-layout,.arco-react-layout-has-sider>.arco-react-layout-content{overflow-x:hidden}.arco-react-link{color:rgb(var(--link-6));font-size:14px;line-height:1.5715;display:inline-block;padding:1px 4px;text-decoration:none;cursor:pointer;border-radius:var(--border-radius-small);background-color:transparent;transition:all .1s cubic-bezier(0,0,1,1)}.arco-react-link:hover{color:rgb(var(--link-6));background-color:var(--color-fill-2)}.arco-react-link:active{transition:none;color:rgb(var(--link-6));background-color:var(--color-fill-3)}.arco-react-link.arco-react-link-hoverless{background-color:unset;padding:0;display:inline}.arco-react-link.arco-react-link-hoverless:active,.arco-react-link.arco-react-link-hoverless:hover{background-color:unset}.arco-react-link.arco-react-link-disabled{color:var(--color-link-light-3);background:none;cursor:not-allowed}.arco-react-link-is-success{color:rgb(var(--success-6))}.arco-react-link-is-success:hover{color:rgb(var(--success-6))}.arco-react-link-is-success:active{color:rgb(var(--success-6))}.arco-react-link-is-success.arco-react-link-disabled{color:var(--color-success-light-3)}.arco-react-link-is-error{color:rgb(var(--danger-6))}.arco-react-link-is-error:hover{color:rgb(var(--danger-6))}.arco-react-link-is-error:active{color:rgb(var(--danger-6))}.arco-react-link-is-error.arco-react-link-disabled{color:var(--color-danger-light-3)}.arco-react-link-is-warning{color:rgb(var(--warning-6))}.arco-react-link-is-warning:hover{color:rgb(var(--warning-6))}.arco-react-link-is-warning:active{color:rgb(var(--warning-6))}.arco-react-link-is-warning.arco-react-link-disabled{color:var(--color-warning-light-2)}.arco-react-link-icon{margin-right:6px;font-size:12px}.arco-react-list{display:flex;flex-direction:column;box-sizing:border-box;width:100%;border-radius:var(--border-radius-medium);font-size:14px;line-height:1.5715;color:var(--color-text-1);overflow-y:auto;border:1px solid var(--color-neutral-3)}.arco-react-list-wrapper{overflow:hidden}.arco-react-list-small>.arco-react-list-header{padding:8px 20px}.arco-react-list-small>.arco-react-list-footer,.arco-react-list-small>.arco-react-list-content>.arco-react-list-item,.arco-react-list-small>.arco-react-list-content .arco-react-list-row-col>.arco-react-list-item,.arco-react-list-small>.arco-react-list-content.arco-react-list-virtual .arco-react-list-item{padding:9px 20px}.arco-react-list-default>.arco-react-list-header{padding:12px 20px}.arco-react-list-default>.arco-react-list-footer,.arco-react-list-default>.arco-react-list-content>.arco-react-list-item,.arco-react-list-default>.arco-react-list-content .arco-react-list-row-col>.arco-react-list-item,.arco-react-list-default>.arco-react-list-content.arco-react-list-virtual .arco-react-list-item{padding:13px 20px}.arco-react-list-large>.arco-react-list-header{padding:16px 20px}.arco-react-list-large>.arco-react-list-footer,.arco-react-list-large>.arco-react-list-content>.arco-react-list-item,.arco-react-list-large>.arco-react-list-content .arco-react-list-row-col>.arco-react-list-item,.arco-react-list-large>.arco-react-list-content.arco-react-list-virtual .arco-react-list-item{padding:17px 20px}.arco-react-list-header,.arco-react-list-item:not(:last-child){border-bottom:1px solid var(--color-neutral-3)}.arco-react-list-footer{border-top:1px solid var(--color-neutral-3)}.arco-react-list-no-border{border:none}.arco-react-list-no-split .arco-react-list-header,.arco-react-list-no-split .arco-react-list-footer,.arco-react-list-no-split .arco-react-list-item{border:none}.arco-react-list-header{font-size:16px;font-weight:500;line-height:1.5;color:var(--color-text-1)}.arco-react-list-item{display:flex;justify-content:space-between;box-sizing:border-box;width:100%;overflow:hidden}.arco-react-list-item-main{flex:1;overflow:hidden}.arco-react-list-item-main .arco-react-list-item-action:not(:first-child){margin-top:4px}.arco-react-list-item-meta{display:flex;align-items:center;padding:4px 0}.arco-react-list-item-meta-avatar{display:flex}.arco-react-list-item-meta-avatar:not(:last-child){margin-right:16px}.arco-react-list-item-meta-title{font-weight:500;color:var(--color-text-1)}.arco-react-list-item-meta-title:not(:last-child){margin-bottom:2px}.arco-react-list-item-meta-description{color:var(--color-text-2)}.arco-react-list-item-action{display:flex;flex-wrap:nowrap;align-self:center;list-style:none}.arco-react-list-item-action>li{display:inline-block;cursor:pointer}.arco-react-list-item-action>li:not(:last-child){margin-right:20px}.arco-react-list-hoverable .arco-react-list-item:hover{background-color:var(--color-fill-1)}.arco-react-list-pagination{float:right;margin-top:24px}.arco-react-list-pagination:after{display:block;clear:both;height:0;content:\"\";visibility:hidden;overflow:hidden}.arco-react-list-scroll-loading{display:flex;align-items:center;justify-content:center}.arco-react-list-content{flex:1}.arco-react-list-content .arco-react-empty{display:flex;align-items:center;justify-content:center;height:100%}.arco-react-mentions{display:inline-block;position:relative;box-sizing:border-box;width:100%;vertical-align:middle;white-space:pre-wrap}.arco-react-mentions-textarea,.arco-react-mentions-measure{padding:4px 12px;font-size:14px;line-height:1.5715;white-space:inherit}.arco-react-mentions-textarea{resize:none}.arco-react-mentions-measure,.arco-react-mentions-align-textarea .arco-react-mentions-measure-trigger{position:absolute;left:0;right:0;top:0;bottom:0;overflow:auto;visibility:hidden;pointer-events:none}@keyframes arco-react-menu-selected-item-label-enter{0%{opacity:0}to{opacity:1}}.arco-react-menu{position:relative;box-sizing:border-box;width:100%;font-size:14px;line-height:1.5715;transition:width .2s cubic-bezier(.34,.69,.1,1)}.arco-react-menu:focus-visible{outline:3px solid var(--color-primary-light-2)}.arco-react-menu-indent{display:inline-block;width:20px}.arco-react-menu .arco-react-menu-item,.arco-react-menu .arco-react-menu-group-title,.arco-react-menu .arco-react-menu-pop-header,.arco-react-menu .arco-react-menu-inline-header{position:relative;border-radius:var(--border-radius-small);box-sizing:border-box;cursor:pointer}.arco-react-menu .arco-react-menu-item.arco-react-menu-disabled,.arco-react-menu .arco-react-menu-group-title.arco-react-menu-disabled,.arco-react-menu .arco-react-menu-pop-header.arco-react-menu-disabled,.arco-react-menu .arco-react-menu-inline-header.arco-react-menu-disabled{cursor:not-allowed}.arco-react-menu .arco-react-menu-item.arco-react-menu-selected,.arco-react-menu .arco-react-menu-group-title.arco-react-menu-selected,.arco-react-menu .arco-react-menu-pop-header.arco-react-menu-selected,.arco-react-menu .arco-react-menu-inline-header.arco-react-menu-selected{font-weight:500;transition:color .2s cubic-bezier(0,0,1,1)}.arco-react-menu .arco-react-menu-item.arco-react-menu-selected svg,.arco-react-menu .arco-react-menu-group-title.arco-react-menu-selected svg,.arco-react-menu .arco-react-menu-pop-header.arco-react-menu-selected svg,.arco-react-menu .arco-react-menu-inline-header.arco-react-menu-selected svg{transition:color .2s cubic-bezier(0,0,1,1)}.arco-react-menu .arco-react-menu-item .arco-react-icon,.arco-react-menu .arco-react-menu-group-title .arco-react-icon,.arco-react-menu .arco-react-menu-pop-header .arco-react-icon,.arco-react-menu .arco-react-menu-inline-header .arco-react-icon{margin-right:16px}.arco-react-menu-light{background-color:var(--color-menu-light-bg)}.arco-react-menu-light .arco-react-menu-item,.arco-react-menu-light .arco-react-menu-group-title,.arco-react-menu-light .arco-react-menu-pop-header,.arco-react-menu-light .arco-react-menu-inline-header{background-color:var(--color-menu-light-bg);color:var(--color-text-2)}.arco-react-menu-light .arco-react-menu-item .arco-react-icon,.arco-react-menu-light .arco-react-menu-group-title .arco-react-icon,.arco-react-menu-light .arco-react-menu-pop-header .arco-react-icon,.arco-react-menu-light .arco-react-menu-inline-header .arco-react-icon{color:var(--color-text-3)}.arco-react-menu-light .arco-react-menu-item:hover,.arco-react-menu-light .arco-react-menu-group-title:hover,.arco-react-menu-light .arco-react-menu-pop-header:hover,.arco-react-menu-light .arco-react-menu-inline-header:hover{background-color:var(--color-fill-2);color:var(--color-text-2)}.arco-react-menu-light .arco-react-menu-item:hover .arco-react-icon,.arco-react-menu-light .arco-react-menu-group-title:hover .arco-react-icon,.arco-react-menu-light .arco-react-menu-pop-header:hover .arco-react-icon,.arco-react-menu-light .arco-react-menu-inline-header:hover .arco-react-icon{color:var(--color-text-3)}.arco-react-menu-light .arco-react-menu-item.arco-react-menu-active,.arco-react-menu-light .arco-react-menu-group-title.arco-react-menu-active,.arco-react-menu-light .arco-react-menu-pop-header.arco-react-menu-active,.arco-react-menu-light .arco-react-menu-inline-header.arco-react-menu-active{box-shadow:0 0 0 1px rgb(var(--primary-6)) inset}.arco-react-menu-light .arco-react-menu-item.arco-react-menu-selected,.arco-react-menu-light .arco-react-menu-group-title.arco-react-menu-selected,.arco-react-menu-light .arco-react-menu-pop-header.arco-react-menu-selected,.arco-react-menu-light .arco-react-menu-inline-header.arco-react-menu-selected{color:rgb(var(--primary-6))}.arco-react-menu-light .arco-react-menu-item.arco-react-menu-selected .arco-react-icon,.arco-react-menu-light .arco-react-menu-group-title.arco-react-menu-selected .arco-react-icon,.arco-react-menu-light .arco-react-menu-pop-header.arco-react-menu-selected .arco-react-icon,.arco-react-menu-light .arco-react-menu-inline-header.arco-react-menu-selected .arco-react-icon{color:rgb(var(--primary-6))}.arco-react-menu-light .arco-react-menu-item.arco-react-menu-disabled,.arco-react-menu-light .arco-react-menu-group-title.arco-react-menu-disabled,.arco-react-menu-light .arco-react-menu-pop-header.arco-react-menu-disabled,.arco-react-menu-light .arco-react-menu-inline-header.arco-react-menu-disabled{background-color:var(--color-menu-light-bg);color:var(--color-text-4)}.arco-react-menu-light .arco-react-menu-item.arco-react-menu-disabled .arco-react-icon,.arco-react-menu-light .arco-react-menu-group-title.arco-react-menu-disabled .arco-react-icon,.arco-react-menu-light .arco-react-menu-pop-header.arco-react-menu-disabled .arco-react-icon,.arco-react-menu-light .arco-react-menu-inline-header.arco-react-menu-disabled .arco-react-icon{color:var(--color-text-4)}.arco-react-menu-light .arco-react-menu-item.arco-react-menu-selected{background-color:var(--color-fill-2)}.arco-react-menu-light .arco-react-menu-inline-header.arco-react-menu-selected{color:rgb(var(--primary-6))}.arco-react-menu-light .arco-react-menu-inline-header.arco-react-menu-selected .arco-react-icon{color:rgb(var(--primary-6))}.arco-react-menu-light .arco-react-menu-inline-header.arco-react-menu-selected:hover{background-color:var(--color-fill-2)}.arco-react-menu-light.arco-react-menu-horizontal .arco-react-menu-item.arco-react-menu-selected,.arco-react-menu-light.arco-react-menu-horizontal .arco-react-menu-group-title.arco-react-menu-selected,.arco-react-menu-light.arco-react-menu-horizontal .arco-react-menu-pop-header.arco-react-menu-selected,.arco-react-menu-light.arco-react-menu-horizontal .arco-react-menu-inline-header.arco-react-menu-selected{background:none;transition:color .2s cubic-bezier(0,0,1,1)}.arco-react-menu-light.arco-react-menu-horizontal .arco-react-menu-item.arco-react-menu-selected:hover,.arco-react-menu-light.arco-react-menu-horizontal .arco-react-menu-group-title.arco-react-menu-selected:hover,.arco-react-menu-light.arco-react-menu-horizontal .arco-react-menu-pop-header.arco-react-menu-selected:hover,.arco-react-menu-light.arco-react-menu-horizontal .arco-react-menu-inline-header.arco-react-menu-selected:hover{background-color:var(--color-fill-2)}.arco-react-menu-light .arco-react-menu-group-title{color:var(--color-text-3);pointer-events:none}.arco-react-menu-light .arco-react-menu-collapse-button{background-color:var(--color-fill-1);color:var(--color-text-3)}.arco-react-menu-light .arco-react-menu-collapse-button:hover{background-color:var(--color-fill-3)}.arco-react-menu-dark{background-color:var(--color-menu-dark-bg)}.arco-react-menu-dark .arco-react-menu-item,.arco-react-menu-dark .arco-react-menu-group-title,.arco-react-menu-dark .arco-react-menu-pop-header,.arco-react-menu-dark .arco-react-menu-inline-header{background-color:var(--color-menu-dark-bg);color:var(--color-text-4)}.arco-react-menu-dark .arco-react-menu-item .arco-react-icon,.arco-react-menu-dark .arco-react-menu-group-title .arco-react-icon,.arco-react-menu-dark .arco-react-menu-pop-header .arco-react-icon,.arco-react-menu-dark .arco-react-menu-inline-header .arco-react-icon{color:var(--color-text-3)}.arco-react-menu-dark .arco-react-menu-item:hover,.arco-react-menu-dark .arco-react-menu-group-title:hover,.arco-react-menu-dark .arco-react-menu-pop-header:hover,.arco-react-menu-dark .arco-react-menu-inline-header:hover{background-color:var(--color-menu-dark-hover);color:var(--color-text-4)}.arco-react-menu-dark .arco-react-menu-item:hover .arco-react-icon,.arco-react-menu-dark .arco-react-menu-group-title:hover .arco-react-icon,.arco-react-menu-dark .arco-react-menu-pop-header:hover .arco-react-icon,.arco-react-menu-dark .arco-react-menu-inline-header:hover .arco-react-icon{color:var(--color-text-3)}.arco-react-menu-dark .arco-react-menu-item.arco-react-menu-active,.arco-react-menu-dark .arco-react-menu-group-title.arco-react-menu-active,.arco-react-menu-dark .arco-react-menu-pop-header.arco-react-menu-active,.arco-react-menu-dark .arco-react-menu-inline-header.arco-react-menu-active{box-shadow:0 0 0 1px rgb(var(--primary-6)) inset}.arco-react-menu-dark .arco-react-menu-item.arco-react-menu-selected,.arco-react-menu-dark .arco-react-menu-group-title.arco-react-menu-selected,.arco-react-menu-dark .arco-react-menu-pop-header.arco-react-menu-selected,.arco-react-menu-dark .arco-react-menu-inline-header.arco-react-menu-selected{color:var(--color-white)}.arco-react-menu-dark .arco-react-menu-item.arco-react-menu-selected .arco-react-icon,.arco-react-menu-dark .arco-react-menu-group-title.arco-react-menu-selected .arco-react-icon,.arco-react-menu-dark .arco-react-menu-pop-header.arco-react-menu-selected .arco-react-icon,.arco-react-menu-dark .arco-react-menu-inline-header.arco-react-menu-selected .arco-react-icon{color:var(--color-white)}.arco-react-menu-dark .arco-react-menu-item.arco-react-menu-disabled,.arco-react-menu-dark .arco-react-menu-group-title.arco-react-menu-disabled,.arco-react-menu-dark .arco-react-menu-pop-header.arco-react-menu-disabled,.arco-react-menu-dark .arco-react-menu-inline-header.arco-react-menu-disabled{background-color:var(--color-menu-dark-bg);color:var(--color-text-2)}.arco-react-menu-dark .arco-react-menu-item.arco-react-menu-disabled .arco-react-icon,.arco-react-menu-dark .arco-react-menu-group-title.arco-react-menu-disabled .arco-react-icon,.arco-react-menu-dark .arco-react-menu-pop-header.arco-react-menu-disabled .arco-react-icon,.arco-react-menu-dark .arco-react-menu-inline-header.arco-react-menu-disabled .arco-react-icon{color:var(--color-text-2)}.arco-react-menu-dark .arco-react-menu-item.arco-react-menu-selected{background-color:var(--color-menu-dark-hover)}.arco-react-menu-dark .arco-react-menu-inline-header.arco-react-menu-selected{color:rgb(var(--primary-6))}.arco-react-menu-dark .arco-react-menu-inline-header.arco-react-menu-selected .arco-react-icon{color:rgb(var(--primary-6))}.arco-react-menu-dark .arco-react-menu-inline-header.arco-react-menu-selected:hover{background-color:var(--color-menu-dark-hover)}.arco-react-menu-dark.arco-react-menu-horizontal .arco-react-menu-item.arco-react-menu-selected,.arco-react-menu-dark.arco-react-menu-horizontal .arco-react-menu-group-title.arco-react-menu-selected,.arco-react-menu-dark.arco-react-menu-horizontal .arco-react-menu-pop-header.arco-react-menu-selected,.arco-react-menu-dark.arco-react-menu-horizontal .arco-react-menu-inline-header.arco-react-menu-selected{background:none;transition:color .2s cubic-bezier(0,0,1,1)}.arco-react-menu-dark.arco-react-menu-horizontal .arco-react-menu-item.arco-react-menu-selected:hover,.arco-react-menu-dark.arco-react-menu-horizontal .arco-react-menu-group-title.arco-react-menu-selected:hover,.arco-react-menu-dark.arco-react-menu-horizontal .arco-react-menu-pop-header.arco-react-menu-selected:hover,.arco-react-menu-dark.arco-react-menu-horizontal .arco-react-menu-inline-header.arco-react-menu-selected:hover{background-color:var(--color-menu-dark-hover)}.arco-react-menu-dark .arco-react-menu-group-title{color:var(--color-text-3);pointer-events:none}.arco-react-menu-dark .arco-react-menu-collapse-button{background-color:rgb(var(--primary-6));color:var(--color-white)}.arco-react-menu-dark .arco-react-menu-collapse-button:hover{background-color:rgb(var(--primary-7))}.arco-react-menu a,.arco-react-menu a:hover,.arco-react-menu a:focus,.arco-react-menu a:active{color:inherit;cursor:inherit;text-decoration:none}.arco-react-menu-inner{box-sizing:border-box;width:100%;height:100%;overflow:auto}.arco-react-menu-icon-suffix.is-open{transform:rotate(180deg)}.arco-react-menu-vertical .arco-react-menu-item,.arco-react-menu-vertical .arco-react-menu-group-title,.arco-react-menu-vertical .arco-react-menu-pop-header,.arco-react-menu-vertical .arco-react-menu-inline-header{padding:0 12px;line-height:40px}.arco-react-menu-vertical .arco-react-menu-item .arco-react-menu-icon-suffix .arco-react-icon,.arco-react-menu-vertical .arco-react-menu-group-title .arco-react-menu-icon-suffix .arco-react-icon,.arco-react-menu-vertical .arco-react-menu-pop-header .arco-react-menu-icon-suffix .arco-react-icon,.arco-react-menu-vertical .arco-react-menu-inline-header .arco-react-menu-icon-suffix .arco-react-icon{margin-right:0}.arco-react-menu-vertical .arco-react-menu-item,.arco-react-menu-vertical .arco-react-menu-group-title,.arco-react-menu-vertical .arco-react-menu-pop-header,.arco-react-menu-vertical .arco-react-menu-inline-header{margin-bottom:4px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.arco-react-menu-vertical .arco-react-menu-item .arco-react-menu-item-inner,.arco-react-menu-vertical .arco-react-menu-group-title .arco-react-menu-item-inner,.arco-react-menu-vertical .arco-react-menu-pop-header .arco-react-menu-item-inner,.arco-react-menu-vertical .arco-react-menu-inline-header .arco-react-menu-item-inner{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:100%}.arco-react-menu-vertical .arco-react-menu-item .arco-react-menu-icon-suffix,.arco-react-menu-vertical .arco-react-menu-group-title .arco-react-menu-icon-suffix,.arco-react-menu-vertical .arco-react-menu-pop-header .arco-react-menu-icon-suffix,.arco-react-menu-vertical .arco-react-menu-inline-header .arco-react-menu-icon-suffix{position:absolute;right:12px}.arco-react-menu-vertical .arco-react-menu-inner{padding:4px 8px}.arco-react-menu-vertical .arco-react-menu-item.arco-react-menu-item-indented{display:flex}.arco-react-menu-vertical .arco-react-menu-pop-header,.arco-react-menu-vertical .arco-react-menu-inline-header{padding-right:28px}.arco-react-menu-horizontal{width:auto;height:auto}.arco-react-menu-horizontal .arco-react-menu-item,.arco-react-menu-horizontal .arco-react-menu-group-title,.arco-react-menu-horizontal .arco-react-menu-pop-header,.arco-react-menu-horizontal .arco-react-menu-inline-header{padding:0 12px;line-height:30px}.arco-react-menu-horizontal .arco-react-menu-item .arco-react-menu-icon-suffix .arco-react-icon,.arco-react-menu-horizontal .arco-react-menu-group-title .arco-react-menu-icon-suffix .arco-react-icon,.arco-react-menu-horizontal .arco-react-menu-pop-header .arco-react-menu-icon-suffix .arco-react-icon,.arco-react-menu-horizontal .arco-react-menu-inline-header .arco-react-menu-icon-suffix .arco-react-icon{margin-right:0}.arco-react-menu-horizontal .arco-react-menu-item .arco-react-icon,.arco-react-menu-horizontal .arco-react-menu-group-title .arco-react-icon,.arco-react-menu-horizontal .arco-react-menu-pop-header .arco-react-icon,.arco-react-menu-horizontal .arco-react-menu-inline-header .arco-react-icon{margin-right:16px}.arco-react-menu-horizontal .arco-react-menu-item .arco-react-menu-icon-suffix,.arco-react-menu-horizontal .arco-react-menu-group-title .arco-react-menu-icon-suffix,.arco-react-menu-horizontal .arco-react-menu-pop-header .arco-react-menu-icon-suffix,.arco-react-menu-horizontal .arco-react-menu-inline-header .arco-react-menu-icon-suffix{margin-left:6px}.arco-react-menu-horizontal .arco-react-menu-inner{display:flex;align-items:center;padding:14px 20px}.arco-react-menu-horizontal .arco-react-menu-item,.arco-react-menu-horizontal .arco-react-menu-pop{display:inline-block;vertical-align:middle;flex-shrink:0}.arco-react-menu-horizontal .arco-react-menu-item:not(:first-child),.arco-react-menu-horizontal .arco-react-menu-pop:not(:first-child){margin-left:12px}.arco-react-menu-horizontal .arco-react-menu-pop:after{content:\" \";width:100%;height:14px;position:absolute;left:0;bottom:-14px}.arco-react-menu-overflow-wrap{width:100%}.arco-react-menu-overflow-sub-menu-mirror,.arco-react-menu-overflow-hidden-menu-item{position:absolute!important;white-space:nowrap;visibility:hidden;pointer-events:none}.arco-react-menu-selected-label{position:absolute;left:12px;right:12px;bottom:-14px;height:3px;background-color:rgb(var(--primary-6));animation:arco-react-menu-selected-item-label-enter .2s cubic-bezier(0,0,1,1)}.arco-react-menu-pop-button{width:auto;background:none;box-shadow:none}.arco-react-menu-pop-button.arco-react-menu-collapse{width:auto}.arco-react-menu-pop-button .arco-react-menu-item,.arco-react-menu-pop-button .arco-react-menu-group-title,.arco-react-menu-pop-button .arco-react-menu-pop-header,.arco-react-menu-pop-button .arco-react-menu-inline-header{width:40px;height:40px;line-height:40px;border-radius:50%;border:1px solid transparent;box-shadow:0 4px 10px #0000001a;margin-bottom:16px}.arco-react-menu-collapse{width:48px}.arco-react-menu-collapse .arco-react-menu-inner{padding:4px}.arco-react-menu-collapse .arco-react-menu-icon-suffix{display:none}.arco-react-menu-collapse .arco-react-menu-item .arco-react-icon,.arco-react-menu-collapse .arco-react-menu-group-title .arco-react-icon,.arco-react-menu-collapse .arco-react-menu-pop-header .arco-react-icon,.arco-react-menu-collapse .arco-react-menu-inline-header .arco-react-icon{margin-right:100%}.arco-react-menu-collapse-button{display:flex;align-items:center;justify-content:center;position:absolute;right:12px;bottom:12px;width:24px;height:24px;border-radius:var(--border-radius-small);cursor:pointer}.arco-react-menu-inline-content{overflow:hidden;height:auto;transition:height .2s cubic-bezier(.34,.69,.1,1)}.arco-react-menu-inline-content-hide{height:0}.arco-react-menu-item-tooltip a{color:inherit;cursor:text}.arco-react-menu-item-tooltip a:hover,.arco-react-menu-item-tooltip a:focus,.arco-react-menu-item-tooltip a:active{color:inherit}.arco-react-menu-pop-trigger.arco-react-trigger-position-bl{transform:translateY(14px)}.arco-react-menu-pop-trigger.arco-react-trigger-position-bl .arco-react-trigger-arrow{z-index:0;border-left:1px solid var(--color-neutral-3);border-top:1px solid var(--color-neutral-3)}.arco-react-menu-pop-trigger.arco-react-trigger-position-rt{transform:translate(8px)}.arco-react-menu-pop-trigger.arco-react-trigger-position-rt .arco-react-trigger-arrow{z-index:0;border-left:1px solid var(--color-neutral-3);border-bottom:1px solid var(--color-neutral-3)}.arco-react-menu-pop-trigger .arco-react-dropdown-menu-dark~.arco-react-trigger-arrow-container .arco-react-trigger-arrow{background-color:var(--color-menu-dark-bg);border-color:var(--color-menu-dark-bg)}.arco-react-message-wrapper{width:100%;position:fixed;z-index:1003;padding:0 10px;text-align:center;pointer-events:none;box-sizing:border-box}.arco-react-message-wrapper-top{top:40px}.arco-react-message-wrapper-bottom{bottom:40px}.arco-react-message{position:relative;display:inline-block;padding:10px 16px;line-height:1;border-radius:var(--border-radius-small);border:1px solid var(--color-neutral-3);margin-bottom:16px;background-color:var(--color-bg-popup);text-align:center;box-shadow:0 4px 10px #0000001a;overflow:hidden;pointer-events:auto;transition:opacity .1s cubic-bezier(0,0,1,1)}.arco-react-message-closable{padding-right:38px}.arco-react-message-icon{font-size:20px;color:var(--color-text-1);margin-right:8px;vertical-align:middle;display:inline-block;animation:arco-react-msg-fade .1s cubic-bezier(0,0,1,1),arco-react-msg-fade .4s cubic-bezier(.3,1.3,.3,1)}.arco-react-message-content{vertical-align:middle;color:var(--color-text-1);font-size:14px}.arco-react-message-info{background-color:var(--color-bg-popup);border-color:var(--color-neutral-3)}.arco-react-message-info .arco-react-message-icon{color:rgb(var(--primary-6))}.arco-react-message-info .arco-react-message-content{color:var(--color-text-1)}.arco-react-message-success{background-color:var(--color-bg-popup);border-color:var(--color-neutral-3)}.arco-react-message-success .arco-react-message-icon{color:rgb(var(--success-6))}.arco-react-message-success .arco-react-message-content{color:var(--color-text-1)}.arco-react-message-warning{background-color:var(--color-bg-popup);border-color:var(--color-neutral-3)}.arco-react-message-warning .arco-react-message-icon{color:rgb(var(--warning-6))}.arco-react-message-warning .arco-react-message-content{color:var(--color-text-1)}.arco-react-message-error{background-color:var(--color-bg-popup);border-color:var(--color-neutral-3)}.arco-react-message-error .arco-react-message-icon{color:rgb(var(--danger-6))}.arco-react-message-error .arco-react-message-content{color:var(--color-text-1)}.arco-react-message-loading{background-color:var(--color-bg-popup);border-color:var(--color-neutral-3)}.arco-react-message-loading .arco-react-message-icon{color:rgb(var(--primary-6))}.arco-react-message-loading .arco-react-message-content{color:var(--color-text-1)}.arco-react-message-close-btn{position:absolute;top:14px;right:12px;color:var(--color-text-1);font-size:12px}.arco-react-message-close-btn>svg{position:relative}.arco-react-message .arco-react-icon-hover.arco-react-message-icon-hover:before{width:20px;height:20px}.fadeMessage-enter,.fadeMessage-appear{opacity:0}.fadeMessage-enter-active,.fadeMessage-appear-active{opacity:1;transition:opacity .1s cubic-bezier(0,0,1,1)}.fadeMessage-exit{opacity:0;overflow:hidden}.fadeMessage-exit-active{opacity:0;height:0;transition:all .3s cubic-bezier(.34,.69,.1,1)}@keyframes arco-react-msg-fade{0%{opacity:0}to{opacity:1}}@keyframes arco-react-msg-scale{0%{transform:scale(0)}to{transform:scale(1)}}.arco-react-modal-mask{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1001;display:none;background-color:var(--color-mask-bg)}.arco-react-modal-wrapper{position:fixed;width:100%;height:100%;top:0;left:0;z-index:1001;overflow:auto}.arco-react-modal-wrapper-no-mask{pointer-events:none}.arco-react-modal-wrapper-no-mask .arco-react-modal{pointer-events:auto}.arco-react-modal-wrapper.arco-react-modal-wrapper-align-center{text-align:center;white-space:nowrap}.arco-react-modal-wrapper.arco-react-modal-wrapper-align-center:after{content:\"\";vertical-align:middle;display:inline-block;height:100%;width:0}.arco-react-modal-wrapper.arco-react-modal-wrapper-align-center .arco-react-modal{top:0;vertical-align:middle;display:inline-block}.arco-react-modal{position:relative;margin:0 auto;top:100px;width:520px;border-radius:var(--border-radius-medium);border:0 solid var(--color-neutral-3);background-color:var(--color-bg-3);line-height:1.5715;text-align:left;white-space:initial;box-shadow:none;box-sizing:border-box}.arco-react-modal-header{width:100%;box-sizing:border-box;padding:0 20px;border-bottom:1px solid var(--color-neutral-3);height:48px;display:flex;align-items:center}.arco-react-modal-header .arco-react-modal-title{flex:1;text-align:center}.arco-react-modal-content{position:relative;padding:24px 20px;color:var(--color-text-1);font-size:14px}.arco-react-modal-footer{border-top:1px solid var(--color-neutral-3);width:100%;box-sizing:border-box;text-align:right;padding:16px 20px}.arco-react-modal-footer>.arco-react-btn{margin-left:12px}.arco-react-modal-footer>.arco-react-btn:only-child{margin-left:0}.arco-react-modal .arco-react-modal-close-icon{position:absolute;right:20px;top:18px;font-size:12px;cursor:pointer;color:var(--color-text-1)}.arco-react-modal-title{color:var(--color-text-1);font-size:16px;font-weight:500}.arco-react-modal-title .arco-react-icon{font-size:18px;margin-right:10px;vertical-align:-3px}.arco-react-modal-title .arco-react-icon-info-circle-fill{color:rgb(var(--primary-6))}.arco-react-modal-title .arco-react-icon-check-circle-fill{color:rgb(var(--success-6))}.arco-react-modal-title .arco-react-icon-exclamation-circle-fill{color:rgb(var(--warning-6))}.arco-react-modal-title .arco-react-icon-close-circle-fill{color:rgb(var(--danger-6))}.arco-react-modal-simple{padding:24px 32px 32px;width:464px}.arco-react-modal-simple .arco-react-modal-header,.arco-react-modal-simple .arco-react-modal-footer{border:none;padding:0;height:unset}.arco-react-modal-simple .arco-react-modal-header{margin-bottom:24px}.arco-react-modal-simple .arco-react-modal-title{text-align:center}.arco-react-modal-simple .arco-react-modal-footer{text-align:center;margin-top:32px}.arco-react-modal-simple .arco-react-modal-content{padding:0}.zoomModal-enter,.zoomModal-appear{opacity:0;transform:scale(.5)}.zoomModal-enter-active,.zoomModal-appear-active{opacity:1;transform:scale(1);transition:opacity .4s cubic-bezier(.3,1.3,.3,1),transform .4s cubic-bezier(.3,1.3,.3,1)}.zoomModal-exit{opacity:1;transform:scale(1)}.zoomModal-exit-active{opacity:0;transform:scale(.5);transition:opacity .4s cubic-bezier(.3,1.3,.3,1),transform .4s cubic-bezier(.3,1.3,.3,1)}.fadeModal-enter,.fadeModal-appear{opacity:0}.fadeModal-enter-active,.fadeModal-appear-active{opacity:1;transition:opacity .4s cubic-bezier(.3,1.3,.3,1)}.fadeModal-exit{opacity:1}.fadeModal-exit-active{opacity:0;transition:opacity .4s cubic-bezier(.3,1.3,.3,1)}.arco-react-notification-wrapper{position:fixed;z-index:1003}.arco-react-notification-wrapper-topLeft{left:20px;top:20px}.arco-react-notification-wrapper-topRight{right:20px;top:20px}.arco-react-notification-wrapper-topRight .arco-react-notification{margin-left:auto}.arco-react-notification-wrapper-bottomLeft{bottom:20px;left:20px}.arco-react-notification-wrapper-bottomRight{bottom:20px;right:20px}.arco-react-notification-wrapper-bottomRight .arco-react-notification{margin-left:auto}.arco-react-notification{display:flex;position:relative;width:340px;padding:20px;border-radius:var(--border-radius-medium);border:1px solid var(--color-neutral-3);margin-bottom:20px;background-color:var(--color-bg-popup);box-shadow:0 4px 12px #00000026;overflow:hidden;box-sizing:border-box;opacity:1;transition:opacity .2s cubic-bezier(0,0,1,1)}.arco-react-notification-icon{font-size:24px;display:inline-flex;align-items:center;color:var(--color-text-1)}.arco-react-notification-info{background-color:var(--color-bg-popup);border-color:var(--color-neutral-3)}.arco-react-notification-info .arco-react-notification-icon{color:rgb(var(--primary-6))}.arco-react-notification-success{background-color:var(--color-bg-popup);border-color:var(--color-neutral-3)}.arco-react-notification-success .arco-react-notification-icon{color:rgb(var(--success-6))}.arco-react-notification-warning{background-color:var(--color-bg-popup);border-color:var(--color-neutral-3)}.arco-react-notification-warning .arco-react-notification-icon{color:rgb(var(--warning-6))}.arco-react-notification-error{background-color:var(--color-bg-popup);border-color:var(--color-neutral-3)}.arco-react-notification-error .arco-react-notification-icon{color:rgb(var(--danger-6))}.arco-react-notification-left{padding-right:16px}.arco-react-notification-right{flex:1;word-break:break-word}.arco-react-notification-title{font-size:16px;font-weight:500;color:var(--color-text-1);margin-bottom:4px}.arco-react-notification-content{font-size:14px;color:var(--color-text-1)}.arco-react-notification-info .arco-react-notification-title{color:var(--color-text-1)}.arco-react-notification-info .arco-react-notification-content{color:var(--color-text-1)}.arco-react-notification-success .arco-react-notification-title{color:var(--color-text-1)}.arco-react-notification-success .arco-react-notification-content{color:var(--color-text-1)}.arco-react-notification-warning .arco-react-notification-title{color:var(--color-text-1)}.arco-react-notification-warning .arco-react-notification-content{color:var(--color-text-1)}.arco-react-notification-error .arco-react-notification-title{color:var(--color-text-1)}.arco-react-notification-error .arco-react-notification-content{color:var(--color-text-1)}.arco-react-notification-btn-wrapper{margin-top:16px;text-align:right}.arco-react-notification .arco-react-notification-close-btn{position:absolute;cursor:pointer;top:12px;right:12px;color:var(--color-text-1);font-size:12px}.arco-react-notification .arco-react-notification-close-btn>svg{position:relative}.arco-react-notification .arco-react-icon-hover.arco-react-notification-icon-hover:before{width:20px;height:20px}.slideNoticeLeft-enter,.slideNoticeLeft-appear{transform:translate(-100%)}.slideNoticeLeft-enter-active,.slideNoticeLeft-appear-active{transform:translate(0);transition:transform .4s cubic-bezier(.3,1.3,.3,1)}.slideNoticeLeft-exit{opacity:0}.slideNoticeLeft-exit-active{opacity:0;height:0;padding-top:0;padding-bottom:0;margin-bottom:0;transition:all .3s cubic-bezier(.34,.69,.1,1)}.slideNoticeRight-enter,.slideNoticeRight-appear{transform:translate(100%)}.slideNoticeRight-enter-active,.slideNoticeRight-appear-active{transform:translate(0);transition:transform .4s cubic-bezier(.3,1.3,.3,1)}.slideNoticeRight-exit{opacity:0}.slideNoticeRight-exit-active{opacity:0;height:0;transition:all .3s cubic-bezier(.34,.69,.1,1)}.arco-react-page-header{padding:16px 0}.arco-react-breadcrumb+.arco-react-page-header-head{margin-top:4px}.arco-react-page-header-head{display:flex;align-items:center;justify-content:space-between;line-height:28px}.arco-react-page-header-head-left{display:flex;align-items:center}.arco-react-page-header-head-wrapper{padding-left:24px;padding-right:20px}.arco-react-page-header-head-main{display:flex;align-items:center;min-height:30px;overflow:hidden}.arco-react-page-header-head-main-with-back{margin-left:-8px;padding-left:8px}.arco-react-page-header-head-extra{white-space:nowrap;overflow:hidden}.arco-react-page-header .arco-react-icon-hover.arco-react-page-header-icon-hover:before{width:30px;height:30px}.arco-react-page-header .arco-react-icon-hover.arco-react-page-header-icon-hover:hover:before{background-color:var(--color-fill-2)}.arco-react-page-header-back{color:var(--color-text-2);font-size:14px;margin-right:12px}.arco-react-page-header-back-icon{position:relative}.arco-react-page-header-title{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--color-text-1);font-size:20px;font-weight:600}.arco-react-page-header-divider{width:1px;margin-left:12px;margin-right:12px;height:16px;background-color:var(--color-fill-3)}.arco-react-page-header-sub-title{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--color-text-3);font-size:14px}.arco-react-page-header-content{padding:20px 32px;border-top:1px solid var(--color-neutral-3)}.arco-react-page-header-footer{padding:16px 20px 0 24px}.arco-react-page-header-with-breadcrumb{padding:12px 0}.arco-react-page-header-with-breadcrumb .arco-react-page-header-footer{padding-top:12px}.arco-react-page-header-with-content .arco-react-page-header-head-wrapper{padding-bottom:12px}.arco-react-page-header-with-footer{padding-bottom:0}.arco-react-page-header-wrap .arco-react-page-header-head{flex-wrap:wrap}.arco-react-page-header-wrap .arco-react-page-header-head .arco-react-page-header-head-extra{margin-top:4px}.arco-react-pagination{display:flex;align-items:center;font-size:14px}.arco-react-pagination-list{margin:0;padding:0;list-style:none;display:inline-block}.arco-react-pagination-item{display:inline-block;text-align:center;vertical-align:middle;list-style:none;box-sizing:border-box;cursor:pointer;outline:0;user-select:none;border-radius:var(--border-radius-small);color:var(--color-text-2);border:0 solid transparent;background-color:transparent;font-size:14px;min-width:32px;height:32px;line-height:32px}.arco-react-pagination-item-prev,.arco-react-pagination-item-next{font-size:12px}.arco-react-pagination-item-disabled{cursor:not-allowed;background-color:transparent;color:var(--color-text-4);border-color:transparent}.arco-react-pagination-item:not(.arco-react-pagination-item-disabled):not(.arco-react-pagination-item-active):hover{background-color:var(--color-fill-1);border-color:transparent;color:var(--color-text-2)}.arco-react-pagination-item-active{transition:color .2s cubic-bezier(0,0,1,1),background-color .2s cubic-bezier(0,0,1,1);color:rgb(var(--primary-6));background-color:var(--color-primary-light-1);border-color:transparent}.arco-react-pagination-item:not(:last-child){margin-right:8px}.arco-react-pagination-item-prev,.arco-react-pagination-item-next{font-size:12px;color:var(--color-text-2);background-color:transparent}.arco-react-pagination-item-prev:not(.arco-react-pagination-item-disabled):hover,.arco-react-pagination-item-next:not(.arco-react-pagination-item-disabled):hover{background-color:var(--color-fill-1);color:rgb(var(--primary-6))}.arco-react-pagination-item-prev:after,.arco-react-pagination-item-next:after{display:inline-block;content:\".\";font-size:0;vertical-align:middle}.arco-react-pagination .arco-react-pagination-item-prev.arco-react-pagination-item-disabled,.arco-react-pagination .arco-react-pagination-item-next.arco-react-pagination-item-disabled{color:var(--color-text-4);background-color:transparent}.arco-react-pagination-item-jumper{font-size:16px}.arco-react-pagination-jumper{margin-left:8px}.arco-react-pagination-jumper>span{font-size:14px}.arco-react-pagination-jumper-text-goto{color:var(--color-text-3)}.arco-react-pagination .arco-react-pagination-jumper-input{width:40px;text-align:center;margin-left:8px;padding-left:2px;padding-right:2px}.arco-react-pagination-option{display:inline-block;text-align:center;vertical-align:middle;min-width:0;position:relative;margin-left:8px;font-size:14px;height:32px;line-height:0}.arco-react-pagination-option .arco-react-select{width:auto}.arco-react-pagination-option .arco-react-select-view-value{overflow:inherit;padding-right:6px}.arco-react-pagination-total-text{display:inline-block;height:100%;color:var(--color-text-1);margin-right:8px;font-size:14px;line-height:32px}.arco-react-pagination-item-simple-pager{display:inline-block;vertical-align:middle;margin:0 12px 0 4px}.arco-react-pagination-item-simple-pager .arco-react-pagination-jumper-separator{padding:0 12px}.arco-react-pagination-simple .arco-react-pagination-item{margin-right:0}.arco-react-pagination-simple .arco-react-pagination-jumper{color:var(--color-text-1)}.arco-react-pagination-simple .arco-react-pagination-jumper{margin-left:0}.arco-react-pagination-simple .arco-react-pagination-jumper .arco-react-pagination-jumper-input{width:40px;margin-left:0}.arco-react-pagination-simple .arco-react-pagination-item-prev,.arco-react-pagination-simple .arco-react-pagination-item-next{color:var(--color-text-2);background-color:transparent}.arco-react-pagination-simple .arco-react-pagination-item-prev:not(.arco-react-pagination-item-disabled):hover,.arco-react-pagination-simple .arco-react-pagination-item-next:not(.arco-react-pagination-item-disabled):hover{background-color:var(--color-fill-1);color:rgb(var(--primary-6))}.arco-react-pagination-simple .arco-react-pagination-item-prev.arco-react-pagination-item-disabled,.arco-react-pagination-simple .arco-react-pagination-item-next.arco-react-pagination-item-disabled{color:var(--color-text-4);background-color:transparent}.arco-react-pagination-disabled{cursor:not-allowed}.arco-react-pagination-disabled .arco-react-pagination-item,.arco-react-pagination-disabled .arco-react-pagination-item:not(.arco-react-pagination-item-disabled):not(.arco-react-pagination-item-active):hover{cursor:not-allowed;background-color:transparent;border-color:transparent;color:var(--color-text-4)}.arco-react-pagination.arco-react-pagination-disabled .arco-react-pagination-item-active{background-color:var(--color-fill-1);border-color:transparent;color:var(--color-primary-light-3)}.arco-react-pagination-size-mini .arco-react-pagination-item{font-size:12px;min-width:24px;height:24px;line-height:24px}.arco-react-pagination-size-mini .arco-react-pagination-item-prev,.arco-react-pagination-size-mini .arco-react-pagination-item-next{font-size:12px}.arco-react-pagination-size-mini .arco-react-pagination-total-text{font-size:12px;line-height:24px}.arco-react-pagination-size-mini .arco-react-pagination-option{font-size:12px;height:24px;line-height:0}.arco-react-pagination-size-mini .arco-react-pagination-jumper>span{font-size:12px}.arco-react-pagination-size-small .arco-react-pagination-item{font-size:14px;min-width:28px;height:28px;line-height:28px}.arco-react-pagination-size-small .arco-react-pagination-item-prev,.arco-react-pagination-size-small .arco-react-pagination-item-next{font-size:12px}.arco-react-pagination-size-small .arco-react-pagination-total-text{font-size:14px;line-height:28px}.arco-react-pagination-size-small .arco-react-pagination-option{font-size:14px;height:28px;line-height:0}.arco-react-pagination-size-small .arco-react-pagination-jumper>span{font-size:14px}.arco-react-pagination-size-large .arco-react-pagination-item{font-size:14px;min-width:36px;height:36px;line-height:36px}.arco-react-pagination-size-large .arco-react-pagination-item-prev,.arco-react-pagination-size-large .arco-react-pagination-item-next{font-size:14px}.arco-react-pagination-size-large .arco-react-pagination-total-text{font-size:14px;line-height:36px}.arco-react-pagination-size-large .arco-react-pagination-option{font-size:14px;height:36px;line-height:0}.arco-react-pagination-size-large .arco-react-pagination-jumper>span{font-size:14px}.arco-react-popconfirm-content{padding:16px;box-sizing:border-box}.arco-react-popconfirm-title{position:relative;margin-bottom:16px;font-size:14px;color:var(--color-text-1);display:flex;align-items:flex-start}.arco-react-popconfirm-title-icon{font-size:18px;margin-right:8px;display:inline-flex;align-items:center;height:22.001px}.arco-react-popconfirm-title-icon .arco-react-icon-exclamation-circle-fill{color:rgb(var(--warning-6))}.arco-react-popconfirm .arco-react-popconfirm-btn{text-align:right}.arco-react-popconfirm .arco-react-popconfirm-btn>button{margin-left:8px}.arco-react-popover-content{padding:12px 16px}.arco-react-popover-title{font-size:16px;color:var(--color-text-1);font-weight:500}.arco-react-popover-title+.arco-react-popover-inner-content{margin-top:4px}.arco-react-popover-content,.arco-react-popconfirm-content{color:var(--color-text-2);background-color:var(--color-bg-popup);box-shadow:0 4px 10px #0000001a;max-width:none;width:100%;font-size:14px;border-radius:var(--border-radius-medium);line-height:1.5715;box-sizing:border-box;border:1px solid var(--color-neutral-3)}.arco-react-popover-content-inner,.arco-react-popconfirm-content-inner{word-wrap:break-word;text-align:left}.arco-react-popover-arrow.arco-react-trigger-arrow,.arco-react-popconfirm-arrow.arco-react-trigger-arrow{background-color:var(--color-bg-popup);border:1px solid var(--color-neutral-3);z-index:1}.arco-react-progress{position:relative;line-height:1;font-size:12px}.arco-react-progress-line,.arco-react-progress-steps{display:inline-block;max-width:100%;width:100%}.arco-react-progress-line-wrapper,.arco-react-progress-steps-wrapper{display:flex;align-items:center;width:100%;max-width:100%;height:100%}.arco-react-progress-line-text,.arco-react-progress-steps-text{font-size:12px;margin-left:16px;color:var(--color-text-2);white-space:nowrap;text-align:right;flex-grow:1;flex-shrink:0;min-width:32px}.arco-react-progress-line-text .arco-react-icon,.arco-react-progress-steps-text .arco-react-icon{font-size:12px;margin-left:4px}.arco-react-progress-line-outer{background-color:var(--color-fill-3);border-radius:100px;width:100%;position:relative;display:inline-block;overflow:hidden}.arco-react-progress-line-inner{height:100%;border-radius:100px;background-color:rgb(var(--primary-6));position:relative;transition:width .6s cubic-bezier(.34,.69,.1,1),background .3s cubic-bezier(.34,.69,.1,1);max-width:100%}.arco-react-progress-line-inner-buffer{position:absolute;background-color:var(--color-primary-light-3);height:100%;top:0;left:0;border-radius:0 100px 100px 0;max-width:100%;transition:all .6s cubic-bezier(.34,.69,.1,1)}.arco-react-progress-line-inner-animate:after{content:\"\";display:block;position:absolute;top:0;width:100%;height:100%;border-radius:inherit;background:linear-gradient(90deg,transparent 25%,rgba(255,255,255,.5) 50%,transparent 75%);background-size:400% 100%;animation:arco-react-progress-loading 1.5s cubic-bezier(.34,.69,.1,1) infinite}.arco-react-progress-line-text .arco-react-icon{color:var(--color-text-2)}.arco-react-progress-steps-outer{display:flex;width:100%}.arco-react-progress-steps-text{margin-left:8px;min-width:unset}.arco-react-progress-steps-text .arco-react-icon{color:var(--color-text-2)}.arco-react-progress-steps-item{height:100%;flex:1;background-color:var(--color-fill-3);position:relative;display:inline-block}.arco-react-progress-steps-item:not(:last-of-type){margin-right:3px}.arco-react-progress-steps-item:last-of-type{border-top-right-radius:100px;border-bottom-right-radius:100px}.arco-react-progress-steps-item:first-of-type{border-top-left-radius:100px;border-bottom-left-radius:100px}.arco-react-progress-steps-item-active{background-color:rgb(var(--primary-6))}.arco-react-progress-steps.arco-react-progress-small{width:auto}.arco-react-progress-steps.arco-react-progress-small .arco-react-progress-steps-item{width:2px;flex:unset;border-radius:2px}.arco-react-progress-steps.arco-react-progress-small .arco-react-progress-steps-item:not(:last-of-type){margin-right:3px}.arco-react-progress-is-warning .arco-react-progress-line-inner{background-color:rgb(var(--warning-6))}.arco-react-progress-is-warning .arco-react-progress-steps-item-active{background-color:rgb(var(--warning-6))}.arco-react-progress-is-warning .arco-react-progress-line-text .arco-react-icon,.arco-react-progress-is-warning .arco-react-progress-steps-text .arco-react-icon{color:rgb(var(--warning-6))}.arco-react-progress-is-success .arco-react-progress-line-inner{background-color:rgb(var(--success-6))}.arco-react-progress-is-success .arco-react-progress-steps-item-active{background-color:rgb(var(--success-6))}.arco-react-progress-is-success .arco-react-progress-line-text .arco-react-icon,.arco-react-progress-is-success .arco-react-progress-steps-text .arco-react-icon{color:rgb(var(--success-6))}.arco-react-progress-is-error .arco-react-progress-line-inner{background-color:rgb(var(--danger-6))}.arco-react-progress-is-error .arco-react-progress-steps-item-active{background-color:rgb(var(--danger-6))}.arco-react-progress-is-error .arco-react-progress-line-text .arco-react-icon,.arco-react-progress-is-error .arco-react-progress-steps-text .arco-react-icon{color:rgb(var(--danger-6))}.arco-react-progress-small .arco-react-progress-line-text{font-size:12px;margin-left:16px}.arco-react-progress-small .arco-react-progress-line-text .arco-react-icon{font-size:12px}.arco-react-progress-large .arco-react-progress-line-text{font-size:16px;margin-left:16px}.arco-react-progress-large .arco-react-progress-line-text .arco-react-icon{font-size:14px}.arco-react-progress-circle{display:inline-block}.arco-react-progress-circle-wrapper{position:relative;text-align:center;line-height:1;display:inline-block;vertical-align:text-bottom}.arco-react-progress-circle-svg{transform:rotate(-90deg)}.arco-react-progress-circle-text{font-size:14px}.arco-react-progress-circle-text .arco-react-icon{font-size:16px;color:var(--color-text-2)}.arco-react-progress-circle .arco-react-progress-circle-text{position:absolute;top:50%;left:50%;color:var(--color-text-3);transform:translate(-50%,-50%)}.arco-react-progress-circle-mask{stroke:var(--color-fill-3)}.arco-react-progress-circle-path{stroke:rgb(var(--primary-6));transition:stroke-dashoffset .6s cubic-bezier(0,0,1,1) 0s,stroke .6s cubic-bezier(0,0,1,1)}.arco-react-progress-mini .arco-react-progress-circle-mask{stroke:var(--color-primary-light-3)}.arco-react-progress-mini .arco-react-progress-circle-path{stroke:rgb(var(--primary-6))}.arco-react-progress-mini.arco-react-progress-is-warning .arco-react-progress-circle-mask{stroke:var(--color-warning-light-3)}.arco-react-progress-mini.arco-react-progress-is-error .arco-react-progress-circle-mask{stroke:var(--color-danger-light-3)}.arco-react-progress-mini.arco-react-progress-is-success .arco-react-progress-circle-mask{stroke:var(--color-success-light-3)}.arco-react-progress-mini.arco-react-progress-is-success .arco-react-progress-circle-wrapper .arco-react-icon-check{position:absolute;top:50%;left:50%;transform:translate(-50%) translateY(-50%)}.arco-react-progress-mini .arco-react-progress-circle-text{position:static;top:unset;left:unset;transform:unset}.arco-react-progress-small .arco-react-progress-circle-text{font-size:13px}.arco-react-progress-small .arco-react-progress-circle-text .arco-react-icon{font-size:14px}.arco-react-progress-large .arco-react-progress-circle-text{font-size:16px}.arco-react-progress-large .arco-react-progress-circle-text .arco-react-icon{font-size:16px}.arco-react-progress-is-warning .arco-react-progress-circle-path{stroke:rgb(var(--warning-6))}.arco-react-progress-is-warning .arco-react-icon{color:rgb(var(--warning-6))}.arco-react-progress-is-success .arco-react-progress-circle-path{stroke:rgb(var(--success-6))}.arco-react-progress-is-success .arco-react-icon{color:rgb(var(--success-6))}.arco-react-progress-is-error .arco-react-progress-circle-path{stroke:rgb(var(--danger-6))}.arco-react-progress-is-error .arco-react-icon{color:rgb(var(--danger-6))}@keyframes arco-react-progress-loading{0%{background-position:100% 50%}to{background-position:0 50%}}.arco-react-radio>input[type=radio],.arco-react-radio-button>input[type=radio]{opacity:0;width:0;height:0;position:absolute;top:0;left:0}.arco-react-radio>input[type=radio]:focus+.arco-react-radio-icon-hover:before,.arco-react-radio-button>input[type=radio]:focus+.arco-react-radio-icon-hover:before{background-color:var(--color-fill-2)}.arco-react-icon-hover.arco-react-radio-icon-hover:before{width:24px;height:24px}.arco-react-radio{position:relative;cursor:pointer;padding-left:5px;display:inline-block;font-size:14px;line-height:unset}.arco-react-radio-text{color:var(--color-text-1);margin-left:8px}.arco-react-radio-mask-wrapper{vertical-align:middle;top:-.09em;position:relative;line-height:1}.arco-react-radio-mask{display:block;border:2px solid var(--color-neutral-3);box-sizing:border-box;height:14px;width:14px;border-radius:var(--border-radius-circle);position:relative;line-height:14px}.arco-react-radio-mask:after{display:inline-block;box-sizing:border-box;position:absolute;content:\"\";border-radius:var(--border-radius-circle);background-color:var(--color-bg-2);width:10px;height:10px;top:0;left:0;transform:scale(1);transition:transform .3s cubic-bezier(.3,1.3,.3,1)}.arco-react-radio:hover .arco-react-radio-mask{border-color:var(--color-neutral-3)}.arco-react-radio-checked .arco-react-radio-mask{background-color:rgb(var(--primary-6));border-color:rgb(var(--primary-6))}.arco-react-radio-checked .arco-react-radio-mask:after{transform:scale(.4);background-color:var(--color-white)}.arco-react-radio-checked:hover .arco-react-radio-mask{border-color:rgb(var(--primary-6))}.arco-react-radio-disabled{cursor:not-allowed}.arco-react-radio-disabled .arco-react-radio-icon-hover{cursor:not-allowed}.arco-react-radio-disabled .arco-react-radio-text{color:var(--color-text-4)}.arco-react-radio-disabled .arco-react-radio-mask{border-color:var(--color-neutral-3)}.arco-react-radio-disabled .arco-react-radio-mask:after{background-color:var(--color-fill-2)}.arco-react-radio-disabled:hover .arco-react-radio-mask{border-color:var(--color-neutral-3)}.arco-react-radio-checked.arco-react-radio-disabled .arco-react-radio-mask,.arco-react-radio-checked.arco-react-radio-disabled:hover .arco-react-radio-mask{border-color:transparent;background-color:var(--color-primary-light-3)}.arco-react-radio-checked.arco-react-radio-disabled .arco-react-radio-mask:after{background-color:var(--color-fill-2)}.arco-react-radio-checked.arco-react-radio-disabled .arco-react-radio-text{color:var(--color-text-4)}.arco-react-radio:hover .arco-react-radio-icon-hover:before{background-color:var(--color-fill-2)}.arco-react-radio-group{display:inline-block;box-sizing:border-box}.arco-react-radio-group .arco-react-radio{margin-right:20px}.arco-react-radio-group-type-button{position:relative;z-index:0;padding:1.5px;line-height:26px}.arco-react-radio-button{display:inline-block;position:relative;margin:1.5px;border-radius:var(--border-radius-small);font-size:14px;line-height:26px;color:var(--color-text-2);background-color:transparent;cursor:pointer;transition:all .1s cubic-bezier(0,0,1,1)}.arco-react-radio-button-inner{display:block;position:relative;padding:0 12px}.arco-react-radio-button:not(:first-of-type):before{position:absolute;top:50%;left:-2px;transform:translateY(-50%);display:block;height:14px;width:1px;background-color:var(--color-neutral-3);content:\"\";transition:all .1s cubic-bezier(0,0,1,1)}.arco-react-radio-button:hover:before,.arco-react-radio-button:hover+.arco-react-radio-button:before,.arco-react-radio-button.arco-react-radio-checked:before,.arco-react-radio-button.arco-react-radio-checked+.arco-react-radio-button:before{opacity:0}.arco-react-radio-button:after{content:\" \";display:block;position:absolute;left:-3px;top:-3px;right:-3px;bottom:-3px;background-color:var(--color-fill-2);pointer-events:none;z-index:-1}.arco-react-radio-button:first-of-type:after{border-top-left-radius:var(--border-radius-small);border-bottom-left-radius:var(--border-radius-small)}.arco-react-radio-button:last-of-type:after{border-top-right-radius:var(--border-radius-small);border-bottom-right-radius:var(--border-radius-small)}.arco-react-radio-button:hover{background-color:var(--color-bg-5);color:var(--color-text-1)}.arco-react-radio-button.arco-react-radio-checked{background-color:var(--color-bg-5);color:rgb(var(--primary-6));font-weight:500}.arco-react-radio-button.arco-react-radio-disabled{cursor:not-allowed;background-color:transparent;color:var(--color-text-4)}.arco-react-radio-button.arco-react-radio-disabled.arco-react-radio-checked{background-color:var(--color-bg-5);color:var(--color-primary-light-3)}.arco-react-radio-size-small{line-height:28px}.arco-react-radio-size-small.arco-react-radio-group-type-button,.arco-react-radio-size-small .arco-react-radio-button{font-size:14px;line-height:22px}.arco-react-radio-size-large{line-height:36px}.arco-react-radio-size-large.arco-react-radio-group-type-button,.arco-react-radio-size-large .arco-react-radio-button{font-size:14px;line-height:30px}.arco-react-radio-size-mini{line-height:24px}.arco-react-radio-size-mini.arco-react-radio-group-type-button,.arco-react-radio-size-mini .arco-react-radio-button{font-size:12px;line-height:18px}.arco-react-radio-group-direction-vertical .arco-react-radio{display:block;line-height:32px;margin-right:0}#react-root[arco-theme=dark] .arco-react-radio-button.arco-react-radio-checked,#react-root[arco-theme=dark] .arco-react-radio-button:not(.arco-react-radio-disabled):hover{background-color:var(--color-fill-3)}#react-root[arco-theme=dark] .arco-react-radio-button:after{background-color:var(--color-bg-3)}.arco-react-rate{display:inline-block;user-select:none}.arco-react-rate-disabled{cursor:not-allowed}.arco-react-rate-inner{display:flex;align-items:center;min-height:32px;font-size:24px;line-height:1}.arco-react-rate-character{position:relative;color:var(--color-fill-3);transition:transform .2s cubic-bezier(.34,.69,.1,1)}.arco-react-rate-character:not(:last-child){margin-right:8px}.arco-react-rate-character-left,.arco-react-rate-character-right{transition:inherit}.arco-react-rate-character-left>*,.arco-react-rate-character-right>*{float:left}.arco-react-rate-character-left{position:absolute;top:0;left:0;width:50%;white-space:nowrap;overflow:hidden;opacity:0}.arco-react-rate-character-scale{animation:arco-react-rate-scale .4s cubic-bezier(.34,.69,.1,1)}.arco-react-rate-character-full .arco-react-rate-character-right{color:rgb(var(--gold-6))}.arco-react-rate-character-half .arco-react-rate-character-left{color:rgb(var(--gold-6));opacity:1}.arco-react-rate-character-disabled{cursor:not-allowed}.arco-react-rate:not(.arco-react-rate-readonly):not(.arco-react-rate-disabled) .arco-react-rate-character{cursor:pointer}.arco-react-rate:not(.arco-react-rate-readonly):not(.arco-react-rate-disabled) .arco-react-rate-character:hover,.arco-react-rate:not(.arco-react-rate-readonly):not(.arco-react-rate-disabled) .arco-react-rate-character:focus{transform:scale(1.2)}@keyframes arco-react-rate-scale{0%{transform:scale(1)}50%{transform:scale(1.2)}to{transform:scale(1)}}.arco-react-resizebox{position:relative;width:100%;overflow:hidden}.arco-react-resizebox-direction-left,.arco-react-resizebox-direction-right,.arco-react-resizebox-direction-top,.arco-react-resizebox-direction-bottom{position:absolute;left:0;top:0;user-select:none;box-sizing:border-box}.arco-react-resizebox-direction-right{left:unset;right:0}.arco-react-resizebox-direction-bottom{top:unset;bottom:0}.arco-react-resizebox-split,.arco-react-resizebox-split-group{display:flex;user-select:auto}.arco-react-resizebox-split .arco-react-resizebox-slit-trigger,.arco-react-resizebox-split-group .arco-react-resizebox-slit-trigger{flex:0}.arco-react-resizebox-split-pane,.arco-react-resizebox-split-group-pane{overflow:auto}.arco-react-resizebox-split .second-pane,.arco-react-resizebox-split-group .second-pane{flex:1}.arco-react-resizebox-split-horizontal,.arco-react-resizebox-split-group-horizontal{flex-direction:row}.arco-react-resizebox-split-vertical,.arco-react-resizebox-split-group-vertical{flex-direction:column}.arco-react-resizebox-split-moving,.arco-react-resizebox-split-group-moving{user-select:none}.arco-react-resizebox-trigger-icon-wrapper{display:flex;justify-content:center;align-items:center;height:100%;background-color:var(--color-neutral-3)}.arco-react-resizebox-trigger-icon{display:inline-block;color:var(--color-text-1);font-size:12px}.arco-react-resizebox-trigger-prev>svg,.arco-react-resizebox-trigger-next>svg{cursor:pointer}.arco-react-resizebox-trigger-vertical{height:100%;cursor:col-resize}.arco-react-resizebox-trigger-vertical.arco-react-resizebox-trigger-not-resizable{cursor:default}.arco-react-resizebox-trigger-vertical .arco-react-resizebox-trigger-prev,.arco-react-resizebox-trigger-vertical .arco-react-resizebox-trigger-next{height:18px;line-height:18px}.arco-react-resizebox-trigger-vertical .arco-react-resizebox-trigger-icon-wrapper{width:6px;flex-direction:column}.arco-react-resizebox-trigger-vertical .arco-react-resizebox-trigger-icon-empty{height:18px;width:100%}.arco-react-resizebox-trigger-horizontal{width:100%;cursor:row-resize}.arco-react-resizebox-trigger-horizontal.arco-react-resizebox-trigger-not-resizable{cursor:default}.arco-react-resizebox-trigger-horizontal .arco-react-resizebox-trigger-prev,.arco-react-resizebox-trigger-horizontal .arco-react-resizebox-trigger-next{width:18px;text-align:center}.arco-react-resizebox-trigger-horizontal .arco-react-resizebox-trigger-icon-wrapper{height:6px}.arco-react-resizebox-trigger-horizontal .arco-react-resizebox-trigger-icon-wrapper .arco-react-icon{vertical-align:-1px}.arco-react-resizebox-trigger-horizontal .arco-react-resizebox-trigger-icon-empty{width:18px;height:100%}.arco-react-result{width:100%;box-sizing:border-box;padding:32px 32px 24px}.arco-react-result-is-404,.arco-react-result-is-403,.arco-react-result-is-500{padding-top:24px}.arco-react-result-is-404 .arco-react-result-icon-tip,.arco-react-result-is-403 .arco-react-result-icon-tip,.arco-react-result-is-500 .arco-react-result-icon-tip{height:92px;width:92px;line-height:92px}.arco-react-result-icon{margin-bottom:16px;text-align:center;font-size:20px}.arco-react-result-icon-tip{display:inline-block;height:45px;width:45px;text-align:center;border-radius:50%;line-height:45px}.arco-react-result-icon-custom{width:unset;height:unset;line-height:inherit}.arco-react-result-icon-custom>.arco-react-icon{font-size:45px;color:inherit}.arco-react-result-icon-success{color:rgb(var(--success-6));background-color:var(--color-success-light-1)}.arco-react-result-icon-error{color:rgb(var(--danger-6));background-color:var(--color-danger-light-1)}.arco-react-result-icon-info{color:rgb(var(--primary-6));background-color:var(--color-primary-light-1)}.arco-react-result-icon-warning{color:rgb(var(--warning-6));background-color:var(--color-warning-light-1)}.arco-react-result-title{text-align:center;line-height:1.5715;font-size:14px;font-weight:500;color:var(--color-text-1)}.arco-react-result-subtitle{text-align:center;line-height:1.5715;font-size:14px;color:var(--color-text-2)}.arco-react-result-extra{margin-top:20px;text-align:center}.arco-react-result-content{margin-top:20px}.arco-react-select .arco-react-select-view{color:var(--color-text-1);background-color:var(--color-fill-2);border:1px solid transparent}.arco-react-select:hover .arco-react-select-view{background-color:var(--color-fill-3);border-color:transparent}.arco-react-select.arco-react-select-focused .arco-react-select-view{color:var(--color-text-1);background-color:var(--color-bg-2);border-color:rgb(var(--primary-6));box-shadow:0 0 0 0 var(--color-primary-light-2)}.arco-react-select .arco-react-select-suffix-icon,.arco-react-select .arco-react-select-loading-icon,.arco-react-select .arco-react-select-search-icon,.arco-react-select .arco-react-select-clear-icon,.arco-react-select .arco-react-select-arrow-icon,.arco-react-select .arco-react-select-expand-icon{color:var(--color-text-2)}.arco-react-select-error .arco-react-select-view{background-color:var(--color-danger-light-1);border:1px solid transparent}.arco-react-select-error:hover .arco-react-select-view{background-color:var(--color-danger-light-2);border-color:transparent}.arco-react-select-error.arco-react-select-focused .arco-react-select-view{color:var(--color-text-1);background-color:var(--color-bg-2);border-color:rgb(var(--danger-6));box-shadow:0 0 0 0 var(--color-danger-light-2)}.arco-react-select-disabled .arco-react-select-view{color:var(--color-text-4);background-color:var(--color-fill-2);border:1px solid transparent}.arco-react-select-disabled:hover .arco-react-select-view{background-color:var(--color-fill-2);border-color:transparent}.arco-react-select-disabled .arco-react-select-suffix-icon,.arco-react-select-disabled .arco-react-select-loading-icon,.arco-react-select-disabled .arco-react-select-search-icon,.arco-react-select-disabled .arco-react-select-clear-icon,.arco-react-select-disabled .arco-react-select-arrow-icon,.arco-react-select-disabled .arco-react-select-expand-icon{color:var(--color-text-4)}.arco-react-select-no-border .arco-react-select-view{border:none!important;background:none!important}.arco-react-select-size-mini.arco-react-select-multiple .arco-react-select-view{height:auto;font-size:12px;padding:0 3px;line-height:0}.arco-react-select-size-mini.arco-react-select-multiple .arco-react-input-tag-has-placeholder input,.arco-react-select-size-mini.arco-react-select-multiple .arco-react-input-tag-has-placeholder .arco-react-input-tag-input-mirror{box-sizing:border-box;padding-left:4px}.arco-react-select-size-mini.arco-react-select-multiple .arco-react-select-suffix{padding-right:4px}.arco-react-select-size-mini.arco-react-select-multiple input{font-size:12px}.arco-react-select-size-mini.arco-react-select-single .arco-react-select-view{height:24px;line-height:22px;font-size:12px;padding:0 7px}.arco-react-select-size-mini.arco-react-select-single input{font-size:12px}.arco-react-select-size-mini.arco-react-select-multiple .arco-react-select-view-with-prefix{padding-left:7px}.arco-react-select-size-small.arco-react-select-multiple .arco-react-select-view{height:auto;font-size:14px;padding:0 3px;line-height:0}.arco-react-select-size-small.arco-react-select-multiple .arco-react-input-tag-has-placeholder input,.arco-react-select-size-small.arco-react-select-multiple .arco-react-input-tag-has-placeholder .arco-react-input-tag-input-mirror{box-sizing:border-box;padding-left:8px}.arco-react-select-size-small.arco-react-select-multiple .arco-react-select-suffix{padding-right:8px}.arco-react-select-size-small.arco-react-select-multiple input{font-size:14px}.arco-react-select-size-small.arco-react-select-single .arco-react-select-view{height:28px;line-height:26px;font-size:14px;padding:0 11px}.arco-react-select-size-small.arco-react-select-single input{font-size:14px}.arco-react-select-size-small.arco-react-select-multiple .arco-react-select-view-with-prefix{padding-left:11px}.arco-react-select-size-default.arco-react-select-multiple .arco-react-select-view{height:auto;font-size:14px;padding:0 3px;line-height:0}.arco-react-select-size-default.arco-react-select-multiple .arco-react-input-tag-has-placeholder input,.arco-react-select-size-default.arco-react-select-multiple .arco-react-input-tag-has-placeholder .arco-react-input-tag-input-mirror{box-sizing:border-box;padding-left:8px}.arco-react-select-size-default.arco-react-select-multiple .arco-react-select-suffix{padding-right:8px}.arco-react-select-size-default.arco-react-select-multiple input{font-size:14px}.arco-react-select-size-default.arco-react-select-single .arco-react-select-view{height:32px;line-height:30px;font-size:14px;padding:0 11px}.arco-react-select-size-default.arco-react-select-single input{font-size:14px}.arco-react-select-size-default.arco-react-select-multiple .arco-react-select-view-with-prefix{padding-left:11px}.arco-react-select-size-large.arco-react-select-multiple .arco-react-select-view{height:auto;font-size:16px;padding:0 3px;line-height:0}.arco-react-select-size-large.arco-react-select-multiple .arco-react-input-tag-has-placeholder input,.arco-react-select-size-large.arco-react-select-multiple .arco-react-input-tag-has-placeholder .arco-react-input-tag-input-mirror{box-sizing:border-box;padding-left:12px}.arco-react-select-size-large.arco-react-select-multiple .arco-react-select-suffix{padding-right:12px}.arco-react-select-size-large.arco-react-select-multiple input{font-size:16px}.arco-react-select-size-large.arco-react-select-single .arco-react-select-view{height:36px;line-height:34px;font-size:16px;padding:0 15px}.arco-react-select-size-large.arco-react-select-single input{font-size:16px}.arco-react-select-size-large.arco-react-select-multiple .arco-react-select-view-with-prefix{padding-left:15px}.arco-react-select{display:inline-block;position:relative;box-sizing:border-box;width:100%;cursor:pointer}.arco-react-select-view{display:flex;position:relative;box-sizing:border-box;width:100%;border-radius:var(--border-radius-small);outline:none;user-select:none;text-align:left;transition:all .1s cubic-bezier(0,0,1,1),padding 0s linear}.arco-react-select-view input{color:inherit;cursor:inherit}.arco-react-select-view input::placeholder{color:var(--color-text-3)}.arco-react-select-multiple,.arco-react-select-show-search{cursor:text}.arco-react-select-disabled{cursor:not-allowed}.arco-react-select-disabled .arco-react-select-view input::placeholder{color:var(--color-text-4)}.arco-react-select-single .arco-react-select-view-input{box-sizing:border-box;width:100%;padding:0;border:none;outline:none;background:transparent;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.arco-react-select-single .arco-react-select-view-value{display:inline-block;box-sizing:border-box;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.arco-react-select-single .arco-react-select-view-value:after{content:\".\";font-size:0;line-height:0;visibility:hidden}.arco-react-select-single .arco-react-select-view .arco-react-select-hidden{width:0!important;position:absolute}.arco-react-select-multiple{vertical-align:top}.arco-react-select-multiple .arco-react-select-view{padding:0 4px;line-height:0}.arco-react-select-multiple .arco-react-select-view-with-prefix{padding-left:12px}.arco-react-select-multiple .arco-react-input-tag{flex:1;padding:0;border:none!important;background:none!important;box-shadow:none!important;overflow:hidden}.arco-react-select-multiple .arco-react-tag{max-width:100%}.arco-react-select-multiple:not(.arco-react-select-focused) .arco-react-input-tag input:not(:first-child)[value=\"\"]{width:0!important;position:absolute}.arco-react-select-prefix{display:flex;align-items:center;margin-right:12px;white-space:nowrap;color:var(--color-text-2)}.arco-react-select-suffix{display:flex;align-items:center;margin-left:4px}.arco-react-select-suffix-icon,.arco-react-select-search-icon,.arco-react-select-loading-icon,.arco-react-select-expand-icon,.arco-react-select-clear-icon{font-size:12px;transition:all .1s cubic-bezier(0,0,1,1)}.arco-react-select-arrow-icon{font-size:12px}.arco-react-select-open .arco-react-select-arrow-icon svg{transform:rotate(180deg)}.arco-react-select .arco-react-select-clear-icon{display:none;cursor:pointer}.arco-react-select .arco-react-select-clear-icon>svg{position:relative;transition:all .1s cubic-bezier(0,0,1,1)}.arco-react-select:hover .arco-react-select-clear-icon{display:block}.arco-react-select:hover .arco-react-select-clear-icon~*{display:none}.arco-react-select-popup{top:4px;box-sizing:border-box;padding:4px 0;border:1px solid var(--color-fill-3);border-radius:var(--border-radius-medium);background-color:var(--color-bg-popup);box-shadow:0 4px 10px #0000001a;overflow:hidden}.arco-react-select-popup-hidden{display:none}.arco-react-select-popup .arco-react-select-popup-inner{width:100%;max-height:200px;list-style:none}.arco-react-select-popup .arco-react-select-option{position:relative;box-sizing:border-box;width:100%;padding:0 12px;font-size:14px;text-align:left;cursor:pointer;line-height:36px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--color-text-1);background-color:var(--color-bg-popup)}.arco-react-select-popup .arco-react-select-option-selected{color:var(--color-text-1);background-color:var(--color-bg-popup)}.arco-react-select-popup .arco-react-select-option-hover{color:var(--color-text-1);background-color:var(--color-fill-2)}.arco-react-select-popup .arco-react-select-option-disabled{color:var(--color-text-4);background-color:var(--color-bg-popup)}.arco-react-select-popup .arco-react-select-option-disabled{cursor:not-allowed}.arco-react-select-popup .arco-react-select-option-selected{font-weight:500}.arco-react-select-popup .arco-react-select-option-empty{height:36px}.arco-react-select-option-wrapper{display:flex;align-items:center;padding:0 7px}.arco-react-select-option-wrapper .arco-react-select-checkbox{padding:0 5px}.arco-react-select-option-wrapper .arco-react-select-checkbox input{display:none}.arco-react-select-option-wrapper .arco-react-select-option{flex:1;margin-left:1px;padding:0 4px;border-radius:var(--border-radius-small)}.arco-react-select-group-title{box-sizing:border-box;width:100%;padding:8px 12px 0;line-height:20px;font-size:12px;color:var(--color-text-3);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.arco-react-select-group-title:first-child{padding-top:4px}.arco-react-select-highlight{font-weight:500;color:var(--color-text-1)}.arco-react-skeleton{display:flex}.arco-react-skeleton-header{display:flex}.arco-react-skeleton-header .arco-react-skeleton-image{background-color:var(--color-fill-2);width:48px;height:48px;border-radius:var(--border-radius-small)}.arco-react-skeleton-header .arco-react-skeleton-image-circle{border-radius:50%}.arco-react-skeleton-header .arco-react-skeleton-image-small{width:36px;height:36px}.arco-react-skeleton-header .arco-react-skeleton-image-large{width:60px;height:60px}.arco-react-skeleton-header .arco-react-skeleton-image-left{margin-right:16px}.arco-react-skeleton-header .arco-react-skeleton-image-right{margin-left:16px}.arco-react-skeleton-content{flex-grow:1;overflow:hidden}.arco-react-skeleton-content .arco-react-skeleton-text{list-style:none;padding:0;margin:0}.arco-react-skeleton-content .arco-react-skeleton-text-row{background-color:var(--color-fill-2);height:16px}.arco-react-skeleton-content .arco-react-skeleton-text-row:not(:last-child){margin-bottom:16px}.arco-react-skeleton-animate .arco-react-skeleton-image,.arco-react-skeleton-animate .arco-react-skeleton-text>li{background:linear-gradient(90deg,var(--color-fill-2) 25%,var(--color-fill-3) 37%,var(--color-fill-2) 63%);background-size:400% 100%;animation:arco-react-skeleton-circle 1.5s cubic-bezier(0,0,1,1) infinite}@keyframes arco-react-skeleton-circle{0%{background-position:100% 50%}to{background-position:0 50%}}.arco-react-slider{width:100%;display:inline-block}.arco-react-slider-wrapper{display:flex;align-items:center}.arco-react-slider-vertical{display:inline-block;height:auto;width:auto;min-width:22px}.arco-react-slider-vertical .arco-react-slider-wrapper{flex-direction:column}.arco-react-slider-with-marks{margin-bottom:24px;padding:0 20px}.arco-react-slider-vertical.arco-react-slider-with-marks{margin-bottom:0;padding:0}.arco-react-slider-road{width:100%;height:12px;cursor:pointer;flex:1;position:relative}.arco-react-slider-road:before{content:\"\";display:block;height:2px;width:100%;background-color:var(--color-fill-3);border-radius:2px;position:absolute;top:50%;transform:translateY(-50%)}.arco-react-slider-road.arco-react-slider-road-vertical{width:12px;max-width:12px;height:100%;min-height:200px;margin-bottom:12px / 2;margin-top:12px / 2;margin-right:0;transform:translateY(0)}.arco-react-slider-road.arco-react-slider-road-vertical:before{width:2px;height:100%;top:unset;left:50%;transform:translate(-50%)}.arco-react-slider-road.arco-react-slider-road-disabled:before{background-color:var(--color-fill-2)}.arco-react-slider-road.arco-react-slider-road-disabled .arco-react-slider-bar{background-color:var(--color-fill-3)}.arco-react-slider-road.arco-react-slider-road-disabled .arco-react-slider-button{cursor:not-allowed}.arco-react-slider-road.arco-react-slider-road-disabled .arco-react-slider-button:after{border-color:var(--color-fill-3)}.arco-react-slider-road.arco-react-slider-road-disabled .arco-react-slider-dots .arco-react-slider-dot{border-color:var(--color-fill-2)}.arco-react-slider-road.arco-react-slider-road-disabled .arco-react-slider-dots .arco-react-slider-dot-active{border-color:var(--color-fill-3)}.arco-react-slider-road.arco-react-slider-road-disabled .arco-react-slider-ticks .arco-react-slider-tick{background:var(--color-fill-2)}.arco-react-slider-road.arco-react-slider-road-disabled .arco-react-slider-ticks .arco-react-slider-tick-active{background:var(--color-fill-3)}.arco-react-slider-bar{position:absolute;height:2px;background-color:rgb(var(--primary-6));border-radius:2px;top:50%;transform:translateY(-50%)}.arco-react-slider-road-vertical .arco-react-slider-bar{width:2px;height:unset;top:unset;left:50%;transform:translate(-50%)}.arco-react-slider-button{position:absolute;height:12px;width:12px;top:0;left:0;transform:translate(-50%)}.arco-react-slider-button:after{content:\"\";display:inline-block;width:12px;height:12px;background:var(--color-bg-2);border:2px solid rgb(var(--primary-6));border-radius:50%;box-sizing:border-box;position:absolute;left:0;transition:all .3s cubic-bezier(.3,1.3,.3,1);top:0}.arco-react-slider-button.arco-react-slider-button-active:after,.arco-react-slider-button:hover:after{transform:scale(1.16666667);box-shadow:0 2px 5px #0000001a}.arco-react-slider-road-vertical .arco-react-slider-button{top:unset;bottom:0;left:0;transform:translateY(50%)}.arco-react-slider-reverse .arco-react-slider-button{transform:translate(50%);left:unset;right:0}.arco-react-slider-reverse .arco-react-slider-road-vertical .arco-react-slider-button{transform:translateY(-50%)}.arco-react-slider-marks{position:absolute;top:12px;width:100%}.arco-react-slider-marks-text{position:absolute;transform:translate(-50%);cursor:pointer;font-size:14px;line-height:1;color:var(--color-text-3)}.arco-react-slider-road-vertical .arco-react-slider-marks{height:100%;left:15px;top:0}.arco-react-slider-road-vertical .arco-react-slider-marks-text{transform:translateY(50%)}.arco-react-slider-reverse .arco-react-slider-marks-text{transform:translate(50%)}.arco-react-slider-reverse .arco-react-slider-road-vertical .arco-react-slider-marks-text{transform:translateY(-50%)}.arco-react-slider-dots{height:100%}.arco-react-slider-dots .arco-react-slider-dot-wrapper{position:absolute;top:50%;transform:translate(-50%,-50%);font-size:12px}.arco-react-slider-road-vertical .arco-react-slider-dots .arco-react-slider-dot-wrapper{top:unset;left:50%;transform:translate(-50%,50%)}.arco-react-slider-reverse .arco-react-slider-dots .arco-react-slider-dot-wrapper{transform:translate(50%,-50%)}.arco-react-slider-reverse .arco-react-slider-road-vertical .arco-react-slider-dots .arco-react-slider-dot-wrapper{transform:translate(-50%,-50%)}.arco-react-slider-dots .arco-react-slider-dot-wrapper .arco-react-slider-dot{background-color:var(--color-bg-2);box-sizing:border-box;border:2px solid var(--color-fill-3);height:8px;width:8px;border-radius:50%}.arco-react-slider-dots .arco-react-slider-dot-wrapper .arco-react-slider-dot-active{border-color:rgb(var(--primary-6))}.arco-react-slider-ticks .arco-react-slider-tick{position:absolute;width:1px;height:3px;background:var(--color-fill-3);top:50%;transform:translate(-50%,-100%);margin-top:-1px}.arco-react-slider-ticks .arco-react-slider-tick-active{background:rgb(var(--primary-6))}.arco-react-slider-vertical .arco-react-slider-ticks .arco-react-slider-tick{width:3px;height:1px;top:unset;margin-top:unset;left:50%;transform:translate(1px,50%)}.arco-react-slider-reverse .arco-react-slider-ticks .arco-react-slider-tick{transform:translate(50%,-100%)}.arco-react-slider-vertical.arco-react-slider-reverse .arco-react-slider-ticks .arco-react-slider-tick{transform:translate(1px,-50%)}.arco-react-slider-input{display:flex;margin-left:20px}.arco-react-slider-vertical .arco-react-slider-input{margin-left:0}.arco-react-slider-input>.arco-react-input-number{width:60px;height:32px;line-height:normal;overflow:visible}.arco-react-slider-input>.arco-react-input-number input{text-align:center}.arco-react-slider-input-range{width:20px;line-height:32px;height:32px;text-align:center}.arco-react-slider-input-range-content{display:inline-block;width:8px;height:2px;background:rgb(var(--gray-6));transform:translateY(-100%)}.arco-react-space{display:inline-flex}.arco-react-space-vertical{flex-direction:column}.arco-react-space-align-baseline{align-items:baseline}.arco-react-space-align-start{align-items:flex-start}.arco-react-space-align-end{align-items:flex-end}.arco-react-space-align-center{align-items:center}.arco-react-space-wrap{flex-wrap:wrap}.arco-react-spin{display:inline-block}.arco-react-spin-with-tip{text-align:center}.arco-react-spin-icon{color:rgb(var(--primary-6));font-size:20px}.arco-react-spin-tip{margin-top:6px;font-size:14px;font-weight:500;color:rgb(var(--primary-6))}.arco-react-spin-loading-layer{text-align:center;user-select:none}.arco-react-spin-children{position:relative}.arco-react-spin-children:after{content:\"\";position:absolute;width:100%;height:100%;left:0;top:0;right:0;bottom:0;background-color:var(--color-spin-layer-bg);opacity:0;transition:opacity .1s cubic-bezier(0,0,1,1);pointer-events:none;z-index:1}.arco-react-spin-loading{position:relative;user-select:none}.arco-react-spin-loading .arco-react-spin-loading-layer-inner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2}.arco-react-spin-loading .arco-react-spin-children:after{opacity:1;pointer-events:auto}.arco-react-spin-dot{position:absolute;top:0;left:50%;transform:translate(-50%) scale(0);width:8px;height:8px;background-color:rgb(var(--primary-6));border-radius:var(--border-radius-circle);animation:arco-react-dot-loading 2s cubic-bezier(0,0,1,1) infinite forwards}.arco-react-spin-dot:nth-child(2){background-color:rgb(var(--primary-5));animation-delay:.4s}.arco-react-spin-dot:nth-child(3){background-color:rgb(var(--primary-4));animation-delay:.8s}.arco-react-spin-dot:nth-child(4){background-color:rgb(var(--primary-4));animation-delay:1.2s}.arco-react-spin-dot:nth-child(5){background-color:rgb(var(--primary-2));animation-delay:1.6s}.arco-react-spin-dot-list{display:inline-block;transform-style:preserve-3d;perspective:200px;width:56px;position:relative;height:8px}@keyframes arco-react-dot-loading{0%{transform:translate3D(-48.621%,0,-.985px) scale(.511)}2.778%{transform:translate3D(-95.766%,0,-.94px) scale(.545)}5.556%{transform:translate3D(-140%,0,-.866px) scale(.6)}8.333%{transform:translate3D(-179.981%,0,-.766px) scale(.675)}11.111%{transform:translate3D(-214.492%,0,-.643px) scale(.768)}13.889%{transform:translate3D(-242.487%,0,-.5px) scale(.875)}16.667%{transform:translate3D(-263.114%,0,-.342px) scale(.993)}19.444%{transform:translate3D(-275.746%,0,-.174px) scale(1.12)}22.222%{transform:translate(-280%) scale(1.25)}25%{transform:translate3D(-275.746%,0,.174px) scale(1.38)}27.778%{transform:translate3D(-263.114%,0,.342px) scale(1.507)}30.556%{transform:translate3D(-242.487%,0,.5px) scale(1.625)}33.333%{transform:translate3D(-214.492%,0,.643px) scale(1.732)}36.111%{transform:translate3D(-179.981%,0,.766px) scale(1.825)}38.889%{transform:translate3D(-140%,0,.866px) scale(1.9)}41.667%{transform:translate3D(-95.766%,0,.94px) scale(1.955)}44.444%{transform:translate3D(-48.621%,0,.985px) scale(1.989)}47.222%{transform:translateZ(1px) scale(2)}50%{transform:translate3D(48.621%,0,.985px) scale(1.989)}52.778%{transform:translate3D(95.766%,0,.94px) scale(1.955)}55.556%{transform:translate3D(140%,0,.866px) scale(1.9)}58.333%{transform:translate3D(179.981%,0,.766px) scale(1.825)}61.111%{transform:translate3D(214.492%,0,.643px) scale(1.732)}63.889%{transform:translate3D(242.487%,0,.5px) scale(1.625)}66.667%{transform:translate3D(263.114%,0,.342px) scale(1.507)}69.444%{transform:translate3D(275.746%,0,.174px) scale(1.38)}72.222%{transform:translate(280%) scale(1.25)}75%{transform:translate3D(275.746%,0,-.174px) scale(1.12)}77.778%{transform:translate3D(263.114%,0,-.342px) scale(.993)}80.556%{transform:translate3D(242.487%,0,-.5px) scale(.875)}83.333%{transform:translate3D(214.492%,0,-.643px) scale(.768)}86.111%{transform:translate3D(179.981%,0,-.766px) scale(.675)}88.889%{transform:translate3D(140%,0,-.866px) scale(.6)}91.667%{transform:translate3D(95.766%,0,-.94px) scale(.545)}94.444%{transform:translate3D(48.621%,0,-.985px) scale(.511)}97.222%{transform:translateZ(-1px) scale(.5)}}.arco-react-statistic{display:inline-block;line-height:1.5715;color:var(--color-text-2)}.arco-react-statistic-title{font-size:14px;margin-bottom:8px;color:var(--color-text-2)}.arco-react-statistic-content .arco-react-statistic-value{white-space:nowrap;font-size:26px;font-weight:500;color:var(--color-text-1)}.arco-react-statistic-content .arco-react-statistic-value-int{white-space:nowrap}.arco-react-statistic-content .arco-react-statistic-value-decimal{font-size:26px;display:inline-block}.arco-react-statistic-content .arco-react-statistic-value-suffix{font-size:14px}.arco-react-statistic-content .arco-react-statistic-value-prefix{font-size:14px}.arco-react-statistic-extra{margin-top:8px;color:var(--color-text-2)}.arco-react-steps-item{flex:1;white-space:nowrap;margin-right:12px;overflow:hidden;position:relative;text-align:left}.arco-react-steps-item:last-child{flex:none;margin-right:0}.arco-react-steps-item-active .arco-react-steps-item-title{font-weight:500}.arco-react-steps-item-icon{display:inline-block;vertical-align:top;margin-right:12px;font-size:16px;font-weight:500}.arco-react-steps-icon{width:28px;line-height:26px;height:28px;border-radius:var(--border-radius-circle);text-align:center;box-sizing:border-box}.arco-react-steps-item-wait .arco-react-steps-icon{border:1px solid transparent;color:var(--color-text-2);background-color:var(--color-fill-2)}.arco-react-steps-item-process .arco-react-steps-icon{border:1px solid transparent;color:var(--color-white);background-color:rgb(var(--primary-6))}.arco-react-steps-item-finish .arco-react-steps-icon{border:1px solid transparent;color:rgb(var(--primary-6));background-color:var(--color-primary-light-1)}.arco-react-steps-item-error .arco-react-steps-icon{border:1px solid transparent;color:var(--color-white);background-color:rgb(var(--danger-6))}.arco-react-steps-item-title{white-space:nowrap;color:var(--color-text-2);position:relative;display:inline-block;font-size:16px;line-height:28px;padding-right:12px}.arco-react-steps-item-wait .arco-react-steps-item-title{color:var(--color-text-2)}.arco-react-steps-item-process .arco-react-steps-item-title{color:var(--color-text-1)}.arco-react-steps-item-finish .arco-react-steps-item-title{color:var(--color-text-1)}.arco-react-steps-item-error .arco-react-steps-item-title{color:var(--color-text-1)}.arco-react-steps-item-content{display:inline-block}.arco-react-steps-item-description{white-space:normal;color:var(--color-text-3);font-size:12px;margin-top:2px;max-width:140px}.arco-react-steps-item-wait .arco-react-steps-item-description{color:var(--color-text-3)}.arco-react-steps-item-process .arco-react-steps-item-description{color:var(--color-text-3)}.arco-react-steps-item-finish .arco-react-steps-item-description{color:var(--color-text-3)}.arco-react-steps-item-error .arco-react-steps-item-description{color:var(--color-text-3)}.arco-react-steps-label-horizontal .arco-react-steps-item:not(:last-child) .arco-react-steps-item-title:after{content:\"\";display:block;position:absolute;width:5000px;height:1px;left:100%;top:13.5px;background-color:var(--color-neutral-3);box-sizing:border-box}.arco-react-steps-label-horizontal .arco-react-steps-item.arco-react-steps-item-process .arco-react-steps-item-title:after{background-color:var(--color-neutral-3)}.arco-react-steps-label-horizontal .arco-react-steps-item.arco-react-steps-item-finish .arco-react-steps-item-title:after{background-color:rgb(var(--primary-6))}.arco-react-steps-label-horizontal .arco-react-steps-item.arco-react-steps-item-next-error .arco-react-steps-item-title:after{background-color:rgb(var(--danger-6))}.arco-react-steps-vertical .arco-react-steps-item:not(:last-child) .arco-react-steps-item-tail{position:absolute;width:1px;top:34px;bottom:6px;left:13.5px;box-sizing:border-box;padding:0;height:unset}.arco-react-steps-vertical .arco-react-steps-item:not(:last-child) .arco-react-steps-item-tail:after{content:\"\";display:block;width:100%;height:100%;background-color:var(--color-neutral-3)}.arco-react-steps-item:not(:last-child) .arco-react-steps-item-tail{position:absolute;width:100%;height:1px;top:13.5px;box-sizing:border-box}.arco-react-steps-item:not(:last-child) .arco-react-steps-item-tail:after{content:\"\";display:block;width:100%;height:100%;background-color:var(--color-neutral-3)}.arco-react-steps-item:not(:last-child).arco-react-steps-item-finish .arco-react-steps-item-tail:after{background-color:rgb(var(--primary-6))}.arco-react-steps-item:not(:last-child).arco-react-steps-item-next-error .arco-react-steps-item-tail:after{background-color:rgb(var(--danger-6))}.arco-react-steps-size-small.arco-react-steps-vertical .arco-react-steps-item:not(:last-child) .arco-react-steps-item-tail{left:11.5px;top:30px}.arco-react-steps-size-small:not(.arco-react-steps-vertical):not(.arco-react-steps-mode-dot) .arco-react-steps-item:not(:last-child) .arco-react-steps-item-tail{top:11.5px}.arco-react-steps-size-small .arco-react-steps-item-icon{font-size:14px}.arco-react-steps-size-small .arco-react-steps-item-title{font-size:14px;line-height:24px}.arco-react-steps-size-small .arco-react-steps-item-description{font-size:12px}.arco-react-steps-size-small .arco-react-steps-icon{width:24px;height:24px;line-height:22px;font-size:14px}.arco-react-steps-size-small.arco-react-steps-label-horizontal .arco-react-steps-item:not(:last-child) .arco-react-steps-item-title:after{top:11.5px}.arco-react-steps-label-vertical .arco-react-steps-item{overflow:visible}.arco-react-steps-label-vertical .arco-react-steps-item-title{padding-right:0;margin-top:2px}.arco-react-steps-label-vertical .arco-react-steps-item-icon{margin-left:56px}.arco-react-steps-label-vertical .arco-react-steps-item-tail{left:96px;padding-right:40px}.arco-react-steps-label-vertical.arco-react-steps-size-small .arco-react-steps-item-icon{margin-left:58px}.arco-react-steps-label-vertical.arco-react-steps-size-small .arco-react-steps-item-tail{left:94px;padding-right:36px}.arco-react-steps-mode-dot .arco-react-steps-item{flex:1;white-space:nowrap;margin-right:16px;position:relative;text-align:left;overflow:visible}.arco-react-steps-mode-dot .arco-react-steps-item:last-child{flex:none;margin-right:0}.arco-react-steps-mode-dot .arco-react-steps-item-active .arco-react-steps-item-title{font-weight:500}.arco-react-steps-mode-dot .arco-react-steps-item-icon{display:inline-block;box-sizing:border-box;width:8px;height:8px;border-radius:var(--border-radius-circle);vertical-align:top}.arco-react-steps-mode-dot .arco-react-steps-item-active .arco-react-steps-item-icon{width:10px;height:10px}.arco-react-steps-mode-dot .arco-react-steps-item-wait .arco-react-steps-item-icon{border-color:var(--color-fill-4);background-color:var(--color-fill-4)}.arco-react-steps-mode-dot .arco-react-steps-item-process .arco-react-steps-item-icon{border-color:rgb(var(--primary-6));background-color:rgb(var(--primary-6))}.arco-react-steps-mode-dot .arco-react-steps-item-finish .arco-react-steps-item-icon{border-color:rgb(var(--primary-6));background-color:rgb(var(--primary-6))}.arco-react-steps-mode-dot .arco-react-steps-item-error .arco-react-steps-item-icon{border-color:rgb(var(--danger-6));background-color:rgb(var(--danger-6))}.arco-react-steps-mode-dot.arco-react-steps-horizontal .arco-react-steps-item-icon{margin-left:66px}.arco-react-steps-mode-dot.arco-react-steps-horizontal .arco-react-steps-item-active .arco-react-steps-item-icon{margin-left:65px;margin-top:-1px}.arco-react-steps-mode-dot .arco-react-steps-item-content{display:inline-block}.arco-react-steps-mode-dot .arco-react-steps-item-title{position:relative;display:inline-block;font-size:16px;margin-top:4px}.arco-react-steps-mode-dot .arco-react-steps-item-wait .arco-react-steps-item-title{color:var(--color-text-2)}.arco-react-steps-mode-dot .arco-react-steps-item-process .arco-react-steps-item-title{color:var(--color-text-1)}.arco-react-steps-mode-dot .arco-react-steps-item-finish .arco-react-steps-item-title{color:var(--color-text-1)}.arco-react-steps-mode-dot .arco-react-steps-item-error .arco-react-steps-item-title{color:var(--color-text-1)}.arco-react-steps-mode-dot .arco-react-steps-item-description{white-space:normal;font-size:12px;margin-top:4px}.arco-react-steps-mode-dot .arco-react-steps-item-wait .arco-react-steps-item-description{color:var(--color-text-3)}.arco-react-steps-mode-dot .arco-react-steps-item-process .arco-react-steps-item-description{color:var(--color-text-3)}.arco-react-steps-mode-dot .arco-react-steps-item-finish .arco-react-steps-item-description{color:var(--color-text-3)}.arco-react-steps-mode-dot .arco-react-steps-item-error .arco-react-steps-item-description{color:var(--color-text-3)}.arco-react-steps-mode-dot .arco-react-steps-item:not(:last-child) .arco-react-steps-item-tail{position:absolute;width:100%;height:1px;top:3.5px;left:78px;box-sizing:border-box;background-color:var(--color-neutral-3)}.arco-react-steps-mode-dot .arco-react-steps-item:not(:last-child) .arco-react-steps-item-tail:after{display:none}.arco-react-steps-mode-dot .arco-react-steps-item:not(:last-child).arco-react-steps-item-process .arco-react-steps-item-tail{background-color:var(--color-neutral-3)}.arco-react-steps-mode-dot .arco-react-steps-item:not(:last-child).arco-react-steps-item-finish .arco-react-steps-item-tail{background-color:rgb(var(--primary-6))}.arco-react-steps-mode-dot .arco-react-steps-item:not(:last-child).arco-react-steps-item-next-error .arco-react-steps-item-tail{background-color:rgb(var(--danger-6))}.arco-react-steps-mode-dot.arco-react-steps-vertical .arco-react-steps-item-icon{margin-right:16px}.arco-react-steps-mode-dot.arco-react-steps-vertical .arco-react-steps-item-content{overflow:hidden}.arco-react-steps-mode-dot.arco-react-steps-vertical .arco-react-steps-item-title{margin-top:-2px}.arco-react-steps-mode-dot.arco-react-steps-vertical.arco-react-steps-size-small .arco-react-steps-item-title{margin-top:0}.arco-react-steps-mode-dot.arco-react-steps-vertical .arco-react-steps-item-active .arco-react-steps-item-title{margin-top:-3px}.arco-react-steps-mode-dot.arco-react-steps-vertical.arco-react-steps-size-small .arco-react-steps-item-active .arco-react-steps-item-title{margin-top:-1px}.arco-react-steps-mode-dot.arco-react-steps-vertical .arco-react-steps-item-description{margin-top:4px}.arco-react-steps-mode-dot.arco-react-steps-vertical .arco-react-steps-item:not(:last-child) .arco-react-steps-item-tail{position:absolute;width:1px;transform:translate(-50%);top:20px;bottom:-4px;left:4px;background-color:transparent;box-sizing:border-box;padding:0;height:unset}.arco-react-steps-mode-dot.arco-react-steps-vertical .arco-react-steps-item:not(:last-child) .arco-react-steps-item-tail:after{content:\"\";display:block;width:100%;height:100%;background-color:var(--color-neutral-3)}.arco-react-steps-mode-dot.arco-react-steps-vertical .arco-react-steps-item:not(:last-child).arco-react-steps-item-process .arco-react-steps-item-tail:after{background-color:var(--color-neutral-3)}.arco-react-steps-mode-dot.arco-react-steps-vertical .arco-react-steps-item:not(:last-child).arco-react-steps-item-finish .arco-react-steps-item-tail:after{background-color:rgb(var(--primary-6))}.arco-react-steps-mode-dot.arco-react-steps-vertical .arco-react-steps-item:not(:last-child).arco-react-steps-item-next-error .arco-react-steps-item-tail:after{background-color:rgb(var(--danger-6))}.arco-react-steps-mode-dot.arco-react-steps-vertical .arco-react-steps-item .arco-react-steps-item-icon{margin-top:8px}.arco-react-steps-mode-dot.arco-react-steps-vertical .arco-react-steps-item-active .arco-react-steps-item-icon{margin-top:6px;margin-left:-1px}.arco-react-steps-mode-arrow .arco-react-steps-item{position:relative;display:flex;flex:1;white-space:nowrap;height:72px;align-items:center;overflow:visible}.arco-react-steps-mode-arrow .arco-react-steps-item:not(:last-child){margin-right:4px}.arco-react-steps-mode-arrow .arco-react-steps-item-wait{background-color:var(--color-fill-1)}.arco-react-steps-mode-arrow .arco-react-steps-item-process{background-color:rgb(var(--primary-6))}.arco-react-steps-mode-arrow .arco-react-steps-item-finish{background-color:var(--color-primary-light-1)}.arco-react-steps-mode-arrow .arco-react-steps-item-error{background-color:rgb(var(--danger-6))}.arco-react-steps-mode-arrow .arco-react-steps-item-content{display:inline-block;box-sizing:border-box}.arco-react-steps-mode-arrow .arco-react-steps-item:first-child .arco-react-steps-item-content{padding-left:16px}.arco-react-steps-mode-arrow .arco-react-steps-item:not(:first-child) .arco-react-steps-item-content{padding-left:52px}.arco-react-steps-mode-arrow .arco-react-steps-item-title{position:relative;display:inline-block;white-space:nowrap;font-size:16px}.arco-react-steps-mode-arrow .arco-react-steps-item-title:after{display:none!important}.arco-react-steps-mode-arrow .arco-react-steps-item-wait .arco-react-steps-item-title{color:var(--color-text-2)}.arco-react-steps-mode-arrow .arco-react-steps-item-process .arco-react-steps-item-title{color:var(--color-white)}.arco-react-steps-mode-arrow .arco-react-steps-item-finish .arco-react-steps-item-title{color:var(--color-text-1)}.arco-react-steps-mode-arrow .arco-react-steps-item-error .arco-react-steps-item-title{color:var(--color-white)}.arco-react-steps-mode-arrow .arco-react-steps-item-active .arco-react-steps-item-title{font-weight:500}.arco-react-steps-mode-arrow .arco-react-steps-item-description{white-space:nowrap;font-size:12px;margin-top:0;max-width:none}.arco-react-steps-mode-arrow .arco-react-steps-item-wait .arco-react-steps-item-description{color:var(--color-text-3)}.arco-react-steps-mode-arrow .arco-react-steps-item-process .arco-react-steps-item-description{color:var(--color-white)}.arco-react-steps-mode-arrow .arco-react-steps-item-finish .arco-react-steps-item-description{color:var(--color-text-3)}.arco-react-steps-mode-arrow .arco-react-steps-item-error .arco-react-steps-item-description{color:var(--color-white)}.arco-react-steps-mode-arrow .arco-react-steps-item:not(:first-child):before{content:\"\";display:block;position:absolute;width:0;height:0;border-top:36px solid transparent;border-bottom:36px solid transparent;border-left:36px solid var(--color-bg-2);left:0;top:0;z-index:1}.arco-react-steps-mode-arrow .arco-react-steps-item:not(:last-child):after{content:\"\";display:block;position:absolute;width:0;height:0;border-top:36px solid transparent;border-bottom:36px solid transparent;right:-36px;top:0;z-index:2;clear:both}.arco-react-steps-mode-arrow .arco-react-steps-item:not(:last-child).arco-react-steps-item-wait:after{border-left:36px solid var(--color-fill-1)}.arco-react-steps-mode-arrow .arco-react-steps-item:not(:last-child).arco-react-steps-item-process:after{border-left:36px solid rgb(var(--primary-6))}.arco-react-steps-mode-arrow .arco-react-steps-item:not(:last-child).arco-react-steps-item-error:after{border-left:36px solid rgb(var(--danger-6))}.arco-react-steps-mode-arrow .arco-react-steps-item:not(:last-child).arco-react-steps-item-finish:after{border-left:36px solid var(--color-primary-light-1)}.arco-react-steps-mode-arrow.arco-react-steps-size-small .arco-react-steps-item{height:40px}.arco-react-steps-mode-arrow.arco-react-steps-size-small .arco-react-steps-item-title{font-size:14px}.arco-react-steps-mode-arrow.arco-react-steps-size-small .arco-react-steps-item-description{display:none}.arco-react-steps-mode-arrow.arco-react-steps-size-small .arco-react-steps-item:not(:first-child):before{border-top:20px solid transparent;border-bottom:20px solid transparent;border-left:20px solid var(--color-bg-2)}.arco-react-steps-mode-arrow.arco-react-steps-size-small .arco-react-steps-item:not(:last-child):after{right:-20px;border-top:20px solid transparent;border-bottom:20px solid transparent;border-left:20px solid var(--color-fill-1)}.arco-react-steps-mode-arrow.arco-react-steps-size-small .arco-react-steps-item:first-child .arco-react-steps-item-content{padding-left:20px}.arco-react-steps-mode-arrow.arco-react-steps-size-small .arco-react-steps-item:not(:first-child) .arco-react-steps-item-content{padding-left:40px}.arco-react-steps-mode-arrow.arco-react-steps-size-small .arco-react-steps-item-error:not(:last-child):after{border-left:20px solid rgb(var(--danger-6))}.arco-react-steps-mode-arrow.arco-react-steps-size-small .arco-react-steps-item:not(:last-child).arco-react-steps-item-wait:after{border-left:20px solid var(--color-fill-1)}.arco-react-steps-mode-arrow.arco-react-steps-size-small .arco-react-steps-item:not(:last-child).arco-react-steps-item-process:after{border-left:20px solid rgb(var(--primary-6))}.arco-react-steps-mode-arrow.arco-react-steps-size-small .arco-react-steps-item:not(:last-child).arco-react-steps-item-finish:after{border-left:20px solid var(--color-primary-light-1)}.arco-react-steps-mode-navigation.arco-react-steps-label-horizontal .arco-react-steps-item:not(:last-child) .arco-react-steps-item-title:after{display:none}.arco-react-steps-mode-navigation .arco-react-steps-item{padding-left:20px;padding-right:10px;margin-right:32px}.arco-react-steps-mode-navigation .arco-react-steps-item:last-child{flex:1}.arco-react-steps-mode-navigation .arco-react-steps-item-content{margin-bottom:20px}.arco-react-steps-mode-navigation .arco-react-steps-item-description{padding-right:20px}.arco-react-steps-mode-navigation .arco-react-steps-item-active:after{content:\"\";position:absolute;display:block;height:2px;left:0;right:30px;bottom:0;background-color:rgb(var(--primary-6))}.arco-react-steps-mode-navigation .arco-react-steps-item-active:last-child:after{width:100%}.arco-react-steps-mode-navigation .arco-react-steps-item:not(:last-child) .arco-react-steps-item-content:after{content:\"\";position:absolute;top:10px;right:10px;display:inline-block;width:6px;height:6px;border:2px solid var(--color-text-4);background-color:var(--color-bg-2);border-bottom:none;border-left:none;transform:rotate(45deg)}.arco-react-steps{display:flex}.arco-react-steps-change-onclick .arco-react-steps-item-title,.arco-react-steps-change-onclick .arco-react-steps-item-description{transition:all .1s cubic-bezier(0,0,1,1)}.arco-react-steps-change-onclick .arco-react-steps-item:not(.arco-react-steps-item-active):not(.arco-react-steps-item-disabled){cursor:pointer}.arco-react-steps-change-onclick .arco-react-steps-item:not(.arco-react-steps-item-active):not(.arco-react-steps-item-disabled):hover .arco-react-steps-item-content .arco-react-steps-item-title,.arco-react-steps-change-onclick .arco-react-steps-item:not(.arco-react-steps-item-active):not(.arco-react-steps-item-disabled):hover .arco-react-steps-item-content .arco-react-steps-item-description{color:rgb(var(--primary-6))}.arco-react-steps-lineless .arco-react-steps-item-title:after{display:none!important}.arco-react-steps-vertical{flex-direction:column}.arco-react-steps-vertical .arco-react-steps-item:not(:last-child){min-height:90px}.arco-react-steps-vertical .arco-react-steps-item-title:after{display:none!important}.arco-react-steps-vertical .arco-react-steps-item-description{max-width:none}.arco-react-steps-label-vertical .arco-react-steps-item-content{display:block;text-align:center;width:140px}.arco-react-steps-label-vertical .arco-react-steps-item-description{max-width:none}.switchSlideText-enter,.switchSlideText-appear{left:-100%!important}.switchSlideText-enter-active,.switchSlideText-appear-active{left:8px!important;transition:left .2s cubic-bezier(.34,.69,.1,1)}.switchSlideText-exit{left:100%!important}.switchSlideText-exit-active{left:26px!important;transition:left .2s cubic-bezier(.34,.69,.1,1)}.arco-react-switch{position:relative;outline:none;height:24px;line-height:24px;min-width:40px;background-color:var(--color-fill-4);border-radius:12px;border:none;cursor:pointer;transition:background-color .2s cubic-bezier(.34,.69,.1,1);padding:0;box-sizing:border-box;vertical-align:middle;overflow:hidden}.arco-react-switch-dot{position:absolute;display:flex;align-items:center;justify-content:center;top:4px;left:4px;width:16px;height:16px;border-radius:50%;background-color:var(--color-bg-white);color:var(--color-neutral-3);font-size:12px;transition:all .2s cubic-bezier(.34,.69,.1,1)}.arco-react-switch-checked{background-color:rgb(var(--primary-6))}.arco-react-switch-checked .arco-react-switch-dot{color:rgb(var(--primary-6));left:100%;transform:translate(-100%);margin-left:-4px}.arco-react-switch[disabled] .arco-react-switch-dot{color:var(--color-fill-2)}.arco-react-switch[disabled].arco-react-switch-checked .arco-react-switch-dot{color:var(--color-primary-light-3)}.arco-react-switch-text-holder{opacity:0;font-size:12px;margin:0 8px 0 26px}.arco-react-switch-text{position:absolute;color:var(--color-white);font-size:12px;top:0;left:26px}.arco-react-switch-checked .arco-react-switch-text-holder{margin:0 26px 0 8px}.arco-react-switch-checked .arco-react-switch-text{left:8px;color:var(--color-white)}.arco-react-switch[disabled]{cursor:not-allowed;background-color:var(--color-fill-2)}.arco-react-switch[disabled] .arco-react-switch-text{color:var(--color-white)}.arco-react-switch[disabled].arco-react-switch-checked{background-color:var(--color-primary-light-3)}.arco-react-switch[disabled].arco-react-switch-checked .arco-react-switch-text{color:var(--color-white)}.arco-react-switch-loading{background-color:var(--color-fill-2)}.arco-react-switch-loading .arco-react-switch-dot{color:var(--color-neutral-3)}.arco-react-switch-loading .arco-react-switch-text{color:var(--color-white)}.arco-react-switch-loading.arco-react-switch-checked{background-color:var(--color-primary-light-3)}.arco-react-switch-loading.arco-react-switch-checked .arco-react-switch-dot{color:var(--color-primary-light-3)}.arco-react-switch-loading.arco-react-switch-checked .arco-react-switch-text{color:var(--color-primary-light-1)}.arco-react-switch-small{height:16px;line-height:16px;min-width:28px}.arco-react-switch-small.arco-react-switch-checked{padding-left:-2px}.arco-react-switch-small .arco-react-switch-dot{top:2px;left:2px;width:12px;height:12px;border-radius:8px}.arco-react-switch-small .arco-react-switch-dot-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.66667)}.arco-react-switch-small.arco-react-switch-checked .arco-react-switch-dot{left:100%;margin-left:-2px}.arco-react-switch-type-round{border-radius:var(--border-radius-small);min-width:40px}.arco-react-switch-type-round .arco-react-switch-dot{border-radius:2px}.arco-react-switch-type-round.arco-react-switch-small{border-radius:2px;height:16px;line-height:16px;min-width:28px}.arco-react-switch-type-round.arco-react-switch-small .arco-react-switch-dot{border-radius:1px}.arco-react-switch-type-line{min-width:36px;background-color:transparent;overflow:unset}.arco-react-switch-type-line:after{content:\"\";display:block;width:100%;border-radius:3px;height:6px;background-color:var(--color-fill-4);transition:background-color .2s cubic-bezier(.34,.69,.1,1)}.arco-react-switch-type-line .arco-react-switch-dot{top:2px;left:0;border-radius:10px;width:20px;height:20px;background-color:var(--color-bg-white);box-shadow:0 1px 3px var(--color-neutral-6)}.arco-react-switch-type-line.arco-react-switch-checked{background-color:transparent}.arco-react-switch-type-line.arco-react-switch-checked:after{background-color:rgb(var(--primary-6))}.arco-react-switch-type-line.arco-react-switch-checked .arco-react-switch-dot{left:100%;margin-left:0}.arco-react-switch-type-line[disabled]{cursor:not-allowed;background-color:transparent}.arco-react-switch-type-line[disabled]:after{background-color:var(--color-fill-2)}.arco-react-switch-type-line[disabled].arco-react-switch-checked{background-color:transparent}.arco-react-switch-type-line[disabled].arco-react-switch-checked:after{background-color:var(--color-primary-light-3)}.arco-react-switch-type-line.arco-react-switch-loading{background-color:transparent}.arco-react-switch-type-line.arco-react-switch-loading:after{background-color:var(--color-fill-2)}.arco-react-switch-type-line.arco-react-switch-loading.arco-react-switch-checked{background-color:transparent}.arco-react-switch-type-line.arco-react-switch-loading.arco-react-switch-checked:after{background-color:var(--color-primary-light-3)}.arco-react-switch-type-line.arco-react-switch-small{height:16px;line-height:16px;min-width:28px}.arco-react-switch-type-line.arco-react-switch-small.arco-react-switch-checked{padding-left:0}.arco-react-switch-type-line.arco-react-switch-small .arco-react-switch-dot{top:0px;width:16px;height:16px;border-radius:8px}.arco-react-switch-type-line.arco-react-switch-small .arco-react-switch-dot-icon{transform:translate(-50%,-50%) scale(1)}.arco-react-table-filters-popup{min-width:100px;background:var(--color-bg-5);box-shadow:0 2px 5px #0000001a;border:1px solid var(--color-neutral-3);border-radius:var(--border-radius-medium);box-sizing:border-box}.arco-react-table-filters-list{max-height:200px;overflow-y:auto;padding:4px 0}.arco-react-table-filters-item{width:100%;height:32px;line-height:32px;font-size:14px;overflow:hidden}.arco-react-table-filters-item .arco-react-checkbox,.arco-react-table-filters-item .arco-react-radio{width:100%;padding:0 12px;white-space:nowrap}.arco-react-table-filters-btn{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--color-neutral-3);padding:0 12px;height:38px;line-height:38px;box-sizing:border-box;overflow:hidden}.arco-react-table-th-item{padding:9px 16px}.arco-react-table-th-item.arco-react-table-col-has-filter{padding-right:28px}.arco-react-table-col-has-sorter.arco-react-table-col-has-filter{padding-right:0}.arco-react-table-col-has-sorter.arco-react-table-col-has-filter .arco-react-table-cell-with-sorter{padding-right:28px}.arco-react-table-col-has-sorter{padding:0}.arco-react-table-col-has-sorter .arco-react-table-cell-with-sorter{padding:9px 16px;cursor:pointer}.arco-react-table-td{padding:9px 16px;font-size:14px}.arco-react-table-th{font-size:14px}.arco-react-table-footer{padding:9px 16px}.arco-react-table-expand-fixed-row{margin:-9px -16px;padding:9px 16px}.arco-react-table-expand-content .arco-react-table-td .arco-react-table{margin:-9px -16px -10px}.arco-react-table-editable-row .arco-react-table-cell-wrap-value{padding:9px 16px}.arco-react-table-size-middle .arco-react-table-th-item{padding:7px 16px}.arco-react-table-size-middle .arco-react-table-th-item.arco-react-table-col-has-filter{padding-right:28px}.arco-react-table-size-middle .arco-react-table-col-has-sorter.arco-react-table-col-has-filter{padding-right:0}.arco-react-table-size-middle .arco-react-table-col-has-sorter.arco-react-table-col-has-filter .arco-react-table-cell-with-sorter{padding-right:28px}.arco-react-table-size-middle .arco-react-table-col-has-sorter{padding:0}.arco-react-table-size-middle .arco-react-table-col-has-sorter .arco-react-table-cell-with-sorter{padding:7px 16px;cursor:pointer}.arco-react-table-size-middle .arco-react-table-td{padding:7px 16px;font-size:14px}.arco-react-table-size-middle .arco-react-table-th{font-size:14px}.arco-react-table-size-middle .arco-react-table-footer{padding:7px 16px}.arco-react-table-size-middle .arco-react-table-expand-fixed-row{margin:-7px -16px;padding:7px 16px}.arco-react-table-size-middle .arco-react-table-expand-content .arco-react-table-td .arco-react-table{margin:-7px -16px -8px}.arco-react-table-size-middle .arco-react-table-editable-row .arco-react-table-cell-wrap-value{padding:7px 16px}.arco-react-table-size-small .arco-react-table-th-item{padding:5px 16px}.arco-react-table-size-small .arco-react-table-th-item.arco-react-table-col-has-filter{padding-right:28px}.arco-react-table-size-small .arco-react-table-col-has-sorter.arco-react-table-col-has-filter{padding-right:0}.arco-react-table-size-small .arco-react-table-col-has-sorter.arco-react-table-col-has-filter .arco-react-table-cell-with-sorter{padding-right:28px}.arco-react-table-size-small .arco-react-table-col-has-sorter{padding:0}.arco-react-table-size-small .arco-react-table-col-has-sorter .arco-react-table-cell-with-sorter{padding:5px 16px;cursor:pointer}.arco-react-table-size-small .arco-react-table-td{padding:5px 16px;font-size:14px}.arco-react-table-size-small .arco-react-table-th{font-size:14px}.arco-react-table-size-small .arco-react-table-footer{padding:5px 16px}.arco-react-table-size-small .arco-react-table-expand-fixed-row{margin:-5px -16px;padding:5px 16px}.arco-react-table-size-small .arco-react-table-expand-content .arco-react-table-td .arco-react-table{margin:-5px -16px -6px}.arco-react-table-size-small .arco-react-table-editable-row .arco-react-table-cell-wrap-value{padding:5px 16px}.arco-react-table-size-mini .arco-react-table-th-item{padding:2px 16px}.arco-react-table-size-mini .arco-react-table-th-item.arco-react-table-col-has-filter{padding-right:28px}.arco-react-table-size-mini .arco-react-table-col-has-sorter.arco-react-table-col-has-filter{padding-right:0}.arco-react-table-size-mini .arco-react-table-col-has-sorter.arco-react-table-col-has-filter .arco-react-table-cell-with-sorter{padding-right:28px}.arco-react-table-size-mini .arco-react-table-col-has-sorter{padding:0}.arco-react-table-size-mini .arco-react-table-col-has-sorter .arco-react-table-cell-with-sorter{padding:2px 16px;cursor:pointer}.arco-react-table-size-mini .arco-react-table-td{padding:2px 16px;font-size:12px}.arco-react-table-size-mini .arco-react-table-th{font-size:12px}.arco-react-table-size-mini .arco-react-table-footer{padding:2px 16px}.arco-react-table-size-mini .arco-react-table-expand-fixed-row{margin:-2px -16px;padding:2px 16px}.arco-react-table-size-mini .arco-react-table-expand-content .arco-react-table-td .arco-react-table{margin:-2px -16px -3px}.arco-react-table-size-mini .arco-react-table-editable-row .arco-react-table-cell-wrap-value{padding:2px 16px}.arco-react-table{position:relative}.arco-react-table .arco-react-spin{display:block}.arco-react-table>.arco-react-spin>.arco-react-spin-children:after{z-index:2}.arco-react-table-footer{border-radius:0 0 var(--border-radius-medium) var(--border-radius-medium)}.arco-react-table-scroll-position-right .arco-react-table-col-fixed-left-last:after,.arco-react-table-scroll-position-middle .arco-react-table-col-fixed-left-last:after{box-shadow:inset 6px 0 8px -3px #00000026}.arco-react-table-scroll-position-left .arco-react-table-col-fixed-right-first:after,.arco-react-table-scroll-position-middle .arco-react-table-col-fixed-right-first:after{box-shadow:inset -6px 0 8px -3px #00000026}.arco-react-table:not(.arco-react-table-has-fixed-col-left).arco-react-table-scroll-position-right .arco-react-table-content-scroll:before,.arco-react-table:not(.arco-react-table-has-fixed-col-left).arco-react-table-scroll-position-middle .arco-react-table-content-scroll:before{box-shadow:inset 6px 0 8px -3px #00000026}.arco-react-table:not(.arco-react-table-has-fixed-col-right).arco-react-table-scroll-position-left .arco-react-table-content-scroll:after,.arco-react-table:not(.arco-react-table-has-fixed-col-right).arco-react-table-scroll-position-middle .arco-react-table-content-scroll:after{box-shadow:inset -6px 0 8px -3px #00000026}.arco-react-table-layout-fixed .arco-react-table-content-inner{overflow-x:auto;overflow-y:hidden}.arco-react-table-layout-fixed table{table-layout:fixed}.arco-react-table thead>.arco-react-table-tr>.arco-react-table-th{border-bottom:1px solid var(--color-neutral-3)}.arco-react-table thead>.arco-react-table-tr:not(:last-child)>.arco-react-table-th[colspan]{border-bottom:0}.arco-react-table table{min-width:100%;width:100%;margin:0;border-spacing:0;border-collapse:separate}.arco-react-table .arco-react-table-th{background-color:var(--color-neutral-2)}.arco-react-table .arco-react-table-td{background-color:var(--color-bg-2)}.arco-react-table .arco-react-table-th{box-sizing:border-box;text-align:left;color:rgb(var(--gray-10));line-height:1.5715;font-weight:500}.arco-react-table .arco-react-table-th[colspan]{text-align:center}.arco-react-table .arco-react-table-th:first-child{border-radius:var(--border-radius-medium) 0 0 0}.arco-react-table .arco-react-table-th:last-child{border-radius:0 var(--border-radius-medium) 0 0}.arco-react-table .arco-react-table-td{box-sizing:border-box;text-align:left;color:rgb(var(--gray-10));border-bottom:1px solid var(--color-neutral-3);line-height:1.5715}.arco-react-table-th.arco-react-table-col-sorted{background-color:var(--color-neutral-3)}.arco-react-table-td.arco-react-table-col-sorted{background-color:var(--color-fill-1)}.arco-react-table-col-fixed-left,.arco-react-table-col-fixed-right{position:sticky;z-index:1}.arco-react-table-col-fixed-left-last:after,.arco-react-table-col-fixed-right-first:after{content:\"\";position:absolute;top:0;left:0;bottom:-1px;width:10px;pointer-events:none;transform:translate(-100%);transition:box-shadow .1s cubic-bezier(0,0,1,1);box-shadow:none}.arco-react-table-col-fixed-left-last:after{left:unset;transform:translate(100%);right:0}.arco-react-table-cell-text-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.arco-react-table-editable-row .arco-react-table-cell-wrap-value{border:1px solid var(--color-white);border-radius:var(--border-radius-medium);transition:all .1s cubic-bezier(0,0,1,1);cursor:pointer}.arco-react-table-editable-row:hover .arco-react-table-cell-wrap-value{border:1px solid var(--color-neutral-3)}.arco-react-table-cell{word-break:break-all}.arco-react-table-cell-indent{height:1px;float:left}.arco-react-table-expand-icon-cell button{width:14px;height:14px;line-height:14px;border-radius:2px;display:inline-flex;justify-content:center;align-items:center;background-color:var(--color-neutral-3);color:var(--color-text-2);font-size:12px;outline:none;transition:background-color .1s cubic-bezier(0,0,1,1);padding:0;cursor:pointer;border:1px solid transparent;box-sizing:border-box}.arco-react-table-expand-icon-cell button:hover{background-color:var(--color-neutral-4);color:var(--color-text-1);border-color:transparent}.arco-react-table-cell-expand-icon{float:left}.arco-react-table-cell-expand-icon button{width:14px;height:14px;line-height:14px;border-radius:2px;display:inline-flex;justify-content:center;align-items:center;background-color:var(--color-neutral-3);color:var(--color-text-2);font-size:12px;outline:none;transition:background-color .1s cubic-bezier(0,0,1,1);padding:0;cursor:pointer;border:1px solid transparent;box-sizing:border-box;margin-right:4px}.arco-react-table-cell-expand-icon button:hover{background-color:var(--color-neutral-4);color:var(--color-text-1);border-color:transparent}.arco-react-table-cell-expand-icon-hidden{display:inline-block;width:14px;height:14px;margin-right:4px}.arco-react-table-expand-content .arco-react-table-td{background-color:var(--color-fill-1)}.arco-react-table-expand-fixed-row{position:sticky;left:0;box-sizing:border-box}.arco-react-table-expand-content .arco-react-table-td .arco-react-table .arco-react-table-container{border:none}.arco-react-table-expand-content .arco-react-table-td .arco-react-table .arco-react-table-th{border-bottom:1px solid var(--color-neutral-3)}.arco-react-table-expand-content .arco-react-table-td .arco-react-table .arco-react-table-th,.arco-react-table-expand-content .arco-react-table-td .arco-react-table .arco-react-table-td{background-color:transparent}.arco-react-table-expand-content .arco-react-table-td .arco-react-table .arco-react-table-pagination{margin-bottom:12px}.arco-react-table-th.arco-react-table-operation .arco-react-table-th-item,.arco-react-table-td.arco-react-table-operation{text-align:center;padding:0}.arco-react-table-radio,.arco-react-table-checkbox{justify-content:center}.arco-react-table-checkbox .arco-react-checkbox,.arco-react-table-radio .arco-react-radio{padding-left:0}.arco-react-table-selection-col{width:40px;min-width:40px;max-width:40px}.arco-react-table-expand-icon-col{width:40px;min-width:40px;max-width:40px}.arco-react-table-radio .arco-react-table-th-item,.arco-react-table-checkbox .arco-react-table-th-item,div.arco-react-table-selection-col .arco-react-table-th-item,div.arco-react-table-expand-icon-col .arco-react-table-th-item{padding:0}.arco-react-table-th-item{position:relative;transition:background-color .1s cubic-bezier(0,0,1,1)}.arco-react-table-cell-mouseenter{background-color:rgba(var(--gray-4),.5)}.arco-react-table-cell-next-ascend .arco-react-table-sorter-icon .arco-react-icon-caret-up{color:var(--color-neutral-6)}.arco-react-table-cell-next-descend .arco-react-table-sorter-icon .arco-react-icon-caret-down{color:var(--color-neutral-6)}.arco-react-table-sorter{display:inline-block;margin-left:8px;vertical-align:-3px}.arco-react-table-sorter.arco-react-table-sorter-direction-one{vertical-align:0}.arco-react-table-sorter-icon{position:relative;height:8px;line-height:8px;width:12px;overflow:hidden}.arco-react-table-sorter-icon .arco-react-icon-caret-up,.arco-react-table-sorter-icon .arco-react-icon-caret-down{position:absolute;top:50%;font-size:12px;color:var(--color-neutral-5);transition:all .1s cubic-bezier(0,0,1,1)}.arco-react-table-sorter-icon .arco-react-icon-caret-up{top:-2px;left:0}.arco-react-table-sorter-icon .arco-react-icon-caret-down{top:-3px;left:0}.arco-react-table-sorter-icon.arco-react-table-sorter-icon-active svg{color:rgb(var(--primary-6))}.arco-react-table-filters{position:absolute;display:flex;justify-content:center;align-items:center;top:0;right:0;width:24px;height:100%;background-color:transparent;line-height:1;vertical-align:0;cursor:pointer;transition:all .1s cubic-bezier(0,0,1,1)}.arco-react-table-filters:hover,.arco-react-table-filters-open{background-color:var(--color-neutral-4)}.arco-react-table-filters svg{color:var(--color-text-2);font-size:16px;transition:all .1s cubic-bezier(0,0,1,1)}.arco-react-table-filters-active svg{color:rgb(var(--primary-6))}.arco-react-table-container{position:relative;border-radius:var(--border-radius-medium) var(--border-radius-medium) 0 0}.arco-react-table-header{border-radius:var(--border-radius-medium) var(--border-radius-medium) 0 0}.arco-react-table-content-scroll{width:100%;overflow:hidden}.arco-react-table-content-scroll .arco-react-table-content-inner{width:auto}.arco-react-table-content-scroll:before,.arco-react-table-content-scroll:after{content:\"\";position:absolute;top:-1px;bottom:-1px;height:100%;width:10px;transition:box-shadow .1s cubic-bezier(0,0,1,1);box-shadow:none;pointer-events:none;z-index:1}.arco-react-table-content-scroll:before{border-top-left-radius:var(--border-radius-medium);left:0}.arco-react-table-content-scroll:after{border-top-right-radius:var(--border-radius-medium);right:0}.arco-react-table-header{scrollbar-color:transparent transparent;background-color:var(--color-neutral-2);overflow-x:scroll;overflow-y:hidden}.arco-react-table-header::-webkit-scrollbar{background-color:transparent}.arco-react-table-body{position:relative;overflow:auto;background-color:var(--color-bg-2)}.arco-react-table-no-data{padding:20px;line-height:40px;box-sizing:border-box;font-size:14px;text-align:center}.arco-react-table-empty-row .arco-react-table-td{border-bottom:0}.arco-react-table-border .arco-react-table-container{border-right:1px solid var(--color-neutral-3);border-top:1px solid var(--color-neutral-3)}.arco-react-table-border .arco-react-table-container .arco-react-table-th:first-child,.arco-react-table-border .arco-react-table-container .arco-react-table-td:first-child{border-left:1px solid var(--color-neutral-3)}.arco-react-table-border .arco-react-table-container .arco-react-table-expand-fixed-row{border-left:1px solid var(--color-neutral-3)}.arco-react-table-border .arco-react-table-container:before{content:\"\";position:absolute;background-color:var(--color-neutral-3);width:100%;height:1px;left:0;bottom:0;z-index:2}.arco-react-table-border .arco-react-table-footer{border:1px solid var(--color-neutral-3);border-top:0}.arco-react-table-border-cell .arco-react-table-th,.arco-react-table-border-cell .arco-react-table-td{border-left:1px solid var(--color-neutral-3)}.arco-react-table-border-cell thead>.arco-react-table-tr:not(:last-child)>.arco-react-table-th[colspan]{border-bottom:1px solid var(--color-neutral-3)}.arco-react-table-border-header-cell .arco-react-table-th{border-left:1px solid var(--color-neutral-3)}.arco-react-table-border-header-cell thead>.arco-react-table-tr:not(:last-child)>.arco-react-table-th[colspan]{border-bottom:1px solid var(--color-neutral-3)}.arco-react-table-border-body-cell .arco-react-table-td{border-left:1px solid var(--color-neutral-3)}.arco-react-table-border-cell:not(.arco-react-table-border) .arco-react-table-th:first-child,.arco-react-table-border-cell:not(.arco-react-table-border) .arco-react-table-td:first-child{border-left:0}.arco-react-table-stripe .arco-react-table-tr:nth-child(even) .arco-react-table-td{background-color:var(--color-fill-1)}.arco-react-table-hover .arco-react-table-tr:not(.arco-react-table-empty-row):hover .arco-react-table-td:not(.arco-react-table-col-fixed-left):not(.arco-react-table-col-fixed-right){background-color:var(--color-fill-1)}.arco-react-table-hover .arco-react-table-tr:not(.arco-react-table-empty-row):hover .arco-react-table-td.arco-react-table-col-fixed-left:before,.arco-react-table-hover .arco-react-table-tr:not(.arco-react-table-empty-row):hover .arco-react-table-td.arco-react-table-col-fixed-right:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--color-fill-1);z-index:-1}.arco-react-table-hover .arco-react-table-expand-content:not(.arco-react-table-empty-row):hover .arco-react-table-td:not(.arco-react-table-col-fixed-left):not(.arco-react-table-col-fixed-right){background-color:var(--color-fill-1)}.arco-react-table-expand-content .arco-react-table-td .arco-react-table-hover .arco-react-table-tr:not(.arco-react-table-empty-row) .arco-react-table-td:not(.arco-react-table-col-fixed-left):not(.arco-react-table-col-fixed-right){background-color:transparent}.arco-react-table-expand-content .arco-react-table-td .arco-react-table-hover .arco-react-table-tr:not(.arco-react-table-empty-row) .arco-react-table-td.arco-react-table-col-fixed-left:before,.arco-react-table-expand-content .arco-react-table-td .arco-react-table-hover .arco-react-table-tr:not(.arco-react-table-empty-row) .arco-react-table-td.arco-react-table-col-fixed-right:before{background-color:transparent}.arco-react-table-type-radio .arco-react-table-row-checked.arco-react-table-tr .arco-react-table-td{background-color:var(--color-fill-1)}.arco-react-table-virtualized table{table-layout:fixed}.arco-react-table-virtualized div.arco-react-table-body div.arco-react-table-tr{display:flex}.arco-react-table-virtualized div.arco-react-table-body div.arco-react-table-td{display:flex;align-items:center;flex:1}div.arco-react-table-tfoot{width:100%;overflow-x:auto;background-color:var(--color-neutral-2);scrollbar-color:transparent transparent;position:relative;z-index:1;box-shadow:0 -1px 0 var(--color-neutral-3)}div.arco-react-table-tfoot::-webkit-scrollbar{background-color:transparent}.arco-react-table-tfoot .arco-react-table-td{background-color:var(--color-neutral-2)}.arco-react-table-pagination{display:flex;justify-content:flex-end}.arco-react-table-pagination-left{justify-content:flex-start}.arco-react-table-pagination-center{justify-content:center}.arco-react-table-pagination-top{margin-bottom:12px;margin-top:0}.arco-react-table-pagination .arco-react-pagination{margin-top:12px}.arco-react-icon-hover.arco-react-tabs-icon-hover:before{width:16px;height:16px}.arco-react-tabs .arco-react-tabs-icon-hover{font-size:12px;color:var(--color-text-2);user-select:none}.arco-react-tabs-dropdown-icon{font-size:12px;margin-left:6px;user-select:none}.arco-react-tabs-close-icon{margin-left:8px;user-select:none}.arco-react-tabs-add-icon{font-size:12px;display:inline-flex;align-items:center;user-select:none;justify-content:center;padding:0 8px}.arco-react-tabs-add{position:relative}.arco-react-tabs-left-icon{margin-left:10px;margin-right:6px}.arco-react-tabs-right-icon{margin-right:10px;margin-left:6px}.arco-react-tabs-up-icon{margin-bottom:10px}.arco-react-tabs-down-icon{margin-top:10px}.arco-react-tabs-nav-icon-disabled{cursor:not-allowed;color:var(--color-text-4)}.arco-react-tabs{position:relative;overflow:hidden}.arco-react-tabs-header-nav{position:relative}.arco-react-tabs-header-nav:before{content:\"\";clear:both;position:absolute;bottom:0;left:0;right:0;height:1px;background-color:var(--color-neutral-3);display:block}.arco-react-tabs-header-wrapper{display:flex;overflow:hidden;flex:1}.arco-react-tabs-header{position:relative;display:inline-block;transition:transform .2s cubic-bezier(.34,.69,.1,1);white-space:nowrap}.arco-react-tabs-header-extra{width:auto;display:flex;align-items:center;line-height:32px}.arco-react-tabs-header-extra .arco-react-tabs-add-icon{padding-left:0}.arco-react-tabs-header-title{box-sizing:border-box;font-size:14px;cursor:pointer;color:var(--color-text-2);transition:color .2s cubic-bezier(0,0,1,1);display:inline-flex;align-items:center;line-height:1.5715;padding:4px 0}.arco-react-tabs-header-title-text{display:inline-block}.arco-react-tabs-header-title:hover{color:var(--color-text-2);font-weight:400}.arco-react-tabs-header-title-disabled,.arco-react-tabs-header-title-disabled:hover{color:var(--color-text-4);cursor:not-allowed}.arco-react-tabs-header-title-active,.arco-react-tabs-header-title-active:hover{color:rgb(var(--primary-6));font-weight:500}.arco-react-tabs-header-title-active.arco-react-tabs-header-title-disabled,.arco-react-tabs-header-title-active:hover.arco-react-tabs-header-title-disabled{color:var(--color-primary-light-3)}.arco-react-tabs-header-ink{position:absolute;bottom:0;right:initial;top:initial;height:2px;background-color:rgb(var(--primary-6));transition:left .2s cubic-bezier(.34,.69,.1,1),width .2s cubic-bezier(.34,.69,.1,1)}.arco-react-tabs-header-ink.arco-react-tabs-header-ink-no-animation{transition:none}.arco-react-tabs-header-ink-disabled{background-color:var(--color-primary-light-3)}.arco-react-tabs-header-nav-line .arco-react-tabs-header-extra{line-height:40px}.arco-react-tabs-header-nav-line .arco-react-tabs-header-title{line-height:1.5715;margin:0 16px;padding:8px 0}.arco-react-tabs-header-nav-line .arco-react-tabs-header-title-text{display:inline-block;position:relative;padding:1px 0}.arco-react-tabs-header-nav-line .arco-react-tabs-header-title-text:before{content:\"\";z-index:-1;opacity:1;transition:all .2s cubic-bezier(0,0,1,1);border-radius:var(--border-radius-small);position:absolute;top:0;bottom:0;left:-8px;right:-8px;background-color:transparent}.arco-react-tabs-header-nav-line .arco-react-tabs-header-title:hover .arco-react-tabs-header-title-text:before{background-color:var(--color-fill-2)}.arco-react-tabs-header-nav-line .arco-react-tabs-header-title-active .arco-react-tabs-header-title-text:before,.arco-react-tabs-header-nav-line .arco-react-tabs-header-title-active:hover .arco-react-tabs-header-title-text:before{background-color:transparent}.arco-react-tabs-header-nav-line .arco-react-tabs-header-title-disabled .arco-react-tabs-header-title-text:before,.arco-react-tabs-header-nav-line .arco-react-tabs-header-title-disabled:hover .arco-react-tabs-header-title-text:before{opacity:0}.arco-react-tabs-header-nav-line.arco-react-tabs-header-nav-horizontal>.arco-react-tabs-header-scroll .arco-react-tabs-header-title:first-of-type{margin-left:16px}.arco-react-tabs-header-nav-line.arco-react-tabs-header-nav-horizontal .arco-react-tabs-header-no-padding>.arco-react-tabs-header-title:first-of-type,.arco-react-tabs-header-nav-text.arco-react-tabs-header-nav-horizontal .arco-react-tabs-header-no-padding>.arco-react-tabs-header-title:first-of-type{margin-left:0}.arco-react-tabs-header-nav-card .arco-react-tabs-header-title,.arco-react-tabs-header-nav-card-gutter .arco-react-tabs-header-title{font-size:14px;border:1px solid var(--color-neutral-3);transition:padding .2s cubic-bezier(0,0,1,1),color .2s cubic-bezier(0,0,1,1);padding:4px 16px}.arco-react-tabs-header-nav-card .arco-react-tabs-header-title-editable,.arco-react-tabs-header-nav-card-gutter .arco-react-tabs-header-title-editable{padding-right:12px}.arco-react-tabs-header-nav-card .arco-react-tabs-header-title-editable:not(.arco-react-tabs-header-title-active):hover .arco-react-icon-hover:hover:before,.arco-react-tabs-header-nav-card-gutter .arco-react-tabs-header-title-editable:not(.arco-react-tabs-header-title-active):hover .arco-react-icon-hover:hover:before{background-color:var(--color-fill-4)}.arco-react-tabs-header-nav-card .arco-react-tabs-add-icon,.arco-react-tabs-header-nav-card-gutter .arco-react-tabs-add-icon{height:32px}.arco-react-tabs-header-nav-card .arco-react-tabs-header-title{border-right:none;background-color:transparent}.arco-react-tabs-header-nav-card .arco-react-tabs-header-title:last-child{border-right:1px solid var(--color-neutral-3);border-top-right-radius:var(--border-radius-small)}.arco-react-tabs-header-nav-card .arco-react-tabs-header-title:first-child{border-top-left-radius:var(--border-radius-small)}.arco-react-tabs-header-nav-card .arco-react-tabs-header-title:hover{background-color:var(--color-fill-3)}.arco-react-tabs-header-nav-card .arco-react-tabs-header-title-disabled,.arco-react-tabs-header-nav-card .arco-react-tabs-header-title-disabled:hover{background-color:transparent}.arco-react-tabs-header-nav-card .arco-react-tabs-header-title-active,.arco-react-tabs-header-nav-card .arco-react-tabs-header-title-active:hover{border-bottom-color:var(--color-bg-2);background-color:transparent}.arco-react-tabs-header-nav-card-gutter .arco-react-tabs-header-title{margin-left:4px;border-right:1px solid var(--color-neutral-3);background-color:var(--color-fill-1);border-radius:var(--border-radius-small) var(--border-radius-small) 0 0}.arco-react-tabs-header-nav-card-gutter .arco-react-tabs-header-title:hover{background-color:var(--color-fill-3)}.arco-react-tabs-header-nav-card-gutter .arco-react-tabs-header-title-disabled,.arco-react-tabs-header-nav-card-gutter .arco-react-tabs-header-title-disabled:hover{background-color:var(--color-fill-1)}.arco-react-tabs-header-nav-card-gutter .arco-react-tabs-header-title-active,.arco-react-tabs-header-nav-card-gutter .arco-react-tabs-header-title-active:hover{border-bottom-color:var(--color-bg-2);background-color:transparent}.arco-react-tabs-header-nav-card-gutter .arco-react-tabs-header-title:first-child{margin-left:0}.arco-react-tabs-header-nav-text:before{display:none}.arco-react-tabs-header-nav-text .arco-react-tabs-header-title{position:relative;line-height:1.5715;margin:0 9px;font-size:14px;padding:5px 0}.arco-react-tabs-header-nav-text .arco-react-tabs-header-title:not(:first-of-type):before{height:12px;position:absolute;width:2px;background-color:var(--color-fill-3);content:\"\";display:block;top:50%;transform:translateY(-50%);left:-9px}.arco-react-tabs-header-nav-text .arco-react-tabs-header-title-text{padding-left:8px;padding-right:8px;background-color:transparent}.arco-react-tabs-header-nav-text .arco-react-tabs-header-title-text:hover{background-color:var(--color-fill-2)}.arco-react-tabs-header-nav-text .arco-react-tabs-header-title-active .arco-react-tabs-header-title-text,.arco-react-tabs-header-nav-text .arco-react-tabs-header-title-active .arco-react-tabs-header-title-text:hover{background-color:transparent}.arco-react-tabs-header-nav-text .arco-react-tabs-header-title-disabled .arco-react-tabs-header-title-text,.arco-react-tabs-header-nav-text .arco-react-tabs-header-title-disabled .arco-react-tabs-header-title-text:hover{background-color:transparent}.arco-react-tabs-header-nav-text .arco-react-tabs-header-title-active.arco-react-tabs-header-nav-text .arco-react-tabs-header-title-disabled .arco-react-tabs-header-title-text,.arco-react-tabs-header-nav-text .arco-react-tabs-header-title-active.arco-react-tabs-header-nav-text .arco-react-tabs-header-title-disabled .arco-react-tabs-header-title-text:hover{background-color:var(--color-primary-light-3)}.arco-react-tabs-header-nav-rounded:before{display:none}.arco-react-tabs-header-nav-rounded .arco-react-tabs-header-title{padding:5px 16px;margin:0 6px;font-size:14px;background-color:transparent;border-radius:32px}.arco-react-tabs-header-nav-rounded .arco-react-tabs-header-title:hover{background-color:var(--color-fill-2)}.arco-react-tabs-header-nav-rounded .arco-react-tabs-header-title-disabled:hover{background-color:transparent}.arco-react-tabs-header-nav-rounded .arco-react-tabs-header-title-active,.arco-react-tabs-header-nav-rounded .arco-react-tabs-header-title-active:hover{background-color:var(--color-fill-2)}.arco-react-tabs-header-nav-capsule:before{display:none}.arco-react-tabs-header-nav-capsule .arco-react-tabs-header-wrapper{justify-content:flex-end}.arco-react-tabs-header-nav-capsule .arco-react-tabs-header{line-height:1;background-color:var(--color-fill-2);border-radius:var(--border-radius-small);padding:3px}.arco-react-tabs-header-nav-capsule .arco-react-tabs-header-title{line-height:26px;padding:0 12px;background-color:transparent;position:relative;font-size:14px;border-radius:var(--border-radius-small)}.arco-react-tabs-header-nav-capsule .arco-react-tabs-header-title:hover{background-color:var(--color-bg-2)}.arco-react-tabs-header-nav-capsule .arco-react-tabs-header-title-disabled:hover{background-color:unset}.arco-react-tabs-header-nav-capsule .arco-react-tabs-header-title-active,.arco-react-tabs-header-nav-capsule .arco-react-tabs-header-title-active:hover{background-color:var(--color-bg-2)}.arco-react-tabs-header-nav-capsule .arco-react-tabs-header-title-active:before,.arco-react-tabs-header-nav-capsule .arco-react-tabs-header-title-active:hover:before,.arco-react-tabs-header-nav-capsule .arco-react-tabs-header-title-active+.arco-react-tabs-header-title:before,.arco-react-tabs-header-nav-capsule .arco-react-tabs-header-title-active:hover+.arco-react-tabs-header-title:before{opacity:0}.arco-react-tabs-header-nav-capsule.arco-react-tabs-header-nav-horizontal .arco-react-tabs-header-title:not(:first-of-type){margin-left:3px}.arco-react-tabs-header-nav-capsule.arco-react-tabs-header-nav-horizontal .arco-react-tabs-header-title:not(:first-of-type):before{position:absolute;top:50%;left:-2px;transform:translateY(-50%);display:block;height:14px;width:1px;background-color:var(--color-fill-3);content:\"\";transition:all .2s cubic-bezier(0,0,1,1)}.arco-react-tabs-header-scroll{overflow:hidden;position:relative;display:flex;align-items:center}.arco-react-tabs-content{width:100%;overflow:hidden;padding-top:16px;box-sizing:border-box}.arco-react-tabs-content .arco-react-tabs-content-inner{display:flex;width:100%}.arco-react-tabs-content .arco-react-tabs-content-item{width:100%;overflow:hidden;height:0;flex-shrink:0}.arco-react-tabs-content .arco-react-tabs-content-item.arco-react-tabs-content-item-active{height:auto}.arco-react-tabs-card>.arco-react-tabs-content,.arco-react-tabs-card-gutter>.arco-react-tabs-content{border:1px solid var(--color-neutral-3);border-top:none}.arco-react-tabs-animation.arco-react-tabs-content-inner{transition:all .2s cubic-bezier(.34,.69,.1,1)}.arco-react-tabs-horizontal.arco-react-tabs-justify{display:flex;flex-direction:column;height:100%}.arco-react-tabs-horizontal.arco-react-tabs-justify .arco-react-tabs-content,.arco-react-tabs-horizontal.arco-react-tabs-justify .arco-react-tabs-content-inner,.arco-react-tabs-horizontal.arco-react-tabs-justify .arco-react-tabs-pane{height:100%}.arco-react-tabs-header-size-mini.arco-react-tabs-header-nav-line .arco-react-tabs-header-title{font-size:12px;padding-top:6px;padding-bottom:6px}.arco-react-tabs-header-size-mini.arco-react-tabs-header-nav-line .arco-react-tabs-header-extra{line-height:32px;font-size:12px}.arco-react-tabs-header-size-mini.arco-react-tabs-header-nav-card .arco-react-tabs-header-title,.arco-react-tabs-header-size-mini.arco-react-tabs-header-nav-card-gutter .arco-react-tabs-header-title{font-size:12px;padding-top:2px;padding-bottom:2px}.arco-react-tabs-header-size-mini.arco-react-tabs-header-nav-card .arco-react-tabs-header-extra,.arco-react-tabs-header-size-mini.arco-react-tabs-header-nav-card-gutter .arco-react-tabs-header-extra{line-height:24px;font-size:12px}.arco-react-tabs-header-size-mini.arco-react-tabs-header-nav-card .arco-react-tabs-add-icon,.arco-react-tabs-header-size-mini.arco-react-tabs-header-nav-card-gutter .arco-react-tabs-add-icon{height:24px}.arco-react-tabs-header-size-mini.arco-react-tabs-header-nav-capsule .arco-react-tabs-header-title{font-size:12px;line-height:18px}.arco-react-tabs-header-size-mini.arco-react-tabs-header-nav-capsule .arco-react-tabs-header-extra{line-height:24px;font-size:12px}.arco-react-tabs-header-size-small.arco-react-tabs-header-nav-line .arco-react-tabs-header-title{font-size:14px;padding-top:6px;padding-bottom:6px}.arco-react-tabs-header-size-small.arco-react-tabs-header-nav-line .arco-react-tabs-header-extra{line-height:36px;font-size:14px}.arco-react-tabs-header-size-small.arco-react-tabs-header-nav-card .arco-react-tabs-header-title,.arco-react-tabs-header-size-small.arco-react-tabs-header-nav-card-gutter .arco-react-tabs-header-title{font-size:14px;padding-top:2px;padding-bottom:2px}.arco-react-tabs-header-size-small.arco-react-tabs-header-nav-card .arco-react-tabs-header-extra,.arco-react-tabs-header-size-small.arco-react-tabs-header-nav-card-gutter .arco-react-tabs-header-extra{line-height:28px;font-size:14px}.arco-react-tabs-header-size-small.arco-react-tabs-header-nav-card .arco-react-tabs-add-icon,.arco-react-tabs-header-size-small.arco-react-tabs-header-nav-card-gutter .arco-react-tabs-add-icon{height:28px}.arco-react-tabs-header-size-small.arco-react-tabs-header-nav-capsule .arco-react-tabs-header-title{font-size:14px;line-height:22px}.arco-react-tabs-header-size-small.arco-react-tabs-header-nav-capsule .arco-react-tabs-header-extra{line-height:28px;font-size:14px}.arco-react-tabs-header-size-large.arco-react-tabs-header-nav-line .arco-react-tabs-header-title{font-size:14px;padding-top:10px;padding-bottom:10px}.arco-react-tabs-header-size-large.arco-react-tabs-header-nav-line .arco-react-tabs-header-extra{line-height:44px;font-size:14px}.arco-react-tabs-header-size-large.arco-react-tabs-header-nav-card .arco-react-tabs-header-title,.arco-react-tabs-header-size-large.arco-react-tabs-header-nav-card-gutter .arco-react-tabs-header-title{font-size:14px;padding-top:6px;padding-bottom:6px}.arco-react-tabs-header-size-large.arco-react-tabs-header-nav-card .arco-react-tabs-header-extra,.arco-react-tabs-header-size-large.arco-react-tabs-header-nav-card-gutter .arco-react-tabs-header-extra{line-height:36px;font-size:14px}.arco-react-tabs-header-size-large.arco-react-tabs-header-nav-card .arco-react-tabs-add-icon,.arco-react-tabs-header-size-large.arco-react-tabs-header-nav-card-gutter .arco-react-tabs-add-icon{height:36px}.arco-react-tabs-header-size-large.arco-react-tabs-header-nav-capsule .arco-react-tabs-header-title{font-size:14px;line-height:30px}.arco-react-tabs-header-size-large.arco-react-tabs-header-nav-capsule .arco-react-tabs-header-extra{line-height:36px;font-size:14px}.arco-react-tabs-header-nav-vertical{float:left;height:100%}.arco-react-tabs-header-nav-vertical:before{position:absolute;left:initial;bottom:0;right:0;top:0;width:1px;height:100%;clear:both}.arco-react-tabs-header-nav-vertical .arco-react-tabs-add-icon{margin-left:0;margin-top:8px;padding:0 16px;height:auto}.arco-react-tabs-header-nav-right{float:right}.arco-react-tabs-header-nav-vertical .arco-react-tabs-header{height:auto}.arco-react-tabs-header-nav-vertical .arco-react-tabs-header-scroll{flex-direction:column}.arco-react-tabs-header-nav-vertical .arco-react-tabs-header-overflow-scroll{padding:6px 0}.arco-react-tabs-header-nav-vertical .arco-react-tabs-header-wrapper{height:100%;flex-direction:column}.arco-react-tabs-header-nav-vertical .arco-react-tabs-header-ink{position:absolute;left:initial;right:0;bottom:initial;width:2px;transition:top .2s cubic-bezier(.34,.69,.1,1),height .2s cubic-bezier(.34,.69,.1,1)}.arco-react-tabs-header-nav-vertical .arco-react-tabs-header-title{display:block;white-space:nowrap;margin:12px 0 0}.arco-react-tabs-header-nav-vertical .arco-react-tabs-header-title:first-of-type{margin-top:0}.arco-react-tabs-header-nav-right:before{right:unset;left:0}.arco-react-tabs-header-nav-right .arco-react-tabs-header-ink{left:0;right:unset}.arco-react-tabs-header-nav-vertical .arco-react-tabs-header-scroll{position:relative;height:100%;box-sizing:border-box}.arco-react-tabs-header-nav-line.arco-react-tabs-header-nav-vertical .arco-react-tabs-header-title{padding:0 20px}.arco-react-tabs-header-nav-vertical.arco-react-tabs-header-nav-card .arco-react-tabs-header-title{margin:0;position:relative;border:1px solid var(--color-neutral-3);border-bottom-color:transparent}.arco-react-tabs-header-nav-vertical.arco-react-tabs-header-nav-card .arco-react-tabs-header-title:first-child{border-top-left-radius:var(--border-radius-small)}.arco-react-tabs-header-nav-vertical.arco-react-tabs-header-nav-card .arco-react-tabs-header-title-active,.arco-react-tabs-header-nav-vertical.arco-react-tabs-header-nav-card .arco-react-tabs-header-title-active:hover{border-bottom-color:transparent;border-right-color:var(--color-bg-2)}.arco-react-tabs-header-nav-vertical.arco-react-tabs-header-nav-card .arco-react-tabs-header-title:last-child{border-bottom:1px solid var(--color-neutral-3);border-bottom-left-radius:var(--border-radius-small)}.arco-react-tabs-header-nav-vertical.arco-react-tabs-header-nav-card-gutter .arco-react-tabs-header-title{margin-left:0;border-radius:var(--border-radius-small) 0 0 var(--border-radius-small);position:relative}.arco-react-tabs-header-nav-vertical.arco-react-tabs-header-nav-card-gutter .arco-react-tabs-header-title:not(:first-of-type){margin-top:4px}.arco-react-tabs-header-nav-vertical.arco-react-tabs-header-nav-card-gutter .arco-react-tabs-header-title-active,.arco-react-tabs-header-nav-vertical.arco-react-tabs-header-nav-card-gutter .arco-react-tabs-header-title-active:hover{border-right-color:var(--color-bg-2);border-bottom-color:var(--color-neutral-3)}.arco-react-tabs-content-vertical{width:auto;height:100%;padding:0}.arco-react-tabs-right .arco-react-tabs-content-vertical{padding-right:16px}.arco-react-tabs-left .arco-react-tabs-content-vertical{padding-left:16px}.arco-react-tabs-card>.arco-react-tabs-content-vertical,.arco-react-tabs-card-gutter>.arco-react-tabs-content-vertical{border:1px solid var(--color-neutral-3);border-left:none}#react-root[arco-theme=dark] .arco-react-tabs-header-nav-capsule .arco-react-tabs-header-title-active{background-color:var(--color-fill-3)}#react-root[arco-theme=dark] .arco-react-tabs-header-nav-capsule .arco-react-tabs-header-title:hover{background-color:var(--color-fill-3)}.arco-react-tag{display:inline-flex;height:24px;line-height:22px;padding:0 8px;border-radius:var(--border-radius-small);color:var(--color-text-1);font-size:12px;border:1px solid transparent;box-sizing:border-box;font-weight:500;vertical-align:middle;align-items:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.arco-react-tag .arco-react-icon-hover.arco-react-tag-icon-hover:before{width:16px;height:16px}.arco-react-tag .arco-react-icon-hover.arco-react-tag-icon-hover:hover:before{background-color:var(--color-fill-3)}.arco-react-tag-checkable{cursor:pointer;transition:all .1s cubic-bezier(0,0,1,1)}.arco-react-tag-checkable:hover{background-color:var(--color-fill-2)}.arco-react-tag-checked{border-color:transparent;background-color:var(--color-fill-2)}.arco-react-tag-checkable.arco-react-tag-checked:hover{background-color:var(--color-fill-3);border-color:transparent}.arco-react-tag-bordered,.arco-react-tag-checkable.arco-react-tag-checked.arco-react-tag-bordered:hover{border-color:var(--color-border-2)}.arco-react-tag-size-small{height:20px;line-height:18px;font-size:12px}.arco-react-tag-size-medium{height:28px;line-height:26px;font-size:14px}.arco-react-tag-size-large{height:32px;line-height:30px;font-size:14px}.arco-react-tag-hide{display:none}.arco-react-tag-loading{opacity:.8;cursor:default}.arco-react-tag-icon{margin-right:4px;color:var(--color-text-2)}.arco-react-tag-checked.arco-react-tag-red{color:rgb(var(--red-6));background-color:rgb(var(--red-1));border:1px solid transparent}.arco-react-tag-checked.arco-react-tag-red .arco-react-icon-hover.arco-react-tag-icon-hover:hover:before{background-color:rgb(var(--red-2))}.arco-react-tag-checkable.arco-react-tag-checked.arco-react-tag-red:hover{background-color:rgb(var(--red-2));border-color:transparent}.arco-react-tag-checked.arco-react-tag-red.arco-react-tag-bordered,.arco-react-tag-checked.arco-react-tag-red.arco-react-tag-bordered:hover{border-color:rgb(var(--red-6))}.arco-react-tag-checked.arco-react-tag-red .arco-react-tag-icon,.arco-react-tag-checked.arco-react-tag-red .arco-react-tag-close-icon,.arco-react-tag-checked.arco-react-tag-red .arco-react-tag-loading-icon{color:rgb(var(--red-6))}.arco-react-tag-checked.arco-react-tag-orangered{color:rgb(var(--orangered-6));background-color:rgb(var(--orangered-1));border:1px solid transparent}.arco-react-tag-checked.arco-react-tag-orangered .arco-react-icon-hover.arco-react-tag-icon-hover:hover:before{background-color:rgb(var(--orangered-2))}.arco-react-tag-checkable.arco-react-tag-checked.arco-react-tag-orangered:hover{background-color:rgb(var(--orangered-2));border-color:transparent}.arco-react-tag-checked.arco-react-tag-orangered.arco-react-tag-bordered,.arco-react-tag-checked.arco-react-tag-orangered.arco-react-tag-bordered:hover{border-color:rgb(var(--orangered-6))}.arco-react-tag-checked.arco-react-tag-orangered .arco-react-tag-icon,.arco-react-tag-checked.arco-react-tag-orangered .arco-react-tag-close-icon,.arco-react-tag-checked.arco-react-tag-orangered .arco-react-tag-loading-icon{color:rgb(var(--orangered-6))}.arco-react-tag-checked.arco-react-tag-orange{color:rgb(var(--orange-6));background-color:rgb(var(--orange-1));border:1px solid transparent}.arco-react-tag-checked.arco-react-tag-orange .arco-react-icon-hover.arco-react-tag-icon-hover:hover:before{background-color:rgb(var(--orange-2))}.arco-react-tag-checkable.arco-react-tag-checked.arco-react-tag-orange:hover{background-color:rgb(var(--orange-2));border-color:transparent}.arco-react-tag-checked.arco-react-tag-orange.arco-react-tag-bordered,.arco-react-tag-checked.arco-react-tag-orange.arco-react-tag-bordered:hover{border-color:rgb(var(--orange-6))}.arco-react-tag-checked.arco-react-tag-orange .arco-react-tag-icon,.arco-react-tag-checked.arco-react-tag-orange .arco-react-tag-close-icon,.arco-react-tag-checked.arco-react-tag-orange .arco-react-tag-loading-icon{color:rgb(var(--orange-6))}.arco-react-tag-checked.arco-react-tag-gold{color:rgb(var(--gold-6));background-color:rgb(var(--gold-1));border:1px solid transparent}.arco-react-tag-checked.arco-react-tag-gold .arco-react-icon-hover.arco-react-tag-icon-hover:hover:before{background-color:rgb(var(--gold-2))}.arco-react-tag-checkable.arco-react-tag-checked.arco-react-tag-gold:hover{background-color:rgb(var(--gold-3));border-color:transparent}.arco-react-tag-checked.arco-react-tag-gold.arco-react-tag-bordered,.arco-react-tag-checked.arco-react-tag-gold.arco-react-tag-bordered:hover{border-color:rgb(var(--gold-6))}.arco-react-tag-checked.arco-react-tag-gold .arco-react-tag-icon,.arco-react-tag-checked.arco-react-tag-gold .arco-react-tag-close-icon,.arco-react-tag-checked.arco-react-tag-gold .arco-react-tag-loading-icon{color:rgb(var(--gold-6))}.arco-react-tag-checked.arco-react-tag-lime{color:rgb(var(--lime-6));background-color:rgb(var(--lime-1));border:1px solid transparent}.arco-react-tag-checked.arco-react-tag-lime .arco-react-icon-hover.arco-react-tag-icon-hover:hover:before{background-color:rgb(var(--lime-2))}.arco-react-tag-checkable.arco-react-tag-checked.arco-react-tag-lime:hover{background-color:rgb(var(--lime-2));border-color:transparent}.arco-react-tag-checked.arco-react-tag-lime.arco-react-tag-bordered,.arco-react-tag-checked.arco-react-tag-lime.arco-react-tag-bordered:hover{border-color:rgb(var(--lime-6))}.arco-react-tag-checked.arco-react-tag-lime .arco-react-tag-icon,.arco-react-tag-checked.arco-react-tag-lime .arco-react-tag-close-icon,.arco-react-tag-checked.arco-react-tag-lime .arco-react-tag-loading-icon{color:rgb(var(--lime-6))}.arco-react-tag-checked.arco-react-tag-green{color:rgb(var(--green-6));background-color:rgb(var(--green-1));border:1px solid transparent}.arco-react-tag-checked.arco-react-tag-green .arco-react-icon-hover.arco-react-tag-icon-hover:hover:before{background-color:rgb(var(--green-2))}.arco-react-tag-checkable.arco-react-tag-checked.arco-react-tag-green:hover{background-color:rgb(var(--green-2));border-color:transparent}.arco-react-tag-checked.arco-react-tag-green.arco-react-tag-bordered,.arco-react-tag-checked.arco-react-tag-green.arco-react-tag-bordered:hover{border-color:rgb(var(--green-6))}.arco-react-tag-checked.arco-react-tag-green .arco-react-tag-icon,.arco-react-tag-checked.arco-react-tag-green .arco-react-tag-close-icon,.arco-react-tag-checked.arco-react-tag-green .arco-react-tag-loading-icon{color:rgb(var(--green-6))}.arco-react-tag-checked.arco-react-tag-cyan{color:rgb(var(--cyan-6));background-color:rgb(var(--cyan-1));border:1px solid transparent}.arco-react-tag-checked.arco-react-tag-cyan .arco-react-icon-hover.arco-react-tag-icon-hover:hover:before{background-color:rgb(var(--cyan-2))}.arco-react-tag-checkable.arco-react-tag-checked.arco-react-tag-cyan:hover{background-color:rgb(var(--cyan-2));border-color:transparent}.arco-react-tag-checked.arco-react-tag-cyan.arco-react-tag-bordered,.arco-react-tag-checked.arco-react-tag-cyan.arco-react-tag-bordered:hover{border-color:rgb(var(--cyan-6))}.arco-react-tag-checked.arco-react-tag-cyan .arco-react-tag-icon,.arco-react-tag-checked.arco-react-tag-cyan .arco-react-tag-close-icon,.arco-react-tag-checked.arco-react-tag-cyan .arco-react-tag-loading-icon{color:rgb(var(--cyan-6))}.arco-react-tag-checked.arco-react-tag-blue{color:rgb(var(--blue-6));background-color:rgb(var(--blue-1));border:1px solid transparent}.arco-react-tag-checked.arco-react-tag-blue .arco-react-icon-hover.arco-react-tag-icon-hover:hover:before{background-color:rgb(var(--blue-2))}.arco-react-tag-checkable.arco-react-tag-checked.arco-react-tag-blue:hover{background-color:rgb(var(--blue-2));border-color:transparent}.arco-react-tag-checked.arco-react-tag-blue.arco-react-tag-bordered,.arco-react-tag-checked.arco-react-tag-blue.arco-react-tag-bordered:hover{border-color:rgb(var(--blue-6))}.arco-react-tag-checked.arco-react-tag-blue .arco-react-tag-icon,.arco-react-tag-checked.arco-react-tag-blue .arco-react-tag-close-icon,.arco-react-tag-checked.arco-react-tag-blue .arco-react-tag-loading-icon{color:rgb(var(--blue-6))}.arco-react-tag-checked.arco-react-tag-arcoblue{color:rgb(var(--arcoblue-6));background-color:rgb(var(--arcoblue-1));border:1px solid transparent}.arco-react-tag-checked.arco-react-tag-arcoblue .arco-react-icon-hover.arco-react-tag-icon-hover:hover:before{background-color:rgb(var(--arcoblue-2))}.arco-react-tag-checkable.arco-react-tag-checked.arco-react-tag-arcoblue:hover{background-color:rgb(var(--arcoblue-2));border-color:transparent}.arco-react-tag-checked.arco-react-tag-arcoblue.arco-react-tag-bordered,.arco-react-tag-checked.arco-react-tag-arcoblue.arco-react-tag-bordered:hover{border-color:rgb(var(--arcoblue-6))}.arco-react-tag-checked.arco-react-tag-arcoblue .arco-react-tag-icon,.arco-react-tag-checked.arco-react-tag-arcoblue .arco-react-tag-close-icon,.arco-react-tag-checked.arco-react-tag-arcoblue .arco-react-tag-loading-icon{color:rgb(var(--arcoblue-6))}.arco-react-tag-checked.arco-react-tag-purple{color:rgb(var(--purple-6));background-color:rgb(var(--purple-1));border:1px solid transparent}.arco-react-tag-checked.arco-react-tag-purple .arco-react-icon-hover.arco-react-tag-icon-hover:hover:before{background-color:rgb(var(--purple-2))}.arco-react-tag-checkable.arco-react-tag-checked.arco-react-tag-purple:hover{background-color:rgb(var(--purple-2));border-color:transparent}.arco-react-tag-checked.arco-react-tag-purple.arco-react-tag-bordered,.arco-react-tag-checked.arco-react-tag-purple.arco-react-tag-bordered:hover{border-color:rgb(var(--purple-6))}.arco-react-tag-checked.arco-react-tag-purple .arco-react-tag-icon,.arco-react-tag-checked.arco-react-tag-purple .arco-react-tag-close-icon,.arco-react-tag-checked.arco-react-tag-purple .arco-react-tag-loading-icon{color:rgb(var(--purple-6))}.arco-react-tag-checked.arco-react-tag-pinkpurple{color:rgb(var(--pinkpurple-6));background-color:rgb(var(--pinkpurple-1));border:1px solid transparent}.arco-react-tag-checked.arco-react-tag-pinkpurple .arco-react-icon-hover.arco-react-tag-icon-hover:hover:before{background-color:rgb(var(--pinkpurple-2))}.arco-react-tag-checkable.arco-react-tag-checked.arco-react-tag-pinkpurple:hover{background-color:rgb(var(--pinkpurple-2));border-color:transparent}.arco-react-tag-checked.arco-react-tag-pinkpurple.arco-react-tag-bordered,.arco-react-tag-checked.arco-react-tag-pinkpurple.arco-react-tag-bordered:hover{border-color:rgb(var(--pinkpurple-6))}.arco-react-tag-checked.arco-react-tag-pinkpurple .arco-react-tag-icon,.arco-react-tag-checked.arco-react-tag-pinkpurple .arco-react-tag-close-icon,.arco-react-tag-checked.arco-react-tag-pinkpurple .arco-react-tag-loading-icon{color:rgb(var(--pinkpurple-6))}.arco-react-tag-checked.arco-react-tag-magenta{color:rgb(var(--magenta-6));background-color:rgb(var(--magenta-1));border:1px solid transparent}.arco-react-tag-checked.arco-react-tag-magenta .arco-react-icon-hover.arco-react-tag-icon-hover:hover:before{background-color:rgb(var(--magenta-2))}.arco-react-tag-checkable.arco-react-tag-checked.arco-react-tag-magenta:hover{background-color:rgb(var(--magenta-2));border-color:transparent}.arco-react-tag-checked.arco-react-tag-magenta.arco-react-tag-bordered,.arco-react-tag-checked.arco-react-tag-magenta.arco-react-tag-bordered:hover{border-color:rgb(var(--magenta-6))}.arco-react-tag-checked.arco-react-tag-magenta .arco-react-tag-icon,.arco-react-tag-checked.arco-react-tag-magenta .arco-react-tag-close-icon,.arco-react-tag-checked.arco-react-tag-magenta .arco-react-tag-loading-icon{color:rgb(var(--magenta-6))}.arco-react-tag-checked.arco-react-tag-gray{color:rgb(var(--gray-6));background-color:rgb(var(--gray-2));border:1px solid transparent}.arco-react-tag-checked.arco-react-tag-gray .arco-react-icon-hover.arco-react-tag-icon-hover:hover:before{background-color:rgb(var(--gray-3))}.arco-react-tag-checkable.arco-react-tag-checked.arco-react-tag-gray:hover{background-color:rgb(var(--gray-3));border-color:transparent}.arco-react-tag-checked.arco-react-tag-gray.arco-react-tag-bordered,.arco-react-tag-checked.arco-react-tag-gray.arco-react-tag-bordered:hover{border-color:rgb(var(--gray-6))}.arco-react-tag-checked.arco-react-tag-gray .arco-react-tag-icon,.arco-react-tag-checked.arco-react-tag-gray .arco-react-tag-close-icon,.arco-react-tag-checked.arco-react-tag-gray .arco-react-tag-loading-icon{color:rgb(var(--gray-6))}.arco-react-tag-custom-color{color:var(--color-white)}.arco-react-tag-custom-color .arco-react-icon-hover.arco-react-tag-icon-hover:hover:before{background-color:#fff3}.arco-react-tag .arco-react-tag-close-btn{font-size:12px;margin-left:4px}.arco-react-tag .arco-react-tag-close-btn>svg{position:relative}.arco-react-tag-loading-icon{font-size:12px;margin-left:4px}#react-root[arco-theme=dark] .arco-react-tag-checked{color:#ffffffe6}#react-root[arco-theme=dark] .arco-react-tag-checked.arco-react-tag-red{background-color:rgba(var(--red-6),.2)}#react-root[arco-theme=dark] .arco-react-tag-checked.arco-react-tag-red .arco-react-icon-hover.arco-react-tag-icon-hover:hover:before{background-color:rgba(var(--red-6),.35)}#react-root[arco-theme=dark] .arco-react-tag-checkable.arco-react-tag-checked.arco-react-tag-red:hover{background-color:rgba(var(--red-6),.35)}#react-root[arco-theme=dark] .arco-react-tag-checked.arco-react-tag-orangered{background-color:rgba(var(--orangered-6),.2)}#react-root[arco-theme=dark] .arco-react-tag-checked.arco-react-tag-orangered .arco-react-icon-hover.arco-react-tag-icon-hover:hover:before{background-color:rgba(var(--orangered-6),.35)}#react-root[arco-theme=dark] .arco-react-tag-checkable.arco-react-tag-checked.arco-react-tag-orangered:hover{background-color:rgba(var(--orangered-6),.35)}#react-root[arco-theme=dark] .arco-react-tag-checked.arco-react-tag-orange{background-color:rgba(var(--orange-6),.2)}#react-root[arco-theme=dark] .arco-react-tag-checked.arco-react-tag-orange .arco-react-icon-hover.arco-react-tag-icon-hover:hover:before{background-color:rgba(var(--orange-6),.35)}#react-root[arco-theme=dark] .arco-react-tag-checkable.arco-react-tag-checked.arco-react-tag-orange:hover{background-color:rgba(var(--orange-6),.35)}#react-root[arco-theme=dark] .arco-react-tag-checked.arco-react-tag-gold{background-color:rgba(var(--gold-6),.2)}#react-root[arco-theme=dark] .arco-react-tag-checked.arco-react-tag-gold .arco-react-icon-hover.arco-react-tag-icon-hover:hover:before{background-color:rgba(var(--gold-6),.35)}#react-root[arco-theme=dark] .arco-react-tag-checkable.arco-react-tag-checked.arco-react-tag-gold:hover{background-color:rgba(var(--gold-6),.35)}#react-root[arco-theme=dark] .arco-react-tag-checked.arco-react-tag-lime{background-color:rgba(var(--lime-6),.2)}#react-root[arco-theme=dark] .arco-react-tag-checked.arco-react-tag-lime .arco-react-icon-hover.arco-react-tag-icon-hover:hover:before{background-color:rgba(var(--lime-6),.35)}#react-root[arco-theme=dark] .arco-react-tag-checkable.arco-react-tag-checked.arco-react-tag-lime:hover{background-color:rgba(var(--lime-6),.35)}#react-root[arco-theme=dark] .arco-react-tag-checked.arco-react-tag-green{background-color:rgba(var(--green-6),.2)}#react-root[arco-theme=dark] .arco-react-tag-checked.arco-react-tag-green .arco-react-icon-hover.arco-react-tag-icon-hover:hover:before{background-color:rgba(var(--green-6),.35)}#react-root[arco-theme=dark] .arco-react-tag-checkable.arco-react-tag-checked.arco-react-tag-green:hover{background-color:rgba(var(--green-6),.35)}#react-root[arco-theme=dark] .arco-react-tag-checked.arco-react-tag-cyan{background-color:rgba(var(--cyan-6),.2)}#react-root[arco-theme=dark] .arco-react-tag-checked.arco-react-tag-cyan .arco-react-icon-hover.arco-react-tag-icon-hover:hover:before{background-color:rgba(var(--cyan-6),.35)}#react-root[arco-theme=dark] .arco-react-tag-checkable.arco-react-tag-checked.arco-react-tag-cyan:hover{background-color:rgba(var(--cyan-6),.35)}#react-root[arco-theme=dark] .arco-react-tag-checked.arco-react-tag-blue{background-color:rgba(var(--blue-6),.2)}#react-root[arco-theme=dark] .arco-react-tag-checked.arco-react-tag-blue .arco-react-icon-hover.arco-react-tag-icon-hover:hover:before{background-color:rgba(var(--blue-6),.35)}#react-root[arco-theme=dark] .arco-react-tag-checkable.arco-react-tag-checked.arco-react-tag-blue:hover{background-color:rgba(var(--blue-6),.35)}#react-root[arco-theme=dark] .arco-react-tag-checked.arco-react-tag-arcoblue{background-color:rgba(var(--arcoblue-6),.2)}#react-root[arco-theme=dark] .arco-react-tag-checked.arco-react-tag-arcoblue .arco-react-icon-hover.arco-react-tag-icon-hover:hover:before{background-color:rgba(var(--arcoblue-6),.35)}#react-root[arco-theme=dark] .arco-react-tag-checkable.arco-react-tag-checked.arco-react-tag-arcoblue:hover{background-color:rgba(var(--arcoblue-6),.35)}#react-root[arco-theme=dark] .arco-react-tag-checked.arco-react-tag-purple{background-color:rgba(var(--purple-6),.2)}#react-root[arco-theme=dark] .arco-react-tag-checked.arco-react-tag-purple .arco-react-icon-hover.arco-react-tag-icon-hover:hover:before{background-color:rgba(var(--purple-6),.35)}#react-root[arco-theme=dark] .arco-react-tag-checkable.arco-react-tag-checked.arco-react-tag-purple:hover{background-color:rgba(var(--purple-6),.35)}#react-root[arco-theme=dark] .arco-react-tag-checked.arco-react-tag-pinkpurple{background-color:rgba(var(--pinkpurple-6),.2)}#react-root[arco-theme=dark] .arco-react-tag-checked.arco-react-tag-pinkpurple .arco-react-icon-hover.arco-react-tag-icon-hover:hover:before{background-color:rgba(var(--pinkpurple-6),.35)}#react-root[arco-theme=dark] .arco-react-tag-checkable.arco-react-tag-checked.arco-react-tag-pinkpurple:hover{background-color:rgba(var(--pinkpurple-6),.35)}#react-root[arco-theme=dark] .arco-react-tag-checked.arco-react-tag-magenta{background-color:rgba(var(--magenta-6),.2)}#react-root[arco-theme=dark] .arco-react-tag-checked.arco-react-tag-magenta .arco-react-icon-hover.arco-react-tag-icon-hover:hover:before{background-color:rgba(var(--magenta-6),.35)}#react-root[arco-theme=dark] .arco-react-tag-checkable.arco-react-tag-checked.arco-react-tag-magenta:hover{background-color:rgba(var(--magenta-6),.35)}#react-root[arco-theme=dark] .arco-react-tag-checked.arco-react-tag-gray{background-color:rgba(var(--gray-6),.2)}#react-root[arco-theme=dark] .arco-react-tag-checked.arco-react-tag-gray .arco-react-icon-hover.arco-react-tag-icon-hover:hover:before{background-color:rgba(var(--gray-6),.35)}#react-root[arco-theme=dark] .arco-react-tag-checkable.arco-react-tag-checked.arco-react-tag-gray:hover{background-color:rgba(var(--gray-6),.35)}.arco-react-timeline-item{position:relative;color:var(--color-text-1);font-size:14px;min-height:78px;padding-left:6px}.arco-react-timeline-item-label{color:var(--color-text-3);font-size:12px;line-height:1.667}.arco-react-timeline-item-content{line-height:1.5715;font-size:14px;color:var(--color-text-1);margin-bottom:4px}.arco-react-timeline-item-content-wrapper{margin-left:16px;position:relative}.arco-react-timeline-item.arco-react-timeline-item-last>.arco-react-timeline-item-dot-wrapper .arco-react-timeline-item-dot-line{display:none}.arco-react-timeline-item-dot-wrapper{position:absolute;text-align:center;height:100%;left:0}.arco-react-timeline-item-dot-wrapper .arco-react-timeline-item-dot-content{width:6px;height:22.001px;line-height:22.001px;position:relative}.arco-react-timeline-item-dot{width:6px;height:6px;border-radius:var(--border-radius-circle);box-sizing:border-box;color:rgb(var(--primary-6));margin-top:-50%;position:relative;top:50%}.arco-react-timeline-item-dot-solid{background-color:rgb(var(--primary-6))}.arco-react-timeline-item-dot-hollow{border:2px solid rgb(var(--primary-6));background-color:var(--color-bg-2)}.arco-react-timeline-item-dot-custom{display:inline-flex;transform-origin:center;color:rgb(var(--primary-6));box-sizing:border-box;position:absolute;top:50%;left:50%;background-color:var(--color-bg-2);transform:translate(-50%) translateY(-50%)}.arco-react-timeline-item-dot-custom svg{color:inherit}.arco-react-timeline-item-dot-line{width:1px;border-left-width:1px;border-color:var(--color-neutral-3);left:50%;transform:translate(-50%);top:18.0005px;bottom:-4.0005px;position:absolute;box-sizing:border-box}.arco-react-timeline-alternate{overflow:hidden}.arco-react-timeline-alternate .arco-react-timeline-item-vertical-left{padding-left:0}.arco-react-timeline-alternate .arco-react-timeline-item-vertical-left>.arco-react-timeline-item-dot-wrapper{left:50%}.arco-react-timeline-alternate .arco-react-timeline-item-vertical-left>.arco-react-timeline-item-content-wrapper{left:50%;width:50%;margin-left:22px;padding-right:22px}.arco-react-timeline-alternate .arco-react-timeline-item-vertical-right{padding-right:0}.arco-react-timeline-alternate .arco-react-timeline-item-vertical-right>.arco-react-timeline-item-dot-wrapper{left:50%}.arco-react-timeline-alternate .arco-react-timeline-item-vertical-right>.arco-react-timeline-item-content-wrapper{left:0;margin-left:-16px;margin-right:0;text-align:right;width:50%;padding-right:16px}.arco-react-timeline-right .arco-react-timeline-item-vertical-right{padding-right:6px}.arco-react-timeline-right .arco-react-timeline-item-vertical-right>.arco-react-timeline-item-dot-wrapper{right:0;left:unset}.arco-react-timeline-right .arco-react-timeline-item-vertical-right>.arco-react-timeline-item-content-wrapper{text-align:right;margin-left:0;margin-right:16px}.arco-react-timeline-item-label-relative>.arco-react-timeline-item-label{position:absolute;top:0;max-width:100px;box-sizing:border-box}.arco-react-timeline-item-vertical-left.arco-react-timeline-item-label-relative{margin-left:100px}.arco-react-timeline-item-vertical-left.arco-react-timeline-item-label-relative>.arco-react-timeline-item-label{text-align:right;padding-right:16px;transform:translate(-100%);left:0}.arco-react-timeline-item-vertical-right.arco-react-timeline-item-label-relative{margin-right:100px}.arco-react-timeline-item-vertical-right.arco-react-timeline-item-label-relative>.arco-react-timeline-item-label{text-align:left;padding-left:16px;transform:translate(100%);right:0}.arco-react-timeline-item-horizontal-top.arco-react-timeline-item-label-relative{margin-top:50px}.arco-react-timeline-item-horizontal-top.arco-react-timeline-item-label-relative>.arco-react-timeline-item-label{padding-bottom:16px;transform:translateY(-100%)}.arco-react-timeline-item-horizontal-top.arco-react-timeline-item-label-relative>.arco-react-timeline-item-content{margin-bottom:0}.arco-react-timeline-item-horizontal-bottom.arco-react-timeline-item-label-relative{margin-bottom:50px}.arco-react-timeline-item-horizontal-bottom.arco-react-timeline-item-label-relative>.arco-react-timeline-item-content{margin-bottom:0}.arco-react-timeline-item-horizontal-bottom.arco-react-timeline-item-label-relative>.arco-react-timeline-item-label{top:unset;bottom:0;text-align:left;padding-top:16px;transform:translateY(100%)}.arco-react-timeline-alternate .arco-react-timeline-item-vertical-left.arco-react-timeline-item-label-relative{margin-left:0}.arco-react-timeline-alternate .arco-react-timeline-item-vertical-left.arco-react-timeline-item-label-relative>.arco-react-timeline-item-label{width:50%;max-width:unset;transform:none;left:0}.arco-react-timeline-alternate .arco-react-timeline-item-vertical-right.arco-react-timeline-item-label-relative{margin-right:0}.arco-react-timeline-alternate .arco-react-timeline-item-horizontal-top.arco-react-timeline-item-label-relative{margin-top:0}.arco-react-timeline-alternate .arco-react-timeline-item-horizontal-bottom.arco-react-timeline-item-label-relative{margin-bottom:0}.arco-react-timeline-direction-horizontal{display:flex}.arco-react-timeline-item-dot-line-is-horizontal{left:12px;right:4px;border-left:none;height:1px;border-top-width:1px;top:50%;transform:translateY(-50%);width:unset}.arco-react-timeline-item-horizontal-bottom,.arco-react-timeline-item-horizontal-top{flex:1;padding-left:0;padding-right:0;min-height:unset}.arco-react-timeline-item-horizontal-bottom>.arco-react-timeline-item-dot-wrapper,.arco-react-timeline-item-horizontal-top>.arco-react-timeline-item-dot-wrapper{height:auto;width:100%;top:0}.arco-react-timeline-item-horizontal-bottom>.arco-react-timeline-item-dot-wrapper .arco-react-timeline-item-dot,.arco-react-timeline-item-horizontal-top>.arco-react-timeline-item-dot-wrapper .arco-react-timeline-item-dot{margin-top:unset;top:unset}.arco-react-timeline-item-horizontal-bottom>.arco-react-timeline-item-dot-wrapper .arco-react-timeline-item-dot-content,.arco-react-timeline-item-horizontal-top>.arco-react-timeline-item-dot-wrapper .arco-react-timeline-item-dot-content{height:6px;line-height:6px}.arco-react-timeline-item-horizontal-top{padding-top:6px}.arco-react-timeline-item-horizontal-top>.arco-react-timeline-item-dot-wrapper{bottom:unset;top:0}.arco-react-timeline-item-horizontal-top>.arco-react-timeline-item-content-wrapper{margin-top:16px;margin-left:0}.arco-react-timeline-item-horizontal-bottom{padding-bottom:6px}.arco-react-timeline-item-horizontal-bottom>.arco-react-timeline-item-dot-wrapper{bottom:0;top:unset}.arco-react-timeline-item-horizontal-bottom>.arco-react-timeline-item-content-wrapper{margin-left:0;margin-bottom:16px}.arco-react-timeline-alternate.arco-react-timeline-direction-horizontal{align-items:center;min-height:200px;overflow:visible}.arco-react-timeline-alternate.arco-react-timeline-direction-horizontal .arco-react-timeline-item-horizontal-bottom{transform:translateY(-50%);margin-top:6px}.arco-react-timeline-alternate.arco-react-timeline-direction-horizontal .arco-react-timeline-item-horizontal-top{margin-top:-6px;transform:translateY(50%)}.arco-react-timepicker{position:relative;display:flex;padding:0;box-sizing:border-box}.arco-react-timepicker-container{border-radius:var(--border-radius-medium);border:1px solid var(--color-neutral-3);background-color:var(--color-bg-popup);box-shadow:0 2px 5px #0000001a;overflow:hidden}.arco-react-timepicker-list{width:64px;height:224px;overflow:hidden;box-sizing:border-box;scrollbar-width:none}.arco-react-timepicker-list::-webkit-scrollbar{width:0}.arco-react-timepicker-list:not(:last-child){border-right:1px solid var(--color-neutral-3)}.arco-react-timepicker-list:hover{overflow-y:auto}.arco-react-timepicker-list ul{margin:0;padding:0;list-style:none;box-sizing:border-box}.arco-react-timepicker-list ul:after{content:\"\";display:block;width:100%;height:192px}.arco-react-timepicker-cell{padding:8px / 2 0;text-align:center;color:var(--color-text-1);font-weight:500;cursor:pointer}.arco-react-timepicker-cell-inner{height:24px;line-height:24px;font-size:14px}.arco-react-timepicker-cell:not(.arco-react-timepicker-cell-selected):not(.arco-react-timepicker-cell-disabled):hover .arco-react-timepicker-cell-inner{background-color:var(--color-fill-2)}.arco-react-timepicker-cell-selected .arco-react-timepicker-cell-inner{background-color:var(--color-fill-2);font-weight:500}.arco-react-timepicker-cell-disabled{color:var(--color-text-4);cursor:not-allowed}.arco-react-timepicker-footer-extra-wrapper{border-top:1px solid var(--color-neutral-3);padding:8px;color:var(--color-text-1);font-size:12px}.arco-react-timepicker-footer-btn-wrapper{display:flex;justify-content:space-between;border-top:1px solid var(--color-neutral-3);padding:8px}.arco-react-tooltip-content{padding:8px 12px;background-color:var(--color-tooltip-bg);font-size:14px;border-radius:var(--border-radius-small);color:#fff;line-height:1.5715;box-shadow:0 4px 10px #0000001a}.arco-react-tooltip-content-inner{word-wrap:break-word;text-align:left}.arco-react-tooltip-mini{font-size:14px;padding:4px 12px}.arco-react-trigger-arrow.arco-react-tooltip-arrow{background-color:var(--color-tooltip-bg)}#react-root[arco-theme=dark] .arco-react-tooltip-content{border:1px solid var(--color-neutral-3)}#react-root[arco-theme=dark] .arco-react-tooltip .arco-react-trigger-arrow.arco-react-tooltip-arrow{border:1px solid var(--color-neutral-3);border-top:none;border-left:none;z-index:1}.arco-react-transfer{display:flex;align-items:center}.arco-react-transfer-view{display:flex;flex-direction:column;box-sizing:border-box;width:200px;height:224px;border:1px solid var(--color-neutral-3);border-radius:var(--border-radius-small)}.arco-react-transfer-view-search{padding:8px 12px 4px}.arco-react-transfer-view-list{flex:1}.arco-react-transfer-view-custom-list{flex:1;overflow:auto}.arco-react-transfer-view-header,.arco-react-transfer-view-item{display:flex;align-items:center;padding:0 10px}.arco-react-transfer-view-header>*:first-child,.arco-react-transfer-view-item .arco-react-transfer-view-item-content{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.arco-react-transfer-view-header>*:first-child:not(:last-child),.arco-react-transfer-view-item .arco-react-transfer-view-item-content:not(:last-child){margin-right:8px}.arco-react-transfer-view-header{height:40px;line-height:40px;font-size:14px;font-weight:500;background-color:var(--color-fill-1);color:var(--color-text-1)}.arco-react-transfer-view-header-title{display:flex;align-items:center}.arco-react-transfer-view-header-title .arco-react-checkbox{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:inherit}.arco-react-transfer-view-header-title .arco-react-checkbox-text{color:inherit}.arco-react-transfer-view-header-unit{margin-right:2px;font-weight:normal;font-size:12px;color:var(--color-text-3)}.arco-react-transfer-view-item{position:relative;height:36px;line-height:36px;list-style:none;color:var(--color-text-1);background-color:transparent;cursor:default}.arco-react-transfer-view-item-content{font-size:14px}.arco-react-transfer-view-item-disabled{color:var(--color-text-4);background-color:transparent;cursor:not-allowed}.arco-react-transfer-view-item:not(.arco-react-transfer-view-item-disabled):hover{color:var(--color-text-1);background-color:var(--color-fill-2)}.arco-react-transfer-view-item .arco-react-checkbox{width:100%}.arco-react-transfer-view-item .arco-react-checkbox-text{color:inherit}.arco-react-transfer-view-item-draggable:before{content:\"\";display:block;position:absolute;left:0;right:0;height:2px;border-radius:1px}.arco-react-transfer-view-item-gap-bottom:before{bottom:-2px;background-color:rgb(var(--primary-6))}.arco-react-transfer-view-item-gap-top:before{top:-2px;background-color:rgb(var(--primary-6))}.arco-react-transfer-view-item-dragging{background-color:var(--color-fill-1)!important;color:var(--color-text-4)!important}.arco-react-transfer-view-item-dragged{animation:arco-react-transfer-drag-item-blink .4s;animation-timing-function:cubic-bezier(0,0,1,1)}.arco-react-transfer-view .arco-react-transfer-view-icon-clear,.arco-react-transfer-view .arco-react-transfer-view-item-icon-remove{cursor:pointer;font-size:12px;color:var(--color-text-2)}.arco-react-transfer-view .arco-react-transfer-view-icon-clear:hover:before,.arco-react-transfer-view .arco-react-transfer-view-item-icon-remove:hover:before{background-color:var(--color-fill-3)}.arco-react-transfer-view .arco-react-list{display:flex;flex-direction:column;height:100%;border-radius:0}.arco-react-transfer-view .arco-react-list-content{flex:1;overflow-y:auto}.arco-react-transfer-view .arco-react-list-footer{display:flex;align-items:center;position:relative;box-sizing:border-box;height:40px;padding:0 8px}.arco-react-transfer-view .arco-react-list .arco-react-pagination{position:absolute;top:50%;right:8px;margin:0;transform:translateY(-50%)}.arco-react-transfer-view .arco-react-list .arco-react-pagination-jumper-input{width:24px}.arco-react-transfer-view .arco-react-list .arco-react-pagination-jumper-separator{padding:0 8px}.arco-react-transfer-view .arco-react-checkbox{padding-left:6px}.arco-react-transfer-view .arco-react-checkbox-wrapper{display:inline}.arco-react-transfer-view .arco-react-checkbox .arco-react-icon-hover:hover:before{background-color:var(--color-fill-3)}.arco-react-transfer-operations{padding:0 20px}.arco-react-transfer-operations .arco-react-btn{display:block}.arco-react-transfer-operations .arco-react-btn:last-child{margin-top:12px}.arco-react-transfer-operations-words .arco-react-btn{width:100%;padding:0 12px;text-align:left}.arco-react-transfer-simple .arco-react-transfer-view-source{border-top-right-radius:0;border-bottom-right-radius:0;border-right:none}.arco-react-transfer-simple .arco-react-transfer-view-target{border-top-left-radius:0;border-bottom-left-radius:0}.arco-react-transfer-disabled .arco-react-transfer-view-header{color:var(--color-text-4)}@keyframes arco-react-transfer-drag-item-blink{0%{background-color:var(--color-primary-light-1)}to{background-color:transparent}}.arco-react-icon-hover.arco-react-tree-node-icon-hover:before{width:16px;height:16px}.arco-react-tree-node-switcher{font-size:12px;color:var(--color-text-2);cursor:pointer;user-select:none;display:flex;align-items:center;position:relative;margin-right:10px;height:32px;width:12px;flex-shrink:0}.arco-react-tree-node-switcher-icon{position:relative;margin:0 auto}.arco-react-tree-node-switcher-icon svg{transform:rotate(-90deg);position:relative;transition:transform .2s cubic-bezier(.34,.69,.1,1)}.arco-react-tree-node-expanded .arco-react-tree-node-switcher-icon svg,.arco-react-tree-node-is-leaf .arco-react-tree-node-switcher-icon svg{transform:rotate(0)}.arco-react-tree-node-drag-icon{color:rgb(var(--primary-6));opacity:0;margin-left:120px}.arco-react-tree-node-custom-icon{font-size:inherit;cursor:pointer;user-select:none;margin-right:10px}.arco-react-tree-node .arco-react-icon-loading{color:rgb(var(--primary-6))}.arco-react-tree-node-minus-icon,.arco-react-tree-node-plus-icon{cursor:pointer;background:var(--color-fill-2);border-radius:var(--border-radius-small);position:relative;display:block;width:14px;height:14px}.arco-react-tree-node-minus-icon:after,.arco-react-tree-node-plus-icon:after{content:\"\";position:absolute;display:block;color:var(--color-text-2);width:6px;height:2px;background-color:var(--color-text-2);border-radius:.5px;top:50%;left:50%;margin-top:-1px;margin-left:-3px}.arco-react-tree-node-plus-icon:before{content:\"\";border-radius:.5px;position:absolute;display:block;color:var(--color-text-2);height:6px;width:2px;background-color:var(--color-text-2);left:50%;margin-left:-1px;top:50%;margin-top:-3px}.arco-react-tree{color:var(--color-text-1)}.arco-react-tree .arco-react-checkbox{margin-right:10px;padding-left:0;line-height:32px}.arco-react-tree-node{padding-left:2px;color:var(--color-text-1);position:relative;cursor:pointer;display:flex;align-items:flex-start;flex-wrap:nowrap;line-height:1.5715}.arco-react-tree-node-selected .arco-react-tree-node-title,.arco-react-tree-node-selected .arco-react-tree-node-title:hover{color:rgb(var(--primary-6));transition:color .2s cubic-bezier(0,0,1,1)}.arco-react-tree-node-disabled-selectable .arco-react-tree-node-title,.arco-react-tree-node-disabled .arco-react-tree-node-title,.arco-react-tree-node-disabled-selectable .arco-react-tree-node-title:hover,.arco-react-tree-node-disabled .arco-react-tree-node-title:hover{background:none;color:var(--color-text-4);cursor:not-allowed}.arco-react-tree-node-disabled.arco-react-tree-node-selected .arco-react-tree-node-title{color:var(--color-primary-light-3)}.arco-react-tree-node-title-block{flex:1;box-sizing:content-box}.arco-react-tree-node-title-block .arco-react-tree-node-drag-icon{position:absolute;right:12px}.arco-react-tree-node-indent{align-self:stretch;flex-shrink:0;position:relative}.arco-react-tree-node-indent-block{display:inline-block;width:12px;margin-right:10px;height:100%;position:relative}.arco-react-tree-node-title{font-size:14px;padding:5px 4px;margin-left:-4px;border-radius:var(--border-radius-small);position:relative}.arco-react-tree-node-title:hover{background-color:var(--color-fill-2);color:var(--color-text-1)}.arco-react-tree-node-title:hover .arco-react-tree-node-drag-icon{opacity:1}.arco-react-tree-node-title-draggable:before{content:\"\";display:block;height:2px;border-radius:1px;left:0;right:0;position:absolute;top:0}.arco-react-tree-node-title-gap-bottom:before{top:unset;bottom:0;background-color:rgb(var(--primary-6))}.arco-react-tree-node-title-gap-top:before{background-color:rgb(var(--primary-6))}.arco-react-tree-node-title-highlight{background-color:var(--color-primary-light-1);color:var(--color-text-1)}.arco-react-tree-node-title-dragging,.arco-react-tree-node-title-dragging:hover{background-color:var(--color-fill-1);color:var(--color-text-4)}.arco-react-tree-show-line{padding-left:1px}.arco-react-tree-show-line .arco-react-tree-node-switcher{width:14px;text-align:center}.arco-react-tree-show-line .arco-react-tree-node-switcher .arco-react-tree-node-icon-hover{width:100%}.arco-react-tree-show-line .arco-react-tree-node-indent-block{width:14px}.arco-react-tree-show-line .arco-react-tree-node-indent-block:before{position:absolute;left:50%;transform:translate(-50%);width:1px;border-left:1px solid var(--color-neutral-3);content:\"\";box-sizing:border-box;top:-5px;bottom:-5px}.arco-react-tree-show-line .arco-react-tree-node-is-leaf:not(.arco-react-tree-node-is-tail) .arco-react-tree-node-indent:after{content:\"\";position:absolute;box-sizing:border-box;border-left:1px solid var(--color-neutral-3);width:1px;right:-7px;transform:translate(50%);top:27px;bottom:-5px}.arco-react-tree-show-line .arco-react-tree-node-indent-block-lineless:before{display:none}.arco-react-tree-size-mini .arco-react-tree-node-switcher{height:24px}.arco-react-tree-size-mini .arco-react-checkbox{line-height:24px}.arco-react-tree-size-mini .arco-react-tree-node-title{font-size:12px;line-height:1.667;padding-top:2px;padding-bottom:2px}.arco-react-tree-size-mini .arco-react-tree-node-indent-block:before{top:23px;bottom:-1px}.arco-react-tree-size-mini .arco-react-tree-node-is-leaf:not(.arco-react-tree-node-is-tail) .arco-react-tree-node-indent:after{top:-1px;bottom:-1px}.arco-react-tree-size-small .arco-react-tree-node-switcher{height:28px}.arco-react-tree-size-small .arco-react-checkbox{line-height:28px}.arco-react-tree-size-small .arco-react-tree-node-title{font-size:14px;padding-top:6px / 2;padding-bottom:6px / 2}.arco-react-tree-size-small .arco-react-tree-node-indent-block:before{top:25px;bottom:-3px}.arco-react-tree-size-small .arco-react-tree-node-is-leaf:not(.arco-react-tree-node-is-tail) .arco-react-tree-node-indent:after{top:-3px;bottom:-3px}.arco-react-tree-size-large .arco-react-tree-node-switcher{height:36px}.arco-react-tree-size-large .arco-react-checkbox{line-height:36px}.arco-react-tree-size-large .arco-react-tree-node-title{font-size:14px;padding-top:14px / 2;padding-bottom:14px / 2}.arco-react-tree-size-large .arco-react-tree-node-indent-block:before{top:29px;bottom:-7px}.arco-react-tree-size-large .arco-react-tree-node-is-leaf:not(.arco-react-tree-node-is-tail) .arco-react-tree-node-indent:after{top:-7px;bottom:-7px}.arco-react-tree-node-list{overflow:hidden;transition:height .2s cubic-bezier(.34,.69,.1,1)}.arco-react-tree-select .arco-react-tree-select-view{color:var(--color-text-1);background-color:var(--color-fill-2);border:1px solid transparent}.arco-react-tree-select:hover .arco-react-tree-select-view{background-color:var(--color-fill-3);border-color:transparent}.arco-react-tree-select.arco-react-tree-select-focused .arco-react-tree-select-view{color:var(--color-text-1);background-color:var(--color-bg-2);border-color:rgb(var(--primary-6));box-shadow:0 0 0 0 var(--color-primary-light-2)}.arco-react-tree-select .arco-react-tree-select-suffix-icon,.arco-react-tree-select .arco-react-tree-select-loading-icon,.arco-react-tree-select .arco-react-tree-select-search-icon,.arco-react-tree-select .arco-react-tree-select-clear-icon,.arco-react-tree-select .arco-react-tree-select-arrow-icon,.arco-react-tree-select .arco-react-tree-select-expand-icon{color:var(--color-text-2)}.arco-react-tree-select-no-border .arco-react-tree-select-view{border:none!important;background:none!important}.arco-react-tree-select-error .arco-react-tree-select-view{background-color:var(--color-danger-light-1);border:1px solid transparent}.arco-react-tree-select-error:hover .arco-react-tree-select-view{background-color:var(--color-danger-light-2);border-color:transparent}.arco-react-tree-select-error.arco-react-tree-select-focused .arco-react-tree-select-view{color:var(--color-text-1);background-color:var(--color-bg-2);border-color:rgb(var(--danger-6));box-shadow:0 0 0 0 var(--color-danger-light-2)}.arco-react-tree-select-no-border .arco-react-tree-select-view{border:none!important;background:none!important}.arco-react-tree-select-disabled .arco-react-tree-select-view{color:var(--color-text-4);background-color:var(--color-fill-2);border:1px solid transparent}.arco-react-tree-select-disabled:hover .arco-react-tree-select-view{background-color:var(--color-fill-2);border-color:transparent}.arco-react-tree-select-disabled .arco-react-tree-select-suffix-icon,.arco-react-tree-select-disabled .arco-react-tree-select-loading-icon,.arco-react-tree-select-disabled .arco-react-tree-select-search-icon,.arco-react-tree-select-disabled .arco-react-tree-select-clear-icon,.arco-react-tree-select-disabled .arco-react-tree-select-arrow-icon,.arco-react-tree-select-disabled .arco-react-tree-select-expand-icon{color:var(--color-text-4)}.arco-react-tree-select-no-border .arco-react-tree-select-view{border:none!important;background:none!important}.arco-react-tree-select-size-mini.arco-react-tree-select-multiple .arco-react-tree-select-view{height:auto;font-size:12px;padding:0 3px;line-height:0}.arco-react-tree-select-size-mini.arco-react-tree-select-multiple .arco-react-input-tag-has-placeholder input,.arco-react-tree-select-size-mini.arco-react-tree-select-multiple .arco-react-input-tag-has-placeholder .arco-react-input-tag-input-mirror{box-sizing:border-box;padding-left:4px}.arco-react-tree-select-size-mini.arco-react-tree-select-multiple .arco-react-tree-select-suffix{padding-right:4px}.arco-react-tree-select-size-mini.arco-react-tree-select-multiple input{font-size:12px}.arco-react-tree-select-size-mini.arco-react-tree-select-single .arco-react-tree-select-view{height:24px;line-height:22px;font-size:12px;padding:0 7px}.arco-react-tree-select-size-mini.arco-react-tree-select-single input{font-size:12px}.arco-react-tree-select-size-mini.arco-react-tree-select-multiple .arco-react-tree-select-view-with-prefix{padding-left:7px}.arco-react-tree-select-size-small.arco-react-tree-select-multiple .arco-react-tree-select-view{height:auto;font-size:14px;padding:0 3px;line-height:0}.arco-react-tree-select-size-small.arco-react-tree-select-multiple .arco-react-input-tag-has-placeholder input,.arco-react-tree-select-size-small.arco-react-tree-select-multiple .arco-react-input-tag-has-placeholder .arco-react-input-tag-input-mirror{box-sizing:border-box;padding-left:8px}.arco-react-tree-select-size-small.arco-react-tree-select-multiple .arco-react-tree-select-suffix{padding-right:8px}.arco-react-tree-select-size-small.arco-react-tree-select-multiple input{font-size:14px}.arco-react-tree-select-size-small.arco-react-tree-select-single .arco-react-tree-select-view{height:28px;line-height:26px;font-size:14px;padding:0 11px}.arco-react-tree-select-size-small.arco-react-tree-select-single input{font-size:14px}.arco-react-tree-select-size-small.arco-react-tree-select-multiple .arco-react-tree-select-view-with-prefix{padding-left:11px}.arco-react-tree-select-size-default.arco-react-tree-select-multiple .arco-react-tree-select-view{height:auto;font-size:14px;padding:0 3px;line-height:0}.arco-react-tree-select-size-default.arco-react-tree-select-multiple .arco-react-input-tag-has-placeholder input,.arco-react-tree-select-size-default.arco-react-tree-select-multiple .arco-react-input-tag-has-placeholder .arco-react-input-tag-input-mirror{box-sizing:border-box;padding-left:8px}.arco-react-tree-select-size-default.arco-react-tree-select-multiple .arco-react-tree-select-suffix{padding-right:8px}.arco-react-tree-select-size-default.arco-react-tree-select-multiple input{font-size:14px}.arco-react-tree-select-size-default.arco-react-tree-select-single .arco-react-tree-select-view{height:32px;line-height:30px;font-size:14px;padding:0 11px}.arco-react-tree-select-size-default.arco-react-tree-select-single input{font-size:14px}.arco-react-tree-select-size-default.arco-react-tree-select-multiple .arco-react-tree-select-view-with-prefix{padding-left:11px}.arco-react-tree-select-size-large.arco-react-tree-select-multiple .arco-react-tree-select-view{height:auto;font-size:16px;padding:0 3px;line-height:0}.arco-react-tree-select-size-large.arco-react-tree-select-multiple .arco-react-input-tag-has-placeholder input,.arco-react-tree-select-size-large.arco-react-tree-select-multiple .arco-react-input-tag-has-placeholder .arco-react-input-tag-input-mirror{box-sizing:border-box;padding-left:12px}.arco-react-tree-select-size-large.arco-react-tree-select-multiple .arco-react-tree-select-suffix{padding-right:12px}.arco-react-tree-select-size-large.arco-react-tree-select-multiple input{font-size:16px}.arco-react-tree-select-size-large.arco-react-tree-select-single .arco-react-tree-select-view{height:36px;line-height:34px;font-size:16px;padding:0 15px}.arco-react-tree-select-size-large.arco-react-tree-select-single input{font-size:16px}.arco-react-tree-select-size-large.arco-react-tree-select-multiple .arco-react-tree-select-view-with-prefix{padding-left:15px}.arco-react-tree-select{display:inline-block;position:relative;box-sizing:border-box;width:100%;cursor:pointer}.arco-react-tree-select-view{display:flex;position:relative;box-sizing:border-box;width:100%;border-radius:var(--border-radius-small);outline:none;user-select:none;text-align:left;transition:all .1s cubic-bezier(0,0,1,1),padding 0s linear}.arco-react-tree-select-view input{color:inherit;cursor:inherit}.arco-react-tree-select-view input::placeholder{color:var(--color-text-3)}.arco-react-tree-select-multiple,.arco-react-tree-select-show-search{cursor:text}.arco-react-tree-select-disabled{cursor:not-allowed}.arco-react-tree-select-disabled .arco-react-tree-select-view input::placeholder{color:var(--color-text-4)}.arco-react-tree-select-single .arco-react-tree-select-view-input{box-sizing:border-box;width:100%;padding:0;border:none;outline:none;background:transparent;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.arco-react-tree-select-single .arco-react-tree-select-view-value{display:inline-block;box-sizing:border-box;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.arco-react-tree-select-single .arco-react-tree-select-view-value:after{content:\".\";font-size:0;line-height:0;visibility:hidden}.arco-react-tree-select-single .arco-react-tree-select-view .arco-react-tree-select-hidden{width:0!important;position:absolute}.arco-react-tree-select-multiple{vertical-align:top}.arco-react-tree-select-multiple .arco-react-tree-select-view{padding:0 4px;line-height:0}.arco-react-tree-select-multiple .arco-react-tree-select-view-with-prefix{padding-left:12px}.arco-react-tree-select-multiple .arco-react-input-tag{flex:1;padding:0;border:none!important;background:none!important;box-shadow:none!important;overflow:hidden}.arco-react-tree-select-multiple .arco-react-tag{max-width:100%}.arco-react-tree-select-multiple:not(.arco-react-tree-select-focused) .arco-react-input-tag input:not(:first-child)[value=\"\"]{width:0!important;position:absolute}.arco-react-tree-select-prefix{display:flex;align-items:center;margin-right:12px;white-space:nowrap;color:var(--color-text-2)}.arco-react-tree-select-suffix{display:flex;align-items:center;margin-left:4px}.arco-react-tree-select-suffix-icon,.arco-react-tree-select-search-icon,.arco-react-tree-select-loading-icon,.arco-react-tree-select-expand-icon,.arco-react-tree-select-clear-icon{font-size:12px;transition:all .1s cubic-bezier(0,0,1,1)}.arco-react-tree-select-arrow-icon{font-size:12px}.arco-react-tree-select-open .arco-react-tree-select-arrow-icon svg{transform:rotate(180deg)}.arco-react-tree-select .arco-react-tree-select-clear-icon{display:none;cursor:pointer}.arco-react-tree-select .arco-react-tree-select-clear-icon>svg{position:relative;transition:all .1s cubic-bezier(0,0,1,1)}.arco-react-tree-select:hover .arco-react-tree-select-clear-icon{display:block}.arco-react-tree-select:hover .arco-react-tree-select-clear-icon~*{display:none}.arco-react-tree-select-popup{box-sizing:border-box;border:1px solid var(--color-fill-3);border-radius:var(--border-radius-medium);background-color:var(--color-bg-popup);box-shadow:0 4px 10px #0000001a;padding:4px 4px 4px 10px;max-height:200px;overflow:auto}.arco-react-tree-select-popup .arco-react-tree-node{padding-left:0}.arco-react-tree-select-highlight{font-weight:500}.arco-react-trigger{position:absolute;z-index:1000;backface-visibility:hidden}.arco-react-trigger-arrow{background-color:var(--color-bg-5);content:\"\";height:8px;width:8px;position:absolute;display:block;box-sizing:border-box;transform:rotate(45deg);transform-origin:50% 50% 0;z-index:-1}.arco-react-trigger[trigger-placement=top] .arco-react-trigger-arrow,.arco-react-trigger[trigger-placement=tl] .arco-react-trigger-arrow,.arco-react-trigger[trigger-placement=tr] .arco-react-trigger-arrow{bottom:-4px;margin-left:-4px;border-top:none;border-left:none;border-bottom-right-radius:2px}.arco-react-trigger[trigger-placement=bottom] .arco-react-trigger-arrow,.arco-react-trigger[trigger-placement=bl] .arco-react-trigger-arrow,.arco-react-trigger[trigger-placement=br] .arco-react-trigger-arrow{top:-4px;margin-left:-4px;border-bottom:none;border-right:none;border-top-left-radius:2px}.arco-react-trigger[trigger-placement=left] .arco-react-trigger-arrow,.arco-react-trigger[trigger-placement=lt] .arco-react-trigger-arrow,.arco-react-trigger[trigger-placement=lb] .arco-react-trigger-arrow{right:-4px;margin-top:-4px;border-left:none;border-bottom:none;border-top-right-radius:2px}.arco-react-trigger[trigger-placement=right] .arco-react-trigger-arrow,.arco-react-trigger[trigger-placement=rt] .arco-react-trigger-arrow,.arco-react-trigger[trigger-placement=rb] .arco-react-trigger-arrow{left:-4px;margin-top:-4px;border-top:none;border-right:none;border-bottom-left-radius:2px}.arco-react-typography{color:var(--color-text-1);line-height:1.5715;word-break:break-all}h1.arco-react-typography,h2.arco-react-typography,h3.arco-react-typography,h4.arco-react-typography,h5.arco-react-typography,h6.arco-react-typography{font-weight:500;margin-top:1em;margin-bottom:.5em}h1.arco-react-typography{font-size:36px;line-height:1.23}h2.arco-react-typography{font-size:32px;line-height:1.25}h3.arco-react-typography{font-size:28px;line-height:1.29}h4.arco-react-typography{font-size:24px;line-height:1.33}h5.arco-react-typography{font-size:20px;line-height:1.4}h6.arco-react-typography{font-size:16px;line-height:1.5}div.arco-react-typography,p.arco-react-typography{margin-top:0;margin-bottom:1em}.arco-react-typography-simple-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.arco-react-typography-primary{color:rgb(var(--primary-6))}.arco-react-typography-secondary{color:var(--color-text-2)}.arco-react-typography-success{color:rgb(var(--success-6))}.arco-react-typography-warning{color:rgb(var(--warning-6))}.arco-react-typography-error{color:rgb(var(--danger-6))}.arco-react-typography-disabled{color:var(--color-text-4);cursor:not-allowed}.arco-react-typography mark{background-color:rgb(var(--yellow-4))}.arco-react-typography u{text-decoration:underline}.arco-react-typography del{text-decoration:line-through}.arco-react-typography b{font-weight:500}.arco-react-typography code{font-size:85%;color:var(--color-text-2);border:1px solid var(--color-neutral-3);background-color:var(--color-neutral-2);padding:2px 8px;margin:0 2px;border-radius:2px}.arco-react-typography blockquote{margin:0 0 1em;border-left:2px solid var(--color-neutral-6);background-color:var(--color-bg-2);padding-left:8px}.arco-react-typography ol,.arco-react-typography ul{padding:0;margin:0}.arco-react-typography ul li,.arco-react-typography ol li{margin-left:20px}.arco-react-typography ul{list-style:circle}.arco-react-typography-spacing-close{line-height:1.3}.arco-react-typography-operation-copy,.arco-react-typography-operation-copied{padding:2px;margin-left:2px}.arco-react-typography-operation-copy{cursor:pointer;color:var(--color-text-2);background-color:transparent;border-radius:2px;transition:background-color .1s cubic-bezier(0,0,1,1)}.arco-react-typography-operation-copy:hover{color:var(--color-text-2);background-color:var(--color-fill-2)}.arco-react-typography-operation-copied{color:rgb(var(--success-6))}.arco-react-typography-operation-edit{padding:2px;margin-left:2px;cursor:pointer;color:var(--color-text-2);background-color:transparent;border-radius:2px;transition:background-color .1s cubic-bezier(0,0,1,1)}.arco-react-typography-operation-edit:hover{color:var(--color-text-2);background-color:var(--color-fill-2)}.arco-react-typography-operation-expand{color:rgb(var(--primary-6));margin:0 4px;cursor:pointer}.arco-react-typography-operation-expand:hover{color:rgb(var(--primary-5))}.arco-react-typography-edit-content{position:relative;left:-13px;margin-right:-13px;margin-top:-5px;margin-bottom:calc(1em - 5px)}.arco-react-upload{display:inline-block;max-width:100%}.arco-react-upload-type-picture-card{vertical-align:top}.arco-react-upload-drag{width:100%}.arco-react-upload-hide{display:none}.arco-react-upload-disabled .arco-react-upload-trigger-picture,.arco-react-upload-disabled .arco-react-upload-trigger-picture:hover{cursor:not-allowed;border-color:var(--color-neutral-4);background-color:var(--color-fill-1);color:var(--color-text-4)}.arco-react-upload-disabled .arco-react-upload-trigger-drag,.arco-react-upload-disabled .arco-react-upload-trigger-drag:hover{cursor:not-allowed;border-color:var(--color-text-4);background-color:var(--color-fill-1)}.arco-react-upload-disabled .arco-react-upload-trigger-drag .arco-react-icon-plus,.arco-react-upload-disabled .arco-react-upload-trigger-drag:hover .arco-react-icon-plus,.arco-react-upload-disabled .arco-react-upload-trigger-drag .arco-react-upload-trigger-drag-text,.arco-react-upload-disabled .arco-react-upload-trigger-drag:hover .arco-react-upload-trigger-drag-text{color:var(--color-text-4)}.arco-react-upload-disabled .arco-react-upload-trigger-tip{color:var(--color-text-4)}.arco-react-upload-trigger{cursor:pointer;display:inline-block;vertical-align:top;width:100%}.arco-react-upload-trigger-tip{color:var(--color-text-3);margin-top:4px;font-size:12px;line-height:1.5;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.arco-react-upload-trigger-picture{min-width:80px;height:80px;color:var(--color-text-2);text-align:center;margin-bottom:0;background:var(--color-fill-2);border-radius:var(--border-radius-small);border:1px dashed var(--color-neutral-3);transition:all .1s cubic-bezier(0,0,1,1)}.arco-react-upload-trigger-picture:hover{border-color:var(--color-neutral-4);background-color:var(--color-fill-3);color:var(--color-text-2)}.arco-react-upload-trigger-picture-text{position:relative;top:50%;transform:translateY(-50%)}.arco-react-upload-trigger-drag{width:100%;border-radius:var(--border-radius-small);border:1px dashed var(--color-neutral-3);background-color:var(--color-fill-1);text-align:center;transition:all .2s ease;color:var(--color-text-1);padding:50px 0}.arco-react-upload-trigger-drag .arco-react-icon-plus{font-size:14px;margin-bottom:24px;color:var(--color-text-2)}.arco-react-upload-trigger-drag:hover{border-color:var(--color-neutral-4);background-color:var(--color-fill-3)}.arco-react-upload-trigger-drag:hover .arco-react-upload-trigger-drag-text{color:var(--color-text-1)}.arco-react-upload-trigger-drag:hover .arco-react-icon-plus{color:var(--color-text-2)}.arco-react-upload-trigger-drag-active{border-color:rgb(var(--primary-6));color:var(--color-text-1);background-color:var(--color-primary-light-1)}.arco-react-upload-trigger-drag-active .arco-react-upload-trigger-drag-text{color:var(--color-text-1)}.arco-react-upload-trigger-drag-active .arco-react-icon-plus{color:rgb(var(--primary-6))}.arco-react-upload-trigger-drag .arco-react-upload-trigger-tip{margin-top:0}.arco-react-upload-trigger-drag-text{color:var(--color-text-1);line-height:1.5;font-size:14px}.arco-react-upload-hide+.arco-react-upload-list .arco-react-upload-list-item:first-of-type{margin-top:0}.arco-react-upload-list{width:100%}.arco-react-upload-list-type-text .arco-react-upload-list-item:first-of-type,.arco-react-upload-list-type-picture-list .arco-react-upload-list-item:first-of-type{margin-top:24px}.arco-react-upload-list-file-icon{line-height:16px;font-size:16px;color:rgb(var(--primary-6));margin-right:12px}.arco-react-upload-list-preview-icon{cursor:pointer}.arco-react-upload-list-error-icon{cursor:pointer;color:rgb(var(--danger-6));font-size:14px;margin-left:4px}.arco-react-upload-list-success-icon{cursor:pointer;color:rgb(var(--success-6));font-size:14px;line-height:14px}.arco-react-upload-list-remove-icon{position:relative;cursor:pointer;font-size:14px}.arco-react-upload-list-start-icon,.arco-react-upload-list-cancel-icon{position:absolute;color:var(--color-white);transform:translate(-50%) translateY(-50%);top:50%;left:50%;font-size:12px}.arco-react-upload-list-reupload-icon{cursor:pointer;color:rgb(var(--primary-6));font-size:14px;transition:all .2s ease}.arco-react-upload-list-reupload-icon:active,.arco-react-upload-list-reupload-icon:hover{color:rgb(var(--primary-7))}.arco-react-upload-list-status{position:relative;cursor:pointer;line-height:12px}.arco-react-upload-list-status:hover .arco-react-progress-circle-mask{stroke:rgba(var(--gray-10),.2)}.arco-react-upload-list-status:hover .arco-react-progress-circle-path{stroke:rgb(var(--primary-7))}.arco-react-upload-list-item-done .arco-react-upload-list-file-icon{color:rgb(var(--primary-6))}.arco-react-upload-list-item{box-sizing:border-box;padding-right:24px;margin-top:12px;position:relative}.arco-react-upload-list-item-operation{font-size:12px;position:absolute;right:0;top:50%;transform:translateY(-50%);color:var(--color-text-2)}.arco-react-upload-list-item-operation .arco-react-upload-list-remove-icon{font-size:inherit}.arco-react-upload-list-item-text{font-size:14px;display:flex;align-items:center;border-radius:var(--border-radius-small);width:100%;box-sizing:border-box;background-color:var(--color-fill-1);padding:8px 10px 8px 12px;flex-wrap:nowrap}.arco-react-upload-list-item-text-content{flex:1;display:flex;align-items:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;justify-content:space-between;flex-wrap:nowrap;transition:background-color .1s cubic-bezier(0,0,1,1)}.arco-react-upload-list-item-text-thumbnail{height:40px;width:40px;margin-right:12px;flex-shrink:0}.arco-react-upload-list-item-text-thumbnail img{width:100%;height:100%}.arco-react-upload-list-item-text-name{white-space:nowrap;display:flex;overflow:hidden;flex-shrink:1;flex-grow:1;align-items:center;color:var(--color-text-1);font-size:14px;text-overflow:ellipsis;line-height:1.4286;margin-right:10px}.arco-react-upload-list-item-text-name-link{cursor:pointer;text-decoration:none;overflow:hidden;color:rgb(var(--link-6));text-overflow:ellipsis}.arco-react-upload-list-item-text-name-text{overflow:hidden;text-overflow:ellipsis}.arco-react-upload-list-item-error .arco-react-upload-list-status,.arco-react-upload-list-item-done .arco-react-upload-list-status{display:none}.arco-react-upload-list-type-text .arco-react-upload-list-item-error .arco-react-upload-list-item-text-name-link,.arco-react-upload-list-type-text .arco-react-upload-list-item-error .arco-react-upload-list-item-text-name{color:rgb(var(--danger-6))}.arco-react-upload-list.arco-react-upload-list-type-picture-card{display:inline;vertical-align:top}.arco-react-upload-list.arco-react-upload-list-type-picture-card .arco-react-upload-list-status{top:50%;transform:translateY(-50%);margin-left:0}.arco-react-upload-list-type-picture-card .arco-react-upload-list-item{display:inline-block;vertical-align:top;margin-top:0;padding-right:0;margin-right:8px;margin-bottom:8px;overflow:hidden;transition:all .2s cubic-bezier(.34,.69,.1,1)}.arco-react-upload-list-type-picture-card .arco-react-upload-list-item-error .arco-react-upload-list-item-picture-mask{opacity:1}.arco-react-upload-list-item-picture{width:80px;height:80px;line-height:80px;position:relative;overflow:hidden;border-radius:var(--border-radius-small);box-sizing:border-box;text-align:center;vertical-align:top}.arco-react-upload-list-item-picture img{width:100%;height:100%}.arco-react-upload-list-item-picture-mask{cursor:pointer;position:absolute;text-align:center;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);color:var(--color-white);font-size:16px;line-height:80px;opacity:0;transition:opacity .1s cubic-bezier(0,0,1,1)}.arco-react-upload-list-item-picture-operation{display:none;font-size:14px}.arco-react-upload-list-item-picture-operation .arco-react-upload-list-reupload-icon{color:var(--color-white)}.arco-react-upload-list-item-picture-operation .arco-react-upload-list-reupload-icon+.arco-react-upload-list-remove-icon,.arco-react-upload-list-item-picture-operation .arco-react-upload-list-preview-icon+.arco-react-upload-list-remove-icon{margin-left:20px}.arco-react-upload-list-item-picture-error-tip .arco-react-upload-list-error-icon{font-size:26px;color:var(--color-white)}.arco-react-upload-list-item-picture-mask:hover,.arco-react-upload-list-item-picture-mask:hover .arco-react-upload-list-item-picture-operation{opacity:1;display:block}.arco-react-upload-list-item-picture-mask:hover .arco-react-upload-list-item-picture-error-tip{display:none}.arco-react-upload-list-type-picture-list .arco-react-upload-list-item-text{padding-top:8px;padding-bottom:8px}.arco-react-upload-list-type-picture-list .arco-react-upload-list-item-error .arco-react-upload-list-item-text{background-color:var(--color-danger-light-1)}.arco-react-upload-list-type-picture-list .arco-react-upload-list-item-error .arco-react-upload-list-item-text-name-link,.arco-react-upload-list-type-picture-list .arco-react-upload-list-item-error .arco-react-upload-list-item-text-name{color:rgb(var(--danger-6))}.arco-react-upload-slide-up-enter{opacity:0}.arco-react-upload-slide-up-enter-active{opacity:1;transition:opacity .2s cubic-bezier(.34,.69,.1,1)}.arco-react-upload-slide-up-exit{opacity:1}.arco-react-upload-slide-up-exit-active{opacity:0;overflow:hidden;margin:0;transition:opacity .1s cubic-bezier(0,0,1,1),height .3s cubic-bezier(.34,.69,.1,1) .1s,margin .3s cubic-bezier(.34,.69,.1,1) .1s}.arco-react-upload-list-item.arco-react-upload-slide-inline-enter{opacity:0}.arco-react-upload-list-item.arco-react-upload-slide-inline-enter-active{opacity:1;transition:opacity .2s cubic-bezier(0,0,1,1)}.arco-react-upload-list-item.arco-react-upload-slide-inline-exit{opacity:1}.arco-react-upload-list-item.arco-react-upload-slide-inline-exit-active{opacity:0;overflow:hidden;margin:0;transition:opacity .1s cubic-bezier(0,0,1,1),width .3s cubic-bezier(.34,.69,.1,1) .1s,margin .3s cubic-bezier(.34,.69,.1,1) .1s}.ac-navbar-search-history-header{display:flex;align-items:center;justify-content:space-between}.ac-navbar-search-history-list{padding:0;margin:12px 0 32px;max-height:170px;overflow-y:auto}.ac-navbar-search-history-item{position:relative;display:flex;align-items:center;height:40px;padding:0 10px;margin-bottom:2px;color:var(--color-text-1);text-decoration:none;cursor:pointer}.ac-navbar-search-history-item:hover{background-color:var(--color-fill-1)}.ac-navbar-search-history-item:hover .ac-navbar-search-modal-title{color:rgb(var(--primary-6))}.ac-navbar-search-history-item .arco-icon-history,.ac-navbar-search-history-item .arco-react-icon-history{font-size:16px;margin-right:8px}.ac-navbar-search-history-close{position:absolute!important;right:10px;top:14px}html.rtl .ac-navbar-search-modal-close{position:absolute!important;right:initial;left:10px;top:14px}html.rtl .ac-navbar-search-modal-item .arco-icon-history,html.rtl .ac-navbar-search-modal-item .arco-react-icon-history{font-size:16px;margin-right:0;margin-left:8px}.ac-navbar-search-hot{display:flex}.ac-navbar-search-hot-half{width:50%}.ac-navbar-search-hot-title{margin-bottom:12px}.ac-navbar-search-hot-list{display:flex;flex-direction:column;padding:0}.ac-navbar-search-hot-item{position:relative;display:flex;align-items:center;width:100%;height:56px;margin:2px 0;color:var(--color-text-2);padding:0 8px;box-sizing:border-box;font-size:16px;font-weight:400;border-radius:4px;text-decoration:none;transition:all .2s;cursor:pointer}.ac-navbar-search-hot-item-icon,.ac-navbar-search-hot-item-icon-active{position:absolute;top:0;left:0}.ac-navbar-search-hot-item-icon{opacity:1}.ac-navbar-search-hot-item-icon-active{opacity:0}.ac-navbar-search-hot-item:hover{color:rgb(var(--primary-6));background-color:var(--color-fill-2)}.ac-navbar-search-hot-item:hover .ac-navbar-search-modal-svg-wrapper{background:var(--color-bg-2)}.ac-navbar-search-hot-item:hover .ac-navbar-search-modal-enter-icon{opacity:1}.ac-navbar-search-hot-item:hover .ac-navbar-search-modal-item-icon{opacity:0}.ac-navbar-search-hot-item:hover .ac-navbar-search-modal-item-icon-active{opacity:1}.ac-navbar-search-hot-svg-wrapper{position:relative;background:var(--color-fill-2);display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;margin-right:20px}.ac-navbar-search-hot-enter-icon{position:absolute;display:flex;align-items:center;justify-content:center;width:28px;height:24px;background:var(--color-fill-3);border-radius:4px;right:10px;top:50%;transform:translateY(-50%);opacity:0}.ac-navbar-search-hot-svg-wrapper-rect{border-radius:8px}body[arco-theme=dark] .ac-navbar-search-modal-item-icon{filter:invert(1) grayscale(1) brightness(1.1)}html.rtl .ac-navbar-search-modal-half:first-child{margin-left:20px;margin-right:0}html.rtl .ac-navbar-search-modal-svg-wrapper{margin-left:20px;margin-right:0}html.rtl .ac-navbar-search-modal-title{text-align:right}.ac-navbar-search-modal-container{height:460px;padding:0 24px 24px;box-sizing:border-box;overflow-y:auto}.ac-navbar-search-modal-container-exact{padding:12px 0 16px;box-sizing:border-box}.ac-navbar-search-modal-container-exact-item{position:relative;display:flex;align-items:center;padding:8px;height:56px;box-sizing:border-box;border-radius:8px;margin:2px 0;cursor:pointer;transition:all .2s}.ac-navbar-search-modal-container-exact-icon{position:relative;display:flex;align-items:center;justify-content:center;border-radius:50%;margin-right:24px;width:40px;height:40px;background-color:var(--color-fill-1)}.ac-navbar-search-modal-container-item{position:relative;padding:8px 16px;border-radius:4px;cursor:pointer;transition:all .2s}.ac-navbar-search-modal-container-item-type{display:flex;align-items:center;justify-content:center;height:22px;padding:1px 8px;background-color:#4e5969;border-radius:2px;color:#fff;margin-left:12px;font-size:12px;box-sizing:border-box}.ac-navbar-search-modal-container-item-vue{font-weight:bold}.ac-navbar-search-modal-container-item-design{background:var(--color-fill-2);color:var(--color-text-1)}.ac-navbar-search-modal-container-item-title{line-height:24px;font-size:16px;margin-bottom:6px;color:var(--color-text-2)}.ac-navbar-search-modal-container-item-desc{color:var(--color-text-2);font-size:14px;line-height:22px}.ac-navbar-search-modal-container-item-active{background-color:var(--color-fill-1)}.ac-navbar-search-modal-container-item-active .ac-navbar-search-modal-item-type{background-color:rgb(var(--primary-6))}.ac-navbar-search-modal-container-item-active .ac-navbar-search-modal-item-vue{background-color:rgb(var(--cyan-6))}.ac-navbar-search-modal-container-item-active .ac-navbar-search-modal-item-design{color:#fff;border:none}.ac-navbar-search-modal-container-item-active .ac-navbar-search-modal-exact-icon{opacity:1}.ac-navbar-search-modal-container-item-active .ac-navbar-search-modal-enter-icon{opacity:1}.ac-navbar-search-modal-container-enter-icon{position:absolute;display:flex;align-items:center;justify-content:center;width:28px;height:24px;background:var(--color-fill-3);border-radius:4px;right:10px;top:50%;transform:translateY(-50%);opacity:0;transition:all .2s}.ac-navbar-search-modal-container-doc{margin-bottom:8px}.ac-navbar-search-modal-container-doc-title{font-size:12px;margin-bottom:4px}.ac-navbar-search-modal-container-doc-item{display:flex;box-sizing:border-box;padding:4px 8px;border-radius:4px;cursor:pointer;position:relative}.ac-navbar-search-modal-container-doc-item-icon{transform:scale(.8);display:flex}.ac-navbar-search-modal-container-doc-item-icon svg{color:var(--color-text-3);opacity:.6;stroke-width:1.8}.ac-navbar-search-modal-container-doc-item-icon-anchor,.ac-navbar-search-modal-container-doc-item-icon-doc{height:20px;padding:14px 0;margin-right:6px}.ac-navbar-search-modal-container-doc-item-icon-line{height:48px}.ac-navbar-search-modal-container-doc-item-result{font-size:13px;display:flex;flex-direction:column;justify-content:center}.ac-navbar-search-modal-container-doc-item-result-desc{vertical-align:middle;padding-right:36px}html.rtl .ac-navbar-search-modal-exact-icon{margin-left:24px;margin-right:0}html.rtl .ac-navbar-search-modal-list-item-type{margin-right:12px;margin-left:0}html.rtl .ac-navbar-search-modal-enter-icon{right:initial;left:10px;transform:scaleX(-1) translateY(-50%)}html.rtl .ac-navbar-search-modal-doc-title{text-align:right}html.rtl .ac-navbar-search-modal-doc-item-result-desc{padding-right:0;padding-left:36px}html.rtl .ac-navbar-search-modal-doc-item-result-label{text-align:right}html.rtl .ac-navbar-search-modal-doc-item-icon svg{transform:scaleX(-1)}.ac-navbar-container{width:100%;height:60px;box-sizing:border-box;min-height:60px;max-height:60px;display:flex;justify-content:space-between;position:fixed;top:0;left:0;right:0;z-index:999;border-bottom:1px solid var(--color-border);background-color:var(--color-bg-2)}.ac-navbar-container-no-border{border-bottom:none}.ac-navbar-btn-icon{font-size:18px!important;color:var(--color-text-1)!important;margin:0 10px;line-height:24px!important}.ac-navbar-mask{position:fixed;width:100vw;height:100vh;background-color:var(--color-mask-bg);left:0;top:0;z-index:990}.ac-navbar-fadeIn-enter,.ac-navbar-fadeIn-appear{opacity:0}.ac-navbar-fadeIn-enter-active,.ac-navbar-fadeIn-appear-active{opacity:1;transition:opacity .3s}.ac-navbar-fadeIn-exit{opacity:1}.ac-navbar-fadeIn-exit-active{opacity:0;transition:opacity .3s}.ac-navbar-dropdown{display:flex;justify-content:center;padding-bottom:20px;width:1180px}.ac-navbar-dropdown-block{padding-top:30px;box-sizing:border-box;overflow:hidden;height:100%}.ac-navbar-dropdown-title{display:flex;justify-content:space-between;align-items:center;height:48px;border-bottom:1px solid var(--color-border);color:var(--color-text-1);font-size:20px}.ac-navbar-dropdown-list{display:grid;grid-template-columns:1fr 1fr;grid-row-gap:12px;grid-column-gap:24px;padding:20px 0}.ac-navbar-dropdown-item{display:flex;align-items:center;cursor:pointer;box-sizing:border-box;padding:4px;border-radius:8px;color:var(--color-text-1);text-decoration:none}.ac-navbar-dropdown-item-icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:8px;background-color:rgb(var(--primary-6));flex-shrink:0;margin-right:8px}.ac-navbar-dropdown-item-name{margin:0 16px;font-weight:500}.ac-navbar-dropdown-item-desc{margin-top:2px;color:var(--color-text-2);font-size:12px}.ac-navbar-dropdown-item:hover{background-color:var(--color-fill-2);color:rgb(var(--primary-6))}.ac-navbar-dropdown-develop .ac-navbar-dropdown-item-icon{background-color:#000}.ac-navbar-dropdown-develop .ac-navbar-dropdown-block-left .ac-navbar-dropdown-item-icon{background-color:transparent}.ac-navbar-dropdown-develop .ac-navbar-dropdown-block-left .ac-navbar-dropdown-item-name{margin:0 8px 0 0;display:flex}.ac-navbar-dropdown-develop .ac-navbar-dropdown-block-left .ac-navbar-dropdown-item-version{display:flex;align-items:center;padding:0 8px;background-color:var(--color-fill-3);border-radius:2px;margin:0 8px;font-size:12px;color:var(--color-text-1);transition:all .2s}.ac-navbar-dropdown-develop .ac-navbar-dropdown-block-left .ac-navbar-dropdown-item:hover .ac-navbar-dropdown-item-version{background-color:rgb(var(--primary-6));color:#fff}.ac-navbar-dropdown-ecosystem .ac-navbar-dropdown-list{width:100%;padding:24px 0;display:grid;grid-template-columns:33% 33% 33%;grid-row-gap:12px;grid-column-gap:20px}.ac-navbar-dropdown-ecosystem .ac-navbar-dropdown-item-desc{margin:2px 16px 0;color:var(--color-text-2);font-size:12px;font-weight:normal}.ac-navbar-navTab{display:flex}.ac-navbar-navTab-item{display:flex;padding:18px 8px;height:60px;box-sizing:border-box;align-items:center}.ac-navbar-navTab-item-link{padding:3px 8px;border-radius:2px;color:var(--color-text-1);position:relative;font-weight:500;cursor:pointer;text-decoration:none}.ac-navbar-navTab-item-link:hover{color:var(--color-text-1)}.ac-navbar-navTab-item-link svg{font-size:12px;stroke-width:6px;vertical-align:-1px;color:var(--color-text-1);margin:0 4px;transition:all .2s}.ac-navbar-navTab-item-link:focus-visible{outline:2px solid rgb(var(--primary-6))}.ac-navbar-navTab-item-active .ac-navbar-navTab-item-link{background-color:var(--color-fill-2)}.ac-navbar-navTab-item-active .ac-navbar-navTab-item-link svg{transform:rotate(180deg)}.ac-navbar-navTab-container{width:100vw;display:flex;justify-content:center;position:relative;z-index:998;background-color:var(--color-bg-2);overflow:hidden}.ac-navbar-global-notice{position:fixed;top:60px;width:100%;height:32px;line-height:32px;background-color:rgb(var(--blue-6));color:var(--color-white);display:flex;justify-content:center;z-index:980}.ac-navbar-global-notice-container{width:calc(100% - 120px);text-align:center;color:var(--color-white)!important;text-decoration:none}.ac-navbar-global-notice-container>span{font-size:13px;margin-left:36px;margin-right:48px}.ac-navbar-global-notice-close-icon{position:absolute;right:20px;cursor:pointer;width:20px;height:20px;line-height:20px;margin-top:6px;text-align:center;border-radius:4px}.ac-navbar-global-notice-close-icon:hover{background-color:#ffffff4d}@media screen and (max-width: 920px){.ac-navbar-global-notice{position:relative;top:0;height:28px;line-height:28px}.ac-navbar-global-notice a>b{display:none}.ac-navbar-global-notice a>span{font-weight:500;margin:0;font-size:12px}.ac-navbar-global-notice-close-icon{margin-top:4px}}:global(html.rtl) .ac-navbar-global-notice svg{transform:scaleX(-1)}.ac-navbar-left-panel{background:var(--color-bg-3);border:1px solid var(--color-border);box-shadow:0 8px 20px #0000001a;border-radius:8px}.ac-navbar-left-panel-list{display:grid;grid-template-columns:50% 50%;padding:16px;width:400px}.ac-navbar-left-panel-return-home{display:flex;justify-content:space-between;align-items:center;padding:0 32px;height:68px;box-sizing:border-box;border-bottom:1px solid var(--color-border);transition:all .2s;cursor:pointer}.ac-navbar-left-panel-return-home .arco-icon-arrow-right,.ac-navbar-left-panel-return-home .arco-react-icon-arrow-right{color:var(--color-text-1);font-size:18px}.ac-navbar-left-panel-return-home:hover{background-color:var(--color-fill-1)}.ac-navbar-left-panel-return-home:hover .arco-icon-arrow-right,.ac-navbar-left-panel-return-home:hover .arco-react-icon-arrow-right{color:rgb(var(--primary-6))}.ac-navbar-left-panel-item{opacity:0;cursor:pointer;position:relative;z-index:2;padding:16px;display:flex;justify-content:flex-start;align-items:center;text-decoration:none}.ac-navbar-left-panel-item:after{position:absolute;z-index:-1;content:\"\";display:block;width:100%;height:100%;background:var(--color-fill-1);border-radius:4px;left:0;opacity:0;transform:scale(.94);transition:all .4s cubic-bezier(.34,1.56,.64,1)}.ac-navbar-left-panel-item-logo{position:relative;width:24px;height:24px;margin-right:16px}.ac-navbar-left-panel-item-logo>span{display:block;position:absolute;top:0;left:0;transition:all .25s ease-out}.ac-navbar-left-panel-item-logo-common{opacity:1}.ac-navbar-left-panel-item-logo-active{opacity:0}.ac-navbar-left-panel-item-text-title{font-size:16px;font-family:\"Nunito Sans\",sans-serif;font-weight:800;color:var(--color-text-1);margin:0;transition:all .2s ease-out}.ac-navbar-left-panel-item-text-desc{font-family:PingFang SC;font-style:normal;font-weight:400;font-size:12px;line-height:12px;color:var(--color-text-2);position:absolute;word-break:keep-all;transform:translateY(0);opacity:0;transition:all .2s ease-out}.ac-navbar-left-panel-item:hover:after{opacity:1;transform:scale(1)}.ac-navbar-left-panel-item:hover .ac-navbar-left-panel-item-text-title{transform:translateY(-8px);color:var(--color-text-1)}.ac-navbar-left-panel-item:hover .ac-navbar-left-panel-item-text-desc{transform:translateY(-4px);opacity:1}.ac-navbar-left-panel-item:hover .ac-navbar-left-panel-item-logo-common{opacity:0}.ac-navbar-left-panel-item:hover .ac-navbar-left-panel-item-logo-active{opacity:1}.ac-navbar-left-panel-trigger{position:relative;display:flex;align-items:center;justify-content:center;color:var(--color-text-1);width:60px;height:60px;box-sizing:border-box;cursor:pointer}.ac-navbar-left-panel-trigger-icon{width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:4px}.ac-navbar-left-panel-trigger:hover .ac-navbar-left-panel-trigger-icon{background-color:var(--color-fill-1)}.ac-navbar-left-panel-trigger:focus-visible .ac-navbar-left-panel-trigger-icon{outline:2px solid rgb(var(--primary-6))}.ac-navbar-left-panel-trigger:after{content:\" \";display:block;position:absolute;width:1px;height:24px;background-color:var(--color-border);right:0;top:50%;transform:translateY(-50%)}.ac-navbar-left-panel-down-enter,.ac-navbar-left-panel-down-appear{opacity:0;box-shadow:0 0 #0000;transform-origin:0% 0%;transform:scale(.55) translateY(-6px)}.ac-navbar-left-panel-down-enter-active,.ac-navbar-left-panel-down-appear-active{opacity:1;transform:scale(1) translateY(0);transform-origin:0% 0%;box-shadow:0 8px 20px #0000001a;transition:all .3s cubic-bezier(.16,1,.3,1)}.ac-navbar-left-panel-down-exit{opacity:1;transform:scale(1) translateY(0);transform-origin:0% 0%;box-shadow:0 8px 20px #0000001a}.ac-navbar-left-panel-down-exit-active{opacity:0;box-shadow:0 0 #0000;transform-origin:0% 0%;transform:scale(.55) translateY(-6px);transition:all .3s cubic-bezier(.16,1,.3,1)}html.rtl .ac-navbar-left-panel{direction:rtl}html.rtl .ac-navbar-left-panel-item-logo{margin-right:0;margin-left:16px}html.rtl .ac-navbar-left-panel-return-home .arco-icon-arrow-right,html.rtl .ac-navbar-left-panel-return-home .arco-react-icon-arrow-right{transform:scaleX(-1)}html.rtl .ac-navbar-left-panel-trigger:after{content:\" \";display:block;position:absolute;width:1px;height:24px;background-color:var(--color-border);right:inherit;left:0;top:50%;transform:translateY(-50%)}.ac-navbar-left-panel-mobile .ac-navbar-left-panel-list{display:grid;grid-template-columns:100%;padding:8px;width:260px}.ac-navbar-left-panel-mobile-trigger{width:48px;height:48px}.ac-navbar-left-panel-mobile-trigger .ac-navbar-left-panel-trigger-icon{transform:scale(.8)}.ac-navbar-logo{display:flex;align-items:center;justify-content:center;width:180px;height:60px;box-sizing:border-box;text-decoration:none}.ac-navbar-logo .logo:focus-visible>svg{outline:2px solid rgb(var(--primary-6))}.ac-navbar-message-box{display:flex;flex-direction:column;box-shadow:0 4px 10px #0000001a;border-radius:var(--border-radius-medium);border:1px solid var(--color-fill-3);box-sizing:border-box;background-color:var(--color-bg-popup);width:324px;max-height:360px}.ac-navbar-message-box-header{width:100%;height:40px;min-height:40px;display:flex;justify-content:space-between;align-items:center;padding:0 20px;box-sizing:border-box;border-bottom:1px solid var(--color-fill-3)}.ac-navbar-message-box-header-title{font-weight:500}.ac-navbar-message-box-list{flex:1;padding:4px 0;box-sizing:border-box;overflow-y:auto;overflow-x:hidden}.ac-navbar-message-box-item{display:inline-block;width:100%;padding:8px 20px;box-sizing:border-box;text-decoration:none;transition:all .2s}.ac-navbar-message-box-item:hover{background-color:var(--color-fill-2)}.ac-navbar-message-box-item[href]:hover .title{color:rgb(var(--primary-6))}.ac-navbar-message-box-item-description{font-size:12px;color:var(--color-text-2);line-height:auto}.ac-navbar-message-box-item-date{font-size:12px;color:var(--color-text-3)}.ac-navbar-search-input{display:flex;align-items:center;justify-content:space-between;height:32px;width:140px;background-color:var(--color-fill-2);border-radius:2px;padding:0 8px;margin:0 24px;transition:all .2s;cursor:pointer}.ac-navbar-search-input:hover{background-color:var(--color-fill-3)}.ac-navbar-search-input:focus-visible{outline:2px solid rgb(var(--primary-6))}.ac-navbar-search-input svg{color:var(--color-text-1);vertical-align:-1px}.ac-navbar-search-input-placeholder{color:var(--color-text-3);margin:0 6px;vertical-align:1px}.ac-navbar-search-input-command{display:flex}.ac-navbar-search-input-key{display:flex;flex-direction:row;justify-content:center;align-items:center;padding:6px;width:17.21px;height:20px;left:117px;top:6px;background:#fff;border:1px solid #c9cdd4;box-sizing:border-box;box-shadow:0 1px #c9cdd4;border-radius:3px;font-size:12px;color:var(--color-text-3)}.ac-navbar-search-input-key:first-child{margin:0 4px}body[arco-theme=dark] .ac-navbar-search-input-key{background:#202022;border:1px solid rgba(255,255,255,.12);box-shadow:0 1px #ffffff1f;color:#fff6}.ac-navbar-search-modal{border-radius:8px!important;box-shadow:0 8px 20px #0000001a!important}.ac-navbar-search-modal .arco-modal-content,.ac-navbar-search-modal .arco-react-modal-content{padding:0}.ac-navbar-search-modal-content{padding:24px}.ac-navbar-search-modal-input-wrapper{display:flex;align-items:center;justify-content:space-between;height:60px;padding:0 20px;box-sizing:border-box;background:var(--color-bg-3);border-bottom:1px solid var(--color-border);border-radius:8px 8px 0 0}.ac-navbar-search-modal-left{display:flex;align-items:center}.ac-navbar-search-modal-left svg{color:rgb(var(--primary-6));font-size:20px;margin-right:10px}.ac-navbar-search-modal-left input{border:none;outline:none;height:32px;line-height:32px;font-size:16px;background-color:transparent;color:var(--color-text-1)}.ac-navbar-search-modal-right{display:flex}.ac-navbar-search-modal-key-word{font-size:12px;color:var(--color-text-3);margin-left:8px;margin-right:4px}.ac-navbar-search-modal-count{padding:24px 24px 12px}.DocSearch-Footer{border-top:1px solid var(--color-border);align-items:center;height:48px;display:flex;flex-direction:row;justify-content:space-between;padding:0 24px}.DocSearch-Footer :global(.DocSearch-Label){color:var(--color-text-2)!important}.DocSearch-Footer svg{color:var(--primary-6)!important;margin-left:8px;vertical-align:-6px}html.rtl .DocSearch-Footer svg{margin-right:8px;margin-left:0}html.rtl .ac-navbar-search-modal-left svg{margin-right:0;margin-left:10px}html.rtl .ac-navbar-search-modal-key-word{margin-right:8px;margin-left:4px}.ac-navbar-select-nav{padding:18px 2px;height:60px;box-sizing:border-box;display:flex;align-items:center}.ac-navbar-select-nav .arco-select-view{font-weight:500}.ac-navbar-select-nav .arco-select-view svg{stroke-width:6px}.ac-navbar-select-nav-option svg{padding-right:8px}html.rtl .ac-navbar-select-nav-option svg{padding-left:8px;padding-right:0}.ac-navbar-profile{padding:4px 0;box-shadow:0 4px 10px #0000001a;border-radius:var(--border-radius-medium);border:1px solid var(--color-fill-3);box-sizing:border-box;background-color:var(--color-bg-popup)}.ac-navbar-profile-user{display:flex;padding:12px;align-items:center;box-sizing:border-box;border-bottom:1px solid var(--color-fill-3)}.ac-navbar-profile-user-settings{margin-top:4px!important;margin-bottom:4px!important;padding-top:4px;border-top:1px solid var(--color-fill-3)}.ac-navbar-profile-info{display:flex;flex-direction:column;justify-content:center;margin-left:8px}.ac-navbar-profile-info-nickname{font-weight:500;font-size:14px}.ac-navbar-profile-info-email{font-size:12px;line-height:13px;width:100%}.ac-navbar-profile-version{justify-content:space-between;width:100%}.ac-navbar-profile-version svg{color:var(--color-text-2)}.ac-navbar-profile-item{display:flex;align-items:center;height:36px;padding:0 14px;box-sizing:border-box;color:var(--color-text-1);text-decoration:none;cursor:pointer;transition:all .2s}.ac-navbar-profile-item-icon{margin-right:10px;font-size:16px;margin-bottom:-2px;color:var(--color-text-1)}.ac-navbar-profile-item:hover{background-color:var(--color-fill-2)}.ac-navbar-profile-avatar{background-color:var(--color-bg-4)!important;cursor:pointer;box-sizing:content-box!important;padding:2px;transition:all .2s;margin-right:20px}.ac-navbar-profile-avatar:hover{filter:drop-shadow(0 2px 3px rgba(78,89,105,.14))}.ac-navbar-profile-avatar-need-login{background-color:var(--color-fill-4)!important}html.rtl .ac-navbar-profile-info{margin-left:0;margin-right:8px}html.rtl .ac-navbar-profile-item svg{margin-right:0;margin-left:10px}html.rtl .ac-navbar-profile-avatar{margin-right:0;margin-left:20px}.ac-navbar-user-settings{padding:4px}.ac-navbar-user-settings-card{margin-bottom:30px}.ac-navbar-user-settings-card-header{display:flex;justify-content:space-between;align-items:center}.ac-navbar-user-settings-card-header h3{font-size:14px;color:var(--color-text-2);margin-bottom:12px}.ac-navbar-user-settings-card-info{padding:8px;align-items:center}.ac-navbar-user-settings-card-info-desc{margin-left:18px}.ac-navbar-user-settings-card-info-desc .arco-descriptions-item-label{font-size:13px}.ac-navbar-user-settings-card-info-desc td{padding:4px 6px}.ac-navbar-user-settings-card-info-desc .arco-typography{font-size:16px;line-height:22px;color:var(--color-text-2)}.ac-navbar-user-settings-card-info-desc-id{display:flex;font-size:13px;color:var(--color-text-3);line-height:16px;margin-top:6px}.ac-navbar-user-settings-card-info-desc-id>div{text-align:center;font-size:12px;line-height:16px;width:16px;height:16px;font-weight:bold;border-radius:4px;background-color:var(--color-text-4);color:var(--color-white);margin-right:4px}.ac-navbar-user-settings-card-info-desc-id>span{line-height:14px}.ac-navbar-user-settings-card-info-email{color:var(--color-text-2)}.ac-navbar-user-settings-card-info-email>span{margin-left:12px;font-size:12px}.ac-navbar-user-settings-card-info-email-success{color:rgb(var(--green-6))}.ac-navbar-user-settings-card-info-email-warning{color:rgb(var(--orange-6))}.ac-navbar-user-settings-card-info-token{display:flex;justify-content:space-between;margin-top:14px;border-bottom:1px solid var(--color-border-2);padding-bottom:4px}.ac-navbar-user-settings-card-info-token .arco-typography{font-size:13px;width:280px;margin-bottom:8px}.ac-navbar-user-settings-card-info-token-time{color:var(--color-text-3);font-size:12px;margin-top:4px;line-height:22px}\n"
  },
  {
    "path": "packages/arco-vue-docs-navbar/package.json",
    "content": "{\n  \"name\": \"@arco-design/arco-vue-docs-navbar\",\n  \"private\": true,\n  \"version\": \"0.2.0\",\n  \"description\": \"Arco Vue 2.0 Docs NavBar\",\n  \"author\": \"ArcoDesign Team\",\n  \"license\": \"MIT\",\n  \"main\": \"dist/index.js\",\n  \"files\": [\n    \"dist\"\n  ],\n  \"scripts\": {\n    \"build\": \"vite build -c vite.config.ts && npm run dtsgen\",\n    \"dtsgen\": \"tsc\",\n    \"less\": \"lessc src/navbar.less src/navbar.css\"\n  },\n  \"devDependencies\": {\n    \"@arco-design/web-react\": \"^2.65.0\",\n    \"@arco-materials/site-navbar-new\": \"^1.2.13\",\n    \"@svgr/core\": \"^5.5.0\",\n    \"@typescript-eslint/eslint-plugin\": \"^4.33.0\",\n    \"@typescript-eslint/parser\": \"^4.33.0\",\n    \"esbuild\": \"^0.12.29\",\n    \"eslint\": \"^7.32.0\",\n    \"eslint-config-airbnb-base\": \"^14.2.1\",\n    \"eslint-config-prettier\": \"^8.10.0\",\n    \"eslint-import-resolver-typescript\": \"^2.7.1\",\n    \"eslint-plugin-import\": \"^2.31.0\",\n    \"eslint-plugin-prettier\": \"^3.4.1\",\n    \"less\": \"^4.2.2\",\n    \"prettier\": \"^2.8.8\",\n    \"react\": \"^17.0.2\",\n    \"react-dom\": \"^17.0.2\",\n    \"react-transition-group\": \"^4.4.5\",\n    \"vite\": \"^2.9.18\"\n  },\n  \"installConfig\": {\n    \"hoistingLimits\": \"workspaces\"\n  }\n}\n"
  },
  {
    "path": "packages/arco-vue-docs-navbar/plugins/rollup-plugin-svgr.ts",
    "content": "import fs from 'fs';\nimport type { Plugin } from 'vite';\nimport svgr from '@svgr/core';\nimport esbuild from 'esbuild';\n\nexport default function svgrPlugin(): Plugin {\n  // TODO: options\n  return {\n    name: 'vite:svgr',\n    // eslint-disable-next-line consistent-return\n    async transform(code, id) {\n      if (id.endsWith('.svg')) {\n        const svg = await fs.promises.readFile(id, 'utf8');\n\n        const componentCode = await svgr(svg, {}, {}).then((res: string) => {\n          return res;\n        });\n\n        const res = await esbuild.transform(componentCode, {\n          loader: 'jsx',\n        });\n\n        return {\n          code: res.code,\n        };\n      }\n    },\n  };\n}\n"
  },
  {
    "path": "packages/arco-vue-docs-navbar/src/index.less",
    "content": "@import '@arco-design/web-react/dist/css/index.less';\n\n//@arco-vars-prefix: arco-react;\n@arco-theme-tag: #react-root;\n"
  },
  {
    "path": "packages/arco-vue-docs-navbar/src/index.tsx",
    "content": "// @ts-ignore\nimport React from 'react';\n// @ts-ignore\nimport ReactDOM from 'react-dom';\nimport Navbar from '@arco-materials/site-navbar-new';\nimport { ConfigProvider } from '@arco-design/web-react';\nimport './index.less';\nimport './navbar.css';\n\ninterface NavBarOptions {\n  version?: string;\n  lang?: string;\n  handleLanguageChange?: (lang: string) => void;\n}\n\nconst ReactApp = ({\n  lang = 'zh-CN',\n  handleLanguageChange = () => {},\n  version,\n}: NavBarOptions) => {\n  return (\n    <ConfigProvider prefixCls={'arco-react'}>\n      <Navbar.NavbarThemeProvider>\n        <Navbar\n          lang={lang}\n          onChangeLanguage={handleLanguageChange}\n          algoliaTag=\"vue\"\n          defaultVersion={version}\n          onChangeTheme={(theme: string) => {\n            document\n              .querySelector('#react-root')\n              ?.setAttribute('arco-theme', theme);\n          }}\n          loginHref={`/common/login?redirectUrl=${window.location.href}`}\n          hideRtl\n          versions={[\n            {\n              version: '1.x',\n              link: 'https://design.bytedance.com/vue/docs/start',\n            },\n            { version, link: '/vue' },\n          ]}\n        />\n      </Navbar.NavbarThemeProvider>\n    </ConfigProvider>\n  );\n};\n\nconst renderNavBar = (options?: NavBarOptions) => {\n  ReactDOM.render(\n    <ReactApp {...(options ?? {})} />,\n    document.getElementById('react-root')\n  );\n};\nexport default renderNavBar;\n"
  },
  {
    "path": "packages/arco-vue-docs-navbar/src/navbar.css",
    "content": ".ac-navbar-search-history-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n.ac-navbar-search-history-list {\n  padding: 0;\n  margin: 12px 0 32px 0;\n  max-height: 170px;\n  overflow-y: auto;\n}\n.ac-navbar-search-history-item {\n  position: relative;\n  display: flex;\n  align-items: center;\n  height: 40px;\n  padding: 0 10px;\n  margin-bottom: 2px;\n  color: var(--color-text-1);\n  text-decoration: none;\n  cursor: pointer;\n}\n.ac-navbar-search-history-item:hover {\n  background-color: var(--color-fill-1);\n}\n.ac-navbar-search-history-item:hover .ac-navbar-search-modal-title {\n  color: rgb(var(--primary-6));\n}\n.ac-navbar-search-history-item .arco-icon-history,\n.ac-navbar-search-history-item .arco-react-icon-history {\n  font-size: 16px;\n  margin-right: 8px;\n}\n.ac-navbar-search-history-close {\n  position: absolute !important;\n  right: 10px;\n  top: 14px;\n}\nhtml.rtl .ac-navbar-search-modal-close {\n  position: absolute !important;\n  right: initial;\n  left: 10px;\n  top: 14px;\n}\nhtml.rtl .ac-navbar-search-modal-item .arco-icon-history,\nhtml.rtl .ac-navbar-search-modal-item .arco-react-icon-history {\n  font-size: 16px;\n  margin-right: 0;\n  margin-left: 8px;\n}\n.ac-navbar-search-hot {\n  display: flex;\n}\n.ac-navbar-search-hot-half {\n  width: 50%;\n}\n.ac-navbar-search-hot-title {\n  margin-bottom: 12px;\n}\n.ac-navbar-search-hot-list {\n  display: flex;\n  flex-direction: column;\n  padding: 0;\n}\n.ac-navbar-search-hot-item {\n  position: relative;\n  display: flex;\n  align-items: center;\n  width: 100%;\n  height: 56px;\n  margin: 2px 0;\n  color: var(--color-text-2);\n  padding: 0 8px;\n  box-sizing: border-box;\n  font-size: 16px;\n  font-weight: 400;\n  border-radius: 4px;\n  text-decoration: none;\n  transition: all 0.2s;\n  cursor: pointer;\n}\n.ac-navbar-search-hot-item-icon,\n.ac-navbar-search-hot-item-icon-active {\n  position: absolute;\n  top: 0;\n  left: 0;\n}\n.ac-navbar-search-hot-item-icon {\n  opacity: 1;\n}\n.ac-navbar-search-hot-item-icon-active {\n  opacity: 0;\n}\n.ac-navbar-search-hot-item:hover {\n  color: rgb(var(--primary-6));\n  background-color: var(--color-fill-2);\n}\n.ac-navbar-search-hot-item:hover .ac-navbar-search-modal-svg-wrapper {\n  background: var(--color-bg-2);\n}\n.ac-navbar-search-hot-item:hover .ac-navbar-search-modal-enter-icon {\n  opacity: 1;\n}\n.ac-navbar-search-hot-item:hover .ac-navbar-search-modal-item-icon {\n  opacity: 0;\n}\n.ac-navbar-search-hot-item:hover .ac-navbar-search-modal-item-icon-active {\n  opacity: 1;\n}\n.ac-navbar-search-hot-svg-wrapper {\n  position: relative;\n  background: var(--color-fill-2);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 40px;\n  height: 40px;\n  border-radius: 50%;\n  margin-right: 20px;\n}\n.ac-navbar-search-hot-enter-icon {\n  position: absolute;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 24px;\n  background: var(--color-fill-3);\n  border-radius: 4px;\n  right: 10px;\n  top: 50%;\n  transform: translateY(-50%);\n  opacity: 0;\n}\n.ac-navbar-search-hot-svg-wrapper-rect {\n  border-radius: 8px;\n}\nbody[arco-theme='dark'] .ac-navbar-search-modal-item-icon {\n  filter: invert(1) grayscale(1) brightness(1.1);\n}\nhtml.rtl .ac-navbar-search-modal-half:first-child {\n  margin-left: 20px;\n  margin-right: 0;\n}\nhtml.rtl .ac-navbar-search-modal-svg-wrapper {\n  margin-left: 20px;\n  margin-right: 0;\n}\nhtml.rtl .ac-navbar-search-modal-title {\n  text-align: right;\n}\nhtml.rtl .ac-navbar-search-modal-enter-icon {\n  right: initial;\n  left: 10px;\n  transform: scaleX(-1) translateY(-50%);\n}\n.ac-navbar-search-modal-container {\n  height: 460px;\n  padding: 24px;\n  padding-top: 0;\n  box-sizing: border-box;\n  overflow-y: auto;\n}\n.ac-navbar-search-modal-container-exact {\n  padding: 12px 0 16px;\n  box-sizing: border-box;\n}\n.ac-navbar-search-modal-container-exact-item {\n  position: relative;\n  display: flex;\n  align-items: center;\n  padding: 8px;\n  height: 56px;\n  box-sizing: border-box;\n  border-radius: 8px;\n  margin: 2px 0;\n  cursor: pointer;\n  transition: all 0.2s;\n}\n.ac-navbar-search-modal-container-exact-icon {\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n  margin-right: 24px;\n  width: 40px;\n  height: 40px;\n  background-color: var(--color-fill-1);\n}\n.ac-navbar-search-modal-container-item {\n  position: relative;\n  padding: 8px 16px;\n  border-radius: 4px;\n  cursor: pointer;\n  transition: all 0.2s;\n}\n.ac-navbar-search-modal-container-item-type {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 22px;\n  padding: 1px 8px;\n  background-color: #4e5969;\n  border-radius: 2px;\n  color: #fff;\n  margin-left: 12px;\n  font-size: 12px;\n  box-sizing: border-box;\n}\n.ac-navbar-search-modal-container-item-vue {\n  font-weight: bold;\n}\n.ac-navbar-search-modal-container-item-design {\n  background: var(--color-fill-2);\n  color: var(--color-text-1);\n}\n.ac-navbar-search-modal-container-item-title {\n  line-height: 24px;\n  font-size: 16px;\n  margin-bottom: 6px;\n  color: var(--color-text-2);\n}\n.ac-navbar-search-modal-container-item-desc {\n  color: var(--color-text-2);\n  font-size: 14px;\n  line-height: 22px;\n}\n.ac-navbar-search-modal-container-item-active {\n  background-color: var(--color-fill-1);\n}\n.ac-navbar-search-modal-container-item-active .ac-navbar-search-modal-item-type {\n  background-color: rgb(var(--primary-6));\n}\n.ac-navbar-search-modal-container-item-active .ac-navbar-search-modal-item-vue {\n  background-color: rgb(var(--cyan-6));\n}\n.ac-navbar-search-modal-container-item-active .ac-navbar-search-modal-item-design {\n  color: #ffff;\n  border: none;\n}\n.ac-navbar-search-modal-container-item-active .ac-navbar-search-modal-exact-icon {\n  opacity: 1;\n}\n.ac-navbar-search-modal-container-item-active .ac-navbar-search-modal-enter-icon {\n  opacity: 1;\n}\n.ac-navbar-search-modal-container-enter-icon {\n  position: absolute;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 24px;\n  background: var(--color-fill-3);\n  border-radius: 4px;\n  right: 10px;\n  top: 50%;\n  transform: translateY(-50%);\n  opacity: 0;\n  transition: all 0.2s;\n}\n.ac-navbar-search-modal-container-doc {\n  margin-bottom: 8px;\n}\n.ac-navbar-search-modal-container-doc-title {\n  font-size: 12px;\n  margin-bottom: 4px;\n}\n.ac-navbar-search-modal-container-doc-item {\n  display: flex;\n  box-sizing: border-box;\n  padding: 4px 8px;\n  border-radius: 4px;\n  cursor: pointer;\n  position: relative;\n}\n.ac-navbar-search-modal-container-doc-item-icon {\n  transform: scale(0.8);\n  display: flex;\n}\n.ac-navbar-search-modal-container-doc-item-icon svg {\n  color: var(--color-text-3);\n  opacity: 0.6;\n  stroke-width: 1.8;\n}\n.ac-navbar-search-modal-container-doc-item-icon-line {\n  height: 48px;\n}\n.ac-navbar-search-modal-container-doc-item-icon-anchor,\n.ac-navbar-search-modal-container-doc-item-icon-doc {\n  height: 20px;\n  padding: 14px 0;\n  margin-right: 6px;\n}\n.ac-navbar-search-modal-container-doc-item-icon-line {\n  height: 48px;\n}\n.ac-navbar-search-modal-container-doc-item-result {\n  font-size: 13px;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n}\n.ac-navbar-search-modal-container-doc-item-result-desc {\n  vertical-align: middle;\n  padding-right: 36px;\n}\nhtml.rtl .ac-navbar-search-modal-exact-icon {\n  margin-left: 24px;\n  margin-right: 0;\n}\nhtml.rtl .ac-navbar-search-modal-list-item-type {\n  margin-right: 12px;\n  margin-left: 0;\n}\nhtml.rtl .ac-navbar-search-modal-enter-icon {\n  right: initial;\n  left: 10px;\n  transform: scaleX(-1) translateY(-50%);\n}\nhtml.rtl .ac-navbar-search-modal-doc-title {\n  text-align: right;\n}\nhtml.rtl .ac-navbar-search-modal-doc-item-result-desc {\n  padding-right: 0;\n  padding-left: 36px;\n}\nhtml.rtl .ac-navbar-search-modal-doc-item-result-label {\n  text-align: right;\n}\nhtml.rtl .ac-navbar-search-modal-doc-item-icon svg {\n  transform: scaleX(-1);\n}\n.ac-navbar-container {\n  width: 100%;\n  height: 60px;\n  box-sizing: border-box;\n  min-height: 60px;\n  max-height: 60px;\n  display: flex;\n  justify-content: space-between;\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  z-index: 999;\n  border-bottom: 1px solid var(--color-border);\n  background-color: var(--color-bg-2);\n}\n.ac-navbar-container-no-border {\n  border-bottom: none;\n}\n.ac-navbar-btn-icon {\n  font-size: 18px !important;\n  color: var(--color-text-1) !important;\n  margin: 0 10px;\n  line-height: 24px !important;\n}\n.ac-navbar-mask {\n  position: fixed;\n  width: 100vw;\n  height: 100vh;\n  background-color: var(--color-mask-bg);\n  left: 0;\n  top: 0;\n  z-index: 990;\n}\n.ac-navbar-fadeIn-enter,\n.ac-navbar-fadeIn-appear {\n  opacity: 0;\n}\n.ac-navbar-fadeIn-enter-active,\n.ac-navbar-fadeIn-appear-active {\n  opacity: 1;\n  transition: opacity 0.3s;\n}\n.ac-navbar-fadeIn-exit {\n  opacity: 1;\n}\n.ac-navbar-fadeIn-exit-active {\n  opacity: 0;\n  transition: opacity 0.3s;\n}\n.ac-navbar-dropdown {\n  display: flex;\n  justify-content: center;\n  padding-bottom: 20px;\n  width: 1180px;\n}\n.ac-navbar-dropdown-block {\n  padding-top: 30px;\n  box-sizing: border-box;\n  overflow: hidden;\n  height: 100%;\n}\n.ac-navbar-dropdown-title {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  height: 48px;\n  border-bottom: 1px solid var(--color-border);\n  color: var(--color-text-1);\n  font-size: 20px;\n}\n.ac-navbar-dropdown-list {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  grid-row-gap: 12px;\n  grid-column-gap: 24px;\n  padding: 20px 0;\n}\n.ac-navbar-dropdown-item {\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  box-sizing: border-box;\n  padding: 4px;\n  border-radius: 8px;\n  color: var(--color-text-1);\n  text-decoration: none;\n}\n.ac-navbar-dropdown-item-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 40px;\n  height: 40px;\n  border-radius: 8px;\n  background-color: rgb(var(--primary-6));\n  flex-shrink: 0;\n  margin-right: 8px;\n}\n.ac-navbar-dropdown-item-name {\n  margin: 0 16px;\n  font-weight: 500;\n}\n.ac-navbar-dropdown-item-desc {\n  margin-top: 2px;\n  color: var(--color-text-2);\n  font-size: 12px;\n}\n.ac-navbar-dropdown-item:hover {\n  background-color: var(--color-fill-2);\n  color: rgb(var(--primary-6));\n}\n.ac-navbar-dropdown-develop .ac-navbar-dropdown-item-icon {\n  background-color: #000;\n}\n.ac-navbar-dropdown-develop .ac-navbar-dropdown-block-left .ac-navbar-dropdown-item-icon {\n  background-color: transparent;\n}\n.ac-navbar-dropdown-develop .ac-navbar-dropdown-block-left .ac-navbar-dropdown-item-name {\n  margin: 0 8px 0 0;\n  display: flex;\n}\n.ac-navbar-dropdown-develop .ac-navbar-dropdown-block-left .ac-navbar-dropdown-item-version {\n  display: flex;\n  align-items: center;\n  padding: 0 8px;\n  background-color: var(--color-fill-3);\n  border-radius: 2px;\n  margin: 0 8px;\n  font-size: 12px;\n  color: var(--color-text-1);\n  transition: all 0.2s;\n}\n.ac-navbar-dropdown-develop .ac-navbar-dropdown-block-left .ac-navbar-dropdown-item:hover .ac-navbar-dropdown-item-version {\n  background-color: rgb(var(--primary-6));\n  color: #fff;\n}\n.ac-navbar-dropdown-ecosystem .ac-navbar-dropdown-list {\n  width: 100%;\n  padding: 24px 0;\n  display: grid;\n  grid-template-columns: 33% 33% 33%;\n  grid-row-gap: 12px;\n  grid-column-gap: 20px;\n}\n.ac-navbar-dropdown-ecosystem .ac-navbar-dropdown-item-desc {\n  margin: 2px 16px 0 16px;\n  color: var(--color-text-2);\n  font-size: 12px;\n  font-weight: normal;\n}\n.ac-navbar-navTab {\n  display: flex;\n}\n.ac-navbar-navTab-item {\n  display: flex;\n  padding: 18px 8px;\n  height: 60px;\n  box-sizing: border-box;\n  align-items: center;\n}\n.ac-navbar-navTab-item-link {\n  padding: 3px 8px;\n  border-radius: 2px;\n  color: var(--color-text-1);\n  position: relative;\n  font-weight: 500;\n  cursor: pointer;\n  text-decoration: none;\n}\n.ac-navbar-navTab-item-link:hover {\n  color: var(--color-text-1);\n}\n.ac-navbar-navTab-item-link svg {\n  font-size: 12px;\n  stroke-width: 6px;\n  vertical-align: -1px;\n  color: var(--color-text-1);\n  margin: 0 4px;\n  transition: all 0.2s;\n}\n.ac-navbar-navTab-item-link:focus-visible {\n  outline: 2px solid rgb(var(--primary-6));\n}\n.ac-navbar-navTab-item-active .ac-navbar-navTab-item-link {\n  background-color: var(--color-fill-2);\n}\n.ac-navbar-navTab-item-active .ac-navbar-navTab-item-link svg {\n  transform: rotate(180deg);\n}\n.ac-navbar-navTab-container {\n  width: 100vw;\n  display: flex;\n  justify-content: center;\n  position: relative;\n  z-index: 998;\n  background-color: var(--color-bg-2);\n  overflow: hidden;\n}\n.ac-navbar-global-notice {\n  position: fixed;\n  top: 60px;\n  width: 100%;\n  height: 32px;\n  line-height: 32px;\n  background-color: rgb(var(--blue-6));\n  color: var(--color-white);\n  display: flex;\n  justify-content: center;\n  z-index: 980;\n}\n.ac-navbar-global-notice-container {\n  width: calc(100% - 120px);\n  text-align: center;\n  color: var(--color-white) !important;\n  text-decoration: none;\n}\n.ac-navbar-global-notice-container > span {\n  font-size: 13px;\n  margin-left: 36px;\n  margin-right: 48px;\n}\n.ac-navbar-global-notice-close-icon {\n  position: absolute;\n  right: 20px;\n  cursor: pointer;\n  width: 20px;\n  height: 20px;\n  line-height: 20px;\n  margin-top: 6px;\n  text-align: center;\n  border-radius: 4px;\n}\n.ac-navbar-global-notice-close-icon:hover {\n  background-color: rgba(255, 255, 255, 0.3);\n}\n@media screen and (max-width: 920px) {\n  .ac-navbar-global-notice {\n    position: relative;\n    top: 0;\n    height: 28px;\n    line-height: 28px;\n  }\n  .ac-navbar-global-notice a > b {\n    display: none;\n  }\n  .ac-navbar-global-notice a > span {\n    font-weight: 500;\n    margin: 0;\n    font-size: 12px;\n  }\n  .ac-navbar-global-notice-close-icon {\n    margin-top: 4px;\n  }\n}\n:global(html.rtl) .ac-navbar-global-notice svg {\n  transform: scaleX(-1);\n}\n.ac-navbar-left-panel {\n  background: var(--color-bg-3);\n  border: 1px solid var(--color-border);\n  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);\n  border-radius: 8px;\n}\n.ac-navbar-left-panel-list {\n  display: grid;\n  grid-template-columns: 50% 50%;\n  padding: 16px;\n  width: 400px;\n}\n.ac-navbar-left-panel-return-home {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 0 32px;\n  height: 68px;\n  box-sizing: border-box;\n  border-bottom: 1px solid var(--color-border);\n  transition: all 0.2s;\n  cursor: pointer;\n}\n.ac-navbar-left-panel-return-home .arco-icon-arrow-right,\n.ac-navbar-left-panel-return-home .arco-react-icon-arrow-right {\n  color: var(--color-text-1);\n  font-size: 18px;\n}\n.ac-navbar-left-panel-return-home:hover {\n  background-color: var(--color-fill-1);\n}\n.ac-navbar-left-panel-return-home:hover .arco-icon-arrow-right,\n.ac-navbar-left-panel-return-home:hover .arco-react-icon-arrow-right {\n  color: rgb(var(--primary-6));\n}\n.ac-navbar-left-panel-item {\n  opacity: 0;\n  cursor: pointer;\n  position: relative;\n  z-index: 2;\n  padding: 16px;\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  text-decoration: none;\n}\n.ac-navbar-left-panel-item::after {\n  position: absolute;\n  z-index: -1;\n  content: '';\n  display: block;\n  width: 100%;\n  height: 100%;\n  background: var(--color-fill-1);\n  border-radius: 4px;\n  left: 0;\n  opacity: 0;\n  transform: scale(0.94);\n  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);\n}\n.ac-navbar-left-panel-item-logo {\n  position: relative;\n  width: 24px;\n  height: 24px;\n  margin-right: 16px;\n}\n.ac-navbar-left-panel-item-logo > span {\n  display: block;\n  position: absolute;\n  top: 0;\n  left: 0;\n  transition: all 0.25s ease-out;\n}\n.ac-navbar-left-panel-item-logo-common {\n  opacity: 1;\n}\n.ac-navbar-left-panel-item-logo-active {\n  opacity: 0;\n}\n.ac-navbar-left-panel-item-text-title {\n  font-size: 16px;\n  font-family: 'Nunito Sans', sans-serif;\n  font-weight: 800;\n  color: var(--color-text-1);\n  margin: 0;\n  transition: all 0.2s ease-out;\n}\n.ac-navbar-left-panel-item-text-desc {\n  font-family: PingFang SC;\n  font-style: normal;\n  font-weight: 400;\n  font-size: 12px;\n  line-height: 12px;\n  color: var(--color-text-2);\n  position: absolute;\n  word-break: keep-all;\n  transform: translateY(0);\n  opacity: 0;\n  transition: all 0.2s ease-out;\n}\n.ac-navbar-left-panel-item:hover::after {\n  opacity: 1;\n  transform: scale(1);\n}\n.ac-navbar-left-panel-item:hover .ac-navbar-left-panel-item-text-title {\n  transform: translateY(-8px);\n  color: var(--color-text-1);\n}\n.ac-navbar-left-panel-item:hover .ac-navbar-left-panel-item-text-desc {\n  transform: translateY(-4px);\n  opacity: 1;\n}\n.ac-navbar-left-panel-item:hover .ac-navbar-left-panel-item-logo-common {\n  opacity: 0;\n}\n.ac-navbar-left-panel-item:hover .ac-navbar-left-panel-item-logo-active {\n  opacity: 1;\n}\n.ac-navbar-left-panel-trigger {\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--color-text-1);\n  width: 60px;\n  height: 60px;\n  box-sizing: border-box;\n  cursor: pointer;\n}\n.ac-navbar-left-panel-trigger-icon {\n  width: 24px;\n  height: 24px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 4px;\n}\n.ac-navbar-left-panel-trigger:hover .ac-navbar-left-panel-trigger-icon {\n  background-color: var(--color-fill-1);\n}\n.ac-navbar-left-panel-trigger:focus-visible .ac-navbar-left-panel-trigger-icon {\n  outline: 2px solid rgb(var(--primary-6));\n}\n.ac-navbar-left-panel-trigger::after {\n  content: ' ';\n  display: block;\n  position: absolute;\n  width: 1px;\n  height: 24px;\n  background-color: var(--color-border);\n  right: 0;\n  top: 50%;\n  transform: translateY(-50%);\n}\n.ac-navbar-left-panel-down-enter,\n.ac-navbar-left-panel-down-appear {\n  opacity: 0;\n  box-shadow: 0 0 0 rgba(0, 0, 0, 0);\n  transform-origin: 0% 0%;\n  transform: scale(0.55) translateY(-6px);\n}\n.ac-navbar-left-panel-down-enter-active,\n.ac-navbar-left-panel-down-appear-active {\n  opacity: 1;\n  transform: scale(1) translateY(0);\n  transform-origin: 0% 0%;\n  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);\n  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);\n}\n.ac-navbar-left-panel-down-exit {\n  opacity: 1;\n  transform: scale(1) translateY(0);\n  transform-origin: 0% 0%;\n  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);\n}\n.ac-navbar-left-panel-down-exit-active {\n  opacity: 0;\n  box-shadow: 0 0 0 rgba(0, 0, 0, 0);\n  transform-origin: 0% 0%;\n  transform: scale(0.55) translateY(-6px);\n  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);\n}\nhtml.rtl .ac-navbar-left-panel {\n  direction: rtl;\n}\nhtml.rtl .ac-navbar-left-panel-item-logo {\n  margin-right: 0;\n  margin-left: 16px;\n}\nhtml.rtl .ac-navbar-left-panel-return-home .arco-icon-arrow-right,\nhtml.rtl .ac-navbar-left-panel-return-home .arco-react-icon-arrow-right {\n  transform: scaleX(-1);\n}\nhtml.rtl .ac-navbar-left-panel-trigger::after {\n  content: ' ';\n  display: block;\n  position: absolute;\n  width: 1px;\n  height: 24px;\n  background-color: var(--color-border);\n  right: inherit;\n  left: 0;\n  top: 50%;\n  transform: translateY(-50%);\n}\n.ac-navbar-left-panel-mobile .ac-navbar-left-panel-list {\n  display: grid;\n  grid-template-columns: 100%;\n  padding: 8px;\n  width: 260px;\n}\n.ac-navbar-left-panel-mobile-trigger {\n  width: 48px;\n  height: 48px;\n}\n.ac-navbar-left-panel-mobile-trigger .ac-navbar-left-panel-trigger-icon {\n  transform: scale(0.8);\n}\n.ac-navbar-logo {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 180px;\n  height: 60px;\n  box-sizing: border-box;\n  text-decoration: none;\n}\n.ac-navbar-logo .logo:focus-visible > svg {\n  outline: 2px solid rgb(var(--primary-6));\n}\n.ac-navbar-message-box {\n  display: flex;\n  flex-direction: column;\n  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);\n  border-radius: var(--border-radius-medium);\n  border: 1px solid var(--color-fill-3);\n  box-sizing: border-box;\n  background-color: var(--color-bg-popup);\n  width: 324px;\n  max-height: 360px;\n}\n.ac-navbar-message-box-header {\n  width: 100%;\n  height: 40px;\n  min-height: 40px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 0 20px;\n  box-sizing: border-box;\n  border-bottom: 1px solid var(--color-fill-3);\n}\n.ac-navbar-message-box-header-title {\n  font-weight: 500;\n}\n.ac-navbar-message-box-list {\n  flex: 1;\n  padding: 4px 0;\n  box-sizing: border-box;\n  overflow-y: auto;\n  overflow-x: hidden;\n}\n.ac-navbar-message-box-item {\n  display: inline-block;\n  width: 100%;\n  padding: 8px 20px;\n  box-sizing: border-box;\n  text-decoration: none;\n  transition: all 0.2s;\n}\n.ac-navbar-message-box-item:hover {\n  background-color: var(--color-fill-2);\n}\n.ac-navbar-message-box-item[href]:hover .title {\n  color: rgb(var(--primary-6));\n}\n.ac-navbar-message-box-item-description {\n  font-size: 12px;\n  color: var(--color-text-2);\n  line-height: auto;\n}\n.ac-navbar-message-box-item-date {\n  font-size: 12px;\n  color: var(--color-text-3);\n}\n.ac-navbar-search-input {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  height: 32px;\n  width: 140px;\n  background-color: var(--color-fill-2);\n  border-radius: 2px;\n  padding: 0 8px;\n  margin: 0 24px;\n  transition: all 0.2s;\n  cursor: pointer;\n}\n.ac-navbar-search-input:hover {\n  background-color: var(--color-fill-3);\n}\n.ac-navbar-search-input:focus-visible {\n  outline: 2px solid rgb(var(--primary-6));\n}\n.ac-navbar-search-input svg {\n  color: var(--color-text-1);\n  vertical-align: -1px;\n}\n.ac-navbar-search-input-placeholder {\n  color: var(--color-text-3);\n  margin: 0 6px;\n  vertical-align: 1px;\n}\n.ac-navbar-search-input-command {\n  display: flex;\n}\n.ac-navbar-search-input-key {\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  padding: 6px;\n  width: 17.21px;\n  height: 20px;\n  left: 117px;\n  top: 6px;\n  background: #fff;\n  border: 1px solid #c9cdd4;\n  box-sizing: border-box;\n  box-shadow: 0 1px 0 #c9cdd4;\n  border-radius: 3px;\n  font-size: 12px;\n  color: var(--color-text-3);\n}\n.ac-navbar-search-input-key:first-child {\n  margin: 0 4px;\n}\nbody[arco-theme='dark'] .ac-navbar-search-input-key {\n  background: #202022;\n  border: 1px solid rgba(255, 255, 255, 0.12);\n  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12);\n  color: rgba(255, 255, 255, 0.4);\n}\n.ac-navbar-search-modal {\n  border-radius: 8px !important;\n  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1) !important;\n}\n.ac-navbar-search-modal .arco-modal-content,\n.ac-navbar-search-modal .arco-react-modal-content {\n  padding: 0;\n}\n.ac-navbar-search-modal-content {\n  padding: 24px;\n}\n.ac-navbar-search-modal-input-wrapper {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  height: 60px;\n  padding: 0 20px;\n  box-sizing: border-box;\n  background: var(--color-bg-3);\n  border-bottom: 1px solid var(--color-border);\n  border-radius: 8px 8px 0 0;\n}\n.ac-navbar-search-modal-left {\n  display: flex;\n  align-items: center;\n}\n.ac-navbar-search-modal-left svg {\n  color: rgb(var(--primary-6));\n  font-size: 20px;\n  margin-right: 10px;\n}\n.ac-navbar-search-modal-left input {\n  border: none;\n  outline: none;\n  height: 32px;\n  line-height: 32px;\n  font-size: 16px;\n  background-color: transparent;\n  color: var(--color-text-1);\n}\n.ac-navbar-search-modal-right {\n  display: flex;\n}\n.ac-navbar-search-modal-key-word {\n  font-size: 12px;\n  color: var(--color-text-3);\n  margin-left: 8px;\n  margin-right: 4px;\n}\n.ac-navbar-search-modal-count {\n  padding: 24px 24px 12px 24px;\n}\n.DocSearch-Footer {\n  border-top: 1px solid var(--color-border);\n  align-items: center;\n  height: 48px;\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  padding: 0 24px;\n}\n.DocSearch-Footer :global(.DocSearch-Label) {\n  color: var(--color-text-2) !important;\n}\n.DocSearch-Footer svg {\n  color: var(--primary-6) !important;\n  margin-left: 8px;\n  vertical-align: -6px;\n}\nhtml.rtl .DocSearch-Footer svg {\n  margin-right: 8px;\n  margin-left: 0;\n}\nhtml.rtl .ac-navbar-search-modal-left svg {\n  margin-right: 0;\n  margin-left: 10px;\n}\nhtml.rtl .ac-navbar-search-modal-key-word {\n  margin-right: 8px;\n  margin-left: 4px;\n}\n.ac-navbar-select-nav {\n  padding: 18px 2px;\n  height: 60px;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n}\n.ac-navbar-select-nav .arco-select-view {\n  font-weight: 500;\n}\n.ac-navbar-select-nav .arco-select-view svg {\n  stroke-width: 6px;\n}\n.ac-navbar-select-nav-option svg {\n  padding-right: 8px;\n}\nhtml.rtl .ac-navbar-select-nav-option svg {\n  padding-left: 8px;\n  padding-right: 0;\n}\n.ac-navbar-profile {\n  padding: 4px 0;\n  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);\n  border-radius: var(--border-radius-medium);\n  border: 1px solid var(--color-fill-3);\n  box-sizing: border-box;\n  background-color: var(--color-bg-popup);\n}\n.ac-navbar-profile-user {\n  display: flex;\n  padding: 12px;\n  align-items: center;\n  box-sizing: border-box;\n  border-bottom: 1px solid var(--color-fill-3);\n}\n.ac-navbar-profile-user-settings {\n  margin-top: 4px !important;\n  margin-bottom: 4px !important;\n  padding-top: 4px;\n  border-top: 1px solid var(--color-fill-3);\n}\n.ac-navbar-profile-info {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  margin-left: 8px;\n}\n.ac-navbar-profile-info-nickname {\n  font-weight: 500;\n  font-size: 14px;\n}\n.ac-navbar-profile-info-email {\n  font-size: 12px;\n  line-height: 13px;\n  width: 100%;\n}\n.ac-navbar-profile-version {\n  justify-content: space-between;\n  width: 100%;\n}\n.ac-navbar-profile-version svg {\n  color: var(--color-text-2);\n}\n.ac-navbar-profile-item {\n  display: flex;\n  align-items: center;\n  height: 36px;\n  padding: 0 14px;\n  box-sizing: border-box;\n  color: var(--color-text-1);\n  text-decoration: none;\n  cursor: pointer;\n  transition: all 0.2s;\n}\n.ac-navbar-profile-item-icon {\n  margin-right: 10px;\n  font-size: 16px;\n  margin-bottom: -2px;\n  color: var(--color-text-1);\n}\n.ac-navbar-profile-item:hover {\n  background-color: var(--color-fill-2);\n}\n.ac-navbar-profile-avatar {\n  background-color: var(--color-bg-4) !important;\n  cursor: pointer;\n  box-sizing: content-box !important;\n  padding: 2px;\n  transition: all 0.2s;\n  margin-right: 20px;\n}\n.ac-navbar-profile-avatar:hover {\n  filter: drop-shadow(0 2px 3px rgba(78, 89, 105, 0.14));\n}\n.ac-navbar-profile-avatar-need-login {\n  background-color: var(--color-fill-4) !important;\n}\nhtml.rtl .ac-navbar-profile-info {\n  margin-left: 0;\n  margin-right: 8px;\n}\nhtml.rtl .ac-navbar-profile-item svg {\n  margin-right: 0;\n  margin-left: 10px;\n}\nhtml.rtl .ac-navbar-profile-avatar {\n  margin-right: 0;\n  margin-left: 20px;\n}\n.ac-navbar-user-settings {\n  padding: 4px;\n}\n.ac-navbar-user-settings-card {\n  margin-bottom: 30px;\n}\n.ac-navbar-user-settings-card-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n.ac-navbar-user-settings-card-header h3 {\n  font-size: 14px;\n  color: var(--color-text-2);\n  margin-bottom: 12px;\n}\n.ac-navbar-user-settings-card-info {\n  padding: 8px;\n  align-items: center;\n}\n.ac-navbar-user-settings-card-info-desc {\n  margin-left: 18px;\n}\n.ac-navbar-user-settings-card-info-desc .arco-descriptions-item-label {\n  font-size: 13px;\n}\n.ac-navbar-user-settings-card-info-desc td {\n  padding: 4px 6px;\n}\n.ac-navbar-user-settings-card-info-desc .arco-typography {\n  font-size: 16px;\n  line-height: 22px;\n  color: var(--color-text-2);\n}\n.ac-navbar-user-settings-card-info-desc-id {\n  display: flex;\n  font-size: 13px;\n  color: var(--color-text-3);\n  line-height: 16px;\n  margin-top: 6px;\n}\n.ac-navbar-user-settings-card-info-desc-id > div {\n  text-align: center;\n  font-size: 12px;\n  line-height: 16px;\n  width: 16px;\n  height: 16px;\n  font-weight: bold;\n  border-radius: 4px;\n  background-color: var(--color-text-4);\n  color: var(--color-white);\n  margin-right: 4px;\n}\n.ac-navbar-user-settings-card-info-desc-id > span {\n  line-height: 14px;\n}\n.ac-navbar-user-settings-card-info-email {\n  color: var(--color-text-2);\n}\n.ac-navbar-user-settings-card-info-email > span {\n  margin-left: 12px;\n  font-size: 12px;\n}\n.ac-navbar-user-settings-card-info-email-success {\n  color: rgb(var(--green-6));\n}\n.ac-navbar-user-settings-card-info-email-warning {\n  color: rgb(var(--orange-6));\n}\n.ac-navbar-user-settings-card-info-token {\n  display: flex;\n  justify-content: space-between;\n  margin-top: 14px;\n  border-bottom: 1px solid var(--color-border-2);\n  padding-bottom: 4px;\n}\n.ac-navbar-user-settings-card-info-token .arco-typography {\n  font-size: 13px;\n  width: 280px;\n  margin-bottom: 8px;\n}\n.ac-navbar-user-settings-card-info-token-time {\n  color: var(--color-text-3);\n  font-size: 12px;\n  margin-top: 4px;\n  line-height: 22px;\n}\n"
  },
  {
    "path": "packages/arco-vue-docs-navbar/src/navbar.less",
    "content": "@prefix: ac-navbar;\n\n@import './style/history.less';\n@import './style/hot.less';\n@import './style/list.less';\n@import '@arco-materials/site-navbar-new/dist/css/index.less';\n"
  },
  {
    "path": "packages/arco-vue-docs-navbar/src/style/history.less",
    "content": "@hi-prefixCls: ~'@{prefix}-search-history';\n\n.@{hi-prefixCls} {\n  &-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n  }\n\n  &-list {\n    padding: 0;\n    margin: 12px 0 32px 0;\n    max-height: 170px;\n    overflow-y: auto;\n  }\n\n  &-item {\n    position: relative;\n    display: flex;\n    align-items: center;\n    height: 40px;\n    padding: 0 10px;\n    margin-bottom: 2px;\n    color: var(--color-text-1);\n    text-decoration: none;\n    cursor: pointer;\n\n    &:hover {\n      background-color: var(--color-fill-1);\n\n      .@{prefixCls}-title {\n        color: rgb(var(--primary-6));\n      }\n    }\n\n    .arco-icon-history,\n    .arco-react-icon-history {\n      font-size: 16px;\n      margin-right: 8px;\n    }\n  }\n\n  &-close {\n    position: absolute !important;\n    right: 10px;\n    top: 14px;\n  }\n}\n\nhtml.rtl {\n  .@{prefixCls}-close {\n    position: absolute !important;\n    right: initial;\n    left: 10px;\n    top: 14px;\n  }\n\n  .@{prefixCls}-item {\n    .arco-icon-history,\n    .arco-react-icon-history {\n      font-size: 16px;\n      margin-right: 0;\n      margin-left: 8px;\n    }\n  }\n}\n"
  },
  {
    "path": "packages/arco-vue-docs-navbar/src/style/hot.less",
    "content": "@ho-prefixCls: ~'@{prefix}-search-hot';\n\n.@{ho-prefixCls} {\n  display: flex;\n\n  &-half {\n    width: 50%;\n  }\n\n  &-title {\n    margin-bottom: 12px;\n  }\n\n  &-list {\n    display: flex;\n    flex-direction: column;\n    padding: 0;\n  }\n\n  &-item {\n    position: relative;\n    display: flex;\n    align-items: center;\n    width: 100%;\n    height: 56px;\n    margin: 2px 0;\n    color: var(--color-text-2);\n    padding: 0 8px;\n    box-sizing: border-box;\n    font-size: 16px;\n    font-weight: 400;\n    border-radius: 4px;\n    text-decoration: none;\n    transition: all 0.2s;\n    cursor: pointer;\n\n    &-icon,\n    &-icon-active {\n      position: absolute;\n      top: 0;\n      left: 0;\n    }\n\n    &-icon {\n      opacity: 1;\n    }\n\n    &-icon-active {\n      opacity: 0;\n    }\n\n    &:hover {\n      color: rgb(var(--primary-6));\n      background-color: var(--color-fill-2);\n\n      .@{prefixCls}-svg-wrapper {\n        background: var(--color-bg-2);\n      }\n\n      .@{prefixCls}-enter-icon {\n        opacity: 1;\n      }\n\n      .@{prefixCls}-item-icon {\n        opacity: 0;\n      }\n\n      .@{prefixCls}-item-icon-active {\n        opacity: 1;\n      }\n    }\n  }\n\n  &-svg-wrapper {\n    position: relative;\n    background: var(--color-fill-2);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 40px;\n    height: 40px;\n    border-radius: 50%;\n    margin-right: 20px;\n  }\n\n  &-enter-icon {\n    position: absolute;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 28px;\n    height: 24px;\n    background: var(--color-fill-3);\n    border-radius: 4px;\n    right: 10px;\n    top: 50%;\n    transform: translateY(-50%);\n    opacity: 0;\n  }\n\n  &-svg-wrapper-rect {\n    border-radius: 8px;\n  }\n}\n\nbody[arco-theme='dark'] .@{prefixCls}-item-icon {\n  filter: invert(1) grayscale(1) brightness(1.1);\n}\n\nhtml.rtl {\n  .@{prefixCls} {\n    &-half:first-child {\n      margin-left: 20px;\n      margin-right: 0;\n    }\n\n    &-svg-wrapper {\n      margin-left: 20px;\n      margin-right: 0;\n    }\n\n    &-title {\n      text-align: right;\n    }\n\n    &-enter-icon {\n      right: initial;\n      left: 10px;\n      transform: scaleX(-1) translateY(-50%);\n    }\n  }\n}\n"
  },
  {
    "path": "packages/arco-vue-docs-navbar/src/style/list.less",
    "content": "\n@li-prefixCls: ~'@{prefix}-search-modal-container';\n@doc-item-content-height: 48px;\n\n.@{li-prefixCls} {\n  height: 460px;\n  padding: 24px;\n  padding-top: 0;\n  box-sizing: border-box;\n  overflow-y: auto;\n\n  &-exact {\n    padding: 12px 0 16px;\n    box-sizing: border-box;\n\n    &-item {\n      position: relative;\n      display: flex;\n      align-items: center;\n      padding: 8px;\n      height: 56px;\n      box-sizing: border-box;\n      border-radius: 8px;\n      margin: 2px 0;\n      cursor: pointer;\n      transition: all 0.2s;\n    }\n\n    &-icon {\n      position: relative;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      border-radius: 50%;\n      margin-right: 24px;\n      width: 40px;\n      height: 40px;\n      background-color: var(--color-fill-1);\n    }\n  }\n\n  &-item {\n    position: relative;\n    padding: 8px 16px;\n    border-radius: 4px;\n    cursor: pointer;\n    transition: all 0.2s;\n\n    &-type {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      height: 22px;\n      padding: 1px 8px;\n      background-color: #4e5969;\n      border-radius: 2px;\n      color: #fff;\n      margin-left: 12px;\n      font-size: 12px;\n      box-sizing: border-box;\n    }\n\n    &-vue {\n      font-weight: bold;\n    }\n\n    &-design {\n      background: var(--color-fill-2);\n      color: var(--color-text-1);\n    }\n\n    &-title {\n      line-height: 24px;\n      font-size: 16px;\n      margin-bottom: 6px;\n      color: var(--color-text-2);\n    }\n\n    &-desc {\n      color: var(--color-text-2);\n      font-size: 14px;\n      line-height: 22px;\n    }\n  }\n\n  &-item-active {\n    background-color: var(--color-fill-1);\n\n    .@{prefixCls}-item-type {\n      background-color: rgb(var(--primary-6));\n    }\n\n    .@{prefixCls}-item-vue {\n      background-color: rgb(var(--cyan-6));\n    }\n\n    .@{prefixCls}-item-design {\n      color: #ffff;\n      border: none;\n    }\n\n    .@{prefixCls}-exact-icon {\n      opacity: 1;\n    }\n\n    .@{prefixCls}-enter-icon {\n      opacity: 1;\n    }\n  }\n\n  &-enter-icon {\n    position: absolute;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 28px;\n    height: 24px;\n    background: var(--color-fill-3);\n    border-radius: 4px;\n    right: 10px;\n    top: 50%;\n    transform: translateY(-50%);\n    opacity: 0;\n    transition: all 0.2s;\n  }\n\n  &-doc {\n    margin-bottom: 8px;\n\n    &-title {\n      font-size: 12px;\n      margin-bottom: 4px;\n    }\n\n    &-item {\n      display: flex;\n      box-sizing: border-box;\n      padding: 4px 8px;\n      border-radius: 4px;\n      cursor: pointer;\n      position: relative;\n\n      &-icon {\n        transform: scale(0.8);\n        display: flex;\n\n        svg {\n          color: var(--color-text-3);\n          opacity: 0.6;\n          stroke-width: 1.8;\n        }\n\n        &-line {\n          height: @doc-item-content-height;\n        }\n\n        &-anchor,\n        &-doc {\n          height: 20px;\n          padding: 14px 0;\n          margin-right: 6px;\n        }\n      }\n\n      &-icon-line {\n        height: @doc-item-content-height;\n      }\n\n      &-result {\n        font-size: 13px;\n        display: flex;\n        flex-direction: column;\n        justify-content: center;\n\n        &-desc {\n          vertical-align: middle;\n          padding-right: 36px;\n        }\n      }\n    }\n  }\n}\n\nhtml.rtl {\n  .@{prefixCls}-exact-icon {\n    margin-left: 24px;\n    margin-right: 0;\n  }\n\n  .@{prefixCls}-list-item-type {\n    margin-right: 12px;\n    margin-left: 0;\n  }\n\n  .@{prefixCls}-enter-icon {\n    right: initial;\n    left: 10px;\n    transform: scaleX(-1) translateY(-50%);\n  }\n\n  .@{prefixCls}-doc {\n    &-title {\n      text-align: right;\n    }\n\n    &-item {\n      &-result {\n        &-desc {\n          padding-right: 0;\n          padding-left: 36px;\n        }\n\n        &-label {\n          text-align: right;\n        }\n      }\n\n      &-icon {\n        svg {\n          transform: scaleX(-1);\n        }\n      }\n    }\n  }\n}\n"
  },
  {
    "path": "packages/arco-vue-docs-navbar/tsconfig.json",
    "content": "{\n  \"compilerOptions\": {\n    \"outDir\": \"dist\",\n    \"declaration\": true,\n    \"emitDeclarationOnly\": true,\n    \"moduleResolution\": \"node\",\n    \"allowJs\": true,\n    \"strict\": true,\n    \"isolatedModules\": true,\n    \"esModuleInterop\": true,\n    \"skipLibCheck\": true,\n    \"jsx\": \"react\"\n  },\n  \"include\": [\n    \"src\"\n  ]\n}\n"
  },
  {
    "path": "packages/arco-vue-docs-navbar/vite.config.ts",
    "content": "import { defineConfig } from 'vite';\nimport svgr from './plugins/rollup-plugin-svgr';\n\nexport default defineConfig({\n  mode: 'development',\n  css: {\n    preprocessorOptions: {\n      less: {\n        modifyVars: {\n          prefix: 'arco-react',\n        },\n      },\n    },\n  },\n  build: {\n    target: 'modules',\n    outDir: 'dist',\n    emptyOutDir: true,\n    lib: {\n      entry: 'src/index.tsx',\n      formats: ['es'],\n    },\n    rollupOptions: {\n      output: {\n        entryFileNames: '[name].js',\n      },\n    },\n  },\n  plugins: [svgr()],\n});\n"
  },
  {
    "path": "packages/arco-vue-scripts/.eslintignore",
    "content": "node_modules/*\ndist/*\n/*.json\n/*.js\n"
  },
  {
    "path": "packages/arco-vue-scripts/.eslintrc.js",
    "content": "module.exports = {\n  parser: '@typescript-eslint/parser',\n  parserOptions: {\n    sourceType: 'module',\n    ecmaVersion: 2020,\n  },\n  env: {\n    node: true,\n  },\n  plugins: ['@typescript-eslint'],\n  extends: [\n    // Airbnb JavaScript Style Guide https://github.com/airbnb/javascript\n    'airbnb-base',\n    'plugin:@typescript-eslint/recommended',\n    'plugin:import/typescript',\n    'plugin:prettier/recommended',\n  ],\n  settings: {\n    'import/resolver': {\n      typescript: {\n        project: './tsconfig.json',\n      },\n    },\n  },\n  rules: {\n    'prettier/prettier': 1,\n    '@typescript-eslint/no-explicit-any': 0,\n    '@typescript-eslint/explicit-module-boundary-types': 0,\n    '@typescript-eslint/no-non-null-assertion': 0,\n    '@typescript-eslint/no-empty-function': 1,\n    '@typescript-eslint/ban-ts-comment': 0,\n    'import/extensions': [\n      'error',\n      'ignorePackages',\n      { js: 'never', jsx: 'never', ts: 'never', tsx: 'never' },\n    ],\n    'import/no-extraneous-dependencies': 0,\n    'import/no-unresolved': [2, { caseSensitive: false }],\n    'import/prefer-default-export': 0,\n    'no-underscore-dangle': 0,\n    'no-nested-ternary': 0,\n    'no-shadow': 0,\n    'prefer-template': 1,\n    'no-param-reassign': 0,\n    'no-plusplus': 0,\n    'no-use-before-define': 0,\n    'no-restricted-syntax': 0,\n    'no-empty': [2, { allowEmptyCatch: true }],\n    'no-bitwise': 0,\n    'no-return-assign': 0,\n    'no-unused-expressions': [\n      'error',\n      { allowShortCircuit: true, allowTernary: true },\n    ],\n    'no-continue': 0,\n  },\n};\n"
  },
  {
    "path": "packages/arco-vue-scripts/.gitignore",
    "content": ".idea/\n.vscode/\n\ndist/\nnode_modules/\n**/.DS_Store\n"
  },
  {
    "path": "packages/arco-vue-scripts/.prettierrc.js",
    "content": "module.exports = {\n  tabWidth: 2,\n  semi: true,\n  printWidth: 80,\n  singleQuote: true,\n  quoteProps: 'consistent',\n  endOfLine: 'auto',\n  htmlWhitespaceSensitivity: 'strict',\n};\n"
  },
  {
    "path": "packages/arco-vue-scripts/README.md",
    "content": "# Arco Vue Scripts\n\nA collection of commands used in the Arco Design Vue component library\n\n## Installation\n\n```\nnpm install @arco-design/arco-vue-scripts\n```\n\n## Commands\n\nRun `arco-vue-scripts --help` to see all available commands and options.\n\n+ `arco-vue-scripts docgen`: generate document of component.\n+ `arco-vue-scripts icongen`: generate icon components.\n+ `arco-vue-scripts lessgen`: generate index less file.\n+ `arco-vue-scripts dtsgen`: emit .d.ts files for vue files.\n+ `arco-vue-scripts dev:component`: build components with watch mode.\n+ `arco-vue-scripts dev:site`: start vite server for development.\n+ `arco-vue-scripts build:component`: build production files.\n+ `arco-vue-scripts build:style`: build style related files.\n+ `arco-vue-scripts build:site`: build document site.\n+ `arco-vue-scripts build:material`: build vue material.\n+ `arco-vue-scripts test`: run test for component or material.\n+ `arco-vue-scripts changelog`: Obtain and organize changelog information through the git repository.\n"
  },
  {
    "path": "packages/arco-vue-scripts/copy-template.js",
    "content": "#!/usr/bin/env node\n\nconst fs = require('fs-extra');\n\nfs.copySync(\n  'src/scripts/changelog/template',\n  'dist/scripts/changelog/template',\n  {\n    overwrite: true,\n  }\n);\n"
  },
  {
    "path": "packages/arco-vue-scripts/package.json",
    "content": "{\n  \"name\": \"@arco-design/arco-vue-scripts\",\n  \"version\": \"0.2.10\",\n  \"description\": \"Arco Vue Scripts\",\n  \"author\": \"ArcoDesign Team\",\n  \"license\": \"MIT\",\n  \"main\": \"dist/index.js\",\n  \"bin\": \"dist/index.js\",\n  \"files\": [\n    \"dist\"\n  ],\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/arco-design/arco-design-vue.git\"\n  },\n  \"scripts\": {\n    \"dev\": \"tsc --watch\",\n    \"build\": \"tsc && node copy-template.js\",\n    \"lint-staged\": \"npx lint-staged\"\n  },\n  \"lint-staged\": {\n    \"*.{js,ts,jsx,tsx}\": [\n      \"eslint --fix\",\n      \"prettier --write\"\n    ]\n  },\n  \"devDependencies\": {\n    \"@babel/types\": \"^7.26.9\",\n    \"@types/clean-css\": \"^4.2.11\",\n    \"@types/fs-extra\": \"^9.0.13\",\n    \"@types/inquirer\": \"^7.3.3\",\n    \"@types/jest\": \"^26.0.24\",\n    \"@types/jsdom\": \"^16.2.15\",\n    \"@types/less\": \"^3.0.8\",\n    \"@types/nunjucks\": \"^3.2.6\",\n    \"@types/svgo\": \"^2.6.4\",\n    \"@typescript-eslint/eslint-plugin\": \"^4.33.0\",\n    \"@typescript-eslint/parser\": \"^4.33.0\",\n    \"eslint\": \"^7.32.0\",\n    \"eslint-config-airbnb-base\": \"^14.2.1\",\n    \"eslint-config-prettier\": \"^8.10.0\",\n    \"eslint-import-resolver-typescript\": \"^2.7.1\",\n    \"eslint-plugin-import\": \"^2.31.0\",\n    \"eslint-plugin-prettier\": \"^3.4.1\",\n    \"prettier\": \"^2.8.8\",\n    \"ts-node\": \"^10.9.2\"\n  },\n  \"dependencies\": {\n    \"@arco-design/vite-plugin-arco-vue-docs\": \"workspace:*\",\n    \"@babel/core\": \"^7.26.9\",\n    \"@babel/parser\": \"^7.26.9\",\n    \"@babel/plugin-proposal-class-properties\": \"^7.18.6\",\n    \"@babel/plugin-syntax-dynamic-import\": \"^7.8.3\",\n    \"@babel/preset-env\": \"^7.26.9\",\n    \"@babel/preset-typescript\": \"^7.26.0\",\n    \"@vitejs/plugin-vue\": \"^1.10.2\",\n    \"@vitejs/plugin-vue-jsx\": \"^1.3.10\",\n    \"@vue/babel-plugin-jsx\": \"^1.4.0\",\n    \"axios\": \"^0.21.4\",\n    \"babel-jest\": \"^26.6.3\",\n    \"chalk\": \"^4.1.2\",\n    \"clean-css\": \"^5.3.3\",\n    \"commander\": \"^7.2.0\",\n    \"comment-parser\": \"^1.4.1\",\n    \"fast-glob\": \"^3.3.3\",\n    \"fs-extra\": \"^9.1.0\",\n    \"glob\": \"^7.2.3\",\n    \"inquirer\": \"^8.2.6\",\n    \"jest\": \"^26.6.3\",\n    \"jsdom\": \"^16.7.0\",\n    \"less\": \"^4.2.2\",\n    \"moment\": \"^2.30.1\",\n    \"nunjucks\": \"^3.2.4\",\n    \"ora\": \"^5.4.1\",\n    \"rollup-plugin-terser\": \"^7.0.2\",\n    \"svgo\": \"^2.8.0\",\n    \"ts-jest\": \"^26.5.6\",\n    \"ts-morph\": \"^11.0.3\",\n    \"typescript\": \"^4.9.5\",\n    \"vite\": \"^2.9.18\",\n    \"vite-plugin-eslint\": \"^1.8.1\",\n    \"vite-svg-loader\": \"^2.2.0\",\n    \"vue-docgen-api\": \"4.40.0\",\n    \"vue-jest\": \"5.0.0-alpha.10\"\n  }\n}\n"
  },
  {
    "path": "packages/arco-vue-scripts/src/configs/jest.config.ts",
    "content": "import { Config } from '@jest/types';\nimport path from 'path';\n\nconst jestConfig = (collectCoverageFrom: string[]): Config.InitialOptions => ({\n  transform: {\n    '^.+\\\\.[jt]sx?$': require.resolve('babel-jest'),\n    '^.+\\\\.vue$': require.resolve('vue-jest'),\n    // 编译后的目标文件\n    '^.+\\\\.md$': path.resolve(__dirname, '../plugins/md-vue-jest/index.js'),\n  },\n  collectCoverageFrom: collectCoverageFrom.concat([\n    'src/**/*.{vue,tsx,ts}',\n    '!components/icon/**/*',\n    '!**/style/*',\n  ]),\n  coverageDirectory: '.coverage',\n});\n\nexport default jestConfig;\n"
  },
  {
    "path": "packages/arco-vue-scripts/src/configs/vite.dev.ts",
    "content": "import { defineConfig, InlineConfig } from 'vite';\nimport vue from '@vitejs/plugin-vue';\nimport vueJsx from '@vitejs/plugin-vue-jsx';\nimport eslint from 'vite-plugin-eslint';\nimport external from '../plugins/vite-plugin-external';\n\nexport default defineConfig({\n  mode: 'development',\n  build: {\n    target: 'modules',\n    outDir: 'es',\n    emptyOutDir: true,\n    minify: false,\n    brotliSize: false,\n    rollupOptions: {\n      output: {\n        entryFileNames: '[name].js',\n        preserveModules: true,\n        preserveModulesRoot: 'components',\n      },\n    },\n    lib: {\n      entry: 'components/index.ts',\n      formats: ['es'],\n    },\n    watch: {},\n  },\n\n  plugins: [\n    external(),\n    vue(),\n    vueJsx(),\n    eslint({\n      include: [\n        'components/**/*.ts',\n        'components/**/*.tsx',\n        'components/**/*.vue',\n      ],\n      exclude: ['node_modules', 'components/icon/**/*'],\n    }),\n  ],\n}) as InlineConfig;\n"
  },
  {
    "path": "packages/arco-vue-scripts/src/configs/vite.material.library.ts",
    "content": "import { InlineConfig } from 'vite';\nimport vue from '@vitejs/plugin-vue';\nimport vueJsx from '@vitejs/plugin-vue-jsx';\nimport svgLoader from 'vite-svg-loader';\nimport external from '../plugins/vite-plugin-external';\nimport vueExportHelper from '../plugins/vite-plugin-vue-export-helper';\n\nconst config: InlineConfig = {\n  mode: 'production',\n  build: {\n    target: 'modules',\n    outDir: 'es',\n    emptyOutDir: false,\n    minify: false,\n    brotliSize: false,\n    rollupOptions: {\n      input: 'components/index.ts',\n      output: [\n        {\n          format: 'es',\n          dir: 'es',\n          entryFileNames: '[name].js',\n          preserveModules: true,\n          preserveModulesRoot: 'components',\n        },\n        {\n          format: 'commonjs',\n          dir: 'lib',\n          entryFileNames: '[name].js',\n          preserveModules: true,\n          preserveModulesRoot: 'components',\n        },\n      ],\n    },\n    // 开启lib模式，但不使用下面配置\n    lib: {\n      entry: 'components/index.ts',\n      formats: ['es', 'cjs'],\n    },\n  },\n  // @ts-ignore vite内部类型错误\n  plugins: [external(), vue(), vueJsx(), svgLoader(), vueExportHelper()],\n};\n\nexport default config;\n"
  },
  {
    "path": "packages/arco-vue-scripts/src/configs/vite.material.library.umd.ts",
    "content": "import { InlineConfig } from 'vite';\nimport vue from '@vitejs/plugin-vue';\nimport vueJsx from '@vitejs/plugin-vue-jsx';\nimport svgLoader from 'vite-svg-loader';\nimport { terser } from 'rollup-plugin-terser';\n\nexport default ({ name }: { name: string }): InlineConfig => {\n  return {\n    mode: 'production',\n    build: {\n      target: 'modules',\n      outDir: 'dist',\n      emptyOutDir: false,\n      sourcemap: true,\n      minify: false,\n      brotliSize: false,\n      rollupOptions: {\n        external: [\n          'vue',\n          '@arco-design/web-vue',\n          '@arco-design/web-vue/es/icon',\n        ],\n        output: [\n          {\n            format: 'umd',\n            entryFileNames: `index.js`,\n            sourcemap: true,\n            globals: {\n              'vue': 'Vue',\n              '@arco-design/web-vue': 'ArcoVue',\n              '@arco-design/web-vue/es/icon': 'ArcoVueIcon',\n            },\n          },\n          {\n            format: 'umd',\n            entryFileNames: `index.min.js`,\n            sourcemap: true,\n            globals: {\n              'vue': 'Vue',\n              '@arco-design/web-vue': 'ArcoVue',\n              '@arco-design/web-vue/es/icon': 'ArcoVueIcon',\n            },\n            // @ts-ignore\n            plugins: [terser()],\n          },\n        ],\n      },\n      // 开启lib模式\n      lib: {\n        entry: 'components/components.ts',\n        formats: ['umd'],\n        name,\n      },\n    },\n    // @ts-ignore vite内部类型错误\n    plugins: [vue(), vueJsx(), svgLoader()],\n  };\n};\n"
  },
  {
    "path": "packages/arco-vue-scripts/src/configs/vite.material.prod.ts",
    "content": "import { InlineConfig } from 'vite';\nimport vue from '@vitejs/plugin-vue';\nimport vueJsx from '@vitejs/plugin-vue-jsx';\nimport svgLoader from 'vite-svg-loader';\nimport { terser } from 'rollup-plugin-terser';\n\nconst getConfig = ({\n  input,\n  name,\n}: {\n  input: string;\n  name: string;\n}): InlineConfig => {\n  return {\n    mode: 'production',\n    build: {\n      target: 'modules',\n      outDir: 'dist',\n      emptyOutDir: true,\n      minify: false,\n      rollupOptions: {\n        external: [\n          'vue',\n          '@arco-design/web-vue',\n          '@arco-design/web-vue/es/icon',\n        ],\n        output: [\n          {\n            format: 'module',\n            entryFileNames: 'index.esm.js',\n          },\n          {\n            format: 'commonjs',\n            entryFileNames: 'index.cjs.js',\n          },\n          {\n            format: 'umd',\n            entryFileNames: 'index.min.js',\n            sourcemap: true,\n            name,\n            globals: {\n              'vue': 'Vue',\n              '@arco-design/web-vue': 'ArcoVue',\n              '@arco-design/web-vue/es/icon': 'ArcoVueIcon',\n            },\n            // @ts-ignore\n            plugins: [terser()],\n          },\n        ],\n      },\n      lib: {\n        entry: input,\n        formats: ['es'],\n      },\n    },\n    plugins: [vue(), vueJsx(), svgLoader()],\n  };\n};\n\nexport default getConfig;\n"
  },
  {
    "path": "packages/arco-vue-scripts/src/configs/vite.material.style.ts",
    "content": "import { InlineConfig } from 'vite';\n\nconst config: InlineConfig = {\n  mode: 'production',\n  build: {\n    target: 'modules',\n    outDir: 'dist/css',\n    emptyOutDir: false,\n    minify: false,\n    brotliSize: false,\n    rollupOptions: {\n      external: /less$/,\n      output: [\n        {\n          format: 'es',\n          dir: 'dist/css',\n          entryFileNames: '[name].js',\n        },\n      ],\n    },\n    lib: {\n      entry: 'src/style/index.ts',\n      formats: ['es'],\n    },\n  },\n};\n\nexport default config;\n"
  },
  {
    "path": "packages/arco-vue-scripts/src/configs/vite.prod.style.ts",
    "content": "import { InlineConfig } from 'vite';\nimport cssjs from '../plugins/vite-plugin-cssjs';\n\nconst config: InlineConfig = {\n  mode: 'production',\n  build: {\n    target: 'modules',\n    outDir: 'es',\n    emptyOutDir: false,\n    minify: false,\n    brotliSize: false,\n    rollupOptions: {\n      external: /less$/,\n      output: [\n        {\n          format: 'es',\n          dir: 'es',\n          entryFileNames: '[name].js',\n        },\n        {\n          format: 'commonjs',\n          dir: 'lib',\n          entryFileNames: '[name].js',\n        },\n      ],\n    },\n    // 开启lib模式，但不使用下面配置\n    lib: {\n      entry: '',\n      formats: ['es', 'cjs'],\n    },\n  },\n  plugins: [cssjs()],\n};\n\nexport default config;\n"
  },
  {
    "path": "packages/arco-vue-scripts/src/configs/vite.prod.ts",
    "content": "import { InlineConfig } from 'vite';\nimport glob from 'glob';\nimport vue from '@vitejs/plugin-vue';\nimport vueJsx from '@vitejs/plugin-vue-jsx';\nimport external from '../plugins/vite-plugin-external';\nimport vueExportHelper from '../plugins/vite-plugin-vue-export-helper';\n\nconst langFiles = glob.sync('components/locale/lang/*.ts');\n\nconst config: InlineConfig = {\n  mode: 'production',\n  build: {\n    target: 'modules',\n    outDir: 'es',\n    emptyOutDir: false,\n    minify: false,\n    brotliSize: false,\n    rollupOptions: {\n      input: ['components/index.ts', 'components/icon/index.ts', ...langFiles],\n      output: [\n        {\n          format: 'es',\n          dir: 'es',\n          entryFileNames: '[name].js',\n          preserveModules: true,\n          preserveModulesRoot: 'components',\n        },\n        {\n          format: 'commonjs',\n          dir: 'lib',\n          entryFileNames: '[name].js',\n          preserveModules: true,\n          preserveModulesRoot: 'components',\n        },\n      ],\n    },\n    // 开启lib模式，但不使用下面配置\n    lib: {\n      entry: 'components/index.ts',\n      formats: ['es', 'cjs'],\n    },\n  },\n  // @ts-ignore vite内部类型错误\n  plugins: [external(), vue(), vueJsx(), vueExportHelper()],\n};\n\nexport default config;\n"
  },
  {
    "path": "packages/arco-vue-scripts/src/configs/vite.prod.umd.ts",
    "content": "import { InlineConfig } from 'vite';\nimport vue from '@vitejs/plugin-vue';\nimport vueJsx from '@vitejs/plugin-vue-jsx';\nimport { terser } from 'rollup-plugin-terser';\n\nexport default (type: 'component' | 'icon'): InlineConfig => {\n  const entry =\n    type === 'component'\n      ? 'components/arco-vue.ts'\n      : 'components/icon/arco-vue-icon.ts';\n  const entryFileName = type === 'component' ? 'arco-vue' : 'arco-vue-icon';\n  const name = type === 'component' ? 'ArcoVue' : 'ArcoVueIcon';\n\n  return {\n    mode: 'production',\n    build: {\n      target: 'modules',\n      outDir: 'dist',\n      emptyOutDir: false,\n      sourcemap: true,\n      minify: false,\n      brotliSize: false,\n      rollupOptions: {\n        external: 'vue',\n        output: [\n          {\n            format: 'umd',\n            entryFileNames: `${entryFileName}.js`,\n            globals: {\n              vue: 'Vue',\n            },\n          },\n          {\n            format: 'umd',\n            entryFileNames: `${entryFileName}.min.js`,\n            globals: {\n              vue: 'Vue',\n            },\n            // @ts-ignore\n            plugins: [terser()],\n          },\n        ],\n      },\n      // 开启lib模式\n      lib: {\n        entry,\n        formats: ['umd'],\n        name,\n      },\n    },\n    // @ts-ignore vite内部类型错误\n    plugins: [vue(), vueJsx()],\n  };\n};\n"
  },
  {
    "path": "packages/arco-vue-scripts/src/configs/vite.site.dev.ts",
    "content": "import path from 'path';\nimport { defineConfig, InlineConfig } from 'vite';\nimport vue from '@vitejs/plugin-vue';\nimport vueJsx from '@vitejs/plugin-vue-jsx';\nimport vueDocs from '@arco-design/vite-plugin-arco-vue-docs';\nimport svgLoader from 'vite-svg-loader';\nimport eslint from 'vite-plugin-eslint';\nimport paths from '../utils/paths';\n\nconst root = process.cwd();\n\nexport default defineConfig({\n  mode: 'development',\n  server: {\n    open: true,\n    host: '0.0.0.0',\n    port: 2233,\n    fs: {\n      strict: true,\n      allow: ['..'],\n    },\n  },\n  css: {\n    preprocessorOptions: {\n      less: {\n        paths: [paths.resolvePath('../web-vue')],\n      },\n    },\n  },\n  resolve: {\n    alias: [\n      {\n        find: /^@web-vue\\/(.*)/,\n        replacement: path.resolve(root, '../web-vue/$1'),\n      },\n    ],\n  },\n  plugins: [\n    vueDocs(),\n    vue(),\n    vueJsx(),\n    svgLoader({ svgoConfig: {} }),\n    eslint({\n      // hmr情况下cache存在问题\n      cache: false,\n      include: ['**/*.ts', '**/*.tsx', '**/*.vue'],\n      exclude: ['node_modules', '**/components/icon/**/*'],\n    }),\n  ],\n}) as InlineConfig;\n"
  },
  {
    "path": "packages/arco-vue-scripts/src/configs/vite.site.prod.ts",
    "content": "import path from 'path';\nimport { defineConfig, InlineConfig } from 'vite';\nimport vue from '@vitejs/plugin-vue';\nimport vueJsx from '@vitejs/plugin-vue-jsx';\nimport vueDocs from '@arco-design/vite-plugin-arco-vue-docs';\nimport svgLoader from 'vite-svg-loader';\nimport paths from '../utils/paths';\n\nconst root = process.cwd();\n\nconst base =\n  process.env.AssetsPublicPath ||\n  'https://lf-arcosite.bytecdn.com/obj/arcosites/arcodesign/vue/';\n\nexport default defineConfig({\n  mode: 'production',\n  base,\n  css: {\n    preprocessorOptions: {\n      less: {\n        paths: [paths.resolvePath('../web-vue')],\n      },\n    },\n  },\n  resolve: {\n    alias: [\n      {\n        find: /^@web-vue\\/(.*)/,\n        replacement: path.resolve(root, '../web-vue/$1'),\n      },\n    ],\n  },\n  build: {\n    target: 'es2015',\n  },\n  plugins: [vueDocs(), vue(), vueJsx(), svgLoader({ svgoConfig: {} })],\n}) as InlineConfig;\n"
  },
  {
    "path": "packages/arco-vue-scripts/src/index.ts",
    "content": "#!/usr/bin/env node\n\nimport path from 'path';\nimport fs from 'fs-extra';\nimport { Command } from 'commander';\nimport icongen from './scripts/icongen';\nimport lessgen from './scripts/lessgen';\nimport docgen from './scripts/docgen';\nimport dtsgen from './scripts/dtsgen';\nimport devComponent from './scripts/dev-component';\nimport devSite from './scripts/dev-site';\nimport buildComponent from './scripts/build-component';\nimport buildStyle from './scripts/build-style';\nimport buildSite from './scripts/build-site';\nimport buildMaterial from './scripts/build-material';\nimport buildMaterialLibrary from './scripts/build-material-library';\nimport test from './scripts/test';\n// import screentshotTest from './scripts/test/screentshot';\nimport changelog from './scripts/changelog';\nimport jsongen from './scripts/jsongen';\n\nconst program = new Command();\n\nconst packageContent = fs.readFileSync(\n  path.resolve(__dirname, '../package.json'),\n  'utf8'\n);\nconst packageData: any = JSON.parse(packageContent);\n\nprogram\n  .version(packageData.version)\n  .name('arco-vue-scripts')\n  .usage('command [options]');\n\nprogram\n  .command('docgen')\n  .description(\n    'generate document of component. e.g. arco-scripts-vue docgen --components menu,affix,button'\n  )\n  .option('-i, --input <filename>', 'specified input file')\n  .option('-c, --components <names>', 'component name(s) joined by comma(,)')\n  .action(({ input, components }) => {\n    components = typeof components === 'string' ? components.split(',') : [];\n    docgen({ input, components });\n  });\n\nprogram\n  .command('icongen')\n  .description('generate icon components.')\n  .action(() => {\n    icongen();\n  });\n\nprogram\n  .command('lessgen')\n  .description('generate index less file.')\n  .action(() => {\n    lessgen();\n  });\n\nprogram\n  .command('dtsgen <files>')\n  .description('emit .d.ts files for vue files.')\n  .option(\n    '-o, --outDir <direname>',\n    'Specify an output folder for all emitted files'\n  )\n  .action((files, options) => {\n    dtsgen(files, options);\n  });\n\nprogram\n  .command('dev:component')\n  .description('build components with watch mode.')\n  .action(async () => {\n    await devComponent();\n  });\n\nprogram\n  .command('dev:site')\n  .description('start vite server for development.')\n  .action(async () => {\n    await devSite();\n  });\n\nprogram\n  .command('build:component')\n  .description('build production files.')\n  .option('-u, --umd', 'build with UMD file')\n  .action(async ({ umd }) => {\n    await buildComponent({ umd });\n  });\n\nprogram\n  .command('build:style')\n  .description('build style related files.')\n  .option('-M, --material', 'generate style for material')\n  .action(async ({ material }) => {\n    await buildStyle({ material });\n  });\n\nprogram\n  .command('build:site')\n  .description('build document site.')\n  .action(async () => {\n    await buildSite();\n  });\n\nprogram\n  .command('build:material <input>')\n  .description('build vue material.')\n  .action(async (input) => {\n    await buildMaterial(input);\n  });\n\nprogram\n  .command('build:material-library')\n  .description('build vue material library.')\n  .action(async () => {\n    await buildMaterialLibrary();\n  });\n\nprogram\n  .command('test')\n  .description('run test for component or material.')\n  .option('-c, --components <names>', 'component name(s) joined by comma(,)')\n  .allowUnknownOption()\n  .action(async ({ components }) => {\n    components = typeof components === 'string' ? components.split(',') : [];\n    await test(components, program.args.slice(1));\n  });\n\n// program\n//   .command('test:screenshot')\n//   .description('run test:screenshot for components.')\n//   .option('-d, --domain <domain>', 'gen screentshots')\n//   .option('-o, --outDir <outDir>', 'gen screentshots')\n//   .action(async ({ domain, outDir }) => {\n//     await screentshotTest(domain, outDir);\n//   });\n\nprogram\n  .command('changelog')\n  .description(\n    'Obtain and organize changelog information through the git repository.'\n  )\n  .action(async () => {\n    await changelog();\n  });\n\nprogram\n  .command('jsongen')\n  .description('generate vetur and web-types json files')\n  .action(async () => {\n    await jsongen();\n  });\n\nprogram.parse(process.argv);\n"
  },
  {
    "path": "packages/arco-vue-scripts/src/plugins/md-vue-jest/index.js",
    "content": "// eslint-disable-next-line\nconst marked = require('marked');\n// eslint-disable-next-line\nconst vueTransformer = require('vue-jest');\n\nconst getVueCode = (content) => {\n  const tokens = marked.lexer(content);\n  for (const token of tokens) {\n    if (token.type === 'code' && token.lang === 'vue') {\n      return token.text;\n    }\n  }\n  return undefined;\n};\n\nmodule.exports = {\n  process(source, sourcePath, config) {\n    const code = getVueCode(source);\n    return vueTransformer.process(code, sourcePath, config);\n  },\n  getCacheKey: vueTransformer.getCacheKey,\n};\n"
  },
  {
    "path": "packages/arco-vue-scripts/src/plugins/vite-plugin-cssjs/index.ts",
    "content": "import type { Plugin } from 'vite';\n\nexport default function cssjsPlugin(): Plugin {\n  return {\n    name: 'vite:cssjs',\n    async generateBundle(outputOptions, bundle) {\n      for (const filename of Object.keys(bundle)) {\n        const chunk = bundle[filename];\n        this.emitFile({\n          type: 'asset',\n          fileName: filename.replace('index.js', 'css.js'),\n          // @ts-ignore\n          source: chunk.code.replace(/\\.less/g, '.css'),\n        });\n      }\n    },\n  };\n}\n"
  },
  {
    "path": "packages/arco-vue-scripts/src/plugins/vite-plugin-external/index.ts",
    "content": "import type { Plugin } from 'vite';\n\nexport default function externalPlugin(): Plugin {\n  return {\n    name: 'vite:external-node_modules',\n    enforce: 'pre',\n    async resolveId(source: string, importer) {\n      const result = await this.resolve(source, importer, {\n        skipSelf: true,\n        custom: { 'node-resolve': {} },\n      });\n\n      if (result && /node_modules/.test(result.id)) {\n        return false;\n      }\n\n      return null;\n    },\n  };\n}\n"
  },
  {
    "path": "packages/arco-vue-scripts/src/plugins/vite-plugin-vue-export-helper/index.ts",
    "content": "import type { Plugin } from 'vite';\n\nconst EXPORT_HELPER_ID = 'plugin-vue:export-helper';\nconst helperCode = `\nexport default (sfc, props) => {\n  for (const [key, val] of props) {\n    sfc[key] = val\n  }\n  return sfc\n}\n`;\n\nexport default function virtualPlugin(): Plugin {\n  return {\n    name: 'vite:vue-export-helper',\n    enforce: 'pre',\n    resolveId(source: string) {\n      if (source === EXPORT_HELPER_ID) {\n        return `${EXPORT_HELPER_ID}.js`;\n      }\n      return null;\n    },\n    load(source) {\n      if (source === `${EXPORT_HELPER_ID}.js`) {\n        return helperCode;\n      }\n      return null;\n    },\n  };\n}\n"
  },
  {
    "path": "packages/arco-vue-scripts/src/scripts/build-component/index.ts",
    "content": "import fs from 'fs-extra';\nimport path from 'path';\nimport { build } from 'vite';\nimport config from '../../configs/vite.prod';\nimport getUmdConfig from '../../configs/vite.prod.umd';\n\nasync function run({ umd = false }) {\n  await fs.emptyDir(path.resolve(process.cwd(), 'es'));\n  await fs.emptyDir(path.resolve(process.cwd(), 'lib'));\n  await build(config);\n  await fs.copy(\n    path.resolve(process.cwd(), 'components/icon/@types/icon'),\n    path.resolve(process.cwd(), 'es/icon'),\n    {\n      overwrite: true,\n    }\n  );\n\n  if (umd) {\n    await fs.emptyDir(path.resolve(process.cwd(), 'dist'));\n    await build(getUmdConfig('component'));\n    await build(getUmdConfig('icon'));\n  }\n}\n\nexport default run;\n"
  },
  {
    "path": "packages/arco-vue-scripts/src/scripts/build-material/index.ts",
    "content": "import path from 'path';\nimport fs from 'fs-extra';\nimport glob from 'glob';\nimport less from 'less';\nimport { build } from 'vite';\nimport getConfig from '../../configs/vite.material.prod';\nimport styleConfig from '../../configs/vite.material.style';\nimport { getUserConfig } from '../../utils/config';\nimport { getPackage } from '../../utils/get-package';\n\nasync function buildLess() {\n  try {\n    // 存在style.css时，将其移动到css目录\n    await fs.access('dist/style.css');\n\n    fs.moveSync('dist/style.css', 'dist/css/index.css');\n  } catch {\n    // 不存在产物时，通过index.less构建\n    const lessContent = fs.readFileSync('src/style/index.less', 'utf8');\n    less.render(\n      lessContent,\n      { paths: [path.resolve(process.cwd(), 'src')] },\n      (err, result) => {\n        if (err) {\n          console.log(err);\n        } else if (result && result.css) {\n          fs.writeFileSync('dist/css/index.css', result.css);\n        }\n      }\n    );\n  }\n}\n\nasync function buildStyle() {\n  fs.ensureDirSync('dist/css');\n  await buildLess();\n  // 编译less文件入口\n  await build(styleConfig);\n  // 复制less文件到dist/css目录下\n  const lessFiles = glob.sync('src/style/**/*.less');\n  for (const file of lessFiles) {\n    const filename = file.match(/src\\/style\\/(.*)/)?.[1];\n    fs.copyFileSync(file, `dist/css/${filename}`);\n  }\n}\n\nasync function run(buildInput: string) {\n  const packageData = await getPackage();\n  const input = packageData.buildInput ?? buildInput;\n  const name = packageData.umd?.module ?? 'ArcoMaterial';\n  const baseConfig = getConfig({ input, name });\n  const userConfig = await getUserConfig('vite.config.js');\n  const mergedConfig = userConfig?.(baseConfig) ?? baseConfig;\n\n  await build(mergedConfig);\n  await buildStyle();\n}\n\nexport default run;\n"
  },
  {
    "path": "packages/arco-vue-scripts/src/scripts/build-material-library/index.ts",
    "content": "import fs from 'fs-extra';\nimport path from 'path';\nimport { build } from 'vite';\nimport config from '../../configs/vite.material.library';\nimport getUmdConfig from '../../configs/vite.material.library.umd';\nimport { getPackage } from '../../utils/get-package';\n\nasync function run() {\n  await fs.emptyDir(path.resolve(process.cwd(), 'es'));\n  await fs.emptyDir(path.resolve(process.cwd(), 'lib'));\n  await build(config);\n\n  const packageData = await getPackage();\n  const name = packageData.umd?.module ?? 'ArcoComponents';\n\n  await fs.emptyDir(path.resolve(process.cwd(), 'dist'));\n  await build(getUmdConfig({ name }));\n}\n\nexport default run;\n"
  },
  {
    "path": "packages/arco-vue-scripts/src/scripts/build-site/index.ts",
    "content": "import { build } from 'vite';\nimport config from '../../configs/vite.site.prod';\n\nasync function run() {\n  await build(config);\n}\n\nexport default run;\n"
  },
  {
    "path": "packages/arco-vue-scripts/src/scripts/build-style/index.ts",
    "content": "import path from 'path';\nimport fs from 'fs-extra';\nimport less from 'less';\nimport CleanCSS from 'clean-css';\nimport glob from 'glob';\nimport { build } from 'vite';\n// import ora from 'ora';\nimport paths from '../../utils/paths';\nimport config from '../../configs/vite.prod.style';\nimport lessgen from '../lessgen';\n\nconst run = async ({ material }: { material: boolean }) => {\n  // 更新index.less文件\n  if (!material) {\n    lessgen();\n  }\n\n  // 拷贝less文件到目标文件，index.less编译生成index.css\n  const files = glob.sync('**/*.{less,js}', {\n    cwd: paths.resolvePath('components'),\n  });\n\n  for (const filename of files) {\n    const absolute = paths.resolvePath(`components/${filename}`);\n    fs.copySync(absolute, paths.resolvePath(`es/${filename}`));\n    fs.copySync(absolute, paths.resolvePath(`lib/${filename}`));\n\n    if (/index\\.less$/.test(filename)) {\n      console.log(`building ${filename}`);\n\n      const lessContent = fs.readFileSync(absolute, 'utf8');\n      less.render(\n        lessContent,\n        {\n          filename,\n          paths: [\n            paths.resolvePath(`components/${path.dirname(filename)}`),\n            paths.root,\n          ],\n        },\n        (err, result) => {\n          if (err) {\n            console.log(err);\n          } else if (result && result.css) {\n            const cssFilename = filename.replace('.less', '.css');\n            fs.writeFileSync(\n              paths.resolvePath(`es/${cssFilename}`),\n              result.css\n            );\n            fs.writeFileSync(\n              paths.resolvePath(`lib/${cssFilename}`),\n              result.css\n            );\n            console.log(`${filename} build success`);\n          }\n        }\n      );\n    }\n  }\n\n  // 拷贝并编译less入口文件\n  console.log('build target css');\n  const indexLessPath = paths.resolvePath('components/index.less');\n  fs.copySync(indexLessPath, paths.resolvePath('es/index.less'));\n  fs.copySync(indexLessPath, paths.resolvePath('lib/index.less'));\n\n  const indexLess = fs.readFileSync(indexLessPath, 'utf8');\n  const result = await less.render(indexLess, {\n    paths: [paths.components],\n  });\n\n  fs.ensureDirSync(paths.resolvePath('dist'));\n\n  fs.writeFileSync(\n    paths.resolvePath(material ? 'dist/index.less' : 'dist/arco.less'),\n    \"@import '../es/index.less';\\n\\n\"\n  );\n\n  fs.writeFileSync(\n    paths.resolvePath(material ? 'dist/index.css' : 'dist/arco.css'),\n    result.css\n  );\n\n  const compress = new CleanCSS().minify(result.css);\n\n  fs.writeFileSync(\n    paths.resolvePath(material ? 'dist/index.min.css' : 'dist/arco.min.css'),\n    compress.styles\n  );\n\n  console.log(`target build success`);\n\n  // 构建style/index.ts\n  const indexFiles = glob.sync('components/**/style/index.ts', {\n    cwd: paths.root,\n  });\n\n  const rollupInput = indexFiles.reduce((pre, cur) => {\n    pre[cur.slice(11, -3)] = cur;\n    return pre;\n  }, {} as any);\n\n  const buildIndex = async () => {\n    if (config?.build?.rollupOptions) {\n      config.build.rollupOptions.input = rollupInput;\n    }\n\n    await build(config);\n  };\n\n  await buildIndex();\n};\n\nexport default run;\n"
  },
  {
    "path": "packages/arco-vue-scripts/src/scripts/changelog/index.ts",
    "content": "import fs from 'fs-extra';\nimport inquirer from 'inquirer';\nimport axios from 'axios';\nimport moment from 'moment';\nimport { configure } from 'nunjucks';\nimport { compareVersion, isValidComponent } from './utils';\nimport { toKebabCase } from '../../utils/convert-case';\n\nconst nunjucksEnv = configure(__dirname, {\n  autoescape: false,\n  trimBlocks: true,\n  lstripBlocks: true,\n});\n\ninterface Changelog {\n  version: string;\n  date: string;\n  list: Record<string, any>[];\n}\n\ninterface EmitInfo {\n  filename: string;\n  template: string;\n  data: any;\n}\n\nconst typeMap: Record<string, string> = {\n  'New feature': 'feature',\n  'Bug fix': 'bugfix',\n  'Documentation change': 'docs',\n  'Refactoring': 'refactor',\n  'Component style change': 'style',\n  'Enhancement': 'enhancement',\n  'Test cases': 'test',\n  'Continuous integration': 'ci',\n  'Typescript definition change': 'typescript',\n  'Breaking change': 'attention',\n};\n\nconst getRecords = (mr: any) => {\n  const content = mr.body.replace(/\\r\\n/g, '\\n');\n\n  const records: Array<Record<string, any>> = [];\n\n  const typeRule = new RegExp(\n    '##\\\\s+Types of changes.+?\\\\[[xX]]\\\\s+(.+?)\\\\n',\n    's'\n  );\n\n  const typeString = content.match(typeRule)?.[1];\n\n  const type = typeString && typeMap[typeString];\n\n  const rule = new RegExp(\n    // Table title\n    '##\\\\s+Changelog\\\\n\\\\n' +\n      // Table title\n      '\\\\s*\\\\|(.+)\\\\|\\\\s*\\\\n' +\n      // Alignment info\n      '\\\\s*\\\\|(?:[-: ]+[-| :]*)\\\\|\\\\s*\\\\n' +\n      // Table content\n      '((?:\\\\s*\\\\|.*\\\\|\\\\s*(?:\\\\n|$))*)'\n  );\n\n  const matchResult = content.match(rule);\n  if (matchResult) {\n    const titles = matchResult[1]\n      .split('|')\n      .map((item: string) => item.toLowerCase().trim());\n    const lines = matchResult[2]\n      .split('\\n')\n      .filter((value: string) => Boolean(value.trim()));\n    for (const line of lines) {\n      const items = line\n        .split('|')\n        .map((value: string) => value.trim())\n        .filter((value: string) => Boolean(value.trim()));\n\n      if (items.length > 0) {\n        const data = titles.reduce(\n          (data: Record<string, any>, title: string, index: number) => {\n            switch (title) {\n              case 'type': {\n                if (items[index] && typeMap[items[index]]) {\n                  data[title] = typeMap[items[index]];\n                }\n                break;\n              }\n              case 'component':\n                data[title] = toKebabCase(items[index] ?? '');\n                break;\n              case 'related issues': {\n                const match = (items[index] ?? '').match(/#\\d+/g);\n                if (match) {\n                  data.issue = match.map((item: string) => item.slice(1));\n                }\n                break;\n              }\n              default:\n                data[title] = items[index];\n            }\n            return data;\n          },\n          {\n            mrId: mr.number,\n            mrURL: mr.html_url,\n            type,\n          } as Record<string, any>\n        );\n        records.push(data);\n      }\n    }\n  }\n\n  return records;\n};\n\nconst addAll = (data: any, changelog: any) => {\n  if (!changelog[data.type]) {\n    changelog[data.type] = [];\n  }\n  if (!data.component || data.component === 'common') {\n    changelog[data.type].push(data.content);\n  } else {\n    changelog[data.type].push(`**${data.component}:** ${data.content}`);\n  }\n};\n\nconst addComponent = (data: any, changelog: any) => {\n  if (!data.component || data.component === 'common') {\n    return;\n  }\n  if (!changelog[data.component]) {\n    changelog[data.component] = {};\n  }\n  if (!changelog[data.component][data.type]) {\n    changelog[data.component][data.type] = [];\n  }\n  changelog[data.component][data.type].push(data.content);\n};\n\nconst getEmitsFromChangelog = async (\n  changelog: Changelog\n): Promise<EmitInfo[]> => {\n  const allCN = {};\n  const addEN = {};\n  const componentCN: Record<string, any> = {};\n  const componentEN: Record<string, any> = {};\n\n  for (const item of changelog.list) {\n    if (!isValidComponent(item.component)) {\n      // eslint-disable-next-line no-await-in-loop\n      const answer = await inquirer.prompt({\n        type: 'input',\n        name: 'component',\n        message: `The component name '${item.component}' is invalid, please input the new name.[${item.mrId}]`,\n        validate(input: any) {\n          return isValidComponent(input);\n        },\n      });\n      item.component = answer.component;\n    }\n    if (!item.type) {\n      // eslint-disable-next-line no-await-in-loop\n      const answer = await inquirer.prompt({\n        type: 'list',\n        name: 'type',\n        choices: [\n          'feature',\n          'bugfix',\n          'enhancement',\n          'style',\n          'typescript',\n          'attention',\n        ],\n        message: `Please select the type for '${item.component}'.[${item.mrId}]`,\n      });\n      item.type = answer.type;\n    }\n\n    const contentCN = `${item['changelog(cn)']} ([#${item.mrId}](${item.mrURL}))`;\n    const contentEN = `${item['changelog(en)']} ([#${item.mrId}](${item.mrURL}))`;\n    addAll({ ...item, content: contentCN }, allCN);\n    addAll({ ...item, content: contentEN }, addEN);\n    addComponent({ ...item, content: contentCN }, componentCN);\n    addComponent({ ...item, content: contentEN }, componentEN);\n  }\n\n  const emits: EmitInfo[] = [\n    {\n      filename: 'CHANGELOG.zh-CN.md',\n      template: 'template/main.zh-CN.njk',\n      data: { version: changelog.version, date: changelog.date, ...allCN },\n    },\n    {\n      filename: 'CHANGELOG.md',\n      template: 'template/main.en-US.njk',\n      data: { version: changelog.version, date: changelog.date, ...addEN },\n    },\n  ];\n\n  for (const component of Object.keys(componentCN)) {\n    let filename = `components/${component}/CHANGELOG.zh-CN.md`;\n    if (component === 'icon') {\n      filename = `components/icon-component/CHANGELOG.zh-CN.md`;\n    }\n\n    emits.push({\n      filename,\n      template: 'template/main.zh-CN.njk',\n      data: {\n        version: changelog.version,\n        date: changelog.date,\n        ...componentCN[component],\n      },\n    });\n  }\n  for (const component of Object.keys(componentEN)) {\n    let filename = `components/${component}/CHANGELOG.md`;\n    if (component === 'icon') {\n      filename = `components/icon-component/CHANGELOG.md`;\n    }\n\n    emits.push({\n      filename,\n      template: 'template/main.en-US.njk',\n      data: {\n        version: changelog.version,\n        date: changelog.date,\n        ...componentEN[component],\n      },\n    });\n  }\n\n  return emits;\n};\n\nconst appendChangelog = async (emit: EmitInfo) => {\n  const { filename, template, data } = emit;\n  const content = nunjucksEnv.render(template, data);\n\n  try {\n    await fs.access(filename);\n    const origin = await fs.readFile(filename, 'utf-8');\n    const match = origin.match(/^(```yaml\\n.*?\\n```\\n\\n)?(.*)$/s);\n    if (match) {\n      await fs.writeFile(filename, `${match[1] ?? ''}${content}\\n${match[2]}`);\n    }\n  } catch {\n    // eslint-disable-next-line\n    await fs.writeFile(filename, '```yaml\\nchangelog: true\\n```\\n\\n' + content);\n  }\n};\n\nconst getLastVersion = (content: string) => {\n  const match = content.match(/## (\\d+\\.\\d+\\.\\d+(-beta\\.\\d+)?)/);\n  return match?.[1];\n};\n\nconst getBetaVersions = (content: string) => {\n  const matches = Array.from(\n    content.matchAll(/## (\\d+\\.\\d+\\.\\d+(-beta\\.\\d+)?)/g)\n  );\n  const versions = [];\n  for (const item of matches) {\n    if (/beta/.test(item[1])) {\n      versions.push(item[1]);\n    } else {\n      break;\n    }\n  }\n  return versions;\n};\n\nconst run = async () => {\n  let version = '2.0.0';\n  if (fs.existsSync('package.json')) {\n    try {\n      const packageJson = await fs.readFile('package.json', 'utf8');\n      const packageData = JSON.parse(packageJson);\n      if (packageData.version) {\n        version = packageData.version;\n      }\n    } catch {\n      // eslint-disable-next-line no-console\n      console.log('read version from package.json has error');\n    }\n  }\n\n  const answer = await inquirer.prompt({\n    type: 'input',\n    name: 'version',\n    message: 'Please input the version',\n    default: version,\n    validate(input: any) {\n      return /\\d+\\.\\d+\\.\\d+(-beta\\.\\d+)?/.test(input);\n    },\n  });\n\n  version = answer.version;\n\n  const currentContent = fs.readFileSync('CHANGELOG.zh-CN.md', 'utf8');\n  const lastVersion = getLastVersion(currentContent);\n\n  if (\n    lastVersion &&\n    (version === lastVersion || compareVersion(version, lastVersion) < 1)\n  ) {\n    const answer = await inquirer.prompt({\n      type: 'input',\n      name: 'version',\n      message: `This version is already existed or lower than last version, please reenter`,\n      validate(input: any) {\n        return (\n          /\\d+\\.\\d+\\.\\d+(-beta\\.\\d+)?/.test(input) && input !== lastVersion\n        );\n      },\n    });\n    version = answer.version;\n  }\n\n  const res = await axios.get(\n    `https://api.github.com/search/issues?accept=application/vnd.github.v3+json&q=repo:arco-design/arco-design-vue+is:pr+is:merged+milestone:${version}`\n  );\n\n  if (res.status === 200) {\n    const { data } = res;\n    const changelog: Changelog = {\n      version,\n      date: moment().format('YYYY-MM-DD'),\n      list: [] as Record<string, any>[],\n    };\n\n    for (const item of data?.items ?? []) {\n      const records = getRecords(item);\n      changelog.list.push(...records);\n    }\n\n    if (changelog.list.length > 0) {\n      const emits = await getEmitsFromChangelog(changelog);\n\n      for (const item of emits) {\n        // eslint-disable-next-line no-await-in-loop\n        await appendChangelog(item);\n      }\n    } else {\n      // eslint-disable-next-line no-console\n      console.log('No update information found');\n    }\n  }\n};\n\nexport default run;\n"
  },
  {
    "path": "packages/arco-vue-scripts/src/scripts/changelog/template/main.en-US.njk",
    "content": "## {{ version }}\n\n`{{ date }}`\n\n{% if attention -%}\n  ### ⚠️ Important Attention\n\n  {% for content in attention -%}\n    - {{ content }}\n  {% endfor %}\n\n{% endif %}\n{% if feature -%}\n  ### 🆕 Feature\n\n  {% for content in feature -%}\n    - {{ content }}\n  {% endfor %}\n\n{% endif %}\n{% if bugfix -%}\n  ### 🐛 BugFix\n\n  {% for content in bugfix -%}\n    - {{ content }}\n  {% endfor %}\n\n{% endif %}\n{% if enhancement -%}\n  ### 💎 Enhancement\n\n  {% for content in enhancement -%}\n    - {{ content }}\n  {% endfor %}\n\n{% endif %}\n{% if style -%}\n  ### 💅 Style\n\n  {% for content in style -%}\n    - {{ content }}\n  {% endfor %}\n\n{% endif %}\n{% if typescript -%}\n  ### 🆎 TypeScript\n\n  {% for content in typescript -%}\n    - {{ content }}\n  {% endfor %}\n\n{% endif %}\n"
  },
  {
    "path": "packages/arco-vue-scripts/src/scripts/changelog/template/main.zh-CN.njk",
    "content": "## {{ version }}\n\n`{{ date }}`\n\n{% if attention -%}\n  ### ⚠️ 重点注意\n\n  {% for content in attention -%}\n    - {{ content }}\n  {% endfor %}\n\n{% endif %}\n{% if feature -%}\n  ### 🆕 新增功能\n\n  {% for content in feature -%}\n    - {{ content }}\n  {% endfor %}\n\n{% endif %}\n{% if bugfix -%}\n  ### 🐛 问题修复\n\n  {% for content in bugfix -%}\n    - {{ content }}\n  {% endfor %}\n\n{% endif %}\n{% if enhancement -%}\n  ### 💎 功能优化\n\n  {% for content in enhancement -%}\n    - {{ content }}\n  {% endfor %}\n\n{% endif %}\n{% if style -%}\n  ### 💅 样式更新\n\n  {% for content in style -%}\n    - {{ content }}\n  {% endfor %}\n\n{% endif %}\n{% if typescript -%}\n  ### 🆎 类型修正\n\n  {% for content in typescript -%}\n    - {{ content }}\n  {% endfor %}\n\n{% endif %}\n"
  },
  {
    "path": "packages/arco-vue-scripts/src/scripts/changelog/utils.ts",
    "content": "const componentList = [\n  'common',\n  'alert',\n  'anchor',\n  'affix',\n  'auto-complete',\n  'avatar',\n  'back-top',\n  'badge',\n  'breadcrumb',\n  'button',\n  'calendar',\n  'card',\n  'carousel',\n  'cascader',\n  'checkbox',\n  'collapse',\n  'comment',\n  'config-provider',\n  'date-picker',\n  'descriptions',\n  'divider',\n  'drawer',\n  'dropdown',\n  'empty',\n  'form',\n  'grid',\n  'icon',\n  'input',\n  'input-tag',\n  'input-number',\n  'layout',\n  'link',\n  'list',\n  'message',\n  'menu',\n  'modal',\n  'mention',\n  'notification',\n  'page-header',\n  'pagination',\n  'popconfirm',\n  'popover',\n  'progress',\n  'radio',\n  'rate',\n  'resize-box',\n  'result',\n  'select',\n  'skeleton',\n  'slider',\n  'space',\n  'spin',\n  'statistic',\n  'steps',\n  'switch',\n  'table',\n  'tabs',\n  'tag',\n  'timeline',\n  'time-picker',\n  'tooltip',\n  'transfer',\n  'tree',\n  'tree-select',\n  'textarea',\n  'trigger',\n  'typography',\n  'upload',\n  'image',\n  'overflow-list',\n  'scrollbar',\n  'watermark',\n  'color-picker',\n  'verification-code',\n];\n\nexport const isValidComponent = (component: string) => {\n  return componentList.includes(component);\n};\n\nconst getVersionNumber = (version: string): number => {\n  if (!version) {\n    return 0;\n  }\n  switch (version) {\n    case 'alpha':\n      return -3;\n    case 'beta':\n      return -2;\n    case 'rc':\n      return -1;\n    default:\n      return parseInt(version, 10);\n  }\n};\n\nexport const compareVersion = (v1: string, v2: string) => {\n  const mainArray1 = v1.split('-');\n  const mainArray2 = v2.split('-');\n  // Major version\n  const array1 = mainArray1[0].split('.');\n  const array2 = mainArray2[0].split('.');\n  const maxL = Math.max(array1.length, array2.length);\n  for (let i = 0; i < maxL; i++) {\n    const v1 = getVersionNumber(array1[i]);\n    const v2 = getVersionNumber(array2[i]);\n    if (v1 !== v2) {\n      return v1 > v2 ? 1 : -1;\n    }\n  }\n\n  // Beta part\n  const subArray1 = (mainArray1[1] ?? '').split('.');\n  const subArray2 = (mainArray2[1] ?? '').split('.');\n  const maxSL = Math.max(subArray1.length, subArray2.length);\n  for (let i = 0; i < maxSL; i++) {\n    const v1 = getVersionNumber(subArray1[i]);\n    const v2 = getVersionNumber(subArray2[i]);\n    if (v1 !== v2) {\n      return v1 > v2 ? 1 : -1;\n    }\n  }\n\n  return 0;\n};\n"
  },
  {
    "path": "packages/arco-vue-scripts/src/scripts/dev-component/index.ts",
    "content": "import ora from 'ora';\nimport chalk from 'chalk';\nimport { build, InlineConfig } from 'vite';\nimport { RollupWatcher } from 'rollup';\nimport config from '../../configs/vite.dev';\n\nconst run = async () => {\n  const spinner = ora();\n  spinner.start(chalk.cyan('启动组件开发环境...\\n'));\n  const watcher = (await build(config as InlineConfig)) as RollupWatcher;\n\n  watcher.on('event', async (event) => {\n    if (event.code === 'START' || event.code === 'END') {\n      spinner.start(chalk.cyan('开始监听文件变化...'));\n    } else if (event.code === 'BUNDLE_START') {\n      spinner.start(chalk.cyan('检测到文件变化，重新编译文件\\n'));\n    } else if (event.code === 'BUNDLE_END') {\n      console.log(chalk.green('编译完成！\\n'));\n    } else if (event.code === 'ERROR') {\n      console.log(chalk.red('编译失败！\\n'));\n      console.error(event.error);\n    }\n  });\n};\n\nexport default run;\n"
  },
  {
    "path": "packages/arco-vue-scripts/src/scripts/dev-site/index.ts",
    "content": "import { createServer } from 'vite';\nimport config from '../../configs/vite.site.dev';\n\nasync function run() {\n  const server = await createServer(config);\n  await server.listen();\n}\n\nexport default run;\n"
  },
  {
    "path": "packages/arco-vue-scripts/src/scripts/docgen/README.md",
    "content": "# API documentation generation instructions\n\n## About the parser\n\nDocuments are divided into two types: component and interface\n\nThis is done by two parsers:\n- Components> vue-docgen-api\n- interface > parseInterface\n  - Use ts-morph to generate ast and convert it to the same structure as vue-docgen-api\n\n## Type annotation\n\n### Component\n\n|Tag name|Description|\n|-|-|\n|displayName|Component name|\n|noBrackets|Don't wrap angle brackets|\n\n### Component Props\n\n|Tag name|Description|\n|-|-|\n|values|enumerate|\n|defaultValue|Default value|\n|type|Type|\n|vModel|v-model, replace the original model, because it will change the name to `v-model`|\n\nNothing else is special, just look at the document\n[vue-docgen-api](https://vue-styleguidist.github.io/docs/Documenting.html#code-comments)\n\n### Interface\n|Tag name|Description|\n|-|-|\n|defaultValue|Default value|\nOther look [JSDoc tags](https://jsdoc.app/)\n\n"
  },
  {
    "path": "packages/arco-vue-scripts/src/scripts/docgen/index.ts",
    "content": "/* eslint-disable no-await-in-loop */\nimport path from 'path';\nimport fs from 'fs-extra';\nimport glob from 'glob';\nimport { ComponentDoc, parse as parseComponent } from 'vue-docgen-api';\nimport chalk from 'chalk';\nimport print from './utils/print';\nimport templates from './templates';\nimport parseInterface from './utils/parse-interface';\nimport { getTemplate, toKebabCase } from './utils';\nimport parseMaterial from './utils/parse-material';\nimport { slotTagHandler } from './slot-tag-handler';\n\nconst MD_TEMPLATE = 'TEMPLATE.md';\nconst MD_TARGET = 'README.zh-CN.md';\nconst MD_TARGET_EN = 'README.en-US.md';\nconst MD_MATERIAL_README = 'docs/README.md';\nconst MD_MATERIAL_README_EN = 'docs/README.en-US.md';\nconst TEMPLATE_GLOB = `components/*/${MD_TEMPLATE}`;\n\ntype ComponentDocType = ComponentDoc | ComponentDoc[];\ntype ApiType = 'component' | 'interface';\n\nconst getApiTmpl = (\n  componentDoc: ComponentDocType,\n  type: ApiType,\n  lang: string\n) => {\n  const componentDocList = Array.isArray(componentDoc)\n    ? componentDoc\n    : [componentDoc];\n\n  const res: string[] = [];\n\n  componentDocList.forEach((item) => {\n    const { displayName, props, events, methods, slots, tags } = item;\n\n    const getTmpl = (suffix: string, content: string) => {\n      if (!content) return '';\n      let title = displayName;\n\n      if (type === 'component') {\n        title = tags?.noBrackets\n          ? displayName\n          : `<${toKebabCase(displayName)}>`;\n        title = `\\`${title}\\` ${suffix}`;\n      }\n\n      if (tags?.version) {\n        const version = (tags.version[0] as any)?.description;\n        version && (title += ` (${version})`);\n      }\n\n      let description = '';\n      if (suffix === 'Props' && tags?.[lang]) {\n        description = (tags[lang][0] as any)?.description;\n      }\n\n      return `### ${title}${description ? `\\n${description}` : ''}\\n${content}`;\n    };\n\n    const propsTmpl = getTmpl(\n      'Props',\n      templates.props(props || [], { isInterface: type === 'interface' }, lang)\n    );\n    const eventsTmpl = getTmpl('Events', templates.events(events || [], lang));\n    const methodsTmpl = getTmpl(\n      'Methods',\n      templates.methods(methods || [], lang)\n    );\n    const slotsTmpl = getTmpl('Slots', templates.slots(slots || [], lang));\n\n    res.push(`\\n${propsTmpl}${eventsTmpl}${methodsTmpl}${slotsTmpl}\\n`);\n  });\n\n  return res.join('\\n');\n};\n\nconst getComponentNameFormDir = (dir: string) => {\n  const matchRes = dir.match(/[^/]+$/g);\n  return matchRes ? matchRes[0] : '';\n};\n\n// 占位符替换\nconst replacePlaceholderToDoc = async ({\n  dir,\n  template,\n  placeholderMatchers,\n  parser,\n  type,\n  lang,\n}: {\n  dir: string;\n  template: string;\n  placeholderMatchers: RegExp;\n  parser: (filePath: string) => Promise<ComponentDocType> | ComponentDocType;\n  type: ApiType;\n  lang: string;\n}) => {\n  let result = template;\n  const matches = Array.from(result.matchAll(placeholderMatchers));\n  for (const item of matches) {\n    try {\n      // @ts-ignore\n      // eslint-disable-next-line\n      const componentDoc = await parser(path.resolve(dir, item[1]), {\n        addScriptHandlers: [slotTagHandler],\n      });\n      result = result.replace(item[0], getApiTmpl(componentDoc, type, lang));\n    } catch (err) {\n      // eslint-disable-next-line no-console\n      console.log(err, dir);\n    }\n  }\n  return result;\n};\n\nconst docgen = async ({\n  input,\n  components,\n}: {\n  input?: string;\n  components?: string[];\n}) => {\n  const files = [];\n\n  if (input) {\n    const filename = path.resolve(process.cwd(), input);\n    try {\n      await fs.ensureFile(filename);\n      files.push(filename);\n    } catch (err) {\n      return;\n    }\n  } else {\n    // 读取组件列表\n    const templates = glob.sync(TEMPLATE_GLOB, { absolute: true });\n    if (components && components.length > 0) {\n      const reg = new RegExp(components.join('|'));\n      for (const template of templates) {\n        if (reg.test(template)) {\n          files.push(template);\n        }\n      }\n    } else {\n      files.push(...templates);\n    }\n  }\n\n  print.info('Start to generate document...');\n\n  for (const filename of files) {\n    const dirname = path.dirname(filename);\n    const result = fs.readFileSync(filename, 'utf8');\n    let zhResult = getTemplate(result, 'zh');\n    let enResult = getTemplate(result, 'en');\n    // API占位符替换\n    zhResult = await replacePlaceholderToDoc({\n      dir: dirname,\n      template: zhResult,\n      placeholderMatchers: /%%API\\((.+?)\\)%%/g,\n      parser: parseComponent,\n      type: 'component',\n      lang: 'zh',\n    });\n\n    enResult = await replacePlaceholderToDoc({\n      dir: dirname,\n      template: enResult,\n      placeholderMatchers: /%%API\\((.+?)\\)%%/g,\n      parser: parseComponent,\n      type: 'component',\n      lang: 'en',\n    });\n\n    // INTERFACE占位符替换\n    zhResult = await replacePlaceholderToDoc({\n      dir: dirname,\n      template: zhResult,\n      placeholderMatchers: /%%INTERFACE\\((.+?)\\)%%/g,\n      parser: parseInterface,\n      type: 'interface',\n      lang: 'zh',\n    });\n\n    enResult = await replacePlaceholderToDoc({\n      dir: dirname,\n      template: enResult,\n      placeholderMatchers: /%%INTERFACE\\((.+?)\\)%%/g,\n      parser: parseInterface,\n      type: 'interface',\n      lang: 'en',\n    });\n\n    enResult = enResult.replace(\n      /```yaml\\n.+?```\\n/s,\n      (match) => `${match}\\n*Auto translate by google.*\\n`\n    );\n\n    zhResult = await parseMaterial(zhResult, {\n      matcher: /%%MATERIAL\\((.+?)\\)%%/,\n      dirname,\n    });\n\n    enResult = await parseMaterial(enResult, {\n      matcher: /%%MATERIAL\\((.+?)\\)%%/,\n      dirname,\n    });\n\n    try {\n      const outputPath = input\n        ? path.resolve(process.cwd(), MD_MATERIAL_README)\n        : path.resolve(dirname, MD_TARGET);\n\n      await fs.outputFile(outputPath, zhResult);\n\n      const outputPath2 = input\n        ? path.resolve(process.cwd(), MD_MATERIAL_README_EN)\n        : path.resolve(dirname, MD_TARGET_EN);\n\n      await fs.outputFile(outputPath2, enResult);\n\n      if (!input) {\n        const componentName = getComponentNameFormDir(dirname);\n\n        print.success(\n          `${chalk.black.bgGreen.bold(\n            `Generate README of component ${componentName} Success!`\n          )}`\n        );\n      }\n    } catch (err) {\n      print.error(err);\n    }\n  }\n};\n\nexport default docgen;\n"
  },
  {
    "path": "packages/arco-vue-scripts/src/scripts/docgen/slot-tag-handler.ts",
    "content": "import * as bt from '@babel/types';\nimport { Documentation } from 'vue-docgen-api';\nimport getDoclets from 'vue-docgen-api/dist/utils/getDoclets';\nimport getProperties from 'vue-docgen-api/dist/script-handlers/utils/getProperties';\nimport getDocblock from 'vue-docgen-api/dist/utils/getDocblock';\n\nexport function slotTagHandler(documentation: Documentation, path: any) {\n  if (bt.isObjectExpression(path.node)) {\n    const setupPath = getProperties(path, 'setup');\n\n    if (!setupPath.length) {\n      return Promise.resolve();\n    }\n\n    let i = 0;\n    let docBlock = getDocblock(setupPath[0], { commentIndex: i });\n    while (docBlock) {\n      // if no doc block return\n      if (!docBlock || !docBlock.length) {\n        return Promise.resolve();\n      }\n\n      const jsDoc = getDoclets(docBlock);\n      if (jsDoc.tags) {\n        const slotTag = jsDoc.tags.find((a: any) => a.title === 'slot');\n        if (slotTag) {\n          const name =\n            // @ts-ignore\n            typeof slotTag.content === 'string' ? slotTag.content : 'default';\n          const slotDescriptor = documentation.getSlotDescriptor(name);\n          slotDescriptor.description = jsDoc.description;\n          const bindingsTag = jsDoc.tags.filter(\n            (t: any) => t.title === 'binding'\n          );\n          if (bindingsTag) {\n            slotDescriptor.bindings = bindingsTag;\n          }\n          const customTags = jsDoc.tags.filter(\n            (t: any) => t.title !== 'binding' && t.title !== 'slot'\n          );\n          if (customTags.length) {\n            const tags = customTags.reduce((pre: any, item: any) => {\n              pre[item.title] = item;\n              return pre;\n            }, {} as any);\n            slotDescriptor.tags = tags;\n          }\n        }\n      }\n      docBlock = getDocblock(setupPath[0], { commentIndex: ++i });\n    }\n  }\n  return Promise.resolve();\n}\n"
  },
  {
    "path": "packages/arco-vue-scripts/src/scripts/docgen/templates/events.ts",
    "content": "import { EventDescriptor, Tag } from 'vue-docgen-api';\nimport { escapeCharacter, toKebabCase } from '../utils';\n\nconst propertiesTmpl = (properties: EventDescriptor['properties']): string => {\n  return (properties || [])\n    .map((property: any) => {\n      const { type, name, description } = property;\n      const res = [];\n      name && res.push(name);\n      if (type.names.length) {\n        res.length && res.push(': ');\n        res.push(`\\`${type.names.join(' | ')}\\``);\n      }\n      description && res.push(description);\n      return res.join('');\n    })\n    .join('\\n');\n};\n\nconst tmpl = (events: EventDescriptor[], lang: string) => {\n  const displayableEvents = events.filter(\n    (event) => event.description || event.tags?.length\n  );\n  const hasVersion = displayableEvents.some((event) =>\n    event?.tags?.some((tag: any) => tag.title === 'version')\n  );\n  const content = displayableEvents\n    .map((event) => {\n      const { name, tags } = event;\n      let { description } = event;\n      let version = '';\n      if (tags?.length) {\n        for (const item of tags) {\n          if (item.title === 'version') {\n            version = (item as Tag).content as string;\n            continue;\n          }\n          if (item.title === lang) {\n            description = (item as Tag).content as string;\n          }\n        }\n      }\n\n      let lineContent = `|${toKebabCase(name)}|${escapeCharacter(\n        description || ''\n      )}|${escapeCharacter(propertiesTmpl(event.properties)) || '-'}|`;\n\n      if (hasVersion) {\n        lineContent += `${version}|`;\n      }\n\n      return lineContent;\n    })\n    .join('\\n');\n  return {\n    content,\n    hasVersion,\n  };\n};\n\nexport default (events: EventDescriptor[], lang: string) => {\n  const { content, hasVersion } = tmpl(events, lang);\n  if (!content) return '';\n\n  const header =\n    lang === 'en'\n      ? ['|Event Name|Description|Parameters|', '|---|---|---|']\n      : ['|事件名|描述|参数|', '|---|---|---|'];\n\n  if (hasVersion) {\n    header[0] += lang === 'en' ? 'version|' : '版本|';\n    header[1] += ':---|';\n  }\n\n  return `\n${header[0]}\n${header[1]}\n${content}\n`;\n};\n"
  },
  {
    "path": "packages/arco-vue-scripts/src/scripts/docgen/templates/index.ts",
    "content": "import props from './props';\nimport events from './events';\nimport methods from './methods';\nimport slots from './slots';\n\nexport default {\n  props,\n  events,\n  methods,\n  slots,\n};\n"
  },
  {
    "path": "packages/arco-vue-scripts/src/scripts/docgen/templates/methods.ts",
    "content": "import { MethodDescriptor, ParamTag, ParamType } from 'vue-docgen-api';\nimport { escapeCharacter } from '../utils';\n\nconst paramsTmpl = (params: MethodDescriptor['params']): string => {\n  return (params || [])\n    .filter((param: any) => param.type)\n    .map((param: any): string => {\n      const { name, type, description } = param;\n      const res = [];\n      name && res.push(name);\n      if (type?.name) {\n        res.length && res.push(': ');\n        res.push(`\\`${type.name}\\``);\n      }\n      description && res.push(description);\n      return res.join('');\n    })\n    .join('\\n');\n};\n\nconst returnsTmpl = (returns: MethodDescriptor['returns']): string => {\n  if (!returns) return '';\n\n  const { type, description } = returns;\n\n  if (!type) return '';\n\n  const getNames = (type: ParamType): string => {\n    const { name, elements } = type;\n    if (!elements || !elements.length) return name || '';\n\n    const names: string[] = [];\n    elements.forEach((element: any) => {\n      names.push(getNames(element));\n    });\n\n    return `${name}\\\\<${names.join(',')}\\\\>`;\n  };\n\n  const res = [\n    type.name ? `${getNames(type)}` : '',\n    description ? ` - ${description}` : '',\n  ];\n  return res.join('');\n};\n\nconst tmpl = (methods: MethodDescriptor[], lang: string) => {\n  const displayableMethods = methods.filter(\n    (method) => method.description || lang in (method.tags ?? {})\n  );\n  const hasVersion = displayableMethods.some((method) => method?.tags?.version);\n  const content = displayableMethods\n    .map((method) => {\n      const { name, tags } = method;\n      let { description } = method;\n      if (tags?.[lang]?.length) {\n        description = (tags[lang][0] as ParamTag).description as string;\n      }\n\n      const readableParams = paramsTmpl(method.params) || '-';\n      const readableReturns = returnsTmpl(method.returns) || '-';\n      let lineContent = `|${name}|${escapeCharacter(\n        description || ''\n      )}|${escapeCharacter(readableParams)}|${escapeCharacter(\n        readableReturns\n      )}|`;\n\n      if (hasVersion) {\n        const version = (tags?.version?.[0] as ParamTag)?.description as string;\n        lineContent += `${version || ''}|`;\n      }\n\n      return lineContent;\n    })\n    .join('\\n');\n\n  return {\n    hasVersion,\n    content,\n  };\n};\n\nexport default (methods: MethodDescriptor[], lang: string) => {\n  const { content, hasVersion } = tmpl(methods, lang);\n  if (!content) return '';\n\n  const header =\n    lang === 'en'\n      ? ['|Method|Description|Parameters|Return|', '|---|---|---|:---:|']\n      : ['|方法名|描述|参数|返回值|', '|---|---|---|---|'];\n\n  if (hasVersion) {\n    header[0] += lang === 'en' ? 'version|' : '版本|';\n    header[1] += ':---|';\n  }\n\n  return `\n${header[0]}\n${header[1]}\n${content}\n`;\n};\n"
  },
  {
    "path": "packages/arco-vue-scripts/src/scripts/docgen/templates/props.ts",
    "content": "import { ParamTag, PropDescriptor } from 'vue-docgen-api';\nimport {\n  escapeCharacter,\n  toKebabCase,\n  unquote,\n  trimStr,\n  cleanStr,\n} from '../utils';\n\nconst tmpl = (\n  props: PropDescriptor[],\n  { isInterface = false }: { isInterface: boolean },\n  lang: string\n) => {\n  const displayableProps = props.filter(\n    ({ name, description, tags }) =>\n      description || ['disabled'].includes(name) || lang in (tags ?? {})\n  );\n  const hasVersion = displayableProps.some((prop) => prop?.tags?.version);\n  const content = displayableProps\n    .map((prop) => {\n      const { name, type, values, defaultValue, required, tags } = prop;\n      let { description } = prop;\n      if (tags?.[lang]?.length) {\n        description = (tags[lang][0] as ParamTag).description as string;\n      }\n\n      // 支持通过名为 type 的 tag 重新定义字段的类型\n      const fixedType = cleanStr(\n        // tag 的 ts 类型有问题，所以忽略 ts 规则检查\n        // @ts-ignore-next-line\n        trimStr(tags?.type?.[0]?.description || type?.name || '')\n      );\n\n      const getName = () =>\n        `${isInterface ? name : toKebabCase(name)}${\n          tags?.vModel || name === 'modelValue' ? ' **(v-model)**' : ''\n        }${\n          required ? (lang === 'zh' ? ' **(必填)**' : ' **(required)**') : ''\n        }`;\n\n      const getDescription = () => {\n        if (!description && name === 'disabled') {\n          return lang === 'zh' ? '是否禁用' : 'Whether to disable';\n        }\n\n        return escapeCharacter(trimStr(description || ''));\n      };\n\n      const getType = () => {\n        if (values) {\n          return escapeCharacter(\n            values\n              .map((item: string) => {\n                const fixItem =\n                  fixedType === 'string' ? `'${unquote(item)}'` : item;\n                return fixItem;\n              })\n              .join(' | ')\n          );\n        }\n        return escapeCharacter(fixedType);\n      };\n\n      const getDefaultValue = () => {\n        if (tags?.defaultValue) {\n          // @ts-ignore-next-line\n          return tags.defaultValue[0]?.description;\n        }\n\n        if (defaultValue?.value === 'undefined') {\n          return '-';\n        }\n\n        const regForArrayDefaultValue = /^\\(\\)\\s*=>\\s*(\\[[^]*\\]*\\])$/;\n        if (\n          (fixedType.includes('[]') ||\n            fixedType.includes('Array') ||\n            fixedType.includes('array')) &&\n          defaultValue?.func &&\n          regForArrayDefaultValue.test(defaultValue.value)\n        ) {\n          return cleanStr(\n            defaultValue.value.match(regForArrayDefaultValue)?.[1] || ''\n          );\n        }\n\n        if (fixedType === 'boolean') {\n          return cleanStr(defaultValue?.value || 'false');\n        }\n\n        return defaultValue?.value || '-';\n      };\n\n      let lineContent = `|${getName()}|${getDescription()}|\\`${getType()}\\`|\\`${getDefaultValue()}\\`|`;\n\n      if (hasVersion) {\n        // tag 的 ts 类型有问题，所以忽略 ts 规则检查\n        // @ts-ignore-next-line\n        const version = tags?.version?.[0]?.description;\n        lineContent += `${version || ''}|`;\n      }\n\n      return lineContent;\n    })\n    .join('\\n');\n  return {\n    hasVersion,\n    content,\n  };\n};\n\nexport default (\n  props: PropDescriptor[],\n  options: { isInterface: boolean },\n  lang = 'zh'\n) => {\n  const { content, hasVersion } = tmpl(props, options, lang);\n  if (!content) return '';\n\n  let header: [string, string] = ['', ''];\n  if (lang === 'en') {\n    header = options.isInterface\n      ? ['|Name|Description|Type|Default|', '|---|---|---|:---:|']\n      : ['|Attribute|Description|Type|Default|', '|---|---|---|:---:|'];\n    if (hasVersion) {\n      header[0] += 'version|';\n      header[1] += ':---|';\n    }\n  } else {\n    header = ['|参数名|描述|类型|默认值|', '|---|---|---|:---:|'];\n    if (hasVersion) {\n      header[0] += '版本|';\n      header[1] += ':---|';\n    }\n  }\n\n  return `\n${header[0]}\n${header[1]}\n${content}\n`;\n};\n"
  },
  {
    "path": "packages/arco-vue-scripts/src/scripts/docgen/templates/slots.ts",
    "content": "import { SlotDescriptor } from 'vue-docgen-api';\nimport { escapeCharacter, toKebabCase } from '../utils';\n\nconst bindingsTmpl = (bindings: SlotDescriptor['bindings']): string => {\n  return (bindings || [])\n    .map((binding: SlotDescriptor['bindings'][number]) => {\n      const { type, name, description } = binding;\n      const res = [];\n      name && res.push(name);\n      if (type?.name) {\n        res.length && res.push(': ');\n        res.push(`\\`${type.name}\\``);\n      }\n      description && res.push(description);\n      return res.join('');\n    })\n    .join('\\n');\n};\n\nconst tmpl = (slots: SlotDescriptor[], lang: string) => {\n  const displayableSlots = slots.filter(\n    (slot) => slot.description || lang in (slot.tags ?? {})\n  );\n  const hasVersion = displayableSlots.some((slot) => slot?.tags?.version);\n  const content = displayableSlots\n    .map((slot) => {\n      const { name, bindings, tags } = slot;\n      let { description } = slot;\n      if (tags?.[lang]) {\n        description = (tags[lang] as any).content as string;\n      }\n\n      let lineContent = `|${toKebabCase(name)}|${escapeCharacter(\n        description || ''\n      )}|${escapeCharacter(bindingsTmpl(bindings)) || '-'}|`;\n\n      if (hasVersion) {\n        const version = (tags?.version as any)?.content as string;\n        lineContent += `${version || ''}|`;\n      }\n\n      return lineContent;\n    })\n    .join('\\n');\n\n  return {\n    hasVersion,\n    content,\n  };\n};\n\nexport default (slots: SlotDescriptor[], lang: string) => {\n  const { content, hasVersion } = tmpl(slots, lang);\n  if (!content) return '';\n\n  const header =\n    lang === 'en'\n      ? ['|Slot Name|Description|Parameters|', '|---|---|---|']\n      : ['|插槽名|描述|参数|', '|---|:---:|---|'];\n\n  if (hasVersion) {\n    header[0] += lang === 'en' ? 'version|' : '版本|';\n    header[1] += ':---|';\n  }\n\n  return `\n${header[0]}\n${header[1]}\n${content}\n`;\n};\n"
  },
  {
    "path": "packages/arco-vue-scripts/src/scripts/docgen/utils/index.ts",
    "content": "/**\n * 替换换行和竖线使其能在markdown中显示\n * @param str\n */\nexport const escapeCharacter = (str: string) => {\n  return str.replace(/\\r?\\n/g, '<br>').replace(/\\|/g, '\\\\|');\n};\n\n/**\n * 转为 kebab-case\n * @param str\n */\nexport const toKebabCase = (str: string): string => {\n  return str.replace(/[A-Z]/g, (match, offset) => {\n    return `${offset > 0 ? '-' : ''}${match.toLocaleLowerCase()}`;\n  });\n};\n\nconst opt = Object.prototype.toString;\nexport function isBoolean(obj: unknown): obj is boolean {\n  return opt.call(obj) === '[object Boolean]';\n}\n\n/**\n * 去掉包裹字符串的引号\n * @param {str} string\n * @returns {string}\n */\nexport function unquote(str: string) {\n  return str && str.replace(/^['\"]|['\"]$/g, '');\n}\n\n/**\n * 清理字符串前后的空格，竖线和 \\n\n * @param {str} string\n * @returns {string}\n */\nexport function trimStr(str: string) {\n  return str && str.replace(/^(\\s|\\||\\r?\\n)*|(\\s|\\||\\r?\\n)*$/g, '');\n}\n\n/**\n * 清理字符串中不符合预期的字符，如 \\n\n * @param {str} string\n * @returns {string}\n */\nexport function cleanStr(str: string) {\n  return str && str.replace(/\\r?\\n/g, '');\n}\n\nexport const getTemplate = (src: string, lang: 'zh' | 'en') => {\n  const matches = Array.from(\n    src.matchAll(/##\\s+(zh-CN|en-US)\\n+(.+?)\\n+---(?:\\n|$)/gs)\n  );\n  for (const item of matches) {\n    if (new RegExp(lang).test(item[1])) {\n      src = src.replace(item[0], `${item[2]}\\n`);\n    } else {\n      src = src.replace(item[0], '');\n    }\n  }\n\n  return src;\n};\n"
  },
  {
    "path": "packages/arco-vue-scripts/src/scripts/docgen/utils/parse-interface.ts",
    "content": "import { JSDocTag, Project, PropertySignature } from 'ts-morph';\nimport { ComponentDoc, PropDescriptor } from 'vue-docgen-api';\n\nconst project = new Project();\n\nconst formatterTags = (jsDocsTags: JSDocTag[]) => {\n  const tags: PropDescriptor['tags'] = {};\n\n  jsDocsTags.forEach((tag) => {\n    const tagName = tag.getTagName();\n\n    tags[tagName] = [\n      {\n        title: tagName,\n        description: tag.getCommentText(),\n      },\n    ];\n  });\n\n  return tags;\n};\n\nconst formatterProps = (properties: PropertySignature[]) => {\n  const props: PropDescriptor[] = [];\n\n  properties.forEach((p) => {\n    const jsDocs = p.getJsDocs()[0];\n    if (!jsDocs) {\n      return;\n    }\n\n    props.push({\n      name: p.getName(),\n      type: {\n        name: p.getTypeNode()?.getText() || '',\n      },\n      description: jsDocs.getDescription(),\n      tags: formatterTags(jsDocs.getTags()),\n    });\n  });\n\n  return props;\n};\n\nexport default (filePath: string) => {\n  project.addSourceFileAtPath(filePath);\n\n  const sourceFile = project.getSourceFile(filePath);\n  const componentDocList: ComponentDoc[] = [];\n\n  if (sourceFile) {\n    const interfaces = sourceFile.getInterfaces();\n    interfaces.forEach((interfaceDeclaration) => {\n      const properties = interfaceDeclaration.getProperties();\n      const componentDoc = {\n        displayName: interfaceDeclaration.getName(),\n        exportName: interfaceDeclaration.getName(),\n        props: formatterProps(properties),\n      };\n\n      if (componentDoc.props.length) {\n        componentDocList.push(componentDoc);\n      }\n    });\n  }\n\n  return componentDocList;\n};\n"
  },
  {
    "path": "packages/arco-vue-scripts/src/scripts/docgen/utils/parse-material.ts",
    "content": "import fs from 'fs-extra';\nimport { parse } from 'comment-parser';\nimport { parse as babelParse } from '@babel/parser';\nimport path from 'path';\n\nfunction getMaterialData(content: string) {\n  const blocks = parse(content);\n  const baseNode = babelParse(content, {\n    sourceType: 'module',\n  });\n\n  const materialData = [];\n\n  for (const block of blocks) {\n    const data: Record<string, any> = {\n      kind: 'member',\n    };\n    for (const tag of block.tags) {\n      if (tag.tag === 'file') {\n        data.kind = 'file';\n      } else {\n        data[tag.tag] = tag.name;\n      }\n    }\n    materialData.push(data);\n  }\n\n  const imports: string[] = [];\n  for (const node of baseNode.program.body) {\n    if (node.type === 'ImportDeclaration' && node.source?.value) {\n      imports.push(node.source.value);\n    }\n  }\n\n  return { materialData, imports };\n}\n\nconst getMaterialMdContent = (materialData: Record<string, any>) => {\n  return `\\`\\`\\`json type=description\\n${JSON.stringify(\n    materialData,\n    null,\n    2\n  )}\\n\\`\\`\\`\\n`;\n};\n\nasync function getDemoMdContent(filename: string) {\n  const code = await fs.readFile(filename, 'utf8');\n  return `\\`\\`\\`vue\\n${code}\\n\\`\\`\\`\\n`;\n}\n\nexport default async function parseMaterial(\n  content: string,\n  { matcher, dirname }: { matcher: RegExp; dirname: string }\n) {\n  const match = content.match(matcher);\n  if (match && match[1]) {\n    const filename = path.resolve(dirname, match[1]);\n    const demoDirname = path.dirname(filename);\n    const indexContent = await fs.readFile(filename, 'utf8');\n    const { materialData, imports } = getMaterialData(indexContent);\n    let result = `${getMaterialMdContent(materialData)}\\n`;\n\n    for (const item of imports) {\n      const filename = path.resolve(demoDirname, item);\n      result += `${await getDemoMdContent(filename)}\\n`;\n    }\n\n    return content.replace(match[0], result);\n  }\n  return content;\n}\n"
  },
  {
    "path": "packages/arco-vue-scripts/src/scripts/docgen/utils/print.ts",
    "content": "import chalk from 'chalk';\n\ntype LogLevelType = 'info' | 'warn' | 'success' | 'error';\n\nfunction log(...args: unknown[]) {\n  console.log(...args);\n}\n\nfunction print(color: string, ...args: any) {\n  if (args.length > 1) {\n    log(\n      (chalk as any)[`bg${color.replace(/^\\w/, (w) => w.toUpperCase())}`](\n        ` ${args[0]} `\n      ),\n      (chalk as any)[color](args.slice(1))\n    );\n  } else {\n    log((chalk as any)[color](...args));\n  }\n}\n\nlog.info = print.bind(null, 'gray');\nlog.warn = print.bind(null, 'yellow');\nlog.error = print.bind(null, 'red');\nlog.success = print.bind(null, 'green');\nlog.chalk = chalk;\n\n/**\n * 打印分割线\n * @param {'info' | 'warn' | 'success' | 'error'} level\n */\nlog.divider = (level: LogLevelType = 'info') => {\n  const logger = log[level] || log.info;\n  logger(\n    '---------------------------------------------------------------------------------------'\n  );\n};\n\nexport default log;\n"
  },
  {
    "path": "packages/arco-vue-scripts/src/scripts/dtsgen/index.ts",
    "content": "import path from 'path';\nimport fs from 'fs-extra';\nimport {\n  ModuleResolutionKind,\n  Project,\n  ScriptTarget,\n  SourceFile,\n} from 'ts-morph';\nimport glob from 'glob';\nimport { parse } from '@vue/compiler-sfc';\n\nexport async function build(input: string, options?: { outDir?: string }) {\n  const root = process.cwd();\n  const tsConfigFilePath = fs.existsSync('tsconfig.json')\n    ? 'tsconfig.json'\n    : undefined;\n  const project = new Project({\n    compilerOptions: {\n      allowJs: true,\n      declaration: true,\n      emitDeclarationOnly: true,\n      strict: true,\n      target: ScriptTarget.ES2015,\n      moduleResolution: ModuleResolutionKind.NodeJs,\n      isolatedModules: true,\n      esModuleInterop: true,\n      skipLibCheck: true,\n      jsx: 1,\n    },\n    tsConfigFilePath,\n    skipAddingFilesFromTsConfig: true,\n  });\n  const isComponents = /^components/.test(input);\n  if (isComponents) {\n    project.compilerOptions.set({\n      rootDir: path.resolve(root, 'components'),\n    });\n  }\n  if (options?.outDir) {\n    project.compilerOptions.set({\n      outDir: path.resolve(root, options.outDir),\n    });\n  }\n  const files = glob.sync(input, {\n    ignore: /components\\/icon/.test(input)\n      ? ['**/__test__/*', '**/__demo__/*']\n      : ['**/__test__/*', '**/__demo__/*', 'components/icon/**/*'],\n  });\n  const sourceFiles: SourceFile[] = [];\n\n  await Promise.all(\n    files.map(async (file) => {\n      const content = await fs.promises.readFile(\n        path.resolve(root, file),\n        'utf8'\n      );\n      if (file.endsWith('.vue')) {\n        const sfc = parse(content);\n        const { script, scriptSetup } = sfc.descriptor;\n        if (script || scriptSetup) {\n          let scriptContent = '';\n          let isTSX = false;\n          if (script && script.content) {\n            scriptContent += script.content;\n            if (script.lang === 'tsx') isTSX = true;\n          }\n          const sourceFile = project.createSourceFile(\n            path.relative(root, file).replace('.vue', isTSX ? '.tsx' : '.ts'),\n            scriptContent\n          );\n          if (sourceFile) {\n            removeVueSpecifier(sourceFile);\n            sourceFiles.push(sourceFile);\n          }\n        }\n      } else {\n        const sourceFile = project.createSourceFile(\n          path.relative(root, file),\n          content,\n          {\n            overwrite: true,\n          }\n        );\n        if (sourceFile) {\n          removeVueSpecifier(sourceFile);\n          sourceFiles.push(sourceFile);\n        }\n      }\n    })\n  );\n\n  try {\n    await Promise.all(\n      sourceFiles.map(async (sourceFile) => {\n        // eslint-disable-next-line no-console\n        console.log(`Transform start: ${sourceFile.getFilePath()}`);\n        const diagnostics = sourceFile.getPreEmitDiagnostics();\n        // eslint-disable-next-line no-console\n        console.log(project.formatDiagnosticsWithColorAndContext(diagnostics));\n        const emitOutput = sourceFile.getEmitOutput();\n        const outputFiles = emitOutput.getOutputFiles();\n        await Promise.all(\n          outputFiles.map(async (outputFile) => {\n            const filepath = outputFile.getFilePath();\n            await fs.ensureDir(path.dirname(filepath));\n            await fs.writeFile(filepath, outputFile.getText(), 'utf8');\n            // eslint-disable-next-line no-console\n            console.log(`Emitted ${filepath}`);\n          })\n        );\n      })\n    );\n  } catch {}\n}\n\nconst removeVueSpecifier = (sourceFile: SourceFile) => {\n  const imports = sourceFile.getImportDeclarations();\n  imports.forEach((item) => {\n    const specifier = item.getModuleSpecifierValue();\n    const ext = path.extname(specifier);\n    if (ext === '.vue') {\n      item.setModuleSpecifier(specifier.replace('.vue', ''));\n    }\n  });\n};\n\nexport default build;\n"
  },
  {
    "path": "packages/arco-vue-scripts/src/scripts/icongen/index.ts",
    "content": "import path from 'path';\nimport fs from 'fs-extra';\nimport glob from 'glob';\nimport { optimize } from 'svgo';\nimport { JSDOM } from 'jsdom';\nimport paths from '../../utils/paths';\nimport { toKebabCase, toPascalCase } from '../../utils/convert-case';\nimport svgoConfig from './svgo.config';\nimport {\n  getArcoVueIcon,\n  getComponentIndex,\n  getIconVue,\n  getIndex,\n  getType,\n} from './vue-template';\n\ninterface IconData {\n  title: string;\n  type: string;\n  list: Array<{\n    name: string;\n    componentName: string;\n    path: string;\n  }>;\n}\n\nconst root = process.cwd();\n\nconst maps: Record<string, string> = {\n  direction: '方向指示类图标',\n  tips: '提示建议类图标',\n  interactiveButton: '交互按钮类图标',\n  edit: '编辑类图标',\n  media: '影音类图标',\n  logo: '商标类图标',\n  general: '通用类图标',\n};\n\nfunction getSVGData(): IconData[] {\n  const data: IconData[] = [];\n  for (const key of Object.keys(maps)) {\n    const iconData: IconData = {\n      title: maps[key],\n      type: key,\n      list: [],\n    };\n    const files = glob.sync(`${toKebabCase(key)}/**/*.svg`, {\n      cwd: paths.iconSvgs,\n      absolute: true,\n    });\n    for (const filePath of files) {\n      const name = `icon-${path.basename(filePath, '.svg')}`;\n      iconData.list.push({\n        name,\n        componentName: `${toPascalCase(name)}`,\n        path: filePath,\n      });\n    }\n    data.push(iconData);\n  }\n\n  return data;\n}\n\nasync function buildIconComponent(data: IconData[]) {\n  await fs.emptyDir(path.resolve(root, 'components/icon'));\n\n  for (const iconData of data) {\n    for (const item of iconData.list) {\n      const svgFile = fs.readFileSync(item.path, 'utf8');\n\n      const optimizedSvg = optimize(svgFile, {\n        path: item.path,\n        ...svgoConfig,\n      });\n      if ('data' in optimizedSvg) {\n        const { data } = optimizedSvg;\n        const svgElement = JSDOM.fragment(data).firstElementChild;\n        if (svgElement) {\n          fs.outputFile(\n            path.resolve(paths.iconComponents, `${item.name}/${item.name}.vue`),\n            getIconVue({\n              name: item.name,\n              componentName: item.componentName,\n              svgHtml: svgElement.outerHTML,\n            }),\n            (err) => {\n              if (err) {\n                console.log(`Build ${item.componentName} Failed: ${err}`);\n              } else {\n                console.log(`Build ${item.componentName} Success!`);\n              }\n            }\n          );\n        }\n      }\n\n      const indexContent = getComponentIndex({\n        name: item.name,\n        componentName: item.componentName,\n      });\n\n      fs.outputFile(\n        path.resolve(paths.iconComponents, `${item.name}/index.ts`),\n        indexContent,\n        (err) => {\n          if (err) {\n            console.log(`Build ${item.componentName} Failed: ${err}`);\n          } else {\n            console.log(`Build ${item.componentName} Success!`);\n          }\n        }\n      );\n    }\n  }\n}\n\nfunction buildIndex(data: IconData[]) {\n  const imports = [];\n  const exports = [];\n  const components = [];\n\n  for (const iconData of data) {\n    for (const item of iconData.list) {\n      components.push(item.componentName);\n      imports.push(`import ${item.componentName} from './${item.name}';`);\n      exports.push(\n        `export { default as ${item.componentName} } from './${item.name}';`\n      );\n    }\n  }\n\n  const arcoContent = getArcoVueIcon({ imports, components });\n  const indexContent = getIndex({ exports });\n\n  fs.outputFile(\n    path.resolve(paths.iconComponents, 'arco-vue-icon.ts'),\n    arcoContent,\n    (err) => {\n      if (err) {\n        console.log(`Build ArcoVueIcon Failed: ${err}`);\n      } else {\n        console.log('Build ArcoVueIcon Success!');\n      }\n    }\n  );\n\n  fs.outputFile(\n    path.resolve(paths.iconComponents, 'index.ts'),\n    indexContent,\n    (err) => {\n      if (err) {\n        console.log(`Build Index Failed: ${err}`);\n      } else {\n        console.log('Build Index Success!');\n      }\n    }\n  );\n\n  fs.outputFile(\n    path.resolve(paths.icon, 'icons.json'),\n    JSON.stringify(data, null, 2),\n    (err) => {\n      if (err) {\n        console.log(`Build JSON Failed: ${err}`);\n      } else {\n        console.log('Build JSON Success!');\n      }\n    }\n  );\n}\n\nfunction buildType(data: IconData[]) {\n  const exports = [];\n  for (const iconData of data) {\n    for (const item of iconData.list) {\n      exports.push(\n        `${item.componentName}: typeof import('@arco-design/web-vue/es/icon')['${item.componentName}'];`\n      );\n    }\n  }\n\n  const typeContent = getType({ exports });\n\n  fs.outputFile(\n    path.resolve(paths.iconComponents, 'icon-components.ts'),\n    typeContent,\n    (err) => {\n      if (err) {\n        console.log(`Build Type Failed: ${err}`);\n      } else {\n        console.log('Build Type Success!');\n      }\n    }\n  );\n}\n\nconst icongen = async () => {\n  const data = getSVGData();\n  await buildIconComponent(data);\n  buildIndex(data);\n  buildType(data);\n};\n\nexport default icongen;\n"
  },
  {
    "path": "packages/arco-vue-scripts/src/scripts/icongen/svgo.config.ts",
    "content": "import { OptimizeOptions } from 'svgo';\n\nconst options: OptimizeOptions = {\n  plugins: [\n    {\n      name: 'preset-default',\n      params: {\n        overrides: {\n          removeViewBox: false,\n        },\n      },\n    },\n    'removeStyleElement',\n    'removeScriptElement',\n    'removeDimensions',\n    {\n      name: 'removeAttrs',\n      params: {\n        attrs: [\n          'class',\n          'style',\n          'stroke-width',\n          'stroke-linecap',\n          'stroke-linejoin',\n        ],\n      },\n    },\n    {\n      name: 'addAttributesToSVGElement',\n      // @ts-ignore\n      params: {\n        attributes: [\n          { ':class': 'cls' },\n          { ':style': 'innerStyle' },\n          { ':stroke-width': 'strokeWidth' },\n          { ':stroke-linecap': 'strokeLinecap' },\n          { ':stroke-linejoin': 'strokeLinejoin' },\n          { '@click': 'onClick' },\n        ],\n      },\n    },\n  ],\n};\n\nexport default options;\n"
  },
  {
    "path": "packages/arco-vue-scripts/src/scripts/icongen/vue-template.ts",
    "content": "export const getIconVue = ({\n  name,\n  componentName,\n  svgHtml,\n}: {\n  name: string;\n  componentName: string;\n  svgHtml: string;\n}) =>\n  // language=Vue\n  // prettier-ignore\n  `<template>\n  ${svgHtml}\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, computed, CSSProperties } from 'vue';\nimport { getPrefixCls } from '../../_utils/global-config';\nimport { isNumber } from '../../_utils/is';\n\nexport default defineComponent({\n  name: '${componentName}',\n  props: {\n    size: {\n      type: [Number, String],\n    },\n    strokeWidth: {\n      type: Number,\n      default: 4\n    },\n    strokeLinecap: {\n      type: String,\n      default: 'butt',\n      validator: (value: any) => {\n        return ['butt', 'round', 'square'].includes(value);\n      }\n    },\n    strokeLinejoin: {\n      type: String,\n      default: 'miter',\n      validator: (value: any) => {\n        return ['arcs', 'bevel', 'miter', 'miter-clip', 'round'].includes(value);\n      }\n    },\n    rotate: Number,\n    spin: Boolean\n  },\n  emits: {\n    click: (ev: MouseEvent) => true,\n  },\n  setup(props, { emit }) {\n    const prefixCls = getPrefixCls('icon');\n    const cls = computed(() => [prefixCls, \\`\\${prefixCls}-${name.replace('icon-', '')}\\`, { [\\`\\${prefixCls}-spin\\`]: props.spin }]);\n    const innerStyle = computed(() => {\n      const styles: CSSProperties = {};\n      if (props.size) {\n        styles.fontSize = isNumber(props.size) ? \\`\\${props.size}px\\` : props.size;\n      }\n      if (props.rotate) {\n        styles.transform = \\`rotate(\\${props.rotate}deg)\\`;\n      }\n      return styles;\n    });\n    const onClick = (ev: MouseEvent) => {\n      emit('click', ev);\n    };\n\n    return {\n      cls,\n      innerStyle,\n      onClick,\n    };\n  }\n});\n</script>\n`;\n\nexport const getComponentIndex = ({\n  name,\n  componentName,\n}: {\n  name: string;\n  componentName: string;\n}) =>\n  // language=TypeScript\n  // prettier-ignore\n  `import type { App } from 'vue';\nimport type { ArcoIconOptions } from '../../_utils/types';\nimport _${componentName} from './${name}.vue';\n\nconst ${componentName} = Object.assign(_${componentName}, {\n  install: (app: App, options?: ArcoIconOptions) => {\n    const iconPrefix = options?.iconPrefix ?? '';\n    app.component(iconPrefix + _${componentName}.name, _${componentName});\n  }\n});\n\nexport default ${componentName};\n`;\n\nexport const getArcoVueIcon = ({\n  imports,\n  components,\n}: {\n  imports: string[];\n  components: string[];\n}) =>\n  // language=TypeScript\n  // prettier-ignore\n  `import type { App, Plugin } from 'vue';\nimport type { ArcoIconOptions } from '../_utils/types';\n${imports.join('\\n')}\n\nconst icons: Record<string, Plugin> = {\n  ${components.join(',\\n  ')}\n};\n\nconst install = (app: App, options?: ArcoIconOptions) => {\n  for (const key of Object.keys(icons)) {\n    app.use(icons[key], options);\n  }\n};\n\nconst ArcoVueIcon = {\n  ...icons,\n  install\n};\n\nexport default ArcoVueIcon;\n`;\n\nexport const getIndex = ({ exports }: { exports: string[] }) =>\n  // language=TypeScript\n  // prettier-ignore\n  `export { default } from './arco-vue-icon';\n${exports.join('\\n')}\nexport type {} from './icon-components';\n`;\n\nexport const getType = ({ exports }: { exports: string[] }) =>\n  `// @ts-nocheck\n\ndeclare module 'vue' {\n  export interface GlobalComponents {\n${exports.map((item) => `${' '.repeat(4)}${item}`).join('\\n')}\n  }\n}\n\nexport {};\n`;\n"
  },
  {
    "path": "packages/arco-vue-scripts/src/scripts/jsongen/index.ts",
    "content": "import fs from 'fs-extra';\nimport fg from 'fast-glob';\nimport path from 'path';\nimport {\n  ComponentDoc,\n  ParamTag,\n  parse as parseComponent,\n} from 'vue-docgen-api';\nimport { toKebabCase } from '../../utils/convert-case';\nimport { slotTagHandler } from '../docgen/slot-tag-handler';\nimport { getPackage } from '../../utils/get-package';\n\nconst getComponentsFromTemplates = async () => {\n  const templates = await fg('components/**/TEMPLATE.md');\n\n  const components: string[] = [];\n  await Promise.all(\n    templates.map(async (item) => {\n      const dirname = path.dirname(item);\n      const source = await fs.readFile(item, 'utf8');\n      const matches = Array.from(source.matchAll(/%%API\\((.+?)\\)%%/g));\n      matches.forEach((match) => {\n        if (match[1]) {\n          components.push(path.resolve(dirname, match[1]));\n        }\n      });\n    })\n  );\n\n  return components;\n};\n\ninterface ComponentData {\n  name: string;\n  props: Array<{\n    name: string;\n    type: string;\n    description: {\n      zh: string;\n      en: string;\n    };\n  }>;\n  events: Array<{\n    name: string;\n    description: {\n      zh: string;\n      en: string;\n    };\n  }>;\n}\n\nconst isLanguageTag = (title: string): title is 'zh' | 'en' => {\n  return ['zh', 'en'].includes(title);\n};\n\nconst resolveComponent = (doc: ComponentDoc) => {\n  return {\n    name: toKebabCase(`a${doc.displayName}`),\n    props:\n      doc.props\n        ?.map((descriptor: any) => {\n          const description = Object.values(descriptor.tags ?? {}).reduce(\n            (pre: any, item: any) => {\n              item.forEach((tag: any) => {\n                if (isLanguageTag(tag.title)) {\n                  pre[tag.title] = (tag as ParamTag).description as string;\n                }\n              });\n              return pre;\n            },\n            { zh: '', en: '' }\n          );\n\n          return {\n            name: toKebabCase(descriptor.name),\n            type: descriptor.type?.name,\n            description,\n          };\n        })\n        .filter((item: any) => Boolean(item.description.en)) ?? [],\n    events:\n      doc.events\n        ?.map((descriptor: any) => {\n          const description = (descriptor.tags ?? []).reduce(\n            (pre: any, item: any) => {\n              if (isLanguageTag(item.title)) {\n                // @ts-ignore\n                pre[item.title] = item.content;\n              }\n              return pre;\n            },\n            { zh: '', en: '' }\n          );\n\n          return {\n            name: toKebabCase(descriptor.name),\n            description,\n          };\n        })\n        .filter(\n          (item: any) =>\n            Boolean(item.description.en) && !/^update:/.test(item.name)\n        ) ?? [],\n    slots:\n      doc.slots\n        ?.map((descriptor: any) => {\n          const description = Object.values(descriptor.tags ?? {}).reduce(\n            (pre, item) => {\n              // @ts-ignore\n              if (isLanguageTag(item.title)) {\n                // @ts-ignore\n                pre[item.title] = item.content;\n              }\n              return pre;\n            },\n            { zh: '', en: '' }\n          );\n\n          return {\n            name: toKebabCase(descriptor.name),\n            description,\n          };\n        })\n        .filter((item: any) => Boolean(item.description.en)) ?? [],\n  };\n};\n\nconst isValidType = (type: string) => {\n  const types = type.split('|').map((item) => item.trim());\n  for (const item of types) {\n    if (item && !/^(number|string|boolean|array|object)$/.test(item)) {\n      return false;\n    }\n  }\n  return true;\n};\n\nconst transformToVetur = (components: ComponentData[]) => {\n  const tags: Record<string, any> = {};\n  const attributes: Record<string, any> = {};\n\n  for (const component of components) {\n    const attrs = [];\n    for (const item of component.events ?? []) {\n      attrs.push(item.name);\n      attributes[`${component.name}/${item.name}`] = {\n        description: item.description.en,\n      };\n    }\n    for (const item of component.props ?? []) {\n      const attrName = item.name.replace(/^on-/, '');\n      if (!attrs.includes(attrName)) {\n        attrs.push(attrName);\n        attributes[`${component.name}/${attrName}`] = {\n          description: item.description.en,\n          type: isValidType(item.type) ? item.type : undefined,\n        };\n      }\n    }\n    tags[component.name] = {\n      attributes: attrs,\n    };\n  }\n\n  return {\n    tags,\n    attributes,\n  };\n};\n\nconst transformToWebTypes = (\n  components: ComponentData[],\n  { version }: { version: string }\n) => {\n  const json = {\n    $schema:\n      'https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json',\n    framework: 'vue',\n    name: '@arco-design/web-vue',\n    version,\n    contributions: {\n      html: {\n        'types-syntax': 'typescript',\n        'description-markup': 'markdown',\n        'tags': [],\n      },\n    },\n  };\n\n  for (const component of components) {\n    const data = {\n      name: component.name,\n      attributes: component.props?.map((item) => ({\n        name: item.name,\n        description: item.description.en,\n        value: {\n          type: item.type,\n          kind: 'expression',\n        },\n      })),\n      events: component.events?.map((item) => ({\n        name: item.name,\n        description: item.description.en,\n      })),\n      // @ts-ignore\n      slots: component.slots?.map((item) => ({\n        name: item.name,\n        description: item.description.en,\n      })),\n    };\n\n    // @ts-ignore\n    json.contributions.html.tags.push(data);\n  }\n\n  return json;\n};\n\nconst jsongen = async () => {\n  const packageData = await getPackage();\n\n  const components = await getComponentsFromTemplates();\n\n  const docs = [];\n  let typographyBase;\n  let datePickerBase;\n  for (const item of components) {\n    const doc = resolveComponent(\n      // eslint-disable-next-line no-await-in-loop\n      await parseComponent(item, {\n        addScriptHandlers: [slotTagHandler],\n      })\n    );\n    if (/date-picker\\/picker/.test(item)) {\n      datePickerBase = doc;\n      continue;\n    }\n    if (/typography\\/base.tsx/.test(item)) {\n      typographyBase = doc;\n      continue;\n    }\n    if (/date-picker\\/pickers\\//.test(item)) {\n      doc.props.push(...(datePickerBase?.props ?? []));\n      doc.events.push(...(datePickerBase?.events ?? []));\n      doc.slots.push(...(datePickerBase?.slots ?? []));\n    }\n    if (/typography\\/(title|paragraph|text)/.test(item)) {\n      doc.props.push(...(typographyBase?.props ?? []));\n      doc.events.push(...(typographyBase?.events ?? []));\n      doc.slots.push(...(typographyBase?.slots ?? []));\n    }\n\n    docs.push(doc);\n  }\n\n  await fs.emptyDir(path.resolve(process.cwd(), 'json'));\n\n  // @ts-ignore\n  const { tags, attributes } = transformToVetur(docs);\n\n  await fs.writeFile(\n    path.resolve(process.cwd(), 'json/vetur-tags.json'),\n    JSON.stringify(tags, null, 2)\n  );\n  await fs.writeFile(\n    path.resolve(process.cwd(), 'json/vetur-attributes.json'),\n    JSON.stringify(attributes, null, 2)\n  );\n\n  // @ts-ignore\n  const web = transformToWebTypes(docs, { version: packageData.version });\n\n  await fs.writeFile(\n    path.resolve(process.cwd(), 'json/web-types.json'),\n    JSON.stringify(web, null, 2)\n  );\n};\n\nexport default jsongen;\n"
  },
  {
    "path": "packages/arco-vue-scripts/src/scripts/lessgen/index.ts",
    "content": "import path from 'path';\nimport fs from 'fs-extra';\nimport glob from 'glob';\nimport paths from '../../utils/paths';\n\nconst lessgen = () => {\n  let lessContent = `@import './style/index.less';\\n@import './trigger/style/index.less';\\n`;\n  const lessFiles = glob.sync('**/style/index.less', {\n    cwd: paths.components,\n    ignore: ['style/index.less', 'trigger/style/index.less'],\n  });\n  lessFiles.forEach((value) => {\n    lessContent += `@import './${value}';\\n`;\n  });\n\n  fs.outputFileSync(path.resolve(paths.components, 'index.less'), lessContent);\n\n  console.log('generate index.less success');\n};\n\nexport default lessgen;\n"
  },
  {
    "path": "packages/arco-vue-scripts/src/scripts/test/index.ts",
    "content": "import { run } from 'jest';\nimport jestConfig from '../../configs/jest.config';\nimport { getUserConfig } from '../../utils/config';\n\nexport default async (components: string[], options: string[]) => {\n  const userConfig = await getUserConfig('jest.config.js');\n\n  const collectCoverageFrom =\n    components.length > 0\n      ? components.map((item) => `components/${item}/**/*.{vue,tsx,ts}`)\n      : ['components/**/*.{vue,tsx,ts}'];\n\n  const baseConfig = jestConfig(collectCoverageFrom);\n\n  const mergedConfig = userConfig?.(baseConfig) ?? baseConfig;\n\n  await run(['--config', JSON.stringify(mergedConfig), ...options]);\n};\n"
  },
  {
    "path": "packages/arco-vue-scripts/src/scripts/test/screentshot.ts",
    "content": "// import playwright from 'playwright';\n// import path from 'path';\n//\n// export default async (domain: string, outDir: string) => {\n//   const _domain = domain || 'http://localhost:2233'; // --domain=https://a.b.com\n//\n//   const componentFlag = '/component/';\n//   const baseURL = `${_domain}/vue`;\n//   const outDirectory = path.resolve(process.cwd(), outDir);\n//   const browser = await playwright.chromium.launch({\n//     args: ['--font-render-hinting=none'],\n//   });\n//   const page = await browser.newPage({\n//     viewport: {\n//       width: 1440,\n//       height: 1340,\n//     },\n//   });\n//\n//   await page.goto(`${baseURL}`);\n//   await page.waitForLoadState('networkidle');\n//\n//   const components = page.locator(\n//     `.aside-nav-item a[href*=\"${componentFlag}\"]`\n//   );\n//   const componentCount = await components.count();\n//\n//   // ['/vue/component/button', '/vue/component/xxx']\n//   const componentNames: string[] = await Promise.all(\n//     [...Array(componentCount)].map(async (_, index) => {\n//       const item = components.nth(index);\n//       const href = await item.getAttribute('href');\n//       return href?.split(componentFlag).pop() || '';\n//     })\n//   );\n//   let total = 0;\n//\n//   const genComponentScreenshots = async (componentName?: string) => {\n//     if (componentName) {\n//       // eslint-disable-next-line\n//       const name = componentName\n//         .replace(/([A-Z])/g, '-$1')\n//         .toLowerCase()\n//         .replace('-', '');\n//       await page.goto(`${baseURL}${componentFlag}${name}`);\n//\n//       await page.waitForLoadState('networkidle');\n//       const demos = page.locator('.code-block');\n//       const totalElements = await demos.count();\n//\n//       total += totalElements;\n//\n//       await Promise.all(\n//         [...Array(totalElements)].map(async (_, index) => {\n//           const demo = demos.nth(index);\n//           const id = await demo.getAttribute('id');\n//\n//           await demo.locator('.cell-demo').screenshot({\n//             animations: 'disabled',\n//             path: `${outDirectory}/${componentName}/${id}.png`,\n//             type: 'png',\n//           });\n//         })\n//       );\n//       // eslint-disable-next-line\n//       console.log(\n//         `[${\n//           componentCount - componentNames.length\n//         }/${componentCount}]: ${componentName} (${totalElements})`\n//       );\n//     }\n//     if (componentNames.length) {\n//       genComponentScreenshots(componentNames.pop());\n//     } else {\n//       // eslint-disable-next-line\n//       console.log('end________', total);\n//       await browser.close();\n//       process.exit(0);\n//     }\n//   };\n//\n//   genComponentScreenshots(componentNames.pop());\n// };\n"
  },
  {
    "path": "packages/arco-vue-scripts/src/utils/config.ts",
    "content": "import path from 'path';\nimport fs from 'fs-extra';\n\nconst CONFIG_DIR = '.config';\n\nexport const getUserConfig = async (name: string) => {\n  const filename = path.resolve(process.cwd(), CONFIG_DIR, name);\n  try {\n    await fs.access(filename);\n    return require(filename);\n  } catch {\n    return undefined;\n  }\n};\n"
  },
  {
    "path": "packages/arco-vue-scripts/src/utils/convert-case.ts",
    "content": "export const toKebabCase = (string: string): string => {\n  return string.replace(/[A-Z]+/g, (match, offset) => {\n    return `${offset > 0 ? '-' : ''}${match.toLocaleLowerCase()}`;\n  });\n};\n\nexport const toPascalCase = (string: string): string => {\n  return string\n    .replace(/^./, (match) => match.toLocaleUpperCase())\n    .replace(/-(.)/g, (match, p1: string) => {\n      return p1.toLocaleUpperCase();\n    });\n};\n"
  },
  {
    "path": "packages/arco-vue-scripts/src/utils/get-package.ts",
    "content": "import fs from 'fs-extra';\nimport path from 'path';\n\nlet cache: Record<string, any>;\n\nexport const getPackage = async () => {\n  if (!cache) {\n    const content = await fs.readFile(\n      path.resolve(process.cwd(), 'package.json'),\n      'utf8'\n    );\n    try {\n      cache = JSON.parse(content);\n    } catch {}\n  }\n\n  return cache ?? {};\n};\n"
  },
  {
    "path": "packages/arco-vue-scripts/src/utils/paths.ts",
    "content": "import path from 'path';\n\nconst root = process.cwd();\n\nfunction resolvePath(...relativePath: any[]) {\n  return path.resolve(root, ...relativePath);\n}\n\n// components相关\nconst components = resolvePath('./components');\n\n// icon相关\nconst icon = resolvePath('./icon');\nconst iconSvgs = resolvePath('./icon/_svgs');\nconst iconComponents = resolvePath('./components/icon');\n\nexport default {\n  resolvePath,\n  root,\n  icon,\n  iconSvgs,\n  iconComponents,\n  components,\n};\n"
  },
  {
    "path": "packages/arco-vue-scripts/src/utils/rollup.ts",
    "content": "import { OutputOptions, RollupBuild, RollupOutput } from 'rollup';\n\n/**\n * 根据output类型输出打包文件\n * @param output\n * @param bundle\n */\nexport const outputBundle = async (\n  output?: OutputOptions | OutputOptions[],\n  bundle?: RollupBuild\n) => {\n  if (!output || !bundle) {\n    return false;\n  }\n\n  if (Array.isArray(output)) {\n    const list: Promise<RollupOutput>[] = [];\n\n    for (const item of output) {\n      list.push(bundle.write(item));\n    }\n\n    return Promise.all(list);\n  }\n\n  return bundle.write(output);\n};\n"
  },
  {
    "path": "packages/arco-vue-scripts/tsconfig.json",
    "content": "{\n  \"compilerOptions\": {\n    \"sourceMap\": true,\n    \"outDir\": \"dist\",\n    \"module\": \"CommonJS\",\n    \"target\": \"ES2015\",\n    \"allowJs\": true,\n    \"moduleResolution\": \"node\",\n    \"baseUrl\": \".\",\n    \"strict\": true,\n    \"resolveJsonModule\": true,\n    \"esModuleInterop\": true,\n    \"skipLibCheck\": true,\n    \"lib\": [\"DOM\", \"ES2020\"]\n  },\n  \"include\": [\"src\", \"../web-vue/scripts/screentshot.ts\"]\n}\n"
  },
  {
    "path": "packages/vite-plugin-arco-vue-docs/.eslintignore",
    "content": "node_modules/*\ndist/*\n/*.json\n/*.js\n"
  },
  {
    "path": "packages/vite-plugin-arco-vue-docs/.eslintrc.js",
    "content": "module.exports = {\n  parser: '@typescript-eslint/parser',\n  parserOptions: {\n    sourceType: 'module',\n    ecmaVersion: 2020,\n  },\n  env: {\n    node: true,\n  },\n  plugins: ['@typescript-eslint'],\n  extends: [\n    // Airbnb JavaScript Style Guide https://github.com/airbnb/javascript\n    'airbnb-base',\n    'plugin:@typescript-eslint/recommended',\n    'plugin:import/typescript',\n    'plugin:prettier/recommended',\n  ],\n  settings: {\n    'import/resolver': {\n      typescript: {\n        project: './tsconfig.json',\n      },\n    },\n  },\n  rules: {\n    'prettier/prettier': 1,\n    '@typescript-eslint/no-explicit-any': 0,\n    '@typescript-eslint/explicit-module-boundary-types': 0,\n    '@typescript-eslint/no-non-null-assertion': 0,\n    '@typescript-eslint/no-empty-function': 1,\n    '@typescript-eslint/ban-ts-comment': 0,\n    'import/extensions': [\n      'error',\n      'ignorePackages',\n      { js: 'never', jsx: 'never', ts: 'never', tsx: 'never' },\n    ],\n    'import/no-extraneous-dependencies': 0,\n    'import/no-unresolved': [2, { caseSensitive: false }],\n    'import/prefer-default-export': 0,\n    'no-underscore-dangle': 0,\n    'no-nested-ternary': 0,\n    'no-shadow': 0,\n    'prefer-template': 1,\n    'no-param-reassign': 0,\n    'no-plusplus': 0,\n    'no-use-before-define': 0,\n    'no-restricted-syntax': 0,\n    'no-empty': [2, { allowEmptyCatch: true }],\n    'no-bitwise': 0,\n    'no-return-assign': 0,\n    'no-unused-expressions': [\n      'error',\n      { allowShortCircuit: true, allowTernary: true },\n    ],\n    'no-continue': 0,\n  },\n};\n"
  },
  {
    "path": "packages/vite-plugin-arco-vue-docs/.gitignore",
    "content": ".idea/\n.vscode/\n\nnode_modules/\n**/.DS_Store\n\ndist/\n"
  },
  {
    "path": "packages/vite-plugin-arco-vue-docs/.prettierrc.js",
    "content": "module.exports = {\n  tabWidth: 2,\n  semi: true,\n  printWidth: 80,\n  singleQuote: true,\n  quoteProps: 'consistent',\n  endOfLine: 'auto',\n  htmlWhitespaceSensitivity: 'strict',\n};\n"
  },
  {
    "path": "packages/vite-plugin-arco-vue-docs/README.md",
    "content": "# `@arco-design/vite-plugin-arco-vue-docs`\n\nProvides Markdown to Vue Component in Arco Vue Docs\n\n## Usage\n\n```tsx\nimport { defineConfig } from 'vite';\nimport vue from '@vitejs/plugin-vue';\nimport vueDocs from '@arco-design/vite-plugin-arco-vue-docs';\n\nexport default defineConfig({\n  plugins: [vueDocs(), vue()],\n});\n```\n"
  },
  {
    "path": "packages/vite-plugin-arco-vue-docs/package.json",
    "content": "{\n  \"name\": \"@arco-design/vite-plugin-arco-vue-docs\",\n  \"version\": \"0.1.0\",\n  \"description\": \"Provides Markdown to Vue Component in Arco Vue Docs\",\n  \"author\": \"wangchen <wangchen.flsion@bytedance.com>\",\n  \"license\": \"MIT\",\n  \"main\": \"dist/index.js\",\n  \"files\": [\n    \"dist\"\n  ],\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/arco-design/arco-design-vue.git\"\n  },\n  \"scripts\": {\n    \"dev\": \"tsc --watch\",\n    \"build\": \"tsc\",\n    \"lint-staged\": \"npx lint-staged\"\n  },\n  \"lint-staged\": {\n    \"*.{js,ts,jsx,tsx}\": [\n      \"eslint --fix\",\n      \"prettier --write\"\n    ]\n  },\n  \"peerDependencies\": {\n    \"@vitejs/plugin-vue\": \"^1.2.3\",\n    \"vite\": \"^2.4.0\"\n  },\n  \"devDependencies\": {\n    \"@types/js-yaml\": \"^4.0.9\",\n    \"@types/marked\": \"^2.0.5\",\n    \"@types/prismjs\": \"^1.26.5\",\n    \"@typescript-eslint/eslint-plugin\": \"^4.33.0\",\n    \"@typescript-eslint/parser\": \"^4.33.0\",\n    \"eslint\": \"^7.32.0\",\n    \"eslint-config-airbnb-base\": \"^14.2.1\",\n    \"eslint-config-prettier\": \"^8.10.0\",\n    \"eslint-import-resolver-typescript\": \"^2.7.1\",\n    \"eslint-plugin-import\": \"^2.31.0\",\n    \"eslint-plugin-prettier\": \"^3.4.1\",\n    \"prettier\": \"^2.8.8\"\n  },\n  \"dependencies\": {\n    \"@vitejs/plugin-vue\": \"^1.2.3\",\n    \"@vue/compiler-sfc\": \"^3.5.13\",\n    \"js-yaml\": \"^4.1.0\",\n    \"marked\": \"^2.1.3\",\n    \"prismjs\": \"^1.29.0\",\n    \"vite\": \"^2.4.0\"\n  }\n}\n"
  },
  {
    "path": "packages/vite-plugin-arco-vue-docs/src/descriptor.ts",
    "content": "const cache = new Map();\n\nexport const createDescriptor = (id: string, content: string) => {\n  cache.set(id, content);\n};\n\nexport const getDescriptor = (id: string) => {\n  return cache.get(id);\n};\n"
  },
  {
    "path": "packages/vite-plugin-arco-vue-docs/src/index.ts",
    "content": "import type { Plugin } from 'vite';\nimport { transformChangelog, transformDemo, transformMain } from './markdown';\nimport { getDescriptor } from './descriptor';\nimport {\n  getFrontMatter,\n  getVueId,\n  isDemoMarkdown,\n  isVirtualModule,\n} from './utils';\nimport marked from './marked';\n\nexport default function vueMdPlugin(): Plugin {\n  let vuePlugin: Plugin | undefined;\n\n  return {\n    name: 'vite:arco-vue-docs',\n    enforce: 'pre',\n    configResolved(resolvedConfig) {\n      // 获取vue插件，在hotUpload中使用\n      vuePlugin = resolvedConfig.plugins.find((p) => p.name === 'vite:vue');\n    },\n    resolveId(id: string) {\n      // 遇到虚拟md模块，直接返回id\n      if (isVirtualModule(id)) {\n        return id;\n      }\n      return null;\n    },\n    load(id) {\n      // 遇到虚拟md模块，直接返回缓存的内容\n      if (isVirtualModule(id)) {\n        return getDescriptor(id);\n      }\n      return null;\n    },\n    transform(code: string, id: string) {\n      if (!id.endsWith('.md')) {\n        return null;\n      }\n      if (!vuePlugin) {\n        return this.error('Not found plugin [vite:vue]');\n      }\n      if (isVirtualModule(id)) {\n        return vuePlugin.transform?.call(this, code, getVueId(id));\n      }\n\n      const tokens = marked.lexer(code);\n      const frontMatter = getFrontMatter(tokens);\n\n      if (frontMatter?.changelog) {\n        return transformChangelog(tokens);\n      }\n\n      const vueCode = isDemoMarkdown(id)\n        ? transformDemo(tokens, id, frontMatter)\n        : transformMain(tokens, id, frontMatter);\n\n      return vuePlugin.transform?.call(this, vueCode, getVueId(id));\n    },\n\n    async handleHotUpdate(ctx) {\n      if (!ctx.file.endsWith('.md') || !vuePlugin) {\n        return undefined;\n      }\n\n      const { file, read, timestamp, server, modules } = ctx;\n      const { moduleGraph } = server;\n\n      const content = await read();\n\n      const tokens = marked.lexer(content);\n      const frontMatter = getFrontMatter(tokens);\n\n      if (frontMatter?.changelog) {\n        return modules;\n      }\n\n      const updated = [];\n\n      const isDemo = isDemoMarkdown(file);\n\n      const component = isDemo\n        ? transformDemo(tokens, file, frontMatter)\n        : transformMain(tokens, file, frontMatter);\n\n      if (isDemo) {\n        const virtualPath = `/@virtual${file}`;\n\n        const mods = moduleGraph.getModulesByFile(virtualPath);\n        if (mods) {\n          const ret = await vuePlugin.handleHotUpdate?.({\n            file: getVueId(virtualPath),\n            timestamp,\n            modules: [...mods],\n            server,\n            read: () => getDescriptor(virtualPath),\n          });\n\n          updated.push(...(ret || []));\n        }\n      }\n\n      // reload the content component\n      const ret = await vuePlugin.handleHotUpdate?.({\n        file: getVueId(file),\n        timestamp,\n        modules,\n        server,\n        read: () => component,\n      });\n\n      return [...updated, ...(ret || [])];\n    },\n  };\n}\n"
  },
  {
    "path": "packages/vite-plugin-arco-vue-docs/src/interface.ts",
    "content": "export interface Options {\n  language: 'vue' | 'react';\n}\n\nexport interface I18nData {\n  'en-US': string;\n  'zh-CN': string;\n}\n\nexport interface FrontMatterToken {\n  type: 'frontMatter';\n  raw: string;\n  text: string;\n  attributes: Record<string, any>;\n}\n\nexport interface FileImportToken {\n  type: 'fileImport';\n  raw: string;\n  filename: string;\n  basename: string;\n}\n\nexport interface I18nDescriptionToken {\n  type: 'i18nDescription';\n  raw: string;\n  text: string;\n  locale: 'zh-CN' | 'en-US';\n  content: string;\n}\n"
  },
  {
    "path": "packages/vite-plugin-arco-vue-docs/src/markdown.ts",
    "content": "import path from 'path';\nimport fs from 'fs-extra';\nimport { isCode, isFileImport, isI18nDescription, toPascalCase } from './utils';\nimport marked from './marked';\nimport { getDemoVue, getMainVue } from './vue-template';\nimport { createDescriptor } from './descriptor';\nimport { I18nData } from './interface';\nimport { parseChangelog } from './parse-changelog';\n\nexport const transformMain = (\n  tokens: any[],\n  filename: string,\n  frontMatter: any\n) => {\n  const imports: string[] = [];\n  const components: string[] = [];\n\n  for (const token of tokens) {\n    if (isFileImport(token)) {\n      const componentName = toPascalCase(`demo-${token.basename}`);\n\n      imports.push(`import ${componentName} from '${token.filename}';`);\n      components.push(componentName);\n    }\n  }\n  const changelog = /en-US/.test(filename)\n    ? './CHANGELOG.md'\n    : './CHANGELOG.zh-CN.md';\n  try {\n    fs.accessSync(path.resolve(path.dirname(filename), changelog));\n    imports.push(`import _changelog from '${changelog}';`);\n  } catch {}\n\n  // @ts-ignore\n  const html = marked.parser(tokens);\n\n  return getMainVue({ html, imports, components, data: frontMatter });\n};\n\nexport const transformDemo = (\n  tokens: any[],\n  filename: string,\n  frontMatter?: any\n) => {\n  const basename = path.basename(filename, '.md');\n  const virtualPath = `/@virtual${filename}`;\n  const data = {\n    id: basename,\n    title: frontMatter?.title ?? '',\n    description: {} as I18nData,\n    virtualPath,\n    code: '',\n  };\n\n  for (const token of tokens) {\n    if (isI18nDescription(token)) {\n      data.description[token.locale] = token.content;\n    } else if (isCode(token) && token.lang === 'vue') {\n      createDescriptor(virtualPath, token.text);\n      // @ts-ignore\n      data.code = marked.parser([token]);\n    }\n  }\n\n  return getDemoVue(data);\n};\n\nexport const transformChangelog = (tokens: any[]) => {\n  const changelog = parseChangelog(tokens);\n\n  return `export default ${JSON.stringify(changelog, null, 2)};`;\n};\n"
  },
  {
    "path": "packages/vite-plugin-arco-vue-docs/src/marked.ts",
    "content": "import marked from 'marked';\n// @ts-ignore\nimport { cleanUrl, escape } from 'marked/src/helpers';\nimport yaml from 'js-yaml';\nimport Prism from 'prismjs';\nimport loadLanguages from 'prismjs/components/index';\nimport { parse } from '@vue/compiler-sfc';\nimport path from 'path';\nimport { FileImportToken, I18nDescriptionToken } from './interface';\n\nconst languages = ['shell', 'js', 'ts', 'jsx', 'tsx', 'less', 'diff'];\nloadLanguages(languages);\n\nconst frontMatter = {\n  name: 'frontMatter',\n  level: 'block',\n  tokenizer(src: string) {\n    const rule = /^```yaml\\n+(.+?)\\n+```(?:\\n|$)/s;\n    const match = rule.exec(src);\n    if (match) {\n      const text = match[1].trim();\n      const attributes = yaml.load(text);\n\n      return {\n        type: 'frontMatter',\n        raw: match[0],\n        text,\n        attributes,\n      };\n    }\n    return undefined;\n  },\n  renderer() {\n    // frontMatter不返回内用\n    return '';\n  },\n};\n\nconst fileImport = {\n  name: 'fileImport',\n  level: 'block',\n  tokenizer(src: string) {\n    const rule = /^@import\\s+(.+)(?:\\n|$)/;\n    const match = rule.exec(src);\n    if (match) {\n      const filename = match[1].trim();\n      const basename = path.basename(filename, '.md');\n\n      return {\n        type: 'fileImport',\n        raw: match[0],\n        filename,\n        basename,\n      };\n    }\n    return undefined;\n  },\n  renderer(token: FileImportToken) {\n    return `<demo-${token.basename} />\\n`;\n  },\n};\n\nconst i18nDescription = {\n  name: 'i18nDescription',\n  level: 'block',\n  tokenizer(src: string) {\n    const rule = /^##\\s+(zh-CN|en-US)\\n+(.+?)\\n+---(?:\\n|$)/s;\n    const match = rule.exec(src);\n\n    if (match) {\n      const text = match[2].trim();\n      const content = marked(text);\n      return {\n        type: 'i18nDescription',\n        raw: match[0],\n        text,\n        locale: match[1],\n        content,\n      };\n    }\n    return undefined;\n  },\n  renderer(token: I18nDescriptionToken) {\n    return token.content;\n  },\n};\n\nmarked.setOptions({\n  highlight(\n    code: string,\n    lang: string,\n    callback?: (error: any, code?: string) => void\n  ): string | void {\n    if (lang === 'vue') {\n      const { descriptor, errors } = parse(code);\n      const { script, styles } = descriptor;\n\n      let htmlContent = code;\n      const hasStyle = Boolean(styles.length > 0);\n      if (script?.content) {\n        htmlContent = htmlContent.replace(script.content, '$script$');\n      }\n      if (hasStyle) {\n        styles.forEach((style, index) => {\n          htmlContent = htmlContent.replace(style.content, `$style-${index}$`);\n        });\n      }\n\n      let highlighted = Prism.highlight(\n        htmlContent,\n        Prism.languages.html,\n        'html'\n      );\n      if (script?.content) {\n        const lang = script.lang ?? 'js';\n        const highlightedScript = Prism.highlight(\n          script.content,\n          Prism.languages[lang],\n          lang\n        );\n        highlighted = highlighted.replace('$script$', highlightedScript);\n      }\n      if (hasStyle) {\n        styles.forEach((style, index) => {\n          const lang = style.lang ?? 'css';\n          const highlightedStyle = Prism.highlight(\n            style.content,\n            Prism.languages[lang],\n            lang\n          );\n          highlighted = highlighted.replace(\n            `$style-${index}$`,\n            highlightedStyle\n          );\n        });\n      }\n\n      return highlighted;\n    }\n    if (languages.includes(lang)) {\n      return Prism.highlight(code, Prism.languages[lang], lang);\n    }\n    return code;\n  },\n});\n\nmarked.use({\n  breaks: true,\n  xhtml: true,\n  renderer: {\n    heading(text: string, level: number, raw: string) {\n      if (level === 2) {\n        const anchor = raw.replace(/\\s+/g, '-');\n        return `<anchor-head level=\"${level}\" href=\"${anchor}\">${text}</anchor-head>`;\n      }\n      return `<h${level} id=\"${raw}\">${text}</h${level}>`;\n    },\n    link(this: any, href, title, text) {\n      href = cleanUrl(this.options.sanitize, this.options.baseUrl, href);\n      if (href === null) {\n        return text;\n      }\n      let out = `<a class=\"link\" href=\"${escape(href)}\"`;\n      if (title) {\n        if (/_blank/.test(title)) {\n          out += ` target=\"_blank\"`;\n          title = title.replace('_blank', '').trim();\n          if (title) {\n            out += ` title=\"${title}\"`;\n          }\n        } else {\n          out += ` title=\"${title}\"`;\n        }\n      }\n      out += `>${text}</a>`;\n      return out;\n    },\n    code(this: any, code, infostring) {\n      const lang = (infostring || '').match(/\\S*/)?.[0];\n      if (this.options.highlight) {\n        const out = this.options.highlight(code, lang);\n        if (out != null && out !== code) {\n          code = out;\n        }\n      }\n      code = code.replace(/{{|}}/g, (string) => {\n        if (string === '{{') {\n          return '&#123;&#123;';\n        }\n        return '&#125;&#125;';\n      });\n      code = `${code.replace(/\\n$/, '')}\\n`;\n\n      if (!lang) {\n        return `<pre class=\"code-content\"><code>${code}</code></pre>\\n`;\n      }\n\n      return `<pre class=\"code-content\"><code class=\"${this.options.langPrefix}lang\">${code}</code></pre>\\n`;\n    },\n    table(header: string, body: string) {\n      return `<a-table class=\"component-api-table\">\n  <colgroup>\n    <col style=\"min-width: 120px\"/>\n  </colgroup>\n  <a-thead>${header}</a-thead><a-tbody>${body}</a-tbody>\n</a-table>`;\n    },\n    tablerow(content: string): string {\n      return `<a-tr>${content}</a-tr>`;\n    },\n    tablecell(content: string, { header, align }): string {\n      if (header) {\n        return `<a-th>${content}</a-th>`;\n      }\n      return `<a-td>${content}</a-td>`;\n    },\n  },\n  // @ts-ignore @types/marked版本过低导致\n  extensions: [i18nDescription, fileImport, frontMatter],\n});\n\nexport default marked;\n"
  },
  {
    "path": "packages/vite-plugin-arco-vue-docs/src/parse-changelog.ts",
    "content": "import { Token } from 'marked';\nimport marked from './marked';\n\nconst getType = (text: string) => {\n  if (/attention|重点注意/i.test(text)) {\n    return 'attention';\n  }\n  if (/feature|新增功能/i.test(text)) {\n    return 'feature';\n  }\n  if (/bugfix|问题修复/i.test(text)) {\n    return 'bugfix';\n  }\n  if (/enhancement|功能优化/i.test(text)) {\n    return 'enhancement';\n  }\n  if (/style|样式更新/i.test(text)) {\n    return 'style';\n  }\n  if (/typescript|类型修正/i.test(text)) {\n    return 'typescript';\n  }\n\n  return 'feature';\n};\n\nexport const parseChangelog = (tokens: Token[]) => {\n  const changelog = [];\n\n  let data = { version: '', date: '', list: [], extra: [] };\n\n  for (let i = 0; i < tokens.length; i++) {\n    const item = tokens[i];\n\n    if (item.type === 'heading' && item.depth === 2) {\n      if (data.version) {\n        changelog.push({ ...data });\n        data = { version: '', date: '', list: [], extra: [] };\n      }\n      data.version = item.text;\n    } else if (item.type === 'paragraph') {\n      data.date = item.text.slice(1, -1);\n    } else if (item.type === 'list') {\n      for (const extraItem of item.items) {\n        // @ts-ignore\n        data.extra.push(marked(extraItem.text));\n      }\n    } else if (item.type === 'heading' && item.depth === 3) {\n      const content = {\n        type: getType(item.text),\n        typeText: item.text,\n        list: [],\n      };\n      for (let j = i + 1; j < tokens.length; j++) {\n        if (tokens[j].type === 'list') {\n          const listToken = tokens[j];\n          // @ts-ignore\n          for (const item of listToken.items) {\n            // @ts-ignore\n            content.list.push(marked(item.text));\n          }\n          i = j;\n          break;\n        }\n      }\n      // @ts-ignore\n      data.list.push(content);\n    }\n  }\n\n  if (data.version) {\n    changelog.push({ ...data });\n  }\n\n  return changelog;\n};\n"
  },
  {
    "path": "packages/vite-plugin-arco-vue-docs/src/utils.ts",
    "content": "import { Token, Tokens } from 'marked';\nimport path from 'path';\nimport { FileImportToken, I18nDescriptionToken } from './interface';\n\nexport function isParagraph(token: Token): token is Tokens.Paragraph {\n  return (token as Tokens.Paragraph).type === 'paragraph';\n}\n\nexport function isCode(token: Token): token is Tokens.Code {\n  return (token as Tokens.Code).type === 'code';\n}\n\nexport function isHeading(token: Token): token is Tokens.Heading {\n  return (token as Tokens.Heading).type === 'heading';\n}\n\nexport const isFileImport = (token: any): token is FileImportToken => {\n  return token.type === 'fileImport';\n};\n\nexport const isI18nDescription = (\n  token: any\n): token is I18nDescriptionToken => {\n  return token.type === 'i18nDescription';\n};\n\nexport function isSpace(token: Token): token is Tokens.Space {\n  return (token as Tokens.Space).type === 'space';\n}\n\nexport const toKebabCase = (string: string): string => {\n  string = string.trim();\n  if (/\\s\\w/.test(string)) {\n    string = string.replace('s(w)', (match, word) => {\n      return word.toUpperCase();\n    });\n  }\n\n  return string.replace(/[A-Z]/g, (match, offset) => {\n    return `${offset > 0 ? '-' : ''}${match.toLowerCase()}`;\n  });\n};\n\nexport const toPascalCase = (string: string): string => {\n  string = string.trim();\n\n  return string\n    .replace(/^[a-z]/, (match: string) => match.toLocaleUpperCase())\n    .replace(/-(\\w)/g, (match: string, p1: string) => {\n      return p1.toLocaleUpperCase();\n    });\n};\n\n/**\n * 将字符串转换为模板中的字符串格式\n */\nexport const getTemplateString = (string: string): string => {\n  return `'${string.replace(/'/g, `\\\\'`)}'`;\n};\n\nexport const isVirtualModule = (id: string) => {\n  return /\\/@virtual/.test(id);\n};\n\nexport const isDemoMarkdown = (id: string) => {\n  return /\\/__demo__\\//.test(id);\n};\n\nexport const getFrontMatter = (tokens: any[]) => {\n  for (const token of tokens) {\n    if (token.type === 'frontMatter') {\n      return token.attributes;\n    }\n  }\n  return undefined;\n};\n\nexport const getVueId = (id: string) => {\n  return id.replace('.md', '.vue');\n};\n\nexport const getValidFilename = (filename: string) => {\n  return path.extname(filename) ? filename : `${filename}.md`;\n};\n"
  },
  {
    "path": "packages/vite-plugin-arco-vue-docs/src/vue-template.ts",
    "content": "/**\n * 获取Main组件的Vue代码\n */\nimport { I18nData } from './interface';\nimport { getTemplateString } from './utils';\n\nexport const getMainVue = ({\n  html,\n  imports,\n  components,\n  data,\n}: {\n  html: string;\n  imports: string[];\n  components: string[];\n  data: Record<string, any>;\n}) => `<template>\n  <arco-article v-bind=\"data\" :changelog=\"changelog\">\n    ${html}\n  </arco-article>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue';\nimport { useI18n } from 'vue-i18n';\n${imports.join('\\n')};\n\nexport default defineComponent({\n  name: 'ArcoMain',\n  components: { ${components.join(',')} },\n  setup() {\n    const { locale } = useI18n();\n    const data = ${JSON.stringify(data)};\n    const getMessage = (zh, en) => {\n      return locale.value === 'zh-CN' ? zh : en;\n    };\n    const changelog = typeof _changelog === 'undefined' ? undefined : _changelog;\n\n    return {\n      locale,\n      data,\n      changelog,\n      getMessage\n    };\n  }\n});\n</script>\n`;\n\nexport const getDemoVue = ({\n  id,\n  virtualPath,\n  title,\n  description,\n  code,\n}: {\n  id: string;\n  virtualPath: string;\n  title: I18nData;\n  description: I18nData;\n  code: string;\n}) => `<template>\n  <code-block id=\"${id}\" :title=\"getMessage(${getTemplateString(\n  title['zh-CN']\n)}, ${getTemplateString(title['en-US'])})\">\n    <template v-if=\"locale === 'zh-CN'\" #description>\n      ${description['zh-CN'] ?? ''}\n    </template>\n    <template v-else #description>\n      ${description['en-US'] ?? ''}\n    </template>\n    <cell-demo>\n      <virtual-demo />\n    </cell-demo>\n    <cell-code>\n      ${code}\n    </cell-code>\n  </code-block>\n</template>\n<script lang=\"ts\">\nimport { defineComponent } from 'vue';\nimport { useI18n } from 'vue-i18n';\nimport VirtualDemo from '${virtualPath}';\n\nexport default defineComponent({\n  name: 'ArcoDemo',\n  components: { VirtualDemo },\n  setup() {\n    const { locale } = useI18n();\n    const getMessage = (zh, en) => {\n      return locale.value === 'zh-CN' ? zh : en;\n    };\n\n    return {\n      locale,\n      getMessage\n    };\n  }\n});\n</script>\n`;\n"
  },
  {
    "path": "packages/vite-plugin-arco-vue-docs/tsconfig.json",
    "content": "{\n  \"compilerOptions\": {\n    \"outDir\": \"dist\",\n    \"declaration\": true,\n    \"module\": \"CommonJS\",\n    \"target\": \"ES2015\",\n    \"moduleResolution\": \"node\",\n    \"baseUrl\": \".\",\n    \"strict\": true,\n    \"isolatedModules\": true,\n    \"esModuleInterop\": true,\n    \"skipLibCheck\": true,\n    \"lib\": [\n      \"ES2020\"\n    ]\n  },\n  \"include\": [\n    \"src\"\n  ]\n}\n"
  },
  {
    "path": "packages/web-vue/.eslintignore",
    "content": "components/icon/*\ndist/*\nes/*\nlib/*\n/*.json\n/*.js\n"
  },
  {
    "path": "packages/web-vue/.eslintrc.js",
    "content": "module.exports = {\n  parser: 'vue-eslint-parser',\n  parserOptions: {\n    // Parser that checks the content of the <script> tag\n    parser: '@typescript-eslint/parser',\n    sourceType: 'module',\n    ecmaVersion: 2020,\n    ecmaFeatures: {\n      jsx: true,\n    },\n  },\n  env: {\n    browser: true,\n    node: true,\n  },\n  plugins: ['@typescript-eslint'],\n  extends: [\n    // Airbnb JavaScript Style Guide https://github.com/airbnb/javascript\n    'airbnb-base',\n    'plugin:@typescript-eslint/recommended',\n    'plugin:import/recommended',\n    'plugin:import/typescript',\n    'plugin:vue/vue3-recommended',\n    'plugin:prettier/recommended',\n  ],\n  settings: {\n    'import/resolver': {\n      typescript: {\n        project: './tsconfig.json',\n      },\n    },\n  },\n  rules: {\n    'prettier/prettier': 1,\n    // To close Vue, you must specify prop default\n    'vue/require-default-prop': 0,\n    'vue/singleline-html-element-content-newline': 0,\n    'vue/max-attributes-per-line': 0,\n    // Add void ele in prettier\n    'vue/html-self-closing': 0,\n    '@typescript-eslint/no-explicit-any': 0,\n    // TODO: Temporarily closed\n    '@typescript-eslint/explicit-module-boundary-types': 0,\n    // TODO: Temporarily closed\n    '@typescript-eslint/no-non-null-assertion': 0,\n    // Allow ts-ignore\n    '@typescript-eslint/ban-ts-comment': 0,\n    // Redefine the extension detection rules, overwrite airbnb-base\n    'import/extensions': [\n      'error',\n      'ignorePackages',\n      { js: 'never', jsx: 'never', ts: 'never', tsx: 'never' },\n    ],\n    // TODO: Temporarily closed\n    'import/no-extraneous-dependencies': 0,\n    'import/no-unresolved': [2, { caseSensitive: false }],\n    // Utils allows export\n    'import/prefer-default-export': 0,\n    'import/no-named-as-default': 0,\n    // You can use underscore variable names (private variables)\n    'no-underscore-dangle': 0,\n    // Allow ternary expression nesting\n    'no-nested-ternary': 0,\n    // Allow internal variables and external variables to have the same name\n    'no-shadow': 0,\n    'prefer-template': 1,\n    // TODO: Temporarily closed\n    'no-param-reassign': 0,\n    // Allow to add and subtract\n    'no-plusplus': 0,\n    // ESLint Problem https://stackoverflow.com/questions/63818415/react-was-used-before-it-was-defined\n    'no-use-before-define': 0,\n    // Allow for-of traversal (recommended)\n    'no-restricted-syntax': 0,\n    'no-empty': [2, { allowEmptyCatch: true }],\n    'no-bitwise': 0,\n    'no-return-assign': 0,\n    'no-unused-expressions': [\n      'error',\n      { allowShortCircuit: true, allowTernary: true },\n    ],\n    'no-continue': 0,\n    'no-console': 2,\n    // TODO: Temporarily closed\n    '@typescript-eslint/no-unused-vars': 0,\n    '@typescript-eslint/no-empty-function': 0,\n  },\n};\n"
  },
  {
    "path": "packages/web-vue/.gitignore",
    "content": ".idea/\n.vscode/\n.coverage/\n__screenshots__\n\nnode_modules/\n**/.DS_Store\n\ndist/\nlib/\nes/\njson/\n\ncomponents/icon\nicon/icons.json\n\n.eslintcache\n"
  },
  {
    "path": "packages/web-vue/.prettierrc.js",
    "content": "module.exports = {\n  tabWidth: 2,\n  semi: true,\n  printWidth: 80,\n  singleQuote: true,\n  endOfLine: 'auto',\n  quoteProps: 'consistent',\n  htmlWhitespaceSensitivity: 'strict',\n};\n"
  },
  {
    "path": "packages/web-vue/.stylelintrc.js",
    "content": "module.exports = {\n  extends: [\n    'stylelint-config-standard',\n    'stylelint-config-rational-order',\n    'stylelint-config-prettier',\n  ],\n  defaultSeverity: 'warning',\n  plugins: ['stylelint-order'],\n  rules: {\n    'at-rule-no-unknown': [\n      true,\n      {\n        ignoreAtRules: ['plugin'],\n      },\n    ],\n    'rule-empty-line-before': [\n      'always',\n      {\n        except: ['after-single-line-comment', 'first-nested'],\n      },\n    ],\n    'selector-pseudo-element-no-unknown': [\n      true,\n      {\n        ignorePseudoElements: ['v-deep'],\n      },\n    ],\n  },\n};\n"
  },
  {
    "path": "packages/web-vue/CHANGELOG.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.57.0\n\n`2025-03-10`\n\n### 🆕 Feature\n\n- **input:** Added 'prepend' and 'append' attributes ([#3452](https://github.com/arco-design/arco-design-vue/pull/3452))\n- **drawer:** Add bodyClass and bodyStyle ([#3437](https://github.com/arco-design/arco-design-vue/pull/3437))\n\n### 🐛 BugFix\n\n- **form:** fix where form id attribute was consumed and could not be propagated ([#3450](https://github.com/arco-design/arco-design-vue/pull/3450))\n- **input:** Fix the preValue calculation error in the input component ([#3427](https://github.com/arco-design/arco-design-vue/pull/3427))\n- **tabs:** resolve `wheel` event listener passive warning ([#3413](https://github.com/arco-design/arco-design-vue/pull/3413))\n- **tabs:** optimize memory release during tab removal ([#3413](https://github.com/arco-design/arco-design-vue/pull/3413))\n- **descriptions:** fixes the issue related to the layout distribution of span ([#3409](https://github.com/arco-design/arco-design-vue/pull/3409))\n- **message:** Fixed an issue where message positioning would be affected by layout and would not be displayed ([#3406](https://github.com/arco-design/arco-design-vue/pull/3406))\n- **table:** Fix fixed column background style issue in dark mode ([#3398](https://github.com/arco-design/arco-design-vue/pull/3398))\n- **slider:** Fixed Drag change slider value not working on mobile side ([#3343](https://github.com/arco-design/arco-design-vue/pull/3343))\n\n### 💎 Enhancement\n\n- **modal:** fix re-throw error in onBeforeOk for proper error handling ([#3407](https://github.com/arco-design/arco-design-vue/pull/3407))\n- **drawer:** fix re-throw error in onBeforeOk for proper error handling ([#3407](https://github.com/arco-design/arco-design-vue/pull/3407))\n- **popconfirm:** fix re-throw error in onBeforeOk for proper error handling ([#3407](https://github.com/arco-design/arco-design-vue/pull/3407))\n\n\n## 2.56.3\n\n`2024-10-25`\n\n### 🆕 Feature\n\n- **button:** Support autofocus attribute for button ([#3293](https://github.com/arco-design/arco-design-vue/pull/3293))\n\n### 🐛 BugFix\n\n- Fix Khmer language translations ([#3328](https://github.com/arco-design/arco-design-vue/pull/3328))\n- **cascader:** fix custom empty slot not working in some cases ([#3315](https://github.com/arco-design/arco-design-vue/pull/3315))\n- **input-number:** fix readonly not working in button mode ([#3314](https://github.com/arco-design/arco-design-vue/pull/3314))\n\n### 💎 Enhancement\n\n- **textarea:** Support textareaAttrs attribute for textarea ([#3303](https://github.com/arco-design/arco-design-vue/pull/3303))\n\n\n## 2.56.2\n\n`2024-09-13`\n\n### 🆕 Feature\n\n- Added Russian ([#3290](https://github.com/arco-design/arco-design-vue/pull/3290))\n\n### 🐛 BugFix\n\n- **select:** fix(switch): loading state can't be controlled with truthy initial state ([#3285](https://github.com/arco-design/arco-design-vue/pull/3285))\n- **calendar:** fix  modes not taking effect ([#3281](https://github.com/arco-design/arco-design-vue/pull/3281))\n- **radio:** fix not inheriting the injected size ([#3267](https://github.com/arco-design/arco-design-vue/pull/3267))\n\n### 🆎 TypeScript\n\n- **card:** update the types of headerStyle and bodyStyle ([#3268](https://github.com/arco-design/arco-design-vue/pull/3268))\n\n\n## 2.56.1\n\n`2024-08-22`\n\n### 🆕 Feature\n\n- **select:** add `tagNowrap` prop ([#3270](https://github.com/arco-design/arco-design-vue/pull/3270))\n\n\n## 2.56.0\n\n`2024-07-26`\n\n### 🆕 Feature\n\n- **input-number:** Added 'keydown' event to disable default behavior ([#3248](https://github.com/arco-design/arco-design-vue/pull/3248))\n\n### 🐛 BugFix\n\n- **tree:** fix tree node folding animation ([#3234](https://github.com/arco-design/arco-design-vue/pull/3234))\n- **color-picker:** fix shaking issue when selecting color with v-model ([#3180](https://github.com/arco-design/arco-design-vue/pull/3180))\n- **time-picker:** TriggerProps property not correctly passed through ([#3178](https://github.com/arco-design/arco-design-vue/pull/3178))\n\n### 💎 Enhancement\n\n- **menu:** fix color transition effect in selected menu item ([#3192](https://github.com/arco-design/arco-design-vue/pull/3192))\n\n\n## 2.55.3\n\n`2024-06-07`\n\n### 🆕 Feature\n\n- **table:** colum added the minWidth attribute ([#3157](https://github.com/arco-design/arco-design-vue/pull/3157))\n\n### 🐛 BugFix\n\n- **time-picker:** Fix issue with read-only mode still being editable ([#3173](https://github.com/arco-design/arco-design-vue/pull/3173))\n- **time-picker:** Added `placeholder` type definition ([#3173](https://github.com/arco-design/arco-design-vue/pull/3173))\n- **input:** fix display of allow-clear input button in read-only state ([#3172](https://github.com/arco-design/arco-design-vue/pull/3172))\n- **table:** fix table sticky-header failure with scrollbar ([#3170](https://github.com/arco-design/arco-design-vue/pull/3170))\n- **table:** Restore default style when table dynamically switches row-selection ([#3155](https://github.com/arco-design/arco-design-vue/pull/3155))\n\n\n## 2.55.2\n\n`2024-05-10`\n\n### 🐛 BugFix\n\n- **verification-code:** fix formatter not being applied during paste ([#3110](https://github.com/arco-design/arco-design-vue/pull/3110))\n- **upload:** import missing image styles for upload component ([#3101](https://github.com/arco-design/arco-design-vue/pull/3101))\n- **transfer:** fix disabled behavior in transfer simple mode ([#3067](https://github.com/arco-design/arco-design-vue/pull/3067))\n- **color-picker:** fix color-picker style import ([#3052](https://github.com/arco-design/arco-design-vue/pull/3052))\n\n### 💅 Style\n\n- **color-picker:** Optimize color control bar background fillet style ([#3116](https://github.com/arco-design/arco-design-vue/pull/3116))\n\n### 🆎 TypeScript\n\n- undefined ([#2998](https://github.com/arco-design/arco-design-vue/pull/2998))\n\n\n## 2.55.1\n\n`2024-03-29`\n\n### 🐛 BugFix\n\n- **empty:** fix automatically inherited warn ([#3048](https://github.com/arco-design/arco-design-vue/pull/3048))\n- **trigger:** fix animation direction for position popup ([#3045](https://github.com/arco-design/arco-design-vue/pull/3045))\n- **color-picker:** fix v-model not working ([#3030](https://github.com/arco-design/arco-design-vue/pull/3030))\n- **color-picker:** Fix copywriting errors ([#3028](https://github.com/arco-design/arco-design-vue/pull/3028))\n\n### 💅 Style\n\n- **tree:** fix scrollHeight calculation exception problem ([#3044](https://github.com/arco-design/arco-design-vue/pull/3044))\n\n\n## 2.55.0\n\n`2024-03-15`\n\n### 🆕 Feature\n\n- **tree-select:** Added `input-value` related properties ([#3024](https://github.com/arco-design/arco-design-vue/pull/3024))\n- **tree:** The `title` slot has a new `title` parameter ([#3024](https://github.com/arco-design/arco-design-vue/pull/3024))\n- **color-picker:** add color-picker component ([#2958](https://github.com/arco-design/arco-design-vue/pull/2958))\n\n### 💅 Style\n\n- **tabs:** fix transition animation for tab title ([#3008](https://github.com/arco-design/arco-design-vue/pull/3008))\n\n\n## 2.54.6\n\n`2024-03-01`\n\n### 🐛 BugFix\n\n- **input-number:** fix overlap between step button and suffix/append ([#3005](https://github.com/arco-design/arco-design-vue/pull/3005))\n- **collapse:** resolve reserved property warning ([#2997](https://github.com/arco-design/arco-design-vue/pull/2997))\n- **transfer:** fix disabled props not working ([#2996](https://github.com/arco-design/arco-design-vue/pull/2996))\n- **tree:** resolve invalid property name console warning issue ([#2995](https://github.com/arco-design/arco-design-vue/pull/2995))\n\n### 💅 Style\n\n- **modal:** fix fade-modal transition effect works on enter state ([#3007](https://github.com/arco-design/arco-design-vue/pull/3007))\n\n\n## 2.54.5\n\n`2024-02-21`\n\n### 🐛 BugFix\n\n- **menu:** Fix warning “Invalid prop name: key is a reserved property.” ([#2978](https://github.com/arco-design/arco-design-vue/pull/2978))\n- **date-picker:** refactor date utility functions and week picker to correctly show selected week ([#2970](https://github.com/arco-design/arco-design-vue/pull/2970))\n- **input-number:** fix v-model not working ([#2961](https://github.com/arco-design/arco-design-vue/pull/2961))\n\n\n## 2.54.4\n\n`2024-02-02`\n\n### 🐛 BugFix\n\n- **table:** fix virtual table list not displaying empty state ([#2949](https://github.com/arco-design/arco-design-vue/pull/2949))\n- **watermark:** Fix font color does not take effect ([#2942](https://github.com/arco-design/arco-design-vue/pull/2942))\n- **input-number:** Fix change event triggering mechanism ([#2915](https://github.com/arco-design/arco-design-vue/pull/2915))\n\n\n## 2.54.3\n\n`2024-01-19`\n\n### 🐛 BugFix\n\n- **rate:** Fix missing icon elements in `nuxt` ([#2930](https://github.com/arco-design/arco-design-vue/pull/2930))\n- **avatar:** fix partial avatars not displaying in the avatar group popover ([#2925](https://github.com/arco-design/arco-design-vue/pull/2925))\n- **image:** adjust incorrect type definitions and documentation ([#2924](https://github.com/arco-design/arco-design-vue/pull/2924))\n- **image:** fix spelling mistakes ([#2924](https://github.com/arco-design/arco-design-vue/pull/2924))\n- **input:** fix spelling mistakes ([#2924](https://github.com/arco-design/arco-design-vue/pull/2924))\n\n\n## 2.54.2\n\n`2024-01-11`\n\n### 🐛 BugFix\n\n- **table:** Fix the problem of `span-method` reporting an error after exceeding the number of rows and columns ([#2914](https://github.com/arco-design/arco-design-vue/pull/2914))\n\n### 💎 Enhancement\n\n- **select:** enhance selected state style for options ([#2895](https://github.com/arco-design/arco-design-vue/pull/2895))\n\n### 💅 Style\n\n- **input:** Fix overlapping styles of neighboring components in input-group ([#2889](https://github.com/arco-design/arco-design-vue/pull/2889))\n\n\n## 2.54.1\n\n`2023-12-28`\n\n### 🆕 Feature\n\n- **watermark:** watermark font color  follows the theme ([#2790](https://github.com/arco-design/arco-design-vue/pull/2790))\n- **input:** Enhance the input-password props ([#2784](https://github.com/arco-design/arco-design-vue/pull/2784))\n\n### 🐛 BugFix\n\n- **select:** Fix `defaultPopupVisible` failure problem ([#2881](https://github.com/arco-design/arco-design-vue/pull/2881))\n\n\n## 2.54.0\n\n`2023-12-15`\n\n### 🆕 Feature\n\n- add verification-code  component ([#2823](https://github.com/arco-design/arco-design-vue/pull/2823))\n\n### 🐛 BugFix\n\n- **date-picker:** resolve arrow click issue in range-picker ([#2865](https://github.com/arco-design/arco-design-vue/pull/2865))\n- **pagination:** Fix the problem that the page number may be `0` ([#2828](https://github.com/arco-design/arco-design-vue/pull/2828))\n\n### 💎 Enhancement\n\n- **cascader:** Modifying `multiple` and `pathMode` will trigger changes in the binding value ([#2867](https://github.com/arco-design/arco-design-vue/pull/2867))\n\n### 🆎 TypeScript\n\n- **button:** TS类型优化 ([#2825](https://github.com/arco-design/arco-design-vue/pull/2825))\n\n\n## 2.53.3\n\n`2023-11-24`\n\n### 🐛 BugFix\n\n- **input-tag:** Fix the problem that the file can still be deleted under `read-only` ([#2824](https://github.com/arco-design/arco-design-vue/pull/2824))\n- **date-picker:** fix invalid date due to mismatch between date and format ([#2789](https://github.com/arco-design/arco-design-vue/pull/2789))\n\n\n## 2.53.2\n\n`2023-11-10`\n\n### 🐛 BugFix\n\n- **watermark:** Fix the problem of error reporting when styles are loaded on demand ([#2787](https://github.com/arco-design/arco-design-vue/pull/2787))\n\n\n## 2.53.1\n\n`2023-11-08`\n\n### 🐛 BugFix\n\n- **watermark:** Fix the problem that component entrance is not exposed ([#2782](https://github.com/arco-design/arco-design-vue/pull/2782))\n\n\n## 2.53.0\n\n`2023-11-03`\n\n### 🆕 Feature\n\n- **watermark:** add watermark component ([#2741](https://github.com/arco-design/arco-design-vue/pull/2741))\n- **calendar:** Added `header` and `default` slots ([#2674](https://github.com/arco-design/arco-design-vue/pull/2674))\n\n### 🐛 BugFix\n\n- **descriptions:** Fix the problem of invalid `span` attribute of `DescriptionsItem` component ([#2765](https://github.com/arco-design/arco-design-vue/pull/2765))\n\n\n## 2.52.1\n\n`2023-10-13`\n\n### 🐛 BugFix\n\n- **mention:** Fixed the issue where the `disabled` attribute does not work properly under text-area ([#2723](https://github.com/arco-design/arco-design-vue/pull/2723))\n\n### 💎 Enhancement\n\n- **switch:** Optimize handling of `undefined` and `null` values ([#2737](https://github.com/arco-design/arco-design-vue/pull/2737))\n\n\n## 2.52.0\n\n`2023-09-22`\n\n### 🆕 Feature\n\n- **input-number:** Add `input-attrs` attribute ([#2716](https://github.com/arco-design/arco-design-vue/pull/2716))\n- **transfer:** add an action icon slot ([#2708](https://github.com/arco-design/arco-design-vue/pull/2708))\n- **avatar:** Added new `ObjectFit` prop ([#2691](https://github.com/arco-design/arco-design-vue/pull/2691))\n- **auto-complete:** add dropdown scroll event ([#2635](https://github.com/arco-design/arco-design-vue/pull/2635))\n\n### 🐛 BugFix\n\n- **date-picker:** fix incorrect display of operations in range selector ([#2712](https://github.com/arco-design/arco-design-vue/pull/2712))\n\n\n## 2.51.2\n\n`2023-09-15`\n\n### 🐛 BugFix\n\n- **form:** scroll-to-first-error throws error in nested form items ([#2707](https://github.com/arco-design/arco-design-vue/pull/2707))\n\n\n## 2.51.1\n\n`2023-09-08`\n\n### 🐛 BugFix\n\n- **cascader:** fix empty state in Cascader Virtual list ([#2686](https://github.com/arco-design/arco-design-vue/pull/2686))\n\n\n## 2.51.0\n\n`2023-09-01`\n\n### ⚠️ Important Attention\n\n- **form:** `form-item` render element adds `id` attribute, please pay attention to the impact on the original web page\n\n### 🆕 Feature\n\n- **form:** add scroll into view to the field ([#2680](https://github.com/arco-design/arco-design-vue/pull/2680))\n- **table:** Support displaying empty subtrees ([#2673](https://github.com/arco-design/arco-design-vue/pull/2673))\n- **select:** support boolean type ([#2661](https://github.com/arco-design/arco-design-vue/pull/2661))\n\n### 🐛 BugFix\n\n- **typography:** Fix the problem of missing related component styles when importing on demand ([#2682](https://github.com/arco-design/arco-design-vue/pull/2682))\n\n\n## 2.50.2\n\n`2023-08-25`\n\n### 🐛 BugFix\n\n- fix the wrong scrolling position of the virtual list ([#2665](https://github.com/arco-design/arco-design-vue/pull/2665))\n\n### 💎 Enhancement\n\n- **input-number:** Optimize the long-press effect of the step button ([#2668](https://github.com/arco-design/arco-design-vue/pull/2668))\n\n\n## 2.50.1\n\n`2023-08-18`\n\n### 🆕 Feature\n\n- **transfer:** Increase the configuration properties of the search box ([#2656](https://github.com/arco-design/arco-design-vue/pull/2656))\n\n### 🐛 BugFix\n\n- DOM position calculation compatible with Shadow DOM ([#2649](https://github.com/arco-design/arco-design-vue/pull/2649))\n\n\n## 2.50.0\n\n`2023-08-11`\n\n### ⚠️ Important Attention\n\n- Fix `Alter` to `Alert` ([#2633](https://github.com/arco-design/arco-design-vue/pull/2633))\n\n### 🆕 Feature\n\n- **image:** Support keyboard shortcuts, mouse wheel operation and a series of functions ([#2616](https://github.com/arco-design/arco-design-vue/pull/2616))\n- **auto-complete:** add virtual list support ([#2596](https://github.com/arco-design/arco-design-vue/pull/2596))\n- **timeline:** add label slot ([#2591](https://github.com/arco-design/arco-design-vue/pull/2591))\n\n### 🐛 BugFix\n\n- Fix the problem of prompting for repeated registration when importing globally ([#2633](https://github.com/arco-design/arco-design-vue/pull/2633))\n- Fixed formatting issue causing `␍` error ([#2626](https://github.com/arco-design/arco-design-vue/pull/2626))\n\n### 💎 Enhancement\n\n- **modal:** add hide-title prop, support hide title ([#2605](https://github.com/arco-design/arco-design-vue/pull/2605))\n\n### 🆎 TypeScript\n\n- **modal:** Complete missing properties in ModalConfig ([#2628](https://github.com/arco-design/arco-design-vue/pull/2628))\n- **image:** added  image-preview-action type definition ([#2625](https://github.com/arco-design/arco-design-vue/pull/2625))\n\n\n## 2.49.3\n\n`2023-08-04`\n\n### 🐛 BugFix\n\n- **grid:** fix the problem of using v-show in a-grid-item, the initial value is false, but it is still displayed ([#2604](https://github.com/arco-design/arco-design-vue/pull/2604))\n\n\n## 2.49.2\n\n`2023-07-28`\n\n### 🐛 BugFix\n\n- **statistic:** Fix the problem that `value-style` cannot modify the font size in digital content ([#2600](https://github.com/arco-design/arco-design-vue/pull/2600))\n- **table:** Fix the problem of turning on the adjustment of column width in the fixed column ([#2598](https://github.com/arco-design/arco-design-vue/pull/2598))\n- **typography:** enhanced typography styles for handling long words ([#2583](https://github.com/arco-design/arco-design-vue/pull/2583))\n- **table:** fix drag issue in tree table ([#2503](https://github.com/arco-design/arco-design-vue/pull/2503))\n\n\n## 2.49.1\n\n`2023-07-24`\n\n### 🐛 BugFix\n\n- **tree-select:** Fix the problem that the default value of the `border` attribute is wrong ([#2580](https://github.com/arco-design/arco-design-vue/pull/2580))\n\n\n## 2.49.0\n\n`2023-07-21`\n\n### 🆕 Feature\n\n- **cascader:** Add virtual list support ([#2577](https://github.com/arco-design/arco-design-vue/pull/2577))\n- **tree-select:** Add header and footer visibility in empty data state ([#2573](https://github.com/arco-design/arco-design-vue/pull/2573))\n- **input-number:** add slots for input-number box value manipulation icons ([#2560](https://github.com/arco-design/arco-design-vue/pull/2560))\n- **list:** Scroll maxHeight supports string type ([#2544](https://github.com/arco-design/arco-design-vue/pull/2544))\n\n### 🐛 BugFix\n\n- **table:** Fix the wrong parameter of rowClass function record ([#2570](https://github.com/arco-design/arco-design-vue/pull/2570))\n- **tree-select:** Fix the problem that the border attribute is invalid ([#2568](https://github.com/arco-design/arco-design-vue/pull/2568))\n\n### 💅 Style\n\n- **result:** Fix 500 image misalignment issues ([#2578](https://github.com/arco-design/arco-design-vue/pull/2578))\n\n\n## 2.48.1\n\n`2023-07-14`\n\n### 🐛 BugFix\n\n- **image:** icon not centered without alt or description in error state ([#2563](https://github.com/arco-design/arco-design-vue/pull/2563))\n- **divider:** fix  adaptive height issue with divider ([#2561](https://github.com/arco-design/arco-design-vue/pull/2561))\n- **table:** Fix the wrong outgoing parameter in the `summary-span-method` attribute ([#2552](https://github.com/arco-design/arco-design-vue/pull/2552))\n- **table:** fix the bug of merging cells in subtrees ([#2540](https://github.com/arco-design/arco-design-vue/pull/2540))\n\n\n## 2.48.0\n\n`2023-06-30`\n\n### 🆕 Feature\n\n- **config-provider:** Add `exchangeTime` property ([#2529](https://github.com/arco-design/arco-design-vue/pull/2529))\n- **table:** Added mouse in and out events for cells ([#2489](https://github.com/arco-design/arco-design-vue/pull/2489))\n\n### 🐛 BugFix\n\n- **table:** add headerCell down to adjust column width highlight ([#2519](https://github.com/arco-design/arco-design-vue/pull/2519))\n- **list:** fix virtual-list scrolling position is wrong when data is modified ([#2502](https://github.com/arco-design/arco-design-vue/pull/2502))\n\n\n## 2.47.1\n\n`2023-06-09`\n\n### 🐛 BugFix\n\n- **tree-select:** Fix the problem that the search content under the virtual list cannot be selected ([#2488](https://github.com/arco-design/arco-design-vue/pull/2488))\n- **select:** Fix mouse cursor positioning issue in search mode ([#2487](https://github.com/arco-design/arco-design-vue/pull/2487))\n- **badge:** Fix the problem that components fail when customizing `prefix-cls` ([#2476](https://github.com/arco-design/arco-design-vue/pull/2476))\n\n\n## 2.47.0\n\n`2023-06-02`\n\n### ⚠️ Important Attention\n\n- **modal:** fix modal confirm missing warning icon in the title ([#2465](https://github.com/arco-design/arco-design-vue/pull/2465))\n- **input-number:** `hide-button` also takes effect when `mode=\"button\"` ([#2461](https://github.com/arco-design/arco-design-vue/pull/2461))\n\n### 🆕 Feature\n\n- **empty:** Add `in-config-provider` property ([#2474](https://github.com/arco-design/arco-design-vue/pull/2474))\n- **alert:** add `center` prop ([#2464](https://github.com/arco-design/arco-design-vue/pull/2464))\n- **config-provider:** empty slots add component attribute ([#2448](https://github.com/arco-design/arco-design-vue/pull/2448))\n- **select:** the header and footer are displayed in the empty state of select ([#2429](https://github.com/arco-design/arco-design-vue/pull/2429))\n- **tree-select:** Add header and footer slots ([#2417](https://github.com/arco-design/arco-design-vue/pull/2417))\n- **mention:** Add `prefix` attribute to search event ([#2356](https://github.com/arco-design/arco-design-vue/pull/2356))\n- **spin:** add hideIcon property ([#2303](https://github.com/arco-design/arco-design-vue/pull/2303))\n- **spin:** add tip slot ([#2303](https://github.com/arco-design/arco-design-vue/pull/2303))\n\n### 🐛 BugFix\n\n- **date-picker:** add getDefaultValueFormat to solve v-model for week selector and quarter selector ([#2437](https://github.com/arco-design/arco-design-vue/pull/2437))\n\n\n\n## 2.46.2\n\n`2023-05-31`\n\n### 🐛 BugFix\n\n- **modal:** fix can not set width attribute ([#2467](https://github.com/arco-design/arco-design-vue/pull/2467))\n\n\n## 2.46.1\n\n`2023-05-26`\n\n### 🐛 BugFix\n\n- **date-picker:** fixed arrow display logic for year, month, and quarter modes in the date range picker ([#2451](https://github.com/arco-design/arco-design-vue/pull/2451))\n- **modal:** fix modal drag error when define top prop ([#2446](https://github.com/arco-design/arco-design-vue/pull/2446))\n- **transfer:** fix transfer item can be selected when disabled ([#2445](https://github.com/arco-design/arco-design-vue/pull/2445))\n- **modal:** Fix the problem that there is no full screen when `width` and `fullscreen` are set at the same time ([#2441](https://github.com/arco-design/arco-design-vue/pull/2441))\n\n### 💎 Enhancement\n\n- **table:** Add table right-click and double-click events ([#2452](https://github.com/arco-design/arco-design-vue/pull/2452))\n\n### 🆎 TypeScript\n\n- **modal:** fix onOk & onCancel type error in function call ([#2426](https://github.com/arco-design/arco-design-vue/pull/2426))\n\n\n## 2.46.0\n\n`2023-05-12`\n\n### 🆕 Feature\n\n- **trigger:** add scrollToClose prop ([#2414](https://github.com/arco-design/arco-design-vue/pull/2414))\n- **image:** add actions slot ([#2389](https://github.com/arco-design/arco-design-vue/pull/2389))\n- **cascader:** support full path search ([#2363](https://github.com/arco-design/arco-design-vue/pull/2363))\n\n### 🐛 BugFix\n\n- **table:** Fix the problem that when the dataIndex is in the path format, the sorting and summary column functions do not take effect ([#2413](https://github.com/arco-design/arco-design-vue/pull/2413))\n- **divider:** Fix the problem that margin cannot be set to 0 ([#2390](https://github.com/arco-design/arco-design-vue/pull/2390))\n\n### 💎 Enhancement\n\n- **select:** Add a title hint to the selection box ([#2412](https://github.com/arco-design/arco-design-vue/pull/2412))\n\n### 🆎 TypeScript\n\n- **date-picker:** DatePicker ([#2359](https://github.com/arco-design/arco-design-vue/pull/2359))\n\n\n## 2.45.3\n\n`2023-04-28`\n\n### 🐛 BugFix\n\n- **select:** Fix the problem that the Enter key in the input method state will trigger the selection ([#2378](https://github.com/arco-design/arco-design-vue/pull/2378))\n\n### 💎 Enhancement\n\n- **drawer:** Add onOk & onCancel event parameters ([#2358](https://github.com/arco-design/arco-design-vue/pull/2358))\n\n### 🆎 TypeScript\n\n- **checkbox:** Fix the ts error problem when the `value` attribute uses a boolean value ([#2373](https://github.com/arco-design/arco-design-vue/pull/2373))\n\n\n## 2.45.2\n\n`2023-04-21`\n\n### 🐛 BugFix\n\n- **date-picker:** fix styling problem with panel-only pickers ([#2349](https://github.com/arco-design/arco-design-vue/pull/2349))\n\n### 💅 Style\n\n- **select:** Fix the inconsistent line-height and height of select-view-input ([#2346](https://github.com/arco-design/arco-design-vue/pull/2346))\n\n\n## 2.45.1\n\n`2023-04-14`\n\n### 🐛 BugFix\n\n- **image:** Fix `sizeStyle` failure issue ([#2327](https://github.com/arco-design/arco-design-vue/pull/2327))\n- **cascader:** Fix the abnormal display of search results when the width of the control is short ([#2326](https://github.com/arco-design/arco-design-vue/pull/2326))\n- **tabs:** fixed individual cases where tab slots are not updated ([#2325](https://github.com/arco-design/arco-design-vue/pull/2325))\n\n### 💅 Style\n\n- **table:** Fix the problem of displaying the horizontal scroll bar under the virtual list ([#2337](https://github.com/arco-design/arco-design-vue/pull/2337))\n\n\n## 2.45.0\n\n`2023-04-07`\n\n### 🆕 Feature\n\n- **transfer:** add custom header slots ([#2314](https://github.com/arco-design/arco-design-vue/pull/2314))\n- **date-picker:** Add the abbreviation property to control whether the abbreviation of the month is displayed ([#2264](https://github.com/arco-design/arco-design-vue/pull/2264))\n- **switch:** add text props ([#2223](https://github.com/arco-design/arco-design-vue/pull/2223))\n- **tree:** add data-level and data-key attributes to tree nodes ([#2192](https://github.com/arco-design/arco-design-vue/pull/2192))\n\n### 🐛 BugFix\n\n- **date-picker:** Fix the problem that exchange-time fails when selecting ([#2302](https://github.com/arco-design/arco-design-vue/pull/2302))\n\n\n## 2.44.7\n\n`2023-04-03`\n\n### 🐛 BugFix\n\n- **trigger:** Fix the problem of reporting errors in iframe ([#2300](https://github.com/arco-design/arco-design-vue/pull/2300))\n\n\n## 2.44.6\n\n`2023-03-31`\n\n### 🐛 BugFix\n\n- **list:** Fix an issue that may trigger reach-bottom when scrolling up ([#2295](https://github.com/arco-design/arco-design-vue/pull/2295))\n- **select:** Fix the problem that setting modelValue to undefined is invalid ([#2285](https://github.com/arco-design/arco-design-vue/pull/2285))\n- **transfer:** Fix title ellipsis failure ([#2278](https://github.com/arco-design/arco-design-vue/pull/2278))\n- **upload:** modify parameter transferred in extra-button slot ([#2272](https://github.com/arco-design/arco-design-vue/pull/2272))\n- **time-picker:** Fix the bubbling behavior of the clear event. ([#2271](https://github.com/arco-design/arco-design-vue/pull/2271))\n\n### 💎 Enhancement\n\n- **trigger:** Optimize the problem that the popup position is not accurate in ShadowRoot ([#2273](https://github.com/arco-design/arco-design-vue/pull/2273))\n\n\n## 2.44.3\n\n`2023-03-24`\n\n### 🐛 BugFix\n\n- **date-picker:** Fix bugs with year range selector ([#2270](https://github.com/arco-design/arco-design-vue/pull/2270))\n- The component package adds the `exports` flag to solve the problem of parsing to CommonJS under nuxt3 ([#2270](https://github.com/arco-design/arco-design-vue/pull/2270))\n- **select:** fix blank dropdown caused by dynamic slot options ([#2265](https://github.com/arco-design/arco-design-vue/pull/2265))\n- **select:** Automatic creation of empty string entries is not allowed. Dropdown option with empty string, set value to `undefined` when empty ([#2257](https://github.com/arco-design/arco-design-vue/pull/2257))\n\n### 🆎 TypeScript\n\n- update the buttonProps types of some components ([#2266](https://github.com/arco-design/arco-design-vue/pull/2266))\n\n\n## 2.44.2\n\n`2023-03-17`\n\n### 🐛 BugFix\n\n- **form:** Fix the problem that the array format is not supported in the field attribute ([#2242](https://github.com/arco-design/arco-design-vue/pull/2242))\n- **slider:** Fix the problem of model-value binding error in range mode ([#2241](https://github.com/arco-design/arco-design-vue/pull/2241))\n- **tree:** adjust the emit order of select and update:selectedKeys, check and update:checkedKeys ([#2228](https://github.com/arco-design/arco-design-vue/pull/2228))\n- **divider:** Fix the problem that the dividing line is displayed incorrectly ([#2205](https://github.com/arco-design/arco-design-vue/pull/2205))\n- **list:** list supports backend data pagination ([#2199](https://github.com/arco-design/arco-design-vue/pull/2199))\n- **select:** drop-down option value supports empty string ([#2190](https://github.com/arco-design/arco-design-vue/pull/2190))\n- **input:** fix issue with content modification at maximum value using non-input method ([#2188](https://github.com/arco-design/arco-design-vue/pull/2188))\n\n### 💎 Enhancement\n\n- **form:** Add Chinese inspection information ([#2240](https://github.com/arco-design/arco-design-vue/pull/2240))\n- Added Vietnamese (vi-VN)  languages ([#2219](https://github.com/arco-design/arco-design-vue/pull/2219))\n- Added Khmer(Cambodia) (km-KH) languages ([#2219](https://github.com/arco-design/arco-design-vue/pull/2219))\n\n### 💅 Style\n\n- **calendar:** fix some style problems ([#2239](https://github.com/arco-design/arco-design-vue/pull/2239))\n\n### 🆎 TypeScript\n\n- **upload:** beforeUpload allows to return a boolean value ([#2204](https://github.com/arco-design/arco-design-vue/pull/2204))\n- Fix virtual list ts definition problem ([#2168](https://github.com/arco-design/arco-design-vue/pull/2168))\n\n\n## 2.44.1\n\n`2023-03-10`\n\n### 🐛 BugFix\n\n- **calendar:** fix the wrong import path problem\n\n\n## 2.44.0\n\n`2023-03-10`\n\n### 🆕 Feature\n\n- **calendar:** New calendar component ([#2217](https://github.com/arco-design/arco-design-vue/pull/2217))\n\n\n## 2.43.2\n\n`2023-02-24`\n\n### 🐛 BugFix\n\n- **input-number:** fix display step button in disabled state ([#2169](https://github.com/arco-design/arco-design-vue/pull/2169))\n- **form:** Fix invalidation of validateStatus of FormItem ([#2158](https://github.com/arco-design/arco-design-vue/pull/2158))\n- **checkbox:** Fixed checkbox retaining hover style when deselected ([#2124](https://github.com/arco-design/arco-design-vue/pull/2124))\n\n### 💎 Enhancement\n\n- **modal:** add update method of function call ([#2155](https://github.com/arco-design/arco-design-vue/pull/2155))\n- **drawer:** add update method of function call ([#2155](https://github.com/arco-design/arco-design-vue/pull/2155))\n\n\n## 2.43.1\n\n`2023-02-17`\n\n### 🐛 BugFix\n\n- **date-picker:** Fix the problem that an error is returned because dayjs does not support quarter parsing ([#2110](https://github.com/arco-design/arco-design-vue/pull/2110))\n\n\n## 2.43.0\n\n`2023-02-10`\n\n### 🆕 Feature\n\n- **select:** Added `defaultActiveFirstOption` property ([#2107](https://github.com/arco-design/arco-design-vue/pull/2107))\n- **select:** add header slot ([#2099](https://github.com/arco-design/arco-design-vue/pull/2099))\n- **dropdown:** add hide-on-select props ([#2078](https://github.com/arco-design/arco-design-vue/pull/2078))\n- **date-picker:** Add the `disabled-input` property to disable keyboard input ([#2072](https://github.com/arco-design/arco-design-vue/pull/2072))\n- **drawer:** add `before-open` and `before-close` events ([#2064](https://github.com/arco-design/arco-design-vue/pull/2064))\n- **upload:** Added file list extra button slot `#extra-button` ([#2060](https://github.com/arco-design/arco-design-vue/pull/2060))\n\n### 🐛 BugFix\n\n- **notification:** Fix the problem that the update duration fails ([#2106](https://github.com/arco-design/arco-design-vue/pull/2106))\n- **tabs:** Hide the tab indicator when there are no matching tabs ([#2105](https://github.com/arco-design/arco-design-vue/pull/2105))\n- **menu:** fix the hotreload problem ([#2091](https://github.com/arco-design/arco-design-vue/pull/2091))\n\n### 🆎 TypeScript\n\n- Update the type of `triggerProps` for some components ([#2090](https://github.com/arco-design/arco-design-vue/pull/2090))\n\n\n## 2.42.1\n\n`2023-02-03`\n\n### 🐛 BugFix\n\n- **scrollbar:** fix ts declaration error for emits ([#2077](https://github.com/arco-design/arco-design-vue/pull/2077))\n- **slider:** Optimize the automatic repair of invalid input in the digital input box ([#1952](https://github.com/arco-design/arco-design-vue/pull/1952))\n- **input-number:** fix step-button is not properly disabled or enabled when min or max is changed ([#1777](https://github.com/arco-design/arco-design-vue/pull/1777))\n\n\n## 2.42.0\n\n`2023-01-13`\n\n### 🆕 Feature\n\n- **upload:** Add `showPreviewButton` property ([#2049](https://github.com/arco-design/arco-design-vue/pull/2049))\n- **slider:** add show-tooltip props ([#2037](https://github.com/arco-design/arco-design-vue/pull/2037))\n- **mention:** add focus and blur methods ([#2022](https://github.com/arco-design/arco-design-vue/pull/2022))\n- **date-picker:** Add blur event to support corresponding inspection in the form ([#1958](https://github.com/arco-design/arco-design-vue/pull/1958))\n\n### 🐛 BugFix\n\n- **upload:** Fixed an issue that could cause file deletion errors when uploading ([#2048](https://github.com/arco-design/arco-design-vue/pull/2048))\n- **switch:** Fix the problem that the custom color style is wrong when the type is `line` ([#2044](https://github.com/arco-design/arco-design-vue/pull/2044))\n\n\n## 2.41.1\n\n`2023-01-06`\n\n### 🐛 BugFix\n\n- **tabs:** Fix the problem of scrolling exception under `capsule` type ([#2031](https://github.com/arco-design/arco-design-vue/pull/2031))\n- **table:** Fix the problem that the width error may appear after the browser is zoomed when `scroll` is turned on ([#2028](https://github.com/arco-design/arco-design-vue/pull/2028))\n- Fix the problem that ts cannot recognize custom properties ([#2027](https://github.com/arco-design/arco-design-vue/pull/2027))\n\n### 💎 Enhancement\n\n- **icon:** Optimize the `click` event of the component, and perform encapsulation and transparent transmission in the component ([#2030](https://github.com/arco-design/arco-design-vue/pull/2030))\n\n### 🆎 TypeScript\n\n- **checkbox:** Fix missing type for `value` values ([#2029](https://github.com/arco-design/arco-design-vue/pull/2029))\n\n\n## 2.41.0\n\n`2022-12-30`\n\n### 🆕 Feature\n\n- **upload:** Add `upload` method ([#2010](https://github.com/arco-design/arco-design-vue/pull/2010))\n- **alert:** Add `normal` type ([#2009](https://github.com/arco-design/arco-design-vue/pull/2009))\n- **message:** Add `normal` type ([#2009](https://github.com/arco-design/arco-design-vue/pull/2009))\n- **date-picker:** `date-picker` supports prefix slots ([#1997](https://github.com/arco-design/arco-design-vue/pull/1997))\n- **time-picker:** `time-picker` supports prefix slots ([#1997](https://github.com/arco-design/arco-design-vue/pull/1997))\n- **form:** `form-item` supports tooltip property ([#1991](https://github.com/arco-design/arco-design-vue/pull/1991))\n- **form:** `form-item` supports asteriskPosition property ([#1991](https://github.com/arco-design/arco-design-vue/pull/1991))\n- Add spanish ([#2008](https://github.com/arco-design/arco-design-vue/pull/2008))\n- Added Indonesian, French (France), German (Germany), Korean, Italian (Italy),Malay (Malaysia), Thai language files. ([#2011](https://github.com/arco-design/arco-design-vue/pull/2011))\n\n### 🐛 BugFix\n\n- **mention:** Fix the problem that the Enter key is invalid in textarea mode ([#2013](https://github.com/arco-design/arco-design-vue/pull/2013))\n- **upload:** Fix the bug that the `upload` component judged wrongly when verifying that the uploaded file conforms to the `accept` format in some scenarios. ([#2007](https://github.com/arco-design/arco-design-vue/pull/2007))\n- **typography:** Fixed ellipsis invalidation with parent container setting `white-space: nowrap` ([#1995](https://github.com/arco-design/arco-design-vue/pull/1995))\n- **image:** Fix the bug that the image id may not be collected and cause preview errors ([#1992](https://github.com/arco-design/arco-design-vue/pull/1992))\n- **input:** Fix the problem that the custom calculation character length will not be limited by `max-length` ([#1942](https://github.com/arco-design/arco-design-vue/pull/1942))\n- **checkbox:** Set to empty array if `modevalue` is not an array ([#1940](https://github.com/arco-design/arco-design-vue/pull/1940))\n- **table:** Fix the problem that there is no shadow when only the `operations` column is fixed ([#1938](https://github.com/arco-design/arco-design-vue/pull/1938))\n\n### 💅 Style\n\n- **select:** Unify the suffix icon of `select` component for single selection and multi-selection as `arrow-icon`. ([#2005](https://github.com/arco-design/arco-design-vue/pull/2005))\n\n\n## 2.40.1\n\n`2022-12-23`\n\n### 🐛 BugFix\n\n- **input:** Fix `change` event trigger logic problem ([#1990](https://github.com/arco-design/arco-design-vue/pull/1990))\n- **switch:** Fixed the switch component whose type is line, size is small, and the checked state dot offset is incorrect ([#1975](https://github.com/arco-design/arco-design-vue/pull/1975))\n- **list:** Fix the problem that the scroll bar appears in the grid list mode ([#1970](https://github.com/arco-design/arco-design-vue/pull/1970))\n- **date-picker:** Fix the problem that the panel text display error under internationalization ([#1965](https://github.com/arco-design/arco-design-vue/pull/1965))\n\n### 💅 Style\n\n- **tabs:** Fix the problem that `size` does not take effect under `rounded` and `capsule` types ([#1988](https://github.com/arco-design/arco-design-vue/pull/1988))\n\n\n## 2.40.0\n\n`2022-12-09`\n\n### 🆕 Feature\n\n- **scrollbar:** Add scrollLeft and scrollTop methods ([#1909](https://github.com/arco-design/arco-design-vue/pull/1909))\n- **table:** The change event increases the current data parameter ([#1893](https://github.com/arco-design/arco-design-vue/pull/1893))\n- **avatar:** Add image-url attribute to support the use of image URLs ([#1810](https://github.com/arco-design/arco-design-vue/pull/1810))\n- **auto-complete:** Add focus and blur methods ([#1809](https://github.com/arco-design/arco-design-vue/pull/1809))\n\n### 🐛 BugFix\n\n- **date-picker:** Fix the bug that the `feedback` attribute of the `Form` component does not take effect in the `date-picker` component. ([#1932](https://github.com/arco-design/arco-design-vue/pull/1932))\n- **list:** Fix the problem that the scrollbar attribute fails when passing the virtual scrollbar attribute ([#1929](https://github.com/arco-design/arco-design-vue/pull/1929))\n- **form:** Fix the bug that `validate-status` attribute of `Form` component does not take effect in `date-picker` component. ([#1928](https://github.com/arco-design/arco-design-vue/pull/1928))\n\n\n## 2.39.2\n\n`2022-12-02`\n\n### 🐛 BugFix\n\n- **table:** Fix the problem that thead will have a vertical scroll bar in some cases ([#1913](https://github.com/arco-design/arco-design-vue/pull/1913))\n- **input:** Fix change event triggering issue and clear clearing issue ([#1912](https://github.com/arco-design/arco-design-vue/pull/1912))\n- **divider:** Fix the problem that the style is wrong when setting size ([#1905](https://github.com/arco-design/arco-design-vue/pull/1905))\n- **carousel:** Fix the problem that the transparent background image of `Carousel` cannot cover the previous image ([#1901](https://github.com/arco-design/arco-design-vue/pull/1901))\n\n\n## 2.39.1\n\n`2022-11-25`\n\n### 🐛 BugFix\n\n- Fix the problem that the Japanese language pack does not display certain properties ([#1890](https://github.com/arco-design/arco-design-vue/pull/1890))\n- **pagination:** Fix the problem that the page number may exceed the number of pages when the pages become smaller ([#1879](https://github.com/arco-design/arco-design-vue/pull/1879))\n\n### 🆎 TypeScript\n\n- **tree-select:** update the type of trigger-props ([#1885](https://github.com/arco-design/arco-design-vue/pull/1885))\n\n\n## 2.39.0\n\n`2022-11-18`\n\n### 🆕 Feature\n\n- **transfer:** Added panel slot to allow custom content ([#1873](https://github.com/arco-design/arco-design-vue/pull/1873))\n- **transfer:** internally replaced with a virtual scrollbar ([#1873](https://github.com/arco-design/arco-design-vue/pull/1873))\n- **tree-select:** Replace the virtual scrollbar component and add the scrollbar property ([#1872](https://github.com/arco-design/arco-design-vue/pull/1872))\n- **transfer:** can hide select all checkbox ([#1845](https://github.com/arco-design/arco-design-vue/pull/1845))\n- **message:** Add `resetOnHover` property to pause and restart timing when the mouse moves in ([#1841](https://github.com/arco-design/arco-design-vue/pull/1841))\n\n### 🐛 BugFix\n\n- **space:** fix split margin ([#1864](https://github.com/arco-design/arco-design-vue/pull/1864))\n- **switch:** Fix value of hook before state change ([#1859](https://github.com/arco-design/arco-design-vue/pull/1859))\n- **switch:** Fix style token issue ([#1859](https://github.com/arco-design/arco-design-vue/pull/1859))\n- **date-picker:** year range can't skip by 10 year ([#1847](https://github.com/arco-design/arco-design-vue/pull/1847))\n\n### 💎 Enhancement\n\n- **upload:** add some common file type ([#1857](https://github.com/arco-design/arco-design-vue/pull/1857))\n\n\n## 2.38.3\n\n`2022-11-11`\n\n### 🐛 BugFix\n\n- **table:** Fixed an issue where a warning would appear when customizing table elements in some scenarios\n\n\n## 2.38.2\n\n`2022-11-09`\n\n### 🐛 BugFix\n\n- **table:** Fix row selector state error ([#1849](https://github.com/arco-design/arco-design-vue/pull/1849))\n\n\n## 2.38.1\n\n`2022-11-04`\n\n### 🐛 BugFix\n\n- **input-tag:** Fixed delete key deleting unavailable options ([#1836](https://github.com/arco-design/arco-design-vue/pull/1836))\n- Fixed some issues with virtual lists ([#1834](https://github.com/arco-design/arco-design-vue/pull/1834))\n- **slider:** fix the slider show wrong position when set min value ([#1826](https://github.com/arco-design/arco-design-vue/pull/1826))\n- **pagination:** Fix jumper prompt warning problem ([#1822](https://github.com/arco-design/arco-design-vue/pull/1822))\n- **input:** Fix the problem of component cursor reporting error in some scenarios ([#1820](https://github.com/arco-design/arco-design-vue/pull/1820))\n- **date-picker:** Fix internal property error issue ([#1818](https://github.com/arco-design/arco-design-vue/pull/1818))\n- **radio:** Fix `radio-group` state not reset when resetting value ([#1813](https://github.com/arco-design/arco-design-vue/pull/1813))\n- **table:** fix param when rowClass as function ([#1812](https://github.com/arco-design/arco-design-vue/pull/1812))\n\n### 💎 Enhancement\n\n- **icon:** Replace the flying book icon ([#1835](https://github.com/arco-design/arco-design-vue/pull/1835))\n\n\n## 2.38.0\n\n`2022-10-28`\n\n### 🆕 Feature\n\n- **space:** add `split` slot ([#1774](https://github.com/arco-design/arco-design-vue/pull/1774))\n\n### 🐛 BugFix\n\n- **select:** Fix formatLabel error when there is no data ([#1797](https://github.com/arco-design/arco-design-vue/pull/1797))\n- **modal:** Fix the problem that z-index does not take effect when custom style ([#1796](https://github.com/arco-design/arco-design-vue/pull/1796))\n- **radio:** Fix the problem that the state is not cleared when clearing model-value ([#1794](https://github.com/arco-design/arco-design-vue/pull/1794))\n- **checkbox:** Fix the problem that the state is not cleared when clearing model-value ([#1794](https://github.com/arco-design/arco-design-vue/pull/1794))\n- **form:** Do not modify the original object data of the rule ([#1779](https://github.com/arco-design/arco-design-vue/pull/1779))\n- **modal:** Fix the problem that closing does not unload internal components in function calls ([#1778](https://github.com/arco-design/arco-design-vue/pull/1778))\n- **drawer:** Fix the problem that closing does not unload internal components in function calls ([#1778](https://github.com/arco-design/arco-design-vue/pull/1778))\n\n### 💅 Style\n\n- **table:** Fix stripe style issue in dark mode ([#1795](https://github.com/arco-design/arco-design-vue/pull/1795))\n\n### 🆎 TypeScript\n\n- Add instance type export ([#1782](https://github.com/arco-design/arco-design-vue/pull/1782))\n\n\n## 2.38.0-beta.2\n\n`2022-10-21`\n\n### 🐛 BugFix\n\n- **date-picker:** Fix the problem of disabled style error under safari ([#1770](https://github.com/arco-design/arco-design-vue/pull/1770))\n- **trigger:** Fix the problem of wrong arrow positioning in windows ([#1480](https://github.com/arco-design/arco-design-vue/pull/1480))\n- **modal:** Fixed the problem that the unloading of incoming subcomponents would not be triggered under the function call\n\n### 💎 Enhancement\n\n- **cascader:** When the submenus are all disabled when optimizing multi-selection, the parent prohibits the selection ([#1771](https://github.com/arco-design/arco-design-vue/pull/1771))\n- **progress:** Optimize the display logic of split points ([#1755](https://github.com/arco-design/arco-design-vue/pull/1755))\n- **pagination:** Optimize number processing when entering page numbers ([#1750](https://github.com/arco-design/arco-design-vue/pull/1750))\n\n\n## 2.38.0-beta.1\n\n`2022-10-14`\n\n### 🆕 Feature\n\n- The table, select, and list components have added the scrollbar attribute to support switching virtual scroll bars ([#1747](https://github.com/arco-design/arco-design-vue/pull/1747))\n- **notification:** notification and  notification listspace style adjustment ([#1676](https://github.com/arco-design/arco-design-vue/pull/1676))\n- **notification:** `showIcon` not working ([#1676](https://github.com/arco-design/arco-design-vue/pull/1676))\n- **notification:** support custom close icon & close element ([#1676](https://github.com/arco-design/arco-design-vue/pull/1676))\n- **notification:** support custom style ([#1676](https://github.com/arco-design/arco-design-vue/pull/1676))\n- **notification:** temove the notification corresponding to `id` ([#1676](https://github.com/arco-design/arco-design-vue/pull/1676))\n- **notification:** demo ([#1676](https://github.com/arco-design/arco-design-vue/pull/1676))\n- **descriptions:** The `layout-fixed` of the table style in the description. The width will be evenly distributed when it's set to `fixed`. ([#1670](https://github.com/arco-design/arco-design-vue/pull/1670))\n\n### 🐛 BugFix\n\n- **transfer:** Fix can't scroll problem ([#1723](https://github.com/arco-design/arco-design-vue/pull/1723))\n- **spin:** Fix the problem that size is invalid ([#1717](https://github.com/arco-design/arco-design-vue/pull/1717))\n\n### 💎 Enhancement\n\n- **select:** Increase the cache of selected items, and optimize the label display problem during remote search ([#1731](https://github.com/arco-design/arco-design-vue/pull/1731))\n- **modal:** Functional calls can set the renderToBody parameter ([#1682](https://github.com/arco-design/arco-design-vue/pull/1682))\n\n### 💅 Style\n\n- **table:** Fixed the problem that summary row height was compressed when both summary row and scroll were enabled in the table ([#1733](https://github.com/arco-design/arco-design-vue/pull/1733))\n\n### 🆎 TypeScript\n\n- **collapse:** Fix key attribute definition of `collapse-item` to allow number ([#1743](https://github.com/arco-design/arco-design-vue/pull/1743))\n\n\n## 2.37.4\n\n`2022-09-30`\n\n### 🐛 BugFix\n\n- **table:** Fix default sorter&filters not working under template usage ([#1707](https://github.com/arco-design/arco-design-vue/pull/1707))\n- fix popup stack ([#1659](https://github.com/arco-design/arco-design-vue/pull/1659))\n\n### 💎 Enhancement\n\n- **button:** Use the flex layout method to solve the centering problem when the icon size is inconsistent ([#1702](https://github.com/arco-design/arco-design-vue/pull/1702))\n- **link:** Use the flex layout method to solve the centering problem when the icon size is inconsistent ([#1702](https://github.com/arco-design/arco-design-vue/pull/1702))\n- **modal:** fix modal close problem ([#1696](https://github.com/arco-design/arco-design-vue/pull/1696))\n- **drawer:** fix drawer close problem ([#1696](https://github.com/arco-design/arco-design-vue/pull/1696))\n\n### 💅 Style\n\n- **tabs:** Fix the problem that the content of the label under the `card` type is not centered ([#1704](https://github.com/arco-design/arco-design-vue/pull/1704))\n- **select:** Fix the problem that the custom label color is displayed incorrectly ([#1703](https://github.com/arco-design/arco-design-vue/pull/1703))\n- **collapse:** adjust the padding of collapse-item-content when expand-icon is on the right ([#1680](https://github.com/arco-design/arco-design-vue/pull/1680))\n\n\n## 2.37.3\n\n`2022-09-23`\n\n### 🐛 BugFix\n\n- **table:** Fix the problem that the tooltip does not display after the content changes ([#1662](https://github.com/arco-design/arco-design-vue/pull/1662))\n\n### 💎 Enhancement\n\n- **empty:** Optimize the custom display priority, the image slot is higher than the global empty slot ([#1673](https://github.com/arco-design/arco-design-vue/pull/1673))\n- **input:** It is no longer possible to input content from the middle when optimizing the max limit ([#1672](https://github.com/arco-design/arco-design-vue/pull/1672))\n- **image:** do not display toolbar when actions layout is empty ([#1668](https://github.com/arco-design/arco-design-vue/pull/1668))\n- **overflow-list:** overflow quantity changes event ([#1287](https://github.com/arco-design/arco-design-vue/pull/1287))\n\n### 🆎 TypeScript\n\n- **table:** fix TableRowSelection type definition ([#1667](https://github.com/arco-design/arco-design-vue/pull/1667))\n- **icon:** Add Icon related type declaration ([#1619](https://github.com/arco-design/arco-design-vue/pull/1619))\n\n\n## 2.37.2\n\n`2022-09-21`\n\n### 🐛 BugFix\n\n- **list:** Fix loading more scrollbar heights in use ([#1658](https://github.com/arco-design/arco-design-vue/pull/1658))\n- Fix the problem that the component with built-in virtual scrollbar loses its style when it is loaded on demand ([#1655](https://github.com/arco-design/arco-design-vue/pull/1655))\n- **scrollbar:** Fix styling issues in Firefox ([#1655](https://github.com/arco-design/arco-design-vue/pull/1655))\n- **table:** Fixed the virtual scroll bar style error caused by maxHeight in the scroll property ([#1655](https://github.com/arco-design/arco-design-vue/pull/1655))\n- **select:** Fixed the problem that the drop-down menu did not follow the scrolling in keyboard interaction ([#1655](https://github.com/arco-design/arco-design-vue/pull/1655))\n- **select:** Fix the problem of error reporting in some cases of built-in virtual scroll bar ([#1655](https://github.com/arco-design/arco-design-vue/pull/1655))\n\n### 💎 Enhancement\n\n- The return value of the component's onBeforeOk property `Promise<void>` and the `done()` method default behavior adjusted to success ([#1650](https://github.com/arco-design/arco-design-vue/pull/1650))\n\n\n## 2.37.1\n\n`2022-09-16`\n\n### 🆕 Feature\n\n- **overflow-list:** Added `OverflowList` component ([#1634](https://github.com/arco-design/arco-design-vue/pull/1634))\n- **scrollbar:** Add virtual scrollbar component ([#1634](https://github.com/arco-design/arco-design-vue/pull/1634))\n- **scrollbar:** Table, select, list components replace virtual scroll bars ([#1634](https://github.com/arco-design/arco-design-vue/pull/1634))\n\n\n## 2.37.0\n\n`2022-09-16`\n\n### 🆕 Feature\n\n- **typography:** Omit mode adds support for CSS mode (experimental) ([#1635](https://github.com/arco-design/arco-design-vue/pull/1635))\n- **switch:** support `beforeChange` intercept change event ([#1626](https://github.com/arco-design/arco-design-vue/pull/1626))\n- **link:** add loading prop ([#1616](https://github.com/arco-design/arco-design-vue/pull/1616))\n\n### 💎 Enhancement\n\n- **list:** support responsive grid props ([#1625](https://github.com/arco-design/arco-design-vue/pull/1625))\n\n\n## 2.36.1\n\n`2022-09-09`\n\n### 🐛 BugFix\n\n- **select:** Fix option slot parameter problem ([#1607](https://github.com/arco-design/arco-design-vue/pull/1607))\n\n### 💎 Enhancement\n\n- **modal:** The on-before-ok property supports function returning a Promise ([#1623](https://github.com/arco-design/arco-design-vue/pull/1623))\n- **drawer:** The on-before-ok property supports function returning a Promise ([#1623](https://github.com/arco-design/arco-design-vue/pull/1623))\n- **popconfirm:** The on-before-ok property supports function returning a Promise ([#1623](https://github.com/arco-design/arco-design-vue/pull/1623))\n- **dropdown:** Don't fire click event when option is disabled ([#1611](https://github.com/arco-design/arco-design-vue/pull/1611))\n\n### 🆎 TypeScript\n\n- Added `virtual-list` interface and usage instructions ([#1614](https://github.com/arco-design/arco-design-vue/pull/1614))\n\n\n## 2.36.0\n\n`2022-09-02`\n\n### 🆕 Feature\n\n- **image:** hideFooter adds a new parameter to support the display of footer in an error state ([#1595](https://github.com/arco-design/arco-design-vue/pull/1595))\n- **breadcrumb:** Add customUrl property ([#1594](https://github.com/arco-design/arco-design-vue/pull/1594))\n- **table:** Add custom class name related prop ([#1580](https://github.com/arco-design/arco-design-vue/pull/1580))\n- Add `zh-TW` support ([#1551](https://github.com/arco-design/arco-design-vue/pull/1551))\n- Add `pt-PT` support ([#1551](https://github.com/arco-design/arco-design-vue/pull/1551))\n- **alert:** suport custom close element ([#1544](https://github.com/arco-design/arco-design-vue/pull/1544))\n- **checkbox:** Add max prop, support setting the maximum number of items that can be checked ([#1540](https://github.com/arco-design/arco-design-vue/pull/1540))\n- **image:** Add fit prop ([#1534](https://github.com/arco-design/arco-design-vue/pull/1534))\n- **breadcrumb:** suport separator prop ([#1500](https://github.com/arco-design/arco-design-vue/pull/1500))\n- **breadcrumb:** suport routes prop ([#1500](https://github.com/arco-design/arco-design-vue/pull/1500))\n- **breadcrumb:** suport more-icon slot ([#1500](https://github.com/arco-design/arco-design-vue/pull/1500))\n- **breadcrumb:** suport droplist prop  and slot ([#1500](https://github.com/arco-design/arco-design-vue/pull/1500))\n- **page-header:** support custom back icon ([#1499](https://github.com/arco-design/arco-design-vue/pull/1499))\n\n### 💎 Enhancement\n\n- **table:** type of extension key ([#1580](https://github.com/arco-design/arco-design-vue/pull/1580))\n- **input:** Modify password input box icon ([#1436](https://github.com/arco-design/arco-design-vue/pull/1436))\n\n### 🆎 TypeScript\n\n- Added export of types in dropdown and breadcrumb components ([#1594](https://github.com/arco-design/arco-design-vue/pull/1594))\n- **layout:** Add ts type export ([#1571](https://github.com/arco-design/arco-design-vue/pull/1571))\n\n\n## 2.35.3\n\n`2022-08-31`\n\n### 🐛 BugFix\n\n- Fixed the problem that the new properties of the icon class component did not take effect\n\n\n## 2.35.2\n\n`2022-08-29`\n\n### 🐛 BugFix\n\n- **date-picker:** Fixed the click selection event exception when selecting the year and month of the selection panel in some modes ([#1562](https://github.com/arco-design/arco-design-vue/pull/1562))\n\n### 💎 Enhancement\n\n- **date-picker:** Optimized range selector also corrects order when selecting ([#1578](https://github.com/arco-design/arco-design-vue/pull/1578))\n- Adjust the matchMedia method inside the component library to be compatible with Safari 13 ([#1576](https://github.com/arco-design/arco-design-vue/pull/1576))\n\n### 💅 Style\n\n- **pagination:** Fix the problem that the display content is compressed ([#1579](https://github.com/arco-design/arco-design-vue/pull/1579))\n- **image:** Fix the problem that the close button icon is in the wrong position in preview mode ([#1577](https://github.com/arco-design/arco-design-vue/pull/1577))\n\n\n## 2.35.1\n\n`2022-08-19`\n\n### 🐛 BugFix\n\n- **spin:** Fix the spin problem caused by the increase of the z-index of fixed-column ([#1533](https://github.com/arco-design/arco-design-vue/pull/1533))\n- **time-picker:** Fix default value of size property in time-picker ([#1513](https://github.com/arco-design/arco-design-vue/pull/1513))\n\n### 💎 Enhancement\n\n- **trigger:** Optimize the use of KeepAlive, close the pop-up layer when caching ([#1529](https://github.com/arco-design/arco-design-vue/pull/1529))\n- **button:** Default event is not triggered on click when state is loading or disabled ([#1516](https://github.com/arco-design/arco-design-vue/pull/1516))\n\n\n## 2.35.0\n\n`2022-08-12`\n\n### 🆕 Feature\n\n- **icon:** support rotate prop ([#1490](https://github.com/arco-design/arco-design-vue/pull/1490))\n- **icon:** Icon list supports type filtering and name search ([#1490](https://github.com/arco-design/arco-design-vue/pull/1490))\n- **divider:** support split line width and style ([#1473](https://github.com/arco-design/arco-design-vue/pull/1473))\n- **divider:** support split line margin ([#1473](https://github.com/arco-design/arco-design-vue/pull/1473))\n- **date-picker:** `DatePicker` add range picker header label click and normal picker month header label click ([#1421](https://github.com/arco-design/arco-design-vue/pull/1421))\n\n### 💅 Style\n\n- **table:** adjust zIndex of a fixed col ([#1479](https://github.com/arco-design/arco-design-vue/pull/1479))\n\n\n## 2.34.1\n\n`2022-08-05`\n\n### 🐛 BugFix\n\n- **upload:** fix the problem of `accept=*` does not work ([#1488](https://github.com/arco-design/arco-design-vue/pull/1488))\n- **menu:** Fixed an issue where the popup attribute caused warnings in newer versions of Chrome ([#1487](https://github.com/arco-design/arco-design-vue/pull/1487))\n\n### 💎 Enhancement\n\n- Refactor the virtual list component to fix functional issues ([#1444](https://github.com/arco-design/arco-design-vue/pull/1444))\n\n### 💅 Style\n\n- **cascader:** Fix style issue when dropdown panel is empty ([#1483](https://github.com/arco-design/arco-design-vue/pull/1483))\n\n\n## 2.34.0\n\n`2022-07-29`\n\n### 🆕 Feature\n\n- **tree:** Add node status to slot ([#1469](https://github.com/arco-design/arco-design-vue/pull/1469))\n- **pagination:** Add autoAdjust property ([#1466](https://github.com/arco-design/arco-design-vue/pull/1466))\n- **tabs:** Add trigger property to support changing switching mode ([#1456](https://github.com/arco-design/arco-design-vue/pull/1456))\n- **auto-complete:** add `footer` slot ([#1445](https://github.com/arco-design/arco-design-vue/pull/1445))\n- **dropdown:** add new prop for icon slot: `popup-visible` ([#1430](https://github.com/arco-design/arco-design-vue/pull/1430))\n- **drawer:** add function call ([#1409](https://github.com/arco-design/arco-design-vue/pull/1409))\n\n### 🐛 BugFix\n\n- **timeline:** Fixed an issue where the timeline was incorrectly calculated when using v-if ([#1467](https://github.com/arco-design/arco-design-vue/pull/1467))\n\n### 💎 Enhancement\n\n- **table:** columns support reactive type updates ([#1470](https://github.com/arco-design/arco-design-vue/pull/1470))\n- **table:** rowClass supports values of function types ([#1453](https://github.com/arco-design/arco-design-vue/pull/1453))\n- **transfer:** item slot adds value attribute ([#1447](https://github.com/arco-design/arco-design-vue/pull/1447))\n- **modal:** support hide footer in function call ([#1410](https://github.com/arco-design/arco-design-vue/pull/1410))\n- **input-number:** Support `read-only` prop ([#1408](https://github.com/arco-design/arco-design-vue/pull/1408))\n\n\n## 2.33.1\n\n`2022-07-22`\n\n### 🐛 BugFix\n\n- **input-tag:** Fix the problem that the value parameter in the remove event is wrong after setting max-tag-count ([#1442](https://github.com/arco-design/arco-design-vue/pull/1442))\n- **cascader:** Fixed the wrong position of the horizontal scroll bar of the search drop-down menu ([#1438](https://github.com/arco-design/arco-design-vue/pull/1438))\n- **cascader:** Fix the problem that the cursor cannot be used after inputting content in search mode ([#1438](https://github.com/arco-design/arco-design-vue/pull/1438))\n- **form:** Fix form-item content may exceed limit width ([#1437](https://github.com/arco-design/arco-design-vue/pull/1437))\n- **modal:** Fix the problem that the default title class name is wrong ([#1413](https://github.com/arco-design/arco-design-vue/pull/1413))\n- **typography:** cancel click propagation of suffix icon ([#1411](https://github.com/arco-design/arco-design-vue/pull/1411))\n\n### 💎 Enhancement\n\n- **table:** Selected rows can be displayed when selected-keys are set individually ([#1440](https://github.com/arco-design/arco-design-vue/pull/1440))\n\n\n## 2.33.0\n\n`2022-07-08`\n\n### 🆕 Feature\n\n- **drawer:** add header prop and slot ([#1399](https://github.com/arco-design/arco-design-vue/pull/1399))\n- **collapse:** Supports custom expand icon ([#1344](https://github.com/arco-design/arco-design-vue/pull/1344))\n- **tag:** support `bordered`  show border ([#1342](https://github.com/arco-design/arco-design-vue/pull/1342))\n\n### 🐛 BugFix\n\n- **date-picker:** Fixed an issue where dropdown menus and clear options could still be opened in readonly mode ([#1400](https://github.com/arco-design/arco-design-vue/pull/1400))\n- **upload:** Fixed usage issues in Alibaba Cloud OSS ([#1397](https://github.com/arco-design/arco-design-vue/pull/1397))\n- **tree:** Fix the problem of filtering data for processing in the subtree expansion animation ([#1397](https://github.com/arco-design/arco-design-vue/pull/1397))\n- **tree:** Fix the problem of setting defaultExpandSelected invalid ([#1362](https://github.com/arco-design/arco-design-vue/pull/1362))\n\n### 💅 Style\n\n- **tabs:** Fix the problem of wrong style when focusing ([#1398](https://github.com/arco-design/arco-design-vue/pull/1398))\n- **modal:** Fix the problem that the footer button is not centered ([#1391](https://github.com/arco-design/arco-design-vue/pull/1391))\n- **upload:** Remove trailing space of upload-list-item ([#1379](https://github.com/arco-design/arco-design-vue/pull/1379))\n\n\n## 2.32.1\n\n`2022-07-01`\n\n### 🐛 BugFix\n\n- **table:** Fixed the problem that the text prompt did not follow the content update ([#1373](https://github.com/arco-design/arco-design-vue/pull/1373))\n- **select:** Fixed click-to-expand issue in search mode in Firefox ([#1371](https://github.com/arco-design/arco-design-vue/pull/1371))\n- **tree-select:** Fix the problem of selected value in case of modelValue is 0 ([#1370](https://github.com/arco-design/arco-design-vue/pull/1370))\n- **input-number:** Fix the problem that '0' will be omitted after setting precision ([#1368](https://github.com/arco-design/arco-design-vue/pull/1368))\n\n### 💅 Style\n\n- **popconfirm:** Fix the problem that the icons under different types are black by default ([#1366](https://github.com/arco-design/arco-design-vue/pull/1366))\n\n\n## 2.32.0\n\n`2022-06-24`\n\n### 🆕 Feature\n\n- **typography:** Added `tooltip-props` class property ([#1338](https://github.com/arco-design/arco-design-vue/pull/1338))\n- **table:** TableRowSelection adds the onlyCurrent property to change the default state of the table to maintain the selection state of all paging ([#1334](https://github.com/arco-design/arco-design-vue/pull/1334))\n- **statistic:** support custom value style prop ([#1320](https://github.com/arco-design/arco-design-vue/pull/1320))\n\n### 🐛 BugFix\n\n- **modal:** Fixed the problem that when the modal box exceeds the size of the screen, the position of the modal will be misaligned ([#1336](https://github.com/arco-design/arco-design-vue/pull/1336))\n- **input-tag:** Fix the problem of Chinese input method reporting an error ([#1335](https://github.com/arco-design/arco-design-vue/pull/1335))\n- **tree:** check on the node in the half-selected state have a wrong result ([#1331](https://github.com/arco-design/arco-design-vue/pull/1331))\n- **input-number:** fix clear error outside of form ([#1329](https://github.com/arco-design/arco-design-vue/pull/1329))\n\n### 💎 Enhancement\n\n- **trigger:** Events can no longer be fired during popover animations ([#1337](https://github.com/arco-design/arco-design-vue/pull/1337))\n- **table:** The style added by the cellStyle class attribute is moved to the td element to solve the background color problem in some scenes ([#1334](https://github.com/arco-design/arco-design-vue/pull/1334))\n\n### 💅 Style\n\n- **tag:** Firefox overflow style compatibility ([#1317](https://github.com/arco-design/arco-design-vue/pull/1317))\n\n\n## 2.31.0\n\n`2022-06-17`\n\n### 🆕 Feature\n\n- **form:** Added parameter support for resetFields and clearValidate methods ([#1305](https://github.com/arco-design/arco-design-vue/pull/1305))\n- **table:** Add new component methods, see the documentation for details ([#1304](https://github.com/arco-design/arco-design-vue/pull/1304))\n- **table:** The slot defined by titleSlotName adds the column parameter ([#1304](https://github.com/arco-design/arco-design-vue/pull/1304))\n- **modal:** Add bodyClass and bodyStyle ([#1303](https://github.com/arco-design/arco-design-vue/pull/1303))\n\n### 🐛 BugFix\n\n- fixed the problem that Virtual list `ScrollIntoView` has an wrong result ([#1301](https://github.com/arco-design/arco-design-vue/pull/1301))\n- **menu:** the horizontal menu cannot be expanded after being collapsed ([#1297](https://github.com/arco-design/arco-design-vue/pull/1297))\n\n\n## 2.30.2\n\n`2022-06-11`\n\n### 🐛 BugFix\n\n- **table:** Fix the problem that the header is centered when align='left' ([#1278](https://github.com/arco-design/arco-design-vue/pull/1278))\n\n### 💎 Enhancement\n\n- **table:** Indent no longer shows when there is no expand button ([#1278](https://github.com/arco-design/arco-design-vue/pull/1278))\n\n\n## 2.30.1\n\n`2022-06-10`\n\n### 💅 Style\n\n- **space:** Items that use flex layout only in landscape mode ([#1277](https://github.com/arco-design/arco-design-vue/pull/1277))\n\n\n## 2.30.0\n\n`2022-06-10`\n\n### ⚠️ Important Attention\n\n- **table:** Due to functional requirements, `arco-table-cell` has been changed to flex layout, and the `arco-table-td-content` wrapper layer has been added outside the table content. If you have custom styles, please pay attention to the changes in the DOM structure ([#1248](https://github.com/arco-design/arco-design-vue/pull/1248))\n\n### 🆕 Feature\n\n- **table:** Added `sticky-header` header ceiling function ([#1248](https://github.com/arco-design/arco-design-vue/pull/1248))\n- **table:** Added `summaryCellStyle` property to table column configuration ([#1248](https://github.com/arco-design/arco-design-vue/pull/1248))\n\n### 🐛 BugFix\n\n- **select:** Fixed remote search and fieldNames used at the same time, no options displayed ([#1271](https://github.com/arco-design/arco-design-vue/pull/1271))\n- **input:** Fix the problem that form validation will not be triggered after input method ([#1263](https://github.com/arco-design/arco-design-vue/pull/1263))\n- **input:** Fixed height issue when using front and back labels in Drawer ([#1263](https://github.com/arco-design/arco-design-vue/pull/1263))\n- **modal:** Reset overflow setting on component unmount ([#1262](https://github.com/arco-design/arco-design-vue/pull/1262))\n- **table:** Fixed the problem of incorrect text omission in tree data ([#1248](https://github.com/arco-design/arco-design-vue/pull/1248))\n- **table:** Fix the problem of using grouped headers and fixed columns at the same time ([#1248](https://github.com/arco-design/arco-design-vue/pull/1248))\n\n### 💎 Enhancement\n\n- **tabs:** Add focus styles and keyboard events ([#1264](https://github.com/arco-design/arco-design-vue/pull/1264))\n- **table:** Supports the simultaneous use of virtual lists and fixed columns ([#1248](https://github.com/arco-design/arco-design-vue/pull/1248))\n\n### 💅 Style\n\n- **select:** Fixed the issue that the selection box collapsed when the option label was empty ([#1274](https://github.com/arco-design/arco-design-vue/pull/1274))\n- **space:** space-item is modified to flex layout to solve the problem of vertical centering of inline elements ([#1273](https://github.com/arco-design/arco-design-vue/pull/1273))\n- **table:** Fix horizontal scroll shadow issue ([#1248](https://github.com/arco-design/arco-design-vue/pull/1248))\n\n\n## 2.29.1\n\n`2022-06-02`\n\n### 🐛 BugFix\n\n- **list:** Fixed an issue where reachBottom would not trigger in some cases ([#1228](https://github.com/arco-design/arco-design-vue/pull/1228))\n- **mention:** Fix missing textarea styles when loading on demand ([#1227](https://github.com/arco-design/arco-design-vue/pull/1227))\n- **space:** Fix the problem that the child component uses the key to fail ([#1223](https://github.com/arco-design/arco-design-vue/pull/1223))\n\n### 💎 Enhancement\n\n- Virtual lists reduce unnecessary height calculations and prevent jitter ([#1233](https://github.com/arco-design/arco-design-vue/pull/1233))\n- **tree-select:** When the component is out of focus in search mode, the input value will be cleared by default ([#1232](https://github.com/arco-design/arco-design-vue/pull/1232))\n- **input-tag:** When out of focus, the input value will be cleared by default ([#1232](https://github.com/arco-design/arco-design-vue/pull/1232))\n- **trigger:** No longer blocks right-click default events by default ([#1231](https://github.com/arco-design/arco-design-vue/pull/1231))\n- **cascader:** cascader-panel adds keyboard events ([#1230](https://github.com/arco-design/arco-design-vue/pull/1230))\n- **cascader:** Fix the problem that the value of the number type fails to match ([#1230](https://github.com/arco-design/arco-design-vue/pull/1230))\n- **button:** Add focus style ([#1229](https://github.com/arco-design/arco-design-vue/pull/1229))\n- **input-number:** Add keyboard event, show step button when focused ([#1224](https://github.com/arco-design/arco-design-vue/pull/1224))\n\n\n## 2.29.0\n\n`2022-05-27`\n\n### ⚠️ Important Attention\n\n- **cascader:** Exposed parameter changed from CascaderOptionInfo to CascaderOption. Internal data is no longer included, user data is not affected ([#1201](https://github.com/arco-design/arco-design-vue/pull/1201))\n\n### 🆕 Feature\n\n- **tree-select:** Default support to delete selected options by tag ([#1206](https://github.com/arco-design/arco-design-vue/pull/1206))\n- **dropdown:** Added `popup-max-height` property ([#1203](https://github.com/arco-design/arco-design-vue/pull/1203))\n- **dropdown:** Added icon slot to submenu ([#1203](https://github.com/arco-design/arco-design-vue/pull/1203))\n- **table:** Line selectors add non-strict mode support (cascading control) ([#1202](https://github.com/arco-design/arco-design-vue/pull/1202))\n- **table:** Column properties add headerCellStyle and bodyCellStyle ([#1202](https://github.com/arco-design/arco-design-vue/pull/1202))\n- **cascader:** Option value supports object format, add `value-key` attribute ([#1201](https://github.com/arco-design/arco-design-vue/pull/1201))\n- **cascader:** Add the `fallback` attribute to customize the display of options that do not exist ([#1201](https://github.com/arco-design/arco-design-vue/pull/1201))\n- **cascader:** Add the `expand-child` property to expand the submenu ([#1201](https://github.com/arco-design/arco-design-vue/pull/1201))\n- **date-picker:** Added property `show-confirm-btn` to customize whether to show the confirmation button ([#1198](https://github.com/arco-design/arco-design-vue/pull/1198))\n\n### 🐛 BugFix\n\n- **tree-select:** fixed the problem that drag and drop fails after setting fieldNames ([#1207](https://github.com/arco-design/arco-design-vue/pull/1207))\n- **mention:** Fixed the cursor movement problem after typing in textarea mode ([#1204](https://github.com/arco-design/arco-design-vue/pull/1204))\n- **input-number:** Fixed the issue that clear did not trigger form validation ([#1204](https://github.com/arco-design/arco-design-vue/pull/1204))\n- **select:** Fix the problem of controlled invalidation of inputValue ([#1204](https://github.com/arco-design/arco-design-vue/pull/1204))\n\n### 💎 Enhancement\n\n- **cascader:** Optimize submenu expansion logic and keyboard events ([#1201](https://github.com/arco-design/arco-design-vue/pull/1201))\n- **date-picker:** only update the date when splicing the time ([#1199](https://github.com/arco-design/arco-design-vue/pull/1199))\n- Component adds accessibility ARIA attributes ([#1196](https://github.com/arco-design/arco-design-vue/pull/1196))\n\n\n## 2.28.0\n\n`2022-05-20`\n\n### ⚠️ Important Attention\n\n- This version has corrected the component event type, TS warning may appear, and the type can be corrected according to the prompt information\n\n### 🆕 Feature\n\n- **config-provider:** Added `empty` and `loading` slots ([#1180](https://github.com/arco-design/arco-design-vue/pull/1180))\n- **statistic:** Add the `placeholder` attribute to display when there is no value ([#1179](https://github.com/arco-design/arco-design-vue/pull/1179))\n- **table:** `expand` and `select` events add record parameter ([#1178](https://github.com/arco-design/arco-design-vue/pull/1178))\n- **table:** Added `columnResize` event ([#1178](https://github.com/arco-design/arco-design-vue/pull/1178))\n- **date-picker:** Added property `preview-shortcur` to customize whether to preview the result of shortcut options ([#1175](https://github.com/arco-design/arco-design-vue/pull/1175))\n\n### 🐛 BugFix\n\n- **cascader:** Fix the problem that the multi-selection state is displayed incorrectly in the case of lazy loading ([#1177](https://github.com/arco-design/arco-design-vue/pull/1177))\n- **cascader:** Fix the problem that the lazy loading function is called multiple times when the selection box is clicked ([#1177](https://github.com/arco-design/arco-design-vue/pull/1177))\n- **date-picker:** `select time` is not internationalized ([#1173](https://github.com/arco-design/arco-design-vue/pull/1173))\n\n### 💎 Enhancement\n\n- **date-picker:** Reset back to selected value when moving out of `shortcut` ([#1175](https://github.com/arco-design/arco-design-vue/pull/1175))\n- demo code support open in Stackblitz ([#1101](https://github.com/arco-design/arco-design-vue/pull/1101))\n\n### 💅 Style\n\n- **textarea:** Fix the display problem of the text box after setting the height style ([#1176](https://github.com/arco-design/arco-design-vue/pull/1176))\n\n### 🆎 TypeScript\n\n- Fixed all component event related TS types ([#1160](https://github.com/arco-design/arco-design-vue/pull/1160))\n\n\n## 2.27.1\n\n`2022-05-16`\n\n### 🐛 BugFix\n\n- **select:** Fixed an issue where grouping options could not be selected when using the options property ([#1141](https://github.com/arco-design/arco-design-vue/pull/1141))\n\n### 🆎 TypeScript\n\n- Fix some component ts errors ([#1139](https://github.com/arco-design/arco-design-vue/pull/1139))\n\n\n## 2.27.0\n\n`2022-05-13`\n\n### 🆕 Feature\n\n- **tree:** `checkable` supports configuration via function ([#1119](https://github.com/arco-design/arco-design-vue/pull/1119))\n- **tree:** `selectable` supports configuration via function ([#1119](https://github.com/arco-design/arco-design-vue/pull/1119))\n- **tree:** Added property `actionOnNodeClick`, which can be used to enable the function: click on a node to trigger expansion ([#1119](https://github.com/arco-design/arco-design-vue/pull/1119))\n- **tree-select:** Added property `seletable` to support custom selectable nodes ([#1119](https://github.com/arco-design/arco-design-vue/pull/1119))\n- **input-number:** Added modelEvent property and input event ([#1115](https://github.com/arco-design/arco-design-vue/pull/1115))\n- **tabs:** Add destroyOnHide attribute ([#1107](https://github.com/arco-design/arco-design-vue/pull/1107))\n- **input:** Add input-attrs attribute ([#1106](https://github.com/arco-design/arco-design-vue/pull/1106))\n- **input:** Modify the blur event trigger sequence to after change ([#1106](https://github.com/arco-design/arco-design-vue/pull/1106))\n- **collapse:** Add destroyOnHide property, the default will not destroy the content when hidden ([#1100](https://github.com/arco-design/arco-design-vue/pull/1100))\n- **radio:** `radio-group` support  `options` prop ([#1090](https://github.com/arco-design/arco-design-vue/pull/1090))\n- **checkbox:** `checkbox-group` adds `checkbox` slot ([#1087](https://github.com/arco-design/arco-design-vue/pull/1087))\n- **checkbox:** `checkbox-group` supports `options` attribute to configure child elements ([#1058](https://github.com/arco-design/arco-design-vue/pull/1058))\n\n### 🐛 BugFix\n\n- **list:** Fix the problem that the pagination property is invalid ([#1125](https://github.com/arco-design/arco-design-vue/pull/1125))\n- **pagination:** Fix the problem that size is invalid in simple mode ([#1123](https://github.com/arco-design/arco-design-vue/pull/1123))\n- **typography:** fix the problem that event `edit-end` triggered twice when press enter ([#1122](https://github.com/arco-design/arco-design-vue/pull/1122))\n- **select:** Fix the problem that `render` and `tagProps` in options property do not take effect ([#1114](https://github.com/arco-design/arco-design-vue/pull/1114))\n- **tree:** expandAll failed when the type of key is number ([#1113](https://github.com/arco-design/arco-design-vue/pull/1113))\n- **date-picker:** the value of `week-picker ` and `quarter-picker` is wrong when using `v-model` ([#1112](https://github.com/arco-design/arco-design-vue/pull/1112))\n- **message:** Fix the problem that the clear method has an error when called multiple times ([#1095](https://github.com/arco-design/arco-design-vue/pull/1095))\n- **modal:** Fix the problem of position offset when opening full screen after dragging ([#1070](https://github.com/arco-design/arco-design-vue/pull/1070))\n\n### 💎 Enhancement\n\n- **trigger:** When the right button is triggered, click the trigger element to close the drop-down box ([#1111](https://github.com/arco-design/arco-design-vue/pull/1111))\n- **trigger:** Support pop-up component nesting ([#1111](https://github.com/arco-design/arco-design-vue/pull/1111))\n\n### 💅 Style\n\n- **table:** Fixed the problem of vertical scroll bar when there are fixed columns ([#1124](https://github.com/arco-design/arco-design-vue/pull/1124))\n- **select:** Fix the problem that the mouse pointer is wrong in the disabled state when the search is turned on ([#1114](https://github.com/arco-design/arco-design-vue/pull/1114))\n\n### 🆎 TypeScript\n\n- **modal:** Complete missing properties in ModalConfig ([#1120](https://github.com/arco-design/arco-design-vue/pull/1120))\n- **table:** Use VNodeChild instead of VNode in the interface to support a wider range of types ([#1118](https://github.com/arco-design/arco-design-vue/pull/1118))\n\n\n## 2.26.0\n\n`2022-04-29`\n\n### 🆕 Feature\n\n- **table:** Column configuration adds tooltip attribute ([#1065](https://github.com/arco-design/arco-design-vue/pull/1065))\n- **table:** Add thead, th slots, tr, td slots add outgoing data ([#1065](https://github.com/arco-design/arco-design-vue/pull/1065))\n- **list:** support `empty` slot ([#1045](https://github.com/arco-design/arco-design-vue/pull/1045))\n\n### 🐛 BugFix\n\n- **collapse:** Fix `showExpandIcon` property invalid ([#1060](https://github.com/arco-design/arco-design-vue/pull/1060))\n- **carousel:** Fixed `trigger` and `autoPlay` property settings not working ([#1059](https://github.com/arco-design/arco-design-vue/pull/1059))\n\n### 💎 Enhancement\n\n- **table:** The table-column dynamic modification order does not need to manually specify the index ([#1065](https://github.com/arco-design/arco-design-vue/pull/1065))\n\n### 💅 Style\n\n- **modal:** Add `overflow: auto` to the body layer ([#1030](https://github.com/arco-design/arco-design-vue/pull/1030))\n\n\n## 2.25.2\n\n`2022-04-27`\n\n### 💅 Style\n\n- **cascader:** Fixed the width of the search drop-down menu when it was blank ([#1056](https://github.com/arco-design/arco-design-vue/pull/1056))\n\n\n## 2.25.1\n\n`2022-04-27`\n\n### 🐛 BugFix\n\n- **space:** Fix size attribute type detection problem ([#1052](https://github.com/arco-design/arco-design-vue/pull/1052))\n- **grid:** Fix gutter attribute type detection problem ([#1052](https://github.com/arco-design/arco-design-vue/pull/1052))\n- **config-provider:** Fix the problem that the setting of the size attribute is invalid in some components ([#1051](https://github.com/arco-design/arco-design-vue/pull/1051))\n- **tabs:** Fixed #title slot not updating in some cases ([#1050](https://github.com/arco-design/arco-design-vue/pull/1050))\n- Fixed the problem of abnormal two-way binding status of some components `popup-visible` ([#1049](https://github.com/arco-design/arco-design-vue/pull/1049))\n- **table:** Fix the problem of wrong format of outgoing record parameter in extended line in `2.25.0` version ([#1047](https://github.com/arco-design/arco-design-vue/pull/1047))\n- **date-picker:** the button today cannot be hidden by setting showNowBtn to false ([#1046](https://github.com/arco-design/arco-design-vue/pull/1046))\n- **menu:** Fix the problem that the collected menu data is incomplete ([#1034](https://github.com/arco-design/arco-design-vue/pull/1034))\n\n### 💅 Style\n\n- **table:** Added internal table class names, fixed styling issues used with `descriptions` component ([#1053](https://github.com/arco-design/arco-design-vue/pull/1053))\n- **input-number:** Fix the display position of the clear button ([#1048](https://github.com/arco-design/arco-design-vue/pull/1048))\n- **checkbox:** Fixed the issue that the hover style would still change in the disabled state ([#1040](https://github.com/arco-design/arco-design-vue/pull/1040))\n\n\n## 2.25.0\n\n`2022-04-22`\n\n### 🆕 Feature\n\n- **notification:** Add footer prop ([#1029](https://github.com/arco-design/arco-design-vue/pull/1029))\n- **tabs:** Add hideContent property ([#1025](https://github.com/arco-design/arco-design-vue/pull/1025))\n- **table:** Add row selector and expand row two-way binding properties ([#1023](https://github.com/arco-design/arco-design-vue/pull/1023))\n- **date-picker:** add property exchangeTime ([#1020](https://github.com/arco-design/arco-design-vue/pull/1020))\n- **icon:** Added `attachment`, `archive`, `calendar-clock`, `palette`, `launch` icons ([#1017](https://github.com/arco-design/arco-design-vue/pull/1017))\n- **config-provider:** Add updateAtScroll property ([#1015](https://github.com/arco-design/arco-design-vue/pull/1015))\n- **table:** Add a second param `rowKey` to the `select` event ([#999](https://github.com/arco-design/arco-design-vue/pull/999))\n- **config-provider:** add property `global` ([#933](https://github.com/arco-design/arco-design-vue/pull/933))\n\n### 🐛 BugFix\n\n- **input-number:** Fix the problem that the error attribute is invalid ([#1026](https://github.com/arco-design/arco-design-vue/pull/1026))\n- Fixed an issue where Volar's intellisense didn't work ([#1022](https://github.com/arco-design/arco-design-vue/pull/1022))\n- **icon:** Fixed `link`, `image-close`, `lock`, `unlock`, `sync` icons ([#1017](https://github.com/arco-design/arco-design-vue/pull/1017))\n\n### 💎 Enhancement\n\n- **table:** The `record` parameter of custom cell rendering supports modification ([#1023](https://github.com/arco-design/arco-design-vue/pull/1023))\n- **tree:** When calling a method to operate a single node, add the target node information in the callback parameter ([#1021](https://github.com/arco-design/arco-design-vue/pull/1021))\n- **modal:** When closing with `esc`, only the topmost popup will be closed ([#1018](https://github.com/arco-design/arco-design-vue/pull/1018))\n\n### 💅 Style\n\n- **menu:** Popup menu icon increased margin-right ([#1029](https://github.com/arco-design/arco-design-vue/pull/1029))\n\n### 🆎 TypeScript\n\n- **tag:** Fix TagProps issues ([#1024](https://github.com/arco-design/arco-design-vue/pull/1024))\n\n\n## 2.24.1\n\n`2022-04-16`\n\n### 🐛 BugFix\n\n- **button:** Fix `config-provide` injection invalid problem ([#986](https://github.com/arco-design/arco-design-vue/pull/986))\n\n\n## 2.24.0\n\n`2022-04-15`\n\n### 💎 Enhancement\n\n- **date-picker:** the selected value will merge with time when timePickerProps has value ([#981](https://github.com/arco-design/arco-design-vue/pull/981))\n- **table:** When titleSlotName exists in the columns attribute, it will be used first ([#969](https://github.com/arco-design/arco-design-vue/pull/969))\n\n### 🆕 Feature\n\n- **modal:** Add animation name attribute ([#985](https://github.com/arco-design/arco-design-vue/pull/985))\n- **button:** `button-group` supports setting props for subcomponent `button` ([#967](https://github.com/arco-design/arco-design-vue/pull/967))\n\n### 🐛 BugFix\n\n- **typography:** fixed the warning of `slots.default` ([#980](https://github.com/arco-design/arco-design-vue/pull/980))\n- **modal:** Fixed an issue where the body would not be locked in some cases ([#968](https://github.com/arco-design/arco-design-vue/pull/968))\n- **menu:** fix the problem that `auto-scroll-into-view` is invalid ([#966](https://github.com/arco-design/arco-design-vue/pull/966))\n- **cascader:** Fix the problem that the half-selected state of the checkbox is displayed incorrectly ([#963](https://github.com/arco-design/arco-design-vue/pull/963))\n- **steps:** Fix the problem of index error when Steps and Step components are not in direct parent-child relationship ([#959](https://github.com/arco-design/arco-design-vue/pull/959))\n\n### 💅 Style\n\n- **modal:** Fix the issue that the scroll bar flashes when the animation is in full screen ([#985](https://github.com/arco-design/arco-design-vue/pull/985))\n- **pagination:** Add padding to pagination options ([#984](https://github.com/arco-design/arco-design-vue/pull/984))\n\n### 🆎 TypeScript\n\n- Increase the export of common typescript type definitions ([#983](https://github.com/arco-design/arco-design-vue/pull/983))\n- **select:** `Option, OptionData, GroupOption` interface names are changed to `SelectOption, SelectOptionData, SelectOptionGroup` ([#983](https://github.com/arco-design/arco-design-vue/pull/983))\n- **table:** `TableColumn` interface name is changed to `TableColumnData` ([#983](https://github.com/arco-design/arco-design-vue/pull/983))\n- **tree:** upgrate `FieldNames` to `TreeFieldNames` ([#977](https://github.com/arco-design/arco-design-vue/pull/977))\n\n\n## 2.23.0\n\n`2022-04-08`\n\n### 💎 Enhancement\n\n- **pagination:** Optimize the page number change logic when switching pageSize ([#954](https://github.com/arco-design/arco-design-vue/pull/954))\n- **input:** The `clear` event of the input class component will also trigger the `change` event ([#951](https://github.com/arco-design/arco-design-vue/pull/951))\n- **table:** In horizontal scrolling mode, if the data is empty, the header will display a scroll bar ([#948](https://github.com/arco-design/arco-design-vue/pull/948))\n- **modal:** Fix the problem that the body is not locked when the scroll bar is floating ([#945](https://github.com/arco-design/arco-design-vue/pull/945))\n\n### 🆕 Feature\n\n- **pagination:** Added `jumper-prepend` and `jumper-append` slots ([#954](https://github.com/arco-design/arco-design-vue/pull/954))\n- **image:** Add footer-class attribute ([#953](https://github.com/arco-design/arco-design-vue/pull/953))\n- **cascader:** add empty slot ([#952](https://github.com/arco-design/arco-design-vue/pull/952))\n- **select:** add trigger slot ([#952](https://github.com/arco-design/arco-design-vue/pull/952))\n- **mention:** Added allow-clear property and event ([#951](https://github.com/arco-design/arco-design-vue/pull/951))\n- **auto-complete:** Added allow-clear property and event ([#951](https://github.com/arco-design/arco-design-vue/pull/951))\n- **menu:** Support set the set the maximum height of popover by `popup-max-height` ([#949](https://github.com/arco-design/arco-design-vue/pull/949))\n- **table:** Add titleSlotName to the columns attribute and slotName to the filterable attribute ([#948](https://github.com/arco-design/arco-design-vue/pull/948))\n- **table:** table-column adds filter-content, filter-content slot ([#948](https://github.com/arco-design/arco-design-vue/pull/948))\n- **table:** Added summary-cell slot ([#948](https://github.com/arco-design/arco-design-vue/pull/948))\n- **upload:** Added icon related slots ([#944](https://github.com/arco-design/arco-design-vue/pull/944))\n- **upload:** Added updateFile method, onBeforeUpload supports returning File ([#944](https://github.com/arco-design/arco-design-vue/pull/944))\n- **upload:** Optimize initial image display logic ([#944](https://github.com/arco-design/arco-design-vue/pull/944))\n\n### 🐛 BugFix\n\n- **cascader:** Fix the problem that lazy loaded isLeaf is invalid in version 2.22.0 ([#952](https://github.com/arco-design/arco-design-vue/pull/952))\n- **cascader:** Fixed an issue where the options property could not trigger an update in some cases ([#952](https://github.com/arco-design/arco-design-vue/pull/952))\n- **tree-select:** When the prop label-in-value is true, the actual parameter value of the event change is wrong ([#939](https://github.com/arco-design/arco-design-vue/pull/939))\n\n### 💅 Style\n\n- **image:** Fix the rounded corner style problem at the bottom of the footer area ([#953](https://github.com/arco-design/arco-design-vue/pull/953))\n- **modal:** Fix the problem that title-align is left-aligned invalid in simple mode ([#945](https://github.com/arco-design/arco-design-vue/pull/945))\n\n\n## 2.22.1\n\n`2022-04-02`\n\n### 🐛 BugFix\n\n- **menu:** Fixed the problem that the height of menu icon is wrong ([#928](https://github.com/arco-design/arco-design-vue/pull/928))\n- **table:** Fix virtual list and scrolling used together ([#926](https://github.com/arco-design/arco-design-vue/pull/926))\n- **mention:** Fix the problem of warning prompts in the development environment ([#925](https://github.com/arco-design/arco-design-vue/pull/925))\n\n\n## 2.22.0\n\n`2022-04-01`\n\n### 💎 Enhancement\n\n- **select:** Enter event can no longer be triggered in loading state ([#911](https://github.com/arco-design/arco-design-vue/pull/911))\n\n### 🆕 Feature\n\n- **table:** Added `selectAll` method ([#920](https://github.com/arco-design/arco-design-vue/pull/920))\n- **form:** Rendering elements that support modifying form item labels ([#919](https://github.com/arco-design/arco-design-vue/pull/919))\n- **cascader:** Added `field-names` attribute to allow custom fields ([#912](https://github.com/arco-design/arco-design-vue/pull/912))\n- **select:** Added `field-names` attribute to allow custom fields ([#911](https://github.com/arco-design/arco-design-vue/pull/911))\n- **input-tag:** Added `field-names` attribute ([#910](https://github.com/arco-design/arco-design-vue/pull/910))\n- **tree-select:** add property `fallback-option` ([#894](https://github.com/arco-design/arco-design-vue/pull/894))\n\n### 🐛 BugFix\n\n- **table:** Fix the problem of wrong virtual list width in some cases ([#920](https://github.com/arco-design/arco-design-vue/pull/920))\n- **modal:** Fix auto width and drag error when `align-center=\"false\"` ([#918](https://github.com/arco-design/arco-design-vue/pull/918))\n- Fixed the problem that the bottom blank of the virtual list appears when the item height deviation is large ([#917](https://github.com/arco-design/arco-design-vue/pull/917))\n- **tree-select:** Fix the problem that the null value is displayed as empty ([#916](https://github.com/arco-design/arco-design-vue/pull/916))\n- **typography:** fix the problem that copy does not work ([#915](https://github.com/arco-design/arco-design-vue/pull/915))\n- **select:** Fixed duplicate options in `allow-create` mode ([#911](https://github.com/arco-design/arco-design-vue/pull/911))\n- **input-number:** Fixed display error when switching `mode` ([#909](https://github.com/arco-design/arco-design-vue/pull/909))\n- **mention:** Fix v-model two-way binding error when selecting value ([#908](https://github.com/arco-design/arco-design-vue/pull/908))\n- **upload:** Fix onButtonClick property not available ([#907](https://github.com/arco-design/arco-design-vue/pull/907))\n- **menu:** The icon in the popup box is not aligned with the text ([#889](https://github.com/arco-design/arco-design-vue/pull/889))\n\n### 💅 Style\n\n- **form:** Form item content style increases maximum width to prevent overflow ([#919](https://github.com/arco-design/arco-design-vue/pull/919))\n\n\n## 2.21.2\n\n`2022-03-29`\n\n### 🐛 BugFix\n\n- **select:** Fix the problem that `fallback-option` attribute setting false is invalid ([#893](https://github.com/arco-design/arco-design-vue/pull/893))\n- **select:** Fixed the problem that the selected label in the multi-selection mode does not display delete by default ([#886](https://github.com/arco-design/arco-design-vue/pull/886))\n\n\n## 2.21.1\n\n`2022-03-25`\n\n### 🐛 BugFix\n\n- **affix:** Fix the problem of component reporting error under SSR ([#879](https://github.com/arco-design/arco-design-vue/pull/879))\n\n\n## 2.21.0\n\n`2022-03-25`\n\n### 💎 Enhancement\n\n- Support SSR usage ([#872](https://github.com/arco-design/arco-design-vue/pull/872))\n\n### 🆕 Feature\n\n- **table:** Add summary prop ([#877](https://github.com/arco-design/arco-design-vue/pull/877))\n- **tree:** add property `onlyCheckLeaf ` ([#876](https://github.com/arco-design/arco-design-vue/pull/876))\n- **date-picker:** `dayStartOfWeek` support set to 0-6 ([#874](https://github.com/arco-design/arco-design-vue/pull/874))\n- **tree:** support to turn off expand transition animation ([#867](https://github.com/arco-design/arco-design-vue/pull/867))\n\n### 🐛 BugFix\n\n- **tree-select:** Fix `max-tags` parameter name is wrong, it should be `max-tag-count` ([#873](https://github.com/arco-design/arco-design-vue/pull/873))\n- Fix the problem that some components use the `popup-container` specified container to report an error when the container does not exist ([#871](https://github.com/arco-design/arco-design-vue/pull/871))\n- **trigger:** Fix the problem that the outermost `div` is not hidden when it is not unmounted ([#871](https://github.com/arco-design/arco-design-vue/pull/871))\n- **avatar:** Fixed an issue where a warning message would appear when there was no content ([#870](https://github.com/arco-design/arco-design-vue/pull/870))\n- **tag:** Remove `mini` size type ([#860](https://github.com/arco-design/arco-design-vue/pull/860))\n- **modal:** Fix the bug that the enter key triggers modal display multiple times ([#860](https://github.com/arco-design/arco-design-vue/pull/860))\n\n### 💅 Style\n\n- **menu:** fix the indentation of menu item is wrapped ([#866](https://github.com/arco-design/arco-design-vue/pull/866))\n- **tree:** fix the connection line is displayed incorrectly ([#865](https://github.com/arco-design/arco-design-vue/pull/865))\n\n### 🆎 TypeScript\n\n- **tree:** Add the custom icon field of filednames ([#848](https://github.com/arco-design/arco-design-vue/pull/848))\n\n\n## 2.20.2\n\n`2022-03-24`\n\n### 🐛 BugFix\n\n- **table:** Fixed the problem that the `table-column` component caused continuous updating when writing object parameters directly in the template ([#861](https://github.com/arco-design/arco-design-vue/pull/861))\n- **table:** Fix the problem that there is no column data when there is only one `table-column` ([#861](https://github.com/arco-design/arco-design-vue/pull/861))\n- **table:** Fix the sorting problem of `table-column`, which can be solved by the `index` parameter ([#861](https://github.com/arco-design/arco-design-vue/pull/861))\n\n### 💅 Style\n\n- **dropdown:** Fixed vertical centering of icons in options ([#862](https://github.com/arco-design/arco-design-vue/pull/862))\n- Fixed drop-down menu animation issues for some components ([#862](https://github.com/arco-design/arco-design-vue/pull/862))\n\n\n## 2.20.1\n\n`2022-03-21`\n\n### 🐛 BugFix\n\n- **tree:** Fix the problem that the expansion event name is wrong in the new version ([#853](https://github.com/arco-design/arco-design-vue/pull/853))\n\n### 💅 Style\n\n- **form:** Fix `form-item` asterisk compatibility with windicss ([#854](https://github.com/arco-design/arco-design-vue/pull/854))\n- **select:** Fixed vertical centering of option #icon slots ([#854](https://github.com/arco-design/arco-design-vue/pull/854))\n- **select:** Fix the problem that the omission is not displayed after the option exceeds the width ([#854](https://github.com/arco-design/arco-design-vue/pull/854))\n- **transfer:** Fix the problem that the omission is not displayed after the option exceeds the width ([#854](https://github.com/arco-design/arco-design-vue/pull/854))\n\n\n## 2.20.0\n\n`2022-03-18`\n\n### 🆕 Feature\n\n- **table:** Use Context to refactor components, `table-colum` supports secondary encapsulation ([#845](https://github.com/arco-design/arco-design-vue/pull/845))\n- **table:** scroll property adds `maxHeight`, `minWidth` properties ([#845](https://github.com/arco-design/arco-design-vue/pull/845))\n- **cascader:** Add `cascader-panel` component ([#842](https://github.com/arco-design/arco-design-vue/pull/842))\n- **descriptions:** The `column` property supports reactive configuration ([#839](https://github.com/arco-design/arco-design-vue/pull/839))\n- **list:** Added `#scroll-loading` slot ([#838](https://github.com/arco-design/arco-design-vue/pull/838))\n- **tree:** add instance method to tree component ([#837](https://github.com/arco-design/arco-design-vue/pull/837))\n\n### 🐛 BugFix\n\n- **date-picker:** the select event is not triggered when the end time selected ([#844](https://github.com/arco-design/arco-design-vue/pull/844))\n- **cascader:** Fix the problem that the selected path of the drop-down menu may not match the current value ([#843](https://github.com/arco-design/arco-design-vue/pull/843))\n- **select:** Fixed the problem that the search function failed when the virtual list was opened ([#841](https://github.com/arco-design/arco-design-vue/pull/841))\n- **select:** Fix the problem that the `Enter` key on the small keyboard cannot be selected ([#841](https://github.com/arco-design/arco-design-vue/pull/841))\n- **modal:** Fixed `close` function returning wrong in create method ([#840](https://github.com/arco-design/arco-design-vue/pull/840))\n- **typography:** Fix `ellipsisText` not updating ([#833](https://github.com/arco-design/arco-design-vue/pull/833))\n\n### 💅 Style\n\n- **table:** Fixed the problem that the header text could not be centered after sorting was enabled ([#845](https://github.com/arco-design/arco-design-vue/pull/845))\n\n\n## 2.19.0\n\n`2022-03-11`\n\n### ⚠️ Important Attention\n\n- **table:** Modify the outgoing data of the sorting function sorter to enhance the usage ([#810](https://github.com/arco-design/arco-design-vue/pull/810))\n\n### 💎 Enhancement\n\n- `modal`, `message`, `notifaction` component function calls add support for appContext, see documentation for details ([#804](https://github.com/arco-design/arco-design-vue/pull/804))\n\n### 🆕 Feature\n\n- **tree:** support for setting half-checked nodes ([#809](https://github.com/arco-design/arco-design-vue/pull/809))\n- **tree:** add some methods in instance: `getCheckedNodes` `getSelectedNodes` `getExpandedNodes` `getHalfCheckedNodes` ([#809](https://github.com/arco-design/arco-design-vue/pull/809))\n- **drawer:** Added `hide-cancel` attribute ([#803](https://github.com/arco-design/arco-design-vue/pull/803))\n- **modal:** Add `draggable` property to support draggable ([#802](https://github.com/arco-design/arco-design-vue/pull/802))\n- **modal:** Added `fullscreen` property to support full screen display ([#802](https://github.com/arco-design/arco-design-vue/pull/802))\n- **grid:** `a-col` will be hidden when colspan is 0 ([#797](https://github.com/arco-design/arco-design-vue/pull/797))\n\n### 🐛 BugFix\n\n- **descriptions:** Fix the problem of error when `data` is empty data ([#812](https://github.com/arco-design/arco-design-vue/pull/812))\n- **form:** Fix the problem that the `field` property of `form-item` is invalid when there is an array in it ([#807](https://github.com/arco-design/arco-design-vue/pull/807))\n- **form:** Fixed the issue that some component functions are still available after `disabled` is enabled ([#807](https://github.com/arco-design/arco-design-vue/pull/807))\n- **tree:** Fix the problem of component rendering error when the node cannot be found ([#800](https://github.com/arco-design/arco-design-vue/pull/800))\n- **date-picker:** Fix the problem that the offset of the range selector popup layer is wrong ([#796](https://github.com/arco-design/arco-design-vue/pull/796))\n\n\n## 2.18.1\n\n`2022-03-07`\n\n### 🐛 BugFix\n\n- **tabs:** Fix the problem that activeKey modification will be triggered during initialization ([#787](https://github.com/arco-design/arco-design-vue/pull/787))\n- **upload:** Fix the problem of incorrect upload progress calculation ([#786](https://github.com/arco-design/arco-design-vue/pull/786))\n- **upload:** Fix the problem that the cancel button does not work during uploading ([#786](https://github.com/arco-design/arco-design-vue/pull/786))\n\n\n## 2.18.0\n\n`2022-03-04`\n\n### 💎 Enhancement\n\n- **select:** Select box display using flex layout ([#778](https://github.com/arco-design/arco-design-vue/pull/778))\n- **select:** trigger-props properties can override default properties ([#778](https://github.com/arco-design/arco-design-vue/pull/778))\n- **breadcrumb:** Use Context to optimize components ([#774](https://github.com/arco-design/arco-design-vue/pull/774))\n- **avatar:** Use Context to optimize components ([#773](https://github.com/arco-design/arco-design-vue/pull/773))\n- **steps:** Use Context to optimize components ([#772](https://github.com/arco-design/arco-design-vue/pull/772))\n- **tabs:** Use Context to optimize components and support secondary encapsulation of TabPane ([#771](https://github.com/arco-design/arco-design-vue/pull/771))\n- **tabs:** key supports number type ([#771](https://github.com/arco-design/arco-design-vue/pull/771))\n- **tabs:** Add autoSwitch attribute ([#771](https://github.com/arco-design/arco-design-vue/pull/771))\n\n### 🆕 Feature\n\n- Add definition of GlobalComponents ([#782](https://github.com/arco-design/arco-design-vue/pull/782))\n- **cascader:** Added `#option`, `#label` slots ([#781](https://github.com/arco-design/arco-design-vue/pull/781))\n- **table:** Scroll mode supports setting height percentage ([#780](https://github.com/arco-design/arco-design-vue/pull/780))\n- **table:** The column data adds the slotName property to allow specifying a rendering slot ([#780](https://github.com/arco-design/arco-design-vue/pull/780))\n- **table:** Added `pagination-left` and `pagination-right` slots ([#780](https://github.com/arco-design/arco-design-vue/pull/780))\n- **rate:** Add color attribute ([#770](https://github.com/arco-design/arco-design-vue/pull/770))\n- **checkbox:** Add checkbox slot, you can customize the checkbox ([#769](https://github.com/arco-design/arco-design-vue/pull/769))\n- **radio:** Add radio slot, you can customize the radio ([#769](https://github.com/arco-design/arco-design-vue/pull/769))\n- **date-picker:** support quick switching of year and month in the head ([#754](https://github.com/arco-design/arco-design-vue/pull/754))\n\n### 🐛 BugFix\n\n- **select:** Fix the problem that the label attribute is invalid ([#777](https://github.com/arco-design/arco-design-vue/pull/777))\n- **select:** Fix the problem that the properties of option are not updated synchronously ([#777](https://github.com/arco-design/arco-design-vue/pull/777))\n- **list:** List items should be rendered as div ([#776](https://github.com/arco-design/arco-design-vue/pull/776))\n- **slider:** Fix the problem that change will not be triggered when the input box is changed ([#775](https://github.com/arco-design/arco-design-vue/pull/775))\n- **form:** Fix the problem of reset method invalid in nested data ([#768](https://github.com/arco-design/arco-design-vue/pull/768))\n\n### 💅 Style\n\n- **menu:** the icon of sub-menu are not centered in vertically ([#767](https://github.com/arco-design/arco-design-vue/pull/767))\n\n\n## 2.18.0-beta.3\n\n`2022-02-26`\n\n### 💎 Enhancement\n\n- **input:** modelValue support null ([#743](https://github.com/arco-design/arco-design-vue/pull/743))\n\n### 🐛 BugFix\n\n- **transfer:** Fix list display issue ([#744](https://github.com/arco-design/arco-design-vue/pull/744))\n\n\n## 2.18.0-beta.2\n\n`2022-02-25`\n\n### ⚠️ Important Attention\n\n- **trigger:** Add a layer of `wrapper div` to the pop-up layer to provide support for tranform animation ([#732](https://github.com/arco-design/arco-design-vue/pull/732))\n- **list:** The spin component is rendered by default to prevent the component from remounting when switching states ([#730](https://github.com/arco-design/arco-design-vue/pull/730))\n- **list:** Supports rendering of any child element ([#730](https://github.com/arco-design/arco-design-vue/pull/730))\n\n### 💎 Enhancement\n\n- **form:** When `auto-label-width` is enabled, label wrapping is not allowed to prevent calculation errors after wrapping ([#738](https://github.com/arco-design/arco-design-vue/pull/738))\n- **modal:** Optimize click mask layer off ([#737](https://github.com/arco-design/arco-design-vue/pull/737))\n\n### 🆕 Feature\n\n- **descriptions:** Added `descriptions-item` component ([#739](https://github.com/arco-design/arco-design-vue/pull/739))\n- **table:** Added `span-all` attribute ([#735](https://github.com/arco-design/arco-design-vue/pull/735))\n- **trigger:** Added `show` and `hide` events ([#731](https://github.com/arco-design/arco-design-vue/pull/731))\n- **cascader:** Added `search-delay` property and defaulted to `500ms` ([#729](https://github.com/arco-design/arco-design-vue/pull/729))\n- **cascader:** Add the `search-option-only-label` attribute and modify the default display path label of the options in the search drop-down menu ([#729](https://github.com/arco-design/arco-design-vue/pull/729))\n- **select:** Added `search-delay` property and defaulted to `500ms` ([#728](https://github.com/arco-design/arco-design-vue/pull/728))\n- **form:** Validated error info add label property ([#724](https://github.com/arco-design/arco-design-vue/pull/724))\n- **tree:** Add slot `icon` for customizing node icon globally ([#710](https://github.com/arco-design/arco-design-vue/pull/710))\n\n### 🐛 BugFix\n\n- **table:** Fix the problem that v-for cannot render when table-column is nested ([#734](https://github.com/arco-design/arco-design-vue/pull/734))\n- **cascader:** Fix the problem that the selection box display is not updated after the option is updated ([#727](https://github.com/arco-design/arco-design-vue/pull/727))\n- **upload:** fix error when using slot `upload-item` ([#715](https://github.com/arco-design/arco-design-vue/pull/715))\n- Fixed an issue where data changes did not update the view in the border case where the scroll bar was shown and hidden ([#711](https://github.com/arco-design/arco-design-vue/pull/711))\n- Fix the problem that the row height calculation does not include the border ([#711](https://github.com/arco-design/arco-design-vue/pull/711))\n- **upload:** Generate initial preview image only if file type is image ([#706](https://github.com/arco-design/arco-design-vue/pull/706))\n- **message:** Fixed the problem of destroying an error when calling at the same time ([#705](https://github.com/arco-design/arco-design-vue/pull/705))\n\n### 💅 Style\n\n- **pagination:** Fix the problem that the jumper text is not aligned under safari ([#736](https://github.com/arco-design/arco-design-vue/pull/736))\n- **tooltip:** Optimized display animation, consistent with the react version ([#733](https://github.com/arco-design/arco-design-vue/pull/733))\n- **popover:** Optimize display animation ([#733](https://github.com/arco-design/arco-design-vue/pull/733))\n- **popconfirm:** Optimize display animation ([#733](https://github.com/arco-design/arco-design-vue/pull/733))\n\n\n## 2.18.0-beta.1\n\n`2022-02-18`\n\n### ⚠️ Important Attention\n\n- This version is a beta version with major changes, please use it in the production environment after careful testing\n- **form:** <form-item> component refactoring to use context to manage input components. If the user has a custom input component, you can refer to the `custom input component` example to change. ([#697](https://github.com/arco-design/arco-design-vue/pull/697))\n- Add injection of FormItemContext to all input components ([#697](https://github.com/arco-design/arco-design-vue/pull/697))\n- **radio:** Outer wrapping DOM changed from span to label ([#697](https://github.com/arco-design/arco-design-vue/pull/697))\n- **checkbox:** Outer wrapping DOM changed from span to label ([#697](https://github.com/arco-design/arco-design-vue/pull/697))\n- **select:** Component uses context refactoring to allow encapsulation of Option components ([#688](https://github.com/arco-design/arco-design-vue/pull/688))\n- **select:** Added `valueKey` attribute, option value supports object form ([#688](https://github.com/arco-design/arco-design-vue/pull/688))\n- **select:** The class name of the <option> component is changed from arco-dropdown-option to arco-select-option, and flex is used to center the layout vertically ([#688](https://github.com/arco-design/arco-design-vue/pull/688))\n- **dropdown:** The <doption> component modifies the vertical centering layout using flex ([#688](https://github.com/arco-design/arco-design-vue/pull/688))\n\n### 💎 Enhancement\n\n- **table:** Does not show pagination when the data is empty ([#684](https://github.com/arco-design/arco-design-vue/pull/684))\n\n### 🆕 Feature\n\n- **menu:** Responsive collapsed support ([#700](https://github.com/arco-design/arco-design-vue/pull/700))\n- **grid:** support responsive configure ([#693](https://github.com/arco-design/arco-design-vue/pull/693))\n- Add ssr support (beta) ([#675](https://github.com/arco-design/arco-design-vue/pull/675))\n\n### 🐛 BugFix\n\n- **cascader:** Fixed an issue where disabled items could still be selected via radio selectors in strict mode ([#701](https://github.com/arco-design/arco-design-vue/pull/701))\n- **cascader:** Fixed an issue where search results in strict mode did not include path options ([#701](https://github.com/arco-design/arco-design-vue/pull/701))\n\n\n## 2.17.0\n\n`2022-02-11`\n\n### 💎 Enhancement\n\n- **input:** Increase the transparent transmission of some original attributes of the input element ([#664](https://github.com/arco-design/arco-design-vue/pull/664))\n- **trigger:** Optimize the position of the arrow after auto-adjusting the position ([#655](https://github.com/arco-design/arco-design-vue/pull/655))\n\n### 🆕 Feature\n\n- **image:** Add slot `actions` for custom preview action items ([#679](https://github.com/arco-design/arco-design-vue/pull/679))\n- **modal:** Added `title-align` attribute ([#673](https://github.com/arco-design/arco-design-vue/pull/673))\n\n### 🐛 BugFix\n\n- **image:** Fix the problem of wrong rotation direction ([#678](https://github.com/arco-design/arco-design-vue/pull/678))\n- **image:** Fix the problem that the `Tooltip` of the action item is covered ([#677](https://github.com/arco-design/arco-design-vue/pull/677))\n- **tooltip:** Fix the issue of losing trigger style when loading on demand ([#674](https://github.com/arco-design/arco-design-vue/pull/674))\n- **transfer:** Fix search function should check option label ([#659](https://github.com/arco-design/arco-design-vue/pull/659))\n\n### 💅 Style\n\n- Fix the problem that the default color of some icons is inconsistent ([#676](https://github.com/arco-design/arco-design-vue/pull/676))\n- **switch:** Fixed the occasional jitter problem of switch animation ([#656](https://github.com/arco-design/arco-design-vue/pull/656))\n\n\n## 2.16.2\n\n`2022-01-24`\n\n### 🐛 BugFix\n\n- **date-picker:** `headerValue` reporting error in `vue 3.2.28` ([#643](https://github.com/arco-design/arco-design-vue/pull/643))\n- **table:** Fix the problem of preventing bubbling and causing lazy loading to fail ([#641](https://github.com/arco-design/arco-design-vue/pull/641))\n- **table:** fix the problem that empty rows are displayed after deletion when expanding rows\n\n### 💅 Style\n\n- Add the fill attribute to the custom icon component to solve the problem of custom color ([#642](https://github.com/arco-design/arco-design-vue/pull/642))\n- **input:** Fix `input-group` with rounded corners of input components ([#640](https://github.com/arco-design/arco-design-vue/pull/640))\n\n\n## 2.16.1\n\n`2022-01-21`\n\n### 🐛 BugFix\n\n- **dropdown:** `<dropdown-button>` component completes dropdown related properties ([#637](https://github.com/arco-design/arco-design-vue/pull/637))\n\n\n## 2.16.0\n\n`2022-01-21`\n\n### 💎 Enhancement\n\n- **table:** Internal buttons no longer fire `row-click` events ([#630](https://github.com/arco-design/arco-design-vue/pull/630))\n\n### 🆕 Feature\n\n- **select:** Added custom icon slot ([#634](https://github.com/arco-design/arco-design-vue/pull/634))\n- **typography:** add property `copy-delay` support customize the delay time for the disappearance of copy success status ([#632](https://github.com/arco-design/arco-design-vue/pull/632))\n- **date-picker:** Added attribute `value-format` to format the return value ([#631](https://github.com/arco-design/arco-design-vue/pull/631))\n- **modal:** Added `before-open` and `before-close` events ([#628](https://github.com/arco-design/arco-design-vue/pull/628))\n- **input:** The `<input-search>` component adds the ability to customize the content of the search button ([#625](https://github.com/arco-design/arco-design-vue/pull/625))\n- **form:** Added feedback icon function for forms and corresponding input components ([#622](https://github.com/arco-design/arco-design-vue/pull/622))\n- **table:** Add support for drag and drop sorting (experimental) ([#619](https://github.com/arco-design/arco-design-vue/pull/619))\n- **table:** Add support for resizing column widths (experimental) ([#619](https://github.com/arco-design/arco-design-vue/pull/619))\n- **table:** Added `tbody`, `tr`, `td` slots ([#619](https://github.com/arco-design/arco-design-vue/pull/619))\n- **dropdown:** Use context to refactor components to support nested use ([#608](https://github.com/arco-design/arco-design-vue/pull/608))\n- **dropdown:** value adds support for object ([#608](https://github.com/arco-design/arco-design-vue/pull/608))\n- **dropdown:** Added `dropdown-button` component ([#608](https://github.com/arco-design/arco-design-vue/pull/608))\n- **dropdown:** When the dropdown is open, add a class name to the trigger element ([#608](https://github.com/arco-design/arco-design-vue/pull/608))\n- **split:** Attributes `min` and `max` support setting pixel values ([#607](https://github.com/arco-design/arco-design-vue/pull/607))\n\n### 🐛 BugFix\n\n- **message:** fix type warning when using loading type ([#635](https://github.com/arco-design/arco-design-vue/pull/635))\n- **modal:** Fix style file missing `<button>` component style reference ([#635](https://github.com/arco-design/arco-design-vue/pull/635))\n- **date-picker:** do not open the popup when clear ([#633](https://github.com/arco-design/arco-design-vue/pull/633))\n- **cascader:** Fixed an issue where the search could not be selected in `check-strictly` mode ([#627](https://github.com/arco-design/arco-design-vue/pull/627))\n- **date-picker:** The return value should not concatenate the time when the time selection panel is not displayed ([#612](https://github.com/arco-design/arco-design-vue/pull/612))\n- **typography:** Fix the problem of warning in JSX usage ([#591](https://github.com/arco-design/arco-design-vue/pull/591))\n- **icon:** fix missing icon-relation icon in version 2.15.0\n-\n### 💅 Style\n\n- **button:** Fix link mode text not centered ([#636](https://github.com/arco-design/arco-design-vue/pull/636))\n- **input:** Fix `<input-group>` component wrapping `<select>` component style issue ([#588](https://github.com/arco-design/arco-design-vue/pull/588))\n\n\n## 2.15.1\n\n`2022-01-15`\n\n### 🐛 BugFix\n\n- **grid:** Fix component name registration error problem ([#581](https://github.com/arco-design/arco-design-vue/pull/581))\n\n\n## 2.15.0\n\n`2022-01-14`\n\n### 💎 Enhancement\n\n- The select box built into the optimization component will not be controlled by the external select box group ([#569](https://github.com/arco-design/arco-design-vue/pull/569))\n- **select:** Optimize loading status display ([#557](https://github.com/arco-design/arco-design-vue/pull/557))\n\n### 🆕 Feature\n\n- **input-tag:** Add the `uniqueValue` attribute to support the validation that the value is not repeated during input ([#578](https://github.com/arco-design/arco-design-vue/pull/578))\n- **modal:** Added `escToClose` property and enabled by default ([#577](https://github.com/arco-design/arco-design-vue/pull/577))\n- **drawer:** Added `escToClose` property and enabled by default ([#577](https://github.com/arco-design/arco-design-vue/pull/577))\n- **grid:** Added grid-based layout components `Grid` `Grid.Item` ([#576](https://github.com/arco-design/arco-design-vue/pull/576))\n- **table:** `sortable.sorter` adds boolean type to support server-side sorting ([#575](https://github.com/arco-design/arco-design-vue/pull/575))\n- Add `icon` component and provide support for iconfont.cn ([#574](https://github.com/arco-design/arco-design-vue/pull/574))\n- **cascader:** Add loading prop ([#558](https://github.com/arco-design/arco-design-vue/pull/558))\n\n### 🐛 BugFix\n\n- **date-picker:** fix the problem of missing event parameters ([#579](https://github.com/arco-design/arco-design-vue/pull/579))\n\n### 💅 Style\n\n- **tag:** Fix checkable state style bug ([#570](https://github.com/arco-design/arco-design-vue/pull/570))\n- **button:** Fix alignment of iconOnly buttons in button groups ([#567](https://github.com/arco-design/arco-design-vue/pull/567))\n- **input:** Fix the problem of wrong background color in dark mode ([#560](https://github.com/arco-design/arco-design-vue/pull/560))\n\n\n## 2.14.3\n\n`2022-01-12`\n\n### 🐛 BugFix\n\n- **input:** Fix the problem that the input-search attribute is invalid in button mode ([#552](https://github.com/arco-design/arco-design-vue/pull/552))\n- **input-number:** Fix the problem that the cursor position changes when inputting ([#552](https://github.com/arco-design/arco-design-vue/pull/552))\n- **select:** missing arguments when calling scrollTo ([#543](https://github.com/arco-design/arco-design-vue/pull/543))\n\n\n## 2.14.2\n\n`2022-01-10`\n\n### 🐛 BugFix\n\n- **steps:** Fix the problem that small can be enabled in dot mode ([#536](https://github.com/arco-design/arco-design-vue/pull/536))\n- **form:** Label-col uses flex layout to solve the problem of wrong height under mini size ([#536](https://github.com/arco-design/arco-design-vue/pull/536))\n- **table:** Fix the problem that the table content exceeds the container, causing the border not to be displayed in some cases ([#536](https://github.com/arco-design/arco-design-vue/pull/536))\n- **select:** Fix on-demand loading without imported styles ([#536](https://github.com/arco-design/arco-design-vue/pull/536))\n- **input:** Fix the problem of wrong font color in disabled state in Safari browser ([#536](https://github.com/arco-design/arco-design-vue/pull/536))\n- **textarea:** Fix the problem that the downlink height setting is invalid in Firefox browser ([#536](https://github.com/arco-design/arco-design-vue/pull/536))\n- **statistic:** fix dynamic assignment issue ([#534](https://github.com/arco-design/arco-design-vue/pull/534))\n\n### 💅 Style\n\n- **button:** Fix onlyIcon mode icons not aligned ([#538](https://github.com/arco-design/arco-design-vue/pull/538))\n\n\n## 2.14.1\n\n`2022-01-08`\n\n### 🐛 BugFix\n\n- **form:** Fix the problem of the default size and style of the form ([#526](https://github.com/arco-design/arco-design-vue/pull/526))\n- **config-provider:** Fix the problem of loading styles on demand ([#526](https://github.com/arco-design/arco-design-vue/pull/526))\n\n\n## 2.14.0\n\n`2022-01-07`\n\n### 🆕 Feature\n\n- **table:** Add hideExpandButtonOnEmpty property ([#520](https://github.com/arco-design/arco-design-vue/pull/520))\n- **upload:** Increase the imagePreview property, you can use the built-in image preview function ([#517](https://github.com/arco-design/arco-design-vue/pull/517))\n- **upload:** When `listType` is an image class, the default accept is `image/*` ([#517](https://github.com/arco-design/arco-design-vue/pull/517))\n- **upload:** Added `showOnExceedLimit` prop ([#517](https://github.com/arco-design/arco-design-vue/pull/517))\n- **drawer:** Hide the title bar when title and closable are not set ([#515](https://github.com/arco-design/arco-design-vue/pull/515))\n- **statistic:** value supports responsive modification ([#514](https://github.com/arco-design/arco-design-vue/pull/514))\n- **config-provider:** Add `size` prop ([#513](https://github.com/arco-design/arco-design-vue/pull/513))\n\n### 🐛 BugFix\n\n- **image:** the`Image.PreviewGroup` component should collect `previewProps.src` first ([#522](https://github.com/arco-design/arco-design-vue/pull/522))\n- **table:** fix x-axis resize issue ([#519](https://github.com/arco-design/arco-design-vue/pull/519))\n- **table:** Fix the problem that the width of the expanded row is incorrectly set when there are fixed columns ([#519](https://github.com/arco-design/arco-design-vue/pull/519))\n- **table:** Fix the problem that the checkbox selection all is set incorrectly when there are subtrees ([#519](https://github.com/arco-design/arco-design-vue/pull/519))\n- **trigger:** Fix the problem that the arrow position of the popup box is wrong in some cases ([#518](https://github.com/arco-design/arco-design-vue/pull/518))\n- **input:** Fix change event trigger issue ([#516](https://github.com/arco-design/arco-design-vue/pull/516))\n- **input:** Fix the problem that the style setting is in the wrong position when there are front and rear tags ([#516](https://github.com/arco-design/arco-design-vue/pull/516))\n\n### 💅 Style\n\n- **dropdown:** fix option suffix style issue ([#523](https://github.com/arco-design/arco-design-vue/pull/523))\n\n\n## 2.13.0\n\n`2021-12-31`\n\n### ⚠️ Important Attention\n\n- **form:** The `form-item` component adds a new `content-wrapper` div element to wrap the original `content` div element to support the new layout ([#488](https://github.com/arco-design/arco-design-vue/pull/488))\n\n### 🆕 Feature\n\n- **form:** Added `autoLabelWidth` property to support adaptive label width ([#486](https://github.com/arco-design/arco-design-vue/pull/486))\n- **form:** Added `labelColFlex` property to support label width setting ([#486](https://github.com/arco-design/arco-design-vue/pull/486))\n- **form:** Add `mergeProps` attribute, support custom attributes and event override ([#486](https://github.com/arco-design/arco-design-vue/pull/486))\n- **table:** Added `loadMore` property to support sub-slacker loading ([#485](https://github.com/arco-design/arco-design-vue/pull/485))\n- **table:** Add `filterIconAlignLeft` property ([#485](https://github.com/arco-design/arco-design-vue/pull/485))\n- **table:** Added `change` event to get processed data ([#485](https://github.com/arco-design/arco-design-vue/pull/485))\n- **upload:** Add `show-link` attribute ([#483](https://github.com/arco-design/arco-design-vue/pull/483))\n- **auto-complete:** Increase input slot and option slot support ([#482](https://github.com/arco-design/arco-design-vue/pull/482))\n- **mention:** Increase input slot and option slot support ([#482](https://github.com/arco-design/arco-design-vue/pull/482))\n- **mention:** The drop-down menu under the text field type is displayed following the prompt text ([#482](https://github.com/arco-design/arco-design-vue/pull/482))\n- **cascader:** Added `load-more` attribute to support lazy loading of data ([#476](https://github.com/arco-design/arco-design-vue/pull/476))\n- **grid:** add property `wrap` to `Row` ([#471](https://github.com/arco-design/arco-design-vue/pull/471))\n- **descriptions:** The index and data parameters are added to the Value and Label slots ([#470](https://github.com/arco-design/arco-design-vue/pull/470))\n\n### 🐛 BugFix\n\n- **pagination:** Fix the problem that there is no clear value when the jump input box is out of focus ([#487](https://github.com/arco-design/arco-design-vue/pull/487))\n- **input-tag:** Fix Chinese input method problem ([#481](https://github.com/arco-design/arco-design-vue/pull/481))\n- **select:** Fix the problem of Chinese input method when searching ([#481](https://github.com/arco-design/arco-design-vue/pull/481))\n- **select:** Fix the incomplete display of placeholder in `drawer` ([#481](https://github.com/arco-design/arco-design-vue/pull/481))\n- **form:** Fix the problem that the help content of the form item is displayed incorrectly ([#480](https://github.com/arco-design/arco-design-vue/pull/480))\n- **table:** Fix the problem of invalid `sortOrder` emptying ([#478](https://github.com/arco-design/arco-design-vue/pull/478))\n- **table:** Fix the issue that the `expand-icon` slot does not take effect in the subtree ([#478](https://github.com/arco-design/arco-design-vue/pull/478))\n- **table:** Fix the problem that the shadow of the fixed column does not display when the table size changes dynamically ([#478](https://github.com/arco-design/arco-design-vue/pull/478))\n- **date-picker:** fix the proplem that property `readonly` is invalid ([#472](https://github.com/arco-design/arco-design-vue/pull/472))\n\n### 💅 Style\n\n- **steps:** Fix the wrong connection color problem in the next step ([#477](https://github.com/arco-design/arco-design-vue/pull/477))\n\n\n## 2.12.2\n\n`2021-12-27`\n\n### 🐛 BugFix\n\n- **modal:** Fix the problem of invalid modalStyle ([#459](https://github.com/arco-design/arco-design-vue/pull/459))\n- **modal:** Fix the problem that the flex layout causes vertical centering and incomplete display beyond the height ([#459](https://github.com/arco-design/arco-design-vue/pull/459))\n\n\n## 2.12.1\n\n`2021-12-24`\n\n### 🐛 BugFix\n\n- **upload:** Fix the problem of wrong photo wall mode ([#457](https://github.com/arco-design/arco-design-vue/pull/457))\n\n\n## 2.12.0\n\n`2021-12-24`\n\n### ⚠️ Important Attention\n\n- **modal:** Modify the way the wrapper layer displays modal, and add the `width` and `top` attributes ([#454](https://github.com/arco-design/arco-design-vue/pull/454))\n- **textarea:** The calculation of max-length no longer excludes carriage returns, which is consistent with the React version ([#452](https://github.com/arco-design/arco-design-vue/pull/452))\n- **input:** The change event is only triggered when the value changes ([#452](https://github.com/arco-design/arco-design-vue/pull/452))\n- **input-number:** Modify the change event to be triggered only when out of focus and press Enter to solve the problem that the control cannot be input ([#452](https://github.com/arco-design/arco-design-vue/pull/452))\n\n### 💎 Enhancement\n\n- **badge:** No longer render the logo when count is 0 ([#445](https://github.com/arco-design/arco-design-vue/pull/445))\n\n### 🆕 Feature\n\n- Icon component adds size attribute ([#455](https://github.com/arco-design/arco-design-vue/pull/455))\n- **input:** `max-length` adds `errorOnly` attribute and `word-slice` attribute ([#451](https://github.com/arco-design/arco-design-vue/pull/451))\n- **textarea:** `max-length` adds `errorOnly` attribute and `word-slice` attribute ([#451](https://github.com/arco-design/arco-design-vue/pull/451))\n- **input-number:** Add support for input slot ([#451](https://github.com/arco-design/arco-design-vue/pull/451))\n- **link:** Add click event ([#450](https://github.com/arco-design/arco-design-vue/pull/450))\n- **drawer:** Add unmount-on-close attribute ([#449](https://github.com/arco-design/arco-design-vue/pull/449))\n- **switch:** Added `checked-value` and `unchecked-value` attributes ([#444](https://github.com/arco-design/arco-design-vue/pull/444))\n- **switch:** Added `checked-color` and `unchecked-color` attributes ([#444](https://github.com/arco-design/arco-design-vue/pull/444))\n\n### 🐛 BugFix\n\n- **modal:** Fix the problem that the button content cannot be modified dynamically ([#453](https://github.com/arco-design/arco-design-vue/pull/453))\n- **affix:** Fix the problem of displaying warning when used in combination with the anchor component ([#448](https://github.com/arco-design/arco-design-vue/pull/448))\n- **progress:** Fix the display value precision problem ([#447](https://github.com/arco-design/arco-design-vue/pull/447))\n- **upload:** Fix the problem that tip is not displayed in button mode ([#446](https://github.com/arco-design/arco-design-vue/pull/446))\n- **upload:** Fix the bug that the disabled style of the `upload` component does not take effect ([#430](https://github.com/arco-design/arco-design-vue/pull/430))\n\n### 💅 Style\n\n- **table:** Fix the problem of extra border on the last row in table scroll mode ([#456](https://github.com/arco-design/arco-design-vue/pull/456))\n\n\n## 2.11.1\n\n`2021-12-20`\n\n### 🐛 BugFix\n\n- **input-tag:** Fix the problem of Chinese input failure caused by resize ([#428](https://github.com/arco-design/arco-design-vue/pull/428))\n- **dropdown:** Fix the problem that Group is unavailable when using JSX ([#427](https://github.com/arco-design/arco-design-vue/pull/427))\n- **select:** Fix the problem that Group is unavailable when using JSX ([#427](https://github.com/arco-design/arco-design-vue/pull/427))\n\n\n## 2.11.0\n\n`2021-12-17`\n\n### 🆕 Feature\n\n- **upload:** Add `download` attribute ([#418](https://github.com/arco-design/arco-design-vue/pull/418))\n- **space:** add property `fill` ([#415](https://github.com/arco-design/arco-design-vue/pull/415))\n- **menu:** add icon slot for`sub-menu` and `menu-item` ([#412](https://github.com/arco-design/arco-design-vue/pull/412))\n- **table:** `columns` added cellStyle property ([#411](https://github.com/arco-design/arco-design-vue/pull/411))\n- **upload:** add `show-remove-buttoon` and `show-retry-button` and `show-cancel-button` property ([#396](https://github.com/arco-design/arco-design-vue/pull/396))\n- **upload:** add `imageLoading` property ([#396](https://github.com/arco-design/arco-design-vue/pull/396))\n- **drawer:** add property  `footer` ([#394](https://github.com/arco-design/arco-design-vue/pull/394))\n\n### 🐛 BugFix\n\n- **upload:** Fix the problem of the wrong position of the icon in the upload ([#417](https://github.com/arco-design/arco-design-vue/pull/417))\n- **upload:** Fix the problem that not all files are obtained by the second parameter of `beforeUpload` when uploading folders by dragging and dropping ([#417](https://github.com/arco-design/arco-design-vue/pull/417))\n- **upload:** Fix the problem that the dragging style flashes when the mouse enters the internal text when dragging and uploading ([#417](https://github.com/arco-design/arco-design-vue/pull/417))\n- **table:** Fix the problem of inconsistent width between the header and the main body caused by the change of the table size in the fixed column mode ([#410](https://github.com/arco-design/arco-design-vue/pull/410))\n- **tabs:** Fix the problem that scrolling is not recalculated when the width of the tab bar changes ([#409](https://github.com/arco-design/arco-design-vue/pull/409))\n- **tabs:** Fix the problem that the indicator width cannot follow the update when the width of the label option changes ([#409](https://github.com/arco-design/arco-design-vue/pull/409))\n- **input-tag:** Fix the problem that the internal input size is calculated incorrectly in some cases ([#408](https://github.com/arco-design/arco-design-vue/pull/408))\n- **input-number:** Fix the problem of displaying errors when `model-value` is 0 ([#407](https://github.com/arco-design/arco-design-vue/pull/407))\n- **trigger:** Fix the problem of the wrong position of the pop-up layer caused by the change of container size ([#406](https://github.com/arco-design/arco-design-vue/pull/406))\n- **trigger:** Fix the problem that the pop-up layer is closed due to the hover method in nested use ([#406](https://github.com/arco-design/arco-design-vue/pull/406))\n- **tree-select:** fix the problem that search is invalid when rename the key field ([#405](https://github.com/arco-design/arco-design-vue/pull/405))\n- **anchor:** Fix the problem that the hash position will not be located after loading ([#400](https://github.com/arco-design/arco-design-vue/pull/400))\n- **cascader:** Fix the problem that the level totalLevel is calculated incorrectly ([#399](https://github.com/arco-design/arco-design-vue/pull/399))\n- **modal:** Fix the problem that the `alignCenter` property does not take effect ([#384](https://github.com/arco-design/arco-design-vue/pull/384))\n- **modal:** The `alignCenter` property of the adjustment component defaults to `true` ([#384](https://github.com/arco-design/arco-design-vue/pull/384))\n\n### 💅 Style\n\n- **menu:** Fix the problem of height overflow when the sidebar is collapsible ([#416](https://github.com/arco-design/arco-design-vue/pull/416))\n\n\n## 2.10.1\n\n`2021-12-14`\n\n### 🐛 BugFix\n\n- **cascader:** Fix the problem of counting errors when there is an empty sub-menu in multi-select mode ([#388](https://github.com/arco-design/arco-design-vue/pull/388))\n- **dropdown:** Fix <doption> component disabled failure and attribute inheritance issues ([#385](https://github.com/arco-design/arco-design-vue/pull/385))\n- **select:** Fix the problem of disabled in the options attribute ([#385](https://github.com/arco-design/arco-design-vue/pull/385))\n- **select:** Fix the problem that the bordered property does not take effect, add an example ([#385](https://github.com/arco-design/arco-design-vue/pull/385))\n- **trigger:** Fix the problem that the pop-up layer size change will not trigger the update ([#382](https://github.com/arco-design/arco-design-vue/pull/382))\n- **trigger:** Fix the problem that the position and adaptation in `align-point` mode do not take effect ([#382](https://github.com/arco-design/arco-design-vue/pull/382))\n- **card:** Fix the problem that the content of slots is not updated ([#380](https://github.com/arco-design/arco-design-vue/pull/380))\n\n### 💅 Style\n\n- **popconfirm:** Fix the component style problem, and adjust the default size of the button to `mini`, which is consistent with React ([#390](https://github.com/arco-design/arco-design-vue/pull/390))\n- **input-tag:** Fix the component height problem ([#383](https://github.com/arco-design/arco-design-vue/pull/383))\n- **input-tag:** Fix the width of the component close button ([#383](https://github.com/arco-design/arco-design-vue/pull/383))\n\n### 🆎 TypeScript\n\n- **modal:** `ModalConfig` adds `simple` attribute annotation ([#389](https://github.com/arco-design/arco-design-vue/pull/389))\n\n\n## 2.10.0\n\n`2021-12-10`\n\n### 💎 Enhancement\n\n- **select:** When the input box is editable, clicking will not close the drop-down menu ([#348](https://github.com/arco-design/arco-design-vue/pull/348))\n- **cascader:** When the input box is editable, clicking will not close the drop-down menu ([#348](https://github.com/arco-design/arco-design-vue/pull/348))\n\n### 🆕 Feature\n\n- **tabs:** Add headerPadding property and enable it by default ([#362](https://github.com/arco-design/arco-design-vue/pull/362))\n- **form:** `form-item` adds layout and class name related attributes ([#361](https://github.com/arco-design/arco-design-vue/pull/361))\n- **table:** Add span-method prop ([#360](https://github.com/arco-design/arco-design-vue/pull/360))\n- **collapse:** key adds support for number ([#358](https://github.com/arco-design/arco-design-vue/pull/358))\n- **dropdown:** Add footer slot ([#350](https://github.com/arco-design/arco-design-vue/pull/350))\n- **cascader:** Add checkStrictly prop ([#349](https://github.com/arco-design/arco-design-vue/pull/349))\n- **select:** Add fallback-option and show-extra-options attributes ([#347](https://github.com/arco-design/arco-design-vue/pull/347))\n- **grid:** add `flex` property to `a-col` ([#340](https://github.com/arco-design/arco-design-vue/pull/340))\n\n### 🐛 BugFix\n\n- **input-number:** Fix the problem of repeatable input of `-` and `.` ([#359](https://github.com/arco-design/arco-design-vue/pull/359))\n- **statistic:** Fix the problem that it does not take effect when precision is 0 ([#357](https://github.com/arco-design/arco-design-vue/pull/357))\n- **tabs:** Fix the problem of tab closable failure in editable mode ([#356](https://github.com/arco-design/arco-design-vue/pull/356))\n- **menu:** fix the problem that the width of the menu cannot fill the parent element ([#346](https://github.com/arco-design/arco-design-vue/pull/346))\n- **carousel:** The out subitem is not hidden ([#343](https://github.com/arco-design/arco-design-vue/pull/343))\n- **select:** Fix the problem of warnings when components are used in JSX, and variables cannot be used in slots ([#347](https://github.com/arco-design/arco-design-vue/pull/347))\n- **select:** Fix the problem that the drop-down menu cannot pop up when the icon is clicked for the first time in the multi-select input box ([#347](https://github.com/arco-design/arco-design-vue/pull/347))\n\n### 💅 Style\n\n- **textarea:** Fix the style problem of prohibited mode ([#355](https://github.com/arco-design/arco-design-vue/pull/355))\n- **message:** Use flex layout to display message ([#354](https://github.com/arco-design/arco-design-vue/pull/354))\n- **modal:** Fix the problem of modal information display mode error ([#351](https://github.com/arco-design/arco-design-vue/pull/351))\n- **modal:** The title bar close button is not displayed in simple mode ([#351](https://github.com/arco-design/arco-design-vue/pull/351))\n- **input-tag:** Optimize label animation and close button style ([#345](https://github.com/arco-design/arco-design-vue/pull/345))\n\n\n## 2.9.0\n\n`2021-12-03`\n\n### 🆕 Feature\n\n- **drawer:** `Drawer` supports okButtonProps & cancelButtonProps ([#325](https://github.com/arco-design/arco-design-vue/pull/325))\n- **pagination:** Modify and add slots, support template customization ([#324](https://github.com/arco-design/arco-design-vue/pull/324))\n- **tree:** add prop default-expand-selected default-expand-checked auto-expand-parent ([#322](https://github.com/arco-design/arco-design-vue/pull/322))\n- **steps:** add title props ([#316](https://github.com/arco-design/arco-design-vue/pull/316))\n\n### 🐛 BugFix\n\n- **table:** Fix the problem that the tree expand button triggers form submission ([#321](https://github.com/arco-design/arco-design-vue/pull/321))\n- **spin:** Fix the problem that switching states in container mode causes sub-components to reload ([#320](https://github.com/arco-design/arco-design-vue/pull/320))\n- **space:** Fix the problem of rendering v-if nodes ([#318](https://github.com/arco-design/arco-design-vue/pull/318))\n\n\n## 2.8.0\n\n`2021-12-01`\n\n### ⚠️ Important Attention\n\n- **spin:** No additional layer of `<div>` will be added when the container mode is not loaded\n\n### 🆕 Feature\n\n- **textarea:** Add support for min rows and max rows ([#309](https://github.com/arco-design/arco-design-vue/pull/309))\n- **select:** Add support for `tagProps` ([#307](https://github.com/arco-design/arco-design-vue/pull/307))\n- **cascader:** Add support for `tagProps` ([#307](https://github.com/arco-design/arco-design-vue/pull/307))\n- **input-tag:** Add support for `tagProps` ([#307](https://github.com/arco-design/arco-design-vue/pull/307))\n- **menu:** add prop    auto-open-selected ([#306](https://github.com/arco-design/arco-design-vue/pull/306))\n- **result:** Added `extra` slot and `default` slot ([#302](https://github.com/arco-design/arco-design-vue/pull/302))\n- **list:** Add the display of empty data ([#296](https://github.com/arco-design/arco-design-vue/pull/296))\n- Add the font-family on the body ([#287](https://github.com/arco-design/arco-design-vue/pull/287))\n\n### 🐛 BugFix\n\n- **form:** Fix the problem of invalid setting of null value in `setFields` method ([#311](https://github.com/arco-design/arco-design-vue/pull/311))\n- **auto-complete:** Fix the problem that disabled is unavailable ([#310](https://github.com/arco-design/arco-design-vue/pull/310))\n- **pagination:** Fix the problem that the input box and the number selector are not disabled when the `disabled` property is set to true ([#297](https://github.com/arco-design/arco-design-vue/pull/297))\n- **drawer:** Fix the problem that the drawer is still in the fixed layout when setting the popup-container property ([#297](https://github.com/arco-design/arco-design-vue/pull/297))\n- **input-number:** Fix the problem that the button does not add size in button mode ([#293](https://github.com/arco-design/arco-design-vue/pull/293))\n- **tree:** Update checked keys after load more ([#206](https://github.com/arco-design/arco-design-vue/pull/206))\n\n### 💅 Style\n\n- **radio:** Remove the selected bold effect in button mode ([#308](https://github.com/arco-design/arco-design-vue/pull/308))\n- **cascader:** Remove the option to select the bold effect ([#308](https://github.com/arco-design/arco-design-vue/pull/308))\n\n\n## 2.7.0\n\n`2021-11-26`\n\n### 🆕 Feature\n\n- **progress:** Add `track-color` prop ([#277](https://github.com/arco-design/arco-design-vue/pull/277))\n- **pagination:** add `base-size` & `buffer-size` props ([#275](https://github.com/arco-design/arco-design-vue/pull/275))\n- Added support for smart prompts for web-types and vetur ([#272](https://github.com/arco-design/arco-design-vue/pull/272))\n- **form:** Add `rules` prop ([#271](https://github.com/arco-design/arco-design-vue/pull/271))\n- **dropdown:** Add `disabled` prop ([#270](https://github.com/arco-design/arco-design-vue/pull/270))\n- **descriptions:** Add the `align` prop ([#268](https://github.com/arco-design/arco-design-vue/pull/268))\n- **table:** Add `footer` slot ([#266](https://github.com/arco-design/arco-design-vue/pull/266))\n- **table:** In normal mode, the scroll bar will be turned on when the table width is larger than the container ([#266](https://github.com/arco-design/arco-design-vue/pull/266))\n- **avatar:** supports `maxStyle` and `maxPopoverTriggerProps` properties. ([#242](https://github.com/arco-design/arco-design-vue/pull/242))\n- **modal:** Added `on-before-ok` and `on-before-cancel` property events ([#229](https://github.com/arco-design/arco-design-vue/pull/229))\n- **drawer:** Added `on-before-ok` and `on-before-cancel` property events ([#229](https://github.com/arco-design/arco-design-vue/pull/229))\n- **popconfirm:** Added `on-before-ok` and `on-before-cancel` property events ([#229](https://github.com/arco-design/arco-design-vue/pull/229))\n- **link:** Add icon setting via `icon` property/slot property or slot ([#226](https://github.com/arco-design/arco-design-vue/pull/226))\n- **mention:** Add `type` prop ([#205](https://github.com/arco-design/arco-design-vue/pull/205))\n\n### 🐛 BugFix\n\n- **input:** Fix the problem that the enter key of the numeric keyboard does not trigger `press-enter` ([#273](https://github.com/arco-design/arco-design-vue/pull/273))\n- **modal:** Fix the issue of initial triggering of the `open` event ([#267](https://github.com/arco-design/arco-design-vue/pull/267))\n- **drawer:** Fix the issue of initial triggering of the `open` event ([#267](https://github.com/arco-design/arco-design-vue/pull/267))\n- **menu:** the prop trigger-props take no effect ([#265](https://github.com/arco-design/arco-design-vue/pull/265))\n- **menu:** Horizontal menu items are not displayed normally when they are collapsed and then expanded ([#264](https://github.com/arco-design/arco-design-vue/pull/264))\n\n### 💅 Style\n\n- **steps:** Fix the problem of the connection color of the vertical step bar ([#276](https://github.com/arco-design/arco-design-vue/pull/276))\n- Fix the problem that the outer border of the icon will appear when selecting the icon in the new version of the browser ([#274](https://github.com/arco-design/arco-design-vue/pull/274))\n- **descriptions:** Modify the style of the value area to support line-wrapping text ([#269](https://github.com/arco-design/arco-design-vue/pull/269))\n- **tree:** let the content of tree node centerd in vertical ([#260](https://github.com/arco-design/arco-design-vue/pull/260))\n\n\n## 2.6.1\n\n`2021-11-24`\n\n### 💎 Enhancement\n\n- **table:** Do not scroll when data is empty ([#245](https://github.com/arco-design/arco-design-vue/pull/245))\n\n### 🐛 BugFix\n\n- **trigger:** Fix the problem of triggering errors when nesting different types of `<trigger>` ([#244](https://github.com/arco-design/arco-design-vue/pull/244))\n- **page-header:** Fix the problem that the dividing line is still displayed when there is no subtitle ([#224](https://github.com/arco-design/arco-design-vue/pull/224))\n- **table:** Fix the issue that the expand row button triggers form submission ([#210](https://github.com/arco-design/arco-design-vue/pull/210))\n- **steps:** Fix the problem that the `status` attribute in the `<step>` component does not take effect ([#209](https://github.com/arco-design/arco-design-vue/pull/209))\n- **form:** Fix the problem that the additional content style of the form does not take effect ([#208](https://github.com/arco-design/arco-design-vue/pull/208))\n\n### 🆎 TypeScript\n\n- Fix the issue of type warning in the console when using input components in `<form>` ([#247](https://github.com/arco-design/arco-design-vue/pull/247))\n\n\n## 2.6.0\n\n`2021-11-19`\n\n### 🆕 Feature\n\n- **input-tag:** Add support for backspace key ([#202](https://github.com/arco-design/arco-design-vue/pull/202))\n- **select:** Add `footer` slot ([#201](https://github.com/arco-design/arco-design-vue/pull/201))\n- **textarea:** Add `word-length` attribute ([#199](https://github.com/arco-design/arco-design-vue/pull/199))\n- **trigger:** Add `prevent-focus` property ([#197](https://github.com/arco-design/arco-design-vue/pull/197))\n- **select:** Add `trigger-props` property ([#197](https://github.com/arco-design/arco-design-vue/pull/197))\n- **cascader:** Add `trigger-props` property ([#197](https://github.com/arco-design/arco-design-vue/pull/197))\n\n### 🐛 BugFix\n\n- **select:** Fix the problem that the `data` parameter is not sent from the `option` slot ([#200](https://github.com/arco-design/arco-design-vue/pull/200))\n- **upload:** Fix the problem of overflow when the picture name is too long ([#198](https://github.com/arco-design/arco-design-vue/pull/198))\n- **upload:** Fix the problem that the photo wall mode cannot wrap when it exceeds the length ([#198](https://github.com/arco-design/arco-design-vue/pull/198))\n- Fix the problem that input type components repeatedly get focus ([#196](https://github.com/arco-design/arco-design-vue/pull/196))\n- **date-picker:** Fix the problem of abnormal verification in form ([#195](https://github.com/arco-design/arco-design-vue/pull/195))\n\n### 💅 Style\n\n- **menu:** pop menu adapts to dark theme ([#193](https://github.com/arco-design/arco-design-vue/pull/193))\n\n\n## 2.5.0\n\n`2021-11-18`\n\n### ⚠️ Important Attention\n\n- **select:** Move the custom rendering of `options.label` added in 2.4.0 to `options.render` ([#183](https://github.com/arco-design/arco-design-vue/pull/183))\n- **cascader:** Move the custom rendering of `options.label` added in 2.4.0 to `options.render` ([#183](https://github.com/arco-design/arco-design-vue/pull/183))\n\n### 🆕 Feature\n\n- **select:** `<option>` Add label prop support ([#183](https://github.com/arco-design/arco-design-vue/pull/183))\n\n### 🐛 BugFix\n\n- **tree-select:** cannot select the option with key 0 ([#185](https://github.com/arco-design/arco-design-vue/pull/185))\n- Fix the problem that the input type component cannot get the focus in the pop-up layer ([#184](https://github.com/arco-design/arco-design-vue/pull/184))\n- Fix the problem of pop-up component `z-index` error ([#182](https://github.com/arco-design/arco-design-vue/pull/182))\n\n\n## 2.4.0\n\n`2021-11-17`\n\n### 💎 Enhancement\n\n- **modal:** Manage the zIndex of the popup ([#167](https://github.com/arco-design/arco-design-vue/pull/167))\n\n### 🆕 Feature\n\n- **cascader:** Add `options.value` number type and `options.label` custom rendering support ([#176](https://github.com/arco-design/arco-design-vue/pull/176))\n- **upload:** Added `upload-button` and `upload-item` slots ([#174](https://github.com/arco-design/arco-design-vue/pull/174))\n- **upload:** Added `success` and `error` events ([#174](https://github.com/arco-design/arco-design-vue/pull/174))\n- **upload:** Add `on-click-button`, `custom-icon`, `directory` attributes ([#174](https://github.com/arco-design/arco-design-vue/pull/174))\n- **drawer:** `width` and `height` added support for character types ([#172](https://github.com/arco-design/arco-design-vue/pull/172))\n- **select:** Add `option` slot ([#170](https://github.com/arco-design/arco-design-vue/pull/170))\n- **select:** `options.label` supports custom rendering ([#170](https://github.com/arco-design/arco-design-vue/pull/170))\n- **tree:** `key` support `number` ([#169](https://github.com/arco-design/arco-design-vue/pull/169))\n\n### 🐛 BugFix\n\n- **cascader:** Fix the problem that the search input box cannot be scrolled ([#175](https://github.com/arco-design/arco-design-vue/pull/175))\n- **form:** Fix the problem that the input of null in the `filed` field causes an error to be reported ([#173](https://github.com/arco-design/arco-design-vue/pull/173))\n- **input-tag:** Fix Chinese input method problem ([#171](https://github.com/arco-design/arco-design-vue/pull/171))\n- **input-tag:** Fix the issue that the Enter key triggers form submission ([#171](https://github.com/arco-design/arco-design-vue/pull/171))\n- **trigger:** Fix the problem of `<svg>` element positioning error ([#162](https://github.com/arco-design/arco-design-vue/pull/162))\n- **input-tag:** fix tag can be close in the disabled state ([#161](https://github.com/arco-design/arco-design-vue/pull/161))\n\n### 💅 Style\n\n- **image:** set the max size of error to fit parent ([#160](https://github.com/arco-design/arco-design-vue/pull/160))\n\n\n## 2.3.0\n\n`2021-11-12`\n\n### 🆕 Feature\n\n- **form:** Add `setFields` method ([#150](https://github.com/arco-design/arco-design-vue/pull/150))\n- **message:** Added `onClose` callback method ([#149](https://github.com/arco-design/arco-design-vue/pull/149))\n- **message:** Added `loading` method ([#149](https://github.com/arco-design/arco-design-vue/pull/149))\n- **notification:** Added `onClose` callback method ([#149](https://github.com/arco-design/arco-design-vue/pull/149))\n- **alert:** Add `#action` slot ([#148](https://github.com/arco-design/arco-design-vue/pull/148))\n\n### 🐛 BugFix\n\n- **table:** Fix the problem that `<table-column>` is wrong in the header of the grouping table ([#151](https://github.com/arco-design/arco-design-vue/pull/151))\n- **menu:** Fix the problem that the parent menu is not selected when nesting custom components ([#147](https://github.com/arco-design/arco-design-vue/pull/147))\n- **alert:** Fix the problem of incorrect name export by alert ([#142](https://github.com/arco-design/arco-design-vue/pull/142))\n- **textarea:** Fix the problem that `disabled` does not take effect ([#139](https://github.com/arco-design/arco-design-vue/pull/139))\n- **textarea:** Fix the issue of missing `style/index.js` ([#139](https://github.com/arco-design/arco-design-vue/pull/139))\n- **breadcrumb:** Fix the problem of `breadcrumb-item` not inheriting Attribute ([#137](https://github.com/arco-design/arco-design-vue/pull/137))\n- **tree:** Fix the problem that the setting of `default-checked-keys` is invalid ([#131](https://github.com/arco-design/arco-design-vue/pull/131))\n- Reset VNode cache when virtual list `data` changes ([#129](https://github.com/arco-design/arco-design-vue/pull/129))\n\n\n## 2.2.0\n\n`2021-11-10`\n\n### 🆕 Feature\n\n- **table:** Add `row-key` prop ([#128](https://github.com/arco-design/arco-design-vue/pull/128))\n- **table:** Add `expandedRowRender` and `icon` props in `expandable` ([#128](https://github.com/arco-design/arco-design-vue/pull/128))\n- **table:** Add `expand-icon` and `expand-row` slots ([#128](https://github.com/arco-design/arco-design-vue/pull/128))\n\n### 🐛 BugFix\n\n- **table:** Fix the problem that the table operation items in the header grouping are occupied incorrectly ([#127](https://github.com/arco-design/arco-design-vue/pull/127))\n- **trigger:** Fix the problem of invalid state switching of `disabled` ([#126](https://github.com/arco-design/arco-design-vue/pull/126))\n- **upload:** Fix the problem of invalid `limit` prop ([#123](https://github.com/arco-design/arco-design-vue/pull/123))\n- **typography:** Fixed the problem of unable input ([#121](https://github.com/arco-design/arco-design-vue/pull/121))\n\n\n## 2.1.1\n\n`2021-11-08`\n\n### 💎 Enhancement\n\n- **menu:** Change the default expansion method of pop-up `menu` to hover ([#111](https://github.com/arco-design/arco-design-vue/pull/111))\n\n### 🐛 BugFix\n\n- **modal:** Fix the problem that the `title` attribute does not take effect ([#116](https://github.com/arco-design/arco-design-vue/pull/116))\n- **image:** Fix the problem that the height limit of the img is invalid ([#115](https://github.com/arco-design/arco-design-vue/pull/115))\n- **input-number:** Fix the problem of inputting the negative sign error ([#114](https://github.com/arco-design/arco-design-vue/pull/114))\n- **textarea:** Fix the problem of internal loop update in `autoSize` mode ([#113](https://github.com/arco-design/arco-design-vue/pull/113))\n- **popconfirm:** Fix the problem that the parameters of the `ok/cancel` button are lost ([#105](https://github.com/arco-design/arco-design-vue/pull/105))\n\n\n## 2.1.0\n\n`2021-11-05`\n\n### 💎 Enhancement\n\n- **tree-select:** The clickable range of options occupies the entire row by default ([#90](https://github.com/arco-design/arco-design-vue/pull/90))\n- **tabs:** Optimize the scrolling method of the tab bar ([#87](https://github.com/arco-design/arco-design-vue/pull/87))\n- **trigger:** Move the `outsideClickHandler` to the `document` ([#76](https://github.com/arco-design/arco-design-vue/pull/76))\n\n### 🆕 Feature\n\n- **table:** Add the `#title` slot in `table-column` ([#95](https://github.com/arco-design/arco-design-vue/pull/95))\n- **form:** Add `hideAsterisk` prop ([#94](https://github.com/arco-design/arco-design-vue/pull/94))\n- **input:** Add `wordLength` prop ([#91](https://github.com/arco-design/arco-design-vue/pull/91))\n- **spin:** Add size prop and icon & element slot ([#86](https://github.com/arco-design/arco-design-vue/pull/86))\n- **image:** Add a slot named error-icon to support custom error status icon ([#85](https://github.com/arco-design/arco-design-vue/pull/85))\n- Add `Japanese` support ([#13](https://github.com/arco-design/arco-design-vue/pull/13))\n\n### 🐛 BugFix\n\n- **slider:** Fixed the problem that the right click did not release the drag event ([#97](https://github.com/arco-design/arco-design-vue/pull/97))\n- **select:** Fix the issue of `#empty` slot loss ([#96](https://github.com/arco-design/arco-design-vue/pull/96))\n- **input-number:** Fix the problem of invalid accuracy ([#93](https://github.com/arco-design/arco-design-vue/pull/93))\n- **input-tag:** Fix the problem that the width of the input box is calculated incorrectly ([#89](https://github.com/arco-design/arco-design-vue/pull/89))\n- **input:** Remove `preventDefault` of keyDown event ([#84](https://github.com/arco-design/arco-design-vue/pull/84))\n- **table:** Fix the issue that `#column` slot cannot support Fragment ([#83](https://github.com/arco-design/arco-design-vue/pull/83))\n- **table:** Fix the problem that `scroll.x` does not take effect when used alone ([#83](https://github.com/arco-design/arco-design-vue/pull/83))\n- **textarea:** Fix the problem of inaccurate automatic height adjustment ([#78](https://github.com/arco-design/arco-design-vue/pull/78))\n- **input:** Fix the issue that the `a-input-number` component `model-value` does not take effect when the default value is 0 ([#75](https://github.com/arco-design/arco-design-vue/pull/75))\n- **input:** Fix the problem that `input-search` and `input-password` do not support `slot` ([#63](https://github.com/arco-design/arco-design-vue/pull/63))\n- **input:** Fix the problem that the cursor position is lost when `input-password` is switched to the visible state of the password ([#63](https://github.com/arco-design/arco-design-vue/pull/63))\n\n### 💅 Style\n\n- **input:** Modify the style of `clear-btn` to solve the problem that `select-view` may jitter ([#70](https://github.com/arco-design/arco-design-vue/pull/70))\n\n\n## 2.0.3\n\n`2021-10-29`\n\n### 🐛 BugFix\n\n- **select:** Fix the clear button is not displayed in multi-select mode ([#38](https://github.com/arco-design/arco-design-vue/pull/38))\n- **modal:** Fix the problem of the wrong type of the main button ([#30](https://github.com/arco-design/arco-design-vue/pull/30))\n- **drawer:** Fix the problem of the wrong type of the main button ([#30](https://github.com/arco-design/arco-design-vue/pull/30))\n- **table:** Fix the display of scroll bar in `scroll` mode, causing cell misalignment ([#29](https://github.com/arco-design/arco-design-vue/pull/29))\n- **collapse:** Fix the problem that the `accordion` mode cannot be folded\n\n## 2.0.2\n\n`2021-10-26`\n\n- Component library default font adjustment\n\n## 2.0.1\n\n`2021-10-25`\n\n- Update `package.json` info\n\n## 2.0.0\n\n`2021-10-24`\n\n- 🏆 Arco Design Vue 2.0 official version is released!\n"
  },
  {
    "path": "packages/web-vue/CHANGELOG.zh-CN.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.57.0\n\n`2025-03-10`\n\n### 🆕 新增功能\n\n- **input:** 新增`prepend`、`append`属性 ([#3452](https://github.com/arco-design/arco-design-vue/pull/3452))\n- **drawer:** 增加 bodyClass 和 bodyStyle ([#3437](https://github.com/arco-design/arco-design-vue/pull/3437))\n\n### 🐛 问题修复\n\n- **form:** 修复表单 `id` 属性被消费无法透传问题 ([#3450](https://github.com/arco-design/arco-design-vue/pull/3450))\n- **input:** 修复 input 内 preValue 计算错误问题 ([#3427](https://github.com/arco-design/arco-design-vue/pull/3427))\n- **tabs:** 解决`wheel`事件监听器性能警告 ([#3413](https://github.com/arco-design/arco-design-vue/pull/3413))\n- **tabs:** 优化标签页动态增减时内存释放问题 ([#3413](https://github.com/arco-design/arco-design-vue/pull/3413))\n- **descriptions:** 修复 `span` 分配布局的错误使其更遵循用户配置 ([#3409](https://github.com/arco-design/arco-design-vue/pull/3409))\n- **message:** 修复 message 定位会受到布局影响，从而不显示的问题 ([#3406](https://github.com/arco-design/arco-design-vue/pull/3406))\n- **table:** 修复暗黑模式下固定列选中背景样式透明 ([#3398](https://github.com/arco-design/arco-design-vue/pull/3398))\n- **slider:** 修复拖动更改滑块值在移动端无效 ([#3343](https://github.com/arco-design/arco-design-vue/pull/3343))\n\n### 💎 功能优化\n\n- **modal:** 修复执行 onBeforeOk  时错误未传播的问题 ([#3407](https://github.com/arco-design/arco-design-vue/pull/3407))\n- **drawer:** 修复执行 onBeforeOk  时错误未传播的问题 ([#3407](https://github.com/arco-design/arco-design-vue/pull/3407))\n- **popconfirm:** 修复执行 onBeforeOk  时错误未传播的问题 ([#3407](https://github.com/arco-design/arco-design-vue/pull/3407))\n\n\n## 2.56.3\n\n`2024-10-25`\n\n### 🆕 新增功能\n\n- **button:** 支持button的autofocus属性 ([#3293](https://github.com/arco-design/arco-design-vue/pull/3293))\n\n### 🐛 问题修复\n\n- 修复高棉语翻译 ([#3328](https://github.com/arco-design/arco-design-vue/pull/3328))\n- **cascader:** 修复自定义空插槽部分情况下不生效问题 ([#3315](https://github.com/arco-design/arco-design-vue/pull/3315))\n- **input-number:** 修复左右按钮模式下只读属性不生效问题 ([#3314](https://github.com/arco-design/arco-design-vue/pull/3314))\n\n### 💎 功能优化\n\n- **textarea:** 支持textarea的textareaAttrs属性 ([#3303](https://github.com/arco-design/arco-design-vue/pull/3303))\n\n\n## 2.56.2\n\n`2024-09-13`\n\n### 🆕 新增功能\n\n- 新增俄语 ([#3290](https://github.com/arco-design/arco-design-vue/pull/3290))\n\n### 🐛 问题修复\n\n- **select:** fix(switch): 修复当加载状态被真值初始化后无法受控 ([#3285](https://github.com/arco-design/arco-design-vue/pull/3285))\n- **calendar:** 修复modes 不生效问题 ([#3281](https://github.com/arco-design/arco-design-vue/pull/3281))\n- **radio:** 修复未继承注入的size问题 ([#3267](https://github.com/arco-design/arco-design-vue/pull/3267))\n\n### 🆎 类型修正\n\n- **card:** 更新headerStyle与bodyStyle的类型 ([#3268](https://github.com/arco-design/arco-design-vue/pull/3268))\n\n\n## 2.56.1\n\n`2024-08-22`\n\n### 🆕 新增功能\n\n- **select:** 增加 `tagNowrap` 选项 ([#3270](https://github.com/arco-design/arco-design-vue/pull/3270))\n\n\n## 2.56.0\n\n`2024-07-26`\n\n### 🆕 新增功能\n\n- **input-number:** 增加 'keydown' 事件，可以禁止默认行为 ([#3248](https://github.com/arco-design/arco-design-vue/pull/3248))\n\n### 🐛 问题修复\n\n- **tree:** 修复树折叠动画不生效问题 ([#3234](https://github.com/arco-design/arco-design-vue/pull/3234))\n- **color-picker:** 修复在 v-model 下选择颜色时出现的抖动问题 ([#3180](https://github.com/arco-design/arco-design-vue/pull/3180))\n- **time-picker:** triggerProps 属性未正确透传问题 ([#3178](https://github.com/arco-design/arco-design-vue/pull/3178))\n\n### 💎 功能优化\n\n- **menu:** 修复已选中菜单项中的颜色动画过渡效果 ([#3192](https://github.com/arco-design/arco-design-vue/pull/3192))\n\n\n## 2.55.3\n\n`2024-06-07`\n\n### 🆕 新增功能\n\n- **table:** column 增加 minWidth 属性 ([#3157](https://github.com/arco-design/arco-design-vue/pull/3157))\n\n### 🐛 问题修复\n\n- **time-picker:** 修复只读模式仍可编辑问题 ([#3173](https://github.com/arco-design/arco-design-vue/pull/3173))\n- **time-picker:** 补充 `placeholder` 类型定义 ([#3173](https://github.com/arco-design/arco-design-vue/pull/3173))\n- **input:** 修复只读状态下显示清空输入框按钮 ([#3172](https://github.com/arco-design/arco-design-vue/pull/3172))\n- **table:** 修复虚拟滚动条开启时 sticky-header 吸顶失效 ([#3170](https://github.com/arco-design/arco-design-vue/pull/3170))\n- **table:** table动态切换row-selection时恢复默认样式 ([#3155](https://github.com/arco-design/arco-design-vue/pull/3155))\n\n\n## 2.55.2\n\n`2024-05-10`\n\n### 🐛 问题修复\n\n- **verification-code:** 修复粘贴时`formatter`未生效 ([#3110](https://github.com/arco-design/arco-design-vue/pull/3110))\n- **upload:** 修复上传组件预览样式引入缺失 ([#3101](https://github.com/arco-design/arco-design-vue/pull/3101))\n- **transfer:** 修复 simple 模式下禁用失效 ([#3067](https://github.com/arco-design/arco-design-vue/pull/3067))\n- **color-picker:** 修复样式按需导入错误 ([#3052](https://github.com/arco-design/arco-design-vue/pull/3052))\n\n### 💅 样式更新\n\n- **color-picker:** 优化颜色控制条背景圆角样式 ([#3116](https://github.com/arco-design/arco-design-vue/pull/3116))\n\n### 🆎 类型修正\n\n- correct the type definition for popupContainer ([#2998](https://github.com/arco-design/arco-design-vue/pull/2998))\n\n\n## 2.55.1\n\n`2024-03-29`\n\n### 🐛 问题修复\n\n- **empty:** 修复属性自动继承的错误 ([#3048](https://github.com/arco-design/arco-design-vue/pull/3048))\n- **trigger:** 修正位置的弹出动画方向 ([#3045](https://github.com/arco-design/arco-design-vue/pull/3045))\n- **color-picker:** 修复双向绑定不生效问题 ([#3030](https://github.com/arco-design/arco-design-vue/pull/3030))\n- **color-picker:** 修复文案错误 ([#3028](https://github.com/arco-design/arco-design-vue/pull/3028))\n\n### 💅 样式更新\n\n- **tree:** 修复scrollHeight计算异常问题 ([#3044](https://github.com/arco-design/arco-design-vue/pull/3044))\n\n\n## 2.55.0\n\n`2024-03-15`\n\n### 🆕 新增功能\n\n- **tree-select:** 新增 `input-value` 相关属性 ([#3024](https://github.com/arco-design/arco-design-vue/pull/3024))\n- **tree:** `title` 插槽新增 `title` 参数 ([#3024](https://github.com/arco-design/arco-design-vue/pull/3024))\n- **color-picker:** 新增颜色选择器 ([#2958](https://github.com/arco-design/arco-design-vue/pull/2958))\n\n### 💅 样式更新\n\n- **tabs:** 修复 title 过渡动画效果 ([#3008](https://github.com/arco-design/arco-design-vue/pull/3008))\n\n\n## 2.54.6\n\n`2024-03-01`\n\n### 🐛 问题修复\n\n- **input-number:** 修复步进按钮与 suffix/append 的样式重叠 ([#3005](https://github.com/arco-design/arco-design-vue/pull/3005))\n- **collapse:** 解决 `vue` 保留属性警告 ([#2997](https://github.com/arco-design/arco-design-vue/pull/2997))\n- **transfer:** 修复 disabled 属性不生效问题 ([#2996](https://github.com/arco-design/arco-design-vue/pull/2996))\n- **tree:** 解决无效的属性名称控制台警告问题 ([#2995](https://github.com/arco-design/arco-design-vue/pull/2995))\n\n### 💅 样式更新\n\n- **modal:** 修复遮罩层 fade-modal 过渡动画在进入时不生效问题 ([#3007](https://github.com/arco-design/arco-design-vue/pull/3007))\n\n\n## 2.54.5\n\n`2024-02-21`\n\n### 🐛 问题修复\n\n- **menu:** 修复警告 “Invalid prop name: key is a reserved property.” ([#2978](https://github.com/arco-design/arco-design-vue/pull/2978))\n- **date-picker:** 重构日期 utility 函数和 WeekPicker，以正确显示所选星期 ([#2970](https://github.com/arco-design/arco-design-vue/pull/2970))\n- **input-number:** 修复双向绑定失效 ([#2961](https://github.com/arco-design/arco-design-vue/pull/2961))\n\n\n## 2.54.4\n\n`2024-02-02`\n\n### 🐛 问题修复\n\n- **table:** 修复表格虚拟列表下不显示 empty  问题 ([#2949](https://github.com/arco-design/arco-design-vue/pull/2949))\n- **watermark:** 修复字体颜色不生效问题 ([#2942](https://github.com/arco-design/arco-design-vue/pull/2942))\n- **input-number:** 修复 change 事件触发逻辑 ([#2915](https://github.com/arco-design/arco-design-vue/pull/2915))\n\n\n## 2.54.3\n\n`2024-01-19`\n\n### 🐛 问题修复\n\n- **rate:** 修复在`nuxt`中图标元素缺失的问题 ([#2930](https://github.com/arco-design/arco-design-vue/pull/2930))\n- **avatar:** 修复头像组气泡中部分头像不显示问题 ([#2925](https://github.com/arco-design/arco-design-vue/pull/2925))\n- **image:** 修复错误的类型定义和文档说明 ([#2924](https://github.com/arco-design/arco-design-vue/pull/2924))\n- **image:** 修正单词拼写错误 ([#2924](https://github.com/arco-design/arco-design-vue/pull/2924))\n- **input:** 修正文档单词拼写错误 ([#2924](https://github.com/arco-design/arco-design-vue/pull/2924))\n\n\n## 2.54.2\n\n`2024-01-11`\n\n### 🐛 问题修复\n\n- **table:** 修复 `span-method` 在超出行列数后报错的问题 ([#2914](https://github.com/arco-design/arco-design-vue/pull/2914))\n\n### 💎 功能优化\n\n- **select:** 下拉选择器添加选中效果 ([#2895](https://github.com/arco-design/arco-design-vue/pull/2895))\n\n### 💅 样式更新\n\n- **input:** 修复 input-group 相邻组件样式叠加时的问题 ([#2889](https://github.com/arco-design/arco-design-vue/pull/2889))\n\n\n## 2.54.1\n\n`2023-12-28`\n\n### 🆕 新增功能\n\n- **watermark:** 水印字体色跟随主题变化 ([#2790](https://github.com/arco-design/arco-design-vue/pull/2790))\n- **input:** 新增密码框密码可见性相关属性 ([#2784](https://github.com/arco-design/arco-design-vue/pull/2784))\n\n### 🐛 问题修复\n\n- **select:** 修复 `defaultPopupVisible` 失效的问题 ([#2881](https://github.com/arco-design/arco-design-vue/pull/2881))\n\n\n## 2.54.0\n\n`2023-12-15`\n\n### 🆕 新增功能\n\n- 新增验证码输入组件 ([#2823](https://github.com/arco-design/arco-design-vue/pull/2823))\n\n### 🐛 问题修复\n\n- **date-picker:** 修复日期范围部分模式下箭头点击问题 ([#2865](https://github.com/arco-design/arco-design-vue/pull/2865))\n- **pagination:** 修复页码可能为 `0` 的问题 ([#2828](https://github.com/arco-design/arco-design-vue/pull/2828))\n\n### 💎 功能优化\n\n- **cascader:** 修改 `multiple` 和 `pathMode` 时会触发绑定值的改变 ([#2867](https://github.com/arco-design/arco-design-vue/pull/2867))\n\n### 🆎 类型修正\n\n- **button:** TS类型优化 ([#2825](https://github.com/arco-design/arco-design-vue/pull/2825))\n\n\n## 2.53.3\n\n`2023-11-24`\n\n### 🐛 问题修复\n\n- **input-tag:** 修复 `read-only` 下仍然能被删除的问题 ([#2824](https://github.com/arco-design/arco-design-vue/pull/2824))\n- **date-picker:** 修复日期与format不一致导致出现无效日期 ([#2789](https://github.com/arco-design/arco-design-vue/pull/2789))\n\n\n## 2.53.2\n\n`2023-11-10`\n\n### 🐛 问题修复\n\n- **watermark:** 修复样式按需加载报错问题 ([#2787](https://github.com/arco-design/arco-design-vue/pull/2787))\n\n\n## 2.53.1\n\n`2023-11-08`\n\n### 🐛 问题修复\n\n- **watermark:** 修复组件入口未暴露问题 ([#2782](https://github.com/arco-design/arco-design-vue/pull/2782))\n\n\n## 2.53.0\n\n`2023-11-03`\n\n### 🆕 新增功能\n\n- **watermark:** 新增水印组件 ([#2741](https://github.com/arco-design/arco-design-vue/pull/2741))\n- **calendar:** 新增 `header` 和 `default` 插槽 ([#2674](https://github.com/arco-design/arco-design-vue/pull/2674))\n\n### 🐛 问题修复\n\n- **descriptions:** 修复 `DescriptionsItem` 组件 `span` 属性失效的问题 ([#2765](https://github.com/arco-design/arco-design-vue/pull/2765))\n\n\n## 2.52.1\n\n`2023-10-13`\n\n### 🐛 问题修复\n\n- **mention:** 修复在text-area下disabled属性无法正常工作的问题 ([#2723](https://github.com/arco-design/arco-design-vue/pull/2723))\n\n### 💎 功能优化\n\n- **switch:** 优化对 `undefined` 和 `null` 值的处理 ([#2737](https://github.com/arco-design/arco-design-vue/pull/2737))\n\n\n## 2.52.0\n\n`2023-09-22`\n\n### 🆕 新增功能\n\n- **input-number:** 增加 `input-attrs` 属性 ([#2716](https://github.com/arco-design/arco-design-vue/pull/2716))\n- **transfer:** 增加操作图标插槽 ([#2708](https://github.com/arco-design/arco-design-vue/pull/2708))\n- **avatar:** 添加了新的 `ObjectFit` 属性 ([#2691](https://github.com/arco-design/arco-design-vue/pull/2691))\n- **auto-complete:** 增加下拉菜单滚动事件 ([#2635](https://github.com/arco-design/arco-design-vue/pull/2635))\n\n### 🐛 问题修复\n\n- **date-picker:** 修复范围选择器操作箭头显示错误问题 ([#2712](https://github.com/arco-design/arco-design-vue/pull/2712))\n\n\n## 2.51.2\n\n`2023-09-15`\n\n### 🐛 问题修复\n\n- **form:** 修复field为数组对象时滚动报错问题 ([#2707](https://github.com/arco-design/arco-design-vue/pull/2707))\n\n\n## 2.51.1\n\n`2023-09-08`\n\n### 🐛 问题修复\n\n- **cascader:** 修复开启虚拟列表时空状态不显示 ([#2686](https://github.com/arco-design/arco-design-vue/pull/2686))\n\n\n## 2.51.0\n\n`2023-09-01`\n\n### ⚠️ 重点注意\n\n- **form:** `form-item` 渲染元素增加 `id` 属性，请注意对原始网页的影响\n\n### 🆕 新增功能\n\n- **form:** 新增滚动到指定表单字段 ([#2680](https://github.com/arco-design/arco-design-vue/pull/2680))\n- **table:** 支持显示空子树 ([#2673](https://github.com/arco-design/arco-design-vue/pull/2673))\n- **select:** 支持`boolean` 类型 ([#2661](https://github.com/arco-design/arco-design-vue/pull/2661))\n\n### 🐛 问题修复\n\n- **typography:** 修复按需导入时缺少相关组件样式的问题 ([#2682](https://github.com/arco-design/arco-design-vue/pull/2682))\n\n\n## 2.50.2\n\n`2023-08-25`\n\n### 🐛 问题修复\n\n- 修复虚拟滚动 scrollTop 位置不对 ([#2665](https://github.com/arco-design/arco-design-vue/pull/2665))\n\n### 💎 功能优化\n\n- **input-number:** 优化步长按钮的长按效果 ([#2668](https://github.com/arco-design/arco-design-vue/pull/2668))\n\n\n## 2.50.1\n\n`2023-08-18`\n\n### 🆕 新增功能\n\n- **transfer:** 增加搜索框的配置属性 ([#2656](https://github.com/arco-design/arco-design-vue/pull/2656))\n\n### 🐛 问题修复\n\n- DOM 位置计算兼容 Shadow DOM ([#2649](https://github.com/arco-design/arco-design-vue/pull/2649))\n\n\n## 2.50.0\n\n`2023-08-11`\n\n### ⚠️ 重点注意\n\n- 修正 `Alter` 为 `Alert` ([#2633](https://github.com/arco-design/arco-design-vue/pull/2633))\n\n### 🆕 新增功能\n\n- **image:** 支持键盘快捷、鼠标滚轮操作等一系列功能 ([#2616](https://github.com/arco-design/arco-design-vue/pull/2616))\n- **auto-complete:** 添加虚拟列表支持 ([#2596](https://github.com/arco-design/arco-design-vue/pull/2596))\n- **timeline:** 添加自定义标签插槽 ([#2591](https://github.com/arco-design/arco-design-vue/pull/2591))\n\n### 🐛 问题修复\n\n- 修复全局引入时提示重复注册的问题 ([#2633](https://github.com/arco-design/arco-design-vue/pull/2633))\n- 修复了导致\"␍\"错误的格式问题 ([#2626](https://github.com/arco-design/arco-design-vue/pull/2626))\n\n### 💎 功能优化\n\n- **modal:** 增加 `hide-title` 属性，支持隐藏标题 ([#2605](https://github.com/arco-design/arco-design-vue/pull/2605))\n\n### 🆎 类型修正\n\n- **modal:** 补全 ModalConfig 缺失的属性 ([#2628](https://github.com/arco-design/arco-design-vue/pull/2628))\n- **image:** 添加 ImagePreviewAction 类型声明 ([#2625](https://github.com/arco-design/arco-design-vue/pull/2625))\n\n\n## 2.49.3\n\n`2023-08-04`\n\n### 🐛 问题修复\n\n- **grid:** 修复a-grid-item中使用v-show，初始值为false，但仍展示出来的问题 ([#2604](https://github.com/arco-design/arco-design-vue/pull/2604))\n\n\n## 2.49.2\n\n`2023-07-28`\n\n### 🐛 问题修复\n\n- **statistic:** 修复 `value-style` 在数字内容时不能修改字体大小的问题 ([#2600](https://github.com/arco-design/arco-design-vue/pull/2600))\n- **table:** 修复在固定列中开启调整列宽出现的问题 ([#2598](https://github.com/arco-design/arco-design-vue/pull/2598))\n- **typography:** 增强对连续长单词的省略支持 ([#2583](https://github.com/arco-design/arco-design-vue/pull/2583))\n- **table:** 修复树形表格拖拽问题 ([#2503](https://github.com/arco-design/arco-design-vue/pull/2503))\n\n\n## 2.49.1\n\n`2023-07-24`\n\n### 🐛 问题修复\n\n- **tree-select:** 修复 `border` 属性默认值错误的问题 ([#2580](https://github.com/arco-design/arco-design-vue/pull/2580))\n\n\n## 2.49.0\n\n`2023-07-21`\n\n### 🆕 新增功能\n\n- **cascader:** 增加虚拟列表功能 ([#2577](https://github.com/arco-design/arco-design-vue/pull/2577))\n- **tree-select:** 增加空状态下 header 和 footer 的显示状态 ([#2573](https://github.com/arco-design/arco-design-vue/pull/2573))\n- **input-number:** 增加数值操作自定义图标插槽 ([#2560](https://github.com/arco-design/arco-design-vue/pull/2560))\n- **list:** 滚动最大高度支持字符串类型 ([#2544](https://github.com/arco-design/arco-design-vue/pull/2544))\n\n### 🐛 问题修复\n\n- **table:** 修复 rowClass 函数 record 参数错误的问题 ([#2570](https://github.com/arco-design/arco-design-vue/pull/2570))\n- **tree-select:** 修复 border 属性失效的问题 ([#2568](https://github.com/arco-design/arco-design-vue/pull/2568))\n\n### 💅 样式更新\n\n- **result:** 修复 500 图片错位问题 ([#2578](https://github.com/arco-design/arco-design-vue/pull/2578))\n\n\n## 2.48.1\n\n`2023-07-14`\n\n### 🐛 问题修复\n\n- **image:** 在错误状态下，没有 alt 或description情况图标不垂直居中 ([#2563](https://github.com/arco-design/arco-design-vue/pull/2563))\n- **divider:** 修复竖向自适应高度 ([#2561](https://github.com/arco-design/arco-design-vue/pull/2561))\n- **table:** 修复 `summary-span-method` 属性中传出参数错误的问题 ([#2552](https://github.com/arco-design/arco-design-vue/pull/2552))\n- **table:** 修复子树的合并单元格的bug ([#2540](https://github.com/arco-design/arco-design-vue/pull/2540))\n\n\n## 2.48.0\n\n`2023-06-30`\n\n### 🆕 新增功能\n\n- **config-provider:** 增加 `exchangeTime` 属性 ([#2529](https://github.com/arco-design/arco-design-vue/pull/2529))\n- **table:** 单元格新增鼠标移入移出事件 ([#2489](https://github.com/arco-design/arco-design-vue/pull/2489))\n\n### 🐛 问题修复\n\n- **table:** 增加headerCell下调整列宽高亮 ([#2519](https://github.com/arco-design/arco-design-vue/pull/2519))\n- **list:** 修复virtual-list在数据发生修改时候滚动位置不对 ([#2502](https://github.com/arco-design/arco-design-vue/pull/2502))\n\n\n## 2.47.1\n\n`2023-06-09`\n\n### 🐛 问题修复\n\n- **tree-select:** 修复在虚拟列表下搜索内容不可选择的问题 ([#2488](https://github.com/arco-design/arco-design-vue/pull/2488))\n- **select:** 修复搜索模式下鼠标光标定位问题 ([#2487](https://github.com/arco-design/arco-design-vue/pull/2487))\n- **badge:** 修复组件在自定义 `prefix-cls` 时失效的问题 ([#2476](https://github.com/arco-design/arco-design-vue/pull/2476))\n\n\n## 2.47.0\n\n`2023-06-02`\n\n### ⚠️ 重点注意\n\n- **modal:** 修复Modal.confirm标题缺少warning icon的问题 ([#2465](https://github.com/arco-design/arco-design-vue/pull/2465))\n- **input-number:** `hide-button` 在 `mode=\"button\"` 时也会生效 ([#2461](https://github.com/arco-design/arco-design-vue/pull/2461))\n\n### 🆕 新增功能\n\n- **empty:** 增加 `in-config-provider` 属性 ([#2474](https://github.com/arco-design/arco-design-vue/pull/2474))\n- **alert:** 新增 `center` 属性 ([#2464](https://github.com/arco-design/arco-design-vue/pull/2464))\n- **config-provider:** empty slots 增加component 属性 ([#2448](https://github.com/arco-design/arco-design-vue/pull/2448))\n- **select:** 空状态下可以显示 header 和 footer ([#2429](https://github.com/arco-design/arco-design-vue/pull/2429))\n- **tree-select:** 增加树选择器页头和页脚插槽 ([#2417](https://github.com/arco-design/arco-design-vue/pull/2417))\n- **mention:** search 事件增加 `prefix` 属性 ([#2356](https://github.com/arco-design/arco-design-vue/pull/2356))\n- **spin:** 新增隐藏图标属性 ([#2303](https://github.com/arco-design/arco-design-vue/pull/2303))\n- **spin:** 新增提示内容插槽 ([#2303](https://github.com/arco-design/arco-design-vue/pull/2303))\n\n### 🐛 问题修复\n\n- **date-picker:** 添加 getDefaultValueFormat 解决周选择器和季度选择器的v-model 问题 ([#2437](https://github.com/arco-design/arco-design-vue/pull/2437))\n\n\n## 2.46.2\n\n`2023-05-31`\n\n### 🐛 问题修复\n\n- **modal:** 修复modal组件不能设置width属性的问题 ([#2467](https://github.com/arco-design/arco-design-vue/pull/2467))\n\n\n## 2.46.1\n\n`2023-05-26`\n\n### 🐛 问题修复\n\n- **date-picker:** 修复日期范围选择器年、月、季度模式的箭头显示逻辑 ([#2451](https://github.com/arco-design/arco-design-vue/pull/2451))\n- **modal:** 修复定义了top属性时拖拽错误 ([#2446](https://github.com/arco-design/arco-design-vue/pull/2446))\n- **transfer:** 修复穿梭框选项被禁用时仍可以点击以及全选/半选在存在被禁用选项时错误 ([#2445](https://github.com/arco-design/arco-design-vue/pull/2445))\n- **modal:** 修复同时设置 `width` 和 `fullscreen` 时，没有全屏的问题 ([#2441](https://github.com/arco-design/arco-design-vue/pull/2441))\n\n### 💎 功能优化\n\n- **table:** 增加表格右击、双击的相关事件 ([#2452](https://github.com/arco-design/arco-design-vue/pull/2452))\n\n### 🆎 类型修正\n\n- **modal:** 修复函数调用形式ts报错 ([#2426](https://github.com/arco-design/arco-design-vue/pull/2426))\n\n\n## 2.46.0\n\n`2023-05-12`\n\n### 🆕 新增功能\n\n- **trigger:** 增加 scrollToClose 属性 ([#2414](https://github.com/arco-design/arco-design-vue/pull/2414))\n- **image:** 添加 actions 插槽 ([#2389](https://github.com/arco-design/arco-design-vue/pull/2389))\n- **cascader:** 非严格模式下支持全路径搜索 ([#2363](https://github.com/arco-design/arco-design-vue/pull/2363))\n\n### 🐛 问题修复\n\n- **table:** 修复当 dataIndex 为路径格式时，排序和总结栏功能不生效的问题 ([#2413](https://github.com/arco-design/arco-design-vue/pull/2413))\n- **divider:** 修复 margin 无法设置为 0 的问题 ([#2390](https://github.com/arco-design/arco-design-vue/pull/2390))\n\n### 💎 功能优化\n\n- **select:** 选择框增加 title 提示 ([#2412](https://github.com/arco-design/arco-design-vue/pull/2412))\n\n### 🆎 类型修正\n\n- **date-picker:** 日期选择器 ([#2359](https://github.com/arco-design/arco-design-vue/pull/2359))\n\n\n## 2.45.3\n\n`2023-04-28`\n\n### 🐛 问题修复\n\n- **select:** 修复输入法状态下 Enter 键会触发选择的问题 ([#2378](https://github.com/arco-design/arco-design-vue/pull/2378))\n\n### 💎 功能优化\n\n- **drawer:** 添加 onOk & onCancel 的事件参数 ([#2358](https://github.com/arco-design/arco-design-vue/pull/2358))\n\n### 🆎 类型修正\n\n- **checkbox:** 修复 `value` 属性使用 boolean 值出现 ts 错误的问题 ([#2373](https://github.com/arco-design/arco-design-vue/pull/2373))\n\n\n## 2.45.2\n\n`2023-04-21`\n\n### 🐛 问题修复\n\n- **date-picker:** 修复只使用面板情况下的样式问题 ([#2349](https://github.com/arco-design/arco-design-vue/pull/2349))\n\n### 💅 样式更新\n\n- **select:** 修复 select-view-input 的 line-height 和 height 不一致 ([#2346](https://github.com/arco-design/arco-design-vue/pull/2346))\n\n\n## 2.45.1\n\n`2023-04-14`\n\n### 🐛 问题修复\n\n- **image:** 修复 `sizeStyle` 失效的问题 ([#2327](https://github.com/arco-design/arco-design-vue/pull/2327))\n- **cascader:** 修复控件宽度较短时，搜索结果展示异常 ([#2326](https://github.com/arco-design/arco-design-vue/pull/2326))\n- **tabs:** 修复个别情况下tab-pane 的title 插槽不更新的问题 ([#2325](https://github.com/arco-design/arco-design-vue/pull/2325))\n\n### 💅 样式更新\n\n- **table:** 修复虚拟列表下显示横向滚动条的问题 ([#2337](https://github.com/arco-design/arco-design-vue/pull/2337))\n\n\n## 2.45.0\n\n`2023-04-07`\n\n### 🆕 新增功能\n\n- **transfer:** 添加自定义标题栏插槽 ([#2314](https://github.com/arco-design/arco-design-vue/pull/2314))\n- **date-picker:** 增加 abbreviation 属性，控制月份是否显示简称 ([#2264](https://github.com/arco-design/arco-design-vue/pull/2264))\n- **switch:** 新增文案显示props ([#2223](https://github.com/arco-design/arco-design-vue/pull/2223))\n- **tree:** 树节点增加 data-level 和 data-key 数据属性 ([#2192](https://github.com/arco-design/arco-design-vue/pull/2192))\n\n### 🐛 问题修复\n\n- **date-picker:** 修复 exchange-time 在选择时失效的问题 ([#2302](https://github.com/arco-design/arco-design-vue/pull/2302))\n\n\n## 2.44.7\n\n`2023-04-03`\n\n### 🐛 问题修复\n\n- **trigger:** 修复在 iframe 中报错的问题 ([#2300](https://github.com/arco-design/arco-design-vue/pull/2300))\n\n\n## 2.44.6\n\n`2023-03-31`\n\n### 🐛 问题修复\n\n- **list:** 修复向上滚动时可能触发 reach-bottom 的问题 ([#2295](https://github.com/arco-design/arco-design-vue/pull/2295))\n- **select:** 修复设置 modelValue 为 undefined 失效的问题 ([#2285](https://github.com/arco-design/arco-design-vue/pull/2285))\n- **transfer:** 修复 title 部分 ellipsis 失效 ([#2278](https://github.com/arco-design/arco-design-vue/pull/2278))\n- **upload:** 调整 extra-button 插槽参数 ([#2272](https://github.com/arco-design/arco-design-vue/pull/2272))\n- **time-picker:** 修复清除事件冒泡行为 ([#2271](https://github.com/arco-design/arco-design-vue/pull/2271))\n\n### 💎 功能优化\n\n- **trigger:** 优化弹出位置在 ShadowRoot 中不准确问题 ([#2273](https://github.com/arco-design/arco-design-vue/pull/2273))\n\n\n## 2.44.3\n\n`2023-03-24`\n\n### 🐛 问题修复\n\n- **date-picker:** 修复年份范围选择器存在的问题 ([#2270](https://github.com/arco-design/arco-design-vue/pull/2270))\n- 组件包增加 `exports` 标识，解决 nuxt3 下解析为 CommonJS 的问题 ([#2270](https://github.com/arco-design/arco-design-vue/pull/2270))\n- **select:** 修复动态 slot options 导致 dropdown 为空的问题 ([#2265](https://github.com/arco-design/arco-design-vue/pull/2265))\n- **select:** 不允许自动创建空字符串条目。含有空字符串的下拉选项，清空时将值设置为 `undefined` ([#2257](https://github.com/arco-design/arco-design-vue/pull/2257))\n\n### 🆎 类型修正\n\n- 更新一些组件的的buttonProps类型 ([#2266](https://github.com/arco-design/arco-design-vue/pull/2266))\n\n\n## 2.44.2\n\n`2023-03-17`\n\n### 🐛 问题修复\n\n- **form:** 修复 field 属性中对数组格式不支持的问题 ([#2242](https://github.com/arco-design/arco-design-vue/pull/2242))\n- **slider:** 修复在 range 模式下 model-value 绑定错误的问题 ([#2241](https://github.com/arco-design/arco-design-vue/pull/2241))\n- **tree:** 调整 select 和 update:selectedKeys, check 和 update:checkedKeys 的触发顺序 ([#2228](https://github.com/arco-design/arco-design-vue/pull/2228))\n- **divider:** 修复分割线展示错误的问题 ([#2205](https://github.com/arco-design/arco-design-vue/pull/2205))\n- **list:** 列表支持后端数据分页 ([#2199](https://github.com/arco-design/arco-design-vue/pull/2199))\n- **select:** 下拉选项值支持空字符串 ([#2190](https://github.com/arco-design/arco-design-vue/pull/2190))\n- **input:** 修复达到最大值后非输入法状态下无法修改内容问题 ([#2188](https://github.com/arco-design/arco-design-vue/pull/2188))\n\n### 💎 功能优化\n\n- **form:** 增加中文检验信息 ([#2240](https://github.com/arco-design/arco-design-vue/pull/2240))\n- 新增越南语`vi-VN` ([#2219](https://github.com/arco-design/arco-design-vue/pull/2219))\n- 新增高棉语(柬埔寨) `km-KH` ([#2219](https://github.com/arco-design/arco-design-vue/pull/2219))\n\n### 💅 样式更新\n\n- **calendar:** 修复一些样式问题 ([#2239](https://github.com/arco-design/arco-design-vue/pull/2239))\n\n### 🆎 类型修正\n\n- **upload:** 允许beforeUpload返回布尔值 ([#2204](https://github.com/arco-design/arco-design-vue/pull/2204))\n- 修正虚拟列表 ts 定义问题 ([#2168](https://github.com/arco-design/arco-design-vue/pull/2168))\n\n\n## 2.44.1\n\n`2023-03-10`\n\n### 🐛 问题修复\n\n- **calendar:** 修复内部 import 路径问题\n\n\n## 2.44.0\n\n`2023-03-10`\n\n### 🆕 新增功能\n\n- **calendar:** 新增日历组件 ([#2217](https://github.com/arco-design/arco-design-vue/pull/2217))\n\n\n## 2.43.2\n\n`2023-02-24`\n\n### 🐛 问题修复\n\n- **input-number:** 修复禁用状态下显示步长按钮 ([#2169](https://github.com/arco-design/arco-design-vue/pull/2169))\n- **form:** 修复 FormItem 的 validateStatus 失效问题 ([#2158](https://github.com/arco-design/arco-design-vue/pull/2158))\n- **checkbox:** 修复复选框在取消选择时会保留悬停样式的问题 ([#2124](https://github.com/arco-design/arco-design-vue/pull/2124))\n\n### 💎 功能优化\n\n- **modal:** 添加函数调用的更新方法 ([#2155](https://github.com/arco-design/arco-design-vue/pull/2155))\n- **drawer:** 添加函数调用的更新方法 ([#2155](https://github.com/arco-design/arco-design-vue/pull/2155))\n\n\n## 2.43.1\n\n`2023-02-17`\n\n### 🐛 问题修复\n\n- **date-picker:** 修复因dayjs不支持季度解析导致返回错误的问题 ([#2110](https://github.com/arco-design/arco-design-vue/pull/2110))\n\n\n## 2.43.0\n\n`2023-02-10`\n\n### 🆕 新增功能\n\n- **select:** 新增 `defaultActiveFirstOption` 属性 ([#2107](https://github.com/arco-design/arco-design-vue/pull/2107))\n- **select:** 增加 header 插槽 ([#2099](https://github.com/arco-design/arco-design-vue/pull/2099))\n- **dropdown:** 添加hide-on-select属性 ([#2078](https://github.com/arco-design/arco-design-vue/pull/2078))\n- **date-picker:** 增加 `disabled-input` 属性，可以禁用键盘输入 ([#2072](https://github.com/arco-design/arco-design-vue/pull/2072))\n- **drawer:** 添加 `before-open` 和 `before-close` 事件 ([#2064](https://github.com/arco-design/arco-design-vue/pull/2064))\n- **upload:** 新增文件列表额外按钮插槽 `#extra-button` ([#2060](https://github.com/arco-design/arco-design-vue/pull/2060))\n\n### 🐛 问题修复\n\n- **notification:** 修复更新 duration 失效的问题 ([#2106](https://github.com/arco-design/arco-design-vue/pull/2106))\n- **tabs:** 无匹配选项卡时，隐藏选项卡指示器 ([#2105](https://github.com/arco-design/arco-design-vue/pull/2105))\n- **menu:** 修复热更新问题 ([#2091](https://github.com/arco-design/arco-design-vue/pull/2091))\n\n### 🆎 类型修正\n\n- 更新部分组件 `triggerProps` 的类型 ([#2090](https://github.com/arco-design/arco-design-vue/pull/2090))\n\n\n## 2.42.1\n\n`2023-02-03`\n\n### 🐛 问题修复\n\n- **scrollbar:** 修复emits 的 ts 声明错误 ([#2077](https://github.com/arco-design/arco-design-vue/pull/2077))\n- **slider:** 优化数字输入框无效输入时能够自动修复 ([#1952](https://github.com/arco-design/arco-design-vue/pull/1952))\n- **input-number:** 修复当最小/最大值改变时进步按钮不能正确禁用或启用的问题 ([#1777](https://github.com/arco-design/arco-design-vue/pull/1777))\n\n\n## 2.42.0\n\n`2023-01-13`\n\n### 🆕 新增功能\n\n- **upload:** 增加 `showPreviewButton` 属性 ([#2049](https://github.com/arco-design/arco-design-vue/pull/2049))\n- **slider:** 添加show-tooltip属性 ([#2037](https://github.com/arco-design/arco-design-vue/pull/2037))\n- **mention:** 增加focus与blur方法 ([#2022](https://github.com/arco-design/arco-design-vue/pull/2022))\n- **date-picker:** 增加 blur 事件，可以在表单中支持相应检验 ([#1958](https://github.com/arco-design/arco-design-vue/pull/1958))\n\n### 🐛 问题修复\n\n- **upload:** 修复上传时可能导致删除文件错误的问题 ([#2048](https://github.com/arco-design/arco-design-vue/pull/2048))\n- **switch:** 修复类型为`line`时自定义颜色样式错误的问题 ([#2044](https://github.com/arco-design/arco-design-vue/pull/2044))\n\n\n## 2.41.1\n\n`2023-01-06`\n\n### 🐛 问题修复\n\n- **tabs:** 修复在 `capsule` 类型下滚动异常的问题 ([#2031](https://github.com/arco-design/arco-design-vue/pull/2031))\n- **table:** 修复开启 `scroll` 时浏览器缩放后可能出现宽度错误的问题 ([#2028](https://github.com/arco-design/arco-design-vue/pull/2028))\n- 修复 ts 不能识别自定义属性的问题 ([#2027](https://github.com/arco-design/arco-design-vue/pull/2027))\n\n### 💎 功能优化\n\n- **icon:** 优化组件 `click` 事件，在组件中进行封装透传 ([#2030](https://github.com/arco-design/arco-design-vue/pull/2030))\n\n### 🆎 类型修正\n\n- **checkbox:** 修复 `value` 值缺少类型的问题 ([#2029](https://github.com/arco-design/arco-design-vue/pull/2029))\n\n\n## 2.41.0\n\n`2022-12-30`\n\n### 🆕 新增功能\n\n- **upload:** 增加 `upload` 方法 ([#2010](https://github.com/arco-design/arco-design-vue/pull/2010))\n- **alert:** 增加 `normal` 类型 ([#2009](https://github.com/arco-design/arco-design-vue/pull/2009))\n- **message:** 增加 `normal` 类型 ([#2009](https://github.com/arco-design/arco-design-vue/pull/2009))\n- **date-picker:** `date-picker` 支持 `prefix` 插槽。 ([#1997](https://github.com/arco-design/arco-design-vue/pull/1997))\n- **time-picker:** `time-picker` 支持 `prefix` 插槽。 ([#1997](https://github.com/arco-design/arco-design-vue/pull/1997))\n- **form:** `form-item` 支持 tooltip 属性 ([#1991](https://github.com/arco-design/arco-design-vue/pull/1991))\n- **form:** `form-item` 支持 asteriskPosition 属性 ([#1991](https://github.com/arco-design/arco-design-vue/pull/1991))\n- 增加西班牙语 ([#2008](https://github.com/arco-design/arco-design-vue/pull/2008))\n- 增加 印度尼西亚语， 法语（法国）， 德语（德国）， 韩语， 意大利语(意大利)，马来语（马来西亚），泰语语言文件。 ([#2011](https://github.com/arco-design/arco-design-vue/pull/2011))\n\n### 🐛 问题修复\n\n- **mention:** 修复 textarea 模式下回车键失效的问题 ([#2013](https://github.com/arco-design/arco-design-vue/pull/2013))\n- **upload:** 修复 `upload` 组件在部分场景下验证上传文件符合 `accept` 格式时，判断错误的 bug。 ([#2007](https://github.com/arco-design/arco-design-vue/pull/2007))\n- **typography:** 修复父容器设置`white-space: nowrap`时 ellipsis 失效 ([#1995](https://github.com/arco-design/arco-design-vue/pull/1995))\n- **image:** 修复 `imageId` 可能未收集导致预览出错的 bug ([#1992](https://github.com/arco-design/arco-design-vue/pull/1992))\n- **input:** 修复自定义计算字符长度不会被 `max-length` 限制的问题 ([#1942](https://github.com/arco-design/arco-design-vue/pull/1942))\n- **checkbox:** `modevalue` 不是数组时设置为空数组 ([#1940](https://github.com/arco-design/arco-design-vue/pull/1940))\n- **table:** 修复仅 `operations` 列固定的情况下没有阴影的问题 ([#1938](https://github.com/arco-design/arco-design-vue/pull/1938))\n\n### 💅 样式更新\n\n- **select:** 统一 `select` 组件单选和多选时后缀图标为 `arrow-icon`。 ([#2005](https://github.com/arco-design/arco-design-vue/pull/2005))\n\n\n## 2.40.1\n\n`2022-12-23`\n\n### 🐛 问题修复\n\n- **input:** 修复 `change` 事件触发逻辑问题 ([#1990](https://github.com/arco-design/arco-design-vue/pull/1990))\n- **switch:** 修复switch组件type为line,size为small,checked状态圆点偏移不正确 ([#1975](https://github.com/arco-design/arco-design-vue/pull/1975))\n- **list:** 修复栅格列表模式出现滚动条的问题 ([#1970](https://github.com/arco-design/arco-design-vue/pull/1970))\n- **date-picker:** 修复在国际化下面板文案显示错误的问题 ([#1965](https://github.com/arco-design/arco-design-vue/pull/1965))\n\n### 💅 样式更新\n\n- **tabs:** 修复 `rounded` 和 `capsule` 类型下 `size` 不生效的问题 ([#1988](https://github.com/arco-design/arco-design-vue/pull/1988))\n\n\n## 2.40.0\n\n`2022-12-09`\n\n### 🆕 新增功能\n\n- **scrollbar:** 增加 scrollLeft 和 scrollTop 方法 ([#1909](https://github.com/arco-design/arco-design-vue/pull/1909))\n- **table:** change 事件增加当前数据参数 ([#1893](https://github.com/arco-design/arco-design-vue/pull/1893))\n- **avatar:** 增加 image-url 属性，支持使用图片地址 ([#1810](https://github.com/arco-design/arco-design-vue/pull/1810))\n- **auto-complete:** 增加 focus 和 blur 方法 ([#1809](https://github.com/arco-design/arco-design-vue/pull/1809))\n\n### 🐛 问题修复\n\n- **date-picker:** 修复 `Form` 组件的 `feedback` 属性在  `date-picker` 组件不生效的 bug。 ([#1932](https://github.com/arco-design/arco-design-vue/pull/1932))\n- **list:** 修复 scrollbar 属性传递虚拟滚动条属性时失效的问题 ([#1929](https://github.com/arco-design/arco-design-vue/pull/1929))\n- **form:** 修复 `Form` 组件的 `validate-status` 属性在 `date-picker` 组件不生效的 bug。 ([#1928](https://github.com/arco-design/arco-design-vue/pull/1928))\n\n\n## 2.39.2\n\n`2022-12-02`\n\n### 🐛 问题修复\n\n- **table:** 修复 thead 在某些情况下会出现纵向滚动条的问题 ([#1913](https://github.com/arco-design/arco-design-vue/pull/1913))\n- **input:** 修复 change 事件触发问题，以及 clear 清除问题 ([#1912](https://github.com/arco-design/arco-design-vue/pull/1912))\n- **divider:** 修复设置 size 时，样式错误的问题 ([#1905](https://github.com/arco-design/arco-design-vue/pull/1905))\n- **carousel:** 修复 `Carousel` 透明背景图片无法遮罩上一张图片的问题 ([#1901](https://github.com/arco-design/arco-design-vue/pull/1901))\n\n\n## 2.39.1\n\n`2022-11-25`\n\n### 🐛 问题修复\n\n- 修复日文语言包缺失某些属性的问题 ([#1890](https://github.com/arco-design/arco-design-vue/pull/1890))\n- **pagination:** 修复 pages 变小时，可能会出现页码超出页数的问题 ([#1879](https://github.com/arco-design/arco-design-vue/pull/1879))\n\n### 🆎 类型修正\n\n- **tree-select:** 更新trigger-props的类型 ([#1885](https://github.com/arco-design/arco-design-vue/pull/1885))\n\n\n## 2.39.0\n\n`2022-11-18`\n\n### 🆕 新增功能\n\n- **transfer:** 新增面板插槽，允许自定义内容 ([#1873](https://github.com/arco-design/arco-design-vue/pull/1873))\n- **transfer:** 内部替换为虚拟滚动条 ([#1873](https://github.com/arco-design/arco-design-vue/pull/1873))\n- **tree-select:** 替换虚拟滚动条组件，增加 scrollbar 属性 ([#1872](https://github.com/arco-design/arco-design-vue/pull/1872))\n- **transfer:** 可以隐藏全选勾选框 ([#1845](https://github.com/arco-design/arco-design-vue/pull/1845))\n- **message:** 增加 `resetOnHover` 属性，在鼠标移入时暂停并重新计时 ([#1841](https://github.com/arco-design/arco-design-vue/pull/1841))\n\n### 🐛 问题修复\n\n- **space:** 修复分隔符间距 ([#1864](https://github.com/arco-design/arco-design-vue/pull/1864))\n- **switch:** 修复状态改变前钩子的值 ([#1859](https://github.com/arco-design/arco-design-vue/pull/1859))\n- **switch:** 修复样式 token 问题 ([#1859](https://github.com/arco-design/arco-design-vue/pull/1859))\n- **date-picker:** 修复选择年范围时无法跳转10年 ([#1847](https://github.com/arco-design/arco-design-vue/pull/1847))\n\n### 💎 功能优化\n\n- **upload:** 添加一些常见的文件类型 ([#1857](https://github.com/arco-design/arco-design-vue/pull/1857))\n\n\n## 2.38.3\n\n`2022-11-11`\n\n### 🐛 问题修复\n\n- **table:** 修复某些场景下自定义表格元素时会出现警告的问题\n\n\n## 2.38.2\n\n`2022-11-09`\n\n### 🐛 问题修复\n\n- **table:** 修复行选择器状态错误的问题 ([#1849](https://github.com/arco-design/arco-design-vue/pull/1849))\n\n\n## 2.38.1\n\n`2022-11-04`\n\n### 🐛 问题修复\n\n- **input-tag:** 修复删除键会删除不可用选项的问题 ([#1836](https://github.com/arco-design/arco-design-vue/pull/1836))\n- 修复虚拟列表的一些问题 ([#1834](https://github.com/arco-design/arco-design-vue/pull/1834))\n- **slider:** 修复滑动输入条设置最小值起始位置错误 ([#1826](https://github.com/arco-design/arco-design-vue/pull/1826))\n- **pagination:** 修复 jumper 提示警告的问题 ([#1822](https://github.com/arco-design/arco-design-vue/pull/1822))\n- **input:** 修复某些场景下组件光标报错的问题 ([#1820](https://github.com/arco-design/arco-design-vue/pull/1820))\n- **date-picker:** 修复内部属性错误问题 ([#1818](https://github.com/arco-design/arco-design-vue/pull/1818))\n- **radio:** 修复 `radio-group` 重置值时状态没有重置的问题 ([#1813](https://github.com/arco-design/arco-design-vue/pull/1813))\n- **table:** 修复rowClass为函数时的参数 ([#1812](https://github.com/arco-design/arco-design-vue/pull/1812))\n\n### 💎 功能优化\n\n- **icon:** 替换飞书图标 ([#1835](https://github.com/arco-design/arco-design-vue/pull/1835))\n\n\n## 2.38.0\n\n`2022-10-28`\n\n### 🆕 新增功能\n\n- **space:** 增加`split`插槽 ([#1774](https://github.com/arco-design/arco-design-vue/pull/1774))\n\n### 🐛 问题修复\n\n- **select:** 修复 formatLabel 在无数据时报错的问题 ([#1797](https://github.com/arco-design/arco-design-vue/pull/1797))\n- **modal:** 修复自定义 style 时 z-index 不能生效的问题 ([#1796](https://github.com/arco-design/arco-design-vue/pull/1796))\n- **radio:** 修复清除 model-value 时状态未清除的问题 ([#1794](https://github.com/arco-design/arco-design-vue/pull/1794))\n- **checkbox:** 修复清除 model-value 时状态未清除的问题 ([#1794](https://github.com/arco-design/arco-design-vue/pull/1794))\n- **form:** 不修改规则原始对象数据 ([#1779](https://github.com/arco-design/arco-design-vue/pull/1779))\n- **modal:** 修复函数式调用中关闭未卸载内部组件的问题 ([#1778](https://github.com/arco-design/arco-design-vue/pull/1778))\n- **drawer:** 修复函数式调用中关闭未卸载内部组件的问题 ([#1778](https://github.com/arco-design/arco-design-vue/pull/1778))\n\n### 💅 样式更新\n\n- **table:** 修复暗黑模式下 stripe 样式问题 ([#1795](https://github.com/arco-design/arco-design-vue/pull/1795))\n\n### 🆎 类型修正\n\n- 添加实例类型导出 ([#1782](https://github.com/arco-design/arco-design-vue/pull/1782))\n\n\n## 2.38.0-beta.2\n\n`2022-10-21`\n\n### 🐛 问题修复\n\n- **date-picker:** 修复在 safari 下 disabled 样式错误的问题 ([#1770](https://github.com/arco-design/arco-design-vue/pull/1770))\n- **trigger:** 修复在 windows 中 arrow 定位错误的问题 ([#1480](https://github.com/arco-design/arco-design-vue/pull/1480))\n- **modal:** 修复函数式调用下，传入子组件不会触发卸载的问题\n\n### 💎 功能优化\n\n- **cascader:** 优化多选时的子菜单全部禁用时，父级禁止选择 ([#1771](https://github.com/arco-design/arco-design-vue/pull/1771))\n- **progress:** 优化分割点的展示逻辑 ([#1755](https://github.com/arco-design/arco-design-vue/pull/1755))\n- **pagination:** 优化输入页码时的数字处理 ([#1750](https://github.com/arco-design/arco-design-vue/pull/1750))\n\n\n## 2.38.0-beta.1\n\n`2022-10-14`\n\n### 🆕 新增功能\n\n- table、select、list 组件增加 scrollbar 属性，支持开关虚拟滚动条 ([#1747](https://github.com/arco-design/arco-design-vue/pull/1747))\n- **notification:** 提示框和提示框列表间隔样式调整 ([#1676](https://github.com/arco-design/arco-design-vue/pull/1676))\n- **notification:** `showIcon` 属性无效 ([#1676](https://github.com/arco-design/arco-design-vue/pull/1676))\n- **notification:** 支持自定义关闭按钮和元素 ([#1676](https://github.com/arco-design/arco-design-vue/pull/1676))\n- **notification:** 支持自定义样式 ([#1676](https://github.com/arco-design/arco-design-vue/pull/1676))\n- **notification:** 删除对应 `id` 的提示框 ([#1676](https://github.com/arco-design/arco-design-vue/pull/1676))\n- **notification:** 使用案例 ([#1676](https://github.com/arco-design/arco-design-vue/pull/1676))\n- **descriptions:** 描述中表格样式的 `layout-fixed`，当设置成 `fixed` 时，宽度会均分 ([#1670](https://github.com/arco-design/arco-design-vue/pull/1670))\n\n### 🐛 问题修复\n\n- **transfer:** 修复无法滚动问题 ([#1723](https://github.com/arco-design/arco-design-vue/pull/1723))\n- **spin:** 修复 size 在失效的问题 ([#1717](https://github.com/arco-design/arco-design-vue/pull/1717))\n\n### 💎 功能优化\n\n- **select:** 增加已选择项的缓存，优化在远程搜索时的 label 显示问题 ([#1731](https://github.com/arco-design/arco-design-vue/pull/1731))\n- **modal:** 函数式调用可以设置 renderToBody 参数 ([#1682](https://github.com/arco-design/arco-design-vue/pull/1682))\n\n### 💅 样式更新\n\n- **table:** 修复表格同时开启总结行和滚动时，总结行高度被压缩的问题 ([#1733](https://github.com/arco-design/arco-design-vue/pull/1733))\n\n### 🆎 类型修正\n\n- **collapse:** 修复 `collapse-item` 的 key 属性定义，允许 number ([#1743](https://github.com/arco-design/arco-design-vue/pull/1743))\n\n\n## 2.37.4\n\n`2022-09-30`\n\n### 🐛 问题修复\n\n- **table:** 修复 default sorter&filters 在模板用法下失效的问题 ([#1707](https://github.com/arco-design/arco-design-vue/pull/1707))\n- 修复弹出层叠顺序 ([#1659](https://github.com/arco-design/arco-design-vue/pull/1659))\n\n### 💎 功能优化\n\n- **button:** 使用 flex 布局方式，解决 icon 大小不一致时的居中问题 ([#1702](https://github.com/arco-design/arco-design-vue/pull/1702))\n- **link:** 使用 flex 布局方式，解决 icon 大小不一致时的居中问题 ([#1702](https://github.com/arco-design/arco-design-vue/pull/1702))\n- **modal:** 修复对话框关闭的问题 ([#1696](https://github.com/arco-design/arco-design-vue/pull/1696))\n- **drawer:** 修复抽屉关闭的问题 ([#1696](https://github.com/arco-design/arco-design-vue/pull/1696))\n\n### 💅 样式更新\n\n- **tabs:** 修复 `card` 类型下标签内容没有居中的问题 ([#1704](https://github.com/arco-design/arco-design-vue/pull/1704))\n- **select:** 修复自定义标签颜色显示错误的问题 ([#1703](https://github.com/arco-design/arco-design-vue/pull/1703))\n- **collapse:** 当expand-icon在右侧时,调整collapse-item-content的padding ([#1680](https://github.com/arco-design/arco-design-vue/pull/1680))\n\n\n## 2.37.3\n\n`2022-09-23`\n\n### 🐛 问题修复\n\n- **table:** 修复内容变化后tooltip不显示的问题 ([#1662](https://github.com/arco-design/arco-design-vue/pull/1662))\n\n### 💎 功能优化\n\n- **empty:** 优化自定义显示优先级，image 插槽高于全局 empty 插槽 ([#1673](https://github.com/arco-design/arco-design-vue/pull/1673))\n- **input:** 优化最大限制时不再可以从中间输入内容 ([#1672](https://github.com/arco-design/arco-design-vue/pull/1672))\n- **image:** actionsLayout为空时不显示操作栏 ([#1668](https://github.com/arco-design/arco-design-vue/pull/1668))\n- **overflow-list:** 溢出数量改变事件 ([#1287](https://github.com/arco-design/arco-design-vue/pull/1287))\n\n### 🆎 类型修正\n\n- **table:** 修复 TableRowSelection 类型声明 ([#1667](https://github.com/arco-design/arco-design-vue/pull/1667))\n- **icon:** 增加 Icon 相关类型声明 ([#1619](https://github.com/arco-design/arco-design-vue/pull/1619))\n\n\n## 2.37.2\n\n`2022-09-21`\n\n### 🐛 问题修复\n\n- **list:** 修复加载更多使用中滚动条高度的问题 ([#1658](https://github.com/arco-design/arco-design-vue/pull/1658))\n- 修复内置虚拟滚动条的组件按需加载时丢失样式的问题 ([#1655](https://github.com/arco-design/arco-design-vue/pull/1655))\n- **scrollbar:** 修复在 Firefox 下的样式问题 ([#1655](https://github.com/arco-design/arco-design-vue/pull/1655))\n- **table:** 修复 scroll 属性中 maxHeight 导致虚拟滚动条样式错误问题 ([#1655](https://github.com/arco-design/arco-design-vue/pull/1655))\n- **select:** 修复键盘交互中下拉菜单没有跟随滚动的问题 ([#1655](https://github.com/arco-design/arco-design-vue/pull/1655))\n- **select:** 修复内置虚拟滚动条部分情况下报错的问题 ([#1655](https://github.com/arco-design/arco-design-vue/pull/1655))\n\n### 💎 功能优化\n\n- 组件 onBeforeOk 属性的返回值 `Promise<void>` 与 `done()`方法默认行为调整为成功 ([#1650](https://github.com/arco-design/arco-design-vue/pull/1650))\n\n\n## 2.37.1\n\n`2022-09-16`\n\n### 🆕 新增功能\n\n- **overflow-list:** 新增 `OverflowList` 组件 ([#1634](https://github.com/arco-design/arco-design-vue/pull/1634))\n- **scrollbar:** 增加虚拟滚动条组件 ([#1634](https://github.com/arco-design/arco-design-vue/pull/1634))\n- **scrollbar:** table、select、list、cascader、dropdown 组件替换虚拟滚动条 ([#1634](https://github.com/arco-design/arco-design-vue/pull/1634))\n\n\n## 2.37.0\n\n`2022-09-16`\n\n### 🆕 新增功能\n\n- **typography:** 省略模式增加支持 CSS 方式（实验性） ([#1635](https://github.com/arco-design/arco-design-vue/pull/1635))\n- **switch:** 支持 `beforeChange` 切换事件拦截 ([#1626](https://github.com/arco-design/arco-design-vue/pull/1626))\n- **link:** 添加加载中状态属性 ([#1616](https://github.com/arco-design/arco-design-vue/pull/1616))\n\n### 💎 功能优化\n\n- **list:** 支持响应式网格布局参数 ([#1625](https://github.com/arco-design/arco-design-vue/pull/1625))\n\n\n## 2.36.1\n\n`2022-09-09`\n\n### 🐛 问题修复\n\n- **select:** 修复 option 插槽参数错误的问题 ([#1607](https://github.com/arco-design/arco-design-vue/pull/1607))\n\n### 💎 功能优化\n\n- **modal:** on-before-ok 属性支持函数返回 Promise ([#1623](https://github.com/arco-design/arco-design-vue/pull/1623))\n- **drawer:** on-before-ok 属性支持函数返回 Promise ([#1623](https://github.com/arco-design/arco-design-vue/pull/1623))\n- **popconfirm:** on-before-ok 属性支持函数返回 Promise ([#1623](https://github.com/arco-design/arco-design-vue/pull/1623))\n- **dropdown:** 选项禁用时不触发单击事件 ([#1611](https://github.com/arco-design/arco-design-vue/pull/1611))\n\n### 🆎 类型修正\n\n- 增加 `virtual-list` 接口和使用说明 ([#1614](https://github.com/arco-design/arco-design-vue/pull/1614))\n\n\n## 2.36.0\n\n`2022-09-02`\n\n### 🆕 新增功能\n\n- **image:** hideFooter 增加新参数，支持错误状态下展示 footer ([#1595](https://github.com/arco-design/arco-design-vue/pull/1595))\n- **breadcrumb:** 增加 customUrl 属性 ([#1594](https://github.com/arco-design/arco-design-vue/pull/1594))\n- **table:** 新增自定义类名相关属性 ([#1580](https://github.com/arco-design/arco-design-vue/pull/1580))\n- 增加`繁体中文（中国台湾）`支持 ([#1551](https://github.com/arco-design/arco-design-vue/pull/1551))\n- 增加`葡萄牙语（葡萄牙）`支持 ([#1551](https://github.com/arco-design/arco-design-vue/pull/1551))\n- **alert:** 支持自定义关闭元素 ([#1544](https://github.com/arco-design/arco-design-vue/pull/1544))\n- **checkbox:** 新增 max 属性，支持设置最多可被勾选的项目数 ([#1540](https://github.com/arco-design/arco-design-vue/pull/1540))\n- **image:** 增加 fit 属性 ([#1534](https://github.com/arco-design/arco-design-vue/pull/1534))\n- **breadcrumb:** 支持 separator  属性 ([#1500](https://github.com/arco-design/arco-design-vue/pull/1500))\n- **breadcrumb:** 支持 routes  属性 ([#1500](https://github.com/arco-design/arco-design-vue/pull/1500))\n- **breadcrumb:** 支持 more-icon  插槽 ([#1500](https://github.com/arco-design/arco-design-vue/pull/1500))\n- **breadcrumb:** `breadcrumb-item` 支持 droplist  属性和插槽 ([#1500](https://github.com/arco-design/arco-design-vue/pull/1500))\n- **page-header:** 支持自定义返回按钮 ([#1499](https://github.com/arco-design/arco-design-vue/pull/1499))\n\n### 💎 功能优化\n\n- **table:** 扩展 key 的类型 ([#1580](https://github.com/arco-design/arco-design-vue/pull/1580))\n- **input:** 修改密码输入框图标 ([#1436](https://github.com/arco-design/arco-design-vue/pull/1436))\n\n### 🆎 类型修正\n\n- 增加 dropdown 和 breadcrumb 组件中类型的导出 ([#1594](https://github.com/arco-design/arco-design-vue/pull/1594))\n- **layout:** 增加 ts 类型导出 ([#1571](https://github.com/arco-design/arco-design-vue/pull/1571))\n\n\n## 2.35.3\n\n`2022-08-31`\n\n### 🐛 问题修复\n\n- 修复 icon 类组件新属性未生效的问题\n\n\n## 2.35.2\n\n`2022-08-29`\n\n### 🐛 问题修复\n\n- **date-picker:** 修复部分模式下选择面板年月选择时单击选择事件异常 ([#1562](https://github.com/arco-design/arco-design-vue/pull/1562))\n\n### 💎 功能优化\n\n- **date-picker:** 优化范围选择器在选择时也会修正顺序 ([#1578](https://github.com/arco-design/arco-design-vue/pull/1578))\n- 组件库内部 matchMedia 方法调整兼容 Safari 13 ([#1576](https://github.com/arco-design/arco-design-vue/pull/1576))\n\n### 💅 样式更新\n\n- **pagination:** 修复显示内容被压缩的问题 ([#1579](https://github.com/arco-design/arco-design-vue/pull/1579))\n- **image:** 修复预览模式下关闭按钮图标位置错误的问题 ([#1577](https://github.com/arco-design/arco-design-vue/pull/1577))\n\n\n## 2.35.1\n\n`2022-08-19`\n\n### 🐛 问题修复\n\n- **spin:** 修复 fixed-column 的 z-index 提高导致的 spin 问题 ([#1533](https://github.com/arco-design/arco-design-vue/pull/1533))\n- **time-picker:** 修复 time-picker 中 size 属性的默认值问题 ([#1513](https://github.com/arco-design/arco-design-vue/pull/1513))\n\n### 💎 功能优化\n\n- **trigger:** 优化在 KeepAlive 下使用的问题，缓存时关闭弹出层 ([#1529](https://github.com/arco-design/arco-design-vue/pull/1529))\n- **button:** 当状态为 loading 或 disabled 时点击不会触发默认事件 ([#1516](https://github.com/arco-design/arco-design-vue/pull/1516))\n\n\n## 2.35.0\n\n`2022-08-12`\n\n### 🆕 新增功能\n\n- **icon:** 支持旋转属性 ([#1490](https://github.com/arco-design/arco-design-vue/pull/1490))\n- **icon:** 图标列表支持类型筛选和名称搜索 ([#1490](https://github.com/arco-design/arco-design-vue/pull/1490))\n- **divider:** 分割线宽度及样式设置 ([#1473](https://github.com/arco-design/arco-design-vue/pull/1473))\n- **divider:** 分割线边距设置 ([#1473](https://github.com/arco-design/arco-design-vue/pull/1473))\n- **date-picker:** 增加范围选择器头部点击与基础选择器月份点击至年份功能 ([#1421](https://github.com/arco-design/arco-design-vue/pull/1421))\n\n### 💅 样式更新\n\n- **table:** 调整固定列的 zIndex ([#1479](https://github.com/arco-design/arco-design-vue/pull/1479))\n\n\n## 2.34.1\n\n`2022-08-05`\n\n### 🐛 问题修复\n\n- **upload:** 修复设置 `accept=*` 时失效的问题 ([#1488](https://github.com/arco-design/arco-design-vue/pull/1488))\n- **menu:** 修复新版本 Chrome 中 popup 属性导致警告的问题 ([#1487](https://github.com/arco-design/arco-design-vue/pull/1487))\n\n### 💎 功能优化\n\n- 重构虚拟列表组件，修复功能问题 ([#1444](https://github.com/arco-design/arco-design-vue/pull/1444))\n\n### 💅 样式更新\n\n- **cascader:** 修复下拉面板为空时的样式问题 ([#1483](https://github.com/arco-design/arco-design-vue/pull/1483))\n\n\n## 2.34.0\n\n`2022-07-29`\n\n### 🆕 新增功能\n\n- **tree:** 给 slot 添加节点状态信息 ([#1469](https://github.com/arco-design/arco-design-vue/pull/1469))\n- **pagination:** 增加 autoAdjust 属性 ([#1466](https://github.com/arco-design/arco-design-vue/pull/1466))\n- **tabs:** 增加 trigger 属性，支持更改切换方式 ([#1456](https://github.com/arco-design/arco-design-vue/pull/1456))\n- **auto-complete:** 增加`footer`插槽 ([#1445](https://github.com/arco-design/arco-design-vue/pull/1445))\n- **dropdown:** 为icon插槽加入新的prop:  `popup-visible` ([#1430](https://github.com/arco-design/arco-design-vue/pull/1430))\n- **drawer:** 添加函数调用 ([#1409](https://github.com/arco-design/arco-design-vue/pull/1409))\n\n### 🐛 问题修复\n\n- **timeline:** 修复时间线使用 v-if 时计算错误的问题 ([#1467](https://github.com/arco-design/arco-design-vue/pull/1467))\n\n### 💎 功能优化\n\n- **table:** columns 支持 reactive 类型的更新 ([#1470](https://github.com/arco-design/arco-design-vue/pull/1470))\n- **table:** rowClass 支持函数类型的值 ([#1453](https://github.com/arco-design/arco-design-vue/pull/1453))\n- **transfer:** item 插槽增加 value 属性 ([#1447](https://github.com/arco-design/arco-design-vue/pull/1447))\n- **modal:** 支持在函数调用中隐藏页脚 ([#1410](https://github.com/arco-design/arco-design-vue/pull/1410))\n- **input-number:** 支持`read-only`属性 ([#1408](https://github.com/arco-design/arco-design-vue/pull/1408))\n\n\n## 2.33.1\n\n`2022-07-22`\n\n### 🐛 问题修复\n\n- **input-tag:** 修复设置 max-tag-count 后，remove 事件中 value 参数错误的问题 ([#1442](https://github.com/arco-design/arco-design-vue/pull/1442))\n- **cascader:** 修复搜索下拉菜单的横向滚动条位置错误问题 ([#1438](https://github.com/arco-design/arco-design-vue/pull/1438))\n- **cascader:** 修复搜索模式下，输入内容后不能使用光标的问题 ([#1438](https://github.com/arco-design/arco-design-vue/pull/1438))\n- **form:** 修复 form-item 内容可能超出限制宽度的问题 ([#1437](https://github.com/arco-design/arco-design-vue/pull/1437))\n- **modal:** 修复默认标题类名错误的问题 ([#1413](https://github.com/arco-design/arco-design-vue/pull/1413))\n- **typography:** 后缀 icon 点击事件取消冒泡 ([#1411](https://github.com/arco-design/arco-design-vue/pull/1411))\n\n### 💎 功能优化\n\n- **table:** 单独设置 selected-keys 时可以显示选中行 ([#1440](https://github.com/arco-design/arco-design-vue/pull/1440))\n\n\n## 2.33.0\n\n`2022-07-08`\n\n### 🆕 新增功能\n\n- **drawer:** 添加 header 属性和插槽 ([#1399](https://github.com/arco-design/arco-design-vue/pull/1399))\n- **collapse:** 支持自定义展开图标 ([#1344](https://github.com/arco-design/arco-design-vue/pull/1344))\n- **tag:** 支持 `bordered` 显示边框 ([#1342](https://github.com/arco-design/arco-design-vue/pull/1342))\n\n### 🐛 问题修复\n\n- **date-picker:** 修复 readonly 模式下仍可打开下拉菜单和清除选项的问题 ([#1400](https://github.com/arco-design/arco-design-vue/pull/1400))\n- **upload:** 修复在阿里云OSS中的使用问题 ([#1397](https://github.com/arco-design/arco-design-vue/pull/1397))\n- **tree:** 修复子树展开动画中为处理过滤数据的问题 ([#1397](https://github.com/arco-design/arco-design-vue/pull/1397))\n- **tree:** 修复设置 defaultExpandSelected 失效的问题 ([#1362](https://github.com/arco-design/arco-design-vue/pull/1362))\n\n### 💅 样式更新\n\n- **tabs:** 修复聚焦时样式错误的问题 ([#1398](https://github.com/arco-design/arco-design-vue/pull/1398))\n- **modal:** 修复 footer 按钮不居中的问题 ([#1391](https://github.com/arco-design/arco-design-vue/pull/1391))\n- **upload:** 移除了 upload-list-item 末尾的多余空白 ([#1379](https://github.com/arco-design/arco-design-vue/pull/1379))\n\n\n## 2.32.1\n\n`2022-07-01`\n\n### 🐛 问题修复\n\n- **table:** 修复文本提示没有跟随内容更新的问题 ([#1373](https://github.com/arco-design/arco-design-vue/pull/1373))\n- **select:** 修复在火狐浏览器下搜索模式的点击展开问题 ([#1371](https://github.com/arco-design/arco-design-vue/pull/1371))\n- **tree-select:** 修复 `modelValue` 为 0 时, 导致状态不被选中 ([#1370](https://github.com/arco-design/arco-design-vue/pull/1370))\n- **input-number:** 修复设定精度后会省略 '0' 的问题 ([#1368](https://github.com/arco-design/arco-design-vue/pull/1368))\n\n### 💅 样式更新\n\n- **popconfirm:** 修复不同类型下图标默认黑色的问题 ([#1366](https://github.com/arco-design/arco-design-vue/pull/1366))\n\n\n## 2.32.0\n\n`2022-06-24`\n\n### 🆕 新增功能\n\n- **typography:** 新增 `tooltip-props` 类属性 ([#1338](https://github.com/arco-design/arco-design-vue/pull/1338))\n- **table:** TableRowSelection 增加 onlyCurrent 属性，更改表格默认维护所有分页的选择状态 ([#1334](https://github.com/arco-design/arco-design-vue/pull/1334))\n- **statistic:** 支持自定义显示值样式 ([#1320](https://github.com/arco-design/arco-design-vue/pull/1320))\n\n### 🐛 问题修复\n\n- **modal:** 修复当模态框超出屏幕大小后，移动位置导致错位的问题 ([#1336](https://github.com/arco-design/arco-design-vue/pull/1336))\n- **input-tag:** 修复中文输入法时报错问题 ([#1335](https://github.com/arco-design/arco-design-vue/pull/1335))\n- **tree:** 修复点击半选状态的节点显示错误的问题 ([#1331](https://github.com/arco-design/arco-design-vue/pull/1331))\n- **input-number:** 修复在表单以外清除时的错误 ([#1329](https://github.com/arco-design/arco-design-vue/pull/1329))\n\n### 💎 功能优化\n\n- **trigger:** 弹出层动画期间不再可以触发事件 ([#1337](https://github.com/arco-design/arco-design-vue/pull/1337))\n- **table:** cellStyle 类属性添加的样式移动到 td 元素上，解决部分场景下背景色问题 ([#1334](https://github.com/arco-design/arco-design-vue/pull/1334))\n\n### 💅 样式更新\n\n- **tag:** 火狐浏览器溢出样式兼容 ([#1317](https://github.com/arco-design/arco-design-vue/pull/1317))\n\n\n## 2.31.0\n\n`2022-06-17`\n\n### 🆕 新增功能\n\n- **form:** resetFields 和  clearValidate 方法增加参数支持 ([#1305](https://github.com/arco-design/arco-design-vue/pull/1305))\n- **table:** 增加新的组件方法，详情可见文档 ([#1304](https://github.com/arco-design/arco-design-vue/pull/1304))\n- **table:** titleSlotName 定义的插槽增加 column 参数 ([#1304](https://github.com/arco-design/arco-design-vue/pull/1304))\n- **modal:** 增加 bodyClass 和 bodyStyle ([#1303](https://github.com/arco-design/arco-design-vue/pull/1303))\n\n### 🐛 问题修复\n\n- 修复虚拟滚动条 `scrollIntoView` 定位错误的问题 ([#1301](https://github.com/arco-design/arco-design-vue/pull/1301))\n- **menu:** 修复横向菜单收起后无法展开的问题 ([#1297](https://github.com/arco-design/arco-design-vue/pull/1297))\n\n\n## 2.30.2\n\n`2022-06-11`\n\n### 🐛 问题修复\n\n- **table:** 修复 align='left' 时表头居中的问题 ([#1278](https://github.com/arco-design/arco-design-vue/pull/1278))\n\n### 💎 功能优化\n\n- **table:** 无展开按钮时不再显示缩进 ([#1278](https://github.com/arco-design/arco-design-vue/pull/1278))\n\n\n## 2.30.1\n\n`2022-06-10`\n\n### 💅 样式更新\n\n- **space:** 仅在横向模式使用 flex 布局的 item ([#1277](https://github.com/arco-design/arco-design-vue/pull/1277))\n\n\n## 2.30.0\n\n`2022-06-10`\n\n### ⚠️ 重点注意\n\n- **table:** 由于功能需要，`arco-table-cell` 改为 flex 布局，且在表格内容外新增 `arco-table-td-content`  包裹层，如有自定义样式请留意 DOM 结构的改变 ([#1248](https://github.com/arco-design/arco-design-vue/pull/1248))\n\n### 🆕 新增功能\n\n- **table:** 增加 `sticky-header` 表头吸顶功能 ([#1248](https://github.com/arco-design/arco-design-vue/pull/1248))\n- **table:** 表格列配置增加 `summaryCellStyle` 属性 ([#1248](https://github.com/arco-design/arco-design-vue/pull/1248))\n\n### 🐛 问题修复\n\n- **select:** 修复远程搜索与 fieldNames 同时使用，没有显示选项的问题 ([#1271](https://github.com/arco-design/arco-design-vue/pull/1271))\n- **input:** 修复在输入法后不会触发 form 校验的问题 ([#1263](https://github.com/arco-design/arco-design-vue/pull/1263))\n- **input:** 修复在 Drawer 中使用带前后置标签产生的高度问题 ([#1263](https://github.com/arco-design/arco-design-vue/pull/1263))\n- **modal:** 在组件卸载时重置 overflow 设置 ([#1262](https://github.com/arco-design/arco-design-vue/pull/1262))\n- **table:** 修复树型数据时文字省略错误的问题 ([#1248](https://github.com/arco-design/arco-design-vue/pull/1248))\n- **table:** 修复分组表头与固定列同时使用出现的问题 ([#1248](https://github.com/arco-design/arco-design-vue/pull/1248))\n\n### 💎 功能优化\n\n- **tabs:** 增加 focus 样式和键盘事件 ([#1264](https://github.com/arco-design/arco-design-vue/pull/1264))\n- **table:** 支持虚拟列表和固定列同时使用 ([#1248](https://github.com/arco-design/arco-design-vue/pull/1248))\n\n### 💅 样式更新\n\n- **select:** 修复在选项 label 为空时，选择框塌陷的问题 ([#1274](https://github.com/arco-design/arco-design-vue/pull/1274))\n- **space:** space-item 修改为 flex 布局，解决行内元素垂直居中问题 ([#1273](https://github.com/arco-design/arco-design-vue/pull/1273))\n- **table:** 修复横向滚动阴影问题 ([#1248](https://github.com/arco-design/arco-design-vue/pull/1248))\n\n\n## 2.29.1\n\n`2022-06-02`\n\n### 🐛 问题修复\n\n- **list:** 修复在某些情况下 reachBottom 不会触发的问题 ([#1228](https://github.com/arco-design/arco-design-vue/pull/1228))\n- **mention:** 修复按需加载时丢失 textarea 样式的问题 ([#1227](https://github.com/arco-design/arco-design-vue/pull/1227))\n- **space:** 修复子组件使用 key 失效的问题 ([#1223](https://github.com/arco-design/arco-design-vue/pull/1223))\n- **cascader:** 修复使用 number 类型的 value 匹配失败的问题 ([#1230](https://github.com/arco-design/arco-design-vue/pull/1230))\n\n### 💎 功能优化\n\n- 虚拟列表减少没必要的高度计算，防止抖动 ([#1233](https://github.com/arco-design/arco-design-vue/pull/1233))\n- **tree-select:** 搜索模式下组件失焦后会默认清空输入值 ([#1232](https://github.com/arco-design/arco-design-vue/pull/1232))\n- **input-tag:** 失焦时会默认清空输入值 ([#1232](https://github.com/arco-design/arco-design-vue/pull/1232))\n- **trigger:** 不再默认阻止右键默认事件 ([#1231](https://github.com/arco-design/arco-design-vue/pull/1231))\n- **cascader:** cascader-panel 增加键盘事件 ([#1230](https://github.com/arco-design/arco-design-vue/pull/1230))\n- **button:** 增加 focus 样式 ([#1229](https://github.com/arco-design/arco-design-vue/pull/1229))\n- **input-number:** 增加键盘事件，聚焦时显示步进按钮 ([#1224](https://github.com/arco-design/arco-design-vue/pull/1224))\n\n\n## 2.29.0\n\n`2022-05-27`\n\n### ⚠️ 重点注意\n\n- **cascader:** 外露参数从 CascaderOptionInfo 改为 CascaderOption。不再包含内部数据，用户数据不受影响 ([#1201](https://github.com/arco-design/arco-design-vue/pull/1201))\n\n### 🆕 新增功能\n\n- **tree-select:** 默认支持通过标签删除已选项 ([#1206](https://github.com/arco-design/arco-design-vue/pull/1206))\n- **dropdown:** 增加 `popup-max-height` 属性 ([#1203](https://github.com/arco-design/arco-design-vue/pull/1203))\n- **dropdown:** 子菜单增加 `option-props` 和 icon 插槽 ([#1203](https://github.com/arco-design/arco-design-vue/pull/1203))\n- **table:** 行选择器增加非严格模式支持（级联控制） ([#1202](https://github.com/arco-design/arco-design-vue/pull/1202))\n- **table:** 列属性增加 headerCellStyle 和 bodyCellStyle ([#1202](https://github.com/arco-design/arco-design-vue/pull/1202))\n- **cascader:** 选项 value 支持对象格式，增加 `value-key` 属性 ([#1201](https://github.com/arco-design/arco-design-vue/pull/1201))\n- **cascader:** 增加 `fallback` 属性，可以自定义不存在选项的展示 ([#1201](https://github.com/arco-design/arco-design-vue/pull/1201))\n- **cascader:** 增加 `expand-child` 属性，可以展开子菜单 ([#1201](https://github.com/arco-design/arco-design-vue/pull/1201))\n- **date-picker:** 新增属性 `show-confirm-btn` 用于自定义是否显示确认按钮 ([#1198](https://github.com/arco-design/arco-design-vue/pull/1198))\n\n### 🐛 问题修复\n\n- **tree-select:** 修复设置了 field-names 后拖拽失效的问题 ([#1207](https://github.com/arco-design/arco-design-vue/pull/1207))\n- **mention:** 修复 textarea 模式下输入后光标移动的问题 ([#1204](https://github.com/arco-design/arco-design-vue/pull/1204))\n- **input-number:** 修复 clear 没有触发 form 校验的问题 ([#1204](https://github.com/arco-design/arco-design-vue/pull/1204))\n- **select:** 修复 inputValue 受控失效的问题 ([#1204](https://github.com/arco-design/arco-design-vue/pull/1204))\n\n### 💎 功能优化\n\n- **cascader:** 优化子菜单展开逻辑和键盘事件 ([#1201](https://github.com/arco-design/arco-design-vue/pull/1201))\n- **date-picker:** 拼接时间的时候只更新日期 ([#1199](https://github.com/arco-design/arco-design-vue/pull/1199))\n- 组件增加无障碍化 ARIA 属性 ([#1196](https://github.com/arco-design/arco-design-vue/pull/1196))\n\n\n## 2.28.0\n\n`2022-05-20`\n\n### ⚠️ 重点注意\n\n- 本版本对组件事件类型进行了修正，可能会出现 TS 警告，可根据提示信息修正类型\n\n### 🆕 新增功能\n\n- **config-provider:** 增加 `empty` 和 `loading` 插槽 ([#1180](https://github.com/arco-design/arco-design-vue/pull/1180))\n- **statistic:** 增加 `placeholder` 属性，用于无值时显示 ([#1179](https://github.com/arco-design/arco-design-vue/pull/1179))\n- **table:** `expand ` 和 `select ` 事件增加 record 参数 ([#1178](https://github.com/arco-design/arco-design-vue/pull/1178))\n- **table:** 新增 `columnResize`  事件 ([#1178](https://github.com/arco-design/arco-design-vue/pull/1178))\n- **date-picker:** 新增属性 `preview-shortcut` 用于自定义是否要预览快捷选项的结果 ([#1175](https://github.com/arco-design/arco-design-vue/pull/1175))\n\n### 🐛 问题修复\n\n- **cascader:** 修复懒加载情况下，多选状态显示错误的问题 ([#1177](https://github.com/arco-design/arco-design-vue/pull/1177))\n- **cascader:** 修复点击选择框时，多次调用懒加载函数的问题 ([#1177](https://github.com/arco-design/arco-design-vue/pull/1177))\n- **date-picker:** `选择时间`没有国际化 ([#1173](https://github.com/arco-design/arco-design-vue/pull/1173))\n\n### 💎 功能优化\n\n- **date-picker:** 移出 `shortcut` 的时候重置回已选值 ([#1175](https://github.com/arco-design/arco-design-vue/pull/1175))\n\n### 💅 样式更新\n\n- **textarea:** 修复设置高度样式后，文本框的显示问题 ([#1176](https://github.com/arco-design/arco-design-vue/pull/1176))\n\n### 🆎 类型修正\n\n- 修正全部组件事件相关 TS 类型 ([#1160](https://github.com/arco-design/arco-design-vue/pull/1160))\n\n\n## 2.27.1\n\n`2022-05-16`\n\n### 🐛 问题修复\n\n- **select:** 修复使用 options 属性时，分组选项不能选择的问题 ([#1141](https://github.com/arco-design/arco-design-vue/pull/1141))\n\n### 🆎 类型修正\n\n- 修复部分组件 ts 错误问题 ([#1139](https://github.com/arco-design/arco-design-vue/pull/1139))\n\n\n## 2.27.0\n\n`2022-05-13`\n\n### 🆕 新增功能\n\n- **tree:** `checkable` 支持函数格式 ([#1119](https://github.com/arco-design/arco-design-vue/pull/1119))\n- **tree:** `seleable` 支持函数格式 ([#1119](https://github.com/arco-design/arco-design-vue/pull/1119))\n- **tree:** 新增属性 `actionOnNodeClick`，可用于开启点击节点触发展开 ([#1119](https://github.com/arco-design/arco-design-vue/pull/1119))\n- **tree-select:** 新增属性 `seletable`，支持自定义可选节点 ([#1119](https://github.com/arco-design/arco-design-vue/pull/1119))\n- **input-number:** 增加 modelEvent 属性和 input 事件 ([#1115](https://github.com/arco-design/arco-design-vue/pull/1115))\n- **tabs:** 增加 destroyOnHide 属性 ([#1107](https://github.com/arco-design/arco-design-vue/pull/1107))\n- **input:** 增加 input-attrs 属性 ([#1106](https://github.com/arco-design/arco-design-vue/pull/1106))\n- **input:** 修改 blur 事件触发顺序到 change 之后 ([#1106](https://github.com/arco-design/arco-design-vue/pull/1106))\n- **collapse:** 增加 destroyOnHide 属性，默认不会在隐藏时销毁内容 ([#1100](https://github.com/arco-design/arco-design-vue/pull/1100))\n- **radio:** `radio-group` 支持 `options` 属性 ([#1090](https://github.com/arco-design/arco-design-vue/pull/1090))\n- **checkbox:** `checkbox-group` 增加 `checkbox` 插槽 ([#1087](https://github.com/arco-design/arco-design-vue/pull/1087))\n- **checkbox:** `checkbox-group` 支持 `options` 属性配置子元素 ([#1058](https://github.com/arco-design/arco-design-vue/pull/1058))\n\n### 🐛 问题修复\n\n- **list:** 修复分页属性失效的问题 ([#1125](https://github.com/arco-design/arco-design-vue/pull/1125))\n- **pagination:** 修复 simple 模式下，size 失效的问题 ([#1123](https://github.com/arco-design/arco-design-vue/pull/1123))\n- **typography:** 修复按下回车的时候触发两次 `editEnd` 的问题 ([#1122](https://github.com/arco-design/arco-design-vue/pull/1122))\n- **select:** 修复 options 属性中 `render`、`tagProps` 不生效的问题 ([#1114](https://github.com/arco-design/arco-design-vue/pull/1114))\n- **tree:** 修复当 key 为 number 的时候，expandAll 失败的问题 ([#1113](https://github.com/arco-design/arco-design-vue/pull/1113))\n- **date-picker:** 修复使用 `v-model` 绑定 `week-picker ` 和 `quarter-picker` 的时候值错误的问题 ([#1112](https://github.com/arco-design/arco-design-vue/pull/1112))\n- **message:** 修复 clear 方法在多次调用时出现错误的问题 ([#1095](https://github.com/arco-design/arco-design-vue/pull/1095))\n- **modal:** 修复拖拽后开启全屏产生位置偏移的问题 ([#1070](https://github.com/arco-design/arco-design-vue/pull/1070))\n\n### 💎 功能优化\n\n- **trigger:** 在右键触发时，点击触发元素可以关闭下拉框 ([#1111](https://github.com/arco-design/arco-design-vue/pull/1111))\n- **trigger:** 支持弹出组件嵌套使用 ([#1111](https://github.com/arco-design/arco-design-vue/pull/1111))\n\n### 💅 样式更新\n\n- **table:** 修复存在固定列时，出现竖向滚动条的问题 ([#1124](https://github.com/arco-design/arco-design-vue/pull/1124))\n- **select:** 修复开启搜索时，禁用状态下鼠标指针错误的问题 ([#1114](https://github.com/arco-design/arco-design-vue/pull/1114))\n\n### 🆎 类型修正\n\n- **modal:** 补全 ModalConfig 缺失的属性 ([#1120](https://github.com/arco-design/arco-design-vue/pull/1120))\n- **table:** 使用 VNodeChild 替代接口中的 VNode，支持更广泛类型 ([#1118](https://github.com/arco-design/arco-design-vue/pull/1118))\n\n\n## 2.26.0\n\n`2022-04-29`\n\n### 🆕 新增功能\n\n- **table:** column 配置增加 tooltip 属性 ([#1065](https://github.com/arco-design/arco-design-vue/pull/1065))\n- **table:** 增加 thead、th 插槽，tr、td 插槽增加传出数据 ([#1065](https://github.com/arco-design/arco-design-vue/pull/1065))\n- **list:** 支持 `empty` 插槽 ([#1045](https://github.com/arco-design/arco-design-vue/pull/1045))\n\n### 🐛 问题修复\n\n- **collapse:** 修复 `showExpandIcon` 属性失效的问题 ([#1060](https://github.com/arco-design/arco-design-vue/pull/1060))\n- **carousel:** 修复 `trigger` 和 `autoPlay` 属性设置失效的问题 ([#1059](https://github.com/arco-design/arco-design-vue/pull/1059))\n\n### 💎 功能优化\n\n- **table:** table-column 动态修改顺序不需要再手动指定 index ([#1065](https://github.com/arco-design/arco-design-vue/pull/1065))\n\n### 💅 样式更新\n\n- **modal:** body 层增加 `overflow: auto` ([#1030](https://github.com/arco-design/arco-design-vue/pull/1030))\n\n\n## 2.25.2\n\n`2022-04-27`\n\n### 💅 样式更新\n\n- **cascader:** 修复搜索下拉菜单在空白时的宽度问题 ([#1056](https://github.com/arco-design/arco-design-vue/pull/1056))\n\n\n## 2.25.1\n\n`2022-04-27`\n\n### 🐛 问题修复\n\n- **space:** 修复 size 属性类型检测问题 ([#1052](https://github.com/arco-design/arco-design-vue/pull/1052))\n- **grid:** 修复 gutter 属性类型检测问题 ([#1052](https://github.com/arco-design/arco-design-vue/pull/1052))\n- **config-provider:** 修复 size 属性的设置在某些组件中失效的问题 ([#1051](https://github.com/arco-design/arco-design-vue/pull/1051))\n- **tabs:** 修复 #title 插槽在某些情况下不能更新的问题 ([#1050](https://github.com/arco-design/arco-design-vue/pull/1050))\n- 修复部分组件 `popup-visible` 双向绑定状态异常的问题 ([#1049](https://github.com/arco-design/arco-design-vue/pull/1049))\n- **table:** 修复 `2.25.0` 版本中扩展行传出 record 参数格式错误问题 ([#1047](https://github.com/arco-design/arco-design-vue/pull/1047))\n- **date-picker:** 按钮 `今天` 无法通过将 `show-now-btn` 设置为 false 来隐藏 ([#1046](https://github.com/arco-design/arco-design-vue/pull/1046))\n- **menu:** 菜单数据收集器收集到的数据有缺失 ([#1034](https://github.com/arco-design/arco-design-vue/pull/1034))\n\n### 💅 样式更新\n\n- **table:** 增加内部 table 类名，修复与 `descriptions` 组件一起使用的样式问题 ([#1053](https://github.com/arco-design/arco-design-vue/pull/1053))\n- **input-number:** 修复清除按钮显示位置问题 ([#1048](https://github.com/arco-design/arco-design-vue/pull/1048))\n- **checkbox:** 修复禁用状态下 hover 样式还会改变的问题 ([#1040](https://github.com/arco-design/arco-design-vue/pull/1040))\n\n\n## 2.25.0\n\n`2022-04-22`\n\n### 🆕 新增功能\n\n- **notification:** 增加 footer 属性 ([#1029](https://github.com/arco-design/arco-design-vue/pull/1029))\n- **tabs:** 增加 hideContent 属性 ([#1025](https://github.com/arco-design/arco-design-vue/pull/1025))\n- **table:** 增加行选择器和展开行双向绑定属性 ([#1023](https://github.com/arco-design/arco-design-vue/pull/1023))\n- **date-picker:** 增加参数 `exchangeTime` ([#1020](https://github.com/arco-design/arco-design-vue/pull/1020))\n- **icon:** 增加 `attachment`, `archive`, `calendar-clock`, `palette`, `launch` 图标 ([#1017](https://github.com/arco-design/arco-design-vue/pull/1017))\n- **config-provider:** 增加 updateAtScroll 属性 ([#1015](https://github.com/arco-design/arco-design-vue/pull/1015))\n- **table:** `select` 事件新增第二个参数 `rowKey` ([#999](https://github.com/arco-design/arco-design-vue/pull/999))\n- **config-provider:** 添加 `global` 属性 ([#933](https://github.com/arco-design/arco-design-vue/pull/933))\n\n### 🐛 问题修复\n\n- **input-number:** 修复 error 属性失效的问题 ([#1026](https://github.com/arco-design/arco-design-vue/pull/1026))\n- 修复 Volar 智能提示失效的问题 ([#1022](https://github.com/arco-design/arco-design-vue/pull/1022))\n- **icon:** 修正 `link`, `image-close`,`lock`, `unlock`,`sync` 图标 ([#1017](https://github.com/arco-design/arco-design-vue/pull/1017))\n\n### 💎 功能优化\n\n- **table:** 自定义单元格渲染的 `record` 参数支持修改 ([#1023](https://github.com/arco-design/arco-design-vue/pull/1023))\n- **tree:** 调用方法操作单个节点的时候在回调参数重增加目标节点信息 ([#1021](https://github.com/arco-design/arco-design-vue/pull/1021))\n- **modal:** 使用 `esc` 关闭时只会关闭最上层弹窗 ([#1018](https://github.com/arco-design/arco-design-vue/pull/1018))\n\n### 💅 样式更新\n\n- **menu:** 弹出菜单的 icon 增加 margin-right ([#1029](https://github.com/arco-design/arco-design-vue/pull/1029))\n\n### 🆎 类型修正\n\n- **tag:** 修复 TagProps 的问题 ([#1024](https://github.com/arco-design/arco-design-vue/pull/1024))\n\n\n## 2.24.1\n\n`2022-04-16`\n\n### 🐛 问题修复\n\n- **button:** 修复 `config-provide` 注入失效的问题 ([#986](https://github.com/arco-design/arco-design-vue/pull/986))\n\n\n## 2.24.0\n\n`2022-04-15`\n\n### 💎 功能优化\n\n- **date-picker:** 传递了 timePickerProps 就会在最终值上拼接时间 ([#981](https://github.com/arco-design/arco-design-vue/pull/981))\n- **table:** 当 columns 属性中存在 titleSlotName 时会优先使用 ([#969](https://github.com/arco-design/arco-design-vue/pull/969))\n\n### 🆕 新增功能\n\n- **modal:** 增加动画名属性 ([#985](https://github.com/arco-design/arco-design-vue/pull/985))\n- **button:** `button-group` 支持为子组件 `button` 设置属性 ([#967](https://github.com/arco-design/arco-design-vue/pull/967))\n\n### 🐛 问题修复\n\n- **typography:** 解决 `slots.default` 报警告的问题 ([#980](https://github.com/arco-design/arco-design-vue/pull/980))\n- **modal:** 修复在某些情况下不会锁定 body 的问题 ([#968](https://github.com/arco-design/arco-design-vue/pull/968))\n- **menu:** 修复 `auto-scroll-into-view` 无效的问题 ([#966](https://github.com/arco-design/arco-design-vue/pull/966))\n- **cascader:** 修复复选框的半选状态显示错误的问题 ([#963](https://github.com/arco-design/arco-design-vue/pull/963))\n- **steps:** 修复 Steps 与 Step 组件非直接父子关系时 index 错误的问题 ([#959](https://github.com/arco-design/arco-design-vue/pull/959))\n\n### 💅 样式更新\n\n- **modal:** 修复全屏下动画导致闪现滚动条的问题 ([#985](https://github.com/arco-design/arco-design-vue/pull/985))\n- **pagination:** 分页选择项增加 padding ([#984](https://github.com/arco-design/arco-design-vue/pull/984))\n\n### 🆎 类型修正\n\n- 增加常用 typescript 类型定义的导出 ([#983](https://github.com/arco-design/arco-design-vue/pull/983))\n- **select:** `Option、OptionData、GroupOption`  接口名修改为 `SelectOption、SelectOptionData、SelectOptionGroup` ([#983](https://github.com/arco-design/arco-design-vue/pull/983))\n- **table:** `TableColumn` 接口名修改为 `TableColumnData` ([#983](https://github.com/arco-design/arco-design-vue/pull/983))\n- **tree:** `FieldNames` 修改为 `TreeFieldNames` ([#977](https://github.com/arco-design/arco-design-vue/pull/977))\n\n\n## 2.23.0\n\n`2022-04-08`\n\n### 💎 功能优化\n\n- **pagination:** 优化切换 pageSize 时的页码改变逻辑 ([#954](https://github.com/arco-design/arco-design-vue/pull/954))\n- **input:** 输入类组件的 `clear` 事件会同时触发 `change` 事件 ([#951](https://github.com/arco-design/arco-design-vue/pull/951))\n- **table:** 横向滚动模式下，如果数据为空，表头会显示滚动条 ([#948](https://github.com/arco-design/arco-design-vue/pull/948))\n- **modal:** 修复在滚动条为浮动的情况下，body没有锁定的问题 ([#945](https://github.com/arco-design/arco-design-vue/pull/945))\n\n### 🆕 新增功能\n\n- **pagination:** 增加 `jumper-prepend` 和  `jumper-append` 插槽 ([#954](https://github.com/arco-design/arco-design-vue/pull/954))\n- **image:** 增加 footer-class  属性 ([#953](https://github.com/arco-design/arco-design-vue/pull/953))\n- **cascader:** 增加 empty 插槽 ([#952](https://github.com/arco-design/arco-design-vue/pull/952))\n- **select:** 增加 trigger 插槽 ([#952](https://github.com/arco-design/arco-design-vue/pull/952))\n- **mention:** 增加 allow-clear 属性和事件 ([#951](https://github.com/arco-design/arco-design-vue/pull/951))\n- **auto-complete:** 增加 allow-clear 属性和事件 ([#951](https://github.com/arco-design/arco-design-vue/pull/951))\n- **menu:** 支持通过 `popup-max-height` 设置弹出框的最大高度 ([#949](https://github.com/arco-design/arco-design-vue/pull/949))\n- **table:** columns 属性增加 titleSlotName，filterable 属性增加 slotName ([#948](https://github.com/arco-design/arco-design-vue/pull/948))\n- **table:** table-column 增加 filter-content，filter-content 插槽 ([#948](https://github.com/arco-design/arco-design-vue/pull/948))\n- **table:** 增加 summary-cell 插槽 ([#948](https://github.com/arco-design/arco-design-vue/pull/948))\n- **upload:** 增加图标相关插槽 ([#944](https://github.com/arco-design/arco-design-vue/pull/944))\n- **upload:** 增加 updateFile 方法，onBeforeUpload 支持返回 File ([#944](https://github.com/arco-design/arco-design-vue/pull/944))\n- **upload:** 优化初始图片显示逻辑 ([#944](https://github.com/arco-design/arco-design-vue/pull/944))\n\n### 🐛 问题修复\n\n- **cascader:** 修复 2.22.0 版本中懒加载的 isLeaf 失效的问题 ([#952](https://github.com/arco-design/arco-design-vue/pull/952))\n- **cascader:** 修复 options 属性在某些情况下不能触发更新的问题 ([#952](https://github.com/arco-design/arco-design-vue/pull/952))\n- **tree-select:** 当 label-in-value 为 true 的时候，事件 change 的入参错误 ([#939](https://github.com/arco-design/arco-design-vue/pull/939))\n\n### 💅 样式更新\n\n- **image:** 修复 footer 区域底部圆角样式问题 ([#953](https://github.com/arco-design/arco-design-vue/pull/953))\n- **modal:** 修复在简单模式下，title-align 靠左对齐失效的问题 ([#945](https://github.com/arco-design/arco-design-vue/pull/945))\n\n\n## 2.22.1\n\n`2022-04-02`\n\n### 🐛 问题修复\n\n- **menu:** 修复菜单图标的高度不对的问题 ([#928](https://github.com/arco-design/arco-design-vue/pull/928))\n- **table:** 修复虚拟列表和滚动一起使用的问题 ([#926](https://github.com/arco-design/arco-design-vue/pull/926))\n- **mention:** 修复开发环境下出现警告提示的问题 ([#925](https://github.com/arco-design/arco-design-vue/pull/925))\n\n\n## 2.22.0\n\n`2022-04-01`\n\n### 💎 功能优化\n\n- **select:** 加载状态下不再可以触发回车事件 ([#911](https://github.com/arco-design/arco-design-vue/pull/911))\n\n### 🆕 新增功能\n\n- **table:** 增加 `selectAll` 方法 ([#920](https://github.com/arco-design/arco-design-vue/pull/920))\n- **form:** 支持修改表单项标签的渲染元素 ([#919](https://github.com/arco-design/arco-design-vue/pull/919))\n- **cascader:** 增加 `field-names` 属性，允许自定义字段 ([#912](https://github.com/arco-design/arco-design-vue/pull/912))\n- **select:** 增加 `field-names` 属性，允许自定义字段 ([#911](https://github.com/arco-design/arco-design-vue/pull/911))\n- **input-tag:** 增加 `field-names` 属性 ([#910](https://github.com/arco-design/arco-design-vue/pull/910))\n- **tree-select:** 新增参数 `fallback-option` ([#894](https://github.com/arco-design/arco-design-vue/pull/894))\n\n### 🐛 问题修复\n\n- **table:** 修复某些情况下虚拟列表宽度错误的问题 ([#920](https://github.com/arco-design/arco-design-vue/pull/920))\n- **modal:** 修复 `align-center=\"false\"` 时自动宽度和拖动错误的问题 ([#918](https://github.com/arco-design/arco-design-vue/pull/918))\n- 修复虚拟列表在项目高度偏差较大的时候出现底部空白的问题 ([#917](https://github.com/arco-design/arco-design-vue/pull/917))\n- **tree-select:** 修复  null 值显示为空的问题 ([#916](https://github.com/arco-design/arco-design-vue/pull/916))\n- **typography:** 修复复制无效的问题 ([#915](https://github.com/arco-design/arco-design-vue/pull/915))\n- **select:** 修复 `allow-create` 模式下会出现重复选项的问题 ([#911](https://github.com/arco-design/arco-design-vue/pull/911))\n- **input-number:** 修复切换 `mode` 时展示错误的问题 ([#909](https://github.com/arco-design/arco-design-vue/pull/909))\n- **mention:** 修复 v-model 双向绑定在选择值时错误的问题 ([#908](https://github.com/arco-design/arco-design-vue/pull/908))\n- **upload:** 修复 onButtonClick 属性不可用的问题 ([#907](https://github.com/arco-design/arco-design-vue/pull/907))\n- **menu:** 弹出框中的图标与文字没有对齐 ([#889](https://github.com/arco-design/arco-design-vue/pull/889))\n\n### 💅 样式更新\n\n- **form:** 表单项内容样式增加最大宽度，防止溢出 ([#919](https://github.com/arco-design/arco-design-vue/pull/919))\n\n\n## 2.21.2\n\n`2022-03-29`\n\n### 🐛 问题修复\n\n- **select:** 修复 `fallback-option` 属性设置 false 失效的问题 ([#893](https://github.com/arco-design/arco-design-vue/pull/893))\n- **select:** 修复多选模式下选择的标签默认不显示删除的问题 ([#886](https://github.com/arco-design/arco-design-vue/pull/886))\n\n\n## 2.21.1\n\n`2022-03-25`\n\n### 🐛 问题修复\n\n- **affix:** 修复组件在 SSR 下报错的问题 ([#879](https://github.com/arco-design/arco-design-vue/pull/879))\n\n\n## 2.21.0\n\n`2022-03-25`\n\n### 💎 功能优化\n\n- 支持 SSR 使用 ([#872](https://github.com/arco-design/arco-design-vue/pull/872))\n\n### 🆕 新增功能\n\n- **table:** 增加总结行功能 ([#877](https://github.com/arco-design/arco-design-vue/pull/877))\n- **tree:** 新增配置项 `onlyCheckLeaf` ([#876](https://github.com/arco-design/arco-design-vue/pull/876))\n- **date-picker:** `dayStartOfWeek` 支持设置为 0-6 ([#874](https://github.com/arco-design/arco-design-vue/pull/874))\n- **tree:** 支持关闭展开时的动效 ([#867](https://github.com/arco-design/arco-design-vue/pull/867))\n\n### 🐛 问题修复\n\n- **tree-select:** 修复 `max-tags` 参数名错误的问题，应为 `max-tag-count` ([#873](https://github.com/arco-design/arco-design-vue/pull/873))\n- 修复部分组件使用 `popup-container` 指定的容器不存在时报错的问题 ([#871](https://github.com/arco-design/arco-design-vue/pull/871))\n- **trigger:** 修复在未卸载的情况下，最外层 `div` 没有隐藏的问题 ([#871](https://github.com/arco-design/arco-design-vue/pull/871))\n- **avatar:** 修复没有内容时会出现警告提示的问题 ([#870](https://github.com/arco-design/arco-design-vue/pull/870))\n- **tag:** 移除尺寸类型 `mini` ([#860](https://github.com/arco-design/arco-design-vue/pull/860))\n- **modal:** 修复使用函数方式触发Modal显示时，按钮处于焦点，此时点击回车会继续出发点击事件 ([#860](https://github.com/arco-design/arco-design-vue/pull/860))\n\n### 💅 样式更新\n\n- **menu:** 解决菜单项的缩进换行的问题 ([#866](https://github.com/arco-design/arco-design-vue/pull/866))\n- **tree:** 修复连接线显示错乱的问题 ([#865](https://github.com/arco-design/arco-design-vue/pull/865))\n\n### 🆎 类型修正\n\n- **tree:** 增加filednames的自定义icon功能 ([#848](https://github.com/arco-design/arco-design-vue/pull/848))\n\n\n## 2.20.2\n\n`2022-03-24`\n\n### 🐛 问题修复\n\n- **table:** 修复 `table-column` 组件在模板中直接书写对象参数时导致不断更新的问题 ([#861](https://github.com/arco-design/arco-design-vue/pull/861))\n- **table:** 修复仅有一个 `table-column` 时没有列数据的问题 ([#861](https://github.com/arco-design/arco-design-vue/pull/861))\n- **table:** 修复 `table-column` 的排序问题，可通过 `index` 参数解决 ([#861](https://github.com/arco-design/arco-design-vue/pull/861))\n\n### 💅 样式更新\n\n- **dropdown:** 修复选项中图标的垂直居中问题 ([#862](https://github.com/arco-design/arco-design-vue/pull/862))\n- 修复部分组件的下拉菜单动画问题 ([#862](https://github.com/arco-design/arco-design-vue/pull/862))\n\n\n## 2.20.1\n\n`2022-03-21`\n\n### 🐛 问题修复\n\n- **tree:** 修复新版本中展开事件名称错误的问题 ([#853](https://github.com/arco-design/arco-design-vue/pull/853))\n\n### 💅 样式更新\n\n- **form:** 修复 `form-item` 星号与 windicss 的兼容问题 ([#854](https://github.com/arco-design/arco-design-vue/pull/854))\n- **select:** 修复选项 #icon 插槽的垂直居中问题 ([#854](https://github.com/arco-design/arco-design-vue/pull/854))\n- **select:** 修复选项超出宽度后没有显示省略的问题 ([#854](https://github.com/arco-design/arco-design-vue/pull/854))\n- **transfer:** 修复选项超出宽度后没有显示省略的问题 ([#854](https://github.com/arco-design/arco-design-vue/pull/854))\n\n\n## 2.20.0\n\n`2022-03-18`\n\n### 🆕 新增功能\n\n- **table:** 使用 Context 方式重构组件，`table-colum` 支持二次封装 ([#845](https://github.com/arco-design/arco-design-vue/pull/845))\n- **table:** scroll 属性增加 `maxHeight`, `minWidth` 属性 ([#845](https://github.com/arco-design/arco-design-vue/pull/845))\n- **cascader:** 增加 `cascader-panel` 组件 ([#842](https://github.com/arco-design/arco-design-vue/pull/842))\n- **descriptions:** `column` 属性支持响应式配置 ([#839](https://github.com/arco-design/arco-design-vue/pull/839))\n- **list:** 增加 `#scroll-loading` 插槽 ([#838](https://github.com/arco-design/arco-design-vue/pull/838))\n- **tree:** 添加树的实例方法 ([#837](https://github.com/arco-design/arco-design-vue/pull/837))\n\n### 🐛 问题修复\n\n- **date-picker:** 选择结束时间的时候没有触发 select 事件 ([#844](https://github.com/arco-design/arco-design-vue/pull/844))\n- **cascader:** 修复下拉菜单选中路径可能与当前值不符的问题 ([#843](https://github.com/arco-design/arco-design-vue/pull/843))\n- **select:** 修复开启虚拟列表时，搜索功能失败的问题 ([#841](https://github.com/arco-design/arco-design-vue/pull/841))\n- **select:** 修复小键盘 `Enter` 键不能选中的问题 ([#841](https://github.com/arco-design/arco-design-vue/pull/841))\n- **modal:** 修复创建方法中返回的 `close` 函数错误的问题 ([#840](https://github.com/arco-design/arco-design-vue/pull/840))\n- **typography:** 修复 `ellipsisText` 未更新的问题 ([#833](https://github.com/arco-design/arco-design-vue/pull/833))\n\n### 💅 样式更新\n\n- **table:** 修复开启排序后，表头文字不能居中的问题 ([#845](https://github.com/arco-design/arco-design-vue/pull/845))\n\n## 2.19.0\n\n`2022-03-11`\n\n### ⚠️ 重点注意\n\n- **table:** 修改排序函数 sorter 的传出数据，增强使用 ([#810](https://github.com/arco-design/arco-design-vue/pull/810))\n\n### 💎 功能优化\n\n- `modal`, `message`, `notifaction` 组件的函数式调用增加 appContext 的支持，详情请参见文档 ([#804](https://github.com/arco-design/arco-design-vue/pull/804))\n\n### 🆕 新增功能\n\n- **tree:** 支持设置半选节点 ([#809](https://github.com/arco-design/arco-design-vue/pull/809))\n- **tree:** 实例上新增可调用的方法:  `getCheckedNodes` `getSelectedNodes` `getExpandedNodes` `getHalfCheckedNodes` ([#809](https://github.com/arco-design/arco-design-vue/pull/809))\n- **drawer:** 增加 `hide-cancel` 属性 ([#803](https://github.com/arco-design/arco-design-vue/pull/803))\n- **modal:** 增加 `draggable` 属性，支持可拖动 ([#802](https://github.com/arco-design/arco-design-vue/pull/802))\n- **modal:** 增加 `fullscreen` 属性，支持全屏展示 ([#802](https://github.com/arco-design/arco-design-vue/pull/802))\n- **grid:** 当列跨度为0的时候`a-col`将被隐藏 ([#797](https://github.com/arco-design/arco-design-vue/pull/797))\n\n### 🐛 问题修复\n\n- **descriptions:** 修复 `data` 为空数据时报错的问题 ([#812](https://github.com/arco-design/arco-design-vue/pull/812))\n- **form:** 修复 `form-item` 的 `field` 属性中存在数组时失效的问题 ([#807](https://github.com/arco-design/arco-design-vue/pull/807))\n- **form:** 修复 `disabled` 开启后，部分组件功能仍可用问题 ([#807](https://github.com/arco-design/arco-design-vue/pull/807))\n- **tree:** 修复当节点找不到的时候组件渲染出错的问题 ([#800](https://github.com/arco-design/arco-design-vue/pull/800))\n- **date-picker:** 修复范围选择器弹出层的偏移量错误的问题 ([#796](https://github.com/arco-design/arco-design-vue/pull/796))\n\n\n## 2.18.1\n\n`2022-03-07`\n\n### 🐛 问题修复\n\n- **tabs:** 修复初始化时会触发 activeKey 修改的问题 ([#787](https://github.com/arco-design/arco-design-vue/pull/787))\n- **upload:** 修复上传进度计算错误的问题 ([#786](https://github.com/arco-design/arco-design-vue/pull/786))\n- **upload:** 修复上传中，取消按钮失效的问题 ([#786](https://github.com/arco-design/arco-design-vue/pull/786))\n\n\n## 2.18.0\n\n`2022-03-04`\n\n### 💎 功能优化\n\n- **select:** 选择框展示使用 flex 布局方式 ([#778](https://github.com/arco-design/arco-design-vue/pull/778))\n- **select:** trigger-props 属性可以覆盖默认属性 ([#778](https://github.com/arco-design/arco-design-vue/pull/778))\n- **breadcrumb:** 使用 Context 方式优化组件 ([#774](https://github.com/arco-design/arco-design-vue/pull/774))\n- **avatar:** 使用 Context 方式优化组件 ([#773](https://github.com/arco-design/arco-design-vue/pull/773))\n- **steps:** 使用 Context 方式优化组件 ([#772](https://github.com/arco-design/arco-design-vue/pull/772))\n- **tabs:** 使用 Context 方式优化组件，支持对 TabPane 的二次封装 ([#771](https://github.com/arco-design/arco-design-vue/pull/771))\n- **tabs:** key 支持 number 类型 ([#771](https://github.com/arco-design/arco-design-vue/pull/771))\n- **tabs:** 增加 autoSwitch 属性 ([#771](https://github.com/arco-design/arco-design-vue/pull/771))\n\n### 🆕 新增功能\n\n- 增加 GlobalComponents 定义 ([#782](https://github.com/arco-design/arco-design-vue/pull/782))\n- **cascader:** 增加 `#option`, `#label` 插槽 ([#781](https://github.com/arco-design/arco-design-vue/pull/781))\n- **table:** 滚动模式支持设置高度百分比 ([#780](https://github.com/arco-design/arco-design-vue/pull/780))\n- **table:** column 数据增加 slotName 属性，允许指定渲染插槽 ([#780](https://github.com/arco-design/arco-design-vue/pull/780))\n- **table:** 增加 `pagination-left` 和 `pagination-right` 插槽 ([#780](https://github.com/arco-design/arco-design-vue/pull/780))\n- **rate:** 增加 color 属性 ([#770](https://github.com/arco-design/arco-design-vue/pull/770))\n- **checkbox:** 增加 checkbox 插槽，可以自定义复选框 ([#769](https://github.com/arco-design/arco-design-vue/pull/769))\n- **radio:** 增加 radio 插槽，可以自定义单选框 ([#769](https://github.com/arco-design/arco-design-vue/pull/769))\n- **date-picker:** 支持在头部快捷切换年月 ([#754](https://github.com/arco-design/arco-design-vue/pull/754))\n\n### 🐛 问题修复\n\n- **select:** 修复 label 属性失效的问题 ([#777](https://github.com/arco-design/arco-design-vue/pull/777))\n- **select:** 修复 option 的属性\b没有同步更新的问题 ([#777](https://github.com/arco-design/arco-design-vue/pull/777))\n- **list:** 列表项应渲染为 div ([#776](https://github.com/arco-design/arco-design-vue/pull/776))\n- **slider:** 修复输入框改变时不会触发 change 的问题 ([#775](https://github.com/arco-design/arco-design-vue/pull/775))\n- **form:** 修复嵌套数据中重置方法失效的问题 ([#768](https://github.com/arco-design/arco-design-vue/pull/768))\n\n### 💅 样式更新\n\n- **menu:** 菜单项的图标没有垂直居中 ([#767](https://github.com/arco-design/arco-design-vue/pull/767))\n\n\n## 2.18.0-beta.3\n\n`2022-02-26`\n\n### 💎 功能优化\n\n- **input:** modelValue 支持 null ([#743](https://github.com/arco-design/arco-design-vue/pull/743))\n\n### 🐛 问题修复\n\n- **transfer:** 修复列表显示问题 ([#744](https://github.com/arco-design/arco-design-vue/pull/744))\n\n\n## 2.18.0-beta.2\n\n`2022-02-25`\n\n### ⚠️ 重点注意\n\n- **trigger:** 弹出层增加一层 `wrapper div` 用来提供对tranform动画的支持 ([#732](https://github.com/arco-design/arco-design-vue/pull/732))\n- **list:** 默认渲染 spin 组件，防止切换状态时导致组件重新挂载 ([#730](https://github.com/arco-design/arco-design-vue/pull/730))\n- **list:** 支持渲染任何子元素 ([#730](https://github.com/arco-design/arco-design-vue/pull/730))\n\n### 💎 功能优化\n\n- **form:** `auto-label-width` 开启时不在允许标签换行，防止换行后计算错误 ([#738](https://github.com/arco-design/arco-design-vue/pull/738))\n- **modal:** 优化点击遮罩层关闭 ([#737](https://github.com/arco-design/arco-design-vue/pull/737))\n\n### 🆕 新增功能\n\n- **descriptions:** 增加 `descriptions-item` 组件 ([#739](https://github.com/arco-design/arco-design-vue/pull/739))\n- **table:** 增加 `span-all`  属性 ([#735](https://github.com/arco-design/arco-design-vue/pull/735))\n- **trigger:** 增加 `show` 和 `hide` 事件 ([#731](https://github.com/arco-design/arco-design-vue/pull/731))\n- **cascader:** 增加 `search-delay` 属性，并默认为 `500ms` ([#729](https://github.com/arco-design/arco-design-vue/pull/729))\n- **cascader:** 增加 `search-option-only-label` 属性，并修改搜索下拉菜单中的选项默认展示路径标签 ([#729](https://github.com/arco-design/arco-design-vue/pull/729))\n- **select:** 增加 `search-delay` 属性，并默认为 `500ms` ([#728](https://github.com/arco-design/arco-design-vue/pull/728))\n- **form:** 校验错误信息新增 label 属性 ([#724](https://github.com/arco-design/arco-design-vue/pull/724))\n- **tree:** 新增插槽 `icon` 用于全局定制节点图标 ([#710](https://github.com/arco-design/arco-design-vue/pull/710))\n\n### 🐛 问题修复\n\n- **table:** 修复 table-column 嵌套使用时，v-for 不能渲染的问题 ([#734](https://github.com/arco-design/arco-design-vue/pull/734))\n- **cascader:** 修复选项更新后选择框展示没有更新的问题 ([#727](https://github.com/arco-design/arco-design-vue/pull/727))\n- **upload:** 修复使用插槽 `upload-item` 报错的问题 ([#715](https://github.com/arco-design/arco-design-vue/pull/715))\n- 修复 `virtual-list` 在滚动条显示和隐藏的边界情况下数据变化没有更新视图的问题 ([#711](https://github.com/arco-design/arco-design-vue/pull/711))\n- 修复 `virtual-list` 行高计算没有包含边框的问题 ([#711](https://github.com/arco-design/arco-design-vue/pull/711))\n- **upload:** 仅在文件类型为图片时生成初始预览图片 ([#706](https://github.com/arco-design/arco-design-vue/pull/706))\n- **message:** 修复同时调用时，出现销毁报错的问题 ([#705](https://github.com/arco-design/arco-design-vue/pull/705))\n\n### 💅 样式更新\n\n- **pagination:** 修复在safari下跳转器文字没有对齐的问题 ([#736](https://github.com/arco-design/arco-design-vue/pull/736))\n- **tooltip:** 优化显示动画，同 react 版本保持一致 ([#733](https://github.com/arco-design/arco-design-vue/pull/733))\n- **popover:** 优化显示动画 ([#733](https://github.com/arco-design/arco-design-vue/pull/733))\n- **popconfirm:** 优化显示动画 ([#733](https://github.com/arco-design/arco-design-vue/pull/733))\n\n\n## 2.18.0-beta.1\n\n`2022-02-18`\n\n### ⚠️ 重点注意\n\n- 本版本为 beta 版本，存在较大改动，情谨慎测试后在生产环境使用\n- **form:** <form-item> 组件重构，使用 context 管理输入组件。如果用户存在自定义输入组件，可参考 `自定义输入组件` 示例更改。 ([#697](https://github.com/arco-design/arco-design-vue/pull/697))\n- 所有输入组件增加 FormItemContext 的注入 ([#697](https://github.com/arco-design/arco-design-vue/pull/697))\n- **radio:** 外层包裹 DOM 从 span 改为 label ([#697](https://github.com/arco-design/arco-design-vue/pull/697))\n- **checkbox:** 外层包裹 DOM 从 span 改为 label ([#697](https://github.com/arco-design/arco-design-vue/pull/697))\n- **select:** 组件使用 context 重构，允许对 Option 组件的封装使用 ([#688](https://github.com/arco-design/arco-design-vue/pull/688))\n- **select:** 增加 `valueKey` 属性，选项 value 支持 object 形式 ([#688](https://github.com/arco-design/arco-design-vue/pull/688))\n- **select:** <option> 组件的类名由 arco-dropdown-option 改为 arco-select-option，并使用 flex 垂直居中布局 ([#688](https://github.com/arco-design/arco-design-vue/pull/688))\n- **dropdown:** <doption> 组件修改使用 flex 垂直居中布局 ([#688](https://github.com/arco-design/arco-design-vue/pull/688))\n\n### 💎 功能优化\n\n- **table:** 在数据为空时，不展示分页组件 ([#684](https://github.com/arco-design/arco-design-vue/pull/684))\n\n### 🆕 新增功能\n\n- **menu:** 支持响应式收缩 ([#700](https://github.com/arco-design/arco-design-vue/pull/700))\n- **grid:** 支持响应式配置 ([#693](https://github.com/arco-design/arco-design-vue/pull/693))\n- 增加 ssr 支持（beta） ([#675](https://github.com/arco-design/arco-design-vue/pull/675))\n\n### 🐛 问题修复\n\n- **cascader:** 修复严格模式下禁用项仍可通过单选选择器选择的问题 ([#701](https://github.com/arco-design/arco-design-vue/pull/701))\n- **cascader:** 修复严格模式下搜索结果没有包含路径选项的问题 ([#701](https://github.com/arco-design/arco-design-vue/pull/701))\n\n\n## 2.17.0\n\n`2022-02-11`\n\n### 💎 功能优化\n\n- **input:** 增加 input 元素部分原始属性的透传 ([#664](https://github.com/arco-design/arco-design-vue/pull/664))\n- **trigger:** 优化自动调整位置后箭头的位置 ([#655](https://github.com/arco-design/arco-design-vue/pull/655))\n\n### 🆕 新增功能\n\n- **image:** 新增 actions 插槽用于自定义预览的操作项 ([#679](https://github.com/arco-design/arco-design-vue/pull/679))\n- **modal:** 增加 `title-align` 属性 ([#673](https://github.com/arco-design/arco-design-vue/pull/673))\n\n### 🐛 问题修复\n\n- **image:** 修复旋转方向错误的问题 ([#678](https://github.com/arco-design/arco-design-vue/pull/678))\n- **image:** 修复操作项的 `Tooltip` 被遮盖的问题 ([#677](https://github.com/arco-design/arco-design-vue/pull/677))\n- **tooltip:** 修复按需加载时丢失 trigger 样式的问题 ([#674](https://github.com/arco-design/arco-design-vue/pull/674))\n- **transfer:** 修复搜索功能应该检查选项的问题 ([#659](https://github.com/arco-design/arco-design-vue/pull/659))\n\n### 💅 样式更新\n\n- 修复部分图标默认颜色不统一问题 ([#676](https://github.com/arco-design/arco-design-vue/pull/676))\n- **switch:** 修复开关动画偶现抖动问题 ([#656](https://github.com/arco-design/arco-design-vue/pull/656))\n\n\n## 2.16.2\n\n`2022-01-24`\n\n### 🐛 问题修复\n\n- **date-picker:** `headerValue` 在 `vue 3.2.28` 中报错 ([#643](https://github.com/arco-design/arco-design-vue/pull/643))\n- **table:** 修复阻止冒泡导致懒加载失效的问题 ([#641](https://github.com/arco-design/arco-design-vue/pull/641))\n- **table:** 修复在展开行展开时，删除后显示空行的问题\n\n### 💅 样式更新\n\n- 自定义 icon 组件增加 fill 属性，解决自定义颜色问题 ([#642](https://github.com/arco-design/arco-design-vue/pull/642))\n- **input:** 修复 `input-group` 中使用 input 组件圆角问题 ([#640](https://github.com/arco-design/arco-design-vue/pull/640))\n\n\n## 2.16.1\n\n`2022-01-21`\n\n### 🐛 问题修复\n\n- **dropdown:** `<dropdown-button>` 组件补全 dropdown 相关属性 ([#637](https://github.com/arco-design/arco-design-vue/pull/637))\n\n\n## 2.16.0\n\n`2022-01-21`\n\n### 💎 功能优化\n\n- **table:** 内部按钮不再触发 `row-click` 事件 ([#630](https://github.com/arco-design/arco-design-vue/pull/630))\n\n### 🆕 新增功能\n\n- **select:** 增加自定义图标插槽 ([#634](https://github.com/arco-design/arco-design-vue/pull/634))\n- **typography:** 新增属性 `copy-delay` 用于自定义复制成功状态消失的延迟时间 ([#632](https://github.com/arco-design/arco-design-vue/pull/632))\n- **date-picker:** 增加属性 `value-format` 用于格式化返回值 ([#631](https://github.com/arco-design/arco-design-vue/pull/631))\n- **modal:** 增加 `before-open` 和 `before-close` 事件 ([#628](https://github.com/arco-design/arco-design-vue/pull/628))\n- **input:** `<input-search>` 组件增加自定义搜素按钮内容的功能 ([#625](https://github.com/arco-design/arco-design-vue/pull/625))\n- **form:** 增加表单和相应输入组件的反馈图标功能 ([#622](https://github.com/arco-design/arco-design-vue/pull/622))\n- **table:** 增加拖拽排序的支持（实验性） ([#619](https://github.com/arco-design/arco-design-vue/pull/619))\n- **table:** 增加调整列宽的支持（实验性） ([#619](https://github.com/arco-design/arco-design-vue/pull/619))\n- **table:** 增加 `tbody`、`tr`、`td` 插槽 ([#619](https://github.com/arco-design/arco-design-vue/pull/619))\n- **dropdown:** 使用 context 重构组件，支持嵌套使用 ([#608](https://github.com/arco-design/arco-design-vue/pull/608))\n- **dropdown:** value 增加对 object 的支持 ([#608](https://github.com/arco-design/arco-design-vue/pull/608))\n- **dropdown:** 新增 `dropdown-button` 组件 ([#608](https://github.com/arco-design/arco-design-vue/pull/608))\n- **dropdown:** 下拉菜单打开时，为触发元素增加标识类名 ([#608](https://github.com/arco-design/arco-design-vue/pull/608))\n- **split:** 属性 `min` `max` 支持设置 px ([#607](https://github.com/arco-design/arco-design-vue/pull/607))\n\n### 🐛 问题修复\n\n- **message:** 修复使用 loading 类型时类型警告的问题 ([#635](https://github.com/arco-design/arco-design-vue/pull/635))\n- **modal:** 修复样式文件缺少 `<button>` 组件样式引用的问题 ([#635](https://github.com/arco-design/arco-design-vue/pull/635))\n- **date-picker:** 点击清除按钮的时候不要展开弹出层 ([#633](https://github.com/arco-design/arco-design-vue/pull/633))\n- **cascader:** 修复在 `check-strictly` 模式下，搜索中不能选择的问题 ([#627](https://github.com/arco-design/arco-design-vue/pull/627))\n- **date-picker:** 返回值在不显示时间选择面板的时候不应该拼接时间 ([#612](https://github.com/arco-design/arco-design-vue/pull/612))\n- **typography:** 修复 JSX 使用中存在警告的问题 ([#591](https://github.com/arco-design/arco-design-vue/pull/591))\n- **icon:** 修复 2.15.0 版本缺失的 icon-relation 图标\n\n### 💅 样式更新\n\n- **button:** 修复链接模式文字未居中的问题 ([#636](https://github.com/arco-design/arco-design-vue/pull/636))\n- **input:** 修复 `<input-group>` 组件包裹 `<select>` 组件的样式问题 ([#588](https://github.com/arco-design/arco-design-vue/pull/588))\n\n\n## 2.15.1\n\n`2022-01-15`\n\n### 🐛 问题修复\n\n- **grid:** 修复组件名注册错误问题 ([#581](https://github.com/arco-design/arco-design-vue/pull/581))\n\n\n## 2.15.0\n\n`2022-01-14`\n\n### 💎 功能优化\n\n- 优化组件内置的选择框不会受到外部选择框组的控制 ([#569](https://github.com/arco-design/arco-design-vue/pull/569))\n- **select:** 优化加载中状态显示 ([#557](https://github.com/arco-design/arco-design-vue/pull/557))\n\n### 🆕 新增功能\n\n- **input-tag:** 增加 `uniqueValue` 属性，支持输入时验证值不重复 ([#578](https://github.com/arco-design/arco-design-vue/pull/578))\n- **modal:** 增加 `escToClose` 属性并默认开启 ([#577](https://github.com/arco-design/arco-design-vue/pull/577))\n- **drawer:** 增加 `escToClose` 属性并默认开启 ([#577](https://github.com/arco-design/arco-design-vue/pull/577))\n- **grid:** 新增基于 grid 的布局组件 `Grid` `Grid.Item` ([#576](https://github.com/arco-design/arco-design-vue/pull/576))\n- **table:** `sortable.sorter` 增加 boolean 类型，支持服务器端排序 ([#575](https://github.com/arco-design/arco-design-vue/pull/575))\n- 增加 `icon` 组件，并提供对 iconfont.cn 的支持 ([#574](https://github.com/arco-design/arco-design-vue/pull/574))\n- **cascader:** 增加 loading 属性 ([#558](https://github.com/arco-design/arco-design-vue/pull/558))\n\n### 🐛 问题修复\n\n- **date-picker:** 修复事件参数缺失的问题 ([#579](https://github.com/arco-design/arco-design-vue/pull/579))\n\n### 💅 样式更新\n\n- **tag:** 修复 checkable 状态样式错误的问题 ([#570](https://github.com/arco-design/arco-design-vue/pull/570))\n- **button:** 修复按钮组中 iconOnly 按钮的对齐问题 ([#567](https://github.com/arco-design/arco-design-vue/pull/567))\n- **input:** 修复暗黑模式下背景颜色错误的问题 ([#560](https://github.com/arco-design/arco-design-vue/pull/560))\n\n\n## 2.14.3\n\n`2022-01-12`\n\n### 🐛 问题修复\n\n- **input:** 修复 input-search 在 button 模式属性失效的问题 ([#552](https://github.com/arco-design/arco-design-vue/pull/552))\n- **input-number:** 修复输入时光标位置改变的问题 ([#552](https://github.com/arco-design/arco-design-vue/pull/552))\n- **select:** 调用虚拟列表的 `scrollTo` 函数时缺失了参数 ([#543](https://github.com/arco-design/arco-design-vue/pull/543))\n\n\n## 2.14.2\n\n`2022-01-10`\n\n### 🐛 问题修复\n\n- **steps:** 修复 dot 模式下可以开启 small 的问题 ([#536](https://github.com/arco-design/arco-design-vue/pull/536))\n- **form:** label-col 改用 flex 布局，解决 mini 尺寸下高度错误的问题 ([#536](https://github.com/arco-design/arco-design-vue/pull/536))\n- **table:** 修复 table 内容超出容器，导致某些情况下边框不显示的问题 ([#536](https://github.com/arco-design/arco-design-vue/pull/536))\n- **select:** 修复按需加载没有导入样式的问题 ([#536](https://github.com/arco-design/arco-design-vue/pull/536))\n- **input:** 修复在 Safari 浏览器下 disabled 状态字体颜色错误的问题 ([#536](https://github.com/arco-design/arco-design-vue/pull/536))\n- **textarea:** 修复在 Firefox 浏览器下行高设置失效的问题 ([#536](https://github.com/arco-design/arco-design-vue/pull/536))\n- **statistic:** 修复动态赋值问题 ([#534](https://github.com/arco-design/arco-design-vue/pull/534))\n\n### 💅 样式更新\n\n- **button:** 修复 onlyIcon 模式图标未对齐问题 ([#538](https://github.com/arco-design/arco-design-vue/pull/538))\n\n\n## 2.14.1\n\n`2022-01-08`\n\n### 🐛 问题修复\n\n- **form:** 修复form默认大小样式问题 ([#526](https://github.com/arco-design/arco-design-vue/pull/526))\n- **config-provider:** 修复按需加载样式问题 ([#526](https://github.com/arco-design/arco-design-vue/pull/526))\n\n\n## 2.14.0\n\n`2022-01-07`\n\n### 🆕 新增功能\n\n- **table:** 增加 hideExpandButtonOnEmpty 属性 ([#520](https://github.com/arco-design/arco-design-vue/pull/520))\n- **upload:** 增加 imagePreview 属性，可以使用内置图片预览功能 ([#517](https://github.com/arco-design/arco-design-vue/pull/517))\n- **upload:** 当 `listType` 为图片类时，默认设置 accept 为 `image/*` ([#517](https://github.com/arco-design/arco-design-vue/pull/517))\n- **upload:** 增加 `showOnExceedLimit` 属性 ([#517](https://github.com/arco-design/arco-design-vue/pull/517))\n- **drawer:** 当没有设置 title 和 closable 时，隐藏标题栏 ([#515](https://github.com/arco-design/arco-design-vue/pull/515))\n- **statistic:** value 值支持响应式修改 ([#514](https://github.com/arco-design/arco-design-vue/pull/514))\n- **config-provider:** 增加 `size` 属性 ([#513](https://github.com/arco-design/arco-design-vue/pull/513))\n\n### 🐛 问题修复\n\n- **image:** `Image.PreviewGroup` 应该优先收集 `previewProps.src` ([#522](https://github.com/arco-design/arco-design-vue/pull/522))\n- **table:** 修复 x 轴 resize 问题 ([#519](https://github.com/arco-design/arco-design-vue/pull/519))\n- **table:** 修复存在固定列时，展开行宽度设置错误的问题 ([#519](https://github.com/arco-design/arco-design-vue/pull/519))\n- **table:** 修复存在子树时，复选框全选设置错误的问题 ([#519](https://github.com/arco-design/arco-design-vue/pull/519))\n- **trigger:** 修复某些情况下弹出框箭头位置错误的问题 ([#518](https://github.com/arco-design/arco-design-vue/pull/518))\n- **input:** 修复 change 事件触发问题 ([#516](https://github.com/arco-design/arco-design-vue/pull/516))\n- **input:** 修复当存在前后置标签时，样式设置位置错误的问题 ([#516](https://github.com/arco-design/arco-design-vue/pull/516))\n\n### 💅 样式更新\n\n- **dropdown:** 修复选项后缀样式问题 ([#523](https://github.com/arco-design/arco-design-vue/pull/523))\n\n\n## 2.13.0\n\n`2021-12-31`\n\n### ⚠️ 重点注意\n\n- **form:** `form-item` 组件增加一个新的 `content-wrapper` div 元素包裹原先 `content` div 元素，以来支持新的布局方式 ([#488](https://github.com/arco-design/arco-design-vue/pull/488))\n\n### 🆕 新增功能\n\n- **form:** 增加 `autoLabelWidth` 属性，支持标签宽度自适应 ([#486](https://github.com/arco-design/arco-design-vue/pull/486))\n- **form:** 增加 `labelColFlex` 属性，支持标签宽度设置 ([#486](https://github.com/arco-design/arco-design-vue/pull/486))\n- **form:** 增加 `mergeProps` 属性，支持自定义属性和事件覆写 ([#486](https://github.com/arco-design/arco-design-vue/pull/486))\n- **table:** 增加 `loadMore` 属性，支持子树懒加载 ([#485](https://github.com/arco-design/arco-design-vue/pull/485))\n- **table:** 增加 `filterIconAlignLeft` 属性 ([#485](https://github.com/arco-design/arco-design-vue/pull/485))\n- **table:** 增加 `change` 事件，可获取处理后数据 ([#485](https://github.com/arco-design/arco-design-vue/pull/485))\n- **upload:** 增加 `show-link` 属性 ([#483](https://github.com/arco-design/arco-design-vue/pull/483))\n- **auto-complete:** 增加 input 中的插槽和 option 插槽支持 ([#482](https://github.com/arco-design/arco-design-vue/pull/482))\n- **mention:** 增加 input 中的插槽和 option 插槽支持 ([#482](https://github.com/arco-design/arco-design-vue/pull/482))\n- **mention:** 文本域类型下的下拉菜单跟随提示文字显示 ([#482](https://github.com/arco-design/arco-design-vue/pull/482))\n- **cascader:** 增加 `load-more` 属性，支持数据懒加载 ([#476](https://github.com/arco-design/arco-design-vue/pull/476))\n- **grid:** `Row` 新增属性 `wrap` ([#471](https://github.com/arco-design/arco-design-vue/pull/471))\n- **descriptions:** `value` 和 `label` 插槽增加 index、data 参数 ([#470](https://github.com/arco-design/arco-design-vue/pull/470))\n\n### 🐛 问题修复\n\n- **pagination:** 修复跳转输入框失焦时没有清除值的问题 ([#487](https://github.com/arco-design/arco-design-vue/pull/487))\n- **input-tag:** 修复中文输入法问题 ([#481](https://github.com/arco-design/arco-design-vue/pull/481))\n- **select:** 修复搜索时中文输入法问题 ([#481](https://github.com/arco-design/arco-design-vue/pull/481))\n- **select:** 修复在 `drawer` 中 placeholder 显示不全的问题 ([#481](https://github.com/arco-design/arco-design-vue/pull/481))\n- **form:** 修复表单项 help 内容显示错误的问题 ([#480](https://github.com/arco-design/arco-design-vue/pull/480))\n- **table:** 修复 `sortOrder ` 置空失效的问题 ([#478](https://github.com/arco-design/arco-design-vue/pull/478))\n- **table:** 修复 `expand-icon` 插槽在子树中不生效的问题 ([#478](https://github.com/arco-design/arco-design-vue/pull/478))\n- **table:** 修复固定列在表格尺寸动态变化时阴影不显示的问题 ([#478](https://github.com/arco-design/arco-design-vue/pull/478))\n- **date-picker:** 修复 `readonly` 无效的问题 ([#472](https://github.com/arco-design/arco-design-vue/pull/472))\n\n### 💅 样式更新\n\n- **steps:** 修复下一步错误连线颜色错误问题 ([#477](https://github.com/arco-design/arco-design-vue/pull/477))\n\n\n## 2.12.2\n\n`2021-12-27`\n\n### 🐛 问题修复\n\n- **modal:** 修复 modalStyle 失效的问题 ([#459](https://github.com/arco-design/arco-design-vue/pull/459))\n- **modal:** 修复 flex 布局导致垂直居中且超出高度显示不全的问题 ([#459](https://github.com/arco-design/arco-design-vue/pull/459))\n\n\n## 2.12.1\n\n`2021-12-24`\n\n### 🐛 问题修复\n\n- **upload:** 修复照片墙模式错误的问题 ([#457](https://github.com/arco-design/arco-design-vue/pull/457))\n\n\n## 2.12.0\n\n`2021-12-24`\n\n### ⚠️ 重点注意\n\n- **modal:** 修改 wrapper 层展示 modal 的方式，并添加 `width` 和 `top` 属性 ([#454](https://github.com/arco-design/arco-design-vue/pull/454))\n- **textarea:** max-length 的计算不再排除回车情况，同 React 版本保持一致 ([#452](https://github.com/arco-design/arco-design-vue/pull/452))\n- **input:** 修改 change 事件仅在值发生改变时触发 ([#452](https://github.com/arco-design/arco-design-vue/pull/452))\n- **input-number:** 修改 change 事件仅在失焦和按下回车时触发，解决受控不能输入的问题 ([#452](https://github.com/arco-design/arco-design-vue/pull/452))\n\n### 💎 功能优化\n\n- **badge:** count 为 0 时不再渲染徽标 ([#445](https://github.com/arco-design/arco-design-vue/pull/445))\n\n### 🆕 新增功能\n\n- 图标类组件增加 size 属性 ([#455](https://github.com/arco-design/arco-design-vue/pull/455))\n- **input:** `max-length` 增加 `errorOnly` 属性，增加 `word-slice` 属性 ([#451](https://github.com/arco-design/arco-design-vue/pull/451))\n- **textarea:** `max-length` 增加 `errorOnly` 属性，增加 `word-slice` 属性 ([#451](https://github.com/arco-design/arco-design-vue/pull/451))\n- **input-number:** 增加对 input 插槽的支持 ([#451](https://github.com/arco-design/arco-design-vue/pull/451))\n- **link:** 增加 click 事件 ([#450](https://github.com/arco-design/arco-design-vue/pull/450))\n- **drawer:** 增加 unmount-on-close 属性 ([#449](https://github.com/arco-design/arco-design-vue/pull/449))\n- **switch:** 增加 `checked-value` 和 `unchecked-value` 属性 ([#444](https://github.com/arco-design/arco-design-vue/pull/444))\n- **switch:** 增加 `checked-color` 和 `unchecked-color` 属性 ([#444](https://github.com/arco-design/arco-design-vue/pull/444))\n\n### 🐛 问题修复\n\n- **modal:** 修复按钮内容不能动态修改的问题 ([#453](https://github.com/arco-design/arco-design-vue/pull/453))\n- **affix:** 修复与 anchor 组件组合使用，显示 warning 的问题 ([#448](https://github.com/arco-design/arco-design-vue/pull/448))\n- **progress:** 修复显示数值精度问题 ([#447](https://github.com/arco-design/arco-design-vue/pull/447))\n- **upload:** 修复按钮模式下 tip 没有显示的问题 ([#446](https://github.com/arco-design/arco-design-vue/pull/446))\n- **upload:** 修复 `upload` 组件的禁用样式不生效的 bug ([#430](https://github.com/arco-design/arco-design-vue/pull/430))\n\n### 💅 样式更新\n\n- **table:** 修复 table 滚动模式下最后一行多余边框的问题 ([#456](https://github.com/arco-design/arco-design-vue/pull/456))\n\n\n## 2.11.1\n\n`2021-12-20`\n\n### 🐛 问题修复\n\n- **input-tag:** 修复 resize 导致的中文输入失效的问题 ([#428](https://github.com/arco-design/arco-design-vue/pull/428))\n- **dropdown:** 修复使用 JSX 时，Group 不可用的问题 ([#427](https://github.com/arco-design/arco-design-vue/pull/427))\n- **select:** 修复使用 JSX 时，Group 不可用的问题 ([#427](https://github.com/arco-design/arco-design-vue/pull/427))\n\n\n## 2.11.0\n\n`2021-12-17`\n\n### 🆕 新增功能\n\n- **upload:** 增加 `download` 属性 ([#418](https://github.com/arco-design/arco-design-vue/pull/418))\n- **space:** 新增属性 `fill` ([#415](https://github.com/arco-design/arco-design-vue/pull/415))\n- **menu:** `sub-menu` 和 `menu-item` 新增 icon 的 slot ([#412](https://github.com/arco-design/arco-design-vue/pull/412))\n- **table:** `columns` 新增 cellStyle 属性 ([#411](https://github.com/arco-design/arco-design-vue/pull/411))\n- **upload:** 新增 `show-remove-buttoon` 、`show-retry-button`、`show-cancel-button` 属性 ([#396](https://github.com/arco-design/arco-design-vue/pull/396))\n- **upload:** 新增 `imageLoading` 属性 ([#396](https://github.com/arco-design/arco-design-vue/pull/396))\n- **drawer:** 新增属性 `footer` ([#394](https://github.com/arco-design/arco-design-vue/pull/394))\n\n### 🐛 问题修复\n\n- **upload:** 修复上传中的图标位置不对的问题 ([#417](https://github.com/arco-design/arco-design-vue/pull/417))\n- **upload:** 修复拖拽上传文件夹时，`beforeUpload` 的第二个参数获取到的不是全部文件的问题 ([#417](https://github.com/arco-design/arco-design-vue/pull/417))\n- **upload:** 修复拖拽上传时，鼠标进入内部文字，拖拽样式闪动的问题 ([#417](https://github.com/arco-design/arco-design-vue/pull/417))\n- **table:** 修复固定列模式下，表格尺寸变化导致表头和主体宽度不一致问题 ([#410](https://github.com/arco-design/arco-design-vue/pull/410))\n- **tabs:** 修复标签栏宽度变化时，没有重新计算滚动的问题 ([#409](https://github.com/arco-design/arco-design-vue/pull/409))\n- **tabs:** 修复标签选项宽度变化时，指示器宽度不能跟随更新的问题 ([#409](https://github.com/arco-design/arco-design-vue/pull/409))\n- **input-tag:** 修复某些情况下内部 input 大小计算错误的问题 ([#408](https://github.com/arco-design/arco-design-vue/pull/408))\n- **input-number:** 修复 `model-value` 为 0 时展示错误的问题 ([#407](https://github.com/arco-design/arco-design-vue/pull/407))\n- **trigger:** 修复容器尺寸变化导致弹出层位置错误的问题 ([#406](https://github.com/arco-design/arco-design-vue/pull/406))\n- **trigger:** 修复嵌套使用中 hover 方式导致弹出层关闭的问题 ([#406](https://github.com/arco-design/arco-design-vue/pull/406))\n- **tree-select:** 修复设置 key 字段名的时候搜索失效的问题 ([#405](https://github.com/arco-design/arco-design-vue/pull/405))\n- **anchor:** 修复加载后不会定位到 hash 位置的问题 ([#400](https://github.com/arco-design/arco-design-vue/pull/400))\n- **cascader:** 修复层级 totalLevel 计算错误的问题 ([#399](https://github.com/arco-design/arco-design-vue/pull/399))\n- **modal:** 修复 `alignCenter` 属性不生效的问题 ([#384](https://github.com/arco-design/arco-design-vue/pull/384))\n- **modal:** 调整组件的 `alignCenter` 属性默认为 `true` ([#384](https://github.com/arco-design/arco-design-vue/pull/384))\n\n### 💅 样式更新\n\n- **menu:** 修复侧边栏可折叠的时候高度溢出的问题 ([#416](https://github.com/arco-design/arco-design-vue/pull/416))\n\n\n## 2.10.1\n\n`2021-12-14`\n\n### 🐛 问题修复\n\n- **cascader:** 修复多选模式下存在空子菜单时计数错误的问题 ([#388](https://github.com/arco-design/arco-design-vue/pull/388))\n- **dropdown:** 修复 <doption> 组件 disabled 失效和属性继承的问题 ([#385](https://github.com/arco-design/arco-design-vue/pull/385))\n- **select:** 修复 options 属性中 disabled 失效的问题 ([#385](https://github.com/arco-design/arco-design-vue/pull/385))\n- **select:** 修复 bordered 属性未生效的问题，添加示例 ([#385](https://github.com/arco-design/arco-design-vue/pull/385))\n- **trigger:** 修复弹出层尺寸变化不会触发更新的问题 ([#382](https://github.com/arco-design/arco-design-vue/pull/382))\n- **trigger:** 修复 `align-point` 模式下位置和自适应不生效的问题 ([#382](https://github.com/arco-design/arco-design-vue/pull/382))\n- **card:** 修复 slots 内容存在不更新的问题 ([#380](https://github.com/arco-design/arco-design-vue/pull/380))\n\n### 💅 样式更新\n\n- **popconfirm:** 修正组件样式问题，并调整按钮默认大小为 `mini`，同React保持一致 ([#390](https://github.com/arco-design/arco-design-vue/pull/390))\n- **input-tag:** 修复组件高度问题 ([#383](https://github.com/arco-design/arco-design-vue/pull/383))\n- **input-tag:** 修复组件关闭按钮宽度问题 ([#383](https://github.com/arco-design/arco-design-vue/pull/383))\n\n### 🆎 类型修正\n\n- **modal:** `ModalConfig ` 增加 `simple` 属性注解 ([#389](https://github.com/arco-design/arco-design-vue/pull/389))\n\n\n## 2.10.0\n\n`2021-12-10`\n\n### 💎 功能优化\n\n- **select:** 输入框可编辑时，点击不会关闭下拉菜单 ([#348](https://github.com/arco-design/arco-design-vue/pull/348))\n- **cascader:** 输入框可编辑时，点击不会关闭下拉菜单 ([#348](https://github.com/arco-design/arco-design-vue/pull/348))\n\n### 🆕 新增功能\n\n- **tabs:** 增加 headerPadding 属性并默认开启 ([#362](https://github.com/arco-design/arco-design-vue/pull/362))\n- **form:** `form-item` 增加布局和类名相关属性 ([#361](https://github.com/arco-design/arco-design-vue/pull/361))\n- **table:** 增加 span-method 属性 ([#360](https://github.com/arco-design/arco-design-vue/pull/360))\n- **collapse:** key增加对number的支持 ([#358](https://github.com/arco-design/arco-design-vue/pull/358))\n- **dropdown:** 增加 footer 插槽 ([#350](https://github.com/arco-design/arco-design-vue/pull/350))\n- **cascader:** 增加 checkStrictly 属性 ([#349](https://github.com/arco-design/arco-design-vue/pull/349))\n- **select:** 增加 fallback-option 和 show-extra-options 属性 ([#347](https://github.com/arco-design/arco-design-vue/pull/347))\n- **grid:** 组件 `a-col` 新增属性 `flex` ([#340](https://github.com/arco-design/arco-design-vue/pull/340))\n\n### 🐛 问题修复\n\n- **input-number:** 修复可重复输入 `-` 和 `.` 的问题 ([#359](https://github.com/arco-design/arco-design-vue/pull/359))\n- **statistic:** 修复 precision 为 0 时没有生效的问题 ([#357](https://github.com/arco-design/arco-design-vue/pull/357))\n- **tabs:** 修复可编辑模式下选项卡 closable 失效的问题 ([#356](https://github.com/arco-design/arco-design-vue/pull/356))\n- **menu:** 修复菜单宽度没有撑满父元素的问题 ([#346](https://github.com/arco-design/arco-design-vue/pull/346))\n- **carousel:** out子项内未隐藏 ([#343](https://github.com/arco-design/arco-design-vue/pull/343))\n- **select:** 修复组件在 JSX 使用中出现警告、插槽不能使用变量的问题 ([#347](https://github.com/arco-design/arco-design-vue/pull/347))\n- **select:** 修复多选输入框首次点击图标不能弹出下拉菜单的问题 ([#347](https://github.com/arco-design/arco-design-vue/pull/347))\n\n### 💅 样式更新\n\n- **textarea:** 修正禁止模式的样式问题 ([#355](https://github.com/arco-design/arco-design-vue/pull/355))\n- **message:** 使用 flex 布局方式展示信息 ([#354](https://github.com/arco-design/arco-design-vue/pull/354))\n- **modal:** 修复 modal 信息展示模式错误的问题 ([#351](https://github.com/arco-design/arco-design-vue/pull/351))\n- **modal:** 简单模式下不展示标题栏关闭按钮 ([#351](https://github.com/arco-design/arco-design-vue/pull/351))\n- **input-tag:** 优化标签动画和关闭按钮样式 ([#345](https://github.com/arco-design/arco-design-vue/pull/345))\n\n\n## 2.9.0\n\n`2021-12-03`\n\n### 🆕 新增功能\n\n- **drawer:** `Drawer` 支持 `okButtonProps` 和  `cancelButtonProps` 属性 ([#325](https://github.com/arco-design/arco-design-vue/pull/325))\n- **pagination:** 修改和增加插槽，支持模板自定义 ([#324](https://github.com/arco-design/arco-design-vue/pull/324))\n- **tree:** 新增属性 `default-expand-selected` `default-expand-checked` `auto-expand-parent` ([#322](https://github.com/arco-design/arco-design-vue/pull/322))\n- **steps:** 增加 title 属性 ([#316](https://github.com/arco-design/arco-design-vue/pull/316))\n\n### 🐛 问题修复\n\n- **table:** 修复树形展开按钮触发表单提交的问题 ([#321](https://github.com/arco-design/arco-design-vue/pull/321))\n- **spin:** 修复容器模式下切换状态导致子组件重新加载的问题 ([#320](https://github.com/arco-design/arco-design-vue/pull/320))\n- **space:** 修复渲染 v-if 节点的问题 ([#318](https://github.com/arco-design/arco-design-vue/pull/318))\n\n\n## 2.8.0\n\n`2021-12-01`\n\n### ⚠️ 重点注意\n\n- **spin:** 容器模式的非加载情况下，不会再额外增加一层 `<div>`\n\n### 🆕 新增功能\n\n- **textarea:** 增加最小行和最大行的支持 ([#309](https://github.com/arco-design/arco-design-vue/pull/309))\n- **select:** 增加 `tagProps` 的支持 ([#307](https://github.com/arco-design/arco-design-vue/pull/307))\n- **cascader:** 增加 `tagProps` 的支持 ([#307](https://github.com/arco-design/arco-design-vue/pull/307))\n- **input-tag:** 增加 `tagProps` 的支持 ([#307](https://github.com/arco-design/arco-design-vue/pull/307))\n- **menu:** 新增属性  `auto-open-selected` ([#306](https://github.com/arco-design/arco-design-vue/pull/306))\n- **result:** 增加 `extra` 插槽和 `default` 插槽 ([#302](https://github.com/arco-design/arco-design-vue/pull/302))\n- **list:** 增加空数据的展示 ([#296](https://github.com/arco-design/arco-design-vue/pull/296))\n- 增加 body 上的 font-family ([#287](https://github.com/arco-design/arco-design-vue/pull/287))\n\n### 🐛 问题修复\n\n- **form:** 修复 `setFields` 方法设定空值失效的问题 ([#311](https://github.com/arco-design/arco-design-vue/pull/311))\n- **auto-complete:** 修复 disabled 不可用的问题 ([#310](https://github.com/arco-design/arco-design-vue/pull/310))\n- **pagination:** 修复 `disabled` 属性设置为 true 时，输入框和条数选择器未禁用的问题 ([#297](https://github.com/arco-design/arco-design-vue/pull/297))\n- **drawer:** 修复设置 `popup-container` 属性时，抽屉仍然是 `fixed` 布局的问题 ([#297](https://github.com/arco-design/arco-design-vue/pull/297))\n- **input-number:** 修复 button 模式下按钮没有添加 size 的问题 ([#293](https://github.com/arco-design/arco-design-vue/pull/293))\n- **tree:** 动态加载节点后更新勾选状态 ([#206](https://github.com/arco-design/arco-design-vue/pull/206))\n\n### 💅 样式更新\n\n- **radio:** 去除 button 模式下选中加粗的效果 ([#308](https://github.com/arco-design/arco-design-vue/pull/308))\n- **cascader:** 去除选项选中加粗的效果 ([#308](https://github.com/arco-design/arco-design-vue/pull/308))\n\n\n## 2.7.0\n\n`2021-11-26`\n\n### 🆕 新增功能\n\n- **progress:** 增加 `track-color` 属性 ([#277](https://github.com/arco-design/arco-design-vue/pull/277))\n- **pagination:** 增加 `base-size` & `buffer-size` 属性 ([#275](https://github.com/arco-design/arco-design-vue/pull/275))\n- 增加对 web-types 和 vetur 的智能提示支持 ([#272](https://github.com/arco-design/arco-design-vue/pull/272))\n- **form:** 增加 `rules` 属性 ([#271](https://github.com/arco-design/arco-design-vue/pull/271))\n- **dropdown:** 增加 `disabled` 属性 ([#270](https://github.com/arco-design/arco-design-vue/pull/270))\n- **descriptions:** 增加 `align` 属性 ([#268](https://github.com/arco-design/arco-design-vue/pull/268))\n- **table:** 增加 `footer` 插槽 ([#266](https://github.com/arco-design/arco-design-vue/pull/266))\n- **table:** 常规模式下表格宽度大于容器时会开启滚动条 ([#266](https://github.com/arco-design/arco-design-vue/pull/266))\n- **avatar:** 支持 `maxStyle` 和 `maxPopoverTriggerProps` 属性。 ([#242](https://github.com/arco-design/arco-design-vue/pull/242))\n- **modal:** 增加 `on-before-ok` 和 `on-before-cancel` 属性事件 ([#229](https://github.com/arco-design/arco-design-vue/pull/229))\n- **drawer:** 增加 `on-before-ok` 和 `on-before-cancel` 属性事件 ([#229](https://github.com/arco-design/arco-design-vue/pull/229))\n- **popconfirm:** 增加 `on-before-ok` 和 `on-before-cancel` 属性事件 ([#229](https://github.com/arco-design/arco-design-vue/pull/229))\n- **link:** 增加通过 `icon` 属性/插槽设置图标 ([#226](https://github.com/arco-design/arco-design-vue/pull/226))\n- **mention:** 增加 `type`  属性 ([#205](https://github.com/arco-design/arco-design-vue/pull/205))\n\n### 🐛 问题修复\n\n- **input:** 修复数字键盘回车键没有触发 `press-enter` 的问题 ([#273](https://github.com/arco-design/arco-design-vue/pull/273))\n- **modal:** 修复初始触发 `open` 事件的问题 ([#267](https://github.com/arco-design/arco-design-vue/pull/267))\n- **drawer:** 修复初始触发 `open` 事件的问题 ([#267](https://github.com/arco-design/arco-design-vue/pull/267))\n- **menu:** `trigger-props` 不生效 ([#265](https://github.com/arco-design/arco-design-vue/pull/265))\n- **menu:** 横向的菜单项收起再展开的时候没有正常显示 ([#264](https://github.com/arco-design/arco-design-vue/pull/264))\n\n### 💅 样式更新\n\n- **steps:** 修复竖直步骤条连线颜色的问题 ([#276](https://github.com/arco-design/arco-design-vue/pull/276))\n- 修复新版浏览器中选择图标会出现外边框的问题 ([#274](https://github.com/arco-design/arco-design-vue/pull/274))\n- **descriptions:** 修改 value 区域样式，支持换行文本 ([#269](https://github.com/arco-design/arco-design-vue/pull/269))\n- **tree:** 让树节点的内容垂直居中 ([#260](https://github.com/arco-design/arco-design-vue/pull/260))\n\n\n## 2.6.1\n\n`2021-11-24`\n\n### 💎 功能优化\n\n- **table:** 数据为空时不展示滚动 ([#245](https://github.com/arco-design/arco-design-vue/pull/245))\n\n### 🐛 问题修复\n\n- **trigger:** 修复嵌套不同类型 `<trigger>` 时触发错误的问题 ([#244](https://github.com/arco-design/arco-design-vue/pull/244))\n- **page-header:** 修复没有子标题时仍然显示分割线的问题 ([#224](https://github.com/arco-design/arco-design-vue/pull/224))\n- **table:** 修复展开行按钮触发表单提交的问题 ([#210](https://github.com/arco-design/arco-design-vue/pull/210))\n- **steps:** 修复 `<step>` 组件中 `status` 属性不生效的问题 ([#209](https://github.com/arco-design/arco-design-vue/pull/209))\n- **form:** 修复表单附加内容样式没生效的问题 ([#208](https://github.com/arco-design/arco-design-vue/pull/208))\n\n### 🆎 类型修正\n\n- 修复在 `<form>` 中使用输入型组件在控制台出现类型警告的问题 ([#247](https://github.com/arco-design/arco-design-vue/pull/247))\n\n\n## 2.6.0\n\n`2021-11-19`\n\n### 🆕 新增功能\n\n- **input-tag:** 增加退格键的支持 ([#202](https://github.com/arco-design/arco-design-vue/pull/202))\n- **select:** 增加 `footer` 插槽 ([#201](https://github.com/arco-design/arco-design-vue/pull/201))\n- **textarea:** 增加 `word-length` 属性 ([#199](https://github.com/arco-design/arco-design-vue/pull/199))\n- **trigger:** 增加 `prevent-focus` 属性 ([#197](https://github.com/arco-design/arco-design-vue/pull/197))\n- **select:** 增加 `trigger-props` 属性 ([#197](https://github.com/arco-design/arco-design-vue/pull/197))\n- **cascader:** 增加 `trigger-props` 属性 ([#197](https://github.com/arco-design/arco-design-vue/pull/197))\n\n### 🐛 问题修复\n\n- **select:** 修复 `option` 插槽没有传出 `data` 参数的问题 ([#200](https://github.com/arco-design/arco-design-vue/pull/200))\n- **upload:** 修复图片名过长时溢出的问题 ([#198](https://github.com/arco-design/arco-design-vue/pull/198))\n- **upload:** 修复照片墙模式，超出长度不能换行的问题 ([#198](https://github.com/arco-design/arco-design-vue/pull/198))\n- 修复 input 型组件重复获取焦点的问题 ([#196](https://github.com/arco-design/arco-design-vue/pull/196))\n- **date-picker:** 修复在 form 里校验异常的问题 ([#195](https://github.com/arco-design/arco-design-vue/pull/195))\n\n### 💅 样式更新\n\n- **menu:** 弹出型子菜单适配暗色主题 ([#193](https://github.com/arco-design/arco-design-vue/pull/193))\n\n\n## 2.5.0\n\n`2021-11-18`\n\n### ⚠️ 重点注意\n\n- **select:** 将 2.4.0 添加的 `options.label` 的自定义渲染移动到 `options.render` 上 ([#183](https://github.com/arco-design/arco-design-vue/pull/183))\n- **cascader:** 将 2.4.0 添加的 `options.label` 的自定义渲染移动到 `options.render` 上 ([#183](https://github.com/arco-design/arco-design-vue/pull/183))\n\n### 🆕 新增功能\n\n- **select:** `<option>` 添加 label 属性支持 ([#183](https://github.com/arco-design/arco-design-vue/pull/183))\n\n### 🐛 问题修复\n\n- **tree-select:** 无法选中 key 为 0 的选项 ([#185](https://github.com/arco-design/arco-design-vue/pull/185))\n- 修复 input 型组件在弹出层不能获取焦点的问题 ([#184](https://github.com/arco-design/arco-design-vue/pull/184))\n- 修复弹出型组件 `z-index` 错误的问题 ([#182](https://github.com/arco-design/arco-design-vue/pull/182))\n\n\n## 2.4.0\n\n`2021-11-17`\n\n### 💎 功能优化\n\n- **modal:** 统一管理弹出层的 zIndex ([#167](https://github.com/arco-design/arco-design-vue/pull/167))\n\n### 🆕 新增功能\n\n- **cascader:** 增加 `options.value` 数字类型和 `options.label` 自定义渲染的支持 ([#176](https://github.com/arco-design/arco-design-vue/pull/176))\n- **upload:** 增加 `upload-button` 和 `upload-item` 插槽 ([#174](https://github.com/arco-design/arco-design-vue/pull/174))\n- **upload:** 增加 `success` 和 `error` 事件 ([#174](https://github.com/arco-design/arco-design-vue/pull/174))\n- **upload:** 增加 `on-click-button` 、`custom-icon`、`directory ` 属性 ([#174](https://github.com/arco-design/arco-design-vue/pull/174))\n- **drawer:** `width` 和 `height` 增加支持字符类型 ([#172](https://github.com/arco-design/arco-design-vue/pull/172))\n- **select:** 增加 `option` 插槽 ([#170](https://github.com/arco-design/arco-design-vue/pull/170))\n- **select:** `options.label` 支持自定义渲染 ([#170](https://github.com/arco-design/arco-design-vue/pull/170))\n- **tree:** `key` 支持 `number`  类型 ([#169](https://github.com/arco-design/arco-design-vue/pull/169))\n\n### 🐛 问题修复\n\n- **cascader:** 修复搜索输入框不能滚动的问题 ([#175](https://github.com/arco-design/arco-design-vue/pull/175))\n- **form:** 修复 `filed` 字段传入 null 导致报错的问题 ([#173](https://github.com/arco-design/arco-design-vue/pull/173))\n- **input-tag:** 修复中文输入法问题 ([#171](https://github.com/arco-design/arco-design-vue/pull/171))\n- **input-tag:** 修复 Enter 键触发 form 提交的问题 ([#171](https://github.com/arco-design/arco-design-vue/pull/171))\n- **trigger:** 修复 `<svg>` 元素定位错误的问题 ([#162](https://github.com/arco-design/arco-design-vue/pull/162))\n- **input-tag:** 修复disabled状态下标签仍可被关闭 ([#161](https://github.com/arco-design/arco-design-vue/pull/161))\n\n### 💅 样式更新\n\n- **image:** 将错误状态图标的最大尺寸设置为父元素的大小 ([#160](https://github.com/arco-design/arco-design-vue/pull/160))\n\n\n## 2.3.0\n\n`2021-11-12`\n\n### 🆕 新增功能\n\n- **form:** 增加 `setFields` 方法 ([#150](https://github.com/arco-design/arco-design-vue/pull/150))\n- **message:** 增加 `onClose` 回调方法 ([#149](https://github.com/arco-design/arco-design-vue/pull/149))\n- **message:** 增加 `loading` 方法 ([#149](https://github.com/arco-design/arco-design-vue/pull/149))\n- **notification:** 增加 `onClose` 回调方法 ([#149](https://github.com/arco-design/arco-design-vue/pull/149))\n- **alert:** 增加 `#action` 插槽 ([#148](https://github.com/arco-design/arco-design-vue/pull/148))\n\n### 🐛 问题修复\n\n- **table:** 修复 `<table-column>` 在分组表头错误的问题 ([#151](https://github.com/arco-design/arco-design-vue/pull/151))\n- **menu:** 修复嵌套自定义组件的时候父菜单没有高亮的问题 ([#147](https://github.com/arco-design/arco-design-vue/pull/147))\n- **alert:** 修复组件导出名字错误的问题 ([#142](https://github.com/arco-design/arco-design-vue/pull/142))\n- **textarea:** 修复 `disabled` 不生效的问题 ([#139](https://github.com/arco-design/arco-design-vue/pull/139))\n- **textarea:** 修复缺失 `style/index.js` 的问题 ([#139](https://github.com/arco-design/arco-design-vue/pull/139))\n- **breadcrumb:** 修复 `breadcrumb-item` 没有继承 Attribute 的问题 ([#137](https://github.com/arco-design/arco-design-vue/pull/137))\n- **tree:** 修复设置  `default-checked-keys` 无效的问题 ([#131](https://github.com/arco-design/arco-design-vue/pull/131))\n- 当虚拟列表 `data` 改变时重置 VNode 缓存 ([#129](https://github.com/arco-design/arco-design-vue/pull/129))\n\n\n## 2.2.0\n\n`2021-11-10`\n\n### 🆕 新增功能\n\n- **table:** 增加 `row-key` 属性 ([#128](https://github.com/arco-design/arco-design-vue/pull/128))\n- **table:** 增加 `expandable` 中的 `expandedRowRender ` 和 `icon` 属性 ([#128](https://github.com/arco-design/arco-design-vue/pull/128))\n- **table:** 增加 `expand-icon` 和 `expand-row` 插槽 ([#128](https://github.com/arco-design/arco-design-vue/pull/128))\n\n### 🐛 问题修复\n\n- **table:** 修复表头分组中表格操作项占位错误的问题 ([#127](https://github.com/arco-design/arco-design-vue/pull/127))\n- **trigger:** 修复 `disabled` 状态切换失效的问题 ([#126](https://github.com/arco-design/arco-design-vue/pull/126))\n- **upload:** 修复 `limit` 属性无效的问题 ([#123](https://github.com/arco-design/arco-design-vue/pull/123))\n- **typography:** 修复无法输入的问题 ([#121](https://github.com/arco-design/arco-design-vue/pull/121))\n\n\n## 2.1.1\n\n`2021-11-08`\n\n### 💎 功能优化\n\n- **menu:** 将弹出型 `menu` 的默认展开方式改为 hover ([#111](https://github.com/arco-design/arco-design-vue/pull/111))\n\n### 🐛 问题修复\n\n- **modal:** 修复 `title` 属性不生效的问题 ([#116](https://github.com/arco-design/arco-design-vue/pull/116))\n- **image:** 修复图片的高度限制无效的问题 ([#115](https://github.com/arco-design/arco-design-vue/pull/115))\n- **input-number:** 修复输入负号出错的问题 ([#114](https://github.com/arco-design/arco-design-vue/pull/114))\n- **textarea:** 修复 `autoSize` 模式下内部循环更新的问题 ([#113](https://github.com/arco-design/arco-design-vue/pull/113))\n- **popconfirm:** 修复 `ok/cancel` 按钮参数丢失的问题 ([#105](https://github.com/arco-design/arco-design-vue/pull/105))\n\n\n## 2.1.0\n\n`2021-11-05`\n\n### 💎 功能优化\n\n- **tree-select:** 选项的可点击范围默认占满一行 ([#90](https://github.com/arco-design/arco-design-vue/pull/90))\n- **tabs:** 优化标签栏滚动方法 ([#87](https://github.com/arco-design/arco-design-vue/pull/87))\n- **trigger:** 将外部关闭事件移到 `document` 上 ([#76](https://github.com/arco-design/arco-design-vue/pull/76))\n\n### 🆕 新增功能\n\n- **table:** 添加 `table-column` 中的 `#title` 插槽 ([#95](https://github.com/arco-design/arco-design-vue/pull/95))\n- **form:** 增加 `hideAsterisk ` 功能 ([#94](https://github.com/arco-design/arco-design-vue/pull/94))\n- **input:** 增加 `wordLength` 属性 ([#91](https://github.com/arco-design/arco-design-vue/pull/91))\n- **spin:** 增加 `size` 属性和 `#icon` & `#element` 插槽 ([#86](https://github.com/arco-design/arco-design-vue/pull/86))\n- **image:** 增加一个名为 `error-icon` 的 slot 用于支持定制错误状态的图标 ([#85](https://github.com/arco-design/arco-design-vue/pull/85))\n- 增加 `日文` 支持 ([#13](https://github.com/arco-design/arco-design-vue/pull/13))\n\n### 🐛 问题修复\n\n- **slider:** 修复点击右键没有释放拖拽事件的问题 ([#97](https://github.com/arco-design/arco-design-vue/pull/97))\n- **select:** 修复 `#empty` 插槽丢失的问题 ([#96](https://github.com/arco-design/arco-design-vue/pull/96))\n- **input-number:** 修复精度失效的问题 ([#93](https://github.com/arco-design/arco-design-vue/pull/93))\n- **input-tag:** 修复输入框宽度计算错误的问题 ([#89](https://github.com/arco-design/arco-design-vue/pull/89))\n- **input:** 移除 `keydown` 事件的阻止默认行为 ([#84](https://github.com/arco-design/arco-design-vue/pull/84))\n- **table:** 修复 `#column` 插槽不能支持Fragment的问题 ([#83](https://github.com/arco-design/arco-design-vue/pull/83))\n- **table:** 修复 `scroll.x` 单独使用不生效的问题 ([#83](https://github.com/arco-design/arco-design-vue/pull/83))\n- **textarea:** 修复自动高度调整不准的问题 ([#78](https://github.com/arco-design/arco-design-vue/pull/78))\n- **input:** 修复 `a-input-number` 组件 `model-value` 默认值为 0 时不生效的问题 ([#75](https://github.com/arco-design/arco-design-vue/pull/75))\n- **input:** 修复 `input-search` 和 `input-password` 不支持 `slot` 的问题 ([#63](https://github.com/arco-design/arco-design-vue/pull/63))\n- **input:** 修复 `input-password` 切换密码可见状态时光标位置丢失的问题 ([#63](https://github.com/arco-design/arco-design-vue/pull/63))\n\n### 💅 样式更新\n\n- **input:** 修改 `clear-btn` 样式，解决 `select-view` 可能会抖动的问题 ([#70](https://github.com/arco-design/arco-design-vue/pull/70))\n\n\n## 2.0.3\n\n`2021-10-29`\n\n### 🐛 问题修复\n\n- **select:** 修复清除按钮在多选模式下不显示的问题 ([#38](https://github.com/arco-design/arco-design-vue/pull/38))\n- **modal:** 修复主按钮类型错误的问题 ([#30](https://github.com/arco-design/arco-design-vue/pull/30))\n- **drawer:** 修复主按钮类型错误的问题 ([#30](https://github.com/arco-design/arco-design-vue/pull/30))\n- **table:** 修复 `scroll` 模式下，滚动条的显隐导致单元格错位 ([#29](https://github.com/arco-design/arco-design-vue/pull/29))\n- **collapse:** 修复 `accordion` 模式不能收起的问题\n\n## 2.0.2\n\n`2021-10-26`\n\n- 组件库默认字体调整\n\n## 2.0.1\n\n`2021-10-25`\n\n- 更新 `package.json` 信息\n\n## 2.0.0\n\n`2021-10-24`\n\n- 🏆 Arco Design Vue 2.0 正式版发布！\n"
  },
  {
    "path": "packages/web-vue/README.md",
    "content": "<div align=\"center\">\n  <a href=\"https://arco.design\" target=\"_blank\">\n    <img alt=\"Arco Design Logo\" width=\"200\" src=\"https://avatars.githubusercontent.com/u/64576149?s=200&v=4\"/>\n  </a>\n</div>\n<div align=\"center\">\n  <h1>Arco Design</h1>\n</div>\n\n<div align=\"center\">\n\nA comprehensive Vue UI components library based on the [Arco Design](https://arco.design/) system.\n\n[![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/arco-design/arco-design-vue/blob/main/LICENSE)\n\n</div>\n\n<div align=\"center\">\n\nEnglish | [简体中文](./README.zh-CN.md)\n\n</div>\n\n# Features\n\n## Comprehensive\n\nWith more than 60 crafted components that you can use out of the box.\n\n## Customizable theme\n\nExtensive theme tokens can be customized to build your own theme. Two ways of customization are supported:\n\n* [With less-loader](https://arco.design/vue/docs/theme)\n* [Design Lab](https://arco.design/themes) - Recommended!\n\n## TypeScript friendly\n\nAll components are written in TypeScript so it's type friendly.\n\n# Installation\n\nAvailable as an [npm package](https://www.npmjs.com/package/@arco-design/web-vue)\n\n```bash\n// with npm\nnpm install @arco-design/web-vue\n\n// with yarn\nyarn add @arco-design/web-vue\n```\n\n# Examples\n\n```typescript\nimport { createApp } from 'vue'\nimport ArcoVue from '@arco-design/web-vue';\nimport App from './App.vue';\nimport '@arco-design/web-vue/dist/arco.css';\n\nconst app = createApp(App);\napp.use(ArcoVue);\napp.mount('#app');\n```\n\n## Development\n\n1. Use `npm install` to install basic packages such as `lerna` and `yarn`\n\n2. Use `yarn install` to install the dependencies of each package in `workspaces` (If you encounter a `YN0018` error, you can use `YARN_CHECKSUM_BEHAVIOR=update yarn` to install)\n\n3. Use `npm run init` to initialize the project\n\n# Useful Links\n\n* [Documentation website](https://arco.design/)\n* [Dark mode](https://arco.design/vue/docs/dark)\n* [Theme customization](https://arco.design/vue/docs/theme)\n* [Figma component library](https://www.figma.com/file/FVu1DydEeXvJqXrkOb90Oi/ArcoDesign%E7%BB%84%E4%BB%B6%E8%AE%BE%E8%AE%A1_2.0?node-id=5472%3A308)\n* [Awesome Arco](https://github.com/arco-design/awesome-arco)\n\n# Ecosystems\n\n| Project               | Description                                             |\n| --------------------- | ------------------------------------------------------- |\n| [React Component Library] | A comprehensive React UI components library based on the Arco Design system |\n| [Design Lab] | A platform to create and manage your themes with ease. |\n| [Material Market] | A platform that provides massive high-quality customized materials to greatly boost development efficiency. |\n| [Icon Box] | One-stop platform to manage your icons. |\n| [Arco Pro] | A solution to quickly building applications from scratch. |\n\n[React Component Library]: https://arco.design/react/docs/start\n\n[Design Lab]: https://arco.design/themes\n\n[Material Market]: https://arco.design/material\n\n[Icon Box]: https://arco.design/iconbox\n\n[Arco Pro]: https://arco.design/pro/\n\n# Contributing\n\nDevelopers interested in contributing should read the [Code of Conduct](./CODE_OF_CONDUCT.md) and\nthe [Contributing Guide](./CONTRIBUTING.md).\n\nThank you to all the people who already contributed to ArcoDesign!\n\n<a href=\"https://github.com/arco-design/arco-design-vue/graphs/contributors\"><img src=\"https://contrib.rocks/image?repo=arco-design/arco-design-vue\" /></a>\n\n# License\n\nThs project is [MIT licensed](./LICENSE).\n"
  },
  {
    "path": "packages/web-vue/README.zh-CN.md",
    "content": "<div align=\"center\">\n  <a href=\"https://arco.design\" target=\"_blank\">\n    <img alt=\"Arco Design Logo\" width=\"200\" src=\"https://avatars.githubusercontent.com/u/64576149?s=200&v=4\"/>\n  </a>\n</div>\n\n<div align=\"center\">\n  <h1>Arco Design</h1>\n</div>\n\n<div align=\"center\">\n\n基于 [Arco Design](https://arco.design/) 的 Vue UI 组件库。\n\n[![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/arco-design/arco-design-vue/blob/main/LICENSE)\n\n</div>\n\n<div align=\"center\">\n\n[English](./README.md) | 简体中文\n\n</div>\n\n# 特性\n\n## 全面\n\n60多个开箱即用的高质量组件, 可以覆盖绝大部份的业务场景。\n\n## 主题配置\n\n海量的样式 tokens, 支持全局以及组件级别的主题配置。有以下2种方式可以定制主题：\n\n* [Less-loader](https://arco.design/vue/docs/theme)\n* [风格配置平台](https://arco.design/themes) - 推荐!\n\n## TypeScript 友好\n\n所有组件都是用 TypeScript 编写的，所以天然的类型友好。\n\n# 安装\n\n[npm package](https://www.npmjs.com/package/@arco-design/web-vue)\n\n```bash\n// npm\nnpm install @arco-design/web-vue\n\n// yarn\nyarn add @arco-design/web-vue\n```\n\n# 例子\n\n```typescript\nimport { createApp } from 'vue'\nimport ArcoVue from '@arco-design/web-vue';\nimport App from './App.vue';\nimport '@arco-design/web-vue/dist/arco.css';\n\nconst app = createApp(App);\napp.use(ArcoVue);\napp.mount('#app');\n```\n\n## 开发\n\n1. 使用 `npm install -g` 安装 `lerna` 和 `yarn` 等基础包\n\n2. 使用 `yarn install` 安装 `workspaces` 中各个包的依赖（如果遇到 `YN0018` 错误，可以使用 `YARN_CHECKSUM_BEHAVIOR=update yarn` 进行安装）\n\n3. 使用 `npm run init` 初始化项目\n\n\n# 相关链接\n\n* [官网](https://arco.design/)\n* [暗黑模式](https://arco.design/vue/docs/dark)\n* [主题配置](https://arco.design/vue/docs/theme)\n* [Figma 设计资源](https://www.figma.com/file/FVu1DydEeXvJqXrkOb90Oi/ArcoDesign%E7%BB%84%E4%BB%B6%E8%AE%BE%E8%AE%A1_2.0?node-id=5472%3A308)\n* [Awesome Arco](https://github.com/arco-design/awesome-arco)\n\n# 生态\n\n| 项目               | 介绍                                             |\n| --------------------- | ------------------------------------------------------- |\n| [React 组件库] | 基于 [Arco Design](https://arco.design/) 的 React UI 组件库。 |\n| [风格配置平台] | 精确到组件级的主题视觉配置平台 |\n| [物料平台] | 丰富可共享的业务定制物料，让效率突破猛进 |\n| [图标平台] | 一站式图标管理平台 |\n| [Arco Pro] | 快速构建中后台的前端解决方案 |\n\n[React 组件库]: https://arco.design/react/docs/start\n[风格配置平台]: https://arco.design/themes\n[物料平台]: https://arco.design/material\n[图标平台]: https://arco.design/iconbox\n[Arco Pro]: https://arco.design/pro/\n\n# 参与贡献\n\n贡献之前请先阅读 [行为准则](./CODE_OF_CONDUCT.md) 和 [贡献指南](./CONTRIBUTING.zh-CN.md)。\n\n感谢所有为 ArcoDesign 做过贡献的人!\n\n<a href=\"https://github.com/arco-design/arco-design-vue/graphs/contributors\"><img src=\"https://contrib.rocks/image?repo=arco-design/arco-design-vue\" /></a>\n\n# License\n\n[MIT 协议](./LICENSE)\n"
  },
  {
    "path": "packages/web-vue/babel.config.js",
    "content": "module.exports = {\n  presets: [\n    ['@babel/preset-env'],\n    [\n      '@babel/preset-typescript',\n      {\n        allExtensions: true,\n        isTSX: true,\n      },\n    ],\n  ],\n  plugins: [\n    '@babel/plugin-transform-runtime',\n    '@babel/plugin-transform-modules-commonjs',\n    '@babel/plugin-syntax-dynamic-import',\n    '@babel/plugin-proposal-class-properties',\n    '@vue/babel-plugin-jsx',\n  ],\n};\n"
  },
  {
    "path": "packages/web-vue/components/_components/auto-tooltip/auto-tooltip.tsx",
    "content": "import { defineComponent, onMounted, onUpdated, ref } from 'vue';\nimport Tooltip from '../../tooltip';\nimport ResizeObserver from '../resize-observer-v2';\nimport { getPrefixCls } from '../../_utils/global-config';\n\nexport default defineComponent({\n  name: 'AutoTooltip',\n  inheritAttrs: false,\n  props: {\n    tooltipProps: {\n      type: Object,\n    },\n  },\n  setup(props, { attrs, slots }) {\n    const prefix = getPrefixCls('auto-tooltip');\n\n    const containerRef = ref<HTMLElement>();\n    const contentRef = ref<HTMLElement>();\n    const text = ref('');\n    const showTooltip = ref(false);\n\n    const calTooltip = () => {\n      if (containerRef.value && contentRef.value) {\n        const _show =\n          contentRef.value.offsetWidth > containerRef.value.offsetWidth;\n        if (_show !== showTooltip.value) {\n          showTooltip.value = _show;\n        }\n      }\n    };\n\n    const getText = () => {\n      if (\n        contentRef.value?.textContent &&\n        contentRef.value.textContent !== text.value\n      ) {\n        text.value = contentRef.value.textContent;\n      }\n    };\n\n    const onResize = () => {\n      getText();\n      calTooltip();\n    };\n\n    onMounted(() => {\n      getText();\n      calTooltip();\n    });\n\n    onUpdated(() => {\n      getText();\n      calTooltip();\n    });\n\n    const renderContent = () => {\n      return (\n        <span ref={containerRef} class={prefix} {...attrs}>\n          <ResizeObserver onResize={onResize}>\n            <span ref={contentRef} class={`${prefix}-content`}>\n              {slots.default?.()}\n            </span>\n          </ResizeObserver>\n        </span>\n      );\n    };\n\n    return () => {\n      if (showTooltip.value) {\n        return (\n          <Tooltip\n            content={text.value}\n            onResize={onResize}\n            {...props.tooltipProps}\n          >\n            {renderContent()}\n          </Tooltip>\n        );\n      }\n\n      return (\n        <ResizeObserver onResize={onResize}>{renderContent()}</ResizeObserver>\n      );\n    };\n  },\n});\n"
  },
  {
    "path": "packages/web-vue/components/_components/auto-tooltip/style/index.less",
    "content": "@import '../../../style/theme/index.less';\n\n@auto-tooltip-prefix-cls: ~'@{prefix}-auto-tooltip';\n\n.@{auto-tooltip-prefix-cls} {\n  display: block;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n"
  },
  {
    "path": "packages/web-vue/components/_components/auto-tooltip/style/index.ts",
    "content": "import '../../../tooltip/style';\nimport './index.less';\n"
  },
  {
    "path": "packages/web-vue/components/_components/client-only.tsx",
    "content": "import { defineComponent, onMounted, ref } from 'vue';\n\nexport default defineComponent({\n  name: 'ClientOnly',\n  setup(_, { slots }) {\n    const mounted = ref(false);\n    onMounted(() => (mounted.value = true));\n\n    return () => {\n      if (mounted.value) {\n        return slots.default?.();\n      }\n      return null;\n    };\n  },\n});\n"
  },
  {
    "path": "packages/web-vue/components/_components/feedback-icon.vue",
    "content": "<template>\n  <span :class=\"cls\">\n    <icon-loading v-if=\"type === 'validating'\" />\n    <icon-check-circle-fill v-else-if=\"type === 'success'\" />\n    <icon-exclamation-circle-fill v-else-if=\"type === 'warning'\" />\n    <icon-close-circle-fill v-else-if=\"type === 'error'\" />\n  </span>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent } from 'vue';\nimport IconLoading from '../icon/icon-loading';\nimport IconCheckCircleFill from '../icon/icon-check-circle-fill';\nimport IconExclamationCircleFill from '../icon/icon-exclamation-circle-fill';\nimport IconCloseCircleFill from '../icon/icon-close-circle-fill';\nimport { getPrefixCls } from '../_utils/global-config';\n\nexport default defineComponent({\n  name: 'FeedbackIcon',\n  components: {\n    IconLoading,\n    IconCheckCircleFill,\n    IconExclamationCircleFill,\n    IconCloseCircleFill,\n  },\n  props: {\n    type: {\n      type: String,\n    },\n  },\n  setup(props) {\n    const prefixCls = getPrefixCls('feedback-icon');\n\n    const cls = computed(() => [\n      prefixCls,\n      `${prefixCls}-status-${props.type}`,\n    ]);\n\n    return {\n      cls,\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/_components/icon-hover.vue",
    "content": "<template>\n  <span\n    :class=\"[\n      prefixCls,\n      {\n        [`${prefix}-icon-hover`]: prefix,\n        [`${prefixCls}-size-${size}`]: size !== 'medium',\n        [`${prefixCls}-disabled`]: disabled,\n      },\n    ]\"\n  >\n    <slot />\n  </span>\n</template>\n\n<script lang=\"ts\">\nimport type { PropType } from 'vue';\nimport { defineComponent } from 'vue';\nimport type { Size } from '../_utils/constant';\nimport { getPrefixCls } from '../_utils/global-config';\n\nexport default defineComponent({\n  name: 'IconHover',\n  props: {\n    prefix: {\n      type: String,\n    },\n    size: {\n      type: String as PropType<Size>,\n      default: 'medium',\n    },\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n  },\n  setup() {\n    const prefixCls = getPrefixCls('icon-hover');\n\n    return {\n      prefixCls,\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/_components/input-label/input-label.tsx",
    "content": "import { computed, defineComponent, PropType, toRefs } from 'vue';\nimport { omit } from '../../_utils/omit';\nimport { INPUT_EVENTS, Size } from '../../_utils/constant';\nimport pick from '../../_utils/pick';\nimport { getPrefixCls } from '../../_utils/global-config';\nimport { useInput } from '../../_hooks/use-input';\nimport { SelectViewValue } from '../select-view/interface';\nimport { useFormItem } from '../../_hooks/use-form-item';\nimport { useSize } from '../../_hooks/use-size';\n\nexport default defineComponent({\n  name: 'InputLabel',\n  inheritAttrs: false,\n  props: {\n    modelValue: Object as PropType<SelectViewValue>,\n    inputValue: {\n      type: String,\n      default: '',\n    },\n    enabledInput: Boolean,\n    formatLabel: Function as PropType<(data?: SelectViewValue) => string>,\n    placeholder: String,\n    retainInputValue: Boolean,\n    disabled: Boolean,\n    baseCls: String,\n    size: String as PropType<Size>,\n    error: Boolean,\n    // used for outer focused\n    focused: Boolean,\n    uninjectFormItemContext: Boolean,\n  },\n  emits: ['update:inputValue', 'inputValueChange', 'focus', 'blur'],\n  setup(props, { attrs, emit, slots }) {\n    const { size, disabled, error, inputValue, uninjectFormItemContext } =\n      toRefs(props);\n    const prefixCls = props.baseCls ?? getPrefixCls('input-label');\n    const {\n      mergedSize: _mergedSize,\n      mergedDisabled,\n      mergedError,\n      eventHandlers,\n    } = useFormItem({\n      size,\n      disabled,\n      error,\n      uninject: uninjectFormItemContext?.value,\n    });\n    const { mergedSize } = useSize(_mergedSize);\n\n    const {\n      inputRef,\n      _focused,\n      computedValue: computedInputValue,\n      handleInput,\n      handleComposition,\n      handleFocus,\n      handleBlur,\n      handleMousedown,\n    } = useInput({\n      modelValue: inputValue,\n      emit,\n      eventName: 'inputValueChange',\n      updateEventName: 'update:inputValue',\n      eventHandlers,\n    });\n\n    const mergedFocused = computed(() => props.focused ?? _focused.value);\n\n    const showInput = computed(\n      () => (props.enabledInput && _focused.value) || !props.modelValue\n    );\n\n    const formatLabel = () => {\n      if (props.modelValue) {\n        return props.formatLabel?.(props.modelValue) ?? props.modelValue.label;\n      }\n      return '';\n    };\n\n    const mergedPlaceholder = computed(() => {\n      if (props.enabledInput && props.modelValue) {\n        return formatLabel();\n      }\n\n      return props.placeholder;\n    });\n\n    const renderLabel = () => {\n      if (props.modelValue) {\n        return slots.default?.({ data: props.modelValue }) ?? formatLabel();\n      }\n      return null;\n    };\n\n    const cls = computed(() => [\n      prefixCls,\n      `${prefixCls}-size-${mergedSize.value}`,\n      {\n        [`${prefixCls}-search`]: props.enabledInput,\n        [`${prefixCls}-focus`]: mergedFocused.value,\n        [`${prefixCls}-disabled`]: mergedDisabled.value,\n        [`${prefixCls}-error`]: mergedError.value,\n      },\n    ]);\n\n    const wrapperAttrs = computed(() => omit(attrs, INPUT_EVENTS));\n    const inputAttrs = computed(() => pick(attrs, INPUT_EVENTS));\n\n    const render = () => (\n      <span\n        {...wrapperAttrs.value}\n        class={cls.value}\n        title={formatLabel()}\n        onMousedown={handleMousedown}\n      >\n        {slots.prefix && (\n          <span class={`${prefixCls}-prefix`}>{slots.prefix()}</span>\n        )}\n        <input\n          {...inputAttrs.value}\n          ref={inputRef}\n          class={[\n            `${prefixCls}-input`,\n            {\n              [`${prefixCls}-input-hidden`]: !showInput.value,\n            },\n          ]}\n          value={computedInputValue.value}\n          readonly={!props.enabledInput}\n          placeholder={mergedPlaceholder.value}\n          disabled={mergedDisabled.value}\n          onInput={handleInput}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          onCompositionstart={handleComposition}\n          onCompositionupdate={handleComposition}\n          onCompositionend={handleComposition}\n        />\n        <span\n          class={[\n            `${prefixCls}-value`,\n            {\n              [`${prefixCls}-value-hidden`]: showInput.value,\n            },\n          ]}\n        >\n          {renderLabel()}\n        </span>\n        {slots.suffix && (\n          <span class={`${prefixCls}-suffix`}>{slots.suffix()}</span>\n        )}\n      </span>\n    );\n\n    return {\n      inputRef,\n      render,\n    };\n  },\n  methods: {\n    focus() {\n      (this.inputRef as HTMLInputElement)?.focus();\n    },\n    blur() {\n      (this.inputRef as HTMLInputElement)?.blur();\n    },\n  },\n  render() {\n    return this.render();\n  },\n});\n"
  },
  {
    "path": "packages/web-vue/components/_components/input-label/style/index.less",
    "content": "@import './input-label.less';\n\n@input-label-prefix-cls: ~'@{prefix}-input-label';\n\n.@{input-label-prefix-cls} {\n  .input-label-style(@input-label-prefix-cls);\n}\n"
  },
  {
    "path": "packages/web-vue/components/_components/input-label/style/index.ts",
    "content": "import '../../../input/style';\nimport './index.less';\n"
  },
  {
    "path": "packages/web-vue/components/_components/input-label/style/input-label.less",
    "content": "@import '../../../input/style/token.less';\n@import '../../../input/style/input.less';\n\n.input-label-style(@cls) {\n  &.@{cls}-search {\n    cursor: text;\n\n    & .@{cls}-value {\n      pointer-events: none;\n    }\n  }\n\n  .input-wrapper-style(@cls);\n\n  cursor: pointer;\n\n  .hide-input-element() {\n    // A div with width: 0 can also cause line breaks to cause the input box to be stretched, and to separate it from the standard document flow\n    position: absolute;\n    // Need to hide the input while ensuring that it can be focused by the Tab key\n    // So don't use display: none / visibility: hidden\n    width: 0 !important;\n  }\n\n  .@{cls}-input {\n    .input-style();\n\n    &-hidden {\n      .hide-input-element();\n    }\n  }\n\n  .@{cls}-value {\n    display: flex;\n    align-items: center;\n    box-sizing: border-box;\n    width: 100%;\n    .text-ellipsis();\n\n    // Fix the style problem that the height of the outer div of the select layer exceeds 4px when the value is an empty string.\n    &::after {\n      font-size: 0;\n      line-height: 0;\n      visibility: hidden;\n      content: '.';\n    }\n\n    &-hidden {\n      display: none;\n    }\n  }\n\n  .size(@size) {\n    @height: ~'input-size-@{size}-height';\n\n    &.@{cls}-size-@{size} .@{cls}-input,\n    &.@{cls}-size-@{size} .@{cls}-value {\n      .input-size(@size);\n    }\n\n    &.@{cls}-size-@{size} .@{cls}-value {\n      min-height: round(@@height - @input-border-width * 2);\n    }\n  }\n\n  .size(mini);\n  .size(medium);\n  .size(small);\n  .size(large);\n}\n"
  },
  {
    "path": "packages/web-vue/components/_components/input-label/style/token.less",
    "content": ""
  },
  {
    "path": "packages/web-vue/components/_components/picker/input-range.vue",
    "content": "<template>\n  <div :class=\"classNames\">\n    <div v-if=\"$slots.prefix\" :class=\"`${prefixCls}-prefix`\">\n      <slot name=\"prefix\" />\n    </div>\n    <div :class=\"getInputWrapClassName(0)\">\n      <input\n        ref=\"refInput0\"\n        :disabled=\"disabled0\"\n        :placeholder=\"placeholder[0]\"\n        :value=\"displayValue0\"\n        v-bind=\"readonly ? { readonly: true } : {}\"\n        @input=\"onChange\"\n        @keydown.enter=\"onPressEnter\"\n        @keydown.tab=\"onPressTab\"\n        @click=\"() => changeFocusedInput(0)\"\n      />\n    </div>\n    <span :class=\"`${prefixCls}-separator`\">\n      <slot name=\"separator\"> - </slot>\n    </span>\n    <div :class=\"getInputWrapClassName(1)\">\n      <input\n        ref=\"refInput1\"\n        :disabled=\"disabled1\"\n        :placeholder=\"placeholder[1]\"\n        :value=\"displayValue1\"\n        v-bind=\"readonly ? { readonly: true } : {}\"\n        @input=\"onChange\"\n        @keydown.enter=\"onPressEnter\"\n        @keydown.tab=\"onPressTab\"\n        @click=\"() => changeFocusedInput(1)\"\n      />\n    </div>\n    <div :class=\"`${prefixCls}-suffix`\">\n      <IconHover\n        v-if=\"allowClear && !mergedDisabled && value.length === 2\"\n        :prefix=\"prefixCls\"\n        :class=\"`${prefixCls}-clear-icon`\"\n        @click=\"onClear\"\n      >\n        <IconClose />\n      </IconHover>\n      <span :class=\"`${prefixCls}-suffix-icon`\">\n        <slot name=\"suffix-icon\" />\n      </span>\n      <FeedbackIcon v-if=\"feedback\" :type=\"feedback\" />\n    </div>\n  </div>\n</template>\n<script lang=\"ts\">\nimport { Dayjs } from 'dayjs';\nimport { computed, defineComponent, PropType, ref, toRefs } from 'vue';\nimport { getPrefixCls } from '../../_utils/global-config';\nimport FeedbackIcon from '../feedback-icon.vue';\nimport {\n  isArray,\n  isDayjs,\n  isFunction,\n  isNumber,\n  isUndefined,\n} from '../../_utils/is';\nimport IconClose from '../../icon/icon-close';\nimport IconHover from '../icon-hover.vue';\nimport { useFormItem } from '../../_hooks/use-form-item';\nimport { useSize } from '../../_hooks/use-size';\n\nexport default defineComponent({\n  name: 'DateInputRange',\n  components: {\n    IconHover,\n    IconClose,\n    FeedbackIcon,\n  },\n  props: {\n    size: {\n      type: String as PropType<'mini' | 'small' | 'medium' | 'large'>,\n    },\n    focused: {\n      type: Boolean,\n    },\n    focusedIndex: {\n      type: Number,\n    },\n    error: {\n      type: Boolean,\n    },\n    disabled: {\n      type: [Boolean, Array] as PropType<boolean | boolean[]>,\n      default: false,\n    },\n    readonly: {\n      type: Boolean,\n    },\n    allowClear: {\n      type: Boolean,\n    },\n    placeholder: {\n      type: Array as PropType<string[]>,\n      default: () => [],\n    },\n    inputValue: {\n      type: Array as PropType<string[]>,\n    },\n    value: {\n      type: Array as PropType<(Dayjs | undefined)[]>,\n      default: () => [],\n    },\n    format: {\n      type: [String, Function] as PropType<string | ((value: Dayjs) => string)>,\n      required: true,\n    },\n  },\n  emits: [\n    'focused-index-change',\n    'update:focusedIndex',\n    'change',\n    'clear',\n    'press-enter',\n  ],\n  setup(props, { emit, slots }) {\n    const {\n      error,\n      focused,\n      disabled,\n      size,\n      value,\n      format,\n      focusedIndex,\n      inputValue,\n    } = toRefs(props);\n    const {\n      mergedSize: _mergedSize,\n      mergedDisabled,\n      mergedError,\n      feedback,\n    } = useFormItem({ size, error });\n    const { mergedSize } = useSize(_mergedSize);\n\n    const refInput0 = ref<HTMLInputElement>();\n    const refInput1 = ref<HTMLInputElement>();\n\n    const getDisabled = (index: number): boolean => {\n      if (mergedDisabled.value) {\n        return mergedDisabled.value;\n      }\n      return isArray(disabled.value) ? disabled.value[index] : disabled.value;\n    };\n    const disabled0 = computed(() => getDisabled(0));\n    const disabled1 = computed(() => getDisabled(1));\n\n    const prefixCls = getPrefixCls('picker');\n\n    const classNames = computed(() => [\n      prefixCls,\n      `${prefixCls}-range`,\n      `${prefixCls}-size-${mergedSize.value}`,\n      {\n        [`${prefixCls}-focused`]: focused.value,\n        [`${prefixCls}-disabled`]: disabled0.value && disabled1.value,\n        [`${prefixCls}-error`]: mergedError.value,\n        [`${prefixCls}-has-prefix`]: slots.prefix,\n      },\n    ]);\n\n    function getInputWrapClassName(index: number) {\n      return [\n        `${prefixCls}-input`,\n        {\n          [`${prefixCls}-input-active`]: index === focusedIndex?.value,\n        },\n      ];\n    }\n\n    function getDisplayValue(index: number) {\n      if (inputValue?.value) {\n        return inputValue?.value?.[index];\n      }\n      const targetValue = value?.value?.[index];\n      if (targetValue && isDayjs(targetValue)) {\n        return isFunction(format.value)\n          ? format.value(targetValue)\n          : targetValue.format(format.value);\n      }\n      return undefined;\n    }\n\n    const displayValue0 = computed(() => getDisplayValue(0));\n    const displayValue1 = computed(() => getDisplayValue(1));\n\n    function changeFocusedInput(index: number) {\n      emit('focused-index-change', index);\n      emit('update:focusedIndex', index);\n    }\n\n    function onChange(e: Event) {\n      e.stopPropagation();\n      emit('change', e);\n    }\n\n    function onPressEnter() {\n      emit('press-enter');\n    }\n\n    function onPressTab(e: Event) {\n      e.preventDefault();\n    }\n\n    function onClear(e: Event) {\n      emit('clear', e);\n    }\n\n    return {\n      prefixCls,\n      classNames,\n      refInput0,\n      refInput1,\n      disabled0,\n      disabled1,\n      mergedDisabled,\n      getDisabled,\n      getInputWrapClassName,\n      displayValue0,\n      displayValue1,\n      changeFocusedInput,\n      onChange,\n      onPressEnter,\n      onPressTab,\n      onClear,\n      feedback,\n    };\n  },\n  methods: {\n    focus(index?: number) {\n      const targetIndex = isNumber(index) ? index : this.focusedIndex;\n      const targetElement = targetIndex === 0 ? this.refInput0 : this.refInput1;\n      !isUndefined(targetIndex) &&\n        !this.getDisabled(targetIndex) &&\n        targetElement &&\n        targetElement.focus &&\n        targetElement.focus();\n    },\n    blur() {\n      const targetElement =\n        this.focusedIndex === 0 ? this.refInput0 : this.refInput1;\n      targetElement && targetElement.blur && targetElement.blur();\n    },\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/_components/picker/input.vue",
    "content": "<template>\n  <div :class=\"classNames\">\n    <div v-if=\"$slots.prefix\" :class=\"`${prefixCls}-prefix`\">\n      <slot name=\"prefix\" />\n    </div>\n    <div :class=\"`${prefixCls}-input`\">\n      <input\n        ref=\"refInput\"\n        :disabled=\"mergedDisabled\"\n        :placeholder=\"placeholder\"\n        :class=\"`${prefixCls}-start-time`\"\n        :value=\"displayValue\"\n        v-bind=\"readonly ? { readonly: true } : {}\"\n        @keydown.enter=\"onPressEnter\"\n        @input=\"onChange\"\n        @blur=\"onBlur\"\n      />\n    </div>\n    <div :class=\"`${prefixCls}-suffix`\">\n      <IconHover\n        v-if=\"allowClear && !mergedDisabled && displayValue\"\n        :prefix=\"prefixCls\"\n        :class=\"`${prefixCls}-clear-icon`\"\n        @click=\"onClear\"\n      >\n        <IconClose />\n      </IconHover>\n      <span :class=\"`${prefixCls}-suffix-icon`\">\n        <slot name=\"suffix-icon\" />\n      </span>\n      <FeedbackIcon v-if=\"feedback\" :type=\"feedback\" />\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { Dayjs } from 'dayjs';\nimport { computed, defineComponent, PropType, ref, toRefs } from 'vue';\nimport { getPrefixCls } from '../../_utils/global-config';\nimport { isDayjs, isFunction } from '../../_utils/is';\nimport IconClose from '../../icon/icon-close';\nimport IconHover from '../icon-hover.vue';\nimport { useFormItem } from '../../_hooks/use-form-item';\nimport { useSize } from '../../_hooks/use-size';\nimport FeedbackIcon from '../feedback-icon.vue';\n\nexport default defineComponent({\n  name: 'DateInput',\n  components: {\n    IconHover,\n    IconClose,\n    FeedbackIcon,\n  },\n  props: {\n    size: {\n      type: String as PropType<'mini' | 'small' | 'medium' | 'large'>,\n    },\n    focused: {\n      type: Boolean,\n    },\n    disabled: {\n      type: Boolean,\n    },\n    readonly: {\n      type: Boolean,\n    },\n    error: {\n      type: Boolean,\n    },\n    allowClear: {\n      type: Boolean,\n    },\n    placeholder: {\n      type: String,\n    },\n    inputValue: {\n      type: String,\n    },\n    value: {\n      type: Object as PropType<Dayjs>,\n    },\n    format: {\n      type: [String, Function] as PropType<string | ((value: Dayjs) => string)>,\n      required: true,\n    },\n  },\n  emits: ['clear', 'press-enter', 'change', 'blur'],\n  setup(props, { emit, slots }) {\n    const { error, focused, disabled, size, value, format, inputValue } =\n      toRefs(props);\n    const {\n      mergedSize: _mergedSize,\n      mergedDisabled,\n      mergedError,\n      feedback,\n    } = useFormItem({ size, disabled, error });\n    const { mergedSize } = useSize(_mergedSize);\n\n    const prefixCls = getPrefixCls('picker');\n\n    const classNames = computed(() => [\n      prefixCls,\n      `${prefixCls}-size-${mergedSize.value}`,\n      {\n        [`${prefixCls}-focused`]: focused.value,\n        [`${prefixCls}-disabled`]: mergedDisabled.value,\n        [`${prefixCls}-error`]: mergedError.value,\n        [`${prefixCls}-has-prefix`]: slots.prefix,\n      },\n    ]);\n    const displayValue = computed(() => {\n      if (inputValue?.value) return inputValue?.value;\n      if (value?.value && isDayjs(value.value)) {\n        return isFunction(format.value)\n          ? format.value(value.value)\n          : value.value.format(format.value);\n      }\n      return undefined;\n    });\n\n    const refInput = ref<HTMLInputElement>();\n\n    return {\n      feedback,\n      prefixCls,\n      classNames,\n      displayValue,\n      mergedDisabled,\n      refInput,\n      onPressEnter() {\n        emit('press-enter');\n      },\n      onChange(e: Event) {\n        emit('change', e);\n      },\n      onClear(e: Event) {\n        emit('clear', e);\n      },\n      onBlur(e: Event) {\n        emit('blur', e);\n      },\n    };\n  },\n  methods: {\n    focus() {\n      this.refInput && this.refInput.focus && this.refInput.focus();\n    },\n    blur() {\n      this.refInput && this.refInput.blur && this.refInput.blur();\n    },\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/_components/picker/style/index.less",
    "content": "@import '../../../input/style/input.less';\n@import './token.less';\n\n.@{prefix}-picker {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  box-sizing: border-box;\n  padding: @picker-padding-horizontal 11px 4px 4px;\n  line-height: @line-height-base;\n  background-color: @picker-color-bg;\n  border: 1px solid @picker-color-border;\n  border-radius: @picker-input-border-radius;\n  transition: all @transition-duration-1 @transition-timing-function-linear;\n\n  &-input {\n    display: inline-flex;\n    flex: 1;\n  }\n\n  input {\n    width: 100%;\n    padding: 0;\n    padding-left: 8px;\n    color: @picker-color-text;\n    line-height: @line-height-base;\n    text-align: left;\n    background-color: @color-transparent;\n    border: none;\n    outline: none;\n    transition: all @transition-duration-1 @transition-timing-function-linear;\n\n    &::placeholder {\n      color: @picker-color-placeholder;\n    }\n\n    // fix color error under disabled status in safari\n    &[disabled] {\n      -webkit-text-fill-color: @input-color-text_disabled;\n    }\n  }\n\n  &-has-prefix {\n    padding-left: @input-padding-horizontal;\n  }\n\n  &-prefix {\n    padding-right: @picker-padding-horizontal;\n    color: @input-color-prefix-text;\n    font-size: @input-size-default-icon-suffix-size;\n  }\n\n  &-suffix {\n    display: inline-flex;\n    align-items: center;\n    margin-left: 4px;\n\n    .input-suffix-feedback-icon-color();\n\n    .@{prefix}-feedback-icon {\n      margin-left: 4px;\n    }\n  }\n\n  &-suffix-icon {\n    color: @picker-color-icon;\n  }\n\n  & &-clear-icon {\n    display: none;\n    color: var(~'@{arco-cssvars-prefix}-color-text-2');\n    font-size: 12px;\n  }\n\n  &:hover {\n    background-color: @picker-color-bg_hover;\n    border-color: @picker-color-border_hover;\n  }\n\n  &:not(&-disabled):hover &-clear-icon {\n    display: inline-block;\n  }\n\n  &:not(&-disabled):hover &-suffix &-clear-icon + span {\n    display: none;\n  }\n\n  input[disabled] {\n    color: @picker-color-text_disabled;\n    cursor: not-allowed;\n\n    &::placeholder {\n      color: @picker-color-placeholder_disabled;\n    }\n  }\n\n  &-error {\n    background-color: @picker-color-bg_error;\n    border-color: @picker-color-border_error;\n\n    &:hover {\n      background-color: @picker-color-bg_error_hover;\n      border-color: @picker-color-border_error_hover;\n    }\n  }\n\n  &-focused {\n    box-shadow: 0 0 0 @picker-size-shadow_focus @picker-color-shadow_focus;\n  }\n\n  &-focused,\n  &-focused:hover {\n    background-color: @picker-color-bg_focus;\n    border-color: @picker-color-border_focus;\n  }\n\n  &-focused&-error {\n    border-color: @picker-color-border_error_focus;\n    box-shadow: 0 0 0 @picker-size-shadow_error_focus\n      @picker-color-shadow_error_focus;\n  }\n\n  &-focused &-input-active input,\n  &-focused:hover &-input-active input {\n    background: @picker-range-color-bg-input_focus;\n  }\n\n  &-disabled,\n  &-disabled:hover {\n    color: @picker-color-text_disabled;\n    background-color: @picker-color-bg_disabled;\n    border-color: @picker-color-border_disabled;\n    cursor: not-allowed;\n\n    input[disabled] {\n      color: @picker-color-text_disabled;\n      cursor: not-allowed;\n\n      &::placeholder {\n        color: @picker-color-placeholder_disabled;\n      }\n    }\n  }\n\n  &-separator {\n    min-width: 10px;\n    padding: 0 8px;\n    color: @picker-color-separator;\n  }\n\n  &-disabled &-separator {\n    color: @picker-color-separator_disabled;\n  }\n\n  &-disabled &-suffix-icon {\n    color: @picker-color-icon_disabled;\n  }\n\n  // Size\n  &-size-mini {\n    height: @picker-size-mini;\n\n    input {\n      font-size: @picker-size-mini-font-size-text;\n    }\n  }\n\n  &-size-small {\n    height: @picker-size-small;\n\n    input {\n      font-size: @picker-size-small-font-size-text;\n    }\n  }\n\n  &-size-medium {\n    height: @picker-size-default;\n\n    input {\n      font-size: @picker-size-default-font-size-text;\n    }\n  }\n\n  &-size-large {\n    height: @picker-size-large;\n\n    input {\n      font-size: @picker-size-large-font-size-text;\n    }\n  }\n}\n"
  },
  {
    "path": "packages/web-vue/components/_components/picker/style/token.less",
    "content": "@import '../../../style/theme/index.less';\n@import '../../../input/style/token.less';\n\n@picker-size-mini: @size-mini;\n@picker-size-small: @size-small;\n@picker-size-default: @size-default;\n@picker-size-large: @size-large;\n\n@picker-size-mini-font-size-text: @font-size-body-1;\n@picker-size-small-font-size-text: @font-size-body-3;\n@picker-size-default-font-size-text: @font-size-body-3;\n@picker-size-large-font-size-text: @font-size-body-3;\n\n@picker-input-border-radius: @radius-small;\n\n@picker-color-shadow_focus: var(\n  ~'@{arco-cssvars-prefix}-color-primary-light-2'\n);\n@picker-size-shadow_focus: @shadow-distance-none;\n@picker-color-shadow_error_focus: var(\n  ~'@{arco-cssvars-prefix}-color-danger-light-2'\n);\n@picker-size-shadow_error_focus: @shadow-distance-none;\n\n@picker-color-bg: var(~'@{arco-cssvars-prefix}-color-fill-2');\n@picker-color-bg_hover: var(~'@{arco-cssvars-prefix}-color-fill-3');\n@picker-color-bg_focus: var(~'@{arco-cssvars-prefix}-color-bg-2');\n@picker-color-bg_disabled: var(~'@{arco-cssvars-prefix}-color-fill-2');\n@picker-color-bg_error: var(~'@{arco-cssvars-prefix}-color-danger-light-1');\n@picker-color-bg_error_hover: var(\n  ~'@{arco-cssvars-prefix}-color-danger-light-2'\n);\n@picker-color-bg_error_focus: var(~'@{arco-cssvars-prefix}-color-bg-2');\n\n@picker-color-border: @color-transparent;\n@picker-color-border_hover: @color-transparent;\n@picker-color-border_focus: @color-primary-6;\n@picker-color-border_disabled: @color-transparent;\n@picker-color-border_error: @color-transparent;\n@picker-color-border_error_hover: @color-transparent;\n@picker-color-border_error_focus: @color-danger-6;\n\n@picker-color-placeholder: var(~'@{arco-cssvars-prefix}-color-text-3');\n@picker-color-placeholder_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');\n@picker-color-text: var(~'@{arco-cssvars-prefix}-color-text-2');\n@picker-color-text_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');\n@picker-color-icon: var(~'@{arco-cssvars-prefix}-color-text-2');\n@picker-color-icon_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');\n@picker-color-separator: var(~'@{arco-cssvars-prefix}-color-text-3');\n@picker-color-separator_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');\n\n@picker-range-color-bg-input_focus: var(~'@{arco-cssvars-prefix}-color-fill-2');\n@input-color-text_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');\n\n// not in design lab\n@picker-padding-horizontal: @spacing-2; // 4px\n@picker-input-padding-horizontal: @input-padding-horizontal -\n  @picker-padding-horizontal; // 8px\n"
  },
  {
    "path": "packages/web-vue/components/_components/render-function.ts",
    "content": "import { defineComponent, PropType, VNodeTypes } from 'vue';\n\nexport type RenderFunc = (props: Record<string, unknown>) => VNodeTypes;\n\nexport default defineComponent({\n  name: 'RenderFunction',\n  props: {\n    renderFunc: {\n      type: Function as PropType<RenderFunc>,\n      required: true,\n    },\n  },\n  render() {\n    return this.renderFunc(this.$attrs);\n  },\n});\n"
  },
  {
    "path": "packages/web-vue/components/_components/resize-observer-v2.ts",
    "content": "import { defineComponent, onBeforeUnmount, watch } from 'vue';\nimport ResizeObserver from 'resize-observer-polyfill';\nimport { useFirstElement } from '../_hooks/use-first-element';\n\nexport default defineComponent({\n  name: 'ResizeObserver',\n  props: {\n    watchOnUpdated: Boolean,\n  },\n  emits: [\n    /**\n     * resize 事件\n     * @property {ResizeObserverEntry} entry 触发 resize 的 dom 元素\n     */\n    'resize',\n  ],\n  setup(props, { emit, slots }) {\n    const { children, firstElement } = useFirstElement();\n    let resizeObserver: ResizeObserver | null;\n\n    const createResizeObserver = (target: HTMLElement) => {\n      if (!target) return;\n      resizeObserver = new ResizeObserver((entries: ResizeObserverEntry[]) => {\n        const entry = entries[0];\n        emit('resize', entry);\n      });\n      resizeObserver.observe(target);\n    };\n\n    const destroyResizeObserver = () => {\n      if (resizeObserver) {\n        resizeObserver.disconnect();\n        resizeObserver = null;\n      }\n    };\n\n    watch(firstElement, (element) => {\n      if (resizeObserver) destroyResizeObserver();\n      if (element) {\n        createResizeObserver(element);\n      }\n    });\n\n    onBeforeUnmount(() => {\n      if (resizeObserver) destroyResizeObserver();\n    });\n\n    return () => {\n      children.value = slots.default?.();\n      return children.value;\n    };\n  },\n});\n"
  },
  {
    "path": "packages/web-vue/components/_components/resize-observer.tsx",
    "content": "import {\n  defineComponent,\n  onMounted,\n  onUnmounted,\n  ref,\n  ComponentPublicInstance,\n  computed,\n  cloneVNode,\n  watch,\n} from 'vue';\nimport ResizeObserver from 'resize-observer-polyfill';\nimport { getFirstComponent } from '../_utils/vue-utils';\nimport { isComponentInstance } from '../_utils/is';\n\nexport default defineComponent({\n  name: 'ResizeObserver',\n  emits: [\n    /**\n     * resize 事件\n     * @property {ResizeObserverEntry} entry 触发 resize 的 dom 元素\n     */\n    'resize',\n  ],\n  setup(props, { emit, slots }) {\n    let resizeObserver: ResizeObserver | null;\n\n    const componentRef = ref<HTMLElement | ComponentPublicInstance>();\n\n    const element = computed<HTMLElement>(() =>\n      isComponentInstance(componentRef.value)\n        ? componentRef.value.$el\n        : componentRef.value\n    );\n\n    const createResizeObserver = (target: HTMLElement) => {\n      if (!target) return;\n      resizeObserver = new ResizeObserver((entries: ResizeObserverEntry[]) => {\n        const entry = entries[0];\n        emit('resize', entry);\n      });\n      resizeObserver.observe(target);\n    };\n\n    const destroyResizeObserver = () => {\n      if (resizeObserver) {\n        resizeObserver.disconnect();\n        resizeObserver = null;\n      }\n    };\n\n    watch(element, (_element) => {\n      if (resizeObserver) destroyResizeObserver();\n      if (_element) createResizeObserver(_element);\n    });\n\n    onMounted(() => {\n      if (element.value) {\n        createResizeObserver(element.value);\n      }\n    });\n\n    onUnmounted(() => {\n      destroyResizeObserver();\n    });\n\n    return () => {\n      const firstChild = getFirstComponent(slots.default?.() ?? []);\n\n      if (firstChild) {\n        return cloneVNode(\n          firstChild,\n          {\n            ref: componentRef,\n          },\n          true\n        );\n      }\n\n      return null;\n    };\n  },\n});\n"
  },
  {
    "path": "packages/web-vue/components/_components/resize-trigger.vue",
    "content": "<template>\n  <ResizeObserver @resize=\"onResize\">\n    <div :class=\"classNames\">\n      <!-- @slot 自定义内容 -->\n      <slot>\n        <div :class=\"`${prefixCls}-icon-wrapper`\">\n          <!-- @slot 自定义 icon -->\n          <slot name=\"icon\">\n            <IconDragDot v-if=\"isHorizontal\" :class=\"`${prefixCls}-icon`\" />\n            <IconDragDotVertical v-else :class=\"`${prefixCls}-icon`\" />\n          </slot>\n        </div>\n      </slot>\n    </div>\n  </ResizeObserver>\n</template>\n<script lang=\"tsx\">\nimport { computed, defineComponent, PropType, toRefs } from 'vue';\nimport IconDragDot from '../icon/icon-drag-dot';\nimport IconDragDotVertical from '../icon/icon-drag-dot-vertical';\nimport ResizeObserver from './resize-observer';\n\nexport default defineComponent({\n  name: 'ResizeTrigger',\n  components: {\n    ResizeObserver,\n    IconDragDot,\n    IconDragDotVertical,\n  },\n  props: {\n    prefixCls: {\n      type: String,\n      required: true,\n    },\n    direction: {\n      type: String as PropType<'horizontal' | 'vertical'>,\n      default: 'horizontal',\n    },\n  },\n  emits: ['resize'],\n  setup(props, { emit }) {\n    const { direction, prefixCls } = toRefs(props);\n    const isHorizontal = computed(() => direction?.value === 'horizontal');\n    const classNames = computed(() => [\n      prefixCls.value,\n      {\n        [`${prefixCls.value}-horizontal`]: isHorizontal.value,\n        [`${prefixCls.value}-vertical`]: !isHorizontal.value,\n      },\n    ]);\n    const onResize = (entry: ResizeObserverEntry) => {\n      emit('resize', entry);\n    };\n\n    return {\n      classNames,\n      onResize,\n      isHorizontal,\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/_components/select-view/interface.ts",
    "content": "import { TagData } from '../../input-tag/interface';\n\nexport interface SelectViewValue extends TagData {\n  value: string | number;\n  label: string;\n  closable: boolean;\n}\n"
  },
  {
    "path": "packages/web-vue/components/_components/select-view/select-view.tsx",
    "content": "import type { ComponentPublicInstance, PropType } from 'vue';\nimport { computed, defineComponent, ref, toRefs, watch } from 'vue';\nimport type { Data } from '../../_utils/types';\nimport { getPrefixCls } from '../../_utils/global-config';\nimport { Size } from '../../_utils/constant';\nimport { isArray } from '../../_utils/is';\nimport FeedbackIcon from '../feedback-icon.vue';\nimport InputLabel from '../input-label/input-label';\nimport InputTag from '../../input-tag';\nimport IconHover from '../icon-hover.vue';\nimport IconDown from '../../icon/icon-down';\nimport IconLoading from '../../icon/icon-loading';\nimport IconClose from '../../icon/icon-close';\nimport IconSearch from '../../icon/icon-search';\nimport { useFormItem } from '../../_hooks/use-form-item';\nimport { useSize } from '../../_hooks/use-size';\nimport { SelectViewValue } from './interface';\n\nexport default defineComponent({\n  name: 'SelectView',\n  props: {\n    modelValue: {\n      type: Array as PropType<SelectViewValue[]>,\n      required: true,\n    },\n    inputValue: String,\n    placeholder: String,\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n    error: {\n      type: Boolean,\n      default: false,\n    },\n    loading: {\n      type: Boolean,\n      default: false,\n    },\n    opened: {\n      type: Boolean,\n      default: false,\n    },\n    size: {\n      type: String as PropType<Size>,\n    },\n    bordered: {\n      type: Boolean,\n      default: true,\n    },\n    multiple: {\n      type: Boolean,\n      default: false,\n    },\n    allowClear: {\n      type: Boolean,\n      default: false,\n    },\n    allowCreate: {\n      type: Boolean,\n      default: false,\n    },\n    allowSearch: {\n      type: Boolean,\n      default: (props: Data) => isArray(props.modelValue),\n    },\n    maxTagCount: {\n      type: Number,\n      default: 0,\n    },\n    tagNowrap: {\n      type: Boolean,\n      default: false,\n    },\n    retainInputValue: {\n      type: Boolean,\n      default: false,\n    },\n  },\n  emits: ['remove', 'clear', 'focus', 'blur'],\n  setup(props, { emit, slots }) {\n    const { size, disabled, error } = toRefs(props);\n    const prefixCls = getPrefixCls('select-view');\n    const {\n      feedback,\n      eventHandlers,\n      mergedDisabled,\n      mergedSize: _mergedSize,\n      mergedError,\n    } = useFormItem({\n      size,\n      disabled,\n      error,\n    });\n    const { mergedSize } = useSize(_mergedSize);\n\n    const { opened } = toRefs(props);\n\n    const componentRef = ref<ComponentPublicInstance>();\n    const inputRef = computed<HTMLInputElement>(\n      // @ts-ignore\n      () => componentRef.value?.inputRef\n    );\n\n    const isEmptyValue = computed(() => props.modelValue.length === 0);\n    const enabledInput = computed(() => props.allowSearch || props.allowCreate);\n    const showClearBtn = computed(\n      () => props.allowClear && !props.disabled && !isEmptyValue.value\n    );\n\n    const handleFocus = (ev: FocusEvent) => {\n      emit('focus', ev);\n      eventHandlers.value?.onFocus?.(ev);\n    };\n\n    const handleBlur = (ev: FocusEvent) => {\n      emit('blur', ev);\n      eventHandlers.value?.onBlur?.(ev);\n    };\n\n    const handleRemove = (tag: string) => {\n      emit('remove', tag);\n    };\n\n    const handleClear = (ev: MouseEvent) => {\n      emit('clear', ev);\n    };\n\n    const renderIcon = () => {\n      if (props.loading) {\n        return slots['loading-icon']?.() ?? <IconLoading />;\n      }\n      if (props.allowSearch && props.opened) {\n        return slots['search-icon']?.() ?? <IconSearch />;\n      }\n      if (slots['arrow-icon']) {\n        return slots['arrow-icon']();\n      }\n      return <IconDown class={`${prefixCls}-arrow-icon`} />;\n    };\n\n    const renderSuffix = () => (\n      <>\n        {showClearBtn.value && (\n          <IconHover\n            class={`${prefixCls}-clear-btn`}\n            onClick={handleClear}\n            onMousedown={(ev: MouseEvent) => ev.stopPropagation()}\n          >\n            <IconClose />\n          </IconHover>\n        )}\n        <span class={`${prefixCls}-icon`}>{renderIcon()}</span>\n        {Boolean(feedback.value) && <FeedbackIcon type={feedback.value} />}\n      </>\n    );\n\n    watch(opened, (opened) => {\n      if (\n        !opened &&\n        inputRef.value &&\n        inputRef.value.isSameNode(document.activeElement)\n      ) {\n        inputRef.value.blur();\n      }\n    });\n\n    const cls = computed(() => [\n      `${prefixCls}-${props.multiple ? 'multiple' : 'single'}`,\n      {\n        [`${prefixCls}-opened`]: props.opened,\n        [`${prefixCls}-borderless`]: !props.bordered,\n      },\n    ]);\n\n    const render = () => {\n      if (props.multiple) {\n        return (\n          <InputTag\n            ref={componentRef}\n            v-slots={{\n              prefix: slots.prefix,\n              suffix: renderSuffix,\n              tag: slots.label,\n            }}\n            baseCls={prefixCls}\n            class={cls.value}\n            modelValue={props.modelValue}\n            inputValue={props.inputValue}\n            focused={props.opened}\n            placeholder={props.placeholder}\n            disabled={mergedDisabled.value}\n            size={mergedSize.value}\n            error={mergedError.value}\n            maxTagCount={props.maxTagCount}\n            disabledInput={!props.allowSearch && !props.allowCreate}\n            tagNowrap={props.tagNowrap}\n            retainInputValue\n            uninjectFormItemContext\n            onRemove={handleRemove}\n            onFocus={handleFocus}\n            onBlur={handleBlur}\n          />\n        );\n      }\n      return (\n        <InputLabel\n          ref={componentRef}\n          v-slots={{\n            default: slots.label,\n            prefix: slots.prefix,\n            suffix: renderSuffix,\n          }}\n          baseCls={prefixCls}\n          class={cls.value}\n          modelValue={props.modelValue[0]}\n          inputValue={props.inputValue}\n          focused={props.opened}\n          placeholder={props.placeholder}\n          disabled={mergedDisabled.value}\n          size={mergedSize.value}\n          error={mergedError.value}\n          enabledInput={enabledInput.value}\n          uninjectFormItemContext\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n        />\n      );\n    };\n\n    return {\n      inputRef,\n      handleFocus,\n      handleBlur,\n      render,\n    };\n  },\n  methods: {\n    focus() {\n      if (this.inputRef) {\n        this.inputRef.focus();\n      }\n    },\n    blur() {\n      if (this.inputRef) {\n        this.inputRef.blur();\n      }\n    },\n  },\n  render() {\n    return this.render();\n  },\n});\n"
  },
  {
    "path": "packages/web-vue/components/_components/select-view/style/index.less",
    "content": "@import '../../input-label/style/input-label.less';\n@import '../../../input-tag/style/input-tag.less';\n@import './token.less';\n\n@select-view-prefix-cls: ~'@{prefix}-select-view';\n\n.@{select-view-prefix-cls} {\n  &-single {\n    .input-label-style(@select-view-prefix-cls);\n  }\n\n  &-multiple {\n    .input-tag-style(@select-view-prefix-cls);\n\n    &.@{select-view-prefix-cls}-disabled-input {\n      cursor: pointer;\n    }\n  }\n\n  &&-borderless {\n    background: none !important;\n    border: none !important;\n    box-shadow: none !important;\n  }\n\n  &-suffix .@{prefix}-feedback-icon {\n    margin-left: 4px;\n  }\n\n  &-clear-btn,\n  &-icon {\n    svg {\n      display: block;\n      font-size: @select-size-icon;\n    }\n  }\n\n  &-opened &-arrow-icon {\n    transform: rotateZ(180deg);\n  }\n\n  &-expand-icon {\n    transform: rotate(-45deg);\n  }\n\n  &-clear-btn {\n    display: none;\n    cursor: pointer;\n  }\n\n  &:hover &-clear-btn {\n    display: block;\n\n    & ~ * {\n      display: none;\n    }\n  }\n}\n"
  },
  {
    "path": "packages/web-vue/components/_components/select-view/style/index.ts",
    "content": "import '../../input-label/style';\nimport '../../../input-tag/style';\nimport './index.less';\n"
  },
  {
    "path": "packages/web-vue/components/_components/select-view/style/token.less",
    "content": "@import '../../../style/theme/index.less';\n\n@select-size-icon: @size-3;\n@select-size-icon-bg: @size-4;\n"
  },
  {
    "path": "packages/web-vue/components/_components/transition/expand-transition.vue",
    "content": "<template>\n  <transition\n    @before-enter=\"onBeforeEnter\"\n    @enter=\"onEnter\"\n    @after-enter=\"onAfterEnter\"\n    @before-leave=\"onBeforeLeave\"\n    @leave=\"onLeave\"\n    @after-leave=\"onAfterLeave\"\n  >\n    <slot />\n  </transition>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue';\n\nexport default defineComponent({\n  name: 'ExpandTransition',\n  setup() {\n    return {\n      onBeforeEnter(el: HTMLDivElement) {\n        el.style.height = '0';\n      },\n      onEnter(el: HTMLDivElement) {\n        el.style.height = `${el.scrollHeight}px`;\n      },\n      onAfterEnter(el: HTMLDivElement) {\n        el.style.height = '';\n      },\n      onBeforeLeave(el: HTMLDivElement) {\n        el.style.height = `${el.scrollHeight}px`;\n      },\n      onLeave(el: HTMLDivElement) {\n        el.style.height = `0`;\n      },\n      onAfterLeave(el: HTMLElement) {\n        el.style.height = ``;\n      },\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/_components/virtual-list/filler.vue",
    "content": "<template>\n  <table\n    v-if=\"type === 'table'\"\n    :style=\"outerStyle\"\n    cellpadding=\"0\"\n    cellspacing=\"0\"\n    v-bind=\"outerAttrs\"\n  >\n    <tbody :style=\"innerStyle\" v-bind=\"innerAttrs\">\n      <slot />\n    </tbody>\n  </table>\n  <div v-else-if=\"!disabled\" :style=\"outerStyle\" v-bind=\"outerAttrs\">\n    <div :style=\"innerStyle\" v-bind=\"innerAttrs\">\n      <slot />\n    </div>\n  </div>\n  <slot v-else />\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, computed, toRefs, CSSProperties } from 'vue';\n\nexport default defineComponent({\n  name: 'VirtualListFiller',\n  props: {\n    height: {\n      type: Number,\n    },\n    offset: {\n      type: Number,\n    },\n    disabled: {\n      type: Boolean,\n    },\n    type: String,\n    outerAttrs: Object,\n    innerAttrs: Object,\n  },\n  setup(props) {\n    const { height, offset } = toRefs(props);\n\n    const outerStyle = computed<CSSProperties>(() =>\n      offset.value !== undefined\n        ? {\n            height: `${height.value}px`,\n            position: 'relative',\n            zIndex: 0,\n          }\n        : {}\n    );\n\n    const innerStyle = computed<CSSProperties>(() => {\n      const commonStyle: CSSProperties = {\n        display: 'flex',\n        flexDirection: 'column',\n      };\n\n      return offset.value !== undefined\n        ? {\n            ...commonStyle,\n            transform: `translateY(${offset.value}px)`,\n            position: 'absolute',\n            left: 0,\n            right: 0,\n            top: 0,\n          }\n        : commonStyle;\n    });\n\n    return {\n      outerStyle,\n      innerStyle,\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/_components/virtual-list/hooks/use-item-height.ts",
    "content": "import { computed, ref, watch, toRefs } from 'vue';\nimport { InternalDataItem, VirtualItemKey } from '../interface';\n\n// 默认的元素高度\nconst DEFAULT_ITEM_HEIGHT = 32;\n\nexport function useItemHeight(props: {\n  estimatedItemHeight?: number;\n  data: InternalDataItem[];\n}) {\n  const { estimatedItemHeight: propEstimatedItemHeight, data } = toRefs(props);\n  const itemHeightCacheMap = ref<Map<VirtualItemKey, number>>(new Map());\n  const estimatedItemHeight = ref(propEstimatedItemHeight?.value);\n\n  // 利用第一批显示的元素计算预估高度：取平均值\n  const itemLength = computed(() => itemHeightCacheMap.value.size);\n  watch(itemLength, () => {\n    if (itemLength.value && !estimatedItemHeight.value) {\n      estimatedItemHeight.value =\n        [...itemHeightCacheMap.value.entries()].reduce(\n          (sum, [, height]) => sum + height,\n          0\n        ) / itemLength.value;\n    }\n  });\n\n  const itemHeight = computed(\n    () => estimatedItemHeight.value || DEFAULT_ITEM_HEIGHT\n  );\n\n  // 只计算一次最小高度，避免抖动\n  const minItemHeight = computed(() =>\n    Math.min(itemHeight.value, DEFAULT_ITEM_HEIGHT)\n  );\n\n  // 总高度只需要一个范围，无需准确值\n  const totalHeight = computed(() => itemHeight.value * data.value.length);\n\n  function setItemHeight(key: VirtualItemKey, height: number) {\n    itemHeightCacheMap.value.set(key, height);\n  }\n\n  function getItemHeight(key: VirtualItemKey) {\n    return itemHeightCacheMap.value.get(key);\n  }\n\n  function getItemHeightOrDefault(key: VirtualItemKey) {\n    return itemHeightCacheMap.value.get(key) || itemHeight.value;\n  }\n\n  function getItemHeightByIndex(index: number) {\n    const { key } = data.value[index];\n    return itemHeightCacheMap.value.get(key);\n  }\n\n  function getItemHeightOrDefaultByIndex(index: number) {\n    return getItemHeightByIndex(index) || itemHeight.value;\n  }\n\n  return {\n    itemHeight,\n    minItemHeight,\n    estimatedItemHeight,\n    totalHeight,\n    setItemHeight,\n    getItemHeight,\n    getItemHeightOrDefault,\n    getItemHeightByIndex,\n    getItemHeightOrDefaultByIndex,\n  };\n}\n"
  },
  {
    "path": "packages/web-vue/components/_components/virtual-list/hooks/use-range-state.ts",
    "content": "import { toRefs, reactive } from 'vue';\nimport { getRangeIndex, getScrollPercentage } from '../utils';\nimport { throttleByRaf } from '../../../_utils/throttle-by-raf';\n\nexport function useRangeState(props: {\n  viewportRef: HTMLElement | undefined;\n  visibleCount: number;\n  itemCount: number;\n}) {\n  const { viewportRef, visibleCount, itemCount } = toRefs(props);\n\n  const rangeState = reactive({\n    itemIndex: 0,\n    itemOffsetPtg: 0,\n    startIndex: 0,\n    endIndex: visibleCount.value,\n  });\n\n  const updateRangeState = () => {\n    if (!viewportRef.value) return;\n\n    const {\n      scrollTop: rawScrollTop,\n      clientHeight,\n      scrollHeight,\n    } = viewportRef.value;\n\n    const scrollPtg = getScrollPercentage({\n      scrollTop: rawScrollTop,\n      clientHeight,\n      scrollHeight,\n    });\n\n    const { itemIndex, itemOffsetPtg, startIndex, endIndex } = getRangeIndex(\n      scrollPtg,\n      itemCount.value,\n      visibleCount.value\n    );\n\n    rangeState.itemIndex = Math.min(itemCount.value - 1, itemIndex);\n    rangeState.itemOffsetPtg = itemOffsetPtg;\n    rangeState.startIndex = startIndex;\n    rangeState.endIndex = endIndex;\n  };\n\n  return {\n    rangeState,\n    updateRangeState: throttleByRaf(updateRangeState),\n  };\n}\n"
  },
  {
    "path": "packages/web-vue/components/_components/virtual-list/hooks/use-render-children.tsx",
    "content": "import { toRefs, VNode, cloneVNode, watch } from 'vue';\nimport { ItemSlot, InternalDataItem, VirtualItemKey } from '../interface';\n\nconst findElement = (node: any) => {\n  let res = (node?.$el ?? node) as HTMLElement | undefined;\n  while (res && !res.tagName) {\n    res = res.nextSibling as HTMLElement;\n  }\n  return res;\n};\n\nexport function useRenderChildren(\n  props: {\n    internalData: InternalDataItem[];\n    visibleData: InternalDataItem[];\n    itemRender: ItemSlot;\n  },\n  events: {\n    onItemResize?: (height: HTMLElement, key: VirtualItemKey) => void;\n  } = {}\n) {\n  const { internalData, visibleData, itemRender } = toRefs(props);\n  const itemRenderCache: Map<VirtualItemKey, VNode> = new Map();\n\n  const renderChildren = () => {\n    return visibleData.value.map(({ item, index, key }) => {\n      if (!itemRenderCache.has(key)) {\n        const [node] = itemRender.value({ item, index });\n        let dom: HTMLElement | undefined;\n        const resizeHandler = () => {\n          if (dom) {\n            events.onItemResize?.(dom, key);\n          }\n        };\n        itemRenderCache.set(\n          key,\n          cloneVNode(node, {\n            key,\n            ref: (el) => {\n              if (!dom) {\n                dom = findElement(el);\n              }\n            },\n            onVnodeMounted() {\n              resizeHandler();\n            },\n            onVnodeUpdated() {\n              resizeHandler();\n            },\n          })\n        );\n      }\n      return itemRenderCache.get(key);\n    });\n  };\n\n  watch([internalData, itemRender], () => {\n    itemRenderCache.clear();\n  });\n\n  return renderChildren;\n}\n"
  },
  {
    "path": "packages/web-vue/components/_components/virtual-list/hooks/use-scroll-to.ts",
    "content": "import { toRefs, computed } from 'vue';\nimport { getIndexByStartLoc } from '../utils/algorithm';\nimport {\n  getScrollPercentage,\n  getRangeIndex,\n  getItemRelativeTop,\n  getCompareItemRelativeTop,\n} from '../utils';\nimport { InternalDataItem, VirtualItemKey, ScrollOptions } from '../interface';\n\nexport interface RelativeScroll {\n  itemIndex: number;\n  relativeTop: number;\n}\n\nexport function useScrollTo(props: {\n  isVirtual: boolean;\n  isStaticItemHeight: boolean;\n  data: InternalDataItem[];\n  viewportRef: HTMLElement | undefined;\n  rangeState: {\n    itemIndex: number;\n    itemOffsetPtg: number;\n    startIndex: number;\n    endIndex: number;\n  };\n  scrollTop: number;\n  visibleCount: number;\n  getItemHeightOrDefault: (key: VirtualItemKey) => number;\n  getItemHeightOrDefaultByIndex: (index: number) => number;\n}) {\n  const {\n    isVirtual,\n    isStaticItemHeight,\n    data,\n    rangeState,\n    viewportRef,\n    scrollTop,\n    visibleCount,\n    getItemHeightOrDefault,\n    getItemHeightOrDefaultByIndex,\n  } = toRefs(props);\n\n  const itemCount = computed(() => data.value.length);\n\n  const getItemKeyByIndex = (index: number) => data.value[index]?.key;\n\n  const fixScrollTo = (relativeScroll: RelativeScroll) => {\n    if (!viewportRef.value) return null;\n\n    const { itemIndex: compareItemIndex, relativeTop: compareItemRelativeTop } =\n      relativeScroll;\n\n    const { scrollHeight, clientHeight } = viewportRef.value;\n    const originScrollTop = scrollTop.value;\n    const maxScrollTop = scrollHeight - clientHeight;\n\n    let bestSimilarity = Number.MAX_VALUE;\n    let bestScrollTop = -1;\n    let bestItemIndex = -1;\n    let bestItemOffsetPtg = -1;\n    let bestStartIndex = -1;\n    let bestEndIndex = -1;\n    let missSimilarity = 0;\n\n    for (let i = 0; i < maxScrollTop; i++) {\n      const scrollTop = getIndexByStartLoc(0, maxScrollTop, originScrollTop, i);\n      const scrollPtg = getScrollPercentage({\n        scrollTop,\n        scrollHeight,\n        clientHeight,\n      });\n      const { itemIndex, itemOffsetPtg, startIndex, endIndex } = getRangeIndex(\n        scrollPtg,\n        itemCount.value,\n        visibleCount.value\n      );\n\n      if (startIndex <= compareItemIndex && compareItemIndex <= endIndex) {\n        const locatedItemRelativeTop = getItemRelativeTop({\n          itemHeight: getItemHeightOrDefaultByIndex.value(itemIndex),\n          itemOffsetPtg,\n          clientHeight,\n          scrollPtg,\n        });\n\n        const compareItemTop = getCompareItemRelativeTop({\n          locatedItemRelativeTop,\n          locatedItemIndex: itemIndex,\n          compareItemIndex,\n          startIndex,\n          endIndex,\n          getItemKeyByIndex,\n          getItemHeightOrDefault: getItemHeightOrDefault.value,\n        });\n\n        const similarity = Math.abs(compareItemTop - compareItemRelativeTop);\n        if (similarity < bestSimilarity) {\n          bestSimilarity = similarity;\n          bestScrollTop = scrollTop;\n          bestItemIndex = itemIndex;\n          bestItemOffsetPtg = itemOffsetPtg;\n          bestStartIndex = startIndex;\n          bestEndIndex = endIndex;\n\n          missSimilarity = 0;\n        } else {\n          missSimilarity += 1;\n        }\n      }\n\n      if (missSimilarity > 10) {\n        break;\n      }\n    }\n\n    return bestScrollTop === -1\n      ? null\n      : {\n          scrollTop: bestScrollTop,\n          itemIndex: bestItemIndex,\n          itemOffsetPtg: bestItemOffsetPtg,\n          startIndex: bestStartIndex,\n          endIndex: bestEndIndex,\n        };\n  };\n\n  const prepareScrollTo = (options: ScrollOptions) => {\n    if (!viewportRef.value) return null;\n\n    if (typeof options === 'number') {\n      viewportRef.value.scrollTop = options;\n      return null;\n    }\n\n    const index =\n      'index' in options\n        ? (options.index as number)\n        : 'key' in options\n        ? data.value.findIndex((item) => item.key === options.key)\n        : 0;\n    const item = data.value[index];\n\n    if (!item) {\n      return null;\n    }\n\n    let align = options.align || 'auto';\n    const { clientHeight, scrollTop } = viewportRef.value;\n\n    if (isVirtual.value && !isStaticItemHeight.value) {\n      if (align === 'auto') {\n        const { itemIndex, itemOffsetPtg } = rangeState.value;\n        if (Math.abs(itemIndex - index) < visibleCount.value) {\n          let itemTop = getItemRelativeTop({\n            itemHeight: getItemHeightOrDefaultByIndex.value(index),\n            itemOffsetPtg,\n            clientHeight,\n            scrollPtg: getScrollPercentage(viewportRef.value),\n          });\n\n          if (index < itemIndex) {\n            for (let i = index; i < itemIndex; i++) {\n              itemTop -= getItemHeightOrDefaultByIndex.value(i);\n            }\n          } else {\n            for (let i = itemIndex; i < index; i++) {\n              itemTop += getItemHeightOrDefaultByIndex.value(i);\n            }\n          }\n\n          // 目标元素位于视野之内时，直接退出\n          if (itemTop < 0 || itemTop > clientHeight) {\n            align = itemTop < 0 ? 'top' : 'bottom';\n          } else {\n            return null;\n          }\n        } else {\n          align = index < itemIndex ? 'top' : 'bottom';\n        }\n      }\n\n      return {\n        itemIndex: index,\n        relativeTop:\n          align === 'top'\n            ? 0\n            : clientHeight - getItemHeightOrDefaultByIndex.value(index),\n        startIndex: Math.max(0, index - visibleCount.value),\n        endIndex: Math.min(itemCount.value - 1, index + visibleCount.value),\n      };\n    }\n\n    const indexItemHeight = getItemHeightOrDefaultByIndex.value(index);\n    let itemTop = 0;\n    for (let i = 0; i < index; i++) {\n      itemTop += getItemHeightOrDefaultByIndex.value(i);\n    }\n    const itemBottom = itemTop + indexItemHeight;\n\n    if (align === 'auto') {\n      if (itemTop < scrollTop) {\n        align = 'top';\n      } else if (itemBottom > scrollTop + clientHeight) {\n        align = 'bottom';\n      }\n    }\n\n    if (align === 'top') {\n      viewportRef.value.scrollTop = itemTop;\n    } else if (align === 'bottom') {\n      viewportRef.value.scrollTop = itemTop - (clientHeight - indexItemHeight);\n    }\n\n    return null;\n  };\n\n  return {\n    fixScrollTo,\n    prepareScrollTo,\n  };\n}\n"
  },
  {
    "path": "packages/web-vue/components/_components/virtual-list/hooks/use-viewport-height.ts",
    "content": "import { computed, ref, toRefs, watchEffect } from 'vue';\nimport { isNumber } from '../../../_utils/is';\n\nconst DEFAULT_HEIGHT = 200;\n\nexport function useViewportHeight(props: { height: number | string }) {\n  const { height } = toRefs(props);\n\n  const viewportHeight = ref(DEFAULT_HEIGHT);\n  const setViewportHeight = (val: number) => {\n    viewportHeight.value = val;\n  };\n\n  watchEffect(() => {\n    if (isNumber(height.value)) {\n      viewportHeight.value = height.value;\n    }\n  });\n\n  return {\n    viewportHeight,\n    setViewportHeight,\n    needMeasureViewportHeight: computed(() => !isNumber(height.value)),\n  };\n}\n"
  },
  {
    "path": "packages/web-vue/components/_components/virtual-list/interface.ts",
    "content": "import { VNode } from 'vue';\n\nexport type VirtualItemKey = string | number;\n\nexport interface InternalDataItem {\n  key: VirtualItemKey;\n  index: number;\n  item: unknown;\n}\n\nexport type ItemSlot = (props: { item: unknown; index: number }) => VNode[];\n\nexport interface ScrollIntoViewOptions {\n  index?: number;\n  key?: VirtualItemKey;\n  align: 'auto' | 'top' | 'bottom';\n}\n\nexport interface VirtualListProps {\n  /**\n   * @zh 可视区域高度\n   * @en Viewable area height\n   */\n  height: number | string;\n  /**\n   * @zh 自动开启虚拟滚动的元素数量阈值，传入 null 表示禁止虚拟滚动\n   * @en Threshold for the number of elements that automatically turn on virtual scrolling, passing in null means that virtual scrolling is prohibited\n   */\n  threshold?: number | null;\n  /**\n   * @zh 元素高度是否是固定的\n   * @en Is the element height fixed\n   */\n  isStaticItemHeight?: boolean;\n  estimatedItemHeight?: number;\n  data?: unknown[];\n  itemKey?: string;\n  component?: keyof HTMLElementTagNameMap;\n}\n\nexport type ScrollOptions =\n  | number\n  | { index?: number; key?: VirtualItemKey; align?: 'auto' | 'top' | 'bottom' };\n\nexport interface VirtualListRef {\n  scrollTo: (options: ScrollOptions) => void;\n}\n"
  },
  {
    "path": "packages/web-vue/components/_components/virtual-list/utils/algorithm.ts",
    "content": "// https://github.com/react-component/virtual-list/blob/master/src/utils/algorithmUtil.ts\n\nimport { VirtualItemKey } from '../interface';\n\n/**\n * Get index with specific start index one by one. e.g.\n * min: 3, max: 9, start: 6\n *\n * Return index is:\n * [0]: 6\n * [1]: 7\n * [2]: 5\n * [3]: 8\n * [4]: 4\n * [5]: 9\n * [6]: 3\n */\nexport function getIndexByStartLoc(\n  min: number,\n  max: number,\n  start: number,\n  index: number\n): number {\n  const beforeCount = start - min;\n  const afterCount = max - start;\n  const balanceCount = Math.min(beforeCount, afterCount) * 2;\n\n  // Balance\n  if (index <= balanceCount) {\n    const stepIndex = Math.floor(index / 2);\n    if (index % 2) {\n      return start + stepIndex + 1;\n    }\n    return start - stepIndex;\n  }\n\n  // One is out of range\n  if (beforeCount > afterCount) {\n    return start - (index - afterCount);\n  }\n  return start + (index - beforeCount);\n}\n\n/**\n * We assume that 2 list has only 1 item diff and others keeping the order.\n * So we can use dichotomy algorithm to find changed one.\n */\nexport function findListDiffIndex<T>(\n  originList: T[],\n  targetList: T[],\n  getKey: (item: T, index: number) => VirtualItemKey\n): { index: number; multiple: boolean } | null {\n  const originLen = originList.length;\n  const targetLen = targetList.length;\n\n  let shortList: T[];\n  let longList: T[];\n\n  if (originLen === 0 && targetLen === 0) {\n    return null;\n  }\n\n  if (originLen < targetLen) {\n    shortList = originList;\n    longList = targetList;\n  } else {\n    shortList = targetList;\n    longList = originList;\n  }\n\n  const notExistKey = { __EMPTY_ITEM__: true };\n\n  function getItemKey(item: T, index: number) {\n    return item !== undefined ? getKey(item, index) : notExistKey;\n  }\n\n  // Loop to find diff one\n  let diffIndex = -1;\n  let multiple = Math.abs(originLen - targetLen) !== 1;\n  for (let i = 0; i < longList.length; i += 1) {\n    const shortKey = getItemKey(shortList[i], i);\n    const longKey = getItemKey(longList[i], i);\n\n    if (shortKey !== longKey) {\n      diffIndex = i;\n      multiple = multiple || shortKey !== getItemKey(longList[i + 1], i + 1);\n      break;\n    }\n  }\n\n  return diffIndex === -1 ? null : { index: diffIndex, multiple };\n}\n"
  },
  {
    "path": "packages/web-vue/components/_components/virtual-list/utils/index.ts",
    "content": "import { VirtualItemKey } from '../interface';\n\n/**\n * 获取有效的scrollTop值\n * Safari的缓动效果会获得负值的scrollTop\n */\nexport function getValidScrollTop(scrollTop: number, scrollRange: number) {\n  return scrollTop < 0 ? 0 : scrollTop > scrollRange ? scrollRange : scrollTop;\n}\n\n/**\n * 获取滚动比例\n * 视口已滚动距离 / 总可滚动距离\n */\nexport function getScrollPercentage({\n  scrollTop,\n  scrollHeight,\n  clientHeight,\n}: {\n  scrollTop: number;\n  scrollHeight: number;\n  clientHeight: number;\n}) {\n  const scrollLength = scrollHeight - clientHeight;\n  return scrollLength\n    ? getValidScrollTop(scrollTop, scrollLength) / scrollLength\n    : 0;\n}\n\n/**\n * 根据滚动条当前的滚动百分比，计算出基准元素（滚动位置对应的元素）\n * 在基准元素的上方和下方渲染可见区域的其他元素\n */\nexport function getLocationItem(scrollPtg: number, itemCount: number) {\n  const itemIndex = Math.floor(scrollPtg * itemCount);\n  const itemTopPtg = itemIndex / itemCount;\n  // The ratio of the top edge of the datum element beyond the scroll position\n  const offsetPtg = (scrollPtg - itemTopPtg) / (1 / itemCount);\n\n  return {\n    index: itemIndex,\n    // scrollPtg >= itemTopPtg, the calculation result is the offset of the scroll distance that the element should add to its height\n    offsetPtg: Number.isNaN(offsetPtg) ? 0 : offsetPtg,\n  };\n}\n\n/**\n * 计算需要渲染的元素的开始下标、结束下标和用于定位的元素下标\n */\nexport function getRangeIndex(\n  scrollPtg: number,\n  itemCount: number,\n  visibleCount: number\n) {\n  const { index, offsetPtg } = getLocationItem(scrollPtg, itemCount);\n\n  const beforeCount = Math.ceil(scrollPtg * visibleCount);\n  const afterCount = Math.ceil((1 - scrollPtg) * visibleCount);\n\n  return {\n    itemIndex: index,\n    itemOffsetPtg: offsetPtg,\n    startIndex: Math.max(0, index - beforeCount),\n    endIndex: Math.min(itemCount - 1, index + afterCount),\n  };\n}\n\ninterface ItemTopConfig {\n  itemHeight: number;\n  itemOffsetPtg: number;\n  scrollTop: number;\n  scrollPtg: number;\n  clientHeight: number;\n}\n\n/**\n * 计算元素相对于视口顶部的偏移量\n */\nexport function getItemRelativeTop({\n  itemHeight,\n  itemOffsetPtg,\n  scrollPtg,\n  clientHeight,\n}: Omit<ItemTopConfig, 'scrollTop'>) {\n  if (scrollPtg === 1) return clientHeight - itemHeight;\n  return clientHeight * scrollPtg - itemHeight * itemOffsetPtg;\n}\n\n/**\n * 计算元素相对于整个滚动区域顶部的偏移量\n */\nexport function getItemAbsoluteTop({ scrollTop, ...rest }: ItemTopConfig) {\n  return scrollTop + getItemRelativeTop(rest);\n}\n\ninterface CompareItemConfig {\n  locatedItemRelativeTop: number;\n  locatedItemIndex: number;\n  compareItemIndex: number;\n  getItemKeyByIndex: (index: number) => VirtualItemKey;\n  startIndex: number;\n  endIndex: number;\n  getItemHeightOrDefault: (key: VirtualItemKey) => number;\n}\n\n/**\n * 计算某一指定下标的元素相对于视口顶部的偏移量\n */\nexport function getCompareItemRelativeTop({\n  locatedItemRelativeTop,\n  locatedItemIndex,\n  compareItemIndex,\n  startIndex,\n  endIndex,\n  getItemKeyByIndex,\n  getItemHeightOrDefault,\n}: CompareItemConfig) {\n  let compareItemTop = locatedItemRelativeTop;\n  const compareItemKey = getItemKeyByIndex(compareItemIndex);\n\n  if (compareItemIndex <= locatedItemIndex) {\n    for (let index = locatedItemIndex; index >= startIndex; index -= 1) {\n      const key = getItemKeyByIndex(index);\n      if (key === compareItemKey) {\n        break;\n      }\n\n      const prevItemKey = getItemKeyByIndex(index - 1);\n      compareItemTop -= getItemHeightOrDefault(prevItemKey);\n    }\n  } else {\n    for (let index = locatedItemIndex; index <= endIndex; index += 1) {\n      const key = getItemKeyByIndex(index);\n      if (key === compareItemKey) {\n        break;\n      }\n\n      compareItemTop += getItemHeightOrDefault(key);\n    }\n  }\n\n  return compareItemTop;\n}\n"
  },
  {
    "path": "packages/web-vue/components/_components/virtual-list/virtual-list.vue",
    "content": "<template>\n  <ResizeObserver @resize=\"handleResize\">\n    <component\n      :is=\"component\"\n      v-bind=\"$attrs\"\n      ref=\"viewportRef\"\n      :style=\"{\n        overflowY: 'auto',\n        overflowAnchor: 'none',\n        maxHeight: `${viewportHeight}px`,\n      }\"\n      @scroll=\"handleScroll\"\n    >\n      <Filler\n        :height=\"isVirtual ? totalHeight : viewportHeight\"\n        :offset=\"isVirtual ? startOffset : undefined\"\n        :type=\"type\"\n        :outer-attrs=\"outerAttrs\"\n        :inner-attrs=\"innerAttrs\"\n      >\n        <RenderFunction :render-func=\"renderChildren\" />\n      </Filler>\n    </component>\n  </ResizeObserver>\n</template>\n\n<script lang=\"tsx\">\nimport {\n  defineComponent,\n  PropType,\n  toRefs,\n  reactive,\n  nextTick,\n  computed,\n  ref,\n  watch,\n  Ref,\n  onUnmounted,\n} from 'vue';\nimport {\n  ItemSlot,\n  ScrollOptions,\n  VirtualListProps,\n  VirtualItemKey,\n} from './interface';\nimport { isFunction, isString, isUndefined } from '../../_utils/is';\nimport { raf, caf } from '../../_utils/raf';\nimport usePickSlots from '../../_hooks/use-pick-slots';\nimport ResizeObserver from '../resize-observer';\nimport RenderFunction from '../render-function';\nimport Filler from './filler.vue';\nimport { useViewportHeight } from './hooks/use-viewport-height';\nimport { useItemHeight } from './hooks/use-item-height';\nimport { useRenderChildren } from './hooks/use-render-children';\nimport { useRangeState } from './hooks/use-range-state';\nimport { useScrollTo } from './hooks/use-scroll-to';\nimport {\n  getScrollPercentage,\n  getValidScrollTop,\n  getItemAbsoluteTop,\n} from './utils';\n\nexport default defineComponent({\n  name: 'VirtualList',\n  components: {\n    ResizeObserver,\n    Filler,\n    RenderFunction,\n  },\n  inheritAttrs: false,\n  props: {\n    /**\n     * 可视区域高度\n     */\n    height: {\n      type: [Number, String] as PropType<VirtualListProps['height']>,\n      default: 200,\n    },\n    /**\n     * 自动开启虚拟滚动的元素数量阈值，传入 null 表示禁止虚拟滚动\n     */\n    threshold: {\n      type: [Number, Object] as PropType<VirtualListProps['threshold']>,\n    },\n    /**\n     * 元素高度是否是固定的\n     */\n    isStaticItemHeight: {\n      type: Boolean,\n    },\n    /**\n     * 预估的元素高度\n     */\n    estimatedItemHeight: {\n      type: Number,\n    },\n    /**\n     * 数据源\n     */\n    data: {\n      type: Array as PropType<VirtualListProps['data']>,\n      default: () => [],\n    },\n    /**\n     * 元素的 key，或者获取 key 的函数\n     */\n    itemKey: {\n      type: [String, Function] as PropType<VirtualListProps['itemKey']>,\n      default: 'key',\n    },\n    /**\n     * 用于包裹的 HTML 标签\n     * @type string\n     */\n    component: {\n      type: String as PropType<VirtualListProps['component']>,\n      default: 'div',\n    },\n    type: String,\n    outerAttrs: Object,\n    innerAttrs: Object,\n  },\n  emits: ['scroll', 'resize'],\n  setup(props, { slots, emit }) {\n    const {\n      height,\n      itemKey,\n      data,\n      estimatedItemHeight: propEstimatedItemHeight,\n      isStaticItemHeight,\n      threshold,\n    } = toRefs(props);\n\n    function getItemKey(item: any, index: number) {\n      let result: VirtualItemKey | undefined;\n      if (isString(itemKey.value)) {\n        result = item[itemKey.value];\n      } else if (isFunction(itemKey.value)) {\n        result = itemKey.value(item);\n      }\n      return result ?? index;\n    }\n\n    // Convert data to internal format: {key, index, item}\n    const internalData = computed(() =>\n      (data.value || []).map((item, index) => ({\n        key: getItemKey(item, index),\n        index,\n        item,\n      }))\n    );\n\n    const viewportRef = ref<HTMLElement>();\n\n    const { viewportHeight, setViewportHeight, needMeasureViewportHeight } =\n      useViewportHeight(\n        reactive({\n          height,\n        })\n      );\n\n    const {\n      itemHeight,\n      minItemHeight,\n      totalHeight,\n      setItemHeight,\n      getItemHeight,\n      getItemHeightOrDefault,\n      getItemHeightOrDefaultByIndex,\n    } = useItemHeight(\n      reactive({\n        estimatedItemHeight: propEstimatedItemHeight,\n        data: internalData,\n      })\n    );\n\n    const itemCount = computed(() => internalData.value.length);\n    const visibleCount = computed(() =>\n      Math.ceil(viewportHeight.value / minItemHeight.value)\n    );\n\n    const scrollTop = ref(0);\n    const startOffset = ref(0);\n\n    const { rangeState, updateRangeState } = useRangeState(\n      reactive({\n        viewportRef,\n        itemCount,\n        visibleCount,\n      })\n    );\n\n    const visibleData = computed(() => {\n      const start = rangeState.startIndex;\n      const end = Math.min(rangeState.endIndex + 1, itemCount.value);\n      return internalData.value.slice(start, end);\n    });\n\n    const isVirtual = computed(\n      () =>\n        threshold?.value !== null &&\n        (threshold?.value === undefined ||\n          itemCount.value >= threshold.value) &&\n        totalHeight.value > viewportHeight.value\n    );\n\n    // 记录滚动列表的 paddingTop 用于校正滚动距离\n    const scrollListPadding = computed(() => {\n      if (!isUndefined(viewportRef.value)) {\n        const viewport = viewportRef.value;\n        const getPadding = (property: keyof CSSStyleDeclaration) =>\n          +(window.getComputedStyle(viewport)[property] as string).replace(\n            /\\D/g,\n            ''\n          );\n        return {\n          top: getPadding('paddingTop'),\n          bottom: getPadding('paddingBottom'),\n        };\n      }\n\n      return { top: 0, bottom: 0 };\n    });\n\n    const itemRender = usePickSlots(slots, 'item') as Ref<ItemSlot>;\n    const renderChildren = useRenderChildren(\n      reactive({\n        internalData,\n        visibleData,\n        itemRender,\n      }),\n      {\n        onItemResize(el, key) {\n          if (el && isUndefined(getItemHeight(key))) {\n            if (isStaticItemHeight.value) {\n              setItemHeight(key, itemHeight.value);\n            } else {\n              const height = el.offsetHeight;\n              if (height) {\n                setItemHeight(key, height);\n              }\n            }\n          }\n        },\n      }\n    );\n\n    const updateScrollOffset = () => {\n      if (!viewportRef.value || !isVirtual.value) return;\n\n      const { scrollTop, clientHeight, scrollHeight } = viewportRef.value;\n\n      const scrollPtg = getScrollPercentage({\n        scrollTop,\n        clientHeight,\n        scrollHeight,\n      });\n\n      let newStartOffset = getItemAbsoluteTop({\n        scrollPtg,\n        clientHeight,\n        scrollTop:\n          scrollTop -\n          (scrollListPadding.value.top + scrollListPadding.value.bottom) *\n            scrollPtg,\n        itemHeight: getItemHeightOrDefaultByIndex(rangeState.itemIndex),\n        itemOffsetPtg: rangeState.itemOffsetPtg,\n      });\n\n      for (\n        let index = rangeState.itemIndex - 1;\n        index >= rangeState.startIndex;\n        index--\n      ) {\n        newStartOffset -= getItemHeightOrDefaultByIndex(index);\n      }\n\n      startOffset.value = newStartOffset;\n    };\n\n    // scrollTo\n    const rafIdRef = ref();\n    onUnmounted(() => {\n      rafIdRef.value && caf(rafIdRef.value);\n    });\n\n    const lockScrollRef = ref(false);\n    const { fixScrollTo, prepareScrollTo } = useScrollTo(\n      reactive({\n        isVirtual,\n        isStaticItemHeight,\n        rangeState,\n        data: internalData,\n        viewportRef,\n        scrollTop,\n        visibleCount,\n        getItemHeightOrDefault,\n        getItemHeightOrDefaultByIndex,\n      })\n    );\n\n    const handleResize = (entry: HTMLElement) => {\n      handleWrapperResize(entry);\n      emit('resize', entry);\n    };\n\n    const handleWrapperResize = (entry: HTMLElement) => {\n      if (needMeasureViewportHeight.value) {\n        setViewportHeight(entry.clientHeight);\n      }\n    };\n\n    const handleScroll = (e: UIEvent) => {\n      if (!viewportRef.value) return;\n\n      const {\n        scrollTop: rawScrollTop,\n        clientHeight,\n        scrollHeight,\n      } = viewportRef.value;\n\n      scrollTop.value = getValidScrollTop(\n        rawScrollTop,\n        scrollHeight - clientHeight\n      );\n      emit('scroll', e);\n    };\n\n    const scrollTo = (options: ScrollOptions) => {\n      rafIdRef.value && caf(rafIdRef.value);\n      rafIdRef.value = raf(() => {\n        const prepareScrollResult = prepareScrollTo(options);\n        if (prepareScrollResult) {\n          rangeState.startIndex = prepareScrollResult.startIndex;\n          rangeState.endIndex = prepareScrollResult.endIndex;\n          nextTick(() => {\n            if (!viewportRef.value) return;\n\n            const fixScrollResult = fixScrollTo({\n              itemIndex: prepareScrollResult.itemIndex,\n              relativeTop: prepareScrollResult.relativeTop,\n            });\n\n            if (fixScrollResult) {\n              lockScrollRef.value = true;\n              viewportRef.value.scrollTop = fixScrollResult.scrollTop;\n              rangeState.itemIndex = fixScrollResult.itemIndex;\n              rangeState.itemOffsetPtg = fixScrollResult.itemOffsetPtg;\n              rangeState.startIndex = fixScrollResult.startIndex;\n              rangeState.endIndex = fixScrollResult.endIndex;\n            }\n\n            rafIdRef.value = raf(() => {\n              lockScrollRef.value = false;\n            });\n          });\n        }\n      });\n    };\n\n    // Element size changes, viewport changes size changes, scroll position changes need to recalculate the start and end elements\n    watch([itemHeight, visibleCount, scrollTop, data], () => {\n      if (lockScrollRef.value) return;\n      updateRangeState();\n    });\n\n    // 开始和结束元素变化后需要更新偏移\n    watch(rangeState, () => {\n      updateScrollOffset();\n    });\n\n    return {\n      viewportRef,\n      viewportHeight,\n      totalHeight,\n      startOffset,\n      isVirtual,\n      renderChildren,\n      handleResize,\n      handleScroll,\n      scrollTo,\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/_components/virtual-list-v2/hooks/use-size.ts",
    "content": "import { computed, onMounted, Ref, ref } from 'vue';\n\nexport const useSize = ({\n  dataKeys,\n  contentRef,\n  fixedSize,\n  estimatedSize,\n  buffer,\n}: {\n  dataKeys: Ref<(string | number)[]>;\n  contentRef: Ref<HTMLElement | undefined>;\n  fixedSize: Ref<boolean>;\n  estimatedSize: Ref<number | undefined>;\n  buffer: Ref<number>;\n}) => {\n  const firstRangeAverageSize = ref(0);\n  const sizeMap = new Map<string | number, number>();\n\n  const total = computed(() => dataKeys.value.length);\n  const start = ref(0);\n  const end = computed(() => {\n    const _end = start.value + buffer.value * 3;\n    if (_end > total.value) return total.value;\n    return _end;\n  });\n  const maxStart = computed(() => {\n    const max = total.value - buffer.value * 3;\n    if (max < 0) return 0;\n    return max;\n  });\n\n  const setStart = (index: number) => {\n    if (index < 0) {\n      start.value = 0;\n    } else if (index > maxStart.value) {\n      start.value = maxStart.value;\n    } else {\n      start.value = index;\n    }\n  };\n\n  const isFixed = ref(fixedSize.value);\n  const _estimatedSize = computed(() => {\n    if (estimatedSize.value !== 30) {\n      return estimatedSize.value;\n    }\n    return firstRangeAverageSize.value || estimatedSize.value;\n  });\n\n  const setItemSize = (key: string | number, size: number) => {\n    sizeMap.set(key, size);\n  };\n\n  const getItemSize = (index: number) => {\n    if (isFixed.value) {\n      return _estimatedSize.value;\n    }\n\n    const _key = dataKeys.value[index];\n    return sizeMap.get(_key) ?? _estimatedSize.value;\n  };\n\n  const hasItemSize = (key: string | number) => {\n    return sizeMap.has(key);\n  };\n\n  onMounted(() => {\n    const firstRangeTotalSize = Array.from(sizeMap.values()).reduce(\n      (pre, value) => pre + value,\n      0\n    );\n    if (firstRangeTotalSize > 0) {\n      firstRangeAverageSize.value = firstRangeTotalSize / sizeMap.size;\n    }\n  });\n\n  const getScrollOffset = (index: number) => {\n    if (isFixed.value) {\n      return _estimatedSize.value * index;\n    }\n    return getOffset(0, index);\n  };\n\n  const getOffset = (start: number, end: number) => {\n    let offset = 0;\n\n    for (let i = start; i < end; i++) {\n      offset += getItemSize(i);\n    }\n\n    return offset;\n  };\n\n  const frontPadding = computed(() => {\n    if (isFixed.value) {\n      return _estimatedSize.value * start.value;\n    }\n    return getOffset(0, start.value);\n  });\n\n  const getOffsetIndex = (scrollOffset: number) => {\n    const isForward = scrollOffset >= frontPadding.value;\n    let offset = Math.abs(scrollOffset - frontPadding.value);\n    const _start = isForward ? start.value : start.value - 1;\n    let offsetIndex = 0;\n    while (offset > 0) {\n      offset -= getItemSize(_start + offsetIndex);\n      isForward ? offsetIndex++ : offsetIndex--;\n    }\n    return offsetIndex;\n  };\n\n  const getStartByScroll = (scrollOffset: number) => {\n    const offsetIndex = getOffsetIndex(scrollOffset);\n    const _start = start.value + offsetIndex - buffer.value;\n    if (_start < 0) return 0;\n    if (_start > maxStart.value) return maxStart.value;\n    return _start;\n  };\n\n  const behindPadding = computed(() => {\n    if (isFixed.value) {\n      return _estimatedSize.value * (total.value - end.value);\n    }\n    return getOffset(end.value, total.value);\n  });\n\n  return {\n    frontPadding,\n    behindPadding,\n    start,\n    end,\n    getStartByScroll,\n    setItemSize,\n    hasItemSize,\n    setStart,\n    getScrollOffset,\n  };\n};\n"
  },
  {
    "path": "packages/web-vue/components/_components/virtual-list-v2/index.ts",
    "content": "import VirtualList from './virtual-list.vue';\n\nexport default VirtualList;\n"
  },
  {
    "path": "packages/web-vue/components/_components/virtual-list-v2/interface.ts",
    "content": "import { VNode } from 'vue';\n\nexport type VirtualItemKey = string | number;\n\nexport interface InternalDataItem {\n  key: VirtualItemKey;\n  index: number;\n  item: unknown;\n}\n\nexport type ItemSlot = (props: { item: unknown; index: number }) => VNode[];\n\nexport interface ScrollIntoViewOptions {\n  index?: number;\n  key?: VirtualItemKey;\n  align: 'auto' | 'top' | 'bottom';\n}\n\nexport interface VirtualListProps {\n  /**\n   * @zh 可视区域高度\n   * @en Viewable area height\n   */\n  height?: number | string;\n  /**\n   * @zh 开启虚拟滚动的元素数量阈值，当数据数量小于阈值时不会开启虚拟滚动。\n   * @en The threshold of the number of elements to enable virtual scrolling. When the number of data is less than the threshold, virtual scrolling will not be enabled.\n   */\n  threshold?: number;\n  /**\n   * @zh （已废除）元素高度是否是固定的。2.34.1 版本废除，请使用 `fixedSize`\n   * @en (Repealed) Is the element height fixed. Version 2.18.0 deprecated, please use `fixedSize`\n   */\n  isStaticItemHeight?: boolean;\n  /**\n   * @zh 元素高度是否是固定的。\n   * @en Is the element height fixed.\n   * @version 2.34.1\n   */\n  fixedSize?: boolean;\n  /**\n   * @zh 元素高度不固定时的预估高度。\n   * @en Is the element height fixed.\n   * @version 2.34.1\n   */\n  estimatedSize?: number;\n  /**\n   * @zh 视口边界外提前挂载的元素数量。\n   * @en The number of elements mounted in advance outside the boundary of the viewport.\n   * @defaultValue 10\n   * @version 2.34.1\n   */\n  buffer?: number;\n  data?: unknown[];\n  itemKey?: string | ((item: unknown) => VirtualItemKey);\n  component?: keyof HTMLElementTagNameMap;\n}\n\nexport type ScrollOptions =\n  | number\n  | { index?: number; key?: VirtualItemKey; align?: 'auto' | 'top' | 'bottom' };\n\nexport interface VirtualListRef {\n  scrollTo: (options: ScrollOptions) => void;\n}\n"
  },
  {
    "path": "packages/web-vue/components/_components/virtual-list-v2/virtual-list-item.tsx",
    "content": "import {\n  cloneVNode,\n  ComponentPublicInstance,\n  defineComponent,\n  getCurrentInstance,\n  onBeforeUnmount,\n  onMounted,\n  ref,\n} from 'vue';\nimport { getFirstComponent } from '../../_utils/vue-utils';\n\nexport default defineComponent({\n  name: 'VirtualListItem',\n  props: {\n    hasItemSize: {\n      type: Function,\n      required: true,\n    },\n    setItemSize: {\n      type: Function,\n      required: true,\n    },\n  },\n  setup(props, { slots }) {\n    const key = getCurrentInstance()?.vnode.key as string | number;\n    const itemRef = ref<HTMLElement | ComponentPublicInstance>();\n\n    const setItemSize = () => {\n      // @ts-ignore\n      const ele = (itemRef.value?.$el ?? itemRef.value) as HTMLElement;\n      const height = ele?.getBoundingClientRect?.().height ?? ele?.offsetHeight;\n      if (height) {\n        props.setItemSize(key, height);\n      }\n    };\n\n    onMounted(() => setItemSize());\n    onBeforeUnmount(() => setItemSize());\n\n    return () => {\n      const child = getFirstComponent(slots.default?.());\n      if (child) {\n        return cloneVNode(\n          child,\n          {\n            ref: itemRef,\n          },\n          true\n        );\n      }\n\n      return null;\n    };\n  },\n});\n"
  },
  {
    "path": "packages/web-vue/components/_components/virtual-list-v2/virtual-list.vue",
    "content": "<template>\n  <Component\n    :is=\"mergedComponent.container\"\n    ref=\"containerRef\"\n    :class=\"prefixCls\"\n    :style=\"style\"\n    @scroll=\"onScroll\"\n  >\n    <Component\n      :is=\"mergedComponent.list\"\n      v-bind=\"listAttrs\"\n      :style=\"\n        paddingPosition === 'list'\n          ? {\n              paddingTop: `${frontPadding}px`,\n              paddingBottom: `${behindPadding}px`,\n            }\n          : {}\n      \"\n    >\n      <Component\n        :is=\"mergedComponent.content\"\n        ref=\"contentRef\"\n        v-bind=\"contentAttrs\"\n        :style=\"\n          paddingPosition === 'content'\n            ? {\n                paddingTop: `${frontPadding}px`,\n                paddingBottom: `${behindPadding}px`,\n              }\n            : {}\n        \"\n      >\n        <VirtualListItem\n          v-for=\"(item, index) of currentList\"\n          :key=\"item[itemKey] ?? start + index\"\n          :has-item-size=\"hasItemSize\"\n          :set-item-size=\"setItemSize\"\n        >\n          <slot name=\"item\" :item=\"item\" :index=\"start + index\" />\n        </VirtualListItem>\n      </Component>\n    </Component>\n  </Component>\n</template>\n\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  nextTick,\n  ref,\n  toRefs,\n  PropType,\n} from 'vue';\nimport { useSize } from './hooks/use-size';\nimport VirtualListItem from './virtual-list-item';\nimport { getPrefixCls } from '../../_utils/global-config';\nimport { ScrollOptions } from './interface';\nimport { isNumber, isObject } from '../../_utils/is';\n\nexport default defineComponent({\n  name: 'VirtualList',\n  components: { VirtualListItem },\n  props: {\n    height: {\n      type: [Number, String],\n      default: 200,\n    },\n    data: {\n      type: Array as PropType<Record<string, any>[]>,\n      default: () => [],\n    },\n    threshold: {\n      type: Number,\n      default: 0,\n    },\n    itemKey: {\n      type: String,\n      default: 'key',\n    },\n    fixedSize: {\n      type: Boolean,\n      default: false,\n    },\n    estimatedSize: {\n      type: Number,\n      default: 30,\n    },\n    buffer: {\n      type: Number,\n      default: 10,\n    },\n    component: {\n      type: [String, Object],\n      default: 'div',\n    },\n    listAttrs: {\n      type: Object,\n    },\n    contentAttrs: {\n      type: Object,\n    },\n    paddingPosition: {\n      type: String,\n      default: 'content',\n    },\n  },\n  emits: {\n    scroll: (ev: Event) => true,\n    reachBottom: (ev: Event) => true,\n  },\n  setup(props, { emit }) {\n    const { data, itemKey, fixedSize, estimatedSize, buffer, height } =\n      toRefs(props);\n    const prefixCls = getPrefixCls('virtual-list');\n    const mergedComponent = computed(() => {\n      if (isObject(props.component)) {\n        return {\n          container: 'div',\n          list: 'div',\n          content: 'div',\n          ...props.component,\n        };\n      }\n      return {\n        container: props.component,\n        list: 'div',\n        content: 'div',\n      };\n    });\n\n    const containerRef = ref<HTMLElement>();\n    const contentRef = ref<HTMLElement>();\n\n    const style = computed(() => {\n      return {\n        height: isNumber(height.value) ? `${height.value}px` : height.value,\n        overflow: 'auto',\n      };\n    });\n\n    const dataKeys = computed(() =>\n      data.value.map((item: any, index) => {\n        return (item[itemKey.value] ?? index) as string | number;\n      })\n    );\n\n    const {\n      frontPadding,\n      behindPadding,\n      start,\n      end,\n      getStartByScroll,\n      setItemSize,\n      hasItemSize,\n      setStart,\n      getScrollOffset,\n    } = useSize({\n      dataKeys,\n      contentRef,\n      fixedSize,\n      estimatedSize,\n      buffer,\n    });\n\n    const currentList = computed(() => {\n      if (props.threshold && data.value.length <= props.threshold) {\n        return data.value;\n      }\n\n      return data.value.slice(start.value, end.value);\n    });\n\n    const onScroll = (ev: Event) => {\n      const { scrollTop, scrollHeight, offsetHeight } =\n        ev.target as HTMLElement;\n      const _start = getStartByScroll(scrollTop);\n      if (_start !== start.value) {\n        setStart(_start);\n        nextTick(() => {\n          scrollTo(scrollTop);\n        });\n      }\n      emit('scroll', ev);\n      const bottom = Math.floor(scrollHeight - (scrollTop + offsetHeight));\n      if (bottom <= 0) {\n        emit('reachBottom', ev);\n      }\n    };\n\n    const scrollTo = (options: ScrollOptions) => {\n      if (containerRef.value) {\n        if (isNumber(options)) {\n          containerRef.value.scrollTop = options;\n        } else {\n          const { align = 'top' } = options;\n          const _index =\n            options.index ?? dataKeys.value.indexOf(options.key ?? '');\n          setStart(_index - buffer.value);\n          containerRef.value.scrollTop = getScrollOffset(_index);\n          nextTick(() => {\n            if (containerRef.value) {\n              const _scrollTop = getScrollOffset(_index);\n              if (_scrollTop !== containerRef.value.scrollTop) {\n                containerRef.value.scrollTop = _scrollTop;\n              }\n            }\n          });\n        }\n      }\n    };\n\n    return {\n      prefixCls,\n      containerRef,\n      contentRef,\n      frontPadding,\n      currentList,\n      behindPadding,\n      onScroll,\n      setItemSize,\n      hasItemSize,\n      start,\n      scrollTo,\n      style,\n      mergedComponent,\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/_hooks/use-children-components.ts",
    "content": "import { onMounted, onUpdated, ref } from 'vue';\nimport { SlotChildren } from '../_utils/types';\nimport { getComponentsFromChildren } from '../_utils/vue-utils';\n\nexport const useChildrenComponents = (name: string) => {\n  // only save VNodes reference, not use ref\n  const children: SlotChildren = {};\n  const components = ref<number[]>([]);\n\n  const getComponents = () => {\n    if (children.value) {\n      const _components = getComponentsFromChildren(children.value, name);\n      if (\n        _components.length !== components.value.length ||\n        _components.toString() !== components.value.toString()\n      ) {\n        components.value = _components;\n      }\n    }\n  };\n\n  onMounted(() => getComponents());\n\n  onUpdated(() => getComponents());\n\n  return {\n    children,\n    components,\n  };\n};\n"
  },
  {
    "path": "packages/web-vue/components/_hooks/use-component-ref.ts",
    "content": "import { ComponentPublicInstance, onMounted, ref, watch } from 'vue';\nimport { isComponentInstance } from '../_utils/is';\n\nexport const useComponentRef = (name: string) => {\n  const componentRef = ref<HTMLElement | ComponentPublicInstance>();\n\n  const getElement = () => {\n    if (isComponentInstance(componentRef.value)) {\n      return componentRef.value.$refs[name] as HTMLElement;\n    }\n    return componentRef.value;\n  };\n\n  const elementRef = ref();\n\n  onMounted(() => {\n    elementRef.value = getElement();\n  });\n\n  watch([componentRef], () => {\n    elementRef.value = getElement();\n  });\n\n  return {\n    componentRef,\n    elementRef,\n  };\n};\n"
  },
  {
    "path": "packages/web-vue/components/_hooks/use-cursor.ts",
    "content": "import { ref, Ref } from 'vue';\n\n// Refer to Element Plus\nexport function useCursor(\n  input: Ref<HTMLInputElement | undefined>\n): [() => void, () => void] {\n  const selectionRef = ref<{\n    selectionStart?: number;\n    selectionEnd?: number;\n    value?: string;\n    beforeTxt?: string;\n    afterTxt?: string;\n  }>();\n\n  function recordCursor() {\n    if (!input.value) return;\n\n    const { selectionStart, selectionEnd, value } = input.value;\n\n    if (selectionStart == null || selectionEnd == null) return;\n\n    const beforeTxt = value.slice(0, Math.max(0, selectionStart));\n    const afterTxt = value.slice(Math.max(0, selectionEnd));\n\n    selectionRef.value = {\n      selectionStart,\n      selectionEnd,\n      value,\n      beforeTxt,\n      afterTxt,\n    };\n  }\n\n  function setCursor() {\n    if (!input.value || !selectionRef.value) return;\n\n    const { value } = input.value;\n    const { beforeTxt, afterTxt, selectionStart } = selectionRef.value;\n\n    if (!beforeTxt || !afterTxt || !selectionStart) return;\n\n    let startPos = value.length;\n\n    if (value.endsWith(afterTxt)) {\n      // get from after\n      startPos = value.length - afterTxt.length;\n    } else if (value.startsWith(beforeTxt)) {\n      // get from before\n      startPos = beforeTxt.length;\n    } else {\n      const beforeLastChar = beforeTxt[selectionStart - 1];\n      const newIndex = value.indexOf(beforeLastChar, selectionStart - 1);\n      if (newIndex !== -1) {\n        startPos = newIndex + 1;\n      }\n    }\n\n    input.value.setSelectionRange(startPos, startPos);\n  }\n\n  return [recordCursor, setCursor];\n}\n"
  },
  {
    "path": "packages/web-vue/components/_hooks/use-first-element.ts",
    "content": "import { onMounted, onUpdated, ref } from 'vue';\nimport { getFirstElementFromChildren } from '../_utils/vue-utils';\nimport { SlotChildren } from '../_utils/types';\n\nexport const useFirstElement = () => {\n  // only save VNodes reference, not use ref\n  const children: SlotChildren = {};\n  const firstElement = ref<HTMLElement>();\n\n  const getFirstElement = () => {\n    const element = getFirstElementFromChildren(children.value);\n    if (element !== firstElement.value) {\n      firstElement.value = element;\n    }\n  };\n\n  onMounted(() => getFirstElement());\n\n  onUpdated(() => getFirstElement());\n\n  return {\n    children,\n    firstElement,\n  };\n};\n"
  },
  {
    "path": "packages/web-vue/components/_hooks/use-form-item.ts",
    "content": "import { computed, inject, Ref, toRef } from 'vue';\nimport { FormItemContext, formItemInjectionKey } from '../form/context';\nimport { Size } from '../_utils/constant';\n\nexport const useFormItem = ({\n  size,\n  disabled,\n  error,\n  uninject,\n}: {\n  size?: Ref<Size | undefined>;\n  disabled?: Ref<boolean>;\n  error?: Ref<boolean>;\n  // private\n  uninject?: boolean;\n} = {}) => {\n  const formItemCtx = !uninject\n    ? inject(formItemInjectionKey, {} as FormItemContext)\n    : ({} as FormItemContext);\n\n  const mergedSize = computed(() => size?.value ?? formItemCtx.size);\n\n  const mergedDisabled = computed(\n    () => disabled?.value || formItemCtx.disabled\n  );\n\n  const mergedError = computed(() => error?.value || formItemCtx.error);\n\n  const feedback = toRef(formItemCtx, 'feedback');\n  const eventHandlers = toRef(formItemCtx, 'eventHandlers');\n\n  return {\n    formItemCtx,\n    mergedSize,\n    mergedDisabled,\n    mergedError,\n    feedback,\n    eventHandlers,\n  };\n};\n"
  },
  {
    "path": "packages/web-vue/components/_hooks/use-index.ts",
    "content": "import type { Ref } from 'vue';\nimport { computed, onMounted, onUpdated, ref, watch } from 'vue';\nimport { isUndefined } from '../_utils/is';\n\nexport const useIndex = ({\n  itemRef,\n  selector,\n  index,\n  parentClassName,\n}: {\n  itemRef: Ref<HTMLElement | undefined>;\n  selector: string;\n  index?: Ref<number | undefined>;\n  parentClassName?: string;\n}) => {\n  const _index = ref(-1);\n  const computedIndex = computed(() => index?.value ?? _index.value);\n\n  const parent = ref<HTMLElement>();\n\n  const getParent = () => {\n    let parent = itemRef.value?.parentElement ?? undefined;\n    if (parentClassName) {\n      while (parent && !parent.className.includes(parentClassName)) {\n        parent = parent.parentElement ?? undefined;\n      }\n    }\n    return parent;\n  };\n\n  const getIndex = () => {\n    if (isUndefined(index?.value) && parent.value && itemRef.value) {\n      const index = Array.from(parent.value.querySelectorAll(selector)).indexOf(\n        itemRef.value\n      );\n      if (index !== _index.value) {\n        _index.value = index;\n      }\n    }\n  };\n\n  watch(itemRef, () => {\n    if (itemRef.value && !parent.value) {\n      parent.value = getParent();\n    }\n  });\n\n  onMounted(() => {\n    if (itemRef.value) {\n      parent.value = getParent();\n    }\n    getIndex();\n  });\n  onUpdated(() => getIndex());\n\n  return {\n    computedIndex,\n  };\n};\n"
  },
  {
    "path": "packages/web-vue/components/_hooks/use-input.ts",
    "content": "import { computed, nextTick, Ref, ref, watch } from 'vue';\nimport { Enter } from '../_utils/keycode';\nimport { EmitFn } from '../_utils/types';\nimport { FormItemEventHandler } from '../form/interface';\n\nexport const useInput = ({\n  defaultValue,\n  modelValue,\n  emit,\n  eventName = 'input',\n  updateEventName = 'update:modelValue',\n  eventHandlers,\n}: {\n  defaultValue?: Ref<string>;\n  modelValue?: Ref<string>;\n  emit: EmitFn<any>;\n  eventName?: string;\n  updateEventName?: string;\n  eventHandlers?: Ref<FormItemEventHandler>;\n}) => {\n  const inputRef = ref<HTMLInputElement>();\n\n  const _value = ref(defaultValue?.value ?? '');\n  const _focused = ref(false);\n\n  const isComposition = ref(false);\n  const compositionValue = ref('');\n\n  let initialValue: string;\n\n  const computedValue = computed(() => modelValue?.value ?? _value.value);\n\n  const updateValue = (value: string, ev: Event) => {\n    _value.value = value;\n    emit(updateEventName, value);\n    emit(eventName, value, ev);\n  };\n\n  const handleInput = (ev: Event) => {\n    const { value } = ev.target as HTMLInputElement;\n\n    if (!isComposition.value) {\n      updateValue(value, ev);\n\n      nextTick(() => {\n        if (inputRef.value && computedValue.value !== inputRef.value.value) {\n          inputRef.value.value = computedValue.value;\n        }\n      });\n    }\n  };\n\n  const handleChange = (ev: Event) => {\n    if (eventName === 'input' && computedValue.value !== initialValue) {\n      initialValue = computedValue.value;\n      emit('change', computedValue.value, ev);\n    }\n  };\n\n  const handleComposition = (ev: CompositionEvent) => {\n    const { value } = ev.target as HTMLInputElement;\n\n    if (ev.type === 'compositionend') {\n      isComposition.value = false;\n      compositionValue.value = '';\n      updateValue(value, ev);\n\n      nextTick(() => {\n        if (inputRef.value && computedValue.value !== inputRef.value.value) {\n          inputRef.value.value = computedValue.value;\n        }\n      });\n    } else {\n      isComposition.value = true;\n      compositionValue.value = computedValue.value + (ev.data ?? '');\n    }\n  };\n\n  const handleFocus = (ev: FocusEvent) => {\n    _focused.value = true;\n    initialValue = computedValue.value;\n    emit('focus', ev);\n    eventHandlers?.value?.onFocus?.(ev);\n  };\n\n  const handleBlur = (ev: FocusEvent) => {\n    _focused.value = false;\n    emit('blur', ev);\n    eventHandlers?.value?.onBlur?.(ev);\n    handleChange(ev);\n  };\n\n  const handleKeyDown = (ev: KeyboardEvent) => {\n    const keyCode = ev.key || ev.code;\n    if (!isComposition.value && keyCode === Enter.key) {\n      emit('pressEnter', ev);\n      handleChange(ev);\n    }\n  };\n\n  // used for input wrapper\n  const handleMousedown = (ev: MouseEvent) => {\n    if (inputRef.value && ev.target !== inputRef.value) {\n      ev.preventDefault();\n      inputRef.value.focus();\n    }\n  };\n\n  watch(computedValue, (value) => {\n    if (inputRef.value && value !== inputRef.value.value) {\n      inputRef.value.value = value;\n    }\n  });\n\n  return {\n    inputRef,\n    _value,\n    _focused,\n    isComposition,\n    compositionValue,\n    computedValue,\n    handleInput,\n    handleComposition,\n    handleFocus,\n    handleBlur,\n    handleKeyDown,\n    handleMousedown,\n  };\n};\n"
  },
  {
    "path": "packages/web-vue/components/_hooks/use-merge-state.ts",
    "content": "import { Ref, toRefs, computed, watch, ComputedRef } from 'vue';\nimport { isUndefined } from '../_utils/is';\nimport useState from './use-state';\n\nexport default function useMergeState<T, E = T | undefined>(\n  defaultValue: T,\n  props: { value: E }\n): [ComputedRef<T>, (val: E) => void, Ref<T>] {\n  const { value } = toRefs(props);\n  const [localValue, setLocalValue] = useState(\n    !isUndefined(value.value) ? value.value : defaultValue\n  );\n  watch(value, (newVal) => {\n    isUndefined(newVal) && setLocalValue(undefined);\n  });\n\n  const mergeValue = computed(() =>\n    !isUndefined(value.value) ? value.value : localValue.value\n  );\n\n  return [mergeValue, setLocalValue, localValue];\n}\n"
  },
  {
    "path": "packages/web-vue/components/_hooks/use-overflow.ts",
    "content": "import { Ref, ref } from 'vue';\nimport { getScrollBarWidth, isScroll } from '../_utils/dom';\n\nexport const useOverflow = (elementRef: Ref<HTMLElement | undefined>) => {\n  const isSetOverflow = ref(false);\n\n  const originStyle = {\n    overflow: '',\n    width: '',\n    boxSizing: '',\n  };\n\n  const setOverflowHidden = () => {\n    if (elementRef.value) {\n      const element = elementRef.value;\n      if (!isSetOverflow.value && element.style.overflow !== 'hidden') {\n        const scrollBarWidth = getScrollBarWidth(element);\n        if (scrollBarWidth > 0 || isScroll(element)) {\n          originStyle.overflow = element.style.overflow;\n          originStyle.width = element.style.width;\n          originStyle.boxSizing = element.style.boxSizing;\n          element.style.overflow = 'hidden';\n          element.style.width = `${element.offsetWidth - scrollBarWidth}px`;\n          element.style.boxSizing = 'border-box';\n\n          isSetOverflow.value = true;\n        }\n      }\n    }\n  };\n\n  const resetOverflow = () => {\n    if (elementRef.value && isSetOverflow.value) {\n      const element = elementRef.value;\n      element.style.overflow = originStyle.overflow;\n      element.style.width = originStyle.width;\n      element.style.boxSizing = originStyle.boxSizing;\n\n      isSetOverflow.value = false;\n    }\n  };\n\n  return {\n    setOverflowHidden,\n    resetOverflow,\n  };\n};\n"
  },
  {
    "path": "packages/web-vue/components/_hooks/use-pagination.ts",
    "content": "import { computed, ref } from 'vue';\nimport { isObject } from '../_utils/is';\n\nexport const usePagination = (props: any, { emit }: { emit: any }) => {\n  const _current = ref(\n    isObject(props.pagination) ? props.pagination.defaultCurrent ?? 1 : 1\n  );\n  const _pageSize = ref(\n    isObject(props.pagination) ? props.pagination.defaultPageSize ?? 10 : 10\n  );\n\n  const current = computed(() =>\n    isObject(props.pagination)\n      ? props.pagination.current ?? _current.value\n      : _current.value\n  );\n\n  const pageSize = computed(() =>\n    isObject(props.pagination)\n      ? props.pagination.pageSize ?? _pageSize.value\n      : _pageSize.value\n  );\n\n  const handlePageChange = (page: number) => {\n    _current.value = page;\n    emit('pageChange', page);\n  };\n\n  const handlePageSizeChange = (pageSize: number) => {\n    _pageSize.value = pageSize;\n    emit('pageSizeChange', pageSize);\n  };\n\n  return {\n    current,\n    pageSize,\n    handlePageChange,\n    handlePageSizeChange,\n  };\n};\n"
  },
  {
    "path": "packages/web-vue/components/_hooks/use-pick-slots.ts",
    "content": "import { onUpdated, ref, Slots } from 'vue';\n\nexport default function usePickSlots(slots: Slots, slotName: string) {\n  const slot = ref(slots[slotName]);\n\n  onUpdated(() => {\n    const newSlot = slots[slotName];\n    if (slot.value !== newSlot) {\n      slot.value = newSlot;\n    }\n  });\n\n  return slot;\n}\n"
  },
  {
    "path": "packages/web-vue/components/_hooks/use-popup-container.ts",
    "content": "import { toRefs, computed, ComputedRef } from 'vue';\nimport { querySelector } from '../_utils/dom';\nimport { isString } from '../_utils/is';\n\ninterface PopupContainerProps {\n  popupContainer: string | HTMLElement | undefined;\n}\nexport default function usePopupContainer(\n  defaultPopupContainer: HTMLElement,\n  props: PopupContainerProps\n) {\n  const { popupContainer } = toRefs(props);\n\n  const container = computed(\n    () =>\n      (isString(popupContainer.value)\n        ? querySelector(popupContainer.value)\n        : popupContainer.value) || defaultPopupContainer\n  );\n\n  return container as ComputedRef<HTMLElement>;\n}\n"
  },
  {
    "path": "packages/web-vue/components/_hooks/use-popup-manager.ts",
    "content": "import { onMounted, onBeforeUnmount, readonly, Ref, ref, watch } from 'vue';\n\nexport type PopupType = 'popup' | 'dialog' | 'message';\n\nconst POPUP_BASE_Z_INDEX = 1000;\nconst MESSAGE_BASE_Z_INDEX = 5000;\nconst Z_INDEX_STEP = 1;\n\nclass PopupManager {\n  private popupStack = {\n    popup: new Set<number>(),\n    dialog: new Set<number>(),\n    message: new Set<number>(),\n  };\n\n  private getNextZIndex = (type: PopupType) => {\n    const current =\n      type === 'message'\n        ? Array.from(this.popupStack.message).pop() || MESSAGE_BASE_Z_INDEX\n        : Array.from(this.popupStack.popup).pop() || POPUP_BASE_Z_INDEX;\n    return current + Z_INDEX_STEP;\n  };\n\n  public add = (type: PopupType) => {\n    const zIndex = this.getNextZIndex(type);\n    this.popupStack[type].add(zIndex);\n    if (type === 'dialog') {\n      this.popupStack.popup.add(zIndex);\n    }\n    return zIndex;\n  };\n\n  public delete = (zIndex: number, type: PopupType) => {\n    this.popupStack[type].delete(zIndex);\n    if (type === 'dialog') {\n      this.popupStack.popup.delete(zIndex);\n    }\n  };\n\n  public isLastDialog = (zIndex: number) => {\n    if (this.popupStack.dialog.size > 1) {\n      return zIndex === Array.from(this.popupStack.dialog).pop();\n    }\n    return true;\n  };\n}\n\nconst popupManager = new PopupManager();\n\nexport default function usePopupManager(\n  type: PopupType,\n  {\n    visible,\n    runOnMounted,\n  }: {\n    visible?: Ref<boolean>;\n    runOnMounted?: boolean;\n  } = {}\n) {\n  const zIndex = ref(0);\n\n  const open = () => {\n    zIndex.value = popupManager.add(type);\n  };\n\n  const close = () => {\n    popupManager.delete(zIndex.value, type);\n  };\n\n  const isLastDialog = () => {\n    if (type === 'dialog') {\n      return popupManager.isLastDialog(zIndex.value);\n    }\n    return false;\n  };\n\n  watch(\n    () => visible?.value,\n    (visible) => {\n      if (visible) {\n        open();\n      } else {\n        close();\n      }\n    },\n    {\n      immediate: true,\n    }\n  );\n\n  if (runOnMounted) {\n    onMounted(() => {\n      open();\n    });\n\n    onBeforeUnmount(() => {\n      close();\n    });\n  }\n\n  return {\n    zIndex: readonly(zIndex),\n    open,\n    close,\n    isLastDialog,\n  };\n}\n"
  },
  {
    "path": "packages/web-vue/components/_hooks/use-popup-overflow-hidden.ts",
    "content": "import { toRefs, watchEffect } from 'vue';\n\ninterface PopupOverflowHiddenProps {\n  container: HTMLElement | undefined;\n  hidden: boolean;\n}\n\nexport default function usePopupOverflowHidden(\n  props: PopupOverflowHiddenProps\n) {\n  const { container, hidden } = toRefs(props);\n\n  let needResetContainerStyle = false;\n  let originContainerStyle: Partial<CSSStyleDeclaration> = {};\n\n  const getScrollBarWidth = (element: HTMLElement) => {\n    return element.tagName === 'BODY'\n      ? window.innerWidth -\n          (document.body.clientWidth || document.documentElement.clientWidth)\n      : element.offsetWidth - element.clientWidth;\n  };\n\n  const setContainerStyle = () => {\n    if (container.value && container.value.style.overflow !== 'hidden') {\n      const originStyle = container.value.style;\n      needResetContainerStyle = true;\n\n      // Record and set the width\n      const containerScrollBarWidth = getScrollBarWidth(container.value);\n      if (containerScrollBarWidth) {\n        originContainerStyle.width = originStyle.width;\n        container.value.style.width = `calc(${\n          container.value.style.width || '100%'\n        } - ${containerScrollBarWidth}px)`;\n      }\n\n      // Record and set overflow\n      originContainerStyle.overflow = originStyle.overflow;\n      container.value.style.overflow = 'hidden';\n    }\n  };\n\n  const resetContainerStyle = () => {\n    if (container.value && needResetContainerStyle) {\n      const originStyle = originContainerStyle;\n      Object.keys(originStyle).forEach((i) => {\n        // @ts-ignore-next-line\n        container.value.style[i] = originStyle[i];\n      });\n    }\n    needResetContainerStyle = false;\n    originContainerStyle = {};\n  };\n\n  watchEffect((onInvalidate) => {\n    hidden.value ? setContainerStyle() : resetContainerStyle();\n\n    onInvalidate(() => {\n      resetContainerStyle();\n    });\n  });\n\n  return [resetContainerStyle, setContainerStyle];\n}\n"
  },
  {
    "path": "packages/web-vue/components/_hooks/use-pure-prop.ts",
    "content": "import { ref, toRef, watch } from 'vue';\nimport { isEqual } from '../_utils/is-equal';\n\nexport const usePureProp = <\n  T extends Record<string, unknown>,\n  K extends keyof T\n>(\n  props: T,\n  name: K\n) => {\n  const _value = toRef(props, name);\n  const value = ref<T[K]>(_value.value);\n  watch(_value, (cur, pre) => {\n    if (!isEqual(cur, pre)) {\n      value.value = cur;\n    }\n  });\n  return value;\n};\n"
  },
  {
    "path": "packages/web-vue/components/_hooks/use-resize-observer.ts",
    "content": "import { Ref } from 'vue';\nimport ResizeObserver from 'resize-observer-polyfill';\nimport { isFunction } from '../_utils/is';\n\nexport const useResizeObserver = ({\n  elementRef,\n  onResize,\n}: {\n  elementRef: Ref<HTMLElement | undefined>;\n  onResize: () => void;\n}) => {\n  let resizeObserver: ResizeObserver | null;\n\n  const createResizeObserver = () => {\n    if (!elementRef.value) return;\n    resizeObserver = new ResizeObserver((entries: ResizeObserverEntry[]) => {\n      const entry = entries[0];\n      isFunction(onResize) && onResize(entry);\n    });\n    resizeObserver.observe(elementRef.value);\n  };\n\n  const destroyResizeObserver = () => {\n    if (resizeObserver) {\n      resizeObserver.disconnect();\n      resizeObserver = null;\n    }\n  };\n\n  return {\n    createResizeObserver,\n    destroyResizeObserver,\n  };\n};\n"
  },
  {
    "path": "packages/web-vue/components/_hooks/use-responsive.ts",
    "content": "import { onUnmounted, Ref, isRef, computed, onMounted } from 'vue';\nimport ResponsiveObserve, { Breakpoint } from '../_utils/responsive-observe';\n\nexport function useResponsive(\n  breakpoint: Breakpoint | undefined | Ref<Breakpoint | undefined>,\n  callback: (checked: boolean) => void\n) {\n  const resultBreakpoint = computed(() =>\n    isRef(breakpoint) ? breakpoint.value : breakpoint\n  );\n  // Subscription Responsive\n  let subscribeToken = '';\n  onMounted(() => {\n    subscribeToken = ResponsiveObserve.subscribe(\n      (screens, breakpointChecked) => {\n        if (!resultBreakpoint.value) return;\n        if (\n          !breakpointChecked ||\n          breakpointChecked === resultBreakpoint.value\n        ) {\n          callback(!!screens[resultBreakpoint.value]);\n        }\n      }\n    );\n  });\n  // Unsubscribe\n  onUnmounted(() => {\n    if (subscribeToken) {\n      ResponsiveObserve.unsubscribe(subscribeToken);\n    }\n  });\n}\n"
  },
  {
    "path": "packages/web-vue/components/_hooks/use-scrollbar.ts",
    "content": "import { computed, Ref } from 'vue';\nimport { ScrollbarProps } from '../scrollbar';\nimport { isBoolean } from '../_utils/is';\n\nexport const useScrollbar = (scrollbar: Ref<ScrollbarProps | boolean>) => {\n  const displayScrollbar = computed(() => Boolean(scrollbar.value));\n\n  const scrollbarProps = computed(() => {\n    if (!scrollbar.value) return undefined;\n    return {\n      type: 'embed',\n      ...(isBoolean(scrollbar.value) ? undefined : scrollbar.value),\n    } as ScrollbarProps;\n  });\n\n  return {\n    displayScrollbar,\n    scrollbarProps,\n  };\n};\n"
  },
  {
    "path": "packages/web-vue/components/_hooks/use-size.ts",
    "content": "import { computed, inject, Ref } from 'vue';\nimport { Size } from '../_utils/constant';\nimport { configProviderInjectionKey } from '../config-provider/context';\n\nexport const useSize = (\n  size?: Ref<Size | undefined>,\n  { defaultValue = 'medium' }: { defaultValue?: Size } = {}\n) => {\n  const configProviderCtx = inject(configProviderInjectionKey, undefined);\n\n  const mergedSize = computed(\n    () => size?.value ?? configProviderCtx?.size ?? defaultValue\n  );\n\n  return {\n    mergedSize,\n  };\n};\n"
  },
  {
    "path": "packages/web-vue/components/_hooks/use-state.ts",
    "content": "import { Ref, ref } from 'vue';\n\nexport default function useState<T>(\n  defaultValue?: T\n): [Ref<T>, (newValue: T) => void] {\n  const value = ref(defaultValue) as Ref<T>;\n  const setValue = (newValue: T) => {\n    value.value = newValue;\n  };\n\n  return [value, setValue];\n}\n"
  },
  {
    "path": "packages/web-vue/components/_hooks/use-teleport-container.ts",
    "content": "import { onMounted, Ref, ref, watch } from 'vue';\nimport { getElement } from '../_utils/dom';\n\nexport const useTeleportContainer = ({\n  popupContainer,\n  visible,\n  defaultContainer = 'body',\n  documentContainer,\n}: {\n  popupContainer: Ref<string | HTMLElement | undefined>;\n  visible: Ref<boolean>;\n  defaultContainer?: string;\n  documentContainer?: boolean;\n}) => {\n  const teleportContainer = ref(popupContainer.value);\n  const containerRef = ref<HTMLElement>();\n\n  const getContainer = () => {\n    const element = getElement(popupContainer.value);\n    const _teleportContainer = element\n      ? popupContainer.value\n      : defaultContainer;\n    const _containerElement =\n      element ??\n      (documentContainer\n        ? document.documentElement\n        : getElement(defaultContainer));\n    if (_teleportContainer !== teleportContainer.value) {\n      teleportContainer.value = _teleportContainer;\n    }\n    if (_containerElement !== containerRef.value) {\n      containerRef.value = _containerElement;\n    }\n  };\n\n  onMounted(() => getContainer());\n\n  watch(visible, (visible) => {\n    if (teleportContainer.value !== popupContainer.value && visible) {\n      getContainer();\n    }\n  });\n\n  return {\n    teleportContainer,\n    containerRef,\n  };\n};\n"
  },
  {
    "path": "packages/web-vue/components/_hooks/use-trigger.ts",
    "content": "import type { Ref } from 'vue';\nimport { computed, ref, watch } from 'vue';\nimport type { EmitFn2 } from '../_utils/types';\n\nexport const useTrigger = ({\n  popupVisible,\n  defaultPopupVisible,\n  emit,\n}: {\n  popupVisible?: Ref<boolean | undefined>;\n  defaultPopupVisible?: Ref<boolean>;\n  emit: EmitFn2<{\n    'update:popupVisible': (visible: boolean) => true;\n    'popupVisibleChange': (visible: boolean) => true;\n  }>;\n}) => {\n  const _popupVisible = ref(defaultPopupVisible?.value ?? false);\n  const computedPopupVisible = computed(\n    () => popupVisible?.value ?? _popupVisible.value\n  );\n\n  const handlePopupVisibleChange = (visible: boolean) => {\n    if (visible !== computedPopupVisible.value) {\n      _popupVisible.value = visible;\n      emit('update:popupVisible', visible);\n      emit('popupVisibleChange', visible);\n    }\n  };\n\n  watch(computedPopupVisible, (visible) => {\n    if (_popupVisible.value !== visible) {\n      _popupVisible.value = visible;\n    }\n  });\n\n  return {\n    computedPopupVisible,\n    handlePopupVisibleChange,\n  };\n};\n"
  },
  {
    "path": "packages/web-vue/components/_utils/array.ts",
    "content": "export const union = <T>(target: T[], source: T[], difference = false): T[] => {\n  return difference\n    ? target.filter((item) => !source.includes(item))\n    : Array.from(new Set(target.concat(source)));\n};\n\nexport const getReverse = <T>(array: T[]): T[] => {\n  const result: T[] = [];\n  for (let i = 0; i < array.length; i++) {\n    result[i] = array[array.length - 1 - i];\n  }\n  return result;\n};\n"
  },
  {
    "path": "packages/web-vue/components/_utils/clipboard.ts",
    "content": "// https://github.com/feross/clipboard-copy/blob/master/index.js\n\nexport const clipboard = async (text: string) => {\n  if (navigator.clipboard?.writeText) {\n    try {\n      await navigator.clipboard.writeText(text);\n      return;\n    } catch (err) {\n      // eslint-disable-next-line no-console\n      console.error(\n        err ?? new DOMException('The request is not allowed', 'NotAllowedError')\n      );\n    }\n  }\n\n  const span = document.createElement('span');\n  span.textContent = text;\n\n  span.style.whiteSpace = 'pre';\n\n  document.body.appendChild(span);\n\n  const selection = window.getSelection();\n  const range = window.document.createRange();\n  selection?.removeAllRanges();\n  range.selectNode(span);\n  selection?.addRange(range);\n\n  try {\n    window.document.execCommand('copy');\n  } catch (err) {\n    // eslint-disable-next-line no-console\n    console.error(`execCommand Error: ${err}`);\n  }\n\n  selection?.removeAllRanges();\n  window.document.body.removeChild(span);\n};\n"
  },
  {
    "path": "packages/web-vue/components/_utils/color.ts",
    "content": "// https://github.com/scttcper/tinycolor\nexport const hsvToRgb = (h: number, s: number, v: number) => {\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const mod = i % 6;\n  const r = [v, q, p, p, t, v][mod];\n  const g = [t, v, v, q, p, p][mod];\n  const b = [p, p, t, v, v, q][mod];\n\n  return {\n    r: Math.round(r * 255),\n    g: Math.round(g * 255),\n    b: Math.round(b * 255),\n  };\n};\n\nexport const rgbToHsv = (r: number, g: number, b: number) => {\n  r /= 255;\n  g /= 255;\n  b /= 255;\n\n  const max = Math.max(r, g, b);\n  const min = Math.min(r, g, b);\n  let h = 0;\n  const v = max;\n  const d = max - min;\n  const s = max === 0 ? 0 : d / max;\n\n  if (max === min) {\n    h = 0;\n  } else {\n    switch (max) {\n      case r:\n        h = (g - b) / d + (g < b ? 6 : 0);\n        break;\n      case g:\n        h = (b - r) / d + 2;\n        break;\n      case b:\n        h = (r - g) / d + 4;\n        break;\n      default:\n        break;\n    }\n\n    h /= 6;\n  }\n\n  return { h, s, v };\n};\n\n// <http://www.w3.org/TR/css3-values/#integers>\nconst CSS_INTEGER = '[-\\\\+]?\\\\d+%?';\n\n// <http://www.w3.org/TR/css3-values/#number-value>\nconst CSS_NUMBER = '[-\\\\+]?\\\\d*\\\\.\\\\d+%?';\n\n// Allow positive/negative integer/number.  Don't capture the either/or, just the entire outcome.\nconst CSS_UNIT = `(?:${CSS_NUMBER})|(?:${CSS_INTEGER})`;\n\n// Actual matching.\n// Parentheses and commas are optional, but not required.\n// Whitespace can take the place of commas or opening paren\nconst PERMISSIVE_MATCH3 = `[\\\\s|\\\\(]+(${CSS_UNIT})[,|\\\\s]+(${CSS_UNIT})[,|\\\\s]+(${CSS_UNIT})\\\\s*\\\\)?`;\nconst PERMISSIVE_MATCH4 = `[\\\\s|\\\\(]+(${CSS_UNIT})[,|\\\\s]+(${CSS_UNIT})[,|\\\\s]+(${CSS_UNIT})[,|\\\\s]+(${CSS_UNIT})\\\\s*\\\\)?`;\n\nconst matchers = {\n  rgb: new RegExp(`rgb${PERMISSIVE_MATCH3}`),\n  rgba: new RegExp(`rgba${PERMISSIVE_MATCH4}`),\n  hex3: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,\n  hex6: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/,\n  hex4: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,\n  hex8: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/,\n};\n\nexport const parseIntFromHex = (val: string): number => {\n  return parseInt(val, 16);\n};\n\nexport const convertHexToDecimal = (h: string): number => {\n  return parseIntFromHex(h) / 255;\n};\n\nexport const formatInputToRgb = (\n  color: string\n): { r: number; g: number; b: number; a?: number } | false => {\n  let match = matchers.rgb.exec(color);\n  if (match) {\n    return {\n      r: parseInt(match[1], 10),\n      g: parseInt(match[2], 10),\n      b: parseInt(match[3], 10),\n    };\n  }\n\n  match = matchers.rgba.exec(color);\n  if (match) {\n    return {\n      r: parseInt(match[1], 10),\n      g: parseInt(match[2], 10),\n      b: parseInt(match[3], 10),\n      a: parseFloat(match[4]),\n    };\n  }\n\n  match = matchers.hex8.exec(color);\n  if (match) {\n    return {\n      r: parseIntFromHex(match[1]),\n      g: parseIntFromHex(match[2]),\n      b: parseIntFromHex(match[3]),\n      a: convertHexToDecimal(match[4]),\n    };\n  }\n\n  match = matchers.hex6.exec(color);\n  if (match) {\n    return {\n      r: parseIntFromHex(match[1]),\n      g: parseIntFromHex(match[2]),\n      b: parseIntFromHex(match[3]),\n    };\n  }\n\n  match = matchers.hex4.exec(color);\n  if (match) {\n    return {\n      r: parseIntFromHex(match[1] + match[1]),\n      g: parseIntFromHex(match[2] + match[2]),\n      b: parseIntFromHex(match[3] + match[3]),\n      a: convertHexToDecimal(match[4] + match[4]),\n    };\n  }\n\n  match = matchers.hex3.exec(color);\n  if (match) {\n    return {\n      r: parseIntFromHex(match[1] + match[1]),\n      g: parseIntFromHex(match[2] + match[2]),\n      b: parseIntFromHex(match[3] + match[3]),\n    };\n  }\n\n  return false;\n};\n\nexport const formatInputToHSVA = (color: string) => {\n  const rgba = formatInputToRgb(color);\n  if (rgba) {\n    const hsv = rgbToHsv(rgba.r, rgba.g, rgba.b);\n    return {\n      ...hsv,\n      a: rgba.a ?? 1,\n    };\n  }\n  return {\n    h: 0,\n    s: 1,\n    v: 1,\n    a: 1,\n  };\n};\n\nexport const hexToRgb = (color: string): any => {\n  color = color.trim().toLowerCase();\n  if (color.length === 0) {\n    return false;\n  }\n\n  let match = matchers.hex6.exec(color);\n  if (match) {\n    return {\n      r: parseIntFromHex(match[1]),\n      g: parseIntFromHex(match[2]),\n      b: parseIntFromHex(match[3]),\n    };\n  }\n\n  match = matchers.hex3.exec(color);\n  if (match) {\n    return {\n      r: parseIntFromHex(match[1] + match[1]),\n      g: parseIntFromHex(match[2] + match[2]),\n      b: parseIntFromHex(match[3] + match[3]),\n    };\n  }\n\n  return false;\n};\n\nexport const rgbToHex = (r: number, g: number, b: number) => {\n  const hex = [\n    Math.round(r).toString(16).padStart(2, '0'),\n    Math.round(g).toString(16).padStart(2, '0'),\n    Math.round(b).toString(16).padStart(2, '0'),\n  ];\n\n  return hex.join('').toUpperCase();\n};\n\nexport const rgbaToHex = (r: number, g: number, b: number, a: number) => {\n  const hex = [\n    Math.round(r).toString(16).padStart(2, '0'),\n    Math.round(g).toString(16).padStart(2, '0'),\n    Math.round(b).toString(16).padStart(2, '0'),\n    Math.round(a * 255)\n      .toString(16)\n      .padStart(2, '0'),\n  ];\n\n  return hex.join('').toUpperCase();\n};\n"
  },
  {
    "path": "packages/web-vue/components/_utils/constant.ts",
    "content": "export const SIZES = ['mini', 'small', 'medium', 'large'] as const;\nexport type Size = typeof SIZES[number];\nexport const BORDER_SHAPES = ['square', 'round', 'circle'] as const;\nexport type BorderShape = typeof BORDER_SHAPES[number];\nexport const STATUSES = ['normal', 'success', 'warning', 'danger'] as const;\nexport type Status = typeof STATUSES[number];\nexport const MESSAGE_TYPES = ['info', 'success', 'warning', 'error'] as const;\nexport type MessageType = typeof MESSAGE_TYPES[number];\nexport const TRIGGER_POSITIONS = [\n  'top',\n  'tl',\n  'tr',\n  'bottom',\n  'bl',\n  'br',\n  'left',\n  'lt',\n  'lb',\n  'right',\n  'rt',\n  'rb',\n] as const;\nexport type TriggerPosition = typeof TRIGGER_POSITIONS[number];\nexport const TRIGGER_EVENTS = [\n  'hover',\n  'click',\n  'focus',\n  'contextMenu',\n] as const;\nexport type TriggerEvent = typeof TRIGGER_EVENTS[number];\nexport const DIRECTIONS = ['horizontal', 'vertical'] as const;\nexport type Direction = typeof DIRECTIONS[number];\nexport const INPUT_EVENTS = [\n  // focus events\n  'onFocus',\n  'onFocusin',\n  'onFocusout',\n  'onBlur',\n  // form events\n  'onChange',\n  'onBeforeinput',\n  'onInput',\n  'onReset',\n  'onSubmit',\n  'onInvalid',\n  // keyboard events\n  'onKeydown',\n  'onKeypress',\n  'onKeyup',\n  // clipboard events\n  'onCopy',\n  'onCut',\n  'onPaste',\n  // composition events\n  'onCompositionstart',\n  'onCompositionupdate',\n  'onCompositionend',\n  // selection events\n  'onSelect',\n  // attrs\n  'autocomplete',\n  'autofocus',\n  'maxlength',\n  'minlength',\n  'name',\n  'pattern',\n  'readonly',\n  'required',\n];\nexport const TEXT_ALIGNS = ['left', 'center', 'right'] as const;\nexport type TextAlign = typeof TEXT_ALIGNS[number];\n"
  },
  {
    "path": "packages/web-vue/components/_utils/convert-case.ts",
    "content": "export const toKebabCase = (string: string): string => {\n  return string.replace(/\\B([A-Z])/g, '-$1').toLowerCase();\n};\n\nexport const toPascalCase = (string: string): string => {\n  return string\n    .replace(/^./, (match) => match.toUpperCase())\n    .replace(/-(\\w)/g, (_, p1: string) => {\n      return p1?.toUpperCase() ?? '';\n    });\n};\n\nexport const toCamelCase = (string: string): string => {\n  return string\n    .replace(/^./, (match) => match.toLowerCase())\n    .replace(/-(\\w)/g, (_, p1: string) => {\n      return p1?.toUpperCase() ?? '';\n    });\n};\n"
  },
  {
    "path": "packages/web-vue/components/_utils/date.ts",
    "content": "import originDayjs, { Dayjs, OpUnitType, UnitType } from 'dayjs';\nimport customParseFormat from 'dayjs/plugin/customParseFormat';\nimport isBetween from 'dayjs/plugin/isBetween';\nimport weekOfYear from 'dayjs/plugin/weekOfYear';\nimport AdvancedFormat from 'dayjs/plugin/advancedFormat';\nimport weekYear from 'dayjs/plugin/weekYear';\nimport QuarterOfYear from 'dayjs/plugin/quarterOfYear';\nimport { isDayjs, isArray, isQuarter } from './is';\nimport 'dayjs/locale/zh-cn';\n\nconst overwriteIsDayjs = (_: any, Dayjs: any, dayjs: any) => {\n  // eslint-disable-next-line func-names\n  dayjs = function (date: Dayjs, c: any) {\n    if (isDayjs(date)) {\n      return date.clone();\n    }\n    const cfg = typeof c === 'object' ? c : {};\n    cfg.date = date;\n    cfg.args = arguments; // eslint-disable-line prefer-rest-params\n    return new Dayjs(cfg);\n  };\n\n  const proto = Dayjs.prototype;\n  const old$Utils = proto.$utils;\n  proto.$utils = () => {\n    const newUtils = old$Utils();\n    newUtils.i = isDayjs;\n    return newUtils;\n  };\n\n  dayjs.isDayjs = isDayjs;\n};\n\noriginDayjs.extend(overwriteIsDayjs);\noriginDayjs.extend(customParseFormat);\noriginDayjs.extend(isBetween);\noriginDayjs.extend(weekOfYear);\noriginDayjs.extend(AdvancedFormat);\noriginDayjs.extend(weekYear);\noriginDayjs.extend(QuarterOfYear);\n\nexport const dayjs = originDayjs;\n\nexport const methods = {\n  add(time: Dayjs, value: number, unit: UnitType) {\n    return time.add(value, unit);\n  },\n  subtract(time: Dayjs, value: number, unit: UnitType) {\n    return time.subtract(value, unit);\n  },\n  startOf(time: Dayjs, unit: OpUnitType) {\n    return time.startOf(unit);\n  },\n  /**\n   * Similar to `startOf`, returns start date of a week; used in week pickers\n   * @param time Selected date\n   * @param weekStart Start day of a week\n   * @returns Start date of the week containing the selected date\n   */\n  startOfWeek(time: Dayjs, weekStart: number) {\n    const currentDay = time.day();\n    let startOfWeek = time.subtract(currentDay - weekStart, 'day');\n    if (startOfWeek.isAfter(time)) {\n      startOfWeek = startOfWeek.subtract(7, 'day');\n    }\n    return startOfWeek;\n  },\n  endOf(time: Dayjs, unit: OpUnitType) {\n    return time.endOf(unit);\n  },\n  set(time: Dayjs, unit: UnitType, value: number) {\n    return time.set(unit, value);\n  },\n  isSameWeek(date1: Dayjs, date2: Dayjs, weekStart: number) {\n    // calculate week number of the given date considering the given start of week\n    const getWeek = (date: Dayjs) => {\n      const day = date.day();\n      const diff = day - weekStart + (day < weekStart ? 7 : 0);\n      return date.subtract(diff, 'day').week();\n    };\n    return getWeek(date1) === getWeek(date2);\n  },\n};\n\nexport function getNow() {\n  return dayjs();\n}\n\nexport function getSortedDayjsArray(values: Dayjs[]) {\n  return [...values].sort((a, b) => a.valueOf() - b.valueOf());\n}\n\nexport function isValueChange(\n  prevValue: Dayjs | (Dayjs | undefined)[] | undefined,\n  currentValue: Dayjs | (Dayjs | undefined)[] | undefined\n) {\n  const isDifference = (\n    value1: Dayjs | undefined,\n    value2: Dayjs | undefined\n  ) => {\n    if (value1 === undefined && value2 === undefined) {\n      return false;\n    }\n\n    if ((value1 && !value2) || (!value1 && value2)) {\n      return true;\n    }\n\n    return value1?.valueOf() !== value2?.valueOf();\n  };\n\n  if (currentValue === undefined && prevValue === undefined) {\n    return false;\n  }\n\n  if (isArray(currentValue) && isArray(prevValue)) {\n    return (\n      isDifference(currentValue[0], prevValue[0]) ||\n      isDifference(currentValue[1], prevValue[1])\n    );\n  }\n\n  if (!isArray(currentValue) && !isArray(prevValue)) {\n    return isDifference(currentValue, prevValue);\n  }\n\n  return true;\n}\n\ntype DateValue = Date | string | number;\n\nexport function getDayjsValue(time: DateValue, format: string): Dayjs;\nexport function getDayjsValue(\n  time: DateValue | undefined,\n  format: string\n): Dayjs | undefined;\nexport function getDayjsValue(time: DateValue[], format: string): Dayjs[];\nexport function getDayjsValue(\n  time: DateValue[] | undefined,\n  format: string\n): Dayjs[] | undefined;\nexport function getDayjsValue(\n  time: (DateValue | undefined)[],\n  format: string\n): (Dayjs | undefined)[];\nexport function getDayjsValue(\n  time: (DateValue | undefined)[] | undefined,\n  format: string\n): (Dayjs | undefined)[] | undefined;\nexport function getDayjsValue(\n  time: DateValue | (DateValue | undefined)[] | undefined,\n  format: string\n): Dayjs | (Dayjs | undefined)[] | undefined;\nexport function getDayjsValue(\n  time: DateValue | DateValue[] | (DateValue | undefined)[] | undefined,\n  format: string\n) {\n  const parseQuarterToMonth = (value: string) => {\n    const reg = /(Q1)|(Q2)|(Q3)|(Q4)/;\n    const quarter = {\n      Q1: '01',\n      Q2: '04',\n      Q3: '07',\n      Q4: '10',\n    };\n    const [q] = reg.exec(value) as ('Q1' | 'Q2' | 'Q3' | 'Q4')[];\n    return value.replace(reg, quarter[q]);\n  };\n\n  const formatValue = (value: Date | string | number | undefined) => {\n    if (!value) return undefined;\n\n    if (typeof value === 'string') {\n      if (isQuarter(format)) {\n        return dayjs(parseQuarterToMonth(value), format.replace(/\\[Q]Q/, 'MM'));\n      }\n\n      if (dayjs(value, format).isValid()) {\n        return dayjs(value, format);\n      }\n    }\n\n    return dayjs(value);\n  };\n\n  if (isArray(time)) {\n    return time.map(formatValue);\n  }\n  return formatValue(time);\n}\n\nexport function getDateValue(value: Dayjs): Date;\nexport function getDateValue(value: Dayjs | undefined): Date | undefined;\nexport function getDateValue(value: Dayjs[]): Date[];\nexport function getDateValue(\n  value: (Dayjs | undefined)[]\n): (Date | undefined)[];\nexport function getDateValue(\n  value: (Dayjs | undefined)[] | undefined\n): (Date | undefined)[] | undefined;\nexport function getDateValue(\n  value: Dayjs | (Dayjs | undefined)[]\n): Date | (Date | undefined)[];\nexport function getDateValue(\n  value: Dayjs | (Dayjs | undefined)[] | undefined\n): Date | (Date | undefined)[] | undefined;\nexport function getDateValue(\n  value: Dayjs | Dayjs[] | (Dayjs | undefined)[] | undefined\n) {\n  const formatValue = (t: Dayjs | undefined) => (t ? t.toDate() : undefined);\n\n  if (isArray(value)) {\n    return value.map(formatValue);\n  }\n\n  return formatValue(value);\n}\n\nexport function initializeDateLocale(localeName: string, weekStart: number) {\n  dayjs.locale({ ...dayjs.Ls[localeName.toLocaleLowerCase()], weekStart });\n}\n\nexport function pickDataAttributes<\n  T extends Record<string, any>,\n  K extends keyof T\n>(obj: T): { [key in K]: any } {\n  const clone = {} as { [key in K]: any };\n\n  obj &&\n    Object.keys(obj).forEach((key) => {\n      const k = String(key);\n      if (k.indexOf('data-') === 0) {\n        clone[k] = obj[k];\n      }\n      if (k.indexOf('aria-') === 0) {\n        clone[k] = obj[k];\n      }\n    });\n\n  return clone;\n}\n"
  },
  {
    "path": "packages/web-vue/components/_utils/debounce.ts",
    "content": "const target = typeof window === 'undefined' ? global : window;\n\nexport function debounce(callback: (...args: any[]) => void, delay: number) {\n  let timer = 0;\n  return (...args: any[]) => {\n    if (timer) {\n      target.clearTimeout(timer);\n    }\n    timer = target.setTimeout(() => {\n      timer = 0;\n      callback(...args);\n    }, delay) as unknown as number;\n  };\n}\n"
  },
  {
    "path": "packages/web-vue/components/_utils/dom.ts",
    "content": "import { VNode } from 'vue';\nimport { isString } from './is';\n\nexport const NOOP = () => {\n  return undefined;\n};\nexport interface Size {\n  height: number;\n  width: number;\n}\nexport const getDocumentSize = (): Size => {\n  const { body } = document;\n  const html = document.documentElement;\n  let topBody;\n  try {\n    const topWindow = window.top || window.self || window;\n    topBody = topWindow.document.body;\n  } catch {}\n\n  return {\n    height: Math.max(\n      body.scrollHeight,\n      body.offsetHeight,\n      html.clientHeight,\n      html.scrollHeight,\n      html.offsetHeight,\n      topBody?.scrollHeight || 0,\n      topBody?.clientHeight || 0\n    ),\n    width: Math.max(\n      body.scrollWidth,\n      body.offsetWidth,\n      html.clientWidth,\n      html.scrollWidth,\n      html.offsetWidth,\n      topBody?.scrollWidth || 0,\n      topBody?.clientWidth || 0\n    ),\n  };\n};\nexport const isServerRendering = (() => {\n  try {\n    return !(typeof window !== 'undefined' && document !== undefined);\n  } catch (e) {\n    return true;\n  }\n})();\n\nexport const on = (() => {\n  if (isServerRendering) {\n    return NOOP;\n  }\n  return <K extends keyof HTMLElementEventMap>(\n    element: HTMLElement | Window,\n    event: K,\n    handler: (ev: HTMLElementEventMap[K]) => void,\n    options: boolean | AddEventListenerOptions = false\n  ) => {\n    element.addEventListener(\n      event,\n      handler as EventListenerOrEventListenerObject,\n      options\n    );\n  };\n})();\n\nexport const off = (() => {\n  if (isServerRendering) {\n    return NOOP;\n  }\n  return <K extends keyof HTMLElementEventMap>(\n    element: HTMLElement | Window,\n    type: K,\n    handler: (ev: HTMLElementEventMap[K]) => void,\n    options: boolean | EventListenerOptions = false\n  ) => {\n    element.removeEventListener(\n      type,\n      handler as EventListenerOrEventListenerObject,\n      options\n    );\n  };\n})();\n\nexport const findDomNode = (vnode: VNode) => {\n  let node = vnode.el;\n  while (node && !node.tagName) {\n    node = node.nextSibling;\n  }\n  return node as HTMLElement;\n};\n\nexport const contains = (root: Node | null | undefined, ele: Node | null) => {\n  if (!root || !ele) {\n    return false;\n  }\n  let node: Node | null = ele;\n  while (node) {\n    if (node === root) {\n      return true;\n    }\n    node = node.parentNode;\n  }\n  return false;\n};\n\nexport const OVERLAY_TYPES = [\n  'modal',\n  'message',\n  'notification',\n  'drawer',\n] as const;\n\nexport const getOverlay = (type: typeof OVERLAY_TYPES[number]) => {\n  const popper = document.createElement('div');\n  popper.setAttribute('class', `arco-overlay arco-overlay-${type}`);\n  return popper;\n};\n\nexport const querySelector = (\n  selectors: string,\n  container?: Document | HTMLElement\n) => {\n  if (isServerRendering) {\n    return NOOP();\n  }\n  return (\n    (container ?? document).querySelector<HTMLElement>(selectors) ?? undefined\n  );\n};\n\nexport const getElement = (\n  target: string | HTMLElement | undefined,\n  container?: Document | HTMLElement\n): HTMLElement | undefined => {\n  if (isString(target)) {\n    const selector = target[0] === '#' ? `[id='${target.slice(1)}']` : target;\n    return querySelector(selector, container);\n  }\n  return target;\n};\n\n/**\n * Get the relative distance between two DOMs\n * @param target\n * @param relative\n */\nexport const getRelativeRect = (target: HTMLElement, relative: HTMLElement) => {\n  const targetRect = target.getBoundingClientRect();\n  const relativeRect = relative.getBoundingClientRect();\n\n  return {\n    top: targetRect.top - relativeRect.top,\n    bottom: relativeRect.bottom - targetRect.bottom,\n    left: targetRect.left - relativeRect.left,\n    right: relativeRect.right - targetRect.right,\n    width: targetRect.width,\n    height: targetRect.height,\n  };\n};\n\nexport const isScroll = (element: HTMLElement) => {\n  return element.tagName === 'BODY'\n    ? document.documentElement.scrollHeight > window.innerHeight\n    : element.scrollHeight > element.offsetHeight;\n};\n\nexport const getScrollBarWidth = (element: HTMLElement) => {\n  return element.tagName === 'BODY'\n    ? window.innerWidth - getDocumentSize().width\n    : element.offsetWidth - element.clientWidth;\n};\n"
  },
  {
    "path": "packages/web-vue/components/_utils/get-value-by-path.ts",
    "content": "import { Data } from './types';\nimport { isArray, isObject, isUndefined } from './is';\n\nexport const getValueByPath = <T = any>(\n  obj: Data | undefined,\n  path: string | undefined\n): T | undefined => {\n  if (!obj || !path) {\n    return undefined;\n  }\n  path = path.replace(/\\[(\\w+)\\]/g, '.$1');\n  const keys = path.split('.');\n  if (keys.length === 0) {\n    return undefined;\n  }\n\n  let temp = obj;\n\n  for (let i = 0; i < keys.length; i++) {\n    if ((!isObject(temp) && !isArray(temp)) || !keys[i]) {\n      return undefined;\n    }\n    if (i !== keys.length - 1) {\n      temp = temp[keys[i]] as any;\n    } else {\n      return temp[keys[i]] as T;\n    }\n  }\n\n  return undefined;\n};\n\nexport const setValueByPath = (\n  obj: Data | undefined,\n  path: string | undefined,\n  value: any,\n  { addPath }: { addPath?: boolean } = {}\n) => {\n  if (!obj || !path) {\n    return;\n  }\n  path = path.replace(/\\[(\\w+)\\]/g, '.$1');\n  const keys = path.split('.');\n  if (keys.length === 0) {\n    return;\n  }\n\n  let temp = obj;\n\n  for (let i = 0; i < keys.length; i++) {\n    if ((!isObject(temp) && !isArray(temp)) || !keys[i]) {\n      return;\n    }\n    if (i !== keys.length - 1) {\n      if (addPath && isUndefined(temp[keys[i]])) {\n        temp[keys[i]] = {};\n      }\n      temp = temp[keys[i]] as any;\n    } else {\n      temp[keys[i]] = value;\n    }\n  }\n};\n"
  },
  {
    "path": "packages/web-vue/components/_utils/global-config.ts",
    "content": "import type { App } from 'vue';\nimport { getCurrentInstance, inject } from 'vue';\nimport { configProviderInjectionKey } from '../config-provider/context';\nimport type { ArcoOptions } from './types';\n\nconst COMPONENT_PREFIX = 'A';\nconst CLASS_PREFIX = 'arco';\nconst GLOBAL_CONFIG_NAME = '$arco';\n\nexport const getComponentPrefix = (options?: ArcoOptions) => {\n  return options?.componentPrefix ?? COMPONENT_PREFIX;\n};\n\nexport const setGlobalConfig = (app: App, options?: ArcoOptions): void => {\n  if (options && options.classPrefix) {\n    app.config.globalProperties[GLOBAL_CONFIG_NAME] = {\n      ...(app.config.globalProperties[GLOBAL_CONFIG_NAME] ?? {}),\n      classPrefix: options.classPrefix,\n    };\n  }\n};\n\nexport const getPrefixCls = (componentName?: string): string => {\n  const instance = getCurrentInstance();\n  const configProvider = inject(configProviderInjectionKey, undefined);\n\n  const prefix =\n    configProvider?.prefixCls ??\n    instance?.appContext.config.globalProperties[GLOBAL_CONFIG_NAME]\n      ?.classPrefix ??\n    CLASS_PREFIX;\n  if (componentName) {\n    return `${prefix}-${componentName}`;\n  }\n  return prefix;\n};\n"
  },
  {
    "path": "packages/web-vue/components/_utils/is-equal.ts",
    "content": "export const isEqualObject = (\n  obj: Record<string, unknown> | undefined,\n  other: Record<string, unknown> | undefined\n) => {\n  if (!obj || !other) {\n    return false;\n  }\n  if (obj.length !== other.length) {\n    return false;\n  }\n  for (const key of Object.keys(obj)) {\n    const result = isEqual(obj[key], other[key]);\n    if (!result) return false;\n  }\n  return true;\n};\n\nexport const isEqualArray = (\n  arr: unknown[] | undefined,\n  other: unknown[] | undefined\n) => {\n  if (!arr || !other) {\n    return false;\n  }\n  const { length } = arr;\n  if (length !== other.length) {\n    return false;\n  }\n\n  for (let i = 0; i < length; i++) {\n    const result = isEqual(arr[i], other[i]);\n    if (!result) return false;\n  }\n  return true;\n};\n\nexport const isEqual = (a: unknown, b: unknown) => {\n  const type = Object.prototype.toString.call(a);\n  if (type !== Object.prototype.toString.call(b)) {\n    return false;\n  }\n  if (type === '[object Object]') {\n    return isEqualObject(\n      a as Record<string, unknown>,\n      b as Record<string, unknown>\n    );\n  }\n  if (type === '[object Array]') {\n    return isEqualArray(a as unknown[], b as unknown[]);\n  }\n  if (type === '[object Function]') {\n    if (a === b) {\n      return true;\n    }\n    // @ts-ignore\n    return a.toString() === b.toString();\n  }\n  return a === b;\n};\n"
  },
  {
    "path": "packages/web-vue/components/_utils/is.ts",
    "content": "import type { ComponentPublicInstance, VNodeNormalizedChildren } from 'vue';\nimport { Dayjs } from 'dayjs';\nimport { VNode } from 'vue';\n\nconst opt = Object.prototype.toString;\n\nexport function isArray(obj: any): obj is any[] {\n  return opt.call(obj) === '[object Array]';\n}\n\nexport function isNull(obj: any): obj is null {\n  return opt.call(obj) === '[object Null]';\n}\n\nexport function isBoolean(obj: unknown): obj is boolean {\n  return opt.call(obj) === '[object Boolean]';\n}\n\nexport function isObject<T extends unknown>(\n  obj: T\n): obj is Extract<T, Record<string, any>> {\n  return opt.call(obj) === '[object Object]';\n}\n\nexport const isPromise = <T>(obj: unknown): obj is Promise<T> => {\n  return opt.call(obj) === '[object Promise]';\n};\n\nexport function isString(obj: any): obj is string {\n  return opt.call(obj) === '[object String]';\n}\n\nexport function isNumber(obj: any): obj is number {\n  return opt.call(obj) === '[object Number]' && obj === obj; // eslint-disable-line\n}\n\nexport function isRegExp(obj: any) {\n  return opt.call(obj) === '[object RegExp]';\n}\n\nexport function isDate(obj: any) {\n  return opt.call(obj) === '[object Date]';\n}\n\nfunction isHex(color: any) {\n  return /^#[a-fA-F0-9]{3}$|#[a-fA-F0-9]{6}$/.test(color);\n}\n\nfunction isRgb(color: any) {\n  return /^rgb\\((\\s*\\d+\\s*,?){3}\\)$/.test(color);\n}\n\nfunction isRgba(color: any) {\n  return /^rgba\\((\\s*\\d+\\s*,\\s*){3}\\s*\\d(\\.\\d+)?\\s*\\)$/.test(color);\n}\n\nexport function isColor(color: any): boolean {\n  return isHex(color) || isRgb(color) || isRgba(color);\n}\n\nexport function isUndefined(obj: any): obj is undefined {\n  return obj === undefined;\n}\n\nexport function isFunction(obj: any): obj is (...args: any[]) => any {\n  return typeof obj === 'function';\n}\n\nexport function isEmptyObject(obj: any): boolean {\n  return isObject(obj) && Object.keys(obj).length === 0;\n}\n\nexport function isExist(obj: any): boolean {\n  return obj || obj === 0;\n}\n\nexport function isWindow(el: any): el is Window {\n  return el === window;\n}\n\nexport const isComponentInstance = (\n  value: any\n): value is ComponentPublicInstance => {\n  return value?.$ !== undefined;\n};\n\nexport const isArrayChildren = (\n  children: VNodeNormalizedChildren\n): children is VNode[] => {\n  return isArray(children);\n};\n\nexport const isQuarter = (fromat: string) => {\n  return /\\[Q]Q/.test(fromat);\n};\n\nexport function isDayjs(time: any): time is Dayjs {\n  return (\n    isObject(time) &&\n    '$y' in time &&\n    '$M' in time &&\n    '$D' in time &&\n    '$d' in time &&\n    '$H' in time &&\n    '$m' in time &&\n    '$s' in time\n  );\n}\n"
  },
  {
    "path": "packages/web-vue/components/_utils/keyboard.ts",
    "content": "import { isString } from './is';\n\nexport const KEYBOARD_KEY = {\n  ENTER: 'Enter',\n  ESC: 'Escape',\n  BACKSPACE: 'Backspace',\n  TAB: 'Tab',\n  SPACE: ' ',\n  ARROW_UP: 'ArrowUp',\n  ARROW_DOWN: 'ArrowDown',\n  ARROW_LEFT: 'ArrowLeft',\n  ARROW_RIGHT: 'ArrowRight',\n};\n\nexport interface CodeKey {\n  /** Keyboard key */\n  key: string;\n  /** Ctrl / ⌃ */\n  ctrl?: boolean;\n  /** Shift key */\n  shift?: boolean;\n  /** Alt / ⌥ */\n  alt?: boolean;\n  /** meta ⌘ / ⊞ */\n  meta?: boolean;\n}\n\nconst stringifyCodeKey = (k: CodeKey) => {\n  return JSON.stringify({\n    key: k.key,\n    ctrl: Boolean(k.ctrl),\n    shift: Boolean(k.shift),\n    alt: Boolean(k.alt),\n    meta: Boolean(k.meta),\n  });\n};\n\nexport const getKeyDownHandler = (\n  codeKeyMap: Map<CodeKey | string, (e: Event) => void>\n) => {\n  const map: Record<string, (e: Event) => void> = {};\n\n  codeKeyMap.forEach((callback, codeKey) => {\n    const _codeKey = isString(codeKey) ? { key: codeKey } : codeKey;\n    map[stringifyCodeKey(_codeKey)] = callback;\n  });\n\n  return (event: KeyboardEvent): void => {\n    const key = stringifyCodeKey({\n      key: event.key,\n      ctrl: event.ctrlKey,\n      shift: event.shiftKey,\n      alt: event.altKey,\n      meta: event.metaKey,\n    });\n    const callback = map[key];\n\n    if (callback) {\n      event.stopPropagation();\n      callback(event);\n    }\n  };\n};\n"
  },
  {
    "path": "packages/web-vue/components/_utils/keycode.ts",
    "content": "// Keyboard Keycode\n\nexport const Enter = {\n  key: 'Enter',\n  code: 'Enter',\n};\n\nexport const Esc = {\n  key: 'Escape',\n  code: 'Escape',\n};\n\nexport const Backspace = {\n  key: 'Backspace',\n  code: 'Backspace',\n};\n\nexport const Tab = {\n  key: 'Tab',\n  code: 'Tab',\n};\n\nexport const Space = {\n  key: '',\n  code: 'Space',\n};\nexport const ArrowUp = {\n  key: 'ArrowUp',\n  code: 'ArrowUp',\n};\n\nexport const ArrowDown = {\n  key: 'ArrowDown',\n  code: 'ArrowDown',\n};\n\nexport const ArrowLeft = {\n  key: 'ArrowLeft',\n  code: 'ArrowLeft',\n};\n\nexport const ArrowRight = {\n  key: 'ArrowRight',\n  code: 'ArrowRight',\n};\n"
  },
  {
    "path": "packages/web-vue/components/_utils/omit.ts",
    "content": "import type { Data } from './types';\n\nexport const omit = <T extends Data, K extends keyof any>(\n  object: T,\n  path: Array<K>\n): Omit<T, K> => {\n  const result = { ...object };\n\n  for (const item of path) {\n    // @ts-ignore\n    if (item in result) {\n      // @ts-ignore\n      delete result[item];\n    }\n  }\n\n  return result;\n};\n"
  },
  {
    "path": "packages/web-vue/components/_utils/pad.ts",
    "content": "export function padStart(\n  string: string | number,\n  length: number,\n  char = ' '\n): string {\n  const s = String(string);\n  if (!length) {\n    return s;\n  }\n  const newString = s.length < length ? `${char}${s}` : s;\n  return newString.length < length\n    ? padStart(newString, length, char)\n    : newString;\n}\n\nexport function padEnd(\n  string: string | number,\n  length: number,\n  char = ' '\n): string {\n  const s = String(string);\n  if (!length) {\n    return s;\n  }\n  const newString = s.length < length ? `${s}${char}` : s;\n  return newString.length < length\n    ? padEnd(newString, length, char)\n    : newString;\n}\n"
  },
  {
    "path": "packages/web-vue/components/_utils/pick-sub-comp-slots.ts",
    "content": "import { Slots, Slot } from 'vue';\n\nexport default function pickSubCompSlots(slots: Slots, subCompName: string) {\n  const prefix = `${subCompName}-slot-`;\n  const subSlots = Object.keys(slots).reduce(\n    (cur: Record<string, Slot>, s: string) => {\n      if (s.startsWith(prefix)) {\n        const subSlotName = s.slice(prefix.length);\n        if (subSlotName) {\n          cur[subSlotName] = slots[s] as Slot;\n        }\n      }\n      return cur;\n    },\n    {}\n  );\n\n  return subSlots;\n}\n"
  },
  {
    "path": "packages/web-vue/components/_utils/pick.ts",
    "content": "// pick item from object\n// eslint-disable-next-line @typescript-eslint/ban-types\nexport default function pick<T extends object, K extends keyof T>(\n  obj: T,\n  keys: Array<K | string>\n): Pick<T, K> {\n  const clone = {} as Pick<T, K>;\n  keys.forEach((key) => {\n    const k = key as K;\n    // @ts-ignore\n    if (key in obj) {\n      clone[k] = obj[k];\n    }\n  });\n  return clone;\n}\n"
  },
  {
    "path": "packages/web-vue/components/_utils/raf.ts",
    "content": "const target = typeof window === 'undefined' ? global : window;\n\nconst raf = target.requestAnimationFrame;\nconst caf = target.cancelAnimationFrame;\n\nexport { raf, caf };\n"
  },
  {
    "path": "packages/web-vue/components/_utils/responsive-observe.ts",
    "content": "// https://github.com/ant-design/ant-design/blob/master/components/_util/responsiveObserve.ts\n\nexport type Breakpoint = 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs';\nexport type BreakpointMap = Partial<Record<Breakpoint, string>>;\nexport type ScreenMap = Partial<Record<Breakpoint, boolean>>;\n\nexport const responsiveArray: Breakpoint[] = [\n  'xxl',\n  'xl',\n  'lg',\n  'md',\n  'sm',\n  'xs',\n];\n\nexport const responsiveMap: BreakpointMap = {\n  xs: '(max-width: 575px)',\n  sm: '(min-width: 576px)',\n  md: '(min-width: 768px)',\n  lg: '(min-width: 992px)',\n  xl: '(min-width: 1200px)',\n  xxl: '(min-width: 1600px)',\n};\n\ntype SubscribeFunc = (\n  screens: ScreenMap,\n  breakpointChecked: Breakpoint\n) => void;\n\ntype MediaQueryResult = { matches: boolean };\n\ntype MediaQueryListener = (matches: MediaQueryResult) => void;\n\nlet subscribers: Array<{\n  token: string;\n  func: SubscribeFunc;\n}> = [];\nlet subUid = -1;\nlet screens = {};\n\nconst responsiveObserve: {\n  matchHandlers: {\n    [key: string]: {\n      mql: MediaQueryList;\n      listener: MediaQueryListener;\n    };\n  };\n  dispatch(pointMap: ScreenMap, breakpointChecked: Breakpoint): boolean;\n  subscribe(func: SubscribeFunc): string;\n  unsubscribe(token: string): void;\n  unregister(): void;\n  register(): void;\n} = {\n  matchHandlers: {},\n  dispatch(pointMap: ScreenMap, breakpointChecked: Breakpoint) {\n    screens = pointMap;\n    if (subscribers.length < 1) {\n      return false;\n    }\n\n    subscribers.forEach((item) => {\n      item.func(screens, breakpointChecked);\n    });\n\n    return true;\n  },\n  subscribe(func: SubscribeFunc) {\n    if (subscribers.length === 0) {\n      this.register();\n    }\n    const token = (++subUid).toString();\n    subscribers.push({\n      token,\n      func,\n    });\n    func(screens, null as unknown as Breakpoint);\n    return token;\n  },\n  unsubscribe(token: string) {\n    subscribers = subscribers.filter((item) => item.token !== token);\n    if (subscribers.length === 0) {\n      this.unregister();\n    }\n  },\n  unregister() {\n    (Object.keys(responsiveMap) as Breakpoint[]).forEach(\n      (screen: Breakpoint) => {\n        const matchMediaQuery = responsiveMap[screen];\n        if (!matchMediaQuery) return;\n        const handler = this.matchHandlers[matchMediaQuery];\n        if (handler && handler.mql && handler.listener) {\n          if (handler.mql.removeEventListener) {\n            handler.mql.removeEventListener('change', handler.listener);\n          } else {\n            handler.mql.removeListener(handler.listener);\n          }\n        }\n      }\n    );\n  },\n  register() {\n    (Object.keys(responsiveMap) as Breakpoint[]).forEach(\n      (screen: Breakpoint) => {\n        const matchMediaQuery = responsiveMap[screen];\n        if (!matchMediaQuery) return;\n        const listener = ({ matches }: MediaQueryResult) => {\n          this.dispatch(\n            {\n              ...screens,\n              [screen]: matches,\n            },\n            screen\n          );\n        };\n        const mql = window.matchMedia(matchMediaQuery);\n        if (mql.addEventListener) {\n          mql.addEventListener('change', listener);\n        } else {\n          mql.addListener(listener);\n        }\n\n        this.matchHandlers[matchMediaQuery] = {\n          mql,\n          listener,\n        };\n\n        listener(mql);\n      }\n    );\n  },\n};\n\nexport default responsiveObserve;\n"
  },
  {
    "path": "packages/web-vue/components/_utils/style.ts",
    "content": "const transformNames = [\n  'transform',\n  'WebkitTransform',\n  'msTransform',\n  'MozTransform',\n  'OTransform',\n];\n\nexport function fixedWidth(width: number): Record<string, unknown> {\n  return {\n    maxWidth: width,\n    minWidth: width,\n    width,\n  };\n}\n\nexport function setTransformStyle(value: string): Record<string, unknown> {\n  const style: Record<string, unknown> = {};\n  transformNames.forEach((name) => {\n    style[name] = value;\n  });\n  return style;\n}\n\nexport function getStyle(element: HTMLElement | null, prop: string | null) {\n  if (!element || !prop) return null;\n  let styleName = prop as keyof CSSStyleDeclaration;\n  if (styleName === 'float') {\n    styleName = 'cssFloat';\n  }\n  try {\n    if (document.defaultView) {\n      const computed = document.defaultView.getComputedStyle(element, '');\n      return element.style[styleName] || computed ? computed[styleName] : '';\n    }\n  } catch (e) {\n    return element.style[styleName];\n  }\n  return null;\n}\n"
  },
  {
    "path": "packages/web-vue/components/_utils/throttle-by-raf.ts",
    "content": "import { raf, caf } from './raf';\n\nexport function throttleByRaf(cb: (...args: any[]) => void) {\n  let timer = 0;\n\n  const throttle = (...args: any[]): void => {\n    if (timer) {\n      caf(timer);\n    }\n    timer = raf(() => {\n      cb(...args);\n      timer = 0;\n    });\n  };\n\n  throttle.cancel = () => {\n    caf(timer);\n    timer = 0;\n  };\n\n  return throttle;\n}\n"
  },
  {
    "path": "packages/web-vue/components/_utils/to-array.ts",
    "content": "import { isArray } from './is';\n\nexport function toArray<T>(val: T | T[]): T[] {\n  return isArray(val) ? val : [val];\n}\n"
  },
  {
    "path": "packages/web-vue/components/_utils/types.ts",
    "content": "import type { App, RenderFunction } from 'vue';\nimport { VNode } from 'vue';\n\nexport interface ArcoOptions {\n  classPrefix?: string;\n  componentPrefix?: string;\n}\n\nexport interface ArcoIconOptions {\n  iconPrefix?: string;\n}\n\nexport interface ArcoGlobalConfig {\n  classPrefix?: string;\n}\n\ntype UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (\n  k: infer I\n) => void\n  ? I\n  : never;\n\nexport type BaseType = string | number;\nexport type UnionType = BaseType | Record<string, any>;\nexport type Data = Record<string, any>;\nexport type RenderContent = string | RenderFunction;\n\nexport type EmitFn<T> = (event: T, ...args: any[]) => void;\n\nexport type EmitFn2<\n  Options = Record<string, any>,\n  Event extends keyof Options = keyof Options\n> = UnionToIntersection<\n  {\n    [key in Event]: Options[key] extends (...args: infer Args) => any\n      ? (event: key, ...args: Args) => void\n      : (event: key, ...args: any[]) => void;\n  }[Event]\n>;\n\nexport type EmitType<T> = T | T[];\n\nexport type SFCWithInstall<T, D = Record<string, never>> = T &\n  D & {\n    install: (app: App, opt?: ArcoOptions) => void;\n  };\n\nexport type ClassName =\n  | string\n  | Record<string, boolean>\n  | (string | Record<string, boolean>)[];\n\nexport type FieldString<T> = {\n  [K in keyof T]?: string;\n};\n\nexport interface SlotChildren {\n  value?: VNode[];\n}\n\nexport interface ValueData {\n  value: string | number;\n  label: string;\n  closable?: boolean;\n\n  [other: string]: any;\n}\n\nexport type AnimationDuration =\n  | number\n  | {\n      enter: number;\n      leave: number;\n    };\n"
  },
  {
    "path": "packages/web-vue/components/_utils/use-prop-or-slot.ts",
    "content": "import { computed, Slots } from 'vue';\n\nexport default function usePropOrSlot<T = { [key: string]: any }>(\n  props: T,\n  slots: Slots,\n  propName: string\n) {\n  return computed(\n    () => props[propName] || (slots[propName] && slots[propName]!())\n  );\n}\n\nexport function hasPropOrSlot<T = { [key: string]: any }>(\n  props: T,\n  slots: Slots,\n  propName: string\n) {\n  return computed(() => Boolean(props[propName] || slots[propName]));\n}\n"
  },
  {
    "path": "packages/web-vue/components/_utils/vue-utils.ts",
    "content": "import type {\n  Component,\n  Slot,\n  Slots,\n  VNode,\n  VNodeTypes,\n  VNodeArrayChildren,\n  ComponentPublicInstance,\n  RenderFunction,\n} from 'vue';\nimport { cloneVNode, Fragment, isVNode } from 'vue';\nimport { Data, RenderContent } from './types';\nimport { isArray, isFunction, isNumber, isObject, isString } from './is';\nimport { toCamelCase, toKebabCase } from './convert-case';\n\n// Quoted from vue-next\n// https://github.com/vuejs/vue-next/blob/master/packages/shared/src/shapeFlags.ts\nexport enum ShapeFlags {\n  ELEMENT = 1,\n  FUNCTIONAL_COMPONENT = 1 << 1,\n  STATEFUL_COMPONENT = 1 << 2,\n  COMPONENT = ShapeFlags.STATEFUL_COMPONENT | ShapeFlags.FUNCTIONAL_COMPONENT,\n  TEXT_CHILDREN = 1 << 3,\n  ARRAY_CHILDREN = 1 << 4,\n  SLOTS_CHILDREN = 1 << 5,\n  TELEPORT = 1 << 6,\n  SUSPENSE = 1 << 7,\n  COMPONENT_SHOULD_KEEP_ALIVE = 1 << 8,\n  COMPONENT_KEPT_ALIVE = 1 << 9,\n}\n\n// Quoted from vue-next\n// https://github.com/vuejs/vue-next/blob/master/packages/shared/src/patchFlags.ts\nexport enum PatchFlags {\n  TEXT = 1,\n  CLASS = 2,\n  STYLE = 4,\n  PROPS = 8,\n  FULL_PROPS = 16,\n  HYDRATE_EVENTS = 32,\n  STABLE_FRAGMENT = 64,\n  KEYED_FRAGMENT = 128,\n  UNKEYED_FRAGMENT = 256,\n  NEED_PATCH = 512,\n  DYNAMIC_SLOTS = 1024,\n  DEV_ROOT_FRAGMENT = 2048,\n  HOISTED = -1,\n  BAIL = -2,\n}\n\nexport const getValueFromSlotsOrProps = (\n  name: string,\n  props?: Data,\n  slots?: Slots\n) => {\n  if (slots?.[name]) {\n    return slots[name];\n  }\n  if (props?.[name]) {\n    return () => props[name];\n  }\n  return undefined;\n};\n\nexport const isComponentInstance = (\n  value: any\n): value is ComponentPublicInstance => {\n  return value?.$ !== undefined;\n};\n\nexport const isElement = (vn: VNode) => {\n  return Boolean(vn && vn.shapeFlag & ShapeFlags.ELEMENT);\n};\n\nexport const isComponent = (\n  vn: VNode,\n  type?: VNodeTypes\n): type is Component => {\n  return Boolean(vn && vn.shapeFlag & ShapeFlags.COMPONENT);\n};\n\nexport const isText = (\n  vn: VNode,\n  children: VNode['children']\n): children is string => {\n  return Boolean(vn && vn.shapeFlag & ShapeFlags.TEXT_CHILDREN);\n};\n\nexport const isNamedComponent = (child: VNode, name: string) => {\n  return isComponent(child, child.type) && child.type.name === name;\n};\n\nexport const isTextChildren = (\n  child: VNode,\n  children: VNode['children']\n): children is string => {\n  return Boolean(child && child.shapeFlag & 8);\n};\n\nexport const isArrayChildren = (\n  vn: VNode,\n  children: VNode['children']\n): children is VNode[] => {\n  return Boolean(vn && vn.shapeFlag & ShapeFlags.ARRAY_CHILDREN);\n};\n\nexport const isSlotsChildren = (\n  vn: VNode,\n  children: VNode['children']\n): children is Slots => {\n  return Boolean(vn && vn.shapeFlag & ShapeFlags.SLOTS_CHILDREN);\n};\n\nexport const getChildrenString = (children: VNode[]): string => {\n  let text = '';\n  for (const child of children) {\n    if (isString(child) || isNumber(child)) {\n      text += String(child);\n    } else if (isTextChildren(child, child.children)) {\n      text += child.children;\n    } else if (isArrayChildren(child, child.children)) {\n      text += getChildrenString(child.children);\n    } else if (isSlotsChildren(child, child.children)) {\n      const _children = child.children.default?.();\n      if (_children) {\n        text += getChildrenString(_children);\n      }\n    }\n  }\n\n  return text;\n};\n\nexport const getVNodeChildrenString = (vn: VNode): string => {\n  if (isText(vn, vn.children)) {\n    return vn.children;\n  }\n  // Used to splice the content of sub-components and return the text of all sub-components\n  let text = '';\n  if (isArrayChildren(vn, vn.children)) {\n    for (const child of vn.children) {\n      text += getVNodeChildrenString(child);\n    }\n  } else if (isSlotsChildren(vn, vn.children)) {\n    const children = vn.children.default?.() ?? [];\n    for (const child of children) {\n      text += getVNodeChildrenString(child);\n    }\n  }\n  return text;\n};\n\nexport const getChildrenFunc = (vn: VNode): RenderFunction | undefined => {\n  if (isTextChildren(vn, vn.children) || isArrayChildren(vn, vn.children)) {\n    return (() => vn.children) as RenderFunction;\n  }\n  if (isSlotsChildren(vn, vn.children)) {\n    return vn.children.default;\n  }\n  return undefined;\n};\n\nexport const getChildrenTextOrSlot = (vn: VNode): string | Slot | undefined => {\n  if (isText(vn, vn.children)) {\n    return vn.children;\n  }\n  if (isSlotsChildren(vn, vn.children)) {\n    const children = vn.children.default?.();\n    // 如果slot的内容是文字，优先返回字符串\n    if (children && children.length === 1) {\n      const child = children[0];\n      if (isTextChildren(child, child.children)) {\n        return child.children;\n      }\n    }\n    return vn.children.default;\n  }\n  if (isArrayChildren(vn, vn.children)) {\n    if (vn.children.length === 1) {\n      const child = vn.children[0];\n      if (isTextChildren(child, child.children)) {\n        return child.children;\n      }\n    }\n    return () => vn.children as VNode[];\n  }\n  return undefined;\n};\n\nexport const getFirstComponent = (\n  children: VNode[] | undefined\n): VNode | undefined => {\n  if (!children) {\n    return undefined;\n  }\n\n  for (const child of children) {\n    if (isElement(child) || isComponent(child)) {\n      return child;\n    }\n    // If the current node is not a component, continue to find subcomponents\n    if (isArrayChildren(child, child.children)) {\n      const result = getFirstComponent(child.children);\n      if (result) return result;\n    } else if (isSlotsChildren(child, child.children)) {\n      const children = child.children.default?.();\n      if (children) {\n        const result = getFirstComponent(children);\n        if (result) return result;\n      }\n    } else if (isArray(child)) {\n      const result = getFirstComponent(child);\n      if (result) return result;\n    }\n  }\n\n  return undefined;\n};\n\n/**\n * Used to get the number of specified components in children\n * @param vNodes\n * @param componentName\n */\nexport const getComponentNumber = (vNodes: VNode[], componentName: string) => {\n  let count = 0;\n  for (const item of vNodes) {\n    if (isComponent(item, item.type) && item.type.name === componentName) {\n      count++;\n    } else if (isArrayChildren(item, item.children)) {\n      count += getComponentNumber(item.children, componentName);\n    }\n  }\n  return count;\n};\n\nexport const foreachComponent = (\n  children: VNode[],\n  name: string,\n  cb: (node: VNode) => void\n) => {\n  for (const item of children) {\n    if (isComponent(item, item.type) && item.type.name === name) {\n      cb(item);\n    }\n    if (isArrayChildren(item, item.children)) {\n      foreachComponent(item.children, name, cb);\n    }\n  }\n};\n\nexport const isEmptyChildren = (children?: VNode[]) => {\n  if (!children) {\n    return true;\n  }\n\n  for (const item of children) {\n    if (item.children) {\n      return false;\n    }\n  }\n\n  return true;\n};\n\nexport const getChildrenComponents = (\n  children: VNode[],\n  name: string,\n  props?: Data | ((node: VNode, index: number) => Data),\n  startIndex = 0\n): VNode[] => {\n  const result = [];\n  for (const item of children) {\n    if (isNamedComponent(item, name)) {\n      if (props) {\n        const index: number = startIndex + result.length;\n        const extraProps = isFunction(props) ? props(item, index) : props;\n        result.push(cloneVNode(item, extraProps, true));\n      } else {\n        result.push(item);\n      }\n    } else if (isArrayChildren(item, item.children)) {\n      result.push(\n        ...getChildrenComponents(item.children, name, props, result.length)\n      );\n    } else if (isSlotsChildren(item, item.children)) {\n      const defaultChildren = item.children.default?.() ?? [];\n      result.push(\n        ...getChildrenComponents(defaultChildren, name, props, result.length)\n      );\n    }\n  }\n  return result;\n};\n\nexport const mergeFirstChild = (\n  children: VNode[] | undefined,\n  extraProps: Data | ((vn: VNode) => Data)\n): boolean => {\n  if (children && children.length > 0) {\n    for (let i = 0; i < children.length; i++) {\n      const child = children[i];\n      if (isElement(child) || isComponent(child)) {\n        const props = isFunction(extraProps) ? extraProps(child) : extraProps;\n        children[i] = cloneVNode(child, props, true);\n        return true;\n      }\n      const _children = getChildrenArray(child);\n      if (_children && _children.length > 0) {\n        const result = mergeFirstChild(_children, extraProps);\n        if (result) return true;\n      }\n    }\n  }\n  return false;\n};\n\nexport const getChildrenArray = (vn: VNode): VNode[] | undefined => {\n  if (isArrayChildren(vn, vn.children)) {\n    return vn.children;\n  }\n  if (isArray(vn)) {\n    return vn;\n  }\n  return undefined;\n};\n\nexport const getFirstElementFromVNode = (\n  vn: VNode\n): HTMLElement | undefined => {\n  if (isElement(vn)) {\n    return vn.el as HTMLElement;\n  }\n  if (isComponent(vn)) {\n    if ((vn.el as Node)?.nodeType === 1) {\n      return vn.el as HTMLElement;\n    }\n    if (vn.component?.subTree) {\n      const ele = getFirstElementFromVNode(vn.component.subTree);\n      if (ele) return ele;\n    }\n  } else {\n    const children = getChildrenArray(vn);\n    return getFirstElementFromChildren(children);\n  }\n  return undefined;\n};\n\nexport const getFirstElementFromTemplateRef = (\n  target: HTMLElement | ComponentPublicInstance | undefined\n) => {\n  if (isComponentInstance(target)) {\n    return getFirstElementFromVNode(target.$.subTree);\n  }\n  return target;\n};\n\nexport const getFirstElementFromChildren = (\n  children: VNode[] | undefined\n): HTMLElement | undefined => {\n  if (children && children.length > 0) {\n    for (const child of children) {\n      const element = getFirstElementFromVNode(child);\n      if (element) return element;\n    }\n  }\n  return undefined;\n};\n\n/**\n * Get the value of boolean type prop\n * @param value\n */\nexport const getBooleanProp = (value: string | boolean | undefined) => {\n  return !!(value || isString(value));\n};\n\nexport const getRenderFunc = (content: RenderContent) => {\n  if (isFunction(content)) {\n    return content;\n  }\n  return () => content;\n};\n\nexport const getAllElements = (\n  children: VNode[] | undefined,\n  includeText = false\n) => {\n  const results: VNode[] = [];\n  for (const item of children ?? []) {\n    if (\n      isElement(item) ||\n      isComponent(item) ||\n      (includeText && isTextChildren(item, item.children))\n    ) {\n      results.push(item);\n    } else if (isArrayChildren(item, item.children)) {\n      results.push(...getAllElements(item.children, includeText));\n    } else if (isSlotsChildren(item, item.children)) {\n      results.push(...getAllElements(item.children.default?.(), includeText));\n    } else if (isArray(item)) {\n      results.push(...getAllElements(item, includeText));\n    }\n  }\n  return results;\n};\n\n/**\n * Remove Fragment\n * @param nodeList\n */\nexport function unFragment(nodeList: VNode[]) {\n  function loop(nodes: VNodeArrayChildren) {\n    const unFragmentNodeList: VNodeArrayChildren = [];\n\n    nodes.forEach((node) => {\n      if (isVNode(node) && node.type === Fragment) {\n        if (isSlotsChildren(node, node.children)) {\n          // RowSlots\n          unFragmentNodeList.push(...loop(node.children.default?.() || []));\n        } else if (isArrayChildren(node, node.children)) {\n          // VNodeArrayChildren\n          unFragmentNodeList.push(...loop(node.children));\n        } else if (isString(node.children)) {\n          // string\n          unFragmentNodeList.push(node.children);\n        }\n      } else {\n        unFragmentNodeList.push(node);\n      }\n    });\n\n    return unFragmentNodeList;\n  }\n\n  return loop(nodeList);\n}\n\nexport const resolveProps = (vn: VNode) => {\n  const props: Data = {};\n  // @ts-ignore\n  const options = vn.type?.props ?? {};\n  for (const key of Object.keys(vn.props ?? {})) {\n    const rawValue = vn.props?.[key];\n    const camelKey = toCamelCase(key);\n    let resolveValue = rawValue;\n    if (rawValue === '' || rawValue === toKebabCase(camelKey)) {\n      const type = isObject(options[camelKey])\n        ? options[camelKey].type\n        : options[camelKey];\n      if (type === Boolean) {\n        resolveValue = true;\n      }\n    }\n    props[camelKey] = resolveValue;\n  }\n  return props;\n};\n\nexport const getFirstElement = (vn: VNode | VNode[]): HTMLElement | null => {\n  if (isArray(vn)) {\n    for (const child of vn) {\n      const result = getFirstElement(child);\n      if (result) return result;\n    }\n  } else if (isElement(vn)) {\n    return vn.el as HTMLElement;\n  } else if (isComponent(vn)) {\n    if ((vn.el as Node).nodeType === 1) {\n      return vn.el as HTMLElement;\n    }\n    if (vn.component) {\n      const result = getFirstElement(vn.component.subTree);\n      if (result) return result;\n    }\n  } else if (isArrayChildren(vn, vn.children)) {\n    for (const child of vn.children) {\n      const result = getFirstElement(child);\n      if (result) return result;\n    }\n  }\n  return null;\n};\n\nexport const getSlotFunction = (param: RenderContent | undefined) => {\n  if (param) {\n    if (isFunction(param)) return param;\n    return () => param;\n  }\n  return undefined;\n};\n\nexport const getComponentsFromVNode = (vn: VNode, name: string) => {\n  const components: number[] = [];\n\n  if (isComponent(vn, vn.type)) {\n    if (vn.type.name === name) {\n      if (vn.component) {\n        components.push(vn.component.uid);\n      }\n    } else if (vn.component?.subTree) {\n      components.push(...getComponentsFromVNode(vn.component.subTree, name));\n    }\n  } else {\n    const children = getChildrenArray(vn);\n    if (children) {\n      components.push(...getComponentsFromChildren(children, name));\n    }\n  }\n\n  return components;\n};\n\nexport const getComponentsFromChildren = (\n  children: VNode[] | undefined,\n  name: string\n) => {\n  const components: number[] = [];\n\n  if (children && children.length > 0) {\n    for (const child of children) {\n      components.push(...getComponentsFromVNode(child, name));\n    }\n  }\n\n  return components;\n};\n"
  },
  {
    "path": "packages/web-vue/components/affix/CHANGELOG.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.21.1\n\n`2022-03-25`\n\n### 🐛 BugFix\n\n- Fix the problem of component reporting error under SSR ([#879](https://github.com/arco-design/arco-design-vue/pull/879))\n\n\n## 2.12.0\n\n`2021-12-24`\n\n### 🐛 BugFix\n\n- Fix the problem of displaying warning when used in combination with the anchor component ([#448](https://github.com/arco-design/arco-design-vue/pull/448))\n\n"
  },
  {
    "path": "packages/web-vue/components/affix/CHANGELOG.zh-CN.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.21.1\n\n`2022-03-25`\n\n### 🐛 问题修复\n\n- 修复组件在 SSR 下报错的问题 ([#879](https://github.com/arco-design/arco-design-vue/pull/879))\n\n\n## 2.12.0\n\n`2021-12-24`\n\n### 🐛 问题修复\n\n- 修复与 anchor 组件组合使用，显示 warning 的问题 ([#448](https://github.com/arco-design/arco-design-vue/pull/448))\n\n"
  },
  {
    "path": "packages/web-vue/components/affix/README.en-US.md",
    "content": "```yaml\nmeta:\n  type: Component\n  category: Other\ntitle: Affix\ndescription: Pin the page elements to the visible range. When the content area is relatively long and the page needs to be scrolled, the fixed pin can fix the content on the screen. Often used for side menus and button combinations.\n```\n\n*Auto translate by google.*\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/top.md\n\n@import ./__demo__/bottom.md\n\n@import ./__demo__/fix-change.md\n\n@import ./__demo__/container.md\n\n## API\n\n\n### `<affix>` Props\n\n|Attribute|Description|Type|Default|\n|---|---|---|:---:|\n|offset-top|Triggered when the specified offset is reached from the top of the window|`number`|`0`|\n|offset-bottom|Triggered when the specified offset is reached from the bottom of the window|`number`|`-`|\n|target|Scroll container, default is `window`|`string \\| HTMLElement \\| Window`|`-`|\n|target-container|The outer scroll element of `target`, the default is `window`. `Affix` will monitor the scroll event of the element and update the position of the anchor in real time. The main purpose is to solve the problem that if the outer element scrolls when the target attribute is specified as a non-window element, it may cause the nail to escape from the container.|`string \\| HTMLElement \\| Window`|`-`|\n### `<affix>` Events\n\n|Event Name|Description|Parameters|\n|---|---|---|\n|change|Triggered when the fixed state changes|fixed: `boolean`|\n### `<affix>` Methods\n\n|Method|Description|Parameters|Return|\n|---|---|---|:---:|\n|updatePosition|Update position|-|-|\n\n\n"
  },
  {
    "path": "packages/web-vue/components/affix/README.zh-CN.md",
    "content": "```yaml\nmeta:\n  type: 组件\n  category: 其他\ntitle: 固钉 Affix\ndescription: 将页面元素钉在可视范围。当内容区域比较长，需要滚动页面时，固钉可以将内容固定在屏幕上。常用于侧边菜单和按钮组合。\n```\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/top.md\n\n@import ./__demo__/bottom.md\n\n@import ./__demo__/fix-change.md\n\n@import ./__demo__/container.md\n\n## API\n\n\n### `<affix>` Props\n\n|参数名|描述|类型|默认值|\n|---|---|---|:---:|\n|offset-top|距离窗口顶部达到指定偏移量后触发|`number`|`0`|\n|offset-bottom|距离窗口底部达到指定偏移量后触发|`number`|`-`|\n|target|滚动容器，默认是 `window`|`string \\| HTMLElement \\| Window`|`-`|\n|target-container|`target`的外层滚动元素，默认是 `window`。`Affix `将会监听该元素的滚动事件，并实时更新固钉的位置。主要是为了解决 `target` 属性指定为非 `window` 元素时，如果外层元素滚动，可能会导致固钉跑出容器问题|`string \\| HTMLElement \\| Window`|`-`|\n### `<affix>` Events\n\n|事件名|描述|参数|\n|---|---|---|\n|change|固定状态发生改变时触发|fixed: `boolean`|\n### `<affix>` Methods\n\n|方法名|描述|参数|返回值|\n|---|---|---|---|\n|updatePosition|更新位置|-|-|\n\n\n"
  },
  {
    "path": "packages/web-vue/components/affix/TEMPLATE.md",
    "content": "## zh-CN\n```yaml\nmeta:\n  type: 组件\n  category: 其他\ntitle: 固钉 Affix\ndescription: 将页面元素钉在可视范围。当内容区域比较长，需要滚动页面时，固钉可以将内容固定在屏幕上。常用于侧边菜单和按钮组合。\n```\n---\n## en-US\n```yaml\nmeta:\n  type: Component\n  category: Other\ntitle: Affix\ndescription: Pin the page elements to the visible range. When the content area is relatively long and the page needs to be scrolled, the fixed pin can fix the content on the screen. Often used for side menus and button combinations.\n```\n---\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/top.md\n\n@import ./__demo__/bottom.md\n\n@import ./__demo__/fix-change.md\n\n@import ./__demo__/container.md\n\n## API\n\n%%API(affix.vue)%%\n"
  },
  {
    "path": "packages/web-vue/components/affix/__demo__/basic.md",
    "content": "```yaml\ntitle:\n  zh-CN: 基本用法\n  en-US: Basic\n```\n\n## zh-CN\n\n基本用法，不设置固定位置时，当页面滚动元素不可见时，元素固定在页面最顶部。\n\n---\n\n## en-US\n\nBasic usage, when the fixed position is not set and the scrolling element of the page is not visible, the element is fixed at the top of the page.\n\n---\n\n```vue\n<template>\n  <a-affix>\n    <a-button type=\"primary\">Affix Top</a-button>\n  </a-affix>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/affix/__demo__/bottom.md",
    "content": "```yaml\ntitle:\n  zh-CN: 底部固定\n  en-US: Fixed Bottom\n```\n\n## zh-CN\n\n当页面滚动或浏览器窗口改变时，元素向下滚动到距底部一定距离时固定。\n\n---\n\n## en-US\n\nWhen the page scrolls or the browser window changes, the element is fixed when it scrolls down to a certain distance from the bottom.\n\n---\n\n```vue\n<template>\n  <a-affix :offsetBottom=\"120\">\n    <a-button type=\"primary\">120px to affix bottom</a-button>\n  </a-affix>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/affix/__demo__/container.md",
    "content": "```yaml\ntitle:\n  zh-CN: 滚动容器\n  en-US: Container\n```\n\n## zh-CN\n\n用 `target` 设置需要监听其滚动事件的元素，默认为 window。\n\n`target` 指定为非 window 容器时，可能会出现 `target`外层元素滚动，固钉元素跑出滚动容器的问题。这个时候可以通过传入`targetContainer`传入`target`外层的滚动元素。`Affix`\n会监听该元素的滚动事件来实时更新滚钉元素的位置。 当然您也可以在业务代码中自己监听target外层滚动元素的 `scroll` 事件，并调用 `updatePosition` 去更新固钉的位置。\n\n---\n\n## en-US\n\nUse `target` to set the element whose scroll event needs to be listened to. Default is window.\n\nWhen the `target` is specified as a non-window container, the outer element of the `target` may scroll, and the fixed\nelement may run out of the scroll container. You can pass in `targetContainer` to set the scroll element\noutside `target`. `Affix` will monitor the scroll event of the element to update the position of the scroll nail element\nin real time. You can also monitor the `scroll` event of the outer scroll element of the target in the business code,\nand call `updatePosition` to update the position of the pin.\n\n---\n\n```vue\n\n<template>\n  <div\n    style=\"height: 200px; overflow: auto\"\n    ref=\"containerRef\"\n  >\n    <div style=\"height: 400px; background: #cccccc; overflow: hidden\">\n      <a-affix\n        :offsetTop=\"20\"\n        :target=\"containerRef\"\n        style=\"margin: 40px\"\n      >\n        <a-button type=\"primary\">Affix in scrolling container</a-button>\n      </a-affix>\n    </div>\n  </div>\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n  setup() {\n    const containerRef = ref();\n\n    return {\n      containerRef,\n    };\n  },\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/affix/__demo__/fix-change.md",
    "content": "```yaml\ntitle:\n  zh-CN: 固定状态改变回调\n  en-US: Callback\n```\n\n## zh-CN\n\n当固定状态发生改变时，会触发事件。\n\n---\n\n## en-US\n\nCallback when the fixed state changes.\n\n---\n\n```vue\n<template>\n  <a-affix\n    :offsetBottom=\"80\"\n    @change=\"onChange\"\n  >\n    <a-button type=\"primary\">80px to affix bottom</a-button>\n  </a-affix>\n</template>\n<script>\nimport { defineComponent } from 'vue';\n\nexport default defineComponent({\n  setup() {\n    const onChange = (fixed) => {\n      console.log(`${fixed}`);\n    };\n    return {\n      onChange\n    };\n  }\n});\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/affix/__demo__/top.md",
    "content": "```yaml\ntitle:\n  zh-CN: 顶部固定\n  en-US: Fixed Top\n```\n\n## zh-CN\n\n当页面滚动或浏览器窗口改变时，元素向上滚动到距顶部一定距离时固定。\n\n---\n\n## en-US\n\nWhen the page scrolls or the browser window changes, the element is fixed when it scrolls up to a certain distance from the top.\n\n---\n\n```vue\n<template>\n  <a-affix :offsetTop=\"80\">\n    <a-button type=\"primary\">80px to affix top</a-button>\n  </a-affix>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/affix/__test__/__snapshots__/demo.test.ts.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`<affix> demo: render [basic] correctly 1`] = `\n\"<div>\n  <!--v-if-->\n  <div class=\\\\\"\\\\\"><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n      <!--v-if-->Affix Top\n    </button></div>\n</div>\"\n`;\n\nexports[`<affix> demo: render [bottom] correctly 1`] = `\n\"<div>\n  <!--v-if-->\n  <div class=\\\\\"\\\\\"><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n      <!--v-if-->120px to affix bottom\n    </button></div>\n</div>\"\n`;\n\nexports[`<affix> demo: render [container] correctly 1`] = `\n\"<div style=\\\\\"height: 200px; overflow: auto;\\\\\">\n  <div style=\\\\\"height: 400px; background: rgb(204, 204, 204); overflow: hidden;\\\\\">\n    <div style=\\\\\"margin: 40px;\\\\\">\n      <!--v-if-->\n      <div class=\\\\\"\\\\\"><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n          <!--v-if-->Affix in scrolling container\n        </button></div>\n    </div>\n  </div>\n</div>\"\n`;\n\nexports[`<affix> demo: render [fix-change] correctly 1`] = `\n\"<div>\n  <!--v-if-->\n  <div class=\\\\\"\\\\\"><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n      <!--v-if-->80px to affix bottom\n    </button></div>\n</div>\"\n`;\n\nexports[`<affix> demo: render [top] correctly 1`] = `\n\"<div>\n  <!--v-if-->\n  <div class=\\\\\"\\\\\"><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n      <!--v-if-->80px to affix top\n    </button></div>\n</div>\"\n`;\n"
  },
  {
    "path": "packages/web-vue/components/affix/__test__/demo.test.ts",
    "content": "import demoTest from '../../../scripts/demo-test';\n\ndemoTest('affix');\n"
  },
  {
    "path": "packages/web-vue/components/affix/__test__/index.test.tsx",
    "content": "import { mount } from '@vue/test-utils';\nimport Affix from '../index';\nimport { raf } from '../../_utils/raf';\nimport { nextTick } from 'vue';\n\nconst _originAddEventListener = window.addEventListener;\nconst _getBoundingClientRect = HTMLElement.prototype.getBoundingClientRect;\nconst events: { [eventName: string]: any} = {};\n\njest.mock(\"../../_utils/raf\", () => ({\n  raf: jest.fn().mockImplementation((cb: (...args: any[]) => void) => cb())\n}));\n\ndescribe('Affix Render', () => {\n  let wrapperRect: { top?: number, bottom?: number } = {\n    top: 0,\n    bottom: 0,\n  };\n\n  const moveWrapper = (offset: { top?: number, bottom?: number }) => {\n    wrapperRect = offset;\n    events.scroll({\n      type: 'scroll',\n    });\n    jest.runAllTimers();\n  };\n\n  beforeEach(() => {\n    // @ts-ignore\n    raf.mockClear();\n  });\n  beforeAll(() => {\n    jest.useFakeTimers();\n    Object.defineProperty(window, 'addEventListener', { \n      value: jest.fn().mockImplementation((event: string, cb) => {\n        events[event] = cb;\n      })\n    });\n    Object.defineProperty(HTMLElement.prototype, 'getBoundingClientRect', { \n      value: jest.fn().mockImplementation(() => wrapperRect)\n    });\n  });\n  afterAll(() => {\n    jest.useRealTimers();\n    Object.defineProperty(window, 'addEventListener', { \n      value: _originAddEventListener\n    });\n    Object.defineProperty(HTMLElement.prototype, 'getBoundingClientRect', { \n      value: _getBoundingClientRect\n    });\n  });\n\n  it('Anchor should render correctly', async () => {\n    const wrapper = mount(Affix, {\n      slots: {\n        default: '<div>abc</div>'\n      }\n    });\n    expect(wrapper.find('.arco-affix').exists()).toBe(false);\n    moveWrapper({ top: -100 });\n    await nextTick();\n    expect(wrapper.emitted('change')).toHaveLength(1);\n    expect(wrapper.find('.arco-affix').exists()).toBe(true);\n  });\n\n  it('Should support bottom', async () => {\n    const wrapper = mount(Affix, {\n      slots: {\n        default: '<div>abc</div>'\n      },\n      props: {\n        offsetBottom: 20\n      }\n    });\n    expect(wrapper.find('.arco-affix').exists()).toBe(false);\n    moveWrapper({ bottom: 2500 });\n    await nextTick();\n    expect(wrapper.emitted('change')).toHaveLength(1);\n    expect(wrapper.find('.arco-affix').exists()).toBe(true);\n  });\n});\n"
  },
  {
    "path": "packages/web-vue/components/affix/affix.vue",
    "content": "<template>\n  <ResizeObserver @resize=\"updatePositionThrottle\">\n    <div ref=\"wrapperRef\">\n      <div v-if=\"isFixed\" :style=\"placeholderStyles\" />\n      <div :class=\"classNames\" :style=\"fixedStyles\">\n        <ResizeObserver @resize=\"updatePositionThrottle\">\n          <slot />\n        </ResizeObserver>\n      </div>\n    </div>\n  </ResizeObserver>\n</template>\n\n<script lang=\"ts\">\nimport type { CSSProperties, PropType, Ref } from 'vue';\nimport {\n  defineComponent,\n  toRefs,\n  ref,\n  watchEffect,\n  computed,\n  onMounted,\n} from 'vue';\nimport ResizeObserver from '../_components/resize-observer';\nimport { getPrefixCls } from '../_utils/global-config';\nimport { throttleByRaf } from '../_utils/throttle-by-raf';\nimport { isWindow, isUndefined } from '../_utils/is';\nimport { on, off, getElement } from '../_utils/dom';\n\nfunction getTargetRect(target: HTMLElement | Window) {\n  return isWindow(target)\n    ? {\n        top: 0,\n        bottom: window.innerHeight,\n      }\n    : target.getBoundingClientRect();\n}\n\nexport default defineComponent({\n  name: 'Affix',\n  components: {\n    ResizeObserver,\n  },\n  props: {\n    /**\n     * @zh 距离窗口顶部达到指定偏移量后触发\n     * @en Triggered when the specified offset is reached from the top of the window\n     */\n    offsetTop: {\n      type: Number,\n      default: 0,\n    },\n    /**\n     * @zh 距离窗口底部达到指定偏移量后触发\n     * @en Triggered when the specified offset is reached from the bottom of the window\n     */\n    offsetBottom: {\n      type: Number,\n    },\n    /**\n     * @zh 滚动容器，默认是 `window`\n     * @en Scroll container, default is `window`\n     */\n    target: {\n      type: [String, Object, Function] as PropType<\n        string | HTMLElement | Window\n      >,\n    },\n    /**\n     * @zh `target`的外层滚动元素，默认是 `window`。`Affix `将会监听该元素的滚动事件，并实时更新固钉的位置。主要是为了解决 `target` 属性指定为非 `window` 元素时，如果外层元素滚动，可能会导致固钉跑出容器问题\n     * @en The outer scroll element of `target`, the default is `window`. `Affix` will monitor the scroll event of the element and update the position of the anchor in real time. The main purpose is to solve the problem that if the outer element scrolls when the target attribute is specified as a non-window element, it may cause the nail to escape from the container.\n     */\n    targetContainer: {\n      type: [String, Object, Function] as PropType<\n        string | HTMLElement | Window\n      >,\n    },\n  },\n  emits: {\n    /**\n     * @zh 固定状态发生改变时触发\n     * @en Triggered when the fixed state changes\n     * @param {boolean} fixed\n     */\n    change: (fixed: boolean) => true,\n  },\n  setup(props, { emit }) {\n    const prefixCls = getPrefixCls('affix');\n    const { target, targetContainer } = toRefs(props);\n    const wrapperRef = ref<HTMLElement>();\n    const targetRef = ref<HTMLElement | Window>();\n    const isFixed = ref(false);\n    const placeholderStyles: Ref<CSSProperties> = ref({});\n    const fixedStyles: Ref<CSSProperties> = ref({});\n    const classNames = computed(() => ({ [prefixCls]: isFixed.value }));\n\n    const updatePositionThrottle = throttleByRaf(() => {\n      if (!wrapperRef.value || !targetRef.value) return;\n\n      const { offsetTop, offsetBottom } = props;\n      const offsetType = isUndefined(offsetBottom) ? 'top' : 'bottom';\n      const wrapperRect = wrapperRef.value.getBoundingClientRect();\n      const targetRect = getTargetRect(targetRef.value);\n      let newIsFixed = false;\n      let newFixedStyles = {};\n      const newPlaceholderStyles: CSSProperties = {\n        width: `${wrapperRef.value.offsetWidth}px`,\n        height: `${wrapperRef.value.offsetHeight}px`,\n      };\n\n      if (offsetType === 'top') {\n        newIsFixed = wrapperRect.top - targetRect.top < (offsetTop || 0);\n        newFixedStyles = newIsFixed\n          ? {\n              position: 'fixed',\n              top: `${targetRect.top + (offsetTop || 0)}px`,\n            }\n          : {};\n      } else {\n        newIsFixed =\n          targetRect.bottom - wrapperRect.bottom < (offsetBottom || 0);\n        newFixedStyles = newIsFixed\n          ? {\n              position: 'fixed',\n              bottom: `${\n                window.innerHeight - targetRect.bottom + (offsetBottom || 0)\n              }px`,\n            }\n          : {};\n      }\n\n      // update isFixed\n      if (newIsFixed !== isFixed.value) {\n        isFixed.value = newIsFixed;\n        emit('change', newIsFixed);\n      }\n      // update placeholderStyles\n      placeholderStyles.value = newPlaceholderStyles;\n      // update fixedStyles\n      fixedStyles.value = {\n        ...newFixedStyles,\n        ...(newIsFixed ? newPlaceholderStyles : {}),\n      };\n    });\n\n    onMounted(() => {\n      // Binding of scroll events inside the scroll container\n      watchEffect((onInvalidate) => {\n        const element =\n          (target &&\n            target.value !== window &&\n            getElement(target.value as string | HTMLElement)) ||\n          window;\n\n        targetRef.value = element;\n\n        if (element) {\n          on(element, 'scroll', updatePositionThrottle);\n          on(element, 'resize', updatePositionThrottle);\n\n          onInvalidate(() => {\n            off(element, 'scroll', updatePositionThrottle);\n            off(element, 'resize', updatePositionThrottle);\n          });\n        }\n      });\n\n      // When the scroll container is not a window, you need to bind the outer scroll event of the scroll container to update the position\n      watchEffect((onInvalidate) => {\n        if (!targetRef.value) return;\n\n        const container =\n          (targetContainer &&\n            targetContainer.value !== window &&\n            getElement(targetContainer.value as string | HTMLElement)) ||\n          window;\n\n        if (container) {\n          on(container, 'scroll', updatePositionThrottle);\n          on(container, 'resize', updatePositionThrottle);\n\n          onInvalidate(() => {\n            off(container, 'scroll', updatePositionThrottle);\n            off(container, 'resize', updatePositionThrottle);\n          });\n        }\n      });\n    });\n\n    return {\n      wrapperRef,\n      isFixed,\n      classNames,\n      placeholderStyles,\n      fixedStyles,\n      updatePositionThrottle,\n    };\n  },\n  methods: {\n    /**\n     * @zh 更新位置\n     * @en Update position\n     * @public\n     */\n    updatePosition() {\n      this.updatePositionThrottle();\n    },\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/affix/index.ts",
    "content": "import type { App } from 'vue';\nimport type { ArcoOptions } from '../_utils/types';\nimport { setGlobalConfig, getComponentPrefix } from '../_utils/global-config';\nimport _Affix from './affix.vue';\n\nconst Affix = Object.assign(_Affix, {\n  install: (app: App, options?: ArcoOptions) => {\n    setGlobalConfig(app, options);\n    const componentPrefix = getComponentPrefix(options);\n\n    app.component(componentPrefix + _Affix.name, _Affix);\n  },\n});\n\nexport type AffixInstance = InstanceType<typeof _Affix>;\n\nexport default Affix;\n"
  },
  {
    "path": "packages/web-vue/components/affix/style/index.less",
    "content": "@import '../../style/theme/index.less';\n\n@affix-prefix-cls: ~'@{prefix}-affix';\n\n.@{affix-prefix-cls} {\n  position: fixed;\n  z-index: @z-index-affix;\n}\n"
  },
  {
    "path": "packages/web-vue/components/affix/style/index.ts",
    "content": "import '../../style/index.less';\nimport './index.less';\n"
  },
  {
    "path": "packages/web-vue/components/alert/CHANGELOG.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.47.0\n\n`2023-06-02`\n\n### 🆕 Feature\n\n- add `center` prop ([#2464](https://github.com/arco-design/arco-design-vue/pull/2464))\n\n\n## 2.41.0\n\n`2022-12-30`\n\n### 🆕 Feature\n\n- Add `normal` type ([#2009](https://github.com/arco-design/arco-design-vue/pull/2009))\n\n\n## 2.36.0\n\n`2022-09-02`\n\n### 🆕 Feature\n\n- suport custom close element ([#1544](https://github.com/arco-design/arco-design-vue/pull/1544))\n\n\n## 2.3.0\n\n`2021-11-12`\n\n### 🆕 Feature\n\n- Add `#action` slot ([#148](https://github.com/arco-design/arco-design-vue/pull/148))\n\n### 🐛 BugFix\n\n- Fix the problem of incorrect name export by alert ([#142](https://github.com/arco-design/arco-design-vue/pull/142))\n\n"
  },
  {
    "path": "packages/web-vue/components/alert/CHANGELOG.zh-CN.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.47.0\n\n`2023-06-02`\n\n### 🆕 新增功能\n\n- 新增 `center` 属性 ([#2464](https://github.com/arco-design/arco-design-vue/pull/2464))\n\n\n## 2.41.0\n\n`2022-12-30`\n\n### 🆕 新增功能\n\n- 增加 `normal` 类型 ([#2009](https://github.com/arco-design/arco-design-vue/pull/2009))\n\n\n## 2.36.0\n\n`2022-09-02`\n\n### 🆕 新增功能\n\n- 支持自定义关闭元素 ([#1544](https://github.com/arco-design/arco-design-vue/pull/1544))\n\n\n## 2.3.0\n\n`2021-11-12`\n\n### 🆕 新增功能\n\n- 增加 `#action` 插槽 ([#148](https://github.com/arco-design/arco-design-vue/pull/148))\n\n### 🐛 问题修复\n\n- 修复组件导出名字错误的问题 ([#142](https://github.com/arco-design/arco-design-vue/pull/142))\n\n"
  },
  {
    "path": "packages/web-vue/components/alert/README.en-US.md",
    "content": "```yaml\nmeta:\n  type: Component\n  category: Feedback\ntitle: Alert\ndescription: When warning information is displayed to the user, the warning prompt is used to display the information that needs attention.\n```\n\n*Auto translate by google.*\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/type.md\n\n@import ./__demo__/title.md\n\n@import ./__demo__/closable.md\n\n@import ./__demo__/close-element.md\n\n@import ./__demo__/icon.md\n\n@import ./__demo__/action.md\n\n@import ./__demo__/banner.md\n\n## API\n\n\n### `<alert>` Props\n\n|Attribute|Description|Type|Default|\n|---|---|---|:---:|\n|type|Type of the alert. 2.41.0 Added `normal` type|`info \\| success \\| warning \\| error \\| normal`|`'info'`|\n|show-icon|Whether to show the icon|`boolean`|`true`|\n|closable|Whether to show the close button|`boolean`|`false`|\n|title|The title of the alert|`string`|`-`|\n|banner|Whether to use as the top announcement (remove the border and rounded corners)|`boolean`|`false`|\n|center|Whether the content is displayed in the center|`boolean`|`false`|\n### `<alert>` Events\n\n|Event Name|Description|Parameters|\n|---|---|---|\n|close|Triggered when the close button is clicked|ev: `MouseEvent`|\n|after-close|Triggered after the close animation ends|-|\n### `<alert>` Slots\n\n|Slot Name|Description|Parameters|version|\n|---|---|---|:---|\n|icon|Icon|-||\n|title|Title|-||\n|action|Actions|-||\n|close-element|Close element|-|2.36.0|\n\n\n"
  },
  {
    "path": "packages/web-vue/components/alert/README.zh-CN.md",
    "content": "```yaml\nmeta:\n  type: 组件\n  category: 反馈\ntitle: 警告提示 Alert\ndescription: 向用户显示警告的信息时，通过警告提示，展现需要关注的信息。\n```\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/type.md\n\n@import ./__demo__/title.md\n\n@import ./__demo__/closable.md\n\n@import ./__demo__/close-element.md\n\n@import ./__demo__/icon.md\n\n@import ./__demo__/action.md\n\n@import ./__demo__/banner.md\n\n## API\n\n\n### `<alert>` Props\n\n|参数名|描述|类型|默认值|\n|---|---|---|:---:|\n|type|警告提示的类型。2.41.0 新增 `normal` 类型|`info \\| success \\| warning \\| error \\| normal`|`'info'`|\n|show-icon|是否展示图标|`boolean`|`true`|\n|closable|是否展示关闭按钮|`boolean`|`false`|\n|title|警告提示的标题|`string`|`-`|\n|banner|是否作为顶部公告使用（去除边框和圆角）|`boolean`|`false`|\n|center|内容是否居中显示|`boolean`|`false`|\n### `<alert>` Events\n\n|事件名|描述|参数|\n|---|---|---|\n|close|点击关闭按钮时触发|ev: `MouseEvent`|\n|after-close|关闭动画结束后触发|-|\n### `<alert>` Slots\n\n|插槽名|描述|参数|版本|\n|---|:---:|---|:---|\n|icon|图标|-||\n|title|标题|-||\n|action|操作项|-||\n|close-element|关闭元素|-|2.36.0|\n\n\n"
  },
  {
    "path": "packages/web-vue/components/alert/TEMPLATE.md",
    "content": "## zh-CN\n```yaml\nmeta:\n  type: 组件\n  category: 反馈\ntitle: 警告提示 Alert\ndescription: 向用户显示警告的信息时，通过警告提示，展现需要关注的信息。\n```\n---\n## en-US\n```yaml\nmeta:\n  type: Component\n  category: Feedback\ntitle: Alert\ndescription: When warning information is displayed to the user, the warning prompt is used to display the information that needs attention.\n```\n---\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/type.md\n\n@import ./__demo__/title.md\n\n@import ./__demo__/closable.md\n\n@import ./__demo__/close-element.md\n\n@import ./__demo__/icon.md\n\n@import ./__demo__/action.md\n\n@import ./__demo__/banner.md\n\n## API\n\n%%API(alert.vue)%%\n"
  },
  {
    "path": "packages/web-vue/components/alert/__demo__/action.md",
    "content": "```yaml\ntitle:\n  zh-CN: 操作项\n  en-US: Action\n```\n\n## zh-CN\n\n通过 `#action` 插槽自定义操作按钮\n\n---\n\n## en-US\n\nCustomize action buttons via `#action` slot\n\n---\n\n```vue\n<template>\n  <a-space direction=\"vertical\" size=\"large\" style=\"width: 100%;\">\n    <a-alert closable>\n      This is an info alert.\n      <template #action>\n        <a-button size=\"small\" type=\"primary\">Detail</a-button>\n      </template>\n    </a-alert>\n    <a-alert title=\"Example\" closable>\n      This is an info alert.\n      <template #action>\n        <a-button size=\"small\" type=\"primary\">Detail</a-button>\n      </template>\n    </a-alert>\n  </a-space>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/alert/__demo__/banner.md",
    "content": "```yaml\ntitle:\n  zh-CN: 顶部公告\n  en-US: Top Banner\n```\n\n## zh-CN\n\n通过设置 `banner`，可将警告提示作为顶部公告使用（去除边框和圆角）。\n\n---\n\n## en-US\n\nBy setting `banner`, the warning can be used as the top announcement (removal of borders and rounded corners).\n\n---\n\n```vue\n<template>\n  <a-alert banner center>This is an info alert.</a-alert>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/alert/__demo__/basic.md",
    "content": "```yaml\ntitle:\n  zh-CN: 基本用法\n  en-US: Basic Usage\n```\n\n## zh-CN\n\n展现需要关注的信息，适用于简短的警告提示。\n\n---\n\n## en-US\n\nDisplay information that needs attention, suitable for brief warning prompts.\n\n---\n\n```vue\n<template>\n  <a-alert>This is an info alert.</a-alert>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/alert/__demo__/closable.md",
    "content": "```yaml\ntitle:\n  zh-CN: 可关闭\n  en-US: Closable\n```\n\n## zh-CN\n\n通过设置 `closable`，可开启关闭按钮。\n\n---\n\n## en-US\n\nBy setting `closable`, the close button can be turned on.\n\n---\n\n```vue\n<template>\n  <a-row :gutter=\"[40, 20]\">\n    <a-col :span=\"12\">\n      <a-alert closable>This is an info alert.</a-alert>\n    </a-col>\n    <a-col :span=\"12\">\n      <a-alert type=\"success\" closable>This is an success alert.</a-alert>\n    </a-col>\n    <a-col :span=\"12\">\n      <a-alert type=\"warning\" closable>\n        <template #title>\n          Warning\n        </template>\n        This is an warning alert.\n      </a-alert>\n    </a-col>\n    <a-col :span=\"12\">\n      <a-alert type=\"error\" closable>\n        <template #title>\n          Error\n        </template>\n        This is an error alert.\n      </a-alert>\n    </a-col>\n  </a-row>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/alert/__demo__/close-element.md",
    "content": "```yaml\ntitle:\n  zh-CN: 自定义关闭元素\n  en-US: Custom close element\n```\n\n## zh-CN\n\n指定 `close-element` slot，自定义关闭元素。\n\n---\n\n## en-US\n\nSpecify `close-element` slot, custom close element.\n\n---\n\n```vue\n<template>\n  <a-row :gutter=\"[40, 20]\">\n    <a-col :span=\"12\">\n      <a-alert closable>\n        <template #close-element>\n          <icon-close-circle />\n        </template>\n        This is an info alert.\n      </a-alert>\n    </a-col>\n    <a-col :span=\"12\">\n      <a-alert closable>\n        <template #close-element>\n          Close\n        </template>\n        This is an info alert.\n      </a-alert>\n    </a-col>\n  </a-row>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/alert/__demo__/icon.md",
    "content": "```yaml\ntitle:\n  zh-CN: 隐藏图标\n  en-US: Hide Icon\n```\n\n## zh-CN\n\n通过设置 `:show-icon=\"false\"` 来隐藏图标。\n\n---\n\n## en-US\n\nHide the icon by setting `:show-icon=\"false\"`.\n\n---\n\n```vue\n<template>\n  <a-row :gutter=\"[40, 20]\">\n    <a-col :span=\"12\">\n      <a-alert :show-icon=\"false\">This is an info alert.</a-alert>\n    </a-col>\n    <a-col :span=\"12\">\n      <a-alert type=\"success\" :show-icon=\"false\">This is an success alert.</a-alert>\n    </a-col>\n    <a-col :span=\"12\">\n      <a-alert type=\"warning\" :show-icon=\"false\">\n        <template #title>\n          Warning\n        </template>\n        This is an warning alert.\n      </a-alert>\n    </a-col>\n    <a-col :span=\"12\">\n      <a-alert type=\"error\" :show-icon=\"false\">\n        <template #title>\n          Error\n        </template>\n        This is an error alert.\n      </a-alert>\n    </a-col>\n  </a-row>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/alert/__demo__/title.md",
    "content": "```yaml\ntitle:\n  zh-CN: 提示标题\n  en-US: Alert Title\n```\n\n## zh-CN\n\n通过设置 `title` 可以给警告提示添加标题。\n\n---\n\n## en-US\n\nYou can add a title to the warning prompt by setting `title`.\n\n---\n\n```vue\n<template>\n  <a-row :gutter=\"[40, 20]\">\n    <a-col :span=\"12\">\n      <a-alert title=\"Info\">This is an info alert.</a-alert>\n    </a-col>\n    <a-col :span=\"12\">\n      <a-alert title=\"Success\" type=\"success\">This is an success alert.</a-alert>\n    </a-col>\n    <a-col :span=\"12\">\n      <a-alert type=\"warning\">\n        <template #title>\n          Warning\n        </template>\n        This is an warning alert.\n      </a-alert>\n    </a-col>\n    <a-col :span=\"12\">\n      <a-alert type=\"error\">\n        <template #title>\n          Error\n        </template>\n        This is an error alert.\n      </a-alert>\n    </a-col>\n  </a-row>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/alert/__demo__/type.md",
    "content": "```yaml\ntitle:\n  zh-CN: 提示类型\n  en-US: Alert Type\n```\n\n## zh-CN\n\n警告提示有 `info`、`success`、`warning`、`error` 四种类型。2.41.0 版本新增 `normal` 类型，此类型下默认不展示图标。\n\n---\n\n## en-US\n\nThere are four types of warnings: `info`, `success`, `warning`, and `error`. Version 2.41.0 adds the `normal` type, which has no icon by default.\n\n---\n\n```vue\n<template>\n  <a-row :gutter=\"[40, 20]\">\n    <a-col :span=\"12\">\n      <a-alert>This is an info alert.</a-alert>\n    </a-col>\n    <a-col :span=\"12\">\n      <a-alert type=\"success\">This is an success alert.</a-alert>\n    </a-col>\n    <a-col :span=\"12\">\n      <a-alert type=\"warning\">This is an warning alert.</a-alert>\n    </a-col>\n    <a-col :span=\"12\">\n      <a-alert type=\"error\">This is an error alert.</a-alert>\n    </a-col>\n    <a-col :span=\"12\">\n      <a-alert type=\"normal\">\n        <template #icon>\n          <icon-exclamation-circle-fill />\n        </template>\n        This is an normal alert.\n      </a-alert>\n    </a-col>\n  </a-row>\n</template>\n\n<script>\nimport { IconExclamationCircleFill } from '@arco-design/web-vue/es/icon';\n\nexport default {\n  components: { IconExclamationCircleFill }\n};\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/alert/__test__/__snapshots__/demo.test.ts.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`<alert> demo: render [action] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-vertical\\\\\" style=\\\\\"column-gap: 24px; row-gap: 24px; width: 100%;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <transition-stub name=\\\\\"zoom-in-top\\\\\" appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\">\n      <div role=\\\\\"alert\\\\\" class=\\\\\"arco-alert arco-alert-info\\\\\">\n        <div class=\\\\\"arco-alert-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-info-circle-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n            <path fill-rule=\\\\\"evenodd\\\\\" clip-rule=\\\\\"evenodd\\\\\" d=\\\\\"M24 44c11.046 0 20-8.954 20-20S35.046 4 24 4 4 12.954 4 24s8.954 20 20 20Zm2-30a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-2Zm0 17h1a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-6a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1h1v-8a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1v11Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n          </svg></div>\n        <div class=\\\\\"arco-alert-body\\\\\">\n          <!--v-if-->\n          <div class=\\\\\"arco-alert-content\\\\\"> This is an info alert. </div>\n        </div>\n        <div class=\\\\\"arco-alert-action\\\\\"><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-small arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n            <!--v-if-->Detail\n          </button></div>\n        <div tabindex=\\\\\"-1\\\\\" role=\\\\\"button\\\\\" aria-label=\\\\\"Close\\\\\" class=\\\\\"arco-alert-close-btn\\\\\"><span class=\\\\\"arco-icon-hover\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-close\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M9.857 9.858 24 24m0 0 14.142 14.142M24 24 38.142 9.858M24 24 9.857 38.142\\\\\"></path></svg></span></div>\n      </div>\n    </transition-stub>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <transition-stub name=\\\\\"zoom-in-top\\\\\" appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\">\n      <div role=\\\\\"alert\\\\\" class=\\\\\"arco-alert arco-alert-info arco-alert-with-title\\\\\">\n        <div class=\\\\\"arco-alert-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-info-circle-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n            <path fill-rule=\\\\\"evenodd\\\\\" clip-rule=\\\\\"evenodd\\\\\" d=\\\\\"M24 44c11.046 0 20-8.954 20-20S35.046 4 24 4 4 12.954 4 24s8.954 20 20 20Zm2-30a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-2Zm0 17h1a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-6a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1h1v-8a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1v11Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n          </svg></div>\n        <div class=\\\\\"arco-alert-body\\\\\">\n          <div class=\\\\\"arco-alert-title\\\\\">Example</div>\n          <div class=\\\\\"arco-alert-content\\\\\"> This is an info alert. </div>\n        </div>\n        <div class=\\\\\"arco-alert-action\\\\\"><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-small arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n            <!--v-if-->Detail\n          </button></div>\n        <div tabindex=\\\\\"-1\\\\\" role=\\\\\"button\\\\\" aria-label=\\\\\"Close\\\\\" class=\\\\\"arco-alert-close-btn\\\\\"><span class=\\\\\"arco-icon-hover\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-close\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M9.857 9.858 24 24m0 0 14.142 14.142M24 24 38.142 9.858M24 24 9.857 38.142\\\\\"></path></svg></span></div>\n      </div>\n    </transition-stub>\n  </div>\n</div>\"\n`;\n\nexports[`<alert> demo: render [banner] correctly 1`] = `\n\"<transition-stub name=\\\\\"zoom-in-top\\\\\" appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\">\n  <div role=\\\\\"alert\\\\\" class=\\\\\"arco-alert arco-alert-info arco-alert-banner arco-alert-center\\\\\">\n    <div class=\\\\\"arco-alert-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-info-circle-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n        <path fill-rule=\\\\\"evenodd\\\\\" clip-rule=\\\\\"evenodd\\\\\" d=\\\\\"M24 44c11.046 0 20-8.954 20-20S35.046 4 24 4 4 12.954 4 24s8.954 20 20 20Zm2-30a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-2Zm0 17h1a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-6a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1h1v-8a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1v11Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n      </svg></div>\n    <div class=\\\\\"arco-alert-body\\\\\">\n      <!--v-if-->\n      <div class=\\\\\"arco-alert-content\\\\\">This is an info alert.</div>\n    </div>\n    <!--v-if-->\n    <!--v-if-->\n  </div>\n</transition-stub>\"\n`;\n\nexports[`<alert> demo: render [basic] correctly 1`] = `\n\"<transition-stub name=\\\\\"zoom-in-top\\\\\" appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\">\n  <div role=\\\\\"alert\\\\\" class=\\\\\"arco-alert arco-alert-info\\\\\">\n    <div class=\\\\\"arco-alert-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-info-circle-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n        <path fill-rule=\\\\\"evenodd\\\\\" clip-rule=\\\\\"evenodd\\\\\" d=\\\\\"M24 44c11.046 0 20-8.954 20-20S35.046 4 24 4 4 12.954 4 24s8.954 20 20 20Zm2-30a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-2Zm0 17h1a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-6a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1h1v-8a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1v11Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n      </svg></div>\n    <div class=\\\\\"arco-alert-body\\\\\">\n      <!--v-if-->\n      <div class=\\\\\"arco-alert-content\\\\\">This is an info alert.</div>\n    </div>\n    <!--v-if-->\n    <!--v-if-->\n  </div>\n</transition-stub>\"\n`;\n\nexports[`<alert> demo: render [closable] correctly 1`] = `\n\"<div class=\\\\\"arco-row arco-row-align-start arco-row-justify-start\\\\\" style=\\\\\"margin: -10px -20px -10px -20px;\\\\\">\n  <div class=\\\\\"arco-col arco-col-12\\\\\" style=\\\\\"padding: 10px 20px 10px 20px;\\\\\">\n    <transition-stub name=\\\\\"zoom-in-top\\\\\" appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\">\n      <div role=\\\\\"alert\\\\\" class=\\\\\"arco-alert arco-alert-info\\\\\">\n        <div class=\\\\\"arco-alert-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-info-circle-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n            <path fill-rule=\\\\\"evenodd\\\\\" clip-rule=\\\\\"evenodd\\\\\" d=\\\\\"M24 44c11.046 0 20-8.954 20-20S35.046 4 24 4 4 12.954 4 24s8.954 20 20 20Zm2-30a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-2Zm0 17h1a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-6a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1h1v-8a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1v11Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n          </svg></div>\n        <div class=\\\\\"arco-alert-body\\\\\">\n          <!--v-if-->\n          <div class=\\\\\"arco-alert-content\\\\\">This is an info alert.</div>\n        </div>\n        <!--v-if-->\n        <div tabindex=\\\\\"-1\\\\\" role=\\\\\"button\\\\\" aria-label=\\\\\"Close\\\\\" class=\\\\\"arco-alert-close-btn\\\\\"><span class=\\\\\"arco-icon-hover\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-close\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M9.857 9.858 24 24m0 0 14.142 14.142M24 24 38.142 9.858M24 24 9.857 38.142\\\\\"></path></svg></span></div>\n      </div>\n    </transition-stub>\n  </div>\n  <div class=\\\\\"arco-col arco-col-12\\\\\" style=\\\\\"padding: 10px 20px 10px 20px;\\\\\">\n    <transition-stub name=\\\\\"zoom-in-top\\\\\" appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\">\n      <div role=\\\\\"alert\\\\\" class=\\\\\"arco-alert arco-alert-success\\\\\">\n        <div class=\\\\\"arco-alert-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-check-circle-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n            <path fill-rule=\\\\\"evenodd\\\\\" clip-rule=\\\\\"evenodd\\\\\" d=\\\\\"M24 44c11.046 0 20-8.954 20-20S35.046 4 24 4 4 12.954 4 24s8.954 20 20 20Zm10.207-24.379a1 1 0 0 0 0-1.414l-1.414-1.414a1 1 0 0 0-1.414 0L22 26.172l-4.878-4.88a1 1 0 0 0-1.415 0l-1.414 1.415a1 1 0 0 0 0 1.414l7 7a1 1 0 0 0 1.414 0l11.5-11.5Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n          </svg></div>\n        <div class=\\\\\"arco-alert-body\\\\\">\n          <!--v-if-->\n          <div class=\\\\\"arco-alert-content\\\\\">This is an success alert.</div>\n        </div>\n        <!--v-if-->\n        <div tabindex=\\\\\"-1\\\\\" role=\\\\\"button\\\\\" aria-label=\\\\\"Close\\\\\" class=\\\\\"arco-alert-close-btn\\\\\"><span class=\\\\\"arco-icon-hover\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-close\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M9.857 9.858 24 24m0 0 14.142 14.142M24 24 38.142 9.858M24 24 9.857 38.142\\\\\"></path></svg></span></div>\n      </div>\n    </transition-stub>\n  </div>\n  <div class=\\\\\"arco-col arco-col-12\\\\\" style=\\\\\"padding: 10px 20px 10px 20px;\\\\\">\n    <transition-stub name=\\\\\"zoom-in-top\\\\\" appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\">\n      <div role=\\\\\"alert\\\\\" class=\\\\\"arco-alert arco-alert-warning arco-alert-with-title\\\\\">\n        <div class=\\\\\"arco-alert-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-exclamation-circle-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n            <path fill-rule=\\\\\"evenodd\\\\\" clip-rule=\\\\\"evenodd\\\\\" d=\\\\\"M24 44c11.046 0 20-8.954 20-20S35.046 4 24 4 4 12.954 4 24s8.954 20 20 20Zm-2-11a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1v2Zm4-18a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V15Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n          </svg></div>\n        <div class=\\\\\"arco-alert-body\\\\\">\n          <div class=\\\\\"arco-alert-title\\\\\"> Warning </div>\n          <div class=\\\\\"arco-alert-content\\\\\"> This is an warning alert. </div>\n        </div>\n        <!--v-if-->\n        <div tabindex=\\\\\"-1\\\\\" role=\\\\\"button\\\\\" aria-label=\\\\\"Close\\\\\" class=\\\\\"arco-alert-close-btn\\\\\"><span class=\\\\\"arco-icon-hover\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-close\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M9.857 9.858 24 24m0 0 14.142 14.142M24 24 38.142 9.858M24 24 9.857 38.142\\\\\"></path></svg></span></div>\n      </div>\n    </transition-stub>\n  </div>\n  <div class=\\\\\"arco-col arco-col-12\\\\\" style=\\\\\"padding: 10px 20px 10px 20px;\\\\\">\n    <transition-stub name=\\\\\"zoom-in-top\\\\\" appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\">\n      <div role=\\\\\"alert\\\\\" class=\\\\\"arco-alert arco-alert-error arco-alert-with-title\\\\\">\n        <div class=\\\\\"arco-alert-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-close-circle-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n            <path fill-rule=\\\\\"evenodd\\\\\" clip-rule=\\\\\"evenodd\\\\\" d=\\\\\"M24 44c11.046 0 20-8.954 20-20S35.046 4 24 4 4 12.954 4 24s8.954 20 20 20Zm4.955-27.771-4.95 4.95-4.95-4.95a1 1 0 0 0-1.414 0l-1.414 1.414a1 1 0 0 0 0 1.414l4.95 4.95-4.95 4.95a1 1 0 0 0 0 1.414l1.414 1.414a1 1 0 0 0 1.414 0l4.95-4.95 4.95 4.95a1 1 0 0 0 1.414 0l1.414-1.414a1 1 0 0 0 0-1.414l-4.95-4.95 4.95-4.95a1 1 0 0 0 0-1.414l-1.414-1.414a1 1 0 0 0-1.414 0Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n          </svg></div>\n        <div class=\\\\\"arco-alert-body\\\\\">\n          <div class=\\\\\"arco-alert-title\\\\\"> Error </div>\n          <div class=\\\\\"arco-alert-content\\\\\"> This is an error alert. </div>\n        </div>\n        <!--v-if-->\n        <div tabindex=\\\\\"-1\\\\\" role=\\\\\"button\\\\\" aria-label=\\\\\"Close\\\\\" class=\\\\\"arco-alert-close-btn\\\\\"><span class=\\\\\"arco-icon-hover\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-close\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M9.857 9.858 24 24m0 0 14.142 14.142M24 24 38.142 9.858M24 24 9.857 38.142\\\\\"></path></svg></span></div>\n      </div>\n    </transition-stub>\n  </div>\n</div>\"\n`;\n\nexports[`<alert> demo: render [close-element] correctly 1`] = `\n\"<div class=\\\\\"arco-row arco-row-align-start arco-row-justify-start\\\\\" style=\\\\\"margin: -10px -20px -10px -20px;\\\\\">\n  <div class=\\\\\"arco-col arco-col-12\\\\\" style=\\\\\"padding: 10px 20px 10px 20px;\\\\\">\n    <transition-stub name=\\\\\"zoom-in-top\\\\\" appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\">\n      <div role=\\\\\"alert\\\\\" class=\\\\\"arco-alert arco-alert-info\\\\\">\n        <div class=\\\\\"arco-alert-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-info-circle-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n            <path fill-rule=\\\\\"evenodd\\\\\" clip-rule=\\\\\"evenodd\\\\\" d=\\\\\"M24 44c11.046 0 20-8.954 20-20S35.046 4 24 4 4 12.954 4 24s8.954 20 20 20Zm2-30a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-2Zm0 17h1a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-6a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1h1v-8a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1v11Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n          </svg></div>\n        <div class=\\\\\"arco-alert-body\\\\\">\n          <!--v-if-->\n          <div class=\\\\\"arco-alert-content\\\\\"> This is an info alert. </div>\n        </div>\n        <!--v-if-->\n        <div tabindex=\\\\\"-1\\\\\" role=\\\\\"button\\\\\" aria-label=\\\\\"Close\\\\\" class=\\\\\"arco-alert-close-btn\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-close-circle\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n            <path d=\\\\\"m17.643 17.643 6.364 6.364m0 0 6.364 6.364m-6.364-6.364 6.364-6.364m-6.364 6.364-6.364 6.364M42 24c0 9.941-8.059 18-18 18S6 33.941 6 24 14.059 6 24 6s18 8.059 18 18Z\\\\\"></path>\n          </svg></div>\n      </div>\n    </transition-stub>\n  </div>\n  <div class=\\\\\"arco-col arco-col-12\\\\\" style=\\\\\"padding: 10px 20px 10px 20px;\\\\\">\n    <transition-stub name=\\\\\"zoom-in-top\\\\\" appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\">\n      <div role=\\\\\"alert\\\\\" class=\\\\\"arco-alert arco-alert-info\\\\\">\n        <div class=\\\\\"arco-alert-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-info-circle-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n            <path fill-rule=\\\\\"evenodd\\\\\" clip-rule=\\\\\"evenodd\\\\\" d=\\\\\"M24 44c11.046 0 20-8.954 20-20S35.046 4 24 4 4 12.954 4 24s8.954 20 20 20Zm2-30a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-2Zm0 17h1a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-6a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1h1v-8a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1v11Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n          </svg></div>\n        <div class=\\\\\"arco-alert-body\\\\\">\n          <!--v-if-->\n          <div class=\\\\\"arco-alert-content\\\\\"> This is an info alert. </div>\n        </div>\n        <!--v-if-->\n        <div tabindex=\\\\\"-1\\\\\" role=\\\\\"button\\\\\" aria-label=\\\\\"Close\\\\\" class=\\\\\"arco-alert-close-btn\\\\\"> Close </div>\n      </div>\n    </transition-stub>\n  </div>\n</div>\"\n`;\n\nexports[`<alert> demo: render [icon] correctly 1`] = `\n\"<div class=\\\\\"arco-row arco-row-align-start arco-row-justify-start\\\\\" style=\\\\\"margin: -10px -20px -10px -20px;\\\\\">\n  <div class=\\\\\"arco-col arco-col-12\\\\\" style=\\\\\"padding: 10px 20px 10px 20px;\\\\\">\n    <transition-stub name=\\\\\"zoom-in-top\\\\\" appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\">\n      <div role=\\\\\"alert\\\\\" class=\\\\\"arco-alert arco-alert-info\\\\\">\n        <!--v-if-->\n        <div class=\\\\\"arco-alert-body\\\\\">\n          <!--v-if-->\n          <div class=\\\\\"arco-alert-content\\\\\">This is an info alert.</div>\n        </div>\n        <!--v-if-->\n        <!--v-if-->\n      </div>\n    </transition-stub>\n  </div>\n  <div class=\\\\\"arco-col arco-col-12\\\\\" style=\\\\\"padding: 10px 20px 10px 20px;\\\\\">\n    <transition-stub name=\\\\\"zoom-in-top\\\\\" appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\">\n      <div role=\\\\\"alert\\\\\" class=\\\\\"arco-alert arco-alert-success\\\\\">\n        <!--v-if-->\n        <div class=\\\\\"arco-alert-body\\\\\">\n          <!--v-if-->\n          <div class=\\\\\"arco-alert-content\\\\\">This is an success alert.</div>\n        </div>\n        <!--v-if-->\n        <!--v-if-->\n      </div>\n    </transition-stub>\n  </div>\n  <div class=\\\\\"arco-col arco-col-12\\\\\" style=\\\\\"padding: 10px 20px 10px 20px;\\\\\">\n    <transition-stub name=\\\\\"zoom-in-top\\\\\" appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\">\n      <div role=\\\\\"alert\\\\\" class=\\\\\"arco-alert arco-alert-warning arco-alert-with-title\\\\\">\n        <!--v-if-->\n        <div class=\\\\\"arco-alert-body\\\\\">\n          <div class=\\\\\"arco-alert-title\\\\\"> Warning </div>\n          <div class=\\\\\"arco-alert-content\\\\\"> This is an warning alert. </div>\n        </div>\n        <!--v-if-->\n        <!--v-if-->\n      </div>\n    </transition-stub>\n  </div>\n  <div class=\\\\\"arco-col arco-col-12\\\\\" style=\\\\\"padding: 10px 20px 10px 20px;\\\\\">\n    <transition-stub name=\\\\\"zoom-in-top\\\\\" appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\">\n      <div role=\\\\\"alert\\\\\" class=\\\\\"arco-alert arco-alert-error arco-alert-with-title\\\\\">\n        <!--v-if-->\n        <div class=\\\\\"arco-alert-body\\\\\">\n          <div class=\\\\\"arco-alert-title\\\\\"> Error </div>\n          <div class=\\\\\"arco-alert-content\\\\\"> This is an error alert. </div>\n        </div>\n        <!--v-if-->\n        <!--v-if-->\n      </div>\n    </transition-stub>\n  </div>\n</div>\"\n`;\n\nexports[`<alert> demo: render [title] correctly 1`] = `\n\"<div class=\\\\\"arco-row arco-row-align-start arco-row-justify-start\\\\\" style=\\\\\"margin: -10px -20px -10px -20px;\\\\\">\n  <div class=\\\\\"arco-col arco-col-12\\\\\" style=\\\\\"padding: 10px 20px 10px 20px;\\\\\">\n    <transition-stub name=\\\\\"zoom-in-top\\\\\" appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\">\n      <div role=\\\\\"alert\\\\\" class=\\\\\"arco-alert arco-alert-info arco-alert-with-title\\\\\">\n        <div class=\\\\\"arco-alert-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-info-circle-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n            <path fill-rule=\\\\\"evenodd\\\\\" clip-rule=\\\\\"evenodd\\\\\" d=\\\\\"M24 44c11.046 0 20-8.954 20-20S35.046 4 24 4 4 12.954 4 24s8.954 20 20 20Zm2-30a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-2Zm0 17h1a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-6a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1h1v-8a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1v11Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n          </svg></div>\n        <div class=\\\\\"arco-alert-body\\\\\">\n          <div class=\\\\\"arco-alert-title\\\\\">Info</div>\n          <div class=\\\\\"arco-alert-content\\\\\">This is an info alert.</div>\n        </div>\n        <!--v-if-->\n        <!--v-if-->\n      </div>\n    </transition-stub>\n  </div>\n  <div class=\\\\\"arco-col arco-col-12\\\\\" style=\\\\\"padding: 10px 20px 10px 20px;\\\\\">\n    <transition-stub name=\\\\\"zoom-in-top\\\\\" appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\">\n      <div role=\\\\\"alert\\\\\" class=\\\\\"arco-alert arco-alert-success arco-alert-with-title\\\\\">\n        <div class=\\\\\"arco-alert-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-check-circle-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n            <path fill-rule=\\\\\"evenodd\\\\\" clip-rule=\\\\\"evenodd\\\\\" d=\\\\\"M24 44c11.046 0 20-8.954 20-20S35.046 4 24 4 4 12.954 4 24s8.954 20 20 20Zm10.207-24.379a1 1 0 0 0 0-1.414l-1.414-1.414a1 1 0 0 0-1.414 0L22 26.172l-4.878-4.88a1 1 0 0 0-1.415 0l-1.414 1.415a1 1 0 0 0 0 1.414l7 7a1 1 0 0 0 1.414 0l11.5-11.5Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n          </svg></div>\n        <div class=\\\\\"arco-alert-body\\\\\">\n          <div class=\\\\\"arco-alert-title\\\\\">Success</div>\n          <div class=\\\\\"arco-alert-content\\\\\">This is an success alert.</div>\n        </div>\n        <!--v-if-->\n        <!--v-if-->\n      </div>\n    </transition-stub>\n  </div>\n  <div class=\\\\\"arco-col arco-col-12\\\\\" style=\\\\\"padding: 10px 20px 10px 20px;\\\\\">\n    <transition-stub name=\\\\\"zoom-in-top\\\\\" appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\">\n      <div role=\\\\\"alert\\\\\" class=\\\\\"arco-alert arco-alert-warning arco-alert-with-title\\\\\">\n        <div class=\\\\\"arco-alert-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-exclamation-circle-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n            <path fill-rule=\\\\\"evenodd\\\\\" clip-rule=\\\\\"evenodd\\\\\" d=\\\\\"M24 44c11.046 0 20-8.954 20-20S35.046 4 24 4 4 12.954 4 24s8.954 20 20 20Zm-2-11a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1v2Zm4-18a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V15Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n          </svg></div>\n        <div class=\\\\\"arco-alert-body\\\\\">\n          <div class=\\\\\"arco-alert-title\\\\\"> Warning </div>\n          <div class=\\\\\"arco-alert-content\\\\\"> This is an warning alert. </div>\n        </div>\n        <!--v-if-->\n        <!--v-if-->\n      </div>\n    </transition-stub>\n  </div>\n  <div class=\\\\\"arco-col arco-col-12\\\\\" style=\\\\\"padding: 10px 20px 10px 20px;\\\\\">\n    <transition-stub name=\\\\\"zoom-in-top\\\\\" appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\">\n      <div role=\\\\\"alert\\\\\" class=\\\\\"arco-alert arco-alert-error arco-alert-with-title\\\\\">\n        <div class=\\\\\"arco-alert-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-close-circle-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n            <path fill-rule=\\\\\"evenodd\\\\\" clip-rule=\\\\\"evenodd\\\\\" d=\\\\\"M24 44c11.046 0 20-8.954 20-20S35.046 4 24 4 4 12.954 4 24s8.954 20 20 20Zm4.955-27.771-4.95 4.95-4.95-4.95a1 1 0 0 0-1.414 0l-1.414 1.414a1 1 0 0 0 0 1.414l4.95 4.95-4.95 4.95a1 1 0 0 0 0 1.414l1.414 1.414a1 1 0 0 0 1.414 0l4.95-4.95 4.95 4.95a1 1 0 0 0 1.414 0l1.414-1.414a1 1 0 0 0 0-1.414l-4.95-4.95 4.95-4.95a1 1 0 0 0 0-1.414l-1.414-1.414a1 1 0 0 0-1.414 0Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n          </svg></div>\n        <div class=\\\\\"arco-alert-body\\\\\">\n          <div class=\\\\\"arco-alert-title\\\\\"> Error </div>\n          <div class=\\\\\"arco-alert-content\\\\\"> This is an error alert. </div>\n        </div>\n        <!--v-if-->\n        <!--v-if-->\n      </div>\n    </transition-stub>\n  </div>\n</div>\"\n`;\n\nexports[`<alert> demo: render [type] correctly 1`] = `\n\"<div class=\\\\\"arco-row arco-row-align-start arco-row-justify-start\\\\\" style=\\\\\"margin: -10px -20px -10px -20px;\\\\\">\n  <div class=\\\\\"arco-col arco-col-12\\\\\" style=\\\\\"padding: 10px 20px 10px 20px;\\\\\">\n    <transition-stub name=\\\\\"zoom-in-top\\\\\" appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\">\n      <div role=\\\\\"alert\\\\\" class=\\\\\"arco-alert arco-alert-info\\\\\">\n        <div class=\\\\\"arco-alert-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-info-circle-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n            <path fill-rule=\\\\\"evenodd\\\\\" clip-rule=\\\\\"evenodd\\\\\" d=\\\\\"M24 44c11.046 0 20-8.954 20-20S35.046 4 24 4 4 12.954 4 24s8.954 20 20 20Zm2-30a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-2Zm0 17h1a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-6a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1h1v-8a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1v11Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n          </svg></div>\n        <div class=\\\\\"arco-alert-body\\\\\">\n          <!--v-if-->\n          <div class=\\\\\"arco-alert-content\\\\\">This is an info alert.</div>\n        </div>\n        <!--v-if-->\n        <!--v-if-->\n      </div>\n    </transition-stub>\n  </div>\n  <div class=\\\\\"arco-col arco-col-12\\\\\" style=\\\\\"padding: 10px 20px 10px 20px;\\\\\">\n    <transition-stub name=\\\\\"zoom-in-top\\\\\" appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\">\n      <div role=\\\\\"alert\\\\\" class=\\\\\"arco-alert arco-alert-success\\\\\">\n        <div class=\\\\\"arco-alert-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-check-circle-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n            <path fill-rule=\\\\\"evenodd\\\\\" clip-rule=\\\\\"evenodd\\\\\" d=\\\\\"M24 44c11.046 0 20-8.954 20-20S35.046 4 24 4 4 12.954 4 24s8.954 20 20 20Zm10.207-24.379a1 1 0 0 0 0-1.414l-1.414-1.414a1 1 0 0 0-1.414 0L22 26.172l-4.878-4.88a1 1 0 0 0-1.415 0l-1.414 1.415a1 1 0 0 0 0 1.414l7 7a1 1 0 0 0 1.414 0l11.5-11.5Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n          </svg></div>\n        <div class=\\\\\"arco-alert-body\\\\\">\n          <!--v-if-->\n          <div class=\\\\\"arco-alert-content\\\\\">This is an success alert.</div>\n        </div>\n        <!--v-if-->\n        <!--v-if-->\n      </div>\n    </transition-stub>\n  </div>\n  <div class=\\\\\"arco-col arco-col-12\\\\\" style=\\\\\"padding: 10px 20px 10px 20px;\\\\\">\n    <transition-stub name=\\\\\"zoom-in-top\\\\\" appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\">\n      <div role=\\\\\"alert\\\\\" class=\\\\\"arco-alert arco-alert-warning\\\\\">\n        <div class=\\\\\"arco-alert-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-exclamation-circle-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n            <path fill-rule=\\\\\"evenodd\\\\\" clip-rule=\\\\\"evenodd\\\\\" d=\\\\\"M24 44c11.046 0 20-8.954 20-20S35.046 4 24 4 4 12.954 4 24s8.954 20 20 20Zm-2-11a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1v2Zm4-18a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V15Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n          </svg></div>\n        <div class=\\\\\"arco-alert-body\\\\\">\n          <!--v-if-->\n          <div class=\\\\\"arco-alert-content\\\\\">This is an warning alert.</div>\n        </div>\n        <!--v-if-->\n        <!--v-if-->\n      </div>\n    </transition-stub>\n  </div>\n  <div class=\\\\\"arco-col arco-col-12\\\\\" style=\\\\\"padding: 10px 20px 10px 20px;\\\\\">\n    <transition-stub name=\\\\\"zoom-in-top\\\\\" appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\">\n      <div role=\\\\\"alert\\\\\" class=\\\\\"arco-alert arco-alert-error\\\\\">\n        <div class=\\\\\"arco-alert-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-close-circle-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n            <path fill-rule=\\\\\"evenodd\\\\\" clip-rule=\\\\\"evenodd\\\\\" d=\\\\\"M24 44c11.046 0 20-8.954 20-20S35.046 4 24 4 4 12.954 4 24s8.954 20 20 20Zm4.955-27.771-4.95 4.95-4.95-4.95a1 1 0 0 0-1.414 0l-1.414 1.414a1 1 0 0 0 0 1.414l4.95 4.95-4.95 4.95a1 1 0 0 0 0 1.414l1.414 1.414a1 1 0 0 0 1.414 0l4.95-4.95 4.95 4.95a1 1 0 0 0 1.414 0l1.414-1.414a1 1 0 0 0 0-1.414l-4.95-4.95 4.95-4.95a1 1 0 0 0 0-1.414l-1.414-1.414a1 1 0 0 0-1.414 0Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n          </svg></div>\n        <div class=\\\\\"arco-alert-body\\\\\">\n          <!--v-if-->\n          <div class=\\\\\"arco-alert-content\\\\\">This is an error alert.</div>\n        </div>\n        <!--v-if-->\n        <!--v-if-->\n      </div>\n    </transition-stub>\n  </div>\n  <div class=\\\\\"arco-col arco-col-12\\\\\" style=\\\\\"padding: 10px 20px 10px 20px;\\\\\">\n    <transition-stub name=\\\\\"zoom-in-top\\\\\" appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\">\n      <div role=\\\\\"alert\\\\\" class=\\\\\"arco-alert arco-alert-normal\\\\\">\n        <div class=\\\\\"arco-alert-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-exclamation-circle-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n            <path fill-rule=\\\\\"evenodd\\\\\" clip-rule=\\\\\"evenodd\\\\\" d=\\\\\"M24 44c11.046 0 20-8.954 20-20S35.046 4 24 4 4 12.954 4 24s8.954 20 20 20Zm-2-11a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1v2Zm4-18a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V15Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n          </svg></div>\n        <div class=\\\\\"arco-alert-body\\\\\">\n          <!--v-if-->\n          <div class=\\\\\"arco-alert-content\\\\\"> This is an normal alert. </div>\n        </div>\n        <!--v-if-->\n        <!--v-if-->\n      </div>\n    </transition-stub>\n  </div>\n</div>\"\n`;\n"
  },
  {
    "path": "packages/web-vue/components/alert/__test__/demo.test.ts",
    "content": "import demoTest from '../../../scripts/demo-test';\n\ndemoTest('alert');\n"
  },
  {
    "path": "packages/web-vue/components/alert/__test__/index.test.ts",
    "content": "import { mount } from '@vue/test-utils';\nimport Alert from '../index';\n\ndescribe('Alert', () => {\n  test('should emit event', async () => {\n    const wrapper = mount(Alert, {\n      props: {\n        closable: true,\n      },\n    });\n\n    const closeBtn = wrapper.find('.arco-alert-close-btn');\n    await closeBtn.trigger('click');\n    expect(wrapper.emitted('close')).toHaveLength(1);\n  });\n\n  test('should type props', async () => {\n    const wrapper = mount(Alert)\n\n    await wrapper.setProps({ type: 'info' })\n    expect(wrapper.find('.arco-alert-info').exists()).not.toBe(null)\n\n    await wrapper.setProps({ type: 'success' })\n    expect(wrapper.find('.arco-alert-success').exists()).not.toBe(null)\n\n    await wrapper.setProps({ type: 'warning' })\n    expect(wrapper.find('.arco-alert-warning').exists()).not.toBe(null)\n\n    await wrapper.setProps({ type: 'error' })\n    expect(wrapper.find('.arco-alert-error').exists()).not.toBe(null)\n  })\n});\n"
  },
  {
    "path": "packages/web-vue/components/alert/alert.vue",
    "content": "<template>\n  <transition name=\"zoom-in-top\" @after-leave=\"handleAfterLeave\">\n    <div v-if=\"visible\" role=\"alert\" :class=\"cls\">\n      <div\n        v-if=\"showIcon && !(type === 'normal' && !$slots.icon)\"\n        :class=\"`${prefixCls}-icon`\"\n      >\n        <slot name=\"icon\">\n          <icon-info-circle-fill v-if=\"type === 'info'\" />\n          <icon-check-circle-fill v-else-if=\"type === 'success'\" />\n          <icon-exclamation-circle-fill v-else-if=\"type === 'warning'\" />\n          <icon-close-circle-fill v-else-if=\"type === 'error'\" />\n        </slot>\n      </div>\n      <div :class=\"`${prefixCls}-body`\">\n        <div v-if=\"title || $slots.title\" :class=\"`${prefixCls}-title`\">\n          <slot name=\"title\">\n            {{ title }}\n          </slot>\n        </div>\n        <div :class=\"`${prefixCls}-content`\">\n          <slot />\n        </div>\n      </div>\n      <div v-if=\"$slots.action\" :class=\"`${prefixCls}-action`\">\n        <slot name=\"action\" />\n      </div>\n      <div\n        v-if=\"closable\"\n        tabindex=\"-1\"\n        role=\"button\"\n        aria-label=\"Close\"\n        :class=\"`${prefixCls}-close-btn`\"\n        @click=\"handleClose\"\n      >\n        <slot name=\"close-element\">\n          <icon-hover>\n            <icon-close />\n          </icon-hover>\n        </slot>\n      </div>\n    </div>\n  </transition>\n</template>\n\n<script lang=\"ts\">\nimport type { PropType } from 'vue';\nimport { computed, defineComponent, ref } from 'vue';\nimport { getPrefixCls } from '../_utils/global-config';\nimport { MessageType } from '../_utils/constant';\nimport IconHover from '../_components/icon-hover.vue';\nimport IconClose from '../icon/icon-close';\nimport IconInfoCircleFill from '../icon/icon-info-circle-fill';\nimport IconCheckCircleFill from '../icon/icon-check-circle-fill';\nimport IconExclamationCircleFill from '../icon/icon-exclamation-circle-fill';\nimport IconCloseCircleFill from '../icon/icon-close-circle-fill';\n\nexport default defineComponent({\n  name: 'Alert',\n  components: {\n    IconHover,\n    IconClose,\n    IconInfoCircleFill,\n    IconCheckCircleFill,\n    IconExclamationCircleFill,\n    IconCloseCircleFill,\n  },\n  props: {\n    /**\n     * @zh 警告提示的类型。2.41.0 新增 `normal` 类型\n     * @en Type of the alert. 2.41.0 Added `normal` type\n     * @values info, success, warning, error, normal\n     */\n    type: {\n      type: String as PropType<MessageType | 'normal'>,\n      default: 'info',\n    },\n    /**\n     * @zh 是否展示图标\n     * @en Whether to show the icon\n     */\n    showIcon: {\n      type: Boolean,\n      default: true,\n    },\n    /**\n     * @zh 是否展示关闭按钮\n     * @en Whether to show the close button\n     */\n    closable: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 警告提示的标题\n     * @en The title of the alert\n     */\n    title: String,\n    /**\n     * @zh 是否作为顶部公告使用（去除边框和圆角）\n     * @en Whether to use as the top announcement (remove the border and rounded corners)\n     */\n    banner: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 内容是否居中显示\n     * @en Whether the content is displayed in the center\n     */\n    center: {\n      type: Boolean,\n      default: false,\n    },\n  },\n  emits: {\n    /**\n     * @zh 点击关闭按钮时触发\n     * @en Triggered when the close button is clicked\n     * @param {MouseEvent} ev\n     */\n    close: (ev: MouseEvent) => true,\n    /**\n     * @zh 关闭动画结束后触发\n     * @en Triggered after the close animation ends\n     */\n    afterClose: () => true,\n  },\n  /**\n   * @zh 标题\n   * @en Title\n   * @slot title\n   */\n  /**\n   * @zh 图标\n   * @en Icon\n   * @slot icon\n   */\n  /**\n   * @zh 操作项\n   * @en Actions\n   * @slot action\n   */\n  /**\n   * @zh 关闭元素\n   * @en Close element\n   * @slot close-element\n   * @version 2.36.0\n   */\n  setup(props, { slots, emit }) {\n    const prefixCls = getPrefixCls('alert');\n    const visible = ref(true);\n\n    const handleClose = (ev: MouseEvent) => {\n      visible.value = false;\n      emit('close', ev);\n    };\n\n    const handleAfterLeave = () => {\n      emit('afterClose');\n    };\n\n    const cls = computed(() => [\n      prefixCls,\n      `${prefixCls}-${props.type}`,\n      {\n        [`${prefixCls}-with-title`]: Boolean(props.title || slots.title),\n        [`${prefixCls}-banner`]: props.banner,\n        [`${prefixCls}-center`]: props.center,\n      },\n    ]);\n\n    return {\n      prefixCls,\n      cls,\n      visible,\n      handleClose,\n      handleAfterLeave,\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/alert/index.ts",
    "content": "import type { App } from 'vue';\nimport type { ArcoOptions } from '../_utils/types';\nimport { setGlobalConfig, getComponentPrefix } from '../_utils/global-config';\nimport _Alert from './alert.vue';\n\nconst Alert = Object.assign(_Alert, {\n  install: (app: App, options?: ArcoOptions) => {\n    setGlobalConfig(app, options);\n    const componentPrefix = getComponentPrefix(options);\n\n    app.component(componentPrefix + _Alert.name, _Alert);\n  },\n});\n\nexport type AlertInstance = InstanceType<typeof _Alert>;\n\nexport default Alert;\n"
  },
  {
    "path": "packages/web-vue/components/alert/style/index.less",
    "content": "@import './token.less';\n\n@alert-prefix-cls: ~'@{prefix}-alert';\n\n.@{alert-prefix-cls} {\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  width: 100%;\n  padding: @alert-padding-vertical @alert-padding-horizontal;\n  overflow: hidden;\n  font-size: @alert-font-size-text-content;\n  line-height: @alert-line-height;\n  text-align: left;\n  border-radius: @alert-border-radius;\n\n  &-with-title {\n    align-items: flex-start;\n    padding: @alert-padding-vertical_with_title\n      @alert-padding-horizontal_with_title;\n  }\n\n  &-center {\n    justify-content: center;\n\n    .@{alert-prefix-cls}-body {\n      flex: initial;\n    }\n  }\n\n  &-normal {\n    background-color: @alert-normal-color-bg;\n    border: @alert-border-width solid @alert-normal-color-border;\n  }\n\n  &-info {\n    background-color: @alert-info-color-bg;\n    border: @alert-border-width solid @alert-info-color-border;\n  }\n\n  &-success {\n    background-color: @alert-success-color-bg;\n    border: @alert-border-width solid @alert-success-color-border;\n  }\n\n  &-warning {\n    background-color: @alert-warning-color-bg;\n    border: @alert-border-width solid @alert-warning-color-border;\n  }\n\n  &-error {\n    background-color: @alert-error-color-bg;\n    border: @alert-border-width solid @alert-error-color-border;\n  }\n\n  &-banner {\n    border: none;\n    border-radius: 0;\n  }\n\n  &-body {\n    position: relative;\n    flex: 1;\n  }\n\n  &-title {\n    margin-bottom: @alert-title-margin-bottom;\n    font-weight: @alert-font-weight-title;\n    font-size: @alert-font-size-text-title;\n    line-height: @alert-title-line-height;\n  }\n\n  &-normal &-title {\n    color: @alert-normal-color-text-title;\n  }\n\n  &-normal &-content {\n    color: @alert-normal-color-text-content;\n  }\n\n  &-normal&-with-title &-content {\n    color: @alert-normal-color-text-content_title;\n  }\n\n  &-info &-title {\n    color: @alert-info-color-text-title;\n  }\n\n  &-info &-content {\n    color: @alert-info-color-text-content;\n  }\n\n  &-info&-with-title &-content {\n    color: @alert-info-color-text-content_title;\n  }\n\n  &-success &-title {\n    color: @alert-success-color-text-title;\n  }\n\n  &-success &-content {\n    color: @alert-success-color-text-content;\n  }\n\n  &-success&-with-title &-content {\n    color: @alert-success-color-text-content_title;\n  }\n\n  &-warning &-title {\n    color: @alert-warning-color-text-title;\n  }\n\n  &-warning &-content {\n    color: @alert-warning-color-text-content;\n  }\n\n  &-warning&-with-title &-content {\n    color: @alert-warning-color-text-content_title;\n  }\n\n  &-error &-title {\n    color: @alert-error-color-text-title;\n  }\n\n  &-error &-content {\n    color: @alert-error-color-text-content;\n  }\n\n  &-error&-with-title &-content {\n    color: @alert-error-color-text-content_title;\n  }\n\n  &-icon {\n    margin-right: @alert-margin-icon-right;\n\n    svg {\n      font-size: @alert-font-size-icon;\n      vertical-align: -3px;\n    }\n  }\n\n  &-with-title &-icon svg {\n    font-size: @alert-font-size-icon_with_title;\n    vertical-align: -5px;\n  }\n\n  &-normal &-icon svg {\n    color: @alert-normal-color-icon;\n  }\n\n  &-info &-icon svg {\n    color: @alert-info-color-icon;\n  }\n\n  &-success &-icon svg {\n    color: @alert-success-color-icon;\n  }\n\n  &-warning &-icon svg {\n    color: @alert-warning-color-icon;\n  }\n\n  &-error &-icon svg {\n    color: @alert-error-color-icon;\n  }\n\n  &-close-btn {\n    top: 4px;\n    right: 0;\n    box-sizing: border-box;\n    margin-left: @alert-margin-close-icon-left;\n    padding: 0;\n    color: @alert-color-close-icon;\n    font-size: @alert-font-size-close-icon;\n    background-color: transparent;\n    border: none;\n    outline: none;\n    cursor: pointer;\n    transition: color @transition-duration-1 @transition-timing-function-linear;\n\n    &:hover {\n      color: @alert-color-close-icon_hover;\n    }\n  }\n\n  &-action + &-close-btn {\n    margin-left: @alert-margin-action-right;\n  }\n\n  &-action {\n    margin-left: @alert-margin-action-left;\n  }\n\n  &-with-title &-close-btn {\n    margin-top: 0;\n    margin-right: 0;\n  }\n}\n"
  },
  {
    "path": "packages/web-vue/components/alert/style/index.ts",
    "content": "import '../../style/index.less';\nimport './index.less';\n"
  },
  {
    "path": "packages/web-vue/components/alert/style/token.less",
    "content": "@import '../../style/theme/index.less';\n\n@alert-border-width: @border-1;\n@alert-min-height: @size-10;\n@alert-border-radius: @radius-small;\n@alert-line-height: 1.5715;\n@alert-title-line-height: 1.5;\n@alert-title-margin-bottom: @spacing-2;\n@alert-margin-icon-right: @spacing-4;\n\n@alert-padding-horizontal: @spacing-7 - @alert-border-width;\n@alert-padding-vertical: 9px - @alert-border-width;\n@alert-padding-horizontal_with_title: @spacing-7 - @alert-border-width;\n@alert-padding-vertical_with_title: @spacing-7 - @alert-border-width;\n\n@alert-font-weight-title: @font-weight-500;\n@alert-font-size-text-title: @font-size-title-1;\n@alert-font-size-text-content: @font-size-body-3;\n@alert-font-size-icon: 16px;\n@alert-font-size-icon_with_title: 18px;\n@alert-font-size-close-icon: 12px;\n\n/*****************************************************\n * type: info / warning / error /success\n *****************************************************/\n@alert-normal-color-bg: var(~'@{arco-cssvars-prefix}-color-neutral-2');\n@alert-normal-color-border: @color-transparent;\n@alert-normal-color-icon: var(~'@{arco-cssvars-prefix}-color-neutral-4');\n@alert-normal-color-text-title: var(~'@{arco-cssvars-prefix}-color-text-1');\n@alert-normal-color-text-content: var(~'@{arco-cssvars-prefix}-color-text-1');\n@alert-normal-color-text-content_title: var(\n  ~'@{arco-cssvars-prefix}-color-text-2'\n);\n\n@alert-info-color-bg: var(~'@{arco-cssvars-prefix}-color-primary-light-1');\n@alert-info-color-border: @color-transparent;\n@alert-info-color-icon: @color-primary-6;\n@alert-info-color-text-title: var(~'@{arco-cssvars-prefix}-color-text-1');\n@alert-info-color-text-content: var(~'@{arco-cssvars-prefix}-color-text-1');\n@alert-info-color-text-content_title: var(\n  ~'@{arco-cssvars-prefix}-color-text-2'\n);\n\n@alert-warning-color-bg: var(~'@{arco-cssvars-prefix}-color-warning-light-1');\n@alert-warning-color-border: @color-transparent;\n@alert-warning-color-icon: @color-warning-6;\n@alert-warning-color-text-title: var(~'@{arco-cssvars-prefix}-color-text-1');\n@alert-warning-color-text-content: var(~'@{arco-cssvars-prefix}-color-text-1');\n@alert-warning-color-text-content_title: var(\n  ~'@{arco-cssvars-prefix}-color-text-2'\n);\n\n@alert-error-color-bg: var(~'@{arco-cssvars-prefix}-color-danger-light-1');\n@alert-error-color-border: @color-transparent;\n@alert-error-color-icon: @color-danger-6;\n@alert-error-color-text-title: var(~'@{arco-cssvars-prefix}-color-text-1');\n@alert-error-color-text-content: var(~'@{arco-cssvars-prefix}-color-text-1');\n@alert-error-color-text-content_title: var(\n  ~'@{arco-cssvars-prefix}-color-text-2'\n);\n\n@alert-success-color-bg: var(~'@{arco-cssvars-prefix}-color-success-light-1');\n@alert-success-color-border: @color-transparent;\n@alert-success-color-icon: @color-success-6;\n@alert-success-color-text-title: var(~'@{arco-cssvars-prefix}-color-text-1');\n@alert-success-color-text-content: var(~'@{arco-cssvars-prefix}-color-text-1');\n@alert-success-color-text-content_title: var(\n  ~'@{arco-cssvars-prefix}-color-text-2'\n);\n\n// 关闭图标\n@alert-color-close-icon: var(~'@{arco-cssvars-prefix}-color-text-2');\n@alert-color-close-icon_hover: var(~'@{arco-cssvars-prefix}-color-text-1');\n@alert-margin-close-icon-left: @spacing-4;\n@alert-margin-action-left: @spacing-4;\n@alert-margin-action-right: @spacing-4;\n"
  },
  {
    "path": "packages/web-vue/components/anchor/CHANGELOG.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.11.0\n\n`2021-12-17`\n\n### 🐛 BugFix\n\n- Fix the problem that the hash position will not be located after loading ([#400](https://github.com/arco-design/arco-design-vue/pull/400))\n\n"
  },
  {
    "path": "packages/web-vue/components/anchor/CHANGELOG.zh-CN.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.11.0\n\n`2021-12-17`\n\n### 🐛 问题修复\n\n- 修复加载后不会定位到 hash 位置的问题 ([#400](https://github.com/arco-design/arco-design-vue/pull/400))\n\n"
  },
  {
    "path": "packages/web-vue/components/anchor/README.en-US.md",
    "content": "```yaml\nmeta:\n  type: Component\n  category: Other\ntitle: Anchor\ndescription: Through the anchor point, you can quickly find the position of the information content on the current page.\n```\n\n*Auto translate by google.*\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/line-less.md\n\n@import ./__demo__/affix.md\n\n@import ./__demo__/boundary.md\n\n@import ./__demo__/hash.md\n\n## API\n\n\n### `<anchor>` Props\n\n|Attribute|Description|Type|Default|\n|---|---|---|:---:|\n|boundary|Scrolling boundary value. After setting the value to a number, it will stop scrolling when the distance is `boundary` from the scrolling container.|`'start' \\| 'end' \\| 'center' \\| 'nearest' \\| number`|`'start'`|\n|line-less|Whether to show the left axis|`boolean`|`false`|\n|scroll-container|Scroll container|`string \\| HTMLElement \\| Window`|`-`|\n|change-hash|Whether to change the hash. When set to `false`, clicking on the anchor will not change the hash of the page|`boolean`|`true`|\n|smooth|Whether to use smooth scrolling|`boolean`|`true`|\n### `<anchor>` Events\n\n|Event Name|Description|Parameters|\n|---|---|---|\n|select|Triggered when the user clicks on the link|hash: ` string \\| undefined `<br>preHash: `string`|\n|change|Triggered when the link changes|hash: `string`|\n\n\n\n\n### `<anchor-link>` Props\n\n|Attribute|Description|Type|Default|\n|---|---|---|:---:|\n|title|The text content of the anchor link|`string`|`-`|\n|href|The address of the anchor link|`string`|`-`|\n\n\n"
  },
  {
    "path": "packages/web-vue/components/anchor/README.zh-CN.md",
    "content": "```yaml\nmeta:\n  type: 组件\n  category: 其他\ntitle: 锚点 Anchor\ndescription: 通过锚点可快速找到信息内容在当前页面的位置。\n```\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/line-less.md\n\n@import ./__demo__/affix.md\n\n@import ./__demo__/boundary.md\n\n@import ./__demo__/hash.md\n\n## API\n\n\n### `<anchor>` Props\n\n|参数名|描述|类型|默认值|\n|---|---|---|:---:|\n|boundary|滚动边界值，设置该值为数字后，将会在距离滚动容器 `boundary` 距离时停止滚动。|`'start' \\| 'end' \\| 'center' \\| 'nearest' \\| number`|`'start'`|\n|line-less|是否显示左侧轴线|`boolean`|`false`|\n|scroll-container|滚动容器|`string \\| HTMLElement \\| Window`|`-`|\n|change-hash|是否改变hash。设置为 `false` 时点击锚点不会改变页面的 hash|`boolean`|`true`|\n|smooth|是否使用平滑滚动|`boolean`|`true`|\n### `<anchor>` Events\n\n|事件名|描述|参数|\n|---|---|---|\n|select|用户点击链接时触发|hash: ` string \\| undefined `<br>preHash: `string`|\n|change|链接发生改变时触发|hash: `string`|\n\n\n\n\n### `<anchor-link>` Props\n\n|参数名|描述|类型|默认值|\n|---|---|---|:---:|\n|title|锚点链接的文本内容|`string`|`-`|\n|href|锚点链接的地址|`string`|`-`|\n\n\n"
  },
  {
    "path": "packages/web-vue/components/anchor/TEMPLATE.md",
    "content": "## zh-CN\n```yaml\nmeta:\n  type: 组件\n  category: 其他\ntitle: 锚点 Anchor\ndescription: 通过锚点可快速找到信息内容在当前页面的位置。\n```\n---\n## en-US\n```yaml\nmeta:\n  type: Component\n  category: Other\ntitle: Anchor\ndescription: Through the anchor point, you can quickly find the position of the information content on the current page.\n```\n---\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/line-less.md\n\n@import ./__demo__/affix.md\n\n@import ./__demo__/boundary.md\n\n@import ./__demo__/hash.md\n\n## API\n\n%%API(anchor.vue)%%\n\n%%API(anchor-link.vue)%%\n"
  },
  {
    "path": "packages/web-vue/components/anchor/__demo__/affix.md",
    "content": "```yaml\ntitle:\n  zh-CN: 固钉位置\n  en-US: Affix Position\n```\n\n## zh-CN\n\n使用 `affix` 组件可以让锚点固定在页面之内。\n\n---\n\n## en-US\n\nUse the `affix` component to fix the anchor point within the page.\n\n---\n\n```vue\n<template>\n  <a-affix :offsetTop=\"80\">\n    <a-anchor :style=\"{backgroundColor: 'var(--color-bg-1)'}\">\n      <a-anchor-link href=\"#basic\">Basic</a-anchor-link>\n      <a-anchor-link href=\"#line-less\">LineLess Mode</a-anchor-link>\n      <a-anchor-link href=\"#affix\">\n        Affix\n        <template #sublist>\n          <a-anchor-link href=\"#boundary\">Scroll Boundary</a-anchor-link>\n          <a-anchor-link href=\"#hash\">Hash mode</a-anchor-link>\n        </template>\n      </a-anchor-link>\n    </a-anchor>\n  </a-affix>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/anchor/__demo__/basic.md",
    "content": "```yaml\ntitle:\n  zh-CN: 基本用法\n  en-US: Basic Usage\n```\n\n## zh-CN\n\n锚点的基础用法\n\n---\n\n## en-US\n\nBasic usage of anchors\n\n---\n\n```vue\n<template>\n  <a-anchor>\n    <a-anchor-link href=\"#basic\">Basic</a-anchor-link>\n    <a-anchor-link href=\"#line-less\">LineLess Mode</a-anchor-link>\n    <a-anchor-link href=\"#affix\">\n      Affix\n      <template #sublist>\n        <a-anchor-link href=\"#boundary\">Scroll Boundary</a-anchor-link>\n        <a-anchor-link href=\"#hash\">Hash mode</a-anchor-link>\n      </template>\n    </a-anchor-link>\n  </a-anchor>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/anchor/__demo__/boundary.md",
    "content": "```yaml\ntitle:\n  zh-CN: 锚点滚动偏移量\n  en-US: boundary\n```\n\n## zh-CN\n\n可以设置 `boundary` 来定制锚点滚动偏移量。\n\n---\n\n## en-US\n\nYou can set `boundary` to customize the anchor point scroll offset.\n\n---\n\n```vue\n<template>\n  <a-anchor boundary=\"center\">\n    <a-anchor-link href=\"#basic\">Basic</a-anchor-link>\n    <a-anchor-link href=\"#line-less\">LineLess Mode</a-anchor-link>\n    <a-anchor-link href=\"#affix\">\n      Affix\n      <template #sublist>\n        <a-anchor-link href=\"#boundary\">Scroll Boundary</a-anchor-link>\n        <a-anchor-link href=\"#hash\">Hash mode</a-anchor-link>\n      </template>\n    </a-anchor-link>\n  </a-anchor>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/anchor/__demo__/hash.md",
    "content": "```yaml\ntitle:\n  zh-CN: 是否改变hash\n  en-US: Hash\n```\n\n## zh-CN\n\n可以设置点击锚点而不改变浏览器历史。\n\n---\n\n## en-US\n\nYou can set the click anchor without changing the browser history.\n\n---\n\n```vue\n<template>\n  <a-anchor :change-hash=\"false\">\n    <a-anchor-link href=\"#basic\">Basic</a-anchor-link>\n    <a-anchor-link href=\"#line-less\">LineLess Mode</a-anchor-link>\n    <a-anchor-link href=\"#affix\">\n      Affix\n      <template #sublist>\n        <a-anchor-link href=\"#boundary\">Scroll Boundary</a-anchor-link>\n        <a-anchor-link href=\"#hash\">Hash mode</a-anchor-link>\n      </template>\n    </a-anchor-link>\n  </a-anchor>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/anchor/__demo__/line-less.md",
    "content": "```yaml\ntitle:\n  zh-CN: 无轴线模式\n  en-US: Line Less\n```\n\n## zh-CN\n\n设置 `line-less` 时，可以使用无左侧轴线的锚点样式。\n\n---\n\n## en-US\n\nWhen setting `line-less`, you can use an anchor style without a left axis.\n\n---\n\n```vue\n<template>\n  <a-anchor line-less>\n    <a-anchor-link href=\"#basic\">Basic</a-anchor-link>\n    <a-anchor-link href=\"#line-less\">LineLess Mode</a-anchor-link>\n    <a-anchor-link href=\"#affix\">\n      Affix\n      <template #sublist>\n        <a-anchor-link href=\"#boundary\">Scroll Boundary</a-anchor-link>\n        <a-anchor-link href=\"#hash\">Hash mode</a-anchor-link>\n      </template>\n    </a-anchor-link>\n  </a-anchor>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/anchor/__test__/__snapshots__/demo.test.ts.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`<anchor> demo: render [affix] correctly 1`] = `\n\"<div>\n  <!--v-if-->\n  <div class=\\\\\"\\\\\">\n    <div class=\\\\\"arco-anchor\\\\\">\n      <div class=\\\\\"arco-anchor-line-slider\\\\\"></div>\n      <ul class=\\\\\"arco-anchor-list\\\\\">\n        <li class=\\\\\"arco-anchor-link-item\\\\\"><a class=\\\\\"arco-anchor-link\\\\\" href=\\\\\"#basic\\\\\">Basic</a>\n          <!--v-if-->\n        </li>\n        <li class=\\\\\"arco-anchor-link-item\\\\\"><a class=\\\\\"arco-anchor-link\\\\\" href=\\\\\"#line-less\\\\\">LineLess Mode</a>\n          <!--v-if-->\n        </li>\n        <li class=\\\\\"arco-anchor-link-item\\\\\"><a class=\\\\\"arco-anchor-link\\\\\" href=\\\\\"#affix\\\\\"> Affix </a>\n          <ul class=\\\\\"arco-anchor-sublist\\\\\">\n            <li class=\\\\\"arco-anchor-link-item\\\\\"><a class=\\\\\"arco-anchor-link\\\\\" href=\\\\\"#boundary\\\\\">Scroll Boundary</a>\n              <!--v-if-->\n            </li>\n            <li class=\\\\\"arco-anchor-link-item\\\\\"><a class=\\\\\"arco-anchor-link\\\\\" href=\\\\\"#hash\\\\\">Hash mode</a>\n              <!--v-if-->\n            </li>\n          </ul>\n        </li>\n      </ul>\n    </div>\n  </div>\n</div>\"\n`;\n\nexports[`<anchor> demo: render [basic] correctly 1`] = `\n\"<div class=\\\\\"arco-anchor\\\\\">\n  <div class=\\\\\"arco-anchor-line-slider\\\\\"></div>\n  <ul class=\\\\\"arco-anchor-list\\\\\">\n    <li class=\\\\\"arco-anchor-link-item\\\\\"><a class=\\\\\"arco-anchor-link\\\\\" href=\\\\\"#basic\\\\\">Basic</a>\n      <!--v-if-->\n    </li>\n    <li class=\\\\\"arco-anchor-link-item\\\\\"><a class=\\\\\"arco-anchor-link\\\\\" href=\\\\\"#line-less\\\\\">LineLess Mode</a>\n      <!--v-if-->\n    </li>\n    <li class=\\\\\"arco-anchor-link-item\\\\\"><a class=\\\\\"arco-anchor-link\\\\\" href=\\\\\"#affix\\\\\"> Affix </a>\n      <ul class=\\\\\"arco-anchor-sublist\\\\\">\n        <li class=\\\\\"arco-anchor-link-item\\\\\"><a class=\\\\\"arco-anchor-link\\\\\" href=\\\\\"#boundary\\\\\">Scroll Boundary</a>\n          <!--v-if-->\n        </li>\n        <li class=\\\\\"arco-anchor-link-item\\\\\"><a class=\\\\\"arco-anchor-link\\\\\" href=\\\\\"#hash\\\\\">Hash mode</a>\n          <!--v-if-->\n        </li>\n      </ul>\n    </li>\n  </ul>\n</div>\"\n`;\n\nexports[`<anchor> demo: render [boundary] correctly 1`] = `\n\"<div class=\\\\\"arco-anchor\\\\\">\n  <div class=\\\\\"arco-anchor-line-slider\\\\\"></div>\n  <ul class=\\\\\"arco-anchor-list\\\\\">\n    <li class=\\\\\"arco-anchor-link-item\\\\\"><a class=\\\\\"arco-anchor-link\\\\\" href=\\\\\"#basic\\\\\">Basic</a>\n      <!--v-if-->\n    </li>\n    <li class=\\\\\"arco-anchor-link-item\\\\\"><a class=\\\\\"arco-anchor-link\\\\\" href=\\\\\"#line-less\\\\\">LineLess Mode</a>\n      <!--v-if-->\n    </li>\n    <li class=\\\\\"arco-anchor-link-item\\\\\"><a class=\\\\\"arco-anchor-link\\\\\" href=\\\\\"#affix\\\\\"> Affix </a>\n      <ul class=\\\\\"arco-anchor-sublist\\\\\">\n        <li class=\\\\\"arco-anchor-link-item\\\\\"><a class=\\\\\"arco-anchor-link\\\\\" href=\\\\\"#boundary\\\\\">Scroll Boundary</a>\n          <!--v-if-->\n        </li>\n        <li class=\\\\\"arco-anchor-link-item\\\\\"><a class=\\\\\"arco-anchor-link\\\\\" href=\\\\\"#hash\\\\\">Hash mode</a>\n          <!--v-if-->\n        </li>\n      </ul>\n    </li>\n  </ul>\n</div>\"\n`;\n\nexports[`<anchor> demo: render [hash] correctly 1`] = `\n\"<div class=\\\\\"arco-anchor\\\\\">\n  <div class=\\\\\"arco-anchor-line-slider\\\\\"></div>\n  <ul class=\\\\\"arco-anchor-list\\\\\">\n    <li class=\\\\\"arco-anchor-link-item\\\\\"><a class=\\\\\"arco-anchor-link\\\\\" href=\\\\\"#basic\\\\\">Basic</a>\n      <!--v-if-->\n    </li>\n    <li class=\\\\\"arco-anchor-link-item\\\\\"><a class=\\\\\"arco-anchor-link\\\\\" href=\\\\\"#line-less\\\\\">LineLess Mode</a>\n      <!--v-if-->\n    </li>\n    <li class=\\\\\"arco-anchor-link-item\\\\\"><a class=\\\\\"arco-anchor-link\\\\\" href=\\\\\"#affix\\\\\"> Affix </a>\n      <ul class=\\\\\"arco-anchor-sublist\\\\\">\n        <li class=\\\\\"arco-anchor-link-item\\\\\"><a class=\\\\\"arco-anchor-link\\\\\" href=\\\\\"#boundary\\\\\">Scroll Boundary</a>\n          <!--v-if-->\n        </li>\n        <li class=\\\\\"arco-anchor-link-item\\\\\"><a class=\\\\\"arco-anchor-link\\\\\" href=\\\\\"#hash\\\\\">Hash mode</a>\n          <!--v-if-->\n        </li>\n      </ul>\n    </li>\n  </ul>\n</div>\"\n`;\n\nexports[`<anchor> demo: render [line-less] correctly 1`] = `\n\"<div class=\\\\\"arco-anchor arco-anchor-line-less\\\\\">\n  <!--v-if-->\n  <ul class=\\\\\"arco-anchor-list\\\\\">\n    <li class=\\\\\"arco-anchor-link-item\\\\\"><a class=\\\\\"arco-anchor-link\\\\\" href=\\\\\"#basic\\\\\">Basic</a>\n      <!--v-if-->\n    </li>\n    <li class=\\\\\"arco-anchor-link-item\\\\\"><a class=\\\\\"arco-anchor-link\\\\\" href=\\\\\"#line-less\\\\\">LineLess Mode</a>\n      <!--v-if-->\n    </li>\n    <li class=\\\\\"arco-anchor-link-item\\\\\"><a class=\\\\\"arco-anchor-link\\\\\" href=\\\\\"#affix\\\\\"> Affix </a>\n      <ul class=\\\\\"arco-anchor-sublist\\\\\">\n        <li class=\\\\\"arco-anchor-link-item\\\\\"><a class=\\\\\"arco-anchor-link\\\\\" href=\\\\\"#boundary\\\\\">Scroll Boundary</a>\n          <!--v-if-->\n        </li>\n        <li class=\\\\\"arco-anchor-link-item\\\\\"><a class=\\\\\"arco-anchor-link\\\\\" href=\\\\\"#hash\\\\\">Hash mode</a>\n          <!--v-if-->\n        </li>\n      </ul>\n    </li>\n  </ul>\n</div>\"\n`;\n"
  },
  {
    "path": "packages/web-vue/components/anchor/__test__/demo.test.ts",
    "content": "import demoTest from '../../../scripts/demo-test';\n\ndemoTest('anchor');\n"
  },
  {
    "path": "packages/web-vue/components/anchor/__test__/index.test.ts",
    "content": "import { mount } from '@vue/test-utils';\nimport Anchor from '../index';\n\ndescribe('Anchor', () => {\n  test('should emit change event', async () => {\n    const wrapper = mount(Anchor, {\n      slots: {\n        default:\n          '<a-anchor-link href=\"#anchor1\">Anchor1</a-anchor-link>' +\n          '<a-anchor-link href=\"#anchor2\">Anchor2</a-anchor-link>',\n      },\n      global: {\n        plugins: [Anchor],\n      },\n    });\n    const link = wrapper.find('a');\n    await link.trigger('click');\n    expect(wrapper.emitted('change')[0]).toEqual(['#anchor1']);\n    expect(wrapper.emitted('select')[0]).toEqual(['#anchor1', '#anchor1']);\n  });\n});\n"
  },
  {
    "path": "packages/web-vue/components/anchor/anchor-link.vue",
    "content": "<template>\n  <li ref=\"linkRef\" :class=\"cls\">\n    <a :class=\"linkCls\" :href=\"href\" @click=\"handleClick\">\n      <slot>{{ title }}</slot>\n    </a>\n    <ul v-if=\"$slots.sublist\" :class=\"`${prefixCls}-sublist`\">\n      <slot name=\"sublist\" />\n    </ul>\n  </li>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, inject, onMounted, ref } from 'vue';\nimport { getPrefixCls } from '../_utils/global-config';\nimport { anchorInjectionKey } from './context';\n\nexport default defineComponent({\n  name: 'AnchorLink',\n  props: {\n    /**\n     * @zh 锚点链接的文本内容\n     * @en The text content of the anchor link\n     */\n    title: String,\n    /**\n     * @zh 锚点链接的地址\n     * @en The address of the anchor link\n     */\n    href: String,\n  },\n  setup(props) {\n    const prefixCls = getPrefixCls('anchor');\n    const linkCls = `${prefixCls}-link`;\n    const linkRef = ref<HTMLElement>();\n\n    const context = inject(anchorInjectionKey, undefined);\n\n    onMounted(() => {\n      if (props.href && linkRef.value) {\n        context?.addLink(props.href, linkRef.value);\n      }\n    });\n\n    const cls = computed(() => [\n      `${linkCls}-item`,\n      {\n        [`${linkCls}-active`]: context?.currentLink === props.href,\n      },\n    ]);\n\n    const handleClick = (e: MouseEvent) => context?.handleClick(e, props.href);\n\n    return {\n      prefixCls,\n      linkCls,\n      cls,\n      linkRef,\n      handleClick,\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/anchor/anchor.vue",
    "content": "<template>\n  <div ref=\"anchorRef\" :class=\"cls\">\n    <div\n      v-if=\"!lineLess\"\n      ref=\"lineSliderRef\"\n      :class=\"`${prefixCls}-line-slider`\"\n    />\n    <ul :class=\"`${prefixCls}-list`\">\n      <slot />\n    </ul>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  nextTick,\n  onBeforeUnmount,\n  onMounted,\n  PropType,\n  provide,\n  reactive,\n  ref,\n  watch,\n} from 'vue';\nimport computeScrollIntoView from 'compute-scroll-into-view';\nimport { getPrefixCls } from '../_utils/global-config';\nimport { isNumber, isWindow } from '../_utils/is';\nimport { getElement, off, on } from '../_utils/dom';\nimport { slide } from './utils';\nimport { anchorInjectionKey } from './context';\nimport { throttleByRaf } from '../_utils/throttle-by-raf';\n\nconst BOUNDARY_POSITIONS = ['start', 'end', 'center', 'nearest'] as const;\ntype BoundaryPosition = typeof BOUNDARY_POSITIONS[number];\n\nexport default defineComponent({\n  name: 'Anchor',\n  props: {\n    /**\n     * @zh 滚动边界值，设置该值为数字后，将会在距离滚动容器 `boundary` 距离时停止滚动。\n     * @en Scrolling boundary value. After setting the value to a number, it will stop scrolling when the distance is `boundary` from the scrolling container.\n     * @values 'start', 'end', 'center', 'nearest', number\n     */\n    boundary: {\n      type: [Number, String] as PropType<BoundaryPosition | number>,\n      default: 'start',\n      validator: (value: any) => {\n        return isNumber(value) || BOUNDARY_POSITIONS.includes(value);\n      },\n    },\n    /**\n     * @zh 是否显示左侧轴线\n     * @en Whether to show the left axis\n     */\n    lineLess: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 滚动容器\n     * @en Scroll container\n     */\n    scrollContainer: {\n      type: [String, Object] as PropType<string | HTMLElement | Window>,\n    },\n    /**\n     * @zh 是否改变hash。设置为 `false` 时点击锚点不会改变页面的 hash\n     * @en Whether to change the hash. When set to `false`, clicking on the anchor will not change the hash of the page\n     */\n    changeHash: {\n      type: Boolean,\n      default: true,\n    },\n    /**\n     * @zh 是否使用平滑滚动\n     * @en Whether to use smooth scrolling\n     */\n    smooth: {\n      type: Boolean,\n      default: true,\n    },\n  },\n  emits: {\n    /**\n     * @zh 用户点击链接时触发\n     * @en Triggered when the user clicks on the link\n     * @property { string | undefined } hash\n     * @property {string} preHash\n     */\n    select: (hash: string | undefined, preHash: string) => true,\n    /**\n     * @zh 链接发生改变时触发\n     * @en Triggered when the link changes\n     * @property {string} hash\n     */\n    change: (hash: string) => true,\n  },\n  setup(props, { emit }) {\n    const prefixCls = getPrefixCls('anchor');\n    const anchorRef = ref<HTMLElement>();\n    const lineSliderRef = ref<HTMLElement>();\n    const links = reactive<Record<string, HTMLElement>>({});\n    const currentLink = ref('');\n    const isScrolling = ref(false);\n\n    const scrollContainerEle = ref<HTMLElement | Window>();\n    const containerEle = ref<HTMLElement>();\n\n    const addLink = (hash: string, node: HTMLElement) => {\n      if (!hash) return;\n      links[hash] = node;\n    };\n\n    const removeLink = (hash: string) => {\n      delete links[hash];\n    };\n\n    const handleClick = (e: MouseEvent, hash?: string) => {\n      if (!props.changeHash) {\n        e.preventDefault();\n      }\n      if (hash) {\n        scrollIntoView(hash);\n        handleAnchorChange(hash);\n      }\n      emit('select', hash, currentLink.value);\n    };\n\n    const scrollIntoView = (hash: string) => {\n      try {\n        const element = getElement(hash);\n        if (!element) return;\n        let block: BoundaryPosition;\n        let diff = 0;\n        if (isNumber(props.boundary)) {\n          block = 'start';\n          diff = props.boundary;\n        } else {\n          block = props.boundary;\n        }\n\n        const actions = computeScrollIntoView(element, { block });\n        if (!actions.length) return;\n        const { el, top } = actions[0];\n        const targetTop = top - diff;\n        // if (!this.props.animation) {\n        //   return;\n        // }\n        slide(el as HTMLElement, targetTop, () => {\n          isScrolling.value = false;\n        });\n        isScrolling.value = true;\n      } catch (e) {\n        // eslint-disable-next-line no-console\n        console.error(e);\n      }\n    };\n\n    const handleScroll = throttleByRaf(() => {\n      if (isScrolling.value) return;\n      const element = getFirstInViewportEle();\n      if (element && element.id) {\n        const hash = `#${element.id}`;\n        handleAnchorChange(hash);\n      }\n    });\n\n    const handleAnchorChange = (hash: string) => {\n      if (!links[hash] && anchorRef.value) {\n        const element = getElement(`a[data-href='${hash}']`, anchorRef.value);\n        if (!element) return;\n\n        links[hash] = element;\n      }\n      if (hash !== currentLink.value) {\n        currentLink.value = hash;\n        nextTick(() => {\n          emit('change', hash);\n        });\n      }\n    };\n\n    const getFirstInViewportEle = (): HTMLElement | undefined => {\n      if (!scrollContainerEle.value || !containerEle.value) {\n        return undefined;\n      }\n\n      const boundary = isNumber(props.boundary) ? props.boundary : 0;\n      const containerRect = containerEle.value.getBoundingClientRect();\n\n      for (const hash of Object.keys(links)) {\n        const element = getElement(hash);\n        if (element) {\n          const { top } = element.getBoundingClientRect();\n          const offsetTop = isWindow(scrollContainerEle.value)\n            ? top - boundary\n            : top - containerRect.top - boundary;\n          if (offsetTop >= 0 && offsetTop <= containerRect.height / 2) {\n            return element;\n          }\n        }\n      }\n      return undefined;\n    };\n\n    watch(currentLink, () => {\n      const link = links[currentLink.value];\n      if (!props.lineLess && link && lineSliderRef.value) {\n        lineSliderRef.value.style.top = `${link.offsetTop}px`;\n      }\n    });\n\n    const bindScrollEvent = () => {\n      if (scrollContainerEle.value) {\n        on(scrollContainerEle.value, 'scroll', handleScroll);\n      }\n    };\n\n    const unbindScrollEvent = () => {\n      if (scrollContainerEle.value) {\n        off(scrollContainerEle.value, 'scroll', handleScroll);\n      }\n    };\n\n    const getContainer = () => {\n      if (props.scrollContainer) {\n        scrollContainerEle.value = isWindow(props.scrollContainer)\n          ? window\n          : getElement(props.scrollContainer);\n        containerEle.value = isWindow(props.scrollContainer)\n          ? document.documentElement\n          : getElement(props.scrollContainer);\n      } else {\n        scrollContainerEle.value = window;\n        containerEle.value = document.documentElement;\n      }\n    };\n\n    onMounted(() => {\n      getContainer();\n\n      const hash = decodeURIComponent(window.location.hash);\n      if (hash) {\n        scrollIntoView(hash);\n        handleAnchorChange(hash);\n      } else {\n        handleScroll();\n      }\n\n      bindScrollEvent();\n    });\n\n    onBeforeUnmount(() => {\n      unbindScrollEvent();\n    });\n\n    provide(\n      anchorInjectionKey,\n      reactive({\n        currentLink,\n        addLink,\n        removeLink,\n        handleClick,\n      })\n    );\n\n    const cls = computed(() => [\n      prefixCls,\n      {\n        [`${prefixCls}-line-less`]: props.lineLess,\n      },\n    ]);\n\n    return {\n      prefixCls,\n      cls,\n      anchorRef,\n      lineSliderRef,\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/anchor/context.ts",
    "content": "import { InjectionKey } from 'vue';\n\nexport interface AnchorContext {\n  currentLink: string;\n  addLink: (hash: string, node: HTMLElement) => void;\n  removeLink: (hash: string) => void;\n  handleClick: (e: MouseEvent, hash?: string) => void;\n}\n\nexport const anchorInjectionKey: InjectionKey<AnchorContext> =\n  Symbol('ArcoAnchor');\n"
  },
  {
    "path": "packages/web-vue/components/anchor/index.ts",
    "content": "import type { App } from 'vue';\nimport type { ArcoOptions } from '../_utils/types';\nimport { setGlobalConfig, getComponentPrefix } from '../_utils/global-config';\nimport _Anchor from './anchor.vue';\nimport _AnchorLink from './anchor-link.vue';\n\nconst Anchor = Object.assign(_Anchor, {\n  Link: _AnchorLink,\n  install: (app: App, options?: ArcoOptions) => {\n    setGlobalConfig(app, options);\n    const componentPrefix = getComponentPrefix(options);\n\n    app.component(componentPrefix + _Anchor.name, _Anchor);\n    app.component(componentPrefix + _AnchorLink.name, _AnchorLink);\n  },\n});\n\nexport type AnchorInstance = InstanceType<typeof _Anchor>;\nexport type AnchorLinkInstance = InstanceType<typeof _AnchorLink>;\n\nexport { _AnchorLink as AnchorLink };\n\nexport default Anchor;\n"
  },
  {
    "path": "packages/web-vue/components/anchor/style/index.less",
    "content": "@import './token.less';\n\n@anchor-prefix-cls: ~'@{prefix}-anchor';\n\n.@{anchor-prefix-cls} {\n  position: relative;\n  width: @anchor-width;\n  overflow: auto;\n\n  &-line {\n    &-slider {\n      position: absolute;\n      top: 0;\n      left: 0;\n      z-index: 1;\n      width: @anchor-line-width;\n      height: @anchor-line-slider-height;\n      margin-top: ((@anchor-font-size-title * @line-height-base) / 2 + @anchor-title-padding-vertical - @anchor-line-slider-height / 2);\n      background-color: @anchor-color-bg-line_active;\n      transition: top @transition-duration-2\n        @transition-timing-function-standard;\n    }\n  }\n\n  &-list {\n    position: relative;\n    margin-top: 0;\n    margin-bottom: 0;\n    margin-left: @anchor-line-margin-right - @anchor-title-padding-horizontal;\n    padding-left: 0;\n    list-style: none;\n\n    &::before {\n      position: absolute;\n      left: -(@anchor-line-margin-right - @anchor-title-padding-horizontal);\n      width: @anchor-line-width;\n      height: 100%;\n      background-color: @anchor-color-bg-line;\n      content: '';\n    }\n  }\n\n  &-sublist {\n    margin-top: 0;\n    margin-bottom: 0;\n    padding-left: 0;\n    list-style: none;\n  }\n\n  &-link-item {\n    margin-bottom: @anchor-title-margin-bottom;\n\n    .@{anchor-prefix-cls}-link {\n      display: block;\n      margin-bottom: @anchor-title-margin-bottom;\n      padding: @anchor-title-padding-vertical @anchor-title-padding-horizontal;\n      overflow: hidden;\n      color: @anchor-color-title;\n      font-size: @anchor-font-size-title;\n      line-height: @line-height-base;\n      white-space: nowrap;\n      text-decoration: none;\n      text-overflow: ellipsis;\n      border-radius: @anchor-border-radius-title-hover;\n      cursor: pointer;\n\n      &:hover {\n        color: @anchor-color-title_hover;\n        font-weight: @anchor-font-weight-title_hover;\n        background-color: @anchor-color-bg-title_hover;\n      }\n    }\n  }\n\n  &-link-active > &-link {\n    color: @anchor-color-title_active;\n    font-weight: @anchor-font-weight-title_active;\n    transition: all @transition-duration-1 @transition-timing-function-linear;\n  }\n\n  &-link-item &-link-item {\n    margin-left: @anchor-item-inner-margin-left;\n  }\n\n  // line-less\n  &-line-less &-list {\n    margin-left: 0;\n\n    &::before {\n      display: none;\n    }\n  }\n\n  &-line-less &-link-active > &-link {\n    color: @anchor-lineless-color-title_active;\n    font-weight: @anchor-lineless-font-weight-title_active;\n    background-color: @anchor-lineless-bg-title_active;\n  }\n}\n"
  },
  {
    "path": "packages/web-vue/components/anchor/style/index.ts",
    "content": "import '../../style/index.less';\nimport './index.less';\n"
  },
  {
    "path": "packages/web-vue/components/anchor/style/token.less",
    "content": "@import '../../style/theme/index.less';\n\n// Line\n@anchor-width: 150px;\n@anchor-line-width: 2px;\n@anchor-line-slider-height: 12px;\n@anchor-line-margin-right: 12px;\n@anchor-color-bg-line: var(~'@{arco-cssvars-prefix}-color-fill-3');\n@anchor-color-bg-line_active: @color-primary-6;\n\n@anchor-border-radius-title-hover: @radius-small;\n\n@anchor-item-inner-margin-left: @spacing-7;\n\n@anchor-title-padding-horizontal: @spacing-4;\n@anchor-title-padding-vertical: @spacing-2;\n@anchor-title-margin-bottom: @spacing-1;\n\n@anchor-color-title: var(~'@{arco-cssvars-prefix}-color-text-2');\n@anchor-color-title_hover: var(~'@{arco-cssvars-prefix}-color-text-1');\n@anchor-color-title_active: var(~'@{arco-cssvars-prefix}-color-text-1');\n@anchor-font-weight-title_hover: @font-weight-500;\n@anchor-font-weight-title_active: @font-weight-500;\n@anchor-color-bg-title_hover: var(~'@{arco-cssvars-prefix}-color-fill-2');\n@anchor-font-size-title: 14px;\n\n// Lineless\n@anchor-lineless-color-title_active: @color-primary-6;\n@anchor-lineless-bg-title_active: var(~'@{arco-cssvars-prefix}-color-fill-2');\n@anchor-lineless-font-weight-title_active: @font-weight-500;\n"
  },
  {
    "path": "packages/web-vue/components/anchor/utils.ts",
    "content": "// @ts-ignore\nimport BTween from 'b-tween';\nimport { isFunction } from '../_utils/is';\n\nexport function slide(el: HTMLElement, top: number, cb: () => void): void {\n  const tween = new BTween({\n    from: {\n      scrollTop: el.scrollTop,\n    },\n    to: {\n      scrollTop: top,\n    },\n    easing: 'quartOut',\n    duration: 300,\n    onUpdate: (keys: any) => {\n      el.scrollTop = keys.scrollTop;\n    },\n    onFinish: () => {\n      if (isFunction(cb)) {\n        cb();\n      }\n    },\n  });\n  tween.start();\n}\n"
  },
  {
    "path": "packages/web-vue/components/arco-vue.ts",
    "content": "import type { App, Plugin } from 'vue';\nimport type { ArcoOptions } from './_utils/types';\nimport { addI18nMessages, useLocale, getLocale } from './locale';\nimport Affix from './affix';\nimport Alert from './alert';\nimport Anchor, { AnchorLink } from './anchor';\nimport AutoComplete from './auto-complete';\nimport Avatar, { AvatarGroup } from './avatar';\nimport BackTop from './back-top';\nimport Badge from './badge';\nimport Breadcrumb, { BreadcrumbItem } from './breadcrumb';\nimport Button, { ButtonGroup } from './button';\nimport Calendar from './calendar';\nimport Card, { CardMeta, CardGrid } from './card';\nimport Carousel, { CarouselItem } from './carousel';\nimport Cascader, { CascaderPanel } from './cascader';\nimport Checkbox, { CheckboxGroup } from './checkbox';\nimport Collapse, { CollapseItem } from './collapse';\nimport ColorPicker from './color-picker';\nimport Comment from './comment';\nimport ConfigProvider from './config-provider';\nimport DatePicker, {\n  WeekPicker,\n  MonthPicker,\n  YearPicker,\n  QuarterPicker,\n  RangePicker,\n} from './date-picker';\nimport Descriptions, { DescriptionsItem } from './descriptions';\nimport Divider from './divider';\nimport Drawer from './drawer';\nimport Dropdown, {\n  Doption,\n  Dgroup,\n  Dsubmenu,\n  DropdownButton,\n} from './dropdown';\nimport Empty from './empty';\nimport Form, { FormItem } from './form';\nimport Grid, { Row, Col, GridItem } from './grid';\nimport Icon from './icon-component';\nimport Image, {\n  ImagePreview,\n  ImagePreviewAction,\n  ImagePreviewGroup,\n} from './image';\nimport Input, { InputGroup, InputSearch, InputPassword } from './input';\nimport InputNumber from './input-number';\nimport InputTag from './input-tag';\nimport Layout, {\n  LayoutHeader,\n  LayoutContent,\n  LayoutFooter,\n  LayoutSider,\n} from './layout';\nimport Link from './link';\nimport List, { ListItem, ListItemMeta } from './list';\nimport Mention from './mention';\nimport Menu, { MenuItem, MenuItemGroup, SubMenu } from './menu';\nimport Message from './message';\nimport Modal from './modal';\nimport Notification from './notification';\nimport PageHeader from './page-header';\nimport Pagination from './pagination';\nimport Popconfirm from './popconfirm';\nimport Popover from './popover';\nimport Progress from './progress';\nimport Radio, { RadioGroup } from './radio';\nimport Rate from './rate';\nimport ResizeBox from './resize-box';\nimport Result from './result';\nimport Scrollbar from './scrollbar';\nimport Select, { Option, Optgroup } from './select';\nimport Skeleton, { SkeletonLine, SkeletonShape } from './skeleton';\nimport Slider from './slider';\nimport Space from './space';\nimport Spin from './spin';\nimport Split from './split';\nimport Statistic, { Countdown } from './statistic';\nimport Steps, { Step } from './steps';\nimport Switch from './switch';\nimport Table, { Thead, Td, Th, Tr, Tbody, TableColumn } from './table';\nimport Tabs, { TabPane } from './tabs';\nimport Tag from './tag';\nimport Textarea from './textarea';\nimport TimePicker from './time-picker';\nimport Timeline, { TimelineItem } from './timeline';\nimport Tooltip from './tooltip';\nimport Transfer from './transfer';\nimport Tree from './tree';\nimport TreeSelect from './tree-select';\nimport Trigger from './trigger';\nimport Typography, {\n  TypographyParagraph,\n  TypographyTitle,\n  TypographyText,\n} from './typography';\nimport Upload from './upload';\nimport OverflowList from './overflow-list';\nimport VerificationCode from './verification-code';\nimport Watermark from './watermark';\n\nimport { useFormItem } from './_hooks/use-form-item';\n\nconst components: Record<string, Plugin> = {\n  Button,\n  Link,\n  Typography,\n  Divider,\n  Grid,\n  Layout,\n  Space,\n  Avatar,\n  Badge,\n  Calendar,\n  Card,\n  Carousel,\n  Collapse,\n  Comment,\n  ColorPicker,\n  Descriptions,\n  Empty,\n  Image,\n  Scrollbar,\n  List,\n  Popover,\n  Statistic,\n  Table,\n  Tabs,\n  Tag,\n  Timeline,\n  Tooltip,\n  AutoComplete,\n  Cascader,\n  Checkbox,\n  DatePicker,\n  Form,\n  Input,\n  InputNumber,\n  InputTag,\n  Mention,\n  Radio,\n  Rate,\n  Select,\n  Slider,\n  Switch,\n  Textarea,\n  TimePicker,\n  Transfer,\n  Tree,\n  Upload,\n  TreeSelect,\n  Alert,\n  Drawer,\n  Message,\n  Modal,\n  Notification,\n  Popconfirm,\n  Progress,\n  Result,\n  Spin,\n  Skeleton,\n  Breadcrumb,\n  Dropdown,\n  Menu,\n  PageHeader,\n  Pagination,\n  Steps,\n  Affix,\n  Anchor,\n  BackTop,\n  ConfigProvider,\n  ResizeBox,\n  Trigger,\n  Split,\n  Icon,\n  OverflowList,\n  Watermark,\n  VerificationCode,\n};\n\nconst install = (app: App, options?: ArcoOptions) => {\n  for (const key of Object.keys(components)) {\n    app.use(components[key], options);\n  }\n};\n\nconst ArcoVue = {\n  ...components,\n  // Historical reason\n  Alter: Alert,\n  AnchorLink,\n  AvatarGroup,\n  BreadcrumbItem,\n  ButtonGroup,\n  Calendar,\n  CardMeta,\n  CardGrid,\n  CarouselItem,\n  CascaderPanel,\n  CheckboxGroup,\n  CollapseItem,\n  DescriptionsItem,\n  WeekPicker,\n  MonthPicker,\n  YearPicker,\n  QuarterPicker,\n  RangePicker,\n  Doption,\n  Dgroup,\n  Dsubmenu,\n  DropdownButton,\n  FormItem,\n  Row,\n  Col,\n  GridItem,\n  ImagePreview,\n  ImagePreviewAction,\n  ImagePreviewGroup,\n  InputGroup,\n  InputSearch,\n  InputPassword,\n  LayoutHeader,\n  LayoutContent,\n  LayoutFooter,\n  LayoutSider,\n  ListItem,\n  ListItemMeta,\n  MenuItem,\n  MenuItemGroup,\n  SubMenu,\n  RadioGroup,\n  Option,\n  Optgroup,\n  SkeletonLine,\n  SkeletonShape,\n  Countdown,\n  Step,\n  Thead,\n  Td,\n  Th,\n  Tr,\n  Tbody,\n  TableColumn,\n  TabPane,\n  TimelineItem,\n  TypographyParagraph,\n  TypographyTitle,\n  TypographyText,\n  install,\n  addI18nMessages,\n  useLocale,\n  getLocale,\n  useFormItem,\n};\n\nexport default ArcoVue;\n"
  },
  {
    "path": "packages/web-vue/components/auto-complete/CHANGELOG.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.52.0\n\n`2023-09-22`\n\n### 🆕 Feature\n\n- add dropdown scroll event ([#2635](https://github.com/arco-design/arco-design-vue/pull/2635))\n\n\n## 2.50.0\n\n`2023-08-11`\n\n### 🆕 Feature\n\n- add virtual list support ([#2596](https://github.com/arco-design/arco-design-vue/pull/2596))\n\n\n## 2.40.0\n\n`2022-12-09`\n\n### 🆕 Feature\n\n- Add focus and blur methods ([#1809](https://github.com/arco-design/arco-design-vue/pull/1809))\n\n\n## 2.34.0\n\n`2022-07-29`\n\n### 🆕 Feature\n\n- add `footer` slot ([#1445](https://github.com/arco-design/arco-design-vue/pull/1445))\n\n\n## 2.23.0\n\n`2022-04-08`\n\n### 🆕 Feature\n\n- Added allow-clear property and event ([#951](https://github.com/arco-design/arco-design-vue/pull/951))\n\n\n## 2.13.0\n\n`2021-12-31`\n\n### 🆕 Feature\n\n- Increase input slot and option slot support ([#482](https://github.com/arco-design/arco-design-vue/pull/482))\n\n\n## 2.8.0\n\n`2021-12-01`\n\n### 🐛 BugFix\n\n- Fix the problem that disabled is unavailable ([#310](https://github.com/arco-design/arco-design-vue/pull/310))\n\n"
  },
  {
    "path": "packages/web-vue/components/auto-complete/CHANGELOG.zh-CN.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.52.0\n\n`2023-09-22`\n\n### 🆕 新增功能\n\n- 增加下拉菜单滚动事件 ([#2635](https://github.com/arco-design/arco-design-vue/pull/2635))\n\n\n## 2.50.0\n\n`2023-08-11`\n\n### 🆕 新增功能\n\n- 添加虚拟列表支持 ([#2596](https://github.com/arco-design/arco-design-vue/pull/2596))\n\n\n## 2.40.0\n\n`2022-12-09`\n\n### 🆕 新增功能\n\n- 增加 focus 和 blur 方法 ([#1809](https://github.com/arco-design/arco-design-vue/pull/1809))\n\n\n## 2.34.0\n\n`2022-07-29`\n\n### 🆕 新增功能\n\n- 增加`footer`插槽 ([#1445](https://github.com/arco-design/arco-design-vue/pull/1445))\n\n\n## 2.23.0\n\n`2022-04-08`\n\n### 🆕 新增功能\n\n- 增加 allow-clear 属性和事件 ([#951](https://github.com/arco-design/arco-design-vue/pull/951))\n\n\n## 2.13.0\n\n`2021-12-31`\n\n### 🆕 新增功能\n\n- 增加 input 中的插槽和 option 插槽支持 ([#482](https://github.com/arco-design/arco-design-vue/pull/482))\n\n\n## 2.8.0\n\n`2021-12-01`\n\n### 🐛 问题修复\n\n- 修复 disabled 不可用的问题 ([#310](https://github.com/arco-design/arco-design-vue/pull/310))\n\n"
  },
  {
    "path": "packages/web-vue/components/auto-complete/README.en-US.md",
    "content": "```yaml\nmeta:\n  type: Component\n  category: Data Entry\ntitle: AutoComplete\ndescription: The auto-complete function of the input.\n```\n\n*Auto translate by google.*\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/strict.md\n\n@import ./__demo__/footer.md\n\n## API\n\n\n### `<auto-complete>` Props\n\n|Attribute|Description|Type|Default|version|\n|---|---|---|:---:|:---|\n|model-value **(v-model)**|Value|`string`|`-`||\n|default-value|Default value (uncontrolled mode)|`string`|`''`||\n|disabled|Whether to disable|`boolean`|`false`||\n|data|Data used for auto-complete|`(string \\| number \\| SelectOptionData \\| SelectOptionGroup)[]`|`[]`||\n|popup-container|Mount container for popup|`string \\| HTMLElement \\| null \\| undefined`|`-`||\n|strict|Whether it is strict verification mode|`boolean`|`false`||\n|filter-option|Custom option filtering method|`FilterOption`|`true`||\n|trigger-props|trigger props|`TriggerProps`|`-`|2.14.0|\n|allow-clear|Whether to allow the input to be cleared|`boolean`|`false`|2.23.0|\n|virtual-list-props|Pass the virtual list attribute, pass in this parameter to turn on virtual scrolling [VirtualListProps](#VirtualListProps)|`VirtualListProps`|`-`|2.50.0|\n### `<auto-complete>` Events\n\n|Event Name|Description|Parameters|version|\n|---|---|---|:---|\n|change|Emitted when the value changes|value: `string`||\n|search|Emitted when the user searches|value: `string`||\n|select|Emitted when an option is selected|value: `string`||\n|clear|Triggered when the user clicks the clear button|ev: `Event`|2.23.0|\n|dropdown-scroll|Triggered when the drop-down scrolls|ev: `Event`|2.52.0|\n|dropdown-reach-bottom|Triggered when the drop-down menu is scrolled to the bottom|ev: `Event`|2.52.0|\n### `<auto-complete>` Methods\n\n|Method|Description|Parameters|Return|version|\n|---|---|---|:---:|:---|\n|focus|Make the input box focus|-|-|2.40.0|\n|blur|Make the input box lose focus|-|-|2.40.0|\n### `<auto-complete>` Slots\n\n|Slot Name|Description|Parameters|version|\n|---|---|---|:---|\n|option|Display content of options|data: `OptionInfo`|2.13.0|\n|footer|The footer of the popup menu box|-||\n\n\n"
  },
  {
    "path": "packages/web-vue/components/auto-complete/README.zh-CN.md",
    "content": "```yaml\nmeta:\n  type: 组件\n  category: 数据输入\ntitle: 自动补全 AutoComplete\ndescription: 输入框的自动补全功能。\n```\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/strict.md\n\n@import ./__demo__/footer.md\n\n## API\n\n\n### `<auto-complete>` Props\n\n|参数名|描述|类型|默认值|版本|\n|---|---|---|:---:|:---|\n|model-value **(v-model)**|绑定值|`string`|`-`||\n|default-value|默认值（非受控模式）|`string`|`''`||\n|disabled|是否禁用|`boolean`|`false`||\n|data|用于自动提示的数据|`(string \\| number \\| SelectOptionData \\| SelectOptionGroup)[]`|`[]`||\n|popup-container|弹出框的挂载容器|`string \\| HTMLElement \\| null \\| undefined`|`-`||\n|strict|是否为严格校验模式|`boolean`|`false`||\n|filter-option|自定义选项过滤方法|`FilterOption`|`true`||\n|trigger-props|trigger 组件属性|`TriggerProps`|`-`|2.14.0|\n|allow-clear|是否允许清空输入框|`boolean`|`false`|2.23.0|\n|virtual-list-props|传递虚拟列表属性，传入此参数以开启虚拟滚动 [VirtualListProps](#VirtualListProps)|`VirtualListProps`|`-`|2.50.0|\n### `<auto-complete>` Events\n\n|事件名|描述|参数|版本|\n|---|---|---|:---|\n|change|绑定值发生改变时触发|value: `string`||\n|search|用户搜索时触发|value: `string`||\n|select|选择选项时触发|value: `string`||\n|clear|用户点击清除按钮时触发|ev: `Event`|2.23.0|\n|dropdown-scroll|下拉菜单发生滚动时触发|ev: `Event`|2.52.0|\n|dropdown-reach-bottom|下拉菜单滚动到底部时触发|ev: `Event`|2.52.0|\n### `<auto-complete>` Methods\n\n|方法名|描述|参数|返回值|版本|\n|---|---|---|---|:---|\n|focus|使输入框获取焦点|-|-|2.40.0|\n|blur|使输入框失去焦点|-|-|2.40.0|\n### `<auto-complete>` Slots\n\n|插槽名|描述|参数|版本|\n|---|:---:|---|:---|\n|option|选项内容|data: `OptionInfo`|2.13.0|\n|footer|弹出框的页脚|-||\n\n\n"
  },
  {
    "path": "packages/web-vue/components/auto-complete/TEMPLATE.md",
    "content": "## zh-CN\n```yaml\nmeta:\n  type: 组件\n  category: 数据输入\ntitle: 自动补全 AutoComplete\ndescription: 输入框的自动补全功能。\n```\n---\n## en-US\n```yaml\nmeta:\n  type: Component\n  category: Data Entry\ntitle: AutoComplete\ndescription: The auto-complete function of the input.\n```\n---\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/strict.md\n\n@import ./__demo__/footer.md\n\n## API\n\n%%API(auto-complete.tsx)%%\n"
  },
  {
    "path": "packages/web-vue/components/auto-complete/__demo__/basic.md",
    "content": "```yaml\ntitle:\n  zh-CN: 基本用法\n  en-US: Basic Usage\n```\n\n## zh-CN\n\n自动补全的基础用法\n\n---\n\n## en-US\n\nBasic usage of auto-complete\n\n---\n\n```vue\n<template>\n  <a-auto-complete :data=\"data\" @search=\"handleSearch\" :style=\"{width:'360px'}\" placeholder=\"please enter something\"/>\n</template>\n\n<script>\nexport default {\n  data() {\n    return {\n      data: []\n    }\n  },\n  methods: {\n    handleSearch(value) {\n      if (value) {\n        this.data = [...Array(5)].map((_, index) => `${value}-${index}`)\n        console.log(this.data)\n      } else {\n        this.data = []\n      }\n    }\n  }\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/auto-complete/__demo__/footer.md",
    "content": "```yaml\ntitle:\n  zh-CN: 弹出框的页脚\n  en-US: Dropdown Footer\n```\n\n## zh-CN\n\n自定义弹出框的页脚\n\n---\n\n## en-US\n\ncustom popup menu footer\n\n---\n\n```vue\n<template>\n  <a-auto-complete :data=\"data\" @search=\"handleSearch\" :style=\"{width:'360px'}\" placeholder=\"please enter something\">\n    <template #footer>\n      <div style=\"padding: 6px 0; text-align: center;\">\n        <a-button>Click Me</a-button>\n      </div>\n    </template>\n  </a-auto-complete>\n</template>\n\n<script>\nexport default {\n  data() {\n    return {\n      data: []\n    }\n  },\n  methods: {\n    handleSearch(value) {\n      if (value) {\n        this.data = [...Array(5)].map((_, index) => `${value}-${index}`)\n        console.log(this.data)\n      } else {\n        this.data = []\n      }\n    }\n  }\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/auto-complete/__demo__/scroll.md",
    "content": "```yaml\ntitle:\n  zh-CN: 下拉菜单滚动\n  en-US: Dropdown Scroll\n```\n\n## zh-CN\n\n可以通过 `dropdown-scroll` 监听下拉菜单的滚动事件。或者通过 `dropdown-reach-bottom` 监听下拉菜单滚动到底部的事件。\n\n---\n\n## en-US\n\nYou can monitor the scroll event of the drop-down menu through `dropdown-scroll`. Or use `dropdown-reach-bottom` to monitor the event of the drop-down menu scrolling to the bottom.\n\n---\n\n```vue\n<template>\n  <a-auto-complete\n    :data=\"data\"\n    :style=\"{ width: '360px' }\"\n    placeholder=\"please enter something\"\n    @dropdown-scroll=\"handleScroll\"\n    @dropdown-reach-bottom=\"handleReachBottom\"\n  />\n</template>\n\n<script>\nimport { ref } from 'vue'\n\nexport default {\n  setup() {\n    const data = ref([...Array(100)].map((_, index) => `option-${index}`))\n\n    const handleScroll = (ev) => {\n      console.log('scroll', ev)\n    }\n    const handleReachBottom = (ev) => {\n      console.log('reach the bottom', ev)\n    }\n\n    return {\n      data,\n      handleScroll,\n      handleReachBottom\n    }\n  },\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/auto-complete/__demo__/strict.md",
    "content": "```yaml\ntitle:\n  zh-CN: 区分大小写\n  en-US: Strict\n```\n\n## zh-CN\n\n使用 `strict` 属性来指明在匹配时严格区分大小写。\n\n---\n\n## en-US\n\nUse the `strict` attribute to specify that the matching is strictly case sensitive.\n\n---\n\n```vue\n\n<template>\n  <a-auto-complete :data=\"data\" :style=\"{width:'360px'}\" placeholder=\"please enter something\" strict />\n</template>\n\n<script>\nexport default {\n  data() {\n    return {\n      data: ['Beijing', 'Shanghai', 'Chengdu', 'WuHan']\n    }\n  },\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/auto-complete/__demo__/virtual-list.md",
    "content": "```yaml\ntitle:\n  zh-CN: 虚拟列表\n  en-US: Virtual List\n```\n\n## zh-CN\n\n虚拟列表的使用方法。\n\n---\n\n## en-US\n\nHow to use the virtual list.\n\n---\n\n```vue\n<template>\n  <a-auto-complete\n    :data=\"data\"\n    @search=\"handleSearch\"\n    :style=\"{ width: '360px' }\"\n    placeholder=\"please enter something\"\n    :virtual-list-props=\"{ height: 200, threshold: 20 }\"\n  />\n</template>\n\n<script>\nexport default {\n  data() {\n    return {\n      data: [],\n    };\n  },\n  methods: {\n    handleSearch(value) {\n      if (value) {\n        this.data = [...Array(5000)].map((_, index) => `${value}-${index}`);\n      } else {\n        this.data = [];\n      }\n    },\n  },\n};\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/auto-complete/__test__/__snapshots__/demo.test.ts.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`<auto-complete> demo: render [basic] correctly 1`] = `\"<span class=\\\\\"arco-input-wrapper\\\\\" style=\\\\\"width: 360px;\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" placeholder=\\\\\"please enter something\\\\\" value=\\\\\"\\\\\"><!----><!----></span>\"`;\n\nexports[`<auto-complete> demo: render [footer] correctly 1`] = `\"<span class=\\\\\"arco-input-wrapper\\\\\" style=\\\\\"width: 360px;\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" placeholder=\\\\\"please enter something\\\\\" value=\\\\\"\\\\\"><!----><!----></span>\"`;\n\nexports[`<auto-complete> demo: render [scroll] correctly 1`] = `\"<span class=\\\\\"arco-input-wrapper\\\\\" style=\\\\\"width: 360px;\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" placeholder=\\\\\"please enter something\\\\\" value=\\\\\"\\\\\"><!----><!----></span>\"`;\n\nexports[`<auto-complete> demo: render [strict] correctly 1`] = `\"<span class=\\\\\"arco-input-wrapper\\\\\" style=\\\\\"width: 360px;\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" placeholder=\\\\\"please enter something\\\\\" value=\\\\\"\\\\\"><!----><!----></span>\"`;\n\nexports[`<auto-complete> demo: render [virtual-list] correctly 1`] = `\"<span class=\\\\\"arco-input-wrapper\\\\\" style=\\\\\"width: 360px;\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" placeholder=\\\\\"please enter something\\\\\" value=\\\\\"\\\\\"><!----><!----></span>\"`;\n"
  },
  {
    "path": "packages/web-vue/components/auto-complete/__test__/demo.test.ts",
    "content": "import demoTest from '../../../scripts/demo-test';\n\ndemoTest('auto-complete');\n"
  },
  {
    "path": "packages/web-vue/components/auto-complete/__test__/index.test.ts",
    "content": "import { mount } from '@vue/test-utils';\nimport AutoComplete from '../index';\n\ndescribe('AutoComplete', () => {\n  test('auto-complete correctly', async () => {\n    const wrapper = mount(AutoComplete, {\n      props: {\n        data: ['Beijing', 'Shanghai', 'Chengdu', 'WuHan'],\n      },\n    });\n    const input = wrapper.find('input');\n    await input.trigger('focusin');\n    await input.setValue('e');\n    await input.trigger('keydown', { key: 'ArrowDown' });\n    await input.trigger('keydown', { key: 'Enter' });\n\n    expect(input.element.value).toBe('Chengdu');\n  });\n});\n"
  },
  {
    "path": "packages/web-vue/components/auto-complete/auto-complete.tsx",
    "content": "import {\n  computed,\n  defineComponent,\n  ref,\n  PropType,\n  toRefs,\n  ComponentPublicInstance,\n  toRef,\n  watch,\n} from 'vue';\nimport ArcoInput from '../input';\nimport Trigger, { TriggerProps } from '../trigger';\nimport { getPrefixCls } from '../_utils/global-config';\nimport {\n  SelectOptionInfo,\n  FilterOption,\n  SelectOptionData,\n  SelectOptionGroup,\n} from '../select/interface';\nimport { isFunction, isNull, isUndefined } from '../_utils/is';\nimport SelectDropdown from '../select/select-dropdown.vue';\nimport Option from '../select/option.vue';\nimport { useSelect } from '../select/hooks/use-select';\nimport { getKeyFromValue } from '../select/utils';\nimport { useFormItem } from '../_hooks/use-form-item';\nimport VirtualList from '../_components/virtual-list-v2';\nimport { VirtualListProps } from '../_components/virtual-list-v2/interface';\n\nexport default defineComponent({\n  name: 'AutoComplete',\n  inheritAttrs: false,\n  props: {\n    /**\n     * @zh 绑定值\n     * @en Value\n     * @vModel\n     */\n    modelValue: {\n      type: String,\n      default: undefined,\n    },\n    /**\n     * @zh 默认值（非受控模式）\n     * @en Default value (uncontrolled mode)\n     */\n    defaultValue: {\n      type: String,\n      default: '',\n    },\n    /**\n     * @zh 是否禁用\n     * @en Whether to disable\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 用于自动提示的数据\n     * @en Data used for auto-complete\n     */\n    data: {\n      type: Array as PropType<\n        (string | number | SelectOptionData | SelectOptionGroup)[]\n      >,\n      default: () => [],\n    },\n    /**\n     * @zh 弹出框的挂载容器\n     * @en Mount container for popup\n     */\n    popupContainer: {\n      type: [String, Object] as PropType<\n        string | HTMLElement | null | undefined\n      >,\n    },\n    /**\n     * @zh 是否为严格校验模式\n     * @en Whether it is strict verification mode\n     */\n    strict: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 自定义选项过滤方法\n     * @en Custom option filtering method\n     */\n    filterOption: {\n      type: [Boolean, Function] as PropType<FilterOption>,\n      default: true,\n    },\n    /**\n     * @zh trigger 组件属性\n     * @en trigger props\n     * @version 2.14.0\n     */\n    triggerProps: {\n      type: Object as PropType<TriggerProps>,\n    },\n    /**\n     * @zh 是否允许清空输入框\n     * @en Whether to allow the input to be cleared\n     * @version 2.23.0\n     */\n    allowClear: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 传递虚拟列表属性，传入此参数以开启虚拟滚动 [VirtualListProps](#VirtualListProps)\n     * @en Pass the virtual list attribute, pass in this parameter to turn on virtual scrolling [VirtualListProps](#VirtualListProps)\n     * @type VirtualListProps\n     * @version 2.50.0\n     */\n    virtualListProps: {\n      type: Object as PropType<VirtualListProps>,\n    },\n  },\n  emits: {\n    'update:modelValue': (value: string) => true,\n    /**\n     * @zh 绑定值发生改变时触发\n     * @en Emitted when the value changes\n     * @property {string} value\n     */\n    'change': (value: string) => true,\n    /**\n     * @zh 用户搜索时触发\n     * @en Emitted when the user searches\n     * @property {string} value\n     */\n    'search': (value: string) => true,\n    /**\n     * @zh 选择选项时触发\n     * @en Emitted when an option is selected\n     * @property {string} value\n     */\n    'select': (value: string) => true,\n    /**\n     * @zh 用户点击清除按钮时触发\n     * @en Triggered when the user clicks the clear button\n     * @param {Event} ev\n     * @version 2.23.0\n     */\n    'clear': (ev: Event) => true,\n    /**\n     * @zh 下拉菜单发生滚动时触发\n     * @en Triggered when the drop-down scrolls\n     * @param {Event} ev\n     * @version 2.52.0\n     */\n    'dropdownScroll': (ev: Event) => true,\n    /**\n     * @zh 下拉菜单滚动到底部时触发\n     * @en Triggered when the drop-down menu is scrolled to the bottom\n     * @param {Event} ev\n     * @version 2.52.0\n     */\n    'dropdownReachBottom': (ev: Event) => true,\n  },\n  /**\n   * @zh 弹出框的页脚\n   * @en The footer of the popup menu box\n   * @slot footer\n   */\n  /**\n   * @zh 选项内容\n   * @en Display content of options\n   * @slot option\n   * @binding {OptionInfo} data\n   * @version 2.13.0\n   */\n  setup(props, { emit, attrs, slots }) {\n    const { modelValue } = toRefs(props);\n    const prefixCls = getPrefixCls('auto-complete');\n    const { mergedDisabled, eventHandlers } = useFormItem({\n      disabled: toRef(props, 'disabled'),\n    });\n\n    const _value = ref(props.defaultValue);\n    const inputRef = ref<HTMLInputElement>();\n    const computedValue = computed(() => props.modelValue ?? _value.value);\n\n    watch(modelValue, (value) => {\n      if (isUndefined(value) || isNull(value)) {\n        _value.value = '';\n      }\n    });\n\n    const computedValueKeys = computed(() =>\n      computedValue.value ? [getKeyFromValue(computedValue.value)] : []\n    );\n    const { data } = toRefs(props);\n    const dropdownRef = ref();\n    const optionRefs = ref<Record<string, HTMLElement>>({});\n\n    const _popupVisible = ref(false);\n    const computedPopupVisible = computed(\n      () => _popupVisible.value && validOptionInfos.value.length > 0\n    );\n\n    // VirtualList\n    const virtualListRef = ref();\n    const component = computed(() => (props.virtualListProps ? 'div' : 'li'));\n\n    const handlePopupVisibleChange = (popupVisible: boolean) => {\n      _popupVisible.value = popupVisible;\n    };\n\n    const strictFilterOption = (\n      inputValue: string,\n      option: SelectOptionData\n    ) => {\n      return Boolean(option.label?.includes(inputValue));\n    };\n\n    const mergedFilterOption = computed(() => {\n      if (isFunction(props.filterOption)) {\n        return props.filterOption;\n      }\n      if (props.filterOption && props.strict) {\n        return strictFilterOption;\n      }\n      return props.filterOption;\n    });\n\n    const handleChange = (value: string) => {\n      _value.value = value;\n      emit('update:modelValue', value);\n      emit('change', value);\n      eventHandlers.value?.onChange?.();\n    };\n\n    const handleClear = (ev: Event) => {\n      _value.value = '';\n      emit('update:modelValue', '');\n      emit('change', '');\n      eventHandlers.value?.onChange?.();\n      emit('clear', ev);\n    };\n\n    // Dropdown事件\n    const handleSelect = (key: string, ev: Event) => {\n      const value = optionInfoMap.get(key)?.value as string;\n      emit('select', value);\n      handleChange(value);\n      inputRef.value?.blur();\n    };\n\n    // Input事件\n    const handleInputValueChange = (value: string) => {\n      emit('search', value);\n      handleChange(value);\n    };\n\n    const handleDropdownScroll = (e: Event) => {\n      emit('dropdownScroll', e);\n    };\n\n    const handleDropdownReachBottom = (e: Event) => {\n      emit('dropdownReachBottom', e);\n    };\n\n    const { validOptions, optionInfoMap, validOptionInfos, handleKeyDown } =\n      useSelect({\n        options: data,\n        inputValue: computedValue,\n        filterOption: mergedFilterOption,\n        popupVisible: computedPopupVisible,\n        valueKeys: computedValueKeys,\n        component,\n        dropdownRef,\n        optionRefs,\n        onSelect: handleSelect,\n        onPopupVisibleChange: handlePopupVisibleChange,\n      });\n\n    const getOptionContentFunc = (item: SelectOptionInfo) => {\n      if (isFunction(slots.option) && item.value) {\n        const optionInfo = optionInfoMap.get(item.key);\n        const optionSlot = slots.option;\n        return () => optionSlot({ data: optionInfo });\n      }\n      return () => item.label;\n    };\n\n    const renderOption = (item: SelectOptionInfo) => {\n      return (\n        <Option\n          // @ts-ignore\n          ref={(ref: ComponentPublicInstance) => {\n            if (ref?.$el) {\n              optionRefs.value[item.key] = ref.$el;\n            }\n          }}\n          v-slots={{\n            default: getOptionContentFunc(item),\n          }}\n          key={item.key}\n          value={item.value}\n          disabled={item.disabled}\n          internal\n        />\n      );\n    };\n\n    const renderDropdown = () => {\n      return (\n        <SelectDropdown\n          ref={dropdownRef}\n          class={`${prefixCls}-dropdown`}\n          v-slots={{\n            'default': () => [\n              ...validOptions.value.map((info) =>\n                renderOption(info as SelectOptionInfo)\n              ),\n            ],\n            'virtual-list': () => (\n              <VirtualList\n                {...props.virtualListProps}\n                ref={virtualListRef}\n                data={validOptions.value}\n                v-slots={{\n                  item: ({ item }: { item: SelectOptionInfo }) =>\n                    renderOption(item),\n                }}\n              />\n            ),\n            'footer': slots.footer,\n          }}\n          virtualList={Boolean(props.virtualListProps)}\n          onScroll={handleDropdownScroll}\n          onReachBottom={handleDropdownReachBottom}\n        />\n      );\n    };\n\n    const render = () => (\n      <Trigger\n        v-slots={{ content: renderDropdown }}\n        trigger=\"focus\"\n        position=\"bl\"\n        animationName=\"slide-dynamic-origin\"\n        autoFitTransformOrigin\n        popupVisible={computedPopupVisible.value}\n        clickToClose={false}\n        preventFocus={true}\n        popupOffset={4}\n        disabled={mergedDisabled.value}\n        autoFitPopupWidth\n        {...props.triggerProps}\n        onPopupVisibleChange={handlePopupVisibleChange}\n      >\n        <ArcoInput\n          v-slots={slots}\n          ref={inputRef}\n          {...attrs}\n          allowClear={props.allowClear}\n          modelValue={computedValue.value}\n          disabled={mergedDisabled.value}\n          onInput={handleInputValueChange}\n          onClear={handleClear}\n          // @ts-ignore\n          onKeydown={handleKeyDown}\n        />\n      </Trigger>\n    );\n\n    return {\n      inputRef,\n      render,\n    };\n  },\n  methods: {\n    /**\n     * @zh 使输入框获取焦点\n     * @en Make the input box focus\n     * @public\n     * @version 2.40.0\n     */\n    focus() {\n      (this.inputRef as HTMLInputElement)?.focus();\n    },\n    /**\n     * @zh 使输入框失去焦点\n     * @en Make the input box lose focus\n     * @public\n     * @version 2.40.0\n     */\n    blur() {\n      (this.inputRef as HTMLInputElement)?.blur();\n    },\n  },\n  render() {\n    return this.render();\n  },\n});\n"
  },
  {
    "path": "packages/web-vue/components/auto-complete/index.ts",
    "content": "import type { App } from 'vue';\nimport type { ArcoOptions } from '../_utils/types';\nimport { setGlobalConfig, getComponentPrefix } from '../_utils/global-config';\nimport _AutoComplete from './auto-complete';\n\nconst AutoComplete = Object.assign(_AutoComplete, {\n  install: (app: App, options?: ArcoOptions) => {\n    setGlobalConfig(app, options);\n    const componentPrefix = getComponentPrefix(options);\n\n    app.component(componentPrefix + _AutoComplete.name, _AutoComplete);\n  },\n});\n\nexport type AutoCompleteInstance = InstanceType<typeof _AutoComplete>;\n\nexport default AutoComplete;\n"
  },
  {
    "path": "packages/web-vue/components/auto-complete/style/index.less",
    "content": "@import './token.less';\n\n@auto-complete-prefix-cls: ~'@{prefix}-autocomplete';\n@select-prefix-cls: ~'@{prefix}-select';\n\n.@{auto-complete-prefix-cls} {\n  &-popup .@{select-prefix-cls}-popup {\n    background-color: var(~'@{arco-cssvars-prefix}-color-bg-popup');\n    border: 1px solid @auto-complete-popup-color-border;\n    border-radius: @auto-complete-popup-border-radius;\n    box-shadow: @auto-complete-popup-box-shadow;\n\n    .@{select-prefix-cls}-popup-inner {\n      max-height: @auto-complete-popup-max-height;\n      padding: @auto-complete-popup-padding-vertical 0;\n    }\n\n    .@{select-prefix-cls}-option {\n      height: @auto-complete-option-height;\n      padding: 0 @auto-complete-option-padding-horizontal;\n      font-size: @auto-complete-popup-font-size;\n      line-height: $height;\n\n      .option-color(@status) {\n        @class-suffix: if(@status = default, ~'', ~'-@{status}');\n\n        &@{class-suffix} {\n          color: ~'@{auto-complete-option-color-text_@{status}}';\n          background-color: ~'@{auto-complete-option-color-bg_@{status}}';\n        }\n      }\n\n      .option-color(default);\n      .option-color(selected);\n      .option-color(hover);\n      // disabled 优先级最高，放在最后\n      .option-color(disabled);\n\n      &-selected {\n        font-weight: @auto-complete-option-font-weight_selected;\n      }\n    }\n  }\n}\n"
  },
  {
    "path": "packages/web-vue/components/auto-complete/style/index.ts",
    "content": "import '../../style/index.less';\nimport '../../input/style';\nimport '../../select/style';\nimport './index.less';\n"
  },
  {
    "path": "packages/web-vue/components/auto-complete/style/token.less",
    "content": "@import '../../style/theme/index.less';\n\n/**********************************************\n * Popup Box\n **********************************************/\n@auto-complete-popup-max-height: @size-50;\n@auto-complete-popup-border-radius: @radius-medium;\n@auto-complete-popup-padding-vertical: @spacing-2;\n@auto-complete-popup-font-size: @font-size-body-3;\n@auto-complete-popup-color-border: var(~'@{arco-cssvars-prefix}-color-fill-3');\n@auto-complete-popup-box-shadow: @shadow2-down;\n\n/**********************************************\n * Popup Options\n * status: default / disabled / selected / hover\n **********************************************/\n@auto-complete-option-height: @size-9;\n@auto-complete-option-font-weight_selected: @font-weight-500;\n@auto-complete-option-padding-horizontal: @spacing-6;\n\n@auto-complete-option-color-bg_default: var(~'@{arco-cssvars-prefix}-color-bg-popup');\n@auto-complete-option-color-bg_hover: var(~'@{arco-cssvars-prefix}-color-fill-2');\n@auto-complete-option-color-bg_selected: var(~'@{arco-cssvars-prefix}-color-bg-popup');\n@auto-complete-option-color-bg_disabled: var(~'@{arco-cssvars-prefix}-color-bg-popup');\n\n@auto-complete-option-color-text_default: var(~'@{arco-cssvars-prefix}-color-text-1');\n@auto-complete-option-color-text_hover: var(~'@{arco-cssvars-prefix}-color-text-1');\n@auto-complete-option-color-text_selected: var(~'@{arco-cssvars-prefix}-color-text-1');\n@auto-complete-option-color-text_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');\n"
  },
  {
    "path": "packages/web-vue/components/avatar/CHANGELOG.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.54.3\n\n`2024-01-19`\n\n### 🐛 BugFix\n\n- fix partial avatars not displaying in the avatar group popover ([#2925](https://github.com/arco-design/arco-design-vue/pull/2925))\n\n\n## 2.52.0\n\n`2023-09-22`\n\n### 🆕 Feature\n\n- Added new `ObjectFit` prop ([#2691](https://github.com/arco-design/arco-design-vue/pull/2691))\n\n\n## 2.40.0\n\n`2022-12-09`\n\n### 🆕 Feature\n\n- Add image-url attribute to support the use of image URLs ([#1810](https://github.com/arco-design/arco-design-vue/pull/1810))\n\n\n## 2.21.0\n\n`2022-03-25`\n\n### 🐛 BugFix\n\n- Fixed an issue where a warning message would appear when there was no content ([#870](https://github.com/arco-design/arco-design-vue/pull/870))\n\n\n## 2.18.0\n\n`2022-03-04`\n\n### 💎 Enhancement\n\n- Use Context to optimize components ([#773](https://github.com/arco-design/arco-design-vue/pull/773))\n\n\n## 2.7.0\n\n`2021-11-26`\n\n### 🆕 Feature\n\n- supports `maxStyle` and `maxPopoverTriggerProps` properties. ([#242](https://github.com/arco-design/arco-design-vue/pull/242))\n\n"
  },
  {
    "path": "packages/web-vue/components/avatar/CHANGELOG.zh-CN.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.54.3\n\n`2024-01-19`\n\n### 🐛 问题修复\n\n- 修复头像组气泡中部分头像不显示问题 ([#2925](https://github.com/arco-design/arco-design-vue/pull/2925))\n\n\n## 2.52.0\n\n`2023-09-22`\n\n### 🆕 新增功能\n\n- 添加了新的 `ObjectFit` 属性 ([#2691](https://github.com/arco-design/arco-design-vue/pull/2691))\n\n\n## 2.40.0\n\n`2022-12-09`\n\n### 🆕 新增功能\n\n- 增加 image-url 属性，支持使用图片地址 ([#1810](https://github.com/arco-design/arco-design-vue/pull/1810))\n\n\n## 2.21.0\n\n`2022-03-25`\n\n### 🐛 问题修复\n\n- 修复没有内容时会出现警告提示的问题 ([#870](https://github.com/arco-design/arco-design-vue/pull/870))\n\n\n## 2.18.0\n\n`2022-03-04`\n\n### 💎 功能优化\n\n- 使用 Context 方式优化组件 ([#773](https://github.com/arco-design/arco-design-vue/pull/773))\n\n\n## 2.7.0\n\n`2021-11-26`\n\n### 🆕 新增功能\n\n- 支持 `maxStyle` 和 `maxPopoverTriggerProps` 属性 ([#242](https://github.com/arco-design/arco-design-vue/pull/242))\n\n"
  },
  {
    "path": "packages/web-vue/components/avatar/README.en-US.md",
    "content": "\n```yaml\nmeta:\n  type: Component\n  category: Data Display\ntitle: Avatar\ndescription: Used as an avatar, it can be displayed in the form of pictures, icons or characters.\n```\n\n*Auto translate by google.*\n\n@import ./\\_\\_demo\\_\\_/basic.md\n\n@import ./\\_\\_demo\\_\\_/size.md\n\n@import ./\\_\\_demo\\_\\_/group.md\n\n@import ./\\_\\_demo\\_\\_/icon.md\n\n@import ./\\_\\_demo\\_\\_/fit.md\n\n@import ./\\_\\_demo\\_\\_/image-url.md\n\n## API\n\n\n### `<avatar>` Props\n\n|Attribute|Description|Type|Default|version|\n|---|---|---|:---:|:---|\n|shape|The shape of the avatar, there are two kinds of circle (circle) and square (square)|`'circle' \\| 'square'`|`'circle'`||\n|image-url|Custom avatar image address. If this attribute is passed in, the img tag will be rendered by default|`string`|`-`|2.40.0|\n|size|The size of the avatar, the unit is `px`. Use size `40px` in styles when not filled|`number`|`-`||\n|auto-fix-font-size|Whether to automatically adjust the font size according to the size of the avatar.|`boolean`|`true`||\n|trigger-type|Clickable avatar interaction type|`'mask' \\| 'button'`|`'button'`||\n|trigger-icon-style|Interactive icon style|`CSSProperties`|`-`||\n|object-fit|Object-fit type of the image in the container|`ObjectFit`|`-`|2.52.0|\n### `<avatar>` Events\n\n|Event Name|Description|Parameters|\n|---|---|---|\n|click|Callback when clicked|ev: `MouseEvent`|\n|error|image load error|-|\n|load|image load success|-|\n### `<avatar>` Slots\n\n|Slot Name|Description|Parameters|\n|---|---|---|\n|trigger-icon|Clickable avatar interaction icon|-|\n\n\n\n\n### `<avatar-group>` Props\n\n|Attribute|Description|Type|Default|version|\n|---|---|---|:---:|:---|\n|shape|The shape of the avatar in the group, there are two kinds of circle (circle) and square (square)|`'circle' \\| 'square'`|`'circle'`||\n|size|The size of the avatar in the group, the unit is `px`|`number`|`-`||\n|auto-fix-font-size|Whether to automatically adjust the font size according to the size of the avatar.|`boolean`|`true`||\n|max-count|The maximum number of avatars displayed in the avatar group. The excess avatars will be displayed in the form of `+x`.|`number`|`0`||\n|z-index-ascend|The avatar `z-index` in the avatar group increases, and the default is decreasing.|`boolean`|`false`||\n|max-style|Style for +x.|`CSSProperties`|`-`|2.7.0|\n|max-popover-trigger-props|TriggerProps for popover around +x.|`TriggerProps`|`-`|2.7.0|\n\n\n"
  },
  {
    "path": "packages/web-vue/components/avatar/README.zh-CN.md",
    "content": "```yaml\nmeta:\n  type: 组件\n  category: 数据展示\ntitle: 头像 Avatar\ndescription: 用作头像显示，可以为图片、图标或字符形式展示。\n```\n\n\n@import ./\\_\\_demo\\_\\_/basic.md\n\n@import ./\\_\\_demo\\_\\_/size.md\n\n@import ./\\_\\_demo\\_\\_/group.md\n\n@import ./\\_\\_demo\\_\\_/icon.md\n\n@import ./\\_\\_demo\\_\\_/fit.md\n\n@import ./\\_\\_demo\\_\\_/image-url.md\n\n## API\n\n\n### `<avatar>` Props\n\n|参数名|描述|类型|默认值|版本|\n|---|---|---|:---:|:---|\n|shape|头像的形状，有圆形(circle)和正方形(square)两种|`'circle' \\| 'square'`|`'circle'`||\n|image-url|自定义头像图片地址，如果传入该属性，会默认渲染img标签|`string`|`-`|2.40.0|\n|size|头像的尺寸大小，单位是 `px`。未填写时使用样式中的大小 `40px`|`number`|`-`||\n|auto-fix-font-size|是否自动根据头像尺寸调整字体大小|`boolean`|`true`||\n|trigger-type|可点击的头像交互类型|`'mask' \\| 'button'`|`'button'`||\n|trigger-icon-style|交互图标的样式|`CSSProperties`|`-`||\n|object-fit|图片在容器内的的适应类型|`ObjectFit`|`-`|2.52.0|\n### `<avatar>` Events\n\n|事件名|描述|参数|\n|---|---|---|\n|click|点击回调|ev: `MouseEvent`|\n|error|图片加载错误|-|\n|load|图片加载成功|-|\n### `<avatar>` Slots\n\n|插槽名|描述|参数|\n|---|:---:|---|\n|trigger-icon|可点击的头像交互图标|-|\n\n\n\n\n### `<avatar-group>` Props\n\n|参数名|描述|类型|默认值|版本|\n|---|---|---|:---:|:---|\n|shape|头像的形状，有圆形(circle)和正方形(square)两种|`'circle' \\| 'square'`|`'circle'`||\n|size|头像的尺寸大小，单位是 `px`|`number`|`-`||\n|auto-fix-font-size|是否自动根据头像尺寸调整字体大小|`boolean`|`true`||\n|max-count|头像组最多显示的头像数量，多余头像将以 `+x` 的形式展示。|`number`|`0`||\n|z-index-ascend|头像组内的头像 `z-index` 递增，默认是递减。|`boolean`|`false`||\n|max-style|多余头像样式。|`CSSProperties`|`-`|2.7.0|\n|max-popover-trigger-props|多余头像气泡的 `TriggerProps`|`TriggerProps`|`-`|2.7.0|\n\n\n"
  },
  {
    "path": "packages/web-vue/components/avatar/TEMPLATE.md",
    "content": "## zh-CN\n\n```yaml\nmeta:\n  type: 组件\n  category: 数据展示\ntitle: 头像 Avatar\ndescription: 用作头像显示，可以为图片、图标或字符形式展示。\n```\n\n---\n\n## en-US\n\n```yaml\nmeta:\n  type: Component\n  category: Data Display\ntitle: Avatar\ndescription: Used as an avatar, it can be displayed in the form of pictures, icons or characters.\n```\n\n---\n\n@import ./\\_\\_demo\\_\\_/basic.md\n\n@import ./\\_\\_demo\\_\\_/size.md\n\n@import ./\\_\\_demo\\_\\_/group.md\n\n@import ./\\_\\_demo\\_\\_/icon.md\n\n@import ./\\_\\_demo\\_\\_/fit.md\n\n@import ./\\_\\_demo\\_\\_/image-url.md\n\n## API\n\n%%API(avatar.vue)%%\n\n%%API(avatar-group.tsx)%%\n"
  },
  {
    "path": "packages/web-vue/components/avatar/__demo__/basic.md",
    "content": "```yaml\ntitle:\n  zh-CN: 基本用法\n  en-US: Basic Usage\n```\n\n## zh-CN\n\n头像的基础使用。如果头像是文字的话，会自动调节字体大小，来适应头像框。\n\n---\n\n## en-US\n\nThe basic use of avatars. If the avatar is text, the font size will be automatically adjusted to fit the avatar.\n\n---\n\n```vue\n<template>\n  <a-space size=\"large\">\n    <a-avatar>A</a-avatar>\n    <a-avatar :style=\"{ backgroundColor: '#3370ff' }\">\n      <IconUser />\n    </a-avatar>\n    <a-avatar :style=\"{ backgroundColor: '#14a9f8' }\">Arco</a-avatar>\n    <a-avatar :style=\"{ backgroundColor: '#00d0b6' }\">Design</a-avatar>\n    <a-avatar>\n      <img\n        alt=\"avatar\"\n        src=\"https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp\"\n      />\n    </a-avatar>\n  </a-space>\n</template>\n\n<script>\nimport { IconUser } from '@arco-design/web-vue/es/icon';\n\nexport default {\n  components: { IconUser },\n};\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/avatar/__demo__/fit.md",
    "content": "```yaml\ntitle:\n  zh-CN: 自动调整字体大小\n  en-US: Auto Fix Font Size\n```\n\n## zh-CN\n\n如果头像是文字的话，会自动调节字体大小，来适应头像框。\n\n---\n## en-US\n\nIf the avatar content is text, the font size will be automatically adjusted to fit the content in the avatar.\n\n---\n\n```vue\n\n<template>\n  <a-avatar\n    :style=\"{\n      marginRight: '24px',\n      verticalAlign: 'middle',\n      backgroundColor: '#14a9f8',\n    }\"\n  >\n    {{ text }}\n  </a-avatar>\n  <a-button\n    type=\"secondary\"\n    @click=\"onClick\"\n    :style=\"{ verticalAlign: 'middle' }\"\n  >\n    Change\n  </a-button>\n</template>\n\n<script>\nimport { computed, ref } from 'vue';\n\nconst list = ['B', 'Arco', 'Design', 'Tom', 'AD'];\nexport default {\n  setup() {\n    const index = ref(0);\n    const text = computed(() => list[index.value])\n\n    const onClick = () => {\n      index.value = index.value >= list.length - 1 ? 0 : index.value + 1;\n    };\n\n    return {\n      text,\n      onClick\n    }\n  },\n};\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/avatar/__demo__/group.md",
    "content": "```yaml\ntitle:\n  zh-CN: 头像组\n  en-US: Group\n```\n\n## zh-CN\n\n使用 `Avatar.Group` 可以使用头像组功能，可通过 `size` 指定头像的大小。\n\n---\n\n## en-US\n\nUse `Avatar.Group` to group a list of avatars. `size` can be used to specify the size of each avatar..\n\n---\n\n```vue\n<template>\n  <a-space :size=\"32\">\n    <a-avatar-group>\n      <a-avatar :style=\"{ backgroundColor: '#7BC616' }\">A</a-avatar>\n      <a-avatar :style=\"{ backgroundColor: '#14C9C9' }\">B</a-avatar>\n      <a-avatar :style=\"{ backgroundColor: '#168CFF' }\">C</a-avatar>\n      <a-avatar :style=\"{ backgroundColor: '#FF7D00' }\">Arco</a-avatar>\n      <a-avatar :style=\"{ backgroundColor: '#FFC72E' }\">Design</a-avatar>\n    </a-avatar-group>\n\n    <a-avatar-group :size=\"24\">\n      <a-avatar :style=\"{ backgroundColor: '#7BC616' }\">A</a-avatar>\n      <a-avatar :style=\"{ backgroundColor: '#14C9C9' }\">B</a-avatar>\n      <a-avatar :style=\"{ backgroundColor: '#168CFF' }\">C</a-avatar>\n      <a-avatar :style=\"{ backgroundColor: '#FF7D00' }\">Arco</a-avatar>\n      <a-avatar :style=\"{ backgroundColor: '#FFC72E' }\">Design</a-avatar>\n    </a-avatar-group>\n\n    <a-avatar-group :size=\"24\" :max-count=\"3\">\n      <a-avatar :style=\"{ backgroundColor: '#7BC616' }\">A</a-avatar>\n      <a-avatar :style=\"{ backgroundColor: '#14C9C9' }\">B</a-avatar>\n      <a-avatar :style=\"{ backgroundColor: '#168CFF' }\">C</a-avatar>\n      <a-avatar :style=\"{ backgroundColor: '#FF7D00' }\">Arco</a-avatar>\n      <a-avatar :style=\"{ backgroundColor: '#FFC72E' }\">Design</a-avatar>\n    </a-avatar-group>\n  </a-space>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/avatar/__demo__/icon.md",
    "content": "```yaml\ntitle:\n  zh-CN: 交互按钮\n  en-US: Trigger Icon\n```\n\n## zh-CN\n\n可以通过 `trigger-icon` `trigger-type` 来定制交互按钮，类型有 `mask (遮罩)` 和 `button (按钮)` 两种。\n\n---\n\n## en-US\n\nYou can customize the interactive button through `trigger-icon` and `trigger-type`. There are two types: `mask` and `button`.\n\n---\n\n```vue\n<template>\n  <a-space size=\"large\">\n    <a-avatar\n      :trigger-icon-style=\"{ color: '#3491FA' }\"\n      :auto-fix-font-size=\"false\"\n      @click=\"toast\"\n      :style=\"{ backgroundColor: '#168CFF' }\"\n    >\n      A\n      <template #trigger-icon>\n        <IconCamera />\n      </template>\n    </a-avatar>\n    <a-avatar @click=\"toast\" :style=\"{ backgroundColor: '#14C9C9' }\">\n      <IconUser />\n      <template #trigger-icon>\n        <IconEdit />\n      </template>\n    </a-avatar>\n    <a-avatar\n      @click=\"toast\"\n      shape=\"square\"\n      :style=\"{ backgroundColor: '#FFC72E' }\"\n    >\n      <IconUser />\n      <template #trigger-icon>\n        <IconEdit />\n      </template>\n    </a-avatar>\n    <a-avatar trigger-type=\"mask\">\n      <img\n        alt=\"avatar\"\n        src=\"https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp\"\n      />\n      <template #trigger-icon>\n        <IconEdit />\n      </template>\n    </a-avatar>\n  </a-space>\n</template>\n\n<script>\nimport { IconCamera, IconEdit, IconUser } from '@arco-design/web-vue/es/icon';\n\nexport default {\n  components: { IconCamera, IconEdit },\n  methods: {\n    toast() {\n      this.$message.info('Uploading...');\n    },\n  },\n};\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/avatar/__demo__/image-url.md",
    "content": "```yaml\ntitle:\n  zh-CN: 自定义头像路径\n  en-US: Custom Avatar Path\n```\n\n## zh-CN\n\n自定义头像图片路径\n\n---\n\n## en-US\n\nCustom Avatar Path\n\n---\n\n```vue\n<template>\n  <a-space size=\"large\">\n    <a-avatar\n      imageUrl=\"https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp\"\n    >\n    </a-avatar>\n    加载失败:\n    <a-avatar\n      imageUrl=\"https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9123.png~tplv-uwbnlip3yd-webp.webp\"\n    >\n    </a-avatar>\n  </a-space>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/avatar/__demo__/size.md",
    "content": "```yaml\ntitle:\n  zh-CN: 大小和形状\n  en-US: Size\n```\n\n## zh-CN\n\n通过设置 `size` 字段，可以调节头像的大小，默认大小为 `40px`。设置 `shape` 字段，可以设置头像是圆形 (circle) 还是正方形 (square)。\n\n---\n\n## en-US\n\nThe size of the avatar can be adjusted by setting the `size` field. The default size is `40px`. Set the `shape` field, you can set whether the profile picture is a circle or a square.\n\n---\n\n```vue\n<template>\n  <a-space size=\"large\" direction=\"vertical\">\n    <a-space size=\"large\">\n      <a-avatar :size=\"64\">Arco</a-avatar>\n      <a-avatar :size=\"40\">Arco</a-avatar>\n      <a-avatar :size=\"32\">Arco</a-avatar>\n      <a-avatar :size=\"24\">Arco</a-avatar>\n    </a-space>\n    <a-space size=\"large\">\n      <a-avatar :size=\"64\" shape=\"square\">Arco</a-avatar>\n      <a-avatar :size=\"40\" shape=\"square\">Arco</a-avatar>\n      <a-avatar :size=\"32\" shape=\"square\">Arco</a-avatar>\n      <a-avatar :size=\"24\" shape=\"square\">Arco</a-avatar>\n    </a-space>\n  </a-space>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/avatar/__test__/__snapshots__/demo.test.ts.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`<avatar> demo: render [basic] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 24px; row-gap: 24px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-avatar arco-avatar-circle\\\\\"><span class=\\\\\"arco-avatar-text\\\\\">A</span>\n      <!--v-if-->\n    </div>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div style=\\\\\"background-color: rgb(51, 112, 255);\\\\\" class=\\\\\"arco-avatar arco-avatar-circle\\\\\"><span class=\\\\\"arco-avatar-text\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-user\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M7 37c0-4.97 4.03-8 9-8h16c4.97 0 9 3.03 9 8v3a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1v-3Z\\\\\"></path><circle cx=\\\\\"24\\\\\" cy=\\\\\"15\\\\\" r=\\\\\"8\\\\\"></circle></svg></span>\n      <!--v-if-->\n    </div>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div style=\\\\\"background-color: rgb(20, 169, 248);\\\\\" class=\\\\\"arco-avatar arco-avatar-circle\\\\\"><span class=\\\\\"arco-avatar-text\\\\\">Arco</span>\n      <!--v-if-->\n    </div>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div style=\\\\\"background-color: rgb(0, 208, 182);\\\\\" class=\\\\\"arco-avatar arco-avatar-circle\\\\\"><span class=\\\\\"arco-avatar-text\\\\\">Design</span>\n      <!--v-if-->\n    </div>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-avatar arco-avatar-circle\\\\\"><span class=\\\\\"arco-avatar-text\\\\\"><img alt=\\\\\"avatar\\\\\" src=\\\\\"https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp\\\\\"></span>\n      <!--v-if-->\n    </div>\n  </div>\n</div>\"\n`;\n\nexports[`<avatar> demo: render [fit] correctly 1`] = `\n\"<div style=\\\\\"margin-right: 24px; vertical-align: middle; background-color: rgb(20, 169, 248);\\\\\" class=\\\\\"arco-avatar arco-avatar-circle\\\\\"><span class=\\\\\"arco-avatar-text\\\\\">B</span>\n  <!--v-if-->\n</div>\n<button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\" style=\\\\\"vertical-align: middle;\\\\\">\n  <!--v-if--> Change\n</button>\"\n`;\n\nexports[`<avatar> demo: render [group] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 32px; row-gap: 32px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-avatar-group \\\\\">\n      <div style=\\\\\"z-index: 6; margin-left: -10px; background-color: rgb(123, 198, 22);\\\\\" class=\\\\\"arco-avatar arco-avatar-circle\\\\\"><span class=\\\\\"arco-avatar-text\\\\\">A</span>\n        <!--v-if-->\n      </div>\n      <div style=\\\\\"z-index: 6; margin-left: -10px; background-color: rgb(20, 201, 201);\\\\\" class=\\\\\"arco-avatar arco-avatar-circle\\\\\"><span class=\\\\\"arco-avatar-text\\\\\">B</span>\n        <!--v-if-->\n      </div>\n      <div style=\\\\\"z-index: 6; margin-left: -10px; background-color: rgb(22, 140, 255);\\\\\" class=\\\\\"arco-avatar arco-avatar-circle\\\\\"><span class=\\\\\"arco-avatar-text\\\\\">C</span>\n        <!--v-if-->\n      </div>\n      <div style=\\\\\"z-index: 6; margin-left: -10px; background-color: rgb(255, 125, 0);\\\\\" class=\\\\\"arco-avatar arco-avatar-circle\\\\\"><span class=\\\\\"arco-avatar-text\\\\\">Arco</span>\n        <!--v-if-->\n      </div>\n      <div style=\\\\\"z-index: 6; margin-left: -10px; background-color: rgb(255, 199, 46);\\\\\" class=\\\\\"arco-avatar arco-avatar-circle\\\\\"><span class=\\\\\"arco-avatar-text\\\\\">Design</span>\n        <!--v-if-->\n      </div>\n      <!---->\n    </div>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-avatar-group \\\\\">\n      <div style=\\\\\"width: 24px; height: 24px; font-size: 12px; z-index: 6; margin-left: -6px; background-color: rgb(123, 198, 22);\\\\\" class=\\\\\"arco-avatar arco-avatar-circle\\\\\"><span class=\\\\\"arco-avatar-text\\\\\">A</span>\n        <!--v-if-->\n      </div>\n      <div style=\\\\\"width: 24px; height: 24px; font-size: 12px; z-index: 6; margin-left: -6px; background-color: rgb(20, 201, 201);\\\\\" class=\\\\\"arco-avatar arco-avatar-circle\\\\\"><span class=\\\\\"arco-avatar-text\\\\\">B</span>\n        <!--v-if-->\n      </div>\n      <div style=\\\\\"width: 24px; height: 24px; font-size: 12px; z-index: 6; margin-left: -6px; background-color: rgb(22, 140, 255);\\\\\" class=\\\\\"arco-avatar arco-avatar-circle\\\\\"><span class=\\\\\"arco-avatar-text\\\\\">C</span>\n        <!--v-if-->\n      </div>\n      <div style=\\\\\"width: 24px; height: 24px; font-size: 12px; z-index: 6; margin-left: -6px; background-color: rgb(255, 125, 0);\\\\\" class=\\\\\"arco-avatar arco-avatar-circle\\\\\"><span class=\\\\\"arco-avatar-text\\\\\">Arco</span>\n        <!--v-if-->\n      </div>\n      <div style=\\\\\"width: 24px; height: 24px; font-size: 12px; z-index: 6; margin-left: -6px; background-color: rgb(255, 199, 46);\\\\\" class=\\\\\"arco-avatar arco-avatar-circle\\\\\"><span class=\\\\\"arco-avatar-text\\\\\">Design</span>\n        <!--v-if-->\n      </div>\n      <!---->\n    </div>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-avatar-group \\\\\">\n      <div style=\\\\\"width: 24px; height: 24px; font-size: 12px; z-index: 6; margin-left: -6px; background-color: rgb(123, 198, 22);\\\\\" class=\\\\\"arco-avatar arco-avatar-circle\\\\\"><span class=\\\\\"arco-avatar-text\\\\\">A</span>\n        <!--v-if-->\n      </div>\n      <div style=\\\\\"width: 24px; height: 24px; font-size: 12px; z-index: 6; margin-left: -6px; background-color: rgb(20, 201, 201);\\\\\" class=\\\\\"arco-avatar arco-avatar-circle\\\\\"><span class=\\\\\"arco-avatar-text\\\\\">B</span>\n        <!--v-if-->\n      </div>\n      <div style=\\\\\"width: 24px; height: 24px; font-size: 12px; z-index: 6; margin-left: -6px; background-color: rgb(22, 140, 255);\\\\\" class=\\\\\"arco-avatar arco-avatar-circle\\\\\"><span class=\\\\\"arco-avatar-text\\\\\">C</span>\n        <!--v-if-->\n      </div>\n      <div style=\\\\\"width: 24px; height: 24px; font-size: 12px; z-index: 6; margin-left: -6px;\\\\\" class=\\\\\"arco-avatar arco-avatar-circle arco-avatar-group-max-count-avatar\\\\\"><span class=\\\\\"arco-avatar-text\\\\\">+2</span>\n        <!--v-if-->\n      </div>\n      <!---->\n    </div>\n  </div>\n</div>\"\n`;\n\nexports[`<avatar> demo: render [icon] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 24px; row-gap: 24px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div style=\\\\\"background-color: rgb(22, 140, 255);\\\\\" class=\\\\\"arco-avatar arco-avatar-circle arco-avatar-with-trigger-icon\\\\\"><span class=\\\\\"arco-avatar-text\\\\\"> A </span>\n      <div class=\\\\\"arco-avatar-trigger-icon-button\\\\\" style=\\\\\"color: rgb(52, 145, 250);\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-camera\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n          <path d=\\\\\"m33 12-1.862-3.724A.5.5 0 0 0 30.691 8H17.309a.5.5 0 0 0-.447.276L15 12m16 14a7 7 0 1 1-14 0 7 7 0 0 1 14 0ZM7 40h34a1 1 0 0 0 1-1V13a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1v26a1 1 0 0 0 1 1Z\\\\\"></path>\n        </svg></div>\n    </div>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div style=\\\\\"background-color: rgb(20, 201, 201);\\\\\" class=\\\\\"arco-avatar arco-avatar-circle arco-avatar-with-trigger-icon\\\\\"><span class=\\\\\"arco-avatar-text\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-user\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M7 37c0-4.97 4.03-8 9-8h16c4.97 0 9 3.03 9 8v3a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1v-3Z\\\\\"></path><circle cx=\\\\\"24\\\\\" cy=\\\\\"15\\\\\" r=\\\\\"8\\\\\"></circle></svg></span>\n      <div class=\\\\\"arco-avatar-trigger-icon-button\\\\\" style=\\\\\"color: rgb(20, 201, 201);\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-edit\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n          <path d=\\\\\"m30.48 19.038 5.733-5.734a1 1 0 0 0 0-1.414l-5.586-5.586a1 1 0 0 0-1.414 0l-5.734 5.734m7 7L15.763 33.754a1 1 0 0 1-.59.286l-6.048.708a1 1 0 0 1-1.113-1.069l.477-6.31a1 1 0 0 1 .29-.631l14.7-14.7m7 7-7-7M6 42h36\\\\\"></path>\n        </svg></div>\n    </div>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div style=\\\\\"background-color: rgb(255, 199, 46);\\\\\" class=\\\\\"arco-avatar arco-avatar-square arco-avatar-with-trigger-icon\\\\\"><span class=\\\\\"arco-avatar-text\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-user\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M7 37c0-4.97 4.03-8 9-8h16c4.97 0 9 3.03 9 8v3a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1v-3Z\\\\\"></path><circle cx=\\\\\"24\\\\\" cy=\\\\\"15\\\\\" r=\\\\\"8\\\\\"></circle></svg></span>\n      <div class=\\\\\"arco-avatar-trigger-icon-button\\\\\" style=\\\\\"color: rgb(255, 199, 46);\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-edit\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n          <path d=\\\\\"m30.48 19.038 5.733-5.734a1 1 0 0 0 0-1.414l-5.586-5.586a1 1 0 0 0-1.414 0l-5.734 5.734m7 7L15.763 33.754a1 1 0 0 1-.59.286l-6.048.708a1 1 0 0 1-1.113-1.069l.477-6.31a1 1 0 0 1 .29-.631l14.7-14.7m7 7-7-7M6 42h36\\\\\"></path>\n        </svg></div>\n    </div>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-avatar arco-avatar-circle arco-avatar-with-trigger-icon\\\\\"><span class=\\\\\"arco-avatar-text\\\\\"><img alt=\\\\\"avatar\\\\\" src=\\\\\"https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp\\\\\"></span>\n      <div class=\\\\\"arco-avatar-trigger-icon-mask\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-edit\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n          <path d=\\\\\"m30.48 19.038 5.733-5.734a1 1 0 0 0 0-1.414l-5.586-5.586a1 1 0 0 0-1.414 0l-5.734 5.734m7 7L15.763 33.754a1 1 0 0 1-.59.286l-6.048.708a1 1 0 0 1-1.113-1.069l.477-6.31a1 1 0 0 1 .29-.631l14.7-14.7m7 7-7-7M6 42h36\\\\\"></path>\n        </svg></div>\n    </div>\n  </div>\n</div>\"\n`;\n\nexports[`<avatar> demo: render [image-url] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 24px; row-gap: 24px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-avatar arco-avatar-circle\\\\\"><span class=\\\\\"arco-avatar-image\\\\\"><!--v-if--><div class=\\\\\"arco-avatar-image-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-loading\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M42 24c0 9.941-8.059 18-18 18S6 33.941 6 24 14.059 6 24 6\\\\\"></path></svg></div><img src=\\\\\"https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp\\\\\" alt=\\\\\"avatar\\\\\"></span>\n      <!--v-if-->\n    </div>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"> 加载失败: </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-avatar arco-avatar-circle\\\\\"><span class=\\\\\"arco-avatar-image\\\\\"><!--v-if--><div class=\\\\\"arco-avatar-image-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-loading\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M42 24c0 9.941-8.059 18-18 18S6 33.941 6 24 14.059 6 24 6\\\\\"></path></svg></div><img src=\\\\\"https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9123.png~tplv-uwbnlip3yd-webp.webp\\\\\" alt=\\\\\"avatar\\\\\"></span>\n      <!--v-if-->\n    </div>\n  </div>\n</div>\"\n`;\n\nexports[`<avatar> demo: render [size] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-vertical\\\\\" style=\\\\\"column-gap: 24px; row-gap: 24px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 24px; row-gap: 24px;\\\\\">\n      <!---->\n      <div class=\\\\\"arco-space-item\\\\\">\n        <div style=\\\\\"width: 64px; height: 64px; font-size: 32px;\\\\\" class=\\\\\"arco-avatar arco-avatar-circle\\\\\"><span class=\\\\\"arco-avatar-text\\\\\">Arco</span>\n          <!--v-if-->\n        </div>\n      </div>\n      <!---->\n      <div class=\\\\\"arco-space-item\\\\\">\n        <div style=\\\\\"width: 40px; height: 40px; font-size: 20px;\\\\\" class=\\\\\"arco-avatar arco-avatar-circle\\\\\"><span class=\\\\\"arco-avatar-text\\\\\">Arco</span>\n          <!--v-if-->\n        </div>\n      </div>\n      <!---->\n      <div class=\\\\\"arco-space-item\\\\\">\n        <div style=\\\\\"width: 32px; height: 32px; font-size: 16px;\\\\\" class=\\\\\"arco-avatar arco-avatar-circle\\\\\"><span class=\\\\\"arco-avatar-text\\\\\">Arco</span>\n          <!--v-if-->\n        </div>\n      </div>\n      <!---->\n      <div class=\\\\\"arco-space-item\\\\\">\n        <div style=\\\\\"width: 24px; height: 24px; font-size: 12px;\\\\\" class=\\\\\"arco-avatar arco-avatar-circle\\\\\"><span class=\\\\\"arco-avatar-text\\\\\">Arco</span>\n          <!--v-if-->\n        </div>\n      </div>\n    </div>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 24px; row-gap: 24px;\\\\\">\n      <!---->\n      <div class=\\\\\"arco-space-item\\\\\">\n        <div style=\\\\\"width: 64px; height: 64px; font-size: 32px;\\\\\" class=\\\\\"arco-avatar arco-avatar-square\\\\\"><span class=\\\\\"arco-avatar-text\\\\\">Arco</span>\n          <!--v-if-->\n        </div>\n      </div>\n      <!---->\n      <div class=\\\\\"arco-space-item\\\\\">\n        <div style=\\\\\"width: 40px; height: 40px; font-size: 20px;\\\\\" class=\\\\\"arco-avatar arco-avatar-square\\\\\"><span class=\\\\\"arco-avatar-text\\\\\">Arco</span>\n          <!--v-if-->\n        </div>\n      </div>\n      <!---->\n      <div class=\\\\\"arco-space-item\\\\\">\n        <div style=\\\\\"width: 32px; height: 32px; font-size: 16px;\\\\\" class=\\\\\"arco-avatar arco-avatar-square\\\\\"><span class=\\\\\"arco-avatar-text\\\\\">Arco</span>\n          <!--v-if-->\n        </div>\n      </div>\n      <!---->\n      <div class=\\\\\"arco-space-item\\\\\">\n        <div style=\\\\\"width: 24px; height: 24px; font-size: 12px;\\\\\" class=\\\\\"arco-avatar arco-avatar-square\\\\\"><span class=\\\\\"arco-avatar-text\\\\\">Arco</span>\n          <!--v-if-->\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\"\n`;\n"
  },
  {
    "path": "packages/web-vue/components/avatar/__test__/demo.test.ts",
    "content": "import demoTest from '../../../scripts/demo-test';\n\ndemoTest('avatar');\n"
  },
  {
    "path": "packages/web-vue/components/avatar/__test__/index.test.ts",
    "content": "import { mount } from '@vue/test-utils';\nimport Avatar from '../index';\n\nconst { Group: AvatarGroup } = Avatar;\n\ndescribe('Avatar', () => {\n  test('Should have prefix', () => {\n    const wrapper = mount(Avatar);\n    expect(wrapper.classes()).toContain('arco-avatar');\n  });\n\n  test('Size should work', () => {\n    const wrapper = mount(Avatar, {\n      props: {\n        size: 100,\n      },\n    });\n    const avatar = wrapper.find('.arco-avatar');\n    expect(avatar.attributes('style')).toContain('width: 100px');\n  });\n\n  test('Click callback should work', () => {\n    const wrapper = mount(Avatar);\n    wrapper.trigger('click');\n    expect(wrapper.emitted()).toHaveProperty('click');\n  });\n\n  test('Trigger-icon should be present if set', () => {\n    const wrapper = mount(Avatar, {\n      slots: {\n        'trigger-icon': `<div id='icon'>this is icon</div>`,\n      },\n    });\n    const icon = wrapper.find('#icon');\n    expect(icon.exists()).toBe(true);\n  });\n\n  test('Trigger-type should work', async () => {\n    const wrapper = mount(Avatar, {\n      slots: {\n        'trigger-icon': '<div/>',\n      },\n      props: {\n        triggerType: 'mask',\n      },\n    });\n    let triggerElement = wrapper.find('.arco-avatar-trigger-icon-mask');\n    expect(triggerElement.exists()).toBe(true);\n    await wrapper.setProps({ triggerType: 'button' });\n    triggerElement = wrapper.find('.arco-avatar-trigger-icon-button');\n    expect(triggerElement.exists()).toBe(true);\n  });\n\n  test('Avatar group should work', () => {\n    const group = mount(AvatarGroup, {\n      slots: {\n        default: [Avatar, Avatar],\n      },\n    });\n    expect(group.classes()).toContain('arco-avatar-group');\n    const avatars = group.findAll('.arco-avatar');\n    expect(avatars.length).toBe(2);\n  });\n\n  test('Avatar group maxCount should work', () => {\n    const group = mount(AvatarGroup, {\n      slots: {\n        default: [Avatar, Avatar, Avatar],\n      },\n      props: {\n        maxCount: 1,\n      },\n    });\n    const avatars = group.findAll('.arco-avatar');\n    // one more for +x\n    expect(avatars.length).toBe(1 + 1);\n  });\n});\n"
  },
  {
    "path": "packages/web-vue/components/avatar/avatar-group.tsx",
    "content": "import {\n  defineComponent,\n  PropType,\n  CSSProperties,\n  reactive,\n  ref,\n  provide,\n  toRefs,\n  computed,\n  inject,\n} from 'vue';\nimport { getPrefixCls } from '../_utils/global-config';\nimport { AvatarShape } from './interface';\nimport Avatar from './avatar.vue';\nimport Popover from '../popover';\nimport { TriggerProps } from '../trigger';\nimport { getAllElements } from '../_utils/vue-utils';\nimport { avatarGroupInjectionKey } from './context';\nimport { configProviderInjectionKey } from '../config-provider/context';\n\nconst AvatarGroup = defineComponent({\n  name: 'AvatarGroup',\n  props: {\n    /**\n     * @zh 头像的形状，有圆形(circle)和正方形(square)两种\n     * @en The shape of the avatar in the group, there are two kinds of circle (circle) and square (square)\n     * @values 'circle', 'square'\n     */\n    shape: {\n      type: String as PropType<AvatarShape>,\n      default: 'circle',\n    },\n    /**\n     * @zh 头像的尺寸大小，单位是 `px`\n     * @en The size of the avatar in the group, the unit is `px`\n     */\n    size: Number,\n    /**\n     * @zh 是否自动根据头像尺寸调整字体大小\n     * @en Whether to automatically adjust the font size according to the size of the avatar.\n     */\n    autoFixFontSize: {\n      type: Boolean,\n      default: true,\n    },\n    /**\n     * @zh 头像组最多显示的头像数量，多余头像将以 `+x` 的形式展示。\n     * @en The maximum number of avatars displayed in the avatar group. The excess avatars will be displayed in the form of `+x`.\n     */\n    maxCount: {\n      type: Number,\n      default: 0,\n    },\n    /**\n     * @zh 头像组内的头像 `z-index` 递增，默认是递减。\n     * @en The avatar `z-index` in the avatar group increases, and the default is decreasing.\n     */\n    zIndexAscend: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 多余头像样式。\n     * @en Style for +x.\n     * @version 2.7.0\n     */\n    maxStyle: {\n      type: Object as PropType<CSSProperties>,\n    },\n    /**\n     * @zh 多余头像气泡的 `TriggerProps`\n     * @en TriggerProps for popover around +x.\n     * @version 2.7.0\n     */\n    maxPopoverTriggerProps: {\n      type: Object as PropType<TriggerProps>,\n    },\n  },\n  setup(props, { slots }) {\n    const { shape, size, autoFixFontSize, zIndexAscend } = toRefs(props);\n    const prefixCls = getPrefixCls('avatar-group');\n    const configCtx = inject(configProviderInjectionKey, undefined);\n    const rtl = computed(() => configCtx?.rtl ?? false);\n\n    const total = ref(0);\n\n    provide(\n      avatarGroupInjectionKey,\n      reactive({\n        shape,\n        size,\n        autoFixFontSize,\n        zIndexAscend,\n        total,\n        rtl,\n      })\n    );\n\n    return () => {\n      const children = getAllElements(slots.default?.() ?? []);\n      const avatarsToRender =\n        props.maxCount > 0 ? children.slice(0, props.maxCount) : children;\n      const avatarsInPopover =\n        props.maxCount > 0 ? children.slice(props.maxCount) : [];\n\n      if (total.value !== children.length) {\n        total.value = children.length;\n      }\n\n      return (\n        <div class={`${prefixCls} ${rtl.value ? `${prefixCls}-rtl` : ''}`}>\n          {avatarsToRender}\n          {avatarsInPopover.length > 0 && (\n            <Popover\n              v-slots={{\n                content: () => <div>{avatarsInPopover}</div>,\n              }}\n              {...props.maxPopoverTriggerProps}\n            >\n              <Avatar\n                class={`${prefixCls}-max-count-avatar`}\n                style={props.maxStyle}\n              >\n                +{avatarsInPopover.length}\n              </Avatar>\n            </Popover>\n          )}\n        </div>\n      );\n    };\n  },\n});\n\nexport default AvatarGroup;\n"
  },
  {
    "path": "packages/web-vue/components/avatar/avatar.vue",
    "content": "<template>\n  <div\n    ref=\"itemRef\"\n    :style=\"outerStyle\"\n    :class=\"[\n      cls,\n      {\n        [`${prefixCls}-with-trigger-icon`]: Boolean($slots['trigger-icon']),\n        // 添加根据 rtl 变量生成的类名\n        [`${prefixCls}-rtl`]: rtl,\n      },\n    ]\"\n    @click=\"onClick\"\n  >\n    <resize-observer @resize=\"handleResize\">\n      <span ref=\"wrapperRef\" :class=\"wrapperCls\">\n        <template v-if=\"imageUrl\">\n          <slot v-if=\"hasError\" name=\"error\">\n            <div :class=\"`${prefixCls}-image-icon`\"><IconImageClose /></div>\n          </slot>\n          <slot v-if=\"!(hasError || !shouldLoad) && !isLoaded\">\n            <div :class=\"`${prefixCls}-image-icon`\"><IconLoading /></div>\n          </slot>\n          <img\n            v-if=\"!(hasError || !shouldLoad)\"\n            :src=\"imageUrl\"\n            :style=\"{\n              width: size + 'px',\n              height: size + 'px',\n              objectFit: objectFit,\n            }\"\n            alt=\"avatar\"\n            @load=\"handleImgLoad\"\n            @error=\"handleImgError\"\n          />\n        </template>\n        <slot v-else />\n      </span>\n    </resize-observer>\n    <div\n      v-if=\"$slots['trigger-icon']\"\n      :class=\"`${prefixCls}-trigger-icon-${triggerType}`\"\n      :style=\"computedTriggerIconStyle\"\n    >\n      <slot name=\"trigger-icon\" />\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport {\n  defineComponent,\n  computed,\n  toRefs,\n  watch,\n  ref,\n  onMounted,\n  nextTick,\n  CSSProperties,\n  PropType,\n  inject,\n} from 'vue';\nimport { getPrefixCls } from '../_utils/global-config';\nimport { AvatarShape, AvatarTriggerType, ObjectFit } from './interface';\nimport { useIndex } from '../_hooks/use-index';\nimport ResizeObserver from '../_components/resize-observer-v2';\nimport { avatarGroupInjectionKey } from './context';\nimport { isNumber } from '../_utils/is';\nimport IconImageClose from '../icon/icon-image-close';\nimport IconLoading from '../icon/icon-loading';\nimport { configProviderInjectionKey } from '../config-provider/context';\n\nexport default defineComponent({\n  name: 'Avatar',\n  components: {\n    ResizeObserver,\n    IconImageClose,\n    IconLoading,\n  },\n  props: {\n    /**\n     * @zh 头像的形状，有圆形(circle)和正方形(square)两种\n     * @en The shape of the avatar, there are two kinds of circle (circle) and square (square)\n     * @values 'circle', 'square'\n     */\n    shape: {\n      type: String as PropType<AvatarShape>,\n      default: 'circle',\n    },\n    /**\n     * @zh 自定义头像图片地址，如果传入该属性，会默认渲染img标签\n     * @en Custom avatar image address. If this attribute is passed in, the img tag will be rendered by default\n     * @version 2.40.0\n     */\n    imageUrl: String,\n    /**\n     * @zh 头像的尺寸大小，单位是 `px`。未填写时使用样式中的大小 `40px`\n     * @en The size of the avatar, the unit is `px`. Use size `40px` in styles when not filled\n     */\n    size: Number,\n    /**\n     * @zh 是否自动根据头像尺寸调整字体大小\n     * @en Whether to automatically adjust the font size according to the size of the avatar.\n     */\n    autoFixFontSize: {\n      type: Boolean,\n      default: true,\n    },\n    /**\n     * @zh 可点击的头像交互类型\n     * @en Clickable avatar interaction type\n     * @values 'mask', 'button'\n     */\n    triggerType: {\n      type: String as PropType<AvatarTriggerType>,\n      default: 'button',\n    },\n    /**\n     * @zh 交互图标的样式\n     * @en Interactive icon style\n     */\n    triggerIconStyle: {\n      type: Object as PropType<CSSProperties>,\n    },\n    /**\n     * @zh 图片在容器内的的适应类型\n     * @en Object-fit type of the image in the container\n     * @version 2.52.0\n     */\n    objectFit: {\n      type: String as PropType<ObjectFit>,\n    },\n  },\n  emits: {\n    /**\n     * @zh 点击回调\n     * @en Callback when clicked\n     * @param {MouseEvent} ev\n     */\n    click: (ev: MouseEvent) => true,\n    /**\n     * @zh 图片加载错误\n     * @en image load error\n     */\n    error: () => true,\n    /**\n     * @zh 图片加载成功\n     * @en image load success\n     */\n    load: () => true,\n  },\n  /**\n   * @zh 可点击的头像交互图标\n   * @en Clickable avatar interaction icon\n   * @slot trigger-icon\n   */\n  setup(props, { slots, emit, attrs }) {\n    const { shape, size, autoFixFontSize, triggerType, triggerIconStyle } =\n      toRefs(props);\n    const prefixCls = getPrefixCls('avatar');\n    const groupCtx = inject(avatarGroupInjectionKey, undefined);\n    const configCtx = inject(configProviderInjectionKey, undefined);\n    const rtl = computed(() => configCtx?.rtl ?? false);\n\n    const itemRef = ref<HTMLDivElement>();\n    const wrapperRef = ref<HTMLElement>();\n\n    const mergedShape = computed(() => groupCtx?.shape ?? shape.value);\n    const mergedSize = computed(() => groupCtx?.size ?? size.value);\n    const mergedAutoFixFontSize = computed(\n      () => groupCtx?.autoFixFontSize ?? autoFixFontSize.value\n    );\n    const isImage = ref(false);\n\n    const hasError = ref(false);\n    const shouldLoad = ref(true);\n    const isLoaded = ref(false);\n\n    const index = groupCtx\n      ? useIndex({\n          itemRef,\n          selector: `.${prefixCls}`,\n        }).computedIndex\n      : ref(-1);\n\n    const outerStyle = computed(() => {\n      const style: CSSProperties = isNumber(mergedSize.value)\n        ? {\n            width: `${mergedSize.value}px`,\n            height: `${mergedSize.value}px`,\n            fontSize: `${mergedSize.value / 2}px`,\n          }\n        : {};\n      if (groupCtx) {\n        style.zIndex = groupCtx.zIndexAscend\n          ? index.value + 1\n          : groupCtx.total - index.value;\n        style.marginLeft =\n          index.value !== 0 ? `-${(mergedSize.value ?? 40) / 4}px` : '0';\n      }\n\n      return style;\n    });\n\n    const computedTriggerIconStyle = useTriggerIconStyle({\n      triggerIconStyle: triggerIconStyle?.value,\n      inlineStyle: attrs.style as CSSProperties,\n      triggerType: triggerType.value,\n    });\n\n    const autoFixFontSizeHandler = () => {\n      if (!isImage.value && !props.imageUrl) {\n        nextTick(() => {\n          if (!wrapperRef.value || !itemRef.value) {\n            return;\n          }\n          const textWidth = wrapperRef.value.clientWidth;\n          const avatarWidth = mergedSize.value ?? itemRef.value.offsetWidth;\n\n          const scale = avatarWidth / (textWidth + 8);\n          if (avatarWidth && scale < 1) {\n            wrapperRef.value.style.transform = `scale(${scale}) translateX(-50%)`;\n          }\n          shouldLoad.value = true;\n        });\n      }\n    };\n\n    onMounted(() => {\n      if (\n        wrapperRef.value?.firstElementChild &&\n        ['IMG', 'PICTURE'].includes(wrapperRef.value.firstElementChild.tagName)\n      ) {\n        isImage.value = true;\n      }\n      if (mergedAutoFixFontSize.value) {\n        autoFixFontSizeHandler();\n      }\n    });\n\n    watch(size, () => {\n      if (mergedAutoFixFontSize.value) {\n        autoFixFontSizeHandler();\n      }\n    });\n\n    const cls = computed(() => [\n      prefixCls,\n      `${prefixCls}-${mergedShape.value}`,\n    ]);\n    const wrapperCls = computed(() =>\n      isImage.value || props.imageUrl\n        ? `${prefixCls}-image`\n        : `${prefixCls}-text`\n    );\n\n    const onClick = (e: MouseEvent) => {\n      emit('click', e);\n    };\n\n    const handleResize = () => {\n      if (mergedAutoFixFontSize.value) {\n        autoFixFontSizeHandler();\n      }\n    };\n\n    const handleImgLoad = () => {\n      isLoaded.value = true;\n      emit('load');\n    };\n    const handleImgError = () => {\n      hasError.value = true;\n      emit('error');\n    };\n\n    return {\n      prefixCls,\n      rtl,\n      itemRef,\n      cls,\n      outerStyle,\n      wrapperRef,\n      wrapperCls,\n      computedTriggerIconStyle,\n      isImage,\n      shouldLoad,\n      isLoaded,\n      hasError,\n      onClick,\n      handleResize,\n      handleImgLoad,\n      handleImgError,\n    };\n  },\n});\n\nconst useTriggerIconStyle = ({\n  triggerType,\n  inlineStyle = {},\n  triggerIconStyle = {},\n}: {\n  triggerType: AvatarTriggerType;\n  inlineStyle?: CSSProperties;\n  triggerIconStyle?: CSSProperties;\n}): CSSProperties => {\n  let addon: CSSProperties = {};\n  if (\n    triggerType === 'button' &&\n    (!triggerIconStyle || (triggerIconStyle && !triggerIconStyle.color)) &&\n    inlineStyle &&\n    inlineStyle.backgroundColor\n  ) {\n    addon = { color: inlineStyle.backgroundColor };\n  }\n  return {\n    ...triggerIconStyle,\n    ...addon,\n  };\n};\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/avatar/context.ts",
    "content": "import { InjectionKey } from 'vue';\nimport { AvatarShape } from './interface';\n\nexport interface AvatarGroupContext {\n  size: number | undefined;\n  shape: AvatarShape;\n  autoFixFontSize: boolean;\n  zIndexAscend: boolean;\n  total: number;\n}\n\nexport const avatarGroupInjectionKey: InjectionKey<AvatarGroupContext> =\n  Symbol('ArcoAvatarGroup');\n"
  },
  {
    "path": "packages/web-vue/components/avatar/index.ts",
    "content": "import type { App } from 'vue';\nimport type { ArcoOptions } from '../_utils/types';\nimport { setGlobalConfig, getComponentPrefix } from '../_utils/global-config';\nimport _Avatar from './avatar.vue';\nimport _AvatarGroup from './avatar-group';\n\nconst Avatar = Object.assign(_Avatar, {\n  Group: _AvatarGroup,\n  install: (app: App, options?: ArcoOptions) => {\n    setGlobalConfig(app, options);\n    const componentPrefix = getComponentPrefix(options);\n\n    app.component(componentPrefix + _Avatar.name, _Avatar);\n    app.component(componentPrefix + _AvatarGroup.name, _AvatarGroup);\n  },\n});\n\nexport type AvatarInstance = InstanceType<typeof _Avatar>;\nexport type AvatarGroupInstance = InstanceType<typeof _AvatarGroup>;\n\nexport { _AvatarGroup as AvatarGroup };\n\nexport default Avatar;\n"
  },
  {
    "path": "packages/web-vue/components/avatar/interface.ts",
    "content": "export type AvatarShape = 'circle' | 'square';\n\nexport type AvatarTriggerType = 'button' | 'mask';\n\nexport type ObjectFit = 'fill' | 'contain' | 'cover' | 'none' | 'scale-down';\n"
  },
  {
    "path": "packages/web-vue/components/avatar/style/index.less",
    "content": "@import './token.less';\n\n@avatar-prefix-cls: ~'@{prefix}-avatar';\n\n.@{avatar-prefix-cls} {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  box-sizing: border-box;\n  width: @avatar-size-default;\n  height: @avatar-size-default;\n  color: @avatar-color-text;\n  font-size: @avatar-font-size-text;\n  white-space: nowrap;\n  vertical-align: middle;\n  background-color: @avatar-color-bg;\n\n  &-circle {\n    border-radius: @avatar-circle-border-radius;\n  }\n\n  &-circle &-image {\n    overflow: hidden;\n    border-radius: @avatar-circle-border-radius;\n  }\n\n  &-square {\n    border-radius: @avatar-square-border-radius;\n  }\n\n  &-square &-image {\n    overflow: hidden;\n    border-radius: @avatar-square-border-radius;\n  }\n\n  &-text {\n    position: absolute;\n    left: 50%;\n    font-weight: @avatar-font-weight-text;\n    // 避免继承行高导致的文字不居中\n    line-height: 1;\n    transform: translateX(-50%);\n    transform-origin: 0 center;\n  }\n\n  &-image {\n    display: inline-block;\n    width: 100%;\n    height: 100%;\n\n    &-icon {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: 100%;\n      height: 100%;\n    }\n\n    img,\n    picture {\n      width: 100%;\n      height: 100%;\n    }\n  }\n\n  &-trigger-icon-button {\n    position: absolute;\n    right: -@avatar-spacing-trigger-button-right;\n    bottom: -@avatar-spacing-trigger-button-bottom;\n    z-index: 1;\n    width: @avatar-size-trigger-button;\n    height: @avatar-size-trigger-button;\n    color: @avatar-color-trigger-icon-button;\n    font-size: @avatar-size-trigger-icon;\n    line-height: @avatar-size-trigger-button;\n    text-align: center;\n    background-color: @avatar-color-trigger-button-bg;\n    border-radius: @avatar-border-trigger-button-radius;\n    transition: background-color @transition-duration-1\n      @transition-timing-function-linear;\n  }\n\n  &-trigger-icon-mask {\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    height: 100%;\n    color: @avatar-color-trigger-mask-icon;\n    font-size: 16px;\n    background-color: fade(@gray-10, @avatar-opacity-trigger-mask-bg);\n    border-radius: @avatar-square-border-radius;\n    opacity: 0;\n    transition: all @transition-duration-1 @transition-timing-function-linear;\n  }\n\n  &-circle &-trigger-icon-mask {\n    border-radius: @avatar-circle-border-radius;\n  }\n\n  &-with-trigger-icon {\n    cursor: pointer;\n  }\n\n  &-with-trigger-icon:hover &-trigger-icon-mask {\n    z-index: 2;\n    opacity: 1;\n  }\n\n  &-with-trigger-icon:hover &-trigger-icon-button {\n    background-color: @avatar-color-trigger-button-bg_hover;\n  }\n\n  &-rtl {\n    direction: rtl;\n  }\n\n  &-rtl &-trigger-icon-button {\n    right: unset;\n    left: -@avatar-spacing-trigger-button-right;\n  }\n\n  // Group\n  &-group {\n    display: inline-block;\n    line-height: 0;\n\n    &-max-count-avatar {\n      color: @avatar-color-max-count-text;\n      font-size: @avatar-font-size-max-count;\n      cursor: default;\n    }\n\n    &-rtl {\n      direction: rtl;\n    }\n  }\n\n  &-group & {\n    border: @avatar-group-item-border-width solid\n      @avatar-color-group-item-border;\n  }\n\n  &-group &:not(:first-child) {\n    margin-left: @avatar-group-item-margin-left;\n  }\n\n  &-group-popover &:not(:first-child) {\n    margin-left: @avatar-group-popover-item-spacing;\n  }\n}\n"
  },
  {
    "path": "packages/web-vue/components/avatar/style/index.ts",
    "content": "import '../../style/index.less';\nimport './index.less';\n"
  },
  {
    "path": "packages/web-vue/components/avatar/style/token.less",
    "content": "@import '../../style/theme/index.less';\n\n@avatar-size-default: @size-10;\n@avatar-font-size-text: 20px;\n@avatar-color-text: var(~'@{arco-cssvars-prefix}-color-white');\n@avatar-color-bg: var(~'@{arco-cssvars-prefix}-color-fill-4');\n@avatar-color-group-item-border: var(~'@{arco-cssvars-prefix}-color-bg-2');\n@avatar-group-item-border-width: 2px;\n@avatar-group-item-margin-left: -10px;\n@avatar-group-popover-item-spacing: @spacing-2;\n@avatar-font-weight-text: @font-weight-500;\n\n@avatar-circle-border-radius: @radius-circle;\n@avatar-square-border-radius: @radius-medium;\n\n@avatar-size-trigger-button: @size-5;\n@avatar-color-trigger-button-bg: var(~'@{arco-cssvars-prefix}-color-neutral-2');\n@avatar-color-trigger-button-bg_hover: var(~'@{arco-cssvars-prefix}-color-neutral-3');\n@avatar-color-trigger-mask-icon: var(~'@{arco-cssvars-prefix}-color-white');\n@avatar-opacity-trigger-mask-bg: @opacity-6;\n@avatar-color-trigger-icon-button: var(~'@{arco-cssvars-prefix}-color-fill-4');\n@avatar-spacing-trigger-button-right: @spacing-2;\n@avatar-spacing-trigger-button-bottom: @spacing-2;\n@avatar-size-trigger-icon: @size-3;\n@avatar-border-trigger-button-radius: @radius-circle;\n\n\n@avatar-font-size-max-count: 20px;\n@avatar-color-max-count-text: var(~'@{arco-cssvars-prefix}-color-white');\n"
  },
  {
    "path": "packages/web-vue/components/back-top/README.en-US.md",
    "content": "```yaml\nmeta:\n  type: Component\n  category: Other\ntitle: BackTop\ndescription: A button to return to the top with one click.\n```\n\n*Auto translate by google.*\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/custom.md\n\n## API\n\n\n### `<back-top>` Props\n\n|Attribute|Description|Type|Default|\n|---|---|---|:---:|\n|visible-height|Display the trigger scroll height of the back to top button|`number`|`200`|\n|target-container|Scroll event listener container|`string \\| HTMLElement`|`-`|\n|easing|Easing mode of scrolling animation, refer to [BTween](https://github.com/PengJiyuan/b-tween) for optional values|`string`|`'quartOut'`|\n|duration|Duration of scroll animation|`number`|`200`|\n\n\n"
  },
  {
    "path": "packages/web-vue/components/back-top/README.zh-CN.md",
    "content": "```yaml\nmeta:\n  type: 组件\n  category: 其他\ntitle: 返回顶部 BackTop\ndescription: 可一键返回顶部的按钮。\n```\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/custom.md\n\n## API\n\n\n### `<back-top>` Props\n\n|参数名|描述|类型|默认值|\n|---|---|---|:---:|\n|visible-height|显示回到顶部按钮的触发滚动高度|`number`|`200`|\n|target-container|滚动事件的监听容器|`string \\| HTMLElement`|`-`|\n|easing|滚动动画的缓动方式，可选值参考 [BTween](https://github.com/PengJiyuan/b-tween)|`string`|`'quartOut'`|\n|duration|滚动动画的持续时间|`number`|`200`|\n\n\n"
  },
  {
    "path": "packages/web-vue/components/back-top/TEMPLATE.md",
    "content": "## zh-CN\n```yaml\nmeta:\n  type: 组件\n  category: 其他\ntitle: 返回顶部 BackTop\ndescription: 可一键返回顶部的按钮。\n```\n---\n## en-US\n```yaml\nmeta:\n  type: Component\n  category: Other\ntitle: BackTop\ndescription: A button to return to the top with one click.\n```\n---\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/custom.md\n\n## API\n\n%%API(back-top.vue)%%\n"
  },
  {
    "path": "packages/web-vue/components/back-top/__demo__/basic.md",
    "content": "```yaml\ntitle:\n  zh-CN: 基本用法\n  en-US: Basic Usage\n```\n\n## zh-CN\n\n当容器滚动到一定高度的时候，在右下角会出现一个返回顶部的按钮。\n\n---\n\n## en-US\n\nWhen the container is scrolled to a certain height, a button to return to the top will appear in the lower right corner.\n\n---\n\n```vue\n<template>\n  <div class=\"wrapper\">\n    <ul id=\"basic-demo\">\n      <li v-for=\"(_, index) of Array(40)\" :key=\"index\">This is the content</li>\n    </ul>\n    <a-back-top target-container=\"#basic-demo\" :style=\"{position:'absolute'}\" />\n  </div>\n</template>\n\n<style scoped lang=\"less\">\n.wrapper {\n  position: relative;\n\n  ul {\n    height: 200px;\n    overflow-y: auto;\n\n    li {\n      line-height: 30px;\n    }\n  }\n}\n</style>\n```\n"
  },
  {
    "path": "packages/web-vue/components/back-top/__demo__/custom.md",
    "content": "```yaml\ntitle:\n  zh-CN: 自定义按钮\n  en-US: Custom Button\n```\n\n## zh-CN\n\n可以自定义返回按钮。\n\n---\n\n## en-US\n\nYou can customize the back button.\n\n---\n\n```vue\n<template>\n  <div class=\"wrapper\">\n    <ul id=\"custom-demo\">\n      <li v-for=\"(_, index) of Array(40)\" :key=\"index\">This is the content</li>\n    </ul>\n    <a-back-top target-container=\"#custom-demo\" :style=\"{position:'absolute'}\" >\n      <a-button>UP</a-button>\n    </a-back-top>\n  </div>\n</template>\n\n<style scoped lang=\"less\">\n.wrapper {\n  position: relative;\n\n  ul {\n    height: 200px;\n    overflow-y: auto;\n\n    li {\n      line-height: 30px;\n    }\n  }\n}\n</style>\n```\n"
  },
  {
    "path": "packages/web-vue/components/back-top/__test__/__snapshots__/demo.test.ts.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`<back-top> demo: render [basic] correctly 1`] = `\n\"<div class=\\\\\"wrapper\\\\\">\n  <ul id=\\\\\"basic-demo\\\\\">\n    <li>This is the content</li>\n    <li>This is the content</li>\n    <li>This is the content</li>\n    <li>This is the content</li>\n    <li>This is the content</li>\n    <li>This is the content</li>\n    <li>This is the content</li>\n    <li>This is the content</li>\n    <li>This is the content</li>\n    <li>This is the content</li>\n    <li>This is the content</li>\n    <li>This is the content</li>\n    <li>This is the content</li>\n    <li>This is the content</li>\n    <li>This is the content</li>\n    <li>This is the content</li>\n    <li>This is the content</li>\n    <li>This is the content</li>\n    <li>This is the content</li>\n    <li>This is the content</li>\n    <li>This is the content</li>\n    <li>This is the content</li>\n    <li>This is the content</li>\n    <li>This is the content</li>\n    <li>This is the content</li>\n    <li>This is the content</li>\n    <li>This is the content</li>\n    <li>This is the content</li>\n    <li>This is the content</li>\n    <li>This is the content</li>\n    <li>This is the content</li>\n    <li>This is the content</li>\n    <li>This is the content</li>\n    <li>This is the content</li>\n    <li>This is the content</li>\n    <li>This is the content</li>\n    <li>This is the content</li>\n    <li>This is the content</li>\n    <li>This is the content</li>\n    <li>This is the content</li>\n  </ul>\n  <transition-stub name=\\\\\"fade-in\\\\\" appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\" style=\\\\\"position: absolute;\\\\\">\n    <!--v-if-->\n  </transition-stub>\n</div>\"\n`;\n\nexports[`<back-top> demo: render [custom] correctly 1`] = `\n\"<div class=\\\\\"wrapper\\\\\">\n  <ul id=\\\\\"custom-demo\\\\\">\n    <li>This is the content</li>\n    <li>This is the content</li>\n    <li>This is the content</li>\n    <li>This is the content</li>\n    <li>This is the content</li>\n    <li>This is the content</li>\n    <li>This is the content</li>\n    <li>This is the content</li>\n    <li>This is the content</li>\n    <li>This is the content</li>\n    <li>This is the content</li>\n    <li>This is the content</li>\n    <li>This is the content</li>\n    <li>This is the content</li>\n    <li>This is the content</li>\n    <li>This is the content</li>\n    <li>This is the content</li>\n    <li>This is the content</li>\n    <li>This is the content</li>\n    <li>This is the content</li>\n    <li>This is the content</li>\n    <li>This is the content</li>\n    <li>This is the content</li>\n    <li>This is the content</li>\n    <li>This is the content</li>\n    <li>This is the content</li>\n    <li>This is the content</li>\n    <li>This is the content</li>\n    <li>This is the content</li>\n    <li>This is the content</li>\n    <li>This is the content</li>\n    <li>This is the content</li>\n    <li>This is the content</li>\n    <li>This is the content</li>\n    <li>This is the content</li>\n    <li>This is the content</li>\n    <li>This is the content</li>\n    <li>This is the content</li>\n    <li>This is the content</li>\n    <li>This is the content</li>\n  </ul>\n  <transition-stub name=\\\\\"fade-in\\\\\" appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\" style=\\\\\"position: absolute;\\\\\">\n    <!--v-if-->\n  </transition-stub>\n</div>\"\n`;\n"
  },
  {
    "path": "packages/web-vue/components/back-top/__test__/demo.test.ts",
    "content": "import demoTest from '../../../scripts/demo-test';\n\ndemoTest('back-top');\n"
  },
  {
    "path": "packages/web-vue/components/back-top/back-top.vue",
    "content": "<template>\n  <transition name=\"fade-in\">\n    <div v-if=\"visible\" :class=\"prefixCls\" @click=\"scrollToTop\">\n      <slot>\n        <button :class=\"`${prefixCls}-btn`\">\n          <icon-to-top />\n        </button>\n      </slot>\n    </div>\n  </transition>\n</template>\n\n<script lang=\"ts\">\nimport type { PropType } from 'vue';\nimport { defineComponent, onMounted, onUnmounted, ref } from 'vue';\n// @ts-ignore\nimport BTween from 'b-tween';\nimport { getPrefixCls } from '../_utils/global-config';\nimport { on, off } from '../_utils/dom';\nimport { throttleByRaf } from '../_utils/throttle-by-raf';\nimport IconToTop from '../icon/icon-to-top';\nimport { isString } from '../_utils/is';\n\nexport default defineComponent({\n  name: 'BackTop',\n  components: {\n    IconToTop,\n  },\n  props: {\n    /**\n     * @zh 显示回到顶部按钮的触发滚动高度\n     * @en Display the trigger scroll height of the back to top button\n     */\n    visibleHeight: {\n      type: Number as PropType<number>,\n      default: 200,\n    },\n    /**\n     * @zh 滚动事件的监听容器\n     * @en Scroll event listener container\n     */\n    targetContainer: {\n      type: [String, Object] as PropType<string | HTMLElement>,\n    },\n    /**\n     * @zh 滚动动画的缓动方式，可选值参考 [BTween](https://github.com/PengJiyuan/b-tween)\n     * @en Easing mode of scrolling animation, refer to [BTween](https://github.com/PengJiyuan/b-tween) for optional values\n     */\n    easing: {\n      type: String,\n      default: 'quartOut',\n    },\n    /**\n     * @zh 滚动动画的持续时间\n     * @en Duration of scroll animation\n     */\n    duration: {\n      type: Number,\n      default: 200,\n    },\n  },\n  setup(props) {\n    const prefixCls = getPrefixCls('back-top');\n    const visible = ref(false);\n    const target = ref<HTMLElement>();\n    const isWindow = !props.targetContainer;\n\n    const scrollHandler = throttleByRaf(() => {\n      if (target.value) {\n        const { visibleHeight } = props;\n        const { scrollTop } = target.value;\n        visible.value = scrollTop >= visibleHeight;\n      }\n    });\n\n    const getContainer = (container: string | HTMLElement) => {\n      if (isString(container)) {\n        return document.querySelector(container) as HTMLElement;\n      }\n      return container;\n    };\n\n    onMounted(() => {\n      target.value = isWindow\n        ? document?.documentElement\n        : getContainer(props.targetContainer);\n      if (target.value) {\n        on(isWindow ? window : target.value, 'scroll', scrollHandler);\n        scrollHandler();\n      }\n    });\n\n    onUnmounted(() => {\n      scrollHandler.cancel();\n      if (target.value) {\n        off(isWindow ? window : target.value, 'scroll', scrollHandler);\n      }\n    });\n\n    const scrollToTop = () => {\n      if (target.value) {\n        const { scrollTop } = target.value;\n        const tween = new BTween({\n          from: { scrollTop },\n          to: { scrollTop: 0 },\n          easing: props.easing,\n          duration: props.duration,\n          onUpdate: (keys: any) => {\n            if (target.value) {\n              target.value.scrollTop = keys.scrollTop;\n            }\n          },\n        });\n        tween.start();\n        // props.onClick && props.onClick();\n      }\n    };\n\n    return {\n      prefixCls,\n      visible,\n      scrollToTop,\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/back-top/index.ts",
    "content": "import type { App } from 'vue';\nimport type { ArcoOptions } from '../_utils/types';\nimport { setGlobalConfig, getComponentPrefix } from '../_utils/global-config';\nimport _BackTop from './back-top.vue';\n\nconst BackTop = Object.assign(_BackTop, {\n  install: (app: App, options?: ArcoOptions) => {\n    setGlobalConfig(app, options);\n    const componentPrefix = getComponentPrefix(options);\n\n    app.component(componentPrefix + _BackTop.name, _BackTop);\n  },\n});\n\nexport type BackTopInstance = InstanceType<typeof _BackTop>;\n\nexport default BackTop;\n"
  },
  {
    "path": "packages/web-vue/components/back-top/style/index.less",
    "content": "@import './token.less';\n\n@backtop-prefix-cls: ~'@{prefix}-back-top';\n\n.@{backtop-prefix-cls} {\n  position: fixed;\n  right: @backtop-margin-right;\n  bottom: @backtop-margin-bottom;\n  z-index: 100;\n\n  &-btn {\n    width: @backtop-button-size-width;\n    height: @backtop-button-size-width;\n    color: @backtop-button-color-text;\n    font-size: @backtop-button-size-font;\n    text-align: center;\n    background-color: @backtop-button-color-bg;\n    border: none;\n    border-radius: @backtop-button-border-radius;\n    outline: none;\n    cursor: pointer;\n    cursor: pointer;\n    transition: all @transition-duration-2 @transition-timing-function-linear;\n\n    &:hover {\n      background-color: @backtop-button-color-bg_hover;\n    }\n\n    svg {\n      font-size: @backtop-button-size-icon;\n    }\n  }\n}\n"
  },
  {
    "path": "packages/web-vue/components/back-top/style/index.ts",
    "content": "import '../../style/index.less';\nimport './index.less';\n"
  },
  {
    "path": "packages/web-vue/components/back-top/style/token.less",
    "content": "@import '../../style/theme/index.less';\n\n@backtop-margin-bottom: @spacing-9;\n@backtop-margin-right: @spacing-9;\n\n@backtop-button-size-width: @size-10;\n@backtop-button-size-font: @font-size-body-1;\n@backtop-button-size-icon: 14px;\n@backtop-button-color-bg: @color-primary-6;\n@backtop-button-color-bg_hover: @color-primary-5;\n@backtop-button-border-radius: @radius-circle;\n@backtop-button-color-text: var(~'@{arco-cssvars-prefix}-color-white');\n"
  },
  {
    "path": "packages/web-vue/components/badge/CHANGELOG.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.47.1\n\n`2023-06-09`\n\n### 🐛 BugFix\n\n- Fix the problem that components fail when customizing `prefix-cls` ([#2476](https://github.com/arco-design/arco-design-vue/pull/2476))\n\n\n## 2.40.1\n\n`2022-12-23`\n\n\n## 2.12.0\n\n`2021-12-24`\n\n### 💎 Enhancement\n\n- No longer render the logo when count is 0 ([#445](https://github.com/arco-design/arco-design-vue/pull/445))\n\n"
  },
  {
    "path": "packages/web-vue/components/badge/CHANGELOG.zh-CN.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.47.1\n\n`2023-06-09`\n\n### 🐛 问题修复\n\n- 修复组件在自定义 `prefix-cls` 时失效的问题 ([#2476](https://github.com/arco-design/arco-design-vue/pull/2476))\n\n\n## 2.40.1\n\n`2022-12-23`\n\n\n## 2.12.0\n\n`2021-12-24`\n\n### 💎 功能优化\n\n- count 为 0 时不再渲染徽标 ([#445](https://github.com/arco-design/arco-design-vue/pull/445))\n\n"
  },
  {
    "path": "packages/web-vue/components/badge/README.en-US.md",
    "content": "```yaml\nmeta:\n  type: Component\n  category: Data Display\ntitle: Badge\ndescription: Badge normally appears in the upper right corner of the icon or text to prompt important information.\n```\n\n*Auto translate by google.*\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/alone.md\n\n@import ./__demo__/dot.md\n\n@import ./__demo__/text.md\n\n@import ./__demo__/max.md\n\n@import ./__demo__/status.md\n\n@import ./__demo__/color.md\n\n## API\n\n\n### `<badge>` Props\n\n|Attribute|Description|Type|Default|\n|---|---|---|:---:|\n|text|Set the display text of the status dot|`string`|`-`|\n|dot|Whether to display a red dot instead of `count`|`boolean`|`false`|\n|dot-style|Customize badge dot style|`object`|`-`|\n|max-count|Max count to show. If count is larger than this value, it will be displayed as `${maxCount}+`|`number`|`99`|\n|offset|Set offset of the badge dot|`number[]`|`[]`|\n|color|Customize dot color|`ColorType \\| string`|`-`|\n|status|Badge status|`'normal' \\| 'processing' \\| 'success' \\| 'warning' \\| 'danger'`|`-`|\n|count|Number to show in badge|`number`|`-`|\n\n\n"
  },
  {
    "path": "packages/web-vue/components/badge/README.zh-CN.md",
    "content": "```yaml\nmeta:\n  type: 组件\n  category: 数据展示\ntitle: 徽标数 Badge\ndescription: 一般出现在图标或文字的右上角。提供及时、重要的信息提示。\n```\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/alone.md\n\n@import ./__demo__/dot.md\n\n@import ./__demo__/text.md\n\n@import ./__demo__/max.md\n\n@import ./__demo__/status.md\n\n@import ./__demo__/color.md\n\n## API\n\n\n### `<badge>` Props\n\n|参数名|描述|类型|默认值|\n|---|---|---|:---:|\n|text|自定义提示内容|`string`|`-`|\n|dot|显示为小红点|`boolean`|`false`|\n|dot-style|徽标的样式|`object`|`-`|\n|max-count|徽标最大显示数值，如果count超过这个数值会显示为maxCount|`number`|`99`|\n|offset|设置徽标位置的偏移|`number[]`|`[]`|\n|color|内置的一些颜色|`ColorType \\| string`|`-`|\n|status|徽标的状态类型|`'normal' \\| 'processing' \\| 'success' \\| 'warning' \\| 'danger'`|`-`|\n|count|徽标显示的数字|`number`|`-`|\n\n\n"
  },
  {
    "path": "packages/web-vue/components/badge/TEMPLATE.md",
    "content": "## zh-CN\n```yaml\nmeta:\n  type: 组件\n  category: 数据展示\ntitle: 徽标数 Badge\ndescription: 一般出现在图标或文字的右上角。提供及时、重要的信息提示。\n```\n---\n## en-US\n```yaml\nmeta:\n  type: Component\n  category: Data Display\ntitle: Badge\ndescription: Badge normally appears in the upper right corner of the icon or text to prompt important information.\n```\n---\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/alone.md\n\n@import ./__demo__/dot.md\n\n@import ./__demo__/text.md\n\n@import ./__demo__/max.md\n\n@import ./__demo__/status.md\n\n@import ./__demo__/color.md\n\n## API\n\n%%API(badge.tsx)%%\n"
  },
  {
    "path": "packages/web-vue/components/badge/__demo__/alone.md",
    "content": "```yaml\ntitle:\n  zh-CN: 独立使用\n  en-US: Standalone\n```\n\n## zh-CN\n\n`default slot` 为空时，将会独立展示徽标。\n\n---\n\n## en-US\n\nUsed in standalone when `default slot` is empty.\n\n---\n\n```vue\n<template>\n  <a-space :size=\"40\">\n    <a-badge :count=\"2\" />\n    <a-badge\n      :count=\"2\"\n      :dotStyle=\"{ background: '#E5E6EB', color: '#86909C' }\"\n    />\n    <a-badge :count=\"16\" />\n    <a-badge :count=\"1000\" :max-count=\"99\" />\n  </a-space>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/badge/__demo__/basic.md",
    "content": "```yaml\ntitle:\n  zh-CN: 基本用法\n  en-US: Basic Usage\n```\n\n## zh-CN\n\n基本用法。只需指定 `count`或者 `content slot`，即可显示徽标。\n\n---\n\n## en-US\n\nBasic usage. Just specify `count` or `content slot` to display the badge.\n\n---\n\n```vue\n<template>\n  <a-space :size=\"40\">\n    <a-badge :count=\"9\">\n      <a-avatar shape=\"square\" />\n    </a-badge>\n    <a-badge :count=\"9\" dot :dotStyle=\"{ width: '10px', height: '10px' }\">\n      <a-avatar shape=\"square\" />\n    </a-badge>\n    <a-badge :dotStyle=\"{ height: '16px', width: '16px', fontSize: '14px' }\">\n      <template #content>\n        <IconClockCircle\n          :style=\"{ verticalAlign: 'middle', color: 'var(--color-text-2)' }\"\n        />\n      </template>\n      <a-avatar shape=\"square\" />\n    </a-badge>\n  </a-space>\n</template>\n\n<script>\nimport { IconClockCircle } from '@arco-design/web-vue/es/icon';\n\nexport default {\n  components: { IconClockCircle },\n};\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/badge/__demo__/color.md",
    "content": "```yaml\ntitle:\n  zh-CN: 颜色\n  en-US: Color\n```\n\n## zh-CN\n\n我们提供多种预设色彩的徽标样式。如果预设值不能满足你的需求，`color` 字段也可以设置自定义色值。\n\n---\n\n## en-US\n\nWe provide a variety of preset colors for the badge. And you can also set a custom color by the color property.\n\n---\n\n```vue\n<template>\n  <div>\n    <a-badge\n      v-for=\"color in colors\"\n      :key=\"color\"\n      :color=\"color\"\n      :text=\"color\"\n      :style=\"{ marginRight: '24px' }\"\n    />\n  </div>\n  <br />\n  <div>\n    <a-badge\n      v-for=\"color in customColors\"\n      :key=\"color\"\n      :color=\"color\"\n      :text=\"color\"\n      :style=\"{ marginRight: '24px' }\"\n    />\n  </div>\n</template>\n\n<script>\nconst COLORS = [\n  'red',\n  'orangered',\n  'orange',\n  'gold',\n  'lime',\n  'green',\n  'cyan',\n  'arcoblue',\n  'purple',\n  'pinkpurple',\n  'magenta',\n  'gray',\n];\n\nconst COLORS_CUSTOM = [\n  '#F53F3F',\n  '#7816FF',\n  '#00B42A',\n  '#165DFF',\n  '#FF7D00',\n  '#EB0AA4',\n  '#7BC616',\n  '#86909C',\n  '#B71DE8',\n  '#0FC6C2',\n  '#FFB400',\n  '#168CFF',\n  '#FF5722',\n];\nexport default {\n  data() {\n    return {\n      colors: COLORS,\n      customColors: COLORS_CUSTOM,\n    };\n  },\n};\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/badge/__demo__/dot.md",
    "content": "```yaml\ntitle:\n  zh-CN: 小红点\n  en-US: Red Badge\n```\n\n## zh-CN\n\n设置 `dot`，即可只显示小红点而不显示数字。`count > 0` 时才显示。\n\n---\n\n## en-US\n\nA red dot will be displayed instead of the count. The dot will be showed only when `count > 0`.\n\n---\n\n```vue\n<template>\n  <a-space :size=\"40\">\n    <a-badge :count=\"9\" dot :offset=\"[6, -2]\">\n      <a href=\"#\">Link</a>\n    </a-badge>\n    <a-badge :count=\"9\" dot :offset=\"[2, -2]\">\n      <IconNotification\n        :style=\"{ color: '#888', fontSize: '18px', verticalAlign: '-3px' }\"\n      />\n    </a-badge>\n  </a-space>\n</template>\n\n<script>\nimport { IconNotification } from '@arco-design/web-vue/es/icon';\n\nexport default {\n  components: { IconNotification },\n};\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/badge/__demo__/max.md",
    "content": "```yaml\ntitle:\n  zh-CN: 最大值\n  en-US: Max Count\n```\n\n## zh-CN\n\n设置 `max-count`，可以限制最大显示的徽标数值，超过将会加 `+` 后缀。`max-count` 默认为 `99`。\n\n---\n\n## en-US\n\nIf the count is larger than `max-count`, the `${max-count}+` will be displayed. The default value of `max-count` is `99`.\n\n---\n\n```vue\n<template>\n  <a-space :size=\"40\">\n    <a-badge :max-count=\"10\" :count=\"0\">\n      <a-avatar shape=\"square\">\n        <span>\n          <IconUser />\n        </span>\n      </a-avatar>\n    </a-badge>\n    <a-badge :max-count=\"10\" :count=\"100\">\n      <a-avatar shape=\"square\">\n        <span>\n          <IconUser />\n        </span>\n      </a-avatar>\n    </a-badge>\n    <a-badge :count=\"100\">\n      <a-avatar shape=\"square\">\n        <span>\n          <IconUser />\n        </span>\n      </a-avatar>\n    </a-badge>\n    <a-badge :max-count=\"999\" :count=\"1000\">\n      <a-avatar shape=\"square\">\n        <span>\n          <IconUser />\n        </span>\n      </a-avatar>\n    </a-badge>\n  </a-space>\n</template>\n\n<script>\nimport { IconUser } from '@arco-design/web-vue/es/icon';\n\nexport default {\n  components: { IconUser },\n};\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/badge/__demo__/status.md",
    "content": "```yaml\ntitle:\n  zh-CN: 状态点\n  en-US: Status\n```\n\n## zh-CN\n\n设置 `status`，可以得到不同的状态点。`normal - 正常` `processing - 进行中` `success - 成功` `warning - 提醒` `danger - 危险`。\n\n---\n\n## en-US\n\nDifferent status.\n\n---\n\n```vue\n<template>\n  <a-space size=\"large\" direction=\"vertical\">\n    <a-space size=\"large\">\n      <a-badge status=\"normal\" />\n      <a-badge status=\"processing\" />\n      <a-badge status=\"success\" />\n      <a-badge status=\"warning\" />\n      <a-badge status=\"danger\" />\n    </a-space>\n    <a-space size=\"large\">\n      <a-badge status=\"normal\" text=\"Normal\" />\n      <a-badge status=\"processing\" text=\"Processing\" />\n      <a-badge status=\"success\" text=\"Success\" />\n      <a-badge status=\"warning\" text=\"Warning\" />\n      <a-badge status=\"danger\" text=\"Danger\" />\n    </a-space>\n  </a-space>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/badge/__demo__/text.md",
    "content": "```yaml\ntitle:\n  zh-CN: 文本内容\n  en-US: Text\n```\n\n## zh-CN\n\n设置 `text`，可设置自定义提示内容。\n\n---\n\n## en-US\n\nCustomize the content.\n\n---\n\n```vue\n<template>\n  <a-space :size=\"40\">\n    <a-badge text=\"NEW\">\n      <a-avatar shape=\"square\">\n        <span>\n          <IconUser />\n        </span>\n      </a-avatar>\n    </a-badge>\n    <a-badge text=\"HOT\">\n      <a-avatar shape=\"square\">\n        <span>\n          <IconUser />\n        </span>\n      </a-avatar>\n    </a-badge>\n  </a-space>\n</template>\n\n<script>\nimport { IconUser } from '@arco-design/web-vue/es/icon';\n\nexport default {\n  components: { IconUser },\n};\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/badge/__test__/__snapshots__/demo.test.ts.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`<badge> demo: render [alone] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 40px; row-gap: 40px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-badge arco-badge-no-children\\\\\"><!----><span class=\\\\\"arco-badge-number\\\\\"><span>2</span></span></span></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-badge arco-badge-no-children\\\\\"><!----><span class=\\\\\"arco-badge-number\\\\\" style=\\\\\"background: rgb(229, 230, 235); color: rgb(134, 144, 156);\\\\\"><span>2</span></span></span></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-badge arco-badge-no-children\\\\\"><!----><span class=\\\\\"arco-badge-number\\\\\"><span>16</span></span></span></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-badge arco-badge-no-children\\\\\"><!----><span class=\\\\\"arco-badge-number\\\\\"><span>99+</span></span></span></div>\n</div>\"\n`;\n\nexports[`<badge> demo: render [basic] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 40px; row-gap: 40px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-badge\\\\\"><div class=\\\\\"arco-avatar arco-avatar-square\\\\\"><span class=\\\\\"arco-avatar-text\\\\\"></span>\n    <!--v-if-->\n  </div><span class=\\\\\"arco-badge-number\\\\\"><span>9</span></span></span>\n</div>\n<!---->\n<div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-badge\\\\\"><div class=\\\\\"arco-avatar arco-avatar-square\\\\\"><span class=\\\\\"arco-avatar-text\\\\\"></span>\n  <!--v-if-->\n</div><span class=\\\\\"arco-badge-dot\\\\\" style=\\\\\"width: 10px; height: 10px;\\\\\"></span></span></div>\n<!---->\n<div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-badge\\\\\"><div class=\\\\\"arco-avatar arco-avatar-square\\\\\"><span class=\\\\\"arco-avatar-text\\\\\"></span>\n  <!--v-if-->\n</div><span class=\\\\\"arco-badge-custom-dot\\\\\" style=\\\\\"height: 16px; width: 16px; font-size: 14px;\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-clock-circle\\\\\" style=\\\\\"vertical-align: middle;\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M24 14v10h9.5m8.5 0c0 9.941-8.059 18-18 18S6 33.941 6 24 14.059 6 24 6s18 8.059 18 18Z\\\\\"></path></svg></span></span></div>\n</div>\"\n`;\n\nexports[`<badge> demo: render [color] correctly 1`] = `\n\"<div><span class=\\\\\"arco-badge arco-badge-no-children\\\\\" style=\\\\\"margin-right: 24px;\\\\\"><!----><span class=\\\\\"arco-badge-status-wrapper\\\\\"><span class=\\\\\"arco-badge-status-dot arco-badge-color-red\\\\\"></span><span class=\\\\\"arco-badge-status-text\\\\\">red</span></span></span><span class=\\\\\"arco-badge arco-badge-no-children\\\\\" style=\\\\\"margin-right: 24px;\\\\\"><!----><span class=\\\\\"arco-badge-status-wrapper\\\\\"><span class=\\\\\"arco-badge-status-dot arco-badge-color-orangered\\\\\"></span><span class=\\\\\"arco-badge-status-text\\\\\">orangered</span></span></span><span class=\\\\\"arco-badge arco-badge-no-children\\\\\" style=\\\\\"margin-right: 24px;\\\\\"><!----><span class=\\\\\"arco-badge-status-wrapper\\\\\"><span class=\\\\\"arco-badge-status-dot arco-badge-color-orange\\\\\"></span><span class=\\\\\"arco-badge-status-text\\\\\">orange</span></span></span><span class=\\\\\"arco-badge arco-badge-no-children\\\\\" style=\\\\\"margin-right: 24px;\\\\\"><!----><span class=\\\\\"arco-badge-status-wrapper\\\\\"><span class=\\\\\"arco-badge-status-dot arco-badge-color-gold\\\\\"></span><span class=\\\\\"arco-badge-status-text\\\\\">gold</span></span></span><span class=\\\\\"arco-badge arco-badge-no-children\\\\\" style=\\\\\"margin-right: 24px;\\\\\"><!----><span class=\\\\\"arco-badge-status-wrapper\\\\\"><span class=\\\\\"arco-badge-status-dot arco-badge-color-lime\\\\\"></span><span class=\\\\\"arco-badge-status-text\\\\\">lime</span></span></span><span class=\\\\\"arco-badge arco-badge-no-children\\\\\" style=\\\\\"margin-right: 24px;\\\\\"><!----><span class=\\\\\"arco-badge-status-wrapper\\\\\"><span class=\\\\\"arco-badge-status-dot arco-badge-color-green\\\\\"></span><span class=\\\\\"arco-badge-status-text\\\\\">green</span></span></span><span class=\\\\\"arco-badge arco-badge-no-children\\\\\" style=\\\\\"margin-right: 24px;\\\\\"><!----><span class=\\\\\"arco-badge-status-wrapper\\\\\"><span class=\\\\\"arco-badge-status-dot arco-badge-color-cyan\\\\\"></span><span class=\\\\\"arco-badge-status-text\\\\\">cyan</span></span></span><span class=\\\\\"arco-badge arco-badge-no-children\\\\\" style=\\\\\"margin-right: 24px;\\\\\"><!----><span class=\\\\\"arco-badge-status-wrapper\\\\\"><span class=\\\\\"arco-badge-status-dot arco-badge-color-arcoblue\\\\\"></span><span class=\\\\\"arco-badge-status-text\\\\\">arcoblue</span></span></span><span class=\\\\\"arco-badge arco-badge-no-children\\\\\" style=\\\\\"margin-right: 24px;\\\\\"><!----><span class=\\\\\"arco-badge-status-wrapper\\\\\"><span class=\\\\\"arco-badge-status-dot arco-badge-color-purple\\\\\"></span><span class=\\\\\"arco-badge-status-text\\\\\">purple</span></span></span><span class=\\\\\"arco-badge arco-badge-no-children\\\\\" style=\\\\\"margin-right: 24px;\\\\\"><!----><span class=\\\\\"arco-badge-status-wrapper\\\\\"><span class=\\\\\"arco-badge-status-dot arco-badge-color-pinkpurple\\\\\"></span><span class=\\\\\"arco-badge-status-text\\\\\">pinkpurple</span></span></span><span class=\\\\\"arco-badge arco-badge-no-children\\\\\" style=\\\\\"margin-right: 24px;\\\\\"><!----><span class=\\\\\"arco-badge-status-wrapper\\\\\"><span class=\\\\\"arco-badge-status-dot arco-badge-color-magenta\\\\\"></span><span class=\\\\\"arco-badge-status-text\\\\\">magenta</span></span></span><span class=\\\\\"arco-badge arco-badge-no-children\\\\\" style=\\\\\"margin-right: 24px;\\\\\"><!----><span class=\\\\\"arco-badge-status-wrapper\\\\\"><span class=\\\\\"arco-badge-status-dot arco-badge-color-gray\\\\\"></span><span class=\\\\\"arco-badge-status-text\\\\\">gray</span></span></span></div>\n<br>\n<div><span class=\\\\\"arco-badge arco-badge-no-children\\\\\" style=\\\\\"margin-right: 24px;\\\\\"><!----><span class=\\\\\"arco-badge-status-wrapper\\\\\"><span class=\\\\\"arco-badge-status-dot arco-badge-color-#F53F3F\\\\\" style=\\\\\"background-color: rgb(245, 63, 63);\\\\\"></span><span class=\\\\\"arco-badge-status-text\\\\\">#F53F3F</span></span></span><span class=\\\\\"arco-badge arco-badge-no-children\\\\\" style=\\\\\"margin-right: 24px;\\\\\"><!----><span class=\\\\\"arco-badge-status-wrapper\\\\\"><span class=\\\\\"arco-badge-status-dot arco-badge-color-#7816FF\\\\\" style=\\\\\"background-color: rgb(120, 22, 255);\\\\\"></span><span class=\\\\\"arco-badge-status-text\\\\\">#7816FF</span></span></span><span class=\\\\\"arco-badge arco-badge-no-children\\\\\" style=\\\\\"margin-right: 24px;\\\\\"><!----><span class=\\\\\"arco-badge-status-wrapper\\\\\"><span class=\\\\\"arco-badge-status-dot arco-badge-color-#00B42A\\\\\" style=\\\\\"background-color: rgb(0, 180, 42);\\\\\"></span><span class=\\\\\"arco-badge-status-text\\\\\">#00B42A</span></span></span><span class=\\\\\"arco-badge arco-badge-no-children\\\\\" style=\\\\\"margin-right: 24px;\\\\\"><!----><span class=\\\\\"arco-badge-status-wrapper\\\\\"><span class=\\\\\"arco-badge-status-dot arco-badge-color-#165DFF\\\\\" style=\\\\\"background-color: rgb(22, 93, 255);\\\\\"></span><span class=\\\\\"arco-badge-status-text\\\\\">#165DFF</span></span></span><span class=\\\\\"arco-badge arco-badge-no-children\\\\\" style=\\\\\"margin-right: 24px;\\\\\"><!----><span class=\\\\\"arco-badge-status-wrapper\\\\\"><span class=\\\\\"arco-badge-status-dot arco-badge-color-#FF7D00\\\\\" style=\\\\\"background-color: rgb(255, 125, 0);\\\\\"></span><span class=\\\\\"arco-badge-status-text\\\\\">#FF7D00</span></span></span><span class=\\\\\"arco-badge arco-badge-no-children\\\\\" style=\\\\\"margin-right: 24px;\\\\\"><!----><span class=\\\\\"arco-badge-status-wrapper\\\\\"><span class=\\\\\"arco-badge-status-dot arco-badge-color-#EB0AA4\\\\\" style=\\\\\"background-color: rgb(235, 10, 164);\\\\\"></span><span class=\\\\\"arco-badge-status-text\\\\\">#EB0AA4</span></span></span><span class=\\\\\"arco-badge arco-badge-no-children\\\\\" style=\\\\\"margin-right: 24px;\\\\\"><!----><span class=\\\\\"arco-badge-status-wrapper\\\\\"><span class=\\\\\"arco-badge-status-dot arco-badge-color-#7BC616\\\\\" style=\\\\\"background-color: rgb(123, 198, 22);\\\\\"></span><span class=\\\\\"arco-badge-status-text\\\\\">#7BC616</span></span></span><span class=\\\\\"arco-badge arco-badge-no-children\\\\\" style=\\\\\"margin-right: 24px;\\\\\"><!----><span class=\\\\\"arco-badge-status-wrapper\\\\\"><span class=\\\\\"arco-badge-status-dot arco-badge-color-#86909C\\\\\" style=\\\\\"background-color: rgb(134, 144, 156);\\\\\"></span><span class=\\\\\"arco-badge-status-text\\\\\">#86909C</span></span></span><span class=\\\\\"arco-badge arco-badge-no-children\\\\\" style=\\\\\"margin-right: 24px;\\\\\"><!----><span class=\\\\\"arco-badge-status-wrapper\\\\\"><span class=\\\\\"arco-badge-status-dot arco-badge-color-#B71DE8\\\\\" style=\\\\\"background-color: rgb(183, 29, 232);\\\\\"></span><span class=\\\\\"arco-badge-status-text\\\\\">#B71DE8</span></span></span><span class=\\\\\"arco-badge arco-badge-no-children\\\\\" style=\\\\\"margin-right: 24px;\\\\\"><!----><span class=\\\\\"arco-badge-status-wrapper\\\\\"><span class=\\\\\"arco-badge-status-dot arco-badge-color-#0FC6C2\\\\\" style=\\\\\"background-color: rgb(15, 198, 194);\\\\\"></span><span class=\\\\\"arco-badge-status-text\\\\\">#0FC6C2</span></span></span><span class=\\\\\"arco-badge arco-badge-no-children\\\\\" style=\\\\\"margin-right: 24px;\\\\\"><!----><span class=\\\\\"arco-badge-status-wrapper\\\\\"><span class=\\\\\"arco-badge-status-dot arco-badge-color-#FFB400\\\\\" style=\\\\\"background-color: rgb(255, 180, 0);\\\\\"></span><span class=\\\\\"arco-badge-status-text\\\\\">#FFB400</span></span></span><span class=\\\\\"arco-badge arco-badge-no-children\\\\\" style=\\\\\"margin-right: 24px;\\\\\"><!----><span class=\\\\\"arco-badge-status-wrapper\\\\\"><span class=\\\\\"arco-badge-status-dot arco-badge-color-#168CFF\\\\\" style=\\\\\"background-color: rgb(22, 140, 255);\\\\\"></span><span class=\\\\\"arco-badge-status-text\\\\\">#168CFF</span></span></span><span class=\\\\\"arco-badge arco-badge-no-children\\\\\" style=\\\\\"margin-right: 24px;\\\\\"><!----><span class=\\\\\"arco-badge-status-wrapper\\\\\"><span class=\\\\\"arco-badge-status-dot arco-badge-color-#FF5722\\\\\" style=\\\\\"background-color: rgb(255, 87, 34);\\\\\"></span><span class=\\\\\"arco-badge-status-text\\\\\">#FF5722</span></span></span></div>\"\n`;\n\nexports[`<badge> demo: render [dot] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 40px; row-gap: 40px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-badge\\\\\"><a href=\\\\\"#\\\\\">Link</a><span class=\\\\\"arco-badge-dot\\\\\" style=\\\\\"margin-right: -6px; margin-top: -2px;\\\\\"></span></span></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-badge\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-notification\\\\\" style=\\\\\"color: rgb(136, 136, 136); font-size: 18px; vertical-align: -3px;\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M24 9c7.18 0 13 5.82 13 13v13H11V22c0-7.18 5.82-13 13-13Zm0 0V4M6 35h36m-25 7h14\\\\\"></path></svg><span class=\\\\\"arco-badge-dot\\\\\" style=\\\\\"margin-right: -2px; margin-top: -2px;\\\\\"></span></span></div>\n</div>\"\n`;\n\nexports[`<badge> demo: render [max] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 40px; row-gap: 40px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-badge\\\\\"><div class=\\\\\"arco-avatar arco-avatar-square\\\\\"><span class=\\\\\"arco-avatar-text\\\\\"><span><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-user\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M7 37c0-4.97 4.03-8 9-8h16c4.97 0 9 3.03 9 8v3a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1v-3Z\\\\\"></path><circle cx=\\\\\"24\\\\\" cy=\\\\\"15\\\\\" r=\\\\\"8\\\\\"></circle></svg></span></span>\n    <!--v-if-->\n  </div>\n  <!----></span>\n</div>\n<!---->\n<div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-badge\\\\\"><div class=\\\\\"arco-avatar arco-avatar-square\\\\\"><span class=\\\\\"arco-avatar-text\\\\\"><span><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-user\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M7 37c0-4.97 4.03-8 9-8h16c4.97 0 9 3.03 9 8v3a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1v-3Z\\\\\"></path><circle cx=\\\\\"24\\\\\" cy=\\\\\"15\\\\\" r=\\\\\"8\\\\\"></circle></svg></span></span>\n  <!--v-if-->\n</div><span class=\\\\\"arco-badge-number\\\\\"><span>10+</span></span></span></div>\n<!---->\n<div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-badge\\\\\"><div class=\\\\\"arco-avatar arco-avatar-square\\\\\"><span class=\\\\\"arco-avatar-text\\\\\"><span><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-user\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M7 37c0-4.97 4.03-8 9-8h16c4.97 0 9 3.03 9 8v3a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1v-3Z\\\\\"></path><circle cx=\\\\\"24\\\\\" cy=\\\\\"15\\\\\" r=\\\\\"8\\\\\"></circle></svg></span></span>\n  <!--v-if-->\n</div><span class=\\\\\"arco-badge-number\\\\\"><span>99+</span></span></span></div>\n<!---->\n<div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-badge\\\\\"><div class=\\\\\"arco-avatar arco-avatar-square\\\\\"><span class=\\\\\"arco-avatar-text\\\\\"><span><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-user\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M7 37c0-4.97 4.03-8 9-8h16c4.97 0 9 3.03 9 8v3a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1v-3Z\\\\\"></path><circle cx=\\\\\"24\\\\\" cy=\\\\\"15\\\\\" r=\\\\\"8\\\\\"></circle></svg></span></span>\n  <!--v-if-->\n</div><span class=\\\\\"arco-badge-number\\\\\"><span>999+</span></span></span></div>\n</div>\"\n`;\n\nexports[`<badge> demo: render [status] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-vertical\\\\\" style=\\\\\"column-gap: 24px; row-gap: 24px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 24px; row-gap: 24px;\\\\\">\n      <!---->\n      <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-badge arco-badge-status arco-badge-no-children\\\\\"><!----><span class=\\\\\"arco-badge-status-wrapper\\\\\"><span class=\\\\\"arco-badge-status-dot arco-badge-status-normal\\\\\"></span>\n        <!----></span></span>\n      </div>\n      <!---->\n      <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-badge arco-badge-status arco-badge-no-children\\\\\"><!----><span class=\\\\\"arco-badge-status-wrapper\\\\\"><span class=\\\\\"arco-badge-status-dot arco-badge-status-processing\\\\\"></span>\n        <!----></span></span>\n      </div>\n      <!---->\n      <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-badge arco-badge-status arco-badge-no-children\\\\\"><!----><span class=\\\\\"arco-badge-status-wrapper\\\\\"><span class=\\\\\"arco-badge-status-dot arco-badge-status-success\\\\\"></span>\n        <!----></span></span>\n      </div>\n      <!---->\n      <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-badge arco-badge-status arco-badge-no-children\\\\\"><!----><span class=\\\\\"arco-badge-status-wrapper\\\\\"><span class=\\\\\"arco-badge-status-dot arco-badge-status-warning\\\\\"></span>\n        <!----></span></span>\n      </div>\n      <!---->\n      <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-badge arco-badge-status arco-badge-no-children\\\\\"><!----><span class=\\\\\"arco-badge-status-wrapper\\\\\"><span class=\\\\\"arco-badge-status-dot arco-badge-status-danger\\\\\"></span>\n        <!----></span></span>\n      </div>\n    </div>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 24px; row-gap: 24px;\\\\\">\n      <!---->\n      <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-badge arco-badge-status arco-badge-no-children\\\\\"><!----><span class=\\\\\"arco-badge-status-wrapper\\\\\"><span class=\\\\\"arco-badge-status-dot arco-badge-status-normal\\\\\"></span><span class=\\\\\"arco-badge-status-text\\\\\">Normal</span></span></span></div>\n      <!---->\n      <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-badge arco-badge-status arco-badge-no-children\\\\\"><!----><span class=\\\\\"arco-badge-status-wrapper\\\\\"><span class=\\\\\"arco-badge-status-dot arco-badge-status-processing\\\\\"></span><span class=\\\\\"arco-badge-status-text\\\\\">Processing</span></span></span></div>\n      <!---->\n      <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-badge arco-badge-status arco-badge-no-children\\\\\"><!----><span class=\\\\\"arco-badge-status-wrapper\\\\\"><span class=\\\\\"arco-badge-status-dot arco-badge-status-success\\\\\"></span><span class=\\\\\"arco-badge-status-text\\\\\">Success</span></span></span></div>\n      <!---->\n      <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-badge arco-badge-status arco-badge-no-children\\\\\"><!----><span class=\\\\\"arco-badge-status-wrapper\\\\\"><span class=\\\\\"arco-badge-status-dot arco-badge-status-warning\\\\\"></span><span class=\\\\\"arco-badge-status-text\\\\\">Warning</span></span></span></div>\n      <!---->\n      <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-badge arco-badge-status arco-badge-no-children\\\\\"><!----><span class=\\\\\"arco-badge-status-wrapper\\\\\"><span class=\\\\\"arco-badge-status-dot arco-badge-status-danger\\\\\"></span><span class=\\\\\"arco-badge-status-text\\\\\">Danger</span></span></span></div>\n    </div>\n  </div>\n</div>\"\n`;\n\nexports[`<badge> demo: render [text] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 40px; row-gap: 40px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-badge\\\\\"><div class=\\\\\"arco-avatar arco-avatar-square\\\\\"><span class=\\\\\"arco-avatar-text\\\\\"><span><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-user\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M7 37c0-4.97 4.03-8 9-8h16c4.97 0 9 3.03 9 8v3a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1v-3Z\\\\\"></path><circle cx=\\\\\"24\\\\\" cy=\\\\\"15\\\\\" r=\\\\\"8\\\\\"></circle></svg></span></span>\n    <!--v-if-->\n  </div><span class=\\\\\"arco-badge-text\\\\\">NEW</span></span>\n</div>\n<!---->\n<div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-badge\\\\\"><div class=\\\\\"arco-avatar arco-avatar-square\\\\\"><span class=\\\\\"arco-avatar-text\\\\\"><span><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-user\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M7 37c0-4.97 4.03-8 9-8h16c4.97 0 9 3.03 9 8v3a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1v-3Z\\\\\"></path><circle cx=\\\\\"24\\\\\" cy=\\\\\"15\\\\\" r=\\\\\"8\\\\\"></circle></svg></span></span>\n  <!--v-if-->\n</div><span class=\\\\\"arco-badge-text\\\\\">HOT</span></span></div>\n</div>\"\n`;\n"
  },
  {
    "path": "packages/web-vue/components/badge/__test__/demo.test.ts",
    "content": "import demoTest from '../../../scripts/demo-test';\n\ndemoTest('badge');\n"
  },
  {
    "path": "packages/web-vue/components/badge/__test__/index.test.ts",
    "content": "import { mount } from '@vue/test-utils';\nimport Badge from '../index';\n\ndescribe('Badge', () => {\n  test('Should have prefix', () => {\n    const wrapper = mount(Badge);\n    expect(wrapper.classes()).toContain('arco-badge');\n  });\n\n  test('Count should work', () => {\n    const wrapper = mount(Badge, {\n      props: {\n        count: 10,\n      },\n    });\n    const numberElement = wrapper.find('.arco-badge-number');\n    expect(numberElement.text()).toContain('10');\n  });\n\n  test('Max count should work', () => {\n    const wrapper = mount(Badge, {\n      props: {\n        maxCount: 99,\n        count: 1000,\n      },\n    });\n    const numberElement = wrapper.find('.arco-badge-number');\n    expect(numberElement.text()).toContain('99+');\n  });\n\n  test('Dot should work', async () => {\n    const wrapper = mount(Badge, {\n      props: {\n        dot: true,\n      },\n    });\n    let dotElement = wrapper.find('.arco-badge-dot');\n    expect(dotElement.exists()).toBe(false);\n    await wrapper.setProps({ count: 1 });\n    // dot only shows when count > 0\n    dotElement = wrapper.find('.arco-badge-dot');\n    expect(dotElement.exists()).toBe(true);\n  });\n\n  test('Can set custom text', () => {\n    const wrapper = mount(Badge, {\n      props: {\n        text: 'hello world',\n      },\n    });\n    const textElement = wrapper.find('.arco-badge-text');\n    expect(textElement.text()).toContain('hello world');\n  });\n});\n"
  },
  {
    "path": "packages/web-vue/components/badge/badge.tsx",
    "content": "import {\n  defineComponent,\n  computed,\n  toRefs,\n  CSSProperties,\n  PropType,\n  Slot,\n  inject,\n  ComputedRef,\n} from 'vue';\nimport { getPrefixCls } from '../_utils/global-config';\nimport { configProviderInjectionKey } from '../config-provider/context';\n\nexport const COLORS = [\n  'red',\n  'orangered',\n  'orange',\n  'gold',\n  'lime',\n  'green',\n  'cyan',\n  'arcoblue',\n  'purple',\n  'pinkpurple',\n  'magenta',\n  'gray',\n] as const;\n\nexport type ColorType = (typeof COLORS)[number];\n\nexport const BADGE_STATUSES = [\n  'normal',\n  'processing',\n  'success',\n  'warning',\n  'danger',\n] as const;\nexport type BadgeStatus = (typeof BADGE_STATUSES)[number];\n\nexport default defineComponent({\n  name: 'Badge',\n  props: {\n    /**\n     * @zh 自定义提示内容\n     * @en Set the display text of the status dot\n     */\n    text: {\n      type: String,\n    },\n    /**\n     * @zh 显示为小红点\n     * @en Whether to display a red dot instead of `count`\n     */\n    dot: {\n      type: Boolean,\n    },\n    /**\n     * @zh 徽标的样式\n     * @en Customize badge dot style\n     */\n    dotStyle: {\n      type: Object,\n    },\n    /**\n     * @zh 徽标最大显示数值，如果count超过这个数值会显示为maxCount\n     * @en Max count to show. If count is larger than this value, it will be displayed as `${maxCount}+`\n     */\n    maxCount: {\n      type: Number,\n      default: 99,\n    },\n    /**\n     * @zh 设置徽标位置的偏移\n     * @en Set offset of the badge dot\n     */\n    offset: {\n      type: Array as PropType<number[]>,\n      default: () => [],\n    },\n    /**\n     * @zh 内置的一些颜色\n     * @en Customize dot color\n     */\n    color: {\n      type: String as PropType<ColorType | string>,\n    },\n    /**\n     * @zh 徽标的状态类型\n     * @en Badge status\n     * @values 'normal', 'processing', 'success', 'warning', 'danger'\n     */\n    status: {\n      type: String as PropType<BadgeStatus>,\n      validator: (value: any) => {\n        return BADGE_STATUSES.includes(value);\n      },\n    },\n    /**\n     * @zh 徽标显示的数字\n     * @en Number to show in badge\n     */\n    count: {\n      type: Number,\n    },\n  },\n  setup(props, { slots }) {\n    const { status, color, dotStyle, offset, text, dot, maxCount, count } =\n      toRefs(props);\n    const prefixCls = getPrefixCls('badge');\n    const configCtx = inject(configProviderInjectionKey, undefined);\n    const rtl = computed(() => configCtx?.rtl ?? false);\n    const wrapperClassName = computed(() => [\n      prefixCls,\n      {\n        [`${prefixCls}-status`]: status?.value,\n        [`${prefixCls}-no-children`]: !slots?.default,\n        [`${prefixCls}-rtl`]: rtl.value,\n      },\n    ]);\n\n    const computedStyleRef = computed(() => {\n      const computedDotStyle = { ...(dotStyle?.value || {}) };\n      const [leftOffset, topOffset] = offset?.value || [];\n      if (leftOffset) {\n        computedDotStyle.marginRight = `${-leftOffset}px`;\n      }\n      if (topOffset) {\n        computedDotStyle.marginTop = `${topOffset}px`;\n      }\n      const computedColorStyle =\n        !color?.value ||\n        COLORS.includes(color?.value as (typeof COLORS)[number])\n          ? {}\n          : { backgroundColor: color.value };\n      const mergedStyle = {\n        ...computedColorStyle,\n        ...computedDotStyle,\n      } as CSSProperties;\n\n      return {\n        mergedStyle,\n        computedDotStyle,\n        computedColorStyle,\n      };\n    });\n\n    const getDot = () => {\n      const textValue = text?.value;\n      const colorValue = color?.value;\n      const statusValue = status?.value;\n      const dotValue = dot?.value;\n      const countValue = Number(count?.value);\n      const hasCount = count?.value != null;\n      const { computedDotStyle, mergedStyle } = computedStyleRef.value;\n      if (slots.content) {\n        return (\n          <span class={`${prefixCls}-custom-dot`} style={computedDotStyle}>\n            {slots.content()}\n          </span>\n        );\n      }\n      if (textValue && !colorValue && !statusValue) {\n        return (\n          <span class={`${prefixCls}-text`} style={computedDotStyle}>\n            {textValue}\n          </span>\n        );\n      }\n      if (statusValue || (colorValue && !hasCount)) {\n        return (\n          <span class={`${prefixCls}-status-wrapper`}>\n            <span\n              class={[\n                `${prefixCls}-status-dot`,\n                {\n                  [`${prefixCls}-status-${statusValue}`]: statusValue,\n                  [`${prefixCls}-color-${colorValue}`]: colorValue,\n                },\n              ]}\n              style={mergedStyle}\n            />\n            {textValue && (\n              <span class={`${prefixCls}-status-text`}>{textValue}</span>\n            )}\n          </span>\n        );\n      }\n      if ((dotValue || colorValue) && countValue > 0) {\n        return (\n          <span\n            class={[\n              `${prefixCls}-dot`,\n              {\n                [`${prefixCls}-color-${colorValue}`]: colorValue,\n              },\n            ]}\n            style={mergedStyle}\n          />\n        );\n      }\n      if (countValue === 0) {\n        return null;\n      }\n\n      return (\n        <span class={`${prefixCls}-number`} style={mergedStyle}>\n          <span>\n            {maxCount.value && countValue > maxCount.value\n              ? `${maxCount.value}+`\n              : countValue}\n          </span>\n        </span>\n      );\n    };\n\n    return () => {\n      return (\n        <span class={wrapperClassName.value}>\n          {slots.default && slots.default()}\n          {getDot()}\n        </span>\n      );\n    };\n  },\n});\n"
  },
  {
    "path": "packages/web-vue/components/badge/index.ts",
    "content": "import type { App } from 'vue';\nimport type { ArcoOptions } from '../_utils/types';\nimport { setGlobalConfig, getComponentPrefix } from '../_utils/global-config';\nimport _Badge from './badge';\n\nconst Badge = Object.assign(_Badge, {\n  install: (app: App, options?: ArcoOptions) => {\n    setGlobalConfig(app, options);\n    const componentPrefix = getComponentPrefix(options);\n\n    app.component(componentPrefix + _Badge.name, _Badge);\n  },\n});\n\nexport type BadgeInstance = InstanceType<typeof _Badge>;\n\nexport default Badge;\n"
  },
  {
    "path": "packages/web-vue/components/badge/style/index.less",
    "content": "@import './token.less';\n\n@badge-prefix-cls: ~'@{prefix}-badge';\n\n.@{badge-prefix-cls} {\n  position: relative;\n  display: inline-block;\n  line-height: 1;\n\n  &-rtl {\n    direction: rtl;\n  }\n\n  &-number,\n  &-dot,\n  &-text,\n  &-custom-dot {\n    position: absolute;\n    top: 2px;\n    right: 2px;\n    z-index: 2;\n    box-sizing: border-box;\n    overflow: hidden;\n    text-align: center;\n    border-radius: @badge-size-count-height;\n    transform: translate(50%, -50%);\n    transform-origin: 100% 0%;\n  }\n\n  &-rtl &-number,\n  &-rtl &-dot,\n  &-rtl &-text,\n  &-rtl &-custom-dot {\n    right: unset;\n  }\n\n  &-custom-dot {\n    background-color: var(~'@{arco-cssvars-prefix}-color-bg-2');\n  }\n\n  &-number,\n  &-text {\n    min-width: @badge-size-count-height;\n    height: @badge-size-count-height;\n    padding: 0 @badge-padding-count-horizontal;\n    color: @badge-color-count-text;\n    font-weight: @badge-font-count-weight;\n    font-size: @badge-font-count-size;\n    line-height: @badge-size-count-height;\n    background-color: @badge-color-count-bg;\n    box-shadow: 0 0 0 2px var(~'@{arco-cssvars-prefix}-color-bg-2');\n  }\n\n  &-dot {\n    width: @badge-size-dot-width;\n    height: @badge-size-dot-width;\n    background-color: @badge-color-count-bg;\n    border-radius: @radius-circle;\n    box-shadow: 0 0 0 2px var(~'@{arco-cssvars-prefix}-color-bg-2');\n  }\n\n  &-no-children &-dot,\n  &-no-children &-number,\n  &-no-children &-text {\n    position: relative;\n    top: unset;\n    right: unset;\n    display: inline-block;\n    transform: none;\n  }\n\n  &-status-wrapper {\n    display: inline-flex;\n    align-items: center;\n  }\n\n  &-status-dot {\n    display: inline-block;\n    width: @badge-size-dot-width;\n    height: @badge-size-dot-width;\n    border-radius: @radius-circle;\n  }\n\n  &-status-normal {\n    background-color: @badge-color-dot-bg_default;\n  }\n\n  &-status-processing {\n    background-color: @badge-color-dot-bg_processing;\n  }\n\n  &-status-success {\n    background-color: @badge-color-dot-bg_success;\n  }\n\n  &-status-warning {\n    background-color: @badge-color-dot-bg_warning;\n  }\n\n  &-status-danger {\n    background-color: @badge-color-dot-bg_error;\n  }\n\n  @colors: red, orangered, orange, gold, lime, green, cyan, arcoblue, purple,\n    pinkpurple, magenta, gray;\n\n  .for(@data, @i: 1) when(@i =< length(@data)) {\n    @color-name: extract(@data, @i);\n\n    @color: ~'badge-@{color-name}-color-dot-bg';\n\n    &-color-@{color-name} {\n      background-color: @@color;\n    }\n    .for(@data, (@i + 1));\n  }\n\n  .for(@colors);\n\n  .@{badge-prefix-cls}-status-text {\n    margin-left: @badge-margin-status-text-left;\n    color: @badge-color-status-text;\n    font-size: @badge-font-status-text-size;\n    line-height: @line-height-base;\n  }\n\n  &-rtl &-status-text {\n    margin-right: @badge-margin-status-text-left;\n    margin-left: 0;\n  }\n\n  &-number-text {\n    display: inline-block;\n    animation: ~'@{prefix}-badge-scale' @transition-duration-5 @transition-timing-function-overshoot;\n  }\n}\n\n@keyframes ~'@{prefix}-badge-scale' {\n  from {\n    transform: scale(0, 0);\n  }\n\n  to {\n    transform: scale(1, 1);\n  }\n}\n\n.badge-zoom-enter,\n.badge-zoom-appear {\n  transform: translate(50%, -50%) scale(0.2, 0.2);\n  // opacity: 0;\n  transform-origin: center;\n}\n\n.badge-zoom-enter-active,\n.badge-zoom-appear-active {\n  transform: translate(50%, -50%) scale(1, 1);\n  transform-origin: center;\n  opacity: 1;\n  transition: opacity @transition-duration-3\n      @transition-timing-function-overshoot,\n    transform @transition-duration-3 @transition-timing-function-overshoot;\n}\n\n.badge-zoom-exit {\n  transform: translate(50%, -50%) scale(1, 1);\n  transform-origin: center;\n  opacity: 1;\n}\n\n.badge-zoom-exit-active {\n  transform: translate(50%, -50%) scale(0.2, 0.2);\n  transform-origin: center;\n  opacity: 0;\n  transition: opacity @transition-duration-3\n      @transition-timing-function-overshoot,\n    transform @transition-duration-3 @transition-timing-function-overshoot;\n}\n"
  },
  {
    "path": "packages/web-vue/components/badge/style/index.ts",
    "content": "import '../../style/index.less';\nimport './index.less';\n"
  },
  {
    "path": "packages/web-vue/components/badge/style/token.less",
    "content": "@import '../../style/theme/index.less';\n\n@badge-size-count-height: @size-5;\n@badge-padding-count-horizontal: @spacing-3;\n@badge-margin-status-text-left: @spacing-4;\n\n@badge-font-count-size: @font-size-body-1;\n@badge-font-status-text-size: @font-size-body-1;\n@badge-color-count-text: var(~'@{arco-cssvars-prefix}-color-white');\n@badge-color-status-text: var(~'@{arco-cssvars-prefix}-color-text-1');\n@badge-color-count-bg: @color-danger-6;\n@badge-size-dot-width: 6px;\n@badge-color-dot-bg_default: var(~'@{arco-cssvars-prefix}-color-fill-4');\n@badge-color-dot-bg_processing: @color-primary-6;\n@badge-color-dot-bg_success: @color-success-6;\n@badge-color-dot-bg_warning: @color-warning-6;\n@badge-color-dot-bg_error: @color-danger-6;\n@badge-font-count-weight: @font-weight-500;\n@badge-red-color-dot-bg: @color-danger-6;\n@badge-orangered-color-dot-bg: @orangered-6;\n@badge-orange-color-dot-bg: rgb(var(~'@{arco-cssvars-prefix}-orange-6'));\n@badge-lime-color-dot-bg: rgb(var(~'@{arco-cssvars-prefix}-lime-6'));\n@badge-gold-color-dot-bg: rgb(var(~'@{arco-cssvars-prefix}-gold-6'));\n@badge-green-color-dot-bg: @color-success-6;\n@badge-cyan-color-dot-bg: rgb(var(~'@{arco-cssvars-prefix}-cyan-6'));\n@badge-arcoblue-color-dot-bg: @color-primary-6;\n@badge-pinkpurple-color-dot-bg: rgb(var(~'@{arco-cssvars-prefix}-pinkpurple-6'));\n@badge-purple-color-dot-bg: rgb(var(~'@{arco-cssvars-prefix}-purple-6'));\n@badge-magenta-color-dot-bg: rgb(var(~'@{arco-cssvars-prefix}-magenta-6'));\n@badge-gray-color-dot-bg: rgb(var(~'@{arco-cssvars-prefix}-gray-4'));\n"
  },
  {
    "path": "packages/web-vue/components/breadcrumb/CHANGELOG.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.36.0\n\n`2022-09-02`\n\n### 🆕 Feature\n\n- Add customUrl property ([#1594](https://github.com/arco-design/arco-design-vue/pull/1594))\n- suport separator prop ([#1500](https://github.com/arco-design/arco-design-vue/pull/1500))\n- suport routes prop ([#1500](https://github.com/arco-design/arco-design-vue/pull/1500))\n- suport more-icon slot ([#1500](https://github.com/arco-design/arco-design-vue/pull/1500))\n- suport droplist prop  and slot ([#1500](https://github.com/arco-design/arco-design-vue/pull/1500))\n\n\n## 2.18.0\n\n`2022-03-04`\n\n### 💎 Enhancement\n\n- Use Context to optimize components ([#774](https://github.com/arco-design/arco-design-vue/pull/774))\n\n\n## 2.3.0\n\n`2021-11-12`\n\n### 🐛 BugFix\n\n- Fix the problem of `breadcrumb-item` not inheriting Attribute ([#137](https://github.com/arco-design/arco-design-vue/pull/137))\n\n"
  },
  {
    "path": "packages/web-vue/components/breadcrumb/CHANGELOG.zh-CN.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.36.0\n\n`2022-09-02`\n\n### 🆕 新增功能\n\n- 增加 customUrl 属性 ([#1594](https://github.com/arco-design/arco-design-vue/pull/1594))\n- 支持 separator  属性 ([#1500](https://github.com/arco-design/arco-design-vue/pull/1500))\n- 支持 routes  属性 ([#1500](https://github.com/arco-design/arco-design-vue/pull/1500))\n- 支持 more-icon  插槽 ([#1500](https://github.com/arco-design/arco-design-vue/pull/1500))\n- `breadcrumb-item` 支持 droplist  属性和插槽 ([#1500](https://github.com/arco-design/arco-design-vue/pull/1500))\n\n\n## 2.18.0\n\n`2022-03-04`\n\n### 💎 功能优化\n\n- 使用 Context 方式优化组件 ([#774](https://github.com/arco-design/arco-design-vue/pull/774))\n\n\n## 2.3.0\n\n`2021-11-12`\n\n### 🐛 问题修复\n\n- 修复 `breadcrumb-item` 没有继承 Attribute 的问题 ([#137](https://github.com/arco-design/arco-design-vue/pull/137))\n\n"
  },
  {
    "path": "packages/web-vue/components/breadcrumb/README.en-US.md",
    "content": "```yaml\nmeta:\n  type: Component\n  category: Navigation\ntitle: Breadcrumb\ndescription: Breadcrumb is an auxiliary navigation mode used to identify the position of the page within the hierarchy and return upwards as needed.\n```\n\n*Auto translate by google.*\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/separator.md\n\n@import ./__demo__/size.md\n\n@import ./__demo__/icon.md\n\n@import ./__demo__/routes.md\n\n@import ./__demo__/dropdown.md\n\n@import ./__demo__/ellipsis.md\n\n## API\n\n\n### `<breadcrumb>` Props\n\n|Attribute|Description|Type|Default|version|\n|---|---|---|:---:|:---|\n|max-count|Maximum number of breadcrumbs displayed (0 means no limit)|`number`|`0`||\n|routes|Set routes|`BreadcrumbRoute[]`|`-`|2.36.0|\n|separator|Delimiter text|`string\\|number`|`-`|2.36.0|\n|custom-url|Custom link address|`(paths: string[]) => string`|`-`|2.36.0|\n### `<breadcrumb>` Slots\n\n|Slot Name|Description|Parameters|version|\n|---|---|---|:---|\n|more-icon|Custom more icon|-|2.36.0|\n|item-render|Effective when setting routes, custom render breadcrumbs|route: `BreadcrumbRoute`<br>routes: `BreadcrumbRoute[]`<br>paths: `string[]`|2.36.0|\n|separator|Custom separator|-||\n\n\n\n\n### `<breadcrumb-item>` Props\n\n|Attribute|Description|Type|Default|version|\n|---|---|---|:---:|:---|\n|separator|Delimiter text|`string\\|number`|`-`|2.36.0|\n|droplist|Dropdown content|`BreadcrumbRoute['children']`|`-`|2.36.0|\n|dropdown-props|Dropdown props|`DropDownProps`|`-`|2.36.0|\n### `<breadcrumb-item>` Slots\n\n|Slot Name|Description|Parameters|version|\n|---|---|---|:---|\n|droplist|Custom droplist|-|2.36.0|\n|separator|Custom separator|-|2.36.0|\n\n\n\n\n### BreadcrumbRoute\n\n|Name|Description|Type|Default|\n|---|---|---|:---:|\n|label|Breadcrumb name|`string`|`-`|\n|path|Jump path (`a` tag `href` value)|`string`|`-`|\n|children|Dropdown menu items|`{    label: string;    path: string;  }[]`|`-`|\n\n\n\n## Tips\n\n\nThe custom slot with the same name takes precedence over the attribute.\n"
  },
  {
    "path": "packages/web-vue/components/breadcrumb/README.zh-CN.md",
    "content": "```yaml\nmeta:\n  type: 组件\n  category: 导航\ntitle: 面包屑 Breadcrumb\ndescription: 面包屑是辅助导航模式，用于识别页面在层次结构内的位置，并根据需要向上返回。\n```\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/separator.md\n\n@import ./__demo__/size.md\n\n@import ./__demo__/icon.md\n\n@import ./__demo__/routes.md\n\n@import ./__demo__/dropdown.md\n\n@import ./__demo__/ellipsis.md\n\n## API\n\n\n### `<breadcrumb>` Props\n\n|参数名|描述|类型|默认值|版本|\n|---|---|---|:---:|:---|\n|max-count|最多展示的面包屑数量（0表示不限制）|`number`|`0`||\n|routes|设置路径|`BreadcrumbRoute[]`|`-`|2.36.0|\n|separator|分隔符文字|`string\\|number`|`-`|2.36.0|\n|custom-url|自定义链接地址|`(paths: string[]) => string`|`-`|2.36.0|\n### `<breadcrumb>` Slots\n\n|插槽名|描述|参数|版本|\n|---|:---:|---|:---|\n|more-icon|自定义更多图标|-|2.36.0|\n|item-render|routes 设置时生效，自定义渲染面包屑|route: `BreadcrumbRoute`<br>routes: `BreadcrumbRoute[]`<br>paths: `string[]`|2.36.0|\n|separator|自定义分隔符|-||\n\n\n\n\n### `<breadcrumb-item>` Props\n\n|参数名|描述|类型|默认值|版本|\n|---|---|---|:---:|:---|\n|separator|分隔符文字|`string\\|number`|`-`|2.36.0|\n|droplist|下拉菜单内容|`BreadcrumbRoute['children']`|`-`|2.36.0|\n|dropdown-props|下拉菜单属性|`DropDownProps`|`-`|2.36.0|\n### `<breadcrumb-item>` Slots\n\n|插槽名|描述|参数|版本|\n|---|:---:|---|:---|\n|droplist|自定义下拉菜单|-|2.36.0|\n|separator|自定义分隔符|-|2.36.0|\n\n\n\n\n### BreadcrumbRoute\n\n|参数名|描述|类型|默认值|\n|---|---|---|:---:|\n|label|面包屑名称|`string`|`-`|\n|path|跳转路径 (`a`标签的`href`)|`string`|`-`|\n|children|下拉菜单展示项|`{    label: string;    path: string;  }[]`|`-`|\n\n\n\n## Tips\n\n同名的自定义插槽优先级是高于属性的\n\n"
  },
  {
    "path": "packages/web-vue/components/breadcrumb/TEMPLATE.md",
    "content": "## zh-CN\n```yaml\nmeta:\n  type: 组件\n  category: 导航\ntitle: 面包屑 Breadcrumb\ndescription: 面包屑是辅助导航模式，用于识别页面在层次结构内的位置，并根据需要向上返回。\n```\n---\n## en-US\n```yaml\nmeta:\n  type: Component\n  category: Navigation\ntitle: Breadcrumb\ndescription: Breadcrumb is an auxiliary navigation mode used to identify the position of the page within the hierarchy and return upwards as needed.\n```\n---\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/separator.md\n\n@import ./__demo__/size.md\n\n@import ./__demo__/icon.md\n\n@import ./__demo__/routes.md\n\n@import ./__demo__/dropdown.md\n\n@import ./__demo__/ellipsis.md\n\n## API\n\n%%API(breadcrumb.tsx)%%\n\n%%API(breadcrumb-item.tsx)%%\n\n%%INTERFACE(interface.ts)%%\n\n## Tips\n\n## zh-CN\n\n同名的自定义插槽优先级是高于属性的\n---\n\n## en-US\nThe custom slot with the same name takes precedence over the attribute.\n---\n"
  },
  {
    "path": "packages/web-vue/components/breadcrumb/__demo__/basic.md",
    "content": "```yaml\ntitle:\n  zh-CN: 基本用法\n  en-US: Basic Usage\n```\n\n## zh-CN\n\n面包屑的基本用法。\n\n---\n\n## en-US\n\nBasic usage of breadcrumb.\n\n---\n\n```vue\n<template>\n  <a-breadcrumb>\n    <a-breadcrumb-item>Home</a-breadcrumb-item>\n    <a-breadcrumb-item>Channel</a-breadcrumb-item>\n    <a-breadcrumb-item>News</a-breadcrumb-item>\n  </a-breadcrumb>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/breadcrumb/__demo__/dropdown.md",
    "content": "```yaml\ntitle:\n  zh-CN: 带有下拉菜单\n  en-US: Dropdown menu\n```\n\n## zh-CN\n\n通过 `droplist` 或者 `routes` 来指定下拉菜单。\n\n---\n\n## en-US\n\nuse `droplist` or `routes` settings dropdown menu\n\n---\n\n```vue\n<template>\n  <a-space direction=\"vertical\">\n    <a-breadcrumb :routes=\"routes\"/>\n    <a-breadcrumb>\n      <a-breadcrumb-item>Home</a-breadcrumb-item>\n      <a-breadcrumb-item :droplist=\"droplist\">\n        Channel\n      </a-breadcrumb-item>\n      <a-breadcrumb-item>News</a-breadcrumb-item>\n    </a-breadcrumb>\n    <a-breadcrumb>\n      <a-breadcrumb-item>Home</a-breadcrumb-item>\n      <a-breadcrumb-item>\n        <template #droplist>\n          <a-doption>Option 1</a-doption>\n          <a-dsubmenu value=\"option-1\">\n            <template #default>Option 2</template>\n            <template #content>\n              <a-doption>Option 2-1</a-doption>\n              <a-doption>Option 2-2</a-doption>\n              <a-doption>Option 2-3</a-doption>\n            </template>\n            <template #footer>\n              <div style=\"padding: 6px; text-align: center;\">\n                <a-button>Click</a-button>\n              </div>\n            </template>\n          </a-dsubmenu>\n          <a-doption>Option 3</a-doption>\n        </template>\n        Channel\n      </a-breadcrumb-item>\n      <a-breadcrumb-item>News</a-breadcrumb-item>\n    </a-breadcrumb>\n  </a-space>\n</template>\n\n<script>\nexport default {\n  data() {\n    return {\n      routes: [\n        {\n          path: '/',\n          label: 'Home'\n        },\n        {\n          path: '/channel',\n          label: 'Channel',\n          children: [\n            {\n              path: '/users',\n              label: 'Users',\n            },\n            {\n              path: '/permission',\n              label: 'Permission',\n            }\n          ]\n        },\n        {\n          path: '/news',\n          label: 'News'\n        },\n      ],\n      droplist: [\n        {\n          path: '/goods',\n          label: 'Goods',\n        },\n        {\n          path: '/wallet',\n          label: 'Wallet',\n        }\n      ]\n    }\n  }\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/breadcrumb/__demo__/ellipsis.md",
    "content": "```yaml\ntitle:\n  zh-CN: 显示省略\n  en-US: Show ellipsis\n```\n\n## zh-CN\n\n通过 `max-count` 来指定面包屑的最多渲染数量，超出的部分将显示为省略号。\n\n---\n\n## en-US\n\nUse `max-count` to specify the maximum number of breadcrumbs to render, and the excess will be displayed as an ellipsis.\n\n---\n\n```vue\n<template>\n  <a-space direction=\"vertical\">\n    <a-breadcrumb :max-count=\"3\">\n      <a-breadcrumb-item>Home</a-breadcrumb-item>\n      <a-breadcrumb-item>Sub Home</a-breadcrumb-item>\n      <a-breadcrumb-item>All Channel</a-breadcrumb-item>\n      <a-breadcrumb-item>Channel</a-breadcrumb-item>\n      <a-breadcrumb-item>News</a-breadcrumb-item>\n      <a-breadcrumb-item>Post</a-breadcrumb-item>\n    </a-breadcrumb>\n    <a-breadcrumb :max-count=\"3\">\n      <template #more-icon>\n        <a-tooltip content=\"more routes a/b/c\">\n          <icon-more />\n        </a-tooltip>\n      </template>\n      <a-breadcrumb-item>Home</a-breadcrumb-item>\n      <a-breadcrumb-item>Sub Home</a-breadcrumb-item>\n      <a-breadcrumb-item>All Channel</a-breadcrumb-item>\n      <a-breadcrumb-item>Channel</a-breadcrumb-item>\n      <a-breadcrumb-item>News</a-breadcrumb-item>\n      <a-breadcrumb-item>Post</a-breadcrumb-item>\n    </a-breadcrumb>\n  </a-space>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/breadcrumb/__demo__/icon.md",
    "content": "```yaml\ntitle:\n  zh-CN: 自定义图标\n  en-US: Custom Icon\n```\n\n## zh-CN\n\n可以在内容中使用自定义图标。\n\n---\n\n## en-US\n\nYou can use custom icons in the content.\n\n---\n\n```vue\n<template>\n  <a-space direction=\"vertical\">\n    <a-breadcrumb>\n      <a-breadcrumb-item>\n        <icon-home/>\n      </a-breadcrumb-item>\n      <a-breadcrumb-item>Channel</a-breadcrumb-item>\n      <a-breadcrumb-item>News</a-breadcrumb-item>\n    </a-breadcrumb>\n     <a-breadcrumb>\n      <a-breadcrumb-item>\n        <icon-home/>\n      </a-breadcrumb-item>\n      <a-breadcrumb-item>\n        <icon-at />\n        Channel\n      </a-breadcrumb-item>\n      <a-breadcrumb-item>News</a-breadcrumb-item>\n    </a-breadcrumb>\n  </a-space>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/breadcrumb/__demo__/routes.md",
    "content": "```yaml\ntitle:\n  zh-CN: 参数化配置\n  en-US: Parameterized configuration\n```\n\n## zh-CN\n\n通过 `routes` 来传递面包屑数据。若是要自定义面包屑的话，建议使用 `<a-breadcrumb-item />` 组件。默认使用 `a` 标签的 `href` 属性绑定路径，可通过 `item` 插槽自定义渲染。\n\n---\n\n## en-US\n\nTransfer breadcrumb data through `routes`. If you want to customize bread crumbs, it is recommended to use the `< a-breadcrumb-item />` component. the path is bound with the `href` attribute of the `a` tag by default, you can customize the rendering through the `item` slot.\n\n---\n\n```vue\n<template>\n  <a-space direction=\"vertical\">\n    <a-breadcrumb :routes=\"routes\"/>\n    <a-breadcrumb :routes=\"routes\">\n      <template #item-render=\"{route, paths}\">\n        <a-link :href=\"paths.join('/')\">\n          {{route.label}}\n        </a-link>\n      </template>\n    </a-breadcrumb>\n  </a-space>\n</template>\n\n<script>\nexport default {\n  data() {\n    return {\n      routes: [\n        {\n          path: '/',\n          label: 'Home'\n        },\n        {\n          path: '/channel',\n          label: 'Channel',\n        },\n        {\n          path: '/news',\n          label: 'News'\n        },\n      ],\n    }\n  }\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/breadcrumb/__demo__/separator.md",
    "content": "```yaml\ntitle:\n  zh-CN: 自定义分隔符\n  en-US: Custom separator\n```\n\n## zh-CN\n\n通过 `separator` 属性或插槽自定义分隔符。面包屑子项也可通过 `separator` 属性或插槽自定义分隔符，且优先级高于父项。\n\n---\n\n## en-US\n\nCustomize the delimiter through the `separator` attribute or slot. Bread crumb child items can also be customized through the `separator` attribute or slot delimiter, and the priority is higher than the parent item.\n\n---\n\n```vue\n<template>\n  <a-space direction=\"vertical\">\n    <a-breadcrumb>\n      <template #separator>\n        <icon-right />\n      </template>\n      <a-breadcrumb-item>Home</a-breadcrumb-item>\n      <a-breadcrumb-item>Channel</a-breadcrumb-item>\n      <a-breadcrumb-item>News</a-breadcrumb-item>\n    </a-breadcrumb>\n    <a-breadcrumb separator=\"~\">\n      <a-breadcrumb-item>Home</a-breadcrumb-item>\n      <a-breadcrumb-item>Channel</a-breadcrumb-item>\n      <a-breadcrumb-item>News</a-breadcrumb-item>\n    </a-breadcrumb>\n    <a-breadcrumb>\n      <template #separator>\n        <icon-right />\n      </template>\n      <a-breadcrumb-item separator=\"->\">Home</a-breadcrumb-item>\n      <a-breadcrumb-item>Channel</a-breadcrumb-item>\n      <a-breadcrumb-item>News</a-breadcrumb-item>\n    </a-breadcrumb>\n  </a-space>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/breadcrumb/__demo__/size.md",
    "content": "```yaml\ntitle:\n  zh-CN: 自定义尺寸\n  en-US: Custom Size\n```\n\n## zh-CN\n\n通过指定样式来自定义面包屑的尺寸。\n\n---\n\n## en-US\n\nCustomize the breadcrumb size by specifying the style.\n\n---\n\n```vue\n<template>\n  <a-space direction=\"vertical\">\n    <a-breadcrumb>\n      <a-breadcrumb-item>Home</a-breadcrumb-item>\n      <a-breadcrumb-item>Channel</a-breadcrumb-item>\n      <a-breadcrumb-item>News</a-breadcrumb-item>\n    </a-breadcrumb>\n    <a-breadcrumb :style=\"{fontSize: `12px`}\">\n      <a-breadcrumb-item>Home</a-breadcrumb-item>\n      <a-breadcrumb-item>Channel</a-breadcrumb-item>\n      <a-breadcrumb-item>News</a-breadcrumb-item>\n    </a-breadcrumb>\n  </a-space>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/breadcrumb/__test__/__snapshots__/demo.test.ts.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`<breadcrumb> demo: render [basic] correctly 1`] = `\n\"<div role=\\\\\"list\\\\\" class=\\\\\"arco-breadcrumb\\\\\">\n  <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-breadcrumb-item\\\\\">Home\n    <!---->\n  </div>\n  <div aria-hidden=\\\\\"true\\\\\" class=\\\\\"arco-breadcrumb-item-separator\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-oblique-line\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n      <path d=\\\\\"M29.506 6.502 18.493 41.498\\\\\"></path>\n    </svg></div>\n  <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-breadcrumb-item\\\\\">Channel\n    <!---->\n  </div>\n  <div aria-hidden=\\\\\"true\\\\\" class=\\\\\"arco-breadcrumb-item-separator\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-oblique-line\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n      <path d=\\\\\"M29.506 6.502 18.493 41.498\\\\\"></path>\n    </svg></div>\n  <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-breadcrumb-item\\\\\">News\n    <!---->\n  </div>\n  <!---->\n</div>\"\n`;\n\nexports[`<breadcrumb> demo: render [dropdown] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-vertical\\\\\" style=\\\\\"column-gap: 8px; row-gap: 8px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div role=\\\\\"list\\\\\" class=\\\\\"arco-breadcrumb\\\\\">\n      <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-breadcrumb-item\\\\\"><a href=\\\\\"#/\\\\\">Home</a>\n        <!---->\n      </div>\n      <div aria-hidden=\\\\\"true\\\\\" class=\\\\\"arco-breadcrumb-item-separator\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-oblique-line\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n          <path d=\\\\\"M29.506 6.502 18.493 41.498\\\\\"></path>\n        </svg></div>\n      <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-breadcrumb-item arco-breadcrumb-item-with-dropdown\\\\\"><a href=\\\\\"#/channel\\\\\">Channel</a><span aria-hidden=\\\\\"true\\\\\" class=\\\\\"arco-breadcrumb-item-dropdown-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span></div>\n      <!---->\n      <div aria-hidden=\\\\\"true\\\\\" class=\\\\\"arco-breadcrumb-item-separator\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-oblique-line\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n          <path d=\\\\\"M29.506 6.502 18.493 41.498\\\\\"></path>\n        </svg></div>\n      <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-breadcrumb-item\\\\\"><span>News</span>\n        <!---->\n      </div>\n      <!---->\n    </div>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div role=\\\\\"list\\\\\" class=\\\\\"arco-breadcrumb\\\\\">\n      <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-breadcrumb-item\\\\\">Home\n        <!---->\n      </div>\n      <div aria-hidden=\\\\\"true\\\\\" class=\\\\\"arco-breadcrumb-item-separator\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-oblique-line\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n          <path d=\\\\\"M29.506 6.502 18.493 41.498\\\\\"></path>\n        </svg></div>\n      <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-breadcrumb-item arco-breadcrumb-item-with-dropdown\\\\\"> Channel <span aria-hidden=\\\\\"true\\\\\" class=\\\\\"arco-breadcrumb-item-dropdown-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span></div>\n      <!---->\n      <div aria-hidden=\\\\\"true\\\\\" class=\\\\\"arco-breadcrumb-item-separator\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-oblique-line\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n          <path d=\\\\\"M29.506 6.502 18.493 41.498\\\\\"></path>\n        </svg></div>\n      <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-breadcrumb-item\\\\\">News\n        <!---->\n      </div>\n      <!---->\n    </div>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div role=\\\\\"list\\\\\" class=\\\\\"arco-breadcrumb\\\\\">\n      <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-breadcrumb-item\\\\\">Home\n        <!---->\n      </div>\n      <div aria-hidden=\\\\\"true\\\\\" class=\\\\\"arco-breadcrumb-item-separator\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-oblique-line\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n          <path d=\\\\\"M29.506 6.502 18.493 41.498\\\\\"></path>\n        </svg></div>\n      <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-breadcrumb-item arco-breadcrumb-item-with-dropdown\\\\\"> Channel <span aria-hidden=\\\\\"true\\\\\" class=\\\\\"arco-breadcrumb-item-dropdown-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span></div>\n      <!---->\n      <div aria-hidden=\\\\\"true\\\\\" class=\\\\\"arco-breadcrumb-item-separator\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-oblique-line\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n          <path d=\\\\\"M29.506 6.502 18.493 41.498\\\\\"></path>\n        </svg></div>\n      <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-breadcrumb-item\\\\\">News\n        <!---->\n      </div>\n      <!---->\n    </div>\n  </div>\n</div>\"\n`;\n\nexports[`<breadcrumb> demo: render [ellipsis] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-vertical\\\\\" style=\\\\\"column-gap: 8px; row-gap: 8px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div role=\\\\\"list\\\\\" class=\\\\\"arco-breadcrumb\\\\\">\n      <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-breadcrumb-item\\\\\">Home\n        <!---->\n      </div>\n      <div aria-hidden=\\\\\"true\\\\\" class=\\\\\"arco-breadcrumb-item-separator\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-oblique-line\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n          <path d=\\\\\"M29.506 6.502 18.493 41.498\\\\\"></path>\n        </svg></div>\n      <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-breadcrumb-item\\\\\" aria-label=\\\\\"ellipses of breadcrumb items\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-more\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n          <path d=\\\\\"M38 25v-2h2v2h-2ZM23 25v-2h2v2h-2ZM8 25v-2h2v2H8Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n          <path d=\\\\\"M38 25v-2h2v2h-2ZM23 25v-2h2v2h-2ZM8 25v-2h2v2H8Z\\\\\"></path>\n        </svg>\n        <!---->\n      </div>\n      <div aria-hidden=\\\\\"true\\\\\" class=\\\\\"arco-breadcrumb-item-separator\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-oblique-line\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n          <path d=\\\\\"M29.506 6.502 18.493 41.498\\\\\"></path>\n        </svg></div>\n      <!---->\n      <!---->\n      <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-breadcrumb-item\\\\\">News\n        <!---->\n      </div>\n      <div aria-hidden=\\\\\"true\\\\\" class=\\\\\"arco-breadcrumb-item-separator\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-oblique-line\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n          <path d=\\\\\"M29.506 6.502 18.493 41.498\\\\\"></path>\n        </svg></div>\n      <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-breadcrumb-item\\\\\">Post\n        <!---->\n      </div>\n      <!---->\n    </div>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div role=\\\\\"list\\\\\" class=\\\\\"arco-breadcrumb\\\\\">\n      <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-breadcrumb-item\\\\\">Home\n        <!---->\n      </div>\n      <div aria-hidden=\\\\\"true\\\\\" class=\\\\\"arco-breadcrumb-item-separator\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-oblique-line\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n          <path d=\\\\\"M29.506 6.502 18.493 41.498\\\\\"></path>\n        </svg></div>\n      <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-breadcrumb-item\\\\\" aria-label=\\\\\"ellipses of breadcrumb items\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-more\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n          <path d=\\\\\"M38 25v-2h2v2h-2ZM23 25v-2h2v2h-2ZM8 25v-2h2v2H8Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n          <path d=\\\\\"M38 25v-2h2v2h-2ZM23 25v-2h2v2h-2ZM8 25v-2h2v2H8Z\\\\\"></path>\n        </svg>\n        <!---->\n        <!---->\n      </div>\n      <div aria-hidden=\\\\\"true\\\\\" class=\\\\\"arco-breadcrumb-item-separator\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-oblique-line\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n          <path d=\\\\\"M29.506 6.502 18.493 41.498\\\\\"></path>\n        </svg></div>\n      <!---->\n      <!---->\n      <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-breadcrumb-item\\\\\">News\n        <!---->\n      </div>\n      <div aria-hidden=\\\\\"true\\\\\" class=\\\\\"arco-breadcrumb-item-separator\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-oblique-line\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n          <path d=\\\\\"M29.506 6.502 18.493 41.498\\\\\"></path>\n        </svg></div>\n      <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-breadcrumb-item\\\\\">Post\n        <!---->\n      </div>\n      <!---->\n    </div>\n  </div>\n</div>\"\n`;\n\nexports[`<breadcrumb> demo: render [icon] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-vertical\\\\\" style=\\\\\"column-gap: 8px; row-gap: 8px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div role=\\\\\"list\\\\\" class=\\\\\"arco-breadcrumb\\\\\">\n      <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-breadcrumb-item\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-home\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n          <path d=\\\\\"M7 17 24 7l17 10v24H7V17Z\\\\\"></path>\n          <path d=\\\\\"M20 28h8v13h-8V28Z\\\\\"></path>\n        </svg>\n        <!---->\n      </div>\n      <div aria-hidden=\\\\\"true\\\\\" class=\\\\\"arco-breadcrumb-item-separator\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-oblique-line\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n          <path d=\\\\\"M29.506 6.502 18.493 41.498\\\\\"></path>\n        </svg></div>\n      <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-breadcrumb-item\\\\\">Channel\n        <!---->\n      </div>\n      <div aria-hidden=\\\\\"true\\\\\" class=\\\\\"arco-breadcrumb-item-separator\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-oblique-line\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n          <path d=\\\\\"M29.506 6.502 18.493 41.498\\\\\"></path>\n        </svg></div>\n      <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-breadcrumb-item\\\\\">News\n        <!---->\n      </div>\n      <!---->\n    </div>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div role=\\\\\"list\\\\\" class=\\\\\"arco-breadcrumb\\\\\">\n      <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-breadcrumb-item\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-home\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n          <path d=\\\\\"M7 17 24 7l17 10v24H7V17Z\\\\\"></path>\n          <path d=\\\\\"M20 28h8v13h-8V28Z\\\\\"></path>\n        </svg>\n        <!---->\n      </div>\n      <div aria-hidden=\\\\\"true\\\\\" class=\\\\\"arco-breadcrumb-item-separator\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-oblique-line\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n          <path d=\\\\\"M29.506 6.502 18.493 41.498\\\\\"></path>\n        </svg></div>\n      <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-breadcrumb-item\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-at\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n          <path d=\\\\\"M31 23a7 7 0 1 1-14 0 7 7 0 0 1 14 0Zm0 0c0 3.038 2.462 6.5 5.5 6.5A5.5 5.5 0 0 0 42 24c0-9.941-8.059-18-18-18S6 14.059 6 24s8.059 18 18 18c4.244 0 8.145-1.469 11.222-3.925\\\\\"></path>\n        </svg> Channel\n        <!---->\n      </div>\n      <div aria-hidden=\\\\\"true\\\\\" class=\\\\\"arco-breadcrumb-item-separator\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-oblique-line\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n          <path d=\\\\\"M29.506 6.502 18.493 41.498\\\\\"></path>\n        </svg></div>\n      <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-breadcrumb-item\\\\\">News\n        <!---->\n      </div>\n      <!---->\n    </div>\n  </div>\n</div>\"\n`;\n\nexports[`<breadcrumb> demo: render [routes] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-vertical\\\\\" style=\\\\\"column-gap: 8px; row-gap: 8px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div role=\\\\\"list\\\\\" class=\\\\\"arco-breadcrumb\\\\\">\n      <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-breadcrumb-item\\\\\"><a href=\\\\\"#/\\\\\">Home</a>\n        <!---->\n      </div>\n      <div aria-hidden=\\\\\"true\\\\\" class=\\\\\"arco-breadcrumb-item-separator\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-oblique-line\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n          <path d=\\\\\"M29.506 6.502 18.493 41.498\\\\\"></path>\n        </svg></div>\n      <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-breadcrumb-item\\\\\"><a href=\\\\\"#/channel\\\\\">Channel</a>\n        <!---->\n      </div>\n      <div aria-hidden=\\\\\"true\\\\\" class=\\\\\"arco-breadcrumb-item-separator\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-oblique-line\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n          <path d=\\\\\"M29.506 6.502 18.493 41.498\\\\\"></path>\n        </svg></div>\n      <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-breadcrumb-item\\\\\"><span>News</span>\n        <!---->\n      </div>\n      <!---->\n    </div>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div role=\\\\\"list\\\\\" class=\\\\\"arco-breadcrumb\\\\\">\n      <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-breadcrumb-item\\\\\"><a href=\\\\\"\\\\\" class=\\\\\"arco-link arco-link-status-normal\\\\\">\n          <!--v-if-->Home\n        </a>\n        <!---->\n      </div>\n      <div aria-hidden=\\\\\"true\\\\\" class=\\\\\"arco-breadcrumb-item-separator\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-oblique-line\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n          <path d=\\\\\"M29.506 6.502 18.493 41.498\\\\\"></path>\n        </svg></div>\n      <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-breadcrumb-item\\\\\"><a href=\\\\\"/channel\\\\\" class=\\\\\"arco-link arco-link-status-normal\\\\\">\n          <!--v-if-->Channel\n        </a>\n        <!---->\n      </div>\n      <div aria-hidden=\\\\\"true\\\\\" class=\\\\\"arco-breadcrumb-item-separator\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-oblique-line\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n          <path d=\\\\\"M29.506 6.502 18.493 41.498\\\\\"></path>\n        </svg></div>\n      <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-breadcrumb-item\\\\\"><a href=\\\\\"/channel/news\\\\\" class=\\\\\"arco-link arco-link-status-normal\\\\\">\n          <!--v-if-->News\n        </a>\n        <!---->\n      </div>\n      <!---->\n    </div>\n  </div>\n</div>\"\n`;\n\nexports[`<breadcrumb> demo: render [separator] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-vertical\\\\\" style=\\\\\"column-gap: 8px; row-gap: 8px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div role=\\\\\"list\\\\\" class=\\\\\"arco-breadcrumb\\\\\">\n      <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-breadcrumb-item\\\\\">Home\n        <!---->\n      </div>\n      <div aria-hidden=\\\\\"true\\\\\" class=\\\\\"arco-breadcrumb-item-separator\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-right\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n          <path d=\\\\\"m16 39.513 15.556-15.557L16 8.4\\\\\"></path>\n        </svg></div>\n      <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-breadcrumb-item\\\\\">Channel\n        <!---->\n      </div>\n      <div aria-hidden=\\\\\"true\\\\\" class=\\\\\"arco-breadcrumb-item-separator\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-right\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n          <path d=\\\\\"m16 39.513 15.556-15.557L16 8.4\\\\\"></path>\n        </svg></div>\n      <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-breadcrumb-item\\\\\">News\n        <!---->\n      </div>\n      <!---->\n    </div>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div role=\\\\\"list\\\\\" class=\\\\\"arco-breadcrumb\\\\\">\n      <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-breadcrumb-item\\\\\">Home\n        <!---->\n      </div>\n      <div aria-hidden=\\\\\"true\\\\\" class=\\\\\"arco-breadcrumb-item-separator\\\\\">~</div>\n      <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-breadcrumb-item\\\\\">Channel\n        <!---->\n      </div>\n      <div aria-hidden=\\\\\"true\\\\\" class=\\\\\"arco-breadcrumb-item-separator\\\\\">~</div>\n      <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-breadcrumb-item\\\\\">News\n        <!---->\n      </div>\n      <!---->\n    </div>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div role=\\\\\"list\\\\\" class=\\\\\"arco-breadcrumb\\\\\">\n      <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-breadcrumb-item\\\\\">Home\n        <!---->\n      </div>\n      <div aria-hidden=\\\\\"true\\\\\" class=\\\\\"arco-breadcrumb-item-separator\\\\\">-&gt;</div>\n      <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-breadcrumb-item\\\\\">Channel\n        <!---->\n      </div>\n      <div aria-hidden=\\\\\"true\\\\\" class=\\\\\"arco-breadcrumb-item-separator\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-right\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n          <path d=\\\\\"m16 39.513 15.556-15.557L16 8.4\\\\\"></path>\n        </svg></div>\n      <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-breadcrumb-item\\\\\">News\n        <!---->\n      </div>\n      <!---->\n    </div>\n  </div>\n</div>\"\n`;\n\nexports[`<breadcrumb> demo: render [size] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-vertical\\\\\" style=\\\\\"column-gap: 8px; row-gap: 8px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div role=\\\\\"list\\\\\" class=\\\\\"arco-breadcrumb\\\\\">\n      <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-breadcrumb-item\\\\\">Home\n        <!---->\n      </div>\n      <div aria-hidden=\\\\\"true\\\\\" class=\\\\\"arco-breadcrumb-item-separator\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-oblique-line\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n          <path d=\\\\\"M29.506 6.502 18.493 41.498\\\\\"></path>\n        </svg></div>\n      <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-breadcrumb-item\\\\\">Channel\n        <!---->\n      </div>\n      <div aria-hidden=\\\\\"true\\\\\" class=\\\\\"arco-breadcrumb-item-separator\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-oblique-line\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n          <path d=\\\\\"M29.506 6.502 18.493 41.498\\\\\"></path>\n        </svg></div>\n      <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-breadcrumb-item\\\\\">News\n        <!---->\n      </div>\n      <!---->\n    </div>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div role=\\\\\"list\\\\\" class=\\\\\"arco-breadcrumb\\\\\" style=\\\\\"font-size: 12px;\\\\\">\n      <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-breadcrumb-item\\\\\">Home\n        <!---->\n      </div>\n      <div aria-hidden=\\\\\"true\\\\\" class=\\\\\"arco-breadcrumb-item-separator\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-oblique-line\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n          <path d=\\\\\"M29.506 6.502 18.493 41.498\\\\\"></path>\n        </svg></div>\n      <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-breadcrumb-item\\\\\">Channel\n        <!---->\n      </div>\n      <div aria-hidden=\\\\\"true\\\\\" class=\\\\\"arco-breadcrumb-item-separator\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-oblique-line\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n          <path d=\\\\\"M29.506 6.502 18.493 41.498\\\\\"></path>\n        </svg></div>\n      <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-breadcrumb-item\\\\\">News\n        <!---->\n      </div>\n      <!---->\n    </div>\n  </div>\n</div>\"\n`;\n"
  },
  {
    "path": "packages/web-vue/components/breadcrumb/__test__/demo.test.ts",
    "content": "import demoTest from '../../../scripts/demo-test';\n\ndemoTest('breadcrumb');\n"
  },
  {
    "path": "packages/web-vue/components/breadcrumb/breadcrumb-item.tsx",
    "content": "import { computed, defineComponent, inject, PropType, ref } from 'vue';\nimport { getPrefixCls } from '../_utils/global-config';\nimport IconMore from '../icon/icon-more';\nimport IconDown from '../icon/icon-down';\nimport IconObliqueLine from '../icon/icon-oblique-line';\nimport { breadcrumbInjectKey } from './context';\nimport { BreadcrumbRoute } from './interface';\nimport Dropdown, { Doption, DropDownProps } from '../dropdown';\n\nexport default defineComponent({\n  name: 'BreadcrumbItem',\n  inheritAttrs: false,\n  props: {\n    /**\n     * @zh 分隔符文字\n     * @en Delimiter text\n     * @version 2.36.0\n     */\n    separator: {\n      type: [String, Number],\n    },\n    /**\n     * @zh 下拉菜单内容\n     * @en Dropdown content\n     * @version 2.36.0\n     */\n    droplist: {\n      type: Array as PropType<BreadcrumbRoute['children']>,\n    },\n    /**\n     * @zh 下拉菜单属性\n     * @en Dropdown props\n     * @version 2.36.0\n     */\n    dropdownProps: {\n      type: Object as PropType<DropDownProps>,\n    },\n    // private\n    index: {\n      type: Number,\n      default: 0,\n    },\n  },\n  /**\n   * @zh 自定义分隔符\n   * @en Custom separator\n   * @slot separator\n   * @version 2.36.0\n   */\n  /**\n   * @zh 自定义下拉菜单\n   * @en Custom droplist\n   * @slot droplist\n   * @version 2.36.0\n   */\n  setup(props, { slots, attrs }) {\n    const prefixCls = getPrefixCls('breadcrumb-item');\n    const breadcrumbCtx = inject(breadcrumbInjectKey, undefined);\n    const dropdownVisible = ref(false);\n\n    const show = computed(() => {\n      if (breadcrumbCtx && breadcrumbCtx.needHide) {\n        if (\n          props.index > 1 &&\n          props.index <= breadcrumbCtx.total - breadcrumbCtx.maxCount\n        ) {\n          return false;\n        }\n      }\n      return true;\n    });\n\n    const displayMore = computed(() => {\n      if (breadcrumbCtx && breadcrumbCtx.needHide) {\n        return props.index === 1;\n      }\n      return false;\n    });\n\n    const showSeparator = computed(() =>\n      breadcrumbCtx ? props.index < breadcrumbCtx.total - 1 : true\n    );\n\n    const handleVisibleChange = (visible: boolean) => {\n      dropdownVisible.value = visible;\n    };\n\n    const separatorRender = () => {\n      if (!showSeparator.value) return null;\n      const separatorElement = slots.separator?.() ??\n        props.separator ??\n        breadcrumbCtx?.slots.separator?.() ??\n        breadcrumbCtx?.separator ?? <IconObliqueLine />;\n      return (\n        <div aria-hidden=\"true\" class={`${prefixCls}-separator`}>\n          {separatorElement}\n        </div>\n      );\n    };\n\n    const renderItem = () => {\n      return (\n        <div\n          role=\"listitem\"\n          class={[\n            prefixCls,\n            {\n              [`${prefixCls}-with-dropdown`]: props.droplist || slots.droplist,\n            },\n          ]}\n          {...(displayMore.value\n            ? { 'aria-label': 'ellipses of breadcrumb items' }\n            : undefined)}\n          {...attrs}\n        >\n          {displayMore.value\n            ? breadcrumbCtx?.slots['more-icon']?.() ?? <IconMore />\n            : slots.default?.()}\n          {(props.droplist || slots.droplist) && (\n            <span\n              aria-hidden\n              class={[\n                `${prefixCls}-dropdown-icon`,\n                {\n                  [`${prefixCls}-dropdown-icon-active`]: dropdownVisible.value,\n                },\n              ]}\n            >\n              <IconDown />\n            </span>\n          )}\n        </div>\n      );\n    };\n\n    const renderDropdownContent = () => {\n      return (\n        slots.droplist?.() ??\n        props.droplist?.map((item) => (\n          <Doption value={item.path}>{item.label}</Doption>\n        ))\n      );\n    };\n\n    const renderDropdown = () => {\n      return (\n        <Dropdown\n          v-slots={{ content: renderDropdownContent }}\n          popupVisible={dropdownVisible.value}\n          onPopupVisibleChange={handleVisibleChange}\n          {...props.dropdownProps}\n        >\n          {renderItem()}\n        </Dropdown>\n      );\n    };\n\n    return () => {\n      if (show.value) {\n        return (\n          <>\n            {slots.droplist || props.droplist ? renderDropdown() : renderItem()}\n            {separatorRender()}\n          </>\n        );\n      }\n      return null;\n    };\n  },\n});\n"
  },
  {
    "path": "packages/web-vue/components/breadcrumb/breadcrumb.tsx",
    "content": "import {\n  computed,\n  defineComponent,\n  mergeProps,\n  PropType,\n  provide,\n  reactive,\n  ref,\n  toRefs,\n} from 'vue';\nimport { getPrefixCls } from '../_utils/global-config';\nimport { breadcrumbInjectKey } from './context';\nimport { getAllElements } from '../_utils/vue-utils';\nimport { BreadcrumbRoute } from './interface';\nimport BreadcrumbItem from './breadcrumb-item';\n\nexport default defineComponent({\n  name: 'Breadcrumb',\n  props: {\n    /**\n     * @zh 最多展示的面包屑数量（0表示不限制）\n     * @en Maximum number of breadcrumbs displayed (0 means no limit)\n     */\n    maxCount: {\n      type: Number,\n      default: 0,\n    },\n    /**\n     * @zh 设置路径\n     * @en Set routes\n     * @version 2.36.0\n     */\n    routes: {\n      type: Array as PropType<BreadcrumbRoute[]>,\n    },\n    /**\n     * @zh 分隔符文字\n     * @en Delimiter text\n     * @version 2.36.0\n     */\n    separator: {\n      type: [String, Number],\n    },\n    /**\n     * @zh 自定义链接地址\n     * @en Custom link address\n     * @version 2.36.0\n     */\n    customUrl: {\n      type: Function as PropType<(paths: string[]) => string>,\n    },\n  },\n  /**\n   * @zh 自定义分隔符\n   * @en Custom separator\n   * @slot separator\n   */\n  /**\n   * @zh routes 设置时生效，自定义渲染面包屑\n   * @en Effective when setting routes, custom render breadcrumbs\n   * @binding {BreadcrumbRoute} route\n   * @binding {BreadcrumbRoute[]} routes\n   * @binding {string[]} paths\n   * @slot item-render\n   * @version 2.36.0\n   */\n  /**\n   * @zh 自定义更多图标\n   * @en Custom more icon\n   * @slot more-icon\n   * @version 2.36.0\n   */\n  setup(props, { slots }) {\n    const { maxCount, separator, routes } = toRefs(props);\n    const prefixCls = getPrefixCls('breadcrumb');\n\n    const total = ref(0);\n\n    const needHide = computed(\n      () => maxCount.value > 0 && total.value > maxCount.value + 1\n    );\n\n    provide(\n      breadcrumbInjectKey,\n      reactive({\n        total,\n        maxCount,\n        separator,\n        needHide,\n        slots,\n      })\n    );\n\n    const defaultItemRender = (\n      route: BreadcrumbRoute,\n      routes: BreadcrumbRoute[],\n      paths: string[]\n    ) => {\n      if (routes.indexOf(route) === routes.length - 1) {\n        return <span>{route.label}</span>;\n      }\n      const href =\n        props.customUrl?.(paths) ?? `#/${paths.join('/').replace(/^\\//, '')}`;\n\n      return <a href={href}>{route.label}</a>;\n    };\n\n    const renderByRoutes = () => {\n      if (!routes.value?.length) return null;\n\n      if (total.value !== routes.value.length) {\n        total.value = routes.value.length;\n      }\n\n      const paths: Array<string> = [];\n\n      return routes.value.map((route, idx, origin) => {\n        paths.push((route.path || '').replace(/^\\//, ''));\n        // array copy\n        const currentPaths = [...paths];\n        return (\n          <BreadcrumbItem\n            key={route.path || route.label}\n            index={idx}\n            droplist={route.children}\n          >\n            {slots['item-render']?.({\n              route,\n              routes: origin,\n              paths: currentPaths,\n            }) ?? defaultItemRender(route, origin, currentPaths)}\n          </BreadcrumbItem>\n        );\n      });\n    };\n\n    const renderByChildren = () => {\n      const children = getAllElements(slots.default?.() ?? []);\n\n      if (total.value !== children.length) {\n        total.value = children.length;\n      }\n\n      return children.map((child, index) => {\n        child.props = mergeProps(child.props ?? {}, { index });\n        return child;\n      });\n    };\n\n    return () => {\n      return (\n        <div role=\"list\" class={prefixCls}>\n          {slots.default ? renderByChildren() : renderByRoutes()}\n        </div>\n      );\n    };\n  },\n});\n"
  },
  {
    "path": "packages/web-vue/components/breadcrumb/context.ts",
    "content": "import { InjectionKey, Slots } from 'vue';\n\nexport interface BreadcrumbContext {\n  total: number;\n  maxCount: number;\n  separator?: string | number;\n  needHide: boolean;\n  slots: Slots;\n}\n\nexport const breadcrumbInjectKey: InjectionKey<BreadcrumbContext> =\n  Symbol('ArcoBreadcrumb');\n"
  },
  {
    "path": "packages/web-vue/components/breadcrumb/index.ts",
    "content": "import type { App } from 'vue';\nimport type { ArcoOptions } from '../_utils/types';\nimport { setGlobalConfig, getComponentPrefix } from '../_utils/global-config';\nimport _Breadcrumb from './breadcrumb';\nimport _BreadcrumbItem from './breadcrumb-item';\n\nconst Breadcrumb = Object.assign(_Breadcrumb, {\n  Item: _BreadcrumbItem,\n  install: (app: App, options?: ArcoOptions) => {\n    setGlobalConfig(app, options);\n    const componentPrefix = getComponentPrefix(options);\n\n    app.component(componentPrefix + _Breadcrumb.name, _Breadcrumb);\n    app.component(componentPrefix + _BreadcrumbItem.name, _BreadcrumbItem);\n  },\n});\n\nexport type BreadcrumbInstance = InstanceType<typeof _Breadcrumb>;\nexport type BreadcrumbItemInstance = InstanceType<typeof _BreadcrumbItem>;\nexport type { BreadcrumbRoute } from './interface';\n\nexport { _BreadcrumbItem as BreadcrumbItem };\n\nexport default Breadcrumb;\n"
  },
  {
    "path": "packages/web-vue/components/breadcrumb/interface.ts",
    "content": "export interface BreadcrumbRoute {\n  /**\n   * @zh 面包屑名称\n   * @en Breadcrumb name\n   */\n  label: string;\n  /**\n   * @zh 跳转路径 (`a`标签的`href`)\n   * @en Jump path (`a` tag `href` value)\n   */\n  path: string;\n  /**\n   * @zh 下拉菜单展示项\n   * @en Dropdown menu items\n   */\n  children?: {\n    label: string;\n    path: string;\n  }[];\n}\n"
  },
  {
    "path": "packages/web-vue/components/breadcrumb/style/index.less",
    "content": "@import './token.less';\n\n@breadcrumb-prefix-cls: ~'@{prefix}-breadcrumb';\n\n.@{breadcrumb-prefix-cls} {\n  display: inline-flex;\n  align-items: center;\n  color: var(~'@{arco-cssvars-prefix}-color-text-2');\n  font-size: @breadcrumb-size-font-size;\n\n  &-icon {\n    color: var(~'@{arco-cssvars-prefix}-color-text-2');\n  }\n\n  &-item {\n    display: inline-block;\n    padding: 0 @breadcrumb-padding-text-horizontal;\n    color: @breadcrumb-color-text;\n    line-height: @breadcrumb-size-text-height;\n    vertical-align: middle;\n\n    > .@{prefix}-icon {\n      color: @breadcrumb-color-icon;\n    }\n\n    a {\n      display: inline-block;\n      margin: 0 -@breadcrumb-padding-text-horizontal;\n      padding: 0 @breadcrumb-padding-text-horizontal;\n      color: @breadcrumb-color-link-text;\n      text-decoration: none;\n      border-radius: @breadcrumb-border-text-radius_hover;\n      background-color: @breadcrumb-color-bg;\n\n      &:hover {\n        color: @breadcrumb-color-link-text_hover;\n        background-color: @breadcrumb-color-bg_hover;\n      }\n    }\n\n    &:last-child {\n      color: @breadcrumb-color-text_active;\n      font-weight: @breadcrumb-font-weight_active;\n    }\n\n    &-ellipses {\n      position: relative;\n      top: -3px;\n      display: inline-block;\n      padding: 0 @breadcrumb-padding-text-horizontal;\n      color: var(~'@{arco-cssvars-prefix}-color-text-2');\n    }\n\n    &-separator {\n      display: inline-block;\n      margin: 0 @breadcrumb-margin-separator-horizontal;\n      color: @breadcrumb-color-separator;\n      line-height: @breadcrumb-size-text-height;\n      vertical-align: middle;\n    }\n\n    &-with-dropdown {\n      cursor: pointer;\n    }\n\n    &-dropdown-icon {\n      margin-left: @breadcrumb-margin-dropdown-icon-left;\n      color: @breadcrumb-color-dropdown-icon;\n      font-size: @breadcrumb-size-dropdown-icon;\n\n      &-active svg {\n        transform: rotate(180deg);\n      }\n    }\n  }\n}\n"
  },
  {
    "path": "packages/web-vue/components/breadcrumb/style/index.ts",
    "content": "import '../../style/index.less';\nimport './index.less';\n"
  },
  {
    "path": "packages/web-vue/components/breadcrumb/style/token.less",
    "content": "@import '../../style/theme/index.less';\n\n@breadcrumb-color-text: var(~'@{arco-cssvars-prefix}-color-text-2');\n@breadcrumb-color-text_active: var(~'@{arco-cssvars-prefix}-color-text-1');\n@breadcrumb-color-link-text: var(~'@{arco-cssvars-prefix}-color-text-2');\n@breadcrumb-color-separator: var(~'@{arco-cssvars-prefix}-color-text-4');\n@breadcrumb-color-bg_hover: var(~'@{arco-cssvars-prefix}-color-fill-2');\n@breadcrumb-color-bg: @color-transparent;\n\n@breadcrumb-margin-separator-horizontal: @spacing-2;\n@breadcrumb-margin-dropdown-icon-left: @spacing-2;\n@breadcrumb-padding-text-horizontal: @spacing-2;\n@breadcrumb-border-text-radius_hover: @radius-small;\n\n@breadcrumb-size-text-height: @size-6;\n@breadcrumb-size-separator-height: @size-3;\n@breadcrumb-size-dropdown-icon: @size-3;\n@breadcrumb-size-font-size: @font-size-body-3;\n@breadcrumb-font-weight_active: @font-weight-500;\n\n@breadcrumb-color-icon: var(~'@{arco-cssvars-prefix}-color-text-3');\n@breadcrumb-color-link-text_hover: @color-link-6;\n@breadcrumb-color-dropdown-icon: var(~'@{arco-cssvars-prefix}-color-text-2');\n\n"
  },
  {
    "path": "packages/web-vue/components/button/CHANGELOG.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.56.3\n\n`2024-10-25`\n\n### 🆕 Feature\n\n- Support autofocus attribute for button ([#3293](https://github.com/arco-design/arco-design-vue/pull/3293))\n\n\n## 2.54.0\n\n`2023-12-15`\n\n### 🆎 TypeScript\n\n- TS类型优化 ([#2825](https://github.com/arco-design/arco-design-vue/pull/2825))\n\n\n## 2.37.4\n\n`2022-09-30`\n\n### 💎 Enhancement\n\n- Use the flex layout method to solve the centering problem when the icon size is inconsistent ([#1702](https://github.com/arco-design/arco-design-vue/pull/1702))\n\n\n## 2.35.1\n\n`2022-08-19`\n\n### 💎 Enhancement\n\n- Default event is not triggered on click when state is loading or disabled ([#1516](https://github.com/arco-design/arco-design-vue/pull/1516))\n\n\n## 2.29.1\n\n`2022-06-02`\n\n### 💎 Enhancement\n\n- Add focus style ([#1229](https://github.com/arco-design/arco-design-vue/pull/1229))\n\n\n## 2.24.1\n\n`2022-04-16`\n\n### 🐛 BugFix\n\n- Fix `config-provide` injection invalid problem ([#986](https://github.com/arco-design/arco-design-vue/pull/986))\n\n\n## 2.24.0\n\n`2022-04-15`\n\n### 🆕 Feature\n\n- `button-group` supports setting props for subcomponent `button` ([#967](https://github.com/arco-design/arco-design-vue/pull/967))\n\n\n## 2.16.0\n\n`2022-01-21`\n\n### 💅 Style\n\n- Fix link mode text not centered ([#636](https://github.com/arco-design/arco-design-vue/pull/636))\n\n\n## 2.15.0\n\n`2022-01-14`\n\n### 💅 Style\n\n- Fix alignment of iconOnly buttons in button groups ([#567](https://github.com/arco-design/arco-design-vue/pull/567))\n\n\n## 2.14.2\n\n`2022-01-10`\n\n### 💅 Style\n\n- Fix onlyIcon mode icons not aligned ([#538](https://github.com/arco-design/arco-design-vue/pull/538))\n\n"
  },
  {
    "path": "packages/web-vue/components/button/CHANGELOG.zh-CN.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.56.3\n\n`2024-10-25`\n\n### 🆕 新增功能\n\n- 支持button的autofocus属性 ([#3293](https://github.com/arco-design/arco-design-vue/pull/3293))\n\n\n## 2.54.0\n\n`2023-12-15`\n\n### 🆎 类型修正\n\n- TS类型优化 ([#2825](https://github.com/arco-design/arco-design-vue/pull/2825))\n\n\n## 2.37.4\n\n`2022-09-30`\n\n### 💎 功能优化\n\n- 使用 flex 布局方式，解决 icon 大小不一致时的居中问题 ([#1702](https://github.com/arco-design/arco-design-vue/pull/1702))\n\n\n## 2.35.1\n\n`2022-08-19`\n\n### 💎 功能优化\n\n- 当状态为 loading 或 disabled 时点击不会触发默认事件 ([#1516](https://github.com/arco-design/arco-design-vue/pull/1516))\n\n\n## 2.29.1\n\n`2022-06-02`\n\n### 💎 功能优化\n\n- 增加 focus 样式 ([#1229](https://github.com/arco-design/arco-design-vue/pull/1229))\n\n\n## 2.24.1\n\n`2022-04-16`\n\n### 🐛 问题修复\n\n- 修复 `config-provide` 注入失效的问题 ([#986](https://github.com/arco-design/arco-design-vue/pull/986))\n\n\n## 2.24.0\n\n`2022-04-15`\n\n### 🆕 Feature\n\n- `button-group` 支持为子组件 `button` 设置属性 ([#967](https://github.com/arco-design/arco-design-vue/pull/967))\n\n\n## 2.16.0\n\n`2022-01-21`\n\n### 💅 样式更新\n\n- 修复链接模式文字未居中的问题 ([#636](https://github.com/arco-design/arco-design-vue/pull/636))\n\n\n## 2.15.0\n\n`2022-01-14`\n\n### 💅 样式更新\n\n- 修复按钮组中 iconOnly 按钮的对齐问题 ([#567](https://github.com/arco-design/arco-design-vue/pull/567))\n\n\n## 2.14.2\n\n`2022-01-10`\n\n### 💅 样式更新\n\n- 修复 onlyIcon 模式图标未对齐问题 ([#538](https://github.com/arco-design/arco-design-vue/pull/538))\n\n"
  },
  {
    "path": "packages/web-vue/components/button/README.en-US.md",
    "content": "```yaml\nmeta:\n  type: Component\n  category: Common\ntitle: Button\ndescription: Button is a command component that can initiate an instant operation.\n```\n\n*Auto translate by google.*\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/icon.md\n\n@import ./__demo__/shape.md\n\n@import ./__demo__/size.md\n\n@import ./__demo__/status.md\n\n@import ./__demo__/disabled.md\n\n@import ./__demo__/loading.md\n\n@import ./__demo__/long.md\n\n@import ./__demo__/group.md\n\n## API\n\n\n### `<button>` Props\n\n|Attribute|Description|Type|Default|\n|---|---|---|:---:|\n|type|Button types are divided into five types: secondary, primary, dashed, outline and text.|`ButtonTypes`|`'secondary'`|\n|shape|Button shape|`BorderShape`|`-`|\n|status|Button state|`'normal' \\| 'warning' \\| 'success' \\| 'danger'`|`'normal'`|\n|size|Button size|`'mini' \\| 'small' \\| 'medium' \\| 'large'`|`'medium'`|\n|long|Whether the width of the button adapts to the container.|`boolean`|`false`|\n|loading|Whether the button is in the loading state|`boolean`|`false`|\n|disabled|Whether the button is disabled|`boolean`|`false`|\n|html-type|Set the native `type` attribute of `button`, optional values refer to [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type \"_blank\")|`HTMLButtonElement['type']`|`'button'`|\n|autofocus|Set the native `autofocus` attribute of `button`, optional values refer to [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type \"_blank\")|`boolean`|`false`|\n|href|Set up a jump link. When this property is set, the button is rendered as `<a>`|`string`|`-`|\n### `<button>` Events\n\n|Event Name|Description|Parameters|\n|---|---|---|\n|click|Emitted when the button is clicked|ev: `MouseEvent`|\n### `<button>` Slots\n\n|Slot Name|Description|Parameters|\n|---|---|---|\n|icon|Icon|-|\n\n\n\n\n### `<button-group>` Props\n\n|Attribute|Description|Type|Default|\n|---|---|---|:---:|\n|type|Children button types are divided into five types: secondary, primary, dashed, outline and text.|`ButtonTypes`|`-`|\n|status|Children button state|`'normal' \\| 'warning' \\| 'success' \\| 'danger'`|`-`|\n|shape|Button shape|`BorderShape`|`-`|\n|size|Children button size|`'mini' \\| 'small' \\| 'medium' \\| 'large'`|`-`|\n|disabled|All children whether the button is disabled|`boolean`|`false`|\n\n\n"
  },
  {
    "path": "packages/web-vue/components/button/README.zh-CN.md",
    "content": "```yaml\nmeta:\n  type: 组件\n  category: 通用\ntitle: 按钮 Button\ndescription: 按钮是一种命令组件，可发起一个即时操作。\n```\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/icon.md\n\n@import ./__demo__/shape.md\n\n@import ./__demo__/size.md\n\n@import ./__demo__/status.md\n\n@import ./__demo__/disabled.md\n\n@import ./__demo__/loading.md\n\n@import ./__demo__/long.md\n\n@import ./__demo__/group.md\n\n## API\n\n\n### `<button>` Props\n\n|参数名|描述|类型|默认值|\n|---|---|---|:---:|\n|type|按钮的类型，分为五种：次要按钮、主要按钮、虚框按钮、线性按钮、文字按钮。|`ButtonTypes`|`'secondary'`|\n|shape|按钮的形状|`BorderShape`|`-`|\n|status|按钮的状态|`'normal' \\| 'warning' \\| 'success' \\| 'danger'`|`'normal'`|\n|size|按钮的尺寸|`'mini' \\| 'small' \\| 'medium' \\| 'large'`|`'medium'`|\n|long|按钮的宽度是否随容器自适应。|`boolean`|`false`|\n|loading|按钮是否为加载中状态|`boolean`|`false`|\n|disabled|按钮是否禁用|`boolean`|`false`|\n|html-type|设置 `button` 的原生 `type` 属性，可选值参考 [HTML标准](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type \"_blank\")|`HTMLButtonElement['type']`|`'button'`|\n|autofocus|设置 `button` 的原生 `autofocus` 属性，可选值参考 [HTML标准](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type \"_blank\")|`boolean`|`false`|\n|href|设置跳转链接。设置此属性时，按钮渲染为a标签。|`string`|`-`|\n### `<button>` Events\n\n|事件名|描述|参数|\n|---|---|---|\n|click|点击按钮时触发|ev: `MouseEvent`|\n### `<button>` Slots\n\n|插槽名|描述|参数|\n|---|:---:|---|\n|icon|图标|-|\n\n\n\n\n### `<button-group>` Props\n\n|参数名|描述|类型|默认值|\n|---|---|---|:---:|\n|type|按钮的类型，分为五种：次要按钮、主要按钮、虚框按钮、线性按钮、文字按钮。|`ButtonTypes`|`-`|\n|status|按钮的状态|`'normal' \\| 'warning' \\| 'success' \\| 'danger'`|`-`|\n|shape|按钮的形状|`BorderShape`|`-`|\n|size|按钮的尺寸|`'mini' \\| 'small' \\| 'medium' \\| 'large'`|`-`|\n|disabled|全部子按钮是否禁用|`boolean`|`false`|\n\n\n"
  },
  {
    "path": "packages/web-vue/components/button/TEMPLATE.md",
    "content": "## zh-CN\n```yaml\nmeta:\n  type: 组件\n  category: 通用\ntitle: 按钮 Button\ndescription: 按钮是一种命令组件，可发起一个即时操作。\n```\n---\n## en-US\n```yaml\nmeta:\n  type: Component\n  category: Common\ntitle: Button\ndescription: Button is a command component that can initiate an instant operation.\n```\n---\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/icon.md\n\n@import ./__demo__/shape.md\n\n@import ./__demo__/size.md\n\n@import ./__demo__/status.md\n\n@import ./__demo__/disabled.md\n\n@import ./__demo__/loading.md\n\n@import ./__demo__/long.md\n\n@import ./__demo__/group.md\n\n## API\n\n%%API(button.vue)%%\n\n%%API(button-group.vue)%%\n"
  },
  {
    "path": "packages/web-vue/components/button/__demo__/basic.md",
    "content": "```yaml\ntitle:\n  zh-CN: 基本用法\n  en-US: Basic Usage\n```\n\n## zh-CN\n\n按钮分为 `primary` - **主要按钮**、`secondary` - **次要按钮（默认）**、`dashed` - **虚线按钮**、`outline` - **线形按钮**、`text` - **文本按钮**五种类型。\n\n---\n\n## en-US\n\nButton is divided into five types: `primary`, `secondary`, `dashed`, `outline`, `text`.\n\n---\n\n```vue\n<template>\n  <a-space>\n    <a-button type=\"primary\">Primary</a-button>\n    <a-button>Secondary</a-button>\n    <a-button type=\"dashed\">Dashed</a-button>\n    <a-button type=\"outline\">Outline</a-button>\n    <a-button type=\"text\">Text</a-button>\n  </a-space>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/button/__demo__/disabled.md",
    "content": "```yaml\ntitle:\n  zh-CN: 禁用状态\n  en-US: Disabled Status\n```\n\n## zh-CN\n\n按钮的禁用状态。\n\n---\n\n## en-US\n\nThe disabled state of the button.\n\n---\n\n```vue\n<template>\n  <a-space direction=\"vertical\">\n    <a-space>\n      <a-button type=\"primary\" disabled>Primary</a-button>\n      <a-button disabled>Default</a-button>\n      <a-button type=\"dashed\" disabled>Dashed</a-button>\n      <a-button type=\"outline\" disabled>Outline</a-button>\n      <a-button type=\"text\" disabled>Text</a-button>\n    </a-space>\n    <a-space>\n      <a-button type=\"primary\" status=\"success\" disabled>Primary</a-button>\n      <a-button status=\"success\" disabled>Default</a-button>\n      <a-button type=\"dashed\" status=\"success\" disabled>Dashed</a-button>\n      <a-button type=\"outline\" status=\"success\" disabled>Outline</a-button>\n      <a-button type=\"text\" status=\"success\" disabled>Text</a-button>\n    </a-space>\n    <a-space>\n      <a-button type=\"primary\" status=\"warning\" disabled>Primary</a-button>\n      <a-button status=\"warning\" disabled>Default</a-button>\n      <a-button type=\"dashed\" status=\"warning\" disabled>Dashed</a-button>\n      <a-button type=\"outline\" status=\"warning\" disabled>Outline</a-button>\n      <a-button type=\"text\" status=\"warning\" disabled>Text</a-button>\n    </a-space>\n    <a-space>\n      <a-button type=\"primary\" status=\"danger\" disabled>Primary</a-button>\n      <a-button status=\"danger\" disabled>Default</a-button>\n      <a-button type=\"dashed\" status=\"danger\" disabled>Dashed</a-button>\n      <a-button type=\"outline\" status=\"danger\" disabled>Outline</a-button>\n      <a-button type=\"text\" status=\"danger\" disabled>Text</a-button>\n    </a-space>\n  </a-space>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/button/__demo__/group.md",
    "content": "```yaml\ntitle:\n  zh-CN: 组合按钮\n  en-US: Button Group\n```\n\n## zh-CN\n\n通过 `<a-button-group>` 组件使按钮以组合方式出现。可用在同级多项操作中。\n\n---\n\n## en-US\n\nUse the `<a-button-group>` component to make the buttons appear as a group. Can be used in multiple operations at the same level.\n\n---\n\n```vue\n<template>\n  <a-space direction=\"vertical\">\n    <a-button-group>\n      <a-button>Publish</a-button>\n      <a-button>\n        <template #icon>\n          <icon-down />\n        </template>\n      </a-button>\n    </a-button-group>\n    <a-button-group>\n      <a-button>Publish</a-button>\n      <a-button>\n        <template #icon>\n          <icon-more />\n        </template>\n      </a-button>\n    </a-button-group>\n    <a-button-group>\n      <a-button type=\"primary\">\n        <icon-left />\n        Prev\n      </a-button>\n      <a-button type=\"primary\">\n        Next\n        <icon-right />\n      </a-button>\n    </a-button-group>\n    <a-space size=\"large\">\n      <a-button-group type=\"primary\">\n        <a-button> copy </a-button>\n        <a-button> cut </a-button>\n        <a-button> find </a-button>\n      </a-button-group>\n      <a-button-group type=\"primary\" status=\"warning\">\n        <a-button> <template #icon><icon-heart-fill /></template> </a-button>\n        <a-button> <template #icon><icon-star-fill /></template> </a-button>\n        <a-button> <template #icon><icon-thumb-up-fill /></template> </a-button>\n      </a-button-group>\n      <a-button-group size=\"small\" disabled>\n        <a-button> prev </a-button>\n        <a-button> next </a-button>\n      </a-button-group>\n    </a-space>\n  </a-space>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/button/__demo__/icon.md",
    "content": "```yaml\ntitle:\n  zh-CN: 图标按钮\n  en-US: Icon Button\n```\n\n## zh-CN\n\n按钮可以嵌入图标。在只设置图标时，按钮的宽高相等。\n\n---\n\n## en-US\n\nButtons can be embedded with icons. When only icons are set, the width and height of the buttons are equal.\n\n---\n\n```vue\n<template>\n  <a-space>\n    <a-button type=\"primary\">\n      <template #icon>\n        <icon-plus />\n      </template>\n    </a-button>\n    <a-button type=\"primary\">\n      <template #icon>\n        <icon-delete />\n      </template>\n      <!-- Use the default slot to avoid extra spaces -->\n      <template #default>Delete</template>\n    </a-button>\n  </a-space>\n</template>\n\n<script>\nimport { IconPlus, IconDelete } from '@arco-design/web-vue/es/icon';\n\nexport default {\n  components: { IconPlus, IconDelete }\n};\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/button/__demo__/loading.md",
    "content": "```yaml\ntitle:\n  zh-CN: 加载中状态\n  en-US: Loading Status\n```\n\n## zh-CN\n\n通过设置 `loading` 可以让按钮处于加载中状态。处于加载中状态的按钮不会触发点击事件。\n\n---\n\n## en-US\n\nThe button can be in the loading state by setting `loading`. The button in the loading state will not trigger the `click` event.\n\n---\n\n```vue\n<template>\n  <a-space>\n    <a-button type=\"primary\" loading>Primary</a-button>\n    <a-button loading>Default</a-button>\n    <a-button type=\"dashed\" loading>Dashed</a-button>\n    <a-button type=\"primary\" :loading=\"loading1\" @click=\"handleClick1\">Click Me</a-button>\n    <a-button type=\"primary\" :loading=\"loading2\" @click=\"handleClick2\">\n      <template #icon>\n        <icon-plus />\n      </template>\n      Click Me\n    </a-button>\n  </a-space>\n</template>\n\n<script>\nimport { ref } from 'vue';\nimport { IconPlus } from '@arco-design/web-vue/es/icon';\n\nexport default {\n  components: {\n    IconPlus\n  },\n  setup() {\n    const loading1 = ref(false);\n    const loading2 = ref(false);\n\n    const handleClick1 = () => {\n      loading1.value = !loading1.value\n    }\n    const handleClick2 = () => {\n      loading2.value = !loading2.value\n    }\n\n    return {\n      loading1,\n      loading2,\n      handleClick1,\n      handleClick2\n    }\n  }\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/button/__demo__/long.md",
    "content": "```yaml\ntitle:\n  zh-CN: 长按钮\n  en-US: Long Button\n```\n\n## zh-CN\n\n通过设置 `long` 属性，使按钮的宽度跟随容器的宽度。\n\n---\n\n## en-US\n\nBy setting the `long` property, the width of the button follows the width of the container.\n\n---\n\n```vue\n<template>\n  <a-space class=\"wrapper\" direction=\"vertical\">\n    <a-button type=\"primary\" long>Primary</a-button>\n    <a-button long>Default</a-button>\n    <a-button type=\"dashed\" long>Dashed</a-button>\n    <a-button type=\"outline\" long>Outline</a-button>\n    <a-button type=\"text\" long>Text</a-button>\n  </a-space>\n</template>\n\n<style scoped lang=\"less\">\n.wrapper{\n  width: 400px;\n  padding: 20px;\n  border: 1px solid var(~'--color-border');\n  border-radius: 4px;\n}\n</style>\n```\n"
  },
  {
    "path": "packages/web-vue/components/button/__demo__/shape.md",
    "content": "```yaml\ntitle:\n  zh-CN: 按钮形状\n  en-US: Button Shape\n```\n\n## zh-CN\n\n按钮分为 `square` - **长方形（默认）**、`circle` - **圆形**、`round` - **全圆角**三种形状。\n\n---\n\n## en-US\n\nButton is divided into three shapes: `square` - **rectangular (default)**, `circle` - **circle**, and `round` - **full rounded corner**.\n\n---\n\n```vue\n<template>\n  <a-space>\n    <a-button type=\"primary\">Square</a-button>\n    <a-button type=\"primary\" shape=\"round\">Round</a-button>\n    <a-button type=\"primary\">\n      <template #icon>\n        <icon-plus />\n      </template>\n    </a-button>\n    <a-button type=\"primary\" shape=\"circle\">\n      <icon-plus />\n    </a-button>\n  </a-space>\n</template>\n<script>\nimport { IconPlus } from '@arco-design/web-vue/es/icon';\n\nexport default {\n  components: { IconPlus }\n};\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/button/__demo__/size.md",
    "content": "```yaml\ntitle:\n  zh-CN: 按钮尺寸\n  en-US: Button Size\n```\n\n## zh-CN\n\n按钮分为 `mini`、`small`、`medium`、`large` 四种尺寸。高度分别为：`24px`、`28px`、`32px`、`36px`。推荐（默认）尺寸为 `medium`。可在不同场景及不同业务需求选择适合尺寸。\n\n---\n\n## en-US\n\nButton is divided into four sizes: `mini`, `small`, `medium`, and `large`. The heights are: `24px`, `28px`, `32px`, `36px`. The recommended (default) size is `medium`. The suitable size can be selected in different scenarios and different business needs.\n\n---\n\n```vue\n<template>\n  <a-space>\n    <a-button type=\"primary\" size=\"mini\">Mini</a-button>\n    <a-button type=\"primary\" size=\"small\">Small</a-button>\n    <a-button type=\"primary\">Medium</a-button>\n    <a-button type=\"primary\" size=\"large\">Large</a-button>\n  </a-space>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/button/__demo__/status.md",
    "content": "```yaml\ntitle:\n  zh-CN: 按钮状态\n  en-US: Button Status\n```\n\n## zh-CN\n\n按钮的状态分为 `normal` - **正常（默认）**、`success` - **成功**、`warning` - **警告**、`danger` - **危险**四种，可以与按钮类型同时使用。\n\n---\n\n## en-US\n\nThe state of button is divided into four types: `normal` - **normal (default)**, `success` - **success**, `warning` - **warning**, `danger` - **danger**, Can be used simultaneously with the button type.\n\n---\n\n```vue\n<template>\n  <a-space direction=\"vertical\">\n    <a-space>\n      <a-button type=\"primary\" status=\"success\">Primary</a-button>\n      <a-button status=\"success\">Default</a-button>\n      <a-button type=\"dashed\" status=\"success\">Dashed</a-button>\n      <a-button type=\"outline\" status=\"success\">Outline</a-button>\n      <a-button type=\"text\" status=\"success\">Text</a-button>\n    </a-space>\n    <a-space>\n      <a-button type=\"primary\" status=\"warning\">Primary</a-button>\n      <a-button status=\"warning\">Default</a-button>\n      <a-button type=\"dashed\" status=\"warning\">Dashed</a-button>\n      <a-button type=\"outline\" status=\"warning\">Outline</a-button>\n      <a-button type=\"text\" status=\"warning\">Text</a-button>\n    </a-space>\n    <a-space>\n      <a-button type=\"primary\" status=\"danger\">Primary</a-button>\n      <a-button status=\"danger\">Default</a-button>\n      <a-button type=\"dashed\" status=\"danger\">Dashed</a-button>\n      <a-button type=\"outline\" status=\"danger\">Outline</a-button>\n      <a-button type=\"text\" status=\"danger\">Text</a-button>\n    </a-space>\n  </a-space>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/button/__test__/__snapshots__/demo.test.ts.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`<button> demo: render [basic] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 8px; row-gap: 8px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n      <!--v-if-->Primary\n    </button></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n      <!--v-if-->Secondary\n    </button></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-dashed arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n      <!--v-if-->Dashed\n    </button></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-outline arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n      <!--v-if-->Outline\n    </button></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-text arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n      <!--v-if-->Text\n    </button></div>\n</div>\"\n`;\n\nexports[`<button> demo: render [disabled] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-vertical\\\\\" style=\\\\\"column-gap: 8px; row-gap: 8px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 8px; row-gap: 8px;\\\\\">\n      <!---->\n      <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal arco-btn-disabled\\\\\" type=\\\\\"button\\\\\" disabled=\\\\\"\\\\\">\n          <!--v-if-->Primary\n        </button></div>\n      <!---->\n      <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal arco-btn-disabled\\\\\" type=\\\\\"button\\\\\" disabled=\\\\\"\\\\\">\n          <!--v-if-->Default\n        </button></div>\n      <!---->\n      <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-dashed arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal arco-btn-disabled\\\\\" type=\\\\\"button\\\\\" disabled=\\\\\"\\\\\">\n          <!--v-if-->Dashed\n        </button></div>\n      <!---->\n      <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-outline arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal arco-btn-disabled\\\\\" type=\\\\\"button\\\\\" disabled=\\\\\"\\\\\">\n          <!--v-if-->Outline\n        </button></div>\n      <!---->\n      <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-text arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal arco-btn-disabled\\\\\" type=\\\\\"button\\\\\" disabled=\\\\\"\\\\\">\n          <!--v-if-->Text\n        </button></div>\n    </div>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 8px; row-gap: 8px;\\\\\">\n      <!---->\n      <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-success arco-btn-disabled\\\\\" type=\\\\\"button\\\\\" disabled=\\\\\"\\\\\">\n          <!--v-if-->Primary\n        </button></div>\n      <!---->\n      <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-success arco-btn-disabled\\\\\" type=\\\\\"button\\\\\" disabled=\\\\\"\\\\\">\n          <!--v-if-->Default\n        </button></div>\n      <!---->\n      <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-dashed arco-btn-shape-square arco-btn-size-medium arco-btn-status-success arco-btn-disabled\\\\\" type=\\\\\"button\\\\\" disabled=\\\\\"\\\\\">\n          <!--v-if-->Dashed\n        </button></div>\n      <!---->\n      <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-outline arco-btn-shape-square arco-btn-size-medium arco-btn-status-success arco-btn-disabled\\\\\" type=\\\\\"button\\\\\" disabled=\\\\\"\\\\\">\n          <!--v-if-->Outline\n        </button></div>\n      <!---->\n      <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-text arco-btn-shape-square arco-btn-size-medium arco-btn-status-success arco-btn-disabled\\\\\" type=\\\\\"button\\\\\" disabled=\\\\\"\\\\\">\n          <!--v-if-->Text\n        </button></div>\n    </div>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 8px; row-gap: 8px;\\\\\">\n      <!---->\n      <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-warning arco-btn-disabled\\\\\" type=\\\\\"button\\\\\" disabled=\\\\\"\\\\\">\n          <!--v-if-->Primary\n        </button></div>\n      <!---->\n      <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-warning arco-btn-disabled\\\\\" type=\\\\\"button\\\\\" disabled=\\\\\"\\\\\">\n          <!--v-if-->Default\n        </button></div>\n      <!---->\n      <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-dashed arco-btn-shape-square arco-btn-size-medium arco-btn-status-warning arco-btn-disabled\\\\\" type=\\\\\"button\\\\\" disabled=\\\\\"\\\\\">\n          <!--v-if-->Dashed\n        </button></div>\n      <!---->\n      <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-outline arco-btn-shape-square arco-btn-size-medium arco-btn-status-warning arco-btn-disabled\\\\\" type=\\\\\"button\\\\\" disabled=\\\\\"\\\\\">\n          <!--v-if-->Outline\n        </button></div>\n      <!---->\n      <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-text arco-btn-shape-square arco-btn-size-medium arco-btn-status-warning arco-btn-disabled\\\\\" type=\\\\\"button\\\\\" disabled=\\\\\"\\\\\">\n          <!--v-if-->Text\n        </button></div>\n    </div>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 8px; row-gap: 8px;\\\\\">\n      <!---->\n      <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-danger arco-btn-disabled\\\\\" type=\\\\\"button\\\\\" disabled=\\\\\"\\\\\">\n          <!--v-if-->Primary\n        </button></div>\n      <!---->\n      <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-danger arco-btn-disabled\\\\\" type=\\\\\"button\\\\\" disabled=\\\\\"\\\\\">\n          <!--v-if-->Default\n        </button></div>\n      <!---->\n      <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-dashed arco-btn-shape-square arco-btn-size-medium arco-btn-status-danger arco-btn-disabled\\\\\" type=\\\\\"button\\\\\" disabled=\\\\\"\\\\\">\n          <!--v-if-->Dashed\n        </button></div>\n      <!---->\n      <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-outline arco-btn-shape-square arco-btn-size-medium arco-btn-status-danger arco-btn-disabled\\\\\" type=\\\\\"button\\\\\" disabled=\\\\\"\\\\\">\n          <!--v-if-->Outline\n        </button></div>\n      <!---->\n      <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-text arco-btn-shape-square arco-btn-size-medium arco-btn-status-danger arco-btn-disabled\\\\\" type=\\\\\"button\\\\\" disabled=\\\\\"\\\\\">\n          <!--v-if-->Text\n        </button></div>\n    </div>\n  </div>\n</div>\"\n`;\n\nexports[`<button> demo: render [group] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-vertical\\\\\" style=\\\\\"column-gap: 8px; row-gap: 8px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-btn-group\\\\\"><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n        <!--v-if-->Publish\n      </button><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal arco-btn-only-icon\\\\\" type=\\\\\"button\\\\\"><span class=\\\\\"arco-btn-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span></button></div>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-btn-group\\\\\"><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n        <!--v-if-->Publish\n      </button><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal arco-btn-only-icon\\\\\" type=\\\\\"button\\\\\"><span class=\\\\\"arco-btn-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-more\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M38 25v-2h2v2h-2ZM23 25v-2h2v2h-2ZM8 25v-2h2v2H8Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path><path d=\\\\\"M38 25v-2h2v2h-2ZM23 25v-2h2v2h-2ZM8 25v-2h2v2H8Z\\\\\"></path></svg></span></button></div>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-btn-group\\\\\"><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n        <!--v-if--><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-left\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n          <path d=\\\\\"M32 8.4 16.444 23.956 32 39.513\\\\\"></path>\n        </svg> Prev\n      </button><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n        <!--v-if--> Next <svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-right\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n          <path d=\\\\\"m16 39.513 15.556-15.557L16 8.4\\\\\"></path>\n        </svg>\n      </button></div>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 24px; row-gap: 24px;\\\\\">\n      <!---->\n      <div class=\\\\\"arco-space-item\\\\\">\n        <div class=\\\\\"arco-btn-group\\\\\"><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n            <!--v-if--> copy\n          </button><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n            <!--v-if--> cut\n          </button><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n            <!--v-if--> find\n          </button></div>\n      </div>\n      <!---->\n      <div class=\\\\\"arco-space-item\\\\\">\n        <div class=\\\\\"arco-btn-group\\\\\"><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-warning arco-btn-only-icon\\\\\" type=\\\\\"button\\\\\"><span class=\\\\\"arco-btn-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-heart-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M24 10.541c4.35-4.522 11.405-4.814 15.756-.292 4.35 4.522 4.15 11.365.448 17.135C36.153 33.7 28 41.5 24 42c-4-.5-12.152-8.3-16.204-14.616-3.702-5.77-3.902-12.613.448-17.135C12.595 5.727 19.65 6.019 24 10.54Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path></svg></span></button><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-warning arco-btn-only-icon\\\\\" type=\\\\\"button\\\\\"><span class=\\\\\"arco-btn-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-star-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M22.683 5.415c.568-1.043 2.065-1.043 2.634 0l5.507 10.098a1.5 1.5 0 0 0 1.04.756l11.306 2.117c1.168.219 1.63 1.642.814 2.505l-7.902 8.359a1.5 1.5 0 0 0-.397 1.223l1.48 11.407c.153 1.177-1.058 2.057-2.131 1.548l-10.391-4.933a1.5 1.5 0 0 0-1.287 0l-10.39 4.933c-1.073.51-2.284-.37-2.131-1.548l1.48-11.407a1.5 1.5 0 0 0-.398-1.223L4.015 20.89c-.816-.863-.353-2.286.814-2.505l11.306-2.117a1.5 1.5 0 0 0 1.04-.756l5.508-10.098Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path></svg></span></button><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-warning arco-btn-only-icon\\\\\" type=\\\\\"button\\\\\"><span class=\\\\\"arco-btn-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-thumb-up-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path fill-rule=\\\\\"evenodd\\\\\" clip-rule=\\\\\"evenodd\\\\\" d=\\\\\"M5 43V17h4v26H5Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path><path d=\\\\\"M27.1 4.463a2 2 0 0 0-2.83.364L15.036 17H12v26h23.576a2 2 0 0 0 1.89-1.346l5.697-19.346c.899-2.598-1.03-5.308-3.78-5.308h-10.57l2.422-5.448a4 4 0 0 0-1.184-4.77L27.1 4.462Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path></svg></span></button></div>\n      </div>\n      <!---->\n      <div class=\\\\\"arco-space-item\\\\\">\n        <div class=\\\\\"arco-btn-group\\\\\"><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-small arco-btn-status-normal arco-btn-disabled\\\\\" type=\\\\\"button\\\\\" disabled=\\\\\"\\\\\">\n            <!--v-if--> prev\n          </button><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-small arco-btn-status-normal arco-btn-disabled\\\\\" type=\\\\\"button\\\\\" disabled=\\\\\"\\\\\">\n            <!--v-if--> next\n          </button></div>\n      </div>\n    </div>\n  </div>\n</div>\"\n`;\n\nexports[`<button> demo: render [icon] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 8px; row-gap: 8px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal arco-btn-only-icon\\\\\" type=\\\\\"button\\\\\"><span class=\\\\\"arco-btn-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-plus\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M5 24h38M24 5v38\\\\\"></path></svg></span></button></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\"><span class=\\\\\"arco-btn-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-delete\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M5 11h5.5m0 0v29a1 1 0 0 0 1 1h25a1 1 0 0 0 1-1V11m-27 0H16m21.5 0H43m-5.5 0H32m-16 0V7h16v4m-16 0h16M20 18v15m8-15v15\\\\\"></path></svg></span>Delete</button></div>\n</div>\"\n`;\n\nexports[`<button> demo: render [loading] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 8px; row-gap: 8px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal arco-btn-loading\\\\\" type=\\\\\"button\\\\\"><span class=\\\\\"arco-btn-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-loading arco-icon-spin\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M42 24c0 9.941-8.059 18-18 18S6 33.941 6 24 14.059 6 24 6\\\\\"></path></svg></span>Primary</button></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal arco-btn-loading\\\\\" type=\\\\\"button\\\\\"><span class=\\\\\"arco-btn-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-loading arco-icon-spin\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M42 24c0 9.941-8.059 18-18 18S6 33.941 6 24 14.059 6 24 6\\\\\"></path></svg></span>Default</button></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-dashed arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal arco-btn-loading\\\\\" type=\\\\\"button\\\\\"><span class=\\\\\"arco-btn-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-loading arco-icon-spin\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M42 24c0 9.941-8.059 18-18 18S6 33.941 6 24 14.059 6 24 6\\\\\"></path></svg></span>Dashed</button></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n      <!--v-if-->Click Me\n    </button></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\"><span class=\\\\\"arco-btn-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-plus\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M5 24h38M24 5v38\\\\\"></path></svg></span> Click Me </button></div>\n</div>\"\n`;\n\nexports[`<button> demo: render [long] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-vertical wrapper\\\\\" style=\\\\\"column-gap: 8px; row-gap: 8px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal arco-btn-long\\\\\" type=\\\\\"button\\\\\">\n      <!--v-if-->Primary\n    </button></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal arco-btn-long\\\\\" type=\\\\\"button\\\\\">\n      <!--v-if-->Default\n    </button></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-dashed arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal arco-btn-long\\\\\" type=\\\\\"button\\\\\">\n      <!--v-if-->Dashed\n    </button></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-outline arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal arco-btn-long\\\\\" type=\\\\\"button\\\\\">\n      <!--v-if-->Outline\n    </button></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-text arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal arco-btn-long\\\\\" type=\\\\\"button\\\\\">\n      <!--v-if-->Text\n    </button></div>\n</div>\"\n`;\n\nexports[`<button> demo: render [shape] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 8px; row-gap: 8px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n      <!--v-if-->Square\n    </button></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-round arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n      <!--v-if-->Round\n    </button></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal arco-btn-only-icon\\\\\" type=\\\\\"button\\\\\"><span class=\\\\\"arco-btn-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-plus\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M5 24h38M24 5v38\\\\\"></path></svg></span></button></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-circle arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n      <!--v-if--><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-plus\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n        <path d=\\\\\"M5 24h38M24 5v38\\\\\"></path>\n      </svg>\n    </button></div>\n</div>\"\n`;\n\nexports[`<button> demo: render [size] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 8px; row-gap: 8px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-mini arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n      <!--v-if-->Mini\n    </button></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-small arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n      <!--v-if-->Small\n    </button></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n      <!--v-if-->Medium\n    </button></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-large arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n      <!--v-if-->Large\n    </button></div>\n</div>\"\n`;\n\nexports[`<button> demo: render [status] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-vertical\\\\\" style=\\\\\"column-gap: 8px; row-gap: 8px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 8px; row-gap: 8px;\\\\\">\n      <!---->\n      <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-success\\\\\" type=\\\\\"button\\\\\">\n          <!--v-if-->Primary\n        </button></div>\n      <!---->\n      <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-success\\\\\" type=\\\\\"button\\\\\">\n          <!--v-if-->Default\n        </button></div>\n      <!---->\n      <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-dashed arco-btn-shape-square arco-btn-size-medium arco-btn-status-success\\\\\" type=\\\\\"button\\\\\">\n          <!--v-if-->Dashed\n        </button></div>\n      <!---->\n      <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-outline arco-btn-shape-square arco-btn-size-medium arco-btn-status-success\\\\\" type=\\\\\"button\\\\\">\n          <!--v-if-->Outline\n        </button></div>\n      <!---->\n      <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-text arco-btn-shape-square arco-btn-size-medium arco-btn-status-success\\\\\" type=\\\\\"button\\\\\">\n          <!--v-if-->Text\n        </button></div>\n    </div>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 8px; row-gap: 8px;\\\\\">\n      <!---->\n      <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-warning\\\\\" type=\\\\\"button\\\\\">\n          <!--v-if-->Primary\n        </button></div>\n      <!---->\n      <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-warning\\\\\" type=\\\\\"button\\\\\">\n          <!--v-if-->Default\n        </button></div>\n      <!---->\n      <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-dashed arco-btn-shape-square arco-btn-size-medium arco-btn-status-warning\\\\\" type=\\\\\"button\\\\\">\n          <!--v-if-->Dashed\n        </button></div>\n      <!---->\n      <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-outline arco-btn-shape-square arco-btn-size-medium arco-btn-status-warning\\\\\" type=\\\\\"button\\\\\">\n          <!--v-if-->Outline\n        </button></div>\n      <!---->\n      <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-text arco-btn-shape-square arco-btn-size-medium arco-btn-status-warning\\\\\" type=\\\\\"button\\\\\">\n          <!--v-if-->Text\n        </button></div>\n    </div>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 8px; row-gap: 8px;\\\\\">\n      <!---->\n      <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-danger\\\\\" type=\\\\\"button\\\\\">\n          <!--v-if-->Primary\n        </button></div>\n      <!---->\n      <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-danger\\\\\" type=\\\\\"button\\\\\">\n          <!--v-if-->Default\n        </button></div>\n      <!---->\n      <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-dashed arco-btn-shape-square arco-btn-size-medium arco-btn-status-danger\\\\\" type=\\\\\"button\\\\\">\n          <!--v-if-->Dashed\n        </button></div>\n      <!---->\n      <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-outline arco-btn-shape-square arco-btn-size-medium arco-btn-status-danger\\\\\" type=\\\\\"button\\\\\">\n          <!--v-if-->Outline\n        </button></div>\n      <!---->\n      <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-text arco-btn-shape-square arco-btn-size-medium arco-btn-status-danger\\\\\" type=\\\\\"button\\\\\">\n          <!--v-if-->Text\n        </button></div>\n    </div>\n  </div>\n</div>\"\n`;\n"
  },
  {
    "path": "packages/web-vue/components/button/__test__/demo.test.ts",
    "content": "import demoTest from '../../../scripts/demo-test';\n\ndemoTest('button');\n"
  },
  {
    "path": "packages/web-vue/components/button/__test__/index.test.ts",
    "content": "import { mount } from '@vue/test-utils';\nimport Button from '../index';\n\ndescribe('Button', () => {\n  test('should emit click event', () => {\n    const wrapper = mount(Button);\n    wrapper.find('button').trigger('click');\n\n    expect(wrapper.emitted('click')).toHaveLength(1);\n  });\n\n  test('should not emit click event when disabled', () => {\n    const wrapper = mount(Button, {\n      props: {\n        disabled: true,\n      },\n    });\n    wrapper.find('button').trigger('click');\n\n    expect(wrapper.emitted('click')).toBeUndefined();\n  });\n});\n"
  },
  {
    "path": "packages/web-vue/components/button/button-group.vue",
    "content": "<template>\n  <div :class=\"prefixCls\">\n    <slot />\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, PropType, provide, reactive, toRefs } from 'vue';\nimport { Status, Size, BorderShape } from '../_utils/constant';\nimport { ButtonTypes } from './constants';\nimport { getPrefixCls } from '../_utils/global-config';\nimport { buttonGroupInjectionKey } from './context';\n\nexport default defineComponent({\n  name: 'ButtonGroup',\n  props: {\n    /**\n     * @zh 按钮的类型，分为五种：次要按钮、主要按钮、虚框按钮、线性按钮、文字按钮。\n     * @en Children button types are divided into five types: secondary, primary, dashed, outline and text.\n     */\n    type: {\n      type: String as PropType<ButtonTypes>,\n    },\n    /**\n     * @zh 按钮的状态\n     * @en Children button state\n     * @values 'normal','warning','success','danger'\n     */\n    status: {\n      type: String as PropType<Status>,\n    },\n    /**\n     * @zh 按钮的形状\n     * @en Button shape\n     */\n    shape: {\n      type: String as PropType<BorderShape>,\n    },\n    /**\n     * @zh 按钮的尺寸\n     * @en Children button size\n     * @values 'mini','small','medium','large'\n     */\n    size: {\n      type: String as PropType<Size>,\n    },\n    /**\n     * @zh 全部子按钮是否禁用\n     * @en All children whether the button is disabled\n     */\n    disabled: {\n      type: Boolean,\n    },\n  },\n  setup(props) {\n    const { type, size, status, disabled, shape } = toRefs(props);\n    const prefixCls = getPrefixCls('btn-group');\n\n    provide(\n      buttonGroupInjectionKey,\n      reactive({\n        type,\n        size,\n        shape,\n        status,\n        disabled,\n      })\n    );\n\n    return {\n      prefixCls,\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/button/button.vue",
    "content": "<template>\n  <template v-if=\"href\">\n    <a\n      :class=\"[\n        cls,\n        { [`${prefixCls}-only-icon`]: $slots.icon && !$slots.default },\n      ]\"\n      :href=\"mergedDisabled || loading ? undefined : href\"\n      @click=\"handleClick\"\n    >\n      <span v-if=\"loading || $slots.icon\" :class=\"`${prefixCls}-icon`\">\n        <icon-loading v-if=\"loading\" spin />\n        <slot v-else name=\"icon\" />\n      </span>\n      <slot />\n    </a>\n  </template>\n  <template v-else>\n    <button\n      :class=\"[\n        cls,\n        { [`${prefixCls}-only-icon`]: $slots.icon && !$slots.default },\n      ]\"\n      :type=\"htmlType\"\n      :disabled=\"mergedDisabled\"\n      :autofocus=\"autofocus\"\n      @click=\"handleClick\"\n    >\n      <span v-if=\"loading || $slots.icon\" :class=\"`${prefixCls}-icon`\">\n        <icon-loading v-if=\"loading\" :spin=\"true\" />\n        <slot v-else name=\"icon\" />\n      </span>\n      <slot />\n    </button>\n  </template>\n</template>\n\n<script lang=\"ts\">\n/**\n * @todo 添加loadingFixedWidth\n * @todo 添加twoChineseChars\n */\nimport type { PropType } from 'vue';\nimport { defineComponent, computed, toRefs, inject } from 'vue';\nimport { Status, Size, BorderShape } from '../_utils/constant';\nimport { ButtonTypes } from './constants';\nimport { getPrefixCls } from '../_utils/global-config';\nimport { isString } from '../_utils/is';\nimport IconLoading from '../icon/icon-loading';\nimport { useSize } from '../_hooks/use-size';\nimport { useFormItem } from '../_hooks/use-form-item';\nimport { buttonGroupInjectionKey } from './context';\n\nexport default defineComponent({\n  name: 'Button',\n  components: {\n    IconLoading,\n  },\n  props: {\n    /**\n     * @zh 按钮的类型，分为五种：次要按钮、主要按钮、虚框按钮、线性按钮、文字按钮。\n     * @en Button types are divided into five types: secondary, primary, dashed, outline and text.\n     * @defaultValue 'secondary'\n     */\n    type: {\n      type: String as PropType<ButtonTypes>,\n    },\n    /**\n     * @zh 按钮的形状\n     * @en Button shape\n     */\n    shape: {\n      type: String as PropType<BorderShape>,\n    },\n    /**\n     * @zh 按钮的状态\n     * @en Button state\n     * @values 'normal','warning','success','danger'\n     * @defaultValue 'normal'\n     */\n    status: {\n      type: String as PropType<Status>,\n    },\n    /**\n     * @zh 按钮的尺寸\n     * @en Button size\n     * @values 'mini','small','medium','large'\n     * @defaultValue 'medium'\n     */\n    size: {\n      type: String as PropType<Size>,\n    },\n    /**\n     * @zh 按钮的宽度是否随容器自适应。\n     * @en Whether the width of the button adapts to the container.\n     */\n    long: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 按钮是否为加载中状态\n     * @en Whether the button is in the loading state\n     */\n    loading: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 按钮是否禁用\n     * @en Whether the button is disabled\n     * @defaultValue false\n     */\n    disabled: {\n      type: Boolean,\n    },\n    /**\n     * @zh 设置 `button` 的原生 `type` 属性，可选值参考 [HTML标准](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type \"_blank\")\n     * @en Set the native `type` attribute of `button`, optional values refer to [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type \"_blank\")\n     */\n    htmlType: {\n      type: String as PropType<HTMLButtonElement['type']>,\n      default: 'button',\n    },\n    /**\n     * @zh 设置 `button` 的原生 `autofocus` 属性，可选值参考 [HTML标准](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type \"_blank\")\n     * @en Set the native `autofocus` attribute of `button`, optional values refer to [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type \"_blank\")\n     */\n    autofocus: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 设置跳转链接。设置此属性时，按钮渲染为a标签。\n     * @en Set up a jump link. When this property is set, the button is rendered as `<a>`\n     */\n    href: String,\n  },\n  emits: {\n    /**\n     * @zh 点击按钮时触发\n     * @en Emitted when the button is clicked\n     * @property {MouseEvent} ev\n     */\n    click: (ev: MouseEvent) => true,\n  },\n  /**\n   * @zh 图标\n   * @en Icon\n   * @slot icon\n   */\n  setup(props, { emit }) {\n    const { size, disabled } = toRefs(props);\n    const prefixCls = getPrefixCls('btn');\n    const groupContext = inject(buttonGroupInjectionKey, undefined);\n    const _size = computed(() => size.value ?? groupContext?.size);\n    const _disabled = computed(() =>\n      Boolean(disabled.value || groupContext?.disabled)\n    );\n    const { mergedSize: _mergedSize, mergedDisabled } = useFormItem({\n      size: _size,\n      disabled: _disabled,\n    });\n    const { mergedSize } = useSize(_mergedSize);\n\n    const cls = computed(() => [\n      prefixCls,\n      `${prefixCls}-${props.type ?? groupContext?.type ?? 'secondary'}`,\n      `${prefixCls}-shape-${props.shape ?? groupContext?.shape ?? 'square'}`,\n      `${prefixCls}-size-${mergedSize.value}`,\n      `${prefixCls}-status-${props.status ?? groupContext?.status ?? 'normal'}`,\n      {\n        [`${prefixCls}-long`]: props.long,\n        [`${prefixCls}-loading`]: props.loading,\n        [`${prefixCls}-disabled`]: mergedDisabled.value,\n        [`${prefixCls}-link`]: isString(props.href),\n      },\n    ]);\n\n    const handleClick = (ev: MouseEvent) => {\n      if (props.disabled || props.loading) {\n        ev.preventDefault();\n        return;\n      }\n      emit('click', ev);\n    };\n\n    return {\n      prefixCls,\n      cls,\n      mergedDisabled,\n      handleClick,\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/button/constants.ts",
    "content": "export const BUTTON_TYPES = [\n  'primary',\n  'secondary',\n  'outline',\n  'dashed',\n  'text',\n] as const;\nexport type ButtonTypes = typeof BUTTON_TYPES[number];\n"
  },
  {
    "path": "packages/web-vue/components/button/context.ts",
    "content": "import { InjectionKey } from 'vue';\nimport { Size, Status } from '../_utils/constant';\nimport { ButtonTypes } from './constants';\n\nexport interface ButtonGroupContext {\n  size: Size | undefined;\n  status: Status | undefined;\n  type: ButtonTypes | undefined;\n  disabled: boolean;\n  shape: 'square' | 'round' | 'circle' | undefined;\n}\n\nexport const buttonGroupInjectionKey: InjectionKey<ButtonGroupContext> =\n  Symbol('ArcoButtonGroup');\n"
  },
  {
    "path": "packages/web-vue/components/button/index.ts",
    "content": "import type { App } from 'vue';\nimport type { ArcoOptions } from '../_utils/types';\nimport { setGlobalConfig, getComponentPrefix } from '../_utils/global-config';\nimport _Button from './button.vue';\nimport _ButtonGroup from './button-group.vue';\n\nconst Button = Object.assign(_Button, {\n  Group: _ButtonGroup,\n  install: (app: App, options?: ArcoOptions) => {\n    setGlobalConfig(app, options);\n    const componentPrefix = getComponentPrefix(options);\n\n    app.component(componentPrefix + _Button.name, _Button);\n    app.component(componentPrefix + _ButtonGroup.name, _ButtonGroup);\n  },\n});\n\nexport type ButtonInstance = InstanceType<typeof _Button>;\nexport type ButtonGroupInstance = InstanceType<typeof _ButtonGroup>;\nexport type { ButtonProps } from './interface';\n\nexport { _ButtonGroup as ButtonGroup };\n\nexport default Button;\n"
  },
  {
    "path": "packages/web-vue/components/button/interface.ts",
    "content": "import { Size, Status, BorderShape } from '../_utils/constant';\nimport { ButtonTypes } from './constants';\n\nexport interface ButtonProps {\n  type?: ButtonTypes;\n  shape?: BorderShape;\n  status?: Status;\n  size?: Size;\n  long?: boolean;\n  loading?: boolean;\n  disabled?: boolean;\n  htmlType?: string;\n  autofocus?: boolean;\n  href?: string;\n}\n"
  },
  {
    "path": "packages/web-vue/components/button/style/index.less",
    "content": "@import './token.less';\n\n@btn-prefix-cls: ~'@{prefix}-btn';\n\n.@{btn-prefix-cls} {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  font-weight: @btn-font-weight;\n  line-height: @line-height-base;\n  white-space: nowrap;\n  outline: none;\n  cursor: pointer;\n  transition: all @transition-duration-1 @transition-timing-function-linear;\n  -webkit-appearance: none;\n  user-select: none;\n\n  > a:only-child {\n    color: currentColor;\n  }\n\n  &:active {\n    transition: none;\n  }\n\n  &-long {\n    display: flex;\n    width: 100%;\n  }\n\n  &-link {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    text-decoration: none;\n\n    &:not([href]) {\n      color: var(~'@{arco-cssvars-prefix}-color-text-4');\n    }\n\n    &:hover {\n      text-decoration: none;\n    }\n\n    &.@{btn-prefix-cls}-only-icon {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      vertical-align: top;\n    }\n  }\n\n  &.@{btn-prefix-cls}-only-icon .@{btn-prefix-cls}-icon {\n    display: flex;\n    justify-content: center;\n  }\n\n  &-loading {\n    position: relative;\n    cursor: default;\n\n    &::before {\n      position: absolute;\n      top: -1px;\n      right: -1px;\n      bottom: -1px;\n      left: -1px;\n      z-index: 1;\n      display: block;\n      background: #fff;\n      border-radius: inherit;\n      opacity: 0.4;\n      transition: opacity @transition-duration-1\n        @transition-timing-function-linear;\n      content: '';\n      pointer-events: none;\n    }\n  }\n\n  &-loading-fixed-width {\n    transition: none;\n  }\n\n  &-two-chinese-chars > *:not(svg) {\n    margin-right: -0.3em;\n    letter-spacing: 0.3em;\n  }\n}\n\n.btn-type(@type) {\n  .normal() {\n    color: ~'@{btn-@{type}-color-text}';\n    background-color: ~'@{btn-@{type}-color-bg}';\n    border: @btn-size-default-border-width ~'@{btn-@{type}-border-style}' ~'@{btn-@{type}-color-border}';\n  }\n\n  .@{btn-prefix-cls}-@{type},\n  .@{btn-prefix-cls}-@{type}[type='button'],\n  .@{btn-prefix-cls}-@{type}[type='submit'] {\n    .normal();\n\n    &:hover {\n      color: ~'@{btn-@{type}-color-text_hover}';\n      background-color: ~'@{btn-@{type}-color-bg_hover}';\n      border-color: ~'@{btn-@{type}-color-border_hover}';\n    }\n\n    &:focus-visible {\n      box-shadow: 0 0 0 @btn-box-shadow-radius ~'@{btn-@{type}-color-box-shadow}';\n    }\n\n    &:active {\n      color: ~'@{btn-@{type}-color-text_active}';\n      background-color: ~'@{btn-@{type}-color-bg_active}';\n      border-color: ~'@{btn-@{type}-color-border_active}';\n    }\n\n    &.@{btn-prefix-cls}-loading {\n      .normal();\n    }\n\n    &.@{btn-prefix-cls}-disabled {\n      color: ~'@{btn-@{type}-color-text_disabled}';\n      background-color: ~'@{btn-@{type}-color-bg_disabled}';\n      border: @btn-size-default-border-width ~'@{btn-@{type}-border-style}' ~'@{btn-@{type}-color-border_disabled}';\n      cursor: not-allowed;\n    }\n  }\n}\n\n.btn-status(@type, @status) {\n  .normal() {\n    color: ~'@{btn-@{type}-color-text_@{status}}';\n    background-color: ~'@{btn-@{type}-color-bg_@{status}}';\n    border-color: ~'@{btn-@{type}-color-border_@{status}}';\n  }\n\n  .@{btn-prefix-cls}-@{type}.@{btn-prefix-cls}-status-@{status} {\n    .normal();\n\n    &:hover {\n      color: ~'@{btn-@{type}-color-text_@{status}_hover}';\n      background-color: ~'@{btn-@{type}-color-bg_@{status}_hover}';\n      border-color: ~'@{btn-@{type}-color-border_@{status}_hover}';\n    }\n\n    &:focus-visible {\n      box-shadow: 0 0 0 @btn-box-shadow-radius ~'@{btn-color-box-shadow_@{status}}';\n    }\n\n    &:active {\n      color: ~'@{btn-@{type}-color-text_@{status}_active}';\n      background-color: ~'@{btn-@{type}-color-bg_@{status}_active}';\n      border-color: ~'@{btn-@{type}-color-border_@{status}_active}';\n    }\n\n    &.@{btn-prefix-cls}-loading {\n      .normal();\n    }\n\n    &.@{btn-prefix-cls}-disabled {\n      color: ~'@{btn-@{type}-color-text_@{status}_disabled}';\n      background-color: ~'@{btn-@{type}-color-bg_@{status}_disabled}';\n      border: @btn-size-default-border-width ~'@{btn-@{type}-border-style}' ~'@{btn-@{type}-color-border_@{status}_disabled}';\n    }\n  }\n}\n\n.btn-size(@size) {\n  @size-type: ~'size-@{size}';\n  @size-height: ~'btn-size-@{size}-height';\n  @bsp: ~'btn-@{size-type}-padding-horizontal';\n  @bsf: ~'btn-@{size-type}-font-size';\n  @bss: ~'btn-@{size-type}-icon-spacing';\n\n  .@{btn-prefix-cls}-@{size-type} {\n    height: @@size-height;\n    padding: 0 @@bsp;\n    font-size: @@bsf;\n    border-radius: ~'@{btn-@{size-type}-radius}';\n\n    &:not(.@{btn-prefix-cls}-only-icon) .@{btn-prefix-cls}-icon {\n      margin-right: ~'@{btn-@{size-type}-icon-spacing}';\n    }\n\n    svg {\n      vertical-align: ~'@{btn-@{size-type}-icon-vertical-align}';\n    }\n  }\n\n  .@{btn-prefix-cls}-@{size-type}.@{btn-prefix-cls}-loading-fixed-width.@{btn-prefix-cls}-loading {\n    padding-right: @@bsp - ((@@bsf + @@bss) / 2);\n    padding-left: @@bsp - ((@@bsf + @@bss) / 2);\n  }\n\n  .@{btn-prefix-cls}-@{size-type}.@{btn-prefix-cls}-only-icon {\n    width: @@size-type;\n    height: @@size-type;\n    padding: 0;\n  }\n\n  .@{btn-prefix-cls}-@{size-type}.@{btn-prefix-cls}-shape-circle {\n    width: @@size-type;\n    height: @@size-type;\n    padding: 0;\n    text-align: center;\n    border-radius: @radius-circle;\n  }\n\n  .@{btn-prefix-cls}-@{size-type}.@{btn-prefix-cls}-shape-round {\n    border-radius: calc(@@size-type * 0.5);\n  }\n}\n\n.btn-type(outline);\n.btn-status(outline, warning);\n.btn-status(outline, danger);\n.btn-status(outline, success);\n\n.btn-type(primary);\n.btn-status(primary, warning);\n.btn-status(primary, danger);\n.btn-status(primary, success);\n\n.btn-type(secondary);\n.btn-status(secondary, warning);\n.btn-status(secondary, danger);\n.btn-status(secondary, success);\n\n.btn-type(dashed);\n.btn-status(dashed, warning);\n.btn-status(dashed, danger);\n.btn-status(dashed, success);\n\n.btn-type(text);\n.btn-status(text, warning);\n.btn-status(text, danger);\n.btn-status(text, success);\n\n.btn-size(mini);\n.btn-size(small);\n.btn-size(medium);\n.btn-size(large);\n\n// 按钮组样式\n.@{btn-prefix-cls}-group {\n  display: inline-flex;\n  align-items: center;\n\n  .@{btn-prefix-cls}-outline:not(:first-child),\n  .@{btn-prefix-cls}-dashed:not(:first-child) {\n    margin-left: -1px;\n  }\n\n  .@{btn-prefix-cls}-primary:not(:last-child) {\n    border-right: 1px solid @btn-primary-color-bg_hover;\n  }\n\n  .@{btn-prefix-cls}-secondary:not(:last-child) {\n    border-right: 1px solid @btn-secondary-color-bg_hover;\n  }\n\n  .@{btn-prefix-cls}-status-warning:not(:last-child) {\n    border-right: 1px solid @btn-primary-color-bg_warning_hover;\n  }\n\n  .@{btn-prefix-cls}-status-danger:not(:last-child) {\n    border-right: 1px solid @btn-primary-color-bg_danger_hover;\n  }\n\n  .@{btn-prefix-cls}-status-success:not(:last-child) {\n    border-right: 1px solid @btn-primary-color-bg_success_hover;\n  }\n\n  .@{btn-prefix-cls}-outline,\n  .@{btn-prefix-cls}-dashed {\n    &:hover,\n    &:active {\n      z-index: 2;\n    }\n  }\n\n  .@{btn-prefix-cls}:first-child {\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n  }\n\n  .@{btn-prefix-cls}:last-child {\n    border-top-left-radius: 0;\n    border-bottom-left-radius: 0;\n  }\n\n  .@{btn-prefix-cls}:not(:first-child):not(:last-child) {\n    border-radius: 0;\n  }\n}\n\nbody[arco-theme='dark'] {\n  .@{btn-prefix-cls}-primary.@{btn-prefix-cls}-disabled {\n    color: rgba(255, 255, 255, 0.3);\n  }\n}\n"
  },
  {
    "path": "packages/web-vue/components/button/style/index.ts",
    "content": "import '../../style/index.less';\nimport './index.less';\n"
  },
  {
    "path": "packages/web-vue/components/button/style/token.less",
    "content": "@import '../../style/theme/index.less';\n\n@btn-font-weight: @font-weight-400;\n@btn-border-width: @border-1;\n@btn-border-radius: @radius-small;\n\n@btn-size-mini-radius: @btn-border-radius;\n@btn-size-small-radius: @btn-border-radius;\n@btn-size-default-radius: @btn-border-radius;\n@btn-size-large-radius: @btn-border-radius;\n\n@btn-size-mini-height: @size-mini;\n@btn-size-small-height: @size-small;\n@btn-size-default-height: @size-default;\n@btn-size-large-height: @size-large;\n\n@btn-size-mini-border-width: @btn-border-width;\n@btn-size-small-border-width: @btn-border-width;\n@btn-size-default-border-width: @btn-border-width;\n@btn-size-large-border-width: @btn-border-width;\n\n@btn-size-mini-icon-spacing: @spacing-2;\n@btn-size-small-icon-spacing: @spacing-3;\n@btn-size-default-icon-spacing: @spacing-4;\n@btn-size-large-icon-spacing: @spacing-4;\n\n@btn-size-mini-icon-vertical-align: -1px;\n@btn-size-small-icon-vertical-align: -2px;\n@btn-size-default-icon-vertical-align: -2px;\n@btn-size-large-icon-vertical-align: -2px;\n\n@btn-size-mini-padding-horizontal: 11px;\n@btn-size-small-padding-horizontal: 15px;\n@btn-size-default-padding-horizontal: 15px;\n@btn-size-large-padding-horizontal: 19px;\n\n@btn-size-mini-font-size: @font-size-body-1;\n@btn-size-small-font-size: @font-size-body-3;\n@btn-size-default-font-size: @font-size-body-3;\n@btn-size-large-font-size: @font-size-body-3;\n\n/***** Outline *****/\n@btn-outline-color-text: @color-primary-6;\n@btn-outline-color-text_disabled: var(\n  ~'@{arco-cssvars-prefix}-color-primary-light-3'\n);\n@btn-outline-color-text_hover: @color-primary-5;\n@btn-outline-color-text_active: @color-primary-7;\n@btn-outline-color-bg: @color-transparent;\n@btn-outline-color-bg_disabled: @color-transparent;\n@btn-outline-color-bg_hover: @color-transparent;\n@btn-outline-color-bg_active: @color-transparent;\n@btn-outline-color-border: @color-primary-6;\n@btn-outline-color-border_disabled: var(\n  ~'@{arco-cssvars-prefix}-color-primary-light-3'\n);\n@btn-outline-color-border_hover: @color-primary-5;\n@btn-outline-color-border_active: @color-primary-7;\n// status\n@btn-outline-color-text_warning: @color-warning-6;\n@btn-outline-color-text_warning_disabled: var(\n  ~'@{arco-cssvars-prefix}-color-warning-light-3'\n);\n@btn-outline-color-text_warning_hover: @color-warning-5;\n@btn-outline-color-text_warning_active: @color-warning-7;\n@btn-outline-color-bg_warning: @color-transparent;\n@btn-outline-color-bg_warning_disabled: @color-transparent;\n@btn-outline-color-bg_warning_hover: @color-transparent;\n@btn-outline-color-bg_warning_active: @color-transparent;\n@btn-outline-color-border_warning: @color-warning-6;\n@btn-outline-color-border_warning_disabled: var(\n  ~'@{arco-cssvars-prefix}-color-warning-light-3'\n);\n@btn-outline-color-border_warning_hover: @color-warning-5;\n@btn-outline-color-border_warning_active: @color-warning-7;\n\n@btn-outline-color-text_danger: @color-danger-6;\n@btn-outline-color-text_danger_disabled: var(\n  ~'@{arco-cssvars-prefix}-color-danger-light-3'\n);\n@btn-outline-color-text_danger_hover: @color-danger-5;\n@btn-outline-color-text_danger_active: @color-danger-7;\n@btn-outline-color-bg_danger: @color-transparent;\n@btn-outline-color-bg_danger_disabled: @color-transparent;\n@btn-outline-color-bg_danger_hover: @color-transparent;\n@btn-outline-color-bg_danger_active: @color-transparent;\n@btn-outline-color-border_danger: @color-danger-6;\n@btn-outline-color-border_danger_disabled: var(\n  ~'@{arco-cssvars-prefix}-color-danger-light-3'\n);\n@btn-outline-color-border_danger_hover: @color-danger-5;\n@btn-outline-color-border_danger_active: @color-danger-7;\n\n@btn-outline-color-text_success: @color-success-6;\n@btn-outline-color-text_success_disabled: var(\n  ~'@{arco-cssvars-prefix}-color-success-light-3'\n);\n@btn-outline-color-text_success_hover: @color-success-5;\n@btn-outline-color-text_success_active: @color-success-7;\n@btn-outline-color-bg_success: @color-transparent;\n@btn-outline-color-bg_success_disabled: @color-transparent;\n@btn-outline-color-bg_success_hover: @color-transparent;\n@btn-outline-color-bg_success_active: @color-transparent;\n@btn-outline-color-border_success: @color-success-6;\n@btn-outline-color-border_success_disabled: var(\n  ~'@{arco-cssvars-prefix}-color-success-light-3'\n);\n@btn-outline-color-border_success_hover: @color-success-5;\n@btn-outline-color-border_success_active: @color-success-7;\n// border\n@btn-outline-border-style: @border-solid;\n\n/***** Primary *****/\n@btn-primary-color-text: #fff;\n@btn-primary-color-text_disabled: #fff;\n@btn-primary-color-text_hover: #fff;\n@btn-primary-color-text_active: #fff;\n@btn-primary-color-bg: @color-primary-6;\n@btn-primary-color-bg_disabled: var(\n  ~'@{arco-cssvars-prefix}-color-primary-light-3'\n);\n@btn-primary-color-bg_hover: @color-primary-5;\n@btn-primary-color-bg_active: @color-primary-7;\n@btn-primary-color-border: @color-transparent;\n@btn-primary-color-border_disabled: @color-transparent;\n@btn-primary-color-border_hover: @color-transparent;\n@btn-primary-color-border_active: @color-transparent;\n// status\n@btn-primary-color-text_warning: #fff;\n@btn-primary-color-text_warning_disabled: #fff;\n@btn-primary-color-text_warning_hover: #fff;\n@btn-primary-color-text_warning_active: #fff;\n@btn-primary-color-bg_warning: @color-warning-6;\n@btn-primary-color-bg_warning_disabled: var(\n  ~'@{arco-cssvars-prefix}-color-warning-light-3'\n);\n@btn-primary-color-bg_warning_hover: @color-warning-5;\n@btn-primary-color-bg_warning_active: @color-warning-7;\n@btn-primary-color-border_warning: @color-transparent;\n@btn-primary-color-border_warning_disabled: @color-transparent;\n@btn-primary-color-border_warning_hover: @color-transparent;\n@btn-primary-color-border_warning_active: @color-transparent;\n\n@btn-primary-color-text_danger: #fff;\n@btn-primary-color-text_danger_disabled: #fff;\n@btn-primary-color-text_danger_hover: #fff;\n@btn-primary-color-text_danger_active: #fff;\n@btn-primary-color-bg_danger: @color-danger-6;\n@btn-primary-color-bg_danger_disabled: var(\n  ~'@{arco-cssvars-prefix}-color-danger-light-3'\n);\n@btn-primary-color-bg_danger_hover: @color-danger-5;\n@btn-primary-color-bg_danger_active: @color-danger-7;\n@btn-primary-color-border_danger: @color-transparent;\n@btn-primary-color-border_danger_disabled: @color-transparent;\n@btn-primary-color-border_danger_hover: @color-transparent;\n@btn-primary-color-border_danger_active: @color-transparent;\n\n@btn-primary-color-text_success: #fff;\n@btn-primary-color-text_success_disabled: #fff;\n@btn-primary-color-text_success_hover: #fff;\n@btn-primary-color-text_success_active: #fff;\n@btn-primary-color-bg_success: @color-success-6;\n@btn-primary-color-bg_success_disabled: var(\n  ~'@{arco-cssvars-prefix}-color-success-light-3'\n);\n@btn-primary-color-bg_success_hover: @color-success-5;\n@btn-primary-color-bg_success_active: @color-success-7;\n@btn-primary-color-border_success: @color-transparent;\n@btn-primary-color-border_success_disabled: @color-transparent;\n@btn-primary-color-border_success_hover: @color-transparent;\n@btn-primary-color-border_success_active: @color-transparent;\n// border\n@btn-primary-border-style: @border-solid;\n\n/***** Secondary *****/\n@btn-secondary-color-text: var(~'@{arco-cssvars-prefix}-color-text-2');\n@btn-secondary-color-text_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');\n@btn-secondary-color-text_hover: var(~'@{arco-cssvars-prefix}-color-text-2');\n@btn-secondary-color-text_active: var(~'@{arco-cssvars-prefix}-color-text-2');\n@btn-secondary-color-bg: var(~'@{arco-cssvars-prefix}-color-secondary');\n@btn-secondary-color-bg_disabled: var(\n  ~'@{arco-cssvars-prefix}-color-secondary-disabled'\n);\n@btn-secondary-color-bg_hover: var(\n  ~'@{arco-cssvars-prefix}-color-secondary-hover'\n);\n@btn-secondary-color-bg_active: var(\n  ~'@{arco-cssvars-prefix}-color-secondary-active'\n);\n@btn-secondary-color-border: @color-transparent;\n@btn-secondary-color-border_disabled: @color-transparent;\n@btn-secondary-color-border_hover: @color-transparent;\n@btn-secondary-color-border_active: @color-transparent;\n// status\n@btn-secondary-color-text_warning: @color-warning-6;\n@btn-secondary-color-text_warning_disabled: var(\n  ~'@{arco-cssvars-prefix}-color-warning-light-3'\n);\n@btn-secondary-color-text_warning_hover: @color-warning-6;\n@btn-secondary-color-text_warning_active: @color-warning-6;\n@btn-secondary-color-bg_warning: var(\n  ~'@{arco-cssvars-prefix}-color-warning-light-1'\n);\n@btn-secondary-color-bg_warning_disabled: var(\n  ~'@{arco-cssvars-prefix}-color-warning-light-1'\n);\n@btn-secondary-color-bg_warning_hover: var(\n  ~'@{arco-cssvars-prefix}-color-warning-light-2'\n);\n@btn-secondary-color-bg_warning_active: var(\n  ~'@{arco-cssvars-prefix}-color-warning-light-3'\n);\n@btn-secondary-color-border_warning: @color-transparent;\n@btn-secondary-color-border_warning_disabled: @color-transparent;\n@btn-secondary-color-border_warning_hover: @color-transparent;\n@btn-secondary-color-border_warning_active: @color-transparent;\n\n@btn-secondary-color-text_danger: @color-danger-6;\n@btn-secondary-color-text_danger_disabled: var(\n  ~'@{arco-cssvars-prefix}-color-danger-light-3'\n);\n@btn-secondary-color-text_danger_hover: @color-danger-6;\n@btn-secondary-color-text_danger_active: @color-danger-6;\n@btn-secondary-color-bg_danger: var(\n  ~'@{arco-cssvars-prefix}-color-danger-light-1'\n);\n@btn-secondary-color-bg_danger_disabled: var(\n  ~'@{arco-cssvars-prefix}-color-danger-light-1'\n);\n@btn-secondary-color-bg_danger_hover: var(\n  ~'@{arco-cssvars-prefix}-color-danger-light-2'\n);\n@btn-secondary-color-bg_danger_active: var(\n  ~'@{arco-cssvars-prefix}-color-danger-light-3'\n);\n@btn-secondary-color-border_danger: @color-transparent;\n@btn-secondary-color-border_danger_disabled: @color-transparent;\n@btn-secondary-color-border_danger_hover: @color-transparent;\n@btn-secondary-color-border_danger_active: @color-transparent;\n\n@btn-secondary-color-text_success: @color-success-6;\n@btn-secondary-color-text_success_disabled: var(\n  ~'@{arco-cssvars-prefix}-color-success-light-3'\n);\n@btn-secondary-color-text_success_hover: @color-success-6;\n@btn-secondary-color-text_success_active: @color-success-6;\n@btn-secondary-color-bg_success: var(\n  ~'@{arco-cssvars-prefix}-color-success-light-1'\n);\n@btn-secondary-color-bg_success_disabled: var(\n  ~'@{arco-cssvars-prefix}-color-success-light-1'\n);\n@btn-secondary-color-bg_success_hover: var(\n  ~'@{arco-cssvars-prefix}-color-success-light-2'\n);\n@btn-secondary-color-bg_success_active: var(\n  ~'@{arco-cssvars-prefix}-color-success-light-3'\n);\n@btn-secondary-color-border_success: @color-transparent;\n@btn-secondary-color-border_success_disabled: @color-transparent;\n@btn-secondary-color-border_success_hover: @color-transparent;\n@btn-secondary-color-border_success_active: @color-transparent;\n// border\n@btn-secondary-border-style: @border-solid;\n\n/***** Dashed *****/\n@btn-dashed-color-text: var(~'@{arco-cssvars-prefix}-color-text-2');\n@btn-dashed-color-text_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');\n@btn-dashed-color-text_hover: var(~'@{arco-cssvars-prefix}-color-text-2');\n@btn-dashed-color-text_active: var(~'@{arco-cssvars-prefix}-color-text-2');\n@btn-dashed-color-bg: var(~'@{arco-cssvars-prefix}-color-fill-2');\n@btn-dashed-color-bg_disabled: var(~'@{arco-cssvars-prefix}-color-fill-2');\n@btn-dashed-color-bg_hover: var(~'@{arco-cssvars-prefix}-color-fill-3');\n@btn-dashed-color-bg_active: var(~'@{arco-cssvars-prefix}-color-fill-4');\n@btn-dashed-color-border: var(~'@{arco-cssvars-prefix}-color-neutral-3');\n@btn-dashed-color-border_disabled: var(\n  ~'@{arco-cssvars-prefix}-color-neutral-3'\n);\n@btn-dashed-color-border_hover: var(~'@{arco-cssvars-prefix}-color-neutral-4');\n@btn-dashed-color-border_active: var(~'@{arco-cssvars-prefix}-color-neutral-5');\n// status\n@btn-dashed-color-text_warning: @color-warning-6;\n@btn-dashed-color-text_warning_disabled: var(\n  ~'@{arco-cssvars-prefix}-color-warning-light-3'\n);\n@btn-dashed-color-text_warning_hover: @color-warning-6;\n@btn-dashed-color-text_warning_active: @color-warning-6;\n@btn-dashed-color-bg_warning: var(\n  ~'@{arco-cssvars-prefix}-color-warning-light-1'\n);\n@btn-dashed-color-bg_warning_disabled: var(\n  ~'@{arco-cssvars-prefix}-color-warning-light-1'\n);\n@btn-dashed-color-bg_warning_hover: var(\n  ~'@{arco-cssvars-prefix}-color-warning-light-2'\n);\n@btn-dashed-color-bg_warning_active: var(\n  ~'@{arco-cssvars-prefix}-color-warning-light-3'\n);\n@btn-dashed-color-border_warning: var(\n  ~'@{arco-cssvars-prefix}-color-warning-light-2'\n);\n@btn-dashed-color-border_warning_disabled: var(\n  ~'@{arco-cssvars-prefix}-color-warning-light-2'\n);\n@btn-dashed-color-border_warning_hover: var(\n  ~'@{arco-cssvars-prefix}-color-warning-light-3'\n);\n@btn-dashed-color-border_warning_active: var(\n  ~'@{arco-cssvars-prefix}-color-warning-light-4'\n);\n\n@btn-dashed-color-text_danger: @color-danger-6;\n@btn-dashed-color-text_danger_disabled: var(\n  ~'@{arco-cssvars-prefix}-color-danger-light-3'\n);\n@btn-dashed-color-text_danger_hover: @color-danger-6;\n@btn-dashed-color-text_danger_active: @color-danger-6;\n@btn-dashed-color-bg_danger: var(\n  ~'@{arco-cssvars-prefix}-color-danger-light-1'\n);\n@btn-dashed-color-bg_danger_disabled: var(\n  ~'@{arco-cssvars-prefix}-color-danger-light-1'\n);\n@btn-dashed-color-bg_danger_hover: var(\n  ~'@{arco-cssvars-prefix}-color-danger-light-2'\n);\n@btn-dashed-color-bg_danger_active: var(\n  ~'@{arco-cssvars-prefix}-color-danger-light-3'\n);\n@btn-dashed-color-border_danger: var(\n  ~'@{arco-cssvars-prefix}-color-danger-light-2'\n);\n@btn-dashed-color-border_danger_disabled: var(\n  ~'@{arco-cssvars-prefix}-color-danger-light-2'\n);\n@btn-dashed-color-border_danger_hover: var(\n  ~'@{arco-cssvars-prefix}-color-danger-light-3'\n);\n@btn-dashed-color-border_danger_active: var(\n  ~'@{arco-cssvars-prefix}-color-danger-light-4'\n);\n\n@btn-dashed-color-text_success: @color-success-6;\n@btn-dashed-color-text_success_disabled: var(\n  ~'@{arco-cssvars-prefix}-color-success-light-3'\n);\n@btn-dashed-color-text_success_hover: @color-success-6;\n@btn-dashed-color-text_success_active: @color-success-6;\n@btn-dashed-color-bg_success: var(\n  ~'@{arco-cssvars-prefix}-color-success-light-1'\n);\n@btn-dashed-color-bg_success_disabled: var(\n  ~'@{arco-cssvars-prefix}-color-success-light-1'\n);\n@btn-dashed-color-bg_success_hover: var(\n  ~'@{arco-cssvars-prefix}-color-success-light-2'\n);\n@btn-dashed-color-bg_success_active: var(\n  ~'@{arco-cssvars-prefix}-color-success-light-3'\n);\n@btn-dashed-color-border_success: var(\n  ~'@{arco-cssvars-prefix}-color-success-light-2'\n);\n@btn-dashed-color-border_success_disabled: var(\n  ~'@{arco-cssvars-prefix}-color-success-light-2'\n);\n@btn-dashed-color-border_success_hover: var(\n  ~'@{arco-cssvars-prefix}-color-success-light-3'\n);\n@btn-dashed-color-border_success_active: var(\n  ~'@{arco-cssvars-prefix}-color-success-light-4'\n);\n// border\n@btn-dashed-border-style: @border-dashed;\n\n/***** Text *****/\n@btn-text-color-text: @color-primary-6;\n@btn-text-color-text_disabled: var(\n  ~'@{arco-cssvars-prefix}-color-primary-light-3'\n);\n@btn-text-color-text_hover: @color-primary-6;\n@btn-text-color-text_active: @color-primary-6;\n@btn-text-color-bg: @color-transparent;\n@btn-text-color-bg_disabled: @color-transparent;\n@btn-text-color-bg_hover: var(~'@{arco-cssvars-prefix}-color-fill-2');\n@btn-text-color-bg_active: var(~'@{arco-cssvars-prefix}-color-fill-3');\n@btn-text-color-border: @color-transparent;\n@btn-text-color-border_disabled: @color-transparent;\n@btn-text-color-border_hover: @color-transparent;\n@btn-text-color-border_active: @color-transparent;\n// status\n@btn-text-color-text_warning: @color-warning-6;\n@btn-text-color-text_warning_disabled: var(\n  ~'@{arco-cssvars-prefix}-color-warning-light-3'\n);\n@btn-text-color-text_warning_hover: @color-warning-6;\n@btn-text-color-text_warning_active: @color-warning-6;\n@btn-text-color-bg_warning: @color-transparent;\n@btn-text-color-bg_warning_disabled: @color-transparent;\n@btn-text-color-bg_warning_hover: var(~'@{arco-cssvars-prefix}-color-fill-2');\n@btn-text-color-bg_warning_active: var(~'@{arco-cssvars-prefix}-color-fill-3');\n@btn-text-color-border_warning: @color-transparent;\n@btn-text-color-border_warning_disabled: @color-transparent;\n@btn-text-color-border_warning_hover: @color-transparent;\n@btn-text-color-border_warning_active: @color-transparent;\n\n@btn-text-color-text_danger: @color-danger-6;\n@btn-text-color-text_danger_disabled: var(\n  ~'@{arco-cssvars-prefix}-color-danger-light-3'\n);\n@btn-text-color-text_danger_hover: @color-danger-6;\n@btn-text-color-text_danger_active: @color-danger-6;\n@btn-text-color-bg_danger: @color-transparent;\n@btn-text-color-bg_danger_disabled: @color-transparent;\n@btn-text-color-bg_danger_hover: var(~'@{arco-cssvars-prefix}-color-fill-2');\n@btn-text-color-bg_danger_active: var(~'@{arco-cssvars-prefix}-color-fill-3');\n@btn-text-color-border_danger: @color-transparent;\n@btn-text-color-border_danger_disabled: @color-transparent;\n@btn-text-color-border_danger_hover: @color-transparent;\n@btn-text-color-border_danger_active: @color-transparent;\n\n@btn-text-color-text_success: @color-success-6;\n@btn-text-color-text_success_disabled: var(\n  ~'@{arco-cssvars-prefix}-color-success-light-3'\n);\n@btn-text-color-text_success_hover: @color-success-6;\n@btn-text-color-text_success_active: @color-success-6;\n@btn-text-color-bg_success: @color-transparent;\n@btn-text-color-bg_success_disabled: @color-transparent;\n@btn-text-color-bg_success_hover: var(~'@{arco-cssvars-prefix}-color-fill-2');\n@btn-text-color-bg_success_active: var(~'@{arco-cssvars-prefix}-color-fill-3');\n@btn-text-color-border_success: @color-transparent;\n@btn-text-color-border_success_disabled: @color-transparent;\n@btn-text-color-border_success_hover: @color-transparent;\n@btn-text-color-border_success_active: @color-transparent;\n// border\n@btn-text-border-style: @border-solid;\n\n// vue overwrite token\n@btn-size-medium-radius: @btn-size-default-radius;\n@btn-size-medium-border-width: @btn-size-default-border-width;\n@btn-size-medium-icon-spacing: @btn-size-default-icon-spacing;\n@btn-size-medium-icon-vertical-align: @btn-size-default-icon-vertical-align;\n@btn-size-medium-padding-horizontal: @btn-size-default-padding-horizontal;\n@btn-size-medium-font-size: @btn-size-default-font-size;\n@btn-size-medium-height: @btn-size-default-height;\n\n/***** focus-visible *****/\n@btn-box-shadow-radius: 0.25em;\n@btn-primary-color-box-shadow: @color-primary-3;\n@btn-outline-color-box-shadow: @color-primary-3;\n@btn-secondary-color-box-shadow: @color-secondary-active;\n@btn-dashed-color-box-shadow: @color-secondary-active;\n@btn-text-color-box-shadow: @color-secondary-active;\n@btn-color-box-shadow_warning: @color-warning-3;\n@btn-color-box-shadow_danger: @color-danger-3;\n@btn-color-box-shadow_success: @color-success-3;\n"
  },
  {
    "path": "packages/web-vue/components/calendar/CHANGELOG.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.56.2\n\n`2024-09-13`\n\n### 🐛 BugFix\n\n- fix  modes not taking effect ([#3281](https://github.com/arco-design/arco-design-vue/pull/3281))\n\n\n## 2.53.3\n\n`2023-11-24`\n\n\n## 2.53.0\n\n`2023-11-03`\n\n### 🆕 Feature\n\n- Added `header` and `default` slots ([#2674](https://github.com/arco-design/arco-design-vue/pull/2674))\n\n\n## 2.44.2\n\n`2023-03-17`\n\n### 💅 Style\n\n- fix some style problems ([#2239](https://github.com/arco-design/arco-design-vue/pull/2239))\n\n\n## 2.44.1\n\n`2023-03-10`\n\n### 🐛 BugFix\n\n- **calendar:** fix the wrong import path problem\n\n\n## 2.44.0\n\n`2023-03-10`\n\n### 🆕 Feature\n\n- New calendar component ([#2217](https://github.com/arco-design/arco-design-vue/pull/2217))\n\n"
  },
  {
    "path": "packages/web-vue/components/calendar/CHANGELOG.zh-CN.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.56.2\n\n`2024-09-13`\n\n### 🐛 问题修复\n\n- 修复modes 不生效问题 ([#3281](https://github.com/arco-design/arco-design-vue/pull/3281))\n\n\n## 2.53.3\n\n`2023-11-24`\n\n\n## 2.53.0\n\n`2023-11-03`\n\n### 🆕 新增功能\n\n- 新增 `header` 和 `default` 插槽 ([#2674](https://github.com/arco-design/arco-design-vue/pull/2674))\n\n\n## 2.44.2\n\n`2023-03-17`\n\n### 💅 样式更新\n\n- 修复一些样式问题 ([#2239](https://github.com/arco-design/arco-design-vue/pull/2239))\n\n\n## 2.44.1\n\n`2023-03-10`\n\n### 🐛 问题修复\n\n- **calendar:** 修复内部 import 路径问题\n\n\n## 2.44.0\n\n`2023-03-10`\n\n### 🆕 新增功能\n\n- 新增日历组件 ([#2217](https://github.com/arco-design/arco-design-vue/pull/2217))\n\n"
  },
  {
    "path": "packages/web-vue/components/calendar/README.en-US.md",
    "content": "```yaml\nmeta:\n  type: Component\n  category: Display\ntitle: Calendar\ndescription: Calendar Component.\n```\n\n*Auto translate by google.*\n\n@import ./__demo__/basic.md\n\n## API\n\n\n### `<calendar>` Props\n\n|Attribute|Description|Type|Default|\n|---|---|---|:---:|\n|model-value **(v-model)**|Value|`date`|`-`|\n|default-value|Default value (uncontrolled state)|`date`|`-`|\n|mode|Mode|`'month' \\| 'year'`|`-`|\n|default-mode|Default Mode|`'month' \\| 'year'`|`'month'`|\n|modes|Displayed mode|`('month' \\| 'year')[]`|`['month', 'year']`|\n### `<calendar>` Events\n\n|Event Name|Description|Parameters|\n|---|---|---|\n|change|Emitted when the button is clicked|date: `Date`|\n|panel-change|Emitted when the button is clicked|date: `Date`|\n### `<calendar>` Slots\n\n|Slot Name|Description|Parameters|version|\n|---|---|---|:---|\n|header|Custom header content|year: `number`<br>month: `number`|2.53.0|\n|default|Custom cell content|year: `number`<br>month: `number`<br>date: `number`|2.53.0|\n\n\n"
  },
  {
    "path": "packages/web-vue/components/calendar/README.zh-CN.md",
    "content": "```yaml\nmeta:\n  type: 组件\n  category: 数据展示\ntitle: 日历 Calendar\ndescription: 日历组件。\n```\n\n@import ./__demo__/basic.md\n\n## API\n\n\n### `<calendar>` Props\n\n|参数名|描述|类型|默认值|\n|---|---|---|:---:|\n|model-value **(v-model)**|绑定值|`date`|`-`|\n|default-value|默认值（非受控状态）|`date`|`-`|\n|mode|模式|`'month' \\| 'year'`|`-`|\n|default-mode|默认模式|`'month' \\| 'year'`|`'month'`|\n|modes|显示的模式|`('month' \\| 'year')[]`|`['month', 'year']`|\n### `<calendar>` Events\n\n|事件名|描述|参数|\n|---|---|---|\n|change|选择的日期改变时触发|date: `Date`|\n|panel-change|日期面板改变时触发|date: `Date`|\n### `<calendar>` Slots\n\n|插槽名|描述|参数|版本|\n|---|:---:|---|:---|\n|header|自定义头部内容|year: `number`<br>month: `number`|2.53.0|\n|default|自定义单元格内容|year: `number`<br>month: `number`<br>date: `number`|2.53.0|\n\n\n"
  },
  {
    "path": "packages/web-vue/components/calendar/TEMPLATE.md",
    "content": "## zh-CN\n```yaml\nmeta:\n  type: 组件\n  category: 数据展示\ntitle: 日历 Calendar\ndescription: 日历组件。\n```\n---\n## en-US\n```yaml\nmeta:\n  type: Component\n  category: Display\ntitle: Calendar\ndescription: Calendar Component.\n```\n---\n\n@import ./__demo__/basic.md\n\n## API\n\n%%API(calendar.tsx)%%\n"
  },
  {
    "path": "packages/web-vue/components/calendar/__demo__/basic.md",
    "content": "```yaml\ntitle:\n  zh-CN: 基本用法\n  en-US: Basic Usage\n```\n\n## zh-CN\n\n展示和选择日历\n\n---\n\n## en-US\n\nDisplay and select calendars\n\n---\n\n```vue\n\n<template>\n  <a-calendar v-model=\"value\" />\n  select: {{value}}\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n  setup() {\n    const value = ref(new Date('2023-01-01'));\n\n    return {\n      value\n    }\n  },\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/calendar/__test__/__snapshots__/demo.test.ts.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`<calendar> demo: render [basic] correctly 1`] = `\n\"<div class=\\\\\"arco-calendar arco-calendar-mode-month\\\\\">\n  <div class=\\\\\"arco-calendar-header\\\\\">\n    <div class=\\\\\"arco-calendar-header-left\\\\\">\n      <div class=\\\\\"arco-calendar-header-icon\\\\\" role=\\\\\"button\\\\\" tabindex=\\\\\"0\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-left\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n          <path d=\\\\\"M32 8.4 16.444 23.956 32 39.513\\\\\"></path>\n        </svg></div>\n      <div class=\\\\\"arco-calendar-header-value\\\\\">2023 年 01 月</div>\n      <div role=\\\\\"button\\\\\" tabindex=\\\\\"0\\\\\" class=\\\\\"arco-calendar-header-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-right\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n          <path d=\\\\\"m16 39.513 15.556-15.557L16 8.4\\\\\"></path>\n        </svg></div><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-small arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n        <!--v-if-->今天\n      </button>\n    </div>\n    <div class=\\\\\"arco-calendar-header-right\\\\\"><span class=\\\\\"arco-radio-group-button arco-radio-group-size-small arco-radio-group-direction-horizontal\\\\\"><label class=\\\\\"arco-radio-button arco-radio-checked\\\\\"><input type=\\\\\"radio\\\\\" checked=\\\\\"\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"month\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">月</span></label><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"year\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">年</span></label></span></div>\n  </div>\n  <div class=\\\\\"arco-calendar-body\\\\\">\n    <div class=\\\\\"arco-calendar-month\\\\\">\n      <div class=\\\\\"arco-calendar-week-list\\\\\">\n        <div class=\\\\\"arco-calendar-week-list-item\\\\\">周日</div>\n        <div class=\\\\\"arco-calendar-week-list-item\\\\\">周一</div>\n        <div class=\\\\\"arco-calendar-week-list-item\\\\\">周二</div>\n        <div class=\\\\\"arco-calendar-week-list-item\\\\\">周三</div>\n        <div class=\\\\\"arco-calendar-week-list-item\\\\\">周四</div>\n        <div class=\\\\\"arco-calendar-week-list-item\\\\\">周五</div>\n        <div class=\\\\\"arco-calendar-week-list-item\\\\\">周六</div>\n      </div>\n      <div class=\\\\\"arco-calendar-month-cell-body\\\\\">\n        <div class=\\\\\"arco-calendar-month-row\\\\\">\n          <div class=\\\\\"arco-calendar-cell arco-calendar-cell-in-view arco-calendar-cell-selected\\\\\">\n            <div class=\\\\\"arco-calendar-date\\\\\">\n              <div class=\\\\\"arco-calendar-date-value\\\\\">\n                <div class=\\\\\"arco-calendar-date-circle\\\\\">1</div>\n              </div>\n            </div>\n          </div>\n          <div class=\\\\\"arco-calendar-cell arco-calendar-cell-in-view\\\\\">\n            <div class=\\\\\"arco-calendar-date\\\\\">\n              <div class=\\\\\"arco-calendar-date-value\\\\\">\n                <div class=\\\\\"arco-calendar-date-circle\\\\\">2</div>\n              </div>\n            </div>\n          </div>\n          <div class=\\\\\"arco-calendar-cell arco-calendar-cell-in-view\\\\\">\n            <div class=\\\\\"arco-calendar-date\\\\\">\n              <div class=\\\\\"arco-calendar-date-value\\\\\">\n                <div class=\\\\\"arco-calendar-date-circle\\\\\">3</div>\n              </div>\n            </div>\n          </div>\n          <div class=\\\\\"arco-calendar-cell arco-calendar-cell-in-view\\\\\">\n            <div class=\\\\\"arco-calendar-date\\\\\">\n              <div class=\\\\\"arco-calendar-date-value\\\\\">\n                <div class=\\\\\"arco-calendar-date-circle\\\\\">4</div>\n              </div>\n            </div>\n          </div>\n          <div class=\\\\\"arco-calendar-cell arco-calendar-cell-in-view\\\\\">\n            <div class=\\\\\"arco-calendar-date\\\\\">\n              <div class=\\\\\"arco-calendar-date-value\\\\\">\n                <div class=\\\\\"arco-calendar-date-circle\\\\\">5</div>\n              </div>\n            </div>\n          </div>\n          <div class=\\\\\"arco-calendar-cell arco-calendar-cell-in-view\\\\\">\n            <div class=\\\\\"arco-calendar-date\\\\\">\n              <div class=\\\\\"arco-calendar-date-value\\\\\">\n                <div class=\\\\\"arco-calendar-date-circle\\\\\">6</div>\n              </div>\n            </div>\n          </div>\n          <div class=\\\\\"arco-calendar-cell arco-calendar-cell-in-view\\\\\">\n            <div class=\\\\\"arco-calendar-date\\\\\">\n              <div class=\\\\\"arco-calendar-date-value\\\\\">\n                <div class=\\\\\"arco-calendar-date-circle\\\\\">7</div>\n              </div>\n            </div>\n          </div>\n        </div>\n        <div class=\\\\\"arco-calendar-month-row\\\\\">\n          <div class=\\\\\"arco-calendar-cell arco-calendar-cell-in-view\\\\\">\n            <div class=\\\\\"arco-calendar-date\\\\\">\n              <div class=\\\\\"arco-calendar-date-value\\\\\">\n                <div class=\\\\\"arco-calendar-date-circle\\\\\">8</div>\n              </div>\n            </div>\n          </div>\n          <div class=\\\\\"arco-calendar-cell arco-calendar-cell-in-view\\\\\">\n            <div class=\\\\\"arco-calendar-date\\\\\">\n              <div class=\\\\\"arco-calendar-date-value\\\\\">\n                <div class=\\\\\"arco-calendar-date-circle\\\\\">9</div>\n              </div>\n            </div>\n          </div>\n          <div class=\\\\\"arco-calendar-cell arco-calendar-cell-in-view\\\\\">\n            <div class=\\\\\"arco-calendar-date\\\\\">\n              <div class=\\\\\"arco-calendar-date-value\\\\\">\n                <div class=\\\\\"arco-calendar-date-circle\\\\\">10</div>\n              </div>\n            </div>\n          </div>\n          <div class=\\\\\"arco-calendar-cell arco-calendar-cell-in-view\\\\\">\n            <div class=\\\\\"arco-calendar-date\\\\\">\n              <div class=\\\\\"arco-calendar-date-value\\\\\">\n                <div class=\\\\\"arco-calendar-date-circle\\\\\">11</div>\n              </div>\n            </div>\n          </div>\n          <div class=\\\\\"arco-calendar-cell arco-calendar-cell-in-view\\\\\">\n            <div class=\\\\\"arco-calendar-date\\\\\">\n              <div class=\\\\\"arco-calendar-date-value\\\\\">\n                <div class=\\\\\"arco-calendar-date-circle\\\\\">12</div>\n              </div>\n            </div>\n          </div>\n          <div class=\\\\\"arco-calendar-cell arco-calendar-cell-in-view\\\\\">\n            <div class=\\\\\"arco-calendar-date\\\\\">\n              <div class=\\\\\"arco-calendar-date-value\\\\\">\n                <div class=\\\\\"arco-calendar-date-circle\\\\\">13</div>\n              </div>\n            </div>\n          </div>\n          <div class=\\\\\"arco-calendar-cell arco-calendar-cell-in-view\\\\\">\n            <div class=\\\\\"arco-calendar-date\\\\\">\n              <div class=\\\\\"arco-calendar-date-value\\\\\">\n                <div class=\\\\\"arco-calendar-date-circle\\\\\">14</div>\n              </div>\n            </div>\n          </div>\n        </div>\n        <div class=\\\\\"arco-calendar-month-row\\\\\">\n          <div class=\\\\\"arco-calendar-cell arco-calendar-cell-in-view\\\\\">\n            <div class=\\\\\"arco-calendar-date\\\\\">\n              <div class=\\\\\"arco-calendar-date-value\\\\\">\n                <div class=\\\\\"arco-calendar-date-circle\\\\\">15</div>\n              </div>\n            </div>\n          </div>\n          <div class=\\\\\"arco-calendar-cell arco-calendar-cell-in-view\\\\\">\n            <div class=\\\\\"arco-calendar-date\\\\\">\n              <div class=\\\\\"arco-calendar-date-value\\\\\">\n                <div class=\\\\\"arco-calendar-date-circle\\\\\">16</div>\n              </div>\n            </div>\n          </div>\n          <div class=\\\\\"arco-calendar-cell arco-calendar-cell-in-view\\\\\">\n            <div class=\\\\\"arco-calendar-date\\\\\">\n              <div class=\\\\\"arco-calendar-date-value\\\\\">\n                <div class=\\\\\"arco-calendar-date-circle\\\\\">17</div>\n              </div>\n            </div>\n          </div>\n          <div class=\\\\\"arco-calendar-cell arco-calendar-cell-in-view\\\\\">\n            <div class=\\\\\"arco-calendar-date\\\\\">\n              <div class=\\\\\"arco-calendar-date-value\\\\\">\n                <div class=\\\\\"arco-calendar-date-circle\\\\\">18</div>\n              </div>\n            </div>\n          </div>\n          <div class=\\\\\"arco-calendar-cell arco-calendar-cell-in-view\\\\\">\n            <div class=\\\\\"arco-calendar-date\\\\\">\n              <div class=\\\\\"arco-calendar-date-value\\\\\">\n                <div class=\\\\\"arco-calendar-date-circle\\\\\">19</div>\n              </div>\n            </div>\n          </div>\n          <div class=\\\\\"arco-calendar-cell arco-calendar-cell-in-view\\\\\">\n            <div class=\\\\\"arco-calendar-date\\\\\">\n              <div class=\\\\\"arco-calendar-date-value\\\\\">\n                <div class=\\\\\"arco-calendar-date-circle\\\\\">20</div>\n              </div>\n            </div>\n          </div>\n          <div class=\\\\\"arco-calendar-cell arco-calendar-cell-in-view\\\\\">\n            <div class=\\\\\"arco-calendar-date\\\\\">\n              <div class=\\\\\"arco-calendar-date-value\\\\\">\n                <div class=\\\\\"arco-calendar-date-circle\\\\\">21</div>\n              </div>\n            </div>\n          </div>\n        </div>\n        <div class=\\\\\"arco-calendar-month-row\\\\\">\n          <div class=\\\\\"arco-calendar-cell arco-calendar-cell-in-view\\\\\">\n            <div class=\\\\\"arco-calendar-date\\\\\">\n              <div class=\\\\\"arco-calendar-date-value\\\\\">\n                <div class=\\\\\"arco-calendar-date-circle\\\\\">22</div>\n              </div>\n            </div>\n          </div>\n          <div class=\\\\\"arco-calendar-cell arco-calendar-cell-in-view\\\\\">\n            <div class=\\\\\"arco-calendar-date\\\\\">\n              <div class=\\\\\"arco-calendar-date-value\\\\\">\n                <div class=\\\\\"arco-calendar-date-circle\\\\\">23</div>\n              </div>\n            </div>\n          </div>\n          <div class=\\\\\"arco-calendar-cell arco-calendar-cell-in-view\\\\\">\n            <div class=\\\\\"arco-calendar-date\\\\\">\n              <div class=\\\\\"arco-calendar-date-value\\\\\">\n                <div class=\\\\\"arco-calendar-date-circle\\\\\">24</div>\n              </div>\n            </div>\n          </div>\n          <div class=\\\\\"arco-calendar-cell arco-calendar-cell-in-view\\\\\">\n            <div class=\\\\\"arco-calendar-date\\\\\">\n              <div class=\\\\\"arco-calendar-date-value\\\\\">\n                <div class=\\\\\"arco-calendar-date-circle\\\\\">25</div>\n              </div>\n            </div>\n          </div>\n          <div class=\\\\\"arco-calendar-cell arco-calendar-cell-in-view\\\\\">\n            <div class=\\\\\"arco-calendar-date\\\\\">\n              <div class=\\\\\"arco-calendar-date-value\\\\\">\n                <div class=\\\\\"arco-calendar-date-circle\\\\\">26</div>\n              </div>\n            </div>\n          </div>\n          <div class=\\\\\"arco-calendar-cell arco-calendar-cell-in-view\\\\\">\n            <div class=\\\\\"arco-calendar-date\\\\\">\n              <div class=\\\\\"arco-calendar-date-value\\\\\">\n                <div class=\\\\\"arco-calendar-date-circle\\\\\">27</div>\n              </div>\n            </div>\n          </div>\n          <div class=\\\\\"arco-calendar-cell arco-calendar-cell-in-view\\\\\">\n            <div class=\\\\\"arco-calendar-date\\\\\">\n              <div class=\\\\\"arco-calendar-date-value\\\\\">\n                <div class=\\\\\"arco-calendar-date-circle\\\\\">28</div>\n              </div>\n            </div>\n          </div>\n        </div>\n        <div class=\\\\\"arco-calendar-month-row\\\\\">\n          <div class=\\\\\"arco-calendar-cell arco-calendar-cell-in-view\\\\\">\n            <div class=\\\\\"arco-calendar-date\\\\\">\n              <div class=\\\\\"arco-calendar-date-value\\\\\">\n                <div class=\\\\\"arco-calendar-date-circle\\\\\">29</div>\n              </div>\n            </div>\n          </div>\n          <div class=\\\\\"arco-calendar-cell arco-calendar-cell-in-view\\\\\">\n            <div class=\\\\\"arco-calendar-date\\\\\">\n              <div class=\\\\\"arco-calendar-date-value\\\\\">\n                <div class=\\\\\"arco-calendar-date-circle\\\\\">30</div>\n              </div>\n            </div>\n          </div>\n          <div class=\\\\\"arco-calendar-cell arco-calendar-cell-in-view\\\\\">\n            <div class=\\\\\"arco-calendar-date\\\\\">\n              <div class=\\\\\"arco-calendar-date-value\\\\\">\n                <div class=\\\\\"arco-calendar-date-circle\\\\\">31</div>\n              </div>\n            </div>\n          </div>\n          <div class=\\\\\"arco-calendar-cell\\\\\">\n            <div class=\\\\\"arco-calendar-date\\\\\">\n              <div class=\\\\\"arco-calendar-date-value\\\\\">\n                <div class=\\\\\"arco-calendar-date-circle\\\\\">1</div>\n              </div>\n            </div>\n          </div>\n          <div class=\\\\\"arco-calendar-cell\\\\\">\n            <div class=\\\\\"arco-calendar-date\\\\\">\n              <div class=\\\\\"arco-calendar-date-value\\\\\">\n                <div class=\\\\\"arco-calendar-date-circle\\\\\">2</div>\n              </div>\n            </div>\n          </div>\n          <div class=\\\\\"arco-calendar-cell\\\\\">\n            <div class=\\\\\"arco-calendar-date\\\\\">\n              <div class=\\\\\"arco-calendar-date-value\\\\\">\n                <div class=\\\\\"arco-calendar-date-circle\\\\\">3</div>\n              </div>\n            </div>\n          </div>\n          <div class=\\\\\"arco-calendar-cell\\\\\">\n            <div class=\\\\\"arco-calendar-date\\\\\">\n              <div class=\\\\\"arco-calendar-date-value\\\\\">\n                <div class=\\\\\"arco-calendar-date-circle\\\\\">4</div>\n              </div>\n            </div>\n          </div>\n        </div>\n        <div class=\\\\\"arco-calendar-month-row\\\\\">\n          <div class=\\\\\"arco-calendar-cell\\\\\">\n            <div class=\\\\\"arco-calendar-date\\\\\">\n              <div class=\\\\\"arco-calendar-date-value\\\\\">\n                <div class=\\\\\"arco-calendar-date-circle\\\\\">5</div>\n              </div>\n            </div>\n          </div>\n          <div class=\\\\\"arco-calendar-cell\\\\\">\n            <div class=\\\\\"arco-calendar-date\\\\\">\n              <div class=\\\\\"arco-calendar-date-value\\\\\">\n                <div class=\\\\\"arco-calendar-date-circle\\\\\">6</div>\n              </div>\n            </div>\n          </div>\n          <div class=\\\\\"arco-calendar-cell\\\\\">\n            <div class=\\\\\"arco-calendar-date\\\\\">\n              <div class=\\\\\"arco-calendar-date-value\\\\\">\n                <div class=\\\\\"arco-calendar-date-circle\\\\\">7</div>\n              </div>\n            </div>\n          </div>\n          <div class=\\\\\"arco-calendar-cell\\\\\">\n            <div class=\\\\\"arco-calendar-date\\\\\">\n              <div class=\\\\\"arco-calendar-date-value\\\\\">\n                <div class=\\\\\"arco-calendar-date-circle\\\\\">8</div>\n              </div>\n            </div>\n          </div>\n          <div class=\\\\\"arco-calendar-cell\\\\\">\n            <div class=\\\\\"arco-calendar-date\\\\\">\n              <div class=\\\\\"arco-calendar-date-value\\\\\">\n                <div class=\\\\\"arco-calendar-date-circle\\\\\">9</div>\n              </div>\n            </div>\n          </div>\n          <div class=\\\\\"arco-calendar-cell\\\\\">\n            <div class=\\\\\"arco-calendar-date\\\\\">\n              <div class=\\\\\"arco-calendar-date-value\\\\\">\n                <div class=\\\\\"arco-calendar-date-circle\\\\\">10</div>\n              </div>\n            </div>\n          </div>\n          <div class=\\\\\"arco-calendar-cell\\\\\">\n            <div class=\\\\\"arco-calendar-date\\\\\">\n              <div class=\\\\\"arco-calendar-date-value\\\\\">\n                <div class=\\\\\"arco-calendar-date-circle\\\\\">11</div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <!---->\n  <!---->\n</div>\n select: Sun Jan 01 2023 08:00:00 GMT+0800 (China Standard Time)\"\n`;\n"
  },
  {
    "path": "packages/web-vue/components/calendar/__test__/demo.test.ts",
    "content": "import demoTest from '../../../scripts/demo-test';\n\ndemoTest('calendar');\n"
  },
  {
    "path": "packages/web-vue/components/calendar/calendar.tsx",
    "content": "import { defineComponent, computed, toRefs, PropType, ref } from 'vue';\nimport { Dayjs, UnitType } from 'dayjs';\nimport Month, { getAllDaysByTime } from './month';\nimport Year from './year';\nimport Header from './header';\nimport {\n  getDayjsValue,\n  getNow,\n  methods,\n  pickDataAttributes,\n} from '../_utils/date';\nimport { getPrefixCls } from '../_utils/global-config';\nimport { useI18n } from '../locale';\n\nfunction getFormat(mode: 'day' | 'week' | 'month' | 'year', panel?: boolean) {\n  return mode === 'month' || (mode === 'year' && !panel)\n    ? 'YYYY-MM-DD'\n    : 'YYYY-MM';\n}\n\n// const defaultProps: CalendarProps = {\n//   dayStartOfWeek: 0,\n//   panelWidth: 265,\n//   defaultMode: 'month',\n//   headerType: 'button',\n//   modes: ['month', 'year'],\n// };\n\nexport default defineComponent({\n  name: 'Calendar',\n  props: {\n    /**\n     * @zh 绑定值\n     * @en Value\n     */\n    modelValue: {\n      type: Date,\n      default: undefined,\n    },\n    /**\n     * @zh 默认值（非受控状态）\n     * @en Default value (uncontrolled state)\n     */\n    defaultValue: {\n      type: Date,\n    },\n    /**\n     * @zh 模式\n     * @en Mode\n     */\n    mode: {\n      type: String as PropType<'month' | 'year'>,\n    },\n    /**\n     * @zh 默认模式\n     * @en Default Mode\n     */\n    defaultMode: {\n      type: String as PropType<'month' | 'year'>,\n      default: 'month',\n    },\n    /**\n     * @zh 显示的模式\n     * @en Displayed mode\n     */\n    modes: {\n      type: Array as PropType<('month' | 'year')[]>,\n      default: () => ['month', 'year'],\n    },\n    allowSelect: {\n      type: Boolean,\n      default: true,\n    },\n    panel: {\n      type: Boolean,\n      default: false,\n    },\n    panelWidth: {\n      type: Number,\n    },\n    panelTodayBtn: {\n      type: Boolean,\n      default: false,\n    },\n    dayStartOfWeek: {\n      type: Number as PropType<0 | 1>,\n      default: 0,\n    },\n    isWeek: {\n      type: Boolean,\n      default: false,\n    },\n  },\n  emits: {\n    'update:modelValue': (date: Date) => true,\n    /**\n     * @zh 选择的日期改变时触发\n     * @en Emitted when the button is clicked\n     * @property {Date} date\n     */\n    'change': (date: Date) => true,\n    /**\n     * @zh 日期面板改变时触发\n     * @en Emitted when the button is clicked\n     * @property {Date} date\n     */\n    'panelChange': (date: Date) => true,\n  },\n  /**\n   * @zh 自定义单元格内容\n   * @en Custom cell content\n   * @slot default\n   * @binding {number} year\n   * @binding {number} month\n   * @binding {number} date\n   * @version 2.53.0\n   */\n  /**\n   * @zh 自定义头部内容\n   * @en Custom header content\n   * @slot header\n   * @binding {number} year\n   * @binding {number} month\n   * @version 2.53.0\n   */\n  setup(props, { emit, slots }) {\n    const { dayStartOfWeek, isWeek } = toRefs(props);\n    const prefixCls = getPrefixCls('calendar');\n    const _mode = ref(props.defaultMode);\n    const { t } = useI18n();\n    const computedMode = computed(() => {\n      if (props.mode) {\n        return props.mode;\n      }\n\n      return _mode.value;\n    });\n    const format = getFormat(computedMode.value, props.panel);\n    const _value = ref(getDayjsValue(props.defaultValue || Date.now(), format));\n    const computedValue = computed(() => {\n      if (props.modelValue) {\n        return getDayjsValue(props.modelValue, format);\n      }\n      return _value.value;\n    });\n\n    const pageShowDate = ref(computedValue.value || getNow());\n\n    // page data list\n    const pageData = computed(() => {\n      return getAllDaysByTime(pageShowDate.value, {\n        dayStartOfWeek: dayStartOfWeek.value,\n        isWeek: isWeek.value,\n      });\n    });\n\n    function onChangePageDate(time: Dayjs) {\n      pageShowDate.value = time;\n      emit('panelChange', time.toDate());\n    }\n\n    // value / pageShowDate / pageData\n    function move(time: Dayjs) {\n      _value.value = time;\n      emit('change', time.toDate());\n      emit('update:modelValue', time.toDate());\n      onChangePageDate(time);\n    }\n\n    function selectHandler(time: Dayjs, disabled = false) {\n      if (!disabled) {\n        move(time);\n      }\n    }\n\n    let headerValueFormat = '';\n    if (computedMode.value === 'month') {\n      headerValueFormat = t('calendar.formatMonth');\n    } else if (computedMode.value === 'year') {\n      headerValueFormat = t('calendar.formatYear');\n    }\n\n    function changePageShowDate(type: 'prev' | 'next', unit: UnitType) {\n      if (type === 'prev') {\n        pageShowDate.value = methods.subtract(pageShowDate.value, 1, unit);\n      }\n      if (type === 'next') {\n        pageShowDate.value = methods.add(pageShowDate.value, 1, unit);\n      }\n      emit('panelChange', pageShowDate.value.toDate());\n    }\n\n    function onChangeYear(year: number) {\n      const newValue = methods.set(pageShowDate.value, 'year', year);\n      pageShowDate.value = newValue;\n      emit('panelChange', newValue.toDate());\n    }\n\n    function onChangeMonth(month: number) {\n      const newValue = methods.set(pageShowDate.value, 'month', month - 1);\n      pageShowDate.value = newValue;\n      emit('panelChange', newValue.toDate());\n    }\n\n    function changeMode(mode: 'month' | 'year') {\n      _mode.value = mode;\n    }\n\n    const cls = computed(() => [\n      prefixCls,\n      computedMode.value === 'month'\n        ? `${prefixCls}-mode-month`\n        : `${prefixCls}-mode-year`,\n      {\n        [`${prefixCls}-panel`]:\n          props.panel &&\n          (computedMode.value === 'month' || computedMode.value === 'year'),\n      },\n    ]);\n\n    const baseStyle = props.panel ? { width: props.panelWidth } : {};\n\n    // const baseHeaderProps = {\n    //   prefixCls,\n    //   changePageShowDate,\n    //   headerValueFormat,\n    //   mergedPageShowDate,\n    //   innerMode,\n    //   panelOperations,\n    // };\n\n    return () => (\n      <div class={cls.value} style={baseStyle} {...pickDataAttributes(props)}>\n        <Header\n          move={move}\n          headerValueFormat={headerValueFormat}\n          modes={props.modes}\n          mode={computedMode.value}\n          pageShowData={pageShowDate.value}\n          dayStartOfWeek={props.dayStartOfWeek}\n          isWeek={props.isWeek}\n          onModeChange={changeMode}\n          onYearChange={onChangeYear}\n          onMonthChange={onChangeMonth}\n          changePageShowDate={changePageShowDate}\n          v-slots={{ default: slots.header }}\n        />\n        {computedMode.value === 'month' && (\n          <div class={`${prefixCls}-body`}>\n            <Month\n              key={pageShowDate.value.month()}\n              pageData={pageData.value}\n              value={computedValue.value}\n              mode={computedMode.value}\n              selectHandler={selectHandler}\n              isWeek={props.isWeek}\n              dayStartOfWeek={props.dayStartOfWeek}\n              pageShowDate={pageShowDate.value}\n              v-slots={{ default: slots.default }}\n            />\n          </div>\n        )}\n        {computedMode.value === 'year' && (\n          <div class={`${prefixCls}-body`}>\n            <Year\n              key={pageShowDate.value.year()}\n              pageData={pageData.value}\n              pageShowData={pageShowDate.value}\n              mode={computedMode.value}\n              isWeek={props.isWeek}\n              value={computedValue.value}\n              dayStartOfWeek={props.dayStartOfWeek}\n              selectHandler={selectHandler}\n            />\n          </div>\n        )}\n        {props.panel && props.panelTodayBtn && (\n          <div class={`${prefixCls}-footer-btn-wrapper`}>{t('today')}</div>\n        )}\n      </div>\n    );\n  },\n});\n"
  },
  {
    "path": "packages/web-vue/components/calendar/header.tsx",
    "content": "import { defineComponent, computed, PropType } from 'vue';\nimport { Dayjs } from 'dayjs';\nimport Select from '../select';\nimport Button from '../button';\nimport Radio from '../radio';\nimport IconLeft from '../icon/icon-left';\nimport IconRight from '../icon/icon-right';\nimport { getNow } from '../_utils/date';\nimport { isArray } from '../_utils/is';\nimport { getPrefixCls } from '../_utils/global-config';\nimport { useI18n } from '../locale';\n\nexport default defineComponent({\n  name: 'Header',\n  props: {\n    mode: {\n      type: String as PropType<'day' | 'week' | 'month' | 'year'>,\n    },\n    dayStartOfWeek: {\n      type: Number as PropType<0 | 1>,\n    },\n    isWeek: {\n      type: Boolean,\n    },\n    panel: {\n      type: Boolean,\n    },\n    modes: {\n      type: Array as PropType<('day' | 'week' | 'month' | 'year')[]>,\n    },\n    headerType: {\n      type: String,\n    },\n    pageShowData: {\n      type: Object as PropType<Dayjs>,\n      required: true,\n    },\n    move: {\n      type: Function,\n      required: true,\n    },\n    onYearChange: {\n      type: Function,\n      required: true,\n    },\n    onMonthChange: {\n      type: Function,\n      required: true,\n    },\n    changePageShowDate: {\n      type: Function,\n      required: true,\n    },\n    onModeChange: {\n      type: Function as PropType<(value: any, ev: Event) => void>,\n      required: true,\n    },\n    headerValueFormat: {\n      type: String,\n      required: true,\n    },\n  },\n  emits: ['yearChange', 'monthChange'],\n  setup(props, { slots }) {\n    // const {\n    //   changePageShowDate,\n    //   headerValueFormat,\n    //   mergedPageShowDate,\n    //   move,\n    //   mode,\n    //   changeMode,\n    //   onChangeYear,\n    //   onChangeMonth,\n    // } = toRefs(props);\n    // const getKeyboardEvents = useKeyboardEvent();\n    const prefixCls = getPrefixCls('calendar');\n    const { t } = useI18n();\n    const modesOptions = isArray(props.modes)\n      ? props.modes.map((m) => ({\n          label: t(`datePicker.view.${m}`),\n          value: m,\n        }))\n      : [];\n\n    const isSelectHeaderType = props.headerType === 'select';\n\n    const pageShowDateYear = computed(() => props.pageShowData.year());\n    const pageShowDateMonth = computed(() => props.pageShowData.month() + 1);\n    const optionsYear = computed(() => {\n      const options = [pageShowDateYear.value];\n      for (let i = 1; i <= 10; i++) {\n        options.unshift(pageShowDateYear.value - i);\n      }\n      for (let i = 1; i < 10; i++) {\n        options.push(pageShowDateYear.value + i);\n      }\n      return options;\n    });\n    const optionsMonth = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];\n\n    return () => (\n      <div class={`${prefixCls}-header`}>\n        <div class={`${prefixCls}-header-left`}>\n          {isSelectHeaderType ? (\n            <>\n              <Select\n                size=\"small\"\n                class={`${prefixCls}-header-value-year`}\n                defaultValue={pageShowDateYear.value}\n                options={optionsYear.value}\n                onChange={props.onYearChange}\n                popupContainer={`${prefixCls}-header`}\n              />\n              {props.mode === 'month' && (\n                <Select\n                  size=\"small\"\n                  class={`${prefixCls}-header-value-month`}\n                  defaultValue={pageShowDateMonth.value}\n                  options={optionsMonth}\n                  onChange={props.onMonthChange}\n                  popupContainer={`${prefixCls}-header`}\n                />\n              )}\n            </>\n          ) : (\n            <>\n              <div\n                class={`${prefixCls}-header-icon`}\n                role=\"button\"\n                tabindex={0}\n                onClick={() => props.changePageShowDate('prev', props.mode)}\n              >\n                <IconLeft />\n              </div>\n              <div class={`${prefixCls}-header-value`}>\n                {slots.default\n                  ? slots.default({\n                      year: pageShowDateYear,\n                      month: pageShowDateMonth,\n                    })\n                  : props.pageShowData.format(props.headerValueFormat)}\n              </div>\n              <div\n                role=\"button\"\n                tabindex={0}\n                class={`${prefixCls}-header-icon`}\n                onClick={() => props.changePageShowDate('next', props.mode)}\n              >\n                <IconRight />\n              </div>\n            </>\n          )}\n          <Button size=\"small\" onClick={() => props.move(getNow())}>\n            {t(`datePicker.today`)}\n          </Button>\n        </div>\n        <div class={`${prefixCls}-header-right`}>\n          <Radio.Group\n            size=\"small\"\n            type=\"button\"\n            options={modesOptions}\n            onChange={props.onModeChange}\n            modelValue={props.mode}\n          />\n        </div>\n      </div>\n    );\n  },\n});\n"
  },
  {
    "path": "packages/web-vue/components/calendar/hooks/useCellClassName.ts",
    "content": "import { Dayjs } from 'dayjs';\nimport { isArray } from '../../_utils/is';\nimport { getNow } from '../../_utils/date';\n\nfunction getDateValue(date?: Dayjs[], index?: number) {\n  if (!date) {\n    return undefined;\n  }\n  if (isArray(date)) {\n    return date[index];\n  }\n  return undefined;\n}\n\nexport default function useClassName({\n  prefixCls,\n  mergedValue,\n  rangeValues,\n  hoverRangeValues,\n  panel,\n  isSameTime,\n  innerMode,\n}) {\n  function isInRange(current, startDate, endDate) {\n    if (!startDate || !endDate) {\n      return false;\n    }\n    return (\n      isSameTime(current, startDate) ||\n      isSameTime(current, endDate) ||\n      current.isBetween(startDate, endDate, null, '[]')\n    );\n  }\n\n  return function getCellClassName(cellDateObj, disabled) {\n    const rangeStart = getDateValue(rangeValues, 0);\n    const rangeEnd = getDateValue(rangeValues, 1);\n\n    const hoverRangeStart = getDateValue(hoverRangeValues, 0);\n    const hoverRangeEnd = getDateValue(hoverRangeValues, 1);\n\n    const isInView = !cellDateObj.isPrev && !cellDateObj.isNext;\n\n    const rangeAvailable = isInView && panel;\n\n    const isRangeStart =\n      rangeAvailable && rangeStart && isSameTime(cellDateObj.time, rangeStart);\n    const isRangeEnd =\n      rangeAvailable && rangeEnd && isSameTime(cellDateObj.time, rangeEnd);\n\n    const nearRangeStart =\n      hoverRangeStart && rangeStart && hoverRangeStart.isBefore(rangeStart);\n    const nearRangeEnd =\n      rangeEnd && hoverRangeEnd && hoverRangeEnd.isAfter(rangeEnd);\n\n    const isHoverNearRange =\n      (nearRangeStart && isRangeStart) || (nearRangeEnd && isRangeEnd);\n\n    let isToday = isSameTime(cellDateObj.time, getNow());\n\n    if (!panel && innerMode === 'year') {\n      isToday = getNow().isSame(cellDateObj.time, 'date');\n    }\n\n    return [\n      `${prefixCls}-cell`,\n      {\n        [`${prefixCls}-cell-in-view`]: isInView,\n        [`${prefixCls}-cell-today`]: isToday,\n        [`${prefixCls}-cell-selected`]:\n          mergedValue && isSameTime(cellDateObj.time, mergedValue),\n        [`${prefixCls}-cell-range-start`]: isRangeStart,\n        [`${prefixCls}-cell-range-end`]: isRangeEnd,\n        [`${prefixCls}-cell-in-range`]:\n          rangeAvailable && isInRange(cellDateObj.time, rangeStart, rangeEnd),\n        [`${prefixCls}-cell-in-range-near-hover`]: isHoverNearRange,\n        [`${prefixCls}-cell-hover-range-start`]:\n          rangeAvailable &&\n          hoverRangeStart &&\n          isSameTime(cellDateObj.time, hoverRangeStart),\n        [`${prefixCls}-cell-hover-range-end`]:\n          rangeAvailable &&\n          hoverRangeEnd &&\n          isSameTime(cellDateObj.time, hoverRangeEnd),\n        [`${prefixCls}-cell-hover-in-range`]:\n          rangeAvailable &&\n          isInRange(cellDateObj.time, hoverRangeStart, hoverRangeEnd),\n        [`${prefixCls}-cell-disabled`]: disabled,\n      },\n    ];\n  };\n}\n"
  },
  {
    "path": "packages/web-vue/components/calendar/index.ts",
    "content": "import type { App } from 'vue';\nimport type { ArcoOptions } from '../_utils/types';\nimport { setGlobalConfig, getComponentPrefix } from '../_utils/global-config';\nimport _Calendar from './calendar';\n\nconst Calendar = Object.assign(_Calendar, {\n  install: (app: App, options?: ArcoOptions) => {\n    setGlobalConfig(app, options);\n    const componentPrefix = getComponentPrefix(options);\n\n    app.component(componentPrefix + _Calendar.name, _Calendar);\n  },\n});\n\nexport type CalendarInstance = InstanceType<typeof _Calendar>;\n\nexport default Calendar;\n"
  },
  {
    "path": "packages/web-vue/components/calendar/month.tsx",
    "content": "import { defineComponent, toRefs, PropType, computed } from 'vue';\nimport { Dayjs } from 'dayjs';\nimport { dayjs, methods } from '../_utils/date';\nimport { padStart } from '../_utils/pad';\nimport Week from './week';\nimport useCellClassName from './hooks/useCellClassName';\nimport { getPrefixCls } from '../_utils/global-config';\n\nconst allDaysInOnePage = 6 * 7;\n\nconst getReturn = (time: Dayjs) => {\n  return {\n    year: time.year(),\n    month: time.month() + 1,\n    date: time.date(),\n    day: time.day(),\n    time,\n  };\n};\n\nconst getTimeObj = (time: Dayjs) => {\n  return {\n    start: getReturn(methods.startOf(time, 'month')),\n    end: getReturn(methods.endOf(time, 'month')),\n    days: time.daysInMonth(),\n  };\n};\n\nexport function getAllDaysByTime(\n  time: Dayjs,\n  { dayStartOfWeek = 0, isWeek }: { dayStartOfWeek: 0 | 1; isWeek: boolean }\n) {\n  const current = getTimeObj(time);\n\n  const flatRows = Array(allDaysInOnePage)\n    .fill(null)\n    .map(() => ({}));\n  // current.start.day is 0 for Sunday\n  const startIndex =\n    dayStartOfWeek === 0 ? current.start.day : (current.start.day || 7) - 1;\n  flatRows[startIndex] = {\n    ...current.start,\n    isCurrent: true,\n  };\n  // pre\n  for (let i = 0; i < startIndex; i++) {\n    flatRows[startIndex - i - 1] = {\n      ...getReturn(methods.subtract(current.start.time, i + 1, 'day')),\n      isPrev: true,\n    };\n  }\n  // next\n  for (let i = 0; i < allDaysInOnePage - startIndex - 1; i++) {\n    flatRows[startIndex + i + 1] = {\n      ...getReturn(methods.add(current.start.time, i + 1, 'day')),\n      isCurrent: i < current.days,\n      isNext: i >= current.days - 1,\n    };\n  }\n  const rows = Array(6)\n    .fill(null)\n    .map(() => [] as any[]);\n  for (let i = 0; i < 6; i++) {\n    rows[i] = flatRows.slice(i * 7, 7 * (i + 1));\n    if (isWeek) {\n      const weekTime = rows[i][0].time;\n      const weekRows = [...rows[i]];\n      rows[i].unshift({\n        weekRows,\n        weekOfYear: weekTime.week(),\n      });\n    }\n  }\n  return rows;\n}\n\nexport default defineComponent({\n  name: 'Month',\n  props: {\n    cell: {\n      type: Boolean,\n    },\n    pageData: {\n      type: Array,\n    },\n    current: {\n      type: Number as PropType<number>,\n    },\n    value: {\n      type: Object as PropType<Dayjs>,\n      required: true,\n    },\n    selectHandler: {\n      type: Function as PropType<(time: Dayjs, disabled: boolean) => void>,\n      required: true,\n    },\n    mode: {\n      type: String as PropType<'day' | 'week' | 'month' | 'year'>,\n    },\n    pageShowDate: {\n      type: Object as PropType<Dayjs>,\n      required: true,\n    },\n    panel: {\n      type: Boolean,\n    },\n    dayStartOfWeek: {\n      type: Number as PropType<0 | 1>,\n      required: true,\n    },\n    isWeek: {\n      type: Boolean,\n      required: true,\n    },\n    // dateInnerContent:{\n    //   type:Function,\n    //   required:true\n    // }\n  },\n  setup(props, { slots }) {\n    const { pageData } = toRefs(props);\n    const prefixCls = getPrefixCls('calendar');\n    const pageShowDateYear = props.pageShowDate.year();\n    const getCellClassName = computed(() =>\n      useCellClassName({\n        prefixCls,\n        mergedValue: props.value,\n        panel: false,\n        innerMode: props.mode,\n        rangeValues: [],\n        hoverRangeValues: [],\n        isSameTime: (current: Dayjs, target: Dayjs) =>\n          current.isSame(target, 'day'),\n      })\n    );\n\n    function renderDays(row: any[]) {\n      return row.map((col, index) => {\n        if (col.time) {\n          // const disabled =\n          //   typeof props.disabledDate === 'function' &&\n          //   props.disabledDate(col.time);\n          const onClickHandler = () => props.selectHandler(col.time, false);\n          const tdProps = props.isWeek ? { onClick: onClickHandler } : {};\n          const tdDivProps = !props.isWeek ? { onClick: onClickHandler } : {};\n\n          return (\n            <div\n              key={index}\n              class={getCellClassName.value(col, false)}\n              {...tdProps}\n            >\n              {slots.default ? (\n                slots.default?.({\n                  year: col.year,\n                  month: col.month,\n                  date: col.date,\n                })\n              ) : (\n                <div class={`${prefixCls}-date`} {...tdDivProps}>\n                  <div class={`${prefixCls}-date-value`}>\n                    {props.panel ? (\n                      col.date\n                    ) : (\n                      <div class={`${prefixCls}-date-circle`}>{col.date}</div>\n                    )}\n                  </div>\n                </div>\n              )}\n            </div>\n          );\n        }\n        if ('weekOfYear' in col) {\n          const rowYear = props.value.year();\n          const rowMonth = props.value.month() + 1;\n          const rowWeek = props.value.week();\n          const selectedWeek =\n            props.value &&\n            col.weekRows.find(\n              (r: any) => r.year === rowYear && r.month === rowMonth\n            ) &&\n            rowWeek === col.weekOfYear;\n          return (\n            <div\n              key={index}\n              class={[\n                `${prefixCls}-cell`,\n                `${prefixCls}-cell-week`,\n                {\n                  [`${prefixCls}-cell-selected-week`]: selectedWeek,\n                  [`${prefixCls}-cell-in-range`]: selectedWeek,\n                },\n              ]}\n            >\n              <div class={`${prefixCls}-date`}>\n                <div class={`${prefixCls}-date-value`}>{col.weekOfYear}</div>\n              </div>\n            </div>\n          );\n        }\n        return null;\n      });\n    }\n\n    let pd = pageData.value;\n    if (typeof props.current === 'number') {\n      pd = getAllDaysByTime(\n        dayjs(`${pageShowDateYear}-${padStart(props.current + 1, 2, '0')}-01`),\n        {\n          dayStartOfWeek: props.dayStartOfWeek,\n          isWeek: props.isWeek,\n        }\n      );\n    }\n\n    return () => (\n      <div\n        class={props.cell ? `${prefixCls}-month-cell` : `${prefixCls}-month`}\n      >\n        <Week\n          value={props.value}\n          selectHandler={props.selectHandler}\n          dayStartOfWeek={props.dayStartOfWeek}\n          isWeek={props.isWeek}\n          panel={props.panel}\n          mode={props.mode}\n          pageShowData={props.pageShowDate}\n          pageData={props.pageData}\n        />\n        <div class={`${prefixCls}-month-cell-body`}>\n          {pd?.map((row, index) => (\n            <div\n              key={index}\n              class={[\n                `${prefixCls}-month-row`,\n                {\n                  [`${prefixCls}-row-week`]: props.isWeek,\n                },\n              ]}\n            >\n              {renderDays(row as any[])}\n            </div>\n          ))}\n        </div>\n      </div>\n    );\n  },\n});\n"
  },
  {
    "path": "packages/web-vue/components/calendar/style/index.less",
    "content": "@import './token.less';\n\n@calendar-prefix-cls: ~'@{prefix}-calendar';\n\n.@{calendar-prefix-cls} {\n  box-sizing: border-box;\n  border: 1px solid @calendar-color-border;\n\n  &-header {\n    display: flex;\n    padding: @calendar-header-padding-vertical\n      @calendar-header-padding-horizontal;\n\n    &-left {\n      position: relative;\n      display: flex;\n      flex: 1;\n      align-items: center;\n      height: 28px;\n      line-height: 28px;\n    }\n\n    &-right {\n      position: relative;\n      height: 28px;\n    }\n\n    &-value {\n      color: var(~'@{arco-cssvars-prefix}-color-text-1');\n      font-weight: @font-weight-500;\n      font-size: 20px;\n    }\n\n    &-icon {\n      width: 28px;\n      height: 28px;\n      margin-right: 12px;\n      color: @calendar-color-switch-icon;\n      font-size: 12px;\n      line-height: 28px;\n      text-align: center;\n      background-color: @calendar-color-bg-switch-icon;\n      border-radius: 50%;\n      transition: all @transition-duration-1 @transition-timing-function-linear;\n      user-select: none;\n\n      &:not(:first-child) {\n        margin: 0 12px;\n      }\n\n      &:focus-visible {\n        box-shadow: 0 0 0 2px @calendar-color-box-shadow;\n      }\n    }\n\n    &-icon:not(&-icon-hidden) {\n      cursor: pointer;\n\n      &:hover {\n        background-color: @calendar-color-bg-switch-icon_hover;\n      }\n    }\n  }\n\n  // 下拉类型的年选择框\n  & &-header-value-year {\n    width: 100px;\n    margin-right: 8px;\n  }\n\n  // 下拉类型的月选择框\n  & &-header-value-month {\n    width: 76px;\n    margin-right: 32px;\n  }\n\n  &-month {\n    width: 100%;\n\n    &-row {\n      display: flex;\n      height: 100px;\n\n      .@{calendar-prefix-cls}-cell {\n        flex: 1;\n        overflow: hidden;\n        border-bottom: 1px solid @calendar-color-border;\n      }\n\n      &:last-child .@{calendar-prefix-cls}-cell {\n        border-bottom: unset;\n      }\n    }\n\n    &-cell-body {\n      box-sizing: border-box;\n    }\n  }\n\n  &-mode-month:not(&-panel) &-cell:not(:last-child) {\n    border-right: 1px solid @calendar-color-border;\n  }\n\n  &-week-list {\n    display: flex;\n    box-sizing: border-box;\n    width: 100%;\n    padding: 0;\n    border-bottom: 1px solid @calendar-color-border;\n\n    &-item {\n      flex: 1;\n      padding: 20px 16px;\n      color: #7d7d7f;\n      text-align: left;\n    }\n  }\n\n  &-cell &-date {\n    box-sizing: border-box;\n    width: 100%;\n    height: 100%;\n    padding: 10px;\n    cursor: pointer;\n\n    &-circle {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: 28px;\n      height: 28px;\n      border-radius: 50%;\n    }\n  }\n\n  &-date-content {\n    height: 70px;\n    overflow-y: auto;\n  }\n\n  &-cell-today &-date-circle {\n    box-sizing: border-box;\n    border: 1px solid @color-primary-6;\n  }\n\n  &-date-value {\n    color: @calendar-color-cell-text-not-in-view;\n    font-weight: @font-weight-500;\n    font-size: 16px;\n  }\n\n  &-cell-in-view &-date-value {\n    color: @calendar-color-cell-text-in-view;\n  }\n\n  &-mode-month &-cell-selected &-date-circle {\n    box-sizing: border-box;\n    color: #fff;\n    background-color: @calendar-color-bg-circle_selected;\n    border: 1px solid @calendar-color-bg-circle_selected;\n  }\n\n  &-mode-year &-cell-selected &-cell-selected &-date-circle {\n    box-sizing: border-box;\n    color: #fff;\n    background-color: @calendar-color-bg-circle_selected;\n    border: 1px solid @calendar-color-bg-circle_selected;\n  }\n\n  // Mode: year\n  &-mode-year:not(&-panel) {\n    min-width: 820px;\n  }\n\n  &-mode-year &-header {\n    border-bottom: 1px solid @calendar-color-border;\n  }\n\n  &-mode-year &-body {\n    padding: 12px;\n  }\n\n  &-mode-year &-year-row {\n    display: flex;\n  }\n\n  &-year-row > &-cell {\n    flex: 1;\n    padding: 20px 8px;\n\n    &:not(:last-child) {\n      border-right: 1px solid @calendar-color-border;\n    }\n  }\n\n  &-year-row:not(:last-child) > &-cell {\n    border-bottom: 1px solid @calendar-color-border;\n  }\n\n  &-month-with-days &-month-row {\n    height: 26px;\n  }\n\n  &-month-with-days &-cell {\n    border-bottom: 0;\n  }\n\n  &-month-with-days &-month-cell-body {\n    padding: 0;\n  }\n\n  &-month-with-days &-month-title {\n    padding: 10px 6px;\n    color: @calendar-color-text-title;\n    font-weight: @font-weight-500;\n    font-size: 16px;\n  }\n\n  &-month-cell {\n    width: 100%;\n    font-size: 12px;\n  }\n\n  &-month-cell &-week-list {\n    padding: 0;\n    border-bottom: unset;\n  }\n\n  &-month-cell &-week-list-item {\n    padding: 6px;\n    color: #7d7d7f;\n    text-align: center;\n  }\n\n  &-month-cell &-cell {\n    text-align: center;\n  }\n\n  &-month-cell &-date {\n    padding: 2px;\n\n    &-value {\n      font-size: 14px;\n    }\n\n    &-circle {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      width: 22px;\n      height: 22px;\n      border-radius: 50%;\n    }\n  }\n}\n\n// panel\n.@{calendar-prefix-cls} {\n  &-panel {\n    background-color: var(~'@{arco-cssvars-prefix}-color-bg-5');\n    border: 1px solid @calendar-color-border;\n  }\n\n  &-panel &-header {\n    padding: 8px 16px;\n    border-bottom: 1px solid @calendar-color-border;\n\n    &-value {\n      flex: 1;\n      font-size: 14px;\n      line-height: 24px;\n      text-align: center;\n    }\n\n    &-icon {\n      width: 24px;\n      height: 24px;\n      margin-right: 2px;\n      margin-left: 2px;\n      line-height: 24px;\n    }\n  }\n\n  &-panel &-body {\n    padding: 14px 16px;\n  }\n\n  &-panel &-month-cell-body {\n    padding: 0;\n  }\n\n  &-panel &-month-row {\n    height: unset;\n  }\n\n  &-panel &-week-list {\n    padding: 0;\n    border-bottom: unset;\n  }\n\n  &-panel &-week-list-item {\n    height: 32px;\n    padding: 0;\n    font-weight: 400;\n    line-height: 32px;\n    text-align: center;\n  }\n\n  &-panel &-cell,\n  &-panel &-year-row &-cell {\n    box-sizing: border-box;\n    padding: 2px 0;\n    text-align: center;\n    border-right: 0;\n    border-bottom: 0;\n  }\n\n  &-panel &-cell &-date {\n    display: flex;\n    justify-content: center;\n    padding: @calendar-panel-date-cell-padding-vertical 0;\n\n    &-value {\n      min-width: @calendar-panel-date-cell-circle-height;\n      height: @calendar-panel-date-cell-circle-height;\n      font-size: 14px;\n      line-height: @calendar-panel-date-cell-circle-height;\n      cursor: pointer;\n    }\n  }\n\n  &-panel&-mode-year &-cell {\n    padding: 4px 0;\n  }\n\n  &-panel&-mode-year &-cell &-date {\n    padding: @calendar-panel-year-cell-padding-vertical;\n\n    &-value {\n      width: 100%;\n      border-radius: 12px;\n    }\n  }\n\n  &-panel &-cell-selected &-date-value {\n    color: @calendar-panel-color-text-cell_selected;\n    background-color: @calendar-panel-color-bg-cell_selected;\n    border-radius: 50%;\n  }\n\n  &-panel\n    &-cell:not(&-cell-selected):not(&-cell-range-start):not(&-cell-range-end):not(&-cell-hover-range-start):not(&-cell-hover-range-end):not(&-cell-disabled):not(&-cell-week)\n    &-date-value:hover {\n    color: @calendar-panel-color-text-cell_hover;\n    background-color: @calendar-panel-color-bg-cell_hover;\n    border-radius: 50%;\n  }\n\n  &-panel&-mode-year\n    &-cell:not(&-cell-selected):not(&-cell-range-start):not(&-cell-range-end):not(&-cell-hover-range-start):not(&-cell-hover-range-end):not(&-cell-disabled)\n    &-date-value:hover {\n    border-radius: (@calendar-panel-year-cell-circle-height / 2);\n  }\n\n  &-panel &-cell-today {\n    position: relative;\n\n    &::after {\n      position: absolute;\n      bottom: 0;\n      left: 50%;\n      display: block;\n      width: 4px;\n      height: 4px;\n      margin-left: -2px;\n      background-color: @calendar-panel-color-current-time-dot;\n      border-radius: 50%;\n      content: '';\n    }\n  }\n\n  &-cell-in-range &-date {\n    background-color: @calendar-color-bg-cell-in-range;\n  }\n\n  &-cell-range-start &-date {\n    border-radius: @calendar-panel-cell-boundary-border-radius 0 0\n      @calendar-panel-cell-boundary-border-radius;\n  }\n\n  &-cell-range-end &-date {\n    border-radius: 0 @calendar-panel-cell-boundary-border-radius\n      @calendar-panel-cell-boundary-border-radius 0;\n  }\n\n  &-cell-in-range-near-hover &-date {\n    border-radius: 0;\n  }\n\n  &-cell-range-start &-date-value,\n  &-cell-range-end &-date-value {\n    color: @calendar-color-text-cell-range-boundary;\n    background-color: @calendar-color-bg-cell-range-boundary;\n    border-radius: 50%;\n  }\n\n  &-cell-hover-in-range &-date {\n    background-color: @calendar-color-bg-cell-hover-in-range;\n  }\n\n  &-cell-hover-range-start &-date {\n    border-radius: @calendar-panel-cell-boundary-border-radius 0 0\n      @calendar-panel-cell-boundary-border-radius;\n  }\n\n  &-cell-hover-range-end &-date {\n    border-radius: 0 @calendar-panel-cell-boundary-border-radius\n      @calendar-panel-cell-boundary-border-radius 0;\n  }\n\n  &-cell-hover-range-start &-date-value,\n  &-cell-hover-range-end &-date-value {\n    color: @calendar-color-text-cell-hover-range-boundary;\n    background-color: @calendar-color-bg-cell-hover-range-boundary;\n    border-radius: 50%;\n  }\n\n  &-panel &-cell-disabled {\n    > .@{calendar-prefix-cls}-date {\n      background-color: @calendar-color-bg-cell-disabled;\n      cursor: not-allowed;\n\n      > .@{calendar-prefix-cls}-date-value {\n        color: @calendar-color-cell-text-not-in-view;\n        background-color: @calendar-color-bg-cell-disabled;\n        cursor: not-allowed;\n      }\n    }\n  }\n\n  &-panel &-footer-btn-wrapper {\n    height: 38px;\n    color: var(~'@{arco-cssvars-prefix}-color-text-1');\n    line-height: 38px;\n    text-align: center;\n    border-top: 1px solid @calendar-color-border;\n    cursor: pointer;\n  }\n\n  &-rtl {\n    direction: rtl;\n  }\n\n  &-rtl &-header-icon {\n    margin-right: 0;\n    margin-left: 12px;\n    transform: scaleX(-1);\n  }\n\n  // rtl\n  &-rtl &-week-list-item {\n    text-align: right;\n  }\n\n  &-rtl&-mode-month:not(&-panel) &-cell:not(:last-child) {\n    border-right: 0;\n    border-left: 1px solid @calendar-color-border;\n  }\n\n  &-rtl &-header-value-year {\n    margin-right: 0;\n    margin-left: 8px;\n  }\n\n  &-rtl &-header-value-month {\n    margin-right: 0;\n    margin-left: 32px;\n  }\n}\n"
  },
  {
    "path": "packages/web-vue/components/calendar/style/index.ts",
    "content": "import '../../style/index.less';\nimport './index.less';\nimport '../../button/style';\nimport '../../select/style';\nimport '../../radio/style';\n"
  },
  {
    "path": "packages/web-vue/components/calendar/style/token.less",
    "content": "@import '../../style/theme/index.less';\n\n@calendar-color-border: var(~'@{arco-cssvars-prefix}-color-neutral-3');\n\n@calendar-header-padding-horizontal: 24px;\n@calendar-header-padding-vertical: 24px;\n\n@calendar-panel-date-cell-padding-vertical: 4px;\n@calendar-panel-date-cell-circle-height: 24px;\n@calendar-panel-year-cell-padding-vertical: 4px;\n@calendar-panel-year-cell-circle-height: 24px;\n\n@calendar-color-switch-icon: var(~'@{arco-cssvars-prefix}-color-text-2');\n@calendar-color-bg-switch-icon: var(~'@{arco-cssvars-prefix}-color-bg-5');\n@calendar-color-bg-switch-icon_hover: var(\n  ~'@{arco-cssvars-prefix}-color-fill-3'\n);\n\n@calendar-color-text-title: var(~'@{arco-cssvars-prefix}-color-text-1');\n@calendar-color-cell-text-in-view: var(~'@{arco-cssvars-prefix}-color-text-1');\n@calendar-color-cell-text-not-in-view: var(\n  ~'@{arco-cssvars-prefix}-color-text-4'\n);\n@calendar-color-bg-circle_selected: @color-primary-6;\n@calendar-color-bg-cell-in-range: var(\n  ~'@{arco-cssvars-prefix}-color-primary-light-1'\n);\n@calendar-color-bg-cell-disabled: var(~'@{arco-cssvars-prefix}-color-fill-1');\n@calendar-color-text-cell-range-boundary: var(\n  ~'@{arco-cssvars-prefix}-color-white'\n);\n@calendar-color-bg-cell-range-boundary: @color-primary-6;\n@calendar-color-bg-cell-hover-in-range: var(\n  ~'@{arco-cssvars-prefix}-color-primary-light-1'\n);\n@calendar-color-text-cell-hover-range-boundary: var(\n  ~'@{arco-cssvars-prefix}-color-text-1'\n);\n@calendar-color-bg-cell-hover-range-boundary: var(\n  ~'@{arco-cssvars-prefix}-color-primary-light-2'\n);\n\n@calendar-panel-color-text-cell_hover: @color-primary-6;\n@calendar-panel-color-bg-cell_hover: var(\n  ~'@{arco-cssvars-prefix}-color-primary-light-1'\n);\n@calendar-panel-color-text-cell_selected: var(\n  ~'@{arco-cssvars-prefix}-color-white'\n);\n@calendar-panel-color-bg-cell_selected: @color-primary-6;\n@calendar-panel-color-current-time-dot: @color-primary-6;\n\n// 不放到风格配置平台\n@calendar-panel-cell-boundary-border-radius: (\n  (\n      @calendar-panel-date-cell-circle-height +\n        @calendar-panel-date-cell-padding-vertical * 2\n    ) / 2\n);\n@calendar-color-box-shadow: var(\n  ~'@{arco-cssvars-prefix}-color-primary-light-3'\n);\n"
  },
  {
    "path": "packages/web-vue/components/calendar/week.tsx",
    "content": "import { defineComponent, toRefs, PropType } from 'vue';\nimport { Dayjs } from 'dayjs';\nimport { getPrefixCls } from '../_utils/global-config';\nimport { useI18n } from '../locale';\n\nexport default defineComponent({\n  name: 'Week',\n  props: {\n    mode: {\n      type: String as PropType<'day' | 'week' | 'month' | 'year'>,\n    },\n    dayStartOfWeek: {\n      type: Number as PropType<0 | 1>,\n    },\n    isWeek: {\n      type: Boolean,\n    },\n    panel: {\n      type: Boolean,\n    },\n    value: {\n      type: Object as PropType<Dayjs>,\n      required: true,\n    },\n    selectHandler: {\n      type: Function as PropType<(time: Dayjs, disabled: boolean) => void>,\n    },\n    pageShowData: {\n      type: Object as PropType<Dayjs>,\n      required: true,\n    },\n    pageData: {\n      type: Array,\n    },\n  },\n  setup(props) {\n    const { dayStartOfWeek, isWeek, panel, mode } = toRefs(props);\n    const prefixCls = getPrefixCls('calendar-week-list');\n    const { t } = useI18n();\n    const weekList = [\n      'monday',\n      'tuesday',\n      'wednesday',\n      'thursday',\n      'friday',\n      'saturday',\n    ];\n    if (dayStartOfWeek.value === 0) {\n      weekList.unshift('sunday');\n    } else {\n      weekList.push('sunday');\n    }\n    if (isWeek.value) {\n      weekList.unshift('self');\n    }\n    return () => (\n      <div class={prefixCls}>\n        {weekList.map((w) => (\n          <div class={`${prefixCls}-item`} key={w}>\n            {t(\n              `calendar.week.${\n                panel.value || mode.value === 'year' ? 'short' : 'long'\n              }.${w}`\n            )}\n          </div>\n        ))}\n      </div>\n    );\n  },\n});\n"
  },
  {
    "path": "packages/web-vue/components/calendar/year.tsx",
    "content": "import { defineComponent, computed, toRefs, inject, PropType } from 'vue';\nimport { Dayjs } from 'dayjs';\nimport { padStart } from '../_utils/pad';\nimport { dayjs } from '../_utils/date';\nimport Month from './month';\nimport useCellClassName from './hooks/useCellClassName';\nimport { getPrefixCls } from '../_utils/global-config';\nimport { useI18n } from '../locale';\n\nconst MONTHS = [\n  'January',\n  'February',\n  'March',\n  'April',\n  'May',\n  'June',\n  'July',\n  'August',\n  'September',\n  'October',\n  'November',\n  'December',\n].map((month, index) => {\n  return {\n    name: month,\n    value: index,\n  };\n});\n\nconst monthGroup = Array(3);\nfor (let i = 0; i < 3; i++) {\n  monthGroup[i] = MONTHS.slice(i * 4, 4 * (i + 1));\n}\n\nconst monthGroupPanel = Array(4);\nfor (let i = 0; i < 4; i++) {\n  monthGroupPanel[i] = MONTHS.slice(i * 3, 3 * (i + 1));\n}\nexport default defineComponent({\n  name: 'Year',\n  props: {\n    mode: {\n      type: String as PropType<'month' | 'year'>,\n      required: true,\n    },\n    dayStartOfWeek: {\n      type: Number as PropType<0 | 1>,\n      required: true,\n    },\n    value: {\n      type: Object as PropType<Dayjs>,\n      required: true,\n    },\n    isWeek: {\n      type: Boolean,\n    },\n    panel: {\n      type: Boolean,\n      default: false,\n    },\n    pageShowData: {\n      type: Object as PropType<Dayjs>,\n      required: true,\n    },\n    pageData: {\n      type: Array,\n    },\n    selectHandler: {\n      type: Function as PropType<(time: Dayjs, disabled: boolean) => void>,\n      required: true,\n    },\n  },\n  setup(props) {\n    // const {\n    //   mergedPageShowDate,\n    //   panel,\n    //   onMouseEnterCell,\n    //   disabledDate,\n    //   selectHandler,\n    //   mode,\n    // } = toRefs(props);\n    const prefixCls = getPrefixCls('calendar');\n    const getCellClassName = computed(() =>\n      useCellClassName({\n        prefixCls,\n        mergedValue: props.value,\n        panel: false,\n        innerMode: props.mode,\n        rangeValues: [],\n        hoverRangeValues: [],\n        isSameTime: (current: Dayjs, target: Dayjs) =>\n          current.isSame(target, 'month'),\n      })\n    );\n    const { t } = useI18n();\n    const showYear = computed(() => props.pageShowData.year());\n\n    const mg = props.panel ? monthGroupPanel : monthGroup;\n    return () => (\n      <div class={`${prefixCls}-year`}>\n        {mg.map((row, rowIndex) => (\n          <div class={`${prefixCls}-year-row`} key={rowIndex}>\n            {row.map((col: any) => {\n              const time = dayjs(\n                `${showYear.value}-${padStart(col.value + 1, 2, '0')}-01`\n              );\n              // const disabled =\n              //   typeof disabledDate === 'function' && disabledDate(time);\n              const divProps = props.panel\n                ? { onClick: () => props.selectHandler(time, false) }\n                : {};\n\n              return (\n                <div\n                  key={col.value}\n                  class={getCellClassName.value({ ...col, time }, false)}\n                >\n                  {props.panel ? (\n                    <div class={`${prefixCls}-date`} {...divProps}>\n                      <div class={`${prefixCls}-date-value`}>\n                        {t(`calendar.month.short.${col.name}`)}\n                      </div>\n                    </div>\n                  ) : (\n                    <div class={`${prefixCls}-month-with-days`}>\n                      <div class={`${prefixCls}-month-title`}>\n                        {t(`calendar.month.long.${col.name}`)}\n                      </div>\n                      <Month\n                        pageShowDate={props.pageShowData}\n                        pageData={props.pageData}\n                        dayStartOfWeek={props.dayStartOfWeek}\n                        selectHandler={props.selectHandler}\n                        isWeek={props.isWeek}\n                        cell\n                        current={col.value}\n                        value={props.value}\n                        mode={props.mode}\n                      />\n                    </div>\n                  )}\n                </div>\n              );\n            })}\n          </div>\n        ))}\n      </div>\n    );\n  },\n});\n"
  },
  {
    "path": "packages/web-vue/components/card/CHANGELOG.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.56.2\n\n`2024-09-13`\n\n### 🆎 TypeScript\n\n- update the types of headerStyle and bodyStyle ([#3268](https://github.com/arco-design/arco-design-vue/pull/3268))\n\n\n## 2.10.1\n\n`2021-12-14`\n\n### 🐛 BugFix\n\n- Fix the problem that the content of slots is not updated ([#380](https://github.com/arco-design/arco-design-vue/pull/380))\n\n"
  },
  {
    "path": "packages/web-vue/components/card/CHANGELOG.zh-CN.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.56.2\n\n`2024-09-13`\n\n### 🆎 类型修正\n\n- 更新headerStyle与bodyStyle的类型 ([#3268](https://github.com/arco-design/arco-design-vue/pull/3268))\n\n\n## 2.10.1\n\n`2021-12-14`\n\n### 🐛 问题修复\n\n- 修复 slots 内容存在不更新的问题 ([#380](https://github.com/arco-design/arco-design-vue/pull/380))\n\n"
  },
  {
    "path": "packages/web-vue/components/card/README.en-US.md",
    "content": "```yaml\nmeta:\n  type: Component\n  category: Data Display\ntitle: Card\ndescription: Card is generally used as a concise introduction or a large plate and entrance of information.\n```\n\n*Auto translate by google.*\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/hoverable.md\n\n@import ./__demo__/bordered.md\n\n@import ./__demo__/content.md\n\n@import ./__demo__/meta.md\n\n@import ./__demo__/row.md\n\n@import ./__demo__/grid.md\n\n@import ./__demo__/inner.md\n\n@import ./__demo__/actions.md\n\n## API\n\n\n### `<card>` Props\n\n|Attribute|Description|Type|Default|\n|---|---|---|:---:|\n|bordered|Whether to render the border|`boolean`|`true`|\n|loading|Loading status|`boolean`|`false`|\n|hoverable|Can be hovered|`boolean`|`false`|\n|size|Size of card|`'medium' \\| 'small'`|`'medium'`|\n|header-style|The additional css style to apply to card head|`CSSProperties`|`() => ({})`|\n|body-style|The additional css style to apply to card content|`CSSProperties`|`() => ({})`|\n|title|Title of card|`string`|`-`|\n|extra|Content to render in the top-right corner of the card|`string`|`-`|\n### `<card>` Slots\n\n|Slot Name|Description|Parameters|\n|---|---|---|\n|actions|The action list which shows at the bottom of the Card|-|\n|cover|Cover of card|-|\n|extra|Content to render in the top-right corner of the card|-|\n|title|Title of card|-|\n\n\n\n\n### `<card-meta>` Props\n\n|Attribute|Description|Type|Default|\n|---|---|---|:---:|\n|title|Title of card|`string`|`-`|\n|description|Description of card|`string`|`-`|\n### `<card-meta>` Slots\n\n|Slot Name|Description|Parameters|\n|---|---|---|\n|description|Description of card|-|\n|title|Title of card|-|\n|avatar|Avatar of card|-|\n\n\n\n\n### `<card-grid>` Props\n\n|Attribute|Description|Type|Default|\n|---|---|---|:---:|\n|hoverable|Whether to hover|`boolean`|`false`|\n\n\n"
  },
  {
    "path": "packages/web-vue/components/card/README.zh-CN.md",
    "content": "```yaml\nmeta:\n  type: 组件\n  category: 数据展示\ntitle: 卡片 Card\ndescription: 将信息分类后分标题、详情等区域聚合展现，一般作为简洁介绍或者信息的大盘和入口。\n```\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/hoverable.md\n\n@import ./__demo__/bordered.md\n\n@import ./__demo__/content.md\n\n@import ./__demo__/meta.md\n\n@import ./__demo__/row.md\n\n@import ./__demo__/grid.md\n\n@import ./__demo__/inner.md\n\n@import ./__demo__/actions.md\n\n## API\n\n\n### `<card>` Props\n\n|参数名|描述|类型|默认值|\n|---|---|---|:---:|\n|bordered|是否有边框|`boolean`|`true`|\n|loading|是否为加载中|`boolean`|`false`|\n|hoverable|是否可悬浮|`boolean`|`false`|\n|size|卡片尺寸|`'medium' \\| 'small'`|`'medium'`|\n|header-style|自定义标题区域样式|`CSSProperties`|`() => ({})`|\n|body-style|内容区域自定义样式|`CSSProperties`|`() => ({})`|\n|title|卡片标题|`string`|`-`|\n|extra|卡片右上角的操作区域|`string`|`-`|\n### `<card>` Slots\n\n|插槽名|描述|参数|\n|---|:---:|---|\n|actions|卡片底部的操作组|-|\n|cover|卡片封面|-|\n|extra|卡片右上角的操作区域|-|\n|title|卡片标题|-|\n\n\n\n\n### `<card-meta>` Props\n\n|参数名|描述|类型|默认值|\n|---|---|---|:---:|\n|title|标题|`string`|`-`|\n|description|描述|`string`|`-`|\n### `<card-meta>` Slots\n\n|插槽名|描述|参数|\n|---|:---:|---|\n|description|描述|-|\n|title|标题|-|\n|avatar|头像|-|\n\n\n\n\n### `<card-grid>` Props\n\n|参数名|描述|类型|默认值|\n|---|---|---|:---:|\n|hoverable|是否可以悬浮|`boolean`|`false`|\n\n\n"
  },
  {
    "path": "packages/web-vue/components/card/TEMPLATE.md",
    "content": "## zh-CN\n```yaml\nmeta:\n  type: 组件\n  category: 数据展示\ntitle: 卡片 Card\ndescription: 将信息分类后分标题、详情等区域聚合展现，一般作为简洁介绍或者信息的大盘和入口。\n```\n---\n## en-US\n```yaml\nmeta:\n  type: Component\n  category: Data Display\ntitle: Card\ndescription: Card is generally used as a concise introduction or a large plate and entrance of information.\n```\n---\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/hoverable.md\n\n@import ./__demo__/bordered.md\n\n@import ./__demo__/content.md\n\n@import ./__demo__/meta.md\n\n@import ./__demo__/row.md\n\n@import ./__demo__/grid.md\n\n@import ./__demo__/inner.md\n\n@import ./__demo__/actions.md\n\n## API\n\n%%API(card.tsx)%%\n\n%%API(card-meta.tsx)%%\n\n%%API(card-grid.vue)%%\n"
  },
  {
    "path": "packages/web-vue/components/card/__demo__/actions.md",
    "content": "```yaml\ntitle:\n  zh-CN: 支持更多内容配置\n  en-US: With Actions\n```\n\n## zh-CN\n\n`actions` slot 可以用于展示底部按钮组。\n\n---\n\n## en-US\n\nThe `actions` slot can be used to display the bottom button group.\n\n---\n\n```vue\n<template>\n  <a-card :style=\"{ width: '360px' }\">\n    <template #actions>\n      <span class=\"icon-hover\"> <IconThumbUp /> </span>\n      <span class=\"icon-hover\"> <IconShareInternal /> </span>\n      <span class=\"icon-hover\"> <IconMore /> </span>\n    </template>\n    <template #cover>\n      <div\n        :style=\"{\n          height: '204px',\n          overflow: 'hidden',\n        }\"\n      >\n        <img\n          :style=\"{ width: '100%', transform: 'translateY(-20px)' }\"\n          alt=\"dessert\"\n          src=\"https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a20012a2d4d5b9db43dfc6a01fe508c0.png~tplv-uwbnlip3yd-webp.webp\"\n        />\n      </div>\n    </template>\n    <a-card-meta title=\"Card Title\" description=\"This is the description\">\n      <template #avatar>\n        <div\n          :style=\"{ display: 'flex', alignItems: 'center', color: '#1D2129' }\"\n        >\n          <a-avatar :size=\"24\" :style=\"{ marginRight: '8px' }\">\n            A\n          </a-avatar>\n          <a-typography-text>Username</a-typography-text>\n        </div>\n      </template>\n    </a-card-meta>\n  </a-card>\n</template>\n\n<script>\nimport {\n  IconThumbUp,\n  IconShareInternal,\n  IconMore,\n} from '@arco-design/web-vue/es/icon';\n\nexport default {\n  components: { IconThumbUp, IconShareInternal, IconMore },\n};\n</script>\n<style scoped>\n.icon-hover {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n  border-radius: 50%;\n  transition: all 0.1s;\n}\n.icon-hover:hover {\n  background-color: rgb(var(--gray-2));\n}\n</style>\n```\n"
  },
  {
    "path": "packages/web-vue/components/card/__demo__/basic.md",
    "content": "```yaml\ntitle:\n  zh-CN: 基本用法\n  en-US: Basic Usage\n```\n\n## zh-CN\n\n常规的内容容器，可承载文字、列表、图片、段落，常用于模块划分和内容概览。\n\n---\n\n## en-US\n\nConventional content containers can hold text, lists, pictures, and paragraphs, and are often used for module division and content overview\n\n---\n\n```vue\n<template>\n  <div :style=\"{ display: 'flex' }\">\n    <a-card :style=\"{ width: '360px' }\" title=\"Arco Card\">\n      <template #extra>\n        <a-link>More</a-link>\n      </template>\n      ByteDance's core product, Toutiao (\"Headlines\"), is a content platform in\n      China and around the world. Toutiao started out as a news recommendation\n      engine and gradually evolved into a platform delivering content in various\n      formats.\n    </a-card>\n  </div>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/card/__demo__/bordered.md",
    "content": "```yaml\ntitle:\n  zh-CN: 无边框卡片\n  en-US: No Border\n```\n\n## zh-CN\n\n设置 `bordered` 为 `false` 来使用无边框卡片。\n\n---\n\n## en-US\n\nSet `bordered` to `false` to use borderless cards.\n\n---\n\n```vue\n<template>\n  <div\n    :style=\"{\n      display: 'flex',\n      width: '100%',\n      boxSizing: 'border-box',\n      padding: '40px',\n      backgroundColor: 'var(--color-fill-2)',\n    }\"\n  >\n    <a-card :style=\"{ width: '360px' }\" title=\"Arco Card\" :bordered=\"false\">\n      <template #extra>\n        <a-link>More</a-link>\n      </template>\n      Card content\n      <br />\n      Card content\n    </a-card>\n    <a-card\n      :style=\"{ width: '360px', marginLeft: '24px' }\"\n      title=\"Hover me\"\n      hoverable\n      :bordered=\"false\"\n    >\n      <template #extra>\n        <a-link>More</a-link>\n      </template>\n      Card content\n      <br />\n      Card content\n    </a-card>\n  </div>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/card/__demo__/content.md",
    "content": "```yaml\ntitle:\n  zh-CN: 简洁卡片\n  en-US: Only Content\n```\n\n## zh-CN\n\n卡片可以只有内容区域。\n\n---\n\n## en-US\n\nA card that only has a content area.\n\n---\n\n```vue\n<template>\n  <a-card hoverable :style=\"{ width: '360px', marginBottom: '20px' }\">\n    <div\n      :style=\"{\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'space-between',\n      }\"\n    >\n      <span\n        :style=\"{ display: 'flex', alignItems: 'center', color: '#1D2129' }\"\n      >\n        <a-avatar\n          :style=\"{ marginRight: '8px', backgroundColor: '#165DFF' }\"\n          :size=\"28\"\n        >\n          A\n        </a-avatar>\n        <a-typography-text>Username</a-typography-text>\n      </span>\n      <a-link>More</a-link>\n    </div>\n  </a-card>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/card/__demo__/grid.md",
    "content": "```yaml\ntitle:\n  zh-CN: 网络型内嵌卡片\n  en-US: Card Grid\n```\n\n## zh-CN\n\n通过 `Card.Grid` 来使用卡片内容区隔模式。\n\n---\n\n## en-US\n\nUse `Card.Grid` to use the card content segmentation mode.\n\n---\n\n```vue\n<template>\n  <a-card :bordered=\"false\" :style=\"{ width: '100%' }\">\n    <a-card-grid\n      v-for=\"(_, index) in new Array(7)\"\n      :key=\"index\"\n      :hoverable=\"index % 2 === 0\"\n      :style=\"{ width: '25%' }\"\n    >\n      <a-card\n        class=\"card-demo\"\n        title=\"Arco Card\"\n        :bordered=\"false\"\n      >\n        <template #extra>\n          <a-link>More</a-link>\n        </template>\n        <p :style=\"{ margin: 0 }\">\n          {{ index % 2 === 0 ? 'Card allow to hover' : 'Card content' }}\n        </p>\n      </a-card>\n    </a-card-grid>\n  </a-card>\n</template>\n<style scoped>\n.card-demo {\n  width: 100%;\n}\n.card-demo :deep(.arco-card-header) {\n  border: none;\n}\n</style>\n```\n"
  },
  {
    "path": "packages/web-vue/components/card/__demo__/hoverable.md",
    "content": "```yaml\ntitle:\n  zh-CN: 鼠标悬浮样式\n  en-US: Hoverable\n```\n\n## zh-CN\n\n指定 `hoverable` 来为卡片添加鼠标悬浮样式，同时你可以通过样式覆盖来自定义悬浮样式。\n\n---\n\n## en-US\n\nSet `hoverable` to add a mouse hover style to the card, and you can customize the hover style through style override.\n\n---\n\n```vue\n<template>\n  <div :style=\"{ display: 'flex' }\">\n    <a-card :style=\"{ width: '360px' }\" title=\"Arco Card\" hoverable>\n      <template #extra>\n        <a-link>More</a-link>\n      </template>\n      Card content <br />\n      Card content\n    </a-card>\n    <a-card\n      class=\"card-demo\"\n      title=\"Custom hover style\"\n      hoverable\n    >\n      <template #extra>\n        <a-link>More</a-link>\n      </template>\n      Card content <br />\n      Card content\n    </a-card>\n  </div>\n</template>\n<style scoped>\n.card-demo {\n  width: 360px;\n  margin-left: 24px;\n  transition-property: all;\n}\n.card-demo:hover {\n  transform: translateY(-4px);\n}\n</style>\n```\n"
  },
  {
    "path": "packages/web-vue/components/card/__demo__/inner.md",
    "content": "```yaml\ntitle:\n  zh-CN: 内部卡片\n  en-US: Inner Card\n```\n\n## zh-CN\n\n卡片中可以嵌套其他卡片组件。\n\n---\n\n## en-US\n\nOther card components can be nested in the card.\n\n---\n\n```vue\n<template>\n  <a-card title=\"Arco Card\">\n    <a-card :style=\"{ marginBottom: '20px' }\" title=\"Inner Card Title\">\n      <template #extra>\n        <a-link>More</a-link>\n      </template>\n      Inner Card Content\n    </a-card>\n    <a-card title=\"Inner Card Title\">\n      <template #extra>\n        <a-link>More</a-link>\n      </template>\n      Inner Card Content\n    </a-card>\n  </a-card>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/card/__demo__/meta.md",
    "content": "```yaml\ntitle:\n  zh-CN: 更灵活的内容展示\n  en-US: Meta\n```\n\n## zh-CN\n\n使用 `Card.Meta` 支持更加灵活的内容（封面、头像、 标题、描述信息）\n\n---\n\n## en-US\n\nUse `Card.Meta` to support more flexible content (cover, avatar, title, description)\n\n---\n\n```vue\n<template>\n  <a-card hoverable :style=\"{ width: '360px' }\">\n    <template #cover>\n      <div\n        :style=\"{\n          height: '204px',\n          overflow: 'hidden',\n        }\"\n      >\n        <img\n          :style=\"{ width: '100%', transform: 'translateY(-20px)' }\"\n          alt=\"dessert\"\n          src=\"https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a20012a2d4d5b9db43dfc6a01fe508c0.png~tplv-uwbnlip3yd-webp.webp\"\n        />\n      </div>\n    </template>\n    <a-card-meta title=\"Card Title\">\n      <template #description>\n        Card content <br />\n        Card content\n      </template>\n    </a-card-meta>\n  </a-card>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/card/__demo__/row.md",
    "content": "```yaml\ntitle:\n  zh-CN: 栅格卡片\n  en-US: With Row\n```\n\n## zh-CN\n\n在系统概览页面常常和栅格进行配合。\n\n---\n\n## en-US\n\nThe system overview page often cooperates with the grid.\n\n---\n\n```vue\n<template>\n  <div\n    :style=\"{\n      boxSizing: 'border-box',\n      width: '100%',\n      padding: '40px',\n      backgroundColor: 'var(--color-fill-2)',\n    }\"\n  >\n    <a-row :gutter=\"20\" :style=\"{ marginBottom: '20px' }\">\n      <a-col :span=\"8\">\n        <a-card title=\"Arco Card\" :bordered=\"false\" :style=\"{ width: '100%' }\">\n          <template #extra>\n            <a-link>More</a-link>\n          </template>\n          Card content\n        </a-card>\n      </a-col>\n      <a-col :span=\"8\">\n        <a-card title=\"Arco Card\" :bordered=\"false\" :style=\"{ width: '100%' }\">\n          <template #extra>\n            <a-link>More</a-link>\n          </template>\n          Card content\n        </a-card>\n      </a-col>\n      <a-col :span=\"8\">\n        <a-card title=\"Arco Card\" :bordered=\"false\" :style=\"{ width: '100%' }\">\n          <template #extra>\n            <a-link>More</a-link>\n          </template>\n          Card content\n        </a-card>\n      </a-col>\n    </a-row>\n    <a-row :gutter=\"20\">\n      <a-col :span=\"16\">\n        <a-card title=\"Arco Card\" :bordered=\"false\" :style=\"{ width: '100%' }\">\n          <template #extra>\n            <a-link>More</a-link>\n          </template>\n          Card content\n        </a-card>\n      </a-col>\n      <a-col :span=\"8\">\n        <a-card title=\"Arco Card\" :bordered=\"false\" :style=\"{ width: '100%' }\">\n          <template #extra>\n            <a-link>More</a-link>\n          </template>\n          Card content\n        </a-card>\n      </a-col>\n    </a-row>\n  </div>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/card/__test__/__snapshots__/demo.test.ts.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`<card> demo: render [actions] correctly 1`] = `\n\"<div class=\\\\\"arco-card arco-card-size-medium arco-card-bordered\\\\\" style=\\\\\"width: 360px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-card-cover\\\\\">\n    <div style=\\\\\"height: 204px; overflow: hidden;\\\\\"><img style=\\\\\"width: 100%; transform: translateY(-20px);\\\\\" alt=\\\\\"dessert\\\\\" src=\\\\\"https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a20012a2d4d5b9db43dfc6a01fe508c0.png~tplv-uwbnlip3yd-webp.webp\\\\\"></div>\n  </div>\n  <div class=\\\\\"arco-card-body\\\\\">\n    <div class=\\\\\"arco-card-meta\\\\\">\n      <div class=\\\\\"arco-card-meta-content\\\\\">\n        <div class=\\\\\"arco-card-meta-title\\\\\">Card Title</div>\n        <div class=\\\\\"arco-card-meta-description\\\\\">This is the description</div>\n      </div>\n      <div class=\\\\\"arco-card-meta-footer\\\\\">\n        <div class=\\\\\"arco-card-meta-avatar\\\\\">\n          <div style=\\\\\"display: flex; align-items: center; color: rgb(29, 33, 41);\\\\\">\n            <div style=\\\\\"width: 24px; height: 24px; font-size: 12px; margin-right: 8px;\\\\\" class=\\\\\"arco-avatar arco-avatar-circle\\\\\"><span class=\\\\\"arco-avatar-text\\\\\"> A </span>\n              <!--v-if-->\n            </div><span class=\\\\\"arco-typography\\\\\">Username<!----><!--v-if--><!--v-if--><!--v-if--></span>\n          </div>\n        </div>\n        <div class=\\\\\"arco-card-actions\\\\\">\n          <div class=\\\\\"arco-card-actions-right\\\\\"><span class=\\\\\"arco-card-actions-item\\\\\"><span class=\\\\\"icon-hover\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-thumb-up\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M7 17v26m35.17-21.394-5.948 18.697a1 1 0 0 1-.953.697H14V19h3l9.403-12.223a1 1 0 0 1 1.386-.196l2.535 1.87a6 6 0 0 1 2.044 6.974L31 19h9.265a2 2 0 0 1 1.906 2.606Z\\\\\"></path></svg></span></span><span class=\\\\\"arco-card-actions-item\\\\\"><span class=\\\\\"icon-hover\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-share-internal\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M40 35v6H8v-6m1.108-4c1.29-8.868 13.917-15.85 29.392-15.998M30 6l9 9-9 9\\\\\"></path></svg></span></span><span class=\\\\\"arco-card-actions-item\\\\\"><span class=\\\\\"icon-hover\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-more\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M38 25v-2h2v2h-2ZM23 25v-2h2v2h-2ZM8 25v-2h2v2H8Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path><path d=\\\\\"M38 25v-2h2v2h-2ZM23 25v-2h2v2h-2ZM8 25v-2h2v2H8Z\\\\\"></path></svg></span></span></div>\n        </div>\n      </div>\n    </div>\n    <div class=\\\\\"arco-card-actions\\\\\">\n      <div class=\\\\\"arco-card-actions-right\\\\\"><span class=\\\\\"arco-card-actions-item\\\\\"><span class=\\\\\"icon-hover\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-thumb-up\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M7 17v26m35.17-21.394-5.948 18.697a1 1 0 0 1-.953.697H14V19h3l9.403-12.223a1 1 0 0 1 1.386-.196l2.535 1.87a6 6 0 0 1 2.044 6.974L31 19h9.265a2 2 0 0 1 1.906 2.606Z\\\\\"></path></svg></span></span><span class=\\\\\"arco-card-actions-item\\\\\"><span class=\\\\\"icon-hover\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-share-internal\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M40 35v6H8v-6m1.108-4c1.29-8.868 13.917-15.85 29.392-15.998M30 6l9 9-9 9\\\\\"></path></svg></span></span><span class=\\\\\"arco-card-actions-item\\\\\"><span class=\\\\\"icon-hover\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-more\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M38 25v-2h2v2h-2ZM23 25v-2h2v2h-2ZM8 25v-2h2v2H8Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path><path d=\\\\\"M38 25v-2h2v2h-2ZM23 25v-2h2v2h-2ZM8 25v-2h2v2H8Z\\\\\"></path></svg></span></span></div>\n    </div>\n  </div>\n</div>\"\n`;\n\nexports[`<card> demo: render [basic] correctly 1`] = `\n\"<div style=\\\\\"display: flex;\\\\\">\n  <div class=\\\\\"arco-card arco-card-size-medium arco-card-bordered\\\\\" style=\\\\\"width: 360px;\\\\\">\n    <div class=\\\\\"arco-card-header\\\\\">\n      <div class=\\\\\"arco-card-header-title\\\\\">Arco Card</div>\n      <div class=\\\\\"arco-card-header-extra\\\\\"><a class=\\\\\"arco-link arco-link-status-normal\\\\\">\n          <!--v-if-->More\n        </a></div>\n    </div>\n    <!---->\n    <div class=\\\\\"arco-card-body\\\\\"> ByteDance's core product, Toutiao (\\\\\"Headlines\\\\\"), is a content platform in China and around the world. Toutiao started out as a news recommendation engine and gradually evolved into a platform delivering content in various formats.\n      <!---->\n    </div>\n  </div>\n</div>\"\n`;\n\nexports[`<card> demo: render [bordered] correctly 1`] = `\n\"<div style=\\\\\"display: flex; width: 100%; box-sizing: border-box; padding: 40px;\\\\\">\n  <div class=\\\\\"arco-card arco-card-size-medium\\\\\" style=\\\\\"width: 360px;\\\\\">\n    <div class=\\\\\"arco-card-header\\\\\">\n      <div class=\\\\\"arco-card-header-title\\\\\">Arco Card</div>\n      <div class=\\\\\"arco-card-header-extra\\\\\"><a class=\\\\\"arco-link arco-link-status-normal\\\\\">\n          <!--v-if-->More\n        </a></div>\n    </div>\n    <!---->\n    <div class=\\\\\"arco-card-body\\\\\"> Card content <br> Card content\n      <!---->\n    </div>\n  </div>\n  <div class=\\\\\"arco-card arco-card-size-medium arco-card-hoverable\\\\\" style=\\\\\"width: 360px; margin-left: 24px;\\\\\">\n    <div class=\\\\\"arco-card-header\\\\\">\n      <div class=\\\\\"arco-card-header-title\\\\\">Hover me</div>\n      <div class=\\\\\"arco-card-header-extra\\\\\"><a class=\\\\\"arco-link arco-link-status-normal\\\\\">\n          <!--v-if-->More\n        </a></div>\n    </div>\n    <!---->\n    <div class=\\\\\"arco-card-body\\\\\"> Card content <br> Card content\n      <!---->\n    </div>\n  </div>\n</div>\"\n`;\n\nexports[`<card> demo: render [content] correctly 1`] = `\n\"<div class=\\\\\"arco-card arco-card-size-medium arco-card-bordered arco-card-hoverable\\\\\" style=\\\\\"width: 360px; margin-bottom: 20px;\\\\\">\n  <!---->\n  <!---->\n  <div class=\\\\\"arco-card-body\\\\\">\n    <div style=\\\\\"display: flex; align-items: center; justify-content: space-between;\\\\\"><span style=\\\\\"display: flex; align-items: center; color: rgb(29, 33, 41);\\\\\"><div style=\\\\\"width: 28px; height: 28px; font-size: 14px; margin-right: 8px; background-color: rgb(22, 93, 255);\\\\\" class=\\\\\"arco-avatar arco-avatar-circle\\\\\"><span class=\\\\\"arco-avatar-text\\\\\"> A </span>\n      <!--v-if-->\n    </div><span class=\\\\\"arco-typography\\\\\">Username<!----><!--v-if--><!--v-if--><!--v-if--></span></span><a class=\\\\\"arco-link arco-link-status-normal\\\\\">\n      <!--v-if-->More\n    </a>\n  </div>\n  <!---->\n</div>\n</div>\"\n`;\n\nexports[`<card> demo: render [grid] correctly 1`] = `\n\"<div class=\\\\\"arco-card arco-card-size-medium\\\\\" style=\\\\\"width: 100%;\\\\\">\n  <!---->\n  <!---->\n  <div class=\\\\\"arco-card-body\\\\\">\n    <div class=\\\\\"arco-card-grid arco-card-grid-hoverable\\\\\" style=\\\\\"width: 25%;\\\\\">\n      <div class=\\\\\"arco-card arco-card-size-medium card-demo\\\\\">\n        <div class=\\\\\"arco-card-header\\\\\">\n          <div class=\\\\\"arco-card-header-title\\\\\">Arco Card</div>\n          <div class=\\\\\"arco-card-header-extra\\\\\"><a class=\\\\\"arco-link arco-link-status-normal\\\\\">\n              <!--v-if-->More\n            </a></div>\n        </div>\n        <!---->\n        <div class=\\\\\"arco-card-body\\\\\">\n          <p style=\\\\\"margin: 0px;\\\\\">Card allow to hover</p>\n          <!---->\n        </div>\n      </div>\n    </div>\n    <div class=\\\\\"arco-card-grid\\\\\" style=\\\\\"width: 25%;\\\\\">\n      <div class=\\\\\"arco-card arco-card-size-medium card-demo\\\\\">\n        <div class=\\\\\"arco-card-header\\\\\">\n          <div class=\\\\\"arco-card-header-title\\\\\">Arco Card</div>\n          <div class=\\\\\"arco-card-header-extra\\\\\"><a class=\\\\\"arco-link arco-link-status-normal\\\\\">\n              <!--v-if-->More\n            </a></div>\n        </div>\n        <!---->\n        <div class=\\\\\"arco-card-body\\\\\">\n          <p style=\\\\\"margin: 0px;\\\\\">Card content</p>\n          <!---->\n        </div>\n      </div>\n    </div>\n    <div class=\\\\\"arco-card-grid arco-card-grid-hoverable\\\\\" style=\\\\\"width: 25%;\\\\\">\n      <div class=\\\\\"arco-card arco-card-size-medium card-demo\\\\\">\n        <div class=\\\\\"arco-card-header\\\\\">\n          <div class=\\\\\"arco-card-header-title\\\\\">Arco Card</div>\n          <div class=\\\\\"arco-card-header-extra\\\\\"><a class=\\\\\"arco-link arco-link-status-normal\\\\\">\n              <!--v-if-->More\n            </a></div>\n        </div>\n        <!---->\n        <div class=\\\\\"arco-card-body\\\\\">\n          <p style=\\\\\"margin: 0px;\\\\\">Card allow to hover</p>\n          <!---->\n        </div>\n      </div>\n    </div>\n    <div class=\\\\\"arco-card-grid\\\\\" style=\\\\\"width: 25%;\\\\\">\n      <div class=\\\\\"arco-card arco-card-size-medium card-demo\\\\\">\n        <div class=\\\\\"arco-card-header\\\\\">\n          <div class=\\\\\"arco-card-header-title\\\\\">Arco Card</div>\n          <div class=\\\\\"arco-card-header-extra\\\\\"><a class=\\\\\"arco-link arco-link-status-normal\\\\\">\n              <!--v-if-->More\n            </a></div>\n        </div>\n        <!---->\n        <div class=\\\\\"arco-card-body\\\\\">\n          <p style=\\\\\"margin: 0px;\\\\\">Card content</p>\n          <!---->\n        </div>\n      </div>\n    </div>\n    <div class=\\\\\"arco-card-grid arco-card-grid-hoverable\\\\\" style=\\\\\"width: 25%;\\\\\">\n      <div class=\\\\\"arco-card arco-card-size-medium card-demo\\\\\">\n        <div class=\\\\\"arco-card-header\\\\\">\n          <div class=\\\\\"arco-card-header-title\\\\\">Arco Card</div>\n          <div class=\\\\\"arco-card-header-extra\\\\\"><a class=\\\\\"arco-link arco-link-status-normal\\\\\">\n              <!--v-if-->More\n            </a></div>\n        </div>\n        <!---->\n        <div class=\\\\\"arco-card-body\\\\\">\n          <p style=\\\\\"margin: 0px;\\\\\">Card allow to hover</p>\n          <!---->\n        </div>\n      </div>\n    </div>\n    <div class=\\\\\"arco-card-grid\\\\\" style=\\\\\"width: 25%;\\\\\">\n      <div class=\\\\\"arco-card arco-card-size-medium card-demo\\\\\">\n        <div class=\\\\\"arco-card-header\\\\\">\n          <div class=\\\\\"arco-card-header-title\\\\\">Arco Card</div>\n          <div class=\\\\\"arco-card-header-extra\\\\\"><a class=\\\\\"arco-link arco-link-status-normal\\\\\">\n              <!--v-if-->More\n            </a></div>\n        </div>\n        <!---->\n        <div class=\\\\\"arco-card-body\\\\\">\n          <p style=\\\\\"margin: 0px;\\\\\">Card content</p>\n          <!---->\n        </div>\n      </div>\n    </div>\n    <div class=\\\\\"arco-card-grid arco-card-grid-hoverable\\\\\" style=\\\\\"width: 25%;\\\\\">\n      <div class=\\\\\"arco-card arco-card-size-medium card-demo\\\\\">\n        <div class=\\\\\"arco-card-header\\\\\">\n          <div class=\\\\\"arco-card-header-title\\\\\">Arco Card</div>\n          <div class=\\\\\"arco-card-header-extra\\\\\"><a class=\\\\\"arco-link arco-link-status-normal\\\\\">\n              <!--v-if-->More\n            </a></div>\n        </div>\n        <!---->\n        <div class=\\\\\"arco-card-body\\\\\">\n          <p style=\\\\\"margin: 0px;\\\\\">Card allow to hover</p>\n          <!---->\n        </div>\n      </div>\n    </div>\n    <!---->\n  </div>\n</div>\"\n`;\n\nexports[`<card> demo: render [hoverable] correctly 1`] = `\n\"<div style=\\\\\"display: flex;\\\\\">\n  <div class=\\\\\"arco-card arco-card-size-medium arco-card-bordered arco-card-hoverable\\\\\" style=\\\\\"width: 360px;\\\\\">\n    <div class=\\\\\"arco-card-header\\\\\">\n      <div class=\\\\\"arco-card-header-title\\\\\">Arco Card</div>\n      <div class=\\\\\"arco-card-header-extra\\\\\"><a class=\\\\\"arco-link arco-link-status-normal\\\\\">\n          <!--v-if-->More\n        </a></div>\n    </div>\n    <!---->\n    <div class=\\\\\"arco-card-body\\\\\"> Card content <br> Card content\n      <!---->\n    </div>\n  </div>\n  <div class=\\\\\"arco-card arco-card-size-medium arco-card-bordered arco-card-hoverable card-demo\\\\\">\n    <div class=\\\\\"arco-card-header\\\\\">\n      <div class=\\\\\"arco-card-header-title\\\\\">Custom hover style</div>\n      <div class=\\\\\"arco-card-header-extra\\\\\"><a class=\\\\\"arco-link arco-link-status-normal\\\\\">\n          <!--v-if-->More\n        </a></div>\n    </div>\n    <!---->\n    <div class=\\\\\"arco-card-body\\\\\"> Card content <br> Card content\n      <!---->\n    </div>\n  </div>\n</div>\"\n`;\n\nexports[`<card> demo: render [inner] correctly 1`] = `\n\"<div class=\\\\\"arco-card arco-card-size-medium arco-card-bordered\\\\\">\n  <div class=\\\\\"arco-card-header\\\\\">\n    <div class=\\\\\"arco-card-header-title\\\\\">Arco Card</div>\n    <!---->\n  </div>\n  <!---->\n  <div class=\\\\\"arco-card-body\\\\\">\n    <div class=\\\\\"arco-card arco-card-size-medium arco-card-bordered\\\\\" style=\\\\\"margin-bottom: 20px;\\\\\">\n      <div class=\\\\\"arco-card-header\\\\\">\n        <div class=\\\\\"arco-card-header-title\\\\\">Inner Card Title</div>\n        <div class=\\\\\"arco-card-header-extra\\\\\"><a class=\\\\\"arco-link arco-link-status-normal\\\\\">\n            <!--v-if-->More\n          </a></div>\n      </div>\n      <!---->\n      <div class=\\\\\"arco-card-body\\\\\"> Inner Card Content\n        <!---->\n      </div>\n    </div>\n    <div class=\\\\\"arco-card arco-card-size-medium arco-card-bordered\\\\\">\n      <div class=\\\\\"arco-card-header\\\\\">\n        <div class=\\\\\"arco-card-header-title\\\\\">Inner Card Title</div>\n        <div class=\\\\\"arco-card-header-extra\\\\\"><a class=\\\\\"arco-link arco-link-status-normal\\\\\">\n            <!--v-if-->More\n          </a></div>\n      </div>\n      <!---->\n      <div class=\\\\\"arco-card-body\\\\\"> Inner Card Content\n        <!---->\n      </div>\n    </div>\n    <!---->\n  </div>\n</div>\"\n`;\n\nexports[`<card> demo: render [meta] correctly 1`] = `\n\"<div class=\\\\\"arco-card arco-card-size-medium arco-card-bordered arco-card-hoverable\\\\\" style=\\\\\"width: 360px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-card-cover\\\\\">\n    <div style=\\\\\"height: 204px; overflow: hidden;\\\\\"><img style=\\\\\"width: 100%; transform: translateY(-20px);\\\\\" alt=\\\\\"dessert\\\\\" src=\\\\\"https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a20012a2d4d5b9db43dfc6a01fe508c0.png~tplv-uwbnlip3yd-webp.webp\\\\\"></div>\n  </div>\n  <div class=\\\\\"arco-card-body\\\\\">\n    <div class=\\\\\"arco-card-meta\\\\\">\n      <div class=\\\\\"arco-card-meta-content\\\\\">\n        <div class=\\\\\"arco-card-meta-title\\\\\">Card Title</div>\n        <div class=\\\\\"arco-card-meta-description\\\\\"> Card content <br> Card content </div>\n      </div>\n      <!---->\n    </div>\n    <!---->\n  </div>\n</div>\"\n`;\n\nexports[`<card> demo: render [row] correctly 1`] = `\n\"<div style=\\\\\"box-sizing: border-box; width: 100%; padding: 40px;\\\\\">\n  <div class=\\\\\"arco-row arco-row-align-start arco-row-justify-start\\\\\" style=\\\\\"margin-left: -10px; margin-right: -10px; margin-bottom: 20px;\\\\\">\n    <div class=\\\\\"arco-col arco-col-8\\\\\" style=\\\\\"padding-left: 10px; padding-right: 10px;\\\\\">\n      <div class=\\\\\"arco-card arco-card-size-medium\\\\\" style=\\\\\"width: 100%;\\\\\">\n        <div class=\\\\\"arco-card-header\\\\\">\n          <div class=\\\\\"arco-card-header-title\\\\\">Arco Card</div>\n          <div class=\\\\\"arco-card-header-extra\\\\\"><a class=\\\\\"arco-link arco-link-status-normal\\\\\">\n              <!--v-if-->More\n            </a></div>\n        </div>\n        <!---->\n        <div class=\\\\\"arco-card-body\\\\\"> Card content\n          <!---->\n        </div>\n      </div>\n    </div>\n    <div class=\\\\\"arco-col arco-col-8\\\\\" style=\\\\\"padding-left: 10px; padding-right: 10px;\\\\\">\n      <div class=\\\\\"arco-card arco-card-size-medium\\\\\" style=\\\\\"width: 100%;\\\\\">\n        <div class=\\\\\"arco-card-header\\\\\">\n          <div class=\\\\\"arco-card-header-title\\\\\">Arco Card</div>\n          <div class=\\\\\"arco-card-header-extra\\\\\"><a class=\\\\\"arco-link arco-link-status-normal\\\\\">\n              <!--v-if-->More\n            </a></div>\n        </div>\n        <!---->\n        <div class=\\\\\"arco-card-body\\\\\"> Card content\n          <!---->\n        </div>\n      </div>\n    </div>\n    <div class=\\\\\"arco-col arco-col-8\\\\\" style=\\\\\"padding-left: 10px; padding-right: 10px;\\\\\">\n      <div class=\\\\\"arco-card arco-card-size-medium\\\\\" style=\\\\\"width: 100%;\\\\\">\n        <div class=\\\\\"arco-card-header\\\\\">\n          <div class=\\\\\"arco-card-header-title\\\\\">Arco Card</div>\n          <div class=\\\\\"arco-card-header-extra\\\\\"><a class=\\\\\"arco-link arco-link-status-normal\\\\\">\n              <!--v-if-->More\n            </a></div>\n        </div>\n        <!---->\n        <div class=\\\\\"arco-card-body\\\\\"> Card content\n          <!---->\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\\\\\"arco-row arco-row-align-start arco-row-justify-start\\\\\" style=\\\\\"margin-left: -10px; margin-right: -10px;\\\\\">\n    <div class=\\\\\"arco-col arco-col-16\\\\\" style=\\\\\"padding-left: 10px; padding-right: 10px;\\\\\">\n      <div class=\\\\\"arco-card arco-card-size-medium\\\\\" style=\\\\\"width: 100%;\\\\\">\n        <div class=\\\\\"arco-card-header\\\\\">\n          <div class=\\\\\"arco-card-header-title\\\\\">Arco Card</div>\n          <div class=\\\\\"arco-card-header-extra\\\\\"><a class=\\\\\"arco-link arco-link-status-normal\\\\\">\n              <!--v-if-->More\n            </a></div>\n        </div>\n        <!---->\n        <div class=\\\\\"arco-card-body\\\\\"> Card content\n          <!---->\n        </div>\n      </div>\n    </div>\n    <div class=\\\\\"arco-col arco-col-8\\\\\" style=\\\\\"padding-left: 10px; padding-right: 10px;\\\\\">\n      <div class=\\\\\"arco-card arco-card-size-medium\\\\\" style=\\\\\"width: 100%;\\\\\">\n        <div class=\\\\\"arco-card-header\\\\\">\n          <div class=\\\\\"arco-card-header-title\\\\\">Arco Card</div>\n          <div class=\\\\\"arco-card-header-extra\\\\\"><a class=\\\\\"arco-link arco-link-status-normal\\\\\">\n              <!--v-if-->More\n            </a></div>\n        </div>\n        <!---->\n        <div class=\\\\\"arco-card-body\\\\\"> Card content\n          <!---->\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\"\n`;\n"
  },
  {
    "path": "packages/web-vue/components/card/__test__/demo.test.ts",
    "content": "import demoTest from '../../../scripts/demo-test';\n\ndemoTest('card');\n"
  },
  {
    "path": "packages/web-vue/components/card/__test__/index.test.ts",
    "content": "import { mount } from '@vue/test-utils';\nimport Card from '../index';\n\nconst { Meta, Grid } = Card;\n\ndescribe('Card', () => {\n  test('Should have prefix', () => {\n    const wrapper = mount(Card);\n    expect(wrapper.classes()).toContain('arco-card');\n  });\n\n  test('Title should work', () => {\n    const wrapper = mount(Card, {\n      props: {\n        title: 'Card title',\n      },\n    });\n    const titleElement = wrapper.find('.arco-card-header-title');\n    expect(titleElement.text()).toContain('Card title');\n  });\n\n  test('Extra slot should work', () => {\n    const wrapper = mount(Card, {\n      slots: {\n        extra: `<div id='extra-content'>Extra content</div>`,\n      },\n    });\n    const extraElement = wrapper.find('#extra-content');\n    expect(extraElement.exists()).toBe(true);\n  });\n\n  test('Card meta should work', () => {\n    const wrapper = mount(Meta, {\n      props: {\n        title: 'Card meta title',\n      },\n    });\n    const titleElement = wrapper.find('.arco-card-meta-title');\n    expect(titleElement.text()).toContain('Card meta title');\n  });\n\n  test('Card grid should work', () => {\n    const wrapper = mount(Grid, {\n      slots: {\n        default: [Card, Card, Card],\n      },\n    });\n    expect(wrapper.classes()).toContain('arco-card-grid');\n    const cards = wrapper.findAll('.arco-card');\n    expect(cards.length).toBe(3);\n  });\n});\n"
  },
  {
    "path": "packages/web-vue/components/card/card-grid.vue",
    "content": "<template>\n  <div :class=\"cls\">\n    <slot />\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, computed, inject, onMounted } from 'vue';\nimport { getPrefixCls } from '../_utils/global-config';\nimport { CardContext, cardInjectionKey } from './context';\n\nexport default defineComponent({\n  name: 'CardGrid',\n  props: {\n    /**\n     * @zh 是否可以悬浮\n     * @en Whether to hover\n     */\n    hoverable: {\n      type: Boolean,\n      default: false,\n    },\n  },\n  setup(props) {\n    const prefixCls = getPrefixCls('card-grid');\n\n    const context = inject<CardContext>(cardInjectionKey);\n\n    onMounted(() => {\n      if (context) {\n        context.hasGrid = true;\n      }\n    });\n\n    const cls = computed(() => {\n      return [\n        prefixCls,\n        {\n          [`${prefixCls}-hoverable`]: props.hoverable,\n        },\n      ];\n    });\n    return {\n      cls,\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/card/card-meta.tsx",
    "content": "import { defineComponent, inject, onMounted } from 'vue';\nimport { getPrefixCls } from '../_utils/global-config';\nimport { CardContext, cardInjectionKey } from './context';\n\nexport const SIZES = ['default', 'small'] as const;\nexport type SizeType = typeof SIZES[number];\n\nexport default defineComponent({\n  name: 'CardMeta',\n  props: {\n    /**\n     * @zh 标题\n     * @en Title of card\n     */\n    title: {\n      type: String,\n    },\n    /**\n     * @zh 描述\n     * @en Description of card\n     */\n    description: {\n      type: String,\n    },\n  },\n  /**\n   * @zh 头像\n   * @en Avatar of card\n   * @slot avatar\n   */\n  /**\n   * @zh 标题\n   * @en Title of card\n   * @slot title\n   */\n  /**\n   * @zh 描述\n   * @en Description of card\n   * @slot description\n   */\n  setup(props, { slots }) {\n    const prefixCls = getPrefixCls('card-meta');\n\n    const context = inject<CardContext>(cardInjectionKey);\n\n    onMounted(() => {\n      if (context) {\n        context.hasMeta = true;\n      }\n    });\n\n    return () => {\n      const hasTitle = Boolean(slots.title ?? props.title);\n      const hasDesc = Boolean(slots.description ?? props.description);\n\n      return (\n        <div class={prefixCls}>\n          {(hasTitle || hasDesc) && (\n            <div class={`${prefixCls}-content`}>\n              {hasTitle && (\n                <div class={`${prefixCls}-title`}>\n                  {slots.title?.() ?? props.title}\n                </div>\n              )}\n              {hasDesc && (\n                <div class={`${prefixCls}-description`}>\n                  {slots.description?.() ?? props.description}\n                </div>\n              )}\n            </div>\n          )}\n          {(slots.avatar || context?.slots.actions) && (\n            <div\n              class={[\n                `${prefixCls}-footer `,\n                {\n                  [`${prefixCls}-footer-only-actions`]: !slots.avatar,\n                },\n              ]}\n            >\n              {slots.avatar && (\n                <div class={`${prefixCls}-avatar`}>{slots.avatar()}</div>\n              )}\n              {context &&\n                context.slots.actions &&\n                context.renderActions(context.slots.actions())}\n            </div>\n          )}\n        </div>\n      );\n    };\n  },\n});\n"
  },
  {
    "path": "packages/web-vue/components/card/card.tsx",
    "content": "import {\n  defineComponent,\n  PropType,\n  computed,\n  reactive,\n  provide,\n  VNode,\n  toRefs,\n  CSSProperties,\n} from 'vue';\nimport { getPrefixCls } from '../_utils/global-config';\nimport Spin from '../spin';\nimport { cardInjectionKey } from './context';\nimport { getAllElements } from '../_utils/vue-utils';\nimport { useSize } from '../_hooks/use-size';\n\nexport default defineComponent({\n  name: 'Card',\n  components: {\n    Spin,\n  },\n  props: {\n    /**\n     * @zh 是否有边框\n     * @en Whether to render the border\n     */\n    bordered: {\n      type: Boolean,\n      default: true,\n    },\n    /**\n     * @zh 是否为加载中\n     * @en Loading status\n     */\n    loading: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 是否可悬浮\n     * @en Can be hovered\n     */\n    hoverable: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 卡片尺寸\n     * @en Size of card\n     * @values 'medium', 'small'\n     * @defaultValue 'medium'\n     */\n    size: {\n      type: String as PropType<'medium' | 'small'>,\n    },\n    /**\n     * @zh 自定义标题区域样式\n     * @en The additional css style to apply to card head\n     */\n    headerStyle: {\n      type: Object as PropType<CSSProperties>,\n      default: () => ({}),\n    },\n    /**\n     * @zh 内容区域自定义样式\n     * @en The additional css style to apply to card content\n     */\n    bodyStyle: {\n      type: Object as PropType<CSSProperties>,\n      default: () => ({}),\n    },\n    /**\n     * @zh 卡片标题\n     * @en Title of card\n     */\n    title: {\n      type: String,\n    },\n    /**\n     * @zh 卡片右上角的操作区域\n     * @en Content to render in the top-right corner of the card\n     */\n    extra: {\n      type: String,\n    },\n  },\n  /**\n   * @zh 卡片标题\n   * @en Title of card\n   * @slot title\n   */\n  /**\n   * @zh 卡片右上角的操作区域\n   * @en Content to render in the top-right corner of the card\n   * @slot extra\n   */\n  /**\n   * @zh 卡片封面\n   * @en Cover of card\n   * @slot cover\n   */\n  /**\n   * @zh 卡片底部的操作组\n   * @en The action list which shows at the bottom of the Card\n   * @slot actions\n   */\n  setup(props, { slots }) {\n    const prefixCls = getPrefixCls('card');\n    const { size } = toRefs(props);\n    const { mergedSize: _mergedSize } = useSize(size);\n    const mergedSize = computed(() => {\n      if (_mergedSize.value === 'small' || _mergedSize.value === 'mini') {\n        return 'small';\n      }\n      return 'medium';\n    });\n\n    const renderActions = (vns: VNode[]) => {\n      const actions = getAllElements(vns);\n\n      return (\n        <div class={`${prefixCls}-actions`}>\n          <div class={`${prefixCls}-actions-right`}>\n            {actions.map((action, index) => (\n              <span key={`action-${index}`} class={`${prefixCls}-actions-item`}>\n                {action}\n              </span>\n            ))}\n          </div>\n        </div>\n      );\n    };\n\n    const cardContext = reactive({\n      hasMeta: false,\n      hasGrid: false,\n      slots,\n      renderActions,\n    });\n    provide(cardInjectionKey, cardContext);\n\n    const cls = computed(() => [\n      prefixCls,\n      `${prefixCls}-size-${mergedSize.value}`,\n      {\n        [`${prefixCls}-loading`]: props.loading,\n        [`${prefixCls}-bordered`]: props.bordered,\n        [`${prefixCls}-hoverable`]: props.hoverable,\n        [`${prefixCls}-contain-grid`]: cardContext.hasGrid,\n      },\n    ]);\n\n    return () => {\n      const hasTitle = Boolean(slots.title ?? props.title);\n      const hasExtra = Boolean(slots.extra ?? props.extra);\n\n      return (\n        <div class={cls.value}>\n          {(hasTitle || hasExtra) && (\n            <div\n              class={[\n                `${prefixCls}-header`,\n                { [`${prefixCls}-header-no-title`]: !hasTitle },\n              ]}\n              style={props.headerStyle}\n            >\n              {hasTitle && (\n                <div class={`${prefixCls}-header-title`}>\n                  {slots.title?.() ?? props.title}\n                </div>\n              )}\n              {hasExtra && (\n                <div class={`${prefixCls}-header-extra`}>\n                  {slots.extra?.() ?? props.extra}\n                </div>\n              )}\n            </div>\n          )}\n          {slots.cover && (\n            <div class={`${prefixCls}-cover`}>{slots.cover()}</div>\n          )}\n          <div class={`${prefixCls}-body`} style={props.bodyStyle}>\n            {props.loading ? <Spin /> : slots.default?.()}\n            {slots.actions &&\n              !cardContext.hasMeta &&\n              renderActions(slots.actions())}\n          </div>\n        </div>\n      );\n    };\n  },\n});\n"
  },
  {
    "path": "packages/web-vue/components/card/context.ts",
    "content": "import { InjectionKey, Slots, VNode } from 'vue';\n\nexport interface CardContext {\n  hasMeta: boolean;\n  hasGrid: boolean;\n  slots: Slots;\n  renderActions: (vns: VNode[]) => JSX.Element;\n}\n\nexport const cardInjectionKey: InjectionKey<CardContext> = Symbol('ArcoCard');\n"
  },
  {
    "path": "packages/web-vue/components/card/index.ts",
    "content": "import type { App } from 'vue';\nimport type { ArcoOptions } from '../_utils/types';\nimport { setGlobalConfig, getComponentPrefix } from '../_utils/global-config';\nimport _Card from './card';\nimport _CardMeta from './card-meta';\nimport _CardGrid from './card-grid.vue';\n\nconst Card = Object.assign(_Card, {\n  Meta: _CardMeta,\n  Grid: _CardGrid,\n  install: (app: App, options?: ArcoOptions) => {\n    setGlobalConfig(app, options);\n    const componentPrefix = getComponentPrefix(options);\n\n    app.component(componentPrefix + _Card.name, _Card);\n    app.component(componentPrefix + _CardMeta.name, _CardMeta);\n    app.component(componentPrefix + _CardGrid.name, _CardGrid);\n  },\n});\n\nexport type CardInstance = InstanceType<typeof _Card>;\nexport type CardMetaInstance = InstanceType<typeof _CardMeta>;\nexport type CardGridInstance = InstanceType<typeof _CardGrid>;\n\nexport { _CardMeta as CardMeta, _CardGrid as CardGrid };\n\nexport default Card;\n"
  },
  {
    "path": "packages/web-vue/components/card/style/index.less",
    "content": "@import '../../style/mixins/index.less';\n@import './token.less';\n\n@card-prefix-cls: ~'@{prefix}-card';\n\n.@{card-prefix-cls} {\n  position: relative;\n  background: @card-color-bg;\n  border-radius: @card-border-radius-no-border;\n  transition: box-shadow @transition-duration-2\n    @transition-timing-function-linear;\n\n  &-header {\n    position: relative;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    box-sizing: border-box;\n    overflow: hidden;\n    border-bottom: @card-border-width-title-bottom solid @card-color-border;\n\n    &-no-title::before {\n      display: block;\n      content: ' ';\n    }\n\n    &-title {\n      flex: 1;\n      color: @card-color-title;\n      font-weight: @card-font-weight-title;\n      line-height: @line-height-base;\n      .text-ellipsis();\n    }\n\n    &-extra {\n      color: @card-color-title-extra;\n      .text-ellipsis();\n    }\n  }\n\n  &-body {\n    color: @card-color-body;\n  }\n\n  &-cover {\n    overflow: hidden;\n\n    > * {\n      display: block;\n      width: 100%;\n    }\n  }\n\n  &-actions {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    margin-top: @card-margin-top-meta-footer;\n\n    &::before {\n      visibility: hidden;\n      content: '';\n    }\n\n    &-right {\n      display: flex;\n      align-items: center;\n    }\n\n    &-item {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      color: @card-color-action;\n      cursor: pointer;\n      transition: color @transition-duration-2\n        @transition-timing-function-linear;\n      .text-ellipsis();\n\n      &:hover {\n        color: @card-color-action_hover;\n      }\n\n      &:not(:last-child) {\n        margin-right: @card-margin-right-action-item;\n      }\n    }\n  }\n\n  &-meta {\n    &-footer {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n\n      &:last-child {\n        margin-top: @card-margin-top-meta-footer;\n      }\n\n      &-only-actions::before {\n        visibility: hidden;\n        content: '';\n      }\n\n      .@{card-prefix-cls}-actions {\n        margin-top: 0;\n      }\n    }\n\n    &-title {\n      color: @card-color-title;\n      font-weight: @card-font-weight-title;\n      .text-ellipsis();\n    }\n\n    &-description:not(:first-child) {\n      margin-top: @card-margin-top-meta-description;\n    }\n  }\n\n  &-grid {\n    position: relative;\n    box-sizing: border-box;\n    width: 33.33%;\n    box-shadow: @card-border-width 0 0 0 @card-color-border,\n      0 @card-border-width 0 0 @card-color-border,\n      @card-border-width @card-border-width 0 0 @card-color-border,\n      @card-border-width 0 0 0 @card-color-border inset,\n      0 @card-border-width 0 0 @card-color-border inset;\n\n    &::before {\n      position: absolute;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n      transition: box-shadow @transition-duration-2\n        @transition-timing-function-linear;\n      content: '';\n      pointer-events: none;\n    }\n\n    &-hoverable:hover {\n      z-index: 1;\n\n      &::before {\n        box-shadow: 0 4px 10px @card-color-box-shadow;\n      }\n    }\n\n    // 避免 Card 的背景色遮住由 box-shadow 实现的 Grid 的边框\n    .@{card-prefix-cls} {\n      background: none;\n      box-shadow: none;\n    }\n  }\n\n  // 以下为特殊状态的补充\n  &-contain-grid:not(&-loading) > &-body {\n    display: flex;\n    flex-wrap: wrap;\n    margin: 0 -@card-border-width;\n    padding: 0;\n  }\n\n  &-hoverable:hover {\n    box-shadow: 0 4px 10px @card-color-box-shadow;\n  }\n\n  &-bordered {\n    border: @card-border-width solid @card-color-border;\n    border-radius: @card-border-radius;\n\n    .@{card-prefix-cls}-cover {\n      border-radius: @card-border-radius @card-border-radius 0 0;\n    }\n  }\n\n  &-loading &-body {\n    overflow: hidden;\n    text-align: center;\n  }\n\n  // 不同尺寸\n  .size(@name, @size) {\n    &-size-@{name} {\n      font-size: ~'@{card-size-@{size}-font-size}';\n\n      .@{card-prefix-cls}-header {\n        height: ~'@{card-size-@{size}-height-title}';\n        padding: ~'@{card-size-@{size}-padding-vertical-title}' ~'@{card-size-@{size}-padding-horizontal-title}';\n      }\n\n      .@{card-prefix-cls}-header-title,\n      .@{card-prefix-cls}-meta-title {\n        font-size: ~'@{card-size-@{size}-font-size-title}';\n      }\n\n      .@{card-prefix-cls}-header-extra {\n        font-size: ~'@{card-size-@{size}-font-size-title-extra}';\n      }\n\n      .@{card-prefix-cls}-body {\n        padding: ~'@{card-size-@{size}-padding-vertical-body}' ~'@{card-size-@{size}-padding-horizontal-body}';\n      }\n    }\n  }\n\n  .size(medium, default);\n  .size(small, small);\n}\n\n// dark mode\n@{arco-theme-tag}[arco-theme='dark'] {\n  .@{card-prefix-cls}-grid-hoverable:hover::before,\n  .@{card-prefix-cls}-hoverable:hover {\n    box-shadow: 0 4px 10px @card-color-box-shadow_dark;\n  }\n}\n"
  },
  {
    "path": "packages/web-vue/components/card/style/index.ts",
    "content": "import '../../style/index.less';\nimport '../../spin/style';\nimport './index.less';\n"
  },
  {
    "path": "packages/web-vue/components/card/style/token.less",
    "content": "@import '../../style/theme/index.less';\n\n@card-size-small-height-title: @size-10;\n@card-size-small-font-size-title: @font-size-title-1;\n@card-size-small-font-size-title-extra: @font-size-body-3;\n@card-size-small-font-size: @font-size-body-3;\n@card-size-small-padding-horizontal-title: @spacing-7;\n@card-size-small-padding-vertical-title: @spacing-4;\n@card-size-small-padding-horizontal-body: @spacing-7;\n@card-size-small-padding-vertical-body: @spacing-6;\n\n@card-size-default-height-title: 46px;\n@card-size-default-font-size-title: @font-size-title-1;\n@card-size-default-font-size-title-extra: @font-size-body-3;\n@card-size-default-font-size: @font-size-body-3;\n@card-size-default-padding-horizontal-title: @spacing-7;\n@card-size-default-padding-vertical-title: @spacing-5;\n@card-size-default-padding-horizontal-body: @spacing-7;\n@card-size-default-padding-vertical-body: @spacing-7;\n\n@card-line-height: @line-height-base;\n@card-font-weight-title: @font-weight-500;\n@card-margin-top-meta-footer: @spacing-8;\n@card-margin-top-meta-description: @spacing-2;\n@card-margin-right-action-item: @spacing-6;\n\n@card-color-bg: var(~'@{arco-cssvars-prefix}-color-bg-2');\n@card-color-border: var(~'@{arco-cssvars-prefix}-color-neutral-3');\n@card-color-title: var(~'@{arco-cssvars-prefix}-color-text-1');\n@card-color-title-extra: @color-primary-6;\n@card-color-body: var(~'@{arco-cssvars-prefix}-color-text-2');\n@card-color-action: var(~'@{arco-cssvars-prefix}-color-text-2');\n@card-color-action_hover: @color-primary-6;\n@card-color-box-shadow: rgb(var(~'@{arco-cssvars-prefix}-gray-2'));\n@card-color-box-shadow_dark: rgba(var(~'@{arco-cssvars-prefix}-gray-1'), 40%);\n\n@card-border-width: @border-1;\n@card-border-width-title-bottom: @border-1;\n@card-border-radius: @radius-small;\n@card-border-radius-no-border: @radius-none;\n"
  },
  {
    "path": "packages/web-vue/components/carousel/CHANGELOG.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.39.2\n\n`2022-12-02`\n\n### 🐛 BugFix\n\n- Fix the problem that the transparent background image of `Carousel` cannot cover the previous image ([#1901](https://github.com/arco-design/arco-design-vue/pull/1901))\n\n\n## 2.26.0\n\n`2022-04-29`\n\n### 🐛 BugFix\n\n- Fixed `trigger` and `autoPlay` property settings not working ([#1059](https://github.com/arco-design/arco-design-vue/pull/1059))\n\n\n## 2.10.0\n\n`2021-12-10`\n\n### 🐛 BugFix\n\n- The out subitem is not hidden ([#343](https://github.com/arco-design/arco-design-vue/pull/343))\n\n"
  },
  {
    "path": "packages/web-vue/components/carousel/CHANGELOG.zh-CN.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.39.2\n\n`2022-12-02`\n\n### 🐛 问题修复\n\n- 修复 `Carousel` 透明背景图片无法遮罩上一张图片的问题 ([#1901](https://github.com/arco-design/arco-design-vue/pull/1901))\n\n\n## 2.26.0\n\n`2022-04-29`\n\n### 🐛 问题修复\n\n- 修复 `trigger` 和 `autoPlay` 属性设置失效的问题 ([#1059](https://github.com/arco-design/arco-design-vue/pull/1059))\n\n\n## 2.10.0\n\n`2021-12-10`\n\n### 🐛 问题修复\n\n- out 子项内未隐藏 ([#343](https://github.com/arco-design/arco-design-vue/pull/343))\n\n"
  },
  {
    "path": "packages/web-vue/components/carousel/README.en-US.md",
    "content": "```yaml\nmeta:\n  type: Component\n  category: Data Display\ntitle: Carousel\ndescription: Carousel is used to display multiple pictures, videos, or embedded frames and other content in a loop, and supports automatic playback or manual switching by the user.\n```\n\n*Auto translate by google.*\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/auto.md\n\n@import ./__demo__/indicator.md\n\n@import ./__demo__/direction.md\n\n@import ./__demo__/card.md\n\n@import ./__demo__/fade.md\n\n## API\n\n\n### `<carousel>` Props\n\n|Attribute|Description|Type|Default|\n|---|---|---|:---:|\n|current **(v-model)**|The index of current slide which starts from 1|`number`|`-`|\n|default-current|Default index of current slide|`number`|`1`|\n|auto-play|@en* Whether to automatically loop the display, or pass in `{ interval: the time interval for switching (default: 3000),<br>hoverToPause: whether to pause switching while hover (default: true) }` for configuration (object is supported from `2.14.0`)|`boolean \\| CarouselAutoPlayConfig`|`false`|\n|move-speed|The duration of the slide movement(ms)|`number`|`500`|\n|animation-name|The animation of the slide movement|`'slide' \\| 'fade' \\| 'card'`|`'slide'`|\n|trigger|How to trigger the slide switch, click/hover the indicator|`'click' \\| 'hover'`|`'click'`|\n|direction|The direction of the slide movement|`'horizontal' \\| 'vertical'`|`'horizontal'`|\n|show-arrow|When to show the arrow used to switch|`'always' \\| 'hover' \\| 'never'`|`'always'`|\n|arrow-class|The additional css class to arrow used to switch|`string`|`''`|\n|indicator-type|Type of indicator|`'line' \\| 'dot' \\| 'slider' \\| 'never'`|`'dot'`|\n|indicator-position|Position of indication|`'bottom' \\| 'top' \\| 'left' \\| 'right' \\| 'outer'`|`'bottom'`|\n|indicator-class|The additional css class to indicator|`string`|`''`|\n|transition-timing-function|How intermediate values are calculated for CSS properties being affected by a transition effect.<br>[transition-timing-function](https://developer.mozilla.org/zh-CN/docs/Web/CSS/transition-timing-function)|`string`|`'cubic-bezier(0.34, 0.69, 0.1, 1)'`|\n### `<carousel>` Events\n\n|Event Name|Description|Parameters|\n|---|---|---|\n|change|Callback when slide changes|index: `number`<br>prevIndex: `number`<br>isManual: `boolean`|\n\n\n"
  },
  {
    "path": "packages/web-vue/components/carousel/README.zh-CN.md",
    "content": "```yaml\nmeta:\n  type: 组件\n  category: 数据展示\ntitle: 图片轮播 Carousel\ndescription: 用于展示多张图片、视频或内嵌框架等内容的循环播放，支持系统自动播放或用户手动切换。\n```\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/auto.md\n\n@import ./__demo__/indicator.md\n\n@import ./__demo__/direction.md\n\n@import ./__demo__/card.md\n\n@import ./__demo__/fade.md\n\n## API\n\n\n### `<carousel>` Props\n\n|参数名|描述|类型|默认值|\n|---|---|---|:---:|\n|current **(v-model)**|当前展示索引|`number`|`-`|\n|default-current|当前展示索引|`number`|`1`|\n|auto-play|是否自动循环展示，或者传入 `{ interval: 自动切换的时间间隔(默认: 3000), hoverToPause: 鼠标悬浮时是否暂停自动切换(默认: true) }` 进行高级配置|`boolean \\| CarouselAutoPlayConfig`|`false`|\n|move-speed|幻灯片移动速率(ms)|`number`|`500`|\n|animation-name|切换动画|`'slide' \\| 'fade' \\| 'card'`|`'slide'`|\n|trigger|幻灯片切换触发方式, click/hover 指示器|`'click' \\| 'hover'`|`'click'`|\n|direction|幻灯片移动方向|`'horizontal' \\| 'vertical'`|`'horizontal'`|\n|show-arrow|切换箭头显示时机|`'always' \\| 'hover' \\| 'never'`|`'always'`|\n|arrow-class|切换箭头样式|`string`|`''`|\n|indicator-type|指示器类型，可为小方块和小圆点或不显示|`'line' \\| 'dot' \\| 'slider' \\| 'never'`|`'dot'`|\n|indicator-position|指示器位置|`'bottom' \\| 'top' \\| 'left' \\| 'right' \\| 'outer'`|`'bottom'`|\n|indicator-class|指示器的样式|`string`|`''`|\n|transition-timing-function|过渡速度曲线, 默认匀速 [transition-timing-function](https://developer.mozilla.org/zh-CN/docs/Web/CSS/transition-timing-function)|`string`|`'cubic-bezier(0.34, 0.69, 0.1, 1)'`|\n### `<carousel>` Events\n\n|事件名|描述|参数|\n|---|---|---|\n|change|幻灯片发生切换时的回调函数|index: `number`<br>prevIndex: `number`<br>isManual: `boolean`|\n\n\n"
  },
  {
    "path": "packages/web-vue/components/carousel/TEMPLATE.md",
    "content": "## zh-CN\n```yaml\nmeta:\n  type: 组件\n  category: 数据展示\ntitle: 图片轮播 Carousel\ndescription: 用于展示多张图片、视频或内嵌框架等内容的循环播放，支持系统自动播放或用户手动切换。\n```\n---\n## en-US\n```yaml\nmeta:\n  type: Component\n  category: Data Display\ntitle: Carousel\ndescription: Carousel is used to display multiple pictures, videos, or embedded frames and other content in a loop, and supports automatic playback or manual switching by the user.\n```\n---\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/auto.md\n\n@import ./__demo__/indicator.md\n\n@import ./__demo__/direction.md\n\n@import ./__demo__/card.md\n\n@import ./__demo__/fade.md\n\n## API\n\n%%API(carousel.tsx)%%\n"
  },
  {
    "path": "packages/web-vue/components/carousel/__demo__/auto.md",
    "content": "```yaml\ntitle:\n  zh-CN: 自动切换\n  en-US: Auto\n```\n\n## zh-CN\n\n可以通过 `autoPlay` 设置是否自动切换。\n可设置 `moveSpeed`, `timingFunc` 实现不同切换幻灯片效果。\n\n---\n\n## en-US\n\nYou can set whether to switch automatically through `autoPlay`.\nYou can set `moveSpeed`, `timingFunc` to achieve different switching slide effects.\n\n---\n\n```vue\n<template>\n  <a-carousel\n    :style=\"{\n      width: '600px',\n      height: '240px',\n    }\"\n    :auto-play=\"true\"\n    indicator-type=\"dot\"\n    show-arrow=\"hover\"\n  >\n    <a-carousel-item v-for=\"image in images\">\n      <img\n        :src=\"image\"\n        :style=\"{\n          width: '100%',\n        }\"\n      />\n    </a-carousel-item>\n  </a-carousel>\n</template>\n\n<script>\nexport default {\n  setup() {\n    const images = [\n      'https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/cd7a1aaea8e1c5e3d26fe2591e561798.png~tplv-uwbnlip3yd-webp.webp',\n      'https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/6480dbc69be1b5de95010289787d64f1.png~tplv-uwbnlip3yd-webp.webp',\n      'https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/0265a04fddbd77a19602a15d9d55d797.png~tplv-uwbnlip3yd-webp.webp',\n    ];\n    return {\n      images\n    }\n  },\n};\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/carousel/__demo__/basic.md",
    "content": "```yaml\ntitle:\n  zh-CN: 基本用法\n  en-US: Basic Usage\n```\n\n## zh-CN\n\n基本用法\n\n---\n\n## en-US\n\nBasic usage\n\n---\n\n```vue\n<template>\n  <a-carousel\n    :style=\"{\n      width: '600px',\n      height: '240px',\n    }\"\n    :default-current=\"2\"\n    @change=\"handleChange\"\n  >\n    <a-carousel-item v-for=\"image in images\">\n      <img\n        :src=\"image\"\n        :style=\"{\n          width: '100%',\n        }\"\n      />\n    </a-carousel-item>\n  </a-carousel>\n</template>\n\n<script>\nexport default {\n  setup() {\n    const images = [\n      'https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/cd7a1aaea8e1c5e3d26fe2591e561798.png~tplv-uwbnlip3yd-webp.webp',\n      'https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/6480dbc69be1b5de95010289787d64f1.png~tplv-uwbnlip3yd-webp.webp',\n      'https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/0265a04fddbd77a19602a15d9d55d797.png~tplv-uwbnlip3yd-webp.webp',\n    ];\n    const handleChange=(value)=>{\n      console.log(value)\n    }\n    return {\n      images,\n      handleChange\n    }\n  },\n};\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/carousel/__demo__/card.md",
    "content": "```yaml\ntitle:\n  zh-CN: 卡片化\n  en-US: Animation Card\n```\n\n## zh-CN\n\n当页面宽度方向空间空余，但高度方向空间多余时，可指定 `animation` 为 `card` 使用卡片化风格。\n\n---\n\n## en-US\n\nWhen the space in the width direction of the page is vacant, but the space in the height direction is surplus, you can specify `animation` as `card` to use card style.\n\n---\n\n```vue\n<template>\n  <a-carousel\n    :autoPlay=\"true\"\n    animation-name=\"card\"\n    show-arrow=\"never\"\n    indicator-position=\"outer\"\n    :style=\"{\n      width: '100%',\n      height: '240px',\n    }\"\n  >\n    <a-carousel-item v-for=\"image in images\" :style=\"{ width: '60%' }\">\n      <img\n        :src=\"image\"\n        :style=\"{\n          width: '100%',\n        }\"\n      />\n    </a-carousel-item>\n  </a-carousel>\n</template>\n\n<script>\nexport default {\n  setup() {\n    const images = [\n      'https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/cd7a1aaea8e1c5e3d26fe2591e561798.png~tplv-uwbnlip3yd-webp.webp',\n      'https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/6480dbc69be1b5de95010289787d64f1.png~tplv-uwbnlip3yd-webp.webp',\n      'https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/0265a04fddbd77a19602a15d9d55d797.png~tplv-uwbnlip3yd-webp.webp',\n      'https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/24e0dd27418d2291b65db1b21aa62254.png~tplv-uwbnlip3yd-webp.webp',\n    ];\n    return {\n      images\n    }\n  },\n};\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/carousel/__demo__/direction.md",
    "content": "```yaml\ntitle:\n  zh-CN: 切换方向\n  en-US: Vertical\n```\n\n## zh-CN\n\n默认情况下，`direction` 为 `horizontal`。通过设置 `direction` 为 `vertical` 来使用垂直方向切换。\n\n---\n\n## en-US\n\nBy default, the `direction` is `horizontal`. Use the vertical direction switch by setting the `direction` to `vertical`.\n\n---\n\n```vue\n<template>\n  <a-carousel\n    :style=\"{\n      width: '600px',\n      height: '240px',\n    }\"\n    show-arrow=\"never\"\n    direction=\"vertical\"\n    indicator-position=\"right\"\n  >\n    <a-carousel-item v-for=\"image in images\">\n      <img\n        :src=\"image\"\n        :style=\"{\n          width: '100%',\n        }\"\n      />\n    </a-carousel-item>\n  </a-carousel>\n</template>\n\n<script>\nexport default {\n  setup() {\n    const images = [\n      'https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/cd7a1aaea8e1c5e3d26fe2591e561798.png~tplv-uwbnlip3yd-webp.webp',\n      'https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/6480dbc69be1b5de95010289787d64f1.png~tplv-uwbnlip3yd-webp.webp',\n      'https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/0265a04fddbd77a19602a15d9d55d797.png~tplv-uwbnlip3yd-webp.webp',\n    ];\n    return {\n      images\n    }\n  },\n};\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/carousel/__demo__/fade.md",
    "content": "```yaml\ntitle:\n  zh-CN: 渐隐切换\n  en-US: Animation Fade\n```\n\n## zh-CN\n\n指定 `animation` 为 `fade` 使用渐隐切换效果。\n\n---\n\n## en-US\n\nSet `animation=fade` to use fade transition effect.\n\n---\n\n```vue\n<template>\n  <a-carousel\n    :style=\"{\n      width: '600px',\n      height: '240px',\n    }\"\n    :auto-play=\"true\"\n    animation-name=\"fade\"\n    show-arrow=\"never\"\n  >\n    <a-carousel-item v-for=\"image in images\">\n      <img\n        :src=\"image\"\n        :style=\"{\n          width: '100%',\n        }\"\n      />\n    </a-carousel-item>\n  </a-carousel>\n</template>\n\n<script>\nexport default {\n  setup() {\n    const images = [\n      'https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/cd7a1aaea8e1c5e3d26fe2591e561798.png~tplv-uwbnlip3yd-webp.webp',\n      'https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/6480dbc69be1b5de95010289787d64f1.png~tplv-uwbnlip3yd-webp.webp',\n      'https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/0265a04fddbd77a19602a15d9d55d797.png~tplv-uwbnlip3yd-webp.webp',\n    ];\n    return {\n      images\n    }\n  },\n};\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/carousel/__demo__/indicator.md",
    "content": "```yaml\ntitle:\n  zh-CN: 指示器\n  en-US: Indicator\n```\n\n## zh-CN\n\n可以指定指示器类型：`dot` | `line` | `slider` 和位置 `left` | `right` | `top` | `bottom` | `outer`。\n\n---\n\n## en-US\n\nYou can specify the indicator type: `dot` | `line` | `slider` and position `left` | `right` | `top` | `bottom` | `outer`.\n\n---\n\n```vue\n<template>\n  <a-space direction=\"vertical\" size=\"large\">\n    <a-radio-group\n      type=\"button\"\n      @change=\"updateType\"\n      style=\"{ marginBottom: '10px' }\"\n      :modelValue=\"indicatorType\"\n    >\n      <a-radio value=\"dot\">dot</a-radio>\n      <a-radio value=\"line\">line</a-radio>\n      <a-radio value=\"slider\">slider</a-radio>\n    </a-radio-group>\n    <a-radio-group\n      type=\"button\"\n      @change=\"updatePosition\"\n      :style=\"{ marginBottom: '20px' }\"\n      :modelValue=\"indicatorPosition\"\n    >\n      <a-radio value=\"left\">left</a-radio>\n      <a-radio value=\"right\">right</a-radio>\n      <a-radio value=\"top\">top</a-radio>\n      <a-radio value=\"bottom\">bottom</a-radio>\n      <a-radio value=\"outer\">outer</a-radio>\n    </a-radio-group>\n    <a-carousel\n      :indicator-type=\"indicatorType\"\n      :indicator-position=\"indicatorPosition\"\n      show-arrow=\"never\"\n      :style=\"{\n      width: '600px',\n      height: '240px',\n    }\"\n    >\n      <a-carousel-item v-for=\"image in images\">\n        <img\n          :src=\"image\"\n          :style=\"{\n          width: '100%',\n        }\"\n        />\n      </a-carousel-item>\n    </a-carousel>\n  </a-space>\n</template>\n\n<script>\nexport default {\n  data() {\n    return {\n      images: [\n        'https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/cd7a1aaea8e1c5e3d26fe2591e561798.png~tplv-uwbnlip3yd-webp.webp',\n        'https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/6480dbc69be1b5de95010289787d64f1.png~tplv-uwbnlip3yd-webp.webp',\n        'https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/0265a04fddbd77a19602a15d9d55d797.png~tplv-uwbnlip3yd-webp.webp',\n      ],\n      indicatorType: 'dot',\n      indicatorPosition: 'bottom',\n    };\n  },\n  methods: {\n    updateType(type) {\n      this.indicatorType = type;\n    },\n    updatePosition(position) {\n      this.indicatorPosition = position;\n    },\n  },\n};\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/carousel/__test__/__snapshots__/demo.test.ts.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`<carousel> demo: render [auto] correctly 1`] = `\n\"<div class=\\\\\"arco-carousel arco-carousel-indicator-position-bottom\\\\\" style=\\\\\"width: 600px; height: 240px;\\\\\">\n  <div class=\\\\\"arco-carousel-slide arco-carousel-horizontal\\\\\">\n    <div aria-hidden=\\\\\"true\\\\\" class=\\\\\"\\\\\" style=\\\\\"transition-timing-function: cubic-bezier(0.34, 0.69, 0.1, 1); transition-duration: 500ms; animation-timing-function: cubic-bezier(0.34, 0.69, 0.1, 1); animation-duration: 500ms;\\\\\"><img src=\\\\\"https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/cd7a1aaea8e1c5e3d26fe2591e561798.png~tplv-uwbnlip3yd-webp.webp\\\\\" style=\\\\\"width: 100%;\\\\\"></div>\n    <div aria-hidden=\\\\\"true\\\\\" class=\\\\\"\\\\\" style=\\\\\"transition-timing-function: cubic-bezier(0.34, 0.69, 0.1, 1); transition-duration: 500ms; animation-timing-function: cubic-bezier(0.34, 0.69, 0.1, 1); animation-duration: 500ms;\\\\\"><img src=\\\\\"https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/6480dbc69be1b5de95010289787d64f1.png~tplv-uwbnlip3yd-webp.webp\\\\\" style=\\\\\"width: 100%;\\\\\"></div>\n    <div aria-hidden=\\\\\"true\\\\\" class=\\\\\"\\\\\" style=\\\\\"transition-timing-function: cubic-bezier(0.34, 0.69, 0.1, 1); transition-duration: 500ms; animation-timing-function: cubic-bezier(0.34, 0.69, 0.1, 1); animation-duration: 500ms;\\\\\"><img src=\\\\\"https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/0265a04fddbd77a19602a15d9d55d797.png~tplv-uwbnlip3yd-webp.webp\\\\\" style=\\\\\"width: 100%;\\\\\"></div>\n  </div>\n  <!---->\n  <!---->\n</div>\"\n`;\n\nexports[`<carousel> demo: render [basic] correctly 1`] = `\n\"<div class=\\\\\"arco-carousel arco-carousel-indicator-position-bottom\\\\\" style=\\\\\"width: 600px; height: 240px;\\\\\">\n  <div class=\\\\\"arco-carousel-slide arco-carousel-horizontal\\\\\">\n    <div aria-hidden=\\\\\"true\\\\\" class=\\\\\"\\\\\" style=\\\\\"transition-timing-function: cubic-bezier(0.34, 0.69, 0.1, 1); transition-duration: 500ms; animation-timing-function: cubic-bezier(0.34, 0.69, 0.1, 1); animation-duration: 500ms;\\\\\"><img src=\\\\\"https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/cd7a1aaea8e1c5e3d26fe2591e561798.png~tplv-uwbnlip3yd-webp.webp\\\\\" style=\\\\\"width: 100%;\\\\\"></div>\n    <div aria-hidden=\\\\\"true\\\\\" class=\\\\\"\\\\\" style=\\\\\"transition-timing-function: cubic-bezier(0.34, 0.69, 0.1, 1); transition-duration: 500ms; animation-timing-function: cubic-bezier(0.34, 0.69, 0.1, 1); animation-duration: 500ms;\\\\\"><img src=\\\\\"https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/6480dbc69be1b5de95010289787d64f1.png~tplv-uwbnlip3yd-webp.webp\\\\\" style=\\\\\"width: 100%;\\\\\"></div>\n    <div aria-hidden=\\\\\"true\\\\\" class=\\\\\"\\\\\" style=\\\\\"transition-timing-function: cubic-bezier(0.34, 0.69, 0.1, 1); transition-duration: 500ms; animation-timing-function: cubic-bezier(0.34, 0.69, 0.1, 1); animation-duration: 500ms;\\\\\"><img src=\\\\\"https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/0265a04fddbd77a19602a15d9d55d797.png~tplv-uwbnlip3yd-webp.webp\\\\\" style=\\\\\"width: 100%;\\\\\"></div>\n  </div>\n  <!---->\n  <!---->\n</div>\"\n`;\n\nexports[`<carousel> demo: render [card] correctly 1`] = `\n\"<div class=\\\\\"arco-carousel arco-carousel-indicator-position-outer\\\\\" style=\\\\\"width: 100%; height: 240px;\\\\\">\n  <div class=\\\\\"arco-carousel-card arco-carousel-horizontal\\\\\">\n    <div aria-hidden=\\\\\"true\\\\\" class=\\\\\"\\\\\" style=\\\\\"transition-timing-function: cubic-bezier(0.34, 0.69, 0.1, 1); transition-duration: 500ms; animation-timing-function: cubic-bezier(0.34, 0.69, 0.1, 1); animation-duration: 500ms; width: 60%;\\\\\"><img src=\\\\\"https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/cd7a1aaea8e1c5e3d26fe2591e561798.png~tplv-uwbnlip3yd-webp.webp\\\\\" style=\\\\\"width: 100%;\\\\\"></div>\n    <div aria-hidden=\\\\\"true\\\\\" class=\\\\\"\\\\\" style=\\\\\"transition-timing-function: cubic-bezier(0.34, 0.69, 0.1, 1); transition-duration: 500ms; animation-timing-function: cubic-bezier(0.34, 0.69, 0.1, 1); animation-duration: 500ms; width: 60%;\\\\\"><img src=\\\\\"https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/6480dbc69be1b5de95010289787d64f1.png~tplv-uwbnlip3yd-webp.webp\\\\\" style=\\\\\"width: 100%;\\\\\"></div>\n    <div aria-hidden=\\\\\"true\\\\\" class=\\\\\"\\\\\" style=\\\\\"transition-timing-function: cubic-bezier(0.34, 0.69, 0.1, 1); transition-duration: 500ms; animation-timing-function: cubic-bezier(0.34, 0.69, 0.1, 1); animation-duration: 500ms; width: 60%;\\\\\"><img src=\\\\\"https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/0265a04fddbd77a19602a15d9d55d797.png~tplv-uwbnlip3yd-webp.webp\\\\\" style=\\\\\"width: 100%;\\\\\"></div>\n    <div aria-hidden=\\\\\"true\\\\\" class=\\\\\"\\\\\" style=\\\\\"transition-timing-function: cubic-bezier(0.34, 0.69, 0.1, 1); transition-duration: 500ms; animation-timing-function: cubic-bezier(0.34, 0.69, 0.1, 1); animation-duration: 500ms; width: 60%;\\\\\"><img src=\\\\\"https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/24e0dd27418d2291b65db1b21aa62254.png~tplv-uwbnlip3yd-webp.webp\\\\\" style=\\\\\"width: 100%;\\\\\"></div>\n  </div>\n  <!---->\n  <!---->\n</div>\"\n`;\n\nexports[`<carousel> demo: render [direction] correctly 1`] = `\n\"<div class=\\\\\"arco-carousel arco-carousel-indicator-position-right\\\\\" style=\\\\\"width: 600px; height: 240px;\\\\\">\n  <div class=\\\\\"arco-carousel-slide arco-carousel-vertical\\\\\">\n    <div aria-hidden=\\\\\"true\\\\\" class=\\\\\"\\\\\" style=\\\\\"transition-timing-function: cubic-bezier(0.34, 0.69, 0.1, 1); transition-duration: 500ms; animation-timing-function: cubic-bezier(0.34, 0.69, 0.1, 1); animation-duration: 500ms;\\\\\"><img src=\\\\\"https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/cd7a1aaea8e1c5e3d26fe2591e561798.png~tplv-uwbnlip3yd-webp.webp\\\\\" style=\\\\\"width: 100%;\\\\\"></div>\n    <div aria-hidden=\\\\\"true\\\\\" class=\\\\\"\\\\\" style=\\\\\"transition-timing-function: cubic-bezier(0.34, 0.69, 0.1, 1); transition-duration: 500ms; animation-timing-function: cubic-bezier(0.34, 0.69, 0.1, 1); animation-duration: 500ms;\\\\\"><img src=\\\\\"https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/6480dbc69be1b5de95010289787d64f1.png~tplv-uwbnlip3yd-webp.webp\\\\\" style=\\\\\"width: 100%;\\\\\"></div>\n    <div aria-hidden=\\\\\"true\\\\\" class=\\\\\"\\\\\" style=\\\\\"transition-timing-function: cubic-bezier(0.34, 0.69, 0.1, 1); transition-duration: 500ms; animation-timing-function: cubic-bezier(0.34, 0.69, 0.1, 1); animation-duration: 500ms;\\\\\"><img src=\\\\\"https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/0265a04fddbd77a19602a15d9d55d797.png~tplv-uwbnlip3yd-webp.webp\\\\\" style=\\\\\"width: 100%;\\\\\"></div>\n  </div>\n  <!---->\n  <!---->\n</div>\"\n`;\n\nexports[`<carousel> demo: render [fade] correctly 1`] = `\n\"<div class=\\\\\"arco-carousel arco-carousel-indicator-position-bottom\\\\\" style=\\\\\"width: 600px; height: 240px;\\\\\">\n  <div class=\\\\\"arco-carousel-fade arco-carousel-horizontal\\\\\">\n    <div aria-hidden=\\\\\"true\\\\\" class=\\\\\"\\\\\" style=\\\\\"transition-timing-function: cubic-bezier(0.34, 0.69, 0.1, 1); transition-duration: 500ms; animation-timing-function: cubic-bezier(0.34, 0.69, 0.1, 1); animation-duration: 500ms;\\\\\"><img src=\\\\\"https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/cd7a1aaea8e1c5e3d26fe2591e561798.png~tplv-uwbnlip3yd-webp.webp\\\\\" style=\\\\\"width: 100%;\\\\\"></div>\n    <div aria-hidden=\\\\\"true\\\\\" class=\\\\\"\\\\\" style=\\\\\"transition-timing-function: cubic-bezier(0.34, 0.69, 0.1, 1); transition-duration: 500ms; animation-timing-function: cubic-bezier(0.34, 0.69, 0.1, 1); animation-duration: 500ms;\\\\\"><img src=\\\\\"https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/6480dbc69be1b5de95010289787d64f1.png~tplv-uwbnlip3yd-webp.webp\\\\\" style=\\\\\"width: 100%;\\\\\"></div>\n    <div aria-hidden=\\\\\"true\\\\\" class=\\\\\"\\\\\" style=\\\\\"transition-timing-function: cubic-bezier(0.34, 0.69, 0.1, 1); transition-duration: 500ms; animation-timing-function: cubic-bezier(0.34, 0.69, 0.1, 1); animation-duration: 500ms;\\\\\"><img src=\\\\\"https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/0265a04fddbd77a19602a15d9d55d797.png~tplv-uwbnlip3yd-webp.webp\\\\\" style=\\\\\"width: 100%;\\\\\"></div>\n  </div>\n  <!---->\n  <!---->\n</div>\"\n`;\n\nexports[`<carousel> demo: render [indicator] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-vertical\\\\\" style=\\\\\"column-gap: 24px; row-gap: 24px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-radio-group-button arco-radio-group-size-medium arco-radio-group-direction-horizontal\\\\\"><label class=\\\\\"arco-radio-button arco-radio-checked\\\\\"><input type=\\\\\"radio\\\\\" checked=\\\\\"\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"dot\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">dot</span></label><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"line\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">line</span></label><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"slider\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">slider</span></label></span></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-radio-group-button arco-radio-group-size-medium arco-radio-group-direction-horizontal\\\\\" style=\\\\\"margin-bottom: 20px;\\\\\"><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"left\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">left</span></label><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"right\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">right</span></label><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"top\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">top</span></label><label class=\\\\\"arco-radio-button arco-radio-checked\\\\\"><input type=\\\\\"radio\\\\\" checked=\\\\\"\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"bottom\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">bottom</span></label><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"outer\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">outer</span></label></span></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-carousel arco-carousel-indicator-position-bottom\\\\\" style=\\\\\"width: 600px; height: 240px;\\\\\">\n      <div class=\\\\\"arco-carousel-slide arco-carousel-horizontal\\\\\">\n        <div aria-hidden=\\\\\"true\\\\\" class=\\\\\"\\\\\" style=\\\\\"transition-timing-function: cubic-bezier(0.34, 0.69, 0.1, 1); transition-duration: 500ms; animation-timing-function: cubic-bezier(0.34, 0.69, 0.1, 1); animation-duration: 500ms;\\\\\"><img src=\\\\\"https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/cd7a1aaea8e1c5e3d26fe2591e561798.png~tplv-uwbnlip3yd-webp.webp\\\\\" style=\\\\\"width: 100%;\\\\\"></div>\n        <div aria-hidden=\\\\\"true\\\\\" class=\\\\\"\\\\\" style=\\\\\"transition-timing-function: cubic-bezier(0.34, 0.69, 0.1, 1); transition-duration: 500ms; animation-timing-function: cubic-bezier(0.34, 0.69, 0.1, 1); animation-duration: 500ms;\\\\\"><img src=\\\\\"https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/6480dbc69be1b5de95010289787d64f1.png~tplv-uwbnlip3yd-webp.webp\\\\\" style=\\\\\"width: 100%;\\\\\"></div>\n        <div aria-hidden=\\\\\"true\\\\\" class=\\\\\"\\\\\" style=\\\\\"transition-timing-function: cubic-bezier(0.34, 0.69, 0.1, 1); transition-duration: 500ms; animation-timing-function: cubic-bezier(0.34, 0.69, 0.1, 1); animation-duration: 500ms;\\\\\"><img src=\\\\\"https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/0265a04fddbd77a19602a15d9d55d797.png~tplv-uwbnlip3yd-webp.webp\\\\\" style=\\\\\"width: 100%;\\\\\"></div>\n      </div>\n      <!---->\n      <!---->\n    </div>\n  </div>\n</div>\"\n`;\n"
  },
  {
    "path": "packages/web-vue/components/carousel/__test__/demo.test.ts",
    "content": "import demoTest from '../../../scripts/demo-test';\n\ndemoTest('carousel');\n"
  },
  {
    "path": "packages/web-vue/components/carousel/__test__/index.test.ts",
    "content": "import { assertDirectiveLiteral } from '@babel/types';\nimport { mount } from '@vue/test-utils';\nimport { nextTick } from 'vue';\nimport Carousel from '../index';\n\nconst { Item } = Carousel;\n\nconst assertActiveAtIndex = (wrapper: any, index: number) => {\n  const items = wrapper.findAll('.arco-carousel-indicator-item');\n  const isActiveAtIndex = items[index]\n    ?.classes()\n    .includes('arco-carousel-indicator-item-active');\n  expect(isActiveAtIndex).toBe(true);\n};\n\ndescribe('Carousel', () => {\n  beforeEach(() => {\n    jest.useFakeTimers();\n  });\n\n  afterEach(() => {\n    jest.useRealTimers();\n  });\n\n  test('Current prop should work properly', async () => {\n    const wrapper = mount(Carousel, {\n      global: {\n        components: {\n          Item,\n        },\n      },\n      slots: {\n        default: `<item v-for=\"it in 5\" :key=\"it\"><img/></item>`,\n      },\n      props: {\n        current: 3,\n        autoPlay: false,\n      },\n    });\n    await nextTick();\n    assertActiveAtIndex(wrapper, 2);\n    await wrapper.setProps({ current: 2 });\n    assertActiveAtIndex(wrapper, 1);\n  });\n\n  test('AutoPlay should work', async () => {\n    const wrapper = mount(Carousel, {\n      global: {\n        components: {\n          Item,\n        },\n      },\n      slots: {\n        default: `<item v-for=\"it in 5\" :key=\"it\"><img/></item>`,\n      },\n      props: {\n        autoPlay: {\n          interval: 50,\n        },\n      },\n    });\n    jest.advanceTimersByTime(10);\n    await nextTick();\n    assertActiveAtIndex(wrapper, 0);\n    jest.advanceTimersByTime(60);\n    await nextTick();\n    assertActiveAtIndex(wrapper, 1);\n  });\n\n  test('Clicking arrow should be able to switch carousel', async () => {\n    const wrapper = mount(Carousel, {\n      global: {\n        components: {\n          Item,\n        },\n      },\n      slots: {\n        default: `<item v-for=\"it in 5\" :key=\"it\"><img/></item>`,\n      },\n      props: {\n        autoPlay: false,\n      },\n    });\n    await nextTick();\n    const nextIndicator = wrapper.find('.arco-carousel-arrow-right');\n    assertActiveAtIndex(wrapper, 0);\n    nextIndicator.trigger('click');\n    await nextTick();\n    assertActiveAtIndex(wrapper, 1);\n  });\n\n  test('Clicking indicator should be able to switch carousel', async () => {\n    const wrapper = mount(Carousel, {\n      global: {\n        components: {\n          Item,\n        },\n      },\n      slots: {\n        default: `<item v-for=\"it in 5\" :key=\"it\"><img/></item>`,\n      },\n      props: {\n        autoPlay: false,\n      },\n    });\n    await nextTick();\n    const indicators = wrapper.findAll('.arco-carousel-indicator-item');\n    indicators[2].trigger('click');\n    await nextTick();\n    assertActiveAtIndex(wrapper, 2);\n  });\n\n  test('Should be responsive to children change', async () => {\n    const WrapperComponent = {\n      components: {\n        Item,\n        Carousel,\n      },\n      props: {\n        childrenCount: {\n          type: Number,\n        },\n      },\n      template: `\n        <carousel>\n          <item v-for=\"it in childrenCount\" :key=\"it\">\n            <img class=\"carousel-item-image\"/>\n          </item>\n        </carousel>\n      `,\n    };\n    const wrapper = mount(WrapperComponent, {\n      props: {\n        childrenCount: 5,\n      },\n    });\n    await nextTick();\n    expect(wrapper.findAll('.carousel-item-image').length).toBe(5);\n    await wrapper.setProps({ childrenCount: 1 });\n    expect(wrapper.findAll('.carousel-item-image').length).toBe(1);\n  });\n\n  test('Hover to pause should work', async () => {\n    const wrapper = mount(Carousel, {\n      global: {\n        components: {\n          Item,\n        },\n      },\n      slots: {\n        default: `<item v-for=\"it in 5\" :key=\"it\"><img/></item>`,\n      },\n      props: {\n        autoPlay: {\n          hoverToPause: true,\n          interval: 50,\n        },\n      },\n    });\n    await nextTick();\n    wrapper.trigger('mouseenter');\n    jest.advanceTimersByTime(100);\n    assertActiveAtIndex(wrapper, 0);\n  });\n\n  test('Slider indicator type should work', async () => {\n    const wrapper = mount(Carousel, {\n      global: {\n        components: {\n          Item,\n        },\n      },\n      slots: {\n        default: `<item v-for=\"it in 5\" :key=\"it\"><img/></item>`,\n      },\n      props: {\n        indicatorType: 'slider',\n      },\n    });\n    await nextTick();\n    expect(wrapper.find('.arco-carousel-indicator-slider').exists()).toBe(true);\n    wrapper.find('.arco-carousel-indicator-slider').trigger('click');\n    expect(wrapper.emitted()).toHaveProperty('click');\n  });\n});\n"
  },
  {
    "path": "packages/web-vue/components/carousel/carousel-arrow.vue",
    "content": "<template>\n  <div :class=\"cls\">\n    <div\n      :class=\"`${prefixCls}-arrow-${direction === 'vertical' ? 'top' : 'left'}`\"\n      @click=\"onPreviousClick\"\n    >\n      <IconLeft v-if=\"direction === 'horizontal'\" />\n      <IconUp v-else />\n    </div>\n    <div\n      :class=\"`${prefixCls}-arrow-${\n        direction === 'vertical' ? 'bottom' : 'right'\n      }`\"\n      @click=\"onNextClick\"\n    >\n      <IconRight v-if=\"direction === 'horizontal'\" />\n      <IconDown v-else />\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, computed } from 'vue';\nimport { getPrefixCls } from '../_utils/global-config';\nimport IconUp from '../icon/icon-up';\nimport IconDown from '../icon/icon-down';\nimport IconLeft from '../icon/icon-left';\nimport IconRight from '../icon/icon-right';\n\nexport default defineComponent({\n  name: 'Arrow',\n  components: {\n    IconUp,\n    IconDown,\n    IconLeft,\n    IconRight,\n  },\n  props: {\n    direction: {\n      type: String,\n      default: 'horizontal',\n    },\n    showArrow: {\n      type: String,\n      default: 'always',\n    },\n  },\n  emits: ['previousClick', 'nextClick'],\n  setup(props, { emit }) {\n    const prefixCls = getPrefixCls('carousel');\n\n    const onPreviousClick = (ev: MouseEvent) => {\n      emit('previousClick', ev);\n    };\n\n    const onNextClick = (ev: MouseEvent) => {\n      emit('nextClick', ev);\n    };\n\n    const cls = computed(() => [\n      `${prefixCls}-arrow`,\n      {\n        [`${prefixCls}-arrow-hover`]: props.showArrow === 'hover',\n      },\n    ]);\n\n    return {\n      prefixCls,\n      cls,\n      onPreviousClick,\n      onNextClick,\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/carousel/carousel-indicator.vue",
    "content": "<template>\n  <div :class=\"cls\" v-bind=\"eventHandlers\">\n    <span\n      v-if=\"type === 'slider'\"\n      :style=\"sliderStyle\"\n      :class=\"[`${prefixCls}-item`, `${prefixCls}-item-active`]\"\n    />\n    <template v-else>\n      <span\n        v-for=\"(_, index) in Array(count)\"\n        :key=\"index\"\n        :data-index=\"index\"\n        :class=\"[\n          `${prefixCls}-item`,\n          { [`${prefixCls}-item-active`]: index === activeIndex },\n        ]\"\n      />\n    </template>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport type { PropType } from 'vue';\nimport { defineComponent, computed } from 'vue';\nimport { getPrefixCls } from '../_utils/global-config';\nimport type {\n  CarouselIndicatorPosition,\n  CarouselIndicatorType,\n  CarouselTriggerEvent,\n} from './interface';\n\nexport default defineComponent({\n  name: 'Indicator',\n  props: {\n    count: {\n      type: Number,\n      default: 2,\n    },\n    activeIndex: {\n      type: Number,\n      default: 0,\n    },\n    type: {\n      type: String as PropType<CarouselIndicatorType>,\n      default: 'line',\n    },\n    position: {\n      type: String as PropType<CarouselIndicatorPosition>,\n      default: 'bottom',\n    },\n    trigger: {\n      type: String as PropType<CarouselTriggerEvent>,\n      default: 'click',\n    },\n  },\n  emits: ['select'],\n  setup(props, { emit }) {\n    const prefixCls = getPrefixCls('carousel-indicator');\n\n    const onClick = (event: MouseEvent) => {\n      event.preventDefault();\n      if (props.type === 'slider') {\n        const x = event.offsetX;\n        const width = (event.currentTarget as HTMLElement).clientWidth;\n        if (event.target === event.currentTarget) {\n          const index = Math.floor((x / width) * props.count);\n          index !== props.activeIndex && emit('select', index);\n        }\n      } else {\n        const index = Number.parseInt(\n          (event.target as HTMLElement).getAttribute('data-index') ?? '',\n          10\n        );\n        if (!Number.isNaN(index) && index !== props.activeIndex) {\n          emit('select', index);\n        }\n      }\n    };\n\n    const eventHandlers = computed(() => {\n      return props.trigger === 'click' ? { onClick } : { onMouseover: onClick };\n    });\n\n    const cls = computed(() => [\n      `${prefixCls}`,\n      `${prefixCls}-${props.type}`,\n      `${prefixCls}-${props.position}`,\n    ]);\n\n    const sliderStyle = computed(() => {\n      const step = 100 / props.count;\n      return { width: `${step}%`, left: `${props.activeIndex * step}%` };\n    });\n\n    return {\n      prefixCls,\n      eventHandlers,\n      cls,\n      sliderStyle,\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/carousel/carousel-item.vue",
    "content": "<template>\n  <div :aria-hidden=\"!isCurrent\" :class=\"cls\" :style=\"animationStyle\">\n    <slot />\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, getCurrentInstance, inject, computed } from 'vue';\nimport { getPrefixCls } from '../_utils/global-config';\nimport { carouselInjectionKey, CarouselContext } from './context';\n\nexport default defineComponent({\n  name: 'CarouselItem',\n  setup() {\n    const prefixCls = getPrefixCls('carousel-item');\n    const instance = getCurrentInstance();\n    const context = inject<Partial<CarouselContext>>(carouselInjectionKey, {});\n    const index = computed(\n      () => context.items?.indexOf(instance?.uid ?? -1) ?? -1\n    );\n    const isCurrent = computed(\n      () => context.mergedIndexes?.mergedIndex === index.value\n    );\n    const cls = computed(() => {\n      const { previousIndex, animationName, slideDirection, mergedIndexes } =\n        context;\n      return {\n        [`${prefixCls}-prev`]: index.value === mergedIndexes?.mergedPrevIndex,\n        [`${prefixCls}-next`]: index.value === mergedIndexes?.mergedNextIndex,\n        [`${prefixCls}-current`]: isCurrent.value,\n        [`${prefixCls}-slide-in`]:\n          animationName === 'slide' && slideDirection && isCurrent.value,\n        [`${prefixCls}-slide-out`]:\n          animationName === 'slide' &&\n          slideDirection &&\n          index.value === previousIndex,\n      };\n    });\n    const animationStyle = computed(() => {\n      const { transitionTimingFunction, moveSpeed } = context;\n      return {\n        transitionTimingFunction,\n        transitionDuration: `${moveSpeed}ms`,\n        animationTimingFunction: transitionTimingFunction,\n        animationDuration: `${moveSpeed}ms`,\n      };\n    });\n    return {\n      cls,\n      animationStyle,\n      isCurrent,\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/carousel/carousel.tsx",
    "content": "import type { PropType } from 'vue';\nimport {\n  defineComponent,\n  computed,\n  toRefs,\n  ref,\n  watchEffect,\n  onBeforeUnmount,\n  provide,\n  reactive,\n} from 'vue';\nimport { getPrefixCls } from '../_utils/global-config';\nimport CarouselIndicator from './carousel-indicator.vue';\nimport CarouselArrow from './carousel-arrow.vue';\nimport { carouselInjectionKey } from './context';\nimport { isNumber, isObject } from '../_utils/is';\nimport type {\n  CarouselArrowType,\n  CarouselAutoPlayConfig,\n  CarouselIndicatorPosition,\n  CarouselIndicatorType,\n  CarouselTriggerEvent,\n} from './interface';\nimport { Direction } from '../_utils/constant';\nimport { useChildrenComponents } from '../_hooks/use-children-components';\n\nconst DEFAULT_AUTO_PLAY = {\n  interval: 3000,\n  hoverToPause: true,\n};\n\nfunction getValidIndex(i: number, length: number): number {\n  const indexNumber = +i;\n  return typeof indexNumber === 'number' && !Number.isNaN(indexNumber)\n    ? (indexNumber + length) % length\n    : i;\n}\n\nexport default defineComponent({\n  name: 'Carousel',\n  props: {\n    /**\n     * @zh 当前展示索引\n     * @en The index of current slide which starts from 1\n     * @vModel\n     */\n    current: {\n      type: Number,\n    },\n    /**\n     * @zh 当前展示索引\n     * @en Default index of current slide\n     */\n    defaultCurrent: {\n      type: Number,\n      default: 1,\n    },\n    /**\n     * @zh 是否自动循环展示，或者传入 `{ interval: 自动切换的时间间隔(默认: 3000), hoverToPause: 鼠标悬浮时是否暂停自动切换(默认: true) }` 进行高级配置\n     * @en* Whether to automatically loop the display, or pass in `{ interval: the time interval for switching (default: 3000),\n     * hoverToPause: whether to pause switching while hover (default: true) }` for configuration (object is supported from `2.14.0`)\n     */\n    autoPlay: {\n      type: [Boolean, Object] as PropType<boolean | CarouselAutoPlayConfig>,\n      default: false,\n    },\n    /**\n     * @zh 幻灯片移动速率(ms)\n     * @en The duration of the slide movement(ms)\n     */\n    moveSpeed: {\n      type: Number,\n      default: 500,\n    },\n    /**\n     * @zh 切换动画\n     * @en The animation of the slide movement\n     */\n    animationName: {\n      type: String as PropType<'slide' | 'fade' | 'card'>,\n      default: 'slide',\n    },\n    /**\n     * @zh 幻灯片切换触发方式, click/hover 指示器\n     * @en How to trigger the slide switch, click/hover the indicator\n     * @values 'click', 'hover'\n     */\n    trigger: {\n      type: String as PropType<CarouselTriggerEvent>,\n      default: 'click',\n    },\n    /**\n     * @zh 幻灯片移动方向\n     * @en The direction of the slide movement\n     * @values 'horizontal', 'vertical'\n     */\n    direction: {\n      type: String as PropType<Direction>,\n      default: 'horizontal',\n    },\n    /**\n     * @zh 切换箭头显示时机\n     * @en When to show the arrow used to switch\n     * @values 'always', 'hover', 'never'\n     */\n    showArrow: {\n      type: String as PropType<CarouselArrowType>,\n      default: 'always',\n    },\n    /**\n     * @zh 切换箭头样式\n     * @en The additional css class to arrow used to switch\n     */\n    arrowClass: {\n      type: String,\n      default: '',\n    },\n    /**\n     * @zh 指示器类型，可为小方块和小圆点或不显示\n     * @en Type of indicator\n     * @values 'line', 'dot', 'slider', 'never'\n     */\n    indicatorType: {\n      type: String as PropType<CarouselIndicatorType>,\n      default: 'dot',\n    },\n    /**\n     * @zh 指示器位置\n     * @en Position of indication\n     * @values 'bottom', 'top', 'left', 'right', 'outer'\n     */\n    indicatorPosition: {\n      type: String as PropType<CarouselIndicatorPosition>,\n      default: 'bottom',\n    },\n    /**\n     * @zh 指示器的样式\n     * @en The additional css class to indicator\n     */\n    indicatorClass: {\n      type: String,\n      default: '',\n    },\n    /**\n     * @zh 过渡速度曲线, 默认匀速 [transition-timing-function](https://developer.mozilla.org/zh-CN/docs/Web/CSS/transition-timing-function)\n     * @en How intermediate values are calculated for CSS properties being affected by a transition effect.\n     * [transition-timing-function](https://developer.mozilla.org/zh-CN/docs/Web/CSS/transition-timing-function)\n     */\n    transitionTimingFunction: {\n      type: String,\n      default: 'cubic-bezier(0.34, 0.69, 0.1, 1)',\n    },\n  },\n  emits: {\n    'update:current': (index: number) => true,\n    /**\n     * @zh 幻灯片发生切换时的回调函数\n     * @en Callback when slide changes\n     * @param {number} index\n     * @param {number} prevIndex\n     * @param {boolean} isManual\n     */\n    'change': (index: number, prevIndex: number, isManual: boolean) => true,\n  },\n  setup(props, { emit, slots }) {\n    const { current, animationName, moveSpeed, transitionTimingFunction } =\n      toRefs(props);\n    const prefixCls = getPrefixCls('carousel');\n\n    const isPause = ref(false);\n    const previousIndex = ref<number>();\n    const slideDirection = ref<'positive' | 'negative'>();\n    const computedAutoPlay = computed<CarouselAutoPlayConfig>(() => {\n      if (isObject(props.autoPlay)) {\n        return {\n          ...DEFAULT_AUTO_PLAY,\n          ...props.autoPlay,\n        };\n      }\n      return props.autoPlay ? DEFAULT_AUTO_PLAY : {};\n    });\n    let intervalTimer = 0;\n    let animationTimer = 0;\n    const { children, components } = useChildrenComponents('CarouselItem');\n    const _index = ref(props.defaultCurrent - 1);\n\n    const mergedIndexes = computed(() => {\n      const childrenLength = components.value.length;\n      const mergedIndex = isNumber(current.value)\n        ? getValidIndex(current.value - 1, childrenLength)\n        : _index.value;\n      const prevIndex = getValidIndex(mergedIndex - 1, childrenLength);\n      const nextIndex = getValidIndex(mergedIndex + 1, childrenLength);\n      return {\n        mergedIndex,\n        mergedPrevIndex: prevIndex,\n        mergedNextIndex: nextIndex,\n      };\n    });\n\n    const carouselContext = reactive({\n      items: components,\n      slideTo,\n      mergedIndexes,\n      previousIndex,\n      animationName,\n      slideDirection,\n      transitionTimingFunction,\n      moveSpeed,\n    });\n    provide(carouselInjectionKey, carouselContext);\n\n    const clearTimer = () => {\n      if (intervalTimer) {\n        window.clearInterval(intervalTimer);\n      }\n    };\n\n    watchEffect(() => {\n      const { interval } = computedAutoPlay.value || {};\n      const { mergedNextIndex } = mergedIndexes.value;\n      const shouldInterval =\n        components.value?.length > 1 && !isPause.value && Boolean(interval);\n      clearTimer();\n      if (shouldInterval) {\n        intervalTimer = window.setInterval(() => {\n          slideTo({\n            targetIndex: mergedNextIndex,\n          });\n        }, interval);\n      }\n    });\n\n    onBeforeUnmount(() => {\n      clearTimer();\n    });\n\n    function slideTo({\n      targetIndex,\n      isNegative = false,\n      isManual = false,\n    }: {\n      targetIndex: number;\n      isNegative?: boolean;\n      isManual?: boolean;\n    }) {\n      if (!animationTimer && targetIndex !== mergedIndexes.value.mergedIndex) {\n        previousIndex.value = _index.value;\n        _index.value = targetIndex;\n        slideDirection.value = isNegative ? 'negative' : 'positive';\n        animationTimer = window.setTimeout(() => {\n          animationTimer = 0;\n        }, moveSpeed.value);\n        emit('update:current', _index.value + 1);\n        emit('change', _index.value + 1, previousIndex.value + 1, isManual);\n      }\n    }\n\n    const onPreviousClick = () =>\n      slideTo({\n        targetIndex: mergedIndexes.value.mergedPrevIndex,\n        isNegative: true,\n        isManual: true,\n      });\n\n    const onNextClick = () =>\n      slideTo({\n        targetIndex: mergedIndexes.value.mergedNextIndex,\n        isManual: true,\n      });\n\n    const onSelect = (index: number) =>\n      slideTo({\n        targetIndex: index,\n        isNegative: index < mergedIndexes.value.mergedIndex,\n        isManual: true,\n      });\n\n    const eventHandlers = computed(() => {\n      return computedAutoPlay.value.hoverToPause\n        ? {\n            onMouseenter: () => {\n              isPause.value = true;\n            },\n            onMouseleave: () => {\n              isPause.value = false;\n            },\n          }\n        : {};\n    });\n\n    const hasIndicator = computed(() => {\n      return props.indicatorType !== 'never' && components.value.length > 1;\n    });\n\n    const hasArrow = computed(() => {\n      return props.showArrow !== 'never' && components.value.length > 1;\n    });\n\n    const cls = computed(() => {\n      return [\n        prefixCls,\n        `${prefixCls}-indicator-position-${props.indicatorPosition}`,\n      ];\n    });\n\n    const contentCls = computed(() => {\n      return [\n        `${prefixCls}-${props.animationName}`,\n        `${prefixCls}-${props.direction}`,\n        { [`${prefixCls}-negative`]: slideDirection.value === 'negative' },\n      ];\n    });\n\n    const indicatorCls = computed(() => {\n      return [\n        `${prefixCls}-indicator-wrapper`,\n        `${prefixCls}-indicator-wrapper-${props.indicatorPosition}`,\n      ];\n    });\n\n    return () => {\n      children.value = slots.default?.();\n\n      return (\n        <div class={cls.value} {...eventHandlers.value}>\n          <div class={contentCls.value}>{children.value}</div>\n          {hasIndicator.value && (\n            <div class={indicatorCls.value}>\n              <CarouselIndicator\n                class={props.indicatorClass}\n                type={props.indicatorType}\n                count={components.value.length}\n                activeIndex={mergedIndexes.value.mergedIndex}\n                position={props.indicatorPosition}\n                trigger={props.trigger}\n                onSelect={onSelect}\n              />\n            </div>\n          )}\n          {hasArrow.value && (\n            <CarouselArrow\n              class={props.arrowClass}\n              direction={props.direction}\n              showArrow={props.showArrow}\n              onPreviousClick={onPreviousClick}\n              onNextClick={onNextClick}\n            />\n          )}\n        </div>\n      );\n    };\n  },\n});\n"
  },
  {
    "path": "packages/web-vue/components/carousel/context.ts",
    "content": "import { InjectionKey } from 'vue';\n\nexport interface CarouselContext {\n  items: number[];\n  slideTo: (info: {\n    targetIndex: number;\n    isNegative: boolean;\n    isManual: boolean;\n  }) => void;\n  mergedIndexes: {\n    mergedIndex: number;\n    mergedPrevIndex: number;\n    mergedNextIndex: number;\n  };\n  previousIndex: number | undefined;\n  animationName: string;\n  slideDirection: string | undefined;\n  transitionTimingFunction: string;\n  moveSpeed: number;\n}\n\nexport const carouselInjectionKey: InjectionKey<CarouselContext> =\n  Symbol('ArcoCarousel');\n"
  },
  {
    "path": "packages/web-vue/components/carousel/index.ts",
    "content": "import type { App } from 'vue';\nimport type { ArcoOptions } from '../_utils/types';\nimport { setGlobalConfig, getComponentPrefix } from '../_utils/global-config';\nimport _Carousel from './carousel';\nimport _CarouselItem from './carousel-item.vue';\n\nconst Carousel = Object.assign(_Carousel, {\n  Item: _CarouselItem,\n  install: (app: App, options?: ArcoOptions) => {\n    setGlobalConfig(app, options);\n    const componentPrefix = getComponentPrefix(options);\n\n    app.component(componentPrefix + _Carousel.name, _Carousel);\n    app.component(componentPrefix + _CarouselItem.name, _CarouselItem);\n  },\n});\n\nexport type CarouselInstance = InstanceType<typeof _Carousel>;\nexport type CarouselItemInstance = InstanceType<typeof _CarouselItem>;\n\nexport { _CarouselItem as CarouselItem };\n\nexport default Carousel;\n"
  },
  {
    "path": "packages/web-vue/components/carousel/interface.ts",
    "content": "export type CarouselTriggerEvent = 'click' | 'hover';\n\nexport type CarouselArrowType = 'always' | 'hover' | 'never';\n\nexport type CarouselIndicatorType = 'line' | 'dot' | 'slider' | 'never';\n\nexport type CarouselIndicatorPosition =\n  | 'bottom'\n  | 'top'\n  | 'left'\n  | 'right'\n  | 'outer';\n\nexport type CarouselAutoPlayConfig = {\n  interval?: number;\n  hoverToPause?: boolean;\n};\n"
  },
  {
    "path": "packages/web-vue/components/carousel/style/index.less",
    "content": "@import './token.less';\n@import './slide.less';\n\n@carousel-prefix-cls: ~'@{prefix}-carousel';\n\n.@{carousel-prefix-cls} {\n  position: relative;\n\n  &-indicator-position-outer {\n    margin-bottom: @carousel-indicator-position * 2 +\n      @carousel-indicator-dot-size;\n  }\n\n  &-slide,\n  &-card,\n  &-fade {\n    position: relative;\n    width: 100%;\n    height: 100%;\n    overflow: hidden;\n\n    > * {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      overflow: hidden;\n    }\n  }\n\n  &-item-current {\n    z-index: 1;\n  }\n\n  &-slide {\n    > *:not(.@{carousel-prefix-cls}-item-current) {\n      display: none;\n      visibility: hidden;\n    }\n\n    .item-position(@direction) {\n      .@{carousel-prefix-cls}-item-slide-out {\n        display: block;\n        animation: ~'@{prefix}-carousel-slide-@{direction}-out';\n      }\n\n      .@{carousel-prefix-cls}-item-slide-in {\n        display: block;\n        animation: ~'@{prefix}-carousel-slide-@{direction}-in';\n      }\n\n      &.@{carousel-prefix-cls}-negative {\n        .@{carousel-prefix-cls}-item-slide-out {\n          animation: ~'@{prefix}-carousel-slide-@{direction}-out-reverse';\n        }\n\n        .@{carousel-prefix-cls}-item-slide-in {\n          animation: ~'@{prefix}-carousel-slide-@{direction}-in-reverse';\n        }\n      }\n    }\n\n    &.@{carousel-prefix-cls}-horizontal {\n      .item-position(x);\n    }\n\n    &.@{carousel-prefix-cls}-vertical {\n      .item-position(y);\n    }\n  }\n\n  &-card {\n    // Get different depth of field relationships by changing the perspective\n    perspective: 800px;\n\n    > * {\n      left: 50%;\n      transform: translateX(-50%) translateZ(-400px);\n      opacity: 0;\n      animation: ~'@{prefix}-carousel-card-middle-to-bottom';\n    }\n\n    // prev 右边对齐容器中线\n    .@{carousel-prefix-cls}-item-prev {\n      transform: translateX(-100%) translateZ(-200px);\n      opacity: 0.4;\n      animation: ~'@{prefix}-carousel-card-top-to-middle';\n    }\n\n    // next 左边对齐容器中线\n    .@{carousel-prefix-cls}-item-next {\n      transform: translateX(0%) translateZ(-200px);\n      opacity: 0.4;\n      animation: ~'@{prefix}-carousel-card-bottom-to-middle';\n    }\n\n    // current 居中\n    .@{carousel-prefix-cls}-item-current {\n      transform: translateX(-50%) translateZ(0);\n      opacity: 1;\n      animation: ~'@{prefix}-carousel-card-middle-to-top';\n    }\n\n    &.@{carousel-prefix-cls}-negative {\n      > * {\n        animation: ~'@{prefix}-carousel-card-middle-to-bottom-reverse';\n      }\n\n      // prev 右边对齐容器中线\n      .@{carousel-prefix-cls}-item-prev {\n        animation: ~'@{prefix}-carousel-card-bottom-to-middle-reverse';\n      }\n\n      // next 左边对齐容器中线\n      .@{carousel-prefix-cls}-item-next {\n        animation: ~'@{prefix}-carousel-card-top-to-middle-reverse';\n      }\n\n      // current 居中\n      .@{carousel-prefix-cls}-item-current {\n        animation: ~'@{prefix}-carousel-card-middle-to-top-reverse';\n      }\n    }\n  }\n\n  &-fade {\n    > * {\n      left: 50%;\n      transform: translateX(-50%);\n      opacity: 0;\n    }\n\n    .@{carousel-prefix-cls}-item-current {\n      opacity: 1;\n    }\n  }\n\n  // 指示器样式\n  &-indicator {\n    position: absolute;\n    display: flex;\n    margin: 0;\n    padding: 0;\n\n    &-wrapper {\n      position: absolute;\n      z-index: 2;\n\n      &-top {\n        top: 0;\n        right: 0;\n        left: 0;\n        height: @carousel-indicator-size-wrapper;\n        background: linear-gradient(\n          180deg,\n          @carousel-indicator-color-bg-wrapper 0%,\n          rgba(0, 0, 0, 0) 87%\n        );\n      }\n\n      &-bottom {\n        right: 0;\n        bottom: 0;\n        left: 0;\n        height: @carousel-indicator-size-wrapper;\n        background: linear-gradient(\n          180deg,\n          rgba(0, 0, 0, 0) 13%,\n          @carousel-indicator-color-bg-wrapper 100%\n        );\n      }\n\n      &-left {\n        top: 0;\n        left: 0;\n        width: @carousel-indicator-size-wrapper;\n        height: 100%;\n        background: linear-gradient(\n          90deg,\n          @carousel-indicator-color-bg-wrapper 0%,\n          rgba(0, 0, 0, 0) 87%\n        );\n      }\n\n      &-right {\n        top: 0;\n        right: 0;\n        width: @carousel-indicator-size-wrapper;\n        height: 100%;\n        background: linear-gradient(\n          90deg,\n          rgba(0, 0, 0, 0) 13%,\n          @carousel-indicator-color-bg-wrapper 100%\n        );\n      }\n\n      &-outer {\n        right: 0;\n        left: 0;\n        background: none;\n      }\n    }\n\n    &-bottom {\n      bottom: @carousel-indicator-position;\n      left: 50%;\n      transform: translateX(-50%);\n    }\n\n    &-top {\n      top: @carousel-indicator-position;\n      left: 50%;\n      transform: translateX(-50%);\n    }\n\n    &-left {\n      top: 50%;\n      left: @carousel-indicator-position;\n      transform: translate(-50%, -50%) rotate(90deg);\n    }\n\n    &-right {\n      top: 50%;\n      right: @carousel-indicator-position;\n      transform: translate(50%, -50%) rotate(90deg);\n    }\n\n    // Indicator style on the outside\n    &-outer {\n      left: 50%;\n      padding: @carousel-indicator-outer-padding;\n      background-color: @carousel-indicator-outer-color-bg;\n      border-radius: @carousel-indicator-outer-border-radius;\n      transform: translateX(-50%);\n\n      &.@{carousel-prefix-cls}-indicator-dot {\n        bottom: -(@carousel-indicator-position + @carousel-indicator-dot-size +\n              $padding);\n      }\n\n      &.@{carousel-prefix-cls}-indicator-line {\n        bottom: -(@carousel-indicator-position +\n              @carousel-indicator-line-size-height + $padding);\n      }\n\n      &.@{carousel-prefix-cls}-indicator-slider {\n        bottom: -(@carousel-indicator-position +\n              @carousel-indicator-slider-size-height + $padding);\n        padding: 0;\n        background-color: @carousel-indicator-outer-color_default;\n      }\n\n      .@{carousel-prefix-cls}-indicator-item {\n        background-color: @carousel-indicator-outer-color_default;\n\n        &:hover,\n        &-active {\n          background-color: @carousel-indicator-outer-color_active;\n        }\n      }\n    }\n\n    &-item {\n      display: inline-block;\n      background-color: @carousel-indicator-color_default;\n      border-radius: @carousel-indicator-border-radius;\n      cursor: pointer;\n\n      &:hover,\n      &-active {\n        background-color: @carousel-indicator-color_active;\n      }\n    }\n\n    &-dot {\n      .@{carousel-prefix-cls}-indicator-item {\n        width: @carousel-indicator-dot-size;\n        height: $width;\n        border-radius: 50%;\n\n        &:not(:last-child) {\n          margin-right: @carousel-indicator-gap;\n        }\n      }\n    }\n\n    &-line {\n      .@{carousel-prefix-cls}-indicator-item {\n        width: @carousel-indicator-line-size-width;\n        height: @carousel-indicator-line-size-height;\n\n        &:not(:last-child) {\n          margin-right: @carousel-indicator-gap;\n        }\n      }\n    }\n\n    &-slider {\n      width: @carousel-indicator-slider-size-width;\n      height: @carousel-indicator-slider-size-height;\n      background-color: @carousel-indicator-color_default;\n      border-radius: @carousel-indicator-border-radius;\n      cursor: pointer;\n\n      .@{carousel-prefix-cls}-indicator-item {\n        position: absolute;\n        top: 0;\n        height: 100%;\n        transition: left 0.3s;\n      }\n    }\n  }\n\n  &-arrow {\n    > div {\n      position: absolute;\n      z-index: 2;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: @carousel-arrow-size;\n      height: @carousel-arrow-size;\n      color: @carousel-arrow-color-icon;\n      background-color: @carousel-arrow-color-bg;\n      border-radius: 50%;\n      cursor: pointer;\n\n      > svg {\n        color: @carousel-arrow-color-icon;\n        font-size: @carousel-arrow-font-size;\n      }\n\n      &:hover {\n        background-color: @carousel-arrow-color-bg_hover;\n      }\n    }\n\n    &-left {\n      top: 50%;\n      left: @carousel-arrow-position;\n      transform: translateY(-50%);\n    }\n\n    &-right {\n      top: 50%;\n      right: @carousel-arrow-position;\n      transform: translateY(-50%);\n    }\n\n    &-top {\n      top: @carousel-arrow-position;\n      left: 50%;\n      transform: translateX(-50%);\n    }\n\n    &-bottom {\n      bottom: @carousel-arrow-position;\n      left: 50%;\n      transform: translateX(-50%);\n    }\n  }\n\n  &-arrow-hover div {\n    opacity: 0;\n    transition: all 0.3s;\n  }\n\n  &:hover {\n    .@{carousel-prefix-cls}-arrow-hover div {\n      opacity: 1;\n    }\n  }\n}\n\n@{arco-theme-tag}[arco-theme='dark'] {\n  .@{carousel-prefix-cls}-arrow > div {\n    background-color: rgba(@dark-gray-1, 0.3);\n\n    &:hover {\n      background-color: rgba(@dark-gray-1, 0.5);\n    }\n  }\n\n  .@{carousel-prefix-cls}-indicator-item,\n  .@{carousel-prefix-cls}-indicator-slider {\n    background-color: rgba(@dark-gray-1, 0.3);\n  }\n\n  .@{carousel-prefix-cls}-indicator-item-active,\n  .@{carousel-prefix-cls}-indicator-item:hover {\n    background-color: @carousel-indicator-color_active;\n  }\n\n  .@{carousel-prefix-cls}-indicator-outer.@{carousel-prefix-cls}-indicator-slider {\n    background-color: @carousel-indicator-outer-color_default;\n  }\n\n  .@{carousel-prefix-cls}-indicator-outer\n    .@{carousel-prefix-cls}-indicator-item:hover,\n  .@{carousel-prefix-cls}-indicator-outer\n    .@{carousel-prefix-cls}-indicator-item-active {\n    background-color: @carousel-indicator-outer-color_active;\n  }\n}\n"
  },
  {
    "path": "packages/web-vue/components/carousel/style/index.ts",
    "content": "import '../../style/index.less';\nimport './index.less';\n"
  },
  {
    "path": "packages/web-vue/components/carousel/style/slide.less",
    "content": "@keyframes ~'@{prefix}-carousel-slide-x-in' {\n  from {\n    transform: translateX(100%);\n  }\n\n  to {\n    transform: translateX(0);\n  }\n}\n\n@keyframes ~'@{prefix}-carousel-slide-x-out' {\n  from {\n    transform: translateX(0);\n  }\n\n  to {\n    transform: translateX(-100%);\n  }\n}\n\n@keyframes ~'@{prefix}-carousel-slide-x-in-reverse' {\n  from {\n    transform: translateX(-100%);\n  }\n\n  to {\n    transform: translateX(0);\n  }\n}\n\n@keyframes ~'@{prefix}-carousel-slide-x-out-reverse' {\n  from {\n    transform: translateX(0);\n  }\n\n  to {\n    transform: translateX(100%);\n  }\n}\n\n@keyframes ~'@{prefix}-carousel-slide-y-in' {\n  from {\n    transform: translateY(100%);\n  }\n\n  to {\n    transform: translateY(0);\n  }\n}\n\n@keyframes ~'@{prefix}-carousel-slide-y-out' {\n  from {\n    transform: translateY(0);\n  }\n\n  to {\n    transform: translateY(-100%);\n  }\n}\n\n@keyframes ~'@{prefix}-carousel-slide-y-in-reverse' {\n  from {\n    transform: translateY(-100%);\n  }\n\n  to {\n    transform: translateY(0);\n  }\n}\n\n@keyframes ~'@{prefix}-carousel-slide-y-out-reverse' {\n  from {\n    transform: translateY(0);\n  }\n\n  to {\n    transform: translateY(100%);\n  }\n}\n\n@keyframes ~'@{prefix}-carousel-card-bottom-to-middle' {\n  from {\n    transform: translateX(0%) translateZ(-400px);\n    opacity: 0;\n  }\n\n  to {\n    transform: translateX(0%) translateZ(-200px);\n    opacity: 0.4;\n  }\n}\n\n@keyframes ~'@{prefix}-carousel-card-middle-to-bottom' {\n  from {\n    transform: translateX(-100%) translateZ(-200px);\n    opacity: 0.4;\n  }\n\n  to {\n    transform: translateX(-100%) translateZ(-400px);\n    opacity: 0;\n  }\n}\n\n@keyframes ~'@{prefix}-carousel-card-top-to-middle' {\n  from {\n    transform: translateX(-50%) translateZ(0);\n    opacity: 1;\n  }\n\n  to {\n    transform: translateX(-100%) translateZ(-200px);\n    opacity: 0.4;\n  }\n}\n\n@keyframes ~'@{prefix}-carousel-card-middle-to-top' {\n  from {\n    transform: translateX(0) translateZ(-200px);\n    opacity: 0.4;\n  }\n\n  to {\n    transform: translateX(-50%) translateZ(0);\n    opacity: 1;\n  }\n}\n\n@keyframes ~'@{prefix}-carousel-card-bottom-to-middle-reverse' {\n  from {\n    transform: translateX(-100%) translateZ(-400px);\n    opacity: 0;\n  }\n\n  to {\n    transform: translateX(-100%) translateZ(-200px);\n    opacity: 0.4;\n  }\n}\n\n@keyframes ~'@{prefix}-carousel-card-middle-to-bottom-reverse' {\n  from {\n    transform: translateX(0%) translateZ(-200px);\n    opacity: 0.4;\n  }\n\n  to {\n    transform: translateX(0%) translateZ(-400px);\n    opacity: 0;\n  }\n}\n\n@keyframes ~'@{prefix}-carousel-card-top-to-middle-reverse' {\n  from {\n    transform: translateX(-50%) translateZ(0);\n    opacity: 1;\n  }\n\n  to {\n    transform: translateX(0%) translateZ(-200px);\n    opacity: 0.4;\n  }\n}\n\n@keyframes ~'@{prefix}-carousel-card-middle-to-top-reverse' {\n  from {\n    transform: translateX(-100%) translateZ(-200px);\n    opacity: 0.4;\n  }\n\n  to {\n    transform: translateX(-50%) translateZ(0);\n    opacity: 1;\n  }\n}\n"
  },
  {
    "path": "packages/web-vue/components/carousel/style/token.less",
    "content": "@import '../../style/theme/index.less';\n\n@carousel-content-border-radius: 0;\n\n// arrow\n@carousel-arrow-position: @spacing-6;\n@carousel-arrow-size: @size-6;\n@carousel-arrow-font-size: @font-size-body-3;\n@carousel-arrow-color-icon: var(~'@{arco-cssvars-prefix}-color-white');\n@carousel-arrow-color-bg: rgba(@color-white, 0.3);\n@carousel-arrow-color-bg_hover: rgba(@color-white, 0.5);\n\n// indicator\n@carousel-indicator-size-wrapper: @size-12;\n@carousel-indicator-color-bg-wrapper: rgba(0, 0, 0, 0.15);\n\n@carousel-indicator-dot-size: 6px;\n@carousel-indicator-line-size-width: @size-3;\n@carousel-indicator-line-size-height: @size-1;\n@carousel-indicator-slider-size-width: @size-12;\n@carousel-indicator-slider-size-height: @size-1;\n\n@carousel-indicator-position: @spacing-6;\n@carousel-indicator-gap: @spacing-4;\n@carousel-indicator-border-radius: @radius-medium;\n@carousel-indicator-color_default: rgba(@color-white, 0.3);\n@carousel-indicator-color_active: var(~'@{arco-cssvars-prefix}-color-white');\n\n@carousel-indicator-outer-border-radius: 20px;\n@carousel-indicator-outer-padding: @spacing-2;\n@carousel-indicator-outer-color_default: rgba(var(~'@{arco-cssvars-prefix}-gray-4'), 0.5);\n@carousel-indicator-outer-color_active: var(~'@{arco-cssvars-prefix}-color-fill-4');\n@carousel-indicator-outer-color-bg: @color-transparent;\n"
  },
  {
    "path": "packages/web-vue/components/cascader/CHANGELOG.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.56.3\n\n`2024-10-25`\n\n### 🐛 BugFix\n\n- fix custom empty slot not working in some cases ([#3315](https://github.com/arco-design/arco-design-vue/pull/3315))\n\n\n## 2.54.0\n\n`2023-12-15`\n\n### 💎 Enhancement\n\n- Modifying `multiple` and `pathMode` will trigger changes in the binding value ([#2867](https://github.com/arco-design/arco-design-vue/pull/2867))\n\n\n## 2.51.1\n\n`2023-09-08`\n\n### 🐛 BugFix\n\n- fix empty state in Cascader Virtual list ([#2686](https://github.com/arco-design/arco-design-vue/pull/2686))\n\n\n## 2.49.0\n\n`2023-07-21`\n\n### 🆕 Feature\n\n- Add virtual list support ([#2577](https://github.com/arco-design/arco-design-vue/pull/2577))\n\n\n## 2.46.0\n\n`2023-05-12`\n\n### 🆕 Feature\n\n- support full path search ([#2363](https://github.com/arco-design/arco-design-vue/pull/2363))\n\n\n## 2.45.1\n\n`2023-04-14`\n\n### 🐛 BugFix\n\n- Fix the abnormal display of search results when the width of the control is short ([#2326](https://github.com/arco-design/arco-design-vue/pull/2326))\n\n\n## 2.40.0\n\n`2022-12-09`\n\n\n## 2.38.0-beta.2\n\n`2022-10-21`\n\n### 💎 Enhancement\n\n- When the submenus are all disabled when optimizing multi-selection, the parent prohibits the selection ([#1771](https://github.com/arco-design/arco-design-vue/pull/1771))\n\n\n## 2.34.1\n\n`2022-08-05`\n\n### 💅 Style\n\n- Fix style issue when dropdown panel is empty ([#1483](https://github.com/arco-design/arco-design-vue/pull/1483))\n\n\n## 2.33.1\n\n`2022-07-22`\n\n### 🐛 BugFix\n\n- Fixed the wrong position of the horizontal scroll bar of the search drop-down menu ([#1438](https://github.com/arco-design/arco-design-vue/pull/1438))\n- Fix the problem that the cursor cannot be used after inputting content in search mode ([#1438](https://github.com/arco-design/arco-design-vue/pull/1438))\n\n\n## 2.29.1\n\n`2022-06-02`\n\n### 🐛 BugFix\n\n- Fix the problem that the value of the number type fails to match ([#1230](https://github.com/arco-design/arco-design-vue/pull/1230))\n\n### 💎 Enhancement\n\n- cascader-panel adds keyboard events ([#1230](https://github.com/arco-design/arco-design-vue/pull/1230))\n\n\n## 2.29.0\n\n`2022-05-27`\n\n### ⚠️ Important Attention\n\n- Exposed parameter changed from CascaderOptionInfo to CascaderOption. Internal data is no longer included, user data is not affected ([#1201](https://github.com/arco-design/arco-design-vue/pull/1201))\n\n### 🆕 Feature\n\n- Option value supports object format, add `value-key` attribute ([#1201](https://github.com/arco-design/arco-design-vue/pull/1201))\n- Add the `fallback` attribute to customize the display of options that do not exist ([#1201](https://github.com/arco-design/arco-design-vue/pull/1201))\n- Add the `expand-child` property to expand the submenu ([#1201](https://github.com/arco-design/arco-design-vue/pull/1201))\n\n### 💎 Enhancement\n\n- Optimize submenu expansion logic and keyboard events ([#1201](https://github.com/arco-design/arco-design-vue/pull/1201))\n\n\n## 2.28.0\n\n`2022-05-20`\n\n### 🐛 BugFix\n\n- Fix the problem that the multi-selection state is displayed incorrectly in the case of lazy loading ([#1177](https://github.com/arco-design/arco-design-vue/pull/1177))\n- Fix the problem that the lazy loading function is called multiple times when the selection box is clicked ([#1177](https://github.com/arco-design/arco-design-vue/pull/1177))\n\n\n## 2.25.2\n\n`2022-04-27`\n\n### 💅 Style\n\n- Fixed the width of the search drop-down menu when it was blank ([#1056](https://github.com/arco-design/arco-design-vue/pull/1056))\n\n\n## 2.24.0\n\n`2022-04-15`\n\n### 🐛 BugFix\n\n- Fix the problem that the half-selected state of the checkbox is displayed incorrectly ([#963](https://github.com/arco-design/arco-design-vue/pull/963))\n\n\n## 2.23.0\n\n`2022-04-08`\n\n### 🆕 Feature\n\n- add empty slot ([#952](https://github.com/arco-design/arco-design-vue/pull/952))\n\n### 🐛 BugFix\n\n- Fix the problem that lazy loaded isLeaf is invalid in version 2.22.0 ([#952](https://github.com/arco-design/arco-design-vue/pull/952))\n- Fixed an issue where the options property could not trigger an update in some cases ([#952](https://github.com/arco-design/arco-design-vue/pull/952))\n\n\n## 2.22.0\n\n`2022-04-01`\n\n### 🆕 Feature\n\n- Added `field-names` attribute to allow custom fields ([#912](https://github.com/arco-design/arco-design-vue/pull/912))\n\n\n## 2.20.0\n\n`2022-03-18`\n\n### 🆕 Feature\n\n- Add `cascader-panel` component ([#842](https://github.com/arco-design/arco-design-vue/pull/842))\n\n### 🐛 BugFix\n\n- Fix the problem that the selected path of the drop-down menu may not match the current value ([#843](https://github.com/arco-design/arco-design-vue/pull/843))\n\n\n## 2.18.0\n\n`2022-03-04`\n\n### 🆕 Feature\n\n- Added `#option`, `#label` slots ([#781](https://github.com/arco-design/arco-design-vue/pull/781))\n\n\n## 2.18.0-beta.2\n\n`2022-02-25`\n\n### 🆕 Feature\n\n- Added `search-delay` property and defaulted to `500ms` ([#729](https://github.com/arco-design/arco-design-vue/pull/729))\n- Add the `search-option-only-label` attribute and modify the default display path label of the options in the search drop-down menu ([#729](https://github.com/arco-design/arco-design-vue/pull/729))\n\n### 🐛 BugFix\n\n- Fix the problem that the selection box display is not updated after the option is updated ([#727](https://github.com/arco-design/arco-design-vue/pull/727))\n\n\n## 2.18.0-beta.1\n\n`2022-02-18`\n\n### 🐛 BugFix\n\n- Fixed an issue where disabled items could still be selected via radio selectors in strict mode ([#701](https://github.com/arco-design/arco-design-vue/pull/701))\n- Fixed an issue where search results in strict mode did not include path options ([#701](https://github.com/arco-design/arco-design-vue/pull/701))\n\n\n## 2.16.0\n\n`2022-01-21`\n\n### 🐛 BugFix\n\n- Fixed an issue where the search could not be selected in `check-strictly` mode ([#627](https://github.com/arco-design/arco-design-vue/pull/627))\n\n\n## 2.15.0\n\n`2022-01-14`\n\n### 🆕 Feature\n\n- Add loading prop ([#558](https://github.com/arco-design/arco-design-vue/pull/558))\n\n\n## 2.13.0\n\n`2021-12-31`\n\n### 🆕 Feature\n\n- Added `load-more` attribute to support lazy loading of data ([#476](https://github.com/arco-design/arco-design-vue/pull/476))\n\n\n## 2.11.0\n\n`2021-12-17`\n\n### 🐛 BugFix\n\n- Fix the problem that the level totalLevel is calculated incorrectly ([#399](https://github.com/arco-design/arco-design-vue/pull/399))\n\n\n## 2.10.1\n\n`2021-12-14`\n\n### 🐛 BugFix\n\n- Fix the problem of counting errors when there is an empty sub-menu in multi-select mode ([#388](https://github.com/arco-design/arco-design-vue/pull/388))\n\n\n## 2.10.0\n\n`2021-12-10`\n\n### 💎 Enhancement\n\n- When the input box is editable, clicking will not close the drop-down menu ([#348](https://github.com/arco-design/arco-design-vue/pull/348))\n\n### 🆕 Feature\n\n- Add checkStrictly prop ([#349](https://github.com/arco-design/arco-design-vue/pull/349))\n\n\n## 2.8.0\n\n`2021-12-01`\n\n### 🆕 Feature\n\n- Add support for `tagProps` ([#307](https://github.com/arco-design/arco-design-vue/pull/307))\n\n### 💅 Style\n\n- Remove the option to select the bold effect ([#308](https://github.com/arco-design/arco-design-vue/pull/308))\n\n\n## 2.6.0\n\n`2021-11-19`\n\n### 🆕 Feature\n\n- Add `trigger-props` property ([#197](https://github.com/arco-design/arco-design-vue/pull/197))\n\n\n## 2.5.0\n\n`2021-11-18`\n\n### ⚠️ Important Attention\n\n- Move the custom rendering of `options.label` added in 2.4.0 to `options.render` ([#183](https://github.com/arco-design/arco-design-vue/pull/183))\n\n\n## 2.4.0\n\n`2021-11-17`\n\n### 🆕 Feature\n\n- Add `options.value` number type and `options.label` custom rendering support ([#176](https://github.com/arco-design/arco-design-vue/pull/176))\n\n### 🐛 BugFix\n\n- Fix the problem that the search input box cannot be scrolled ([#175](https://github.com/arco-design/arco-design-vue/pull/175))\n\n"
  },
  {
    "path": "packages/web-vue/components/cascader/CHANGELOG.zh-CN.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.56.3\n\n`2024-10-25`\n\n### 🐛 问题修复\n\n- 修复自定义空插槽部分情况下不生效问题 ([#3315](https://github.com/arco-design/arco-design-vue/pull/3315))\n\n\n## 2.54.0\n\n`2023-12-15`\n\n### 💎 功能优化\n\n- 修改 `multiple` 和 `pathMode` 时会触发绑定值的改变 ([#2867](https://github.com/arco-design/arco-design-vue/pull/2867))\n\n\n## 2.51.1\n\n`2023-09-08`\n\n### 🐛 问题修复\n\n- 修复开启虚拟列表时空状态不显示 ([#2686](https://github.com/arco-design/arco-design-vue/pull/2686))\n\n\n## 2.49.0\n\n`2023-07-21`\n\n### 🆕 新增功能\n\n- 增加虚拟列表功能 ([#2577](https://github.com/arco-design/arco-design-vue/pull/2577))\n\n\n## 2.46.0\n\n`2023-05-12`\n\n### 🆕 新增功能\n\n- 非严格模式下支持全路径搜索 ([#2363](https://github.com/arco-design/arco-design-vue/pull/2363))\n\n\n## 2.45.1\n\n`2023-04-14`\n\n### 🐛 问题修复\n\n- 修复控件宽度较短时，搜索结果展示异常 ([#2326](https://github.com/arco-design/arco-design-vue/pull/2326))\n\n\n## 2.40.0\n\n`2022-12-09`\n\n\n## 2.38.0-beta.2\n\n`2022-10-21`\n\n### 💎 功能优化\n\n- 优化多选时的子菜单全部禁用时，父级禁止选择 ([#1771](https://github.com/arco-design/arco-design-vue/pull/1771))\n\n\n## 2.34.1\n\n`2022-08-05`\n\n### 💅 样式更新\n\n- 修复下拉面板为空时的样式问题 ([#1483](https://github.com/arco-design/arco-design-vue/pull/1483))\n\n\n## 2.33.1\n\n`2022-07-22`\n\n### 🐛 问题修复\n\n- 修复搜索下拉菜单的横向滚动条位置错误问题 ([#1438](https://github.com/arco-design/arco-design-vue/pull/1438))\n- 修复搜索模式下，输入内容后不能使用光标的问题 ([#1438](https://github.com/arco-design/arco-design-vue/pull/1438))\n\n\n## 2.29.1\n\n`2022-06-02`\n\n### 🐛 问题修复\n\n- 修复使用 number 类型的 value 匹配失败的问题 ([#1230](https://github.com/arco-design/arco-design-vue/pull/1230))\n\n### 💎 功能优化\n\n- cascader-panel 增加键盘事件 ([#1230](https://github.com/arco-design/arco-design-vue/pull/1230))\n\n\n## 2.29.0\n\n`2022-05-27`\n\n### ⚠️ 重点注意\n\n- 外露参数从 CascaderOptionInfo 改为 CascaderOption。不再包含内部数据，用户数据不受影响 ([#1201](https://github.com/arco-design/arco-design-vue/pull/1201))\n\n### 🆕 新增功能\n\n- 选项 value 支持对象格式，增加 `value-key` 属性 ([#1201](https://github.com/arco-design/arco-design-vue/pull/1201))\n- 增加 `fallback` 属性，可以自定义不存在选项的展示 ([#1201](https://github.com/arco-design/arco-design-vue/pull/1201))\n- 增加 `expand-child` 属性，可以展开子菜单 ([#1201](https://github.com/arco-design/arco-design-vue/pull/1201))\n\n### 💎 功能优化\n\n- 优化子菜单展开逻辑和键盘事件 ([#1201](https://github.com/arco-design/arco-design-vue/pull/1201))\n\n\n## 2.28.0\n\n`2022-05-20`\n\n### 🐛 问题修复\n\n- 修复懒加载情况下，多选状态显示错误的问题 ([#1177](https://github.com/arco-design/arco-design-vue/pull/1177))\n- 修复点击选择框时，多次调用懒加载函数的问题 ([#1177](https://github.com/arco-design/arco-design-vue/pull/1177))\n\n\n## 2.25.2\n\n`2022-04-27`\n\n### 💅 样式更新\n\n- 修复搜索下拉菜单在空白时的宽度问题 ([#1056](https://github.com/arco-design/arco-design-vue/pull/1056))\n\n\n## 2.24.0\n\n`2022-04-15`\n\n### 🐛 问题修复\n\n- 修复复选框的半选状态显示错误的问题 ([#963](https://github.com/arco-design/arco-design-vue/pull/963))\n\n\n## 2.23.0\n\n`2022-04-08`\n\n### 🆕 新增功能\n\n- 增加 empty 插槽 ([#952](https://github.com/arco-design/arco-design-vue/pull/952))\n\n### 🐛 问题修复\n\n- 修复 2.22.0 版本中懒加载的 isLeaf 失效的问题 ([#952](https://github.com/arco-design/arco-design-vue/pull/952))\n- 修复 options 属性在某些情况下不能触发更新的问题 ([#952](https://github.com/arco-design/arco-design-vue/pull/952))\n\n\n## 2.22.0\n\n`2022-04-01`\n\n### 🆕 新增功能\n\n- 增加 `field-names` 属性，允许自定义字段 ([#912](https://github.com/arco-design/arco-design-vue/pull/912))\n\n\n## 2.20.0\n\n`2022-03-18`\n\n### 🆕 新增功能\n\n- 增加 `cascader-panel` 组件 ([#842](https://github.com/arco-design/arco-design-vue/pull/842))\n\n### 🐛 问题修复\n\n- 修复下拉菜单选中路径可能与当前值不符的问题 ([#843](https://github.com/arco-design/arco-design-vue/pull/843))\n\n\n## 2.18.0\n\n`2022-03-04`\n\n### 🆕 新增功能\n\n- 增加 `#option`, `#label` 插槽 ([#781](https://github.com/arco-design/arco-design-vue/pull/781))\n\n\n## 2.18.0-beta.2\n\n`2022-02-25`\n\n### 🆕 新增功能\n\n- 增加 `search-delay` 属性，并默认为 `500ms` ([#729](https://github.com/arco-design/arco-design-vue/pull/729))\n- 增加 `search-option-only-label` 属性，并修改搜索下拉菜单中的选项默认展示路径标签 ([#729](https://github.com/arco-design/arco-design-vue/pull/729))\n\n### 🐛 问题修复\n\n- 修复选项更新后选择框展示没有更新的问题 ([#727](https://github.com/arco-design/arco-design-vue/pull/727))\n\n\n## 2.18.0-beta.1\n\n`2022-02-18`\n\n### 🐛 问题修复\n\n- 修复严格模式下禁用项仍可通过单选选择器选择的问题 ([#701](https://github.com/arco-design/arco-design-vue/pull/701))\n- 修复严格模式下搜索结果没有包含路径选项的问题 ([#701](https://github.com/arco-design/arco-design-vue/pull/701))\n\n\n## 2.16.0\n\n`2022-01-21`\n\n### 🐛 问题修复\n\n- 修复在 `check-strictly` 模式下，搜索中不能选择的问题 ([#627](https://github.com/arco-design/arco-design-vue/pull/627))\n\n\n## 2.15.0\n\n`2022-01-14`\n\n### 🆕 新增功能\n\n- 增加 loading 属性 ([#558](https://github.com/arco-design/arco-design-vue/pull/558))\n\n\n## 2.13.0\n\n`2021-12-31`\n\n### 🆕 新增功能\n\n- 增加 `load-more` 属性，支持数据懒加载 ([#476](https://github.com/arco-design/arco-design-vue/pull/476))\n\n\n## 2.11.0\n\n`2021-12-17`\n\n### 🐛 问题修复\n\n- 修复层级 totalLevel 计算错误的问题 ([#399](https://github.com/arco-design/arco-design-vue/pull/399))\n\n\n## 2.10.1\n\n`2021-12-14`\n\n### 🐛 问题修复\n\n- 修复多选模式下存在空子菜单时计数错误的问题 ([#388](https://github.com/arco-design/arco-design-vue/pull/388))\n\n\n## 2.10.0\n\n`2021-12-10`\n\n### 💎 功能优化\n\n- 输入框可编辑时，点击不会关闭下拉菜单 ([#348](https://github.com/arco-design/arco-design-vue/pull/348))\n\n### 🆕 新增功能\n\n- 增加 checkStrictly 属性 ([#349](https://github.com/arco-design/arco-design-vue/pull/349))\n\n\n## 2.8.0\n\n`2021-12-01`\n\n### 🆕 新增功能\n\n- 增加 `tagProps` 的支持 ([#307](https://github.com/arco-design/arco-design-vue/pull/307))\n\n### 💅 样式更新\n\n- 去除选项选中加粗的效果 ([#308](https://github.com/arco-design/arco-design-vue/pull/308))\n\n\n## 2.6.0\n\n`2021-11-19`\n\n### 🆕 新增功能\n\n- 增加 `trigger-props` 属性 ([#197](https://github.com/arco-design/arco-design-vue/pull/197))\n\n\n## 2.5.0\n\n`2021-11-18`\n\n### ⚠️ 重点注意\n\n- 将 2.4.0 添加的 `options.label` 的自定义渲染移动到 `options.render` 上 ([#183](https://github.com/arco-design/arco-design-vue/pull/183))\n\n\n## 2.4.0\n\n`2021-11-17`\n\n### 🆕 新增功能\n\n- 增加 `options.value` 数字类型和 `options.label` 自定义渲染的支持 ([#176](https://github.com/arco-design/arco-design-vue/pull/176))\n\n### 🐛 问题修复\n\n- 修复搜索输入框不能滚动的问题 ([#175](https://github.com/arco-design/arco-design-vue/pull/175))\n\n"
  },
  {
    "path": "packages/web-vue/components/cascader/README.en-US.md",
    "content": "```yaml\nmeta:\n  type: Component\n  category: Data Entry\ntitle: Cascader\ndescription: Refers to the use of multi-level classification to separate the options when the number of selector options is large.\n```\n\n*Auto translate by google.*\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/clear.md\n\n@import ./__demo__/disabled.md\n\n@import ./__demo__/format.md\n\n@import ./__demo__/multiple.md\n\n@import ./__demo__/check-strictly.md\n\n@import ./__demo__/loading.md\n\n@import ./__demo__/lazy-load.md\n\n@import ./__demo__/search.md\n\n@import ./__demo__/path.md\n\n@import ./__demo__/fallback.md\n\n@import ./__demo__/field-names.md\n\n@import ./__demo__/expand.md\n\n@import ./__demo__/panel.md\n\n@import ./__demo__/virtual.md\n\n## API\n\n\n### `<cascader>` Props\n\n|Attribute|Description|Type|Default|version|\n|---|---|---|:---:|:---|\n|path-mode|Whether the value is a path|`boolean`|`false`||\n|multiple|Whether it is a multi-selection state (The search is turned on by default in the multi-select mode)|`boolean`|`false`||\n|model-value **(v-model)**|Value|`string\\| number\\| Record<string, any>\\| (    \\| string    \\| number    \\| Record<string, any>    \\| (string \\| number \\| Record<string, any>)[]  )[]\\| undefined`|`-`||\n|default-value|Default value (uncontrolled state)|`string\\| number\\| Record<string, any>\\| (    \\| string    \\| number    \\| Record<string, any>    \\| (string \\| number \\| Record<string, any>)[]  )[]\\| undefined`|`'' \\| undefined \\| []`||\n|options|Options for cascader|`CascaderOption[]`|`[]`||\n|disabled|Whether to disable|`boolean`|`false`||\n|error|Whether it is an error state|`boolean`|`false`||\n|size|The size of the select|`'mini' \\| 'small' \\| 'medium' \\| 'large'`|`'medium'`||\n|allow-search|Whether to allow searching|`boolean`|`false (single) \\| true (multiple)`||\n|allow-clear|Whether to allow clear|`boolean`|`false`||\n|input-value **(v-model)**|The value of the input|`string`|`-`||\n|default-input-value|The default value of the input (uncontrolled state)|`string`|`''`||\n|popup-visible **(v-model)**|Whether to show the dropdown|`boolean`|`-`||\n|expand-trigger|Expand the trigger method of the next level|`'click' \\| 'hover'`|`'click'`||\n|default-popup-visible|Whether to display the dropdown by default (uncontrolled state)|`boolean`|`false`||\n|placeholder|Placeholder|`string`|`-`||\n|filter-option|Custom options filter method|`(inputValue: string, option: CascaderOption) => boolean`|`-`||\n|popup-container|Mount container for popup|`string \\| HTMLElement`|`-`||\n|max-tag-count|In multi-select mode, the maximum number of labels displayed. 0 means unlimited|`number`|`0`||\n|format-label|Format display content|`(options: CascaderOption[]) => string`|`-`||\n|trigger-props|Trigger props of the drop-down menu|`TriggerProps`|`-`||\n|check-strictly|Whether to enable strict selection mode|`boolean`|`false`||\n|load-more|Data lazy loading function, open the lazy loading function when it is passed in|`(  option: CascaderOption,  done: (children?: CascaderOption[]) => void) => void`|`-`|2.13.0|\n|loading|Whether it is loading state|`boolean`|`false`|2.15.0|\n|search-option-only-label|Whether the options in the search dropdown show only label|`boolean`|`false`|2.18.0|\n|search-delay|Delay time to trigger search event|`number`|`500`|2.18.0|\n|field-names|Customize fields in `CascaderOption`|`CascaderFieldNames`|`-`|2.22.0|\n|value-key|Used to determine the option key value attribute name|`string`|`'value'`|2.29.0|\n|fallback|Options that do not exist in custom values|`boolean\\| ((    value:      \\| string      \\| number      \\| Record<string, unknown>      \\| (string \\| number \\| Record<string, unknown>)[]  ) => string)`|`true`|2.29.0|\n|expand-child|whether to expand the submenu|`boolean`|`false`|2.29.0|\n|virtual-list-props|Pass the virtual list attribute, pass in this parameter to turn on virtual scrolling [VirtualListProps](#VirtualListProps)|`VirtualListProps`|`-`|2.49.0|\n|tag-nowrap|Tag content does not wrap|`boolean`|`false`|2.56.1|\n### `<cascader>` Events\n\n|Event Name|Description|Parameters|\n|---|---|---|\n|change|Triggered when the selected value changes|value: `string \\| number \\| (string \\| number \\| (string \\| number)[])[] \\| undefined`|\n|input-value-change|Triggered when the input value changes|value: `string`|\n|clear|Triggered when the clear button is clicked|-|\n|search|Triggered when the user searches|value: `string`|\n|popup-visible-change|Triggered when the display state of the dropdown changes|visible: `boolean`|\n|focus|Triggered when focus|ev: `FocusEvent`|\n|blur|Triggered when blur|ev: `FocusEvent`|\n### `<cascader>` Slots\n\n|Slot Name|Description|Parameters|version|\n|---|---|---|:---|\n|label|Display content of label|data: `CascaderOption`|2.18.0|\n|prefix|Prefix|-|2.23.0|\n|arrow-icon|Arrow icon for select box|-|2.16.0|\n|loading-icon|Loading icon for select box|-|2.16.0|\n|search-icon|Search icon for select box|-|2.16.0|\n|empty|Display content when the option is empty|-|2.23.0|\n|option|Display content of options|data: `CascaderOption`|2.18.0|\n\n\n\n\n### `<cascader-panel>` Props\n\n|Attribute|Description|Type|Default|version|\n|---|---|---|:---:|:---|\n|path-mode|Whether the value is a path|`boolean`|`false`||\n|multiple|Whether it is a multi-selection state (The search is turned on by default in the multi-select mode)|`boolean`|`false`||\n|model-value **(v-model)**|Value|`string\\| number\\| Record<string, any>\\| (    \\| string    \\| number    \\| Record<string, any>    \\| (string \\| number \\| Record<string, any>)[]  )[]\\| undefined`|`-`||\n|default-value|Default value (uncontrolled state)|`string\\| number\\| Record<string, any>\\| (    \\| string    \\| number    \\| Record<string, any>    \\| (string \\| number \\| Record<string, any>)[]  )[]\\| undefined`|`'' \\| undefined \\| []`||\n|options|Options for cascader|`CascaderOption[]`|`[]`||\n|expand-trigger|Expand the trigger method of the next level|`string`|`'click'`||\n|check-strictly|Whether to enable strict selection mode|`boolean`|`false`||\n|load-more|Data lazy loading function, open the lazy loading function when it is passed in|`(  option: CascaderOption,  done: (children?: CascaderOption[]) => void) => void`|`-`|2.13.0|\n|field-names|Customize fields in `CascaderOption`|`CascaderFieldNames`|`-`|2.22.0|\n|value-key|Used to determine the option key value attribute name|`string`|`'value'`|2.29.0|\n|expand-child|whether to expand the submenu|`boolean`|`false`|2.29.0|\n### `<cascader-panel>` Events\n\n|Event Name|Description|Parameters|\n|---|---|---|\n|change|Triggered when the selected value changes|value: `string \\| number \\| (string \\| number \\| (string \\| number)[])[] \\| undefined`|\n### `<cascader-panel>` Slots\n\n|Slot Name|Description|Parameters|version|\n|---|---|---|:---|\n|empty|Display content when the option is empty|-|2.23.0|\n\n\n\n\n### CascaderOption\n\n|Name|Description|Type|Default|version|\n|---|---|---|:---:|:---|\n|value|Option value, version 2.29.0 supports objects|`string \\| number \\| Record<string, any>`|`-`||\n|label|Option text|`string`|`-`||\n|render|Custom render|`RenderFunction`|`-`||\n|disabled|Whether to disable|`boolean`|`false`||\n|tagProps|Displayed tag attributes|`TagProps`|`-`|2.8.0|\n|children|Next level options|`CascaderOption[]`|`-`||\n|isLeaf|Whether it is a leaf node|`boolean`|`false`||\n\n\n"
  },
  {
    "path": "packages/web-vue/components/cascader/README.zh-CN.md",
    "content": "```yaml\nmeta:\n  type: 组件\n  category: 数据输入\ntitle: 级联选择 Cascader\ndescription: 指在选择器选项数量较多时，采用多级分类的方式将选项进行分隔。\n```\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/clear.md\n\n@import ./__demo__/disabled.md\n\n@import ./__demo__/format.md\n\n@import ./__demo__/multiple.md\n\n@import ./__demo__/check-strictly.md\n\n@import ./__demo__/loading.md\n\n@import ./__demo__/lazy-load.md\n\n@import ./__demo__/search.md\n\n@import ./__demo__/path.md\n\n@import ./__demo__/fallback.md\n\n@import ./__demo__/field-names.md\n\n@import ./__demo__/expand.md\n\n@import ./__demo__/panel.md\n\n@import ./__demo__/virtual.md\n\n## API\n\n\n### `<cascader>` Props\n\n|参数名|描述|类型|默认值|版本|\n|---|---|---|:---:|:---|\n|path-mode|绑定值是否为路径|`boolean`|`false`||\n|multiple|是否为多选状态（多选模式默认开启搜索）|`boolean`|`false`||\n|model-value **(v-model)**|绑定值|`string\\| number\\| Record<string, any>\\| (    \\| string    \\| number    \\| Record<string, any>    \\| (string \\| number \\| Record<string, any>)[]  )[]\\| undefined`|`-`||\n|default-value|默认值（非受控状态）|`string\\| number\\| Record<string, any>\\| (    \\| string    \\| number    \\| Record<string, any>    \\| (string \\| number \\| Record<string, any>)[]  )[]\\| undefined`|`'' \\| undefined \\| []`||\n|options|级联选择器的选项|`CascaderOption[]`|`[]`||\n|disabled|是否禁用|`boolean`|`false`||\n|error|是否为错误状态|`boolean`|`false`||\n|size|选择框的大小|`'mini' \\| 'small' \\| 'medium' \\| 'large'`|`'medium'`||\n|allow-search|是否允许搜索|`boolean`|`false (single) \\| true (multiple)`||\n|allow-clear|是否允许清除|`boolean`|`false`||\n|input-value **(v-model)**|输入框的值|`string`|`-`||\n|default-input-value|输入框的默认值（非受控状态）|`string`|`''`||\n|popup-visible **(v-model)**|是否显示下拉框|`boolean`|`-`||\n|expand-trigger|展开下一级的触发方式|`'click' \\| 'hover'`|`'click'`||\n|default-popup-visible|是否默认显示下拉框（非受控状态）|`boolean`|`false`||\n|placeholder|占位符|`string`|`-`||\n|filter-option|自定义选项过滤方法|`(inputValue: string, option: CascaderOption) => boolean`|`-`||\n|popup-container|弹出框的挂载容器|`string \\| HTMLElement`|`-`||\n|max-tag-count|多选模式下，最多显示的标签数量。0 表示不限制|`number`|`0`||\n|format-label|格式化展示内容|`(options: CascaderOption[]) => string`|`-`||\n|trigger-props|下拉菜单的触发器属性|`TriggerProps`|`-`||\n|check-strictly|是否开启严格选择模式|`boolean`|`false`||\n|load-more|数据懒加载函数，传入时开启懒加载功能|`(  option: CascaderOption,  done: (children?: CascaderOption[]) => void) => void`|`-`|2.13.0|\n|loading|是否为加载中状态|`boolean`|`false`|2.15.0|\n|search-option-only-label|搜索下拉菜单中的选项是否仅展示标签|`boolean`|`false`|2.18.0|\n|search-delay|触发搜索事件的延迟时间|`number`|`500`|2.18.0|\n|field-names|自定义 `CascaderOption` 中的字段|`CascaderFieldNames`|`-`|2.22.0|\n|value-key|用于确定选项键值的属性名|`string`|`'value'`|2.29.0|\n|fallback|自定义不存在选项的值的展示|`boolean\\| ((    value:      \\| string      \\| number      \\| Record<string, unknown>      \\| (string \\| number \\| Record<string, unknown>)[]  ) => string)`|`true`|2.29.0|\n|expand-child|是否展开子菜单|`boolean`|`false`|2.29.0|\n|virtual-list-props|传递虚拟列表属性，传入此参数以开启虚拟滚动 [VirtualListProps](#VirtualListProps)|`VirtualListProps`|`-`|2.49.0|\n|tag-nowrap|标签内容不换行|`boolean`|`false`|2.56.1|\n### `<cascader>` Events\n\n|事件名|描述|参数|\n|---|---|---|\n|change|选中值改变时触发|value: `string \\| number \\| (string \\| number \\| (string \\| number)[])[] \\| undefined`|\n|input-value-change|输入值改变时触发|value: `string`|\n|clear|点击清除按钮时触发|-|\n|search|用户搜索时触发|value: `string`|\n|popup-visible-change|下拉框的显示状态改变时触发|visible: `boolean`|\n|focus|获得焦点时触发|ev: `FocusEvent`|\n|blur|失去焦点时触发|ev: `FocusEvent`|\n### `<cascader>` Slots\n\n|插槽名|描述|参数|版本|\n|---|:---:|---|:---|\n|label|选择框的显示内容|data: `CascaderOption`|2.18.0|\n|prefix|前缀元素|-|2.23.0|\n|arrow-icon|选择框的箭头图标|-|2.16.0|\n|loading-icon|选择框的加载中图标|-|2.16.0|\n|search-icon|选择框的搜索图标|-|2.16.0|\n|empty|选项为空时的显示内容|-|2.23.0|\n|option|选项内容|data: `CascaderOption`|2.18.0|\n\n\n\n\n### `<cascader-panel>` Props\n\n|参数名|描述|类型|默认值|版本|\n|---|---|---|:---:|:---|\n|path-mode|绑定值是否为路径|`boolean`|`false`||\n|multiple|是否为多选状态（多选模式默认开启搜索）|`boolean`|`false`||\n|model-value **(v-model)**|绑定值|`string\\| number\\| Record<string, any>\\| (    \\| string    \\| number    \\| Record<string, any>    \\| (string \\| number \\| Record<string, any>)[]  )[]\\| undefined`|`-`||\n|default-value|默认值（非受控状态）|`string\\| number\\| Record<string, any>\\| (    \\| string    \\| number    \\| Record<string, any>    \\| (string \\| number \\| Record<string, any>)[]  )[]\\| undefined`|`'' \\| undefined \\| []`||\n|options|级联选择器的选项|`CascaderOption[]`|`[]`||\n|expand-trigger|展开下一级的触发方式|`string`|`'click'`||\n|check-strictly|是否开启严格选择模式|`boolean`|`false`||\n|load-more|数据懒加载函数，传入时开启懒加载功能|`(  option: CascaderOption,  done: (children?: CascaderOption[]) => void) => void`|`-`|2.13.0|\n|field-names|自定义 `CascaderOption` 中的字段|`CascaderFieldNames`|`-`|2.22.0|\n|value-key|用于确定选项键值的属性名|`string`|`'value'`|2.29.0|\n|expand-child|是否展开子菜单|`boolean`|`false`|2.29.0|\n### `<cascader-panel>` Events\n\n|事件名|描述|参数|\n|---|---|---|\n|change|选中值改变时触发|value: `string \\| number \\| (string \\| number \\| (string \\| number)[])[] \\| undefined`|\n### `<cascader-panel>` Slots\n\n|插槽名|描述|参数|版本|\n|---|:---:|---|:---|\n|empty|选项为空时的显示内容|-|2.23.0|\n\n\n\n\n### CascaderOption\n\n|参数名|描述|类型|默认值|版本|\n|---|---|---|:---:|:---|\n|value|选项值，2.29.0 版本支持对象|`string \\| number \\| Record<string, any>`|`-`||\n|label|选项文本|`string`|`-`||\n|render|自定义渲染|`RenderFunction`|`-`||\n|disabled|是否禁用|`boolean`|`false`||\n|tagProps|展示的标签属性|`TagProps`|`-`|2.8.0|\n|children|下一级选项|`CascaderOption[]`|`-`||\n|isLeaf|是否是叶子节点|`boolean`|`false`||\n\n\n"
  },
  {
    "path": "packages/web-vue/components/cascader/TEMPLATE.md",
    "content": "## zh-CN\n```yaml\nmeta:\n  type: 组件\n  category: 数据输入\ntitle: 级联选择 Cascader\ndescription: 指在选择器选项数量较多时，采用多级分类的方式将选项进行分隔。\n```\n---\n## en-US\n```yaml\nmeta:\n  type: Component\n  category: Data Entry\ntitle: Cascader\ndescription: Refers to the use of multi-level classification to separate the options when the number of selector options is large.\n```\n---\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/clear.md\n\n@import ./__demo__/disabled.md\n\n@import ./__demo__/format.md\n\n@import ./__demo__/multiple.md\n\n@import ./__demo__/check-strictly.md\n\n@import ./__demo__/loading.md\n\n@import ./__demo__/lazy-load.md\n\n@import ./__demo__/search.md\n\n@import ./__demo__/path.md\n\n@import ./__demo__/fallback.md\n\n@import ./__demo__/field-names.md\n\n@import ./__demo__/expand.md\n\n@import ./__demo__/panel.md\n\n@import ./__demo__/virtual.md\n\n## API\n\n%%API(cascader.vue)%%\n\n%%API(cascader-panel.vue)%%\n\n%%INTERFACE(interface.ts)%%\n"
  },
  {
    "path": "packages/web-vue/components/cascader/__demo__/basic.md",
    "content": "```yaml\ntitle:\n  zh-CN: 基本使用\n  en-US: Basic Usage\n```\n\n## zh-CN\n\n级联选择器的基本用法。\n\n---\n\n## en-US\n\nThe basic usage of cascader.\n\n---\n\n```vue\n<template>\n  <a-space direction=\"vertical\" size=\"large\">\n    <a-cascader :options=\"options\" :style=\"{width:'320px'}\" placeholder=\"Please select ...\" />\n    <a-cascader :options=\"options\" default-value=\"datunli\" expand-trigger=\"hover\" :style=\"{width:'320px'}\" placeholder=\"Please select ...\" />\n  </a-space>\n</template>\n\n<script>\nexport default {\n  setup() {\n    const options = [\n      {\n        value: 'beijing',\n        label: 'Beijing',\n        children: [\n          {\n            value: 'chaoyang',\n            label: 'ChaoYang',\n            children: [\n              {\n                value: 'datunli',\n                label: 'Datunli',\n              },\n            ],\n          },\n          {\n            value: 'haidian',\n            label: 'Haidian',\n          },\n          {\n            value: 'dongcheng',\n            label: 'Dongcheng',\n          },\n          {\n            value: 'xicheng',\n            label: 'Xicheng',\n            children: [\n              {\n                value: 'jinrongjie',\n                label: 'Jinrongjie',\n              },\n              {\n                value: 'tianqiao',\n                label: 'Tianqiao',\n              },\n            ],\n          },\n        ],\n      },\n      {\n        value: 'shanghai',\n        label: 'Shanghai',\n        children: [\n          {\n            value: 'huangpu',\n            label: 'Huangpu',\n          },\n        ],\n      },\n    ];\n    return {\n      options\n    }\n  },\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/cascader/__demo__/check-strictly.md",
    "content": "```yaml\ntitle:\n  zh-CN: 严格选择模式\n  en-US: Check strictly\n```\n\n## zh-CN\n\n设置属性 `check-strictly`，开启严格选择模式，点击任何结点都可以选择。多选时将会解除父子节点的关联。\n\n---\n\n## en-US\n\nSet the attribute `check-strictly`, turn on any selectable mode, and click any node to select. Multiple selections will disassociate the parent and child nodes.\n\n---\n\n```vue\n<template>\n  <a-space direction=\"vertical\" size=\"large\">\n    <a-cascader :options=\"options\" default-value=\"beijing\" :style=\"{width:'320px'}\" placeholder=\"Please select ...\" check-strictly />\n    <a-cascader :options=\"options\" :default-value=\"['beijing']\" :style=\"{width:'320px'}\" placeholder=\"Please select ...\" multiple check-strictly />\n  </a-space>\n</template>\n\n<script>\nexport default {\n  setup() {\n    const options = [\n      {\n        value: 'beijing',\n        label: 'Beijing',\n        children: [\n          {\n            value: 'chaoyang',\n            label: 'ChaoYang',\n            children: [\n              {\n                value: 'datunli',\n                label: 'Datunli',\n              },\n            ],\n          },\n          {\n            value: 'haidian',\n            label: 'Haidian',\n            disabled: true\n          },\n          {\n            value: 'dongcheng',\n            label: 'Dongcheng',\n          },\n          {\n            value: 'xicheng',\n            label: 'Xicheng',\n            children: [\n              {\n                value: 'jinrongjie',\n                label: 'Jinrongjie',\n              },\n              {\n                value: 'tianqiao',\n                label: 'Tianqiao',\n              },\n            ],\n          },\n        ],\n      },\n      {\n        value: 'shanghai',\n        label: 'Shanghai',\n        children: [\n          {\n            value: 'huangpu',\n            label: 'Huangpu',\n          },\n        ],\n      },\n    ];\n    return {\n      options\n    }\n  },\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/cascader/__demo__/clear.md",
    "content": "```yaml\ntitle:\n  zh-CN: 允许清除\n  en-US: Allow Clear\n```\n\n## zh-CN\n\n允许清除。\n\n---\n\n## en-US\n\nAllow clear.\n\n---\n\n```vue\n<template>\n  <a-cascader :options=\"options\" v-model=\"value\" :style=\"{width:'320px'}\" placeholder=\"Please select ...\"\n              allow-clear />\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n  setup() {\n    const value = ref('datunli');\n\n    const options = [\n      {\n        value: 'beijing',\n        label: 'Beijing',\n        children: [\n          {\n            value: 'chaoyang',\n            label: 'ChaoYang',\n            children: [\n              {\n                value: 'datunli',\n                label: 'Datunli',\n              },\n            ],\n          },\n          {\n            value: 'haidian',\n            label: 'Haidian',\n          },\n          {\n            value: 'dongcheng',\n            label: 'Dongcheng',\n          },\n          {\n            value: 'xicheng',\n            label: 'Xicheng',\n            children: [\n              {\n                value: 'jinrongjie',\n                label: 'Jinrongjie',\n              },\n              {\n                value: 'tianqiao',\n                label: 'Tianqiao',\n              },\n            ],\n          },\n        ],\n      },\n      {\n        value: 'shanghai',\n        label: 'Shanghai',\n        children: [\n          {\n            value: 'huangpu',\n            label: 'Huangpu',\n          },\n        ],\n      },\n    ];\n    return {\n      value,\n      options\n    }\n  },\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/cascader/__demo__/disabled.md",
    "content": "```yaml\ntitle:\n  zh-CN: 禁用选项\n  en-US: Disabled Option\n```\n\n## zh-CN\n\n指定 `option` 的 `disabled` 为 `true`，可以禁用该选项。\n\n---\n\n## en-US\n\nSpecify the `disabled` of the `option` as `true` to disable the option.\n\n---\n\n```vue\n<template>\n  <a-cascader :options=\"options\" :style=\"{width:'320px'}\" placeholder=\"Please select ...\" />\n</template>\n\n<script>\nexport default {\n  setup() {\n    const options = [\n      {\n        value: 'beijing',\n        label: 'Beijing',\n        children: [\n          {\n            value: 'chaoyang',\n            label: 'ChaoYang',\n            children: [\n              {\n                value: 'datunli',\n                label: 'Datunli',\n              },\n            ],\n          },\n          {\n            value: 'haidian',\n            label: 'Haidian',\n            disabled: true\n          },\n          {\n            value: 'dongcheng',\n            label: 'Dongcheng',\n          },\n          {\n            value: 'xicheng',\n            label: 'Xicheng',\n            children: [\n              {\n                value: 'jinrongjie',\n                label: 'Jinrongjie',\n              },\n              {\n                value: 'tianqiao',\n                label: 'Tianqiao',\n                disabled: true\n              },\n            ],\n          },\n        ],\n      },\n      {\n        value: 'shanghai',\n        label: 'Shanghai',\n        children: [\n          {\n            value: 'huangpu',\n            label: 'Huangpu',\n          },\n        ],\n      },\n    ];\n    return {\n      options\n    }\n  },\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/cascader/__demo__/expand.md",
    "content": "```yaml\ntitle:\n  zh-CN: 展开子菜单\n  en-US: Expand child menu\n```\n\n## zh-CN\n\n通过设置 `expand-child` 可以在选择时展开第一个子菜单\n\n---\n\n## en-US\n\nThe first submenu can be expanded on selection by setting `expand-child`\n\n---\n\n```vue\n<template>\n  <a-cascader :options=\"options\" :style=\"{width:'320px'}\" placeholder=\"Please select ...\" expand-child/>\n</template>\n\n<script>\nexport default {\n  setup() {\n    const options = [\n      {\n        value: 'beijing',\n        label: 'Beijing',\n        children: [\n          {\n            value: 'chaoyang',\n            label: 'ChaoYang',\n            children: [\n              {\n                value: 'datunli',\n                label: 'Datunli',\n              },\n            ],\n          },\n          {\n            value: 'haidian',\n            label: 'Haidian',\n          },\n          {\n            value: 'dongcheng',\n            label: 'Dongcheng',\n          },\n          {\n            value: 'xicheng',\n            label: 'Xicheng',\n            children: [\n              {\n                value: 'jinrongjie',\n                label: 'Jinrongjie',\n              },\n              {\n                value: 'tianqiao',\n                label: 'Tianqiao',\n              },\n            ],\n          },\n        ],\n      },\n      {\n        value: 'shanghai',\n        label: 'Shanghai',\n        children: [\n          {\n            value: 'huangpu',\n            label: 'Huangpu',\n          },\n        ],\n      },\n    ];\n    return {\n      options\n    }\n  },\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/cascader/__demo__/fallback.md",
    "content": "```yaml\ntitle:\n  zh-CN: 回退选项\n  en-US: Fallback\n```\n\n## zh-CN\n\n组件默认会展示在选项中不存在的值，可通过 `fallback` 自定义展示或者关闭\n\n---\n\n## en-US\n\nThe component will display the value that does not exist in the options by default, which can be displayed or turned off through `fallback`\n\n---\n\n```vue\n<template>\n  <a-space direction=\"vertical\" size=\"large\">\n    <a-cascader :options=\"options\" v-model=\"value\" :style=\"{width:'320px'}\" placeholder=\"Please select ...\" multiple />\n    <a-cascader :options=\"options\" v-model=\"value2\" :style=\"{width:'320px'}\"\n                placeholder=\"Please select ...\" path-mode multiple :fallback=\"fallback\" />\n  </a-space>\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n  setup() {\n    const value = ref(['datunli', 'wuhou']);\n    const value2 = ref([['beijing', 'chaoyang', 'datunli'], ['sichuan', 'chengdu', 'wuhou']]);\n    const fallback = (value) => {\n      return value.map(item => item.toUpperCase()).join('-')\n    }\n\n    const options = [\n      {\n        value: 'beijing',\n        label: 'Beijing',\n        children: [\n          {\n            value: 'chaoyang',\n            label: 'ChaoYang',\n            children: [\n              {\n                value: 'datunli',\n                label: 'Datunli',\n              },\n            ],\n          },\n          {\n            value: 'haidian',\n            label: 'Haidian',\n          },\n          {\n            value: 'dongcheng',\n            label: 'Dongcheng',\n          },\n          {\n            value: 'xicheng',\n            label: 'Xicheng',\n            children: [\n              {\n                value: 'jinrongjie',\n                label: 'Jinrongjie',\n              },\n              {\n                value: 'tianqiao',\n                label: 'Tianqiao',\n              },\n            ],\n          },\n        ],\n      },\n      {\n        value: 'shanghai',\n        label: 'Shanghai',\n        children: [\n          {\n            value: 'huangpu',\n            label: 'Huangpu',\n          },\n        ],\n      },\n    ];\n    return {\n      options,\n      value,\n      value2,\n      fallback\n    }\n  },\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/cascader/__demo__/field-names.md",
    "content": "```yaml\ntitle:\n  zh-CN: 自定义字段名\n  en-US: Custom FieldNames\n```\n\n## zh-CN\n\n可以通过 `field-names` 属性自定义 `options` 中数据的格式。\n\n---\n\n## en-US\n\nThe format of the data in `options` can be customized through the `field-names` attribute.\n\n---\n\n```vue\n<template>\n  <a-cascader :options=\"options\" :field-names=\"fieldNames\" :style=\"{width:'320px'}\"\n            placeholder=\"Please select ...\" />\n</template>\n\n<script>\nimport { reactive } from 'vue';\n\nexport default {\n  setup() {\n    const fieldNames = {value: 'city', label: 'text'}\n    const options = reactive([\n      {\n        city: 'beijing',\n        text: 'Beijing',\n        children: [\n          {\n            city: 'chaoyang',\n            text: 'ChaoYang',\n            children: [\n              {\n                city: 'datunli',\n                text: 'Datunli',\n              },\n            ],\n          },\n          {\n            city: 'haidian',\n            text: 'Haidian',\n          },\n          {\n            city: 'dongcheng',\n            text: 'Dongcheng',\n          },\n          {\n            city: 'xicheng',\n            text: 'Xicheng',\n            children: [\n              {\n                city: 'jinrongjie',\n                text: 'Jinrongjie',\n              },\n              {\n                city: 'tianqiao',\n                text: 'Tianqiao',\n              },\n            ],\n          },\n        ],\n      },\n      {\n        city: 'shanghai',\n        text: 'Shanghai',\n        children: [\n          {\n            city: 'huangpu',\n            text: 'Huangpu',\n          },\n        ],\n      },\n    ]);\n\n    return {\n      fieldNames,\n      options\n    }\n  }\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/cascader/__demo__/format.md",
    "content": "```yaml\ntitle:\n  zh-CN: 自定义输入框的展示值\n  en-US: asdf\n```\n\n## zh-CN\n\n利用 `formatLabel` 对显示的内容进行自定义处理。\n\n---\n\n## en-US\n\nUse `formatLabel` to customize the displayed content.\n\n---\n\n```vue\n\n<template>\n  <a-cascader :options=\"options\" default-value=\"datunli\" :style=\"{width:'320px'}\" placeholder=\"Please select ...\" :format-label=\"format\" />\n</template>\n\n<script>\nexport default {\n  setup() {\n    const options = [\n      {\n        value: 'beijing',\n        label: 'Beijing',\n        children: [\n          {\n            value: 'chaoyang',\n            label: 'ChaoYang',\n            children: [\n              {\n                value: 'datunli',\n                label: 'Datunli',\n              },\n            ],\n          },\n          {\n            value: 'haidian',\n            label: 'Haidian',\n          },\n          {\n            value: 'dongcheng',\n            label: 'Dongcheng',\n          },\n          {\n            value: 'xicheng',\n            label: 'Xicheng',\n            children: [\n              {\n                value: 'jinrongjie',\n                label: 'Jinrongjie',\n              },\n              {\n                value: 'tianqiao',\n                label: 'Tianqiao',\n              },\n            ],\n          },\n        ],\n      },\n      {\n        value: 'shanghai',\n        label: 'Shanghai',\n        children: [\n          {\n            value: 'huangpu',\n            label: 'Huangpu',\n          },\n        ],\n      },\n    ];\n\n    const format = (options) => {\n      const labels = options.map(option => option.label)\n      return labels.join('-')\n    }\n\n    return {\n      options,\n      format\n    }\n  },\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/cascader/__demo__/lazy-load.md",
    "content": "```yaml\ntitle:\n  zh-CN: 子选项懒加载\n  en-US: Lazy load\n```\n\n## zh-CN\n\n通过 `load-more` 属性可以开启数据懒加载功能。\n开启数据懒加载功能后，需要在叶子节点标注 `isLeaf: true`，没有标注且没有 `children` 属性的节点会认为需要懒加载处理。\n`load-more` 属性有提供 `done` 函数进行回调，可以在回调中传入懒加载的子数据。如果 `done` 函数没有传入数据会认为懒加载失败，此节点可以再次触发懒加载。\n\n---\n\n## en-US\n\nThe lazy data loading function can be turned on through the `load-more` attribute.\nAfter the data lazy loading function is enabled, the leaf nodes need to be marked with `isLeaf: true`. Nodes that are not marked and have no `children` attribute will be considered as requiring lazy loading.\nThe `load-more` attribute provides a `done` function for callback, and lazy loaded sub-data can be passed in the callback. If the `done` function does not pass in data, it will be considered as a lazy loading failure, and this node can trigger lazy loading again.\n\n---\n\n```vue\n<template>\n  <a-space>\n    <a-cascader :options=\"options\" :style=\"{width:'320px'}\" placeholder=\"Please select ...\" :load-more=\"loadMore\"/>\n  </a-space>\n</template>\n\n<script>\nexport default {\n  setup() {\n    const options = [\n      {\n        value: 'beijing',\n        label: 'Beijing',\n        children: [\n          {\n            value: 'chaoyang',\n            label: 'ChaoYang',\n          },\n          {\n            value: 'haidian',\n            label: 'Haidian',\n            isLeaf: true\n          },\n          {\n            value: 'dongcheng',\n            label: 'Dongcheng',\n            isLeaf: true\n          },\n          {\n            value: 'xicheng',\n            label: 'Xicheng',\n          },\n        ],\n      },\n      {\n        value: 'shanghai',\n        label: 'Shanghai',\n        children: [\n          {\n            value: 'huangpu',\n            label: 'Huangpu',\n            isLeaf: true\n          },\n        ],\n      },\n    ];\n    const loadMore = (option, done) => {\n      window.setTimeout(() => {\n        const nodes = [{\n          value: `${option.value}-option1`,\n          label: `${option.label}-Option1`,\n          isLeaf: true\n        }, {\n          value: `${option.value}-option2`,\n          label: `${option.label}-Option2`,\n          isLeaf: true\n        }]\n        done(nodes)\n      }, 2000)\n    };\n\n    return {\n      options,\n      loadMore\n    }\n  },\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/cascader/__demo__/loading.md",
    "content": "```yaml\ntitle:\n  zh-CN: 加载中\n  en-US: Loading\n```\n\n## zh-CN\n\n选择框和下拉菜单显示加载中状态。\n\n---\n\n## en-US\n\nSelect boxes and drop-down menus show loading status.\n\n---\n\n```vue\n<template>\n  <a-cascader :options=\"[]\" :style=\"{width:'320px'}\" placeholder=\"Please select ...\" loading />\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/cascader/__demo__/multiple.md",
    "content": "```yaml\ntitle:\n  zh-CN: 多选模式\n  en-US: Multiple\n```\n\n## zh-CN\n\n通过设置 `multiple` 开启多选模式。\n\n---\n\n## en-US\n\nEnable multiple selection mode by setting `multiple`.\n\n---\n\n```vue\n<template>\n  <a-cascader :options=\"options\" :default-value=\"['datunli']\" :style=\"{width:'320px'}\" placeholder=\"Please select ...\" multiple/>\n</template>\n\n<script>\nexport default {\n  setup() {\n    const options = [\n      {\n        value: 'beijing',\n        label: 'Beijing',\n        children: [\n          {\n            value: 'chaoyang',\n            label: 'ChaoYang',\n            children: [\n              {\n                value: 'datunli',\n                label: 'Datunli',\n              },\n            ],\n          },\n          {\n            value: 'haidian',\n            label: 'Haidian',\n          },\n          {\n            value: 'dongcheng',\n            label: 'Dongcheng',\n          },\n          {\n            value: 'xicheng',\n            label: 'Xicheng',\n            children: [\n              {\n                value: 'jinrongjie',\n                label: 'Jinrongjie',\n              },\n              {\n                value: 'tianqiao',\n                label: 'Tianqiao',\n              },\n            ],\n          },\n        ],\n      },\n      {\n        value: 'shanghai',\n        label: 'Shanghai',\n        children: [\n          {\n            value: 'huangpu',\n            label: 'Huangpu',\n          },\n        ],\n      },\n    ];\n    return {\n      options\n    }\n  },\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/cascader/__demo__/panel.md",
    "content": "```yaml\ntitle:\n  zh-CN: 级联菜单\n  en-US: Cascader Panel\n```\n\n## zh-CN\n\n级联菜单可以单独使用，此时为 `数据展示` 组件\n\n---\n\n## en-US\n\nCascading menu can be used alone, in this case it is the `data display` component\n\n---\n\n```vue\n<template>\n  <a-cascader-panel :options=\"options\" v-model=\"value\" expand-child/>\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n  setup() {\n    const value = ref('');\n\n    const options = [\n      {\n        value: 'beijing',\n        label: 'Beijing',\n        children: [\n          {\n            value: 'chaoyang',\n            label: 'ChaoYang',\n            children: [\n              {\n                value: 'datunli',\n                label: 'Datunli',\n              },\n            ],\n          },\n          {\n            value: 'haidian',\n            label: 'Haidian',\n          },\n          {\n            value: 'dongcheng',\n            label: 'Dongcheng',\n          },\n          {\n            value: 'xicheng',\n            label: 'Xicheng',\n            children: [\n              {\n                value: 'jinrongjie',\n                label: 'Jinrongjie',\n              },\n              {\n                value: 'tianqiao',\n                label: 'Tianqiao',\n              },\n            ],\n          },\n        ],\n      },\n      {\n        value: 'shanghai',\n        label: 'Shanghai',\n        children: [\n          {\n            value: 'huangpu',\n            label: 'Huangpu',\n          },\n        ],\n      },\n    ];\n    return {\n      value,\n      options\n    }\n  },\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/cascader/__demo__/path.md",
    "content": "```yaml\ntitle:\n  zh-CN: 路径模式\n  en-US: path mode\n```\n\n## zh-CN\n\n`modelValue` 使用路径作为值。\n\n---\n\n## en-US\n\n`modelValue` uses the path as the value.\n\n---\n\n```vue\n<template>\n  <a-space direction=\"vertical\" size=\"large\">\n    <a-cascader :options=\"options\" :style=\"{width:'320px'}\" placeholder=\"Please select ...\" path-mode\n                @change=\"handleChange\" />\n    <a-cascader :options=\"options\"\n                :default-value=\"[['beijing','chaoyang','datunli']]\"\n                :style=\"{width:'320px'}\"\n                placeholder=\"Please select ...\"\n                path-mode\n                @change=\"handleChange\" />\n  </a-space>\n</template>\n\n<script>\nexport default {\n  setup() {\n    const handleChange = (path) => {\n      console.log(path)\n    }\n\n    const options = [\n      {\n        value: 'beijing',\n        label: 'Beijing',\n        children: [\n          {\n            value: 'chaoyang',\n            label: 'ChaoYang',\n            children: [\n              {\n                value: 'datunli',\n                label: 'Datunli',\n              },\n            ],\n          },\n          {\n            value: 'haidian',\n            label: 'Haidian',\n          },\n          {\n            value: 'dongcheng',\n            label: 'Dongcheng',\n          },\n          {\n            value: 'xicheng',\n            label: 'Xicheng',\n            children: [\n              {\n                value: 'jinrongjie',\n                label: 'Jinrongjie',\n              },\n              {\n                value: 'tianqiao',\n                label: 'Tianqiao',\n              },\n            ],\n          },\n        ],\n      },\n      {\n        value: 'shanghai',\n        label: 'Shanghai',\n        children: [\n          {\n            value: 'huangpu',\n            label: 'Huangpu',\n          },\n        ],\n      },\n    ];\n    return {\n      options,\n      handleChange\n    }\n  },\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/cascader/__demo__/search.md",
    "content": "```yaml\ntitle:\n  zh-CN: 允许搜索\n  en-US: Allow Search\n```\n\n## zh-CN\n\n通过设置 `allow-search` 让输入框支持搜索功能。\n\n---\n\n## en-US\n\nMake the input box support search function by setting `allow-search`.\n\n---\n\n```vue\n<template>\n  <a-cascader :options=\"options\" :style=\"{width:'320px'}\" placeholder=\"Please select ...\" allow-search/>\n</template>\n\n<script>\nexport default {\n  setup() {\n    const options = [\n      {\n        value: 'beijing',\n        label: 'Beijing',\n        children: [\n          {\n            value: 'chaoyang',\n            label: 'ChaoYang',\n            children: [\n              {\n                value: 'datunli',\n                label: 'Datunli',\n              },\n            ],\n          },\n          {\n            value: 'haidian',\n            label: 'Haidian',\n          },\n          {\n            value: 'dongcheng',\n            label: 'Dongcheng',\n          },\n          {\n            value: 'xicheng',\n            label: 'Xicheng',\n            children: [\n              {\n                value: 'jinrongjie',\n                label: 'Jinrongjie',\n              },\n              {\n                value: 'tianqiao',\n                label: 'Tianqiao',\n              },\n            ],\n          },\n        ],\n      },\n      {\n        value: 'shanghai',\n        label: 'Shanghai',\n        children: [\n          {\n            value: 'huangpu',\n            label: 'Huangpu',\n          },\n        ],\n      },\n    ];\n    return {\n      options\n    }\n  },\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/cascader/__demo__/virtual.md",
    "content": "```yaml\ntitle:\n  zh-CN: 虚拟列表\n  en-US: Virtual List\n```\n\n## zh-CN\n\n虚拟列表的使用方法。\n\n---\n\n## en-US\n\nHow to use the virtual list.\n\n---\n\n```vue\n\n<template>\n  <a-cascader :options=\"options\" :style=\"{width:'320px'}\" placeholder=\"Please select ...\"\n              :virtual-list-props=\"{height:200}\" />\n</template>\n\n<script>\nexport default {\n  setup() {\n    const options = [\n      {\n        value: 'beijing',\n        label: 'Beijing',\n        children: [\n          {\n            value: 'chaoyang',\n            label: 'ChaoYang',\n            children: [\n              {\n                value: 'datunli',\n                label: 'Datunli',\n              },\n            ],\n          },\n          {\n            value: 'haidian',\n            label: 'Haidian',\n          },\n          {\n            value: 'dongcheng',\n            label: 'Dongcheng',\n          },\n          {\n            value: 'xicheng',\n            label: 'Xicheng',\n            children: [\n              {\n                value: 'jinrongjie',\n                label: 'Jinrongjie',\n              },\n              {\n                value: 'tianqiao',\n                label: 'Tianqiao',\n              },\n            ],\n          },\n        ],\n      },\n      {\n        value: 'shanghai',\n        label: 'Shanghai',\n        children: Array(1000).fill(null).map((_, index) => {\n          return {\n            value: `Option ${index}`,\n            label: `Option ${index}`\n          }\n        })\n      },\n    ];\n\n    return {\n      options\n    }\n  },\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/cascader/__test__/__snapshots__/demo.test.ts.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`<cascader> demo: render [basic] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-vertical\\\\\" style=\\\\\"column-gap: 24px; row-gap: 24px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-select-view-single arco-select-view arco-select-view-size-medium\\\\\" style=\\\\\"width: 320px;\\\\\" title=\\\\\"\\\\\"><!----><input class=\\\\\"arco-select-view-input\\\\\" readonly=\\\\\"\\\\\" placeholder=\\\\\"Please select ...\\\\\" value=\\\\\"\\\\\"><span class=\\\\\"arco-select-view-value arco-select-view-value-hidden\\\\\"><!----></span><span class=\\\\\"arco-select-view-suffix\\\\\"><!----><span class=\\\\\"arco-select-view-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down arco-select-view-arrow-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n    <!----></span></span>\n    <!---->\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-select-view-single arco-select-view arco-select-view-size-medium\\\\\" style=\\\\\"width: 320px;\\\\\" title=\\\\\"Beijing / ChaoYang / Datunli\\\\\"><!----><input class=\\\\\"arco-select-view-input arco-select-view-input-hidden\\\\\" readonly=\\\\\"\\\\\" placeholder=\\\\\"Please select ...\\\\\" value=\\\\\"\\\\\"><span class=\\\\\"arco-select-view-value\\\\\">Beijing / ChaoYang / Datunli</span><span class=\\\\\"arco-select-view-suffix\\\\\"><!----><span class=\\\\\"arco-select-view-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down arco-select-view-arrow-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n    <!----></span></span>\n    <!---->\n  </div>\n</div>\"\n`;\n\nexports[`<cascader> demo: render [check-strictly] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-vertical\\\\\" style=\\\\\"column-gap: 24px; row-gap: 24px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-select-view-single arco-select-view arco-select-view-size-medium\\\\\" style=\\\\\"width: 320px;\\\\\" title=\\\\\"Beijing\\\\\"><!----><input class=\\\\\"arco-select-view-input arco-select-view-input-hidden\\\\\" readonly=\\\\\"\\\\\" placeholder=\\\\\"Please select ...\\\\\" value=\\\\\"\\\\\"><span class=\\\\\"arco-select-view-value\\\\\">Beijing</span><span class=\\\\\"arco-select-view-suffix\\\\\"><!----><span class=\\\\\"arco-select-view-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down arco-select-view-arrow-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n    <!----></span></span>\n    <!---->\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-select-view arco-select-view-size-medium arco-select-view-has-tag arco-select-view-has-suffix arco-select-view-multiple\\\\\" style=\\\\\"width: 320px;\\\\\"><span class=\\\\\"arco-select-view-mirror\\\\\"></span>\n    <!---->\n    <transition-group-stub tag=\\\\\"span\\\\\" name=\\\\\"input-tag-zoom\\\\\" appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\" class=\\\\\"arco-select-view-inner\\\\\"><span class=\\\\\"arco-tag arco-tag-size-medium arco-tag-checked arco-select-view-tag\\\\\"><!--v-if-->Beijing<span class=\\\\\"arco-icon-hover arco-tag-icon-hover arco-tag-close-btn\\\\\" role=\\\\\"button\\\\\" aria-label=\\\\\"Close\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-close\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M9.857 9.858 24 24m0 0 14.142 14.142M24 24 38.142 9.858M24 24 9.857 38.142\\\\\"></path></svg></span>\n      <!--v-if--></span><input class=\\\\\"arco-select-view-input\\\\\" style=\\\\\"width: 12px;\\\\\">\n    </transition-group-stub>\n    <!----><span class=\\\\\"arco-select-view-suffix\\\\\"><!----><span class=\\\\\"arco-select-view-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down arco-select-view-arrow-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n    <!---->\n    <!----></span></span>\n    <!---->\n  </div>\n</div>\"\n`;\n\nexports[`<cascader> demo: render [clear] correctly 1`] = `\n\"<span class=\\\\\"arco-select-view-single arco-select-view arco-select-view-size-medium\\\\\" style=\\\\\"width: 320px;\\\\\" title=\\\\\"Beijing / ChaoYang / Datunli\\\\\"><!----><input class=\\\\\"arco-select-view-input arco-select-view-input-hidden\\\\\" readonly=\\\\\"\\\\\" placeholder=\\\\\"Please select ...\\\\\" value=\\\\\"\\\\\"><span class=\\\\\"arco-select-view-value\\\\\">Beijing / ChaoYang / Datunli</span><span class=\\\\\"arco-select-view-suffix\\\\\"><span class=\\\\\"arco-icon-hover arco-select-view-clear-btn\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-close\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M9.857 9.858 24 24m0 0 14.142 14.142M24 24 38.142 9.858M24 24 9.857 38.142\\\\\"></path></svg></span><span class=\\\\\"arco-select-view-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down arco-select-view-arrow-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n<!----></span></span>\"\n`;\n\nexports[`<cascader> demo: render [disabled] correctly 1`] = `\n\"<span class=\\\\\"arco-select-view-single arco-select-view arco-select-view-size-medium\\\\\" style=\\\\\"width: 320px;\\\\\" title=\\\\\"\\\\\"><!----><input class=\\\\\"arco-select-view-input\\\\\" readonly=\\\\\"\\\\\" placeholder=\\\\\"Please select ...\\\\\" value=\\\\\"\\\\\"><span class=\\\\\"arco-select-view-value arco-select-view-value-hidden\\\\\"><!----></span><span class=\\\\\"arco-select-view-suffix\\\\\"><!----><span class=\\\\\"arco-select-view-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down arco-select-view-arrow-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n<!----></span></span>\"\n`;\n\nexports[`<cascader> demo: render [expand] correctly 1`] = `\n\"<span class=\\\\\"arco-select-view-single arco-select-view arco-select-view-size-medium\\\\\" style=\\\\\"width: 320px;\\\\\" title=\\\\\"\\\\\"><!----><input class=\\\\\"arco-select-view-input\\\\\" readonly=\\\\\"\\\\\" placeholder=\\\\\"Please select ...\\\\\" value=\\\\\"\\\\\"><span class=\\\\\"arco-select-view-value arco-select-view-value-hidden\\\\\"><!----></span><span class=\\\\\"arco-select-view-suffix\\\\\"><!----><span class=\\\\\"arco-select-view-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down arco-select-view-arrow-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n<!----></span></span>\"\n`;\n\nexports[`<cascader> demo: render [fallback] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-vertical\\\\\" style=\\\\\"column-gap: 24px; row-gap: 24px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-select-view arco-select-view-size-medium arco-select-view-has-tag arco-select-view-has-suffix arco-select-view-multiple\\\\\" style=\\\\\"width: 320px;\\\\\"><span class=\\\\\"arco-select-view-mirror\\\\\"></span>\n    <!---->\n    <transition-group-stub tag=\\\\\"span\\\\\" name=\\\\\"input-tag-zoom\\\\\" appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\" class=\\\\\"arco-select-view-inner\\\\\"><span class=\\\\\"arco-tag arco-tag-size-medium arco-tag-checked arco-select-view-tag\\\\\"><!--v-if-->Beijing / ChaoYang / Datunli<span class=\\\\\"arco-icon-hover arco-tag-icon-hover arco-tag-close-btn\\\\\" role=\\\\\"button\\\\\" aria-label=\\\\\"Close\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-close\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M9.857 9.858 24 24m0 0 14.142 14.142M24 24 38.142 9.858M24 24 9.857 38.142\\\\\"></path></svg></span>\n      <!--v-if--></span><span class=\\\\\"arco-tag arco-tag-size-medium arco-tag-checked arco-select-view-tag\\\\\"><!--v-if-->wuhou<span class=\\\\\"arco-icon-hover arco-tag-icon-hover arco-tag-close-btn\\\\\" role=\\\\\"button\\\\\" aria-label=\\\\\"Close\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-close\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M9.857 9.858 24 24m0 0 14.142 14.142M24 24 38.142 9.858M24 24 9.857 38.142\\\\\"></path></svg></span>\n      <!--v-if--></span><input class=\\\\\"arco-select-view-input\\\\\" style=\\\\\"width: 12px;\\\\\">\n    </transition-group-stub>\n    <!----><span class=\\\\\"arco-select-view-suffix\\\\\"><!----><span class=\\\\\"arco-select-view-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down arco-select-view-arrow-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n    <!---->\n    <!----></span></span>\n    <!---->\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-select-view arco-select-view-size-medium arco-select-view-has-tag arco-select-view-has-suffix arco-select-view-multiple\\\\\" style=\\\\\"width: 320px;\\\\\"><span class=\\\\\"arco-select-view-mirror\\\\\"></span>\n    <!---->\n    <transition-group-stub tag=\\\\\"span\\\\\" name=\\\\\"input-tag-zoom\\\\\" appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\" class=\\\\\"arco-select-view-inner\\\\\"><span class=\\\\\"arco-tag arco-tag-size-medium arco-tag-checked arco-select-view-tag\\\\\"><!--v-if-->Beijing / ChaoYang / Datunli<span class=\\\\\"arco-icon-hover arco-tag-icon-hover arco-tag-close-btn\\\\\" role=\\\\\"button\\\\\" aria-label=\\\\\"Close\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-close\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M9.857 9.858 24 24m0 0 14.142 14.142M24 24 38.142 9.858M24 24 9.857 38.142\\\\\"></path></svg></span>\n      <!--v-if--></span><span class=\\\\\"arco-tag arco-tag-size-medium arco-tag-checked arco-select-view-tag\\\\\"><!--v-if-->SICHUAN-CHENGDU-WUHOU<span class=\\\\\"arco-icon-hover arco-tag-icon-hover arco-tag-close-btn\\\\\" role=\\\\\"button\\\\\" aria-label=\\\\\"Close\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-close\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M9.857 9.858 24 24m0 0 14.142 14.142M24 24 38.142 9.858M24 24 9.857 38.142\\\\\"></path></svg></span>\n      <!--v-if--></span><input class=\\\\\"arco-select-view-input\\\\\" style=\\\\\"width: 12px;\\\\\">\n    </transition-group-stub>\n    <!----><span class=\\\\\"arco-select-view-suffix\\\\\"><!----><span class=\\\\\"arco-select-view-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down arco-select-view-arrow-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n    <!---->\n    <!----></span></span>\n    <!---->\n  </div>\n</div>\"\n`;\n\nexports[`<cascader> demo: render [field-names] correctly 1`] = `\n\"<span class=\\\\\"arco-select-view-single arco-select-view arco-select-view-size-medium\\\\\" style=\\\\\"width: 320px;\\\\\" title=\\\\\"\\\\\"><!----><input class=\\\\\"arco-select-view-input\\\\\" readonly=\\\\\"\\\\\" placeholder=\\\\\"Please select ...\\\\\" value=\\\\\"\\\\\"><span class=\\\\\"arco-select-view-value arco-select-view-value-hidden\\\\\"><!----></span><span class=\\\\\"arco-select-view-suffix\\\\\"><!----><span class=\\\\\"arco-select-view-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down arco-select-view-arrow-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n<!----></span></span>\"\n`;\n\nexports[`<cascader> demo: render [format] correctly 1`] = `\n\"<span class=\\\\\"arco-select-view-single arco-select-view arco-select-view-size-medium\\\\\" style=\\\\\"width: 320px;\\\\\" title=\\\\\"Beijing-ChaoYang-Datunli\\\\\"><!----><input class=\\\\\"arco-select-view-input arco-select-view-input-hidden\\\\\" readonly=\\\\\"\\\\\" placeholder=\\\\\"Please select ...\\\\\" value=\\\\\"\\\\\"><span class=\\\\\"arco-select-view-value\\\\\">Beijing-ChaoYang-Datunli</span><span class=\\\\\"arco-select-view-suffix\\\\\"><!----><span class=\\\\\"arco-select-view-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down arco-select-view-arrow-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n<!----></span></span>\"\n`;\n\nexports[`<cascader> demo: render [lazy-load] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 8px; row-gap: 8px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-select-view-single arco-select-view arco-select-view-size-medium\\\\\" style=\\\\\"width: 320px;\\\\\" title=\\\\\"\\\\\"><!----><input class=\\\\\"arco-select-view-input\\\\\" readonly=\\\\\"\\\\\" placeholder=\\\\\"Please select ...\\\\\" value=\\\\\"\\\\\"><span class=\\\\\"arco-select-view-value arco-select-view-value-hidden\\\\\"><!----></span><span class=\\\\\"arco-select-view-suffix\\\\\"><!----><span class=\\\\\"arco-select-view-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down arco-select-view-arrow-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n    <!----></span></span>\n    <!---->\n  </div>\n</div>\"\n`;\n\nexports[`<cascader> demo: render [loading] correctly 1`] = `\n\"<span class=\\\\\"arco-select-view-single arco-select-view arco-select-view-size-medium\\\\\" style=\\\\\"width: 320px;\\\\\" title=\\\\\"\\\\\"><!----><input class=\\\\\"arco-select-view-input\\\\\" readonly=\\\\\"\\\\\" placeholder=\\\\\"Please select ...\\\\\" value=\\\\\"\\\\\"><span class=\\\\\"arco-select-view-value arco-select-view-value-hidden\\\\\"><!----></span><span class=\\\\\"arco-select-view-suffix\\\\\"><!----><span class=\\\\\"arco-select-view-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-loading\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M42 24c0 9.941-8.059 18-18 18S6 33.941 6 24 14.059 6 24 6\\\\\"></path></svg></span>\n<!----></span></span>\"\n`;\n\nexports[`<cascader> demo: render [multiple] correctly 1`] = `\n\"<span class=\\\\\"arco-select-view arco-select-view-size-medium arco-select-view-has-tag arco-select-view-has-suffix arco-select-view-multiple\\\\\" style=\\\\\"width: 320px;\\\\\"><span class=\\\\\"arco-select-view-mirror\\\\\"></span>\n<!---->\n<transition-group-stub tag=\\\\\"span\\\\\" name=\\\\\"input-tag-zoom\\\\\" appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\" class=\\\\\"arco-select-view-inner\\\\\"><span class=\\\\\"arco-tag arco-tag-size-medium arco-tag-checked arco-select-view-tag\\\\\"><!--v-if-->Beijing / ChaoYang / Datunli<span class=\\\\\"arco-icon-hover arco-tag-icon-hover arco-tag-close-btn\\\\\" role=\\\\\"button\\\\\" aria-label=\\\\\"Close\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-close\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M9.857 9.858 24 24m0 0 14.142 14.142M24 24 38.142 9.858M24 24 9.857 38.142\\\\\"></path></svg></span>\n  <!--v-if--></span><input class=\\\\\"arco-select-view-input\\\\\" style=\\\\\"width: 12px;\\\\\">\n</transition-group-stub>\n<!----><span class=\\\\\"arco-select-view-suffix\\\\\"><!----><span class=\\\\\"arco-select-view-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down arco-select-view-arrow-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n<!---->\n<!----></span></span>\"\n`;\n\nexports[`<cascader> demo: render [panel] correctly 1`] = `\n\"<transition-group-stub tag=\\\\\"div\\\\\" name=\\\\\"cascader-slide\\\\\" appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\" class=\\\\\"arco-cascader-panel\\\\\">\n  <div class=\\\\\"arco-cascader-panel-column\\\\\" style=\\\\\"z-index: 3;\\\\\">\n    <div class=\\\\\"arco-scrollbar arco-scrollbar-type-embed\\\\\">\n      <div class=\\\\\"arco-scrollbar-container arco-cascader-column-content\\\\\">\n        <ul role=\\\\\"menu\\\\\" class=\\\\\"arco-cascader-list\\\\\">\n          <li tabindex=\\\\\"0\\\\\" role=\\\\\"menuitem\\\\\" aria-disabled=\\\\\"false\\\\\" aria-haspopup=\\\\\"true\\\\\" aria-expanded=\\\\\"false\\\\\" title=\\\\\"Beijing\\\\\" class=\\\\\"arco-cascader-option\\\\\">\n            <!---->\n            <!---->\n            <div class=\\\\\"arco-cascader-option-label\\\\\">Beijing<svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-right\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n                <path d=\\\\\"m16 39.513 15.556-15.557L16 8.4\\\\\"></path>\n              </svg></div>\n          </li>\n          <li tabindex=\\\\\"0\\\\\" role=\\\\\"menuitem\\\\\" aria-disabled=\\\\\"false\\\\\" aria-haspopup=\\\\\"true\\\\\" aria-expanded=\\\\\"false\\\\\" title=\\\\\"Shanghai\\\\\" class=\\\\\"arco-cascader-option\\\\\">\n            <!---->\n            <!---->\n            <div class=\\\\\"arco-cascader-option-label\\\\\">Shanghai<svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-right\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n                <path d=\\\\\"m16 39.513 15.556-15.557L16 8.4\\\\\"></path>\n              </svg></div>\n          </li>\n        </ul>\n      </div>\n      <!--v-if-->\n      <!--v-if-->\n    </div>\n  </div>\n</transition-group-stub>\"\n`;\n\nexports[`<cascader> demo: render [path] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-vertical\\\\\" style=\\\\\"column-gap: 24px; row-gap: 24px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-select-view-single arco-select-view arco-select-view-size-medium\\\\\" style=\\\\\"width: 320px;\\\\\" title=\\\\\"\\\\\"><!----><input class=\\\\\"arco-select-view-input\\\\\" readonly=\\\\\"\\\\\" placeholder=\\\\\"Please select ...\\\\\" value=\\\\\"\\\\\"><span class=\\\\\"arco-select-view-value arco-select-view-value-hidden\\\\\"><!----></span><span class=\\\\\"arco-select-view-suffix\\\\\"><!----><span class=\\\\\"arco-select-view-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down arco-select-view-arrow-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n    <!----></span></span>\n    <!---->\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-select-view-single arco-select-view arco-select-view-size-medium\\\\\" style=\\\\\"width: 320px;\\\\\" title=\\\\\"Beijing / ChaoYang / Datunli\\\\\"><!----><input class=\\\\\"arco-select-view-input arco-select-view-input-hidden\\\\\" readonly=\\\\\"\\\\\" placeholder=\\\\\"Please select ...\\\\\" value=\\\\\"\\\\\"><span class=\\\\\"arco-select-view-value\\\\\">Beijing / ChaoYang / Datunli</span><span class=\\\\\"arco-select-view-suffix\\\\\"><!----><span class=\\\\\"arco-select-view-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down arco-select-view-arrow-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n    <!----></span></span>\n    <!---->\n  </div>\n</div>\"\n`;\n\nexports[`<cascader> demo: render [search] correctly 1`] = `\n\"<span class=\\\\\"arco-select-view-single arco-select-view arco-select-view-size-medium arco-select-view-search\\\\\" style=\\\\\"width: 320px;\\\\\" title=\\\\\"\\\\\"><!----><input class=\\\\\"arco-select-view-input\\\\\" placeholder=\\\\\"Please select ...\\\\\" value=\\\\\"\\\\\"><span class=\\\\\"arco-select-view-value arco-select-view-value-hidden\\\\\"><!----></span><span class=\\\\\"arco-select-view-suffix\\\\\"><!----><span class=\\\\\"arco-select-view-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down arco-select-view-arrow-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n<!----></span></span>\"\n`;\n\nexports[`<cascader> demo: render [virtual] correctly 1`] = `\n\"<span class=\\\\\"arco-select-view-single arco-select-view arco-select-view-size-medium\\\\\" style=\\\\\"width: 320px;\\\\\" title=\\\\\"\\\\\"><!----><input class=\\\\\"arco-select-view-input\\\\\" readonly=\\\\\"\\\\\" placeholder=\\\\\"Please select ...\\\\\" value=\\\\\"\\\\\"><span class=\\\\\"arco-select-view-value arco-select-view-value-hidden\\\\\"><!----></span><span class=\\\\\"arco-select-view-suffix\\\\\"><!----><span class=\\\\\"arco-select-view-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down arco-select-view-arrow-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n<!----></span></span>\"\n`;\n"
  },
  {
    "path": "packages/web-vue/components/cascader/__test__/__snapshots__/index.test.ts.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Cascader should render panel (multiple) 1`] = `\n\"<transition-group-stub tag=\\\\\"div\\\\\" name=\\\\\"cascader-slide\\\\\" appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\" class=\\\\\"arco-cascader-panel arco-cascader-dropdown-panel\\\\\">\n  <div class=\\\\\"arco-cascader-panel-column\\\\\" style=\\\\\"z-index: 2;\\\\\">\n    <div class=\\\\\"arco-scrollbar arco-scrollbar-type-embed\\\\\">\n      <div class=\\\\\"arco-scrollbar-container arco-cascader-column-content\\\\\">\n        <ul role=\\\\\"menu\\\\\" class=\\\\\"arco-cascader-list arco-cascader-list-multiple\\\\\">\n          <li tabindex=\\\\\"0\\\\\" role=\\\\\"menuitem\\\\\" aria-disabled=\\\\\"false\\\\\" aria-haspopup=\\\\\"true\\\\\" aria-expanded=\\\\\"false\\\\\" title=\\\\\"Beijing\\\\\" class=\\\\\"arco-cascader-option\\\\\"><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n              <!---->\n            </label>\n            <!---->\n            <div class=\\\\\"arco-cascader-option-label\\\\\">Beijing<svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-right\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n                <path d=\\\\\"m16 39.513 15.556-15.557L16 8.4\\\\\"></path>\n              </svg></div>\n          </li>\n          <li tabindex=\\\\\"0\\\\\" role=\\\\\"menuitem\\\\\" aria-disabled=\\\\\"false\\\\\" aria-haspopup=\\\\\"true\\\\\" aria-expanded=\\\\\"false\\\\\" title=\\\\\"Shanghai\\\\\" class=\\\\\"arco-cascader-option\\\\\"><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n              <!---->\n            </label>\n            <!---->\n            <div class=\\\\\"arco-cascader-option-label\\\\\">Shanghai<svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-right\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n                <path d=\\\\\"m16 39.513 15.556-15.557L16 8.4\\\\\"></path>\n              </svg></div>\n          </li>\n        </ul>\n      </div>\n      <!--v-if-->\n      <!--v-if-->\n    </div>\n  </div>\n</transition-group-stub>\"\n`;\n\nexports[`Cascader should render panel (multiple) 2`] = `\n\"<transition-group-stub tag=\\\\\"div\\\\\" name=\\\\\"cascader-slide\\\\\" appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\" class=\\\\\"arco-cascader-panel arco-cascader-dropdown-panel\\\\\">\n  <div class=\\\\\"arco-cascader-panel-column\\\\\" style=\\\\\"z-index: 2;\\\\\">\n    <div class=\\\\\"arco-scrollbar arco-scrollbar-type-embed\\\\\">\n      <div class=\\\\\"arco-scrollbar-container arco-cascader-column-content\\\\\">\n        <ul role=\\\\\"menu\\\\\" class=\\\\\"arco-cascader-list arco-cascader-list-multiple\\\\\">\n          <li tabindex=\\\\\"0\\\\\" role=\\\\\"menuitem\\\\\" aria-disabled=\\\\\"false\\\\\" aria-haspopup=\\\\\"true\\\\\" aria-expanded=\\\\\"true\\\\\" title=\\\\\"Beijing\\\\\" class=\\\\\"arco-cascader-option arco-cascader-option-active\\\\\"><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n              <!---->\n            </label>\n            <!---->\n            <div class=\\\\\"arco-cascader-option-label\\\\\">Beijing<svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-right\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n                <path d=\\\\\"m16 39.513 15.556-15.557L16 8.4\\\\\"></path>\n              </svg></div>\n          </li>\n          <li tabindex=\\\\\"0\\\\\" role=\\\\\"menuitem\\\\\" aria-disabled=\\\\\"false\\\\\" aria-haspopup=\\\\\"true\\\\\" aria-expanded=\\\\\"false\\\\\" title=\\\\\"Shanghai\\\\\" class=\\\\\"arco-cascader-option\\\\\"><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n              <!---->\n            </label>\n            <!---->\n            <div class=\\\\\"arco-cascader-option-label\\\\\">Shanghai<svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-right\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n                <path d=\\\\\"m16 39.513 15.556-15.557L16 8.4\\\\\"></path>\n              </svg></div>\n          </li>\n        </ul>\n      </div>\n      <!--v-if-->\n      <!--v-if-->\n    </div>\n  </div>\n  <div class=\\\\\"arco-cascader-panel-column\\\\\" style=\\\\\"z-index: 1;\\\\\">\n    <div class=\\\\\"arco-scrollbar arco-scrollbar-type-embed\\\\\">\n      <div class=\\\\\"arco-scrollbar-container arco-cascader-column-content\\\\\">\n        <ul role=\\\\\"menu\\\\\" class=\\\\\"arco-cascader-list arco-cascader-list-multiple\\\\\">\n          <li tabindex=\\\\\"0\\\\\" role=\\\\\"menuitem\\\\\" aria-disabled=\\\\\"false\\\\\" aria-haspopup=\\\\\"false\\\\\" aria-expanded=\\\\\"false\\\\\" title=\\\\\"ChaoYang\\\\\" class=\\\\\"arco-cascader-option\\\\\"><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n              <!---->\n            </label>\n            <!---->\n            <div class=\\\\\"arco-cascader-option-label\\\\\">ChaoYang\n              <!---->\n            </div>\n          </li>\n          <li tabindex=\\\\\"0\\\\\" role=\\\\\"menuitem\\\\\" aria-disabled=\\\\\"false\\\\\" aria-haspopup=\\\\\"false\\\\\" aria-expanded=\\\\\"false\\\\\" title=\\\\\"Haidian\\\\\" class=\\\\\"arco-cascader-option\\\\\"><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n              <!---->\n            </label>\n            <!---->\n            <div class=\\\\\"arco-cascader-option-label\\\\\">Haidian\n              <!---->\n            </div>\n          </li>\n        </ul>\n      </div>\n      <!--v-if-->\n      <!--v-if-->\n    </div>\n  </div>\n</transition-group-stub>\"\n`;\n\nexports[`Cascader should render panel 1`] = `\n\"<transition-group-stub tag=\\\\\"div\\\\\" name=\\\\\"cascader-slide\\\\\" appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\" class=\\\\\"arco-cascader-panel arco-cascader-dropdown-panel\\\\\">\n  <div class=\\\\\"arco-cascader-panel-column\\\\\" style=\\\\\"z-index: 2;\\\\\">\n    <div class=\\\\\"arco-scrollbar arco-scrollbar-type-embed\\\\\">\n      <div class=\\\\\"arco-scrollbar-container arco-cascader-column-content\\\\\">\n        <ul role=\\\\\"menu\\\\\" class=\\\\\"arco-cascader-list\\\\\">\n          <li tabindex=\\\\\"0\\\\\" role=\\\\\"menuitem\\\\\" aria-disabled=\\\\\"false\\\\\" aria-haspopup=\\\\\"true\\\\\" aria-expanded=\\\\\"false\\\\\" title=\\\\\"Beijing\\\\\" class=\\\\\"arco-cascader-option\\\\\">\n            <!---->\n            <!---->\n            <div class=\\\\\"arco-cascader-option-label\\\\\">Beijing<svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-right\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n                <path d=\\\\\"m16 39.513 15.556-15.557L16 8.4\\\\\"></path>\n              </svg></div>\n          </li>\n          <li tabindex=\\\\\"0\\\\\" role=\\\\\"menuitem\\\\\" aria-disabled=\\\\\"false\\\\\" aria-haspopup=\\\\\"true\\\\\" aria-expanded=\\\\\"false\\\\\" title=\\\\\"Shanghai\\\\\" class=\\\\\"arco-cascader-option\\\\\">\n            <!---->\n            <!---->\n            <div class=\\\\\"arco-cascader-option-label\\\\\">Shanghai<svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-right\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n                <path d=\\\\\"m16 39.513 15.556-15.557L16 8.4\\\\\"></path>\n              </svg></div>\n          </li>\n        </ul>\n      </div>\n      <!--v-if-->\n      <!--v-if-->\n    </div>\n  </div>\n</transition-group-stub>\"\n`;\n\nexports[`Cascader should render panel 2`] = `\n\"<transition-group-stub tag=\\\\\"div\\\\\" name=\\\\\"cascader-slide\\\\\" appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\" class=\\\\\"arco-cascader-panel arco-cascader-dropdown-panel\\\\\">\n  <div class=\\\\\"arco-cascader-panel-column\\\\\" style=\\\\\"z-index: 2;\\\\\">\n    <div class=\\\\\"arco-scrollbar arco-scrollbar-type-embed\\\\\">\n      <div class=\\\\\"arco-scrollbar-container arco-cascader-column-content\\\\\">\n        <ul role=\\\\\"menu\\\\\" class=\\\\\"arco-cascader-list\\\\\">\n          <li tabindex=\\\\\"0\\\\\" role=\\\\\"menuitem\\\\\" aria-disabled=\\\\\"false\\\\\" aria-haspopup=\\\\\"true\\\\\" aria-expanded=\\\\\"true\\\\\" title=\\\\\"Beijing\\\\\" class=\\\\\"arco-cascader-option arco-cascader-option-active\\\\\">\n            <!---->\n            <!---->\n            <div class=\\\\\"arco-cascader-option-label\\\\\">Beijing<svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-right\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n                <path d=\\\\\"m16 39.513 15.556-15.557L16 8.4\\\\\"></path>\n              </svg></div>\n          </li>\n          <li tabindex=\\\\\"0\\\\\" role=\\\\\"menuitem\\\\\" aria-disabled=\\\\\"false\\\\\" aria-haspopup=\\\\\"true\\\\\" aria-expanded=\\\\\"false\\\\\" title=\\\\\"Shanghai\\\\\" class=\\\\\"arco-cascader-option\\\\\">\n            <!---->\n            <!---->\n            <div class=\\\\\"arco-cascader-option-label\\\\\">Shanghai<svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-right\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n                <path d=\\\\\"m16 39.513 15.556-15.557L16 8.4\\\\\"></path>\n              </svg></div>\n          </li>\n        </ul>\n      </div>\n      <!--v-if-->\n      <!--v-if-->\n    </div>\n  </div>\n  <div class=\\\\\"arco-cascader-panel-column\\\\\" style=\\\\\"z-index: 1;\\\\\">\n    <div class=\\\\\"arco-scrollbar arco-scrollbar-type-embed\\\\\">\n      <div class=\\\\\"arco-scrollbar-container arco-cascader-column-content\\\\\">\n        <ul role=\\\\\"menu\\\\\" class=\\\\\"arco-cascader-list\\\\\">\n          <li tabindex=\\\\\"0\\\\\" role=\\\\\"menuitem\\\\\" aria-disabled=\\\\\"false\\\\\" aria-haspopup=\\\\\"false\\\\\" aria-expanded=\\\\\"false\\\\\" title=\\\\\"ChaoYang\\\\\" class=\\\\\"arco-cascader-option\\\\\">\n            <!---->\n            <!---->\n            <div class=\\\\\"arco-cascader-option-label\\\\\">ChaoYang\n              <!---->\n            </div>\n          </li>\n          <li tabindex=\\\\\"0\\\\\" role=\\\\\"menuitem\\\\\" aria-disabled=\\\\\"false\\\\\" aria-haspopup=\\\\\"false\\\\\" aria-expanded=\\\\\"false\\\\\" title=\\\\\"Haidian\\\\\" class=\\\\\"arco-cascader-option\\\\\">\n            <!---->\n            <!---->\n            <div class=\\\\\"arco-cascader-option-label\\\\\">Haidian\n              <!---->\n            </div>\n          </li>\n        </ul>\n      </div>\n      <!--v-if-->\n      <!--v-if-->\n    </div>\n  </div>\n</transition-group-stub>\"\n`;\n\nexports[`Cascader should render search panel 1`] = `\n\"<div class=\\\\\"arco-scrollbar arco-scrollbar-type-embed\\\\\">\n  <div class=\\\\\"arco-scrollbar-container arco-cascader-panel arco-cascader-search-panel\\\\\">\n    <ul role=\\\\\"menu\\\\\" class=\\\\\"arco-cascader-list arco-cascader-search-list\\\\\">\n      <li tabindex=\\\\\"0\\\\\" role=\\\\\"menuitem\\\\\" aria-disabled=\\\\\"false\\\\\" aria-haspopup=\\\\\"false\\\\\" aria-expanded=\\\\\"false\\\\\" title=\\\\\"ChaoYang\\\\\" class=\\\\\"arco-cascader-option arco-cascader-search-option\\\\\">\n        <!---->\n        <!---->\n        <div class=\\\\\"arco-cascader-option-label\\\\\">Beijing / ChaoYang\n          <!---->\n        </div>\n      </li>\n      <li tabindex=\\\\\"0\\\\\" role=\\\\\"menuitem\\\\\" aria-disabled=\\\\\"false\\\\\" aria-haspopup=\\\\\"false\\\\\" aria-expanded=\\\\\"false\\\\\" title=\\\\\"Haidian\\\\\" class=\\\\\"arco-cascader-option arco-cascader-search-option\\\\\">\n        <!---->\n        <!---->\n        <div class=\\\\\"arco-cascader-option-label\\\\\">Beijing / Haidian\n          <!---->\n        </div>\n      </li>\n      <li tabindex=\\\\\"0\\\\\" role=\\\\\"menuitem\\\\\" aria-disabled=\\\\\"false\\\\\" aria-haspopup=\\\\\"false\\\\\" aria-expanded=\\\\\"false\\\\\" title=\\\\\"Huangpu\\\\\" class=\\\\\"arco-cascader-option arco-cascader-search-option\\\\\">\n        <!---->\n        <!---->\n        <div class=\\\\\"arco-cascader-option-label\\\\\">Shanghai / Huangpu\n          <!---->\n        </div>\n      </li>\n    </ul>\n  </div>\n  <!--v-if-->\n  <!--v-if-->\n</div>\"\n`;\n"
  },
  {
    "path": "packages/web-vue/components/cascader/__test__/demo.test.ts",
    "content": "import demoTest from '../../../scripts/demo-test';\n\ndemoTest('cascader');\n"
  },
  {
    "path": "packages/web-vue/components/cascader/__test__/index.test.ts",
    "content": "import { mount } from '@vue/test-utils';\nimport Cascader from '../cascader.vue';\n\nconst options = [\n  {\n    value: 'beijing',\n    label: 'Beijing',\n    children: [\n      {\n        value: 'chaoyang',\n        label: 'ChaoYang',\n      },\n      {\n        value: 'haidian',\n        label: 'Haidian',\n      },\n    ],\n  },\n  {\n    value: 'shanghai',\n    label: 'Shanghai',\n    children: [\n      {\n        value: 'huangpu',\n        label: 'Huangpu',\n      },\n    ],\n  },\n];\n\ndescribe('Cascader', () => {\n  test('should render panel', async () => {\n    const wrapper = mount(Cascader, {\n      props: {\n        options,\n      },\n    });\n    await wrapper.find('input').trigger('click');\n    const panel = wrapper.findComponent({ name: 'BaseCascaderPanel' });\n    expect(panel.html()).toMatchSnapshot();\n    await panel.find('.arco-cascader-option').trigger('click');\n    expect(panel.html()).toMatchSnapshot();\n  });\n\n  test('should render panel (multiple)', async () => {\n    const wrapper = mount(Cascader, {\n      props: {\n        options,\n        multiple: true,\n      },\n    });\n    await wrapper.find('input').trigger('click');\n    const panel = wrapper.findComponent({ name: 'BaseCascaderPanel' });\n    expect(panel.html()).toMatchSnapshot();\n    await panel.find('.arco-cascader-option').trigger('click');\n    expect(panel.html()).toMatchSnapshot();\n  });\n\n  test('should render search panel', async () => {\n    const wrapper = mount(Cascader, {\n      props: {\n        options,\n        allowSearch: true,\n      },\n    });\n\n    const input = wrapper.find('input');\n    await input.trigger('click');\n    await input.setValue('a');\n    const panel = wrapper.findComponent({ name: 'CascaderSearchPanel' });\n    expect(panel.html()).toMatchSnapshot();\n  });\n\n  test('should emit change event', async () => {\n    const wrapper = mount(Cascader, {\n      props: {\n        options,\n      },\n    });\n\n    await wrapper.find('input').trigger('click');\n    const panel = wrapper.findComponent({ name: 'BaseCascaderPanel' });\n    await panel.find('.arco-cascader-option').trigger('click');\n    await panel.findAll('.arco-cascader-option')[2].trigger('click');\n    expect(wrapper.emitted('change')?.[0]).toEqual(['chaoyang']);\n  });\n\n  test('should emit change event (pathMode)', async () => {\n    const wrapper = mount(Cascader, {\n      props: {\n        options,\n        pathMode: true,\n      },\n    });\n\n    await wrapper.find('input').trigger('click');\n    const panel = wrapper.findComponent({ name: 'BaseCascaderPanel' });\n    await panel.find('.arco-cascader-option').trigger('click');\n    await panel.findAll('.arco-cascader-option')[2].trigger('click');\n    expect(wrapper.emitted('change')?.[0]).toEqual([['beijing', 'chaoyang']]);\n  });\n\n  test('should emit change event (multiple)', async () => {\n    const wrapper = mount(Cascader, {\n      props: {\n        options,\n        multiple: true,\n      },\n    });\n\n    await wrapper.find('input').trigger('click');\n    const panel = wrapper.findComponent({ name: 'BaseCascaderPanel' });\n    await panel.find('.arco-cascader-option').trigger('click');\n    await panel.findAllComponents({ name: 'Checkbox' })[2].trigger('click');\n    expect(wrapper.emitted('change')?.[0]).toEqual([['chaoyang']]);\n  });\n\n  test('should support keyboard action', async () => {\n    const wrapper = mount(Cascader, {\n      props: {\n        options,\n      },\n    });\n\n    const input = wrapper.find('input');\n    await input.trigger('click');\n    const dropdown = wrapper.findComponent({ name: 'BaseCascaderPanel' });\n\n    await input.trigger('keydown', { key: 'ArrowDown' });\n    expect(dropdown.find('.arco-cascader-option-active').text()).toBe(\n      'Beijing'\n    );\n\n    await input.trigger('keydown', { key: 'ArrowRight' });\n    expect(dropdown.findAll('.arco-cascader-panel-column')).toHaveLength(2);\n    expect(dropdown.findAll('.arco-cascader-option-active')[1].text()).toBe(\n      'ChaoYang'\n    );\n\n    await input.trigger('keydown', { key: 'ArrowDown' });\n    expect(dropdown.findAll('.arco-cascader-option-active')[1].text()).toBe(\n      'Haidian'\n    );\n\n    await input.trigger('keydown', { key: 'Enter' });\n    expect(wrapper.emitted('change')?.[0]).toEqual(['haidian']);\n  });\n});\n"
  },
  {
    "path": "packages/web-vue/components/cascader/base-cascader-panel.tsx",
    "content": "import { defineComponent, inject, PropType, TransitionGroup } from 'vue';\nimport { configProviderInjectionKey } from '../config-provider/context';\nimport { CascaderOptionInfo } from './interface';\nimport { getPrefixCls } from '../_utils/global-config';\nimport Empty from '../empty';\nimport Spin from '../spin';\nimport { VirtualListProps } from '../_components/virtual-list-v2/interface';\nimport CascaderColumn from './cascader-column';\n\nexport default defineComponent({\n  name: 'BaseCascaderPanel',\n  props: {\n    displayColumns: {\n      type: Array as PropType<CascaderOptionInfo[][]>,\n      required: true,\n    },\n    selectedPath: {\n      type: Array as PropType<string[]>,\n      required: true,\n    },\n    activeKey: String,\n    totalLevel: {\n      type: Number,\n      required: true,\n    },\n    multiple: Boolean,\n    checkStrictly: Boolean,\n    loading: Boolean,\n    dropdown: Boolean,\n    virtualListProps: {\n      type: Object as PropType<VirtualListProps>,\n    },\n  },\n  setup(props, { slots }) {\n    const prefixCls = getPrefixCls('cascader');\n    const configCtx = inject(configProviderInjectionKey, undefined);\n\n    const renderEmpty = () => {\n      return (\n        slots.empty?.() ??\n        configCtx?.slots.empty?.({ component: 'cascader' }) ?? <Empty />\n      );\n    };\n\n    const renderContent = () => {\n      if (props.loading) {\n        return (\n          <div\n            key=\"panel-column-loading\"\n            class={[\n              `${prefixCls}-panel-column`,\n              `${prefixCls}-panel-column-loading`,\n            ]}\n          >\n            <Spin />\n          </div>\n        );\n      }\n      if (props.displayColumns.length === 0) {\n        return (\n          <div key=\"panel-column-empty\" class={`${prefixCls}-panel-column`}>\n            <div class={`${prefixCls}-list-empty`}>{renderEmpty()}</div>\n          </div>\n        );\n      }\n      return props.displayColumns.map((column, index) => (\n        <CascaderColumn\n          key={`column-${index}`}\n          column={column}\n          level={index}\n          selectedPath={props.selectedPath}\n          activeKey={props.activeKey}\n          totalLevel={props.totalLevel}\n          multiple={props.multiple}\n          checkStrictly={props.checkStrictly}\n          virtualListProps={props.virtualListProps}\n          v-slots={{\n            empty: slots.empty,\n          }}\n        />\n      ));\n    };\n\n    return () => (\n      <TransitionGroup\n        tag=\"div\"\n        name=\"cascader-slide\"\n        // @ts-ignore\n        class={[\n          `${prefixCls}-panel`,\n          {\n            [`${prefixCls}-dropdown-panel`]: props.dropdown,\n          },\n        ]}\n      >\n        {renderContent()}\n      </TransitionGroup>\n    );\n  },\n});\n"
  },
  {
    "path": "packages/web-vue/components/cascader/cascader-column.tsx",
    "content": "import { defineComponent, inject, PropType, ref } from 'vue';\nimport { configProviderInjectionKey } from '../config-provider/context';\nimport { CascaderOptionInfo } from './interface';\nimport CascaderOption from './cascader-option';\nimport { getPrefixCls } from '../_utils/global-config';\nimport Empty from '../empty';\nimport Scrollbar from '../scrollbar';\nimport VirtualList from '../_components/virtual-list-v2';\nimport { VirtualListProps } from '../_components/virtual-list-v2/interface';\n\nexport default defineComponent({\n  name: 'CascaderColumn',\n  props: {\n    column: {\n      type: Array as PropType<CascaderOptionInfo[]>,\n      required: true,\n    },\n    level: {\n      type: Number,\n      default: 0,\n    },\n    selectedPath: {\n      type: Array as PropType<string[]>,\n      required: true,\n    },\n    activeKey: String,\n    totalLevel: {\n      type: Number,\n      required: true,\n    },\n    multiple: Boolean,\n    checkStrictly: Boolean,\n    virtualListProps: {\n      type: Object as PropType<VirtualListProps>,\n    },\n  },\n  setup(props, { slots }) {\n    const prefixCls = getPrefixCls('cascader');\n    const configCtx = inject(configProviderInjectionKey, undefined);\n    const virtualListRef = ref();\n    const isVirtual = ref(Boolean(props.virtualListProps));\n\n    const renderEmpty = () => {\n      return (\n        slots.empty?.() ??\n        configCtx?.slots.empty?.({ component: 'cascader' }) ?? <Empty />\n      );\n    };\n\n    return () => {\n      return (\n        <div\n          class={`${prefixCls}-panel-column`}\n          style={{ zIndex: props.totalLevel - props.level }}\n        >\n          {props.column.length === 0 ? (\n            <Scrollbar class={`${prefixCls}-column-content`}>\n              <div class={`${prefixCls}-list-empty`}>{renderEmpty()}</div>\n            </Scrollbar>\n          ) : isVirtual.value ? (\n            <VirtualList\n              key={props.column?.length}\n              {...props.virtualListProps}\n              ref={virtualListRef}\n              data={props.column}\n              v-slots={{\n                item: ({ item }: { item: CascaderOptionInfo }) => {\n                  return (\n                    <CascaderOption\n                      key={item.key}\n                      option={item}\n                      active={\n                        props.selectedPath.includes(item.key) ||\n                        item.key === props.activeKey\n                      }\n                      multiple={props.multiple}\n                      checkStrictly={props.checkStrictly}\n                    />\n                  );\n                },\n              }}\n            />\n          ) : (\n            <Scrollbar class={`${prefixCls}-column-content`}>\n              <ul\n                role=\"menu\"\n                class={[\n                  `${prefixCls}-list`,\n                  {\n                    [`${prefixCls}-list-multiple`]: Boolean(props?.multiple),\n                    [`${prefixCls}-list-strictly`]: Boolean(\n                      props?.checkStrictly\n                    ),\n                  },\n                ]}\n              >\n                {props.column.map((item) => {\n                  return (\n                    <CascaderOption\n                      key={item.key}\n                      option={item}\n                      active={\n                        props.selectedPath.includes(item.key) ||\n                        item.key === props.activeKey\n                      }\n                      multiple={props.multiple}\n                      checkStrictly={props.checkStrictly}\n                    />\n                  );\n                })}\n              </ul>\n            </Scrollbar>\n          )}\n        </div>\n      );\n    };\n  },\n});\n"
  },
  {
    "path": "packages/web-vue/components/cascader/cascader-option.tsx",
    "content": "import type { PropType } from 'vue';\nimport { computed, defineComponent, inject, ref } from 'vue';\nimport Checkbox from '../checkbox';\nimport Radio from '../radio';\nimport { getPrefixCls } from '../_utils/global-config';\nimport type { CascaderOption, CascaderOptionInfo } from './interface';\nimport IconRight from '../icon/icon-right';\nimport IconLoading from '../icon/icon-loading';\nimport { getCheckedStatus, getOptionLabel } from './utils';\nimport { isFunction } from '../_utils/is';\nimport { CascaderContext, cascaderInjectionKey } from './context';\n\nexport default defineComponent({\n  name: 'CascaderOption',\n  props: {\n    option: {\n      type: Object as PropType<CascaderOptionInfo>,\n      required: true,\n    },\n    active: Boolean,\n    multiple: Boolean,\n    checkStrictly: Boolean,\n    searchOption: Boolean,\n    pathLabel: Boolean,\n  },\n  setup(props) {\n    const prefixCls = getPrefixCls('cascader-option');\n    const cascaderCtx = inject<Partial<CascaderContext>>(\n      cascaderInjectionKey,\n      {}\n    );\n\n    const isLoading = ref(false);\n    const events: Record<string, any> = {};\n\n    const handlePathChange = (ev: Event) => {\n      if (isFunction(cascaderCtx.loadMore) && !props.option.isLeaf) {\n        const { isLeaf, children, key } = props.option;\n        if (!isLeaf && !children) {\n          isLoading.value = true;\n          new Promise<CascaderOption[] | undefined>((resolve) => {\n            cascaderCtx.loadMore?.(props.option.raw, resolve);\n          }).then((children?: CascaderOption[]) => {\n            isLoading.value = false;\n            if (children) {\n              cascaderCtx.addLazyLoadOptions?.(children, key);\n            }\n          });\n        }\n      }\n      cascaderCtx.setSelectedPath?.(props.option.key);\n    };\n\n    if (!props.option.disabled) {\n      events.onMouseenter = [\n        () => cascaderCtx.setActiveKey?.(props.option.key),\n      ];\n      events.onMouseleave = () => cascaderCtx.setActiveKey?.();\n      events.onClick = [];\n      if (cascaderCtx.expandTrigger === 'hover') {\n        events.onMouseenter.push((ev: Event) => handlePathChange(ev));\n      } else {\n        events.onClick.push((ev: Event) => handlePathChange(ev));\n      }\n      if (props.option.isLeaf && !props.multiple) {\n        events.onClick.push((ev: Event) => {\n          handlePathChange(ev);\n          cascaderCtx.onClickOption?.(props.option);\n        });\n      }\n    }\n\n    const cls = computed(() => [\n      prefixCls,\n      {\n        [`${prefixCls}-active`]: props.active,\n        [`${prefixCls}-disabled`]: props.option.disabled,\n      },\n    ]);\n\n    const checkedStatus = computed(() => {\n      if (props.checkStrictly) {\n        return {\n          checked: cascaderCtx.valueMap?.has(props.option.key),\n          indeterminate: false,\n        };\n      }\n      return getCheckedStatus(props.option, cascaderCtx.valueMap);\n    });\n\n    const renderLabelContent = () => {\n      if (props.pathLabel) {\n        return (\n          cascaderCtx?.formatLabel?.(\n            props.option.path.map((item) => item.raw)\n          ) ?? getOptionLabel(props.option)\n        );\n      }\n      if (cascaderCtx.slots?.option) {\n        return cascaderCtx.slots.option({ data: props.option });\n      }\n      if (isFunction(props.option.render)) {\n        return props.option.render();\n      }\n      return props.option.label;\n    };\n\n    const renderIcon = () => {\n      if (isLoading.value) {\n        return <IconLoading />;\n      }\n      if (!props.searchOption && !props.option.isLeaf) {\n        return <IconRight />;\n      }\n      return null;\n    };\n\n    return () => (\n      <li\n        tabindex=\"0\"\n        role=\"menuitem\"\n        aria-disabled={props.option.disabled}\n        aria-haspopup={!props.option.isLeaf}\n        aria-expanded={!props.option.isLeaf && props.active}\n        title={props.option.label}\n        class={cls.value}\n        {...events}\n      >\n        {props.multiple && (\n          <Checkbox\n            modelValue={checkedStatus.value.checked}\n            indeterminate={checkedStatus.value.indeterminate}\n            disabled={props.option.disabled || props.option.selectionDisabled}\n            uninjectGroupContext\n            onChange={(value: any, ev: Event) => {\n              ev.stopPropagation();\n              handlePathChange(ev);\n              cascaderCtx.onClickOption?.(\n                props.option,\n                !checkedStatus.value.checked\n              );\n            }}\n            // @ts-ignore\n            onClick={(ev: Event) => ev.stopPropagation()}\n          />\n        )}\n        {props.checkStrictly && !props.multiple && (\n          <Radio\n            modelValue={cascaderCtx.valueMap?.has(props.option.key)}\n            disabled={props.option.disabled}\n            uninjectGroupContext\n            onChange={(value: any, ev: Event) => {\n              ev.stopPropagation();\n              handlePathChange(ev);\n              cascaderCtx.onClickOption?.(props.option, true);\n            }}\n            // @ts-ignore\n            onClick={(ev: Event) => ev.stopPropagation()}\n          />\n        )}\n        <div class={`${prefixCls}-label`}>\n          {renderLabelContent()}\n          {renderIcon()}\n        </div>\n      </li>\n    );\n  },\n});\n"
  },
  {
    "path": "packages/web-vue/components/cascader/cascader-panel.vue",
    "content": "<template>\n  <base-cascader-panel\n    :display-columns=\"displayColumns\"\n    :selected-path=\"selectedPath\"\n    :active-key=\"activeKey\"\n    :multiple=\"multiple\"\n    :total-level=\"totalLevel\"\n    :check-strictly=\"checkStrictly\"\n    @keydown=\"handleKeyDown\"\n  >\n    <template v-if=\"$slots.empty\" #empty>\n      <slot name=\"empty\" />\n    </template>\n  </base-cascader-panel>\n</template>\n\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  PropType,\n  provide,\n  reactive,\n  ref,\n  toRefs,\n  watch,\n} from 'vue';\nimport { BaseType, Data, UnionType } from '../_utils/types';\nimport {\n  CascaderFieldNames,\n  CascaderOption,\n  CascaderOptionInfo,\n} from './interface';\nimport { isNull, isUndefined } from '../_utils/is';\nimport BaseCascaderPanel from './base-cascader-panel';\nimport {\n  getCheckedStatus,\n  getLeafOptionInfos,\n  getLeafOptionKeys,\n  getOptionInfos,\n  getValidValues,\n  getValueKey,\n} from './utils';\nimport { useSelectedPath } from './hooks/use-selected-path';\nimport { cascaderInjectionKey } from './context';\nimport { KEYBOARD_KEY, getKeyDownHandler } from '../_utils/keyboard';\n\nexport default defineComponent({\n  name: 'CascaderPanel',\n  components: {\n    BaseCascaderPanel,\n  },\n  props: {\n    /**\n     * @zh 绑定值是否为路径\n     * @en Whether the value is a path\n     */\n    pathMode: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 是否为多选状态（多选模式默认开启搜索）\n     * @en Whether it is a multi-selection state (The search is turned on by default in the multi-select mode)\n     */\n    multiple: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 绑定值\n     * @en Value\n     */\n    modelValue: {\n      type: [String, Number, Array] as PropType<\n        | string\n        | number\n        | Record<string, any>\n        | (\n            | string\n            | number\n            | Record<string, any>\n            | (string | number | Record<string, any>)[]\n          )[]\n        | undefined\n      >,\n    },\n    /**\n     * @zh 默认值（非受控状态）\n     * @en Default value (uncontrolled state)\n     * @defaultValue '' \\| undefined \\| []\n     */\n    defaultValue: {\n      type: [String, Number, Array] as PropType<\n        | string\n        | number\n        | Record<string, any>\n        | (\n            | string\n            | number\n            | Record<string, any>\n            | (string | number | Record<string, any>)[]\n          )[]\n        | undefined\n      >,\n      default: (props: Data) =>\n        props.multiple ? [] : props.pathMode ? undefined : '',\n    },\n    /**\n     * @zh 级联选择器的选项\n     * @en Options for cascader\n     */\n    options: {\n      type: Array as PropType<CascaderOption[]>,\n      default: () => [],\n    },\n    /**\n     * @zh 展开下一级的触发方式\n     * @en Expand the trigger method of the next level\n     */\n    expandTrigger: {\n      type: String,\n      default: 'click',\n    },\n    /**\n     * @zh 是否开启严格选择模式\n     * @en Whether to enable strict selection mode\n     */\n    checkStrictly: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 数据懒加载函数，传入时开启懒加载功能\n     * @en Data lazy loading function, open the lazy loading function when it is passed in\n     * @version 2.13.0\n     */\n    loadMore: {\n      type: Function as PropType<\n        (\n          option: CascaderOption,\n          done: (children?: CascaderOption[]) => void\n        ) => void\n      >,\n    },\n    /**\n     * @zh 自定义 `CascaderOption` 中的字段\n     * @en Customize fields in `CascaderOption`\n     * @version 2.22.0\n     */\n    fieldNames: {\n      type: Object as PropType<CascaderFieldNames>,\n    },\n    /**\n     * @zh 用于确定选项键值的属性名\n     * @en Used to determine the option key value attribute name\n     * @version 2.29.0\n     */\n    valueKey: {\n      type: String,\n      default: 'value',\n    },\n    /**\n     * @zh 是否展开子菜单\n     * @en whether to expand the submenu\n     * @version 2.29.0\n     */\n    expandChild: {\n      type: Boolean,\n      default: false,\n    },\n  },\n  emits: {\n    'update:modelValue': (\n      value:\n        | string\n        | number\n        | Record<string, any>\n        | (\n            | string\n            | number\n            | Record<string, any>\n            | (string | number | Record<string, any>)[]\n          )[]\n        | undefined\n    ) => true,\n    /**\n     * @zh 选中值改变时触发\n     * @en Triggered when the selected value changes\n     * @property {string | number | (string | number | (string | number)[])[] | undefined} value\n     */\n    'change': (\n      value:\n        | string\n        | number\n        | Record<string, any>\n        | (\n            | string\n            | number\n            | Record<string, any>\n            | (string | number | Record<string, any>)[]\n          )[]\n        | undefined\n    ) => true,\n  },\n  /**\n   * @zh 选项为空时的显示内容\n   * @en Display content when the option is empty\n   * @slot empty\n   * @version 2.23.0\n   */\n  setup(props, { emit, slots }) {\n    const {\n      options,\n      checkStrictly,\n      loadMore,\n      modelValue,\n      valueKey,\n      expandChild,\n      expandTrigger,\n    } = toRefs(props);\n    const _value = ref(props.defaultValue);\n\n    watch(modelValue, (value) => {\n      if (isUndefined(value) || isNull(value)) {\n        _value.value = props.multiple ? [] : undefined;\n      }\n    });\n\n    const optionInfos = ref<CascaderOptionInfo[]>([]);\n    const totalLevel = ref(1);\n\n    const optionMap = reactive(new Map<string, CascaderOptionInfo>());\n    const leafOptionMap = reactive(new Map<string, CascaderOptionInfo>());\n    const leafOptionValueMap = reactive(new Map<BaseType, string>());\n    const leafOptionSet = reactive(new Set<CascaderOptionInfo>());\n\n    const lazyLoadOptions = reactive<Record<string, CascaderOption[]>>({});\n\n    const addLazyLoadOptions = (children: CascaderOption[], key: string) => {\n      lazyLoadOptions[key] = children;\n    };\n\n    const DEFAULT_FIELD_NAMES = {\n      value: 'value',\n      label: 'label',\n      disabled: 'disabled',\n      children: 'children',\n      tagProps: 'tagProps',\n      render: 'render',\n      isLeaf: 'isLeaf',\n    };\n\n    const mergedFieldNames = computed(() => ({\n      ...DEFAULT_FIELD_NAMES,\n      ...props.fieldNames,\n    }));\n\n    watch(\n      [options, lazyLoadOptions, mergedFieldNames],\n      ([_options, _lazyLoadOptions, _fieldNames]) => {\n        optionMap.clear();\n        leafOptionMap.clear();\n        leafOptionValueMap.clear();\n        leafOptionSet.clear();\n\n        optionInfos.value = getOptionInfos(_options ?? [], {\n          enabledLazyLoad: Boolean(props.loadMore),\n          lazyLoadOptions: _lazyLoadOptions,\n          optionMap,\n          leafOptionSet,\n          leafOptionMap,\n          leafOptionValueMap,\n          totalLevel,\n          checkStrictly,\n          fieldNames: _fieldNames,\n          valueKey,\n        });\n      },\n      {\n        immediate: true,\n      }\n    );\n\n    const computedValueMap = computed(() => {\n      const values = getValidValues(props.modelValue ?? _value.value, {\n        multiple: props.multiple,\n        pathMode: props.pathMode,\n      });\n      return new Map(\n        values.map((value) => [\n          getValueKey(value, {\n            valueKey: props.valueKey,\n            leafOptionValueMap,\n          }),\n          value,\n        ])\n      );\n    });\n\n    const filteredLeafOptions = computed(() =>\n      props.checkStrictly\n        ? Array.from(optionMap.values())\n        : Array.from(leafOptionSet)\n    );\n\n    const updateValue = (values: UnionType[] | UnionType[][]) => {\n      const value = props.multiple ? values : values[0] ?? '';\n      if (values.length === 0) {\n        setSelectedPath();\n        setActiveKey();\n      }\n\n      _value.value = value;\n      emit('update:modelValue', value);\n      emit('change', value);\n    };\n\n    const selectSingle = (option: CascaderOptionInfo) => {\n      updateValue([props.pathMode ? option.pathValue : option.value]);\n    };\n\n    const selectMultiple = (option: CascaderOptionInfo, checked: boolean) => {\n      if (checked) {\n        const leafOptionInfos = props.checkStrictly\n          ? [option]\n          : getLeafOptionInfos(option);\n\n        updateValue([\n          ...computedValueMap.value.values(),\n          ...leafOptionInfos\n            .filter((item) => !computedValueMap.value.has(item.key))\n            .map((item) => {\n              return props.pathMode ? item.pathValue : item.value;\n            }),\n        ]);\n      } else {\n        const leafOptionKeys = props.checkStrictly\n          ? [option.key]\n          : getLeafOptionKeys(option);\n        const values: any[] = [];\n        computedValueMap.value.forEach((value, key) => {\n          if (!leafOptionKeys.includes(key)) {\n            values.push(value);\n          }\n        });\n        updateValue(values);\n      }\n    };\n\n    const handleClickOption = (\n      option: CascaderOptionInfo,\n      checked?: boolean\n    ) => {\n      if (props.multiple) {\n        selectMultiple(option, checked ?? true);\n      } else {\n        selectSingle(option);\n      }\n    };\n\n    const {\n      activeKey,\n      activeOption,\n      selectedPath,\n      displayColumns,\n      setActiveKey,\n      setSelectedPath,\n      getNextActiveNode,\n    } = useSelectedPath(optionInfos, {\n      optionMap,\n      filteredLeafOptions,\n      expandChild,\n    });\n\n    provide(\n      cascaderInjectionKey,\n      reactive({\n        onClickOption: handleClickOption,\n        setActiveKey,\n        setSelectedPath,\n        loadMore,\n        addLazyLoadOptions,\n        slots,\n        valueMap: computedValueMap,\n        expandTrigger,\n      })\n    );\n\n    const handleKeyDown = getKeyDownHandler(\n      new Map([\n        [\n          KEYBOARD_KEY.ENTER,\n          (ev: Event) => {\n            if (activeOption.value) {\n              let checked: boolean;\n              if (props.checkStrictly || activeOption.value.isLeaf) {\n                checked = !computedValueMap.value.has(activeOption.value.key);\n              } else {\n                checked = !getCheckedStatus(\n                  activeOption.value,\n                  computedValueMap.value\n                ).checked;\n              }\n              setSelectedPath(activeOption.value.key);\n              handleClickOption(activeOption.value, checked);\n            }\n          },\n        ],\n        [\n          KEYBOARD_KEY.ARROW_DOWN,\n          (ev: Event) => {\n            ev.preventDefault();\n            const activeNode = getNextActiveNode('next');\n            setActiveKey(activeNode?.key);\n          },\n        ],\n        [\n          KEYBOARD_KEY.ARROW_UP,\n          (ev: Event) => {\n            ev.preventDefault();\n            const activeNode = getNextActiveNode('preview');\n            setActiveKey(activeNode?.key);\n          },\n        ],\n        [\n          KEYBOARD_KEY.ARROW_RIGHT,\n          (ev: Event) => {\n            ev.preventDefault();\n            if (activeOption.value?.children) {\n              setSelectedPath(activeOption.value.key);\n              setActiveKey(activeOption.value.children[0]?.key);\n            }\n          },\n        ],\n        [\n          KEYBOARD_KEY.ARROW_LEFT,\n          (ev: Event) => {\n            ev.preventDefault();\n            if (activeOption.value?.parent) {\n              setSelectedPath(activeOption.value.parent.key);\n              setActiveKey(activeOption.value.parent.key);\n            }\n          },\n        ],\n      ])\n    );\n\n    return {\n      optionInfos,\n      filteredLeafOptions,\n      selectedPath,\n      activeKey,\n      displayColumns,\n      handleKeyDown,\n      totalLevel,\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/cascader/cascader-search-panel.tsx",
    "content": "import { defineComponent, inject, PropType } from 'vue';\nimport { CascaderOptionInfo } from './interface';\nimport { getPrefixCls } from '../_utils/global-config';\nimport { configProviderInjectionKey } from '../config-provider/context';\nimport Empty from '../empty';\nimport Spin from '../spin';\nimport CascaderOption from './cascader-option';\nimport Scrollbar from '../scrollbar';\n\nexport default defineComponent({\n  name: 'CascaderSearchPanel',\n  props: {\n    options: {\n      type: Array as PropType<CascaderOptionInfo[]>,\n      required: true,\n    },\n    loading: Boolean,\n    activeKey: String,\n    multiple: Boolean,\n    checkStrictly: Boolean,\n    pathLabel: Boolean,\n  },\n  setup(props, { slots }) {\n    const prefixCls = getPrefixCls('cascader');\n    const configCtx = inject(configProviderInjectionKey, undefined);\n\n    const renderContent = () => {\n      if (props.loading) {\n        return <Spin />;\n      }\n      if (props.options.length === 0) {\n        return (\n          <div class={`${prefixCls}-list-empty`}>\n            {slots.empty?.() ??\n              configCtx?.slots.empty?.({ component: 'cascader' }) ?? <Empty />}\n          </div>\n        );\n      }\n      return (\n        <ul\n          role=\"menu\"\n          class={[\n            `${prefixCls}-list`,\n            `${prefixCls}-search-list`,\n            {\n              [`${prefixCls}-list-multiple`]: props.multiple,\n            },\n          ]}\n        >\n          {props.options.map((item) => (\n            <CascaderOption\n              key={item.key}\n              class={`${prefixCls}-search-option`}\n              option={item}\n              active={item.key === props.activeKey}\n              multiple={props.multiple}\n              checkStrictly={props.checkStrictly}\n              pathLabel={props.pathLabel}\n              searchOption\n            />\n          ))}\n        </ul>\n      );\n    };\n\n    return () => (\n      <Scrollbar class={[`${prefixCls}-panel`, `${prefixCls}-search-panel`]}>\n        {renderContent()}\n      </Scrollbar>\n    );\n  },\n});\n"
  },
  {
    "path": "packages/web-vue/components/cascader/cascader.vue",
    "content": "<template>\n  <trigger\n    v-bind=\"triggerProps\"\n    trigger=\"click\"\n    animation-name=\"slide-dynamic-origin\"\n    auto-fit-transform-origin\n    :popup-visible=\"computedPopupVisible\"\n    position=\"bl\"\n    :disabled=\"mergedDisabled\"\n    :popup-offset=\"4\"\n    :auto-fit-popup-width=\"showSearchPanel\"\n    :popup-container=\"popupContainer\"\n    :prevent-focus=\"true\"\n    :click-to-close=\"!allowSearch\"\n    @popup-visible-change=\"handlePopupVisibleChange\"\n  >\n    <select-view\n      :model-value=\"selectViewValue\"\n      :input-value=\"computedInputValue\"\n      :disabled=\"mergedDisabled\"\n      :error=\"error\"\n      :multiple=\"multiple\"\n      :allow-clear=\"allowClear\"\n      :allow-search=\"allowSearch\"\n      :size=\"size\"\n      :opened=\"computedPopupVisible\"\n      :placeholder=\"placeholder\"\n      :loading=\"loading\"\n      :max-tag-count=\"maxTagCount\"\n      :tag-nowrap=\"tagNowrap\"\n      v-bind=\"$attrs\"\n      @input-value-change=\"handleInputValueChange\"\n      @clear=\"handleClear\"\n      @focus=\"handleFocus\"\n      @blur=\"handleBlur\"\n      @remove=\"handleRemove\"\n      @keydown=\"handleKeyDown\"\n    >\n      <template v-if=\"$slots.label\" #label=\"data\">\n        <slot name=\"label\" v-bind=\"data\" />\n      </template>\n      <template v-if=\"$slots.prefix\" #prefix>\n        <slot name=\"prefix\" />\n      </template>\n      <template v-if=\"$slots['arrow-icon']\" #arrow-icon>\n        <slot name=\"arrow-icon\" />\n      </template>\n      <template v-if=\"$slots['loading-icon']\" #loading-icon>\n        <slot name=\"loading-icon\" />\n      </template>\n      <template v-if=\"$slots['search-icon']\" #search-icon>\n        <slot name=\"search-icon\" />\n      </template>\n    </select-view>\n    <template #content>\n      <cascader-search-panel\n        v-if=\"showSearchPanel\"\n        :options=\"filteredLeafOptions\"\n        :active-key=\"activeKey\"\n        :multiple=\"multiple\"\n        :check-strictly=\"checkStrictly\"\n        :loading=\"loading\"\n        :path-label=\"!searchOptionOnlyLabel\"\n      >\n        <template v-if=\"$slots.empty\" #empty>\n          <slot name=\"empty\" />\n        </template>\n      </cascader-search-panel>\n      <base-cascader-panel\n        v-else\n        :display-columns=\"displayColumns\"\n        :selected-path=\"selectedPath\"\n        :active-key=\"activeKey\"\n        :multiple=\"multiple\"\n        :total-level=\"totalLevel\"\n        :check-strictly=\"checkStrictly\"\n        :loading=\"loading\"\n        :virtual-list-props=\"virtualListProps\"\n        dropdown\n      >\n        <template v-if=\"$slots.empty\" #empty>\n          <slot name=\"empty\" />\n        </template>\n      </base-cascader-panel>\n    </template>\n  </trigger>\n</template>\n\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  PropType,\n  provide,\n  reactive,\n  ref,\n  toRefs,\n  watch,\n} from 'vue';\nimport {\n  getCheckedStatus,\n  getLeafOptionInfos,\n  getLeafOptionKeys,\n  getOptionInfos,\n  getOptionLabel,\n  getValidValues,\n  getValueKey,\n} from './utils';\nimport Trigger, { TriggerProps } from '../trigger';\nimport SelectView from '../_components/select-view/select-view';\nimport BaseCascaderPanel from './base-cascader-panel';\nimport CascaderSearchPanel from './cascader-search-panel';\nimport {\n  CascaderFieldNames,\n  CascaderOption,\n  CascaderOptionInfo,\n} from './interface';\nimport { isArray, isFunction, isNull, isUndefined } from '../_utils/is';\nimport { BaseType, Data, UnionType } from '../_utils/types';\nimport { useSelectedPath } from './hooks/use-selected-path';\nimport { KEYBOARD_KEY, getKeyDownHandler } from '../_utils/keyboard';\nimport { cascaderInjectionKey } from './context';\nimport { Size } from '../_utils/constant';\nimport { debounce } from '../_utils/debounce';\nimport { useFormItem } from '../_hooks/use-form-item';\nimport { VirtualListProps } from '../_components/virtual-list-v2/interface';\n\nexport default defineComponent({\n  name: 'Cascader',\n  components: {\n    Trigger,\n    SelectView,\n    BaseCascaderPanel,\n    CascaderSearchPanel,\n  },\n  inheritAttrs: false,\n  props: {\n    /**\n     * @zh 绑定值是否为路径\n     * @en Whether the value is a path\n     */\n    pathMode: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 是否为多选状态（多选模式默认开启搜索）\n     * @en Whether it is a multi-selection state (The search is turned on by default in the multi-select mode)\n     */\n    multiple: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 绑定值\n     * @en Value\n     */\n    modelValue: {\n      type: [String, Number, Object, Array] as PropType<\n        | string\n        | number\n        | Record<string, any>\n        | (\n            | string\n            | number\n            | Record<string, any>\n            | (string | number | Record<string, any>)[]\n          )[]\n        | undefined\n      >,\n    },\n    /**\n     * @zh 默认值（非受控状态）\n     * @en Default value (uncontrolled state)\n     * @defaultValue '' \\| undefined \\| []\n     */\n    defaultValue: {\n      type: [String, Number, Object, Array] as PropType<\n        | string\n        | number\n        | Record<string, any>\n        | (\n            | string\n            | number\n            | Record<string, any>\n            | (string | number | Record<string, any>)[]\n          )[]\n        | undefined\n      >,\n      default: (props: Data) =>\n        props.multiple ? [] : props.pathMode ? undefined : '',\n    },\n    /**\n     * @zh 级联选择器的选项\n     * @en Options for cascader\n     */\n    options: {\n      type: Array as PropType<CascaderOption[]>,\n      default: () => [],\n    },\n    /**\n     * @zh 是否禁用\n     * @en Whether to disable\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 是否为错误状态\n     * @en Whether it is an error state\n     */\n    error: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 选择框的大小\n     * @en The size of the select\n     * @values 'mini', 'small', 'medium', 'large'\n     * @defaultValue 'medium'\n     */\n    size: {\n      type: String as PropType<Size>,\n    },\n    /**\n     * @zh 是否允许搜索\n     * @en Whether to allow searching\n     * @defaultValue false (single) \\| true (multiple)\n     */\n    allowSearch: {\n      type: Boolean,\n      default: (props: Data) => Boolean(props.multiple),\n    },\n    /**\n     * @zh 是否允许清除\n     * @en Whether to allow clear\n     */\n    allowClear: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 输入框的值\n     * @en The value of the input\n     * @vModel\n     */\n    inputValue: {\n      type: String,\n      default: undefined,\n    },\n    /**\n     * @zh 输入框的默认值（非受控状态）\n     * @en The default value of the input (uncontrolled state)\n     */\n    defaultInputValue: {\n      type: String,\n      default: '',\n    },\n    /**\n     * @zh 是否显示下拉框\n     * @en Whether to show the dropdown\n     * @vModel\n     */\n    popupVisible: {\n      type: Boolean,\n      default: undefined,\n    },\n    /**\n     * @zh 展开下一级的触发方式\n     * @en Expand the trigger method of the next level\n     */\n    expandTrigger: {\n      type: String as PropType<'click' | 'hover'>,\n      default: 'click',\n    },\n    /**\n     * @zh 是否默认显示下拉框（非受控状态）\n     * @en Whether to display the dropdown by default (uncontrolled state)\n     */\n    defaultPopupVisible: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 占位符\n     * @en Placeholder\n     */\n    placeholder: String,\n    /**\n     * @zh 自定义选项过滤方法\n     * @en Custom options filter method\n     */\n    filterOption: {\n      type: Function as PropType<\n        (inputValue: string, option: CascaderOption) => boolean\n      >,\n    },\n    /**\n     * @zh 弹出框的挂载容器\n     * @en Mount container for popup\n     */\n    popupContainer: {\n      type: [String, Object] as PropType<string | HTMLElement>,\n    },\n    /**\n     * @zh 多选模式下，最多显示的标签数量。0 表示不限制\n     * @en In multi-select mode, the maximum number of labels displayed. 0 means unlimited\n     */\n    maxTagCount: {\n      type: Number,\n      default: 0,\n    },\n    /**\n     * @zh 格式化展示内容\n     * @en Format display content\n     */\n    formatLabel: {\n      type: Function as PropType<(options: CascaderOption[]) => string>,\n    },\n    /**\n     * @zh 下拉菜单的触发器属性\n     * @en Trigger props of the drop-down menu\n     * @type TriggerProps\n     */\n    triggerProps: {\n      type: Object as PropType<TriggerProps>,\n    },\n    /**\n     * @zh 是否开启严格选择模式\n     * @en Whether to enable strict selection mode\n     */\n    checkStrictly: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 数据懒加载函数，传入时开启懒加载功能\n     * @en Data lazy loading function, open the lazy loading function when it is passed in\n     * @version 2.13.0\n     */\n    loadMore: {\n      type: Function as PropType<\n        (\n          option: CascaderOption,\n          done: (children?: CascaderOption[]) => void\n        ) => void\n      >,\n    },\n    /**\n     * @zh 是否为加载中状态\n     * @en Whether it is loading state\n     * @version 2.15.0\n     */\n    loading: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 搜索下拉菜单中的选项是否仅展示标签\n     * @en Whether the options in the search dropdown show only label\n     * @version 2.18.0\n     */\n    searchOptionOnlyLabel: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 触发搜索事件的延迟时间\n     * @en Delay time to trigger search event\n     * @version 2.18.0\n     */\n    searchDelay: {\n      type: Number,\n      default: 500,\n    },\n    /**\n     * @zh 自定义 `CascaderOption` 中的字段\n     * @en Customize fields in `CascaderOption`\n     * @version 2.22.0\n     */\n    fieldNames: {\n      type: Object as PropType<CascaderFieldNames>,\n    },\n    /**\n     * @zh 用于确定选项键值的属性名\n     * @en Used to determine the option key value attribute name\n     * @version 2.29.0\n     */\n    valueKey: {\n      type: String,\n      default: 'value',\n    },\n    /**\n     * @zh 自定义不存在选项的值的展示\n     * @en Options that do not exist in custom values\n     * @version 2.29.0\n     */\n    fallback: {\n      type: [Boolean, Function] as PropType<\n        | boolean\n        | ((\n            value:\n              | string\n              | number\n              | Record<string, unknown>\n              | (string | number | Record<string, unknown>)[]\n          ) => string)\n      >,\n      default: true,\n    },\n    /**\n     * @zh 是否展开子菜单\n     * @en whether to expand the submenu\n     * @version 2.29.0\n     */\n    expandChild: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 传递虚拟列表属性，传入此参数以开启虚拟滚动 [VirtualListProps](#VirtualListProps)\n     * @en Pass the virtual list attribute, pass in this parameter to turn on virtual scrolling [VirtualListProps](#VirtualListProps)\n     * @type VirtualListProps\n     * @version 2.49.0\n     */\n    virtualListProps: {\n      type: Object as PropType<VirtualListProps>,\n    },\n    /**\n     * @zh 标签内容不换行\n     * @en Tag content does not wrap\n     * @version 2.56.1\n     */\n    tagNowrap: {\n      type: Boolean,\n      default: false,\n    },\n  },\n  emits: {\n    'update:modelValue': (\n      value:\n        | string\n        | number\n        | Record<string, any>\n        | (\n            | string\n            | number\n            | Record<string, any>\n            | (string | number | Record<string, any>)[]\n          )[]\n        | undefined\n    ) => true,\n    'update:popupVisible': (visible: boolean) => true,\n    /**\n     * @zh 选中值改变时触发\n     * @en Triggered when the selected value changes\n     * @property {string | number | (string | number | (string | number)[])[] | undefined} value\n     */\n    'change': (\n      value:\n        | string\n        | number\n        | Record<string, any>\n        | (\n            | string\n            | number\n            | Record<string, any>\n            | (string | number | Record<string, any>)[]\n          )[]\n        | undefined\n    ) => true,\n    /**\n     * @zh 输入值改变时触发\n     * @en Triggered when the input value changes\n     * @property {string} value\n     */\n    'inputValueChange': (value: string) => true,\n    /**\n     * @zh 点击清除按钮时触发\n     * @en Triggered when the clear button is clicked\n     */\n    'clear': () => true,\n    /**\n     * @zh 用户搜索时触发\n     * @en Triggered when the user searches\n     * @property {string} value\n     */\n    'search': (value: string) => true,\n    /**\n     * @zh 下拉框的显示状态改变时触发\n     * @en Triggered when the display state of the dropdown changes\n     * @property {boolean} visible\n     */\n    'popupVisibleChange': (visible: boolean) => true,\n    /**\n     * @zh 获得焦点时触发\n     * @en Triggered when focus\n     * @param {FocusEvent} ev\n     */\n    'focus': (ev: FocusEvent) => true,\n    /**\n     * @zh 失去焦点时触发\n     * @en Triggered when blur\n     * @param {FocusEvent} ev\n     */\n    'blur': (ev: FocusEvent) => true,\n  },\n  /**\n   * @zh 选择框的箭头图标\n   * @en Arrow icon for select box\n   * @slot arrow-icon\n   * @version 2.16.0\n   */\n  /**\n   * @zh 选择框的加载中图标\n   * @en Loading icon for select box\n   * @slot loading-icon\n   * @version 2.16.0\n   */\n  /**\n   * @zh 选择框的搜索图标\n   * @en Search icon for select box\n   * @slot search-icon\n   * @version 2.16.0\n   */\n  /**\n   * @zh 选项内容\n   * @en Display content of options\n   * @slot option\n   * @binding {CascaderOption} data\n   * @version 2.18.0\n   */\n  /**\n   * @zh 选择框的显示内容\n   * @en Display content of label\n   * @slot label\n   * @binding {CascaderOption} data\n   * @version 2.18.0\n   */\n  /**\n   * @zh 选项为空时的显示内容\n   * @en Display content when the option is empty\n   * @slot empty\n   * @version 2.23.0\n   */\n  /**\n   * @zh 前缀元素\n   * @en Prefix\n   * @slot prefix\n   * @version 2.23.0\n   */\n  setup(props, { emit, slots }) {\n    const {\n      options,\n      checkStrictly,\n      loadMore,\n      formatLabel,\n      modelValue,\n      disabled,\n      valueKey,\n      expandTrigger,\n      expandChild,\n      pathMode,\n      multiple,\n    } = toRefs(props);\n    const _value = ref(props.defaultValue);\n    const _inputValue = ref(props.defaultInputValue);\n    const _popupVisible = ref(props.defaultPopupVisible);\n\n    const { mergedDisabled, eventHandlers } = useFormItem({ disabled });\n\n    watch(modelValue, (value) => {\n      if (isUndefined(value) || isNull(value)) {\n        _value.value = props.multiple ? [] : undefined;\n      }\n    });\n\n    const optionInfos = ref<CascaderOptionInfo[]>([]);\n    const totalLevel = ref(1);\n\n    const optionMap = reactive(new Map<string, CascaderOptionInfo>());\n    const leafOptionMap = reactive(new Map<string, CascaderOptionInfo>());\n    const leafOptionValueMap = reactive(new Map<BaseType, string>());\n    const leafOptionSet = reactive(new Set<CascaderOptionInfo>());\n\n    const lazyLoadOptions = reactive<Record<string, CascaderOption[]>>({});\n\n    const addLazyLoadOptions = (children: CascaderOption[], key: string) => {\n      lazyLoadOptions[key] = children;\n    };\n\n    const DEFAULT_FIELD_NAMES = {\n      value: 'value',\n      label: 'label',\n      disabled: 'disabled',\n      children: 'children',\n      tagProps: 'tagProps',\n      render: 'render',\n      isLeaf: 'isLeaf',\n    };\n\n    const mergedFieldNames = computed(() => ({\n      ...DEFAULT_FIELD_NAMES,\n      ...props.fieldNames,\n    }));\n\n    watch(\n      [options, lazyLoadOptions, mergedFieldNames],\n      ([_options, _lazyLoadOptions, _fieldNames]) => {\n        optionMap.clear();\n        leafOptionMap.clear();\n        leafOptionValueMap.clear();\n        leafOptionSet.clear();\n\n        optionInfos.value = getOptionInfos(_options ?? [], {\n          enabledLazyLoad: Boolean(props.loadMore),\n          lazyLoadOptions,\n          optionMap,\n          leafOptionSet,\n          leafOptionMap,\n          leafOptionValueMap,\n          totalLevel,\n          checkStrictly,\n          valueKey,\n          fieldNames: _fieldNames,\n        });\n      },\n      {\n        immediate: true,\n        deep: true,\n      }\n    );\n\n    const computedValueMap = computed(() => {\n      const values = getValidValues(props.modelValue ?? _value.value, {\n        multiple: props.multiple,\n        pathMode: props.pathMode,\n      });\n      return new Map(\n        values.map((value) => [\n          getValueKey(value, {\n            valueKey: props.valueKey,\n            leafOptionValueMap,\n          }),\n          value,\n        ])\n      );\n    });\n\n    const computedInputValue = computed(\n      () => props.inputValue ?? _inputValue.value\n    );\n    const computedPopupVisible = computed(\n      () => props.popupVisible ?? _popupVisible.value\n    );\n\n    const getFilteredStatus = (label: string) => {\n      return label\n        ?.toLocaleLowerCase()\n        .includes(computedInputValue.value?.toLocaleLowerCase());\n    };\n\n    const filteredLeafOptions = computed(() => {\n      const options = props.checkStrictly\n        ? Array.from(optionMap.values())\n        : Array.from(leafOptionSet);\n\n      return options.filter((item) => {\n        if (isFunction(props.filterOption)) {\n          return props.filterOption(computedInputValue.value, item.raw);\n        }\n\n        if (props.checkStrictly) {\n          return getFilteredStatus(item.label);\n        }\n\n        return item.path?.find((leaf) => getFilteredStatus(leaf.label));\n      });\n    });\n\n    const updateValue = (values: UnionType[] | UnionType[][]) => {\n      const value = props.multiple ? values : values[0] ?? '';\n      if (values.length === 0) {\n        setSelectedPath();\n        setActiveKey();\n      }\n\n      _value.value = value;\n      emit('update:modelValue', value);\n      emit('change', value);\n      eventHandlers.value?.onChange?.();\n    };\n\n    watch([multiple, pathMode], () => {\n      const values: any[] = [];\n      computedValueMap.value.forEach((value, key) => {\n        const option = leafOptionMap.get(key);\n        if (option) {\n          values.push(pathMode.value ? option.pathValue : option.value);\n        }\n      });\n      updateValue(values);\n    });\n\n    const handlePopupVisibleChange = (visible: boolean): void => {\n      if (computedPopupVisible.value !== visible) {\n        _popupVisible.value = visible;\n        emit('popupVisibleChange', visible);\n      }\n    };\n\n    const handleRemove = (key: string) => {\n      if (props.multiple) {\n        const option = leafOptionMap.get(key);\n        if (option) {\n          selectMultiple(option, false);\n        } else {\n          const values: any[] = [];\n          computedValueMap.value.forEach((value, _key) => {\n            if (_key !== key) {\n              values.push(value);\n            }\n          });\n          updateValue(values);\n        }\n      }\n    };\n\n    const selectSingle = (option: CascaderOptionInfo) => {\n      updateValue([props.pathMode ? option.pathValue : option.value]);\n      handlePopupVisibleChange(false);\n    };\n\n    const selectMultiple = (option: CascaderOptionInfo, checked: boolean) => {\n      if (checked) {\n        const leafOptionInfos = props.checkStrictly\n          ? [option]\n          : getLeafOptionInfos(option);\n\n        updateValue([\n          ...computedValueMap.value.values(),\n          ...leafOptionInfos\n            .filter((item) => !computedValueMap.value.has(item.key))\n            .map((item) => {\n              return props.pathMode ? item.pathValue : item.value;\n            }),\n        ]);\n      } else {\n        const leafOptionKeys = props.checkStrictly\n          ? [option.key]\n          : getLeafOptionKeys(option);\n        const values: any[] = [];\n        computedValueMap.value.forEach((value, key) => {\n          if (!leafOptionKeys.includes(key)) {\n            values.push(value);\n          }\n        });\n        updateValue(values);\n      }\n\n      handleInputValueChange('', 'optionChecked');\n    };\n\n    const handleClickOption = (\n      option: CascaderOptionInfo,\n      checked?: boolean\n    ) => {\n      if (props.multiple) {\n        selectMultiple(option, checked ?? true);\n      } else {\n        selectSingle(option);\n      }\n    };\n\n    const handleSearch = debounce((value: string) => {\n      emit('search', value);\n    }, props.searchDelay);\n\n    const handleInputValueChange = (value: string, reason: string): void => {\n      if (value !== computedInputValue.value) {\n        if (reason === 'manual' && !computedPopupVisible.value) {\n          _popupVisible.value = true;\n          emit('popupVisibleChange', true);\n        }\n\n        _inputValue.value = value;\n        emit('inputValueChange', value);\n\n        if (props.allowSearch) {\n          handleSearch(value);\n        }\n      }\n    };\n\n    watch(computedPopupVisible, (value) => {\n      if (value) {\n        if (computedValueMap.value.size > 0) {\n          const keys = Array.from(computedValueMap.value.keys());\n          const lastKey = keys[keys.length - 1];\n          const option = leafOptionMap.get(lastKey);\n          if (option && option.key !== activeKey.value) {\n            setSelectedPath(option.key);\n            setActiveKey(option.key);\n          }\n        }\n      } else {\n        if (computedValueMap.value.size === 0) {\n          setSelectedPath();\n          setActiveKey();\n        }\n        handleInputValueChange('', 'optionListHide');\n      }\n    });\n\n    const handleClear = (e: MouseEvent) => {\n      e.stopPropagation();\n      if (props.multiple) {\n        // 保留已经被选中但被disabled的选项值\n        const newValues: any[] = [];\n        computedValueMap.value.forEach((value, key) => {\n          const option = leafOptionMap.get(key);\n          if (option?.disabled) {\n            newValues.push(props.pathMode ? option.pathValue : option.value);\n          }\n        });\n        updateValue(newValues);\n      } else {\n        updateValue([]);\n      }\n      handleInputValueChange('', 'manual');\n      emit('clear');\n    };\n\n    const showSearchPanel = computed(\n      () => props.allowSearch && computedInputValue.value.length > 0\n    );\n\n    const handleFocus = (e: FocusEvent) => {\n      emit('focus', e);\n    };\n    const handleBlur = (e: FocusEvent) => {\n      emit('blur', e);\n    };\n\n    const {\n      activeKey,\n      activeOption,\n      selectedPath,\n      displayColumns,\n      setActiveKey,\n      setSelectedPath,\n      getNextActiveNode,\n    } = useSelectedPath(optionInfos, {\n      optionMap,\n      filteredLeafOptions,\n      showSearchPanel,\n      expandChild,\n    });\n\n    provide(\n      cascaderInjectionKey,\n      reactive({\n        onClickOption: handleClickOption,\n        setActiveKey,\n        setSelectedPath,\n        loadMore,\n        expandTrigger,\n        addLazyLoadOptions,\n        formatLabel,\n        slots,\n        valueMap: computedValueMap,\n      })\n    );\n\n    const handleKeyDown = getKeyDownHandler(\n      new Map([\n        [\n          KEYBOARD_KEY.ENTER,\n          (ev: Event) => {\n            if (computedPopupVisible.value) {\n              if (activeOption.value) {\n                let checked: boolean;\n                if (props.checkStrictly || activeOption.value.isLeaf) {\n                  checked = !computedValueMap.value.has(activeOption.value.key);\n                } else {\n                  checked = !getCheckedStatus(\n                    activeOption.value,\n                    computedValueMap.value\n                  ).checked;\n                }\n                setSelectedPath(activeOption.value.key);\n                handleClickOption(activeOption.value, checked);\n              }\n            } else {\n              handlePopupVisibleChange(true);\n            }\n          },\n        ],\n        [\n          KEYBOARD_KEY.ESC,\n          (ev: Event) => {\n            handlePopupVisibleChange(false);\n          },\n        ],\n        [\n          KEYBOARD_KEY.ARROW_DOWN,\n          (ev: Event) => {\n            ev.preventDefault();\n            const activeNode = getNextActiveNode('next');\n            setActiveKey(activeNode?.key);\n          },\n        ],\n        [\n          KEYBOARD_KEY.ARROW_UP,\n          (ev: Event) => {\n            ev.preventDefault();\n            const activeNode = getNextActiveNode('preview');\n            setActiveKey(activeNode?.key);\n          },\n        ],\n        [\n          KEYBOARD_KEY.ARROW_RIGHT,\n          (ev: Event) => {\n            if (!showSearchPanel.value) {\n              ev.preventDefault();\n              if (activeOption.value?.children) {\n                setSelectedPath(activeOption.value.key);\n                setActiveKey(activeOption.value.children[0]?.key);\n              }\n            }\n          },\n        ],\n        [\n          KEYBOARD_KEY.ARROW_LEFT,\n          (ev: Event) => {\n            if (!showSearchPanel.value) {\n              ev.preventDefault();\n              if (activeOption.value?.parent) {\n                setSelectedPath(activeOption.value.parent.key);\n                setActiveKey(activeOption.value.parent.key);\n              }\n            }\n          },\n        ],\n      ])\n    );\n\n    const selectViewValue = computed(() => {\n      const result: any[] = [];\n      computedValueMap.value.forEach((value, key) => {\n        const option = leafOptionMap.get(key);\n        if (option) {\n          result.push({\n            value: key,\n            label:\n              props.formatLabel?.(option.path.map((item) => item.raw)) ??\n              getOptionLabel(option),\n            closable: !option.disabled,\n            tagProps: option.tagProps,\n          });\n        } else if (props.fallback) {\n          const label = isFunction(props.fallback)\n            ? props.fallback(value)\n            : isArray(value)\n            ? value.join(' / ')\n            : String(value);\n          result.push({\n            value: key,\n            label,\n            closable: true,\n          });\n        }\n      });\n      return result;\n    });\n\n    return {\n      optionInfos,\n      filteredLeafOptions,\n      selectedPath,\n      activeKey,\n      displayColumns,\n      computedInputValue,\n      computedPopupVisible,\n      handleClear,\n      selectViewValue,\n      handleInputValueChange,\n      showSearchPanel,\n      handlePopupVisibleChange,\n      handleFocus,\n      handleBlur,\n      handleRemove,\n      mergedDisabled,\n      handleKeyDown,\n      totalLevel,\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/cascader/context.ts",
    "content": "import { InjectionKey, Slots } from 'vue';\nimport { CascaderOption, CascaderOptionInfo } from './interface';\nimport { UnionType } from '../_utils/types';\n\nexport interface CascaderContext {\n  onClickOption: (option: CascaderOptionInfo, checked?: boolean) => void;\n  setActiveKey: (key?: string) => void;\n  setSelectedPath: (key?: string) => void;\n  loadMore: (\n    option: CascaderOption,\n    done: (children?: CascaderOption[]) => void\n  ) => void;\n  addLazyLoadOptions: (children: CascaderOption[], key: string) => void;\n  formatLabel: (options: CascaderOption[]) => string;\n  slots: Slots;\n  valueMap: Map<string, UnionType | UnionType[]>;\n  expandTrigger: 'click' | 'hover';\n}\n\nexport const cascaderInjectionKey: InjectionKey<CascaderContext> =\n  Symbol('ArcoCascader');\n"
  },
  {
    "path": "packages/web-vue/components/cascader/hooks/use-selected-path.ts",
    "content": "import { computed, ComputedRef, Ref, ref } from 'vue';\nimport { CascaderOptionInfo } from '../interface';\n\nexport const useSelectedPath = (\n  options: Ref<CascaderOptionInfo[]>,\n  {\n    optionMap,\n    filteredLeafOptions,\n    showSearchPanel,\n    expandChild,\n  }: {\n    optionMap: Map<string, CascaderOptionInfo>;\n    filteredLeafOptions: ComputedRef<CascaderOptionInfo[]>;\n    showSearchPanel?: ComputedRef<boolean>;\n    expandChild: Ref<boolean>;\n  }\n) => {\n  // active node key\n  const activeKey = ref<string>();\n  const activeOption = computed(() => {\n    if (activeKey.value) return optionMap.get(activeKey.value);\n    return undefined;\n  });\n\n  // selected nodes key\n  const selectedPath = ref<string[]>([]);\n\n  const displayColumns = computed(() => {\n    const columns: CascaderOptionInfo[][] = [options.value];\n    for (const key of selectedPath.value) {\n      const option = optionMap.get(key);\n      if (option?.children) {\n        columns.push(option.children);\n      }\n    }\n    return columns;\n  });\n\n  const setSelectedPath = (key?: string) => {\n    const option = getTargetOption(key);\n    selectedPath.value = option?.path.map((item) => item.key) ?? [];\n  };\n\n  const setActiveKey = (key?: string) => {\n    activeKey.value = key;\n  };\n\n  const enabledOptions = computed(() => {\n    if (showSearchPanel?.value) {\n      return filteredLeafOptions.value.filter((item) => !item.disabled);\n    }\n    if (activeOption.value && activeOption.value.parent) {\n      return activeOption.value.parent.children?.filter(\n        (item) => !item.disabled\n      );\n    }\n    return options.value.filter((item) => !item.disabled);\n  });\n\n  const getTargetOption = (key?: string) => {\n    let target = key ? optionMap.get(key) : undefined;\n    if (expandChild.value) {\n      while (target && target.children && target.children.length > 0) {\n        // eslint-disable-next-line prefer-destructuring\n        target = target.children[0];\n      }\n    }\n    return target;\n  };\n\n  const getNextActiveNode = (direction: 'next' | 'preview') => {\n    const _length = enabledOptions.value?.length ?? 0;\n\n    if (activeKey.value) {\n      const enabledIndex =\n        enabledOptions.value?.findIndex(\n          (item) => item.key === activeKey.value\n        ) ?? 0;\n      if (direction === 'next') {\n        return enabledOptions.value?.[(_length + enabledIndex + 1) % _length];\n      }\n      return enabledOptions.value?.[(_length + enabledIndex - 1) % _length];\n    }\n\n    return enabledOptions.value?.[0];\n  };\n\n  return {\n    activeKey,\n    activeOption,\n    selectedPath,\n    displayColumns,\n    setActiveKey,\n    setSelectedPath,\n    getNextActiveNode,\n  };\n};\n"
  },
  {
    "path": "packages/web-vue/components/cascader/index.ts",
    "content": "import type { App } from 'vue';\nimport type { ArcoOptions } from '../_utils/types';\nimport { setGlobalConfig, getComponentPrefix } from '../_utils/global-config';\nimport _Cascader from './cascader.vue';\nimport _CascaderPanel from './cascader-panel.vue';\n\nconst Cascader = Object.assign(_Cascader, {\n  CascaderPanel: _CascaderPanel,\n  install: (app: App, options?: ArcoOptions) => {\n    setGlobalConfig(app, options);\n    const componentPrefix = getComponentPrefix(options);\n\n    app.component(componentPrefix + _Cascader.name, _Cascader);\n    app.component(componentPrefix + _CascaderPanel.name, _CascaderPanel);\n  },\n});\n\nexport type CascaderInstance = InstanceType<typeof _Cascader>;\nexport type CascaderPanelInstance = InstanceType<typeof _CascaderPanel>;\nexport type { CascaderOption, CascaderFieldNames } from './interface';\n\nexport { _CascaderPanel as CascaderPanel };\nexport default Cascader;\n"
  },
  {
    "path": "packages/web-vue/components/cascader/interface.ts",
    "content": "import { RenderFunction } from 'vue';\nimport { TagProps } from '../tag';\nimport { BaseType, FieldString } from '../_utils/types';\n\nexport type CascaderBaseValue =\n  | BaseType\n  | Record<string, any>\n  | (BaseType | Record<string, any>)[];\n\nexport interface CascaderOption {\n  /**\n   * @zh 选项值，2.29.0 版本支持对象\n   * @en Option value, version 2.29.0 supports objects\n   */\n  value?: string | number | Record<string, any>;\n  /**\n   * @zh 选项文本\n   * @en Option text\n   */\n  label?: string;\n  /**\n   * @zh 自定义渲染\n   * @en Custom render\n   */\n  render?: RenderFunction;\n  /**\n   * @zh 是否禁用\n   * @en Whether to disable\n   */\n  disabled?: boolean;\n  /**\n   * @zh 展示的标签属性\n   * @en Displayed tag attributes\n   * @version 2.8.0\n   */\n  tagProps?: TagProps;\n  /**\n   * @zh 下一级选项\n   * @en Next level options\n   */\n  children?: CascaderOption[];\n  /**\n   * @zh 是否是叶子节点\n   * @en Whether it is a leaf node\n   */\n  isLeaf?: boolean;\n\n  [other: string]: any;\n}\n\nexport type CascaderFieldNames = FieldString<CascaderOption>;\n\nexport interface CascaderOptionWithTotal extends CascaderOption {\n  children?: CascaderOptionWithTotal[];\n  totalLeafOptions?: number;\n}\n\nexport interface CascaderNode extends CascaderOption {\n  parent?: CascaderNode;\n  checked?: boolean;\n  indeterminate?: boolean;\n  level: number;\n  index: number;\n  path: CascaderNode[];\n  children?: CascaderNode[];\n  checkedValues?: Set<string>;\n  nodes: CascaderNode[];\n  enabledNodes: CascaderNode[];\n  raw: CascaderOption;\n}\n\nexport interface CascaderOptionInfo extends CascaderOptionWithTotal {\n  raw: Record<string, unknown>;\n  key: string;\n  valueKey: string;\n  level: number;\n  index: number;\n  value: string | number;\n  label: string;\n  disabled: boolean;\n  selectionDisabled: boolean;\n  isLeaf: boolean;\n  parent?: CascaderOptionInfo;\n  children?: CascaderOptionInfo[];\n  path: CascaderOptionInfo[];\n  pathValue: any[];\n}\n"
  },
  {
    "path": "packages/web-vue/components/cascader/style/index.less",
    "content": "@import '../../select/style/index.less';\n@import './token.less';\n\n@cascader-prefix-cls: ~'@{prefix}-cascader';\n\n//.select-view(@cascader-prefix-cls);\n\n.@{cascader-prefix-cls} {\n  &-panel {\n    display: inline-flex;\n    box-sizing: border-box;\n    height: @select-popup-max-height;\n    overflow: hidden;\n    white-space: nowrap;\n    list-style: none;\n    background-color: var(~'@{arco-cssvars-prefix}-color-bg-popup');\n    border: 1px solid @select-popup-color-border;\n    border-radius: @select-popup-border-radius;\n    box-shadow: @select-popup-box-shadow;\n  }\n\n  &-search-panel {\n    justify-content: flex-start;\n    width: 100%;\n    overflow: auto;\n  }\n\n  &-popup-trigger-hover {\n    .@{cascader-prefix-cls}-list-item {\n      transition: fontweight 0s;\n    }\n  }\n\n  &-highlight {\n    font-weight: @font-weight-500;\n  }\n\n  &-panel-column {\n    position: relative;\n    display: inline-flex;\n    flex-direction: column;\n    min-width: 120px;\n    height: 100%;\n    max-height: 200px;\n    background-color: var(~'@{arco-cssvars-prefix}-color-bg-popup');\n\n    &-loading {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n    }\n\n    &:not(:last-of-type) {\n      border-right: 1px solid @select-popup-color-border;\n    }\n  }\n\n  &-column-content {\n    flex: 1;\n    max-height: 200px;\n    overflow-y: auto;\n  }\n\n  &-list-wrapper {\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    box-sizing: border-box;\n    height: 100%;\n    padding: @select-popup-padding-vertical 0;\n\n    &-with-footer {\n      padding-bottom: 0;\n    }\n  }\n\n  &-list-empty {\n    display: flex;\n    align-items: center;\n    width: 100%;\n    height: 100%;\n  }\n\n  &-list {\n    flex: 1;\n    box-sizing: border-box;\n    margin: 0;\n    padding: 0;\n    list-style: none;\n\n    &-multiple,\n    &-strictly {\n      .@{cascader-prefix-cls}-option-label {\n        padding-left: 0;\n      }\n\n      .@{cascader-prefix-cls}-option {\n        padding-left: @cascader-padding-item-left;\n\n        .@{prefix}-checkbox,\n        .@{prefix}-radio {\n          margin-right: @cascader-margin-checkbox-right;\n          padding-left: 0;\n        }\n      }\n    }\n  }\n\n  &-search-list&-list-multiple {\n    .@{cascader-prefix-cls}-option-label {\n      padding-right: @cascader-padding-item-left;\n    }\n  }\n\n  &-list-footer {\n    box-sizing: border-box;\n    height: @cascader-size-item-height;\n    padding-left: @cascader-padding-item-left;\n    line-height: @cascader-size-item-height;\n    border-top: 1px solid @select-popup-color-border;\n  }\n\n  &-option,\n  &-search-option {\n    position: relative;\n    display: flex;\n    box-sizing: border-box;\n    min-width: 100px;\n    height: @cascader-size-item-height;\n    color: @cascader-color-item-text;\n    font-size: @cascader-font-item-size;\n    line-height: @cascader-size-item-height;\n    background-color: transparent;\n    cursor: pointer;\n\n    &-label {\n      flex-grow: 1;\n      padding-right: @cascader-padding-item-right + @cascader-size-item-icon +\n        @cascader-margin-item-icon-left;\n      padding-left: @cascader-padding-item-left;\n    }\n\n    .@{prefix}-icon-right,\n    .@{prefix}-icon-check {\n      position: absolute;\n      top: 50%;\n      right: @cascader-padding-item-right;\n      color: @cascader-color-item-icon;\n      font-size: @cascader-size-item-icon;\n      transform: translateY(-50%);\n    }\n\n    .@{prefix}-icon-check {\n      color: @color-primary-6;\n    }\n\n    .@{prefix}-icon-loading {\n      position: absolute;\n      top: 50%;\n      right: @cascader-padding-item-right;\n      margin-top: -(@cascader-size-item-icon / 2);\n      color: @color-primary-6;\n      font-size: @cascader-size-item-icon;\n    }\n  }\n\n  &-option:hover,\n  &-search-option-hover {\n    color: @cascader-color-item-text_hover;\n    background-color: @cascader-color-item-bg_hover;\n\n    .@{prefix}-checkbox:not(.@{prefix}-checkbox-disabled):not(.@{prefix}-checkbox-checked):hover\n      .@{prefix}-checkbox-icon-hover::before {\n      background-color: @cascader-color-checkbox-bg_hover;\n    }\n\n    .@{prefix}-radio:not(.@{prefix}-radio-disabled):not(.@{prefix}-radio-checked):hover\n      .@{prefix}-radio-icon-hover::before {\n      background-color: @cascader-color-checkbox-bg_hover;\n    }\n  }\n\n  &-option,\n  &-search-option {\n    &-disabled,\n    &-disabled:hover {\n      color: @cascader-color-item-text_disabled;\n      background-color: @cascader-color-item-bg_disabled;\n      cursor: not-allowed;\n\n      .@{prefix}-icon-right {\n        color: inherit;\n      }\n\n      .@{prefix}-icon-check {\n        color: var(~'@{arco-cssvars-prefix}-color-primary-light-3');\n      }\n    }\n  }\n\n  &-option {\n    &-active {\n      color: @cascader-color-item-text_active;\n      background-color: @cascader-color-item-bg_active;\n      transition: all @transition-duration-2 @transition-timing-function-linear;\n\n      &:hover {\n        color: @cascader-color-item-text_active;\n        background-color: @cascader-color-item-bg_active;\n      }\n    }\n\n    &-active&-disabled,\n    &-active&-disabled:hover {\n      color: @cascader-color-item-text_disabled_active;\n      background-color: @cascader-color-item-bg_disabled_active;\n    }\n  }\n}\n\n.cascader-slide-enter-active,\n.cascader-slide-leave-active {\n  transition: margin @transition-duration-3 @transition-timing-function-standard;\n}\n\n.cascader-slide-enter-from,\n.cascader-slide-leave-to {\n  margin-left: -120px;\n}\n\n.cascader-slide-enter-to,\n.cascader-slide-leave-from {\n  margin-left: 0;\n}\n"
  },
  {
    "path": "packages/web-vue/components/cascader/style/index.ts",
    "content": "import '../../style/index.less';\nimport '../../_components/select-view/style';\nimport '../../trigger/style';\nimport '../../empty/style';\nimport '../../checkbox/style';\nimport '../../radio/style';\nimport '../../scrollbar/style';\nimport './index.less';\n"
  },
  {
    "path": "packages/web-vue/components/cascader/style/token.less",
    "content": "@import '../../style/theme/index.less';\n\n@cascader-size-item-height: @size-9;\n@cascader-font-item-size: @font-size-body-3;\n@cascader-margin-item-icon-left: @spacing-6;\n\n@cascader-color-item-text: var(~'@{arco-cssvars-prefix}-color-text-1');\n@cascader-color-item-icon: var(~'@{arco-cssvars-prefix}-color-text-2');\n@cascader-padding-item-left: @spacing-6;\n@cascader-padding-item-right: @spacing-5;\n@cascader-size-item-icon: @size-3;\n\n@cascader-color-item-text_hover: @cascader-color-item-text;\n@cascader-color-item-text_active: @cascader-color-item-text;\n@cascader-color-item-text_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');\n@cascader-color-item-text_disabled_active: var(~'@{arco-cssvars-prefix}-color-text-4');\n\n@cascader-font-item-weight_active: @font-weight-500;\n@cascader-color-item-bg_active: var(~'@{arco-cssvars-prefix}-color-fill-2');\n@cascader-color-item-bg_hover: @cascader-color-item-bg_active;\n@cascader-color-item-bg_disabled: @color-transparent;\n@cascader-color-item-bg_disabled_active: var(~'@{arco-cssvars-prefix}-color-fill-2');\n@cascader-color-checkbox-bg_hover: var(~'@{arco-cssvars-prefix}-color-fill-3');\n@cascader-margin-checkbox-right: @spacing-4;\n"
  },
  {
    "path": "packages/web-vue/components/cascader/utils.ts",
    "content": "import { Ref } from 'vue';\nimport {\n  CascaderOption,\n  CascaderOptionInfo,\n  CascaderFieldNames,\n} from './interface';\nimport {\n  isArray,\n  isNull,\n  isNumber,\n  isObject,\n  isString,\n  isUndefined,\n} from '../_utils/is';\nimport { BaseType, UnionType } from '../_utils/types';\n\nexport const getOptionInfos = (\n  options: CascaderOption[],\n  {\n    optionMap,\n    leafOptionMap,\n    leafOptionSet,\n    leafOptionValueMap,\n    totalLevel: innerLevel,\n    checkStrictly,\n    enabledLazyLoad,\n    lazyLoadOptions,\n    valueKey,\n    fieldNames,\n  }: {\n    optionMap: Map<string, CascaderOptionInfo>;\n    leafOptionMap: Map<string, CascaderOptionInfo>;\n    leafOptionSet: Set<CascaderOptionInfo>;\n    leafOptionValueMap: Map<BaseType, string>;\n    totalLevel: Ref<number>;\n    checkStrictly: Ref<boolean>;\n    enabledLazyLoad: boolean;\n    lazyLoadOptions: Record<string, CascaderOption[]>;\n    valueKey: Ref<string>;\n    fieldNames: Required<CascaderFieldNames>;\n  }\n) => {\n  let totalLevel = 0;\n\n  const travelOptions = (\n    options: CascaderOption[],\n    parent?: CascaderOptionInfo,\n    level?: number\n  ) => {\n    const parentPath = parent?.path ?? [];\n    totalLevel = Math.max(totalLevel, level ?? 1);\n\n    return options.map((item, index) => {\n      const value = item[fieldNames.value];\n      const data: CascaderOptionInfo = {\n        raw: item,\n        // raw\n        value,\n        label: item[fieldNames.label] ?? String(value),\n        disabled: Boolean(item[fieldNames.disabled]),\n        selectionDisabled: false,\n        render: item[fieldNames.render],\n        tagProps: item[fieldNames.tagProps],\n        isLeaf: item[fieldNames.isLeaf],\n        // other\n        level: parentPath.length,\n        index,\n        key: '',\n        valueKey: String(isObject(value) ? value[valueKey.value] : value),\n        parent,\n        path: [],\n        pathValue: [],\n      };\n      const path = parentPath.concat(data);\n      const pathValue: UnionType[] = [];\n      const key = path\n        .map((item) => {\n          pathValue.push(item.value);\n          return item.valueKey;\n        })\n        .join('-');\n      data.path = path;\n      data.pathValue = pathValue;\n      data.key = key;\n\n      if (item[fieldNames.children]) {\n        data.isLeaf = false;\n        data.children = travelOptions(\n          item[fieldNames.children],\n          data,\n          (level ?? 1) + 1\n        );\n      } else if (enabledLazyLoad && !data.isLeaf) {\n        data.isLeaf = false;\n        if (lazyLoadOptions[key]) {\n          data.children = travelOptions(\n            lazyLoadOptions[key],\n            data,\n            (level ?? 1) + 1\n          );\n        }\n      } else {\n        data.isLeaf = true;\n      }\n\n      if (data.children && !data.disabled) {\n        data.totalLeafOptions = data.children.reduce((pre, item) => {\n          if (isNumber(item.totalLeafOptions)) {\n            return pre + item.totalLeafOptions;\n          }\n\n          if (item.disabled || item.selectionDisabled) {\n            return pre;\n          }\n\n          return pre + (item.isLeaf ? 1 : 0);\n        }, 0);\n\n        if (data.totalLeafOptions === 0 && !checkStrictly.value) {\n          data.selectionDisabled = true;\n        }\n      }\n\n      optionMap.set(data.key, data);\n      if (data.isLeaf || checkStrictly.value) {\n        leafOptionSet.add(data);\n        leafOptionMap.set(data.key, data);\n        if (!leafOptionValueMap.has(data.valueKey)) {\n          leafOptionValueMap.set(data.valueKey, data.key);\n        }\n      }\n\n      return data;\n    });\n  };\n\n  const result = travelOptions(options);\n  innerLevel.value = totalLevel;\n  return result;\n};\n\nexport const getCheckedStatus = (\n  option: CascaderOptionInfo,\n  valueMap?: Map<string, unknown>\n) => {\n  let checked = false;\n  let indeterminate = false;\n\n  if (option.isLeaf) {\n    if (valueMap?.has(option.key)) {\n      checked = true;\n    }\n  } else {\n    const reg = new RegExp(`^${option.key}(-|$)`);\n    const checkedLeafOptionNumber = Array.from(valueMap?.keys() ?? []).reduce(\n      (pre, key) => {\n        if (reg.test(key)) {\n          return pre + 1;\n        }\n        return pre;\n      },\n      0\n    );\n    if (\n      checkedLeafOptionNumber > 0 &&\n      checkedLeafOptionNumber >= (option.totalLeafOptions ?? 1)\n    ) {\n      checked = true;\n    } else if (checkedLeafOptionNumber > 0) {\n      indeterminate = true;\n    }\n  }\n\n  return {\n    checked,\n    indeterminate,\n  };\n};\n\nexport const getLeafOptionKeys = (option: CascaderOptionInfo) => {\n  const keys: string[] = [];\n  if (option.isLeaf) {\n    keys.push(option.key);\n  } else if (option.children) {\n    for (const item of option.children) {\n      keys.push(...getLeafOptionKeys(item));\n    }\n  }\n  return keys;\n};\n\nexport const getLeafOptionInfos = (option: CascaderOptionInfo) => {\n  const infos: CascaderOptionInfo[] = [];\n  if (option.disabled || option.selectionDisabled) {\n    return infos;\n  }\n\n  if (option.isLeaf) {\n    infos.push(option);\n  } else if (option.children) {\n    for (const item of option.children) {\n      infos.push(...getLeafOptionInfos(item));\n    }\n  }\n  return infos;\n};\n\nexport const getValueKey = (\n  value: UnionType | UnionType[],\n  {\n    valueKey,\n    leafOptionValueMap,\n  }: { valueKey: string; leafOptionValueMap: Map<BaseType, string> }\n): string => {\n  if (isArray(value)) {\n    return value\n      .map((item) => {\n        if (isObject(item)) return item[valueKey];\n        return item;\n      })\n      .join('-');\n  }\n  const _value = isObject(value) ? value[valueKey] : value;\n  return leafOptionValueMap.get(String(_value)) ?? String(_value);\n};\n\nexport const getValidValues = (\n  value: UnionType | UnionType[] | UnionType[][] | undefined,\n  { multiple, pathMode }: { multiple: boolean; pathMode: boolean }\n): UnionType[] | UnionType[][] => {\n  if (!isArray(value)) {\n    return isUndefined(value) || isNull(value) || value === '' ? [] : [value];\n  }\n  if (pathMode && !multiple && value.length > 0 && !isArray(value[0])) {\n    return [value];\n  }\n  return value;\n};\n\nexport const getKeysFromValue = (\n  value:\n    | string\n    | number\n    | Array<string | number>\n    | undefined\n    | (string | number | Array<string | number>)[],\n  {\n    pathMode,\n    leafOptionMap,\n    leafOptionValueMap,\n  }: {\n    pathMode: boolean;\n    leafOptionMap: Map<string | number, CascaderOptionInfo>;\n    leafOptionValueMap: Map<string | number, CascaderOptionInfo>;\n  }\n) => {\n  const keys: string[] = [];\n  if (!pathMode) {\n    if (isArray(value)) {\n      value.forEach((item) => {\n        if (isString(item) || isNumber(item)) {\n          const option = leafOptionValueMap.get(item);\n          if (option) {\n            keys.push(option.key);\n          }\n        }\n      });\n    } else if (isString(value) || isNumber(value)) {\n      const option = leafOptionValueMap.get(value);\n      if (option) {\n        keys.push(option.key);\n      }\n    }\n  } else if (isArray(value) && value.length > 0) {\n    // TODO: 更好的写法？\n    if (isString(value[0]) || isNumber(value[0])) {\n      const key = value.join('-');\n      if (leafOptionMap.has(key)) {\n        keys.push(key);\n      }\n    } else {\n      value.forEach((item) => {\n        if (isArray(item)) {\n          const key = item.join('-');\n          if (leafOptionMap.has(key)) {\n            keys.push(key);\n          }\n        }\n      });\n    }\n  }\n  return keys;\n};\n\nexport const getOptionLabel = (option: CascaderOptionInfo) => {\n  return option.path.map((item) => item.label).join(' / ');\n};\n"
  },
  {
    "path": "packages/web-vue/components/checkbox/CHANGELOG.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.45.3\n\n`2023-04-28`\n\n### 🆎 TypeScript\n\n- Fix the ts error problem when the `value` attribute uses a boolean value ([#2373](https://github.com/arco-design/arco-design-vue/pull/2373))\n\n\n## 2.43.2\n\n`2023-02-24`\n\n### 🐛 BugFix\n\n- Fixed checkbox retaining hover style when deselected ([#2124](https://github.com/arco-design/arco-design-vue/pull/2124))\n\n\n## 2.41.1\n\n`2023-01-06`\n\n### 🆎 TypeScript\n\n- Fix missing type for `value` values ([#2029](https://github.com/arco-design/arco-design-vue/pull/2029))\n\n\n## 2.41.0\n\n`2022-12-30`\n\n### 🐛 BugFix\n\n- Set to empty array if `modevalue` is not an array ([#1940](https://github.com/arco-design/arco-design-vue/pull/1940))\n\n\n## 2.38.0\n\n`2022-10-28`\n\n### 🐛 BugFix\n\n- Fix the problem that the state is not cleared when clearing model-value ([#1794](https://github.com/arco-design/arco-design-vue/pull/1794))\n\n\n## 2.36.0\n\n`2022-09-02`\n\n### 🆕 Feature\n\n- Add max prop, support setting the maximum number of items that can be checked ([#1540](https://github.com/arco-design/arco-design-vue/pull/1540))\n\n\n## 2.27.0\n\n`2022-05-13`\n\n### 🆕 Feature\n\n- `checkbox-group` adds `checkbox` slot ([#1087](https://github.com/arco-design/arco-design-vue/pull/1087))\n- `checkbox-group` supports `options` attribute to configure child elements ([#1058](https://github.com/arco-design/arco-design-vue/pull/1058))\n\n\n## 2.25.1\n\n`2022-04-27`\n\n### 💅 Style\n\n- Fixed the issue that the hover style would still change in the disabled state ([#1040](https://github.com/arco-design/arco-design-vue/pull/1040))\n\n\n## 2.18.0\n\n`2022-03-04`\n\n### 🆕 Feature\n\n- Add checkbox slot, you can customize the checkbox ([#769](https://github.com/arco-design/arco-design-vue/pull/769))\n\n\n## 2.18.0-beta.1\n\n`2022-02-18`\n\n### ⚠️ Important Attention\n\n- Outer wrapping DOM changed from span to label ([#697](https://github.com/arco-design/arco-design-vue/pull/697))\n\n"
  },
  {
    "path": "packages/web-vue/components/checkbox/CHANGELOG.zh-CN.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.45.3\n\n`2023-04-28`\n\n### 🆎 类型修正\n\n- 修复 `value` 属性使用 boolean 值出现 ts 错误的问题 ([#2373](https://github.com/arco-design/arco-design-vue/pull/2373))\n\n\n## 2.43.2\n\n`2023-02-24`\n\n### 🐛 问题修复\n\n- 修复复选框在取消选择时会保留悬停样式的问题 ([#2124](https://github.com/arco-design/arco-design-vue/pull/2124))\n\n\n## 2.41.1\n\n`2023-01-06`\n\n### 🆎 类型修正\n\n- 修复 `value` 值缺少类型的问题 ([#2029](https://github.com/arco-design/arco-design-vue/pull/2029))\n\n\n## 2.41.0\n\n`2022-12-30`\n\n### 🐛 问题修复\n\n- `modevalue` 不是数组时设置为空数组 ([#1940](https://github.com/arco-design/arco-design-vue/pull/1940))\n\n\n## 2.38.0\n\n`2022-10-28`\n\n### 🐛 问题修复\n\n- 修复清除 model-value 时状态未清除的问题 ([#1794](https://github.com/arco-design/arco-design-vue/pull/1794))\n\n\n## 2.36.0\n\n`2022-09-02`\n\n### 🆕 新增功能\n\n- 新增 max 属性，支持设置最多可被勾选的项目数 ([#1540](https://github.com/arco-design/arco-design-vue/pull/1540))\n\n\n## 2.27.0\n\n`2022-05-13`\n\n### 🆕 新增功能\n\n- `checkbox-group` 增加 `checkbox` 插槽 ([#1087](https://github.com/arco-design/arco-design-vue/pull/1087))\n- `checkbox-group` 支持 `options` 属性配置子元素 ([#1058](https://github.com/arco-design/arco-design-vue/pull/1058))\n\n\n## 2.25.1\n\n`2022-04-27`\n\n### 💅 样式更新\n\n- 修复禁用状态下 hover 样式还会改变的问题 ([#1040](https://github.com/arco-design/arco-design-vue/pull/1040))\n\n\n## 2.18.0\n\n`2022-03-04`\n\n### 🆕 新增功能\n\n- 增加 checkbox 插槽，可以自定义复选框 ([#769](https://github.com/arco-design/arco-design-vue/pull/769))\n\n\n## 2.18.0-beta.1\n\n`2022-02-18`\n\n### ⚠️ 重点注意\n\n- 外层包裹 DOM 从 span 改为 label ([#697](https://github.com/arco-design/arco-design-vue/pull/697))\n\n"
  },
  {
    "path": "packages/web-vue/components/checkbox/README.en-US.md",
    "content": "```yaml\nmeta:\n  type: Component\n  category: Data Entry\ntitle: Checkbox\ndescription: In a set of data, the user can select one or more data through the check box.\n```\n\n*Auto translate by google.*\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/control.md\n\n@import ./__demo__/disabled.md\n\n@import ./__demo__/group.md\n\n@import ./__demo__/options.md\n\n@import ./__demo__/limit.md\n\n@import ./__demo__/all.md\n\n@import ./__demo__/layout.md\n\n@import ./__demo__/custom.md\n\n## API\n\n\n### `<checkbox>` Props\n\n|Attribute|Description|Type|Default|\n|---|---|---|:---:|\n|model-value **(v-model)**|Value|`boolean \\| Array<string \\| number \\| boolean>`|`-`|\n|default-checked|Whether checked by default (uncontrolled state)|`boolean`|`false`|\n|value|The `value` of the option|`string\\|number\\|boolean`|`-`|\n|disabled|Whether to disable|`boolean`|`false`|\n|indeterminate|Whether it is half-selected|`boolean`|`false`|\n### `<checkbox>` Events\n\n|Event Name|Description|Parameters|\n|---|---|---|\n|change|Trigger when the value changes|value: ` boolean \\| (string \\| number \\| boolean)[] `<br>ev: `Event`|\n### `<checkbox>` Slots\n\n|Slot Name|Description|Parameters|version|\n|---|---|---|:---|\n|checkbox|Custom checkbox|checked: `boolean`<br>disabled: `boolean`|2.18.0|\n\n\n\n\n### `<checkbox-group>` Props\n\n|Attribute|Description|Type|Default|version|\n|---|---|---|:---:|:---|\n|model-value **(v-model)**|Value|`Array<string \\| number \\| boolean>`|`-`||\n|default-value|Default value (uncontrolled state)|`Array<string \\| number \\| boolean>`|`[]`||\n|max|Support the maximum number of selections|`number`|`-`|2.36.0|\n|options|Options|`Array<string \\| number \\| CheckboxOption>`|`-`|2.27.0|\n|direction|Arrangement direction of checkboxes|`Direction`|`'horizontal'`||\n|disabled|Whether to disable|`boolean`|`false`||\n### `<checkbox-group>` Events\n\n|Event Name|Description|Parameters|\n|---|---|---|\n|change|Trigger when the value changes|value: `(string \\| number \\| boolean)[]`<br>ev: `Event`|\n### `<checkbox-group>` Slots\n\n|Slot Name|Description|Parameters|version|\n|---|---|---|:---|\n|checkbox|Custom checkbox|checked: `boolean`<br>disabled: `boolean`|2.27.0|\n|label|checkbox label content|data: `CheckboxOption`|2.27.0|\n\n\n\n\n### CheckboxOption\n\n|Name|Description|Type|Default|\n|---|---|---|:---:|\n|label|label content|`RenderContent`|`-`|\n|value|The `value` of the option|`string \\| number`|`-`|\n|disabled|Whether to disable|`boolean`|`false`|\n|indeterminate|Whether it is half-selected|`boolean`|`false`|\n\n\n"
  },
  {
    "path": "packages/web-vue/components/checkbox/README.zh-CN.md",
    "content": "```yaml\nmeta:\n  type: 组件\n  category: 数据输入\ntitle: 复选框 Checkbox\ndescription: 在一组数据中，用户可通过复选框选择一个或多个数据。\n```\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/control.md\n\n@import ./__demo__/disabled.md\n\n@import ./__demo__/group.md\n\n@import ./__demo__/options.md\n\n@import ./__demo__/limit.md\n\n@import ./__demo__/all.md\n\n@import ./__demo__/layout.md\n\n@import ./__demo__/custom.md\n\n## API\n\n\n### `<checkbox>` Props\n\n|参数名|描述|类型|默认值|\n|---|---|---|:---:|\n|model-value **(v-model)**|绑定值|`boolean \\| Array<string \\| number \\| boolean>`|`-`|\n|default-checked|默认是否选中（非受控状态）|`boolean`|`false`|\n|value|选项的 `value`|`string\\|number\\|boolean`|`-`|\n|disabled|是否禁用|`boolean`|`false`|\n|indeterminate|是否为半选状态|`boolean`|`false`|\n### `<checkbox>` Events\n\n|事件名|描述|参数|\n|---|---|---|\n|change|值改变时触发|value: ` boolean \\| (string \\| number \\| boolean)[] `<br>ev: `Event`|\n### `<checkbox>` Slots\n\n|插槽名|描述|参数|版本|\n|---|:---:|---|:---|\n|checkbox|自定义复选框|checked: `boolean`<br>disabled: `boolean`|2.18.0|\n\n\n\n\n### `<checkbox-group>` Props\n\n|参数名|描述|类型|默认值|版本|\n|---|---|---|:---:|:---|\n|model-value **(v-model)**|绑定值|`Array<string \\| number \\| boolean>`|`-`||\n|default-value|默认值（非受控状态）|`Array<string \\| number \\| boolean>`|`[]`||\n|max|支持最多选中的数量|`number`|`-`|2.36.0|\n|options|选项|`Array<string \\| number \\| CheckboxOption>`|`-`|2.27.0|\n|direction|复选框的排列方向|`Direction`|`'horizontal'`||\n|disabled|是否禁用|`boolean`|`false`||\n### `<checkbox-group>` Events\n\n|事件名|描述|参数|\n|---|---|---|\n|change|值改变时触发|value: `(string \\| number \\| boolean)[]`<br>ev: `Event`|\n### `<checkbox-group>` Slots\n\n|插槽名|描述|参数|版本|\n|---|:---:|---|:---|\n|checkbox|自定义复选框|checked: `boolean`<br>disabled: `boolean`|2.27.0|\n|label|checkbox 文案内容|data: `CheckboxOption`|2.27.0|\n\n\n\n\n### CheckboxOption\n\n|参数名|描述|类型|默认值|\n|---|---|---|:---:|\n|label|文案|`RenderContent`|`-`|\n|value|选项的 `value`|`string \\| number`|`-`|\n|disabled|是否禁用|`boolean`|`false`|\n|indeterminate|是否为半选状态|`boolean`|`false`|\n\n\n"
  },
  {
    "path": "packages/web-vue/components/checkbox/TEMPLATE.md",
    "content": "## zh-CN\n```yaml\nmeta:\n  type: 组件\n  category: 数据输入\ntitle: 复选框 Checkbox\ndescription: 在一组数据中，用户可通过复选框选择一个或多个数据。\n```\n---\n## en-US\n```yaml\nmeta:\n  type: Component\n  category: Data Entry\ntitle: Checkbox\ndescription: In a set of data, the user can select one or more data through the check box.\n```\n---\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/control.md\n\n@import ./__demo__/disabled.md\n\n@import ./__demo__/group.md\n\n@import ./__demo__/options.md\n\n@import ./__demo__/limit.md\n\n@import ./__demo__/all.md\n\n@import ./__demo__/layout.md\n\n@import ./__demo__/custom.md\n\n## API\n\n%%API(checkbox.tsx)%%\n\n%%API(checkbox-group.tsx)%%\n\n%%INTERFACE(interface.ts)%%\n"
  },
  {
    "path": "packages/web-vue/components/checkbox/__demo__/all.md",
    "content": "```yaml\ntitle:\n  zh-CN: 全选\n  en-US: Check All\n```\n\n## zh-CN\n\n在实现全选的功能时，可以通过 `indeterminate` 属性展示半选效果。\n\n---\n\n## en-US\n\nWhen implementing the function of selecting all, you can display the half-selection effect through the indeterminate property.\n\n---\n\n```vue\n<template>\n  <a-space direction=\"vertical\">\n    <a-checkbox :model-value=\"checkedAll\" :indeterminate=\"indeterminate\" @change=\"handleChangeAll\">Check All\n    </a-checkbox>\n    <a-checkbox-group v-model=\"data\" @change=\"handleChange\">\n      <a-checkbox value=\"1\">Option 1</a-checkbox>\n      <a-checkbox value=\"2\">Option 2</a-checkbox>\n      <a-checkbox value=\"3\">Option 3</a-checkbox>\n    </a-checkbox-group>\n  </a-space>\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n  setup() {\n    const indeterminate = ref(false)\n    const checkedAll = ref(false)\n    const data = ref([])\n\n    const handleChangeAll = (value) => {\n      indeterminate.value = false;\n      if (value) {\n        checkedAll.value = true;\n        data.value = ['1', '2', '3']\n      } else {\n        checkedAll.value = false;\n        data.value = []\n      }\n    }\n\n    const handleChange = (values) => {\n      if (values.length === 3) {\n        checkedAll.value = true\n        indeterminate.value = false;\n      } else if (values.length === 0) {\n        checkedAll.value = false\n        indeterminate.value = false;\n      } else {\n        checkedAll.value = false\n        indeterminate.value = true;\n      }\n    }\n\n    return {\n      indeterminate,\n      checkedAll,\n      data,\n      handleChangeAll,\n      handleChange\n    }\n  },\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/checkbox/__demo__/basic.md",
    "content": "```yaml\ntitle:\n  zh-CN: 基本用法\n  en-US: Basic Usage\n```\n\n## zh-CN\n\n复选框的基本用法。\n\n---\n\n## en-US\n\nBasic usage of checkbox.\n\n---\n\n```vue\n<template>\n  <a-checkbox value=\"1\">Option 1</a-checkbox>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/checkbox/__demo__/control.md",
    "content": "```yaml\ntitle:\n  zh-CN: 受控\n  en-US: Controlled\n```\n\n## zh-CN\n\n通过 `v-model` (`model-value`) 属性控制是否选中\n\n---\n\n## en-US\n\nControl whether the check box is selected\n\n---\n\n```vue\n<template>\n  <a-space size=\"large\">\n    <a-checkbox v-model=\"checked1\">v-model</a-checkbox>\n    <a-checkbox :model-value=\"true\">binding value</a-checkbox>\n    <a-checkbox :model-value=\"checked2\">binding value2</a-checkbox>\n    <a-checkbox :default-checked=\"true\">uncontrolled state</a-checkbox>\n  </a-space>\n  <div :style=\"{ marginTop: '20px' }\">\n    <a-button type=\"primary\" @click=\"handleSetCheck\">\n      {{ checked2 ? 'uncheck' : 'check' }} value2\n    </a-button>\n  </div>\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n  setup() {\n    const checked1 = ref(false);\n    const checked2 = ref(false);\n\n    const handleSetCheck = () => {\n      checked2.value = !checked2.value;\n    };\n\n    return {\n      checked1,\n      checked2,\n      handleSetCheck,\n    };\n  },\n};\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/checkbox/__demo__/custom.md",
    "content": "```yaml\ntitle:\n  zh-CN: 自定义复选框\n  en-US: Custom CheckBox Display\n```\n\n## zh-CN\n\n使用 #checkbox 插槽自定义复选框的展示\n\n---\n\n## en-US\n\nUse the #checkbox slot to customize the display of checkboxes\n\n---\n\n```vue\n<template>\n  <a-checkbox-group :default-value=\"['1']\">\n    <a-checkbox value=\"1\">\n      <template #checkbox=\"{ checked }\">\n        <a-tag :checked=\"checked\" checkable>This is a tag checkbox 1</a-tag>\n      </template>\n    </a-checkbox>\n    <a-checkbox value=\"2\">\n      <template #checkbox=\"{ checked }\">\n        <a-tag :checked=\"checked\" checkable>This is a tag checkbox 2</a-tag>\n      </template>\n    </a-checkbox>\n    <a-checkbox value=\"3\">\n      <template #checkbox=\"{ checked }\">\n        <a-tag :checked=\"checked\" checkable>This is a tag checkbox 3</a-tag>\n      </template>\n    </a-checkbox>\n  </a-checkbox-group>\n\n  <div :style=\"{ marginTop: '20px' }\">\n    <a-checkbox-group :default-value=\"[1]\">\n      <template v-for=\"item in 2\" :key=\"item\">\n        <a-checkbox :value=\"item\">\n          <template #checkbox=\"{ checked }\">\n            <a-space\n              align=\"start\"\n              class=\"custom-checkbox-card\"\n              :class=\"{ 'custom-checkbox-card-checked': checked }\"\n            >\n              <div className=\"custom-checkbox-card-mask\">\n                <div className=\"custom-checkbox-card-mask-dot\" />\n              </div>\n              <div>\n                <div className=\"custom-checkbox-card-title\">\n                  Checkbox Card {{ item }}\n                </div>\n                <a-typography-text type=\"secondary\">\n                  this is a text\n                </a-typography-text>\n              </div>\n            </a-space>\n          </template>\n        </a-checkbox>\n      </template>\n    </a-checkbox-group>\n  </div>\n</template>\n\n<style scoped>\n.custom-checkbox-card {\n  padding: 10px 16px;\n  border: 1px solid var(--color-border-2);\n  border-radius: 4px;\n  width: 250px;\n  box-sizing: border-box;\n}\n\n.custom-checkbox-card-mask {\n  height: 14px;\n  width: 14px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 2px;\n  border: 1px solid var(--color-border-2);\n  box-sizing: border-box;\n}\n\n.custom-checkbox-card-mask-dot {\n  width: 8px;\n  height: 8px;\n  border-radius: 2px;\n}\n\n.custom-checkbox-card-title {\n  color: var(--color-text-1);\n  font-size: 14px;\n  font-weight: bold;\n  margin-bottom: 8px;\n}\n\n.custom-checkbox-card:hover,\n.custom-checkbox-card-checked,\n.custom-checkbox-card:hover .custom-checkbox-card-mask,\n.custom-checkbox-card-checked .custom-checkbox-card-mask {\n  border-color: rgb(var(--primary-6));\n}\n\n.custom-checkbox-card-checked {\n  background-color: var(--color-primary-light-1);\n}\n\n.custom-checkbox-card:hover .custom-checkbox-card-title,\n.custom-checkbox-card-checked .custom-checkbox-card-title {\n  color: rgb(var(--primary-6));\n}\n\n.custom-checkbox-card-checked .custom-checkbox-card-mask-dot {\n  background-color: rgb(var(--primary-6));\n}\n</style>\n```\n"
  },
  {
    "path": "packages/web-vue/components/checkbox/__demo__/disabled.md",
    "content": "```yaml\ntitle:\n  zh-CN: 禁用状态\n  en-US: Disabled\n```\n\n## zh-CN\n\n禁用复选框。\n\n---\n\n## en-US\n\nDisable the checkbox.\n\n---\n\n```vue\n<template>\n  <a-space size=\"large\">\n    <a-checkbox value=\"1\" disabled>Disabled Option 1</a-checkbox>\n    <a-checkbox :default-checked=\"true\" disabled>Disabled Option 2</a-checkbox>\n  </a-space>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/checkbox/__demo__/group.md",
    "content": "```yaml\ntitle:\n  zh-CN: 复选框组\n  en-US: Checkbox Group\n```\n\n## zh-CN\n\n通过 `<a-checkbox-group>` 组件展示复选框组。设置 `direction=\"vertical\"` 可以展示竖向的复选框组。\n\n---\n\n## en-US\n\nDisplay the checkbox group through the `<a-checkbox-group>` component. Set `direction=\"vertical\"` to show the vertical checkbox group.\n\n---\n\n```vue\n<template>\n  <a-space direction=\"vertical\" size=\"large\">\n    <a-checkbox-group :default-value=\"['1']\">\n      <a-checkbox value=\"1\">Option 1</a-checkbox>\n      <a-checkbox value=\"2\">Option 2</a-checkbox>\n      <a-checkbox value=\"3\">Option 3</a-checkbox>\n    </a-checkbox-group>\n    <a-checkbox-group direction=\"vertical\">\n      <a-checkbox value=\"1\">Option 1</a-checkbox>\n      <a-checkbox value=\"2\">Option 2</a-checkbox>\n      <a-checkbox value=\"3\">Option 3</a-checkbox>\n    </a-checkbox-group>\n  </a-space>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/checkbox/__demo__/layout.md",
    "content": "```yaml\ntitle:\n  zh-CN: 布局\n  en-US: Layout\n```\n\n## zh-CN\n\n使用 `<a-checkbox-group>` 传入 `<a-checkbox>`，配合 `<a-grid>` 组件实现灵活的布局。\n\n---\n\n## en-US\n\nWe can use `<a-checkbox>` and `<a-grid>` in `<a-checkbox-group>`, to implement complex layout.\n\n---\n\n```vue\n<template>\n  <a-checkbox-group v-model=\"checkedValue\">\n    <a-grid :cols=\"3\" :colGap=\"24\" :rowGap=\"16\">\n      <a-grid-item>\n        <a-checkbox value=\"1\">Option 1</a-checkbox>\n      </a-grid-item>\n      <a-grid-item>\n        <a-checkbox value=\"2\" disabled>Option 2</a-checkbox>\n      </a-grid-item>\n      <a-grid-item>\n        <a-checkbox value=\"3\">Option 3</a-checkbox>\n      </a-grid-item>\n      <a-grid-item>\n        <a-checkbox value=\"4\">Option 4</a-checkbox>\n      </a-grid-item>\n      <a-grid-item>\n        <a-checkbox value=\"5\">Option 5</a-checkbox>\n      </a-grid-item>\n    </a-grid>\n  </a-checkbox-group>\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n  setup() {\n    const checkedValue = ref(['1', '2']);\n\n    return {\n      checkedValue,\n    };\n  },\n};\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/checkbox/__demo__/limit.md",
    "content": "```yaml\ntitle:\n  zh-CN: 限制可勾选数量\n  en-US: Limit the number of boxes that can be checked\n```\n\n## zh-CN\n\n通过设置 `max` 限制最多可被勾选的项目数。\n\n---\n\n## en-US\n\nLimit the maximum number of items that can be checked by setting `max`.\n\n---\n\n```vue\n<template>\n  <a-space direction=\"vertical\" size=\"large\">\n    <a-checkbox-group :max=\"2\" v-model=\"value1\" :options=\"plainOptions\" />\n    <a-checkbox-group :max=\"2\" :default-value=\"['1']\">\n      <a-checkbox value=\"1\" disabled>Option 1</a-checkbox>\n      <a-checkbox value=\"2\">Option 2</a-checkbox>\n      <a-checkbox value=\"3\">Option 3</a-checkbox>\n      <a-checkbox value=\"4\">Option 4</a-checkbox>\n    </a-checkbox-group>\n  </a-space>\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n  setup() {\n    const value1 = ref(['Plain 1']);\n    const plainOptions = ['Plain 1', 'Plain 2', 'Plain 3', 'Plain 4'];\n\n    return {\n      plainOptions,\n      value1,\n    };\n  },\n};\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/checkbox/__demo__/options.md",
    "content": "```yaml\ntitle:\n  zh-CN: 复选框组选项\n  en-US: Checkbox Group options\n```\n\n## zh-CN\n\n`a-checkbox-group` 通过 `options` 属性设置子元素\n\n---\n\n## en-US\n\n`a-checkbox-group` set child elements through `options` prop\n\n---\n\n```vue\n<template>\n  <a-space direction=\"vertical\" size=\"large\">\n    <a-checkbox-group v-model=\"value1\" :options=\"plainOptions\" />\n    <a-checkbox-group v-model=\"value2\" :options=\"options\" />\n    <a-checkbox-group v-model=\"value2\" :options=\"options\">\n      <template #label=\"{ data }\">\n        <a-tag>{{ data.label }}</a-tag>\n      </template>\n    </a-checkbox-group>\n  </a-space>\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n  setup() {\n    const value1 = ref(['Plain 1']);\n    const plainOptions = ['Plain 1', 'Plain 2', 'Plain 3'];\n\n    const value2 = ref(['1']);\n    const options = [\n      { label: 'Option 1', value: '1' },\n      { label: 'Option 2', value: '2' },\n      { label: 'Option 3', value: '3', disabled: true },\n    ];\n\n    return {\n      plainOptions,\n      options,\n      value1,\n      value2,\n    };\n  },\n};\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/checkbox/__test__/__snapshots__/demo.test.ts.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`<checkbox> demo: render [all] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-vertical\\\\\" style=\\\\\"column-gap: 8px; row-gap: 8px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span><span class=\\\\\"arco-checkbox-label\\\\\">Check All </span></label></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-checkbox-group arco-checkbox-group-direction-horizontal\\\\\"><label aria-disabled=\\\\\"false\\\\\" class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"1\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span><span class=\\\\\"arco-checkbox-label\\\\\">Option 1</span></label><label aria-disabled=\\\\\"false\\\\\" class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"2\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span><span class=\\\\\"arco-checkbox-label\\\\\">Option 2</span></label><label aria-disabled=\\\\\"false\\\\\" class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"3\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span><span class=\\\\\"arco-checkbox-label\\\\\">Option 3</span></label></span></div>\n</div>\"\n`;\n\nexports[`<checkbox> demo: render [basic] correctly 1`] = `\"<label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"1\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span><span class=\\\\\"arco-checkbox-label\\\\\">Option 1</span></label>\"`;\n\nexports[`<checkbox> demo: render [control] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 24px; row-gap: 24px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span><span class=\\\\\"arco-checkbox-label\\\\\">v-model</span></label></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><label aria-disabled=\\\\\"false\\\\\" class=\\\\\"arco-checkbox arco-checkbox-checked\\\\\"><input type=\\\\\"checkbox\\\\\" checked=\\\\\"\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-icon-hover-disabled arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><svg aria-hidden=\\\\\"true\\\\\" focusable=\\\\\"false\\\\\" viewBox=\\\\\"0 0 1024 1024\\\\\" width=\\\\\"200\\\\\" height=\\\\\"200\\\\\" fill=\\\\\"currentColor\\\\\" class=\\\\\"arco-checkbox-icon-check\\\\\"><path d=\\\\\"M877.44815445 206.10060629a64.72691371 64.72691371 0 0 0-95.14856334 4.01306852L380.73381888 685.46812814 235.22771741 533.48933518a64.72691371 64.72691371 0 0 0-92.43003222-1.03563036l-45.82665557 45.82665443a64.72691371 64.72691371 0 0 0-0.90617629 90.61767965l239.61903446 250.10479331a64.72691371 64.72691371 0 0 0 71.19960405 15.14609778 64.33855261 64.33855261 0 0 0 35.08198741-21.23042702l36.24707186-42.71976334 40.5190474-40.77795556-3.36579926-3.49525333 411.40426297-486.74638962a64.72691371 64.72691371 0 0 0-3.88361443-87.64024149l-45.3088404-45.43829334z\\\\\" p-id=\\\\\"840\\\\\"></path></svg></div></span><span class=\\\\\"arco-checkbox-label\\\\\">binding value</span></label></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span><span class=\\\\\"arco-checkbox-label\\\\\">binding value2</span></label></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><label aria-disabled=\\\\\"false\\\\\" class=\\\\\"arco-checkbox arco-checkbox-checked\\\\\"><input type=\\\\\"checkbox\\\\\" checked=\\\\\"\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-icon-hover-disabled arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><svg aria-hidden=\\\\\"true\\\\\" focusable=\\\\\"false\\\\\" viewBox=\\\\\"0 0 1024 1024\\\\\" width=\\\\\"200\\\\\" height=\\\\\"200\\\\\" fill=\\\\\"currentColor\\\\\" class=\\\\\"arco-checkbox-icon-check\\\\\"><path d=\\\\\"M877.44815445 206.10060629a64.72691371 64.72691371 0 0 0-95.14856334 4.01306852L380.73381888 685.46812814 235.22771741 533.48933518a64.72691371 64.72691371 0 0 0-92.43003222-1.03563036l-45.82665557 45.82665443a64.72691371 64.72691371 0 0 0-0.90617629 90.61767965l239.61903446 250.10479331a64.72691371 64.72691371 0 0 0 71.19960405 15.14609778 64.33855261 64.33855261 0 0 0 35.08198741-21.23042702l36.24707186-42.71976334 40.5190474-40.77795556-3.36579926-3.49525333 411.40426297-486.74638962a64.72691371 64.72691371 0 0 0-3.88361443-87.64024149l-45.3088404-45.43829334z\\\\\" p-id=\\\\\"840\\\\\"></path></svg></div></span><span class=\\\\\"arco-checkbox-label\\\\\">uncontrolled state</span></label></div>\n</div>\n<div style=\\\\\"margin-top: 20px;\\\\\"><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n    <!--v-if-->check value2\n  </button></div>\"\n`;\n\nexports[`<checkbox> demo: render [custom] correctly 1`] = `\n\"<span class=\\\\\"arco-checkbox-group arco-checkbox-group-direction-horizontal\\\\\"><label aria-disabled=\\\\\"false\\\\\" class=\\\\\"arco-checkbox arco-checkbox-checked\\\\\"><input type=\\\\\"checkbox\\\\\" checked=\\\\\"\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"1\\\\\"><span class=\\\\\"arco-tag arco-tag-size-medium arco-tag-checkable arco-tag-checked\\\\\"><!--v-if-->This is a tag checkbox 1<!--v-if--><!--v-if--></span>\n<!----></label><label aria-disabled=\\\\\"false\\\\\" class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"2\\\\\"><span class=\\\\\"arco-tag arco-tag-size-medium arco-tag-checkable\\\\\"><!--v-if-->This is a tag checkbox 2<!--v-if--><!--v-if--></span>\n  <!---->\n</label><label aria-disabled=\\\\\"false\\\\\" class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"3\\\\\"><span class=\\\\\"arco-tag arco-tag-size-medium arco-tag-checkable\\\\\"><!--v-if-->This is a tag checkbox 3<!--v-if--><!--v-if--></span>\n  <!---->\n</label></span>\n<div style=\\\\\"margin-top: 20px;\\\\\"><span class=\\\\\"arco-checkbox-group arco-checkbox-group-direction-horizontal\\\\\"><label aria-disabled=\\\\\"false\\\\\" class=\\\\\"arco-checkbox arco-checkbox-checked\\\\\"><input type=\\\\\"checkbox\\\\\" checked=\\\\\"\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"1\\\\\"><div class=\\\\\"arco-space arco-space-horizontal arco-space-align-start custom-checkbox-card custom-checkbox-card-checked\\\\\" style=\\\\\"column-gap: 8px; row-gap: 8px;\\\\\"><!----><div class=\\\\\"arco-space-item\\\\\"><div class=\\\\\"custom-checkbox-card-mask\\\\\"><div class=\\\\\"custom-checkbox-card-mask-dot\\\\\"></div></div></div><!----><div class=\\\\\"arco-space-item\\\\\"><div><div class=\\\\\"custom-checkbox-card-title\\\\\"> Checkbox Card 1</div><span class=\\\\\"arco-typography arco-typography-secondary\\\\\"> this is a text <!----><!--v-if--><!--v-if--><!--v-if--></span></div>\n</div>\n</div>\n<!----></label><label aria-disabled=\\\\\"false\\\\\" class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"2\\\\\">\n  <div class=\\\\\"arco-space arco-space-horizontal arco-space-align-start custom-checkbox-card\\\\\" style=\\\\\"column-gap: 8px; row-gap: 8px;\\\\\">\n    <!---->\n    <div class=\\\\\"arco-space-item\\\\\">\n      <div class=\\\\\"custom-checkbox-card-mask\\\\\">\n        <div class=\\\\\"custom-checkbox-card-mask-dot\\\\\"></div>\n      </div>\n    </div>\n    <!---->\n    <div class=\\\\\"arco-space-item\\\\\">\n      <div>\n        <div class=\\\\\"custom-checkbox-card-title\\\\\"> Checkbox Card 2</div><span class=\\\\\"arco-typography arco-typography-secondary\\\\\"> this is a text <!----><!--v-if--><!--v-if--><!--v-if--></span>\n      </div>\n    </div>\n  </div>\n  <!---->\n</label></span></div>\"\n`;\n\nexports[`<checkbox> demo: render [disabled] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 24px; row-gap: 24px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><label aria-disabled=\\\\\"true\\\\\" class=\\\\\"arco-checkbox arco-checkbox-disabled\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" disabled=\\\\\"\\\\\" value=\\\\\"1\\\\\"><span class=\\\\\"arco-icon-hover arco-icon-hover-disabled arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span><span class=\\\\\"arco-checkbox-label\\\\\">Disabled Option 1</span></label></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><label aria-disabled=\\\\\"true\\\\\" class=\\\\\"arco-checkbox arco-checkbox-checked arco-checkbox-disabled\\\\\"><input type=\\\\\"checkbox\\\\\" checked=\\\\\"\\\\\" class=\\\\\"arco-checkbox-target\\\\\" disabled=\\\\\"\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-icon-hover-disabled arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><svg aria-hidden=\\\\\"true\\\\\" focusable=\\\\\"false\\\\\" viewBox=\\\\\"0 0 1024 1024\\\\\" width=\\\\\"200\\\\\" height=\\\\\"200\\\\\" fill=\\\\\"currentColor\\\\\" class=\\\\\"arco-checkbox-icon-check\\\\\"><path d=\\\\\"M877.44815445 206.10060629a64.72691371 64.72691371 0 0 0-95.14856334 4.01306852L380.73381888 685.46812814 235.22771741 533.48933518a64.72691371 64.72691371 0 0 0-92.43003222-1.03563036l-45.82665557 45.82665443a64.72691371 64.72691371 0 0 0-0.90617629 90.61767965l239.61903446 250.10479331a64.72691371 64.72691371 0 0 0 71.19960405 15.14609778 64.33855261 64.33855261 0 0 0 35.08198741-21.23042702l36.24707186-42.71976334 40.5190474-40.77795556-3.36579926-3.49525333 411.40426297-486.74638962a64.72691371 64.72691371 0 0 0-3.88361443-87.64024149l-45.3088404-45.43829334z\\\\\" p-id=\\\\\"840\\\\\"></path></svg></div></span><span class=\\\\\"arco-checkbox-label\\\\\">Disabled Option 2</span></label></div>\n</div>\"\n`;\n\nexports[`<checkbox> demo: render [group] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-vertical\\\\\" style=\\\\\"column-gap: 24px; row-gap: 24px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-checkbox-group arco-checkbox-group-direction-horizontal\\\\\"><label aria-disabled=\\\\\"false\\\\\" class=\\\\\"arco-checkbox arco-checkbox-checked\\\\\"><input type=\\\\\"checkbox\\\\\" checked=\\\\\"\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"1\\\\\"><span class=\\\\\"arco-icon-hover arco-icon-hover-disabled arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><svg aria-hidden=\\\\\"true\\\\\" focusable=\\\\\"false\\\\\" viewBox=\\\\\"0 0 1024 1024\\\\\" width=\\\\\"200\\\\\" height=\\\\\"200\\\\\" fill=\\\\\"currentColor\\\\\" class=\\\\\"arco-checkbox-icon-check\\\\\"><path d=\\\\\"M877.44815445 206.10060629a64.72691371 64.72691371 0 0 0-95.14856334 4.01306852L380.73381888 685.46812814 235.22771741 533.48933518a64.72691371 64.72691371 0 0 0-92.43003222-1.03563036l-45.82665557 45.82665443a64.72691371 64.72691371 0 0 0-0.90617629 90.61767965l239.61903446 250.10479331a64.72691371 64.72691371 0 0 0 71.19960405 15.14609778 64.33855261 64.33855261 0 0 0 35.08198741-21.23042702l36.24707186-42.71976334 40.5190474-40.77795556-3.36579926-3.49525333 411.40426297-486.74638962a64.72691371 64.72691371 0 0 0-3.88361443-87.64024149l-45.3088404-45.43829334z\\\\\" p-id=\\\\\"840\\\\\"></path></svg></div></span><span class=\\\\\"arco-checkbox-label\\\\\">Option 1</span></label><label aria-disabled=\\\\\"false\\\\\" class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"2\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span><span class=\\\\\"arco-checkbox-label\\\\\">Option 2</span></label><label aria-disabled=\\\\\"false\\\\\" class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"3\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span><span class=\\\\\"arco-checkbox-label\\\\\">Option 3</span></label></span></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-checkbox-group arco-checkbox-group-direction-vertical\\\\\"><label aria-disabled=\\\\\"false\\\\\" class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"1\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span><span class=\\\\\"arco-checkbox-label\\\\\">Option 1</span></label><label aria-disabled=\\\\\"false\\\\\" class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"2\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span><span class=\\\\\"arco-checkbox-label\\\\\">Option 2</span></label><label aria-disabled=\\\\\"false\\\\\" class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"3\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span><span class=\\\\\"arco-checkbox-label\\\\\">Option 3</span></label></span></div>\n</div>\"\n`;\n\nexports[`<checkbox> demo: render [layout] correctly 1`] = `\n\"<span class=\\\\\"arco-checkbox-group arco-checkbox-group-direction-horizontal\\\\\"><div class=\\\\\"arco-grid\\\\\" style=\\\\\"gap: 16px 24px; grid-template-columns: repeat(3, minmax(0px, 1fr));\\\\\"><div class=\\\\\"arco-grid-item\\\\\"><label aria-disabled=\\\\\"false\\\\\" class=\\\\\"arco-checkbox arco-checkbox-checked\\\\\"><input type=\\\\\"checkbox\\\\\" checked=\\\\\"\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"1\\\\\"><span class=\\\\\"arco-icon-hover arco-icon-hover-disabled arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><svg aria-hidden=\\\\\"true\\\\\" focusable=\\\\\"false\\\\\" viewBox=\\\\\"0 0 1024 1024\\\\\" width=\\\\\"200\\\\\" height=\\\\\"200\\\\\" fill=\\\\\"currentColor\\\\\" class=\\\\\"arco-checkbox-icon-check\\\\\"><path d=\\\\\"M877.44815445 206.10060629a64.72691371 64.72691371 0 0 0-95.14856334 4.01306852L380.73381888 685.46812814 235.22771741 533.48933518a64.72691371 64.72691371 0 0 0-92.43003222-1.03563036l-45.82665557 45.82665443a64.72691371 64.72691371 0 0 0-0.90617629 90.61767965l239.61903446 250.10479331a64.72691371 64.72691371 0 0 0 71.19960405 15.14609778 64.33855261 64.33855261 0 0 0 35.08198741-21.23042702l36.24707186-42.71976334 40.5190474-40.77795556-3.36579926-3.49525333 411.40426297-486.74638962a64.72691371 64.72691371 0 0 0-3.88361443-87.64024149l-45.3088404-45.43829334z\\\\\" p-id=\\\\\"840\\\\\"></path></svg></div></span><span class=\\\\\"arco-checkbox-label\\\\\">Option 1</span></label></div>\n<div class=\\\\\"arco-grid-item\\\\\"><label aria-disabled=\\\\\"true\\\\\" class=\\\\\"arco-checkbox arco-checkbox-checked arco-checkbox-disabled\\\\\"><input type=\\\\\"checkbox\\\\\" checked=\\\\\"\\\\\" class=\\\\\"arco-checkbox-target\\\\\" disabled=\\\\\"\\\\\" value=\\\\\"2\\\\\"><span class=\\\\\"arco-icon-hover arco-icon-hover-disabled arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><svg aria-hidden=\\\\\"true\\\\\" focusable=\\\\\"false\\\\\" viewBox=\\\\\"0 0 1024 1024\\\\\" width=\\\\\"200\\\\\" height=\\\\\"200\\\\\" fill=\\\\\"currentColor\\\\\" class=\\\\\"arco-checkbox-icon-check\\\\\"><path d=\\\\\"M877.44815445 206.10060629a64.72691371 64.72691371 0 0 0-95.14856334 4.01306852L380.73381888 685.46812814 235.22771741 533.48933518a64.72691371 64.72691371 0 0 0-92.43003222-1.03563036l-45.82665557 45.82665443a64.72691371 64.72691371 0 0 0-0.90617629 90.61767965l239.61903446 250.10479331a64.72691371 64.72691371 0 0 0 71.19960405 15.14609778 64.33855261 64.33855261 0 0 0 35.08198741-21.23042702l36.24707186-42.71976334 40.5190474-40.77795556-3.36579926-3.49525333 411.40426297-486.74638962a64.72691371 64.72691371 0 0 0-3.88361443-87.64024149l-45.3088404-45.43829334z\\\\\" p-id=\\\\\"840\\\\\"></path></svg></div></span><span class=\\\\\"arco-checkbox-label\\\\\">Option 2</span></label></div>\n<div class=\\\\\"arco-grid-item\\\\\"><label aria-disabled=\\\\\"false\\\\\" class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"3\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span><span class=\\\\\"arco-checkbox-label\\\\\">Option 3</span></label></div>\n<div class=\\\\\"arco-grid-item\\\\\"><label aria-disabled=\\\\\"false\\\\\" class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"4\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span><span class=\\\\\"arco-checkbox-label\\\\\">Option 4</span></label></div>\n<div class=\\\\\"arco-grid-item\\\\\"><label aria-disabled=\\\\\"false\\\\\" class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"5\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span><span class=\\\\\"arco-checkbox-label\\\\\">Option 5</span></label></div>\n</div></span>\"\n`;\n\nexports[`<checkbox> demo: render [limit] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-vertical\\\\\" style=\\\\\"column-gap: 24px; row-gap: 24px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-checkbox-group arco-checkbox-group-direction-horizontal\\\\\"><label aria-disabled=\\\\\"false\\\\\" class=\\\\\"arco-checkbox arco-checkbox-checked\\\\\"><input type=\\\\\"checkbox\\\\\" checked=\\\\\"\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"Plain 1\\\\\"><span class=\\\\\"arco-icon-hover arco-icon-hover-disabled arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><svg aria-hidden=\\\\\"true\\\\\" focusable=\\\\\"false\\\\\" viewBox=\\\\\"0 0 1024 1024\\\\\" width=\\\\\"200\\\\\" height=\\\\\"200\\\\\" fill=\\\\\"currentColor\\\\\" class=\\\\\"arco-checkbox-icon-check\\\\\"><path d=\\\\\"M877.44815445 206.10060629a64.72691371 64.72691371 0 0 0-95.14856334 4.01306852L380.73381888 685.46812814 235.22771741 533.48933518a64.72691371 64.72691371 0 0 0-92.43003222-1.03563036l-45.82665557 45.82665443a64.72691371 64.72691371 0 0 0-0.90617629 90.61767965l239.61903446 250.10479331a64.72691371 64.72691371 0 0 0 71.19960405 15.14609778 64.33855261 64.33855261 0 0 0 35.08198741-21.23042702l36.24707186-42.71976334 40.5190474-40.77795556-3.36579926-3.49525333 411.40426297-486.74638962a64.72691371 64.72691371 0 0 0-3.88361443-87.64024149l-45.3088404-45.43829334z\\\\\" p-id=\\\\\"840\\\\\"></path></svg></div></span><span class=\\\\\"arco-checkbox-label\\\\\">Plain 1</span></label><label aria-disabled=\\\\\"false\\\\\" class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"Plain 2\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span><span class=\\\\\"arco-checkbox-label\\\\\">Plain 2</span></label><label aria-disabled=\\\\\"false\\\\\" class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"Plain 3\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span><span class=\\\\\"arco-checkbox-label\\\\\">Plain 3</span></label><label aria-disabled=\\\\\"false\\\\\" class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"Plain 4\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span><span class=\\\\\"arco-checkbox-label\\\\\">Plain 4</span></label></span></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-checkbox-group arco-checkbox-group-direction-horizontal\\\\\"><label aria-disabled=\\\\\"true\\\\\" class=\\\\\"arco-checkbox arco-checkbox-checked arco-checkbox-disabled\\\\\"><input type=\\\\\"checkbox\\\\\" checked=\\\\\"\\\\\" class=\\\\\"arco-checkbox-target\\\\\" disabled=\\\\\"\\\\\" value=\\\\\"1\\\\\"><span class=\\\\\"arco-icon-hover arco-icon-hover-disabled arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><svg aria-hidden=\\\\\"true\\\\\" focusable=\\\\\"false\\\\\" viewBox=\\\\\"0 0 1024 1024\\\\\" width=\\\\\"200\\\\\" height=\\\\\"200\\\\\" fill=\\\\\"currentColor\\\\\" class=\\\\\"arco-checkbox-icon-check\\\\\"><path d=\\\\\"M877.44815445 206.10060629a64.72691371 64.72691371 0 0 0-95.14856334 4.01306852L380.73381888 685.46812814 235.22771741 533.48933518a64.72691371 64.72691371 0 0 0-92.43003222-1.03563036l-45.82665557 45.82665443a64.72691371 64.72691371 0 0 0-0.90617629 90.61767965l239.61903446 250.10479331a64.72691371 64.72691371 0 0 0 71.19960405 15.14609778 64.33855261 64.33855261 0 0 0 35.08198741-21.23042702l36.24707186-42.71976334 40.5190474-40.77795556-3.36579926-3.49525333 411.40426297-486.74638962a64.72691371 64.72691371 0 0 0-3.88361443-87.64024149l-45.3088404-45.43829334z\\\\\" p-id=\\\\\"840\\\\\"></path></svg></div></span><span class=\\\\\"arco-checkbox-label\\\\\">Option 1</span></label><label aria-disabled=\\\\\"false\\\\\" class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"2\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span><span class=\\\\\"arco-checkbox-label\\\\\">Option 2</span></label><label aria-disabled=\\\\\"false\\\\\" class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"3\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span><span class=\\\\\"arco-checkbox-label\\\\\">Option 3</span></label><label aria-disabled=\\\\\"false\\\\\" class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"4\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span><span class=\\\\\"arco-checkbox-label\\\\\">Option 4</span></label></span></div>\n</div>\"\n`;\n\nexports[`<checkbox> demo: render [options] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-vertical\\\\\" style=\\\\\"column-gap: 24px; row-gap: 24px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-checkbox-group arco-checkbox-group-direction-horizontal\\\\\"><label aria-disabled=\\\\\"false\\\\\" class=\\\\\"arco-checkbox arco-checkbox-checked\\\\\"><input type=\\\\\"checkbox\\\\\" checked=\\\\\"\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"Plain 1\\\\\"><span class=\\\\\"arco-icon-hover arco-icon-hover-disabled arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><svg aria-hidden=\\\\\"true\\\\\" focusable=\\\\\"false\\\\\" viewBox=\\\\\"0 0 1024 1024\\\\\" width=\\\\\"200\\\\\" height=\\\\\"200\\\\\" fill=\\\\\"currentColor\\\\\" class=\\\\\"arco-checkbox-icon-check\\\\\"><path d=\\\\\"M877.44815445 206.10060629a64.72691371 64.72691371 0 0 0-95.14856334 4.01306852L380.73381888 685.46812814 235.22771741 533.48933518a64.72691371 64.72691371 0 0 0-92.43003222-1.03563036l-45.82665557 45.82665443a64.72691371 64.72691371 0 0 0-0.90617629 90.61767965l239.61903446 250.10479331a64.72691371 64.72691371 0 0 0 71.19960405 15.14609778 64.33855261 64.33855261 0 0 0 35.08198741-21.23042702l36.24707186-42.71976334 40.5190474-40.77795556-3.36579926-3.49525333 411.40426297-486.74638962a64.72691371 64.72691371 0 0 0-3.88361443-87.64024149l-45.3088404-45.43829334z\\\\\" p-id=\\\\\"840\\\\\"></path></svg></div></span><span class=\\\\\"arco-checkbox-label\\\\\">Plain 1</span></label><label aria-disabled=\\\\\"false\\\\\" class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"Plain 2\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span><span class=\\\\\"arco-checkbox-label\\\\\">Plain 2</span></label><label aria-disabled=\\\\\"false\\\\\" class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"Plain 3\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span><span class=\\\\\"arco-checkbox-label\\\\\">Plain 3</span></label></span></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-checkbox-group arco-checkbox-group-direction-horizontal\\\\\"><label aria-disabled=\\\\\"false\\\\\" class=\\\\\"arco-checkbox arco-checkbox-checked\\\\\"><input type=\\\\\"checkbox\\\\\" checked=\\\\\"\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"1\\\\\"><span class=\\\\\"arco-icon-hover arco-icon-hover-disabled arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><svg aria-hidden=\\\\\"true\\\\\" focusable=\\\\\"false\\\\\" viewBox=\\\\\"0 0 1024 1024\\\\\" width=\\\\\"200\\\\\" height=\\\\\"200\\\\\" fill=\\\\\"currentColor\\\\\" class=\\\\\"arco-checkbox-icon-check\\\\\"><path d=\\\\\"M877.44815445 206.10060629a64.72691371 64.72691371 0 0 0-95.14856334 4.01306852L380.73381888 685.46812814 235.22771741 533.48933518a64.72691371 64.72691371 0 0 0-92.43003222-1.03563036l-45.82665557 45.82665443a64.72691371 64.72691371 0 0 0-0.90617629 90.61767965l239.61903446 250.10479331a64.72691371 64.72691371 0 0 0 71.19960405 15.14609778 64.33855261 64.33855261 0 0 0 35.08198741-21.23042702l36.24707186-42.71976334 40.5190474-40.77795556-3.36579926-3.49525333 411.40426297-486.74638962a64.72691371 64.72691371 0 0 0-3.88361443-87.64024149l-45.3088404-45.43829334z\\\\\" p-id=\\\\\"840\\\\\"></path></svg></div></span><span class=\\\\\"arco-checkbox-label\\\\\">Option 1</span></label><label aria-disabled=\\\\\"false\\\\\" class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"2\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span><span class=\\\\\"arco-checkbox-label\\\\\">Option 2</span></label><label aria-disabled=\\\\\"true\\\\\" class=\\\\\"arco-checkbox arco-checkbox-disabled\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" disabled=\\\\\"\\\\\" value=\\\\\"3\\\\\"><span class=\\\\\"arco-icon-hover arco-icon-hover-disabled arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span><span class=\\\\\"arco-checkbox-label\\\\\">Option 3</span></label></span></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-checkbox-group arco-checkbox-group-direction-horizontal\\\\\"><label aria-disabled=\\\\\"false\\\\\" class=\\\\\"arco-checkbox arco-checkbox-checked\\\\\"><input type=\\\\\"checkbox\\\\\" checked=\\\\\"\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"1\\\\\"><span class=\\\\\"arco-icon-hover arco-icon-hover-disabled arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><svg aria-hidden=\\\\\"true\\\\\" focusable=\\\\\"false\\\\\" viewBox=\\\\\"0 0 1024 1024\\\\\" width=\\\\\"200\\\\\" height=\\\\\"200\\\\\" fill=\\\\\"currentColor\\\\\" class=\\\\\"arco-checkbox-icon-check\\\\\"><path d=\\\\\"M877.44815445 206.10060629a64.72691371 64.72691371 0 0 0-95.14856334 4.01306852L380.73381888 685.46812814 235.22771741 533.48933518a64.72691371 64.72691371 0 0 0-92.43003222-1.03563036l-45.82665557 45.82665443a64.72691371 64.72691371 0 0 0-0.90617629 90.61767965l239.61903446 250.10479331a64.72691371 64.72691371 0 0 0 71.19960405 15.14609778 64.33855261 64.33855261 0 0 0 35.08198741-21.23042702l36.24707186-42.71976334 40.5190474-40.77795556-3.36579926-3.49525333 411.40426297-486.74638962a64.72691371 64.72691371 0 0 0-3.88361443-87.64024149l-45.3088404-45.43829334z\\\\\" p-id=\\\\\"840\\\\\"></path></svg></div></span><span class=\\\\\"arco-checkbox-label\\\\\"><span class=\\\\\"arco-tag arco-tag-size-medium arco-tag-checked\\\\\"><!--v-if-->Option 1<!--v-if--><!--v-if--></span></span></label><label aria-disabled=\\\\\"false\\\\\" class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"2\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span><span class=\\\\\"arco-checkbox-label\\\\\"><span class=\\\\\"arco-tag arco-tag-size-medium arco-tag-checked\\\\\"><!--v-if-->Option 2<!--v-if--><!--v-if--></span></span></label><label aria-disabled=\\\\\"true\\\\\" class=\\\\\"arco-checkbox arco-checkbox-disabled\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" disabled=\\\\\"\\\\\" value=\\\\\"3\\\\\"><span class=\\\\\"arco-icon-hover arco-icon-hover-disabled arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span><span class=\\\\\"arco-checkbox-label\\\\\"><span class=\\\\\"arco-tag arco-tag-size-medium arco-tag-checked\\\\\"><!--v-if-->Option 3<!--v-if--><!--v-if--></span></span></label></span></div>\n</div>\"\n`;\n"
  },
  {
    "path": "packages/web-vue/components/checkbox/__test__/demo.test.ts",
    "content": "import demoTest from '../../../scripts/demo-test';\n\ndemoTest('checkbox');\n"
  },
  {
    "path": "packages/web-vue/components/checkbox/__test__/index.test.ts",
    "content": "import { mount } from '@vue/test-utils';\nimport Checkbox from '../index';\n\ndescribe('Checkbox', () => {\n  test('should emit change event', async () => {\n    const wrapper = mount(Checkbox, {\n      props: {\n        value: 'test',\n      },\n      slots: {\n        default: 'Label',\n      },\n    });\n    await wrapper.find('input').setValue();\n    expect(wrapper.emitted('change')).toHaveLength(1);\n  });\n\n  test('should not emit change event when disabled', async () => {\n    const wrapper = mount(Checkbox, {\n      props: {\n        value: 'test',\n        disabled: true,\n      },\n    });\n    await wrapper.find('input').setValue();\n\n    expect(wrapper.emitted('change')).toBeUndefined();\n  });\n\n  test('should emit change event in group', async () => {\n    const wrapper = mount(Checkbox.Group, {\n      slots: {\n        default:\n          '<a-checkbox value=\"1\">Option1</a-checkbox>' +\n          '<a-checkbox value=\"2\">Option2</a-checkbox>',\n      },\n      global: {\n        plugins: [Checkbox],\n      },\n    });\n\n    await wrapper.find('input').setValue();\n    expect(wrapper.emitted('change')).toHaveLength(1);\n  });\n});\n"
  },
  {
    "path": "packages/web-vue/components/checkbox/checkbox-group.tsx",
    "content": "import type { PropType } from 'vue';\nimport {\n  computed,\n  defineComponent,\n  provide,\n  reactive,\n  ref,\n  toRefs,\n  watch,\n} from 'vue';\nimport { getPrefixCls } from '../_utils/global-config';\nimport { Direction } from '../_utils/constant';\nimport { checkboxGroupKey } from './context';\nimport { useFormItem } from '../_hooks/use-form-item';\nimport { CheckboxOption } from './interface';\nimport Checkbox from './checkbox';\nimport { isFunction, isNumber, isString, isArray } from '../_utils/is';\n\nexport default defineComponent({\n  name: 'CheckboxGroup',\n  props: {\n    /**\n     * @zh 绑定值\n     * @en Value\n     * @vModel\n     */\n    modelValue: {\n      type: Array as PropType<Array<string | number | boolean>>,\n      default: undefined,\n    },\n    /**\n     * @zh 默认值（非受控状态）\n     * @en Default value (uncontrolled state)\n     */\n    defaultValue: {\n      type: Array as PropType<Array<string | number | boolean>>,\n      default: () => [],\n    },\n    /**\n     * @zh 支持最多选中的数量\n     * @en Support the maximum number of selections\n     * @version 2.36.0\n     */\n    max: {\n      type: Number,\n    },\n    /**\n     * @zh 选项\n     * @en Options\n     * @version 2.27.0\n     */\n    options: {\n      type: Array as PropType<Array<string | number | CheckboxOption>>,\n    },\n    /**\n     * @zh 复选框的排列方向\n     * @en Arrangement direction of checkboxes\n     */\n    direction: {\n      type: String as PropType<Direction>,\n      default: 'horizontal',\n    },\n    /**\n     * @zh 是否禁用\n     * @en Whether to disable\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n  },\n  emits: {\n    'update:modelValue': (value: (string | number | boolean)[]) => true,\n    /**\n     * @zh 值改变时触发\n     * @en Trigger when the value changes\n     * @param {(string | number | boolean)[]} value\n     * @param {Event} ev\n     */\n    'change': (value: (string | number | boolean)[], ev: Event) => true,\n  },\n  /**\n   * @zh checkbox 文案内容\n   * @en checkbox label content\n   * @slot label\n   * @binding {CheckboxOption} data\n   * @version 2.27.0\n   */\n  /**\n   * @zh 自定义复选框\n   * @en Custom checkbox\n   * @slot checkbox\n   * @binding {boolean} checked\n   * @binding {boolean} disabled\n   * @version 2.27.0\n   */\n  setup(props, { emit, slots }) {\n    const { disabled } = toRefs(props);\n    const prefixCls = getPrefixCls('checkbox-group');\n    const { mergedDisabled, eventHandlers } = useFormItem({\n      disabled,\n    });\n\n    const _value = ref(props.defaultValue);\n    const computedValue = computed(() =>\n      isArray(props.modelValue) ? props.modelValue : _value.value\n    );\n    const isMaxed = computed(() =>\n      props.max === undefined ? false : computedValue.value.length >= props.max\n    );\n\n    const options = computed(() => {\n      return (props.options ?? []).map((option) => {\n        if (isString(option) || isNumber(option)) {\n          return {\n            label: option,\n            value: option,\n          } as CheckboxOption;\n        }\n        return option;\n      });\n    });\n\n    const handleChange = (value: Array<string | number>, e: Event) => {\n      _value.value = value;\n      emit('update:modelValue', value);\n      emit('change', value, e);\n      eventHandlers.value?.onChange?.(e);\n    };\n\n    provide(\n      checkboxGroupKey,\n      reactive({\n        name: 'ArcoCheckboxGroup',\n        computedValue,\n        disabled: mergedDisabled,\n        isMaxed,\n        slots,\n        handleChange,\n      })\n    );\n\n    const cls = computed(() => [\n      prefixCls,\n      `${prefixCls}-direction-${props.direction}`,\n    ]);\n\n    watch(\n      () => props.modelValue,\n      (curValue) => {\n        if (isArray(curValue)) {\n          _value.value = [...curValue];\n        } else {\n          _value.value = [];\n        }\n      }\n    );\n\n    const renderOptions = () => {\n      return options.value.map((option) => {\n        const checked = computedValue.value.includes(option.value);\n        return (\n          <Checkbox\n            key={option.value}\n            value={option.value}\n            disabled={option.disabled || (!checked && isMaxed.value)}\n            indeterminate={option.indeterminate}\n            modelValue={checked}\n          >\n            {slots.label\n              ? slots.label({ data: option })\n              : isFunction(option.label)\n              ? option.label()\n              : option.label}\n          </Checkbox>\n        );\n      });\n    };\n\n    return () => (\n      <span class={cls.value}>\n        {options.value.length > 0 ? renderOptions() : slots.default?.()}\n      </span>\n    );\n  },\n});\n"
  },
  {
    "path": "packages/web-vue/components/checkbox/checkbox.tsx",
    "content": "import type { PropType } from 'vue';\nimport {\n  computed,\n  defineComponent,\n  inject,\n  nextTick,\n  ref,\n  toRefs,\n  watch,\n} from 'vue';\nimport { getPrefixCls } from '../_utils/global-config';\nimport IconHover from '../_components/icon-hover.vue';\nimport IconCheck from './icon-check';\nimport { isArray, isNull, isUndefined } from '../_utils/is';\nimport { checkboxGroupKey } from './context';\nimport { useFormItem } from '../_hooks/use-form-item';\n\nexport default defineComponent({\n  name: 'Checkbox',\n  components: {\n    IconCheck,\n    IconHover,\n  },\n  props: {\n    /**\n     * @zh 绑定值\n     * @en Value\n     * @vModel\n     */\n    modelValue: {\n      type: [Boolean, Array] as PropType<\n        boolean | Array<string | number | boolean>\n      >,\n      default: undefined,\n    },\n    /**\n     * @zh 默认是否选中（非受控状态）\n     * @en Whether checked by default (uncontrolled state)\n     */\n    defaultChecked: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 选项的 `value`\n     * @en The `value` of the option\n     */\n    value: {\n      type: [String, Number, Boolean],\n    },\n    /**\n     * @zh 是否禁用\n     * @en Whether to disable\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 是否为半选状态\n     * @en Whether it is half-selected\n     */\n    indeterminate: {\n      type: Boolean,\n      default: false,\n    },\n    // private\n    uninjectGroupContext: {\n      type: Boolean,\n      default: false,\n    },\n  },\n  emits: {\n    'update:modelValue': (value: boolean | (string | number | boolean)[]) =>\n      true,\n    /**\n     * @zh 值改变时触发\n     * @en Trigger when the value changes\n     * @param { boolean | (string | number | boolean)[] } value\n     * @param {Event} ev\n     */\n    'change': (value: boolean | (string | number | boolean)[], ev: Event) =>\n      true,\n  },\n  /**\n   * @zh 自定义复选框\n   * @en Custom checkbox\n   * @slot checkbox\n   * @binding {boolean} checked\n   * @binding {boolean} disabled\n   * @version 2.18.0\n   */\n  setup(props, { emit, slots }) {\n    const { disabled, modelValue } = toRefs(props);\n    const prefixCls = getPrefixCls('checkbox');\n    const checkboxRef = ref<HTMLInputElement>();\n    const checkboxGroupCtx = !props.uninjectGroupContext\n      ? inject(checkboxGroupKey, undefined)\n      : undefined;\n    const isGroup = checkboxGroupCtx?.name === 'ArcoCheckboxGroup';\n    const { mergedDisabled: _mergedDisabled, eventHandlers } = useFormItem({\n      disabled,\n    });\n\n    const _checked = ref(props.defaultChecked);\n    const computedValue = computed(() =>\n      isGroup\n        ? checkboxGroupCtx?.computedValue\n        : props.modelValue ?? _checked.value\n    );\n    const computedChecked = computed<boolean>(() => {\n      return isArray(computedValue.value)\n        ? computedValue.value.includes(props.value ?? true)\n        : computedValue.value;\n    });\n    const mergedDisabled = computed(\n      () =>\n        checkboxGroupCtx?.disabled ||\n        _mergedDisabled?.value ||\n        (!computedChecked.value && checkboxGroupCtx?.isMaxed)\n    );\n\n    const handleClick = (ev: Event) => {\n      ev.stopPropagation();\n    };\n\n    const handleChange = (e: Event) => {\n      const { checked } = e.target as HTMLInputElement;\n\n      let newValue: boolean | Array<string | number | boolean> = checked;\n      if (isArray(computedValue.value)) {\n        const set = new Set(computedValue.value);\n        if (checked) {\n          set.add(props.value ?? true);\n        } else {\n          set.delete(props.value ?? true);\n        }\n        newValue = Array.from(set);\n      }\n\n      _checked.value = checked;\n      if (isGroup && isArray(newValue)) {\n        checkboxGroupCtx?.handleChange(newValue, e);\n      } else {\n        emit('update:modelValue', newValue);\n        emit('change', newValue, e);\n        eventHandlers.value?.onChange?.(e);\n      }\n\n      nextTick(() => {\n        if (\n          checkboxRef.value &&\n          checkboxRef.value.checked !== computedChecked.value\n        ) {\n          checkboxRef.value.checked = computedChecked.value;\n        }\n      });\n    };\n\n    const cls = computed(() => [\n      prefixCls,\n      {\n        [`${prefixCls}-checked`]: computedChecked.value,\n        [`${prefixCls}-indeterminate`]: props.indeterminate,\n        [`${prefixCls}-disabled`]: mergedDisabled.value,\n      },\n    ]);\n\n    // const handleClick = (ev: MouseEvent) => {\n    //   if (\n    //     !props.disabled &&\n    //     checkboxRef.value &&\n    //     ev.target !== checkboxRef.value\n    //   ) {\n    //     ev.preventDefault();\n    //     checkboxRef.value.click();\n    //   }\n    // };\n\n    const handleFocus = (ev: FocusEvent) => {\n      eventHandlers.value?.onFocus?.(ev);\n    };\n\n    const handleBlur = (ev: FocusEvent) => {\n      eventHandlers.value?.onBlur?.(ev);\n    };\n\n    watch(modelValue, (value) => {\n      if (isUndefined(value) || isNull(value)) {\n        _checked.value = false;\n      }\n    });\n\n    watch(computedValue, (value) => {\n      let checked;\n      if (isArray(value)) {\n        checked = value.includes(props.value ?? true);\n      } else {\n        checked = value;\n      }\n      if (_checked.value !== checked) {\n        _checked.value = checked;\n      }\n      if (checkboxRef.value && checkboxRef.value.checked !== checked) {\n        checkboxRef.value.checked = checked;\n      }\n    });\n\n    return () => (\n      <label aria-disabled={mergedDisabled.value} class={cls.value}>\n        <input\n          ref={checkboxRef}\n          type=\"checkbox\"\n          checked={computedChecked.value}\n          value={props.value}\n          class={`${prefixCls}-target`}\n          disabled={mergedDisabled.value}\n          onClick={handleClick}\n          onChange={handleChange}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n        />\n        {(slots.checkbox ?? checkboxGroupCtx?.slots?.checkbox)?.({\n          checked: computedChecked.value,\n          disabled: mergedDisabled.value,\n        }) ?? (\n          <IconHover\n            class={`${prefixCls}-icon-hover`}\n            disabled={mergedDisabled.value || computedChecked.value}\n          >\n            <div class={`${prefixCls}-icon`}>\n              {computedChecked.value && (\n                <IconCheck class={`${prefixCls}-icon-check`} />\n              )}\n            </div>\n          </IconHover>\n        )}\n        {slots.default && (\n          <span class={`${prefixCls}-label`}>{slots.default()}</span>\n        )}\n      </label>\n    );\n  },\n});\n"
  },
  {
    "path": "packages/web-vue/components/checkbox/context.ts",
    "content": "import type { InjectionKey, Slots } from 'vue';\n\nexport interface CheckboxGroupContext {\n  name: 'ArcoCheckboxGroup';\n  computedValue: Array<string | number>;\n  disabled: boolean;\n  isMaxed: boolean;\n  slots: Slots;\n  handleChange: (value: Array<string | number | boolean>, e: Event) => void;\n}\n\nexport const checkboxGroupKey: InjectionKey<CheckboxGroupContext> =\n  Symbol('ArcoCheckboxGroup');\n"
  },
  {
    "path": "packages/web-vue/components/checkbox/icon-check.tsx",
    "content": "import { defineComponent } from 'vue';\n\nexport default defineComponent({\n  name: 'IconCheck',\n  render() {\n    return (\n      <svg\n        aria-hidden=\"true\"\n        focusable=\"false\"\n        viewBox=\"0 0 1024 1024\"\n        width=\"200\"\n        height=\"200\"\n        fill=\"currentColor\"\n      >\n        <path\n          d=\"M877.44815445 206.10060629a64.72691371 64.72691371 0 0 0-95.14856334 4.01306852L380.73381888 685.46812814 235.22771741 533.48933518a64.72691371 64.72691371 0 0 0-92.43003222-1.03563036l-45.82665557 45.82665443a64.72691371 64.72691371 0 0 0-0.90617629 90.61767965l239.61903446 250.10479331a64.72691371 64.72691371 0 0 0 71.19960405 15.14609778 64.33855261 64.33855261 0 0 0 35.08198741-21.23042702l36.24707186-42.71976334 40.5190474-40.77795556-3.36579926-3.49525333 411.40426297-486.74638962a64.72691371 64.72691371 0 0 0-3.88361443-87.64024149l-45.3088404-45.43829334z\"\n          p-id=\"840\"\n        />\n      </svg>\n    );\n  },\n});\n"
  },
  {
    "path": "packages/web-vue/components/checkbox/index.ts",
    "content": "import type { App } from 'vue';\nimport type { ArcoOptions } from '../_utils/types';\nimport { setGlobalConfig, getComponentPrefix } from '../_utils/global-config';\nimport _Checkbox from './checkbox';\nimport _CheckboxGroup from './checkbox-group';\n\nconst Checkbox = Object.assign(_Checkbox, {\n  Group: _CheckboxGroup,\n  install: (app: App, options?: ArcoOptions) => {\n    setGlobalConfig(app, options);\n    const componentPrefix = getComponentPrefix(options);\n\n    app.component(componentPrefix + _Checkbox.name, _Checkbox);\n    app.component(componentPrefix + _CheckboxGroup.name, _CheckboxGroup);\n  },\n});\n\nexport type CheckboxInstance = InstanceType<typeof _Checkbox>;\nexport type CheckboxGroupInstance = InstanceType<typeof _CheckboxGroup>;\nexport type { CheckboxOption } from './interface';\n\nexport { _CheckboxGroup as CheckboxGroup };\n\nexport default Checkbox;\n"
  },
  {
    "path": "packages/web-vue/components/checkbox/interface.ts",
    "content": "import { RenderContent } from '../_utils/types';\n\nexport interface CheckboxOption {\n  /**\n   * @zh 文案\n   * @en label content\n   */\n  label?: RenderContent;\n  /**\n   * @zh 选项的 `value`\n   * @en The `value` of the option\n   */\n  value: string | number;\n  /**\n   * @zh 是否禁用\n   * @en Whether to disable\n   */\n  disabled?: boolean;\n  /**\n   * @zh 是否为半选状态\n   * @en Whether it is half-selected\n   */\n  indeterminate?: boolean;\n}\n"
  },
  {
    "path": "packages/web-vue/components/checkbox/style/index.less",
    "content": "@import '../../style/mixins/index.less';\n@import './token.less';\n\n.icon-hover(@checkbox-prefix-cls, @checkbox-mask-height, @checkbox-mask-bg-height);\n\n.@{checkbox-prefix-cls} {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  box-sizing: border-box;\n  padding-left: (@checkbox-mask-bg-height / 2) - (@checkbox-mask-height / 2);\n  font-size: @checkbox-text-font-size;\n  line-height: unset;\n  cursor: pointer;\n\n  > input[type='checkbox'] {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 0;\n    height: 0;\n    opacity: 0;\n\n    &:focus-visible + .@{checkbox-prefix-cls}-icon-hover::before {\n      background-color: @icon-hover-color-bg;\n    }\n  }\n\n  &:hover {\n    .@{checkbox-prefix-cls}-icon-hover::before {\n      background-color: @checkbox-mask-bg-color-bg;\n    }\n  }\n\n  &-label {\n    margin-left: @checkbox-text-mask-spacing;\n    color: @checkbox-color-text;\n  }\n\n  &-icon {\n    position: relative;\n    box-sizing: border-box;\n    width: @checkbox-mask-height;\n    height: @checkbox-mask-height;\n    background-color: @checkbox-mask-color-bg;\n    border: @checkbox-mask-border-width @checkbox-mask-border-style\n      @checkbox-mask-color-border;\n    border-radius: @checkbox-mask-border-radius;\n    user-select: none;\n\n    // 半选\n    &::after {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      display: block;\n      width: @checkbox-color-indeterminate-icon-width;\n      height: @checkbox-color-indeterminate-icon-height;\n      background: @checkbox-color-indeterminate-icon;\n      border-radius: 0.5px;\n      transform: translateX(-50%) translateY(-50%) scale(0);\n      content: '';\n    }\n\n    &-check {\n      position: relative;\n      display: block;\n      width: @checkbox-size-check-icon;\n      height: 100%;\n      margin: 0 auto;\n      color: @checkbox-color-check-icon;\n      transform: scale(0);\n      transform-origin: center 75%;\n    }\n  }\n\n  &:hover &-icon {\n    border-color: @checkbox-mask-color-border_hover;\n    transition: border-color @transition-duration-1\n        @transition-timing-function-linear,\n      transform @transition-duration-3 @transition-timing-function-overshoot;\n  }\n\n  &-checked:hover &-icon,\n  &-indeterminate:hover &-icon {\n    transition: transform @transition-duration-3\n      @transition-timing-function-overshoot;\n  }\n\n  &-checked &-icon {\n    background-color: @checkbox-mask-color-bg_checked;\n    border-color: @checkbox-mask-color-border_checked;\n\n    &-check {\n      transform: scale(1);\n      transition: transform @transition-duration-3\n        @transition-timing-function-overshoot;\n    }\n  }\n\n  &-indeterminate &-icon {\n    background-color: @checkbox-mask-color-bg_checked;\n    border-color: @checkbox-mask-color-border_checked;\n\n    svg {\n      transform: scale(0);\n    }\n\n    &::after {\n      transform: translateX(-50%) translateY(-50%) scale(1);\n      transition: transform @transition-duration-3\n        @transition-timing-function-overshoot;\n    }\n  }\n\n  &&-disabled {\n    cursor: not-allowed;\n\n    .@{checkbox-prefix-cls}-icon-hover {\n      cursor: not-allowed;\n    }\n\n    &:hover .@{checkbox-prefix-cls}-mask {\n      border-color: @checkbox-mask-color-border_disabled;\n    }\n  }\n\n  &-checked:hover &-icon,\n  &-indeterminate:hover &-icon {\n    border-color: @checkbox-mask-color-border_checked;\n  }\n\n  &-disabled &-icon {\n    background-color: @checkbox-mask-color-bg_disabled;\n    border-color: @checkbox-mask-color-border_disabled;\n  }\n\n  &-disabled&-checked &-icon,\n  &-disabled&-checked:hover &-icon {\n    background-color: @checkbox-mask-color-bg_checked_disabled;\n    border-color: @checkbox-mask-color-border_checked_disabled;\n  }\n\n  &-disabled:hover,\n  &-checked:hover,\n  &-indeterminate:hover {\n    .@{checkbox-prefix-cls}-icon-hover::before {\n      background-color: @color-transparent;\n    }\n  }\n\n  &-disabled:hover &-icon {\n    border-color: @checkbox-mask-color-border;\n  }\n\n  &-disabled &-label {\n    color: @checkbox-color-text_disabled;\n  }\n\n  &-disabled &-icon-check {\n    color: @checkbox-color-check-icon_disabled;\n  }\n}\n\n// checkbox group\n.@{checkbox-prefix-cls}-group {\n  display: inline-block;\n\n  .@{checkbox-prefix-cls} {\n    margin-right: @checkbox-group-spacing;\n  }\n}\n\n// vertical direction\n\n.@{checkbox-prefix-cls}-group-direction-vertical {\n  .@{checkbox-prefix-cls} {\n    display: flex;\n    margin-right: 0;\n    line-height: @checkbox-group-size-line-height_vertical;\n  }\n}\n"
  },
  {
    "path": "packages/web-vue/components/checkbox/style/index.ts",
    "content": "import '../../style/index.less';\nimport './index.less';\n"
  },
  {
    "path": "packages/web-vue/components/checkbox/style/token.less",
    "content": "@import '../../style/theme/index.less';\n\n@checkbox-prefix-cls: ~'@{prefix}-checkbox';\n\n@checkbox-mask-border-width: @border-2;\n@checkbox-mask-border-style: @border-solid;\n@checkbox-mask-border-radius: @radius-small;\n\n@checkbox-mask-height: 14px;\n@checkbox-mask-bg-height: @size-6;\n@checkbox-mask-bg-color-bg: @icon-hover-color-bg;\n\n@checkbox-mask-color-bg: var(~'@{arco-cssvars-prefix}-color-bg-2');\n@checkbox-mask-color-bg_checked: @color-primary-6;\n@checkbox-mask-color-bg_disabled: var(~'@{arco-cssvars-prefix}-color-fill-2');\n@checkbox-mask-color-bg_checked_disabled: var(~'@{arco-cssvars-prefix}-color-primary-light-3');\n\n@checkbox-mask-color-border: var(~'@{arco-cssvars-prefix}-color-fill-3');\n@checkbox-mask-color-border_hover: var(~'@{arco-cssvars-prefix}-color-fill-4');\n@checkbox-mask-color-border_checked: @color-transparent;\n@checkbox-mask-color-border_checked_disabled: @color-transparent;\n@checkbox-mask-color-border_disabled: var(~'@{arco-cssvars-prefix}-color-fill-3');\n\n@checkbox-color-text: var(~'@{arco-cssvars-prefix}-color-text-1');\n@checkbox-color-text_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');\n\n@checkbox-group-spacing: @spacing-7;\n@checkbox-text-mask-spacing: @spacing-4;\n@checkbox-text-font-size: @font-size-body-3;\n\n@checkbox-group-size-line-height_vertical: @size-8;\n@checkbox-size-check-icon: @size-2;\n@checkbox-color-check-icon: var(~'@{arco-cssvars-prefix}-color-white');\n@checkbox-color-check-icon_disabled: var(~'@{arco-cssvars-prefix}-color-fill-3');\n@checkbox-color-indeterminate-icon-width: 6px;\n@checkbox-color-indeterminate-icon-height: 2px;\n@checkbox-color-indeterminate-icon: var(~'@{arco-cssvars-prefix}-color-white');\n"
  },
  {
    "path": "packages/web-vue/components/collapse/CHANGELOG.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.54.6\n\n`2024-03-01`\n\n### 🐛 BugFix\n\n- resolve reserved property warning ([#2997](https://github.com/arco-design/arco-design-vue/pull/2997))\n\n\n## 2.38.0-beta.1\n\n`2022-10-14`\n\n### 🆎 TypeScript\n\n- Fix key attribute definition of `collapse-item` to allow number ([#1743](https://github.com/arco-design/arco-design-vue/pull/1743))\n\n\n## 2.37.4\n\n`2022-09-30`\n\n### 💅 Style\n\n- adjust the padding of collapse-item-content when expand-icon is on the right ([#1680](https://github.com/arco-design/arco-design-vue/pull/1680))\n\n\n## 2.33.0\n\n`2022-07-08`\n\n### 🆕 Feature\n\n- Supports custom expand icon ([#1344](https://github.com/arco-design/arco-design-vue/pull/1344))\n\n\n## 2.27.0\n\n`2022-05-13`\n\n### 🆕 Feature\n\n- Add destroyOnHide property, the default will not destroy the content when hidden ([#1100](https://github.com/arco-design/arco-design-vue/pull/1100))\n\n\n## 2.26.0\n\n`2022-04-29`\n\n### 🐛 BugFix\n\n- Fix `showExpandIcon` property invalid ([#1060](https://github.com/arco-design/arco-design-vue/pull/1060))\n\n\n## 2.10.0\n\n`2021-12-10`\n\n### 🆕 Feature\n\n- key adds support for number ([#358](https://github.com/arco-design/arco-design-vue/pull/358))\n\n\n## 2.0.3\n\n`2021-10-29`\n\n### 🐛 BugFix\n\n- Fix the problem that the `accordion` mode cannot be folded\n"
  },
  {
    "path": "packages/web-vue/components/collapse/CHANGELOG.zh-CN.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.54.6\n\n`2024-03-01`\n\n### 🐛 问题修复\n\n- 解决 `vue` 保留属性警告 ([#2997](https://github.com/arco-design/arco-design-vue/pull/2997))\n\n\n## 2.38.0-beta.1\n\n`2022-10-14`\n\n### 🆎 类型修正\n\n- 修复 `collapse-item` 的 key 属性定义，允许 number ([#1743](https://github.com/arco-design/arco-design-vue/pull/1743))\n\n\n## 2.37.4\n\n`2022-09-30`\n\n### 💅 样式更新\n\n- 当expand-icon在右侧时,调整collapse-item-content的padding ([#1680](https://github.com/arco-design/arco-design-vue/pull/1680))\n\n\n## 2.33.0\n\n`2022-07-08`\n\n### 🆕 新增功能\n\n- 支持自定义展开图标 ([#1344](https://github.com/arco-design/arco-design-vue/pull/1344))\n\n\n## 2.27.0\n\n`2022-05-13`\n\n### 🆕 新增功能\n\n- 增加 destroyOnHide 属性，默认不会在隐藏时销毁内容 ([#1100](https://github.com/arco-design/arco-design-vue/pull/1100))\n\n\n## 2.26.0\n\n`2022-04-29`\n\n### 🐛 问题修复\n\n- 修复 `showExpandIcon` 属性失效的问题 ([#1060](https://github.com/arco-design/arco-design-vue/pull/1060))\n\n\n## 2.10.0\n\n`2021-12-10`\n\n### 🆕 新增功能\n\n- key增加对number的支持 ([#358](https://github.com/arco-design/arco-design-vue/pull/358))\n\n\n## 2.0.3\n\n`2021-10-29`\n\n### 🐛 问题修复\n\n- 修复 `accordion` 模式不能收起的问题\n"
  },
  {
    "path": "packages/web-vue/components/collapse/README.en-US.md",
    "content": "```yaml\nmeta:\n  type: Component\n  category: Data Display\ntitle: Collapse\ndescription: The content area that can be collapsed/expanded.\n```\n\n*Auto translate by google.*\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/accordion.md\n\n@import ./__demo__/nested.md\n\n@import ./__demo__/border-less.md\n\n@import ./__demo__/extra.md\n\n@import ./__demo__/expand-icon.md\n\n@import ./__demo__/custom.md\n\n@import ./__demo__/icon-position.md\n\n@import ./__demo__/destroy.md\n\n## API\n\n\n### `<collapse>` Props\n\n|Attribute|Description|Type|Default|version|\n|---|---|---|:---:|:---|\n|active-key **(v-model)**|The `key` of the currently expanded panel|`(string \\| number)[]`|`-`||\n|default-active-key|The `key` of the panel expanded by default (uncontrolled mode)|`(string \\| number)[]`|`[]`||\n|accordion|Whether to enable accordion mode|`boolean`|`false`||\n|show-expand-icon|Whether to show the expand icon|`boolean`|`-`|2.33.0|\n|expand-icon-position|The location where the expand icon is displayed|`'left' \\| 'right'`|`'left'`||\n|bordered|Whether to show the border|`boolean`|`true`||\n|destroy-on-hide|Whether to destroy content when hidden|`boolean`|`false`|2.27.0|\n### `<collapse>` Events\n\n|Event Name|Description|Parameters|\n|---|---|---|\n|change|Emitted when the expanded panel changes|activeKey: `(string \\| number)[]`<br>ev: `Event`|\n\n\n\n\n### `<collapse-item>` Props\n\n|Attribute|Description|Type|Default|version|\n|---|---|---|:---:|:---|\n|header|The title of the panel|`string`|`-`||\n|disabled|Whether to disable|`boolean`|`false`||\n|show-expand-icon|Whether to show the expand icon|`boolean`|`true`||\n|destroy-on-hide|Whether to destroy content when hidden|`boolean`|`false`|2.27.0|\n### `<collapse-item>` Slots\n\n|Slot Name|Description|Parameters|version|\n|---|---|---|:---|\n|extra|Extra Content|-||\n|expand-icon|Expand icon|active: `boolean`<br>disabled: `boolean`<br>position: `'left' \\| 'right'`|2.33.0|\n|header|The title of the panel|-||\n\n\n\n## FAQ\n\n\n### The `key` attribute of `<CollapseItem>` components is required\nIn the `<Collapse>` component, each `<CollapseItem>` needs to specify a unique `key` attribute, and the `key` corresponding to the value in `activeKey`.\n"
  },
  {
    "path": "packages/web-vue/components/collapse/README.zh-CN.md",
    "content": "```yaml\nmeta:\n  type: 组件\n  category: 数据展示\ntitle: 折叠面板 Collapse\ndescription: 可以折叠 / 展开的内容区域。\n```\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/accordion.md\n\n@import ./__demo__/nested.md\n\n@import ./__demo__/border-less.md\n\n@import ./__demo__/extra.md\n\n@import ./__demo__/expand-icon.md\n\n@import ./__demo__/custom.md\n\n@import ./__demo__/icon-position.md\n\n@import ./__demo__/destroy.md\n\n## API\n\n\n### `<collapse>` Props\n\n|参数名|描述|类型|默认值|版本|\n|---|---|---|:---:|:---|\n|active-key **(v-model)**|当前展开的面板的 `key`|`(string \\| number)[]`|`-`||\n|default-active-key|默认展开的面板的 `key` （非受控模式）|`(string \\| number)[]`|`[]`||\n|accordion|是否开启手风琴模式|`boolean`|`false`||\n|show-expand-icon|是否显示展开图标|`boolean`|`-`|2.33.0|\n|expand-icon-position|展开图标显示的位置|`'left' \\| 'right'`|`'left'`||\n|bordered|是否显示边框|`boolean`|`true`||\n|destroy-on-hide|是否在隐藏时销毁内容|`boolean`|`false`|2.27.0|\n### `<collapse>` Events\n\n|事件名|描述|参数|\n|---|---|---|\n|change|展开的面板发生改变时触发|activeKey: `(string \\| number)[]`<br>ev: `Event`|\n\n\n\n\n### `<collapse-item>` Props\n\n|参数名|描述|类型|默认值|版本|\n|---|---|---|:---:|:---|\n|header|面板的标题|`string`|`-`||\n|disabled|是否禁用|`boolean`|`false`||\n|show-expand-icon|是否显示展开图标|`boolean`|`true`||\n|destroy-on-hide|是否在隐藏时销毁内容|`boolean`|`false`|2.27.0|\n### `<collapse-item>` Slots\n\n|插槽名|描述|参数|版本|\n|---|:---:|---|:---|\n|extra|额外内容|-||\n|expand-icon|展开图标|active: `boolean`<br>disabled: `boolean`<br>position: `'left' \\| 'right'`|2.33.0|\n|header|面板的标题|-||\n\n\n\n## FAQ\n\n### `<CollapseItem>` 组件的 `key` 属性为必填\n在 `<Collapse>` 组件中每个 `<CollapseItem>` 都需要指定唯一的 `key` 属性，`key` 对应 `activeKey` 中的值。\n\n"
  },
  {
    "path": "packages/web-vue/components/collapse/TEMPLATE.md",
    "content": "## zh-CN\n```yaml\nmeta:\n  type: 组件\n  category: 数据展示\ntitle: 折叠面板 Collapse\ndescription: 可以折叠 / 展开的内容区域。\n```\n---\n## en-US\n```yaml\nmeta:\n  type: Component\n  category: Data Display\ntitle: Collapse\ndescription: The content area that can be collapsed/expanded.\n```\n---\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/accordion.md\n\n@import ./__demo__/nested.md\n\n@import ./__demo__/border-less.md\n\n@import ./__demo__/extra.md\n\n@import ./__demo__/expand-icon.md\n\n@import ./__demo__/custom.md\n\n@import ./__demo__/icon-position.md\n\n@import ./__demo__/destroy.md\n\n## API\n\n%%API(collapse.vue)%%\n\n%%API(collapse-item.tsx)%%\n\n## FAQ\n\n## zh-CN\n### `<CollapseItem>` 组件的 `key` 属性为必填\n在 `<Collapse>` 组件中每个 `<CollapseItem>` 都需要指定唯一的 `key` 属性，`key` 对应 `activeKey` 中的值。\n\n---\n\n## en-US\n### The `key` attribute of `<CollapseItem>` components is required\nIn the `<Collapse>` component, each `<CollapseItem>` needs to specify a unique `key` attribute, and the `key` corresponding to the value in `activeKey`.\n\n---\n"
  },
  {
    "path": "packages/web-vue/components/collapse/__demo__/accordion.md",
    "content": "```yaml\ntitle:\n  zh-CN: 手风琴模式\n  en-US: Accordion\n```\n\n## zh-CN\n\n通过 `accordion` 开启手风琴模式，同时只能打开一个面板。\n\n---\n\n## en-US\n\nActivate the accordion mode with `accordion`, and only one panel can be opened at the same time.\n\n---\n\n```vue\n<template>\n  <a-collapse :default-active-key=\"[1]\" accordion>\n    <a-collapse-item header=\"Beijing Toutiao Technology Co., Ltd.\" key=\"1\">\n      <div>Beijing Toutiao Technology Co., Ltd.</div>\n    </a-collapse-item>\n    <a-collapse-item header=\"Beijing Toutiao Technology Co., Ltd.\" key=\"2\">\n      <div>Beijing Toutiao Technology Co., Ltd.</div>\n    </a-collapse-item>\n    <a-collapse-item header=\"Beijing Toutiao Technology Co., Ltd.\" key=\"3\">\n      <div>Beijing Toutiao Technology Co., Ltd.</div>\n    </a-collapse-item>\n  </a-collapse>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/collapse/__demo__/basic.md",
    "content": "```yaml\ntitle:\n  zh-CN: 基本用法\n  en-US: Basic Usage\n```\n\n## zh-CN\n\n用于将复杂的内容区域分组和隐藏，可折叠或展开。默认可以展开多个面板。\n\n---\n\n## en-US\n\nUsed to group and hide complex content areas, and can be collapsed or expanded. Multiple panels can be expanded by default.\n\n---\n\n```vue\n<template>\n  <a-collapse :default-active-key=\"['1', 2]\">\n    <a-collapse-item header=\"Beijing Toutiao Technology Co., Ltd.\" key=\"1\">\n      <div>Beijing Toutiao Technology Co., Ltd.</div>\n      <div>Beijing Toutiao Technology Co., Ltd.</div>\n      <div>Beijing Toutiao Technology Co., Ltd.</div>\n    </a-collapse-item>\n    <a-collapse-item header=\"Beijing Toutiao Technology Co., Ltd.\" :key=\"2\" disabled>\n      <div>Beijing Toutiao Technology Co., Ltd.</div>\n      <div>Beijing Toutiao Technology Co., Ltd.</div>\n      <div>Beijing Toutiao Technology Co., Ltd.</div>\n    </a-collapse-item>\n    <a-collapse-item header=\"Beijing Toutiao Technology Co., Ltd.\" key=\"3\">\n      <div>Beijing Toutiao Technology Co., Ltd.</div>\n      <div>Beijing Toutiao Technology Co., Ltd.</div>\n      <div>Beijing Toutiao Technology Co., Ltd.</div>\n    </a-collapse-item>\n  </a-collapse>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/collapse/__demo__/border-less.md",
    "content": "```yaml\ntitle:\n  zh-CN: 无边框模式\n  en-US: Border less\n```\n\n## zh-CN\n\n通过设置 `bordered=\"false\"` 隐藏边框。\n\n---\n\n## en-US\n\nHide the border by setting `bordered=\"false\"`.\n\n---\n\n```vue\n<template>\n  <a-collapse :default-active-key=\"['1']\" :bordered=\"false\">\n    <a-collapse-item header=\"Beijing Toutiao Technology Co., Ltd.\" key=\"1\">\n      <div>Beijing Toutiao Technology Co., Ltd.</div>\n      <div>Beijing Toutiao Technology Co., Ltd.</div>\n      <div>Beijing Toutiao Technology Co., Ltd.</div>\n    </a-collapse-item>\n    <a-collapse-item header=\"Beijing Toutiao Technology Co., Ltd.\" key=\"2\" disabled>\n      <div>Beijing Toutiao Technology Co., Ltd.</div>\n      <div>Beijing Toutiao Technology Co., Ltd.</div>\n      <div>Beijing Toutiao Technology Co., Ltd.</div>\n    </a-collapse-item>\n    <a-collapse-item header=\"Beijing Toutiao Technology Co., Ltd.\" key=\"3\">\n      <div>Beijing Toutiao Technology Co., Ltd.</div>\n      <div>Beijing Toutiao Technology Co., Ltd.</div>\n      <div>Beijing Toutiao Technology Co., Ltd.</div>\n    </a-collapse-item>\n  </a-collapse>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/collapse/__demo__/custom.md",
    "content": "```yaml\ntitle:\n  zh-CN: 自定义样式\n  en-US: Custom style\n```\n\n## zh-CN\n\n自定义面板样式。\n\n---\n\n## en-US\n\ncustom panels styles.\n\n---\n\n```vue\n<template>\n  <a-collapse :default-active-key=\"['1', 2]\" :bordered=\"false\">\n    <a-collapse-item header=\"Beijing Toutiao Technology Co., Ltd.\" :style=\"customStyle\" key=\"1\">\n      <div>Beijing Toutiao Technology Co., Ltd.</div>\n      <div>Beijing Toutiao Technology Co., Ltd.</div>\n    </a-collapse-item>\n    <a-collapse-item header=\"Beijing Toutiao Technology Co., Ltd.\" :style=\"customStyle\" :key=\"2\">\n      <div>Beijing Toutiao Technology Co., Ltd.</div>\n      <div>Beijing Toutiao Technology Co., Ltd.</div>\n    </a-collapse-item>\n    <a-collapse-item header=\"Beijing Toutiao Technology Co., Ltd.\" :style=\"customStyle\" key=\"3\">\n      <div>Beijing Toutiao Technology Co., Ltd.</div>\n      <div>Beijing Toutiao Technology Co., Ltd.</div>\n    </a-collapse-item>\n  </a-collapse>\n</template>\n\n<script>\nexport default {\n  setup() {\n    const customStyle = {\n      borderRadius: '6px',\n      marginBottom: '18px',\n      border: 'none',\n      overflow: 'hidden',\n    }\n\n    return {\n      customStyle\n    }\n  }\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/collapse/__demo__/destroy.md",
    "content": "```yaml\ntitle:\n  zh-CN: 隐藏时销毁\n  en-US: Destroy On Hide\n```\n\n## zh-CN\n\n通过设置 `destroy-on-hide` 可以让面板内容在隐藏时销毁。\n\n---\n\n## en-US\n\nBy setting `destroy-on-hide` the panel contents can be destroyed when hidden.\n\n---\n\n```vue\n<template>\n  <a-collapse :default-active-key=\"['1', 2]\" destroy-on-hide>\n    <a-collapse-item header=\"Beijing Toutiao Technology Co., Ltd.\" key=\"1\">\n      <div>Beijing Toutiao Technology Co., Ltd.</div>\n      <div>Beijing Toutiao Technology Co., Ltd.</div>\n      <div>Beijing Toutiao Technology Co., Ltd.</div>\n    </a-collapse-item>\n    <a-collapse-item header=\"Beijing Toutiao Technology Co., Ltd.\" :key=\"2\">\n      <div>Beijing Toutiao Technology Co., Ltd.</div>\n      <div>Beijing Toutiao Technology Co., Ltd.</div>\n      <div>Beijing Toutiao Technology Co., Ltd.</div>\n    </a-collapse-item>\n    <a-collapse-item header=\"Beijing Toutiao Technology Co., Ltd.\" key=\"3\" :show-expand-icon=\"false\">\n      <div>Beijing Toutiao Technology Co., Ltd.</div>\n      <div>Beijing Toutiao Technology Co., Ltd.</div>\n      <div>Beijing Toutiao Technology Co., Ltd.</div>\n    </a-collapse-item>\n  </a-collapse>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/collapse/__demo__/expand-icon.md",
    "content": "```yaml\ntitle:\n  zh-CN: 展开图标\n  en-US: Custom expand icon\n```\n\n## zh-CN\n\n为展开项自定义展开图标\n\n---\n\n## en-US\n\nCustomize the expand icon for `collapse-item`\n\n---\n\n```vue\n<template>\n  <a-collapse :default-active-key=\"['1', 2]\">\n    <template #expand-icon=\"{ active }\">\n      <icon-face-smile-fill v-if=\"active\"/>\n      <icon-face-frown-fill v-else/>\n    </template>\n    <a-collapse-item header=\"Beijing Toutiao Technology Co., Ltd.\" key=\"1\">\n      <template #expand-icon=\"{ active }\">\n        <icon-double-down v-if=\"active\"/>\n        <icon-double-right v-else/>\n      </template>\n      <div>Beijing Toutiao Technology Co., Ltd.</div>\n    </a-collapse-item>\n    <a-collapse-item header=\"Beijing Toutiao Technology Co., Ltd.\" :key=\"2\">\n      <div>Beijing Toutiao Technology Co., Ltd.</div>\n    </a-collapse-item>\n    <a-collapse-item header=\"Beijing Toutiao Technology Co., Ltd.\" key=\"3\">\n      <div>Beijing Toutiao Technology Co., Ltd.</div>\n    </a-collapse-item>\n  </a-collapse>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/collapse/__demo__/extra.md",
    "content": "```yaml\ntitle:\n  zh-CN: 额外节点\n  en-US: Extra slot\n```\n\n## zh-CN\n\n通过 `extra` 可以设置额外节点。`extra` 单击可以以设置 `stop` 修饰符，以阻止当前项目展开。\n\n---\n\n## en-US\n\nThe extra node on the far right can be set by `extra`. `extra` click to set `stop` modifier to prevent the current item from expanding.\n\n---\n\n```vue\n<template>\n  <a-collapse>\n    <a-collapse-item header=\"Beijing Toutiao Technology Co., Ltd.\" key=\"1\">\n      <template #extra>\n        <icon-copy />\n      </template>\n      <div>Beijing Toutiao Technology Co., Ltd.</div>\n      <div>Beijing Toutiao Technology Co., Ltd.</div>\n    </a-collapse-item>\n    <a-collapse-item header=\"Beijing Toutiao Technology Co., Ltd.\" :key=\"2\">\n      <template #extra>\n        <a-button type=\"primary\" size=\"mini\" @click.stop=\"sayHello\">hello</a-button>\n      </template>\n      <div>Beijing Toutiao Technology Co., Ltd.</div>\n      <div>Beijing Toutiao Technology Co., Ltd.</div>\n    </a-collapse-item>\n    <a-collapse-item header=\"Beijing Toutiao Technology Co., Ltd.\" key=\"3\">\n      <template #extra>\n        <a-tag size=\"small\">city</a-tag>\n      </template>\n      <div>Beijing Toutiao Technology Co., Ltd.</div>\n      <div>Beijing Toutiao Technology Co., Ltd.</div>\n    </a-collapse-item>\n  </a-collapse>\n</template>\n\n<script>\nimport { Message } from '@arco-design/web-vue';\n\nexport default {\n  setup() {\n    const sayHello = () => {\n      Message.info('hello');\n    };\n\n    return {\n      sayHello,\n    };\n  },\n};\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/collapse/__demo__/icon-position.md",
    "content": "```yaml\ntitle:\n  zh-CN: 展开图标位置\n  en-US: Expand icon position\n```\n\n## zh-CN\n\n通过 `expand-icon-position` 属性设置展开图标的位置。\n\n---\n\n## en-US\n\nSet the position of the expanded icon through the `expand-icon-position` property.\n\n---\n\n```vue\n<template>\n  <a-space direction=\"vertical\" :style=\"{ width: '100%' }\">\n    <a-space>\n      <a-radio-group type=\"button\" v-model=\"position\">\n        <a-radio value=\"left\">Left</a-radio>\n        <a-radio value=\"right\">Right</a-radio>\n      </a-radio-group>\n      <a-checkbox v-model=\"hideIcon\">Hide Expand Icon</a-checkbox>\n    </a-space>\n    <a-collapse\n      :default-active-key=\"['1']\"\n      :expand-icon-position=\"position\"\n      :show-expand-icon=\"!hideIcon\"\n    >\n      <a-collapse-item header=\"Beijing Toutiao Technology Co., Ltd.\" key=\"1\">\n        <template #expand-icon>\n          <icon-plus />\n        </template>\n        <template #extra>\n          <a-tag size=\"small\">city</a-tag>\n        </template>\n        <div>Beijing Toutiao Technology Co., Ltd.</div>\n        <div>Beijing Toutiao Technology Co., Ltd.</div>\n        <div>Beijing Toutiao Technology Co., Ltd.</div>\n      </a-collapse-item>\n      <a-collapse-item\n        header=\"Beijing Toutiao Technology Co., Ltd.\"\n        key=\"2\"\n        disabled\n      >\n        <div>Beijing Toutiao Technology Co., Ltd.</div>\n        <div>Beijing Toutiao Technology Co., Ltd.</div>\n        <div>Beijing Toutiao Technology Co., Ltd.</div>\n      </a-collapse-item>\n      <a-collapse-item header=\"Beijing Toutiao Technology Co., Ltd.\" key=\"3\">\n        <div>Beijing Toutiao Technology Co., Ltd.</div>\n        <div>Beijing Toutiao Technology Co., Ltd.</div>\n        <div>Beijing Toutiao Technology Co., Ltd.</div>\n      </a-collapse-item>\n    </a-collapse>\n  </a-space>\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n  setup() {\n    const position = ref('left');\n    const hideIcon = ref(false);\n\n    return {\n      position,\n      hideIcon,\n    };\n  },\n};\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/collapse/__demo__/nested.md",
    "content": "```yaml\ntitle:\n  zh-CN: 嵌套面板\n  en-US: Nested panels\n```\n\n## zh-CN\n\n面板多层嵌套。\n\n---\n\n## en-US\n\nPanels are nested at multiple levels.\n\n---\n\n```vue\n<template>\n  <a-collapse :default-active-key=\"['1', 2]\" destroy-on-hide>\n    <a-collapse-item header=\"Beijing Toutiao Technology Co., Ltd.\" key=\"1\">\n      <a-collapse :default-active-key=\"['1.1']\" destroy-on-hide>\n        <a-collapse-item header=\"Beijing Toutiao Technology Co., Ltd.\" key=\"1.1\">\n          <div>Beijing Toutiao Technology Co., Ltd.</div>\n        </a-collapse-item>\n        <a-collapse-item header=\"Beijing Toutiao Technology Co., Ltd.\" key=\"1.2\">\n          <div>Beijing Toutiao Technology Co., Ltd.</div>\n        </a-collapse-item>\n      </a-collapse>\n    </a-collapse-item>\n    <a-collapse-item header=\"Beijing Toutiao Technology Co., Ltd.\" :key=\"2\">\n      <div>Beijing Toutiao Technology Co., Ltd.</div>\n    </a-collapse-item>\n    <a-collapse-item header=\"Beijing Toutiao Technology Co., Ltd.\" key=\"3\">\n      <div>Beijing Toutiao Technology Co., Ltd.</div>\n    </a-collapse-item>\n  </a-collapse>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/collapse/__test__/__snapshots__/demo.test.ts.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`<collapse> demo: render [accordion] correctly 1`] = `\n\"<div class=\\\\\"arco-collapse\\\\\">\n  <div class=\\\\\"arco-collapse-item\\\\\">\n    <div role=\\\\\"button\\\\\" aria-disabled=\\\\\"false\\\\\" aria-expanded=\\\\\"false\\\\\" tabindex=\\\\\"0\\\\\" class=\\\\\"arco-collapse-item-header arco-collapse-item-header-left\\\\\"><span class=\\\\\"arco-icon-hover arco-collapse-item-icon-hover\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-caret-right arco-collapse-item-expand-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M34.829 23.063c.6.48.6 1.394 0 1.874L17.949 38.44c-.785.629-1.949.07-1.949-.937V10.497c0-1.007 1.164-1.566 1.95-.937l16.879 13.503Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path></svg></span>\n      <div class=\\\\\"arco-collapse-item-header-title\\\\\">Beijing Toutiao Technology Co., Ltd.</div>\n      <!---->\n    </div>\n    <transition-stub name=\\\\\"collapse-slider\\\\\" appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\">\n      <div role=\\\\\"region\\\\\" class=\\\\\"arco-collapse-item-content\\\\\" style=\\\\\"display: none;\\\\\">\n        <div class=\\\\\"arco-collapse-item-content-box\\\\\">\n          <div>Beijing Toutiao Technology Co., Ltd.</div>\n        </div>\n      </div>\n    </transition-stub>\n  </div>\n  <div class=\\\\\"arco-collapse-item\\\\\">\n    <div role=\\\\\"button\\\\\" aria-disabled=\\\\\"false\\\\\" aria-expanded=\\\\\"false\\\\\" tabindex=\\\\\"0\\\\\" class=\\\\\"arco-collapse-item-header arco-collapse-item-header-left\\\\\"><span class=\\\\\"arco-icon-hover arco-collapse-item-icon-hover\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-caret-right arco-collapse-item-expand-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M34.829 23.063c.6.48.6 1.394 0 1.874L17.949 38.44c-.785.629-1.949.07-1.949-.937V10.497c0-1.007 1.164-1.566 1.95-.937l16.879 13.503Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path></svg></span>\n      <div class=\\\\\"arco-collapse-item-header-title\\\\\">Beijing Toutiao Technology Co., Ltd.</div>\n      <!---->\n    </div>\n    <transition-stub name=\\\\\"collapse-slider\\\\\" appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\">\n      <div role=\\\\\"region\\\\\" class=\\\\\"arco-collapse-item-content\\\\\" style=\\\\\"display: none;\\\\\">\n        <div class=\\\\\"arco-collapse-item-content-box\\\\\">\n          <div>Beijing Toutiao Technology Co., Ltd.</div>\n        </div>\n      </div>\n    </transition-stub>\n  </div>\n  <div class=\\\\\"arco-collapse-item\\\\\">\n    <div role=\\\\\"button\\\\\" aria-disabled=\\\\\"false\\\\\" aria-expanded=\\\\\"false\\\\\" tabindex=\\\\\"0\\\\\" class=\\\\\"arco-collapse-item-header arco-collapse-item-header-left\\\\\"><span class=\\\\\"arco-icon-hover arco-collapse-item-icon-hover\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-caret-right arco-collapse-item-expand-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M34.829 23.063c.6.48.6 1.394 0 1.874L17.949 38.44c-.785.629-1.949.07-1.949-.937V10.497c0-1.007 1.164-1.566 1.95-.937l16.879 13.503Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path></svg></span>\n      <div class=\\\\\"arco-collapse-item-header-title\\\\\">Beijing Toutiao Technology Co., Ltd.</div>\n      <!---->\n    </div>\n    <transition-stub name=\\\\\"collapse-slider\\\\\" appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\">\n      <div role=\\\\\"region\\\\\" class=\\\\\"arco-collapse-item-content\\\\\" style=\\\\\"display: none;\\\\\">\n        <div class=\\\\\"arco-collapse-item-content-box\\\\\">\n          <div>Beijing Toutiao Technology Co., Ltd.</div>\n        </div>\n      </div>\n    </transition-stub>\n  </div>\n</div>\"\n`;\n\nexports[`<collapse> demo: render [basic] correctly 1`] = `\n\"<div class=\\\\\"arco-collapse\\\\\">\n  <div class=\\\\\"arco-collapse-item arco-collapse-item-active\\\\\">\n    <div role=\\\\\"button\\\\\" aria-disabled=\\\\\"false\\\\\" aria-expanded=\\\\\"true\\\\\" tabindex=\\\\\"0\\\\\" class=\\\\\"arco-collapse-item-header arco-collapse-item-header-left\\\\\"><span class=\\\\\"arco-icon-hover arco-collapse-item-icon-hover\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-caret-right arco-collapse-item-expand-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M34.829 23.063c.6.48.6 1.394 0 1.874L17.949 38.44c-.785.629-1.949.07-1.949-.937V10.497c0-1.007 1.164-1.566 1.95-.937l16.879 13.503Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path></svg></span>\n      <div class=\\\\\"arco-collapse-item-header-title\\\\\">Beijing Toutiao Technology Co., Ltd.</div>\n      <!---->\n    </div>\n    <transition-stub name=\\\\\"collapse-slider\\\\\" appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\">\n      <div role=\\\\\"region\\\\\" class=\\\\\"arco-collapse-item-content arco-collapse-item-content-expend\\\\\">\n        <div class=\\\\\"arco-collapse-item-content-box\\\\\">\n          <div>Beijing Toutiao Technology Co., Ltd.</div>\n          <div>Beijing Toutiao Technology Co., Ltd.</div>\n          <div>Beijing Toutiao Technology Co., Ltd.</div>\n        </div>\n      </div>\n    </transition-stub>\n  </div>\n  <div class=\\\\\"arco-collapse-item arco-collapse-item-active\\\\\">\n    <div role=\\\\\"button\\\\\" aria-disabled=\\\\\"true\\\\\" aria-expanded=\\\\\"true\\\\\" tabindex=\\\\\"0\\\\\" class=\\\\\"arco-collapse-item-header arco-collapse-item-header-left arco-collapse-item-header-disabled\\\\\"><span class=\\\\\"arco-icon-hover arco-collapse-item-icon-hover arco-icon-hover-disabled\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-caret-right arco-collapse-item-expand-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M34.829 23.063c.6.48.6 1.394 0 1.874L17.949 38.44c-.785.629-1.949.07-1.949-.937V10.497c0-1.007 1.164-1.566 1.95-.937l16.879 13.503Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path></svg></span>\n      <div class=\\\\\"arco-collapse-item-header-title\\\\\">Beijing Toutiao Technology Co., Ltd.</div>\n      <!---->\n    </div>\n    <transition-stub name=\\\\\"collapse-slider\\\\\" appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\">\n      <div role=\\\\\"region\\\\\" class=\\\\\"arco-collapse-item-content arco-collapse-item-content-expend\\\\\">\n        <div class=\\\\\"arco-collapse-item-content-box\\\\\">\n          <div>Beijing Toutiao Technology Co., Ltd.</div>\n          <div>Beijing Toutiao Technology Co., Ltd.</div>\n          <div>Beijing Toutiao Technology Co., Ltd.</div>\n        </div>\n      </div>\n    </transition-stub>\n  </div>\n  <div class=\\\\\"arco-collapse-item\\\\\">\n    <div role=\\\\\"button\\\\\" aria-disabled=\\\\\"false\\\\\" aria-expanded=\\\\\"false\\\\\" tabindex=\\\\\"0\\\\\" class=\\\\\"arco-collapse-item-header arco-collapse-item-header-left\\\\\"><span class=\\\\\"arco-icon-hover arco-collapse-item-icon-hover\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-caret-right arco-collapse-item-expand-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M34.829 23.063c.6.48.6 1.394 0 1.874L17.949 38.44c-.785.629-1.949.07-1.949-.937V10.497c0-1.007 1.164-1.566 1.95-.937l16.879 13.503Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path></svg></span>\n      <div class=\\\\\"arco-collapse-item-header-title\\\\\">Beijing Toutiao Technology Co., Ltd.</div>\n      <!---->\n    </div>\n    <transition-stub name=\\\\\"collapse-slider\\\\\" appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\">\n      <div role=\\\\\"region\\\\\" class=\\\\\"arco-collapse-item-content\\\\\" style=\\\\\"display: none;\\\\\">\n        <div class=\\\\\"arco-collapse-item-content-box\\\\\">\n          <div>Beijing Toutiao Technology Co., Ltd.</div>\n          <div>Beijing Toutiao Technology Co., Ltd.</div>\n          <div>Beijing Toutiao Technology Co., Ltd.</div>\n        </div>\n      </div>\n    </transition-stub>\n  </div>\n</div>\"\n`;\n\nexports[`<collapse> demo: render [border-less] correctly 1`] = `\n\"<div class=\\\\\"arco-collapse arco-collapse-borderless\\\\\">\n  <div class=\\\\\"arco-collapse-item arco-collapse-item-active\\\\\">\n    <div role=\\\\\"button\\\\\" aria-disabled=\\\\\"false\\\\\" aria-expanded=\\\\\"true\\\\\" tabindex=\\\\\"0\\\\\" class=\\\\\"arco-collapse-item-header arco-collapse-item-header-left\\\\\"><span class=\\\\\"arco-icon-hover arco-collapse-item-icon-hover\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-caret-right arco-collapse-item-expand-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M34.829 23.063c.6.48.6 1.394 0 1.874L17.949 38.44c-.785.629-1.949.07-1.949-.937V10.497c0-1.007 1.164-1.566 1.95-.937l16.879 13.503Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path></svg></span>\n      <div class=\\\\\"arco-collapse-item-header-title\\\\\">Beijing Toutiao Technology Co., Ltd.</div>\n      <!---->\n    </div>\n    <transition-stub name=\\\\\"collapse-slider\\\\\" appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\">\n      <div role=\\\\\"region\\\\\" class=\\\\\"arco-collapse-item-content arco-collapse-item-content-expend\\\\\">\n        <div class=\\\\\"arco-collapse-item-content-box\\\\\">\n          <div>Beijing Toutiao Technology Co., Ltd.</div>\n          <div>Beijing Toutiao Technology Co., Ltd.</div>\n          <div>Beijing Toutiao Technology Co., Ltd.</div>\n        </div>\n      </div>\n    </transition-stub>\n  </div>\n  <div class=\\\\\"arco-collapse-item\\\\\">\n    <div role=\\\\\"button\\\\\" aria-disabled=\\\\\"true\\\\\" aria-expanded=\\\\\"false\\\\\" tabindex=\\\\\"0\\\\\" class=\\\\\"arco-collapse-item-header arco-collapse-item-header-left arco-collapse-item-header-disabled\\\\\"><span class=\\\\\"arco-icon-hover arco-collapse-item-icon-hover arco-icon-hover-disabled\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-caret-right arco-collapse-item-expand-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M34.829 23.063c.6.48.6 1.394 0 1.874L17.949 38.44c-.785.629-1.949.07-1.949-.937V10.497c0-1.007 1.164-1.566 1.95-.937l16.879 13.503Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path></svg></span>\n      <div class=\\\\\"arco-collapse-item-header-title\\\\\">Beijing Toutiao Technology Co., Ltd.</div>\n      <!---->\n    </div>\n    <transition-stub name=\\\\\"collapse-slider\\\\\" appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\">\n      <div role=\\\\\"region\\\\\" class=\\\\\"arco-collapse-item-content\\\\\" style=\\\\\"display: none;\\\\\">\n        <div class=\\\\\"arco-collapse-item-content-box\\\\\">\n          <div>Beijing Toutiao Technology Co., Ltd.</div>\n          <div>Beijing Toutiao Technology Co., Ltd.</div>\n          <div>Beijing Toutiao Technology Co., Ltd.</div>\n        </div>\n      </div>\n    </transition-stub>\n  </div>\n  <div class=\\\\\"arco-collapse-item\\\\\">\n    <div role=\\\\\"button\\\\\" aria-disabled=\\\\\"false\\\\\" aria-expanded=\\\\\"false\\\\\" tabindex=\\\\\"0\\\\\" class=\\\\\"arco-collapse-item-header arco-collapse-item-header-left\\\\\"><span class=\\\\\"arco-icon-hover arco-collapse-item-icon-hover\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-caret-right arco-collapse-item-expand-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M34.829 23.063c.6.48.6 1.394 0 1.874L17.949 38.44c-.785.629-1.949.07-1.949-.937V10.497c0-1.007 1.164-1.566 1.95-.937l16.879 13.503Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path></svg></span>\n      <div class=\\\\\"arco-collapse-item-header-title\\\\\">Beijing Toutiao Technology Co., Ltd.</div>\n      <!---->\n    </div>\n    <transition-stub name=\\\\\"collapse-slider\\\\\" appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\">\n      <div role=\\\\\"region\\\\\" class=\\\\\"arco-collapse-item-content\\\\\" style=\\\\\"display: none;\\\\\">\n        <div class=\\\\\"arco-collapse-item-content-box\\\\\">\n          <div>Beijing Toutiao Technology Co., Ltd.</div>\n          <div>Beijing Toutiao Technology Co., Ltd.</div>\n          <div>Beijing Toutiao Technology Co., Ltd.</div>\n        </div>\n      </div>\n    </transition-stub>\n  </div>\n</div>\"\n`;\n\nexports[`<collapse> demo: render [custom] correctly 1`] = `\n\"<div class=\\\\\"arco-collapse arco-collapse-borderless\\\\\">\n  <div class=\\\\\"arco-collapse-item arco-collapse-item-active\\\\\" style=\\\\\"border-radius: 6px; margin-bottom: 18px; overflow: hidden;\\\\\">\n    <div role=\\\\\"button\\\\\" aria-disabled=\\\\\"false\\\\\" aria-expanded=\\\\\"true\\\\\" tabindex=\\\\\"0\\\\\" class=\\\\\"arco-collapse-item-header arco-collapse-item-header-left\\\\\"><span class=\\\\\"arco-icon-hover arco-collapse-item-icon-hover\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-caret-right arco-collapse-item-expand-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M34.829 23.063c.6.48.6 1.394 0 1.874L17.949 38.44c-.785.629-1.949.07-1.949-.937V10.497c0-1.007 1.164-1.566 1.95-.937l16.879 13.503Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path></svg></span>\n      <div class=\\\\\"arco-collapse-item-header-title\\\\\">Beijing Toutiao Technology Co., Ltd.</div>\n      <!---->\n    </div>\n    <transition-stub name=\\\\\"collapse-slider\\\\\" appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\">\n      <div role=\\\\\"region\\\\\" class=\\\\\"arco-collapse-item-content arco-collapse-item-content-expend\\\\\">\n        <div class=\\\\\"arco-collapse-item-content-box\\\\\">\n          <div>Beijing Toutiao Technology Co., Ltd.</div>\n          <div>Beijing Toutiao Technology Co., Ltd.</div>\n        </div>\n      </div>\n    </transition-stub>\n  </div>\n  <div class=\\\\\"arco-collapse-item arco-collapse-item-active\\\\\" style=\\\\\"border-radius: 6px; margin-bottom: 18px; overflow: hidden;\\\\\">\n    <div role=\\\\\"button\\\\\" aria-disabled=\\\\\"false\\\\\" aria-expanded=\\\\\"true\\\\\" tabindex=\\\\\"0\\\\\" class=\\\\\"arco-collapse-item-header arco-collapse-item-header-left\\\\\"><span class=\\\\\"arco-icon-hover arco-collapse-item-icon-hover\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-caret-right arco-collapse-item-expand-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M34.829 23.063c.6.48.6 1.394 0 1.874L17.949 38.44c-.785.629-1.949.07-1.949-.937V10.497c0-1.007 1.164-1.566 1.95-.937l16.879 13.503Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path></svg></span>\n      <div class=\\\\\"arco-collapse-item-header-title\\\\\">Beijing Toutiao Technology Co., Ltd.</div>\n      <!---->\n    </div>\n    <transition-stub name=\\\\\"collapse-slider\\\\\" appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\">\n      <div role=\\\\\"region\\\\\" class=\\\\\"arco-collapse-item-content arco-collapse-item-content-expend\\\\\">\n        <div class=\\\\\"arco-collapse-item-content-box\\\\\">\n          <div>Beijing Toutiao Technology Co., Ltd.</div>\n          <div>Beijing Toutiao Technology Co., Ltd.</div>\n        </div>\n      </div>\n    </transition-stub>\n  </div>\n  <div class=\\\\\"arco-collapse-item\\\\\" style=\\\\\"border-radius: 6px; margin-bottom: 18px; overflow: hidden;\\\\\">\n    <div role=\\\\\"button\\\\\" aria-disabled=\\\\\"false\\\\\" aria-expanded=\\\\\"false\\\\\" tabindex=\\\\\"0\\\\\" class=\\\\\"arco-collapse-item-header arco-collapse-item-header-left\\\\\"><span class=\\\\\"arco-icon-hover arco-collapse-item-icon-hover\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-caret-right arco-collapse-item-expand-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M34.829 23.063c.6.48.6 1.394 0 1.874L17.949 38.44c-.785.629-1.949.07-1.949-.937V10.497c0-1.007 1.164-1.566 1.95-.937l16.879 13.503Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path></svg></span>\n      <div class=\\\\\"arco-collapse-item-header-title\\\\\">Beijing Toutiao Technology Co., Ltd.</div>\n      <!---->\n    </div>\n    <transition-stub name=\\\\\"collapse-slider\\\\\" appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\">\n      <div role=\\\\\"region\\\\\" class=\\\\\"arco-collapse-item-content\\\\\" style=\\\\\"display: none;\\\\\">\n        <div class=\\\\\"arco-collapse-item-content-box\\\\\">\n          <div>Beijing Toutiao Technology Co., Ltd.</div>\n          <div>Beijing Toutiao Technology Co., Ltd.</div>\n        </div>\n      </div>\n    </transition-stub>\n  </div>\n</div>\"\n`;\n\nexports[`<collapse> demo: render [destroy] correctly 1`] = `\n\"<div class=\\\\\"arco-collapse\\\\\">\n  <div class=\\\\\"arco-collapse-item arco-collapse-item-active\\\\\">\n    <div role=\\\\\"button\\\\\" aria-disabled=\\\\\"false\\\\\" aria-expanded=\\\\\"true\\\\\" tabindex=\\\\\"0\\\\\" class=\\\\\"arco-collapse-item-header arco-collapse-item-header-left\\\\\"><span class=\\\\\"arco-icon-hover arco-collapse-item-icon-hover\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-caret-right arco-collapse-item-expand-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M34.829 23.063c.6.48.6 1.394 0 1.874L17.949 38.44c-.785.629-1.949.07-1.949-.937V10.497c0-1.007 1.164-1.566 1.95-.937l16.879 13.503Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path></svg></span>\n      <div class=\\\\\"arco-collapse-item-header-title\\\\\">Beijing Toutiao Technology Co., Ltd.</div>\n      <!---->\n    </div>\n    <transition-stub name=\\\\\"collapse-slider\\\\\" appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\">\n      <div role=\\\\\"region\\\\\" class=\\\\\"arco-collapse-item-content arco-collapse-item-content-expend\\\\\">\n        <div class=\\\\\"arco-collapse-item-content-box\\\\\">\n          <div>Beijing Toutiao Technology Co., Ltd.</div>\n          <div>Beijing Toutiao Technology Co., Ltd.</div>\n          <div>Beijing Toutiao Technology Co., Ltd.</div>\n        </div>\n      </div>\n    </transition-stub>\n  </div>\n  <div class=\\\\\"arco-collapse-item arco-collapse-item-active\\\\\">\n    <div role=\\\\\"button\\\\\" aria-disabled=\\\\\"false\\\\\" aria-expanded=\\\\\"true\\\\\" tabindex=\\\\\"0\\\\\" class=\\\\\"arco-collapse-item-header arco-collapse-item-header-left\\\\\"><span class=\\\\\"arco-icon-hover arco-collapse-item-icon-hover\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-caret-right arco-collapse-item-expand-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M34.829 23.063c.6.48.6 1.394 0 1.874L17.949 38.44c-.785.629-1.949.07-1.949-.937V10.497c0-1.007 1.164-1.566 1.95-.937l16.879 13.503Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path></svg></span>\n      <div class=\\\\\"arco-collapse-item-header-title\\\\\">Beijing Toutiao Technology Co., Ltd.</div>\n      <!---->\n    </div>\n    <transition-stub name=\\\\\"collapse-slider\\\\\" appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\">\n      <div role=\\\\\"region\\\\\" class=\\\\\"arco-collapse-item-content arco-collapse-item-content-expend\\\\\">\n        <div class=\\\\\"arco-collapse-item-content-box\\\\\">\n          <div>Beijing Toutiao Technology Co., Ltd.</div>\n          <div>Beijing Toutiao Technology Co., Ltd.</div>\n          <div>Beijing Toutiao Technology Co., Ltd.</div>\n        </div>\n      </div>\n    </transition-stub>\n  </div>\n  <div class=\\\\\"arco-collapse-item\\\\\">\n    <div role=\\\\\"button\\\\\" aria-disabled=\\\\\"false\\\\\" aria-expanded=\\\\\"false\\\\\" tabindex=\\\\\"0\\\\\" class=\\\\\"arco-collapse-item-header arco-collapse-item-header-left\\\\\">\n      <!---->\n      <div class=\\\\\"arco-collapse-item-header-title\\\\\">Beijing Toutiao Technology Co., Ltd.</div>\n      <!---->\n    </div>\n    <transition-stub name=\\\\\"collapse-slider\\\\\" appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\">\n      <div role=\\\\\"region\\\\\" class=\\\\\"arco-collapse-item-content\\\\\" style=\\\\\"display: none;\\\\\">\n        <!---->\n      </div>\n    </transition-stub>\n  </div>\n</div>\"\n`;\n\nexports[`<collapse> demo: render [expand-icon] correctly 1`] = `\n\"<div class=\\\\\"arco-collapse\\\\\">\n  <div class=\\\\\"arco-collapse-item arco-collapse-item-active\\\\\">\n    <div role=\\\\\"button\\\\\" aria-disabled=\\\\\"false\\\\\" aria-expanded=\\\\\"true\\\\\" tabindex=\\\\\"0\\\\\" class=\\\\\"arco-collapse-item-header arco-collapse-item-header-left\\\\\"><span class=\\\\\"arco-icon-hover arco-collapse-item-icon-hover\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-double-down\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"m9.9 11.142 14.143 14.142 14.142-14.142M9.9 22.456l14.143 14.142 14.142-14.142\\\\\"></path></svg></span>\n      <div class=\\\\\"arco-collapse-item-header-title\\\\\">Beijing Toutiao Technology Co., Ltd.</div>\n      <!---->\n    </div>\n    <transition-stub name=\\\\\"collapse-slider\\\\\" appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\">\n      <div role=\\\\\"region\\\\\" class=\\\\\"arco-collapse-item-content arco-collapse-item-content-expend\\\\\">\n        <div class=\\\\\"arco-collapse-item-content-box\\\\\">\n          <div>Beijing Toutiao Technology Co., Ltd.</div>\n        </div>\n      </div>\n    </transition-stub>\n  </div>\n  <div class=\\\\\"arco-collapse-item arco-collapse-item-active\\\\\">\n    <div role=\\\\\"button\\\\\" aria-disabled=\\\\\"false\\\\\" aria-expanded=\\\\\"true\\\\\" tabindex=\\\\\"0\\\\\" class=\\\\\"arco-collapse-item-header arco-collapse-item-header-left\\\\\"><span class=\\\\\"arco-icon-hover arco-collapse-item-icon-hover\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-face-smile-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path fill-rule=\\\\\"evenodd\\\\\" clip-rule=\\\\\"evenodd\\\\\" d=\\\\\"M24 44c11.046 0 20-8.954 20-20S35.046 4 24 4 4 12.954 4 24s8.954 20 20 20Zm7.321-26.873a2.625 2.625 0 1 1 0 5.25 2.625 2.625 0 0 1 0-5.25Zm-14.646 0a2.625 2.625 0 1 1 0 5.25 2.625 2.625 0 0 1 0-5.25Zm-.355 9.953a1.91 1.91 0 0 1 2.694.177 6.66 6.66 0 0 0 5.026 2.279c1.918 0 3.7-.81 4.961-2.206a1.91 1.91 0 0 1 2.834 2.558 10.476 10.476 0 0 1-7.795 3.466 10.477 10.477 0 0 1-7.897-3.58 1.91 1.91 0 0 1 .177-2.694Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path></svg></span>\n      <div class=\\\\\"arco-collapse-item-header-title\\\\\">Beijing Toutiao Technology Co., Ltd.</div>\n      <!---->\n    </div>\n    <transition-stub name=\\\\\"collapse-slider\\\\\" appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\">\n      <div role=\\\\\"region\\\\\" class=\\\\\"arco-collapse-item-content arco-collapse-item-content-expend\\\\\">\n        <div class=\\\\\"arco-collapse-item-content-box\\\\\">\n          <div>Beijing Toutiao Technology Co., Ltd.</div>\n        </div>\n      </div>\n    </transition-stub>\n  </div>\n  <div class=\\\\\"arco-collapse-item\\\\\">\n    <div role=\\\\\"button\\\\\" aria-disabled=\\\\\"false\\\\\" aria-expanded=\\\\\"false\\\\\" tabindex=\\\\\"0\\\\\" class=\\\\\"arco-collapse-item-header arco-collapse-item-header-left\\\\\"><span class=\\\\\"arco-icon-hover arco-collapse-item-icon-hover\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-face-frown-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path fill-rule=\\\\\"evenodd\\\\\" clip-rule=\\\\\"evenodd\\\\\" d=\\\\\"M24 44c11.046 0 20-8.954 20-20S35.046 4 24 4 4 12.954 4 24s8.954 20 20 20Zm7.322-26.873a2.625 2.625 0 1 1 0 5.25 2.625 2.625 0 0 1 0-5.25Zm-14.646 0a2.625 2.625 0 1 1 0 5.25 2.625 2.625 0 0 1 0-5.25ZM31.68 32.88a1.91 1.91 0 0 1-2.694-.176 6.66 6.66 0 0 0-5.026-2.28c-1.918 0-3.701.81-4.962 2.207a1.91 1.91 0 0 1-2.834-2.559 10.476 10.476 0 0 1 7.796-3.465c3.063 0 5.916 1.321 7.896 3.58a1.909 1.909 0 0 1-.176 2.693Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path></svg></span>\n      <div class=\\\\\"arco-collapse-item-header-title\\\\\">Beijing Toutiao Technology Co., Ltd.</div>\n      <!---->\n    </div>\n    <transition-stub name=\\\\\"collapse-slider\\\\\" appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\">\n      <div role=\\\\\"region\\\\\" class=\\\\\"arco-collapse-item-content\\\\\" style=\\\\\"display: none;\\\\\">\n        <div class=\\\\\"arco-collapse-item-content-box\\\\\">\n          <div>Beijing Toutiao Technology Co., Ltd.</div>\n        </div>\n      </div>\n    </transition-stub>\n  </div>\n</div>\"\n`;\n\nexports[`<collapse> demo: render [extra] correctly 1`] = `\n\"<div class=\\\\\"arco-collapse\\\\\">\n  <div class=\\\\\"arco-collapse-item\\\\\">\n    <div role=\\\\\"button\\\\\" aria-disabled=\\\\\"false\\\\\" aria-expanded=\\\\\"false\\\\\" tabindex=\\\\\"0\\\\\" class=\\\\\"arco-collapse-item-header arco-collapse-item-header-left\\\\\"><span class=\\\\\"arco-icon-hover arco-collapse-item-icon-hover\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-caret-right arco-collapse-item-expand-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M34.829 23.063c.6.48.6 1.394 0 1.874L17.949 38.44c-.785.629-1.949.07-1.949-.937V10.497c0-1.007 1.164-1.566 1.95-.937l16.879 13.503Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path></svg></span>\n      <div class=\\\\\"arco-collapse-item-header-title\\\\\">Beijing Toutiao Technology Co., Ltd.</div>\n      <div class=\\\\\"arco-collapse-item-header-extra\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-copy\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n          <path d=\\\\\"M20 6h18a2 2 0 0 1 2 2v22M8 16v24c0 1.105.891 2 1.996 2h20.007A1.99 1.99 0 0 0 32 40.008V15.997A1.997 1.997 0 0 0 30 14H10a2 2 0 0 0-2 2Z\\\\\"></path>\n        </svg></div>\n    </div>\n    <transition-stub name=\\\\\"collapse-slider\\\\\" appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\">\n      <div role=\\\\\"region\\\\\" class=\\\\\"arco-collapse-item-content\\\\\" style=\\\\\"display: none;\\\\\">\n        <div class=\\\\\"arco-collapse-item-content-box\\\\\">\n          <div>Beijing Toutiao Technology Co., Ltd.</div>\n          <div>Beijing Toutiao Technology Co., Ltd.</div>\n        </div>\n      </div>\n    </transition-stub>\n  </div>\n  <div class=\\\\\"arco-collapse-item\\\\\">\n    <div role=\\\\\"button\\\\\" aria-disabled=\\\\\"false\\\\\" aria-expanded=\\\\\"false\\\\\" tabindex=\\\\\"0\\\\\" class=\\\\\"arco-collapse-item-header arco-collapse-item-header-left\\\\\"><span class=\\\\\"arco-icon-hover arco-collapse-item-icon-hover\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-caret-right arco-collapse-item-expand-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M34.829 23.063c.6.48.6 1.394 0 1.874L17.949 38.44c-.785.629-1.949.07-1.949-.937V10.497c0-1.007 1.164-1.566 1.95-.937l16.879 13.503Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path></svg></span>\n      <div class=\\\\\"arco-collapse-item-header-title\\\\\">Beijing Toutiao Technology Co., Ltd.</div>\n      <div class=\\\\\"arco-collapse-item-header-extra\\\\\"><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-mini arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n          <!--v-if-->hello\n        </button></div>\n    </div>\n    <transition-stub name=\\\\\"collapse-slider\\\\\" appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\">\n      <div role=\\\\\"region\\\\\" class=\\\\\"arco-collapse-item-content\\\\\" style=\\\\\"display: none;\\\\\">\n        <div class=\\\\\"arco-collapse-item-content-box\\\\\">\n          <div>Beijing Toutiao Technology Co., Ltd.</div>\n          <div>Beijing Toutiao Technology Co., Ltd.</div>\n        </div>\n      </div>\n    </transition-stub>\n  </div>\n  <div class=\\\\\"arco-collapse-item\\\\\">\n    <div role=\\\\\"button\\\\\" aria-disabled=\\\\\"false\\\\\" aria-expanded=\\\\\"false\\\\\" tabindex=\\\\\"0\\\\\" class=\\\\\"arco-collapse-item-header arco-collapse-item-header-left\\\\\"><span class=\\\\\"arco-icon-hover arco-collapse-item-icon-hover\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-caret-right arco-collapse-item-expand-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M34.829 23.063c.6.48.6 1.394 0 1.874L17.949 38.44c-.785.629-1.949.07-1.949-.937V10.497c0-1.007 1.164-1.566 1.95-.937l16.879 13.503Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path></svg></span>\n      <div class=\\\\\"arco-collapse-item-header-title\\\\\">Beijing Toutiao Technology Co., Ltd.</div>\n      <div class=\\\\\"arco-collapse-item-header-extra\\\\\"><span class=\\\\\"arco-tag arco-tag-size-small arco-tag-checked\\\\\"><!--v-if-->city<!--v-if--><!--v-if--></span></div>\n    </div>\n    <transition-stub name=\\\\\"collapse-slider\\\\\" appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\">\n      <div role=\\\\\"region\\\\\" class=\\\\\"arco-collapse-item-content\\\\\" style=\\\\\"display: none;\\\\\">\n        <div class=\\\\\"arco-collapse-item-content-box\\\\\">\n          <div>Beijing Toutiao Technology Co., Ltd.</div>\n          <div>Beijing Toutiao Technology Co., Ltd.</div>\n        </div>\n      </div>\n    </transition-stub>\n  </div>\n</div>\"\n`;\n\nexports[`<collapse> demo: render [icon-position] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-vertical\\\\\" style=\\\\\"column-gap: 8px; row-gap: 8px; width: 100%;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 8px; row-gap: 8px;\\\\\">\n      <!---->\n      <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-radio-group-button arco-radio-group-size-medium arco-radio-group-direction-horizontal\\\\\"><label class=\\\\\"arco-radio-button arco-radio-checked\\\\\"><input type=\\\\\"radio\\\\\" checked=\\\\\"\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"left\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">Left</span></label><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"right\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">Right</span></label></span></div>\n      <!---->\n      <div class=\\\\\"arco-space-item\\\\\"><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span><span class=\\\\\"arco-checkbox-label\\\\\">Hide Expand Icon</span></label></div>\n    </div>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-collapse\\\\\">\n      <div class=\\\\\"arco-collapse-item arco-collapse-item-active\\\\\">\n        <div role=\\\\\"button\\\\\" aria-disabled=\\\\\"false\\\\\" aria-expanded=\\\\\"true\\\\\" tabindex=\\\\\"0\\\\\" class=\\\\\"arco-collapse-item-header arco-collapse-item-header-left\\\\\"><span class=\\\\\"arco-icon-hover arco-collapse-item-icon-hover\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-plus\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M5 24h38M24 5v38\\\\\"></path></svg></span>\n          <div class=\\\\\"arco-collapse-item-header-title\\\\\">Beijing Toutiao Technology Co., Ltd.</div>\n          <div class=\\\\\"arco-collapse-item-header-extra\\\\\"><span class=\\\\\"arco-tag arco-tag-size-small arco-tag-checked\\\\\"><!--v-if-->city<!--v-if--><!--v-if--></span></div>\n        </div>\n        <transition-stub name=\\\\\"collapse-slider\\\\\" appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\">\n          <div role=\\\\\"region\\\\\" class=\\\\\"arco-collapse-item-content arco-collapse-item-content-expend\\\\\">\n            <div class=\\\\\"arco-collapse-item-content-box\\\\\">\n              <div>Beijing Toutiao Technology Co., Ltd.</div>\n              <div>Beijing Toutiao Technology Co., Ltd.</div>\n              <div>Beijing Toutiao Technology Co., Ltd.</div>\n            </div>\n          </div>\n        </transition-stub>\n      </div>\n      <div class=\\\\\"arco-collapse-item\\\\\">\n        <div role=\\\\\"button\\\\\" aria-disabled=\\\\\"true\\\\\" aria-expanded=\\\\\"false\\\\\" tabindex=\\\\\"0\\\\\" class=\\\\\"arco-collapse-item-header arco-collapse-item-header-left arco-collapse-item-header-disabled\\\\\"><span class=\\\\\"arco-icon-hover arco-collapse-item-icon-hover arco-icon-hover-disabled\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-caret-right arco-collapse-item-expand-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M34.829 23.063c.6.48.6 1.394 0 1.874L17.949 38.44c-.785.629-1.949.07-1.949-.937V10.497c0-1.007 1.164-1.566 1.95-.937l16.879 13.503Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path></svg></span>\n          <div class=\\\\\"arco-collapse-item-header-title\\\\\">Beijing Toutiao Technology Co., Ltd.</div>\n          <!---->\n        </div>\n        <transition-stub name=\\\\\"collapse-slider\\\\\" appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\">\n          <div role=\\\\\"region\\\\\" class=\\\\\"arco-collapse-item-content\\\\\" style=\\\\\"display: none;\\\\\">\n            <div class=\\\\\"arco-collapse-item-content-box\\\\\">\n              <div>Beijing Toutiao Technology Co., Ltd.</div>\n              <div>Beijing Toutiao Technology Co., Ltd.</div>\n              <div>Beijing Toutiao Technology Co., Ltd.</div>\n            </div>\n          </div>\n        </transition-stub>\n      </div>\n      <div class=\\\\\"arco-collapse-item\\\\\">\n        <div role=\\\\\"button\\\\\" aria-disabled=\\\\\"false\\\\\" aria-expanded=\\\\\"false\\\\\" tabindex=\\\\\"0\\\\\" class=\\\\\"arco-collapse-item-header arco-collapse-item-header-left\\\\\"><span class=\\\\\"arco-icon-hover arco-collapse-item-icon-hover\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-caret-right arco-collapse-item-expand-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M34.829 23.063c.6.48.6 1.394 0 1.874L17.949 38.44c-.785.629-1.949.07-1.949-.937V10.497c0-1.007 1.164-1.566 1.95-.937l16.879 13.503Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path></svg></span>\n          <div class=\\\\\"arco-collapse-item-header-title\\\\\">Beijing Toutiao Technology Co., Ltd.</div>\n          <!---->\n        </div>\n        <transition-stub name=\\\\\"collapse-slider\\\\\" appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\">\n          <div role=\\\\\"region\\\\\" class=\\\\\"arco-collapse-item-content\\\\\" style=\\\\\"display: none;\\\\\">\n            <div class=\\\\\"arco-collapse-item-content-box\\\\\">\n              <div>Beijing Toutiao Technology Co., Ltd.</div>\n              <div>Beijing Toutiao Technology Co., Ltd.</div>\n              <div>Beijing Toutiao Technology Co., Ltd.</div>\n            </div>\n          </div>\n        </transition-stub>\n      </div>\n    </div>\n  </div>\n</div>\"\n`;\n\nexports[`<collapse> demo: render [nested] correctly 1`] = `\n\"<div class=\\\\\"arco-collapse\\\\\">\n  <div class=\\\\\"arco-collapse-item arco-collapse-item-active\\\\\">\n    <div role=\\\\\"button\\\\\" aria-disabled=\\\\\"false\\\\\" aria-expanded=\\\\\"true\\\\\" tabindex=\\\\\"0\\\\\" class=\\\\\"arco-collapse-item-header arco-collapse-item-header-left\\\\\"><span class=\\\\\"arco-icon-hover arco-collapse-item-icon-hover\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-caret-right arco-collapse-item-expand-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M34.829 23.063c.6.48.6 1.394 0 1.874L17.949 38.44c-.785.629-1.949.07-1.949-.937V10.497c0-1.007 1.164-1.566 1.95-.937l16.879 13.503Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path></svg></span>\n      <div class=\\\\\"arco-collapse-item-header-title\\\\\">Beijing Toutiao Technology Co., Ltd.</div>\n      <!---->\n    </div>\n    <transition-stub name=\\\\\"collapse-slider\\\\\" appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\">\n      <div role=\\\\\"region\\\\\" class=\\\\\"arco-collapse-item-content arco-collapse-item-content-expend\\\\\">\n        <div class=\\\\\"arco-collapse-item-content-box\\\\\">\n          <div class=\\\\\"arco-collapse\\\\\">\n            <div class=\\\\\"arco-collapse-item arco-collapse-item-active\\\\\">\n              <div role=\\\\\"button\\\\\" aria-disabled=\\\\\"false\\\\\" aria-expanded=\\\\\"true\\\\\" tabindex=\\\\\"0\\\\\" class=\\\\\"arco-collapse-item-header arco-collapse-item-header-left\\\\\"><span class=\\\\\"arco-icon-hover arco-collapse-item-icon-hover\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-caret-right arco-collapse-item-expand-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M34.829 23.063c.6.48.6 1.394 0 1.874L17.949 38.44c-.785.629-1.949.07-1.949-.937V10.497c0-1.007 1.164-1.566 1.95-.937l16.879 13.503Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path></svg></span>\n                <div class=\\\\\"arco-collapse-item-header-title\\\\\">Beijing Toutiao Technology Co., Ltd.</div>\n                <!---->\n              </div>\n              <transition-stub name=\\\\\"collapse-slider\\\\\" appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\">\n                <div role=\\\\\"region\\\\\" class=\\\\\"arco-collapse-item-content arco-collapse-item-content-expend\\\\\">\n                  <div class=\\\\\"arco-collapse-item-content-box\\\\\">\n                    <div>Beijing Toutiao Technology Co., Ltd.</div>\n                  </div>\n                </div>\n              </transition-stub>\n            </div>\n            <div class=\\\\\"arco-collapse-item\\\\\">\n              <div role=\\\\\"button\\\\\" aria-disabled=\\\\\"false\\\\\" aria-expanded=\\\\\"false\\\\\" tabindex=\\\\\"0\\\\\" class=\\\\\"arco-collapse-item-header arco-collapse-item-header-left\\\\\"><span class=\\\\\"arco-icon-hover arco-collapse-item-icon-hover\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-caret-right arco-collapse-item-expand-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M34.829 23.063c.6.48.6 1.394 0 1.874L17.949 38.44c-.785.629-1.949.07-1.949-.937V10.497c0-1.007 1.164-1.566 1.95-.937l16.879 13.503Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path></svg></span>\n                <div class=\\\\\"arco-collapse-item-header-title\\\\\">Beijing Toutiao Technology Co., Ltd.</div>\n                <!---->\n              </div>\n              <transition-stub name=\\\\\"collapse-slider\\\\\" appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\">\n                <div role=\\\\\"region\\\\\" class=\\\\\"arco-collapse-item-content\\\\\" style=\\\\\"display: none;\\\\\">\n                  <!---->\n                </div>\n              </transition-stub>\n            </div>\n          </div>\n        </div>\n      </div>\n    </transition-stub>\n  </div>\n  <div class=\\\\\"arco-collapse-item arco-collapse-item-active\\\\\">\n    <div role=\\\\\"button\\\\\" aria-disabled=\\\\\"false\\\\\" aria-expanded=\\\\\"true\\\\\" tabindex=\\\\\"0\\\\\" class=\\\\\"arco-collapse-item-header arco-collapse-item-header-left\\\\\"><span class=\\\\\"arco-icon-hover arco-collapse-item-icon-hover\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-caret-right arco-collapse-item-expand-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M34.829 23.063c.6.48.6 1.394 0 1.874L17.949 38.44c-.785.629-1.949.07-1.949-.937V10.497c0-1.007 1.164-1.566 1.95-.937l16.879 13.503Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path></svg></span>\n      <div class=\\\\\"arco-collapse-item-header-title\\\\\">Beijing Toutiao Technology Co., Ltd.</div>\n      <!---->\n    </div>\n    <transition-stub name=\\\\\"collapse-slider\\\\\" appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\">\n      <div role=\\\\\"region\\\\\" class=\\\\\"arco-collapse-item-content arco-collapse-item-content-expend\\\\\">\n        <div class=\\\\\"arco-collapse-item-content-box\\\\\">\n          <div>Beijing Toutiao Technology Co., Ltd.</div>\n        </div>\n      </div>\n    </transition-stub>\n  </div>\n  <div class=\\\\\"arco-collapse-item\\\\\">\n    <div role=\\\\\"button\\\\\" aria-disabled=\\\\\"false\\\\\" aria-expanded=\\\\\"false\\\\\" tabindex=\\\\\"0\\\\\" class=\\\\\"arco-collapse-item-header arco-collapse-item-header-left\\\\\"><span class=\\\\\"arco-icon-hover arco-collapse-item-icon-hover\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-caret-right arco-collapse-item-expand-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M34.829 23.063c.6.48.6 1.394 0 1.874L17.949 38.44c-.785.629-1.949.07-1.949-.937V10.497c0-1.007 1.164-1.566 1.95-.937l16.879 13.503Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path></svg></span>\n      <div class=\\\\\"arco-collapse-item-header-title\\\\\">Beijing Toutiao Technology Co., Ltd.</div>\n      <!---->\n    </div>\n    <transition-stub name=\\\\\"collapse-slider\\\\\" appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\">\n      <div role=\\\\\"region\\\\\" class=\\\\\"arco-collapse-item-content\\\\\" style=\\\\\"display: none;\\\\\">\n        <!---->\n      </div>\n    </transition-stub>\n  </div>\n</div>\"\n`;\n"
  },
  {
    "path": "packages/web-vue/components/collapse/__test__/demo.test.ts",
    "content": "import demoTest from '../../../scripts/demo-test';\n\ndemoTest('collapse');\n"
  },
  {
    "path": "packages/web-vue/components/collapse/__test__/index.test.ts",
    "content": "import { mount } from '@vue/test-utils';\nimport Collapse from '../index';\n\nconst CollapseItem = Collapse.Item;\n\ndescribe('Collapse', () => {\n  test('should emit change event', async () => {\n    const wrapper = mount(Collapse, {\n      global: {\n        components: {\n          CollapseItem,\n        },\n      },\n      slots: {\n        default: `<collapse-item key=\"1\" header=\"Test 1\">Test 1</collapse-item>\n<collapse-item key=\"2\" header=\"Test 2\" disabled>Test 2</collapse-item>\n<collapse-item key=\"3\" header=\"Test 3\">Test 3</collapse-item>`,\n      },\n    });\n\n    const headers = wrapper.findAll('.arco-collapse-item-header');\n    await headers[1].trigger('click');\n    expect(wrapper.emitted('change')).toBeUndefined();\n    await headers[2].trigger('click');\n    expect(wrapper.emitted('change')[0][0]).toEqual(['3']);\n    await wrapper.setProps({ accordion: true });\n    await headers[0].trigger('click');\n    expect(wrapper.emitted('change')[1][0]).toEqual(['1']);\n  });\n});\n"
  },
  {
    "path": "packages/web-vue/components/collapse/collapse-item.tsx",
    "content": "import {\n  computed,\n  defineComponent,\n  getCurrentInstance,\n  inject,\n  ref,\n  Transition,\n  TransitionProps,\n  watch,\n} from 'vue';\nimport { getPrefixCls } from '../_utils/global-config';\nimport { CollapseContext, collapseKey } from './context';\nimport IconHover from '../_components/icon-hover.vue';\nimport IconCaretRight from '../icon/icon-caret-right';\nimport IconCaretLeft from '../icon/icon-caret-left';\nimport { isNumber } from '../_utils/is';\n\nexport default defineComponent({\n  name: 'CollapseItem',\n  components: { IconHover, IconCaretRight, IconCaretLeft },\n  props: {\n    /**\n     * @zh 面板的标题\n     * @en The title of the panel\n     */\n    header: String,\n    /**\n     * @zh 是否禁用\n     * @en Whether to disable\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 是否显示展开图标\n     * @en Whether to show the expand icon\n     */\n    showExpandIcon: {\n      type: Boolean,\n      default: true,\n    },\n    /**\n     * @zh 是否在隐藏时销毁内容\n     * @en Whether to destroy content when hidden\n     * @version 2.27.0\n     */\n    destroyOnHide: {\n      type: Boolean,\n      default: false,\n    },\n  },\n  /**\n   * @zh 面板的标题\n   * @en The title of the panel\n   * @slot header\n   */\n  /**\n   * @zh 展开图标\n   * @en Expand icon\n   * @slot expand-icon\n   * @binding {boolean} active\n   * @binding {boolean} disabled\n   * @binding {'left' | 'right'} position\n   * @version 2.33.0\n   */\n  /**\n   * @zh 额外内容\n   * @en Extra Content\n   * @slot extra\n   */\n  setup(props, { slots }) {\n    const instance = getCurrentInstance();\n    const prefixCls = getPrefixCls('collapse-item');\n    const collapseCtx = inject<Partial<CollapseContext>>(collapseKey, {});\n\n    const key =\n      instance && isNumber(instance?.vnode.key)\n        ? instance.vnode.key\n        : String(instance?.vnode.key ?? '');\n    const isActive = computed(() => collapseCtx.activeKeys?.includes(key));\n    const mergedDestroyOnHide = computed(\n      () => collapseCtx.destroyOnHide || props.destroyOnHide\n    );\n    const mergedShowExpandIcon = computed(\n      () => collapseCtx?.showExpandIcon ?? props.showExpandIcon\n    );\n    const mounted = ref(mergedDestroyOnHide.value ? isActive.value : true);\n    const expandIconPosition = computed(\n      () => collapseCtx?.expandIconPosition ?? 'left'\n    );\n\n    const handleClick = (e: MouseEvent) => {\n      if (!props.disabled) {\n        collapseCtx.handleClick?.(key, e);\n      }\n    };\n\n    watch(isActive, (isActive) => {\n      if (isActive && !mounted.value) {\n        mounted.value = true;\n      }\n    });\n\n    const transitionEvents: TransitionProps = {\n      onEnter: (el: Element) => {\n        (el as HTMLDivElement).style.height = `${el.scrollHeight}px`;\n      },\n      onAfterEnter: (el: Element) => {\n        (el as HTMLDivElement).style.height = 'auto';\n      },\n      onBeforeLeave: (el: Element) => {\n        (el as HTMLDivElement).style.height = `${el.scrollHeight}px`;\n      },\n      onLeave: (el: Element) => {\n        (el as HTMLDivElement).style.height = '0';\n      },\n      onAfterLeave: () => {\n        if (mergedDestroyOnHide.value) {\n          mounted.value = false;\n        }\n      },\n    };\n\n    const cls = computed(() => [\n      prefixCls,\n      {\n        [`${prefixCls}-active`]: isActive.value,\n      },\n    ]);\n\n    const headerCls = computed(() => [\n      `${prefixCls}-header`,\n      `${prefixCls}-header-${collapseCtx?.expandIconPosition}`,\n      {\n        [`${prefixCls}-header-disabled`]: props.disabled,\n      },\n    ]);\n\n    const iconCls = computed(() => [\n      {\n        [`${prefixCls}-icon-right`]:\n          collapseCtx?.expandIconPosition === 'right',\n      },\n    ]);\n\n    const contentCls = computed(() => [\n      `${prefixCls}-content`,\n      {\n        [`${prefixCls}-content-expend`]: isActive.value,\n      },\n    ]);\n\n    const defaultExpandIcon = () =>\n      expandIconPosition.value === 'right' ? (\n        <icon-caret-left class={`${prefixCls}-expand-icon`} />\n      ) : (\n        <icon-caret-right class={`${prefixCls}-expand-icon`} />\n      );\n\n    const expandIconRender = () =>\n      mergedShowExpandIcon.value && (\n        <icon-hover\n          prefix={prefixCls}\n          class={iconCls.value}\n          disabled={props.disabled}\n        >\n          {(slots['expand-icon'] ?? collapseCtx?.slots?.['expand-icon'])?.({\n            active: isActive.value,\n            disabled: props.disabled,\n            position: expandIconPosition.value,\n          }) ?? defaultExpandIcon()}\n        </icon-hover>\n      );\n\n    return () => {\n      return (\n        <div class={cls.value}>\n          <div\n            role=\"button\"\n            aria-disabled={props.disabled}\n            aria-expanded={isActive.value}\n            tabindex=\"0\"\n            class={headerCls.value}\n            onClick={handleClick}\n          >\n            {expandIconRender()}\n            <div class={`${prefixCls}-header-title`}>\n              {slots.header?.() ?? props.header}\n            </div>\n            {slots.extra && (\n              <div class={`${prefixCls}-header-extra`}>{slots.extra?.()}</div>\n            )}\n          </div>\n          <Transition name=\"collapse-slider\" {...transitionEvents}>\n            <div v-show={isActive.value} role=\"region\" class={contentCls.value}>\n              {mounted.value && (\n                <div ref=\"contentBoxRef\" class={`${prefixCls}-content-box`}>\n                  {slots.default?.()}\n                </div>\n              )}\n            </div>\n          </Transition>\n        </div>\n      );\n    };\n  },\n});\n"
  },
  {
    "path": "packages/web-vue/components/collapse/collapse.vue",
    "content": "<template>\n  <div :class=\"cls\">\n    <slot />\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  PropType,\n  provide,\n  reactive,\n  ref,\n  toRefs,\n} from 'vue';\nimport { getPrefixCls } from '../_utils/global-config';\nimport { isArray } from '../_utils/is';\nimport { collapseKey } from './context';\n\nconst EXPAND_ICON_POSITIONS = ['left', 'right'] as const;\ntype ExpandIconPositions = typeof EXPAND_ICON_POSITIONS[number];\n\nexport default defineComponent({\n  name: 'Collapse',\n  props: {\n    /**\n     * @zh 当前展开的面板的 `key`\n     * @en The `key` of the currently expanded panel\n     * @vModel\n     */\n    activeKey: {\n      type: Array as PropType<(string | number)[]>,\n      default: undefined,\n    },\n    /**\n     * @zh 默认展开的面板的 `key` （非受控模式）\n     * @en The `key` of the panel expanded by default (uncontrolled mode)\n     */\n    defaultActiveKey: {\n      type: Array as PropType<(string | number)[]>,\n      default: () => [],\n    },\n    /**\n     * @zh 是否开启手风琴模式\n     * @en Whether to enable accordion mode\n     */\n    accordion: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 是否显示展开图标\n     * @en Whether to show the expand icon\n     * @version 2.33.0\n     */\n    showExpandIcon: {\n      type: Boolean,\n      default: undefined,\n    },\n    /**\n     * @zh 展开图标显示的位置\n     * @en The location where the expand icon is displayed\n     * @values 'left', 'right'\n     */\n    expandIconPosition: {\n      type: String as PropType<ExpandIconPositions>,\n      default: 'left',\n    },\n    /**\n     * @zh 是否显示边框\n     * @en Whether to show the border\n     */\n    bordered: {\n      type: Boolean,\n      default: true,\n    },\n    /**\n     * @zh 是否在隐藏时销毁内容\n     * @en Whether to destroy content when hidden\n     * @version 2.27.0\n     */\n    destroyOnHide: {\n      type: Boolean,\n      default: false,\n    },\n  },\n  /**\n   * @zh 展开图标\n   * @en Expand icon\n   * @slot expand-icon\n   * @binding {boolean} active\n   * @binding {boolean} disabled\n   * @binding {'left' | 'right'} position\n   * @version 2.33.0\n   */\n  emits: {\n    'update:activeKey': (activeKey: (string | number)[]) => true,\n    /**\n     * @zh 展开的面板发生改变时触发\n     * @en Emitted when the expanded panel changes\n     * @param {(string | number)[]} activeKey\n     * @param {Event} ev\n     */\n    'change': (activeKey: (string | number)[], ev: Event) => true,\n  },\n  setup(props, { emit, slots }) {\n    const { expandIconPosition, destroyOnHide, showExpandIcon } = toRefs(props);\n    const prefixCls = getPrefixCls('collapse');\n\n    const _activeKey = ref(props.defaultActiveKey);\n    const computedActiveKeys = computed(() => {\n      const activeKey = props.activeKey ?? _activeKey.value;\n      if (!isArray(activeKey)) {\n        return [activeKey];\n      }\n      return activeKey;\n    });\n\n    const handleClick = (key: string | number, e: Event) => {\n      let newActiveKeys: (string | number)[] = [];\n      if (props.accordion) {\n        if (!computedActiveKeys.value.includes(key)) {\n          newActiveKeys = [key];\n        }\n        _activeKey.value = newActiveKeys;\n      } else {\n        newActiveKeys = [...computedActiveKeys.value];\n        const _index = newActiveKeys.indexOf(key);\n        if (_index > -1) {\n          newActiveKeys.splice(_index, 1);\n        } else if (props.accordion) {\n          newActiveKeys = [key];\n        } else {\n          newActiveKeys.push(key);\n        }\n        _activeKey.value = newActiveKeys;\n      }\n      emit('update:activeKey', newActiveKeys);\n      emit('change', newActiveKeys, e);\n    };\n\n    provide(\n      collapseKey,\n      reactive({\n        activeKeys: computedActiveKeys,\n        slots,\n        showExpandIcon,\n        expandIconPosition,\n        destroyOnHide,\n        handleClick,\n      })\n    );\n\n    const cls = computed(() => [\n      prefixCls,\n      {\n        [`${prefixCls}-borderless`]: !props.bordered,\n      },\n    ]);\n\n    return {\n      prefixCls,\n      cls,\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/collapse/context.ts",
    "content": "import type { InjectionKey, Slots } from 'vue';\n\nexport interface CollapseContext {\n  activeKeys: (string | number)[];\n  slots: Slots;\n  showExpandIcon?: boolean;\n  expandIconPosition: string;\n  destroyOnHide: boolean;\n  handleClick: (key: string | number, e: MouseEvent) => void;\n}\n\nexport const collapseKey: InjectionKey<CollapseContext> = Symbol('collapseCtx');\n"
  },
  {
    "path": "packages/web-vue/components/collapse/index.ts",
    "content": "import type { App } from 'vue';\nimport type { ArcoOptions } from '../_utils/types';\nimport { setGlobalConfig, getComponentPrefix } from '../_utils/global-config';\nimport _Collapse from './collapse.vue';\nimport _CollapseItem from './collapse-item';\n\nconst Collapse = Object.assign(_Collapse, {\n  Item: _CollapseItem,\n  install: (app: App, options?: ArcoOptions) => {\n    setGlobalConfig(app, options);\n    const componentPrefix = getComponentPrefix(options);\n\n    app.component(componentPrefix + _Collapse.name, _Collapse);\n    app.component(componentPrefix + _CollapseItem.name, _CollapseItem);\n  },\n});\n\nexport type CollapseInstance = InstanceType<typeof _Collapse>;\nexport type CollapseItemInstance = InstanceType<typeof _CollapseItem>;\n\nexport { _CollapseItem as CollapseItem };\n\nexport default Collapse;\n"
  },
  {
    "path": "packages/web-vue/components/collapse/style/index.less",
    "content": "@import '../../style/mixins/index.less';\n@import './token.less';\n\n@collapse-prefix-cls: ~'@{prefix}-collapse';\n\n.icon-hover(\n  ~'@{collapse-prefix-cls}-item',\n  @collapse-expand-icon-size,\n  @collapse-expand-icon-size-bg\n);\n\n.icon-hover-bg(~'@{collapse-prefix-cls}-item', @collapse-expand-icon-color-bg);\n\n.@{collapse-prefix-cls} {\n  overflow: hidden;\n  line-height: @collapse-line-height;\n  border: @collapse-border-width solid @collapse-color-border;\n  border-radius: @collapse-border-radius;\n\n  &-item {\n    box-sizing: border-box;\n    border-bottom: @collapse-title-border-width solid\n      @collapse-item-color-border;\n\n    &-active {\n      > .@{collapse-prefix-cls}-item-header {\n        background-color: @collapse-title-color-bg_active;\n        border-color: @collapse-title-color-border;\n        transition: border-color 0s ease 0s;\n\n        .@{collapse-prefix-cls}-item-header-title {\n          font-weight: @collapse-title-font-weight_active;\n        }\n\n        .@{collapse-prefix-cls}-item-expand-icon {\n          transform: rotate(90deg);\n        }\n\n        .@{collapse-prefix-cls}-item-icon-right\n          .@{collapse-prefix-cls}-item-expand-icon {\n          transform: rotate(-90deg);\n        }\n      }\n    }\n\n    &-header {\n      position: relative;\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      box-sizing: border-box;\n      padding-top: @collapse-title-padding-vertical;\n      padding-bottom: $padding-top;\n      overflow: hidden;\n      color: @collapse-title-color-text;\n      font-size: @collapse-title-font-size;\n      line-height: @collapse-title-line-height;\n      background-color: @collapse-title-color-bg;\n      border-bottom: 1px solid @color-transparent;\n      cursor: pointer;\n      // Ensure that the border is hidden when the collapse animation is complete\n      transition: border-color 0s ease 0.19s;\n\n      &-left {\n        padding-right: @collapse-title-padding-horizontal;\n        padding-left: @collapse-title-padding-horizontal +\n          @collapse-expand-icon-size-bg + @collapse-expand-icon-spacing-text;\n      }\n\n      &-right {\n        padding-right: @collapse-title-padding-horizontal +\n          @collapse-expand-icon-size-bg + @collapse-expand-icon-spacing-text;\n        padding-left: @collapse-title-padding-horizontal;\n\n        + .@{collapse-prefix-cls}-item-content {\n          padding-left: @collapse-title-padding-horizontal;\n        }\n      }\n\n      &-disabled {\n        color: @collapse-title-color-text_disabled;\n        background-color: @collapse-title-color-bg_disabled;\n        cursor: not-allowed;\n\n        .@{collapse-prefix-cls}-item-header-icon {\n          color: @collapse-title-color-text_disabled;\n        }\n      }\n\n      &-title {\n        display: inline;\n      }\n\n      &-extra {\n        float: right;\n      }\n    }\n\n    // expand icon style\n    & &-icon-hover {\n      position: absolute;\n      top: 50%;\n      left: @collapse-title-padding-horizontal;\n      text-align: center;\n      transform: translateY(-50%);\n    }\n\n    & &-icon-right {\n      right: @collapse-title-padding-horizontal;\n      left: unset;\n\n      > .@{collapse-prefix-cls}-item-header-icon-down {\n        transform: rotate(-90deg);\n      }\n    }\n\n    & &-expand-icon {\n      position: relative;\n      display: block;\n      color: @collapse-color-expand-icon;\n      font-size: @collapse-expand-icon-size;\n      vertical-align: middle;\n      transition: transform @transition-duration-2\n        @transition-timing-function-standard;\n    }\n\n    &-content {\n      position: relative;\n      padding-right: @collapse-title-padding-horizontal;\n      padding-left: @collapse-title-padding-horizontal +\n        @collapse-expand-icon-size-bg + @collapse-expand-icon-spacing-text;\n      overflow: hidden;\n      color: @collapse-content-color-text;\n      font-size: @collapse-content-font-size;\n      background-color: @collapse-content-color-bg;\n\n      &-expanded {\n        display: block;\n        height: auto;\n      }\n\n      &-box {\n        padding: @collapse-content-padding-vertical 0;\n      }\n    }\n\n    &&-disabled > &-content {\n      color: @collapse-content-color-text_disabled;\n    }\n\n    &-no-icon > &-header {\n      padding-right: @collapse-title-padding-horizontal;\n      padding-left: @collapse-title-padding-horizontal;\n    }\n\n    &:last-of-type {\n      border-bottom: none;\n    }\n  }\n\n  &.@{collapse-prefix-cls}-borderless {\n    border: none;\n  }\n\n  &::after {\n    display: table;\n    clear: both;\n    content: '';\n  }\n}\n\n.collapse-slider-enter-from,\n.collapse-slider-leave-to {\n  height: 0;\n}\n\n.collapse-slider-enter-active,\n.collapse-slider-leave-active {\n  transition: height @transition-duration-2 @transition-timing-function-standard;\n}\n"
  },
  {
    "path": "packages/web-vue/components/collapse/style/index.ts",
    "content": "import '../../style/index.less';\nimport './index.less';\n"
  },
  {
    "path": "packages/web-vue/components/collapse/style/token.less",
    "content": "@import '../../style/theme/index.less';\n\n@collapse-border-width: @border-1;\n@collapse-border-radius: @radius-medium;\n@collapse-color-border: var(~'@{arco-cssvars-prefix}-color-neutral-3');\n@collapse-line-height: 1.5715;\n\n@collapse-title-line-height: 24px;\n@collapse-title-border-width: @border-1;\n@collapse-title-color-border: var(~'@{arco-cssvars-prefix}-color-neutral-3');\n@collapse-title-font-size: @font-size-body-3;\n@collapse-title-padding-horizontal: 13px;\n@collapse-title-padding-vertical: @spacing-4;\n@collapse-title-color-bg: var(~'@{arco-cssvars-prefix}-color-bg-2');\n@collapse-title-color-bg_active: var(~'@{arco-cssvars-prefix}-color-bg-2');\n@collapse-title-color-bg_disabled: var(~'@{arco-cssvars-prefix}-color-bg-2');\n@collapse-title-color-text: var(~'@{arco-cssvars-prefix}-color-text-1');\n@collapse-title-color-text_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');\n@collapse-title-font-weight_active: @font-weight-500;\n\n@collapse-content-color-text: var(~'@{arco-cssvars-prefix}-color-text-1');\n@collapse-content-color-text_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');\n@collapse-content-font-size: @font-size-body-3;\n@collapse-content-padding-vertical: @spacing-4;\n@collapse-content-color-bg: var(~'@{arco-cssvars-prefix}-color-fill-1');\n\n@collapse-expand-icon-size: 14px;\n@collapse-expand-icon-size-bg: @size-4;\n@collapse-expand-icon-spacing-text: 5px;\n@collapse-color-expand-icon: var(~'@{arco-cssvars-prefix}-color-neutral-7');\n\n@collapse-item-color-border: var(~'@{arco-cssvars-prefix}-color-border-2');\n@collapse-item-border-width: @border-1;\n@collapse-expand-icon-color-bg: var(~'@{arco-cssvars-prefix}-color-fill-2');\n"
  },
  {
    "path": "packages/web-vue/components/color-picker/CHANGELOG.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.56.0\n\n`2024-07-26`\n\n### 🐛 BugFix\n\n- fix shaking issue when selecting color with v-model ([#3180](https://github.com/arco-design/arco-design-vue/pull/3180))\n\n\n## 2.55.2\n\n`2024-05-10`\n\n### 🐛 BugFix\n\n- fix color-picker style import ([#3052](https://github.com/arco-design/arco-design-vue/pull/3052))\n\n### 💅 Style\n\n- Optimize color control bar background fillet style ([#3116](https://github.com/arco-design/arco-design-vue/pull/3116))\n\n\n## 2.55.1\n\n`2024-03-29`\n\n### 🐛 BugFix\n\n- fix v-model not working ([#3030](https://github.com/arco-design/arco-design-vue/pull/3030))\n- Fix copywriting errors ([#3028](https://github.com/arco-design/arco-design-vue/pull/3028))\n\n\n## 2.55.0\n\n`2024-03-15`\n\n### 🆕 Feature\n\n- add color-picker component ([#2958](https://github.com/arco-design/arco-design-vue/pull/2958))\n\n"
  },
  {
    "path": "packages/web-vue/components/color-picker/CHANGELOG.zh-CN.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.56.0\n\n`2024-07-26`\n\n### 🐛 问题修复\n\n- 修复在 v-model 下选择颜色时出现的抖动问题 ([#3180](https://github.com/arco-design/arco-design-vue/pull/3180))\n\n\n## 2.55.2\n\n`2024-05-10`\n\n### 🐛 问题修复\n\n- 修复样式按需导入错误 ([#3052](https://github.com/arco-design/arco-design-vue/pull/3052))\n\n### 💅 样式更新\n\n- 优化颜色控制条背景圆角样式 ([#3116](https://github.com/arco-design/arco-design-vue/pull/3116))\n\n\n## 2.55.1\n\n`2024-03-29`\n\n### 🐛 问题修复\n\n- 修复双向绑定不生效问题 ([#3030](https://github.com/arco-design/arco-design-vue/pull/3030))\n- 修复文案错误 ([#3028](https://github.com/arco-design/arco-design-vue/pull/3028))\n\n\n## 2.55.0\n\n`2024-03-15`\n\n### 🆕 新增功能\n\n- 新增颜色选择器 ([#2958](https://github.com/arco-design/arco-design-vue/pull/2958))\n\n"
  },
  {
    "path": "packages/web-vue/components/color-picker/README.en-US.md",
    "content": "```yaml\nmeta:\n  type: Component\n  category: Data Entry\ntitle: ColorPicker\ndescription: Used for select and display colors.\n```\n\n*Auto translate by google.*\n\n@import ./__demo__/basic.md\n@import ./__demo__/size.md\n@import ./__demo__/disabled.md\n@import ./__demo__/format.md\n@import ./__demo__/colors.md\n@import ./__demo__/trigger.md\n@import ./__demo__/trigger-element.md\n@import ./__demo__/only-panel.md\n\n## API\n\n\n### `<color-picker>` Props\n\n|Attribute|Description|Type|Default|\n|---|---|---|:---:|\n|model-value **(v-model)**|Value|`string`|`-`|\n|default-value|Default value (uncontrolled state)|`string`|`-`|\n|format|Color value format|`'hex' \\| 'rgb'`|`-`|\n|size|Size|`'mini' \\| 'small' \\| 'medium' \\| 'large'`|`'medium'`|\n|show-text|Show color value|`boolean`|`false`|\n|show-history|Show history colors|`boolean`|`false`|\n|show-preset|Show preset colors|`boolean`|`false`|\n|disabled|disabled|`boolean`|`false`|\n|disabled-alpha|Disable transparency channel|`boolean`|`false`|\n|hide-trigger|There is no trigger element, only the color panel is displayed|`boolean`|`false`|\n|trigger-props|Can accept Props of all [Trigger](/vue/component/trigger) components|`Partial<TriggerProps>`|`-`|\n|history-colors|Color array of historical colors|`string[]`|`-`|\n|preset-colors|Color array of preset colors|`string[]`|`() => colors`|\n### `<color-picker>` Events\n\n|Event Name|Description|Parameters|\n|---|---|---|\n|change|Triggered when the color value changes|value: `string`|\n|popup-visible-change|Triggered when the color panel is expanded and collapsed|visible: `boolean`<br>value: `string`|\n\n\n"
  },
  {
    "path": "packages/web-vue/components/color-picker/README.zh-CN.md",
    "content": "```yaml\nmeta:\n  type: 组件\n  category: 数据输入\ntitle: 颜色选择器 ColorPicker\ndescription: 用于选择和展示颜色\n```\n\n@import ./__demo__/basic.md\n@import ./__demo__/size.md\n@import ./__demo__/disabled.md\n@import ./__demo__/format.md\n@import ./__demo__/colors.md\n@import ./__demo__/trigger.md\n@import ./__demo__/trigger-element.md\n@import ./__demo__/only-panel.md\n\n## API\n\n\n### `<color-picker>` Props\n\n|参数名|描述|类型|默认值|\n|---|---|---|:---:|\n|model-value **(v-model)**|绑定值|`string`|`-`|\n|default-value|默认值（非受控状态）|`string`|`-`|\n|format|颜色值的格式|`'hex' \\| 'rgb'`|`-`|\n|size|尺寸|`'mini' \\| 'small' \\| 'medium' \\| 'large'`|`'medium'`|\n|show-text|显示颜色值|`boolean`|`false`|\n|show-history|显示历史颜色|`boolean`|`false`|\n|show-preset|显示预设颜色|`boolean`|`false`|\n|disabled|禁用|`boolean`|`false`|\n|disabled-alpha|禁用透明通道|`boolean`|`false`|\n|hide-trigger|没有触发元素，只显示颜色面板|`boolean`|`false`|\n|trigger-props|接受所有 [Trigger](/vue/component/trigger) 组件的Props|`Partial<TriggerProps>`|`-`|\n|history-colors|历史颜色的颜色数组|`string[]`|`-`|\n|preset-colors|预设颜色的颜色数组|`string[]`|`() => colors`|\n### `<color-picker>` Events\n\n|事件名|描述|参数|\n|---|---|---|\n|change|颜色值改变时触发|value: `string`|\n|popup-visible-change|颜色面板展开和收起时触发|visible: `boolean`<br>value: `string`|\n\n\n"
  },
  {
    "path": "packages/web-vue/components/color-picker/TEMPLATE.md",
    "content": "## zh-CN\n```yaml\nmeta:\n  type: 组件\n  category: 数据输入\ntitle: 颜色选择器 ColorPicker\ndescription: 用于选择和展示颜色\n```\n---\n## en-US\n```yaml\nmeta:\n  type: Component\n  category: Data Entry\ntitle: ColorPicker\ndescription: Used for select and display colors.\n```\n---\n\n@import ./__demo__/basic.md\n@import ./__demo__/size.md\n@import ./__demo__/disabled.md\n@import ./__demo__/format.md\n@import ./__demo__/colors.md\n@import ./__demo__/trigger.md\n@import ./__demo__/trigger-element.md\n@import ./__demo__/only-panel.md\n\n## API\n\n%%API(color-picker.tsx)%%\n"
  },
  {
    "path": "packages/web-vue/components/color-picker/__demo__/basic.md",
    "content": "```yaml\ntitle:\n  zh-CN: 基本使用\n  en-US: Basic Usage\n```\n\n## zh-CN\n\n基本用法\n\n---\n\n## en-US\n\nBasic usage\n\n---\n\n```vue\n<template>\n  <a-space>\n    <a-color-picker  v-model=\"value\" />\n    <a-color-picker defaultValue=\"#165DFF\" showText disabledAlpha/>\n  </a-space>\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nconst value = ref('#165DFF')\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/color-picker/__demo__/colors.md",
    "content": "```yaml\ntitle:\n  zh-CN: 预设颜色和历史颜色\n  en-US: Preset & History\n```\n\n## zh-CN\n\n通过 `showPreset` 和 `showHistory` 开启预设颜色和历史颜色区域。历史颜色需要用户自行控制展示内容。\n\n---\n\n## en-US\n\nThe preset color and history color areas can be opened through `showPreset` and `showHistory`. Historical colors require users to control the display content themselves.\n\n---\n\n```vue\n<template>\n  <a-color-picker\n    defaultValue=\"#165DFF\"\n    :historyColors=\"history\"\n    showHistory\n    showPreset\n    @popup-visible-change=\"addHistory\"\n  />\n</template>\n\n<script setup>\nimport { ref } from 'vue';\n\nconst history = ref(['#165DFF'])\nconst addHistory = (visible, color) => {\n  if (!visible) {\n    const index = history.value.indexOf(color);\n    if (index !== -1) {\n      history.value.splice(index, 1);\n    }\n    history.value.unshift(color);\n  }\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/color-picker/__demo__/disabled.md",
    "content": "```yaml\ntitle:\n  zh-CN: 禁用\n  en-US: Disabled\n```\n\n## zh-CN\n\n设置 `disabled` 禁用选择器。\n\n---\n\n## en-US\n\nSet `disabled` to disable the selector.\n\n---\n\n```vue\n<template>\n  <a-space>\n    <a-color-picker defaultValue=\"#165DFF\" disabled />\n    <a-color-picker defaultValue=\"#165DFF\" showText disabled />\n  </a-space>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/color-picker/__demo__/format.md",
    "content": "```yaml\ntitle:\n  zh-CN: 颜色格式\n  en-US: Color format\n```\n\n## zh-CN\n\n通过 `format` 设置颜色值的格式，支持 `hex` 和 `rgb`。\n\n---\n\n## en-US\n\nSet the format of the color value through `format`, supporting `hex` and `rgb`.\n\n---\n\n```vue\n<template>\n  <a-space direction=\"vertical\">\n    <a-radio-group type=\"button\" v-model=\"format\">\n      <a-radio v-for=\"item in formatList\" :value=\"item\">{{item}}</a-radio>\n    </a-radio-group>\n    <a-color-picker defaultValue=\"#165DFF\" :format=\"format\" showText />\n  </a-space>\n</template>\n\n<script setup>\nimport { ref } from 'vue';\n\nconst format = ref('hex')\nconst formatList = ['hex', 'rgb']\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/color-picker/__demo__/only-panel.md",
    "content": "```yaml\ntitle:\n  zh-CN: 只使用面板\n  en-US: Only Panel\n```\n\n## zh-CN\n\n只用颜色选择面板。\n\n---\n\n## en-US\n\nOnly use the color selection panel.\n\n---\n\n```vue\n<template>\n  <a-space :size=\"32\">\n    <a-color-picker defaultValue=\"#165DFF\" hideTrigger showHistory showPreset/>\n    <a-color-picker defaultValue=\"#12D2AC\" disabled hideTrigger showPreset/>\n  </a-space>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/color-picker/__demo__/size.md",
    "content": "```yaml\ntitle:\n  zh-CN: 尺寸\n  en-US: Size\n```\n\n## zh-CN\n\n颜色选择器定义了四种尺寸（`mini`,`small`, `medium`, `large`），分别为 24px，28px，32px，36px。\n\n---\n\n## en-US\n\nColorPicker defines four sizes (`mini`, `small`, `medium`, `large`), which are 24px, 28px, 32px, and 36px.\n\n---\n\n```vue\n<template>\n  <a-space>\n    <a-color-picker defaultValue=\"#165DFF\" size=\"mini\" />\n    <a-color-picker defaultValue=\"#165DFF\" size=\"small\" />\n    <a-color-picker defaultValue=\"#165DFF\" size=\"medium\" />\n    <a-color-picker defaultValue=\"#165DFF\" size=\"large\" />\n  </a-space>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/color-picker/__demo__/trigger-element.md",
    "content": "```yaml\ntitle:\n  zh-CN: 自定义触发元素\n  en-US: Customize trigger element\n```\n\n## zh-CN\n\n自定义触发元素。\n\n---\n\n## en-US\n\nCustomize trigger element.\n\n---\n\n```vue\n<template>\n  <a-space>\n    <a-color-picker v-model=\"value\" size=\"mini\" >\n      <a-tag :color=\"value\">\n        <template #icon>\n          <icon-bg-colors style=\"color: #fff\" />\n        </template>\n        {{value}}\n      </a-tag>\n    </a-color-picker>\n  </a-space>\n</template>\n\n<script setup>\nimport { ref } from 'vue';\n\nconst value = ref('#165DFF');\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/color-picker/__demo__/trigger.md",
    "content": "```yaml\ntitle:\n  zh-CN: 触发器\n  en-US: Trigger\n```\n\n## zh-CN\n\n可以通过 `trigger-props` 设置触发器的所有属性。\n\n---\n\n## en-US\n\nYou can set the properties of the trigger through `trigger-props`.\n\n---\n\n```vue\n<template>\n  <a-space direction=\"vertical\">\n    <a-switch v-model=\"triggerProps.popupVisible\">\n      <template #checked> ON </template>\n      <template #unchecked>OFF</template>\n    </a-switch>\n    <a-color-picker defaultValue=\"#165DFF\" :trigger-props=\"triggerProps\" />\n  </a-space>\n</template>\n\n<script setup>\nimport { ref } from 'vue';\n\nconst triggerProps = ref({\n  popupVisible: false,\n  unmountOnClose: true,\n  renderToBody: false,\n  position: 'rt'\n})\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/color-picker/__test__/__snapshots__/demo.test.ts.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`<color-picker> demo: render [basic] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 8px; row-gap: 8px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-color-picker arco-color-picker-size-medium\\\\\">\n      <div class=\\\\\"arco-color-picker-preview\\\\\" style=\\\\\"background-color: rgb(22, 93, 255);\\\\\"></div>\n      <!----><input class=\\\\\"arco-color-picker-input\\\\\" value=\\\\\"#165DFF\\\\\">\n    </div>\n    <!---->\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-color-picker arco-color-picker-size-medium\\\\\">\n      <div class=\\\\\"arco-color-picker-preview\\\\\" style=\\\\\"background-color: rgb(22, 93, 255);\\\\\"></div>\n      <div class=\\\\\"arco-color-picker-value\\\\\">#165DFF</div><input class=\\\\\"arco-color-picker-input\\\\\" value=\\\\\"#165DFF\\\\\">\n    </div>\n    <!---->\n  </div>\n</div>\"\n`;\n\nexports[`<color-picker> demo: render [colors] correctly 1`] = `\n\"<div class=\\\\\"arco-color-picker arco-color-picker-size-medium\\\\\">\n  <div class=\\\\\"arco-color-picker-preview\\\\\" style=\\\\\"background-color: rgb(22, 93, 255);\\\\\"></div>\n  <!----><input class=\\\\\"arco-color-picker-input\\\\\" value=\\\\\"#165DFF\\\\\">\n</div>\"\n`;\n\nexports[`<color-picker> demo: render [disabled] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 8px; row-gap: 8px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-color-picker arco-color-picker-size-medium arco-color-picker-disabled\\\\\">\n      <div class=\\\\\"arco-color-picker-preview\\\\\" style=\\\\\"background-color: rgb(22, 93, 255);\\\\\"></div>\n      <!----><input class=\\\\\"arco-color-picker-input\\\\\" disabled=\\\\\"\\\\\" value=\\\\\"#165DFF\\\\\">\n    </div>\n    <!---->\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-color-picker arco-color-picker-size-medium arco-color-picker-disabled\\\\\">\n      <div class=\\\\\"arco-color-picker-preview\\\\\" style=\\\\\"background-color: rgb(22, 93, 255);\\\\\"></div>\n      <div class=\\\\\"arco-color-picker-value\\\\\">#165DFF</div><input class=\\\\\"arco-color-picker-input\\\\\" disabled=\\\\\"\\\\\" value=\\\\\"#165DFF\\\\\">\n    </div>\n    <!---->\n  </div>\n</div>\"\n`;\n\nexports[`<color-picker> demo: render [format] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-vertical\\\\\" style=\\\\\"column-gap: 8px; row-gap: 8px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-radio-group-button arco-radio-group-size-medium arco-radio-group-direction-horizontal\\\\\"><label class=\\\\\"arco-radio-button arco-radio-checked\\\\\"><input type=\\\\\"radio\\\\\" checked=\\\\\"\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"hex\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">hex</span></label><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"rgb\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">rgb</span></label></span></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-color-picker arco-color-picker-size-medium\\\\\">\n      <div class=\\\\\"arco-color-picker-preview\\\\\" style=\\\\\"background-color: rgb(22, 93, 255);\\\\\"></div>\n      <div class=\\\\\"arco-color-picker-value\\\\\">#165DFF</div><input class=\\\\\"arco-color-picker-input\\\\\" value=\\\\\"#165DFF\\\\\">\n    </div>\n    <!---->\n  </div>\n</div>\"\n`;\n\nexports[`<color-picker> demo: render [only-panel] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 32px; row-gap: 32px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-color-picker-panel\\\\\">\n      <div class=\\\\\"arco-color-picker-palette\\\\\" style=\\\\\"background-color: rgb(0, 78, 255);\\\\\">\n        <div class=\\\\\"arco-color-picker-handler\\\\\" style=\\\\\"top: 0%; left: 91.37254901960785%;\\\\\"></div>\n      </div>\n      <div class=\\\\\"arco-color-picker-panel-control\\\\\">\n        <div class=\\\\\"arco-color-picker-control-wrapper\\\\\">\n          <div>\n            <div class=\\\\\"arco-color-picker-control-bar arco-color-picker-control-bar-hue\\\\\">\n              <div class=\\\\\"arco-color-picker-handler\\\\\" style=\\\\\"left: 61.587982832618025%; color: rgb(22, 93, 255);\\\\\"></div>\n            </div>\n            <div class=\\\\\"arco-color-picker-control-bar-bg\\\\\">\n              <div class=\\\\\"arco-color-picker-control-bar arco-color-picker-control-bar-alpha\\\\\">\n                <div class=\\\\\"arco-color-picker-handler\\\\\" style=\\\\\"left: 100%; color: rgb(22, 93, 255);\\\\\"></div>\n              </div>\n            </div>\n          </div>\n          <div class=\\\\\"arco-color-picker-preview\\\\\" style=\\\\\"background-color: rgb(22, 93, 255);\\\\\"></div>\n        </div>\n        <div class=\\\\\"arco-color-picker-input-wrapper\\\\\"><span class=\\\\\"arco-select-view-single arco-select arco-color-picker-select arco-select-view arco-select-view-size-mini\\\\\" title=\\\\\"Hex\\\\\"><!----><input class=\\\\\"arco-select-view-input arco-select-view-input-hidden\\\\\" readonly=\\\\\"\\\\\" value=\\\\\"\\\\\"><span class=\\\\\"arco-select-view-value\\\\\">Hex</span><span class=\\\\\"arco-select-view-suffix\\\\\"><!----><span class=\\\\\"arco-select-view-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down arco-select-view-arrow-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n          <!----></span></span>\n          <!---->\n          <div class=\\\\\"arco-color-picker-group-wrapper\\\\\">\n            <div class=\\\\\"arco-input-group arco-color-picker-input-group\\\\\"><span class=\\\\\"arco-input-wrapper arco-color-picker-input-hex\\\\\"><span class=\\\\\"arco-input-prefix\\\\\">#</span><input class=\\\\\"arco-input arco-input-size-mini\\\\\" type=\\\\\"text\\\\\" value=\\\\\"165DFF\\\\\">\n              <!---->\n              <!----></span><span class=\\\\\"arco-input-wrapper arco-input-number arco-input-number-mode-embed arco-input-number-size-mini arco-color-picker-input-alpha\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-mini\\\\\" type=\\\\\"text\\\\\" role=\\\\\"spinbutton\\\\\" aria-valuemax=\\\\\"100\\\\\" aria-valuemin=\\\\\"0\\\\\" aria-valuenow=\\\\\"100\\\\\" value=\\\\\"100\\\\\"><!----><span class=\\\\\"arco-input-suffix\\\\\"><!----><div class=\\\\\"arco-input-number-suffix\\\\\">%</div><div class=\\\\\"arco-input-number-step\\\\\"><button class=\\\\\"arco-input-number-step-button arco-input-number-step-button-disabled\\\\\" type=\\\\\"button\\\\\" tabindex=\\\\\"-1\\\\\" disabled=\\\\\"\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-up\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 30.557 24.043 15 8.487 30.557\\\\\"></path></svg></button><button class=\\\\\"arco-input-number-step-button\\\\\" type=\\\\\"button\\\\\" tabindex=\\\\\"-1\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></button></div><!----></span></span>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\\\\\"arco-color-picker-panel-colors\\\\\">\n        <div class=\\\\\"arco-color-picker-colors-section\\\\\">\n          <div class=\\\\\"arco-color-picker-colors-text\\\\\">最近使用颜色</div>\n          <div class=\\\\\"arco-color-picker-colors-wrapper\\\\\"><span class=\\\\\"arco-color-picker-colors-empty\\\\\">暂无</span></div>\n        </div>\n        <div class=\\\\\"arco-color-picker-colors-section\\\\\">\n          <div class=\\\\\"arco-color-picker-colors-text\\\\\">系统预设颜色</div>\n          <div class=\\\\\"arco-color-picker-colors-wrapper\\\\\">\n            <div class=\\\\\"arco-color-picker-colors-list\\\\\">\n              <div class=\\\\\"arco-color-picker-color-block\\\\\" style=\\\\\"background-color: rgb(0, 180, 42);\\\\\">\n                <div class=\\\\\"arco-color-picker-block\\\\\" style=\\\\\"background-color: rgb(0, 180, 42);\\\\\"></div>\n              </div>\n              <div class=\\\\\"arco-color-picker-color-block\\\\\" style=\\\\\"background-color: rgb(60, 126, 255);\\\\\">\n                <div class=\\\\\"arco-color-picker-block\\\\\" style=\\\\\"background-color: rgb(60, 126, 255);\\\\\"></div>\n              </div>\n              <div class=\\\\\"arco-color-picker-color-block\\\\\" style=\\\\\"background-color: rgb(255, 125, 0);\\\\\">\n                <div class=\\\\\"arco-color-picker-block\\\\\" style=\\\\\"background-color: rgb(255, 125, 0);\\\\\"></div>\n              </div>\n              <div class=\\\\\"arco-color-picker-color-block\\\\\" style=\\\\\"background-color: rgb(247, 105, 101);\\\\\">\n                <div class=\\\\\"arco-color-picker-block\\\\\" style=\\\\\"background-color: rgb(247, 105, 101);\\\\\"></div>\n              </div>\n              <div class=\\\\\"arco-color-picker-color-block\\\\\" style=\\\\\"background-color: rgb(247, 186, 30);\\\\\">\n                <div class=\\\\\"arco-color-picker-block\\\\\" style=\\\\\"background-color: rgb(247, 186, 30);\\\\\"></div>\n              </div>\n              <div class=\\\\\"arco-color-picker-color-block\\\\\" style=\\\\\"background-color: rgb(245, 49, 157);\\\\\">\n                <div class=\\\\\"arco-color-picker-block\\\\\" style=\\\\\"background-color: rgb(245, 49, 157);\\\\\"></div>\n              </div>\n              <div class=\\\\\"arco-color-picker-color-block\\\\\" style=\\\\\"background-color: rgb(217, 26, 217);\\\\\">\n                <div class=\\\\\"arco-color-picker-block\\\\\" style=\\\\\"background-color: rgb(217, 26, 217);\\\\\"></div>\n              </div>\n              <div class=\\\\\"arco-color-picker-color-block\\\\\" style=\\\\\"background-color: rgb(159, 219, 29);\\\\\">\n                <div class=\\\\\"arco-color-picker-block\\\\\" style=\\\\\"background-color: rgb(159, 219, 29);\\\\\"></div>\n              </div>\n              <div class=\\\\\"arco-color-picker-color-block\\\\\" style=\\\\\"background-color: rgb(250, 220, 25);\\\\\">\n                <div class=\\\\\"arco-color-picker-block\\\\\" style=\\\\\"background-color: rgb(250, 220, 25);\\\\\"></div>\n              </div>\n              <div class=\\\\\"arco-color-picker-color-block\\\\\" style=\\\\\"background-color: rgb(114, 46, 209);\\\\\">\n                <div class=\\\\\"arco-color-picker-block\\\\\" style=\\\\\"background-color: rgb(114, 46, 209);\\\\\"></div>\n              </div>\n              <div class=\\\\\"arco-color-picker-color-block\\\\\" style=\\\\\"background-color: rgb(52, 145, 250);\\\\\">\n                <div class=\\\\\"arco-color-picker-block\\\\\" style=\\\\\"background-color: rgb(52, 145, 250);\\\\\"></div>\n              </div>\n              <div class=\\\\\"arco-color-picker-color-block\\\\\" style=\\\\\"background-color: rgb(123, 225, 136);\\\\\">\n                <div class=\\\\\"arco-color-picker-block\\\\\" style=\\\\\"background-color: rgb(123, 225, 136);\\\\\"></div>\n              </div>\n              <div class=\\\\\"arco-color-picker-color-block\\\\\" style=\\\\\"background-color: rgb(147, 190, 255);\\\\\">\n                <div class=\\\\\"arco-color-picker-block\\\\\" style=\\\\\"background-color: rgb(147, 190, 255);\\\\\"></div>\n              </div>\n              <div class=\\\\\"arco-color-picker-color-block\\\\\" style=\\\\\"background-color: rgb(255, 207, 139);\\\\\">\n                <div class=\\\\\"arco-color-picker-block\\\\\" style=\\\\\"background-color: rgb(255, 207, 139);\\\\\"></div>\n              </div>\n              <div class=\\\\\"arco-color-picker-color-block\\\\\" style=\\\\\"background-color: rgb(251, 176, 167);\\\\\">\n                <div class=\\\\\"arco-color-picker-block\\\\\" style=\\\\\"background-color: rgb(251, 176, 167);\\\\\"></div>\n              </div>\n              <div class=\\\\\"arco-color-picker-color-block\\\\\" style=\\\\\"background-color: rgb(252, 233, 150);\\\\\">\n                <div class=\\\\\"arco-color-picker-block\\\\\" style=\\\\\"background-color: rgb(252, 233, 150);\\\\\"></div>\n              </div>\n              <div class=\\\\\"arco-color-picker-color-block\\\\\" style=\\\\\"background-color: rgb(251, 157, 199);\\\\\">\n                <div class=\\\\\"arco-color-picker-block\\\\\" style=\\\\\"background-color: rgb(251, 157, 199);\\\\\"></div>\n              </div>\n              <div class=\\\\\"arco-color-picker-color-block\\\\\" style=\\\\\"background-color: rgb(240, 142, 230);\\\\\">\n                <div class=\\\\\"arco-color-picker-block\\\\\" style=\\\\\"background-color: rgb(240, 142, 230);\\\\\"></div>\n              </div>\n              <div class=\\\\\"arco-color-picker-color-block\\\\\" style=\\\\\"background-color: rgb(220, 241, 144);\\\\\">\n                <div class=\\\\\"arco-color-picker-block\\\\\" style=\\\\\"background-color: rgb(220, 241, 144);\\\\\"></div>\n              </div>\n              <div class=\\\\\"arco-color-picker-color-block\\\\\" style=\\\\\"background-color: rgb(253, 250, 148);\\\\\">\n                <div class=\\\\\"arco-color-picker-block\\\\\" style=\\\\\"background-color: rgb(253, 250, 148);\\\\\"></div>\n              </div>\n              <div class=\\\\\"arco-color-picker-color-block\\\\\" style=\\\\\"background-color: rgb(195, 150, 237);\\\\\">\n                <div class=\\\\\"arco-color-picker-block\\\\\" style=\\\\\"background-color: rgb(195, 150, 237);\\\\\"></div>\n              </div>\n              <div class=\\\\\"arco-color-picker-color-block\\\\\" style=\\\\\"background-color: rgb(159, 212, 253);\\\\\">\n                <div class=\\\\\"arco-color-picker-block\\\\\" style=\\\\\"background-color: rgb(159, 212, 253);\\\\\"></div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-color-picker-panel arco-color-picker-panel-disabled\\\\\">\n      <div class=\\\\\"arco-color-picker-palette\\\\\" style=\\\\\"background-color: rgb(0, 255, 205);\\\\\">\n        <div class=\\\\\"arco-color-picker-handler\\\\\" style=\\\\\"top: 17.647058823529417%; left: 91.42857142857143%;\\\\\"></div>\n      </div>\n      <div class=\\\\\"arco-color-picker-panel-control\\\\\">\n        <div class=\\\\\"arco-color-picker-control-wrapper\\\\\">\n          <div>\n            <div class=\\\\\"arco-color-picker-control-bar arco-color-picker-control-bar-hue\\\\\">\n              <div class=\\\\\"arco-color-picker-handler\\\\\" style=\\\\\"left: 46.70138888888889%; color: rgb(18, 210, 172);\\\\\"></div>\n            </div>\n            <div class=\\\\\"arco-color-picker-control-bar-bg\\\\\">\n              <div class=\\\\\"arco-color-picker-control-bar arco-color-picker-control-bar-alpha\\\\\">\n                <div class=\\\\\"arco-color-picker-handler\\\\\" style=\\\\\"left: 100%; color: rgb(18, 210, 172);\\\\\"></div>\n              </div>\n            </div>\n          </div>\n          <div class=\\\\\"arco-color-picker-preview\\\\\" style=\\\\\"background-color: rgb(18, 210, 172);\\\\\"></div>\n        </div>\n        <div class=\\\\\"arco-color-picker-input-wrapper\\\\\"><span class=\\\\\"arco-select-view-single arco-select arco-color-picker-select arco-select-view arco-select-view-size-mini\\\\\" title=\\\\\"Hex\\\\\"><!----><input class=\\\\\"arco-select-view-input arco-select-view-input-hidden\\\\\" readonly=\\\\\"\\\\\" value=\\\\\"\\\\\"><span class=\\\\\"arco-select-view-value\\\\\">Hex</span><span class=\\\\\"arco-select-view-suffix\\\\\"><!----><span class=\\\\\"arco-select-view-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down arco-select-view-arrow-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n          <!----></span></span>\n          <!---->\n          <div class=\\\\\"arco-color-picker-group-wrapper\\\\\">\n            <div class=\\\\\"arco-input-group arco-color-picker-input-group\\\\\"><span class=\\\\\"arco-input-wrapper arco-input-disabled arco-color-picker-input-hex\\\\\"><span class=\\\\\"arco-input-prefix\\\\\">#</span><input class=\\\\\"arco-input arco-input-size-mini\\\\\" type=\\\\\"text\\\\\" disabled=\\\\\"\\\\\" value=\\\\\"12D2AC\\\\\">\n              <!---->\n              <!----></span><span class=\\\\\"arco-input-wrapper arco-input-disabled arco-input-number arco-input-number-mode-embed arco-input-number-size-mini arco-color-picker-input-alpha\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-mini\\\\\" type=\\\\\"text\\\\\" disabled=\\\\\"\\\\\" role=\\\\\"spinbutton\\\\\" aria-valuemax=\\\\\"100\\\\\" aria-valuemin=\\\\\"0\\\\\" aria-valuenow=\\\\\"100\\\\\" value=\\\\\"100\\\\\"><!----><span class=\\\\\"arco-input-suffix\\\\\"><!----><div class=\\\\\"arco-input-number-suffix\\\\\">%</div><div class=\\\\\"arco-input-number-step\\\\\"><button class=\\\\\"arco-input-number-step-button arco-input-number-step-button-disabled\\\\\" type=\\\\\"button\\\\\" tabindex=\\\\\"-1\\\\\" disabled=\\\\\"\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-up\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 30.557 24.043 15 8.487 30.557\\\\\"></path></svg></button><button class=\\\\\"arco-input-number-step-button arco-input-number-step-button-disabled\\\\\" type=\\\\\"button\\\\\" tabindex=\\\\\"-1\\\\\" disabled=\\\\\"\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></button></div><!----></span></span>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\\\\\"arco-color-picker-panel-colors\\\\\">\n        <!---->\n        <div class=\\\\\"arco-color-picker-colors-section\\\\\">\n          <div class=\\\\\"arco-color-picker-colors-text\\\\\">系统预设颜色</div>\n          <div class=\\\\\"arco-color-picker-colors-wrapper\\\\\">\n            <div class=\\\\\"arco-color-picker-colors-list\\\\\">\n              <div class=\\\\\"arco-color-picker-color-block\\\\\" style=\\\\\"background-color: rgb(0, 180, 42);\\\\\">\n                <div class=\\\\\"arco-color-picker-block\\\\\" style=\\\\\"background-color: rgb(0, 180, 42);\\\\\"></div>\n              </div>\n              <div class=\\\\\"arco-color-picker-color-block\\\\\" style=\\\\\"background-color: rgb(60, 126, 255);\\\\\">\n                <div class=\\\\\"arco-color-picker-block\\\\\" style=\\\\\"background-color: rgb(60, 126, 255);\\\\\"></div>\n              </div>\n              <div class=\\\\\"arco-color-picker-color-block\\\\\" style=\\\\\"background-color: rgb(255, 125, 0);\\\\\">\n                <div class=\\\\\"arco-color-picker-block\\\\\" style=\\\\\"background-color: rgb(255, 125, 0);\\\\\"></div>\n              </div>\n              <div class=\\\\\"arco-color-picker-color-block\\\\\" style=\\\\\"background-color: rgb(247, 105, 101);\\\\\">\n                <div class=\\\\\"arco-color-picker-block\\\\\" style=\\\\\"background-color: rgb(247, 105, 101);\\\\\"></div>\n              </div>\n              <div class=\\\\\"arco-color-picker-color-block\\\\\" style=\\\\\"background-color: rgb(247, 186, 30);\\\\\">\n                <div class=\\\\\"arco-color-picker-block\\\\\" style=\\\\\"background-color: rgb(247, 186, 30);\\\\\"></div>\n              </div>\n              <div class=\\\\\"arco-color-picker-color-block\\\\\" style=\\\\\"background-color: rgb(245, 49, 157);\\\\\">\n                <div class=\\\\\"arco-color-picker-block\\\\\" style=\\\\\"background-color: rgb(245, 49, 157);\\\\\"></div>\n              </div>\n              <div class=\\\\\"arco-color-picker-color-block\\\\\" style=\\\\\"background-color: rgb(217, 26, 217);\\\\\">\n                <div class=\\\\\"arco-color-picker-block\\\\\" style=\\\\\"background-color: rgb(217, 26, 217);\\\\\"></div>\n              </div>\n              <div class=\\\\\"arco-color-picker-color-block\\\\\" style=\\\\\"background-color: rgb(159, 219, 29);\\\\\">\n                <div class=\\\\\"arco-color-picker-block\\\\\" style=\\\\\"background-color: rgb(159, 219, 29);\\\\\"></div>\n              </div>\n              <div class=\\\\\"arco-color-picker-color-block\\\\\" style=\\\\\"background-color: rgb(250, 220, 25);\\\\\">\n                <div class=\\\\\"arco-color-picker-block\\\\\" style=\\\\\"background-color: rgb(250, 220, 25);\\\\\"></div>\n              </div>\n              <div class=\\\\\"arco-color-picker-color-block\\\\\" style=\\\\\"background-color: rgb(114, 46, 209);\\\\\">\n                <div class=\\\\\"arco-color-picker-block\\\\\" style=\\\\\"background-color: rgb(114, 46, 209);\\\\\"></div>\n              </div>\n              <div class=\\\\\"arco-color-picker-color-block\\\\\" style=\\\\\"background-color: rgb(52, 145, 250);\\\\\">\n                <div class=\\\\\"arco-color-picker-block\\\\\" style=\\\\\"background-color: rgb(52, 145, 250);\\\\\"></div>\n              </div>\n              <div class=\\\\\"arco-color-picker-color-block\\\\\" style=\\\\\"background-color: rgb(123, 225, 136);\\\\\">\n                <div class=\\\\\"arco-color-picker-block\\\\\" style=\\\\\"background-color: rgb(123, 225, 136);\\\\\"></div>\n              </div>\n              <div class=\\\\\"arco-color-picker-color-block\\\\\" style=\\\\\"background-color: rgb(147, 190, 255);\\\\\">\n                <div class=\\\\\"arco-color-picker-block\\\\\" style=\\\\\"background-color: rgb(147, 190, 255);\\\\\"></div>\n              </div>\n              <div class=\\\\\"arco-color-picker-color-block\\\\\" style=\\\\\"background-color: rgb(255, 207, 139);\\\\\">\n                <div class=\\\\\"arco-color-picker-block\\\\\" style=\\\\\"background-color: rgb(255, 207, 139);\\\\\"></div>\n              </div>\n              <div class=\\\\\"arco-color-picker-color-block\\\\\" style=\\\\\"background-color: rgb(251, 176, 167);\\\\\">\n                <div class=\\\\\"arco-color-picker-block\\\\\" style=\\\\\"background-color: rgb(251, 176, 167);\\\\\"></div>\n              </div>\n              <div class=\\\\\"arco-color-picker-color-block\\\\\" style=\\\\\"background-color: rgb(252, 233, 150);\\\\\">\n                <div class=\\\\\"arco-color-picker-block\\\\\" style=\\\\\"background-color: rgb(252, 233, 150);\\\\\"></div>\n              </div>\n              <div class=\\\\\"arco-color-picker-color-block\\\\\" style=\\\\\"background-color: rgb(251, 157, 199);\\\\\">\n                <div class=\\\\\"arco-color-picker-block\\\\\" style=\\\\\"background-color: rgb(251, 157, 199);\\\\\"></div>\n              </div>\n              <div class=\\\\\"arco-color-picker-color-block\\\\\" style=\\\\\"background-color: rgb(240, 142, 230);\\\\\">\n                <div class=\\\\\"arco-color-picker-block\\\\\" style=\\\\\"background-color: rgb(240, 142, 230);\\\\\"></div>\n              </div>\n              <div class=\\\\\"arco-color-picker-color-block\\\\\" style=\\\\\"background-color: rgb(220, 241, 144);\\\\\">\n                <div class=\\\\\"arco-color-picker-block\\\\\" style=\\\\\"background-color: rgb(220, 241, 144);\\\\\"></div>\n              </div>\n              <div class=\\\\\"arco-color-picker-color-block\\\\\" style=\\\\\"background-color: rgb(253, 250, 148);\\\\\">\n                <div class=\\\\\"arco-color-picker-block\\\\\" style=\\\\\"background-color: rgb(253, 250, 148);\\\\\"></div>\n              </div>\n              <div class=\\\\\"arco-color-picker-color-block\\\\\" style=\\\\\"background-color: rgb(195, 150, 237);\\\\\">\n                <div class=\\\\\"arco-color-picker-block\\\\\" style=\\\\\"background-color: rgb(195, 150, 237);\\\\\"></div>\n              </div>\n              <div class=\\\\\"arco-color-picker-color-block\\\\\" style=\\\\\"background-color: rgb(159, 212, 253);\\\\\">\n                <div class=\\\\\"arco-color-picker-block\\\\\" style=\\\\\"background-color: rgb(159, 212, 253);\\\\\"></div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\"\n`;\n\nexports[`<color-picker> demo: render [size] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 8px; row-gap: 8px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-color-picker arco-color-picker-size-mini\\\\\">\n      <div class=\\\\\"arco-color-picker-preview\\\\\" style=\\\\\"background-color: rgb(22, 93, 255);\\\\\"></div>\n      <!----><input class=\\\\\"arco-color-picker-input\\\\\" value=\\\\\"#165DFF\\\\\">\n    </div>\n    <!---->\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-color-picker arco-color-picker-size-small\\\\\">\n      <div class=\\\\\"arco-color-picker-preview\\\\\" style=\\\\\"background-color: rgb(22, 93, 255);\\\\\"></div>\n      <!----><input class=\\\\\"arco-color-picker-input\\\\\" value=\\\\\"#165DFF\\\\\">\n    </div>\n    <!---->\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-color-picker arco-color-picker-size-medium\\\\\">\n      <div class=\\\\\"arco-color-picker-preview\\\\\" style=\\\\\"background-color: rgb(22, 93, 255);\\\\\"></div>\n      <!----><input class=\\\\\"arco-color-picker-input\\\\\" value=\\\\\"#165DFF\\\\\">\n    </div>\n    <!---->\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-color-picker arco-color-picker-size-large\\\\\">\n      <div class=\\\\\"arco-color-picker-preview\\\\\" style=\\\\\"background-color: rgb(22, 93, 255);\\\\\"></div>\n      <!----><input class=\\\\\"arco-color-picker-input\\\\\" value=\\\\\"#165DFF\\\\\">\n    </div>\n    <!---->\n  </div>\n</div>\"\n`;\n\nexports[`<color-picker> demo: render [trigger] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-vertical\\\\\" style=\\\\\"column-gap: 8px; row-gap: 8px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button type=\\\\\"button\\\\\" role=\\\\\"switch\\\\\" aria-checked=\\\\\"false\\\\\" class=\\\\\"arco-switch arco-switch-type-circle\\\\\"><span class=\\\\\"arco-switch-handle\\\\\"><span class=\\\\\"arco-switch-handle-icon\\\\\"></span></span><!--  prettier-ignore  --><span class=\\\\\"arco-switch-text-holder\\\\\">OFF</span><span class=\\\\\"arco-switch-text\\\\\">OFF</span></button></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-color-picker arco-color-picker-size-medium\\\\\">\n      <div class=\\\\\"arco-color-picker-preview\\\\\" style=\\\\\"background-color: rgb(22, 93, 255);\\\\\"></div>\n      <!----><input class=\\\\\"arco-color-picker-input\\\\\" value=\\\\\"#165DFF\\\\\">\n    </div>\n    <!---->\n  </div>\n</div>\"\n`;\n\nexports[`<color-picker> demo: render [trigger-element] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 8px; row-gap: 8px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-tag arco-tag-size-medium arco-tag-checked arco-tag-custom-color\\\\\" style=\\\\\"background-color: rgb(22, 93, 255);\\\\\"><span class=\\\\\"arco-tag-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-bg-colors\\\\\" style=\\\\\"color: rgb(255, 255, 255);\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"m9.442 25.25 10.351 10.765a1 1 0 0 0 1.428.014L32 25.25H9.442Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path><path d=\\\\\"M19 5.25 22.75 9m0 0 12.043 12.043a1 1 0 0 1 0 1.414L32 25.25M22.75 9 8.693 23.057a1 1 0 0 0-.013 1.4l.762.793m0 0 10.351 10.765a1 1 0 0 0 1.428.014L32 25.25m-22.558 0H32M6 42h36\\\\\"></path><path fill-rule=\\\\\"evenodd\\\\\" clip-rule=\\\\\"evenodd\\\\\" d=\\\\\"M40.013 29.812 37.201 27l-2.812 2.812a4 4 0 1 0 5.624 0Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path></svg></span> #165DFF\n    <!--v-if-->\n    <!--v-if--></span>\n    <!---->\n  </div>\n</div>\"\n`;\n"
  },
  {
    "path": "packages/web-vue/components/color-picker/__test__/demo.test.ts",
    "content": "import demoTest from '../../../scripts/demo-test';\n\ndemoTest('color-picker');\n"
  },
  {
    "path": "packages/web-vue/components/color-picker/__test__/index.test.ts",
    "content": "import { mount } from '@vue/test-utils';\nimport ColorPicker from '../index';\n\ndescribe('ColorPicker', () => {\n  test('Whether the size is rendered correctly', () => {\n    const wrapper = mount(ColorPicker, {\n      props: {\n        size: 'mini',\n      },\n    });\n    const colorPickerElement = wrapper.find('.arco-color-picker');\n    expect(colorPickerElement.classes()).toContain(\n      `arco-color-picker-size-mini`\n    );\n  });\n\n  test('Whether the disabled is rendered correctly', () => {\n    const wrapper = mount(ColorPicker, {\n      props: {\n        disabled: true,\n      },\n    });\n    const colorPickerElement = wrapper.find('.arco-color-picker');\n    expect(colorPickerElement.classes()).toContain(\n      `arco-color-picker-disabled`\n    );\n  });\n});\n"
  },
  {
    "path": "packages/web-vue/components/color-picker/color-picker.tsx",
    "content": "import { defineComponent, PropType, computed, watch } from 'vue';\nimport { Size } from '../_utils/constant';\nimport { getPrefixCls } from '../_utils/global-config';\nimport { colors } from './colors';\nimport { HSV } from './interface';\nimport Panel from './panel';\nimport Trigger, { TriggerProps } from '../trigger';\nimport useState from '../_hooks/use-state';\nimport {\n  formatInputToHSVA,\n  hsvToRgb,\n  rgbaToHex,\n  rgbToHex,\n} from '../_utils/color';\n\nexport default defineComponent({\n  name: 'ColorPicker',\n  props: {\n    /**\n     * @zh 绑定值\n     * @en Value\n     */\n    modelValue: String,\n    /**\n     * @zh 默认值（非受控状态）\n     * @en Default value (uncontrolled state)\n     */\n    defaultValue: {\n      type: String,\n    },\n    /**\n     * @zh 颜色值的格式\n     * @en Color value format\n     */\n    format: {\n      type: String as PropType<'hex' | 'rgb'>,\n    },\n    /**\n     * @zh 尺寸\n     * @en Size\n     * @values 'mini','small','medium','large'\n     */\n    size: {\n      type: String as PropType<Size>,\n      default: 'medium',\n    },\n    /**\n     * @zh 显示颜色值\n     * @en Show color value\n     */\n    showText: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 显示历史颜色\n     * @en Show history colors\n     */\n    showHistory: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 显示预设颜色\n     * @en Show preset colors\n     */\n    showPreset: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 禁用\n     * @en disabled\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 禁用透明通道\n     * @en Disable transparency channel\n     */\n    disabledAlpha: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 没有触发元素，只显示颜色面板\n     * @en There is no trigger element, only the color panel is displayed\n     * */\n    hideTrigger: {\n      type: Boolean,\n    },\n    /**\n     * @zh 接受所有 [Trigger](/vue/component/trigger) 组件的Props\n     * @en Can accept Props of all [Trigger](/vue/component/trigger) components\n     * */\n    triggerProps: {\n      type: Object as PropType<Partial<TriggerProps>>,\n    },\n    /**\n     * @zh 历史颜色的颜色数组\n     * @en Color array of historical colors\n     */\n    historyColors: {\n      type: Array as PropType<string[]>,\n    },\n    /**\n     * @zh 预设颜色的颜色数组\n     * @en Color array of preset colors\n     */\n    presetColors: {\n      type: Array as PropType<string[]>,\n      default: () => colors,\n    },\n  },\n  emits: {\n    'update:modelValue': (value: string) => true,\n    /**\n     * @zh 颜色值改变时触发\n     * @en Triggered when the color value changes\n     * @param {string} value\n     */\n    'change': (value: string) => true,\n    /**\n     * @zh 颜色面板展开和收起时触发\n     * @en Triggered when the color panel is expanded and collapsed\n     * @param {boolean} visible\n     * @param {string} value\n     */\n    'popup-visible-change': (visible: boolean, value: string) => true,\n  },\n  setup(props, { emit, slots }) {\n    const prefixCls = getPrefixCls('color-picker');\n    const mergeValue = computed(() => {\n      return props.modelValue ?? props.defaultValue;\n    });\n\n    const formatInput = computed(() => {\n      return formatInputToHSVA(mergeValue.value || '');\n    });\n\n    const [alpha, setAlpha] = useState(formatInput.value.a);\n    const [hsv, setHsv] = useState({\n      h: formatInput.value.h,\n      s: formatInput.value.s,\n      v: formatInput.value.v,\n    });\n\n    watch(\n      () => formatInput.value,\n      (value) => {\n        if (mergeValue.value !== formatValue.value) {\n          setAlpha(value.a);\n          setHsv({\n            h: value.h,\n            s: value.s,\n            v: value.v,\n          });\n        }\n      }\n    );\n\n    const color = computed(() => {\n      const rgb = hsvToRgb(hsv.value.h, hsv.value.s, hsv.value.v);\n      const hex = rgbToHex(rgb.r, rgb.g, rgb.b);\n      return {\n        hsv: hsv.value,\n        rgb,\n        hex,\n      };\n    });\n\n    const colorString = computed(() => {\n      const { r, g, b } = color.value.rgb;\n      return `rgba(${r}, ${g}, ${b}, ${alpha.value.toFixed(2)})`;\n    });\n\n    const formatValue = computed(() => {\n      const { r, g, b } = color.value.rgb;\n      if (props.format === 'rgb') {\n        return alpha.value < 1 && !props.disabledAlpha\n          ? `rgba(${r}, ${g}, ${b}, ${alpha.value.toFixed(2)})`\n          : `rgb(${r}, ${g}, ${b})`;\n      }\n      return alpha.value < 1 && !props.disabledAlpha\n        ? `#${rgbaToHex(r, g, b, alpha.value)}`\n        : `#${rgbToHex(r, g, b)}`;\n    });\n\n    watch(formatValue, (value) => {\n      emit('update:modelValue', value);\n      emit('change', value);\n    });\n\n    const onHsvChange = (_value: HSV) => {\n      !props.disabled && setHsv(_value);\n    };\n\n    const onAlphaChange = (_value: number) => {\n      !props.disabled && setAlpha(_value);\n    };\n\n    const onPopupVisibleChange = (visible: boolean) => {\n      emit('popup-visible-change', visible, formatValue.value);\n    };\n\n    const renderInput = () => {\n      return (\n        <div\n          class={{\n            [prefixCls]: true,\n            [`${prefixCls}-size-${props.size}`]: props.size,\n            [`${prefixCls}-disabled`]: props.disabled,\n          }}\n        >\n          <div\n            class={`${prefixCls}-preview`}\n            style={{ backgroundColor: formatValue.value }}\n          />\n          {props.showText && (\n            <div class={`${prefixCls}-value`}>{formatValue.value}</div>\n          )}\n          <input\n            class={`${prefixCls}-input`}\n            value={formatValue.value}\n            disabled={props.disabled}\n          />\n        </div>\n      );\n    };\n\n    const renderPanel = () => {\n      return (\n        <Panel\n          color={color.value}\n          alpha={alpha.value}\n          colorString={colorString.value}\n          historyColors={props.historyColors}\n          presetColors={props.presetColors}\n          showHistory={props.showHistory}\n          showPreset={props.showPreset}\n          disabled={props.disabled}\n          disabledAlpha={props.disabledAlpha}\n          format={props.format}\n          onHsvChange={onHsvChange}\n          onAlphaChange={onAlphaChange}\n        />\n      );\n    };\n\n    return () => {\n      return props.hideTrigger ? (\n        renderPanel()\n      ) : (\n        <Trigger\n          v-slots={{ content: renderPanel }}\n          trigger=\"click\"\n          position=\"bl\"\n          animationName=\"slide-dynamic-origin\"\n          popupOffset={4}\n          disabled={props.disabled}\n          onPopupVisibleChange={onPopupVisibleChange}\n          {...props.triggerProps}\n        >\n          {slots.default ? slots.default() : renderInput()}\n        </Trigger>\n      );\n    };\n  },\n});\n"
  },
  {
    "path": "packages/web-vue/components/color-picker/colors.ts",
    "content": "export const colors = [\n  '#00B42A',\n  '#3C7EFF',\n  '#FF7D00',\n  '#F76965',\n  '#F7BA1E',\n  '#F5319D',\n  '#D91AD9',\n  '#9FDB1D',\n  '#FADC19',\n  '#722ED1',\n  '#3491FA',\n  '#7BE188',\n  '#93BEFF',\n  '#FFCF8B',\n  '#FBB0A7',\n  '#FCE996',\n  '#FB9DC7',\n  '#F08EE6',\n  '#DCF190',\n  '#FDFA94',\n  '#C396ED',\n  '#9FD4FD',\n];\n"
  },
  {
    "path": "packages/web-vue/components/color-picker/control-bar.tsx",
    "content": "import { defineComponent, PropType, toRefs, computed } from 'vue';\nimport { getPrefixCls } from '../_utils/global-config';\nimport { Color } from './interface';\nimport { useControlBlock } from './hooks/use-control-block';\n\nexport default defineComponent({\n  name: 'ControlBar',\n  props: {\n    x: {\n      type: Number,\n      required: true,\n    },\n    color: {\n      type: Object as PropType<Color>,\n      required: true,\n    },\n    colorString: String,\n    type: String as PropType<'hue' | 'alpha'>,\n    onChange: Function as PropType<(x: number) => void>,\n  },\n  setup(props) {\n    const prefixCls = getPrefixCls('color-picker');\n    const rgb = computed(() => props.color.rgb);\n\n    const { blockRef, handlerRef, onMouseDown } = useControlBlock({\n      value: [props.x, 0],\n      onChange: (pos) => props.onChange?.(pos[0]),\n    });\n\n    const renderHandler = () => {\n      return (\n        <div\n          ref={handlerRef}\n          class={`${prefixCls}-handler`}\n          style={{\n            left: `${props.x * 100}%`,\n            color: props.colorString,\n          }}\n        />\n      );\n    };\n\n    return () => {\n      if (props.type === 'alpha') {\n        return (\n          <div class={`${prefixCls}-control-bar-bg`}>\n            <div\n              ref={blockRef}\n              class={[\n                `${prefixCls}-control-bar`,\n                `${prefixCls}-control-bar-alpha`,\n              ]}\n              style={{\n                background: `linear-gradient(to right, rgba(0, 0, 0, 0), rgb(${rgb.value.r}, ${rgb.value.g}, ${rgb.value.b}))`,\n              }}\n              onMousedown={onMouseDown}\n            >\n              {renderHandler()}\n            </div>\n          </div>\n        );\n      }\n      return (\n        <div\n          ref={blockRef}\n          class={[`${prefixCls}-control-bar`, `${prefixCls}-control-bar-hue`]}\n          onMousedown={onMouseDown}\n        >\n          {renderHandler()}\n        </div>\n      );\n    };\n  },\n});\n"
  },
  {
    "path": "packages/web-vue/components/color-picker/hooks/use-control-block.ts",
    "content": "import { ref } from 'vue';\n\ninterface ControlBlockParams {\n  value: [number, number];\n  onChange: (value: [number, number]) => void;\n}\n\nexport const useControlBlock = ({ value, onChange }: ControlBlockParams) => {\n  const active = ref(false);\n  const blockRef = ref<HTMLDivElement>();\n  const handlerRef = ref<HTMLDivElement>();\n\n  const getPercentNumber = (value: number, max: number) => {\n    if (value < 0) return 0;\n    if (value > max) return 1;\n    return value / max;\n  };\n\n  const setCurrentPosition = (ev: MouseEvent) => {\n    if (!blockRef.value) return;\n    const { clientX, clientY } = ev;\n    const rect = blockRef.value.getBoundingClientRect();\n    const newValue: [number, number] = [\n      getPercentNumber(clientX - rect.x, rect.width),\n      getPercentNumber(clientY - rect.y, rect.height),\n    ];\n    if (newValue[0] !== value[0] || newValue[1] !== value[1]) {\n      onChange?.(newValue);\n    }\n  };\n\n  const removeListener = () => {\n    active.value = false;\n    window.removeEventListener('mousemove', onMouseMove);\n    window.removeEventListener('mouseup', removeListener);\n    window.removeEventListener('contextmenu', removeListener);\n  };\n\n  const onMouseDown = (ev: MouseEvent) => {\n    active.value = true;\n    setCurrentPosition(ev);\n    window.addEventListener('mousemove', onMouseMove);\n    window.addEventListener('mouseup', removeListener);\n    window.addEventListener('contextmenu', removeListener);\n  };\n\n  function onMouseMove(ev: MouseEvent) {\n    ev.preventDefault();\n    if (ev.buttons > 0) {\n      setCurrentPosition(ev);\n    } else {\n      removeListener();\n    }\n  }\n\n  return {\n    active,\n    blockRef,\n    handlerRef,\n    onMouseDown,\n  };\n};\n"
  },
  {
    "path": "packages/web-vue/components/color-picker/index.ts",
    "content": "import type { App } from 'vue';\nimport type { ArcoOptions } from '../_utils/types';\nimport { setGlobalConfig, getComponentPrefix } from '../_utils/global-config';\nimport _ColorPicker from './color-picker';\n\nconst ColorPicker = Object.assign(_ColorPicker, {\n  install: (app: App, options?: ArcoOptions) => {\n    setGlobalConfig(app, options);\n    const componentPrefix = getComponentPrefix(options);\n\n    app.component(componentPrefix + _ColorPicker.name, _ColorPicker);\n  },\n});\n\nexport type { RGB, HSV, Color } from './interface';\nexport type ColorPickerInstance = InstanceType<typeof _ColorPicker>;\n\nexport default ColorPicker;\n"
  },
  {
    "path": "packages/web-vue/components/color-picker/input-alpha.tsx",
    "content": "import { defineComponent, PropType } from 'vue';\nimport { getPrefixCls } from '../_utils/global-config';\nimport InputNumber from '../input-number';\n\nexport default defineComponent({\n  name: 'InputAlpha',\n  props: {\n    value: {\n      type: Number,\n      required: true,\n    },\n    disabled: Boolean,\n    onChange: Function as PropType<(value: number) => void>,\n  },\n  setup(props) {\n    const prefixCls = getPrefixCls('color-picker');\n\n    return () => (\n      <InputNumber\n        class={`${prefixCls}-input-alpha`}\n        size=\"mini\"\n        v-slots={{ suffix: () => '%' }}\n        min={0}\n        max={100}\n        disabled={props.disabled}\n        modelValue={Math.round(props.value * 100)}\n        onChange={(a = 100) => props.onChange?.(a / 100)}\n      />\n    );\n  },\n});\n"
  },
  {
    "path": "packages/web-vue/components/color-picker/input-hex.tsx",
    "content": "import { defineComponent, PropType, toRefs, watch } from 'vue';\nimport { getPrefixCls } from '../_utils/global-config';\nimport { Color, HSV } from './interface';\nimport { hexToRgb, rgbToHsv } from '../_utils/color';\nimport useState from '../_hooks/use-state';\nimport Input, { InputGroup } from '../input';\nimport InputAlpha from './input-alpha';\n\nexport default defineComponent({\n  name: 'InputHex',\n  props: {\n    color: {\n      type: Object as PropType<Color>,\n      required: true,\n    },\n    alpha: {\n      type: Number,\n      required: true,\n    },\n    disabled: Boolean,\n    disabledAlpha: Boolean,\n    onHsvChange: Function as PropType<(value: HSV) => void>,\n    onAlphaChange: Function as PropType<(value: number) => void>,\n  },\n  setup(props) {\n    const prefixCls = getPrefixCls('color-picker');\n    const { color } = toRefs(props);\n    const [hex, setHex] = useState(color.value.hex);\n\n    const handlerChange = (value: string) => {\n      const _rgb = hexToRgb(value) || { r: 255, g: 0, b: 0 };\n      const hsv = rgbToHsv(_rgb.r, _rgb.g, _rgb.b);\n      props.onHsvChange?.(hsv);\n    };\n\n    const onInputChange = (value: string) => {\n      const matchValue = value.match(/[a-fA-F0-9]*/g)?.join('') ?? '';\n      if (matchValue !== color.value.hex) {\n        handlerChange(matchValue.toUpperCase());\n      }\n    };\n\n    const onPaste = (ev: ClipboardEvent) => {\n      if (!ev.clipboardData) return;\n      let text = ev.clipboardData.getData('Text');\n      if (text.startsWith('#')) {\n        text = text.slice(1);\n      }\n      onInputChange(text);\n      ev.preventDefault();\n    };\n\n    watch(color, () => {\n      if (color.value.hex !== hex.value) {\n        setHex(color.value.hex);\n      }\n    });\n\n    return () => (\n      <InputGroup class={`${prefixCls}-input-group`}>\n        <Input\n          class={`${prefixCls}-input-hex`}\n          v-slots={{ prefix: () => '#' }}\n          size=\"mini\"\n          maxLength={6}\n          disabled={props.disabled}\n          modelValue={hex.value}\n          onInput={setHex}\n          onChange={onInputChange}\n          onBlur={() => handlerChange}\n          onPressEnter={() => handlerChange}\n          // @ts-ignore\n          onPaste={onPaste}\n        />\n        {!props.disabledAlpha && (\n          <InputAlpha\n            disabled={props.disabled}\n            value={props.alpha}\n            onChange={props.onAlphaChange}\n          />\n        )}\n      </InputGroup>\n    );\n  },\n});\n"
  },
  {
    "path": "packages/web-vue/components/color-picker/input-rgb.tsx",
    "content": "import { defineComponent, PropType, toRefs } from 'vue';\nimport { getPrefixCls } from '../_utils/global-config';\nimport { Color, HSV, RGB } from './interface';\nimport { rgbToHsv } from '../_utils/color';\nimport { InputGroup } from '../input';\nimport InputNumber from '../input-number';\nimport InputAlpha from './input-alpha';\n\nexport default defineComponent({\n  name: 'InputRgb',\n  props: {\n    color: {\n      type: Object as PropType<Color>,\n      required: true,\n    },\n    alpha: {\n      type: Number,\n      required: true,\n    },\n    disabled: Boolean,\n    disabledAlpha: Boolean,\n    onHsvChange: Function as PropType<(value: HSV) => void>,\n    onAlphaChange: Function as PropType<(value: number) => void>,\n  },\n  setup(props) {\n    const prefixCls = getPrefixCls('color-picker');\n    const { color } = toRefs(props);\n\n    const handleChange = (value: Partial<RGB>) => {\n      const newRGB = { ...color.value.rgb, ...value };\n      const hsv = rgbToHsv(newRGB.r, newRGB.g, newRGB.b);\n      props.onHsvChange?.(hsv);\n    };\n\n    return () => (\n      <InputGroup class={`${prefixCls}-input-group`}>\n        {(['r', 'g', 'b'] as Array<keyof RGB>).map((channel) => (\n          <InputNumber\n            key={channel}\n            size=\"mini\"\n            min={0}\n            max={255}\n            disabled={props.disabled}\n            modelValue={color.value.rgb[channel]}\n            hideButton\n            onChange={(val = 0) => handleChange({ [channel]: val })}\n          />\n        ))}\n        {!props.disabledAlpha && (\n          <InputAlpha\n            disabled={props.disabled}\n            value={props.alpha}\n            onChange={props.onAlphaChange}\n          />\n        )}\n      </InputGroup>\n    );\n  },\n});\n"
  },
  {
    "path": "packages/web-vue/components/color-picker/interface.ts",
    "content": "export interface RGB {\n  r: number;\n  g: number;\n  b: number;\n}\n\nexport interface HSV {\n  h: number;\n  s: number;\n  v: number;\n}\n\nexport interface Color {\n  hsv: HSV;\n  rgb: RGB;\n  hex: string;\n}\n"
  },
  {
    "path": "packages/web-vue/components/color-picker/palette.tsx",
    "content": "import { defineComponent, computed, PropType, toRefs, watch } from 'vue';\nimport { getPrefixCls } from '../_utils/global-config';\nimport { hsvToRgb } from '../_utils/color';\nimport { Color } from './interface';\nimport { useControlBlock } from './hooks/use-control-block';\n\nexport default defineComponent({\n  name: 'Palette',\n  props: {\n    color: {\n      type: Object as PropType<Color>,\n      required: true,\n    },\n    onChange: Function as PropType<(s: number, v: number) => void>,\n  },\n  setup(props) {\n    const prefixCls = getPrefixCls('color-picker');\n    const hsv = computed(() => props.color.hsv);\n\n    const { blockRef, handlerRef, onMouseDown } = useControlBlock({\n      value: [hsv.value.s, 1 - hsv.value.v],\n      onChange: (value) => props.onChange?.(value[0], 1 - value[1]),\n    });\n\n    const hueColor = computed(() => {\n      const rgb = hsvToRgb(hsv.value.h, 1, 1);\n      return `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`;\n    });\n\n    return () => (\n      <div\n        ref={blockRef}\n        class={`${prefixCls}-palette`}\n        style={{ backgroundColor: hueColor.value }}\n        onMousedown={onMouseDown}\n      >\n        <div\n          ref={handlerRef}\n          class={`${prefixCls}-handler`}\n          style={{\n            top: `${(1 - hsv.value.v) * 100}%`,\n            left: `${hsv.value.s * 100}%`,\n          }}\n        />\n      </div>\n    );\n  },\n});\n"
  },
  {
    "path": "packages/web-vue/components/color-picker/panel.tsx",
    "content": "import { PropType, computed, defineComponent, ref } from 'vue';\nimport { getPrefixCls } from '../_utils/global-config';\nimport { hexToRgb, rgbToHsv } from '../_utils/color';\nimport { Color, HSV } from './interface';\nimport { useI18n } from '../locale';\nimport useState from '../_hooks/use-state';\nimport ControlBar from './control-bar';\nimport Palette from './palette';\nimport Select from '../select';\nimport InputRgb from './input-rgb';\nimport InputHex from './input-hex';\n\nexport default defineComponent({\n  name: 'Panel',\n  props: {\n    color: {\n      type: Object as PropType<Color>,\n      required: true,\n    },\n    alpha: {\n      type: Number,\n      required: true,\n    },\n    colorString: String,\n    disabled: Boolean,\n    disabledAlpha: Boolean,\n    showHistory: Boolean,\n    showPreset: Boolean,\n    format: String as PropType<'hex' | 'rgb'>,\n    historyColors: Array as PropType<string[]>,\n    presetColors: Array as PropType<string[]>,\n    onAlphaChange: Function as PropType<(alpha: number) => void>,\n    onHsvChange: Function as PropType<(hsv: HSV) => void>,\n  },\n  setup(props) {\n    const { t } = useI18n();\n    const prefixCls = getPrefixCls('color-picker');\n    const hsv = computed(() => props.color.hsv);\n    const [format, setFormat] = useState<'hex' | 'rgb'>(props.format || 'hex');\n\n    const onChange = (value: any) => {\n      setFormat(value);\n    };\n\n    const showCopy = ref(false);\n\n    const onHexInputChange = (value: string) => {\n      const _rgb = hexToRgb(value) || { r: 255, g: 0, b: 0 };\n      const _hsv = rgbToHsv(_rgb.r, _rgb.g, _rgb.b);\n      props.onHsvChange?.(_hsv);\n    };\n\n    const renderInput = () => {\n      const commonProps = {\n        color: props.color,\n        alpha: props.alpha,\n        disabled: props.disabled,\n        disabledAlpha: props.disabledAlpha,\n        onHsvChange: props.onHsvChange,\n        onAlphaChange: props.onAlphaChange,\n      };\n      if (format.value === 'rgb') {\n        return <InputRgb {...commonProps} />;\n      }\n      return <InputHex {...commonProps} />;\n    };\n\n    const renderColorBlock = (color: string) => {\n      return (\n        <div\n          key={color}\n          class={`${prefixCls}-color-block`}\n          style={{ backgroundColor: color }}\n          onClick={() => onHexInputChange(color)}\n        >\n          <div\n            class={`${prefixCls}-block`}\n            style={{ backgroundColor: color }}\n          />\n        </div>\n      );\n    };\n\n    const renderColorSection = (text: string, colors: string[] | undefined) => (\n      <div class={`${prefixCls}-colors-section`}>\n        <div class={`${prefixCls}-colors-text`}>{text}</div>\n        <div class={`${prefixCls}-colors-wrapper`}>\n          {colors?.length ? (\n            <div class={`${prefixCls}-colors-list`}>\n              {colors.map(renderColorBlock)}\n            </div>\n          ) : (\n            <span class={`${prefixCls}-colors-empty`}>\n              {t('colorPicker.empty')}\n            </span>\n          )}\n        </div>\n      </div>\n    );\n\n    const renderColorSec = () => {\n      if (props.showHistory || props.showPreset) {\n        return (\n          <div class={`${prefixCls}-panel-colors`}>\n            {props.showHistory &&\n              renderColorSection(t('colorPicker.history'), props.historyColors)}\n            {props.showPreset &&\n              renderColorSection(t('colorPicker.preset'), props.presetColors)}\n          </div>\n        );\n      }\n      return null;\n    };\n\n    return () => (\n      <div\n        class={{\n          [`${prefixCls}-panel`]: true,\n          [`${prefixCls}-panel-disabled`]: props.disabled,\n        }}\n      >\n        <Palette\n          color={props.color}\n          onChange={(s, v) => props.onHsvChange?.({ h: hsv.value.h, s, v })}\n        />\n        <div class={`${prefixCls}-panel-control`}>\n          <div class={`${prefixCls}-control-wrapper`}>\n            <div>\n              <ControlBar\n                type=\"hue\"\n                x={hsv.value.h}\n                color={props.color}\n                colorString={props.colorString}\n                onChange={(h) =>\n                  props.onHsvChange?.({ h, s: hsv.value.s, v: hsv.value.v })\n                }\n              />\n              {!props.disabledAlpha && (\n                <ControlBar\n                  type=\"alpha\"\n                  x={props.alpha}\n                  color={props.color}\n                  colorString={props.colorString}\n                  onChange={props.onAlphaChange}\n                />\n              )}\n            </div>\n            <div\n              class={`${prefixCls}-preview`}\n              style={{ backgroundColor: props.colorString }}\n            />\n          </div>\n          <div class={`${prefixCls}-input-wrapper`}>\n            <Select\n              class={`${prefixCls}-select`}\n              size=\"mini\"\n              trigger-props={{ class: `${prefixCls}-select-popup` }}\n              options={[\n                {\n                  value: 'hex',\n                  label: 'Hex',\n                },\n                {\n                  value: 'rgb',\n                  label: 'RGB',\n                },\n              ]}\n              modelValue={format.value}\n              onChange={onChange}\n            />\n            <div class={`${prefixCls}-group-wrapper`}>{renderInput()}</div>\n          </div>\n        </div>\n        {renderColorSec()}\n      </div>\n    );\n  },\n});\n"
  },
  {
    "path": "packages/web-vue/components/color-picker/style/index.less",
    "content": "@import './token.less';\n\n@color-picker-prefix-cls: ~'@{prefix}-color-picker';\n\n.@{color-picker-prefix-cls} {\n  display: inline-flex;\n  align-items: center;\n  box-sizing: border-box;\n  background-color: @color-input-bg-color;\n  border-radius: @color-input-border-radius;\n\n  &-preview {\n    box-sizing: border-box;\n    border: @color-preview-border-size solid @color-preview-border-color;\n  }\n\n  &-value {\n    margin-left: @color-value-margin-left;\n    color: @color-value-font-color;\n    font-weight: @color-value-font-size;\n  }\n\n  &-input {\n    display: none;\n  }\n\n  &:hover {\n    background-color: var(--color-fill-3);\n    cursor: pointer;\n  }\n\n  .size-mixin(@size) {\n    height: ~'@{input-size-@{size}-height}';\n    padding: ~'@{color-input-size-@{size}-padding}';\n\n    .@{color-picker-prefix-cls}-preview {\n      width: ~'@{color-preview-size-@{size}}';\n      height: ~'@{color-preview-size-@{size}}';\n    }\n\n    .@{color-picker-prefix-cls}-value {\n      font-size: ~'@{color-value-size-@{size}-font-size}';\n    }\n  }\n\n  &-size-medium {\n    .size-mixin(medium);\n  }\n\n  &-size-mini {\n    .size-mixin(mini);\n  }\n\n  &-size-small {\n    .size-mixin(small);\n  }\n\n  &-size-large {\n    .size-mixin(large);\n  }\n\n  &&-disabled {\n    background-color: @color-input-bg-color;\n    cursor: not-allowed;\n\n    .@{color-picker-prefix-cls}-value {\n      color: @color-value-font-color_disabled;\n    }\n  }\n}\n\n.@{color-picker-prefix-cls}-panel {\n  width: @color-panel-width;\n  background-color: @color-panel-bg-color;\n  border-radius: @color-panel-border-radius;\n  box-shadow: @color-panel-box-shadow;\n\n  .@{color-picker-prefix-cls}-palette {\n    position: relative;\n    box-sizing: border-box;\n    width: 100%;\n    height: @color-palette-height;\n    overflow: hidden;\n    background-image: linear-gradient(0deg, rgb(0, 0, 0), transparent),\n      linear-gradient(90deg, rgb(255, 255, 255), rgba(255, 255, 255, 0%));\n    border-top: 1px solid @color-panel-border-color;\n    border-right: 1px solid @color-panel-border-color;\n    border-left: 1px solid @color-panel-border-color;\n    cursor: pointer;\n\n    .@{color-picker-prefix-cls}-handler {\n      position: absolute;\n      box-sizing: border-box;\n      width: @color-palette-handle-size;\n      height: @color-palette-handle-size;\n      background-color: transparent;\n      border: @color-palette-handle-border-size solid var(--color-bg-white);\n      border-radius: @border-radius-circle;\n      transform: translate(-50%, -50%);\n    }\n  }\n\n  .@{color-picker-prefix-cls}-panel-control {\n    padding: @color-panel-padding;\n\n    .@{color-picker-prefix-cls}-control-wrapper {\n      display: flex;\n      align-items: center;\n\n      .@{color-picker-prefix-cls}-preview {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        box-sizing: border-box;\n        width: @color-panel-preview-size;\n        height: @color-panel-preview-size;\n        margin-left: auto;\n        color: #fff;\n        font-size: (@color-panel-preview-size / 2);\n        border: 1px solid @color-panel-border-color;\n        border-radius: @border-radius-medium;\n      }\n\n      .@{color-picker-prefix-cls}-control-bar-alpha {\n        margin-top: @color-control-bar-alpha-margin-top;\n      }\n    }\n\n    .@{color-picker-prefix-cls}-input-wrapper {\n      display: flex;\n      margin-top: @color-panel-input-margin-top;\n\n      .@{color-picker-prefix-cls}-group-wrapper {\n        display: flex;\n        flex: 1;\n        margin-left: @color-panel-input-group-margin-left;\n      }\n\n      .@{prefix}-select-view,\n      .@{prefix}-input-wrapper {\n        margin-right: @spacing-none;\n        padding: 0 @spacing-3;\n      }\n\n      .@{prefix}-input-suffix,\n      .@{prefix}-input-prefix,\n      .@{prefix}-select-view-suffix {\n        padding: @spacing-none;\n        font-size: @size-3;\n      }\n    }\n  }\n\n  .@{color-picker-prefix-cls}-panel-colors {\n    padding: @color-panel-padding;\n    border-top: 1px solid var(--color-fill-3);\n\n    .@{color-picker-prefix-cls}-colors-section:not(:first-child) {\n      margin-top: @spacing-6;\n    }\n\n    .@{color-picker-prefix-cls}-colors-text {\n      color: var(--color-text-1);\n      font-weight: @font-weight-400;\n      font-size: @color-panel-section-title-font-size;\n    }\n\n    .@{color-picker-prefix-cls}-colors-empty {\n      margin: @spacing-6 0;\n      color: var(--color-text-3);\n      font-size: @color-panel-empty-font-size;\n    }\n\n    .@{color-picker-prefix-cls}-colors-wrapper {\n      margin-top: @spacing-4;\n    }\n\n    .@{color-picker-prefix-cls}-colors-list {\n      display: flex;\n      flex-wrap: wrap;\n      margin: -8px -4px 0;\n    }\n\n    .@{color-picker-prefix-cls}-color-block {\n      width: @color-panel-block-size;\n      height: @color-panel-block-size;\n      margin: @color-panel-block-margin (@color-panel-block-margin / 2) 0;\n      overflow: hidden;\n      background-image: conic-gradient(\n        rgba(0, 0, 0, 6%) 0 25%,\n        transparent 0 50%,\n        rgba(0, 0, 0, 6%) 0 75%,\n        transparent 0\n      );\n      background-size: 8px 8px;\n      border-radius: @color-panel-block-border-radius;\n      cursor: pointer;\n      transition: transform ease-out 60ms;\n\n      .@{color-picker-prefix-cls}-block {\n        width: 100%;\n        height: 100%;\n      }\n\n      &:hover {\n        transform: scale(1.1);\n      }\n    }\n  }\n\n  .@{color-picker-prefix-cls}-control-bar-bg {\n    background-image: conic-gradient(\n      rgba(0, 0, 0, 6%) 0 25%,\n      transparent 0 50%,\n      rgba(0, 0, 0, 6%) 0 75%,\n      transparent 0\n    );\n    background-size: 8px 8px;\n    border-radius: @color-control-bar-border-radius;\n  }\n\n  .@{color-picker-prefix-cls}-control-bar {\n    position: relative;\n    box-sizing: border-box;\n    width: @color-control-bar-width;\n    height: @color-control-bar-height;\n    border: 1px solid @color-panel-border-color;\n    border-radius: @color-control-bar-border-radius;\n    cursor: pointer;\n\n    .@{color-picker-prefix-cls}-handler {\n      position: absolute;\n      top: -2px;\n      box-sizing: border-box;\n      width: @color-control-bar-handle-size;\n      height: @color-control-bar-handle-size;\n      background-color: var(--color-bg-white);\n      border: 1px solid var(--color-border-2);\n      border-radius: @border-radius-circle;\n      transform: translateX(-50%);\n\n      &::before {\n        display: block;\n        width: 100%;\n        height: 100%;\n        background: var(--color-bg-white);\n        border-radius: @border-radius-circle;\n        content: '';\n      }\n\n      &::after {\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        width: @color-control-bar-handle-size - 8;\n        height: @color-control-bar-handle-size - 8;\n        background: currentColor;\n        border-radius: @border-radius-circle;\n        transform: translate(-50%, -50%);\n        content: '';\n      }\n    }\n\n    &-hue {\n      background: linear-gradient(\n        90deg,\n        #f00 0,\n        #ff0 17%,\n        #0f0 33%,\n        #0ff 50%,\n        #00f 67%,\n        #f0f 83%,\n        #f00\n      );\n    }\n  }\n\n  .@{color-picker-prefix-cls}-select {\n    width: @color-panel-format-select-width;\n  }\n\n  .@{color-picker-prefix-cls}-input-alpha {\n    flex: 0 0 auto;\n    width: @color-panel-alpha-input-width;\n  }\n\n  .@{color-picker-prefix-cls}-input-hex {\n    .@{prefix}-input {\n      padding-left: @spacing-2;\n    }\n  }\n\n  &&-disabled {\n    .@{color-picker-prefix-cls}-palette,\n    .@{color-picker-prefix-cls}-control-bar,\n    .@{color-picker-prefix-cls}-color-block,\n    .@{color-picker-prefix-cls}-preview {\n      cursor: not-allowed;\n      opacity: 0.8;\n    }\n  }\n}\n\n.@{color-picker-prefix-cls}-select-popup {\n  & .@{prefix}-select-option {\n    font-size: @font-size-body-1 !important;\n    line-height: @size-mini !important;\n  }\n}\n"
  },
  {
    "path": "packages/web-vue/components/color-picker/style/index.ts",
    "content": "import '../../style/index.less';\nimport '../../input/style';\nimport '../../input-number/style';\nimport '../../select/style';\nimport './index.less';\n"
  },
  {
    "path": "packages/web-vue/components/color-picker/style/token.less",
    "content": "@import '../../style/theme/index.less';\n@import '../../input/style/token.less';\n\n@color-preview-size-mini: @size-4;\n@color-preview-size-small: 22px;\n@color-preview-size-medium: @size-6;\n@color-preview-size-large: 26px;\n\n@color-input-size-mini-padding: (\n    (@input-size-mini-height - @color-preview-size-mini) / 2\n  )\n  @spacing-2;\n@color-input-size-small-padding: (\n    (@input-size-small-height - @color-preview-size-small) / 2\n  )\n  @spacing-2;\n@color-input-size-medium-padding: (\n    (@input-size-medium-height - @color-preview-size-medium) / 2\n  )\n  @spacing-2;\n@color-input-size-large-padding: (\n    (@input-size-large-height - @color-preview-size-large) / 2\n  )\n  5px;\n\n@color-input-bg-color: var(~'@{arco-cssvars-prefix}-color-fill-2');\n@color-value-margin-left: @spacing-2;\n@color-value-font-color: var(~'@{arco-cssvars-prefix}-color-text-1');\n@color-value-font-color_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');\n\n@color-value-size-mini-font-size: @font-size-body-1;\n@color-value-size-small-font-size: @font-size-body-3;\n@color-value-size-medium-font-size: @font-size-body-3;\n@color-value-size-large-font-size: @font-size-body-3;\n\n@color-input-border-radius: @border-radius-small;\n@color-preview-border-size: @border-1;\n@color-preview-border-color: var(~'@{arco-cssvars-prefix}-color-border-2');\n@color-value-font-size: @font-weight-400;\n\n@color-panel-width: 260px;\n@color-panel-padding: @spacing-6;\n@color-panel-border-radius: @border-radius-small;\n@color-panel-bg-color: var(~'@{arco-cssvars-prefix}-color-bg-1');\n@color-panel-box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 10%);\n\n@color-palette-height: 178px;\n@color-palette-handle-size: @size-4;\n@color-palette-handle-border-size: @border-2;\n\n@color-control-bar-width: 182px;\n@color-control-bar-height: 14px;\n@color-control-bar-handle-size: @size-4;\n@color-control-bar-alpha-margin-top: @spacing-6;\n@color-control-bar-border-radius: 10px;\n\n@color-panel-input-margin-top: @spacing-6;\n@color-panel-input-group-margin-left: @spacing-6;\n@color-panel-preview-size: 40px;\n@color-panel-format-select-width: 58px;\n@color-panel-alpha-input-width: 52px;\n\n@color-panel-section-title-font-size: @font-size-caption;\n@color-panel-empty-font-size: @font-size-body-1;\n\n@color-panel-block-size: @size-4;\n@color-panel-block-margin: @spacing-3;\n@color-panel-block-border-radius: @border-2;\n\n@color-panel-border-color: var(~'@{arco-cssvars-prefix}-color-border-2');\n"
  },
  {
    "path": "packages/web-vue/components/comment/README.en-US.md",
    "content": "```yaml\nmeta:\n  type: Component\n  category: Data Display\ntitle: Comment\ndescription: Display a comment.\n```\n\n*Auto translate by google.*\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/align.md\n\n@import ./__demo__/nest.md\n\n@import ./__demo__/editor.md\n\n## API\n\n\n### `<comment>` Props\n\n|Attribute|Description|Type|Default|\n|---|---|---|:---:|\n|author|Display as the comment author|`string`|`-`|\n|avatar|Display as the comment avatar|`string`|`-`|\n|content|The content of the comment|`string`|`-`|\n|datetime|Display as the comment datetime|`string`|`-`|\n|align|Alignment of `datetime` and `actions`|`'left' \\| 'right' \\| { datetime?: \"left\" \\| \"right\"; actions?: \"left\" \\| \"right\" }`|`'left'`|\n### `<comment>` Slots\n\n|Slot Name|Description|Parameters|\n|---|---|---|\n|avatar|Avatar|-|\n|author|Author name|-|\n|datetime|Datetime info|-|\n|content|Comment content|-|\n|actions|Action list|-|\n\n\n"
  },
  {
    "path": "packages/web-vue/components/comment/README.zh-CN.md",
    "content": "```yaml\nmeta:\n  type: 组件\n  category: 数据展示\ntitle: 评论 Comment\ndescription: 展示评论信息\n```\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/align.md\n\n@import ./__demo__/nest.md\n\n@import ./__demo__/editor.md\n\n## API\n\n\n### `<comment>` Props\n\n|参数名|描述|类型|默认值|\n|---|---|---|:---:|\n|author|作者名|`string`|`-`|\n|avatar|头像|`string`|`-`|\n|content|评论内容|`string`|`-`|\n|datetime|时间描述|`string`|`-`|\n|align|靠左/靠右 展示 datetime 和 actions|`'left' \\| 'right' \\| { datetime?: \"left\" \\| \"right\"; actions?: \"left\" \\| \"right\" }`|`'left'`|\n### `<comment>` Slots\n\n|插槽名|描述|参数|\n|---|:---:|---|\n|avatar|头像|-|\n|author|作者|-|\n|datetime|时间描述|-|\n|content|评论内容|-|\n|actions|操作列表|-|\n\n\n"
  },
  {
    "path": "packages/web-vue/components/comment/TEMPLATE.md",
    "content": "## zh-CN\n```yaml\nmeta:\n  type: 组件\n  category: 数据展示\ntitle: 评论 Comment\ndescription: 展示评论信息\n```\n---\n## en-US\n```yaml\nmeta:\n  type: Component\n  category: Data Display\ntitle: Comment\ndescription: Display a comment.\n```\n---\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/align.md\n\n@import ./__demo__/nest.md\n\n@import ./__demo__/editor.md\n\n## API\n\n%%API(comment.vue)%%\n"
  },
  {
    "path": "packages/web-vue/components/comment/__demo__/align.md",
    "content": "```yaml\ntitle:\n  zh-CN: 对齐\n  en-US: Alignment\n```\n\n## zh-CN\n\n通过 `align` 属性可以设置 `datetime` 和 `actions` 的对齐方式.\n\n---\n\n## en-US\n\nAlignment of datetime and actions.\n\n---\n\n```vue\n\n<template>\n  <a-comment author=\"Balzac\" datetime=\"1 hour\" align=\"right\">\n    <template #actions>\n      <span class=\"action\" key=\"heart\" @click=\"onLikeChange\">\n        <span v-if=\"like\">\n          <IconHeartFill :style=\"{ color: '#f53f3f' }\" />\n        </span>\n        <span v-else>\n          <IconHeart />\n        </span>\n        {{ 83 + (like ? 1 : 0) }}\n      </span>\n      <span class=\"action\" key=\"star\" @click=\"onStarChange\">\n        <span v-if=\"star\">\n          <IconStarFill style=\"{ color: '#ffb400' }\" />\n        </span>\n        <span v-else>\n          <IconStar />\n        </span>\n        {{ 3 + (star ? 1 : 0) }}\n      </span>\n      <span class=\"action\" key=\"reply\">\n        <IconMessage /> Reply\n      </span>\n    </template>\n    <template #avatar>\n      <a-avatar>\n        <img\n          alt=\"avatar\"\n          src=\"https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp\"\n        />\n      </a-avatar>\n    </template>\n    <template #content>\n      <div>\n        A design is a plan or specification for the construction of an object or\n        system or for the implementation of an activity or process, or the\n        result of that plan or specification in the form of a prototype, product\n        or process.\n      </div>\n    </template>\n  </a-comment>\n</template>\n\n<script>\nimport { ref } from 'vue';\nimport {\n  IconHeart,\n  IconMessage,\n  IconStar,\n  IconStarFill,\n  IconHeartFill,\n} from '@arco-design/web-vue/es/icon';\n\nexport default {\n  components: {\n    IconHeart,\n    IconMessage,\n    IconStar,\n    IconStarFill,\n    IconHeartFill,\n  },\n  setup() {\n    const like = ref(false);\n    const star = ref(false);\n    const onLikeChange = () => {\n      like.value = !like.value;\n    };\n    const onStarChange = () => {\n      star.value = !star.value;\n    };\n\n    return {\n      like,\n      star,\n      onLikeChange,\n      onStarChange\n    }\n  },\n};\n</script>\n\n<style scoped>\n.action {\n  display: inline-block;\n  padding: 0 4px;\n  color: var(--color-text-1);\n  line-height: 24px;\n  background: transparent;\n  border-radius: 2px;\n  cursor: pointer;\n  transition: all 0.1s ease;\n}\n\n.action:hover {\n  background: var(--color-fill-3);\n}\n</style>\n```\n"
  },
  {
    "path": "packages/web-vue/components/comment/__demo__/basic.md",
    "content": "```yaml\ntitle:\n  zh-CN: 基本用法\n  en-US: Basic Usage\n```\n\n## zh-CN\n\n一个基本的评论组件，带有作者、头像、时间和操作。\n\n---\n\n## en-US\n\nA basic comment component with author, avatar, time and actions.\n\n---\n\n```vue\n<template>\n  <a-comment\n    author=\"Socrates\"\n    content=\"Comment body content.\"\n    datetime=\"1 hour\"\n  >\n    <template #actions>\n      <span class=\"action\" key=\"heart\" @click=\"onLikeChange\">\n        <span v-if=\"like\">\n          <IconHeartFill :style=\"{ color: '#f53f3f' }\" />\n        </span>\n        <span v-else>\n          <IconHeart />\n        </span>\n        {{ 83 + (like ? 1 : 0) }}\n      </span>\n      <span class=\"action\" key=\"star\" @click=\"onStarChange\">\n        <span v-if=\"star\">\n          <IconStarFill style=\"{ color: '#ffb400' }\" />\n        </span>\n        <span v-else>\n          <IconStar />\n        </span>\n        {{ 3 + (star ? 1 : 0) }}\n      </span>\n      <span class=\"action\" key=\"reply\">\n        <IconMessage /> Reply\n      </span>\n    </template>\n    <template #avatar>\n      <a-avatar>\n        <img\n          alt=\"avatar\"\n          src=\"https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp\"\n        />\n      </a-avatar>\n    </template>\n  </a-comment>\n</template>\n\n<script>\nimport { ref } from 'vue';\nimport {\n  IconHeart,\n  IconMessage,\n  IconStar,\n  IconStarFill,\n  IconHeartFill,\n} from '@arco-design/web-vue/es/icon';\n\nexport default {\n  components: {\n    IconHeart,\n    IconMessage,\n    IconStar,\n    IconStarFill,\n    IconHeartFill,\n  },\n  setup() {\n    const like = ref(false);\n    const star = ref(false);\n    const onLikeChange = () => {\n      like.value = !like.value;\n    };\n    const onStarChange = () => {\n      star.value = !star.value;\n    };\n\n    return {\n      like,\n      star,\n      onLikeChange,\n      onStarChange\n    }\n  },\n};\n</script>\n<style scoped>\n.action {\n  display: inline-block;\n  padding: 0 4px;\n  color: var(--color-text-1);\n  line-height: 24px;\n  background: transparent;\n  border-radius: 2px;\n  cursor: pointer;\n  transition: all 0.1s ease;\n}\n.action:hover {\n  background: var(--color-fill-3);\n}\n</style>\n```\n"
  },
  {
    "path": "packages/web-vue/components/comment/__demo__/editor.md",
    "content": "```yaml\ntitle:\n  zh-CN: 回复框\n  en-US: Reply Editor\n```\n\n## zh-CN\n\n评论框配合回复框使用\n\n---\n\n## en-US\n\nUse with replay\n\n---\n\n```vue\n<template>\n  <a-comment\n    align=\"right\"\n    author=\"Balzac\"\n    avatar=\"https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp\"\n    content=\"A design is a plan or specification for the construction of an object\n          or system or for the implementation of an activity or process, or the\n          result of that plan or specification in the form of a prototype,\n          product or process.\"\n    datetime=\"1 hour\"\n  >\n    <template #actions>\n      <span class=\"action\"> <IconMessage /> Reply </span>\n    </template>\n    <a-comment\n      align=\"right\"\n      avatar=\"https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp\"\n    >\n      <template #actions>\n        <a-button key=\"0\" type=\"secondary\"> Cancel </a-button>\n        <a-button key=\"1\" type=\"primary\"> Reply </a-button>\n      </template>\n      <template #content>\n        <a-input placeholder=\"Here is you content.\" />\n      </template>\n    </a-comment>\n  </a-comment>\n</template>\n\n<script>\nimport { IconMessage } from '@arco-design/web-vue/es/icon';\n\nexport default {\n  components: {\n    IconMessage,\n  },\n};\n</script>\n\n<style scoped>\n.action {\n  display: inline-block;\n  padding: 0 4px;\n  color: var(--color-text-1);\n  line-height: 24px;\n  background: transparent;\n  border-radius: 2px;\n  cursor: pointer;\n  transition: all 0.1s ease;\n}\n.action:hover {\n  background: var(--color-fill-3);\n}\n</style>\n```\n"
  },
  {
    "path": "packages/web-vue/components/comment/__demo__/nest.md",
    "content": "```yaml\ntitle:\n  zh-CN: 嵌套评论\n  en-US: Nested comments\n```\n\n## zh-CN\n\n评论可以嵌套使用\n\n---\n\n## en-US\n\nComments can be nested.\n\n---\n\n```vue\n<template>\n  <a-comment\n    author=\"Socrates\"\n    avatar=\"https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp\"\n    content=\"Comment body content.\"\n    datetime=\"1 hour\"\n  >\n    <template #actions>\n      <span class=\"action\"> <IconMessage /> Reply </span>\n    </template>\n    <a-comment\n      author=\"Balzac\"\n      avatar=\"https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/9eeb1800d9b78349b24682c3518ac4a3.png~tplv-uwbnlip3yd-webp.webp\"\n      content=\"Comment body content.\"\n      datetime=\"1 hour\"\n    >\n      <template #actions>\n        <span class=\"action\"> <IconMessage /> Reply </span>\n      </template>\n      <a-comment\n        author=\"Austen\"\n        avatar=\"https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/8361eeb82904210b4f55fab888fe8416.png~tplv-uwbnlip3yd-webp.webp\"\n        content=\"Reply content\"\n        datetime=\"1 hour\"\n      >\n        <template #actions>\n          <span class=\"action\"> <IconMessage /> Reply </span>\n        </template>\n      </a-comment>\n      <a-comment\n        author=\"Plato\"\n        avatar=\"https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp\"\n        content=\"Reply content\"\n        datetime=\"1 hour\"\n      >\n        <template #actions>\n          <span class=\"action\"> <IconMessage /> Reply </span>\n        </template>\n      </a-comment>\n    </a-comment>\n  </a-comment>\n</template>\n\n<script>\nimport { IconHeart, IconMessage, IconStar } from '@arco-design/web-vue/es/icon';\n\nexport default {\n  components: {\n    IconHeart,\n    IconMessage,\n    IconStar,\n  },\n};\n</script>\n\n<style scoped>\n.action {\n  display: inline-block;\n  padding: 0 4px;\n  color: var(--color-text-1);\n  line-height: 24px;\n  background: transparent;\n  border-radius: 2px;\n  cursor: pointer;\n  transition: all 0.1s ease;\n}\n.action:hover {\n  background: var(--color-fill-3);\n}\n</style>\n```\n"
  },
  {
    "path": "packages/web-vue/components/comment/__test__/__snapshots__/demo.test.ts.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`<comment> demo: render [align] correctly 1`] = `\n\"<div class=\\\\\"arco-comment\\\\\">\n  <div class=\\\\\"arco-comment-avatar\\\\\">\n    <div class=\\\\\"arco-avatar arco-avatar-circle\\\\\"><span class=\\\\\"arco-avatar-text\\\\\"><img alt=\\\\\"avatar\\\\\" src=\\\\\"https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp\\\\\"></span>\n      <!--v-if-->\n    </div>\n  </div>\n  <div class=\\\\\"arco-comment-inner\\\\\">\n    <div class=\\\\\"arco-comment-inner-content\\\\\">\n      <div class=\\\\\"arco-comment-title arco-comment-title-align-right\\\\\"><span class=\\\\\"arco-comment-author\\\\\"><span>Balzac</span></span><span class=\\\\\"arco-comment-datetime\\\\\"><span>1 hour</span></span></div>\n      <div class=\\\\\"arco-comment-content\\\\\">\n        <div> A design is a plan or specification for the construction of an object or system or for the implementation of an activity or process, or the result of that plan or specification in the form of a prototype, product or process. </div>\n      </div>\n      <div class=\\\\\"arco-comment-actions arco-comment-actions-align-right\\\\\"><span class=\\\\\"action\\\\\"><span><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-heart\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M38.083 12.912a9.929 9.929 0 0 1 .177 13.878l-.177.18L25.76 39.273c-.972.97-2.548.97-3.52 0L9.917 26.971l-.177-.181a9.929 9.929 0 0 1 .177-13.878c3.889-3.883 10.194-3.883 14.083 0 3.889-3.883 10.194-3.883 14.083 0Z\\\\\"></path></svg></span> 83</span><span class=\\\\\"action\\\\\"><span><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-star\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M22.552 6.908a.5.5 0 0 1 .896 0l5.02 10.17a.5.5 0 0 0 .376.274l11.224 1.631a.5.5 0 0 1 .277.853l-8.122 7.916a.5.5 0 0 0-.143.443l1.917 11.178a.5.5 0 0 1-.726.527l-10.038-5.278a.5.5 0 0 0-.466 0L12.73 39.9a.5.5 0 0 1-.726-.527l1.918-11.178a.5.5 0 0 0-.144-.443l-8.122-7.916a.5.5 0 0 1 .278-.853l11.223-1.63a.5.5 0 0 0 .376-.274l5.02-10.17Z\\\\\"></path></svg></span> 3</span><span class=\\\\\"action\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-message\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M15 20h18m-18 9h9M7 41h17.63C33.67 41 41 33.67 41 24.63V24c0-9.389-7.611-17-17-17S7 14.611 7 24v17Z\\\\\"></path></svg> Reply </span></div>\n    </div>\n    <!--v-if-->\n  </div>\n</div>\"\n`;\n\nexports[`<comment> demo: render [basic] correctly 1`] = `\n\"<div class=\\\\\"arco-comment\\\\\">\n  <div class=\\\\\"arco-comment-avatar\\\\\">\n    <div class=\\\\\"arco-avatar arco-avatar-circle\\\\\"><span class=\\\\\"arco-avatar-text\\\\\"><img alt=\\\\\"avatar\\\\\" src=\\\\\"https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp\\\\\"></span>\n      <!--v-if-->\n    </div>\n  </div>\n  <div class=\\\\\"arco-comment-inner\\\\\">\n    <div class=\\\\\"arco-comment-inner-content\\\\\">\n      <div class=\\\\\"arco-comment-title arco-comment-title-align-left\\\\\"><span class=\\\\\"arco-comment-author\\\\\"><span>Socrates</span></span><span class=\\\\\"arco-comment-datetime\\\\\"><span>1 hour</span></span></div>\n      <div class=\\\\\"arco-comment-content\\\\\"><span>Comment body content.</span></div>\n      <div class=\\\\\"arco-comment-actions arco-comment-actions-align-left\\\\\"><span class=\\\\\"action\\\\\"><span><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-heart\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M38.083 12.912a9.929 9.929 0 0 1 .177 13.878l-.177.18L25.76 39.273c-.972.97-2.548.97-3.52 0L9.917 26.971l-.177-.181a9.929 9.929 0 0 1 .177-13.878c3.889-3.883 10.194-3.883 14.083 0 3.889-3.883 10.194-3.883 14.083 0Z\\\\\"></path></svg></span> 83</span><span class=\\\\\"action\\\\\"><span><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-star\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M22.552 6.908a.5.5 0 0 1 .896 0l5.02 10.17a.5.5 0 0 0 .376.274l11.224 1.631a.5.5 0 0 1 .277.853l-8.122 7.916a.5.5 0 0 0-.143.443l1.917 11.178a.5.5 0 0 1-.726.527l-10.038-5.278a.5.5 0 0 0-.466 0L12.73 39.9a.5.5 0 0 1-.726-.527l1.918-11.178a.5.5 0 0 0-.144-.443l-8.122-7.916a.5.5 0 0 1 .278-.853l11.223-1.63a.5.5 0 0 0 .376-.274l5.02-10.17Z\\\\\"></path></svg></span> 3</span><span class=\\\\\"action\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-message\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M15 20h18m-18 9h9M7 41h17.63C33.67 41 41 33.67 41 24.63V24c0-9.389-7.611-17-17-17S7 14.611 7 24v17Z\\\\\"></path></svg> Reply </span></div>\n    </div>\n    <!--v-if-->\n  </div>\n</div>\"\n`;\n\nexports[`<comment> demo: render [editor] correctly 1`] = `\n\"<div class=\\\\\"arco-comment\\\\\">\n  <div class=\\\\\"arco-comment-avatar\\\\\"><img src=\\\\\"https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp\\\\\" alt=\\\\\"comment-avatar\\\\\"></div>\n  <div class=\\\\\"arco-comment-inner\\\\\">\n    <div class=\\\\\"arco-comment-inner-content\\\\\">\n      <div class=\\\\\"arco-comment-title arco-comment-title-align-right\\\\\"><span class=\\\\\"arco-comment-author\\\\\"><span>Balzac</span></span><span class=\\\\\"arco-comment-datetime\\\\\"><span>1 hour</span></span></div>\n      <div class=\\\\\"arco-comment-content\\\\\"><span>A design is a plan or specification for the construction of an object\n          or system or for the implementation of an activity or process, or the\n          result of that plan or specification in the form of a prototype,\n          product or process.</span></div>\n      <div class=\\\\\"arco-comment-actions arco-comment-actions-align-right\\\\\"><span class=\\\\\"action\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-message\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M15 20h18m-18 9h9M7 41h17.63C33.67 41 41 33.67 41 24.63V24c0-9.389-7.611-17-17-17S7 14.611 7 24v17Z\\\\\"></path></svg> Reply </span></div>\n    </div>\n    <div class=\\\\\"arco-comment-inner-comment\\\\\">\n      <div class=\\\\\"arco-comment\\\\\">\n        <div class=\\\\\"arco-comment-avatar\\\\\"><img src=\\\\\"https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp\\\\\" alt=\\\\\"comment-avatar\\\\\"></div>\n        <div class=\\\\\"arco-comment-inner\\\\\">\n          <div class=\\\\\"arco-comment-inner-content\\\\\">\n            <!--v-if-->\n            <div class=\\\\\"arco-comment-content\\\\\"><span class=\\\\\"arco-input-wrapper\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" placeholder=\\\\\"Here is you content.\\\\\" value=\\\\\"\\\\\"><!----><!----></span></div>\n            <div class=\\\\\"arco-comment-actions arco-comment-actions-align-right\\\\\"><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n                <!--v-if--> Cancel\n              </button><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n                <!--v-if--> Reply\n              </button></div>\n          </div>\n          <!--v-if-->\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\"\n`;\n\nexports[`<comment> demo: render [nest] correctly 1`] = `\n\"<div class=\\\\\"arco-comment\\\\\">\n  <div class=\\\\\"arco-comment-avatar\\\\\"><img src=\\\\\"https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp\\\\\" alt=\\\\\"comment-avatar\\\\\"></div>\n  <div class=\\\\\"arco-comment-inner\\\\\">\n    <div class=\\\\\"arco-comment-inner-content\\\\\">\n      <div class=\\\\\"arco-comment-title arco-comment-title-align-left\\\\\"><span class=\\\\\"arco-comment-author\\\\\"><span>Socrates</span></span><span class=\\\\\"arco-comment-datetime\\\\\"><span>1 hour</span></span></div>\n      <div class=\\\\\"arco-comment-content\\\\\"><span>Comment body content.</span></div>\n      <div class=\\\\\"arco-comment-actions arco-comment-actions-align-left\\\\\"><span class=\\\\\"action\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-message\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M15 20h18m-18 9h9M7 41h17.63C33.67 41 41 33.67 41 24.63V24c0-9.389-7.611-17-17-17S7 14.611 7 24v17Z\\\\\"></path></svg> Reply </span></div>\n    </div>\n    <div class=\\\\\"arco-comment-inner-comment\\\\\">\n      <div class=\\\\\"arco-comment\\\\\">\n        <div class=\\\\\"arco-comment-avatar\\\\\"><img src=\\\\\"https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/9eeb1800d9b78349b24682c3518ac4a3.png~tplv-uwbnlip3yd-webp.webp\\\\\" alt=\\\\\"comment-avatar\\\\\"></div>\n        <div class=\\\\\"arco-comment-inner\\\\\">\n          <div class=\\\\\"arco-comment-inner-content\\\\\">\n            <div class=\\\\\"arco-comment-title arco-comment-title-align-left\\\\\"><span class=\\\\\"arco-comment-author\\\\\"><span>Balzac</span></span><span class=\\\\\"arco-comment-datetime\\\\\"><span>1 hour</span></span></div>\n            <div class=\\\\\"arco-comment-content\\\\\"><span>Comment body content.</span></div>\n            <div class=\\\\\"arco-comment-actions arco-comment-actions-align-left\\\\\"><span class=\\\\\"action\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-message\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M15 20h18m-18 9h9M7 41h17.63C33.67 41 41 33.67 41 24.63V24c0-9.389-7.611-17-17-17S7 14.611 7 24v17Z\\\\\"></path></svg> Reply </span></div>\n          </div>\n          <div class=\\\\\"arco-comment-inner-comment\\\\\">\n            <div class=\\\\\"arco-comment\\\\\">\n              <div class=\\\\\"arco-comment-avatar\\\\\"><img src=\\\\\"https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/8361eeb82904210b4f55fab888fe8416.png~tplv-uwbnlip3yd-webp.webp\\\\\" alt=\\\\\"comment-avatar\\\\\"></div>\n              <div class=\\\\\"arco-comment-inner\\\\\">\n                <div class=\\\\\"arco-comment-inner-content\\\\\">\n                  <div class=\\\\\"arco-comment-title arco-comment-title-align-left\\\\\"><span class=\\\\\"arco-comment-author\\\\\"><span>Austen</span></span><span class=\\\\\"arco-comment-datetime\\\\\"><span>1 hour</span></span></div>\n                  <div class=\\\\\"arco-comment-content\\\\\"><span>Reply content</span></div>\n                  <div class=\\\\\"arco-comment-actions arco-comment-actions-align-left\\\\\"><span class=\\\\\"action\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-message\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M15 20h18m-18 9h9M7 41h17.63C33.67 41 41 33.67 41 24.63V24c0-9.389-7.611-17-17-17S7 14.611 7 24v17Z\\\\\"></path></svg> Reply </span></div>\n                </div>\n                <!--v-if-->\n              </div>\n            </div>\n            <div class=\\\\\"arco-comment\\\\\">\n              <div class=\\\\\"arco-comment-avatar\\\\\"><img src=\\\\\"https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp\\\\\" alt=\\\\\"comment-avatar\\\\\"></div>\n              <div class=\\\\\"arco-comment-inner\\\\\">\n                <div class=\\\\\"arco-comment-inner-content\\\\\">\n                  <div class=\\\\\"arco-comment-title arco-comment-title-align-left\\\\\"><span class=\\\\\"arco-comment-author\\\\\"><span>Plato</span></span><span class=\\\\\"arco-comment-datetime\\\\\"><span>1 hour</span></span></div>\n                  <div class=\\\\\"arco-comment-content\\\\\"><span>Reply content</span></div>\n                  <div class=\\\\\"arco-comment-actions arco-comment-actions-align-left\\\\\"><span class=\\\\\"action\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-message\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M15 20h18m-18 9h9M7 41h17.63C33.67 41 41 33.67 41 24.63V24c0-9.389-7.611-17-17-17S7 14.611 7 24v17Z\\\\\"></path></svg> Reply </span></div>\n                </div>\n                <!--v-if-->\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\"\n`;\n"
  },
  {
    "path": "packages/web-vue/components/comment/__test__/demo.test.ts",
    "content": "import demoTest from '../../../scripts/demo-test';\n\ndemoTest('comment');\n"
  },
  {
    "path": "packages/web-vue/components/comment/__test__/index.test.ts",
    "content": "import { mount } from '@vue/test-utils';\nimport Comment from '../index';\n\ndescribe('Comment', () => {\n  test('Should have prefix', () => {\n    const wrapper = mount(Comment);\n    expect(wrapper.classes()).toContain('arco-comment');\n  });\n\n  test('Content prop should work', () => {\n    const wrapper = mount(Comment, {\n      props: {\n        content: 'hello world',\n      },\n    });\n    const contentElement = wrapper.find('.arco-comment-content');\n    expect(contentElement.text()).toContain('hello world');\n  });\n\n  test('Content slot should work', () => {\n    const wrapper = mount(Comment, {\n      slots: {\n        content: '<div>hello world</div>',\n      },\n    });\n    const contentElement = wrapper.find('.arco-comment-content');\n    expect(contentElement.text()).toContain('hello world');\n  });\n\n  test('Author should work', () => {\n    const wrapper = mount(Comment, {\n      props: {\n        author: 'Stephen',\n      },\n    });\n    const authorElement = wrapper.find('.arco-comment-author');\n    expect(authorElement.text()).toContain('Stephen');\n  });\n\n  test('Datetime should work', () => {\n    const wrapper = mount(Comment, {\n      props: {\n        datetime: '1 hour',\n      },\n    });\n    const dateTimeElement = wrapper.find('.arco-comment-datetime');\n    expect(dateTimeElement.text()).toContain('1 hour');\n  });\n\n  test('Slot actions should work', () => {\n    const wrapper = mount(Comment, {\n      slots: {\n        actions: [\n          `<div class='custom-action'/>`,\n          `<div class='custom-action'/>`,\n        ],\n      },\n    });\n    const actionsWrapper = wrapper.find('.arco-comment-actions');\n    expect(actionsWrapper.exists()).toBe(true);\n    const actions = actionsWrapper.findAll('.custom-action');\n    expect(actions.length).toBe(2);\n  });\n\n  test('Align should work', () => {\n    const wrapper = mount(Comment, {\n      slots: {\n        actions: `<div class='custom-action'/>`,\n      },\n      props: {\n        align: 'right',\n      },\n    });\n    const actionsWrapper = wrapper.find('.arco-comment-actions');\n    expect(actionsWrapper.classes()).toContain(\n      'arco-comment-actions-align-right'\n    );\n  });\n\n  test('Align with object format should also work', () => {\n    const wrapper = mount(Comment, {\n      slots: {\n        actions: `<div class='custom-action'/>`,\n      },\n      props: {\n        author: 'Stephen',\n        align: {\n          datetime: 'right',\n          actions: 'right',\n        },\n      },\n    });\n    const actionsWrapper = wrapper.find('.arco-comment-actions');\n    expect(actionsWrapper.classes()).toContain(\n      'arco-comment-actions-align-right'\n    );\n    const titleWrapper = wrapper.find('.arco-comment-title');\n    expect(titleWrapper.classes()).toContain('arco-comment-title-align-right');\n  });\n});\n"
  },
  {
    "path": "packages/web-vue/components/comment/comment.vue",
    "content": "<template>\n  <div :class=\"prefixCls\">\n    <div v-if=\"hasAvatar\" :class=\"`${prefixCls}-avatar`\">\n      <img v-if=\"avatar\" :src=\"avatar\" alt=\"comment-avatar\" />\n      <slot v-else name=\"avatar\" />\n    </div>\n    <div :class=\"`${prefixCls}-inner`\">\n      <div :class=\"`${prefixCls}-inner-content`\">\n        <div\n          v-if=\"hasAuthor || hasDatetime\"\n          :class=\"`${prefixCls}-title ${prefixCls}-title-align-${computedAlign.datetime}`\"\n        >\n          <span v-if=\"hasAuthor\" :class=\"`${prefixCls}-author`\">\n            <span v-if=\"author\"> {{ author }} </span>\n            <slot v-else name=\"author\" />\n          </span>\n          <span v-if=\"hasDatetime\" :class=\"`${prefixCls}-datetime`\">\n            <span v-if=\"datetime\"> {{ datetime }} </span>\n            <slot v-else name=\"datetime\" />\n          </span>\n        </div>\n        <div v-if=\"hasContent\" :class=\"`${prefixCls}-content`\">\n          <span v-if=\"content\"> {{ content }} </span>\n          <slot v-else name=\"content\" />\n        </div>\n        <div\n          v-if=\"$slots.actions\"\n          :class=\"`${prefixCls}-actions ${prefixCls}-actions-align-${computedAlign.actions}`\"\n        >\n          <slot name=\"actions\" />\n        </div>\n      </div>\n      <div v-if=\"$slots.default\" :class=\"`${prefixCls}-inner-comment`\">\n        <slot />\n      </div>\n    </div>\n  </div>\n</template>\n<script>\nimport { defineComponent, computed } from 'vue';\nimport { getPrefixCls } from '../_utils/global-config';\nimport { hasPropOrSlot } from '../_utils/use-prop-or-slot';\nimport { isString } from '../_utils/is';\n\nexport default defineComponent({\n  name: 'Comment',\n  props: {\n    /**\n     * @zh 作者名\n     * @en Display as the comment author\n     */\n    author: {\n      type: String,\n    },\n    /**\n     * @zh 头像\n     * @en Display as the comment avatar\n     */\n    avatar: {\n      type: String,\n    },\n    /**\n     * @zh 评论内容\n     * @en The content of the comment\n     */\n    content: {\n      type: String,\n    },\n    /**\n     * @zh 时间描述\n     * @en Display as the comment datetime\n     */\n    datetime: {\n      type: String,\n    },\n    /**\n     * @zh 靠左/靠右 展示 datetime 和 actions\n     * @en Alignment of `datetime` and `actions`\n     * @values 'left', 'right', { datetime?: \"left\" | \"right\"; actions?: \"left\" | \"right\" }\n     * */\n    align: {\n      type: [String, Object],\n      default: 'left',\n    },\n  },\n  /**\n   * @zh 头像\n   * @en Avatar\n   * @slot avatar\n   */\n  /**\n   * @zh 作者\n   * @en Author name\n   * @slot author\n   */\n  /**\n   * @zh 时间描述\n   * @en Datetime info\n   * @slot datetime\n   */\n  /**\n   * @zh 评论内容\n   * @en Comment content\n   * @slot content\n   */\n  /**\n   * @zh 操作列表\n   * @en Action list\n   * @slot actions\n   */\n\n  setup(props, { slots }) {\n    const prefixCls = getPrefixCls('comment');\n\n    const [hasAuthor, hasAvatar, hasContent, hasDatetime] = [\n      'author',\n      'avatar',\n      'content',\n      'datetime',\n    ].map((propName) => hasPropOrSlot(props, slots, propName));\n\n    const computedAlign = computed(() => {\n      const { align } = props;\n      return {\n        ...(isString(align)\n          ? {\n              datetime: align,\n              actions: align,\n            }\n          : align),\n      };\n    });\n\n    return {\n      prefixCls,\n      hasAuthor,\n      hasAvatar,\n      hasContent,\n      hasDatetime,\n      computedAlign,\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/comment/index.ts",
    "content": "import type { App } from 'vue';\nimport type { ArcoOptions } from '../_utils/types';\nimport { setGlobalConfig, getComponentPrefix } from '../_utils/global-config';\nimport _Comment from './comment.vue';\n\nconst Comment = Object.assign(_Comment, {\n  install: (app: App, options?: ArcoOptions) => {\n    setGlobalConfig(app, options);\n    const componentPrefix = getComponentPrefix(options);\n\n    app.component(componentPrefix + _Comment.name, _Comment);\n  },\n});\n\nexport type CommentInstance = InstanceType<typeof _Comment>;\n\nexport default Comment;\n"
  },
  {
    "path": "packages/web-vue/components/comment/style/index.less",
    "content": "@import './token.less';\n\n@comment-prefix-cls: ~'@{prefix}-comment';\n\n.@{comment-prefix-cls} {\n  display: flex;\n  flex-wrap: nowrap;\n  font-size: @comment-font-size;\n  line-height: @line-height-base;\n\n  &:not(:first-of-type),\n  &-inner-comment {\n    margin-top: @comment-margin-bottom;\n  }\n\n  &-inner {\n    flex: 1;\n  }\n\n  &-avatar {\n    flex-shrink: 0;\n    margin-right: @comment-margin-avatar-right;\n    cursor: pointer;\n\n    > img {\n      width: @comment-size-avatar-width;\n      height: @comment-size-avatar-width;\n      border-radius: @radius-circle;\n    }\n  }\n\n  &-author {\n    margin-right: @comment-margin-author-right;\n    color: @comment-color-author-text;\n    font-size: @comment-font-author-size;\n  }\n\n  &-datetime {\n    color: @comment-color-datetime-text;\n    font-size: @comment-font-datetime-size;\n  }\n\n  &-content {\n    color: @comment-color-content-text;\n  }\n\n  &-title-align-right {\n    display: flex;\n    justify-content: space-between;\n  }\n\n  &-actions {\n    margin-top: @comment-margin-actions-top;\n    color: @comment-color-actions-text;\n    font-size: @comment-font-action-size;\n\n    > *:not(:last-child) {\n      margin-right: @comment-margin-actions-right;\n    }\n  }\n\n  &-actions-align-right {\n    display: flex;\n    justify-content: flex-end;\n  }\n}\n"
  },
  {
    "path": "packages/web-vue/components/comment/style/index.ts",
    "content": "import '../../style/index.less';\nimport './index.less';\n"
  },
  {
    "path": "packages/web-vue/components/comment/style/token.less",
    "content": "@import '../../style/theme/index.less';\n\n@comment-color-author-text: var(~'@{arco-cssvars-prefix}-color-text-2');\n@comment-color-datetime-text: var(~'@{arco-cssvars-prefix}-color-text-3');\n@comment-color-content-text: var(~'@{arco-cssvars-prefix}-color-text-1');\n@comment-color-actions-text: var(~'@{arco-cssvars-prefix}-color-text-2');\n\n@comment-font-size: @font-size-body-3;\n@comment-font-author-size: @font-size-body-3;\n@comment-font-datetime-size: @font-size-body-1;\n@comment-margin-avatar-right: @spacing-6;\n@comment-margin-author-right: @spacing-4;\n@comment-margin-actions-top: @spacing-4;\n@comment-margin-bottom: @spacing-8;\n@comment-margin-actions-right: @spacing-4;\n@comment-size-avatar-width: @size-8;\n@comment-font-action-size: @font-size-body-3;\n"
  },
  {
    "path": "packages/web-vue/components/components.ts",
    "content": "// @ts-nocheck\nimport { MessageMethod } from './message';\nimport { NotificationMethod } from './notification';\nimport { ModalMethod } from './modal';\nimport { DrawerMethod } from './drawer';\n\ndeclare module 'vue' {\n  export interface GlobalComponents {\n    AAffix: typeof import('@arco-design/web-vue')['Affix'];\n    AAlert: typeof import('@arco-design/web-vue')['Alert'];\n    AAnchor: typeof import('@arco-design/web-vue')['Anchor'];\n    AAnchorLink: typeof import('@arco-design/web-vue')['AnchorLink'];\n    AAutoComplete: typeof import('@arco-design/web-vue')['AutoComplete'];\n    AAvatar: typeof import('@arco-design/web-vue')['Avatar'];\n    AAvatarGroup: typeof import('@arco-design/web-vue')['AvatarGroup'];\n    ABackTop: typeof import('@arco-design/web-vue')['BackTop'];\n    ABadge: typeof import('@arco-design/web-vue')['Badge'];\n    ABreadcrumb: typeof import('@arco-design/web-vue')['Breadcrumb'];\n    ABreadcrumbItem: typeof import('@arco-design/web-vue')['BreadcrumbItem'];\n    AButton: typeof import('@arco-design/web-vue')['Button'];\n    AButtonGroup: typeof import('@arco-design/web-vue')['ButtonGroup'];\n    ACalendar: typeof import('@arco-design/web-vue')['Calendar'];\n    ACard: typeof import('@arco-design/web-vue')['Card'];\n    ACardMeta: typeof import('@arco-design/web-vue')['CardMeta'];\n    ACardGrid: typeof import('@arco-design/web-vue')['CardGrid'];\n    ACarousel: typeof import('@arco-design/web-vue')['Carousel'];\n    ACarouselItem: typeof import('@arco-design/web-vue')['CarouselItem'];\n    ACascader: typeof import('@arco-design/web-vue')['Cascader'];\n    ACascaderPanel: typeof import('@arco-design/web-vue')['CascaderPanel'];\n    ACheckbox: typeof import('@arco-design/web-vue')['Checkbox'];\n    ACheckboxGroup: typeof import('@arco-design/web-vue')['CheckboxGroup'];\n    ACollapse: typeof import('@arco-design/web-vue')['Collapse'];\n    ACollapseItem: typeof import('@arco-design/web-vue')['CollapseItem'];\n    AColorPicker: typeof import('@arco-design/web-vue')['ColorPicker'];\n    AComment: typeof import('@arco-design/web-vue')['Comment'];\n    AConfigProvider: typeof import('@arco-design/web-vue')['ConfigProvider'];\n    ADatePicker: typeof import('@arco-design/web-vue')['DatePicker'];\n    AWeekPicker: typeof import('@arco-design/web-vue')['WeekPicker'];\n    AMonthPicker: typeof import('@arco-design/web-vue')['MonthPicker'];\n    AYearPicker: typeof import('@arco-design/web-vue')['YearPicker'];\n    AQuarterPicker: typeof import('@arco-design/web-vue')['QuarterPicker'];\n    ARangePicker: typeof import('@arco-design/web-vue')['RangePicker'];\n    ADescriptions: typeof import('@arco-design/web-vue')['Descriptions'];\n    ADescriptionsItem: typeof import('@arco-design/web-vue')['DescriptionsItem'];\n    ADivider: typeof import('@arco-design/web-vue')['Divider'];\n    ADrawer: typeof import('@arco-design/web-vue')['Drawer'];\n    ADropdown: typeof import('@arco-design/web-vue')['Dropdown'];\n    ADoption: typeof import('@arco-design/web-vue')['Doption'];\n    ADgroup: typeof import('@arco-design/web-vue')['Dgroup'];\n    ADsubmenu: typeof import('@arco-design/web-vue')['Dsubmenu'];\n    AEmpty: typeof import('@arco-design/web-vue')['Empty'];\n    AForm: typeof import('@arco-design/web-vue')['Form'];\n    AFormItem: typeof import('@arco-design/web-vue')['FormItem'];\n    AGrid: typeof import('@arco-design/web-vue')['Grid'];\n    AGridItem: typeof import('@arco-design/web-vue')['GridItem'];\n    ACol: typeof import('@arco-design/web-vue')['Col'];\n    ARow: typeof import('@arco-design/web-vue')['Row'];\n    AImage: typeof import('@arco-design/web-vue')['Image'];\n    AImagePreview: typeof import('@arco-design/web-vue')['ImagePreview'];\n    AImagePreviewAction: typeof import('@arco-design/web-vue')['ImagePreviewAction'];\n    AImagePreviewGroup: typeof import('@arco-design/web-vue')['ImagePreviewGroup'];\n    AInput: typeof import('@arco-design/web-vue')['Input'];\n    AInputGroup: typeof import('@arco-design/web-vue')['InputGroup'];\n    AInputSearch: typeof import('@arco-design/web-vue')['InputSearch'];\n    AInputPassword: typeof import('@arco-design/web-vue')['InputPassword'];\n    AInputNumber: typeof import('@arco-design/web-vue')['InputNumber'];\n    AInputTag: typeof import('@arco-design/web-vue')['InputTag'];\n    ALayout: typeof import('@arco-design/web-vue')['Layout'];\n    ALayoutHeader: typeof import('@arco-design/web-vue')['LayoutHeader'];\n    ALayoutContent: typeof import('@arco-design/web-vue')['LayoutContent'];\n    ALayoutFooter: typeof import('@arco-design/web-vue')['LayoutFooter'];\n    ALayoutSider: typeof import('@arco-design/web-vue')['LayoutSider'];\n    ALink: typeof import('@arco-design/web-vue')['Link'];\n    AList: typeof import('@arco-design/web-vue')['List'];\n    AListItem: typeof import('@arco-design/web-vue')['ListItem'];\n    AListItemMeta: typeof import('@arco-design/web-vue')['ListItemMeta'];\n    AMention: typeof import('@arco-design/web-vue')['Mention'];\n    AMenu: typeof import('@arco-design/web-vue')['Menu'];\n    AMenuItem: typeof import('@arco-design/web-vue')['MenuItem'];\n    AMenuItemGroup: typeof import('@arco-design/web-vue')['MenuItemGroup'];\n    ASubMenu: typeof import('@arco-design/web-vue')['SubMenu'];\n    AModal: typeof import('@arco-design/web-vue')['Modal'];\n    APageHeader: typeof import('@arco-design/web-vue')['PageHeader'];\n    APagination: typeof import('@arco-design/web-vue')['Pagination'];\n    APopconfirm: typeof import('@arco-design/web-vue')['Popconfirm'];\n    APopover: typeof import('@arco-design/web-vue')['Popover'];\n    AProgress: typeof import('@arco-design/web-vue')['Progress'];\n    ARadio: typeof import('@arco-design/web-vue')['Radio'];\n    ARadioGroup: typeof import('@arco-design/web-vue')['RadioGroup'];\n    ARate: typeof import('@arco-design/web-vue')['Rate'];\n    AResizeBox: typeof import('@arco-design/web-vue')['ResizeBox'];\n    AResult: typeof import('@arco-design/web-vue')['Result'];\n    ASelect: typeof import('@arco-design/web-vue')['Select'];\n    AOption: typeof import('@arco-design/web-vue')['Option'];\n    AOptgroup: typeof import('@arco-design/web-vue')['Optgroup'];\n    ASkeleton: typeof import('@arco-design/web-vue')['Skeleton'];\n    ASkeletonLine: typeof import('@arco-design/web-vue')['SkeletonLine'];\n    ASkeletonShape: typeof import('@arco-design/web-vue')['SkeletonShape'];\n    ASlider: typeof import('@arco-design/web-vue')['Slider'];\n    ASpace: typeof import('@arco-design/web-vue')['Space'];\n    ASpin: typeof import('@arco-design/web-vue')['Spin'];\n    ASplit: typeof import('@arco-design/web-vue')['Split'];\n    AStatistic: typeof import('@arco-design/web-vue')['Statistic'];\n    ACountdown: typeof import('@arco-design/web-vue')['Countdown'];\n    ASteps: typeof import('@arco-design/web-vue')['Steps'];\n    AStep: typeof import('@arco-design/web-vue')['Step'];\n    ASwitch: typeof import('@arco-design/web-vue')['Switch'];\n    ATable: typeof import('@arco-design/web-vue')['Table'];\n    AThead: typeof import('@arco-design/web-vue')['Thead'];\n    ATd: typeof import('@arco-design/web-vue')['Td'];\n    ATh: typeof import('@arco-design/web-vue')['Th'];\n    ATr: typeof import('@arco-design/web-vue')['Tr'];\n    ATbody: typeof import('@arco-design/web-vue')['Tbody'];\n    ATableColumn: typeof import('@arco-design/web-vue')['TableColumn'];\n    ATabs: typeof import('@arco-design/web-vue')['Tabs'];\n    ATabPane: typeof import('@arco-design/web-vue')['TabPane'];\n    ATag: typeof import('@arco-design/web-vue')['Tag'];\n    ATextarea: typeof import('@arco-design/web-vue')['Textarea'];\n    ATimePicker: typeof import('@arco-design/web-vue')['TimePicker'];\n    ATimeline: typeof import('@arco-design/web-vue')['Timeline'];\n    ATimelineItem: typeof import('@arco-design/web-vue')['TimelineItem'];\n    ATooltip: typeof import('@arco-design/web-vue')['Tooltip'];\n    ATransfer: typeof import('@arco-design/web-vue')['Transfer'];\n    ATree: typeof import('@arco-design/web-vue')['Tree'];\n    ATreeSelect: typeof import('@arco-design/web-vue')['TreeSelect'];\n    ATrigger: typeof import('@arco-design/web-vue')['Trigger'];\n    ATypography: typeof import('@arco-design/web-vue')['Typography'];\n    ATypographyParagraph: typeof import('@arco-design/web-vue')['TypographyParagraph'];\n    ATypographyTitle: typeof import('@arco-design/web-vue')['TypographyTitle'];\n    ATypographyText: typeof import('@arco-design/web-vue')['TypographyText'];\n    AUpload: typeof import('@arco-design/web-vue')['Upload'];\n    AVerificationCode: typeof import('@arco-design/web-vue')['VerificationCode'];\n    AWatermark: typeof import('@arco-design/web-vue')['Watermark'];\n  }\n\n  export interface ComponentCustomProperties {\n    $message: MessageMethod;\n    $notification: NotificationMethod;\n    $modal: ModalMethod;\n    $drawer: DrawerMethod;\n  }\n}\n\nexport {};\n"
  },
  {
    "path": "packages/web-vue/components/config-provider/CHANGELOG.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.48.0\n\n`2023-06-30`\n\n### 🆕 Feature\n\n- Add `exchangeTime` property ([#2529](https://github.com/arco-design/arco-design-vue/pull/2529))\n\n\n## 2.47.0\n\n`2023-06-02`\n\n### 🆕 Feature\n\n- empty slots add component attribute ([#2448](https://github.com/arco-design/arco-design-vue/pull/2448))\n\n\n## 2.28.0\n\n`2022-05-20`\n\n### 🆕 Feature\n\n- Added `empty` and `loading` slots ([#1180](https://github.com/arco-design/arco-design-vue/pull/1180))\n\n\n## 2.25.1\n\n`2022-04-27`\n\n### 🐛 BugFix\n\n- Fix the problem that the setting of the size attribute is invalid in some components ([#1051](https://github.com/arco-design/arco-design-vue/pull/1051))\n\n\n## 2.25.0\n\n`2022-04-22`\n\n### 🆕 Feature\n\n- Add updateAtScroll property ([#1015](https://github.com/arco-design/arco-design-vue/pull/1015))\n- add property `global` ([#933](https://github.com/arco-design/arco-design-vue/pull/933))\n\n\n## 2.14.1\n\n`2022-01-08`\n\n### 🐛 BugFix\n\n- Fix the problem of loading styles on demand ([#526](https://github.com/arco-design/arco-design-vue/pull/526))\n\n\n## 2.14.0\n\n`2022-01-07`\n\n### 🆕 Feature\n\n- Add `size` prop ([#513](https://github.com/arco-design/arco-design-vue/pull/513))\n\n"
  },
  {
    "path": "packages/web-vue/components/config-provider/CHANGELOG.zh-CN.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.48.0\n\n`2023-06-30`\n\n### 🆕 新增功能\n\n- 增加 `exchangeTime` 属性 ([#2529](https://github.com/arco-design/arco-design-vue/pull/2529))\n\n\n## 2.47.0\n\n`2023-06-02`\n\n### 🆕 新增功能\n\n- empty slots 增加component 属性 ([#2448](https://github.com/arco-design/arco-design-vue/pull/2448))\n\n\n## 2.28.0\n\n`2022-05-20`\n\n### 🆕 新增功能\n\n- 增加 `empty` 和 `loading` 插槽 ([#1180](https://github.com/arco-design/arco-design-vue/pull/1180))\n\n\n## 2.25.1\n\n`2022-04-27`\n\n### 🐛 问题修复\n\n- 修复 size 属性的设置在某些组件中失效的问题 ([#1051](https://github.com/arco-design/arco-design-vue/pull/1051))\n\n\n## 2.25.0\n\n`2022-04-22`\n\n### 🆕 新增功能\n\n- 增加 updateAtScroll 属性 ([#1015](https://github.com/arco-design/arco-design-vue/pull/1015))\n- 添加 `global` 属性 ([#933](https://github.com/arco-design/arco-design-vue/pull/933))\n\n\n## 2.14.1\n\n`2022-01-08`\n\n### 🐛 问题修复\n\n- 修复按需加载样式问题 ([#526](https://github.com/arco-design/arco-design-vue/pull/526))\n\n\n## 2.14.0\n\n`2022-01-07`\n\n### 🆕 新增功能\n\n- 增加 `size` 属性 ([#513](https://github.com/arco-design/arco-design-vue/pull/513))\n\n"
  },
  {
    "path": "packages/web-vue/components/config-provider/README.en-US.md",
    "content": "```yaml\nmeta:\n  type: Component\n  category: Common\ntitle: ConfigProvider\ndescription: Configure in the outermost layer of the application, set once, and take effect globally. Generally used to set functions such as internationalized languages.\n```\n\n*Auto translate by google.*\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/empty.md\n\n@import ./__demo__/rtl.md\n\n## API\n\n\n### `<config-provider>` Props\n\n|Attribute|Description|Type|Default|version|\n|---|---|---|:---:|:---|\n|prefix-cls|Component classname prefix|`string`|`'arco'`||\n|locale|Configure language pack|`ArcoLang`|`-`||\n|size|Size|`Size`|`-`|2.14.0|\n|global|Is global effect|`boolean`|`false`|2.25.0|\n|scroll-to-close|Whether to close the popover when scrolling|`boolean`|`false`|2.46.0|\n|exchange-time|Whether to exchange time|`boolean`|`true`|2.48.0|\n|rtl|View starts from the right and ends on the left|`boolean`|`false`||\n### `<config-provider>` Slots\n\n|Slot Name|Description|Parameters|version|\n|---|---|---|:---|\n|loading|Custom loading element|-|2.28.0|\n|empty|Custom empty element|component: `string`|2.28.0|\n\n\n\n\n## FAQ\n\n### Global Config\n\nWhen the `global` property is set to `true`, the configuration content will be injected into the Vue AppContext, which is generally used to solve the problem that the configuration content cannot take effect when the functional call method of the Modal and Message components is used.\n\n### Customize empty state display\n\nYou can customize the display of the global empty state of the component library in `#empty`. If the `Empty` component is used in the slot, you need to enable the `inConfigProvider` property.\n"
  },
  {
    "path": "packages/web-vue/components/config-provider/README.zh-CN.md",
    "content": "```yaml\nmeta:\n  type: 组件\n  category: 通用\ntitle: 全局配置 ConfigProvider\ndescription: 在应用的最外层进行配置，一次设置，全局生效。一般用于设置国际化语言等功能。\n```\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/empty.md\n\n@import ./__demo__/rtl.md\n\n## API\n\n\n### `<config-provider>` Props\n\n|参数名|描述|类型|默认值|版本|\n|---|---|---|:---:|:---|\n|prefix-cls|组件类名前缀|`string`|`'arco'`||\n|locale|配置语言包|`ArcoLang`|`-`||\n|size|大小|`Size`|`-`|2.14.0|\n|global|是否全局生效|`boolean`|`false`|2.25.0|\n|update-at-scroll|是否在容器滚动时更新弹出框的位置|`boolean`|`false`|2.25.0|\n|scroll-to-close|是否在滚动时关闭弹出框|`boolean`|`false`|2.46.0|\n|exchange-time|是否交换时间|`boolean`|`true`|2.48.0|\n|rtl|视图的表现形式是从右开始向左结束|`boolean`|`false`||\n### `<config-provider>` Slots\n\n|插槽名|描述|参数|版本|\n|---|:---:|---|:---|\n|loading|自定义加载中元素|-|2.28.0|\n|empty|自定义空状态元素|component: `string`|2.28.0|\n\n\n\n\n## FAQ\n\n### 全局配置\n\n`global` 属性设置为 `true` 时，会将配置内容注入到 Vue AppContext 中，一般用于解决使用 Modal、Message 组件的函数式调用方法时，配置内容无法生效的问题。\n\n### 自定义空状态展示\n\n可以在 `#empty` 中自定义组件库全局的空状态展示，如果在插槽中使用到了 `Empty` 组件，需要开启 `inConfigProvider` 属性。\n"
  },
  {
    "path": "packages/web-vue/components/config-provider/TEMPLATE.md",
    "content": "## zh-CN\n```yaml\nmeta:\n  type: 组件\n  category: 通用\ntitle: 全局配置 ConfigProvider\ndescription: 在应用的最外层进行配置，一次设置，全局生效。一般用于设置国际化语言等功能。\n```\n---\n## en-US\n```yaml\nmeta:\n  type: Component\n  category: Common\ntitle: ConfigProvider\ndescription: Configure in the outermost layer of the application, set once, and take effect globally. Generally used to set functions such as internationalized languages.\n```\n---\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/empty.md\n\n@import ./__demo__/rtl.md\n\n## API\n\n%%API(config-provider.vue)%%\n\n\n## FAQ\n\n## zh-CN\n### 全局配置\n\n`global` 属性设置为 `true` 时，会将配置内容注入到 Vue AppContext 中，一般用于解决使用 Modal、Message 组件的函数式调用方法时，配置内容无法生效的问题。\n\n### 自定义空状态展示\n\n可以在 `#empty` 中自定义组件库全局的空状态展示，如果在插槽中使用到了 `Empty` 组件，需要开启 `inConfigProvider` 属性。\n\n---\n## en-US\n### Global Config\n\nWhen the `global` property is set to `true`, the configuration content will be injected into the Vue AppContext, which is generally used to solve the problem that the configuration content cannot take effect when the functional call method of the Modal and Message components is used.\n\n### Customize empty state display\n\nYou can customize the display of the global empty state of the component library in `#empty`. If the `Empty` component is used in the slot, you need to enable the `inConfigProvider` property.\n\n---\n"
  },
  {
    "path": "packages/web-vue/components/config-provider/__demo__/basic.md",
    "content": "```yaml\ntitle:\n  zh-CN: 基本用法\n  en-US: Basic Usage\n```\n\n## zh-CN\n\n设置国际化语言的基本用法。\n\n---\n\n## en-US\n\nSet the basic usage of internationalized languages.\n\n---\n\n```vue\n<template>\n  <a-config-provider :locale=\"locale\">\n    <a-radio-group\n      type=\"button\"\n      v-model=\"localeType\"\n      :options=\"localeOptions\"\n    ></a-radio-group>\n    <div>\n      <a-pagination\n        :total=\"50\"\n        show-total\n        show-jumper\n        show-page-size\n        style=\"margin-top: 20px; margin-bottom: 20px;\"\n      />\n    </div>\n    <a-space :size=\"20\" style=\"margin-bottom: 20px;\">\n      <a-range-picker style=\"width: 300px;\" />\n      <a-time-picker type=\"time-range\" style=\"width: 300px;\" />\n      <a-popconfirm content=\"Are you sure you want to delete?\">\n        <a-button type=\"primary\">Popconfirm</a-button>\n      </a-popconfirm>\n    </a-space>\n  </a-config-provider>\n</template>\n\n<script>\nimport { ref, computed } from 'vue';\nimport zhCN from '@arco-design/web-vue/es/locale/lang/zh-cn';\nimport enUS from '@arco-design/web-vue/es/locale/lang/en-us';\nimport esES from '@arco-design/web-vue/es/locale/lang/es-es';\nimport jaJP from '@arco-design/web-vue/es/locale/lang/ja-jp';\nimport idID from '@arco-design/web-vue/es/locale/lang/id-id';\nimport frFR from '@arco-design/web-vue/es/locale/lang/fr-fr';\nimport ptPT from '@arco-design/web-vue/es/locale/lang/pt-pt';\nimport deDE from '@arco-design/web-vue/es/locale/lang/de-de';\nimport koKR from '@arco-design/web-vue/es/locale/lang/ko-kr';\nimport itIT from '@arco-design/web-vue/es/locale/lang/it-it';\nimport thTH from '@arco-design/web-vue/es/locale/lang/th-th';\nimport viVN from '@arco-design/web-vue/es/locale/lang/vi-vn';\nimport nlNL from '@arco-design/web-vue/es/locale/lang/nl-nl';\n\nconst locales = {\n  'zh-CN': zhCN,\n  'en-US': enUS,\n  'es-ES': esES,\n  'ja-JP': jaJP,\n  'id-ID': idID,\n  'fr-FR': frFR,\n  'pt-PT': ptPT,\n  'de-DE': deDE,\n  'ko-KR': koKR,\n  'it-IT': itIT,\n  'th-TH': thTH,\n  'vi-VN': viVN,\n  'nl-NL': nlNL,\n};\n\nexport default {\n  setup() {\n    const localeType = ref('es-ES');\n    const locale = computed(() => {\n      return locales[localeType.value] || zhCN;\n    });\n\n    return {\n      localeType,\n      locale,\n      localeOptions: Object.keys(locales),\n    };\n  },\n};\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/config-provider/__demo__/empty.md",
    "content": "```yaml\ntitle:\n  zh-CN: 自定义空状态元素\n  en-US: Custom Empty Element\n```\n\n## zh-CN\n\n通过 `empty` 插槽可以全局自定义空状态元素。\n\n---\n\n## en-US\n\nEmpty state elements can be customized globally via the `empty` slot.\n\n---\n\n```vue\n<template>\n  <a-config-provider>\n    <template #empty=\"scope\">\n      <a-empty v-if=\"scope?.component==='cascader'\" description=\"cascader no data!\" in-config-provider>\n      </a-empty>\n      <a-empty v-else-if=\"scope?.component==='select'\" description=\"select no data!\" in-config-provider></a-empty>\n      <a-empty v-else-if=\"scope?.component==='tree-select'\" description=\"tree-select no data!\" in-config-provider></a-empty>\n      <a-empty v-else-if=\"scope?.component==='list'\" description=\"list no data!\" in-config-provider></a-empty>\n      <a-empty v-else-if=\"scope?.component==='table'\" description=\"table no data!\" in-config-provider></a-empty>\n      <div v-else class=\"my-empty\">\n        <icon-trophy />\n      </div>\n    </template>\n    <a-space direction=\"vertical\" fill>\n      <a-cascader :options=\"[]\" placeholder=\"cascader\" allow-search />\n      <a-select placeholder=\"select\" allow-search />\n      <a-tree-select placeholder=\"tree-select\"/>\n      <a-list>\n        <template #header>\n          Empty List\n        </template>\n      </a-list>\n      <a-table :columns=\"columns\" :data=\"[]\" />\n      <a-empty></a-empty>\n    </a-space>\n  </a-config-provider>\n</template>\n\n<script>\nimport { IconTrophy } from '@arco-design/web-vue/es/icon';\n\nexport default {\n  components: {\n    IconTrophy\n  },\n  setup() {\n    const columns = [\n      {\n        title: 'Name',\n        dataIndex: 'name',\n      },\n      {\n        title: 'Salary',\n        dataIndex: 'salary',\n      },\n      {\n        title: 'Address',\n        dataIndex: 'address',\n      },\n      {\n        title: 'Email',\n        dataIndex: 'email',\n      },\n    ];\n    return {\n      columns\n    }\n  }\n}\n</script>\n\n<style>\n.my-empty {\n  padding: 20px;\n  width: 100%;\n  text-align: center;\n  box-sizing: border-box;\n}\n</style>\n```\n"
  },
  {
    "path": "packages/web-vue/components/config-provider/__demo__/rtl.md",
    "content": "```yaml\ntitle:\n  zh-CN: RTL 视图\n  en-US: RTL\n```\n\n## zh-CN\n\n设置组件为从右向左阅读的视图。\n\n---\n\n## en-US\n\nSet the component to a view that reads from right to left.\n\n---\n\n```vue\n<template>\n  <div>\n    <a-switch v-model=\"rtlType\" style=\"margin-bottom: 20px;\">\n      <template #checked>\n        RTL\n      </template>\n      <template #unchecked>\n        LTR\n      </template>\n    </a-switch>\n    <a-config-provider :rtl=\"rtlType\">\n      <a-tabs :default-active-key=\"2\" style=\"margin-bottom: 20px;\">\n        <a-tab-pane\n          v-for=\"i in 36\"\n          :key=\"i\"\n          :title=\"`Tab ${i}`\"\n        >\n          Content of Tab Panel {{ i }}\n        </a-tab-pane>\n      </a-tabs>\n      <a-space :direction=\"'vertical'\" style=\"width: 100%;\">\n        <a-space :size=\"40\">\n          <a-badge :count=\"9\">\n            <a-avatar shape=\"square\" />\n          </a-badge>\n          <a-badge :count=\"9\" dot :dotStyle=\"{ width: '10px', height: '10px' }\">\n            <a-avatar shape=\"square\" />\n          </a-badge>\n          <a-badge :dotStyle=\"{ height: '16px', width: '16px', fontSize: '14px' }\">\n            <template #content>\n              <IconClockCircle\n                :style=\"{ verticalAlign: 'middle', color: 'var(--color-text-2)' }\"\n              />\n            </template>\n            <a-avatar shape=\"square\" />\n          </a-badge>\n          <a-tag :color=\"'red'\" closable>red</a-tag>\n          <a-tag :color=\"'blue'\" closable>blue</a-tag>\n          <a-tag :color=\"'green'\" closable>green</a-tag>\n        </a-space>\n      </a-space>\n    </a-config-provider>\n  </div>\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n  setup() {\n    const rtlType = ref(true);\n\n    return {\n      rtlType,\n    };\n  },\n};\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/config-provider/__test__/__snapshots__/demo.test.ts.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`<config-provider> demo: render [basic] correctly 1`] = `\n\"<span class=\\\\\"arco-radio-group-button arco-radio-group-size-medium arco-radio-group-direction-horizontal\\\\\"><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"zh-CN\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">zh-CN</span></label><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"en-US\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">en-US</span></label><label class=\\\\\"arco-radio-button arco-radio-checked\\\\\"><input type=\\\\\"radio\\\\\" checked=\\\\\"\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"es-ES\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">es-ES</span></label><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"ja-JP\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">ja-JP</span></label><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"id-ID\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">id-ID</span></label><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"fr-FR\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">fr-FR</span></label><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"pt-PT\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">pt-PT</span></label><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"de-DE\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">de-DE</span></label><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"ko-KR\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">ko-KR</span></label><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"it-IT\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">it-IT</span></label><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"th-TH\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">th-TH</span></label><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"vi-VN\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">vi-VN</span></label><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"nl-NL\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">nl-NL</span></label></span>\n<div>\n  <div class=\\\\\"arco-pagination arco-pagination-size-medium\\\\\" style=\\\\\"margin-top: 20px; margin-bottom: 20px;\\\\\"><span class=\\\\\"arco-pagination-total\\\\\">50 en total</span>\n    <ul class=\\\\\"arco-pagination-list\\\\\"><span class=\\\\\"arco-pagination-item arco-pagination-item-previous arco-pagination-item-disabled\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-left\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M32 8.4 16.444 23.956 32 39.513\\\\\"></path></svg></span>\n      <li class=\\\\\"arco-pagination-item arco-pagination-item-active\\\\\" pages=\\\\\"5\\\\\">1</li>\n      <li class=\\\\\"arco-pagination-item\\\\\" pages=\\\\\"5\\\\\">2</li>\n      <li class=\\\\\"arco-pagination-item\\\\\" pages=\\\\\"5\\\\\">3</li>\n      <li class=\\\\\"arco-pagination-item\\\\\" pages=\\\\\"5\\\\\">4</li>\n      <li class=\\\\\"arco-pagination-item\\\\\" pages=\\\\\"5\\\\\">5</li>\n      <!----><span class=\\\\\"arco-pagination-item arco-pagination-item-next\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-right\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"m16 39.513 15.556-15.557L16 8.4\\\\\"></path></svg></span>\n    </ul><span class=\\\\\"arco-pagination-options\\\\\"><span class=\\\\\"arco-select-view-single arco-select arco-select-view arco-select-view-size-medium\\\\\" title=\\\\\"10 / página\\\\\"><!----><input class=\\\\\"arco-select-view-input arco-select-view-input-hidden\\\\\" readonly=\\\\\"\\\\\" value=\\\\\"\\\\\"><span class=\\\\\"arco-select-view-value\\\\\">10 / página</span><span class=\\\\\"arco-select-view-suffix\\\\\"><!----><span class=\\\\\"arco-select-view-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down arco-select-view-arrow-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n    <!----></span></span>\n    <!----></span><span class=\\\\\"arco-pagination-jumper\\\\\"><span class=\\\\\"arco-pagination-jumper-prepend arco-pagination-jumper-text-goto\\\\\">Ir a</span><span class=\\\\\"arco-input-wrapper arco-input-number arco-input-number-mode-embed arco-input-number-size-medium arco-pagination-jumper-input\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" role=\\\\\"spinbutton\\\\\" aria-valuemax=\\\\\"5\\\\\" aria-valuemin=\\\\\"1\\\\\" aria-valuenow=\\\\\"\\\\\" value=\\\\\"\\\\\"><!----><!----></span>\n    <!--v-if-->\n    <!--v-if--></span>\n  </div>\n</div>\n<div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 20px; row-gap: 20px; margin-bottom: 20px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-picker arco-picker-range arco-picker-size-medium\\\\\" style=\\\\\"width: 300px;\\\\\" visible=\\\\\"false\\\\\">\n      <!--v-if-->\n      <div class=\\\\\"arco-picker-input arco-picker-input-active\\\\\"><input placeholder=\\\\\"Fecha inicial\\\\\"></div><span class=\\\\\"arco-picker-separator\\\\\">-</span>\n      <div class=\\\\\"arco-picker-input\\\\\"><input placeholder=\\\\\"Fecha final\\\\\"></div>\n      <div class=\\\\\"arco-picker-suffix\\\\\">\n        <!--v-if--><span class=\\\\\"arco-picker-suffix-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-calendar\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M7 22h34M14 5v8m20-8v8M8 41h32a1 1 0 0 0 1-1V10a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v30a1 1 0 0 0 1 1Z\\\\\"></path></svg></span>\n        <!--v-if-->\n      </div>\n    </div>\n    <!---->\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-picker arco-picker-range arco-picker-size-medium\\\\\" style=\\\\\"width: 300px;\\\\\" visible=\\\\\"false\\\\\" editable=\\\\\"true\\\\\">\n      <!--v-if-->\n      <div class=\\\\\"arco-picker-input arco-picker-input-active\\\\\"><input placeholder=\\\\\"Seleccionar hora\\\\\"></div><span class=\\\\\"arco-picker-separator\\\\\"> - </span>\n      <div class=\\\\\"arco-picker-input\\\\\"><input placeholder=\\\\\"Seleccionar hora\\\\\"></div>\n      <div class=\\\\\"arco-picker-suffix\\\\\">\n        <!--v-if--><span class=\\\\\"arco-picker-suffix-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-clock-circle\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M24 14v10h9.5m8.5 0c0 9.941-8.059 18-18 18S6 33.941 6 24 14.059 6 24 6s18 8.059 18 18Z\\\\\"></path></svg></span>\n        <!--v-if-->\n      </div>\n    </div>\n    <!---->\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n      <!--v-if-->Popconfirm\n    </button>\n    <!---->\n  </div>\n</div>\"\n`;\n\nexports[`<config-provider> demo: render [empty] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-vertical arco-space-fill\\\\\" style=\\\\\"column-gap: 8px; row-gap: 8px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-select-view-single arco-select-view arco-select-view-size-medium arco-select-view-search\\\\\" title=\\\\\"\\\\\"><!----><input class=\\\\\"arco-select-view-input\\\\\" placeholder=\\\\\"cascader\\\\\" value=\\\\\"\\\\\"><span class=\\\\\"arco-select-view-value arco-select-view-value-hidden\\\\\"><!----></span><span class=\\\\\"arco-select-view-suffix\\\\\"><!----><span class=\\\\\"arco-select-view-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down arco-select-view-arrow-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n    <!----></span></span>\n    <!---->\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-select-view-single arco-select arco-select-view arco-select-view-size-medium arco-select-view-search\\\\\" title=\\\\\"\\\\\"><!----><input class=\\\\\"arco-select-view-input\\\\\" placeholder=\\\\\"select\\\\\" value=\\\\\"\\\\\"><span class=\\\\\"arco-select-view-value arco-select-view-value-hidden\\\\\"><!----></span><span class=\\\\\"arco-select-view-suffix\\\\\"><!----><span class=\\\\\"arco-select-view-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down arco-select-view-arrow-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n    <!----></span></span>\n    <!---->\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-select-view-single arco-select-view arco-select-view-size-medium\\\\\" title=\\\\\"\\\\\"><!----><input class=\\\\\"arco-select-view-input\\\\\" readonly=\\\\\"\\\\\" placeholder=\\\\\"tree-select\\\\\" value=\\\\\"\\\\\"><span class=\\\\\"arco-select-view-value arco-select-view-value-hidden\\\\\"><!----></span><span class=\\\\\"arco-select-view-suffix\\\\\"><!----><span class=\\\\\"arco-select-view-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down arco-select-view-arrow-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n    <!----></span></span>\n    <!---->\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-list-wrapper\\\\\">\n      <div class=\\\\\"arco-spin arco-list-spin\\\\\">\n        <div class=\\\\\"arco-scrollbar arco-scrollbar-type-embed\\\\\">\n          <div class=\\\\\"arco-scrollbar-container arco-list arco-list-medium arco-list-bordered arco-list-split\\\\\">\n            <div class=\\\\\"arco-list-content-wrapper\\\\\">\n              <div class=\\\\\"arco-list-header\\\\\"> Empty List </div>\n              <div role=\\\\\"list\\\\\" class=\\\\\"arco-list-content\\\\\">\n                <div class=\\\\\"arco-empty\\\\\">\n                  <div class=\\\\\"arco-empty-image\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-empty\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n                      <path d=\\\\\"M24 5v6m7 1 4-4m-18 4-4-4m28.5 22H28s-1 3-4 3-4-3-4-3H6.5M40 41H8a2 2 0 0 1-2-2v-8.46a2 2 0 0 1 .272-1.007l6.15-10.54A2 2 0 0 1 14.148 18H33.85a2 2 0 0 1 1.728.992l6.149 10.541A2 2 0 0 1 42 30.541V39a2 2 0 0 1-2 2Z\\\\\"></path>\n                    </svg></div>\n                  <div class=\\\\\"arco-empty-description\\\\\">list no data!</div>\n                </div>\n                <!---->\n              </div>\n              <!---->\n            </div>\n          </div>\n          <!--v-if-->\n          <!--v-if-->\n        </div>\n        <!---->\n        <!---->\n      </div>\n    </div>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-table arco-table-size-large arco-table-border arco-table-hover arco-table-empty\\\\\">\n      <!---->\n      <div class=\\\\\"arco-spin\\\\\">\n        <!---->\n        <div class=\\\\\"arco-table-container\\\\\">\n          <div class=\\\\\"arco-scrollbar arco-scrollbar-type-embed\\\\\" style=\\\\\"height: 100%;\\\\\">\n            <div class=\\\\\"arco-scrollbar-container arco-table-content arco-table-content-scroll-x\\\\\">\n              <table class=\\\\\"arco-table-element\\\\\" cellpadding=\\\\\"0\\\\\" cellspacing=\\\\\"0\\\\\">\n                <colgroup>\n                  <col>\n                  <col>\n                  <col>\n                  <col>\n                </colgroup>\n                <thead>\n                  <tr class=\\\\\"arco-table-tr\\\\\">\n                    <th class=\\\\\"arco-table-th\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Name</span>\n                      <!---->\n                      <!----></span>\n                      <!---->\n                      <!---->\n                    </th>\n                    <th class=\\\\\"arco-table-th\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Salary</span>\n                      <!---->\n                      <!----></span>\n                      <!---->\n                      <!---->\n                    </th>\n                    <th class=\\\\\"arco-table-th\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Address</span>\n                      <!---->\n                      <!----></span>\n                      <!---->\n                      <!---->\n                    </th>\n                    <th class=\\\\\"arco-table-th\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Email</span>\n                      <!---->\n                      <!----></span>\n                      <!---->\n                      <!---->\n                    </th>\n                  </tr>\n                </thead>\n                <tbody>\n                  <tr class=\\\\\"arco-table-tr arco-table-tr-empty\\\\\">\n                    <td class=\\\\\"arco-table-td\\\\\" colspan=\\\\\"4\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\"><div class=\\\\\"arco-empty\\\\\"><div class=\\\\\"arco-empty-image\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-empty\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M24 5v6m7 1 4-4m-18 4-4-4m28.5 22H28s-1 3-4 3-4-3-4-3H6.5M40 41H8a2 2 0 0 1-2-2v-8.46a2 2 0 0 1 .272-1.007l6.15-10.54A2 2 0 0 1 14.148 18H33.85a2 2 0 0 1 1.728.992l6.149 10.541A2 2 0 0 1 42 30.541V39a2 2 0 0 1-2 2Z\\\\\"></path></svg></div><div class=\\\\\"arco-empty-description\\\\\">table no data!</div></div></span></span></td>\n                  </tr>\n                </tbody>\n                <!---->\n              </table>\n            </div>\n            <!--v-if-->\n            <!--v-if-->\n          </div>\n        </div>\n        <!---->\n        <!---->\n        <!---->\n      </div>\n    </div>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"my-empty\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-trophy\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n        <path d=\\\\\"M24 33c-6.075 0-11-4.925-11-11m11 11c6.075 0 11-4.925 11-11M24 33v8M13 22V7h22v15m-22 0V9H7v7a6 6 0 0 0 6 6Zm22 0V9h6v7a6 6 0 0 1-6 6ZM12 41h24\\\\\"></path>\n      </svg></div>\n  </div>\n</div>\"\n`;\n\nexports[`<config-provider> demo: render [rtl] correctly 1`] = `\n\"<div><button type=\\\\\"button\\\\\" role=\\\\\"switch\\\\\" aria-checked=\\\\\"true\\\\\" class=\\\\\"arco-switch arco-switch-type-circle arco-switch-checked\\\\\" style=\\\\\"margin-bottom: 20px;\\\\\"><span class=\\\\\"arco-switch-handle\\\\\"><span class=\\\\\"arco-switch-handle-icon\\\\\"></span></span><!--  prettier-ignore  --><span class=\\\\\"arco-switch-text-holder\\\\\"> RTL </span><span class=\\\\\"arco-switch-text\\\\\"> RTL </span></button>\n  <div class=\\\\\"arco-tabs arco-tabs-horizontal arco-tabs-top arco-tabs-type-line arco-tabs-size-medium arco-tabs-rtl\\\\\" style=\\\\\"margin-bottom: 20px;\\\\\">\n    <!---->\n    <div class=\\\\\"arco-tabs-nav arco-tabs-nav-horizontal arco-tabs-nav-top arco-tabs-nav-size-medium arco-tabs-nav-type-line\\\\\">\n      <!---->\n      <div class=\\\\\"arco-tabs-nav-tab\\\\\">\n        <div class=\\\\\"arco-tabs-nav-tab-list\\\\\" style=\\\\\"transform: translateX(0px);\\\\\">\n          <!---->\n        </div>\n        <!---->\n      </div>\n      <!---->\n      <div class=\\\\\"arco-tabs-nav-extra\\\\\">\n        <!---->\n        <!---->\n      </div>\n    </div>\n    <div class=\\\\\"arco-tabs-content\\\\\">\n      <div class=\\\\\"arco-tabs-content-list\\\\\" style=\\\\\"margin-right: -0%;\\\\\">\n        <div class=\\\\\"arco-tabs-content-item\\\\\">\n          <div class=\\\\\"arco-tabs-pane\\\\\"> Content of Tab Panel 1</div>\n        </div>\n        <div class=\\\\\"arco-tabs-content-item arco-tabs-content-item-active\\\\\">\n          <div class=\\\\\"arco-tabs-pane\\\\\"> Content of Tab Panel 2</div>\n        </div>\n        <div class=\\\\\"arco-tabs-content-item\\\\\">\n          <div class=\\\\\"arco-tabs-pane\\\\\"> Content of Tab Panel 3</div>\n        </div>\n        <div class=\\\\\"arco-tabs-content-item\\\\\">\n          <div class=\\\\\"arco-tabs-pane\\\\\"> Content of Tab Panel 4</div>\n        </div>\n        <div class=\\\\\"arco-tabs-content-item\\\\\">\n          <div class=\\\\\"arco-tabs-pane\\\\\"> Content of Tab Panel 5</div>\n        </div>\n        <div class=\\\\\"arco-tabs-content-item\\\\\">\n          <div class=\\\\\"arco-tabs-pane\\\\\"> Content of Tab Panel 6</div>\n        </div>\n        <div class=\\\\\"arco-tabs-content-item\\\\\">\n          <div class=\\\\\"arco-tabs-pane\\\\\"> Content of Tab Panel 7</div>\n        </div>\n        <div class=\\\\\"arco-tabs-content-item\\\\\">\n          <div class=\\\\\"arco-tabs-pane\\\\\"> Content of Tab Panel 8</div>\n        </div>\n        <div class=\\\\\"arco-tabs-content-item\\\\\">\n          <div class=\\\\\"arco-tabs-pane\\\\\"> Content of Tab Panel 9</div>\n        </div>\n        <div class=\\\\\"arco-tabs-content-item\\\\\">\n          <div class=\\\\\"arco-tabs-pane\\\\\"> Content of Tab Panel 10</div>\n        </div>\n        <div class=\\\\\"arco-tabs-content-item\\\\\">\n          <div class=\\\\\"arco-tabs-pane\\\\\"> Content of Tab Panel 11</div>\n        </div>\n        <div class=\\\\\"arco-tabs-content-item\\\\\">\n          <div class=\\\\\"arco-tabs-pane\\\\\"> Content of Tab Panel 12</div>\n        </div>\n        <div class=\\\\\"arco-tabs-content-item\\\\\">\n          <div class=\\\\\"arco-tabs-pane\\\\\"> Content of Tab Panel 13</div>\n        </div>\n        <div class=\\\\\"arco-tabs-content-item\\\\\">\n          <div class=\\\\\"arco-tabs-pane\\\\\"> Content of Tab Panel 14</div>\n        </div>\n        <div class=\\\\\"arco-tabs-content-item\\\\\">\n          <div class=\\\\\"arco-tabs-pane\\\\\"> Content of Tab Panel 15</div>\n        </div>\n        <div class=\\\\\"arco-tabs-content-item\\\\\">\n          <div class=\\\\\"arco-tabs-pane\\\\\"> Content of Tab Panel 16</div>\n        </div>\n        <div class=\\\\\"arco-tabs-content-item\\\\\">\n          <div class=\\\\\"arco-tabs-pane\\\\\"> Content of Tab Panel 17</div>\n        </div>\n        <div class=\\\\\"arco-tabs-content-item\\\\\">\n          <div class=\\\\\"arco-tabs-pane\\\\\"> Content of Tab Panel 18</div>\n        </div>\n        <div class=\\\\\"arco-tabs-content-item\\\\\">\n          <div class=\\\\\"arco-tabs-pane\\\\\"> Content of Tab Panel 19</div>\n        </div>\n        <div class=\\\\\"arco-tabs-content-item\\\\\">\n          <div class=\\\\\"arco-tabs-pane\\\\\"> Content of Tab Panel 20</div>\n        </div>\n        <div class=\\\\\"arco-tabs-content-item\\\\\">\n          <div class=\\\\\"arco-tabs-pane\\\\\"> Content of Tab Panel 21</div>\n        </div>\n        <div class=\\\\\"arco-tabs-content-item\\\\\">\n          <div class=\\\\\"arco-tabs-pane\\\\\"> Content of Tab Panel 22</div>\n        </div>\n        <div class=\\\\\"arco-tabs-content-item\\\\\">\n          <div class=\\\\\"arco-tabs-pane\\\\\"> Content of Tab Panel 23</div>\n        </div>\n        <div class=\\\\\"arco-tabs-content-item\\\\\">\n          <div class=\\\\\"arco-tabs-pane\\\\\"> Content of Tab Panel 24</div>\n        </div>\n        <div class=\\\\\"arco-tabs-content-item\\\\\">\n          <div class=\\\\\"arco-tabs-pane\\\\\"> Content of Tab Panel 25</div>\n        </div>\n        <div class=\\\\\"arco-tabs-content-item\\\\\">\n          <div class=\\\\\"arco-tabs-pane\\\\\"> Content of Tab Panel 26</div>\n        </div>\n        <div class=\\\\\"arco-tabs-content-item\\\\\">\n          <div class=\\\\\"arco-tabs-pane\\\\\"> Content of Tab Panel 27</div>\n        </div>\n        <div class=\\\\\"arco-tabs-content-item\\\\\">\n          <div class=\\\\\"arco-tabs-pane\\\\\"> Content of Tab Panel 28</div>\n        </div>\n        <div class=\\\\\"arco-tabs-content-item\\\\\">\n          <div class=\\\\\"arco-tabs-pane\\\\\"> Content of Tab Panel 29</div>\n        </div>\n        <div class=\\\\\"arco-tabs-content-item\\\\\">\n          <div class=\\\\\"arco-tabs-pane\\\\\"> Content of Tab Panel 30</div>\n        </div>\n        <div class=\\\\\"arco-tabs-content-item\\\\\">\n          <div class=\\\\\"arco-tabs-pane\\\\\"> Content of Tab Panel 31</div>\n        </div>\n        <div class=\\\\\"arco-tabs-content-item\\\\\">\n          <div class=\\\\\"arco-tabs-pane\\\\\"> Content of Tab Panel 32</div>\n        </div>\n        <div class=\\\\\"arco-tabs-content-item\\\\\">\n          <div class=\\\\\"arco-tabs-pane\\\\\"> Content of Tab Panel 33</div>\n        </div>\n        <div class=\\\\\"arco-tabs-content-item\\\\\">\n          <div class=\\\\\"arco-tabs-pane\\\\\"> Content of Tab Panel 34</div>\n        </div>\n        <div class=\\\\\"arco-tabs-content-item\\\\\">\n          <div class=\\\\\"arco-tabs-pane\\\\\"> Content of Tab Panel 35</div>\n        </div>\n        <div class=\\\\\"arco-tabs-content-item\\\\\">\n          <div class=\\\\\"arco-tabs-pane\\\\\"> Content of Tab Panel 36</div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\\\\\"arco-space arco-space-vertical arco-space-rtl\\\\\" style=\\\\\"column-gap: 8px; row-gap: 8px; width: 100%;\\\\\">\n    <!---->\n    <div class=\\\\\"arco-space-item\\\\\">\n      <div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center arco-space-rtl\\\\\" style=\\\\\"column-gap: 40px; row-gap: 40px;\\\\\">\n        <!---->\n        <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-badge arco-badge-rtl\\\\\"><div class=\\\\\"arco-avatar arco-avatar-square arco-avatar-rtl\\\\\"><span class=\\\\\"arco-avatar-text\\\\\"></span>\n          <!--v-if-->\n        </div><span class=\\\\\"arco-badge-number\\\\\"><span>9</span></span></span>\n      </div>\n      <!---->\n      <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-badge arco-badge-rtl\\\\\"><div class=\\\\\"arco-avatar arco-avatar-square arco-avatar-rtl\\\\\"><span class=\\\\\"arco-avatar-text\\\\\"></span>\n        <!--v-if-->\n      </div><span class=\\\\\"arco-badge-dot\\\\\" style=\\\\\"width: 10px; height: 10px;\\\\\"></span></span>\n    </div>\n    <!---->\n    <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-badge arco-badge-rtl\\\\\"><div class=\\\\\"arco-avatar arco-avatar-square arco-avatar-rtl\\\\\"><span class=\\\\\"arco-avatar-text\\\\\"></span>\n      <!--v-if-->\n    </div><span class=\\\\\"arco-badge-custom-dot\\\\\" style=\\\\\"height: 16px; width: 16px; font-size: 14px;\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-clock-circle\\\\\" style=\\\\\"vertical-align: middle;\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M24 14v10h9.5m8.5 0c0 9.941-8.059 18-18 18S6 33.941 6 24 14.059 6 24 6s18 8.059 18 18Z\\\\\"></path></svg></span></span>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-tag arco-tag-size-medium arco-tag-red arco-tag-checked arco-tag-rtl\\\\\"><!--v-if-->red<span class=\\\\\"arco-icon-hover arco-tag-icon-hover arco-tag-close-btn\\\\\" role=\\\\\"button\\\\\" aria-label=\\\\\"Close\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-close\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M9.857 9.858 24 24m0 0 14.142 14.142M24 24 38.142 9.858M24 24 9.857 38.142\\\\\"></path></svg></span>\n    <!--v-if--></span>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-tag arco-tag-size-medium arco-tag-blue arco-tag-checked arco-tag-rtl\\\\\"><!--v-if-->blue<span class=\\\\\"arco-icon-hover arco-tag-icon-hover arco-tag-close-btn\\\\\" role=\\\\\"button\\\\\" aria-label=\\\\\"Close\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-close\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M9.857 9.858 24 24m0 0 14.142 14.142M24 24 38.142 9.858M24 24 9.857 38.142\\\\\"></path></svg></span>\n    <!--v-if--></span>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-tag arco-tag-size-medium arco-tag-green arco-tag-checked arco-tag-rtl\\\\\"><!--v-if-->green<span class=\\\\\"arco-icon-hover arco-tag-icon-hover arco-tag-close-btn\\\\\" role=\\\\\"button\\\\\" aria-label=\\\\\"Close\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-close\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M9.857 9.858 24 24m0 0 14.142 14.142M24 24 38.142 9.858M24 24 9.857 38.142\\\\\"></path></svg></span>\n    <!--v-if--></span>\n  </div>\n</div>\n</div>\n</div>\n</div>\"\n`;\n"
  },
  {
    "path": "packages/web-vue/components/config-provider/__test__/demo.test.ts",
    "content": "import demoTest from '../../../scripts/demo-test';\n\ndemoTest('config-provider');\n"
  },
  {
    "path": "packages/web-vue/components/config-provider/config-provider.vue",
    "content": "<template>\n  <slot />\n</template>\n\n<script lang=\"ts\">\nimport type { PropType } from 'vue';\nimport {\n  defineComponent,\n  provide,\n  reactive,\n  toRefs,\n  getCurrentInstance,\n} from 'vue';\nimport { configProviderInjectionKey } from './context';\nimport { ArcoLang } from '../locale/interface';\nimport { Size } from '../_utils/constant';\n\nexport default defineComponent({\n  name: 'ConfigProvider',\n  props: {\n    /**\n     * @zh 组件类名前缀\n     * @en Component classname prefix\n     */\n    prefixCls: {\n      type: String,\n      default: 'arco',\n    },\n    /**\n     * @zh 配置语言包\n     * @en Configure language pack\n     */\n    locale: {\n      type: Object as PropType<ArcoLang>,\n    },\n    /**\n     * @zh 大小\n     * @en Size\n     * @version 2.14.0\n     */\n    size: {\n      type: String as PropType<Size>,\n    },\n    /**\n     * @zh 是否全局生效\n     * @en Is global effect\n     * @version 2.25.0\n     */\n    global: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 是否在容器滚动时更新弹出框的位置\n     * @us Whether to update the position of the popup when the container is scrolled\n     * @version 2.25.0\n     */\n    updateAtScroll: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 是否在滚动时关闭弹出框\n     * @en Whether to close the popover when scrolling\n     * @version 2.46.0\n     */\n    scrollToClose: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 是否交换时间\n     * @en Whether to exchange time\n     * @version 2.48.0\n     */\n    exchangeTime: {\n      type: Boolean,\n      default: true,\n    },\n    /**\n     * @zh 视图的表现形式是从右开始向左结束\n     * @en View starts from the right and ends on the left\n     */\n    rtl: {\n      type: Boolean,\n      default: false,\n    },\n  },\n  /**\n   * @zh 自定义空状态元素\n   * @en Custom empty element\n   * @slot empty\n   * @binding {string} component\n   * @version 2.28.0\n   */\n  /**\n   * @zh 自定义加载中元素\n   * @en Custom loading element\n   * @slot loading\n   * @version 2.28.0\n   */\n  setup(props, { slots }) {\n    const {\n      prefixCls,\n      locale,\n      size,\n      updateAtScroll,\n      scrollToClose,\n      exchangeTime,\n      rtl,\n    } = toRefs(props);\n\n    const config = reactive({\n      slots,\n      prefixCls,\n      locale,\n      size,\n      updateAtScroll,\n      scrollToClose,\n      exchangeTime,\n      rtl,\n    });\n\n    if (props.global) {\n      const instance = getCurrentInstance();\n      if (instance) {\n        instance.appContext.app.provide(configProviderInjectionKey, config);\n      }\n    } else {\n      provide(configProviderInjectionKey, config);\n    }\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/config-provider/context.ts",
    "content": "import { InjectionKey, Slots } from 'vue';\nimport { ArcoLang } from '../locale/interface';\nimport { Size } from '../_utils/constant';\n\nexport interface ConfigProvider {\n  slots: Slots;\n  prefixCls?: string;\n  locale?: ArcoLang;\n  size?: Size;\n  updateAtScroll?: boolean;\n  scrollToClose?: boolean;\n  exchangeTime?: boolean;\n  rtl?: boolean;\n}\n\nexport const configProviderInjectionKey: InjectionKey<ConfigProvider> =\n  Symbol('ArcoConfigProvider');\n"
  },
  {
    "path": "packages/web-vue/components/config-provider/index.ts",
    "content": "import type { App } from 'vue';\nimport type { ArcoOptions } from '../_utils/types';\nimport { setGlobalConfig, getComponentPrefix } from '../_utils/global-config';\nimport _ConfigProvider from './config-provider.vue';\n\nconst ConfigProvider = Object.assign(_ConfigProvider, {\n  install: (app: App, options?: ArcoOptions) => {\n    setGlobalConfig(app, options);\n    const componentPrefix = getComponentPrefix(options);\n\n    app.component(componentPrefix + _ConfigProvider.name, _ConfigProvider);\n  },\n});\n\nexport type ConfigProviderInstance = InstanceType<typeof _ConfigProvider>;\n\nexport default ConfigProvider;\n"
  },
  {
    "path": "packages/web-vue/components/config-provider/style/index.ts",
    "content": "export {};\n"
  },
  {
    "path": "packages/web-vue/components/date-picker/CHANGELOG.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.54.5\n\n`2024-02-21`\n\n### 🐛 BugFix\n\n- refactor date utility functions and week picker to correctly show selected week ([#2970](https://github.com/arco-design/arco-design-vue/pull/2970))\n\n\n## 2.54.0\n\n`2023-12-15`\n\n### 🐛 BugFix\n\n- resolve arrow click issue in range-picker ([#2865](https://github.com/arco-design/arco-design-vue/pull/2865))\n\n\n## 2.53.3\n\n`2023-11-24`\n\n### 🐛 BugFix\n\n- fix invalid date due to mismatch between date and format ([#2789](https://github.com/arco-design/arco-design-vue/pull/2789))\n\n\n## 2.52.0\n\n`2023-09-22`\n\n### 🐛 BugFix\n\n- fix incorrect display of operations in range selector ([#2712](https://github.com/arco-design/arco-design-vue/pull/2712))\n\n\n## 2.47.0\n\n`2023-06-02`\n\n### 🐛 BugFix\n\n- add getDefaultValueFormat to solve v-model for week selector and quarter selector ([#2437](https://github.com/arco-design/arco-design-vue/pull/2437))\n\n\n## 2.46.1\n\n`2023-05-26`\n\n### 🐛 BugFix\n\n- fixed arrow display logic for year, month, and quarter modes in the date range picker ([#2451](https://github.com/arco-design/arco-design-vue/pull/2451))\n\n\n## 2.46.0\n\n`2023-05-12`\n\n### 🆎 TypeScript\n\n- DatePicker ([#2359](https://github.com/arco-design/arco-design-vue/pull/2359))\n\n\n## 2.45.2\n\n`2023-04-21`\n\n### 🐛 BugFix\n\n- fix styling problem with panel-only pickers ([#2349](https://github.com/arco-design/arco-design-vue/pull/2349))\n\n\n## 2.45.0\n\n`2023-04-07`\n\n### 🆕 Feature\n\n- Add the abbreviation property to control whether the abbreviation of the month is displayed ([#2264](https://github.com/arco-design/arco-design-vue/pull/2264))\n\n### 🐛 BugFix\n\n- Fix the problem that exchange-time fails when selecting ([#2302](https://github.com/arco-design/arco-design-vue/pull/2302))\n\n\n## 2.44.3\n\n`2023-03-24`\n\n### 🐛 BugFix\n\n- Fix bugs with year range selector ([#2270](https://github.com/arco-design/arco-design-vue/pull/2270))\n\n\n## 2.43.1\n\n`2023-02-17`\n\n### 🐛 BugFix\n\n- Fix the problem that an error is returned because dayjs does not support quarter parsing ([#2110](https://github.com/arco-design/arco-design-vue/pull/2110))\n\n\n## 2.43.0\n\n`2023-02-10`\n\n### 🆕 Feature\n\n- Add the `disabled-input` property to disable keyboard input ([#2072](https://github.com/arco-design/arco-design-vue/pull/2072))\n\n\n## 2.42.0\n\n`2023-01-13`\n\n### 🆕 Feature\n\n- Add blur event to support corresponding inspection in the form ([#1958](https://github.com/arco-design/arco-design-vue/pull/1958))\n\n\n## 2.41.0\n\n`2022-12-30`\n\n### 🆕 Feature\n\n- `date-picker` supports prefix slots ([#1997](https://github.com/arco-design/arco-design-vue/pull/1997))\n\n\n## 2.40.1\n\n`2022-12-23`\n\n### 🐛 BugFix\n\n- Fix the problem that the panel text display error under internationalization ([#1965](https://github.com/arco-design/arco-design-vue/pull/1965))\n\n\n## 2.40.0\n\n`2022-12-09`\n\n### 🐛 BugFix\n\n- Fix the bug that the `feedback` attribute of the `Form` component does not take effect in the `date-picker` component. ([#1932](https://github.com/arco-design/arco-design-vue/pull/1932))\n\n\n## 2.39.0\n\n`2022-11-18`\n\n### 🐛 BugFix\n\n- year range can't skip by 10 year ([#1847](https://github.com/arco-design/arco-design-vue/pull/1847))\n\n\n## 2.38.1\n\n`2022-11-04`\n\n### 🐛 BugFix\n\n- Fix internal property error issue ([#1818](https://github.com/arco-design/arco-design-vue/pull/1818))\n\n\n## 2.38.0-beta.2\n\n`2022-10-21`\n\n### 🐛 BugFix\n\n- Fix the problem of disabled style error under safari ([#1770](https://github.com/arco-design/arco-design-vue/pull/1770))\n\n\n## 2.35.2\n\n`2022-08-29`\n\n### 🐛 BugFix\n\n- Fixed the click selection event exception when selecting the year and month of the selection panel in some modes ([#1562](https://github.com/arco-design/arco-design-vue/pull/1562))\n\n### 💎 Enhancement\n\n- Optimized range selector also corrects order when selecting ([#1578](https://github.com/arco-design/arco-design-vue/pull/1578))\n\n\n## 2.35.0\n\n`2022-08-12`\n\n### 🆕 Feature\n\n- `DatePicker` add range picker header label click and normal picker month header label click ([#1421](https://github.com/arco-design/arco-design-vue/pull/1421))\n\n\n## 2.33.0\n\n`2022-07-08`\n\n### 🐛 BugFix\n\n- Fixed an issue where dropdown menus and clear options could still be opened in readonly mode ([#1400](https://github.com/arco-design/arco-design-vue/pull/1400))\n\n\n## 2.29.0\n\n`2022-05-27`\n\n### 🆕 Feature\n\n- Added property `show-confirm-btn` to customize whether to show the confirmation button ([#1198](https://github.com/arco-design/arco-design-vue/pull/1198))\n\n### 💎 Enhancement\n\n- only update the date when splicing the time ([#1199](https://github.com/arco-design/arco-design-vue/pull/1199))\n\n\n## 2.28.0\n\n`2022-05-20`\n\n### 🆕 Feature\n\n- Added property `preview-shortcur` to customize whether to preview the result of shortcut options ([#1175](https://github.com/arco-design/arco-design-vue/pull/1175))\n\n### 🐛 BugFix\n\n- `select time` is not internationalized ([#1173](https://github.com/arco-design/arco-design-vue/pull/1173))\n\n### 💎 Enhancement\n\n- Reset back to selected value when moving out of `shortcut` ([#1175](https://github.com/arco-design/arco-design-vue/pull/1175))\n\n\n## 2.27.0\n\n`2022-05-13`\n\n### 🐛 BugFix\n\n- the value of `week-picker ` and `quarter-picker` is wrong when using `v-model` ([#1112](https://github.com/arco-design/arco-design-vue/pull/1112))\n\n\n## 2.25.1\n\n`2022-04-27`\n\n### 🐛 BugFix\n\n- the button today cannot be hidden by setting showNowBtn to false ([#1046](https://github.com/arco-design/arco-design-vue/pull/1046))\n\n\n## 2.25.0\n\n`2022-04-22`\n\n### 🆕 Feature\n\n- add property exchangeTime ([#1020](https://github.com/arco-design/arco-design-vue/pull/1020))\n\n\n## 2.24.0\n\n`2022-04-15`\n\n### 💎 Enhancement\n\n- the selected value will merge with time when timePickerProps has value ([#981](https://github.com/arco-design/arco-design-vue/pull/981))\n\n\n## 2.21.0\n\n`2022-03-25`\n\n### 🆕 Feature\n\n- `dayStartOfWeek` support set to 0-6 ([#874](https://github.com/arco-design/arco-design-vue/pull/874))\n\n\n## 2.20.0\n\n`2022-03-18`\n\n### 🐛 BugFix\n\n- the select event is not triggered when the end time selected ([#844](https://github.com/arco-design/arco-design-vue/pull/844))\n\n\n## 2.19.0\n\n`2022-03-11`\n\n### 🐛 BugFix\n\n- Fix the problem that the offset of the range selector popup layer is wrong ([#796](https://github.com/arco-design/arco-design-vue/pull/796))\n\n\n## 2.18.0\n\n`2022-03-04`\n\n### 🆕 Feature\n\n- support quick switching of year and month in the head ([#754](https://github.com/arco-design/arco-design-vue/pull/754))\n\n\n## 2.16.2\n\n`2022-01-24`\n\n### 🐛 BugFix\n\n- `headerValue` reporting error in `vue 3.2.28` ([#643](https://github.com/arco-design/arco-design-vue/pull/643))\n\n\n## 2.16.0\n\n`2022-01-21`\n\n### 🆕 Feature\n\n- Added attribute `value-format` to format the return value ([#631](https://github.com/arco-design/arco-design-vue/pull/631))\n\n### 🐛 BugFix\n\n- do not open the popup when clear ([#633](https://github.com/arco-design/arco-design-vue/pull/633))\n- The return value should not concatenate the time when the time selection panel is not displayed ([#612](https://github.com/arco-design/arco-design-vue/pull/612))\n\n\n## 2.15.0\n\n`2022-01-14`\n\n### 🐛 BugFix\n\n- fix the problem of missing event parameters ([#579](https://github.com/arco-design/arco-design-vue/pull/579))\n\n\n## 2.13.0\n\n`2021-12-31`\n\n### 🐛 BugFix\n\n- fix the proplem that property `readonly` is invalid ([#472](https://github.com/arco-design/arco-design-vue/pull/472))\n\n\n## 2.6.0\n\n`2021-11-19`\n\n### 🐛 BugFix\n\n- Fix the problem of abnormal verification in form ([#195](https://github.com/arco-design/arco-design-vue/pull/195))\n\n"
  },
  {
    "path": "packages/web-vue/components/date-picker/CHANGELOG.zh-CN.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.54.5\n\n`2024-02-21`\n\n### 🐛 问题修复\n\n- 重构日期 utility 函数和 WeekPicker，以正确显示所选星期 ([#2970](https://github.com/arco-design/arco-design-vue/pull/2970))\n\n## 2.54.0\n\n`2023-12-15`\n\n### 🐛 问题修复\n\n- 修复日期范围部分模式下箭头点击问题 ([#2865](https://github.com/arco-design/arco-design-vue/pull/2865))\n\n\n## 2.53.3\n\n`2023-11-24`\n\n### 🐛 问题修复\n\n- 修复日期与format不一致导致出现无效日期 ([#2789](https://github.com/arco-design/arco-design-vue/pull/2789))\n\n\n## 2.52.0\n\n`2023-09-22`\n\n### 🐛 问题修复\n\n- 修复范围选择器操作箭头显示错误问题 ([#2712](https://github.com/arco-design/arco-design-vue/pull/2712))\n\n\n## 2.47.0\n\n`2023-06-02`\n\n### 🐛 问题修复\n\n- 添加 getDefaultValueFormat 解决周选择器和季度选择器的v-model 问题 ([#2437](https://github.com/arco-design/arco-design-vue/pull/2437))\n\n\n## 2.46.1\n\n`2023-05-26`\n\n### 🐛 问题修复\n\n- 修复日期范围选择器年、月、季度模式的箭头显示逻辑 ([#2451](https://github.com/arco-design/arco-design-vue/pull/2451))\n\n\n## 2.46.0\n\n`2023-05-12`\n\n### 🆎 类型修正\n\n- 日期选择器 ([#2359](https://github.com/arco-design/arco-design-vue/pull/2359))\n\n\n## 2.45.2\n\n`2023-04-21`\n\n### 🐛 问题修复\n\n- 修复只使用面板情况下的样式问题 ([#2349](https://github.com/arco-design/arco-design-vue/pull/2349))\n\n\n## 2.45.0\n\n`2023-04-07`\n\n### 🆕 新增功能\n\n- 增加 abbreviation 属性，控制月份是否显示简称 ([#2264](https://github.com/arco-design/arco-design-vue/pull/2264))\n\n### 🐛 问题修复\n\n- 修复 exchange-time 在选择时失效的问题 ([#2302](https://github.com/arco-design/arco-design-vue/pull/2302))\n\n\n## 2.44.3\n\n`2023-03-24`\n\n### 🐛 问题修复\n\n- 修复年份范围选择器存在的问题 ([#2270](https://github.com/arco-design/arco-design-vue/pull/2270))\n\n\n## 2.43.1\n\n`2023-02-17`\n\n### 🐛 问题修复\n\n- 修复因dayjs不支持季度解析导致返回错误的问题 ([#2110](https://github.com/arco-design/arco-design-vue/pull/2110))\n\n\n## 2.43.0\n\n`2023-02-10`\n\n### 🆕 新增功能\n\n- 增加 `disabled-input` 属性，可以禁用键盘输入 ([#2072](https://github.com/arco-design/arco-design-vue/pull/2072))\n\n\n## 2.42.0\n\n`2023-01-13`\n\n### 🆕 新增功能\n\n- 增加 blur 事件，可以在表单中支持相应检验 ([#1958](https://github.com/arco-design/arco-design-vue/pull/1958))\n\n\n## 2.41.0\n\n`2022-12-30`\n\n### 🆕 新增功能\n\n- `date-picker` 支持 `prefix` 插槽。 ([#1997](https://github.com/arco-design/arco-design-vue/pull/1997))\n\n\n## 2.40.1\n\n`2022-12-23`\n\n### 🐛 问题修复\n\n- 修复在国际化下面板文案显示错误的问题 ([#1965](https://github.com/arco-design/arco-design-vue/pull/1965))\n\n\n## 2.40.0\n\n`2022-12-09`\n\n### 🐛 问题修复\n\n- 修复 `Form` 组件的 `feedback` 属性在  `date-picker` 组件不生效的 bug。 ([#1932](https://github.com/arco-design/arco-design-vue/pull/1932))\n\n\n## 2.39.0\n\n`2022-11-18`\n\n### 🐛 问题修复\n\n- 修复选择年范围时无法跳转10年 ([#1847](https://github.com/arco-design/arco-design-vue/pull/1847))\n\n\n## 2.38.1\n\n`2022-11-04`\n\n### 🐛 问题修复\n\n- 修复内部属性错误问题 ([#1818](https://github.com/arco-design/arco-design-vue/pull/1818))\n\n\n## 2.38.0-beta.2\n\n`2022-10-21`\n\n### 🐛 问题修复\n\n- 修复在 safari 下 disabled 样式错误的问题 ([#1770](https://github.com/arco-design/arco-design-vue/pull/1770))\n\n\n## 2.35.2\n\n`2022-08-29`\n\n### 🐛 问题修复\n\n- 修复部分模式下选择面板年月选择时单击选择事件异常 ([#1562](https://github.com/arco-design/arco-design-vue/pull/1562))\n\n### 💎 功能优化\n\n- 优化范围选择器在选择时也会修正顺序 ([#1578](https://github.com/arco-design/arco-design-vue/pull/1578))\n\n\n## 2.35.0\n\n`2022-08-12`\n\n### 🆕 新增功能\n\n- 增加范围选择器头部点击与基础选择器月份点击至年份功能 ([#1421](https://github.com/arco-design/arco-design-vue/pull/1421))\n\n\n## 2.33.0\n\n`2022-07-08`\n\n### 🐛 问题修复\n\n- 修复 readonly 模式下仍可打开下拉菜单和清除选项的问题 ([#1400](https://github.com/arco-design/arco-design-vue/pull/1400))\n\n\n## 2.29.0\n\n`2022-05-27`\n\n### 🆕 新增功能\n\n- 新增属性 `show-confirm-btn` 用于自定义是否显示确认按钮 ([#1198](https://github.com/arco-design/arco-design-vue/pull/1198))\n\n### 💎 功能优化\n\n- 拼接时间的时候只更新日期 ([#1199](https://github.com/arco-design/arco-design-vue/pull/1199))\n\n\n## 2.28.0\n\n`2022-05-20`\n\n### 🆕 新增功能\n\n- 新增属性 `preview-shortcut` 用于自定义是否要预览快捷选项的结果 ([#1175](https://github.com/arco-design/arco-design-vue/pull/1175))\n\n### 🐛 问题修复\n\n- `选择时间`没有国际化 ([#1173](https://github.com/arco-design/arco-design-vue/pull/1173))\n\n### 💎 功能优化\n\n- 移出 `shortcut` 的时候重置回已选值 ([#1175](https://github.com/arco-design/arco-design-vue/pull/1175))\n\n\n## 2.27.0\n\n`2022-05-13`\n\n### 🐛 问题修复\n\n- 修复使用 `v-model` 绑定 `week-picker ` 和 `quarter-picker` 的时候值错误的问题 ([#1112](https://github.com/arco-design/arco-design-vue/pull/1112))\n\n\n## 2.25.1\n\n`2022-04-27`\n\n### 🐛 问题修复\n\n- 按钮 `今天` 无法通过将 `show-now-btn` 设置为 false 来隐藏 ([#1046](https://github.com/arco-design/arco-design-vue/pull/1046))\n\n\n## 2.25.0\n\n`2022-04-22`\n\n### 🆕 新增功能\n\n- 增加参数 `exchangeTime` ([#1020](https://github.com/arco-design/arco-design-vue/pull/1020))\n\n\n## 2.24.0\n\n`2022-04-15`\n\n### 💎 功能优化\n\n- 传递了 timePickerProps 就会在最终值上拼接时间 ([#981](https://github.com/arco-design/arco-design-vue/pull/981))\n\n\n## 2.21.0\n\n`2022-03-25`\n\n### 🆕 新增功能\n\n- `dayStartOfWeek` 支持设置为 0-6 ([#874](https://github.com/arco-design/arco-design-vue/pull/874))\n\n\n## 2.20.0\n\n`2022-03-18`\n\n### 🐛 问题修复\n\n- 选择结束时间的时候没有触发 select 事件 ([#844](https://github.com/arco-design/arco-design-vue/pull/844))\n\n\n## 2.19.0\n\n`2022-03-11`\n\n### 🐛 问题修复\n\n- 修复范围选择器弹出层的偏移量错误的问题 ([#796](https://github.com/arco-design/arco-design-vue/pull/796))\n\n\n## 2.18.0\n\n`2022-03-04`\n\n### 🆕 新增功能\n\n- 支持在头部快捷切换年月 ([#754](https://github.com/arco-design/arco-design-vue/pull/754))\n\n\n## 2.16.2\n\n`2022-01-24`\n\n### 🐛 问题修复\n\n- `headerValue` 在 `vue 3.2.28` 中报错 ([#643](https://github.com/arco-design/arco-design-vue/pull/643))\n\n\n## 2.16.0\n\n`2022-01-21`\n\n### 🆕 新增功能\n\n- 增加属性 `value-format` 用于格式化返回值 ([#631](https://github.com/arco-design/arco-design-vue/pull/631))\n\n### 🐛 问题修复\n\n- 点击清除按钮的时候不要展开弹出层 ([#633](https://github.com/arco-design/arco-design-vue/pull/633))\n- 返回值在不显示时间选择面板的时候不应该拼接时间 ([#612](https://github.com/arco-design/arco-design-vue/pull/612))\n\n\n## 2.15.0\n\n`2022-01-14`\n\n### 🐛 问题修复\n\n- 修复事件参数缺失的问题 ([#579](https://github.com/arco-design/arco-design-vue/pull/579))\n\n\n## 2.13.0\n\n`2021-12-31`\n\n### 🐛 问题修复\n\n- 修复 `readonly` 无效的问题 ([#472](https://github.com/arco-design/arco-design-vue/pull/472))\n\n\n## 2.6.0\n\n`2021-11-19`\n\n### 🐛 问题修复\n\n- 修复在 form 里校验异常的问题 ([#195](https://github.com/arco-design/arco-design-vue/pull/195))\n\n"
  },
  {
    "path": "packages/web-vue/components/date-picker/README.en-US.md",
    "content": "```yaml\nmeta:\n  type: Component\n  category: Data Entry\ntitle: DatePicker\ndescription: Choose a date. Support year, month, week, day type, support range selection, etc.\n```\n\n*Auto translate by google.*\n\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/month.md\n\n@import ./__demo__/year.md\n\n@import ./__demo__/quarter.md\n\n@import ./__demo__/week.md\n\n@import ./__demo__/showtime.md\n\n@import ./__demo__/range.md\n\n@import ./__demo__/default-value.md\n\n@import ./__demo__/disabled-date.md\n\n@import ./__demo__/shortcuts.md\n\n@import ./__demo__/shortcuts-position.md\n\n@import ./__demo__/disabled-date-advance.md\n\n@import ./__demo__/size.md\n\n@import ./__demo__/extra.md\n\n@import ./__demo__/disabled.md\n\n@import ./__demo__/date-render.md\n\n@import ./__demo__/control.md\n\n@import ./__demo__/trigger-element.md\n\n@import ./__demo__/panel-only.md\n\n## API\n\n\n### `Common` Props\n\n|Attribute|Description|Type|Default|version|\n|---|---|---|:---:|:---|\n|locale|Internationalization configuration, used to cover the locale file in the `datePicker` field|`Record<string, any>`|`-`||\n|hide-trigger|There is no trigger element, only the selection panel is displayed|`boolean`|`false`||\n|allow-clear|Whether to allow clear|`boolean`|`true`||\n|readonly|Whether it is read-only|`boolean`|`false`||\n|error|Whether it is an error state|`boolean`|`false`||\n|size|The size of the date picker|`'mini' \\| 'small' \\| 'medium' \\| 'large'`|`'medium'`||\n|shortcuts|Quick selection of preset time range|`ShortcutType[]`|`[]`||\n|shortcuts-position|The position of the preset range on the panel, which is placed at the bottom by default, and the side is generally used for scenes with a large number of preset times|`'left' \\| 'bottom' \\| 'right'`|`'bottom'`||\n|position|The position of the pop-up box|`'top' \\| 'tl' \\| 'tr' \\| 'bottom' \\| 'bl' \\| 'br'`|`'bl'`||\n|popup-visible|Control the open or closed state of the pop-up box|`boolean`|`-`||\n|default-popup-visible|The default pop-up box is open or closed|`boolean`|`false`||\n|trigger-props|You can pass in the parameters of the `Trigger` component|`TriggerProps`|`-`||\n|unmount-on-close|Whether to destroy the DOM structure when hiding|`boolean`|`false`||\n|placeholder|Prompt copy|`string`|`-`||\n|disabled|Whether to disable|`boolean`|`false`||\n|disabled-date|Unselectable date|`(current?: Date) => boolean`|`-`||\n|disabled-time|Unselectable time|`(current: Date) => DisabledTimeProps`|`-`||\n|picker-value **(v-model)**|Date displayed on the panel|`Date \\| string \\| number`|`-`||\n|default-picker-value|The date displayed on the panel by default|`Date \\| string \\| number`|`-`||\n|popup-container|Mount container for pop-up box|`string \\| HTMLElement`|`-`||\n|value-format|The format of the value, valid for `value` `defaultValue` `pickerValue` `defaultPickerValue` and the return value in the event, supports setting as timestamp, Date and string (refer to [String parsing format](#string-parsing-format) ). If not specified, it will be formatted as a string, in the same format as `format`.|`'timestamp' \\| 'Date' \\| string`|`-`|2.16.0|\n|preview-shortcut|Whether to preview the result of the shortcut|`boolean`|`true`|2.28.0|\n|show-confirm-btn|Whether to show the confirm button, always show when `showTime = true`.|`boolean`|`false`|2.29.0|\n|disabled-input|Whether input is disabled with the keyboard.|`boolean`|`false`|2.43.0|\n|abbreviation|Whether to enable abbreviation|`boolean`|`true`|2.45.0|\n### `Common` Events\n\n|Event Name|Description|Parameters|\n|---|---|---|\n|change|The component value changes|value: `Date \\| string \\| number \\| undefined`<br>date: `Date \\| undefined`<br>dateString: `string \\| undefined`|\n|select|The selected date has changed but the component value has not changed|value: `Date \\| string \\| number`<br>date: `Date`<br>dateString: `string`|\n|popup-visible-change|Open or close the pop-up box|visible: `boolean`|\n|ok|Click the confirm button|value: `Date \\| string \\| number`<br>date: `Date`<br>dateString: `string`|\n|clear|Click the clear button|-|\n|select-shortcut|Click on the shortcut option|shortcut: `ShortcutType`|\n|picker-value-change|Panel date change|value: `Date \\| string \\| number`<br>date: `Date`<br>dateString: `string`|\n### `Common` Slots\n\n|Slot Name|Description|Parameters|version|\n|---|---|---|:---|\n|prefix|Input box prefix|-|2.41.0|\n|suffix-icon|Input box suffix icon|-||\n|icon-next-double|Double arrow page backward icon|-||\n|icon-prev-double|Double arrow page forward icon|-||\n|icon-next|Single arrow page backward icon|-||\n|icon-prev|Single arrow page forward icon|-||\n|cell|Customize the contents of the date cell|date: `Date`||\n|extra|Extra footer|-||\n\n\n\n\n### `<date-picker>` Props\n\n|Attribute|Description|Type|Default|version|\n|---|---|---|:---:|:---|\n|model-value **(v-model)**|Value|`Date \\| string \\| number`|`-`||\n|default-value|Default value|`Date \\| string \\| number`|`-`||\n|format|Display the format of the date, refer to [String Parsing Format](#string-parsing-format)|`string \\| ((current: Date) => string)`|`-`||\n|day-start-of-week|The first day of the week starts on the day of the week, 0-Sunday, 1-Monday, and so on.|`0 \\| 1 \\| 2 \\| 3 \\| 4 \\| 5 \\| 6`|`0`|2-6 from 2.21.0|\n|show-time|Whether to increase time selection|`boolean`|`false`||\n|time-picker-props|Time display parameters, refer to [TimePickerProps](/vue/component/time-picker)|`Partial<TimePickerProps>`|`-`||\n|disabled|Whether to disable|`boolean`|`false`||\n|disabled-date|Unselectable date|`(current?: Date) => boolean`|`-`||\n|disabled-time|Unselectable time|`(current: Date) => DisabledTimeProps`|`-`||\n|show-now-btn|Whether to display `showTime`, select the button of the current time|`boolean`|`true`||\n\n\n\n\n### `<month-picker>` Props\n\n|Attribute|Description|Type|Default|\n|---|---|---|:---:|\n|model-value **(v-model)**|Value|`Date \\| string \\| number`|`-`|\n|default-value|Default value|`Date \\| string \\| number`|`-`|\n|format|Display the format of the date, refer to [String Parsing Format](#String Parsing Format)|`string`|`'YYYY-MM'`|\n\n\n\n\n### `<year-picker>` Props\n\n|Attribute|Description|Type|Default|\n|---|---|---|:---:|\n|model-value **(v-model)**|Value|`Date \\| string \\| number`|`-`|\n|default-value|Default value|`Date \\| string \\| number`|`-`|\n|format|Display the format of the date, refer to [String Parsing Format](#String Parsing Format)|`string`|`'YYYY'`|\n\n\n\n\n### `<quarter-picker>` Props\n\n|Attribute|Description|Type|Default|version|\n|---|---|---|:---:|:---|\n|model-value **(v-model)**|Value|`Date \\| string \\| number`|`-`||\n|default-value|Default value|`Date \\| string \\| number`|`-`||\n|format|Display the format of the date, refer to [String Parsing Format](#String Parsing Format)|`string`|`'YYYY-[Q]Q'`||\n|value-format|The format of the value, valid for `value` `defaultValue` `pickerValue` `defaultPickerValue` and the return value in the event, supports setting as timestamp, Date and string (refer to [String parsing format](#string-parsing-format) ).|`string`|`'YYYY-MM'`|2.16.0|\n\n\n\n\n### `<week-picker>` Props\n\n|Attribute|Description|Type|Default|version|\n|---|---|---|:---:|:---|\n|model-value **(v-model)**|Value|`Date \\| string \\| number`|`-`||\n|default-value|Default value|`Date \\| string \\| number`|`-`||\n|format|Display the format of the date, refer to [String Parsing Format](#String Parsing Format)|`string`|`'gggg-wo'`||\n|value-format|The format of the value, valid for `value` `defaultValue` `pickerValue` `defaultPickerValue` and the return value in the event, supports setting as timestamp, Date and string (refer to [String parsing format](#string-parsing-format) ).|`string`|`'YYYY-MM-DD'`|2.16.0|\n|day-start-of-week|The first day of the week starts on the day of the week, 0-Sunday, 1-Monday, and so on.|`0 \\| 1 \\| 2 \\| 3 \\| 4 \\| 5 \\| 6`|`0`|2-6 from 2.21.0|\n\n\n\n\n### `<range-picker>` Props\n\n|Attribute|Description|Type|Default|version|\n|---|---|---|:---:|:---|\n|mode|Type of range selector|`'date' \\| 'year' \\| 'quarter' \\| 'month' \\| 'week'`|`'date'`||\n|model-value **(v-model)**|Value|`(Date \\| string \\| number)[]`|`-`||\n|default-value|Default value|`(Date \\| string \\| number)[]`|`-`||\n|picker-value|The date displayed in the default panel|`(Date \\| string \\| number)[]`|`-`||\n|default-picker-value|Date displayed on the panel|`(Date \\| string \\| number)[]`|`-`||\n|disabled|Whether to disable|`boolean \\| boolean[]`|`false`||\n|day-start-of-week|The first day of the week starts on the day of the week, 0-Sunday, 1-Monday, and so on.|`0 \\| 1 \\| 2 \\| 3 \\| 4 \\| 5 \\| 6`|`0`|2-6 from 2.21.0|\n|format|Display the format of the date, refer to [String Parsing Format](#string-parsing-format)|`string`|`-`||\n|value-format|The format of the value, valid for `value` `defaultValue` `pickerValue` `defaultPickerValue` and the return value in the event, supports setting as timestamp, Date and string (refer to [String parsing format](#string-parsing-format) ). If not specified, it will be formatted as a string, in the same format as `format`.|`'timestamp' \\| 'Date' \\| string`|`-`|2.16.0|\n|show-time|Whether to increase time selection|`boolean`|`false`||\n|time-picker-props|Time display parameters, refer to [TimePickerProps](/vue/component/time-picker)|`Partial<TimePickerProps>`|`-`||\n|placeholder|Prompt copy|`string[]`|`-`||\n|disabled-date|Non-selectable date|`(current: Date, type: 'start' \\| 'end') => boolean`|`-`||\n|disabled-time|Unselectable time|`(current: Date, type: 'start' \\| 'end') => DisabledTimeProps`|`-`||\n|separator|The segmentation symbol in the input box of the range selector|`string`|`-`||\n|exchange-time|Whether the time will be exchanged, by default time will affect and participate in the ordering of start and end values, if you want to fix the time order, you can turn it off.|`boolean`|`true`|2.25.0|\n|disabled-input|Whether input is disabled with the keyboard.|`boolean`|`false`|2.43.0|\n|abbreviation|Whether to enable abbreviation|`boolean`|`true`||\n### `<range-picker>` Events\n\n|Event Name|Description|Parameters|\n|---|---|---|\n|change|The component value changes|value: `(Date \\| string \\| number \\| undefined)[] \\| undefined`<br>date: `(Date \\| undefined)[] \\| undefined`<br>dateString: `(string \\| undefined)[] \\| undefined`|\n|select|The selected date has changed but the component value has not changed|value: `(Date \\| string \\| number \\| undefined)[]`<br>date: `(Date \\| undefined)[]`<br>dateString: `(string \\| undefined)[]`|\n|popup-visible-change|Open or close the pop-up box|visible: `boolean`|\n|ok|Click the confirm button|value: `Date \\| string \\| number[]`<br>date: `Date[]`<br>dateString: `string[]`|\n|clear|Click the clear button|-|\n|select-shortcut|Click on the shortcut option|shortcut: `ShortcutType`|\n|picker-value-change|Panel date change|value: `Date \\| string \\| number[]`<br>date: `Date[]`<br>dateString: `string[]`|\n\n\n\n\n### ShortcutType\n\n|Name|Description|Type|Default|\n|---|---|---|:---:|\n|label|the content of shortcut|`string \\| number \\| (() => VNode)`|`-`|\n|value|the value of shortcut|`(Date \\| string \\| number)    \\| (Date \\| string \\| number)[]    \\| (() => (Date \\| string \\| number) \\| (Date \\| string \\| number)[])`|`-`|\n|format|the format use to parse value, refer to [String Parsing Format](#string-parsing-format)|`string`|`-`|\n\n\n\n### String parsing format\n\nFormat|Output|Description\n---|---|---:\n`YY`|21|Two-digit year\n`YYYY`|2021|Four-digit year\n`M`|1-12|Month, starting from 1\n`MM`|01-12|Month, two digits\n`MMM`|Jan-Dec|Abbreviated month name\n`MMMM`|January-December|Full month name\n`D`|1-31|Day of the month\n`DD`|01-31|Day of the month, two digits\n`d`|0-6|Day of the week, Sunday is 0\n`dd`|Su-Sa|The shortest name of the day of the week\n`ddd`|Sun-Sat|Abbreviated name of the day of the week\n`dddd`|Sunday-Saturday|The name of the day of the week\n`H`|0-23|Hour\n`HH`|00-23|Hour, two digits\n`h`|1-12|Hour, 12-hour clock\n`hh`|01-12|Hour, 12-hour clock, two digits\n`m`|0-59|Minute\n`mm`|00-59|Minute, two digits\n`s`|0-59|Second\n`ss`|00-59|Second, two digits\n`S`|0-9|Hundreds of milliseconds, one digits\n`SS`|00-99|Tens of milliseconds, two digits\n`SSS`|000-999|Millisecond, three digits\n`Z`|-5:00|UTC offset\n`ZZ`|-0500|UTC offset, add 0 in front of the number\n`A`|AM PM|-\n`a`|am pm|-\n`Do`|1st... 3st|Day of month with serial number\n`X`|1410715640.579|Unix timestamp\n`x`|1410715640579|Unix millisecond timestamp\n\n\n## FAQ\n\n### About the `locale` field\nThe `locale` field can be configured using the language pack provided by the component library.\n"
  },
  {
    "path": "packages/web-vue/components/date-picker/README.zh-CN.md",
    "content": "```yaml\nmeta:\n  type: 组件\n  category: 数据输入\ntitle: 日期选择器 DatePicker\ndescription: 选择日期。支持年、月、周、日类型，支持范围选择等。\n```\n\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/month.md\n\n@import ./__demo__/year.md\n\n@import ./__demo__/quarter.md\n\n@import ./__demo__/week.md\n\n@import ./__demo__/showtime.md\n\n@import ./__demo__/range.md\n\n@import ./__demo__/default-value.md\n\n@import ./__demo__/disabled-date.md\n\n@import ./__demo__/shortcuts.md\n\n@import ./__demo__/shortcuts-position.md\n\n@import ./__demo__/disabled-date-advance.md\n\n@import ./__demo__/size.md\n\n@import ./__demo__/extra.md\n\n@import ./__demo__/disabled.md\n\n@import ./__demo__/date-render.md\n\n@import ./__demo__/control.md\n\n@import ./__demo__/trigger-element.md\n\n@import ./__demo__/panel-only.md\n\n## API\n\n\n### `Common` Props\n\n|参数名|描述|类型|默认值|版本|\n|---|---|---|:---:|:---|\n|locale|国际化配置，用于覆盖locale中的 `datePicker` 字段|`Record<string, any>`|`-`||\n|hide-trigger|没有触发元素，只显示选择面板|`boolean`|`false`||\n|allow-clear|是否允许清除|`boolean`|`true`||\n|readonly|是否为只读|`boolean`|`false`||\n|error|是否为错误状态|`boolean`|`false`||\n|size|日期选择器的尺寸|`'mini' \\| 'small' \\| 'medium' \\| 'large'`|`'medium'`||\n|shortcuts|预设时间范围快捷选择|`ShortcutType[]`|`[]`||\n|shortcuts-position|预设范围在面板上的位置，默认放在下方，侧边一般用于大量预设时间的场景|`'left' \\| 'bottom' \\| 'right'`|`'bottom'`||\n|position|弹出的框的位置|`'top' \\| 'tl' \\| 'tr' \\| 'bottom' \\| 'bl' \\| 'br'`|`'bl'`||\n|popup-visible|控制弹出框的打开或者关闭状态|`boolean`|`-`||\n|default-popup-visible|默认弹出框是打开或者关闭|`boolean`|`false`||\n|trigger-props|可以传入 `Trigger` 组件的参数|`TriggerProps`|`-`||\n|unmount-on-close|是否在隐藏的时候销毁DOM结构|`boolean`|`false`||\n|placeholder|提示文案|`string`|`-`||\n|disabled|是否禁用|`boolean`|`false`||\n|disabled-date|不可选取的日期|`(current?: Date) => boolean`|`-`||\n|disabled-time|不可选取的时间|`(current: Date) => DisabledTimeProps`|`-`||\n|picker-value **(v-model)**|面板显示的日期|`Date \\| string \\| number`|`-`||\n|default-picker-value|面板默认显示的日期|`Date \\| string \\| number`|`-`||\n|popup-container|弹出框的挂载容器|`string \\| HTMLElement`|`-`||\n|value-format|值的格式，对 `value` `defaultValue` `pickerValue` `defaultPickerValue` 以及事件中的返回值生效，支持设置为时间戳，Date 和字符串（参考[字符串解析格式](#字符串解析格式)）。如果没有指定，将格式化为字符串，格式同 `format`。|`'timestamp' \\| 'Date' \\| string`|`-`|2.16.0|\n|preview-shortcut|是否要预览快捷选择的结果|`boolean`|`true`|2.28.0|\n|show-confirm-btn|是否显示确认按钮，`showTime = true` 的时候始终显示。|`boolean`|`false`|2.29.0|\n|disabled-input|是否禁止键盘输入日期|`boolean`|`false`|2.43.0|\n|abbreviation|是否启用缩写|`boolean`|`true`|2.45.0|\n### `Common` Events\n\n|事件名|描述|参数|\n|---|---|---|\n|change|组件值发生改变|value: `Date \\| string \\| number \\| undefined`<br>date: `Date \\| undefined`<br>dateString: `string \\| undefined`|\n|select|选中日期发生改变但组件值未改变|value: `Date \\| string \\| number`<br>date: `Date`<br>dateString: `string`|\n|popup-visible-change|打开或关闭弹出框|visible: `boolean`|\n|ok|点击确认按钮|value: `Date \\| string \\| number`<br>date: `Date`<br>dateString: `string`|\n|clear|点击清除按钮|-|\n|select-shortcut|点击快捷选项|shortcut: `ShortcutType`|\n|picker-value-change|面板日期改变|value: `Date \\| string \\| number`<br>date: `Date`<br>dateString: `string`|\n### `Common` Slots\n\n|插槽名|描述|参数|版本|\n|---|:---:|---|:---|\n|prefix|输入框前缀|-|2.41.0|\n|suffix-icon|输入框后缀图标|-||\n|icon-next-double|双箭头往后翻页图标|-||\n|icon-prev-double|双箭头往前翻页图标|-||\n|icon-next|单箭头往后翻页图标|-||\n|icon-prev|单箭头往前翻页图标|-||\n|cell|自定义日期单元格的内容|date: `Date`||\n|extra|额外的页脚|-||\n\n\n\n\n### `<date-picker>` Props\n\n|参数名|描述|类型|默认值|版本|\n|---|---|---|:---:|:---|\n|model-value **(v-model)**|绑定值|`Date \\| string \\| number`|`-`||\n|default-value|默认值|`Date \\| string \\| number`|`-`||\n|format|展示日期的格式，参考[字符串解析格式](#字符串解析格式)|`string \\| ((current: Date) => string)`|`-`||\n|day-start-of-week|每周的第一天开始于周几，0 - 周日，1 - 周一，以此类推。|`0 \\| 1 \\| 2 \\| 3 \\| 4 \\| 5 \\| 6`|`0`|2-6 from 2.21.0|\n|show-time|是否增加时间选择|`boolean`|`false`||\n|time-picker-props|时间显示的参数，参考 [TimePickerProps](/vue/component/time-picker)|`Partial<TimePickerProps>`|`-`||\n|disabled|是否禁用|`boolean`|`false`||\n|disabled-date|不可选取的日期|`(current?: Date) => boolean`|`-`||\n|disabled-time|不可选取的时间|`(current: Date) => DisabledTimeProps`|`-`||\n|show-now-btn|是否显示 `showTime` 时，选择当前时间的按钮|`boolean`|`true`||\n\n\n\n\n### `<month-picker>` Props\n\n|参数名|描述|类型|默认值|\n|---|---|---|:---:|\n|model-value **(v-model)**|绑定值|`Date \\| string \\| number`|`-`|\n|default-value|默认值|`Date \\| string \\| number`|`-`|\n|format|展示日期的格式，参考[字符串解析格式](#字符串解析格式)|`string`|`'YYYY-MM'`|\n\n\n\n\n### `<year-picker>` Props\n\n|参数名|描述|类型|默认值|\n|---|---|---|:---:|\n|model-value **(v-model)**|绑定值|`Date \\| string \\| number`|`-`|\n|default-value|默认值|`Date \\| string \\| number`|`-`|\n|format|展示日期的格式，参考[字符串解析格式](#字符串解析格式)|`string`|`'YYYY'`|\n\n\n\n\n### `<quarter-picker>` Props\n\n|参数名|描述|类型|默认值|版本|\n|---|---|---|:---:|:---|\n|model-value **(v-model)**|绑定值|`Date \\| string \\| number`|`-`||\n|default-value|默认值|`Date \\| string \\| number`|`-`||\n|format|展示日期的格式，参考[字符串解析格式](#字符串解析格式)|`string`|`'YYYY-[Q]Q'`||\n|value-format|值的格式，对 `value` `defaultValue` `pickerValue` `defaultPickerValue` 以及事件中的返回值生效，支持设置为时间戳，Date 和字符串（参考[字符串解析格式](#字符串解析格式)）。|`string`|`'YYYY-MM'`|2.16.0|\n\n\n\n\n### `<week-picker>` Props\n\n|参数名|描述|类型|默认值|版本|\n|---|---|---|:---:|:---|\n|model-value **(v-model)**|绑定值|`Date \\| string \\| number`|`-`||\n|default-value|默认值|`Date \\| string \\| number`|`-`||\n|format|展示日期的格式，参考[字符串解析格式](#字符串解析格式)|`string`|`'gggg-wo'`||\n|value-format|值的格式，对 `value` `defaultValue` `pickerValue` `defaultPickerValue` 以及事件中的返回值生效，支持设置为时间戳，Date 和字符串（参考[字符串解析格式](#字符串解析格式)）。|`string`|`'YYYY-MM-DD'`|2.16.0|\n|day-start-of-week|每周的第一天开始于周几，0 - 周日，1 - 周一，以此类推。|`0 \\| 1 \\| 2 \\| 3 \\| 4 \\| 5 \\| 6`|`0`|2-6 from 2.21.0|\n\n\n\n\n### `<range-picker>` Props\n\n|参数名|描述|类型|默认值|版本|\n|---|---|---|:---:|:---|\n|mode|范围选择器的类型|`'date' \\| 'year' \\| 'quarter' \\| 'month' \\| 'week'`|`'date'`||\n|model-value **(v-model)**|绑定值|`(Date \\| string \\| number)[]`|`-`||\n|default-value|默认值|`(Date \\| string \\| number)[]`|`-`||\n|picker-value|默认面板显示的日期|`(Date \\| string \\| number)[]`|`-`||\n|default-picker-value|面板显示的日期|`(Date \\| string \\| number)[]`|`-`||\n|disabled|是否禁用|`boolean \\| boolean[]`|`false`||\n|day-start-of-week|每周的第一天开始于周几，0 - 周日，1 - 周一，以此类推。|`0 \\| 1 \\| 2 \\| 3 \\| 4 \\| 5 \\| 6`|`0`|2-6 from 2.21.0|\n|format|展示日期的格式，参考[字符串解析格式](#字符串解析格式)|`string`|`-`||\n|value-format|值的格式，对 `value` `defaultValue` `pickerValue` `defaultPickerValue` 以及事件中的返回值生效，支持设置为时间戳，Date 和字符串（参考[字符串解析格式](#字符串解析格式)）。如果没有指定，将格式化为字符串，格式同 `format`。|`'timestamp' \\| 'Date' \\| string`|`-`|2.16.0|\n|show-time|是否增加时间选择|`boolean`|`false`||\n|time-picker-props|时间显示的参数，参考 [TimePickerProps](/vue/component/time-picker)|`Partial<TimePickerProps>`|`-`||\n|placeholder|提示文案|`string[]`|`-`||\n|disabled-date|不可选的日期|`(current: Date, type: 'start' \\| 'end') => boolean`|`-`||\n|disabled-time|不可选取的时间|`(current: Date, type: 'start' \\| 'end') => DisabledTimeProps`|`-`||\n|separator|范围选择器输入框内的分割符号|`string`|`-`||\n|exchange-time|时间是否会交换，默认情况下时间会影响和参与开始和结束值的排序，如果要固定时间顺序，可将其关闭。|`boolean`|`true`|2.25.0|\n|disabled-input|是否禁止键盘输入日期|`boolean`|`false`|2.43.0|\n|abbreviation|是否启用缩写|`boolean`|`true`||\n### `<range-picker>` Events\n\n|事件名|描述|参数|\n|---|---|---|\n|change|组件值发生改变|value: `(Date \\| string \\| number \\| undefined)[] \\| undefined`<br>date: `(Date \\| undefined)[] \\| undefined`<br>dateString: `(string \\| undefined)[] \\| undefined`|\n|select|选中日期发生改变但组件值未改变|value: `(Date \\| string \\| number \\| undefined)[]`<br>date: `(Date \\| undefined)[]`<br>dateString: `(string \\| undefined)[]`|\n|popup-visible-change|打开或关闭弹出框|visible: `boolean`|\n|ok|点击确认按钮|value: `Date \\| string \\| number[]`<br>date: `Date[]`<br>dateString: `string[]`|\n|clear|点击清除按钮|-|\n|select-shortcut|点击快捷选项|shortcut: `ShortcutType`|\n|picker-value-change|面板日期改变|value: `Date \\| string \\| number[]`<br>date: `Date[]`<br>dateString: `string[]`|\n\n\n\n\n### ShortcutType\n\n|参数名|描述|类型|默认值|\n|---|---|---|:---:|\n|label|选项的内容|`string \\| number \\| (() => VNode)`|`-`|\n|value|选项值|`(Date \\| string \\| number)    \\| (Date \\| string \\| number)[]    \\| (() => (Date \\| string \\| number) \\| (Date \\| string \\| number)[])`|`-`|\n|format|解析值所使用的格式，参考[字符串解析格式](#字符串解析格式)|`string`|`-`|\n\n\n\n### 字符串解析格式\n\n格式|输出|描述\n---|---|---:\n`YY`|21|两位数的年份\n`YYYY`|2021|四位数年份\n`M`|1-12|月份，从 1 开始\n`MM`|01-12|月份，两位数\n`MMM`|Jan-Dec|缩写的月份名称\n`MMMM`|January-December|完整的月份名称\n`D`|1-31|月份里的一天\n`DD`|01-31|月份里的一天，两位数\n`d`|0-6|一周中的一天，星期天是 0\n`dd`|Su-Sa|最简写的一周中一天的名称\n`ddd`|Sun-Sat|简写的一周中一天的名称\n`dddd`|Sunday-Saturday|一周中一天的名称\n`H`|0-23|小时\n`HH`|00-23|小时，两位数\n`h`|1-12|小时, 12 小时制\n`hh`|01-12|小时, 12 小时制, 两位数\n`m`|0-59|分钟\n`mm`|00-59|分钟，两位数\n`s`|0-59|秒\n`ss`|00-59|秒，两位数\n`S`|0-9|数百毫秒，一位数\n`SS`|00-99|几十毫秒，两位数\n`SSS`|000-999|毫秒，三位数字\n`Z`|-5:00|UTC 的偏移量\n`ZZ`|-0500|UTC 的偏移量，数字前面加上 0\n`A`|AM PM|-\n`a`|am pm|-\n`Do`|1st... 3st|带序号的月份中的某天\n`X`|1410715640.579|Unix 时间戳\n`x`|1410715640579|Unix 毫秒时间戳\n\n## FAQ\n\n### 关于 `locale` 字段\n可以使用组件库提供的语言包配置 `locale` 字段。\n\n"
  },
  {
    "path": "packages/web-vue/components/date-picker/TEMPLATE.md",
    "content": "## zh-CN\n```yaml\nmeta:\n  type: 组件\n  category: 数据输入\ntitle: 日期选择器 DatePicker\ndescription: 选择日期。支持年、月、周、日类型，支持范围选择等。\n```\n---\n## en-US\n```yaml\nmeta:\n  type: Component\n  category: Data Entry\ntitle: DatePicker\ndescription: Choose a date. Support year, month, week, day type, support range selection, etc.\n```\n---\n\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/month.md\n\n@import ./__demo__/year.md\n\n@import ./__demo__/quarter.md\n\n@import ./__demo__/week.md\n\n@import ./__demo__/showtime.md\n\n@import ./__demo__/range.md\n\n@import ./__demo__/default-value.md\n\n@import ./__demo__/disabled-date.md\n\n@import ./__demo__/shortcuts.md\n\n@import ./__demo__/shortcuts-position.md\n\n@import ./__demo__/disabled-date-advance.md\n\n@import ./__demo__/size.md\n\n@import ./__demo__/extra.md\n\n@import ./__demo__/disabled.md\n\n@import ./__demo__/date-render.md\n\n@import ./__demo__/control.md\n\n@import ./__demo__/trigger-element.md\n\n@import ./__demo__/panel-only.md\n\n## API\n\n%%API(picker.vue)%%\n\n%%API(pickers/date-picker.tsx)%%\n\n%%API(pickers/month-picker.tsx)%%\n\n%%API(pickers/year-picker.tsx)%%\n\n%%API(pickers/quarter-picker.tsx)%%\n\n%%API(pickers/week-picker.tsx)%%\n\n%%API(range-picker.vue)%%\n\n%%INTERFACE(./interface.ts)%%\n\n## zh-CN\n### 字符串解析格式\n\n格式|输出|描述\n---|---|---:\n`YY`|21|两位数的年份\n`YYYY`|2021|四位数年份\n`M`|1-12|月份，从 1 开始\n`MM`|01-12|月份，两位数\n`MMM`|Jan-Dec|缩写的月份名称\n`MMMM`|January-December|完整的月份名称\n`D`|1-31|月份里的一天\n`DD`|01-31|月份里的一天，两位数\n`d`|0-6|一周中的一天，星期天是 0\n`dd`|Su-Sa|最简写的一周中一天的名称\n`ddd`|Sun-Sat|简写的一周中一天的名称\n`dddd`|Sunday-Saturday|一周中一天的名称\n`H`|0-23|小时\n`HH`|00-23|小时，两位数\n`h`|1-12|小时, 12 小时制\n`hh`|01-12|小时, 12 小时制, 两位数\n`m`|0-59|分钟\n`mm`|00-59|分钟，两位数\n`s`|0-59|秒\n`ss`|00-59|秒，两位数\n`S`|0-9|数百毫秒，一位数\n`SS`|00-99|几十毫秒，两位数\n`SSS`|000-999|毫秒，三位数字\n`Z`|-5:00|UTC 的偏移量\n`ZZ`|-0500|UTC 的偏移量，数字前面加上 0\n`A`|AM PM|-\n`a`|am pm|-\n`Do`|1st... 3st|带序号的月份中的某天\n`X`|1410715640.579|Unix 时间戳\n`x`|1410715640579|Unix 毫秒时间戳\n---\n## en-US\n### String parsing format\n\nFormat|Output|Description\n---|---|---:\n`YY`|21|Two-digit year\n`YYYY`|2021|Four-digit year\n`M`|1-12|Month, starting from 1\n`MM`|01-12|Month, two digits\n`MMM`|Jan-Dec|Abbreviated month name\n`MMMM`|January-December|Full month name\n`D`|1-31|Day of the month\n`DD`|01-31|Day of the month, two digits\n`d`|0-6|Day of the week, Sunday is 0\n`dd`|Su-Sa|The shortest name of the day of the week\n`ddd`|Sun-Sat|Abbreviated name of the day of the week\n`dddd`|Sunday-Saturday|The name of the day of the week\n`H`|0-23|Hour\n`HH`|00-23|Hour, two digits\n`h`|1-12|Hour, 12-hour clock\n`hh`|01-12|Hour, 12-hour clock, two digits\n`m`|0-59|Minute\n`mm`|00-59|Minute, two digits\n`s`|0-59|Second\n`ss`|00-59|Second, two digits\n`S`|0-9|Hundreds of milliseconds, one digits\n`SS`|00-99|Tens of milliseconds, two digits\n`SSS`|000-999|Millisecond, three digits\n`Z`|-5:00|UTC offset\n`ZZ`|-0500|UTC offset, add 0 in front of the number\n`A`|AM PM|-\n`a`|am pm|-\n`Do`|1st... 3st|Day of month with serial number\n`X`|1410715640.579|Unix timestamp\n`x`|1410715640579|Unix millisecond timestamp\n---\n\n## zh-CN\n## FAQ\n\n### 关于 `locale` 字段\n可以使用组件库提供的语言包配置 `locale` 字段。\n\n---\n\n## en-US\n## FAQ\n\n### About the `locale` field\nThe `locale` field can be configured using the language pack provided by the component library.\n\n---\n"
  },
  {
    "path": "packages/web-vue/components/date-picker/__demo__/basic.md",
    "content": "```yaml\ntitle:\n  zh-CN: 基本用法\n  en-US: Basic\n```\n\n## zh-CN\n\n日期输入器的基础使用。\n\n---\n\n## en-US\n\nThe basic usage of DatePicker.\n\n---\n\n```vue\n<template>\n  <a-date-picker style=\"width: 200px;\" />\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/date-picker/__demo__/control.md",
    "content": "```yaml\ntitle:\n  zh-CN: 双向绑定\n  en-US: Two-way binding\n```\n\n## zh-CN\n\n通过 `v-model` 实现值的双向绑定\n\n---\n\n## en-US\n\nSupport two-way binding through `v-model`\n\n---\n\n```vue\n<template>\n  <a-space>\n    <a-date-picker v-model=\"value\" style=\"width: 200px;\" />\n    <a-range-picker v-model=\"rangeValue\" style=\"width: 300px;\" />\n  </a-space>\n</template>\n<script>\nexport default {\n  data() {\n    return {\n      value: Date.now(),\n      rangeValue: [Date.now(), Date.now()],\n    }\n  }\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/date-picker/__demo__/date-render.md",
    "content": "```yaml\ntitle:\n  zh-CN: 定制日期单元格\n  en-US: Customize cell\n```\n\n## zh-CN\n\n利用具名插槽  `cell` 可以定制日期单元格。\n\n---\n\n## en-US\n\nUse the named slot `cell` to customize the date cell.\n\n---\n\n```vue\n<template>\n  <a-date-picker>\n    <template #cell=\"{ date }\">\n      <div class=\"arco-picker-date\">\n        <div class=\"arco-picker-date-value\" :style=\"getCellStyle(date)\">\n          {{ date.getDate() }}\n        </div>\n      </div>\n    </template>\n  </a-date-picker>\n</template>\n<script>\nexport default {\n  setup() {\n    const highlightDates = [6, 14, 22];\n    const highlightStyle = {\n      border: '1px solid rgb(var(--arcoblue-6))',\n    };\n    return {\n      getCellStyle(date) {\n        return highlightDates.includes(date.getDate()) ? highlightStyle : {}\n      }\n    }\n  }\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/date-picker/__demo__/default-value.md",
    "content": "```yaml\ntitle:\n  zh-CN: 默认值\n  en-US: defaultValue\n```\n\n## zh-CN\n\n日期输入器有默认值的情况。\n\n---\n\n## en-US\n\nDatePicker has a default value.\n\n---\n\n```vue\n<template>\n  <a-date-picker\n    defaultValue=\"2019-06-03\"\n    @select=\"onSelect\"\n    @change=\"onChange\"\n    :style=\"style\"\n  />\n  <a-date-picker\n    defaultValue=\"2019-06-03\"\n    :format=\"(value) => `custom format: ${dayjs(value).format('YYYY-MM-DD')}`\"\n    @select=\"onSelect\"\n    @change=\"onChange\"\n    :style=\"{ ...style, width: '240px' }\"\n  />\n  <a-date-picker\n    showTime\n    defaultValue=\"2019-06-03 08:00:00\"\n    @select=\"onSelect\"\n    @change=\"onChange\"\n    :style=\"style\"\n  />\n  <a-year-picker\n    defaultValue=\"2019\"\n    @select=\"onSelect\"\n    @change=\"onChange\"\n    :style=\"style\"\n  />\n  <a-month-picker\n    defaultValue=\"2019-06\"\n    @select=\"onSelect\"\n    @change=\"onChange\"\n    :style=\"style\"\n  />\n  <a-week-picker\n    :defaultValue=\"dayjs('2019-08-02')\"\n    @select=\"onSelect\"\n    @change=\"onChange\"\n    :style=\"style\"\n  />\n  <a-range-picker\n    showTime\n    :defaultValue=\"['2019-08-08 00:00:00', '2019-08-18 00:00:00']\"\n    @select=\"onSelect\"\n    @change=\"onChange\"\n    :style=\"{ ...style, width: '360px' }\"\n  />\n  <a-range-picker\n    mode=\"month\"\n    :defaultValue=\"['2019-08', '2020-06']\"\n    @select=\"onSelect\"\n    @change=\"onChange\"\n    style=\"width: 300px; marginBottom: 24px;\"\n  />\n</template>\n<script>\nimport dayjs from 'dayjs';\n\nexport default {\n  setup() {\n    return {\n      dayjs,\n      onSelect(dateString, date) {\n        console.log('onSelect', dateString, date);\n      },\n      onChange(dateString, date) {\n        console.log('onChange: ', dateString, date);\n      },\n      style: { width: '200px', marginBottom: '24px', marginRight: '24px' }\n    }\n  }\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/date-picker/__demo__/disabled-date-advance.md",
    "content": "```yaml\ntitle:\n  zh-CN: 动态控制选取范围\n  en-US: Dynamic control range\n```\n\n## zh-CN\n\n根据选择的值来控制选取的范围，使用 `onSelect` 配合 `disabledDate` 来实现。\n\n---\n\n## en-US\n\nAccording to the selected value to control the selected range, use `onSelect` and `disabledDate`.\n\n---\n\n```vue\n<template>\n  <a-range-picker\n      style=\"width: 300px;\"\n      @select=\"onSelect\"\n      @popupVisibleChange=\"onPopupVisibleChange\"\n      :disabledDate=\"disabledDate\"\n    />\n</template>\n<script>\nexport default {\n  data() {\n    return {\n      dates: [],\n    }\n  },\n  methods: {\n    onSelect(valueString, value) {\n      this.dates = value;\n    },\n    onPopupVisibleChange(visible) {\n      if (!visible) {\n        this.dates = []\n      }\n    },\n    disabledDate(current) {\n      const dates = this.dates;\n      if (dates && dates.length) {\n        const tooLate = dates[0] && Math.abs((new Date(current) - dates[0]) / (24 * 60 * 60 * 1000)) > 7;\n        const tooEarly = dates[1] && Math.abs((new Date(current) - dates[1]) / (24 * 60 * 60 * 1000)) > 7;\n        return tooEarly || tooLate;\n      }\n      return false;\n    }\n  }\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/date-picker/__demo__/disabled-date.md",
    "content": "```yaml\ntitle:\n  zh-CN: 不可选取的时间\n  en-US: disabled date\n```\n\n## zh-CN\n\n使用 `disabledDate` 可以禁用某些日期。使用 `disabledTime` 可以禁用时间，需要配合 `showTime` 使用。\n\n---\n\n## en-US\n\nUse `disabledDate` to disable specified dates. And use `disabledTime` to disable time, which needs to be used with `showTime`.\n\n---\n\n```vue\n<template>\n  <div>\n    <a-date-picker\n      style=\"width: 200px; margin-right: 24px; margin-bottom: 24px;\"\n      :disabledDate=\"(current) => dayjs(current).isBefore(dayjs())\"\n    />\n    <a-range-picker\n      style=\"width: 360px; margin-right: 24px; margin-bottom: 24px;\"\n      :disabledDate=\"(current) => dayjs(current).isBefore(dayjs())\"\n    />\n    <a-date-picker\n      style=\"width: 200px; margin-right: 24px; margin-bottom: 24px;\"\n      show-time\n      :disabledDate=\"(current) => dayjs(current).isBefore(dayjs())\"\n      :disabledTime=\"getDisabledTime\"\n    />\n    <a-range-picker\n      style=\"width: 360px; margin-bottom: 24px;\"\n      show-time\n      :timePickerProps=\"{hideDisabledOptions: true}\"\n      :disabledDate=\"(current) => dayjs(current).isBefore(dayjs())\"\n      :disabledTime=\"getDisabledRangeTime\"\n    />\n  </div>\n</template>\n<script>\nimport dayjs from 'dayjs';\n\nfunction range(start, end) {\n  const result = [];\n  for (let i = start; i < end; i++) {\n    result.push(i);\n  }\n  return result;\n}\n\nfunction getDisabledTime(date) {\n  return {\n    disabledHours: () => range(6, 24),\n    disabledMinutes: () => range(30, 60),\n    disabledSeconds: () => range(30, 60),\n  };\n}\n\nfunction getDisabledRangeTime(date, type) {\n  return {\n    disabledHours: () => type === 'start' ? range(0, 6): range(6, 24),\n    disabledMinutes: () => type === 'end' ? range(0, 30) : [31, 60],\n    disabledSeconds: () => range(30, 60),\n  };\n}\n\nexport default {\n  setup() {\n    return {\n      dayjs,\n      getDisabledTime,\n      getDisabledRangeTime,\n    }\n  }\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/date-picker/__demo__/disabled.md",
    "content": "```yaml\ntitle:\n  zh-CN: 禁用\n  en-US: Disabled\n```\n\n## zh-CN\n\n禁用状态。\n\n---\n\n## en-US\n\nDisabled.\n\n---\n\n```vue\n<template>\n  <a-date-picker\n    defaultValue=\"2020-08-08\"\n    disabled\n    style=\"width: 200px; margin-bottom: 20px;\"\n  />\n  <br />\n  <a-range-picker\n    :defaultValue=\"['2020-08-08', '2020-08-18']\"\n    disabled\n    style=\"width: 300px; margin-bottom: 20px;\"\n  />\n  <br />\n  <a-range-picker\n    :defaultValue=\"['2020-08-08']\"\n    :disabled=\"[true, false]\"\n    :disabledDate=\"(current) => dayjs(current).isBefore(dayjs('2020-08-08'))\"\n    style=\"width: 300px; margin-bottom: 20px;\"\n  />\n  <br />\n  <a-range-picker\n    showTime\n    :defaultValue=\"['2020-08-08 02:02:02']\"\n    :disabled=\"[true, false]\"\n    style=\"width: 380px;\"\n  />\n</template>\n<script>\nimport dayjs from 'dayjs';\nexport default {\n  setup() {\n    return {\n      dayjs\n    };\n  }\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/date-picker/__demo__/extra.md",
    "content": "```yaml\ntitle:\n  zh-CN: 额外的页脚\n  en-US: Extra footer\n```\n\n## zh-CN\n\n在浮层中加入额外的页脚，以满足某些定制信息的需求。\n\n---\n\n## en-US\n\nAdd an extra footer to meet the needs of some customized information.\n\n---\n\n```vue\n<template>\n  <a-date-picker style=\"width: 200px; margin-bottom: 20px\">\n    <template #extra>Extra footer</template>\n  </a-date-picker>\n  <br />\n  <a-range-picker showTime style=\"width: 360px;\">\n    <template #extra>Extra footer</template>\n  </a-range-picker>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/date-picker/__demo__/month.md",
    "content": "```yaml\ntitle:\n  zh-CN: 月份选择器\n  en-US: MonthPicker\n```\n\n## zh-CN\n\n月份输入器的基础使用。\n\n---\n\n## en-US\n\nThe basic usage of MonthPicker.\n\n---\n\n```vue\n<template>\n  <a-month-picker style=\"width: 200px;\" />\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/date-picker/__demo__/panel-only.md",
    "content": "```yaml\ntitle:\n  zh-CN: 只使用面板\n  en-US: Panel Only\n```\n\n## zh-CN\n\n只用选择面板，不显示输入框。\n\n---\n\n## en-US\n\nOnly use panel, hide input selection.\n\n---\n\n```vue\n<template>\n  <div>\n    <a-date-picker\n      default-value=\"2019-06-03\"\n      v-model:pickerValue=\"pickerValue\"\n      hide-trigger\n      style=\"width: 268px;\"\n    />\n    <a-range-picker\n      :default-value=\"['2019-08-01', '2020-06-01']\"\n      v-model:pickerValue=\"rangePickerValue\"\n      hide-trigger\n      style=\"width: 560px; margin-top: 20px;\"\n    />\n  </div>\n</template>\n<script>\nexport default {\n  data() {\n    return {\n      pickerValue: null,\n      rangePickerValue: null,\n    };\n  }\n};\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/date-picker/__demo__/prefix.md",
    "content": "```yaml\ntitle:\n  zh-CN: 前缀\n  en-US: Prefix\n```\n\n## zh-CN\n\n通过 `prefix` 插槽可以设置输入框前缀\n\n---\n\n## en-US\n\nThe prefix of the input box can be set through the `prefix` slot\n\n---\n\n```vue\n<template>\n  <div>\n    <div>\n      <a-date-picker style=\"width: 300px;\">\n        <template #prefix>\n          <IconInfoCircle />\n        </template>\n      </a-date-picker>\n    </div>\n    <a-range-picker\n      showTime\n      :defaultValue=\"['2019-08-08 00:00:00', '2019-08-18 00:00:00']\"\n      @select=\"onSelect\"\n      @change=\"onChange\"\n      :style=\"{ width: '400px', marginTop: '20px' }\"\n    >\n      <template #prefix>\n        <IconInfoCircle />\n      </template>\n    </a-range-picker>\n  </div>\n</template>\n\n<script>\nimport { IconInfoCircle } from '@arco-design/web-vue/es/icon';\n\nexport default {\n  components: { IconInfoCircle },\n};\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/date-picker/__demo__/quarter.md",
    "content": "```yaml\ntitle:\n  zh-CN: 季度选择器\n  en-US: QuarterPicker\n```\n\n## zh-CN\n\n季度选择器的使用。\n\n---\n\n## en-US\n\nThe basic usage of QuarterPicker.\n\n---\n\n```vue\n<template>\n  <a-quarter-picker style=\"width: 200px;\" />\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/date-picker/__demo__/range.md",
    "content": "```yaml\ntitle:\n  zh-CN: 范围选择器\n  en-US: RangePicker\n```\n\n## zh-CN\n\n范围输入器的基础使用。\n\n---\n\n## en-US\n\nThe basic usage of RangePicker.\n\n---\n\n```vue\n<template>\n  <a-range-picker\n    @change=\"onChange\"\n    @select=\"onSelect\"\n    style=\"width: 254px; marginBottom: 20px;\"\n  />\n  <br />\n  <a-range-picker\n    mode=\"week\"\n    @change=\"onChange\"\n    @select=\"onSelect\"\n    style=\"width: 254px; marginBottom: 20px;\"\n  />\n  <br />\n  <a-range-picker\n    mode=\"month\"\n    @change=\"onChange\"\n    @select=\"onSelect\"\n    style=\"width: 254px; marginBottom: 20px;\"\n  />\n  <br />\n  <a-range-picker\n    mode=\"year\"\n    @change=\"onChange\"\n    @select=\"onSelect\"\n    style=\"width: 254px; marginBottom: 20px;\"\n  />\n  <br />\n  <a-range-picker\n    mode=\"quarter\"\n    @change=\"onChange\"\n    @select=\"onSelect\"\n    style=\"width: 254px; marginBottom: 20px;\"\n  />\n  <br />\n  <a-range-picker\n    showTime\n    :time-picker-props=\"{\n    defaultValue:['00:00:00','00:00:00']\n    }\"\n    @change=\"onChange\"\n    @select=\"onSelect\"\n    style=\" width: 380px; \"\n  />\n</template>\n<script>\nexport default {\n  setup() {\n    return {\n      onSelect(dateString, date) {\n        console.log('onSelect', dateString, date);\n      },\n      onChange(dateString, date) {\n        console.log('onChange: ', dateString, date);\n      },\n    };\n  },\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/date-picker/__demo__/shortcuts-position.md",
    "content": "```yaml\ntitle:\n  zh-CN: 定制预设范围位置\n  en-US: Custom shortcuts position\n```\n\n## zh-CN\n\n使用 `shortcutsPosition` 可以将预设时间快捷选择放到左边、右边或者底部。\n\n---\n\n## en-US\n\nUse `shortcutsPosition` to place the shortcuts to the left, right or bottom.\n\n---\n\n```vue\n<template>\n  <a-date-picker\n    style=\"width: 254px; margin-bottom: 20px; margin-right: 24px;\"\n    shortcuts-position=\"left\"\n    :shortcuts=\"shortcuts\"\n  />\n  <a-range-picker\n    style=\"width: 300px; margin-bottom: 20px;\"\n    shortcuts-position=\"left\"\n    :shortcuts=\"rangeShortcuts\"\n  />\n  <br />\n  <a-date-picker\n    style=\"width: 254px; margin-right: 24px;\"\n    shortcuts-position=\"right\"\n    :shortcuts=\"shortcuts\"\n  />\n  <a-range-picker\n    style=\"width: 300px;\"\n    shortcuts-position=\"right\"\n    :shortcuts=\"rangeShortcuts\"\n  />\n</template>\n<script>\nimport dayjs from 'dayjs';\nexport default {\n  setup() {\n    return {\n      dayjs,\n      shortcuts: [\n        {\n          label: 'yesterday',\n          value: () => dayjs().subtract(1, 'day')\n        },\n        {\n          label: 'today',\n          value: () => dayjs(),\n        },\n        {\n          label: 'a week later',\n          value: () => dayjs().add(1, 'week'),\n        },\n        {\n          label: 'a month later',\n          value: () => dayjs().add(1, 'month'),\n        },\n        {\n          label: '2 months later',\n          value: () => dayjs().add(2, 'month'),\n        }\n      ],\n      rangeShortcuts: [\n        {\n          label: 'next 2 days',\n          value: () => [dayjs(), dayjs().add(2, 'day')],\n        },\n        {\n          label: 'next 7 days',\n          value: () => [dayjs(), dayjs().add(1, 'week')],\n        },\n        {\n          label: 'next 30 days',\n          value: () => [dayjs(), dayjs().add(1, 'month')],\n        },\n        {\n          label: 'next 6 months',\n          value: () => [dayjs(), dayjs().add(6, 'month')],\n        },\n        {\n          label: 'next 12 months',\n          value: () => [dayjs(), dayjs().add(1, 'year')],\n        },\n        {\n          label: 'next 10 years',\n          value: () => [dayjs(), dayjs().add(10, 'year')],\n        }\n      ]\n    }\n  }\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/date-picker/__demo__/shortcuts.md",
    "content": "```yaml\ntitle:\n  zh-CN: 预设时间快捷选择\n  en-US: Shortcuts\n```\n\n## zh-CN\n\n使用 `shortcuts` 可以预设时间快捷选择。\n\n---\n\n## en-US\n\nUse `shortcuts` to preset time for quick selection.\n\n---\n\n```vue\n<template>\n  <a-date-picker\n    style=\"width: 300px; margin-bottom: 24px; margin-right: 24px;\"\n    :shortcuts=\"[\n      {\n        label: '2 hours later',\n        value: () => dayjs().add(2, 'hour')\n      },\n      {\n        label: 'a week later',\n        value: () => dayjs().add(1, 'week'),\n      },\n      {\n        label: 'a month later',\n        value: () => dayjs().add(1, 'month'),\n      },\n    ]\"\n    show-time\n  />\n  <a-month-picker\n    style=\"width: 300px; margin-bottom: 24px; margin-right: 24px;\"\n    :shortcuts=\"[\n      {\n        label: 'last month',\n        value: () => dayjs().subtract(1, 'month'),\n      },\n      {\n        label: 'six months later',\n        value: () => dayjs().add(6, 'month'),\n      },\n      {\n        label: 'two years later',\n        value: () => dayjs().add(2, 'year'),\n      },\n    ]\"\n  />\n  <a-range-picker\n    style=\"width: 400px; margin-bottom: 24px; margin-right: 24px;\"\n    :shortcuts=\"[\n      {\n        label: 'next 7 days',\n        value: () => [dayjs(), dayjs().add(1, 'week')],\n      },\n      {\n        label: 'next 30 days',\n        value: () => [dayjs(), dayjs().add(1, 'month')],\n      },\n      {\n        label: 'next 365 days',\n        value: () => [dayjs(), dayjs().add(1, 'year')],\n      },\n    ]\"\n  />\n  <a-range-picker\n    mode=\"month\"\n    style=\"width: 300px; margin-bottom: 24px;\"\n    :shortcuts=\"[\n      {\n        label: 'next 6 months',\n        value: () => [dayjs(), dayjs().add(6, 'month')],\n      },\n      {\n        label: 'next 12 months',\n        value: () => [dayjs(), dayjs().add(1, 'year')],\n      },\n      {\n        label: 'next 10 years',\n        value: () => [dayjs(), dayjs().add(10, 'year')],\n      },\n    ]\"\n  />\n</template>\n<script>\nimport dayjs from 'dayjs';\nexport default {\n  setup() {\n    return {\n      dayjs\n    }\n  }\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/date-picker/__demo__/showtime.md",
    "content": "```yaml\ntitle:\n  zh-CN: 带时间的日期选择\n  en-US: DatePicker showTime\n```\n\n## zh-CN\n\n使用 `showTime` 可以使用带时间的日期选择。\n\n---\n\n## en-US\n\nUse `showTime` to select a date with time.\n\n---\n\n```vue\n<template>\n  <a-date-picker\n    style=\"width: 220px; margin: 0 24px 24px 0;\"\n    show-time\n    :time-picker-props=\"{ defaultValue: '09:09:06' }\"\n    format=\"YYYY-MM-DD HH:mm:ss\"\n    @change=\"onChange\"\n    @select=\"onSelect\"\n    @ok=\"onOk\"\n  />\n  <a-date-picker\n    style=\"width: 220px; margin: 0 24px 24px 0;\"\n    show-time\n    format=\"YYYY-MM-DD hh:mm\"\n    @change=\"onChange\"\n    @select=\"onSelect\"\n    @ok=\"onOk\"\n  />\n  <a-range-picker\n    style=\"width: 360px; margin: 0 24px 24px 0;\"\n    show-time\n    :time-picker-props=\"{ defaultValue: ['00:00:00', '09:09:06'] }\"\n    format=\"YYYY-MM-DD HH:mm\"\n    @change=\"onChange\"\n    @select=\"onSelect\"\n    @ok=\"onOk\"\n  />\n</template>\n<script>\nexport default {\n  setup() {\n    function onSelect(dateString, date) {\n      console.log('onSelect', dateString, date);\n    }\n\n    function onChange(dateString, date) {\n      console.log('onChange: ', dateString, date);\n    }\n\n    function onOk(dateString, date) {\n      console.log('onOk: ', dateString, date);\n    }\n    return {\n      onSelect,\n      onChange,\n      onOk,\n    };\n  }\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/date-picker/__demo__/size.md",
    "content": "```yaml\ntitle:\n  zh-CN: 尺寸\n  en-US: Size\n```\n\n## zh-CN\n\n设置 `size` 可以使用四种尺寸（`mini` `small` `medium` `large`）的输入框。高度分别对应 24px、28px、32px、36px。\n\n---\n\n## en-US\n\nSetting `size` can use four sizes (`mini` `small` `medium` `large`). The height corresponds to 24px, 28px, 32px, 36px.\n\n---\n\n```vue\n<template>\n  <div style=\"margin-bottom: 20px;\">\n    <a-radio-group v-model=\"size\" type='button'>\n      <a-radio value=\"mini\">mini</a-radio>\n      <a-radio value=\"small\">small</a-radio>\n      <a-radio value=\"medium\">medium</a-radio>\n      <a-radio value=\"large\">large</a-radio>\n    </a-radio-group>\n  </div>\n  <a-date-picker\n    :size=\"size\"\n    style=\"width: 254px;\"\n  />\n</template>\n<script>\nexport default {\n  data() {\n    return {\n      size: 'small'\n    }\n  }\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/date-picker/__demo__/trigger-element.md",
    "content": "```yaml\ntitle:\n  zh-CN: 自定义触发元素\n  en-US: Customize trigger element\n```\n\n## zh-CN\n\n自定义触发元素。\n\n---\n\n## en-US\n\nCustomize trigger element.\n\n---\n\n```vue\n<template>\n  <a-space>\n    <a-date-picker\n      style=\"width: 268px;\"\n      v-model=\"value\"\n    >\n      <a-button>{{ value || '请选择日期' }}</a-button>\n    </a-date-picker>\n    <a-range-picker\n      style=\"width: 268px;\"\n      v-model=\"rangeValue\"\n    >\n      <a-button>{{ rangeValue && rangeValue.join(' - ') || '请选择日期范围' }}</a-button>\n    </a-range-picker>\n  </a-space>\n</template>\n<script>\nimport { ref } from 'vue';\nexport default {\n  setup() {\n    const value = ref();\n    const rangeValue = ref();\n    return {\n      value,\n      rangeValue,\n    }\n  }\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/date-picker/__demo__/week.md",
    "content": "```yaml\ntitle:\n  zh-CN: 周选择器\n  en-US: WeekPicker\n```\n\n## zh-CN\n\n周选择器提供了一种选择星期的简单方法。也可以指定一周的起始日。\n\n---\n\n## en-US\n\nWeekPicker provides a simple way to select weeks. It also allows you to specify the starting day of the week.\n\n---\n\n```vue\n<template>\n  <a-week-picker style=\"width: 200px; margin: 0 24px 24px 0;\" />\n  <a-week-picker\n    style=\"width: 200px; margin: 0 24px 24px 0;\"\n    day-start-of-week=\"1\"\n  />\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/date-picker/__demo__/year.md",
    "content": "```yaml\ntitle:\n  zh-CN: 年份选择器\n  en-US: YearPicker\n```\n\n## zh-CN\n\n年份输入器的基础使用。\n\n---\n\n## en-US\n\nThe basic usage of the YearPicker.\n\n---\n\n```vue\n<template>\n  <a-year-picker style=\"width: 200px;\" />\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/date-picker/__test__/__snapshots__/demo.test.ts.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`<date-picker> demo: render [basic] correctly 1`] = `\n\"<div class=\\\\\"arco-picker arco-picker-size-medium\\\\\" style=\\\\\"width: 200px;\\\\\" visible=\\\\\"false\\\\\">\n  <!--v-if-->\n  <div class=\\\\\"arco-picker-input\\\\\"><input placeholder=\\\\\"请选择日期\\\\\" class=\\\\\"arco-picker-start-time\\\\\"></div>\n  <div class=\\\\\"arco-picker-suffix\\\\\">\n    <!--v-if--><span class=\\\\\"arco-picker-suffix-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-calendar\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M7 22h34M14 5v8m20-8v8M8 41h32a1 1 0 0 0 1-1V10a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v30a1 1 0 0 0 1 1Z\\\\\"></path></svg></span>\n    <!--v-if-->\n  </div>\n</div>\"\n`;\n\nexports[`<date-picker> demo: render [control] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 8px; row-gap: 8px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-picker arco-picker-size-medium\\\\\" style=\\\\\"width: 200px;\\\\\" visible=\\\\\"false\\\\\">\n      <!--v-if-->\n      <div class=\\\\\"arco-picker-input\\\\\"><input placeholder=\\\\\"请选择日期\\\\\" class=\\\\\"arco-picker-start-time\\\\\" value=\\\\\"2025-12-22\\\\\"></div>\n      <div class=\\\\\"arco-picker-suffix\\\\\"><span class=\\\\\"arco-icon-hover arco-picker-icon-hover arco-picker-clear-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-close\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M9.857 9.858 24 24m0 0 14.142 14.142M24 24 38.142 9.858M24 24 9.857 38.142\\\\\"></path></svg></span><span class=\\\\\"arco-picker-suffix-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-calendar\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M7 22h34M14 5v8m20-8v8M8 41h32a1 1 0 0 0 1-1V10a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v30a1 1 0 0 0 1 1Z\\\\\"></path></svg></span>\n        <!--v-if-->\n      </div>\n    </div>\n    <!---->\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-picker arco-picker-range arco-picker-size-medium\\\\\" style=\\\\\"width: 300px;\\\\\" visible=\\\\\"false\\\\\">\n      <!--v-if-->\n      <div class=\\\\\"arco-picker-input arco-picker-input-active\\\\\"><input placeholder=\\\\\"开始日期\\\\\" value=\\\\\"2025-12-22\\\\\"></div><span class=\\\\\"arco-picker-separator\\\\\">-</span>\n      <div class=\\\\\"arco-picker-input\\\\\"><input placeholder=\\\\\"结束日期\\\\\" value=\\\\\"2025-12-22\\\\\"></div>\n      <div class=\\\\\"arco-picker-suffix\\\\\"><span class=\\\\\"arco-icon-hover arco-picker-icon-hover arco-picker-clear-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-close\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M9.857 9.858 24 24m0 0 14.142 14.142M24 24 38.142 9.858M24 24 9.857 38.142\\\\\"></path></svg></span><span class=\\\\\"arco-picker-suffix-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-calendar\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M7 22h34M14 5v8m20-8v8M8 41h32a1 1 0 0 0 1-1V10a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v30a1 1 0 0 0 1 1Z\\\\\"></path></svg></span>\n        <!--v-if-->\n      </div>\n    </div>\n    <!---->\n  </div>\n</div>\"\n`;\n\nexports[`<date-picker> demo: render [date-render] correctly 1`] = `\n\"<div class=\\\\\"arco-picker arco-picker-size-medium\\\\\" visible=\\\\\"false\\\\\">\n  <!--v-if-->\n  <div class=\\\\\"arco-picker-input\\\\\"><input placeholder=\\\\\"请选择日期\\\\\" class=\\\\\"arco-picker-start-time\\\\\"></div>\n  <div class=\\\\\"arco-picker-suffix\\\\\">\n    <!--v-if--><span class=\\\\\"arco-picker-suffix-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-calendar\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M7 22h34M14 5v8m20-8v8M8 41h32a1 1 0 0 0 1-1V10a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v30a1 1 0 0 0 1 1Z\\\\\"></path></svg></span>\n    <!--v-if-->\n  </div>\n</div>\"\n`;\n\nexports[`<date-picker> demo: render [default-value] correctly 1`] = `\n\"<div class=\\\\\"arco-picker arco-picker-size-medium\\\\\" style=\\\\\"width: 200px; margin-bottom: 24px; margin-right: 24px;\\\\\" visible=\\\\\"false\\\\\">\n  <!--v-if-->\n  <div class=\\\\\"arco-picker-input\\\\\"><input placeholder=\\\\\"请选择日期\\\\\" class=\\\\\"arco-picker-start-time\\\\\" value=\\\\\"2019-06-03\\\\\"></div>\n  <div class=\\\\\"arco-picker-suffix\\\\\"><span class=\\\\\"arco-icon-hover arco-picker-icon-hover arco-picker-clear-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-close\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M9.857 9.858 24 24m0 0 14.142 14.142M24 24 38.142 9.858M24 24 9.857 38.142\\\\\"></path></svg></span><span class=\\\\\"arco-picker-suffix-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-calendar\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M7 22h34M14 5v8m20-8v8M8 41h32a1 1 0 0 0 1-1V10a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v30a1 1 0 0 0 1 1Z\\\\\"></path></svg></span>\n    <!--v-if-->\n  </div>\n</div>\n<div class=\\\\\"arco-picker arco-picker-size-medium\\\\\" style=\\\\\"width: 240px; margin-bottom: 24px; margin-right: 24px;\\\\\" visible=\\\\\"false\\\\\">\n  <!--v-if-->\n  <div class=\\\\\"arco-picker-input\\\\\"><input placeholder=\\\\\"请选择日期\\\\\" class=\\\\\"arco-picker-start-time\\\\\" readonly=\\\\\"\\\\\" value=\\\\\"custom format: 2019-06-03\\\\\"></div>\n  <div class=\\\\\"arco-picker-suffix\\\\\"><span class=\\\\\"arco-icon-hover arco-picker-icon-hover arco-picker-clear-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-close\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M9.857 9.858 24 24m0 0 14.142 14.142M24 24 38.142 9.858M24 24 9.857 38.142\\\\\"></path></svg></span><span class=\\\\\"arco-picker-suffix-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-calendar\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M7 22h34M14 5v8m20-8v8M8 41h32a1 1 0 0 0 1-1V10a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v30a1 1 0 0 0 1 1Z\\\\\"></path></svg></span>\n    <!--v-if-->\n  </div>\n</div>\n<div class=\\\\\"arco-picker arco-picker-size-medium\\\\\" style=\\\\\"width: 200px; margin-bottom: 24px; margin-right: 24px;\\\\\" visible=\\\\\"false\\\\\">\n  <!--v-if-->\n  <div class=\\\\\"arco-picker-input\\\\\"><input placeholder=\\\\\"请选择日期\\\\\" class=\\\\\"arco-picker-start-time\\\\\" value=\\\\\"2019-06-03 08:00:00\\\\\"></div>\n  <div class=\\\\\"arco-picker-suffix\\\\\"><span class=\\\\\"arco-icon-hover arco-picker-icon-hover arco-picker-clear-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-close\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M9.857 9.858 24 24m0 0 14.142 14.142M24 24 38.142 9.858M24 24 9.857 38.142\\\\\"></path></svg></span><span class=\\\\\"arco-picker-suffix-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-calendar\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M7 22h34M14 5v8m20-8v8M8 41h32a1 1 0 0 0 1-1V10a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v30a1 1 0 0 0 1 1Z\\\\\"></path></svg></span>\n    <!--v-if-->\n  </div>\n</div>\n<div class=\\\\\"arco-picker arco-picker-size-medium\\\\\" style=\\\\\"width: 200px; margin-bottom: 24px; margin-right: 24px;\\\\\" visible=\\\\\"false\\\\\">\n  <!--v-if-->\n  <div class=\\\\\"arco-picker-input\\\\\"><input placeholder=\\\\\"请选择年份\\\\\" class=\\\\\"arco-picker-start-time\\\\\" value=\\\\\"2019\\\\\"></div>\n  <div class=\\\\\"arco-picker-suffix\\\\\"><span class=\\\\\"arco-icon-hover arco-picker-icon-hover arco-picker-clear-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-close\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M9.857 9.858 24 24m0 0 14.142 14.142M24 24 38.142 9.858M24 24 9.857 38.142\\\\\"></path></svg></span><span class=\\\\\"arco-picker-suffix-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-calendar\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M7 22h34M14 5v8m20-8v8M8 41h32a1 1 0 0 0 1-1V10a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v30a1 1 0 0 0 1 1Z\\\\\"></path></svg></span>\n    <!--v-if-->\n  </div>\n</div>\n<div class=\\\\\"arco-picker arco-picker-size-medium\\\\\" style=\\\\\"width: 200px; margin-bottom: 24px; margin-right: 24px;\\\\\" visible=\\\\\"false\\\\\">\n  <!--v-if-->\n  <div class=\\\\\"arco-picker-input\\\\\"><input placeholder=\\\\\"请选择月份\\\\\" class=\\\\\"arco-picker-start-time\\\\\" value=\\\\\"2019-06\\\\\"></div>\n  <div class=\\\\\"arco-picker-suffix\\\\\"><span class=\\\\\"arco-icon-hover arco-picker-icon-hover arco-picker-clear-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-close\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M9.857 9.858 24 24m0 0 14.142 14.142M24 24 38.142 9.858M24 24 9.857 38.142\\\\\"></path></svg></span><span class=\\\\\"arco-picker-suffix-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-calendar\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M7 22h34M14 5v8m20-8v8M8 41h32a1 1 0 0 0 1-1V10a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v30a1 1 0 0 0 1 1Z\\\\\"></path></svg></span>\n    <!--v-if-->\n  </div>\n</div>\n<div class=\\\\\"arco-picker arco-picker-size-medium\\\\\" style=\\\\\"width: 200px; margin-bottom: 24px; margin-right: 24px;\\\\\" visible=\\\\\"false\\\\\">\n  <!--v-if-->\n  <div class=\\\\\"arco-picker-input\\\\\"><input placeholder=\\\\\"请选择周\\\\\" class=\\\\\"arco-picker-start-time\\\\\" value=\\\\\"2019-31周\\\\\"></div>\n  <div class=\\\\\"arco-picker-suffix\\\\\"><span class=\\\\\"arco-icon-hover arco-picker-icon-hover arco-picker-clear-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-close\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M9.857 9.858 24 24m0 0 14.142 14.142M24 24 38.142 9.858M24 24 9.857 38.142\\\\\"></path></svg></span><span class=\\\\\"arco-picker-suffix-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-calendar\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M7 22h34M14 5v8m20-8v8M8 41h32a1 1 0 0 0 1-1V10a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v30a1 1 0 0 0 1 1Z\\\\\"></path></svg></span>\n    <!--v-if-->\n  </div>\n</div>\n<div class=\\\\\"arco-picker arco-picker-range arco-picker-size-medium\\\\\" style=\\\\\"width: 360px; margin-bottom: 24px; margin-right: 24px;\\\\\" visible=\\\\\"false\\\\\">\n  <!--v-if-->\n  <div class=\\\\\"arco-picker-input arco-picker-input-active\\\\\"><input placeholder=\\\\\"开始日期\\\\\" value=\\\\\"2019-08-08 00:00:00\\\\\"></div><span class=\\\\\"arco-picker-separator\\\\\">-</span>\n  <div class=\\\\\"arco-picker-input\\\\\"><input placeholder=\\\\\"结束日期\\\\\" value=\\\\\"2019-08-18 00:00:00\\\\\"></div>\n  <div class=\\\\\"arco-picker-suffix\\\\\"><span class=\\\\\"arco-icon-hover arco-picker-icon-hover arco-picker-clear-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-close\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M9.857 9.858 24 24m0 0 14.142 14.142M24 24 38.142 9.858M24 24 9.857 38.142\\\\\"></path></svg></span><span class=\\\\\"arco-picker-suffix-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-calendar\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M7 22h34M14 5v8m20-8v8M8 41h32a1 1 0 0 0 1-1V10a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v30a1 1 0 0 0 1 1Z\\\\\"></path></svg></span>\n    <!--v-if-->\n  </div>\n</div>\n<div class=\\\\\"arco-picker arco-picker-range arco-picker-size-medium\\\\\" style=\\\\\"width: 300px; margin-bottom: 24px;\\\\\" visible=\\\\\"false\\\\\">\n  <!--v-if-->\n  <div class=\\\\\"arco-picker-input arco-picker-input-active\\\\\"><input placeholder=\\\\\"开始月份\\\\\" value=\\\\\"2019-08\\\\\"></div><span class=\\\\\"arco-picker-separator\\\\\">-</span>\n  <div class=\\\\\"arco-picker-input\\\\\"><input placeholder=\\\\\"结束月份\\\\\" value=\\\\\"2020-06\\\\\"></div>\n  <div class=\\\\\"arco-picker-suffix\\\\\"><span class=\\\\\"arco-icon-hover arco-picker-icon-hover arco-picker-clear-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-close\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M9.857 9.858 24 24m0 0 14.142 14.142M24 24 38.142 9.858M24 24 9.857 38.142\\\\\"></path></svg></span><span class=\\\\\"arco-picker-suffix-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-calendar\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M7 22h34M14 5v8m20-8v8M8 41h32a1 1 0 0 0 1-1V10a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v30a1 1 0 0 0 1 1Z\\\\\"></path></svg></span>\n    <!--v-if-->\n  </div>\n</div>\"\n`;\n\nexports[`<date-picker> demo: render [disabled] correctly 1`] = `\n\"<div class=\\\\\"arco-picker arco-picker-size-medium arco-picker-disabled\\\\\" style=\\\\\"width: 200px; margin-bottom: 20px;\\\\\" visible=\\\\\"false\\\\\">\n  <!--v-if-->\n  <div class=\\\\\"arco-picker-input\\\\\"><input disabled=\\\\\"\\\\\" placeholder=\\\\\"请选择日期\\\\\" class=\\\\\"arco-picker-start-time\\\\\" value=\\\\\"2020-08-08\\\\\"></div>\n  <div class=\\\\\"arco-picker-suffix\\\\\">\n    <!--v-if--><span class=\\\\\"arco-picker-suffix-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-calendar\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M7 22h34M14 5v8m20-8v8M8 41h32a1 1 0 0 0 1-1V10a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v30a1 1 0 0 0 1 1Z\\\\\"></path></svg></span>\n    <!--v-if-->\n  </div>\n</div>\n<br>\n<div class=\\\\\"arco-picker arco-picker-range arco-picker-size-medium arco-picker-disabled\\\\\" style=\\\\\"width: 300px; margin-bottom: 20px;\\\\\" visible=\\\\\"false\\\\\">\n  <!--v-if-->\n  <div class=\\\\\"arco-picker-input\\\\\"><input disabled=\\\\\"\\\\\" placeholder=\\\\\"开始日期\\\\\" value=\\\\\"2020-08-08\\\\\"></div><span class=\\\\\"arco-picker-separator\\\\\">-</span>\n  <div class=\\\\\"arco-picker-input arco-picker-input-active\\\\\"><input disabled=\\\\\"\\\\\" placeholder=\\\\\"结束日期\\\\\" value=\\\\\"2020-08-18\\\\\"></div>\n  <div class=\\\\\"arco-picker-suffix\\\\\"><span class=\\\\\"arco-icon-hover arco-picker-icon-hover arco-picker-clear-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-close\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M9.857 9.858 24 24m0 0 14.142 14.142M24 24 38.142 9.858M24 24 9.857 38.142\\\\\"></path></svg></span><span class=\\\\\"arco-picker-suffix-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-calendar\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M7 22h34M14 5v8m20-8v8M8 41h32a1 1 0 0 0 1-1V10a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v30a1 1 0 0 0 1 1Z\\\\\"></path></svg></span>\n    <!--v-if-->\n  </div>\n</div>\n<br>\n<div class=\\\\\"arco-picker arco-picker-range arco-picker-size-medium\\\\\" style=\\\\\"width: 300px; margin-bottom: 20px;\\\\\" visible=\\\\\"false\\\\\">\n  <!--v-if-->\n  <div class=\\\\\"arco-picker-input\\\\\"><input disabled=\\\\\"\\\\\" placeholder=\\\\\"开始日期\\\\\" value=\\\\\"2020-08-08\\\\\"></div><span class=\\\\\"arco-picker-separator\\\\\">-</span>\n  <div class=\\\\\"arco-picker-input arco-picker-input-active\\\\\"><input placeholder=\\\\\"结束日期\\\\\"></div>\n  <div class=\\\\\"arco-picker-suffix\\\\\">\n    <!--v-if--><span class=\\\\\"arco-picker-suffix-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-calendar\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M7 22h34M14 5v8m20-8v8M8 41h32a1 1 0 0 0 1-1V10a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v30a1 1 0 0 0 1 1Z\\\\\"></path></svg></span>\n    <!--v-if-->\n  </div>\n</div>\n<br>\n<div class=\\\\\"arco-picker arco-picker-range arco-picker-size-medium\\\\\" style=\\\\\"width: 380px;\\\\\" visible=\\\\\"false\\\\\">\n  <!--v-if-->\n  <div class=\\\\\"arco-picker-input\\\\\"><input disabled=\\\\\"\\\\\" placeholder=\\\\\"开始日期\\\\\" value=\\\\\"2020-08-08 02:02:02\\\\\"></div><span class=\\\\\"arco-picker-separator\\\\\">-</span>\n  <div class=\\\\\"arco-picker-input arco-picker-input-active\\\\\"><input placeholder=\\\\\"结束日期\\\\\"></div>\n  <div class=\\\\\"arco-picker-suffix\\\\\">\n    <!--v-if--><span class=\\\\\"arco-picker-suffix-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-calendar\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M7 22h34M14 5v8m20-8v8M8 41h32a1 1 0 0 0 1-1V10a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v30a1 1 0 0 0 1 1Z\\\\\"></path></svg></span>\n    <!--v-if-->\n  </div>\n</div>\"\n`;\n\nexports[`<date-picker> demo: render [disabled-date] correctly 1`] = `\n\"<div>\n  <div class=\\\\\"arco-picker arco-picker-size-medium\\\\\" style=\\\\\"width: 200px; margin-right: 24px; margin-bottom: 24px;\\\\\" visible=\\\\\"false\\\\\">\n    <!--v-if-->\n    <div class=\\\\\"arco-picker-input\\\\\"><input placeholder=\\\\\"请选择日期\\\\\" class=\\\\\"arco-picker-start-time\\\\\"></div>\n    <div class=\\\\\"arco-picker-suffix\\\\\">\n      <!--v-if--><span class=\\\\\"arco-picker-suffix-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-calendar\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M7 22h34M14 5v8m20-8v8M8 41h32a1 1 0 0 0 1-1V10a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v30a1 1 0 0 0 1 1Z\\\\\"></path></svg></span>\n      <!--v-if-->\n    </div>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-picker arco-picker-range arco-picker-size-medium\\\\\" style=\\\\\"width: 360px; margin-right: 24px; margin-bottom: 24px;\\\\\" visible=\\\\\"false\\\\\">\n    <!--v-if-->\n    <div class=\\\\\"arco-picker-input arco-picker-input-active\\\\\"><input placeholder=\\\\\"开始日期\\\\\"></div><span class=\\\\\"arco-picker-separator\\\\\">-</span>\n    <div class=\\\\\"arco-picker-input\\\\\"><input placeholder=\\\\\"结束日期\\\\\"></div>\n    <div class=\\\\\"arco-picker-suffix\\\\\">\n      <!--v-if--><span class=\\\\\"arco-picker-suffix-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-calendar\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M7 22h34M14 5v8m20-8v8M8 41h32a1 1 0 0 0 1-1V10a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v30a1 1 0 0 0 1 1Z\\\\\"></path></svg></span>\n      <!--v-if-->\n    </div>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-picker arco-picker-size-medium\\\\\" style=\\\\\"width: 200px; margin-right: 24px; margin-bottom: 24px;\\\\\" visible=\\\\\"false\\\\\">\n    <!--v-if-->\n    <div class=\\\\\"arco-picker-input\\\\\"><input placeholder=\\\\\"请选择日期\\\\\" class=\\\\\"arco-picker-start-time\\\\\"></div>\n    <div class=\\\\\"arco-picker-suffix\\\\\">\n      <!--v-if--><span class=\\\\\"arco-picker-suffix-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-calendar\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M7 22h34M14 5v8m20-8v8M8 41h32a1 1 0 0 0 1-1V10a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v30a1 1 0 0 0 1 1Z\\\\\"></path></svg></span>\n      <!--v-if-->\n    </div>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-picker arco-picker-range arco-picker-size-medium\\\\\" style=\\\\\"width: 360px; margin-bottom: 24px;\\\\\" visible=\\\\\"false\\\\\">\n    <!--v-if-->\n    <div class=\\\\\"arco-picker-input arco-picker-input-active\\\\\"><input placeholder=\\\\\"开始日期\\\\\"></div><span class=\\\\\"arco-picker-separator\\\\\">-</span>\n    <div class=\\\\\"arco-picker-input\\\\\"><input placeholder=\\\\\"结束日期\\\\\"></div>\n    <div class=\\\\\"arco-picker-suffix\\\\\">\n      <!--v-if--><span class=\\\\\"arco-picker-suffix-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-calendar\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M7 22h34M14 5v8m20-8v8M8 41h32a1 1 0 0 0 1-1V10a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v30a1 1 0 0 0 1 1Z\\\\\"></path></svg></span>\n      <!--v-if-->\n    </div>\n  </div>\n  <!---->\n</div>\"\n`;\n\nexports[`<date-picker> demo: render [disabled-date-advance] correctly 1`] = `\n\"<div class=\\\\\"arco-picker arco-picker-range arco-picker-size-medium\\\\\" style=\\\\\"width: 300px;\\\\\" visible=\\\\\"false\\\\\">\n  <!--v-if-->\n  <div class=\\\\\"arco-picker-input arco-picker-input-active\\\\\"><input placeholder=\\\\\"开始日期\\\\\"></div><span class=\\\\\"arco-picker-separator\\\\\">-</span>\n  <div class=\\\\\"arco-picker-input\\\\\"><input placeholder=\\\\\"结束日期\\\\\"></div>\n  <div class=\\\\\"arco-picker-suffix\\\\\">\n    <!--v-if--><span class=\\\\\"arco-picker-suffix-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-calendar\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M7 22h34M14 5v8m20-8v8M8 41h32a1 1 0 0 0 1-1V10a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v30a1 1 0 0 0 1 1Z\\\\\"></path></svg></span>\n    <!--v-if-->\n  </div>\n</div>\"\n`;\n\nexports[`<date-picker> demo: render [extra] correctly 1`] = `\n\"<div class=\\\\\"arco-picker arco-picker-size-medium\\\\\" style=\\\\\"width: 200px; margin-bottom: 20px;\\\\\" visible=\\\\\"false\\\\\">\n  <!--v-if-->\n  <div class=\\\\\"arco-picker-input\\\\\"><input placeholder=\\\\\"请选择日期\\\\\" class=\\\\\"arco-picker-start-time\\\\\"></div>\n  <div class=\\\\\"arco-picker-suffix\\\\\">\n    <!--v-if--><span class=\\\\\"arco-picker-suffix-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-calendar\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M7 22h34M14 5v8m20-8v8M8 41h32a1 1 0 0 0 1-1V10a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v30a1 1 0 0 0 1 1Z\\\\\"></path></svg></span>\n    <!--v-if-->\n  </div>\n</div>\n<br>\n<div class=\\\\\"arco-picker arco-picker-range arco-picker-size-medium\\\\\" style=\\\\\"width: 360px;\\\\\" visible=\\\\\"false\\\\\">\n  <!--v-if-->\n  <div class=\\\\\"arco-picker-input arco-picker-input-active\\\\\"><input placeholder=\\\\\"开始日期\\\\\"></div><span class=\\\\\"arco-picker-separator\\\\\">-</span>\n  <div class=\\\\\"arco-picker-input\\\\\"><input placeholder=\\\\\"结束日期\\\\\"></div>\n  <div class=\\\\\"arco-picker-suffix\\\\\">\n    <!--v-if--><span class=\\\\\"arco-picker-suffix-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-calendar\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M7 22h34M14 5v8m20-8v8M8 41h32a1 1 0 0 0 1-1V10a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v30a1 1 0 0 0 1 1Z\\\\\"></path></svg></span>\n    <!--v-if-->\n  </div>\n</div>\"\n`;\n\nexports[`<date-picker> demo: render [month] correctly 1`] = `\n\"<div class=\\\\\"arco-picker arco-picker-size-medium\\\\\" style=\\\\\"width: 200px;\\\\\" visible=\\\\\"false\\\\\">\n  <!--v-if-->\n  <div class=\\\\\"arco-picker-input\\\\\"><input placeholder=\\\\\"请选择月份\\\\\" class=\\\\\"arco-picker-start-time\\\\\"></div>\n  <div class=\\\\\"arco-picker-suffix\\\\\">\n    <!--v-if--><span class=\\\\\"arco-picker-suffix-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-calendar\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M7 22h34M14 5v8m20-8v8M8 41h32a1 1 0 0 0 1-1V10a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v30a1 1 0 0 0 1 1Z\\\\\"></path></svg></span>\n    <!--v-if-->\n  </div>\n</div>\"\n`;\n\nexports[`<date-picker> demo: render [panel-only] correctly 1`] = `\n\"<div>\n  <div class=\\\\\"arco-picker-container arco-picker-container-panel-only\\\\\" style=\\\\\"width: 268px;\\\\\" visible=\\\\\"false\\\\\">\n    <!--v-if-->\n    <div class=\\\\\"arco-picker-panel-wrapper\\\\\">\n      <div class=\\\\\"arco-panel-date\\\\\">\n        <div class=\\\\\"arco-panel-date-inner\\\\\">\n          <div class=\\\\\"arco-picker-header\\\\\">\n            <div class=\\\\\"arco-picker-header-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-double-left\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n                <path d=\\\\\"M36.857 9.9 22.715 24.042l14.142 14.142M25.544 9.9 11.402 24.042l14.142 14.142\\\\\"></path>\n              </svg></div>\n            <div class=\\\\\"arco-picker-header-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-left\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n                <path d=\\\\\"M32 8.4 16.444 23.956 32 39.513\\\\\"></path>\n              </svg></div>\n            <div class=\\\\\"arco-picker-header-title\\\\\"><span class=\\\\\"arco-picker-header-label\\\\\">2019</span><span>-</span><span class=\\\\\"arco-picker-header-label\\\\\">06</span></div>\n            <div class=\\\\\"arco-picker-header-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-right\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n                <path d=\\\\\"m16 39.513 15.556-15.557L16 8.4\\\\\"></path>\n              </svg></div>\n            <div class=\\\\\"arco-picker-header-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-double-right\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n                <path d=\\\\\"m11.143 38.1 14.142-14.142L11.143 9.816M22.456 38.1l14.142-14.142L22.456 9.816\\\\\"></path>\n              </svg></div>\n          </div>\n          <div class=\\\\\"arco-picker-week-list\\\\\">\n            <div class=\\\\\"arco-picker-week-list-item\\\\\">日</div>\n            <div class=\\\\\"arco-picker-week-list-item\\\\\">一</div>\n            <div class=\\\\\"arco-picker-week-list-item\\\\\">二</div>\n            <div class=\\\\\"arco-picker-week-list-item\\\\\">三</div>\n            <div class=\\\\\"arco-picker-week-list-item\\\\\">四</div>\n            <div class=\\\\\"arco-picker-week-list-item\\\\\">五</div>\n            <div class=\\\\\"arco-picker-week-list-item\\\\\">六</div>\n          </div>\n          <div class=\\\\\"arco-picker-body\\\\\">\n            <div class=\\\\\"arco-picker-row\\\\\">\n              <!-- 一年中的第几周，只在 week 模式下显示 -->\n              <div class=\\\\\"arco-picker-cell\\\\\">\n                <div class=\\\\\"arco-picker-date\\\\\">\n                  <div class=\\\\\"arco-picker-date-value\\\\\">26</div>\n                </div>\n              </div><!-- 一年中的第几周，只在 week 模式下显示 -->\n              <div class=\\\\\"arco-picker-cell\\\\\">\n                <div class=\\\\\"arco-picker-date\\\\\">\n                  <div class=\\\\\"arco-picker-date-value\\\\\">27</div>\n                </div>\n              </div><!-- 一年中的第几周，只在 week 模式下显示 -->\n              <div class=\\\\\"arco-picker-cell\\\\\">\n                <div class=\\\\\"arco-picker-date\\\\\">\n                  <div class=\\\\\"arco-picker-date-value\\\\\">28</div>\n                </div>\n              </div><!-- 一年中的第几周，只在 week 模式下显示 -->\n              <div class=\\\\\"arco-picker-cell\\\\\">\n                <div class=\\\\\"arco-picker-date\\\\\">\n                  <div class=\\\\\"arco-picker-date-value\\\\\">29</div>\n                </div>\n              </div><!-- 一年中的第几周，只在 week 模式下显示 -->\n              <div class=\\\\\"arco-picker-cell\\\\\">\n                <div class=\\\\\"arco-picker-date\\\\\">\n                  <div class=\\\\\"arco-picker-date-value\\\\\">30</div>\n                </div>\n              </div><!-- 一年中的第几周，只在 week 模式下显示 -->\n              <div class=\\\\\"arco-picker-cell\\\\\">\n                <div class=\\\\\"arco-picker-date\\\\\">\n                  <div class=\\\\\"arco-picker-date-value\\\\\">31</div>\n                </div>\n              </div><!-- 一年中的第几周，只在 week 模式下显示 -->\n              <div class=\\\\\"arco-picker-cell arco-picker-cell-in-view\\\\\">\n                <div class=\\\\\"arco-picker-date\\\\\">\n                  <div class=\\\\\"arco-picker-date-value\\\\\">1</div>\n                </div>\n              </div>\n            </div>\n            <div class=\\\\\"arco-picker-row\\\\\">\n              <!-- 一年中的第几周，只在 week 模式下显示 -->\n              <div class=\\\\\"arco-picker-cell arco-picker-cell-in-view\\\\\">\n                <div class=\\\\\"arco-picker-date\\\\\">\n                  <div class=\\\\\"arco-picker-date-value\\\\\">2</div>\n                </div>\n              </div><!-- 一年中的第几周，只在 week 模式下显示 -->\n              <div class=\\\\\"arco-picker-cell arco-picker-cell-in-view arco-picker-cell-selected\\\\\">\n                <div class=\\\\\"arco-picker-date\\\\\">\n                  <div class=\\\\\"arco-picker-date-value\\\\\">3</div>\n                </div>\n              </div><!-- 一年中的第几周，只在 week 模式下显示 -->\n              <div class=\\\\\"arco-picker-cell arco-picker-cell-in-view\\\\\">\n                <div class=\\\\\"arco-picker-date\\\\\">\n                  <div class=\\\\\"arco-picker-date-value\\\\\">4</div>\n                </div>\n              </div><!-- 一年中的第几周，只在 week 模式下显示 -->\n              <div class=\\\\\"arco-picker-cell arco-picker-cell-in-view\\\\\">\n                <div class=\\\\\"arco-picker-date\\\\\">\n                  <div class=\\\\\"arco-picker-date-value\\\\\">5</div>\n                </div>\n              </div><!-- 一年中的第几周，只在 week 模式下显示 -->\n              <div class=\\\\\"arco-picker-cell arco-picker-cell-in-view\\\\\">\n                <div class=\\\\\"arco-picker-date\\\\\">\n                  <div class=\\\\\"arco-picker-date-value\\\\\">6</div>\n                </div>\n              </div><!-- 一年中的第几周，只在 week 模式下显示 -->\n              <div class=\\\\\"arco-picker-cell arco-picker-cell-in-view\\\\\">\n                <div class=\\\\\"arco-picker-date\\\\\">\n                  <div class=\\\\\"arco-picker-date-value\\\\\">7</div>\n                </div>\n              </div><!-- 一年中的第几周，只在 week 模式下显示 -->\n              <div class=\\\\\"arco-picker-cell arco-picker-cell-in-view\\\\\">\n                <div class=\\\\\"arco-picker-date\\\\\">\n                  <div class=\\\\\"arco-picker-date-value\\\\\">8</div>\n                </div>\n              </div>\n            </div>\n            <div class=\\\\\"arco-picker-row\\\\\">\n              <!-- 一年中的第几周，只在 week 模式下显示 -->\n              <div class=\\\\\"arco-picker-cell arco-picker-cell-in-view\\\\\">\n                <div class=\\\\\"arco-picker-date\\\\\">\n                  <div class=\\\\\"arco-picker-date-value\\\\\">9</div>\n                </div>\n              </div><!-- 一年中的第几周，只在 week 模式下显示 -->\n              <div class=\\\\\"arco-picker-cell arco-picker-cell-in-view\\\\\">\n                <div class=\\\\\"arco-picker-date\\\\\">\n                  <div class=\\\\\"arco-picker-date-value\\\\\">10</div>\n                </div>\n              </div><!-- 一年中的第几周，只在 week 模式下显示 -->\n              <div class=\\\\\"arco-picker-cell arco-picker-cell-in-view\\\\\">\n                <div class=\\\\\"arco-picker-date\\\\\">\n                  <div class=\\\\\"arco-picker-date-value\\\\\">11</div>\n                </div>\n              </div><!-- 一年中的第几周，只在 week 模式下显示 -->\n              <div class=\\\\\"arco-picker-cell arco-picker-cell-in-view\\\\\">\n                <div class=\\\\\"arco-picker-date\\\\\">\n                  <div class=\\\\\"arco-picker-date-value\\\\\">12</div>\n                </div>\n              </div><!-- 一年中的第几周，只在 week 模式下显示 -->\n              <div class=\\\\\"arco-picker-cell arco-picker-cell-in-view\\\\\">\n                <div class=\\\\\"arco-picker-date\\\\\">\n                  <div class=\\\\\"arco-picker-date-value\\\\\">13</div>\n                </div>\n              </div><!-- 一年中的第几周，只在 week 模式下显示 -->\n              <div class=\\\\\"arco-picker-cell arco-picker-cell-in-view\\\\\">\n                <div class=\\\\\"arco-picker-date\\\\\">\n                  <div class=\\\\\"arco-picker-date-value\\\\\">14</div>\n                </div>\n              </div><!-- 一年中的第几周，只在 week 模式下显示 -->\n              <div class=\\\\\"arco-picker-cell arco-picker-cell-in-view\\\\\">\n                <div class=\\\\\"arco-picker-date\\\\\">\n                  <div class=\\\\\"arco-picker-date-value\\\\\">15</div>\n                </div>\n              </div>\n            </div>\n            <div class=\\\\\"arco-picker-row\\\\\">\n              <!-- 一年中的第几周，只在 week 模式下显示 -->\n              <div class=\\\\\"arco-picker-cell arco-picker-cell-in-view\\\\\">\n                <div class=\\\\\"arco-picker-date\\\\\">\n                  <div class=\\\\\"arco-picker-date-value\\\\\">16</div>\n                </div>\n              </div><!-- 一年中的第几周，只在 week 模式下显示 -->\n              <div class=\\\\\"arco-picker-cell arco-picker-cell-in-view\\\\\">\n                <div class=\\\\\"arco-picker-date\\\\\">\n                  <div class=\\\\\"arco-picker-date-value\\\\\">17</div>\n                </div>\n              </div><!-- 一年中的第几周，只在 week 模式下显示 -->\n              <div class=\\\\\"arco-picker-cell arco-picker-cell-in-view\\\\\">\n                <div class=\\\\\"arco-picker-date\\\\\">\n                  <div class=\\\\\"arco-picker-date-value\\\\\">18</div>\n                </div>\n              </div><!-- 一年中的第几周，只在 week 模式下显示 -->\n              <div class=\\\\\"arco-picker-cell arco-picker-cell-in-view\\\\\">\n                <div class=\\\\\"arco-picker-date\\\\\">\n                  <div class=\\\\\"arco-picker-date-value\\\\\">19</div>\n                </div>\n              </div><!-- 一年中的第几周，只在 week 模式下显示 -->\n              <div class=\\\\\"arco-picker-cell arco-picker-cell-in-view\\\\\">\n                <div class=\\\\\"arco-picker-date\\\\\">\n                  <div class=\\\\\"arco-picker-date-value\\\\\">20</div>\n                </div>\n              </div><!-- 一年中的第几周，只在 week 模式下显示 -->\n              <div class=\\\\\"arco-picker-cell arco-picker-cell-in-view\\\\\">\n                <div class=\\\\\"arco-picker-date\\\\\">\n                  <div class=\\\\\"arco-picker-date-value\\\\\">21</div>\n                </div>\n              </div><!-- 一年中的第几周，只在 week 模式下显示 -->\n              <div class=\\\\\"arco-picker-cell arco-picker-cell-in-view\\\\\">\n                <div class=\\\\\"arco-picker-date\\\\\">\n                  <div class=\\\\\"arco-picker-date-value\\\\\">22</div>\n                </div>\n              </div>\n            </div>\n            <div class=\\\\\"arco-picker-row\\\\\">\n              <!-- 一年中的第几周，只在 week 模式下显示 -->\n              <div class=\\\\\"arco-picker-cell arco-picker-cell-in-view\\\\\">\n                <div class=\\\\\"arco-picker-date\\\\\">\n                  <div class=\\\\\"arco-picker-date-value\\\\\">23</div>\n                </div>\n              </div><!-- 一年中的第几周，只在 week 模式下显示 -->\n              <div class=\\\\\"arco-picker-cell arco-picker-cell-in-view\\\\\">\n                <div class=\\\\\"arco-picker-date\\\\\">\n                  <div class=\\\\\"arco-picker-date-value\\\\\">24</div>\n                </div>\n              </div><!-- 一年中的第几周，只在 week 模式下显示 -->\n              <div class=\\\\\"arco-picker-cell arco-picker-cell-in-view\\\\\">\n                <div class=\\\\\"arco-picker-date\\\\\">\n                  <div class=\\\\\"arco-picker-date-value\\\\\">25</div>\n                </div>\n              </div><!-- 一年中的第几周，只在 week 模式下显示 -->\n              <div class=\\\\\"arco-picker-cell arco-picker-cell-in-view\\\\\">\n                <div class=\\\\\"arco-picker-date\\\\\">\n                  <div class=\\\\\"arco-picker-date-value\\\\\">26</div>\n                </div>\n              </div><!-- 一年中的第几周，只在 week 模式下显示 -->\n              <div class=\\\\\"arco-picker-cell arco-picker-cell-in-view\\\\\">\n                <div class=\\\\\"arco-picker-date\\\\\">\n                  <div class=\\\\\"arco-picker-date-value\\\\\">27</div>\n                </div>\n              </div><!-- 一年中的第几周，只在 week 模式下显示 -->\n              <div class=\\\\\"arco-picker-cell arco-picker-cell-in-view\\\\\">\n                <div class=\\\\\"arco-picker-date\\\\\">\n                  <div class=\\\\\"arco-picker-date-value\\\\\">28</div>\n                </div>\n              </div><!-- 一年中的第几周，只在 week 模式下显示 -->\n              <div class=\\\\\"arco-picker-cell arco-picker-cell-in-view\\\\\">\n                <div class=\\\\\"arco-picker-date\\\\\">\n                  <div class=\\\\\"arco-picker-date-value\\\\\">29</div>\n                </div>\n              </div>\n            </div>\n            <div class=\\\\\"arco-picker-row\\\\\">\n              <!-- 一年中的第几周，只在 week 模式下显示 -->\n              <div class=\\\\\"arco-picker-cell arco-picker-cell-in-view\\\\\">\n                <div class=\\\\\"arco-picker-date\\\\\">\n                  <div class=\\\\\"arco-picker-date-value\\\\\">30</div>\n                </div>\n              </div><!-- 一年中的第几周，只在 week 模式下显示 -->\n              <div class=\\\\\"arco-picker-cell\\\\\">\n                <div class=\\\\\"arco-picker-date\\\\\">\n                  <div class=\\\\\"arco-picker-date-value\\\\\">1</div>\n                </div>\n              </div><!-- 一年中的第几周，只在 week 模式下显示 -->\n              <div class=\\\\\"arco-picker-cell\\\\\">\n                <div class=\\\\\"arco-picker-date\\\\\">\n                  <div class=\\\\\"arco-picker-date-value\\\\\">2</div>\n                </div>\n              </div><!-- 一年中的第几周，只在 week 模式下显示 -->\n              <div class=\\\\\"arco-picker-cell\\\\\">\n                <div class=\\\\\"arco-picker-date\\\\\">\n                  <div class=\\\\\"arco-picker-date-value\\\\\">3</div>\n                </div>\n              </div><!-- 一年中的第几周，只在 week 模式下显示 -->\n              <div class=\\\\\"arco-picker-cell\\\\\">\n                <div class=\\\\\"arco-picker-date\\\\\">\n                  <div class=\\\\\"arco-picker-date-value\\\\\">4</div>\n                </div>\n              </div><!-- 一年中的第几周，只在 week 模式下显示 -->\n              <div class=\\\\\"arco-picker-cell\\\\\">\n                <div class=\\\\\"arco-picker-date\\\\\">\n                  <div class=\\\\\"arco-picker-date-value\\\\\">5</div>\n                </div>\n              </div><!-- 一年中的第几周，只在 week 模式下显示 -->\n              <div class=\\\\\"arco-picker-cell\\\\\">\n                <div class=\\\\\"arco-picker-date\\\\\">\n                  <div class=\\\\\"arco-picker-date-value\\\\\">6</div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n        <!--v-if-->\n        <!--v-if-->\n      </div>\n      <div class=\\\\\"arco-picker-footer\\\\\">\n        <!--v-if-->\n        <div class=\\\\\"arco-picker-footer-now-wrapper\\\\\"><a class=\\\\\"arco-link arco-link-status-normal\\\\\">\n            <!--v-if-->今天\n          </a></div>\n        <!--v-if-->\n      </div>\n    </div>\n    <!--v-if-->\n  </div>\n  <div class=\\\\\"arco-picker-range-container arco-picker-range-container-panel-only\\\\\" style=\\\\\"width: 560px; margin-top: 20px;\\\\\">\n    <!--v-if-->\n    <div class=\\\\\"arco-picker-range-panel-wrapper\\\\\">\n      <!-- panel -->\n      <div class=\\\\\"arco-picker-range\\\\\">\n        <div class=\\\\\"arco-picker-range-wrapper\\\\\">\n          <!-- week -->\n          <!-- date -->\n          <div class=\\\\\"arco-panel-date\\\\\">\n            <div class=\\\\\"arco-panel-date-inner\\\\\">\n              <div class=\\\\\"arco-picker-header\\\\\">\n                <div class=\\\\\"arco-picker-header-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-double-left\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n                    <path d=\\\\\"M36.857 9.9 22.715 24.042l14.142 14.142M25.544 9.9 11.402 24.042l14.142 14.142\\\\\"></path>\n                  </svg></div>\n                <div class=\\\\\"arco-picker-header-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-left\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n                    <path d=\\\\\"M32 8.4 16.444 23.956 32 39.513\\\\\"></path>\n                  </svg></div>\n                <div class=\\\\\"arco-picker-header-title\\\\\"><span class=\\\\\"arco-picker-header-label\\\\\">2019</span><span>-</span><span class=\\\\\"arco-picker-header-label\\\\\">08</span></div>\n                <div class=\\\\\"arco-picker-header-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-right\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n                    <path d=\\\\\"m16 39.513 15.556-15.557L16 8.4\\\\\"></path>\n                  </svg></div>\n                <div class=\\\\\"arco-picker-header-icon arco-picker-header-icon-hidden\\\\\">\n                  <!--v-if-->\n                </div>\n              </div>\n              <div class=\\\\\"arco-picker-week-list\\\\\">\n                <div class=\\\\\"arco-picker-week-list-item\\\\\">日</div>\n                <div class=\\\\\"arco-picker-week-list-item\\\\\">一</div>\n                <div class=\\\\\"arco-picker-week-list-item\\\\\">二</div>\n                <div class=\\\\\"arco-picker-week-list-item\\\\\">三</div>\n                <div class=\\\\\"arco-picker-week-list-item\\\\\">四</div>\n                <div class=\\\\\"arco-picker-week-list-item\\\\\">五</div>\n                <div class=\\\\\"arco-picker-week-list-item\\\\\">六</div>\n              </div>\n              <div class=\\\\\"arco-picker-body\\\\\">\n                <div class=\\\\\"arco-picker-row\\\\\">\n                  <!-- 一年中的第几周，只在 week 模式下显示 -->\n                  <div class=\\\\\"arco-picker-cell\\\\\">\n                    <div class=\\\\\"arco-picker-date\\\\\">\n                      <div class=\\\\\"arco-picker-date-value\\\\\">28</div>\n                    </div>\n                  </div><!-- 一年中的第几周，只在 week 模式下显示 -->\n                  <div class=\\\\\"arco-picker-cell\\\\\">\n                    <div class=\\\\\"arco-picker-date\\\\\">\n                      <div class=\\\\\"arco-picker-date-value\\\\\">29</div>\n                    </div>\n                  </div><!-- 一年中的第几周，只在 week 模式下显示 -->\n                  <div class=\\\\\"arco-picker-cell\\\\\">\n                    <div class=\\\\\"arco-picker-date\\\\\">\n                      <div class=\\\\\"arco-picker-date-value\\\\\">30</div>\n                    </div>\n                  </div><!-- 一年中的第几周，只在 week 模式下显示 -->\n                  <div class=\\\\\"arco-picker-cell\\\\\">\n                    <div class=\\\\\"arco-picker-date\\\\\">\n                      <div class=\\\\\"arco-picker-date-value\\\\\">31</div>\n                    </div>\n                  </div><!-- 一年中的第几周，只在 week 模式下显示 -->\n                  <div class=\\\\\"arco-picker-cell arco-picker-cell-in-view arco-picker-cell-range-start arco-picker-cell-in-range\\\\\">\n                    <div class=\\\\\"arco-picker-date\\\\\">\n                      <div class=\\\\\"arco-picker-date-value\\\\\">1</div>\n                    </div>\n                  </div><!-- 一年中的第几周，只在 week 模式下显示 -->\n                  <div class=\\\\\"arco-picker-cell arco-picker-cell-in-view arco-picker-cell-in-range\\\\\">\n                    <div class=\\\\\"arco-picker-date\\\\\">\n                      <div class=\\\\\"arco-picker-date-value\\\\\">2</div>\n                    </div>\n                  </div><!-- 一年中的第几周，只在 week 模式下显示 -->\n                  <div class=\\\\\"arco-picker-cell arco-picker-cell-in-view arco-picker-cell-in-range\\\\\">\n                    <div class=\\\\\"arco-picker-date\\\\\">\n                      <div class=\\\\\"arco-picker-date-value\\\\\">3</div>\n                    </div>\n                  </div>\n                </div>\n                <div class=\\\\\"arco-picker-row\\\\\">\n                  <!-- 一年中的第几周，只在 week 模式下显示 -->\n                  <div class=\\\\\"arco-picker-cell arco-picker-cell-in-view arco-picker-cell-in-range\\\\\">\n                    <div class=\\\\\"arco-picker-date\\\\\">\n                      <div class=\\\\\"arco-picker-date-value\\\\\">4</div>\n                    </div>\n                  </div><!-- 一年中的第几周，只在 week 模式下显示 -->\n                  <div class=\\\\\"arco-picker-cell arco-picker-cell-in-view arco-picker-cell-in-range\\\\\">\n                    <div class=\\\\\"arco-picker-date\\\\\">\n                      <div class=\\\\\"arco-picker-date-value\\\\\">5</div>\n                    </div>\n                  </div><!-- 一年中的第几周，只在 week 模式下显示 -->\n                  <div class=\\\\\"arco-picker-cell arco-picker-cell-in-view arco-picker-cell-in-range\\\\\">\n                    <div class=\\\\\"arco-picker-date\\\\\">\n                      <div class=\\\\\"arco-picker-date-value\\\\\">6</div>\n                    </div>\n                  </div><!-- 一年中的第几周，只在 week 模式下显示 -->\n                  <div class=\\\\\"arco-picker-cell arco-picker-cell-in-view arco-picker-cell-in-range\\\\\">\n                    <div class=\\\\\"arco-picker-date\\\\\">\n                      <div class=\\\\\"arco-picker-date-value\\\\\">7</div>\n                    </div>\n                  </div><!-- 一年中的第几周，只在 week 模式下显示 -->\n                  <div class=\\\\\"arco-picker-cell arco-picker-cell-in-view arco-picker-cell-in-range\\\\\">\n                    <div class=\\\\\"arco-picker-date\\\\\">\n                      <div class=\\\\\"arco-picker-date-value\\\\\">8</div>\n                    </div>\n                  </div><!-- 一年中的第几周，只在 week 模式下显示 -->\n                  <div class=\\\\\"arco-picker-cell arco-picker-cell-in-view arco-picker-cell-in-range\\\\\">\n                    <div class=\\\\\"arco-picker-date\\\\\">\n                      <div class=\\\\\"arco-picker-date-value\\\\\">9</div>\n                    </div>\n                  </div><!-- 一年中的第几周，只在 week 模式下显示 -->\n                  <div class=\\\\\"arco-picker-cell arco-picker-cell-in-view arco-picker-cell-in-range\\\\\">\n                    <div class=\\\\\"arco-picker-date\\\\\">\n                      <div class=\\\\\"arco-picker-date-value\\\\\">10</div>\n                    </div>\n                  </div>\n                </div>\n                <div class=\\\\\"arco-picker-row\\\\\">\n                  <!-- 一年中的第几周，只在 week 模式下显示 -->\n                  <div class=\\\\\"arco-picker-cell arco-picker-cell-in-view arco-picker-cell-in-range\\\\\">\n                    <div class=\\\\\"arco-picker-date\\\\\">\n                      <div class=\\\\\"arco-picker-date-value\\\\\">11</div>\n                    </div>\n                  </div><!-- 一年中的第几周，只在 week 模式下显示 -->\n                  <div class=\\\\\"arco-picker-cell arco-picker-cell-in-view arco-picker-cell-in-range\\\\\">\n                    <div class=\\\\\"arco-picker-date\\\\\">\n                      <div class=\\\\\"arco-picker-date-value\\\\\">12</div>\n                    </div>\n                  </div><!-- 一年中的第几周，只在 week 模式下显示 -->\n                  <div class=\\\\\"arco-picker-cell arco-picker-cell-in-view arco-picker-cell-in-range\\\\\">\n                    <div class=\\\\\"arco-picker-date\\\\\">\n                      <div class=\\\\\"arco-picker-date-value\\\\\">13</div>\n                    </div>\n                  </div><!-- 一年中的第几周，只在 week 模式下显示 -->\n                  <div class=\\\\\"arco-picker-cell arco-picker-cell-in-view arco-picker-cell-in-range\\\\\">\n                    <div class=\\\\\"arco-picker-date\\\\\">\n                      <div class=\\\\\"arco-picker-date-value\\\\\">14</div>\n                    </div>\n                  </div><!-- 一年中的第几周，只在 week 模式下显示 -->\n                  <div class=\\\\\"arco-picker-cell arco-picker-cell-in-view arco-picker-cell-in-range\\\\\">\n                    <div class=\\\\\"arco-picker-date\\\\\">\n                      <div class=\\\\\"arco-picker-date-value\\\\\">15</div>\n                    </div>\n                  </div><!-- 一年中的第几周，只在 week 模式下显示 -->\n                  <div class=\\\\\"arco-picker-cell arco-picker-cell-in-view arco-picker-cell-in-range\\\\\">\n                    <div class=\\\\\"arco-picker-date\\\\\">\n                      <div class=\\\\\"arco-picker-date-value\\\\\">16</div>\n                    </div>\n                  </div><!-- 一年中的第几周，只在 week 模式下显示 -->\n                  <div class=\\\\\"arco-picker-cell arco-picker-cell-in-view arco-picker-cell-in-range\\\\\">\n                    <div class=\\\\\"arco-picker-date\\\\\">\n                      <div class=\\\\\"arco-picker-date-value\\\\\">17</div>\n                    </div>\n                  </div>\n                </div>\n                <div class=\\\\\"arco-picker-row\\\\\">\n                  <!-- 一年中的第几周，只在 week 模式下显示 -->\n                  <div class=\\\\\"arco-picker-cell arco-picker-cell-in-view arco-picker-cell-in-range\\\\\">\n                    <div class=\\\\\"arco-picker-date\\\\\">\n                      <div class=\\\\\"arco-picker-date-value\\\\\">18</div>\n                    </div>\n                  </div><!-- 一年中的第几周，只在 week 模式下显示 -->\n                  <div class=\\\\\"arco-picker-cell arco-picker-cell-in-view arco-picker-cell-in-range\\\\\">\n                    <div class=\\\\\"arco-picker-date\\\\\">\n                      <div class=\\\\\"arco-picker-date-value\\\\\">19</div>\n                    </div>\n                  </div><!-- 一年中的第几周，只在 week 模式下显示 -->\n                  <div class=\\\\\"arco-picker-cell arco-picker-cell-in-view arco-picker-cell-in-range\\\\\">\n                    <div class=\\\\\"arco-picker-date\\\\\">\n                      <div class=\\\\\"arco-picker-date-value\\\\\">20</div>\n                    </div>\n                  </div><!-- 一年中的第几周，只在 week 模式下显示 -->\n                  <div class=\\\\\"arco-picker-cell arco-picker-cell-in-view arco-picker-cell-in-range\\\\\">\n                    <div class=\\\\\"arco-picker-date\\\\\">\n                      <div class=\\\\\"arco-picker-date-value\\\\\">21</div>\n                    </div>\n                  </div><!-- 一年中的第几周，只在 week 模式下显示 -->\n                  <div class=\\\\\"arco-picker-cell arco-picker-cell-in-view arco-picker-cell-in-range\\\\\">\n                    <div class=\\\\\"arco-picker-date\\\\\">\n                      <div class=\\\\\"arco-picker-date-value\\\\\">22</div>\n                    </div>\n                  </div><!-- 一年中的第几周，只在 week 模式下显示 -->\n                  <div class=\\\\\"arco-picker-cell arco-picker-cell-in-view arco-picker-cell-in-range\\\\\">\n                    <div class=\\\\\"arco-picker-date\\\\\">\n                      <div class=\\\\\"arco-picker-date-value\\\\\">23</div>\n                    </div>\n                  </div><!-- 一年中的第几周，只在 week 模式下显示 -->\n                  <div class=\\\\\"arco-picker-cell arco-picker-cell-in-view arco-picker-cell-in-range\\\\\">\n                    <div class=\\\\\"arco-picker-date\\\\\">\n                      <div class=\\\\\"arco-picker-date-value\\\\\">24</div>\n                    </div>\n                  </div>\n                </div>\n                <div class=\\\\\"arco-picker-row\\\\\">\n                  <!-- 一年中的第几周，只在 week 模式下显示 -->\n                  <div class=\\\\\"arco-picker-cell arco-picker-cell-in-view arco-picker-cell-in-range\\\\\">\n                    <div class=\\\\\"arco-picker-date\\\\\">\n                      <div class=\\\\\"arco-picker-date-value\\\\\">25</div>\n                    </div>\n                  </div><!-- 一年中的第几周，只在 week 模式下显示 -->\n                  <div class=\\\\\"arco-picker-cell arco-picker-cell-in-view arco-picker-cell-in-range\\\\\">\n                    <div class=\\\\\"arco-picker-date\\\\\">\n                      <div class=\\\\\"arco-picker-date-value\\\\\">26</div>\n                    </div>\n                  </div><!-- 一年中的第几周，只在 week 模式下显示 -->\n                  <div class=\\\\\"arco-picker-cell arco-picker-cell-in-view arco-picker-cell-in-range\\\\\">\n                    <div class=\\\\\"arco-picker-date\\\\\">\n                      <div class=\\\\\"arco-picker-date-value\\\\\">27</div>\n                    </div>\n                  </div><!-- 一年中的第几周，只在 week 模式下显示 -->\n                  <div class=\\\\\"arco-picker-cell arco-picker-cell-in-view arco-picker-cell-in-range\\\\\">\n                    <div class=\\\\\"arco-picker-date\\\\\">\n                      <div class=\\\\\"arco-picker-date-value\\\\\">28</div>\n                    </div>\n                  </div><!-- 一年中的第几周，只在 week 模式下显示 -->\n                  <div class=\\\\\"arco-picker-cell arco-picker-cell-in-view arco-picker-cell-in-range\\\\\">\n                    <div class=\\\\\"arco-picker-date\\\\\">\n                      <div class=\\\\\"arco-picker-date-value\\\\\">29</div>\n                    </div>\n                  </div><!-- 一年中的第几周，只在 week 模式下显示 -->\n                  <div class=\\\\\"arco-picker-cell arco-picker-cell-in-view arco-picker-cell-in-range\\\\\">\n                    <div class=\\\\\"arco-picker-date\\\\\">\n                      <div class=\\\\\"arco-picker-date-value\\\\\">30</div>\n                    </div>\n                  </div><!-- 一年中的第几周，只在 week 模式下显示 -->\n                  <div class=\\\\\"arco-picker-cell arco-picker-cell-in-view arco-picker-cell-in-range\\\\\">\n                    <div class=\\\\\"arco-picker-date\\\\\">\n                      <div class=\\\\\"arco-picker-date-value\\\\\">31</div>\n                    </div>\n                  </div>\n                </div>\n                <div class=\\\\\"arco-picker-row\\\\\">\n                  <!-- 一年中的第几周，只在 week 模式下显示 -->\n                  <div class=\\\\\"arco-picker-cell\\\\\">\n                    <div class=\\\\\"arco-picker-date\\\\\">\n                      <div class=\\\\\"arco-picker-date-value\\\\\">1</div>\n                    </div>\n                  </div><!-- 一年中的第几周，只在 week 模式下显示 -->\n                  <div class=\\\\\"arco-picker-cell\\\\\">\n                    <div class=\\\\\"arco-picker-date\\\\\">\n                      <div class=\\\\\"arco-picker-date-value\\\\\">2</div>\n                    </div>\n                  </div><!-- 一年中的第几周，只在 week 模式下显示 -->\n                  <div class=\\\\\"arco-picker-cell\\\\\">\n                    <div class=\\\\\"arco-picker-date\\\\\">\n                      <div class=\\\\\"arco-picker-date-value\\\\\">3</div>\n                    </div>\n                  </div><!-- 一年中的第几周，只在 week 模式下显示 -->\n                  <div class=\\\\\"arco-picker-cell\\\\\">\n                    <div class=\\\\\"arco-picker-date\\\\\">\n                      <div class=\\\\\"arco-picker-date-value\\\\\">4</div>\n                    </div>\n                  </div><!-- 一年中的第几周，只在 week 模式下显示 -->\n                  <div class=\\\\\"arco-picker-cell\\\\\">\n                    <div class=\\\\\"arco-picker-date\\\\\">\n                      <div class=\\\\\"arco-picker-date-value\\\\\">5</div>\n                    </div>\n                  </div><!-- 一年中的第几周，只在 week 模式下显示 -->\n                  <div class=\\\\\"arco-picker-cell\\\\\">\n                    <div class=\\\\\"arco-picker-date\\\\\">\n                      <div class=\\\\\"arco-picker-date-value\\\\\">6</div>\n                    </div>\n                  </div><!-- 一年中的第几周，只在 week 模式下显示 -->\n                  <div class=\\\\\"arco-picker-cell\\\\\">\n                    <div class=\\\\\"arco-picker-date\\\\\">\n                      <div class=\\\\\"arco-picker-date-value\\\\\">7</div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n            <!--v-if-->\n            <!--v-if-->\n          </div>\n          <div class=\\\\\"arco-panel-date\\\\\">\n            <div class=\\\\\"arco-panel-date-inner\\\\\">\n              <div class=\\\\\"arco-picker-header\\\\\">\n                <div class=\\\\\"arco-picker-header-icon arco-picker-header-icon-hidden\\\\\">\n                  <!--v-if-->\n                </div>\n                <div class=\\\\\"arco-picker-header-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-left\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n                    <path d=\\\\\"M32 8.4 16.444 23.956 32 39.513\\\\\"></path>\n                  </svg></div>\n                <div class=\\\\\"arco-picker-header-title\\\\\"><span class=\\\\\"arco-picker-header-label\\\\\">2020</span><span>-</span><span class=\\\\\"arco-picker-header-label\\\\\">06</span></div>\n                <div class=\\\\\"arco-picker-header-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-right\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n                    <path d=\\\\\"m16 39.513 15.556-15.557L16 8.4\\\\\"></path>\n                  </svg></div>\n                <div class=\\\\\"arco-picker-header-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-double-right\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n                    <path d=\\\\\"m11.143 38.1 14.142-14.142L11.143 9.816M22.456 38.1l14.142-14.142L22.456 9.816\\\\\"></path>\n                  </svg></div>\n              </div>\n              <div class=\\\\\"arco-picker-week-list\\\\\">\n                <div class=\\\\\"arco-picker-week-list-item\\\\\">日</div>\n                <div class=\\\\\"arco-picker-week-list-item\\\\\">一</div>\n                <div class=\\\\\"arco-picker-week-list-item\\\\\">二</div>\n                <div class=\\\\\"arco-picker-week-list-item\\\\\">三</div>\n                <div class=\\\\\"arco-picker-week-list-item\\\\\">四</div>\n                <div class=\\\\\"arco-picker-week-list-item\\\\\">五</div>\n                <div class=\\\\\"arco-picker-week-list-item\\\\\">六</div>\n              </div>\n              <div class=\\\\\"arco-picker-body\\\\\">\n                <div class=\\\\\"arco-picker-row\\\\\">\n                  <!-- 一年中的第几周，只在 week 模式下显示 -->\n                  <div class=\\\\\"arco-picker-cell\\\\\">\n                    <div class=\\\\\"arco-picker-date\\\\\">\n                      <div class=\\\\\"arco-picker-date-value\\\\\">31</div>\n                    </div>\n                  </div><!-- 一年中的第几周，只在 week 模式下显示 -->\n                  <div class=\\\\\"arco-picker-cell arco-picker-cell-in-view arco-picker-cell-range-end arco-picker-cell-in-range\\\\\">\n                    <div class=\\\\\"arco-picker-date\\\\\">\n                      <div class=\\\\\"arco-picker-date-value\\\\\">1</div>\n                    </div>\n                  </div><!-- 一年中的第几周，只在 week 模式下显示 -->\n                  <div class=\\\\\"arco-picker-cell arco-picker-cell-in-view\\\\\">\n                    <div class=\\\\\"arco-picker-date\\\\\">\n                      <div class=\\\\\"arco-picker-date-value\\\\\">2</div>\n                    </div>\n                  </div><!-- 一年中的第几周，只在 week 模式下显示 -->\n                  <div class=\\\\\"arco-picker-cell arco-picker-cell-in-view\\\\\">\n                    <div class=\\\\\"arco-picker-date\\\\\">\n                      <div class=\\\\\"arco-picker-date-value\\\\\">3</div>\n                    </div>\n                  </div><!-- 一年中的第几周，只在 week 模式下显示 -->\n                  <div class=\\\\\"arco-picker-cell arco-picker-cell-in-view\\\\\">\n                    <div class=\\\\\"arco-picker-date\\\\\">\n                      <div class=\\\\\"arco-picker-date-value\\\\\">4</div>\n                    </div>\n                  </div><!-- 一年中的第几周，只在 week 模式下显示 -->\n                  <div class=\\\\\"arco-picker-cell arco-picker-cell-in-view\\\\\">\n                    <div class=\\\\\"arco-picker-date\\\\\">\n                      <div class=\\\\\"arco-picker-date-value\\\\\">5</div>\n                    </div>\n                  </div><!-- 一年中的第几周，只在 week 模式下显示 -->\n                  <div class=\\\\\"arco-picker-cell arco-picker-cell-in-view\\\\\">\n                    <div class=\\\\\"arco-picker-date\\\\\">\n                      <div class=\\\\\"arco-picker-date-value\\\\\">6</div>\n                    </div>\n                  </div>\n                </div>\n                <div class=\\\\\"arco-picker-row\\\\\">\n                  <!-- 一年中的第几周，只在 week 模式下显示 -->\n                  <div class=\\\\\"arco-picker-cell arco-picker-cell-in-view\\\\\">\n                    <div class=\\\\\"arco-picker-date\\\\\">\n                      <div class=\\\\\"arco-picker-date-value\\\\\">7</div>\n                    </div>\n                  </div><!-- 一年中的第几周，只在 week 模式下显示 -->\n                  <div class=\\\\\"arco-picker-cell arco-picker-cell-in-view\\\\\">\n                    <div class=\\\\\"arco-picker-date\\\\\">\n                      <div class=\\\\\"arco-picker-date-value\\\\\">8</div>\n                    </div>\n                  </div><!-- 一年中的第几周，只在 week 模式下显示 -->\n                  <div class=\\\\\"arco-picker-cell arco-picker-cell-in-view\\\\\">\n                    <div class=\\\\\"arco-picker-date\\\\\">\n                      <div class=\\\\\"arco-picker-date-value\\\\\">9</div>\n                    </div>\n                  </div><!-- 一年中的第几周，只在 week 模式下显示 -->\n                  <div class=\\\\\"arco-picker-cell arco-picker-cell-in-view\\\\\">\n                    <div class=\\\\\"arco-picker-date\\\\\">\n                      <div class=\\\\\"arco-picker-date-value\\\\\">10</div>\n                    </div>\n                  </div><!-- 一年中的第几周，只在 week 模式下显示 -->\n                  <div class=\\\\\"arco-picker-cell arco-picker-cell-in-view\\\\\">\n                    <div class=\\\\\"arco-picker-date\\\\\">\n                      <div class=\\\\\"arco-picker-date-value\\\\\">11</div>\n                    </div>\n                  </div><!-- 一年中的第几周，只在 week 模式下显示 -->\n                  <div class=\\\\\"arco-picker-cell arco-picker-cell-in-view\\\\\">\n                    <div class=\\\\\"arco-picker-date\\\\\">\n                      <div class=\\\\\"arco-picker-date-value\\\\\">12</div>\n                    </div>\n                  </div><!-- 一年中的第几周，只在 week 模式下显示 -->\n                  <div class=\\\\\"arco-picker-cell arco-picker-cell-in-view\\\\\">\n                    <div class=\\\\\"arco-picker-date\\\\\">\n                      <div class=\\\\\"arco-picker-date-value\\\\\">13</div>\n                    </div>\n                  </div>\n                </div>\n                <div class=\\\\\"arco-picker-row\\\\\">\n                  <!-- 一年中的第几周，只在 week 模式下显示 -->\n                  <div class=\\\\\"arco-picker-cell arco-picker-cell-in-view\\\\\">\n                    <div class=\\\\\"arco-picker-date\\\\\">\n                      <div class=\\\\\"arco-picker-date-value\\\\\">14</div>\n                    </div>\n                  </div><!-- 一年中的第几周，只在 week 模式下显示 -->\n                  <div class=\\\\\"arco-picker-cell arco-picker-cell-in-view\\\\\">\n                    <div class=\\\\\"arco-picker-date\\\\\">\n                      <div class=\\\\\"arco-picker-date-value\\\\\">15</div>\n                    </div>\n                  </div><!-- 一年中的第几周，只在 week 模式下显示 -->\n                  <div class=\\\\\"arco-picker-cell arco-picker-cell-in-view\\\\\">\n                    <div class=\\\\\"arco-picker-date\\\\\">\n                      <div class=\\\\\"arco-picker-date-value\\\\\">16</div>\n                    </div>\n                  </div><!-- 一年中的第几周，只在 week 模式下显示 -->\n                  <div class=\\\\\"arco-picker-cell arco-picker-cell-in-view\\\\\">\n                    <div class=\\\\\"arco-picker-date\\\\\">\n                      <div class=\\\\\"arco-picker-date-value\\\\\">17</div>\n                    </div>\n                  </div><!-- 一年中的第几周，只在 week 模式下显示 -->\n                  <div class=\\\\\"arco-picker-cell arco-picker-cell-in-view\\\\\">\n                    <div class=\\\\\"arco-picker-date\\\\\">\n                      <div class=\\\\\"arco-picker-date-value\\\\\">18</div>\n                    </div>\n                  </div><!-- 一年中的第几周，只在 week 模式下显示 -->\n                  <div class=\\\\\"arco-picker-cell arco-picker-cell-in-view\\\\\">\n                    <div class=\\\\\"arco-picker-date\\\\\">\n                      <div class=\\\\\"arco-picker-date-value\\\\\">19</div>\n                    </div>\n                  </div><!-- 一年中的第几周，只在 week 模式下显示 -->\n                  <div class=\\\\\"arco-picker-cell arco-picker-cell-in-view\\\\\">\n                    <div class=\\\\\"arco-picker-date\\\\\">\n                      <div class=\\\\\"arco-picker-date-value\\\\\">20</div>\n                    </div>\n                  </div>\n                </div>\n                <div class=\\\\\"arco-picker-row\\\\\">\n                  <!-- 一年中的第几周，只在 week 模式下显示 -->\n                  <div class=\\\\\"arco-picker-cell arco-picker-cell-in-view\\\\\">\n                    <div class=\\\\\"arco-picker-date\\\\\">\n                      <div class=\\\\\"arco-picker-date-value\\\\\">21</div>\n                    </div>\n                  </div><!-- 一年中的第几周，只在 week 模式下显示 -->\n                  <div class=\\\\\"arco-picker-cell arco-picker-cell-in-view\\\\\">\n                    <div class=\\\\\"arco-picker-date\\\\\">\n                      <div class=\\\\\"arco-picker-date-value\\\\\">22</div>\n                    </div>\n                  </div><!-- 一年中的第几周，只在 week 模式下显示 -->\n                  <div class=\\\\\"arco-picker-cell arco-picker-cell-in-view\\\\\">\n                    <div class=\\\\\"arco-picker-date\\\\\">\n                      <div class=\\\\\"arco-picker-date-value\\\\\">23</div>\n                    </div>\n                  </div><!-- 一年中的第几周，只在 week 模式下显示 -->\n                  <div class=\\\\\"arco-picker-cell arco-picker-cell-in-view\\\\\">\n                    <div class=\\\\\"arco-picker-date\\\\\">\n                      <div class=\\\\\"arco-picker-date-value\\\\\">24</div>\n                    </div>\n                  </div><!-- 一年中的第几周，只在 week 模式下显示 -->\n                  <div class=\\\\\"arco-picker-cell arco-picker-cell-in-view\\\\\">\n                    <div class=\\\\\"arco-picker-date\\\\\">\n                      <div class=\\\\\"arco-picker-date-value\\\\\">25</div>\n                    </div>\n                  </div><!-- 一年中的第几周，只在 week 模式下显示 -->\n                  <div class=\\\\\"arco-picker-cell arco-picker-cell-in-view\\\\\">\n                    <div class=\\\\\"arco-picker-date\\\\\">\n                      <div class=\\\\\"arco-picker-date-value\\\\\">26</div>\n                    </div>\n                  </div><!-- 一年中的第几周，只在 week 模式下显示 -->\n                  <div class=\\\\\"arco-picker-cell arco-picker-cell-in-view\\\\\">\n                    <div class=\\\\\"arco-picker-date\\\\\">\n                      <div class=\\\\\"arco-picker-date-value\\\\\">27</div>\n                    </div>\n                  </div>\n                </div>\n                <div class=\\\\\"arco-picker-row\\\\\">\n                  <!-- 一年中的第几周，只在 week 模式下显示 -->\n                  <div class=\\\\\"arco-picker-cell arco-picker-cell-in-view\\\\\">\n                    <div class=\\\\\"arco-picker-date\\\\\">\n                      <div class=\\\\\"arco-picker-date-value\\\\\">28</div>\n                    </div>\n                  </div><!-- 一年中的第几周，只在 week 模式下显示 -->\n                  <div class=\\\\\"arco-picker-cell arco-picker-cell-in-view\\\\\">\n                    <div class=\\\\\"arco-picker-date\\\\\">\n                      <div class=\\\\\"arco-picker-date-value\\\\\">29</div>\n                    </div>\n                  </div><!-- 一年中的第几周，只在 week 模式下显示 -->\n                  <div class=\\\\\"arco-picker-cell arco-picker-cell-in-view\\\\\">\n                    <div class=\\\\\"arco-picker-date\\\\\">\n                      <div class=\\\\\"arco-picker-date-value\\\\\">30</div>\n                    </div>\n                  </div><!-- 一年中的第几周，只在 week 模式下显示 -->\n                  <div class=\\\\\"arco-picker-cell\\\\\">\n                    <div class=\\\\\"arco-picker-date\\\\\">\n                      <div class=\\\\\"arco-picker-date-value\\\\\">1</div>\n                    </div>\n                  </div><!-- 一年中的第几周，只在 week 模式下显示 -->\n                  <div class=\\\\\"arco-picker-cell\\\\\">\n                    <div class=\\\\\"arco-picker-date\\\\\">\n                      <div class=\\\\\"arco-picker-date-value\\\\\">2</div>\n                    </div>\n                  </div><!-- 一年中的第几周，只在 week 模式下显示 -->\n                  <div class=\\\\\"arco-picker-cell\\\\\">\n                    <div class=\\\\\"arco-picker-date\\\\\">\n                      <div class=\\\\\"arco-picker-date-value\\\\\">3</div>\n                    </div>\n                  </div><!-- 一年中的第几周，只在 week 模式下显示 -->\n                  <div class=\\\\\"arco-picker-cell\\\\\">\n                    <div class=\\\\\"arco-picker-date\\\\\">\n                      <div class=\\\\\"arco-picker-date-value\\\\\">4</div>\n                    </div>\n                  </div>\n                </div>\n                <div class=\\\\\"arco-picker-row\\\\\">\n                  <!-- 一年中的第几周，只在 week 模式下显示 -->\n                  <div class=\\\\\"arco-picker-cell\\\\\">\n                    <div class=\\\\\"arco-picker-date\\\\\">\n                      <div class=\\\\\"arco-picker-date-value\\\\\">5</div>\n                    </div>\n                  </div><!-- 一年中的第几周，只在 week 模式下显示 -->\n                  <div class=\\\\\"arco-picker-cell\\\\\">\n                    <div class=\\\\\"arco-picker-date\\\\\">\n                      <div class=\\\\\"arco-picker-date-value\\\\\">6</div>\n                    </div>\n                  </div><!-- 一年中的第几周，只在 week 模式下显示 -->\n                  <div class=\\\\\"arco-picker-cell\\\\\">\n                    <div class=\\\\\"arco-picker-date\\\\\">\n                      <div class=\\\\\"arco-picker-date-value\\\\\">7</div>\n                    </div>\n                  </div><!-- 一年中的第几周，只在 week 模式下显示 -->\n                  <div class=\\\\\"arco-picker-cell\\\\\">\n                    <div class=\\\\\"arco-picker-date\\\\\">\n                      <div class=\\\\\"arco-picker-date-value\\\\\">8</div>\n                    </div>\n                  </div><!-- 一年中的第几周，只在 week 模式下显示 -->\n                  <div class=\\\\\"arco-picker-cell\\\\\">\n                    <div class=\\\\\"arco-picker-date\\\\\">\n                      <div class=\\\\\"arco-picker-date-value\\\\\">9</div>\n                    </div>\n                  </div><!-- 一年中的第几周，只在 week 模式下显示 -->\n                  <div class=\\\\\"arco-picker-cell\\\\\">\n                    <div class=\\\\\"arco-picker-date\\\\\">\n                      <div class=\\\\\"arco-picker-date-value\\\\\">10</div>\n                    </div>\n                  </div><!-- 一年中的第几周，只在 week 模式下显示 -->\n                  <div class=\\\\\"arco-picker-cell\\\\\">\n                    <div class=\\\\\"arco-picker-date\\\\\">\n                      <div class=\\\\\"arco-picker-date-value\\\\\">11</div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n            <!--v-if-->\n            <!--v-if-->\n          </div>\n        </div>\n      </div><!-- footer -->\n      <div class=\\\\\"arco-picker-footer\\\\\">\n        <!--v-if-->\n        <!--v-if-->\n        <!--v-if-->\n      </div>\n    </div>\n    <!--v-if-->\n  </div>\n</div>\"\n`;\n\nexports[`<date-picker> demo: render [prefix] correctly 1`] = `\n\"<div>\n  <div>\n    <div class=\\\\\"arco-picker arco-picker-size-medium arco-picker-has-prefix\\\\\" style=\\\\\"width: 300px;\\\\\" visible=\\\\\"false\\\\\">\n      <div class=\\\\\"arco-picker-prefix\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-info-circle\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n          <path d=\\\\\"M24 20v14m0-16v-4m18 10c0 9.941-8.059 18-18 18S6 33.941 6 24 14.059 6 24 6s18 8.059 18 18Z\\\\\"></path>\n        </svg></div>\n      <div class=\\\\\"arco-picker-input\\\\\"><input placeholder=\\\\\"请选择日期\\\\\" class=\\\\\"arco-picker-start-time\\\\\"></div>\n      <div class=\\\\\"arco-picker-suffix\\\\\">\n        <!--v-if--><span class=\\\\\"arco-picker-suffix-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-calendar\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M7 22h34M14 5v8m20-8v8M8 41h32a1 1 0 0 0 1-1V10a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v30a1 1 0 0 0 1 1Z\\\\\"></path></svg></span>\n        <!--v-if-->\n      </div>\n    </div>\n    <!---->\n  </div>\n  <div class=\\\\\"arco-picker arco-picker-range arco-picker-size-medium arco-picker-has-prefix\\\\\" style=\\\\\"width: 400px; margin-top: 20px;\\\\\" visible=\\\\\"false\\\\\">\n    <div class=\\\\\"arco-picker-prefix\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-info-circle\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n        <path d=\\\\\"M24 20v14m0-16v-4m18 10c0 9.941-8.059 18-18 18S6 33.941 6 24 14.059 6 24 6s18 8.059 18 18Z\\\\\"></path>\n      </svg></div>\n    <div class=\\\\\"arco-picker-input arco-picker-input-active\\\\\"><input placeholder=\\\\\"开始日期\\\\\" value=\\\\\"2019-08-08 00:00:00\\\\\"></div><span class=\\\\\"arco-picker-separator\\\\\">-</span>\n    <div class=\\\\\"arco-picker-input\\\\\"><input placeholder=\\\\\"结束日期\\\\\" value=\\\\\"2019-08-18 00:00:00\\\\\"></div>\n    <div class=\\\\\"arco-picker-suffix\\\\\"><span class=\\\\\"arco-icon-hover arco-picker-icon-hover arco-picker-clear-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-close\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M9.857 9.858 24 24m0 0 14.142 14.142M24 24 38.142 9.858M24 24 9.857 38.142\\\\\"></path></svg></span><span class=\\\\\"arco-picker-suffix-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-calendar\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M7 22h34M14 5v8m20-8v8M8 41h32a1 1 0 0 0 1-1V10a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v30a1 1 0 0 0 1 1Z\\\\\"></path></svg></span>\n      <!--v-if-->\n    </div>\n  </div>\n  <!---->\n</div>\"\n`;\n\nexports[`<date-picker> demo: render [quarter] correctly 1`] = `\n\"<div class=\\\\\"arco-picker arco-picker-size-medium\\\\\" style=\\\\\"width: 200px;\\\\\" visible=\\\\\"false\\\\\">\n  <!--v-if-->\n  <div class=\\\\\"arco-picker-input\\\\\"><input placeholder=\\\\\"请选择季度\\\\\" class=\\\\\"arco-picker-start-time\\\\\"></div>\n  <div class=\\\\\"arco-picker-suffix\\\\\">\n    <!--v-if--><span class=\\\\\"arco-picker-suffix-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-calendar\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M7 22h34M14 5v8m20-8v8M8 41h32a1 1 0 0 0 1-1V10a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v30a1 1 0 0 0 1 1Z\\\\\"></path></svg></span>\n    <!--v-if-->\n  </div>\n</div>\"\n`;\n\nexports[`<date-picker> demo: render [range] correctly 1`] = `\n\"<div class=\\\\\"arco-picker arco-picker-range arco-picker-size-medium\\\\\" style=\\\\\"width: 254px; margin-bottom: 20px;\\\\\" visible=\\\\\"false\\\\\">\n  <!--v-if-->\n  <div class=\\\\\"arco-picker-input arco-picker-input-active\\\\\"><input placeholder=\\\\\"开始日期\\\\\"></div><span class=\\\\\"arco-picker-separator\\\\\">-</span>\n  <div class=\\\\\"arco-picker-input\\\\\"><input placeholder=\\\\\"结束日期\\\\\"></div>\n  <div class=\\\\\"arco-picker-suffix\\\\\">\n    <!--v-if--><span class=\\\\\"arco-picker-suffix-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-calendar\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M7 22h34M14 5v8m20-8v8M8 41h32a1 1 0 0 0 1-1V10a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v30a1 1 0 0 0 1 1Z\\\\\"></path></svg></span>\n    <!--v-if-->\n  </div>\n</div>\n<br>\n<div class=\\\\\"arco-picker arco-picker-range arco-picker-size-medium\\\\\" style=\\\\\"width: 254px; margin-bottom: 20px;\\\\\" visible=\\\\\"false\\\\\">\n  <!--v-if-->\n  <div class=\\\\\"arco-picker-input arco-picker-input-active\\\\\"><input placeholder=\\\\\"开始周\\\\\"></div><span class=\\\\\"arco-picker-separator\\\\\">-</span>\n  <div class=\\\\\"arco-picker-input\\\\\"><input placeholder=\\\\\"结束周\\\\\"></div>\n  <div class=\\\\\"arco-picker-suffix\\\\\">\n    <!--v-if--><span class=\\\\\"arco-picker-suffix-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-calendar\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M7 22h34M14 5v8m20-8v8M8 41h32a1 1 0 0 0 1-1V10a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v30a1 1 0 0 0 1 1Z\\\\\"></path></svg></span>\n    <!--v-if-->\n  </div>\n</div>\n<br>\n<div class=\\\\\"arco-picker arco-picker-range arco-picker-size-medium\\\\\" style=\\\\\"width: 254px; margin-bottom: 20px;\\\\\" visible=\\\\\"false\\\\\">\n  <!--v-if-->\n  <div class=\\\\\"arco-picker-input arco-picker-input-active\\\\\"><input placeholder=\\\\\"开始月份\\\\\"></div><span class=\\\\\"arco-picker-separator\\\\\">-</span>\n  <div class=\\\\\"arco-picker-input\\\\\"><input placeholder=\\\\\"结束月份\\\\\"></div>\n  <div class=\\\\\"arco-picker-suffix\\\\\">\n    <!--v-if--><span class=\\\\\"arco-picker-suffix-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-calendar\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M7 22h34M14 5v8m20-8v8M8 41h32a1 1 0 0 0 1-1V10a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v30a1 1 0 0 0 1 1Z\\\\\"></path></svg></span>\n    <!--v-if-->\n  </div>\n</div>\n<br>\n<div class=\\\\\"arco-picker arco-picker-range arco-picker-size-medium\\\\\" style=\\\\\"width: 254px; margin-bottom: 20px;\\\\\" visible=\\\\\"false\\\\\">\n  <!--v-if-->\n  <div class=\\\\\"arco-picker-input arco-picker-input-active\\\\\"><input placeholder=\\\\\"开始年份\\\\\"></div><span class=\\\\\"arco-picker-separator\\\\\">-</span>\n  <div class=\\\\\"arco-picker-input\\\\\"><input placeholder=\\\\\"结束年份\\\\\"></div>\n  <div class=\\\\\"arco-picker-suffix\\\\\">\n    <!--v-if--><span class=\\\\\"arco-picker-suffix-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-calendar\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M7 22h34M14 5v8m20-8v8M8 41h32a1 1 0 0 0 1-1V10a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v30a1 1 0 0 0 1 1Z\\\\\"></path></svg></span>\n    <!--v-if-->\n  </div>\n</div>\n<br>\n<div class=\\\\\"arco-picker arco-picker-range arco-picker-size-medium\\\\\" style=\\\\\"width: 254px; margin-bottom: 20px;\\\\\" visible=\\\\\"false\\\\\">\n  <!--v-if-->\n  <div class=\\\\\"arco-picker-input arco-picker-input-active\\\\\"><input placeholder=\\\\\"开始季度\\\\\"></div><span class=\\\\\"arco-picker-separator\\\\\">-</span>\n  <div class=\\\\\"arco-picker-input\\\\\"><input placeholder=\\\\\"结束季度\\\\\"></div>\n  <div class=\\\\\"arco-picker-suffix\\\\\">\n    <!--v-if--><span class=\\\\\"arco-picker-suffix-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-calendar\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M7 22h34M14 5v8m20-8v8M8 41h32a1 1 0 0 0 1-1V10a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v30a1 1 0 0 0 1 1Z\\\\\"></path></svg></span>\n    <!--v-if-->\n  </div>\n</div>\n<br>\n<div class=\\\\\"arco-picker arco-picker-range arco-picker-size-medium\\\\\" style=\\\\\"width: 380px;\\\\\" visible=\\\\\"false\\\\\">\n  <!--v-if-->\n  <div class=\\\\\"arco-picker-input arco-picker-input-active\\\\\"><input placeholder=\\\\\"开始日期\\\\\"></div><span class=\\\\\"arco-picker-separator\\\\\">-</span>\n  <div class=\\\\\"arco-picker-input\\\\\"><input placeholder=\\\\\"结束日期\\\\\"></div>\n  <div class=\\\\\"arco-picker-suffix\\\\\">\n    <!--v-if--><span class=\\\\\"arco-picker-suffix-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-calendar\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M7 22h34M14 5v8m20-8v8M8 41h32a1 1 0 0 0 1-1V10a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v30a1 1 0 0 0 1 1Z\\\\\"></path></svg></span>\n    <!--v-if-->\n  </div>\n</div>\"\n`;\n\nexports[`<date-picker> demo: render [shortcuts] correctly 1`] = `\n\"<div class=\\\\\"arco-picker arco-picker-size-medium\\\\\" style=\\\\\"width: 300px; margin-bottom: 24px; margin-right: 24px;\\\\\" visible=\\\\\"false\\\\\">\n  <!--v-if-->\n  <div class=\\\\\"arco-picker-input\\\\\"><input placeholder=\\\\\"请选择日期\\\\\" class=\\\\\"arco-picker-start-time\\\\\"></div>\n  <div class=\\\\\"arco-picker-suffix\\\\\">\n    <!--v-if--><span class=\\\\\"arco-picker-suffix-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-calendar\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M7 22h34M14 5v8m20-8v8M8 41h32a1 1 0 0 0 1-1V10a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v30a1 1 0 0 0 1 1Z\\\\\"></path></svg></span>\n    <!--v-if-->\n  </div>\n</div>\n<div class=\\\\\"arco-picker arco-picker-size-medium\\\\\" style=\\\\\"width: 300px; margin-bottom: 24px; margin-right: 24px;\\\\\" visible=\\\\\"false\\\\\">\n  <!--v-if-->\n  <div class=\\\\\"arco-picker-input\\\\\"><input placeholder=\\\\\"请选择月份\\\\\" class=\\\\\"arco-picker-start-time\\\\\"></div>\n  <div class=\\\\\"arco-picker-suffix\\\\\">\n    <!--v-if--><span class=\\\\\"arco-picker-suffix-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-calendar\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M7 22h34M14 5v8m20-8v8M8 41h32a1 1 0 0 0 1-1V10a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v30a1 1 0 0 0 1 1Z\\\\\"></path></svg></span>\n    <!--v-if-->\n  </div>\n</div>\n<div class=\\\\\"arco-picker arco-picker-range arco-picker-size-medium\\\\\" style=\\\\\"width: 400px; margin-bottom: 24px; margin-right: 24px;\\\\\" visible=\\\\\"false\\\\\">\n  <!--v-if-->\n  <div class=\\\\\"arco-picker-input arco-picker-input-active\\\\\"><input placeholder=\\\\\"开始日期\\\\\"></div><span class=\\\\\"arco-picker-separator\\\\\">-</span>\n  <div class=\\\\\"arco-picker-input\\\\\"><input placeholder=\\\\\"结束日期\\\\\"></div>\n  <div class=\\\\\"arco-picker-suffix\\\\\">\n    <!--v-if--><span class=\\\\\"arco-picker-suffix-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-calendar\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M7 22h34M14 5v8m20-8v8M8 41h32a1 1 0 0 0 1-1V10a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v30a1 1 0 0 0 1 1Z\\\\\"></path></svg></span>\n    <!--v-if-->\n  </div>\n</div>\n<div class=\\\\\"arco-picker arco-picker-range arco-picker-size-medium\\\\\" style=\\\\\"width: 300px; margin-bottom: 24px;\\\\\" visible=\\\\\"false\\\\\">\n  <!--v-if-->\n  <div class=\\\\\"arco-picker-input arco-picker-input-active\\\\\"><input placeholder=\\\\\"开始月份\\\\\"></div><span class=\\\\\"arco-picker-separator\\\\\">-</span>\n  <div class=\\\\\"arco-picker-input\\\\\"><input placeholder=\\\\\"结束月份\\\\\"></div>\n  <div class=\\\\\"arco-picker-suffix\\\\\">\n    <!--v-if--><span class=\\\\\"arco-picker-suffix-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-calendar\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M7 22h34M14 5v8m20-8v8M8 41h32a1 1 0 0 0 1-1V10a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v30a1 1 0 0 0 1 1Z\\\\\"></path></svg></span>\n    <!--v-if-->\n  </div>\n</div>\"\n`;\n\nexports[`<date-picker> demo: render [shortcuts-position] correctly 1`] = `\n\"<div class=\\\\\"arco-picker arco-picker-size-medium\\\\\" style=\\\\\"width: 254px; margin-bottom: 20px; margin-right: 24px;\\\\\" visible=\\\\\"false\\\\\">\n  <!--v-if-->\n  <div class=\\\\\"arco-picker-input\\\\\"><input placeholder=\\\\\"请选择日期\\\\\" class=\\\\\"arco-picker-start-time\\\\\"></div>\n  <div class=\\\\\"arco-picker-suffix\\\\\">\n    <!--v-if--><span class=\\\\\"arco-picker-suffix-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-calendar\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M7 22h34M14 5v8m20-8v8M8 41h32a1 1 0 0 0 1-1V10a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v30a1 1 0 0 0 1 1Z\\\\\"></path></svg></span>\n    <!--v-if-->\n  </div>\n</div>\n<div class=\\\\\"arco-picker arco-picker-range arco-picker-size-medium\\\\\" style=\\\\\"width: 300px; margin-bottom: 20px;\\\\\" visible=\\\\\"false\\\\\">\n  <!--v-if-->\n  <div class=\\\\\"arco-picker-input arco-picker-input-active\\\\\"><input placeholder=\\\\\"开始日期\\\\\"></div><span class=\\\\\"arco-picker-separator\\\\\">-</span>\n  <div class=\\\\\"arco-picker-input\\\\\"><input placeholder=\\\\\"结束日期\\\\\"></div>\n  <div class=\\\\\"arco-picker-suffix\\\\\">\n    <!--v-if--><span class=\\\\\"arco-picker-suffix-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-calendar\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M7 22h34M14 5v8m20-8v8M8 41h32a1 1 0 0 0 1-1V10a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v30a1 1 0 0 0 1 1Z\\\\\"></path></svg></span>\n    <!--v-if-->\n  </div>\n</div>\n<br>\n<div class=\\\\\"arco-picker arco-picker-size-medium\\\\\" style=\\\\\"width: 254px; margin-right: 24px;\\\\\" visible=\\\\\"false\\\\\">\n  <!--v-if-->\n  <div class=\\\\\"arco-picker-input\\\\\"><input placeholder=\\\\\"请选择日期\\\\\" class=\\\\\"arco-picker-start-time\\\\\"></div>\n  <div class=\\\\\"arco-picker-suffix\\\\\">\n    <!--v-if--><span class=\\\\\"arco-picker-suffix-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-calendar\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M7 22h34M14 5v8m20-8v8M8 41h32a1 1 0 0 0 1-1V10a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v30a1 1 0 0 0 1 1Z\\\\\"></path></svg></span>\n    <!--v-if-->\n  </div>\n</div>\n<div class=\\\\\"arco-picker arco-picker-range arco-picker-size-medium\\\\\" style=\\\\\"width: 300px;\\\\\" visible=\\\\\"false\\\\\">\n  <!--v-if-->\n  <div class=\\\\\"arco-picker-input arco-picker-input-active\\\\\"><input placeholder=\\\\\"开始日期\\\\\"></div><span class=\\\\\"arco-picker-separator\\\\\">-</span>\n  <div class=\\\\\"arco-picker-input\\\\\"><input placeholder=\\\\\"结束日期\\\\\"></div>\n  <div class=\\\\\"arco-picker-suffix\\\\\">\n    <!--v-if--><span class=\\\\\"arco-picker-suffix-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-calendar\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M7 22h34M14 5v8m20-8v8M8 41h32a1 1 0 0 0 1-1V10a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v30a1 1 0 0 0 1 1Z\\\\\"></path></svg></span>\n    <!--v-if-->\n  </div>\n</div>\"\n`;\n\nexports[`<date-picker> demo: render [showtime] correctly 1`] = `\n\"<div class=\\\\\"arco-picker arco-picker-size-medium\\\\\" style=\\\\\"width: 220px; margin: 0px 24px 24px 0px;\\\\\" visible=\\\\\"false\\\\\">\n  <!--v-if-->\n  <div class=\\\\\"arco-picker-input\\\\\"><input placeholder=\\\\\"请选择日期\\\\\" class=\\\\\"arco-picker-start-time\\\\\"></div>\n  <div class=\\\\\"arco-picker-suffix\\\\\">\n    <!--v-if--><span class=\\\\\"arco-picker-suffix-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-calendar\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M7 22h34M14 5v8m20-8v8M8 41h32a1 1 0 0 0 1-1V10a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v30a1 1 0 0 0 1 1Z\\\\\"></path></svg></span>\n    <!--v-if-->\n  </div>\n</div>\n<div class=\\\\\"arco-picker arco-picker-size-medium\\\\\" style=\\\\\"width: 220px; margin: 0px 24px 24px 0px;\\\\\" visible=\\\\\"false\\\\\">\n  <!--v-if-->\n  <div class=\\\\\"arco-picker-input\\\\\"><input placeholder=\\\\\"请选择日期\\\\\" class=\\\\\"arco-picker-start-time\\\\\"></div>\n  <div class=\\\\\"arco-picker-suffix\\\\\">\n    <!--v-if--><span class=\\\\\"arco-picker-suffix-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-calendar\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M7 22h34M14 5v8m20-8v8M8 41h32a1 1 0 0 0 1-1V10a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v30a1 1 0 0 0 1 1Z\\\\\"></path></svg></span>\n    <!--v-if-->\n  </div>\n</div>\n<div class=\\\\\"arco-picker arco-picker-range arco-picker-size-medium\\\\\" style=\\\\\"width: 360px; margin: 0px 24px 24px 0px;\\\\\" visible=\\\\\"false\\\\\">\n  <!--v-if-->\n  <div class=\\\\\"arco-picker-input arco-picker-input-active\\\\\"><input placeholder=\\\\\"开始日期\\\\\"></div><span class=\\\\\"arco-picker-separator\\\\\">-</span>\n  <div class=\\\\\"arco-picker-input\\\\\"><input placeholder=\\\\\"结束日期\\\\\"></div>\n  <div class=\\\\\"arco-picker-suffix\\\\\">\n    <!--v-if--><span class=\\\\\"arco-picker-suffix-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-calendar\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M7 22h34M14 5v8m20-8v8M8 41h32a1 1 0 0 0 1-1V10a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v30a1 1 0 0 0 1 1Z\\\\\"></path></svg></span>\n    <!--v-if-->\n  </div>\n</div>\"\n`;\n\nexports[`<date-picker> demo: render [size] correctly 1`] = `\n\"<div style=\\\\\"margin-bottom: 20px;\\\\\"><span class=\\\\\"arco-radio-group-button arco-radio-group-size-medium arco-radio-group-direction-horizontal\\\\\"><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"mini\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">mini</span></label><label class=\\\\\"arco-radio-button arco-radio-checked\\\\\"><input type=\\\\\"radio\\\\\" checked=\\\\\"\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"small\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">small</span></label><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"medium\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">medium</span></label><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"large\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">large</span></label></span></div>\n<div class=\\\\\"arco-picker arco-picker-size-small\\\\\" style=\\\\\"width: 254px;\\\\\" visible=\\\\\"false\\\\\">\n  <!--v-if-->\n  <div class=\\\\\"arco-picker-input\\\\\"><input placeholder=\\\\\"请选择日期\\\\\" class=\\\\\"arco-picker-start-time\\\\\"></div>\n  <div class=\\\\\"arco-picker-suffix\\\\\">\n    <!--v-if--><span class=\\\\\"arco-picker-suffix-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-calendar\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M7 22h34M14 5v8m20-8v8M8 41h32a1 1 0 0 0 1-1V10a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v30a1 1 0 0 0 1 1Z\\\\\"></path></svg></span>\n    <!--v-if-->\n  </div>\n</div>\"\n`;\n\nexports[`<date-picker> demo: render [trigger-element] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 8px; row-gap: 8px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n      <!--v-if-->请选择日期\n    </button>\n    <!---->\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n      <!--v-if-->请选择日期范围\n    </button>\n    <!---->\n  </div>\n</div>\"\n`;\n\nexports[`<date-picker> demo: render [week] correctly 1`] = `\n\"<div class=\\\\\"arco-picker arco-picker-size-medium\\\\\" style=\\\\\"width: 200px; margin: 0px 24px 24px 0px;\\\\\" visible=\\\\\"false\\\\\">\n  <!--v-if-->\n  <div class=\\\\\"arco-picker-input\\\\\"><input placeholder=\\\\\"请选择周\\\\\" class=\\\\\"arco-picker-start-time\\\\\"></div>\n  <div class=\\\\\"arco-picker-suffix\\\\\">\n    <!--v-if--><span class=\\\\\"arco-picker-suffix-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-calendar\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M7 22h34M14 5v8m20-8v8M8 41h32a1 1 0 0 0 1-1V10a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v30a1 1 0 0 0 1 1Z\\\\\"></path></svg></span>\n    <!--v-if-->\n  </div>\n</div>\n<div class=\\\\\"arco-picker arco-picker-size-medium\\\\\" style=\\\\\"width: 200px; margin: 0px 24px 24px 0px;\\\\\" visible=\\\\\"false\\\\\">\n  <!--v-if-->\n  <div class=\\\\\"arco-picker-input\\\\\"><input placeholder=\\\\\"请选择周\\\\\" class=\\\\\"arco-picker-start-time\\\\\"></div>\n  <div class=\\\\\"arco-picker-suffix\\\\\">\n    <!--v-if--><span class=\\\\\"arco-picker-suffix-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-calendar\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M7 22h34M14 5v8m20-8v8M8 41h32a1 1 0 0 0 1-1V10a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v30a1 1 0 0 0 1 1Z\\\\\"></path></svg></span>\n    <!--v-if-->\n  </div>\n</div>\"\n`;\n\nexports[`<date-picker> demo: render [year] correctly 1`] = `\n\"<div class=\\\\\"arco-picker arco-picker-size-medium\\\\\" style=\\\\\"width: 200px;\\\\\" visible=\\\\\"false\\\\\">\n  <!--v-if-->\n  <div class=\\\\\"arco-picker-input\\\\\"><input placeholder=\\\\\"请选择年份\\\\\" class=\\\\\"arco-picker-start-time\\\\\"></div>\n  <div class=\\\\\"arco-picker-suffix\\\\\">\n    <!--v-if--><span class=\\\\\"arco-picker-suffix-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-calendar\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M7 22h34M14 5v8m20-8v8M8 41h32a1 1 0 0 0 1-1V10a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v30a1 1 0 0 0 1 1Z\\\\\"></path></svg></span>\n    <!--v-if-->\n  </div>\n</div>\"\n`;\n"
  },
  {
    "path": "packages/web-vue/components/date-picker/__test__/demo.test.ts",
    "content": "import demoTest from '../../../scripts/demo-test';\n\ndemoTest('date-picker');\n"
  },
  {
    "path": "packages/web-vue/components/date-picker/context.ts",
    "content": "import { InjectionKey } from 'vue';\n\nexport const PickerInjectionKey: InjectionKey<string> =\n  Symbol('PickerInjectionKey');\n\nexport type PickerContext = Readonly<{\n  datePickerT: (key: string, ...args: any[]) => any;\n}>;\n"
  },
  {
    "path": "packages/web-vue/components/date-picker/hooks/use-cell-class-name.ts",
    "content": "import { Dayjs } from 'dayjs';\nimport { computed, toRefs } from 'vue';\nimport { Cell, IsSameTime, Mode } from '../interface';\nimport { getNow, getSortedDayjsArray } from '../../_utils/date';\nimport { isDayjs } from '../../_utils/is';\n\ninterface CellClassNameProps {\n  prefixCls: string;\n  value?: Dayjs;\n  rangeValues?: Array<Dayjs | undefined>;\n  isSameTime: IsSameTime;\n  mode?: Mode;\n}\n\nexport default function useCellClassName(props: CellClassNameProps) {\n  const { rangeValues } = toRefs(props);\n\n  const sortedRangeValues = computed(() =>\n    rangeValues?.value && rangeValues.value.every(isDayjs)\n      ? getSortedDayjsArray(rangeValues.value)\n      : rangeValues?.value\n  );\n  const rangeStart = computed(() => sortedRangeValues.value?.[0]);\n  const rangeEnd = computed(() => sortedRangeValues.value?.[1]);\n\n  return {\n    getCellClassName: (cellData: Cell, disabled: boolean) => {\n      const { value, isSameTime, mode, prefixCls } = props;\n\n      const isInView = !cellData.isPrev && !cellData.isNext;\n\n      const isSelected = value && isSameTime(cellData.value, value);\n\n      let isToday = isSameTime(cellData.value, getNow());\n      if (mode === 'week') {\n        isToday = getNow().isSame(cellData.value, 'date');\n      }\n\n      const isRangeStart =\n        isInView &&\n        rangeStart.value &&\n        isSameTime(cellData.value, rangeStart.value);\n\n      const isRangeEnd =\n        isInView &&\n        rangeEnd.value &&\n        isSameTime(cellData.value, rangeEnd.value);\n\n      const isInRange =\n        isInView &&\n        rangeStart.value &&\n        rangeEnd.value &&\n        (isRangeStart ||\n          isRangeEnd ||\n          cellData.value.isBetween(\n            rangeStart.value,\n            rangeEnd.value,\n            null,\n            '[]'\n          ));\n\n      return [\n        `${prefixCls}-cell`,\n        {\n          [`${prefixCls}-cell-in-view`]: isInView,\n          [`${prefixCls}-cell-today`]: isToday,\n          [`${prefixCls}-cell-selected`]: isSelected,\n          [`${prefixCls}-cell-range-start`]: isRangeStart,\n          [`${prefixCls}-cell-range-end`]: isRangeEnd,\n          [`${prefixCls}-cell-in-range`]: isInRange,\n          [`${prefixCls}-cell-disabled`]: disabled,\n        },\n        cellData.classNames,\n      ];\n    },\n  };\n}\n"
  },
  {
    "path": "packages/web-vue/components/date-picker/hooks/use-format.ts",
    "content": "import { computed, toRefs } from 'vue';\nimport { isFunction } from '../../_utils/is';\nimport { Mode, FormatFunc, ValueFormat } from '../interface';\n\ninterface FormatProps {\n  format?: string | FormatFunc;\n  valueFormat?: ValueFormat;\n  mode?: Mode;\n  showTime?: boolean;\n}\n\nexport function getDefaultFormat(mode: Mode = 'date', showTime = false) {\n  switch (mode) {\n    case 'date':\n      return showTime ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD';\n    case 'month':\n      return 'YYYY-MM';\n    case 'year':\n      return 'YYYY';\n    case 'week':\n      return 'gggg-wo';\n    case 'quarter':\n      return 'YYYY-[Q]Q';\n    default:\n      return 'YYYY-MM-DD';\n  }\n}\n\nexport function getDefaultValueFormat(mode: Mode = 'date', showTime = false) {\n  switch (mode) {\n    case 'date':\n      return showTime ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD';\n    case 'month':\n      return 'YYYY-MM';\n    case 'year':\n      return 'YYYY';\n    case 'week':\n      return 'YYYY-MM-DD';\n    case 'quarter':\n      return 'YYYY-MM';\n    default:\n      return 'YYYY-MM-DD';\n  }\n}\n\nexport default function useFormat(props: FormatProps) {\n  const {\n    format: propFormat,\n    mode,\n    showTime,\n    valueFormat: propValueFormat,\n  } = toRefs(props);\n\n  const format = computed(\n    () =>\n      (!isFunction(propFormat?.value) && propFormat?.value) ||\n      getDefaultFormat(mode?.value, showTime?.value)\n  );\n\n  const valueFormat = computed(\n    () =>\n      propValueFormat?.value ||\n      getDefaultValueFormat(mode?.value, showTime?.value)\n  );\n\n  const parseValueFormat = computed(() =>\n    ['timestamp', 'Date'].includes(valueFormat.value)\n      ? format.value\n      : valueFormat.value\n  );\n\n  return {\n    format,\n    valueFormat,\n    parseValueFormat,\n  };\n}\n"
  },
  {
    "path": "packages/web-vue/components/date-picker/hooks/use-header-value.ts",
    "content": "import { Dayjs } from 'dayjs';\nimport { computed, reactive, ComputedRef, toRefs, watch, ref } from 'vue';\nimport { getDayjsValue, getNow, methods } from '../../_utils/date';\nimport { Mode, HeaderOperations, CalendarValue } from '../interface';\nimport usePanelSpan from './use-panel-span';\n\ninterface HeaderValueProps {\n  mode?: Mode;\n  value?: CalendarValue;\n  defaultValue?: CalendarValue;\n  selectedValue?: Dayjs;\n  format: string;\n  onChange?: (newVal: Dayjs) => void;\n}\n\nexport default function useHeaderValue(props: HeaderValueProps): {\n  headerValue: ComputedRef<Dayjs>;\n  setHeaderValue: (val: Dayjs | undefined, emitChange?: boolean) => void;\n  headerOperations: ComputedRef<HeaderOperations>;\n  resetHeaderValue: (emitChange?: boolean) => void;\n  getDefaultLocalValue: () => Dayjs;\n} {\n  const { mode, value, defaultValue, selectedValue, format, onChange } =\n    toRefs(props);\n\n  const computedMode = computed(() => mode?.value || 'date');\n\n  const { span, superSpan } = usePanelSpan(\n    reactive({\n      mode: computedMode,\n    })\n  );\n\n  const isSame = (current: Dayjs, target: Dayjs) => {\n    const unit =\n      computedMode.value === 'date' || computedMode.value === 'week'\n        ? 'M'\n        : 'y';\n    return current.isSame(target, unit);\n  };\n\n  const computedValue = computed(() =>\n    getDayjsValue(value?.value, format.value)\n  );\n\n  const computedDefaultValue = computed(() =>\n    getDayjsValue(defaultValue?.value, format.value)\n  );\n\n  const localValue = ref(computedDefaultValue.value || getNow());\n  const headerValue = computed(() => computedValue.value || localValue.value);\n\n  const setLocalValue = (newVal: Dayjs | undefined) => {\n    if (!newVal) return;\n    localValue.value = newVal;\n  };\n\n  const setHeaderValue = (newVal: Dayjs | undefined, emitChange = true) => {\n    if (!newVal) return;\n    if (emitChange && !isSame(headerValue.value, newVal)) {\n      onChange?.value?.(newVal);\n    }\n    setLocalValue(newVal);\n  };\n\n  // Additional processing of selectedValue\n  if (selectedValue?.value) {\n    setLocalValue(selectedValue.value);\n  }\n  watch(\n    () => selectedValue?.value,\n    (newVal) => {\n      setHeaderValue(newVal);\n    }\n  );\n\n  function getDefaultLocalValue() {\n    return selectedValue?.value || computedDefaultValue.value || getNow();\n  }\n  function resetHeaderValue(emitChange = true) {\n    const defaultLocalValue = getDefaultLocalValue();\n    if (emitChange) {\n      setHeaderValue(defaultLocalValue);\n    } else {\n      setLocalValue(defaultLocalValue);\n    }\n  }\n\n  const showSingleBtn = computed(() => span.value !== superSpan.value);\n\n  const headerOperations = computed(() => ({\n    onSuperPrev: () => {\n      setHeaderValue(methods.subtract(headerValue.value, superSpan.value, 'M'));\n    },\n    onPrev: showSingleBtn.value\n      ? () => {\n          setHeaderValue(methods.subtract(headerValue.value, span.value, 'M'));\n        }\n      : undefined,\n    onNext: showSingleBtn.value\n      ? () => {\n          setHeaderValue(methods.add(headerValue.value, span.value, 'M'));\n        }\n      : undefined,\n    onSuperNext: () => {\n      setHeaderValue(methods.add(headerValue.value, superSpan.value, 'M'));\n    },\n  }));\n\n  return {\n    headerValue,\n    setHeaderValue,\n    headerOperations,\n    resetHeaderValue,\n    getDefaultLocalValue,\n  };\n}\n"
  },
  {
    "path": "packages/web-vue/components/date-picker/hooks/use-inject-datepicker-transform.ts",
    "content": "import { inject } from 'vue';\nimport { PickerContext, PickerInjectionKey } from '../context';\n\nexport default function useDatePickerTransform() {\n  const { datePickerT } = inject<PickerContext>(PickerInjectionKey) || {};\n\n  // eslint-disable-next-line\n  return datePickerT || ((key: string, ...args: any[]) => key);\n}\n"
  },
  {
    "path": "packages/web-vue/components/date-picker/hooks/use-is-disabled-date.ts",
    "content": "import { computed, toRefs } from 'vue';\nimport { Dayjs } from 'dayjs';\nimport {\n  DisabledDate,\n  DisabledTime,\n  RangeDisabledDate,\n  RangeDisabledTime,\n} from '../interface';\nimport { getDateValue } from '../../_utils/date';\n\ninterface IsDisabledProps {\n  mode?: string;\n  showTime?: boolean;\n  disabledDate?: DisabledDate | RangeDisabledDate;\n  disabledTime?: DisabledTime | RangeDisabledTime;\n  isRange?: boolean;\n}\n\nexport default function useIsDisabledDate(props: IsDisabledProps) {\n  const { mode, showTime, disabledDate, disabledTime, isRange } = toRefs(props);\n  const needCheckTime = computed(\n    () => mode?.value === 'date' && showTime?.value\n  );\n  const isDisabledDate = computed(() => {\n    return (current: Dayjs, type: 'start' | 'end') => {\n      if (!disabledDate?.value) return false;\n\n      const dateValue = getDateValue(current);\n\n      if (isRange?.value)\n        return (disabledDate.value as RangeDisabledDate)(dateValue, type);\n      return (disabledDate.value as DisabledDate)(dateValue);\n    };\n  });\n\n  const isDisabledItem = (num: number, getDisabledList?: () => number[]) => {\n    const list = getDisabledList?.() || [];\n    return list.includes(num);\n  };\n\n  const isDisabledTime = computed(() => {\n    return (current: Dayjs, type: 'start' | 'end') => {\n      if (!needCheckTime.value) return false;\n      if (!disabledTime?.value) return false;\n\n      const dateValue = getDateValue(current);\n\n      const disabledTimeProps = isRange?.value\n        ? (disabledTime.value as RangeDisabledTime)(dateValue, type)\n        : (disabledTime.value as DisabledTime)(dateValue);\n\n      return (\n        isDisabledItem(current.hour(), disabledTimeProps.disabledHours) ||\n        isDisabledItem(current.minute(), disabledTimeProps.disabledMinutes) ||\n        isDisabledItem(current.second(), disabledTimeProps.disabledSeconds)\n      );\n    };\n  });\n\n  return function isDisabled(value: Dayjs | undefined, type?: 'start' | 'end') {\n    return (\n      value &&\n      (isDisabledDate.value(value, type || 'start') ||\n        isDisabledTime.value(value, type || 'start'))\n    );\n  };\n}\n"
  },
  {
    "path": "packages/web-vue/components/date-picker/hooks/use-panel-span.ts",
    "content": "import { computed, toRefs, watch } from 'vue';\nimport { Mode } from '../interface';\n\ninterface PanelSpanProps {\n  mode: Mode;\n}\n\nexport default function usePanelSpan(props: PanelSpanProps) {\n  const { mode } = toRefs(props);\n\n  // 单个面板显示多少月份 | 单箭头跨越多少月份\n  const span = computed(\n    () =>\n      ({ date: 1, week: 1, year: 10 * 12, quarter: 12, month: 12 }[mode.value])\n  );\n\n  // 双箭头跨越多少个月份\n  const superSpan = computed(() =>\n    ['year'].includes(mode.value) ? 10 * 12 : 12\n  );\n\n  return {\n    span,\n    superSpan,\n  };\n}\n"
  },
  {
    "path": "packages/web-vue/components/date-picker/hooks/use-picker-state.ts",
    "content": "import { Dayjs } from 'dayjs';\nimport { computed, toRefs, watch } from 'vue';\nimport { getDayjsValue } from '../../_utils/date';\nimport { isUndefined } from '../../_utils/is';\nimport { CalendarValue } from '../interface';\nimport useState from '../../_hooks/use-state';\n\ninterface PickerStateProps {\n  modelValue: CalendarValue | undefined;\n  defaultValue: CalendarValue | undefined;\n  format: string;\n}\n\nexport default function usePickerState(props: PickerStateProps) {\n  const { modelValue, defaultValue, format } = toRefs(props);\n\n  const computedModelValue = computed(() => {\n    return getDayjsValue(modelValue.value, format.value);\n  });\n\n  const computedDefaultValue = computed(() => {\n    return getDayjsValue(defaultValue.value, format.value);\n  });\n\n  // Selected value maintained internally: dayjs\n  const [localValue, setLocalValue] = useState<Dayjs | undefined>(\n    !isUndefined(computedModelValue.value)\n      ? computedModelValue.value\n      : !isUndefined(computedDefaultValue.value)\n      ? computedDefaultValue.value\n      : undefined\n  );\n\n  watch(computedModelValue, () => {\n    if (isUndefined(computedModelValue.value)) {\n      setLocalValue(undefined);\n    }\n  });\n\n  // 混合的最终值：如果外部有传的话，就用外部的值，不然就使用内部维护的值\n  const mergeValue = computed(\n    () => computedModelValue.value || localValue.value\n  );\n\n  return {\n    value: mergeValue,\n    setValue: setLocalValue,\n  };\n}\n"
  },
  {
    "path": "packages/web-vue/components/date-picker/hooks/use-provide-datepicker-transform.ts",
    "content": "import { toRefs, provide } from 'vue';\nimport { dayjs } from '../../_utils/date';\nimport { useI18n } from '../../locale';\nimport { BasePickerProps } from '../interface';\nimport { getValueByPath } from '../../_utils/get-value-by-path';\nimport { PickerContext, PickerInjectionKey } from '../context';\n\ninterface DatePickerTransform {\n  locale?: BasePickerProps['locale'];\n}\n\nexport default function useDatePickerTransform(props: DatePickerTransform) {\n  const { locale } = toRefs(props);\n  const { locale: i18nLocale, t } = useI18n();\n  dayjs.locale(i18nLocale.value.toLowerCase());\n\n  const datePickerT: typeof t = (key: string, ...args: any[]): any => {\n    const keyForLocale = key.startsWith('datePicker.')\n      ? key.split('.').slice(1).join('.')\n      : key;\n\n    return getValueByPath(locale?.value || {}, keyForLocale) || t(key, ...args);\n  };\n\n  provide<PickerContext>(PickerInjectionKey, {\n    datePickerT,\n  });\n\n  return datePickerT;\n}\n"
  },
  {
    "path": "packages/web-vue/components/date-picker/hooks/use-range-header-value.ts",
    "content": "import { Dayjs } from 'dayjs';\nimport { computed, nextTick, reactive, toRefs, watch } from 'vue';\nimport pick from '../../_utils/pick';\nimport { getSortedDayjsArray, methods } from '../../_utils/date';\nimport { CalendarValue, Mode } from '../interface';\nimport usePanelSpan from './use-panel-span';\nimport useHeaderValue from './use-header-value';\n\ninterface RangeHeaderValueProps {\n  mode: Mode;\n  startHeaderMode?: Mode;\n  endHeaderMode?: Mode;\n  value: CalendarValue[] | undefined;\n  defaultValue: CalendarValue[] | undefined;\n  selectedValue: (Dayjs | undefined)[];\n  format: string;\n  onChange?: (newVal: Dayjs[]) => void;\n}\n\nexport default function useRangeHeaderValue(props: RangeHeaderValueProps) {\n  const {\n    startHeaderMode,\n    endHeaderMode,\n    mode,\n    value,\n    defaultValue,\n    selectedValue,\n    format,\n    onChange,\n  } = toRefs(props);\n\n  const isDateOrWeek = computed(() => ['date', 'week'].includes(mode.value));\n\n  const unit = computed(() => (isDateOrWeek.value ? 'M' : 'y'));\n\n  const isSame = (current: Dayjs, target: Dayjs) =>\n    current.isSame(target, unit.value);\n\n  const { span, superSpan } = usePanelSpan(\n    reactive({\n      mode,\n    })\n  );\n\n  const startMode = computed(() => startHeaderMode?.value || mode.value);\n  const endMode = computed(() => endHeaderMode?.value || mode.value);\n\n  const startValue = computed(() => value.value?.[0]);\n  const endValue = computed(() => value.value?.[1]);\n\n  const startDefaultValue = computed(() => defaultValue.value?.[0]);\n  const endDefaultValue = computed(() => defaultValue.value?.[1]);\n\n  const emitChange = (newVal: Dayjs[]) => {\n    onChange?.value && onChange.value(newVal);\n  };\n  const {\n    headerValue: startHeaderValue,\n    setHeaderValue: setStartHeaderValue,\n    headerOperations: startHeaderOperations,\n    getDefaultLocalValue: getDefaultStartHeaderValue,\n  } = useHeaderValue(\n    reactive({\n      mode: startMode,\n      value: startValue,\n      defaultValue: startDefaultValue,\n      selectedValue: undefined,\n      format,\n      onChange: (newVal: Dayjs) => {\n        emitChange([newVal, endHeaderValue.value]);\n      },\n    })\n  );\n\n  const {\n    headerValue: endHeaderValue,\n    setHeaderValue: setEndHeaderValue,\n    headerOperations: endHeaderOperations,\n    getDefaultLocalValue: getDefaultEndHeaderValue,\n  } = useHeaderValue(\n    reactive({\n      mode: endMode,\n      value: endValue,\n      defaultValue: endDefaultValue,\n      selectedValue: undefined,\n      format,\n      onChange: (newVal: Dayjs) => {\n        emitChange([startHeaderValue.value, newVal]);\n      },\n    })\n  );\n\n  const setHeaderValue = (newVal: Dayjs[]) => {\n    const isSameStartValue = isSame(startHeaderValue.value, newVal[0]);\n    const isSameEndValue = isSame(endHeaderValue.value, newVal[1]);\n\n    setStartHeaderValue(newVal[0], false);\n    setEndHeaderValue(newVal[1], false);\n\n    if (!isSameStartValue || !isSameEndValue) {\n      onChange?.value && onChange?.value(newVal);\n    }\n  };\n\n  function getFixedValue(values: Dayjs[]) {\n    // eslint-disable-next-line prefer-const\n    let [header0, header1] = getSortedDayjsArray(values);\n\n    const nextHeader = methods.add(header0, span.value, 'M');\n\n    if (header1.isBefore(nextHeader, unit.value)) {\n      header1 = nextHeader;\n    }\n\n    return [header0, header1];\n  }\n\n  function getFormSelectedValue() {\n    let selected0 = selectedValue.value?.[0];\n    let selected1 = selectedValue.value?.[1];\n\n    if (selected0 && selected1) {\n      [selected0, selected1] = getSortedDayjsArray([selected0, selected1]);\n    }\n\n    return [selected0, selected1];\n  }\n\n  // 1. 目前为此，在非受控情况下，start 和 end 的值是一样的，所以需要 fix 一下\n  // 2. 附加 selectedValue 处理\n  const [selected0, selected1] = getFormSelectedValue();\n  const [header0, header1] = getFixedValue([\n    selected0 || startHeaderValue.value,\n    selected1 || endHeaderValue.value,\n  ]);\n  setStartHeaderValue(header0, false);\n  setEndHeaderValue(header1, false);\n\n  const resetHeaderValue = () => {\n    const defaultStartHeaderValue = getDefaultStartHeaderValue();\n    const defaultEndHeaderValue = getDefaultEndHeaderValue();\n\n    // Because selectedValue is used, it may not be updated in time, so add nextTick\n    nextTick(() => {\n      const [selected0, selected1] = getFormSelectedValue();\n      const [header0, header1] = getFixedValue([\n        selected0 || defaultStartHeaderValue,\n        selected1 || defaultEndHeaderValue,\n      ]);\n      setHeaderValue([header0, header1]);\n    });\n  };\n\n  /** ************* 以下为操作 ****************** */\n\n  const canShortenMonth = computed(() =>\n    methods\n      .add(startHeaderValue.value, span.value, 'M')\n      .isBefore(endHeaderValue.value, unit.value)\n  );\n\n  const canShortenYear = computed(() =>\n    methods\n      .add(startHeaderValue.value, superSpan.value, 'M')\n      .isBefore(endHeaderValue.value, unit.value)\n  );\n\n  const computedStartHeaderOperations = computed(() => {\n    const operations = ['onSuperPrev'];\n    if (isDateOrWeek.value) operations.push('onPrev');\n    if (canShortenMonth.value && isDateOrWeek) operations.push('onNext');\n    if (canShortenYear.value) operations.push('onSuperNext');\n    return pick(startHeaderOperations.value as any, operations);\n  });\n\n  const computedEndHeaderOperations = computed(() => {\n    const operations = ['onSuperNext'];\n    if (isDateOrWeek.value) operations.push('onNext');\n    if (canShortenMonth.value && isDateOrWeek.value) operations.push('onPrev');\n    if (canShortenYear.value) operations.push('onSuperPrev');\n    return pick(endHeaderOperations.value as any, operations);\n  });\n\n  return {\n    startHeaderValue,\n    endHeaderValue,\n    startHeaderOperations: computedStartHeaderOperations,\n    endHeaderOperations: computedEndHeaderOperations,\n    setHeaderValue,\n    resetHeaderValue,\n  };\n}\n"
  },
  {
    "path": "packages/web-vue/components/date-picker/hooks/use-range-picker-state.ts",
    "content": "import { Dayjs } from 'dayjs';\nimport { computed, toRefs, watch } from 'vue';\nimport { normalizeRangeValue } from '../utils';\nimport { getDayjsValue } from '../../_utils/date';\nimport { isUndefined } from '../../_utils/is';\nimport { CalendarValue } from '../interface';\nimport useState from '../../_hooks/use-state';\n\ninterface PickerStateProps {\n  modelValue: (CalendarValue | undefined)[] | undefined;\n  defaultValue: (CalendarValue | undefined)[] | undefined;\n  format: string;\n}\n\nexport default function useRangePickerState(props: PickerStateProps) {\n  const { modelValue, defaultValue, format } = toRefs(props);\n\n  const computedModelValue = computed(() => {\n    return getDayjsValue(normalizeRangeValue(modelValue.value), format.value);\n  });\n\n  const computedDefaultValue = computed(() => {\n    return getDayjsValue(normalizeRangeValue(defaultValue.value), format.value);\n  });\n\n  // Selected value maintained internally: dayjs\n  const [localValue, setLocalValue] = useState<(Dayjs | undefined)[]>(\n    !isUndefined(computedModelValue.value)\n      ? computedModelValue.value\n      : !isUndefined(computedDefaultValue.value)\n      ? computedDefaultValue.value\n      : []\n  );\n\n  watch(computedModelValue, () => {\n    if (isUndefined(computedModelValue.value)) {\n      setLocalValue([]);\n    }\n  });\n\n  // 混合的最终值：如果外部有传的话，就用外部的值，不然就使用内部维护的值\n  const mergeValue = computed(\n    () => computedModelValue.value || localValue.value\n  );\n\n  return {\n    value: mergeValue,\n    setValue: setLocalValue,\n  };\n}\n"
  },
  {
    "path": "packages/web-vue/components/date-picker/hooks/use-range-time-picker-value.ts",
    "content": "import { reactive, toRefs, computed, ComputedRef } from 'vue';\nimport { Dayjs } from 'dayjs';\nimport { isArray } from '../../_utils/is';\nimport { TimePickerProps } from '../../time-picker/interface';\nimport useTimePickerValue from './use-time-picker-value';\n\ninterface RangeTimePickerValueProps {\n  timePickerProps?: Partial<TimePickerProps>;\n  selectedValue: Array<Dayjs | undefined> | undefined;\n}\nexport default function useRangeTimePickerValue(\n  props: RangeTimePickerValueProps\n): [\n  ComputedRef<Dayjs[]>,\n  (val: Array<Dayjs | undefined> | undefined) => void,\n  () => void\n] {\n  const { timePickerProps, selectedValue } = toRefs(props);\n\n  const startValue = computed(() => selectedValue?.value?.[0]);\n  const endValue = computed(() => selectedValue?.value?.[1]);\n\n  const timePickerDefaultValue = computed(\n    () => timePickerProps?.value?.defaultValue\n  );\n\n  const startTimePickerProps = computed(() =>\n    isArray(timePickerDefaultValue.value)\n      ? {\n          ...timePickerProps?.value,\n          defaultValue: timePickerDefaultValue.value[0],\n        }\n      : timePickerProps?.value\n  );\n  const endTimePickerProps = computed(() =>\n    isArray(timePickerDefaultValue.value)\n      ? {\n          ...timePickerProps?.value,\n          defaultValue: timePickerDefaultValue.value[1],\n        }\n      : timePickerProps?.value\n  );\n\n  const [startTimeValue, setStartTimeValue, resetStartTimeValue] =\n    useTimePickerValue(\n      reactive({\n        timePickerProps: startTimePickerProps,\n        selectedValue: startValue,\n      })\n    );\n\n  const [endTimeValue, setEndTimeValue, resetEndTimeValue] = useTimePickerValue(\n    reactive({\n      timePickerProps: endTimePickerProps,\n      selectedValue: endValue,\n    })\n  );\n\n  const rangeTimePickerValue = computed(() => [\n    startTimeValue.value,\n    endTimeValue.value,\n  ]);\n\n  function setTimeValue(val: Array<Dayjs | undefined> | undefined) {\n    if (!val) return;\n    setStartTimeValue(val[0]);\n    setEndTimeValue(val[1]);\n  }\n\n  function resetTimeValue() {\n    resetStartTimeValue();\n    resetEndTimeValue();\n  }\n\n  return [rangeTimePickerValue, setTimeValue, resetTimeValue];\n}\n"
  },
  {
    "path": "packages/web-vue/components/date-picker/hooks/use-time-picker-value.ts",
    "content": "import { reactive, toRefs, Ref, ref, watch, computed } from 'vue';\nimport { Dayjs } from 'dayjs';\nimport useTimeFormat from '../../time-picker/hooks/use-time-format';\nimport { getDayjsValue, getNow } from '../../_utils/date';\nimport { TimePickerProps, TimeValue } from '../../time-picker/interface';\n\ninterface TimePickerValueProps {\n  timePickerProps: Partial<TimePickerProps> | undefined;\n  selectedValue: Dayjs | undefined;\n}\nexport default function useTimePickerValue(\n  props: TimePickerValueProps\n): [Ref<Dayjs>, (val: Dayjs | undefined) => void, () => void] {\n  const { timePickerProps, selectedValue } = toRefs(props);\n\n  const timePickerPropsFormat = computed(() => timePickerProps?.value?.format);\n  const timePickerPropsUse12Hours = computed(\n    () => !!timePickerProps?.value?.use12Hours\n  );\n\n  const { format } = useTimeFormat(\n    reactive({\n      format: timePickerPropsFormat,\n      use12Hours: timePickerPropsUse12Hours,\n    })\n  );\n\n  const defaultTimePickerValue = computed(() =>\n    getDayjsValue(\n      timePickerProps?.value?.defaultValue as TimeValue | undefined,\n      format.value\n    )\n  );\n\n  const getDefaultValue = () =>\n    selectedValue?.value || defaultTimePickerValue.value || getNow();\n\n  const timePickerValue = ref(getDefaultValue());\n\n  function setTimePickerValue(val: Dayjs | undefined) {\n    if (val) {\n      timePickerValue.value = val;\n    }\n  }\n\n  function resetTimePickerValue() {\n    timePickerValue.value = getDefaultValue();\n  }\n\n  watch(selectedValue, (newVal) => {\n    setTimePickerValue(newVal);\n  });\n\n  return [timePickerValue, setTimePickerValue, resetTimePickerValue];\n}\n"
  },
  {
    "path": "packages/web-vue/components/date-picker/hooks/use-value-format.ts",
    "content": "import { Dayjs } from 'dayjs';\nimport { toRefs } from 'vue';\nimport { CalendarValue, ValueFormat } from '../interface';\n\nexport function getReturnValue(date: Dayjs, format: ValueFormat) {\n  if (format === 'timestamp') {\n    return date.toDate().getTime();\n  }\n  if (format === 'Date') {\n    return date.toDate();\n  }\n  return date.format(format);\n}\n\nexport function useReturnValue(props: { format: ValueFormat }) {\n  const { format } = toRefs(props);\n\n  return (date: Dayjs) => getReturnValue(date, format.value);\n}\n\nexport function getReturnRangeValue(\n  dates: Dayjs[],\n  format: ValueFormat\n): CalendarValue[];\nexport function getReturnRangeValue(\n  dates: (Dayjs | undefined)[],\n  format: ValueFormat\n): (CalendarValue | undefined)[];\nexport function getReturnRangeValue(\n  dates: (Dayjs | undefined)[],\n  format: ValueFormat\n) {\n  return dates.map((date) => (date ? getReturnValue(date, format) : undefined));\n}\n"
  },
  {
    "path": "packages/web-vue/components/date-picker/index.ts",
    "content": "import type { App } from 'vue';\nimport type { ArcoOptions } from '../_utils/types';\nimport { setGlobalConfig, getComponentPrefix } from '../_utils/global-config';\nimport _DatePicker from './pickers/date-picker';\nimport _WeekPicker from './pickers/week-picker';\nimport _MonthPicker from './pickers/month-picker';\nimport _YearPicker from './pickers/year-picker';\nimport _QuarterPicker from './pickers/quarter-picker';\nimport _RangePicker from './range-picker.vue';\n\nexport type { ShortcutType } from './interface';\n\nconst DatePicker = Object.assign(_DatePicker, {\n  WeekPicker: _WeekPicker,\n  MonthPicker: _MonthPicker,\n  YearPicker: _YearPicker,\n  QuarterPicker: _QuarterPicker,\n  RangePicker: _RangePicker,\n  install: (app: App, options?: ArcoOptions) => {\n    setGlobalConfig(app, options);\n    const componentPrefix = getComponentPrefix(options);\n\n    app.component(componentPrefix + _DatePicker.name, _DatePicker);\n    app.component(componentPrefix + _YearPicker.name, _YearPicker);\n    app.component(componentPrefix + _QuarterPicker.name, _QuarterPicker);\n    app.component(componentPrefix + _MonthPicker.name, _MonthPicker);\n    app.component(componentPrefix + _WeekPicker.name, _WeekPicker);\n    app.component(componentPrefix + _RangePicker.name, _RangePicker);\n  },\n});\n\nexport type DatePickerInstance = InstanceType<typeof _DatePicker>;\nexport type WeekPickerInstance = InstanceType<typeof _WeekPicker>;\nexport type MonthPickerInstance = InstanceType<typeof _MonthPicker>;\nexport type YearPickerInstance = InstanceType<typeof _YearPicker>;\nexport type QuarterPickerInstance = InstanceType<typeof _QuarterPicker>;\nexport type RangePickerInstance = InstanceType<typeof _RangePicker>;\n\nexport {\n  _WeekPicker as WeekPicker,\n  _MonthPicker as MonthPicker,\n  _YearPicker as YearPicker,\n  _QuarterPicker as QuarterPicker,\n  _RangePicker as RangePicker,\n};\n\nexport default DatePicker;\n"
  },
  {
    "path": "packages/web-vue/components/date-picker/interface.ts",
    "content": "import { Slot, VNode } from 'vue';\nimport { Dayjs } from 'dayjs';\nimport { TimePickerProps } from '../time-picker/interface';\n\nexport type CalendarValue = Date | string | number;\nexport type ValueFormat = 'timestamp' | 'Date' | string;\n\nexport interface ShortcutType {\n  /**\n   * @zh 选项的内容\n   * @en the content of shortcut\n   */\n  label: string | number | (() => VNode);\n  /**\n   * @zh 选项值\n   * @en the value of shortcut\n   */\n  value:\n    | (Date | string | number)\n    | (Date | string | number)[]\n    | (() => (Date | string | number) | (Date | string | number)[]);\n  /**\n   * @zh 解析值所使用的格式，参考[字符串解析格式](#字符串解析格式)\n   * @en the format use to parse value, refer to [String Parsing Format](#string-parsing-format)\n   */\n  format?: string;\n}\n\nexport interface DisabledTimeProps {\n  disabledHours?: () => number[];\n  disabledMinutes?: () => number[];\n  disabledSeconds?: () => number[];\n}\n\nexport type FormatFunc = (current: Date) => string;\nexport type IsSameTime = (current: Dayjs, target: Dayjs) => boolean;\nexport type DisabledDate = (current: Date) => boolean;\nexport type DisabledTime = (current: Date) => DisabledTimeProps;\nexport type RangeDisabledDate = (\n  current: Date,\n  type: 'start' | 'end'\n) => boolean;\nexport type RangeDisabledTime = (\n  current: Date,\n  type: 'start' | 'end'\n) => DisabledTimeProps;\n\nexport type Mode = 'date' | 'year' | 'quarter' | 'month' | 'week';\n\nexport type WeekStart = 0 | 1 | 2 | 3 | 4 | 5 | 6;\n\nexport interface DatePickerProps {\n  dayStartOfWeek: WeekStart;\n  format?: string | FormatFunc;\n  modelValue?: CalendarValue;\n  defaultValue?: CalendarValue;\n  showTime: boolean;\n  timePickerProps?: Partial<TimePickerProps>;\n  showNowBtn: boolean;\n  disabledTime?: DisabledTime;\n}\n\nexport interface WeekPickerProps {\n  dayStartOfWeek: WeekStart;\n  format?: string;\n  modelValue?: CalendarValue;\n  defaultValue?: CalendarValue;\n}\n\nexport interface MonthPickerProps {\n  format?: string;\n  modelValue?: CalendarValue;\n  defaultValue?: CalendarValue;\n  abbreviation?: boolean;\n}\n\nexport interface YearPickerProps {\n  format?: string;\n  modelValue?: CalendarValue;\n  defaultValue?: CalendarValue;\n}\n\nexport interface QuarterPickerProps {\n  format?: string;\n  modelValue?: CalendarValue;\n  defaultValue?: CalendarValue;\n}\n\nexport interface BasePickerProps {\n  locale?: Record<string, any>;\n  hideTrigger: boolean;\n  allowClear: boolean;\n  readonly: boolean;\n  error: boolean;\n  size: 'mini' | 'small' | 'medium' | 'large';\n  shortcuts: ShortcutType[];\n  shortcutsPosition: 'left' | 'bottom' | 'right';\n  position: 'top' | 'tl' | 'tr' | 'bottom' | 'bl' | 'br';\n  popupVisible: boolean | undefined;\n  defaultPopupVisible: boolean;\n  triggerProps?: Record<string, unknown>;\n  unmountOnClose: boolean;\n  valueFormat?: ValueFormat;\n  previewShortcut: boolean;\n  showConfirm?: boolean;\n}\n\nexport type PickerProps = BasePickerProps &\n  DatePickerProps & {\n    placeholder?: string;\n    disabled: boolean;\n    disabledDate?: DisabledDate;\n    pickerValue?: CalendarValue;\n    defaultPickerValue?: CalendarValue;\n    mode: Mode;\n  };\n\nexport interface RangePickerProps extends BasePickerProps {\n  mode: Mode;\n  modelValue?: CalendarValue[];\n  defaultValue?: CalendarValue[];\n  defaultPickerValue?: CalendarValue[];\n  pickerValue?: CalendarValue[];\n  disabled: boolean | boolean[];\n  dayStartOfWeek: WeekStart;\n  format?: string;\n  showTime: boolean;\n  placeholder?: string[];\n  timePickerProps?: Partial<TimePickerProps>;\n  disabledDate?: RangeDisabledDate;\n  disabledTime?: RangeDisabledTime;\n  separator?: string;\n  exchangeTime: boolean;\n}\n\nexport interface Cell {\n  value: Dayjs;\n  label: string | number;\n  isPrev?: boolean;\n  isNext?: boolean;\n  classNames?:\n    | string\n    | {\n        [x: string]: boolean;\n      };\n}\n\nexport interface HeaderOperations {\n  onSuperPrev?: () => void;\n  onPrev?: () => void;\n  onNext?: () => void;\n  onSuperNext?: () => void;\n}\n\nexport interface HeaderIcons {\n  prev?: Slot;\n  prevDouble?: Slot;\n  next?: Slot;\n  nextDouble?: Slot;\n}\n\nexport interface StartHeaderProps {\n  headerValue: Dayjs;\n  headerOperations: Pick<any, string>;\n  headerIcons: {\n    prev: Slot | undefined;\n    prevDouble: Slot | undefined;\n    next: Slot | undefined;\n    nextDouble: Slot | undefined;\n  };\n}\n"
  },
  {
    "path": "packages/web-vue/components/date-picker/panels/body.vue",
    "content": "<template>\n  <div :class=\"`${prefixCls}-body`\">\n    <div\n      v-for=\"(row, rowIndex) in rows\"\n      :key=\"rowIndex\"\n      :class=\"[\n        `${prefixCls}-row`,\n        {\n          [`${prefixCls}-row-week`]: isWeek,\n        },\n      ]\"\n    >\n      <template v-for=\"(cell, colIndex) in row\">\n        <!-- 一年中的第几周，只在 week 模式下显示 -->\n        <template v-if=\"isWeek && colIndex === 0\">\n          <div\n            :key=\"colIndex\"\n            :class=\"[`${prefixCls}-cell`, `${prefixCls}-cell-week`]\"\n          >\n            <div :class=\"`${prefixCls}-date`\">\n              <div :class=\"`${prefixCls}-date-value`\">{{ cell.label }}</div>\n            </div>\n          </div>\n        </template>\n        <template v-else>\n          <div\n            :key=\"colIndex\"\n            :class=\"getCellClassName(cell)\"\n            @mouseenter=\"\n              () => {\n                onCellMouseEnter(cell);\n              }\n            \"\n            @mouseleave=\"\n              () => {\n                onCellMouseLeave(cell);\n              }\n            \"\n            @click=\"\n              () => {\n                onCellClick(cell);\n              }\n            \"\n          >\n            <RenderFunction\n              v-if=\"dateRender\"\n              :render-func=\"dateRender\"\n              :date=\"getDateValue(cell.value)\"\n            />\n            <div v-else :class=\"`${prefixCls}-date`\">\n              <div :class=\"`${prefixCls}-date-value`\">\n                {{ cell.label }}\n              </div>\n            </div>\n          </div>\n        </template>\n      </template>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { Dayjs } from 'dayjs';\nimport { computed, defineComponent, PropType, reactive, toRefs } from 'vue';\nimport type { Cell, DisabledDate, IsSameTime, Mode } from '../interface';\nimport useCellClassName from '../hooks/use-cell-class-name';\nimport RenderFunction, { RenderFunc } from '../../_components/render-function';\nimport { getDateValue } from '../../_utils/date';\nimport { isDisabledDate } from '../utils';\n\nexport default defineComponent({\n  name: 'PanelBody',\n  components: {\n    RenderFunction,\n  },\n  props: {\n    prefixCls: {\n      type: String,\n      required: true,\n    },\n    rows: {\n      type: Array as PropType<Cell[][]>,\n      default: () => [],\n    },\n    value: {\n      type: Object as PropType<Dayjs>,\n    },\n    disabledDate: {\n      type: Function as PropType<DisabledDate>,\n    },\n    isSameTime: {\n      type: Function as PropType<IsSameTime>,\n      required: true,\n    },\n    mode: {\n      type: String as PropType<Mode>,\n    },\n    rangeValues: {\n      type: Array as PropType<Array<Dayjs | undefined>>,\n    },\n    dateRender: {\n      type: Function as PropType<RenderFunc>,\n    },\n  },\n  emits: ['cell-click', 'cell-mouse-enter'],\n  setup(props, { emit }) {\n    const { prefixCls, value, disabledDate, isSameTime, mode, rangeValues } =\n      toRefs(props);\n\n    const { getCellClassName } = useCellClassName(\n      reactive({\n        prefixCls,\n        value,\n        isSameTime,\n        mode,\n        rangeValues,\n      })\n    );\n\n    const isCellDisabled = (cellData: Cell) =>\n      isDisabledDate(cellData.value, disabledDate?.value, mode?.value);\n\n    return {\n      isWeek: computed(() => mode?.value === 'week'),\n      getCellClassName: (cellData: Cell) => {\n        const disabled = isCellDisabled(cellData);\n        return getCellClassName(cellData, disabled);\n      },\n      onCellClick: (cellData: Cell) => {\n        const disabled = isCellDisabled(cellData);\n        if (disabled) return;\n        emit('cell-click', cellData);\n      },\n      onCellMouseEnter: (cellData: Cell) => {\n        const disabled = isCellDisabled(cellData);\n        if (disabled) return;\n        emit('cell-mouse-enter', cellData);\n      },\n      onCellMouseLeave: (cellData: Cell) => {\n        const disabled = isCellDisabled(cellData);\n        if (disabled) return;\n        emit('cell-mouse-enter', cellData);\n      },\n      getDateValue,\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/date-picker/panels/date/index.vue",
    "content": "<template>\n  <div :class=\"classNames\">\n    <div v-if=\"showDateView\" :class=\"`${prefixCls}-inner`\">\n      <PanelHeader\n        v-bind=\"{\n          ...headerOperations,\n          icons: headerIcons,\n        }\"\n        :prefix-cls=\"pickerPrefixCls\"\n        :title=\"headerTitle\"\n        :mode=\"mode\"\n        :value=\"headerValue\"\n        :on-label-click=\"onHeaderLabelClick\"\n      />\n      <PanelWeekList :prefix-cls=\"pickerPrefixCls\" :week-list=\"weekList\" />\n      <PanelBody\n        :mode=\"mode\"\n        :prefix-cls=\"pickerPrefixCls\"\n        :rows=\"rows\"\n        :value=\"isRange ? undefined : value\"\n        :range-values=\"rangeValues\"\n        :disabled-date=\"disabledDate\"\n        :is-same-time=\"mergedIsSameTime\"\n        :date-render=\"dateRender\"\n        @cellClick=\"onCellClick\"\n        @cellMouseEnter=\"onCellMouseEnter\"\n      />\n    </div>\n    <div v-if=\"showTimeView\" :class=\"`${prefixCls}-timepicker`\">\n      <header :class=\"`${prefixCls}-timepicker-title`\">{{\n        datePickerT('datePicker.selectTime')\n      }}</header>\n      <TimePanel\n        v-bind=\"{\n          ...timePickerProps,\n          ...disabledTimeProps,\n        }\"\n        hide-footer\n        :value=\"value || isRange ? timePickerValue : undefined\"\n        :disabled=\"disabled\"\n        @select=\"onTimePanelSelect\"\n      />\n    </div>\n    <div v-if=\"showViewTabs\" :class=\"`${prefixCls}-footer`\">\n      <div :class=\"`${prefixCls}-view-tabs`\">\n        <div\n          :class=\"[\n            `${prefixCls}-view-tab-pane`,\n            { [`${prefixCls}-view-tab-pane-active`]: showDateView },\n          ]\"\n          @click=\"() => changeViewTo('date')\"\n        >\n          <IconCalendar />\n          <span :class=\"`${prefixCls}-view-tab-pane-text`\">\n            {{ footerValue && footerValue.format('YYYY-MM-DD') }}\n          </span>\n        </div>\n        <div\n          :class=\"[\n            `${prefixCls}-view-tab-pane`,\n            { [`${prefixCls}-view-tab-pane-active`]: showTimeView },\n          ]\"\n          @click=\"() => changeViewTo('time')\"\n        >\n          <IconClockCircle />\n          <span :class=\"`${prefixCls}-view-tab-pane-text`\">\n            {{ timePickerValue && timePickerValue.format('HH:mm:ss') }}\n          </span>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, PropType, reactive, toRefs } from 'vue';\nimport { Dayjs } from 'dayjs';\nimport { RenderFunc } from '../../../_components/render-function';\nimport { TimePickerProps } from '../../../time-picker/interface';\nimport { getPrefixCls } from '../../../_utils/global-config';\nimport { getDateValue, getNow, methods } from '../../../_utils/date';\nimport type {\n  Cell,\n  DisabledDate,\n  DisabledTime,\n  HeaderIcons,\n  HeaderOperations,\n  IsSameTime,\n  Mode,\n  WeekStart,\n} from '../../interface';\nimport { newArray } from '../../utils';\nimport PanelHeader, { HeaderLabelClickFunc } from '../header.vue';\nimport PanelBody from '../body.vue';\nimport PanelWeekList from '../week-list.vue';\nimport TimePanel from '../../../time-picker/panel.vue';\nimport IconCalendar from '../../../icon/icon-calendar';\nimport IconClockCircle from '../../../icon/icon-clock-circle';\nimport useMergeState from '../../../_hooks/use-merge-state';\nimport useDatePickerTransform from '../../hooks/use-inject-datepicker-transform';\n\nconst ROW_COUNT = 6;\nconst COL_COUNT = 7;\nconst CELL_COUNT = ROW_COUNT * COL_COUNT;\n\nfunction getCellData(time: Dayjs) {\n  return {\n    label: time.date(),\n    value: time,\n  };\n}\n\nexport default defineComponent({\n  name: 'DatePanel',\n  components: {\n    PanelHeader,\n    PanelBody,\n    PanelWeekList,\n    TimePanel,\n    IconCalendar,\n    IconClockCircle,\n  },\n  props: {\n    isRange: {\n      type: Boolean,\n    },\n    value: {\n      type: Object as PropType<Dayjs>,\n    },\n    rangeValues: {\n      type: Array as PropType<Array<Dayjs | undefined>>,\n    },\n    headerValue: {\n      type: Object as PropType<Dayjs>,\n      required: true,\n    },\n    footerValue: {\n      type: Object as PropType<Dayjs>,\n    },\n    timePickerValue: {\n      type: Object as PropType<Dayjs>,\n    },\n    headerOperations: {\n      type: Object as PropType<HeaderOperations>,\n      default: () => ({}),\n    },\n    headerIcons: {\n      type: Object as PropType<HeaderIcons>,\n      default: () => ({}),\n    },\n    dayStartOfWeek: {\n      type: Number as PropType<WeekStart>,\n      default: 0,\n    },\n    disabledDate: {\n      type: Function as PropType<DisabledDate>,\n    },\n    disabledTime: {\n      type: Function as PropType<DisabledTime>,\n    },\n    isSameTime: {\n      type: Function as PropType<IsSameTime>,\n    },\n    mode: {\n      type: String as PropType<Mode>,\n      default: 'date',\n    },\n    showTime: {\n      type: Boolean,\n    },\n    timePickerProps: {\n      type: Object as PropType<Partial<TimePickerProps>>,\n    },\n    currentView: {\n      type: String as PropType<'date' | 'time'>,\n    },\n    dateRender: {\n      type: Function as PropType<RenderFunc>,\n    },\n    disabled: {\n      type: Boolean,\n    },\n    onHeaderLabelClick: {\n      type: Function as PropType<HeaderLabelClickFunc>,\n    },\n  },\n  emits: [\n    'select',\n    'time-picker-select',\n    'cell-mouse-enter',\n    'current-view-change',\n    'update:currentView',\n  ],\n  setup(props, { emit }) {\n    const {\n      isRange,\n      headerValue,\n      footerValue,\n      dayStartOfWeek,\n      isSameTime,\n      mode,\n      showTime,\n      currentView,\n      disabledTime,\n    } = toRefs(props);\n\n    const datePickerT = useDatePickerTransform();\n\n    const isWeek = computed(() => mode?.value === 'week');\n\n    const prefixCls = computed(() =>\n      getPrefixCls(isWeek.value ? 'panel-week' : 'panel-date')\n    );\n\n    const pickerPrefixCls = getPrefixCls('picker');\n\n    const [localCurrentView, setLocalCurrentView] = useMergeState(\n      'date',\n      reactive({ value: currentView })\n    );\n\n    const showViewTabs = computed(() => showTime.value && isRange.value);\n\n    const showDateView = computed(\n      () =>\n        !showTime.value ||\n        !showViewTabs.value ||\n        localCurrentView.value === 'date'\n    );\n\n    const showTimeView = computed(\n      () =>\n        showTime.value &&\n        (!showViewTabs.value || localCurrentView.value === 'time')\n    );\n\n    const classNames = computed(() => [\n      prefixCls.value,\n      {\n        [`${prefixCls.value}-with-view-tabs`]: showViewTabs.value,\n      },\n    ]);\n\n    const headerTitle = computed(() => headerValue.value.format('YYYY-MM'));\n\n    const disabledTimeProps = computed(\n      () =>\n        (showTime.value &&\n          disabledTime?.value?.(\n            getDateValue(footerValue?.value || getNow())\n          )) ||\n        {}\n    );\n\n    const weekList = computed(() => {\n      const list = [0, 1, 2, 3, 4, 5, 6];\n      const index = Math.max(dayStartOfWeek.value % 7, 0);\n      return [...list.slice(index), ...list.slice(0, index)];\n    });\n\n    const rows = computed(() => {\n      const startDate = methods.startOf(headerValue.value, 'month');\n      const startDay = startDate.day();\n      const days = startDate.daysInMonth();\n      const startIndex = weekList.value.indexOf(startDay);\n      const flatData = newArray<Cell>(CELL_COUNT);\n\n      for (let i = 0; i < flatData.length; i++) {\n        flatData[i] = {\n          ...getCellData(methods.add(startDate, i - startIndex, 'day')),\n          isPrev: i < startIndex,\n          isNext: i > startIndex + days - 1,\n        };\n      }\n\n      const rows = newArray(ROW_COUNT).map((_, index) => {\n        const row = flatData.slice(index * COL_COUNT, (index + 1) * COL_COUNT);\n        if (isWeek.value) {\n          // 取第一个作为周 cell 的值\n          const valueOfWeek = row[0].value;\n          row.unshift({\n            label: valueOfWeek.week(),\n            value: valueOfWeek,\n          });\n        }\n        return row;\n      });\n\n      return rows;\n    });\n\n    const mergedIsSameTime = computed(\n      () =>\n        isSameTime?.value ||\n        ((current: Dayjs, target: Dayjs) => {\n          return current.isSame(target, 'day');\n        })\n    );\n\n    function onCellClick(cellData: Cell) {\n      emit('select', cellData.value);\n    }\n\n    function onTimePanelSelect(time: Dayjs) {\n      emit('time-picker-select', time);\n    }\n\n    function onCellMouseEnter(cellData: Cell) {\n      emit('cell-mouse-enter', cellData.value);\n    }\n\n    return {\n      prefixCls,\n      classNames,\n      pickerPrefixCls,\n      headerTitle,\n      rows,\n      weekList: computed(() =>\n        isWeek.value ? [-1, ...weekList.value] : weekList.value\n      ),\n      mergedIsSameTime,\n      disabledTimeProps,\n      onCellClick,\n      onCellMouseEnter,\n      onTimePanelSelect,\n      showViewTabs,\n      showDateView,\n      showTimeView,\n      changeViewTo: (newView: 'date' | 'time') => {\n        emit('current-view-change', newView);\n        emit('update:currentView', newView);\n        setLocalCurrentView(newView);\n      },\n      datePickerT,\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/date-picker/panels/footer.vue",
    "content": "<template>\n  <div :class=\"`${prefixCls}-footer`\">\n    <div v-if=\"$slots.extra\" :class=\"`${prefixCls}-footer-extra-wrapper`\">\n      <slot name=\"extra\" />\n    </div>\n    <div v-if=\"showTodayBtn\" :class=\"`${prefixCls}-footer-now-wrapper`\">\n      <Link @click=\"onTodayClick\">\n        {{ datePickerT('datePicker.today') }}\n      </Link>\n    </div>\n    <div\n      v-if=\"$slots.btn || showConfirmBtn\"\n      :class=\"`${prefixCls}-footer-btn-wrapper`\"\n    >\n      <slot name=\"btn\" />\n      <Button\n        v-if=\"showConfirmBtn\"\n        :class=\"`${prefixCls}-btn-confirm`\"\n        type=\"primary\"\n        size=\"mini\"\n        :disabled=\"confirmBtnDisabled\"\n        @click=\"onConfirmBtnClick\"\n      >\n        {{ datePickerT('datePicker.ok') }}\n      </Button>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue';\nimport Link from '../../link';\nimport Button from '../../button';\nimport useInjectDatePickerTransform from '../hooks/use-inject-datepicker-transform';\n\nexport default defineComponent({\n  name: 'PanelFooter',\n  components: {\n    Link,\n    Button,\n  },\n  props: {\n    prefixCls: {\n      type: String,\n      required: true,\n    },\n    showTodayBtn: {\n      type: Boolean,\n    },\n    showConfirmBtn: {\n      type: Boolean,\n    },\n    confirmBtnDisabled: {\n      type: Boolean,\n    },\n  },\n  emits: ['today-btn-click', 'confirm-btn-click'],\n  setup(_, { emit }) {\n    const datePickerT = useInjectDatePickerTransform();\n    return {\n      datePickerT,\n      onTodayClick: () => {\n        emit('today-btn-click');\n      },\n      onConfirmBtnClick: () => {\n        emit('confirm-btn-click');\n      },\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/date-picker/panels/header.vue",
    "content": "<template>\n  <div :class=\"`${prefixCls}-header`\">\n    <div :class=\"getIconClassName(showSuperPrev)\" @click=\"onSuperPrev\">\n      <template v-if=\"showSuperPrev\">\n        <RenderFunction\n          v-if=\"icons && icons.prevDouble\"\n          :render-func=\"icons && icons.prevDouble\"\n        />\n        <IconDoubleLeft v-else />\n      </template>\n    </div>\n    <div :class=\"getIconClassName(showPrev)\" @click=\"onPrev\">\n      <template v-if=\"showPrev\">\n        <RenderFunction\n          v-if=\"icons && icons.prev\"\n          :render-func=\"icons && icons.prev\"\n        />\n        <IconLeft v-else />\n      </template>\n    </div>\n    <div :class=\"`${prefixCls}-header-title`\">\n      <template v-if=\"onLabelClick && (year || month)\">\n        <span\n          v-if=\"year\"\n          :class=\"`${prefixCls}-header-label`\"\n          @click=\"() => onLabelClick && onLabelClick('year')\"\n          >{{ year }}</span\n        >\n        <span v-if=\"year && month\">-</span>\n        <span\n          v-if=\"month\"\n          :class=\"`${prefixCls}-header-label`\"\n          @click=\"() => onLabelClick && onLabelClick('month')\"\n          >{{ month }}</span\n        >\n      </template>\n      <template v-else>{{ title }}</template>\n    </div>\n    <div :class=\"getIconClassName(showNext)\" @click=\"onNext\">\n      <template v-if=\"showNext\">\n        <RenderFunction\n          v-if=\"icons && icons.next\"\n          :render-func=\"icons && icons.next\"\n        />\n        <IconRight v-else />\n      </template>\n    </div>\n    <div :class=\"getIconClassName(showSuperNext)\" @click=\"onSuperNext\">\n      <template v-if=\"showSuperNext\">\n        <RenderFunction\n          v-if=\"icons && icons.nextDouble\"\n          :render-func=\"icons && icons.nextDouble\"\n        />\n        <IconDoubleRight v-else />\n      </template>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, PropType } from 'vue';\nimport { Dayjs } from 'dayjs';\nimport { isFunction } from '../../_utils/is';\nimport IconLeft from '../../icon/icon-left';\nimport IconRight from '../../icon/icon-right';\nimport IconDoubleLeft from '../../icon/icon-double-left';\nimport IconDoubleRight from '../../icon/icon-double-right';\nimport { HeaderIcons, Mode } from '../interface';\nimport RenderFunction from '../../_components/render-function';\n\ntype ClickCallbackFunc = (payload: MouseEvent) => void;\n\nexport type HeaderLabelClickFunc = (label: 'year' | 'month') => void;\n\nexport default defineComponent({\n  name: 'PanelHeader',\n  components: {\n    IconLeft,\n    IconRight,\n    IconDoubleLeft,\n    IconDoubleRight,\n    RenderFunction,\n  },\n  props: {\n    prefixCls: {\n      type: String,\n      required: true,\n    },\n    title: {\n      type: String,\n      required: true,\n    },\n    mode: {\n      type: String as PropType<Mode>,\n      default: 'date',\n    },\n    value: {\n      type: Object as PropType<Dayjs>,\n    },\n    icons: {\n      type: Object as PropType<HeaderIcons>,\n    },\n    onPrev: {\n      type: Function as PropType<ClickCallbackFunc>,\n    },\n    onSuperPrev: {\n      type: Function as PropType<ClickCallbackFunc>,\n    },\n    onNext: {\n      type: Function as PropType<ClickCallbackFunc>,\n    },\n    onSuperNext: {\n      type: Function as PropType<ClickCallbackFunc>,\n    },\n    onLabelClick: {\n      type: Function as PropType<HeaderLabelClickFunc>,\n    },\n  },\n  emits: ['label-click'],\n  setup(props) {\n    return {\n      showPrev: computed(() => isFunction(props.onPrev)),\n      showSuperPrev: computed(() => isFunction(props.onSuperPrev)),\n      showNext: computed(() => isFunction(props.onNext)),\n      showSuperNext: computed(() => isFunction(props.onSuperNext)),\n      year: computed(() =>\n        ['date', 'quarter', 'month', 'week'].includes(props.mode) && props.value\n          ? props.value.format('YYYY')\n          : ''\n      ),\n      month: computed(() =>\n        ['date', 'week'].includes(props.mode) && props.value\n          ? props.value.format('MM')\n          : ''\n      ),\n      getIconClassName: (show?: boolean) => [\n        `${props.prefixCls}-header-icon`,\n        {\n          [`${props.prefixCls}-header-icon-hidden`]: !show,\n        },\n      ],\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/date-picker/panels/month/index.vue",
    "content": "<template>\n  <div :class=\"prefixCls\">\n    <div :class=\"`${prefixCls}-inner`\">\n      <PanelHeader\n        v-bind=\"{\n          ...headerOperations,\n          icons: headerIcons,\n        }\"\n        :prefix-cls=\"pickerPrefixCls\"\n        :title=\"headerTitle\"\n        mode=\"month\"\n        :value=\"headerValue\"\n        :on-label-click=\"onHeaderLabelClick\"\n      />\n      <PanelBody\n        mode=\"month\"\n        :prefix-cls=\"pickerPrefixCls\"\n        :rows=\"rows\"\n        :value=\"value\"\n        :range-values=\"rangeValues\"\n        :disabled-date=\"disabledDate\"\n        :is-same-time=\"isSameTime\"\n        :date-render=\"dateRender\"\n        @cellClick=\"onCellClick\"\n        @cellMouseEnter=\"onCellMouseEnter\"\n      />\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, PropType, toRefs } from 'vue';\nimport { Dayjs } from 'dayjs';\nimport { RenderFunc } from '../../../_components/render-function';\nimport { getPrefixCls } from '../../../_utils/global-config';\nimport { dayjs } from '../../../_utils/date';\nimport type {\n  Cell,\n  DisabledDate,\n  HeaderIcons,\n  HeaderOperations,\n  IsSameTime,\n} from '../../interface';\nimport { newArray } from '../../utils';\nimport PanelHeader, { HeaderLabelClickFunc } from '../header.vue';\nimport PanelBody from '../body.vue';\nimport useInjectDatePickerTransform from '../../hooks/use-inject-datepicker-transform';\n\nconst MONTH_LIST = [\n  'January',\n  'February',\n  'March',\n  'April',\n  'May',\n  'June',\n  'July',\n  'August',\n  'September',\n  'October',\n  'November',\n  'December',\n];\nconst CELL_COUNT = 12;\nconst ROW_COUNT = 4;\nconst COL_COUNT = 3;\n\nexport default defineComponent({\n  name: 'MonthPanel',\n  components: {\n    PanelHeader,\n    PanelBody,\n  },\n  props: {\n    headerValue: {\n      type: Object as PropType<Dayjs>,\n      required: true,\n    },\n    headerOperations: {\n      type: Object as PropType<HeaderOperations>,\n      default: () => ({}),\n    },\n    headerIcons: {\n      type: Object as PropType<HeaderIcons>,\n      default: () => ({}),\n    },\n    value: {\n      type: Object as PropType<Dayjs>,\n    },\n    disabledDate: {\n      type: Function as PropType<DisabledDate>,\n    },\n    rangeValues: {\n      type: Array as PropType<Array<Dayjs | undefined>>,\n    },\n    dateRender: {\n      type: Function as PropType<RenderFunc>,\n    },\n    onHeaderLabelClick: {\n      type: Function as PropType<HeaderLabelClickFunc>,\n    },\n    abbreviation: {\n      type: Boolean,\n      default: true,\n    },\n  },\n  emits: ['select', 'cell-mouse-enter'],\n  setup(props, { emit }) {\n    const datePickerT = useInjectDatePickerTransform();\n\n    const { headerValue } = toRefs(props);\n    const prefixCls = computed(() => getPrefixCls('panel-month'));\n    const pickerPrefixCls = getPrefixCls('picker');\n\n    const headerTitle = computed(() => headerValue.value.format('YYYY'));\n\n    const rows = computed(() => {\n      const year = headerValue.value.year();\n      const isAbbr = props.abbreviation ? 'short' : 'long';\n      const flatData = newArray<Cell>(CELL_COUNT).map((_, index) => ({\n        label: datePickerT(`datePicker.month.${isAbbr}.${MONTH_LIST[index]}`),\n        value: dayjs(`${year}-${index + 1}`, 'YYYY-M'),\n      }));\n      const rows = newArray(ROW_COUNT).map((_, index) =>\n        flatData.slice(index * COL_COUNT, (index + 1) * COL_COUNT)\n      );\n\n      return rows;\n    });\n\n    const isSameTime: IsSameTime = (current, target) =>\n      current.isSame(target, 'month');\n\n    function onCellClick(cellData: Cell) {\n      emit('select', cellData.value);\n    }\n\n    function onCellMouseEnter(cellData: Cell) {\n      emit('cell-mouse-enter', cellData.value);\n    }\n\n    return {\n      prefixCls,\n      pickerPrefixCls,\n      headerTitle,\n      rows,\n      isSameTime,\n      onCellClick,\n      onCellMouseEnter,\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/date-picker/panels/quarter/index.vue",
    "content": "<template>\n  <div :class=\"prefixCls\">\n    <div :class=\"`${prefixCls}-inner`\">\n      <PanelHeader\n        v-bind=\"{\n          ...headerOperations,\n          icons: headerIcons,\n        }\"\n        :prefix-cls=\"pickerPrefixCls\"\n        :title=\"headerTitle\"\n        mode=\"quarter\"\n        :value=\"headerValue\"\n        :on-label-click=\"onHeaderLabelClick\"\n      />\n      <PanelBody\n        mode=\"quarter\"\n        :prefix-cls=\"pickerPrefixCls\"\n        :rows=\"rows\"\n        :value=\"value\"\n        :range-values=\"rangeValues\"\n        :disabled-date=\"disabledDate\"\n        :is-same-time=\"isSameTime\"\n        :date-render=\"dateRender\"\n        @cellClick=\"onCellClick\"\n        @cellMouseEnter=\"onCellMouseEnter\"\n      />\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, PropType, toRefs } from 'vue';\nimport { Dayjs } from 'dayjs';\nimport { padStart } from '../../../_utils/pad';\nimport { getPrefixCls } from '../../../_utils/global-config';\nimport { dayjs } from '../../../_utils/date';\nimport type {\n  Cell,\n  DisabledDate,\n  HeaderIcons,\n  HeaderOperations,\n  IsSameTime,\n} from '../../interface';\nimport PanelHeader, { HeaderLabelClickFunc } from '../header.vue';\nimport PanelBody from '../body.vue';\nimport { RenderFunc } from '../../../_components/render-function';\n\nexport default defineComponent({\n  name: 'QuarterPanel',\n  components: {\n    PanelHeader,\n    PanelBody,\n  },\n  props: {\n    headerValue: {\n      type: Object as PropType<Dayjs>,\n      required: true,\n    },\n    headerOperations: {\n      type: Object as PropType<HeaderOperations>,\n      default: () => ({}),\n    },\n    headerIcons: {\n      type: Object as PropType<HeaderIcons>,\n      default: () => ({}),\n    },\n    value: {\n      type: Object as PropType<Dayjs>,\n    },\n    disabledDate: {\n      type: Function as PropType<DisabledDate>,\n    },\n    rangeValues: {\n      type: Array as PropType<Array<Dayjs | undefined>>,\n    },\n    dateRender: {\n      type: Function as PropType<RenderFunc>,\n    },\n    onHeaderLabelClick: {\n      type: Function as PropType<HeaderLabelClickFunc>,\n    },\n  },\n  emits: ['select', 'cell-mouse-enter'],\n  setup(props, { emit }) {\n    const { headerValue } = toRefs(props);\n    const prefixCls = computed(() => getPrefixCls('panel-quarter'));\n    const pickerPrefixCls = getPrefixCls('picker');\n\n    const headerTitle = computed(() => headerValue.value.format('YYYY'));\n\n    const rows = computed<Cell[][]>(() => {\n      const year = headerValue.value.year();\n      return [\n        [1, 2, 3, 4].map((q) => ({\n          label: `Q${q}`,\n          value: dayjs(`${year}-${padStart((q - 1) * 3 + 1, 2, '0')}-01`),\n        })),\n      ];\n    });\n\n    const isSameTime: IsSameTime = (current, target) =>\n      current.isSame(target, 'month') ||\n      (current.isSame(target, 'year') &&\n        Math.floor(current.month() / 3) === Math.floor(target.month() / 3));\n\n    function onCellClick(cellData: Cell) {\n      emit('select', cellData.value);\n    }\n\n    function onCellMouseEnter(cellData: Cell) {\n      emit('cell-mouse-enter', cellData.value);\n    }\n\n    return {\n      prefixCls,\n      pickerPrefixCls,\n      headerTitle,\n      rows,\n      isSameTime,\n      onCellClick,\n      onCellMouseEnter,\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/date-picker/panels/shortcuts.vue",
    "content": "<template>\n  <div :class=\"`${prefixCls}-shortcuts`\">\n    <Button v-if=\"showNowBtn\" size=\"mini\" @click=\"() => onNowClick()\">\n      {{ datePickerT('datePicker.now') }}\n    </Button>\n    <Button\n      v-for=\"(item, index) in shortcuts\"\n      :key=\"index\"\n      size=\"mini\"\n      @click=\"() => onItemClick(item)\"\n      @mouseenter=\"() => onItemMouseEnter(item)\"\n      @mouseleave=\"() => onItemMouseLeave(item)\"\n    >\n      <RenderFunction v-if=\"isFunction(item.label)\" :render-func=\"item.label\" />\n      <template v-else>\n        {{ item.label }}\n      </template>\n    </Button>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, PropType } from 'vue';\nimport { ShortcutType } from '../interface';\nimport Button from '../../button';\nimport RenderFunction from '../../_components/render-function';\nimport { isFunction } from '../../_utils/is';\nimport useInjectDatePickerTransform from '../hooks/use-inject-datepicker-transform';\n\nexport interface ShortcutsProps {\n  prefixCls: string;\n  shortcuts: ShortcutType[];\n}\n\nexport default defineComponent({\n  name: 'PanelShortcuts',\n  components: {\n    Button,\n    RenderFunction,\n  },\n  props: {\n    prefixCls: {\n      type: String,\n      required: true,\n    },\n    shortcuts: {\n      type: Array as PropType<ShortcutsProps['shortcuts']>,\n      default: () => [],\n    },\n    showNowBtn: {\n      type: Boolean,\n    },\n  },\n  emits: ['item-click', 'item-mouse-enter', 'item-mouse-leave', 'now-click'],\n  setup(props: ShortcutsProps, { emit }) {\n    const datePickerT = useInjectDatePickerTransform();\n    return {\n      datePickerT,\n      onItemClick: (item: ShortcutType) => {\n        emit('item-click', item);\n      },\n      onItemMouseEnter: (item: ShortcutType) => {\n        emit('item-mouse-enter', item);\n      },\n      onItemMouseLeave: (item: ShortcutType) => {\n        emit('item-mouse-leave', item);\n      },\n      onNowClick: () => {\n        emit('now-click');\n      },\n      isFunction,\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/date-picker/panels/week/index.vue",
    "content": "<template>\n  <DatePanel\n    v-bind=\"$attrs\"\n    mode=\"week\"\n    is-week\n    :day-start-of-week=\"dayStartOfWeek\"\n    :is-same-time=\"isSameTime\"\n    @select=\"onSelect\"\n    @cellMouseEnter=\"onCellMouseEnter\"\n  />\n</template>\n\n<script lang=\"ts\">\nimport { Dayjs } from 'dayjs';\nimport { defineComponent, PropType } from 'vue';\nimport { methods } from '../../../_utils/date';\nimport { IsSameTime, WeekStart } from '../../interface';\nimport DatePanel from '../date/index.vue';\nimport { useI18n } from '../../../locale';\n\nexport default defineComponent({\n  name: 'WeekPanel',\n  components: {\n    DatePanel,\n  },\n  props: {\n    dayStartOfWeek: {\n      type: Number as PropType<WeekStart>,\n      default: 0,\n    },\n  },\n  emits: ['select', 'cell-mouse-enter'],\n  setup(props, { emit }) {\n    const { locale } = useI18n();\n    const isSameTime: IsSameTime = (current, target) => {\n      return methods.isSameWeek(current, target, props.dayStartOfWeek);\n    };\n    return {\n      isSameTime,\n      onSelect: (value: Dayjs) => {\n        const startDateOfWeek = methods.startOfWeek(\n          value,\n          props.dayStartOfWeek\n        );\n        emit('select', startDateOfWeek);\n      },\n      onCellMouseEnter: (value: Dayjs) => {\n        const startDateOfWeek = methods.startOfWeek(\n          value,\n          props.dayStartOfWeek\n        );\n        emit('cell-mouse-enter', startDateOfWeek);\n      },\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/date-picker/panels/week-list.vue",
    "content": "<template>\n  <div :class=\"`${prefixCls}-week-list`\">\n    <div\n      v-for=\"key in weekList\"\n      :key=\"key\"\n      :class=\"`${prefixCls}-week-list-item`\"\n    >\n      {{ labelList[key] || '' }}\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, computed, PropType } from 'vue';\nimport useInjectDatePickerTransform from '../hooks/use-inject-datepicker-transform';\n\nexport default defineComponent({\n  name: 'PanelWeekList',\n  props: {\n    prefixCls: {\n      type: String,\n      required: true,\n    },\n    weekList: {\n      type: Array as PropType<number[]>,\n      required: true,\n    },\n  },\n  setup() {\n    const datePickerT = useInjectDatePickerTransform();\n\n    const labelList = computed<string[]>(() => {\n      return [\n        'sunday',\n        'monday',\n        'tuesday',\n        'wednesday',\n        'thursday',\n        'friday',\n        'saturday',\n      ].map((i) => datePickerT(`datePicker.week.short.${i}`));\n    });\n\n    return {\n      labelList,\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/date-picker/panels/year/index.vue",
    "content": "<template>\n  <div :class=\"prefixCls\">\n    <div :class=\"`${prefixCls}-inner`\">\n      <PanelHeader\n        v-bind=\"{\n          ...headerOperations,\n          icons: headerIcons,\n        }\"\n        :prefix-cls=\"pickerPrefixCls\"\n        :title=\"headerTitle\"\n      />\n      <PanelBody\n        mode=\"year\"\n        :prefix-cls=\"pickerPrefixCls\"\n        :rows=\"rows\"\n        :value=\"value\"\n        :range-values=\"rangeValues\"\n        :disabled-date=\"disabledDate\"\n        :is-same-time=\"isSameTime\"\n        :date-render=\"dateRender\"\n        @cellClick=\"onCellClick\"\n        @cellMouseEnter=\"onCellMouseEnter\"\n      />\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, PropType, toRefs } from 'vue';\nimport { Dayjs } from 'dayjs';\nimport { getPrefixCls } from '../../../_utils/global-config';\nimport { dayjs } from '../../../_utils/date';\nimport type {\n  Cell,\n  DisabledDate,\n  HeaderIcons,\n  HeaderOperations,\n  IsSameTime,\n} from '../../interface';\nimport { newArray } from '../../utils';\nimport PanelHeader from '../header.vue';\nimport PanelBody from '../body.vue';\nimport { RenderFunc } from '../../../_components/render-function';\n\nconst ROW_COUNT = 4;\nconst COL_COUNT = 3;\nconst CELL_COUNT = ROW_COUNT * COL_COUNT;\nconst SPAN = 10;\n\nexport default defineComponent({\n  name: 'YearPanel',\n  components: {\n    PanelHeader,\n    PanelBody,\n  },\n  props: {\n    headerValue: {\n      type: Object as PropType<Dayjs>,\n      required: true,\n    },\n    headerOperations: {\n      type: Object as PropType<HeaderOperations>,\n      default: () => ({}),\n    },\n    headerIcons: {\n      type: Object as PropType<HeaderIcons>,\n      default: () => ({}),\n    },\n    value: {\n      type: Object as PropType<Dayjs>,\n    },\n    disabledDate: {\n      type: Function as PropType<DisabledDate>,\n    },\n    rangeValues: {\n      type: Array as PropType<Array<Dayjs | undefined>>,\n    },\n    dateRender: {\n      type: Function as PropType<RenderFunc>,\n    },\n  },\n  emits: ['select', 'cell-mouse-enter'],\n  setup(props, { emit }) {\n    const { headerValue } = toRefs(props);\n    const prefixCls = computed(() => getPrefixCls('panel-year'));\n    const pickerPrefixCls = getPrefixCls('picker');\n\n    const rows = computed(() => {\n      const startYear = Math.floor(headerValue.value.year() / SPAN) * SPAN - 1;\n\n      const flatData = newArray<Cell>(CELL_COUNT).map((_, index) => ({\n        label: startYear + index,\n        value: dayjs(`${startYear + index}`, 'YYYY'),\n        isPrev: index < 1,\n        isNext: index > SPAN,\n      }));\n\n      const rows = newArray(ROW_COUNT).map((_, index) =>\n        flatData.slice(index * COL_COUNT, (index + 1) * COL_COUNT)\n      );\n\n      return rows;\n    });\n\n    const headerTitle = computed(\n      () =>\n        `${rows.value[0][1].label}-${\n          rows.value[ROW_COUNT - 1][COL_COUNT - 1].label\n        }`\n    );\n\n    const isSameTime: IsSameTime = (current, target) =>\n      current.isSame(target, 'year');\n\n    function onCellClick(cellData: Cell) {\n      emit('select', cellData.value);\n    }\n\n    function onCellMouseEnter(cellData: Cell) {\n      emit('cell-mouse-enter', cellData.value);\n    }\n\n    return {\n      prefixCls,\n      pickerPrefixCls,\n      headerTitle,\n      rows,\n      isSameTime,\n      onCellClick,\n      onCellMouseEnter,\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/date-picker/picker-panel.vue",
    "content": "<template>\n  <div :class=\"classNames\">\n    <PanelShortcuts v-if=\"showShortcutsInLeft\" v-bind=\"shortcutsProps\" />\n    <div :class=\"`${prefixCls}-panel-wrapper`\">\n      <template v-if=\"headerMode\">\n        <YearPanel\n          v-if=\"headerMode === 'year'\"\n          :header-value=\"headerPanelHeaderValue\"\n          :header-icons=\"headerIcons\"\n          :header-operations=\"headerPanelHeaderOperations\"\n          :disabled-date=\"disabledDate\"\n          @select=\"onHeaderPanelSelect\"\n        />\n        <MonthPanel\n          v-else-if=\"headerMode === 'month'\"\n          :header-value=\"headerPanelHeaderValue\"\n          :header-icons=\"headerIcons\"\n          :header-operations=\"headerPanelHeaderOperations\"\n          :abbreviation=\"abbreviation\"\n          :disabled-date=\"disabledDate\"\n          @select=\"onHeaderPanelSelect\"\n          @header-label-click=\"onMonthHeaderLabelClick\"\n        />\n      </template>\n      <template v-else>\n        <WeekPanel\n          v-if=\"mode === 'week'\"\n          v-bind=\"commonPanelProps\"\n          :day-start-of-week=\"dayStartOfWeek\"\n        />\n        <MonthPanel\n          v-else-if=\"mode === 'month'\"\n          :abbreviation=\"abbreviation\"\n          v-bind=\"commonPanelProps\"\n        />\n        <YearPanel v-else-if=\"mode === 'year'\" v-bind=\"commonPanelProps\" />\n        <QuarterPanel\n          v-else-if=\"mode === 'quarter'\"\n          v-bind=\"commonPanelProps\"\n        />\n        <DatePanel\n          v-else\n          v-bind=\"commonPanelProps\"\n          mode=\"date\"\n          :show-time=\"showTime\"\n          :time-picker-props=\"timePickerProps\"\n          :day-start-of-week=\"dayStartOfWeek\"\n          :footer-value=\"footerValue\"\n          :time-picker-value=\"timePickerValue\"\n          :disabled-time=\"disabledTime\"\n          @timePickerSelect=\"onTimePickerSelect\"\n        />\n        <PanelFooter\n          :prefix-cls=\"prefixCls\"\n          :show-today-btn=\"\n            showNowBtn && !(showConfirmBtn || showShortcutsInBottom)\n          \"\n          :show-confirm-btn=\"showConfirmBtn\"\n          :confirm-btn-disabled=\"confirmBtnDisabled\"\n          @todayBtnClick=\"onTodayBtnClick\"\n          @confirmBtnClick=\"onConfirmBtnClick\"\n        >\n          <template v-if=\"extra\" #extra>\n            <RenderFunction v-if=\"extra\" :render-func=\"extra\" />\n          </template>\n          <template v-if=\"showShortcutsInBottom\" #btn>\n            <PanelShortcuts v-bind=\"shortcutsProps\" />\n          </template>\n        </PanelFooter>\n      </template>\n    </div>\n    <PanelShortcuts v-if=\"showShortcutsInRight\" v-bind=\"shortcutsProps\" />\n  </div>\n</template>\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  PropType,\n  reactive,\n  toRefs,\n  watch,\n} from 'vue';\nimport { Dayjs } from 'dayjs';\nimport { isFunction } from '../_utils/is';\nimport { getDayjsValue, getNow } from '../_utils/date';\nimport {\n  CalendarValue,\n  DisabledDate,\n  DisabledTime,\n  HeaderIcons,\n  HeaderOperations,\n  ShortcutType,\n  WeekStart,\n} from './interface';\nimport PanelShortcuts from './panels/shortcuts.vue';\nimport DatePanel from './panels/date/index.vue';\nimport WeekPanel from './panels/week/index.vue';\nimport MonthPanel from './panels/month/index.vue';\nimport YearPanel from './panels/year/index.vue';\nimport QuarterPanel from './panels/quarter/index.vue';\nimport PanelFooter from './panels/footer.vue';\nimport { TimePickerProps } from '../time-picker/interface';\nimport RenderFunction, { RenderFunc } from '../_components/render-function';\nimport useHeaderValue from './hooks/use-header-value';\n\nexport default defineComponent({\n  name: 'DatePikerPanel',\n  components: {\n    DatePanel,\n    PanelShortcuts,\n    PanelFooter,\n    WeekPanel,\n    MonthPanel,\n    YearPanel,\n    QuarterPanel,\n    RenderFunction,\n  },\n  props: {\n    mode: {\n      type: String,\n    },\n    headerMode: {\n      type: String as PropType<'year' | 'month'>,\n    },\n    prefixCls: {\n      type: String,\n      required: true,\n    },\n    value: {\n      type: Object as PropType<Dayjs>,\n    },\n    headerValue: {\n      type: Object as PropType<Dayjs>,\n      required: true,\n    },\n    timePickerValue: {\n      type: Object as PropType<Dayjs>,\n    },\n    showTime: {\n      type: Boolean,\n    },\n    showConfirmBtn: {\n      type: Boolean,\n    },\n    shortcuts: {\n      type: Array as PropType<ShortcutType[]>,\n      default: () => [],\n    },\n    shortcutsPosition: {\n      type: String as PropType<'left' | 'bottom' | 'right'>,\n      default: 'bottom',\n    },\n    format: {\n      type: String,\n      required: true,\n    },\n    dayStartOfWeek: {\n      type: Number as PropType<WeekStart>,\n      default: 0,\n    },\n    disabledDate: {\n      type: Function as PropType<DisabledDate>,\n    },\n    disabledTime: {\n      type: Function as PropType<DisabledTime>,\n    },\n    timePickerProps: {\n      type: Object as PropType<Partial<TimePickerProps>>,\n    },\n    extra: {\n      type: Function as PropType<RenderFunc>,\n    },\n    dateRender: {\n      type: Function as PropType<RenderFunc>,\n    },\n    hideTrigger: {\n      type: Boolean,\n    },\n    confirmBtnDisabled: {\n      type: Boolean,\n    },\n    showNowBtn: {\n      type: Boolean,\n    },\n    headerIcons: {\n      type: Object as PropType<HeaderIcons>,\n      default: () => ({}),\n    },\n    headerOperations: {\n      type: Object as PropType<HeaderOperations>,\n    },\n    abbreviation: {\n      type: Boolean,\n    },\n  },\n  emits: [\n    'cell-click',\n    'time-picker-select',\n    'shortcut-click',\n    'shortcut-mouse-enter',\n    'shortcut-mouse-leave',\n    'confirm',\n    'today-btn-click',\n    'header-label-click',\n    'header-select',\n    'month-header-click',\n  ],\n  setup(props, { emit }) {\n    const {\n      prefixCls,\n      shortcuts,\n      shortcutsPosition,\n      format,\n      value,\n      disabledDate,\n      hideTrigger,\n      showNowBtn,\n      dateRender,\n      showConfirmBtn,\n      headerValue,\n      headerIcons,\n      headerOperations,\n      headerMode,\n    } = toRefs(props);\n\n    const hasShortcuts = computed(() =>\n      Boolean(shortcuts.value && shortcuts.value.length)\n    );\n\n    const showShortcutsNowBtn = computed(\n      () => showNowBtn.value && showConfirmBtn.value && !hasShortcuts.value\n    );\n\n    const showShortcuts = computed(\n      () => showShortcutsNowBtn.value || hasShortcuts.value\n    );\n\n    const showShortcutsInLeft = computed(\n      () => showShortcuts.value && shortcutsPosition.value === 'left'\n    );\n\n    const showShortcutsInRight = computed(\n      () => showShortcuts.value && shortcutsPosition.value === 'right'\n    );\n\n    const showShortcutsInBottom = computed(\n      () => showShortcuts.value && shortcutsPosition.value === 'bottom'\n    );\n\n    const classNames = computed(() => [\n      `${prefixCls.value}-container`,\n      {\n        [`${prefixCls.value}-container-panel-only`]: hideTrigger.value,\n        [`${prefixCls.value}-container-shortcuts-placement-left`]:\n          showShortcutsInLeft.value,\n        [`${prefixCls.value}-container-shortcuts-placement-right`]:\n          showShortcutsInRight.value,\n      },\n    ]);\n\n    const footerValue = computed(() => value?.value || getNow());\n\n    const {\n      headerValue: headerPanelHeaderValue,\n      setHeaderValue: setHeaderPanelHeaderValue,\n      headerOperations: headerPanelHeaderOperations,\n    } = useHeaderValue(\n      reactive({\n        mode: headerMode,\n        format,\n      })\n    );\n\n    watch(headerValue, (val) => {\n      setHeaderPanelHeaderValue(val);\n    });\n\n    function getShortcutValue(shortcut: ShortcutType) {\n      const { value } = shortcut;\n      return getDayjsValue(\n        (isFunction(value) ? value() : value) as CalendarValue,\n        shortcut.format || format.value\n      );\n    }\n\n    function onShortcutClick(shortcut: ShortcutType) {\n      emit('shortcut-click', getShortcutValue(shortcut), shortcut);\n    }\n    function onShortcutMouseEnter(shortcut: ShortcutType) {\n      emit('shortcut-mouse-enter', getShortcutValue(shortcut));\n    }\n    function onShortcutMouseLeave(shortcut: ShortcutType) {\n      emit('shortcut-mouse-leave', getShortcutValue(shortcut));\n    }\n\n    function onPanelSelect(date: Dayjs) {\n      emit('cell-click', date);\n    }\n    function onTimePickerSelect(time: Dayjs) {\n      emit('time-picker-select', time);\n    }\n\n    function onTodayBtnClick() {\n      emit('today-btn-click', getNow());\n    }\n\n    function onConfirmBtnClick() {\n      emit('confirm');\n    }\n\n    function onPanelHeaderLabelClick(type: 'year' | 'month') {\n      emit('header-label-click', type);\n    }\n\n    function onHeaderPanelSelect(date: Dayjs) {\n      emit('header-select', date);\n    }\n\n    function onMonthHeaderLabelClick() {\n      emit('month-header-click');\n    }\n\n    const shortcutsProps = reactive({\n      prefixCls,\n      shortcuts,\n      showNowBtn: showShortcutsNowBtn,\n      onItemClick: onShortcutClick,\n      onItemMouseEnter: onShortcutMouseEnter,\n      onItemMouseLeave: onShortcutMouseLeave,\n      onNowClick: onTodayBtnClick,\n    });\n\n    const commonPanelProps = reactive({\n      value,\n      headerValue,\n      headerIcons,\n      headerOperations,\n      disabledDate,\n      dateRender,\n      onSelect: onPanelSelect,\n      onHeaderLabelClick: onPanelHeaderLabelClick,\n    });\n\n    return {\n      classNames,\n      showShortcutsInLeft,\n      showShortcutsInRight,\n      showShortcutsInBottom,\n      shortcutsProps,\n      commonPanelProps,\n      footerValue,\n      onTodayBtnClick,\n      onConfirmBtnClick,\n      onTimePickerSelect,\n      onHeaderPanelSelect,\n      headerPanelHeaderValue,\n      headerPanelHeaderOperations,\n      onMonthHeaderLabelClick,\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/date-picker/picker.vue",
    "content": "<template>\n  <Trigger\n    v-if=\"!hideTrigger\"\n    trigger=\"click\"\n    animation-name=\"slide-dynamic-origin\"\n    auto-fit-transform-origin\n    :click-to-close=\"false\"\n    :popup-offset=\"4\"\n    v-bind=\"triggerProps\"\n    :position=\"position\"\n    :disabled=\"mergedDisabled || readonly\"\n    :prevent-focus=\"true\"\n    :popup-visible=\"panelVisible\"\n    :unmount-on-close=\"unmountOnClose\"\n    :popup-container=\"popupContainer\"\n    @popupVisibleChange=\"onPanelVisibleChange\"\n  >\n    <slot>\n      <DateInput\n        v-bind=\"$attrs\"\n        ref=\"refInput\"\n        :size=\"size\"\n        :focused=\"panelVisible\"\n        :visible=\"panelVisible\"\n        :error=\"error\"\n        :disabled=\"mergedDisabled\"\n        :readonly=\"!inputEditable || disabledInput\"\n        :allow-clear=\"allowClear && !readonly\"\n        :placeholder=\"computedPlaceholder\"\n        :input-value=\"inputValue\"\n        :value=\"needConfirm ? panelValue : selectedValue\"\n        :format=\"inputFormat\"\n        @clear=\"onInputClear\"\n        @change=\"onInputChange\"\n        @pressEnter=\"onInputPressEnter\"\n        @blur=\"onInputBlur\"\n      >\n        <template v-if=\"$slots.prefix\" #prefix>\n          <slot name=\"prefix\" />\n        </template>\n        <template #suffix-icon>\n          <slot name=\"suffix-icon\">\n            <IconCalendar />\n          </slot>\n        </template>\n      </DateInput>\n    </slot>\n    <template #content>\n      <PickerPanel v-bind=\"panelProps\" @click=\"onPanelClick\" />\n    </template>\n  </Trigger>\n  <PickerPanel v-else v-bind=\"{ ...$attrs, ...panelProps }\" />\n</template>\n\n<script lang=\"ts\">\nimport { Dayjs } from 'dayjs';\nimport {\n  computed,\n  defineComponent,\n  PropType,\n  reactive,\n  ref,\n  toRefs,\n  watch,\n  watchEffect,\n  onUnmounted,\n} from 'vue';\nimport {\n  dayjs,\n  getNow,\n  isValueChange,\n  getDateValue,\n  initializeDateLocale,\n} from '../_utils/date';\nimport { getPrefixCls } from '../_utils/global-config';\nimport useState from '../_hooks/use-state';\nimport {\n  DisabledTimeProps,\n  ShortcutType,\n  FormatFunc,\n  CalendarValue,\n  WeekStart,\n} from './interface';\nimport usePickerState from './hooks/use-picker-state';\nimport DateInput from '../_components/picker/input.vue';\nimport Trigger, { TriggerProps } from '../trigger';\nimport { getFormattedValue, isValidInputValue } from '../time-picker/utils';\nimport PickerPanel from './picker-panel.vue';\nimport pick from '../_utils/pick';\nimport useFormat from './hooks/use-format';\nimport { isFunction, isBoolean } from '../_utils/is';\nimport { TimePickerProps } from '../time-picker/interface';\nimport IconCalendar from '../icon/icon-calendar';\nimport useIsDisabledDate from './hooks/use-is-disabled-date';\nimport useMergeState from '../_hooks/use-merge-state';\nimport useProvideDatePickerTransform from './hooks/use-provide-datepicker-transform';\nimport useHeaderValue from './hooks/use-header-value';\nimport { omit } from '../_utils/omit';\nimport useTimePickerValue from './hooks/use-time-picker-value';\nimport { mergeValueWithTime } from './utils';\nimport { Size } from '../_utils/constant';\nimport { useReturnValue } from './hooks/use-value-format';\nimport { useFormItem } from '../_hooks/use-form-item';\nimport { useI18n } from '../locale';\n\n/**\n * @displayName Common\n * @noBrackets\n */\nexport default defineComponent({\n  name: 'Picker',\n  components: {\n    DateInput,\n    Trigger,\n    PickerPanel,\n    IconCalendar,\n  },\n  inheritAttrs: false,\n  props: {\n    /**\n     * @zh 国际化配置，用于覆盖locale中的 `datePicker` 字段\n     * @en Internationalization configuration, used to cover the locale file in the `datePicker` field\n     */\n    locale: {\n      type: Object as PropType<Record<string, any>>,\n    },\n    /**\n     * @zh 没有触发元素，只显示选择面板\n     * @en There is no trigger element, only the selection panel is displayed\n     * */\n    hideTrigger: {\n      type: Boolean,\n    },\n    /**\n     * @zh 是否允许清除\n     * @en Whether to allow clear\n     * */\n    allowClear: {\n      type: Boolean,\n      default: true,\n    },\n    /**\n     * @zh 是否为只读\n     * @en Whether it is read-only\n     * */\n    readonly: {\n      type: Boolean,\n    },\n    /**\n     * @zh 是否为错误状态\n     * @en Whether it is an error state\n     */\n    error: {\n      type: Boolean,\n    },\n    /**\n     * @zh 日期选择器的尺寸\n     * @en The size of the date picker\n     * @values 'mini','small','medium','large'\n     * @defaultValue 'medium'\n     * */\n    size: {\n      type: String as PropType<Size>,\n    },\n    /**\n     * @zh 预设时间范围快捷选择\n     * @en Quick selection of preset time range\n     */\n    shortcuts: {\n      type: Array as PropType<ShortcutType[]>,\n      default: () => [],\n    },\n    /**\n     * @zh 预设范围在面板上的位置，默认放在下方，侧边一般用于大量预设时间的场景\n     * @en The position of the preset range on the panel, which is placed at the bottom by default, and the side is generally used for scenes with a large number of preset times\n     * */\n    shortcutsPosition: {\n      type: String as PropType<'left' | 'bottom' | 'right'>,\n      default: 'bottom',\n    },\n    /**\n     * @zh 弹出的框的位置\n     * @en The position of the pop-up box\n     */\n    position: {\n      type: String as PropType<'top' | 'tl' | 'tr' | 'bottom' | 'bl' | 'br'>,\n      default: 'bl',\n    },\n    /**\n     * @zh 控制弹出框的打开或者关闭状态\n     * @en Control the open or closed state of the pop-up box\n     */\n    popupVisible: {\n      type: Boolean,\n      default: undefined,\n    },\n    /**\n     * @zh 默认弹出框是打开或者关闭\n     * @en The default pop-up box is open or closed\n     */\n    defaultPopupVisible: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 可以传入 `Trigger` 组件的参数\n     * @en You can pass in the parameters of the `Trigger` component\n     */\n    triggerProps: {\n      type: Object as PropType<TriggerProps>,\n    },\n    /**\n     * @zh 是否在隐藏的时候销毁DOM结构\n     * @en Whether to destroy the DOM structure when hiding\n     */\n    unmountOnClose: {\n      type: Boolean,\n    },\n    /**\n     * @zh 提示文案\n     * @en Prompt copy\n     */\n    placeholder: {\n      type: String,\n    },\n    /**\n     * @zh 是否禁用\n     * @en Whether to disable\n     */\n    disabled: {\n      type: Boolean,\n    },\n    /**\n     * @zh 不可选取的日期\n     * @en Unselectable date\n     */\n    disabledDate: {\n      type: Function as PropType<(current?: Date) => boolean>,\n    },\n    /**\n     * @zh 不可选取的时间\n     * @en Unselectable time\n     */\n    disabledTime: {\n      type: Function as PropType<(current: Date) => DisabledTimeProps>,\n    },\n    /**\n     * @zh 面板显示的日期\n     * @en Date displayed on the panel\n     * @vModel\n     */\n    pickerValue: {\n      type: [Object, String, Number] as PropType<Date | string | number>,\n    },\n    /**\n     * @zh 面板默认显示的日期\n     * @en The date displayed on the panel by default\n     */\n    defaultPickerValue: {\n      type: [Object, String, Number] as PropType<Date | string | number>,\n    },\n    /**\n     * @zh 弹出框的挂载容器\n     * @en Mount container for pop-up box\n     */\n    popupContainer: {\n      type: [String, Object] as PropType<string | HTMLElement>,\n    },\n    mode: {\n      type: String as PropType<'date' | 'year' | 'quarter' | 'month' | 'week'>,\n      default: 'date',\n    },\n    format: {\n      type: [String, Function] as PropType<string | FormatFunc>,\n    },\n    /**\n     * @zh 值的格式，对 `value` `defaultValue` `pickerValue` `defaultPickerValue` 以及事件中的返回值生效，支持设置为时间戳，Date 和字符串（参考[字符串解析格式](#字符串解析格式)）。如果没有指定，将格式化为字符串，格式同 `format`。\n     * @en The format of the value, valid for `value` `defaultValue` `pickerValue` `defaultPickerValue` and the return value in the event, supports setting as timestamp, Date and string (refer to [String parsing format](#string-parsing-format) ). If not specified, it will be formatted as a string, in the same format as `format`.\n     * @version 2.16.0\n     */\n    valueFormat: {\n      type: String as PropType<'timestamp' | 'Date' | string>,\n    },\n    /**\n     * @zh 是否要预览快捷选择的结果\n     * @en Whether to preview the result of the shortcut\n     * @version 2.28.0\n     */\n    previewShortcut: {\n      type: Boolean,\n      default: true,\n    },\n    /**\n     * @zh 是否显示确认按钮，`showTime = true` 的时候始终显示。\n     * @en Whether to show the confirm button, always show when `showTime = true`.\n     * @version 2.29.0\n     */\n    showConfirmBtn: {\n      type: Boolean,\n    },\n    showTime: {\n      type: Boolean,\n    },\n    timePickerProps: {\n      type: Object as PropType<Partial<TimePickerProps>>,\n    },\n    showNowBtn: {\n      type: Boolean,\n      default: true,\n    },\n    dayStartOfWeek: {\n      type: Number as PropType<WeekStart>,\n      default: 0,\n    },\n    modelValue: {\n      type: [Object, String, Number] as PropType<Date | string | number>,\n    },\n    defaultValue: {\n      type: [Object, String, Number] as PropType<Date | string | number>,\n    },\n    /**\n     * @zh 是否禁止键盘输入日期\n     * @en Whether input is disabled with the keyboard.\n     * @version 2.43.0\n     */\n    disabledInput: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 是否启用缩写\n     * @en Whether to enable abbreviation\n     * @version 2.45.0\n     */\n    abbreviation: {\n      type: Boolean,\n      default: true,\n    },\n  },\n  emits: {\n    /**\n     * @zh 组件值发生改变\n     * @en The component value changes\n     * @param {Date | string | number | undefined} value\n     * @param {Date | undefined} date\n     * @param {string | undefined} dateString\n     */\n    'change': (\n      value: CalendarValue | undefined,\n      date: Date | undefined,\n      dateString: string | undefined\n    ) => true,\n    'update:modelValue': (value: CalendarValue | undefined) => true,\n    /**\n     * @zh 选中日期发生改变但组件值未改变\n     * @en The selected date has changed but the component value has not changed\n     * @param {Date | string | number} value\n     * @param {Date} date\n     * @param {string} dateString\n     */\n    'select': (\n      value: CalendarValue | undefined,\n      date: Date | undefined,\n      dateString: string | undefined\n    ) => true,\n    /**\n     * @zh 打开或关闭弹出框\n     * @en Open or close the pop-up box\n     * @param {boolean} visible\n     */\n    'popup-visible-change': (visible: boolean) => true,\n    'update:popupVisible': (visible: boolean) => true,\n    /**\n     * @zh 点击确认按钮\n     * @en Click the confirm button\n     * @param {Date | string | number} value\n     * @param {Date} date\n     * @param {string} dateString\n     */\n    'ok': (\n      value: CalendarValue | undefined,\n      date: Date | undefined,\n      dateString: string | undefined\n    ) => true,\n    /**\n     * @zh 点击清除按钮\n     * @en Click the clear button\n     */\n    'clear': () => true,\n    /**\n     * @zh 点击快捷选项\n     * @en Click on the shortcut option\n     * @param {ShortcutType} shortcut\n     */\n    'select-shortcut': (shortcut: ShortcutType) => true,\n    /**\n     * @zh 面板日期改变\n     * @en Panel date change\n     * @param {Date | string | number} value\n     * @param {Date} date\n     * @param {string} dateString\n     */\n    'picker-value-change': (\n      value: CalendarValue,\n      date: Date,\n      dateString: string\n    ) => true,\n    'update:pickerValue': (value: CalendarValue) => true,\n  },\n  /**\n   * @zh 输入框前缀\n   * @en Input box prefix\n   * @slot prefix\n   * @version 2.41.0\n   */\n  /**\n   * @zh 输入框后缀图标\n   * @en Input box suffix icon\n   * @slot suffix-icon\n   */\n  /**\n   * @zh 额外的页脚\n   * @en Extra footer\n   * @slot extra\n   */\n  /**\n   * @zh 自定义日期单元格的内容\n   * @en Customize the contents of the date cell\n   * @slot cell\n   * @binding {Date} date\n   */\n  /**\n   * @zh 单箭头往前翻页图标\n   * @en Single arrow page forward icon\n   * @slot icon-prev\n   */\n  /**\n   * @zh 单箭头往后翻页图标\n   * @en Single arrow page backward icon\n   * @slot icon-next\n   */\n  /**\n   * @zh 双箭头往前翻页图标\n   * @en Double arrow page forward icon\n   * @slot icon-prev-double\n   */\n  /**\n   * @zh 双箭头往后翻页图标\n   * @en Double arrow page backward icon\n   * @slot icon-next-double\n   */\n  setup(props, { emit, slots }) {\n    const {\n      mode,\n      modelValue,\n      defaultValue,\n      format,\n      valueFormat,\n      placeholder,\n      popupVisible,\n      defaultPopupVisible,\n      disabled,\n      showTime,\n      timePickerProps,\n      disabledDate,\n      disabledTime,\n      readonly,\n      locale,\n      pickerValue,\n      defaultPickerValue,\n      dayStartOfWeek,\n      previewShortcut,\n      showConfirmBtn,\n    } = toRefs(props);\n\n    const { locale: globalLocal } = useI18n();\n    watchEffect(() => {\n      initializeDateLocale(globalLocal.value, dayStartOfWeek.value);\n    });\n\n    const { mergedDisabled, eventHandlers } = useFormItem({ disabled });\n\n    const datePickerT = useProvideDatePickerTransform(\n      reactive({\n        locale,\n      })\n    );\n\n    const prefixCls = getPrefixCls('picker');\n\n    const refInput = ref();\n\n    const computedPlaceholder = computed(\n      () =>\n        placeholder?.value ||\n        {\n          date: datePickerT('datePicker.placeholder.date'),\n          month: datePickerT('datePicker.placeholder.month'),\n          year: datePickerT('datePicker.placeholder.year'),\n          week: datePickerT('datePicker.placeholder.week'),\n          quarter: datePickerT('datePicker.placeholder.quarter'),\n        }[mode.value] ||\n        datePickerT('datePicker.placeholder.date')\n    );\n\n    const {\n      format: computedFormat,\n      valueFormat: returnValueFormat,\n      parseValueFormat,\n    } = useFormat(reactive({ format, mode, showTime, valueFormat }));\n\n    const inputFormat = computed(() =>\n      format && isFunction(format.value)\n        ? (value: Dayjs) => (format.value as FormatFunc)?.(getDateValue(value))\n        : computedFormat.value\n    );\n\n    const getReturnValue = useReturnValue(\n      reactive({\n        format: returnValueFormat,\n      })\n    );\n\n    const isDisabledDate = useIsDisabledDate(\n      reactive({\n        mode,\n        disabledDate,\n        disabledTime,\n        showTime,\n      })\n    );\n\n    const needConfirm = computed(() => showTime.value || showConfirmBtn.value);\n    const confirmBtnDisabled = computed(\n      () =>\n        needConfirm.value &&\n        (!forSelectedValue.value || isDisabledDate(forSelectedValue.value))\n    );\n\n    const isDateTime = computed(() => mode.value === 'date' && showTime.value);\n\n    // 确认选中的值\n    const { value: selectedValue, setValue: setSelectedValue } = usePickerState(\n      reactive({\n        modelValue,\n        defaultValue,\n        format: parseValueFormat,\n      })\n    );\n    // 操作过程中的选中值\n    const [processValue, setProcessValue] = useState<Dayjs | undefined>();\n    // 预览用的值\n    const [previewValue, setPreviewValue] = useState<Dayjs | undefined>();\n    // 待确认的值\n    const forSelectedValue = computed(\n      () => processValue.value ?? selectedValue.value\n    );\n    // panel 展示用的值\n    const panelValue = computed(\n      () => previewValue.value ?? processValue.value ?? selectedValue.value\n    );\n\n    // input 操作使用的值\n    const [inputValue, setInputValue] = useState<string | undefined>();\n\n    // 选择面板是否可见\n    const [panelVisible, setLocalPanelVisible] = useMergeState(\n      defaultPopupVisible.value,\n      reactive({ value: popupVisible })\n    );\n    const setPanelVisible = (newVisible: boolean) => {\n      if (panelVisible.value !== newVisible) {\n        setLocalPanelVisible(newVisible);\n        emit('popup-visible-change', newVisible);\n        emit('update:popupVisible', newVisible);\n      }\n    };\n\n    // 生成当前面板内容\n    const { headerValue, setHeaderValue, headerOperations, resetHeaderValue } =\n      useHeaderValue(\n        reactive({\n          mode,\n          value: pickerValue,\n          defaultValue: defaultPickerValue,\n          selectedValue: panelValue,\n          format: parseValueFormat,\n          onChange: (newVal: Dayjs) => {\n            const returnValue = getReturnValue(newVal);\n            const formattedValue = getFormattedValue(\n              newVal,\n              parseValueFormat.value\n            );\n            const dateValue = getDateValue(newVal);\n            emit('picker-value-change', returnValue, dateValue, formattedValue);\n            emit('update:pickerValue', returnValue);\n          },\n        })\n      );\n\n    const [timePickerValue, , resetTimePickerValue] = useTimePickerValue(\n      reactive({\n        timePickerProps,\n        selectedValue: panelValue,\n      })\n    );\n\n    const inputEditable = computed(\n      () => !readonly.value && !isFunction(inputFormat.value)\n    );\n\n    const headerMode = ref<'year' | 'month' | undefined>();\n\n    watch(panelVisible, (newVisible) => {\n      setProcessValue(undefined);\n      setPreviewValue(undefined);\n      headerMode.value = undefined;\n\n      // open\n      if (newVisible) {\n        resetHeaderValue();\n        resetTimePickerValue();\n      }\n\n      // close\n      if (!newVisible) {\n        setInputValue(undefined);\n      }\n    });\n\n    function emitChange(value: Dayjs | undefined, emitOk?: boolean) {\n      const returnValue = value ? getReturnValue(value) : undefined;\n      const formattedValue = getFormattedValue(value, parseValueFormat.value);\n      const dateValue = getDateValue(value);\n      if (isValueChange(value, selectedValue.value)) {\n        emit('update:modelValue', returnValue);\n        emit('change', returnValue, dateValue, formattedValue);\n        eventHandlers.value?.onChange?.();\n      }\n\n      if (emitOk) {\n        emit('ok', returnValue, dateValue, formattedValue);\n      }\n    }\n\n    function confirm(\n      value: Dayjs | undefined,\n      showPanel?: boolean,\n      emitOk?: boolean\n    ) {\n      if (isDisabledDate(value)) {\n        return;\n      }\n\n      emitChange(value, emitOk);\n      setSelectedValue(value);\n      setProcessValue(undefined);\n      setPreviewValue(undefined);\n      setInputValue(undefined);\n      headerMode.value = undefined;\n      if (isBoolean(showPanel)) {\n        setPanelVisible(showPanel);\n      }\n    }\n\n    function select(value: Dayjs | undefined, emitSelect?: boolean) {\n      setProcessValue(value);\n      setPreviewValue(undefined);\n      setInputValue(undefined);\n      headerMode.value = undefined;\n\n      if (emitSelect) {\n        const returnValue = value ? getReturnValue(value) : undefined;\n        const formattedValue = getFormattedValue(value, parseValueFormat.value);\n        const dateValue = getDateValue(value);\n        emit('select', returnValue, dateValue, formattedValue);\n      }\n    }\n\n    function focusInput(index?: number) {\n      refInput.value && refInput.value.focus && refInput.value.focus(index);\n    }\n\n    function getMergedOpValue(date: Dayjs, time?: Dayjs) {\n      if (!isDateTime.value && !timePickerProps.value) return date;\n      return mergeValueWithTime(getNow(), date, time);\n    }\n\n    function onPanelVisibleChange(visible: boolean) {\n      if (mergedDisabled.value) return;\n      setPanelVisible(visible);\n    }\n\n    function onInputClear(e: Event) {\n      e.stopPropagation();\n      confirm(undefined);\n      emit('clear');\n    }\n\n    function onInputBlur() {\n      eventHandlers.value?.onBlur?.();\n    }\n\n    function onInputChange(e: any) {\n      setPanelVisible(true);\n\n      const targetValue = e.target.value;\n      setInputValue(targetValue);\n\n      if (!isValidInputValue(targetValue, computedFormat.value)) return;\n\n      const newValue = dayjs(targetValue, computedFormat.value);\n\n      if (isDisabledDate(newValue)) return;\n\n      if (needConfirm.value) {\n        select(newValue);\n      } else {\n        confirm(newValue, true);\n      }\n    }\n\n    function onInputPressEnter() {\n      confirm(panelValue.value, false);\n    }\n\n    function onPanelSelect(value: Dayjs) {\n      if (needConfirm.value) {\n        select(value, true);\n      } else {\n        confirm(value, false);\n      }\n    }\n\n    function onPanelCellClick(value: Dayjs) {\n      const newValue = getMergedOpValue(value, timePickerValue.value);\n      onPanelSelect(newValue);\n    }\n\n    function onTimePickerSelect(time: Dayjs) {\n      const newValue = getMergedOpValue(panelValue.value || getNow(), time);\n      onPanelSelect(newValue);\n    }\n\n    function onPanelConfirm() {\n      confirm(panelValue.value, false, true);\n    }\n\n    function onPanelClick() {\n      if (props.disabledInput) {\n        focusInput();\n      }\n    }\n\n    let clearPreviewTimer: any;\n    onUnmounted(() => {\n      clearTimeout(clearPreviewTimer);\n    });\n\n    function onPanelShortcutMouseEnter(value: Dayjs) {\n      clearTimeout(clearPreviewTimer);\n      setPreviewValue(value);\n      setInputValue(undefined);\n    }\n\n    function onPanelShortcutMouseLeave() {\n      clearTimeout(clearPreviewTimer);\n      clearPreviewTimer = setTimeout(() => {\n        setPreviewValue(undefined);\n      }, 100);\n    }\n\n    function onPanelShortcutClick(value: Dayjs, shortcut: ShortcutType) {\n      emit('select-shortcut', shortcut);\n      confirm(value, false);\n    }\n\n    function onPanelHeaderLabelClick(type: 'year' | 'month') {\n      headerMode.value = type;\n    }\n\n    function onMonthHeaderClick() {\n      headerMode.value = 'year';\n    }\n\n    function onPanelHeaderSelect(date: Dayjs) {\n      let newValue = headerValue.value;\n      newValue = newValue.set('year', date.year());\n      if (headerMode.value === 'month') {\n        newValue = newValue.set('month', date.month());\n      }\n      setHeaderValue(newValue);\n      if (mode.value === 'quarter' || mode.value === 'month') {\n        // 季度选择器特殊处理，月份选完后关闭headerMode\n        headerMode.value = undefined;\n        return;\n      }\n      headerMode.value = headerMode.value === 'year' ? 'month' : undefined; // 年选择完后选择月\n    }\n\n    const computedTimePickerProps = computed(() => ({\n      format: computedFormat.value,\n      ...omit(timePickerProps?.value || {}, ['defaultValue']),\n      visible: panelVisible.value,\n    }));\n\n    const panelProps = computed(() => ({\n      ...pick(props, [\n        'mode',\n        'shortcuts',\n        'shortcutsPosition',\n        'dayStartOfWeek',\n        'disabledDate',\n        'disabledTime',\n        'showTime',\n        'hideTrigger',\n        'abbreviation',\n      ]),\n      showNowBtn: props.showNowBtn && mode.value === 'date',\n      prefixCls,\n      format: parseValueFormat.value,\n      value: panelValue.value,\n      visible: panelVisible.value,\n      showConfirmBtn: needConfirm.value,\n      confirmBtnDisabled: confirmBtnDisabled.value,\n      timePickerProps: computedTimePickerProps.value,\n      extra: slots.extra,\n      dateRender: slots.cell,\n      headerValue: headerValue.value,\n      headerIcons: {\n        prev: slots['icon-prev'],\n        prevDouble: slots['icon-prev-double'],\n        next: slots['icon-next'],\n        nextDouble: slots['icon-next-double'],\n      },\n      headerOperations: headerOperations.value,\n      timePickerValue: timePickerValue.value,\n      headerMode: headerMode.value,\n      onCellClick: onPanelCellClick,\n      onTimePickerSelect,\n      onConfirm: onPanelConfirm,\n      onShortcutClick: onPanelShortcutClick,\n      onShortcutMouseEnter: previewShortcut.value\n        ? onPanelShortcutMouseEnter\n        : undefined,\n      onShortcutMouseLeave: previewShortcut.value\n        ? onPanelShortcutMouseLeave\n        : undefined,\n      onTodayBtnClick: onPanelSelect,\n      onHeaderLabelClick: onPanelHeaderLabelClick,\n      onHeaderSelect: onPanelHeaderSelect,\n      onMonthHeaderClick,\n    }));\n\n    return {\n      prefixCls,\n      refInput,\n      panelProps,\n      panelValue,\n      inputValue,\n      selectedValue,\n      inputFormat,\n      computedPlaceholder,\n      panelVisible,\n      inputEditable,\n      needConfirm,\n      mergedDisabled,\n      onPanelVisibleChange,\n      onInputClear,\n      onInputChange,\n      onInputPressEnter,\n      onInputBlur,\n      onPanelClick,\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/date-picker/pickers/date-picker.tsx",
    "content": "import { defineComponent, PropType } from 'vue';\nimport { TimePickerProps } from '../../time-picker/interface';\nimport { DisabledTimeProps, WeekStart } from '../interface';\nimport Picker from '../picker.vue';\n\nexport default defineComponent({\n  name: 'DatePicker',\n  props: {\n    /**\n     * @zh 绑定值\n     * @en Value\n     */\n    modelValue: {\n      type: [Object, String, Number] as PropType<Date | string | number>,\n    },\n    /**\n     * @zh 默认值\n     * @en Default value\n     */\n    defaultValue: {\n      type: [Object, String, Number] as PropType<Date | string | number>,\n    },\n    /**\n     * @zh 展示日期的格式，参考[字符串解析格式](#字符串解析格式)\n     * @en Display the format of the date, refer to [String Parsing Format](#string-parsing-format)\n     */\n    format: {\n      type: [String, Function] as PropType<\n        string | ((current: Date) => string)\n      >,\n    },\n    /**\n     * @zh 每周的第一天开始于周几，0 - 周日，1 - 周一，以此类推。\n     * @en The first day of the week starts on the day of the week, 0-Sunday, 1-Monday, and so on.\n     * @type 0 | 1 | 2 | 3 | 4 | 5 | 6\n     * @version 2-6 from 2.21.0\n     */\n    dayStartOfWeek: {\n      type: Number as PropType<WeekStart>,\n      default: 0,\n    },\n    /**\n     * @zh 是否增加时间选择\n     * @en Whether to increase time selection\n     * */\n    showTime: {\n      type: Boolean,\n    },\n    /**\n     * @zh 时间显示的参数，参考 [TimePickerProps](/vue/component/time-picker)\n     * @en Time display parameters, refer to [TimePickerProps](/vue/component/time-picker)\n     * */\n    timePickerProps: {\n      type: Object as PropType<Partial<TimePickerProps>>,\n    },\n    /**\n     * @zh 是否禁用\n     * @en Whether to disable\n     */\n    disabled: {\n      type: Boolean,\n    },\n    /**\n     * @zh 不可选取的日期\n     * @en Unselectable date\n     */\n    disabledDate: {\n      type: Function as PropType<(current?: Date) => boolean>,\n    },\n    /**\n     * @zh 不可选取的时间\n     * @en Unselectable time\n     * */\n    disabledTime: {\n      type: Function as PropType<(current: Date) => DisabledTimeProps>,\n    },\n    /**\n     * @zh 是否显示 `showTime` 时，选择当前时间的按钮\n     * @en Whether to display `showTime`, select the button of the current time\n     * */\n    showNowBtn: {\n      type: Boolean,\n      default: true,\n    },\n  },\n  setup(props, { attrs, slots }) {\n    return () => <Picker {...props} {...attrs} mode=\"date\" v-slots={slots} />;\n  },\n});\n"
  },
  {
    "path": "packages/web-vue/components/date-picker/pickers/month-picker.tsx",
    "content": "import { defineComponent, PropType } from 'vue';\nimport Picker from '../picker.vue';\n\nexport default defineComponent({\n  name: 'MonthPicker',\n  props: {\n    /**\n     * @zh 绑定值\n     * @en Value\n     */\n    modelValue: {\n      type: [Object, String, Number] as PropType<Date | string | number>,\n    },\n    /**\n     * @zh 默认值\n     * @en Default value\n     */\n    defaultValue: {\n      type: [Object, String, Number] as PropType<Date | string | number>,\n    },\n    /**\n     * @zh 展示日期的格式，参考[字符串解析格式](#字符串解析格式)\n     * @en Display the format of the date, refer to [String Parsing Format](#String Parsing Format)\n     */\n    format: {\n      type: String,\n      default: 'YYYY-MM',\n    },\n  },\n  setup(props, { attrs, slots }) {\n    return () => <Picker {...props} {...attrs} mode=\"month\" v-slots={slots} />;\n  },\n});\n"
  },
  {
    "path": "packages/web-vue/components/date-picker/pickers/quarter-picker.tsx",
    "content": "import { defineComponent, PropType } from 'vue';\nimport Picker from '../picker.vue';\n\nexport default defineComponent({\n  name: 'QuarterPicker',\n  props: {\n    /**\n     * @zh 绑定值\n     * @en Value\n     */\n    modelValue: {\n      type: [Object, String, Number] as PropType<Date | string | number>,\n    },\n    /**\n     * @zh 默认值\n     * @en Default value\n     */\n    defaultValue: {\n      type: [Object, String, Number] as PropType<Date | string | number>,\n    },\n    /**\n     * @zh 展示日期的格式，参考[字符串解析格式](#字符串解析格式)\n     * @en Display the format of the date, refer to [String Parsing Format](#String Parsing Format)\n     */\n    format: {\n      type: String,\n      default: 'YYYY-[Q]Q',\n    },\n    /**\n     * @zh 值的格式，对 `value` `defaultValue` `pickerValue` `defaultPickerValue` 以及事件中的返回值生效，支持设置为时间戳，Date 和字符串（参考[字符串解析格式](#字符串解析格式)）。\n     * @en The format of the value, valid for `value` `defaultValue` `pickerValue` `defaultPickerValue` and the return value in the event, supports setting as timestamp, Date and string (refer to [String parsing format](#string-parsing-format) ).\n     * @version 2.16.0\n     */\n    valueFormat: {\n      type: String,\n      default: 'YYYY-MM',\n    },\n  },\n  setup(props, { attrs, slots }) {\n    return () => (\n      <Picker {...props} {...attrs} mode=\"quarter\" v-slots={slots} />\n    );\n  },\n});\n"
  },
  {
    "path": "packages/web-vue/components/date-picker/pickers/week-picker.tsx",
    "content": "import { defineComponent, PropType } from 'vue';\nimport { WeekStart } from '../interface';\nimport Picker from '../picker.vue';\n\nexport default defineComponent({\n  name: 'WeekPicker',\n  props: {\n    /**\n     * @zh 绑定值\n     * @en Value\n     */\n    modelValue: {\n      type: [Object, String, Number] as PropType<Date | string | number>,\n    },\n    /**\n     * @zh 默认值\n     * @en Default value\n     */\n    defaultValue: {\n      type: [Object, String, Number] as PropType<Date | string | number>,\n    },\n    /**\n     * @zh 展示日期的格式，参考[字符串解析格式](#字符串解析格式)\n     * @en Display the format of the date, refer to [String Parsing Format](#String Parsing Format)\n     */\n    format: {\n      type: String,\n      default: 'gggg-wo',\n    },\n    /**\n     * @zh 值的格式，对 `value` `defaultValue` `pickerValue` `defaultPickerValue` 以及事件中的返回值生效，支持设置为时间戳，Date 和字符串（参考[字符串解析格式](#字符串解析格式)）。\n     * @en The format of the value, valid for `value` `defaultValue` `pickerValue` `defaultPickerValue` and the return value in the event, supports setting as timestamp, Date and string (refer to [String parsing format](#string-parsing-format) ).\n     * @version 2.16.0\n     */\n    valueFormat: {\n      type: String,\n      default: 'YYYY-MM-DD',\n    },\n    /**\n     * @zh 每周的第一天开始于周几，0 - 周日，1 - 周一，以此类推。\n     * @en The first day of the week starts on the day of the week, 0-Sunday, 1-Monday, and so on.\n     * @type 0 | 1 | 2 | 3 | 4 | 5 | 6\n     * @version 2-6 from 2.21.0\n     */\n    dayStartOfWeek: {\n      type: Number as PropType<WeekStart>,\n      default: 0,\n    },\n  },\n  setup(props, { attrs, slots }) {\n    return () => <Picker {...props} {...attrs} mode=\"week\" v-slots={slots} />;\n  },\n});\n"
  },
  {
    "path": "packages/web-vue/components/date-picker/pickers/year-picker.tsx",
    "content": "import { defineComponent, PropType } from 'vue';\nimport Picker from '../picker.vue';\n\nexport default defineComponent({\n  name: 'YearPicker',\n  props: {\n    /**\n     * @zh 绑定值\n     * @en Value\n     */\n    modelValue: {\n      type: [Object, String, Number] as PropType<Date | string | number>,\n    },\n    /**\n     * @zh 默认值\n     * @en Default value\n     */\n    defaultValue: {\n      type: [Object, String, Number] as PropType<Date | string | number>,\n    },\n    /**\n     * @zh 展示日期的格式，参考[字符串解析格式](#字符串解析格式)\n     * @en Display the format of the date, refer to [String Parsing Format](#String Parsing Format)\n     */\n    format: {\n      type: String,\n      default: 'YYYY',\n    },\n  },\n  setup(props, { attrs, slots }) {\n    return () => <Picker {...props} {...attrs} mode=\"year\" v-slots={slots} />;\n  },\n});\n"
  },
  {
    "path": "packages/web-vue/components/date-picker/range-picker-panel.vue",
    "content": "<template>\n  <div :class=\"classNames\">\n    <PanelShortcuts\n      v-if=\"showShortcuts && shortcutsPosition === 'left'\"\n      v-bind=\"shortcutsProps\"\n    />\n    <div :class=\"`${prefixCls}-range-panel-wrapper`\">\n      <!-- panel -->\n      <div :class=\"`${prefixCls}-range`\">\n        <div :class=\"`${prefixCls}-range-wrapper`\">\n          <template v-if=\"startHeaderMode || endHeaderMode\">\n            <YearPanel\n              v-if=\"startHeaderMode === 'year'\"\n              v-bind=\"startPanelProps\"\n            />\n            <YearPanel v-if=\"endHeaderMode === 'year'\" v-bind=\"endPanelProps\" />\n            <MonthPanel\n              v-else-if=\"startHeaderMode === 'month'\"\n              v-bind=\"startPanelProps\"\n              :abbreviation=\"abbreviation\"\n            />\n            <MonthPanel\n              v-else-if=\"endHeaderMode === 'month'\"\n              v-bind=\"endPanelProps\"\n              :abbreviation=\"abbreviation\"\n            />\n          </template>\n          <template v-else>\n            <!-- week -->\n            <template v-if=\"mode === 'week'\">\n              <WeekPanel\n                v-bind=\"startPanelProps\"\n                :day-start-of-week=\"dayStartOfWeek\"\n              />\n              <WeekPanel\n                v-bind=\"endPanelProps\"\n                :day-start-of-week=\"dayStartOfWeek\"\n              />\n            </template>\n            <!-- month -->\n            <template v-else-if=\"mode === 'month'\">\n              <MonthPanel\n                v-bind=\"startPanelProps\"\n                :abbreviation=\"abbreviation\"\n              />\n              <MonthPanel v-bind=\"endPanelProps\" :abbreviation=\"abbreviation\" />\n            </template>\n            <!-- year -->\n            <template v-else-if=\"mode === 'year'\">\n              <YearPanel v-bind=\"startPanelProps\" />\n              <YearPanel v-bind=\"endPanelProps\" />\n            </template>\n            <!-- quarter -->\n            <template v-else-if=\"mode === 'quarter'\">\n              <QuarterPanel v-bind=\"startPanelProps\" />\n              <QuarterPanel v-bind=\"endPanelProps\" />\n            </template>\n            <!-- date -->\n            <template v-else>\n              <DatePanel\n                v-model:currentView=\"currentDateView\"\n                v-bind=\"startPanelProps\"\n                is-range\n                :value=\"value && value[0]\"\n                :footer-value=\"footerValue && footerValue[0]\"\n                :time-picker-value=\"timePickerValue && timePickerValue[0]\"\n                :day-start-of-week=\"dayStartOfWeek\"\n                :show-time=\"showTime\"\n                :time-picker-props=\"timePickerProps\"\n                :disabled-time=\"getDisabledTimeFunc(0)\"\n                :disabled=\"disabled[0]\"\n                @timePickerSelect=\"onStartTimePickerSelect\"\n              />\n              <DatePanel\n                v-model:currentView=\"currentDateView\"\n                v-bind=\"endPanelProps\"\n                is-range\n                :value=\"value && value[1]\"\n                :footer-value=\"footerValue && footerValue[1]\"\n                :time-picker-value=\"timePickerValue && timePickerValue[1]\"\n                :day-start-of-week=\"dayStartOfWeek\"\n                :show-time=\"showTime\"\n                :time-picker-props=\"timePickerProps\"\n                :disabled-time=\"getDisabledTimeFunc(1)\"\n                :disabled=\"disabled[1]\"\n                @timePickerSelect=\"onEndTimePickerSelect\"\n              />\n            </template>\n          </template>\n        </div>\n      </div>\n      <!-- footer -->\n      <PanelFooter\n        :prefix-cls=\"prefixCls\"\n        :show-today-btn=\"false\"\n        :show-confirm-btn=\"showConfirmBtn\"\n        :confirm-btn-disabled=\"confirmBtnDisabled\"\n        @confirmBtnClick=\"onConfirmBtnClick\"\n      >\n        <template v-if=\"extra || $slots.extra\" #extra>\n          <slot v-if=\"$slots.extra\" name=\"extra\" />\n          <RenderFunction v-else :render-func=\"extra\" />\n        </template>\n        <template v-if=\"showShortcuts && shortcutsPosition === 'bottom'\" #btn>\n          <PanelShortcuts v-bind=\"shortcutsProps\" />\n        </template>\n      </PanelFooter>\n    </div>\n    <PanelShortcuts\n      v-if=\"showShortcuts && shortcutsPosition === 'right'\"\n      v-bind=\"shortcutsProps\"\n    />\n  </div>\n</template>\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  PropType,\n  reactive,\n  ref,\n  toRefs,\n  watch,\n} from 'vue';\nimport { Dayjs } from 'dayjs';\nimport { isArray, isFunction } from '../_utils/is';\nimport { getDayjsValue } from '../_utils/date';\nimport pick from '../_utils/pick';\nimport type {\n  ShortcutType,\n  RangePickerProps,\n  Mode,\n  RangeDisabledTime,\n  RangeDisabledDate,\n  CalendarValue,\n  WeekStart,\n  StartHeaderProps,\n} from './interface';\nimport PanelShortcuts from './panels/shortcuts.vue';\nimport PanelFooter from './panels/footer.vue';\nimport DatePanel from './panels/date/index.vue';\nimport WeekPanel from './panels/week/index.vue';\nimport MonthPanel from './panels/month/index.vue';\nimport YearPanel from './panels/year/index.vue';\nimport QuarterPanel from './panels/quarter/index.vue';\nimport RenderFunction, { RenderFunc } from '../_components/render-function';\nimport { normalizeRangeValue } from './utils';\n\nexport default defineComponent({\n  name: 'DateRangePikerPanel',\n  components: {\n    PanelShortcuts,\n    PanelFooter,\n    RenderFunction,\n    DatePanel,\n    WeekPanel,\n    MonthPanel,\n    YearPanel,\n    QuarterPanel,\n  },\n  props: {\n    mode: {\n      type: String as PropType<Mode>,\n      default: 'date',\n    },\n    value: {\n      type: Array as PropType<Array<Dayjs | undefined>>,\n      default: () => [],\n    },\n    footerValue: {\n      type: Array as PropType<Array<Dayjs | undefined>>,\n    },\n    timePickerValue: {\n      type: Array as PropType<Dayjs[]>,\n    },\n    showTime: {\n      type: Boolean,\n    },\n    showConfirmBtn: {\n      type: Boolean,\n    },\n    prefixCls: {\n      type: String,\n      required: true,\n    },\n    shortcuts: {\n      type: Array as PropType<ShortcutType[]>,\n      default: () => [],\n    },\n    shortcutsPosition: {\n      type: String as PropType<RangePickerProps['shortcutsPosition']>,\n      default: 'bottom',\n    },\n    format: {\n      type: String,\n      required: true,\n    },\n    dayStartOfWeek: {\n      type: Number as PropType<WeekStart>,\n      default: 0,\n    },\n    disabledDate: {\n      type: Function as PropType<RangeDisabledDate>,\n    },\n    disabledTime: {\n      type: Function as PropType<RangeDisabledTime>,\n    },\n    timePickerProps: {\n      type: Object as PropType<RangePickerProps['timePickerProps']>,\n    },\n    extra: {\n      type: Function as PropType<RenderFunc>,\n    },\n    dateRender: {\n      type: Function as PropType<RenderFunc>,\n    },\n    hideTrigger: {\n      type: Boolean,\n    },\n    startHeaderProps: {\n      type: Object as PropType<StartHeaderProps>,\n      default: () => ({}),\n    },\n    endHeaderProps: {\n      type: Object as PropType<Record<string, any>>,\n      default: () => ({}),\n    },\n    confirmBtnDisabled: {\n      type: Boolean,\n    },\n    disabled: {\n      type: Array as PropType<boolean[]>,\n      default: () => [false, false],\n    },\n    visible: {\n      type: Boolean,\n    },\n    startHeaderMode: {\n      type: String as PropType<'year' | 'month'>,\n    },\n    endHeaderMode: {\n      type: String as PropType<'year' | 'month'>,\n    },\n    abbreviation: {\n      type: Boolean,\n    },\n  },\n  emits: [\n    'cell-click',\n    'cell-mouse-enter',\n    'time-picker-select',\n    'shortcut-click',\n    'shortcut-mouse-enter',\n    'shortcut-mouse-leave',\n    'confirm',\n    'start-header-label-click',\n    'end-header-label-click',\n    'start-header-select',\n    'end-header-select',\n  ],\n  setup(props, { emit }) {\n    const {\n      prefixCls,\n      shortcuts,\n      shortcutsPosition,\n      format,\n      hideTrigger,\n      value,\n      disabledDate,\n      disabledTime,\n      startHeaderProps,\n      endHeaderProps,\n      dateRender,\n      visible,\n      startHeaderMode,\n      endHeaderMode,\n    } = toRefs(props);\n\n    const showShortcuts = computed(\n      () => isArray(shortcuts.value) && shortcuts.value.length\n    );\n\n    const classNames = computed(() => [\n      `${prefixCls.value}-range-container`,\n      {\n        [`${prefixCls.value}-range-container-panel-only`]: hideTrigger.value,\n        [`${prefixCls.value}-range-container-shortcuts-placement-left`]:\n          showShortcuts.value && shortcutsPosition.value === 'left',\n        [`${prefixCls.value}-range-container-shortcuts-placement-right`]:\n          showShortcuts.value && shortcutsPosition.value === 'right',\n      },\n    ]);\n\n    const currentDateView = ref('date');\n\n    watch(visible, (newVal, oldVal) => {\n      if (newVal && !oldVal) {\n        currentDateView.value = 'date';\n      }\n    });\n\n    function getShortcutValue(shortcut: ShortcutType) {\n      return getDayjsValue(\n        normalizeRangeValue(\n          isFunction(shortcut.value) ? shortcut.value() : shortcut.value\n        ) as CalendarValue[],\n        shortcut.format || format.value\n      );\n    }\n\n    function onShortcutClick(shortcut: ShortcutType) {\n      emit('shortcut-click', getShortcutValue(shortcut), shortcut);\n    }\n    function onShortcutMouseEnter(shortcut: ShortcutType) {\n      emit('shortcut-mouse-enter', getShortcutValue(shortcut));\n    }\n    function onShortcutMouseLeave(shortcut: ShortcutType) {\n      emit('shortcut-mouse-leave', getShortcutValue(shortcut));\n    }\n\n    function onPanelCellClick(date: Dayjs) {\n      emit('cell-click', date);\n    }\n\n    function onPanelCellMouseEnter(date: Dayjs) {\n      emit('cell-mouse-enter', date);\n    }\n\n    function onConfirmBtnClick() {\n      emit('confirm');\n    }\n\n    function onStartTimePickerSelect(time: Dayjs) {\n      emit('time-picker-select', time, 'start');\n    }\n\n    function onEndTimePickerSelect(time: Dayjs) {\n      emit('time-picker-select', time, 'end');\n    }\n\n    function onStartPanelHeaderLabelClick(type: 'year' | 'month') {\n      emit('start-header-label-click', type);\n    }\n\n    function onEndPanelHeaderLabelClick(type: 'year' | 'month') {\n      emit('end-header-label-click', type);\n    }\n\n    function onStartHeaderPanelSelect(date: Dayjs) {\n      emit('start-header-select', date);\n    }\n\n    function onEndHeaderPanelSelect(date: Dayjs) {\n      emit('end-header-select', date);\n    }\n\n    function getDisabledDateFunc(index: 0 | 1) {\n      return isFunction(disabledDate?.value)\n        ? (current: Date) =>\n            disabledDate?.value?.(current, index === 0 ? 'start' : 'end') ||\n            false\n        : undefined;\n    }\n\n    function getDisabledTimeFunc(index: 0 | 1) {\n      return isFunction(disabledTime?.value)\n        ? (current: Date) =>\n            disabledTime?.value?.(current, index === 0 ? 'start' : 'end') ||\n            false\n        : undefined;\n    }\n\n    function getDateRenderFunc(index: 0 | 1) {\n      return isFunction(dateRender?.value)\n        ? (props: any) => {\n            const mergeProps = {\n              ...props,\n              type: index === 0 ? 'start' : 'end',\n            };\n            return dateRender?.value?.(mergeProps);\n          }\n        : undefined;\n    }\n\n    const shortcutsProps = reactive({\n      prefixCls,\n      shortcuts,\n      onItemClick: onShortcutClick,\n      onItemMouseEnter: onShortcutMouseEnter,\n      onItemMouseLeave: onShortcutMouseLeave,\n    });\n\n    const startPanelProps = computed(() => ({\n      ...startHeaderProps.value,\n      rangeValues: value.value,\n      disabledDate: getDisabledDateFunc(0),\n      dateRender: getDateRenderFunc(0),\n      onSelect: startHeaderMode.value\n        ? onStartHeaderPanelSelect\n        : onPanelCellClick,\n      onCellMouseEnter: onPanelCellMouseEnter,\n      onHeaderLabelClick: onStartPanelHeaderLabelClick,\n    }));\n\n    const endPanelProps = computed(() => ({\n      ...endHeaderProps.value,\n      rangeValues: value.value,\n      disabledDate: getDisabledDateFunc(1),\n      dateRender: getDateRenderFunc(1),\n      onSelect: endHeaderMode.value ? onEndHeaderPanelSelect : onPanelCellClick,\n      onCellMouseEnter: onPanelCellMouseEnter,\n      onHeaderLabelClick: onEndPanelHeaderLabelClick,\n    }));\n\n    return {\n      pick,\n      classNames,\n      showShortcuts,\n      shortcutsProps,\n      startPanelProps,\n      endPanelProps,\n      getDisabledTimeFunc,\n      onConfirmBtnClick,\n      currentDateView,\n      onStartTimePickerSelect,\n      onEndTimePickerSelect,\n      onStartHeaderPanelSelect,\n      onEndHeaderPanelSelect,\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/date-picker/range-picker.vue",
    "content": "<template>\n  <Trigger\n    v-if=\"!hideTrigger\"\n    trigger=\"click\"\n    animation-name=\"slide-dynamic-origin\"\n    auto-fit-transform-origin\n    :click-to-close=\"false\"\n    :popup-offset=\"4\"\n    v-bind=\"triggerProps\"\n    :unmount-on-close=\"unmountOnClose\"\n    :position=\"position\"\n    :disabled=\"triggerDisabled || readonly\"\n    :popup-visible=\"panelVisible\"\n    :popup-container=\"popupContainer\"\n    @popupVisibleChange=\"onPanelVisibleChange\"\n  >\n    <slot>\n      <DateRangeInput\n        ref=\"refInput\"\n        v-bind=\"$attrs\"\n        v-model:focusedIndex=\"focusedIndex\"\n        :size=\"size\"\n        :focused=\"panelVisible\"\n        :visible=\"panelVisible\"\n        :error=\"error\"\n        :disabled=\"disabled\"\n        :readonly=\"readonly || disabledInput\"\n        :allow-clear=\"allowClear && !readonly\"\n        :placeholder=\"computedPlaceholder\"\n        :input-value=\"inputValue\"\n        :value=\"panelValue\"\n        :format=\"computedFormat\"\n        @clear=\"onInputClear\"\n        @change=\"onInputChange\"\n        @pressEnter=\"onInputPressEnter\"\n      >\n        <template v-if=\"$slots.prefix\" #prefix>\n          <slot name=\"prefix\" />\n        </template>\n        <template #suffix-icon>\n          <slot name=\"suffix-icon\">\n            <IconCalendar />\n          </slot>\n        </template>\n        <template #separator>\n          <slot name=\"separator\">\n            {{ separator || '-' }}\n          </slot>\n        </template>\n      </DateRangeInput>\n    </slot>\n    <template #content>\n      <RangePickerPanel v-bind=\"rangePanelProps\" />\n    </template>\n  </Trigger>\n  <RangePickerPanel v-else v-bind=\"{ ...$attrs, ...rangePanelProps }\" />\n</template>\n<script lang=\"ts\">\nimport { Dayjs } from 'dayjs';\nimport {\n  computed,\n  defineComponent,\n  inject,\n  nextTick,\n  onUnmounted,\n  PropType,\n  reactive,\n  ref,\n  toRefs,\n  watch,\n  watchEffect,\n} from 'vue';\nimport { TimePickerProps } from '../time-picker/interface';\nimport {\n  DisabledTimeProps,\n  ShortcutType,\n  CalendarValue,\n  WeekStart,\n  Mode,\n} from './interface';\nimport { getPrefixCls } from '../_utils/global-config';\nimport { isArray, isBoolean } from '../_utils/is';\nimport pick from '../_utils/pick';\nimport { getFormattedValue, isValidInputValue } from '../time-picker/utils';\nimport {\n  getSortedDayjsArray,\n  isValueChange,\n  dayjs,\n  getNow,\n  getDateValue,\n  initializeDateLocale,\n} from '../_utils/date';\nimport useState from '../_hooks/use-state';\nimport {\n  isCompleteRangeValue,\n  isValidRangeValue,\n  mergeValueWithTime,\n} from './utils';\nimport useFormat from './hooks/use-format';\nimport useRangePickerState from './hooks/use-range-picker-state';\nimport useRangeHeaderValue from './hooks/use-range-header-value';\nimport Trigger, { TriggerProps } from '../trigger';\nimport DateRangeInput from '../_components/picker/input-range.vue';\nimport RangePickerPanel from './range-picker-panel.vue';\nimport useRangeTimePickerValue from './hooks/use-range-time-picker-value';\nimport useIsDisabledDate from './hooks/use-is-disabled-date';\nimport { omit } from '../_utils/omit';\nimport useMergeState from '../_hooks/use-merge-state';\nimport IconCalendar from '../icon/icon-calendar';\nimport useProvideDatePickerTransform from './hooks/use-provide-datepicker-transform';\nimport { EmitType } from '../_utils/types';\nimport { getReturnRangeValue } from './hooks/use-value-format';\nimport { Size } from '../_utils/constant';\nimport { useFormItem } from '../_hooks/use-form-item';\nimport { useI18n } from '../locale';\nimport { configProviderInjectionKey } from '../config-provider/context';\n\nexport default defineComponent({\n  name: 'RangePicker',\n  components: {\n    RangePickerPanel,\n    DateRangeInput,\n    Trigger,\n    IconCalendar,\n  },\n  inheritAttrs: false,\n  props: {\n    /**\n     * @zh 范围选择器的类型\n     * @en Type of range selector\n     * */\n    mode: {\n      type: String as PropType<'date' | 'year' | 'quarter' | 'month' | 'week'>,\n      default: 'date',\n    },\n    /**\n     * @zh 绑定值\n     * @en Value\n     */\n    modelValue: {\n      type: Array as PropType<(Date | string | number)[]>,\n    },\n    /**\n     * @zh 默认值\n     * @en Default value\n     */\n    defaultValue: {\n      type: Array as PropType<(Date | string | number)[]>,\n    },\n    /**\n     * @zh 默认面板显示的日期\n     * @en The date displayed in the default panel\n     * */\n    pickerValue: {\n      type: Array as PropType<(Date | string | number)[]>,\n    },\n    /**\n     * @zh 面板显示的日期\n     * @en Date displayed on the panel\n     * */\n    defaultPickerValue: {\n      type: Array as PropType<(Date | string | number)[]>,\n    },\n    /**\n     * @zh 是否禁用\n     * @en Whether to disable\n     * */\n    disabled: {\n      type: [Boolean, Array] as PropType<boolean | boolean[]>,\n      default: false,\n    },\n    /**\n     * @zh 每周的第一天开始于周几，0 - 周日，1 - 周一，以此类推。\n     * @en The first day of the week starts on the day of the week, 0-Sunday, 1-Monday, and so on.\n     * @type 0 | 1 | 2 | 3 | 4 | 5 | 6\n     * @version 2-6 from 2.21.0\n     */\n    dayStartOfWeek: {\n      type: Number as PropType<WeekStart>,\n      default: 0,\n    },\n    /**\n     * @zh 展示日期的格式，参考[字符串解析格式](#字符串解析格式)\n     * @en Display the format of the date, refer to [String Parsing Format](#string-parsing-format)\n     * */\n    format: {\n      type: String,\n    },\n    /**\n     * @zh 值的格式，对 `value` `defaultValue` `pickerValue` `defaultPickerValue` 以及事件中的返回值生效，支持设置为时间戳，Date 和字符串（参考[字符串解析格式](#字符串解析格式)）。如果没有指定，将格式化为字符串，格式同 `format`。\n     * @en The format of the value, valid for `value` `defaultValue` `pickerValue` `defaultPickerValue` and the return value in the event, supports setting as timestamp, Date and string (refer to [String parsing format](#string-parsing-format) ). If not specified, it will be formatted as a string, in the same format as `format`.\n     * @version 2.16.0\n     */\n    valueFormat: {\n      type: String as PropType<'timestamp' | 'Date' | string>,\n    },\n    /**\n     * @zh 是否增加时间选择\n     * @en Whether to increase time selection\n     * */\n    showTime: {\n      type: Boolean,\n    },\n    /**\n     * @zh 时间显示的参数，参考 [TimePickerProps](/vue/component/time-picker)\n     * @en Time display parameters, refer to [TimePickerProps](/vue/component/time-picker)\n     * */\n    timePickerProps: {\n      type: Object as PropType<Partial<TimePickerProps>>,\n    },\n    /**\n     * @zh 提示文案\n     * @en Prompt copy\n     * */\n    placeholder: {\n      type: Array as PropType<string[]>,\n    },\n    /**\n     * @zh 不可选的日期\n     * @en Non-selectable date\n     * */\n    disabledDate: {\n      type: Function as PropType<\n        (current: Date, type: 'start' | 'end') => boolean\n      >,\n    },\n    /**\n     * @zh 不可选取的时间\n     * @en Unselectable time\n     * */\n    disabledTime: {\n      type: Function as PropType<\n        (current: Date, type: 'start' | 'end') => DisabledTimeProps\n      >,\n    },\n    /**\n     * @zh 范围选择器输入框内的分割符号\n     * @en The segmentation symbol in the input box of the range selector\n     * */\n    separator: {\n      type: String,\n    },\n    /**\n     * @zh 时间是否会交换，默认情况下时间会影响和参与开始和结束值的排序，如果要固定时间顺序，可将其关闭。\n     * @en Whether the time will be exchanged, by default time will affect and participate in the ordering of start and end values, if you want to fix the time order, you can turn it off.\n     * @version 2.25.0\n     * */\n    exchangeTime: {\n      type: Boolean,\n      default: true,\n    },\n    popupContainer: {\n      type: [String, Object] as PropType<string | HTMLElement>,\n    },\n    locale: {\n      type: Object as PropType<Record<string, any>>,\n    },\n    hideTrigger: {\n      type: Boolean,\n    },\n    allowClear: {\n      type: Boolean,\n      default: true,\n    },\n    readonly: {\n      type: Boolean,\n    },\n    error: {\n      type: Boolean,\n    },\n    size: {\n      type: String as PropType<Size>,\n    },\n    shortcuts: {\n      type: Array as PropType<ShortcutType[]>,\n      default: () => [],\n    },\n    shortcutsPosition: {\n      type: String as PropType<'left' | 'bottom' | 'right'>,\n      default: 'bottom',\n    },\n    position: {\n      type: String as PropType<'top' | 'tl' | 'tr' | 'bottom' | 'bl' | 'br'>,\n      default: 'bl',\n    },\n    popupVisible: {\n      type: Boolean,\n      default: undefined,\n    },\n    defaultPopupVisible: {\n      type: Boolean,\n    },\n    triggerProps: {\n      type: Object as PropType<TriggerProps>,\n    },\n    unmountOnClose: {\n      type: Boolean,\n    },\n    previewShortcut: {\n      type: Boolean,\n      default: true,\n    },\n    showConfirmBtn: {\n      type: Boolean,\n    },\n    /**\n     * @zh 是否禁止键盘输入日期\n     * @en Whether input is disabled with the keyboard.\n     * @version 2.43.0\n     */\n    disabledInput: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 是否启用缩写\n     * @en Whether to enable abbreviation\n     */\n    abbreviation: {\n      type: Boolean,\n      default: true,\n    },\n  },\n  emits: {\n    /**\n     * @zh 组件值发生改变\n     * @en The component value changes\n     * @param {(Date | string | number | undefined)[] | undefined} value\n     * @param {(Date | undefined)[] | undefined} date\n     * @param {(string | undefined)[] | undefined} dateString\n     */\n    'change': (\n      value: (CalendarValue | undefined)[] | undefined,\n      date: (Date | undefined)[] | undefined,\n      dateString: (string | undefined)[] | undefined\n    ) => {\n      return true;\n    },\n    'update:modelValue': (value: (CalendarValue | undefined)[] | undefined) => {\n      return true;\n    },\n    /**\n     * @zh 选中日期发生改变但组件值未改变\n     * @en The selected date has changed but the component value has not changed\n     * @param {(Date | string | number | undefined)[]} value\n     * @param {(Date | undefined)[]} date\n     * @param {(string | undefined)[]} dateString\n     */\n    'select': (\n      value: (CalendarValue | undefined)[],\n      date: (Date | undefined)[],\n      dateString: (string | undefined)[]\n    ) => {\n      return true;\n    },\n    /**\n     * @zh 打开或关闭弹出框\n     * @en Open or close the pop-up box\n     * @param {boolean} visible\n     */\n    'popup-visible-change': (visible: boolean) => {\n      return true;\n    },\n    'update:popupVisible': (visible: boolean) => {\n      return true;\n    },\n    /**\n     * @zh 点击确认按钮\n     * @en Click the confirm button\n     * @param {Date | string | number[]} value\n     * @param {Date[]} date\n     * @param {string[]} dateString\n     */\n    'ok': (value: CalendarValue[], date: Date[], dateString: string[]) => {\n      return true;\n    },\n    /**\n     * @zh 点击清除按钮\n     * @en Click the clear button\n     */\n    'clear': () => {\n      return true;\n    },\n    /**\n     * @zh 点击快捷选项\n     * @en Click on the shortcut option\n     * @param {ShortcutType} shortcut\n     */\n    'select-shortcut': (shortcut: ShortcutType) => {\n      return true;\n    },\n    /**\n     * @zh 面板日期改变\n     * @en Panel date change\n     * @param {Date | string | number[]} value\n     * @param {Date[]} date\n     * @param {string[]} dateString\n     */\n    'picker-value-change': (\n      value: CalendarValue[],\n      date: Date[],\n      dateString: string[]\n    ) => {\n      return true;\n    },\n    'update:pickerValue': (value: CalendarValue[]) => {\n      return true;\n    },\n  },\n  setup(props, { emit, slots }) {\n    const {\n      mode,\n      showTime,\n      format,\n      modelValue,\n      defaultValue,\n      popupVisible,\n      defaultPopupVisible,\n      placeholder,\n      timePickerProps,\n      disabled,\n      disabledDate,\n      disabledTime,\n      locale,\n      pickerValue,\n      defaultPickerValue,\n      valueFormat,\n      size,\n      error,\n      dayStartOfWeek,\n      exchangeTime,\n      previewShortcut,\n      showConfirmBtn,\n    } = toRefs(props);\n\n    const { locale: globalLocal } = useI18n();\n    const configCtx = inject(configProviderInjectionKey, undefined);\n    watchEffect(() => {\n      initializeDateLocale(globalLocal.value, dayStartOfWeek.value);\n    });\n\n    const mergedExchangeTime = computed(() => {\n      return !(!exchangeTime.value || !(configCtx?.exchangeTime ?? true));\n    });\n\n    const {\n      mergedSize,\n      mergedDisabled: formDisabled,\n      mergedError,\n      eventHandlers,\n    } = useFormItem({\n      size,\n      error,\n    });\n\n    const datePickerT = useProvideDatePickerTransform(\n      reactive({\n        locale,\n      })\n    );\n\n    const prefixCls = getPrefixCls('picker');\n\n    const computedPlaceholder = computed(\n      () =>\n        placeholder?.value ||\n        ({\n          date: datePickerT('datePicker.rangePlaceholder.date'),\n          month: datePickerT('datePicker.rangePlaceholder.month'),\n          year: datePickerT('datePicker.rangePlaceholder.year'),\n          week: datePickerT('datePicker.rangePlaceholder.week'),\n          quarter: datePickerT('datePicker.rangePlaceholder.quarter'),\n        }[mode.value] as unknown as string[]) ||\n        (datePickerT('datePicker.rangePlaceholder.date') as unknown as string[])\n    );\n\n    const {\n      format: computedFormat,\n      valueFormat: returnValueFormat,\n      parseValueFormat,\n    } = useFormat(\n      reactive({\n        mode,\n        format,\n        showTime,\n        valueFormat,\n      })\n    );\n\n    const disabledArray = computed(() => {\n      const disabled0 =\n        disabled.value === true ||\n        formDisabled.value ||\n        (isArray(disabled.value) && disabled.value[0] === true);\n      const disabled1 =\n        disabled.value === true ||\n        formDisabled.value ||\n        (isArray(disabled.value) && disabled.value[1] === true);\n      return [disabled0, disabled1];\n    });\n\n    const triggerDisabled = computed(\n      () => disabledArray.value[0] && disabledArray.value[1]\n    );\n\n    function getFocusedIndex(cur = 0) {\n      return disabledArray.value[cur] ? cur ^ 1 : cur;\n    }\n\n    const refInput = ref();\n    const focusedIndex = ref(getFocusedIndex());\n    const nextFocusedIndex = computed(() => {\n      const cur = focusedIndex.value;\n      const next = cur ^ 1;\n      return disabledArray.value[next] ? cur : next;\n    });\n    const isNextDisabled = computed(\n      () => disabledArray.value[focusedIndex.value ^ 1]\n    );\n    // 选中值\n    const { value: selectedValue, setValue: setSelectedValue } =\n      useRangePickerState(\n        reactive({\n          modelValue,\n          defaultValue,\n          format: parseValueFormat,\n        })\n      );\n    // 操作值\n    const [processValue, setProcessValue] = useState<\n      Array<Dayjs | undefined> | undefined\n    >();\n    // 预览值\n    const [previewValue, setPreviewValue] = useState<\n      Array<Dayjs | undefined> | undefined\n    >();\n    // 待确认的选中值\n    const forSelectedValue = computed(\n      () => processValue.value ?? selectedValue.value\n    );\n    // 面板显示的值\n    const panelValue = computed(\n      () => previewValue.value ?? processValue.value ?? selectedValue.value\n    );\n\n    // input 操作的值\n    const [inputValue, setInputValue] = useState<\n      Array<string | undefined> | undefined\n    >();\n\n    const startHeaderMode = ref<'year' | 'month' | undefined>();\n\n    const endHeaderMode = ref<'year' | 'month' | undefined>();\n\n    const [panelVisible, setLocalPanelVisible] = useMergeState(\n      defaultPopupVisible.value,\n      reactive({ value: popupVisible })\n    );\n    const setPanelVisible = (newVisible: boolean) => {\n      if (panelVisible.value !== newVisible) {\n        setLocalPanelVisible(newVisible);\n        emit('popup-visible-change', newVisible);\n        emit('update:popupVisible', newVisible);\n      }\n    };\n\n    // headerValue is used to generate the content displayed on the panel\n    const {\n      startHeaderValue,\n      endHeaderValue,\n      startHeaderOperations,\n      endHeaderOperations,\n      resetHeaderValue,\n      setHeaderValue,\n    } = useRangeHeaderValue(\n      reactive({\n        mode,\n        startHeaderMode,\n        endHeaderMode,\n        value: pickerValue,\n        defaultValue: defaultPickerValue,\n        selectedValue: panelValue,\n        format: parseValueFormat,\n        onChange: (newVal: Dayjs[]) => {\n          const returnValue = getReturnRangeValue(\n            newVal,\n            returnValueFormat.value\n          );\n          const formattedValue = getFormattedValue(\n            newVal,\n            parseValueFormat.value\n          ) as string[];\n          const dateValue = getDateValue(newVal);\n          emit('picker-value-change', returnValue, dateValue, formattedValue);\n          emit('update:pickerValue', returnValue);\n        },\n      })\n    );\n\n    function onStartPanelHeaderLabelClick(type: 'year' | 'month') {\n      startHeaderMode.value = type;\n    }\n\n    function onEndPanelHeaderLabelClick(type: 'year' | 'month') {\n      endHeaderMode.value = type;\n    }\n\n    function onStartPanelHeaderSelect(date: Dayjs) {\n      let newStartValue = startHeaderValue.value;\n      newStartValue = newStartValue.set('year', date.year());\n      if (startHeaderMode.value === 'month') {\n        newStartValue = newStartValue.set('month', date.month());\n      }\n      setHeaderValue([newStartValue, endHeaderValue.value]);\n      startHeaderMode.value = undefined;\n    }\n\n    function onEndPanelHeaderSelect(date: Dayjs) {\n      let newEndValue = endHeaderValue.value;\n      newEndValue = newEndValue.set('year', date.year());\n      if (endHeaderMode.value === 'month') {\n        newEndValue = newEndValue.set('month', date.month());\n      }\n      setHeaderValue([startHeaderValue.value, newEndValue]);\n      endHeaderMode.value = undefined;\n    }\n\n    const footerValue = ref([\n      panelValue.value[0] || getNow(),\n      panelValue.value[1] || getNow(),\n    ]);\n    watch(panelValue, () => {\n      const [value0, value1] = panelValue.value;\n      footerValue.value[0] = value0 || footerValue.value[0];\n      footerValue.value[1] = value1 || footerValue.value[1];\n    });\n\n    const [timePickerValue, setTimePickerValue, resetTimePickerValue] =\n      useRangeTimePickerValue(\n        reactive({\n          timePickerProps,\n          selectedValue: panelValue,\n        })\n      );\n\n    const isDateTime = computed(() => mode.value === 'date' && showTime.value);\n    const hasTime = computed(() => isDateTime.value || timePickerProps.value);\n\n    const isDisabledDate = useIsDisabledDate(\n      reactive({\n        mode,\n        isRange: true,\n        showTime,\n        disabledDate,\n        disabledTime,\n      })\n    );\n\n    // needConfirm logic\n    const needConfirm = computed(\n      () => isDateTime.value || showConfirmBtn.value\n    );\n    const confirmBtnDisabled = computed(\n      () =>\n        needConfirm.value &&\n        (!isCompleteRangeValue(forSelectedValue.value) ||\n          isDisabledDate(forSelectedValue.value[0], 'start') ||\n          isDisabledDate(forSelectedValue.value[1], 'end'))\n    );\n\n    watch(panelVisible, (newVisible) => {\n      startHeaderMode.value = undefined;\n      endHeaderMode.value = undefined;\n\n      setProcessValue(undefined);\n      setPreviewValue(undefined);\n      // open\n      if (newVisible) {\n        resetHeaderValue();\n        resetTimePickerValue();\n        focusedIndex.value = getFocusedIndex(focusedIndex.value);\n        nextTick(() => focusInput(focusedIndex.value));\n      }\n      // close\n      if (!newVisible) {\n        setInputValue(undefined);\n      }\n    });\n\n    watch(focusedIndex, () => {\n      if (props.disabledInput) {\n        focusInput(focusedIndex.value);\n        setInputValue(undefined);\n      }\n    });\n\n    function emitChange(\n      value: Array<Dayjs | undefined> | undefined,\n      emitOk?: boolean\n    ) {\n      const returnValue = value\n        ? getReturnRangeValue(value, returnValueFormat.value)\n        : undefined;\n      const formattedValue = getFormattedValue(value, parseValueFormat.value);\n      const dateValue = getDateValue(value);\n      if (isValueChange(value, selectedValue.value)) {\n        emit('update:modelValue', returnValue);\n        emit('change', returnValue, dateValue, formattedValue);\n        eventHandlers.value?.onChange?.();\n      }\n      if (emitOk) {\n        emit('ok', returnValue, dateValue, formattedValue);\n      }\n    }\n\n    function getSortedDayjsArrayByExchangeTimeOrNot(newValue: Dayjs[]) {\n      let sortedValue = getSortedDayjsArray(newValue);\n      if (hasTime.value && !mergedExchangeTime.value) {\n        sortedValue = [\n          getMergedOpValue(sortedValue[0], newValue[0]),\n          getMergedOpValue(sortedValue[1], newValue[1]),\n        ];\n      }\n      return sortedValue;\n    }\n\n    function confirm(\n      value: Array<Dayjs | undefined> | undefined,\n      showPanel?: boolean,\n      emitOk?: boolean\n    ) {\n      if (\n        isDisabledDate(value?.[0], 'start') ||\n        isDisabledDate(value?.[1], 'end')\n      ) {\n        return;\n      }\n\n      let newValue = value ? [...value] : undefined;\n\n      if (isCompleteRangeValue(newValue)) {\n        newValue = getSortedDayjsArrayByExchangeTimeOrNot(newValue);\n      }\n\n      emitChange(newValue, emitOk);\n      setSelectedValue(newValue || []);\n      setProcessValue(undefined);\n      setPreviewValue(undefined);\n      setInputValue(undefined);\n      startHeaderMode.value = undefined;\n      endHeaderMode.value = undefined;\n\n      if (isBoolean(showPanel)) {\n        setPanelVisible(showPanel);\n      }\n    }\n\n    function emitSelectEvent(value: Array<Dayjs | undefined>) {\n      const returnValue = getReturnRangeValue(value, returnValueFormat.value);\n      const formattedValue = getFormattedValue(value, parseValueFormat.value);\n      const dateValue = getDateValue(value);\n      emit('select', returnValue, dateValue, formattedValue);\n    }\n\n    function select(\n      value: Array<Dayjs | undefined>,\n      options?: {\n        emitSelect?: boolean;\n        updateHeader?: boolean;\n      }\n    ) {\n      const { emitSelect = false, updateHeader = false } = options || {};\n\n      let newValue = [...value];\n      if (isCompleteRangeValue(newValue)) {\n        newValue = getSortedDayjsArrayByExchangeTimeOrNot(newValue);\n      }\n\n      setProcessValue(newValue);\n      setPreviewValue(undefined);\n      setInputValue(undefined);\n      startHeaderMode.value = undefined;\n      endHeaderMode.value = undefined;\n\n      if (emitSelect) {\n        emitSelectEvent(newValue);\n      }\n\n      if (updateHeader) {\n        resetHeaderValue();\n      }\n    }\n\n    function preview(\n      value: Array<Dayjs | undefined>,\n      options?: {\n        emitSelect?: boolean;\n        updateHeader?: boolean;\n      }\n    ) {\n      const { updateHeader = false } = options || {};\n      setPreviewValue(value);\n      setInputValue(undefined);\n\n      if (updateHeader) {\n        resetHeaderValue();\n      }\n    }\n\n    function focusInput(index?: number) {\n      refInput.value && refInput.value.focus && refInput.value.focus(index);\n    }\n\n    function getMergedOpValue(date: Dayjs, time?: Dayjs) {\n      if (!hasTime.value) return date;\n      return mergeValueWithTime(getNow(), date, time);\n    }\n\n    function onPanelVisibleChange(visible: boolean) {\n      setPanelVisible(visible);\n    }\n\n    function onPanelCellMouseEnter(date: Dayjs) {\n      if (\n        processValue.value &&\n        panelValue.value[nextFocusedIndex.value] &&\n        (!needConfirm.value || !isCompleteRangeValue(processValue.value))\n      ) {\n        const newValue = [...panelValue.value];\n        const mergedOpValue = getMergedOpValue(\n          date,\n          timePickerValue.value[focusedIndex.value]\n        );\n        newValue[focusedIndex.value] = mergedOpValue;\n\n        preview(newValue);\n      }\n    }\n\n    function getValueToModify(isTime = false) {\n      if (isNextDisabled.value) return [...selectedValue.value];\n      if (processValue.value) {\n        return isTime || !isCompleteRangeValue(processValue.value)\n          ? [...processValue.value]\n          : [];\n      }\n      return isTime ? [...selectedValue.value] : [];\n    }\n\n    function onPanelCellClick(date: Dayjs) {\n      const newValue = getValueToModify();\n      const mergedOpValue = getMergedOpValue(\n        date,\n        timePickerValue.value[focusedIndex.value]\n      );\n      newValue[focusedIndex.value] = mergedOpValue;\n\n      emitSelectEvent(newValue);\n      if (!needConfirm.value && isCompleteRangeValue(newValue)) {\n        confirm(newValue, false);\n      } else {\n        select(newValue);\n        if (!isCompleteRangeValue(newValue)) {\n          focusedIndex.value = nextFocusedIndex.value;\n        } else {\n          focusedIndex.value = 0;\n        }\n      }\n    }\n\n    function onTimePickerSelect(time: Dayjs, type: 'start' | 'end') {\n      const updateIndex = type === 'start' ? 0 : 1;\n      const mergedOpValue = getMergedOpValue(\n        timePickerValue.value[updateIndex],\n        time\n      );\n      const newTimeValue = [...timePickerValue.value];\n      newTimeValue[updateIndex] = mergedOpValue;\n      setTimePickerValue(newTimeValue);\n\n      const newValue = getValueToModify(true);\n      if (newValue[updateIndex]) {\n        newValue[updateIndex] = mergedOpValue;\n        select(newValue, { emitSelect: true });\n      }\n    }\n\n    let clearShortcutPreviewTimer: any;\n    onUnmounted(() => {\n      clearTimeout(clearShortcutPreviewTimer);\n    });\n\n    function onPanelShortcutMouseEnter(value: Array<Dayjs | undefined>) {\n      clearTimeout(clearShortcutPreviewTimer);\n      preview(value, { updateHeader: true });\n    }\n\n    function onPanelShortcutMouseLeave() {\n      clearTimeout(clearShortcutPreviewTimer);\n      clearShortcutPreviewTimer = setTimeout(() => {\n        setPreviewValue(undefined);\n        setInputValue(undefined);\n        resetHeaderValue();\n      }, 100);\n    }\n\n    function onPanelShortcutClick(\n      value: Array<Dayjs | undefined>,\n      shortcut: ShortcutType\n    ) {\n      emit('select-shortcut', shortcut);\n      confirm(value, false);\n    }\n\n    function onPanelConfirm() {\n      confirm(panelValue.value, false, true);\n    }\n\n    function onInputClear(e: Event) {\n      e.stopPropagation();\n      confirm(undefined);\n      emit('clear');\n    }\n\n    function onInputChange(e: any) {\n      setPanelVisible(true);\n\n      const targetValue = e.target.value;\n\n      // TODO: Null value should be restored to the current value, invalid when deleted as a whole\n      if (!targetValue) {\n        setInputValue(undefined);\n        return;\n      }\n\n      const formattedPanelValue = getFormattedValue(\n        panelValue.value,\n        computedFormat.value\n      ) as Array<string | undefined>;\n\n      const newInputValue = isArray(inputValue.value)\n        ? [...inputValue.value]\n        : formattedPanelValue || [];\n\n      newInputValue[focusedIndex.value] = targetValue;\n\n      setInputValue(newInputValue);\n\n      if (!isValidInputValue(targetValue, computedFormat.value)) return;\n\n      const targetValueDayjs = dayjs(targetValue, computedFormat.value);\n\n      if (\n        isDisabledDate(\n          targetValueDayjs,\n          focusedIndex.value === 0 ? 'start' : 'end'\n        )\n      )\n        return;\n\n      const newValue = isArray(panelValue.value) ? [...panelValue.value] : [];\n      newValue[focusedIndex.value] = targetValueDayjs;\n\n      select(newValue, { updateHeader: true });\n    }\n\n    function onInputPressEnter() {\n      if (isValidRangeValue(panelValue.value)) {\n        confirm(panelValue.value, false);\n      } else {\n        focusedIndex.value = nextFocusedIndex.value;\n      }\n    }\n\n    const computedTimePickerProps = computed(() => ({\n      format: computedFormat.value,\n      ...omit(timePickerProps?.value || {}, ['defaultValue']),\n      visible: panelVisible.value,\n    }));\n\n    const headerIcons = computed(() => ({\n      prev: slots['icon-prev'],\n      prevDouble: slots['icon-prev-double'],\n      next: slots['icon-next'],\n      nextDouble: slots['icon-next-double'],\n    }));\n\n    const startHeaderProps = reactive({\n      headerValue: startHeaderValue,\n      headerOperations: startHeaderOperations,\n      headerIcons,\n    });\n\n    const endHeaderProps = reactive({\n      headerValue: endHeaderValue,\n      headerOperations: endHeaderOperations,\n      headerIcons,\n    });\n\n    const rangePanelProps = computed(() => ({\n      ...pick(props, [\n        'mode',\n        'showTime',\n        'shortcuts',\n        'shortcutsPosition',\n        'dayStartOfWeek',\n        'disabledDate',\n        'disabledTime',\n        'hideTrigger',\n        'abbreviation',\n      ]),\n      prefixCls,\n      format: parseValueFormat.value,\n      value: panelValue.value,\n      showConfirmBtn: needConfirm.value,\n      confirmBtnDisabled: confirmBtnDisabled.value,\n      timePickerValue: timePickerValue.value,\n      timePickerProps: computedTimePickerProps.value,\n      extra: slots.extra,\n      dateRender: slots.cell,\n      startHeaderProps,\n      endHeaderProps,\n      footerValue: footerValue.value,\n      disabled: disabledArray.value,\n      visible: panelVisible.value,\n      onCellClick: onPanelCellClick,\n      onCellMouseEnter: onPanelCellMouseEnter,\n      onShortcutClick: onPanelShortcutClick,\n      onShortcutMouseEnter: previewShortcut.value\n        ? onPanelShortcutMouseEnter\n        : undefined,\n      onShortcutMouseLeave: previewShortcut.value\n        ? onPanelShortcutMouseLeave\n        : undefined,\n      onConfirm: onPanelConfirm,\n      onTimePickerSelect,\n      startHeaderMode: startHeaderMode.value,\n      endHeaderMode: endHeaderMode.value,\n      onStartHeaderLabelClick: onStartPanelHeaderLabelClick,\n      onEndHeaderLabelClick: onEndPanelHeaderLabelClick,\n      onStartHeaderSelect: onStartPanelHeaderSelect,\n      onEndHeaderSelect: onEndPanelHeaderSelect,\n    }));\n\n    return {\n      prefixCls,\n      refInput,\n      computedFormat,\n      computedPlaceholder,\n      panelVisible,\n      panelValue,\n      inputValue,\n      focusedIndex,\n      triggerDisabled,\n      mergedSize,\n      mergedError,\n      onPanelVisibleChange,\n      onInputClear,\n      onInputChange,\n      onInputPressEnter,\n      rangePanelProps,\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/date-picker/style/date.less",
    "content": "@import '../../time-picker/style/token.less';\n\n@date-panel-prefix-cls: ~'@{prefix}-panel-date';\n@time-picker-prefix-cls: ~'@{prefix}-timepicker';\n\n@datepicker-timepicker-height: 276px;\n\n.@{date-panel-prefix-cls} {\n  display: flex;\n  box-sizing: border-box;\n\n  &-inner {\n    width: @picker-panel-date-width;\n  }\n\n  &-inner .@{prefix}-picker-body {\n    padding-top: 0;\n  }\n\n  &-timepicker {\n    display: flex;\n    flex-direction: column;\n    border-left: 1px solid @picker-panel-color-border;\n\n    &-title {\n      width: 100%;\n      height: 40px;\n      color: var(~'@{arco-cssvars-prefix}-color-text-1');\n      font-weight: 400;\n      font-size: 14px;\n      line-height: 40px;\n      text-align: center;\n      border-bottom: 1px solid @picker-panel-color-border;\n    }\n\n    .@{time-picker-prefix-cls} {\n      height: @datepicker-timepicker-height;\n      padding: 0 6px;\n      overflow: hidden;\n\n      &-column {\n        box-sizing: border-box;\n        width: auto;\n        height: 100%;\n        padding: 0 4px;\n\n        &::-webkit-scrollbar {\n          width: 0;\n        }\n      }\n\n      &-column:not(:last-child) {\n        border-right: 0;\n      }\n\n      ul::after {\n        height: @datepicker-timepicker-height - @timepicker-cell-height -\n          @timepicker-cell-spacing * 2;\n      }\n\n      &-cell {\n        width: 36px;\n\n        &-inner {\n          padding-left: 10px;\n        }\n      }\n    }\n  }\n\n  &-footer {\n    border-right: 1px solid @picker-panel-color-border;\n  }\n\n  &-with-view-tabs {\n    flex-direction: column;\n    min-width: 265px;\n\n    .@{date-panel-prefix-cls}-timepicker {\n      .@{time-picker-prefix-cls} {\n        &-column {\n          flex: 1;\n\n          &::-webkit-scrollbar {\n            width: 0;\n          }\n        }\n\n        &-cell {\n          width: 100%;\n          text-align: center;\n\n          &-inner {\n            padding-left: 0;\n          }\n        }\n      }\n    }\n  }\n\n  &-view-tabs {\n    display: flex;\n    border-top: 1px solid @picker-panel-color-border;\n  }\n\n  &-view-tab-pane {\n    flex: 1;\n    height: @datepicker-view-tabs-height;\n    color: @datepicker-view-tab-pane-color-text_unactive;\n    font-size: @datepicker-view-tab-pane-font-size;\n    line-height: @datepicker-view-tabs-height;\n    text-align: center;\n    border-right: 1px solid @picker-panel-color-border;\n    cursor: pointer;\n\n    &:last-child {\n      border-right: none;\n    }\n\n    &-text {\n      margin-left: @datepicker-view-tab-pane-spacing-text-icon;\n    }\n\n    &-active {\n      color: @datepicker-view-tab-pane-color-text_active;\n    }\n  }\n}\n"
  },
  {
    "path": "packages/web-vue/components/date-picker/style/index.less",
    "content": "@import '../../_components/picker/style/index.less';\n@import './token.less';\n\n@picker-prefix-cls: ~'@{prefix}-picker';\n\n.@{prefix}-picker-container,\n.@{prefix}-picker-range-container {\n  box-sizing: border-box;\n  min-height: 60px;\n  overflow: hidden;\n  background-color: var(~'@{arco-cssvars-prefix}-color-bg-popup');\n  border: 1px solid @picker-panel-color-border;\n  border-radius: @picker-container-border-radius;\n  box-shadow: @popup-box-shadow-base;\n\n  &-shortcuts-placement-left,\n  &-shortcuts-placement-right {\n    display: flex;\n    align-items: flex-start;\n\n    > .@{prefix}-picker-shortcuts {\n      display: flex;\n      flex-direction: column;\n      box-sizing: border-box;\n      padding: 5px 8px;\n      overflow-x: hidden;\n      overflow-y: auto;\n\n      > * {\n        margin: 5px 0;\n      }\n    }\n  }\n\n  &-shortcuts-placement-left {\n    .@{picker-prefix-cls}-panel-wrapper,\n    .@{picker-prefix-cls}-range-panel-wrapper {\n      border-left: 1px solid @picker-panel-color-border;\n    }\n  }\n\n  &-shortcuts-placement-right {\n    .@{picker-prefix-cls}-panel-wrapper,\n    .@{picker-prefix-cls}-range-panel-wrapper {\n      border-right: 1px solid @picker-panel-color-border;\n    }\n  }\n}\n\n// panel only\n.@{prefix}-picker-container-panel-only,\n.@{prefix}-picker-range-container-panel-only {\n  box-shadow: none;\n}\n.@{prefix}-picker-container-panel-only .@{prefix}-panel-date-inner,\n.@{prefix}-picker-range-container-panel-only .@{prefix}-panel-date-inner {\n  width: 100%;\n}\n.@{prefix}-picker-range-container-panel-only .@{prefix}-panel-date {\n  width: 100%;\n}\n\n.@{picker-prefix-cls} {\n  &-header {\n    display: flex;\n    padding: 8px 16px;\n    border-bottom: 1px solid @picker-panel-color-border;\n\n    &-title {\n      flex: 1;\n      color: var(~'@{arco-cssvars-prefix}-color-text-1');\n      font-size: 14px;\n      line-height: 24px;\n      text-align: center;\n    }\n\n    &-icon {\n      width: 24px;\n      height: 24px;\n      margin-right: 2px;\n      margin-left: 2px;\n      color: @picker-color-switch-icon;\n      font-size: 12px;\n      line-height: 24px;\n      text-align: center;\n      background-color: @picker-color-bg-switch-icon;\n      border-radius: 50%;\n      transition: all @transition-duration-1 @transition-timing-function-linear;\n      user-select: none;\n    }\n\n    &-icon:not(&-icon-hidden) {\n      cursor: pointer;\n\n      &:hover {\n        background-color: @picker-color-bg-switch-icon_hover;\n      }\n    }\n\n    &-label {\n      padding: 2px;\n      border-radius: 2px;\n      cursor: pointer;\n      transition: all @transition-duration-1;\n\n      &:hover {\n        background-color: @picker-panel-color-bg-label_hover;\n      }\n    }\n  }\n\n  &-body {\n    padding: 14px 16px;\n  }\n\n  &-week-list {\n    display: flex;\n    box-sizing: border-box;\n    width: 100%;\n    padding: 14px 16px 0 16px;\n\n    &-item {\n      flex: 1;\n      height: 32px;\n      padding: 0;\n      color: #7d7d7f;\n      font-weight: 400;\n      line-height: 32px;\n      text-align: center;\n    }\n  }\n\n  &-row {\n    display: flex;\n    padding: 2px 0;\n  }\n\n  &-cell {\n    flex: 1;\n  }\n\n  &-cell &-date {\n    display: flex;\n    justify-content: center;\n    box-sizing: border-box;\n    width: 100%;\n    height: 100%;\n    padding: @picker-panel-cell-padding-vertical 0;\n    cursor: pointer;\n  }\n\n  &-date-value {\n    min-width: @picker-panel-cell-circle-height;\n    height: @picker-panel-cell-circle-height;\n    color: @picker-color-cell-text-not-in-view;\n    font-size: 14px;\n    line-height: @picker-panel-cell-circle-height;\n    text-align: center;\n    border-radius: @picker-panel-border-radius-cell_selected;\n    cursor: pointer;\n  }\n\n  &-cell-in-view &-date-value {\n    color: @picker-color-cell-text-in-view;\n    font-weight: @picker-cell-font-weight-in-view;\n  }\n\n  &-cell-selected &-date-value {\n    color: @picker-panel-color-text-cell_selected;\n    background-color: @picker-panel-color-bg-cell_selected;\n    transition: background-color @transition-duration-1\n      @transition-timing-function-linear;\n  }\n\n  &-cell-in-view:not(&-cell-selected):not(&-cell-range-start):not(&-cell-range-end):not(&-cell-disabled):not(&-cell-week)\n    &-date-value:hover {\n    color: @picker-panel-color-text-cell_hover;\n    background-color: @picker-panel-color-bg-cell_hover;\n  }\n\n  &-cell-today {\n    position: relative;\n\n    &::after {\n      position: absolute;\n      bottom: -2px;\n      left: 50%;\n      display: block;\n      width: 4px;\n      height: 4px;\n      margin-left: -2px;\n      background-color: @picker-panel-color-current-time-dot;\n      border-radius: 50%;\n      content: '';\n    }\n  }\n\n  &-cell-in-range &-date {\n    background-color: @picker-color-bg-cell-in-range;\n  }\n\n  &-cell-range-start &-date {\n    border-top-left-radius: @picker-panel-cell-boundary-border-radius;\n    border-bottom-left-radius: @picker-panel-cell-boundary-border-radius;\n  }\n\n  &-cell-range-end &-date {\n    border-top-right-radius: @picker-panel-cell-boundary-border-radius;\n    border-bottom-right-radius: @picker-panel-cell-boundary-border-radius;\n  }\n\n  &-cell-in-range-near-hover &-date {\n    border-radius: 0;\n  }\n\n  &-cell-range-start &-date-value,\n  &-cell-range-end &-date-value {\n    color: @picker-color-text-cell-range-boundary;\n    background-color: @picker-color-bg-cell-range-boundary;\n    border-radius: @picker-panel-border-radius-cell_selected;\n  }\n\n  &-cell-hover-in-range &-date {\n    background-color: @picker-color-bg-cell-hover-in-range;\n  }\n\n  &-cell-hover-range-start &-date {\n    border-radius: @picker-panel-cell-boundary-border-radius 0 0\n      @picker-panel-cell-boundary-border-radius;\n  }\n\n  &-cell-hover-range-end &-date {\n    border-radius: 0 @picker-panel-cell-boundary-border-radius\n      @picker-panel-cell-boundary-border-radius 0;\n  }\n\n  &-cell-hover-range-start &-date-value,\n  &-cell-hover-range-end &-date-value {\n    color: @picker-color-text-cell-hover-range-boundary;\n    background-color: @picker-color-bg-cell-hover-range-boundary;\n    border-radius: 50%;\n  }\n\n  &-cell-disabled &-date {\n    background-color: @picker-color-bg-cell-disabled;\n    cursor: not-allowed;\n  }\n\n  &-cell-disabled &-date-value {\n    color: @picker-color-cell-text-not-in-view;\n    background-color: @color-transparent;\n    cursor: not-allowed;\n  }\n\n  // Footer\n  &-footer {\n    width: min-content;\n    min-width: 100%;\n\n    &-btn-wrapper {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      box-sizing: border-box;\n      padding: 3px 8px;\n      border-top: 1px solid @picker-panel-color-border;\n\n      & :only-child {\n        margin-left: auto;\n      }\n    }\n\n    &-extra-wrapper {\n      box-sizing: border-box;\n      padding: 8px 24px;\n      color: var(~'@{arco-cssvars-prefix}-color-text-1');\n      font-size: 12px;\n      border-top: 1px solid @picker-panel-color-border;\n    }\n\n    &-now-wrapper {\n      box-sizing: border-box;\n      height: 36px;\n      line-height: 36px;\n      text-align: center;\n      border-top: 1px solid @picker-panel-color-border;\n    }\n  }\n\n  &-btn-confirm {\n    margin: 5px 0;\n  }\n\n  &-shortcuts {\n    flex: 1;\n\n    & > * {\n      margin: 5px 10px 5px 0;\n    }\n  }\n}\n\n@import './date.less';\n@import './month.less';\n@import './year.less';\n@import './week.less';\n@import './quarter.less';\n@import './range.less';\n@import './shortcuts.less';\n"
  },
  {
    "path": "packages/web-vue/components/date-picker/style/index.ts",
    "content": "import '../../style/index.less';\nimport '../../time-picker/style';\nimport '../../trigger/style';\nimport '../../button/style';\nimport '../../link/style';\nimport '../../_components/picker/style/index.less';\nimport './index.less';\n"
  },
  {
    "path": "packages/web-vue/components/date-picker/style/month.less",
    "content": "@import './token.less';\n\n@month-panel-prefix-cls: ~'@{prefix}-panel-month';\n@quarter-panel-prefix-cls: ~'@{prefix}-panel-quarter';\n@year-panel-prefix-cls: ~'@{prefix}-panel-year';\n\n.@{month-panel-prefix-cls},\n.@{quarter-panel-prefix-cls},\n.@{year-panel-prefix-cls} {\n  box-sizing: border-box;\n  width: @picker-panel-month-width;\n\n  .@{prefix}-picker-date {\n    padding: 4px;\n  }\n\n  .@{prefix}-picker-date-value {\n    width: 100%;\n    border-radius: @picker-panel-cell-boundary-border-radius;\n  }\n\n  .@{prefix}-picker-cell:not(.@{prefix}-picker-cell-selected):not(.@{prefix}-picker-cell-range-start):not(.@{prefix}-picker-cell-range-end):not(.@{prefix}-picker-cell-disabled):not(.@{prefix}-picker-cell-week)\n    .@{prefix}-picker-date-value:hover {\n    border-radius: @picker-panel-cell-boundary-border-radius;\n  }\n}\n"
  },
  {
    "path": "packages/web-vue/components/date-picker/style/quarter.less",
    "content": "@import './token.less';\n\n@quarter-panel-prefix-cls: ~'@{prefix}-panel-quarter';\n\n.@{quarter-panel-prefix-cls} {\n  box-sizing: border-box;\n  width: @picker-panel-quarter-width;\n}\n"
  },
  {
    "path": "packages/web-vue/components/date-picker/style/range.less",
    "content": "@import '../../style/theme/index.less';\n\n@range-picker-prefix-cls: ~'@{prefix}-picker-range';\n\n.@{range-picker-prefix-cls} {\n  &-wrapper {\n    display: flex;\n  }\n}\n"
  },
  {
    "path": "packages/web-vue/components/date-picker/style/shortcuts.less",
    "content": "@import '../../style/theme/index.less';\n\n@date-picker-prefix-cls: ~'@{prefix}-datepicker';\n\n.@{date-picker-prefix-cls}-shortcuts-wrapper {\n  box-sizing: border-box;\n  width: 106px;\n  height: 100%;\n  max-height: 300px;\n  margin: 10px 0 0 0;\n  padding: 0;\n  overflow-y: auto;\n  list-style: none;\n\n  > li {\n    box-sizing: border-box;\n    width: 100%;\n    padding: 6px 16px;\n    cursor: pointer;\n\n    &:hover {\n      color: @color-primary-6;\n    }\n  }\n}\n"
  },
  {
    "path": "packages/web-vue/components/date-picker/style/token.less",
    "content": "@import '../../style/theme/index.less';\n\n// Panel\n@picker-container-border-radius: @radius-medium;\n\n@picker-header-padding-horizontal: 24px;\n@picker-header-padding-vertical: 24px;\n\n@picker-panel-date-width: 265px;\n@picker-panel-month-width: 265px;\n@picker-panel-year-width: 265px;\n@picker-panel-week-width: 298px;\n@picker-panel-quarter-width: 265px;\n\n@picker-panel-time-cell-width: 36px;\n@picker-panel-time-cell-spacing-horizontal: 4px;\n@picker-panel-time-padding-horizontal: 10px;\n\n@picker-panel-cell-padding-vertical: 4px;\n@picker-panel-cell-circle-height: 24px;\n\n@picker-color-switch-icon: var(~'@{arco-cssvars-prefix}-color-text-2');\n@picker-color-bg-switch-icon: var(~'@{arco-cssvars-prefix}-color-bg-popup');\n@picker-color-bg-switch-icon_hover: var(~'@{arco-cssvars-prefix}-color-fill-3');\n\n@picker-cell-font-weight-in-view: @font-weight-500;\n@picker-color-cell-text-in-view: var(~'@{arco-cssvars-prefix}-color-text-1');\n@picker-color-cell-text-not-in-view: var(\n  ~'@{arco-cssvars-prefix}-color-text-4'\n);\n@picker-color-bg-circle_selected: @color-primary-6;\n@picker-color-bg-circle_selected: @color-primary-6;\n@picker-color-bg-cell-in-range: var(\n  ~'@{arco-cssvars-prefix}-color-primary-light-1'\n);\n@picker-color-bg-cell-disabled: var(~'@{arco-cssvars-prefix}-color-fill-1');\n@picker-color-text-cell-range-boundary: var(\n  ~'@{arco-cssvars-prefix}-color-white'\n);\n@picker-color-bg-cell-range-boundary: @color-primary-6;\n@picker-color-bg-cell-hover-in-range: var(\n  ~'@{arco-cssvars-prefix}-color-primary-light-1'\n);\n@picker-color-text-cell-hover-range-boundary: var(\n  ~'@{arco-cssvars-prefix}-color-text-1'\n);\n@picker-color-bg-cell-hover-range-boundary: var(\n  ~'@{arco-cssvars-prefix}-color-primary-light-2'\n);\n\n@picker-panel-color-border: var(~'@{arco-cssvars-prefix}-color-neutral-3');\n@picker-panel-color-text-cell_hover: var(\n  ~'@{arco-cssvars-prefix}-color-text-1'\n);\n@picker-panel-color-bg-cell_hover: var(~'@{arco-cssvars-prefix}-color-fill-3');\n@picker-panel-color-text-cell_selected: var(\n  ~'@{arco-cssvars-prefix}-color-white'\n);\n@picker-panel-color-bg-cell_selected: @color-primary-6;\n@picker-panel-color-current-time-dot: @color-primary-6;\n\n@picker-panel-border-radius-cell_selected: @radius-circle;\n@picker-panel-cell-boundary-border-radius: @picker-panel-cell-circle-height;\n@picker-panel-cell-border-radius: @picker-panel-cell-circle-height;\n\n@datepicker-view-tabs-height: 50px;\n@datepicker-view-tab-pane-color-text_unactive: var(\n  ~'@{arco-cssvars-prefix}-color-text-4'\n);\n@datepicker-view-tab-pane-color-text_active: var(\n  ~'@{arco-cssvars-prefix}-color-text-1'\n);\n@datepicker-view-tab-pane-font-size: 14px;\n@datepicker-view-tab-pane-spacing-text-icon: 8px;\n\n@picker-panel-color-bg-label_hover: var(~'@{arco-cssvars-prefix}-color-fill-3');\n"
  },
  {
    "path": "packages/web-vue/components/date-picker/style/week.less",
    "content": "@import './token.less';\n\n@week-panel-prefix-cls: ~'@{prefix}-panel-week';\n@picker-prefix-cls: ~'@{prefix}-picker';\n\n.@{week-panel-prefix-cls} {\n  box-sizing: border-box;\n\n  &-wrapper {\n    display: flex;\n  }\n\n  &-inner {\n    width: @picker-panel-week-width;\n  }\n\n  &-inner .@{picker-prefix-cls}-body {\n    padding-top: 0;\n  }\n\n  .@{picker-prefix-cls}-row-week {\n    cursor: pointer;\n\n    .@{picker-prefix-cls}-date-value {\n      width: 100%;\n      border-radius: 0;\n    }\n  }\n\n  .@{picker-prefix-cls}-cell {\n    .@{picker-prefix-cls}-date {\n      border-radius: 0;\n    }\n\n    &:nth-child(2) {\n      .@{picker-prefix-cls}-date {\n        padding-left: 4px;\n        border-top-left-radius: @picker-panel-cell-boundary-border-radius;\n        border-bottom-left-radius: @picker-panel-cell-boundary-border-radius;\n\n        .@{picker-prefix-cls}-date-value {\n          border-top-left-radius: @picker-panel-cell-border-radius;\n          border-bottom-left-radius: @picker-panel-cell-border-radius;\n        }\n      }\n    }\n\n    &:nth-child(8) {\n      .@{picker-prefix-cls}-date {\n        padding-right: 4px;\n        border-top-right-radius: @picker-panel-cell-boundary-border-radius;\n        border-bottom-right-radius: @picker-panel-cell-boundary-border-radius;\n\n        .@{picker-prefix-cls}-date-value {\n          border-top-right-radius: @picker-panel-cell-border-radius;\n          border-bottom-right-radius: @picker-panel-cell-border-radius;\n        }\n      }\n    }\n  }\n\n  .@{picker-prefix-cls}-row-week:hover\n    .@{picker-prefix-cls}-cell:not(.@{picker-prefix-cls}-cell-week):not(.@{picker-prefix-cls}-cell-selected):not(.@{picker-prefix-cls}-cell-range-start):not(.@{picker-prefix-cls}-cell-range-end) {\n    .@{picker-prefix-cls}-date-value {\n      background-color: @picker-panel-color-bg-cell_hover;\n    }\n  }\n}\n"
  },
  {
    "path": "packages/web-vue/components/date-picker/style/year.less",
    "content": "@import './token.less';\n\n@year-panel-prefix-cls: ~'@{prefix}-panel-year';\n\n.@{year-panel-prefix-cls} {\n  box-sizing: border-box;\n  width: @picker-panel-year-width;\n}\n"
  },
  {
    "path": "packages/web-vue/components/date-picker/utils/index.ts",
    "content": "import { Dayjs } from 'dayjs';\nimport { isArray, isDayjs, isUndefined } from '../../_utils/is';\nimport { CalendarValue, DisabledDate, Mode } from '../interface';\n\nexport function newArray<T>(length: number) {\n  return [...Array<T>(length)];\n}\n\nexport function normalizeRangeValue(\n  value: (CalendarValue | undefined)[] | CalendarValue | undefined\n) {\n  if (isUndefined(value)) {\n    return undefined;\n  }\n  return isArray(value) ? value : [value, undefined];\n}\n\nexport function isCompleteRangeValue(\n  value: Array<Dayjs | undefined> | undefined\n): value is [Dayjs, Dayjs] {\n  return !!value && isDayjs(value[0]) && isDayjs(value[1]);\n}\n\nexport function isValidRangeValue(\n  value: Array<Dayjs | undefined> | undefined\n): value is undefined | [] | [Dayjs, Dayjs] {\n  return (\n    isUndefined(value) || value.length === 0 || isCompleteRangeValue(value)\n  );\n}\n\nexport function mergeValueWithTime(\n  defaultValue: Dayjs,\n  dateValue?: Dayjs,\n  timeValue?: Dayjs\n) {\n  const dateVal = dateValue || defaultValue;\n  const timeVal = timeValue || defaultValue;\n  return timeVal\n    .set('year', dateVal.year())\n    .set('month', dateVal.month())\n    .set('date', dateVal.date());\n}\n\nexport function isDisabledDate(\n  cellDate: Dayjs,\n  disabledDate?: DisabledDate,\n  mode: Mode = 'date'\n): boolean {\n  if (typeof disabledDate !== 'function') return false;\n\n  const checkDate = (date: Dayjs) => disabledDate(date.toDate());\n\n  switch (mode) {\n    case 'date':\n    case 'week':\n      return checkDate(cellDate);\n\n    case 'month': {\n      const days = cellDate.daysInMonth();\n      for (let d = 1; d <= days; d++) {\n        if (!checkDate(cellDate.date(d))) return false;\n      }\n      return true;\n    }\n\n    case 'quarter': {\n      const startMonth = Math.floor(cellDate.month() / 3) * 3;\n      for (let m = startMonth; m < startMonth + 3; m++) {\n        const monthDate = cellDate.month(m);\n        const days = monthDate.daysInMonth();\n        for (let d = 1; d <= days; d++) {\n          if (!checkDate(monthDate.date(d))) return false;\n        }\n      }\n      return true;\n    }\n\n    case 'year': {\n      for (let m = 0; m < 12; m++) {\n        const monthDate = cellDate.month(m);\n        const days = monthDate.daysInMonth();\n        for (let d = 1; d <= days; d++) {\n          if (!checkDate(monthDate.date(d))) return false;\n        }\n      }\n      return true;\n    }\n\n    default:\n      return false;\n  }\n}\n"
  },
  {
    "path": "packages/web-vue/components/descriptions/CHANGELOG.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.57.0\n\n`2025-03-10`\n\n### 🐛 BugFix\n\n- fixes the issue related to the layout distribution of span ([#3409](https://github.com/arco-design/arco-design-vue/pull/3409))\n\n\n## 2.53.0\n\n`2023-11-03`\n\n### 🐛 BugFix\n\n- Fix the problem of invalid `span` attribute of `DescriptionsItem` component ([#2765](https://github.com/arco-design/arco-design-vue/pull/2765))\n\n\n## 2.39.0\n\n`2022-11-18`\n\n\n## 2.38.0-beta.1\n\n`2022-10-14`\n\n### 🆕 Feature\n\n- The `layout-fixed` of the table style in the description. The width will be evenly distributed when it's set to `fixed`. ([#1670](https://github.com/arco-design/arco-design-vue/pull/1670))\n\n\n## 2.20.0\n\n`2022-03-18`\n\n### 🆕 Feature\n\n- The `column` property supports reactive configuration ([#839](https://github.com/arco-design/arco-design-vue/pull/839))\n\n\n## 2.19.0\n\n`2022-03-11`\n\n### 🐛 BugFix\n\n- Fix the problem of error when `data` is empty data ([#812](https://github.com/arco-design/arco-design-vue/pull/812))\n\n\n## 2.18.0-beta.2\n\n`2022-02-25`\n\n### 🆕 Feature\n\n- Added `descriptions-item` component ([#739](https://github.com/arco-design/arco-design-vue/pull/739))\n\n\n## 2.13.0\n\n`2021-12-31`\n\n### 🆕 Feature\n\n- The index and data parameters are added to the Value and Label slots ([#470](https://github.com/arco-design/arco-design-vue/pull/470))\n\n\n## 2.7.0\n\n`2021-11-26`\n\n### 🆕 Feature\n\n- Add the `align` prop ([#268](https://github.com/arco-design/arco-design-vue/pull/268))\n\n### 💅 Style\n\n- Modify the style of the value area to support line-wrapping text ([#269](https://github.com/arco-design/arco-design-vue/pull/269))\n\n"
  },
  {
    "path": "packages/web-vue/components/descriptions/CHANGELOG.zh-CN.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.57.0\n\n`2025-03-10`\n\n### 🐛 问题修复\n\n- 修复 `span` 分配布局的错误使其更遵循用户配置 ([#3409](https://github.com/arco-design/arco-design-vue/pull/3409))\n\n\n## 2.53.0\n\n`2023-11-03`\n\n### 🐛 问题修复\n\n- 修复 `DescriptionsItem` 组件 `span` 属性失效的问题 ([#2765](https://github.com/arco-design/arco-design-vue/pull/2765))\n\n\n## 2.39.0\n\n`2022-11-18`\n\n\n## 2.38.0-beta.1\n\n`2022-10-14`\n\n### 🆕 新增功能\n\n- 描述中表格样式的 `layout-fixed`，当设置成 `fixed` 时，宽度会均分 ([#1670](https://github.com/arco-design/arco-design-vue/pull/1670))\n\n\n## 2.20.0\n\n`2022-03-18`\n\n### 🆕 新增功能\n\n- `column` 属性支持响应式配置 ([#839](https://github.com/arco-design/arco-design-vue/pull/839))\n\n\n## 2.19.0\n\n`2022-03-11`\n\n### 🐛 问题修复\n\n- 修复 `data` 为空数据时报错的问题 ([#812](https://github.com/arco-design/arco-design-vue/pull/812))\n\n\n## 2.18.0-beta.2\n\n`2022-02-25`\n\n### 🆕 新增功能\n\n- 增加 `descriptions-item` 组件 ([#739](https://github.com/arco-design/arco-design-vue/pull/739))\n\n\n## 2.13.0\n\n`2021-12-31`\n\n### 🆕 新增功能\n\n- `value` 和 `label` 插槽增加 index、data 参数 ([#470](https://github.com/arco-design/arco-design-vue/pull/470))\n\n\n## 2.7.0\n\n`2021-11-26`\n\n### 🆕 新增功能\n\n- 增加 `align` 属性 ([#268](https://github.com/arco-design/arco-design-vue/pull/268))\n\n### 💅 样式更新\n\n- 修改 value 区域样式，支持换行文本 ([#269](https://github.com/arco-design/arco-design-vue/pull/269))\n\n"
  },
  {
    "path": "packages/web-vue/components/descriptions/README.en-US.md",
    "content": "```yaml\nmeta:\n  type: Component\n  category: Data Display\ntitle: Descriptions\ndescription: Generally used for the information display of the detail page.\n```\n\n*Auto translate by google.*\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/single.md\n\n@import ./__demo__/align.md\n\n@import ./__demo__/bordered.md\n\n@import ./__demo__/layout.md\n\n@import ./__demo__/example.md\n\n## API\n\n\n### `<descriptions>` Props\n\n|Attribute|Description|Type|Default|version|\n|---|---|---|:---:|:---|\n|data|Data for descriptions|`DescData[]`|`[]`||\n|column|The number of data placed in each row. Version 2.20.0 supports reactive configuration, the configuration can refer to Grid|`number \\| ResponsiveValue`|`3`||\n|title|Title of descriptions|`string`|`-`||\n|layout|Arrangement of descriptions|`'horizontal' \\| 'vertical' \\| 'inline-horizontal' \\| 'inline-vertical'`|`'horizontal'`||\n|align|Alignment position of text|`TextAlign \\| { label?: TextAlign; value?: TextAlign }`|`'left'`||\n|size|The size of the descriptions|`'mini' \\| 'small' \\| 'medium' \\| 'large'`|`-`||\n|bordered|Whether to show the border|`boolean`|`false`||\n|label-style|Data label style|`CSSProperties`|`-`||\n|value-style|Data content style|`CSSProperties`|`-`||\n|table-layout|The `layout-fixed` of the table style in the description. The width will be evenly distributed when it's set to `fixed`.|`'auto' \\| 'fixed'`|`'auto'`|2.38.0|\n### `<descriptions>` Slots\n\n|Slot Name|Description|Parameters|\n|---|---|---|\n|value|Data value|value: `string`<br>index: `number`<br>data: `DescData`|\n|label|Data label|label: `string`<br>index: `number`<br>data: `DescData`|\n|title|Title|-|\n\n\n\n\n### `<descriptions-item>` Props\n\n|Attribute|Description|Type|Default|version|\n|---|---|---|:---:|:---|\n|span|number of columns|`number`|`1`|2.18.0|\n|label|Label|`string`|`-`|2.18.0|\n### `<descriptions-item>` Slots\n\n|Slot Name|Description|Parameters|version|\n|---|---|---|:---|\n|label|Label|-|2.18.0|\n\n\n\n\n### DescData\n\n|Name|Description|Type|Default|\n|---|---|---|:---:|\n|label|Label|`string \\| RenderFunction`|`-`|\n|value|Data|`string \\| RenderFunction`|`-`|\n|span|number of columns|`number`|`1`|\n\n\n"
  },
  {
    "path": "packages/web-vue/components/descriptions/README.zh-CN.md",
    "content": "```yaml\nmeta:\n  type: 组件\n  category: 数据展示\ntitle: 描述列表 Descriptions\ndescription: 一般用于详情页的信息展示。\n```\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/single.md\n\n@import ./__demo__/align.md\n\n@import ./__demo__/bordered.md\n\n@import ./__demo__/layout.md\n\n@import ./__demo__/example.md\n\n## API\n\n\n### `<descriptions>` Props\n\n|参数名|描述|类型|默认值|版本|\n|---|---|---|:---:|:---|\n|data|描述列表的数据|`DescData[]`|`[]`||\n|column|每行放置的数据个数。2.20.0 版本支持响应式配置，配置可参考 Grid|`number \\| ResponsiveValue`|`3`||\n|title|描述列表的标题|`string`|`-`||\n|layout|描述列表的排列方式|`'horizontal' \\| 'vertical' \\| 'inline-horizontal' \\| 'inline-vertical'`|`'horizontal'`||\n|align|文字的对齐位置|`TextAlign \\| { label?: TextAlign; value?: TextAlign }`|`'left'`||\n|size|描述列表的大小|`'mini' \\| 'small' \\| 'medium' \\| 'large'`|`-`||\n|bordered|是否显示边框|`boolean`|`false`||\n|label-style|数据标签的样式|`CSSProperties`|`-`||\n|value-style|数据内容的样式|`CSSProperties`|`-`||\n|table-layout|描述中表格样式的 `layout-fixed`，当设置成 `fixed` 时，宽度会均分。|`'auto' \\| 'fixed'`|`'auto'`|2.38.0|\n### `<descriptions>` Slots\n\n|插槽名|描述|参数|\n|---|:---:|---|\n|value|数据内容|value: `string`<br>index: `number`<br>data: `DescData`|\n|label|数据标签|label: `string`<br>index: `number`<br>data: `DescData`|\n|title|标题|-|\n\n\n\n\n### `<descriptions-item>` Props\n\n|参数名|描述|类型|默认值|版本|\n|---|---|---|:---:|:---|\n|span|所占列数|`number`|`1`|2.18.0|\n|label|标签|`string`|`-`|2.18.0|\n### `<descriptions-item>` Slots\n\n|插槽名|描述|参数|版本|\n|---|:---:|---|:---|\n|label|标签|-|2.18.0|\n\n\n\n\n### DescData\n\n|参数名|描述|类型|默认值|\n|---|---|---|:---:|\n|label|标签|`string \\| RenderFunction`|`-`|\n|value|数据|`string \\| RenderFunction`|`-`|\n|span|所占列数|`number`|`1`|\n\n\n"
  },
  {
    "path": "packages/web-vue/components/descriptions/TEMPLATE.md",
    "content": "## zh-CN\n```yaml\nmeta:\n  type: 组件\n  category: 数据展示\ntitle: 描述列表 Descriptions\ndescription: 一般用于详情页的信息展示。\n```\n---\n## en-US\n```yaml\nmeta:\n  type: Component\n  category: Data Display\ntitle: Descriptions\ndescription: Generally used for the information display of the detail page.\n```\n---\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/single.md\n\n@import ./__demo__/align.md\n\n@import ./__demo__/bordered.md\n\n@import ./__demo__/layout.md\n\n@import ./__demo__/example.md\n\n## API\n\n%%API(descriptions.tsx)%%\n\n%%API(descriptions-item.vue)%%\n\n%%INTERFACE(interface.ts)%%\n"
  },
  {
    "path": "packages/web-vue/components/descriptions/__demo__/align.md",
    "content": "```yaml\ntitle:\n  zh-CN: 标签文本对齐\n  en-US: Align Label Text\n```\n\n## zh-CN\n\n标签文本可以设置左对齐右对齐，也可以设置垂直的排列方式。\n\n---\n\n## en-US\n\nThe label text can be left-aligned and right-aligned, or it can be arranged vertically.\n\n---\n\n```vue\n<template>\n  <a-space direction=\"vertical\" size=\"large\">\n    <a-descriptions :data=\"data\" title=\"User Info\" align=\"right\" />\n    <a-descriptions :data=\"data\" title=\"User Info\" :align=\"{ label: 'right' }\" />\n    <a-descriptions :data=\"data\" title=\"User Info\" layout=\"inline-vertical\" />\n  </a-space>\n</template>\n\n<script>\nexport default {\n  setup() {\n    const data = [{\n      label: 'Name',\n      value: 'Socrates',\n    }, {\n      label: 'Mobile',\n      value: '123-1234-1234',\n    }, {\n      label: 'Residence',\n      value: 'Beijing'\n    }, {\n      label: 'Hometown',\n      value: 'Beijing',\n    }, {\n      label: 'Address',\n      value: 'Yingdu Building, Zhichun Road, Beijing'\n    }];\n\n    return {\n      data\n    }\n  },\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/descriptions/__demo__/basic.md",
    "content": "```yaml\ntitle:\n  zh-CN: 基本用法\n  en-US: Basic Usage\n```\n\n## zh-CN\n\n简单地成组展示多个只读字段，一般用于详情页的信息。\n\n---\n\n## en-US\n\nSimply display multiple read-only fields in groups, which are generally used for information on the details page.\n\n---\n\n```vue\n<template>\n  <a-space direction=\"vertical\" size=\"large\" fill>\n    <a-descriptions :data=\"data\" title=\"User Info\" layout=\"inline-horizontal\" />\n    <a-descriptions title=\"User Info\" :column=\"{xs:1, md:3, lg:4}\">\n      <a-descriptions-item v-for=\"item of data\" :label=\"item.label\" :span=\"item.span ?? 1\">\n        <a-tag>{{ item.value }}</a-tag>\n      </a-descriptions-item>\n    </a-descriptions>\n  </a-space>\n</template>\n\n<script>\nexport default {\n  setup() {\n    const data = [{\n      label: 'Name',\n      value: 'Socrates',\n      span: 3,\n    }, {\n      label: 'Mobile',\n      value: '123-1234-1234',\n    }, {\n      label: 'Residence',\n      value: 'Beijing'\n    }, {\n      label: 'Hometown',\n      value: 'Beijing',\n    }, {\n      label: 'Address',\n      value: 'Yingdu Building, Zhichun Road, Beijing'\n    }];\n\n    return {\n      data\n    }\n  },\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/descriptions/__demo__/bordered.md",
    "content": "```yaml\ntitle:\n  zh-CN: 带边框样式\n  en-US: Bordered Descriptions\n```\n\n## zh-CN\n\n带边框和背景颜色的列表。\n\n---\n\n## en-US\n\nList with border and background color.\n\n---\n\n```vue\n<template>\n  <a-descriptions :data=\"data\" title=\"User Info\" bordered/>\n</template>\n\n<script>\nexport default {\n  setup() {\n    const data = [{\n      label: 'Name',\n      value: 'Socrates',\n    }, {\n      label: 'Mobile',\n      value: '123-1234-1234',\n    }, {\n      label: 'Residence',\n      value: 'Beijing'\n    }, {\n      label: 'Hometown',\n      value: 'Beijing',\n    }, {\n      label: 'Address',\n      value: 'Yingdu Building, Zhichun Road, Beijing'\n    }];\n\n    return {\n      data\n    }\n  },\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/descriptions/__demo__/example.md",
    "content": "```yaml\ntitle:\n  zh-CN: 布局示例\n  en-US: Layout Example\n```\n\n## zh-CN\n`span` 所占列数大于 `column` 可放置的数据个数时，`span` 会被设置为 `column` 的值，当行剩余列数不够放置下一列时将自动换行，每行末尾列会自动填充剩余量。\n\n---\n\n## en-US\nWhen the number of columns occupied by `span` is greater than the number of data that can be placed in `column`, `span` will be set to the value of `column`. When the remaining columns in the row are not enough to place the next column, it will automatically wrap, and the last column of each row will automatically fill the remaining amount.\n\n---\n\n```vue\n<template>\n  <a-form :model=\"form\" auto-label-width>\n    <a-form-item label=\"size\">\n      <a-radio-group v-model=\"form.size\" type=\"button\" :options=\"sizeOptions\" />\n    </a-form-item>\n\n    <a-form-item label=\"layout\">\n      <a-radio-group\n        v-model=\"form.layout\"\n        type=\"button\"\n        :options=\"layoutOptions\"\n      />\n    </a-form-item>\n\n    <a-form-item label=\"table-layout\">\n      <a-radio-group\n        v-model=\"form.tableLayout\"\n        type=\"button\"\n        :options=\"['auto', 'fixed']\"\n      />\n    </a-form-item>\n\n    <a-form-item label=\"column\">\n      <a-radio-group\n        v-model=\"form.column\"\n        type=\"button\"\n        :options=\"columnOptions\"\n      />\n    </a-form-item>\n\n    <a-form-item label=\"firstSpan\">\n      <a-radio-group\n        v-model=\"form.firstSpan\"\n        type=\"button\"\n        :options=\"firstSpanOptions\"\n      />\n    </a-form-item>\n  </a-form>\n  <div style=\"margin-top: 20px\">\n    <a-descriptions\n      title=\"Layout Example\"\n      :size=\"form.size\"\n      :column=\"form.column\"\n      :layout=\"form.layout\"\n      :table-layout=\"form.tableLayout\"\n      bordered\n    >\n      <a-descriptions-item label=\"Item1\" :span=\"form.firstSpan\">\n        <div>Span：{{form.firstSpan}}\n          <span v-if=\"form.firstSpan > form.column\" style=\"color: red;\">\n            Exceeds Column, set to Column size\n          </span>\n        </div>\n      </a-descriptions-item>\n      <a-descriptions-item label=\"Item2\" :span=\"2\">Span：2</a-descriptions-item>\n      <a-descriptions-item label=\"Item3\" :span=\"3\">Span：3</a-descriptions-item>\n      <a-descriptions-item label=\"Item4\" :span=\"2\">Span：2</a-descriptions-item>\n      <a-descriptions-item label=\"Item5\" :span=\"1\">Span：1</a-descriptions-item>\n      <a-descriptions-item label=\"Item6\" :span=\"1\">Span：1</a-descriptions-item>\n    </a-descriptions>\n  </div>\n</template>\n\n<script setup>\nimport { reactive } from 'vue';\n\nconst form = reactive({\n  size: 'medium',\n  layout: 'horizontal',\n  column: 4,\n  tableLayout: 'auto',\n  firstSpan: 2\n});\n\nconst layoutOptions = [\n  'horizontal',\n  'inline-horizontal',\n  'vertical',\n  'inline-vertical',\n];\nconst columnOptions = [1, 2, 3, 4, 5];\nconst firstSpanOptions = [1, 2, 3, 4, 5];\nconst sizeOptions = ['mini', 'small', 'medium', 'large'];\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/descriptions/__demo__/layout.md",
    "content": "```yaml\ntitle:\n  zh-CN: 布局模式\n  en-US: Layouts\n```\n\n## zh-CN\n\n有水平排列、垂直排列、行内水平排列、行内垂直排列四种布局模式。\n\n---\n\n## en-US\n\nThere are four layout modes: horizontal arrangement, vertical arrangement, horizontal arrangement in a row, and vertical arrangement in a row.\n\n---\n\n```vue\n\n<template>\n  <a-radio-group type=\"button\" v-model=\"size\">\n    <a-radio value=\"mini\">mini</a-radio>\n    <a-radio value=\"small\">small</a-radio>\n    <a-radio value=\"medium\">medium</a-radio>\n    <a-radio value=\"large\">large</a-radio>\n  </a-radio-group>\n  <div style=\"margin-top: 20px\">\n    <a-descriptions :data=\"data\" :size=\"size\" title=\"User Info (horizontal)\" bordered />\n    <a-descriptions :data=\"data\" :size=\"size\" title=\"User Info (inline-horizontal)\" layout=\"inline-horizontal\" bordered />\n    <a-descriptions :data=\"data\" :size=\"size\" title=\"User Info (vertical)\" layout=\"vertical\" bordered />\n    <a-descriptions :data=\"data\" :size=\"size\" title=\"User Info (inline-vertical)\" layout=\"inline-vertical\" bordered />\n  </div>\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n  setup() {\n    const size = ref('medium');\n\n    const data = [{\n      label: 'Name',\n      value: 'Socrates',\n    }, {\n      label: 'Mobile',\n      value: '123-1234-1234',\n    }, {\n      label: 'Residence',\n      value: 'Beijing'\n    }, {\n      label: 'Hometown',\n      value: 'Beijing',\n    }, {\n      label: 'Address',\n      value: 'Yingdu Building, Zhichun Road, Beijing'\n    }];\n\n    return {\n      data,\n      size\n    }\n  },\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/descriptions/__demo__/single.md",
    "content": "```yaml\ntitle:\n  zh-CN: 单列样式\n  en-US: Single Row\n```\n\n## zh-CN\n\n单列的描述列表样式。\n\n---\n\n## en-US\n\nA single-column description list style.\n\n---\n\n```vue\n<template>\n  <a-radio-group type=\"button\" v-model=\"size\">\n    <a-radio value=\"mini\">mini</a-radio>\n    <a-radio value=\"small\">small</a-radio>\n    <a-radio value=\"medium\">medium</a-radio>\n    <a-radio value=\"large\">large</a-radio>\n  </a-radio-group>\n  <a-descriptions style=\"margin-top: 20px\" :data=\"data\" :size=\"size\" title=\"User Info\" :column=\"1\"/>\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n  setup() {\n    const size = ref('medium');\n\n    const data = [{\n      label: 'Name',\n      value: 'Socrates',\n    }, {\n      label: 'Mobile',\n      value: '123-1234-1234',\n    }, {\n      label: 'Residence',\n      value: 'Beijing'\n    }, {\n      label: 'Hometown',\n      value: 'Beijing',\n    }, {\n      label: 'Address',\n      value: 'Yingdu Building, Zhichun Road, Beijing'\n    }];\n\n    return {\n      data,\n      size\n    }\n  },\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/descriptions/__test__/__snapshots__/demo.test.ts.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`<descriptions> demo: render [align] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-vertical\\\\\" style=\\\\\"column-gap: 24px; row-gap: 24px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-descriptions arco-descriptions-layout-horizontal arco-descriptions-size-medium\\\\\">\n      <div class=\\\\\"arco-descriptions-title\\\\\">User Info</div>\n      <div class=\\\\\"arco-descriptions-body\\\\\">\n        <table class=\\\\\"arco-descriptions-table\\\\\">\n          <tbody>\n            <tr class=\\\\\"arco-descriptions-row\\\\\">\n              <td class=\\\\\"arco-descriptions-item-label arco-descriptions-item-label-block\\\\\" style=\\\\\"text-align: right;\\\\\">Name</td>\n              <td class=\\\\\"arco-descriptions-item-value arco-descriptions-item-value-block\\\\\" style=\\\\\"text-align: right;\\\\\" colspan=\\\\\"1\\\\\">Socrates</td>\n              <td class=\\\\\"arco-descriptions-item-label arco-descriptions-item-label-block\\\\\" style=\\\\\"text-align: right;\\\\\">Mobile</td>\n              <td class=\\\\\"arco-descriptions-item-value arco-descriptions-item-value-block\\\\\" style=\\\\\"text-align: right;\\\\\" colspan=\\\\\"1\\\\\">123-1234-1234</td>\n              <td class=\\\\\"arco-descriptions-item-label arco-descriptions-item-label-block\\\\\" style=\\\\\"text-align: right;\\\\\">Residence</td>\n              <td class=\\\\\"arco-descriptions-item-value arco-descriptions-item-value-block\\\\\" style=\\\\\"text-align: right;\\\\\" colspan=\\\\\"1\\\\\">Beijing</td>\n            </tr>\n            <tr class=\\\\\"arco-descriptions-row\\\\\">\n              <td class=\\\\\"arco-descriptions-item-label arco-descriptions-item-label-block\\\\\" style=\\\\\"text-align: right;\\\\\">Hometown</td>\n              <td class=\\\\\"arco-descriptions-item-value arco-descriptions-item-value-block\\\\\" style=\\\\\"text-align: right;\\\\\" colspan=\\\\\"1\\\\\">Beijing</td>\n              <td class=\\\\\"arco-descriptions-item-label arco-descriptions-item-label-block\\\\\" style=\\\\\"text-align: right;\\\\\">Address</td>\n              <td class=\\\\\"arco-descriptions-item-value arco-descriptions-item-value-block\\\\\" style=\\\\\"text-align: right;\\\\\" colspan=\\\\\"3\\\\\">Yingdu Building, Zhichun Road, Beijing</td>\n            </tr>\n          </tbody>\n        </table>\n      </div>\n    </div>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-descriptions arco-descriptions-layout-horizontal arco-descriptions-size-medium\\\\\">\n      <div class=\\\\\"arco-descriptions-title\\\\\">User Info</div>\n      <div class=\\\\\"arco-descriptions-body\\\\\">\n        <table class=\\\\\"arco-descriptions-table\\\\\">\n          <tbody>\n            <tr class=\\\\\"arco-descriptions-row\\\\\">\n              <td class=\\\\\"arco-descriptions-item-label arco-descriptions-item-label-block\\\\\" style=\\\\\"text-align: right;\\\\\">Name</td>\n              <td class=\\\\\"arco-descriptions-item-value arco-descriptions-item-value-block\\\\\" style=\\\\\"text-align: left;\\\\\" colspan=\\\\\"1\\\\\">Socrates</td>\n              <td class=\\\\\"arco-descriptions-item-label arco-descriptions-item-label-block\\\\\" style=\\\\\"text-align: right;\\\\\">Mobile</td>\n              <td class=\\\\\"arco-descriptions-item-value arco-descriptions-item-value-block\\\\\" style=\\\\\"text-align: left;\\\\\" colspan=\\\\\"1\\\\\">123-1234-1234</td>\n              <td class=\\\\\"arco-descriptions-item-label arco-descriptions-item-label-block\\\\\" style=\\\\\"text-align: right;\\\\\">Residence</td>\n              <td class=\\\\\"arco-descriptions-item-value arco-descriptions-item-value-block\\\\\" style=\\\\\"text-align: left;\\\\\" colspan=\\\\\"1\\\\\">Beijing</td>\n            </tr>\n            <tr class=\\\\\"arco-descriptions-row\\\\\">\n              <td class=\\\\\"arco-descriptions-item-label arco-descriptions-item-label-block\\\\\" style=\\\\\"text-align: right;\\\\\">Hometown</td>\n              <td class=\\\\\"arco-descriptions-item-value arco-descriptions-item-value-block\\\\\" style=\\\\\"text-align: left;\\\\\" colspan=\\\\\"1\\\\\">Beijing</td>\n              <td class=\\\\\"arco-descriptions-item-label arco-descriptions-item-label-block\\\\\" style=\\\\\"text-align: right;\\\\\">Address</td>\n              <td class=\\\\\"arco-descriptions-item-value arco-descriptions-item-value-block\\\\\" style=\\\\\"text-align: left;\\\\\" colspan=\\\\\"3\\\\\">Yingdu Building, Zhichun Road, Beijing</td>\n            </tr>\n          </tbody>\n        </table>\n      </div>\n    </div>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-descriptions arco-descriptions-layout-inline-vertical arco-descriptions-size-medium\\\\\">\n      <div class=\\\\\"arco-descriptions-title\\\\\">User Info</div>\n      <div class=\\\\\"arco-descriptions-body\\\\\">\n        <table class=\\\\\"arco-descriptions-table\\\\\">\n          <tbody>\n            <tr class=\\\\\"arco-descriptions-row\\\\\">\n              <td class=\\\\\"arco-descriptions-item\\\\\" colspan=\\\\\"1\\\\\">\n                <div class=\\\\\"arco-descriptions-item-label arco-descriptions-item-label-inline\\\\\" style=\\\\\"text-align: left;\\\\\">Name</div>\n                <div class=\\\\\"arco-descriptions-item-value arco-descriptions-item-value-inline\\\\\" style=\\\\\"text-align: left;\\\\\">Socrates</div>\n              </td>\n              <td class=\\\\\"arco-descriptions-item\\\\\" colspan=\\\\\"1\\\\\">\n                <div class=\\\\\"arco-descriptions-item-label arco-descriptions-item-label-inline\\\\\" style=\\\\\"text-align: left;\\\\\">Mobile</div>\n                <div class=\\\\\"arco-descriptions-item-value arco-descriptions-item-value-inline\\\\\" style=\\\\\"text-align: left;\\\\\">123-1234-1234</div>\n              </td>\n              <td class=\\\\\"arco-descriptions-item\\\\\" colspan=\\\\\"1\\\\\">\n                <div class=\\\\\"arco-descriptions-item-label arco-descriptions-item-label-inline\\\\\" style=\\\\\"text-align: left;\\\\\">Residence</div>\n                <div class=\\\\\"arco-descriptions-item-value arco-descriptions-item-value-inline\\\\\" style=\\\\\"text-align: left;\\\\\">Beijing</div>\n              </td>\n            </tr>\n            <tr class=\\\\\"arco-descriptions-row\\\\\">\n              <td class=\\\\\"arco-descriptions-item\\\\\" colspan=\\\\\"1\\\\\">\n                <div class=\\\\\"arco-descriptions-item-label arco-descriptions-item-label-inline\\\\\" style=\\\\\"text-align: left;\\\\\">Hometown</div>\n                <div class=\\\\\"arco-descriptions-item-value arco-descriptions-item-value-inline\\\\\" style=\\\\\"text-align: left;\\\\\">Beijing</div>\n              </td>\n              <td class=\\\\\"arco-descriptions-item\\\\\" colspan=\\\\\"2\\\\\">\n                <div class=\\\\\"arco-descriptions-item-label arco-descriptions-item-label-inline\\\\\" style=\\\\\"text-align: left;\\\\\">Address</div>\n                <div class=\\\\\"arco-descriptions-item-value arco-descriptions-item-value-inline\\\\\" style=\\\\\"text-align: left;\\\\\">Yingdu Building, Zhichun Road, Beijing</div>\n              </td>\n            </tr>\n          </tbody>\n        </table>\n      </div>\n    </div>\n  </div>\n</div>\"\n`;\n\nexports[`<descriptions> demo: render [basic] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-vertical arco-space-fill\\\\\" style=\\\\\"column-gap: 24px; row-gap: 24px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-descriptions arco-descriptions-layout-inline-horizontal arco-descriptions-size-medium\\\\\">\n      <div class=\\\\\"arco-descriptions-title\\\\\">User Info</div>\n      <div class=\\\\\"arco-descriptions-body\\\\\">\n        <table class=\\\\\"arco-descriptions-table\\\\\">\n          <tbody>\n            <tr class=\\\\\"arco-descriptions-row\\\\\">\n              <td class=\\\\\"arco-descriptions-item\\\\\" colspan=\\\\\"3\\\\\">\n                <div class=\\\\\"arco-descriptions-item-label arco-descriptions-item-label-inline\\\\\" style=\\\\\"text-align: left;\\\\\">Name</div>\n                <div class=\\\\\"arco-descriptions-item-value arco-descriptions-item-value-inline\\\\\" style=\\\\\"text-align: left;\\\\\">Socrates</div>\n              </td>\n            </tr>\n            <tr class=\\\\\"arco-descriptions-row\\\\\">\n              <td class=\\\\\"arco-descriptions-item\\\\\" colspan=\\\\\"1\\\\\">\n                <div class=\\\\\"arco-descriptions-item-label arco-descriptions-item-label-inline\\\\\" style=\\\\\"text-align: left;\\\\\">Mobile</div>\n                <div class=\\\\\"arco-descriptions-item-value arco-descriptions-item-value-inline\\\\\" style=\\\\\"text-align: left;\\\\\">123-1234-1234</div>\n              </td>\n              <td class=\\\\\"arco-descriptions-item\\\\\" colspan=\\\\\"1\\\\\">\n                <div class=\\\\\"arco-descriptions-item-label arco-descriptions-item-label-inline\\\\\" style=\\\\\"text-align: left;\\\\\">Residence</div>\n                <div class=\\\\\"arco-descriptions-item-value arco-descriptions-item-value-inline\\\\\" style=\\\\\"text-align: left;\\\\\">Beijing</div>\n              </td>\n              <td class=\\\\\"arco-descriptions-item\\\\\" colspan=\\\\\"1\\\\\">\n                <div class=\\\\\"arco-descriptions-item-label arco-descriptions-item-label-inline\\\\\" style=\\\\\"text-align: left;\\\\\">Hometown</div>\n                <div class=\\\\\"arco-descriptions-item-value arco-descriptions-item-value-inline\\\\\" style=\\\\\"text-align: left;\\\\\">Beijing</div>\n              </td>\n            </tr>\n            <tr class=\\\\\"arco-descriptions-row\\\\\">\n              <td class=\\\\\"arco-descriptions-item\\\\\" colspan=\\\\\"3\\\\\">\n                <div class=\\\\\"arco-descriptions-item-label arco-descriptions-item-label-inline\\\\\" style=\\\\\"text-align: left;\\\\\">Address</div>\n                <div class=\\\\\"arco-descriptions-item-value arco-descriptions-item-value-inline\\\\\" style=\\\\\"text-align: left;\\\\\">Yingdu Building, Zhichun Road, Beijing</div>\n              </td>\n            </tr>\n          </tbody>\n        </table>\n      </div>\n    </div>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-descriptions arco-descriptions-layout-horizontal arco-descriptions-size-medium\\\\\">\n      <div class=\\\\\"arco-descriptions-title\\\\\">User Info</div>\n      <div class=\\\\\"arco-descriptions-body\\\\\">\n        <table class=\\\\\"arco-descriptions-table\\\\\">\n          <tbody>\n            <tr class=\\\\\"arco-descriptions-row\\\\\">\n              <td class=\\\\\"arco-descriptions-item-label arco-descriptions-item-label-block\\\\\" style=\\\\\"text-align: left;\\\\\">Name</td>\n              <td class=\\\\\"arco-descriptions-item-value arco-descriptions-item-value-block\\\\\" style=\\\\\"text-align: left;\\\\\" colspan=\\\\\"5\\\\\"><span class=\\\\\"arco-tag arco-tag-size-medium arco-tag-checked\\\\\"><!--v-if-->Socrates<!--v-if--><!--v-if--></span></td>\n              <td class=\\\\\"arco-descriptions-item-label arco-descriptions-item-label-block\\\\\" style=\\\\\"text-align: left;\\\\\">Mobile</td>\n              <td class=\\\\\"arco-descriptions-item-value arco-descriptions-item-value-block\\\\\" style=\\\\\"text-align: left;\\\\\" colspan=\\\\\"1\\\\\"><span class=\\\\\"arco-tag arco-tag-size-medium arco-tag-checked\\\\\"><!--v-if-->123-1234-1234<!--v-if--><!--v-if--></span></td>\n            </tr>\n            <tr class=\\\\\"arco-descriptions-row\\\\\">\n              <td class=\\\\\"arco-descriptions-item-label arco-descriptions-item-label-block\\\\\" style=\\\\\"text-align: left;\\\\\">Residence</td>\n              <td class=\\\\\"arco-descriptions-item-value arco-descriptions-item-value-block\\\\\" style=\\\\\"text-align: left;\\\\\" colspan=\\\\\"1\\\\\"><span class=\\\\\"arco-tag arco-tag-size-medium arco-tag-checked\\\\\"><!--v-if-->Beijing<!--v-if--><!--v-if--></span></td>\n              <td class=\\\\\"arco-descriptions-item-label arco-descriptions-item-label-block\\\\\" style=\\\\\"text-align: left;\\\\\">Hometown</td>\n              <td class=\\\\\"arco-descriptions-item-value arco-descriptions-item-value-block\\\\\" style=\\\\\"text-align: left;\\\\\" colspan=\\\\\"1\\\\\"><span class=\\\\\"arco-tag arco-tag-size-medium arco-tag-checked\\\\\"><!--v-if-->Beijing<!--v-if--><!--v-if--></span></td>\n              <td class=\\\\\"arco-descriptions-item-label arco-descriptions-item-label-block\\\\\" style=\\\\\"text-align: left;\\\\\">Address</td>\n              <td class=\\\\\"arco-descriptions-item-value arco-descriptions-item-value-block\\\\\" style=\\\\\"text-align: left;\\\\\" colspan=\\\\\"3\\\\\"><span class=\\\\\"arco-tag arco-tag-size-medium arco-tag-checked\\\\\"><!--v-if-->Yingdu Building, Zhichun Road, Beijing<!--v-if--><!--v-if--></span></td>\n            </tr>\n          </tbody>\n        </table>\n      </div>\n    </div>\n  </div>\n</div>\"\n`;\n\nexports[`<descriptions> demo: render [bordered] correctly 1`] = `\n\"<div class=\\\\\"arco-descriptions arco-descriptions-layout-horizontal arco-descriptions-size-medium arco-descriptions-border\\\\\">\n  <div class=\\\\\"arco-descriptions-title\\\\\">User Info</div>\n  <div class=\\\\\"arco-descriptions-body\\\\\">\n    <table class=\\\\\"arco-descriptions-table\\\\\">\n      <tbody>\n        <tr class=\\\\\"arco-descriptions-row\\\\\">\n          <td class=\\\\\"arco-descriptions-item-label arco-descriptions-item-label-block\\\\\" style=\\\\\"text-align: left;\\\\\">Name</td>\n          <td class=\\\\\"arco-descriptions-item-value arco-descriptions-item-value-block\\\\\" style=\\\\\"text-align: left;\\\\\" colspan=\\\\\"1\\\\\">Socrates</td>\n          <td class=\\\\\"arco-descriptions-item-label arco-descriptions-item-label-block\\\\\" style=\\\\\"text-align: left;\\\\\">Mobile</td>\n          <td class=\\\\\"arco-descriptions-item-value arco-descriptions-item-value-block\\\\\" style=\\\\\"text-align: left;\\\\\" colspan=\\\\\"1\\\\\">123-1234-1234</td>\n          <td class=\\\\\"arco-descriptions-item-label arco-descriptions-item-label-block\\\\\" style=\\\\\"text-align: left;\\\\\">Residence</td>\n          <td class=\\\\\"arco-descriptions-item-value arco-descriptions-item-value-block\\\\\" style=\\\\\"text-align: left;\\\\\" colspan=\\\\\"1\\\\\">Beijing</td>\n        </tr>\n        <tr class=\\\\\"arco-descriptions-row\\\\\">\n          <td class=\\\\\"arco-descriptions-item-label arco-descriptions-item-label-block\\\\\" style=\\\\\"text-align: left;\\\\\">Hometown</td>\n          <td class=\\\\\"arco-descriptions-item-value arco-descriptions-item-value-block\\\\\" style=\\\\\"text-align: left;\\\\\" colspan=\\\\\"1\\\\\">Beijing</td>\n          <td class=\\\\\"arco-descriptions-item-label arco-descriptions-item-label-block\\\\\" style=\\\\\"text-align: left;\\\\\">Address</td>\n          <td class=\\\\\"arco-descriptions-item-value arco-descriptions-item-value-block\\\\\" style=\\\\\"text-align: left;\\\\\" colspan=\\\\\"3\\\\\">Yingdu Building, Zhichun Road, Beijing</td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n</div>\"\n`;\n\nexports[`<descriptions> demo: render [example] correctly 1`] = `\n\"<form class=\\\\\"arco-form arco-form-layout-horizontal arco-form-size-medium arco-form-auto-label-width\\\\\">\n  <div class=\\\\\"arco-row arco-row-nowrap arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-horizontal\\\\\">\n    <div class=\\\\\"arco-col arco-col-5 arco-form-item-label-col arco-form-item-label-col-flex\\\\\"><label class=\\\\\"arco-form-item-label\\\\\">\n        <!--v-if-->size\n        <!--v-if-->\n        <!--v-if-->\n      </label></div>\n    <div class=\\\\\"arco-col arco-form-item-wrapper-col\\\\\" style=\\\\\"flex-basis: auto;\\\\\">\n      <div class=\\\\\"arco-form-item-content-wrapper\\\\\">\n        <div class=\\\\\"arco-form-item-content arco-form-item-content-flex\\\\\"><span class=\\\\\"arco-radio-group-button arco-radio-group-size-medium arco-radio-group-direction-horizontal\\\\\"><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"mini\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">mini</span></label><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"small\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">small</span></label><label class=\\\\\"arco-radio-button arco-radio-checked\\\\\"><input type=\\\\\"radio\\\\\" checked=\\\\\"\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"medium\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">medium</span></label><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"large\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">large</span></label></span></div>\n      </div>\n      <!--v-if-->\n      <!--v-if-->\n    </div>\n  </div>\n  <div class=\\\\\"arco-row arco-row-nowrap arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-horizontal\\\\\">\n    <div class=\\\\\"arco-col arco-col-5 arco-form-item-label-col arco-form-item-label-col-flex\\\\\"><label class=\\\\\"arco-form-item-label\\\\\">\n        <!--v-if-->layout\n        <!--v-if-->\n        <!--v-if-->\n      </label></div>\n    <div class=\\\\\"arco-col arco-form-item-wrapper-col\\\\\" style=\\\\\"flex-basis: auto;\\\\\">\n      <div class=\\\\\"arco-form-item-content-wrapper\\\\\">\n        <div class=\\\\\"arco-form-item-content arco-form-item-content-flex\\\\\"><span class=\\\\\"arco-radio-group-button arco-radio-group-size-medium arco-radio-group-direction-horizontal\\\\\"><label class=\\\\\"arco-radio-button arco-radio-checked\\\\\"><input type=\\\\\"radio\\\\\" checked=\\\\\"\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"horizontal\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">horizontal</span></label><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"inline-horizontal\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">inline-horizontal</span></label><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"vertical\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">vertical</span></label><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"inline-vertical\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">inline-vertical</span></label></span></div>\n      </div>\n      <!--v-if-->\n      <!--v-if-->\n    </div>\n  </div>\n  <div class=\\\\\"arco-row arco-row-nowrap arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-horizontal\\\\\">\n    <div class=\\\\\"arco-col arco-col-5 arco-form-item-label-col arco-form-item-label-col-flex\\\\\"><label class=\\\\\"arco-form-item-label\\\\\">\n        <!--v-if-->table-layout\n        <!--v-if-->\n        <!--v-if-->\n      </label></div>\n    <div class=\\\\\"arco-col arco-form-item-wrapper-col\\\\\" style=\\\\\"flex-basis: auto;\\\\\">\n      <div class=\\\\\"arco-form-item-content-wrapper\\\\\">\n        <div class=\\\\\"arco-form-item-content arco-form-item-content-flex\\\\\"><span class=\\\\\"arco-radio-group-button arco-radio-group-size-medium arco-radio-group-direction-horizontal\\\\\"><label class=\\\\\"arco-radio-button arco-radio-checked\\\\\"><input type=\\\\\"radio\\\\\" checked=\\\\\"\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"auto\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">auto</span></label><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"fixed\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">fixed</span></label></span></div>\n      </div>\n      <!--v-if-->\n      <!--v-if-->\n    </div>\n  </div>\n  <div class=\\\\\"arco-row arco-row-nowrap arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-horizontal\\\\\">\n    <div class=\\\\\"arco-col arco-col-5 arco-form-item-label-col arco-form-item-label-col-flex\\\\\"><label class=\\\\\"arco-form-item-label\\\\\">\n        <!--v-if-->column\n        <!--v-if-->\n        <!--v-if-->\n      </label></div>\n    <div class=\\\\\"arco-col arco-form-item-wrapper-col\\\\\" style=\\\\\"flex-basis: auto;\\\\\">\n      <div class=\\\\\"arco-form-item-content-wrapper\\\\\">\n        <div class=\\\\\"arco-form-item-content arco-form-item-content-flex\\\\\"><span class=\\\\\"arco-radio-group-button arco-radio-group-size-medium arco-radio-group-direction-horizontal\\\\\"><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"1\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">1</span></label><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"2\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">2</span></label><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"3\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">3</span></label><label class=\\\\\"arco-radio-button arco-radio-checked\\\\\"><input type=\\\\\"radio\\\\\" checked=\\\\\"\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"4\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">4</span></label><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"5\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">5</span></label></span></div>\n      </div>\n      <!--v-if-->\n      <!--v-if-->\n    </div>\n  </div>\n  <div class=\\\\\"arco-row arco-row-nowrap arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-horizontal\\\\\">\n    <div class=\\\\\"arco-col arco-col-5 arco-form-item-label-col arco-form-item-label-col-flex\\\\\"><label class=\\\\\"arco-form-item-label\\\\\">\n        <!--v-if-->firstSpan\n        <!--v-if-->\n        <!--v-if-->\n      </label></div>\n    <div class=\\\\\"arco-col arco-form-item-wrapper-col\\\\\" style=\\\\\"flex-basis: auto;\\\\\">\n      <div class=\\\\\"arco-form-item-content-wrapper\\\\\">\n        <div class=\\\\\"arco-form-item-content arco-form-item-content-flex\\\\\"><span class=\\\\\"arco-radio-group-button arco-radio-group-size-medium arco-radio-group-direction-horizontal\\\\\"><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"1\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">1</span></label><label class=\\\\\"arco-radio-button arco-radio-checked\\\\\"><input type=\\\\\"radio\\\\\" checked=\\\\\"\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"2\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">2</span></label><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"3\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">3</span></label><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"4\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">4</span></label><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"5\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">5</span></label></span></div>\n      </div>\n      <!--v-if-->\n      <!--v-if-->\n    </div>\n  </div>\n</form>\n<div style=\\\\\"margin-top: 20px;\\\\\">\n  <div class=\\\\\"arco-descriptions arco-descriptions-layout-horizontal arco-descriptions-size-medium arco-descriptions-border\\\\\">\n    <div class=\\\\\"arco-descriptions-title\\\\\">Layout Example</div>\n    <div class=\\\\\"arco-descriptions-body\\\\\">\n      <table class=\\\\\"arco-descriptions-table\\\\\">\n        <tbody>\n          <tr class=\\\\\"arco-descriptions-row\\\\\">\n            <td class=\\\\\"arco-descriptions-item-label arco-descriptions-item-label-block\\\\\" style=\\\\\"text-align: left;\\\\\">Item1</td>\n            <td class=\\\\\"arco-descriptions-item-value arco-descriptions-item-value-block\\\\\" style=\\\\\"text-align: left;\\\\\" colspan=\\\\\"3\\\\\">\n              <div>Span：2\n                <!--v-if-->\n              </div>\n            </td>\n            <td class=\\\\\"arco-descriptions-item-label arco-descriptions-item-label-block\\\\\" style=\\\\\"text-align: left;\\\\\">Item2</td>\n            <td class=\\\\\"arco-descriptions-item-value arco-descriptions-item-value-block\\\\\" style=\\\\\"text-align: left;\\\\\" colspan=\\\\\"3\\\\\">Span：2</td>\n          </tr>\n          <tr class=\\\\\"arco-descriptions-row\\\\\">\n            <td class=\\\\\"arco-descriptions-item-label arco-descriptions-item-label-block\\\\\" style=\\\\\"text-align: left;\\\\\">Item3</td>\n            <td class=\\\\\"arco-descriptions-item-value arco-descriptions-item-value-block\\\\\" style=\\\\\"text-align: left;\\\\\" colspan=\\\\\"7\\\\\">Span：3</td>\n          </tr>\n          <tr class=\\\\\"arco-descriptions-row\\\\\">\n            <td class=\\\\\"arco-descriptions-item-label arco-descriptions-item-label-block\\\\\" style=\\\\\"text-align: left;\\\\\">Item4</td>\n            <td class=\\\\\"arco-descriptions-item-value arco-descriptions-item-value-block\\\\\" style=\\\\\"text-align: left;\\\\\" colspan=\\\\\"3\\\\\">Span：2</td>\n            <td class=\\\\\"arco-descriptions-item-label arco-descriptions-item-label-block\\\\\" style=\\\\\"text-align: left;\\\\\">Item5</td>\n            <td class=\\\\\"arco-descriptions-item-value arco-descriptions-item-value-block\\\\\" style=\\\\\"text-align: left;\\\\\" colspan=\\\\\"1\\\\\">Span：1</td>\n            <td class=\\\\\"arco-descriptions-item-label arco-descriptions-item-label-block\\\\\" style=\\\\\"text-align: left;\\\\\">Item6</td>\n            <td class=\\\\\"arco-descriptions-item-value arco-descriptions-item-value-block\\\\\" style=\\\\\"text-align: left;\\\\\" colspan=\\\\\"1\\\\\">Span：1</td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n  </div>\n</div>\"\n`;\n\nexports[`<descriptions> demo: render [layout] correctly 1`] = `\n\"<span class=\\\\\"arco-radio-group-button arco-radio-group-size-medium arco-radio-group-direction-horizontal\\\\\"><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"mini\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">mini</span></label><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"small\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">small</span></label><label class=\\\\\"arco-radio-button arco-radio-checked\\\\\"><input type=\\\\\"radio\\\\\" checked=\\\\\"\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"medium\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">medium</span></label><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"large\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">large</span></label></span>\n<div style=\\\\\"margin-top: 20px;\\\\\">\n  <div class=\\\\\"arco-descriptions arco-descriptions-layout-horizontal arco-descriptions-size-medium arco-descriptions-border\\\\\">\n    <div class=\\\\\"arco-descriptions-title\\\\\">User Info (horizontal)</div>\n    <div class=\\\\\"arco-descriptions-body\\\\\">\n      <table class=\\\\\"arco-descriptions-table\\\\\">\n        <tbody>\n          <tr class=\\\\\"arco-descriptions-row\\\\\">\n            <td class=\\\\\"arco-descriptions-item-label arco-descriptions-item-label-block\\\\\" style=\\\\\"text-align: left;\\\\\">Name</td>\n            <td class=\\\\\"arco-descriptions-item-value arco-descriptions-item-value-block\\\\\" style=\\\\\"text-align: left;\\\\\" colspan=\\\\\"1\\\\\">Socrates</td>\n            <td class=\\\\\"arco-descriptions-item-label arco-descriptions-item-label-block\\\\\" style=\\\\\"text-align: left;\\\\\">Mobile</td>\n            <td class=\\\\\"arco-descriptions-item-value arco-descriptions-item-value-block\\\\\" style=\\\\\"text-align: left;\\\\\" colspan=\\\\\"1\\\\\">123-1234-1234</td>\n            <td class=\\\\\"arco-descriptions-item-label arco-descriptions-item-label-block\\\\\" style=\\\\\"text-align: left;\\\\\">Residence</td>\n            <td class=\\\\\"arco-descriptions-item-value arco-descriptions-item-value-block\\\\\" style=\\\\\"text-align: left;\\\\\" colspan=\\\\\"1\\\\\">Beijing</td>\n          </tr>\n          <tr class=\\\\\"arco-descriptions-row\\\\\">\n            <td class=\\\\\"arco-descriptions-item-label arco-descriptions-item-label-block\\\\\" style=\\\\\"text-align: left;\\\\\">Hometown</td>\n            <td class=\\\\\"arco-descriptions-item-value arco-descriptions-item-value-block\\\\\" style=\\\\\"text-align: left;\\\\\" colspan=\\\\\"1\\\\\">Beijing</td>\n            <td class=\\\\\"arco-descriptions-item-label arco-descriptions-item-label-block\\\\\" style=\\\\\"text-align: left;\\\\\">Address</td>\n            <td class=\\\\\"arco-descriptions-item-value arco-descriptions-item-value-block\\\\\" style=\\\\\"text-align: left;\\\\\" colspan=\\\\\"3\\\\\">Yingdu Building, Zhichun Road, Beijing</td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n  </div>\n  <div class=\\\\\"arco-descriptions arco-descriptions-layout-inline-horizontal arco-descriptions-size-medium arco-descriptions-border\\\\\">\n    <div class=\\\\\"arco-descriptions-title\\\\\">User Info (inline-horizontal)</div>\n    <div class=\\\\\"arco-descriptions-body\\\\\">\n      <table class=\\\\\"arco-descriptions-table\\\\\">\n        <tbody>\n          <tr class=\\\\\"arco-descriptions-row\\\\\">\n            <td class=\\\\\"arco-descriptions-item\\\\\" colspan=\\\\\"1\\\\\">\n              <div class=\\\\\"arco-descriptions-item-label arco-descriptions-item-label-inline\\\\\" style=\\\\\"text-align: left;\\\\\">Name</div>\n              <div class=\\\\\"arco-descriptions-item-value arco-descriptions-item-value-inline\\\\\" style=\\\\\"text-align: left;\\\\\">Socrates</div>\n            </td>\n            <td class=\\\\\"arco-descriptions-item\\\\\" colspan=\\\\\"1\\\\\">\n              <div class=\\\\\"arco-descriptions-item-label arco-descriptions-item-label-inline\\\\\" style=\\\\\"text-align: left;\\\\\">Mobile</div>\n              <div class=\\\\\"arco-descriptions-item-value arco-descriptions-item-value-inline\\\\\" style=\\\\\"text-align: left;\\\\\">123-1234-1234</div>\n            </td>\n            <td class=\\\\\"arco-descriptions-item\\\\\" colspan=\\\\\"1\\\\\">\n              <div class=\\\\\"arco-descriptions-item-label arco-descriptions-item-label-inline\\\\\" style=\\\\\"text-align: left;\\\\\">Residence</div>\n              <div class=\\\\\"arco-descriptions-item-value arco-descriptions-item-value-inline\\\\\" style=\\\\\"text-align: left;\\\\\">Beijing</div>\n            </td>\n          </tr>\n          <tr class=\\\\\"arco-descriptions-row\\\\\">\n            <td class=\\\\\"arco-descriptions-item\\\\\" colspan=\\\\\"1\\\\\">\n              <div class=\\\\\"arco-descriptions-item-label arco-descriptions-item-label-inline\\\\\" style=\\\\\"text-align: left;\\\\\">Hometown</div>\n              <div class=\\\\\"arco-descriptions-item-value arco-descriptions-item-value-inline\\\\\" style=\\\\\"text-align: left;\\\\\">Beijing</div>\n            </td>\n            <td class=\\\\\"arco-descriptions-item\\\\\" colspan=\\\\\"2\\\\\">\n              <div class=\\\\\"arco-descriptions-item-label arco-descriptions-item-label-inline\\\\\" style=\\\\\"text-align: left;\\\\\">Address</div>\n              <div class=\\\\\"arco-descriptions-item-value arco-descriptions-item-value-inline\\\\\" style=\\\\\"text-align: left;\\\\\">Yingdu Building, Zhichun Road, Beijing</div>\n            </td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n  </div>\n  <div class=\\\\\"arco-descriptions arco-descriptions-layout-vertical arco-descriptions-size-medium arco-descriptions-border\\\\\">\n    <div class=\\\\\"arco-descriptions-title\\\\\">User Info (vertical)</div>\n    <div class=\\\\\"arco-descriptions-body\\\\\">\n      <table class=\\\\\"arco-descriptions-table\\\\\">\n        <tbody>\n          <tr class=\\\\\"arco-descriptions-row\\\\\">\n            <td class=\\\\\"arco-descriptions-item-label arco-descriptions-item-label-block\\\\\" style=\\\\\"text-align: left;\\\\\" colspan=\\\\\"1\\\\\">Name</td>\n            <td class=\\\\\"arco-descriptions-item-label arco-descriptions-item-label-block\\\\\" style=\\\\\"text-align: left;\\\\\" colspan=\\\\\"1\\\\\">Mobile</td>\n            <td class=\\\\\"arco-descriptions-item-label arco-descriptions-item-label-block\\\\\" style=\\\\\"text-align: left;\\\\\" colspan=\\\\\"1\\\\\">Residence</td>\n          </tr>\n          <tr class=\\\\\"arco-descriptions-row\\\\\">\n            <td class=\\\\\"arco-descriptions-item-value arco-descriptions-item-value-block\\\\\" style=\\\\\"text-align: left;\\\\\" colspan=\\\\\"1\\\\\">Socrates</td>\n            <td class=\\\\\"arco-descriptions-item-value arco-descriptions-item-value-block\\\\\" style=\\\\\"text-align: left;\\\\\" colspan=\\\\\"1\\\\\">123-1234-1234</td>\n            <td class=\\\\\"arco-descriptions-item-value arco-descriptions-item-value-block\\\\\" style=\\\\\"text-align: left;\\\\\" colspan=\\\\\"1\\\\\">Beijing</td>\n          </tr>\n          <tr class=\\\\\"arco-descriptions-row\\\\\">\n            <td class=\\\\\"arco-descriptions-item-label arco-descriptions-item-label-block\\\\\" style=\\\\\"text-align: left;\\\\\" colspan=\\\\\"1\\\\\">Hometown</td>\n            <td class=\\\\\"arco-descriptions-item-label arco-descriptions-item-label-block\\\\\" style=\\\\\"text-align: left;\\\\\" colspan=\\\\\"2\\\\\">Address</td>\n          </tr>\n          <tr class=\\\\\"arco-descriptions-row\\\\\">\n            <td class=\\\\\"arco-descriptions-item-value arco-descriptions-item-value-block\\\\\" style=\\\\\"text-align: left;\\\\\" colspan=\\\\\"1\\\\\">Beijing</td>\n            <td class=\\\\\"arco-descriptions-item-value arco-descriptions-item-value-block\\\\\" style=\\\\\"text-align: left;\\\\\" colspan=\\\\\"2\\\\\">Yingdu Building, Zhichun Road, Beijing</td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n  </div>\n  <div class=\\\\\"arco-descriptions arco-descriptions-layout-inline-vertical arco-descriptions-size-medium arco-descriptions-border\\\\\">\n    <div class=\\\\\"arco-descriptions-title\\\\\">User Info (inline-vertical)</div>\n    <div class=\\\\\"arco-descriptions-body\\\\\">\n      <table class=\\\\\"arco-descriptions-table\\\\\">\n        <tbody>\n          <tr class=\\\\\"arco-descriptions-row\\\\\">\n            <td class=\\\\\"arco-descriptions-item\\\\\" colspan=\\\\\"1\\\\\">\n              <div class=\\\\\"arco-descriptions-item-label arco-descriptions-item-label-inline\\\\\" style=\\\\\"text-align: left;\\\\\">Name</div>\n              <div class=\\\\\"arco-descriptions-item-value arco-descriptions-item-value-inline\\\\\" style=\\\\\"text-align: left;\\\\\">Socrates</div>\n            </td>\n            <td class=\\\\\"arco-descriptions-item\\\\\" colspan=\\\\\"1\\\\\">\n              <div class=\\\\\"arco-descriptions-item-label arco-descriptions-item-label-inline\\\\\" style=\\\\\"text-align: left;\\\\\">Mobile</div>\n              <div class=\\\\\"arco-descriptions-item-value arco-descriptions-item-value-inline\\\\\" style=\\\\\"text-align: left;\\\\\">123-1234-1234</div>\n            </td>\n            <td class=\\\\\"arco-descriptions-item\\\\\" colspan=\\\\\"1\\\\\">\n              <div class=\\\\\"arco-descriptions-item-label arco-descriptions-item-label-inline\\\\\" style=\\\\\"text-align: left;\\\\\">Residence</div>\n              <div class=\\\\\"arco-descriptions-item-value arco-descriptions-item-value-inline\\\\\" style=\\\\\"text-align: left;\\\\\">Beijing</div>\n            </td>\n          </tr>\n          <tr class=\\\\\"arco-descriptions-row\\\\\">\n            <td class=\\\\\"arco-descriptions-item\\\\\" colspan=\\\\\"1\\\\\">\n              <div class=\\\\\"arco-descriptions-item-label arco-descriptions-item-label-inline\\\\\" style=\\\\\"text-align: left;\\\\\">Hometown</div>\n              <div class=\\\\\"arco-descriptions-item-value arco-descriptions-item-value-inline\\\\\" style=\\\\\"text-align: left;\\\\\">Beijing</div>\n            </td>\n            <td class=\\\\\"arco-descriptions-item\\\\\" colspan=\\\\\"2\\\\\">\n              <div class=\\\\\"arco-descriptions-item-label arco-descriptions-item-label-inline\\\\\" style=\\\\\"text-align: left;\\\\\">Address</div>\n              <div class=\\\\\"arco-descriptions-item-value arco-descriptions-item-value-inline\\\\\" style=\\\\\"text-align: left;\\\\\">Yingdu Building, Zhichun Road, Beijing</div>\n            </td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n  </div>\n</div>\"\n`;\n\nexports[`<descriptions> demo: render [single] correctly 1`] = `\n\"<span class=\\\\\"arco-radio-group-button arco-radio-group-size-medium arco-radio-group-direction-horizontal\\\\\"><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"mini\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">mini</span></label><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"small\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">small</span></label><label class=\\\\\"arco-radio-button arco-radio-checked\\\\\"><input type=\\\\\"radio\\\\\" checked=\\\\\"\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"medium\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">medium</span></label><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"large\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">large</span></label></span>\n<div class=\\\\\"arco-descriptions arco-descriptions-layout-horizontal arco-descriptions-size-medium\\\\\" style=\\\\\"margin-top: 20px;\\\\\">\n  <div class=\\\\\"arco-descriptions-title\\\\\">User Info</div>\n  <div class=\\\\\"arco-descriptions-body\\\\\">\n    <table class=\\\\\"arco-descriptions-table\\\\\">\n      <tbody>\n        <tr class=\\\\\"arco-descriptions-row\\\\\">\n          <td class=\\\\\"arco-descriptions-item-label arco-descriptions-item-label-block\\\\\" style=\\\\\"text-align: left;\\\\\">Name</td>\n          <td class=\\\\\"arco-descriptions-item-value arco-descriptions-item-value-block\\\\\" style=\\\\\"text-align: left;\\\\\" colspan=\\\\\"1\\\\\">Socrates</td>\n        </tr>\n        <tr class=\\\\\"arco-descriptions-row\\\\\">\n          <td class=\\\\\"arco-descriptions-item-label arco-descriptions-item-label-block\\\\\" style=\\\\\"text-align: left;\\\\\">Mobile</td>\n          <td class=\\\\\"arco-descriptions-item-value arco-descriptions-item-value-block\\\\\" style=\\\\\"text-align: left;\\\\\" colspan=\\\\\"1\\\\\">123-1234-1234</td>\n        </tr>\n        <tr class=\\\\\"arco-descriptions-row\\\\\">\n          <td class=\\\\\"arco-descriptions-item-label arco-descriptions-item-label-block\\\\\" style=\\\\\"text-align: left;\\\\\">Residence</td>\n          <td class=\\\\\"arco-descriptions-item-value arco-descriptions-item-value-block\\\\\" style=\\\\\"text-align: left;\\\\\" colspan=\\\\\"1\\\\\">Beijing</td>\n        </tr>\n        <tr class=\\\\\"arco-descriptions-row\\\\\">\n          <td class=\\\\\"arco-descriptions-item-label arco-descriptions-item-label-block\\\\\" style=\\\\\"text-align: left;\\\\\">Hometown</td>\n          <td class=\\\\\"arco-descriptions-item-value arco-descriptions-item-value-block\\\\\" style=\\\\\"text-align: left;\\\\\" colspan=\\\\\"1\\\\\">Beijing</td>\n        </tr>\n        <tr class=\\\\\"arco-descriptions-row\\\\\">\n          <td class=\\\\\"arco-descriptions-item-label arco-descriptions-item-label-block\\\\\" style=\\\\\"text-align: left;\\\\\">Address</td>\n          <td class=\\\\\"arco-descriptions-item-value arco-descriptions-item-value-block\\\\\" style=\\\\\"text-align: left;\\\\\" colspan=\\\\\"1\\\\\">Yingdu Building, Zhichun Road, Beijing</td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n</div>\"\n`;\n"
  },
  {
    "path": "packages/web-vue/components/descriptions/__test__/demo.test.ts",
    "content": "import demoTest from '../../../scripts/demo-test';\n\ndemoTest('descriptions');\n"
  },
  {
    "path": "packages/web-vue/components/descriptions/descriptions-item.vue",
    "content": "<template>\n  <slot />\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue';\nimport { getPrefixCls } from '../_utils/global-config';\n\nexport default defineComponent({\n  name: 'DescriptionsItem',\n  props: {\n    /**\n     * @zh 所占列数\n     * @en number of columns\n     * @version 2.18.0\n     */\n    span: {\n      type: Number,\n      default: 1,\n    },\n    /**\n     * @zh 标签\n     * @en Label\n     * @version 2.18.0\n     */\n    label: String,\n  },\n  /**\n   * @zh 标签\n   * @en Label\n   * @slot label\n   * @version 2.18.0\n   */\n  setup() {\n    const prefixCls = getPrefixCls('descriptions');\n\n    return {\n      prefixCls,\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/descriptions/descriptions.tsx",
    "content": "import type { PropType, VNode, CSSProperties } from 'vue';\nimport { computed, defineComponent, isVNode, toRefs } from 'vue';\nimport type { Size, TextAlign } from '../_utils/constant';\nimport { getPrefixCls } from '../_utils/global-config';\nimport { isFunction, isObject } from '../_utils/is';\nimport { DescData, RenderData } from './interface';\nimport { getAllElements, isSlotsChildren } from '../_utils/vue-utils';\nimport { useResponsiveState } from '../grid/hook/use-responsive-state';\nimport { ResponsiveValue } from '../grid';\nimport { useSize } from '../_hooks/use-size';\n\nexport default defineComponent({\n  name: 'Descriptions',\n  props: {\n    /**\n     * @zh 描述列表的数据\n     * @en Data for descriptions\n     */\n    data: {\n      type: Array as PropType<DescData[]>,\n      default: () => [],\n    },\n    /**\n     * @zh 每行放置的数据个数。2.20.0 版本支持响应式配置，配置可参考 Grid\n     * @en The number of data placed in each row. Version 2.20.0 supports reactive configuration, the configuration can refer to Grid\n     */\n    column: {\n      type: [Number, Object] as PropType<number | ResponsiveValue>,\n      default: 3,\n    },\n    /**\n     * @zh 描述列表的标题\n     * @en Title of descriptions\n     */\n    title: String,\n    /**\n     * @zh 描述列表的排列方式\n     * @en Arrangement of descriptions\n     */\n    layout: {\n      type: String as PropType<\n        'horizontal' | 'vertical' | 'inline-horizontal' | 'inline-vertical'\n      >,\n      default: 'horizontal',\n    },\n    /**\n     *  @zh 文字的对齐位置\n     *  @en Alignment position of text\n     */\n    align: {\n      type: [String, Object] as PropType<\n        TextAlign | { label?: TextAlign; value?: TextAlign }\n      >,\n      default: 'left',\n    },\n    /**\n     * @zh 描述列表的大小\n     * @en The size of the descriptions\n     * @values 'mini', 'small', 'medium', 'large'\n     */\n    size: {\n      type: String as PropType<Size>,\n    },\n    /**\n     * @zh 是否显示边框\n     * @en Whether to show the border\n     */\n    bordered: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 数据标签的样式\n     * @en Data label style\n     */\n    labelStyle: {\n      type: Object as PropType<CSSProperties>,\n    },\n    /**\n     * @zh 数据内容的样式\n     * @en Data content style\n     */\n    valueStyle: {\n      type: Object as PropType<CSSProperties>,\n    },\n    /**\n     * @zh 描述中表格样式的 `layout-fixed`，当设置成 `fixed` 时，宽度会均分。\n     * @en The `layout-fixed` of the table style in the description. The width will be evenly distributed when it's set to `fixed`.\n     * @defaultValue 'auto'\n     * @version 2.38.0\n     */\n    tableLayout: {\n      type: String as PropType<'auto' | 'fixed'>,\n      default: 'auto',\n    },\n  },\n  /**\n   * @zh 标题\n   * @en Title\n   * @slot title\n   */\n  /**\n   * @zh 数据标签\n   * @en Data label\n   * @slot label\n   * @binding {string} label\n   * @binding {number} index\n   * @binding {DescData} data\n   */\n  /**\n   * @zh 数据内容\n   * @en Data value\n   * @slot value\n   * @binding {string} value\n   * @binding {number} index\n   * @binding {DescData} data\n   */\n  setup(props, { slots }) {\n    const { column, size } = toRefs(props);\n    const prefixCls = getPrefixCls('descriptions');\n    const { mergedSize } = useSize(size);\n\n    const computedColumn = useResponsiveState(column, 3, true);\n\n    const labelAlign = computed(\n      () => (isObject(props.align) ? props.align.label : props.align) ?? 'left'\n    );\n    const valueAlign = computed(\n      () => (isObject(props.align) ? props.align.value : props.align) ?? 'left'\n    );\n\n    const labelStyle = computed<CSSProperties>(() => ({\n      textAlign: labelAlign.value,\n      ...props.labelStyle,\n    }));\n\n    const valueStyle = computed<CSSProperties>(() => ({\n      textAlign: valueAlign.value,\n      ...props.valueStyle,\n    }));\n\n    const getGroupedData = (data: (DescData | VNode)[]) => {\n      const groupedData: RenderData[][] = [];\n      let currentRow: RenderData[] = [];\n      let currentSpan = 0;\n\n      const addRow = () => {\n        if (currentRow.length) {\n          // fill the rest span，not needed, can be removed.\n          const restSpan = computedColumn.value - currentSpan;\n          currentRow[currentRow.length - 1].span += restSpan;\n          groupedData.push(currentRow);\n        }\n      };\n\n      data.forEach((item) => {\n        const itemSpan = Math.min(\n          (isVNode(item) ? item.props?.span : item.span) ?? 1,\n          computedColumn.value\n        );\n\n        // add item to new row\n        if (currentSpan + itemSpan > computedColumn.value) {\n          addRow();\n\n          currentRow = [];\n          currentSpan = 0;\n        }\n\n        currentRow.push({\n          data: item,\n          span: itemSpan,\n        });\n        currentSpan += itemSpan;\n      });\n\n      addRow();\n\n      return groupedData;\n    };\n\n    const groupedData = computed(() => getGroupedData(props.data ?? []));\n\n    const renderLabel = (item: DescData | VNode, index: number) => {\n      if (isVNode(item)) {\n        return (\n          (isSlotsChildren(item, item.children) && item.children.label?.()) ||\n          item.props?.label\n        );\n      }\n      return (\n        slots.label?.({ label: item.label, index, data: item }) ??\n        (isFunction(item.label) ? item.label() : item.label)\n      );\n    };\n\n    const renderValue = (item: DescData | VNode, index: number) => {\n      if (isVNode(item)) {\n        return item;\n      }\n      return (\n        slots.value?.({ value: item.value, index, data: item }) ??\n        (isFunction(item.value) ? item.value() : item.value)\n      );\n    };\n\n    const renderVerticalItems = (data: RenderData[]) => (\n      <>\n        <tr class={`${prefixCls}-row`}>\n          {data.map((item, index) => (\n            <td\n              key={`label-${index}`}\n              class={[\n                `${prefixCls}-item-label`,\n                `${prefixCls}-item-label-block`,\n              ]}\n              style={labelStyle.value}\n              colspan={item.span}\n            >\n              {renderLabel(item.data, index)}\n            </td>\n          ))}\n        </tr>\n        <tr class={`${prefixCls}-row`}>\n          {data.map((item, index) => (\n            <td\n              key={`value-${index}`}\n              class={[\n                `${prefixCls}-item-value`,\n                `${prefixCls}-item-value-block`,\n              ]}\n              style={valueStyle.value}\n              colspan={item.span}\n            >\n              {renderValue(item.data, index)}\n            </td>\n          ))}\n        </tr>\n      </>\n    );\n\n    const renderHorizontalItems = (data: RenderData[], index: number) => (\n      <tr class={`${prefixCls}-row`} key={`tr-${index}`}>\n        {data.map((item) => (\n          <>\n            <td\n              class={[\n                `${prefixCls}-item-label`,\n                `${prefixCls}-item-label-block`,\n              ]}\n              style={labelStyle.value}\n            >\n              {renderLabel(item.data, index)}\n            </td>\n            <td\n              class={[\n                `${prefixCls}-item-value`,\n                `${prefixCls}-item-value-block`,\n              ]}\n              style={valueStyle.value}\n              colspan={item.span * 2 - 1}\n            >\n              {renderValue(item.data, index)}\n            </td>\n          </>\n        ))}\n      </tr>\n    );\n\n    const renderInlineItems = (data: RenderData[], index: number) => (\n      <tr class={`${prefixCls}-row`} key={`inline-${index}`}>\n        {data.map((item, index) => (\n          <td\n            key={`item-${index}`}\n            class={`${prefixCls}-item`}\n            colspan={item.span}\n          >\n            <div\n              class={[\n                `${prefixCls}-item-label`,\n                `${prefixCls}-item-label-inline`,\n              ]}\n              style={labelStyle.value}\n            >\n              {renderLabel(item.data, index)}\n            </div>\n            <div\n              class={[\n                `${prefixCls}-item-value`,\n                `${prefixCls}-item-value-inline`,\n              ]}\n              style={valueStyle.value}\n            >\n              {renderValue(item.data, index)}\n            </div>\n          </td>\n        ))}\n      </tr>\n    );\n\n    const renderItems = (data: RenderData[], index: number) => {\n      if (['inline-horizontal', 'inline-vertical'].includes(props.layout)) {\n        return renderInlineItems(data, index);\n      }\n      if (props.layout === 'vertical') {\n        return renderVerticalItems(data);\n      }\n      return renderHorizontalItems(data, index);\n    };\n\n    const cls = computed(() => [\n      prefixCls,\n      `${prefixCls}-layout-${props.layout}`,\n      `${prefixCls}-size-${mergedSize.value}`,\n      {\n        [`${prefixCls}-border`]: props.bordered,\n      },\n      {\n        [`${prefixCls}-table-layout-fixed`]: props.tableLayout === 'fixed',\n      },\n    ]);\n\n    const renderTitle = () => {\n      const title = slots.title?.() ?? props.title;\n      if (title) {\n        return <div class={`${prefixCls}-title`}>{title}</div>;\n      }\n      return null;\n    };\n\n    return () => {\n      const _groupedData = slots.default\n        ? getGroupedData(getAllElements(slots.default()))\n        : groupedData.value;\n\n      return (\n        <div class={cls.value}>\n          {renderTitle()}\n          <div class={`${prefixCls}-body`}>\n            <table class={`${prefixCls}-table`}>\n              <tbody>\n                {_groupedData.map((data, index) => renderItems(data, index))}\n              </tbody>\n            </table>\n          </div>\n        </div>\n      );\n    };\n  },\n});\n"
  },
  {
    "path": "packages/web-vue/components/descriptions/index.ts",
    "content": "import type { App } from 'vue';\nimport type { ArcoOptions } from '../_utils/types';\nimport { setGlobalConfig, getComponentPrefix } from '../_utils/global-config';\nimport _Descriptions from './descriptions';\nimport _DescriptionsItem from './descriptions-item.vue';\n\nconst Descriptions = Object.assign(_Descriptions, {\n  DescriptionsItem: _DescriptionsItem,\n  install: (app: App, options?: ArcoOptions) => {\n    setGlobalConfig(app, options);\n    const componentPrefix = getComponentPrefix(options);\n\n    app.component(componentPrefix + _Descriptions.name, _Descriptions);\n    app.component(componentPrefix + _DescriptionsItem.name, _DescriptionsItem);\n  },\n});\n\nexport type DescriptionsInstance = InstanceType<typeof _Descriptions>;\nexport type DescriptionsItemInstance = InstanceType<typeof _DescriptionsItem>;\n\nexport type { DescData } from './interface';\n\nexport { _DescriptionsItem as DescriptionsItem };\n\nexport default Descriptions;\n"
  },
  {
    "path": "packages/web-vue/components/descriptions/interface.ts",
    "content": "import { RenderFunction, VNode } from 'vue';\n\nexport interface DescData {\n  /**\n   * @zh 标签\n   * @en Label\n   */\n  label: string | RenderFunction;\n  /**\n   * @zh 数据\n   * @en Data\n   */\n  value: string | RenderFunction;\n  /**\n   * @zh 所占列数\n   * @en number of columns\n   * @defaultValue 1\n   */\n  span?: number;\n}\n\nexport type DescLayout =\n  | 'horizontal'\n  | 'vertical'\n  | 'inline-horizontal'\n  | 'inline-vertical';\n\nexport interface DescItemData {\n  index: number;\n  span: number;\n}\n\nexport interface RenderData {\n  data: DescData | VNode;\n  span: number;\n}\n"
  },
  {
    "path": "packages/web-vue/components/descriptions/style/index.less",
    "content": "@import './token.less';\n\n@descriptions-prefix-cls: ~'@{prefix}-descriptions';\n\n.descriptions-size(@size) {\n  &-size-@{size} &-title {\n    margin-bottom: ~'@{descriptions-size-@{size}-title-margin-bottom}';\n  }\n\n  &-size-@{size} &-item-label-block,\n  &-size-@{size} &-item-value-block {\n    padding-right: ~'@{descriptions-border-item-size-@{size}-padding-horizontal}';\n    padding-bottom: ~'@{descriptions-item-size-@{size}-spacing-bottom}';\n    font-size: ~'@{descriptions-size-@{size}-font-size-text}';\n  }\n\n  &-size-@{size}&-border &-item-label-block,\n  &-size-@{size}&-border &-item-value-block {\n    padding: ~'@{descriptions-border-item-size-@{size}-padding-vertical}' ~'@{descriptions-border-item-size-@{size}-padding-horizontal}';\n  }\n\n  &-size-@{size}&-border&-layout-inline-vertical &-item {\n    @_descriptions-padding-vertical: ~'descriptions-border-item-size-@{size}-padding-vertical';\n\n    padding: @@_descriptions-padding-vertical + 5px ~'@{descriptions-border-item-size-@{size}-padding-horizontal}';\n  }\n}\n\n.@{descriptions-prefix-cls} {\n  &-table {\n    width: 100%;\n    border-collapse: collapse;\n  }\n\n  &-table-layout-fixed table {\n    table-layout: fixed;\n  }\n\n  &-title {\n    margin-bottom: @descriptions-size-default-title-margin-bottom;\n    color: @descriptions-color-title;\n    font-weight: @descriptions-font-weight-title;\n    font-size: @descriptions-font-size-title;\n    line-height: @line-height-base;\n  }\n\n  &-item,\n  &-item-label,\n  &-item-value {\n    box-sizing: border-box;\n    font-size: @descriptions-size-default-font-size-text;\n    line-height: @line-height-base;\n    text-align: left;\n  }\n\n  &-table-layout-fixed &-item-label {\n    width: auto;\n  }\n\n  &-item-label-block {\n    width: 1px;\n    padding: 0 4px @descriptions-item-size-default-spacing-bottom 0;\n    color: @descriptions-color-text-label;\n    font-weight: @descriptions-font-weight-text-label;\n    white-space: nowrap;\n  }\n\n  &-item-value-block {\n    padding: 0 4px @descriptions-item-size-default-spacing-bottom 0;\n    color: @descriptions-color-text-value;\n    font-weight: @descriptions-font-weight-text-value;\n    white-space: pre-wrap;\n    word-break: break-word;\n  }\n\n  &-item-label-inline,\n  &-item-value-inline {\n    box-sizing: border-box;\n    font-size: @descriptions-size-default-font-size-text;\n    line-height: @line-height-base;\n    text-align: left;\n  }\n\n  &-item-label-inline {\n    margin-bottom: 2px;\n    color: @descriptions-color-text-label;\n    font-weight: @descriptions-font-weight-text-label;\n  }\n\n  &-item-value-inline {\n    color: @descriptions-color-text-value;\n    font-weight: @descriptions-font-weight-text-value;\n  }\n\n  &-layout-inline-horizontal &-item-label-inline {\n    margin-right: 4px;\n  }\n\n  &-layout-inline-horizontal &-item-label-inline,\n  &-layout-inline-horizontal &-item-value-inline {\n    display: inline-block;\n    margin-bottom: 0;\n  }\n\n  &-border&-layout-inline-vertical &-item {\n    padding: @descriptions-border-item-size-default-padding-vertical + 5px\n      @descriptions-border-item-size-default-padding-horizontal;\n  }\n\n  &-border &-body {\n    overflow: hidden;\n    border: @descriptions-border-width @descriptions-border-style\n      @descriptions-color-border;\n    border-radius: @descriptions-border-radius;\n  }\n\n  &-border &-row:not(:last-child) {\n    border-bottom: @descriptions-border-width @descriptions-border-style\n      @descriptions-color-border;\n  }\n\n  &-border &-item,\n  &-border &-item-label-block,\n  &-border &-item-value-block {\n    padding: @descriptions-border-item-size-default-padding-vertical\n      @descriptions-border-item-size-default-padding-horizontal;\n    border-right: @descriptions-border-width @descriptions-border-style\n      @descriptions-color-border;\n  }\n\n  &-border &-item-label-block {\n    background-color: @descriptions-border-color-bg-label;\n  }\n\n  &-border &-item-value-block:last-child {\n    border-right: none;\n  }\n\n  &-border &-item:last-child {\n    border-right: none;\n  }\n\n  &-border&-layout-vertical &-item-label-block:last-child {\n    border-right: none;\n  }\n\n  &-layout-vertical:not(&-border) &-item-value-block:first-child {\n    padding-left: 0;\n  }\n\n  // Size\n  .descriptions-size(mini);\n\n  .descriptions-size(small);\n\n  .descriptions-size(medium);\n\n  .descriptions-size(large);\n}\n"
  },
  {
    "path": "packages/web-vue/components/descriptions/style/index.ts",
    "content": "import '../../style/index.less';\nimport './index.less';\n"
  },
  {
    "path": "packages/web-vue/components/descriptions/style/token.less",
    "content": "@import '../../style/theme/index.less';\n\n@descriptions-border-width: 1px;\n@descriptions-border-style: solid;\n@descriptions-color-border: var(~'@{arco-cssvars-prefix}-color-neutral-3');\n@descriptions-border-radius: @radius-medium;\n@descriptions-font-size-title: @font-size-title-1;\n\n@descriptions-size-mini-title-margin-bottom: 6px;\n@descriptions-size-small-title-margin-bottom: 8px;\n@descriptions-size-medium-title-margin-bottom: 12px;\n@descriptions-size-default-title-margin-bottom: 16px;\n@descriptions-size-large-title-margin-bottom: 20px;\n\n@descriptions-size-mini-font-size-text: @font-size-body-1;\n@descriptions-size-small-font-size-text: @font-size-body-3;\n@descriptions-size-medium-font-size-text: @font-size-body-3;\n@descriptions-size-default-font-size-text: @font-size-body-3;\n@descriptions-size-large-font-size-text: @font-size-body-3;\n\n@descriptions-color-title: var(~'@{arco-cssvars-prefix}-color-text-1');\n@descriptions-color-text-label: var(~'@{arco-cssvars-prefix}-color-text-3');\n@descriptions-color-text-value: var(~'@{arco-cssvars-prefix}-color-text-1');\n@descriptions-font-weight-title: @font-weight-500;\n@descriptions-font-weight-text-label: @font-weight-500;\n@descriptions-font-weight-text-value: @font-weight-400;\n\n@descriptions-border-color-bg-label: var(~'@{arco-cssvars-prefix}-color-fill-1');\n\n@descriptions-item-size-mini-spacing-bottom: 2px;\n@descriptions-item-size-small-spacing-bottom: 4px;\n@descriptions-item-size-medium-spacing-bottom: 8px;\n@descriptions-item-size-default-spacing-bottom: 12px;\n@descriptions-item-size-large-spacing-bottom: 16px;\n\n@descriptions-border-item-size-mini-padding-horizontal: @spacing-8;\n@descriptions-border-item-size-mini-padding-vertical: 3px;\n@descriptions-border-item-size-small-padding-horizontal: @spacing-8;\n@descriptions-border-item-size-small-padding-vertical: 3px;\n@descriptions-border-item-size-medium-padding-horizontal: @spacing-8;\n@descriptions-border-item-size-medium-padding-vertical: 5px;\n@descriptions-border-item-size-default-padding-horizontal: @spacing-8;\n@descriptions-border-item-size-default-padding-vertical: 7px;\n@descriptions-border-item-size-large-padding-horizontal: @spacing-8;\n@descriptions-border-item-size-large-padding-vertical: 9px;\n"
  },
  {
    "path": "packages/web-vue/components/divider/CHANGELOG.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.48.1\n\n`2023-07-14`\n\n### 🐛 BugFix\n\n- fix  adaptive height issue with divider ([#2561](https://github.com/arco-design/arco-design-vue/pull/2561))\n\n\n## 2.46.0\n\n`2023-05-12`\n\n### 🐛 BugFix\n\n- Fix the problem that margin cannot be set to 0 ([#2390](https://github.com/arco-design/arco-design-vue/pull/2390))\n\n\n## 2.44.2\n\n`2023-03-17`\n\n### 🐛 BugFix\n\n- Fix the problem that the dividing line is displayed incorrectly ([#2205](https://github.com/arco-design/arco-design-vue/pull/2205))\n\n\n## 2.39.2\n\n`2022-12-02`\n\n### 🐛 BugFix\n\n- Fix the problem that the style is wrong when setting size ([#1905](https://github.com/arco-design/arco-design-vue/pull/1905))\n\n\n## 2.35.0\n\n`2022-08-12`\n\n### 🆕 Feature\n\n- support split line width and style ([#1473](https://github.com/arco-design/arco-design-vue/pull/1473))\n- support split line margin ([#1473](https://github.com/arco-design/arco-design-vue/pull/1473))\n\n"
  },
  {
    "path": "packages/web-vue/components/divider/CHANGELOG.zh-CN.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.48.1\n\n`2023-07-14`\n\n### 🐛 问题修复\n\n- 修复竖向自适应高度 ([#2561](https://github.com/arco-design/arco-design-vue/pull/2561))\n\n\n## 2.46.0\n\n`2023-05-12`\n\n### 🐛 问题修复\n\n- 修复 margin 无法设置为 0 的问题 ([#2390](https://github.com/arco-design/arco-design-vue/pull/2390))\n\n\n## 2.44.2\n\n`2023-03-17`\n\n### 🐛 问题修复\n\n- 修复分割线展示错误的问题 ([#2205](https://github.com/arco-design/arco-design-vue/pull/2205))\n\n\n## 2.39.2\n\n`2022-12-02`\n\n### 🐛 问题修复\n\n- 修复设置 size 时，样式错误的问题 ([#1905](https://github.com/arco-design/arco-design-vue/pull/1905))\n\n\n## 2.35.0\n\n`2022-08-12`\n\n### 🆕 新增功能\n\n- 分割线宽度及样式设置 ([#1473](https://github.com/arco-design/arco-design-vue/pull/1473))\n- 分割线边距设置 ([#1473](https://github.com/arco-design/arco-design-vue/pull/1473))\n\n"
  },
  {
    "path": "packages/web-vue/components/divider/README.en-US.md",
    "content": "\n```yaml\nmeta:\n  type: Component\n  category: Layout\ntitle: Divider\ndescription: Divide the content area and separate the modules.\n```\n\n*Auto translate by google.*\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/with-text.md\n\n@import ./__demo__/vertical.md\n\n## API\n\n\n### `<divider>` Props\n\n|Attribute|Description|Type|Default|version|\n|---|---|---|:---:|:---|\n|direction|The direction of the dividing line. Can be horizontal or vertical|`'horizontal' \\| 'vertical'`|`'horizontal'`||\n|orientation|The position of the dividing line text|`'left' \\| 'center' \\| 'right'`|`'center'`||\n|type|Dividing line style type|`'solid' \\| 'dashed' \\| 'dotted' \\| 'double'`|`-`|2.35.0|\n|size|The wide/height of the dividing line|`number`|`-`|2.35.0|\n|margin|Margin up and down the split line (left and right margin in vertical direction)|`number \\| string`|`-`|2.35.0|\n\n\n"
  },
  {
    "path": "packages/web-vue/components/divider/README.zh-CN.md",
    "content": "\n```yaml\nmeta:\n  type: 组件\n  category: 布局\ntitle: 分割线 Divider\ndescription: 划分内容区域，对模块做分隔。\n```\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/with-text.md\n\n@import ./__demo__/vertical.md\n\n## API\n\n\n### `<divider>` Props\n\n|参数名|描述|类型|默认值|版本|\n|---|---|---|:---:|:---|\n|direction|分割线的方向，是水平还是竖直|`'horizontal' \\| 'vertical'`|`'horizontal'`||\n|orientation|分割线文字的位置|`'left' \\| 'center' \\| 'right'`|`'center'`||\n|type|分割线样式类型|`'solid' \\| 'dashed' \\| 'dotted' \\| 'double'`|`-`|2.35.0|\n|size|分割线宽度/高度|`number`|`-`|2.35.0|\n|margin|分割线上下 margin (垂直方向时为左右 margin)|`number \\| string`|`-`|2.35.0|\n\n\n"
  },
  {
    "path": "packages/web-vue/components/divider/TEMPLATE.md",
    "content": "\n## zh-CN\n```yaml\nmeta:\n  type: 组件\n  category: 布局\ntitle: 分割线 Divider\ndescription: 划分内容区域，对模块做分隔。\n```\n\n---\n## en-US\n```yaml\nmeta:\n  type: Component\n  category: Layout\ntitle: Divider\ndescription: Divide the content area and separate the modules.\n```\n---\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/with-text.md\n\n@import ./__demo__/vertical.md\n\n## API\n\n%%API(divider.tsx)%%\n"
  },
  {
    "path": "packages/web-vue/components/divider/__demo__/basic.md",
    "content": "```yaml\ntitle:\n  zh-CN: 基本用法\n  en-US: Basic Usage\n```\n\n## zh-CN\n\n对不同章节的文本段落进行分割，默认为水平分割线，可在中间加入文字。\n\n---\n\n## en-US\n\nIt divides the text paragraphs of different chapters, the default is a horizontal dividing line, you can add text in the middle.\n\n---\n\n```vue\n<template>\n  <div class=\"divider-demo\">\n    <p>A design is a plan or specification for the construction of an object.</p>\n    <a-divider />\n    <p>A design is a plan or specification for the construction of an object.</p>\n    <a-divider dashed />\n    <p>A design is a plan or specification for the construction of an object.</p>\n    <a-divider :size=\"2\" style=\"border-bottom-style: dotted\" />\n    <p>A design is a plan or specification for the construction of an object.</p>\n  </div>\n  <div class=\"divider-demo\" style=\"marginTop: 48px\">\n    <div class=\"flex-box\">\n      <span class=\"avatar\"><IconImage /></span>\n      <div class=\"content\">\n        <a-typography-title :heading=\"6\">Image</a-typography-title>\n        May 4, 2010\n      </div>\n    </div>\n    <a-divider class=\"half-divider\" />\n    <div class=\"flex-box\">\n      <span class=\"avatar\"><IconUser /></span>\n      <div class=\"content\">\n        <a-typography-title :heading=\"6\">Avatar</a-typography-title>\n        May 4, 2010\n      </div>\n    </div>\n    <a-divider class=\"half-divider\" />\n    <div class=\"flex-box\">\n      <span class=\"avatar\"><IconPen /></span>\n      <div class=\"content\">\n        <a-typography-title :heading=\"6\">Icon</a-typography-title>\n        May 4, 2010\n      </div>\n    </div>\n  </div>\n</template>\n\n<script>\nimport {\n  IconImage,\n  IconUser,\n  IconPen,\n} from '@arco-design/web-vue/es/icon';\n\nexport default {\n  components: {\n    IconImage,\n    IconUser,\n    IconPen,\n  },\n};\n</script>\n\n<style scoped>\n.divider-demo {\n  box-sizing: border-box;\n  width: 560px;\n  padding: 24px;\n  border: 30px solid rgb(var(--gray-2));\n}\n.half-divider {\n  left: 55px;\n  width: calc(100% - 55px);\n  min-width: auto;\n  margin: 16px 0;\n}\n.flex-box {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.flex-box .avatar {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 40px;\n  height: 40px;\n  margin-right: 16px;\n  color: var(--color-text-2);\n  font-size: 16px;\n  background-color: var(--color-fill-3);\n  border-radius: 50%;\n}\n.flex-box .content {\n  flex: 1;\n  color: var(--color-text-2);\n  font-size: 12px;\n  line-height: 20px;\n}\n</style>\n```\n"
  },
  {
    "path": "packages/web-vue/components/divider/__demo__/vertical.md",
    "content": "```yaml\ntitle:\n  zh-CN: 竖直分割线\n  en-US: Vertical Divider\n```\n\n## zh-CN\n\n指定 `direction` 为 `vertical` 即可使用竖直分割线。竖直分割线不能带文字。\n\n---\n\n## en-US\n\nSpecify the `direction` as `vertical` to use the vertical Divider which cannot contain text.\n\n---\n\n```vue\n<template>\n  <div class=\"divider-demo\">\n    <span>Item 1</span>\n    <a-divider direction=\"vertical\" />\n    <span>Item 2</span>\n    <a-divider direction=\"vertical\" />\n    <span>Item 3</span>\n  </div>\n</template>\n\n<style scoped>\n.divider-demo {\n  box-sizing: border-box;\n  width: 560px;\n  padding: 24px;\n  border: 30px solid rgb(var(--gray-2));\n}\n</style>\n```\n"
  },
  {
    "path": "packages/web-vue/components/divider/__demo__/with-text.md",
    "content": "```yaml\ntitle:\n  zh-CN: 带有文字的分割线\n  en-US: With Text\n```\n\n## zh-CN\n\n通过 `orientation` 为分割线添加描述文字。\n\n---\n\n## en-US\n\nUse `orientation` to add descriptive text to Divider.\n\n---\n\n```vue\n<template>\n  <div class=\"divider-demo\">\n    <p>A design is a plan or specification for the construction of an object.</p>\n    <a-divider orientation=\"left\">Text</a-divider>\n    <p>A design is a plan or specification for the construction of an object.</p>\n    <a-divider orientation=\"center\">Text</a-divider>\n    <p>A design is a plan or specification for the construction of an object.</p>\n    <a-divider orientation=\"right\">Text</a-divider>\n    <a-divider :margin=\"10\"><icon-star /></a-divider>\n  </div>\n</template>\n\n<style scoped>\n.divider-demo {\n  box-sizing: border-box;\n  width: 560px;\n  padding: 24px;\n  border: 30px solid rgb(var(--gray-2));\n}\n</style>\n```\n"
  },
  {
    "path": "packages/web-vue/components/divider/__test__/__snapshots__/demo.test.ts.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`<divider> demo: render [basic] correctly 1`] = `\n\"<div class=\\\\\"divider-demo\\\\\">\n  <p>A design is a plan or specification for the construction of an object.</p>\n  <div role=\\\\\"separator\\\\\" class=\\\\\"arco-divider arco-divider-horizontal\\\\\">\n    <!---->\n  </div>\n  <p>A design is a plan or specification for the construction of an object.</p>\n  <div role=\\\\\"separator\\\\\" class=\\\\\"arco-divider arco-divider-horizontal\\\\\" dashed=\\\\\"\\\\\">\n    <!---->\n  </div>\n  <p>A design is a plan or specification for the construction of an object.</p>\n  <div role=\\\\\"separator\\\\\" class=\\\\\"arco-divider arco-divider-horizontal\\\\\" style=\\\\\"border-bottom-width: 2px; border-bottom-style: dotted;\\\\\">\n    <!---->\n  </div>\n  <p>A design is a plan or specification for the construction of an object.</p>\n</div>\n<div class=\\\\\"divider-demo\\\\\" style=\\\\\"margin-top: 48px;\\\\\">\n  <div class=\\\\\"flex-box\\\\\"><span class=\\\\\"avatar\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-image\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"m24 33 9-9v9h-9Zm0 0-3.5-4.5L17 33h7Zm15 8H9a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h30a2 2 0 0 1 2 2v30a2 2 0 0 1-2 2ZM15 15h2v2h-2v-2Z\\\\\"></path><path d=\\\\\"M33 33v-9l-9 9h9ZM23.5 33l-3-4-3 4h6ZM15 15h2v2h-2z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path></svg></span>\n    <div class=\\\\\"content\\\\\">\n      <h6 class=\\\\\"arco-typography\\\\\">Image\n        <!---->\n        <!--v-if-->\n        <!--v-if-->\n        <!--v-if-->\n      </h6> May 4, 2010\n    </div>\n  </div>\n  <div role=\\\\\"separator\\\\\" class=\\\\\"arco-divider arco-divider-horizontal half-divider\\\\\">\n    <!---->\n  </div>\n  <div class=\\\\\"flex-box\\\\\"><span class=\\\\\"avatar\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-user\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M7 37c0-4.97 4.03-8 9-8h16c4.97 0 9 3.03 9 8v3a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1v-3Z\\\\\"></path><circle cx=\\\\\"24\\\\\" cy=\\\\\"15\\\\\" r=\\\\\"8\\\\\"></circle></svg></span>\n    <div class=\\\\\"content\\\\\">\n      <h6 class=\\\\\"arco-typography\\\\\">Avatar\n        <!---->\n        <!--v-if-->\n        <!--v-if-->\n        <!--v-if-->\n      </h6> May 4, 2010\n    </div>\n  </div>\n  <div role=\\\\\"separator\\\\\" class=\\\\\"arco-divider arco-divider-horizontal half-divider\\\\\">\n    <!---->\n  </div>\n  <div class=\\\\\"flex-box\\\\\"><span class=\\\\\"avatar\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-pen\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"m28.364 11.565 7.07 7.071M7.15 32.778 33.313 6.615l7.071 7.071L14.221 39.85h-7.07v-7.07Z\\\\\"></path></svg></span>\n    <div class=\\\\\"content\\\\\">\n      <h6 class=\\\\\"arco-typography\\\\\">Icon\n        <!---->\n        <!--v-if-->\n        <!--v-if-->\n        <!--v-if-->\n      </h6> May 4, 2010\n    </div>\n  </div>\n</div>\"\n`;\n\nexports[`<divider> demo: render [vertical] correctly 1`] = `\n\"<div class=\\\\\"divider-demo\\\\\"><span>Item 1</span>\n  <div role=\\\\\"separator\\\\\" class=\\\\\"arco-divider arco-divider-vertical\\\\\">\n    <!---->\n  </div><span>Item 2</span>\n  <div role=\\\\\"separator\\\\\" class=\\\\\"arco-divider arco-divider-vertical\\\\\">\n    <!---->\n  </div><span>Item 3</span>\n</div>\"\n`;\n\nexports[`<divider> demo: render [with-text] correctly 1`] = `\n\"<div class=\\\\\"divider-demo\\\\\">\n  <p>A design is a plan or specification for the construction of an object.</p>\n  <div role=\\\\\"separator\\\\\" class=\\\\\"arco-divider arco-divider-horizontal arco-divider-with-text\\\\\"><span class=\\\\\"arco-divider-text arco-divider-text-left\\\\\">Text</span></div>\n  <p>A design is a plan or specification for the construction of an object.</p>\n  <div role=\\\\\"separator\\\\\" class=\\\\\"arco-divider arco-divider-horizontal arco-divider-with-text\\\\\"><span class=\\\\\"arco-divider-text arco-divider-text-center\\\\\">Text</span></div>\n  <p>A design is a plan or specification for the construction of an object.</p>\n  <div role=\\\\\"separator\\\\\" class=\\\\\"arco-divider arco-divider-horizontal arco-divider-with-text\\\\\"><span class=\\\\\"arco-divider-text arco-divider-text-right\\\\\">Text</span></div>\n  <div role=\\\\\"separator\\\\\" class=\\\\\"arco-divider arco-divider-horizontal arco-divider-with-text\\\\\" style=\\\\\"margin: 10px 0px;\\\\\"><span class=\\\\\"arco-divider-text arco-divider-text-center\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-star\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M22.552 6.908a.5.5 0 0 1 .896 0l5.02 10.17a.5.5 0 0 0 .376.274l11.224 1.631a.5.5 0 0 1 .277.853l-8.122 7.916a.5.5 0 0 0-.143.443l1.917 11.178a.5.5 0 0 1-.726.527l-10.038-5.278a.5.5 0 0 0-.466 0L12.73 39.9a.5.5 0 0 1-.726-.527l1.918-11.178a.5.5 0 0 0-.144-.443l-8.122-7.916a.5.5 0 0 1 .278-.853l11.223-1.63a.5.5 0 0 0 .376-.274l5.02-10.17Z\\\\\"></path></svg></span></div>\n</div>\"\n`;\n"
  },
  {
    "path": "packages/web-vue/components/divider/__test__/demo.test.ts",
    "content": "import demoTest from '../../../scripts/demo-test';\n\ndemoTest('divider');\n"
  },
  {
    "path": "packages/web-vue/components/divider/__test__/index.test.ts",
    "content": "import { mount } from '@vue/test-utils';\nimport Divider from '../index';\n\ndescribe('Divider', () => {\n  test('Should work on both direction', async () => {\n    const wrapper = mount(Divider, {\n      props: {\n        direction: 'horizontal',\n      },\n    });\n    expect(wrapper.find('.arco-divider-horizontal').exists()).toBe(true);\n    await wrapper.setProps({ direction: 'vertical' });\n    expect(wrapper.find('.arco-divider-vertical').exists()).toBe(true);\n  });\n});\n"
  },
  {
    "path": "packages/web-vue/components/divider/divider.tsx",
    "content": "import { computed, CSSProperties, PropType, defineComponent } from 'vue';\nimport { getPrefixCls } from '../_utils/global-config';\nimport type { Direction } from '../_utils/constant';\nimport { isNumber, isUndefined } from '../_utils/is';\n\nexport default defineComponent({\n  name: 'Divider',\n  props: {\n    /**\n     * @zh 分割线的方向，是水平还是竖直\n     * @en The direction of the dividing line. Can be horizontal or vertical\n     * @values 'horizontal','vertical'\n     */\n    direction: {\n      type: String as PropType<Direction>,\n      default: 'horizontal',\n    },\n    /**\n     * @zh 分割线文字的位置\n     * @en The position of the dividing line text\n     */\n    orientation: {\n      type: String as PropType<'left' | 'center' | 'right'>,\n      default: 'center',\n    },\n    /**\n     * @zh 分割线样式类型\n     * @en Dividing line style type\n     * @version 2.35.0\n     */\n    type: {\n      type: String as PropType<'solid' | 'dashed' | 'dotted' | 'double'>,\n    },\n    /**\n     * @zh 分割线宽度/高度\n     * @en The wide/height of the dividing line\n     * @version 2.35.0\n     */\n    size: {\n      type: Number,\n    },\n    /**\n     * @zh 分割线上下 margin (垂直方向时为左右 margin)\n     * @en Margin up and down the split line (left and right margin in vertical direction)\n     * @version 2.35.0\n     */\n    margin: {\n      type: [Number, String] as PropType<number | string>,\n    },\n  },\n  setup(props, { slots }) {\n    const prefixCls = getPrefixCls('divider');\n    const isHorizontal = computed(() => props.direction === 'horizontal');\n\n    const mergedStyles = computed(() => {\n      const styles: CSSProperties = {};\n      if (props.size) {\n        styles[\n          isHorizontal.value ? 'border-bottom-width' : 'border-left-width'\n        ] = isNumber(props.size) ? `${props.size}px` : props.size;\n      }\n      if (props.type) {\n        styles[\n          isHorizontal.value ? 'border-bottom-style' : 'border-left-style'\n        ] = props.type;\n      }\n      if (!isUndefined(props.margin)) {\n        const margin = isNumber(props.margin)\n          ? `${props.margin}px`\n          : props.margin;\n        styles.margin = isHorizontal.value ? `${margin} 0` : `0 ${margin}`;\n      }\n\n      return styles;\n    });\n\n    return () => {\n      const children = slots.default?.();\n      const classNames = [\n        prefixCls,\n        `${prefixCls}-${props.direction}`,\n        {\n          [`${prefixCls}-with-text`]: children,\n        },\n      ];\n\n      return (\n        <div role=\"separator\" class={classNames} style={mergedStyles.value}>\n          {children && props.direction === 'horizontal' && (\n            <span\n              class={[\n                `${prefixCls}-text`,\n                `${prefixCls}-text-${props.orientation}`,\n              ]}\n            >\n              {children}\n            </span>\n          )}\n        </div>\n      );\n    };\n  },\n});\n"
  },
  {
    "path": "packages/web-vue/components/divider/index.ts",
    "content": "import type { App } from 'vue';\nimport type { ArcoOptions } from '../_utils/types';\nimport { setGlobalConfig, getComponentPrefix } from '../_utils/global-config';\nimport _Divider from './divider';\n\nconst Divider = Object.assign(_Divider, {\n  install: (app: App, options?: ArcoOptions) => {\n    setGlobalConfig(app, options);\n    const componentPrefix = getComponentPrefix(options);\n\n    app.component(componentPrefix + _Divider.name, _Divider);\n  },\n});\n\nexport type DividerInstance = InstanceType<typeof _Divider>;\n\nexport default Divider;\n"
  },
  {
    "path": "packages/web-vue/components/divider/style/index.less",
    "content": "@import './token.less';\n\n@divider-prefix-cls: ~'@{prefix}-divider';\n\n.@{divider-prefix-cls} {\n  &-horizontal {\n    position: relative;\n    clear: both;\n    width: 100%;\n    min-width: 100%;\n    max-width: 100%;\n    margin: @divider-margin-vertical 0;\n    border-bottom: @divider-size @divider-line-style @divider-color-bg;\n\n    &.@{divider-prefix-cls}-with-text {\n      margin: @divider-margin-vertical_text 0;\n    }\n  }\n\n  &-vertical {\n    display: inline-block;\n    min-width: 1px;\n    max-width: 1px;\n    min-height: 1em;\n    margin: 0 @divider-margin-horizontal;\n    vertical-align: middle;\n    border-left: @divider-size @divider-line-style @divider-color-bg;\n  }\n\n  // Only the horizontal dividing line supports text, and only the horizontal situation is considered\n  &-text {\n    position: absolute;\n    top: 50%;\n    box-sizing: border-box;\n    padding: 0 @divider-margin-text;\n    color: @divider-color-text;\n    font-weight: @divider-font-weight;\n    font-size: @divider-font-size;\n    line-height: 2;\n    background: var(~'@{arco-cssvars-prefix}-color-bg-2');\n    transform: translateY(-50%);\n\n    &-center {\n      left: 50%;\n      transform: translate(-50%, -50%);\n    }\n\n    &-left {\n      left: @divider-position-text-left;\n    }\n\n    &-right {\n      right: @divider-position-text-right;\n    }\n  }\n}\n"
  },
  {
    "path": "packages/web-vue/components/divider/style/index.ts",
    "content": "import '../../style/index.less';\nimport './index.less';\n"
  },
  {
    "path": "packages/web-vue/components/divider/style/token.less",
    "content": "@import '../../style/theme/index.less';\n\n@divider-margin-horizontal: @spacing-6;\n@divider-margin-vertical: @spacing-8;\n@divider-margin-vertical_text: @spacing-8;\n@divider-margin-text: @spacing-7;\n@divider-position-text-left: @spacing-9;\n@divider-position-text-right: @spacing-9;\n@divider-font-size: @font-size-body-3;\n@divider-font-weight: @font-weight-500;\n\n@divider-size: 1px;\n@divider-line-style: @border-solid;\n@divider-color-bg: var(~'@{arco-cssvars-prefix}-color-neutral-3');\n@divider-color-text: var(~'@{arco-cssvars-prefix}-color-text-1');\n"
  },
  {
    "path": "packages/web-vue/components/drawer/CHANGELOG.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.57.0\n\n`2025-03-10`\n\n### 🆕 Feature\n\n- Add bodyClass and bodyStyle ([#3437](https://github.com/arco-design/arco-design-vue/pull/3437))\n\n### 💎 Enhancement\n\n- fix re-throw error in onBeforeOk for proper error handling ([#3407](https://github.com/arco-design/arco-design-vue/pull/3407))\n\n\n## 2.45.3\n\n`2023-04-28`\n\n### 💎 Enhancement\n\n- Add onOk & onCancel event parameters ([#2358](https://github.com/arco-design/arco-design-vue/pull/2358))\n\n\n## 2.43.2\n\n`2023-02-24`\n\n### 💎 Enhancement\n\n- add update method of function call ([#2155](https://github.com/arco-design/arco-design-vue/pull/2155))\n\n\n## 2.43.0\n\n`2023-02-10`\n\n### 🆕 Feature\n\n- add `before-open` and `before-close` events ([#2064](https://github.com/arco-design/arco-design-vue/pull/2064))\n\n\n## 2.38.0\n\n`2022-10-28`\n\n### 🐛 BugFix\n\n- Fix the problem that closing does not unload internal components in function calls ([#1778](https://github.com/arco-design/arco-design-vue/pull/1778))\n\n\n## 2.37.4\n\n`2022-09-30`\n\n### 💎 Enhancement\n\n- fix drawer close problem ([#1696](https://github.com/arco-design/arco-design-vue/pull/1696))\n\n\n## 2.36.1\n\n`2022-09-09`\n\n### 💎 Enhancement\n\n- The on-before-ok property supports function returning a Promise ([#1623](https://github.com/arco-design/arco-design-vue/pull/1623))\n\n\n## 2.35.2\n\n`2022-08-29`\n\n\n## 2.34.0\n\n`2022-07-29`\n\n### 🆕 Feature\n\n- add function call ([#1409](https://github.com/arco-design/arco-design-vue/pull/1409))\n\n\n## 2.33.0\n\n`2022-07-08`\n\n### 🆕 Feature\n\n- add header prop and slot ([#1399](https://github.com/arco-design/arco-design-vue/pull/1399))\n\n\n## 2.19.0\n\n`2022-03-11`\n\n### 🆕 Feature\n\n- Added `hide-cancel` attribute ([#803](https://github.com/arco-design/arco-design-vue/pull/803))\n\n\n## 2.15.0\n\n`2022-01-14`\n\n### 🆕 Feature\n\n- Added `escToClose` property and enabled by default ([#577](https://github.com/arco-design/arco-design-vue/pull/577))\n\n\n## 2.14.0\n\n`2022-01-07`\n\n### 🆕 Feature\n\n- Hide the title bar when title and closable are not set ([#515](https://github.com/arco-design/arco-design-vue/pull/515))\n\n\n## 2.12.0\n\n`2021-12-24`\n\n### 🆕 Feature\n\n- Add unmount-on-close attribute ([#449](https://github.com/arco-design/arco-design-vue/pull/449))\n\n\n## 2.11.0\n\n`2021-12-17`\n\n### 🆕 Feature\n\n- add property  `footer` ([#394](https://github.com/arco-design/arco-design-vue/pull/394))\n\n\n## 2.9.0\n\n`2021-12-03`\n\n### 🆕 Feature\n\n- `Drawer` supports okButtonProps & cancelButtonProps ([#325](https://github.com/arco-design/arco-design-vue/pull/325))\n\n\n## 2.8.0\n\n`2021-12-01`\n\n### 🐛 BugFix\n\n- Fix the problem that the drawer is still in the fixed layout when setting the popup-container property ([#297](https://github.com/arco-design/arco-design-vue/pull/297))\n\n\n## 2.7.0\n\n`2021-11-26`\n\n### 🆕 Feature\n\n- Added `on-before-ok` and `on-before-cancel` property events ([#229](https://github.com/arco-design/arco-design-vue/pull/229))\n\n### 🐛 BugFix\n\n- Fix the issue of initial triggering of the `open` event ([#267](https://github.com/arco-design/arco-design-vue/pull/267))\n\n\n## 2.4.0\n\n`2021-11-17`\n\n### 🆕 Feature\n\n- `width` and `height` added support for character types ([#172](https://github.com/arco-design/arco-design-vue/pull/172))\n\n\n## 2.0.3\n\n`2021-10-29`\n\n### 🐛 BugFix\n\n- Fix the problem of the wrong type of the main button ([#30](https://github.com/arco-design/arco-design-vue/pull/30))\n\n"
  },
  {
    "path": "packages/web-vue/components/drawer/CHANGELOG.zh-CN.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.57.0\n\n`2025-03-10`\n\n### 🆕 新增功能\n\n- 增加 bodyClass 和 bodyStyle ([#3437](https://github.com/arco-design/arco-design-vue/pull/3437))\n\n### 💎 功能优化\n\n- 修复执行 onBeforeOk  时错误未传播的问题 ([#3407](https://github.com/arco-design/arco-design-vue/pull/3407))\n\n\n## 2.45.3\n\n`2023-04-28`\n\n### 💎 功能优化\n\n- 添加 onOk & onCancel 的事件参数 ([#2358](https://github.com/arco-design/arco-design-vue/pull/2358))\n\n\n## 2.43.2\n\n`2023-02-24`\n\n### 💎 功能优化\n\n- 添加函数调用的更新方法 ([#2155](https://github.com/arco-design/arco-design-vue/pull/2155))\n\n\n## 2.43.0\n\n`2023-02-10`\n\n### 🆕 新增功能\n\n- 添加 `before-open` 和 `before-close` 事件 ([#2064](https://github.com/arco-design/arco-design-vue/pull/2064))\n\n\n## 2.38.0\n\n`2022-10-28`\n\n### 🐛 问题修复\n\n- 修复函数式调用中关闭未卸载内部组件的问题 ([#1778](https://github.com/arco-design/arco-design-vue/pull/1778))\n\n\n## 2.37.4\n\n`2022-09-30`\n\n### 💎 功能优化\n\n- 修复抽屉关闭的问题 ([#1696](https://github.com/arco-design/arco-design-vue/pull/1696))\n\n\n## 2.36.1\n\n`2022-09-09`\n\n### 💎 功能优化\n\n- on-before-ok 属性支持函数返回 Promise ([#1623](https://github.com/arco-design/arco-design-vue/pull/1623))\n\n\n## 2.35.2\n\n`2022-08-29`\n\n\n## 2.34.0\n\n`2022-07-29`\n\n### 🆕 新增功能\n\n- 添加函数调用 ([#1409](https://github.com/arco-design/arco-design-vue/pull/1409))\n\n\n## 2.33.0\n\n`2022-07-08`\n\n### 🆕 新增功能\n\n- 添加 header 属性和插槽 ([#1399](https://github.com/arco-design/arco-design-vue/pull/1399))\n\n\n## 2.19.0\n\n`2022-03-11`\n\n### 🆕 新增功能\n\n- 增加 `hide-cancel` 属性 ([#803](https://github.com/arco-design/arco-design-vue/pull/803))\n\n\n## 2.15.0\n\n`2022-01-14`\n\n### 🆕 新增功能\n\n- 增加 `escToClose` 属性并默认开启 ([#577](https://github.com/arco-design/arco-design-vue/pull/577))\n\n\n## 2.14.0\n\n`2022-01-07`\n\n### 🆕 新增功能\n\n- 当没有设置 title 和 closable 时，隐藏标题栏 ([#515](https://github.com/arco-design/arco-design-vue/pull/515))\n\n\n## 2.12.0\n\n`2021-12-24`\n\n### 🆕 新增功能\n\n- 增加 unmount-on-close 属性 ([#449](https://github.com/arco-design/arco-design-vue/pull/449))\n\n\n## 2.11.0\n\n`2021-12-17`\n\n### 🆕 新增功能\n\n- 新增属性 `footer` ([#394](https://github.com/arco-design/arco-design-vue/pull/394))\n\n\n## 2.9.0\n\n`2021-12-03`\n\n### 🆕 新增功能\n\n- `Drawer` 支持 `okButtonProps` 和  `cancelButtonProps` 属性 ([#325](https://github.com/arco-design/arco-design-vue/pull/325))\n\n\n## 2.8.0\n\n`2021-12-01`\n\n### 🐛 问题修复\n\n- 修复设置 `popup-container` 属性时，抽屉仍然是 `fixed` 布局的问题 ([#297](https://github.com/arco-design/arco-design-vue/pull/297))\n\n\n## 2.7.0\n\n`2021-11-26`\n\n### 🆕 新增功能\n\n- 增加 `on-before-ok` 和 `on-before-cancel` 属性事件 ([#229](https://github.com/arco-design/arco-design-vue/pull/229))\n\n### 🐛 问题修复\n\n- 修复初始触发 `open` 事件的问题 ([#267](https://github.com/arco-design/arco-design-vue/pull/267))\n\n\n## 2.4.0\n\n`2021-11-17`\n\n### 🆕 新增功能\n\n- `width` 和 `height` 增加支持字符类型 ([#172](https://github.com/arco-design/arco-design-vue/pull/172))\n\n\n## 2.0.3\n\n`2021-10-29`\n\n### 🐛 问题修复\n\n- 修复主按钮类型错误的问题 ([#30](https://github.com/arco-design/arco-design-vue/pull/30))\n\n"
  },
  {
    "path": "packages/web-vue/components/drawer/README.en-US.md",
    "content": "```yaml\nmeta:\n  type: Component\n  category: Feedback\ntitle: Drawer\ndescription: A drawer-like panel that slides out from the side of the screen after the command is triggered.\n```\n\n*Auto translate by google.*\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/position.md\n\n@import ./__demo__/custom.md\n\n@import ./__demo__/nested.md\n\n@import ./__demo__/popup-container.md\n\n@import ./__demo__/function.md\n\n## API\n\n\n### `<drawer>` Props\n\n|Attribute|Description|Type|Default|version|\n|---|---|---|:---:|:---|\n|visible **(v-model)**|Whether the drawer is visible|`boolean`|`false`||\n|default-visible|Whether the drawer is visible by default (uncontrolled mode)|`boolean`|`false`||\n|placement|Where the drawer is placed|`'top' \\| 'right' \\| 'bottom' \\| 'left'`|`'right'`||\n|title|Title|`string`|`-`||\n|mask|Whether to show the mask|`boolean`|`true`||\n|mask-closable|Click on the mask layer to be able to close|`boolean`|`true`||\n|closable|Whether to show the close button|`boolean`|`true`||\n|ok-text|The content of the ok button|`string`|`-`||\n|cancel-text|The content of the cancel button|`string`|`-`||\n|ok-loading|Whether the ok button is in the loading state|`boolean`|`false`||\n|ok-button-props|Props of confirm button|`ButtonProps`|`-`|2.9.0|\n|cancel-button-props|Props of cancel button|`ButtonProps`|`-`|2.9.0|\n|unmount-on-close|Whether to uninstall the node when close|`boolean`|`false`|2.12.0|\n|width|The width of the drawer (only available when placement is right, left)|`number\\|string`|`250`||\n|height|The height of the drawer (only available when placement is top, bottom)|`number\\|string`|`250`||\n|popup-container|Mount container for popup|`string \\| HTMLElement`|`'body'`||\n|drawer-style|Drawer style|`CSSProperties`|`-`||\n|body-class|The classname of the drawer body|`string \\| any[]`|`-`|2.57.0|\n|body-style|Drawer body style|`StyleValue`|`-`|2.57.0|\n|on-before-ok|The callback function before the ok event is triggered. If false is returned, subsequent events will not be triggered, and done can also be used to close asynchronously.|`(  done: (closed: boolean) => void) => void \\| boolean \\| Promise<void \\| boolean>`|`-`||\n|on-before-cancel|The callback function before the cancel event is triggered. If it returns false, no subsequent events will be triggered.|`() => boolean`|`-`||\n|esc-to-close|Whether to support the ESC key to close the dialog|`boolean`|`true`|2.15.0|\n|render-to-body|Whether the drawer is mounted under the `body` element|`boolean`|`true`||\n|header|Whether to display high-quality content|`boolean`|`true`|2.33.0|\n|footer|Whether to display the bottom content|`boolean`|`true`|2.11.0|\n|hide-cancel|Whether to hide the cancel button|`boolean`|`false`|2.19.0|\n### `<drawer>` Events\n\n|Event Name|Description|Parameters|version|\n|---|---|---|:---|\n|ok|Triggered when the OK button is clicked|ev: `MouseEvent`||\n|cancel|Triggered when the cancel or close button is clicked|ev: `MouseEvent \\| KeyboardEvent`||\n|open|Triggered after the drawer is opened (the animation ends)|-||\n|close|Triggered when the drawer is closed (the animation ends)|-||\n|before-open|Triggered before drawer is opened|-|2.43.0|\n|before-close|Triggered before drawer is closed|-|2.43.0|\n### `<drawer>` Slots\n\n|Slot Name|Description|Parameters|version|\n|---|---|---|:---|\n|header|Header|-|2.33.0|\n|title|Title|-||\n|footer|Footer|-||\n\n\n\n### `<drawer>` Global methods\n\nThe global methods provided by Drawer can be used in the following three ways:\n\n1. Called by `this.$drawer`\n2. In the Composition API, call through `getCurrentInstance().appContext.config.globalProperties.$drawer`\n3. Import Drawer, call through Drawer itself\n\nWhen used by import, the component has no way to obtain the current Vue Context. Content injected into the AppContext such as i18n or route cannot be used internally. You need to manually pass in the AppContext when calling, or specify the AppContext globally for the component.\n\n```ts\nimport { createApp } from 'vue'\nimport { Drawer } from '@arco-design/web-vue';\n\nconst app = createApp(App);\nDrawer._context = app._context;\n````\n\n\n### DrawerConfig\n\n|Name|Description|Type|Default|version|\n|---|---|---|:---:|:---|\n|placement|Where the drawer is placed|`'top' \\| 'right' \\| 'bottom' \\| 'left'`|`'right'`||\n|title|Title|`RenderContent`|`-`||\n|content|Content|`RenderContent`|`-`||\n|mask|Whether to show the mask|`boolean`|`true`||\n|maskClosable|Click on the mask layer to be able to close|`boolean`|`true`||\n|closable|Whether to show the close button|`boolean`|`true`||\n|okText|The content of the ok button|`string`|`-`||\n|cancelText|The content of the cancel button|`string`|`-`||\n|okLoading|Whether the ok button is in the loading state|`boolean`|`false`||\n|okButtonProps|Props of confirm button|`ButtonProps`|`-`|2.9.0|\n|cancelButtonProps|Props of cancel button|`ButtonProps`|`-`|2.9.0|\n|width|The width of the drawer (only available when placement is right, left)|`number \\| string`|`250`||\n|height|The height of the drawer (only available when placement is top, bottom)|`number \\| string`|`250`||\n|popupContainer|Mount container for popup|`string \\| HTMLElement`|`'body'`||\n|drawerStyle|Drawer style|`CSSProperties`|`-`||\n|onOk|Triggered when the OK button is clicked|`(e?: Event) => void`|`-`||\n|onCancel|Triggered when the cancel or close button is clicked|`(e?: Event) => void`|`-`||\n|onBeforeOk|The callback function before the ok event is triggered. If false is returned, subsequent events will not be triggered, and done can also be used to close asynchronously.|`(    done: (closed: boolean) => void  ) => void \\| boolean \\| Promise<void \\| boolean>`|`-`||\n|onBeforeCancel|The callback function before the cancel event is triggered. If it returns false, no subsequent events will be triggered.|`() => boolean`|`-`||\n|onOpen|Triggered after the drawer is opened (the animation ends)|`() => void`|`-`||\n|onClose|Triggered when the drawer is closed (the animation ends)|`() => void`|`-`||\n|onBeforeOpen|Triggered before drawer is opened|`() => void`|`-`|2.43.0|\n|onBeforeClose|Triggered before drawer is closed|`() => void`|`-`|2.43.0|\n|escToClose|Whether to support the ESC key to close the drawer|`boolean`|`true`|2.15.0|\n|header|Whether to display high-quality content|`boolean \\| RenderContent`|`true`|2.33.0|\n|footer|Whether to display the bottom content|`boolean \\| RenderContent`|`true`|2.11.0|\n|hideCancel|Whether to hide the cancel button|`boolean`|`false`|2.19.0|\n\n\n\n### DrawerReturn\n\n|Name|Description|Type|Default|version|\n|---|---|---|:---:|:---|\n|close|Close Drawer|`() => void`|`-`||\n|update|Update Drawer|`(config: DrawerUpdateConfig) => void`|`-`|2.43.2|\n\n\n\n### DrawerMethod\n\n|Name|Description|Type|Default|\n|---|---|---|:---:|\n|open|Open drawer|`(config: DrawerConfig, appContext?: AppContext) => DrawerReturn`|`-`|\n\n\n"
  },
  {
    "path": "packages/web-vue/components/drawer/README.zh-CN.md",
    "content": "```yaml\nmeta:\n  type: 组件\n  category: 反馈\ntitle: 抽屉 Drawer\ndescription: 触发命令后，从屏幕一侧滑出的抽屉式的面板。\n```\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/position.md\n\n@import ./__demo__/custom.md\n\n@import ./__demo__/nested.md\n\n@import ./__demo__/popup-container.md\n\n@import ./__demo__/function.md\n\n## API\n\n\n### `<drawer>` Props\n\n|参数名|描述|类型|默认值|版本|\n|---|---|---|:---:|:---|\n|visible **(v-model)**|抽屉是否可见|`boolean`|`false`||\n|default-visible|抽屉默认是否可见（非受控模式）|`boolean`|`false`||\n|placement|抽屉放置的位置|`'top' \\| 'right' \\| 'bottom' \\| 'left'`|`'right'`||\n|title|标题|`string`|`-`||\n|mask|是否显示遮罩层|`boolean`|`true`||\n|mask-closable|点击遮罩层是否可以关闭|`boolean`|`true`||\n|closable|是否展示关闭按钮|`boolean`|`true`||\n|ok-text|确认按钮的内容|`string`|`-`||\n|cancel-text|取消按钮的内容|`string`|`-`||\n|ok-loading|确认按钮是否为加载中状态|`boolean`|`false`||\n|ok-button-props|确认按钮的Props|`ButtonProps`|`-`|2.9.0|\n|cancel-button-props|取消按钮的Props|`ButtonProps`|`-`|2.9.0|\n|unmount-on-close|关闭时是否卸载节点|`boolean`|`false`|2.12.0|\n|width|抽屉的宽度（仅在placement为right,left时可用）|`number\\|string`|`250`||\n|height|抽屉的高度（仅在placement为top,bottom时可用）|`number\\|string`|`250`||\n|popup-container|弹出框的挂载容器|`string \\| HTMLElement`|`'body'`||\n|drawer-style|抽屉的样式|`CSSProperties`|`-`||\n|body-class|抽屉内容部分的类名|`string \\| any[]`|`-`|2.57.0|\n|body-style|抽屉内容部分的样式|`StyleValue`|`-`|2.57.0|\n|on-before-ok|触发 ok 事件前的回调函数。如果返回 false 则不会触发后续事件，也可使用 done 进行异步关闭。|`(  done: (closed: boolean) => void) => void \\| boolean \\| Promise<void \\| boolean>`|`-`||\n|on-before-cancel|触发 cancel 事件前的回调函数。如果返回 false 则不会触发后续事件。|`() => boolean`|`-`||\n|esc-to-close|是否支持 ESC 键关闭抽屉|`boolean`|`true`|2.15.0|\n|render-to-body|抽屉是否挂载在 `body` 元素下|`boolean`|`true`||\n|header|是否展示头部内容|`boolean`|`true`|2.33.0|\n|footer|是否展示底部内容|`boolean`|`true`|2.11.0|\n|hide-cancel|是否隐藏取消按钮|`boolean`|`false`|2.19.0|\n### `<drawer>` Events\n\n|事件名|描述|参数|版本|\n|---|---|---|:---|\n|ok|点击确定按钮时触发|ev: `MouseEvent`||\n|cancel|点击取消、关闭按钮时触发|ev: `MouseEvent \\| KeyboardEvent`||\n|open|抽屉打开后（动画结束）触发|-||\n|close|抽屉关闭后（动画结束）触发|-||\n|before-open|对话框打开前触发|-|2.43.0|\n|before-close|对话框关闭前触发|-|2.43.0|\n### `<drawer>` Slots\n\n|插槽名|描述|参数|版本|\n|---|:---:|---|:---|\n|header|页眉|-|2.33.0|\n|title|标题|-||\n|footer|页脚|-||\n\n\n\n### `<drawer>` 全局方法\n\nDrawer 提供的全局方法，可以通过以下三种方法使用：\n\n1. 通过 `this.$drawer` 调用\n2. 在 Composition API 中，通过 `getCurrentInstance().appContext.config.globalProperties.$drawer` 调用\n3. 导入 Drawer，通过 Drawer 本身调用\n\n当通过 import 方式使用时，组件没有办法获取当前的 Vue Context，如 i18n 或 route 等注入在 AppContext 上的内容无法在内部使用，需要在调用时手动传入 AppContext，或者为组件全局指定 AppContext\n\n```ts\nimport { createApp } from 'vue'\nimport { Drawer } from '@arco-design/web-vue';\n\nconst app = createApp(App);\nDrawer._context = app._context;\n```\n\n\n### DrawerConfig\n\n|参数名|描述|类型|默认值|版本|\n|---|---|---|:---:|:---|\n|placement|抽屉放置的位置|`'top' \\| 'right' \\| 'bottom' \\| 'left'`|`'right'`||\n|title|标题|`RenderContent`|`-`||\n|content|内容|`RenderContent`|`-`||\n|mask|是否显示遮罩层|`boolean`|`true`||\n|maskClosable|点击遮罩层是否可以关闭|`boolean`|`true`||\n|closable|是否展示关闭按钮|`boolean`|`true`||\n|okText|确认按钮的内容|`string`|`-`||\n|cancelText|取消按钮的内容|`string`|`-`||\n|okLoading|确认按钮是否为加载中状态|`boolean`|`false`||\n|okButtonProps|确认按钮的Props|`ButtonProps`|`-`|2.9.0|\n|cancelButtonProps|取消按钮的Props|`ButtonProps`|`-`|2.9.0|\n|width|抽屉的宽度（仅在placement为right,left时可用）|`number \\| string`|`250`||\n|height|抽屉的高度（仅在placement为top,bottom时可用）|`number \\| string`|`250`||\n|popupContainer|弹出框的挂载容器|`string \\| HTMLElement`|`'body'`||\n|drawerStyle|抽屉的样式|`CSSProperties`|`-`||\n|onOk|点击确定按钮时触发|`(e?: Event) => void`|`-`||\n|onCancel|点击取消、关闭按钮时触发|`(e?: Event) => void`|`-`||\n|onBeforeOk|触发 ok 事件前的回调函数。如果返回 false 则不会触发后续事件，也可使用 done 进行异步关闭。|`(    done: (closed: boolean) => void  ) => void \\| boolean \\| Promise<void \\| boolean>`|`-`||\n|onBeforeCancel|触发 cancel 事件前的回调函数。如果返回 false 则不会触发后续事件。|`() => boolean`|`-`||\n|onOpen|抽屉打开后（动画结束）触发|`() => void`|`-`||\n|onClose|抽屉关闭后（动画结束）触发|`() => void`|`-`||\n|onBeforeOpen|抽屉打开前触发|`() => void`|`-`|2.43.0|\n|onBeforeClose|抽屉关闭前触发|`() => void`|`-`|2.43.0|\n|escToClose|是否支持 ESC 键关闭抽屉|`boolean`|`true`|2.15.0|\n|header|是否展示头部内容|`boolean \\| RenderContent`|`true`|2.33.0|\n|footer|是否展示底部内容|`boolean \\| RenderContent`|`true`|2.11.0|\n|hideCancel|是否隐藏取消按钮|`boolean`|`false`|2.19.0|\n\n\n\n### DrawerReturn\n\n|参数名|描述|类型|默认值|版本|\n|---|---|---|:---:|:---|\n|close|关闭抽屉|`() => void`|`-`||\n|update|更新抽屉|`(config: DrawerUpdateConfig) => void`|`-`|2.43.2|\n\n\n\n### DrawerMethod\n\n|参数名|描述|类型|默认值|\n|---|---|---|:---:|\n|open|打开抽屉|`(config: DrawerConfig, appContext?: AppContext) => DrawerReturn`|`-`|\n\n\n"
  },
  {
    "path": "packages/web-vue/components/drawer/TEMPLATE.md",
    "content": "## zh-CN\n```yaml\nmeta:\n  type: 组件\n  category: 反馈\ntitle: 抽屉 Drawer\ndescription: 触发命令后，从屏幕一侧滑出的抽屉式的面板。\n```\n---\n## en-US\n```yaml\nmeta:\n  type: Component\n  category: Feedback\ntitle: Drawer\ndescription: A drawer-like panel that slides out from the side of the screen after the command is triggered.\n```\n---\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/position.md\n\n@import ./__demo__/custom.md\n\n@import ./__demo__/nested.md\n\n@import ./__demo__/popup-container.md\n\n@import ./__demo__/function.md\n\n## API\n\n%%API(drawer.vue)%%\n\n## zh-CN\n### `<drawer>` 全局方法\n\nDrawer 提供的全局方法，可以通过以下三种方法使用：\n\n1. 通过 `this.$drawer` 调用\n2. 在 Composition API 中，通过 `getCurrentInstance().appContext.config.globalProperties.$drawer` 调用\n3. 导入 Drawer，通过 Drawer 本身调用\n\n当通过 import 方式使用时，组件没有办法获取当前的 Vue Context，如 i18n 或 route 等注入在 AppContext 上的内容无法在内部使用，需要在调用时手动传入 AppContext，或者为组件全局指定 AppContext\n\n```ts\nimport { createApp } from 'vue'\nimport { Drawer } from '@arco-design/web-vue';\n\nconst app = createApp(App);\nDrawer._context = app._context;\n```\n\n---\n## en-US\n### `<drawer>` Global methods\n\nThe global methods provided by Drawer can be used in the following three ways:\n\n1. Called by `this.$drawer`\n2. In the Composition API, call through `getCurrentInstance().appContext.config.globalProperties.$drawer`\n3. Import Drawer, call through Drawer itself\n\nWhen used by import, the component has no way to obtain the current Vue Context. Content injected into the AppContext such as i18n or route cannot be used internally. You need to manually pass in the AppContext when calling, or specify the AppContext globally for the component.\n\n```ts\nimport { createApp } from 'vue'\nimport { Drawer } from '@arco-design/web-vue';\n\nconst app = createApp(App);\nDrawer._context = app._context;\n````\n\n---\n\n%%INTERFACE(interface.ts)%%\n"
  },
  {
    "path": "packages/web-vue/components/drawer/__demo__/async.md",
    "content": "```yaml\ntitle:\n  zh-CN: 异步关闭\n  en-US: Async Close\n```\n\n## zh-CN\n\n$END$\n\n---\n\n## en-US\n\n$END$\n\n---\n\n```vue\n<template>\n  <a-button @click=\"handleClick\">Open Drawer</a-button>\n  <a-drawer v-model:visible=\"visible\" @before-ok=\"handleBeforeOk\" @cancel=\"handleCancel\" unmountOnClose>\n    <template #title>\n      Title\n    </template>\n    <div>You can customize modal body text by the current situation. This modal will be closed immediately once you press the OK button.</div>\n  </a-drawer>\n</template>\n\n<script setup>\nimport { ref } from 'vue';\n\nconst visible = ref(false)\n\nconst handleClick = () => {\n  visible.value = true;\n}\n\nconst handleBeforeOk = (done) => {\n  window.setTimeout(() => {\n    done()\n  }, 3000)\n}\n\nconst handleCancel = () => {\n  visible.value = false;\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/drawer/__demo__/basic.md",
    "content": "```yaml\ntitle:\n  zh-CN: 基本用法\n  en-US: Basic Usage\n```\n\n## zh-CN\n\n点击触发按钮抽屉从右侧滑出，点击遮罩区关闭。\n\n---\n\n## en-US\n\nClick the trigger button to slide out the drawer from the right, click the mask area to close.\n\n---\n\n```vue\n<template>\n  <a-button type=\"primary\" @click=\"handleClick\">Open Drawer</a-button>\n  <a-drawer :width=\"340\" :visible=\"visible\" @ok=\"handleOk\" @cancel=\"handleCancel\" unmountOnClose>\n    <template #title>\n      Title\n    </template>\n    <div>You can customize modal body text by the current situation. This modal will be closed immediately once you\n      press the OK button.\n    </div>\n  </a-drawer>\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n  setup() {\n    const visible = ref(false);\n\n    const handleClick = () => {\n      visible.value = true;\n    };\n    const handleOk = () => {\n      visible.value = false;\n    };\n    const handleCancel = () => {\n      visible.value = false;\n    }\n\n    return {\n      visible,\n      handleClick,\n      handleOk,\n      handleCancel\n    }\n  },\n};\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/drawer/__demo__/custom.md",
    "content": "```yaml\ntitle:\n  zh-CN: 自定义节点\n  en-US: Custom node\n```\n\n## zh-CN\n\n通过插槽自定义内容，或者设置相应属性来控制显示或隐藏。\n\n---\n\n## en-US\n\nCustomize the content by slot, or set the appropriate properties to control whether it is shown or hidden.\n\n---\n\n```vue\n<template>\n  <a-checkbox-group v-model=\"custom\" :options=\"['hide header', 'hide footer', 'hide cancel']\"/>\n  <div :style=\"{marginTop: '20px'}\">\n    <a-button type=\"primary\" @click=\"handleClick\">Open Drawer</a-button>\n  </div>\n  <a-drawer\n    :width=\"340\"\n    :header=\"!custom.includes('hide header')\"\n    :footer=\"!custom.includes('hide footer')\"\n    :hide-cancel=\"custom.includes('hide cancel')\"\n    :visible=\"visible\"\n    @ok=\"handleOk\"\n    @cancel=\"handleCancel\"\n    unmountOnClose\n  >\n    <template #header>\n      <span>Header and title</span>\n    </template>\n    <div>\n      You can customize modal body text by the current situation. This modal will be closed immediately once you\n      press the OK button.\n    </div>\n  </a-drawer>\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n  setup() {\n    const visible = ref(false);\n    const custom = ref([])\n\n    const handleClick = () => {\n      visible.value = true;\n    };\n    const handleOk = () => {\n      visible.value = false;\n    };\n    const handleCancel = () => {\n      visible.value = false;\n    }\n\n    return {\n      custom,\n      visible,\n      handleClick,\n      handleOk,\n      handleCancel\n    }\n  },\n};\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/drawer/__demo__/function.md",
    "content": "```yaml\ntitle:\n  zh-CN: 函数调用\n  en-US: Call By Function\n```\n\n## zh-CN\n\n通过函数的方式使用抽屉。\n\n---\n\n## en-US\n\nUse the drawer by function.\n\n---\n\n```vue\n<template>\n  <a-button type=\"primary\" @click=\"handleClick\">Open Drawer</a-button>\n</template>\n\n<script>\nimport { Drawer } from '@arco-design/web-vue';\n\nexport default {\n  setup() {\n    const handleClick = () => {\n      Drawer.open({\n        title: 'Info Title',\n        content: 'This is an info message',\n        width: 340\n      });\n    };\n\n    return {\n      handleClick,\n    }\n  },\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/drawer/__demo__/nested.md",
    "content": "```yaml\ntitle:\n  zh-CN: 嵌套抽屉\n  en-US: Nested\n```\n\n## zh-CN\n\n在抽屉内打开新的抽屉。\n\n---\n\n## en-US\n\nOpen a new drawer in the drawer.\n\n---\n\n```vue\n<template>\n  <a-button type=\"primary\" @click=\"handleClick\">Open Drawer</a-button>\n  <a-drawer :visible=\"visible\" :width=\"500\" @ok=\"handleOk\" @cancel=\"handleCancel\" unmountOnClose>\n    <template #title>\n      Title\n    </template>\n    <div :style=\"{marginBottom: '20px'}\">You can customize modal body text by the current situation. This modal will be closed immediately once you press the OK button.</div>\n    <a-button type=\"primary\" @click=\"handleNestedClick\">Open Nested Drawer</a-button>\n  </a-drawer>\n  <a-drawer :visible=\"nestedVisible\" @ok=\"handleNestedOk\" @cancel=\"handleNestedCancel\" unmountOnClose>\n    <template #title>\n      Title\n    </template>\n    <div>You can customize modal body text by the current situation. This modal will be closed immediately once you press the OK button.</div>\n  </a-drawer>\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n  setup() {\n    const visible = ref(false);\n    const nestedVisible = ref(false);\n\n    const handleClick = () => {\n      visible.value = true;\n    };\n    const handleOk = () => {\n      visible.value = false;\n    };\n    const handleCancel = () => {\n      visible.value = false;\n    }\n    const handleNestedClick = () => {\n      nestedVisible.value = true;\n    };\n    const handleNestedOk = () => {\n      nestedVisible.value = false;\n    };\n    const handleNestedCancel = () => {\n      nestedVisible.value = false;\n    }\n\n    return {\n      visible,\n      nestedVisible,\n      handleClick,\n      handleOk,\n      handleCancel,\n      handleNestedClick,\n      handleNestedOk,\n      handleNestedCancel\n    }\n  },\n};\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/drawer/__demo__/popup-container.md",
    "content": "```yaml\ntitle:\n  zh-CN: 挂载位置\n  en-US: popup container\n```\n\n## zh-CN\n\n通过 `popup-container` 可以设置弹出层节点的挂载位置\n\n---\n\n## en-US\n\nYou can use 'popup-container' to set the mount position of the pop-up layer node\n\n---\n\n```vue\n<template>\n  <div>\n    <div\n      id=\"parentNode\"\n      style=\"width: 100%; height: 300px; background-color: var(--color-fill-2); position: relative; overflow: hidden; line-height: 300px; text-align: center;\"\n    >\n      <a-button type=\"primary\" @click=\"handleClick\">Open Drawer</a-button>\n    </div>\n  </div>\n  <a-drawer\n    popup-container=\"#parentNode\"\n    :visible=\"visible\"\n    @ok=\"handleOk\"\n    @cancel=\"handleCancel\"\n  >\n    <template #title> Title </template>\n    <div\n      >You can customize modal body text by the current situation. This modal\n      will be closed immediately once you press the OK button.</div\n    >\n  </a-drawer>\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n  setup() {\n    const visible = ref(false);\n\n    const handleClick = () => {\n      visible.value = true;\n    };\n    const handleOk = () => {\n      visible.value = false;\n    };\n    const handleCancel = () => {\n      visible.value = false;\n    }\n\n    return {\n      visible,\n      handleClick,\n      handleOk,\n      handleCancel\n    }\n  },\n};\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/drawer/__demo__/position.md",
    "content": "```yaml\ntitle:\n  zh-CN: 抽屉位置\n  en-US: Position\n```\n\n## zh-CN\n\n自定义位置，点击触发按钮抽屉从相应的位置滑出。\n\n---\n\n## en-US\n\nCustomize the position and click the trigger button to slide out the drawer from the corresponding position.\n\n---\n\n```vue\n<template>\n  <a-radio-group v-model=\"position\">\n    <a-radio value=\"top\">Top</a-radio>\n    <a-radio value=\"right\">Right</a-radio>\n    <a-radio value=\"bottom\">Bottom</a-radio>\n    <a-radio value=\"left\">Left</a-radio>\n  </a-radio-group>\n  <div :style=\"{marginTop: '20px'}\">\n    <a-button type=\"primary\" @click=\"handleClick\">Open Drawer</a-button>\n  </div>\n  <a-drawer\n    :width=\"340\"\n    :height=\"340\"\n    :visible=\"visible\"\n    :placement=\"position\"\n    @ok=\"handleOk\"\n    @cancel=\"handleCancel\"\n    unmountOnClose\n  >\n    <template #title>\n      Title\n    </template>\n    <div>You can customize modal body text by the current situation. This modal will be closed immediately once you press the OK button.</div>\n  </a-drawer>\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n  setup() {\n    const visible = ref(false);\n    const position = ref('right');\n\n    const handleClick = () => {\n      visible.value = true;\n    };\n    const handleOk = () => {\n      visible.value = false;\n    };\n    const handleCancel = () => {\n      visible.value = false;\n    }\n\n    return {\n      visible,\n      position,\n      handleClick,\n      handleOk,\n      handleCancel\n    }\n  },\n};\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/drawer/__test__/__snapshots__/demo.test.ts.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`<drawer> demo: render [async] correctly 1`] = `\n\"<button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n  <!--v-if-->Open Drawer\n</button>\"\n`;\n\nexports[`<drawer> demo: render [basic] correctly 1`] = `\n\"<button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n  <!--v-if-->Open Drawer\n</button>\"\n`;\n\nexports[`<drawer> demo: render [custom] correctly 1`] = `\n\"<span class=\\\\\"arco-checkbox-group arco-checkbox-group-direction-horizontal\\\\\"><label aria-disabled=\\\\\"false\\\\\" class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"hide header\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span><span class=\\\\\"arco-checkbox-label\\\\\">hide header</span></label><label aria-disabled=\\\\\"false\\\\\" class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"hide footer\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span><span class=\\\\\"arco-checkbox-label\\\\\">hide footer</span></label><label aria-disabled=\\\\\"false\\\\\" class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"hide cancel\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span><span class=\\\\\"arco-checkbox-label\\\\\">hide cancel</span></label></span>\n<div style=\\\\\"margin-top: 20px;\\\\\"><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n    <!--v-if-->Open Drawer\n  </button></div>\"\n`;\n\nexports[`<drawer> demo: render [function] correctly 1`] = `\n\"<button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n  <!--v-if-->Open Drawer\n</button>\"\n`;\n\nexports[`<drawer> demo: render [nested] correctly 1`] = `\n\"<button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n  <!--v-if-->Open Drawer\n</button>\"\n`;\n\nexports[`<drawer> demo: render [popup-container] correctly 1`] = `\n\"<div>\n  <div id=\\\\\"parentNode\\\\\" style=\\\\\"width: 100%; height: 300px; position: relative; overflow: hidden; line-height: 300px; text-align: center;\\\\\"><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n      <!--v-if-->Open Drawer\n    </button></div>\n</div>\"\n`;\n\nexports[`<drawer> demo: render [position] correctly 1`] = `\n\"<span class=\\\\\"arco-radio-group arco-radio-group-size-medium arco-radio-group-direction-horizontal\\\\\"><label class=\\\\\"arco-radio\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"top\\\\\"><span class=\\\\\"arco-icon-hover arco-radio-icon-hover\\\\\"><span class=\\\\\"arco-radio-icon\\\\\"></span></span><span class=\\\\\"arco-radio-label\\\\\">Top</span></label><label class=\\\\\"arco-radio arco-radio-checked\\\\\"><input type=\\\\\"radio\\\\\" checked=\\\\\"\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"right\\\\\"><span class=\\\\\"arco-icon-hover arco-icon-hover-disabled arco-radio-icon-hover\\\\\"><span class=\\\\\"arco-radio-icon\\\\\"></span></span><span class=\\\\\"arco-radio-label\\\\\">Right</span></label><label class=\\\\\"arco-radio\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"bottom\\\\\"><span class=\\\\\"arco-icon-hover arco-radio-icon-hover\\\\\"><span class=\\\\\"arco-radio-icon\\\\\"></span></span><span class=\\\\\"arco-radio-label\\\\\">Bottom</span></label><label class=\\\\\"arco-radio\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"left\\\\\"><span class=\\\\\"arco-icon-hover arco-radio-icon-hover\\\\\"><span class=\\\\\"arco-radio-icon\\\\\"></span></span><span class=\\\\\"arco-radio-label\\\\\">Left</span></label></span>\n<div style=\\\\\"margin-top: 20px;\\\\\"><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n    <!--v-if-->Open Drawer\n  </button></div>\"\n`;\n"
  },
  {
    "path": "packages/web-vue/components/drawer/__test__/__snapshots__/index.test.ts.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Drawer should render Drawer 1`] = `\n\"<!--teleport start-->\n<div class=\\\\\"arco-drawer-container\\\\\" style=\\\\\"z-index: 0; display: none;\\\\\">\n  <transition-stub name=\\\\\"fade-drawer\\\\\" appear=\\\\\"true\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\">\n    <div class=\\\\\"arco-drawer-mask\\\\\" style=\\\\\"display: none;\\\\\"></div>\n  </transition-stub>\n  <transition-stub name=\\\\\"slide-right-drawer\\\\\" appear=\\\\\"true\\\\\" persisted=\\\\\"true\\\\\" css=\\\\\"true\\\\\">\n    <div class=\\\\\"arco-drawer\\\\\" style=\\\\\"right: 0px; width: 250px; display: none;\\\\\">\n      <div class=\\\\\"arco-drawer-header\\\\\">\n        <div class=\\\\\"arco-drawer-title\\\\\">Title</div>\n        <div tabindex=\\\\\"-1\\\\\" role=\\\\\"button\\\\\" aria-label=\\\\\"Close\\\\\" class=\\\\\"arco-drawer-close-btn\\\\\"><span class=\\\\\"arco-icon-hover\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-close\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M9.857 9.858 24 24m0 0 14.142 14.142M24 24 38.142 9.858M24 24 9.857 38.142\\\\\"></path></svg></span></div>\n      </div>\n      <div class=\\\\\"arco-drawer-body\\\\\">\n        <div>Drawer Body</div>\n      </div>\n      <div class=\\\\\"arco-drawer-footer\\\\\"><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n          <!--v-if-->取消\n        </button><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n          <!--v-if-->确定\n        </button></div>\n    </div>\n  </transition-stub>\n</div>\n<!--teleport end-->\"\n`;\n"
  },
  {
    "path": "packages/web-vue/components/drawer/__test__/demo.test.ts",
    "content": "import demoTest from '../../../scripts/demo-test';\n\ndemoTest('drawer');\n"
  },
  {
    "path": "packages/web-vue/components/drawer/__test__/index.test.ts",
    "content": "import { nextTick } from 'vue';\nimport { mount } from '@vue/test-utils';\nimport Drawer from '../drawer.vue';\n\ndescribe('Drawer', () => {\n  test('should render Drawer', async () => {\n    const wrapper = mount(Drawer, {\n      props: {\n        title: 'Title',\n        defaultVisible: true,\n        renderToBody: false,\n      },\n      slots: {\n        default: '<div>Drawer Body</div>',\n      },\n    });\n\n    await nextTick();\n    expect(wrapper.html()).toMatchSnapshot();\n  });\n\n  test('should emit ok/cancel event', async () => {\n    const wrapper = mount(Drawer, {\n      props: {\n        title: 'Title',\n        defaultVisible: true,\n        renderToBody: false,\n      },\n      slots: {\n        default: '<div>Drawer Body</div>',\n      },\n    });\n\n    await nextTick();\n    const buttons = wrapper.findAll('button');\n    await buttons[0].trigger('click');\n    expect(wrapper.emitted('cancel')).toHaveLength(1);\n    await buttons[1].trigger('click');\n    expect(wrapper.emitted('ok')).toHaveLength(1);\n  });\n});\n"
  },
  {
    "path": "packages/web-vue/components/drawer/drawer.vue",
    "content": "<template>\n  <client-only>\n    <teleport :to=\"teleportContainer\" :disabled=\"!renderToBody\">\n      <div\n        v-if=\"!unmountOnClose || computedVisible || mounted\"\n        v-show=\"computedVisible || mounted\"\n        :class=\"classNames\"\n        :style=\"\n          isFixed ? { zIndex } : { zIndex: 'inherit', position: 'absolute' }\n        \"\n        v-bind=\"$attrs\"\n      >\n        <transition name=\"fade-drawer\" appear>\n          <div\n            v-if=\"mask\"\n            v-show=\"computedVisible\"\n            :class=\"`${prefixCls}-mask`\"\n            @click=\"handleMask\"\n          />\n        </transition>\n        <transition\n          :name=\"`slide-${placement}-drawer`\"\n          appear\n          @after-enter=\"handleOpen\"\n          @after-leave=\"handleClose\"\n        >\n          <div v-show=\"computedVisible\" :class=\"prefixCls\" :style=\"style\">\n            <div v-if=\"header\" :class=\"`${prefixCls}-header`\">\n              <slot name=\"header\">\n                <div v-if=\"$slots.title || title\" :class=\"`${prefixCls}-title`\">\n                  <slot name=\"title\">{{ title }}</slot>\n                </div>\n                <div\n                  v-if=\"closable\"\n                  tabindex=\"-1\"\n                  role=\"button\"\n                  aria-label=\"Close\"\n                  :class=\"`${prefixCls}-close-btn`\"\n                  @click=\"handleCancel\"\n                >\n                  <icon-hover>\n                    <icon-close />\n                  </icon-hover>\n                </div>\n              </slot>\n            </div>\n            <div :class=\"[`${prefixCls}-body`, bodyClass]\" :style=\"bodyStyle\">\n              <slot />\n            </div>\n            <div v-if=\"footer\" :class=\"`${prefixCls}-footer`\">\n              <slot name=\"footer\">\n                <arco-button\n                  v-if=\"!hideCancel\"\n                  v-bind=\"cancelButtonProps\"\n                  @click=\"handleCancel\"\n                >\n                  {{ cancelText || t('drawer.cancelText') }}\n                </arco-button>\n                <arco-button\n                  type=\"primary\"\n                  :loading=\"mergedOkLoading\"\n                  v-bind=\"okButtonProps\"\n                  @click=\"handleOk\"\n                >\n                  {{ okText || t('drawer.okText') }}\n                </arco-button>\n              </slot>\n            </div>\n          </div>\n        </transition>\n      </div>\n    </teleport>\n  </client-only>\n</template>\n\n<script lang=\"ts\">\nimport type { CSSProperties, PropType, StyleValue } from 'vue';\nimport {\n  computed,\n  defineComponent,\n  onBeforeUnmount,\n  onMounted,\n  ref,\n  toRefs,\n  watch,\n} from 'vue';\nimport { getPrefixCls } from '../_utils/global-config';\nimport ClientOnly from '../_components/client-only';\nimport ArcoButton, { ButtonProps } from '../button';\nimport IconHover from '../_components/icon-hover.vue';\nimport IconClose from '../icon/icon-close';\nimport { useI18n } from '../locale';\nimport { useOverflow } from '../_hooks/use-overflow';\nimport { off, on } from '../_utils/dom';\nimport usePopupManager from '../_hooks/use-popup-manager';\nimport { isBoolean, isFunction, isNumber, isPromise } from '../_utils/is';\nimport { KEYBOARD_KEY } from '../_utils/keyboard';\nimport { useTeleportContainer } from '../_hooks/use-teleport-container';\n\nconst DRAWER_PLACEMENTS = ['top', 'right', 'bottom', 'left'] as const;\ntype DrawerPlacements = (typeof DRAWER_PLACEMENTS)[number];\n\nexport default defineComponent({\n  name: 'Drawer',\n  components: {\n    ClientOnly,\n    ArcoButton,\n    IconHover,\n    IconClose,\n  },\n  inheritAttrs: false,\n  props: {\n    /**\n     * @zh 抽屉是否可见\n     * @en Whether the drawer is visible\n     * @vModel\n     */\n    visible: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 抽屉默认是否可见（非受控模式）\n     * @en Whether the drawer is visible by default (uncontrolled mode)\n     */\n    defaultVisible: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 抽屉放置的位置\n     * @en Where the drawer is placed\n     * @values 'top','right','bottom','left'\n     */\n    placement: {\n      type: String as PropType<DrawerPlacements>,\n      default: 'right',\n      validator: (value: any) => DRAWER_PLACEMENTS.includes(value),\n    },\n    /**\n     * @zh 标题\n     * @en Title\n     */\n    title: String,\n    /**\n     * @zh 是否显示遮罩层\n     * @en Whether to show the mask\n     */\n    mask: {\n      type: Boolean,\n      default: true,\n    },\n    /**\n     * @zh 点击遮罩层是否可以关闭\n     * @en Click on the mask layer to be able to close\n     */\n    maskClosable: {\n      type: Boolean,\n      default: true,\n    },\n    /**\n     * @zh 是否展示关闭按钮\n     * @en Whether to show the close button\n     */\n    closable: {\n      type: Boolean,\n      default: true,\n    },\n    /**\n     * @zh 确认按钮的内容\n     * @en The content of the ok button\n     */\n    okText: String,\n    /**\n     * @zh 取消按钮的内容\n     * @en The content of the cancel button\n     */\n    cancelText: String,\n    /**\n     * @zh 确认按钮是否为加载中状态\n     * @en Whether the ok button is in the loading state\n     */\n    okLoading: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 确认按钮的Props\n     * @en Props of confirm button\n     * @version 2.9.0\n     */\n    okButtonProps: {\n      type: Object as PropType<ButtonProps>,\n    },\n    /**\n     * @zh 取消按钮的Props\n     * @en Props of cancel button\n     * @version 2.9.0\n     */\n    cancelButtonProps: {\n      type: Object as PropType<ButtonProps>,\n    },\n    /**\n     * @zh 关闭时是否卸载节点\n     * @en Whether to uninstall the node when close\n     * @version 2.12.0\n     */\n    unmountOnClose: Boolean,\n    /**\n     * @zh 抽屉的宽度（仅在placement为right,left时可用）\n     * @en The width of the drawer (only available when placement is right, left)\n     */\n    width: {\n      type: [Number, String],\n      default: 250,\n    },\n    /**\n     * @zh 抽屉的高度（仅在placement为top,bottom时可用）\n     * @en The height of the drawer (only available when placement is top, bottom)\n     */\n    height: {\n      type: [Number, String],\n      default: 250,\n    },\n    /**\n     * @zh 弹出框的挂载容器\n     * @en Mount container for popup\n     */\n    popupContainer: {\n      type: [String, Object] as PropType<string | HTMLElement>,\n      default: 'body',\n    },\n    /**\n     * @zh 抽屉的样式\n     * @en Drawer style\n     */\n    drawerStyle: {\n      type: Object as PropType<CSSProperties>,\n    },\n    /**\n     * @zh 抽屉内容部分的类名\n     * @en The classname of the drawer body\n     * @version 2.57.0\n     */\n    bodyClass: {\n      type: [String, Array] as PropType<string | any[]>,\n    },\n    /**\n     * @zh 抽屉内容部分的样式\n     * @en Drawer body style\n     * @version 2.57.0\n     */\n    bodyStyle: {\n      type: [String, Object, Array] as PropType<StyleValue>,\n    },\n    /**\n     * @zh 触发 ok 事件前的回调函数。如果返回 false 则不会触发后续事件，也可使用 done 进行异步关闭。\n     * @en The callback function before the ok event is triggered. If false is returned, subsequent events will not be triggered, and done can also be used to close asynchronously.\n     */\n    onBeforeOk: {\n      type: Function as PropType<\n        (\n          done: (closed: boolean) => void\n        ) => void | boolean | Promise<void | boolean>\n      >,\n    },\n    /**\n     * @zh 触发 cancel 事件前的回调函数。如果返回 false 则不会触发后续事件。\n     * @en The callback function before the cancel event is triggered. If it returns false, no subsequent events will be triggered.\n     */\n    onBeforeCancel: {\n      type: Function as PropType<() => boolean>,\n    },\n    /**\n     * @zh 是否支持 ESC 键关闭抽屉\n     * @en Whether to support the ESC key to close the dialog\n     * @version 2.15.0\n     */\n    escToClose: {\n      type: Boolean,\n      default: true,\n    },\n    /**\n     * @zh 抽屉是否挂载在 `body` 元素下\n     * @en Whether the drawer is mounted under the `body` element\n     */\n    renderToBody: {\n      type: Boolean,\n      default: true,\n    },\n    /**\n     * @zh 是否展示头部内容\n     * @en Whether to display high-quality content\n     * @version 2.33.0\n     */\n    header: {\n      type: Boolean,\n      default: true,\n    },\n    /**\n     * @zh 是否展示底部内容\n     * @en Whether to display the bottom content\n     * @version 2.11.0\n     */\n    footer: {\n      type: Boolean,\n      default: true,\n    },\n    /**\n     * @zh 是否隐藏取消按钮\n     * @en Whether to hide the cancel button\n     * @version 2.19.0\n     */\n    hideCancel: {\n      type: Boolean,\n      default: false,\n    },\n  },\n  emits: {\n    'update:visible': (visible: boolean) => true,\n    /**\n     * @zh 点击确定按钮时触发\n     * @en Triggered when the OK button is clicked\n     * @property {MouseEvent} ev\n     */\n    'ok': (e: Event) => true,\n    /**\n     * @zh 点击取消、关闭按钮时触发\n     * @en Triggered when the cancel or close button is clicked\n     * @property {MouseEvent | KeyboardEvent} ev\n     */\n    'cancel': (e: Event) => true,\n    /**\n     * @zh 抽屉打开后（动画结束）触发\n     * @en Triggered after the drawer is opened (the animation ends)\n     */\n    'open': () => true,\n    /**\n     * @zh 抽屉关闭后（动画结束）触发\n     * @en Triggered when the drawer is closed (the animation ends)\n     */\n    'close': () => true,\n    /**\n     * @zh 对话框打开前触发\n     * @en Triggered before drawer is opened\n     * @version 2.43.0\n     */\n    'beforeOpen': () => true,\n    /**\n     * @zh 对话框关闭前触发\n     * @en Triggered before drawer is closed\n     * @version 2.43.0\n     */\n    'beforeClose': () => true,\n  },\n  /**\n   * @zh 标题\n   * @en Title\n   * @slot title\n   */\n  /**\n   * @zh 页脚\n   * @en Footer\n   * @slot footer\n   */\n  /**\n   * @zh 页眉\n   * @en Header\n   * @slot header\n   * @version 2.33.0\n   */\n  setup(props, { emit }) {\n    const { popupContainer } = toRefs(props);\n    const prefixCls = getPrefixCls('drawer');\n    const { t } = useI18n();\n\n    const _visible = ref(props.defaultVisible);\n    const computedVisible = computed(() => props.visible ?? _visible.value);\n    const _okLoading = ref(false);\n    const mergedOkLoading = computed(() => props.okLoading || _okLoading.value);\n    const classNames = computed(() => [\n      `${prefixCls}-container`,\n      {\n        [`${prefixCls}-penetrable`]: !props.mask,\n      },\n    ]);\n\n    const { teleportContainer, containerRef } = useTeleportContainer({\n      popupContainer,\n      visible: computedVisible,\n    });\n\n    const mounted = ref(computedVisible.value);\n\n    let globalKeyDownListener = false;\n\n    const handleGlobalKeyDown = (ev: KeyboardEvent) => {\n      if (props.escToClose && ev.key === KEYBOARD_KEY.ESC && isLastDialog()) {\n        handleCancel(ev);\n      }\n    };\n\n    const addGlobalKeyDownListener = () => {\n      if (props.escToClose && !globalKeyDownListener) {\n        globalKeyDownListener = true;\n        on(document.documentElement, 'keydown', handleGlobalKeyDown);\n      }\n    };\n\n    const removeGlobalKeyDownListener = () => {\n      if (globalKeyDownListener) {\n        globalKeyDownListener = false;\n        off(document.documentElement, 'keydown', handleGlobalKeyDown);\n      }\n    };\n\n    const { zIndex, isLastDialog } = usePopupManager('dialog', {\n      visible: computedVisible,\n    });\n    const isFixed = computed(() => {\n      return containerRef?.value === document.body;\n    });\n\n    // Used to ignore closed Promises\n    let promiseNumber = 0;\n\n    const close = () => {\n      promiseNumber++;\n      if (_okLoading.value) {\n        _okLoading.value = false;\n      }\n      _visible.value = false;\n      emit('update:visible', false);\n    };\n\n    const handleOk = async (e: Event) => {\n      const currentPromiseNumber = promiseNumber;\n      const closed = await new Promise<boolean>(\n        // eslint-disable-next-line no-async-promise-executor\n        async (resolve) => {\n          if (isFunction(props.onBeforeOk)) {\n            let result = props.onBeforeOk((closed = true) => resolve(closed));\n            if (isPromise(result) || !isBoolean(result)) {\n              _okLoading.value = true;\n            }\n            if (isPromise(result)) {\n              try {\n                // if onBeforeOk is Promise<void> ,set Defaults true\n                result = (await result) ?? true;\n              } catch (error) {\n                result = false;\n                throw error;\n              }\n            }\n            if (isBoolean(result)) {\n              resolve(result);\n            }\n          } else {\n            resolve(true);\n          }\n        }\n      );\n\n      if (currentPromiseNumber === promiseNumber) {\n        if (closed) {\n          emit('ok', e);\n          close();\n        } else if (_okLoading.value) {\n          _okLoading.value = false;\n        }\n      }\n    };\n\n    const handleCancel = (e: Event) => {\n      let result = true;\n      if (isFunction(props.onBeforeCancel)) {\n        result = props.onBeforeCancel() ?? false;\n      }\n      if (result) {\n        emit('cancel', e);\n        close();\n      }\n    };\n\n    const handleMask = (e: Event) => {\n      if (props.maskClosable) {\n        handleCancel(e);\n      }\n    };\n\n    const handleOpen = () => {\n      if (computedVisible.value) {\n        emit('open');\n      }\n    };\n\n    const handleClose = () => {\n      if (!computedVisible.value) {\n        mounted.value = false;\n        resetOverflow();\n        emit('close');\n      }\n    };\n\n    const { setOverflowHidden, resetOverflow } = useOverflow(containerRef);\n\n    onMounted(() => {\n      if (computedVisible.value) {\n        mounted.value = true;\n        setOverflowHidden();\n        addGlobalKeyDownListener();\n      }\n    });\n\n    onBeforeUnmount(() => {\n      resetOverflow();\n      removeGlobalKeyDownListener();\n    });\n\n    watch(computedVisible, (visible) => {\n      if (_visible.value !== visible) {\n        _visible.value = visible;\n      }\n      if (visible) {\n        emit('beforeOpen');\n        mounted.value = true;\n        setOverflowHidden();\n        addGlobalKeyDownListener();\n      } else {\n        emit('beforeClose');\n        removeGlobalKeyDownListener();\n      }\n    });\n\n    const style = computed(() => {\n      const style: CSSProperties = {\n        [props.placement]: 0,\n        ...(props.drawerStyle ?? {}),\n      };\n      if (['right', 'left'].includes(props.placement)) {\n        style.width = isNumber(props.width) ? `${props.width}px` : props.width;\n      } else {\n        style.height = isNumber(props.height)\n          ? `${props.height}px`\n          : props.height;\n      }\n      return style;\n    });\n\n    return {\n      prefixCls,\n      classNames,\n      style,\n      t,\n      mounted,\n      computedVisible,\n      mergedOkLoading,\n      zIndex,\n      handleOk,\n      handleCancel,\n      handleOpen,\n      handleClose,\n      handleMask,\n      isFixed,\n      teleportContainer,\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/drawer/index.ts",
    "content": "import type { App, AppContext } from 'vue';\nimport { createVNode, nextTick, render } from 'vue';\nimport { getOverlay } from '../_utils/dom';\nimport { getComponentPrefix, setGlobalConfig } from '../_utils/global-config';\nimport { isFunction } from '../_utils/is';\nimport { omit } from '../_utils/omit';\nimport { ArcoOptions } from '../_utils/types';\nimport { getSlotFunction } from '../_utils/vue-utils';\nimport _Drawer from './drawer.vue';\nimport type {\n  DrawerConfig,\n  DrawerMethod,\n  DrawerUpdateConfig,\n} from './interface';\n\nconst open = (config: DrawerConfig, appContext?: AppContext) => {\n  let container: HTMLElement | null = getOverlay('drawer');\n\n  const handleOk = () => {\n    if (vm.component) {\n      vm.component.props.visible = false;\n    }\n\n    if (isFunction(config.onOk)) {\n      config.onOk();\n    }\n  };\n\n  const handleCancel = () => {\n    if (vm.component) {\n      vm.component.props.visible = false;\n    }\n\n    if (isFunction(config.onCancel)) {\n      config.onCancel();\n    }\n  };\n\n  const handleClose = async () => {\n    await nextTick();\n    if (container) {\n      render(null, container);\n      document.body.removeChild(container);\n    }\n    container = null;\n\n    if (isFunction(config.onClose)) {\n      config.onClose();\n    }\n  };\n\n  const handleReturnClose = () => {\n    if (vm.component) {\n      vm.component.props.visible = false;\n    }\n  };\n\n  const handleUpdateConfig = (config: DrawerUpdateConfig) => {\n    if (vm.component) {\n      Object.entries(config).forEach(([key, value]) => {\n        vm.component!.props[key] = value;\n      });\n    }\n  };\n\n  const defaultConfig = {\n    visible: true,\n    renderToBody: false,\n    unmountOnClose: true,\n    onOk: handleOk,\n    onCancel: handleCancel,\n    onClose: handleClose,\n  };\n\n  // @ts-ignore\n  const vm = createVNode(\n    _Drawer,\n    {\n      ...defaultConfig,\n      ...omit(config, [\n        'content',\n        'title',\n        'footer',\n        'visible',\n        'unmountOnClose',\n        'onOk',\n        'onCancel',\n        'onClose',\n      ]),\n      ...{\n        header: typeof config.header === 'boolean' ? config.header : undefined,\n        footer: typeof config.footer === 'boolean' ? config.footer : undefined,\n      },\n    },\n    {\n      default: getSlotFunction(config.content),\n      header:\n        typeof config.header !== 'boolean'\n          ? getSlotFunction(config.header)\n          : undefined,\n      title: getSlotFunction(config.title),\n      footer:\n        typeof config.footer !== 'boolean'\n          ? getSlotFunction(config.footer)\n          : undefined,\n    }\n  );\n\n  if (appContext ?? Drawer._context) {\n    vm.appContext = appContext ?? Drawer._context;\n  }\n\n  render(vm, container);\n  document.body.appendChild(container);\n\n  return {\n    close: handleReturnClose,\n    update: handleUpdateConfig,\n  };\n};\n\nconst Drawer = Object.assign(_Drawer, {\n  open,\n  install: (app: App, options?: ArcoOptions) => {\n    setGlobalConfig(app, options);\n    const componentPrefix = getComponentPrefix(options);\n\n    app.component(componentPrefix + _Drawer.name, _Drawer);\n\n    const drawerWithContext: DrawerMethod = {\n      open: (config, appContext = app._context) => open(config, appContext),\n    };\n\n    app.config.globalProperties.$drawer = drawerWithContext;\n  },\n  _context: null as AppContext | null,\n});\n\nexport type { DrawerMethod, DrawerConfig, DrawerReturn } from './interface';\n\nexport type DrawerInstance = InstanceType<typeof _Drawer>;\n\nexport default Drawer;\n"
  },
  {
    "path": "packages/web-vue/components/drawer/interface.ts",
    "content": "import { AppContext, CSSProperties } from 'vue';\nimport { ButtonProps } from '../button';\nimport { RenderContent } from '../_utils/types';\n\nexport interface DrawerConfig {\n  /**\n   * @zh 抽屉放置的位置\n   * @en Where the drawer is placed\n   * @values 'top','right','bottom','left'\n   * @defaultValue 'right'\n   */\n  placement?: 'top' | 'right' | 'bottom' | 'left';\n  /**\n   * @zh 标题\n   * @en Title\n   */\n  title?: RenderContent;\n  /**\n   * @zh 内容\n   * @en Content\n   */\n  content: RenderContent;\n  /**\n   * @zh 是否显示遮罩层\n   * @en Whether to show the mask\n   * @defaultValue true\n   */\n  mask?: boolean;\n  /**\n   * @zh 点击遮罩层是否可以关闭\n   * @en Click on the mask layer to be able to close\n   * @defaultValue true\n   */\n  maskClosable?: boolean;\n  /**\n   * @zh 是否展示关闭按钮\n   * @en Whether to show the close button\n   * @defaultValue true\n   */\n  closable?: boolean;\n  /**\n   * @zh 确认按钮的内容\n   * @en The content of the ok button\n   */\n  okText?: string;\n  /**\n   * @zh 取消按钮的内容\n   * @en The content of the cancel button\n   */\n  cancelText?: string;\n  /**\n   * @zh 确认按钮是否为加载中状态\n   * @en Whether the ok button is in the loading state\n   * @defaultValue false\n   */\n  okLoading?: boolean;\n  /**\n   * @zh 确认按钮的Props\n   * @en Props of confirm button\n   * @version 2.9.0\n   */\n  okButtonProps?: ButtonProps;\n  /**\n   * @zh 取消按钮的Props\n   * @en Props of cancel button\n   * @version 2.9.0\n   */\n  cancelButtonProps?: ButtonProps;\n  /**\n   * @zh 抽屉的宽度（仅在placement为right,left时可用）\n   * @en The width of the drawer (only available when placement is right, left)\n   * @defaultValue 250\n   */\n  width?: number | string;\n  /**\n   * @zh 抽屉的高度（仅在placement为top,bottom时可用）\n   * @en The height of the drawer (only available when placement is top, bottom)\n   * @defaultValue 250\n   */\n  height?: number | string;\n  /**\n   * @zh 弹出框的挂载容器\n   * @en Mount container for popup\n   * @defaultValue 'body'\n   */\n  popupContainer?: string | HTMLElement;\n  /**\n   * @zh 抽屉的样式\n   * @en Drawer style\n   */\n  drawerStyle?: CSSProperties;\n  /**\n   * @zh 点击确定按钮时触发\n   * @en Triggered when the OK button is clicked\n   */\n  onOk?: (e?: Event) => void;\n  /**\n   * @zh 点击取消、关闭按钮时触发\n   * @en Triggered when the cancel or close button is clicked\n   */\n  onCancel?: (e?: Event) => void;\n  /**\n   * @zh 触发 ok 事件前的回调函数。如果返回 false 则不会触发后续事件，也可使用 done 进行异步关闭。\n   * @en The callback function before the ok event is triggered. If false is returned, subsequent events will not be triggered, and done can also be used to close asynchronously.\n   */\n  onBeforeOk?: (\n    done: (closed: boolean) => void\n  ) => void | boolean | Promise<void | boolean>;\n  /**\n   * @zh 触发 cancel 事件前的回调函数。如果返回 false 则不会触发后续事件。\n   * @en The callback function before the cancel event is triggered. If it returns false, no subsequent events will be triggered.\n   */\n  onBeforeCancel?: () => boolean;\n  /**\n   * @zh 抽屉打开后（动画结束）触发\n   * @en Triggered after the drawer is opened (the animation ends)\n   */\n  onOpen?: () => void;\n  /**\n   * @zh 抽屉关闭后（动画结束）触发\n   * @en Triggered when the drawer is closed (the animation ends)\n   */\n  onClose?: () => void;\n  /**\n   * @zh 抽屉打开前触发\n   * @en Triggered before drawer is opened\n   * @version 2.43.0\n   */\n  onBeforeOpen?: () => void;\n  /**\n   * @zh 抽屉关闭前触发\n   * @en Triggered before drawer is closed\n   * @version 2.43.0\n   */\n  onBeforeClose?: () => void;\n  /**\n   * @zh 是否支持 ESC 键关闭抽屉\n   * @en Whether to support the ESC key to close the drawer\n   * @version 2.15.0\n   * @defaultValue true\n   */\n  escToClose?: boolean;\n  /**\n   * @zh 是否展示头部内容\n   * @en Whether to display high-quality content\n   * @version 2.33.0\n   * @defaultValue true\n   */\n  header?: boolean | RenderContent;\n  /**\n   * @zh 是否展示底部内容\n   * @en Whether to display the bottom content\n   * @version 2.11.0\n   * @defaultValue true\n   */\n  footer?: boolean | RenderContent;\n  /**\n   * @zh 是否隐藏取消按钮\n   * @en Whether to hide the cancel button\n   * @version 2.19.0\n   * @defaultValue false\n   */\n  hideCancel?: boolean;\n}\n\nexport type DrawerUpdateConfig = Omit<\n  DrawerConfig,\n  | 'title'\n  | 'content'\n  | 'onOk'\n  | 'onCancel'\n  | 'onBeforeOk'\n  | 'onBeforeCancel'\n  | 'onOpen'\n  | 'onClose'\n  | 'onBeforeOpen'\n  | 'onBeforeClose'\n  | 'header'\n  | 'footer'\n>;\n\nexport interface DrawerReturn {\n  /**\n   * @zh 关闭抽屉\n   * @en Close Drawer\n   */\n  close: () => void;\n  /**\n   * @zh 更新抽屉\n   * @en Update Drawer\n   * @version 2.43.2\n   */\n  update: (config: DrawerUpdateConfig) => void;\n}\n\nexport interface DrawerMethod {\n  /**\n   * @zh 打开抽屉\n   * @en Open drawer\n   */\n  open: (config: DrawerConfig, appContext?: AppContext) => DrawerReturn;\n}\n"
  },
  {
    "path": "packages/web-vue/components/drawer/style/index.less",
    "content": "@import './token.less';\n\n@drawer-prefix-cls: ~'@{prefix}-drawer';\n\n.@{drawer-prefix-cls}-container {\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: @z-index-drawer;\n}\n\n.@{drawer-prefix-cls}-mask {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  background-color: var(~'@{arco-cssvars-prefix}-color-mask-bg');\n}\n\n.@{drawer-prefix-cls} {\n  position: absolute;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n  line-height: @line-height-base;\n  background-color: var(~'@{arco-cssvars-prefix}-color-bg-3');\n\n  &-header {\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    box-sizing: border-box;\n    width: 100%;\n    height: @drawer-size-header-height;\n    padding: 0 @drawer-padding-horizontal;\n    border-bottom: @border-1 solid @drawer-color-border;\n\n    .@{drawer-prefix-cls}-title {\n      margin-right: auto;\n      color: @drawer-color-header-text;\n      font-weight: @drawer-font-header-weight;\n      font-size: @drawer-font-header-size;\n      text-align: left;\n    }\n\n    .@{drawer-prefix-cls}-close-btn {\n      margin-left: 8px;\n      color: @drawer-color-header-text;\n      font-size: @drawer-font-size-close-icon;\n      cursor: pointer;\n    }\n  }\n\n  &-footer {\n    flex-shrink: 0;\n    box-sizing: border-box;\n    padding: @drawer-padding-footer-vertical @drawer-padding-horizontal;\n    text-align: right;\n    border-top: @border-1 solid @drawer-color-border;\n\n    > .@{prefix}-btn {\n      margin-left: @drawer-margin-footer-button-left;\n    }\n  }\n\n  &-body {\n    position: relative;\n    flex: 1;\n    box-sizing: border-box;\n    height: 100%;\n    padding: @drawer-padding-content-vertical @drawer-padding-horizontal;\n    overflow: auto;\n    color: @drawer-color-content-text;\n  }\n}\n\n.@{drawer-prefix-cls}-penetrable {\n  pointer-events: none;\n\n  .@{drawer-prefix-cls} {\n    pointer-events: auto;\n  }\n}\n\n.fade-drawer-enter-from,\n.fade-drawer-appear-from {\n  opacity: 0;\n}\n\n.fade-drawer-enter-to,\n.fade-drawer-appear-to {\n  opacity: 1;\n}\n\n.fade-drawer-enter-active,\n.fade-drawer-appear-active {\n  transition: opacity @transition-duration-3\n    @transition-timing-function-standard;\n}\n\n.fade-drawer-leave-from {\n  opacity: 1;\n}\n\n.fade-drawer-leave-to {\n  opacity: 0;\n}\n\n.fade-drawer-leave-active {\n  transition: opacity @transition-duration-3\n    @transition-timing-function-standard;\n}\n\n.slide-left-drawer-enter-from,\n.slide-left-drawer-appear-from {\n  transform: translateX(-100%);\n}\n\n.slide-left-drawer-enter-to,\n.slide-left-drawer-appear-to {\n  transform: translateX(0);\n}\n\n.slide-left-drawer-enter-active,\n.slide-left-drawer-appear-active {\n  transition: transform @transition-duration-3\n    @transition-timing-function-standard;\n}\n\n.slide-left-drawer-leave-from {\n  transform: translateX(0);\n}\n\n.slide-left-drawer-leave-to {\n  transform: translateX(-100%);\n}\n\n.slide-left-drawer-leave-active {\n  transition: transform @transition-duration-3\n    @transition-timing-function-standard;\n}\n\n.slide-right-drawer-enter-from,\n.slide-right-drawer-appear-from {\n  transform: translateX(100%);\n}\n\n.slide-right-drawer-enter-to,\n.slide-right-drawer-appear-to {\n  transform: translateX(0);\n}\n\n.slide-right-drawer-enter-active,\n.slide-right-drawer-appear-active {\n  transition: transform @transition-duration-3\n    @transition-timing-function-standard;\n}\n\n.slide-right-drawer-leave-from {\n  transform: translateX(0);\n}\n\n.slide-right-drawer-leave-to {\n  transform: translateX(100%);\n}\n\n.slide-right-drawer-leave-active {\n  transition: transform @transition-duration-3\n    @transition-timing-function-standard;\n}\n\n.slide-top-drawer-enter,\n.slide-top-drawer-appear {\n  transform: translateY(-100%);\n}\n\n.slide-top-drawer-enter-from,\n.slide-top-drawer-appear-from {\n  transform: translateY(-100%);\n}\n\n.slide-top-drawer-enter-to,\n.slide-top-drawer-appear-to {\n  transform: translateY(0);\n}\n\n.slide-top-drawer-enter-active,\n.slide-top-drawer-appear-active {\n  transition: transform @transition-duration-3\n    @transition-timing-function-standard;\n}\n\n.slide-top-drawer-leave-from {\n  transform: translateY(0);\n}\n\n.slide-top-drawer-leave-to {\n  transform: translateY(-100%);\n}\n\n.slide-top-drawer-leave-active {\n  transition: transform @transition-duration-3\n    @transition-timing-function-standard;\n}\n\n.slide-bottom-drawer-enter-from,\n.slide-bottom-drawer-appear-from {\n  transform: translateY(100%);\n}\n\n.slide-bottom-drawer-enter-to,\n.slide-bottom-drawer-appear-to {\n  transform: translateY(0);\n}\n\n.slide-bottom-drawer-enter-active,\n.slide-bottom-drawer-appear-active {\n  transition: transform @transition-duration-3\n    @transition-timing-function-standard;\n}\n\n.slide-bottom-drawer-leave-from {\n  transform: translateY(0);\n}\n\n.slide-bottom-drawer-leave-to {\n  transform: translateY(100%);\n}\n\n.slide-bottom-drawer-leave-active {\n  transition: transform @transition-duration-3\n    @transition-timing-function-standard;\n}\n"
  },
  {
    "path": "packages/web-vue/components/drawer/style/index.ts",
    "content": "import '../../style/index.less';\nimport '../../button/style';\nimport './index.less';\n"
  },
  {
    "path": "packages/web-vue/components/drawer/style/token.less",
    "content": "@import '../../style/theme/index.less';\n\n@drawer-size-header-height: @size-12;\n@drawer-margin-footer-button-left: @spacing-6;\n@drawer-font-header-size: @font-size-title-1;\n@drawer-padding-horizontal: @spacing-7;\n@drawer-padding-footer-vertical: @spacing-7;\n@drawer-padding-content-vertical: @spacing-6;\n@drawer-font-header-weight: @font-weight-500;\n\n@drawer-color-border: var(~'@{arco-cssvars-prefix}-color-neutral-3');\n@drawer-color-header-text: var(~'@{arco-cssvars-prefix}-color-text-1');\n@drawer-color-content-text: var(~'@{arco-cssvars-prefix}-color-text-1');\n\n@drawer-position-close-icon-right: @spacing-7;\n@drawer-font-size-close-icon: @size-3;\n"
  },
  {
    "path": "packages/web-vue/components/dropdown/CHANGELOG.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.43.0\n\n`2023-02-10`\n\n### 🆕 Feature\n\n- add hide-on-select props ([#2078](https://github.com/arco-design/arco-design-vue/pull/2078))\n\n\n## 2.36.1\n\n`2022-09-09`\n\n### 💎 Enhancement\n\n- Don't fire click event when option is disabled ([#1611](https://github.com/arco-design/arco-design-vue/pull/1611))\n\n\n## 2.34.0\n\n`2022-07-29`\n\n### 🆕 Feature\n\n- add new prop for icon slot: `popup-visible` ([#1430](https://github.com/arco-design/arco-design-vue/pull/1430))\n\n\n## 2.29.0\n\n`2022-05-27`\n\n### 🆕 Feature\n\n- Added `popup-max-height` property ([#1203](https://github.com/arco-design/arco-design-vue/pull/1203))\n- Added icon slot to submenu ([#1203](https://github.com/arco-design/arco-design-vue/pull/1203))\n\n\n## 2.20.2\n\n`2022-03-24`\n\n### 💅 Style\n\n- Fixed vertical centering of icons in options ([#862](https://github.com/arco-design/arco-design-vue/pull/862))\n\n\n## 2.18.0-beta.1\n\n`2022-02-18`\n\n### ⚠️ Important Attention\n\n- The <doption> component modifies the vertical centering layout using flex ([#688](https://github.com/arco-design/arco-design-vue/pull/688))\n\n\n## 2.16.1\n\n`2022-01-21`\n\n### 🐛 BugFix\n\n- `<dropdown-button>` component completes dropdown related properties ([#637](https://github.com/arco-design/arco-design-vue/pull/637))\n\n\n## 2.16.0\n\n`2022-01-21`\n\n### 🆕 Feature\n\n- Use context to refactor components to support nested use ([#608](https://github.com/arco-design/arco-design-vue/pull/608))\n- value adds support for object ([#608](https://github.com/arco-design/arco-design-vue/pull/608))\n- Added `dropdown-button` component ([#608](https://github.com/arco-design/arco-design-vue/pull/608))\n- When the dropdown is open, add a class name to the trigger element ([#608](https://github.com/arco-design/arco-design-vue/pull/608))\n\n\n## 2.14.0\n\n`2022-01-07`\n\n### 💅 Style\n\n- fix option suffix style issue ([#523](https://github.com/arco-design/arco-design-vue/pull/523))\n\n\n## 2.11.1\n\n`2021-12-20`\n\n### 🐛 BugFix\n\n- Fix the problem that Group is unavailable when using JSX ([#427](https://github.com/arco-design/arco-design-vue/pull/427))\n\n\n## 2.10.1\n\n`2021-12-14`\n\n### 🐛 BugFix\n\n- Fix <doption> component disabled failure and attribute inheritance issues ([#385](https://github.com/arco-design/arco-design-vue/pull/385))\n\n\n## 2.10.0\n\n`2021-12-10`\n\n### 🆕 Feature\n\n- Add footer slot ([#350](https://github.com/arco-design/arco-design-vue/pull/350))\n\n\n## 2.7.0\n\n`2021-11-26`\n\n### 🆕 Feature\n\n- Add `disabled` prop ([#270](https://github.com/arco-design/arco-design-vue/pull/270))\n\n"
  },
  {
    "path": "packages/web-vue/components/dropdown/CHANGELOG.zh-CN.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.43.0\n\n`2023-02-10`\n\n### 🆕 新增功能\n\n- 添加hide-on-select属性 ([#2078](https://github.com/arco-design/arco-design-vue/pull/2078))\n\n\n## 2.36.1\n\n`2022-09-09`\n\n### 💎 功能优化\n\n- 选项禁用时不触发单击事件 ([#1611](https://github.com/arco-design/arco-design-vue/pull/1611))\n\n\n## 2.34.0\n\n`2022-07-29`\n\n### 🆕 新增功能\n\n- 为icon插槽加入新的porp:  `popup-visible` ([#1430](https://github.com/arco-design/arco-design-vue/pull/1430))\n\n\n## 2.29.0\n\n`2022-05-27`\n\n### 🆕 新增功能\n\n- 增加 `popup-max-height` 属性 ([#1203](https://github.com/arco-design/arco-design-vue/pull/1203))\n- 子菜单增加 `option-props` 和 icon 插槽 ([#1203](https://github.com/arco-design/arco-design-vue/pull/1203))\n\n\n## 2.20.2\n\n`2022-03-24`\n\n### 💅 样式更新\n\n- 修复选项中图标的垂直居中问题 ([#862](https://github.com/arco-design/arco-design-vue/pull/862))\n\n\n## 2.18.0-beta.1\n\n`2022-02-18`\n\n### ⚠️ 重点注意\n\n- <doption> 组件修改使用 flex 垂直居中布局 ([#688](https://github.com/arco-design/arco-design-vue/pull/688))\n\n\n## 2.16.1\n\n`2022-01-21`\n\n### 🐛 问题修复\n\n- `<dropdown-button>` 组件补全 dropdown 相关属性 ([#637](https://github.com/arco-design/arco-design-vue/pull/637))\n\n\n## 2.16.0\n\n`2022-01-21`\n\n### 🆕 新增功能\n\n- 使用 context 重构组件，支持嵌套使用 ([#608](https://github.com/arco-design/arco-design-vue/pull/608))\n- value 增加对 object 的支持 ([#608](https://github.com/arco-design/arco-design-vue/pull/608))\n- 新增 `dropdown-button` 组件 ([#608](https://github.com/arco-design/arco-design-vue/pull/608))\n- 下拉菜单打开时，为触发元素增加标识类名 ([#608](https://github.com/arco-design/arco-design-vue/pull/608))\n\n\n## 2.14.0\n\n`2022-01-07`\n\n### 💅 样式更新\n\n- 修复选项后缀样式问题 ([#523](https://github.com/arco-design/arco-design-vue/pull/523))\n\n\n## 2.11.1\n\n`2021-12-20`\n\n### 🐛 问题修复\n\n- 修复使用 JSX 时，Group 不可用的问题 ([#427](https://github.com/arco-design/arco-design-vue/pull/427))\n\n\n## 2.10.1\n\n`2021-12-14`\n\n### 🐛 问题修复\n\n- 修复 <doption> 组件 disabled 失效和属性继承的问题 ([#385](https://github.com/arco-design/arco-design-vue/pull/385))\n\n\n## 2.10.0\n\n`2021-12-10`\n\n### 🆕 新增功能\n\n- 增加 footer 插槽 ([#350](https://github.com/arco-design/arco-design-vue/pull/350))\n\n\n## 2.7.0\n\n`2021-11-26`\n\n### 🆕 新增功能\n\n- 增加 `disabled` 属性 ([#270](https://github.com/arco-design/arco-design-vue/pull/270))\n\n"
  },
  {
    "path": "packages/web-vue/components/dropdown/README.en-US.md",
    "content": "```yaml\nmeta:\n  type: Component\n  category: Navigation\ntitle: Dropdown\ndescription: When there are too many commands on the page, the alternative commands can be stored in the floating container that expands downward.\n```\n\n*Auto translate by google.*\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/position.md\n\n@import ./__demo__/trigger.md\n\n@import ./__demo__/button.md\n\n@import ./__demo__/group.md\n\n@import ./__demo__/submenu.md\n\n@import ./__demo__/context-menu.md\n\n@import ./__demo__/icon.md\n\n`<dropdown>` 组件继承 `<trigger>` 组件的全部属性\n\n## API\n\n\n### `<dropdown>` Props\n\n|Attribute|Description|Type|Default|version|\n|---|---|---|:---:|:---|\n|popup-visible **(v-model)**|Whether the popup is visible|`boolean`|`-`||\n|default-popup-visible|Whether the popup is visible by default (uncontrolled mode)|`boolean`|`false`||\n|trigger|Trigger method|`'hover' \\| 'click' \\| 'focus' \\| 'contextMenu'`|`'click'`||\n|position|Popup position|`'top' \\| 'tl' \\| 'tr' \\| 'bottom' \\| 'bl' \\| 'br'`|`'bottom'`||\n|popup-container|Mount container for popup|`string \\| HTMLElement`|`-`||\n|popup-max-height|Maximum height of the popup|`boolean\\|number`|`true`|2.29.0|\n|hide-on-select|Whether to hide popup when the user selects|`boolean`|`true`|2.43.0|\n### `<dropdown>` Events\n\n|Event Name|Description|Parameters|\n|---|---|---|\n|popup-visible-change|Triggered when the display status of the drop-down box changes|visible: `boolean`|\n|select|Triggered when the user selects|value: `string \\| number \\| Record<string, any> \\| undefined `<br>ev: `Event`|\n### `<dropdown>` Slots\n\n|Slot Name|Description|Parameters|version|\n|---|---|---|:---|\n|content|Content|-||\n|footer|Footer|-|2.10.0|\n\n\n\n\n### `<doption>` Props\n\n|Attribute|Description|Type|Default|\n|---|---|---|:---:|\n|value|Value|`string\\|number\\|object`|`-`|\n|disabled|Whether to disable|`boolean`|`false`|\n### `<doption>` Events\n\n|Event Name|Description|Parameters|\n|---|---|---|\n|click|Emitted when the button is clicked|ev: `MouseEvent`|\n### `<doption>` Slots\n\n|Slot Name|Description|Parameters|\n|---|---|---|\n|icon|Icon|-|\n\n\n\n\n### `<dgroup>` Props\n\n|Attribute|Description|Type|Default|\n|---|---|---|:---:|\n|title|Group title|`string`|`-`|\n### `<dgroup>` Slots\n\n|Slot Name|Description|Parameters|version|\n|---|---|---|:---|\n|title|Group title|-|2.10.0|\n\n\n\n\n### `<dsubmenu>` Props\n\n|Attribute|Description|Type|Default|version|\n|---|---|---|:---:|:---|\n|value|Value (Not useful after version 2.16.0)|`string\\|number`|`-`||\n|disabled|Whether to disable|`boolean`|`false`|2.10.0|\n|trigger|Trigger method|`'hover' \\| 'click'`|`'click'`|2.10.0|\n|position|Popup position|`'rt' \\| 'lt'`|`'rt'`|2.10.0|\n|popup-visible **(v-model)**|Whether the popup is visible|`boolean`|`-`||\n|default-popup-visible|Whether the popup is visible by default (uncontrolled mode)|`boolean`|`false`||\n|option-props|Custom option properties|`object`|`-`|2.29.0|\n### `<dsubmenu>` Events\n\n|Event Name|Description|Parameters|\n|---|---|---|\n|popup-visible-change|Triggered when the display status of the drop-down box changes|visible: `boolean`|\n### `<dsubmenu>` Slots\n\n|Slot Name|Description|Parameters|version|\n|---|---|---|:---|\n|icon|Icon|-|2.29.0|\n|content|Submenu content|-||\n|footer|Footer|-|2.10.0|\n\n\n\n\n### `<dropdown-button>` Props\n\n|Attribute|Description|Type|Default|\n|---|---|---|:---:|\n|popup-visible **(v-model)**|Whether the popup is visible|`boolean`|`-`|\n|default-popup-visible|Whether the popup is visible by default (uncontrolled mode)|`boolean`|`false`|\n|trigger|Trigger method|`'hover' \\| 'click' \\| 'focus' \\| 'contextMenu'`|`'click'`|\n|position|Popup position|`'top' \\| 'tl' \\| 'tr' \\| 'bottom' \\| 'bl' \\| 'br'`|`'br'`|\n|popup-container|Mount container for popup|`string \\| HTMLElement`|`-`|\n|disabled|Whether to disable|`boolean`|`false`|\n|type|Button type|`string`|`-`|\n|size|Button size|`string`|`-`|\n|button-props|Button props|`ButtonProps`|`-`|\n|hide-on-select|Whether to hide popup when the user selects|`boolean`|`true`|\n### `<dropdown-button>` Events\n\n|Event Name|Description|Parameters|\n|---|---|---|\n|popup-visible-change|Triggered when the display status of the drop-down box changes|visible: `boolean`|\n|click|Emitted when the button is clicked|ev: `MouseEvent`|\n|select|Triggered when the user selects|value: `string \\| number \\| Record<string, any> \\| undefined`<br>ev: `Event`|\n### `<dropdown-button>` Slots\n\n|Slot Name|Description|Parameters|\n|---|---|---|\n|icon|Button icon|popupVisible: `boolean`|\n|content|Content|-|\n\n\n"
  },
  {
    "path": "packages/web-vue/components/dropdown/README.zh-CN.md",
    "content": "```yaml\nmeta:\n  type: 组件\n  category: 导航\ntitle: 下拉菜单 Dropdown\ndescription: 页面上的命令过多时，可将备选命令收纳到向下展开的浮层容器中。\n```\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/position.md\n\n@import ./__demo__/trigger.md\n\n@import ./__demo__/button.md\n\n@import ./__demo__/group.md\n\n@import ./__demo__/submenu.md\n\n@import ./__demo__/context-menu.md\n\n@import ./__demo__/icon.md\n\n`<dropdown>` 组件继承 `<trigger>` 组件的全部属性\n\n## API\n\n\n### `<dropdown>` Props\n\n|参数名|描述|类型|默认值|版本|\n|---|---|---|:---:|:---|\n|popup-visible **(v-model)**|弹出框是否可见|`boolean`|`-`||\n|default-popup-visible|弹出框默认是否可见（非受控模式）|`boolean`|`false`||\n|trigger|触发方式|`'hover' \\| 'click' \\| 'focus' \\| 'contextMenu'`|`'click'`||\n|position|弹出位置|`'top' \\| 'tl' \\| 'tr' \\| 'bottom' \\| 'bl' \\| 'br'`|`'bottom'`||\n|popup-container|弹出框的挂载容器|`string \\| HTMLElement`|`-`||\n|popup-max-height|弹出框最大高度|`boolean\\|number`|`true`|2.29.0|\n|hide-on-select|是否在用户选择后隐藏弹出框|`boolean`|`true`|2.43.0|\n### `<dropdown>` Events\n\n|事件名|描述|参数|\n|---|---|---|\n|popup-visible-change|下拉框显示状态发生改变时触发|visible: `boolean`|\n|select|用户选择时触发|value: `string \\| number \\| Record<string, any> \\| undefined `<br>ev: `Event`|\n### `<dropdown>` Slots\n\n|插槽名|描述|参数|版本|\n|---|:---:|---|:---|\n|content|内容|-||\n|footer|页脚|-|2.10.0|\n\n\n\n\n### `<doption>` Props\n\n|参数名|描述|类型|默认值|\n|---|---|---|:---:|\n|value|选项值|`string\\|number\\|object`|`-`|\n|disabled|是否禁用|`boolean`|`false`|\n### `<doption>` Events\n\n|事件名|描述|参数|\n|---|---|---|\n|click|点击按钮时触发|ev: `MouseEvent`|\n### `<doption>` Slots\n\n|插槽名|描述|参数|\n|---|:---:|---|\n|icon|图标|-|\n\n\n\n\n### `<dgroup>` Props\n\n|参数名|描述|类型|默认值|\n|---|---|---|:---:|\n|title|分组标题|`string`|`-`|\n### `<dgroup>` Slots\n\n|插槽名|描述|参数|版本|\n|---|:---:|---|:---|\n|title|分组标题|-|2.10.0|\n\n\n\n\n### `<dsubmenu>` Props\n\n|参数名|描述|类型|默认值|版本|\n|---|---|---|:---:|:---|\n|value|选项值（2.16.0 版本后暂无用处）|`string\\|number`|`-`||\n|disabled|是否禁用|`boolean`|`false`|2.10.0|\n|trigger|触发方式|`'hover' \\| 'click'`|`'click'`|2.10.0|\n|position|弹出位置|`'rt' \\| 'lt'`|`'rt'`|2.10.0|\n|popup-visible **(v-model)**|弹出框是否可见|`boolean`|`-`||\n|default-popup-visible|弹出框默认是否可见（非受控模式）|`boolean`|`false`||\n|option-props|自定义选项属性|`object`|`-`|2.29.0|\n### `<dsubmenu>` Events\n\n|事件名|描述|参数|\n|---|---|---|\n|popup-visible-change|下拉框显示状态发生改变时触发|visible: `boolean`|\n### `<dsubmenu>` Slots\n\n|插槽名|描述|参数|版本|\n|---|:---:|---|:---|\n|icon|图标|-|2.29.0|\n|content|子菜单内容|-||\n|footer|页脚|-|2.10.0|\n\n\n\n\n### `<dropdown-button>` Props\n\n|参数名|描述|类型|默认值|\n|---|---|---|:---:|\n|popup-visible **(v-model)**|弹出框是否可见|`boolean`|`-`|\n|default-popup-visible|弹出框默认是否可见（非受控模式）|`boolean`|`false`|\n|trigger|触发方式|`'hover' \\| 'click' \\| 'focus' \\| 'contextMenu'`|`'click'`|\n|position|弹出位置|`'top' \\| 'tl' \\| 'tr' \\| 'bottom' \\| 'bl' \\| 'br'`|`'br'`|\n|popup-container|弹出框的挂载容器|`string \\| HTMLElement`|`-`|\n|disabled|是否禁用|`boolean`|`false`|\n|type|按钮类型|`string`|`-`|\n|size|按钮大小|`string`|`-`|\n|button-props|按钮属性|`ButtonProps`|`-`|\n|hide-on-select|是否在用户选择后隐藏弹出框|`boolean`|`true`|\n### `<dropdown-button>` Events\n\n|事件名|描述|参数|\n|---|---|---|\n|popup-visible-change|下拉框显示状态发生改变时触发|visible: `boolean`|\n|click|点击按钮时触发|ev: `MouseEvent`|\n|select|用户选择时触发|value: `string \\| number \\| Record<string, any> \\| undefined`<br>ev: `Event`|\n### `<dropdown-button>` Slots\n\n|插槽名|描述|参数|\n|---|:---:|---|\n|icon|按钮图标|popupVisible: `boolean`|\n|content|内容|-|\n\n\n"
  },
  {
    "path": "packages/web-vue/components/dropdown/TEMPLATE.md",
    "content": "## zh-CN\n```yaml\nmeta:\n  type: 组件\n  category: 导航\ntitle: 下拉菜单 Dropdown\ndescription: 页面上的命令过多时，可将备选命令收纳到向下展开的浮层容器中。\n```\n---\n## en-US\n```yaml\nmeta:\n  type: Component\n  category: Navigation\ntitle: Dropdown\ndescription: When there are too many commands on the page, the alternative commands can be stored in the floating container that expands downward.\n```\n---\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/position.md\n\n@import ./__demo__/trigger.md\n\n@import ./__demo__/button.md\n\n@import ./__demo__/group.md\n\n@import ./__demo__/submenu.md\n\n@import ./__demo__/context-menu.md\n\n@import ./__demo__/icon.md\n\n`<dropdown>` 组件继承 `<trigger>` 组件的全部属性\n\n## API\n\n%%API(dropdown.vue)%%\n\n%%API(dropdown-option.vue)%%\n\n%%API(dropdown-group.vue)%%\n\n%%API(dropdown-submenu.vue)%%\n\n%%API(dropdown-button.vue)%%\n"
  },
  {
    "path": "packages/web-vue/components/dropdown/__demo__/basic.md",
    "content": "```yaml\ntitle:\n  zh-CN: 基本用法\n  en-US: Basic\n```\n\n## zh-CN\n\n下拉菜单的基本用法。下拉菜单开启后会为触发元素添加 `arco-dropdown-open` 类名。\n\n---\n\n## en-US\n\nBasic usage of the drop-down menu.\n\n---\n\n```vue\n<template>\n  <a-space size=\"large\">\n    <a-dropdown @select=\"handleSelect\">\n      <a-button>Click Me</a-button>\n      <template #content>\n        <a-doption>Option 1</a-doption>\n        <a-doption disabled>Option 2</a-doption>\n        <a-doption :value=\"{ value: 'Option3' }\">Option 3</a-doption>\n      </template>\n    </a-dropdown>\n    <a-dropdown @select=\"handleSelect\" disabled>\n      <a-button disabled>Click Me</a-button>\n      <template #content>\n        <a-doption>Option 1</a-doption>\n        <a-doption disabled>Option 2</a-doption>\n        <a-doption>Option 3</a-doption>\n      </template>\n    </a-dropdown>\n    <a-dropdown @select=\"handleSelect\" :popup-max-height=\"false\">\n      <a-button>No Max Height <icon-down/></a-button>\n      <template #content>\n        <a-doption>Option 1</a-doption>\n        <a-doption disabled>Option 2</a-doption>\n        <a-doption>Option 3</a-doption>\n        <a-doption>Option 4</a-doption>\n        <a-doption>Option 5</a-doption>\n        <a-doption>Option 6</a-doption>\n        <a-doption>Option 7</a-doption>\n        <a-doption>Option 8</a-doption>\n        <a-doption>Option 9</a-doption>\n      </template>\n    </a-dropdown>\n  </a-space>\n</template>\n\n<script>\nexport default {\n  setup() {\n    const handleSelect = (v) => {\n      console.log(v)\n    };\n\n    return {\n      handleSelect\n    }\n  },\n}\n</script>\n\n<style>\n.arco-dropdown-open .arco-icon-down {\n  transform: rotate(180deg);\n}\n</style>\n```\n"
  },
  {
    "path": "packages/web-vue/components/dropdown/__demo__/button.md",
    "content": "```yaml\ntitle:\n  zh-CN: 按钮下拉框\n  en-US: Dropdown button\n```\n\n## zh-CN\n\n可以使用 `<dropdown-button>` 组件用来展示右边是额外相关功能菜单的按钮。\n`2.16.0` 版本添加支持。\n\n---\n\n## en-US\n\nThe `<dropdown-button>` component can be used to display a button with a menu of additional related functions on the right.\n`2.16.0` version added support.\n\n---\n\n```vue\n<template>\n  <a-space size=\"large\">\n    <a-dropdown-button>\n      Publish\n      <template #content>\n        <a-doption>Save now</a-doption>\n        <a-doption>Save and Publish</a-doption>\n      </template>\n    </a-dropdown-button>\n    <a-dropdown-button disabled>\n      Disabled\n      <template #content>\n        <a-doption>Save now</a-doption>\n        <a-doption>Save and Publish</a-doption>\n      </template>\n    </a-dropdown-button>\n    <a-dropdown-button>\n      Publish\n      <template #icon>\n        <icon-down />\n      </template>\n      <template #content>\n        <a-doption>Save now</a-doption>\n        <a-doption>Save and Publish</a-doption>\n      </template>\n    </a-dropdown-button>\n  </a-space>\n\n</template>\n\n<style>\n.arco-dropdown-open .arco-icon-down {\n  transform: rotate(180deg);\n}\n</style>\n```\n"
  },
  {
    "path": "packages/web-vue/components/dropdown/__demo__/context-menu.md",
    "content": "```yaml\ntitle:\n  zh-CN: 右键菜单\n  en-US: Context Menu\n```\n\n## zh-CN\n\n移入区域后，可点击鼠标右键触发。\n\n---\n\n## en-US\n\nAfter moving into the area, you can click the right mouse button to trigger.\n\n---\n\n```vue\n<template>\n  <a-dropdown trigger=\"contextMenu\" alignPoint :style=\"{display:'block'}\">\n    <div :style=\"{display:'flex',alignItems:'center',justifyContent:'center', height:'300px',backgroundColor:'var(--color-fill-2)'}\">\n      <div>Click Me</div>\n    </div>\n    <template #content>\n      <a-doption>Option 1</a-doption>\n      <a-doption>Option 2</a-doption>\n      <a-doption>Option 3</a-doption>\n    </template>\n  </a-dropdown>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/dropdown/__demo__/group.md",
    "content": "```yaml\ntitle:\n  zh-CN: 分组选项\n  en-US: Group\n```\n\n## zh-CN\n\n通过 `<dgroup>` 组件使用分组选项。\n\n---\n\n## en-US\n\nUse the grouping option through the `<dgroup>` component.\n\n---\n\n```vue\n<template>\n  <a-dropdown>\n    <a-button>Click Me</a-button>\n    <template #content>\n      <a-dgroup title=\"Group 1\">\n        <a-doption>Option 1</a-doption>\n        <a-doption>Option 2</a-doption>\n        <a-doption>Option 3</a-doption>\n      </a-dgroup>\n      <a-dgroup title=\"Group 2\">\n        <a-doption>Option 4</a-doption>\n        <a-doption>Option 5</a-doption>\n        <a-doption>Option 6</a-doption>\n      </a-dgroup>\n    </template>\n  </a-dropdown>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/dropdown/__demo__/icon.md",
    "content": "```yaml\ntitle:\n  zh-CN: 带图标的选项\n  en-US: Icon Options\n```\n\n## zh-CN\n\n通过 `icon` 插槽在选项前添加图标。\n\n---\n\n## en-US\n\nAdd an icon in front of the option via the `icon` slot.\n\n---\n\n```vue\n<template>\n  <a-dropdown>\n    <a-button>Click Me</a-button>\n    <template #content>\n      <a-doption>\n        <template #icon>\n          <icon-location />\n        </template>\n        <template #default>Option 1</template>\n      </a-doption>\n      <a-doption>\n        <template #icon>\n          <icon-location />\n        </template>\n        <template #default>Option 2</template>\n      </a-doption>\n      <a-doption>\n        <template #icon>\n          <icon-location />\n        </template>\n        <template #default>Option 3</template>\n      </a-doption>\n    </template>\n  </a-dropdown>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/dropdown/__demo__/position.md",
    "content": "```yaml\ntitle:\n  zh-CN: 弹出方向\n  en-US: Position\n```\n\n## zh-CN\n\n通过 `position` 支持指定 6 种弹出方位，分别是：top: 向上, tl: 左上, tr: 右上, bottom: 下方(默认), bl: 左下, br: 右下。\n\n---\n\n## en-US\n\nSupport to specify 6 pop-up orientations through `position`, which are: top: up, tl: top left, tr: top right, bottom: bottom (default), bl: bottom left, br: bottom right.\n\n---\n\n```vue\n<template>\n  <a-space>\n    <a-dropdown position=\"bl\">\n      <a-button>Bottom Left</a-button>\n      <template #content>\n        <a-doption>Option 1</a-doption>\n        <a-doption>Option 2</a-doption>\n        <a-doption>Option 3</a-doption>\n      </template>\n    </a-dropdown>\n    <a-dropdown position=\"bottom\">\n      <a-button>Bottom</a-button>\n      <template #content>\n        <a-doption>Option 1</a-doption>\n        <a-doption>Option 2</a-doption>\n        <a-doption>Option 3</a-doption>\n      </template>\n    </a-dropdown>\n    <a-dropdown position=\"br\">\n      <a-button>Bottom Right</a-button>\n      <template #content>\n        <a-doption>Option 1</a-doption>\n        <a-doption>Option 2</a-doption>\n        <a-doption>Option 3</a-doption>\n      </template>\n    </a-dropdown>\n    <a-dropdown position=\"tl\">\n      <a-button>Top Left</a-button>\n      <template #content>\n        <a-doption>Option 1</a-doption>\n        <a-doption>Option 2</a-doption>\n        <a-doption>Option 3</a-doption>\n      </template>\n    </a-dropdown>\n    <a-dropdown position=\"top\">\n      <a-button>Top</a-button>\n      <template #content>\n        <a-doption>Option 1</a-doption>\n        <a-doption>Option 2</a-doption>\n        <a-doption>Option 3</a-doption>\n      </template>\n    </a-dropdown>\n    <a-dropdown position=\"tr\">\n      <a-button>Top Right</a-button>\n      <template #content>\n        <a-doption>Option 1</a-doption>\n        <a-doption>Option 2</a-doption>\n        <a-doption>Option 3</a-doption>\n      </template>\n    </a-dropdown>\n  </a-space>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/dropdown/__demo__/submenu.md",
    "content": "```yaml\ntitle:\n  zh-CN: 多级菜单\n  en-US: Submenu\n```\n\n## zh-CN\n\n带有多级菜单的下拉框。\n\n---\n\n## en-US\n\nDrop-down box with multi-level menu.\n\n---\n\n```vue\n<template>\n  <a-dropdown>\n    <a-button>Click Me</a-button>\n    <template #content>\n      <a-doption>Option 1</a-doption>\n      <a-dsubmenu value=\"option-1\">\n        <template #default>Option 2</template>\n        <template #content>\n          <a-doption>Option 2-1</a-doption>\n          <a-dsubmenu value=\"option-2-2\" trigger=\"hover\">\n            <template #default>Option 2-2</template>\n            <template #content>\n              <a-doption>Option 2-1</a-doption>\n              <a-doption>Option 2-2</a-doption>\n              <a-doption>Option 2-3</a-doption>\n            </template>\n            <template #footer>\n              <div style=\"padding: 6px; text-align: center;\">\n                <a-button>Click</a-button>\n              </div>\n            </template>\n          </a-dsubmenu>\n          <a-doption>Option 2-3</a-doption>\n        </template>\n      </a-dsubmenu>\n      <a-doption>Option 3</a-doption>\n    </template>\n  </a-dropdown>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/dropdown/__demo__/trigger.md",
    "content": "```yaml\ntitle:\n  zh-CN: 触发方式\n  en-US: Trigger\n```\n\n## zh-CN\n\n通过 `trigger` 指定触发方式。\n\n---\n\n## en-US\n\nSpecify the trigger method by `trigger`.\n\n---\n\n```vue\n<template>\n  <a-space size=\"large\">\n    <a-dropdown>\n      <a-button>Click Me</a-button>\n      <template #content>\n        <a-doption>Option 1</a-doption>\n        <a-doption>Option 2</a-doption>\n        <a-doption>Option 3</a-doption>\n      </template>\n    </a-dropdown>\n    <a-dropdown trigger=\"hover\">\n      <a-button>Hover Me</a-button>\n      <template #content>\n        <a-doption>Option 1</a-doption>\n        <a-doption>Option 2</a-doption>\n        <a-doption>Option 3</a-doption>\n      </template>\n    </a-dropdown>\n  </a-space>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/dropdown/__test__/__snapshots__/demo.test.ts.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`<dropdown> demo: render [basic] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 24px; row-gap: 24px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n      <!--v-if-->Click Me\n    </button>\n    <!---->\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal arco-btn-disabled\\\\\" type=\\\\\"button\\\\\" disabled=\\\\\"\\\\\">\n      <!--v-if-->Click Me\n    </button>\n    <!---->\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n      <!--v-if-->No Max Height <svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n        <path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path>\n      </svg>\n    </button>\n    <!---->\n  </div>\n</div>\"\n`;\n\nexports[`<dropdown> demo: render [button] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 24px; row-gap: 24px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-btn-group\\\\\"><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n        <!--v-if--> Publish\n      </button><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal arco-btn-only-icon\\\\\" type=\\\\\"button\\\\\"><span class=\\\\\"arco-btn-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-more\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M38 25v-2h2v2h-2ZM23 25v-2h2v2h-2ZM8 25v-2h2v2H8Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path><path d=\\\\\"M38 25v-2h2v2h-2ZM23 25v-2h2v2h-2ZM8 25v-2h2v2H8Z\\\\\"></path></svg></span></button>\n      <!---->\n    </div>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-btn-group\\\\\"><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal arco-btn-disabled\\\\\" type=\\\\\"button\\\\\" disabled=\\\\\"\\\\\">\n        <!--v-if--> Disabled\n      </button><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal arco-btn-disabled arco-btn-only-icon\\\\\" type=\\\\\"button\\\\\" disabled=\\\\\"\\\\\"><span class=\\\\\"arco-btn-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-more\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M38 25v-2h2v2h-2ZM23 25v-2h2v2h-2ZM8 25v-2h2v2H8Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path><path d=\\\\\"M38 25v-2h2v2h-2ZM23 25v-2h2v2h-2ZM8 25v-2h2v2H8Z\\\\\"></path></svg></span></button>\n      <!---->\n    </div>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-btn-group\\\\\"><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n        <!--v-if--> Publish\n      </button><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal arco-btn-only-icon\\\\\" type=\\\\\"button\\\\\"><span class=\\\\\"arco-btn-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span></button>\n      <!---->\n    </div>\n  </div>\n</div>\"\n`;\n\nexports[`<dropdown> demo: render [context-menu] correctly 1`] = `\n\"<div style=\\\\\"display: flex; align-items: center; justify-content: center; height: 300px;\\\\\">\n  <div>Click Me</div>\n</div>\"\n`;\n\nexports[`<dropdown> demo: render [group] correctly 1`] = `\n\"<button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n  <!--v-if-->Click Me\n</button>\"\n`;\n\nexports[`<dropdown> demo: render [icon] correctly 1`] = `\n\"<button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n  <!--v-if-->Click Me\n</button>\"\n`;\n\nexports[`<dropdown> demo: render [position] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 8px; row-gap: 8px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n      <!--v-if-->Bottom Left\n    </button>\n    <!---->\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n      <!--v-if-->Bottom\n    </button>\n    <!---->\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n      <!--v-if-->Bottom Right\n    </button>\n    <!---->\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n      <!--v-if-->Top Left\n    </button>\n    <!---->\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n      <!--v-if-->Top\n    </button>\n    <!---->\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n      <!--v-if-->Top Right\n    </button>\n    <!---->\n  </div>\n</div>\"\n`;\n\nexports[`<dropdown> demo: render [submenu] correctly 1`] = `\n\"<button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n  <!--v-if-->Click Me\n</button>\"\n`;\n\nexports[`<dropdown> demo: render [trigger] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 24px; row-gap: 24px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n      <!--v-if-->Click Me\n    </button>\n    <!---->\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n      <!--v-if-->Hover Me\n    </button>\n    <!---->\n  </div>\n</div>\"\n`;\n"
  },
  {
    "path": "packages/web-vue/components/dropdown/__test__/demo.test.ts",
    "content": "import demoTest from '../../../scripts/demo-test';\n\ndemoTest('dropdown');\n"
  },
  {
    "path": "packages/web-vue/components/dropdown/context.ts",
    "content": "import { InjectionKey } from 'vue';\n\nexport interface DropdownContext {\n  popupMaxHeight: boolean | number;\n  onOptionClick: (\n    value: string | number | Record<string, unknown> | undefined,\n    ev: Event\n  ) => void;\n}\n\nexport const dropdownInjectionKey: InjectionKey<DropdownContext> =\n  Symbol('ArcoDropdown');\n"
  },
  {
    "path": "packages/web-vue/components/dropdown/dropdown-button.vue",
    "content": "<template>\n  <ButtonGroup>\n    <Button\n      :size=\"size\"\n      :type=\"type\"\n      :disabled=\"disabled\"\n      v-bind=\"buttonProps\"\n      @click=\"handleClick\"\n    >\n      <slot />\n    </Button>\n    <Dropdown\n      :popup-visible=\"computedPopupVisible\"\n      :trigger=\"trigger\"\n      :position=\"position\"\n      :popup-container=\"popupContainer\"\n      :hide-on-select=\"hideOnSelect\"\n      @select=\"handleSelect\"\n      @popup-visible-change=\"handlePopupVisibleChange\"\n    >\n      <Button :size=\"size\" :type=\"type\" :disabled=\"disabled\">\n        <template #icon>\n          <slot name=\"icon\" :popup-visible=\"computedPopupVisible\">\n            <IconMore />\n          </slot>\n        </template>\n      </Button>\n      <template #content>\n        <slot name=\"content\" />\n      </template>\n    </Dropdown>\n  </ButtonGroup>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, PropType, toRefs } from 'vue';\nimport IconMore from '../icon/icon-more';\nimport Button, { ButtonGroup, ButtonProps } from '../button';\nimport Dropdown from './dropdown.vue';\nimport { getPrefixCls } from '../_utils/global-config';\nimport { TriggerEvent } from '../_utils/constant';\nimport { useTrigger } from '../_hooks/use-trigger';\n\ntype DropdownPosition = 'top' | 'tl' | 'tr' | 'bottom' | 'bl' | 'br';\n\nexport default defineComponent({\n  name: 'DropdownButton',\n  components: {\n    IconMore,\n    Button,\n    ButtonGroup,\n    Dropdown,\n  },\n  props: {\n    /**\n     * @zh 弹出框是否可见\n     * @en Whether the popup is visible\n     * @vModel\n     */\n    popupVisible: {\n      type: Boolean,\n      default: undefined,\n    },\n    /**\n     * @zh 弹出框默认是否可见（非受控模式）\n     * @en Whether the popup is visible by default (uncontrolled mode)\n     */\n    defaultPopupVisible: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 触发方式\n     * @en Trigger method\n     * @values 'hover','click','focus','contextMenu'\n     */\n    trigger: {\n      type: [String, Array] as PropType<TriggerEvent | TriggerEvent[]>,\n      default: 'click',\n    },\n    /**\n     * @zh 弹出位置\n     * @en Popup position\n     * @values 'top','tl','tr','bottom','bl','br'\n     */\n    position: {\n      type: String as PropType<DropdownPosition>,\n      default: 'br',\n    },\n    /**\n     * @zh 弹出框的挂载容器\n     * @en Mount container for popup\n     */\n    popupContainer: {\n      type: [String, Object] as PropType<string | HTMLElement>,\n    },\n    /**\n     * @zh 是否禁用\n     * @en Whether to disable\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 按钮类型\n     * @en Button type\n     */\n    type: {\n      type: String,\n    },\n    /**\n     * @zh 按钮大小\n     * @en Button size\n     */\n    size: {\n      type: String,\n    },\n    /**\n     * @zh 按钮属性\n     * @en Button props\n     */\n    buttonProps: {\n      type: Object as PropType<ButtonProps>,\n    },\n    /**\n     * @zh 是否在用户选择后隐藏弹出框\n     * @en Whether to hide popup when the user selects\n     */\n    hideOnSelect: {\n      type: Boolean,\n      default: true,\n    },\n  },\n  emits: {\n    'update:popupVisible': (visible: boolean) => true,\n    /**\n     * @zh 下拉框显示状态发生改变时触发\n     * @en Triggered when the display status of the drop-down box changes\n     * @param {boolean} visible\n     */\n    'popupVisibleChange': (visible: boolean) => true,\n    /**\n     * @zh 点击按钮时触发\n     * @en Emitted when the button is clicked\n     * @param {MouseEvent} ev\n     */\n    'click': (ev: MouseEvent) => true,\n    /**\n     * @zh 用户选择时触发\n     * @en Triggered when the user selects\n     * @param {string | number | Record<string, any> | undefined} value\n     * @param {Event} ev\n     */\n    'select': (\n      value: string | number | Record<string, any> | undefined,\n      ev: Event\n    ) => true,\n  },\n  /**\n   * @zh 内容\n   * @en Content\n   * @slot content\n   */\n  /**\n   * @zh 按钮图标\n   * @en Button icon\n   * @slot icon\n   * @binding {boolean} popupVisible\n   */\n  setup(props, { emit }) {\n    const { defaultPopupVisible, popupVisible } = toRefs(props);\n    const prefixCls = getPrefixCls('dropdown');\n\n    const { computedPopupVisible, handlePopupVisibleChange } = useTrigger({\n      defaultPopupVisible,\n      popupVisible,\n      emit,\n    });\n\n    const handleClick = (ev: MouseEvent) => {\n      emit('click', ev);\n    };\n\n    const handleSelect = (\n      value: string | number | Record<string, unknown> | undefined,\n      ev: Event\n    ) => {\n      emit('select', value, ev);\n    };\n\n    return {\n      prefixCls,\n      computedPopupVisible,\n      handleClick,\n      handleSelect,\n      handlePopupVisibleChange,\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/dropdown/dropdown-group.vue",
    "content": "<template>\n  <li :class=\"`${prefixCls}-title`\">\n    <slot name=\"title\">\n      {{ title }}\n    </slot>\n  </li>\n  <slot />\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue';\nimport { getPrefixCls } from '../_utils/global-config';\n\nexport default defineComponent({\n  name: 'Dgroup',\n  props: {\n    /**\n     * @zh 分组标题\n     * @en Group title\n     */\n    title: String,\n  },\n  /**\n   * @zh 分组标题\n   * @en Group title\n   * @slot title\n   * @version 2.10.0\n   */\n  setup() {\n    const prefixCls = getPrefixCls('dropdown-group');\n\n    return {\n      prefixCls,\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/dropdown/dropdown-option.vue",
    "content": "<template>\n  <li\n    ref=\"liRef\"\n    :class=\"[cls, { [`${prefixCls}-has-suffix`]: Boolean($slots.suffix) }]\"\n    @click=\"handleClick\"\n  >\n    <span v-if=\"$slots.icon\" :class=\"`${prefixCls}-icon`\">\n      <slot name=\"icon\" />\n    </span>\n    <span :class=\"`${prefixCls}-content`\">\n      <slot />\n    </span>\n    <span v-if=\"$slots.suffix\" :class=\"`${prefixCls}-suffix`\">\n      <slot name=\"suffix\" />\n    </span>\n  </li>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, inject, ref } from 'vue';\nimport { getPrefixCls } from '../_utils/global-config';\nimport { dropdownInjectionKey } from './context';\n\nexport default defineComponent({\n  name: 'Doption',\n  props: {\n    /**\n     * @zh 选项值\n     * @en Value\n     */\n    value: {\n      type: [String, Number, Object],\n    },\n    /**\n     * @zh 是否禁用\n     * @en Whether to disable\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n    // private\n    active: Boolean,\n    uninjectContext: Boolean,\n  },\n  emits: {\n    /**\n     * @zh 点击按钮时触发\n     * @en Emitted when the button is clicked\n     * @param {MouseEvent} ev\n     */\n    click: (ev: MouseEvent) => true,\n  },\n  /**\n   * @zh 图标\n   * @en Icon\n   * @slot icon\n   */\n  setup(props, { emit }) {\n    const prefixCls = getPrefixCls('dropdown-option');\n    const liRef = ref<HTMLElement>();\n\n    const computedValue = computed(\n      () => props.value ?? liRef.value?.textContent ?? undefined\n    );\n\n    const dropdownCtx = !props.uninjectContext\n      ? inject(dropdownInjectionKey, undefined)\n      : undefined;\n\n    const handleClick = (ev: MouseEvent) => {\n      if (!props.disabled) {\n        emit('click', ev);\n        dropdownCtx?.onOptionClick(computedValue.value, ev);\n      }\n    };\n\n    const cls = computed(() => [\n      prefixCls,\n      {\n        [`${prefixCls}-disabled`]: props.disabled,\n        [`${prefixCls}-active`]: props.active,\n      },\n    ]);\n\n    return {\n      prefixCls,\n      cls,\n      liRef,\n      handleClick,\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/dropdown/dropdown-panel.vue",
    "content": "<template>\n  <div :class=\"cls\">\n    <div v-if=\"isEmpty\" :class=\"`${prefixCls}-empty`\">\n      <slot name=\"empty\">\n        <empty />\n      </slot>\n    </div>\n    <Scrollbar\n      ref=\"wrapperRef\"\n      :class=\"`${prefixCls}-list-wrapper`\"\n      :style=\"style\"\n      @scroll=\"handleScroll\"\n    >\n      <ul :class=\"`${prefixCls}-list`\">\n        <slot />\n      </ul>\n    </Scrollbar>\n    <div v-if=\"$slots.footer && !isEmpty\" :class=\"`${prefixCls}-footer`\">\n      <slot name=\"footer\" />\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport {\n  computed,\n  CSSProperties,\n  defineComponent,\n  inject,\n  PropType,\n  ref,\n} from 'vue';\nimport { getPrefixCls } from '../_utils/global-config';\nimport Empty from '../empty';\nimport { EmitType } from '../_utils/types';\nimport { DropdownContext, dropdownInjectionKey } from './context';\nimport { isNumber } from '../_utils/is';\nimport Scrollbar from '../scrollbar';\n\nexport default defineComponent({\n  name: 'DropdownPanel',\n  components: {\n    Scrollbar,\n    Empty,\n  },\n  props: {\n    loading: {\n      type: Boolean,\n      default: false,\n    },\n    isEmpty: {\n      type: Boolean,\n      default: false,\n    },\n    bottomOffset: {\n      type: Number,\n      default: 0,\n    },\n    onScroll: {\n      type: [Function, Array] as PropType<EmitType<(ev: Event) => void>>,\n    },\n    onReachBottom: {\n      type: [Function, Array] as PropType<EmitType<(ev: Event) => void>>,\n    },\n  },\n  emits: ['scroll', 'reachBottom'],\n  setup(props, { emit, slots }) {\n    const prefixCls = getPrefixCls('dropdown');\n    const dropdownCtx = inject<Partial<DropdownContext>>(\n      dropdownInjectionKey,\n      {}\n    );\n    const wrapperRef = ref<HTMLElement>();\n\n    const handleScroll = (e: Event) => {\n      const { scrollTop, scrollHeight, offsetHeight } = e.target as HTMLElement;\n      const bottom = scrollHeight - (scrollTop + offsetHeight);\n      if (bottom <= props.bottomOffset) {\n        emit('reachBottom', e);\n      }\n      emit('scroll', e);\n    };\n\n    const style = computed<CSSProperties | undefined>(() => {\n      if (isNumber(dropdownCtx.popupMaxHeight)) {\n        return {\n          maxHeight: `${dropdownCtx.popupMaxHeight}px`,\n        };\n      }\n      if (!dropdownCtx.popupMaxHeight) {\n        return {\n          maxHeight: 'none',\n          overflowY: 'hidden',\n        };\n      }\n      return undefined;\n    });\n\n    const cls = computed(() => [\n      prefixCls,\n      {\n        [`${prefixCls}-has-footer`]: Boolean(slots.footer),\n      },\n    ]);\n\n    return {\n      prefixCls,\n      cls,\n      style,\n      wrapperRef,\n      handleScroll,\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/dropdown/dropdown-submenu.vue",
    "content": "<template>\n  <Trigger\n    :popup-visible=\"computedPopupVisible\"\n    :trigger=\"trigger\"\n    :position=\"position\"\n    :disabled=\"disabled\"\n    :popup-offset=\"4\"\n    @popup-visible-change=\"handlePopupVisibleChange\"\n  >\n    <dropdown-option\n      v-bind=\"optionProps\"\n      :active=\"computedPopupVisible\"\n      uninject-context\n    >\n      <slot />\n      <template v-if=\"$slots.icon\" #icon>\n        <slot name=\"icon\" />\n      </template>\n      <template #suffix>\n        <slot name=\"suffix\">\n          <IconRight />\n        </slot>\n      </template>\n    </dropdown-option>\n    <template #content>\n      <dropdown-panel :class=\"`${prefixCls}-submenu`\">\n        <slot name=\"content\" />\n        <template v-if=\"$slots.footer\" #footer>\n          <slot name=\"footer\" />\n        </template>\n      </dropdown-panel>\n    </template>\n  </Trigger>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, PropType, toRefs } from 'vue';\nimport Trigger from '../trigger';\nimport DropdownPanel from './dropdown-panel.vue';\nimport DropdownOption from './dropdown-option.vue';\nimport IconRight from '../icon/icon-right';\nimport { getPrefixCls } from '../_utils/global-config';\nimport { useTrigger } from '../_hooks/use-trigger';\n\nexport default defineComponent({\n  name: 'Dsubmenu',\n  components: {\n    Trigger,\n    DropdownPanel,\n    DropdownOption,\n    IconRight,\n  },\n  props: {\n    /**\n     * @zh 选项值（2.16.0 版本后暂无用处）\n     * @en Value (Not useful after version 2.16.0)\n     */\n    value: {\n      type: [String, Number],\n    },\n    /**\n     * @zh 是否禁用\n     * @en Whether to disable\n     * @version 2.10.0\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 触发方式\n     * @en Trigger method\n     * @values 'hover','click'\n     * @version 2.10.0\n     */\n    trigger: {\n      type: [String, Array] as PropType<\n        'hover' | 'click' | ('hover' | 'click')[]\n      >,\n      default: 'click',\n    },\n    /**\n     * @zh 弹出位置\n     * @en Popup position\n     * @values 'rt','lt'\n     * @version 2.10.0\n     */\n    position: {\n      type: String as PropType<'rt' | 'lt'>,\n      default: 'rt',\n    },\n    /**\n     * @zh 弹出框是否可见\n     * @en Whether the popup is visible\n     * @vModel\n     */\n    popupVisible: {\n      type: Boolean,\n      default: undefined,\n    },\n    /**\n     * @zh 弹出框默认是否可见（非受控模式）\n     * @en Whether the popup is visible by default (uncontrolled mode)\n     */\n    defaultPopupVisible: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 自定义选项属性\n     * @en Custom option properties\n     * @version 2.29.0\n     */\n    optionProps: {\n      type: Object,\n    },\n  },\n  emits: {\n    'update:popupVisible': (visible: boolean) => true,\n    /**\n     * @zh 下拉框显示状态发生改变时触发\n     * @en Triggered when the display status of the drop-down box changes\n     * @property {boolean} visible\n     */\n    'popupVisibleChange': (visible: boolean) => true,\n  },\n  /**\n   * @zh 子菜单内容\n   * @en Submenu content\n   * @slot content\n   */\n  /**\n   * @zh 页脚\n   * @en Footer\n   * @slot footer\n   * @version 2.10.0\n   */\n  /**\n   * @zh 图标\n   * @en Icon\n   * @slot icon\n   * @version 2.29.0\n   */\n  setup(props, { emit }) {\n    const { defaultPopupVisible, popupVisible } = toRefs(props);\n    const prefixCls = getPrefixCls('dropdown');\n\n    const { computedPopupVisible, handlePopupVisibleChange } = useTrigger({\n      defaultPopupVisible,\n      popupVisible,\n      emit,\n    });\n\n    return {\n      prefixCls,\n      computedPopupVisible,\n      handlePopupVisibleChange,\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/dropdown/dropdown.vue",
    "content": "<template>\n  <Trigger\n    :popup-visible=\"computedPopupVisible\"\n    animation-name=\"slide-dynamic-origin\"\n    auto-fit-transform-origin\n    :trigger=\"trigger\"\n    :position=\"position\"\n    :popup-offset=\"4\"\n    :popup-container=\"popupContainer\"\n    :opened-class=\"`${prefixCls}-open`\"\n    @popup-visible-change=\"handlePopupVisibleChange\"\n  >\n    <slot />\n    <template #content>\n      <DropdownPanel>\n        <slot name=\"content\" />\n        <template v-if=\"$slots.footer\" #footer>\n          <slot name=\"footer\" />\n        </template>\n      </DropdownPanel>\n    </template>\n  </Trigger>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, PropType, provide, reactive, toRefs } from 'vue';\nimport { TriggerEvent } from '../_utils/constant';\nimport { getPrefixCls } from '../_utils/global-config';\nimport Trigger from '../trigger';\nimport DropdownPanel from './dropdown-panel.vue';\nimport { useTrigger } from '../_hooks/use-trigger';\nimport { dropdownInjectionKey } from './context';\nimport { DropdownPosition } from './interface';\n\nexport default defineComponent({\n  name: 'Dropdown',\n  components: {\n    Trigger,\n    DropdownPanel,\n  },\n  props: {\n    /**\n     * @zh 弹出框是否可见\n     * @en Whether the popup is visible\n     * @vModel\n     */\n    popupVisible: {\n      type: Boolean,\n      default: undefined,\n    },\n    /**\n     * @zh 弹出框默认是否可见（非受控模式）\n     * @en Whether the popup is visible by default (uncontrolled mode)\n     */\n    defaultPopupVisible: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 触发方式\n     * @en Trigger method\n     * @values 'hover','click','focus','contextMenu'\n     */\n    trigger: {\n      type: [String, Array] as PropType<TriggerEvent | TriggerEvent[]>,\n      default: 'click',\n    },\n    /**\n     * @zh 弹出位置\n     * @en Popup position\n     * @values 'top','tl','tr','bottom','bl','br'\n     */\n    position: {\n      type: String as PropType<DropdownPosition>,\n      default: 'bottom',\n    },\n    /**\n     * @zh 弹出框的挂载容器\n     * @en Mount container for popup\n     */\n    popupContainer: {\n      type: [String, Object] as PropType<string | HTMLElement>,\n    },\n    /**\n     * @zh 弹出框最大高度\n     * @en Maximum height of the popup\n     * @version 2.29.0\n     */\n    popupMaxHeight: {\n      type: [Boolean, Number],\n      default: true,\n    },\n    /**\n     * @zh 是否在用户选择后隐藏弹出框\n     * @en Whether to hide popup when the user selects\n     * @version 2.43.0\n     */\n    hideOnSelect: {\n      type: Boolean,\n      default: true,\n    },\n  },\n  emits: {\n    'update:popupVisible': (visible: boolean) => true,\n    /**\n     * @zh 下拉框显示状态发生改变时触发\n     * @en Triggered when the display status of the drop-down box changes\n     * @param {boolean} visible\n     */\n    'popupVisibleChange': (visible: boolean) => true,\n    /**\n     * @zh 用户选择时触发\n     * @en Triggered when the user selects\n     * @param {string | number | Record<string, any> | undefined } value\n     * @param {Event} ev\n     */\n    'select': (\n      value: string | number | Record<string, any> | undefined,\n      ev: Event\n    ) => true,\n  },\n  /**\n   * @zh 内容\n   * @en Content\n   * @slot content\n   */\n  /**\n   * @zh 页脚\n   * @en Footer\n   * @slot footer\n   * @version 2.10.0\n   */\n  setup(props, { emit }) {\n    const { defaultPopupVisible, popupVisible, popupMaxHeight } = toRefs(props);\n    const prefixCls = getPrefixCls('dropdown');\n\n    const { computedPopupVisible, handlePopupVisibleChange } = useTrigger({\n      defaultPopupVisible,\n      popupVisible,\n      emit,\n    });\n\n    const handleOptionClick = (\n      value: string | number | Record<string, any> | undefined,\n      ev: Event\n    ) => {\n      emit('select', value, ev);\n      props.hideOnSelect && handlePopupVisibleChange(false);\n    };\n\n    provide(\n      dropdownInjectionKey,\n      reactive({\n        popupMaxHeight,\n        onOptionClick: handleOptionClick,\n      })\n    );\n\n    return {\n      prefixCls,\n      computedPopupVisible,\n      handlePopupVisibleChange,\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/dropdown/index.ts",
    "content": "import type { App } from 'vue';\nimport type { ArcoOptions } from '../_utils/types';\nimport { setGlobalConfig, getComponentPrefix } from '../_utils/global-config';\nimport _Dropdown from './dropdown.vue';\nimport _DropdownOption from './dropdown-option.vue';\nimport _DropdownGroup from './dropdown-group.vue';\nimport _DropdownSubmenu from './dropdown-submenu.vue';\nimport _DropdownButton from './dropdown-button.vue';\n\nconst Dropdown = Object.assign(_Dropdown, {\n  Option: _DropdownOption,\n  Group: _DropdownGroup,\n  Submenu: _DropdownSubmenu,\n  Button: _DropdownButton,\n  install: (app: App, options?: ArcoOptions) => {\n    setGlobalConfig(app, options);\n    const componentPrefix = getComponentPrefix(options);\n\n    app.component(componentPrefix + _Dropdown.name, _Dropdown);\n    app.component(componentPrefix + _DropdownOption.name, _DropdownOption);\n    app.component(componentPrefix + _DropdownGroup.name, _DropdownGroup);\n    app.component(componentPrefix + _DropdownSubmenu.name, _DropdownSubmenu);\n    app.component(componentPrefix + _DropdownButton.name, _DropdownButton);\n  },\n});\n\nexport type DropdownInstance = InstanceType<typeof _Dropdown>;\nexport type DropdownOptionInstance = InstanceType<typeof _DropdownOption>;\nexport type DropdownGroupInstance = InstanceType<typeof _DropdownGroup>;\nexport type DropdownSubmenuInstance = InstanceType<typeof _DropdownSubmenu>;\nexport type DropdownButtonInstance = InstanceType<typeof _DropdownButton>;\n\nexport type {\n  DropDownProps,\n  DropdownOption,\n  DOption,\n  DGroup,\n  DSubmenu,\n} from './interface';\n\nexport {\n  _DropdownOption as Doption,\n  _DropdownGroup as Dgroup,\n  _DropdownSubmenu as Dsubmenu,\n  _DropdownButton as DropdownButton,\n};\n\nexport default Dropdown;\n"
  },
  {
    "path": "packages/web-vue/components/dropdown/interface.ts",
    "content": "import { Slot, Slots } from 'vue';\nimport { TriggerEvent, TriggerPosition } from '../_utils/constant';\n\nexport type DropdownPosition = 'top' | 'tl' | 'tr' | 'bottom' | 'bl' | 'br';\n\nexport interface DropDownProps {\n  popupVisible?: boolean;\n  defaultPopupVisible?: boolean;\n  trigger?: TriggerEvent | TriggerEvent[];\n  position?: DropdownPosition;\n  popupContainer?: string | HTMLElement;\n  popupMaxHeight?: boolean | number;\n}\n\nexport interface DOption {\n  value: string | number;\n  disabled?: boolean;\n\n  _props?: Record<string, any>;\n  _slots?: Slots;\n}\n\nexport interface DGroup {\n  isGroup: true;\n  options: DropdownOption[];\n  title?: string;\n\n  _props?: Record<string, any>;\n  _slots?: Slots;\n}\n\nexport interface DSubmenu extends DOption {\n  isSubmenu: true;\n  render: Slot;\n  children: DropdownOption[];\n  trigger?: TriggerEvent;\n  position?: TriggerPosition;\n  footer?: Slot;\n}\n\nexport type DropdownOption = DOption | DGroup | DSubmenu;\n"
  },
  {
    "path": "packages/web-vue/components/dropdown/style/index.less",
    "content": "@import '../../style/mixins/index.less';\n@import './token.less';\n\n@dropdown-prefix-cls: ~'@{prefix}-dropdown';\n\n.@{dropdown-prefix-cls} {\n  box-sizing: border-box;\n  padding: @dropdown-padding-vertical 0;\n  background-color: @dropdown-color-bg;\n  border: 1px solid @dropdown-color-border;\n  border-radius: @dropdown-border-radius;\n  box-shadow: @dropdown-box-shadow;\n\n  &-list {\n    margin-top: 0;\n    margin-bottom: 0;\n    padding-left: 0;\n    list-style: none;\n\n    &-wrapper {\n      max-height: @dropdown-max-height;\n      overflow-y: auto;\n    }\n  }\n\n  &-option {\n    position: relative;\n    // 避免 Trigger 的小箭头位于其上方\n    z-index: 1;\n    display: flex;\n    align-items: center;\n    box-sizing: border-box;\n    width: 100%;\n    padding: 0 @dropdown-option-padding-horizontal;\n\n    // default\n    color: @dropdown-option-color-text_default;\n    font-size: @dropdown-font-size;\n    line-height: @dropdown-option-height;\n    text-align: left;\n    background-color: @dropdown-option-color-bg_default;\n    cursor: pointer;\n\n    &-content {\n      .text-ellipsis();\n    }\n\n    &-has-suffix {\n      justify-content: space-between;\n    }\n\n    // hover\n    &-active,\n    &:not(&-disabled):hover {\n      color: @dropdown-option-color-text_hover;\n      background-color: @dropdown-option-color-bg_hover;\n      transition: all @transition-duration-1 @transition-timing-function-linear;\n    }\n\n    // disabled\n    &-disabled {\n      color: @dropdown-option-color-text_disabled;\n      background-color: @dropdown-option-color-bg_disabled;\n      cursor: not-allowed;\n    }\n\n    &-icon {\n      display: inline-flex;\n      margin-right: 8px;\n    }\n\n    &-suffix {\n      margin-left: @dropdown-margin-left-suffix-icon;\n    }\n  }\n\n  &-group {\n    &:first-child &-title {\n      margin-top: @dropdown-group-title-margin-top;\n    }\n\n    &-title {\n      box-sizing: border-box;\n      width: 100%;\n      margin-top: @dropdown-group-title-margin-top;\n      padding: 0 @dropdown-group-title-padding-horizontal;\n      color: @dropdown-group-title-color-text;\n      font-size: @dropdown-group-title-font-size;\n      line-height: @dropdown-group-title-height;\n      cursor: default;\n      .text-ellipsis();\n    }\n  }\n\n  &-submenu {\n    margin-top: -@dropdown-padding-vertical;\n  }\n\n  &&-has-footer {\n    padding-bottom: 0;\n  }\n\n  &-footer {\n    border-top: 1px solid @dropdown-color-border;\n  }\n}\n"
  },
  {
    "path": "packages/web-vue/components/dropdown/style/index.ts",
    "content": "import '../../style/index.less';\nimport '../../trigger/style';\nimport '../../scrollbar/style';\nimport './index.less';\n"
  },
  {
    "path": "packages/web-vue/components/dropdown/style/token.less",
    "content": "@import '../../style/theme/index.less';\n\n/**********************************************\n * Popup Box\n **********************************************/\n@dropdown-max-height: @size-50;\n@dropdown-border-radius: @radius-medium;\n@dropdown-padding-vertical: @spacing-2;\n@dropdown-font-size: @font-size-body-3;\n@dropdown-color-bg: var(--color-bg-popup);\n@dropdown-color-border: var(--color-fill-3);\n@dropdown-box-shadow: @shadow2-down;\n\n/**********************************************\n * Popup Options\n * status: default / disabled / selected / hover\n **********************************************/\n@dropdown-option-height: @size-9;\n@dropdown-option-padding-horizontal: @spacing-6;\n@dropdown-option-font-weight_selected: @font-weight-500;\n\n@dropdown-option-color-bg_default: @color-transparent;\n@dropdown-option-color-bg_hover: var(--color-fill-2);\n@dropdown-option-color-bg_selected: @color-transparent;\n@dropdown-option-color-bg_disabled: @color-transparent;\n\n@dropdown-option-color-text_default: var(--color-text-1);\n@dropdown-option-color-text_hover: var(--color-text-1);\n@dropdown-option-color-text_selected: var(--color-text-1);\n@dropdown-option-color-text_disabled: var(--color-text-4);\n\n// option group title\n@dropdown-group-title-height: @size-5;\n@dropdown-group-title-padding-horizontal: @spacing-6;\n@dropdown-group-title-padding-top: @spacing-4;\n@dropdown-group-title-margin-top: @spacing-4;\n@dropdown-group-title-font-size: @font-size-body-1;\n@dropdown-group-title-color-text: var(--color-text-3);\n\n@dropdown-margin-left-suffix-icon: @spacing-6;\n"
  },
  {
    "path": "packages/web-vue/components/dropdown/utils.ts",
    "content": "import { Slots, VNode } from 'vue';\nimport {\n  getChildrenString,\n  isArrayChildren,\n  isNamedComponent,\n  isSlotsChildren,\n  resolveProps,\n} from '../_utils/vue-utils';\nimport { DropdownOption, DGroup, DSubmenu } from './interface';\nimport { isArray, isObject } from '../_utils/is';\nimport { omit } from '../_utils/omit';\n\nexport const isGroup = (option: DropdownOption): option is DGroup => {\n  return isObject(option) && 'isGroup' in option;\n};\n\nexport const isSubmenu = (option: DropdownOption): option is DSubmenu => {\n  return isObject(option) && 'isSubmenu' in option;\n};\n\nexport const travelDropDownChildren = (children: VNode[]): DropdownOption[] => {\n  const options: DropdownOption[] = [];\n\n  for (const child of children) {\n    if (!child) continue;\n    if (isNamedComponent(child, 'Dgroup')) {\n      const props = resolveProps(child);\n      let slots: Slots | undefined;\n      const _options = [];\n\n      if (isSlotsChildren(child, child.children)) {\n        slots = child.children;\n        if (child.children.default) {\n          _options.push(...travelDropDownChildren(child.children.default()));\n        }\n      } else if (isArrayChildren(child, child.children)) {\n        _options.push(...travelDropDownChildren(child.children));\n      }\n\n      options.push({\n        _props: omit(props, ['title']),\n        _slots: slots,\n        isGroup: true,\n        title: props.title,\n        options: _options,\n      });\n    } else if (isNamedComponent(child, 'Doption')) {\n      const props = resolveProps(child);\n      let slots: Slots | undefined;\n      if (isSlotsChildren(child, child.children)) {\n        slots = child.children;\n      }\n\n      options.push({\n        _props: props,\n        _slots: slots,\n        value:\n          props.value ??\n          getChildrenString((child.children as Slots).default?.() ?? []),\n        disabled: props.disabled,\n      });\n    } else if (isNamedComponent(child, 'Dsubmenu')) {\n      const props = resolveProps(child);\n\n      options.push({\n        _props: omit(props, ['trigger', 'position', 'triggerProps']),\n        isSubmenu: true,\n        value:\n          props.value ??\n          getChildrenString((child.children as Slots).default?.() ?? []),\n        disabled: props.disabled,\n        footer: (child.children as Slots).footer,\n        render: (child.children as Slots).default,\n        trigger: props.trigger,\n        position: props.position,\n        children: travelDropDownChildren(\n          (child.children as Slots).content?.() ?? []\n        ),\n      });\n    } else if (isArrayChildren(child, child.children)) {\n      options.push(...travelDropDownChildren(child.children));\n    } else if (isSlotsChildren(child, child.children)) {\n      const _children = child.children.default?.();\n      if (_children) {\n        options.push(...travelDropDownChildren(_children));\n      }\n    } else if (isArray(child)) {\n      options.push(...travelDropDownChildren(child));\n    }\n  }\n\n  return options;\n};\n"
  },
  {
    "path": "packages/web-vue/components/empty/CHANGELOG.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.55.1\n\n`2024-03-29`\n\n### 🐛 BugFix\n\n- fix automatically inherited warn ([#3048](https://github.com/arco-design/arco-design-vue/pull/3048))\n\n\n## 2.47.0\n\n`2023-06-02`\n\n### 🆕 Feature\n\n- Add `in-config-provider` property ([#2474](https://github.com/arco-design/arco-design-vue/pull/2474))\n\n\n## 2.37.3\n\n`2022-09-23`\n\n### 💎 Enhancement\n\n- Optimize the custom display priority, the image slot is higher than the global empty slot ([#1673](https://github.com/arco-design/arco-design-vue/pull/1673))\n\n"
  },
  {
    "path": "packages/web-vue/components/empty/CHANGELOG.zh-CN.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.55.1\n\n`2024-03-29`\n\n### 🐛 问题修复\n\n- 修复属性自动继承的错误 ([#3048](https://github.com/arco-design/arco-design-vue/pull/3048))\n\n\n## 2.47.0\n\n`2023-06-02`\n\n### 🆕 新增功能\n\n- 增加 `in-config-provider` 属性 ([#2474](https://github.com/arco-design/arco-design-vue/pull/2474))\n\n\n## 2.37.3\n\n`2022-09-23`\n\n### 💎 功能优化\n\n- 优化自定义显示优先级，image 插槽高于全局 empty 插槽 ([#1673](https://github.com/arco-design/arco-design-vue/pull/1673))\n\n"
  },
  {
    "path": "packages/web-vue/components/empty/README.en-US.md",
    "content": "```yaml\nmeta:\n  type: Component\n  category: Data Display\ntitle: Empty\ndescription: Refers to a state in which the current scene has no corresponding data content.\n```\n\n*Auto translate by google.*\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/custom.md\n\n## API\n\n\n### `<empty>` Props\n\n|Attribute|Description|Type|Default|version|\n|---|---|---|:---:|:---|\n|description|Description|`string`|`-`||\n|img-src|The src of the Custom Image|`string`|`-`||\n|in-config-provider|Whether to use in ConfigProvider|`boolean`|`false`|2.47.0|\n### `<empty>` Slots\n\n|Slot Name|Description|Parameters|\n|---|---|---|\n|image|Image/Icon|-|\n\n\n"
  },
  {
    "path": "packages/web-vue/components/empty/README.zh-CN.md",
    "content": "```yaml\nmeta:\n  type: 组件\n  category: 数据展示\ntitle: 空状态 Empty\ndescription: 指当前场景没有对应的数据内容，呈现出的一种状态。\n```\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/custom.md\n\n## API\n\n\n### `<empty>` Props\n\n|参数名|描述|类型|默认值|版本|\n|---|---|---|:---:|:---|\n|description|描述内容|`string`|`-`||\n|img-src|自定义图片的地址|`string`|`-`||\n|in-config-provider|是否在 ConfigProvider 中使用|`boolean`|`false`|2.47.0|\n### `<empty>` Slots\n\n|插槽名|描述|参数|\n|---|:---:|---|\n|image|图片/图标|-|\n\n\n"
  },
  {
    "path": "packages/web-vue/components/empty/TEMPLATE.md",
    "content": "## zh-CN\n```yaml\nmeta:\n  type: 组件\n  category: 数据展示\ntitle: 空状态 Empty\ndescription: 指当前场景没有对应的数据内容，呈现出的一种状态。\n```\n---\n## en-US\n```yaml\nmeta:\n  type: Component\n  category: Data Display\ntitle: Empty\ndescription: Refers to a state in which the current scene has no corresponding data content.\n```\n---\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/custom.md\n\n## API\n\n%%API(empty.tsx)%%\n"
  },
  {
    "path": "packages/web-vue/components/empty/__demo__/basic.md",
    "content": "```yaml\ntitle:\n  zh-CN: 基本用法\n  en-US: Basic\n```\n\n## zh-CN\n\n空状态组件的基本用法。\n\n---\n\n## en-US\n\nBasic usage of empty component.\n\n---\n\n```vue\n<template>\n  <a-empty />\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/empty/__demo__/custom.md",
    "content": "```yaml\ntitle:\n  zh-CN: 自定义图片和文案\n  en-US: Custom Image & Description\n```\n\n## zh-CN\n\n通过 `image` 插槽自定义图标、图片，或通过内容修改文案。\n\n---\n\n## en-US\n\nCustomize icons and pictures through the `image` slot, or modify the text through the content.\n\n---\n\n```vue\n<template>\n  <a-empty>\n    <template #image>\n      <icon-exclamation-circle-fill />\n    </template>\n    No data, please reload!\n  </a-empty>\n</template>\n\n<script>\nimport { IconExclamationCircleFill } from '@arco-design/web-vue/es/icon';\n\nexport default {\n  components: {\n    IconExclamationCircleFill\n  },\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/empty/__test__/__snapshots__/demo.test.ts.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`<empty> demo: render [basic] correctly 1`] = `\n\"<div class=\\\\\"arco-empty\\\\\">\n  <div class=\\\\\"arco-empty-image\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-empty\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n      <path d=\\\\\"M24 5v6m7 1 4-4m-18 4-4-4m28.5 22H28s-1 3-4 3-4-3-4-3H6.5M40 41H8a2 2 0 0 1-2-2v-8.46a2 2 0 0 1 .272-1.007l6.15-10.54A2 2 0 0 1 14.148 18H33.85a2 2 0 0 1 1.728.992l6.149 10.541A2 2 0 0 1 42 30.541V39a2 2 0 0 1-2 2Z\\\\\"></path>\n    </svg></div>\n  <div class=\\\\\"arco-empty-description\\\\\">暂无数据</div>\n</div>\"\n`;\n\nexports[`<empty> demo: render [custom] correctly 1`] = `\n\"<div class=\\\\\"arco-empty\\\\\">\n  <div class=\\\\\"arco-empty-image\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-exclamation-circle-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n      <path fill-rule=\\\\\"evenodd\\\\\" clip-rule=\\\\\"evenodd\\\\\" d=\\\\\"M24 44c11.046 0 20-8.954 20-20S35.046 4 24 4 4 12.954 4 24s8.954 20 20 20Zm-2-11a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1v2Zm4-18a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V15Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n    </svg></div>\n  <div class=\\\\\"arco-empty-description\\\\\"> No data, please reload! </div>\n</div>\"\n`;\n"
  },
  {
    "path": "packages/web-vue/components/empty/__test__/demo.test.ts",
    "content": "import demoTest from '../../../scripts/demo-test';\n\ndemoTest('empty');\n"
  },
  {
    "path": "packages/web-vue/components/empty/empty.tsx",
    "content": "import { defineComponent, inject } from 'vue';\nimport { getPrefixCls } from '../_utils/global-config';\nimport IconEmpty from '../icon/icon-empty';\nimport { useI18n } from '../locale';\nimport { configProviderInjectionKey } from '../config-provider/context';\n\nexport default defineComponent({\n  name: 'Empty',\n  inheritAttrs: false,\n  props: {\n    /**\n     * @zh 描述内容\n     * @en Description\n     */\n    description: String,\n    /**\n     * @zh 自定义图片的地址\n     * @en The src of the Custom Image\n     */\n    imgSrc: String,\n    /**\n     * @zh 是否在 ConfigProvider 中使用\n     * @en Whether to use in ConfigProvider\n     * @version 2.47.0\n     */\n    inConfigProvider: {\n      type: Boolean,\n      default: false,\n    },\n  },\n  /**\n   * @zh 图片/图标\n   * @en Image/Icon\n   * @slot image\n   */\n  setup(props, { slots, attrs }) {\n    const prefixCls = getPrefixCls('empty');\n    const { t } = useI18n();\n    const configCtx = inject(configProviderInjectionKey, undefined);\n\n    return () => {\n      if (\n        !props.inConfigProvider &&\n        configCtx?.slots.empty &&\n        !(slots.image || props.imgSrc || props.description)\n      ) {\n        return configCtx.slots.empty({ component: 'empty' });\n      }\n\n      return (\n        <div class={prefixCls} {...attrs}>\n          <div class={`${prefixCls}-image`}>\n            {slots.image?.() ??\n              (props.imgSrc ? (\n                <img src={props.imgSrc} alt={props.description || 'empty'} />\n              ) : (\n                <IconEmpty />\n              ))}\n          </div>\n          <div class={`${prefixCls}-description`}>\n            {slots.default?.() ?? (props.description || t('empty.description'))}\n          </div>\n        </div>\n      );\n    };\n  },\n});\n"
  },
  {
    "path": "packages/web-vue/components/empty/index.ts",
    "content": "import type { App } from 'vue';\nimport type { ArcoOptions } from '../_utils/types';\nimport { setGlobalConfig, getComponentPrefix } from '../_utils/global-config';\nimport _Empty from './empty';\n\nconst Empty = Object.assign(_Empty, {\n  install: (app: App, options?: ArcoOptions) => {\n    setGlobalConfig(app, options);\n    const componentPrefix = getComponentPrefix(options);\n\n    app.component(componentPrefix + _Empty.name, _Empty);\n  },\n});\n\nexport type EmptyInstance = InstanceType<typeof _Empty>;\n\nexport default Empty;\n"
  },
  {
    "path": "packages/web-vue/components/empty/style/index.less",
    "content": "@import './token.less';\n\n@empty-prefix-cls: ~'@{prefix}-empty';\n\n.@{empty-prefix-cls} {\n  box-sizing: border-box;\n  width: 100%;\n  padding: @empty-spacing-padding 0;\n  text-align: center;\n\n  &-image {\n    margin-bottom: @empty-spacing-image-margin-bottom;\n    color: @empty-color-icon;\n    font-size: @empty-font-size-image;\n    line-height: 1;\n\n    img {\n      height: @empty-size-img-height;\n    }\n  }\n\n  & &-description {\n    color: @empty-color-text;\n    font-size: @empty-font-size-text;\n  }\n}\n"
  },
  {
    "path": "packages/web-vue/components/empty/style/index.ts",
    "content": "import '../../style/index.less';\nimport './index.less';\n"
  },
  {
    "path": "packages/web-vue/components/empty/style/token.less",
    "content": "@import '../../style/theme/index.less';\n\n@empty-spacing-padding: @spacing-5;\n@empty-color-text: rgb(var(~'@{arco-cssvars-prefix}-gray-5'));\n@empty-font-size-image: @size-12;\n@empty-spacing-image-margin-bottom: @spacing-2;\n@empty-size-img-height: @size-20;\n\n@empty-color-icon: rgb(var(~'@{arco-cssvars-prefix}-gray-5'));\n@empty-font-size-text: @font-size-body-3;\n"
  },
  {
    "path": "packages/web-vue/components/form/CHANGELOG.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.57.0\n\n`2025-03-10`\n\n### 🐛 BugFix\n\n- fix where form id attribute was consumed and could not be propagated ([#3450](https://github.com/arco-design/arco-design-vue/pull/3450))\n\n\n## 2.54.0\n\n`2023-12-15`\n\n\n## 2.51.2\n\n`2023-09-15`\n\n### 🐛 BugFix\n\n- scroll-to-first-error throws error in nested form items ([#2707](https://github.com/arco-design/arco-design-vue/pull/2707))\n\n\n## 2.51.0\n\n`2023-09-01`\n\n### 🆕 Feature\n\n- add scroll into view to the field ([#2680](https://github.com/arco-design/arco-design-vue/pull/2680))\n\n\n## 2.44.2\n\n`2023-03-17`\n\n### 🐛 BugFix\n\n- Fix the problem that the array format is not supported in the field attribute ([#2242](https://github.com/arco-design/arco-design-vue/pull/2242))\n\n### 💎 Enhancement\n\n- Add Chinese inspection information ([#2240](https://github.com/arco-design/arco-design-vue/pull/2240))\n\n\n## 2.43.2\n\n`2023-02-24`\n\n### 🐛 BugFix\n\n- Fix invalidation of validateStatus of FormItem ([#2158](https://github.com/arco-design/arco-design-vue/pull/2158))\n\n\n## 2.41.0\n\n`2022-12-30`\n\n### 🆕 Feature\n\n- `form-item` supports tooltip property ([#1991](https://github.com/arco-design/arco-design-vue/pull/1991))\n- `form-item` supports asteriskPosition property ([#1991](https://github.com/arco-design/arco-design-vue/pull/1991))\n\n\n## 2.40.0\n\n`2022-12-09`\n\n### 🐛 BugFix\n\n- Fix the bug that `validate-status` attribute of `Form` component does not take effect in `date-picker` component. ([#1928](https://github.com/arco-design/arco-design-vue/pull/1928))\n\n\n## 2.38.0\n\n`2022-10-28`\n\n### 🐛 BugFix\n\n- Do not modify the original object data of the rule ([#1779](https://github.com/arco-design/arco-design-vue/pull/1779))\n\n\n## 2.33.1\n\n`2022-07-22`\n\n### 🐛 BugFix\n\n- Fix form-item content may exceed limit width ([#1437](https://github.com/arco-design/arco-design-vue/pull/1437))\n\n\n## 2.31.0\n\n`2022-06-17`\n\n### 🆕 Feature\n\n- Added parameter support for resetFields and clearValidate methods ([#1305](https://github.com/arco-design/arco-design-vue/pull/1305))\n\n\n## 2.22.0\n\n`2022-04-01`\n\n### 🆕 Feature\n\n- Rendering elements that support modifying form item labels ([#919](https://github.com/arco-design/arco-design-vue/pull/919))\n\n### 💅 Style\n\n- Form item content style increases maximum width to prevent overflow ([#919](https://github.com/arco-design/arco-design-vue/pull/919))\n\n\n## 2.20.1\n\n`2022-03-21`\n\n### 💅 Style\n\n- Fix `form-item` asterisk compatibility with windicss ([#854](https://github.com/arco-design/arco-design-vue/pull/854))\n\n\n## 2.19.0\n\n`2022-03-11`\n\n### 🐛 BugFix\n\n- Fix the problem that the `field` property of `form-item` is invalid when there is an array in it ([#807](https://github.com/arco-design/arco-design-vue/pull/807))\n- Fixed the issue that some component functions are still available after `disabled` is enabled ([#807](https://github.com/arco-design/arco-design-vue/pull/807))\n\n\n## 2.18.0\n\n`2022-03-04`\n\n### 🐛 BugFix\n\n- Fix the problem of reset method invalid in nested data ([#768](https://github.com/arco-design/arco-design-vue/pull/768))\n\n\n## 2.18.0-beta.2\n\n`2022-02-25`\n\n### 💎 Enhancement\n\n- When `auto-label-width` is enabled, label wrapping is not allowed to prevent calculation errors after wrapping ([#738](https://github.com/arco-design/arco-design-vue/pull/738))\n\n### 🆕 Feature\n\n- Validated error info add label property ([#724](https://github.com/arco-design/arco-design-vue/pull/724))\n\n\n## 2.18.0-beta.1\n\n`2022-02-18`\n\n### ⚠️ Important Attention\n\n- <form-item> component refactoring to use context to manage input components. If the user has a custom input component, you can refer to the `custom input component` example to change. ([#697](https://github.com/arco-design/arco-design-vue/pull/697))\n\n\n## 2.16.0\n\n`2022-01-21`\n\n### 🆕 Feature\n\n- Added feedback icon function for forms and corresponding input components ([#622](https://github.com/arco-design/arco-design-vue/pull/622))\n\n\n## 2.14.2\n\n`2022-01-10`\n\n### 🐛 BugFix\n\n- Label-col uses flex layout to solve the problem of wrong height under mini size ([#536](https://github.com/arco-design/arco-design-vue/pull/536))\n\n\n## 2.14.1\n\n`2022-01-08`\n\n### 🐛 BugFix\n\n- Fix the problem of the default size and style of the form ([#526](https://github.com/arco-design/arco-design-vue/pull/526))\n\n\n## 2.13.0\n\n`2021-12-31`\n\n### ⚠️ Important Attention\n\n- The `form-item` component adds a new `content-wrapper` div element to wrap the original `content` div element to support the new layout ([#488](https://github.com/arco-design/arco-design-vue/pull/488))\n\n### 🆕 Feature\n\n- Added `autoLabelWidth` property to support adaptive label width ([#486](https://github.com/arco-design/arco-design-vue/pull/486))\n- Added `labelColFlex` property to support label width setting ([#486](https://github.com/arco-design/arco-design-vue/pull/486))\n- Add `mergeProps` attribute, support custom attributes and event override ([#486](https://github.com/arco-design/arco-design-vue/pull/486))\n\n### 🐛 BugFix\n\n- Fix the problem that the help content of the form item is displayed incorrectly ([#480](https://github.com/arco-design/arco-design-vue/pull/480))\n\n\n## 2.10.0\n\n`2021-12-10`\n\n### 🆕 Feature\n\n- `form-item` adds layout and class name related attributes ([#361](https://github.com/arco-design/arco-design-vue/pull/361))\n\n\n## 2.8.0\n\n`2021-12-01`\n\n### 🐛 BugFix\n\n- Fix the problem of invalid setting of null value in `setFields` method ([#311](https://github.com/arco-design/arco-design-vue/pull/311))\n\n\n## 2.7.0\n\n`2021-11-26`\n\n### 🆕 Feature\n\n- Add `rules` prop ([#271](https://github.com/arco-design/arco-design-vue/pull/271))\n\n\n## 2.6.1\n\n`2021-11-24`\n\n### 🐛 BugFix\n\n- Fix the problem that the additional content style of the form does not take effect ([#208](https://github.com/arco-design/arco-design-vue/pull/208))\n\n\n## 2.4.0\n\n`2021-11-17`\n\n### 🐛 BugFix\n\n- Fix the problem that the input of null in the `filed` field causes an error to be reported ([#173](https://github.com/arco-design/arco-design-vue/pull/173))\n\n\n## 2.3.0\n\n`2021-11-12`\n\n### 🆕 Feature\n\n- Add `setFields` method ([#150](https://github.com/arco-design/arco-design-vue/pull/150))\n\n\n## 2.1.0\n\n`2021-11-05`\n\n### 🆕 Feature\n\n- Add `hideAsterisk` prop ([#94](https://github.com/arco-design/arco-design-vue/pull/94))\n\n"
  },
  {
    "path": "packages/web-vue/components/form/CHANGELOG.zh-CN.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.57.0\n\n`2025-03-10`\n\n### 🐛 问题修复\n\n- 修复表单 `id` 属性被消费无法透传问题 ([#3450](https://github.com/arco-design/arco-design-vue/pull/3450))\n\n\n## 2.54.0\n\n`2023-12-15`\n\n\n## 2.51.2\n\n`2023-09-15`\n\n### 🐛 问题修复\n\n- 修复field为数组对象时滚动报错问题 ([#2707](https://github.com/arco-design/arco-design-vue/pull/2707))\n\n\n## 2.51.0\n\n`2023-09-01`\n\n### 🆕 新增功能\n\n- 新增滚动到指定表单字段 ([#2680](https://github.com/arco-design/arco-design-vue/pull/2680))\n\n\n## 2.44.2\n\n`2023-03-17`\n\n### 🐛 问题修复\n\n- 修复 field 属性中对数组格式不支持的问题 ([#2242](https://github.com/arco-design/arco-design-vue/pull/2242))\n\n### 💎 功能优化\n\n- 增加中文检验信息 ([#2240](https://github.com/arco-design/arco-design-vue/pull/2240))\n\n\n## 2.43.2\n\n`2023-02-24`\n\n### 🐛 问题修复\n\n- 修复 FormItem 的 validateStatus 失效问题 ([#2158](https://github.com/arco-design/arco-design-vue/pull/2158))\n\n\n## 2.41.0\n\n`2022-12-30`\n\n### 🆕 新增功能\n\n- `form-item` 支持 tooltip 属性 ([#1991](https://github.com/arco-design/arco-design-vue/pull/1991))\n- `form-item` 支持 asteriskPosition 属性 ([#1991](https://github.com/arco-design/arco-design-vue/pull/1991))\n\n\n## 2.40.0\n\n`2022-12-09`\n\n### 🐛 问题修复\n\n- 修复 `Form` 组件的 `validate-status` 属性在 `date-picker` 组件不生效的 bug。 ([#1928](https://github.com/arco-design/arco-design-vue/pull/1928))\n\n\n## 2.38.0\n\n`2022-10-28`\n\n### 🐛 问题修复\n\n- 不修改规则原始对象数据 ([#1779](https://github.com/arco-design/arco-design-vue/pull/1779))\n\n\n## 2.33.1\n\n`2022-07-22`\n\n### 🐛 问题修复\n\n- 修复 form-item 内容可能超出限制宽度的问题 ([#1437](https://github.com/arco-design/arco-design-vue/pull/1437))\n\n\n## 2.31.0\n\n`2022-06-17`\n\n### 🆕 新增功能\n\n- resetFields 和  clearValidate 方法增加参数支持 ([#1305](https://github.com/arco-design/arco-design-vue/pull/1305))\n\n\n## 2.22.0\n\n`2022-04-01`\n\n### 🆕 新增功能\n\n- 支持修改表单项标签的渲染元素 ([#919](https://github.com/arco-design/arco-design-vue/pull/919))\n\n### 💅 样式更新\n\n- 表单项内容样式增加最大宽度，防止溢出 ([#919](https://github.com/arco-design/arco-design-vue/pull/919))\n\n\n## 2.20.1\n\n`2022-03-21`\n\n### 💅 样式更新\n\n- 修复 `form-item` 星号与 windicss 的兼容问题 ([#854](https://github.com/arco-design/arco-design-vue/pull/854))\n\n\n## 2.19.0\n\n`2022-03-11`\n\n### 🐛 问题修复\n\n- 修复 `form-item` 的 `field` 属性中存在数组时失效的问题 ([#807](https://github.com/arco-design/arco-design-vue/pull/807))\n- 修复 `disabled` 开启后，部分组件功能仍可用问题 ([#807](https://github.com/arco-design/arco-design-vue/pull/807))\n\n\n## 2.18.0\n\n`2022-03-04`\n\n### 🐛 问题修复\n\n- 修复嵌套数据中重置方法失效的问题 ([#768](https://github.com/arco-design/arco-design-vue/pull/768))\n\n\n## 2.18.0-beta.2\n\n`2022-02-25`\n\n### 💎 功能优化\n\n- `auto-label-width` 开启时不在允许标签换行，防止换行后计算错误 ([#738](https://github.com/arco-design/arco-design-vue/pull/738))\n\n### 🆕 新增功能\n\n- 校验错误信息新增 label 属性 ([#724](https://github.com/arco-design/arco-design-vue/pull/724))\n\n\n## 2.18.0-beta.1\n\n`2022-02-18`\n\n### ⚠️ 重点注意\n\n- <form-item> 组件重构，使用 context 管理输入组件。如果用户存在自定义输入组件，可参考 `自定义输入组件` 示例更改。 ([#697](https://github.com/arco-design/arco-design-vue/pull/697))\n\n\n## 2.16.0\n\n`2022-01-21`\n\n### 🆕 新增功能\n\n- 增加表单和相应输入组件的反馈图标功能 ([#622](https://github.com/arco-design/arco-design-vue/pull/622))\n\n\n## 2.14.2\n\n`2022-01-10`\n\n### 🐛 问题修复\n\n- label-col 改用 flex 布局，解决 mini 尺寸下高度错误的问题 ([#536](https://github.com/arco-design/arco-design-vue/pull/536))\n\n\n## 2.14.1\n\n`2022-01-08`\n\n### 🐛 问题修复\n\n- 修复form默认大小样式问题 ([#526](https://github.com/arco-design/arco-design-vue/pull/526))\n\n\n## 2.13.0\n\n`2021-12-31`\n\n### ⚠️ 重点注意\n\n- `form-item` 组件增加一个新的 `content-wrapper` div 元素包裹原先 `content` div 元素，以来支持新的布局方式 ([#488](https://github.com/arco-design/arco-design-vue/pull/488))\n\n### 🆕 新增功能\n\n- 增加 `autoLabelWidth` 属性，支持标签宽度自适应 ([#486](https://github.com/arco-design/arco-design-vue/pull/486))\n- 增加 `labelColFlex` 属性，支持标签宽度设置 ([#486](https://github.com/arco-design/arco-design-vue/pull/486))\n- 增加 `mergeProps` 属性，支持自定义属性和事件覆写 ([#486](https://github.com/arco-design/arco-design-vue/pull/486))\n\n### 🐛 问题修复\n\n- 修复表单项 help 内容显示错误的问题 ([#480](https://github.com/arco-design/arco-design-vue/pull/480))\n\n\n## 2.10.0\n\n`2021-12-10`\n\n### 🆕 新增功能\n\n- `form-item` 增加布局和类名相关属性 ([#361](https://github.com/arco-design/arco-design-vue/pull/361))\n\n\n## 2.8.0\n\n`2021-12-01`\n\n### 🐛 问题修复\n\n- 修复 `setFields` 方法设定空值失效的问题 ([#311](https://github.com/arco-design/arco-design-vue/pull/311))\n\n\n## 2.7.0\n\n`2021-11-26`\n\n### 🆕 新增功能\n\n- 增加 `rules` 属性 ([#271](https://github.com/arco-design/arco-design-vue/pull/271))\n\n\n## 2.6.1\n\n`2021-11-24`\n\n### 🐛 问题修复\n\n- 修复表单附加内容样式没生效的问题 ([#208](https://github.com/arco-design/arco-design-vue/pull/208))\n\n\n## 2.4.0\n\n`2021-11-17`\n\n### 🐛 问题修复\n\n- 修复 `filed` 字段传入 null 导致报错的问题 ([#173](https://github.com/arco-design/arco-design-vue/pull/173))\n\n\n## 2.3.0\n\n`2021-11-12`\n\n### 🆕 新增功能\n\n- 增加 `setFields` 方法 ([#150](https://github.com/arco-design/arco-design-vue/pull/150))\n\n\n## 2.1.0\n\n`2021-11-05`\n\n### 🆕 新增功能\n\n- 增加 `hideAsterisk ` 功能 ([#94](https://github.com/arco-design/arco-design-vue/pull/94))\n\n"
  },
  {
    "path": "packages/web-vue/components/form/README.en-US.md",
    "content": "```yaml\nmeta:\n  type: Component\n  category: Data Entry\ntitle: Form\ndescription: A form with data collection, verification and submission functions, including checkboxes, radio buttons, input boxes, drop-down selection boxes and other elements.\n```\n\n*Auto translate by google.*\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/layout.md\n\n@import ./__demo__/extra.md\n\n@import ./__demo__/nest.md\n\n@import ./__demo__/grid.md\n\n@import ./__demo__/auto-width.md\n\n@import ./__demo__/validation.md\n\n@import ./__demo__/validation2.md\n\n@import ./__demo__/status.md\n\n@import ./__demo__/dynamic.md\n\n@import ./__demo__/disabled.md\n\n@import ./__demo__/async.md\n\n@import ./__demo__/custom.md\n\n@import ./__demo__/scroll.md\n\n## API\n\n\n### `<form>` Props\n\n|Attribute|Description|Type|Default|version|\n|---|---|---|:---:|:---|\n|model **(required)**|Form data object|`object`|`-`||\n|layout|The layout of the form, including horizontal, vertical, and multi-column|`'horizontal' \\| 'vertical' \\| 'inline'`|`'horizontal'`||\n|size|The size of the form|`'mini' \\| 'small' \\| 'medium' \\| 'large'`|`'medium'`||\n|label-col-props|Label element layout options. The parameters are the same as the `<col>` component|`object`|` span: 5, offset: 0 `||\n|wrapper-col-props|Form control layout options. The parameters are the same as the `<col>` component|`object`|` span: 19, offset: 0 `||\n|label-align|Alignment direction of the label|`'left' \\| 'right'`|`'right'`||\n|disabled|Whether to disable the form|`boolean`|`-`||\n|rules|Form item validation rules|`Record<string, FieldRule \\| FieldRule[]>`|`-`||\n|auto-label-width|Whether to enable automatic label width, it only takes effect under `layout=\"horizontal\"`.|`boolean`|`false`|2.13.0|\n|id|Form `id` attribute and form control `id` prefix|`string`|`-`||\n|scroll-to-first-error|Scroll to the first error field after verification fails|`boolean`|`false`|2.51.0|\n### `<form>` Events\n\n|Event Name|Description|Parameters|\n|---|---|---|\n|submit|Triggered when the form is submitted|data: `{values: Record<string, any>; errors: Record<string, ValidatedError> \\| undefined}`<br>ev: `Event`|\n|submit-success|Triggered when verification is successful|values: `Record<string, any>`<br>ev: `Event`|\n|submit-failed|Triggered when verification failed|data: `{values: Record<string, any>; errors: Record<string, ValidatedError>}`<br>ev: `Event`|\n### `<form>` Methods\n\n|Method|Description|Parameters|Return|version|\n|---|---|---|:---:|:---|\n|validate|Verify all form data|callback: `(errors: undefined \\| Record<string, ValidatedError>) => void`|Promise<undefined \\| Record<string, ValidatedError>>||\n|validateField|Validate part of the form data|field: `string \\| string[]`<br>callback: `(errors: undefined \\| Record<string, ValidatedError>) => void`|Promise<undefined \\| Record<string, ValidatedError>>||\n|resetFields|Reset form data|field: `string \\| string[]`|-||\n|clearValidate|Clear verification status|field: `string \\| string[]`|-||\n|setFields|Set the value and status of the form item|data: `Record<string, FieldData>`|-||\n|scrollToField|Scroll to the specified form item|field: `string`|-|2.51.0|\n\n\n\n\n### `<form-item>` Props\n\n|Attribute|Description|Type|Default|version|\n|---|---|---|:---:|:---|\n|field|The path of the form element in the data object (required for the data item)|`string`|`''`||\n|label|Label text|`string`|`-`||\n|tooltip|Tooltip text|`string`|`-`|2.41.0|\n|show-colon|Whether to show a colon|`boolean`|`false`||\n|no-style|Whether to remove the style|`boolean`|`false`||\n|disabled|Whether to disable|`boolean`|`-`||\n|help|Help copywriting|`string`|`-`||\n|extra|Additional display copy|`string`|`-`||\n|required|Is it required|`boolean`|`false`||\n|asterisk-position|Optionally place an asterisk before/after the label|`'start' \\| 'end'`|`'start'`|2.41.0|\n|rules|Form item validation rules (The priority is higher than the rules of form)|`FieldRule \\| FieldRule[]`|`-`||\n|validate-status|Validate status|`'success' \\| 'warning' \\| 'error' \\| 'validating'`|`-`||\n|validate-trigger|The event that triggers the verification|`'change' \\| 'input' \\| 'focus' \\| 'blur'`|`'change'`||\n|label-col-props|Label element layout options. The parameters are the same as the `<col>` component|`object`|`-`||\n|wrapper-col-props|Form control layout options. The parameters are the same as the `<col>` component|`object`|`-`||\n|hide-label|Whether to hide the label|`boolean`|`false`||\n|hide-asterisk|Whether to hide the asterisk|`boolean`|`false`||\n|label-col-style|The style of the label element layout component|`object`|`-`|2.10.0|\n|wrapper-col-style|The style of the form control layout component|`object`|`-`|2.10.0|\n|row-props|Form item layout options. The parameters are the same as the `<row>` component|`object`|`-`|2.10.0|\n|row-class|The class of the form item layout component|`string\\|array\\|object`|`-`|2.10.0|\n|content-class|The class of the form control wrapping layer|`string\\|array\\|object`|`-`|2.10.0|\n|content-flex|Whether to enable flex layout in the content layer|`boolean`|`true`|2.13.0|\n|merge-props|(Repealed) Control the Props passed to the child element. The default includes disabled, error, size, events and additional attributes on FormItem. Version 2.18.0 deprecated|`boolean \\| ((props: Record<string, any>) => Record<string, any>)`|`true`|2.13.0|\n|label-col-flex|Set the flex property of the label `Col` component. When set, the flex property of the form `Col` component will be set to `auto`.|`number\\|string`|`-`|2.13.0|\n|feedback|Whether to show the feedback icon for the form control|`boolean`|`false`|2.16.0|\n|label-component|The element that the form item label renders|`string`|`'label'`|2.22.0|\n|label-attrs|Attributes of the form item element|`object`|`-`|2.22.0|\n### `<form-item>` Slots\n\n|Slot Name|Description|Parameters|\n|---|---|---|\n|label|Label|-|\n|help|Help message|-|\n|extra|Extra content|-|\n\n\n\n## Type\n\n\n### FieldRule\n\n|Name|Description|Type|Default|\n|---|---|---|:---:|\n|type|The type of the value to be checked, the default is `'string'`|`'string'    \\| 'number'    \\| 'boolean'    \\| 'array'    \\| 'object'    \\| 'email'    \\| 'url'    \\| 'ip'`|`-`|\n|required|Is it required|`boolean`|`false`|\n|message|Information displayed when verification fails|`string`|`-`|\n|length|Check length (string, array)|`number`|`-`|\n|maxLength|Maximum length (string)|`number`|`-`|\n|minLength|Minimum length (string)|`number`|`-`|\n|match|Match check (string)|`RegExp`|`-`|\n|uppercase|Uppercase (string)|`boolean`|`false`|\n|lowercase|Lowercase (string)|`boolean`|`false`|\n|min|Minimum (number)|`number`|`-`|\n|max|Maximum (number)|`number`|`-`|\n|equal|Check value (number)|`number`|`-`|\n|positive|Positive number (number)|`boolean`|`false`|\n|negative|Negative number (number)|`boolean`|`false`|\n|true|Whether it is `true` (boolean)|`boolean`|`false`|\n|false|Whether it is `false` (boolean)|`boolean`|`false`|\n|includes|Does the array contain the given value (array)|`any[]`|`-`|\n|deepEqual|Are array elements equal (array)|`any`|`-`|\n|empty|Is it empty (object)|`boolean`|`false`|\n|hasKeys|Does the object contain the given attribute (object)|`string[]`|`-`|\n|validator|Custom verification rules|`(    value: FieldValue \\| undefined,    callback: (error?: string) => void  ) => void`|`-`|\n\n\n\n### FieldData\n\n|Name|Description|Type|Default|\n|---|---|---|:---:|\n|value|Field value|`any`|`-`|\n|status|Field status|`ValidateStatus`|`-`|\n|message|Field error message|`string`|`-`|\n\n\n\n### ValidatedError\n\n|Name|Description|Type|Default|version|\n|---|---|---|:---:|:---|\n|label|Label text|`string`|`-`|2.18.0|\n|field|Field name|`string`|`-`||\n|value|Field value|`any`|`-`||\n|type|Field Type|`string`|`-`||\n|isRequiredError|Is it a `required` error|`boolean`|`false`||\n|message|Error message|`string`|`-`||\n\n\n\n### FormItemEventHandler\n\n|Name|Description|Type|Default|\n|---|---|---|:---:|\n|onChange|onChange|`(ev?: Event) => void`|`-`|\n|onInput|onInput|`(ev?: Event) => void`|`-`|\n|onFocus|onFocus|`(ev?: Event) => void`|`-`|\n|onBlur|onBlur|`(ev?: Event) => void`|`-`|\n\n\n\n### useFormItem\n\n```ts\nconst useFormItem = (data: {\n  size?: Ref<Size | undefined>;\n  disabled?: Ref<boolean>;\n  error?: Ref<boolean>;\n}) => {\n  mergedSize:Ref<Size>;\n  mergedDisabled:Ref<boolean>;\n  mergedError:Ref<boolean>;\n  feedback:Ref<string>;\n  eventHandlers:Ref<FormItemEventHandler>;\n}\n```\n\n\n## FAQ\n\n### About the `field` attribute of `form-item`\nThe value of the `field` attribute is the path string to get the corresponding value of the current `form-item`. Array division can also use `[]`, for example `field=\"people[2].id\"`\n\nFor example, the data structure passed into the model property is:\n```ts\nconst data = reactive({\n   name:'xiaoming',\n   people:[\n     {\n       id:'1111'\n     },\n     {\n       // bind this value\n       id:'2222'\n     }\n   ]\n})\n````\nAt this point, if you want to specify the value corresponding to the current `form-item` as `id: '2222'`, you need to set `field=\"people.2.id\"`, and the separator in the value needs to use `.`\n\n### About using clickable elements in the label slot\n\nThe title area of the form component is wrapped with the `label` element by default, which will activate the input component when clicked. If you put a clickable component in it, it will affect its normal function.\nAt this point, you can use the `label-component` attribute to modify the wrapping element to `span` to solve this problem.\n"
  },
  {
    "path": "packages/web-vue/components/form/README.zh-CN.md",
    "content": "```yaml\nmeta:\n  type: 组件\n  category: 数据输入\ntitle: 表单 Form\ndescription: 具有数据收集、校验和提交功能的表单，包含复选框、单选框、输入框、下拉选择框等元素。\n```\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/layout.md\n\n@import ./__demo__/extra.md\n\n@import ./__demo__/nest.md\n\n@import ./__demo__/grid.md\n\n@import ./__demo__/auto-width.md\n\n@import ./__demo__/validation.md\n\n@import ./__demo__/validation2.md\n\n@import ./__demo__/status.md\n\n@import ./__demo__/dynamic.md\n\n@import ./__demo__/disabled.md\n\n@import ./__demo__/async.md\n\n@import ./__demo__/custom.md\n\n@import ./__demo__/scroll.md\n\n## API\n\n\n### `<form>` Props\n\n|参数名|描述|类型|默认值|版本|\n|---|---|---|:---:|:---|\n|model **(必填)**|表单数据对象|`object`|`-`||\n|layout|表单的布局方式，包括水平、垂直、多列|`'horizontal' \\| 'vertical' \\| 'inline'`|`'horizontal'`||\n|size|表单控件的尺寸|`'mini' \\| 'small' \\| 'medium' \\| 'large'`|`'medium'`||\n|label-col-props|标签元素布局选项。参数同 `<col>` 组件一致|`object`|` span: 5, offset: 0 `||\n|wrapper-col-props|表单控件布局选项。参数同 `<col>` 组件一致|`object`|` span: 19, offset: 0 `||\n|label-align|标签的对齐方向|`'left' \\| 'right'`|`'right'`||\n|disabled|是否禁用表单|`boolean`|`-`||\n|rules|表单项校验规则|`Record<string, FieldRule \\| FieldRule[]>`|`-`||\n|auto-label-width|是否开启自动标签宽度，仅在 `layout=\"horizontal\"` 下生效。|`boolean`|`false`|2.13.0|\n|id|表单 `id` 属性和表单控件 `id` 前缀|`string`|`-`||\n|scroll-to-first-error|验证失败后滚动到第一个错误字段|`boolean`|`false`|2.51.0|\n### `<form>` Events\n\n|事件名|描述|参数|\n|---|---|---|\n|submit|表单提交时触发|data: `{values: Record<string, any>; errors: Record<string, ValidatedError> \\| undefined}`<br>ev: `Event`|\n|submit-success|验证成功时触发|values: `Record<string, any>`<br>ev: `Event`|\n|submit-failed|验证失败时触发|data: `{values: Record<string, any>; errors: Record<string, ValidatedError>}`<br>ev: `Event`|\n### `<form>` Methods\n\n|方法名|描述|参数|返回值|版本|\n|---|---|---|---|:---|\n|validate|校验全部表单数据|callback: `(errors: undefined \\| Record<string, ValidatedError>) => void`|Promise<undefined \\| Record<string, ValidatedError>>||\n|validateField|校验部分表单数据|field: `string \\| string[]`<br>callback: `(errors: undefined \\| Record<string, ValidatedError>) => void`|Promise<undefined \\| Record<string, ValidatedError>>||\n|resetFields|重置表单数据|field: `string \\| string[]`|-||\n|clearValidate|清除校验状态|field: `string \\| string[]`|-||\n|setFields|设置表单项的值和状态|data: `Record<string, FieldData>`|-||\n|scrollToField|滚动到指定表单项|field: `string`|-|2.51.0|\n\n\n\n\n### `<form-item>` Props\n\n|参数名|描述|类型|默认值|版本|\n|---|---|---|:---:|:---|\n|field|表单元素在数据对象中的path（数据项必填）|`string`|`''`||\n|label|标签的文本|`string`|`-`||\n|tooltip|提示内容|`string`|`-`|2.41.0|\n|show-colon|是否显示冒号|`boolean`|`false`||\n|no-style|是否去除样式|`boolean`|`false`||\n|disabled|是否禁用|`boolean`|`-`||\n|help|帮助文案|`string`|`-`||\n|extra|额外显示的文案|`string`|`-`||\n|required|是否必须填写|`boolean`|`false`||\n|asterisk-position|可选择将星号置于 label 前/后|`'start' \\| 'end'`|`'start'`|2.41.0|\n|rules|表单项校验规则（优先级高于 form 的 rules）|`FieldRule \\| FieldRule[]`|`-`||\n|validate-status|校验状态|`'success' \\| 'warning' \\| 'error' \\| 'validating'`|`-`||\n|validate-trigger|触发校验的事件|`'change' \\| 'input' \\| 'focus' \\| 'blur'`|`'change'`||\n|label-col-props|标签元素布局选项。参数同 `<col>` 组件一致|`object`|`-`||\n|wrapper-col-props|表单控件布局选项。参数同 `<col>` 组件一致|`object`|`-`||\n|hide-label|是否隐藏标签|`boolean`|`false`||\n|hide-asterisk|是否隐藏星号|`boolean`|`false`||\n|label-col-style|标签元素布局组件的 style|`object`|`-`|2.10.0|\n|wrapper-col-style|表单控件布局组件的 style|`object`|`-`|2.10.0|\n|row-props|表单项布局选项。参数同 `<row>` 组件一致|`object`|`-`|2.10.0|\n|row-class|表单项布局组件的 class|`string\\|array\\|object`|`-`|2.10.0|\n|content-class|表单控件包裹层的 class|`string\\|array\\|object`|`-`|2.10.0|\n|content-flex|内容层是否开启 flex 布局|`boolean`|`true`|2.13.0|\n|merge-props|（已废除）控制传递到子元素上的 Props。默认包括 disabled、error、size、 events 和 FormItem 上的额外属性。2.18.0 版本废除|`boolean \\| ((props: Record<string, any>) => Record<string, any>)`|`true`|2.13.0|\n|label-col-flex|设置标签 `Col` 组件的 flex 属性。设置时表单 `Col` 组件的 flex 属性会被设置为 `auto`。|`number\\|string`|`-`|2.13.0|\n|feedback|是否显示表单控件的反馈图标|`boolean`|`false`|2.16.0|\n|label-component|表单项标签渲染的元素|`string`|`'label'`|2.22.0|\n|label-attrs|表单项元素的属性|`object`|`-`|2.22.0|\n### `<form-item>` Slots\n\n|插槽名|描述|参数|\n|---|:---:|---|\n|label|标签|-|\n|help|帮助信息|-|\n|extra|额外内容|-|\n\n\n\n## Type\n\n\n### FieldRule\n\n|参数名|描述|类型|默认值|\n|---|---|---|:---:|\n|type|校验的值的类型，默认为 `'string'`|`'string'    \\| 'number'    \\| 'boolean'    \\| 'array'    \\| 'object'    \\| 'email'    \\| 'url'    \\| 'ip'`|`-`|\n|required|是否必填|`boolean`|`false`|\n|message|校验失败时展示的信息|`string`|`-`|\n|length|校验长度（string, array）|`number`|`-`|\n|maxLength|最大长度（string）|`number`|`-`|\n|minLength|最小长度（string）|`number`|`-`|\n|match|匹配校验（string）|`RegExp`|`-`|\n|uppercase|大写（string）|`boolean`|`false`|\n|lowercase|小写（string）|`boolean`|`false`|\n|min|最小值（number）|`number`|`-`|\n|max|最大值（number）|`number`|`-`|\n|equal|校验数值（number）|`number`|`-`|\n|positive|正数（number）|`boolean`|`false`|\n|negative|负数（number）|`boolean`|`false`|\n|true|是否为 `true`（boolean）|`boolean`|`false`|\n|false|是否为 `false`（boolean）|`boolean`|`false`|\n|includes|数组中是否包含给定值（array）|`any[]`|`-`|\n|deepEqual|数组元素是否相等（array）|`any`|`-`|\n|empty|是否为空（object）|`boolean`|`false`|\n|hasKeys|对象是否包含给定属性（object）|`string[]`|`-`|\n|validator|自定义校验规则|`(    value: FieldValue \\| undefined,    callback: (error?: string) => void  ) => void`|`-`|\n\n\n\n### FieldData\n\n|参数名|描述|类型|默认值|\n|---|---|---|:---:|\n|value|字段的值|`any`|`-`|\n|status|字段的状态|`ValidateStatus`|`-`|\n|message|字段的错误信息|`string`|`-`|\n\n\n\n### ValidatedError\n\n|参数名|描述|类型|默认值|版本|\n|---|---|---|:---:|:---|\n|label|标签的文本|`string`|`-`|2.18.0|\n|field|字段名|`string`|`-`||\n|value|字段值|`any`|`-`||\n|type|字段类型|`string`|`-`||\n|isRequiredError|是否为 `required` 错误|`boolean`|`false`||\n|message|错误信息|`string`|`-`||\n\n\n\n### FormItemEventHandler\n\n|参数名|描述|类型|默认值|\n|---|---|---|:---:|\n|onChange|onChange|`(ev?: Event) => void`|`-`|\n|onInput|onInput|`(ev?: Event) => void`|`-`|\n|onFocus|onFocus|`(ev?: Event) => void`|`-`|\n|onBlur|onBlur|`(ev?: Event) => void`|`-`|\n\n\n\n### useFormItem\n\n```ts\nconst useFormItem = (data: {\n  size?: Ref<Size | undefined>;\n  disabled?: Ref<boolean>;\n  error?: Ref<boolean>;\n}) => {\n  mergedSize:Ref<Size>;\n  mergedDisabled:Ref<boolean>;\n  mergedError:Ref<boolean>;\n  feedback:Ref<string>;\n  eventHandlers:Ref<FormItemEventHandler>;\n}\n```\n\n## FAQ\n\n### 关于 `form-item` 的 `field` 属性\n`field` 属性的值为获取当前 `form-item` 对应值的路径字符串。\n\n例如传入 model 属性的数据结构为：\n```ts\nconst data = reactive({\n  name:'xiaoming',\n  people:[\n    {\n      id:'1111'\n    },\n    {\n      // bind this value\n      id:'2222'\n    }\n  ]\n})\n```\n此时，如果想要指定当前 `form-item` 对应的值为 `id: '2222'`，需要设置 `field=\"people.2.id\"`，值中的分隔符需要使用 `.`。数组分割也可以使用 `[]`，例如 `field=\"people[2].id\"`\n\n### 关于在 label 插槽中使用可点击元素\n\n表单组件的标题区域默认使用 `label` 元素包裹，会在点击时激活输入组件，如果在其中放入可以点击组件，会影响其正常功能。\n此时可以使用 `label-component` 属性修改包裹元素为 `span` 解决这个问题。\n\n"
  },
  {
    "path": "packages/web-vue/components/form/TEMPLATE.md",
    "content": "## zh-CN\n```yaml\nmeta:\n  type: 组件\n  category: 数据输入\ntitle: 表单 Form\ndescription: 具有数据收集、校验和提交功能的表单，包含复选框、单选框、输入框、下拉选择框等元素。\n```\n---\n## en-US\n```yaml\nmeta:\n  type: Component\n  category: Data Entry\ntitle: Form\ndescription: A form with data collection, verification and submission functions, including checkboxes, radio buttons, input boxes, drop-down selection boxes and other elements.\n```\n---\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/layout.md\n\n@import ./__demo__/extra.md\n\n@import ./__demo__/nest.md\n\n@import ./__demo__/grid.md\n\n@import ./__demo__/auto-width.md\n\n@import ./__demo__/validation.md\n\n@import ./__demo__/validation2.md\n\n@import ./__demo__/status.md\n\n@import ./__demo__/dynamic.md\n\n@import ./__demo__/disabled.md\n\n@import ./__demo__/async.md\n\n@import ./__demo__/custom.md\n\n@import ./__demo__/scroll.md\n\n## API\n\n%%API(form.vue)%%\n\n%%API(form-item.vue)%%\n\n## Type\n\n%%INTERFACE(interface.ts)%%\n\n### useFormItem\n\n```ts\nconst useFormItem = (data: {\n  size?: Ref<Size | undefined>;\n  disabled?: Ref<boolean>;\n  error?: Ref<boolean>;\n}) => {\n  mergedSize:Ref<Size>;\n  mergedDisabled:Ref<boolean>;\n  mergedError:Ref<boolean>;\n  feedback:Ref<string>;\n  eventHandlers:Ref<FormItemEventHandler>;\n}\n```\n\n## zh-CN\n## FAQ\n\n### 关于 `form-item` 的 `field` 属性\n`field` 属性的值为获取当前 `form-item` 对应值的路径字符串。\n\n例如传入 model 属性的数据结构为：\n```ts\nconst data = reactive({\n  name:'xiaoming',\n  people:[\n    {\n      id:'1111'\n    },\n    {\n      // bind this value\n      id:'2222'\n    }\n  ]\n})\n```\n此时，如果想要指定当前 `form-item` 对应的值为 `id: '2222'`，需要设置 `field=\"people.2.id\"`，值中的分隔符需要使用 `.`。数组分割也可以使用 `[]`，例如 `field=\"people[2].id\"`\n\n### 关于在 label 插槽中使用可点击元素\n\n表单组件的标题区域默认使用 `label` 元素包裹，会在点击时激活输入组件，如果在其中放入可以点击组件，会影响其正常功能。\n此时可以使用 `label-component` 属性修改包裹元素为 `span` 解决这个问题。\n\n---\n\n## en-US\n## FAQ\n\n### About the `field` attribute of `form-item`\nThe value of the `field` attribute is the path string to get the corresponding value of the current `form-item`. Array division can also use `[]`, for example `field=\"people[2].id\"`\n\nFor example, the data structure passed into the model property is:\n```ts\nconst data = reactive({\n   name:'xiaoming',\n   people:[\n     {\n       id:'1111'\n     },\n     {\n       // bind this value\n       id:'2222'\n     }\n   ]\n})\n````\nAt this point, if you want to specify the value corresponding to the current `form-item` as `id: '2222'`, you need to set `field=\"people.2.id\"`, and the separator in the value needs to use `.`\n\n### About using clickable elements in the label slot\n\nThe title area of the form component is wrapped with the `label` element by default, which will activate the input component when clicked. If you put a clickable component in it, it will affect its normal function.\nAt this point, you can use the `label-component` attribute to modify the wrapping element to `span` to solve this problem.\n\n---\n"
  },
  {
    "path": "packages/web-vue/components/form/__demo__/async.md",
    "content": "```yaml\ntitle:\n  zh-CN: 表单异步校验\n  en-US: Asynchronous validation\n```\n\n## zh-CN\n\n通过异步的方法校验表单功能。\n\n---\n\n## en-US\n\nVerify the form function through an asynchronous method.\n\n---\n\n```vue\n\n<template>\n  <a-form ref=\"formRef\" :model=\"form\" :style=\"{width:'600px'}\">\n    <a-form-item field=\"name\" label=\"Username\" :rules=\"rules\">\n      <a-input v-model=\"form.name\" placeholder=\"please enter your username...\" />\n    </a-form-item>\n    <a-form-item field=\"post\" label=\"Post\">\n      <a-input v-model=\"form.post\" placeholder=\"please enter your post...\" />\n    </a-form-item>\n    <a-form-item field=\"isRead\">\n      <a-checkbox v-model=\"form.isRead\">\n        I have read the manual\n      </a-checkbox>\n    </a-form-item>\n    <a-form-item>\n      <a-button @click=\"handleClick\">Set Status</a-button>\n    </a-form-item>\n  </a-form>\n  {{ form }}\n</template>\n\n<script>\nimport { ref, reactive } from 'vue';\n\nexport default {\n  setup() {\n    const formRef = ref()\n    const form = reactive({\n      name: '',\n      post: '',\n      isRead: false,\n    })\n    const rules = [{\n      validator: (value, cb) => {\n        return new Promise(resolve => {\n          window.setTimeout(() => {\n            if (value !== 'admin') {\n              cb('name must be admin')\n            }\n            resolve()\n          }, 2000)\n        })\n      }\n    }];\n    const handleClick = () => {\n      formRef.value.setFields({\n        name: {\n          status: 'error',\n          message: 'async name error'\n        },\n        post: {\n          status: 'error',\n          message: 'valid post'\n        }\n      })\n    }\n\n    return {\n      formRef,\n      form,\n      rules,\n      handleClick\n    }\n  },\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/form/__demo__/auto-width.md",
    "content": "```yaml\ntitle:\n  zh-CN: 自动标签宽度\n  en-US: Auto Label Width\n```\n\n## zh-CN\n\n设置 `auto-label-width` 开启自动标签宽度。仅在 `layout=\"horizontal\"` 布局下生效。\n_* 目前仅在首次加载后生效。_\n\n---\n\n## en-US\n\nSet `auto-label-width` to enable automatic label width. It only takes effect under the layout of `layout=\"horizontal\"`.\n_* Currently it only takes effect after the first load._\n\n---\n\n```vue\n<template>\n  <a-form :model=\"form\" :style=\"{width:'600px'}\" auto-label-width @submit=\"handleSubmit\">\n    <a-form-item field=\"name\" label=\"Username\">\n      <a-input v-model=\"form.name\" placeholder=\"please enter your username...\" />\n    </a-form-item>\n    <a-form-item field=\"post\" label=\"Post\">\n      <a-input v-model=\"form.post\" placeholder=\"please enter your post...\" />\n    </a-form-item>\n    <a-form-item field=\"isRead\">\n      <a-checkbox v-model=\"form.isRead\">\n        I have read the manual\n      </a-checkbox>\n    </a-form-item>\n    <a-form-item>\n      <a-button html-type=\"submit\">Submit</a-button>\n    </a-form-item>\n  </a-form>\n  {{ form }}\n</template>\n\n<script>\nimport { reactive } from 'vue';\n\nexport default {\n  setup() {\n    const form = reactive({\n      name: '',\n      post: '',\n      isRead: false,\n    })\n    const handleSubmit = (data) => {\n      console.log(data)\n    }\n\n    return {\n      form,\n      handleSubmit\n    }\n  },\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/form/__demo__/basic.md",
    "content": "```yaml\ntitle:\n  zh-CN: 基本用法\n  en-US: Basic Usage\n```\n\n## zh-CN\n\n表单的基本用法。\n\n---\n\n## en-US\n\nBasic usage of the form.\n\n---\n\n```vue\n<template>\n  <a-form :model=\"form\" :style=\"{ width: '600px' }\" @submit=\"handleSubmit\">\n    <a-form-item field=\"name\" tooltip=\"Please enter username\" label=\"Username\">\n      <a-input\n        v-model=\"form.name\"\n        placeholder=\"please enter your username...\"\n      />\n    </a-form-item>\n    <a-form-item field=\"post\" label=\"Post\">\n      <a-input v-model=\"form.post\" placeholder=\"please enter your post...\" />\n    </a-form-item>\n    <a-form-item field=\"isRead\">\n      <a-checkbox v-model=\"form.isRead\"> I have read the manual </a-checkbox>\n    </a-form-item>\n    <a-form-item>\n      <a-button html-type=\"submit\">Submit</a-button>\n    </a-form-item>\n  </a-form>\n  {{ form }}\n</template>\n\n<script>\nimport { reactive } from 'vue';\n\nexport default {\n  setup() {\n    const form = reactive({\n      name: '',\n      post: '',\n      isRead: false,\n    });\n    const handleSubmit = (data) => {\n      console.log(data);\n    };\n\n    return {\n      form,\n      handleSubmit,\n    };\n  },\n};\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/form/__demo__/custom.md",
    "content": "```yaml\ntitle:\n  zh-CN: 自定义表单组件\n  en-US: Custom Form Item\n```\n\n## zh-CN\n\n通过 `useFormItem` 自定义表单组件。2.18.0 版本后可用。\n\n---\n\n## en-US\n\nCustomize form components with `useFormItem`. Available since version 2.18.0.\n\n---\n\n```vue\n<template>\n  <a-space style=\"margin-bottom: 20px;\">\n    <a-switch v-model=\"disabled\" />\n    Disabled: {{disabled}}\n  </a-space>\n  <Form :model=\"form\" :disabled=\"disabled\" :style=\"{width:'600px'}\">\n    <FormItem field=\"name\" label=\"Username\"\n              :rules=\"[{required:true,message:'name is required'},{minLength:5,message:'must be greater than 5 characters'}]\">\n      <MyInput v-model=\"form.name\" placeholder=\"please enter your username...\" />\n    </FormItem>\n  </Form>\n</template>\n\n<script lang=\"ts\">\nimport { h, reactive, ref } from 'vue';\nimport { Form, FormItem, useFormItem } from '@arco-design/web-vue';\n\nconst MyInput = {\n  emits: ['update:modelValue'],\n  setup(_, { emit }) {\n    const { mergedDisabled, eventHandlers } = useFormItem();\n    const handleInput = (ev) => {\n      const { value } = ev.target;\n      emit('update:modelValue', value)\n      eventHandlers.value?.onChange?.(ev)\n    }\n    return () => h('input', { disabled: mergedDisabled.value, onInput: handleInput })\n  }\n}\n\nexport default {\n  components: {\n    Form,\n    FormItem,\n    MyInput\n  },\n  setup() {\n    const disabled = ref(false);\n    const form = reactive({\n      name: ''\n    })\n\n    return {\n      disabled,\n      form\n    }\n  },\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/form/__demo__/disabled.md",
    "content": "```yaml\ntitle:\n  zh-CN: 全局禁用\n  en-US: Global Disabled\n```\n\n## zh-CN\n\n通过 `disabled` 属性可以禁用整个表单。\n\n---\n\n## en-US\n\nThe entire form can be disabled through the `disabled` attribute.\n\n---\n\n```vue\n<template>\n  <a-form :model=\"form\" :style=\"{width:'600px'}\" disabled>\n    <a-form-item field=\"name\" label=\"Username\">\n      <a-input v-model=\"form.name\" placeholder=\"please enter your username...\" />\n    </a-form-item>\n    <a-form-item field=\"post\" label=\"Post\">\n      <a-input v-model=\"form.post\" placeholder=\"please enter your post...\" />\n    </a-form-item>\n    <a-form-item field=\"isRead\">\n      <a-checkbox v-model=\"form.isRead\">\n        I have read the manual\n      </a-checkbox>\n    </a-form-item>\n    <a-form-item>\n      <a-button>Submit</a-button>\n    </a-form-item>\n  </a-form>\n  {{ form }}\n</template>\n\n<script>\nimport { reactive } from 'vue';\n\nexport default {\n  setup() {\n    const form = reactive({\n      name: '',\n      post: '',\n      isRead: false,\n    })\n\n    return {\n      form,\n    }\n  },\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/form/__demo__/dynamic.md",
    "content": "```yaml\ntitle:\n  zh-CN: 动态表单\n  en-US: Dynamic Form\n```\n\n## zh-CN\n\n通过数据动态控制表单内容。\n\n---\n\n## en-US\n\nDynamically control form content through data.\n\n---\n\n```vue\n<template>\n  <a-form :model=\"form\" :style=\"{width:'600px'}\">\n    <a-form-item field=\"name\" label=\"Username\">\n      <a-input v-model=\"form.name\" placeholder=\"please enter your username...\" />\n    </a-form-item>\n    <a-form-item v-for=\"(post,index) of form.posts\" :field=\"`posts[${index}].value`\" :label=\"`Post-${index}`\" :key=\"index\">\n      <a-input v-model=\"post.value\" placeholder=\"please enter your post...\" />\n      <a-button @click=\"handleDelete(index)\" :style=\"{marginLeft:'10px'}\">Delete</a-button>\n    </a-form-item>\n  </a-form>\n  <div>\n    <a-button @click=\"handleAdd\">Add Post</a-button>\n  </div>\n  {{ form }}\n</template>\n\n<script>\nimport { reactive } from 'vue';\n\nexport default {\n  setup() {\n    const form = reactive({\n      name: '',\n      posts: [{value: ''}]\n    })\n    const handleAdd = () => {\n      form.posts.push({\n        value: ''\n      })\n    };\n    const handleDelete = (index) => {\n      form.posts.splice(index, 1)\n    }\n\n    return {\n      form,\n      handleAdd,\n      handleDelete\n    }\n  },\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/form/__demo__/extra.md",
    "content": "```yaml\ntitle:\n  zh-CN: 额外信息和帮助信息\n  en-US: Extra Message & Help Message\n```\n\n## zh-CN\n\n可以使用 `extra` 添加额外信息。\n如果需要在外部自定义校验信息，可以使用 `help` 属性或插槽。设置 `help` 时校验信息会被屏蔽。\n\n---\n\n## en-US\n\nYou can use `extra` to add extra information.\nYou can use the `help` attribute or slot. The verification information will be blocked when `help` is set.\n\n---\n\n```vue\n<template>\n  <a-form :model=\"form\" :style=\"{width:'600px'}\">\n    <a-form-item field=\"name\" label=\"Username\" validate-trigger=\"input\" required>\n      <a-input v-model=\"form.name\" placeholder=\"please enter your username...\" />\n      <template #extra>\n        <div>Used to login</div>\n      </template>\n    </a-form-item>\n    <a-form-item field=\"post\" label=\"Post\" validate-trigger=\"input\" required>\n      <a-input v-model=\"form.post\" placeholder=\"please enter your post...\" />\n      <template #extra>\n        <div>Used to login</div>\n      </template>\n      <template #help>\n        <div>Custom valitae message</div>\n      </template>\n    </a-form-item>\n    <a-form-item field=\"isRead\">\n      <a-checkbox v-model=\"form.isRead\">\n        I have read the manual\n      </a-checkbox>\n    </a-form-item>\n  </a-form>\n  {{ form }}\n</template>\n\n<script>\nimport { reactive } from 'vue';\n\nexport default {\n  setup() {\n    const form = reactive({\n      name: '',\n      post: '',\n      isRead: false,\n    })\n\n    return {\n      form,\n    }\n  },\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/form/__demo__/grid.md",
    "content": "```yaml\ntitle:\n  zh-CN: 栅格布局\n  en-US: Grid\n```\n\n## zh-CN\n\n展示了使用栅格布局的方式。可以使用 `label-col-flex` 属性指定标签的具体宽度。\n\n---\n\n## en-US\n\nShows how to use grid layout. You can use the `label-col-flex` property to specify the specific width of the label.\n\n---\n\n```vue\n<template>\n  <a-form :model=\"form\">\n    <a-row :gutter=\"16\">\n      <a-col :span=\"8\">\n        <a-form-item field=\"value1\" label=\"Value 1\" label-col-flex=\"100px\">\n          <a-input v-model=\"form.value1\" placeholder=\"please enter...\" />\n        </a-form-item>\n      </a-col>\n      <a-col :span=\"8\">\n        <a-form-item field=\"value2\" label=\"Value 2\" label-col-flex=\"80px\">\n          <a-input v-model=\"form.value2\" placeholder=\"please enter...\" />\n        </a-form-item>\n      </a-col>\n      <a-col :span=\"8\">\n        <a-form-item field=\"value3\" label=\"Value 3\" label-col-flex=\"80px\">\n          <a-input v-model=\"form.value3\" placeholder=\"please enter...\" />\n        </a-form-item>\n      </a-col>\n    </a-row>\n    <a-row :gutter=\"16\">\n      <a-col :span=\"16\">\n        <a-form-item field=\"value4\" label=\"Value 4\" label-col-flex=\"100px\">\n          <a-input v-model=\"form.value4\" placeholder=\"please enter...\" />\n        </a-form-item>\n      </a-col>\n      <a-col :span=\"8\">\n        <a-form-item field=\"value5\" label=\"Value 5\" label-col-flex=\"80px\">\n          <a-input v-model=\"form.value5\" placeholder=\"please enter...\" />\n        </a-form-item>\n      </a-col>\n    </a-row>\n  </a-form>\n  {{ form }}\n</template>\n\n<script>\nimport { reactive } from 'vue';\n\nexport default {\n  setup() {\n    const form = reactive({\n      value1: '',\n      value2: '',\n      value3: '',\n      value4: '',\n      value5: '',\n    })\n\n    return {\n      form,\n    }\n  },\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/form/__demo__/layout.md",
    "content": "```yaml\ntitle:\n  zh-CN: 表单布局\n  en-US: Form Layout\n```\n\n## zh-CN\n\n表单支持三种布局方式： `horizontal` - 水平排列 **（默认）**， `vertical` - 垂直排列， `inline` - 行内排列。\n\n---\n\n## en-US\n\nThe form supports three layout methods: `horizontal`, `vertical` and `inline`.\n\n---\n\n```vue\n<template>\n  <a-space direction=\"vertical\" size=\"large\" :style=\"{width: '600px'}\">\n    <a-radio-group v-model=\"layout\" type=\"button\">\n      <a-radio value=\"horizontal\">horizontal</a-radio>\n      <a-radio value=\"vertical\">vertical</a-radio>\n      <a-radio value=\"inline\">inline</a-radio>\n    </a-radio-group>\n    <a-form :model=\"form\" :layout=\"layout\">\n      <a-form-item field=\"name\" label=\"Username\">\n        <a-input v-model=\"form.name\" placeholder=\"please enter your username...\" />\n      </a-form-item>\n      <a-form-item field=\"post\" label=\"Post\">\n        <a-input v-model=\"form.post\" placeholder=\"please enter your post...\" />\n      </a-form-item>\n      <a-form-item field=\"isRead\">\n        <a-checkbox v-model=\"form.isRead\">\n          I have read the manual\n        </a-checkbox>\n      </a-form-item>\n      <a-form-item>\n        <a-button>Submit</a-button>\n      </a-form-item>\n    </a-form>\n    <div>\n      {{ form }}\n    </div>\n  </a-space>\n</template>\n\n<script>\nimport { reactive, ref } from 'vue';\n\nexport default {\n  setup() {\n    const layout = ref('horizontal')\n    const form = reactive({\n      name: '',\n      post: '',\n      isRead: false,\n    })\n\n    return {\n      layout,\n      form,\n    }\n  },\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/form/__demo__/nest.md",
    "content": "```yaml\ntitle:\n  zh-CN: 嵌套数据\n  en-US: Nest Data\n```\n\n## zh-CN\n\n展示了多种表单项嵌套的方式。\n表单项组件默认会将表单项状态和事件绑定到第一子组件，如果想要使用表单项进行布局设置，请设置 `:merge-props=\"false\"` 以关闭绑定，或者使用函数指定需要绑定的数据。\n如果使用 grid 组件进行布局，请设置 `:content-flex=\"false\"` 关闭表单项内容的 flex 布局。\n\n---\n\n## en-US\n\nShows a variety of ways to nest form items.\nThe form item component binds the form item state and events to the first sub-component by default. If you want to use the form item for layout settings, please set `:merge-props=\"false\"` to close the binding, or use a function to specify The data that needs to be bound.\nIf you use the grid component for layout, please set `:content-flex=\"false\"` to turn off the flex layout of the form item content.\n\n---\n\n```vue\n<template>\n  <a-form :model=\"form\" :style=\"{width:'600px'}\">\n    <a-form-item label=\"Username\" :content-flex=\"false\" :merge-props=\"false\" extra=\"Show error message together\">\n      <a-row :gutter=\"8\">\n        <a-col :span=\"12\">\n          <a-form-item field=\"together.firstname\" validate-trigger=\"input\"\n                       :rules=\"[{required:true,message:'firstname is required'}]\" no-style>\n            <a-input v-model=\"form.together.firstname\" placeholder=\"please enter your firstname...\" />\n          </a-form-item>\n        </a-col>\n        <a-col :span=\"12\">\n          <a-form-item field=\"together.lastname\" validate-trigger=\"input\"\n                       :rules=\"[{required:true,message:'lastname is required'}]\" no-style>\n            <a-input v-model=\"form.together.lastname\" placeholder=\"please enter your lastname...\" />\n          </a-form-item>\n        </a-col>\n      </a-row>\n    </a-form-item>\n    <a-form-item label=\"Username\" :content-flex=\"false\" :merge-props=\"false\">\n      <a-row :gutter=\"8\">\n        <a-col :span=\"12\">\n          <a-form-item field=\"separate.firstname\" validate-trigger=\"input\"\n                       extra=\"Show error message separate\"\n                       :rules=\"[{required:true,message:'firstname is required'}]\" hide-label>\n            <a-input v-model=\"form.separate.firstname\" placeholder=\"please enter your firstname...\" />\n          </a-form-item>\n        </a-col>\n        <a-col :span=\"12\">\n          <a-form-item field=\"separate.lastname\" validate-trigger=\"input\"\n                       :rules=\"[{required:true,message:'lastname is required'}]\" hide-label>\n            <a-input v-model=\"form.separate.lastname\" placeholder=\"please enter your lastname...\" />\n          </a-form-item>\n        </a-col>\n      </a-row>\n    </a-form-item>\n    <a-form-item label=\"Posts\" :content-flex=\"false\" :merge-props=\"false\">\n      <a-space direction=\"vertical\" fill>\n        <a-form-item field=\"posts.post1\" label=\"Post1\">\n          <a-input v-model=\"form.posts.post1\" placeholder=\"please enter your post...\" />\n        </a-form-item>\n        <a-form-item field=\"posts.post2\" label=\"Post2\">\n          <a-input v-model=\"form.posts.post2\" placeholder=\"please enter your post...\" />\n        </a-form-item>\n      </a-space>\n    </a-form-item>\n    <a-form-item field=\"isRead\">\n      <a-checkbox v-model=\"form.isRead\">\n        I have read the manual\n      </a-checkbox>\n    </a-form-item>\n  </a-form>\n  {{ form }}\n</template>\n\n<script>\nimport { reactive } from 'vue';\n\nexport default {\n  setup() {\n    const form = reactive({\n      together: {\n        firstname: '',\n        lastname: '',\n      },\n      separate: {\n        firstname: '',\n        lastname: '',\n      },\n      posts: {\n        post1: '',\n        post2: ''\n      },\n      isRead: false,\n    })\n\n    return {\n      form,\n    }\n  },\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/form/__demo__/scroll.md",
    "content": "```yaml\ntitle:\n  zh-CN: 滚动到指定表单字段\n  en-US: Scroll To Field\n```\n\n## zh-CN\n\n展示了提交失败自动滚动到第一个错误字段和手动滚动对应字段的使用方法。\n\n---\n\n## en-US\n\nShowed the usage methods for automatically scrolling to the first error field on submission failure and manually scrolling to the corresponding field.\n\n---\n\n```vue\n<template>\n  <a-space>\n    <a-button @click=\"formRef && formRef.validate()\">Submit</a-button>\n    <a-button @click=\"formRef && formRef.resetFields()\">Reset</a-button>\n    <a-button @click=\"formRef && formRef.scrollToField('name19')\">Scroll to the last field</a-button>\n  </a-space>\n  <a-form\n    ref=\"formRef\"\n    style=\"width: 500px;height: 300px;margin-top:20px;padding-right: 16px;overflow: auto\"\n    :model=\"form\"\n    :scrollToFirstError=\"true\"\n  >\n    <template v-for=\"(fieldName, index) in fieldNames\" :key=\"index\">\n      <a-form-item\n        :field=\"fieldName\"\n        :label=\"'user' + index\"\n        :rules=\"[\n          { required: true, message: 'Name is required' },\n        ]\"\n      >\n        <a-input v-model=\"form[fieldName]\" />\n      </a-form-item>\n    </template>\n  </a-form>\n</template>\n\n<script>\nimport { reactive, ref } from 'vue';\n\nexport default {\n  setup() {\n    const formRef = ref(null);\n    const fieldCount = 20;\n    const fieldNames = Array.from({ length: fieldCount }, (_, index) => `name${index}`);\n    const form = reactive(Object.fromEntries(\n      fieldNames.map((fieldName, index) => [fieldName, index === 7 ? '' : index.toString()])\n    ));\n\n    return {\n      form,\n      formRef,\n      fieldCount,\n      fieldNames\n    };\n  },\n};\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/form/__demo__/status.md",
    "content": "```yaml\ntitle:\n  zh-CN: 自定义表单校验状态\n  en-US: Form\n```\n\n## zh-CN\n\n开启 `feedback` 可以让部分输入组件展示当前状态信息\n\n---\n\n## en-US\n\nEnable `feedback` to allow some input components to display current state information\n\n---\n\n```vue\n<template>\n  <a-space direction=\"vertical\" size=\"large\">\n    <a-radio-group v-model=\"status\" type=\"button\">\n      <a-radio value=\"validating\">validating</a-radio>\n      <a-radio value=\"success\">success</a-radio>\n      <a-radio value=\"error\">error</a-radio>\n      <a-radio value=\"warning\">warning</a-radio>\n    </a-radio-group>\n    <a-radio-group v-model=\"size\" type=\"button\">\n      <a-radio value=\"mini\">mini</a-radio>\n      <a-radio value=\"small\">small</a-radio>\n      <a-radio value=\"medium\">medium</a-radio>\n      <a-radio value=\"large\">large</a-radio>\n    </a-radio-group>\n  </a-space>\n  <a-form\n    :model=\"form\"\n    :style=\"{ width: '600px', marginTop: '20px' }\"\n    :size=\"size\"\n  >\n    <a-form-item\n      field=\"name\"\n      label=\"Username\"\n      help=\"This is custom message\"\n      extra=\"This is extra text\"\n      :validate-status=\"status\"\n      feedback\n    >\n      <a-input\n        v-model=\"form.name\"\n        placeholder=\"please enter your username...\"\n      />\n    </a-form-item>\n    <a-form-item\n      field=\"post\"\n      label=\"Post\"\n      help=\"This is custom message\"\n      extra=\"This is extra text\"\n      :validate-status=\"status\"\n      feedback\n    >\n      <a-input-number\n        v-model=\"form.post\"\n        placeholder=\"please enter your post...\"\n      />\n    </a-form-item>\n    <a-form-item\n      field=\"tags\"\n      label=\"Tags\"\n      help=\"This is custom message\"\n      extra=\"This is extra text\"\n      :validate-status=\"status\"\n      feedback\n    >\n      <a-input-tag\n        v-model=\"form.tags\"\n        placeholder=\"please enter your post...\"\n      />\n    </a-form-item>\n    <a-form-item\n      field=\"section\"\n      label=\"Section\"\n      :rules=\"[{ match: /section one/, message: 'must select one' }]\"\n      :validate-status=\"status\"\n      feedback\n    >\n      <a-select v-model=\"form.section\" placeholder=\"Please select ...\">\n        <a-option value=\"section one\">Section One</a-option>\n        <a-option value=\"section two\">Section Two</a-option>\n        <a-option value=\"section three\">Section Three</a-option>\n      </a-select>\n    </a-form-item>\n    <a-form-item label=\"DateRange\" :validate-status=\"status\" feedback>\n      <a-range-picker></a-range-picker>\n    </a-form-item>\n\n    <a-form-item field=\"date\" label=\"Date\" :validate-status=\"status\" feedback>\n      <a-date-picker></a-date-picker>\n    </a-form-item>\n\n    <a-form-item field=\"time\" label=\"Time\" :validate-status=\"status\" feedback>\n      <a-time-picker></a-time-picker>\n    </a-form-item>\n  </a-form>\n</template>\n\n<script>\nimport { reactive, ref } from 'vue';\n\nexport default {\n  setup() {\n    const status = ref('success');\n    const size = ref('medium');\n    const form = reactive({\n      name: '',\n      post: undefined,\n      tags: ['tag1'],\n      section: '',\n    });\n\n    return {\n      status,\n      size,\n      form,\n    };\n  },\n};\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/form/__demo__/validation.md",
    "content": "```yaml\ntitle:\n  zh-CN: 验证表单\n  en-US: Validation\n```\n\n## zh-CN\n\n展示了表单校验的使用方法。\n\n---\n\n## en-US\n\nShows how to use form validation.\n\n---\n\n```vue\n<template>\n  <a-form ref=\"formRef\" :size=\"form.size\" :model=\"form\" :style=\"{width:'600px'}\" @submit=\"handleSubmit\">\n    <a-form-item field=\"size\" label=\"Form Size\" >\n      <a-radio-group v-model=\"form.size\" type=\"button\">\n        <a-radio value=\"mini\">Mini</a-radio>\n        <a-radio value=\"small\">Small</a-radio>\n        <a-radio value=\"medium\">Medium</a-radio>\n        <a-radio value=\"large\">Large</a-radio>\n      </a-radio-group>\n    </a-form-item>\n    <a-form-item field=\"name\" label=\"Username\"\n                 :rules=\"[{required:true,message:'name is required'},{minLength:5,message:'must be greater than 5 characters'}]\"\n                 :validate-trigger=\"['change','input']\"\n    >\n      <a-input v-model=\"form.name\" placeholder=\"please enter your username...\" />\n    </a-form-item>\n    <a-form-item field=\"age\" label=\"Age\"\n                 :rules=\"[{required:true,message:'age is required'},{type:'number', max:200,message:'age is max than 200'}]\"\n    >\n      <a-input-number v-model=\"form.age\" placeholder=\"please enter your age...\" />\n    </a-form-item>\n    <a-form-item field=\"section\" label=\"Section\" :rules=\"[{match:/section one/,message:'must select one'}]\">\n      <a-select v-model=\"form.section\" placeholder=\"Please select ...\" allow-clear>\n        <a-option value=\"section one\">Section One</a-option>\n        <a-option value=\"section two\">Section Two</a-option>\n        <a-option value=\"section three\">Section Three</a-option>\n      </a-select>\n    </a-form-item>\n    <a-form-item field=\"province\" label=\"Province\" :rules=\"[{required:true,message:'province is required'}]\">\n      <a-cascader v-model=\"form.province\" :options=\"options\" placeholder=\"Please select ...\" allow-clear />\n    </a-form-item>\n    <a-form-item field=\"options\" label=\"Options\"\n                 :rules=\"[{type:'array',minLength:2,message:'must select greater than two options'}]\"\n    >\n      <a-checkbox-group v-model=\"form.options\">\n        <a-checkbox value=\"option one\">Section One</a-checkbox>\n        <a-checkbox value=\"option two\">Option Two</a-checkbox>\n        <a-checkbox value=\"option three\">Option Three</a-checkbox>\n        <a-checkbox value=\"option four\">Option Four</a-checkbox>\n      </a-checkbox-group>\n    </a-form-item>\n    <a-form-item field=\"date\" label=\"Date\">\n      <a-date-picker v-model=\"form.date\" placeholder=\"Please select ...\"/>\n    </a-form-item>\n    <a-form-item field=\"time\" label=\"Time\">\n      <a-time-picker v-model=\"form.time\" placeholder=\"Please select ...\"/>\n    </a-form-item>\n    <a-form-item field=\"radio\" label=\"Radio\" :rules=\"[{match:/one/,message:'must select one'}]\">\n      <a-radio-group v-model=\"form.radio\">\n        <a-radio value=\"radio one\">Radio One</a-radio>\n        <a-radio value=\"radio two\">Radio Two</a-radio>\n      </a-radio-group>\n    </a-form-item>\n    <a-form-item field=\"slider\" label=\"Slider\" :rules=\"[{type:'number', min:5,message:'slider is min than 5'}]\">\n      <a-slider v-model=\"form.slider\" :max=\"10\" />\n    </a-form-item>\n    <a-form-item field=\"score\" label=\"Score\">\n      <a-rate v-model=\"form.score\" allow-clear />\n    </a-form-item>\n    <a-form-item field=\"switch\" label=\"Switch\" :rules=\"[{type:'boolean', true:true,message:'must be true'}]\">\n      <a-switch v-model=\"form.switch\" />\n    </a-form-item>\n    <a-form-item field=\"multiSelect\" label=\"Multiple Select\">\n      <a-select v-model=\"form.multiSelect\" placeholder=\"Please select ...\" multiple>\n        <a-option value=\"section one\">Section One</a-option>\n        <a-option value=\"section two\">Section Two</a-option>\n        <a-option value=\"section three\">Section Three</a-option>\n      </a-select>\n    </a-form-item>\n    <a-form-item field=\"treeSelect\" label=\"Tree Select\">\n      <a-tree-select :data=\"treeData\" v-model=\"form.treeSelect\" placeholder=\"Please select ...\"/>\n    </a-form-item>\n    <a-form-item>\n      <a-space>\n        <a-button html-type=\"submit\">Submit</a-button>\n        <a-button @click=\"$refs.formRef.resetFields()\">Reset</a-button>\n      </a-space>\n    </a-form-item>\n  </a-form>\n  {{ form }}\n</template>\n\n<script>\nimport { reactive } from 'vue';\n\nexport default {\n  setup() {\n    const handleSubmit = ({values, errors}) => {\n      console.log('values:', values, '\\nerrors:', errors)\n    }\n\n    const form = reactive({\n      size: 'medium',\n      name: '',\n      age: undefined,\n      section: '',\n      province: 'haidian',\n      options: [],\n      date: '',\n      time: '',\n      radio: 'radio one',\n      slider: 5,\n      score: 5,\n      switch: false,\n      multiSelect: ['section one'],\n      treeSelect: ''\n    });\n    const options = [\n      {\n        value: 'beijing',\n        label: 'Beijing',\n        children: [\n          {\n            value: 'chaoyang',\n            label: 'ChaoYang',\n            children: [\n              {\n                value: 'datunli',\n                label: 'Datunli',\n              },\n            ],\n          },\n          {\n            value: 'haidian',\n            label: 'Haidian',\n          },\n          {\n            value: 'dongcheng',\n            label: 'Dongcheng',\n          },\n          {\n            value: 'xicheng',\n            label: 'XiCheng',\n          },\n        ],\n      },\n      {\n        value: 'shanghai',\n        label: 'Shanghai',\n        children: [\n          {\n            value: 'shanghaishi',\n            label: 'Shanghai',\n            children: [\n              {\n                value: 'huangpu',\n                label: 'Huangpu',\n              },\n            ],\n          },\n        ],\n      },\n    ];\n    const treeData = [\n      {\n        key: 'node1',\n        title: 'Node1',\n        children: [\n          {\n            key: 'node2',\n            title: 'Node2',\n          },\n        ],\n      },\n      {\n        key: 'node3',\n        title: 'Node3',\n        children: [\n          {\n            key: 'node4',\n            title: 'Node4',\n          },\n          {\n            key: 'node5',\n            title: 'Node5',\n          },\n        ],\n      },\n    ]\n\n    return {\n      form,\n      options,\n      treeData,\n      handleSubmit\n    }\n  },\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/form/__demo__/validation2.md",
    "content": "```yaml\ntitle:\n  zh-CN: 验证表单2\n  en-US: Validation2\n```\n\n## zh-CN\n\n展示了表单校验`rules`使用在`a-form`上的使用方法，以及可以直接校验`email`、`ip`、`url`\n\n---\n\n## en-US\n\nIt shows how to use form validation rules on `a-form`, and how to verify `email`, `ip`, and `url` directly\n\n---\n\n```vue\n<template>\n  <a-form ref=\"formRef\" :rules=\"rules\" :model=\"form\" :style=\"{width:'600px'}\" @submit=\"handleSubmit\">\n    <a-form-item field=\"name\" label=\"Username\" validate-trigger=\"blur\">\n      <a-input v-model=\"form.name\" placeholder=\"please enter your username...\" />\n    </a-form-item>\n    <a-form-item field=\"password\" label=\"密码\" validate-trigger=\"blur\">\n      <a-input-password v-model=\"form.password\" placeholder=\"please enter your password...\" />\n    </a-form-item>\n    <a-form-item field=\"password2\" label=\"确认密码\" validate-trigger=\"blur\">\n      <a-input-password v-model=\"form.password2\" placeholder=\"please confirm your password...\" />\n    </a-form-item>\n    <a-form-item field=\"email\" label=\"email\">\n      <a-input v-model=\"form.email\" placeholder=\"please enter your email...\" />\n    </a-form-item>\n    <a-form-item field=\"ip\" label=\"IP\">\n      <a-input v-model=\"form.ip\" placeholder=\"please enter your ip...\" />\n    </a-form-item>\n    <a-form-item field=\"url\" label=\"URL\">\n      <a-input v-model=\"form.url\" placeholder=\"please enter your url...\" />\n    </a-form-item>\n    <a-form-item field=\"match\" label=\"match\">\n      <a-input v-model=\"form.match\" placeholder=\"please enter your match...\" />\n    </a-form-item>\n    <a-form-item>\n      <a-space>\n        <a-button html-type=\"submit\">Submit</a-button>\n        <a-button @click=\"$refs.formRef.resetFields()\">Reset</a-button>\n      </a-space>\n    </a-form-item>\n  </a-form>\n  {{ form }}\n</template>\n\n<script>\nimport { reactive } from 'vue';\n\nexport default {\n  setup() {\n    const handleSubmit = ({values, errors}) => {\n      console.log('values:', values, '\\nerrors:', errors)\n    }\n\n    const form = reactive({\n      name: '',\n      password: '',\n      password2: '',\n      email: '',\n      ip: '192.168.2.1',\n      url: '',\n      match: ''\n    });\n\n    const rules = {\n      name: [\n        {\n          required: true,\n          message:'name is required',\n        },\n      ],\n      password: [\n        {\n          required: true,\n          message:'password is required',\n        },\n      ],\n      password2: [\n        {\n          required: true,\n          message:'password is required',\n        },\n        {\n          validator: (value, cb) => {\n            if (value !== form.password) {\n              cb('two passwords do not match')\n            } else {\n              cb()\n            }\n          }\n        }\n      ],\n      email: [\n        {\n          type: 'email',\n          required: true,\n        }\n      ],\n      ip: [\n        {\n          type: 'ip',\n          required: true,\n        }\n      ],\n      url: [\n        {\n          type: 'url',\n          required: true,\n        }\n      ],\n      match: [\n        {\n          required: true,\n          validator: (value, cb) => {\n            return new Promise((resolve) => {\n              if (!value) {\n                cb('Please enter match')\n              }\n              if (value !== 'match') {\n                cb('match must be match!')\n              }\n              resolve()\n            })\n          }\n        }\n      ],\n    }\n\n    return {\n      form,\n      rules,\n      handleSubmit\n    }\n  },\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/form/__test__/__snapshots__/demo.test.ts.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`<form> demo: render [async] correctly 1`] = `\n\"<form class=\\\\\"arco-form arco-form-layout-horizontal arco-form-size-medium\\\\\" style=\\\\\"width: 600px;\\\\\">\n  <div class=\\\\\"arco-row arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-horizontal\\\\\">\n    <div class=\\\\\"arco-col arco-col-5 arco-form-item-label-col\\\\\"><label class=\\\\\"arco-form-item-label\\\\\">\n        <!--v-if-->Username\n        <!--v-if-->\n        <!--v-if-->\n      </label></div>\n    <div class=\\\\\"arco-col arco-col-19 arco-form-item-wrapper-col\\\\\" id=\\\\\"name\\\\\">\n      <div class=\\\\\"arco-form-item-content-wrapper\\\\\">\n        <div class=\\\\\"arco-form-item-content arco-form-item-content-flex\\\\\"><span class=\\\\\"arco-input-wrapper\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" placeholder=\\\\\"please enter your username...\\\\\" value=\\\\\"\\\\\"><!----><!----></span></div>\n      </div>\n      <!--v-if-->\n      <!--v-if-->\n    </div>\n  </div>\n  <div class=\\\\\"arco-row arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-horizontal\\\\\">\n    <div class=\\\\\"arco-col arco-col-5 arco-form-item-label-col\\\\\"><label class=\\\\\"arco-form-item-label\\\\\">\n        <!--v-if-->Post\n        <!--v-if-->\n        <!--v-if-->\n      </label></div>\n    <div class=\\\\\"arco-col arco-col-19 arco-form-item-wrapper-col\\\\\" id=\\\\\"post\\\\\">\n      <div class=\\\\\"arco-form-item-content-wrapper\\\\\">\n        <div class=\\\\\"arco-form-item-content arco-form-item-content-flex\\\\\"><span class=\\\\\"arco-input-wrapper\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" placeholder=\\\\\"please enter your post...\\\\\" value=\\\\\"\\\\\"><!----><!----></span></div>\n      </div>\n      <!--v-if-->\n      <!--v-if-->\n    </div>\n  </div>\n  <div class=\\\\\"arco-row arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-horizontal\\\\\">\n    <div class=\\\\\"arco-col arco-col-5 arco-form-item-label-col\\\\\"><label class=\\\\\"arco-form-item-label\\\\\">\n        <!--v-if-->\n        <!--v-if-->\n        <!--v-if-->\n      </label></div>\n    <div class=\\\\\"arco-col arco-col-19 arco-form-item-wrapper-col\\\\\" id=\\\\\"isRead\\\\\">\n      <div class=\\\\\"arco-form-item-content-wrapper\\\\\">\n        <div class=\\\\\"arco-form-item-content arco-form-item-content-flex\\\\\"><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span><span class=\\\\\"arco-checkbox-label\\\\\"> I have read the manual </span></label></div>\n      </div>\n      <!--v-if-->\n      <!--v-if-->\n    </div>\n  </div>\n  <div class=\\\\\"arco-row arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-horizontal\\\\\">\n    <div class=\\\\\"arco-col arco-col-5 arco-form-item-label-col\\\\\"><label class=\\\\\"arco-form-item-label\\\\\">\n        <!--v-if-->\n        <!--v-if-->\n        <!--v-if-->\n      </label></div>\n    <div class=\\\\\"arco-col arco-col-19 arco-form-item-wrapper-col\\\\\">\n      <div class=\\\\\"arco-form-item-content-wrapper\\\\\">\n        <div class=\\\\\"arco-form-item-content arco-form-item-content-flex\\\\\"><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n            <!--v-if-->Set Status\n          </button></div>\n      </div>\n      <!--v-if-->\n      <!--v-if-->\n    </div>\n  </div>\n</form>\n {\n \\\\\"name\\\\\": \\\\\"\\\\\",\n \\\\\"post\\\\\": \\\\\"\\\\\",\n \\\\\"isRead\\\\\": false\n }\"\n`;\n\nexports[`<form> demo: render [auto-width] correctly 1`] = `\n\"<form class=\\\\\"arco-form arco-form-layout-horizontal arco-form-size-medium arco-form-auto-label-width\\\\\" style=\\\\\"width: 600px;\\\\\">\n  <div class=\\\\\"arco-row arco-row-nowrap arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-horizontal\\\\\">\n    <div class=\\\\\"arco-col arco-col-5 arco-form-item-label-col arco-form-item-label-col-flex\\\\\"><label class=\\\\\"arco-form-item-label\\\\\">\n        <!--v-if-->Username\n        <!--v-if-->\n        <!--v-if-->\n      </label></div>\n    <div class=\\\\\"arco-col arco-form-item-wrapper-col\\\\\" style=\\\\\"flex-basis: auto;\\\\\" id=\\\\\"name\\\\\">\n      <div class=\\\\\"arco-form-item-content-wrapper\\\\\">\n        <div class=\\\\\"arco-form-item-content arco-form-item-content-flex\\\\\"><span class=\\\\\"arco-input-wrapper\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" placeholder=\\\\\"please enter your username...\\\\\" value=\\\\\"\\\\\"><!----><!----></span></div>\n      </div>\n      <!--v-if-->\n      <!--v-if-->\n    </div>\n  </div>\n  <div class=\\\\\"arco-row arco-row-nowrap arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-horizontal\\\\\">\n    <div class=\\\\\"arco-col arco-col-5 arco-form-item-label-col arco-form-item-label-col-flex\\\\\"><label class=\\\\\"arco-form-item-label\\\\\">\n        <!--v-if-->Post\n        <!--v-if-->\n        <!--v-if-->\n      </label></div>\n    <div class=\\\\\"arco-col arco-form-item-wrapper-col\\\\\" style=\\\\\"flex-basis: auto;\\\\\" id=\\\\\"post\\\\\">\n      <div class=\\\\\"arco-form-item-content-wrapper\\\\\">\n        <div class=\\\\\"arco-form-item-content arco-form-item-content-flex\\\\\"><span class=\\\\\"arco-input-wrapper\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" placeholder=\\\\\"please enter your post...\\\\\" value=\\\\\"\\\\\"><!----><!----></span></div>\n      </div>\n      <!--v-if-->\n      <!--v-if-->\n    </div>\n  </div>\n  <div class=\\\\\"arco-row arco-row-nowrap arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-horizontal\\\\\">\n    <div class=\\\\\"arco-col arco-col-5 arco-form-item-label-col arco-form-item-label-col-flex\\\\\"><label class=\\\\\"arco-form-item-label\\\\\">\n        <!--v-if-->\n        <!--v-if-->\n        <!--v-if-->\n      </label></div>\n    <div class=\\\\\"arco-col arco-form-item-wrapper-col\\\\\" style=\\\\\"flex-basis: auto;\\\\\" id=\\\\\"isRead\\\\\">\n      <div class=\\\\\"arco-form-item-content-wrapper\\\\\">\n        <div class=\\\\\"arco-form-item-content arco-form-item-content-flex\\\\\"><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span><span class=\\\\\"arco-checkbox-label\\\\\"> I have read the manual </span></label></div>\n      </div>\n      <!--v-if-->\n      <!--v-if-->\n    </div>\n  </div>\n  <div class=\\\\\"arco-row arco-row-nowrap arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-horizontal\\\\\">\n    <div class=\\\\\"arco-col arco-col-5 arco-form-item-label-col arco-form-item-label-col-flex\\\\\"><label class=\\\\\"arco-form-item-label\\\\\">\n        <!--v-if-->\n        <!--v-if-->\n        <!--v-if-->\n      </label></div>\n    <div class=\\\\\"arco-col arco-form-item-wrapper-col\\\\\" style=\\\\\"flex-basis: auto;\\\\\">\n      <div class=\\\\\"arco-form-item-content-wrapper\\\\\">\n        <div class=\\\\\"arco-form-item-content arco-form-item-content-flex\\\\\"><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"submit\\\\\">\n            <!--v-if-->Submit\n          </button></div>\n      </div>\n      <!--v-if-->\n      <!--v-if-->\n    </div>\n  </div>\n</form>\n {\n \\\\\"name\\\\\": \\\\\"\\\\\",\n \\\\\"post\\\\\": \\\\\"\\\\\",\n \\\\\"isRead\\\\\": false\n }\"\n`;\n\nexports[`<form> demo: render [basic] correctly 1`] = `\n\"<form class=\\\\\"arco-form arco-form-layout-horizontal arco-form-size-medium\\\\\" style=\\\\\"width: 600px;\\\\\">\n  <div class=\\\\\"arco-row arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-horizontal\\\\\">\n    <div class=\\\\\"arco-col arco-col-5 arco-form-item-label-col\\\\\"><label class=\\\\\"arco-form-item-label\\\\\">\n        <!--v-if-->Username<svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-question-circle arco-form-item-label-tooltip\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n          <path d=\\\\\"M42 24c0 9.941-8.059 18-18 18S6 33.941 6 24 14.059 6 24 6s18 8.059 18 18Z\\\\\"></path>\n          <path d=\\\\\"M24.006 31v4.008m0-6.008L24 28c0-3 3-4 4.78-6.402C30.558 19.195 28.288 15 23.987 15c-4.014 0-5.382 2.548-5.388 4.514v.465\\\\\"></path>\n        </svg>\n        <!---->\n        <!--v-if-->\n      </label></div>\n    <div class=\\\\\"arco-col arco-col-19 arco-form-item-wrapper-col\\\\\" id=\\\\\"name\\\\\">\n      <div class=\\\\\"arco-form-item-content-wrapper\\\\\">\n        <div class=\\\\\"arco-form-item-content arco-form-item-content-flex\\\\\"><span class=\\\\\"arco-input-wrapper\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" placeholder=\\\\\"please enter your username...\\\\\" value=\\\\\"\\\\\"><!----><!----></span></div>\n      </div>\n      <!--v-if-->\n      <!--v-if-->\n    </div>\n  </div>\n  <div class=\\\\\"arco-row arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-horizontal\\\\\">\n    <div class=\\\\\"arco-col arco-col-5 arco-form-item-label-col\\\\\"><label class=\\\\\"arco-form-item-label\\\\\">\n        <!--v-if-->Post\n        <!--v-if-->\n        <!--v-if-->\n      </label></div>\n    <div class=\\\\\"arco-col arco-col-19 arco-form-item-wrapper-col\\\\\" id=\\\\\"post\\\\\">\n      <div class=\\\\\"arco-form-item-content-wrapper\\\\\">\n        <div class=\\\\\"arco-form-item-content arco-form-item-content-flex\\\\\"><span class=\\\\\"arco-input-wrapper\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" placeholder=\\\\\"please enter your post...\\\\\" value=\\\\\"\\\\\"><!----><!----></span></div>\n      </div>\n      <!--v-if-->\n      <!--v-if-->\n    </div>\n  </div>\n  <div class=\\\\\"arco-row arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-horizontal\\\\\">\n    <div class=\\\\\"arco-col arco-col-5 arco-form-item-label-col\\\\\"><label class=\\\\\"arco-form-item-label\\\\\">\n        <!--v-if-->\n        <!--v-if-->\n        <!--v-if-->\n      </label></div>\n    <div class=\\\\\"arco-col arco-col-19 arco-form-item-wrapper-col\\\\\" id=\\\\\"isRead\\\\\">\n      <div class=\\\\\"arco-form-item-content-wrapper\\\\\">\n        <div class=\\\\\"arco-form-item-content arco-form-item-content-flex\\\\\"><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span><span class=\\\\\"arco-checkbox-label\\\\\"> I have read the manual </span></label></div>\n      </div>\n      <!--v-if-->\n      <!--v-if-->\n    </div>\n  </div>\n  <div class=\\\\\"arco-row arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-horizontal\\\\\">\n    <div class=\\\\\"arco-col arco-col-5 arco-form-item-label-col\\\\\"><label class=\\\\\"arco-form-item-label\\\\\">\n        <!--v-if-->\n        <!--v-if-->\n        <!--v-if-->\n      </label></div>\n    <div class=\\\\\"arco-col arco-col-19 arco-form-item-wrapper-col\\\\\">\n      <div class=\\\\\"arco-form-item-content-wrapper\\\\\">\n        <div class=\\\\\"arco-form-item-content arco-form-item-content-flex\\\\\"><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"submit\\\\\">\n            <!--v-if-->Submit\n          </button></div>\n      </div>\n      <!--v-if-->\n      <!--v-if-->\n    </div>\n  </div>\n</form>\n {\n \\\\\"name\\\\\": \\\\\"\\\\\",\n \\\\\"post\\\\\": \\\\\"\\\\\",\n \\\\\"isRead\\\\\": false\n }\"\n`;\n\nexports[`<form> demo: render [custom] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 8px; row-gap: 8px; margin-bottom: 20px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button type=\\\\\"button\\\\\" role=\\\\\"switch\\\\\" aria-checked=\\\\\"false\\\\\" class=\\\\\"arco-switch arco-switch-type-circle\\\\\"><span class=\\\\\"arco-switch-handle\\\\\"><span class=\\\\\"arco-switch-handle-icon\\\\\"></span></span><!--  prettier-ignore  -->\n      <!--v-if-->\n    </button></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"> Disabled: false</div>\n</div>\n<form class=\\\\\"arco-form arco-form-layout-horizontal arco-form-size-medium\\\\\" style=\\\\\"width: 600px;\\\\\">\n  <div class=\\\\\"arco-row arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-horizontal\\\\\">\n    <div class=\\\\\"arco-col arco-col-5 arco-form-item-label-col\\\\\"><label class=\\\\\"arco-form-item-label\\\\\"><strong class=\\\\\"arco-form-item-label-required-symbol\\\\\"><svg fill=\\\\\"currentColor\\\\\" viewBox=\\\\\"0 0 1024 1024\\\\\" width=\\\\\"1em\\\\\" height=\\\\\"1em\\\\\"><path d=\\\\\"M583.338667 17.066667c18.773333 0 34.133333 15.36 34.133333 34.133333v349.013333l313.344-101.888a34.133333 34.133333 0 0 1 43.008 22.016l42.154667 129.706667a34.133333 34.133333 0 0 1-21.845334 43.178667l-315.733333 102.4 208.896 287.744a34.133333 34.133333 0 0 1-7.509333 47.786666l-110.421334 80.213334a34.133333 34.133333 0 0 1-47.786666-7.509334L505.685333 706.218667 288.426667 1005.226667a34.133333 34.133333 0 0 1-47.786667 7.509333l-110.421333-80.213333a34.133333 34.133333 0 0 1-7.509334-47.786667l214.186667-295.253333L29.013333 489.813333a34.133333 34.133333 0 0 1-22.016-43.008l42.154667-129.877333a34.133333 34.133333 0 0 1 43.008-22.016l320.512 104.106667L412.672 51.2c0-18.773333 15.36-34.133333 34.133333-34.133333h136.533334z\\\\\"></path></svg></strong>Username\n        <!--v-if-->\n        <!--v-if-->\n      </label></div>\n    <div class=\\\\\"arco-col arco-col-19 arco-form-item-wrapper-col\\\\\" id=\\\\\"name\\\\\">\n      <div class=\\\\\"arco-form-item-content-wrapper\\\\\">\n        <div class=\\\\\"arco-form-item-content arco-form-item-content-flex\\\\\"><input modelvalue=\\\\\"\\\\\" placeholder=\\\\\"please enter your username...\\\\\"></div>\n      </div>\n      <!--v-if-->\n      <!--v-if-->\n    </div>\n  </div>\n</form>\"\n`;\n\nexports[`<form> demo: render [disabled] correctly 1`] = `\n\"<form class=\\\\\"arco-form arco-form-layout-horizontal arco-form-size-medium\\\\\" style=\\\\\"width: 600px;\\\\\">\n  <div class=\\\\\"arco-row arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-horizontal\\\\\">\n    <div class=\\\\\"arco-col arco-col-5 arco-form-item-label-col\\\\\"><label class=\\\\\"arco-form-item-label\\\\\">\n        <!--v-if-->Username\n        <!--v-if-->\n        <!--v-if-->\n      </label></div>\n    <div class=\\\\\"arco-col arco-col-19 arco-form-item-wrapper-col\\\\\" id=\\\\\"name\\\\\">\n      <div class=\\\\\"arco-form-item-content-wrapper\\\\\">\n        <div class=\\\\\"arco-form-item-content arco-form-item-content-flex\\\\\"><span class=\\\\\"arco-input-wrapper arco-input-disabled\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" placeholder=\\\\\"please enter your username...\\\\\" disabled=\\\\\"\\\\\" value=\\\\\"\\\\\"><!----><!----></span></div>\n      </div>\n      <!--v-if-->\n      <!--v-if-->\n    </div>\n  </div>\n  <div class=\\\\\"arco-row arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-horizontal\\\\\">\n    <div class=\\\\\"arco-col arco-col-5 arco-form-item-label-col\\\\\"><label class=\\\\\"arco-form-item-label\\\\\">\n        <!--v-if-->Post\n        <!--v-if-->\n        <!--v-if-->\n      </label></div>\n    <div class=\\\\\"arco-col arco-col-19 arco-form-item-wrapper-col\\\\\" id=\\\\\"post\\\\\">\n      <div class=\\\\\"arco-form-item-content-wrapper\\\\\">\n        <div class=\\\\\"arco-form-item-content arco-form-item-content-flex\\\\\"><span class=\\\\\"arco-input-wrapper arco-input-disabled\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" placeholder=\\\\\"please enter your post...\\\\\" disabled=\\\\\"\\\\\" value=\\\\\"\\\\\"><!----><!----></span></div>\n      </div>\n      <!--v-if-->\n      <!--v-if-->\n    </div>\n  </div>\n  <div class=\\\\\"arco-row arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-horizontal\\\\\">\n    <div class=\\\\\"arco-col arco-col-5 arco-form-item-label-col\\\\\"><label class=\\\\\"arco-form-item-label\\\\\">\n        <!--v-if-->\n        <!--v-if-->\n        <!--v-if-->\n      </label></div>\n    <div class=\\\\\"arco-col arco-col-19 arco-form-item-wrapper-col\\\\\" id=\\\\\"isRead\\\\\">\n      <div class=\\\\\"arco-form-item-content-wrapper\\\\\">\n        <div class=\\\\\"arco-form-item-content arco-form-item-content-flex\\\\\"><label aria-disabled=\\\\\"true\\\\\" class=\\\\\"arco-checkbox arco-checkbox-disabled\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" disabled=\\\\\"\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-icon-hover-disabled arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span><span class=\\\\\"arco-checkbox-label\\\\\"> I have read the manual </span></label></div>\n      </div>\n      <!--v-if-->\n      <!--v-if-->\n    </div>\n  </div>\n  <div class=\\\\\"arco-row arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-horizontal\\\\\">\n    <div class=\\\\\"arco-col arco-col-5 arco-form-item-label-col\\\\\"><label class=\\\\\"arco-form-item-label\\\\\">\n        <!--v-if-->\n        <!--v-if-->\n        <!--v-if-->\n      </label></div>\n    <div class=\\\\\"arco-col arco-col-19 arco-form-item-wrapper-col\\\\\">\n      <div class=\\\\\"arco-form-item-content-wrapper\\\\\">\n        <div class=\\\\\"arco-form-item-content arco-form-item-content-flex\\\\\"><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal arco-btn-disabled\\\\\" type=\\\\\"button\\\\\" disabled=\\\\\"\\\\\">\n            <!--v-if-->Submit\n          </button></div>\n      </div>\n      <!--v-if-->\n      <!--v-if-->\n    </div>\n  </div>\n</form>\n {\n \\\\\"name\\\\\": \\\\\"\\\\\",\n \\\\\"post\\\\\": \\\\\"\\\\\",\n \\\\\"isRead\\\\\": false\n }\"\n`;\n\nexports[`<form> demo: render [dynamic] correctly 1`] = `\n\"<form class=\\\\\"arco-form arco-form-layout-horizontal arco-form-size-medium\\\\\" style=\\\\\"width: 600px;\\\\\">\n  <div class=\\\\\"arco-row arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-horizontal\\\\\">\n    <div class=\\\\\"arco-col arco-col-5 arco-form-item-label-col\\\\\"><label class=\\\\\"arco-form-item-label\\\\\">\n        <!--v-if-->Username\n        <!--v-if-->\n        <!--v-if-->\n      </label></div>\n    <div class=\\\\\"arco-col arco-col-19 arco-form-item-wrapper-col\\\\\" id=\\\\\"name\\\\\">\n      <div class=\\\\\"arco-form-item-content-wrapper\\\\\">\n        <div class=\\\\\"arco-form-item-content arco-form-item-content-flex\\\\\"><span class=\\\\\"arco-input-wrapper\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" placeholder=\\\\\"please enter your username...\\\\\" value=\\\\\"\\\\\"><!----><!----></span></div>\n      </div>\n      <!--v-if-->\n      <!--v-if-->\n    </div>\n  </div>\n  <div class=\\\\\"arco-row arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-horizontal\\\\\">\n    <div class=\\\\\"arco-col arco-col-5 arco-form-item-label-col\\\\\"><label class=\\\\\"arco-form-item-label\\\\\">\n        <!--v-if-->Post-0\n        <!--v-if-->\n        <!--v-if-->\n      </label></div>\n    <div class=\\\\\"arco-col arco-col-19 arco-form-item-wrapper-col\\\\\" id=\\\\\"posts_0_value\\\\\">\n      <div class=\\\\\"arco-form-item-content-wrapper\\\\\">\n        <div class=\\\\\"arco-form-item-content arco-form-item-content-flex\\\\\"><span class=\\\\\"arco-input-wrapper\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" placeholder=\\\\\"please enter your post...\\\\\" value=\\\\\"\\\\\"><!----><!----></span><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\" style=\\\\\"margin-left: 10px;\\\\\">\n            <!--v-if-->Delete\n          </button></div>\n      </div>\n      <!--v-if-->\n      <!--v-if-->\n    </div>\n  </div>\n</form>\n<div><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n    <!--v-if-->Add Post\n  </button></div>\n {\n \\\\\"name\\\\\": \\\\\"\\\\\",\n \\\\\"posts\\\\\": [\n {\n \\\\\"value\\\\\": \\\\\"\\\\\"\n }\n ]\n }\"\n`;\n\nexports[`<form> demo: render [extra] correctly 1`] = `\n\"<form class=\\\\\"arco-form arco-form-layout-horizontal arco-form-size-medium\\\\\" style=\\\\\"width: 600px;\\\\\">\n  <div class=\\\\\"arco-row arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-horizontal\\\\\">\n    <div class=\\\\\"arco-col arco-col-5 arco-form-item-label-col\\\\\"><label class=\\\\\"arco-form-item-label\\\\\"><strong class=\\\\\"arco-form-item-label-required-symbol\\\\\"><svg fill=\\\\\"currentColor\\\\\" viewBox=\\\\\"0 0 1024 1024\\\\\" width=\\\\\"1em\\\\\" height=\\\\\"1em\\\\\"><path d=\\\\\"M583.338667 17.066667c18.773333 0 34.133333 15.36 34.133333 34.133333v349.013333l313.344-101.888a34.133333 34.133333 0 0 1 43.008 22.016l42.154667 129.706667a34.133333 34.133333 0 0 1-21.845334 43.178667l-315.733333 102.4 208.896 287.744a34.133333 34.133333 0 0 1-7.509333 47.786666l-110.421334 80.213334a34.133333 34.133333 0 0 1-47.786666-7.509334L505.685333 706.218667 288.426667 1005.226667a34.133333 34.133333 0 0 1-47.786667 7.509333l-110.421333-80.213333a34.133333 34.133333 0 0 1-7.509334-47.786667l214.186667-295.253333L29.013333 489.813333a34.133333 34.133333 0 0 1-22.016-43.008l42.154667-129.877333a34.133333 34.133333 0 0 1 43.008-22.016l320.512 104.106667L412.672 51.2c0-18.773333 15.36-34.133333 34.133333-34.133333h136.533334z\\\\\"></path></svg></strong>Username\n        <!--v-if-->\n        <!--v-if-->\n      </label></div>\n    <div class=\\\\\"arco-col arco-col-19 arco-form-item-wrapper-col\\\\\" id=\\\\\"name\\\\\">\n      <div class=\\\\\"arco-form-item-content-wrapper\\\\\">\n        <div class=\\\\\"arco-form-item-content arco-form-item-content-flex\\\\\"><span class=\\\\\"arco-input-wrapper\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" placeholder=\\\\\"please enter your username...\\\\\" value=\\\\\"\\\\\"><!----><!----></span></div>\n      </div>\n      <!--v-if-->\n      <div class=\\\\\"arco-form-item-extra\\\\\">\n        <div>Used to login</div>\n      </div>\n    </div>\n  </div>\n  <div class=\\\\\"arco-row arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-horizontal arco-form-item-has-help\\\\\">\n    <div class=\\\\\"arco-col arco-col-5 arco-form-item-label-col\\\\\"><label class=\\\\\"arco-form-item-label\\\\\"><strong class=\\\\\"arco-form-item-label-required-symbol\\\\\"><svg fill=\\\\\"currentColor\\\\\" viewBox=\\\\\"0 0 1024 1024\\\\\" width=\\\\\"1em\\\\\" height=\\\\\"1em\\\\\"><path d=\\\\\"M583.338667 17.066667c18.773333 0 34.133333 15.36 34.133333 34.133333v349.013333l313.344-101.888a34.133333 34.133333 0 0 1 43.008 22.016l42.154667 129.706667a34.133333 34.133333 0 0 1-21.845334 43.178667l-315.733333 102.4 208.896 287.744a34.133333 34.133333 0 0 1-7.509333 47.786666l-110.421334 80.213334a34.133333 34.133333 0 0 1-47.786666-7.509334L505.685333 706.218667 288.426667 1005.226667a34.133333 34.133333 0 0 1-47.786667 7.509333l-110.421333-80.213333a34.133333 34.133333 0 0 1-7.509334-47.786667l214.186667-295.253333L29.013333 489.813333a34.133333 34.133333 0 0 1-22.016-43.008l42.154667-129.877333a34.133333 34.133333 0 0 1 43.008-22.016l320.512 104.106667L412.672 51.2c0-18.773333 15.36-34.133333 34.133333-34.133333h136.533334z\\\\\"></path></svg></strong>Post\n        <!--v-if-->\n        <!--v-if-->\n      </label></div>\n    <div class=\\\\\"arco-col arco-col-19 arco-form-item-wrapper-col\\\\\" id=\\\\\"post\\\\\">\n      <div class=\\\\\"arco-form-item-content-wrapper\\\\\">\n        <div class=\\\\\"arco-form-item-content arco-form-item-content-flex\\\\\"><span class=\\\\\"arco-input-wrapper\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" placeholder=\\\\\"please enter your post...\\\\\" value=\\\\\"\\\\\"><!----><!----></span></div>\n      </div>\n      <transition-stub name=\\\\\"form-blink\\\\\" appear=\\\\\"true\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\">\n        <div class=\\\\\"arco-form-item-message arco-form-item-message-help\\\\\">\n          <div>Custom valitae message</div>\n        </div>\n      </transition-stub>\n      <div class=\\\\\"arco-form-item-extra\\\\\">\n        <div>Used to login</div>\n      </div>\n    </div>\n  </div>\n  <div class=\\\\\"arco-row arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-horizontal\\\\\">\n    <div class=\\\\\"arco-col arco-col-5 arco-form-item-label-col\\\\\"><label class=\\\\\"arco-form-item-label\\\\\">\n        <!--v-if-->\n        <!--v-if-->\n        <!--v-if-->\n      </label></div>\n    <div class=\\\\\"arco-col arco-col-19 arco-form-item-wrapper-col\\\\\" id=\\\\\"isRead\\\\\">\n      <div class=\\\\\"arco-form-item-content-wrapper\\\\\">\n        <div class=\\\\\"arco-form-item-content arco-form-item-content-flex\\\\\"><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span><span class=\\\\\"arco-checkbox-label\\\\\"> I have read the manual </span></label></div>\n      </div>\n      <!--v-if-->\n      <!--v-if-->\n    </div>\n  </div>\n</form>\n {\n \\\\\"name\\\\\": \\\\\"\\\\\",\n \\\\\"post\\\\\": \\\\\"\\\\\",\n \\\\\"isRead\\\\\": false\n }\"\n`;\n\nexports[`<form> demo: render [grid] correctly 1`] = `\n\"<form class=\\\\\"arco-form arco-form-layout-horizontal arco-form-size-medium\\\\\">\n  <div class=\\\\\"arco-row arco-row-align-start arco-row-justify-start\\\\\" style=\\\\\"margin-left: -8px; margin-right: -8px;\\\\\">\n    <div class=\\\\\"arco-col arco-col-8\\\\\" style=\\\\\"padding-left: 8px; padding-right: 8px;\\\\\">\n      <div class=\\\\\"arco-row arco-row-nowrap arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-horizontal\\\\\">\n        <div class=\\\\\"arco-col arco-form-item-label-col arco-form-item-label-col-flex\\\\\" style=\\\\\"flex: 0 0 100px;\\\\\"><label class=\\\\\"arco-form-item-label\\\\\">\n            <!--v-if-->Value 1\n            <!--v-if-->\n            <!--v-if-->\n          </label></div>\n        <div class=\\\\\"arco-col arco-form-item-wrapper-col\\\\\" style=\\\\\"flex-basis: auto;\\\\\" id=\\\\\"value1\\\\\">\n          <div class=\\\\\"arco-form-item-content-wrapper\\\\\">\n            <div class=\\\\\"arco-form-item-content arco-form-item-content-flex\\\\\"><span class=\\\\\"arco-input-wrapper\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" placeholder=\\\\\"please enter...\\\\\" value=\\\\\"\\\\\"><!----><!----></span></div>\n          </div>\n          <!--v-if-->\n          <!--v-if-->\n        </div>\n      </div>\n    </div>\n    <div class=\\\\\"arco-col arco-col-8\\\\\" style=\\\\\"padding-left: 8px; padding-right: 8px;\\\\\">\n      <div class=\\\\\"arco-row arco-row-nowrap arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-horizontal\\\\\">\n        <div class=\\\\\"arco-col arco-form-item-label-col arco-form-item-label-col-flex\\\\\" style=\\\\\"flex: 0 0 80px;\\\\\"><label class=\\\\\"arco-form-item-label\\\\\">\n            <!--v-if-->Value 2\n            <!--v-if-->\n            <!--v-if-->\n          </label></div>\n        <div class=\\\\\"arco-col arco-form-item-wrapper-col\\\\\" style=\\\\\"flex-basis: auto;\\\\\" id=\\\\\"value2\\\\\">\n          <div class=\\\\\"arco-form-item-content-wrapper\\\\\">\n            <div class=\\\\\"arco-form-item-content arco-form-item-content-flex\\\\\"><span class=\\\\\"arco-input-wrapper\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" placeholder=\\\\\"please enter...\\\\\" value=\\\\\"\\\\\"><!----><!----></span></div>\n          </div>\n          <!--v-if-->\n          <!--v-if-->\n        </div>\n      </div>\n    </div>\n    <div class=\\\\\"arco-col arco-col-8\\\\\" style=\\\\\"padding-left: 8px; padding-right: 8px;\\\\\">\n      <div class=\\\\\"arco-row arco-row-nowrap arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-horizontal\\\\\">\n        <div class=\\\\\"arco-col arco-form-item-label-col arco-form-item-label-col-flex\\\\\" style=\\\\\"flex: 0 0 80px;\\\\\"><label class=\\\\\"arco-form-item-label\\\\\">\n            <!--v-if-->Value 3\n            <!--v-if-->\n            <!--v-if-->\n          </label></div>\n        <div class=\\\\\"arco-col arco-form-item-wrapper-col\\\\\" style=\\\\\"flex-basis: auto;\\\\\" id=\\\\\"value3\\\\\">\n          <div class=\\\\\"arco-form-item-content-wrapper\\\\\">\n            <div class=\\\\\"arco-form-item-content arco-form-item-content-flex\\\\\"><span class=\\\\\"arco-input-wrapper\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" placeholder=\\\\\"please enter...\\\\\" value=\\\\\"\\\\\"><!----><!----></span></div>\n          </div>\n          <!--v-if-->\n          <!--v-if-->\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\\\\\"arco-row arco-row-align-start arco-row-justify-start\\\\\" style=\\\\\"margin-left: -8px; margin-right: -8px;\\\\\">\n    <div class=\\\\\"arco-col arco-col-16\\\\\" style=\\\\\"padding-left: 8px; padding-right: 8px;\\\\\">\n      <div class=\\\\\"arco-row arco-row-nowrap arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-horizontal\\\\\">\n        <div class=\\\\\"arco-col arco-form-item-label-col arco-form-item-label-col-flex\\\\\" style=\\\\\"flex: 0 0 100px;\\\\\"><label class=\\\\\"arco-form-item-label\\\\\">\n            <!--v-if-->Value 4\n            <!--v-if-->\n            <!--v-if-->\n          </label></div>\n        <div class=\\\\\"arco-col arco-form-item-wrapper-col\\\\\" style=\\\\\"flex-basis: auto;\\\\\" id=\\\\\"value4\\\\\">\n          <div class=\\\\\"arco-form-item-content-wrapper\\\\\">\n            <div class=\\\\\"arco-form-item-content arco-form-item-content-flex\\\\\"><span class=\\\\\"arco-input-wrapper\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" placeholder=\\\\\"please enter...\\\\\" value=\\\\\"\\\\\"><!----><!----></span></div>\n          </div>\n          <!--v-if-->\n          <!--v-if-->\n        </div>\n      </div>\n    </div>\n    <div class=\\\\\"arco-col arco-col-8\\\\\" style=\\\\\"padding-left: 8px; padding-right: 8px;\\\\\">\n      <div class=\\\\\"arco-row arco-row-nowrap arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-horizontal\\\\\">\n        <div class=\\\\\"arco-col arco-form-item-label-col arco-form-item-label-col-flex\\\\\" style=\\\\\"flex: 0 0 80px;\\\\\"><label class=\\\\\"arco-form-item-label\\\\\">\n            <!--v-if-->Value 5\n            <!--v-if-->\n            <!--v-if-->\n          </label></div>\n        <div class=\\\\\"arco-col arco-form-item-wrapper-col\\\\\" style=\\\\\"flex-basis: auto;\\\\\" id=\\\\\"value5\\\\\">\n          <div class=\\\\\"arco-form-item-content-wrapper\\\\\">\n            <div class=\\\\\"arco-form-item-content arco-form-item-content-flex\\\\\"><span class=\\\\\"arco-input-wrapper\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" placeholder=\\\\\"please enter...\\\\\" value=\\\\\"\\\\\"><!----><!----></span></div>\n          </div>\n          <!--v-if-->\n          <!--v-if-->\n        </div>\n      </div>\n    </div>\n  </div>\n</form>\n {\n \\\\\"value1\\\\\": \\\\\"\\\\\",\n \\\\\"value2\\\\\": \\\\\"\\\\\",\n \\\\\"value3\\\\\": \\\\\"\\\\\",\n \\\\\"value4\\\\\": \\\\\"\\\\\",\n \\\\\"value5\\\\\": \\\\\"\\\\\"\n }\"\n`;\n\nexports[`<form> demo: render [layout] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-vertical\\\\\" style=\\\\\"column-gap: 24px; row-gap: 24px; width: 600px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-radio-group-button arco-radio-group-size-medium arco-radio-group-direction-horizontal\\\\\"><label class=\\\\\"arco-radio-button arco-radio-checked\\\\\"><input type=\\\\\"radio\\\\\" checked=\\\\\"\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"horizontal\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">horizontal</span></label><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"vertical\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">vertical</span></label><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"inline\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">inline</span></label></span></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <form class=\\\\\"arco-form arco-form-layout-horizontal arco-form-size-medium\\\\\">\n      <div class=\\\\\"arco-row arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-horizontal\\\\\">\n        <div class=\\\\\"arco-col arco-col-5 arco-form-item-label-col\\\\\"><label class=\\\\\"arco-form-item-label\\\\\">\n            <!--v-if-->Username\n            <!--v-if-->\n            <!--v-if-->\n          </label></div>\n        <div class=\\\\\"arco-col arco-col-19 arco-form-item-wrapper-col\\\\\" id=\\\\\"name\\\\\">\n          <div class=\\\\\"arco-form-item-content-wrapper\\\\\">\n            <div class=\\\\\"arco-form-item-content arco-form-item-content-flex\\\\\"><span class=\\\\\"arco-input-wrapper\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" placeholder=\\\\\"please enter your username...\\\\\" value=\\\\\"\\\\\"><!----><!----></span></div>\n          </div>\n          <!--v-if-->\n          <!--v-if-->\n        </div>\n      </div>\n      <div class=\\\\\"arco-row arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-horizontal\\\\\">\n        <div class=\\\\\"arco-col arco-col-5 arco-form-item-label-col\\\\\"><label class=\\\\\"arco-form-item-label\\\\\">\n            <!--v-if-->Post\n            <!--v-if-->\n            <!--v-if-->\n          </label></div>\n        <div class=\\\\\"arco-col arco-col-19 arco-form-item-wrapper-col\\\\\" id=\\\\\"post\\\\\">\n          <div class=\\\\\"arco-form-item-content-wrapper\\\\\">\n            <div class=\\\\\"arco-form-item-content arco-form-item-content-flex\\\\\"><span class=\\\\\"arco-input-wrapper\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" placeholder=\\\\\"please enter your post...\\\\\" value=\\\\\"\\\\\"><!----><!----></span></div>\n          </div>\n          <!--v-if-->\n          <!--v-if-->\n        </div>\n      </div>\n      <div class=\\\\\"arco-row arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-horizontal\\\\\">\n        <div class=\\\\\"arco-col arco-col-5 arco-form-item-label-col\\\\\"><label class=\\\\\"arco-form-item-label\\\\\">\n            <!--v-if-->\n            <!--v-if-->\n            <!--v-if-->\n          </label></div>\n        <div class=\\\\\"arco-col arco-col-19 arco-form-item-wrapper-col\\\\\" id=\\\\\"isRead\\\\\">\n          <div class=\\\\\"arco-form-item-content-wrapper\\\\\">\n            <div class=\\\\\"arco-form-item-content arco-form-item-content-flex\\\\\"><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span><span class=\\\\\"arco-checkbox-label\\\\\"> I have read the manual </span></label></div>\n          </div>\n          <!--v-if-->\n          <!--v-if-->\n        </div>\n      </div>\n      <div class=\\\\\"arco-row arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-horizontal\\\\\">\n        <div class=\\\\\"arco-col arco-col-5 arco-form-item-label-col\\\\\"><label class=\\\\\"arco-form-item-label\\\\\">\n            <!--v-if-->\n            <!--v-if-->\n            <!--v-if-->\n          </label></div>\n        <div class=\\\\\"arco-col arco-col-19 arco-form-item-wrapper-col\\\\\">\n          <div class=\\\\\"arco-form-item-content-wrapper\\\\\">\n            <div class=\\\\\"arco-form-item-content arco-form-item-content-flex\\\\\"><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n                <!--v-if-->Submit\n              </button></div>\n          </div>\n          <!--v-if-->\n          <!--v-if-->\n        </div>\n      </div>\n    </form>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div>{\n      \\\\\"name\\\\\": \\\\\"\\\\\",\n      \\\\\"post\\\\\": \\\\\"\\\\\",\n      \\\\\"isRead\\\\\": false\n      }</div>\n  </div>\n</div>\"\n`;\n\nexports[`<form> demo: render [nest] correctly 1`] = `\n\"<form class=\\\\\"arco-form arco-form-layout-horizontal arco-form-size-medium\\\\\" style=\\\\\"width: 600px;\\\\\">\n  <div class=\\\\\"arco-row arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-horizontal\\\\\">\n    <div class=\\\\\"arco-col arco-col-5 arco-form-item-label-col\\\\\"><label class=\\\\\"arco-form-item-label\\\\\">\n        <!--v-if-->Username\n        <!--v-if-->\n        <!--v-if-->\n      </label></div>\n    <div class=\\\\\"arco-col arco-col-19 arco-form-item-wrapper-col\\\\\">\n      <div class=\\\\\"arco-form-item-content-wrapper\\\\\">\n        <div class=\\\\\"arco-form-item-content\\\\\">\n          <div class=\\\\\"arco-row arco-row-align-start arco-row-justify-start\\\\\" style=\\\\\"margin-left: -4px; margin-right: -4px;\\\\\">\n            <div class=\\\\\"arco-col arco-col-12\\\\\" style=\\\\\"padding-left: 4px; padding-right: 4px;\\\\\"><span class=\\\\\"arco-input-wrapper\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" placeholder=\\\\\"please enter your firstname...\\\\\" value=\\\\\"\\\\\"><!----><!----></span></div>\n            <div class=\\\\\"arco-col arco-col-12\\\\\" style=\\\\\"padding-left: 4px; padding-right: 4px;\\\\\"><span class=\\\\\"arco-input-wrapper\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" placeholder=\\\\\"please enter your lastname...\\\\\" value=\\\\\"\\\\\"><!----><!----></span></div>\n          </div>\n        </div>\n      </div>\n      <!--v-if-->\n      <div class=\\\\\"arco-form-item-extra\\\\\">Show error message together</div>\n    </div>\n  </div>\n  <div class=\\\\\"arco-row arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-horizontal\\\\\">\n    <div class=\\\\\"arco-col arco-col-5 arco-form-item-label-col\\\\\"><label class=\\\\\"arco-form-item-label\\\\\">\n        <!--v-if-->Username\n        <!--v-if-->\n        <!--v-if-->\n      </label></div>\n    <div class=\\\\\"arco-col arco-col-19 arco-form-item-wrapper-col\\\\\">\n      <div class=\\\\\"arco-form-item-content-wrapper\\\\\">\n        <div class=\\\\\"arco-form-item-content\\\\\">\n          <div class=\\\\\"arco-row arco-row-align-start arco-row-justify-start\\\\\" style=\\\\\"margin-left: -4px; margin-right: -4px;\\\\\">\n            <div class=\\\\\"arco-col arco-col-12\\\\\" style=\\\\\"padding-left: 4px; padding-right: 4px;\\\\\">\n              <div class=\\\\\"arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-horizontal\\\\\">\n                <!--v-if-->\n                <div class=\\\\\"arco-form-item-wrapper-col\\\\\" id=\\\\\"separate_firstname\\\\\">\n                  <div class=\\\\\"arco-form-item-content-wrapper\\\\\">\n                    <div class=\\\\\"arco-form-item-content arco-form-item-content-flex\\\\\"><span class=\\\\\"arco-input-wrapper\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" placeholder=\\\\\"please enter your firstname...\\\\\" value=\\\\\"\\\\\"><!----><!----></span></div>\n                  </div>\n                  <!--v-if-->\n                  <div class=\\\\\"arco-form-item-extra\\\\\">Show error message separate</div>\n                </div>\n              </div>\n            </div>\n            <div class=\\\\\"arco-col arco-col-12\\\\\" style=\\\\\"padding-left: 4px; padding-right: 4px;\\\\\">\n              <div class=\\\\\"arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-horizontal\\\\\">\n                <!--v-if-->\n                <div class=\\\\\"arco-form-item-wrapper-col\\\\\" id=\\\\\"separate_lastname\\\\\">\n                  <div class=\\\\\"arco-form-item-content-wrapper\\\\\">\n                    <div class=\\\\\"arco-form-item-content arco-form-item-content-flex\\\\\"><span class=\\\\\"arco-input-wrapper\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" placeholder=\\\\\"please enter your lastname...\\\\\" value=\\\\\"\\\\\"><!----><!----></span></div>\n                  </div>\n                  <!--v-if-->\n                  <!--v-if-->\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n      <!--v-if-->\n      <!--v-if-->\n    </div>\n  </div>\n  <div class=\\\\\"arco-row arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-horizontal\\\\\">\n    <div class=\\\\\"arco-col arco-col-5 arco-form-item-label-col\\\\\"><label class=\\\\\"arco-form-item-label\\\\\">\n        <!--v-if-->Posts\n        <!--v-if-->\n        <!--v-if-->\n      </label></div>\n    <div class=\\\\\"arco-col arco-col-19 arco-form-item-wrapper-col\\\\\">\n      <div class=\\\\\"arco-form-item-content-wrapper\\\\\">\n        <div class=\\\\\"arco-form-item-content\\\\\">\n          <div class=\\\\\"arco-space arco-space-vertical arco-space-fill\\\\\" style=\\\\\"column-gap: 8px; row-gap: 8px;\\\\\">\n            <!---->\n            <div class=\\\\\"arco-space-item\\\\\">\n              <div class=\\\\\"arco-row arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-horizontal\\\\\">\n                <div class=\\\\\"arco-col arco-col-5 arco-form-item-label-col\\\\\"><label class=\\\\\"arco-form-item-label\\\\\">\n                    <!--v-if-->Post1\n                    <!--v-if-->\n                    <!--v-if-->\n                  </label></div>\n                <div class=\\\\\"arco-col arco-col-19 arco-form-item-wrapper-col\\\\\" id=\\\\\"posts_post1\\\\\">\n                  <div class=\\\\\"arco-form-item-content-wrapper\\\\\">\n                    <div class=\\\\\"arco-form-item-content arco-form-item-content-flex\\\\\"><span class=\\\\\"arco-input-wrapper\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" placeholder=\\\\\"please enter your post...\\\\\" value=\\\\\"\\\\\"><!----><!----></span></div>\n                  </div>\n                  <!--v-if-->\n                  <!--v-if-->\n                </div>\n              </div>\n            </div>\n            <!---->\n            <div class=\\\\\"arco-space-item\\\\\">\n              <div class=\\\\\"arco-row arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-horizontal\\\\\">\n                <div class=\\\\\"arco-col arco-col-5 arco-form-item-label-col\\\\\"><label class=\\\\\"arco-form-item-label\\\\\">\n                    <!--v-if-->Post2\n                    <!--v-if-->\n                    <!--v-if-->\n                  </label></div>\n                <div class=\\\\\"arco-col arco-col-19 arco-form-item-wrapper-col\\\\\" id=\\\\\"posts_post2\\\\\">\n                  <div class=\\\\\"arco-form-item-content-wrapper\\\\\">\n                    <div class=\\\\\"arco-form-item-content arco-form-item-content-flex\\\\\"><span class=\\\\\"arco-input-wrapper\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" placeholder=\\\\\"please enter your post...\\\\\" value=\\\\\"\\\\\"><!----><!----></span></div>\n                  </div>\n                  <!--v-if-->\n                  <!--v-if-->\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n      <!--v-if-->\n      <!--v-if-->\n    </div>\n  </div>\n  <div class=\\\\\"arco-row arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-horizontal\\\\\">\n    <div class=\\\\\"arco-col arco-col-5 arco-form-item-label-col\\\\\"><label class=\\\\\"arco-form-item-label\\\\\">\n        <!--v-if-->\n        <!--v-if-->\n        <!--v-if-->\n      </label></div>\n    <div class=\\\\\"arco-col arco-col-19 arco-form-item-wrapper-col\\\\\" id=\\\\\"isRead\\\\\">\n      <div class=\\\\\"arco-form-item-content-wrapper\\\\\">\n        <div class=\\\\\"arco-form-item-content arco-form-item-content-flex\\\\\"><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span><span class=\\\\\"arco-checkbox-label\\\\\"> I have read the manual </span></label></div>\n      </div>\n      <!--v-if-->\n      <!--v-if-->\n    </div>\n  </div>\n</form>\n {\n \\\\\"together\\\\\": {\n \\\\\"firstname\\\\\": \\\\\"\\\\\",\n \\\\\"lastname\\\\\": \\\\\"\\\\\"\n },\n \\\\\"separate\\\\\": {\n \\\\\"firstname\\\\\": \\\\\"\\\\\",\n \\\\\"lastname\\\\\": \\\\\"\\\\\"\n },\n \\\\\"posts\\\\\": {\n \\\\\"post1\\\\\": \\\\\"\\\\\",\n \\\\\"post2\\\\\": \\\\\"\\\\\"\n },\n \\\\\"isRead\\\\\": false\n }\"\n`;\n\nexports[`<form> demo: render [scroll] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 8px; row-gap: 8px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n      <!--v-if-->Submit\n    </button></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n      <!--v-if-->Reset\n    </button></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n      <!--v-if-->Scroll to the last field\n    </button></div>\n</div>\n<form class=\\\\\"arco-form arco-form-layout-horizontal arco-form-size-medium\\\\\" style=\\\\\"width: 500px; height: 300px; margin-top: 20px; padding-right: 16px; overflow: auto;\\\\\">\n  <div class=\\\\\"arco-row arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-horizontal\\\\\">\n    <div class=\\\\\"arco-col arco-col-5 arco-form-item-label-col\\\\\"><label class=\\\\\"arco-form-item-label\\\\\"><strong class=\\\\\"arco-form-item-label-required-symbol\\\\\"><svg fill=\\\\\"currentColor\\\\\" viewBox=\\\\\"0 0 1024 1024\\\\\" width=\\\\\"1em\\\\\" height=\\\\\"1em\\\\\"><path d=\\\\\"M583.338667 17.066667c18.773333 0 34.133333 15.36 34.133333 34.133333v349.013333l313.344-101.888a34.133333 34.133333 0 0 1 43.008 22.016l42.154667 129.706667a34.133333 34.133333 0 0 1-21.845334 43.178667l-315.733333 102.4 208.896 287.744a34.133333 34.133333 0 0 1-7.509333 47.786666l-110.421334 80.213334a34.133333 34.133333 0 0 1-47.786666-7.509334L505.685333 706.218667 288.426667 1005.226667a34.133333 34.133333 0 0 1-47.786667 7.509333l-110.421333-80.213333a34.133333 34.133333 0 0 1-7.509334-47.786667l214.186667-295.253333L29.013333 489.813333a34.133333 34.133333 0 0 1-22.016-43.008l42.154667-129.877333a34.133333 34.133333 0 0 1 43.008-22.016l320.512 104.106667L412.672 51.2c0-18.773333 15.36-34.133333 34.133333-34.133333h136.533334z\\\\\"></path></svg></strong>user0\n        <!--v-if-->\n        <!--v-if-->\n      </label></div>\n    <div class=\\\\\"arco-col arco-col-19 arco-form-item-wrapper-col\\\\\" id=\\\\\"name0\\\\\">\n      <div class=\\\\\"arco-form-item-content-wrapper\\\\\">\n        <div class=\\\\\"arco-form-item-content arco-form-item-content-flex\\\\\"><span class=\\\\\"arco-input-wrapper\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" value=\\\\\"0\\\\\"><!----><!----></span></div>\n      </div>\n      <!--v-if-->\n      <!--v-if-->\n    </div>\n  </div>\n  <div class=\\\\\"arco-row arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-horizontal\\\\\">\n    <div class=\\\\\"arco-col arco-col-5 arco-form-item-label-col\\\\\"><label class=\\\\\"arco-form-item-label\\\\\"><strong class=\\\\\"arco-form-item-label-required-symbol\\\\\"><svg fill=\\\\\"currentColor\\\\\" viewBox=\\\\\"0 0 1024 1024\\\\\" width=\\\\\"1em\\\\\" height=\\\\\"1em\\\\\"><path d=\\\\\"M583.338667 17.066667c18.773333 0 34.133333 15.36 34.133333 34.133333v349.013333l313.344-101.888a34.133333 34.133333 0 0 1 43.008 22.016l42.154667 129.706667a34.133333 34.133333 0 0 1-21.845334 43.178667l-315.733333 102.4 208.896 287.744a34.133333 34.133333 0 0 1-7.509333 47.786666l-110.421334 80.213334a34.133333 34.133333 0 0 1-47.786666-7.509334L505.685333 706.218667 288.426667 1005.226667a34.133333 34.133333 0 0 1-47.786667 7.509333l-110.421333-80.213333a34.133333 34.133333 0 0 1-7.509334-47.786667l214.186667-295.253333L29.013333 489.813333a34.133333 34.133333 0 0 1-22.016-43.008l42.154667-129.877333a34.133333 34.133333 0 0 1 43.008-22.016l320.512 104.106667L412.672 51.2c0-18.773333 15.36-34.133333 34.133333-34.133333h136.533334z\\\\\"></path></svg></strong>user1\n        <!--v-if-->\n        <!--v-if-->\n      </label></div>\n    <div class=\\\\\"arco-col arco-col-19 arco-form-item-wrapper-col\\\\\" id=\\\\\"name1\\\\\">\n      <div class=\\\\\"arco-form-item-content-wrapper\\\\\">\n        <div class=\\\\\"arco-form-item-content arco-form-item-content-flex\\\\\"><span class=\\\\\"arco-input-wrapper\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" value=\\\\\"1\\\\\"><!----><!----></span></div>\n      </div>\n      <!--v-if-->\n      <!--v-if-->\n    </div>\n  </div>\n  <div class=\\\\\"arco-row arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-horizontal\\\\\">\n    <div class=\\\\\"arco-col arco-col-5 arco-form-item-label-col\\\\\"><label class=\\\\\"arco-form-item-label\\\\\"><strong class=\\\\\"arco-form-item-label-required-symbol\\\\\"><svg fill=\\\\\"currentColor\\\\\" viewBox=\\\\\"0 0 1024 1024\\\\\" width=\\\\\"1em\\\\\" height=\\\\\"1em\\\\\"><path d=\\\\\"M583.338667 17.066667c18.773333 0 34.133333 15.36 34.133333 34.133333v349.013333l313.344-101.888a34.133333 34.133333 0 0 1 43.008 22.016l42.154667 129.706667a34.133333 34.133333 0 0 1-21.845334 43.178667l-315.733333 102.4 208.896 287.744a34.133333 34.133333 0 0 1-7.509333 47.786666l-110.421334 80.213334a34.133333 34.133333 0 0 1-47.786666-7.509334L505.685333 706.218667 288.426667 1005.226667a34.133333 34.133333 0 0 1-47.786667 7.509333l-110.421333-80.213333a34.133333 34.133333 0 0 1-7.509334-47.786667l214.186667-295.253333L29.013333 489.813333a34.133333 34.133333 0 0 1-22.016-43.008l42.154667-129.877333a34.133333 34.133333 0 0 1 43.008-22.016l320.512 104.106667L412.672 51.2c0-18.773333 15.36-34.133333 34.133333-34.133333h136.533334z\\\\\"></path></svg></strong>user2\n        <!--v-if-->\n        <!--v-if-->\n      </label></div>\n    <div class=\\\\\"arco-col arco-col-19 arco-form-item-wrapper-col\\\\\" id=\\\\\"name2\\\\\">\n      <div class=\\\\\"arco-form-item-content-wrapper\\\\\">\n        <div class=\\\\\"arco-form-item-content arco-form-item-content-flex\\\\\"><span class=\\\\\"arco-input-wrapper\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" value=\\\\\"2\\\\\"><!----><!----></span></div>\n      </div>\n      <!--v-if-->\n      <!--v-if-->\n    </div>\n  </div>\n  <div class=\\\\\"arco-row arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-horizontal\\\\\">\n    <div class=\\\\\"arco-col arco-col-5 arco-form-item-label-col\\\\\"><label class=\\\\\"arco-form-item-label\\\\\"><strong class=\\\\\"arco-form-item-label-required-symbol\\\\\"><svg fill=\\\\\"currentColor\\\\\" viewBox=\\\\\"0 0 1024 1024\\\\\" width=\\\\\"1em\\\\\" height=\\\\\"1em\\\\\"><path d=\\\\\"M583.338667 17.066667c18.773333 0 34.133333 15.36 34.133333 34.133333v349.013333l313.344-101.888a34.133333 34.133333 0 0 1 43.008 22.016l42.154667 129.706667a34.133333 34.133333 0 0 1-21.845334 43.178667l-315.733333 102.4 208.896 287.744a34.133333 34.133333 0 0 1-7.509333 47.786666l-110.421334 80.213334a34.133333 34.133333 0 0 1-47.786666-7.509334L505.685333 706.218667 288.426667 1005.226667a34.133333 34.133333 0 0 1-47.786667 7.509333l-110.421333-80.213333a34.133333 34.133333 0 0 1-7.509334-47.786667l214.186667-295.253333L29.013333 489.813333a34.133333 34.133333 0 0 1-22.016-43.008l42.154667-129.877333a34.133333 34.133333 0 0 1 43.008-22.016l320.512 104.106667L412.672 51.2c0-18.773333 15.36-34.133333 34.133333-34.133333h136.533334z\\\\\"></path></svg></strong>user3\n        <!--v-if-->\n        <!--v-if-->\n      </label></div>\n    <div class=\\\\\"arco-col arco-col-19 arco-form-item-wrapper-col\\\\\" id=\\\\\"name3\\\\\">\n      <div class=\\\\\"arco-form-item-content-wrapper\\\\\">\n        <div class=\\\\\"arco-form-item-content arco-form-item-content-flex\\\\\"><span class=\\\\\"arco-input-wrapper\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" value=\\\\\"3\\\\\"><!----><!----></span></div>\n      </div>\n      <!--v-if-->\n      <!--v-if-->\n    </div>\n  </div>\n  <div class=\\\\\"arco-row arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-horizontal\\\\\">\n    <div class=\\\\\"arco-col arco-col-5 arco-form-item-label-col\\\\\"><label class=\\\\\"arco-form-item-label\\\\\"><strong class=\\\\\"arco-form-item-label-required-symbol\\\\\"><svg fill=\\\\\"currentColor\\\\\" viewBox=\\\\\"0 0 1024 1024\\\\\" width=\\\\\"1em\\\\\" height=\\\\\"1em\\\\\"><path d=\\\\\"M583.338667 17.066667c18.773333 0 34.133333 15.36 34.133333 34.133333v349.013333l313.344-101.888a34.133333 34.133333 0 0 1 43.008 22.016l42.154667 129.706667a34.133333 34.133333 0 0 1-21.845334 43.178667l-315.733333 102.4 208.896 287.744a34.133333 34.133333 0 0 1-7.509333 47.786666l-110.421334 80.213334a34.133333 34.133333 0 0 1-47.786666-7.509334L505.685333 706.218667 288.426667 1005.226667a34.133333 34.133333 0 0 1-47.786667 7.509333l-110.421333-80.213333a34.133333 34.133333 0 0 1-7.509334-47.786667l214.186667-295.253333L29.013333 489.813333a34.133333 34.133333 0 0 1-22.016-43.008l42.154667-129.877333a34.133333 34.133333 0 0 1 43.008-22.016l320.512 104.106667L412.672 51.2c0-18.773333 15.36-34.133333 34.133333-34.133333h136.533334z\\\\\"></path></svg></strong>user4\n        <!--v-if-->\n        <!--v-if-->\n      </label></div>\n    <div class=\\\\\"arco-col arco-col-19 arco-form-item-wrapper-col\\\\\" id=\\\\\"name4\\\\\">\n      <div class=\\\\\"arco-form-item-content-wrapper\\\\\">\n        <div class=\\\\\"arco-form-item-content arco-form-item-content-flex\\\\\"><span class=\\\\\"arco-input-wrapper\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" value=\\\\\"4\\\\\"><!----><!----></span></div>\n      </div>\n      <!--v-if-->\n      <!--v-if-->\n    </div>\n  </div>\n  <div class=\\\\\"arco-row arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-horizontal\\\\\">\n    <div class=\\\\\"arco-col arco-col-5 arco-form-item-label-col\\\\\"><label class=\\\\\"arco-form-item-label\\\\\"><strong class=\\\\\"arco-form-item-label-required-symbol\\\\\"><svg fill=\\\\\"currentColor\\\\\" viewBox=\\\\\"0 0 1024 1024\\\\\" width=\\\\\"1em\\\\\" height=\\\\\"1em\\\\\"><path d=\\\\\"M583.338667 17.066667c18.773333 0 34.133333 15.36 34.133333 34.133333v349.013333l313.344-101.888a34.133333 34.133333 0 0 1 43.008 22.016l42.154667 129.706667a34.133333 34.133333 0 0 1-21.845334 43.178667l-315.733333 102.4 208.896 287.744a34.133333 34.133333 0 0 1-7.509333 47.786666l-110.421334 80.213334a34.133333 34.133333 0 0 1-47.786666-7.509334L505.685333 706.218667 288.426667 1005.226667a34.133333 34.133333 0 0 1-47.786667 7.509333l-110.421333-80.213333a34.133333 34.133333 0 0 1-7.509334-47.786667l214.186667-295.253333L29.013333 489.813333a34.133333 34.133333 0 0 1-22.016-43.008l42.154667-129.877333a34.133333 34.133333 0 0 1 43.008-22.016l320.512 104.106667L412.672 51.2c0-18.773333 15.36-34.133333 34.133333-34.133333h136.533334z\\\\\"></path></svg></strong>user5\n        <!--v-if-->\n        <!--v-if-->\n      </label></div>\n    <div class=\\\\\"arco-col arco-col-19 arco-form-item-wrapper-col\\\\\" id=\\\\\"name5\\\\\">\n      <div class=\\\\\"arco-form-item-content-wrapper\\\\\">\n        <div class=\\\\\"arco-form-item-content arco-form-item-content-flex\\\\\"><span class=\\\\\"arco-input-wrapper\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" value=\\\\\"5\\\\\"><!----><!----></span></div>\n      </div>\n      <!--v-if-->\n      <!--v-if-->\n    </div>\n  </div>\n  <div class=\\\\\"arco-row arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-horizontal\\\\\">\n    <div class=\\\\\"arco-col arco-col-5 arco-form-item-label-col\\\\\"><label class=\\\\\"arco-form-item-label\\\\\"><strong class=\\\\\"arco-form-item-label-required-symbol\\\\\"><svg fill=\\\\\"currentColor\\\\\" viewBox=\\\\\"0 0 1024 1024\\\\\" width=\\\\\"1em\\\\\" height=\\\\\"1em\\\\\"><path d=\\\\\"M583.338667 17.066667c18.773333 0 34.133333 15.36 34.133333 34.133333v349.013333l313.344-101.888a34.133333 34.133333 0 0 1 43.008 22.016l42.154667 129.706667a34.133333 34.133333 0 0 1-21.845334 43.178667l-315.733333 102.4 208.896 287.744a34.133333 34.133333 0 0 1-7.509333 47.786666l-110.421334 80.213334a34.133333 34.133333 0 0 1-47.786666-7.509334L505.685333 706.218667 288.426667 1005.226667a34.133333 34.133333 0 0 1-47.786667 7.509333l-110.421333-80.213333a34.133333 34.133333 0 0 1-7.509334-47.786667l214.186667-295.253333L29.013333 489.813333a34.133333 34.133333 0 0 1-22.016-43.008l42.154667-129.877333a34.133333 34.133333 0 0 1 43.008-22.016l320.512 104.106667L412.672 51.2c0-18.773333 15.36-34.133333 34.133333-34.133333h136.533334z\\\\\"></path></svg></strong>user6\n        <!--v-if-->\n        <!--v-if-->\n      </label></div>\n    <div class=\\\\\"arco-col arco-col-19 arco-form-item-wrapper-col\\\\\" id=\\\\\"name6\\\\\">\n      <div class=\\\\\"arco-form-item-content-wrapper\\\\\">\n        <div class=\\\\\"arco-form-item-content arco-form-item-content-flex\\\\\"><span class=\\\\\"arco-input-wrapper\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" value=\\\\\"6\\\\\"><!----><!----></span></div>\n      </div>\n      <!--v-if-->\n      <!--v-if-->\n    </div>\n  </div>\n  <div class=\\\\\"arco-row arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-horizontal\\\\\">\n    <div class=\\\\\"arco-col arco-col-5 arco-form-item-label-col\\\\\"><label class=\\\\\"arco-form-item-label\\\\\"><strong class=\\\\\"arco-form-item-label-required-symbol\\\\\"><svg fill=\\\\\"currentColor\\\\\" viewBox=\\\\\"0 0 1024 1024\\\\\" width=\\\\\"1em\\\\\" height=\\\\\"1em\\\\\"><path d=\\\\\"M583.338667 17.066667c18.773333 0 34.133333 15.36 34.133333 34.133333v349.013333l313.344-101.888a34.133333 34.133333 0 0 1 43.008 22.016l42.154667 129.706667a34.133333 34.133333 0 0 1-21.845334 43.178667l-315.733333 102.4 208.896 287.744a34.133333 34.133333 0 0 1-7.509333 47.786666l-110.421334 80.213334a34.133333 34.133333 0 0 1-47.786666-7.509334L505.685333 706.218667 288.426667 1005.226667a34.133333 34.133333 0 0 1-47.786667 7.509333l-110.421333-80.213333a34.133333 34.133333 0 0 1-7.509334-47.786667l214.186667-295.253333L29.013333 489.813333a34.133333 34.133333 0 0 1-22.016-43.008l42.154667-129.877333a34.133333 34.133333 0 0 1 43.008-22.016l320.512 104.106667L412.672 51.2c0-18.773333 15.36-34.133333 34.133333-34.133333h136.533334z\\\\\"></path></svg></strong>user7\n        <!--v-if-->\n        <!--v-if-->\n      </label></div>\n    <div class=\\\\\"arco-col arco-col-19 arco-form-item-wrapper-col\\\\\" id=\\\\\"name7\\\\\">\n      <div class=\\\\\"arco-form-item-content-wrapper\\\\\">\n        <div class=\\\\\"arco-form-item-content arco-form-item-content-flex\\\\\"><span class=\\\\\"arco-input-wrapper\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" value=\\\\\"\\\\\"><!----><!----></span></div>\n      </div>\n      <!--v-if-->\n      <!--v-if-->\n    </div>\n  </div>\n  <div class=\\\\\"arco-row arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-horizontal\\\\\">\n    <div class=\\\\\"arco-col arco-col-5 arco-form-item-label-col\\\\\"><label class=\\\\\"arco-form-item-label\\\\\"><strong class=\\\\\"arco-form-item-label-required-symbol\\\\\"><svg fill=\\\\\"currentColor\\\\\" viewBox=\\\\\"0 0 1024 1024\\\\\" width=\\\\\"1em\\\\\" height=\\\\\"1em\\\\\"><path d=\\\\\"M583.338667 17.066667c18.773333 0 34.133333 15.36 34.133333 34.133333v349.013333l313.344-101.888a34.133333 34.133333 0 0 1 43.008 22.016l42.154667 129.706667a34.133333 34.133333 0 0 1-21.845334 43.178667l-315.733333 102.4 208.896 287.744a34.133333 34.133333 0 0 1-7.509333 47.786666l-110.421334 80.213334a34.133333 34.133333 0 0 1-47.786666-7.509334L505.685333 706.218667 288.426667 1005.226667a34.133333 34.133333 0 0 1-47.786667 7.509333l-110.421333-80.213333a34.133333 34.133333 0 0 1-7.509334-47.786667l214.186667-295.253333L29.013333 489.813333a34.133333 34.133333 0 0 1-22.016-43.008l42.154667-129.877333a34.133333 34.133333 0 0 1 43.008-22.016l320.512 104.106667L412.672 51.2c0-18.773333 15.36-34.133333 34.133333-34.133333h136.533334z\\\\\"></path></svg></strong>user8\n        <!--v-if-->\n        <!--v-if-->\n      </label></div>\n    <div class=\\\\\"arco-col arco-col-19 arco-form-item-wrapper-col\\\\\" id=\\\\\"name8\\\\\">\n      <div class=\\\\\"arco-form-item-content-wrapper\\\\\">\n        <div class=\\\\\"arco-form-item-content arco-form-item-content-flex\\\\\"><span class=\\\\\"arco-input-wrapper\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" value=\\\\\"8\\\\\"><!----><!----></span></div>\n      </div>\n      <!--v-if-->\n      <!--v-if-->\n    </div>\n  </div>\n  <div class=\\\\\"arco-row arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-horizontal\\\\\">\n    <div class=\\\\\"arco-col arco-col-5 arco-form-item-label-col\\\\\"><label class=\\\\\"arco-form-item-label\\\\\"><strong class=\\\\\"arco-form-item-label-required-symbol\\\\\"><svg fill=\\\\\"currentColor\\\\\" viewBox=\\\\\"0 0 1024 1024\\\\\" width=\\\\\"1em\\\\\" height=\\\\\"1em\\\\\"><path d=\\\\\"M583.338667 17.066667c18.773333 0 34.133333 15.36 34.133333 34.133333v349.013333l313.344-101.888a34.133333 34.133333 0 0 1 43.008 22.016l42.154667 129.706667a34.133333 34.133333 0 0 1-21.845334 43.178667l-315.733333 102.4 208.896 287.744a34.133333 34.133333 0 0 1-7.509333 47.786666l-110.421334 80.213334a34.133333 34.133333 0 0 1-47.786666-7.509334L505.685333 706.218667 288.426667 1005.226667a34.133333 34.133333 0 0 1-47.786667 7.509333l-110.421333-80.213333a34.133333 34.133333 0 0 1-7.509334-47.786667l214.186667-295.253333L29.013333 489.813333a34.133333 34.133333 0 0 1-22.016-43.008l42.154667-129.877333a34.133333 34.133333 0 0 1 43.008-22.016l320.512 104.106667L412.672 51.2c0-18.773333 15.36-34.133333 34.133333-34.133333h136.533334z\\\\\"></path></svg></strong>user9\n        <!--v-if-->\n        <!--v-if-->\n      </label></div>\n    <div class=\\\\\"arco-col arco-col-19 arco-form-item-wrapper-col\\\\\" id=\\\\\"name9\\\\\">\n      <div class=\\\\\"arco-form-item-content-wrapper\\\\\">\n        <div class=\\\\\"arco-form-item-content arco-form-item-content-flex\\\\\"><span class=\\\\\"arco-input-wrapper\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" value=\\\\\"9\\\\\"><!----><!----></span></div>\n      </div>\n      <!--v-if-->\n      <!--v-if-->\n    </div>\n  </div>\n  <div class=\\\\\"arco-row arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-horizontal\\\\\">\n    <div class=\\\\\"arco-col arco-col-5 arco-form-item-label-col\\\\\"><label class=\\\\\"arco-form-item-label\\\\\"><strong class=\\\\\"arco-form-item-label-required-symbol\\\\\"><svg fill=\\\\\"currentColor\\\\\" viewBox=\\\\\"0 0 1024 1024\\\\\" width=\\\\\"1em\\\\\" height=\\\\\"1em\\\\\"><path d=\\\\\"M583.338667 17.066667c18.773333 0 34.133333 15.36 34.133333 34.133333v349.013333l313.344-101.888a34.133333 34.133333 0 0 1 43.008 22.016l42.154667 129.706667a34.133333 34.133333 0 0 1-21.845334 43.178667l-315.733333 102.4 208.896 287.744a34.133333 34.133333 0 0 1-7.509333 47.786666l-110.421334 80.213334a34.133333 34.133333 0 0 1-47.786666-7.509334L505.685333 706.218667 288.426667 1005.226667a34.133333 34.133333 0 0 1-47.786667 7.509333l-110.421333-80.213333a34.133333 34.133333 0 0 1-7.509334-47.786667l214.186667-295.253333L29.013333 489.813333a34.133333 34.133333 0 0 1-22.016-43.008l42.154667-129.877333a34.133333 34.133333 0 0 1 43.008-22.016l320.512 104.106667L412.672 51.2c0-18.773333 15.36-34.133333 34.133333-34.133333h136.533334z\\\\\"></path></svg></strong>user10\n        <!--v-if-->\n        <!--v-if-->\n      </label></div>\n    <div class=\\\\\"arco-col arco-col-19 arco-form-item-wrapper-col\\\\\" id=\\\\\"name10\\\\\">\n      <div class=\\\\\"arco-form-item-content-wrapper\\\\\">\n        <div class=\\\\\"arco-form-item-content arco-form-item-content-flex\\\\\"><span class=\\\\\"arco-input-wrapper\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" value=\\\\\"10\\\\\"><!----><!----></span></div>\n      </div>\n      <!--v-if-->\n      <!--v-if-->\n    </div>\n  </div>\n  <div class=\\\\\"arco-row arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-horizontal\\\\\">\n    <div class=\\\\\"arco-col arco-col-5 arco-form-item-label-col\\\\\"><label class=\\\\\"arco-form-item-label\\\\\"><strong class=\\\\\"arco-form-item-label-required-symbol\\\\\"><svg fill=\\\\\"currentColor\\\\\" viewBox=\\\\\"0 0 1024 1024\\\\\" width=\\\\\"1em\\\\\" height=\\\\\"1em\\\\\"><path d=\\\\\"M583.338667 17.066667c18.773333 0 34.133333 15.36 34.133333 34.133333v349.013333l313.344-101.888a34.133333 34.133333 0 0 1 43.008 22.016l42.154667 129.706667a34.133333 34.133333 0 0 1-21.845334 43.178667l-315.733333 102.4 208.896 287.744a34.133333 34.133333 0 0 1-7.509333 47.786666l-110.421334 80.213334a34.133333 34.133333 0 0 1-47.786666-7.509334L505.685333 706.218667 288.426667 1005.226667a34.133333 34.133333 0 0 1-47.786667 7.509333l-110.421333-80.213333a34.133333 34.133333 0 0 1-7.509334-47.786667l214.186667-295.253333L29.013333 489.813333a34.133333 34.133333 0 0 1-22.016-43.008l42.154667-129.877333a34.133333 34.133333 0 0 1 43.008-22.016l320.512 104.106667L412.672 51.2c0-18.773333 15.36-34.133333 34.133333-34.133333h136.533334z\\\\\"></path></svg></strong>user11\n        <!--v-if-->\n        <!--v-if-->\n      </label></div>\n    <div class=\\\\\"arco-col arco-col-19 arco-form-item-wrapper-col\\\\\" id=\\\\\"name11\\\\\">\n      <div class=\\\\\"arco-form-item-content-wrapper\\\\\">\n        <div class=\\\\\"arco-form-item-content arco-form-item-content-flex\\\\\"><span class=\\\\\"arco-input-wrapper\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" value=\\\\\"11\\\\\"><!----><!----></span></div>\n      </div>\n      <!--v-if-->\n      <!--v-if-->\n    </div>\n  </div>\n  <div class=\\\\\"arco-row arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-horizontal\\\\\">\n    <div class=\\\\\"arco-col arco-col-5 arco-form-item-label-col\\\\\"><label class=\\\\\"arco-form-item-label\\\\\"><strong class=\\\\\"arco-form-item-label-required-symbol\\\\\"><svg fill=\\\\\"currentColor\\\\\" viewBox=\\\\\"0 0 1024 1024\\\\\" width=\\\\\"1em\\\\\" height=\\\\\"1em\\\\\"><path d=\\\\\"M583.338667 17.066667c18.773333 0 34.133333 15.36 34.133333 34.133333v349.013333l313.344-101.888a34.133333 34.133333 0 0 1 43.008 22.016l42.154667 129.706667a34.133333 34.133333 0 0 1-21.845334 43.178667l-315.733333 102.4 208.896 287.744a34.133333 34.133333 0 0 1-7.509333 47.786666l-110.421334 80.213334a34.133333 34.133333 0 0 1-47.786666-7.509334L505.685333 706.218667 288.426667 1005.226667a34.133333 34.133333 0 0 1-47.786667 7.509333l-110.421333-80.213333a34.133333 34.133333 0 0 1-7.509334-47.786667l214.186667-295.253333L29.013333 489.813333a34.133333 34.133333 0 0 1-22.016-43.008l42.154667-129.877333a34.133333 34.133333 0 0 1 43.008-22.016l320.512 104.106667L412.672 51.2c0-18.773333 15.36-34.133333 34.133333-34.133333h136.533334z\\\\\"></path></svg></strong>user12\n        <!--v-if-->\n        <!--v-if-->\n      </label></div>\n    <div class=\\\\\"arco-col arco-col-19 arco-form-item-wrapper-col\\\\\" id=\\\\\"name12\\\\\">\n      <div class=\\\\\"arco-form-item-content-wrapper\\\\\">\n        <div class=\\\\\"arco-form-item-content arco-form-item-content-flex\\\\\"><span class=\\\\\"arco-input-wrapper\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" value=\\\\\"12\\\\\"><!----><!----></span></div>\n      </div>\n      <!--v-if-->\n      <!--v-if-->\n    </div>\n  </div>\n  <div class=\\\\\"arco-row arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-horizontal\\\\\">\n    <div class=\\\\\"arco-col arco-col-5 arco-form-item-label-col\\\\\"><label class=\\\\\"arco-form-item-label\\\\\"><strong class=\\\\\"arco-form-item-label-required-symbol\\\\\"><svg fill=\\\\\"currentColor\\\\\" viewBox=\\\\\"0 0 1024 1024\\\\\" width=\\\\\"1em\\\\\" height=\\\\\"1em\\\\\"><path d=\\\\\"M583.338667 17.066667c18.773333 0 34.133333 15.36 34.133333 34.133333v349.013333l313.344-101.888a34.133333 34.133333 0 0 1 43.008 22.016l42.154667 129.706667a34.133333 34.133333 0 0 1-21.845334 43.178667l-315.733333 102.4 208.896 287.744a34.133333 34.133333 0 0 1-7.509333 47.786666l-110.421334 80.213334a34.133333 34.133333 0 0 1-47.786666-7.509334L505.685333 706.218667 288.426667 1005.226667a34.133333 34.133333 0 0 1-47.786667 7.509333l-110.421333-80.213333a34.133333 34.133333 0 0 1-7.509334-47.786667l214.186667-295.253333L29.013333 489.813333a34.133333 34.133333 0 0 1-22.016-43.008l42.154667-129.877333a34.133333 34.133333 0 0 1 43.008-22.016l320.512 104.106667L412.672 51.2c0-18.773333 15.36-34.133333 34.133333-34.133333h136.533334z\\\\\"></path></svg></strong>user13\n        <!--v-if-->\n        <!--v-if-->\n      </label></div>\n    <div class=\\\\\"arco-col arco-col-19 arco-form-item-wrapper-col\\\\\" id=\\\\\"name13\\\\\">\n      <div class=\\\\\"arco-form-item-content-wrapper\\\\\">\n        <div class=\\\\\"arco-form-item-content arco-form-item-content-flex\\\\\"><span class=\\\\\"arco-input-wrapper\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" value=\\\\\"13\\\\\"><!----><!----></span></div>\n      </div>\n      <!--v-if-->\n      <!--v-if-->\n    </div>\n  </div>\n  <div class=\\\\\"arco-row arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-horizontal\\\\\">\n    <div class=\\\\\"arco-col arco-col-5 arco-form-item-label-col\\\\\"><label class=\\\\\"arco-form-item-label\\\\\"><strong class=\\\\\"arco-form-item-label-required-symbol\\\\\"><svg fill=\\\\\"currentColor\\\\\" viewBox=\\\\\"0 0 1024 1024\\\\\" width=\\\\\"1em\\\\\" height=\\\\\"1em\\\\\"><path d=\\\\\"M583.338667 17.066667c18.773333 0 34.133333 15.36 34.133333 34.133333v349.013333l313.344-101.888a34.133333 34.133333 0 0 1 43.008 22.016l42.154667 129.706667a34.133333 34.133333 0 0 1-21.845334 43.178667l-315.733333 102.4 208.896 287.744a34.133333 34.133333 0 0 1-7.509333 47.786666l-110.421334 80.213334a34.133333 34.133333 0 0 1-47.786666-7.509334L505.685333 706.218667 288.426667 1005.226667a34.133333 34.133333 0 0 1-47.786667 7.509333l-110.421333-80.213333a34.133333 34.133333 0 0 1-7.509334-47.786667l214.186667-295.253333L29.013333 489.813333a34.133333 34.133333 0 0 1-22.016-43.008l42.154667-129.877333a34.133333 34.133333 0 0 1 43.008-22.016l320.512 104.106667L412.672 51.2c0-18.773333 15.36-34.133333 34.133333-34.133333h136.533334z\\\\\"></path></svg></strong>user14\n        <!--v-if-->\n        <!--v-if-->\n      </label></div>\n    <div class=\\\\\"arco-col arco-col-19 arco-form-item-wrapper-col\\\\\" id=\\\\\"name14\\\\\">\n      <div class=\\\\\"arco-form-item-content-wrapper\\\\\">\n        <div class=\\\\\"arco-form-item-content arco-form-item-content-flex\\\\\"><span class=\\\\\"arco-input-wrapper\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" value=\\\\\"14\\\\\"><!----><!----></span></div>\n      </div>\n      <!--v-if-->\n      <!--v-if-->\n    </div>\n  </div>\n  <div class=\\\\\"arco-row arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-horizontal\\\\\">\n    <div class=\\\\\"arco-col arco-col-5 arco-form-item-label-col\\\\\"><label class=\\\\\"arco-form-item-label\\\\\"><strong class=\\\\\"arco-form-item-label-required-symbol\\\\\"><svg fill=\\\\\"currentColor\\\\\" viewBox=\\\\\"0 0 1024 1024\\\\\" width=\\\\\"1em\\\\\" height=\\\\\"1em\\\\\"><path d=\\\\\"M583.338667 17.066667c18.773333 0 34.133333 15.36 34.133333 34.133333v349.013333l313.344-101.888a34.133333 34.133333 0 0 1 43.008 22.016l42.154667 129.706667a34.133333 34.133333 0 0 1-21.845334 43.178667l-315.733333 102.4 208.896 287.744a34.133333 34.133333 0 0 1-7.509333 47.786666l-110.421334 80.213334a34.133333 34.133333 0 0 1-47.786666-7.509334L505.685333 706.218667 288.426667 1005.226667a34.133333 34.133333 0 0 1-47.786667 7.509333l-110.421333-80.213333a34.133333 34.133333 0 0 1-7.509334-47.786667l214.186667-295.253333L29.013333 489.813333a34.133333 34.133333 0 0 1-22.016-43.008l42.154667-129.877333a34.133333 34.133333 0 0 1 43.008-22.016l320.512 104.106667L412.672 51.2c0-18.773333 15.36-34.133333 34.133333-34.133333h136.533334z\\\\\"></path></svg></strong>user15\n        <!--v-if-->\n        <!--v-if-->\n      </label></div>\n    <div class=\\\\\"arco-col arco-col-19 arco-form-item-wrapper-col\\\\\" id=\\\\\"name15\\\\\">\n      <div class=\\\\\"arco-form-item-content-wrapper\\\\\">\n        <div class=\\\\\"arco-form-item-content arco-form-item-content-flex\\\\\"><span class=\\\\\"arco-input-wrapper\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" value=\\\\\"15\\\\\"><!----><!----></span></div>\n      </div>\n      <!--v-if-->\n      <!--v-if-->\n    </div>\n  </div>\n  <div class=\\\\\"arco-row arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-horizontal\\\\\">\n    <div class=\\\\\"arco-col arco-col-5 arco-form-item-label-col\\\\\"><label class=\\\\\"arco-form-item-label\\\\\"><strong class=\\\\\"arco-form-item-label-required-symbol\\\\\"><svg fill=\\\\\"currentColor\\\\\" viewBox=\\\\\"0 0 1024 1024\\\\\" width=\\\\\"1em\\\\\" height=\\\\\"1em\\\\\"><path d=\\\\\"M583.338667 17.066667c18.773333 0 34.133333 15.36 34.133333 34.133333v349.013333l313.344-101.888a34.133333 34.133333 0 0 1 43.008 22.016l42.154667 129.706667a34.133333 34.133333 0 0 1-21.845334 43.178667l-315.733333 102.4 208.896 287.744a34.133333 34.133333 0 0 1-7.509333 47.786666l-110.421334 80.213334a34.133333 34.133333 0 0 1-47.786666-7.509334L505.685333 706.218667 288.426667 1005.226667a34.133333 34.133333 0 0 1-47.786667 7.509333l-110.421333-80.213333a34.133333 34.133333 0 0 1-7.509334-47.786667l214.186667-295.253333L29.013333 489.813333a34.133333 34.133333 0 0 1-22.016-43.008l42.154667-129.877333a34.133333 34.133333 0 0 1 43.008-22.016l320.512 104.106667L412.672 51.2c0-18.773333 15.36-34.133333 34.133333-34.133333h136.533334z\\\\\"></path></svg></strong>user16\n        <!--v-if-->\n        <!--v-if-->\n      </label></div>\n    <div class=\\\\\"arco-col arco-col-19 arco-form-item-wrapper-col\\\\\" id=\\\\\"name16\\\\\">\n      <div class=\\\\\"arco-form-item-content-wrapper\\\\\">\n        <div class=\\\\\"arco-form-item-content arco-form-item-content-flex\\\\\"><span class=\\\\\"arco-input-wrapper\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" value=\\\\\"16\\\\\"><!----><!----></span></div>\n      </div>\n      <!--v-if-->\n      <!--v-if-->\n    </div>\n  </div>\n  <div class=\\\\\"arco-row arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-horizontal\\\\\">\n    <div class=\\\\\"arco-col arco-col-5 arco-form-item-label-col\\\\\"><label class=\\\\\"arco-form-item-label\\\\\"><strong class=\\\\\"arco-form-item-label-required-symbol\\\\\"><svg fill=\\\\\"currentColor\\\\\" viewBox=\\\\\"0 0 1024 1024\\\\\" width=\\\\\"1em\\\\\" height=\\\\\"1em\\\\\"><path d=\\\\\"M583.338667 17.066667c18.773333 0 34.133333 15.36 34.133333 34.133333v349.013333l313.344-101.888a34.133333 34.133333 0 0 1 43.008 22.016l42.154667 129.706667a34.133333 34.133333 0 0 1-21.845334 43.178667l-315.733333 102.4 208.896 287.744a34.133333 34.133333 0 0 1-7.509333 47.786666l-110.421334 80.213334a34.133333 34.133333 0 0 1-47.786666-7.509334L505.685333 706.218667 288.426667 1005.226667a34.133333 34.133333 0 0 1-47.786667 7.509333l-110.421333-80.213333a34.133333 34.133333 0 0 1-7.509334-47.786667l214.186667-295.253333L29.013333 489.813333a34.133333 34.133333 0 0 1-22.016-43.008l42.154667-129.877333a34.133333 34.133333 0 0 1 43.008-22.016l320.512 104.106667L412.672 51.2c0-18.773333 15.36-34.133333 34.133333-34.133333h136.533334z\\\\\"></path></svg></strong>user17\n        <!--v-if-->\n        <!--v-if-->\n      </label></div>\n    <div class=\\\\\"arco-col arco-col-19 arco-form-item-wrapper-col\\\\\" id=\\\\\"name17\\\\\">\n      <div class=\\\\\"arco-form-item-content-wrapper\\\\\">\n        <div class=\\\\\"arco-form-item-content arco-form-item-content-flex\\\\\"><span class=\\\\\"arco-input-wrapper\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" value=\\\\\"17\\\\\"><!----><!----></span></div>\n      </div>\n      <!--v-if-->\n      <!--v-if-->\n    </div>\n  </div>\n  <div class=\\\\\"arco-row arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-horizontal\\\\\">\n    <div class=\\\\\"arco-col arco-col-5 arco-form-item-label-col\\\\\"><label class=\\\\\"arco-form-item-label\\\\\"><strong class=\\\\\"arco-form-item-label-required-symbol\\\\\"><svg fill=\\\\\"currentColor\\\\\" viewBox=\\\\\"0 0 1024 1024\\\\\" width=\\\\\"1em\\\\\" height=\\\\\"1em\\\\\"><path d=\\\\\"M583.338667 17.066667c18.773333 0 34.133333 15.36 34.133333 34.133333v349.013333l313.344-101.888a34.133333 34.133333 0 0 1 43.008 22.016l42.154667 129.706667a34.133333 34.133333 0 0 1-21.845334 43.178667l-315.733333 102.4 208.896 287.744a34.133333 34.133333 0 0 1-7.509333 47.786666l-110.421334 80.213334a34.133333 34.133333 0 0 1-47.786666-7.509334L505.685333 706.218667 288.426667 1005.226667a34.133333 34.133333 0 0 1-47.786667 7.509333l-110.421333-80.213333a34.133333 34.133333 0 0 1-7.509334-47.786667l214.186667-295.253333L29.013333 489.813333a34.133333 34.133333 0 0 1-22.016-43.008l42.154667-129.877333a34.133333 34.133333 0 0 1 43.008-22.016l320.512 104.106667L412.672 51.2c0-18.773333 15.36-34.133333 34.133333-34.133333h136.533334z\\\\\"></path></svg></strong>user18\n        <!--v-if-->\n        <!--v-if-->\n      </label></div>\n    <div class=\\\\\"arco-col arco-col-19 arco-form-item-wrapper-col\\\\\" id=\\\\\"name18\\\\\">\n      <div class=\\\\\"arco-form-item-content-wrapper\\\\\">\n        <div class=\\\\\"arco-form-item-content arco-form-item-content-flex\\\\\"><span class=\\\\\"arco-input-wrapper\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" value=\\\\\"18\\\\\"><!----><!----></span></div>\n      </div>\n      <!--v-if-->\n      <!--v-if-->\n    </div>\n  </div>\n  <div class=\\\\\"arco-row arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-horizontal\\\\\">\n    <div class=\\\\\"arco-col arco-col-5 arco-form-item-label-col\\\\\"><label class=\\\\\"arco-form-item-label\\\\\"><strong class=\\\\\"arco-form-item-label-required-symbol\\\\\"><svg fill=\\\\\"currentColor\\\\\" viewBox=\\\\\"0 0 1024 1024\\\\\" width=\\\\\"1em\\\\\" height=\\\\\"1em\\\\\"><path d=\\\\\"M583.338667 17.066667c18.773333 0 34.133333 15.36 34.133333 34.133333v349.013333l313.344-101.888a34.133333 34.133333 0 0 1 43.008 22.016l42.154667 129.706667a34.133333 34.133333 0 0 1-21.845334 43.178667l-315.733333 102.4 208.896 287.744a34.133333 34.133333 0 0 1-7.509333 47.786666l-110.421334 80.213334a34.133333 34.133333 0 0 1-47.786666-7.509334L505.685333 706.218667 288.426667 1005.226667a34.133333 34.133333 0 0 1-47.786667 7.509333l-110.421333-80.213333a34.133333 34.133333 0 0 1-7.509334-47.786667l214.186667-295.253333L29.013333 489.813333a34.133333 34.133333 0 0 1-22.016-43.008l42.154667-129.877333a34.133333 34.133333 0 0 1 43.008-22.016l320.512 104.106667L412.672 51.2c0-18.773333 15.36-34.133333 34.133333-34.133333h136.533334z\\\\\"></path></svg></strong>user19\n        <!--v-if-->\n        <!--v-if-->\n      </label></div>\n    <div class=\\\\\"arco-col arco-col-19 arco-form-item-wrapper-col\\\\\" id=\\\\\"name19\\\\\">\n      <div class=\\\\\"arco-form-item-content-wrapper\\\\\">\n        <div class=\\\\\"arco-form-item-content arco-form-item-content-flex\\\\\"><span class=\\\\\"arco-input-wrapper\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" value=\\\\\"19\\\\\"><!----><!----></span></div>\n      </div>\n      <!--v-if-->\n      <!--v-if-->\n    </div>\n  </div>\n</form>\"\n`;\n\nexports[`<form> demo: render [status] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-vertical\\\\\" style=\\\\\"column-gap: 24px; row-gap: 24px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-radio-group-button arco-radio-group-size-medium arco-radio-group-direction-horizontal\\\\\"><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"validating\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">validating</span></label><label class=\\\\\"arco-radio-button arco-radio-checked\\\\\"><input type=\\\\\"radio\\\\\" checked=\\\\\"\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"success\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">success</span></label><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"error\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">error</span></label><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"warning\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">warning</span></label></span></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-radio-group-button arco-radio-group-size-medium arco-radio-group-direction-horizontal\\\\\"><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"mini\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">mini</span></label><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"small\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">small</span></label><label class=\\\\\"arco-radio-button arco-radio-checked\\\\\"><input type=\\\\\"radio\\\\\" checked=\\\\\"\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"medium\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">medium</span></label><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"large\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">large</span></label></span></div>\n</div>\n<form class=\\\\\"arco-form arco-form-layout-horizontal arco-form-size-medium\\\\\" style=\\\\\"width: 600px; margin-top: 20px;\\\\\">\n  <div class=\\\\\"arco-row arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-horizontal arco-form-item-status-success arco-form-item-has-help\\\\\">\n    <div class=\\\\\"arco-col arco-col-5 arco-form-item-label-col\\\\\"><label class=\\\\\"arco-form-item-label\\\\\">\n        <!--v-if-->Username\n        <!--v-if-->\n        <!--v-if-->\n      </label></div>\n    <div class=\\\\\"arco-col arco-col-19 arco-form-item-wrapper-col\\\\\" id=\\\\\"name\\\\\">\n      <div class=\\\\\"arco-form-item-content-wrapper\\\\\">\n        <div class=\\\\\"arco-form-item-content arco-form-item-content-flex\\\\\"><span class=\\\\\"arco-input-wrapper\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" placeholder=\\\\\"please enter your username...\\\\\" value=\\\\\"\\\\\"><!----><span class=\\\\\"arco-input-suffix arco-input-suffix-has-feedback\\\\\"><!----><!----><span class=\\\\\"arco-feedback-icon arco-feedback-icon-status-success\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-check-circle-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path fill-rule=\\\\\"evenodd\\\\\" clip-rule=\\\\\"evenodd\\\\\" d=\\\\\"M24 44c11.046 0 20-8.954 20-20S35.046 4 24 4 4 12.954 4 24s8.954 20 20 20Zm10.207-24.379a1 1 0 0 0 0-1.414l-1.414-1.414a1 1 0 0 0-1.414 0L22 26.172l-4.878-4.88a1 1 0 0 0-1.415 0l-1.414 1.415a1 1 0 0 0 0 1.414l7 7a1 1 0 0 0 1.414 0l11.5-11.5Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path></svg></span></span></span></div>\n      </div>\n      <transition-stub name=\\\\\"form-blink\\\\\" appear=\\\\\"true\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\">\n        <div class=\\\\\"arco-form-item-message arco-form-item-message-help\\\\\">This is custom message</div>\n      </transition-stub>\n      <div class=\\\\\"arco-form-item-extra\\\\\">This is extra text</div>\n    </div>\n  </div>\n  <div class=\\\\\"arco-row arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-horizontal arco-form-item-status-success arco-form-item-has-help\\\\\">\n    <div class=\\\\\"arco-col arco-col-5 arco-form-item-label-col\\\\\"><label class=\\\\\"arco-form-item-label\\\\\">\n        <!--v-if-->Post\n        <!--v-if-->\n        <!--v-if-->\n      </label></div>\n    <div class=\\\\\"arco-col arco-col-19 arco-form-item-wrapper-col\\\\\" id=\\\\\"post\\\\\">\n      <div class=\\\\\"arco-form-item-content-wrapper\\\\\">\n        <div class=\\\\\"arco-form-item-content arco-form-item-content-flex\\\\\"><span class=\\\\\"arco-input-wrapper arco-input-number arco-input-number-mode-embed arco-input-number-size-medium\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" placeholder=\\\\\"please enter your post...\\\\\" role=\\\\\"spinbutton\\\\\" aria-valuemax=\\\\\"Infinity\\\\\" aria-valuemin=\\\\\"-Infinity\\\\\" aria-valuenow=\\\\\"\\\\\" value=\\\\\"\\\\\"><!----><span class=\\\\\"arco-input-suffix arco-input-suffix-has-feedback\\\\\"><!----><!----><div class=\\\\\"arco-input-number-step\\\\\"><button class=\\\\\"arco-input-number-step-button\\\\\" type=\\\\\"button\\\\\" tabindex=\\\\\"-1\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-up\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 30.557 24.043 15 8.487 30.557\\\\\"></path></svg></button><button class=\\\\\"arco-input-number-step-button\\\\\" type=\\\\\"button\\\\\" tabindex=\\\\\"-1\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></button></div><span class=\\\\\"arco-feedback-icon arco-feedback-icon-status-success\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-check-circle-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path fill-rule=\\\\\"evenodd\\\\\" clip-rule=\\\\\"evenodd\\\\\" d=\\\\\"M24 44c11.046 0 20-8.954 20-20S35.046 4 24 4 4 12.954 4 24s8.954 20 20 20Zm10.207-24.379a1 1 0 0 0 0-1.414l-1.414-1.414a1 1 0 0 0-1.414 0L22 26.172l-4.878-4.88a1 1 0 0 0-1.415 0l-1.414 1.415a1 1 0 0 0 0 1.414l7 7a1 1 0 0 0 1.414 0l11.5-11.5Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path></svg></span></span></span></div>\n      </div>\n      <transition-stub name=\\\\\"form-blink\\\\\" appear=\\\\\"true\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\">\n        <div class=\\\\\"arco-form-item-message arco-form-item-message-help\\\\\">This is custom message</div>\n      </transition-stub>\n      <div class=\\\\\"arco-form-item-extra\\\\\">This is extra text</div>\n    </div>\n  </div>\n  <div class=\\\\\"arco-row arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-horizontal arco-form-item-status-success arco-form-item-has-help\\\\\">\n    <div class=\\\\\"arco-col arco-col-5 arco-form-item-label-col\\\\\"><label class=\\\\\"arco-form-item-label\\\\\">\n        <!--v-if-->Tags\n        <!--v-if-->\n        <!--v-if-->\n      </label></div>\n    <div class=\\\\\"arco-col arco-col-19 arco-form-item-wrapper-col\\\\\" id=\\\\\"tags\\\\\">\n      <div class=\\\\\"arco-form-item-content-wrapper\\\\\">\n        <div class=\\\\\"arco-form-item-content arco-form-item-content-flex\\\\\"><span class=\\\\\"arco-input-tag arco-input-tag-size-medium arco-input-tag-has-tag arco-input-tag-has-suffix\\\\\"><span class=\\\\\"arco-input-tag-mirror\\\\\"></span>\n          <!---->\n          <transition-group-stub tag=\\\\\"span\\\\\" name=\\\\\"input-tag-zoom\\\\\" appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\" class=\\\\\"arco-input-tag-inner\\\\\"><span class=\\\\\"arco-tag arco-tag-size-medium arco-tag-checked arco-input-tag-tag\\\\\"><!--v-if-->tag1<span class=\\\\\"arco-icon-hover arco-tag-icon-hover arco-tag-close-btn\\\\\" role=\\\\\"button\\\\\" aria-label=\\\\\"Close\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-close\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M9.857 9.858 24 24m0 0 14.142 14.142M24 24 38.142 9.858M24 24 9.857 38.142\\\\\"></path></svg></span>\n            <!--v-if--></span><input class=\\\\\"arco-input-tag-input\\\\\" style=\\\\\"width: 12px;\\\\\">\n          </transition-group-stub>\n          <!----><span class=\\\\\"arco-input-tag-suffix\\\\\"><!----><span class=\\\\\"arco-feedback-icon arco-feedback-icon-status-success\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-check-circle-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path fill-rule=\\\\\"evenodd\\\\\" clip-rule=\\\\\"evenodd\\\\\" d=\\\\\"M24 44c11.046 0 20-8.954 20-20S35.046 4 24 4 4 12.954 4 24s8.954 20 20 20Zm10.207-24.379a1 1 0 0 0 0-1.414l-1.414-1.414a1 1 0 0 0-1.414 0L22 26.172l-4.878-4.88a1 1 0 0 0-1.415 0l-1.414 1.415a1 1 0 0 0 0 1.414l7 7a1 1 0 0 0 1.414 0l11.5-11.5Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path></svg></span></span></span>\n        </div>\n      </div>\n      <transition-stub name=\\\\\"form-blink\\\\\" appear=\\\\\"true\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\">\n        <div class=\\\\\"arco-form-item-message arco-form-item-message-help\\\\\">This is custom message</div>\n      </transition-stub>\n      <div class=\\\\\"arco-form-item-extra\\\\\">This is extra text</div>\n    </div>\n  </div>\n  <div class=\\\\\"arco-row arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-horizontal arco-form-item-status-success\\\\\">\n    <div class=\\\\\"arco-col arco-col-5 arco-form-item-label-col\\\\\"><label class=\\\\\"arco-form-item-label\\\\\">\n        <!--v-if-->Section\n        <!--v-if-->\n        <!--v-if-->\n      </label></div>\n    <div class=\\\\\"arco-col arco-col-19 arco-form-item-wrapper-col\\\\\" id=\\\\\"section\\\\\">\n      <div class=\\\\\"arco-form-item-content-wrapper\\\\\">\n        <div class=\\\\\"arco-form-item-content arco-form-item-content-flex\\\\\"><span class=\\\\\"arco-select-view-single arco-select arco-select-view arco-select-view-size-medium\\\\\" title=\\\\\"\\\\\"><!----><input class=\\\\\"arco-select-view-input\\\\\" readonly=\\\\\"\\\\\" placeholder=\\\\\"Please select ...\\\\\" value=\\\\\"\\\\\"><span class=\\\\\"arco-select-view-value arco-select-view-value-hidden\\\\\"><!----></span><span class=\\\\\"arco-select-view-suffix\\\\\"><!----><span class=\\\\\"arco-select-view-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down arco-select-view-arrow-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span><span class=\\\\\"arco-feedback-icon arco-feedback-icon-status-success\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-check-circle-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path fill-rule=\\\\\"evenodd\\\\\" clip-rule=\\\\\"evenodd\\\\\" d=\\\\\"M24 44c11.046 0 20-8.954 20-20S35.046 4 24 4 4 12.954 4 24s8.954 20 20 20Zm10.207-24.379a1 1 0 0 0 0-1.414l-1.414-1.414a1 1 0 0 0-1.414 0L22 26.172l-4.878-4.88a1 1 0 0 0-1.415 0l-1.414 1.415a1 1 0 0 0 0 1.414l7 7a1 1 0 0 0 1.414 0l11.5-11.5Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path></svg></span></span></span>\n          <!---->\n        </div>\n      </div>\n      <!--v-if-->\n      <!--v-if-->\n    </div>\n  </div>\n  <div class=\\\\\"arco-row arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-horizontal arco-form-item-status-success\\\\\">\n    <div class=\\\\\"arco-col arco-col-5 arco-form-item-label-col\\\\\"><label class=\\\\\"arco-form-item-label\\\\\">\n        <!--v-if-->DateRange\n        <!--v-if-->\n        <!--v-if-->\n      </label></div>\n    <div class=\\\\\"arco-col arco-col-19 arco-form-item-wrapper-col\\\\\">\n      <div class=\\\\\"arco-form-item-content-wrapper\\\\\">\n        <div class=\\\\\"arco-form-item-content arco-form-item-content-flex\\\\\">\n          <div class=\\\\\"arco-picker arco-picker-range arco-picker-size-medium\\\\\" visible=\\\\\"false\\\\\">\n            <!--v-if-->\n            <div class=\\\\\"arco-picker-input arco-picker-input-active\\\\\"><input placeholder=\\\\\"开始日期\\\\\"></div><span class=\\\\\"arco-picker-separator\\\\\">-</span>\n            <div class=\\\\\"arco-picker-input\\\\\"><input placeholder=\\\\\"结束日期\\\\\"></div>\n            <div class=\\\\\"arco-picker-suffix\\\\\">\n              <!--v-if--><span class=\\\\\"arco-picker-suffix-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-calendar\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M7 22h34M14 5v8m20-8v8M8 41h32a1 1 0 0 0 1-1V10a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v30a1 1 0 0 0 1 1Z\\\\\"></path></svg></span><span class=\\\\\"arco-feedback-icon arco-feedback-icon-status-success\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-check-circle-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path fill-rule=\\\\\"evenodd\\\\\" clip-rule=\\\\\"evenodd\\\\\" d=\\\\\"M24 44c11.046 0 20-8.954 20-20S35.046 4 24 4 4 12.954 4 24s8.954 20 20 20Zm10.207-24.379a1 1 0 0 0 0-1.414l-1.414-1.414a1 1 0 0 0-1.414 0L22 26.172l-4.878-4.88a1 1 0 0 0-1.415 0l-1.414 1.415a1 1 0 0 0 0 1.414l7 7a1 1 0 0 0 1.414 0l11.5-11.5Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path></svg></span>\n            </div>\n          </div>\n          <!---->\n        </div>\n      </div>\n      <!--v-if-->\n      <!--v-if-->\n    </div>\n  </div>\n  <div class=\\\\\"arco-row arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-horizontal arco-form-item-status-success\\\\\">\n    <div class=\\\\\"arco-col arco-col-5 arco-form-item-label-col\\\\\"><label class=\\\\\"arco-form-item-label\\\\\">\n        <!--v-if-->Date\n        <!--v-if-->\n        <!--v-if-->\n      </label></div>\n    <div class=\\\\\"arco-col arco-col-19 arco-form-item-wrapper-col\\\\\" id=\\\\\"date\\\\\">\n      <div class=\\\\\"arco-form-item-content-wrapper\\\\\">\n        <div class=\\\\\"arco-form-item-content arco-form-item-content-flex\\\\\">\n          <div class=\\\\\"arco-picker arco-picker-size-medium\\\\\" visible=\\\\\"false\\\\\">\n            <!--v-if-->\n            <div class=\\\\\"arco-picker-input\\\\\"><input placeholder=\\\\\"请选择日期\\\\\" class=\\\\\"arco-picker-start-time\\\\\"></div>\n            <div class=\\\\\"arco-picker-suffix\\\\\">\n              <!--v-if--><span class=\\\\\"arco-picker-suffix-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-calendar\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M7 22h34M14 5v8m20-8v8M8 41h32a1 1 0 0 0 1-1V10a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v30a1 1 0 0 0 1 1Z\\\\\"></path></svg></span><span class=\\\\\"arco-feedback-icon arco-feedback-icon-status-success\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-check-circle-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path fill-rule=\\\\\"evenodd\\\\\" clip-rule=\\\\\"evenodd\\\\\" d=\\\\\"M24 44c11.046 0 20-8.954 20-20S35.046 4 24 4 4 12.954 4 24s8.954 20 20 20Zm10.207-24.379a1 1 0 0 0 0-1.414l-1.414-1.414a1 1 0 0 0-1.414 0L22 26.172l-4.878-4.88a1 1 0 0 0-1.415 0l-1.414 1.415a1 1 0 0 0 0 1.414l7 7a1 1 0 0 0 1.414 0l11.5-11.5Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path></svg></span>\n            </div>\n          </div>\n          <!---->\n        </div>\n      </div>\n      <!--v-if-->\n      <!--v-if-->\n    </div>\n  </div>\n  <div class=\\\\\"arco-row arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-horizontal arco-form-item-status-success\\\\\">\n    <div class=\\\\\"arco-col arco-col-5 arco-form-item-label-col\\\\\"><label class=\\\\\"arco-form-item-label\\\\\">\n        <!--v-if-->Time\n        <!--v-if-->\n        <!--v-if-->\n      </label></div>\n    <div class=\\\\\"arco-col arco-col-19 arco-form-item-wrapper-col\\\\\" id=\\\\\"time\\\\\">\n      <div class=\\\\\"arco-form-item-content-wrapper\\\\\">\n        <div class=\\\\\"arco-form-item-content arco-form-item-content-flex\\\\\">\n          <div class=\\\\\"arco-picker arco-picker-size-medium\\\\\" visible=\\\\\"false\\\\\" editable=\\\\\"true\\\\\">\n            <!--v-if-->\n            <div class=\\\\\"arco-picker-input\\\\\"><input placeholder=\\\\\"请选择时间\\\\\" class=\\\\\"arco-picker-start-time\\\\\"></div>\n            <div class=\\\\\"arco-picker-suffix\\\\\">\n              <!--v-if--><span class=\\\\\"arco-picker-suffix-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-clock-circle\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M24 14v10h9.5m8.5 0c0 9.941-8.059 18-18 18S6 33.941 6 24 14.059 6 24 6s18 8.059 18 18Z\\\\\"></path></svg></span><span class=\\\\\"arco-feedback-icon arco-feedback-icon-status-success\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-check-circle-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path fill-rule=\\\\\"evenodd\\\\\" clip-rule=\\\\\"evenodd\\\\\" d=\\\\\"M24 44c11.046 0 20-8.954 20-20S35.046 4 24 4 4 12.954 4 24s8.954 20 20 20Zm10.207-24.379a1 1 0 0 0 0-1.414l-1.414-1.414a1 1 0 0 0-1.414 0L22 26.172l-4.878-4.88a1 1 0 0 0-1.415 0l-1.414 1.415a1 1 0 0 0 0 1.414l7 7a1 1 0 0 0 1.414 0l11.5-11.5Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path></svg></span>\n            </div>\n          </div>\n          <!---->\n        </div>\n      </div>\n      <!--v-if-->\n      <!--v-if-->\n    </div>\n  </div>\n</form>\"\n`;\n\nexports[`<form> demo: render [validation] correctly 1`] = `\n\"<form class=\\\\\"arco-form arco-form-layout-horizontal arco-form-size-medium\\\\\" style=\\\\\"width: 600px;\\\\\">\n  <div class=\\\\\"arco-row arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-horizontal\\\\\">\n    <div class=\\\\\"arco-col arco-col-5 arco-form-item-label-col\\\\\"><label class=\\\\\"arco-form-item-label\\\\\">\n        <!--v-if-->Form Size\n        <!--v-if-->\n        <!--v-if-->\n      </label></div>\n    <div class=\\\\\"arco-col arco-col-19 arco-form-item-wrapper-col\\\\\" id=\\\\\"size\\\\\">\n      <div class=\\\\\"arco-form-item-content-wrapper\\\\\">\n        <div class=\\\\\"arco-form-item-content arco-form-item-content-flex\\\\\"><span class=\\\\\"arco-radio-group-button arco-radio-group-size-medium arco-radio-group-direction-horizontal\\\\\"><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"mini\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">Mini</span></label><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"small\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">Small</span></label><label class=\\\\\"arco-radio-button arco-radio-checked\\\\\"><input type=\\\\\"radio\\\\\" checked=\\\\\"\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"medium\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">Medium</span></label><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"large\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">Large</span></label></span></div>\n      </div>\n      <!--v-if-->\n      <!--v-if-->\n    </div>\n  </div>\n  <div class=\\\\\"arco-row arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-horizontal\\\\\">\n    <div class=\\\\\"arco-col arco-col-5 arco-form-item-label-col\\\\\"><label class=\\\\\"arco-form-item-label\\\\\"><strong class=\\\\\"arco-form-item-label-required-symbol\\\\\"><svg fill=\\\\\"currentColor\\\\\" viewBox=\\\\\"0 0 1024 1024\\\\\" width=\\\\\"1em\\\\\" height=\\\\\"1em\\\\\"><path d=\\\\\"M583.338667 17.066667c18.773333 0 34.133333 15.36 34.133333 34.133333v349.013333l313.344-101.888a34.133333 34.133333 0 0 1 43.008 22.016l42.154667 129.706667a34.133333 34.133333 0 0 1-21.845334 43.178667l-315.733333 102.4 208.896 287.744a34.133333 34.133333 0 0 1-7.509333 47.786666l-110.421334 80.213334a34.133333 34.133333 0 0 1-47.786666-7.509334L505.685333 706.218667 288.426667 1005.226667a34.133333 34.133333 0 0 1-47.786667 7.509333l-110.421333-80.213333a34.133333 34.133333 0 0 1-7.509334-47.786667l214.186667-295.253333L29.013333 489.813333a34.133333 34.133333 0 0 1-22.016-43.008l42.154667-129.877333a34.133333 34.133333 0 0 1 43.008-22.016l320.512 104.106667L412.672 51.2c0-18.773333 15.36-34.133333 34.133333-34.133333h136.533334z\\\\\"></path></svg></strong>Username\n        <!--v-if-->\n        <!--v-if-->\n      </label></div>\n    <div class=\\\\\"arco-col arco-col-19 arco-form-item-wrapper-col\\\\\" id=\\\\\"name\\\\\">\n      <div class=\\\\\"arco-form-item-content-wrapper\\\\\">\n        <div class=\\\\\"arco-form-item-content arco-form-item-content-flex\\\\\"><span class=\\\\\"arco-input-wrapper\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" placeholder=\\\\\"please enter your username...\\\\\" value=\\\\\"\\\\\"><!----><!----></span></div>\n      </div>\n      <!--v-if-->\n      <!--v-if-->\n    </div>\n  </div>\n  <div class=\\\\\"arco-row arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-horizontal\\\\\">\n    <div class=\\\\\"arco-col arco-col-5 arco-form-item-label-col\\\\\"><label class=\\\\\"arco-form-item-label\\\\\"><strong class=\\\\\"arco-form-item-label-required-symbol\\\\\"><svg fill=\\\\\"currentColor\\\\\" viewBox=\\\\\"0 0 1024 1024\\\\\" width=\\\\\"1em\\\\\" height=\\\\\"1em\\\\\"><path d=\\\\\"M583.338667 17.066667c18.773333 0 34.133333 15.36 34.133333 34.133333v349.013333l313.344-101.888a34.133333 34.133333 0 0 1 43.008 22.016l42.154667 129.706667a34.133333 34.133333 0 0 1-21.845334 43.178667l-315.733333 102.4 208.896 287.744a34.133333 34.133333 0 0 1-7.509333 47.786666l-110.421334 80.213334a34.133333 34.133333 0 0 1-47.786666-7.509334L505.685333 706.218667 288.426667 1005.226667a34.133333 34.133333 0 0 1-47.786667 7.509333l-110.421333-80.213333a34.133333 34.133333 0 0 1-7.509334-47.786667l214.186667-295.253333L29.013333 489.813333a34.133333 34.133333 0 0 1-22.016-43.008l42.154667-129.877333a34.133333 34.133333 0 0 1 43.008-22.016l320.512 104.106667L412.672 51.2c0-18.773333 15.36-34.133333 34.133333-34.133333h136.533334z\\\\\"></path></svg></strong>Age\n        <!--v-if-->\n        <!--v-if-->\n      </label></div>\n    <div class=\\\\\"arco-col arco-col-19 arco-form-item-wrapper-col\\\\\" id=\\\\\"age\\\\\">\n      <div class=\\\\\"arco-form-item-content-wrapper\\\\\">\n        <div class=\\\\\"arco-form-item-content arco-form-item-content-flex\\\\\"><span class=\\\\\"arco-input-wrapper arco-input-number arco-input-number-mode-embed arco-input-number-size-medium\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" placeholder=\\\\\"please enter your age...\\\\\" role=\\\\\"spinbutton\\\\\" aria-valuemax=\\\\\"Infinity\\\\\" aria-valuemin=\\\\\"-Infinity\\\\\" aria-valuenow=\\\\\"\\\\\" value=\\\\\"\\\\\"><!----><span class=\\\\\"arco-input-suffix\\\\\"><!----><!----><div class=\\\\\"arco-input-number-step\\\\\"><button class=\\\\\"arco-input-number-step-button\\\\\" type=\\\\\"button\\\\\" tabindex=\\\\\"-1\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-up\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 30.557 24.043 15 8.487 30.557\\\\\"></path></svg></button><button class=\\\\\"arco-input-number-step-button\\\\\" type=\\\\\"button\\\\\" tabindex=\\\\\"-1\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></button></div><!----></span></span></div>\n      </div>\n      <!--v-if-->\n      <!--v-if-->\n    </div>\n  </div>\n  <div class=\\\\\"arco-row arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-horizontal\\\\\">\n    <div class=\\\\\"arco-col arco-col-5 arco-form-item-label-col\\\\\"><label class=\\\\\"arco-form-item-label\\\\\">\n        <!--v-if-->Section\n        <!--v-if-->\n        <!--v-if-->\n      </label></div>\n    <div class=\\\\\"arco-col arco-col-19 arco-form-item-wrapper-col\\\\\" id=\\\\\"section\\\\\">\n      <div class=\\\\\"arco-form-item-content-wrapper\\\\\">\n        <div class=\\\\\"arco-form-item-content arco-form-item-content-flex\\\\\"><span class=\\\\\"arco-select-view-single arco-select arco-select-view arco-select-view-size-medium\\\\\" title=\\\\\"\\\\\"><!----><input class=\\\\\"arco-select-view-input\\\\\" readonly=\\\\\"\\\\\" placeholder=\\\\\"Please select ...\\\\\" value=\\\\\"\\\\\"><span class=\\\\\"arco-select-view-value arco-select-view-value-hidden\\\\\"><!----></span><span class=\\\\\"arco-select-view-suffix\\\\\"><!----><span class=\\\\\"arco-select-view-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down arco-select-view-arrow-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n          <!----></span></span>\n          <!---->\n        </div>\n      </div>\n      <!--v-if-->\n      <!--v-if-->\n    </div>\n  </div>\n  <div class=\\\\\"arco-row arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-horizontal\\\\\">\n    <div class=\\\\\"arco-col arco-col-5 arco-form-item-label-col\\\\\"><label class=\\\\\"arco-form-item-label\\\\\"><strong class=\\\\\"arco-form-item-label-required-symbol\\\\\"><svg fill=\\\\\"currentColor\\\\\" viewBox=\\\\\"0 0 1024 1024\\\\\" width=\\\\\"1em\\\\\" height=\\\\\"1em\\\\\"><path d=\\\\\"M583.338667 17.066667c18.773333 0 34.133333 15.36 34.133333 34.133333v349.013333l313.344-101.888a34.133333 34.133333 0 0 1 43.008 22.016l42.154667 129.706667a34.133333 34.133333 0 0 1-21.845334 43.178667l-315.733333 102.4 208.896 287.744a34.133333 34.133333 0 0 1-7.509333 47.786666l-110.421334 80.213334a34.133333 34.133333 0 0 1-47.786666-7.509334L505.685333 706.218667 288.426667 1005.226667a34.133333 34.133333 0 0 1-47.786667 7.509333l-110.421333-80.213333a34.133333 34.133333 0 0 1-7.509334-47.786667l214.186667-295.253333L29.013333 489.813333a34.133333 34.133333 0 0 1-22.016-43.008l42.154667-129.877333a34.133333 34.133333 0 0 1 43.008-22.016l320.512 104.106667L412.672 51.2c0-18.773333 15.36-34.133333 34.133333-34.133333h136.533334z\\\\\"></path></svg></strong>Province\n        <!--v-if-->\n        <!--v-if-->\n      </label></div>\n    <div class=\\\\\"arco-col arco-col-19 arco-form-item-wrapper-col\\\\\" id=\\\\\"province\\\\\">\n      <div class=\\\\\"arco-form-item-content-wrapper\\\\\">\n        <div class=\\\\\"arco-form-item-content arco-form-item-content-flex\\\\\"><span class=\\\\\"arco-select-view-single arco-select-view arco-select-view-size-medium\\\\\" title=\\\\\"Beijing / Haidian\\\\\"><!----><input class=\\\\\"arco-select-view-input arco-select-view-input-hidden\\\\\" readonly=\\\\\"\\\\\" placeholder=\\\\\"Please select ...\\\\\" value=\\\\\"\\\\\"><span class=\\\\\"arco-select-view-value\\\\\">Beijing / Haidian</span><span class=\\\\\"arco-select-view-suffix\\\\\"><span class=\\\\\"arco-icon-hover arco-select-view-clear-btn\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-close\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M9.857 9.858 24 24m0 0 14.142 14.142M24 24 38.142 9.858M24 24 9.857 38.142\\\\\"></path></svg></span><span class=\\\\\"arco-select-view-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down arco-select-view-arrow-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n          <!----></span></span>\n          <!---->\n        </div>\n      </div>\n      <!--v-if-->\n      <!--v-if-->\n    </div>\n  </div>\n  <div class=\\\\\"arco-row arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-horizontal\\\\\">\n    <div class=\\\\\"arco-col arco-col-5 arco-form-item-label-col\\\\\"><label class=\\\\\"arco-form-item-label\\\\\">\n        <!--v-if-->Options\n        <!--v-if-->\n        <!--v-if-->\n      </label></div>\n    <div class=\\\\\"arco-col arco-col-19 arco-form-item-wrapper-col\\\\\" id=\\\\\"options\\\\\">\n      <div class=\\\\\"arco-form-item-content-wrapper\\\\\">\n        <div class=\\\\\"arco-form-item-content arco-form-item-content-flex\\\\\"><span class=\\\\\"arco-checkbox-group arco-checkbox-group-direction-horizontal\\\\\"><label aria-disabled=\\\\\"false\\\\\" class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"option one\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span><span class=\\\\\"arco-checkbox-label\\\\\">Section One</span></label><label aria-disabled=\\\\\"false\\\\\" class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"option two\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span><span class=\\\\\"arco-checkbox-label\\\\\">Option Two</span></label><label aria-disabled=\\\\\"false\\\\\" class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"option three\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span><span class=\\\\\"arco-checkbox-label\\\\\">Option Three</span></label><label aria-disabled=\\\\\"false\\\\\" class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"option four\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span><span class=\\\\\"arco-checkbox-label\\\\\">Option Four</span></label></span></div>\n      </div>\n      <!--v-if-->\n      <!--v-if-->\n    </div>\n  </div>\n  <div class=\\\\\"arco-row arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-horizontal\\\\\">\n    <div class=\\\\\"arco-col arco-col-5 arco-form-item-label-col\\\\\"><label class=\\\\\"arco-form-item-label\\\\\">\n        <!--v-if-->Date\n        <!--v-if-->\n        <!--v-if-->\n      </label></div>\n    <div class=\\\\\"arco-col arco-col-19 arco-form-item-wrapper-col\\\\\" id=\\\\\"date\\\\\">\n      <div class=\\\\\"arco-form-item-content-wrapper\\\\\">\n        <div class=\\\\\"arco-form-item-content arco-form-item-content-flex\\\\\">\n          <div class=\\\\\"arco-picker arco-picker-size-medium\\\\\" visible=\\\\\"false\\\\\">\n            <!--v-if-->\n            <div class=\\\\\"arco-picker-input\\\\\"><input placeholder=\\\\\"Please select ...\\\\\" class=\\\\\"arco-picker-start-time\\\\\"></div>\n            <div class=\\\\\"arco-picker-suffix\\\\\">\n              <!--v-if--><span class=\\\\\"arco-picker-suffix-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-calendar\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M7 22h34M14 5v8m20-8v8M8 41h32a1 1 0 0 0 1-1V10a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v30a1 1 0 0 0 1 1Z\\\\\"></path></svg></span>\n              <!--v-if-->\n            </div>\n          </div>\n          <!---->\n        </div>\n      </div>\n      <!--v-if-->\n      <!--v-if-->\n    </div>\n  </div>\n  <div class=\\\\\"arco-row arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-horizontal\\\\\">\n    <div class=\\\\\"arco-col arco-col-5 arco-form-item-label-col\\\\\"><label class=\\\\\"arco-form-item-label\\\\\">\n        <!--v-if-->Time\n        <!--v-if-->\n        <!--v-if-->\n      </label></div>\n    <div class=\\\\\"arco-col arco-col-19 arco-form-item-wrapper-col\\\\\" id=\\\\\"time\\\\\">\n      <div class=\\\\\"arco-form-item-content-wrapper\\\\\">\n        <div class=\\\\\"arco-form-item-content arco-form-item-content-flex\\\\\">\n          <div class=\\\\\"arco-picker arco-picker-size-medium\\\\\" visible=\\\\\"false\\\\\" editable=\\\\\"true\\\\\">\n            <!--v-if-->\n            <div class=\\\\\"arco-picker-input\\\\\"><input placeholder=\\\\\"Please select ...\\\\\" class=\\\\\"arco-picker-start-time\\\\\"></div>\n            <div class=\\\\\"arco-picker-suffix\\\\\">\n              <!--v-if--><span class=\\\\\"arco-picker-suffix-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-clock-circle\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M24 14v10h9.5m8.5 0c0 9.941-8.059 18-18 18S6 33.941 6 24 14.059 6 24 6s18 8.059 18 18Z\\\\\"></path></svg></span>\n              <!--v-if-->\n            </div>\n          </div>\n          <!---->\n        </div>\n      </div>\n      <!--v-if-->\n      <!--v-if-->\n    </div>\n  </div>\n  <div class=\\\\\"arco-row arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-horizontal\\\\\">\n    <div class=\\\\\"arco-col arco-col-5 arco-form-item-label-col\\\\\"><label class=\\\\\"arco-form-item-label\\\\\">\n        <!--v-if-->Radio\n        <!--v-if-->\n        <!--v-if-->\n      </label></div>\n    <div class=\\\\\"arco-col arco-col-19 arco-form-item-wrapper-col\\\\\" id=\\\\\"radio\\\\\">\n      <div class=\\\\\"arco-form-item-content-wrapper\\\\\">\n        <div class=\\\\\"arco-form-item-content arco-form-item-content-flex\\\\\"><span class=\\\\\"arco-radio-group arco-radio-group-size-medium arco-radio-group-direction-horizontal\\\\\"><label class=\\\\\"arco-radio arco-radio-checked\\\\\"><input type=\\\\\"radio\\\\\" checked=\\\\\"\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"radio one\\\\\"><span class=\\\\\"arco-icon-hover arco-icon-hover-disabled arco-radio-icon-hover\\\\\"><span class=\\\\\"arco-radio-icon\\\\\"></span></span><span class=\\\\\"arco-radio-label\\\\\">Radio One</span></label><label class=\\\\\"arco-radio\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"radio two\\\\\"><span class=\\\\\"arco-icon-hover arco-radio-icon-hover\\\\\"><span class=\\\\\"arco-radio-icon\\\\\"></span></span><span class=\\\\\"arco-radio-label\\\\\">Radio Two</span></label></span></div>\n      </div>\n      <!--v-if-->\n      <!--v-if-->\n    </div>\n  </div>\n  <div class=\\\\\"arco-row arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-horizontal\\\\\">\n    <div class=\\\\\"arco-col arco-col-5 arco-form-item-label-col\\\\\"><label class=\\\\\"arco-form-item-label\\\\\">\n        <!--v-if-->Slider\n        <!--v-if-->\n        <!--v-if-->\n      </label></div>\n    <div class=\\\\\"arco-col arco-col-19 arco-form-item-wrapper-col\\\\\" id=\\\\\"slider\\\\\">\n      <div class=\\\\\"arco-form-item-content-wrapper\\\\\">\n        <div class=\\\\\"arco-form-item-content arco-form-item-content-flex\\\\\">\n          <div class=\\\\\"arco-slider\\\\\">\n            <div class=\\\\\"arco-slider-track\\\\\">\n              <div class=\\\\\"arco-slider-bar\\\\\" style=\\\\\"left: 0%; right: 50%;\\\\\"></div>\n              <!--v-if-->\n              <!--v-if-->\n              <!--v-if-->\n              <!--v-if-->\n              <div style=\\\\\"left: 50%;\\\\\" tabindex=\\\\\"0\\\\\" role=\\\\\"slider\\\\\" aria-disabled=\\\\\"false\\\\\" aria-valuemax=\\\\\"10\\\\\" aria-valuemin=\\\\\"0\\\\\" aria-valuenow=\\\\\"5\\\\\" aria-valuetext=\\\\\"5\\\\\" class=\\\\\"arco-slider-btn\\\\\"></div>\n              <!---->\n            </div>\n            <!--v-if-->\n          </div>\n        </div>\n      </div>\n      <!--v-if-->\n      <!--v-if-->\n    </div>\n  </div>\n  <div class=\\\\\"arco-row arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-horizontal\\\\\">\n    <div class=\\\\\"arco-col arco-col-5 arco-form-item-label-col\\\\\"><label class=\\\\\"arco-form-item-label\\\\\">\n        <!--v-if-->Score\n        <!--v-if-->\n        <!--v-if-->\n      </label></div>\n    <div class=\\\\\"arco-col arco-col-19 arco-form-item-wrapper-col\\\\\" id=\\\\\"score\\\\\">\n      <div class=\\\\\"arco-form-item-content-wrapper\\\\\">\n        <div class=\\\\\"arco-form-item-content arco-form-item-content-flex\\\\\">\n          <div class=\\\\\"arco-rate\\\\\">\n            <div class=\\\\\"arco-rate-character arco-rate-character-full\\\\\" role=\\\\\"radio\\\\\" aria-checked=\\\\\"true\\\\\" aria-setsize=\\\\\"5\\\\\" aria-posinset=\\\\\"1\\\\\">\n              <div class=\\\\\"arco-rate-character-left\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-star-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n                  <path d=\\\\\"M22.683 5.415c.568-1.043 2.065-1.043 2.634 0l5.507 10.098a1.5 1.5 0 0 0 1.04.756l11.306 2.117c1.168.219 1.63 1.642.814 2.505l-7.902 8.359a1.5 1.5 0 0 0-.397 1.223l1.48 11.407c.153 1.177-1.058 2.057-2.131 1.548l-10.391-4.933a1.5 1.5 0 0 0-1.287 0l-10.39 4.933c-1.073.51-2.284-.37-2.131-1.548l1.48-11.407a1.5 1.5 0 0 0-.398-1.223L4.015 20.89c-.816-.863-.353-2.286.814-2.505l11.306-2.117a1.5 1.5 0 0 0 1.04-.756l5.508-10.098Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n                </svg></div>\n              <div class=\\\\\"arco-rate-character-right\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-star-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n                  <path d=\\\\\"M22.683 5.415c.568-1.043 2.065-1.043 2.634 0l5.507 10.098a1.5 1.5 0 0 0 1.04.756l11.306 2.117c1.168.219 1.63 1.642.814 2.505l-7.902 8.359a1.5 1.5 0 0 0-.397 1.223l1.48 11.407c.153 1.177-1.058 2.057-2.131 1.548l-10.391-4.933a1.5 1.5 0 0 0-1.287 0l-10.39 4.933c-1.073.51-2.284-.37-2.131-1.548l1.48-11.407a1.5 1.5 0 0 0-.398-1.223L4.015 20.89c-.816-.863-.353-2.286.814-2.505l11.306-2.117a1.5 1.5 0 0 0 1.04-.756l5.508-10.098Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n                </svg></div>\n            </div>\n            <div class=\\\\\"arco-rate-character arco-rate-character-full\\\\\" role=\\\\\"radio\\\\\" aria-checked=\\\\\"true\\\\\" aria-setsize=\\\\\"5\\\\\" aria-posinset=\\\\\"2\\\\\">\n              <div class=\\\\\"arco-rate-character-left\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-star-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n                  <path d=\\\\\"M22.683 5.415c.568-1.043 2.065-1.043 2.634 0l5.507 10.098a1.5 1.5 0 0 0 1.04.756l11.306 2.117c1.168.219 1.63 1.642.814 2.505l-7.902 8.359a1.5 1.5 0 0 0-.397 1.223l1.48 11.407c.153 1.177-1.058 2.057-2.131 1.548l-10.391-4.933a1.5 1.5 0 0 0-1.287 0l-10.39 4.933c-1.073.51-2.284-.37-2.131-1.548l1.48-11.407a1.5 1.5 0 0 0-.398-1.223L4.015 20.89c-.816-.863-.353-2.286.814-2.505l11.306-2.117a1.5 1.5 0 0 0 1.04-.756l5.508-10.098Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n                </svg></div>\n              <div class=\\\\\"arco-rate-character-right\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-star-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n                  <path d=\\\\\"M22.683 5.415c.568-1.043 2.065-1.043 2.634 0l5.507 10.098a1.5 1.5 0 0 0 1.04.756l11.306 2.117c1.168.219 1.63 1.642.814 2.505l-7.902 8.359a1.5 1.5 0 0 0-.397 1.223l1.48 11.407c.153 1.177-1.058 2.057-2.131 1.548l-10.391-4.933a1.5 1.5 0 0 0-1.287 0l-10.39 4.933c-1.073.51-2.284-.37-2.131-1.548l1.48-11.407a1.5 1.5 0 0 0-.398-1.223L4.015 20.89c-.816-.863-.353-2.286.814-2.505l11.306-2.117a1.5 1.5 0 0 0 1.04-.756l5.508-10.098Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n                </svg></div>\n            </div>\n            <div class=\\\\\"arco-rate-character arco-rate-character-full\\\\\" role=\\\\\"radio\\\\\" aria-checked=\\\\\"true\\\\\" aria-setsize=\\\\\"5\\\\\" aria-posinset=\\\\\"3\\\\\">\n              <div class=\\\\\"arco-rate-character-left\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-star-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n                  <path d=\\\\\"M22.683 5.415c.568-1.043 2.065-1.043 2.634 0l5.507 10.098a1.5 1.5 0 0 0 1.04.756l11.306 2.117c1.168.219 1.63 1.642.814 2.505l-7.902 8.359a1.5 1.5 0 0 0-.397 1.223l1.48 11.407c.153 1.177-1.058 2.057-2.131 1.548l-10.391-4.933a1.5 1.5 0 0 0-1.287 0l-10.39 4.933c-1.073.51-2.284-.37-2.131-1.548l1.48-11.407a1.5 1.5 0 0 0-.398-1.223L4.015 20.89c-.816-.863-.353-2.286.814-2.505l11.306-2.117a1.5 1.5 0 0 0 1.04-.756l5.508-10.098Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n                </svg></div>\n              <div class=\\\\\"arco-rate-character-right\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-star-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n                  <path d=\\\\\"M22.683 5.415c.568-1.043 2.065-1.043 2.634 0l5.507 10.098a1.5 1.5 0 0 0 1.04.756l11.306 2.117c1.168.219 1.63 1.642.814 2.505l-7.902 8.359a1.5 1.5 0 0 0-.397 1.223l1.48 11.407c.153 1.177-1.058 2.057-2.131 1.548l-10.391-4.933a1.5 1.5 0 0 0-1.287 0l-10.39 4.933c-1.073.51-2.284-.37-2.131-1.548l1.48-11.407a1.5 1.5 0 0 0-.398-1.223L4.015 20.89c-.816-.863-.353-2.286.814-2.505l11.306-2.117a1.5 1.5 0 0 0 1.04-.756l5.508-10.098Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n                </svg></div>\n            </div>\n            <div class=\\\\\"arco-rate-character arco-rate-character-full\\\\\" role=\\\\\"radio\\\\\" aria-checked=\\\\\"true\\\\\" aria-setsize=\\\\\"5\\\\\" aria-posinset=\\\\\"4\\\\\">\n              <div class=\\\\\"arco-rate-character-left\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-star-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n                  <path d=\\\\\"M22.683 5.415c.568-1.043 2.065-1.043 2.634 0l5.507 10.098a1.5 1.5 0 0 0 1.04.756l11.306 2.117c1.168.219 1.63 1.642.814 2.505l-7.902 8.359a1.5 1.5 0 0 0-.397 1.223l1.48 11.407c.153 1.177-1.058 2.057-2.131 1.548l-10.391-4.933a1.5 1.5 0 0 0-1.287 0l-10.39 4.933c-1.073.51-2.284-.37-2.131-1.548l1.48-11.407a1.5 1.5 0 0 0-.398-1.223L4.015 20.89c-.816-.863-.353-2.286.814-2.505l11.306-2.117a1.5 1.5 0 0 0 1.04-.756l5.508-10.098Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n                </svg></div>\n              <div class=\\\\\"arco-rate-character-right\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-star-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n                  <path d=\\\\\"M22.683 5.415c.568-1.043 2.065-1.043 2.634 0l5.507 10.098a1.5 1.5 0 0 0 1.04.756l11.306 2.117c1.168.219 1.63 1.642.814 2.505l-7.902 8.359a1.5 1.5 0 0 0-.397 1.223l1.48 11.407c.153 1.177-1.058 2.057-2.131 1.548l-10.391-4.933a1.5 1.5 0 0 0-1.287 0l-10.39 4.933c-1.073.51-2.284-.37-2.131-1.548l1.48-11.407a1.5 1.5 0 0 0-.398-1.223L4.015 20.89c-.816-.863-.353-2.286.814-2.505l11.306-2.117a1.5 1.5 0 0 0 1.04-.756l5.508-10.098Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n                </svg></div>\n            </div>\n            <div class=\\\\\"arco-rate-character arco-rate-character-full\\\\\" role=\\\\\"radio\\\\\" aria-checked=\\\\\"true\\\\\" aria-setsize=\\\\\"5\\\\\" aria-posinset=\\\\\"5\\\\\">\n              <div class=\\\\\"arco-rate-character-left\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-star-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n                  <path d=\\\\\"M22.683 5.415c.568-1.043 2.065-1.043 2.634 0l5.507 10.098a1.5 1.5 0 0 0 1.04.756l11.306 2.117c1.168.219 1.63 1.642.814 2.505l-7.902 8.359a1.5 1.5 0 0 0-.397 1.223l1.48 11.407c.153 1.177-1.058 2.057-2.131 1.548l-10.391-4.933a1.5 1.5 0 0 0-1.287 0l-10.39 4.933c-1.073.51-2.284-.37-2.131-1.548l1.48-11.407a1.5 1.5 0 0 0-.398-1.223L4.015 20.89c-.816-.863-.353-2.286.814-2.505l11.306-2.117a1.5 1.5 0 0 0 1.04-.756l5.508-10.098Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n                </svg></div>\n              <div class=\\\\\"arco-rate-character-right\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-star-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n                  <path d=\\\\\"M22.683 5.415c.568-1.043 2.065-1.043 2.634 0l5.507 10.098a1.5 1.5 0 0 0 1.04.756l11.306 2.117c1.168.219 1.63 1.642.814 2.505l-7.902 8.359a1.5 1.5 0 0 0-.397 1.223l1.48 11.407c.153 1.177-1.058 2.057-2.131 1.548l-10.391-4.933a1.5 1.5 0 0 0-1.287 0l-10.39 4.933c-1.073.51-2.284-.37-2.131-1.548l1.48-11.407a1.5 1.5 0 0 0-.398-1.223L4.015 20.89c-.816-.863-.353-2.286.814-2.505l11.306-2.117a1.5 1.5 0 0 0 1.04-.756l5.508-10.098Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n                </svg></div>\n            </div>\n          </div>\n        </div>\n      </div>\n      <!--v-if-->\n      <!--v-if-->\n    </div>\n  </div>\n  <div class=\\\\\"arco-row arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-horizontal\\\\\">\n    <div class=\\\\\"arco-col arco-col-5 arco-form-item-label-col\\\\\"><label class=\\\\\"arco-form-item-label\\\\\">\n        <!--v-if-->Switch\n        <!--v-if-->\n        <!--v-if-->\n      </label></div>\n    <div class=\\\\\"arco-col arco-col-19 arco-form-item-wrapper-col\\\\\" id=\\\\\"switch\\\\\">\n      <div class=\\\\\"arco-form-item-content-wrapper\\\\\">\n        <div class=\\\\\"arco-form-item-content arco-form-item-content-flex\\\\\"><button type=\\\\\"button\\\\\" role=\\\\\"switch\\\\\" aria-checked=\\\\\"false\\\\\" class=\\\\\"arco-switch arco-switch-type-circle\\\\\"><span class=\\\\\"arco-switch-handle\\\\\"><span class=\\\\\"arco-switch-handle-icon\\\\\"></span></span><!--  prettier-ignore  -->\n            <!--v-if-->\n          </button></div>\n      </div>\n      <!--v-if-->\n      <!--v-if-->\n    </div>\n  </div>\n  <div class=\\\\\"arco-row arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-horizontal\\\\\">\n    <div class=\\\\\"arco-col arco-col-5 arco-form-item-label-col\\\\\"><label class=\\\\\"arco-form-item-label\\\\\">\n        <!--v-if-->Multiple Select\n        <!--v-if-->\n        <!--v-if-->\n      </label></div>\n    <div class=\\\\\"arco-col arco-col-19 arco-form-item-wrapper-col\\\\\" id=\\\\\"multiSelect\\\\\">\n      <div class=\\\\\"arco-form-item-content-wrapper\\\\\">\n        <div class=\\\\\"arco-form-item-content arco-form-item-content-flex\\\\\"><span class=\\\\\"arco-select-view arco-select-view-size-medium arco-select-view-has-suffix arco-select-view-has-placeholder arco-select-view-multiple arco-select\\\\\"><span class=\\\\\"arco-select-view-mirror\\\\\">Please select ...</span>\n          <!---->\n          <transition-group-stub tag=\\\\\"span\\\\\" name=\\\\\"input-tag-zoom\\\\\" appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\" class=\\\\\"arco-select-view-inner\\\\\"><input class=\\\\\"arco-select-view-input\\\\\" style=\\\\\"width: 12px;\\\\\" placeholder=\\\\\"Please select ...\\\\\"></transition-group-stub>\n          <!----><span class=\\\\\"arco-select-view-suffix\\\\\"><!----><span class=\\\\\"arco-select-view-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down arco-select-view-arrow-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n          <!---->\n          <!----></span></span>\n          <!---->\n        </div>\n      </div>\n      <!--v-if-->\n      <!--v-if-->\n    </div>\n  </div>\n  <div class=\\\\\"arco-row arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-horizontal\\\\\">\n    <div class=\\\\\"arco-col arco-col-5 arco-form-item-label-col\\\\\"><label class=\\\\\"arco-form-item-label\\\\\">\n        <!--v-if-->Tree Select\n        <!--v-if-->\n        <!--v-if-->\n      </label></div>\n    <div class=\\\\\"arco-col arco-col-19 arco-form-item-wrapper-col\\\\\" id=\\\\\"treeSelect\\\\\">\n      <div class=\\\\\"arco-form-item-content-wrapper\\\\\">\n        <div class=\\\\\"arco-form-item-content arco-form-item-content-flex\\\\\"><span class=\\\\\"arco-select-view-single arco-select-view arco-select-view-size-medium\\\\\" title=\\\\\"\\\\\"><!----><input class=\\\\\"arco-select-view-input\\\\\" readonly=\\\\\"\\\\\" placeholder=\\\\\"Please select ...\\\\\" value=\\\\\"\\\\\"><span class=\\\\\"arco-select-view-value arco-select-view-value-hidden\\\\\"><!----></span><span class=\\\\\"arco-select-view-suffix\\\\\"><!----><span class=\\\\\"arco-select-view-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down arco-select-view-arrow-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n          <!----></span></span>\n          <!---->\n        </div>\n      </div>\n      <!--v-if-->\n      <!--v-if-->\n    </div>\n  </div>\n  <div class=\\\\\"arco-row arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-horizontal\\\\\">\n    <div class=\\\\\"arco-col arco-col-5 arco-form-item-label-col\\\\\"><label class=\\\\\"arco-form-item-label\\\\\">\n        <!--v-if-->\n        <!--v-if-->\n        <!--v-if-->\n      </label></div>\n    <div class=\\\\\"arco-col arco-col-19 arco-form-item-wrapper-col\\\\\">\n      <div class=\\\\\"arco-form-item-content-wrapper\\\\\">\n        <div class=\\\\\"arco-form-item-content arco-form-item-content-flex\\\\\">\n          <div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 8px; row-gap: 8px;\\\\\">\n            <!---->\n            <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"submit\\\\\">\n                <!--v-if-->Submit\n              </button></div>\n            <!---->\n            <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n                <!--v-if-->Reset\n              </button></div>\n          </div>\n        </div>\n      </div>\n      <!--v-if-->\n      <!--v-if-->\n    </div>\n  </div>\n</form>\n {\n \\\\\"size\\\\\": \\\\\"medium\\\\\",\n \\\\\"name\\\\\": \\\\\"\\\\\",\n \\\\\"section\\\\\": \\\\\"\\\\\",\n \\\\\"province\\\\\": \\\\\"haidian\\\\\",\n \\\\\"options\\\\\": [],\n \\\\\"date\\\\\": \\\\\"\\\\\",\n \\\\\"time\\\\\": \\\\\"\\\\\",\n \\\\\"radio\\\\\": \\\\\"radio one\\\\\",\n \\\\\"slider\\\\\": 5,\n \\\\\"score\\\\\": 5,\n \\\\\"switch\\\\\": false,\n \\\\\"multiSelect\\\\\": [\n \\\\\"section one\\\\\"\n ],\n \\\\\"treeSelect\\\\\": \\\\\"\\\\\"\n }\"\n`;\n\nexports[`<form> demo: render [validation2] correctly 1`] = `\n\"<form class=\\\\\"arco-form arco-form-layout-horizontal arco-form-size-medium\\\\\" style=\\\\\"width: 600px;\\\\\">\n  <div class=\\\\\"arco-row arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-horizontal\\\\\">\n    <div class=\\\\\"arco-col arco-col-5 arco-form-item-label-col\\\\\"><label class=\\\\\"arco-form-item-label\\\\\"><strong class=\\\\\"arco-form-item-label-required-symbol\\\\\"><svg fill=\\\\\"currentColor\\\\\" viewBox=\\\\\"0 0 1024 1024\\\\\" width=\\\\\"1em\\\\\" height=\\\\\"1em\\\\\"><path d=\\\\\"M583.338667 17.066667c18.773333 0 34.133333 15.36 34.133333 34.133333v349.013333l313.344-101.888a34.133333 34.133333 0 0 1 43.008 22.016l42.154667 129.706667a34.133333 34.133333 0 0 1-21.845334 43.178667l-315.733333 102.4 208.896 287.744a34.133333 34.133333 0 0 1-7.509333 47.786666l-110.421334 80.213334a34.133333 34.133333 0 0 1-47.786666-7.509334L505.685333 706.218667 288.426667 1005.226667a34.133333 34.133333 0 0 1-47.786667 7.509333l-110.421333-80.213333a34.133333 34.133333 0 0 1-7.509334-47.786667l214.186667-295.253333L29.013333 489.813333a34.133333 34.133333 0 0 1-22.016-43.008l42.154667-129.877333a34.133333 34.133333 0 0 1 43.008-22.016l320.512 104.106667L412.672 51.2c0-18.773333 15.36-34.133333 34.133333-34.133333h136.533334z\\\\\"></path></svg></strong>Username\n        <!--v-if-->\n        <!--v-if-->\n      </label></div>\n    <div class=\\\\\"arco-col arco-col-19 arco-form-item-wrapper-col\\\\\" id=\\\\\"name\\\\\">\n      <div class=\\\\\"arco-form-item-content-wrapper\\\\\">\n        <div class=\\\\\"arco-form-item-content arco-form-item-content-flex\\\\\"><span class=\\\\\"arco-input-wrapper\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" placeholder=\\\\\"please enter your username...\\\\\" value=\\\\\"\\\\\"><!----><!----></span></div>\n      </div>\n      <!--v-if-->\n      <!--v-if-->\n    </div>\n  </div>\n  <div class=\\\\\"arco-row arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-horizontal\\\\\">\n    <div class=\\\\\"arco-col arco-col-5 arco-form-item-label-col\\\\\"><label class=\\\\\"arco-form-item-label\\\\\"><strong class=\\\\\"arco-form-item-label-required-symbol\\\\\"><svg fill=\\\\\"currentColor\\\\\" viewBox=\\\\\"0 0 1024 1024\\\\\" width=\\\\\"1em\\\\\" height=\\\\\"1em\\\\\"><path d=\\\\\"M583.338667 17.066667c18.773333 0 34.133333 15.36 34.133333 34.133333v349.013333l313.344-101.888a34.133333 34.133333 0 0 1 43.008 22.016l42.154667 129.706667a34.133333 34.133333 0 0 1-21.845334 43.178667l-315.733333 102.4 208.896 287.744a34.133333 34.133333 0 0 1-7.509333 47.786666l-110.421334 80.213334a34.133333 34.133333 0 0 1-47.786666-7.509334L505.685333 706.218667 288.426667 1005.226667a34.133333 34.133333 0 0 1-47.786667 7.509333l-110.421333-80.213333a34.133333 34.133333 0 0 1-7.509334-47.786667l214.186667-295.253333L29.013333 489.813333a34.133333 34.133333 0 0 1-22.016-43.008l42.154667-129.877333a34.133333 34.133333 0 0 1 43.008-22.016l320.512 104.106667L412.672 51.2c0-18.773333 15.36-34.133333 34.133333-34.133333h136.533334z\\\\\"></path></svg></strong>密码\n        <!--v-if-->\n        <!--v-if-->\n      </label></div>\n    <div class=\\\\\"arco-col arco-col-19 arco-form-item-wrapper-col\\\\\" id=\\\\\"password\\\\\">\n      <div class=\\\\\"arco-form-item-content-wrapper\\\\\">\n        <div class=\\\\\"arco-form-item-content arco-form-item-content-flex\\\\\"><span class=\\\\\"arco-input-wrapper\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"password\\\\\" placeholder=\\\\\"please enter your password...\\\\\" value=\\\\\"\\\\\"><!----><span class=\\\\\"arco-input-suffix\\\\\"><!----><span class=\\\\\"arco-icon-hover\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-eye-invisible\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M14 14.5c-2.69 2-5.415 5.33-8 9.5 5.373 8.667 11.373 13 18 13 3.325 0 6.491-1.09 9.5-3.271M17.463 12.5C19 11 21.75 11 24 11c6.627 0 12.627 4.333 18 13-1.766 2.848-3.599 5.228-5.5 7.14\\\\\"></path><path d=\\\\\"M29 24a5 5 0 1 1-10 0 5 5 0 0 1 10 0ZM6.852 7.103l34.294 34.294\\\\\"></path></svg></span>\n          <!----></span></span>\n        </div>\n      </div>\n      <!--v-if-->\n      <!--v-if-->\n    </div>\n  </div>\n  <div class=\\\\\"arco-row arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-horizontal\\\\\">\n    <div class=\\\\\"arco-col arco-col-5 arco-form-item-label-col\\\\\"><label class=\\\\\"arco-form-item-label\\\\\"><strong class=\\\\\"arco-form-item-label-required-symbol\\\\\"><svg fill=\\\\\"currentColor\\\\\" viewBox=\\\\\"0 0 1024 1024\\\\\" width=\\\\\"1em\\\\\" height=\\\\\"1em\\\\\"><path d=\\\\\"M583.338667 17.066667c18.773333 0 34.133333 15.36 34.133333 34.133333v349.013333l313.344-101.888a34.133333 34.133333 0 0 1 43.008 22.016l42.154667 129.706667a34.133333 34.133333 0 0 1-21.845334 43.178667l-315.733333 102.4 208.896 287.744a34.133333 34.133333 0 0 1-7.509333 47.786666l-110.421334 80.213334a34.133333 34.133333 0 0 1-47.786666-7.509334L505.685333 706.218667 288.426667 1005.226667a34.133333 34.133333 0 0 1-47.786667 7.509333l-110.421333-80.213333a34.133333 34.133333 0 0 1-7.509334-47.786667l214.186667-295.253333L29.013333 489.813333a34.133333 34.133333 0 0 1-22.016-43.008l42.154667-129.877333a34.133333 34.133333 0 0 1 43.008-22.016l320.512 104.106667L412.672 51.2c0-18.773333 15.36-34.133333 34.133333-34.133333h136.533334z\\\\\"></path></svg></strong>确认密码\n        <!--v-if-->\n        <!--v-if-->\n      </label></div>\n    <div class=\\\\\"arco-col arco-col-19 arco-form-item-wrapper-col\\\\\" id=\\\\\"password2\\\\\">\n      <div class=\\\\\"arco-form-item-content-wrapper\\\\\">\n        <div class=\\\\\"arco-form-item-content arco-form-item-content-flex\\\\\"><span class=\\\\\"arco-input-wrapper\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"password\\\\\" placeholder=\\\\\"please confirm your password...\\\\\" value=\\\\\"\\\\\"><!----><span class=\\\\\"arco-input-suffix\\\\\"><!----><span class=\\\\\"arco-icon-hover\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-eye-invisible\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M14 14.5c-2.69 2-5.415 5.33-8 9.5 5.373 8.667 11.373 13 18 13 3.325 0 6.491-1.09 9.5-3.271M17.463 12.5C19 11 21.75 11 24 11c6.627 0 12.627 4.333 18 13-1.766 2.848-3.599 5.228-5.5 7.14\\\\\"></path><path d=\\\\\"M29 24a5 5 0 1 1-10 0 5 5 0 0 1 10 0ZM6.852 7.103l34.294 34.294\\\\\"></path></svg></span>\n          <!----></span></span>\n        </div>\n      </div>\n      <!--v-if-->\n      <!--v-if-->\n    </div>\n  </div>\n  <div class=\\\\\"arco-row arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-horizontal\\\\\">\n    <div class=\\\\\"arco-col arco-col-5 arco-form-item-label-col\\\\\"><label class=\\\\\"arco-form-item-label\\\\\"><strong class=\\\\\"arco-form-item-label-required-symbol\\\\\"><svg fill=\\\\\"currentColor\\\\\" viewBox=\\\\\"0 0 1024 1024\\\\\" width=\\\\\"1em\\\\\" height=\\\\\"1em\\\\\"><path d=\\\\\"M583.338667 17.066667c18.773333 0 34.133333 15.36 34.133333 34.133333v349.013333l313.344-101.888a34.133333 34.133333 0 0 1 43.008 22.016l42.154667 129.706667a34.133333 34.133333 0 0 1-21.845334 43.178667l-315.733333 102.4 208.896 287.744a34.133333 34.133333 0 0 1-7.509333 47.786666l-110.421334 80.213334a34.133333 34.133333 0 0 1-47.786666-7.509334L505.685333 706.218667 288.426667 1005.226667a34.133333 34.133333 0 0 1-47.786667 7.509333l-110.421333-80.213333a34.133333 34.133333 0 0 1-7.509334-47.786667l214.186667-295.253333L29.013333 489.813333a34.133333 34.133333 0 0 1-22.016-43.008l42.154667-129.877333a34.133333 34.133333 0 0 1 43.008-22.016l320.512 104.106667L412.672 51.2c0-18.773333 15.36-34.133333 34.133333-34.133333h136.533334z\\\\\"></path></svg></strong>email\n        <!--v-if-->\n        <!--v-if-->\n      </label></div>\n    <div class=\\\\\"arco-col arco-col-19 arco-form-item-wrapper-col\\\\\" id=\\\\\"email\\\\\">\n      <div class=\\\\\"arco-form-item-content-wrapper\\\\\">\n        <div class=\\\\\"arco-form-item-content arco-form-item-content-flex\\\\\"><span class=\\\\\"arco-input-wrapper\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" placeholder=\\\\\"please enter your email...\\\\\" value=\\\\\"\\\\\"><!----><!----></span></div>\n      </div>\n      <!--v-if-->\n      <!--v-if-->\n    </div>\n  </div>\n  <div class=\\\\\"arco-row arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-horizontal\\\\\">\n    <div class=\\\\\"arco-col arco-col-5 arco-form-item-label-col\\\\\"><label class=\\\\\"arco-form-item-label\\\\\"><strong class=\\\\\"arco-form-item-label-required-symbol\\\\\"><svg fill=\\\\\"currentColor\\\\\" viewBox=\\\\\"0 0 1024 1024\\\\\" width=\\\\\"1em\\\\\" height=\\\\\"1em\\\\\"><path d=\\\\\"M583.338667 17.066667c18.773333 0 34.133333 15.36 34.133333 34.133333v349.013333l313.344-101.888a34.133333 34.133333 0 0 1 43.008 22.016l42.154667 129.706667a34.133333 34.133333 0 0 1-21.845334 43.178667l-315.733333 102.4 208.896 287.744a34.133333 34.133333 0 0 1-7.509333 47.786666l-110.421334 80.213334a34.133333 34.133333 0 0 1-47.786666-7.509334L505.685333 706.218667 288.426667 1005.226667a34.133333 34.133333 0 0 1-47.786667 7.509333l-110.421333-80.213333a34.133333 34.133333 0 0 1-7.509334-47.786667l214.186667-295.253333L29.013333 489.813333a34.133333 34.133333 0 0 1-22.016-43.008l42.154667-129.877333a34.133333 34.133333 0 0 1 43.008-22.016l320.512 104.106667L412.672 51.2c0-18.773333 15.36-34.133333 34.133333-34.133333h136.533334z\\\\\"></path></svg></strong>IP\n        <!--v-if-->\n        <!--v-if-->\n      </label></div>\n    <div class=\\\\\"arco-col arco-col-19 arco-form-item-wrapper-col\\\\\" id=\\\\\"ip\\\\\">\n      <div class=\\\\\"arco-form-item-content-wrapper\\\\\">\n        <div class=\\\\\"arco-form-item-content arco-form-item-content-flex\\\\\"><span class=\\\\\"arco-input-wrapper\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" placeholder=\\\\\"please enter your ip...\\\\\" value=\\\\\"192.168.2.1\\\\\"><!----><!----></span></div>\n      </div>\n      <!--v-if-->\n      <!--v-if-->\n    </div>\n  </div>\n  <div class=\\\\\"arco-row arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-horizontal\\\\\">\n    <div class=\\\\\"arco-col arco-col-5 arco-form-item-label-col\\\\\"><label class=\\\\\"arco-form-item-label\\\\\"><strong class=\\\\\"arco-form-item-label-required-symbol\\\\\"><svg fill=\\\\\"currentColor\\\\\" viewBox=\\\\\"0 0 1024 1024\\\\\" width=\\\\\"1em\\\\\" height=\\\\\"1em\\\\\"><path d=\\\\\"M583.338667 17.066667c18.773333 0 34.133333 15.36 34.133333 34.133333v349.013333l313.344-101.888a34.133333 34.133333 0 0 1 43.008 22.016l42.154667 129.706667a34.133333 34.133333 0 0 1-21.845334 43.178667l-315.733333 102.4 208.896 287.744a34.133333 34.133333 0 0 1-7.509333 47.786666l-110.421334 80.213334a34.133333 34.133333 0 0 1-47.786666-7.509334L505.685333 706.218667 288.426667 1005.226667a34.133333 34.133333 0 0 1-47.786667 7.509333l-110.421333-80.213333a34.133333 34.133333 0 0 1-7.509334-47.786667l214.186667-295.253333L29.013333 489.813333a34.133333 34.133333 0 0 1-22.016-43.008l42.154667-129.877333a34.133333 34.133333 0 0 1 43.008-22.016l320.512 104.106667L412.672 51.2c0-18.773333 15.36-34.133333 34.133333-34.133333h136.533334z\\\\\"></path></svg></strong>URL\n        <!--v-if-->\n        <!--v-if-->\n      </label></div>\n    <div class=\\\\\"arco-col arco-col-19 arco-form-item-wrapper-col\\\\\" id=\\\\\"url\\\\\">\n      <div class=\\\\\"arco-form-item-content-wrapper\\\\\">\n        <div class=\\\\\"arco-form-item-content arco-form-item-content-flex\\\\\"><span class=\\\\\"arco-input-wrapper\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" placeholder=\\\\\"please enter your url...\\\\\" value=\\\\\"\\\\\"><!----><!----></span></div>\n      </div>\n      <!--v-if-->\n      <!--v-if-->\n    </div>\n  </div>\n  <div class=\\\\\"arco-row arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-horizontal\\\\\">\n    <div class=\\\\\"arco-col arco-col-5 arco-form-item-label-col\\\\\"><label class=\\\\\"arco-form-item-label\\\\\"><strong class=\\\\\"arco-form-item-label-required-symbol\\\\\"><svg fill=\\\\\"currentColor\\\\\" viewBox=\\\\\"0 0 1024 1024\\\\\" width=\\\\\"1em\\\\\" height=\\\\\"1em\\\\\"><path d=\\\\\"M583.338667 17.066667c18.773333 0 34.133333 15.36 34.133333 34.133333v349.013333l313.344-101.888a34.133333 34.133333 0 0 1 43.008 22.016l42.154667 129.706667a34.133333 34.133333 0 0 1-21.845334 43.178667l-315.733333 102.4 208.896 287.744a34.133333 34.133333 0 0 1-7.509333 47.786666l-110.421334 80.213334a34.133333 34.133333 0 0 1-47.786666-7.509334L505.685333 706.218667 288.426667 1005.226667a34.133333 34.133333 0 0 1-47.786667 7.509333l-110.421333-80.213333a34.133333 34.133333 0 0 1-7.509334-47.786667l214.186667-295.253333L29.013333 489.813333a34.133333 34.133333 0 0 1-22.016-43.008l42.154667-129.877333a34.133333 34.133333 0 0 1 43.008-22.016l320.512 104.106667L412.672 51.2c0-18.773333 15.36-34.133333 34.133333-34.133333h136.533334z\\\\\"></path></svg></strong>match\n        <!--v-if-->\n        <!--v-if-->\n      </label></div>\n    <div class=\\\\\"arco-col arco-col-19 arco-form-item-wrapper-col\\\\\" id=\\\\\"match\\\\\">\n      <div class=\\\\\"arco-form-item-content-wrapper\\\\\">\n        <div class=\\\\\"arco-form-item-content arco-form-item-content-flex\\\\\"><span class=\\\\\"arco-input-wrapper\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" placeholder=\\\\\"please enter your match...\\\\\" value=\\\\\"\\\\\"><!----><!----></span></div>\n      </div>\n      <!--v-if-->\n      <!--v-if-->\n    </div>\n  </div>\n  <div class=\\\\\"arco-row arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-horizontal\\\\\">\n    <div class=\\\\\"arco-col arco-col-5 arco-form-item-label-col\\\\\"><label class=\\\\\"arco-form-item-label\\\\\">\n        <!--v-if-->\n        <!--v-if-->\n        <!--v-if-->\n      </label></div>\n    <div class=\\\\\"arco-col arco-col-19 arco-form-item-wrapper-col\\\\\">\n      <div class=\\\\\"arco-form-item-content-wrapper\\\\\">\n        <div class=\\\\\"arco-form-item-content arco-form-item-content-flex\\\\\">\n          <div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 8px; row-gap: 8px;\\\\\">\n            <!---->\n            <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"submit\\\\\">\n                <!--v-if-->Submit\n              </button></div>\n            <!---->\n            <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n                <!--v-if-->Reset\n              </button></div>\n          </div>\n        </div>\n      </div>\n      <!--v-if-->\n      <!--v-if-->\n    </div>\n  </div>\n</form>\n {\n \\\\\"name\\\\\": \\\\\"\\\\\",\n \\\\\"password\\\\\": \\\\\"\\\\\",\n \\\\\"password2\\\\\": \\\\\"\\\\\",\n \\\\\"email\\\\\": \\\\\"\\\\\",\n \\\\\"ip\\\\\": \\\\\"192.168.2.1\\\\\",\n \\\\\"url\\\\\": \\\\\"\\\\\",\n \\\\\"match\\\\\": \\\\\"\\\\\"\n }\"\n`;\n"
  },
  {
    "path": "packages/web-vue/components/form/__test__/demo.test.ts",
    "content": "import demoTest from '../../../scripts/demo-test';\n\ndemoTest('form');\n"
  },
  {
    "path": "packages/web-vue/components/form/__test__/demo.vue",
    "content": "<template>\n  <a-form :model=\"form\">\n    <a-form-item\n      field=\"name\"\n      label=\"Username\"\n      :rules=\"[\n        { required: true, message: 'name is required' },\n        {\n          minLength: 6,\n          message: 'name should up 6 chars',\n        },\n      ]\"\n    >\n      <a-input id=\"name\" v-model=\"form.name\" />\n    </a-form-item>\n    <a-form-item\n      field=\"post\"\n      label=\"Post\"\n      :rules=\"[{ required: true, message: 'post is required' }]\"\n    >\n      <a-input id=\"post\" v-model=\"form.post\" />\n    </a-form-item>\n  </a-form>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue';\nimport Form from '../index';\nimport Input from '../../input';\n\nconst FormItem = Form.Item;\n\nexport default defineComponent({\n  name: 'BasicDemo',\n  components: {\n    AForm: Form,\n    AFormItem: FormItem,\n    AInput: Input,\n  },\n  data() {\n    return {\n      form: {\n        name: '',\n        post: '',\n      },\n    };\n  },\n  methods: {},\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/form/__test__/index.test.ts",
    "content": "import { mount } from '@vue/test-utils';\nimport Demo from './demo.vue';\n\nObject.defineProperty(window, 'matchMedia', {\n  writable: true,\n  value: jest.fn().mockImplementation((query) => ({\n    matches: false,\n    media: query,\n    onchange: null,\n    addListener: jest.fn(), // deprecated\n    removeListener: jest.fn(), // deprecated\n    addEventListener: jest.fn(),\n    removeEventListener: jest.fn(),\n    dispatchEvent: jest.fn(),\n  })),\n});\n\ndescribe('Form', () => {\n  test('should show error message', async () => {\n    const wrapper = mount(Demo);\n\n    const nameInput = wrapper.find('#name input');\n    await nameInput.trigger('focus');\n    await nameInput.setValue('test');\n    await nameInput.trigger('blur');\n\n    expect(wrapper.find('.arco-form-item-message').text()).toBe(\n      'name should up 6 chars'\n    );\n  });\n\n  test('should emit submit event', async () => {\n    const wrapper = mount(Demo);\n    const form = wrapper.getComponent({ name: 'Form' });\n    await form.trigger('submit');\n\n    expect((form.emitted('submit')?.[0] as any[])[0]).toHaveProperty(\n      'errors.name'\n    );\n  });\n});\n"
  },
  {
    "path": "packages/web-vue/components/form/context.ts",
    "content": "import { InjectionKey } from 'vue';\nimport { Data } from '../_utils/types';\nimport {\n  FieldData,\n  FieldRule,\n  FormItemEventHandler,\n  ValidatedError,\n  ValidateStatus,\n} from './interface';\nimport { Size } from '../_utils/constant';\n\nexport interface FormContext {\n  layout: string;\n  disabled?: boolean;\n  labelAlign: string;\n  labelColProps?: any;\n  wrapperColProps?: any;\n  labelColStyle?: any;\n  wrapperColStyle?: any;\n  model: Data;\n  size: Size;\n  rules?: Record<string, FieldRule | FieldRule[]>;\n  fields: FormItemInfo[];\n  touchedFields: FormItemInfo[];\n  addField: (field: FormItemInfo) => void;\n  removeField: (field: FormItemInfo) => void;\n  validateField: (\n    field: string | string[],\n    callback?: (errors: undefined | Record<string, ValidatedError>) => void\n  ) => Promise<undefined | Record<string, ValidatedError>>;\n  setLabelWidth: (width: number, uid?: number) => void;\n  removeLabelWidth: (uid?: number) => void;\n  maxLabelWidth: number;\n  autoLabelWidth: boolean;\n  id?: string;\n}\n\nexport interface FormItemContext {\n  eventHandlers: FormItemEventHandler;\n  size: Size | undefined;\n  disabled: boolean;\n  error: boolean;\n  feedback: string | undefined;\n  updateValidateState: (\n    field: string,\n    { status, message }: { status: ValidateStatus | ''; message: string }\n  ) => void;\n}\n\nexport interface FormItemInfo {\n  field: string;\n  disabled: boolean;\n  error: boolean;\n  labelWidth?: number;\n  validate: () => Promise<any>;\n  clearValidate: () => void;\n  resetField: () => void;\n  setField: (data: FieldData) => void;\n}\n\nexport const formItemInjectionKey: InjectionKey<FormItemContext> = Symbol(\n  'ArcoFormItemContext'\n);\nexport const formInjectionKey: InjectionKey<FormContext> =\n  Symbol('ArcoFormContext');\n"
  },
  {
    "path": "packages/web-vue/components/form/form-item-label.vue",
    "content": "<template>\n  <ResizeObserver @resize=\"handleResize\">\n    <component :is=\"component\" ref=\"labelRef\" :class=\"prefixCls\" v-bind=\"attrs\">\n      <strong\n        v-if=\"required && asteriskPosition === 'start'\"\n        :class=\"`${prefixCls}-required-symbol`\"\n      >\n        <svg\n          fill=\"currentColor\"\n          viewBox=\"0 0 1024 1024\"\n          width=\"1em\"\n          height=\"1em\"\n        >\n          <path\n            d=\"M583.338667 17.066667c18.773333 0 34.133333 15.36 34.133333 34.133333v349.013333l313.344-101.888a34.133333 34.133333 0 0 1 43.008 22.016l42.154667 129.706667a34.133333 34.133333 0 0 1-21.845334 43.178667l-315.733333 102.4 208.896 287.744a34.133333 34.133333 0 0 1-7.509333 47.786666l-110.421334 80.213334a34.133333 34.133333 0 0 1-47.786666-7.509334L505.685333 706.218667 288.426667 1005.226667a34.133333 34.133333 0 0 1-47.786667 7.509333l-110.421333-80.213333a34.133333 34.133333 0 0 1-7.509334-47.786667l214.186667-295.253333L29.013333 489.813333a34.133333 34.133333 0 0 1-22.016-43.008l42.154667-129.877333a34.133333 34.133333 0 0 1 43.008-22.016l320.512 104.106667L412.672 51.2c0-18.773333 15.36-34.133333 34.133333-34.133333h136.533334z\"\n          />\n        </svg>\n      </strong>\n      <slot />\n      <Tooltip v-if=\"tooltip\" :content=\"tooltip\">\n        <icon-question-circle :class=\"`${prefixCls}-tooltip`\" />\n      </Tooltip>\n      <strong\n        v-if=\"required && asteriskPosition === 'end'\"\n        :class=\"`${prefixCls}-required-symbol`\"\n      >\n        <svg\n          fill=\"currentColor\"\n          viewBox=\"0 0 1024 1024\"\n          width=\"1em\"\n          height=\"1em\"\n        >\n          <path\n            d=\"M583.338667 17.066667c18.773333 0 34.133333 15.36 34.133333 34.133333v349.013333l313.344-101.888a34.133333 34.133333 0 0 1 43.008 22.016l42.154667 129.706667a34.133333 34.133333 0 0 1-21.845334 43.178667l-315.733333 102.4 208.896 287.744a34.133333 34.133333 0 0 1-7.509333 47.786666l-110.421334 80.213334a34.133333 34.133333 0 0 1-47.786666-7.509334L505.685333 706.218667 288.426667 1005.226667a34.133333 34.133333 0 0 1-47.786667 7.509333l-110.421333-80.213333a34.133333 34.133333 0 0 1-7.509334-47.786667l214.186667-295.253333L29.013333 489.813333a34.133333 34.133333 0 0 1-22.016-43.008l42.154667-129.877333a34.133333 34.133333 0 0 1 43.008-22.016l320.512 104.106667L412.672 51.2c0-18.773333 15.36-34.133333 34.133333-34.133333h136.533334z\"\n          />\n        </svg>\n      </strong>\n      {{ showColon ? ':' : '' }}\n    </component>\n  </ResizeObserver>\n</template>\n\n<script lang=\"ts\">\nimport {\n  defineComponent,\n  getCurrentInstance,\n  inject,\n  onBeforeUnmount,\n  onMounted,\n  ref,\n} from 'vue';\nimport { getPrefixCls } from '../_utils/global-config';\nimport ResizeObserver from '../_components/resize-observer-v2';\nimport { formInjectionKey } from './context';\nimport { isNumber } from '../_utils/is';\nimport Tooltip from '../tooltip';\nimport IconQuestionCircle from '../icon/icon-question-circle';\n\nexport default defineComponent({\n  name: 'FormItemLabel',\n  components: {\n    ResizeObserver,\n    Tooltip,\n    IconQuestionCircle,\n  },\n  props: {\n    required: {\n      type: Boolean,\n      default: false,\n    },\n    showColon: {\n      type: Boolean,\n      default: false,\n    },\n    component: {\n      type: String,\n      default: 'label',\n    },\n    asteriskPosition: {\n      type: String,\n      default: 'start',\n    },\n    tooltip: {\n      type: String,\n    },\n    attrs: Object,\n  },\n  setup() {\n    const prefixCls = getPrefixCls('form-item-label');\n    const formCtx = inject(formInjectionKey, undefined);\n    const instance = getCurrentInstance();\n    const labelRef = ref<HTMLElement>();\n\n    const handleResize = () => {\n      // TODO: There is no effective?\n      if (labelRef.value && isNumber(labelRef.value.offsetWidth)) {\n        formCtx?.setLabelWidth(labelRef.value.offsetWidth, instance?.uid);\n      }\n    };\n\n    onMounted(() => {\n      if (labelRef.value && isNumber(labelRef.value.offsetWidth)) {\n        formCtx?.setLabelWidth(labelRef.value.offsetWidth, instance?.uid);\n      }\n    });\n\n    onBeforeUnmount(() => {\n      formCtx?.removeLabelWidth(instance?.uid);\n    });\n\n    return {\n      prefixCls,\n      labelRef,\n      handleResize,\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/form/form-item-message.vue",
    "content": "<template>\n  <template v-if=\"error.length > 0\">\n    <template v-for=\"item of error\" :key=\"item\">\n      <transition name=\"form-blink\" appear>\n        <div role=\"alert\" :class=\"[prefixCls]\">\n          {{ item }}\n        </div>\n      </transition>\n    </template>\n  </template>\n  <transition v-else-if=\"help || $slots.help\" name=\"form-blink\" appear>\n    <div :class=\"[prefixCls, `${prefixCls}-help`]\">\n      <slot name=\"help\">\n        {{ help }}\n      </slot>\n    </div>\n  </transition>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, PropType } from 'vue';\nimport { getPrefixCls } from '../_utils/global-config';\n\nexport default defineComponent({\n  name: 'FormItemMessage',\n  props: {\n    error: {\n      type: Array as PropType<string[]>,\n      default: () => [],\n    },\n    help: String,\n  },\n  setup() {\n    const prefixCls = getPrefixCls('form-item-message');\n\n    return {\n      prefixCls,\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/form/form-item.vue",
    "content": "<template>\n  <slot v-if=\"noStyle\" />\n  <ArcoRow\n    v-else\n    :class=\"[\n      cls,\n      {\n        [`${prefixCls}-has-help`]: Boolean($slots.help ?? help),\n      },\n    ]\"\n    :wrap=\"!(labelColFlex || autoLabelWidth)\"\n    :div=\"layout !== 'horizontal' || hideLabel\"\n    v-bind=\"rowProps\"\n  >\n    <ArcoCol\n      v-if=\"!hideLabel\"\n      :class=\"labelColCls\"\n      :style=\"mergedLabelStyle\"\n      v-bind=\"mergedLabelCol\"\n    >\n      <FormItemLabel\n        :required=\"hideAsterisk ? false : isRequired\"\n        :show-colon=\"showColon\"\n        :asterisk-position=\"asteriskPosition\"\n        :component=\"labelComponent\"\n        :attrs=\"labelAttrs\"\n        :tooltip=\"tooltip\"\n      >\n        <slot v-if=\"$slots.label || label\" name=\"label\">{{ label }}</slot>\n      </FormItemLabel>\n    </ArcoCol>\n    <ArcoCol\n      :class=\"wrapperColCls\"\n      :style=\"mergedWrapperStyle\"\n      v-bind=\"mergedWrapperCol\"\n    >\n      <div :class=\"`${prefixCls}-content-wrapper`\">\n        <div\n          :class=\"[\n            `${prefixCls}-content`,\n            {\n              [`${prefixCls}-content-flex`]: contentFlex,\n            },\n            contentClass,\n          ]\"\n        >\n          <slot />\n        </div>\n      </div>\n      <FormItemMessage\n        v-if=\"isError || $slots.help || help\"\n        :error=\"finalMessage\"\n        :help=\"help\"\n      >\n        <template v-if=\"$slots.help\" #help>\n          <slot name=\"help\" />\n        </template>\n      </FormItemMessage>\n      <div v-if=\"$slots.extra || extra\" :class=\"`${prefixCls}-extra`\">\n        <slot name=\"extra\">{{ extra }}</slot>\n      </div>\n    </ArcoCol>\n  </ArcoRow>\n</template>\n\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  inject,\n  nextTick,\n  onBeforeUnmount,\n  onMounted,\n  PropType,\n  provide,\n  reactive,\n  ref,\n  toRef,\n  toRefs,\n} from 'vue';\n// @ts-ignore\nimport { Schema } from 'b-validate';\nimport {\n  FormContext,\n  formInjectionKey,\n  FormItemInfo,\n  formItemInjectionKey,\n} from './context';\nimport {\n  FieldData,\n  FieldRule,\n  ValidateStatus,\n  ValidateTrigger,\n  FormItemEventHandler,\n} from './interface';\nimport { Row as ArcoRow, Col as ArcoCol } from '../grid';\nimport FormItemLabel from './form-item-label.vue';\nimport FormItemMessage from './form-item-message.vue';\nimport { getPrefixCls } from '../_utils/global-config';\nimport { getValueByPath, setValueByPath } from '../_utils/get-value-by-path';\nimport { Data } from '../_utils/types';\nimport {\n  getFinalValidateMessage,\n  getFinalValidateStatus,\n  getFormElementId,\n} from './utils';\nimport { useI18n } from '../locale';\n\nexport default defineComponent({\n  name: 'FormItem',\n  components: {\n    ArcoRow,\n    ArcoCol,\n    FormItemLabel,\n    FormItemMessage,\n  },\n  props: {\n    /**\n     * @zh 表单元素在数据对象中的path（数据项必填）\n     * @en The path of the form element in the data object (required for the data item)\n     */\n    field: {\n      type: String,\n      default: '',\n    },\n    /**\n     * @zh 标签的文本\n     * @en Label text\n     */\n    label: String,\n    /**\n     * @zh 提示内容\n     * @en Tooltip text\n     * @version 2.41.0\n     */\n    tooltip: {\n      type: String,\n    },\n    /**\n     * @zh 是否显示冒号\n     * @en Whether to show a colon\n     */\n    showColon: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 是否去除样式\n     * @en Whether to remove the style\n     */\n    noStyle: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 是否禁用\n     * @en Whether to disable\n     */\n    disabled: {\n      type: Boolean,\n      default: undefined,\n    },\n    /**\n     * @zh 帮助文案\n     * @en Help copywriting\n     */\n    help: String,\n    /**\n     * @zh 额外显示的文案\n     * @en Additional display copy\n     */\n    extra: String,\n    /**\n     * @zh 是否必须填写\n     * @en Is it required\n     */\n    required: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 可选择将星号置于 label 前/后\n     * @en Optionally place an asterisk before/after the label\n     * @values 'start', 'end'\n     * @version 2.41.0\n     */\n    asteriskPosition: {\n      type: String,\n      default: 'start',\n    },\n    /**\n     * @zh 表单项校验规则（优先级高于 form 的 rules）\n     * @en Form item validation rules (The priority is higher than the rules of form)\n     */\n    rules: {\n      type: [Object, Array] as PropType<FieldRule | FieldRule[]>,\n    },\n    /**\n     * @zh 校验状态\n     * @en Validate status\n     * @values 'success', 'warning', 'error', 'validating'\n     */\n    validateStatus: {\n      type: String as PropType<ValidateStatus>,\n    },\n    /**\n     * @zh 触发校验的事件\n     * @en The event that triggers the verification\n     * @values 'change', 'input', 'focus', 'blur'\n     */\n    validateTrigger: {\n      type: [String, Array] as PropType<ValidateTrigger | ValidateTrigger[]>,\n      default: 'change',\n    },\n    /**\n     * @zh 标签元素布局选项。参数同 `<col>` 组件一致\n     * @en Label element layout options. The parameters are the same as the `<col>` component\n     */\n    labelColProps: Object,\n    /**\n     * @zh 表单控件布局选项。参数同 `<col>` 组件一致\n     * @en Form control layout options. The parameters are the same as the `<col>` component\n     */\n    wrapperColProps: Object,\n    /**\n     * @zh 是否隐藏标签\n     * @en Whether to hide the label\n     */\n    hideLabel: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 是否隐藏星号\n     * @en Whether to hide the asterisk\n     */\n    hideAsterisk: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 标签元素布局组件的 style\n     * @en The style of the label element layout component\n     * @version 2.10.0\n     */\n    labelColStyle: Object,\n    /**\n     * @zh 表单控件布局组件的 style\n     * @en The style of the form control layout component\n     * @version 2.10.0\n     */\n    wrapperColStyle: Object,\n    /**\n     * @zh 表单项布局选项。参数同 `<row>` 组件一致\n     * @en Form item layout options. The parameters are the same as the `<row>` component\n     * @version 2.10.0\n     */\n    rowProps: Object,\n    /**\n     * @zh 表单项布局组件的 class\n     * @en The class of the form item layout component\n     * @version 2.10.0\n     */\n    rowClass: [String, Array, Object],\n    /**\n     * @zh 表单控件包裹层的 class\n     * @en The class of the form control wrapping layer\n     * @version 2.10.0\n     */\n    contentClass: [String, Array, Object],\n    /**\n     * @zh 内容层是否开启 flex 布局\n     * @en Whether to enable flex layout in the content layer\n     * @version 2.13.0\n     */\n    contentFlex: {\n      type: Boolean,\n      default: true,\n    },\n    /**\n     * @zh （已废除）控制传递到子元素上的 Props。默认包括 disabled、error、size、 events 和 FormItem 上的额外属性。2.18.0 版本废除\n     * @en (Repealed) Control the Props passed to the child element. The default includes disabled, error, size, events and additional attributes on FormItem. Version 2.18.0 deprecated\n     * @version 2.13.0\n     */\n    mergeProps: {\n      type: [Boolean, Function] as PropType<\n        boolean | ((props: Record<string, any>) => Record<string, any>)\n      >,\n      default: true,\n    },\n    /**\n     * @zh 设置标签 `Col` 组件的 flex 属性。设置时表单 `Col` 组件的 flex 属性会被设置为 `auto`。\n     * @en Set the flex property of the label `Col` component. When set, the flex property of the form `Col` component will be set to `auto`.\n     * @version 2.13.0\n     */\n    labelColFlex: {\n      type: [Number, String],\n    },\n    /**\n     * @zh 是否显示表单控件的反馈图标\n     * @en Whether to show the feedback icon for the form control\n     * @version 2.16.0\n     */\n    feedback: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 表单项标签渲染的元素\n     * @en The element that the form item label renders\n     * @version 2.22.0\n     */\n    labelComponent: {\n      type: String,\n      default: 'label',\n    },\n    /**\n     * @zh 表单项元素的属性\n     * @en Attributes of the form item element\n     * @version 2.22.0\n     */\n    labelAttrs: Object,\n  },\n  /**\n   * @zh 标签\n   * @en Label\n   * @slot label\n   */\n  /**\n   * @zh 帮助信息\n   * @en Help message\n   * @slot help\n   */\n  /**\n   * @zh 额外内容\n   * @en Extra content\n   * @slot extra\n   */\n  setup(props) {\n    const prefixCls = getPrefixCls('form-item');\n    const { field } = toRefs(props);\n    const formCtx = inject<Partial<FormContext>>(formInjectionKey, {});\n    const { autoLabelWidth, layout } = toRefs(formCtx);\n    const { i18nMessage } = useI18n();\n\n    const mergedLabelCol = computed(() => {\n      const colProps = { ...(props.labelColProps ?? formCtx.labelColProps) };\n      if (props.labelColFlex) {\n        colProps.flex = props.labelColFlex;\n      } else if (formCtx.autoLabelWidth) {\n        colProps.flex = `${formCtx.maxLabelWidth}px`;\n      }\n      return colProps;\n    });\n\n    const mergedWrapperCol = computed(() => {\n      const colProps = {\n        ...(props.wrapperColProps ?? formCtx.wrapperColProps),\n      };\n      if (field.value) {\n        colProps.id = getFormElementId(formCtx.id, field.value);\n      }\n      if (props.labelColFlex || formCtx.autoLabelWidth) {\n        colProps.flex = 'auto';\n      }\n      return colProps;\n    });\n\n    const mergedLabelStyle = computed(\n      () => props.labelColStyle ?? formCtx.labelColStyle\n    );\n    const mergedWrapperStyle = computed(\n      () => props.wrapperColStyle ?? formCtx.wrapperColStyle\n    );\n\n    // 记录初始值，用于重置表单\n    const initialValue = getValueByPath(formCtx.model, props.field);\n\n    const validateStatus = reactive<Record<string, ValidateStatus | ''>>({});\n    const validateMessage = reactive<Record<string, string>>({});\n    const finalStatus = computed(() => getFinalValidateStatus(validateStatus));\n    const finalMessage = computed(() =>\n      getFinalValidateMessage(validateMessage)\n    );\n    // 用于重置表单时，不触发校验\n    const validateDisabled = ref(false);\n\n    const fieldValue = computed(() =>\n      getValueByPath(formCtx.model, props.field)\n    );\n\n    const computedDisabled = computed(() =>\n      Boolean(props.disabled ?? formCtx?.disabled)\n    );\n    const computedValidateStatus = computed(\n      () => props.validateStatus ?? finalStatus.value\n    );\n    const isError = computed(() => computedValidateStatus.value === 'error');\n\n    const mergedRules = computed(() => {\n      const baseRules = ([] as FieldRule[]).concat(\n        props.rules ?? formCtx?.rules?.[props.field] ?? []\n      );\n      const hasRequiredRule = baseRules.some((item) => item.required);\n\n      if (props.required && !hasRequiredRule) {\n        return ([{ required: true }] as FieldRule[]).concat(baseRules);\n      }\n      return baseRules;\n    });\n\n    const isRequired = computed(() =>\n      mergedRules.value.some((item) => item.required)\n    );\n\n    const formItemCtx = props.noStyle\n      ? inject(formItemInjectionKey, undefined)\n      : undefined;\n\n    const updateValidateState = (\n      field: string,\n      { status, message }: { status: ValidateStatus | ''; message: string }\n    ) => {\n      validateStatus[field] = status;\n      validateMessage[field] = message;\n\n      if (props.noStyle) {\n        formItemCtx?.updateValidateState(field, { status, message });\n      }\n    };\n\n    const computedFeedback = computed(() =>\n      props.feedback && computedValidateStatus.value\n        ? computedValidateStatus.value\n        : undefined\n    );\n\n    const validateField = (): Promise<any> => {\n      if (validateDisabled.value) {\n        return Promise.resolve();\n      }\n\n      const rules = mergedRules.value;\n      if (!field.value || rules.length === 0) {\n        if (finalStatus.value) {\n          clearValidate();\n        }\n        return Promise.resolve();\n      }\n\n      const _field = field.value;\n      const _value = fieldValue.value;\n      updateValidateState(_field, {\n        status: '',\n        message: '',\n      });\n\n      const schema = new Schema(\n        {\n          [_field]: rules.map(({ ...rule }) => {\n            if (!rule.type && !rule.validator) {\n              rule.type = 'string';\n            }\n            return rule;\n          }),\n        },\n        {\n          ignoreEmptyString: true,\n          validateMessages: i18nMessage.value.form?.validateMessages,\n        }\n      );\n\n      return new Promise((resolve) => {\n        schema.validate({ [_field]: _value }, (err: Data) => {\n          const isError = Boolean(err?.[_field]);\n          updateValidateState(_field, {\n            status: isError ? 'error' : '',\n            message: err?.[_field].message ?? '',\n          });\n\n          const error = isError\n            ? {\n                label: props.label,\n                field: field.value,\n                value: err[_field].value,\n                type: err[_field].type,\n                isRequiredError: Boolean(err[_field].requiredError),\n                message: err[_field].message,\n              }\n            : undefined;\n\n          resolve(error);\n        });\n      });\n    };\n\n    const validateTriggers = computed(() =>\n      ([] as ValidateTrigger[]).concat(props.validateTrigger)\n    );\n\n    const eventHandlers = computed(() =>\n      validateTriggers.value.reduce((event, trigger) => {\n        switch (trigger) {\n          case 'change':\n            event.onChange = () => {\n              validateField();\n            };\n            return event;\n          case 'input':\n            event.onInput = () => {\n              nextTick(() => {\n                validateField();\n              });\n            };\n            return event;\n          case 'focus':\n            event.onFocus = () => {\n              validateField();\n            };\n            return event;\n          case 'blur':\n            event.onBlur = () => {\n              validateField();\n            };\n            return event;\n          default:\n            return event;\n        }\n      }, {} as FormItemEventHandler)\n    );\n\n    provide(\n      formItemInjectionKey,\n      reactive({\n        eventHandlers,\n        size: formCtx && toRef(formCtx, 'size'),\n        disabled: computedDisabled,\n        error: isError,\n        feedback: computedFeedback,\n        updateValidateState,\n      })\n    );\n\n    const clearValidate = () => {\n      if (field.value) {\n        updateValidateState(field.value, {\n          status: '',\n          message: '',\n        });\n      }\n    };\n\n    const setField = (data: FieldData) => {\n      if (field.value) {\n        validateDisabled.value = true;\n        if ('value' in data && formCtx?.model && field.value) {\n          setValueByPath(formCtx.model, field.value, data.value);\n        }\n\n        if (data.status || data.message) {\n          updateValidateState(field.value, {\n            status: data.status ?? '',\n            message: data.message ?? '',\n          });\n        }\n\n        nextTick(() => {\n          validateDisabled.value = false;\n        });\n      }\n    };\n\n    const resetField = () => {\n      clearValidate();\n      validateDisabled.value = true;\n      if (formCtx?.model && field.value) {\n        setValueByPath(formCtx.model, field.value, initialValue);\n      }\n\n      nextTick(() => {\n        validateDisabled.value = false;\n      });\n    };\n\n    const formItemInfo: FormItemInfo = reactive({\n      field,\n      disabled: computedDisabled,\n      error: isError,\n      validate: validateField,\n      clearValidate,\n      resetField,\n      setField,\n    });\n\n    onMounted(() => {\n      if (formItemInfo.field) {\n        formCtx.addField?.(formItemInfo);\n      }\n    });\n\n    onBeforeUnmount(() => {\n      if (formItemInfo.field) {\n        formCtx.removeField?.(formItemInfo);\n      }\n    });\n\n    const cls = computed(() => [\n      prefixCls,\n      `${prefixCls}-layout-${formCtx.layout}`,\n      {\n        [`${prefixCls}-error`]: isError.value,\n        [`${prefixCls}-status-${computedValidateStatus.value}`]: Boolean(\n          computedValidateStatus.value\n        ),\n      },\n      props.rowClass,\n    ]);\n\n    const labelColCls = computed(() => [\n      `${prefixCls}-label-col`,\n      {\n        [`${prefixCls}-label-col-left`]: formCtx.labelAlign === 'left',\n        [`${prefixCls}-label-col-flex`]:\n          formCtx.autoLabelWidth || props.labelColFlex,\n      },\n    ]);\n\n    const wrapperColCls = computed(() => [\n      `${prefixCls}-wrapper-col`,\n      {\n        [`${prefixCls}-wrapper-col-flex`]: !mergedWrapperCol.value,\n      },\n    ]);\n\n    return {\n      prefixCls,\n      cls,\n      isRequired,\n      isError,\n      finalMessage,\n      mergedLabelCol,\n      mergedWrapperCol,\n      labelColCls,\n      autoLabelWidth,\n      layout,\n      mergedLabelStyle,\n      wrapperColCls,\n      mergedWrapperStyle,\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/form/form.vue",
    "content": "<template>\n  <form :id=\"id\" ref=\"formRef\" :class=\"cls\" @submit.prevent=\"handleSubmit\">\n    <slot />\n  </form>\n</template>\n\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  PropType,\n  provide,\n  reactive,\n  toRefs,\n  ref,\n} from 'vue';\nimport scrollIntoView, {\n  Options as ScrollIntoViewOptions,\n} from 'scroll-into-view-if-needed';\nimport { FormItemInfo, formInjectionKey } from './context';\nimport { getPrefixCls } from '../_utils/global-config';\nimport { Size } from '../_utils/constant';\nimport { isArray, isFunction, isBoolean } from '../_utils/is';\nimport { FieldData, FieldRule, ValidatedError } from './interface';\nimport { useSize } from '../_hooks/use-size';\nimport { getFormElementId } from './utils';\n\nconst FORM_LAYOUTS = ['horizontal', 'vertical', 'inline'] as const;\ntype FormLayout = (typeof FORM_LAYOUTS)[number];\nconst FORM_LABEL_ALIGNS = ['left', 'right'] as const;\ntype FormLabelAlign = (typeof FORM_LABEL_ALIGNS)[number];\n\nexport default defineComponent({\n  name: 'Form',\n  props: {\n    /**\n     * @zh 表单数据对象\n     * @en Form data object\n     */\n    model: {\n      type: Object,\n      required: true,\n    },\n    /**\n     * @zh 表单的布局方式，包括水平、垂直、多列\n     * @en The layout of the form, including horizontal, vertical, and multi-column\n     * @values 'horizontal', 'vertical', 'inline'\n     */\n    layout: {\n      type: String as PropType<FormLayout>,\n      default: 'horizontal',\n    },\n    /**\n     * @zh 表单控件的尺寸\n     * @en The size of the form\n     * @values 'mini','small','medium','large'\n     * @defaultValue 'medium'\n     */\n    size: {\n      type: String as PropType<Size>,\n    },\n    /**\n     * @zh 标签元素布局选项。参数同 `<col>` 组件一致\n     * @en Label element layout options. The parameters are the same as the `<col>` component\n     */\n    labelColProps: {\n      type: Object,\n      default: () => ({ span: 5, offset: 0 }),\n    },\n    /**\n     * @zh 表单控件布局选项。参数同 `<col>` 组件一致\n     * @en Form control layout options. The parameters are the same as the `<col>` component\n     */\n    wrapperColProps: {\n      type: Object,\n      default: () => ({ span: 19, offset: 0 }),\n    },\n    labelColStyle: Object,\n    wrapperColStyle: Object,\n    /**\n     * @zh 标签的对齐方向\n     * @en Alignment direction of the label\n     * @values 'left', 'right'\n     */\n    labelAlign: {\n      type: String as PropType<FormLabelAlign>,\n      default: 'right',\n    },\n    /**\n     * @zh 是否禁用表单\n     * @en Whether to disable the form\n     */\n    disabled: {\n      type: Boolean,\n      default: undefined,\n    },\n    /**\n     * @zh 表单项校验规则\n     * @en Form item validation rules\n     */\n    rules: {\n      type: Object as PropType<Record<string, FieldRule | FieldRule[]>>,\n    },\n    /**\n     * @zh 是否开启自动标签宽度，仅在 `layout=\"horizontal\"` 下生效。\n     * @en Whether to enable automatic label width, it only takes effect under `layout=\"horizontal\"`.\n     * @version 2.13.0\n     */\n    autoLabelWidth: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 表单 `id` 属性和表单控件 `id` 前缀\n     * @en Form `id` attribute and form control `id` prefix\n     */\n    id: {\n      type: String,\n    },\n    /**\n     * @zh 验证失败后滚动到第一个错误字段\n     * @en Scroll to the first error field after verification fails\n     * @version 2.51.0\n     */\n    scrollToFirstError: {\n      type: Boolean,\n      default: false,\n    },\n  },\n  emits: {\n    /**\n     * @zh 表单提交时触发\n     * @en Triggered when the form is submitted\n     * @param {{values: Record<string, any>; errors: Record<string, ValidatedError> | undefined}} data\n     * @param {Event} ev\n     */\n    submit: (\n      data: {\n        values: Record<string, any>;\n        errors: Record<string, ValidatedError> | undefined;\n      },\n      ev: Event\n    ) => true,\n    /**\n     * @zh 验证成功时触发\n     * @en Triggered when verification is successful\n     * @param {Record<string, any>} values\n     * @param {Event} ev\n     */\n    submitSuccess: (values: Record<string, any>, ev: Event) => true,\n    /**\n     * @zh 验证失败时触发\n     * @en Triggered when verification failed\n     * @param {{values: Record<string, any>; errors: Record<string, ValidatedError>}} data\n     * @param {Event} ev\n     */\n    submitFailed: (\n      data: {\n        values: Record<string, any>;\n        errors: Record<string, ValidatedError>;\n      },\n      ev: Event\n    ) => true,\n  },\n  setup(props, { emit }) {\n    const prefixCls = getPrefixCls('form');\n    const formRef = ref<HTMLFormElement>();\n    const {\n      id,\n      model,\n      layout,\n      disabled,\n      labelAlign,\n      labelColProps,\n      wrapperColProps,\n      labelColStyle,\n      wrapperColStyle,\n      size,\n      rules,\n    } = toRefs(props);\n    const { mergedSize } = useSize(size);\n\n    const autoLabelWidth = computed(\n      () => props.layout === 'horizontal' && props.autoLabelWidth\n    );\n\n    const fields: FormItemInfo[] = [];\n    const touchedFields: FormItemInfo[] = [];\n\n    const labelWidth = reactive<Record<string, number>>({});\n    const maxLabelWidth = computed(() =>\n      Math.max(...Object.values(labelWidth))\n    );\n\n    const addField = (formItemInfo: FormItemInfo) => {\n      if (formItemInfo && formItemInfo.field) {\n        fields.push(formItemInfo);\n      }\n    };\n\n    const removeField = (formItemInfo: FormItemInfo) => {\n      if (formItemInfo && formItemInfo.field) {\n        fields.splice(fields.indexOf(formItemInfo), 1);\n      }\n    };\n\n    const setFields = (data: Record<string, FieldData>) => {\n      fields.forEach((field) => {\n        if (data[field.field]) {\n          field.setField(data[field.field]);\n        }\n      });\n    };\n\n    const setLabelWidth = (width: number, uid?: number) => {\n      if (uid && labelWidth[uid] !== width) {\n        labelWidth[uid] = width;\n      }\n    };\n\n    const removeLabelWidth = (uid?: number) => {\n      if (uid) {\n        delete labelWidth[uid];\n      }\n    };\n\n    const resetFields = (field?: string | string[]) => {\n      const _fields = field ? ([] as string[]).concat(field) : [];\n      fields.forEach((field) => {\n        if (_fields.length === 0 || _fields.includes(field.field)) {\n          field.resetField();\n        }\n      });\n    };\n\n    const clearValidate = (field?: string | string[]) => {\n      const _fields = field ? ([] as string[]).concat(field) : [];\n      fields.forEach((field) => {\n        if (_fields.length === 0 || _fields.includes(field.field)) {\n          field.clearValidate();\n        }\n      });\n    };\n\n    const scrollToField = (field: string, options?: ScrollIntoViewOptions) => {\n      const node = formRef.value || document.body;\n      const fieldNode = node.querySelector(\n        `#${getFormElementId(props.id, field as string)}`\n      );\n\n      if (fieldNode) {\n        scrollIntoView(fieldNode as HTMLDivElement, {\n          behavior: 'smooth',\n          block: 'nearest',\n          scrollMode: 'if-needed',\n          ...options,\n        });\n      }\n    };\n\n    const scrollToFirstError = (field: string) => {\n      const options = !isBoolean(props.scrollToFirstError)\n        ? props.scrollToFirstError\n        : undefined;\n      scrollToField(field, options);\n    };\n\n    const validate = (\n      callback?: (errors: undefined | Record<string, ValidatedError>) => void\n    ): Promise<undefined | Record<string, ValidatedError>> => {\n      const list: Promise<any>[] = [];\n\n      fields.forEach((field) => {\n        list.push(field.validate());\n      });\n\n      return Promise.all(list).then((result) => {\n        const errors: Record<string, ValidatedError> = {};\n        let hasError = false;\n        result.forEach((item) => {\n          if (item) {\n            hasError = true;\n            errors[item.field] = item;\n          }\n        });\n\n        if (hasError && props.scrollToFirstError) {\n          scrollToFirstError(Object.keys(errors)[0]);\n        }\n\n        if (isFunction(callback)) {\n          callback(hasError ? errors : undefined);\n        }\n\n        return hasError ? errors : undefined;\n      });\n    };\n\n    const validateField = (\n      field: string | string[],\n      callback?: (errors: undefined | Record<string, ValidatedError>) => void\n    ) => {\n      const list: Promise<any>[] = [];\n\n      for (const ctx of fields) {\n        if (\n          (isArray(field) && field.includes(ctx.field)) ||\n          field === ctx.field\n        ) {\n          list.push(ctx.validate());\n        }\n      }\n\n      return Promise.all(list).then((result) => {\n        const errors: Record<string, ValidatedError> = {};\n        let hasError = false;\n        result.forEach((item) => {\n          if (item) {\n            hasError = true;\n            errors[item.field] = item;\n          }\n        });\n\n        if (hasError && props.scrollToFirstError) {\n          scrollToFirstError(Object.keys(errors)[0]);\n        }\n\n        if (isFunction(callback)) {\n          callback(hasError ? errors : undefined);\n        }\n\n        return hasError ? errors : undefined;\n      });\n    };\n\n    const handleSubmit = (e: Event) => {\n      const list: Promise<any>[] = [];\n      fields.forEach((field) => {\n        list.push(field.validate());\n      });\n\n      Promise.all(list).then((result) => {\n        const errors: Record<string, ValidatedError> = {};\n        let hasError = false;\n        result.forEach((item) => {\n          if (item) {\n            hasError = true;\n            errors[item.field] = item;\n          }\n        });\n        if (hasError) {\n          props.scrollToFirstError &&\n            scrollToFirstError(Object.keys(errors)[0]);\n          emit('submitFailed', { values: model.value, errors }, e);\n        } else {\n          emit('submitSuccess', model.value, e);\n        }\n        emit(\n          'submit',\n          { values: model.value, errors: hasError ? errors : undefined },\n          e\n        );\n      });\n    };\n\n    provide(\n      formInjectionKey,\n      reactive({\n        id,\n        layout,\n        disabled,\n        labelAlign,\n        labelColProps,\n        wrapperColProps,\n        labelColStyle,\n        wrapperColStyle,\n        model,\n        size: mergedSize,\n        rules,\n        fields,\n        touchedFields,\n        addField,\n        removeField,\n        validateField,\n        setLabelWidth,\n        removeLabelWidth,\n        maxLabelWidth,\n        autoLabelWidth,\n      })\n    );\n\n    const cls = computed(() => [\n      prefixCls,\n      `${prefixCls}-layout-${props.layout}`,\n      `${prefixCls}-size-${mergedSize.value}`,\n      {\n        [`${prefixCls}-auto-label-width`]: props.autoLabelWidth,\n      },\n    ]);\n\n    return {\n      cls,\n      formRef,\n      handleSubmit,\n      innerValidate: validate,\n      innerValidateField: validateField,\n      innerResetFields: resetFields,\n      innerClearValidate: clearValidate,\n      innerSetFields: setFields,\n      innerScrollToField: scrollToField,\n    };\n  },\n  methods: {\n    /**\n     * @zh 校验全部表单数据\n     * @en Verify all form data\n     * @public\n     * @param {(errors: undefined | Record<string, ValidatedError>) => void} callback\n     * @returns {Promise<undefined | Record<string, ValidatedError>>}\n     */\n    validate(\n      callback?: (errors: undefined | Record<string, ValidatedError>) => void\n    ): Promise<undefined | Record<string, ValidatedError>> {\n      return this.innerValidate(callback);\n    },\n    /**\n     * @zh 校验部分表单数据\n     * @en Validate part of the form data\n     * @public\n     * @param {string | string[]} field\n     * @param {(errors: undefined | Record<string, ValidatedError>) => void} callback\n     * @returns {Promise<undefined | Record<string, ValidatedError>>}\n     */\n    validateField(\n      field: string | string[],\n      callback?: (errors: undefined | Record<string, ValidatedError>) => void\n    ): Promise<undefined | Record<string, ValidatedError>> {\n      return this.innerValidateField(field, callback);\n    },\n    /**\n     * @zh 重置表单数据\n     * @en Reset form data\n     * @public\n     * @param {string | string[]} field\n     */\n    resetFields(field?: string | string[]) {\n      return this.innerResetFields(field);\n    },\n    /**\n     * @zh 清除校验状态\n     * @en Clear verification status\n     * @public\n     * @param {string | string[]} field\n     */\n    clearValidate(field?: string | string[]) {\n      return this.innerClearValidate(field);\n    },\n    /**\n     * @zh 设置表单项的值和状态\n     * @en Set the value and status of the form item\n     * @param {Record<string, FieldData>} data\n     * @public\n     */\n    setFields(data: Record<string, FieldData>) {\n      return this.innerSetFields(data);\n    },\n    /**\n     * @zh 滚动到指定表单项\n     * @en Scroll to the specified form item\n     * @param {string} field\n     * @public\n     * @version 2.51.0\n     */\n    scrollToField(field: string) {\n      return this.innerScrollToField(field);\n    },\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/form/index.ts",
    "content": "import type { App } from 'vue';\nimport type { ArcoOptions } from '../_utils/types';\nimport { setGlobalConfig, getComponentPrefix } from '../_utils/global-config';\nimport _Form from './form.vue';\nimport _FormItem from './form-item.vue';\n\nconst Form = Object.assign(_Form, {\n  Item: _FormItem,\n  install: (app: App, options?: ArcoOptions) => {\n    setGlobalConfig(app, options);\n    const componentPrefix = getComponentPrefix(options);\n\n    app.component(componentPrefix + _Form.name, _Form);\n    app.component(componentPrefix + _FormItem.name, _FormItem);\n  },\n});\n\nexport type FormInstance = InstanceType<typeof _Form>;\nexport type FormItemInstance = InstanceType<typeof _FormItem>;\nexport type {\n  ValidateStatus,\n  ValidateTrigger,\n  ValidatedError,\n  FieldRule,\n  FormItemEventHandler,\n} from './interface';\n\nexport { _FormItem as FormItem };\n\nexport default Form;\n"
  },
  {
    "path": "packages/web-vue/components/form/interface.ts",
    "content": "import { Ref } from 'vue';\nimport { Size } from '../_utils/constant';\n\nexport const VALIDATE_STATUSES = [\n  'success',\n  'warning',\n  'error',\n  'validating',\n] as const;\nexport type ValidateStatus = typeof VALIDATE_STATUSES[number];\n\nexport const VALIDATE_TRIGGERS = ['change', 'input', 'focus', 'blur'] as const;\nexport type ValidateTrigger = typeof VALIDATE_TRIGGERS[number];\n\nexport interface FieldRule<FieldValue = any> {\n  /**\n   * @zh 校验的值的类型，默认为 `'string'`\n   * @en The type of the value to be checked, the default is `'string'`\n   */\n  type?:\n    | 'string'\n    | 'number'\n    | 'boolean'\n    | 'array'\n    | 'object'\n    | 'email'\n    | 'url'\n    | 'ip';\n  /**\n   * @zh 是否必填\n   * @en Is it required\n   */\n  required?: boolean;\n  /**\n   * @zh 校验失败时展示的信息\n   * @en Information displayed when verification fails\n   */\n  message?: string;\n  /**\n   * @zh 校验长度（string, array）\n   * @en Check length (string, array)\n   */\n  length?: number;\n  /**\n   * @zh 最大长度（string）\n   * @en Maximum length (string)\n   */\n  maxLength?: number;\n  /**\n   * @zh 最小长度（string）\n   * @en Minimum length (string)\n   */\n  minLength?: number;\n  /**\n   * @zh 匹配校验（string）\n   * @en Match check (string)\n   */\n  match?: RegExp;\n  /**\n   * @zh 大写（string）\n   * @en Uppercase (string)\n   */\n  uppercase?: boolean;\n  /**\n   * @zh 小写（string）\n   * @en Lowercase (string)\n   */\n  lowercase?: boolean;\n  /**\n   * @zh 最小值（number）\n   * @en Minimum (number)\n   */\n  min?: number;\n  /**\n   * @zh 最大值（number）\n   * @en Maximum (number)\n   */\n  max?: number;\n  /**\n   * @zh 校验数值（number）\n   * @en Check value (number)\n   */\n  equal?: number;\n  /**\n   * @zh 正数（number）\n   * @en Positive number (number)\n   */\n  positive?: boolean;\n  /**\n   * @zh 负数（number）\n   * @en Negative number (number)\n   */\n  negative?: boolean;\n  /**\n   * @zh 是否为 `true`（boolean）\n   * @en Whether it is `true` (boolean)\n   */\n  true?: boolean;\n  /**\n   * @zh 是否为 `false`（boolean）\n   * @en Whether it is `false` (boolean)\n   */\n  false?: boolean;\n  /**\n   * @zh 数组中是否包含给定值（array）\n   * @en Does the array contain the given value (array)\n   */\n  includes?: any[];\n  /**\n   * @zh 数组元素是否相等（array）\n   * @en Are array elements equal (array)\n   */\n  deepEqual?: any;\n  /**\n   * @zh 是否为空（object）\n   * @en Is it empty (object)\n   */\n  empty?: boolean;\n  /**\n   * @zh 对象是否包含给定属性（object）\n   * @en Does the object contain the given attribute (object)\n   */\n  hasKeys?: string[];\n  /**\n   * @zh 自定义校验规则\n   * @en Custom verification rules\n   * @param value\n   * @param callback\n   */\n  validator?: (\n    value: FieldValue | undefined,\n    callback: (error?: string) => void\n  ) => void;\n}\n\nexport interface FieldData {\n  /**\n   * @zh 字段的值\n   * @en Field value\n   */\n  value?: any;\n  /**\n   * @zh 字段的状态\n   * @en Field status\n   */\n  status?: ValidateStatus;\n  /**\n   * @zh 字段的错误信息\n   * @en Field error message\n   */\n  message?: string;\n}\n\nexport interface ValidatedError {\n  /**\n   * @zh 标签的文本\n   * @en Label text\n   * @version 2.18.0\n   */\n  label: string;\n  /**\n   * @zh 字段名\n   * @en Field name\n   */\n  field: string;\n  /**\n   * @zh 字段值\n   * @en Field value\n   */\n  value: any;\n  /**\n   * @zh 字段类型\n   * @en Field Type\n   */\n  type: string;\n  /**\n   * @zh 是否为 `required` 错误\n   * @en Is it a `required` error\n   */\n  isRequiredError: boolean;\n  /**\n   * @zh 错误信息\n   * @en Error message\n   */\n  message: string;\n}\n\nexport interface FormItemEventHandler {\n  /**\n   * @zh onChange\n   * @en onChange\n   */\n  onChange?: (ev?: Event) => void;\n  /**\n   * @zh onInput\n   * @en onInput\n   */\n  onInput?: (ev?: Event) => void;\n  /**\n   * @zh onFocus\n   * @en onFocus\n   */\n  onFocus?: (ev?: Event) => void;\n  /**\n   * @zh onBlur\n   * @en onBlur\n   */\n  onBlur?: (ev?: Event) => void;\n}\n"
  },
  {
    "path": "packages/web-vue/components/form/style/index.less",
    "content": "@import './token.less';\n@import './status.less';\n\n@form-prefix-cls: ~'@{prefix}-form';\n@form-item-prefix-cls: ~'@{prefix}-form-item';\n@form-item-label-col-prefix-cls: ~'@{prefix}-form-item-label-col';\n@form-item-wrapper-col-prefix-cls: ~'@{prefix}-form-item-wrapper-col';\n@form-item-label-prefix-cls: ~'@{prefix}-form-item-label';\n@form-item-message-prefix-cls: ~'@{prefix}-form-item-message';\n\n.@{form-prefix-cls} {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n\n  &-layout-inline {\n    flex-direction: row;\n    flex-wrap: wrap;\n  }\n\n  &-layout-inline &-item {\n    width: auto;\n    margin-bottom: @form-inline-margin-item-bottom;\n  }\n\n  &-auto-label-width &-item-label-col {\n    > .@{form-item-label-prefix-cls} {\n      white-space: nowrap;\n    }\n  }\n\n  &-item {\n    display: flex;\n    align-items: flex-start;\n    justify-content: flex-start;\n    width: 100%;\n    margin-bottom: @form-size-default-margin-item-bottom;\n\n    &-layout-vertical {\n      display: block;\n\n      > .@{form-item-prefix-cls}-label-col {\n        justify-content: flex-start;\n        margin-bottom: @form-vertical-margin-label-bottom;\n        padding: 0;\n        line-height: @line-height-base;\n        white-space: normal;\n      }\n    }\n\n    &-layout-inline {\n      margin-right: @form-inline-margin-item-right;\n    }\n\n    &-label-col {\n      padding-right: @form-margin-label-right;\n    }\n\n    &&-error,\n    &&-has-help {\n      margin-bottom: 0;\n    }\n  }\n\n  // 用处不明\n  &-item-wrapper-flex.@{prefix}-col {\n    flex: 1;\n  }\n\n  /** size style **/\n  &-size-mini &-item-label-col {\n    line-height: @size-mini;\n\n    > .@{form-item-label-prefix-cls} {\n      font-size: @form-size-mini-font-label-size;\n    }\n  }\n\n  &-size-mini &-item-content {\n    min-height: @size-mini;\n  }\n\n  &-size-mini &-item-wrapper-col {\n    min-height: @size-mini;\n  }\n\n  &-size-small &-item-label-col {\n    line-height: @size-small;\n\n    > .@{form-item-label-prefix-cls} {\n      font-size: @form-size-small-font-label-size;\n    }\n  }\n\n  &-size-small &-item-content {\n    min-height: @size-small;\n  }\n\n  &-size-small &-item-wrapper-col {\n    min-height: @size-small;\n  }\n\n  &-size-large &-item-label-col {\n    line-height: @size-large;\n\n    > .@{form-item-label-prefix-cls} {\n      font-size: @form-size-large-font-label-size;\n    }\n  }\n\n  &-size-large &-item-content {\n    min-height: @size-large;\n  }\n\n  &-size-large &-item-wrapper-col {\n    min-height: @size-large;\n  }\n\n  &-item-extra {\n    margin-top: @form-margin-extra-top;\n    color: @form-color-extra-text;\n    font-size: @form-font-extra-text-size;\n  }\n\n  &-item-message {\n    min-height: @form-size-default-margin-item-bottom;\n    color: @form-color-tip-text_error;\n    font-size: @form-font-error-text-size;\n    line-height: @form-size-default-margin-item-bottom;\n\n    &-help {\n      color: @form-color-extra-text;\n    }\n\n    + .@{form-prefix-cls}-item-extra {\n      margin-top: 0;\n      margin-bottom: @form-margin-extra-bottom;\n    }\n  }\n\n  &-item-label-col {\n    display: flex;\n    flex-shrink: 0;\n    justify-content: flex-end;\n    line-height: @size-default;\n    white-space: nowrap;\n\n    &-left {\n      justify-content: flex-start;\n    }\n\n    > .@{form-item-label-prefix-cls} {\n      max-width: 100%;\n      color: @form-color-text-label;\n      font-size: @form-size-default-font-label-size;\n      white-space: normal;\n    }\n\n    &&-flex {\n      box-sizing: content-box;\n    }\n\n    // 用处不明\n    //&-flex.@{prefix}-col {\n    //  flex: 0;\n    //\n    //  > label {\n    //    white-space: nowrap;\n    //  }\n    //}\n  }\n\n  &-item-wrapper-col {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    width: 100%;\n    min-width: 0;\n    min-height: @size-default;\n  }\n\n  &-item-content {\n    flex: 1;\n    max-width: 100%;\n    min-height: @size-default;\n\n    &-wrapper {\n      display: flex;\n      align-items: center;\n      justify-content: flex-start;\n      width: 100%;\n    }\n\n    &-flex {\n      display: flex;\n      align-items: center;\n      justify-content: flex-start;\n    }\n  }\n\n  /** slider display: block **/\n\n  .@{prefix}-slider {\n    display: block;\n  }\n}\n\n.@{form-item-label-prefix-cls} {\n  &-required-symbol {\n    color: @color-danger-6;\n    font-size: @font-size-body-1;\n    line-height: 1;\n\n    svg {\n      display: inline-block;\n      transform: scale(0.5);\n    }\n  }\n\n  &-tooltip {\n    margin-left: @form-margin-tooltip-left;\n    color: @form-color-text-tooltip;\n  }\n}\n\n.form-blink-enter-from,\n.form-blink-appear-from {\n  opacity: 0;\n}\n\n.form-blink-enter-to,\n.form-blink-appear-to {\n  opacity: 1;\n}\n\n.form-blink-enter-active,\n.form-blink-appear-active {\n  transition: opacity @transition-duration-3 @transition-timing-function-linear;\n  animation: ~'@{prefix}-form-blink' @transition-duration-5 @transition-timing-function-linear;\n}\n\n.form-blink-enter-done {\n}\n\n@keyframes ~ '@{prefix}-form-blink' {\n  0% {\n    opacity: 1;\n  }\n\n  50% {\n    opacity: 0.2;\n  }\n\n  100% {\n    opacity: 1;\n  }\n}\n"
  },
  {
    "path": "packages/web-vue/components/form/style/index.ts",
    "content": "import '../../style/index.less';\nimport '../../grid/style';\nimport './index.less';\n"
  },
  {
    "path": "packages/web-vue/components/form/style/status.less",
    "content": "@import './token.less';\n\n// for input & textarea\n.input-status(@status) {\n  @input-prefix-cls: ~'@{prefix}-input';\n  @textarea-prefix-cls: ~'@{prefix}-textarea';\n\n  .@{input-prefix-cls}-wrapper:not(.@{input-prefix-cls}-disabled),\n  .@{textarea-prefix-cls}-wrapper:not(.@{textarea-prefix-cls}-disabled) {\n    background-color: ~'@{form-color-bg_@{status}}';\n    border-color: ~'@{form-color-border_@{status}}';\n\n    &:hover {\n      background-color: ~'@{form-color-bg_@{status}_hover}';\n      border-color: ~'@{form-color-border_@{status}_hover}';\n    }\n  }\n\n  .@{input-prefix-cls}-wrapper:not(.@{input-prefix-cls}-disabled).@{input-prefix-cls}-focus,\n  .@{textarea-prefix-cls}-wrapper:not(.@{textarea-prefix-cls}-disabled).@{textarea-prefix-cls}-focus {\n    background-color: ~'@{form-color-bg_@{status}_focus}';\n    border-color: ~'@{form-color-border_@{status}_focus}';\n    box-shadow: 0 0 0 ~'@{form-size-shadow_@{status}_focus}' ~'@{form-color-shadow_@{status}_focus}';\n  }\n}\n\n.select-view-status(@status) {\n  @input-prefix-cls: ~'@{prefix}-input-tag';\n  @select-view-prefix-cls: ~'@{prefix}-select-view';\n\n  .@{select-view-prefix-cls}:not(.@{select-view-prefix-cls}-disabled),\n  .@{input-prefix-cls}:not(.@{input-prefix-cls}-disabled) {\n    background-color: ~'@{form-color-bg_@{status}}';\n    border-color: ~'@{form-color-border_@{status}}';\n\n    &:hover {\n      background-color: ~'@{form-color-bg_@{status}_hover}';\n      border-color: ~'@{form-color-border_@{status}_hover}';\n    }\n  }\n\n  .@{select-view-prefix-cls}:not(.@{select-view-prefix-cls}-disabled).@{select-view-prefix-cls}-focus,\n  .@{input-prefix-cls}:not(.@{input-prefix-cls}-disabled).@{input-prefix-cls}-focus {\n    background-color: ~'@{form-color-bg_@{status}_focus}';\n    border-color: ~'@{form-color-border_@{status}_focus}';\n    box-shadow: 0 0 0 ~'@{form-size-shadow_@{status}_focus}' ~'@{form-color-shadow_@{status}_focus}';\n  }\n}\n\n// datepicker\n.picker(@status) {\n  .@{prefix}-picker:not(.@{prefix}-picker-disabled) {\n    border-color: ~'@{form-color-border_@{status}}';\n    background-color: ~'@{form-color-bg_@{status}}';\n\n    &:hover {\n      border-color: ~'@{form-color-border_@{status}_hover}';\n      background-color: ~'@{form-color-bg_@{status}_hover}';\n    }\n  }\n\n  .@{prefix}-picker-focused:not(.@{prefix}-picker-disabled) {\n    &,\n    &:hover {\n      border-color: ~'@{form-color-border_@{status}_focus}';\n      background-color: ~'@{form-color-bg_@{status}_focus}';\n      box-shadow: 0 0 0 ~'@{form-size-shadow_@{status}_focus}' ~'@{form-color-shadow_@{status}_focus}';\n    }\n  }\n}\n\n.validate-status (@status) {\n  .@{prefix}-form-item-status-@{status} {\n    .input-status(@status);\n    .select-view-status(@status);\n    .picker(@status);\n  }\n\n  .@{prefix}-form-item-status-@{status} {\n    .@{form-prefix-cls}-item-message-help {\n      color: ~'@{form-color-tip-text_@{status}}';\n    }\n\n    .@{form-prefix-cls}-item-feedback {\n      color: ~'@{form-color-tip-icon-text_@{status}}';\n    }\n  }\n}\n\n.validate-status(validating);\n\n.validate-status(success);\n\n.validate-status(warning);\n\n.validate-status(error);\n\n.@{form-prefix-cls}-item-control-children {\n  position: relative;\n}\n\n.@{form-prefix-cls}-item-feedback {\n  position: absolute;\n  top: 50%;\n  right: 9px;\n  font-size: 14px;\n  transform: translateY(-50%);\n\n  .@{prefix}-icon-loading {\n    font-size: 12px;\n  }\n}\n\n.@{form-prefix-cls}-item-has-feedback {\n  .select-view(@prefix) {\n    .@{prefix}.@{prefix}-multiple .@{prefix}-view,\n    .@{prefix}.@{prefix}-single .@{prefix}-view {\n      padding-right: 28px;\n    }\n\n    .@{prefix}.@{prefix}-multiple .@{prefix}-suffix {\n      padding-right: 0;\n    }\n  }\n\n  .@{prefix}-input,\n  .@{prefix}-input-inner-wrapper,\n  .@{prefix}-textarea {\n    padding-right: 28px;\n  }\n\n  .@{prefix}-input-number-mode-embed .@{prefix}-input-number-step-layer {\n    right: 24px;\n  }\n\n  .select-view(~'@{prefix}-select');\n  .select-view(~'@{prefix}-cascader');\n  .select-view(~'@{prefix}-tree-select');\n\n  // datepicker timepicker\n  .@{prefix}-picker {\n    padding-right: 28px;\n  }\n\n  .@{prefix}-picker-suffix {\n    .@{prefix}-picker-suffix-icon,\n    .@{prefix}-picker-clear-icon {\n      margin-right: 0;\n      margin-left: 0;\n    }\n  }\n}\n"
  },
  {
    "path": "packages/web-vue/components/form/style/token.less",
    "content": "@import '../../style/theme/index.less';\n\n@form-size-mini-margin-item-bottom: @spacing-7;\n@form-size-small-margin-item-bottom: @spacing-8;\n@form-size-default-margin-item-bottom: @spacing-8;\n@form-size-large-margin-item-bottom: @spacing-8;\n\n@form-size-mini-font-label-size: @font-size-body-1;\n@form-size-small-font-label-size: @font-size-body-3;\n@form-size-large-font-label-size: @font-size-body-3;\n@form-size-default-font-label-size: @font-size-body-3;\n@form-font-extra-text-size: @font-size-body-1;\n@form-font-error-text-size: @font-size-body-1;\n\n@form-margin-label-right: @spacing-7;\n@form-margin-extra-bottom: @spacing-2;\n@form-margin-extra-top: @spacing-2;\n@form-inline-margin-item-right: @spacing-9;\n@form-inline-margin-item-bottom: @spacing-4;\n@form-vertical-margin-label-bottom: @spacing-4;\n\n@form-color-extra-text: var(~'@{arco-cssvars-prefix}-color-text-3');\n\n@form-color-text-label: var(~'@{arco-cssvars-prefix}-color-text-2');\n@form-margin-tooltip-left: @spacing-2;\n@form-color-text-tooltip: var(~'@{arco-cssvars-prefix}-color-text-4');\n\n@form-color-bg_warning: var(~'@{arco-cssvars-prefix}-color-warning-light-1');\n@form-color-bg_warning_hover: var(\n  ~'@{arco-cssvars-prefix}-color-warning-light-2'\n);\n@form-color-bg_warning_focus: var(~'@{arco-cssvars-prefix}-color-bg-2');\n@form-color-border_warning: @color-transparent;\n@form-color-border_warning_focus: @color-warning-6;\n@form-color-border_warning_hover: @color-transparent;\n@form-size-shadow_warning_focus: @shadow-distance-none;\n@form-color-shadow_warning_focus: var(\n  ~'@{arco-cssvars-prefix}-color-warning-light-2'\n);\n\n@form-color-bg_success: var(~'@{arco-cssvars-prefix}-color-fill-2');\n@form-color-bg_success_hover: var(~'@{arco-cssvars-prefix}-color-fill-3');\n@form-color-bg_success_focus: var(~'@{arco-cssvars-prefix}-color-bg-2');\n@form-color-border_success: @color-transparent;\n@form-color-border_success_focus: @color-success-6;\n@form-color-border_success_hover: @color-transparent;\n@form-size-shadow_success_focus: @shadow-distance-none;\n@form-color-shadow_success_focus: var(\n  ~'@{arco-cssvars-prefix}-color-success-light-2'\n);\n\n@form-color-bg_error: var(~'@{arco-cssvars-prefix}-color-danger-light-1');\n@form-color-bg_error_hover: var(~'@{arco-cssvars-prefix}-color-danger-light-2');\n@form-color-bg_error_focus: var(~'@{arco-cssvars-prefix}-color-bg-2');\n@form-color-border_error: @color-transparent;\n@form-color-border_error_focus: @color-danger-6;\n@form-color-border_error_hover: @color-transparent;\n@form-size-shadow_error_focus: @shadow-distance-none;\n@form-color-shadow_error_focus: var(\n  ~'@{arco-cssvars-prefix}-color-danger-light-2'\n);\n\n@form-color-bg_validating: var(~'@{arco-cssvars-prefix}-color-fill-2');\n@form-color-bg_validating_hover: var(~'@{arco-cssvars-prefix}-color-fill-3');\n@form-color-bg_validating_focus: var(~'@{arco-cssvars-prefix}-color-bg-2');\n@form-color-border_validating: @color-transparent;\n@form-color-border_validating_focus: @color-primary-6;\n@form-color-border_validating_hover: @color-transparent;\n@form-size-shadow_validating_focus: @shadow-distance-none;\n@form-color-shadow_validating_focus: var(\n  ~'@{arco-cssvars-prefix}-color-primary-light-2'\n);\n\n@form-color-tip-text_success: @color-success-6;\n@form-color-tip-icon-text_success: @color-success-6;\n@form-color-tip-text_error: @color-danger-6;\n@form-color-tip-icon-text_error: @color-danger-6;\n@form-color-tip-text_warning: @color-warning-6;\n@form-color-tip-icon-text_warning: @color-warning-6;\n@form-color-tip-text_validating: @color-primary-6;\n@form-color-tip-icon-text_validating: @color-primary-6;\n"
  },
  {
    "path": "packages/web-vue/components/form/utils.ts",
    "content": "import { VALIDATE_STATUSES, ValidateStatus } from './interface';\n\nexport function getValueByPath(\n  obj: any,\n  path: string,\n  strict: boolean\n): {\n  o: unknown;\n  k: string;\n  v: unknown;\n} {\n  let tempObj = obj;\n  path = path.replace(/\\[(\\w+)\\]/g, '.$1');\n  path = path.replace(/^\\./, '');\n\n  const keyArr = path.split('.');\n  let i = 0;\n  for (i; i < keyArr.length - 1; i++) {\n    if (!tempObj && !strict) break;\n    const key = keyArr[i];\n\n    if (key in tempObj) {\n      tempObj = tempObj[key];\n    } else {\n      if (strict) {\n        throw new Error('please transfer a valid prop path to form item!');\n      }\n      break;\n    }\n  }\n  return {\n    o: tempObj,\n    k: keyArr[i],\n    v: tempObj?.[keyArr[i]],\n  };\n}\n\nexport const getFinalValidateStatus = (\n  validateStatus: Record<string, ValidateStatus | ''>\n) => {\n  let status: ValidateStatus | '' = '';\n  for (const key of Object.keys(validateStatus)) {\n    const _status = validateStatus[key];\n    if (_status) {\n      if (\n        !status ||\n        VALIDATE_STATUSES.indexOf(_status) > VALIDATE_STATUSES.indexOf(status)\n      ) {\n        status = validateStatus[key];\n      }\n    }\n  }\n  return status;\n};\n\nexport const getFinalValidateMessage = (\n  validateMessage: Record<string, string>\n) => {\n  const messages: string[] = [];\n  for (const key of Object.keys(validateMessage)) {\n    const _message = validateMessage[key];\n    if (_message) {\n      messages.push(_message);\n    }\n  }\n  return messages;\n};\n\nexport const getFormElementId = (prefix: string | undefined, field: string) => {\n  const id = (field as string).replace(/[[.]/g, '_').replace(/\\]/g, '');\n  return prefix ? `${prefix}-${id}` : `${id}`;\n};\n"
  },
  {
    "path": "packages/web-vue/components/grid/CHANGELOG.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.49.3\n\n`2023-08-04`\n\n### 🐛 BugFix\n\n- fix the problem of using v-show in a-grid-item, the initial value is false, but it is still displayed ([#2604](https://github.com/arco-design/arco-design-vue/pull/2604))\n\n\n## 2.25.1\n\n`2022-04-27`\n\n### 🐛 BugFix\n\n- Fix gutter attribute type detection problem ([#1052](https://github.com/arco-design/arco-design-vue/pull/1052))\n\n\n## 2.19.0\n\n`2022-03-11`\n\n### 🆕 Feature\n\n- `a-col` will be hidden when colspan is 0 ([#797](https://github.com/arco-design/arco-design-vue/pull/797))\n\n\n## 2.18.0-beta.1\n\n`2022-02-18`\n\n### 🆕 Feature\n\n- support responsive configure ([#693](https://github.com/arco-design/arco-design-vue/pull/693))\n\n\n## 2.15.1\n\n`2022-01-15`\n\n### 🐛 BugFix\n\n- Fix component name registration error problem ([#581](https://github.com/arco-design/arco-design-vue/pull/581))\n\n\n## 2.15.0\n\n`2022-01-14`\n\n### 🆕 Feature\n\n- Added grid-based layout components `Grid` `Grid.Item` ([#576](https://github.com/arco-design/arco-design-vue/pull/576))\n\n\n## 2.13.0\n\n`2021-12-31`\n\n### 🆕 Feature\n\n- add property `wrap` to `Row` ([#471](https://github.com/arco-design/arco-design-vue/pull/471))\n\n\n## 2.10.0\n\n`2021-12-10`\n\n### 🆕 Feature\n\n- add `flex` property to `a-col` ([#340](https://github.com/arco-design/arco-design-vue/pull/340))\n\n"
  },
  {
    "path": "packages/web-vue/components/grid/CHANGELOG.zh-CN.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.49.3\n\n`2023-08-04`\n\n### 🐛 问题修复\n\n- 修复a-grid-item中使用v-show，初始值为false，但仍展示出来的问题 ([#2604](https://github.com/arco-design/arco-design-vue/pull/2604))\n\n\n## 2.25.1\n\n`2022-04-27`\n\n### 🐛 问题修复\n\n- 修复 gutter 属性类型检测问题 ([#1052](https://github.com/arco-design/arco-design-vue/pull/1052))\n\n\n## 2.19.0\n\n`2022-03-11`\n\n### 🆕 新增功能\n\n- 当列跨度为0的时候`a-col`将被隐藏 ([#797](https://github.com/arco-design/arco-design-vue/pull/797))\n\n\n## 2.18.0-beta.1\n\n`2022-02-18`\n\n### 🆕 新增功能\n\n- 支持响应式配置 ([#693](https://github.com/arco-design/arco-design-vue/pull/693))\n\n\n## 2.15.1\n\n`2022-01-15`\n\n### 🐛 问题修复\n\n- 修复组件名注册错误问题 ([#581](https://github.com/arco-design/arco-design-vue/pull/581))\n\n\n## 2.15.0\n\n`2022-01-14`\n\n### 🆕 新增功能\n\n- 新增基于 grid 的布局组件 `Grid` `Grid.Item` ([#576](https://github.com/arco-design/arco-design-vue/pull/576))\n\n\n## 2.13.0\n\n`2021-12-31`\n\n### 🆕 新增功能\n\n- `Row` 新增属性 `wrap` ([#471](https://github.com/arco-design/arco-design-vue/pull/471))\n\n\n## 2.10.0\n\n`2021-12-10`\n\n### 🆕 新增功能\n\n- 组件 `a-col` 新增属性 `flex` ([#340](https://github.com/arco-design/arco-design-vue/pull/340))\n\n"
  },
  {
    "path": "packages/web-vue/components/grid/README.en-US.md",
    "content": "```yaml\nmeta:\n  type: Component\n  category: Layout\ntitle: Grid\ndescription: Grid can effectively ensure the consistency and logic of the page, strengthen teamwork and unity.\n```\n\n*Auto translate by google.*\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/offset.md\n\n@import ./__demo__/gutter.md\n\n@import ./__demo__/flex-justify.md\n\n@import ./__demo__/flex-align.md\n\n@import ./__demo__/order.md\n\n@import ./__demo__/adaptation.md\n\n@import ./__demo__/adaptation-object.md\n\n@import ./__demo__/flex.md\n\n@import ./__demo__/grid.md\n\n@import ./__demo__/grid-responsive.md\n\n## API\n\n\n### `<row>` Props\n\n|Attribute|Description|Type|Default|version|\n|---|---|---|:---:|:---|\n|gutter|Grid interval in `px`. Pass in the responsive object like {xs: 4, sm: 6, md: 12}. Pass in the array [horizontal spacing, vertical spacing] to set two directions.|`number\\| ResponsiveValue\\| [number \\| ResponsiveValue, number \\| ResponsiveValue]`|`0`||\n|justify|Horizontal alignment (`justify-content`)|`'start' \\| 'center' \\| 'end' \\| 'space-around' \\| 'space-between'`|`'start'`||\n|align|Vertical alignment (`align-items`)|`'start' \\| 'center' \\| 'end' \\| 'stretch'`|`'start'`||\n|div|Enabling this option `Row` and `Col` will be treated as divs without any Grid-related classes and styles|`boolean`|`false`||\n|wrap|Whether `Col` can wrap onto multiple lines|`boolean`|`true`|2.13.0|\n\n\n\n\n### `<col>` Props\n\n|Attribute|Description|Type|Default|version|\n|---|---|---|:---:|:---|\n|span|Number of grid space|`number`|`24`||\n|offset|The number of grids on the left side of the grid. There can be no grids in the grid.|`number`|`-`||\n|order|Sort elements|`number`|`-`||\n|xs|<576px responsive grid|`number \\| { [key: string]: any }`|`-`||\n|sm|>= 576px responsive grid|`number \\| { [key: string]: any }`|`-`||\n|md|>= 768px responsive grid|`number \\| { [key: string]: any }`|`-`||\n|lg|>= 992px responsive grid|`number \\| { [key: string]: any }`|`-`||\n|xl|>= 1200px responsive grid|`number \\| { [key: string]: any }`|`-`||\n|xxl|>= 1600px responsive grid|`number \\| { [key: string]: any }`|`-`||\n|flex|Set flex layout properties|`number \\| string \\| 'initial' \\| 'auto' \\| 'none'`|`-`|2.10.0|\n\n\n\n\n### `<grid>` Props (2.15.0)\nResponsive configuration has been supported since `2.18.0`, the specific configuration [ResponsiveValue](#responsivevalue)\n\n|Attribute|Description|Type|Default|\n|---|---|---|:---:|\n|cols|Number of columns displayed in each row|`number \\| ResponsiveValue`|`24`|\n|row-gap|The space in row-to-row|`number \\| ResponsiveValue`|`0`|\n|col-gap|The space in column-to-column|`number \\| ResponsiveValue`|`0`|\n|collapsed|Whether to collapsed|`boolean`|`false`|\n|collapsed-rows|Number of rows displayed when collapsed|`number`|`1`|\n\n\n\n\n### `<grid-item>` Props (2.15.0)\nResponsive configuration has been supported since `2.18.0`, the specific configuration [ResponsiveValue](#responsivevalue)\n\n|Attribute|Description|Type|Default|\n|---|---|---|:---:|\n|span|Number of grids spanned|`number \\| ResponsiveValue`|`1`|\n|offset|Number of grids on the left|`number \\| ResponsiveValue`|`0`|\n|suffix|Is it a suffix element|`boolean`|`false`|\n\n\n\n\n### ResponsiveValue\n\n|Name|Description|Type|Default|\n|---|---|---|:---:|\n|xxl|>= 1600px responsive configuration|`number`|`-`|\n|xl|>= 1200px responsive configuration|`number`|`-`|\n|lg|>= 992px responsive configuration|`number`|`-`|\n|md|>= 768px responsive configuration|`number`|`-`|\n|sm|>= 576px responsive configuration|`number`|`-`|\n|xs|<576px responsive configuration|`number`|`-`|\n\n\n\n"
  },
  {
    "path": "packages/web-vue/components/grid/README.zh-CN.md",
    "content": "```yaml\nmeta:\n  type: 组件\n  category: 布局\ntitle: 栅格 Grid\ndescription: 栅格可以有效的保证页面的一致性、逻辑性、加强团队协作和统一。\n```\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/offset.md\n\n@import ./__demo__/gutter.md\n\n@import ./__demo__/flex-justify.md\n\n@import ./__demo__/flex-align.md\n\n@import ./__demo__/order.md\n\n@import ./__demo__/adaptation.md\n\n@import ./__demo__/adaptation-object.md\n\n@import ./__demo__/flex.md\n\n@import ./__demo__/grid.md\n\n@import ./__demo__/grid-responsive.md\n\n## API\n\n\n### `<row>` Props\n\n|参数名|描述|类型|默认值|版本|\n|---|---|---|:---:|:---|\n|gutter|栅格间隔，单位是`px` 栅格间隔。可传入响应式对象写法 { xs: 4, sm: 6, md: 12}，传入数组 [ 水平间距， 垂直间距 ] 来设置两个方向。|`number\\| ResponsiveValue\\| [number \\| ResponsiveValue, number \\| ResponsiveValue]`|`0`||\n|justify|水平对齐方式 (`justify-content`)|`'start' \\| 'center' \\| 'end' \\| 'space-around' \\| 'space-between'`|`'start'`||\n|align|竖直对齐方式 ( `align-items` )|`'start' \\| 'center' \\| 'end' \\| 'stretch'`|`'start'`||\n|div|开启这个选项`Row`和`Col`都会被当作div而不会附带任何Grid相关的类和样式|`boolean`|`false`||\n|wrap|`Col` 是否支持换行|`boolean`|`true`|2.13.0|\n\n\n\n\n### `<col>` Props\n\n|参数名|描述|类型|默认值|版本|\n|---|---|---|:---:|:---|\n|span|栅格占位格数|`number`|`24`||\n|offset|栅格左侧的间隔格数，间隔内不可以有栅格|`number`|`-`||\n|order|对元素进行排序|`number`|`-`||\n|xs|< 576px 响应式栅格|`number \\| { [key: string]: any }`|`-`||\n|sm|>= 576px 响应式栅格|`number \\| { [key: string]: any }`|`-`||\n|md|>= 768px 响应式栅格|`number \\| { [key: string]: any }`|`-`||\n|lg|>= 992px 响应式栅格|`number \\| { [key: string]: any }`|`-`||\n|xl|>= 1200px 响应式栅格|`number \\| { [key: string]: any }`|`-`||\n|xxl|>= 1600px 响应式栅格|`number \\| { [key: string]: any }`|`-`||\n|flex|设置 flex 布局属性|`number \\| string \\| 'initial' \\| 'auto' \\| 'none'`|`-`|2.10.0|\n\n\n\n\n### `<grid>` Props (2.15.0)\n响应式配置从 `2.18.0` 开始支持，具体配置 [ResponsiveValue](#responsivevalue)\n\n|参数名|描述|类型|默认值|\n|---|---|---|:---:|\n|cols|每一行展示的列数|`number \\| ResponsiveValue`|`24`|\n|row-gap|行与行之间的间距|`number \\| ResponsiveValue`|`0`|\n|col-gap|列与列之间的间距|`number \\| ResponsiveValue`|`0`|\n|collapsed|是否折叠|`boolean`|`false`|\n|collapsed-rows|折叠时显示的行数|`number`|`1`|\n\n\n\n\n### `<grid-item>` Props (2.15.0)\n响应式配置从 `2.18.0` 开始支持，具体配置 [ResponsiveValue](#responsivevalue)\n\n|参数名|描述|类型|默认值|\n|---|---|---|:---:|\n|span|跨越的格数|`number \\| ResponsiveValue`|`1`|\n|offset|左侧的间隔格数|`number \\| ResponsiveValue`|`0`|\n|suffix|是否是后缀元素|`boolean`|`false`|\n\n\n\n\n### ResponsiveValue\n\n|参数名|描述|类型|默认值|\n|---|---|---|:---:|\n|xxl|>= 1600px 响应式配置|`number`|`-`|\n|xl|>= 1200px 响应式配置|`number`|`-`|\n|lg|>= 992px 响应式配置|`number`|`-`|\n|md|>= 768px 响应式配置|`number`|`-`|\n|sm|>= 576px 响应式配置|`number`|`-`|\n|xs|< 576px 响应式配置|`number`|`-`|\n\n\n\n"
  },
  {
    "path": "packages/web-vue/components/grid/TEMPLATE.md",
    "content": "## zh-CN\n```yaml\nmeta:\n  type: 组件\n  category: 布局\ntitle: 栅格 Grid\ndescription: 栅格可以有效的保证页面的一致性、逻辑性、加强团队协作和统一。\n```\n\n---\n## en-US\n```yaml\nmeta:\n  type: Component\n  category: Layout\ntitle: Grid\ndescription: Grid can effectively ensure the consistency and logic of the page, strengthen teamwork and unity.\n```\n---\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/offset.md\n\n@import ./__demo__/gutter.md\n\n@import ./__demo__/flex-justify.md\n\n@import ./__demo__/flex-align.md\n\n@import ./__demo__/order.md\n\n@import ./__demo__/adaptation.md\n\n@import ./__demo__/adaptation-object.md\n\n@import ./__demo__/flex.md\n\n@import ./__demo__/grid.md\n\n@import ./__demo__/grid-responsive.md\n\n## API\n\n%%API(grid-row.vue)%%\n\n%%API(grid-col.vue)%%\n\n%%API(grid.vue)%%\n\n%%API(grid-item.vue)%%\n\n%%INTERFACE(interface.ts)%%\n\n"
  },
  {
    "path": "packages/web-vue/components/grid/__demo__/adaptation-object.md",
    "content": "```yaml\ntitle:\n  zh-CN: 其他属性的响应式\n  en-US: Advanced Responsive Layout\n```\n\n## zh-CN\n\n`span`, `offset`, `order` 属性可以内嵌到 `xs`, `sm`, `md`, `lg`, `xl`, `xxl` 对象中使用。\n比如 `:xs=\"8\"` 相当于 `:xs=\"{ span: 8 }\"`。\n\n---\n\n## en-US\n\nThe `span`, `offset`, and `order` properties can be embedded in `xs`, `sm`, `md`, `lg`, `xl`, `xxl` objects.\nFor example, `:xs=\"8\"` is equivalent to `:xs=\"{ span: 8 }\"`\n\n---\n\n```vue\n<template>\n  <div>\n    <a-row class=\"grid-demo\">\n      <a-col :xs=\"{span: 5, offset: 1}\" :lg=\"{span: 6, offset: 2}\">\n        Col\n      </a-col>\n      <a-col :xs=\"{span: 11, offset: 1}\" :lg=\"{span: 6, offset: 2}\">\n        Col\n      </a-col>\n      <a-col :xs=\"{span: 5, offset: 1}\" :lg=\"{span: 6, offset: 2}\">\n        Col\n      </a-col>\n    </a-row>\n  </div>\n</template>\n\n<style scoped>\n.grid-demo .arco-col {\n  height: 48px;\n  line-height: 48px;\n  color: var(--color-white);\n  text-align: center;\n}\n.grid-demo .arco-col:nth-child(2n) {\n  background-color: rgba(var(--arcoblue-6), 0.9);\n}\n.grid-demo .arco-col:nth-child(2n + 1) {\n  background-color: var(--color-primary-light-4);\n}\n</style>\n```\n"
  },
  {
    "path": "packages/web-vue/components/grid/__demo__/adaptation.md",
    "content": "```yaml\ntitle:\n  zh-CN: 响应式布局\n  en-US: Responsive Layout\n```\n\n## zh-CN\n\n预置六种响应尺寸, 分别为 `xs`, `sm`, `md`, `lg`, `xl`, `xxl`。\n\n---\n\n## en-US\n\nSix preset response sizes, namely `xs`, `sm`, `md`, `lg`, `xl`, `xxl`\n\n---\n\n```vue\n<template>\n  <a-row class=\"grid-demo\">\n    <a-col :xs=\"2\" :sm=\"4\" :md=\"6\" :lg=\"8\" :xl=\"10\" :xxl=\"8\">\n      Col\n    </a-col>\n    <a-col :xs=\"20\" :sm=\"16\" :md=\"12\" :lg=\"8\" :xl=\"4\" :xxl=\"8\">\n      Col\n    </a-col>\n    <a-col :xs=\"2\" :sm=\"4\" :md=\"6\" :lg=\"8\" :xl=\"10\" :xxl=\"8\">\n      Col\n    </a-col>\n  </a-row>\n</template>\n\n<style scoped>\n.grid-demo .arco-col {\n  height: 48px;\n  line-height: 48px;\n  color: var(--color-white);\n  text-align: center;\n}\n.grid-demo .arco-col:nth-child(2n) {\n  background-color: rgba(var(--arcoblue-6), 0.9);\n}\n.grid-demo .arco-col:nth-child(2n + 1) {\n  background-color: var(--color-primary-light-4);\n}\n</style>\n```\n"
  },
  {
    "path": "packages/web-vue/components/grid/__demo__/basic.md",
    "content": "```yaml\ntitle:\n  zh-CN: 基本用法\n  en-US: Basic\n```\n\n## zh-CN\n\n展示了最基本的 24 等分应用。\n\n---\n\n## en-US\n\nDemonstrated the most basic 24 equal division applications\n\n---\n\n```vue\n<template>\n  <div class=\"grid-demo-background\">\n    <a-space direction=\"vertical\" :size=\"16\" style=\"display: block;\">\n      <a-row class=\"grid-demo\">\n        <a-col :span=\"24\">\n          <div>24 - 100%</div>\n        </a-col>\n      </a-row>\n      <a-row class=\"grid-demo\">\n        <a-col :span=\"12\">\n          <div>12 - 50%</div>\n        </a-col>\n        <a-col :span=\"12\">\n          <div>12 - 50%</div>\n        </a-col>\n      </a-row>\n      <a-row class=\"grid-demo\">\n        <a-col :span=\"8\">\n          <div>8 - 33.33%</div>\n        </a-col>\n        <a-col :span=\"8\">\n          <div>8 - 33.33%</div>\n        </a-col>\n        <a-col :span=\"8\">\n          <div>8 - 33.33%</div>\n        </a-col>\n      </a-row>\n      <a-row class=\"grid-demo\">\n        <a-col :span=\"6\">\n          <div>6 - 25%</div>\n        </a-col>\n        <a-col :span=\"6\">\n          <div>6 - 25%</div>\n        </a-col>\n        <a-col :span=\"6\">\n          <div>6 - 25%</div>\n        </a-col>\n        <a-col :span=\"6\">\n          <div>6 - 25%</div>\n        </a-col>\n      </a-row>\n      <a-row class=\"grid-demo\">\n        <a-col :span=\"4\">\n          <div>4 - 16.66%</div>\n        </a-col>\n        <a-col :span=\"4\">\n          <div>4 - 16.66%</div>\n        </a-col>\n        <a-col :span=\"4\">\n          <div>4 - 16.66%</div>\n        </a-col>\n        <a-col :span=\"4\">\n          <div>4 - 16.66%</div>\n        </a-col>\n        <a-col :span=\"4\">\n          <div>4 - 16.66%</div>\n        </a-col>\n        <a-col :span=\"4\">\n          <div>4 - 16.66%</div>\n        </a-col>\n      </a-row>\n    </a-space>\n  </div>\n</template>\n\n<style scoped>\n.grid-demo-background {\n  background-image: linear-gradient(\n    90deg,\n    var(--color-fill-2) 4.16666667%,\n    transparent 4.16666667%,\n    transparent 8.33333333%,\n    var(--color-fill-2) 8.33333333%,\n    var(--color-fill-2) 12.5%,\n    transparent 12.5%,\n    transparent 16.66666667%,\n    var(--color-fill-2) 16.66666667%,\n    var(--color-fill-2) 20.83333333%,\n    transparent 20.83333333%,\n    transparent 25%,\n    var(--color-fill-2) 25%,\n    var(--color-fill-2) 29.16666667%,\n    transparent 29.16666667%,\n    transparent 33.33333333%,\n    var(--color-fill-2) 33.33333333%,\n    var(--color-fill-2) 37.5%,\n    transparent 37.5%,\n    transparent 41.66666667%,\n    var(--color-fill-2) 41.66666667%,\n    var(--color-fill-2) 45.83333333%,\n    transparent 45.83333333%,\n    transparent 50%,\n    var(--color-fill-2) 50%,\n    var(--color-fill-2) 54.16666667%,\n    transparent 54.16666667%,\n    transparent 58.33333333%,\n    var(--color-fill-2) 58.33333333%,\n    var(--color-fill-2) 62.5%,\n    transparent 62.5%,\n    transparent 66.66666667%,\n    var(--color-fill-2) 66.66666667%,\n    var(--color-fill-2) 70.83333333%,\n    transparent 70.83333333%,\n    transparent 75%,\n    var(--color-fill-2) 75%,\n    var(--color-fill-2) 79.16666667%,\n    transparent 79.16666667%,\n    transparent 83.33333333%,\n    var(--color-fill-2) 83.33333333%,\n    var(--color-fill-2) 87.5%,\n    transparent 87.5%,\n    transparent 91.66666667%,\n    var(--color-fill-2) 91.66666667%,\n    var(--color-fill-2) 95.83333333%,\n    transparent 95.83333333%\n  );\n}\n.grid-demo .arco-col {\n  height: 48px;\n  line-height: 48px;\n  color: var(--color-white);\n  text-align: center;\n}\n.grid-demo .arco-col:nth-child(2n) {\n  background-color: rgba(var(--arcoblue-6), 0.9);\n}\n.grid-demo .arco-col:nth-child(2n + 1) {\n  background-color: var(--color-primary-light-4);\n}\n</style>\n```\n"
  },
  {
    "path": "packages/web-vue/components/grid/__demo__/flex-align.md",
    "content": "```yaml\ntitle:\n  zh-CN: 垂直布局\n  en-US: Vertical Layout\n```\n\n## zh-CN\n\n通过 `align` 来进行垂直布局。\n\n---\n\n## en-US\n\nUse `align` for vertical layout.\n\n---\n\n```vue\n<template>\n  <div>\n    <p>Arrange top</p>\n    <a-row class=\"grid-demo\" align=\"start\">\n      <a-col :span=\"6\">\n        <div>col - 6</div>\n      </a-col>\n      <a-col :span=\"6\">\n        <div>col - 6</div>\n      </a-col>\n      <a-col :span=\"6\">\n        <div>col - 6</div>\n      </a-col>\n      <a-col :span=\"6\">\n        <div>col - 6</div>\n      </a-col>\n    </a-row>\n    <p>Arrange center</p>\n    <a-row class=\"grid-demo\" align=\"center\">\n      <a-col :span=\"6\">\n        <div>col - 6</div>\n      </a-col>\n      <a-col :span=\"6\">\n        <div>col - 6</div>\n      </a-col>\n      <a-col :span=\"6\">\n        <div>col - 6</div>\n      </a-col>\n      <a-col :span=\"6\">\n        <div>col - 6</div>\n      </a-col>\n    </a-row>\n    <p>Arrange bottom</p>\n    <a-row class=\"grid-demo\" align=\"end\">\n      <a-col :span=\"6\">\n        <div>col - 6</div>\n      </a-col>\n      <a-col :span=\"6\">\n        <div>col - 6</div>\n      </a-col>\n      <a-col :span=\"6\">\n        <div>col - 6</div>\n      </a-col>\n      <a-col :span=\"6\">\n        <div>col - 6</div>\n      </a-col>\n    </a-row>\n  </div>\n</template>\n\n<style scoped>\n.grid-demo {\n  background-color: var(--color-fill-2);\n  margin-bottom: 40px;\n}\n.grid-demo:last-child {\n  margin-bottom: 0px;\n}\n.grid-demo .arco-col {\n  height: 48px;\n  line-height: 48px;\n  color: var(--color-white);\n  text-align: center;\n}\n.grid-demo .arco-col:nth-of-type(1) {\n  height: 90px;\n  line-height: 90px;\n}\n.grid-demo .arco-col:nth-of-type(2) {\n  height: 48px;\n  line-height: 48px;\n}\n.grid-demo .arco-col:nth-of-type(3) {\n  height: 120px;\n  line-height: 120px;\n}\n.grid-demo .arco-col:nth-of-type(4) {\n  height: 60px;\n  line-height: 60px;\n}\n.grid-demo .arco-col:nth-child(2n) {\n  background-color: rgba(var(--arcoblue-6), 0.9);\n}\n.grid-demo .arco-col:nth-child(2n + 1) {\n  background-color: var(--color-primary-light-4);\n}\n</style>\n```\n"
  },
  {
    "path": "packages/web-vue/components/grid/__demo__/flex-justify.md",
    "content": "```yaml\ntitle:\n  zh-CN: 水平布局\n  en-US: Horizontal Layout\n```\n\n## zh-CN\n\n通过 `justify` 来进行水平布局。\n\n---\n\n## en-US\n\nUse `justify` for horizontal layout\n---\n\n```vue\n<template>\n  <div>\n    <p>Arrange left</p>\n    <a-row class=\"grid-demo\" justify=\"start\">\n      <a-col :span=\"4\">\n        <div>col - 4</div>\n      </a-col>\n      <a-col :span=\"4\">\n        <div>col - 4</div>\n      </a-col>\n      <a-col :span=\"4\">\n        <div>col - 4</div>\n      </a-col>\n      <a-col :span=\"4\">\n        <div>col - 4</div>\n      </a-col>\n    </a-row>\n    <p>Arrange center</p>\n    <a-row class=\"grid-demo\" justify=\"center\">\n      <a-col :span=\"4\">\n        <div>col - 4</div>\n      </a-col>\n      <a-col :span=\"4\">\n        <div>col - 4</div>\n      </a-col>\n      <a-col :span=\"4\">\n        <div>col - 4</div>\n      </a-col>\n      <a-col :span=\"4\">\n        <div>col - 4</div>\n      </a-col>\n    </a-row>\n    <p>Arrange right</p>\n    <a-row class=\"grid-demo\" justify=\"end\">\n      <a-col :span=\"4\">\n        <div>col - 4</div>\n      </a-col>\n      <a-col :span=\"4\">\n        <div>col - 4</div>\n      </a-col>\n      <a-col :span=\"4\">\n        <div>col - 4</div>\n      </a-col>\n      <a-col :span=\"4\">\n        <div>col - 4</div>\n      </a-col>\n    </a-row>\n    <p>Space around</p>\n    <a-row class=\"grid-demo\" justify=\"space-around\">\n      <a-col :span=\"4\">\n        <div>col - 4</div>\n      </a-col>\n      <a-col :span=\"4\">\n        <div>col - 4</div>\n      </a-col>\n      <a-col :span=\"4\">\n        <div>col - 4</div>\n      </a-col>\n      <a-col :span=\"4\">\n        <div>col - 4</div>\n      </a-col>\n    </a-row>\n    <p>Space between</p>\n    <a-row class=\"grid-demo\" justify=\"space-between\">\n      <a-col :span=\"4\">\n        <div>col - 4</div>\n      </a-col>\n      <a-col :span=\"4\">\n        <div>col - 4</div>\n      </a-col>\n      <a-col :span=\"4\">\n        <div>col - 4</div>\n      </a-col>\n      <a-col :span=\"4\">\n        <div>col - 4</div>\n      </a-col>\n    </a-row>\n  </div>\n</template>\n\n<style scoped>\n.grid-demo {\n  background-color: var(--color-fill-2);\n  margin-bottom: 40px;\n}\n.grid-demo:last-child {\n  margin-bottom: 0px;\n}\n.grid-demo .arco-col {\n  height: 48px;\n  line-height: 48px;\n  color: var(--color-white);\n  text-align: center;\n}\n.grid-demo .arco-col:nth-child(2n) {\n  background-color: rgba(var(--arcoblue-6), 0.9);\n}\n.grid-demo .arco-col:nth-child(2n + 1) {\n  background-color: var(--color-primary-light-4);\n}\n</style>\n```\n"
  },
  {
    "path": "packages/web-vue/components/grid/__demo__/flex.md",
    "content": "```yaml\ntitle:\n  zh-CN: Flex 用法\n  en-US: Flex\n```\n\n## zh-CN\n\n通过设置 `Col` 组件的 `flex` 属性，可以任意配置 flex 布局。\n\n---\n\n## en-US\n\nBy setting the `flex` property of the `Col` component, you can configure the flex layout arbitrarily.\n---\n\n```vue\n<template>\n  <a-row class=\"grid-demo\" style=\"margin-bottom: 16px;\">\n    <a-col flex=\"100px\">\n      <div>100px</div>\n    </a-col>\n    <a-col flex=\"auto\">\n      <div>auto</div>\n    </a-col>\n  </a-row>\n  <a-row class=\"grid-demo\" style=\"margin-bottom: 16px;\">\n    <a-col flex=\"100px\">\n      <div>100px</div>\n    </a-col>\n    <a-col flex=\"auto\">\n      <div>auto</div>\n    </a-col>\n    <a-col flex=\"100px\">\n      <div>100px</div>\n    </a-col>\n  </a-row>\n  <a-row class=\"grid-demo\" style=\"margin-bottom: 16px;\">\n    <a-col :flex=\"3\">\n      <div>3 / 12</div>\n    </a-col>\n    <a-col :flex=\"4\">\n      <div>4 / 12</div>\n    </a-col>\n    <a-col :flex=\"5\">\n      <div>5 / 12</div>\n    </a-col>\n  </a-row>\n</template>\n\n<style scoped>\n.grid-demo .arco-col {\n  height: 48px;\n  line-height: 48px;\n  color: var(--color-white);\n  text-align: center;\n}\n\n.grid-demo .arco-col:nth-child(2n + 1) {\n  background-color: var(--color-primary-light-4);\n}\n\n.grid-demo .arco-col:nth-child(2n) {\n  background-color: rgba(var(--arcoblue-6), 0.9);\n}\n</style>\n```\n"
  },
  {
    "path": "packages/web-vue/components/grid/__demo__/grid-responsive.md",
    "content": "```yaml\ntitle:\n  zh-CN: 响应式的 Grid 布局\n  en-US: Responsive Grid Layout\n```\n\n## zh-CN\n\nGrid 组件的响应式配置格式为 `{ xs: 1, sm: 2, md: 3, lg: 4, xl: 5, xxl: 6 }`。\n\n---\n\n## en-US\n\nThe responsive configuration format of the Grid component is `{ xs: 1, sm: 2, md: 3, lg: 4, xl: 5, xxl: 6 }`.\n\n---\n\n```vue\n<template>\n  <a-grid :cols=\"{ xs: 1, sm: 2, md: 3, lg: 4, xl: 5, xxl: 6 }\" :colGap=\"12\" :rowGap=\"16\" class=\"grid-demo-grid\">\n    <a-grid-item class=\"demo-item\">item</a-grid-item>\n    <a-grid-item class=\"demo-item\">item</a-grid-item>\n    <a-grid-item class=\"demo-item\">item</a-grid-item>\n    <a-grid-item class=\"demo-item\">item</a-grid-item>\n    <a-grid-item class=\"demo-item\">item</a-grid-item>\n    <a-grid-item class=\"demo-item\">item</a-grid-item>\n    <a-grid-item class=\"demo-item\" :span=\"{ xl: 4, xxl: 6 }\" suffix>\n      suffix\n    </a-grid-item>\n  </a-grid>\n</template>\n\n<style scoped>\n.grid-demo-grid .demo-item,\n.grid-demo-grid .demo-suffix {\n  height: 48px;\n  line-height: 48px;\n  color: var(--color-white);\n  text-align: center;\n}\n.grid-demo-grid .demo-item:nth-child(2n) {\n  background-color: rgba(var(--arcoblue-6), 0.9);\n}\n.grid-demo-grid .demo-item:nth-child(2n + 1) {\n  background-color: var(--color-primary-light-4);\n}\n</style>\n```\n"
  },
  {
    "path": "packages/web-vue/components/grid/__demo__/grid.md",
    "content": "```yaml\ntitle:\n  zh-CN: Grid 布局\n  en-US: Grid Layout\n```\n\n## zh-CN\n\n基于 CSS 的 Grid 布局实现的布局组件，支持折叠，并且可以设置后缀节点，后缀节点会显示在一行的结尾。\n\n---\n\n## en-US\n\nA layout component implemented by CSS-based Grid layout, supports folding, and can set suffix nodes, which will always be displayed at the end of a line.\n\n---\n\n```vue\n\n<template>\n  <div style=\"margin-bottom: 20px;\">\n    <a-typography-text>折叠：</a-typography-text>\n    <a-switch :checked=\"collapsed\" @click=\"collapsed = !collapsed\" />\n  </div>\n  <a-grid :cols=\"3\" :colGap=\"12\" :rowGap=\"16\" class=\"grid-demo-grid\" :collapsed=\"collapsed\">\n    <a-grid-item class=\"demo-item\">item</a-grid-item>\n    <a-grid-item class=\"demo-item\">item</a-grid-item>\n    <a-grid-item class=\"demo-item\">item</a-grid-item>\n    <a-grid-item class=\"demo-item\" :offset=\"1\">item | offset - 1</a-grid-item>\n    <a-grid-item class=\"demo-item\">item</a-grid-item>\n    <a-grid-item class=\"demo-item\" :span=\"3\">item | span - 3</a-grid-item>\n    <a-grid-item class=\"demo-item\">item</a-grid-item>\n    <a-grid-item class=\"demo-item\">item</a-grid-item>\n    <a-grid-item class=\"demo-item\" suffix #=\"{ overflow }\">\n      suffix | overflow: {{ overflow }}\n    </a-grid-item>\n  </a-grid>\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n  setup() {\n    const collapsed = ref(false);\n\n    return {\n      collapsed\n    }\n  },\n}\n</script>\n\n<style scoped>\n.grid-demo-grid .demo-item,\n.grid-demo-grid .demo-suffix {\n  height: 48px;\n  line-height: 48px;\n  color: var(--color-white);\n  text-align: center;\n}\n\n.grid-demo-grid .demo-item:nth-child(2n) {\n  background-color: rgba(var(--arcoblue-6), 0.9);\n}\n\n.grid-demo-grid .demo-item:nth-child(2n + 1) {\n  background-color: var(--color-primary-light-4);\n}\n</style>\n```\n"
  },
  {
    "path": "packages/web-vue/components/grid/__demo__/gutter.md",
    "content": "```yaml\ntitle:\n  zh-CN: 区块间隔\n  en-US: Interval of Grid\n```\n\n## zh-CN\n\n通过在 `Row` 上指定 `gutter` 可以增加栅格的区域间隔。\n\n---\n\n## en-US\n\nBy specifying `gutter` on `Row`, the area interval of the grid can be increased\n\n---\n\n```vue\n<template>\n  <div>\n    <p>Horizontal</p>\n    <a-row class=\"grid-demo\" :gutter=\"24\">\n      <a-col :span=\"12\">\n        <div>col - 12</div>\n      </a-col>\n      <a-col :span=\"12\">\n        <div>col - 12</div>\n      </a-col>\n    </a-row>\n    <p>Responsive</p>\n    <a-row class=\"grid-demo\" :gutter=\"{ md: 8, lg: 24, xl: 32 }\">\n      <a-col :span=\"6\">\n        <div>col - 6</div>\n      </a-col>\n      <a-col :span=\"6\">\n        <div>col - 6</div>\n      </a-col>\n      <a-col :span=\"6\">\n        <div>col - 6</div>\n      </a-col>\n      <a-col :span=\"6\">\n        <div>col - 6</div>\n      </a-col>\n    </a-row>\n    <p>Horizontal and Vertical</p>\n    <a-row class=\"grid-demo\" :gutter=\"[24, 12]\">\n      <a-col :span=\"6\">\n        <div>col - 6</div>\n      </a-col>\n      <a-col :span=\"6\">\n        <div>col - 6</div>\n      </a-col>\n      <a-col :span=\"6\">\n        <div>col - 6</div>\n      </a-col>\n      <a-col :span=\"6\">\n        <div>col - 6</div>\n      </a-col>\n      <a-col :span=\"6\">\n        <div>col - 6</div>\n      </a-col>\n      <a-col :span=\"6\">\n        <div>col - 6</div>\n      </a-col>\n      <a-col :span=\"6\">\n        <div>col - 6</div>\n      </a-col>\n      <a-col :span=\"6\">\n        <div>col - 6</div>\n      </a-col>\n    </a-row>\n  </div>\n</template>\n\n<style scoped>\n.grid-demo .arco-col {\n  height: 48px;\n  color: var(--color-white);\n}\n.grid-demo .arco-col > div {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n}\n.grid-demo .arco-col:nth-child(2n) > div {\n  background-color: rgba(var(--arcoblue-6), 0.9);\n}\n.grid-demo .arco-col:nth-child(2n + 1) > div {\n  background-color: var(--color-primary-light-4);\n}\n</style>\n```\n"
  },
  {
    "path": "packages/web-vue/components/grid/__demo__/offset.md",
    "content": "```yaml\ntitle:\n  zh-CN: 栅格偏移\n  en-US: Offset of Col\n```\n\n## zh-CN\n\n指定 `offset` 可以对栅格进行平移操作。\n\n---\n\n## en-US\n\nSpecify `offset` to translate the grid.\n\n---\n\n```vue\n<template>\n  <div>\n    <a-row class=\"grid-demo\" style=\"marginBottom: 16px; backgroundColor: var(--color-fill-2);\">\n      <a-col :span=\"8\">col - 8</a-col>\n      <a-col :span=\"8\" :offset=\"8\">\n        col - 8 | offset - 8\n      </a-col>\n    </a-row>\n    <a-row class=\"grid-demo\" style=\"marginBottom: 16px; backgroundColor: var(--color-fill-2);\">\n      <a-col :span=\"6\" :offset=\"8\">\n        col - 6 | offset - 8\n      </a-col>\n      <a-col :span=\"6\" :offset=\"4\">\n        col - 6 | offset - 4\n      </a-col>\n    </a-row>\n    <a-row class=\"grid-demo\" style=\"backgroundColor: var(--color-fill-2)\">\n      <a-col :span=\"12\" :offset=\"8\">\n        col - 12 | offset - 8\n      </a-col>\n    </a-row>\n  </div>\n</template>\n\n<style scoped>\n.grid-demo .arco-col {\n  height: 48px;\n  line-height: 48px;\n  color: var(--color-white);\n  text-align: center;\n}\n.grid-demo .arco-col:nth-child(2n) {\n  background-color: rgba(var(--arcoblue-6), 0.9);\n}\n.grid-demo .arco-col:nth-child(2n + 1) {\n  background-color: var(--color-primary-light-4);\n}\n</style>\n```\n"
  },
  {
    "path": "packages/web-vue/components/grid/__demo__/order.md",
    "content": "```yaml\ntitle:\n  zh-CN: 排序\n  en-US: Order\n```\n\n## zh-CN\n\n通过 `order` 来进行元素排序。\n\n---\n\n## en-US\n\nSort elements by `order`.\n\n---\n\n```vue\n<template>\n  <div>\n    <a-row class=\"grid-demo\">\n      <a-col :span=\"6\" :order=\"4\">\n        <div>1 col-order-4</div>\n      </a-col>\n      <a-col :span=\"6\" :order=\"3\">\n        <div>2 col-order-3</div>\n      </a-col>\n      <a-col :span=\"6\" :order=\"2\">\n        <div>3 col-order-2</div>\n      </a-col>\n      <a-col :span=\"6\" :order=\"1\">\n        <div>4 col-order-1</div>\n      </a-col>\n    </a-row>\n  </div>\n</template>\n\n<style scoped>\n.grid-demo .arco-col {\n  height: 48px;\n  line-height: 48px;\n  color: var(--color-white);\n  text-align: center;\n}\n.grid-demo .arco-col:nth-child(2n) {\n  background-color: rgba(var(--arcoblue-6), 0.9);\n}\n.grid-demo .arco-col:nth-child(2n + 1) {\n  background-color: var(--color-primary-light-4);\n}\n</style>\n```\n"
  },
  {
    "path": "packages/web-vue/components/grid/__test__/__snapshots__/demo.test.ts.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`<grid> demo: render [adaptation] correctly 1`] = `\n\"<div class=\\\\\"arco-row arco-row-align-start arco-row-justify-start grid-demo\\\\\">\n  <div class=\\\\\"arco-col arco-col-xs-2 arco-col-sm-4 arco-col-md-6 arco-col-lg-8 arco-col-xl-10 arco-col-xxl-8\\\\\"> Col </div>\n  <div class=\\\\\"arco-col arco-col-xs-20 arco-col-sm-16 arco-col-md-12 arco-col-lg-8 arco-col-xl-4 arco-col-xxl-8\\\\\"> Col </div>\n  <div class=\\\\\"arco-col arco-col-xs-2 arco-col-sm-4 arco-col-md-6 arco-col-lg-8 arco-col-xl-10 arco-col-xxl-8\\\\\"> Col </div>\n</div>\"\n`;\n\nexports[`<grid> demo: render [adaptation-object] correctly 1`] = `\n\"<div>\n  <div class=\\\\\"arco-row arco-row-align-start arco-row-justify-start grid-demo\\\\\">\n    <div class=\\\\\"arco-col arco-col-xs-5 arco-col-xs-offset-1 arco-col-lg-6 arco-col-lg-offset-2\\\\\"> Col </div>\n    <div class=\\\\\"arco-col arco-col-xs-11 arco-col-xs-offset-1 arco-col-lg-6 arco-col-lg-offset-2\\\\\"> Col </div>\n    <div class=\\\\\"arco-col arco-col-xs-5 arco-col-xs-offset-1 arco-col-lg-6 arco-col-lg-offset-2\\\\\"> Col </div>\n  </div>\n</div>\"\n`;\n\nexports[`<grid> demo: render [basic] correctly 1`] = `\n\"<div class=\\\\\"grid-demo-background\\\\\">\n  <div class=\\\\\"arco-space arco-space-vertical\\\\\" style=\\\\\"column-gap: 16px; row-gap: 16px; display: block;\\\\\">\n    <!---->\n    <div class=\\\\\"arco-space-item\\\\\">\n      <div class=\\\\\"arco-row arco-row-align-start arco-row-justify-start grid-demo\\\\\">\n        <div class=\\\\\"arco-col arco-col-24\\\\\">\n          <div>24 - 100%</div>\n        </div>\n      </div>\n    </div>\n    <!---->\n    <div class=\\\\\"arco-space-item\\\\\">\n      <div class=\\\\\"arco-row arco-row-align-start arco-row-justify-start grid-demo\\\\\">\n        <div class=\\\\\"arco-col arco-col-12\\\\\">\n          <div>12 - 50%</div>\n        </div>\n        <div class=\\\\\"arco-col arco-col-12\\\\\">\n          <div>12 - 50%</div>\n        </div>\n      </div>\n    </div>\n    <!---->\n    <div class=\\\\\"arco-space-item\\\\\">\n      <div class=\\\\\"arco-row arco-row-align-start arco-row-justify-start grid-demo\\\\\">\n        <div class=\\\\\"arco-col arco-col-8\\\\\">\n          <div>8 - 33.33%</div>\n        </div>\n        <div class=\\\\\"arco-col arco-col-8\\\\\">\n          <div>8 - 33.33%</div>\n        </div>\n        <div class=\\\\\"arco-col arco-col-8\\\\\">\n          <div>8 - 33.33%</div>\n        </div>\n      </div>\n    </div>\n    <!---->\n    <div class=\\\\\"arco-space-item\\\\\">\n      <div class=\\\\\"arco-row arco-row-align-start arco-row-justify-start grid-demo\\\\\">\n        <div class=\\\\\"arco-col arco-col-6\\\\\">\n          <div>6 - 25%</div>\n        </div>\n        <div class=\\\\\"arco-col arco-col-6\\\\\">\n          <div>6 - 25%</div>\n        </div>\n        <div class=\\\\\"arco-col arco-col-6\\\\\">\n          <div>6 - 25%</div>\n        </div>\n        <div class=\\\\\"arco-col arco-col-6\\\\\">\n          <div>6 - 25%</div>\n        </div>\n      </div>\n    </div>\n    <!---->\n    <div class=\\\\\"arco-space-item\\\\\">\n      <div class=\\\\\"arco-row arco-row-align-start arco-row-justify-start grid-demo\\\\\">\n        <div class=\\\\\"arco-col arco-col-4\\\\\">\n          <div>4 - 16.66%</div>\n        </div>\n        <div class=\\\\\"arco-col arco-col-4\\\\\">\n          <div>4 - 16.66%</div>\n        </div>\n        <div class=\\\\\"arco-col arco-col-4\\\\\">\n          <div>4 - 16.66%</div>\n        </div>\n        <div class=\\\\\"arco-col arco-col-4\\\\\">\n          <div>4 - 16.66%</div>\n        </div>\n        <div class=\\\\\"arco-col arco-col-4\\\\\">\n          <div>4 - 16.66%</div>\n        </div>\n        <div class=\\\\\"arco-col arco-col-4\\\\\">\n          <div>4 - 16.66%</div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\"\n`;\n\nexports[`<grid> demo: render [flex] correctly 1`] = `\n\"<div class=\\\\\"arco-row arco-row-align-start arco-row-justify-start grid-demo\\\\\" style=\\\\\"margin-bottom: 16px;\\\\\">\n  <div class=\\\\\"arco-col\\\\\" style=\\\\\"flex: 0 0 100px;\\\\\">\n    <div>100px</div>\n  </div>\n  <div class=\\\\\"arco-col\\\\\" style=\\\\\"flex-basis: auto;\\\\\">\n    <div>auto</div>\n  </div>\n</div>\n<div class=\\\\\"arco-row arco-row-align-start arco-row-justify-start grid-demo\\\\\" style=\\\\\"margin-bottom: 16px;\\\\\">\n  <div class=\\\\\"arco-col\\\\\" style=\\\\\"flex: 0 0 100px;\\\\\">\n    <div>100px</div>\n  </div>\n  <div class=\\\\\"arco-col\\\\\" style=\\\\\"flex-basis: auto;\\\\\">\n    <div>auto</div>\n  </div>\n  <div class=\\\\\"arco-col\\\\\" style=\\\\\"flex: 0 0 100px;\\\\\">\n    <div>100px</div>\n  </div>\n</div>\n<div class=\\\\\"arco-row arco-row-align-start arco-row-justify-start grid-demo\\\\\" style=\\\\\"margin-bottom: 16px;\\\\\">\n  <div class=\\\\\"arco-col\\\\\" style=\\\\\"flex: 3;\\\\\">\n    <div>3 / 12</div>\n  </div>\n  <div class=\\\\\"arco-col\\\\\" style=\\\\\"flex: 4;\\\\\">\n    <div>4 / 12</div>\n  </div>\n  <div class=\\\\\"arco-col\\\\\" style=\\\\\"flex: 5;\\\\\">\n    <div>5 / 12</div>\n  </div>\n</div>\"\n`;\n\nexports[`<grid> demo: render [flex-align] correctly 1`] = `\n\"<div>\n  <p>Arrange top</p>\n  <div class=\\\\\"arco-row arco-row-align-start arco-row-justify-start grid-demo\\\\\">\n    <div class=\\\\\"arco-col arco-col-6\\\\\">\n      <div>col - 6</div>\n    </div>\n    <div class=\\\\\"arco-col arco-col-6\\\\\">\n      <div>col - 6</div>\n    </div>\n    <div class=\\\\\"arco-col arco-col-6\\\\\">\n      <div>col - 6</div>\n    </div>\n    <div class=\\\\\"arco-col arco-col-6\\\\\">\n      <div>col - 6</div>\n    </div>\n  </div>\n  <p>Arrange center</p>\n  <div class=\\\\\"arco-row arco-row-align-center arco-row-justify-start grid-demo\\\\\">\n    <div class=\\\\\"arco-col arco-col-6\\\\\">\n      <div>col - 6</div>\n    </div>\n    <div class=\\\\\"arco-col arco-col-6\\\\\">\n      <div>col - 6</div>\n    </div>\n    <div class=\\\\\"arco-col arco-col-6\\\\\">\n      <div>col - 6</div>\n    </div>\n    <div class=\\\\\"arco-col arco-col-6\\\\\">\n      <div>col - 6</div>\n    </div>\n  </div>\n  <p>Arrange bottom</p>\n  <div class=\\\\\"arco-row arco-row-align-end arco-row-justify-start grid-demo\\\\\">\n    <div class=\\\\\"arco-col arco-col-6\\\\\">\n      <div>col - 6</div>\n    </div>\n    <div class=\\\\\"arco-col arco-col-6\\\\\">\n      <div>col - 6</div>\n    </div>\n    <div class=\\\\\"arco-col arco-col-6\\\\\">\n      <div>col - 6</div>\n    </div>\n    <div class=\\\\\"arco-col arco-col-6\\\\\">\n      <div>col - 6</div>\n    </div>\n  </div>\n</div>\"\n`;\n\nexports[`<grid> demo: render [flex-justify] correctly 1`] = `\n\"<div>\n  <p>Arrange left</p>\n  <div class=\\\\\"arco-row arco-row-align-start arco-row-justify-start grid-demo\\\\\">\n    <div class=\\\\\"arco-col arco-col-4\\\\\">\n      <div>col - 4</div>\n    </div>\n    <div class=\\\\\"arco-col arco-col-4\\\\\">\n      <div>col - 4</div>\n    </div>\n    <div class=\\\\\"arco-col arco-col-4\\\\\">\n      <div>col - 4</div>\n    </div>\n    <div class=\\\\\"arco-col arco-col-4\\\\\">\n      <div>col - 4</div>\n    </div>\n  </div>\n  <p>Arrange center</p>\n  <div class=\\\\\"arco-row arco-row-align-start arco-row-justify-center grid-demo\\\\\">\n    <div class=\\\\\"arco-col arco-col-4\\\\\">\n      <div>col - 4</div>\n    </div>\n    <div class=\\\\\"arco-col arco-col-4\\\\\">\n      <div>col - 4</div>\n    </div>\n    <div class=\\\\\"arco-col arco-col-4\\\\\">\n      <div>col - 4</div>\n    </div>\n    <div class=\\\\\"arco-col arco-col-4\\\\\">\n      <div>col - 4</div>\n    </div>\n  </div>\n  <p>Arrange right</p>\n  <div class=\\\\\"arco-row arco-row-align-start arco-row-justify-end grid-demo\\\\\">\n    <div class=\\\\\"arco-col arco-col-4\\\\\">\n      <div>col - 4</div>\n    </div>\n    <div class=\\\\\"arco-col arco-col-4\\\\\">\n      <div>col - 4</div>\n    </div>\n    <div class=\\\\\"arco-col arco-col-4\\\\\">\n      <div>col - 4</div>\n    </div>\n    <div class=\\\\\"arco-col arco-col-4\\\\\">\n      <div>col - 4</div>\n    </div>\n  </div>\n  <p>Space around</p>\n  <div class=\\\\\"arco-row arco-row-align-start arco-row-justify-space-around grid-demo\\\\\">\n    <div class=\\\\\"arco-col arco-col-4\\\\\">\n      <div>col - 4</div>\n    </div>\n    <div class=\\\\\"arco-col arco-col-4\\\\\">\n      <div>col - 4</div>\n    </div>\n    <div class=\\\\\"arco-col arco-col-4\\\\\">\n      <div>col - 4</div>\n    </div>\n    <div class=\\\\\"arco-col arco-col-4\\\\\">\n      <div>col - 4</div>\n    </div>\n  </div>\n  <p>Space between</p>\n  <div class=\\\\\"arco-row arco-row-align-start arco-row-justify-space-between grid-demo\\\\\">\n    <div class=\\\\\"arco-col arco-col-4\\\\\">\n      <div>col - 4</div>\n    </div>\n    <div class=\\\\\"arco-col arco-col-4\\\\\">\n      <div>col - 4</div>\n    </div>\n    <div class=\\\\\"arco-col arco-col-4\\\\\">\n      <div>col - 4</div>\n    </div>\n    <div class=\\\\\"arco-col arco-col-4\\\\\">\n      <div>col - 4</div>\n    </div>\n  </div>\n</div>\"\n`;\n\nexports[`<grid> demo: render [grid] correctly 1`] = `\n\"<div style=\\\\\"margin-bottom: 20px;\\\\\"><span class=\\\\\"arco-typography\\\\\">折叠：<!----><!--v-if--><!--v-if--><!--v-if--></span><button type=\\\\\"button\\\\\" role=\\\\\"switch\\\\\" aria-checked=\\\\\"false\\\\\" class=\\\\\"arco-switch arco-switch-type-circle\\\\\" checked=\\\\\"false\\\\\"><span class=\\\\\"arco-switch-handle\\\\\"><span class=\\\\\"arco-switch-handle-icon\\\\\"></span></span><!--  prettier-ignore  -->\n    <!--v-if-->\n  </button></div>\n<div class=\\\\\"arco-grid grid-demo-grid\\\\\" style=\\\\\"gap: 16px 12px; grid-template-columns: repeat(3, minmax(0px, 1fr));\\\\\">\n  <div class=\\\\\"arco-grid-item demo-item\\\\\">item</div>\n  <div class=\\\\\"arco-grid-item demo-item\\\\\">item</div>\n  <div class=\\\\\"arco-grid-item demo-item\\\\\">item</div>\n  <div class=\\\\\"arco-grid-item demo-item\\\\\">item | offset - 1</div>\n  <div class=\\\\\"arco-grid-item demo-item\\\\\">item</div>\n  <div class=\\\\\"arco-grid-item demo-item\\\\\">item | span - 3</div>\n  <div class=\\\\\"arco-grid-item demo-item\\\\\">item</div>\n  <div class=\\\\\"arco-grid-item demo-item\\\\\">item</div>\n  <div class=\\\\\"arco-grid-item demo-item\\\\\"> suffix | overflow: false</div>\n</div>\"\n`;\n\nexports[`<grid> demo: render [grid-responsive] correctly 1`] = `\n\"<div class=\\\\\"arco-grid grid-demo-grid\\\\\" style=\\\\\"gap: 16px 12px; grid-template-columns: repeat(6, minmax(0px, 1fr));\\\\\">\n  <div class=\\\\\"arco-grid-item demo-item\\\\\">item</div>\n  <div class=\\\\\"arco-grid-item demo-item\\\\\">item</div>\n  <div class=\\\\\"arco-grid-item demo-item\\\\\">item</div>\n  <div class=\\\\\"arco-grid-item demo-item\\\\\">item</div>\n  <div class=\\\\\"arco-grid-item demo-item\\\\\">item</div>\n  <div class=\\\\\"arco-grid-item demo-item\\\\\">item</div>\n  <div class=\\\\\"arco-grid-item demo-item\\\\\"> suffix </div>\n</div>\"\n`;\n\nexports[`<grid> demo: render [gutter] correctly 1`] = `\n\"<div>\n  <p>Horizontal</p>\n  <div class=\\\\\"arco-row arco-row-align-start arco-row-justify-start grid-demo\\\\\" style=\\\\\"margin-left: -12px; margin-right: -12px;\\\\\">\n    <div class=\\\\\"arco-col arco-col-12\\\\\" style=\\\\\"padding-left: 12px; padding-right: 12px;\\\\\">\n      <div>col - 12</div>\n    </div>\n    <div class=\\\\\"arco-col arco-col-12\\\\\" style=\\\\\"padding-left: 12px; padding-right: 12px;\\\\\">\n      <div>col - 12</div>\n    </div>\n  </div>\n  <p>Responsive</p>\n  <div class=\\\\\"arco-row arco-row-align-start arco-row-justify-start grid-demo\\\\\" style=\\\\\"margin-left: -16px; margin-right: -16px;\\\\\">\n    <div class=\\\\\"arco-col arco-col-6\\\\\" style=\\\\\"padding-left: 16px; padding-right: 16px;\\\\\">\n      <div>col - 6</div>\n    </div>\n    <div class=\\\\\"arco-col arco-col-6\\\\\" style=\\\\\"padding-left: 16px; padding-right: 16px;\\\\\">\n      <div>col - 6</div>\n    </div>\n    <div class=\\\\\"arco-col arco-col-6\\\\\" style=\\\\\"padding-left: 16px; padding-right: 16px;\\\\\">\n      <div>col - 6</div>\n    </div>\n    <div class=\\\\\"arco-col arco-col-6\\\\\" style=\\\\\"padding-left: 16px; padding-right: 16px;\\\\\">\n      <div>col - 6</div>\n    </div>\n  </div>\n  <p>Horizontal and Vertical</p>\n  <div class=\\\\\"arco-row arco-row-align-start arco-row-justify-start grid-demo\\\\\" style=\\\\\"margin: -6px -12px -6px -12px;\\\\\">\n    <div class=\\\\\"arco-col arco-col-6\\\\\" style=\\\\\"padding: 6px 12px 6px 12px;\\\\\">\n      <div>col - 6</div>\n    </div>\n    <div class=\\\\\"arco-col arco-col-6\\\\\" style=\\\\\"padding: 6px 12px 6px 12px;\\\\\">\n      <div>col - 6</div>\n    </div>\n    <div class=\\\\\"arco-col arco-col-6\\\\\" style=\\\\\"padding: 6px 12px 6px 12px;\\\\\">\n      <div>col - 6</div>\n    </div>\n    <div class=\\\\\"arco-col arco-col-6\\\\\" style=\\\\\"padding: 6px 12px 6px 12px;\\\\\">\n      <div>col - 6</div>\n    </div>\n    <div class=\\\\\"arco-col arco-col-6\\\\\" style=\\\\\"padding: 6px 12px 6px 12px;\\\\\">\n      <div>col - 6</div>\n    </div>\n    <div class=\\\\\"arco-col arco-col-6\\\\\" style=\\\\\"padding: 6px 12px 6px 12px;\\\\\">\n      <div>col - 6</div>\n    </div>\n    <div class=\\\\\"arco-col arco-col-6\\\\\" style=\\\\\"padding: 6px 12px 6px 12px;\\\\\">\n      <div>col - 6</div>\n    </div>\n    <div class=\\\\\"arco-col arco-col-6\\\\\" style=\\\\\"padding: 6px 12px 6px 12px;\\\\\">\n      <div>col - 6</div>\n    </div>\n  </div>\n</div>\"\n`;\n\nexports[`<grid> demo: render [offset] correctly 1`] = `\n\"<div>\n  <div class=\\\\\"arco-row arco-row-align-start arco-row-justify-start grid-demo\\\\\" style=\\\\\"margin-bottom: 16px;\\\\\">\n    <div class=\\\\\"arco-col arco-col-8\\\\\">col - 8</div>\n    <div class=\\\\\"arco-col arco-col-8 arco-col-offset-8\\\\\"> col - 8 | offset - 8 </div>\n  </div>\n  <div class=\\\\\"arco-row arco-row-align-start arco-row-justify-start grid-demo\\\\\" style=\\\\\"margin-bottom: 16px;\\\\\">\n    <div class=\\\\\"arco-col arco-col-6 arco-col-offset-8\\\\\"> col - 6 | offset - 8 </div>\n    <div class=\\\\\"arco-col arco-col-6 arco-col-offset-4\\\\\"> col - 6 | offset - 4 </div>\n  </div>\n  <div class=\\\\\"arco-row arco-row-align-start arco-row-justify-start grid-demo\\\\\">\n    <div class=\\\\\"arco-col arco-col-12 arco-col-offset-8\\\\\"> col - 12 | offset - 8 </div>\n  </div>\n</div>\"\n`;\n\nexports[`<grid> demo: render [order] correctly 1`] = `\n\"<div>\n  <div class=\\\\\"arco-row arco-row-align-start arco-row-justify-start grid-demo\\\\\">\n    <div class=\\\\\"arco-col arco-col-order-4 arco-col-6\\\\\">\n      <div>1 col-order-4</div>\n    </div>\n    <div class=\\\\\"arco-col arco-col-order-3 arco-col-6\\\\\">\n      <div>2 col-order-3</div>\n    </div>\n    <div class=\\\\\"arco-col arco-col-order-2 arco-col-6\\\\\">\n      <div>3 col-order-2</div>\n    </div>\n    <div class=\\\\\"arco-col arco-col-order-1 arco-col-6\\\\\">\n      <div>4 col-order-1</div>\n    </div>\n  </div>\n</div>\"\n`;\n"
  },
  {
    "path": "packages/web-vue/components/grid/__test__/demo.test.ts",
    "content": "import demoTest from '../../../scripts/demo-test';\n\ndemoTest('grid');\n"
  },
  {
    "path": "packages/web-vue/components/grid/__test__/index.test.ts",
    "content": "import { mount } from '@vue/test-utils';\nimport Grid from '../index';\n\nconst { Row, Col } = Grid;\n\nconst _matchMedia = window.matchMedia;\ndescribe('Grid', () => {\n  beforeAll(() => {\n    Object.defineProperty(window, 'matchMedia', {\n      writable: true,\n      value: jest.fn().mockImplementation((query) => ({\n        matches: false,\n        media: query,\n        onchange: null,\n        addListener: jest.fn(), // Deprecated\n        removeListener: jest.fn(), // Deprecated\n        addEventListener: jest.fn(),\n        removeEventListener: jest.fn(),\n        dispatchEvent: jest.fn(),\n      })),\n    });\n  });\n\n  afterAll(() => {\n    window.matchMedia = _matchMedia;\n  });\n\n  test('Should render Col correctly', () => {\n    const wrapper = mount(Row, {\n      slots: {\n        default: [Col, Col, Col],\n      },\n    });\n    const cols = wrapper.findAll('.arco-col');\n    expect(cols).toHaveLength(3);\n  });\n\n  test('Should render text correctly', () => {\n    const wrapper = mount(Col, {\n      slots: {\n        default: `<div class='text'>abc</div>`,\n      },\n    });\n    const textElement = wrapper.find('.text');\n    expect(textElement.text()).toContain('abc');\n  });\n});\n"
  },
  {
    "path": "packages/web-vue/components/grid/context.ts",
    "content": "import { InjectionKey } from 'vue';\nimport { GridItemData } from './interface';\n\nexport type RowContextContext = Readonly<{\n  gutter?: [number, number];\n  div?: boolean;\n}>;\n\nexport const RowContextInjectionKey: InjectionKey<RowContextContext> = Symbol(\n  'RowContextInjectionKey'\n);\n\nexport type GridContext = Readonly<{\n  overflow: boolean;\n  displayIndexList: number[];\n  cols: number;\n  colGap: number;\n}>;\n\nexport const GridContextInjectionKey: InjectionKey<GridContext> = Symbol(\n  'GridContextInjectionKey'\n);\n\nexport type GridDataCollector = Readonly<{\n  collectItemData: (index: number, itemData: GridItemData) => void;\n  removeItemData: (index: number) => void;\n}>;\n\nexport const GridDataCollectorInjectionKey: InjectionKey<GridDataCollector> =\n  Symbol('GridDataCollectorInjectionKey');\n"
  },
  {
    "path": "packages/web-vue/components/grid/grid-col.vue",
    "content": "<template>\n  <div v-if=\"visible\" :class=\"classNames\" :style=\"styles\">\n    <slot />\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, inject, PropType } from 'vue';\nimport { isNumber, isObject, isString } from '../_utils/is';\nimport { getPrefixCls } from '../_utils/global-config';\nimport { FlexType } from './interface';\nimport { RowContextInjectionKey } from './context';\nimport { useResponsiveState } from './hook/use-responsive-state';\nimport { useResponsiveValue } from './hook/use-responsive-value';\nimport pick from '../_utils/pick';\nimport { responsiveArray } from '../_utils/responsive-observe';\n\nfunction getAllowableFlexValue(flexValue: FlexType | undefined) {\n  if (\n    (isString(flexValue) &&\n      (['initial', 'auto', 'none'].includes(flexValue) ||\n        /^\\d+$/.test(flexValue))) ||\n    isNumber(flexValue)\n  ) {\n    return flexValue;\n  }\n  if (isString(flexValue) && /^\\d+(px|em|rem|%)$/.test(flexValue)) {\n    return `0 0 ${flexValue}`;\n  }\n  return undefined;\n}\n\nexport default defineComponent({\n  name: 'Col',\n  props: {\n    /**\n     * @zh 栅格占位格数\n     * @en Number of grid space\n     */\n    span: {\n      type: Number,\n      default: 24,\n    },\n    /**\n     * @zh 栅格左侧的间隔格数，间隔内不可以有栅格\n     * @en The number of grids on the left side of the grid. There can be no grids in the grid.\n     */\n    offset: {\n      type: Number,\n    },\n    /**\n     * @zh 对元素进行排序\n     * @en Sort elements\n     */\n    order: {\n      type: Number,\n    },\n    /**\n     * @zh < 576px 响应式栅格\n     * @en <576px responsive grid\n     */\n    xs: {\n      type: [Number, Object] as PropType<number | { [key: string]: any }>,\n    },\n    /**\n     * @zh >= 576px 响应式栅格\n     * @en >= 576px responsive grid\n     */\n    sm: {\n      type: [Number, Object] as PropType<number | { [key: string]: any }>,\n    },\n    /**\n     * @zh >= 768px 响应式栅格\n     * @en >= 768px responsive grid\n     */\n    md: {\n      type: [Number, Object] as PropType<number | { [key: string]: any }>,\n    },\n    /**\n     * @zh >= 992px 响应式栅格\n     * @en >= 992px responsive grid\n     */\n    lg: {\n      type: [Number, Object] as PropType<number | { [key: string]: any }>,\n    },\n    /**\n     * @zh >= 1200px 响应式栅格\n     * @en >= 1200px responsive grid\n     */\n    xl: {\n      type: [Number, Object] as PropType<number | { [key: string]: any }>,\n    },\n    /**\n     * @zh >= 1600px 响应式栅格\n     * @en >= 1600px responsive grid\n     */\n    xxl: {\n      type: [Number, Object] as PropType<number | { [key: string]: any }>,\n    },\n    /**\n     * @zh 设置 flex 布局属性\n     * @en Set flex layout properties\n     * @version 2.10.0\n     */\n    flex: {\n      type: [Number, String] as PropType<\n        number | string | 'initial' | 'auto' | 'none'\n      >,\n    },\n  },\n  setup(props) {\n    const prefixCls = getPrefixCls('col');\n    const rowContext = inject(RowContextInjectionKey, {});\n    const flexValue = computed(() => getAllowableFlexValue(props.flex));\n    const mergeClassName = computed(() => {\n      const { div } = rowContext;\n      const { span, offset, order, xs, sm, md, lg, xl, xxl } = props;\n      const result = {\n        [`${prefixCls}`]: !div,\n        [`${prefixCls}-order-${order}`]: order,\n        [`${prefixCls}-${span}`]:\n          !div && !xs && !sm && !md && !lg && !xl && !xxl,\n        [`${prefixCls}-offset-${offset}`]: offset && offset > 0,\n      };\n\n      const screenList: {\n        [key: string]: number | { [key: string]: any } | undefined;\n      } = { xs, sm, md, lg, xl, xxl };\n\n      Object.keys(screenList).forEach((screen) => {\n        const screenValue = screenList[screen];\n        if (screenValue && isNumber(screenValue)) {\n          result[`${prefixCls}-${screen}-${screenValue}`] = true;\n        } else if (screenValue && isObject(screenValue)) {\n          result[`${prefixCls}-${screen}-${screenValue.span}`] =\n            screenValue.span;\n          result[`${prefixCls}-${screen}-offset-${screenValue.offset}`] =\n            screenValue.offset;\n          result[`${prefixCls}-${screen}-order-${screenValue.order}`] =\n            screenValue.order;\n        }\n      });\n\n      return result;\n    });\n    const classNames = computed(() => {\n      return flexValue.value ? prefixCls : mergeClassName.value;\n    });\n    const paddingStyles = computed(() => {\n      const { gutter, div } = rowContext;\n      const result: {\n        paddingLeft?: string;\n        paddingRight?: string;\n        paddingTop?: string;\n        paddingBottom?: string;\n      } = {};\n      if (Array.isArray(gutter) && !div) {\n        const paddingHorizontal = (gutter[0] && gutter[0] / 2) || 0;\n        const paddingVertical = (gutter[1] && gutter[1] / 2) || 0;\n        if (paddingHorizontal) {\n          result.paddingLeft = `${paddingHorizontal}px`;\n          result.paddingRight = `${paddingHorizontal}px`;\n        }\n        if (paddingVertical) {\n          result.paddingTop = `${paddingVertical}px`;\n          result.paddingBottom = `${paddingVertical}px`;\n        }\n      }\n\n      return result;\n    });\n    const flexStyles = computed<{ flex?: FlexType }>(() =>\n      flexValue.value ? { flex: flexValue.value } : {}\n    );\n\n    const responsiveConfig = computed(() => pick(props, responsiveArray));\n    const propSpan = useResponsiveValue(\n      computed(() => ({\n        val: props.span,\n        key: 'span',\n        ...responsiveConfig.value,\n      }))\n    );\n    const span = useResponsiveState(propSpan, 24, true);\n\n    return {\n      visible: computed(() => !!span.value),\n      classNames,\n      styles: computed(() => ({ ...paddingStyles.value, ...flexStyles.value })),\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/grid/grid-item.vue",
    "content": "<template>\n  <div ref=\"domRef\" :class=\"classNames\" :style=\"style\">\n    <slot :overflow=\"overflow\" />\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport {\n  defineComponent,\n  onUnmounted,\n  ref,\n  inject,\n  watchEffect,\n  computed,\n  PropType,\n  toRefs,\n} from 'vue';\nimport { useIndex } from '../_hooks/use-index';\nimport { getPrefixCls } from '../_utils/global-config';\nimport {\n  GridContextInjectionKey,\n  GridDataCollectorInjectionKey,\n} from './context';\nimport { useResponsiveState } from './hook/use-responsive-state';\nimport { ResponsiveValue } from './interface';\nimport { resolveItemData } from './utils';\n\n/**\n * @version 2.15.0\n * @zh 响应式配置从 `2.18.0` 开始支持，具体配置 [ResponsiveValue](#responsivevalue)\n * @en Responsive configuration has been supported since `2.18.0`, the specific configuration [ResponsiveValue](#responsivevalue)\n */\nexport default defineComponent({\n  name: 'GridItem',\n  props: {\n    /**\n     * @zh 跨越的格数\n     * @en Number of grids spanned\n     */\n    span: {\n      type: [Number, Object] as PropType<number | ResponsiveValue>,\n      default: 1,\n    },\n    /**\n     * @zh 左侧的间隔格数\n     * @en Number of grids on the left\n     */\n    offset: {\n      type: [Number, Object] as PropType<number | ResponsiveValue>,\n      default: 0,\n    },\n    /**\n     * @zh 是否是后缀元素\n     * @en Is it a suffix element\n     */\n    suffix: {\n      type: Boolean,\n      default: false,\n    },\n  },\n  setup(props) {\n    const prefixCls = getPrefixCls('grid-item');\n    const domRef = ref<HTMLDivElement>();\n    const { computedIndex } = useIndex({\n      itemRef: domRef,\n      selector: `.${prefixCls}`,\n    });\n    const gridContext = inject(GridContextInjectionKey, {\n      overflow: false,\n      displayIndexList: [],\n      cols: 24,\n      colGap: 0,\n    });\n    const gridDataCollector = inject(GridDataCollectorInjectionKey);\n    const visible = computed(() =>\n      gridContext?.displayIndexList?.includes(computedIndex.value)\n    );\n    const { span: propSpan, offset: propOffset } = toRefs(props);\n    const rSpan = useResponsiveState(propSpan, 1);\n    const rOffset = useResponsiveState(propOffset, 0);\n    const itemData = computed(() =>\n      resolveItemData(gridContext.cols, {\n        ...props,\n        span: rSpan.value,\n        offset: rOffset.value,\n      })\n    );\n\n    const classNames = computed(() => [prefixCls]);\n    const offsetStyle = computed(() => {\n      const { offset, span } = itemData.value;\n      const { colGap } = gridContext;\n      if (offset > 0) {\n        const oneSpan = `(100% - ${colGap * (span - 1)}px) / ${span}`;\n        return {\n          'margin-left': `calc((${oneSpan} * ${offset}) + ${\n            colGap * offset\n          }px)`,\n        };\n      }\n      return {};\n    });\n    const columnStart = computed(() => {\n      const { suffix, span } = itemData.value;\n      const { cols } = gridContext;\n      if (suffix) {\n        return `${cols - span + 1}`;\n      }\n      return `span ${span}`;\n    });\n    const style = computed(() => {\n      const { span } = itemData.value;\n      if (domRef.value) {\n        return [\n          {\n            'grid-column': `${columnStart.value} / span ${span}`,\n          },\n          offsetStyle.value,\n          !visible.value || span === 0 ? { display: 'none' } : {},\n        ];\n      }\n      return [];\n    });\n\n    watchEffect(() => {\n      if (computedIndex.value !== -1) {\n        gridDataCollector?.collectItemData(computedIndex.value, itemData.value);\n      }\n    });\n\n    onUnmounted(() => {\n      if (computedIndex.value !== -1) {\n        gridDataCollector?.removeItemData(computedIndex.value);\n      }\n    });\n\n    return {\n      classNames,\n      style,\n      domRef,\n      overflow: computed(() => gridContext.overflow),\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/grid/grid-row.vue",
    "content": "<template>\n  <div :class=\"classNames\" :style=\"styles\">\n    <slot />\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  PropType,\n  provide,\n  reactive,\n  toRefs,\n} from 'vue';\nimport { getPrefixCls } from '../_utils/global-config';\nimport { RowContextInjectionKey } from './context';\nimport { useResponsiveState } from './hook/use-responsive-state';\nimport { ResponsiveValue } from './interface';\n\nexport default defineComponent({\n  name: 'Row',\n  props: {\n    /**\n     * @zh 栅格间隔，单位是`px` 栅格间隔。可传入响应式对象写法 { xs: 4, sm: 6, md: 12}，传入数组 [ 水平间距， 垂直间距 ] 来设置两个方向。\n     * @en Grid interval in `px`. Pass in the responsive object like {xs: 4, sm: 6, md: 12}. Pass in the array [horizontal spacing, vertical spacing] to set two directions.\n     */\n    gutter: {\n      type: [Number, Object, Array] as PropType<\n        | number\n        | ResponsiveValue\n        | [number | ResponsiveValue, number | ResponsiveValue]\n      >,\n      default: 0,\n    },\n    /**\n     * @zh 水平对齐方式 (`justify-content`)\n     * @en Horizontal alignment (`justify-content`)\n     */\n    justify: {\n      type: String as PropType<\n        'start' | 'center' | 'end' | 'space-around' | 'space-between'\n      >,\n      default: 'start',\n    },\n    /**\n     * @zh 竖直对齐方式 ( `align-items` )\n     * @en Vertical alignment (`align-items`)\n     */\n    align: {\n      type: String as PropType<'start' | 'center' | 'end' | 'stretch'>,\n      default: 'start',\n    },\n    /**\n     * @zh 开启这个选项`Row`和`Col`都会被当作div而不会附带任何Grid相关的类和样式\n     * @en Enabling this option `Row` and `Col` will be treated as divs without any Grid-related classes and styles\n     */\n    div: {\n      type: Boolean,\n    },\n    /**\n     * @zh `Col` 是否支持换行\n     * @en Whether `Col` can wrap onto multiple lines\n     * @version 2.13.0\n     */\n    wrap: {\n      type: Boolean,\n      default: true,\n    },\n  },\n  setup(props) {\n    const { gutter, align, justify, div, wrap } = toRefs(props);\n    const prefixCls = getPrefixCls('row');\n    const classNames = computed(() => {\n      return {\n        [`${prefixCls}`]: !div.value,\n        [`${prefixCls}-nowrap`]: !wrap.value,\n        [`${prefixCls}-align-${align.value}`]: align.value,\n        [`${prefixCls}-justify-${justify.value}`]: justify.value,\n      };\n    });\n    const propGutterHorizontal = computed(() =>\n      Array.isArray(gutter.value) ? gutter.value[0] : gutter.value\n    );\n    const propGutterVertical = computed(() =>\n      Array.isArray(gutter.value) ? gutter.value[1] : 0\n    );\n    const gutterHorizontal = useResponsiveState(propGutterHorizontal, 0);\n    const gutterVertical = useResponsiveState(propGutterVertical, 0);\n    const styles = computed(() => {\n      const result: {\n        marginTop?: string;\n        marginBottom?: string;\n        marginLeft?: string;\n        marginRight?: string;\n      } = {};\n      if ((gutterHorizontal.value || gutterVertical.value) && !div.value) {\n        const marginHorizontal = -gutterHorizontal.value / 2;\n        const marginVertical = -gutterVertical.value / 2;\n        if (marginHorizontal) {\n          result.marginLeft = `${marginHorizontal}px`;\n          result.marginRight = `${marginHorizontal}px`;\n        }\n        if (marginVertical) {\n          result.marginTop = `${marginVertical}px`;\n          result.marginBottom = `${marginVertical}px`;\n        }\n      }\n\n      return result;\n    });\n\n    const resultGutter = computed<[number, number]>(() => [\n      gutterHorizontal.value,\n      gutterVertical.value,\n    ]);\n    provide(\n      RowContextInjectionKey,\n      reactive({\n        gutter: resultGutter,\n        div,\n      })\n    );\n\n    return {\n      classNames,\n      styles,\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/grid/grid.vue",
    "content": "<template>\n  <div :class=\"classNames\" :style=\"style\">\n    <slot />\n  </div>\n</template>\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  toRefs,\n  provide,\n  reactive,\n  watchEffect,\n  PropType,\n} from 'vue';\nimport { getPrefixCls } from '../_utils/global-config';\nimport {\n  GridContextInjectionKey,\n  GridDataCollectorInjectionKey,\n} from './context';\nimport { useResponsiveState } from './hook/use-responsive-state';\nimport { GridItemData, GridProps, ResponsiveValue } from './interface';\nimport { setItemVisible } from './utils';\n\n/**\n * @version 2.15.0\n * @zh 响应式配置从 `2.18.0` 开始支持，具体配置 [ResponsiveValue](#responsivevalue)\n * @en Responsive configuration has been supported since `2.18.0`, the specific configuration [ResponsiveValue](#responsivevalue)\n */\nexport default defineComponent({\n  name: 'Grid',\n  props: {\n    /**\n     * @zh 每一行展示的列数\n     * @en Number of columns displayed in each row\n     */\n    cols: {\n      type: [Number, Object] as PropType<number | ResponsiveValue>,\n      default: 24,\n    },\n    /**\n     * @zh 行与行之间的间距\n     * @en The space in row-to-row\n     */\n    rowGap: {\n      type: [Number, Object] as PropType<number | ResponsiveValue>,\n      default: 0,\n    },\n    /**\n     * @zh 列与列之间的间距\n     * @en The space in column-to-column\n     */\n    colGap: {\n      type: [Number, Object] as PropType<number | ResponsiveValue>,\n      default: 0,\n    },\n    /**\n     * @zh 是否折叠\n     * @en Whether to collapsed\n     */\n    collapsed: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 折叠时显示的行数\n     * @en Number of rows displayed when collapsed\n     */\n    collapsedRows: {\n      type: Number,\n      default: 1,\n    },\n  },\n  setup(props) {\n    const {\n      cols: propCols,\n      rowGap: propRowGap,\n      colGap: propColGap,\n      collapsedRows,\n      collapsed,\n    } = toRefs(props);\n    const cols = useResponsiveState(propCols, 24);\n    const colGap = useResponsiveState(propColGap, 0);\n    const rowGap = useResponsiveState(propRowGap, 0);\n    const prefixCls = getPrefixCls('grid');\n    const classNames = computed(() => [prefixCls]);\n    const style = computed(() => [\n      {\n        'gap': `${rowGap.value}px ${colGap.value}px`,\n        'grid-template-columns': `repeat(${cols.value}, minmax(0px, 1fr))`,\n      },\n    ]);\n    const itemDataMap = reactive<Map<number, GridItemData>>(new Map());\n    const itemDataList = computed(() => {\n      const list: GridItemData[] = [];\n      for (const [index, itemData] of itemDataMap.entries()) {\n        list[index] = itemData;\n      }\n      return list;\n    });\n    const gridContext = reactive<{\n      overflow: boolean;\n      displayIndexList: number[];\n      cols: number;\n      colGap: number;\n    }>({\n      overflow: false,\n      displayIndexList: [],\n      cols: cols.value,\n      colGap: colGap.value,\n    });\n\n    watchEffect(() => {\n      gridContext.cols = cols.value;\n      gridContext.colGap = colGap.value;\n    });\n    watchEffect(() => {\n      const displayInfo = setItemVisible({\n        cols: cols.value,\n        collapsed: collapsed.value,\n        collapsedRows: collapsedRows.value,\n        itemDataList: itemDataList.value,\n      });\n      gridContext.overflow = displayInfo.overflow;\n      gridContext.displayIndexList = displayInfo.displayIndexList;\n    });\n\n    provide(GridContextInjectionKey, gridContext);\n    provide(GridDataCollectorInjectionKey, {\n      collectItemData(index, itemData) {\n        itemDataMap.set(index, itemData);\n      },\n      removeItemData(index) {\n        itemDataMap.delete(index);\n      },\n    });\n\n    return {\n      classNames,\n      style,\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/grid/hook/use-responsive-state.ts",
    "content": "import { ref, computed, Ref, onUnmounted, onMounted } from 'vue';\nimport { isObject } from '../../_utils/is';\nimport ResponsiveObserve, {\n  responsiveArray,\n  ScreenMap,\n} from '../../_utils/responsive-observe';\nimport { ResponsiveValue } from '../interface';\n\nfunction isResponsiveValue(\n  val: number | ResponsiveValue\n): val is ResponsiveValue {\n  return isObject(val);\n}\n\nexport function useResponsiveState(\n  val: Ref<number | ResponsiveValue>,\n  defaultVal: number,\n  fallbackToXs = false\n) {\n  const screens = ref<ScreenMap>({\n    xs: true,\n    sm: true,\n    md: true,\n    lg: true,\n    xl: true,\n    xxl: true,\n  });\n  const result = computed(() => {\n    let res = defaultVal;\n    if (isResponsiveValue(val.value)) {\n      for (let i = 0; i < responsiveArray.length; i++) {\n        const breakpoint = responsiveArray[i];\n        if (\n          (screens.value[breakpoint] ||\n            (breakpoint === 'xs' && fallbackToXs)) &&\n          val.value[breakpoint] !== undefined\n        ) {\n          res = val.value[breakpoint] as number;\n          break;\n        }\n      }\n    } else {\n      res = val.value;\n    }\n    return res;\n  });\n\n  let subscribeToken = '';\n\n  onMounted(() => {\n    subscribeToken = ResponsiveObserve.subscribe((screensVal) => {\n      if (isResponsiveValue(val.value)) {\n        screens.value = screensVal;\n      }\n    });\n  });\n\n  onUnmounted(() => {\n    if (subscribeToken) {\n      ResponsiveObserve.unsubscribe(subscribeToken);\n    }\n  });\n\n  return result;\n}\n"
  },
  {
    "path": "packages/web-vue/components/grid/hook/use-responsive-value.ts",
    "content": "import { computed, Ref } from 'vue';\nimport { isNumber, isObject } from '../../_utils/is';\nimport { responsiveArray } from '../../_utils/responsive-observe';\nimport { ResponsiveValue } from '../interface';\n\nexport function useResponsiveValue(\n  props: Ref<{\n    val: number;\n    key: string;\n    xs?: number | { [key: string]: any };\n    sm?: number | { [key: string]: any };\n    md?: number | { [key: string]: any };\n    lg?: number | { [key: string]: any };\n    xl?: number | { [key: string]: any };\n    xxl?: number | { [key: string]: any };\n  }>\n) {\n  const value = computed(() => {\n    const { val, key, xs, sm, md, lg, xl, xxl } = props.value;\n    if (!xs && !sm && !md && !lg && !xl && !xxl) {\n      return val;\n    }\n    const result: ResponsiveValue = {};\n    responsiveArray.forEach((breakpoint) => {\n      const config = props.value[breakpoint];\n      if (isNumber(config)) {\n        result[breakpoint] = config;\n      } else if (isObject(config) && isNumber(config[key])) {\n        result[breakpoint] = config[key];\n      }\n    });\n    return result;\n  });\n  return value;\n}\n"
  },
  {
    "path": "packages/web-vue/components/grid/index.ts",
    "content": "import type { App } from 'vue';\nimport type { ArcoOptions } from '../_utils/types';\nimport { setGlobalConfig, getComponentPrefix } from '../_utils/global-config';\nimport _GridRow from './grid-row.vue';\nimport _GridCol from './grid-col.vue';\nimport _Grid from './grid.vue';\nimport _GridItem from './grid-item.vue';\n\nconst Grid = Object.assign(_Grid, {\n  Row: _GridRow,\n  Col: _GridCol,\n  Item: _GridItem,\n  install: (app: App, options?: ArcoOptions) => {\n    setGlobalConfig(app, options);\n    const componentPrefix = getComponentPrefix(options);\n\n    app.component(componentPrefix + _GridRow.name, _GridRow);\n    app.component(componentPrefix + _GridCol.name, _GridCol);\n    app.component(componentPrefix + _Grid.name, _Grid);\n    app.component(componentPrefix + _GridItem.name, _GridItem);\n  },\n});\n\nexport type GridRowInstance = InstanceType<typeof _GridRow>;\nexport type GridColInstance = InstanceType<typeof _GridCol>;\nexport type GridInstance = InstanceType<typeof _Grid>;\nexport type GridItemInstance = InstanceType<typeof _GridItem>;\n\nexport type {\n  ResponsiveValue,\n  RowProps,\n  ColProps,\n  GridProps,\n  GridItemProps,\n} from './interface';\n\nexport { _GridRow as Row, _GridCol as Col, _GridItem as GridItem };\nexport default Grid;\n"
  },
  {
    "path": "packages/web-vue/components/grid/interface.ts",
    "content": "export interface ResponsiveValue {\n  /**\n   * @zh >= 1600px 响应式配置\n   * @en >= 1600px responsive configuration\n   */\n  xxl?: number;\n  /**\n   * @zh >= 1200px 响应式配置\n   * @en >= 1200px responsive configuration\n   */\n  xl?: number;\n  /**\n   * @zh >= 992px 响应式配置\n   * @en >= 992px responsive configuration\n   */\n  lg?: number;\n  /**\n   * @zh >= 768px 响应式配置\n   * @en >= 768px responsive configuration\n   */\n  md?: number;\n  /**\n   * @zh >= 576px 响应式配置\n   * @en >= 576px responsive configuration\n   */\n  sm?: number;\n  /**\n   * @zh < 576px 响应式配置\n   * @en <576px responsive configuration\n   */\n  xs?: number;\n}\n\nexport type FlexType = number | string | 'initial' | 'auto' | 'none';\n\nexport interface RowProps {\n  gutter?: number | ResponsiveValue | ResponsiveValue[];\n  justify?: 'start' | 'center' | 'end' | 'space-around' | 'space-between';\n  align?: 'start' | 'center' | 'end' | 'stretch';\n  div?: boolean;\n  wrap?: boolean;\n}\n\nexport interface ColProps {\n  span?: number;\n  offset?: number | undefined;\n  order?: number | undefined;\n  xs?: number | { [key: string]: any } | undefined;\n  sm?: number | { [key: string]: any } | undefined;\n  md?: number | { [key: string]: any } | undefined;\n  lg?: number | { [key: string]: any } | undefined;\n  xl?: number | { [key: string]: any } | undefined;\n  xxl?: number | { [key: string]: any } | undefined;\n  flex?: number | string | 'initial' | 'auto' | 'none' | undefined;\n}\n\nexport interface GridProps {\n  cols?: number | ResponsiveValue;\n  rowGap?: number | ResponsiveValue;\n  colGap?: number | ResponsiveValue;\n  collapsed?: boolean;\n  collapsedRows?: number;\n}\n\nexport interface GridItemProps {\n  span?: number | ResponsiveValue;\n  offset?: number | ResponsiveValue;\n  suffix?: boolean;\n}\n\nexport interface GridItemData extends GridItemProps {\n  span: number;\n  offset: number;\n}\n"
  },
  {
    "path": "packages/web-vue/components/grid/style/col.less",
    "content": "@import '../../style/theme/index.less';\n\n@col-prefix-cls: ~'@{prefix}-col';\n\n.@{col-prefix-cls} {\n  box-sizing: border-box;\n\n  .span(@span, @adaptation) when (@span > 0) and (@adaptation = '') {\n    .span((@span - 1), @adaptation);\n\n    &-@{span} {\n      flex: 0 0 (100% / 24) * @span;\n      width: (100% / 24) * @span;\n    }\n  }\n  .span(@span, @adaptation) when (@span > 0) and (not(@adaptation = '')) {\n    .span((@span - 1), @adaptation);\n\n    &-@{adaptation}-@{span} {\n      flex: 0 0 (100% / 24) * @span;\n      width: (100% / 24) * @span;\n    }\n  }\n\n  .span(24, '');\n\n  .offset(@offset, @adaptation) when (@offset > 0) and (@adaptation = '') {\n    .offset((@offset - 1), @adaptation);\n\n    &-offset-@{offset} {\n      margin-left: (100% / 24) * @offset;\n    }\n  }\n  .offset(@offset, @adaptation) when (@offset > 0) and (not(@adaptation = '')) {\n    .offset((@offset - 1), @adaptation);\n\n    &-@{adaptation}-offset-@{offset} {\n      margin-left: (100% / 24) * @offset;\n    }\n  }\n\n  .offset(23, '');\n\n  .order(@order, @adaptation) when (@order > 0) and (@adaptation = '') {\n    .order((@order - 1), @adaptation);\n\n    &-order-@{order} {\n      order: @order;\n    }\n  }\n  .order(@order, @adaptation) when (@order > 0) and (not(@adaptation = '')) {\n    .order((@order - 1), @adaptation);\n\n    &-@{adaptation}-order-@{order} {\n      order: @order;\n    }\n  }\n\n  .order(24, '');\n\n  // adaptation\n  .span(24, xs);\n  .offset(23, xs);\n  .order(24, xs);\n\n  @media (min-width: 576px) {\n    .span(24, sm);\n    .offset(23, sm);\n    .order(24, sm);\n  }\n\n  @media (min-width: 768px) {\n    .span(24, md);\n    .offset(23, md);\n    .order(24, md);\n  }\n\n  @media (min-width: 992px) {\n    .span(24, lg);\n    .offset(23, lg);\n    .order(24, lg);\n  }\n\n  @media (min-width: 1200px) {\n    .span(24, xl);\n    .offset(23, xl);\n    .order(24, xl);\n  }\n\n  @media (min-width: 1600px) {\n    .span(24, xxl);\n    .offset(23, xxl);\n    .order(24, xxl);\n  }\n}\n"
  },
  {
    "path": "packages/web-vue/components/grid/style/grid.less",
    "content": "@grid-prefix-cls: ~'@{prefix}-grid';\n\n.@{grid-prefix-cls} {\n  display: grid;\n}\n"
  },
  {
    "path": "packages/web-vue/components/grid/style/index.less",
    "content": "@import './row.less';\n@import './col.less';\n@import './grid.less';\n"
  },
  {
    "path": "packages/web-vue/components/grid/style/index.ts",
    "content": "import '../../style/index.less';\nimport './index.less';\n"
  },
  {
    "path": "packages/web-vue/components/grid/style/row.less",
    "content": "@import '../../style/theme/index.less';\n\n@row-prefix-cls: ~'@{prefix}-row';\n\n.@{row-prefix-cls} {\n  display: flex;\n  flex-flow: row wrap;\n\n  &-nowrap {\n    flex-wrap: nowrap;\n  }\n\n  &-align-start {\n    align-items: flex-start;\n  }\n\n  &-align-center {\n    align-items: center;\n  }\n\n  &-align-end {\n    align-items: flex-end;\n  }\n\n  &-justify-start {\n    justify-content: flex-start;\n  }\n\n  &-justify-center {\n    justify-content: center;\n  }\n\n  &-justify-end {\n    justify-content: flex-end;\n  }\n\n  &-justify-space-around {\n    justify-content: space-around;\n  }\n\n  &-justify-space-between {\n    justify-content: space-between;\n  }\n}\n"
  },
  {
    "path": "packages/web-vue/components/grid/utils/index.ts",
    "content": "import { GridItemData } from '../interface';\n\nexport function resolveItemData(\n  cols: number,\n  props: GridItemData\n): GridItemData {\n  const originSpan = props.span ?? 1;\n  const originOffset = props.offset ?? 0;\n  const offset = Math.min(originOffset, cols);\n  const span = Math.min(\n    offset > 0 ? originSpan + originOffset : originSpan,\n    cols\n  );\n  return {\n    span,\n    offset,\n    suffix: 'suffix' in props ? props.suffix !== false : false,\n  };\n}\n\nexport function setItemVisible({\n  cols,\n  collapsed,\n  collapsedRows,\n  itemDataList,\n}: {\n  cols: number;\n  collapsed: boolean;\n  collapsedRows: number;\n  itemDataList: GridItemData[];\n}) {\n  let overflow = false;\n  let displayIndexList: number[] = [];\n\n  function isOverflow(span: number) {\n    return Math.ceil(span / cols) > collapsedRows;\n  }\n\n  if (collapsed) {\n    let spanSum = 0;\n\n    for (let i = 0; i < itemDataList.length; i++) {\n      if (itemDataList[i].suffix) {\n        spanSum += itemDataList[i].span;\n        displayIndexList.push(i);\n      }\n    }\n\n    if (!isOverflow(spanSum)) {\n      let current = 0;\n      while (current < itemDataList.length) {\n        const item = itemDataList[current];\n\n        if (!item.suffix) {\n          spanSum += item.span;\n\n          if (isOverflow(spanSum)) {\n            break;\n          }\n\n          displayIndexList.push(current);\n        }\n\n        current++;\n      }\n    }\n\n    overflow = itemDataList.some(\n      (item, index) => !item.suffix && !displayIndexList.includes(index)\n    );\n  } else {\n    displayIndexList = itemDataList.map((_, index) => index);\n  }\n\n  return {\n    overflow,\n    displayIndexList,\n  };\n}\n"
  },
  {
    "path": "packages/web-vue/components/icon-component/CHANGELOG.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.41.1\n\n`2023-01-06`\n\n### 💎 Enhancement\n\n- Optimize the `click` event of the component, and perform encapsulation and transparent transmission in the component ([#2030](https://github.com/arco-design/arco-design-vue/pull/2030))\n\n\n## 2.38.1\n\n`2022-11-04`\n\n### 💎 Enhancement\n\n- Replace the flying book icon ([#1835](https://github.com/arco-design/arco-design-vue/pull/1835))\n\n\n## 2.35.0\n\n`2022-08-12`\n\n### 🆕 Feature\n\n- support rotate prop ([#1490](https://github.com/arco-design/arco-design-vue/pull/1490))\n- Icon list supports type filtering and name search ([#1490](https://github.com/arco-design/arco-design-vue/pull/1490))\n\n\n## 2.25.0\n\n`2022-04-22`\n\n### 🆕 Feature\n\n- Added `attachment`, `archive`, `calendar-clock`, `palette`, `launch` icons ([#1017](https://github.com/arco-design/arco-design-vue/pull/1017))\n\n### 🐛 BugFix\n\n- Fixed `link`, `image-close`, `lock`, `unlock`, `sync` icons ([#1017](https://github.com/arco-design/arco-design-vue/pull/1017))\n\n"
  },
  {
    "path": "packages/web-vue/components/icon-component/CHANGELOG.zh-CN.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.41.1\n\n`2023-01-06`\n\n### 💎 功能优化\n\n- 优化组件 `click` 事件，在组件中进行封装透传 ([#2030](https://github.com/arco-design/arco-design-vue/pull/2030))\n\n\n## 2.38.1\n\n`2022-11-04`\n\n### 💎 功能优化\n\n- 替换飞书图标 ([#1835](https://github.com/arco-design/arco-design-vue/pull/1835))\n\n\n## 2.35.0\n\n`2022-08-12`\n\n### 🆕 新增功能\n\n- 支持旋转属性 ([#1490](https://github.com/arco-design/arco-design-vue/pull/1490))\n- 图标列表支持类型筛选和名称搜索 ([#1490](https://github.com/arco-design/arco-design-vue/pull/1490))\n\n\n## 2.25.0\n\n`2022-04-22`\n\n### 🆕 新增功能\n\n- 增加 `attachment`, `archive`, `calendar-clock`, `palette`, `launch` 图标 ([#1017](https://github.com/arco-design/arco-design-vue/pull/1017))\n\n### 🐛 问题修复\n\n- 修正 `link`, `image-close`,`lock`, `unlock`,`sync` 图标 ([#1017](https://github.com/arco-design/arco-design-vue/pull/1017))\n\n"
  },
  {
    "path": "packages/web-vue/components/icon-component/add-from-icon-font-cn.tsx",
    "content": "import { defineComponent } from 'vue';\nimport { isServerRendering } from '../_utils/dom';\nimport Icon from './icon.vue';\n\nconst scriptUrlCache: string[] = [];\n\nexport interface IconFontOptions {\n  src?: string;\n  extraProps?: { [key: string]: any };\n}\n\nexport const addFromIconFontCn = (options: IconFontOptions) => {\n  const { src, extraProps = {} } = options;\n\n  if (!isServerRendering && src?.length && !scriptUrlCache.includes(src)) {\n    const script = document.createElement('script');\n    script.setAttribute('src', src);\n    script.setAttribute('data-namespace', src);\n    scriptUrlCache.push(src);\n    document.body.appendChild(script);\n  }\n\n  return defineComponent({\n    name: 'IconFont',\n    props: {\n      type: String,\n      size: [Number, String],\n      rotate: Number,\n      spin: Boolean,\n    },\n    setup(props, { slots }) {\n      return () => {\n        const children = props.type ? (\n          <use xlinkHref={`#${props.type}`} />\n        ) : (\n          slots.default?.()\n        );\n\n        return (\n          <Icon {...props} {...extraProps}>\n            {children}\n          </Icon>\n        );\n      };\n    },\n  });\n};\n"
  },
  {
    "path": "packages/web-vue/components/icon-component/icon.vue",
    "content": "<template>\n  <svg :class=\"cls\" :style=\"innerStyle\" fill=\"currentColor\">\n    <slot />\n  </svg>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, CSSProperties } from 'vue';\nimport { getPrefixCls } from '../_utils/global-config';\nimport { isNumber } from '../_utils/is';\n\nexport default defineComponent({\n  name: 'Icon',\n  props: {\n    type: String,\n    size: [Number, String],\n    rotate: Number,\n    spin: Boolean,\n  },\n  setup(props) {\n    const prefixCls = getPrefixCls('icon');\n\n    const innerStyle = computed(() => {\n      const styles: CSSProperties = {};\n      if (props.size) {\n        styles.fontSize = isNumber(props.size) ? `${props.size}px` : props.size;\n      }\n      if (props.rotate) {\n        styles.transform = `rotate(${props.rotate}deg)`;\n      }\n      return styles;\n    });\n\n    const cls = computed(() => [\n      prefixCls,\n      {\n        [`${prefixCls}-loading`]: props.spin,\n      },\n      props.type,\n    ]);\n\n    return {\n      cls,\n      innerStyle,\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/icon-component/index.ts",
    "content": "import type { App } from 'vue';\nimport type { ArcoOptions } from '../_utils/types';\nimport { setGlobalConfig, getComponentPrefix } from '../_utils/global-config';\nimport _Icon from './icon.vue';\nimport { addFromIconFontCn } from './add-from-icon-font-cn';\n\nconst Icon = Object.assign(_Icon, {\n  addFromIconFontCn,\n  install: (app: App, options?: ArcoOptions) => {\n    setGlobalConfig(app, options);\n    const componentPrefix = getComponentPrefix(options);\n\n    app.component(componentPrefix + _Icon.name, _Icon);\n  },\n});\n\nexport type IconInstance = InstanceType<typeof _Icon>;\nexport type IconProps = IconInstance['$props'];\n\nexport default Icon;\n"
  },
  {
    "path": "packages/web-vue/components/icon-component/style/index.ts",
    "content": "export {}\n"
  },
  {
    "path": "packages/web-vue/components/image/CHANGELOG.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.56.3\n\n`2024-10-25`\n\n\n## 2.54.3\n\n`2024-01-19`\n\n### 🐛 BugFix\n\n- adjust incorrect type definitions and documentation ([#2924](https://github.com/arco-design/arco-design-vue/pull/2924))\n- fix spelling mistakes ([#2924](https://github.com/arco-design/arco-design-vue/pull/2924))\n\n\n## 2.50.0\n\n`2023-08-11`\n\n### 🆕 Feature\n\n- Support keyboard shortcuts, mouse wheel operation and a series of functions ([#2616](https://github.com/arco-design/arco-design-vue/pull/2616))\n\n### 🆎 TypeScript\n\n- added  image-preview-action type definition ([#2625](https://github.com/arco-design/arco-design-vue/pull/2625))\n\n\n## 2.48.1\n\n`2023-07-14`\n\n### 🐛 BugFix\n\n- icon not centered without alt or description in error state ([#2563](https://github.com/arco-design/arco-design-vue/pull/2563))\n\n\n## 2.46.0\n\n`2023-05-12`\n\n### 🆕 Feature\n\n- add actions slot ([#2389](https://github.com/arco-design/arco-design-vue/pull/2389))\n\n\n## 2.45.1\n\n`2023-04-14`\n\n### 🐛 BugFix\n\n- Fix `sizeStyle` failure issue ([#2327](https://github.com/arco-design/arco-design-vue/pull/2327))\n\n\n## 2.41.0\n\n`2022-12-30`\n\n### 🐛 BugFix\n\n- Fix the bug that the image id may not be collected and cause preview errors ([#1992](https://github.com/arco-design/arco-design-vue/pull/1992))\n\n\n## 2.37.3\n\n`2022-09-23`\n\n### 💎 Enhancement\n\n- do not display toolbar when actions layout is empty ([#1668](https://github.com/arco-design/arco-design-vue/pull/1668))\n\n\n## 2.36.0\n\n`2022-09-02`\n\n### 🆕 Feature\n\n- hideFooter adds a new parameter to support the display of footer in an error state ([#1595](https://github.com/arco-design/arco-design-vue/pull/1595))\n- Add fit prop ([#1534](https://github.com/arco-design/arco-design-vue/pull/1534))\n\n\n## 2.35.2\n\n`2022-08-29`\n\n### 💅 Style\n\n- Fix the problem that the close button icon is in the wrong position in preview mode ([#1577](https://github.com/arco-design/arco-design-vue/pull/1577))\n\n\n## 2.23.0\n\n`2022-04-08`\n\n### 🆕 Feature\n\n- Add footer-class attribute ([#953](https://github.com/arco-design/arco-design-vue/pull/953))\n\n### 💅 Style\n\n- Fix the rounded corner style problem at the bottom of the footer area ([#953](https://github.com/arco-design/arco-design-vue/pull/953))\n\n\n## 2.17.0\n\n`2022-02-11`\n\n### 🆕 Feature\n\n- Add slot `actions` for custom preview action items ([#679](https://github.com/arco-design/arco-design-vue/pull/679))\n\n### 🐛 BugFix\n\n- Fix the problem of wrong rotation direction ([#678](https://github.com/arco-design/arco-design-vue/pull/678))\n- Fix the problem that the `Tooltip` of the action item is covered ([#677](https://github.com/arco-design/arco-design-vue/pull/677))\n\n\n## 2.14.0\n\n`2022-01-07`\n\n### 🐛 BugFix\n\n- the`Image.PreviewGroup` component should collect `previewProps.src` first ([#522](https://github.com/arco-design/arco-design-vue/pull/522))\n\n\n## 2.4.0\n\n`2021-11-17`\n\n### 💅 Style\n\n- set the max size of error to fit parent ([#160](https://github.com/arco-design/arco-design-vue/pull/160))\n\n\n## 2.1.1\n\n`2021-11-08`\n\n### 🐛 BugFix\n\n- Fix the problem that the height limit of the img is invalid ([#115](https://github.com/arco-design/arco-design-vue/pull/115))\n\n\n## 2.1.0\n\n`2021-11-05`\n\n### 🆕 Feature\n\n- Add a slot named error-icon to support custom error status icon ([#85](https://github.com/arco-design/arco-design-vue/pull/85))\n\n"
  },
  {
    "path": "packages/web-vue/components/image/CHANGELOG.zh-CN.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.56.3\n\n`2024-10-25`\n\n\n## 2.54.3\n\n`2024-01-19`\n\n### 🐛 问题修复\n\n- 修复错误的类型定义和文档说明 ([#2924](https://github.com/arco-design/arco-design-vue/pull/2924))\n- 修正单词拼写错误 ([#2924](https://github.com/arco-design/arco-design-vue/pull/2924))\n\n\n## 2.50.0\n\n`2023-08-11`\n\n### 🆕 新增功能\n\n- 支持键盘快捷、鼠标滚轮操作等一系列功能 ([#2616](https://github.com/arco-design/arco-design-vue/pull/2616))\n\n### 🆎 类型修正\n\n- 添加 ImagePreviewAction 类型声明 ([#2625](https://github.com/arco-design/arco-design-vue/pull/2625))\n\n\n## 2.48.1\n\n`2023-07-14`\n\n### 🐛 问题修复\n\n- 在错误状态下，没有 alt 或description情况图标不垂直居中 ([#2563](https://github.com/arco-design/arco-design-vue/pull/2563))\n\n\n## 2.46.0\n\n`2023-05-12`\n\n### 🆕 新增功能\n\n- 添加 actions 插槽 ([#2389](https://github.com/arco-design/arco-design-vue/pull/2389))\n\n\n## 2.45.1\n\n`2023-04-14`\n\n### 🐛 问题修复\n\n- 修复 `sizeStyle` 失效的问题 ([#2327](https://github.com/arco-design/arco-design-vue/pull/2327))\n\n\n## 2.41.0\n\n`2022-12-30`\n\n### 🐛 问题修复\n\n- 修复 `imageId` 可能未收集导致预览出错的 bug ([#1992](https://github.com/arco-design/arco-design-vue/pull/1992))\n\n\n## 2.37.3\n\n`2022-09-23`\n\n### 💎 功能优化\n\n- actionsLayout为空时不显示操作栏 ([#1668](https://github.com/arco-design/arco-design-vue/pull/1668))\n\n\n## 2.36.0\n\n`2022-09-02`\n\n### 🆕 新增功能\n\n- hideFooter 增加新参数，支持错误状态下展示 footer ([#1595](https://github.com/arco-design/arco-design-vue/pull/1595))\n- 增加 fit 属性 ([#1534](https://github.com/arco-design/arco-design-vue/pull/1534))\n\n\n## 2.35.2\n\n`2022-08-29`\n\n### 💅 样式更新\n\n- 修复预览模式下关闭按钮图标位置错误的问题 ([#1577](https://github.com/arco-design/arco-design-vue/pull/1577))\n\n\n## 2.23.0\n\n`2022-04-08`\n\n### 🆕 新增功能\n\n- 增加 footer-class  属性 ([#953](https://github.com/arco-design/arco-design-vue/pull/953))\n\n### 💅 样式更新\n\n- 修复 footer 区域底部圆角样式问题 ([#953](https://github.com/arco-design/arco-design-vue/pull/953))\n\n\n## 2.17.0\n\n`2022-02-11`\n\n### 🆕 新增功能\n\n- 新增 actions 插槽用于自定义预览的操作项 ([#679](https://github.com/arco-design/arco-design-vue/pull/679))\n\n### 🐛 问题修复\n\n- 修复旋转方向错误的问题 ([#678](https://github.com/arco-design/arco-design-vue/pull/678))\n- 修复操作项的 `Tooltip` 被遮盖的问题 ([#677](https://github.com/arco-design/arco-design-vue/pull/677))\n\n\n## 2.14.0\n\n`2022-01-07`\n\n### 🐛 问题修复\n\n- `Image.PreviewGroup` 应该优先收集 `previewProps.src` ([#522](https://github.com/arco-design/arco-design-vue/pull/522))\n\n\n## 2.4.0\n\n`2021-11-17`\n\n### 💅 样式更新\n\n- 将错误状态图标的最大尺寸设置为父元素的大小 ([#160](https://github.com/arco-design/arco-design-vue/pull/160))\n\n\n## 2.1.1\n\n`2021-11-08`\n\n### 🐛 问题修复\n\n- 修复图片的高度限制无效的问题 ([#115](https://github.com/arco-design/arco-design-vue/pull/115))\n\n\n## 2.1.0\n\n`2021-11-05`\n\n### 🆕 新增功能\n\n- 增加一个名为 `error-icon` 的 slot 用于支持定制错误状态的图标 ([#85](https://github.com/arco-design/arco-design-vue/pull/85))\n\n"
  },
  {
    "path": "packages/web-vue/components/image/README.en-US.md",
    "content": "```yaml\nmeta:\n  type: Component\n  category: Data Display\ntitle: Image\ndescription: Used to show and preview pictures.\n```\n\n*Auto translate by google.*\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/caption.md\n\n@import ./__demo__/extra.md\n\n@import ./__demo__/error.md\n\n@import ./__demo__/loader.md\n\n@import ./__demo__/progressive-loader.md\n\n@import ./__demo__/custom-preview-actions.md\n\n@import ./__demo__/preview-group.md\n\n@import ./__demo__/component-preview.md\n\n@import ./__demo__/component-preview-group.md\n\n@import ./__demo__/preview-popup-container.md\n\n## API\n\n\n### `<image>` Props\n\n|Attribute|Description|Type|Default|version|\n|---|---|---|:---:|:---|\n|src|Image src|`string`|`-`||\n|width|Image width|`string \\| number`|`-`||\n|height|Image height|`string \\| number`|`-`||\n|title|Title|`string`|`-`||\n|description|Description, will be displayed at the bottom. if alt has no value, it will be set to alt|`string`|`-`||\n|fit|indicate how the image should be resized to fit its container|`'contain' \\| 'cover' \\| 'fill' \\| 'none' \\| 'scale-down'`|`-`||\n|alt|Text description of the image|`string`|`-`||\n|hide-footer|Whether to hide footer (Version 2.36.0 supports the 'never' parameter, which supports displaying bottom content when loading errors)|`boolean \\| 'never'`|`false`||\n|footer-position|The position shown at the bottom|`'inner' \\| 'outer'`|`'inner'`||\n|show-loader|Whether to show the loading effect|`boolean`|`false`||\n|preview|Whether to enable preview|`boolean`|`true`||\n|preview-visible **(v-model)**|Control the open state of the preview, can be used in conjunction with previewVisibleChange|`boolean`|`-`||\n|default-preview-visible|The default open state of the preview|`boolean`|`false`||\n|preview-props|Preview configuration items (all options are optional) [ImagePreviewProps](#image-preview%20Props)|`ImagePreviewProps`|`-`||\n|footer-class|The class name of the bottom display area|`string\\|array\\|object`|`-`|2.23.0|\n### `<image>` Events\n\n|Event Name|Description|Parameters|\n|---|---|---|\n|preview-visible-change|Preview opening and closing events|visible: `boolean`|\n### `<image>` Slots\n\n|Slot Name|Description|Parameters|\n|---|---|---|\n|error|Customize error content.|-|\n|error-icon|Customize the icon of error content.|-|\n|loader|Customize loading effect.|-|\n|extra|Extra content at the bottom|-|\n\n\n\n\n### `<image-preview>` Props\n\n|Attribute|Description|Type|Default|\n|---|---|---|:---:|\n|src|Image src|`string`|`-`|\n|visible **(v-model)**|Whether is visible|`boolean`|`-`|\n|default-visible|Default visibility|`boolean`|`false`|\n|mask-closable|Whether to close the modal when mask is clicked|`boolean`|`true`|\n|closable|Whether to show close button|`boolean`|`true`|\n|actions-layout|Layout of action list|`string[]`|`[  'fullScreen',  'rotateRight',  'rotateLeft',  'zoomIn',  'zoomOut',  'originalSize',]`|\n|popup-container|Set the mount point of the pop-up box, the same as the `to` of `teleport`, the default value is document.body|`HTMLElement \\| string`|`-`|\n|esc-to-close|Whether to support the ESC key to close the preview|`boolean`|`true`|\n|wheel-zoom|Whether to enable wheel zoom|`boolean`|`true`|\n|keyboard|Whether to enable keyboard shortcuts|`boolean`|`true`|\n|default-scale|Default scale|`number`|`1`|\n|zoom-rate|Zoom rate, only for scroll zoom|`number`|`1.1`|\n### `<image-preview>` Events\n\n|Event Name|Description|Parameters|\n|---|---|---|\n|close|Close event|-|\n### `<image-preview>` Slots\n\n|Slot Name|Description|Parameters|version|\n|---|---|---|:---|\n|actions|Customize additional action items|-|2.17.0|\n\n\n\n\n### `<image-preview-group>` Props\n\n|Attribute|Description|Type|Default|\n|---|---|---|:---:|\n|src-list|Picture list (after setting this property, the picture information of a-image subcomponent will no longer be collected)|`string[]`|`-`|\n|current **(v-model)**|The index of the currently displayed image|`number`|`-`|\n|default-current|The index of the first image shown|`number`|`0`|\n|infinite|Whether to loop infinitely|`boolean`|`false`|\n|visible **(v-model)**|Whether is visible|`boolean`|`-`|\n|default-visible|Default visibility|`boolean`|`false`|\n|mask-closable|Whether to close the modal when mask is clicked|`boolean`|`true`|\n|closable|Whether to show close button|`boolean`|`true`|\n|actions-layout|Layout of action list|`string[]`|`[  'fullScreen',  'rotateRight',  'rotateLeft',  'zoomIn',  'zoomOut',  'originalSize',]`|\n|popup-container|Set the mount point of the pop-up box, the same as the `to` of `teleport`, the default value is document.body|`string \\| HTMLElement`|`-`|\n### `<image-preview-group>` Events\n\n|Event Name|Description|Parameters|\n|---|---|---|\n|change|Image switch|index: `number`|\n|visible-change|Preview visibility change|visible: `boolean`|\n### `<image-preview-group>` Slots\n\n|Slot Name|Description|Parameters|version|\n|---|---|---|:---|\n|actions|Customize additional action items|-|2.46.0|\n\n\n\n\n### `<image-preview-action>` Props (2.17.0)\n\n|Attribute|Description|Type|Default|\n|---|---|---|:---:|\n|name|the name of the action|`string`|`-`|\n|disabled|Whether to disable the action|`boolean`|`false`|\n\n\n\n## FAQ\n\n### Property Description for `image-preview`\n\n**1. Keyboard Shortcuts - `keyboard`**\nSetting this property to `true` enables corresponding keyboard shortcuts based on the `actions-layout` settings.\n\n- `esc`: Close preview\n- `left`: Switch to the previous image\n- `right`: Switch to the next image\n- `up`: Zoom in on the image\n- `down`: Zoom out on the image\n- `space`: Restore to original size\n\n**2. Default Scaling - `defaultScale`**\nThis property defines the default scaling factor for images. For instance, when set to 1.5, images will be enlarged by 1.5 times their original size by default.\n\n**3. Scroll Zoom Rate - `zoomSate`**\nThe `zoomSate` property controls the scaling rate of images during scrolling. Taking 1.3 as an example, each scrolling action will result in an image zoom-in or zoom-out by a factor of 1.3.\n"
  },
  {
    "path": "packages/web-vue/components/image/README.zh-CN.md",
    "content": "```yaml\nmeta:\n  type: 组件\n  category: 数据展示\ntitle: 图片 Image\ndescription: 展示和预览图片。\n```\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/caption.md\n\n@import ./__demo__/extra.md\n\n@import ./__demo__/error.md\n\n@import ./__demo__/loader.md\n\n@import ./__demo__/progressive-loader.md\n\n@import ./__demo__/custom-preview-actions.md\n\n@import ./__demo__/preview-group.md\n\n@import ./__demo__/component-preview.md\n\n@import ./__demo__/component-preview-group.md\n\n@import ./__demo__/preview-popup-container.md\n\n## API\n\n\n### `<image>` Props\n\n|参数名|描述|类型|默认值|版本|\n|---|---|---|:---:|:---|\n|src|图片获取地址|`string`|`-`||\n|width|图片显示宽度|`string \\| number`|`-`||\n|height|图片显示高度|`string \\| number`|`-`||\n|title|标题|`string`|`-`||\n|description|描述，将显示在底部，如果 alt 没有值，则会将其设置给 alt|`string`|`-`||\n|fit|确定图片如何适应容器框|`'contain' \\| 'cover' \\| 'fill' \\| 'none' \\| 'scale-down'`|`-`||\n|alt|图片的文字描述|`string`|`-`||\n|hide-footer|是否隐藏 footer（2.36.0 版本支持 'never' 参数，支持在加载错误时显示底部内容）|`boolean \\| 'never'`|`false`||\n|footer-position|底部显示的位置|`'inner' \\| 'outer'`|`'inner'`||\n|show-loader|是否显示加载中效果|`boolean`|`false`||\n|preview|是否开启预览|`boolean`|`true`||\n|preview-visible **(v-model)**|控制预览的打开状态，可与 previewVisibleChange 配合使用|`boolean`|`-`||\n|default-preview-visible|预览的默认打开状态|`boolean`|`false`||\n|preview-props|预览的配置项（所有选项都是可选的） [ImagePreviewProps](#image-preview%20Props)|`ImagePreviewProps`|`-`||\n|footer-class|底部显示区域的类名|`string\\|array\\|object`|`-`|2.23.0|\n### `<image>` Events\n\n|事件名|描述|参数|\n|---|---|---|\n|preview-visible-change|预览的打开和关闭事件|visible: `boolean`|\n### `<image>` Slots\n\n|插槽名|描述|参数|\n|---|:---:|---|\n|error|自定义错误状态内容|-|\n|error-icon|自定义错误状态的图标|-|\n|loader|自定义加载状态效果|-|\n|extra|底部额外内容|-|\n\n\n\n\n### `<image-preview>` Props\n\n|参数名|描述|类型|默认值|\n|---|---|---|:---:|\n|src|图片获取地址|`string`|`-`|\n|visible **(v-model)**|是否可见|`boolean`|`-`|\n|default-visible|默认是否可见，非受控|`boolean`|`false`|\n|mask-closable|点击 mask 是否触发关闭|`boolean`|`true`|\n|closable|是否显示关闭按钮|`boolean`|`true`|\n|actions-layout|操作项的布局|`string[]`|`[  'fullScreen',  'rotateRight',  'rotateLeft',  'zoomIn',  'zoomOut',  'originalSize',]`|\n|popup-container|设置弹出框的挂载点，同 `teleport` 的 `to`，缺省值是 document.body|`HTMLElement \\| string`|`-`|\n|esc-to-close|是否支持 ESC 键关闭预览|`boolean`|`true`|\n|wheel-zoom|是否开启滚轮缩放|`boolean`|`true`|\n|keyboard|是否开启键盘控制|`boolean`|`true`|\n|default-scale|默认缩放比|`number`|`1`|\n|zoom-rate|缩放速率，仅对滚动缩放生效|`number`|`1.1`|\n### `<image-preview>` Events\n\n|事件名|描述|参数|\n|---|---|---|\n|close|关闭事件|-|\n### `<image-preview>` Slots\n\n|插槽名|描述|参数|版本|\n|---|:---:|---|:---|\n|actions|自定义额外的操作项|-|2.17.0|\n\n\n\n\n### `<image-preview-group>` Props\n\n|参数名|描述|类型|默认值|\n|---|---|---|:---:|\n|src-list|图片列表（设置了本属性之后，将不再收集 a-image 子组件的图片信息）|`string[]`|`-`|\n|current **(v-model)**|当前展示的图片的下标|`number`|`-`|\n|default-current|第一张展示的图片的下标|`number`|`0`|\n|infinite|是否无限循环|`boolean`|`false`|\n|visible **(v-model)**|是否可见，受控属性|`boolean`|`-`|\n|default-visible|默认是否可见，非受控|`boolean`|`false`|\n|mask-closable|点击 mask 是否触发关闭|`boolean`|`true`|\n|closable|是否显示关闭按钮|`boolean`|`true`|\n|actions-layout|控制条的布局|`string[]`|`[  'fullScreen',  'rotateRight',  'rotateLeft',  'zoomIn',  'zoomOut',  'originalSize',]`|\n|popup-container|设置弹出框的挂载点，同 `teleport` 的 `to`，缺省值是 document.body|`string \\| HTMLElement`|`-`|\n### `<image-preview-group>` Events\n\n|事件名|描述|参数|\n|---|---|---|\n|change|切换图片|index: `number`|\n|visible-change|预览的打开和关闭|visible: `boolean`|\n### `<image-preview-group>` Slots\n\n|插槽名|描述|参数|版本|\n|---|:---:|---|:---|\n|actions|自定义额外的操作项|-|2.46.0|\n\n\n\n\n### `<image-preview-action>` Props (2.17.0)\n\n|参数名|描述|类型|默认值|\n|---|---|---|:---:|\n|name|名称|`string`|`-`|\n|disabled|是否禁用|`boolean`|`false`|\n\n\n\n## FAQ\n\n### 关于 `image-preview` 的属性说明\n\n1. 键盘快捷键 `keyboard` 设置此属性为 `true` 后，将根据 `actions-layout` 操作项来启用相应的快捷键操作。\n- `esc`: 关闭预览\n- `left`: 切换至上一张图片\n- `right`: 切换至下一张图片\n- `up`: 放大图片\n- `down`: 缩小图片\n- `space`: 还原至原始大小\n\n2. 默认缩放比例 `defaultScale` 此属性定义了默认的图片缩放比例。例如，当设置为 1.5 时，图片将默认放大到原始大小的 1.5 倍。\n\n3. 滚动缩放速率 `zoomSate` 属性控制了在滚动操作时图片的缩放速率。以 1.3 为例，每次滚动操作都会使图片放大或缩小 1.3 倍。\n"
  },
  {
    "path": "packages/web-vue/components/image/TEMPLATE.md",
    "content": "## zh-CN\n```yaml\nmeta:\n  type: 组件\n  category: 数据展示\ntitle: 图片 Image\ndescription: 展示和预览图片。\n```\n---\n## en-US\n```yaml\nmeta:\n  type: Component\n  category: Data Display\ntitle: Image\ndescription: Used to show and preview pictures.\n```\n---\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/caption.md\n\n@import ./__demo__/extra.md\n\n@import ./__demo__/error.md\n\n@import ./__demo__/loader.md\n\n@import ./__demo__/progressive-loader.md\n\n@import ./__demo__/custom-preview-actions.md\n\n@import ./__demo__/preview-group.md\n\n@import ./__demo__/component-preview.md\n\n@import ./__demo__/component-preview-group.md\n\n@import ./__demo__/preview-popup-container.md\n\n## API\n\n%%API(image.vue)%%\n\n%%API(preview.vue)%%\n\n%%API(preview-group.vue)%%\n\n%%API(preview-action.tsx)%%\n\n## FAQ\n\n## zh-CN\n### 关于 `image-preview` 的属性说明\n\n1. 键盘快捷键 `keyboard` 设置此属性为 `true` 后，将根据 `actions-layout` 操作项来启用相应的快捷键操作。\n- `esc`: 关闭预览\n- `left`: 切换至上一张图片\n- `right`: 切换至下一张图片\n- `up`: 放大图片\n- `down`: 缩小图片\n- `space`: 还原至原始大小\n\n2. 默认缩放比例 `defaultScale` 此属性定义了默认的图片缩放比例。例如，当设置为 1.5 时，图片将默认放大到原始大小的 1.5 倍。\n\n3. 滚动缩放速率 `zoomSate` 属性控制了在滚动操作时图片的缩放速率。以 1.3 为例，每次滚动操作都会使图片放大或缩小 1.3 倍。\n\n---\n## en-US\n### Property Description for `image-preview`\n\n**1. Keyboard Shortcuts - `keyboard`**\nSetting this property to `true` enables corresponding keyboard shortcuts based on the `actions-layout` settings.\n\n- `esc`: Close preview\n- `left`: Switch to the previous image\n- `right`: Switch to the next image\n- `up`: Zoom in on the image\n- `down`: Zoom out on the image\n- `space`: Restore to original size\n\n**2. Default Scaling - `defaultScale`**\nThis property defines the default scaling factor for images. For instance, when set to 1.5, images will be enlarged by 1.5 times their original size by default.\n\n**3. Scroll Zoom Rate - `zoomSate`**\nThe `zoomSate` property controls the scaling rate of images during scrolling. Taking 1.3 as an example, each scrolling action will result in an image zoom-in or zoom-out by a factor of 1.3.\n\n---\n"
  },
  {
    "path": "packages/web-vue/components/image/__demo__/basic.md",
    "content": "```yaml\ntitle:\n  zh-CN: 基本用法\n  en-US: Basic\n```\n\n## zh-CN\n\n需要查看图片的时候，简单的设置 `src` 属性，就能获得一个有预览图片功能的组件。\n\n---\n\n## en-US\n\nWhen you need to view a picture, simply set the `src` property to get a component with preview picture function.\n\n---\n\n```vue\n<template>\n  <a-image\n    width=\"200\"\n    src=\"https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a8c8cdb109cb051163646151a4a5083b.png~tplv-uwbnlip3yd-webp.webp\"\n  />\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/image/__demo__/caption.md",
    "content": "```yaml\ntitle:\n  zh-CN: 显示 Caption\n  en-US: Show Caption\n```\n\n## zh-CN\n\n通过设置 `title` 和 `description` 可以将图片的标题和描述显示在图片内部或者底部，显示的位置通过 `footerPosition` 控制。\n\n---\n\n## en-US\n\nBy setting title and description, the title and description of the picture can be displayed inside or at the bottom of the picture, and the display position is controlled by footerPosition.\n\n---\n\n```vue\n<template>\n  <a-image\n    width=\"200px\"\n    :src=\"src\"\n    :title=\"title\"\n    :description=\"description\"\n  />\n  <a-image\n    width=\"200px\"\n    :src=\"src\"\n    :title=\"title\"\n    :description=\"description\"\n    footerPosition=\"outer\"\n    style=\"margin-left: 67px; vertical-align: top;\"\n  />\n</template>\n\n<script>\nexport default {\n  setup() {\n    return {\n      src: 'https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a8c8cdb109cb051163646151a4a5083b.png~tplv-uwbnlip3yd-webp.webp',\n      title: 'A user’s avatar',\n      description: 'Present by Arco Design',\n    }\n  }\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/image/__demo__/component-preview-group.md",
    "content": "```yaml\ntitle:\n  zh-CN: 单独使用多图预览组件\n  en-US: Use PreviewGroup alone\n```\n\n## zh-CN\n\n`<a-image-preview-group>` 可单独使用，需控制 `visible` 。在图片的展示上分为两种场景，一是通过 `defaultCurrent` 指定第一张展示的图片；二是控制 `current` 来决定当前显示的是第几张图片。\n\n---\n\n## en-US\n\n`<a-image-preview-group>` can be used alone, you need to control `visible` by yourself. The image display is divided into two scenes: First, the first image to be displayed can be specified by `defaultCurrent`. Second, to control which image is currently displayed by `current`.\n\n---\n\n```vue\n<template>\n  <a-button type=\"primary\" @click=\"onClick\">Click me to preview multiple image</a-button>\n  <a-image-preview-group\n    v-model:visible=\"visible\"\n    v-model:current=\"current\"\n    infinite\n    :srcList=\"[\n      'https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/cd7a1aaea8e1c5e3d26fe2591e561798.png~tplv-uwbnlip3yd-webp.webp',\n      'https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/6480dbc69be1b5de95010289787d64f1.png~tplv-uwbnlip3yd-webp.webp',\n      'https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/0265a04fddbd77a19602a15d9d55d797.png~tplv-uwbnlip3yd-webp.webp',\n      'https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/24e0dd27418d2291b65db1b21aa62254.png~tplv-uwbnlip3yd-webp.webp',\n    ]\"\n  />\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n  setup() {\n    const visible = ref(false)\n    const current = ref(3);\n    const onClick = () => {\n      visible.value = true;\n    };\n\n    return {\n      visible,\n      current,\n      onClick,\n    };\n  },\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/image/__demo__/component-preview.md",
    "content": "```yaml\ntitle:\n  zh-CN: 单独使用预览组件\n  en-US: Use Preview alone\n```\n\n## zh-CN\n\n`a-image-preview` 可单独使用，需要手动控制 `visible`。\n\n---\n\n## en-US\n\n`a-image-preview` can be used alone, you need to control `visible`.\n\n---\n\n```vue\n<template>\n  <a-button type=\"primary\" @click=\"onClick\">Click me to preview image</a-button>\n  <a-image-preview\n    src=\"https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a8c8cdb109cb051163646151a4a5083b.png~tplv-uwbnlip3yd-webp.webp\"\n    v-model:visible=\"visible\"\n  />\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n  setup() {\n    const visible = ref(false)\n    const onClick = () => {\n      visible.value = true;\n    };\n\n    return {\n      visible,\n      onClick,\n    };\n  },\n};\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/image/__demo__/custom-preview-actions.md",
    "content": "```yaml\ntitle:\n  zh-CN: 自定义预览操作栏\n  en-US: Preview action bar\n```\n\n## zh-CN\n\n通过设置 `actionsLayout` 可以调整预览操作栏中功能按钮的顺序，同时可以过滤功能按钮，只有在 `actionsLayout` 中的按钮才会出现。\n此外从 `2.17.0` 开始，预览组件 `a-image-preview` 提供了 `actions` 插槽，支持自定义额外的操作项，同时还提供了操作项组件 `a-image-preview-action`。\n\n---\n\n## en-US\n\nThe function buttons on the control preview control bar can be sorted and filtered through `actionLayout`.\nIn addition, starting from `2.17.0`, the preview component `a-image-preview` provides the `actions` slot to support custom additional action items, and also provides the action item component `a-image-preview-action` .\n\n---\n\n```vue\n<template>\n  <a-image\n    width=\"200\"\n    src=\"https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a8c8cdb109cb051163646151a4a5083b.png~tplv-uwbnlip3yd-webp.webp\"\n    :preview-props=\"{\n      actionsLayout: ['rotateRight', 'zoomIn', 'zoomOut'],\n    }\"\n  >\n    <template #preview-actions>\n      <a-image-preview-action name=\"下载\" @click=\"download\"><icon-download /></a-image-preview-action>\n    </template>\n  </a-image>\n</template>\n\n<script>\nexport default {\n  setup() {\n    const download = () => {\n      console.log('点击下载图片')\n    };\n\n    return {\n      download\n    }\n  },\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/image/__demo__/error.md",
    "content": "```yaml\ntitle:\n  zh-CN: 错误状态\n  en-US: Error state\n```\n\n## zh-CN\n\n当加载图片失败的时候显示的内容。\n\n---\n\n## en-US\n\nContent displayed when the image fails to load.\n\n---\n\n```vue\n<template>\n  <a-space :size=\"20\">\n    <a-image\n      width=\"400\"\n      height=\"300\"\n      src=\"some-error.png\"\n    />\n    <a-image\n      width=\"400\"\n      height=\"300\"\n      src=\"some-error.png\"\n      alt=\"This is a picture of humans eating ice cream. The humans on the screen are very happy just now. The ice cream is green, it seems to be flavored with matcha. The gender of the human is unknown. It has very long hair and the human hair is brown.\"\n    />\n  </a-space>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/image/__demo__/extra.md",
    "content": "```yaml\ntitle:\n  zh-CN: 额外操作\n  en-US: Extra Operations\n```\n\n## zh-CN\n\n组件提供了具名插槽 `extra` 供用户在页脚定制额外的内容。\n\n---\n\n## en-US\n\nThe component provides a named slot `extra` for users to customize additional content in the footer.\n\n---\n\n```vue\n<template>\n  <a-image\n    src='https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a8c8cdb109cb051163646151a4a5083b.png~tplv-uwbnlip3yd-webp.webp'\n    title='A user’s avatar'\n    description='Present by Arco Design'\n    width=\"260\"\n    style=\"margin-right: 67px; vertical-align: top;\"\n    :preview-visible=\"visible1\"\n    @preview-visible-change=\"() => { visible1= false }\"\n  >\n    <template #extra>\n      <div class=\"actions\">\n        <span class=\"action\" @click=\"() => { visible1 = true }\"><icon-eye /></span>\n        <span class=\"action\" @click=\"onDownLoad\"><icon-download /></span>\n        <a-tooltip content=\"A user’s avatar\">\n          <span class=\"action\"><icon-info-circle /></span>\n        </a-tooltip>\n      </div>\n    </template>\n  </a-image>\n  <a-image\n    src='https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a8c8cdb109cb051163646151a4a5083b.png~tplv-uwbnlip3yd-webp.webp'\n    title='A user’s avatar'\n    description='Present by Arco Design'\n    width=\"260\"\n    footer-position=\"outer\"\n    :preview-visible=\"visible2\"\n    @preview-visible-change=\"() => { visible2 = false }\"\n  >\n    <template #extra>\n      <div class=\"actions actions-outer\">\n        <span class=\"action\" @click=\"() => { visible2 = true }\"><icon-eye /></span>\n        <span class=\"action\" @click=\"onDownLoad\"><icon-download /></span>\n        <a-tooltip content=\"A user’s avatar\">\n          <span class=\"action\"><icon-info-circle /></span>\n        </a-tooltip>\n      </div>\n    </template>\n  </a-image>\n</template>\n<script>\n  import { ref } from 'vue';\n  import { IconEye, IconDownload, IconInfoCircle } from '@arco-design/web-vue/es/icon';\n\n  export default {\n    components: {\n      IconEye, IconDownload, IconInfoCircle\n    },\n    setup() {\n      const visible1 = ref(false);\n      const visible2 = ref(false);\n\n      return {\n        visible1,\n        visible2,\n        onDownLoad() {\n          console.log('download');\n        },\n      }\n    }\n  }\n</script>\n<style scoped>\n  .actions {\n    display: flex;\n    align-items: center;\n  }\n  .action {\n    padding: 5px 4px;\n    font-size: 14px;\n    margin-left: 12px;\n    border-radius: 2px;\n    line-height: 1;\n    cursor: pointer;\n  }\n  .action:first-child {\n    margin-left: 0;\n  }\n\n  .action:hover {\n    background: rgba(0,0,0,.5);\n  }\n  .actions-outer {\n    .action {\n      &:hover {\n        color: #ffffff;\n      }\n    }\n  }\n</style>\n```\n"
  },
  {
    "path": "packages/web-vue/components/image/__demo__/loader.md",
    "content": "```yaml\norder: 4\ntitle:\n  zh-CN: 加载状态\n  en-US: Loading\n```\n\n## zh-CN\n\n默认情况下，加载效果是不显示的，可通过设置 `showLoader` 为 `true` 显示默认加载效果。如果默认加载效果不符合需求, 还可以通过 具名插槽 `loader` 自行设置加载样式。\n\n---\n\n## en-US\n\nBy default, the loading effect is not displayed, and the default loading effect can be displayed by setting `showLoader` to `true`. If the default loading effect does not meet the requirements, you can also set the loading style yourself through the named slot `loader`.\n\nLoading\n\n---\n\n```vue\n<template>\n  <div>\n    <a-button\n      type=\"primary\"\n      @click=\"() => {timestamp = Date.now()}\"\n      style=\"margin-bottom: 20px;\"\n    >\n      reload\n    </a-button>\n  </div>\n  <a-image\n    width=\"200\"\n    height=\"200\"\n    :src=\"`https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a8c8cdb109cb051163646151a4a5083b.png~tplv-uwbnlip3yd-webp.webp?timestamp=${timestamp}`\"\n    show-loader\n  />\n  <a-image\n    width=\"200\"\n    height=\"200\"\n    :src=\"`https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a8c8cdb109cb051163646151a4a5083b.png~tplv-uwbnlip3yd-webp.webp?timestamp=${timestamp}`\"\n    style=\"marginLeft: 67px\"\n  >\n    <template #loader>\n      <div class=\"loader-animate\"/>\n    </template>\n  </a-image>\n</template>\n<script>\n  import { ref } from 'vue';\n  export default {\n    setup() {\n      const timestamp = ref('');\n      return {\n        timestamp,\n      }\n    }\n  }\n</script>\n<style scoped>\n  .loader-animate {\n    width: 100%;\n    height: 100%;\n    background: linear-gradient(\n      -60deg,\n      var(--color-fill-2) 25%,\n      var(--color-neutral-3) 40%,\n      var(--color-fill-3) 55%\n    );\n    background-size: 400% 100%;\n    animation: loop-circle 1.5s cubic-bezier(0.34, 0.69, 0.1, 1) infinite;\n  }\n\n  @keyframes loop-circle {\n    0% {\n      background-position: 100% 50%;\n    }\n\n    100% {\n      background-position: 0 50%;\n    }\n  }\n</style>\n```\n"
  },
  {
    "path": "packages/web-vue/components/image/__demo__/preview-group.md",
    "content": "```yaml\ntitle:\n  zh-CN: 多图预览\n  en-US: Multi-image preview\n```\n\n## zh-CN\n\n用 `<a-image-preview-group>` 包裹 `<a-image>` 组件即可进行多图预览。\n\n---\n\n## en-US\n\nUse `<a-image-preview-group>` to wrap the `<a-image>` component to preview multiple images.\n\n---\n\n```vue\n<template>\n  <a-image-preview-group infinite>\n    <a-space>\n      <a-image src=\"https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/cd7a1aaea8e1c5e3d26fe2591e561798.png~tplv-uwbnlip3yd-webp.webp\" width=\"200\" />\n      <a-image src=\"https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/6480dbc69be1b5de95010289787d64f1.png~tplv-uwbnlip3yd-webp.webp\" width=\"200\" />\n      <a-image src=\"https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/0265a04fddbd77a19602a15d9d55d797.png~tplv-uwbnlip3yd-webp.webp\" width=\"200\" />\n      <a-image src=\"https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/24e0dd27418d2291b65db1b21aa62254.png~tplv-uwbnlip3yd-webp.webp\" width=\"200\" />\n    </a-space>\n  </a-image-preview-group>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/image/__demo__/preview-popup-container.md",
    "content": "```yaml\ntitle:\n  zh-CN: 挂载节点\n  en-US: Popup Container\n```\n\n## zh-CN\n\n可以通过 `popupContainer` 指定预览挂载的父级节点。\n\n---\n\n## en-US\n\nYou can specify the parent node of the preview mounted by `popupContainer`.\n\n---\n\n```vue\n<template>\n  <div\n    id=\"image-demo-preview-popup-container\"\n    :style=\"{\n      width: '100%',\n      height: '400px',\n      backgroundColor: 'var(--color-fill-2)',\n      position: 'relative',\n      overflow: 'hidden',\n      lineHeight: '400px',\n      textAlign: 'center',\n    }\"\n  >\n    <a-image\n      width=\"200\"\n      src=\"https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a8c8cdb109cb051163646151a4a5083b.png~tplv-uwbnlip3yd-webp.webp\"\n      :preview-props=\"{\n        popupContainer: '#image-demo-preview-popup-container',\n        closable: false,\n      }\"\n    />\n  </div>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/image/__demo__/progressive-loader.md",
    "content": "```yaml\ntitle:\n  zh-CN: 渐进加载\n  en-US: Progressive Loading\n```\n\n## zh-CN\n\n大图可通过给 `loader` 传递一个小一些的图片，让其在原图未被加载成功时显示，以此来模拟渐进加载。\n\n---\n\n## en-US\n\nWhen you need to display a large image, you can pass a smaller image to `loader` to display it when the original image is not successfully loaded to simulate progressive loading.\n\n---\n\n```vue\n<template>\n  <div>\n    <a-button\n      type=\"primary\"\n      @click=\"() => {timestamp = Date.now()}\"\n      style=\"margin-bottom: 20px;\"\n    >\n      reload\n    </a-button>\n  </div>\n  <a-image\n    width=\"200\"\n    height=\"200\"\n    :src=\"`https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a8c8cdb109cb051163646151a4a5083b.png~tplv-uwbnlip3yd-webp.webp?timestamp=${timestamp}`\"\n  >\n    <template #loader>\n      <img\n        width=\"200\"\n        src=\"https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a8c8cdb109cb051163646151a4a5083b.png~tplv-uwbnlip3yd-webp.webp\"\n        style=\"filter: blur(5px);\"\n      />\n    </template>\n  </a-image>\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n  setup() {\n    const timestamp = ref('');\n    return {\n      timestamp,\n    }\n  }\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/image/__test__/__snapshots__/demo.test.ts.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`<image> demo: render [basic] correctly 1`] = `\n\"<div class=\\\\\"arco-image arco-image-with-footer-inner\\\\\" style=\\\\\"width: 200px;\\\\\"><img class=\\\\\"arco-image-img\\\\\" style=\\\\\"width: 200px;\\\\\">\n  <div class=\\\\\"arco-image-overlay\\\\\">\n    <!--v-if-->\n    <!--v-if-->\n  </div>\n  <!--v-if-->\n  <!--v-if-->\n</div>\"\n`;\n\nexports[`<image> demo: render [caption] correctly 1`] = `\n\"<div class=\\\\\"arco-image arco-image-with-footer-inner\\\\\" style=\\\\\"width: 200px;\\\\\"><img class=\\\\\"arco-image-img\\\\\" style=\\\\\"width: 200px;\\\\\" title=\\\\\"A user’s avatar\\\\\">\n  <div class=\\\\\"arco-image-overlay\\\\\">\n    <!--v-if-->\n    <!--v-if-->\n  </div>\n  <!--v-if-->\n  <!--v-if-->\n</div>\n<div class=\\\\\"arco-image arco-image-with-footer-outer\\\\\" style=\\\\\"width: 200px; margin-left: 67px; vertical-align: top;\\\\\"><img class=\\\\\"arco-image-img\\\\\" style=\\\\\"width: 200px;\\\\\" title=\\\\\"A user’s avatar\\\\\">\n  <div class=\\\\\"arco-image-overlay\\\\\">\n    <!--v-if-->\n    <!--v-if-->\n  </div>\n  <!--v-if-->\n  <!--v-if-->\n</div>\"\n`;\n\nexports[`<image> demo: render [component-preview] correctly 1`] = `\n\"<button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n  <!--v-if-->Click me to preview image\n</button>\n<!--teleport start-->\n<!--teleport end-->\"\n`;\n\nexports[`<image> demo: render [component-preview-group] correctly 1`] = `\n\"<button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n  <!--v-if-->Click me to preview multiple image\n</button>\n<!--teleport start-->\n<!--teleport end-->\"\n`;\n\nexports[`<image> demo: render [custom-preview-actions] correctly 1`] = `\n\"<div class=\\\\\"arco-image arco-image-with-footer-inner\\\\\" style=\\\\\"width: 200px;\\\\\"><img class=\\\\\"arco-image-img\\\\\" style=\\\\\"width: 200px;\\\\\">\n  <div class=\\\\\"arco-image-overlay\\\\\">\n    <!--v-if-->\n    <!--v-if-->\n  </div>\n  <!--v-if-->\n  <!--v-if-->\n</div>\"\n`;\n\nexports[`<image> demo: render [error] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 20px; row-gap: 20px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-image arco-image-with-footer-inner\\\\\" style=\\\\\"width: 400px; height: 300px;\\\\\"><img class=\\\\\"arco-image-img\\\\\" style=\\\\\"width: 400px; height: 300px;\\\\\">\n      <div class=\\\\\"arco-image-overlay\\\\\">\n        <!--v-if-->\n        <!--v-if-->\n      </div>\n      <!--v-if-->\n      <!--v-if-->\n    </div>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-image arco-image-with-footer-inner\\\\\" style=\\\\\"width: 400px; height: 300px;\\\\\"><img class=\\\\\"arco-image-img\\\\\" style=\\\\\"width: 400px; height: 300px;\\\\\" alt=\\\\\"This is a picture of humans eating ice cream. The humans on the screen are very happy just now. The ice cream is green, it seems to be flavored with matcha. The gender of the human is unknown. It has very long hair and the human hair is brown.\\\\\">\n      <div class=\\\\\"arco-image-overlay\\\\\">\n        <!--v-if-->\n        <!--v-if-->\n      </div>\n      <!--v-if-->\n      <!--v-if-->\n    </div>\n  </div>\n</div>\"\n`;\n\nexports[`<image> demo: render [extra] correctly 1`] = `\n\"<div class=\\\\\"arco-image arco-image-with-footer-inner\\\\\" style=\\\\\"width: 260px; margin-right: 67px; vertical-align: top;\\\\\"><img class=\\\\\"arco-image-img\\\\\" style=\\\\\"width: 260px;\\\\\" title=\\\\\"A user’s avatar\\\\\">\n  <div class=\\\\\"arco-image-overlay\\\\\">\n    <!--v-if-->\n    <!--v-if-->\n  </div>\n  <!--v-if-->\n  <!--v-if-->\n</div>\n<div class=\\\\\"arco-image arco-image-with-footer-outer\\\\\" style=\\\\\"width: 260px;\\\\\"><img class=\\\\\"arco-image-img\\\\\" style=\\\\\"width: 260px;\\\\\" title=\\\\\"A user’s avatar\\\\\">\n  <div class=\\\\\"arco-image-overlay\\\\\">\n    <!--v-if-->\n    <!--v-if-->\n  </div>\n  <!--v-if-->\n  <!--v-if-->\n</div>\"\n`;\n\nexports[`<image> demo: render [loader] correctly 1`] = `\n\"<div><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\" style=\\\\\"margin-bottom: 20px;\\\\\">\n    <!--v-if--> reload\n  </button></div>\n<div class=\\\\\"arco-image arco-image-with-footer-inner\\\\\" style=\\\\\"width: 200px; height: 200px;\\\\\"><img class=\\\\\"arco-image-img\\\\\" style=\\\\\"width: 200px; height: 200px;\\\\\">\n  <div class=\\\\\"arco-image-overlay\\\\\">\n    <!--v-if-->\n    <!--v-if-->\n  </div>\n  <!--v-if-->\n  <!--v-if-->\n</div>\n<div class=\\\\\"arco-image arco-image-with-footer-inner\\\\\" style=\\\\\"width: 200px; height: 200px; margin-left: 67px;\\\\\"><img class=\\\\\"arco-image-img\\\\\" style=\\\\\"width: 200px; height: 200px;\\\\\">\n  <div class=\\\\\"arco-image-overlay\\\\\">\n    <!--v-if-->\n    <!--v-if-->\n  </div>\n  <!--v-if-->\n  <!--v-if-->\n</div>\"\n`;\n\nexports[`<image> demo: render [preview-group] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 8px; row-gap: 8px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-image arco-image-with-footer-inner\\\\\" style=\\\\\"width: 200px;\\\\\"><img class=\\\\\"arco-image-img\\\\\" style=\\\\\"width: 200px;\\\\\">\n      <div class=\\\\\"arco-image-overlay\\\\\">\n        <!--v-if-->\n        <!--v-if-->\n      </div>\n      <!--v-if-->\n      <!--v-if-->\n    </div>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-image arco-image-with-footer-inner\\\\\" style=\\\\\"width: 200px;\\\\\"><img class=\\\\\"arco-image-img\\\\\" style=\\\\\"width: 200px;\\\\\">\n      <div class=\\\\\"arco-image-overlay\\\\\">\n        <!--v-if-->\n        <!--v-if-->\n      </div>\n      <!--v-if-->\n      <!--v-if-->\n    </div>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-image arco-image-with-footer-inner\\\\\" style=\\\\\"width: 200px;\\\\\"><img class=\\\\\"arco-image-img\\\\\" style=\\\\\"width: 200px;\\\\\">\n      <div class=\\\\\"arco-image-overlay\\\\\">\n        <!--v-if-->\n        <!--v-if-->\n      </div>\n      <!--v-if-->\n      <!--v-if-->\n    </div>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-image arco-image-with-footer-inner\\\\\" style=\\\\\"width: 200px;\\\\\"><img class=\\\\\"arco-image-img\\\\\" style=\\\\\"width: 200px;\\\\\">\n      <div class=\\\\\"arco-image-overlay\\\\\">\n        <!--v-if-->\n        <!--v-if-->\n      </div>\n      <!--v-if-->\n      <!--v-if-->\n    </div>\n  </div>\n</div>\n<!--teleport start-->\n<!--teleport end-->\"\n`;\n\nexports[`<image> demo: render [preview-popup-container] correctly 1`] = `\n\"<div id=\\\\\"image-demo-preview-popup-container\\\\\" style=\\\\\"width: 100%; height: 400px; position: relative; overflow: hidden; line-height: 400px; text-align: center;\\\\\">\n  <div class=\\\\\"arco-image arco-image-with-footer-inner\\\\\" style=\\\\\"width: 200px;\\\\\"><img class=\\\\\"arco-image-img\\\\\" style=\\\\\"width: 200px;\\\\\">\n    <div class=\\\\\"arco-image-overlay\\\\\">\n      <!--v-if-->\n      <!--v-if-->\n    </div>\n    <!--v-if-->\n    <!--v-if-->\n  </div>\n</div>\"\n`;\n\nexports[`<image> demo: render [progressive-loader] correctly 1`] = `\n\"<div><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\" style=\\\\\"margin-bottom: 20px;\\\\\">\n    <!--v-if--> reload\n  </button></div>\n<div class=\\\\\"arco-image arco-image-with-footer-inner\\\\\" style=\\\\\"width: 200px; height: 200px;\\\\\"><img class=\\\\\"arco-image-img\\\\\" style=\\\\\"width: 200px; height: 200px;\\\\\">\n  <div class=\\\\\"arco-image-overlay\\\\\">\n    <!--v-if-->\n    <!--v-if-->\n  </div>\n  <!--v-if-->\n  <!--v-if-->\n</div>\"\n`;\n"
  },
  {
    "path": "packages/web-vue/components/image/__test__/__snapshots__/index.test.ts.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Image Should show preview on click 1`] = `\n\"<div class=\\\\\"arco-image arco-image-with-footer-inner\\\\\"><img class=\\\\\"arco-image-img\\\\\" src=\\\\\"http://it-does-not-matter.png/\\\\\">\n  <!--v-if-->\n  <!--v-if-->\n  <!--teleport start-->\n  <div class=\\\\\"arco-image-preview\\\\\" style=\\\\\"z-index: 1001; position: fixed; z-index: 1001;\\\\\">\n    <transition-stub name=\\\\\"image-fade\\\\\" appear=\\\\\"false\\\\\" persisted=\\\\\"true\\\\\" css=\\\\\"true\\\\\">\n      <div class=\\\\\"arco-image-preview-mask\\\\\" style=\\\\\"\\\\\"></div>\n    </transition-stub>\n    <div tabindex=\\\\\"0\\\\\" class=\\\\\"arco-image-preview-wrapper\\\\\">\n      <!-- img -->\n      <div class=\\\\\"arco-image-preview-img-container\\\\\" style=\\\\\"transform: scale(1, 1);\\\\\"><img src=\\\\\"http://it-does-not-matter.png/\\\\\" class=\\\\\"arco-image-preview-img\\\\\" style=\\\\\"transform: translate(0px, 0px) rotate(0deg);\\\\\"></div><!-- loading -->\n      <div class=\\\\\"arco-image-preview-loading\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-loading\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n          <path d=\\\\\"M42 24c0 9.941-8.059 18-18 18S6 33.941 6 24 14.059 6 24 6\\\\\"></path>\n        </svg></div><!-- scale value -->\n      <transition-stub name=\\\\\"image-fade\\\\\" appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\">\n        <!--v-if-->\n      </transition-stub><!-- toolbar -->\n      <!--v-if-->\n      <!-- close btn -->\n      <div class=\\\\\"arco-image-preview-close-btn\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-close\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n          <path d=\\\\\"M9.857 9.858 24 24m0 0 14.142 14.142M24 24 38.142 9.858M24 24 9.857 38.142\\\\\"></path>\n        </svg></div><!-- group arrow -->\n      <!--v-if-->\n    </div>\n  </div>\n  <!--teleport end-->\n</div>\"\n`;\n"
  },
  {
    "path": "packages/web-vue/components/image/__test__/demo.test.ts",
    "content": "import demoTest from '../../../scripts/demo-test';\n\ndemoTest('image');\n"
  },
  {
    "path": "packages/web-vue/components/image/__test__/index.test.ts",
    "content": "import { mount } from '@vue/test-utils';\nimport Image from '../index';\nimport getScale from '../utils/get-scale';\n\nconst { Preview, PreviewGroup } = Image;\n\nconst imgSrc = 'http://it-does-not-matter.png/';\n\nasync function getPreviewInstance() {\n  const wrapper = await mount(Preview, {\n    props: {\n      src: imgSrc,\n      defaultVisible: true,\n      renderToBody: false,\n    },\n  });\n  await wrapper.vm.onImgLoad();\n  return wrapper;\n}\n\ndescribe('Image', () => {\n  beforeAll(() => {\n    jest.useFakeTimers();\n  });\n  afterAll(() => {\n    jest.useRealTimers();\n  });\n\n  test('Render image with error src', async () => {\n    const wrapper = await mount(Image, {\n      props: {\n        src: imgSrc,\n      },\n    });\n    await wrapper.vm.onImgLoadError();\n    expect(wrapper.find('.arco-image-error').exists()).toBe(true);\n  });\n\n  test('Footer should work', async () => {\n    const wrapper = await mount(Image, {\n      props: {\n        src: imgSrc,\n        title: 'My title',\n      },\n    });\n    await wrapper.vm.onImgLoaded();\n\n    expect(wrapper.find('.arco-image-footer-caption-title').text()).toBe(\n      'My title'\n    );\n  });\n\n  test('Should show preview on click', async () => {\n    const wrapper = await mount(Image, {\n      props: {\n        src: imgSrc,\n        renderToBody: false,\n      },\n    });\n    await wrapper.vm.onImgLoaded();\n    await wrapper.find('img').trigger('click');\n    expect(wrapper.emitted()).toHaveProperty('preview-visible-change');\n    expect(wrapper.html()).toMatchSnapshot();\n  });\n\n  // Preview\n  test('Preview should close on mask click', async () => {\n    const wrapper = await getPreviewInstance();\n    const maskWrapper = wrapper.find('.arco-image-preview-wrapper');\n    await maskWrapper.trigger('click');\n    expect(wrapper.find('.arco-image-preview-wrapper').exists()).toBe(false);\n  });\n\n  test('Preview should be able to move', async () => {\n    const map: any = {};\n    const _addEventListener = window.addEventListener;\n    Object.defineProperty(window, 'addEventListener', {\n      value: jest.fn().mockImplementation((event, cb) => {\n        map[event] = cb;\n      }),\n    });\n    window.removeEventListener = jest.fn().mockImplementation((event) => {\n      delete map[event];\n    });\n    const wrapper = await getPreviewInstance();\n    const imageElement = wrapper.find('.arco-image-preview-img');\n    await imageElement.trigger('mousedown');\n    expect(imageElement.attributes('class')).toContain(\n      'arco-image-preview-img-moving'\n    );\n    await map.mouseup({ preventDefault: () => {} });\n    expect(imageElement.attributes('class')).not.toContain(\n      'arco-image-preview-img-moving'\n    );\n    Object.defineProperty(window, 'addEventListener', {\n      value: _addEventListener,\n    });\n  });\n\n  test('Preview fullscreen should work', async () => {\n    const wrapper = await getPreviewInstance();\n    const fullscreenAction = wrapper.findAll(\n      '.arco-image-preview-toolbar-action'\n    )[0];\n    await fullscreenAction.trigger('click');\n    expect(\n      wrapper.find('.arco-image-preview-img-container').attributes('style')\n    ).not.toContain('scale(1, 1)');\n  });\n\n  test('Preview rotate right should work', async () => {\n    const wrapper = await getPreviewInstance();\n    const rotateRightAction = wrapper.findAll(\n      '.arco-image-preview-toolbar-action'\n    )[1];\n    await rotateRightAction.trigger('click');\n    expect(\n      wrapper.find('.arco-image-preview-img').attributes('style')\n    ).toContain('rotate(90deg)');\n  });\n\n  test('Preview rotate left should work', async () => {\n    const wrapper = await getPreviewInstance();\n    const rotateLeftAction = wrapper.findAll(\n      '.arco-image-preview-toolbar-action'\n    )[2];\n    await rotateLeftAction.trigger('click');\n    expect(\n      wrapper.find('.arco-image-preview-img').attributes('style')\n    ).toContain('rotate(270deg)');\n  });\n\n  test('Preview zoom in should work', async () => {\n    const wrapper = await getPreviewInstance();\n    const zoomInAction = wrapper.findAll(\n      '.arco-image-preview-toolbar-action'\n    )[3];\n    await zoomInAction.trigger('click');\n    expect(\n      wrapper.find('.arco-image-preview-img-container').attributes('style')\n    ).toContain('scale(1.1, 1.1)');\n  });\n\n  test('Preview zoom out should work', async () => {\n    const wrapper = await getPreviewInstance();\n    const zoomOutAction = wrapper.findAll(\n      '.arco-image-preview-toolbar-action'\n    )[4];\n    await zoomOutAction.trigger('click');\n    expect(\n      wrapper.find('.arco-image-preview-img-container').attributes('style')\n    ).toContain('scale(0.9, 0.9)');\n  });\n\n  // PreviewGroup\n  test('Should handle arrow click correctly', async () => {\n    const wrapper = await mount(PreviewGroup, {\n      props: {\n        srcList: ['https://1.jpg', 'https://2.jpg', 'https://3.jpg'],\n        defaultVisible: true,\n        renderToBody: false,\n      },\n    });\n    const rightIcon = wrapper.find('.arco-image-preview-arrow-right');\n    await rightIcon.trigger('click');\n    expect(wrapper.emitted('change')![0]).toContain(1);\n    const leftIcon = wrapper.find('.arco-image-preview-arrow-left');\n    await leftIcon.trigger('click');\n    expect(wrapper.emitted('change')![1]).toContain(0);\n  });\n\n  // Utils getScale\n  test('Should get scale correctly', () => {\n    expect(getScale(1.3)).toEqual(1.5);\n    expect(getScale(0.79)).toEqual(0.9);\n  });\n});\n"
  },
  {
    "path": "packages/web-vue/components/image/context.ts",
    "content": "import { InjectionKey } from 'vue';\n\nexport type PreviewGroupContext = Readonly<{\n  registerImageUrl: (\n    id: number,\n    url: string,\n    canPreview: boolean\n  ) => () => void;\n  preview: (imageId: number) => void;\n}>;\n\nexport const PreviewGroupInjectionKey: InjectionKey<PreviewGroupContext> =\n  Symbol('PreviewGroupInjectionKey');\n"
  },
  {
    "path": "packages/web-vue/components/image/hooks/use-image-drag.ts",
    "content": "import { nextTick, ref, toRefs, watch, watchEffect } from 'vue';\nimport { off, on } from '../../_utils/dom';\nimport getFixTranslate from '../utils/get-fix-translate';\n\ninterface ImageDragProps {\n  wrapperEl: HTMLElement;\n  imageEl: HTMLElement;\n  scale: number;\n}\n\nexport default function useImageDrag(props: ImageDragProps) {\n  const { wrapperEl, imageEl, scale } = toRefs(props);\n\n  const translate = ref([0, 0]);\n\n  const moving = ref(false);\n\n  let startPageX = 0;\n  let startPageY = 0;\n  let startTranslate = [0, 0];\n\n  // Check and correct the offset\n  const checkAndFixTranslate = () => {\n    if (!wrapperEl.value || !imageEl.value) return;\n    const wrapperRect = wrapperEl.value.getBoundingClientRect();\n    const imgRect = imageEl.value.getBoundingClientRect();\n    const [x, y] = getFixTranslate(\n      wrapperRect,\n      imgRect,\n      translate.value[0],\n      translate.value[1],\n      scale.value\n    );\n    if (x !== translate.value[0] || y !== translate.value[1]) {\n      translate.value = [x, y];\n    }\n  };\n\n  // Picture is moving: calculate and update displacement\n  const onMoving = (e: MouseEvent) => {\n    e.preventDefault && e.preventDefault();\n    const nextX = startTranslate[0] + (e.pageX - startPageX) / scale.value;\n    const nextY = startTranslate[1] + (e.pageY - startPageY) / scale.value;\n    translate.value = [nextX, nextY];\n  };\n\n  // Picture ends moving\n  const onMoveEnd = (e: MouseEvent) => {\n    e.preventDefault && e.preventDefault();\n    moving.value = false;\n    checkAndFixTranslate();\n    offEvents();\n  };\n\n  // Grab the picture and start moving: record the initial data\n  const onMoveStart = (e: MouseEvent) => {\n    if (e.target !== e.currentTarget) return;\n    e.preventDefault && e.preventDefault();\n    moving.value = true;\n\n    startPageX = e.pageX;\n    startPageY = e.pageY;\n    startTranslate = [...translate.value];\n\n    on(window, 'mousemove', onMoving as any, false);\n    on(window, 'mouseup', onMoveEnd as any, false);\n  };\n\n  function offEvents() {\n    off(window, 'mousemove', onMoving as any, false);\n    off(window, 'mouseup', onMoveEnd as any, false);\n  }\n\n  // Initialization, each time the image changes will be re-initialized\n  watchEffect((onInvalidate) => {\n    imageEl.value && on(imageEl.value, 'mousedown', onMoveStart as any);\n\n    onInvalidate(() => {\n      imageEl.value && off(imageEl.value, 'mousedown', onMoveStart as any);\n      offEvents();\n    });\n  });\n\n  // scale to correct the offset\n  watch([scale], () => {\n    nextTick(() => checkAndFixTranslate());\n  });\n\n  return {\n    translate,\n    moving,\n    resetTranslate() {\n      translate.value = [0, 0];\n    },\n  };\n}\n"
  },
  {
    "path": "packages/web-vue/components/image/hooks/use-image-load-status.ts",
    "content": "import { computed, ref } from 'vue';\n\ntype ImageLoadStatusType = 'beforeLoad' | 'loading' | 'error' | 'loaded';\n\nexport default function useImageLoadStatus(defaultValue?: ImageLoadStatusType) {\n  const status = ref<ImageLoadStatusType>(defaultValue || 'beforeLoad');\n  const isBeforeLoad = computed(() => status.value === 'beforeLoad');\n  const isLoading = computed(() => status.value === 'loading');\n  const isError = computed(() => status.value === 'error');\n  const isLoaded = computed(() => status.value === 'loaded');\n\n  return {\n    status,\n    isBeforeLoad,\n    isLoading,\n    isError,\n    isLoaded,\n    setLoadStatus: (newStatus: ImageLoadStatusType) => {\n      status.value = newStatus;\n    },\n  };\n}\n"
  },
  {
    "path": "packages/web-vue/components/image/image-footer.vue",
    "content": "<template>\n  <div :class=\"prefixCls\">\n    <div v-if=\"title || description\" :class=\"`${prefixCls}-caption`\">\n      <div v-if=\"title\" :class=\"`${prefixCls}-caption-title`\" :title=\"title\">\n        {{ title }}\n      </div>\n      <div\n        v-if=\"description\"\n        :class=\"`${prefixCls}-caption-description`\"\n        :title=\"description\"\n      >\n        {{ description }}\n      </div>\n    </div>\n    <div v-if=\"$slots.extra\" :class=\"`${prefixCls}-extra`\">\n      <slot name=\"extra\" />\n    </div>\n  </div>\n</template>\n<script lang=\"ts\">\nimport { defineComponent } from 'vue';\nimport { getPrefixCls } from '../_utils/global-config';\n\nexport default defineComponent({\n  name: 'ImageFooter',\n  props: {\n    title: {\n      type: String,\n    },\n    description: {\n      type: String,\n    },\n  },\n  setup() {\n    const prefixCls = getPrefixCls('image-footer');\n\n    return {\n      prefixCls,\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/image/image.vue",
    "content": "<template>\n  <div :class=\"wrapperClassNames\" :style=\"wrapperStyles\">\n    <img\n      ref=\"refImg\"\n      :class=\"`${prefixCls}-img`\"\n      v-bind=\"imgProps\"\n      :style=\"{ ...imgStyle, ...fitStyle }\"\n      :title=\"title\"\n      :alt=\"alt\"\n      @load=\"onImgLoaded\"\n      @error=\"onImgLoadError\"\n      @click=\"onImgClick\"\n    />\n    <div v-if=\"!isLoaded\" :class=\"`${prefixCls}-overlay`\">\n      <slot v-if=\"isError\" name=\"error\">\n        <div :class=\"`${prefixCls}-error`\">\n          <div :class=\"`${prefixCls}-error-icon`\">\n            <slot name=\"error-icon\">\n              <IconImageClose />\n            </slot>\n          </div>\n          <div v-if=\"alt || description\" :class=\"`${prefixCls}-error-alt`\">\n            {{ alt || description }}\n          </div>\n        </div>\n      </slot>\n      <slot v-if=\"isLoading && (showLoader || $slots.loader)\" name=\"loader\">\n        <div :class=\"[`${prefixCls}-loader`]\">\n          <div :class=\"`${prefixCls}-loader-spin`\">\n            <IconLoading />\n            <div :class=\"`${prefixCls}-loader-spin-text`\">\n              {{ t('image.loading') }}\n            </div>\n          </div>\n        </div>\n      </slot>\n    </div>\n    <ImageFooter\n      v-if=\"showFooter\"\n      :class=\"footerClass\"\n      :prefix-cls=\"prefixCls\"\n      :title=\"title\"\n      :description=\"description\"\n    >\n      <template v-if=\"$slots.extra\" #extra>\n        <slot name=\"extra\" />\n      </template>\n    </ImageFooter>\n    <ImagePreview\n      v-if=\"isLoaded && mergePreview\"\n      :src=\"src\"\n      v-bind=\"previewProps\"\n      :visible=\"mergedPreviewVisible\"\n      :render-to-body=\"renderToBody\"\n      @close=\"onPreviewClose\"\n    >\n      <template #actions>\n        <slot name=\"preview-actions\" />\n      </template>\n    </ImagePreview>\n  </div>\n</template>\n<script lang=\"ts\">\nimport {\n  defineComponent,\n  PropType,\n  toRefs,\n  computed,\n  watchEffect,\n  ref,\n  reactive,\n  inject,\n  StyleValue,\n  CSSProperties,\n} from 'vue';\nimport type { ImagePreviewProps } from './interface';\nimport IconImageClose from '../icon/icon-image-close';\nimport IconLoading from '../icon/icon-loading';\nimport ImageFooter from './image-footer.vue';\nimport ImagePreview from './preview.vue';\nimport { getPrefixCls } from '../_utils/global-config';\nimport useImageLoadState from './hooks/use-image-load-status';\nimport { isServerRendering } from '../_utils/dom';\nimport { normalizeImageSizeProp } from './utils';\nimport { omit } from '../_utils/omit';\nimport useMergeState from '../_hooks/use-merge-state';\nimport { PreviewGroupInjectionKey } from './context';\nimport { useI18n } from '../locale';\nimport { isBoolean } from '../_utils/is';\n\nlet uuid = 0;\n\nexport default defineComponent({\n  name: 'Image',\n  components: {\n    IconImageClose,\n    IconLoading,\n    ImageFooter,\n    ImagePreview,\n  },\n  inheritAttrs: false,\n  props: {\n    renderToBody: {\n      type: Boolean,\n      default: true,\n    },\n    /**\n     * @zh 图片获取地址\n     * @en Image src\n     */\n    src: {\n      type: String,\n    },\n    /**\n     * @zh 图片显示宽度\n     * @en Image width\n     */\n    width: {\n      type: [String, Number] as PropType<string | number>,\n    },\n    /**\n     * @zh 图片显示高度\n     * @en Image height\n     */\n    height: {\n      type: [String, Number] as PropType<string | number>,\n    },\n    /**\n     * @zh 标题\n     * @en Title\n     */\n    title: {\n      type: String,\n    },\n    /**\n     * @zh 描述，将显示在底部，如果 alt 没有值，则会将其设置给 alt\n     * @en Description, will be displayed at the bottom. if alt has no value, it will be set to alt\n     */\n    description: {\n      type: String,\n    },\n    /**\n     * @zh 确定图片如何适应容器框\n     * @en indicate how the image should be resized to fit its container\n     */\n    fit: {\n      type: String as PropType<\n        'contain' | 'cover' | 'fill' | 'none' | 'scale-down'\n      >,\n    },\n    /**\n     * @zh 图片的文字描述\n     * @en Text description of the image\n     */\n    alt: {\n      type: String,\n    },\n    /**\n     * @zh 是否隐藏 footer（2.36.0 版本支持 'never' 参数，支持在加载错误时显示底部内容）\n     * @en Whether to hide footer (Version 2.36.0 supports the 'never' parameter, which supports displaying bottom content when loading errors)\n     */\n    hideFooter: {\n      type: [Boolean, String] as PropType<boolean | 'never'>,\n      default: false,\n    },\n    /**\n     * @zh 底部显示的位置\n     * @en The position shown at the bottom\n     */\n    footerPosition: {\n      type: String as PropType<'inner' | 'outer'>,\n      default: 'inner',\n    },\n    /**\n     * @zh 是否显示加载中效果\n     * @en Whether to show the loading effect\n     */\n    showLoader: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 是否开启预览\n     * @en Whether to enable preview\n     */\n    preview: {\n      type: Boolean,\n      default: true,\n    },\n    /**\n     * @zh 控制预览的打开状态，可与 previewVisibleChange 配合使用\n     * @en Control the open state of the preview, can be used in conjunction with previewVisibleChange\n     * @vModel\n     */\n    previewVisible: {\n      type: Boolean,\n      default: undefined,\n    },\n    /**\n     * @zh 预览的默认打开状态\n     * @en The default open state of the preview\n     */\n    defaultPreviewVisible: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 预览的配置项（所有选项都是可选的） [ImagePreviewProps](#image-preview%20Props)\n     * @en Preview configuration items (all options are optional) [ImagePreviewProps](#image-preview%20Props)\n     */\n    previewProps: {\n      type: Object as PropType<ImagePreviewProps>,\n    },\n    /**\n     * @zh 底部显示区域的类名\n     * @en The class name of the bottom display area\n     * @version 2.23.0\n     */\n    footerClass: {\n      type: [String, Array, Object],\n    },\n  },\n  emits: [\n    /**\n     * @zh 预览的打开和关闭事件\n     * @en Preview opening and closing events\n     * @param {boolean} visible\n     */\n    'preview-visible-change',\n    'update:previewVisible',\n  ],\n  /**\n   * @zh 自定义错误状态的图标\n   * @en Customize the icon of error content.\n   * @slot error-icon\n   */\n  /**\n   * @zh 自定义错误状态内容\n   * @en Customize error content.\n   * @slot error\n   */\n  /**\n   * @zh 自定义加载状态效果\n   * @en Customize loading effect.\n   * @slot loader\n   */\n  /**\n   * @zh 底部额外内容\n   * @en Extra content at the bottom\n   * @slot extra\n   */\n  setup(props, { attrs, slots, emit }) {\n    const { t } = useI18n();\n    const {\n      height,\n      width,\n      hideFooter,\n      title,\n      description,\n      src,\n      footerPosition,\n      defaultPreviewVisible,\n      previewVisible,\n      preview,\n      previewProps,\n    } = toRefs(props);\n\n    const groupContext = inject(PreviewGroupInjectionKey, undefined);\n\n    const prefixCls = getPrefixCls('image');\n\n    const refImg = ref();\n\n    const { isLoaded, isError, isLoading, setLoadStatus } = useImageLoadState();\n\n    const sizeStyle = computed(() => ({\n      width: normalizeImageSizeProp(width?.value),\n      height: normalizeImageSizeProp(height?.value),\n    }));\n\n    const fitStyle = computed<CSSProperties>(() => {\n      if (props.fit) {\n        return { objectFit: props.fit };\n      }\n      return {};\n    });\n\n    const wrapperClassNames = computed(() => [\n      `${prefixCls}`,\n      {\n        [`${prefixCls}-loading`]: isLoading.value,\n        [`${prefixCls}-loading-error`]: isError.value,\n        [`${prefixCls}-with-footer-inner`]:\n          isLoaded && showFooter && footerPosition.value === 'inner',\n        [`${prefixCls}-with-footer-outer`]:\n          isLoaded && showFooter && footerPosition.value === 'outer',\n      },\n      attrs.class,\n    ]);\n\n    const wrapperStyles = computed<StyleValue[]>(() => [\n      sizeStyle.value,\n      attrs.style as StyleValue,\n    ]);\n\n    const showFooter = computed(() => {\n      if (!(title?.value || description?.value || slots.extra)) {\n        return false;\n      }\n      if (isBoolean(hideFooter.value))\n        return !hideFooter.value && isLoaded.value;\n      return hideFooter.value === 'never';\n    });\n\n    const imgProps = computed(() => omit(attrs, ['class', 'style']));\n\n    const [mergedPreviewVisible, setPreviewVisible] = useMergeState(\n      defaultPreviewVisible.value,\n      reactive({\n        value: previewVisible,\n      })\n    );\n\n    const mergePreview = computed(\n      () => !groupContext?.preview && preview.value\n    );\n\n    watchEffect(() => {\n      if (isServerRendering || !refImg.value) return;\n      refImg.value.src = src?.value;\n      setLoadStatus('loading');\n    });\n\n    const imageId = uuid++;\n    watchEffect((onInvalidate) => {\n      const unRegister = groupContext?.registerImageUrl?.(\n        imageId,\n        (previewProps?.value?.src ?? src?.value) || '',\n        preview.value\n      );\n      onInvalidate(() => {\n        unRegister?.();\n      });\n    });\n\n    function onImgLoaded() {\n      setLoadStatus('loaded');\n    }\n\n    function onImgLoadError() {\n      setLoadStatus('error');\n    }\n\n    function onImgClick() {\n      if (!preview.value) return;\n      if (groupContext?.preview) {\n        groupContext.preview(imageId);\n      } else {\n        emit('preview-visible-change', true);\n        setPreviewVisible(true);\n      }\n    }\n\n    function onPreviewClose() {\n      emit('preview-visible-change', false);\n      setPreviewVisible(false);\n    }\n\n    return {\n      t,\n      refImg,\n      prefixCls,\n      wrapperClassNames,\n      wrapperStyles,\n      showFooter,\n      imgProps,\n      imgStyle: sizeStyle,\n      isLoaded,\n      isError,\n      isLoading,\n      mergedPreviewVisible,\n      mergePreview,\n      onImgLoaded,\n      onImgLoadError,\n      onImgClick,\n      onPreviewClose,\n      fitStyle,\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/image/index.ts",
    "content": "import { App } from 'vue';\nimport { ArcoOptions } from '../_utils/types';\nimport { getComponentPrefix, setGlobalConfig } from '../_utils/global-config';\nimport _Image from './image.vue';\nimport _ImagePreview from './preview.vue';\nimport _ImagePreviewGroup from './preview-group.vue';\nimport _ImagePreviewAction from './preview-action';\n\nconst Image = Object.assign(_Image, {\n  Preview: _ImagePreview,\n  PreviewGroup: _ImagePreviewGroup,\n  install: (app: App, options?: ArcoOptions) => {\n    setGlobalConfig(app, options);\n    const componentPrefix = getComponentPrefix(options);\n\n    app.component(componentPrefix + _Image.name, _Image);\n    app.component(componentPrefix + _ImagePreview.name, _ImagePreview);\n    app.component(\n      componentPrefix + _ImagePreviewGroup.name,\n      _ImagePreviewGroup\n    );\n    app.component(\n      componentPrefix + _ImagePreviewAction.name,\n      _ImagePreviewAction\n    );\n  },\n});\n\nexport type ImageInstance = InstanceType<typeof _Image>;\nexport type ImagePreviewInstance = InstanceType<typeof _ImagePreview>;\nexport type ImagePreviewGroupInstance = InstanceType<typeof _ImagePreviewGroup>;\nexport type ImagePreviewActionInstance = InstanceType<\n  typeof _ImagePreviewAction\n>;\n\nexport {\n  _ImagePreview as ImagePreview,\n  _ImagePreviewGroup as ImagePreviewGroup,\n  _ImagePreviewAction as ImagePreviewAction,\n};\n\nexport default Image;\n"
  },
  {
    "path": "packages/web-vue/components/image/interface.ts",
    "content": "import { Slot } from 'vue';\n\nexport interface ImageProps {\n  src?: string;\n  width?: string | number;\n  height?: string | number;\n  title?: string;\n  description?: string;\n  fit?: '' | 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';\n  alt?: string;\n  hideFooter: boolean;\n  footerPosition: 'inner' | 'outer';\n  showLoader: boolean;\n  preview: boolean;\n  previewVisible?: boolean;\n  defaultPreviewVisible: boolean;\n  previewProps?: Partial<ImagePreviewProps>;\n  extra?: Slot;\n  error?: Slot;\n  loader?: Slot;\n  onPreviewVisibleChange?: (visible: boolean) => void;\n}\n\nexport interface ImagePreviewProps {\n  src?: string;\n  visible?: boolean;\n  defaultVisible?: boolean;\n  maskClosable?: boolean;\n  closable?: boolean;\n  actionsLayout?: string[];\n  popupContainer?: HTMLElement | string;\n  escToClose?: boolean;\n  keyboard?: boolean;\n  wheelZoom?: boolean;\n  defaultScale?: number;\n  zoomRate?: number;\n  groupArrowProps?: Record<string, any>;\n  onClose?: () => void;\n}\n\nexport interface ImagePreviewGroupProps\n  extends Omit<ImagePreviewProps, 'src' | 'onClose'> {\n  srcList?: string[];\n  current?: number;\n  defaultCurrent: number;\n  infinite: boolean;\n  onChange?: (index: number, preIndex: number) => void;\n  onPreviewVisibleChange?: (visible: boolean) => void;\n}\n"
  },
  {
    "path": "packages/web-vue/components/image/preview-action.tsx",
    "content": "import { defineComponent } from 'vue';\nimport { getPrefixCls } from '../_utils/global-config';\nimport Tooltip from '../tooltip';\n\n/**\n * @version 2.17.0\n */\nexport default defineComponent({\n  name: 'ImagePreviewAction',\n  components: {\n    Tooltip,\n  },\n  inheritAttrs: false,\n  props: {\n    /**\n     * @zh 名称\n     * @en the name of the action\n     */\n    name: {\n      type: String,\n    },\n    /**\n     * @zh 是否禁用\n     * @en Whether to disable the action\n     */\n    disabled: {\n      type: Boolean,\n    },\n  },\n  setup(props, { slots, attrs }) {\n    const prefixCls = getPrefixCls('image-preview-toolbar-action');\n    return () => {\n      const { name, disabled } = props;\n      const children = slots.default?.();\n\n      if (!children || !children.length) return null;\n\n      const content = (\n        <div\n          class={[\n            `${prefixCls}`,\n            {\n              [`${prefixCls}-disabled`]: disabled,\n            },\n          ]}\n          onMousedown={(e) => {\n            /** 解决快速点击按钮的情况下 tooltip 被选中 */\n            e.preventDefault();\n          }}\n          {...attrs}\n        >\n          <span class={`${prefixCls}-content`}>{children}</span>\n        </div>\n      );\n\n      return name ? (\n        <Tooltip class={`${prefixCls}-tooltip`} content={name}>\n          {content}\n        </Tooltip>\n      ) : (\n        content\n      );\n    };\n  },\n});\n"
  },
  {
    "path": "packages/web-vue/components/image/preview-arrow.vue",
    "content": "<template>\n  <div :class=\"prefixCls\">\n    <div\n      :class=\"[\n        `${prefixCls}-left`,\n        {\n          [`${prefixCls}-disabled`]: !onPrev,\n        },\n      ]\"\n      @click=\"\n        (e) => {\n          e.preventDefault();\n          onPrev && onPrev();\n        }\n      \"\n    >\n      <icon-left />\n    </div>\n    <div\n      :class=\"[\n        `${prefixCls}-right`,\n        {\n          [`${prefixCls}-disabled`]: !onNext,\n        },\n      ]\"\n      @click=\"\n        (e) => {\n          e.preventDefault();\n          onNext && onNext();\n        }\n      \"\n    >\n      <icon-right />\n    </div>\n  </div>\n</template>\n<script lang=\"ts\">\nimport { defineComponent } from 'vue';\nimport { getPrefixCls } from '../_utils/global-config';\nimport IconLeft from '../icon/icon-left';\nimport IconRight from '../icon/icon-right';\n\nexport default defineComponent({\n  name: 'ImagePreviewArrow',\n  components: {\n    IconLeft,\n    IconRight,\n  },\n  props: {\n    onPrev: {\n      type: Function,\n    },\n    onNext: {\n      type: Function,\n    },\n  },\n  setup() {\n    const prefixCls = getPrefixCls('image-preview-arrow');\n    return {\n      prefixCls,\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/image/preview-group.vue",
    "content": "<template>\n  <slot />\n  <ImagePreview\n    v-bind=\"{ ...$attrs, groupArrowProps }\"\n    in-group\n    :src=\"currentUrl\"\n    :visible=\"mergedVisible\"\n    :mask-closable=\"maskClosable\"\n    :closable=\"closable\"\n    :actions-layout=\"actionsLayout\"\n    :popup-container=\"popupContainer\"\n    :render-to-body=\"renderToBody\"\n    @close=\"onClose\"\n  >\n    <template v-if=\"$slots.actions\" #actions>\n      <slot name=\"actions\" :url=\"currentUrl\" />\n    </template>\n  </ImagePreview>\n</template>\n<script lang=\"tsx\">\nimport {\n  defineComponent,\n  PropType,\n  reactive,\n  toRefs,\n  provide,\n  computed,\n  ref,\n  watch,\n} from 'vue';\nimport useMergeState from '../_hooks/use-merge-state';\nimport { ImagePreviewGroupProps } from './interface';\nimport ImagePreview from './preview.vue';\nimport { PreviewGroupContext, PreviewGroupInjectionKey } from './context';\nimport { isArray, isUndefined } from '../_utils/is';\n\nexport default defineComponent({\n  name: 'ImagePreviewGroup',\n  components: {\n    ImagePreview,\n  },\n  inheritAttrs: false,\n  props: {\n    renderToBody: {\n      type: Boolean,\n      default: true,\n    },\n    /**\n     * @zh 图片列表（设置了本属性之后，将不再收集 a-image 子组件的图片信息）\n     * @en Picture list (after setting this property, the picture information of a-image subcomponent will no longer be collected)\n     */\n    srcList: {\n      type: Array as PropType<string[]>,\n    },\n    /**\n     * @zh 当前展示的图片的下标\n     * @en The index of the currently displayed image\n     * @vModel\n     */\n    current: {\n      type: Number,\n    },\n    /**\n     * @zh 第一张展示的图片的下标\n     * @en The index of the first image shown\n     */\n    defaultCurrent: {\n      type: Number,\n      default: 0,\n    },\n    /**\n     * @zh 是否无限循环\n     * @en Whether to loop infinitely\n     */\n    infinite: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 是否可见，受控属性\n     * @en Whether is visible\n     * @vModel\n     */\n    visible: {\n      type: Boolean,\n      default: undefined,\n    },\n    /**\n     * @zh 默认是否可见，非受控\n     * @en Default visibility\n     */\n    defaultVisible: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 点击 mask 是否触发关闭\n     * @en Whether to close the modal when mask is clicked\n     */\n    maskClosable: {\n      type: Boolean,\n      default: true,\n    },\n    /**\n     * @zh 是否显示关闭按钮\n     * @en Whether to show close button\n     */\n    closable: {\n      type: Boolean,\n      default: true,\n    },\n    /**\n     * @zh 控制条的布局\n     * @en Layout of action list\n     */\n    actionsLayout: {\n      type: Array as PropType<string[]>,\n      default: () => [\n        'fullScreen',\n        'rotateRight',\n        'rotateLeft',\n        'zoomIn',\n        'zoomOut',\n        'originalSize',\n      ],\n    },\n    /**\n     * @zh 设置弹出框的挂载点，同 `teleport` 的 `to`，缺省值是 document.body\n     * @en Set the mount point of the pop-up box, the same as the `to` of `teleport`, the default value is document.body\n     */\n    popupContainer: {\n      type: [String, Object] as PropType<string | HTMLElement>,\n    },\n  },\n  emits: [\n    /**\n     * @zh 切换图片\n     * @en Image switch\n     * @param {number} index\n     */\n    'change',\n    'update:current',\n    /**\n     * @zh 预览的打开和关闭\n     * @en Preview visibility change\n     * @param {boolean} visible\n     */\n    'visible-change',\n    'update:visible',\n  ],\n  /**\n   * @zh 自定义额外的操作项\n   * @en Customize additional action items\n   * @slot actions\n   * @version 2.46.0\n   */\n  setup(props, { emit }) {\n    const {\n      srcList,\n      visible,\n      defaultVisible,\n      current,\n      defaultCurrent,\n      infinite,\n    } = toRefs(props);\n\n    const [mergedVisible, setLocalVisible] = useMergeState(\n      defaultVisible.value,\n      reactive({\n        value: visible,\n      })\n    );\n    const setVisible = (newVisible: boolean) => {\n      if (newVisible !== mergedVisible.value) {\n        emit('visible-change', newVisible);\n        emit('update:visible', newVisible);\n        setLocalVisible(newVisible);\n      }\n    };\n\n    const propImageUrlMap = computed(\n      () =>\n        new Map(\n          isArray(srcList?.value)\n            ? srcList?.value.map((url, index) => [\n                index,\n                { url, canPreview: true },\n              ])\n            : []\n        )\n    );\n\n    const imageUrlMap = ref(new Map(propImageUrlMap.value || []));\n\n    const imageIdList = computed(() => Array.from(imageUrlMap.value.keys()));\n\n    const imageCount = computed(() => imageIdList.value.length);\n\n    function registerImageUrl(id: number, url: string, canPreview: boolean) {\n      if (!propImageUrlMap.value.has(id))\n        imageUrlMap.value.set(id, {\n          url,\n          canPreview,\n        });\n\n      return function unRegisterPreviewUrl() {\n        if (!propImageUrlMap.value.has(id)) {\n          imageUrlMap.value.delete(id);\n        }\n      };\n    }\n\n    watch(propImageUrlMap, () => {\n      imageUrlMap.value = new Map(propImageUrlMap.value || []);\n    });\n\n    const [currentIndex, setLocalCurrentIndex] = useMergeState(\n      defaultCurrent.value,\n      reactive({\n        value: current,\n      })\n    );\n    const setCurrentIndex = (index: number) => {\n      if (index !== currentIndex.value) {\n        emit('change', index);\n        emit('update:current', index);\n        setLocalCurrentIndex(index);\n      }\n    };\n\n    const currentId = computed(() => imageIdList.value[currentIndex.value]);\n    const setCurrentId = (nextId: number) => {\n      const nextIndex = imageIdList.value.indexOf(nextId);\n      if (nextIndex !== currentIndex.value) {\n        setCurrentIndex(nextIndex);\n      }\n    };\n\n    const currentUrl = computed(\n      () => imageUrlMap.value.get(currentId.value)?.url\n    );\n\n    provide<PreviewGroupContext>(\n      PreviewGroupInjectionKey,\n      reactive({\n        registerImageUrl,\n        preview: (imageId: number) => {\n          setVisible(true);\n          setCurrentId(imageId);\n        },\n      })\n    );\n\n    const nextIndex = computed(() => {\n      const findNext = (start: number, end: number) => {\n        for (let i = start; i <= end; i++) {\n          const id = imageIdList.value[i];\n          if (imageUrlMap.value.get(id)?.canPreview) {\n            return i;\n          }\n        }\n        return undefined;\n      };\n\n      const next = findNext(currentIndex.value + 1, imageCount.value - 1);\n      return isUndefined(next) && infinite.value\n        ? findNext(0, currentIndex.value - 1)\n        : next;\n    });\n\n    const prevIndex = computed(() => {\n      const findPrev = (start: number, end: number) => {\n        for (let i = start; i >= end; i--) {\n          const id = imageIdList.value[i];\n          if (imageUrlMap.value.get(id)?.canPreview) {\n            return i;\n          }\n        }\n        return undefined;\n      };\n\n      const prev = findPrev(currentIndex.value - 1, 0);\n      return isUndefined(prev) && infinite.value\n        ? findPrev(imageCount.value - 1, currentIndex.value + 1)\n        : prev;\n    });\n\n    const onPrev = computed(() =>\n      !isUndefined(prevIndex.value)\n        ? () => {\n            !isUndefined(prevIndex.value) && setCurrentIndex(prevIndex.value);\n          }\n        : undefined\n    );\n\n    const onNext = computed(() =>\n      !isUndefined(nextIndex.value)\n        ? () => {\n            !isUndefined(nextIndex.value) && setCurrentIndex(nextIndex.value);\n          }\n        : undefined\n    );\n\n    return {\n      mergedVisible,\n      currentUrl,\n      prevIndex,\n      nextIndex,\n      onClose() {\n        setVisible(false);\n      },\n      groupArrowProps: reactive({\n        onPrev,\n        onNext,\n      }),\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/image/preview-toolbar.vue",
    "content": "<template>\n  <div :class=\"prefixCls\">\n    <PreviewAction\n      v-for=\"action in resultActions\"\n      :key=\"action.key\"\n      :name=\"action.name\"\n      :disabled=\"action.disabled\"\n      @click=\"action.onClick\"\n    >\n      <RenderFunction :render-func=\"action.content\" />\n    </PreviewAction>\n    <slot />\n  </div>\n</template>\n<script lang=\"tsx\">\nimport { defineComponent, PropType, toRefs, computed } from 'vue';\nimport RenderFunction, { RenderFunc } from '../_components/render-function';\nimport { getPrefixCls } from '../_utils/global-config';\nimport PreviewAction from './preview-action';\n\ninterface ActionType {\n  key: string;\n  name: string;\n  content: RenderFunc;\n  onClick: () => void;\n  disabled?: boolean;\n}\n\nexport default defineComponent({\n  name: 'ImagePreviewToolbar',\n  components: {\n    RenderFunction,\n    PreviewAction,\n  },\n  props: {\n    actions: {\n      type: Array as PropType<ActionType[]>,\n      default: () => [],\n    },\n    /** 控制条的布局 */\n    actionsLayout: {\n      type: Array as PropType<string[]>,\n      default: () => [],\n    },\n  },\n  setup(props) {\n    const { actions, actionsLayout } = toRefs(props);\n\n    const prefixCls = getPrefixCls('image-preview-toolbar');\n\n    const resultActions = computed(() => {\n      // 根据 layout 过滤\n      const actionsLayoutSet = new Set(actionsLayout.value);\n      const filterWithLayout = (item: ActionType) =>\n        actionsLayoutSet.has(item.key);\n      const filteredActions = actions.value.filter(filterWithLayout);\n\n      // 根据 layout 排序\n      return filteredActions.sort((pre, cur) => {\n        const preIndex = actionsLayout.value.indexOf(pre.key);\n        const curIndex = actionsLayout.value.indexOf(cur.key);\n        return preIndex > curIndex ? 1 : -1;\n      });\n    });\n\n    return {\n      prefixCls,\n      resultActions,\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/image/preview.vue",
    "content": "<template>\n  <teleport :to=\"container\" :disabled=\"!renderToBody\">\n    <div :class=\"classNames\" :style=\"wrapperStyles\">\n      <transition\n        name=\"image-fade\"\n        @before-enter=\"\n          (el) => el.parentElement && (el.parentElement.style.display = 'block')\n        \"\n        @after-leave=\"\n          (el) => el.parentElement && (el.parentElement.style.display = '')\n        \"\n      >\n        <div v-show=\"mergedVisible\" :class=\"`${prefixCls}-mask`\" />\n      </transition>\n      <div\n        v-if=\"mergedVisible\"\n        ref=\"refWrapper\"\n        tabindex=\"0\"\n        :class=\"`${prefixCls}-wrapper`\"\n        @click=\"onMaskClick\"\n        @wheel.prevent.stop=\"onWheel\"\n      >\n        <!-- img -->\n        <div\n          :class=\"`${prefixCls}-img-container`\"\n          :style=\"{ transform: `scale(${scale}, ${scale})` }\"\n          @click=\"onMaskClick\"\n        >\n          <img\n            ref=\"refImage\"\n            :key=\"src\"\n            :src=\"src\"\n            :class=\"[\n              `${prefixCls}-img`,\n              {\n                [`${prefixCls}-img-moving`]: moving,\n              },\n            ]\"\n            :style=\"{\n              transform: `translate(${translate[0]}px, ${translate[1]}px) rotate(${rotate}deg)`,\n            }\"\n            @load=\"onImgLoad\"\n            @error=\"onImgError\"\n          />\n        </div>\n\n        <!-- loading -->\n        <div v-if=\"isLoading\" :class=\"`${prefixCls}-loading`\">\n          <IconLoading />\n        </div>\n\n        <!-- scale value -->\n        <transition name=\"image-fade\">\n          <div v-if=\"scaleValueVisible\" :class=\"`${prefixCls}-scale-value`\">\n            {{ (scale * 100).toFixed(0) }}%\n          </div>\n        </transition>\n\n        <!-- toolbar -->\n        <PreviewToolbar\n          v-if=\"isLoaded && actionsLayout.length\"\n          :actions=\"actions\"\n          :actions-layout=\"actionsLayout\"\n        >\n          <slot name=\"actions\" />\n        </PreviewToolbar>\n\n        <!-- close btn -->\n        <div\n          v-if=\"closable\"\n          :class=\"`${prefixCls}-close-btn`\"\n          @click=\"onCloseClick\"\n        >\n          <IconClose />\n        </div>\n\n        <!-- group arrow -->\n        <PreviewArrow v-if=\"inGroup\" v-bind=\"groupArrowProps\" />\n      </div>\n    </div>\n  </teleport>\n</template>\n<script lang=\"tsx\">\nimport {\n  computed,\n  defineComponent,\n  PropType,\n  reactive,\n  watch,\n  toRefs,\n  ref,\n  h,\n  CSSProperties,\n  onBeforeUnmount,\n  nextTick,\n} from 'vue';\nimport useMergeState from '../_hooks/use-merge-state';\nimport { getPrefixCls } from '../_utils/global-config';\nimport { throttleByRaf } from '../_utils/throttle-by-raf';\nimport { KEYBOARD_KEY } from '../_utils/keyboard';\nimport { off, on } from '../_utils/dom';\nimport PreviewArrow from './preview-arrow.vue';\nimport PreviewToolbar from './preview-toolbar.vue';\nimport useImageLoadStatus from './hooks/use-image-load-status';\nimport useImageDrag from './hooks/use-image-drag';\nimport IconLoading from '../icon/icon-loading';\nimport IconClose from '../icon/icon-close';\nimport IconZoomOut from '../icon/icon-zoom-out';\nimport IconZoomIn from '../icon/icon-zoom-in';\nimport IconFullscreen from '../icon/icon-fullscreen';\nimport IconRotateLeft from '../icon/icon-rotate-left';\nimport IconRotateRight from '../icon/icon-rotate-right';\nimport IconOriginalSize from '../icon/icon-original-size';\nimport usePopupOverHidden from '../_hooks/use-popup-overflow-hidden';\nimport usePopupContainer from '../_hooks/use-popup-container';\nimport getScale, {\n  getScaleByRate,\n  minScale,\n  maxScale,\n} from './utils/get-scale';\nimport { useI18n } from '../locale';\nimport usePopupManager from '../_hooks/use-popup-manager';\n\nconst ROTATE_STEP = 90;\n\nexport default defineComponent({\n  name: 'ImagePreview',\n  components: {\n    PreviewArrow,\n    PreviewToolbar,\n    IconLoading,\n    IconClose,\n  },\n  props: {\n    renderToBody: {\n      type: Boolean,\n      default: true,\n    },\n    /**\n     * @zh 图片获取地址\n     * @en Image src\n     */\n    src: {\n      type: String,\n    },\n    /**\n     * @zh 是否可见\n     * @en Whether is visible\n     * @vModel\n     */\n    visible: {\n      type: Boolean,\n      default: undefined,\n    },\n    /**\n     * @zh 默认是否可见，非受控\n     * @en Default visibility\n     */\n    defaultVisible: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 点击 mask 是否触发关闭\n     * @en Whether to close the modal when mask is clicked\n     */\n    maskClosable: {\n      type: Boolean,\n      default: true,\n    },\n    /**\n     * @zh 是否显示关闭按钮\n     * @en Whether to show close button\n     */\n    closable: {\n      type: Boolean,\n      default: true,\n    },\n    /**\n     * @zh 操作项的布局\n     * @en Layout of action list\n     */\n    actionsLayout: {\n      type: Array as PropType<string[]>,\n      default: () => [\n        'fullScreen',\n        'rotateRight',\n        'rotateLeft',\n        'zoomIn',\n        'zoomOut',\n        'originalSize',\n      ],\n    },\n    /**\n     * @zh 设置弹出框的挂载点，同 `teleport` 的 `to`，缺省值是 document.body\n     * @en Set the mount point of the pop-up box, the same as the `to` of `teleport`, the default value is document.body\n     */\n    popupContainer: {\n      type: [Object, String] as PropType<HTMLElement | string>,\n    },\n    inGroup: {\n      type: Boolean,\n      default: false,\n    },\n    groupArrowProps: {\n      type: Object,\n      default: () => ({}),\n    },\n    /**\n     * @zh 是否支持 ESC 键关闭预览\n     * @en Whether to support the ESC key to close the preview\n     */\n    escToClose: {\n      type: Boolean,\n      default: true,\n    },\n    /**\n     * @zh 是否开启滚轮缩放\n     * @en Whether to enable wheel zoom\n     */\n    wheelZoom: {\n      type: Boolean,\n      default: true,\n    },\n    /**\n     * @zh 是否开启键盘控制\n     * @en Whether to enable keyboard shortcuts\n     */\n    keyboard: {\n      type: Boolean,\n      default: true,\n    },\n    /**\n     * @zh 默认缩放比\n     * @en Default scale\n     */\n    defaultScale: {\n      type: Number,\n      default: 1,\n    },\n    /**\n     * @zh 缩放速率，仅对滚动缩放生效\n     * @en Zoom rate, only for scroll zoom\n     */\n    zoomRate: {\n      type: Number,\n      default: 1.1,\n    },\n  },\n  emits: [\n    /**\n     * @zh 关闭事件\n     * @en Close event\n     */\n    'close',\n    'update:visible',\n  ],\n  /**\n   * @zh 自定义额外的操作项\n   * @en Customize additional action items\n   * @slot actions\n   * @version 2.17.0\n   */\n  setup(props, { emit }) {\n    const { t } = useI18n();\n    const {\n      src,\n      popupContainer,\n      visible,\n      defaultVisible,\n      maskClosable,\n      actionsLayout,\n      defaultScale,\n      zoomRate,\n    } = toRefs(props);\n    const refWrapper = ref();\n    const refImage = ref();\n    const prefixCls = getPrefixCls('image-preview');\n    const [mergedVisible, setVisible] = useMergeState(\n      defaultVisible.value,\n      reactive({ value: visible })\n    );\n    const classNames = computed(() => [\n      prefixCls,\n      {\n        [`${prefixCls}-hide`]: !mergedVisible.value,\n      },\n    ]);\n\n    const container = usePopupContainer(\n      document.body,\n      reactive({ popupContainer })\n    );\n\n    const isFixed = computed(() => container.value === document.body);\n    const { zIndex } = usePopupManager('dialog', { visible: mergedVisible });\n\n    const wrapperStyles = computed<CSSProperties>(() => {\n      const positionStyles: CSSProperties = isFixed.value\n        ? { zIndex: zIndex.value, position: 'fixed' }\n        : { zIndex: 'inherit', position: 'absolute' };\n\n      return { ...positionStyles };\n    });\n\n    const { isLoading, isLoaded, setLoadStatus } = useImageLoadStatus();\n\n    const rotate = ref(0);\n    const scale = ref(defaultScale.value);\n\n    const { translate, moving, resetTranslate } = useImageDrag(\n      reactive({\n        wrapperEl: refWrapper,\n        imageEl: refImage,\n        visible: mergedVisible,\n        scale,\n      })\n    );\n\n    const scaleValueVisible = ref(false);\n    let hideScaleTimer: any = null;\n    const showScaleValue = () => {\n      !scaleValueVisible.value && (scaleValueVisible.value = true);\n      hideScaleTimer && clearTimeout(hideScaleTimer);\n      hideScaleTimer = setTimeout(() => {\n        scaleValueVisible.value = false;\n      }, 1000);\n    };\n\n    usePopupOverHidden(reactive({ container, hidden: mergedVisible }));\n\n    function reset() {\n      rotate.value = 0;\n      scale.value = defaultScale.value;\n      resetTranslate();\n    }\n\n    const isIncludes = (action: string) => actionsLayout.value.includes(action);\n\n    const handleKeyDown = (ev: KeyboardEvent) => {\n      ev.stopPropagation();\n      ev.preventDefault();\n\n      switch (ev.key) {\n        case KEYBOARD_KEY.ESC:\n          props.escToClose && close();\n          break;\n        case KEYBOARD_KEY.ARROW_LEFT:\n          props.groupArrowProps.onPrev && props.groupArrowProps.onPrev();\n          break;\n        case KEYBOARD_KEY.ARROW_RIGHT:\n          props.groupArrowProps.onNext && props.groupArrowProps.onNext();\n          break;\n        case KEYBOARD_KEY.ARROW_UP:\n          isIncludes('zoomIn') && handleScale('zoomIn');\n          break;\n        case KEYBOARD_KEY.ARROW_DOWN:\n          isIncludes('zoomOut') && handleScale('zoomOut');\n          break;\n        case KEYBOARD_KEY.SPACE:\n          isIncludes('originalSize') && changeScale(1);\n          break;\n        default:\n          break;\n      }\n    };\n\n    const onWheel = throttleByRaf((e: WheelEvent) => {\n      e.preventDefault();\n      e.stopPropagation();\n\n      if (!props.wheelZoom) return;\n\n      const delta = e.deltaY || e.deltaX;\n      const action = delta > 0 ? 'zoomOut' : 'zoomIn';\n      const newScale = getScaleByRate(scale.value, zoomRate.value, action);\n      changeScale(newScale);\n    });\n\n    let globalKeyDownListener = false;\n\n    const addGlobalKeyDownListener = () => {\n      nextTick(() => {\n        refWrapper?.value?.focus();\n      });\n      if (props.keyboard && !globalKeyDownListener) {\n        globalKeyDownListener = true;\n        on(container.value, 'keydown', handleKeyDown);\n      }\n    };\n\n    const removeGlobalKeyDownListener = () => {\n      if (globalKeyDownListener) {\n        globalKeyDownListener = false;\n        off(container.value, 'keydown', handleKeyDown);\n      }\n    };\n\n    watch([src, mergedVisible], () => {\n      if (mergedVisible.value) {\n        reset();\n        setLoadStatus('loading');\n        addGlobalKeyDownListener();\n      } else {\n        removeGlobalKeyDownListener();\n      }\n    });\n\n    function close() {\n      if (mergedVisible.value) {\n        emit('close');\n        emit('update:visible', false);\n        setVisible(false);\n      }\n    }\n\n    function onMaskClick(e: MouseEvent) {\n      refWrapper?.value?.focus();\n      if (maskClosable.value && e.target === e.currentTarget) {\n        close();\n      }\n    }\n\n    function changeScale(newScale: number) {\n      if (scale.value !== newScale) {\n        scale.value = newScale;\n        showScaleValue();\n      }\n    }\n\n    function fullScreen() {\n      const wrapperRect = refWrapper.value.getBoundingClientRect();\n      const imgRect = refImage.value.getBoundingClientRect();\n      const newHeightScale =\n        wrapperRect.height / (imgRect.height / scale.value);\n      const newWidthScale = wrapperRect.width / (imgRect.width / scale.value);\n      const newScale = Math.max(newHeightScale, newWidthScale);\n      changeScale(newScale);\n    }\n\n    function handleRotate(direction: 'clockwise' | 'counterclockwise') {\n      const isClockwise = direction === 'clockwise';\n      const newRotate = isClockwise\n        ? (rotate.value + ROTATE_STEP) % 360\n        : rotate.value === 0\n        ? 360 - ROTATE_STEP\n        : rotate.value - ROTATE_STEP;\n      rotate.value = newRotate;\n    }\n\n    function handleScale(action: 'zoomIn' | 'zoomOut') {\n      const newScale = getScale(scale.value, action);\n      changeScale(newScale);\n    }\n\n    onBeforeUnmount(() => {\n      removeGlobalKeyDownListener();\n    });\n\n    return {\n      prefixCls,\n      classNames,\n      container,\n      wrapperStyles,\n      scale,\n      translate,\n      rotate,\n      moving,\n      mergedVisible,\n      isLoading,\n      isLoaded,\n      scaleValueVisible,\n      refWrapper,\n      refImage,\n      onWheel,\n      onMaskClick,\n      onCloseClick: close,\n      onImgLoad() {\n        setLoadStatus('loaded');\n      },\n      onImgError() {\n        setLoadStatus('error');\n      },\n      actions: computed(() => [\n        /** 满屏 */\n        {\n          key: 'fullScreen',\n          name: t('imagePreview.fullScreen'),\n          content: () => h(IconFullscreen),\n          onClick: () => fullScreen(),\n        },\n        /** 顺时针旋转 */\n        {\n          key: 'rotateRight',\n          name: t('imagePreview.rotateRight'),\n          content: () => h(IconRotateRight),\n          onClick: () => handleRotate('clockwise'),\n        },\n        /** 逆时针旋转 */\n        {\n          key: 'rotateLeft',\n          name: t('imagePreview.rotateLeft'),\n          content: () => h(IconRotateLeft),\n          onClick: () => handleRotate('counterclockwise'),\n        },\n        /** 放大 */\n        {\n          key: 'zoomIn',\n          name: t('imagePreview.zoomIn'),\n          content: () => h(IconZoomIn),\n          onClick: () => handleScale('zoomIn'),\n          disabled: scale.value === maxScale,\n        },\n        /** 缩小 */\n        {\n          key: 'zoomOut',\n          name: t('imagePreview.zoomOut'),\n          content: () => h(IconZoomOut),\n          onClick: () => handleScale('zoomOut'),\n          disabled: scale.value === minScale,\n        },\n        /** 缩放到100% */\n        {\n          key: 'originalSize',\n          name: t('imagePreview.originalSize'),\n          content: () => h(IconOriginalSize),\n          onClick: () => changeScale(1),\n        },\n      ]),\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/image/style/image.less",
    "content": "@image-prefix-cls: ~'@{prefix}-image';\n\n.@{image-prefix-cls} {\n  position: relative;\n  display: inline-block;\n  border-radius: @image-radius;\n\n  &-img {\n    vertical-align: middle;\n    border-radius: inherit;\n  }\n\n  &-overlay {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n  }\n\n  &-footer {\n    display: flex;\n    width: 100%;\n    max-width: 100%;\n\n    &-caption {\n      flex: 1 1 auto;\n\n      &-title {\n        font-weight: @image-font-weight-title;\n        font-size: @image-font-size-title;\n      }\n\n      &-description {\n        font-size: @image-font-size-description;\n      }\n    }\n\n    &-extra {\n      flex: 0 0 auto;\n      padding-left: @image-spacing-actions-left;\n    }\n  }\n\n  &-with-footer-inner {\n    .@{image-prefix-cls}-footer {\n      position: absolute;\n      bottom: 0;\n      left: 0;\n      align-items: center;\n      box-sizing: border-box;\n      padding: @image-padding-footer_inner_vertical\n        @image-padding-footer_inner_horizontal;\n      color: @image-color-footer_inner-text;\n      background: @image-color-footer_inner-bg;\n      border-bottom-right-radius: @image-radius;\n      border-bottom-left-radius: @image-radius;\n    }\n\n    .@{image-prefix-cls}-footer-caption {\n      &-title {\n        color: @image-color-title_footer_inner-text;\n      }\n\n      &-description {\n        color: @image-color-description_footer_inner-text;\n      }\n    }\n  }\n\n  &-with-footer-outer {\n    .@{image-prefix-cls}-footer {\n      margin-top: @image-spacing-footer-top;\n      color: @image-color-footer_outer-text;\n    }\n\n    .@{image-prefix-cls}-footer-caption {\n      &-title {\n        color: @image-color-title_footer_outer-text;\n      }\n\n      &-description {\n        color: @image-color-description_footer_outer-text;\n      }\n    }\n  }\n\n  &-error {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    width: 100%;\n    height: 100%;\n    color: @image-color-error-text;\n    background-color: @image-color-error-bg;\n\n    &-icon {\n      width: @image-font-size-error-icon;\n      max-width: 100%;\n      height: @image-font-size-error-icon;\n      max-height: 100%;\n\n      > svg {\n        width: 100%;\n        height: 100%;\n      }\n    }\n\n    &-alt {\n      padding: (@image-spacing-error-padding / 2) @image-spacing-error-padding;\n      font-size: @image-font-size-error-text;\n      line-height: @image-line-height-error-text;\n      text-align: center;\n    }\n  }\n\n  &-loader {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background-color: @image-color-loader-bg;\n\n    &-spin {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      color: @image-color-loader-spin-text;\n      font-size: @image-font-size-loader-spin;\n      text-align: center;\n      transform: translate(-50%, -50%);\n\n      &-text {\n        color: @image-color-loader-spin-text-text;\n        font-size: @image-font-size-loader-spin-text;\n      }\n    }\n  }\n\n  &-simple {\n    &.@{image-prefix-cls}-with-footer-inner {\n      .@{image-prefix-cls}-footer {\n        padding: @image-spacing-footer_inner_simple-vertical\n          @image-spacing-footer_inner_simple-horizontal;\n      }\n    }\n  }\n\n  &-loading,\n  &-loading-error {\n    .@{image-prefix-cls}-img {\n      visibility: hidden;\n    }\n  }\n}\n"
  },
  {
    "path": "packages/web-vue/components/image/style/index.less",
    "content": "@import '../../style/theme/index.less';\n@import './token.less';\n@import './trigger.less';\n@import './image.less';\n@import './preview.less';\n"
  },
  {
    "path": "packages/web-vue/components/image/style/index.ts",
    "content": "import '../../style/index.less';\nimport './index.less';\n"
  },
  {
    "path": "packages/web-vue/components/image/style/preview.less",
    "content": "@preview-prefix-cls: ~'@{prefix}-image-preview';\n\n.center() {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}\n\n.@{preview-prefix-cls} {\n  position: fixed;\n  top: 0;\n  left: 0;\n  z-index: @z-index-image-preview;\n  width: 100%;\n  height: 100%;\n\n  &-hide {\n    display: none;\n  }\n\n  &-mask,\n  &-wrapper {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n  }\n\n  &-mask {\n    background-color: @image-preview-color-mask-bg;\n  }\n\n  &-img-container {\n    width: 100%;\n    height: 100%;\n    text-align: center;\n\n    &::before {\n      display: inline-block;\n      width: 0;\n      height: 100%;\n      vertical-align: middle;\n      content: '';\n    }\n\n    .@{preview-prefix-cls}-img {\n      display: inline-block;\n      max-width: 100%;\n      max-height: 100%;\n      vertical-align: middle;\n      cursor: grab;\n      user-select: none;\n\n      &.@{image-prefix-cls}-preview-img-moving {\n        cursor: grabbing;\n      }\n    }\n  }\n\n  &-scale-value {\n    box-sizing: border-box;\n    padding: @image-preview-spacing-scale-value-vertical\n      @image-preview-spacing-scale-value-horizontal;\n    color: @image-preview-color-scale-value-text;\n    font-size: @image-preview-font-size-scale-value;\n    line-height: initial;\n    background-color: @image-preview-color-scale-value-bg;\n    .center();\n  }\n\n  &-toolbar {\n    position: absolute;\n    bottom: @image-preview-position-toolbar-bottom;\n    left: 50%;\n    display: flex;\n    align-items: flex-start;\n    padding: @image-preview-spacing-toolbar-vertical\n      @image-preview-spacing-toolbar-horizontal;\n    background-color: @image-preview-color-toolbar-bg;\n    border-radius: @image-preview-radius-toolbar;\n    transform: translateX(-50%);\n\n    &-action {\n      display: flex;\n      align-items: center;\n      color: @image-preview-color-action-text;\n      font-size: @image-preview-font-size-action;\n      background-color: @image-preview-color-action-bg;\n      border-radius: @image-preview-radius-action;\n      cursor: pointer;\n\n      &:not(:last-of-type) {\n        margin-right: @image-preview-margin-action-right;\n      }\n\n      &:hover {\n        color: @image-preview-color-action_hover-text;\n        background-color: @image-preview-color-action_hover-bg;\n      }\n\n      &-disabled,\n      &-disabled:hover {\n        color: @image-preview-color-action_disabled-text;\n        background-color: @image-preview-color-action_disabled-bg;\n        cursor: not-allowed;\n      }\n\n      &-name {\n        padding-right: @image-preview-spacing-action-name-right;\n        font-size: @image-preview-font-size-action-name;\n      }\n\n      &-content {\n        padding: @image-preview-padding-action-content;\n        line-height: 1;\n      }\n    }\n  }\n\n  &-loading {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    width: @image-preview-size-loading-width;\n    height: @image-preview-size-loading-height;\n    padding: @image-preview-spacing-loading-padding;\n    color: @image-preview-color-loading-text;\n    font-size: @image-preview-font-size-loading;\n    background-color: @image-preview-color-loading-bg;\n    border-radius: @image-preview-radius-loading;\n    .center();\n  }\n\n  &-close-btn {\n    position: absolute;\n    top: @image-preview-position-close-btn-top;\n    right: @image-preview-position-close-btn-right;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: @image-preview-size-close-btn-width;\n    height: @image-preview-size-close-btn-width;\n    color: @image-preview-color-close-btn-text;\n    font-size: @image-preview-size-close-icon;\n    line-height: @image-preview-size-close-btn-width;\n    text-align: center;\n    background: @image-preview-color-close-btn-bg;\n    border-radius: 50%;\n    cursor: pointer;\n  }\n\n  &-arrow {\n    &-left,\n    &-right {\n      position: absolute;\n      z-index: 2;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: @image-preview-arrow-size;\n      height: @image-preview-arrow-size;\n      color: @image-preview-arrow-color-icon;\n      background-color: @image-preview-arrow-color-bg;\n      border-radius: 50%;\n      cursor: pointer;\n\n      > svg {\n        color: @image-preview-arrow-color-icon;\n        font-size: @image-preview-arrow-font-size;\n      }\n\n      &:hover {\n        background-color: @image-preview-arrow-color-bg_hover;\n      }\n    }\n\n    &-left {\n      top: 50%;\n      left: @image-preview-arrow-position;\n      transform: translateY(-50%);\n    }\n\n    &-right {\n      top: 50%;\n      right: @image-preview-arrow-position;\n      transform: translateY(-50%);\n    }\n\n    &-disabled {\n      color: @image-preview-arrow-color-icon_disabled;\n      background-color: @image-preview-arrow-color-bg_disabled;\n      cursor: not-allowed;\n\n      > svg {\n        color: @image-preview-arrow-color-icon_disabled;\n      }\n\n      &:hover {\n        background-color: @image-preview-arrow-color-bg_disabled;\n      }\n    }\n  }\n}\n\n/** mask 动效 */\n.image-fade-enter-from,\n.image-fade-leave-to {\n  opacity: 0;\n}\n\n.image-fade-enter-to,\n.image-fade-leave-from {\n  opacity: 1;\n}\n\n.image-fade-enter-active {\n  transition: opacity @transition-duration-4\n    @transition-timing-function-overshoot;\n}\n\n.image-fade-leave-active {\n  transition: opacity @transition-duration-4\n    @transition-timing-function-overshoot;\n}\n"
  },
  {
    "path": "packages/web-vue/components/image/style/token.less",
    "content": "@image-radius: @radius-small;\n// title\n@image-font-size-title: @font-size-title-1;\n@image-font-weight-title: @font-weight-500;\n// description\n@image-font-size-description: @font-size-body-3;\n@image-color-title_footer_outer-text: var(~'@{arco-cssvars-prefix}-color-text-1');\n@image-color-title_footer_inner-text: var(~'@{arco-cssvars-prefix}-color-white');\n@image-color-description_footer_inner-text: var(~'@{arco-cssvars-prefix}-color-white');\n@image-color-description_footer_outer-text: var(~'@{arco-cssvars-prefix}-color-neutral-6');\n// actions\n@image-spacing-actions-left: @spacing-6;\n// actions item\n@image-font-size-actions-item: 14px;\n@image-padding-actions-item-vertical: @spacing-none;\n@image-padding-actions-item-horizontal: @spacing-none;\n@image-spacing-actions-item-left: @spacing-6;\n@image-radius-actions-item: @radius-small;\n@image-color-actions-item_footer_inner_hover-bg: rgba(0, 0, 0, 0.5);\n@image-color-actions-item_footer_outer_hover-bg: var(~'@{arco-cssvars-prefix}-color-neutral-2');\n@image-color-actions-item_trigger-text: var(~'@{arco-cssvars-prefix}-color-neutral-8');\n@image-color-actions-item_trigger_hover-bg: var(~'@{arco-cssvars-prefix}-color-neutral-2');\n@image-spacing-actions-trigger-item-vertical: 5px;\n@image-spacing-actions-trigger-item-horizontal: 4px;\n// footer\n@image-color-footer_inner-bg: linear-gradient(\n  360deg,\n  rgba(0, 0, 0, 0.3) 0%,\n  rgba(0, 0, 0, 0) 100%\n);\n@image-color-footer_inner-text: var(~'@{arco-cssvars-prefix}-color-white');\n@image-padding-footer_inner_vertical: 9px;\n@image-padding-footer_inner_horizontal: 16px;\n\n@image-spacing-footer_inner_simple-vertical: @spacing-6;\n@image-spacing-footer_inner_simple-horizontal: @spacing-7;\n@image-color-footer_outer-text: var(~'@{arco-cssvars-prefix}-color-neutral-8');\n@image-spacing-footer-top: @spacing-2;\n// error\n@image-color-error-bg: var(~'@{arco-cssvars-prefix}-color-neutral-1');\n@image-color-error-text: var(~'@{arco-cssvars-prefix}-color-neutral-4');\n@image-font-size-error-icon: 60px;\n@image-font-size-error-text: @font-size-body-1;\n@image-line-height-error-text: 1.6667;\n@image-size-error-min-height: 100px;\n@image-spacing-error-padding: @spacing-7;\n// loader\n@image-color-loader-bg: var(~'@{arco-cssvars-prefix}-color-neutral-1');\n@image-size-loader-min-height: 100px;\n// loader spin\n@image-font-size-loader-spin: 32px;\n@image-color-loader-spin-text: @color-primary-6;\n@image-color-loader-spin-text-text: var(~'@{arco-cssvars-prefix}-color-neutral-6');\n@image-font-size-loader-spin-text: @font-size-title-1;\n\n// preview mask\n@image-preview-color-mask-bg: var(~'@{arco-cssvars-prefix}-color-mask-bg');\n// preview scale value\n@image-preview-size-scale-value-height: 32px;\n@image-preview-spacing-scale-value-vertical: 7px;\n@image-preview-spacing-scale-value-horizontal: 10px;\n@image-preview-font-size-scale-value: @font-size-body-1;\n@image-preview-color-scale-value-text: var(~'@{arco-cssvars-prefix}-color-white');\n@image-preview-color-scale-value-bg: rgba(255, 255, 255, 0.08);\n// preview toolbar\n@image-preview-color-toolbar-bg: var(~'@{arco-cssvars-prefix}-color-bg-2');\n@image-preview-radius-toolbar: @radius-medium;\n@image-preview-spacing-toolbar-vertical: @spacing-2;\n@image-preview-spacing-toolbar-horizontal: @spacing-7;\n@image-preview-spacing-toolbar-horizontal_simple: @spacing-2;\n@image-preview-spacing-toolbar-vertical_simple: @spacing-2;\n\n@image-preview-position-toolbar-bottom: 46px;\n// preview toolbar action\n@image-preview-font-size-action: 14px;\n@image-preview-color-action-text: var(~'@{arco-cssvars-prefix}-color-neutral-8');\n@image-preview-radius-action: @radius-small;\n@image-preview-color-action-bg: @color-transparent;\n@image-preview-color-action_hover-bg: var(~'@{arco-cssvars-prefix}-color-neutral-2');\n@image-preview-color-action_hover-text: @color-primary-6;\n@image-preview-color-action_disabled-bg: transparent;\n@image-preview-color-action_disabled-text: var(~'@{arco-cssvars-prefix}-color-text-4');\n@image-preview-font-size-action-name: @font-size-body-1;\n@image-preview-spacing-action-name-right: @spacing-6;\n@image-preview-padding-action-content: 13px;\n@image-preview-margin-action-right: @spacing-none;\n// preview trigger\n@image-preview-spacing-trigger-padding-vertical: @spacing-6;\n@image-preview-spacing-trigger-padding-horizontal: @spacing-7;\n@image-preview-margin-action-bottom: @spacing-none;\n\n// preview loading\n@image-preview-color-loading-text: @color-primary-6;\n@image-preview-color-loading-bg: #232324;\n@image-preview-font-size-loading: 18px;\n@image-preview-spacing-loading-padding: @spacing-5;\n@image-preview-size-loading-width: 48px;\n@image-preview-size-loading-height: 48px;\n@image-preview-radius-loading: @radius-medium;\n// preview close-btn\n@image-preview-size-close-btn-width: 32px;\n@image-preview-size-close-icon: 14px;\n@image-preview-color-close-btn-bg: rgba(0, 0, 0, 0.5);\n@image-preview-color-close-btn-text: var(~'@{arco-cssvars-prefix}-color-white');\n@image-preview-position-close-btn-right: 36px;\n@image-preview-position-close-btn-top: 36px;\n// preview arrow\n@image-preview-arrow-position: @spacing-8;\n@image-preview-arrow-size: @size-8;\n@image-preview-arrow-font-size: @size-4;\n@image-preview-arrow-color-icon: var(~'@{arco-cssvars-prefix}-color-white');\n@image-preview-arrow-color-icon_disabled: rgba(255, 355, 255, 0.3);\n@image-preview-arrow-color-bg: rgba(255, 355, 255, 0.3);\n@image-preview-arrow-color-bg_hover: rgba(255, 355, 255, 0.5);\n@image-preview-arrow-color-bg_disabled: rgba(255, 355, 255, 0.2);\n\n// image trigger\n@image-trigger-spacing-padding-vertical: 6px;\n@image-trigger-spacing-padding-horizontal: 4px;\n@image-trigger-color-bg: var(~'@{arco-cssvars-prefix}-color-bg-5');\n@image-trigger-color-border: var(~'@{arco-cssvars-prefix}-color-neutral-3');\n@image-trigger-size-border: 1px;\n@image-trigger-radius: 4px;\n"
  },
  {
    "path": "packages/web-vue/components/image/style/trigger.less",
    "content": "@image-trigger-prefix-cls: ~'@{prefix}-image-trigger';\n\n.@{image-trigger-prefix-cls} {\n  padding: @image-trigger-spacing-padding-vertical\n    @image-trigger-spacing-padding-horizontal;\n  background: @image-trigger-color-bg;\n  border: @image-trigger-size-border solid @image-trigger-color-border;\n  border-radius: @image-trigger-radius;\n\n  .@{prefix}-trigger-arrow {\n    background-color: @image-trigger-color-bg;\n    border: @image-trigger-size-border solid @image-trigger-color-border;\n  }\n}\n"
  },
  {
    "path": "packages/web-vue/components/image/utils/get-fix-translate.ts",
    "content": "export default function getFixTranslate(\n  wrapperRect: DOMRect,\n  imgRect: DOMRect,\n  translateX: number,\n  translateY: number,\n  scale: number\n): [number, number] {\n  let fixTranslateX = translateX;\n  let fixTranslateY = translateY;\n  if (translateX) {\n    /** img 的宽度小于 wrapper 的宽度，则不应该有位移 */\n    if (wrapperRect.width > imgRect.width) {\n      fixTranslateX = 0;\n    } else {\n      /** img 的宽度大于 wrapper 的宽度 */\n      if (imgRect.left > wrapperRect.left) {\n        // 左边框跑到 wrapper 范围内，则往左退到 wrapper 左侧：减少位移量\n        fixTranslateX -= Math.abs(wrapperRect.left - imgRect.left) / scale;\n      }\n      if (imgRect.right < wrapperRect.right) {\n        // 右边框跑到 wrapper 范围内，则往右退到 wrapper 右侧：增加位移量\n        fixTranslateX += Math.abs(wrapperRect.right - imgRect.right) / scale;\n      }\n    }\n  }\n  if (translateY) {\n    /** img 的高度度小于 wrapper 的高度度，则不应该有位移 */\n    if (wrapperRect.height > imgRect.height) {\n      fixTranslateY = 0;\n    } else {\n      /** img 的高度大于 wrapper 的高度 */\n      if (imgRect.top > wrapperRect.top) {\n        // 上边框跑到 wrapper 范围内，则往上退到 wrapper 上侧：减少位移量\n        fixTranslateY -= Math.abs(wrapperRect.top - imgRect.top) / scale;\n      }\n      if (imgRect.bottom < wrapperRect.bottom) {\n        // 下边框跑到 wrapper 范围内，则往下退到 wrapper 下侧：增加位移量\n        fixTranslateY += Math.abs(wrapperRect.bottom - imgRect.bottom) / scale;\n      }\n    }\n  }\n  return [fixTranslateX, fixTranslateY];\n}\n"
  },
  {
    "path": "packages/web-vue/components/image/utils/get-scale.ts",
    "content": "const scaleAttr = [\n  25, 33, 50, 67, 75, 80, 90, 100, 110, 125, 150, 175, 200, 250, 300, 400, 500,\n].map((item) => +(item / 100).toFixed(2));\n\ntype ZoomType = 'zoomIn' | 'zoomOut';\n\nexport const minScale = scaleAttr[0];\n\nexport const maxScale = scaleAttr[scaleAttr.length - 1];\n\nexport default function getScale(cur = 1, type: ZoomType = 'zoomIn') {\n  let index = scaleAttr.indexOf(cur);\n  if (index === -1) {\n    index = findClosestIndex(cur);\n  }\n  if (type === 'zoomIn') {\n    return index === scaleAttr.length - 1 ? cur : scaleAttr[index + 1];\n  }\n  return index === 0 ? cur : scaleAttr[index - 1];\n}\n\nexport function getScaleByRate(\n  scale: number,\n  rate = 1.1,\n  type: ZoomType = 'zoomIn'\n) {\n  const scaleFactor = type === 'zoomIn' ? rate : 1 / rate;\n  const newScale = Number.parseFloat((scale * scaleFactor).toFixed(3));\n  return Math.min(maxScale, Math.max(minScale, newScale));\n}\n\nfunction findClosestIndex(scale: number) {\n  let closestIndex = scaleAttr.length - 1;\n  for (let i = 0; i < scaleAttr.length; i++) {\n    const current = scaleAttr[i];\n    if (scale === current) {\n      closestIndex = i;\n      break;\n    }\n    if (scale < current) {\n      const pre = scaleAttr[i - 1];\n      closestIndex =\n        pre === undefined || Math.abs(pre - scale) <= Math.abs(current - scale)\n          ? i - 1\n          : i;\n      break;\n    }\n  }\n  return closestIndex;\n}\n"
  },
  {
    "path": "packages/web-vue/components/image/utils/index.ts",
    "content": "import { isNumber, isUndefined } from '../../_utils/is';\n\nexport function normalizeImageSizeProp(size?: string | number) {\n  if (isUndefined(size)) return undefined;\n  if (!isNumber(size) && /^\\d+(%)$/.test(size)) return size;\n\n  const num = parseInt(size as string, 10);\n\n  return isNumber(num) ? `${num}px` : undefined;\n}\n"
  },
  {
    "path": "packages/web-vue/components/index.less",
    "content": "@import './style/index.less';\n@import './trigger/style/index.less';\n@import './_components/auto-tooltip/style/index.less';\n@import './_components/input-label/style/index.less';\n@import './_components/picker/style/index.less';\n@import './_components/select-view/style/index.less';\n@import './affix/style/index.less';\n@import './alert/style/index.less';\n@import './anchor/style/index.less';\n@import './auto-complete/style/index.less';\n@import './avatar/style/index.less';\n@import './back-top/style/index.less';\n@import './badge/style/index.less';\n@import './breadcrumb/style/index.less';\n@import './button/style/index.less';\n@import './calendar/style/index.less';\n@import './card/style/index.less';\n@import './carousel/style/index.less';\n@import './cascader/style/index.less';\n@import './checkbox/style/index.less';\n@import './collapse/style/index.less';\n@import './color-picker/style/index.less';\n@import './comment/style/index.less';\n@import './date-picker/style/index.less';\n@import './descriptions/style/index.less';\n@import './divider/style/index.less';\n@import './drawer/style/index.less';\n@import './dropdown/style/index.less';\n@import './empty/style/index.less';\n@import './form/style/index.less';\n@import './grid/style/index.less';\n@import './image/style/index.less';\n@import './input-number/style/index.less';\n@import './input-tag/style/index.less';\n@import './input/style/index.less';\n@import './layout/style/index.less';\n@import './link/style/index.less';\n@import './list/style/index.less';\n@import './mention/style/index.less';\n@import './menu/style/index.less';\n@import './message/style/index.less';\n@import './modal/style/index.less';\n@import './notification/style/index.less';\n@import './overflow-list/style/index.less';\n@import './page-header/style/index.less';\n@import './pagination/style/index.less';\n@import './popconfirm/style/index.less';\n@import './popover/style/index.less';\n@import './progress/style/index.less';\n@import './radio/style/index.less';\n@import './rate/style/index.less';\n@import './resize-box/style/index.less';\n@import './result/style/index.less';\n@import './scrollbar/style/index.less';\n@import './select/style/index.less';\n@import './skeleton/style/index.less';\n@import './slider/style/index.less';\n@import './space/style/index.less';\n@import './spin/style/index.less';\n@import './split/style/index.less';\n@import './statistic/style/index.less';\n@import './steps/style/index.less';\n@import './switch/style/index.less';\n@import './table/style/index.less';\n@import './tabs/style/index.less';\n@import './tag/style/index.less';\n@import './textarea/style/index.less';\n@import './time-picker/style/index.less';\n@import './timeline/style/index.less';\n@import './tooltip/style/index.less';\n@import './transfer/style/index.less';\n@import './tree-select/style/index.less';\n@import './tree/style/index.less';\n@import './typography/style/index.less';\n@import './upload/style/index.less';\n@import './verification-code/style/index.less';\n"
  },
  {
    "path": "packages/web-vue/components/index.ts",
    "content": "export { default } from './arco-vue';\nexport { addI18nMessages, useLocale, getLocale } from './locale';\nexport type { Size, Status, MessageType, Direction } from './_utils/constant';\nexport { default as Affix } from './affix';\nexport type { AffixInstance } from './affix';\nexport { default as Alert } from './alert';\nexport type { AlertInstance } from './alert';\nexport { default as Anchor, AnchorLink } from './anchor';\nexport type { AnchorInstance, AnchorLinkInstance } from './anchor';\nexport { default as AutoComplete } from './auto-complete';\nexport type { AutoCompleteInstance } from './auto-complete';\nexport { default as Avatar, AvatarGroup } from './avatar';\nexport type { AvatarInstance, AvatarGroupInstance } from './avatar';\nexport { default as BackTop } from './back-top';\nexport type { BackTopInstance } from './back-top';\nexport { default as Badge } from './badge';\nexport type { BadgeInstance } from './badge';\nexport { default as Breadcrumb, BreadcrumbItem } from './breadcrumb';\nexport type {\n  BreadcrumbInstance,\n  BreadcrumbItemInstance,\n  BreadcrumbRoute,\n} from './breadcrumb';\nexport { default as Button, ButtonGroup } from './button';\nexport type {\n  ButtonInstance,\n  ButtonGroupInstance,\n  ButtonProps,\n} from './button';\nexport { default as Card, CardGrid, CardMeta } from './card';\nexport { default as Calendar } from './calendar';\nexport type { CardGridInstance, CardInstance, CardMetaInstance } from './card';\nexport { default as Carousel, CarouselItem } from './carousel';\nexport type { CarouselInstance, CarouselItemInstance } from './carousel';\nexport { default as Cascader, CascaderPanel } from './cascader';\nexport type {\n  CascaderFieldNames,\n  CascaderInstance,\n  CascaderPanelInstance,\n  CascaderOption,\n} from './cascader';\nexport { default as Checkbox, CheckboxGroup } from './checkbox';\nexport type {\n  CheckboxGroupInstance,\n  CheckboxInstance,\n  CheckboxOption,\n} from './checkbox';\nexport { default as Collapse, CollapseItem } from './collapse';\nexport type { CollapseInstance, CollapseItemInstance } from './collapse';\nexport { default as Comment } from './comment';\nexport type { CommentInstance } from './comment';\nexport { default as ColorPicker } from './color-picker';\nexport type { ColorPickerInstance } from './color-picker';\nexport { default as ConfigProvider } from './config-provider';\nexport type { ConfigProviderInstance } from './config-provider';\nexport {\n  default as DatePicker,\n  MonthPicker,\n  QuarterPicker,\n  WeekPicker,\n  YearPicker,\n  RangePicker,\n} from './date-picker';\nexport type {\n  DatePickerInstance,\n  MonthPickerInstance,\n  QuarterPickerInstance,\n  RangePickerInstance,\n  ShortcutType,\n  WeekPickerInstance,\n  YearPickerInstance,\n} from './date-picker';\nexport { default as Descriptions, DescriptionsItem } from './descriptions';\nexport type {\n  DescData,\n  DescriptionsInstance,\n  DescriptionsItemInstance,\n} from './descriptions';\nexport { default as Divider } from './divider';\nexport { default as Drawer } from './drawer';\nexport type {\n  DrawerConfig,\n  DrawerInstance,\n  DrawerMethod,\n  DrawerReturn,\n} from './drawer';\nexport {\n  default as Dropdown,\n  Dgroup,\n  Doption,\n  DropdownButton,\n  Dsubmenu,\n} from './dropdown';\nexport type {\n  DGroup,\n  DOption,\n  DropdownButtonInstance,\n  DropdownGroupInstance,\n  DropdownInstance,\n  DropdownOption,\n  DropdownOptionInstance,\n  DropDownProps,\n  DropdownSubmenuInstance,\n  DSubmenu,\n} from './dropdown';\nexport { default as Empty } from './empty';\nexport type { EmptyInstance } from './empty';\nexport { default as Form, FormItem } from './form';\nexport type {\n  FieldRule,\n  FormInstance,\n  FormItemEventHandler,\n  FormItemInstance,\n  ValidatedError,\n  ValidateStatus,\n  ValidateTrigger,\n} from './form';\nexport { default as Grid, Col, Row, GridItem } from './grid';\nexport type {\n  ColProps,\n  GridColInstance,\n  GridInstance,\n  GridItemInstance,\n  GridItemProps,\n  GridProps,\n  GridRowInstance,\n  ResponsiveValue,\n  RowProps,\n} from './grid';\nexport { default as Icon } from './icon-component';\nexport type { IconInstance, IconProps } from './icon-component';\nexport {\n  default as Image,\n  ImagePreviewAction,\n  ImagePreview,\n  ImagePreviewGroup,\n} from './image';\nexport type {\n  ImageInstance,\n  ImagePreviewActionInstance,\n  ImagePreviewInstance,\n  ImagePreviewGroupInstance,\n} from './image';\nexport {\n  default as Input,\n  InputGroup,\n  InputPassword,\n  InputSearch,\n} from './input';\nexport type {\n  InputGroupInstance,\n  InputInstance,\n  InputPasswordInstance,\n  InputSearchInstance,\n} from './input';\nexport { default as InputNumber } from './input-number';\nexport type { InputNumberInstance } from './input-number';\nexport { default as InputTag } from './input-tag';\nexport type {\n  InputTagFieldNames,\n  InputTagInstance,\n  TagData,\n} from './input-tag';\nexport {\n  default as Layout,\n  LayoutContent,\n  LayoutFooter,\n  LayoutHeader,\n  LayoutSider,\n} from './layout';\nexport type {\n  LayoutContentInstance,\n  LayoutFooterInstance,\n  LayoutHeaderInstance,\n  LayoutInstance,\n  LayoutProps,\n  LayoutSiderInstance,\n  SiderProps,\n} from './layout';\nexport { default as Link } from './link';\nexport type { LinkInstance } from './link';\nexport { default as List, ListItem, ListItemMeta } from './list';\nexport type {\n  ListInstance,\n  ListItemInstance,\n  ListItemMetaInstance,\n} from './list';\nexport { default as Mention } from './mention';\nexport type { MentionInstance } from './mention';\nexport { default as Menu, MenuItem, MenuItemGroup, SubMenu } from './menu';\nexport type {\n  MenuInstance,\n  MenuItemInstance,\n  MenuItemGroupInstance,\n  MenuSubMenuInstance,\n} from './menu';\nexport { default as Message } from './message';\nexport type { MessageMethod, MessageConfig, MessageReturn } from './message';\nexport { default as Modal } from './modal';\nexport type { ModalMethod, ModalConfig, ModalReturn } from './modal';\nexport { default as Notification } from './notification';\nexport type {\n  NotificationMethod,\n  NotificationConfig,\n  NotificationReturn,\n} from './notification';\nexport { default as PageHeader } from './page-header';\nexport type { PageHeaderInstance } from './page-header';\nexport { default as Pagination } from './pagination';\nexport type { PaginationInstance, PaginationProps } from './pagination';\nexport { default as Popconfirm } from './popconfirm';\nexport type { PopconfirmInstance } from './popconfirm';\nexport { default as Popover } from './popover';\nexport type { PopoverInstance } from './popover';\nexport { default as Progress } from './progress';\nexport type { ProgressInstance } from './progress';\nexport { default as Radio, RadioGroup } from './radio';\nexport type { RadioInstance, RadioGroupInstance } from './radio';\nexport { default as Rate } from './rate';\nexport type { RateInstance } from './rate';\nexport { default as ResizeBox } from './resize-box';\nexport type { ResizeBoxInstance } from './resize-box';\nexport { default as Result } from './result';\nexport type { ResultInstance } from './result';\nexport { default as Scrollbar } from './scrollbar';\nexport type { ScrollbarInstance, ScrollbarProps } from './scrollbar';\nexport { default as Select, Optgroup, Option } from './select';\nexport type {\n  FilterOption,\n  SelectFieldNames,\n  SelectInstance,\n  SelectOptGroupInstance,\n  SelectOption,\n  SelectOptionData,\n  SelectOptionGroup,\n  SelectOptionInstance,\n  SelectProps,\n} from './select';\nexport { default as Skeleton, SkeletonLine, SkeletonShape } from './skeleton';\nexport type {\n  SkeletonInstance,\n  SkeletonLineInstance,\n  SkeletonShapeInstance,\n} from './skeleton';\nexport { default as Slider } from './slider';\nexport type { SliderInstance } from './slider';\nexport { default as Space } from './space';\nexport type { SpaceInstance } from './space';\nexport { default as Spin } from './spin';\nexport type { SpinInstance } from './spin';\nexport { default as Split } from './split';\nexport type { SplitInstance } from './split';\nexport { default as Statistic, Countdown } from './statistic';\nexport type { CountdownInstance, StatisticInstance } from './statistic';\nexport { default as Steps, Step } from './steps';\nexport type { StepsInstance, StepsStepInstance } from './steps';\nexport { default as Switch } from './switch';\nexport type { SwitchInstance } from './switch';\nexport {\n  default as Table,\n  Thead,\n  Td,\n  Th,\n  Tr,\n  Tbody,\n  TableColumn,\n} from './table';\nexport type {\n  TableBorder,\n  TableChangeExtra,\n  TableColumnData,\n  TableColumnInstance,\n  TableData,\n  TableDraggable,\n  TableExpandable,\n  TableFilterable,\n  TableFilterData,\n  TableInstance,\n  TableRowSelection,\n  TableSortable,\n  TbodyInstance,\n  TdInstance,\n  TheadInstance,\n  ThInstance,\n  TrInstance,\n} from './table';\nexport { default as Tabs, TabPane } from './tabs';\nexport type { TabPaneInstance, TabsInstance } from './tabs';\nexport { default as Tag } from './tag';\nexport type { TagColor, TagInstance, TagProps } from './tag';\nexport { default as Textarea } from './textarea';\nexport type { TextareaInstance } from './textarea';\nexport { default as TimePicker } from './time-picker';\nexport type { TimePickerInstance } from './time-picker';\nexport { default as Timeline, TimelineItem } from './timeline';\nexport type { TimelineInstance, TimelineItemInstance } from './timeline';\nexport { default as Tooltip } from './tooltip';\nexport type { TooltipInstance } from './tooltip';\nexport { default as Transfer } from './transfer';\nexport type { TransferInstance } from './transfer';\nexport { default as Tree } from './tree';\nexport type { TreeFieldNames, TreeInstance, TreeNodeData } from './tree';\nexport { default as TreeSelect } from './tree-select';\nexport type { TreeSelectInstance } from './tree-select';\nexport { default as Trigger } from './trigger';\nexport type {\n  TriggerEvent,\n  TriggerInstance,\n  TriggerPopupTranslate,\n  TriggerPosition,\n  TriggerProps,\n} from './trigger';\nexport {\n  default as Typography,\n  TypographyParagraph,\n  TypographyText,\n  TypographyTitle,\n} from './typography';\nexport type {\n  EllipsisConfig,\n  TypographyInstance,\n  TypographyParagraphInstance,\n  TypographyTextInstance,\n  TypographyTitleInstance,\n} from './typography';\nexport { default as Upload } from './upload';\nexport type {\n  CustomIcon,\n  FileItem,\n  FileStatus,\n  RequestOption,\n  UploadInstance,\n  UploadRequest,\n} from './upload';\nexport { default as OverflowList } from './overflow-list';\nexport type { OverflowListInstance } from './overflow-list';\nexport { default as VerificationCode } from './verification-code';\nexport type { VerificationCodeInstance } from './verification-code';\nexport { default as Watermark } from './watermark';\nexport type { WatermarkInstance } from './watermark';\n// hooks\nexport { useFormItem } from './_hooks/use-form-item';\n// components.d.ts\nexport type {} from './components';\n"
  },
  {
    "path": "packages/web-vue/components/input/CHANGELOG.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.57.0\n\n`2025-03-10`\n\n### 🆕 Feature\n\n- Added 'prepend' and 'append' attributes ([#3452](https://github.com/arco-design/arco-design-vue/pull/3452))\n\n### 🐛 BugFix\n\n- Fix the preValue calculation error in the input component ([#3427](https://github.com/arco-design/arco-design-vue/pull/3427))\n\n\n## 2.55.3\n\n`2024-06-07`\n\n### 🐛 BugFix\n\n- fix display of allow-clear input button in read-only state ([#3172](https://github.com/arco-design/arco-design-vue/pull/3172))\n\n\n## 2.54.3\n\n`2024-01-19`\n\n### 🐛 BugFix\n\n- fix spelling mistakes ([#2924](https://github.com/arco-design/arco-design-vue/pull/2924))\n\n\n## 2.54.2\n\n`2024-01-11`\n\n### 💅 Style\n\n- Fix overlapping styles of neighboring components in input-group ([#2889](https://github.com/arco-design/arco-design-vue/pull/2889))\n\n\n## 2.54.1\n\n`2023-12-28`\n\n### 🆕 Feature\n\n- Enhance the input-password props ([#2784](https://github.com/arco-design/arco-design-vue/pull/2784))\n\n\n## 2.44.2\n\n`2023-03-17`\n\n### 🐛 BugFix\n\n- fix issue with content modification at maximum value using non-input method ([#2188](https://github.com/arco-design/arco-design-vue/pull/2188))\n\n\n## 2.41.0\n\n`2022-12-30`\n\n### 🐛 BugFix\n\n- Fix the problem that the custom calculation character length will not be limited by `max-length` ([#1942](https://github.com/arco-design/arco-design-vue/pull/1942))\n\n\n## 2.40.1\n\n`2022-12-23`\n\n### 🐛 BugFix\n\n- Fix `change` event trigger logic problem ([#1990](https://github.com/arco-design/arco-design-vue/pull/1990))\n\n\n## 2.39.2\n\n`2022-12-02`\n\n### 🐛 BugFix\n\n- Fix change event triggering issue and clear clearing issue ([#1912](https://github.com/arco-design/arco-design-vue/pull/1912))\n\n\n## 2.38.1\n\n`2022-11-04`\n\n### 🐛 BugFix\n\n- Fix the problem of component cursor reporting error in some scenarios ([#1820](https://github.com/arco-design/arco-design-vue/pull/1820))\n\n\n## 2.37.3\n\n`2022-09-23`\n\n### 💎 Enhancement\n\n- It is no longer possible to input content from the middle when optimizing the max limit ([#1672](https://github.com/arco-design/arco-design-vue/pull/1672))\n\n\n## 2.36.0\n\n`2022-09-02`\n\n### 💎 Enhancement\n\n- Modify password input box icon ([#1436](https://github.com/arco-design/arco-design-vue/pull/1436))\n\n\n## 2.30.0\n\n`2022-06-10`\n\n### 🐛 BugFix\n\n- Fix the problem that form validation will not be triggered after input method ([#1263](https://github.com/arco-design/arco-design-vue/pull/1263))\n- Fixed height issue when using front and back labels in Drawer ([#1263](https://github.com/arco-design/arco-design-vue/pull/1263))\n\n\n## 2.27.0\n\n`2022-05-13`\n\n### 🆕 Feature\n\n- Add input-attrs attribute ([#1106](https://github.com/arco-design/arco-design-vue/pull/1106))\n- Modify the blur event trigger sequence to after change ([#1106](https://github.com/arco-design/arco-design-vue/pull/1106))\n\n\n## 2.23.0\n\n`2022-04-08`\n\n### 💎 Enhancement\n\n- The `clear` event of the input class component will also trigger the `change` event ([#951](https://github.com/arco-design/arco-design-vue/pull/951))\n\n\n## 2.18.0-beta.3\n\n`2022-02-26`\n\n### 💎 Enhancement\n\n- modelValue support null ([#743](https://github.com/arco-design/arco-design-vue/pull/743))\n\n\n## 2.17.0\n\n`2022-02-11`\n\n### 💎 Enhancement\n\n- Increase the transparent transmission of some original attributes of the input element ([#664](https://github.com/arco-design/arco-design-vue/pull/664))\n\n\n## 2.16.2\n\n`2022-01-24`\n\n### 💅 Style\n\n- Fix `input-group` with rounded corners of input components ([#640](https://github.com/arco-design/arco-design-vue/pull/640))\n\n\n## 2.16.0\n\n`2022-01-21`\n\n### 🆕 Feature\n\n- The `<input-search>` component adds the ability to customize the content of the search button ([#625](https://github.com/arco-design/arco-design-vue/pull/625))\n\n### 💅 Style\n\n- Fix `<input-group>` component wrapping `<select>` component style issue ([#588](https://github.com/arco-design/arco-design-vue/pull/588))\n\n\n## 2.15.0\n\n`2022-01-14`\n\n### 💅 Style\n\n- Fix the problem of wrong background color in dark mode ([#560](https://github.com/arco-design/arco-design-vue/pull/560))\n\n\n## 2.14.3\n\n`2022-01-12`\n\n### 🐛 BugFix\n\n- Fix the problem that the input-search attribute is invalid in button mode ([#552](https://github.com/arco-design/arco-design-vue/pull/552))\n\n\n## 2.14.2\n\n`2022-01-10`\n\n### 🐛 BugFix\n\n- Fix the problem of wrong font color in disabled state in Safari browser ([#536](https://github.com/arco-design/arco-design-vue/pull/536))\n\n\n## 2.14.0\n\n`2022-01-07`\n\n### 🐛 BugFix\n\n- Fix change event trigger issue ([#516](https://github.com/arco-design/arco-design-vue/pull/516))\n- Fix the problem that the style setting is in the wrong position when there are front and rear tags ([#516](https://github.com/arco-design/arco-design-vue/pull/516))\n\n\n## 2.12.0\n\n`2021-12-24`\n\n### ⚠️ Important Attention\n\n- The change event is only triggered when the value changes ([#452](https://github.com/arco-design/arco-design-vue/pull/452))\n\n### 🆕 Feature\n\n- `max-length` adds `errorOnly` attribute and `word-slice` attribute ([#451](https://github.com/arco-design/arco-design-vue/pull/451))\n\n\n## 2.7.0\n\n`2021-11-26`\n\n### 🐛 BugFix\n\n- Fix the problem that the enter key of the numeric keyboard does not trigger `press-enter` ([#273](https://github.com/arco-design/arco-design-vue/pull/273))\n\n\n## 2.1.0\n\n`2021-11-05`\n\n### 🆕 Feature\n\n- Add `wordLength` prop ([#91](https://github.com/arco-design/arco-design-vue/pull/91))\n\n### 🐛 BugFix\n\n- Remove `preventDefault` of keyDown event ([#84](https://github.com/arco-design/arco-design-vue/pull/84))\n- Fix the issue that the `a-input-number` component `model-value` does not take effect when the default value is 0 ([#75](https://github.com/arco-design/arco-design-vue/pull/75))\n- Fix the problem that `input-search` and `input-password` do not support `slot` ([#63](https://github.com/arco-design/arco-design-vue/pull/63))\n- Fix the problem that the cursor position is lost when `input-password` is switched to the visible state of the password ([#63](https://github.com/arco-design/arco-design-vue/pull/63))\n\n### 💅 Style\n\n- Modify the style of `clear-btn` to solve the problem that `select-view` may jitter ([#70](https://github.com/arco-design/arco-design-vue/pull/70))\n\n"
  },
  {
    "path": "packages/web-vue/components/input/CHANGELOG.zh-CN.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.57.0\n\n`2025-03-10`\n\n### 🆕 新增功能\n\n- 新增`prepend`、`append`属性 ([#3452](https://github.com/arco-design/arco-design-vue/pull/3452))\n\n### 🐛 问题修复\n\n- 修复 input 内 preValue 计算错误问题 ([#3427](https://github.com/arco-design/arco-design-vue/pull/3427))\n\n\n## 2.55.3\n\n`2024-06-07`\n\n### 🐛 问题修复\n\n- 修复只读状态下显示清空输入框按钮 ([#3172](https://github.com/arco-design/arco-design-vue/pull/3172))\n\n\n## 2.54.3\n\n`2024-01-19`\n\n### 🐛 问题修复\n\n- 修正文档单词拼写错误 ([#2924](https://github.com/arco-design/arco-design-vue/pull/2924))\n\n\n## 2.54.2\n\n`2024-01-11`\n\n### 💅 样式更新\n\n- 修复 input-group 相邻组件样式叠加时的问题 ([#2889](https://github.com/arco-design/arco-design-vue/pull/2889))\n\n\n## 2.54.1\n\n`2023-12-28`\n\n### 🆕 新增功能\n\n- 新增密码框密码可见性相关属性 ([#2784](https://github.com/arco-design/arco-design-vue/pull/2784))\n\n\n## 2.44.2\n\n`2023-03-17`\n\n### 🐛 问题修复\n\n- 修复达到最大值后非输入法状态下无法修改内容问题 ([#2188](https://github.com/arco-design/arco-design-vue/pull/2188))\n\n\n## 2.41.0\n\n`2022-12-30`\n\n### 🐛 问题修复\n\n- 修复自定义计算字符长度不会被 `max-length` 限制的问题 ([#1942](https://github.com/arco-design/arco-design-vue/pull/1942))\n\n\n## 2.40.1\n\n`2022-12-23`\n\n### 🐛 问题修复\n\n- 修复 `change` 事件触发逻辑问题 ([#1990](https://github.com/arco-design/arco-design-vue/pull/1990))\n\n\n## 2.39.2\n\n`2022-12-02`\n\n### 🐛 问题修复\n\n- 修复 change 事件触发问题，以及 clear 清除问题 ([#1912](https://github.com/arco-design/arco-design-vue/pull/1912))\n\n\n## 2.38.1\n\n`2022-11-04`\n\n### 🐛 问题修复\n\n- 修复某些场景下组件光标报错的问题 ([#1820](https://github.com/arco-design/arco-design-vue/pull/1820))\n\n\n## 2.37.3\n\n`2022-09-23`\n\n### 💎 功能优化\n\n- 优化最大限制时不再可以从中间输入内容 ([#1672](https://github.com/arco-design/arco-design-vue/pull/1672))\n\n\n## 2.36.0\n\n`2022-09-02`\n\n### 💎 功能优化\n\n- 修改密码输入框图标 ([#1436](https://github.com/arco-design/arco-design-vue/pull/1436))\n\n\n## 2.30.0\n\n`2022-06-10`\n\n### 🐛 问题修复\n\n- 修复在输入法后不会触发 form 校验的问题 ([#1263](https://github.com/arco-design/arco-design-vue/pull/1263))\n- 修复在 Drawer 中使用带前后置标签产生的高度问题 ([#1263](https://github.com/arco-design/arco-design-vue/pull/1263))\n\n\n## 2.27.0\n\n`2022-05-13`\n\n### 🆕 新增功能\n\n- 增加 input-attrs 属性 ([#1106](https://github.com/arco-design/arco-design-vue/pull/1106))\n- 修改 blur 事件触发顺序到 change 之后 ([#1106](https://github.com/arco-design/arco-design-vue/pull/1106))\n\n\n## 2.23.0\n\n`2022-04-08`\n\n### 💎 功能优化\n\n- 输入类组件的 `clear` 事件会同时触发 `change` 事件 ([#951](https://github.com/arco-design/arco-design-vue/pull/951))\n\n\n## 2.18.0-beta.3\n\n`2022-02-26`\n\n### 💎 功能优化\n\n- modelValue 支持 null ([#743](https://github.com/arco-design/arco-design-vue/pull/743))\n\n\n## 2.17.0\n\n`2022-02-11`\n\n### 💎 功能优化\n\n- 增加 input 元素部分原始属性的透传 ([#664](https://github.com/arco-design/arco-design-vue/pull/664))\n\n\n## 2.16.2\n\n`2022-01-24`\n\n### 💅 样式更新\n\n- 修复 `input-group` 中使用 input 组件圆角问题 ([#640](https://github.com/arco-design/arco-design-vue/pull/640))\n\n\n## 2.16.0\n\n`2022-01-21`\n\n### 🆕 新增功能\n\n- `<input-search>` 组件增加自定义搜素按钮内容的功能 ([#625](https://github.com/arco-design/arco-design-vue/pull/625))\n\n### 💅 样式更新\n\n- 修复 `<input-group>` 组件包裹 `<select>` 组件的样式问题 ([#588](https://github.com/arco-design/arco-design-vue/pull/588))\n\n\n## 2.15.0\n\n`2022-01-14`\n\n### 💅 样式更新\n\n- 修复暗黑模式下背景颜色错误的问题 ([#560](https://github.com/arco-design/arco-design-vue/pull/560))\n\n\n## 2.14.3\n\n`2022-01-12`\n\n### 🐛 问题修复\n\n- 修复 input-search 在 button 模式属性失效的问题 ([#552](https://github.com/arco-design/arco-design-vue/pull/552))\n\n\n## 2.14.2\n\n`2022-01-10`\n\n### 🐛 问题修复\n\n- 修复在 Safari 浏览器下 disabled 状态字体颜色错误的问题 ([#536](https://github.com/arco-design/arco-design-vue/pull/536))\n\n\n## 2.14.0\n\n`2022-01-07`\n\n### 🐛 问题修复\n\n- 修复 change 事件触发问题 ([#516](https://github.com/arco-design/arco-design-vue/pull/516))\n- 修复当存在前后置标签时，样式设置位置错误的问题 ([#516](https://github.com/arco-design/arco-design-vue/pull/516))\n\n\n## 2.12.0\n\n`2021-12-24`\n\n### ⚠️ 重点注意\n\n- 修改 change 事件仅在值发生改变时触发 ([#452](https://github.com/arco-design/arco-design-vue/pull/452))\n\n### 🆕 新增功能\n\n- `max-length` 增加 `errorOnly` 属性，增加 `word-slice` 属性 ([#451](https://github.com/arco-design/arco-design-vue/pull/451))\n\n\n## 2.7.0\n\n`2021-11-26`\n\n### 🐛 问题修复\n\n- 修复数字键盘回车键没有触发 `press-enter` 的问题 ([#273](https://github.com/arco-design/arco-design-vue/pull/273))\n\n\n## 2.1.0\n\n`2021-11-05`\n\n### 🆕 新增功能\n\n- 增加 `wordLength` 属性 ([#91](https://github.com/arco-design/arco-design-vue/pull/91))\n\n### 🐛 问题修复\n\n- 移除 `keydown` 事件的阻止默认行为 ([#84](https://github.com/arco-design/arco-design-vue/pull/84))\n- 修复 `a-input-number` 组件 `model-value` 默认值为 0 时不生效的问题 ([#75](https://github.com/arco-design/arco-design-vue/pull/75))\n- 修复 `input-search` 和 `input-password` 不支持 `slot` 的问题 ([#63](https://github.com/arco-design/arco-design-vue/pull/63))\n- 修复 `input-password` 切换密码可见状态时光标位置丢失的问题 ([#63](https://github.com/arco-design/arco-design-vue/pull/63))\n\n### 💅 样式更新\n\n- 修改 `clear-btn` 样式，解决 `select-view` 可能会抖动的问题 ([#70](https://github.com/arco-design/arco-design-vue/pull/70))\n\n"
  },
  {
    "path": "packages/web-vue/components/input/README.en-US.md",
    "content": "```yaml\nmeta:\n  type: Component\n  category: Data Entry\ntitle: Input\ndescription: Basic form components have been expanded on the basis of native controls and can be used in combination.\n```\n\n*Auto translate by google.*\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/status.md\n\n@import ./__demo__/size.md\n\n@import ./__demo__/prefix.md\n\n@import ./__demo__/prepend.md\n\n@import ./__demo__/word-limit.md\n\n@import ./__demo__/group.md\n\n@import ./__demo__/search.md\n\n@import ./__demo__/search-button.md\n\n@import ./__demo__/search-loading.md\n\n@import ./__demo__/password.md\n\n## API\n\n\n### `<input>` Props\n\n|Attribute|Description|Type|Default|version|\n|---|---|---|:---:|:---|\n|model-value **(v-model)**|Value|`string`|`-`||\n|default-value|Default value (uncontrolled state)|`string`|`''`||\n|size|Input size|`'mini' \\| 'small' \\| 'medium' \\| 'large'`|`'medium'`||\n|allow-clear|Whether to allow the input to be cleared|`boolean`|`false`||\n|disabled|Whether to disable|`boolean`|`false`||\n|readonly|Whether it is read-only|`boolean`|`false`||\n|error|Whether it is an error state|`boolean`|`false`||\n|placeholder|Prompt text|`string`|`-`||\n|max-length|Enter the maximum length of the value, the errorOnly attribute was added in version 2.12.0|`number \\| { length: number; errorOnly?: boolean }`|`0`||\n|show-word-limit|Whether to display word count|`boolean`|`false`||\n|word-length|Calculation method of word length|`(value: string) => number`|`-`||\n|word-slice|Character interception method, used together with wordLength|`(value: string, maxLength: number) => string`|`-`|2.12.0|\n|input-attrs|Attributes of inner input elements|`object`|`-`|2.27.0|\n|prepend|Prepend|`string`|`-`|2.57.0|\n|append|Append|`string`|`-`|2.57.0|\n### `<input>` Events\n\n|Event Name|Description|Parameters|\n|---|---|---|\n|input|Triggered when the user enters|value: `string`<br>ev: `Event`|\n|change|Only triggered when the input box is out of focus or when you press Enter|value: `string`<br>ev: `Event`|\n|press-enter|Triggered when the user presses enter|ev: `KeyboardEvent`|\n|clear|Triggered when the user clicks the clear button|ev: `MouseEvent`|\n|focus|Triggered when the input box gets focus|ev: `FocusEvent`|\n|blur|Triggered when the input box loses focus|ev: `FocusEvent`|\n### `<input>` Methods\n\n|Method|Description|Parameters|Return|\n|---|---|---|:---:|\n|focus|Make the input box focus|-|-|\n|blur|Make the input box lose focus|-|-|\n### `<input>` Slots\n\n|Slot Name|Description|Parameters|\n|---|---|---|\n|append|Append|-|\n|prepend|Prepend|-|\n|suffix|Suffix|-|\n|prefix|Prefix|-|\n\n\n\n\n\n\n\n\n### `<input-password>` Props\n\n|Attribute|Description|Type|Default|\n|---|---|---|:---:|\n|visibility **(v-model)**|Whether is visible|`boolean`|`-`|\n|default-visibility|Default visibility|`boolean`|`true`|\n|invisible-button|Whether to show visible buttons|`boolean`|`true`|\n### `<input-password>` Events\n\n|Event Name|Description|Parameters|\n|---|---|---|\n|visibility-change|Callback when visibility changes|visible: `boolean`|\n\n\n\n\n### `<input-search>` Props\n\n|Attribute|Description|Type|Default|version|\n|---|---|---|:---:|:---|\n|search-button|Whether it is the rear button mode|`boolean`|`false`||\n|loading|Whether it is loading state|`boolean`|`false`||\n|disabled|Whether to disable|`boolean`|`false`||\n|size|Input size|`'mini' \\| 'small' \\| 'medium' \\| 'large'`|`'medium'`||\n|button-text|The text of the search button will replace the original icon after use|`string`|`-`|2.16.0|\n|button-props|Button props|`ButtonProps`|`-`||\n### `<input-search>` Events\n\n|Event Name|Description|Parameters|\n|---|---|---|\n|search|Triggered when the search button is clicked|value: `string`<br>ev: `MouseEvent`|\n\n\n"
  },
  {
    "path": "packages/web-vue/components/input/README.zh-CN.md",
    "content": "```yaml\nmeta:\n  type: 组件\n  category: 数据输入\ntitle: 输入框 Input\ndescription: 基本表单组件，并在原生控件基础上进行了功能扩展，可以组合使用。\n```\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/status.md\n\n@import ./__demo__/size.md\n\n@import ./__demo__/prefix.md\n\n@import ./__demo__/prepend.md\n\n@import ./__demo__/word-limit.md\n\n@import ./__demo__/group.md\n\n@import ./__demo__/search.md\n\n@import ./__demo__/search-button.md\n\n@import ./__demo__/search-loading.md\n\n@import ./__demo__/password.md\n\n## API\n\n\n### `<input>` Props\n\n|参数名|描述|类型|默认值|版本|\n|---|---|---|:---:|:---|\n|model-value **(v-model)**|绑定值|`string`|`-`||\n|default-value|默认值（非受控状态）|`string`|`''`||\n|size|输入框大小|`'mini' \\| 'small' \\| 'medium' \\| 'large'`|`'medium'`||\n|allow-clear|是否允许清空输入框|`boolean`|`false`||\n|disabled|是否禁用|`boolean`|`false`||\n|readonly|是否为只读状态|`boolean`|`false`||\n|error|是否为错误状态|`boolean`|`false`||\n|placeholder|提示文字|`string`|`-`||\n|max-length|输入值的最大长度，errorOnly 属性在 2.12.0 版本添加|`number \\| { length: number; errorOnly?: boolean }`|`0`||\n|show-word-limit|是否显示字数统计|`boolean`|`false`||\n|word-length|字符长度的计算方法|`(value: string) => number`|`-`||\n|word-slice|字符截取方法，同 wordLength 一起使用|`(value: string, maxLength: number) => string`|`-`|2.12.0|\n|input-attrs|内部 input 元素的属性|`object`|`-`|2.27.0|\n|prepend|前置标签|`string`|`-`|2.57.0|\n|append|后置标签|`string`|`-`|2.57.0|\n### `<input>` Events\n\n|事件名|描述|参数|\n|---|---|---|\n|input|用户输入时触发|value: `string`<br>ev: `Event`|\n|change|仅在输入框失焦或按下回车时触发|value: `string`<br>ev: `Event`|\n|press-enter|用户按下回车时触发|ev: `KeyboardEvent`|\n|clear|用户点击清除按钮时触发|ev: `MouseEvent`|\n|focus|输入框获取焦点时触发|ev: `FocusEvent`|\n|blur|输入框失去焦点时触发|ev: `FocusEvent`|\n### `<input>` Methods\n\n|方法名|描述|参数|返回值|\n|---|---|---|---|\n|focus|使输入框获取焦点|-|-|\n|blur|使输入框失去焦点|-|-|\n### `<input>` Slots\n\n|插槽名|描述|参数|\n|---|:---:|---|\n|append|后置标签|-|\n|prepend|前置标签|-|\n|suffix|后缀元素|-|\n|prefix|前缀元素|-|\n\n\n\n\n\n\n\n\n### `<input-password>` Props\n\n|参数名|描述|类型|默认值|\n|---|---|---|:---:|\n|visibility **(v-model)**|是否可见，受控属性|`boolean`|`-`|\n|default-visibility|默认是否可见，非受控|`boolean`|`true`|\n|invisible-button|是否显示可见按钮|`boolean`|`true`|\n### `<input-password>` Events\n\n|事件名|描述|参数|\n|---|---|---|\n|visibility-change|visibility 改变时触发|visible: `boolean`|\n\n\n\n\n### `<input-search>` Props\n\n|参数名|描述|类型|默认值|版本|\n|---|---|---|:---:|:---|\n|search-button|是否为后置按钮模式|`boolean`|`false`||\n|loading|是否为加载中状态|`boolean`|`false`||\n|disabled|是否禁用|`boolean`|`false`||\n|size|输入框大小|`'mini' \\| 'small' \\| 'medium' \\| 'large'`|`'medium'`||\n|button-text|搜索按钮的文字，使用后会替换原本的图标|`string`|`-`|2.16.0|\n|button-props|搜索按钮的属性|`ButtonProps`|`-`||\n### `<input-search>` Events\n\n|事件名|描述|参数|\n|---|---|---|\n|search|单击搜索按钮时触发|value: `string`<br>ev: `MouseEvent`|\n\n\n"
  },
  {
    "path": "packages/web-vue/components/input/TEMPLATE.md",
    "content": "## zh-CN\n```yaml\nmeta:\n  type: 组件\n  category: 数据输入\ntitle: 输入框 Input\ndescription: 基本表单组件，并在原生控件基础上进行了功能扩展，可以组合使用。\n```\n---\n## en-US\n```yaml\nmeta:\n  type: Component\n  category: Data Entry\ntitle: Input\ndescription: Basic form components have been expanded on the basis of native controls and can be used in combination.\n```\n---\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/status.md\n\n@import ./__demo__/size.md\n\n@import ./__demo__/prefix.md\n\n@import ./__demo__/prepend.md\n\n@import ./__demo__/word-limit.md\n\n@import ./__demo__/group.md\n\n@import ./__demo__/search.md\n\n@import ./__demo__/search-button.md\n\n@import ./__demo__/search-loading.md\n\n@import ./__demo__/password.md\n\n## API\n\n%%API(input.tsx)%%\n\n%%API(input-group.vue)%%\n\n%%API(input-password.vue)%%\n\n%%API(input-search.tsx)%%\n"
  },
  {
    "path": "packages/web-vue/components/input/__demo__/basic.md",
    "content": "```yaml\ntitle:\n  zh-CN: 基本用法\n  en-US: Basic Usage\n```\n\n## zh-CN\n\n输入框的基本用法。\n\n---\n\n## en-US\n\nThe basic usage of input\n\n---\n\n```vue\n<template>\n  <a-space>\n    <a-input :style=\"{width:'320px'}\" placeholder=\"Please enter something\" allow-clear />\n    <a-input :style=\"{width:'320px'}\" default-value=\"content\" placeholder=\"Please enter something\" allow-clear />\n  </a-space>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/input/__demo__/group.md",
    "content": "```yaml\ntitle:\n  zh-CN: 输入框组合\n  en-US: Input group\n```\n\n## zh-CN\n\n通过 `input-group` 可以组合使用输入框。\n\n---\n\n## en-US\n\nInput boxes can be combined by `input-group`.\n\n---\n\n```vue\n<template>\n  <a-space direction=\"vertical\" size=\"large\">\n    <a-input-group>\n      <a-input :style=\"{width:'160px'}\" placeholder=\"first\" />\n      <a-input :style=\"{width:'160px'}\" placeholder=\"second\" />\n    </a-input-group>\n    <a-input-group>\n      <a-select :options=\"['Option1','Option2','Option3']\" :style=\"{width:'160px'}\" placeholder=\"first\" />\n      <a-input :style=\"{width:'160px'}\" placeholder=\"second\" />\n    </a-input-group>\n  </a-space>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/input/__demo__/password.md",
    "content": "```yaml\ntitle:\n  zh-CN: 密码输入框\n  en-US: Password Input\n```\n\n## zh-CN\n\n用于输入密码。\n\n---\n\n## en-US\n\nUsed to enter a password.\n\n---\n\n```vue\n<template>\n  <a-space direction=\"vertical\" size=\"large\">\n    <a-switch v-model=\"visibility\" />\n    <a-input-password\n      v-model:visibility=\"visibility\"\n      placeholder=\"Please enter something\"\n      :style=\"{width:'320px'}\"\n      :defaultVisibility=\"false\"\n      allow-clear\n    />\n  </a-space>\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n  setup() {\n    const visibility = ref(true);\n\n    return {\n      visibility\n    }\n  },\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/input/__demo__/prefix.md",
    "content": "```yaml\ntitle:\n  zh-CN: 前缀与后缀\n  en-US: Prefix & Suffix\n```\n\n## zh-CN\n\n通过指定 `prefix` 和 `suffix` 插槽来在输入框内添加前缀和后缀。\n\n---\n\n## en-US\n\nAdd prefix and suffix in the input box by specifying the `prefix` and `suffix` slots.\n\n---\n\n```vue\n<template>\n  <a-space direction=\"vertical\" size=\"large\">\n    <a-input :style=\"{width:'320px'}\" placeholder=\"Please enter something\" allow-clear>\n      <template #prefix>\n        <icon-user />\n      </template>\n    </a-input>\n    <a-input :style=\"{width:'320px'}\" placeholder=\"Please enter something\" allow-clear>\n      <template #suffix>\n        <icon-info-circle />\n      </template>\n    </a-input>\n  </a-space>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/input/__demo__/prepend.md",
    "content": "```yaml\ntitle:\n  zh-CN: 前置、后置标签\n  en-US: Prepend & Append\n```\n\n## zh-CN\n\n通过指定 `prepend` 和 `append` 插槽在输入框前后添加元素。\n\n---\n\n## en-US\n\nAdd elements before and after the input box by specifying the `prepend` and `append` slots.\n\n---\n\n```vue\n<template>\n  <a-space direction=\"vertical\" size=\"large\">\n    <a-input :style=\"{width:'320px'}\" placeholder=\"Please enter something\" allow-clear>\n      <template #prepend>\n        +86\n      </template>\n    </a-input>\n    <a-input :style=\"{width:'320px'}\" placeholder=\"Please enter something\" allow-clear>\n      <template #append>\n        RMB\n      </template>\n    </a-input>\n\n    <a-input :style=\"{width:'320px'}\" placeholder=\"Please enter something\" allow-clear prepend=\"+86\">\n    </a-input>\n    <a-input :style=\"{width:'320px'}\" placeholder=\"Please enter something\" allow-clear append=\"RMB\">\n    </a-input>\n  </a-space>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/input/__demo__/search-button.md",
    "content": "```yaml\ntitle:\n  zh-CN: 自定义搜索按钮\n  en-US: Custom search button\n```\n\n## zh-CN\n\n自定义搜索按钮的内容\n\n---\n\n## en-US\n\nCustomize the content of the search button\n\n---\n\n```vue\n<template>\n  <a-space direction=\"vertical\" size=\"large\">\n    <a-input-search :style=\"{width:'320px'}\" placeholder=\"Please enter something\" button-text=\"Search\" search-button/>\n    <a-input-search :style=\"{width:'320px'}\" placeholder=\"Please enter something\" search-button>\n      <template #button-icon>\n        <icon-search/>\n      </template>\n      <template #button-default>\n        Search\n      </template>\n    </a-input-search>\n  </a-space>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/input/__demo__/search-loading.md",
    "content": "```yaml\ntitle:\n  zh-CN: 搜索框（加载中）\n  en-US: Search Input (Loading)\n```\n\n## zh-CN\n\n通过 `loading` 属性可以让搜索框展示加载中状态。\n\n---\n\n## en-US\n\nThe `loading` property allows the search box to display the loading status.\n\n---\n\n```vue\n<template>\n  <a-space direction=\"vertical\" size=\"large\">\n    <a-input-search :style=\"{width:'320px'}\" placeholder=\"Please enter something\" loading />\n    <a-input-search :style=\"{width:'320px'}\" placeholder=\"Please enter something\" search-button loading />\n  </a-space>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/input/__demo__/search.md",
    "content": "```yaml\ntitle:\n  zh-CN: 搜索框\n  en-US: Search Input\n```\n\n## zh-CN\n\n带有搜索按钮的输入框，用于内容检索。\n\n---\n\n## en-US\n\nAn input box with a search button for content retrieval.\n\n---\n\n```vue\n<template>\n  <a-space direction=\"vertical\" size=\"large\">\n    <a-input-search :style=\"{width:'320px'}\" placeholder=\"Please enter something\"/>\n    <a-input-search :style=\"{width:'320px'}\" placeholder=\"Please enter something\" search-button/>\n  </a-space>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/input/__demo__/size.md",
    "content": "```yaml\ntitle:\n  zh-CN: 输入框尺寸\n  en-US: Input Size\n```\n\n\n## zh-CN\n\n输入框定义了四种默认尺寸 `mini, small, medium, large` ，分别为 `24px, 28px, 32px, 36px` 。\n\n---\n\n## en-US\n\nThe input box defines four default sizes `mini, small, medium, large`, which are `24px, 28px, 32px, 36px` respectively.\n\n---\n\n```vue\n\n<template>\n  <a-space direction=\"vertical\" size=\"large\">\n    <a-radio-group type=\"button\" v-model=\"size\">\n      <a-radio value=\"mini\">mini</a-radio>\n      <a-radio value=\"small\">small</a-radio>\n      <a-radio value=\"medium\">medium</a-radio>\n      <a-radio value=\"large\">large</a-radio>\n    </a-radio-group>\n    <a-input :style=\"{width:'320px'}\" placeholder=\"Please enter something\" :size=\"size\" allow-clear />\n  </a-space>\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n  setup() {\n    const size = ref('medium');\n\n    return {\n      size\n    }\n  },\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/input/__demo__/status.md",
    "content": "```yaml\ntitle:\n  zh-CN: 输入框状态\n  en-US: Status\n```\n\n## zh-CN\n\n输入框可以设置禁用和错误状态。\n\n---\n\n## en-US\n\nThe input box can be set to disable and error status.\n\n---\n\n```vue\n<template>\n  <a-space direction=\"vertical\" size=\"large\">\n    <a-input :style=\"{width:'320px'}\" placeholder=\"Disabled status\" disabled/>\n    <a-input :style=\"{width:'320px'}\" default-value=\"Disabled\" placeholder=\"Disabled status\" disabled/>\n    <a-input :style=\"{width:'320px'}\" placeholder=\"Error status\" error/>\n  </a-space>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/input/__demo__/word-limit.md",
    "content": "```yaml\ntitle:\n  zh-CN: 字数统计\n  en-US: Word Limit\n```\n\n## zh-CN\n\n设置 `max-length` 可以限制最大字数，配合 `show-word-limit` 可以显示字数统计。\n\n---\n\n## en-US\n\nSet `max-length` to limit the maximum number of words, and use `show-word-limit` to display word count statistics.\n\n---\n\n```vue\n<template>\n  <a-space direction=\"vertical\" size=\"large\" fill>\n    <a-input :style=\"{width:'320px'}\" placeholder=\"Please enter something\" :max-length=\"10\" allow-clear show-word-limit />\n    <a-input :style=\"{width:'320px'}\" placeholder=\"Please enter something\" :max-length=\"{length:10,errorOnly:true}\" allow-clear show-word-limit />\n  </a-space>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/input/__test__/__snapshots__/demo.test.ts.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`<input> demo: render [basic] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 8px; row-gap: 8px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-input-wrapper\\\\\" style=\\\\\"width: 320px;\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" placeholder=\\\\\"Please enter something\\\\\" value=\\\\\"\\\\\"><!----><!----></span></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-input-wrapper\\\\\" style=\\\\\"width: 320px;\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" placeholder=\\\\\"Please enter something\\\\\" value=\\\\\"content\\\\\"><span class=\\\\\"arco-icon-hover arco-input-icon-hover arco-input-clear-btn\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-close\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M9.857 9.858 24 24m0 0 14.142 14.142M24 24 38.142 9.858M24 24 9.857 38.142\\\\\"></path></svg></span>\n    <!----></span>\n  </div>\n</div>\"\n`;\n\nexports[`<input> demo: render [group] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-vertical\\\\\" style=\\\\\"column-gap: 24px; row-gap: 24px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-input-group\\\\\"><span class=\\\\\"arco-input-wrapper\\\\\" style=\\\\\"width: 160px;\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" placeholder=\\\\\"first\\\\\" value=\\\\\"\\\\\"><!----><!----></span><span class=\\\\\"arco-input-wrapper\\\\\" style=\\\\\"width: 160px;\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" placeholder=\\\\\"second\\\\\" value=\\\\\"\\\\\"><!----><!----></span></div>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-input-group\\\\\"><span class=\\\\\"arco-select-view-single arco-select arco-select-view arco-select-view-size-medium\\\\\" style=\\\\\"width: 160px;\\\\\" title=\\\\\"\\\\\"><!----><input class=\\\\\"arco-select-view-input\\\\\" readonly=\\\\\"\\\\\" placeholder=\\\\\"first\\\\\" value=\\\\\"\\\\\"><span class=\\\\\"arco-select-view-value arco-select-view-value-hidden\\\\\"><!----></span><span class=\\\\\"arco-select-view-suffix\\\\\"><!----><span class=\\\\\"arco-select-view-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down arco-select-view-arrow-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n      <!----></span></span>\n      <!----><span class=\\\\\"arco-input-wrapper\\\\\" style=\\\\\"width: 160px;\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" placeholder=\\\\\"second\\\\\" value=\\\\\"\\\\\"><!----><!----></span>\n    </div>\n  </div>\n</div>\"\n`;\n\nexports[`<input> demo: render [password] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-vertical\\\\\" style=\\\\\"column-gap: 24px; row-gap: 24px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button type=\\\\\"button\\\\\" role=\\\\\"switch\\\\\" aria-checked=\\\\\"true\\\\\" class=\\\\\"arco-switch arco-switch-type-circle arco-switch-checked\\\\\"><span class=\\\\\"arco-switch-handle\\\\\"><span class=\\\\\"arco-switch-handle-icon\\\\\"></span></span><!--  prettier-ignore  -->\n      <!--v-if-->\n    </button></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-input-wrapper\\\\\" style=\\\\\"width: 320px;\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"password\\\\\" placeholder=\\\\\"Please enter something\\\\\" value=\\\\\"\\\\\"><!----><span class=\\\\\"arco-input-suffix\\\\\"><!----><span class=\\\\\"arco-icon-hover\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-eye-invisible\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M14 14.5c-2.69 2-5.415 5.33-8 9.5 5.373 8.667 11.373 13 18 13 3.325 0 6.491-1.09 9.5-3.271M17.463 12.5C19 11 21.75 11 24 11c6.627 0 12.627 4.333 18 13-1.766 2.848-3.599 5.228-5.5 7.14\\\\\"></path><path d=\\\\\"M29 24a5 5 0 1 1-10 0 5 5 0 0 1 10 0ZM6.852 7.103l34.294 34.294\\\\\"></path></svg></span>\n    <!----></span></span>\n  </div>\n</div>\"\n`;\n\nexports[`<input> demo: render [prefix] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-vertical\\\\\" style=\\\\\"column-gap: 24px; row-gap: 24px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-input-wrapper\\\\\" style=\\\\\"width: 320px;\\\\\"><span class=\\\\\"arco-input-prefix\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-user\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M7 37c0-4.97 4.03-8 9-8h16c4.97 0 9 3.03 9 8v3a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1v-3Z\\\\\"></path><circle cx=\\\\\"24\\\\\" cy=\\\\\"15\\\\\" r=\\\\\"8\\\\\"></circle></svg></span><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" placeholder=\\\\\"Please enter something\\\\\" value=\\\\\"\\\\\">\n    <!---->\n    <!----></span>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-input-wrapper\\\\\" style=\\\\\"width: 320px;\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" placeholder=\\\\\"Please enter something\\\\\" value=\\\\\"\\\\\"><!----><span class=\\\\\"arco-input-suffix\\\\\"><!----><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-info-circle\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M24 20v14m0-16v-4m18 10c0 9.941-8.059 18-18 18S6 33.941 6 24 14.059 6 24 6s18 8.059 18 18Z\\\\\"></path></svg><!----></span></span></div>\n</div>\"\n`;\n\nexports[`<input> demo: render [prepend] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-vertical\\\\\" style=\\\\\"column-gap: 24px; row-gap: 24px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-input-outer arco-input-outer-size-medium\\\\\" style=\\\\\"width: 320px;\\\\\"><span class=\\\\\"arco-input-prepend\\\\\"> +86 </span><span class=\\\\\"arco-input-wrapper\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" placeholder=\\\\\"Please enter something\\\\\" value=\\\\\"\\\\\"><!----><!----></span>\n    <!----></span>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-input-outer arco-input-outer-size-medium\\\\\" style=\\\\\"width: 320px;\\\\\"><!----><span class=\\\\\"arco-input-wrapper\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" placeholder=\\\\\"Please enter something\\\\\" value=\\\\\"\\\\\"><!----><!----></span><span class=\\\\\"arco-input-append\\\\\"> RMB </span></span></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-input-outer arco-input-outer-size-medium\\\\\" style=\\\\\"width: 320px;\\\\\"><span class=\\\\\"arco-input-prepend\\\\\">+86</span><span class=\\\\\"arco-input-wrapper\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" placeholder=\\\\\"Please enter something\\\\\" value=\\\\\"\\\\\"><!----><!----></span>\n    <!----></span>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-input-outer arco-input-outer-size-medium\\\\\" style=\\\\\"width: 320px;\\\\\"><!----><span class=\\\\\"arco-input-wrapper\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" placeholder=\\\\\"Please enter something\\\\\" value=\\\\\"\\\\\"><!----><!----></span><span class=\\\\\"arco-input-append\\\\\">RMB</span></span></div>\n</div>\"\n`;\n\nexports[`<input> demo: render [search] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-vertical\\\\\" style=\\\\\"column-gap: 24px; row-gap: 24px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-input-wrapper arco-input-search\\\\\" style=\\\\\"width: 320px;\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" placeholder=\\\\\"Please enter something\\\\\" value=\\\\\"\\\\\"><!----><span class=\\\\\"arco-input-suffix\\\\\"><!----><span class=\\\\\"arco-icon-hover\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-search\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M33.072 33.071c6.248-6.248 6.248-16.379 0-22.627-6.249-6.249-16.38-6.249-22.628 0-6.248 6.248-6.248 16.379 0 22.627 6.248 6.248 16.38 6.248 22.628 0Zm0 0 8.485 8.485\\\\\"></path></svg></span>\n    <!---->\n    <!----></span></span>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-input-outer arco-input-outer-size-medium arco-input-search\\\\\" style=\\\\\"width: 320px;\\\\\"><!----><span class=\\\\\"arco-input-wrapper\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" placeholder=\\\\\"Please enter something\\\\\" value=\\\\\"\\\\\"><!----><!----></span><span class=\\\\\"arco-input-append\\\\\"><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal arco-btn-only-icon arco-input-search-btn\\\\\" type=\\\\\"button\\\\\"><span class=\\\\\"arco-btn-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-search\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M33.072 33.071c6.248-6.248 6.248-16.379 0-22.627-6.249-6.249-16.38-6.249-22.628 0-6.248 6.248-6.248 16.379 0 22.627 6.248 6.248 16.38 6.248 22.628 0Zm0 0 8.485 8.485\\\\\"></path></svg></span></button></span></span></div>\n</div>\"\n`;\n\nexports[`<input> demo: render [search-button] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-vertical\\\\\" style=\\\\\"column-gap: 24px; row-gap: 24px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-input-outer arco-input-outer-size-medium arco-input-search\\\\\" style=\\\\\"width: 320px;\\\\\"><!----><span class=\\\\\"arco-input-wrapper\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" placeholder=\\\\\"Please enter something\\\\\" value=\\\\\"\\\\\"><!----><!----></span><span class=\\\\\"arco-input-append\\\\\"><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal arco-input-search-btn\\\\\" type=\\\\\"button\\\\\"><!--v-if-->Search</button></span></span></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-input-outer arco-input-outer-size-medium arco-input-search\\\\\" style=\\\\\"width: 320px;\\\\\"><!----><span class=\\\\\"arco-input-wrapper\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" placeholder=\\\\\"Please enter something\\\\\" value=\\\\\"\\\\\"><!----><!----></span><span class=\\\\\"arco-input-append\\\\\"><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal arco-input-search-btn\\\\\" type=\\\\\"button\\\\\"><span class=\\\\\"arco-btn-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-search\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M33.072 33.071c6.248-6.248 6.248-16.379 0-22.627-6.249-6.249-16.38-6.249-22.628 0-6.248 6.248-6.248 16.379 0 22.627 6.248 6.248 16.38 6.248 22.628 0Zm0 0 8.485 8.485\\\\\"></path></svg></span> Search </button></span></span></div>\n</div>\"\n`;\n\nexports[`<input> demo: render [search-loading] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-vertical\\\\\" style=\\\\\"column-gap: 24px; row-gap: 24px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-input-wrapper arco-input-search\\\\\" style=\\\\\"width: 320px;\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" placeholder=\\\\\"Please enter something\\\\\" value=\\\\\"\\\\\"><!----><span class=\\\\\"arco-input-suffix\\\\\"><!----><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-loading\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M42 24c0 9.941-8.059 18-18 18S6 33.941 6 24 14.059 6 24 6\\\\\"></path></svg><!----><!----></span></span></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-input-outer arco-input-outer-size-medium arco-input-search\\\\\" style=\\\\\"width: 320px;\\\\\"><!----><span class=\\\\\"arco-input-wrapper\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" placeholder=\\\\\"Please enter something\\\\\" value=\\\\\"\\\\\"><!----><!----></span><span class=\\\\\"arco-input-append\\\\\"><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal arco-btn-loading arco-btn-only-icon arco-input-search-btn\\\\\" type=\\\\\"button\\\\\"><span class=\\\\\"arco-btn-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-loading arco-icon-spin\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M42 24c0 9.941-8.059 18-18 18S6 33.941 6 24 14.059 6 24 6\\\\\"></path></svg></span></button></span></span></div>\n</div>\"\n`;\n\nexports[`<input> demo: render [size] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-vertical\\\\\" style=\\\\\"column-gap: 24px; row-gap: 24px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-radio-group-button arco-radio-group-size-medium arco-radio-group-direction-horizontal\\\\\"><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"mini\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">mini</span></label><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"small\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">small</span></label><label class=\\\\\"arco-radio-button arco-radio-checked\\\\\"><input type=\\\\\"radio\\\\\" checked=\\\\\"\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"medium\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">medium</span></label><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"large\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">large</span></label></span></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-input-wrapper\\\\\" style=\\\\\"width: 320px;\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" placeholder=\\\\\"Please enter something\\\\\" value=\\\\\"\\\\\"><!----><!----></span></div>\n</div>\"\n`;\n\nexports[`<input> demo: render [status] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-vertical\\\\\" style=\\\\\"column-gap: 24px; row-gap: 24px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-input-wrapper arco-input-disabled\\\\\" style=\\\\\"width: 320px;\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" placeholder=\\\\\"Disabled status\\\\\" disabled=\\\\\"\\\\\" value=\\\\\"\\\\\"><!----><!----></span></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-input-wrapper arco-input-disabled\\\\\" style=\\\\\"width: 320px;\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" placeholder=\\\\\"Disabled status\\\\\" disabled=\\\\\"\\\\\" value=\\\\\"Disabled\\\\\"><!----><!----></span></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-input-wrapper arco-input-error\\\\\" style=\\\\\"width: 320px;\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" placeholder=\\\\\"Error status\\\\\" aria-invalid=\\\\\"true\\\\\" value=\\\\\"\\\\\"><!----><!----></span></div>\n</div>\"\n`;\n\nexports[`<input> demo: render [word-limit] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-vertical arco-space-fill\\\\\" style=\\\\\"column-gap: 24px; row-gap: 24px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-input-wrapper\\\\\" style=\\\\\"width: 320px;\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" placeholder=\\\\\"Please enter something\\\\\" value=\\\\\"\\\\\"><!----><span class=\\\\\"arco-input-suffix\\\\\"><span class=\\\\\"arco-input-word-limit\\\\\">0/10</span>\n    <!---->\n    <!----></span></span>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-input-wrapper\\\\\" style=\\\\\"width: 320px;\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" placeholder=\\\\\"Please enter something\\\\\" value=\\\\\"\\\\\"><!----><span class=\\\\\"arco-input-suffix\\\\\"><span class=\\\\\"arco-input-word-limit\\\\\">0/10</span>\n    <!---->\n    <!----></span></span>\n  </div>\n</div>\"\n`;\n"
  },
  {
    "path": "packages/web-vue/components/input/__test__/demo.test.ts",
    "content": "import demoTest from '../../../scripts/demo-test';\n\ndemoTest('input');\n"
  },
  {
    "path": "packages/web-vue/components/input/__test__/index.test.ts",
    "content": "import { mount } from '@vue/test-utils';\nimport Input from '../index';\n\ndescribe('Input', () => {\n  test('should emit change event', () => {\n    const wrapper = mount(Input);\n    const input = wrapper.find('input');\n\n    input.setValue('test');\n    const emits = wrapper.emitted();\n    expect(emits);\n  });\n\n  test('should clear content', async () => {\n    const wrapper = mount(Input, {\n      props: {\n        defaultValue: 'test',\n        allowClear: true,\n      },\n    });\n    const input = wrapper.find('input');\n    expect(input.element.value).toBe('test');\n    await wrapper.find('.arco-input-clear-btn').trigger('click');\n    expect(input.element.value).toBe('');\n  });\n});\n"
  },
  {
    "path": "packages/web-vue/components/input/index.ts",
    "content": "import type { App } from 'vue';\nimport type { ArcoOptions } from '../_utils/types';\nimport { setGlobalConfig, getComponentPrefix } from '../_utils/global-config';\nimport _Input from './input';\nimport _InputSearch from './input-search';\nimport _InputPassword from './input-password.vue';\nimport _InputGroup from './input-group.vue';\n\nconst Input = Object.assign(_Input, {\n  Search: _InputSearch,\n  Password: _InputPassword,\n  Group: _InputGroup,\n  install: (app: App, options?: ArcoOptions) => {\n    setGlobalConfig(app, options);\n    const componentPrefix = getComponentPrefix(options);\n\n    app.component(componentPrefix + _Input.name, _Input);\n    app.component(componentPrefix + _InputGroup.name, _InputGroup);\n    app.component(componentPrefix + _InputSearch.name, _InputSearch);\n    app.component(componentPrefix + _InputPassword.name, _InputPassword);\n  },\n});\n\nexport type InputInstance = InstanceType<typeof _Input>;\nexport type InputSearchInstance = InstanceType<typeof _InputSearch>;\nexport type InputPasswordInstance = InstanceType<typeof _InputPassword>;\nexport type InputGroupInstance = InstanceType<typeof _InputGroup>;\n\nexport {\n  _InputSearch as InputSearch,\n  _InputPassword as InputPassword,\n  _InputGroup as InputGroup,\n};\n\nexport default Input;\n"
  },
  {
    "path": "packages/web-vue/components/input/input-group.vue",
    "content": "<template>\n  <div :class=\"prefixCls\">\n    <slot />\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue';\nimport { getPrefixCls } from '../_utils/global-config';\n\nexport default defineComponent({\n  name: 'InputGroup',\n  setup() {\n    const prefixCls = getPrefixCls('input-group');\n\n    return {\n      prefixCls,\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/input/input-password.vue",
    "content": "<template>\n  <a-input ref=\"inputRef\" :type=\"mergedVisible ? 'password' : 'text'\">\n    <template v-if=\"$slots.prepend\" #prepend>\n      <slot name=\"prepend\" />\n    </template>\n    <template v-if=\"$slots.prefix\" #prefix>\n      <slot name=\"prefix\" />\n    </template>\n    <template v-if=\"invisibleButton || $slots.suffix\" #suffix>\n      <a-icon-hover\n        v-if=\"invisibleButton\"\n        @click=\"handleInvisible\"\n        @mousedown.prevent\n        @mouseup.prevent\n      >\n        <icon-eye v-if=\"!mergedVisible\" />\n        <icon-eye-invisible v-else />\n      </a-icon-hover>\n      <slot name=\"suffix\" />\n    </template>\n\n    <template v-if=\"$slots.append\" #append>\n      <slot name=\"append\" />\n    </template>\n  </a-input>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, reactive, ref, toRefs } from 'vue';\nimport AIconHover from '../_components/icon-hover.vue';\nimport IconEye from '../icon/icon-eye';\nimport IconEyeInvisible from '../icon/icon-eye-invisible';\nimport useMergeState from '../_hooks/use-merge-state';\nimport AInput from './input';\n\nexport default defineComponent({\n  name: 'InputPassword',\n  components: {\n    IconEye,\n    IconEyeInvisible,\n    AIconHover,\n    AInput,\n  },\n  props: {\n    /**\n     * @zh 是否可见，受控属性\n     * @en Whether is visible\n     * @vModel\n     */\n    visibility: {\n      type: Boolean,\n      default: undefined,\n    },\n    /**\n     * @zh 默认是否可见，非受控\n     * @en Default visibility\n     */\n    defaultVisibility: {\n      type: Boolean,\n      default: true,\n    },\n    /**\n     * @zh 是否显示可见按钮\n     * @en Whether to show visible buttons\n     */\n    invisibleButton: {\n      type: Boolean,\n      default: true,\n    },\n  },\n  emits: [\n    /**\n     * @zh visibility 改变时触发\n     * @en Callback when visibility changes\n     * @param {boolean} visible\n     */\n    'visibility-change',\n    'update:visibility',\n  ],\n  setup(props, { emit }) {\n    const { visibility, defaultVisibility } = toRefs(props);\n    const inputRef = ref();\n\n    const handleInvisible = () => {\n      setVisible(!mergedVisible.value);\n    };\n\n    const [mergedVisible, setLocalVisible] = useMergeState(\n      defaultVisibility.value,\n      reactive({\n        value: visibility,\n      })\n    );\n\n    const setVisible = (newVisible: boolean) => {\n      if (newVisible !== mergedVisible.value) {\n        emit('visibility-change', newVisible);\n        emit('update:visibility', newVisible);\n        setLocalVisible(newVisible);\n      }\n    };\n\n    return {\n      inputRef,\n      mergedVisible,\n      handleInvisible,\n    };\n  },\n  methods: {\n    focus() {\n      (this.inputRef as HTMLInputElement)?.focus();\n    },\n    blur() {\n      (this.inputRef as HTMLInputElement)?.blur();\n    },\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/input/input-search.tsx",
    "content": "import { defineComponent, PropType, ref, toRefs } from 'vue';\nimport { getPrefixCls } from '../_utils/global-config';\nimport IconHover from '../_components/icon-hover.vue';\nimport IconSearch from '../icon/icon-search';\nimport IconLoading from '../icon/icon-loading';\nimport Button, { ButtonProps } from '../button';\nimport Input from './input';\nimport type { Size } from '../_utils/constant';\nimport { useSize } from '../_hooks/use-size';\n\nexport default defineComponent({\n  name: 'InputSearch',\n  props: {\n    /**\n     * @zh 是否为后置按钮模式\n     * @en Whether it is the rear button mode\n     */\n    searchButton: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 是否为加载中状态\n     * @en Whether it is loading state\n     */\n    loading: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 是否禁用\n     * @en Whether to disable\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 输入框大小\n     * @en Input size\n     * @values 'mini','small','medium','large'\n     * @defaultValue 'medium'\n     */\n    size: {\n      type: String as PropType<Size>,\n    },\n    /**\n     * @zh 搜索按钮的文字，使用后会替换原本的图标\n     * @en The text of the search button will replace the original icon after use\n     * @version 2.16.0\n     */\n    buttonText: {\n      type: String,\n    },\n    /**\n     * @zh 搜索按钮的属性\n     * @en Button props\n     */\n    buttonProps: {\n      type: Object as PropType<ButtonProps>,\n    },\n  },\n  emits: {\n    /**\n     * @zh 单击搜索按钮时触发\n     * @en Triggered when the search button is clicked\n     * @param {string} value\n     * @param {MouseEvent} ev\n     */\n    search: (value: string, ev: MouseEvent) => true,\n  },\n  setup(props, { emit, slots }) {\n    const { size } = toRefs(props);\n    const prefixCls = getPrefixCls('input-search');\n    const { mergedSize } = useSize(size);\n\n    const inputRef = ref();\n\n    const handleClick = (e: MouseEvent) => {\n      if (inputRef.value.inputRef) {\n        emit('search', (inputRef.value.inputRef as HTMLInputElement).value, e);\n      }\n    };\n\n    const renderSuffix = () => {\n      return (\n        <>\n          {props.loading ? (\n            <IconLoading />\n          ) : (\n            <IconHover\n              // @ts-ignore\n              onClick={handleClick}\n            >\n              <IconSearch />\n            </IconHover>\n          )}\n          {slots.suffix?.()}\n        </>\n      );\n    };\n\n    const renderButton = () => {\n      let _slots = {};\n      if (props.buttonText || slots['button-default'] || slots['button-icon']) {\n        _slots = {\n          default:\n            slots['button-default'] ??\n            (props.buttonText ? () => props.buttonText : undefined),\n          icon: slots['button-icon'],\n        };\n      } else {\n        _slots = {\n          icon: () => <IconSearch />,\n        };\n      }\n\n      return (\n        <Button\n          v-slots={_slots}\n          type=\"primary\"\n          class={`${prefixCls}-btn`}\n          disabled={props.disabled}\n          size={mergedSize.value}\n          loading={props.loading}\n          {...props.buttonProps}\n          onClick={handleClick}\n        />\n      );\n    };\n\n    const render = () => (\n      <Input\n        ref={inputRef}\n        class={prefixCls}\n        v-slots={{\n          prepend: slots.prepend,\n          prefix: slots.prefix,\n          suffix: props.searchButton ? slots.suffix : renderSuffix,\n          append: props.searchButton ? renderButton : slots.append,\n        }}\n        size={mergedSize.value}\n        disabled={props.disabled}\n      />\n    );\n\n    return {\n      inputRef,\n      render,\n    };\n  },\n  methods: {\n    focus() {\n      (this.inputRef as HTMLInputElement)?.focus();\n    },\n    blur() {\n      (this.inputRef as HTMLInputElement)?.blur();\n    },\n  },\n  render() {\n    return this.render();\n  },\n});\n"
  },
  {
    "path": "packages/web-vue/components/input/input.tsx",
    "content": "import type { PropType } from 'vue';\nimport { computed, defineComponent, ref, nextTick, toRefs, watch } from 'vue';\nimport { getPrefixCls } from '../_utils/global-config';\nimport { INPUT_EVENTS, Size } from '../_utils/constant';\nimport FeedbackIcon from '../_components/feedback-icon.vue';\nimport { Enter } from '../_utils/keycode';\nimport IconHover from '../_components/icon-hover.vue';\nimport IconClose from '../icon/icon-close';\nimport { omit } from '../_utils/omit';\nimport pick from '../_utils/pick';\nimport { isFunction, isNull, isObject, isUndefined } from '../_utils/is';\nimport { useFormItem } from '../_hooks/use-form-item';\nimport { useSize } from '../_hooks/use-size';\nimport { useCursor } from '../_hooks/use-cursor';\n\nexport default defineComponent({\n  name: 'Input',\n  inheritAttrs: false,\n  props: {\n    /**\n     * @zh 绑定值\n     * @en Value\n     */\n    modelValue: String,\n    /**\n     * @zh 默认值（非受控状态）\n     * @en Default value (uncontrolled state)\n     */\n    defaultValue: {\n      type: String,\n      default: '',\n    },\n    /**\n     * @zh 输入框大小\n     * @en Input size\n     * @values 'mini','small','medium','large'\n     * @defaultValue 'medium'\n     */\n    size: {\n      type: String as PropType<Size>,\n    },\n    /**\n     * @zh 是否允许清空输入框\n     * @en Whether to allow the input to be cleared\n     */\n    allowClear: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 是否禁用\n     * @en Whether to disable\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 是否为只读状态\n     * @en Whether it is read-only\n     */\n    readonly: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 是否为错误状态\n     * @en Whether it is an error state\n     */\n    error: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 提示文字\n     * @en Prompt text\n     */\n    placeholder: String,\n    /**\n     * @zh 输入值的最大长度，errorOnly 属性在 2.12.0 版本添加\n     * @en Enter the maximum length of the value, the errorOnly attribute was added in version 2.12.0\n     */\n    maxLength: {\n      type: [Number, Object] as PropType<\n        number | { length: number; errorOnly?: boolean }\n      >,\n      default: 0,\n    },\n    /**\n     * @zh 是否显示字数统计\n     * @en Whether to display word count\n     */\n    showWordLimit: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 字符长度的计算方法\n     * @en Calculation method of word length\n     */\n    wordLength: {\n      type: Function as PropType<(value: string) => number>,\n    },\n    /**\n     * @zh 字符截取方法，同 wordLength 一起使用\n     * @en Character interception method, used together with wordLength\n     * @version 2.12.0\n     */\n    wordSlice: {\n      type: Function as PropType<(value: string, maxLength: number) => string>,\n    },\n    /**\n     * @zh 内部 input 元素的属性\n     * @en Attributes of inner input elements\n     * @version 2.27.0\n     */\n    inputAttrs: {\n      type: Object,\n    },\n    // private\n    type: {\n      type: String as PropType<'text' | 'password'>,\n      default: 'text',\n    },\n    /**\n     * @zh 前置标签\n     * @en Prepend\n     * @version 2.57.0\n     */\n    prepend: String,\n    /**\n     * @zh 后置标签\n     * @en Append\n     * @version 2.57.0\n     */\n    append: String,\n  },\n  emits: {\n    'update:modelValue': (value: string) => true,\n    /**\n     * @zh 用户输入时触发\n     * @en Triggered when the user enters\n     * @param {string} value\n     * @param {Event} ev\n     */\n    'input': (value: string, ev: Event) => true,\n    /**\n     * @zh 仅在输入框失焦或按下回车时触发\n     * @en Only triggered when the input box is out of focus or when you press Enter\n     * @param {string} value\n     * @param {Event} ev\n     */\n    'change': (value: string, ev: Event) => true,\n    /**\n     * @zh 用户按下回车时触发\n     * @en Triggered when the user presses enter\n     * @param {KeyboardEvent} ev\n     */\n    'pressEnter': (ev: KeyboardEvent) => true,\n    /**\n     * @zh 用户点击清除按钮时触发\n     * @en Triggered when the user clicks the clear button\n     * @param {MouseEvent} ev\n     */\n    'clear': (ev: MouseEvent) => true,\n    /**\n     * @zh 输入框获取焦点时触发\n     * @en Triggered when the input box gets focus\n     * @param {FocusEvent} ev\n     */\n    'focus': (ev: FocusEvent) => true,\n    /**\n     * @zh 输入框失去焦点时触发\n     * @en Triggered when the input box loses focus\n     * @param {FocusEvent} ev\n     */\n    'blur': (ev: FocusEvent) => true,\n  },\n  /**\n   * @zh 前缀元素\n   * @en Prefix\n   * @slot prefix\n   */\n  /**\n   * @zh 后缀元素\n   * @en Suffix\n   * @slot suffix\n   */\n  /**\n   * @zh 前置标签\n   * @en Prepend\n   * @slot prepend\n   */\n  /**\n   * @zh 后置标签\n   * @en Append\n   * @slot append\n   */\n  setup(props, { emit, slots, attrs }) {\n    const { size, disabled, error, modelValue } = toRefs(props);\n    const prefixCls = getPrefixCls('input');\n    const inputRef = ref<HTMLInputElement>();\n    const {\n      mergedSize: _mergedSize,\n      mergedDisabled,\n      mergedError: _mergedError,\n      feedback,\n      eventHandlers,\n    } = useFormItem({ size, disabled, error });\n    const { mergedSize } = useSize(_mergedSize);\n    const [recordCursor, setCursor] = useCursor(inputRef);\n\n    // 值相关\n    const _value = ref(props.defaultValue);\n    const computedValue = computed(() => props.modelValue ?? _value.value);\n    let preValue = computedValue.value;\n\n    watch(modelValue, (value) => {\n      if (isUndefined(value) || isNull(value)) {\n        _value.value = '';\n      }\n    });\n\n    watch(computedValue, (value, oldValue) => {\n      preValue = oldValue;\n    });\n\n    // 状态相关\n    const focused = ref(false);\n    const showClearBtn = computed(\n      () =>\n        props.allowClear &&\n        !props.readonly &&\n        !mergedDisabled.value &&\n        Boolean(computedValue.value)\n    );\n\n    // 输入法相关\n    const isComposition = ref(false);\n    const compositionValue = ref('');\n\n    const getValueLength = (value: string) => {\n      if (isFunction(props.wordLength)) {\n        return props.wordLength(value);\n      }\n      return value.length ?? 0;\n    };\n\n    const valueLength = computed(() => getValueLength(computedValue.value));\n\n    const mergedError = computed(\n      () =>\n        _mergedError.value ||\n        Boolean(\n          isObject(props.maxLength) &&\n            props.maxLength.errorOnly &&\n            valueLength.value > maxLength.value\n        )\n    );\n\n    const maxLengthErrorOnly = computed(\n      () => isObject(props.maxLength) && Boolean(props.maxLength.errorOnly)\n    );\n\n    const maxLength = computed(() => {\n      if (isObject(props.maxLength)) {\n        return props.maxLength.length;\n      }\n      return props.maxLength;\n    });\n\n    const defaultMaxLength = computed(() => {\n      const bytePerChar = getValueLength('a');\n      return Math.floor(maxLength.value / bytePerChar);\n    });\n\n    const updateValue = (value: string) => {\n      if (\n        maxLength.value &&\n        !maxLengthErrorOnly.value &&\n        getValueLength(value) > maxLength.value\n      ) {\n        value =\n          props.wordSlice?.(value, maxLength.value) ??\n          value.slice(0, defaultMaxLength.value);\n      }\n\n      _value.value = value;\n      emit('update:modelValue', value);\n    };\n\n    const handleMousedown = (e: MouseEvent) => {\n      if (inputRef.value && e.target !== inputRef.value) {\n        e.preventDefault();\n        inputRef.value.focus();\n      }\n    };\n\n    const emitChange = (value: string, ev: Event) => {\n      if (value !== preValue) {\n        preValue = value;\n        emit('change', value, ev);\n        eventHandlers.value?.onChange?.(ev);\n      }\n    };\n\n    const handleFocus = (ev: FocusEvent) => {\n      focused.value = true;\n      emit('focus', ev);\n      eventHandlers.value?.onFocus?.(ev);\n    };\n\n    const handleBlur = (ev: FocusEvent) => {\n      focused.value = false;\n      emitChange(computedValue.value, ev);\n      emit('blur', ev);\n      eventHandlers.value?.onBlur?.(ev);\n    };\n\n    const handleComposition = (e: CompositionEvent) => {\n      const { value, selectionStart, selectionEnd } =\n        e.target as HTMLInputElement;\n\n      if (e.type === 'compositionend') {\n        isComposition.value = false;\n        compositionValue.value = '';\n\n        if (\n          maxLength.value &&\n          !maxLengthErrorOnly.value &&\n          valueLength.value >= maxLength.value &&\n          getValueLength(value) > maxLength.value &&\n          selectionStart === selectionEnd\n        ) {\n          keepControl();\n          return;\n        }\n\n        updateValue(value);\n        emit('input', value, e);\n        eventHandlers.value?.onInput?.(e);\n\n        keepControl();\n      } else {\n        isComposition.value = true;\n        compositionValue.value = computedValue.value + (e.data ?? '');\n      }\n    };\n\n    const keepControl = () => {\n      recordCursor();\n      nextTick(() => {\n        if (inputRef.value && computedValue.value !== inputRef.value.value) {\n          inputRef.value.value = computedValue.value;\n          setCursor();\n        }\n      });\n    };\n\n    const handleInput = (e: Event) => {\n      const { value } = e.target as HTMLInputElement;\n\n      if (!isComposition.value) {\n        if (\n          maxLength.value &&\n          !maxLengthErrorOnly.value &&\n          valueLength.value >= maxLength.value &&\n          getValueLength(value) > maxLength.value &&\n          (e as InputEvent).inputType === 'insertText'\n        ) {\n          keepControl();\n          return;\n        }\n\n        updateValue(value);\n        emit('input', value, e);\n        eventHandlers.value?.onInput?.(e);\n\n        keepControl();\n      }\n    };\n\n    const handleClear = (ev: MouseEvent) => {\n      updateValue('');\n      emitChange('', ev);\n      emit('clear', ev);\n    };\n\n    const handleKeyDown = (e: KeyboardEvent) => {\n      const keyCode = e.key || e.code;\n      if (!isComposition.value && keyCode === Enter.key) {\n        emitChange(computedValue.value, e);\n        emit('pressEnter', e);\n      }\n    };\n\n    const outerCls = computed(() => [\n      `${prefixCls}-outer`,\n      `${prefixCls}-outer-size-${mergedSize.value}`,\n      {\n        [`${prefixCls}-outer-has-suffix`]: Boolean(slots.suffix),\n        [`${prefixCls}-outer-disabled`]: mergedDisabled.value,\n      },\n    ]);\n\n    const wrapperCls = computed(() => [\n      `${prefixCls}-wrapper`,\n      {\n        [`${prefixCls}-error`]: mergedError.value,\n        [`${prefixCls}-disabled`]: mergedDisabled.value,\n        [`${prefixCls}-focus`]: focused.value,\n      },\n    ]);\n\n    const cls = computed(() => [\n      prefixCls,\n      `${prefixCls}-size-${mergedSize.value}`,\n    ]);\n\n    const wrapperAttrs = computed(() => omit(attrs, INPUT_EVENTS));\n    const inputAttrs = computed(() => pick(attrs, INPUT_EVENTS));\n    const mergeInputAttrs = computed(() => {\n      const attrs = {\n        ...inputAttrs.value,\n        ...props.inputAttrs,\n      };\n      if (mergedError.value) {\n        attrs['aria-invalid'] = true;\n      }\n      return attrs;\n    });\n\n    const renderInput = (hasOuter?: boolean) => (\n      <span\n        class={wrapperCls.value}\n        onMousedown={handleMousedown}\n        {...(!hasOuter ? wrapperAttrs.value : undefined)}\n      >\n        {slots.prefix && (\n          <span class={`${prefixCls}-prefix`}>{slots.prefix()}</span>\n        )}\n        <input\n          ref={inputRef}\n          class={cls.value}\n          value={computedValue.value}\n          type={props.type}\n          placeholder={props.placeholder}\n          readonly={props.readonly}\n          disabled={mergedDisabled.value}\n          onInput={handleInput}\n          onKeydown={handleKeyDown}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          onCompositionstart={handleComposition}\n          onCompositionupdate={handleComposition}\n          onCompositionend={handleComposition}\n          {...mergeInputAttrs.value}\n        />\n        {showClearBtn.value && (\n          <IconHover\n            prefix={prefixCls}\n            class={`${prefixCls}-clear-btn`}\n            // @ts-ignore\n            onClick={handleClear}\n          >\n            <IconClose />\n          </IconHover>\n        )}\n        {(slots.suffix ||\n          (Boolean(props.maxLength) && props.showWordLimit) ||\n          Boolean(feedback.value)) && (\n          <span\n            class={[\n              `${prefixCls}-suffix`,\n              { [`${prefixCls}-suffix-has-feedback`]: feedback.value },\n            ]}\n          >\n            {Boolean(props.maxLength) && props.showWordLimit && (\n              <span class={`${prefixCls}-word-limit`}>\n                {valueLength.value}/{maxLength.value}\n              </span>\n            )}\n            {slots.suffix?.()}\n            {Boolean(feedback.value) && <FeedbackIcon type={feedback.value} />}\n          </span>\n        )}\n      </span>\n    );\n\n    const render = () => {\n      if (slots.prepend || slots.append || props.prepend || props.append) {\n        return (\n          <span class={outerCls.value} {...wrapperAttrs.value}>\n            {(slots.prepend || props.prepend) && (\n              <span class={`${prefixCls}-prepend`}>\n                {slots.prepend ? slots.prepend() : props.prepend}\n              </span>\n            )}\n            {renderInput(true)}\n            {(slots.append || props.append) && (\n              <span class={`${prefixCls}-append`}>\n                {slots.append ? slots.append() : props.append}\n              </span>\n            )}\n          </span>\n        );\n      }\n      return renderInput();\n    };\n\n    return {\n      inputRef,\n      render,\n    };\n  },\n  methods: {\n    /**\n     * @zh 使输入框获取焦点\n     * @en Make the input box focus\n     * @public\n     */\n    focus() {\n      (this.inputRef as HTMLInputElement)?.focus();\n    },\n    /**\n     * @zh 使输入框失去焦点\n     * @en Make the input box lose focus\n     * @public\n     */\n    blur() {\n      (this.inputRef as HTMLInputElement)?.blur();\n    },\n  },\n  render() {\n    return this.render();\n  },\n});\n"
  },
  {
    "path": "packages/web-vue/components/input/style/group.less",
    "content": "@import './token.less';\n\n.@{input-prefix-cls}-group {\n  display: inline-flex;\n  align-items: center;\n\n  > * {\n    border-radius: 0;\n\n    &.@{input-prefix-cls}-outer > :last-child,\n    &.@{input-prefix-cls}-outer > :first-child {\n      border-radius: 0;\n    }\n\n    &:not(:last-child) {\n      position: relative;\n      box-sizing: border-box;\n    }\n\n    &:first-child,\n    &:first-child .@{input-prefix-cls}-group > *:first-child {\n      border-top-left-radius: @input-group-border-radius_compact;\n      border-bottom-left-radius: @input-group-border-radius_compact;\n\n      .@{prefix}-select-view {\n        border-top-left-radius: @input-group-border-radius_compact;\n        border-bottom-left-radius: @input-group-border-radius_compact;\n      }\n    }\n\n    &:last-child,\n    &:last-child .@{input-prefix-cls}-outer > *:last-child {\n      border-top-right-radius: @input-group-border-radius_compact;\n      border-bottom-right-radius: @input-group-border-radius_compact;\n\n      .@{prefix}-select-view {\n        border-top-right-radius: @input-group-border-radius_compact;\n        border-bottom-right-radius: @input-group-border-radius_compact;\n      }\n    }\n  }\n\n  // 针对input边框颜色处理\n  > .@{input-prefix-cls}-wrapper:not(:last-child),\n  > .@{input-prefix-cls}-outer:not(:last-child),\n  > .@{prefix}-input-tag:not(:last-child),\n  > .@{prefix}-select-view:not(:last-child) {\n    margin-right: -@input-group-border-separator-width;\n    border-right: @input-group-border-separator-width solid\n      @input-group-color-separator-border;\n\n    &:focus-within {\n      border-right-color: @input-color-border_focus;\n    }\n  }\n\n  // 针对Error状态的input边框颜色处理\n  > .@{input-prefix-cls}-wrapper.@{input-prefix-cls}-error:not(:last-child) {\n    &:focus-within {\n      border-right-color: @input-color-border_error_focus;\n    }\n  }\n}\n"
  },
  {
    "path": "packages/web-vue/components/input/style/index.less",
    "content": "@import '../../style/mixins/index.less';\n@import './input.less';\n@import './token.less';\n\n@input-prefix-cls: ~'@{prefix}-input';\n\n.get-padding(@input-size-height, @input-font-size) {\n  /* prettier-ignore */\n  padding-top: (round(@input-size-height - @input-border-width * 2 - @line-height-base * @input-font-size) / 2);\n\n  /* prettier-ignore */\n  padding-bottom: (round(@input-size-height - @input-border-width * 2 - @line-height-base * @input-font-size) / 2);\n}\n\n.disabled-style() {\n  color: @input-color-text_disabled;\n  background-color: @input-color-bg_disabled;\n  border-color: @input-color-border_disabled;\n  cursor: not-allowed;\n\n  &:hover {\n    color: @input-color-text_disabled;\n    background-color: @input-color-bg_disabled;\n    border-color: @input-color-border_disabled;\n  }\n\n  &::placeholder {\n    color: @input-color-text_disabled;\n  }\n}\n\n.@{input-prefix-cls}-wrapper {\n  .input-wrapper-style(@input-prefix-cls);\n\n  .@{input-prefix-cls} {\n    .input-style();\n\n    &.@{input-prefix-cls}-size-mini {\n      .input-size(mini);\n    }\n\n    &.@{input-prefix-cls}-size-small {\n      .input-size(small);\n    }\n\n    &.@{input-prefix-cls}-size-medium {\n      .input-size(medium);\n    }\n\n    &.@{input-prefix-cls}-size-large {\n      .input-size(large);\n    }\n  }\n\n  .@{input-prefix-cls}-word-limit {\n    color: @input-color-tip-text;\n    font-size: @input-font-tip-size;\n  }\n}\n\n.@{input-prefix-cls}-outer {\n  display: inline-flex;\n  width: 100%;\n\n  > .@{input-prefix-cls}-wrapper {\n    border-radius: 0;\n  }\n\n  > :first-child {\n    border-top-left-radius: @input-border-radius;\n    border-bottom-left-radius: @input-border-radius;\n  }\n\n  > :last-child {\n    border-top-right-radius: @input-border-radius;\n    border-bottom-right-radius: @input-border-radius;\n  }\n\n  .outer-size();\n\n  &-disabled {\n    cursor: not-allowed;\n  }\n}\n\n.@{input-prefix-cls}-prepend,\n.@{input-prefix-cls}-append {\n  display: inline-flex;\n  flex-shrink: 0;\n  align-items: center;\n  box-sizing: border-box;\n  padding: 0 @input-padding-horizontal;\n  color: @input-color-text;\n  white-space: nowrap;\n  background-color: @input-color-addon-bg;\n  border: 1px solid @input-color-addon-border_default;\n\n  > svg {\n    font-size: @input-size-default-icon-addon-size;\n  }\n}\n\n.@{input-prefix-cls}-prepend {\n  border-right: @input-border-addon-separator-width solid\n    @input-color-addon-border;\n\n  .addon(before, @input-size-default-height, @input-size-default-font-size);\n}\n\n.@{input-prefix-cls}-append {\n  border-left: @input-border-addon-separator-width solid\n    @input-color-addon-border;\n\n  .addon(after, @input-size-default-height, @input-size-default-font-size);\n}\n\n@import './group.less';\n@import './size.less';\n@import './textarea.less';\n@import './search.less';\n@import './password.less';\n"
  },
  {
    "path": "packages/web-vue/components/input/style/index.ts",
    "content": "import '../../style/index.less';\nimport './index.less';\n"
  },
  {
    "path": "packages/web-vue/components/input/style/input.less",
    "content": "@import '../../style/mixins/index.less';\n@import './token.less';\n\n.input-suffix-feedback-icon-color() {\n  .@{prefix}-feedback-icon {\n    display: inline-flex;\n\n    &-status-validating {\n      color: @input-feedback-icon-color_validating;\n    }\n\n    &-status-success {\n      color: @input-feedback-icon-color_success;\n    }\n\n    &-status-warning {\n      color: @input-feedback-icon-color_warning;\n    }\n\n    &-status-error {\n      color: @input-feedback-icon-color_error;\n    }\n  }\n}\n\n.input-wrapper-style(@cls) {\n  display: inline-flex;\n  box-sizing: border-box;\n  width: 100%;\n  padding-right: @input-padding-horizontal;\n  padding-left: @input-padding-horizontal;\n  color: @input-color-text;\n  font-size: @input-size-default-font-size;\n  background-color: @input-color-bg;\n  border: @input-border-width solid @input-color-border;\n  border-radius: @input-border-radius;\n  cursor: text;\n  transition: color @transition-duration-1 @transition-timing-function-linear,\n    border-color @transition-duration-1 @transition-timing-function-linear,\n    background-color @transition-duration-1 @transition-timing-function-linear;\n\n  &:hover {\n    background-color: @input-color-bg_hover;\n    border-color: @input-color-border_hover;\n  }\n\n  &:focus-within,\n  &.@{cls}-focus {\n    z-index: 1;\n    background-color: @input-color-bg_focus;\n    border-color: @input-color-border_focus;\n    box-shadow: 0 0 0 @input-size-shadow_focus @input-color-shadow_focus;\n  }\n\n  // 禁用状态样式\n  &.@{cls}-disabled {\n    color: @input-color-text_disabled;\n    background-color: @input-color-bg_disabled;\n    border-color: @input-color-border_disabled;\n    cursor: not-allowed;\n\n    &:hover {\n      color: @input-color-text_disabled;\n      background-color: @input-color-bg_disabled;\n      border-color: @input-color-border_disabled;\n    }\n\n    .@{cls}-prefix,\n    .@{cls}-suffix {\n      color: inherit;\n    }\n  }\n\n  // 错误状态样式\n  &.@{cls}-error {\n    background-color: @input-color-bg_error;\n    border-color: @input-color-border_error;\n\n    &:hover {\n      background-color: @input-color-bg_error_hover;\n      border-color: @input-color-border_error_hover;\n    }\n  }\n\n  &.@{cls}-error:focus-within,\n  &.@{cls}-error&-focus {\n    z-index: 1;\n    background-color: @input-color-bg_error_focus;\n    border-color: @input-color-border_error_focus;\n    box-shadow: 0 0 0 @input-size-shadow_error_focus\n      @input-color-shadow_error_focus;\n  }\n\n  // 前后缀样式\n  .@{cls}-prefix,\n  .@{cls}-suffix {\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n    white-space: nowrap;\n    user-select: none;\n\n    > svg {\n      font-size: @input-size-default-icon-suffix-size;\n    }\n  }\n\n  .@{cls}-prefix {\n    padding-right: @input-padding-horizontal;\n    color: @input-color-prefix-text;\n  }\n\n  .@{cls}-suffix {\n    padding-left: @input-padding-horizontal;\n    color: @input-color-suffix-text;\n\n    .input-suffix-feedback-icon-color();\n  }\n\n  // 清除按钮样式\n  .@{cls}-clear-btn {\n    align-self: center;\n    color: @input-color-icon-clear;\n    font-size: @input-size-icon-clear;\n    visibility: hidden;\n    cursor: pointer;\n\n    > svg {\n      position: relative;\n      transition: color @transition-duration-1\n        @transition-timing-function-linear;\n    }\n  }\n\n  &:hover .@{cls}-clear-btn {\n    visibility: visible;\n  }\n\n  // 没有选中情况下显示深色\n  &:not(.@{cls}-focus) .@{cls}-icon-hover:hover::before {\n    background-color: @input-color-icon-clear-bg_hover;\n  }\n}\n\n.input-style() {\n  width: 100%;\n  padding-right: 0;\n  padding-left: 0;\n  color: inherit;\n  line-height: @line-height-base;\n  background: none;\n  border: none;\n  border-radius: 0;\n  outline: none;\n  cursor: inherit;\n  -webkit-appearance: none;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n\n  &::placeholder {\n    color: @input-color-placeholder-text;\n  }\n\n  &[disabled]::placeholder {\n    color: @input-color-text_disabled;\n  }\n\n  // fix color error under disabled status in safari\n  &[disabled] {\n    -webkit-text-fill-color: @input-color-text_disabled;\n  }\n}\n\n.input-size(@size) {\n  @height: ~'input-size-@{size}-height';\n  @font-size: ~'input-size-@{size}-font-size';\n  @line-height: ~'input-size-@{size}-line-height';\n\n  /* prettier-ignore */\n  padding-top: (round(@@height - @input-border-width * 2 - $line-height * $font-size) / 2);\n\n  /* prettier-ignore */\n  padding-bottom: (round(@@height - @input-border-width * 2 - $line-height * $font-size) / 2);\n  font-size: @@font-size;\n  line-height: @@line-height;\n}\n"
  },
  {
    "path": "packages/web-vue/components/input/style/password.less",
    "content": "@import './token.less';\n\n.@{input-prefix-cls}-wrapper.@{input-prefix-cls}-password {\n  &:not(.@{input-prefix-cls}-disabled) {\n    .@{input-prefix-cls}-suffix {\n      color: @password-color-eye-icon;\n      font-size: @password-size-eye-icon;\n      cursor: pointer;\n    }\n  }\n}\n"
  },
  {
    "path": "packages/web-vue/components/input/style/search.less",
    "content": "@import './token.less';\n\n.@{input-prefix-cls}-search {\n  .@{input-prefix-cls}-append {\n    padding: 0;\n    border: none;\n  }\n\n  .@{input-prefix-cls}-suffix {\n    color: @search-color-icon;\n    font-size: @search-size-icon;\n  }\n\n  .@{input-prefix-cls}-search-btn {\n    border-top-left-radius: 0;\n    border-bottom-left-radius: 0;\n  }\n}\n"
  },
  {
    "path": "packages/web-vue/components/input/style/size.less",
    "content": "@import './token.less';\n\n// 前置后置标签\n.addon(@position, @size-height, @size-font-size) {\n  .item-style() {\n    width: auto;\n    height: 100%;\n    margin-top: -1px;\n    margin-bottom: -1px;\n\n    & when (@position = before) {\n      margin-right: -@input-padding-horizontal;\n      margin-left: -@input-padding-horizontal - 1px;\n    }\n\n    & when (@position = after) {\n      margin-right: -@input-padding-horizontal - 1px;\n      margin-left: -@input-padding-horizontal;\n    }\n  }\n\n  // select,input 的边角和边框\n  .border-radius() {\n    & when (@position = before) {\n      border-color: transparent;\n      border-top-right-radius: 0;\n      border-bottom-right-radius: 0;\n    }\n\n    & when (@position = after) {\n      border-color: transparent;\n      border-top-left-radius: 0;\n      border-bottom-left-radius: 0;\n    }\n  }\n\n  .@{prefix}-input {\n    .item-style();\n    .border-radius();\n  }\n\n  // 作为前置/后置标签时，重写一些select的样式\n  .@{prefix}-select {\n    .item-style();\n\n    .@{prefix}-select-view {\n      background-color: inherit;\n      border-color: transparent;\n      border-radius: 0;\n    }\n\n    &.@{prefix}-select-single {\n      .@{prefix}-select-view {\n        height: 100%;\n      }\n    }\n  }\n}\n\n// 不同尺寸的高度\n.size-height {\n  .height (@size-height, @size-font-size) {\n    .get-padding(@size-height, @size-font-size);\n\n    font-size: @size-font-size;\n  }\n\n  &-size-mini {\n    /* prettier-ignore */\n    padding-top: (round(@input-size-mini-height - @input-border-width * 2 - $line-height * $font-size) / 2);\n\n    /* prettier-ignore */\n    padding-bottom: (round(@input-size-mini-height - @input-border-width * 2 - $line-height * $font-size) / 2);\n    font-size: @input-size-mini-font-size;\n    line-height: 1.667;\n  }\n\n  &-size-small {\n    .height(@input-size-small-height, @input-size-small-font-size);\n  }\n\n  &-size-large {\n    .height(@input-size-large-height, @input-size-large-font-size);\n  }\n}\n\n// 不同尺寸的带有前置后置标签的高度\n.outer-size() {\n  .size-font-size(@size-input-height, @size-font-size, @suffix-icon-size, @addon-icon-size) {\n    .@{input-prefix-cls}-outer {\n      font-size: @size-font-size;\n    }\n\n    .@{input-prefix-cls}-wrapper {\n      .@{input-prefix-cls}-prefix,\n      .@{input-prefix-cls}-suffix {\n        font-size: @size-font-size;\n\n        > svg {\n          font-size: @suffix-icon-size;\n        }\n      }\n    }\n\n    .@{input-prefix-cls}-prepend,\n    .@{input-prefix-cls}-append {\n      font-size: @size-font-size;\n\n      > svg {\n        font-size: @addon-icon-size;\n      }\n    }\n\n    .@{input-prefix-cls}-prepend {\n      .addon(after, @size-input-height, @size-font-size);\n    }\n\n    .@{input-prefix-cls}-append {\n      .addon(before, @size-input-height, @size-font-size);\n    }\n  }\n\n  &&-size-mini {\n    .size-font-size(\n      @input-size-mini-height,\n      @input-size-mini-font-size,\n      @input-size-mini-icon-suffix-size,\n      @input-size-mini-icon-addon-size\n    );\n  }\n\n  &&-size-small {\n    .size-font-size(\n      @input-size-small-height,\n      @input-size-small-font-size,\n      @input-size-small-icon-suffix-size,\n      @input-size-small-icon-addon-size\n    );\n  }\n\n  &&-size-large {\n    .size-font-size(\n      @input-size-large-height,\n      @input-size-large-font-size,\n      @input-size-large-icon-suffix-size,\n      @input-size-large-icon-addon-size\n    );\n  }\n}\n"
  },
  {
    "path": "packages/web-vue/components/input/style/textarea.less",
    "content": "@textarea-prefix-cls: ~'@{prefix}-textarea';\n\n.@{textarea-prefix-cls}-wrapper {\n  position: relative;\n  display: inline-block;\n  width: 100%;\n}\n\n.@{textarea-prefix-cls}-clear-wrapper {\n  &:hover {\n    .@{textarea-prefix-cls}-clear-icon {\n      display: inline-block;\n    }\n  }\n  .@{textarea-prefix-cls} {\n    padding-right: @icon-hover-size-default-height;\n  }\n}\n\n.@{textarea-prefix-cls} {\n  &-word-limit {\n    position: absolute;\n    right: @textarea-layout-tip-right;\n    bottom: @textarea-layout-tip-bottom;\n    color: @textarea-color-tip-text;\n    font-size: @textarea-font-tip-size;\n    user-select: none;\n  }\n\n  &-clear-icon {\n    position: absolute;\n    top: @textarea-layout-top-icon-clear;\n    right: @textarea-layout-tip-right;\n    display: none;\n    font-size: @textarea-size-icon-clear;\n  }\n}\n"
  },
  {
    "path": "packages/web-vue/components/input/style/token.less",
    "content": "@import '../../style/theme/index.less';\n\n/******** 基础配置项 end *******/\n\n// 背景色\n@input-color-bg: var(~'@{arco-cssvars-prefix}-color-fill-2');\n@input-color-bg_hover: var(~'@{arco-cssvars-prefix}-color-fill-3');\n@input-color-bg_focus: var(~'@{arco-cssvars-prefix}-color-bg-2');\n@input-color-bg_disabled: var(~'@{arco-cssvars-prefix}-color-fill-2');\n@input-color-addon-bg: @input-color-bg;\n\n// 边框色\n@input-color-addon-border: var(~'@{arco-cssvars-prefix}-color-neutral-3');\n@input-border-addon-separator-width: @border-1;\n@input-color-border_focus: @color-primary-6;\n@input-color-shadow_focus: var(~'@{arco-cssvars-prefix}-color-primary-light-2');\n@input-size-shadow_focus: @shadow-distance-none;\n@input-color-addon-border_default: @color-transparent;\n\n// 文本色\n@input-color-text: var(~'@{arco-cssvars-prefix}-color-text-1');\n@input-color-placeholder-text: var(~'@{arco-cssvars-prefix}-color-text-3');\n@input-color-text_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');\n\n// textarea  color\n@textarea-color-tip-text: var(~'@{arco-cssvars-prefix}-color-text-3');\n\n/******** 基础配置项 end *******/\n\n/******** 高级配置项 *******/\n\n// 错误状态\n@input-color-bg_error: var(~'@{arco-cssvars-prefix}-color-danger-light-1');\n@input-color-bg_error_hover: var(\n  ~'@{arco-cssvars-prefix}-color-danger-light-2'\n);\n@input-color-bg_error_focus: @input-color-bg_focus;\n@input-color-border_error_focus: @color-danger-6;\n@input-color-shadow_error_focus: var(\n  ~'@{arco-cssvars-prefix}-color-danger-light-2'\n);\n@input-size-shadow_error_focus: @shadow-distance-none;\n\n// 圆角\n@input-border-radius: @radius-small;\n\n// 不同尺寸\n@input-size-default-height: @size-default;\n@input-size-mini-height: @size-mini;\n@input-size-small-height: @size-small;\n@input-size-large-height: @size-large;\n\n// 边框尺寸以及边框色\n@input-border-width: @border-1;\n@input-color-border: @color-transparent;\n@input-color-border_disabled: @color-transparent;\n@input-color-border_hover: @color-transparent;\n@input-color-border_error: @color-transparent;\n@input-color-border_error_hover: @color-transparent;\n\n// 不同尺寸文字大小\n@input-size-default-font-size: @font-size-body-3;\n@input-size-small-font-size: @font-size-body-3;\n@input-size-large-font-size: @font-size-body-3;\n@input-size-mini-font-size: @font-size-body-1;\n@input-font-tip-size: @font-size-body-1; // show limit word 文字色\n\n// 不同尺寸的 suffix，addon 尺寸。\n@input-size-mini-icon-suffix-size: @size-3;\n@input-size-small-icon-suffix-size: 14px;\n@input-size-default-icon-suffix-size: 14px;\n@input-size-large-icon-suffix-size: 14px;\n\n@input-size-mini-icon-addon-size: @size-3;\n@input-size-small-icon-addon-size: 14px;\n@input-size-default-icon-addon-size: 14px;\n@input-size-large-icon-addon-size: 14px;\n\n@input-size-icon-clear: @size-3;\n@input-color-prefix-text: var(~'@{arco-cssvars-prefix}-color-text-2');\n@input-color-suffix-text: var(~'@{arco-cssvars-prefix}-color-text-2');\n@input-color-tip-text: var(~'@{arco-cssvars-prefix}-color-text-3');\n@input-color-icon-clear: var(~'@{arco-cssvars-prefix}-color-text-2');\n@input-color-icon-clear-bg_hover: var(~'@{arco-cssvars-prefix}-color-fill-4');\n\n// input search\n@search-color-icon: var(~'@{arco-cssvars-prefix}-color-text-2');\n@search-size-icon: 14px;\n\n// 布局\n@input-padding-horizontal: @spacing-6;\n@input-margin-left-clear-btn: @spacing-6;\n@input-spacing-clear-icon-right: @spacing-4;\n@input-padding-word-limit-left: @spacing-4;\n\n// textarea\n@textarea-padding-horizontal: @spacing-6;\n@textarea-padding-vertical: @spacing-2;\n@textarea-font-size: @font-size-body-3;\n@textarea-font-tip-size: @font-size-body-1;\n@textarea-layout-tip-right: @spacing-5;\n@textarea-layout-tip-bottom: @spacing-3;\n@textarea-size-min-height: @size-default;\n@textarea-size-icon-clear: @font-size-body-1;\n@textarea-layout-top-icon-clear: @spacing-5;\n\n// password\n@password-color-eye-icon: var(~'@{arco-cssvars-prefix}-color-text-2');\n@password-size-eye-icon: @size-3;\n\n// input.group\n@input-group-border-radius_compact: @radius-small;\n@input-group-border-separator-width: @border-1;\n@input-group-color-separator-border: var(\n  ~'@{arco-cssvars-prefix}-color-neutral-3'\n);\n\n/******** 高级配置项 end *******/\n\n// vue覆盖变量\n@input-size-medium-height: @input-size-default-height;\n@input-size-medium-font-size: @input-size-default-font-size;\n@input-size-mini-line-height: 1.667;\n@input-size-small-line-height: @line-height-base;\n@input-size-medium-line-height: @line-height-base;\n@input-size-large-line-height: @line-height-base;\n\n@input-feedback-icon-color_success: @color-success-6;\n@input-feedback-icon-color_error: @color-danger-6;\n@input-feedback-icon-color_warning: @color-warning-6;\n@input-feedback-icon-color_validating: @color-primary-6;\n"
  },
  {
    "path": "packages/web-vue/components/input-number/CHANGELOG.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.56.3\n\n`2024-10-25`\n\n### 🐛 BugFix\n\n- fix readonly not working in button mode ([#3314](https://github.com/arco-design/arco-design-vue/pull/3314))\n\n\n## 2.56.0\n\n`2024-07-26`\n\n### 🆕 Feature\n\n- Added 'keydown' event to disable default behavior ([#3248](https://github.com/arco-design/arco-design-vue/pull/3248))\n\n\n## 2.54.6\n\n`2024-03-01`\n\n### 🐛 BugFix\n\n- fix overlap between step button and suffix/append ([#3005](https://github.com/arco-design/arco-design-vue/pull/3005))\n\n\n## 2.54.5\n\n`2024-02-21`\n\n### 🐛 BugFix\n\n- fix v-model not working ([#2961](https://github.com/arco-design/arco-design-vue/pull/2961))\n\n\n## 2.54.4\n\n`2024-02-02`\n\n### 🐛 BugFix\n\n- Fix change event triggering mechanism ([#2915](https://github.com/arco-design/arco-design-vue/pull/2915))\n\n\n## 2.52.0\n\n`2023-09-22`\n\n### 🆕 Feature\n\n- Add `input-attrs` attribute ([#2716](https://github.com/arco-design/arco-design-vue/pull/2716))\n\n\n## 2.50.2\n\n`2023-08-25`\n\n### 💎 Enhancement\n\n- Optimize the long-press effect of the step button ([#2668](https://github.com/arco-design/arco-design-vue/pull/2668))\n\n\n## 2.49.0\n\n`2023-07-21`\n\n### 🆕 Feature\n\n- add slots for input-number box value manipulation icons ([#2560](https://github.com/arco-design/arco-design-vue/pull/2560))\n\n\n## 2.47.0\n\n`2023-06-02`\n\n### ⚠️ Important Attention\n\n- `hide-button` also takes effect when `mode=\"button\"` ([#2461](https://github.com/arco-design/arco-design-vue/pull/2461))\n\n\n## 2.43.2\n\n`2023-02-24`\n\n### 🐛 BugFix\n\n- fix display step button in disabled state ([#2169](https://github.com/arco-design/arco-design-vue/pull/2169))\n\n## 2.42.1\n\n`2023-02-03`\n\n### 🐛 BugFix\n\n- fix step-button is not properly disabled or enabled when min or max is changed ([#1777](https://github.com/arco-design/arco-design-vue/pull/1777))\n\n\n## 2.34.0\n\n`2022-07-29`\n\n### 💎 Enhancement\n\n- Support `read-only` prop ([#1408](https://github.com/arco-design/arco-design-vue/pull/1408))\n\n\n## 2.32.1\n\n`2022-07-01`\n\n### 🐛 BugFix\n\n- Fix the problem that '0' will be omitted after setting precision ([#1368](https://github.com/arco-design/arco-design-vue/pull/1368))\n\n\n## 2.32.0\n\n`2022-06-24`\n\n### 🐛 BugFix\n\n- fix clear error outside of form ([#1329](https://github.com/arco-design/arco-design-vue/pull/1329))\n\n\n## 2.29.1\n\n`2022-06-02`\n\n### 💎 Enhancement\n\n- Add keyboard event, show step button when focused ([#1224](https://github.com/arco-design/arco-design-vue/pull/1224))\n\n\n## 2.29.0\n\n`2022-05-27`\n\n### 🐛 BugFix\n\n- Fixed the issue that clear did not trigger form validation ([#1204](https://github.com/arco-design/arco-design-vue/pull/1204))\n\n\n## 2.27.0\n\n`2022-05-13`\n\n### 🆕 Feature\n\n- Added modelEvent property and input event ([#1115](https://github.com/arco-design/arco-design-vue/pull/1115))\n\n\n## 2.25.1\n\n`2022-04-27`\n\n### 💅 Style\n\n- Fix the display position of the clear button ([#1048](https://github.com/arco-design/arco-design-vue/pull/1048))\n\n\n## 2.25.0\n\n`2022-04-22`\n\n### 🐛 BugFix\n\n- Fix the problem that the error attribute is invalid ([#1026](https://github.com/arco-design/arco-design-vue/pull/1026))\n\n\n## 2.22.0\n\n`2022-04-01`\n\n### 🐛 BugFix\n\n- Fixed display error when switching `mode` ([#909](https://github.com/arco-design/arco-design-vue/pull/909))\n\n\n## 2.14.3\n\n`2022-01-12`\n\n### 🐛 BugFix\n\n- Fix the problem that the cursor position changes when inputting ([#552](https://github.com/arco-design/arco-design-vue/pull/552))\n\n\n## 2.12.0\n\n`2021-12-24`\n\n### ⚠️ Important Attention\n\n- Modify the change event to be triggered only when out of focus and press Enter to solve the problem that the control cannot be input ([#452](https://github.com/arco-design/arco-design-vue/pull/452))\n\n### 🆕 Feature\n\n- Add support for input slot ([#451](https://github.com/arco-design/arco-design-vue/pull/451))\n\n\n## 2.11.0\n\n`2021-12-17`\n\n### 🐛 BugFix\n\n- Fix the problem of displaying errors when `model-value` is 0 ([#407](https://github.com/arco-design/arco-design-vue/pull/407))\n\n\n## 2.10.0\n\n`2021-12-10`\n\n### 🐛 BugFix\n\n- Fix the problem of repeatable input of `-` and `.` ([#359](https://github.com/arco-design/arco-design-vue/pull/359))\n\n\n## 2.8.0\n\n`2021-12-01`\n\n### 🐛 BugFix\n\n- Fix the problem that the button does not add size in button mode ([#293](https://github.com/arco-design/arco-design-vue/pull/293))\n\n\n## 2.1.1\n\n`2021-11-08`\n\n### 🐛 BugFix\n\n- Fix the problem of inputting the negative sign error ([#114](https://github.com/arco-design/arco-design-vue/pull/114))\n\n\n## 2.1.0\n\n`2021-11-05`\n\n### 🐛 BugFix\n\n- Fix the problem of invalid accuracy ([#93](https://github.com/arco-design/arco-design-vue/pull/93))\n\n"
  },
  {
    "path": "packages/web-vue/components/input-number/CHANGELOG.zh-CN.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.56.3\n\n`2024-10-25`\n\n### 🐛 问题修复\n\n- 修复左右按钮模式下只读属性不生效问题 ([#3314](https://github.com/arco-design/arco-design-vue/pull/3314))\n\n\n## 2.56.0\n\n`2024-07-26`\n\n### 🆕 新增功能\n\n- 增加 'keydown' 事件，可以禁止默认行为 ([#3248](https://github.com/arco-design/arco-design-vue/pull/3248))\n\n\n## 2.54.6\n\n`2024-03-01`\n\n### 🐛 问题修复\n\n- 修复步进按钮与 suffix/append 的样式重叠 ([#3005](https://github.com/arco-design/arco-design-vue/pull/3005))\n\n\n## 2.54.5\n\n`2024-02-21`\n\n### 🐛 问题修复\n\n- 修复双向绑定失效 ([#2961](https://github.com/arco-design/arco-design-vue/pull/2961))\n\n\n## 2.54.4\n\n`2024-02-02`\n\n### 🐛 问题修复\n\n- 修复 change 事件触发逻辑 ([#2915](https://github.com/arco-design/arco-design-vue/pull/2915))\n\n\n## 2.52.0\n\n`2023-09-22`\n\n### 🆕 新增功能\n\n- 增加 `input-attrs` 属性 ([#2716](https://github.com/arco-design/arco-design-vue/pull/2716))\n\n\n## 2.50.2\n\n`2023-08-25`\n\n### 💎 功能优化\n\n- 优化步长按钮的长按效果 ([#2668](https://github.com/arco-design/arco-design-vue/pull/2668))\n\n\n## 2.49.0\n\n`2023-07-21`\n\n### 🆕 新增功能\n\n- 增加数值操作自定义图标插槽 ([#2560](https://github.com/arco-design/arco-design-vue/pull/2560))\n\n\n## 2.47.0\n\n`2023-06-02`\n\n### ⚠️ 重点注意\n\n- `hide-button` 在 `mode=\"button\"` 时也会生效 ([#2461](https://github.com/arco-design/arco-design-vue/pull/2461))\n\n\n## 2.43.2\n\n`2023-02-24`\n\n### 🐛 问题修复\n\n- 修复禁用状态下显示步长按钮 ([#2169](https://github.com/arco-design/arco-design-vue/pull/2169))\n\n## 2.42.1\n\n`2023-02-03`\n\n### 🐛 问题修复\n\n- 修复当最小/最大值改变时进步按钮不能正确禁用或启用的问题 ([#1777](https://github.com/arco-design/arco-design-vue/pull/1777))\n\n\n## 2.34.0\n\n`2022-07-29`\n\n### 💎 功能优化\n\n- 支持`read-only`属性 ([#1408](https://github.com/arco-design/arco-design-vue/pull/1408))\n\n\n## 2.32.1\n\n`2022-07-01`\n\n### 🐛 问题修复\n\n- 修复设定精度后会省略 '0' 的问题 ([#1368](https://github.com/arco-design/arco-design-vue/pull/1368))\n\n\n## 2.32.0\n\n`2022-06-24`\n\n### 🐛 问题修复\n\n- 修复在表单以外清除时的错误 ([#1329](https://github.com/arco-design/arco-design-vue/pull/1329))\n\n\n## 2.29.1\n\n`2022-06-02`\n\n### 💎 功能优化\n\n- 增加键盘事件，聚焦时显示步进按钮 ([#1224](https://github.com/arco-design/arco-design-vue/pull/1224))\n\n\n## 2.29.0\n\n`2022-05-27`\n\n### 🐛 问题修复\n\n- 修复 clear 没有触发 form 校验的问题 ([#1204](https://github.com/arco-design/arco-design-vue/pull/1204))\n\n\n## 2.27.0\n\n`2022-05-13`\n\n### 🆕 新增功能\n\n- 增加 modelEvent 属性和 input 事件 ([#1115](https://github.com/arco-design/arco-design-vue/pull/1115))\n\n\n## 2.25.1\n\n`2022-04-27`\n\n### 💅 样式更新\n\n- 修复清除按钮显示位置问题 ([#1048](https://github.com/arco-design/arco-design-vue/pull/1048))\n\n\n## 2.25.0\n\n`2022-04-22`\n\n### 🐛 问题修复\n\n- 修复 error 属性失效的问题 ([#1026](https://github.com/arco-design/arco-design-vue/pull/1026))\n\n\n## 2.22.0\n\n`2022-04-01`\n\n### 🐛 问题修复\n\n- 修复切换 `mode` 时展示错误的问题 ([#909](https://github.com/arco-design/arco-design-vue/pull/909))\n\n\n## 2.14.3\n\n`2022-01-12`\n\n### 🐛 问题修复\n\n- 修复输入时光标位置改变的问题 ([#552](https://github.com/arco-design/arco-design-vue/pull/552))\n\n\n## 2.12.0\n\n`2021-12-24`\n\n### ⚠️ 重点注意\n\n- 修改 change 事件仅在失焦和按下回车时触发，解决受控不能输入的问题 ([#452](https://github.com/arco-design/arco-design-vue/pull/452))\n\n### 🆕 新增功能\n\n- 增加对 input 插槽的支持 ([#451](https://github.com/arco-design/arco-design-vue/pull/451))\n\n\n## 2.11.0\n\n`2021-12-17`\n\n### 🐛 问题修复\n\n- 修复 `model-value` 为 0 时展示错误的问题 ([#407](https://github.com/arco-design/arco-design-vue/pull/407))\n\n\n## 2.10.0\n\n`2021-12-10`\n\n### 🐛 问题修复\n\n- 修复可重复输入 `-` 和 `.` 的问题 ([#359](https://github.com/arco-design/arco-design-vue/pull/359))\n\n\n## 2.8.0\n\n`2021-12-01`\n\n### 🐛 问题修复\n\n- 修复 button 模式下按钮没有添加 size 的问题 ([#293](https://github.com/arco-design/arco-design-vue/pull/293))\n\n\n## 2.1.1\n\n`2021-11-08`\n\n### 🐛 问题修复\n\n- 修复输入负号出错的问题 ([#114](https://github.com/arco-design/arco-design-vue/pull/114))\n\n\n## 2.1.0\n\n`2021-11-05`\n\n### 🐛 问题修复\n\n- 修复精度失效的问题 ([#93](https://github.com/arco-design/arco-design-vue/pull/93))\n\n"
  },
  {
    "path": "packages/web-vue/components/input-number/README.en-US.md",
    "content": "```yaml\nmeta:\n  type: Component\n  category: Data Entry\ntitle: InputNumber\ndescription: Only input boxes in numeric format are allowed.\n```\n\n*Auto translate by google.*\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/mode.md\n\n@import ./__demo__/size.md\n\n@import ./__demo__/precision.md\n\n@import ./__demo__/prefix.md\n\n@import ./__demo__/step-icon.md\n\n@import ./__demo__/format.md\n\n@import ./__demo__/model.md\n\n## API\n\n\n### `<input-number>` Props\n\n|Attribute|Description|Type|Default|version|\n|---|---|---|:---:|:---|\n|model-value **(v-model)**|Value|`number`|`-`||\n|default-value|Default value (uncontrolled mode)|`number`|`-`||\n|mode|Mode (`embed`: button embedded mode, `button`: left and right button mode)|`'embed' \\| 'button'`|`'embed'`||\n|precision|Precision|`number`|`-`||\n|step|Number change step|`number`|`1`||\n|disabled|Whether to disable|`boolean`|`false`||\n|error|Whether it is an error state|`boolean`|`false`||\n|max|Max|`number`|`Infinity`||\n|min|Min|`number`|`-Infinity`||\n|formatter|Define the display value of the input|`func`|`-`||\n|parser|Convert from `formatter` to number, and use with `formatter`|`func`|`-`||\n|placeholder|Input prompt text|`string`|`-`||\n|hide-button|Whether to hide the button|`boolean`|`false`||\n|size|Input size|`'mini' \\| 'small' \\| 'medium' \\| 'large'`|`'medium'`||\n|allow-clear|Whether to allow the input to be cleared|`boolean`|`false`||\n|model-event|Trigger event for `v-model`|`'change' \\| 'input'`|`'change'`||\n|read-only|Readonly|`boolean`|`false`|2.33.1|\n|input-attrs|Attributes of inner input elements|`object`|`-`|2.52.0|\n### `<input-number>` Events\n\n|Event Name|Description|Parameters|version|\n|---|---|---|:---|\n|change|Triggered when the value changes|value: ` number \\| undefined `<br>ev: `Event`||\n|focus|Triggered when the input gets focus|ev: `FocusEvent`||\n|blur|Triggered when the input box loses focus|ev: `FocusEvent`||\n|clear|Triggered when the user clicks the clear button|ev: `Event`|2.23.0|\n|input|Triggered on input|value: ` number \\| undefined `<br>inputValue: `string`<br>ev: `Event`|2.27.0|\n|keydown|Triggered on keydown|ev: `MouseEvent`|2.56.0|\n### `<input-number>` Methods\n\n|Method|Description|Parameters|Return|\n|---|---|---|:---:|\n|focus|Make the input box focus|-|-|\n|blur|Make the input box lose focus|-|-|\n### `<input-number>` Slots\n\n|Slot Name|Description|Parameters|\n|---|---|---|\n|minus|Minus|-|\n|plus|Plus|-|\n|append|Append|-|\n|prepend|Prepend|-|\n|suffix|Suffix|-|\n|prefix|Prefix|-|\n\n\n"
  },
  {
    "path": "packages/web-vue/components/input-number/README.zh-CN.md",
    "content": "```yaml\nmeta:\n  type: 组件\n  category: 数据输入\ntitle: 数字输入框 InputNumber\ndescription: 仅允许输入数字格式的输入框。\n```\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/mode.md\n\n@import ./__demo__/size.md\n\n@import ./__demo__/precision.md\n\n@import ./__demo__/prefix.md\n\n@import ./__demo__/step-icon.md\n\n@import ./__demo__/format.md\n\n@import ./__demo__/model.md\n\n## API\n\n\n### `<input-number>` Props\n\n|参数名|描述|类型|默认值|版本|\n|---|---|---|:---:|:---|\n|model-value **(v-model)**|绑定值|`number`|`-`||\n|default-value|默认值（非受控模式）|`number`|`-`||\n|mode|模式（`embed`：按钮内嵌模式，`button`：左右按钮模式）|`'embed' \\| 'button'`|`'embed'`||\n|precision|数字精度|`number`|`-`||\n|step|数字变化步长|`number`|`1`||\n|disabled|是否禁用|`boolean`|`false`||\n|error|是否为错误状态|`boolean`|`false`||\n|max|最大值|`number`|`Infinity`||\n|min|最小值|`number`|`-Infinity`||\n|formatter|定义输入框展示值|`func`|`-`||\n|parser|从 `formatter` 转换为数字，和 `formatter` 搭配使用|`func`|`-`||\n|placeholder|输入框提示文字|`string`|`-`||\n|hide-button|是否隐藏按钮|`boolean`|`false`||\n|size|输入框大小|`'mini' \\| 'small' \\| 'medium' \\| 'large'`|`'medium'`||\n|allow-clear|是否允许清空输入框|`boolean`|`false`||\n|model-event|触发 `v-model` 的事件|`'change' \\| 'input'`|`'change'`||\n|read-only|只读|`boolean`|`false`|2.33.1|\n|input-attrs|内部 input 元素的属性|`object`|`-`|2.52.0|\n### `<input-number>` Events\n\n|事件名|描述|参数|版本|\n|---|---|---|:---|\n|change|值发生改变时触发|value: ` number \\| undefined `<br>ev: `Event`||\n|focus|输入框获取焦点时触发|ev: `FocusEvent`||\n|blur|输入框失去焦点时触发|ev: `FocusEvent`||\n|clear|用户点击清除按钮时触发|ev: `Event`|2.23.0|\n|input|输入时触发|value: ` number \\| undefined `<br>inputValue: `string`<br>ev: `Event`|2.27.0|\n|keydown|按下键盘时触发|ev: `MouseEvent`|2.56.0|\n### `<input-number>` Methods\n\n|方法名|描述|参数|返回值|\n|---|---|---|---|\n|focus|使输入框获取焦点|-|-|\n|blur|使输入框失去焦点|-|-|\n### `<input-number>` Slots\n\n|插槽名|描述|参数|\n|---|:---:|---|\n|minus|数值减少图标|-|\n|plus|数值增加图标|-|\n|append|后置标签|-|\n|prepend|前置标签|-|\n|suffix|后缀|-|\n|prefix|前缀|-|\n\n\n"
  },
  {
    "path": "packages/web-vue/components/input-number/TEMPLATE.md",
    "content": "## zh-CN\n```yaml\nmeta:\n  type: 组件\n  category: 数据输入\ntitle: 数字输入框 InputNumber\ndescription: 仅允许输入数字格式的输入框。\n```\n---\n## en-US\n```yaml\nmeta:\n  type: Component\n  category: Data Entry\ntitle: InputNumber\ndescription: Only input boxes in numeric format are allowed.\n```\n---\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/mode.md\n\n@import ./__demo__/size.md\n\n@import ./__demo__/precision.md\n\n@import ./__demo__/prefix.md\n\n@import ./__demo__/step-icon.md\n\n@import ./__demo__/format.md\n\n@import ./__demo__/model.md\n\n## API\n\n%%API(input-number.tsx)%%\n"
  },
  {
    "path": "packages/web-vue/components/input-number/__demo__/basic.md",
    "content": "```yaml\ntitle:\n  zh-CN: 基本用法\n  en-US: Basic Usage\n```\n\n## zh-CN\n\n通过鼠标或者键盘输入范围内的标准数值。\n\n---\n\n## en-US\n\nUse the mouse or keyboard to enter the standard value within the range.\n\n---\n\n```vue\n<template>\n  <a-space direction=\"vertical\" size=\"large\">\n    <a-input-number v-model=\"value\" :style=\"{width:'320px'}\" placeholder=\"Please Enter\" class=\"input-demo\" :min=\"10\" :max=\"100\"/>\n    <a-input-number :style=\"{width:'320px'}\" placeholder=\"Please Enter\" class=\"input-demo\" :min=\"10\" :max=\"100\"/>\n    <a-input-number :style=\"{width:'320px'}\" placeholder=\"Please Enter\" :default-value=\"500\" class=\"input-demo\" disabled/>\n  </a-space>\n</template>\n\n<script>\nexport default {\n  data(){\n    return {\n      value:15\n    }\n\n  }\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/input-number/__demo__/format.md",
    "content": "```yaml\ntitle:\n  zh-CN: 格式化展示值\n  en-US: Format\n```\n\n## zh-CN\n\n通过 `formatter` 和 `parser` 配合使用可以定义输入框展示值。\n\n---\n\n## en-US\n\nUse `formatter` and `parser` together to define the display value of the input box.\n\n---\n\n```vue\n<template>\n  <a-input-number :style=\"{width:'320px'}\" placeholder=\"Please Enter\" class=\"input-demo\" :default-value=\"12000\" :min=\"0\" :formatter=\"formatter\" :parser=\"parser\"/>\n</template>\n\n<script>\nexport default {\n  setup(){\n    const formatter = (value) => {\n      const values = value.split('.');\n      values[0]=values[0].replace(/\\B(?=(\\d{3})+(?!\\d))/g, ',');\n\n      return values.join('.')\n    };\n\n    const parser = (value) => {\n      return value.replace(/,/g, '')\n    };\n\n    return {\n      formatter,\n      parser\n    }\n  },\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/input-number/__demo__/mode.md",
    "content": "```yaml\ntitle:\n  zh-CN: 按钮模式\n  en-US: Button Mode\n```\n\n## zh-CN\n\n指定 `mode` 为 `button` 来使用带按钮的数字输入框。\n\n---\n\n## en-US\n\nSpecify `mode` as `button` to use a numeric input box with buttons.\n\n---\n\n```vue\n<template>\n  <a-input-number :style=\"{width:'320px'}\" placeholder=\"Please Enter\" :default-value=\"500\" mode=\"button\" class=\"input-demo\" />\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/input-number/__demo__/model.md",
    "content": "```yaml\ntitle:\n  zh-CN: v-model 的触发事件\n  en-US: Trigger event of v-model\n```\n\n## zh-CN\n\n数字输入框默认在 blur 或者按下 Enter 时会修改绑定的值，通过设置属性 model-event=\"input\" 让组件在输入时修改绑定的值。\n注意：在此模式下，输入时的值会超出设置的 min/max，组件会在失焦时修正值的大小。\n\n---\n\n## en-US\n\nBy default, the number input box will modify the bound value when blur or press Enter. By setting the attribute model-event=\"input\", the component can modify the bound value during input.\nNote: In this mode, the input value will exceed the set min/max, and the component will correct the value when it is out of focus.\n\n---\n\n```vue\n<template>\n  <a-input-number v-model=\"value\" :style=\"{width:'320px'}\" placeholder=\"Please Enter\" class=\"input-demo\" :min=\"10\" :max=\"100\" model-event=\"input\"/>\n  <div>value: {{value}}</div>\n</template>\n\n<script>\nexport default {\n  data(){\n    return {\n      value:15\n    }\n\n  }\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/input-number/__demo__/precision.md",
    "content": "```yaml\ntitle:\n  zh-CN: 精度和步长\n  en-US: Precision & Step\n```\n\n## zh-CN\n\n通过 `precision` 来设置数字精度。当 `precision` 小于 `step` 的小数位时，精度取 `step` 的小数个数。\n\n---\n\n## en-US\n\nUse `precision` to set the number precision. When `precision` is less than the decimal place of `step`, the precision is taken as the number of decimal places of `step`.\n\n---\n\n```vue\n<template>\n  <a-space direction=\"vertical\" size=\"large\">\n    <a-input-number :style=\"{width:'320px'}\" placeholder=\"Please Enter\" :default-value=\"3.6\" :step=\"1.2\" :precision=\"2\" class=\"input-demo\" />\n    <a-input-number :style=\"{width:'320px'}\" placeholder=\"Please Enter\" :default-value=\"1.22\" :step=\"1.22\" :precision=\"1\" class=\"input-demo\" />\n  </a-space>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/input-number/__demo__/prefix.md",
    "content": "```yaml\ntitle:\n  zh-CN: 前缀与后缀\n  en-US: Prefix & Suffix\n```\n\n## zh-CN\n\n通过指定 `prefix` 和 `suffix` 插槽来在输入框内添加前缀和后缀。\n\n---\n\n## en-US\n\nAdd prefix and suffix in the input box by specifying the `prefix` and `suffix` slots.\n\n---\n\n```vue\n<template>\n  <a-space direction=\"vertical\" size=\"large\">\n    <a-input-number :style=\"{width:'320px'}\" placeholder=\"Please enter something\" allow-clear>\n      <template #prefix>\n        <icon-user />\n      </template>\n    </a-input-number>\n    <a-input-number :style=\"{width:'320px'}\" placeholder=\"Please enter something\" allow-clear hide-button>\n      <template #suffix>\n        <icon-info-circle />\n      </template>\n    </a-input-number>\n  </a-space>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/input-number/__demo__/size.md",
    "content": "```yaml\ntitle:\n  zh-CN: 四种尺寸\n  en-US: Size\n```\n\n## zh-CN\n\n设置 `size` 可以使用四种尺寸（`mini`, `small`, `medium`, `large`）的数字输入框。高度分别对应`24px`、`28px`、`32px`、`36px`。\n\n---\n\n## en-US\n\nSetting `size` can use four sizes (`mini`, `small`, `medium`, `large`) number input box. The corresponding heights are `24px`, `28px`, `32px`, and `36px` respectively.\n\n---\n```vue\n<template>\n  <a-space direction=\"vertical\" size=\"large\">\n    <a-input-number :style=\"{width:'320px'}\" placeholder=\"Please Enter\" size=\"large\" class=\"input-demo\" />\n    <a-input-number :style=\"{width:'320px'}\" placeholder=\"Please Enter\" mode=\"button\" size=\"large\" class=\"input-demo\" />\n  </a-space>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/input-number/__demo__/step-icon.md",
    "content": "```yaml\ntitle:\n  zh-CN: 自定义图标\n  en-US: Step Icon\n```\n\n## zh-CN\n\n通过指定 `plus` 和 `minus` 插槽来修改数值增减操作的图标。\n\n---\n\n## en-US\n\nTo Add the icons for the increment and decrement operations by specifying the `plus` and `minus` slots.\n\n---\n\n```vue\n<template>\n  <a-space direction=\"vertical\" size=\"large\">\n    <a-input-number :style=\"{width:'320px'}\" placeholder=\"Please enter something\" allow-clear>\n       <template #plus>\n        <icon-plus />\n      </template>\n      <template #minus>\n        <icon-minus />\n      </template>\n    </a-input-number>\n  </a-space>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/input-number/__test__/__snapshots__/demo.test.ts.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`<input-number> demo: render [basic] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-vertical\\\\\" style=\\\\\"column-gap: 24px; row-gap: 24px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-input-wrapper arco-input-number arco-input-number-mode-embed arco-input-number-size-medium input-demo\\\\\" style=\\\\\"width: 320px;\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" placeholder=\\\\\"Please Enter\\\\\" role=\\\\\"spinbutton\\\\\" aria-valuemax=\\\\\"100\\\\\" aria-valuemin=\\\\\"10\\\\\" aria-valuenow=\\\\\"15\\\\\" value=\\\\\"15\\\\\"><!----><span class=\\\\\"arco-input-suffix\\\\\"><!----><!----><div class=\\\\\"arco-input-number-step\\\\\"><button class=\\\\\"arco-input-number-step-button\\\\\" type=\\\\\"button\\\\\" tabindex=\\\\\"-1\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-up\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 30.557 24.043 15 8.487 30.557\\\\\"></path></svg></button><button class=\\\\\"arco-input-number-step-button\\\\\" type=\\\\\"button\\\\\" tabindex=\\\\\"-1\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></button></div><!----></span></span></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-input-wrapper arco-input-number arco-input-number-mode-embed arco-input-number-size-medium input-demo\\\\\" style=\\\\\"width: 320px;\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" placeholder=\\\\\"Please Enter\\\\\" role=\\\\\"spinbutton\\\\\" aria-valuemax=\\\\\"100\\\\\" aria-valuemin=\\\\\"10\\\\\" aria-valuenow=\\\\\"\\\\\" value=\\\\\"\\\\\"><!----><span class=\\\\\"arco-input-suffix\\\\\"><!----><!----><div class=\\\\\"arco-input-number-step\\\\\"><button class=\\\\\"arco-input-number-step-button\\\\\" type=\\\\\"button\\\\\" tabindex=\\\\\"-1\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-up\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 30.557 24.043 15 8.487 30.557\\\\\"></path></svg></button><button class=\\\\\"arco-input-number-step-button\\\\\" type=\\\\\"button\\\\\" tabindex=\\\\\"-1\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></button></div><!----></span></span></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-input-wrapper arco-input-disabled arco-input-number arco-input-number-mode-embed arco-input-number-size-medium input-demo\\\\\" style=\\\\\"width: 320px;\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" placeholder=\\\\\"Please Enter\\\\\" disabled=\\\\\"\\\\\" role=\\\\\"spinbutton\\\\\" aria-valuemax=\\\\\"Infinity\\\\\" aria-valuemin=\\\\\"-Infinity\\\\\" aria-valuenow=\\\\\"500\\\\\" value=\\\\\"500\\\\\"><!----><span class=\\\\\"arco-input-suffix\\\\\"><!----><!----><div class=\\\\\"arco-input-number-step\\\\\"><button class=\\\\\"arco-input-number-step-button arco-input-number-step-button-disabled\\\\\" type=\\\\\"button\\\\\" tabindex=\\\\\"-1\\\\\" disabled=\\\\\"\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-up\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 30.557 24.043 15 8.487 30.557\\\\\"></path></svg></button><button class=\\\\\"arco-input-number-step-button arco-input-number-step-button-disabled\\\\\" type=\\\\\"button\\\\\" tabindex=\\\\\"-1\\\\\" disabled=\\\\\"\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></button></div><!----></span></span></div>\n</div>\"\n`;\n\nexports[`<input-number> demo: render [format] correctly 1`] = `\"<span class=\\\\\"arco-input-wrapper arco-input-number arco-input-number-mode-embed arco-input-number-size-medium input-demo\\\\\" style=\\\\\"width: 320px;\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" placeholder=\\\\\"Please Enter\\\\\" role=\\\\\"spinbutton\\\\\" aria-valuemax=\\\\\"Infinity\\\\\" aria-valuemin=\\\\\"0\\\\\" aria-valuenow=\\\\\"12,000\\\\\" value=\\\\\"12,000\\\\\"><!----><span class=\\\\\"arco-input-suffix\\\\\"><!----><!----><div class=\\\\\"arco-input-number-step\\\\\"><button class=\\\\\"arco-input-number-step-button\\\\\" type=\\\\\"button\\\\\" tabindex=\\\\\"-1\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-up\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 30.557 24.043 15 8.487 30.557\\\\\"></path></svg></button><button class=\\\\\"arco-input-number-step-button\\\\\" type=\\\\\"button\\\\\" tabindex=\\\\\"-1\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></button></div><!----></span></span>\"`;\n\nexports[`<input-number> demo: render [mode] correctly 1`] = `\"<span class=\\\\\"arco-input-outer arco-input-outer-size-medium arco-input-number arco-input-number-mode-button arco-input-number-size-medium input-demo\\\\\" style=\\\\\"width: 320px;\\\\\"><span class=\\\\\"arco-input-prepend\\\\\"><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal arco-btn-only-icon arco-input-number-step-button\\\\\" type=\\\\\"button\\\\\" tabindex=\\\\\"-1\\\\\"><span class=\\\\\"arco-btn-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-minus\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M5 24h38\\\\\"></path></svg></span></button></span><span class=\\\\\"arco-input-wrapper\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" placeholder=\\\\\"Please Enter\\\\\" role=\\\\\"spinbutton\\\\\" aria-valuemax=\\\\\"Infinity\\\\\" aria-valuemin=\\\\\"-Infinity\\\\\" aria-valuenow=\\\\\"500\\\\\" value=\\\\\"500\\\\\"><!----><!----></span><span class=\\\\\"arco-input-append\\\\\"><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal arco-btn-only-icon arco-input-number-step-button\\\\\" type=\\\\\"button\\\\\" tabindex=\\\\\"-1\\\\\"><span class=\\\\\"arco-btn-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-plus\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M5 24h38M24 5v38\\\\\"></path></svg></span></button></span></span>\"`;\n\nexports[`<input-number> demo: render [model] correctly 1`] = `\n\"<span class=\\\\\"arco-input-wrapper arco-input-number arco-input-number-mode-embed arco-input-number-size-medium input-demo\\\\\" style=\\\\\"width: 320px;\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" placeholder=\\\\\"Please Enter\\\\\" role=\\\\\"spinbutton\\\\\" aria-valuemax=\\\\\"100\\\\\" aria-valuemin=\\\\\"10\\\\\" aria-valuenow=\\\\\"15\\\\\" value=\\\\\"15\\\\\"><!----><span class=\\\\\"arco-input-suffix\\\\\"><!----><!----><div class=\\\\\"arco-input-number-step\\\\\"><button class=\\\\\"arco-input-number-step-button\\\\\" type=\\\\\"button\\\\\" tabindex=\\\\\"-1\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-up\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 30.557 24.043 15 8.487 30.557\\\\\"></path></svg></button><button class=\\\\\"arco-input-number-step-button\\\\\" type=\\\\\"button\\\\\" tabindex=\\\\\"-1\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></button></div><!----></span></span>\n<div>value: 15</div>\"\n`;\n\nexports[`<input-number> demo: render [precision] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-vertical\\\\\" style=\\\\\"column-gap: 24px; row-gap: 24px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-input-wrapper arco-input-number arco-input-number-mode-embed arco-input-number-size-medium input-demo\\\\\" style=\\\\\"width: 320px;\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" placeholder=\\\\\"Please Enter\\\\\" role=\\\\\"spinbutton\\\\\" aria-valuemax=\\\\\"Infinity\\\\\" aria-valuemin=\\\\\"-Infinity\\\\\" aria-valuenow=\\\\\"3.60\\\\\" value=\\\\\"3.60\\\\\"><!----><span class=\\\\\"arco-input-suffix\\\\\"><!----><!----><div class=\\\\\"arco-input-number-step\\\\\"><button class=\\\\\"arco-input-number-step-button\\\\\" type=\\\\\"button\\\\\" tabindex=\\\\\"-1\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-up\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 30.557 24.043 15 8.487 30.557\\\\\"></path></svg></button><button class=\\\\\"arco-input-number-step-button\\\\\" type=\\\\\"button\\\\\" tabindex=\\\\\"-1\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></button></div><!----></span></span></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-input-wrapper arco-input-number arco-input-number-mode-embed arco-input-number-size-medium input-demo\\\\\" style=\\\\\"width: 320px;\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" placeholder=\\\\\"Please Enter\\\\\" role=\\\\\"spinbutton\\\\\" aria-valuemax=\\\\\"Infinity\\\\\" aria-valuemin=\\\\\"-Infinity\\\\\" aria-valuenow=\\\\\"1.22\\\\\" value=\\\\\"1.22\\\\\"><!----><span class=\\\\\"arco-input-suffix\\\\\"><!----><!----><div class=\\\\\"arco-input-number-step\\\\\"><button class=\\\\\"arco-input-number-step-button\\\\\" type=\\\\\"button\\\\\" tabindex=\\\\\"-1\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-up\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 30.557 24.043 15 8.487 30.557\\\\\"></path></svg></button><button class=\\\\\"arco-input-number-step-button\\\\\" type=\\\\\"button\\\\\" tabindex=\\\\\"-1\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></button></div><!----></span></span></div>\n</div>\"\n`;\n\nexports[`<input-number> demo: render [prefix] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-vertical\\\\\" style=\\\\\"column-gap: 24px; row-gap: 24px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-input-wrapper arco-input-number arco-input-number-mode-embed arco-input-number-size-medium\\\\\" style=\\\\\"width: 320px;\\\\\"><span class=\\\\\"arco-input-prefix\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-user\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M7 37c0-4.97 4.03-8 9-8h16c4.97 0 9 3.03 9 8v3a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1v-3Z\\\\\"></path><circle cx=\\\\\"24\\\\\" cy=\\\\\"15\\\\\" r=\\\\\"8\\\\\"></circle></svg></span><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" placeholder=\\\\\"Please enter something\\\\\" role=\\\\\"spinbutton\\\\\" aria-valuemax=\\\\\"Infinity\\\\\" aria-valuemin=\\\\\"-Infinity\\\\\" aria-valuenow=\\\\\"\\\\\" value=\\\\\"\\\\\">\n    <!----><span class=\\\\\"arco-input-suffix\\\\\"><!----><!----><div class=\\\\\"arco-input-number-step\\\\\"><button class=\\\\\"arco-input-number-step-button\\\\\" type=\\\\\"button\\\\\" tabindex=\\\\\"-1\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-up\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 30.557 24.043 15 8.487 30.557\\\\\"></path></svg></button><button class=\\\\\"arco-input-number-step-button\\\\\" type=\\\\\"button\\\\\" tabindex=\\\\\"-1\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></button></div><!----></span></span>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-input-wrapper arco-input-number arco-input-number-mode-embed arco-input-number-size-medium\\\\\" style=\\\\\"width: 320px;\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" placeholder=\\\\\"Please enter something\\\\\" role=\\\\\"spinbutton\\\\\" aria-valuemax=\\\\\"Infinity\\\\\" aria-valuemin=\\\\\"-Infinity\\\\\" aria-valuenow=\\\\\"\\\\\" value=\\\\\"\\\\\"><!----><span class=\\\\\"arco-input-suffix\\\\\"><!----><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-info-circle\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M24 20v14m0-16v-4m18 10c0 9.941-8.059 18-18 18S6 33.941 6 24 14.059 6 24 6s18 8.059 18 18Z\\\\\"></path></svg><!----></span></span></div>\n</div>\"\n`;\n\nexports[`<input-number> demo: render [size] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-vertical\\\\\" style=\\\\\"column-gap: 24px; row-gap: 24px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-input-wrapper arco-input-number arco-input-number-mode-embed arco-input-number-size-large input-demo\\\\\" style=\\\\\"width: 320px;\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-large\\\\\" type=\\\\\"text\\\\\" placeholder=\\\\\"Please Enter\\\\\" role=\\\\\"spinbutton\\\\\" aria-valuemax=\\\\\"Infinity\\\\\" aria-valuemin=\\\\\"-Infinity\\\\\" aria-valuenow=\\\\\"\\\\\" value=\\\\\"\\\\\"><!----><span class=\\\\\"arco-input-suffix\\\\\"><!----><!----><div class=\\\\\"arco-input-number-step\\\\\"><button class=\\\\\"arco-input-number-step-button\\\\\" type=\\\\\"button\\\\\" tabindex=\\\\\"-1\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-up\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 30.557 24.043 15 8.487 30.557\\\\\"></path></svg></button><button class=\\\\\"arco-input-number-step-button\\\\\" type=\\\\\"button\\\\\" tabindex=\\\\\"-1\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></button></div><!----></span></span></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-input-outer arco-input-outer-size-large arco-input-number arco-input-number-mode-button arco-input-number-size-large input-demo\\\\\" style=\\\\\"width: 320px;\\\\\"><span class=\\\\\"arco-input-prepend\\\\\"><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-large arco-btn-status-normal arco-btn-only-icon arco-input-number-step-button\\\\\" type=\\\\\"button\\\\\" tabindex=\\\\\"-1\\\\\"><span class=\\\\\"arco-btn-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-minus\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M5 24h38\\\\\"></path></svg></span></button></span><span class=\\\\\"arco-input-wrapper\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-large\\\\\" type=\\\\\"text\\\\\" placeholder=\\\\\"Please Enter\\\\\" role=\\\\\"spinbutton\\\\\" aria-valuemax=\\\\\"Infinity\\\\\" aria-valuemin=\\\\\"-Infinity\\\\\" aria-valuenow=\\\\\"\\\\\" value=\\\\\"\\\\\"><!----><!----></span><span class=\\\\\"arco-input-append\\\\\"><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-large arco-btn-status-normal arco-btn-only-icon arco-input-number-step-button\\\\\" type=\\\\\"button\\\\\" tabindex=\\\\\"-1\\\\\"><span class=\\\\\"arco-btn-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-plus\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M5 24h38M24 5v38\\\\\"></path></svg></span></button></span></span></div>\n</div>\"\n`;\n\nexports[`<input-number> demo: render [step-icon] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-vertical\\\\\" style=\\\\\"column-gap: 24px; row-gap: 24px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-input-wrapper arco-input-number arco-input-number-mode-embed arco-input-number-size-medium\\\\\" style=\\\\\"width: 320px;\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" placeholder=\\\\\"Please enter something\\\\\" role=\\\\\"spinbutton\\\\\" aria-valuemax=\\\\\"Infinity\\\\\" aria-valuemin=\\\\\"-Infinity\\\\\" aria-valuenow=\\\\\"\\\\\" value=\\\\\"\\\\\"><!----><span class=\\\\\"arco-input-suffix\\\\\"><!----><!----><div class=\\\\\"arco-input-number-step\\\\\"><button class=\\\\\"arco-input-number-step-button\\\\\" type=\\\\\"button\\\\\" tabindex=\\\\\"-1\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-plus\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M5 24h38M24 5v38\\\\\"></path></svg></button><button class=\\\\\"arco-input-number-step-button\\\\\" type=\\\\\"button\\\\\" tabindex=\\\\\"-1\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-minus\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M5 24h38\\\\\"></path></svg></button></div><!----></span></span></div>\n</div>\"\n`;\n"
  },
  {
    "path": "packages/web-vue/components/input-number/__test__/demo.test.ts",
    "content": "import demoTest from '../../../scripts/demo-test';\n\ndemoTest('input-number');\n"
  },
  {
    "path": "packages/web-vue/components/input-number/__test__/index.test.ts",
    "content": "import { mount } from '@vue/test-utils';\nimport InputNumber from '../index';\n\ndescribe('InputNumber', () => {\n  test('number add correctly', async () => {\n    const wrapper = mount(InputNumber);\n\n    const stepButton = wrapper.find('button');\n    await stepButton.trigger('mousedown');\n    await stepButton.trigger('mousedown');\n\n    expect(wrapper.find('input').element.value).toBe('1');\n  });\n\n  test('should valid input', async () => {\n    const wrapper = mount(InputNumber, {\n      props: {\n        min: 0,\n        max: 10,\n      },\n    });\n\n    const input = wrapper.find('input');\n    await input.setValue('-2');\n    expect(input.element.value).toBe('-2');\n    await input.trigger('blur');\n    expect(input.element.value).toBe('0');\n    await input.setValue('20');\n    expect(input.element.value).toBe('20');\n    await input.trigger('blur');\n    expect(input.element.value).toBe('10');\n  });\n});\n"
  },
  {
    "path": "packages/web-vue/components/input-number/index.ts",
    "content": "import type { App } from 'vue';\nimport type { ArcoOptions } from '../_utils/types';\nimport { setGlobalConfig, getComponentPrefix } from '../_utils/global-config';\nimport _InputNumber from './input-number';\n\nconst InputNumber = Object.assign(_InputNumber, {\n  install: (app: App, options?: ArcoOptions) => {\n    setGlobalConfig(app, options);\n    const componentPrefix = getComponentPrefix(options);\n\n    app.component(componentPrefix + _InputNumber.name, _InputNumber);\n  },\n});\n\nexport type InputNumberInstance = InstanceType<typeof _InputNumber>;\n\nexport default InputNumber;\n"
  },
  {
    "path": "packages/web-vue/components/input-number/input-number.tsx",
    "content": "import { computed, defineComponent, PropType, ref, toRefs, watch } from 'vue';\nimport NP from 'number-precision';\nimport { getPrefixCls } from '../_utils/global-config';\nimport { isNumber, isUndefined } from '../_utils/is';\nimport IconUp from '../icon/icon-up';\nimport IconDown from '../icon/icon-down';\nimport IconPlus from '../icon/icon-plus';\nimport IconMinus from '../icon/icon-minus';\nimport ArcoButton from '../button';\nimport ArcoInput from '../input';\nimport { Size } from '../_utils/constant';\nimport { useFormItem } from '../_hooks/use-form-item';\nimport { useSize } from '../_hooks/use-size';\nimport { getKeyDownHandler, KEYBOARD_KEY } from '../_utils/keyboard';\n\ntype StepMethods = 'minus' | 'plus';\n\nconst FIRST_DELAY = 800;\nconst SPEED = 150;\n\nNP.enableBoundaryChecking(false);\n\nexport default defineComponent({\n  name: 'InputNumber',\n  props: {\n    /**\n     * @zh 绑定值\n     * @en Value\n     */\n    modelValue: Number,\n    /**\n     * @zh 默认值（非受控模式）\n     * @en Default value (uncontrolled mode)\n     */\n    defaultValue: Number,\n    /**\n     * @zh 模式（`embed`：按钮内嵌模式，`button`：左右按钮模式）\n     * @en Mode (`embed`: button embedded mode, `button`: left and right button mode)\n     * @values 'embed', 'button'\n     */\n    mode: {\n      type: String as PropType<'embed' | 'button'>,\n      default: 'embed',\n    },\n    /**\n     * @zh 数字精度\n     * @en Precision\n     */\n    precision: Number,\n    /**\n     * @zh 数字变化步长\n     * @en Number change step\n     */\n    step: {\n      type: Number,\n      default: 1,\n    },\n    /**\n     * @zh 是否禁用\n     * @en Whether to disable\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 是否为错误状态\n     * @en Whether it is an error state\n     */\n    error: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 最大值\n     * @en Max\n     */\n    max: {\n      type: Number,\n      default: Infinity,\n    },\n    /**\n     * @zh 最小值\n     * @en Min\n     */\n    min: {\n      type: Number,\n      default: -Infinity,\n    },\n    /**\n     * @zh 定义输入框展示值\n     * @en Define the display value of the input\n     */\n    formatter: {\n      type: Function,\n    },\n    /**\n     * @zh 从 `formatter` 转换为数字，和 `formatter` 搭配使用\n     * @en Convert from `formatter` to number, and use with `formatter`\n     */\n    parser: {\n      type: Function,\n    },\n    /**\n     * @zh 输入框提示文字\n     * @en Input prompt text\n     */\n    placeholder: String,\n    /**\n     * @zh 是否隐藏按钮\n     * @en Whether to hide the button\n     */\n    hideButton: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 输入框大小\n     * @en Input size\n     * @values 'mini','small','medium','large'\n     * @defaultValue 'medium'\n     */\n    size: {\n      type: String as PropType<Size>,\n    },\n    /**\n     * @zh 是否允许清空输入框\n     * @en Whether to allow the input to be cleared\n     */\n    allowClear: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 触发 `v-model` 的事件\n     * @en Trigger event for `v-model`\n     */\n    modelEvent: {\n      type: String as PropType<'change' | 'input'>,\n      default: 'change',\n    },\n    /**\n     * @zh 只读\n     * @en Readonly\n     * @version 2.33.1\n     */\n    readOnly: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 内部 input 元素的属性\n     * @en Attributes of inner input elements\n     * @version 2.52.0\n     */\n    inputAttrs: {\n      type: Object,\n    },\n  },\n  emits: {\n    'update:modelValue': (value: number | undefined) => true,\n    /**\n     * @zh 值发生改变时触发\n     * @en Triggered when the value changes\n     * @param { number | undefined } value\n     * @param {Event} ev\n     */\n    'change': (value: number | undefined, ev: Event) => true,\n    /**\n     * @zh 输入框获取焦点时触发\n     * @en Triggered when the input gets focus\n     * @param {FocusEvent} ev\n     */\n    'focus': (ev: FocusEvent) => true,\n    /**\n     * @zh 输入框失去焦点时触发\n     * @en Triggered when the input box loses focus\n     * @param {FocusEvent} ev\n     */\n    'blur': (ev: FocusEvent) => true,\n    /**\n     * @zh 用户点击清除按钮时触发\n     * @en Triggered when the user clicks the clear button\n     * @param {Event} ev\n     * @version 2.23.0\n     */\n    'clear': (ev: Event) => true,\n    /**\n     * @zh 输入时触发\n     * @en Triggered on input\n     * @param { number | undefined } value\n     * @param {string} inputValue\n     * @param {Event} ev\n     * @version 2.27.0\n     */\n    'input': (value: number | undefined, inputValue: string, ev: Event) => true,\n    /**\n     * @zh 按下键盘时触发\n     * @en Triggered on keydown\n     * @param {MouseEvent} ev\n     * @version 2.56.0\n     */\n    'keydown': (ev: KeyboardEvent) => true,\n  },\n  /**\n   * @zh 前缀\n   * @en Prefix\n   * @slot prefix\n   */\n  /**\n   * @zh 后缀\n   * @en Suffix\n   * @slot suffix\n   */\n  /**\n   * @zh 前置标签\n   * @en Prepend\n   * @slot prepend\n   */\n  /**\n   * @zh 后置标签\n   * @en Append\n   * @slot append\n   */\n  /**\n   * @zh 数值增加图标\n   * @en Plus\n   * @slot plus\n   */\n  /**\n   * @zh 数值减少图标\n   * @en Minus\n   * @slot minus\n   */\n  setup(props, { emit, slots }) {\n    const { size, disabled } = toRefs(props);\n    const prefixCls = getPrefixCls('input-number');\n    const inputRef = ref<HTMLInputElement>();\n    const {\n      mergedSize: _mergedSize,\n      mergedDisabled,\n      eventHandlers,\n    } = useFormItem({\n      size,\n      disabled,\n    });\n    const { mergedSize } = useSize(_mergedSize);\n    const mergedPrecision = computed(() => {\n      if (isNumber(props.precision)) {\n        const decimal = `${props.step}`.split('.')[1];\n        const stepPrecision = (decimal && decimal.length) || 0;\n        return Math.max(stepPrecision, props.precision);\n      }\n      return undefined;\n    });\n\n    const getStringValue = (number: number | undefined) => {\n      if (!isNumber(number)) {\n        return '';\n      }\n\n      const numString = mergedPrecision.value\n        ? number.toFixed(mergedPrecision.value)\n        : String(number);\n      return props.formatter?.(numString) ?? numString;\n    };\n\n    // inner input value to display\n    const _value = ref(getStringValue(props.modelValue ?? props.defaultValue));\n\n    const valueNumber = computed(() => {\n      if (!_value.value) {\n        return undefined;\n      }\n      const number = Number(props.parser?.(_value.value) ?? _value.value);\n      return Number.isNaN(number) ? undefined : number;\n    });\n\n    const isMin = ref(\n      isNumber(valueNumber.value) && valueNumber.value <= props.min\n    );\n    const isMax = ref(\n      isNumber(valueNumber.value) && valueNumber.value >= props.max\n    );\n\n    // 步长重复定时器\n    let repeatTimer = 0;\n\n    const clearRepeatTimer = () => {\n      if (repeatTimer) {\n        window.clearTimeout(repeatTimer);\n        repeatTimer = 0;\n      }\n    };\n\n    const getLegalValue = (value: number | undefined): number | undefined => {\n      if (isUndefined(value)) {\n        return undefined;\n      }\n\n      if (isNumber(props.min) && value < props.min) {\n        value = props.min;\n      }\n\n      if (isNumber(props.max) && value > props.max) {\n        value = props.max;\n      }\n\n      return isNumber(mergedPrecision.value)\n        ? NP.round(value, mergedPrecision.value)\n        : value;\n    };\n\n    const updateNumberStatus = (number: number | undefined) => {\n      let _isMin = false;\n      let _isMax = false;\n      if (isNumber(number)) {\n        if (number <= props.min) {\n          _isMin = true;\n        }\n        if (number >= props.max) {\n          _isMax = true;\n        }\n      }\n      if (isMax.value !== _isMax) {\n        isMax.value = _isMax;\n      }\n      if (isMin.value !== _isMin) {\n        isMin.value = _isMin;\n      }\n    };\n\n    const handleExceedRange = () => {\n      const finalValue = getLegalValue(valueNumber.value);\n      const stringValue = getStringValue(finalValue);\n      if (finalValue !== valueNumber.value || _value.value !== stringValue) {\n        _value.value = stringValue;\n      }\n      emit('update:modelValue', finalValue);\n    };\n\n    watch(\n      () => [props.max, props.min],\n      () => {\n        handleExceedRange();\n        updateNumberStatus(valueNumber.value);\n      }\n    );\n\n    const nextStep = (method: StepMethods, event: Event) => {\n      if (\n        mergedDisabled.value ||\n        (method === 'plus' && isMax.value) ||\n        (method === 'minus' && isMin.value)\n      ) {\n        return;\n      }\n\n      let nextValue: number | undefined;\n      if (isNumber(valueNumber.value)) {\n        nextValue = getLegalValue(NP[method](valueNumber.value, props.step));\n      } else {\n        nextValue = props.min === -Infinity ? 0 : props.min;\n      }\n\n      _value.value = getStringValue(nextValue);\n      updateNumberStatus(nextValue);\n      emit('update:modelValue', nextValue);\n      emit('change', nextValue, event);\n    };\n\n    const handleStepButton = (\n      event: Event,\n      method: StepMethods,\n      needRepeat = false\n    ) => {\n      event.preventDefault();\n\n      if (props.readOnly) return;\n\n      inputRef.value?.focus();\n\n      nextStep(method, event);\n\n      // 长按时持续触发\n      if (needRepeat) {\n        repeatTimer = window.setTimeout(\n          () => (event.target as HTMLElement).dispatchEvent(event),\n          repeatTimer ? SPEED : FIRST_DELAY\n        );\n      }\n    };\n\n    const handleInput = (value: string, ev: Event) => {\n      value = value.trim().replace(/。/g, '.');\n      value = props.parser?.(value) ?? value;\n\n      if (isNumber(Number(value)) || /^(\\.|-)$/.test(value)) {\n        _value.value = props.formatter?.(value) ?? value;\n        updateNumberStatus(valueNumber.value);\n\n        emit('input', valueNumber.value, _value.value, ev);\n        if (props.modelEvent === 'input') {\n          emit('update:modelValue', valueNumber.value);\n          emit('change', valueNumber.value, ev);\n        }\n      }\n    };\n\n    const handleFocus = (ev: FocusEvent) => {\n      emit('focus', ev);\n    };\n\n    const handleChange = (value: string, ev: Event) => {\n      if (ev instanceof MouseEvent && !value) {\n        return;\n      }\n\n      handleExceedRange();\n      emit('change', valueNumber.value, ev);\n    };\n\n    const handleBlur = (ev: FocusEvent) => {\n      emit('blur', ev);\n    };\n\n    const handleClear = (ev: Event) => {\n      _value.value = '';\n      emit('update:modelValue', undefined);\n      emit('change', undefined, ev);\n      eventHandlers.value?.onChange?.(ev);\n      emit('clear', ev);\n    };\n\n    const keyDownHandler = getKeyDownHandler(\n      new Map([\n        [\n          KEYBOARD_KEY.ARROW_UP,\n          (ev: Event) => {\n            ev.preventDefault();\n            !props.readOnly && nextStep('plus', ev);\n          },\n        ],\n        [\n          KEYBOARD_KEY.ARROW_DOWN,\n          (ev: Event) => {\n            ev.preventDefault();\n            !props.readOnly && nextStep('minus', ev);\n          },\n        ],\n      ])\n    );\n\n    const onKeyDown = (event: KeyboardEvent) => {\n      emit('keydown', event);\n      if (!event.defaultPrevented) {\n        keyDownHandler(event);\n      }\n    };\n\n    watch(\n      () => props.modelValue,\n      (value: number | undefined) => {\n        if (value !== valueNumber.value) {\n          // TODO: verify number\n          _value.value = getStringValue(value);\n          updateNumberStatus(value);\n        }\n      }\n    );\n\n    const renderSuffix = () => {\n      if (props.readOnly) {\n        return null;\n      }\n      return (\n        <>\n          {slots.suffix && (\n            <div class={`${prefixCls}-suffix`}>{slots.suffix?.()}</div>\n          )}\n          <div class={`${prefixCls}-step`}>\n            <button\n              class={[\n                `${prefixCls}-step-button`,\n                {\n                  [`${prefixCls}-step-button-disabled`]:\n                    mergedDisabled.value || isMax.value,\n                },\n              ]}\n              type=\"button\"\n              tabindex=\"-1\"\n              disabled={mergedDisabled.value || isMax.value}\n              onMousedown={(e) => handleStepButton(e, 'plus', true)}\n              onMouseup={clearRepeatTimer}\n              onMouseleave={clearRepeatTimer}\n            >\n              {slots.plus ? slots.plus?.() : <IconUp />}\n            </button>\n            <button\n              class={[\n                `${prefixCls}-step-button`,\n                {\n                  [`${prefixCls}-step-button-disabled`]:\n                    mergedDisabled.value || isMin.value,\n                },\n              ]}\n              type=\"button\"\n              tabindex=\"-1\"\n              disabled={mergedDisabled.value || isMin.value}\n              onMousedown={(e) => handleStepButton(e, 'minus', true)}\n              onMouseup={clearRepeatTimer}\n              onMouseleave={clearRepeatTimer}\n            >\n              {slots.minus ? slots.minus?.() : <IconDown />}\n            </button>\n          </div>\n        </>\n      );\n    };\n    const cls = computed(() => [\n      prefixCls,\n      `${prefixCls}-mode-${props.mode}`,\n      `${prefixCls}-size-${mergedSize.value}`,\n      {\n        [`${prefixCls}-readonly`]: props.readOnly,\n      },\n    ]);\n\n    const renderPrependButton = () => {\n      return (\n        <ArcoButton\n          size={mergedSize.value}\n          // @ts-ignore\n          tabindex=\"-1\"\n          v-slots={{ icon: () => <IconMinus /> }}\n          class={`${prefixCls}-step-button`}\n          disabled={mergedDisabled.value || isMin.value}\n          // @ts-ignore\n          onMousedown={(ev: MouseEvent) => handleStepButton(ev, 'minus', true)}\n          onMouseup={clearRepeatTimer}\n          onMouseleave={clearRepeatTimer}\n        />\n      );\n    };\n\n    const renderAppendButton = () => {\n      return (\n        <ArcoButton\n          size={mergedSize.value}\n          // @ts-ignore\n          tabindex=\"-1\"\n          v-slots={{ icon: () => <IconPlus /> }}\n          class={`${prefixCls}-step-button`}\n          disabled={mergedDisabled.value || isMax.value}\n          // @ts-ignore\n          onMousedown={(ev: MouseEvent) => handleStepButton(ev, 'plus', true)}\n          onMouseup={clearRepeatTimer}\n          onMouseleave={clearRepeatTimer}\n        />\n      );\n    };\n\n    const render = () => {\n      const _slots =\n        props.mode === 'embed'\n          ? {\n              prepend: slots.prepend,\n              prefix: slots.prefix,\n              suffix: props.hideButton ? slots.suffix : renderSuffix,\n              append: slots.append,\n            }\n          : {\n              prepend: props.hideButton ? slots.prepend : renderPrependButton,\n              prefix: slots.prefix,\n              suffix: slots.suffix,\n              append: props.hideButton ? slots.append : renderAppendButton,\n            };\n\n      return (\n        <ArcoInput\n          key={`__arco__${props.mode}`}\n          v-slots={_slots}\n          ref={inputRef}\n          class={cls.value}\n          type=\"text\"\n          allowClear={props.allowClear}\n          size={mergedSize.value}\n          modelValue={_value.value}\n          placeholder={props.placeholder}\n          disabled={mergedDisabled.value}\n          readonly={props.readOnly}\n          error={props.error}\n          inputAttrs={{\n            'role': 'spinbutton',\n            'aria-valuemax': props.max,\n            'aria-valuemin': props.min,\n            'aria-valuenow': _value.value,\n            ...props.inputAttrs,\n          }}\n          onInput={handleInput}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          onClear={handleClear}\n          onChange={handleChange}\n          // @ts-ignore\n          onKeydown={onKeyDown}\n        />\n      );\n    };\n\n    return {\n      inputRef,\n      render,\n    };\n  },\n  methods: {\n    /**\n     * @zh 使输入框获取焦点\n     * @en Make the input box focus\n     * @public\n     */\n    focus() {\n      (this.inputRef as HTMLInputElement)?.focus();\n    },\n    /**\n     * @zh 使输入框失去焦点\n     * @en Make the input box lose focus\n     * @public\n     */\n    blur() {\n      (this.inputRef as HTMLInputElement)?.blur();\n    },\n  },\n  render() {\n    return this.render();\n  },\n});\n"
  },
  {
    "path": "packages/web-vue/components/input-number/style/index.less",
    "content": "@import './token.less';\n@import '../../input/style/token.less';\n\n@input-prefix-cls: ~'@{prefix}-input';\n@input-number-prefix-cls: ~'@{prefix}-input-number';\n\n.@{input-number-prefix-cls} {\n  position: relative;\n  box-sizing: border-box;\n  width: 100%;\n  border-radius: @input-number-border-radius;\n\n  .transition() {\n    transition: all @transition-duration-1 @transition-timing-function-linear;\n  }\n\n  &-step-button {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    padding: 0;\n    color: @input-number-step-button-color;\n    background-color: @input-number-step-button-color-bg_default;\n    cursor: pointer;\n    user-select: none;\n    .transition();\n\n    &:hover {\n      background-color: @input-number-step-button-color-bg_default_hover;\n      border-color: $background-color;\n    }\n\n    &:active {\n      background-color: @input-number-step-button-color-bg_default_active;\n      border-color: $background-color;\n    }\n\n    &:disabled {\n      color: @input-number-step-button-color_disabled;\n      background-color: @input-number-step-button-color-bg_disabled;\n      cursor: not-allowed;\n\n      &:hover,\n      &:active {\n        background-color: @input-number-step-button-color-bg_disabled_hover;\n        border-color: @input-number-step-button-color-border;\n      }\n    }\n  }\n\n  .@{input-prefix-cls}-wrapper {\n    position: relative;\n  }\n\n  &-prefix,\n  &-suffix {\n    .transition();\n  }\n\n  // embed mode\n  &-mode-embed {\n    .@{input-number-prefix-cls}-step {\n      position: absolute;\n      top: 4px;\n      right: 4px;\n      bottom: 4px;\n      width: 18px;\n      overflow: hidden;\n      border-radius: @input-number-step-layer-border-radius;\n      opacity: 0;\n      .transition();\n\n      .@{input-number-prefix-cls}-step-button {\n        width: 100%;\n        height: 50%;\n        font-size: 10px;\n        border: none;\n        border-color: @input-number-step-button-color-border;\n      }\n    }\n\n    .@{input-prefix-cls}-suffix {\n      justify-content: flex-end;\n      min-width: 6px;\n    }\n\n    .@{input-prefix-cls}-suffix-has-feedback {\n      min-width: 32px;\n\n      .@{input-number-prefix-cls}-step {\n        right: 30px;\n      }\n    }\n\n    &:not(.@{input-prefix-cls}-disabled):not(.@{input-prefix-cls}-outer-disabled) {\n      &:hover,\n      &:focus-within {\n        // 修正 hove 时存在 suffix 但隐藏了，视觉上 padding 过大问题\n        .@{input-prefix-cls}-suffix:has(.@{input-number-prefix-cls}-suffix) {\n          padding-left: @spacing-2;\n        }\n\n        & .@{input-number-prefix-cls}-step {\n          opacity: 1;\n        }\n\n        & .@{input-number-prefix-cls}-suffix {\n          opacity: 0;\n          pointer-events: none;\n        }\n      }\n    }\n\n    // 修正 InputNumber 未激活 hover 时 StepButton 的 hover 背景色\n    &.@{input-prefix-cls}-wrapper:not(.@{input-prefix-cls}-focus) {\n      .@{input-number-prefix-cls}-step-button:not(.@{input-number-prefix-cls}-step-button-disabled):hover {\n        background-color: @input-number-step-button-color-bg_default_active;\n      }\n    }\n  }\n\n  // button mode\n  &-mode-button {\n    .@{input-prefix-cls} {\n      &-prepend,\n      &-append {\n        padding: 0;\n        border: none;\n      }\n\n      &-prepend .@{input-number-prefix-cls}-step-button {\n        border-right: @input-border-addon-separator-width solid transparent;\n        border-top-right-radius: 0;\n        border-bottom-right-radius: 0;\n\n        &:not(&:active) {\n          border-right-color: @input-number-step-button-color-border;\n        }\n      }\n\n      &-append .@{input-number-prefix-cls}-step-button {\n        border-left: @input-border-addon-separator-width solid transparent;\n        border-top-left-radius: 0;\n        border-bottom-left-radius: 0;\n\n        &:not(&:active) {\n          border-left-color: @input-number-step-button-color-border;\n        }\n      }\n    }\n  }\n\n  &-readonly {\n    .@{input-number-prefix-cls}-step-button {\n      color: @input-number-step-button-color_disabled;\n      pointer-events: none;\n    }\n  }\n}\n"
  },
  {
    "path": "packages/web-vue/components/input-number/style/index.ts",
    "content": "import '../../style/index.less';\nimport '../../input/style';\nimport '../../button/style';\nimport './index.less';\n"
  },
  {
    "path": "packages/web-vue/components/input-number/style/token.less",
    "content": "@import '../../style/theme/index.less';\n\n@input-number-border-radius: @radius-small;\n@input-number-step-layer-border-radius: 1px;\n\n@input-number-size-mini-step-button-width: @size-mini;\n@input-number-size-small-step-button-width: @size-small;\n@input-number-size-default-step-button-width: @size-default;\n@input-number-size-large-step-button-width: @size-large;\n\n@input-number-step-button-color: var(~'@{arco-cssvars-prefix}-color-text-2');\n@input-number-step-button-color_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');\n@input-number-step-button-color-border: var(~'@{arco-cssvars-prefix}-color-neutral-3');\n@input-number-step-button-color-bg_default: var(~'@{arco-cssvars-prefix}-color-fill-2');\n@input-number-step-button-color-bg_default_hover: var(~'@{arco-cssvars-prefix}-color-fill-3');\n@input-number-step-button-color-bg_default_active: var(~'@{arco-cssvars-prefix}-color-fill-4');\n@input-number-step-button-color-bg_disabled: var(~'@{arco-cssvars-prefix}-color-fill-2');\n@input-number-step-button-color-bg_disabled_hover: var(~'@{arco-cssvars-prefix}-color-fill-2');\n@input-number-step-button-color-bg_disabled_active: var(~'@{arco-cssvars-prefix}-color-fill-2');\n"
  },
  {
    "path": "packages/web-vue/components/input-tag/CHANGELOG.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.53.3\n\n`2023-11-24`\n\n### 🐛 BugFix\n\n- Fix the problem that the file can still be deleted under `read-only` ([#2824](https://github.com/arco-design/arco-design-vue/pull/2824))\n\n\n## 2.38.1\n\n`2022-11-04`\n\n### 🐛 BugFix\n\n- Fixed delete key deleting unavailable options ([#1836](https://github.com/arco-design/arco-design-vue/pull/1836))\n\n\n## 2.36.1\n\n`2022-09-09`\n\n\n## 2.33.1\n\n`2022-07-22`\n\n### 🐛 BugFix\n\n- Fix the problem that the value parameter in the remove event is wrong after setting max-tag-count ([#1442](https://github.com/arco-design/arco-design-vue/pull/1442))\n\n\n## 2.32.0\n\n`2022-06-24`\n\n### 🐛 BugFix\n\n- Fix the problem of Chinese input method reporting an error ([#1335](https://github.com/arco-design/arco-design-vue/pull/1335))\n\n\n## 2.29.1\n\n`2022-06-02`\n\n### 💎 Enhancement\n\n- When out of focus, the input value will be cleared by default ([#1232](https://github.com/arco-design/arco-design-vue/pull/1232))\n\n\n## 2.22.0\n\n`2022-04-01`\n\n### 🆕 Feature\n\n- Added `field-names` attribute ([#910](https://github.com/arco-design/arco-design-vue/pull/910))\n\n\n## 2.15.0\n\n`2022-01-14`\n\n### 🆕 Feature\n\n- Add the `uniqueValue` attribute to support the validation that the value is not repeated during input ([#578](https://github.com/arco-design/arco-design-vue/pull/578))\n\n\n## 2.13.0\n\n`2021-12-31`\n\n### 🐛 BugFix\n\n- Fix Chinese input method problem ([#481](https://github.com/arco-design/arco-design-vue/pull/481))\n\n\n## 2.11.1\n\n`2021-12-20`\n\n### 🐛 BugFix\n\n- Fix the problem of Chinese input failure caused by resize ([#428](https://github.com/arco-design/arco-design-vue/pull/428))\n\n\n## 2.11.0\n\n`2021-12-17`\n\n### 🐛 BugFix\n\n- Fix the problem that the internal input size is calculated incorrectly in some cases ([#408](https://github.com/arco-design/arco-design-vue/pull/408))\n\n\n## 2.10.1\n\n`2021-12-14`\n\n### 💅 Style\n\n- Fix the component height problem ([#383](https://github.com/arco-design/arco-design-vue/pull/383))\n- Fix the width of the component close button ([#383](https://github.com/arco-design/arco-design-vue/pull/383))\n\n\n## 2.10.0\n\n`2021-12-10`\n\n### 💅 Style\n\n- Optimize label animation and close button style ([#345](https://github.com/arco-design/arco-design-vue/pull/345))\n\n\n## 2.8.0\n\n`2021-12-01`\n\n### 🆕 Feature\n\n- Add support for `tagProps` ([#307](https://github.com/arco-design/arco-design-vue/pull/307))\n\n\n## 2.6.0\n\n`2021-11-19`\n\n### 🆕 Feature\n\n- Add support for backspace key ([#202](https://github.com/arco-design/arco-design-vue/pull/202))\n\n\n## 2.4.0\n\n`2021-11-17`\n\n### 🐛 BugFix\n\n- Fix Chinese input method problem ([#171](https://github.com/arco-design/arco-design-vue/pull/171))\n- Fix the issue that the Enter key triggers form submission ([#171](https://github.com/arco-design/arco-design-vue/pull/171))\n- fix tag can be close in the disabled state ([#161](https://github.com/arco-design/arco-design-vue/pull/161))\n\n\n## 2.1.0\n\n`2021-11-05`\n\n### 🐛 BugFix\n\n- Fix the problem that the width of the input box is calculated incorrectly ([#89](https://github.com/arco-design/arco-design-vue/pull/89))\n\n"
  },
  {
    "path": "packages/web-vue/components/input-tag/CHANGELOG.zh-CN.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.53.3\n\n`2023-11-24`\n\n### 🐛 问题修复\n\n- 修复 `read-only` 下仍然能被删除的问题 ([#2824](https://github.com/arco-design/arco-design-vue/pull/2824))\n\n\n## 2.38.1\n\n`2022-11-04`\n\n### 🐛 问题修复\n\n- 修复删除键会删除不可用选项的问题 ([#1836](https://github.com/arco-design/arco-design-vue/pull/1836))\n\n\n## 2.36.1\n\n`2022-09-09`\n\n\n## 2.33.1\n\n`2022-07-22`\n\n### 🐛 问题修复\n\n- 修复设置 max-tag-count 后，remove 事件中 value 参数错误的问题 ([#1442](https://github.com/arco-design/arco-design-vue/pull/1442))\n\n\n## 2.32.0\n\n`2022-06-24`\n\n### 🐛 问题修复\n\n- 修复中文输入法时报错问题 ([#1335](https://github.com/arco-design/arco-design-vue/pull/1335))\n\n\n## 2.29.1\n\n`2022-06-02`\n\n### 💎 功能优化\n\n- 失焦时会默认清空输入值 ([#1232](https://github.com/arco-design/arco-design-vue/pull/1232))\n\n\n## 2.22.0\n\n`2022-04-01`\n\n### 🆕 新增功能\n\n- 增加 `field-names` 属性 ([#910](https://github.com/arco-design/arco-design-vue/pull/910))\n\n\n## 2.15.0\n\n`2022-01-14`\n\n### 🆕 新增功能\n\n- 增加 `uniqueValue` 属性，支持输入时验证值不重复 ([#578](https://github.com/arco-design/arco-design-vue/pull/578))\n\n\n## 2.13.0\n\n`2021-12-31`\n\n### 🐛 问题修复\n\n- 修复中文输入法问题 ([#481](https://github.com/arco-design/arco-design-vue/pull/481))\n\n\n## 2.11.1\n\n`2021-12-20`\n\n### 🐛 问题修复\n\n- 修复 resize 导致的中文输入失效的问题 ([#428](https://github.com/arco-design/arco-design-vue/pull/428))\n\n\n## 2.11.0\n\n`2021-12-17`\n\n### 🐛 问题修复\n\n- 修复某些情况下内部 input 大小计算错误的问题 ([#408](https://github.com/arco-design/arco-design-vue/pull/408))\n\n\n## 2.10.1\n\n`2021-12-14`\n\n### 💅 样式更新\n\n- 修复组件高度问题 ([#383](https://github.com/arco-design/arco-design-vue/pull/383))\n- 修复组件关闭按钮宽度问题 ([#383](https://github.com/arco-design/arco-design-vue/pull/383))\n\n\n## 2.10.0\n\n`2021-12-10`\n\n### 💅 样式更新\n\n- 优化标签动画和关闭按钮样式 ([#345](https://github.com/arco-design/arco-design-vue/pull/345))\n\n\n## 2.8.0\n\n`2021-12-01`\n\n### 🆕 新增功能\n\n- 增加 `tagProps` 的支持 ([#307](https://github.com/arco-design/arco-design-vue/pull/307))\n\n\n## 2.6.0\n\n`2021-11-19`\n\n### 🆕 新增功能\n\n- 增加退格键的支持 ([#202](https://github.com/arco-design/arco-design-vue/pull/202))\n\n\n## 2.4.0\n\n`2021-11-17`\n\n### 🐛 问题修复\n\n- 修复中文输入法问题 ([#171](https://github.com/arco-design/arco-design-vue/pull/171))\n- 修复 Enter 键触发 form 提交的问题 ([#171](https://github.com/arco-design/arco-design-vue/pull/171))\n- 修复 disabled 状态下标签仍可被关闭 ([#161](https://github.com/arco-design/arco-design-vue/pull/161))\n\n\n## 2.1.0\n\n`2021-11-05`\n\n### 🐛 问题修复\n\n- 修复输入框宽度计算错误的问题 ([#89](https://github.com/arco-design/arco-design-vue/pull/89))\n\n"
  },
  {
    "path": "packages/web-vue/components/input-tag/README.en-US.md",
    "content": "```yaml\nmeta:\n  type: Component\n  category: Data Entry\ntitle: InputTag\ndescription: Used to enter the label.\n```\n\n*Auto translate by google.*\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/status.md\n\n@import ./__demo__/max.md\n\n@import ./__demo__/size.md\n\n## API\n\n\n### `<input-tag>` Props\n\n|Attribute|Description|Type|Default|version|\n|---|---|---|:---:|:---|\n|model-value **(v-model)**|Value|`(string \\| number \\| TagData)[]`|`-`||\n|default-value|Default value (uncontrolled state)|`(string \\| number \\| TagData)[]`|`[]`||\n|input-value **(v-model)**|The value of the input|`string`|`-`||\n|default-input-value|The default value of the input (uncontrolled state)|`string`|`''`||\n|placeholder|Placeholder|`string`|`-`||\n|disabled|Whether to disable|`boolean`|`false`||\n|error|Whether it is an error state|`boolean`|`false`||\n|readonly|Whether it is read-only mode|`boolean`|`false`||\n|allow-clear|Whether to allow clear|`boolean`|`false`||\n|size|The size of the input|`'mini' \\| 'small' \\| 'medium' \\| 'large'`|`'medium'`||\n|max-tag-count|The maximum number of tags displayed, `0` means unlimited|`number`|`0`||\n|retain-input-value|Whether to keep the content of the input box|`boolean \\| { create?: boolean; blur?: boolean }`|`false`||\n|format-tag|Format tag content|`(data: TagData) => string`|`-`||\n|unique-value|Whether to create only unique values|`boolean`|`false`|2.15.0|\n|field-names|Customize fields in `TagData`|`InputTagFieldNames`|`-`|2.22.0|\n|tag-nowrap|Tag content does not wrap|`boolean`|`false`|2.56.1|\n### `<input-tag>` Events\n\n|Event Name|Description|Parameters|\n|---|---|---|\n|change|Triggered when the value changes|value: `(string \\| number \\| TagData)[]`<br>ev: `Event`|\n|input-value-change|Trigger when the input value changes|inputValue: `string`<br>ev: `Event`|\n|press-enter|Triggered when the enter key is pressed|inputValue: `string`<br>ev: `KeyboardEvent`|\n|remove|Triggered when the delete button of the label is clicked|removed: `string \\| number`<br>ev: `Event`|\n|clear|Triggered when the clear button is clicked|ev: `MouseEvent`|\n|focus|Triggered when the input box gets focus|ev: `FocusEvent`|\n|blur|Triggered when the input box loses focus|ev: `FocusEvent`|\n### `<input-tag>` Methods\n\n|Method|Description|Parameters|Return|\n|---|---|---|:---:|\n|focus|Make the input box focus|-|-|\n|blur|Make the input box lose focus|-|-|\n### `<input-tag>` Slots\n\n|Slot Name|Description|Parameters|\n|---|---|---|\n|tag|Display content of tag|data: `TagData`|\n|prefix|Prefix|-|\n|suffix|Suffix|-|\n\n\n\n\n### TagData\n\n|Name|Description|Type|Default|\n|---|---|---|:---:|\n|value|Tag value|`string \\| number`|`-`|\n|label|Tag content|`string`|`-`|\n|closable|Whether to close|`boolean`|`false`|\n|tagProps|Tag props|`TagProps`|`-`|\n\n\n"
  },
  {
    "path": "packages/web-vue/components/input-tag/README.zh-CN.md",
    "content": "```yaml\nmeta:\n  type: 组件\n  category: 数据输入\ntitle: 标签输入框 InputTag\ndescription: 用来输入标签。\n```\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/status.md\n\n@import ./__demo__/max.md\n\n@import ./__demo__/size.md\n\n## API\n\n\n### `<input-tag>` Props\n\n|参数名|描述|类型|默认值|版本|\n|---|---|---|:---:|:---|\n|model-value **(v-model)**|绑定值|`(string \\| number \\| TagData)[]`|`-`||\n|default-value|默认值（非受控状态）|`(string \\| number \\| TagData)[]`|`[]`||\n|input-value **(v-model)**|输入框的值|`string`|`-`||\n|default-input-value|输入框的默认值（非受控状态）|`string`|`''`||\n|placeholder|占位符|`string`|`-`||\n|disabled|是否禁用|`boolean`|`false`||\n|error|是否为错误状态|`boolean`|`false`||\n|readonly|是否为只读模式|`boolean`|`false`||\n|allow-clear|是否允许清空|`boolean`|`false`||\n|size|输入框的大小|`'mini' \\| 'small' \\| 'medium' \\| 'large'`|`'medium'`||\n|max-tag-count|最多展示的标签个数，`0` 表示不限制|`number`|`0`||\n|retain-input-value|是否保留输入框的内容|`boolean \\| { create?: boolean; blur?: boolean }`|`false`||\n|format-tag|格式化标签内容|`(data: TagData) => string`|`-`||\n|unique-value|是否仅创建唯一的值|`boolean`|`false`|2.15.0|\n|field-names|自定义 `TagData` 中的字段|`InputTagFieldNames`|`-`|2.22.0|\n|tag-nowrap|标签内容不换行|`boolean`|`false`|2.56.1|\n### `<input-tag>` Events\n\n|事件名|描述|参数|\n|---|---|---|\n|change|值发生改变时触发|value: `(string \\| number \\| TagData)[]`<br>ev: `Event`|\n|input-value-change|输入值发生改变时触发|inputValue: `string`<br>ev: `Event`|\n|press-enter|按下回车键时触发|inputValue: `string`<br>ev: `KeyboardEvent`|\n|remove|点击标签的删除按钮时触发|removed: `string \\| number`<br>ev: `Event`|\n|clear|点击清除按钮时触发|ev: `MouseEvent`|\n|focus|输入框获取焦点时触发|ev: `FocusEvent`|\n|blur|输入框失去焦点时触发|ev: `FocusEvent`|\n### `<input-tag>` Methods\n\n|方法名|描述|参数|返回值|\n|---|---|---|---|\n|focus|使输入框获取焦点|-|-|\n|blur|使输入框失去焦点|-|-|\n### `<input-tag>` Slots\n\n|插槽名|描述|参数|\n|---|:---:|---|\n|tag|输入框标签的显示内容|data: `TagData`|\n|prefix|前缀元素|-|\n|suffix|后缀元素|-|\n\n\n\n\n### TagData\n\n|参数名|描述|类型|默认值|\n|---|---|---|:---:|\n|value|标签值|`string \\| number`|`-`|\n|label|标签内容|`string`|`-`|\n|closable|是否可关闭|`boolean`|`false`|\n|tagProps|标签属性|`TagProps`|`-`|\n\n\n"
  },
  {
    "path": "packages/web-vue/components/input-tag/TEMPLATE.md",
    "content": "## zh-CN\n```yaml\nmeta:\n  type: 组件\n  category: 数据输入\ntitle: 标签输入框 InputTag\ndescription: 用来输入标签。\n```\n---\n## en-US\n```yaml\nmeta:\n  type: Component\n  category: Data Entry\ntitle: InputTag\ndescription: Used to enter the label.\n```\n---\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/status.md\n\n@import ./__demo__/max.md\n\n@import ./__demo__/size.md\n\n## API\n\n%%API(input-tag.tsx)%%\n\n%%INTERFACE(interface.ts)%%\n"
  },
  {
    "path": "packages/web-vue/components/input-tag/__demo__/basic.md",
    "content": "```yaml\ntitle:\n  zh-CN: 基本用法\n  en-US: Basic Usage\n```\n\n## zh-CN\n\n标签输入框的基本用法。\n\n---\n\n## en-US\n\nBasic usage of tag input.\n\n---\n\n```vue\n<template>\n  <a-input-tag :default-value=\"['test']\" :style=\"{width:'320px'}\" placeholder=\"Please Enter\" allow-clear/>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/input-tag/__demo__/max.md",
    "content": "```yaml\ntitle:\n  zh-CN: 最多展示标签数量\n  en-US: Max Tags\n```\n\n## zh-CN\n\n设置最多展示标签数量。\n\n---\n\n## en-US\n\nSet the maximum number of display labels.\n\n---\n\n```vue\n<template>\n  <a-input-tag :default-value=\"['one','two','three','four']\" :style=\"{width:'380px'}\" placeholder=\"Please Enter\" :max-tag-count=\"3\" allow-clear/>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/input-tag/__demo__/size.md",
    "content": "```yaml\ntitle:\n  zh-CN: 输入框尺寸\n  en-US: Input Size\n```\n\n## zh-CN\n\n输入框分为 `mini`、`small`、`medium`、`large` 四种尺寸。\n\n---\n\n## en-US\n\nThe input box is divided into four sizes: `mini`, `small`, `medium`, and `large`.\n\n---\n\n```vue\n<template>\n  <a-space direction=\"vertical\" size=\"large\">\n    <a-radio-group type=\"button\" v-model=\"size\">\n      <a-radio value=\"mini\">mini</a-radio>\n      <a-radio value=\"small\">small</a-radio>\n      <a-radio value=\"medium\">medium</a-radio>\n      <a-radio value=\"large\">large</a-radio>\n    </a-radio-group>\n    <a-input-tag :default-value=\"['one']\" :style=\"{width:'320px'}\" placeholder=\"Please enter something\" :size=\"size\" allow-clear />\n  </a-space>\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n  setup() {\n    const size = ref('medium');\n\n    return {\n      size\n    }\n  },\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/input-tag/__demo__/status.md",
    "content": "```yaml\ntitle:\n  zh-CN: 输入框状态\n  en-US: Status\n```\n\n## zh-CN\n\n输入框有禁用、只读和错误三种状态。\n\n---\n\n## en-US\n\nThe input box has three states: disabled, readonly and error.\n\n---\n\n```vue\n<template>\n  <a-space direction=\"vertical\" size=\"large\">\n    <a-input-tag :default-value=\"['test']\" :style=\"{width:'320px'}\" placeholder=\"Please Enter\" disabled/>\n    <a-input-tag :default-value=\"['test']\" :style=\"{width:'320px'}\" placeholder=\"Please Enter\" readonly/>\n    <a-input-tag :default-value=\"['test']\" :style=\"{width:'320px'}\" placeholder=\"Please Enter\" error/>\n  </a-space>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/input-tag/__test__/__snapshots__/demo.test.ts.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`<input-tag> demo: render [basic] correctly 1`] = `\n\"<span class=\\\\\"arco-input-tag arco-input-tag-size-medium arco-input-tag-has-tag arco-input-tag-has-suffix\\\\\" style=\\\\\"width: 320px;\\\\\"><span class=\\\\\"arco-input-tag-mirror\\\\\"></span>\n<!---->\n<transition-group-stub tag=\\\\\"span\\\\\" name=\\\\\"input-tag-zoom\\\\\" appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\" class=\\\\\"arco-input-tag-inner\\\\\"><span class=\\\\\"arco-tag arco-tag-size-medium arco-tag-checked arco-input-tag-tag\\\\\"><!--v-if-->test<span class=\\\\\"arco-icon-hover arco-tag-icon-hover arco-tag-close-btn\\\\\" role=\\\\\"button\\\\\" aria-label=\\\\\"Close\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-close\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M9.857 9.858 24 24m0 0 14.142 14.142M24 24 38.142 9.858M24 24 9.857 38.142\\\\\"></path></svg></span>\n  <!--v-if--></span><input class=\\\\\"arco-input-tag-input\\\\\" style=\\\\\"width: 12px;\\\\\">\n</transition-group-stub><span class=\\\\\"arco-icon-hover arco-input-tag-clear-btn\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-close\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M9.857 9.858 24 24m0 0 14.142 14.142M24 24 38.142 9.858M24 24 9.857 38.142\\\\\"></path></svg></span>\n<!----></span>\"\n`;\n\nexports[`<input-tag> demo: render [max] correctly 1`] = `\n\"<span class=\\\\\"arco-input-tag arco-input-tag-size-medium arco-input-tag-has-tag arco-input-tag-has-suffix\\\\\" style=\\\\\"width: 380px;\\\\\"><span class=\\\\\"arco-input-tag-mirror\\\\\"></span>\n<!---->\n<transition-group-stub tag=\\\\\"span\\\\\" name=\\\\\"input-tag-zoom\\\\\" appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\" class=\\\\\"arco-input-tag-inner\\\\\"><span class=\\\\\"arco-tag arco-tag-size-medium arco-tag-checked arco-input-tag-tag\\\\\"><!--v-if-->one<span class=\\\\\"arco-icon-hover arco-tag-icon-hover arco-tag-close-btn\\\\\" role=\\\\\"button\\\\\" aria-label=\\\\\"Close\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-close\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M9.857 9.858 24 24m0 0 14.142 14.142M24 24 38.142 9.858M24 24 9.857 38.142\\\\\"></path></svg></span>\n  <!--v-if--></span><span class=\\\\\"arco-tag arco-tag-size-medium arco-tag-checked arco-input-tag-tag\\\\\"><!--v-if-->two<span class=\\\\\"arco-icon-hover arco-tag-icon-hover arco-tag-close-btn\\\\\" role=\\\\\"button\\\\\" aria-label=\\\\\"Close\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-close\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M9.857 9.858 24 24m0 0 14.142 14.142M24 24 38.142 9.858M24 24 9.857 38.142\\\\\"></path></svg></span>\n  <!--v-if--></span><span class=\\\\\"arco-tag arco-tag-size-medium arco-tag-checked arco-input-tag-tag\\\\\"><!--v-if-->three<span class=\\\\\"arco-icon-hover arco-tag-icon-hover arco-tag-close-btn\\\\\" role=\\\\\"button\\\\\" aria-label=\\\\\"Close\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-close\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M9.857 9.858 24 24m0 0 14.142 14.142M24 24 38.142 9.858M24 24 9.857 38.142\\\\\"></path></svg></span>\n  <!--v-if--></span><span class=\\\\\"arco-tag arco-tag-size-medium arco-tag-checked arco-input-tag-tag\\\\\"><!--v-if-->+1...<!--v-if--><!--v-if--></span><input class=\\\\\"arco-input-tag-input\\\\\" style=\\\\\"width: 12px;\\\\\">\n</transition-group-stub><span class=\\\\\"arco-icon-hover arco-input-tag-clear-btn\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-close\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M9.857 9.858 24 24m0 0 14.142 14.142M24 24 38.142 9.858M24 24 9.857 38.142\\\\\"></path></svg></span>\n<!----></span>\"\n`;\n\nexports[`<input-tag> demo: render [size] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-vertical\\\\\" style=\\\\\"column-gap: 24px; row-gap: 24px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-radio-group-button arco-radio-group-size-medium arco-radio-group-direction-horizontal\\\\\"><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"mini\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">mini</span></label><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"small\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">small</span></label><label class=\\\\\"arco-radio-button arco-radio-checked\\\\\"><input type=\\\\\"radio\\\\\" checked=\\\\\"\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"medium\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">medium</span></label><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"large\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">large</span></label></span></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-input-tag arco-input-tag-size-medium arco-input-tag-has-tag arco-input-tag-has-suffix\\\\\" style=\\\\\"width: 320px;\\\\\"><span class=\\\\\"arco-input-tag-mirror\\\\\"></span>\n    <!---->\n    <transition-group-stub tag=\\\\\"span\\\\\" name=\\\\\"input-tag-zoom\\\\\" appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\" class=\\\\\"arco-input-tag-inner\\\\\"><span class=\\\\\"arco-tag arco-tag-size-medium arco-tag-checked arco-input-tag-tag\\\\\"><!--v-if-->one<span class=\\\\\"arco-icon-hover arco-tag-icon-hover arco-tag-close-btn\\\\\" role=\\\\\"button\\\\\" aria-label=\\\\\"Close\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-close\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M9.857 9.858 24 24m0 0 14.142 14.142M24 24 38.142 9.858M24 24 9.857 38.142\\\\\"></path></svg></span>\n      <!--v-if--></span><input class=\\\\\"arco-input-tag-input\\\\\" style=\\\\\"width: 12px;\\\\\">\n    </transition-group-stub><span class=\\\\\"arco-icon-hover arco-input-tag-clear-btn\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-close\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M9.857 9.858 24 24m0 0 14.142 14.142M24 24 38.142 9.858M24 24 9.857 38.142\\\\\"></path></svg></span>\n    <!----></span>\n  </div>\n</div>\"\n`;\n\nexports[`<input-tag> demo: render [status] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-vertical\\\\\" style=\\\\\"column-gap: 24px; row-gap: 24px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-input-tag arco-input-tag-size-medium arco-input-tag-disabled arco-input-tag-has-tag\\\\\" style=\\\\\"width: 320px;\\\\\"><span class=\\\\\"arco-input-tag-mirror\\\\\"></span>\n    <!---->\n    <transition-group-stub tag=\\\\\"span\\\\\" name=\\\\\"input-tag-zoom\\\\\" appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\" class=\\\\\"arco-input-tag-inner\\\\\"><span class=\\\\\"arco-tag arco-tag-size-medium arco-tag-checked arco-input-tag-tag\\\\\"><!--v-if-->test<!--v-if--><!--v-if--></span><input class=\\\\\"arco-input-tag-input\\\\\" style=\\\\\"width: 12px;\\\\\" disabled=\\\\\"\\\\\"></transition-group-stub>\n    <!---->\n    <!----></span>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-input-tag arco-input-tag-size-medium arco-input-tag-readonly arco-input-tag-has-tag\\\\\" style=\\\\\"width: 320px;\\\\\"><span class=\\\\\"arco-input-tag-mirror\\\\\"></span>\n    <!---->\n    <transition-group-stub tag=\\\\\"span\\\\\" name=\\\\\"input-tag-zoom\\\\\" appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\" class=\\\\\"arco-input-tag-inner\\\\\"><span class=\\\\\"arco-tag arco-tag-size-medium arco-tag-checked arco-input-tag-tag\\\\\"><!--v-if-->test<!--v-if--><!--v-if--></span><input class=\\\\\"arco-input-tag-input\\\\\" style=\\\\\"width: 12px;\\\\\" readonly=\\\\\"\\\\\"></transition-group-stub>\n    <!---->\n    <!----></span>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-input-tag arco-input-tag-size-medium arco-input-tag-error arco-input-tag-has-tag\\\\\" style=\\\\\"width: 320px;\\\\\"><span class=\\\\\"arco-input-tag-mirror\\\\\"></span>\n    <!---->\n    <transition-group-stub tag=\\\\\"span\\\\\" name=\\\\\"input-tag-zoom\\\\\" appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\" class=\\\\\"arco-input-tag-inner\\\\\"><span class=\\\\\"arco-tag arco-tag-size-medium arco-tag-checked arco-input-tag-tag\\\\\"><!--v-if-->test<span class=\\\\\"arco-icon-hover arco-tag-icon-hover arco-tag-close-btn\\\\\" role=\\\\\"button\\\\\" aria-label=\\\\\"Close\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-close\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M9.857 9.858 24 24m0 0 14.142 14.142M24 24 38.142 9.858M24 24 9.857 38.142\\\\\"></path></svg></span>\n      <!--v-if--></span><input class=\\\\\"arco-input-tag-input\\\\\" style=\\\\\"width: 12px;\\\\\">\n    </transition-group-stub>\n    <!---->\n    <!----></span>\n  </div>\n</div>\"\n`;\n"
  },
  {
    "path": "packages/web-vue/components/input-tag/__test__/demo.test.ts",
    "content": "import demoTest from '../../../scripts/demo-test';\n\ndemoTest('input-tag');\n"
  },
  {
    "path": "packages/web-vue/components/input-tag/__test__/index.test.ts",
    "content": "import { mount } from '@vue/test-utils';\nimport InputTag from '../index';\n\ndescribe('InputTag', () => {\n  test('should emit change event', () => {\n    const wrapper = mount(InputTag);\n    const input = wrapper.find('input');\n\n    input.setValue('test');\n    input.trigger('keydown', { key: 'Enter' });\n    const emits = wrapper.emitted('change');\n    expect(emits).toHaveLength(1);\n\n    // @ts-ignore\n    expect(emits?.[0][0][0]).toEqual('test');\n  });\n\n  test('should clear content', async () => {\n    const wrapper = mount(InputTag, {\n      props: {\n        defaultValue: ['test', 'test-2', 'test-3'],\n        allowClear: true,\n      },\n    });\n    const tags = wrapper.findAllComponents({ name: 'Tag' });\n    expect(tags).toHaveLength(3);\n    await tags[1].find('.arco-tag-close-btn').trigger('click');\n    expect(wrapper.emitted('remove')).toHaveLength(1);\n    await wrapper.find('.arco-input-tag-clear-btn').trigger('click');\n    expect(wrapper.emitted('clear')).toHaveLength(1);\n  });\n});\n"
  },
  {
    "path": "packages/web-vue/components/input-tag/index.ts",
    "content": "import type { App } from 'vue';\nimport type { ArcoOptions } from '../_utils/types';\nimport { setGlobalConfig, getComponentPrefix } from '../_utils/global-config';\nimport _InputTag from './input-tag';\n\nconst InputTag = Object.assign(_InputTag, {\n  install: (app: App, options?: ArcoOptions) => {\n    setGlobalConfig(app, options);\n    const componentPrefix = getComponentPrefix(options);\n\n    app.component(componentPrefix + _InputTag.name, _InputTag);\n  },\n});\n\nexport type InputTagInstance = InstanceType<typeof _InputTag>;\nexport type { TagData, InputTagFieldNames } from './interface';\n\nexport default InputTag;\n"
  },
  {
    "path": "packages/web-vue/components/input-tag/input-tag.tsx",
    "content": "import type { PropType } from 'vue';\nimport {\n  computed,\n  defineComponent,\n  reactive,\n  ref,\n  watch,\n  onMounted,\n  TransitionGroup,\n  toRefs,\n  nextTick,\n} from 'vue';\nimport { getPrefixCls } from '../_utils/global-config';\nimport { INPUT_EVENTS, Size } from '../_utils/constant';\nimport { Backspace, Enter } from '../_utils/keycode';\nimport { getValueData } from './utils';\nimport Tag from '../tag';\nimport IconHover from '../_components/icon-hover.vue';\nimport IconClose from '../icon/icon-close';\nimport { InputTagFieldNames, TagData } from './interface';\nimport { omit } from '../_utils/omit';\nimport pick from '../_utils/pick';\nimport ResizeObserver from '../_components/resize-observer';\nimport FeedbackIcon from '../_components/feedback-icon.vue';\nimport { useFormItem } from '../_hooks/use-form-item';\nimport { useSize } from '../_hooks/use-size';\nimport { isNull, isObject, isUndefined } from '../_utils/is';\n\nconst DEFAULT_FIELD_NAMES = {\n  value: 'value',\n  label: 'label',\n  closable: 'closable',\n  tagProps: 'tagProps',\n};\n\nexport default defineComponent({\n  name: 'InputTag',\n  inheritAttrs: false,\n  props: {\n    /**\n     * @zh 绑定值\n     * @en Value\n     * @vModel\n     */\n    modelValue: {\n      type: Array as PropType<(string | number | TagData)[]>,\n    },\n    /**\n     * @zh 默认值（非受控状态）\n     * @en Default value (uncontrolled state)\n     */\n    defaultValue: {\n      type: Array as PropType<(string | number | TagData)[]>,\n      default: () => [],\n    },\n    /**\n     * @zh 输入框的值\n     * @en The value of the input\n     * @vModel\n     */\n    inputValue: String,\n    /**\n     * @zh 输入框的默认值（非受控状态）\n     * @en The default value of the input (uncontrolled state)\n     */\n    defaultInputValue: {\n      type: String,\n      default: '',\n    },\n    /**\n     * @zh 占位符\n     * @en Placeholder\n     */\n    placeholder: String,\n    /**\n     * @zh 是否禁用\n     * @en Whether to disable\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 是否为错误状态\n     * @en Whether it is an error state\n     */\n    error: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 是否为只读模式\n     * @en Whether it is read-only mode\n     */\n    readonly: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 是否允许清空\n     * @en Whether to allow clear\n     */\n    allowClear: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 输入框的大小\n     * @en The size of the input\n     * @values 'mini','small','medium','large'\n     * @defaultValue 'medium'\n     */\n    size: {\n      type: String as PropType<Size>,\n    },\n    /**\n     * @zh 最多展示的标签个数，`0` 表示不限制\n     * @en The maximum number of tags displayed, `0` means unlimited\n     */\n    maxTagCount: {\n      type: Number,\n      default: 0,\n    },\n    /**\n     * @zh 是否保留输入框的内容\n     * @en Whether to keep the content of the input box\n     */\n    retainInputValue: {\n      type: [Boolean, Object] as PropType<\n        boolean | { create?: boolean; blur?: boolean }\n      >,\n      default: false,\n    },\n    /**\n     * @zh 格式化标签内容\n     * @en Format tag content\n     */\n    formatTag: {\n      type: Function as PropType<(data: TagData) => string>,\n    },\n    /**\n     * @zh 是否仅创建唯一的值\n     * @en Whether to create only unique values\n     * @version 2.15.0\n     */\n    uniqueValue: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 自定义 `TagData` 中的字段\n     * @en Customize fields in `TagData`\n     * @version 2.22.0\n     */\n    fieldNames: {\n      type: Object as PropType<InputTagFieldNames>,\n    },\n    /**\n     * @zh 标签内容不换行\n     * @en Tag content does not wrap\n     * @version 2.56.1\n     */\n    tagNowrap: {\n      type: Boolean,\n      default: false,\n    },\n    // private\n    baseCls: String,\n    focused: Boolean,\n    disabledInput: Boolean,\n    uninjectFormItemContext: Boolean,\n  },\n  emits: {\n    'update:modelValue': (value: (string | number | TagData)[]) => true,\n    'update:inputValue': (inputValue: string) => true,\n    /**\n     * @zh 值发生改变时触发\n     * @en Triggered when the value changes\n     * @param {(string | number | TagData)[]} value\n     * @param {Event} ev\n     */\n    'change': (value: (string | number | TagData)[], ev: Event) => true,\n    /**\n     * @zh 输入值发生改变时触发\n     * @en Trigger when the input value changes\n     * @param {string} inputValue\n     * @param {Event} ev\n     */\n    'inputValueChange': (inputValue: string, ev: Event) => true,\n    /**\n     * @zh 按下回车键时触发\n     * @en Triggered when the enter key is pressed\n     * @param {string} inputValue\n     * @param {KeyboardEvent} ev\n     */\n    'pressEnter': (inputValue: string, ev: KeyboardEvent) => true,\n    /**\n     * @zh 点击标签的删除按钮时触发\n     * @en Triggered when the delete button of the label is clicked\n     * @param {string | number} removed\n     * @param {Event} ev\n     */\n    'remove': (removed: string | number, ev: Event) => true,\n    /**\n     * @zh 点击清除按钮时触发\n     * @en Triggered when the clear button is clicked\n     * @param {MouseEvent} ev\n     */\n    'clear': (ev: MouseEvent) => true,\n    /**\n     * @zh 输入框获取焦点时触发\n     * @en Triggered when the input box gets focus\n     * @param {FocusEvent} ev\n     */\n    'focus': (ev: FocusEvent) => true,\n    /**\n     * @zh 输入框失去焦点时触发\n     * @en Triggered when the input box loses focus\n     * @param {FocusEvent} ev\n     */\n    'blur': (ev: FocusEvent) => true,\n  },\n  /**\n   * @zh 后缀元素\n   * @en Suffix\n   * @slot suffix\n   */\n  /**\n   * @zh 前缀元素\n   * @en Prefix\n   * @slot prefix\n   */\n  /**\n   * @zh 输入框标签的显示内容\n   * @en Display content of tag\n   * @slot tag\n   * @binding {TagData} data\n   */\n  setup(props, { emit, slots, attrs }) {\n    const { size, disabled, error, uninjectFormItemContext, modelValue } =\n      toRefs(props);\n    const prefixCls = props.baseCls || getPrefixCls('input-tag');\n    const inputRef = ref<HTMLInputElement>();\n    const mirrorRef = ref<HTMLElement>();\n    const {\n      mergedSize: _mergedSize,\n      mergedDisabled,\n      mergedError,\n      feedback,\n      eventHandlers,\n    } = useFormItem({\n      size,\n      disabled,\n      error,\n      uninject: uninjectFormItemContext?.value,\n    });\n    const { mergedSize } = useSize(_mergedSize);\n    const mergedFieldNames = computed(() => ({\n      ...DEFAULT_FIELD_NAMES,\n      ...props.fieldNames,\n    }));\n\n    const _focused = ref(false);\n    const _value = ref(props.defaultValue);\n    const _inputValue = ref(props.defaultInputValue);\n    const isComposition = ref(false);\n    const compositionValue = ref('');\n\n    const retainInputValue = computed(() => {\n      if (isObject(props.retainInputValue)) {\n        return {\n          create: false,\n          blur: false,\n          ...props.retainInputValue,\n        };\n      }\n      return {\n        create: props.retainInputValue,\n        blur: props.retainInputValue,\n      };\n    });\n\n    const inputStyle = reactive({\n      width: '12px',\n    });\n\n    const mergedFocused = computed(() => props.focused || _focused.value);\n\n    const updateInputValue = (value: string, ev: Event) => {\n      _inputValue.value = value;\n      emit('update:inputValue', value);\n      emit('inputValueChange', value, ev);\n    };\n\n    const handleComposition = (ev: CompositionEvent) => {\n      const { value } = ev.target as HTMLInputElement;\n\n      if (ev.type === 'compositionend') {\n        isComposition.value = false;\n        compositionValue.value = '';\n        updateInputValue(value, ev);\n\n        nextTick(() => {\n          if (\n            inputRef.value &&\n            computedInputValue.value !== inputRef.value.value\n          ) {\n            inputRef.value.value = computedInputValue.value;\n          }\n        });\n      } else {\n        isComposition.value = true;\n        compositionValue.value = computedInputValue.value + (ev.data ?? '');\n      }\n    };\n\n    const computedValue = computed(() => props.modelValue ?? _value.value);\n    const computedInputValue = computed(\n      () => props.inputValue ?? _inputValue.value\n    );\n\n    watch(modelValue, (value) => {\n      if (isUndefined(value) || isNull(value)) {\n        _value.value = [];\n      }\n    });\n\n    const handleMousedown = (e: MouseEvent) => {\n      if (inputRef.value && e.target !== inputRef.value) {\n        e.preventDefault();\n        inputRef.value.focus();\n      }\n    };\n\n    const handleInput = (ev: Event) => {\n      const { value } = ev.target as HTMLInputElement;\n\n      if (!isComposition.value) {\n        updateInputValue(value, ev);\n\n        nextTick(() => {\n          if (\n            inputRef.value &&\n            computedInputValue.value !== inputRef.value.value\n          ) {\n            inputRef.value.value = computedInputValue.value;\n          }\n        });\n      }\n    };\n\n    const valueData = computed(() =>\n      getValueData(computedValue.value, mergedFieldNames.value)\n    );\n\n    const tags = computed(() => {\n      if (props.maxTagCount > 0) {\n        const invisibleTags = valueData.value.length - props.maxTagCount;\n        if (invisibleTags > 0) {\n          const result = valueData.value.slice(0, props.maxTagCount);\n          const raw = {\n            value: '__arco__more',\n            label: `+${invisibleTags}...`,\n            closable: false,\n          };\n          result.push({\n            raw,\n            ...raw,\n          });\n          return result;\n        }\n      }\n      return valueData.value;\n    });\n\n    const updateValue = (value: (string | number | TagData)[], ev: Event) => {\n      _value.value = value;\n      emit('update:modelValue', value);\n      emit('change', value, ev);\n      eventHandlers.value?.onChange?.(ev);\n    };\n\n    const handleRemove = (value: string | number, index: number, e: Event) => {\n      const newValue = computedValue.value?.filter((_, i) => i !== index);\n      updateValue(newValue, e);\n      emit('remove', value, e);\n    };\n\n    const handleClear = (e: MouseEvent) => {\n      const newValue: any[] = [];\n      updateValue(newValue, e);\n      emit('clear', e);\n    };\n\n    const showClearBtn = computed(\n      () =>\n        !mergedDisabled.value &&\n        !props.readonly &&\n        props.allowClear &&\n        Boolean(computedValue.value.length)\n    );\n\n    const handlePressEnter = (e: KeyboardEvent) => {\n      if (computedInputValue.value) {\n        e.preventDefault();\n        if (\n          props.uniqueValue &&\n          computedValue.value?.includes(computedInputValue.value)\n        ) {\n          emit('pressEnter', computedInputValue.value, e);\n          return;\n        }\n        const newValue = computedValue.value.concat(computedInputValue.value);\n        updateValue(newValue, e);\n        emit('pressEnter', computedInputValue.value, e);\n        if (!retainInputValue.value.create) {\n          updateInputValue('', e);\n        }\n      }\n    };\n\n    const handleFocus = (ev: FocusEvent) => {\n      _focused.value = true;\n      emit('focus', ev);\n      eventHandlers.value?.onFocus?.(ev);\n    };\n\n    const handleBlur = (ev: FocusEvent) => {\n      _focused.value = false;\n      if (!retainInputValue.value.blur && computedInputValue.value) {\n        updateInputValue('', ev);\n      }\n      emit('blur', ev);\n      eventHandlers.value?.onBlur?.(ev);\n    };\n\n    const getLastClosableIndex = () => {\n      for (let i = valueData.value.length - 1; i >= 0; i--) {\n        if (valueData.value[i].closable) {\n          return i;\n        }\n      }\n      return -1;\n    };\n\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (mergedDisabled.value || props.readonly) {\n        return;\n      }\n      const keyCode = e.key || e.code;\n      if (\n        !isComposition.value &&\n        computedInputValue.value &&\n        keyCode === Enter.key\n      ) {\n        handlePressEnter(e);\n      }\n      if (\n        !isComposition.value &&\n        tags.value.length > 0 &&\n        !computedInputValue.value &&\n        keyCode === Backspace.key\n      ) {\n        const lastIndex = getLastClosableIndex();\n        if (lastIndex >= 0) {\n          handleRemove(valueData.value[lastIndex].value, lastIndex, e);\n        }\n      }\n    };\n\n    const setInputWidth = (width: number) => {\n      if (width > 12) {\n        inputStyle.width = `${width}px`;\n      } else {\n        inputStyle.width = '12px';\n      }\n    };\n\n    onMounted(() => {\n      if (mirrorRef.value) {\n        setInputWidth(mirrorRef.value.offsetWidth);\n      }\n    });\n\n    const handleResize = () => {\n      if (mirrorRef.value) {\n        setInputWidth(mirrorRef.value.offsetWidth);\n      }\n    };\n\n    watch(computedInputValue, (value) => {\n      if (\n        inputRef.value &&\n        !isComposition.value &&\n        value !== inputRef.value.value\n      ) {\n        inputRef.value.value = value;\n      }\n    });\n\n    const cls = computed(() => [\n      prefixCls,\n      `${prefixCls}-size-${mergedSize.value}`,\n      {\n        [`${prefixCls}-disabled`]: mergedDisabled.value,\n        [`${prefixCls}-disabled-input`]: props.disabledInput,\n        [`${prefixCls}-error`]: mergedError.value,\n        [`${prefixCls}-focus`]: mergedFocused.value,\n        [`${prefixCls}-readonly`]: props.readonly,\n        [`${prefixCls}-has-tag`]: tags.value.length > 0,\n        [`${prefixCls}-has-prefix`]: Boolean(slots.prefix),\n        [`${prefixCls}-has-suffix`]:\n          Boolean(slots.suffix) || showClearBtn.value || feedback.value,\n        [`${prefixCls}-has-placeholder`]: !computedValue.value.length,\n      },\n    ]);\n\n    const wrapperAttrs = computed(() => omit(attrs, INPUT_EVENTS));\n    const inputAttrs = computed(() => pick(attrs, INPUT_EVENTS));\n\n    const render = () => (\n      <span\n        class={cls.value}\n        onMousedown={handleMousedown}\n        {...wrapperAttrs.value}\n      >\n        <ResizeObserver onResize={handleResize}>\n          <span ref={mirrorRef} class={`${prefixCls}-mirror`}>\n            {tags.value.length > 0\n              ? compositionValue.value || computedInputValue.value\n              : compositionValue.value ||\n                computedInputValue.value ||\n                props.placeholder}\n          </span>\n        </ResizeObserver>\n        {slots.prefix && (\n          <span class={`${prefixCls}-prefix`}>{slots.prefix()}</span>\n        )}\n        <TransitionGroup\n          tag=\"span\"\n          name=\"input-tag-zoom\"\n          // @ts-ignore\n          class={[\n            `${prefixCls}-inner`,\n            {\n              [`${prefixCls}-nowrap`]: props.tagNowrap,\n            },\n          ]}\n        >\n          {tags.value.map((item, index) => (\n            <Tag\n              key={`tag-${item.value}`}\n              class={`${prefixCls}-tag`}\n              closable={\n                !mergedDisabled.value && !props.readonly && item.closable\n              }\n              visible\n              nowrap={props.tagNowrap}\n              {...item.tagProps}\n              onClose={(ev: MouseEvent) => handleRemove(item.value, index, ev)}\n            >\n              {slots.tag?.({ data: item.raw }) ??\n                props.formatTag?.(item.raw) ??\n                item.label}\n            </Tag>\n          ))}\n          <input\n            {...inputAttrs.value}\n            ref={inputRef}\n            key=\"input-tag-input\"\n            class={`${prefixCls}-input`}\n            style={inputStyle}\n            placeholder={\n              tags.value.length === 0 ? props.placeholder : undefined\n            }\n            disabled={mergedDisabled.value}\n            readonly={props.readonly || props.disabledInput}\n            onInput={handleInput}\n            onKeydown={handleKeyDown}\n            onFocus={handleFocus}\n            onBlur={handleBlur}\n            onCompositionstart={handleComposition}\n            onCompositionupdate={handleComposition}\n            onCompositionend={handleComposition}\n          />\n        </TransitionGroup>\n        {showClearBtn.value && (\n          <IconHover\n            class={`${prefixCls}-clear-btn`}\n            // @ts-ignore\n            onClick={handleClear}\n            onMousedown={(e: MouseEvent) => e.stopPropagation()}\n          >\n            <IconClose />\n          </IconHover>\n        )}\n        {(slots.suffix || Boolean(feedback.value)) && (\n          <span class={`${prefixCls}-suffix`}>\n            {slots.suffix?.()}\n            {Boolean(feedback.value) && <FeedbackIcon type={feedback.value} />}\n          </span>\n        )}\n      </span>\n    );\n\n    return {\n      inputRef,\n      render,\n    };\n  },\n  methods: {\n    /**\n     * @zh 使输入框获取焦点\n     * @en Make the input box focus\n     * @public\n     */\n    focus() {\n      (this.inputRef as HTMLInputElement)?.focus();\n    },\n    /**\n     * @zh 使输入框失去焦点\n     * @en Make the input box lose focus\n     * @public\n     */\n    blur() {\n      (this.inputRef as HTMLInputElement)?.blur();\n    },\n  },\n  render() {\n    return this.render();\n  },\n});\n"
  },
  {
    "path": "packages/web-vue/components/input-tag/interface.ts",
    "content": "import { TagProps } from '../tag';\nimport { FieldString } from '../_utils/types';\n\nexport interface TagData {\n  /**\n   * @zh 标签值\n   * @en Tag value\n   */\n  value?: string | number;\n  /**\n   * @zh 标签内容\n   * @en Tag content\n   */\n  label?: string;\n  /**\n   * @zh 是否可关闭\n   * @en Whether to close\n   */\n  closable?: boolean;\n  /**\n   * @zh 标签属性\n   * @en Tag props\n   */\n  tagProps?: TagProps;\n\n  [other: string]: any;\n}\n\nexport type InputTagFieldNames = FieldString<TagData>;\n\nexport interface TagDataInfo extends TagData {\n  raw: Record<string, unknown>;\n  value: string | number;\n  label: string;\n  closable: boolean;\n}\n"
  },
  {
    "path": "packages/web-vue/components/input-tag/style/index.less",
    "content": "@import './input-tag.less';\n\n@input-tag-prefix-cls: ~'@{prefix}-input-tag';\n\n.@{input-tag-prefix-cls} {\n  .input-tag-style(@input-tag-prefix-cls);\n}\n\n.input-tag-zoom-enter-from {\n  transform: scale(0.5, 0.5);\n  opacity: 0;\n}\n\n.input-tag-zoom-enter-to {\n  transform: scale(1, 1);\n  opacity: 1;\n}\n\n.input-tag-zoom-enter-active {\n  transition: all @transition-duration-3 @transition-timing-function-standard;\n}\n\n.input-tag-zoom-leave-from {\n  transform: scale(1, 1);\n  opacity: 1;\n}\n\n.input-tag-zoom-leave-to {\n  transform: scale(0.5, 0.5);\n  opacity: 0;\n}\n\n.input-tag-zoom-leave-active {\n  position: absolute;\n  transition: all @transition-duration-3 @transition-timing-function-overshoot;\n}\n\n.input-tag-zoom-move {\n  transition: all @transition-duration-3 @transition-timing-function-overshoot;\n}\n"
  },
  {
    "path": "packages/web-vue/components/input-tag/style/index.ts",
    "content": "import '../../style/index.less';\nimport '../../tag/style';\nimport './index.less';\n"
  },
  {
    "path": "packages/web-vue/components/input-tag/style/input-tag.less",
    "content": "@import '../../style/mixins/index.less';\n@import '../../input/style/token.less';\n@import '../../input/style/input.less';\n@import '../../tag/style/index.less';\n@import './token.less';\n\n.input-tag-style(@cls) {\n  .input-wrapper-style(@cls);\n\n  &.@{cls}-has-tag {\n    padding-right: @input-tag-padding-horizontal;\n    padding-left: @input-tag-padding-horizontal;\n  }\n\n  &.@{cls}-has-prefix {\n    padding-left: @input-padding-horizontal;\n  }\n\n  &.@{cls}-has-suffix {\n    padding-right: @input-padding-horizontal;\n  }\n\n  .@{cls}-inner {\n    flex: 1;\n    overflow: hidden;\n    line-height: 0;\n\n    &.@{cls}-nowrap {\n      display: flex;\n      flex-wrap: wrap;\n    }\n\n    .@{cls}-tag {\n      display: inline-flex;\n      align-items: center;\n      margin-right: @input-tag-tag-margin-right;\n      color: @input-tag-color-text_default;\n      font-size: @input-tag-tag-font-size;\n      white-space: pre-wrap;\n      word-break: break-word;\n      background-color: @input-tag-tag-color-bg;\n      border-color: @input-tag-tag-color-border;\n\n      .@{prefix}-icon-hover:hover::before {\n        background-color: @input-tag-tag-remove-icon-color-bg;\n      }\n\n      &.@{prefix}-tag-custom-color {\n        color: @tag-custom-color-text;\n\n        .icon-hover-bg(@tag-prefix-cls, @tag-custom-color-icon-bg_hover);\n      }\n    }\n\n    .@{cls}-input {\n      .input-style();\n\n      box-sizing: border-box;\n    }\n  }\n\n  .@{cls}-mirror {\n    position: absolute;\n    top: 0;\n    left: 0;\n    white-space: pre;\n    visibility: hidden;\n    pointer-events: none;\n  }\n\n  &.@{cls}-focus {\n    .@{cls}-tag {\n      background-color: @input-tag-tag-color-bg_focus;\n      border-color: @input-tag-tag-color-border_focus;\n\n      .@{prefix}-icon-hover:hover::before {\n        background-color: @input-tag-tag-remove-icon-color-bg_focus;\n      }\n    }\n  }\n\n  &.@{cls}-disabled {\n    .@{cls}-tag {\n      color: @input-tag-color-text_disabled;\n      background-color: @input-tag-tag-color-bg_disabled;\n      border-color: @input-tag-tag-color-border_disabled;\n    }\n  }\n\n  &.@{cls}-readonly,\n  &.@{cls}-disabled-input {\n    cursor: default;\n  }\n\n  .size(@size) {\n    &.@{cls}-size-@{size} {\n      @font-size: ~'input-tag-size-@{size}-font-size';\n      @height: ~'input-tag-size-@{size}-height';\n      @tag-height: ~'input-tag-size-@{size}-tag-height';\n\n      font-size: @@font-size;\n\n      .@{cls}-inner {\n        padding-top: (@@height / 2) - (@@tag-height / 2) -\n          @input-tag-border-width - (@input-tag-tag-margin-vertical / 2);\n        padding-bottom: $padding-top;\n      }\n\n      .@{cls}-tag,\n      .@{cls}-input {\n        margin-top: (@input-tag-tag-margin-vertical / 2);\n        margin-bottom: $margin-top;\n        line-height: @@tag-height - 2;\n        vertical-align: middle;\n      }\n\n      .@{cls}-tag,\n      .@{cls}-input {\n        height: auto;\n        min-height: @@tag-height;\n      }\n    }\n  }\n\n  .size(mini);\n  .size(medium);\n  .size(small);\n  .size(large);\n}\n"
  },
  {
    "path": "packages/web-vue/components/input-tag/style/token.less",
    "content": "@import '../../style/theme/index.less';\n\n/**********************************************\n * size: mini / small / default / large\n **********************************************/\n@input-tag-size-mini-height: @size-mini;\n@input-tag-size-small-height: @size-small;\n@input-tag-size-default-height: @size-default;\n@input-tag-size-large-height: @size-large;\n\n@input-tag-size-mini-tag-height: @size-5;\n@input-tag-size-small-tag-height: @size-5;\n@input-tag-size-default-tag-height: @size-6;\n@input-tag-size-large-tag-height: @size-7;\n\n@input-tag-size-mini-font-size: @font-size-body-1;\n@input-tag-size-small-font-size: @font-size-body-3;\n@input-tag-size-default-font-size: @font-size-body-3;\n@input-tag-size-large-font-size: @font-size-body-3;\n\n/****************************************************\n * status: default / error / disabled _ (hover / focus)\n ****************************************************/\n// text color\n@input-tag-color-text_default: var(~'@{arco-cssvars-prefix}-color-text-1');\n@input-tag-color-text_error: var(~'@{arco-cssvars-prefix}-color-text-1');\n@input-tag-color-text_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');\n\n// icon color\n@input-tag-color-placeholder: var(~'@{arco-cssvars-prefix}-color-text-3');\n@input-tag-color-icon-clear: var(~'@{arco-cssvars-prefix}-color-text-2');\n@input-tag-color-icon-clear-bg_hover: var(~'@{arco-cssvars-prefix}-color-fill-4');\n\n// border color with focus & hover\n@input-tag-color-border_default: @color-transparent;\n@input-tag-color-border_default_hover: @color-transparent;\n@input-tag-color-border_default_focus: @color-primary-6;\n@input-tag-color-border_error: @color-transparent;\n@input-tag-color-border_error_hover: @color-transparent;\n@input-tag-color-border_error_focus: @color-danger-6;\n@input-tag-color-border_disabled: @color-transparent;\n@input-tag-color-border_disabled_hover: @input-tag-color-border_disabled;\n@input-tag-color-border_disabled_focus: @input-tag-color-border_disabled;\n\n// bg color with focus & hover\n@input-tag-color-bg_default: var(~'@{arco-cssvars-prefix}-color-fill-2');\n@input-tag-color-bg_default_hover: var(~'@{arco-cssvars-prefix}-color-fill-3');\n@input-tag-color-bg_default_focus: var(~'@{arco-cssvars-prefix}-color-bg-2');\n@input-tag-color-bg_error: @color-danger-1;\n@input-tag-color-bg_error_hover: @color-danger-2;\n@input-tag-color-bg_error_focus: var(~'@{arco-cssvars-prefix}-color-bg-2');\n@input-tag-color-bg_disabled: var(~'@{arco-cssvars-prefix}-color-fill-2');\n@input-tag-color-bg_disabled_hover: @input-tag-color-bg_disabled;\n\n@input-tag-color-shadow_default_focus: @color-primary-2;\n@input-tag-color-shadow_error_focus: @color-danger-2;\n@input-tag-size-shadow_error_focus: @shadow-distance-none;\n@input-tag-size-shadow_default_focus: @shadow-distance-none;\n\n// input box\n@input-tag-tag-margin-right: @spacing-2;\n@input-tag-tag-margin-vertical: @spacing-1;\n@input-tag-padding-horizontal: @spacing-2;\n@input-tag-border-radius: @radius-small;\n@input-tag-border-width: @border-1;\n@input-tag-size-icon-clear: @size-3;\n@input-tag-size-icon-clear_hover: @size-5;\n\n// tags\n@input-tag-tag-font-size: @font-size-body-1;\n@input-tag-tag-color-bg: var(~'@{arco-cssvars-prefix}-color-bg-2');\n@input-tag-tag-color-bg_focus: var(~'@{arco-cssvars-prefix}-color-fill-2');\n@input-tag-tag-color-bg_disabled: var(~'@{arco-cssvars-prefix}-color-fill-2');\n@input-tag-tag-color-border: var(~'@{arco-cssvars-prefix}-color-fill-3');\n@input-tag-tag-color-border_disabled: var(~'@{arco-cssvars-prefix}-color-fill-3');\n@input-tag-tag-color-border_focus: var(~'@{arco-cssvars-prefix}-color-fill-2');\n@input-tag-tag-remove-icon-color-bg: var(~'@{arco-cssvars-prefix}-color-fill-2');\n@input-tag-tag-remove-icon-color-bg_focus: var(~'@{arco-cssvars-prefix}-color-fill-3');\n\n// vue overwrite token\n@input-tag-size-medium-height: @input-tag-size-default-height;\n@input-tag-size-medium-tag-height: @input-tag-size-default-tag-height;\n@input-tag-size-medium-font-size: @input-tag-size-default-font-size;\n"
  },
  {
    "path": "packages/web-vue/components/input-tag/utils.ts",
    "content": "import { isNumber, isObject } from '../_utils/is';\nimport { InputTagFieldNames, TagData, TagDataInfo } from './interface';\n\nexport const getValueData = (\n  value: Array<string | number | TagData>,\n  fieldNames: Required<InputTagFieldNames>\n): TagDataInfo[] => {\n  const result: TagDataInfo[] = [];\n  for (const item of value) {\n    if (isObject(item)) {\n      result.push({\n        raw: item,\n        value: item[fieldNames.value],\n        label: item[fieldNames.label],\n        closable: item[fieldNames.closable],\n        tagProps: item[fieldNames.tagProps],\n      });\n    } else if (value || isNumber(value)) {\n      const raw = {\n        value: item,\n        label: String(item),\n        closable: true,\n      };\n      result.push({\n        raw,\n        ...raw,\n      });\n    }\n  }\n  return result;\n};\n"
  },
  {
    "path": "packages/web-vue/components/layout/CHANGELOG.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.36.0\n\n`2022-09-02`\n\n### 🆎 TypeScript\n\n- Add ts type export ([#1571](https://github.com/arco-design/arco-design-vue/pull/1571))\n\n"
  },
  {
    "path": "packages/web-vue/components/layout/CHANGELOG.zh-CN.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.36.0\n\n`2022-09-02`\n\n### 🆎 类型修正\n\n- 增加 ts 类型导出 ([#1571](https://github.com/arco-design/arco-design-vue/pull/1571))\n\n"
  },
  {
    "path": "packages/web-vue/components/layout/README.en-US.md",
    "content": "```yaml\nmeta:\n  type: Component\n  category: Layout\ntitle: Layout\ndescription: The basic layout framework of the page is often used nested with components to construct the overall layout of the page.\n```\n\n*Auto translate by google.*\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/custom-icon.md\n\n@import ./__demo__/collapsed.md\n\n@import ./__demo__/breakpoint.md\n\n@import ./__demo__/resize.md\n\n## API\n\n\n### `<layout>` Props\n\n|Attribute|Description|Type|Default|\n|---|---|---|:---:|\n|has-sider|Indicates that there is a Sider in the sub-element, which generally does not need to be specified. Used to avoid style flicker when rendering on the server side.|`boolean`|`false`|\n\n\n\n\n### `<layout-header>` Slots\n\n|Slot Name|Description|Parameters|\n|---|---|---|\n|default|Content|-|\n\n\n\n\n### `<layout-content>` Slots\n\n|Slot Name|Description|Parameters|\n|---|---|---|\n|default|Content|-|\n\n\n\n\n### `<layout-footer>` Slots\n\n|Slot Name|Description|Parameters|\n|---|---|---|\n|default|Content|-|\n\n\n\n\n### `<layout-sider>` Props\n\n|Attribute|Description|Type|Default|\n|---|---|---|:---:|\n|theme|Theme|`'dark' \\| 'light'`|`'light'`|\n|collapsed|Current collapsed state|`boolean`|`-`|\n|default-collapsed|The default collapsed state|`boolean`|`false`|\n|collapsible|Whether is collapsible|`boolean`|`false`|\n|width|Width|`number`|`200`|\n|collapsed-width|Collapsed width|`number`|`48`|\n|reverse-arrow|Flip and fold the direction of the hint arrow, which can be used when Sider is on the right|`boolean`|`false`|\n|breakpoint|Trigger breakpoints for responsive layout, see [Responsive Grid](/vue/component/grid) for details|`'xxl' \\| 'xl' \\| 'lg' \\| 'md' \\| 'sm' \\| 'xs'`|`-`|\n|resize-directions|Can replace the native `aside` tag with ResizeBox. This is the `directions` parameter of ResizeBox. For details, please see [ResizeBox](/vue/component/resize-box)|`Array<'left' \\| 'right' \\| 'top' \\| 'bottom'>`|`-`|\n|hide-trigger|Whether to hide the bottom fold trigger|`boolean`|`false`|\n### `<layout-sider>` Events\n\n|Event Name|Description|Parameters|\n|---|---|---|\n|collapse|Events on expand/collapse. There are two ways to trigger click trigger and responsive feedback|collapsed: `boolean`<br>type: `'clickTrigger'\\|'responsive'`|\n|breakpoint|Events when a responsive layout breakpoint is triggered|collapsed: `boolean`|\n### `<layout-sider>` Slots\n\n|Slot Name|Description|Parameters|\n|---|---|---|\n|trigger|Custom bottom folding trigger|collapsed: `boolean`|\n\n\n"
  },
  {
    "path": "packages/web-vue/components/layout/README.zh-CN.md",
    "content": "```yaml\nmeta:\n  type: 组件\n  category: 布局\ntitle: 布局 Layout\ndescription: 页面的基础布局框架，常与组件嵌套使用，构建页面整体布局。\n```\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/custom-icon.md\n\n@import ./__demo__/collapsed.md\n\n@import ./__demo__/breakpoint.md\n\n@import ./__demo__/resize.md\n\n## API\n\n\n### `<layout>` Props\n\n|参数名|描述|类型|默认值|\n|---|---|---|:---:|\n|has-sider|表示子元素里有 Sider，一般不用指定。可用于服务端渲染时避免样式闪动|`boolean`|`false`|\n\n\n\n\n### `<layout-header>` Slots\n\n|插槽名|描述|参数|\n|---|:---:|---|\n|default|内容|-|\n\n\n\n\n### `<layout-content>` Slots\n\n|插槽名|描述|参数|\n|---|:---:|---|\n|default|内容|-|\n\n\n\n\n### `<layout-footer>` Slots\n\n|插槽名|描述|参数|\n|---|:---:|---|\n|default|内容|-|\n\n\n\n\n### `<layout-sider>` Props\n\n|参数名|描述|类型|默认值|\n|---|---|---|:---:|\n|theme|主题颜色|`'dark' \\| 'light'`|`'light'`|\n|collapsed|当前收起状态|`boolean`|`-`|\n|default-collapsed|默认的收起状态|`boolean`|`false`|\n|collapsible|是否可收起|`boolean`|`false`|\n|width|宽度|`number`|`200`|\n|collapsed-width|收缩宽度|`number`|`48`|\n|reverse-arrow|翻转折叠提示箭头的方向，当 Sider 在右边时可以使用|`boolean`|`false`|\n|breakpoint|触发响应式布局的断点, 详见[响应式栅格](/vue/component/grid)|`'xxl' \\| 'xl' \\| 'lg' \\| 'md' \\| 'sm' \\| 'xs'`|`-`|\n|resize-directions|可以用 ResizeBox 替换原生的 `aside` 标签，这个参数即 ResizeBox的 `directions` 参数。详情请看 [ResizeBox](/vue/component/resize-box)。|`Array<'left' \\| 'right' \\| 'top' \\| 'bottom'>`|`-`|\n|hide-trigger|隐藏底部折叠触发器|`boolean`|`false`|\n### `<layout-sider>` Events\n\n|事件名|描述|参数|\n|---|---|---|\n|collapse|展开-收起时的事件，有点击 trigger 以及响应式反馈两种方式可以触发|collapsed: `boolean`<br>type: `'clickTrigger'\\|'responsive'`|\n|breakpoint|触发响应式布局断点时的事件|collapsed: `boolean`|\n### `<layout-sider>` Slots\n\n|插槽名|描述|参数|\n|---|:---:|---|\n|trigger|自定义底部折叠触发器|collapsed: `boolean`|\n\n\n"
  },
  {
    "path": "packages/web-vue/components/layout/TEMPLATE.md",
    "content": "## zh-CN\n```yaml\nmeta:\n  type: 组件\n  category: 布局\ntitle: 布局 Layout\ndescription: 页面的基础布局框架，常与组件嵌套使用，构建页面整体布局。\n```\n---\n## en-US\n```yaml\nmeta:\n  type: Component\n  category: Layout\ntitle: Layout\ndescription: The basic layout framework of the page is often used nested with components to construct the overall layout of the page.\n```\n---\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/custom-icon.md\n\n@import ./__demo__/collapsed.md\n\n@import ./__demo__/breakpoint.md\n\n@import ./__demo__/resize.md\n\n## API\n\n%%API(layout.vue)%%\n\n%%API(header.vue)%%\n\n%%API(content.vue)%%\n\n%%API(footer.vue)%%\n\n%%API(sider.vue)%%\n"
  },
  {
    "path": "packages/web-vue/components/layout/__demo__/basic.md",
    "content": "```yaml\ntitle:\n  zh-CN: 基本用法\n  en-US: Basic\n```\n\n## zh-CN\n\n典型的页面布局。\n\n---\n\n## en-US\n\nA typical page layout.\n\n---\n\n```vue\n<template>\n  <div class=\"layout-demo\">\n    <a-layout style=\"height: 400px;\">\n      <a-layout-header>Header</a-layout-header>\n      <a-layout-content>Content</a-layout-content>\n      <a-layout-footer>Footer</a-layout-footer>\n    </a-layout>\n    <br />\n    <a-layout style=\"height: 400px;\">\n      <a-layout-header>Header</a-layout-header>\n      <a-layout>\n        <a-layout-sider theme=\"dark\">Sider</a-layout-sider>\n        <a-layout-content>Content</a-layout-content>\n      </a-layout>\n      <a-layout-footer>Footer</a-layout-footer>\n    </a-layout>\n    <br />\n    <a-layout style=\"height: 400px;\">\n      <a-layout-header>Header</a-layout-header>\n      <a-layout>\n        <a-layout-content>Content</a-layout-content>\n        <a-layout-sider>Sider</a-layout-sider>\n      </a-layout>\n      <a-layout-footer>Footer</a-layout-footer>\n    </a-layout>\n    <br />\n    <a-layout style=\"height: 400px;\">\n      <a-layout-header>Header</a-layout-header>\n      <a-layout>\n        <a-layout-sider style=\"width: 64px;\">Sider</a-layout-sider>\n        <a-layout-sider style=\"width: 206px; margin-left: 1px;\">Sider</a-layout-sider>\n        <a-layout-content>Content</a-layout-content>\n      </a-layout>\n      <a-layout-footer>Footer</a-layout-footer>\n    </a-layout>\n  </div>\n</template>\n<style scoped>\n.layout-demo :deep(.arco-layout-header),\n.layout-demo :deep(.arco-layout-footer),\n.layout-demo :deep(.arco-layout-sider-children),\n.layout-demo :deep(.arco-layout-content) {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  color: var(--color-white);\n  font-size: 16px;\n  font-stretch: condensed;\n  text-align: center;\n}\n\n\n.layout-demo :deep(.arco-layout-header),\n.layout-demo :deep(.arco-layout-footer) {\n  height: 64px;\n  background-color: var(--color-primary-light-4);\n}\n\n.layout-demo :deep(.arco-layout-sider) {\n  width: 206px;\n  background-color: var(--color-primary-light-3);\n}\n\n.layout-demo :deep(.arco-layout-content) {\n  background-color: rgb(var(--arcoblue-6));\n}\n</style>\n```\n"
  },
  {
    "path": "packages/web-vue/components/layout/__demo__/breakpoint.md",
    "content": "```yaml\ntitle:\n  zh-CN: 响应式侧边栏\n  en-US: Responsive Sider\n```\n\n## zh-CN\n\n左侧 Slider 可以结合 Menu 设置为展开/收起状态, 设置`breakpoint`可触发响应式收缩。\n\n---\n\n## en-US\n\nThe Slider on the left can be set to expand/collapse in conjunction with Menu, and set `breakpoint` for responsive contraction.\n\n---\n\n```vue\n<template>\n  <a-layout class=\"layout-demo\">\n    <a-layout-sider\n      theme=\"dark\"\n      breakpoint=\"lg\"\n      :width=\"220\"\n      collapsible\n      :collapsed=\"collapsed\"\n      @collapse=\"onCollapse\"\n    >\n      <div class=\"logo\" />\n      <a-menu\n        :defaultOpenKeys=\"['1']\"\n        :defaultSelectedKeys=\"['0_2']\"\n        @menuItemClick=\"onClickMenuItem\"\n      >\n        <a-menu-item key=\"0_1\" disabled>\n          <IconHome />\n          Menu 1\n        </a-menu-item>\n        <a-menu-item key=\"0_2\">\n          <IconCalendar />\n          Menu 2\n        </a-menu-item>\n        <a-sub-menu key=\"1\">\n          <template #title>\n            <span><IconCalendar />Navigation 1</span>\n          </template>\n          <a-menu-item key=\"1_1\">Menu 1</a-menu-item>\n          <a-menu-item key=\"1_2\">Menu 2</a-menu-item>\n          <a-sub-menu key=\"2\" title=\"Navigation 2\">\n            <a-menu-item key=\"2_1\">Menu 1</a-menu-item>\n            <a-menu-item key=\"2_2\">Menu 2</a-menu-item>\n          </a-sub-menu>\n          <a-sub-menu key=\"3\" title=\"Navigation 3\">\n            <a-menu-item key=\"3_1\">Menu 1</a-menu-item>\n            <a-menu-item key=\"3_2\">Menu 2</a-menu-item>\n            <a-menu-item key=\"3_3\">Menu 3</a-menu-item>\n          </a-sub-menu>\n        </a-sub-menu>\n        <a-sub-menu key=\"4\">\n          <template #title>\n            <span><IconCalendar />Navigation 4</span>\n          </template>\n          <a-menu-item key=\"4_1\">Menu 1</a-menu-item>\n          <a-menu-item key=\"4_2\">Menu 2</a-menu-item>\n          <a-menu-item key=\"4_3\">Menu 3</a-menu-item>\n        </a-sub-menu>\n      </a-menu>\n    </a-layout-sider>\n    <a-layout>\n      <a-layout-header>\n        <a-menu\n          :openKeys=\"['1']\"\n          :selectedKeys=\"['0_2']\"\n          mode='horizontal'\n        >\n          <a-menu-item key=\"0_1\" disabled>\n            <IconHome />\n            Menu 1\n          </a-menu-item>\n          <a-menu-item key=\"0_2\">\n            <IconCalendar />\n            Menu 2\n          </a-menu-item>\n          <a-sub-menu key=\"1\">\n            <template #title>\n              <span><IconCalendar />Navigation 1</span>\n            </template>\n            <a-menu-item key=\"1_1\">Menu 1</a-menu-item>\n            <a-menu-item key=\"1_2\">Menu 2</a-menu-item>\n            <a-sub-menu key=\"2\" title=\"Navigation 2\">\n              <a-menu-item key=\"2_1\">Menu 1</a-menu-item>\n              <a-menu-item key=\"2_2\">Menu 2</a-menu-item>\n            </a-sub-menu>\n            <a-sub-menu key=\"3\" title=\"Navigation 3\">\n              <a-menu-item key=\"3_1\">Menu 1</a-menu-item>\n              <a-menu-item key=\"3_2\">Menu 2</a-menu-item>\n              <a-menu-item key=\"3_3\">Menu 3</a-menu-item>\n            </a-sub-menu>\n          </a-sub-menu>\n          <a-sub-menu key=\"4\">\n            <template #title>\n              <span><IconCalendar />Navigation 4</span>\n            </template>\n            <a-menu-item key=\"4_1\">Menu 1</a-menu-item>\n            <a-menu-item key=\"4_2\">Menu 2</a-menu-item>\n            <a-menu-item key=\"4_3\">Menu 3</a-menu-item>\n          </a-sub-menu>\n        </a-menu>\n      </a-layout-header>\n      <a-layout style=\"padding: 0 24px\">\n        <a-breadcrumb :style=\"{ margin: '16px 0' }\">\n          <a-breadcrumb-item>Home</a-breadcrumb-item>\n          <a-breadcrumb-item>List</a-breadcrumb-item>\n          <a-breadcrumb-item>App</a-breadcrumb-item>\n        </a-breadcrumb>\n        <a-layout-content>Content</a-layout-content>\n        <a-layout-footer>Footer</a-layout-footer>\n      </a-layout>\n    </a-layout>\n  </a-layout>\n</template>\n<script>\nimport { defineComponent, ref } from 'vue';\nimport { Message } from '@arco-design/web-vue';\nimport {\n  IconHome,\n  IconCalendar,\n} from '@arco-design/web-vue/es/icon';\n\nexport default defineComponent({\n  components: {\n    IconHome,\n    IconCalendar,\n  },\n  setup() {\n    const collapsed = ref(false);\n    const onCollapse = (val, type) => {\n      const content = type === 'responsive' ? '触发响应式收缩' : '点击触发收缩';\n      Message.info({\n        content,\n        duration: 2000,\n      });\n      collapsed.value = val;\n    }\n    return {\n      collapsed,\n      onCollapse,\n      onClickMenuItem(key) {\n        Message.info({ content: `You select ${key}`, showIcon: true });\n      }\n    };\n  }\n});\n</script>\n<style scoped>\n.layout-demo {\n  height: 500px;\n  background: var(--color-fill-2);\n  border: 1px solid var(--color-border);\n}\n.layout-demo :deep(.arco-layout-sider) .logo {\n  height: 32px;\n  margin: 12px 8px;\n  background: rgba(255, 255, 255, 0.2);\n}\n.layout-demo :deep(.arco-layout-sider-light) .logo{\n  background: var(--color-fill-2);\n}\n.layout-demo :deep(.arco-layout-header)  {\n  height: 64px;\n  line-height: 64px;\n  background: var(--color-bg-3);\n}\n.layout-demo :deep(.arco-layout-footer) {\n  height: 48px;\n  color: var(--color-text-2);\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 48px;\n}\n.layout-demo :deep(.arco-layout-content) {\n  color: var(--color-text-2);\n  font-weight: 400;\n  font-size: 14px;\n  background: var(--color-bg-3);\n}\n.layout-demo :deep(.arco-layout-footer),\n.layout-demo :deep(.arco-layout-content)  {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  color: var(--color-white);\n  font-size: 16px;\n  font-stretch: condensed;\n  text-align: center;\n}\n</style>\n```\n"
  },
  {
    "path": "packages/web-vue/components/layout/__demo__/collapsed.md",
    "content": "```yaml\ntitle:\n  zh-CN: 自定义收起按钮\n  en-US: Customize Collapse Button\n```\n\n## zh-CN\n\n设置`Menu.Sider` 的`hide-trigger`属性为`true`后，`Sider` 内置的缩起按钮不会显示。此时可自定义收起按钮。\n\n---\n\n## en-US\n\nAfter setting the `trigger` property of `Menu.Sider` to `null`, the built-in trigger of `Sider` will not be displayed. At this time, you can customize the collapse button.\n\n---\n\n```vue\n<template>\n  <a-layout class=\"layout-demo\">\n    <a-layout-sider\n      hide-trigger\n      collapsible\n      :collapsed=\"collapsed\"\n    >\n      <div class=\"logo\" />\n      <a-menu\n        :defaultOpenKeys=\"['1']\"\n        :defaultSelectedKeys=\"['0_3']\"\n        :style=\"{ width: '100%' }\"\n        @menuItemClick=\"onClickMenuItem\"\n      >\n        <a-menu-item key=\"0_1\" disabled>\n          <IconHome />\n          Menu 1\n        </a-menu-item>\n        <a-menu-item key=\"0_2\">\n          <IconCalendar />\n          Menu 2\n        </a-menu-item>\n        <a-menu-item key=\"0_3\">\n          <IconCalendar />\n          Menu 3\n        </a-menu-item>\n        <a-sub-menu key=\"1\">\n          <template #title>\n            <span><IconCalendar />Navigation 1</span>\n          </template>\n          <a-menu-item key=\"1_1\">Menu 1</a-menu-item>\n          <a-menu-item key=\"1_2\">Menu 2</a-menu-item>\n          <a-sub-menu key=\"2\" title=\"Navigation 2\">\n            <a-menu-item key=\"2_1\">Menu 1</a-menu-item>\n            <a-menu-item key=\"2_2\">Menu 2</a-menu-item>\n          </a-sub-menu>\n          <a-sub-menu key=\"3\" title=\"Navigation 3\">\n            <a-menu-item key=\"3_1\">Menu 1</a-menu-item>\n            <a-menu-item key=\"3_2\">Menu 2</a-menu-item>\n            <a-menu-item key=\"3_3\">Menu 3</a-menu-item>\n          </a-sub-menu>\n        </a-sub-menu>\n        <a-sub-menu key=\"4\">\n          <template #title>\n            <span><IconCalendar />Navigation 4</span>\n          </template>\n          <a-menu-item key=\"4_1\">Menu 1</a-menu-item>\n          <a-menu-item key=\"4_2\">Menu 2</a-menu-item>\n          <a-menu-item key=\"4_3\">Menu 3</a-menu-item>\n        </a-sub-menu>\n      </a-menu>\n    </a-layout-sider>\n    <a-layout>\n      <a-layout-header style=\"padding-left: 20px;\">\n        <a-button shape=\"round\" @click=\"onCollapse\">\n          <IconCaretRight v-if=\"collapsed\" />\n          <IconCaretLeft v-else />\n        </a-button>\n      </a-layout-header>\n      <a-layout style=\"padding: 0 24px;\">\n        <a-breadcrumb :style=\"{ margin: '16px 0' }\">\n          <a-breadcrumb-item>Home</a-breadcrumb-item>\n          <a-breadcrumb-item>List</a-breadcrumb-item>\n          <a-breadcrumb-item>App</a-breadcrumb-item>\n        </a-breadcrumb>\n        <a-layout-content>Content</a-layout-content>\n        <a-layout-footer>Footer</a-layout-footer>\n      </a-layout>\n    </a-layout>\n  </a-layout>\n</template>\n<script>\nimport { defineComponent, ref } from 'vue';\nimport { Message} from '@arco-design/web-vue';\nimport {\n  IconCaretRight,\n  IconCaretLeft,\n  IconHome,\n  IconCalendar,\n} from '@arco-design/web-vue/es/icon';\n\nexport default defineComponent({\n  components: {\n    IconCaretRight,\n    IconCaretLeft,\n    IconHome,\n    IconCalendar,\n  },\n  setup() {\n    const collapsed = ref(false);\n    const onCollapse = () => {\n      collapsed.value = !collapsed.value;\n    };\n    return {\n      collapsed,\n      onCollapse,\n      onClickMenuItem(key) {\n        Message.info({ content: `You select ${key}`, showIcon: true });\n      }\n    };\n  },\n});\n</script>\n<style scoped>\n.layout-demo {\n  height: 500px;\n  background: var(--color-fill-2);\n  border: 1px solid var(--color-border);\n}\n.layout-demo :deep(.arco-layout-sider) .logo {\n  height: 32px;\n  margin: 12px 8px;\n  background: rgba(255, 255, 255, 0.2);\n}\n.layout-demo :deep(.arco-layout-sider-light) .logo{\n  background: var(--color-fill-2);\n}\n.layout-demo :deep(.arco-layout-header)  {\n  height: 64px;\n  line-height: 64px;\n  background: var(--color-bg-3);\n}\n.layout-demo :deep(.arco-layout-footer) {\n  height: 48px;\n  color: var(--color-text-2);\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 48px;\n}\n.layout-demo :deep(.arco-layout-content) {\n  color: var(--color-text-2);\n  font-weight: 400;\n  font-size: 14px;\n  background: var(--color-bg-3);\n}\n.layout-demo :deep(.arco-layout-footer),\n.layout-demo :deep(.arco-layout-content)  {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  color: var(--color-white);\n  font-size: 16px;\n  font-stretch: condensed;\n  text-align: center;\n}\n</style>\n```\n"
  },
  {
    "path": "packages/web-vue/components/layout/__demo__/custom-icon.md",
    "content": "```yaml\ntitle:\n  zh-CN: 自定义按钮 Icon\n  en-US: Customize Button Icon\n```\n\n## zh-CN\n\n通过设置 `Menu.Sider` 的 `trigger` 属性，实现自定义收起按钮的图标。\n\n---\n\n## en-US\n\nBy setting the `trigger` property of `Menu.Sider`, the icon of the collapse button can be customized.\n\n---\n\n```vue\n<template>\n  <a-layout class=\"layout-demo\">\n    <a-layout-sider collapsible breakpoint=\"xl\">\n      <div class=\"logo\" />\n      <a-menu\n        :default-open-keys=\"['1']\"\n        :default-selected-keys=\"['0_3']\"\n        :style=\"{ width: '100%' }\"\n        @menu-item-click=\"onClickMenuItem\"\n      >\n        <a-menu-item key=\"0_1\" disabled>\n          <IconHome></IconHome>\n          Menu 1\n        </a-menu-item>\n        <a-menu-item key=\"0_2\">\n          <IconCalendar></IconCalendar>\n          Menu 2\n        </a-menu-item>\n        <a-menu-item key=\"0_3\">\n          <IconCalendar></IconCalendar>\n          Menu 3\n        </a-menu-item>\n        <a-sub-menu key=\"1\">\n          <template #title>\n            <IconCalendar></IconCalendar> Navigation 1\n          </template>\n          <a-menu-item key=\"1_1\">Menu 1</a-menu-item>\n          <a-menu-item key=\"1_2\">Menu 2</a-menu-item>\n          <a-sub-menu key=\"2\" title=\"Navigation 2\">\n            <a-menu-item key=\"2_1\">Menu 1</a-menu-item>\n            <a-menu-item key=\"2_2\">Menu 2</a-menu-item>\n          </a-sub-menu>\n          <a-sub-menu key=\"3\" title=\"Navigation 3\">\n            <a-menu-item key=\"3_1\">Menu 1</a-menu-item>\n            <a-menu-item key=\"3_2\">Menu 2</a-menu-item>\n            <a-menu-item key=\"3_3\">Menu 3</a-menu-item>\n          </a-sub-menu>\n        </a-sub-menu>\n        <a-sub-menu key=\"4\">\n          <template #title>\n            <IconCalendar></IconCalendar> Navigation 4\n          </template>\n          <a-menu-item key=\"4_1\">Menu 1</a-menu-item>\n          <a-menu-item key=\"4_2\">Menu 2</a-menu-item>\n          <a-menu-item key=\"4_3\">Menu 3</a-menu-item>\n        </a-sub-menu>\n      </a-menu>\n      <!-- trigger -->\n      <template #trigger=\"{ collapsed }\">\n        <IconCaretRight v-if=\"collapsed\"></IconCaretRight>\n        <IconCaretLeft v-else></IconCaretLeft>\n      </template>\n    </a-layout-sider>\n    <a-layout>\n      <a-layout-header style=\"padding-left: 20px;\">\n        Header\n      </a-layout-header >\n      <a-layout style=\"padding: 0 24px;\">\n        <a-breadcrumb :style=\"{ margin: '16px 0' }\">\n          <a-breadcrumb-item>Home</a-breadcrumb-item>\n          <a-breadcrumb-item>List</a-breadcrumb-item>\n          <a-breadcrumb-item>App</a-breadcrumb-item>\n        </a-breadcrumb>\n        <a-layout-content>Content</a-layout-content>\n        <a-layout-footer>Footer</a-layout-footer>\n      </a-layout>\n    </a-layout>\n  </a-layout>\n</template>\n<script>\nimport { defineComponent } from 'vue';\nimport { Message} from '@arco-design/web-vue';\nimport {\n  IconCaretRight,\n  IconCaretLeft,\n  IconHome,\n  IconCalendar,\n} from '@arco-design/web-vue/es/icon';\n\nexport default defineComponent({\n  components: {\n    IconCaretRight,\n    IconCaretLeft,\n    IconHome,\n    IconCalendar,\n  },\n  methods: {\n    onClickMenuItem(key) {\n      Message.info({ content: `You select ${key}`, showIcon: true });\n    }\n  }\n});\n</script>\n<style scoped>\n.layout-demo {\n  height: 500px;\n  background: var(--color-fill-2);\n  border: 1px solid var(--color-border);\n}\n.layout-demo :deep(.arco-layout-sider) .logo {\n  height: 32px;\n  margin: 12px 8px;\n  background: rgba(255, 255, 255, 0.2);\n}\n.layout-demo :deep(.arco-layout-sider-light) .logo{\n  background: var(--color-fill-2);\n}\n.layout-demo :deep(.arco-layout-header)  {\n  height: 64px;\n  line-height: 64px;\n  background: var(--color-bg-3);\n}\n.layout-demo :deep(.arco-layout-footer) {\n  height: 48px;\n  color: var(--color-text-2);\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 48px;\n}\n.layout-demo :deep(.arco-layout-content) {\n  color: var(--color-text-2);\n  font-weight: 400;\n  font-size: 14px;\n  background: var(--color-bg-3);\n}\n.layout-demo :deep(.arco-layout-footer),\n.layout-demo :deep(.arco-layout-content)  {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  color: var(--color-white);\n  font-size: 16px;\n  font-stretch: condensed;\n  text-align: center;\n}\n</style>\n```\n"
  },
  {
    "path": "packages/web-vue/components/layout/__demo__/resize.md",
    "content": "```yaml\ntitle:\n  zh-CN: 可伸缩侧边栏\n  en-US: Retractable Sidebar\n```\n\n## zh-CN\n\n可以用鼠标进行拖拽放大缩小的侧边栏，需要用到的参数：`resizeDirections`。\n\n---\n\n## en-US\n\nBy `resizeDirections`, you can use the mouse to drag the sidebar to zoom in and out.\n\n---\n\n```vue\n<template>\n  <div class=\"layout-demo\">\n    <a-layout>\n      <a-layout-header>Header</a-layout-header>\n      <a-layout>\n        <a-layout-sider :resize-directions=\"['right']\">\n          Sider\n        </a-layout-sider>\n        <a-layout-content>Content</a-layout-content>\n      </a-layout>\n      <a-layout-footer>Footer</a-layout-footer>\n    </a-layout>\n  </div>\n</template>\n<style scoped>\n.layout-demo :deep(.arco-layout-header),\n.layout-demo :deep(.arco-layout-footer),\n.layout-demo :deep(.arco-layout-sider-children),\n.layout-demo :deep(.arco-layout-content) {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  color: var(--color-white);\n  font-size: 16px;\n  font-stretch: condensed;\n  text-align: center;\n}\n\n\n.layout-demo :deep(.arco-layout-header),\n.layout-demo :deep(.arco-layout-footer) {\n  height: 64px;\n  background-color: var(--color-primary-light-4);\n}\n\n.layout-demo :deep(.arco-layout-sider) {\n  width: 206px;\n  background-color: var(--color-primary-light-3);\n  min-width: 150px;\n  max-width: 500px;\n  height: 200px;\n}\n\n.layout-demo :deep(.arco-layout-content) {\n  background-color: rgb(var(--arcoblue-6));\n}\n</style>\n```\n"
  },
  {
    "path": "packages/web-vue/components/layout/__test__/__snapshots__/demo.test.ts.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`<layout> demo: render [basic] correctly 1`] = `\n\"<div class=\\\\\"layout-demo\\\\\">\n  <section class=\\\\\"arco-layout\\\\\" style=\\\\\"height: 400px;\\\\\">\n    <header class=\\\\\"arco-layout-header\\\\\">Header</header>\n    <main class=\\\\\"arco-layout-content\\\\\">Content</main>\n    <footer class=\\\\\"arco-layout-footer\\\\\">Footer</footer>\n  </section><br>\n  <section class=\\\\\"arco-layout\\\\\" style=\\\\\"height: 400px;\\\\\">\n    <header class=\\\\\"arco-layout-header\\\\\">Header</header>\n    <section class=\\\\\"arco-layout\\\\\">\n      <div class=\\\\\"arco-layout-sider\\\\\" style=\\\\\"width: 200px;\\\\\">\n        <div class=\\\\\"arco-layout-sider-children\\\\\">Sider</div>\n        <!--v-if-->\n      </div>\n      <main class=\\\\\"arco-layout-content\\\\\">Content</main>\n    </section>\n    <footer class=\\\\\"arco-layout-footer\\\\\">Footer</footer>\n  </section><br>\n  <section class=\\\\\"arco-layout\\\\\" style=\\\\\"height: 400px;\\\\\">\n    <header class=\\\\\"arco-layout-header\\\\\">Header</header>\n    <section class=\\\\\"arco-layout\\\\\">\n      <main class=\\\\\"arco-layout-content\\\\\">Content</main>\n      <div class=\\\\\"arco-layout-sider arco-layout-sider-light\\\\\" style=\\\\\"width: 200px;\\\\\">\n        <div class=\\\\\"arco-layout-sider-children\\\\\">Sider</div>\n        <!--v-if-->\n      </div>\n    </section>\n    <footer class=\\\\\"arco-layout-footer\\\\\">Footer</footer>\n  </section><br>\n  <section class=\\\\\"arco-layout\\\\\" style=\\\\\"height: 400px;\\\\\">\n    <header class=\\\\\"arco-layout-header\\\\\">Header</header>\n    <section class=\\\\\"arco-layout\\\\\">\n      <div class=\\\\\"arco-layout-sider arco-layout-sider-light\\\\\" style=\\\\\"width: 64px;\\\\\">\n        <div class=\\\\\"arco-layout-sider-children\\\\\">Sider</div>\n        <!--v-if-->\n      </div>\n      <div class=\\\\\"arco-layout-sider arco-layout-sider-light\\\\\" style=\\\\\"width: 206px; margin-left: 1px;\\\\\">\n        <div class=\\\\\"arco-layout-sider-children\\\\\">Sider</div>\n        <!--v-if-->\n      </div>\n      <main class=\\\\\"arco-layout-content\\\\\">Content</main>\n    </section>\n    <footer class=\\\\\"arco-layout-footer\\\\\">Footer</footer>\n  </section>\n</div>\"\n`;\n\nexports[`<layout> demo: render [breakpoint] correctly 1`] = `\n\"<section class=\\\\\"arco-layout layout-demo\\\\\">\n  <div class=\\\\\"arco-layout-sider arco-layout-sider-has-trigger\\\\\" style=\\\\\"width: 220px;\\\\\">\n    <div class=\\\\\"arco-layout-sider-children\\\\\">\n      <div class=\\\\\"logo\\\\\"></div>\n      <div class=\\\\\"arco-menu arco-menu-dark arco-menu-vertical\\\\\">\n        <div class=\\\\\"arco-menu-inner\\\\\">\n          <div class=\\\\\"arco-menu-item arco-menu-disabled\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-home\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n              <path d=\\\\\"M7 17 24 7l17 10v24H7V17Z\\\\\"></path>\n              <path d=\\\\\"M20 28h8v13h-8V28Z\\\\\"></path>\n            </svg> Menu 1\n            <!---->\n          </div>\n          <div class=\\\\\"arco-menu-item arco-menu-selected\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-calendar\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n              <path d=\\\\\"M7 22h34M14 5v8m20-8v8M8 41h32a1 1 0 0 0 1-1V10a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v30a1 1 0 0 0 1 1Z\\\\\"></path>\n            </svg> Menu 2\n            <!---->\n          </div>\n          <div class=\\\\\"arco-menu-inline\\\\\">\n            <div class=\\\\\"arco-menu-inline-header\\\\\">\n              <!--v-if--><span><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-calendar\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M7 22h34M14 5v8m20-8v8M8 41h32a1 1 0 0 0 1-1V10a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v30a1 1 0 0 0 1 1Z\\\\\"></path></svg>Navigation 1</span><span class=\\\\\"arco-menu-icon-suffix is-open\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n            </div>\n            <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\">\n              <div class=\\\\\"arco-menu-inline-content\\\\\">\n                <div class=\\\\\"arco-menu-item\\\\\"><span class=\\\\\"arco-menu-indent-list\\\\\"><span class=\\\\\"arco-menu-indent\\\\\" style=\\\\\"\\\\\"></span></span><span class=\\\\\"arco-menu-item-inner\\\\\">Menu 1</span>\n                  <!---->\n                </div>\n                <div class=\\\\\"arco-menu-item\\\\\"><span class=\\\\\"arco-menu-indent-list\\\\\"><span class=\\\\\"arco-menu-indent\\\\\" style=\\\\\"\\\\\"></span></span><span class=\\\\\"arco-menu-item-inner\\\\\">Menu 2</span>\n                  <!---->\n                </div>\n                <div class=\\\\\"arco-menu-inline\\\\\">\n                  <div class=\\\\\"arco-menu-inline-header\\\\\"><span class=\\\\\"arco-menu-indent-list\\\\\"><span class=\\\\\"arco-menu-indent\\\\\" style=\\\\\"\\\\\"></span></span>Navigation 2<span class=\\\\\"arco-menu-icon-suffix\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span></div>\n                  <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\">\n                    <div class=\\\\\"arco-menu-inline-content\\\\\" style=\\\\\"display: none;\\\\\">\n                      <div class=\\\\\"arco-menu-item\\\\\"><span class=\\\\\"arco-menu-indent-list\\\\\"><span class=\\\\\"arco-menu-indent\\\\\" style=\\\\\"\\\\\"></span><span class=\\\\\"arco-menu-indent\\\\\" style=\\\\\"\\\\\"></span></span><span class=\\\\\"arco-menu-item-inner\\\\\">Menu 1</span>\n                        <!---->\n                      </div>\n                      <div class=\\\\\"arco-menu-item\\\\\"><span class=\\\\\"arco-menu-indent-list\\\\\"><span class=\\\\\"arco-menu-indent\\\\\" style=\\\\\"\\\\\"></span><span class=\\\\\"arco-menu-indent\\\\\" style=\\\\\"\\\\\"></span></span><span class=\\\\\"arco-menu-item-inner\\\\\">Menu 2</span>\n                        <!---->\n                      </div>\n                    </div>\n                  </transition-stub>\n                </div>\n                <div class=\\\\\"arco-menu-inline\\\\\">\n                  <div class=\\\\\"arco-menu-inline-header\\\\\"><span class=\\\\\"arco-menu-indent-list\\\\\"><span class=\\\\\"arco-menu-indent\\\\\" style=\\\\\"\\\\\"></span></span>Navigation 3<span class=\\\\\"arco-menu-icon-suffix\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span></div>\n                  <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\">\n                    <div class=\\\\\"arco-menu-inline-content\\\\\" style=\\\\\"display: none;\\\\\">\n                      <div class=\\\\\"arco-menu-item\\\\\"><span class=\\\\\"arco-menu-indent-list\\\\\"><span class=\\\\\"arco-menu-indent\\\\\" style=\\\\\"\\\\\"></span><span class=\\\\\"arco-menu-indent\\\\\" style=\\\\\"\\\\\"></span></span><span class=\\\\\"arco-menu-item-inner\\\\\">Menu 1</span>\n                        <!---->\n                      </div>\n                      <div class=\\\\\"arco-menu-item\\\\\"><span class=\\\\\"arco-menu-indent-list\\\\\"><span class=\\\\\"arco-menu-indent\\\\\" style=\\\\\"\\\\\"></span><span class=\\\\\"arco-menu-indent\\\\\" style=\\\\\"\\\\\"></span></span><span class=\\\\\"arco-menu-item-inner\\\\\">Menu 2</span>\n                        <!---->\n                      </div>\n                      <div class=\\\\\"arco-menu-item\\\\\"><span class=\\\\\"arco-menu-indent-list\\\\\"><span class=\\\\\"arco-menu-indent\\\\\" style=\\\\\"\\\\\"></span><span class=\\\\\"arco-menu-indent\\\\\" style=\\\\\"\\\\\"></span></span><span class=\\\\\"arco-menu-item-inner\\\\\">Menu 3</span>\n                        <!---->\n                      </div>\n                    </div>\n                  </transition-stub>\n                </div>\n              </div>\n            </transition-stub>\n          </div>\n          <div class=\\\\\"arco-menu-inline\\\\\">\n            <div class=\\\\\"arco-menu-inline-header\\\\\">\n              <!--v-if--><span><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-calendar\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M7 22h34M14 5v8m20-8v8M8 41h32a1 1 0 0 0 1-1V10a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v30a1 1 0 0 0 1 1Z\\\\\"></path></svg>Navigation 4</span><span class=\\\\\"arco-menu-icon-suffix\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n            </div>\n            <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\">\n              <div class=\\\\\"arco-menu-inline-content\\\\\" style=\\\\\"display: none;\\\\\">\n                <div class=\\\\\"arco-menu-item\\\\\"><span class=\\\\\"arco-menu-indent-list\\\\\"><span class=\\\\\"arco-menu-indent\\\\\" style=\\\\\"\\\\\"></span></span><span class=\\\\\"arco-menu-item-inner\\\\\">Menu 1</span>\n                  <!---->\n                </div>\n                <div class=\\\\\"arco-menu-item\\\\\"><span class=\\\\\"arco-menu-indent-list\\\\\"><span class=\\\\\"arco-menu-indent\\\\\" style=\\\\\"\\\\\"></span></span><span class=\\\\\"arco-menu-item-inner\\\\\">Menu 2</span>\n                  <!---->\n                </div>\n                <div class=\\\\\"arco-menu-item\\\\\"><span class=\\\\\"arco-menu-indent-list\\\\\"><span class=\\\\\"arco-menu-indent\\\\\" style=\\\\\"\\\\\"></span></span><span class=\\\\\"arco-menu-item-inner\\\\\">Menu 3</span>\n                  <!---->\n                </div>\n              </div>\n            </transition-stub>\n          </div>\n        </div>\n        <!--v-if-->\n      </div>\n    </div>\n    <div class=\\\\\"arco-layout-sider-trigger\\\\\" style=\\\\\"width: 220px;\\\\\">\n      <div><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-left\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n          <path d=\\\\\"M32 8.4 16.444 23.956 32 39.513\\\\\"></path>\n        </svg></div>\n    </div>\n  </div>\n  <section class=\\\\\"arco-layout\\\\\">\n    <header class=\\\\\"arco-layout-header\\\\\">\n      <div class=\\\\\"arco-menu arco-menu-light arco-menu-horizontal\\\\\">\n        <div class=\\\\\"arco-menu-inner\\\\\">\n          <div class=\\\\\"arco-menu-overflow-wrap\\\\\">\n            <div class=\\\\\"arco-menu-pop arco-menu-pop-header arco-menu-overflow-sub-menu-mirror\\\\\" aria-haspopup=\\\\\"true\\\\\">\n              <!-- header -->\n              <!--v-if--><span>...</span><!-- suffix --><span class=\\\\\"arco-menu-icon-suffix\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n              <!--v-if-->\n            </div>\n            <!---->\n            <div class=\\\\\"arco-menu-item arco-menu-disabled\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-home\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n                <path d=\\\\\"M7 17 24 7l17 10v24H7V17Z\\\\\"></path>\n                <path d=\\\\\"M20 28h8v13h-8V28Z\\\\\"></path>\n              </svg> Menu 1\n              <!---->\n            </div>\n            <div class=\\\\\"arco-menu-item arco-menu-selected\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-calendar\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n                <path d=\\\\\"M7 22h34M14 5v8m20-8v8M8 41h32a1 1 0 0 0 1-1V10a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v30a1 1 0 0 0 1 1Z\\\\\"></path>\n              </svg> Menu 2 <div class=\\\\\"arco-menu-selected-label\\\\\"></div>\n            </div>\n            <div class=\\\\\"arco-menu-pop arco-menu-pop-header\\\\\" aria-haspopup=\\\\\"true\\\\\">\n              <!-- header -->\n              <!--v-if--><span><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-calendar\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M7 22h34M14 5v8m20-8v8M8 41h32a1 1 0 0 0 1-1V10a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v30a1 1 0 0 0 1 1Z\\\\\"></path></svg>Navigation 1</span><!-- suffix --><span class=\\\\\"arco-menu-icon-suffix\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n              <!--v-if-->\n            </div>\n            <!---->\n            <div class=\\\\\"arco-menu-pop arco-menu-pop-header\\\\\" aria-haspopup=\\\\\"true\\\\\">\n              <!-- header -->\n              <!--v-if--><span><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-calendar\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M7 22h34M14 5v8m20-8v8M8 41h32a1 1 0 0 0 1-1V10a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v30a1 1 0 0 0 1 1Z\\\\\"></path></svg>Navigation 4</span><!-- suffix --><span class=\\\\\"arco-menu-icon-suffix\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n              <!--v-if-->\n            </div>\n            <!---->\n            <!---->\n          </div>\n        </div>\n        <!--v-if-->\n      </div>\n    </header>\n    <section class=\\\\\"arco-layout\\\\\" style=\\\\\"padding: 0px 24px;\\\\\">\n      <div role=\\\\\"list\\\\\" class=\\\\\"arco-breadcrumb\\\\\" style=\\\\\"margin: 16px 0px;\\\\\">\n        <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-breadcrumb-item\\\\\">Home\n          <!---->\n        </div>\n        <div aria-hidden=\\\\\"true\\\\\" class=\\\\\"arco-breadcrumb-item-separator\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-oblique-line\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n            <path d=\\\\\"M29.506 6.502 18.493 41.498\\\\\"></path>\n          </svg></div>\n        <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-breadcrumb-item\\\\\">List\n          <!---->\n        </div>\n        <div aria-hidden=\\\\\"true\\\\\" class=\\\\\"arco-breadcrumb-item-separator\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-oblique-line\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n            <path d=\\\\\"M29.506 6.502 18.493 41.498\\\\\"></path>\n          </svg></div>\n        <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-breadcrumb-item\\\\\">App\n          <!---->\n        </div>\n        <!---->\n      </div>\n      <main class=\\\\\"arco-layout-content\\\\\">Content</main>\n      <footer class=\\\\\"arco-layout-footer\\\\\">Footer</footer>\n    </section>\n  </section>\n</section>\"\n`;\n\nexports[`<layout> demo: render [collapsed] correctly 1`] = `\n\"<section class=\\\\\"arco-layout layout-demo\\\\\">\n  <div class=\\\\\"arco-layout-sider arco-layout-sider-light\\\\\" style=\\\\\"width: 200px;\\\\\">\n    <div class=\\\\\"arco-layout-sider-children\\\\\">\n      <div class=\\\\\"logo\\\\\"></div>\n      <div class=\\\\\"arco-menu arco-menu-light arco-menu-vertical\\\\\" style=\\\\\"width: 100%;\\\\\">\n        <div class=\\\\\"arco-menu-inner\\\\\">\n          <div class=\\\\\"arco-menu-item arco-menu-disabled\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-home\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n              <path d=\\\\\"M7 17 24 7l17 10v24H7V17Z\\\\\"></path>\n              <path d=\\\\\"M20 28h8v13h-8V28Z\\\\\"></path>\n            </svg> Menu 1\n            <!---->\n          </div>\n          <div class=\\\\\"arco-menu-item\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-calendar\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n              <path d=\\\\\"M7 22h34M14 5v8m20-8v8M8 41h32a1 1 0 0 0 1-1V10a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v30a1 1 0 0 0 1 1Z\\\\\"></path>\n            </svg> Menu 2\n            <!---->\n          </div>\n          <div class=\\\\\"arco-menu-item arco-menu-selected\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-calendar\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n              <path d=\\\\\"M7 22h34M14 5v8m20-8v8M8 41h32a1 1 0 0 0 1-1V10a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v30a1 1 0 0 0 1 1Z\\\\\"></path>\n            </svg> Menu 3\n            <!---->\n          </div>\n          <div class=\\\\\"arco-menu-inline\\\\\">\n            <div class=\\\\\"arco-menu-inline-header\\\\\">\n              <!--v-if--><span><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-calendar\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M7 22h34M14 5v8m20-8v8M8 41h32a1 1 0 0 0 1-1V10a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v30a1 1 0 0 0 1 1Z\\\\\"></path></svg>Navigation 1</span><span class=\\\\\"arco-menu-icon-suffix is-open\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n            </div>\n            <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\">\n              <div class=\\\\\"arco-menu-inline-content\\\\\">\n                <div class=\\\\\"arco-menu-item\\\\\"><span class=\\\\\"arco-menu-indent-list\\\\\"><span class=\\\\\"arco-menu-indent\\\\\" style=\\\\\"\\\\\"></span></span><span class=\\\\\"arco-menu-item-inner\\\\\">Menu 1</span>\n                  <!---->\n                </div>\n                <div class=\\\\\"arco-menu-item\\\\\"><span class=\\\\\"arco-menu-indent-list\\\\\"><span class=\\\\\"arco-menu-indent\\\\\" style=\\\\\"\\\\\"></span></span><span class=\\\\\"arco-menu-item-inner\\\\\">Menu 2</span>\n                  <!---->\n                </div>\n                <div class=\\\\\"arco-menu-inline\\\\\">\n                  <div class=\\\\\"arco-menu-inline-header\\\\\"><span class=\\\\\"arco-menu-indent-list\\\\\"><span class=\\\\\"arco-menu-indent\\\\\" style=\\\\\"\\\\\"></span></span>Navigation 2<span class=\\\\\"arco-menu-icon-suffix\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span></div>\n                  <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\">\n                    <div class=\\\\\"arco-menu-inline-content\\\\\" style=\\\\\"display: none;\\\\\">\n                      <div class=\\\\\"arco-menu-item\\\\\"><span class=\\\\\"arco-menu-indent-list\\\\\"><span class=\\\\\"arco-menu-indent\\\\\" style=\\\\\"\\\\\"></span><span class=\\\\\"arco-menu-indent\\\\\" style=\\\\\"\\\\\"></span></span><span class=\\\\\"arco-menu-item-inner\\\\\">Menu 1</span>\n                        <!---->\n                      </div>\n                      <div class=\\\\\"arco-menu-item\\\\\"><span class=\\\\\"arco-menu-indent-list\\\\\"><span class=\\\\\"arco-menu-indent\\\\\" style=\\\\\"\\\\\"></span><span class=\\\\\"arco-menu-indent\\\\\" style=\\\\\"\\\\\"></span></span><span class=\\\\\"arco-menu-item-inner\\\\\">Menu 2</span>\n                        <!---->\n                      </div>\n                    </div>\n                  </transition-stub>\n                </div>\n                <div class=\\\\\"arco-menu-inline\\\\\">\n                  <div class=\\\\\"arco-menu-inline-header\\\\\"><span class=\\\\\"arco-menu-indent-list\\\\\"><span class=\\\\\"arco-menu-indent\\\\\" style=\\\\\"\\\\\"></span></span>Navigation 3<span class=\\\\\"arco-menu-icon-suffix\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span></div>\n                  <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\">\n                    <div class=\\\\\"arco-menu-inline-content\\\\\" style=\\\\\"display: none;\\\\\">\n                      <div class=\\\\\"arco-menu-item\\\\\"><span class=\\\\\"arco-menu-indent-list\\\\\"><span class=\\\\\"arco-menu-indent\\\\\" style=\\\\\"\\\\\"></span><span class=\\\\\"arco-menu-indent\\\\\" style=\\\\\"\\\\\"></span></span><span class=\\\\\"arco-menu-item-inner\\\\\">Menu 1</span>\n                        <!---->\n                      </div>\n                      <div class=\\\\\"arco-menu-item\\\\\"><span class=\\\\\"arco-menu-indent-list\\\\\"><span class=\\\\\"arco-menu-indent\\\\\" style=\\\\\"\\\\\"></span><span class=\\\\\"arco-menu-indent\\\\\" style=\\\\\"\\\\\"></span></span><span class=\\\\\"arco-menu-item-inner\\\\\">Menu 2</span>\n                        <!---->\n                      </div>\n                      <div class=\\\\\"arco-menu-item\\\\\"><span class=\\\\\"arco-menu-indent-list\\\\\"><span class=\\\\\"arco-menu-indent\\\\\" style=\\\\\"\\\\\"></span><span class=\\\\\"arco-menu-indent\\\\\" style=\\\\\"\\\\\"></span></span><span class=\\\\\"arco-menu-item-inner\\\\\">Menu 3</span>\n                        <!---->\n                      </div>\n                    </div>\n                  </transition-stub>\n                </div>\n              </div>\n            </transition-stub>\n          </div>\n          <div class=\\\\\"arco-menu-inline\\\\\">\n            <div class=\\\\\"arco-menu-inline-header\\\\\">\n              <!--v-if--><span><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-calendar\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M7 22h34M14 5v8m20-8v8M8 41h32a1 1 0 0 0 1-1V10a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v30a1 1 0 0 0 1 1Z\\\\\"></path></svg>Navigation 4</span><span class=\\\\\"arco-menu-icon-suffix\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n            </div>\n            <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\">\n              <div class=\\\\\"arco-menu-inline-content\\\\\" style=\\\\\"display: none;\\\\\">\n                <div class=\\\\\"arco-menu-item\\\\\"><span class=\\\\\"arco-menu-indent-list\\\\\"><span class=\\\\\"arco-menu-indent\\\\\" style=\\\\\"\\\\\"></span></span><span class=\\\\\"arco-menu-item-inner\\\\\">Menu 1</span>\n                  <!---->\n                </div>\n                <div class=\\\\\"arco-menu-item\\\\\"><span class=\\\\\"arco-menu-indent-list\\\\\"><span class=\\\\\"arco-menu-indent\\\\\" style=\\\\\"\\\\\"></span></span><span class=\\\\\"arco-menu-item-inner\\\\\">Menu 2</span>\n                  <!---->\n                </div>\n                <div class=\\\\\"arco-menu-item\\\\\"><span class=\\\\\"arco-menu-indent-list\\\\\"><span class=\\\\\"arco-menu-indent\\\\\" style=\\\\\"\\\\\"></span></span><span class=\\\\\"arco-menu-item-inner\\\\\">Menu 3</span>\n                  <!---->\n                </div>\n              </div>\n            </transition-stub>\n          </div>\n        </div>\n        <!--v-if-->\n      </div>\n    </div>\n    <!--v-if-->\n  </div>\n  <section class=\\\\\"arco-layout\\\\\">\n    <header class=\\\\\"arco-layout-header\\\\\" style=\\\\\"padding-left: 20px;\\\\\"><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-round arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n        <!--v-if--><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-caret-left\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n          <path d=\\\\\"M13.171 24.937a1.2 1.2 0 0 1 0-1.874L30.051 9.56c.785-.629 1.949-.07 1.949.937v27.006c0 1.006-1.164 1.566-1.95.937L13.171 24.937Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n        </svg>\n      </button></header>\n    <section class=\\\\\"arco-layout\\\\\" style=\\\\\"padding: 0px 24px;\\\\\">\n      <div role=\\\\\"list\\\\\" class=\\\\\"arco-breadcrumb\\\\\" style=\\\\\"margin: 16px 0px;\\\\\">\n        <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-breadcrumb-item\\\\\">Home\n          <!---->\n        </div>\n        <div aria-hidden=\\\\\"true\\\\\" class=\\\\\"arco-breadcrumb-item-separator\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-oblique-line\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n            <path d=\\\\\"M29.506 6.502 18.493 41.498\\\\\"></path>\n          </svg></div>\n        <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-breadcrumb-item\\\\\">List\n          <!---->\n        </div>\n        <div aria-hidden=\\\\\"true\\\\\" class=\\\\\"arco-breadcrumb-item-separator\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-oblique-line\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n            <path d=\\\\\"M29.506 6.502 18.493 41.498\\\\\"></path>\n          </svg></div>\n        <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-breadcrumb-item\\\\\">App\n          <!---->\n        </div>\n        <!---->\n      </div>\n      <main class=\\\\\"arco-layout-content\\\\\">Content</main>\n      <footer class=\\\\\"arco-layout-footer\\\\\">Footer</footer>\n    </section>\n  </section>\n</section>\"\n`;\n\nexports[`<layout> demo: render [custom-icon] correctly 1`] = `\n\"<section class=\\\\\"arco-layout layout-demo\\\\\">\n  <div class=\\\\\"arco-layout-sider arco-layout-sider-light arco-layout-sider-has-trigger\\\\\" style=\\\\\"width: 200px;\\\\\">\n    <div class=\\\\\"arco-layout-sider-children\\\\\">\n      <div class=\\\\\"logo\\\\\"></div>\n      <div class=\\\\\"arco-menu arco-menu-light arco-menu-vertical\\\\\" style=\\\\\"width: 100%;\\\\\">\n        <div class=\\\\\"arco-menu-inner\\\\\">\n          <div class=\\\\\"arco-menu-item arco-menu-disabled\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-home\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n              <path d=\\\\\"M7 17 24 7l17 10v24H7V17Z\\\\\"></path>\n              <path d=\\\\\"M20 28h8v13h-8V28Z\\\\\"></path>\n            </svg> Menu 1\n            <!---->\n          </div>\n          <div class=\\\\\"arco-menu-item\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-calendar\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n              <path d=\\\\\"M7 22h34M14 5v8m20-8v8M8 41h32a1 1 0 0 0 1-1V10a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v30a1 1 0 0 0 1 1Z\\\\\"></path>\n            </svg> Menu 2\n            <!---->\n          </div>\n          <div class=\\\\\"arco-menu-item arco-menu-selected\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-calendar\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n              <path d=\\\\\"M7 22h34M14 5v8m20-8v8M8 41h32a1 1 0 0 0 1-1V10a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v30a1 1 0 0 0 1 1Z\\\\\"></path>\n            </svg> Menu 3\n            <!---->\n          </div>\n          <div class=\\\\\"arco-menu-inline\\\\\">\n            <div class=\\\\\"arco-menu-inline-header\\\\\">\n              <!--v-if--><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-calendar\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n                <path d=\\\\\"M7 22h34M14 5v8m20-8v8M8 41h32a1 1 0 0 0 1-1V10a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v30a1 1 0 0 0 1 1Z\\\\\"></path>\n              </svg> Navigation 1 <span class=\\\\\"arco-menu-icon-suffix is-open\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n            </div>\n            <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\">\n              <div class=\\\\\"arco-menu-inline-content\\\\\">\n                <div class=\\\\\"arco-menu-item\\\\\"><span class=\\\\\"arco-menu-indent-list\\\\\"><span class=\\\\\"arco-menu-indent\\\\\" style=\\\\\"\\\\\"></span></span><span class=\\\\\"arco-menu-item-inner\\\\\">Menu 1</span>\n                  <!---->\n                </div>\n                <div class=\\\\\"arco-menu-item\\\\\"><span class=\\\\\"arco-menu-indent-list\\\\\"><span class=\\\\\"arco-menu-indent\\\\\" style=\\\\\"\\\\\"></span></span><span class=\\\\\"arco-menu-item-inner\\\\\">Menu 2</span>\n                  <!---->\n                </div>\n                <div class=\\\\\"arco-menu-inline\\\\\">\n                  <div class=\\\\\"arco-menu-inline-header\\\\\"><span class=\\\\\"arco-menu-indent-list\\\\\"><span class=\\\\\"arco-menu-indent\\\\\" style=\\\\\"\\\\\"></span></span>Navigation 2<span class=\\\\\"arco-menu-icon-suffix\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span></div>\n                  <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\">\n                    <div class=\\\\\"arco-menu-inline-content\\\\\" style=\\\\\"display: none;\\\\\">\n                      <div class=\\\\\"arco-menu-item\\\\\"><span class=\\\\\"arco-menu-indent-list\\\\\"><span class=\\\\\"arco-menu-indent\\\\\" style=\\\\\"\\\\\"></span><span class=\\\\\"arco-menu-indent\\\\\" style=\\\\\"\\\\\"></span></span><span class=\\\\\"arco-menu-item-inner\\\\\">Menu 1</span>\n                        <!---->\n                      </div>\n                      <div class=\\\\\"arco-menu-item\\\\\"><span class=\\\\\"arco-menu-indent-list\\\\\"><span class=\\\\\"arco-menu-indent\\\\\" style=\\\\\"\\\\\"></span><span class=\\\\\"arco-menu-indent\\\\\" style=\\\\\"\\\\\"></span></span><span class=\\\\\"arco-menu-item-inner\\\\\">Menu 2</span>\n                        <!---->\n                      </div>\n                    </div>\n                  </transition-stub>\n                </div>\n                <div class=\\\\\"arco-menu-inline\\\\\">\n                  <div class=\\\\\"arco-menu-inline-header\\\\\"><span class=\\\\\"arco-menu-indent-list\\\\\"><span class=\\\\\"arco-menu-indent\\\\\" style=\\\\\"\\\\\"></span></span>Navigation 3<span class=\\\\\"arco-menu-icon-suffix\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span></div>\n                  <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\">\n                    <div class=\\\\\"arco-menu-inline-content\\\\\" style=\\\\\"display: none;\\\\\">\n                      <div class=\\\\\"arco-menu-item\\\\\"><span class=\\\\\"arco-menu-indent-list\\\\\"><span class=\\\\\"arco-menu-indent\\\\\" style=\\\\\"\\\\\"></span><span class=\\\\\"arco-menu-indent\\\\\" style=\\\\\"\\\\\"></span></span><span class=\\\\\"arco-menu-item-inner\\\\\">Menu 1</span>\n                        <!---->\n                      </div>\n                      <div class=\\\\\"arco-menu-item\\\\\"><span class=\\\\\"arco-menu-indent-list\\\\\"><span class=\\\\\"arco-menu-indent\\\\\" style=\\\\\"\\\\\"></span><span class=\\\\\"arco-menu-indent\\\\\" style=\\\\\"\\\\\"></span></span><span class=\\\\\"arco-menu-item-inner\\\\\">Menu 2</span>\n                        <!---->\n                      </div>\n                      <div class=\\\\\"arco-menu-item\\\\\"><span class=\\\\\"arco-menu-indent-list\\\\\"><span class=\\\\\"arco-menu-indent\\\\\" style=\\\\\"\\\\\"></span><span class=\\\\\"arco-menu-indent\\\\\" style=\\\\\"\\\\\"></span></span><span class=\\\\\"arco-menu-item-inner\\\\\">Menu 3</span>\n                        <!---->\n                      </div>\n                    </div>\n                  </transition-stub>\n                </div>\n              </div>\n            </transition-stub>\n          </div>\n          <div class=\\\\\"arco-menu-inline\\\\\">\n            <div class=\\\\\"arco-menu-inline-header\\\\\">\n              <!--v-if--><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-calendar\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n                <path d=\\\\\"M7 22h34M14 5v8m20-8v8M8 41h32a1 1 0 0 0 1-1V10a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v30a1 1 0 0 0 1 1Z\\\\\"></path>\n              </svg> Navigation 4 <span class=\\\\\"arco-menu-icon-suffix\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n            </div>\n            <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\">\n              <div class=\\\\\"arco-menu-inline-content\\\\\" style=\\\\\"display: none;\\\\\">\n                <div class=\\\\\"arco-menu-item\\\\\"><span class=\\\\\"arco-menu-indent-list\\\\\"><span class=\\\\\"arco-menu-indent\\\\\" style=\\\\\"\\\\\"></span></span><span class=\\\\\"arco-menu-item-inner\\\\\">Menu 1</span>\n                  <!---->\n                </div>\n                <div class=\\\\\"arco-menu-item\\\\\"><span class=\\\\\"arco-menu-indent-list\\\\\"><span class=\\\\\"arco-menu-indent\\\\\" style=\\\\\"\\\\\"></span></span><span class=\\\\\"arco-menu-item-inner\\\\\">Menu 2</span>\n                  <!---->\n                </div>\n                <div class=\\\\\"arco-menu-item\\\\\"><span class=\\\\\"arco-menu-indent-list\\\\\"><span class=\\\\\"arco-menu-indent\\\\\" style=\\\\\"\\\\\"></span></span><span class=\\\\\"arco-menu-item-inner\\\\\">Menu 3</span>\n                  <!---->\n                </div>\n              </div>\n            </transition-stub>\n          </div>\n        </div>\n        <!--v-if-->\n      </div>\n    </div>\n    <div class=\\\\\"arco-layout-sider-trigger arco-layout-sider-trigger-light\\\\\" style=\\\\\"width: 200px;\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-caret-left\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n        <path d=\\\\\"M13.171 24.937a1.2 1.2 0 0 1 0-1.874L30.051 9.56c.785-.629 1.949-.07 1.949.937v27.006c0 1.006-1.164 1.566-1.95.937L13.171 24.937Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n      </svg></div>\n  </div>\n  <section class=\\\\\"arco-layout\\\\\">\n    <header class=\\\\\"arco-layout-header\\\\\" style=\\\\\"padding-left: 20px;\\\\\"> Header </header>\n    <section class=\\\\\"arco-layout\\\\\" style=\\\\\"padding: 0px 24px;\\\\\">\n      <div role=\\\\\"list\\\\\" class=\\\\\"arco-breadcrumb\\\\\" style=\\\\\"margin: 16px 0px;\\\\\">\n        <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-breadcrumb-item\\\\\">Home\n          <!---->\n        </div>\n        <div aria-hidden=\\\\\"true\\\\\" class=\\\\\"arco-breadcrumb-item-separator\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-oblique-line\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n            <path d=\\\\\"M29.506 6.502 18.493 41.498\\\\\"></path>\n          </svg></div>\n        <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-breadcrumb-item\\\\\">List\n          <!---->\n        </div>\n        <div aria-hidden=\\\\\"true\\\\\" class=\\\\\"arco-breadcrumb-item-separator\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-oblique-line\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n            <path d=\\\\\"M29.506 6.502 18.493 41.498\\\\\"></path>\n          </svg></div>\n        <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-breadcrumb-item\\\\\">App\n          <!---->\n        </div>\n        <!---->\n      </div>\n      <main class=\\\\\"arco-layout-content\\\\\">Content</main>\n      <footer class=\\\\\"arco-layout-footer\\\\\">Footer</footer>\n    </section>\n  </section>\n</section>\"\n`;\n\nexports[`<layout> demo: render [resize] correctly 1`] = `\n\"<div class=\\\\\"layout-demo\\\\\">\n  <section class=\\\\\"arco-layout\\\\\">\n    <header class=\\\\\"arco-layout-header\\\\\">Header</header>\n    <section class=\\\\\"arco-layout\\\\\">\n      <div class=\\\\\"arco-resizebox arco-layout-sider arco-layout-sider-light\\\\\" style=\\\\\"width: 200px;\\\\\">\n        <div class=\\\\\"arco-layout-sider-children\\\\\"> Sider </div>\n        <!--v-if-->\n        <div class=\\\\\"arco-resizebox-trigger arco-resizebox-trigger-vertical arco-resizebox-direction-right\\\\\">\n          <!-- @slot 自定义内容 -->\n          <div class=\\\\\"arco-resizebox-trigger-icon-wrapper\\\\\">\n            <!-- @slot 自定义 icon --><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-drag-dot-vertical arco-resizebox-trigger-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n              <path d=\\\\\"M17 8h2v2h-2V8ZM17 23h2v2h-2v-2ZM17 38h2v2h-2v-2ZM29 8h2v2h-2V8ZM29 23h2v2h-2v-2ZM29 38h2v2h-2v-2Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n              <path d=\\\\\"M17 8h2v2h-2V8ZM17 23h2v2h-2v-2ZM17 38h2v2h-2v-2ZM29 8h2v2h-2V8ZM29 23h2v2h-2v-2ZM29 38h2v2h-2v-2Z\\\\\"></path>\n            </svg>\n          </div>\n        </div>\n      </div>\n      <main class=\\\\\"arco-layout-content\\\\\">Content</main>\n    </section>\n    <footer class=\\\\\"arco-layout-footer\\\\\">Footer</footer>\n  </section>\n</div>\"\n`;\n"
  },
  {
    "path": "packages/web-vue/components/layout/__test__/demo.test.ts",
    "content": "import demoTest from '../../../scripts/demo-test';\n\ndemoTest('layout');\n"
  },
  {
    "path": "packages/web-vue/components/layout/__test__/index.test.ts",
    "content": "import { mount } from '@vue/test-utils';\nimport Layout from '../index';\n\nconst { Sider } = Layout;\n\nconst _matchMedia = window.matchMedia;\n\ndescribe('Layout', () => {\n  beforeAll(() => {\n    Object.defineProperty(window, 'matchMedia', {\n      writable: true,\n      value: jest.fn().mockImplementation((query) => ({\n        matches: false,\n        media: query,\n        onchange: null,\n        addListener: jest.fn(), // Deprecated\n        removeListener: jest.fn(), // Deprecated\n        addEventListener: jest.fn(),\n        removeEventListener: jest.fn(),\n        dispatchEvent: jest.fn(),\n      })),\n    });\n  });\n\n  afterAll(() => {\n    Object.defineProperty(window, 'matchMedia', {\n      value: _matchMedia,\n    });\n  });\n\n  test('Collapse should work for Sider', async () => {\n    const wrapper = mount(Sider, {\n      props: {\n        collapsible: true,\n      },\n    });\n    expect(wrapper.find('.arco-layout-sider').attributes('style')).toContain(\n      'width: 200px'\n    );\n    const collapseTrigger = wrapper.find('.arco-layout-sider-trigger');\n    await collapseTrigger.trigger('click');\n    expect(wrapper.find('.arco-layout-sider').attributes('style')).toContain(\n      'width: 48px'\n    );\n    expect(wrapper.emitted('collapse')).toHaveLength(1);\n  });\n});\n"
  },
  {
    "path": "packages/web-vue/components/layout/content.vue",
    "content": "<template>\n  <main :class=\"classNames\">\n    <slot />\n  </main>\n</template>\n\n<script>\nimport { defineComponent } from 'vue';\nimport { getPrefixCls } from '../_utils/global-config';\n\nexport default defineComponent({\n  name: 'LayoutContent',\n  /**\n   * @zh 内容\n   * @en Content\n   * @slot default\n   */\n  setup() {\n    const prefixCls = getPrefixCls('layout-content');\n    const classNames = [prefixCls];\n\n    return {\n      classNames,\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/layout/context.ts",
    "content": "import { InjectionKey } from 'vue';\n\nexport interface LayoutSiderContext {\n  onSiderMount?: (id: string) => void;\n  onSiderUnMount?: (id: string) => void;\n}\n\nexport const LayoutSiderInjectionKey: InjectionKey<LayoutSiderContext> = Symbol(\n  'LayoutSiderInjectionKey'\n);\n\nexport interface SiderContext {\n  theme: string;\n  collapsed: boolean;\n  collapsedWidth: string | number;\n}\n\nexport const SiderInjectionKey: InjectionKey<SiderContext> =\n  Symbol('SiderInjectionKey');\n"
  },
  {
    "path": "packages/web-vue/components/layout/footer.vue",
    "content": "<template>\n  <footer :class=\"classNames\">\n    <slot />\n  </footer>\n</template>\n\n<script>\nimport { defineComponent } from 'vue';\nimport { getPrefixCls } from '../_utils/global-config';\n\nexport default defineComponent({\n  name: 'LayoutFooter',\n  /**\n   * @zh 内容\n   * @en Content\n   * @slot default\n   */\n  setup() {\n    const prefixCls = getPrefixCls('layout-footer');\n    const classNames = [prefixCls];\n\n    return {\n      classNames,\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/layout/header.vue",
    "content": "<template>\n  <header :class=\"classNames\">\n    <slot />\n  </header>\n</template>\n\n<script>\nimport { defineComponent } from 'vue';\nimport { getPrefixCls } from '../_utils/global-config';\n\nexport default defineComponent({\n  name: 'LayoutHeader',\n  /**\n   * @zh 内容\n   * @en Content\n   * @slot default\n   */\n  setup() {\n    const prefixCls = getPrefixCls('layout-header');\n    const classNames = [prefixCls];\n\n    return {\n      classNames,\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/layout/index.ts",
    "content": "import type { App } from 'vue';\nimport type { ArcoOptions } from '../_utils/types';\nimport { setGlobalConfig, getComponentPrefix } from '../_utils/global-config';\nimport _Layout from './layout.vue';\nimport _LayoutHeader from './header.vue';\nimport _LayoutContent from './content.vue';\nimport _LayoutFooter from './footer.vue';\nimport _LayoutSider from './sider.vue';\n\nconst Layout = Object.assign(_Layout, {\n  Header: _LayoutHeader,\n  Content: _LayoutContent,\n  Footer: _LayoutFooter,\n  Sider: _LayoutSider,\n  install: (app: App, options?: ArcoOptions) => {\n    setGlobalConfig(app, options);\n    const componentPrefix = getComponentPrefix(options);\n\n    app.component(componentPrefix + _Layout.name, _Layout);\n    app.component(componentPrefix + _LayoutHeader.name, _LayoutHeader);\n    app.component(componentPrefix + _LayoutContent.name, _LayoutContent);\n    app.component(componentPrefix + _LayoutFooter.name, _LayoutFooter);\n    app.component(componentPrefix + _LayoutSider.name, _LayoutSider);\n  },\n});\n\nexport type LayoutInstance = InstanceType<typeof _Layout>;\nexport type LayoutHeaderInstance = InstanceType<typeof _LayoutHeader>;\nexport type LayoutContentInstance = InstanceType<typeof _LayoutContent>;\nexport type LayoutFooterInstance = InstanceType<typeof _LayoutFooter>;\nexport type LayoutSiderInstance = InstanceType<typeof _LayoutSider>;\n\nexport type { LayoutProps, SiderProps } from './interface';\n\nexport {\n  _LayoutHeader as LayoutHeader,\n  _LayoutContent as LayoutContent,\n  _LayoutFooter as LayoutFooter,\n  _LayoutSider as LayoutSider,\n};\n\nexport default Layout;\n"
  },
  {
    "path": "packages/web-vue/components/layout/interface.ts",
    "content": "/**\n * @title Layout\n */\nexport interface LayoutProps {\n  /**\n   * @zh\n   * 表示子元素里有 Sider，一般不用指定。可用于服务端渲染时避免样式闪动\n   * @en\n   * Indicates that there is a `Sider` in the children. Generally no need to specify.\n   * It's used to avoid flicker during server-side rendering\n   */\n  hasSider?: boolean;\n}\n\n/**\n * @title Layout.Sider\n */\nexport interface SiderProps {\n  /**\n   * @zh 主题颜色\n   * @en Theme of layout\n   * @defaultValue light\n   */\n  theme?: 'dark' | 'light';\n  /**\n   * @zh 当前收起状态\n   * @en Whether sider is collapsed\n   */\n  collapsed?: boolean;\n  /**\n   * @zh 是否默认收起\n   * @en Whether sider is collapsed by default\n   */\n  defaultCollapsed?: boolean;\n  /**\n   * @zh 是否可收起\n   * @en Whether sider can be collapsed\n   */\n  collapsible?: boolean;\n  /**\n   * @zh 宽度\n   * @en Width of sider\n   * @defaultValue 200\n   */\n  width?: number | string;\n  /**\n   * @zh 收缩宽度，设置为 0 会出现特殊 trigger\n   * @en Width of collapsed sider\n   * @defaultValue 48\n   */\n  collapsedWidth?: number;\n  /**\n   * @zh 翻转折叠提示箭头的方向，当 Sider 在右边时可以使用\n   * @en Reverse the direction of the fold arrow, can be used when sider is on the right\n   */\n  reverseArrow?: boolean;\n  /**\n   * @zh 触发响应式布局的断点, 详见[响应式栅格](/vue/components/Grid)\n   * @en Breakpoint in responsive layout. See details [Grid](/vue/components/Grid)\n   */\n  breakpoint?: 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs';\n  /**\n   * @zh\n   * 可以用 ResizeBox 替换原生的 `aside` 标签，这个参数即 ResizeBox的 `directions` 参数。\n   * 详情请看 [ResizeBox](/vue/components/resize-box)。\n   * @en\n   * You can replace the native `aside` tag with `ResizeBox`, under which case this param will be the `directions` property of `ResizeBox`.\n   * See details [ResizeBox](/vue/components/resize-box).\n   */\n  resizeDirections?: string[];\n  /**\n   * @zh 隐藏底部折叠触发器\n   * @en Hide the trigger element to collapse sider at bottom.\n   */\n  hideTrigger?: boolean;\n}\n"
  },
  {
    "path": "packages/web-vue/components/layout/layout.vue",
    "content": "<template>\n  <section :class=\"classNames\">\n    <slot />\n  </section>\n</template>\n\n<script lang=\"tsx\">\nimport { defineComponent, computed, provide, ref } from 'vue';\nimport { getPrefixCls } from '../_utils/global-config';\nimport { LayoutSiderInjectionKey } from './context';\n\nexport default defineComponent({\n  name: 'Layout',\n  props: {\n    /**\n     * @zh 表示子元素里有 Sider，一般不用指定。可用于服务端渲染时避免样式闪动\n     * @en Indicates that there is a Sider in the sub-element, which generally does not need to be specified. Used to avoid style flicker when rendering on the server side.\n     */\n    hasSider: {\n      type: Boolean,\n    },\n  },\n  setup(props) {\n    const siderIds = ref<string[]>([]);\n    const prefixCls = getPrefixCls('layout');\n    const classNames = computed(() => [\n      prefixCls,\n      {\n        [`${prefixCls}-has-sider`]: props.hasSider || siderIds.value.length,\n      },\n    ]);\n\n    provide(LayoutSiderInjectionKey, {\n      onSiderMount: (id) => siderIds.value.push(id),\n      onSiderUnMount: (id) => {\n        siderIds.value = siderIds.value.filter((_id) => _id !== id);\n      },\n    });\n\n    return {\n      classNames,\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/layout/sider.vue",
    "content": "<template>\n  <component\n    :is=\"componentTag\"\n    :class=\"classNames\"\n    :style=\"{ width: siderWidth }\"\n    v-bind=\"resizeDirections ? { directions: resizeDirections } : {}\"\n  >\n    <div :class=\"`${prefixCls}-children`\">\n      <slot />\n    </div>\n    <div\n      v-if=\"showTrigger\"\n      :class=\"triggerClassNames\"\n      :style=\"{ width: siderWidth }\"\n      @click=\"toggleTrigger\"\n    >\n      <slot name=\"trigger\" :collapsed=\"localCollapsed\">\n        <div v-if=\"!reverseArrow\">\n          <IconLeft v-if=\"!localCollapsed\" />\n          <IconRight v-else />\n        </div>\n        <div v-else>\n          <IconLeft v-if=\"localCollapsed\" />\n          <IconRight v-else />\n        </div>\n      </slot>\n    </div>\n  </component>\n</template>\n\n<script lang=\"tsx\">\nimport {\n  computed,\n  defineComponent,\n  inject,\n  onMounted,\n  onUnmounted,\n  PropType,\n  provide,\n  reactive,\n  Ref,\n  ref,\n  toRefs,\n} from 'vue';\nimport IconRight from '../icon/icon-right';\nimport IconLeft from '../icon/icon-left';\nimport { getPrefixCls } from '../_utils/global-config';\nimport { isNumber } from '../_utils/is';\nimport useMergeState from '../_hooks/use-merge-state';\nimport { LayoutSiderInjectionKey, SiderInjectionKey } from './context';\nimport ResizeBox from '../resize-box';\nimport { useResponsive } from '../_hooks/use-responsive';\n\nconst generateId = (() => {\n  let i = 0;\n  return (prefix = '') => {\n    i += 1;\n    return `${prefix}${i}`;\n  };\n})();\n\nexport default defineComponent({\n  name: 'LayoutSider',\n  components: {\n    IconLeft,\n    IconRight,\n    ResizeBox,\n  },\n  props: {\n    /**\n     * @zh 主题颜色\n     * @en Theme\n     */\n    theme: {\n      type: String as PropType<'dark' | 'light'>,\n      default: 'light',\n    },\n    /**\n     * @zh 当前收起状态\n     * @en Current collapsed state\n     */\n    collapsed: {\n      type: Boolean,\n      default: undefined,\n    },\n    /**\n     * @zh 默认的收起状态\n     * @en The default collapsed state\n     */\n    defaultCollapsed: {\n      type: Boolean,\n    },\n    /**\n     * @zh 是否可收起\n     * @en Whether is collapsible\n     */\n    collapsible: {\n      type: Boolean,\n    },\n    /**\n     * @zh 宽度\n     * @en Width\n     */\n    width: {\n      type: Number,\n      default: 200,\n    },\n    /**\n     * @zh 收缩宽度\n     * @en Collapsed width\n     */\n    collapsedWidth: {\n      type: Number,\n      default: 48,\n    },\n    /**\n     * @zh 翻转折叠提示箭头的方向，当 Sider 在右边时可以使用\n     * @en Flip and fold the direction of the hint arrow, which can be used when Sider is on the right\n     */\n    reverseArrow: {\n      type: Boolean,\n    },\n    /**\n     * @zh 触发响应式布局的断点, 详见[响应式栅格](/vue/component/grid)\n     * @en Trigger breakpoints for responsive layout, see [Responsive Grid](/vue/component/grid) for details\n     */\n    breakpoint: {\n      type: String as PropType<'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs'>,\n    },\n    /**\n     * @zh 可以用 ResizeBox 替换原生的 `aside` 标签，这个参数即 ResizeBox的 `directions` 参数。详情请看 [ResizeBox](/vue/component/resize-box)。\n     * @en Can replace the native `aside` tag with ResizeBox. This is the `directions` parameter of ResizeBox. For details, please see [ResizeBox](/vue/component/resize-box)\n     */\n    resizeDirections: {\n      type: Array as PropType<Array<'left' | 'right' | 'top' | 'bottom'>>,\n      default: undefined,\n    },\n    /**\n     * @zh 隐藏底部折叠触发器\n     * @en Whether to hide the bottom fold trigger\n     */\n    hideTrigger: {\n      type: Boolean,\n    },\n  },\n  emits: [\n    /**\n     * @zh 展开-收起时的事件，有点击 trigger 以及响应式反馈两种方式可以触发\n     * @en Events on expand/collapse. There are two ways to trigger click trigger and responsive feedback\n     * @param {boolean} collapsed\n     * @param {'clickTrigger'|'responsive'} type\n     */\n    'collapse',\n    'update:collapsed',\n    /**\n     * @zh 触发响应式布局断点时的事件\n     * @en Events when a responsive layout breakpoint is triggered\n     * @param {boolean} collapsed\n     */\n    'breakpoint',\n  ],\n  /**\n   * @zh 自定义底部折叠触发器\n   * @en Custom bottom folding trigger\n   * @slot trigger\n   * @binding {boolean} collapsed\n   */\n  setup(props, { emit }) {\n    const {\n      theme,\n      collapsed,\n      defaultCollapsed,\n      collapsible,\n      hideTrigger,\n      breakpoint,\n      collapsedWidth,\n      resizeDirections,\n    } = toRefs(props);\n\n    const [localCollapsed, setLocalCollapsed] = useMergeState(\n      defaultCollapsed.value,\n      reactive({\n        value: collapsed,\n      })\n    );\n\n    const componentTag = computed(() =>\n      resizeDirections.value ? 'ResizeBox' : 'div'\n    );\n\n    const showTrigger = computed(() => collapsible.value && !hideTrigger.value);\n\n    // classNames\n    const prefixCls = getPrefixCls('layout-sider');\n    const classNames = computed(() => [\n      prefixCls,\n      {\n        [`${prefixCls}-light`]: theme.value === 'light',\n        [`${prefixCls}-has-trigger`]: showTrigger.value,\n        [`${prefixCls}-collapsed`]: collapsed.value,\n      },\n    ]);\n\n    // Width calculation\n    const siderWidth = computed(() => {\n      const { width, collapsedWidth } = props;\n      const rawWidth = localCollapsed.value ? collapsedWidth : width;\n      return isNumber(rawWidth) ? `${rawWidth}px` : String(rawWidth);\n    });\n\n    // trigger classNames\n    const triggerClassNames = computed(() => [\n      `${prefixCls}-trigger`,\n      {\n        [`${prefixCls}-trigger-light`]: theme.value === 'light',\n      },\n    ]);\n\n    const toggleTrigger = () => {\n      const newCollapsed = !localCollapsed.value;\n      setLocalCollapsed(newCollapsed);\n      emit('update:collapsed', newCollapsed);\n      emit('collapse', newCollapsed, 'clickTrigger');\n    };\n\n    // Subscription Responsive\n    useResponsive(breakpoint, (checked) => {\n      const newCollapsed = !checked;\n      if (newCollapsed !== localCollapsed.value) {\n        setLocalCollapsed(newCollapsed);\n        emit('update:collapsed', newCollapsed);\n        emit('collapse', newCollapsed, 'responsive');\n        emit('breakpoint', newCollapsed);\n      }\n    });\n\n    const uniqueId = generateId('__arco_layout_sider');\n    const siderHook = inject(LayoutSiderInjectionKey, undefined);\n    onMounted(() => {\n      siderHook?.onSiderMount?.(uniqueId);\n    });\n    onUnmounted(() => {\n      siderHook?.onSiderUnMount?.(uniqueId);\n    });\n\n    // 提供 context\n    provide(\n      SiderInjectionKey,\n      reactive({\n        theme,\n        collapsed: localCollapsed as Ref<boolean>,\n        collapsedWidth,\n      })\n    );\n\n    return {\n      componentTag,\n      prefixCls,\n      classNames,\n      triggerClassNames,\n      localCollapsed,\n      siderWidth,\n      showTrigger,\n      toggleTrigger,\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/layout/style/index.less",
    "content": "@import './token.less';\n\n@layout-prefix-cls: ~'@{prefix}-layout';\n\n.@{layout-prefix-cls} {\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  margin: 0;\n  padding: 0;\n\n  &-sider {\n    position: relative;\n    flex: none; // flex: 0 0 auto; 当右侧文字过长的时候不会被压缩。\n    width: auto;\n    margin: 0;\n    padding: 0;\n    background: @layout-sider-background;\n    transition: width @transition-duration-2\n      @transition-timing-function-standard;\n\n    &-children {\n      height: 100%;\n      overflow: auto;\n    }\n\n    &-collapsed &-children {\n      /* width */\n      &::-webkit-scrollbar {\n        width: 0;\n      }\n\n      // /* Track */\n      // &::-webkit-scrollbar-track {\n      //   background: #f1f1f1;\n      // }\n\n      // /* Handle */\n      // &::-webkit-scrollbar-thumb {\n      //   background: #888;\n      // }\n\n      // /* Handle on hover */\n      // &::-webkit-scrollbar-thumb:hover {\n      //   background: #555;\n      // }\n    }\n\n    &-has-trigger {\n      box-sizing: border-box;\n      padding-bottom: @layout-trigger-height;\n    }\n\n    &-trigger {\n      z-index: 1;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      box-sizing: border-box;\n      width: 100%;\n      height: @layout-trigger-height;\n      color: var(~'@{arco-cssvars-prefix}-color-white');\n      background: @layout-trigger-dark-color;\n      cursor: pointer;\n      transition: width @transition-duration-2\n        @transition-timing-function-standard;\n\n      &-light {\n        color: @layout-font-color;\n        background: @layout-sider-background-light;\n        border-top: 1px solid @layout-trigger-light-color-border;\n      }\n    }\n  }\n\n  &-sider-light {\n    background: @layout-sider-background-light;\n    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.08);\n  }\n\n  &-header {\n    flex: 0 0 auto;\n    box-sizing: border-box;\n    margin: 0;\n  }\n\n  &-content {\n    flex: 1;\n  }\n\n  &-footer {\n    flex: 0 0 auto;\n    margin: 0;\n  }\n}\n\n.@{layout-prefix-cls}-has-sider {\n  flex-direction: row;\n\n  > .@{layout-prefix-cls},\n  > .@{layout-prefix-cls}-content {\n    overflow-x: hidden;\n  }\n}\n"
  },
  {
    "path": "packages/web-vue/components/layout/style/index.ts",
    "content": "import '../../style/index.less';\nimport './index.less';\n"
  },
  {
    "path": "packages/web-vue/components/layout/style/token.less",
    "content": "@import '../../style/theme/index.less';\n\n@layout-trigger-height: 48px;\n\n// Layout Theme Dark(Default)\n@layout-sider-background: var(~'@{arco-cssvars-prefix}-color-menu-dark-bg');\n@layout-font-color-dark: var(~'@{arco-cssvars-prefix}-color-white');\n@layout-font-color: var(~'@{arco-cssvars-prefix}-color-text-1');\n@layout-trigger-dark-color: rgba(255, 255, 255, 0.2);\n\n// Layout Theme Light\n@layout-sider-background-light: var(~'@{arco-cssvars-prefix}-color-menu-light-bg');\n@layout-trigger-light-color-border: var(~'@{arco-cssvars-prefix}-color-bg-5');\n"
  },
  {
    "path": "packages/web-vue/components/link/CHANGELOG.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.37.4\n\n`2022-09-30`\n\n### 💎 Enhancement\n\n- Use the flex layout method to solve the centering problem when the icon size is inconsistent ([#1702](https://github.com/arco-design/arco-design-vue/pull/1702))\n\n\n## 2.37.0\n\n`2022-09-16`\n\n### 🆕 Feature\n\n- add loading prop ([#1616](https://github.com/arco-design/arco-design-vue/pull/1616))\n\n\n## 2.12.0\n\n`2021-12-24`\n\n### 🆕 Feature\n\n- Add click event ([#450](https://github.com/arco-design/arco-design-vue/pull/450))\n\n\n## 2.7.0\n\n`2021-11-26`\n\n### 🆕 Feature\n\n- Add icon setting via `icon` property/slot property or slot ([#226](https://github.com/arco-design/arco-design-vue/pull/226))\n\n"
  },
  {
    "path": "packages/web-vue/components/link/CHANGELOG.zh-CN.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.37.4\n\n`2022-09-30`\n\n### 💎 功能优化\n\n- 使用 flex 布局方式，解决 icon 大小不一致时的居中问题 ([#1702](https://github.com/arco-design/arco-design-vue/pull/1702))\n\n\n## 2.37.0\n\n`2022-09-16`\n\n### 🆕 新增功能\n\n- 添加加载中状态属性 ([#1616](https://github.com/arco-design/arco-design-vue/pull/1616))\n\n\n## 2.12.0\n\n`2021-12-24`\n\n### 🆕 新增功能\n\n- 增加 click 事件 ([#450](https://github.com/arco-design/arco-design-vue/pull/450))\n\n\n## 2.7.0\n\n`2021-11-26`\n\n### 🆕 新增功能\n\n- 增加通过 `icon` 属性/插槽设置图标 ([#226](https://github.com/arco-design/arco-design-vue/pull/226))\n\n"
  },
  {
    "path": "packages/web-vue/components/link/README.en-US.md",
    "content": "```yaml\nmeta:\n  type: Component\n  category: Common\ntitle: Link\ndescription: The basic style of the link.\n```\n\n*Auto translate by google.*\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/status.md\n\n@import ./__demo__/hoverable.md\n\n@import ./__demo__/icon.md\n\n@import ./__demo__/loading.md\n\n## API\n\n\n\n### `<link>` Props\n\n|Attribute|Description|Type|Default|version|\n|---|---|---|:---:|:---|\n|href|Link address|`string`|`-`||\n|status|Link status|`'normal' \\| 'warning' \\| 'success' \\| 'danger'`|`'normal'`||\n|hoverable|Whether to hide background when hover|`boolean`|`true`|2.7.0|\n|icon|icon|`boolean`|`false`|2.7.0|\n|loading|Whether the link is in the loading state|`boolean`|`false`|2.37.0|\n|disabled|Whether the link is disabled|`boolean`|`false`||\n### `<link>` Events\n\n|Event Name|Description|Parameters|\n|---|---|---|\n|click|Emitted when the link is clicked|ev: `MouseEvent`|\n\n\n"
  },
  {
    "path": "packages/web-vue/components/link/README.zh-CN.md",
    "content": "```yaml\nmeta:\n  type: 组件\n  category: 通用\ntitle: 链接 Link\ndescription: 链接的基本样式。\n```\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/status.md\n\n@import ./__demo__/hoverable.md\n\n@import ./__demo__/icon.md\n\n@import ./__demo__/loading.md\n\n## API\n\n\n\n### `<link>` Props\n\n|参数名|描述|类型|默认值|版本|\n|---|---|---|:---:|:---|\n|href|链接地址|`string`|`-`||\n|status|链接的状态|`'normal' \\| 'warning' \\| 'success' \\| 'danger'`|`'normal'`||\n|hoverable|鼠标悬浮时存在底色|`boolean`|`true`|2.7.0|\n|icon|图标|`boolean`|`false`|2.7.0|\n|loading|链接是否为加载中状态|`boolean`|`false`|2.37.0|\n|disabled|链接是否禁用|`boolean`|`false`||\n### `<link>` Events\n\n|事件名|描述|参数|\n|---|---|---|\n|click|点击时触发|ev: `MouseEvent`|\n\n\n"
  },
  {
    "path": "packages/web-vue/components/link/TEMPLATE.md",
    "content": "## zh-CN\n```yaml\nmeta:\n  type: 组件\n  category: 通用\ntitle: 链接 Link\ndescription: 链接的基本样式。\n```\n---\n## en-US\n```yaml\nmeta:\n  type: Component\n  category: Common\ntitle: Link\ndescription: The basic style of the link.\n```\n---\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/status.md\n\n@import ./__demo__/hoverable.md\n\n@import ./__demo__/icon.md\n\n@import ./__demo__/loading.md\n\n## API\n\n\n%%API(link.vue)%%\n"
  },
  {
    "path": "packages/web-vue/components/link/__demo__/basic.md",
    "content": "```yaml\ntitle:\n  zh-CN: 基本用法\n  en-US: Basic Usage\n```\n\n## zh-CN\n\n链接的基本用法。\n\n---\n\n## en-US\n\nBasic usage of link.\n\n---\n\n```vue\n<template>\n  <a-space>\n    <a-link href=\"link\">Link</a-link>\n    <a-link href=\"link\" disabled>Link</a-link>\n  </a-space>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/link/__demo__/hoverable.md",
    "content": "```yaml\ntitle:\n  zh-CN: 悬浮状态底色\n  en-US: hoverable\n```\n\n## zh-CN\n\n可以通过 hoverable 属性设置是否在悬浮状态时隐藏底色。\n\n\n---\n\n## en-US\n\nYou can use the hoverable property to set whether to hide the background color of the Link component when it is hovering.\n\n---\n\n```vue\n<template>\n  <a-space>\n    <a-link href=\"link\" :hoverable=\"false\">Link</a-link>\n    <a-link href=\"link\" status=\"danger\" :hoverable=\"false\">Link</a-link>\n  </a-space>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/link/__demo__/icon.md",
    "content": "```yaml\ntitle:\n  zh-CN: 图标\n  en-US: Icon\n```\n\n## zh-CN\n\n通过 `icon` 设置带图标的链接，设置为 `true` 时候显示默认图标。\n\n---\n\n## en-US\n\nCustomize icon node. If true, the default icon will be displayed.\n\n\n---\n\n```vue\n<template>\n  <div>\n    <a-space>\n      <a-link href=\"link\" icon>Link</a-link>\n      <a-link href=\"link\" disabled icon>Link</a-link>\n    </a-space>\n  </div>\n  <div>\n    <a-space>\n      <a-link href=\"link\">\n        <template #icon>\n          <icon-edit />\n        </template>\n        Link\n      </a-link>\n      <a-link href=\"link\" disabled>\n        <template #icon>\n          <icon-edit />\n        </template>\n        Link\n      </a-link>\n    </a-space>\n  </div>\n</template>\n\n<script>\n  import { IconEdit } from '@arco-design/web-vue/es/icon';\n\n  export default {\n    components: { IconEdit }\n  };\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/link/__demo__/loading.md",
    "content": "```yaml\ntitle:\n  zh-CN: 加载中状态\n  en-US: Loading\n```\n\n## zh-CN\n\n通过设置 `loading` 可以让链接处于加载中状态。处于加载中状态的链接不会触发点击事件。\n\n---\n\n## en-US\n\nThe link can be in the loading state by setting `loading`. The link in the loading state will not trigger the `click` event.\n\n\n---\n\n```vue\n<template>\n  <a-space>\n    <a-link loading>Link</a-link>\n    <a-link :loading=\"loading1\" @click=\"handleClick1\">Link</a-link>\n    <a-link :loading=\"loading2\" @click=\"handleClick2\">\n      <template #icon>\n        <icon-edit />\n      </template>\n      Link\n    </a-link>\n  </a-space>\n</template>\n\n<script>\nimport { ref } from 'vue';\nimport { IconEdit } from '@arco-design/web-vue/es/icon';\n\nexport default {\n  components: {\n    IconEdit,\n  },\n  setup() {\n    const loading1 = ref(false);\n    const loading2 = ref(false);\n\n    const handleClick1 = () => {\n      loading1.value = true;\n      setTimeout(() => {\n        loading1.value = false;\n      }, 3000);\n    }\n    const handleClick2 = () => {\n      loading2.value = true;\n      setTimeout(() => {\n        loading2.value = false;\n      }, 3000);\n    }\n\n    return {\n      loading1,\n      loading2,\n      handleClick1,\n      handleClick2,\n    };\n  }\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/link/__demo__/status.md",
    "content": "```yaml\ntitle:\n  zh-CN: 链接的状态\n  en-US: Status\n```\n\n## zh-CN\n\n链接的状态分为 `normal` - **正常（默认）**、`success` - **成功**、`warning` - **警告**、`danger` - **危险**四种。\n\n---\n\n## en-US\n\nThe link status is divided into four types: `normal` (default), `success`, `warning` and `danger`.\n\n---\n\n```vue\n<template>\n  <a-space direction=\"vertical\">\n    <a-space>\n      <a-link href=\"link\">Normal Link</a-link>\n      <a-link href=\"link\" disabled>Normal Link</a-link>\n    </a-space>\n    <a-space>\n      <a-link href=\"link\" status=\"success\">Success Link</a-link>\n      <a-link href=\"link\" status=\"success\" disabled>Success Link</a-link>\n    </a-space>\n    <a-space>\n      <a-link href=\"link\" status=\"warning\">Warning Link</a-link>\n      <a-link href=\"link\" status=\"warning\" disabled>Warning Link</a-link>\n    </a-space>\n    <a-space>\n      <a-link href=\"link\" status=\"danger\">Danger Link</a-link>\n      <a-link href=\"link\" status=\"danger\" disabled>Danger Link</a-link>\n    </a-space>\n  </a-space>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/link/__test__/__snapshots__/demo.test.ts.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`<link> demo: render [basic] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 8px; row-gap: 8px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><a href=\\\\\"link\\\\\" class=\\\\\"arco-link arco-link-status-normal\\\\\">\n      <!--v-if-->Link\n    </a></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><a class=\\\\\"arco-link arco-link-status-normal arco-link-disabled\\\\\">\n      <!--v-if-->Link\n    </a></div>\n</div>\"\n`;\n\nexports[`<link> demo: render [hoverable] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 8px; row-gap: 8px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><a href=\\\\\"link\\\\\" class=\\\\\"arco-link arco-link-status-normal arco-link-hoverless\\\\\">\n      <!--v-if-->Link\n    </a></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><a href=\\\\\"link\\\\\" class=\\\\\"arco-link arco-link-status-danger arco-link-hoverless\\\\\">\n      <!--v-if-->Link\n    </a></div>\n</div>\"\n`;\n\nexports[`<link> demo: render [icon] correctly 1`] = `\n\"<div>\n  <div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 8px; row-gap: 8px;\\\\\">\n    <!---->\n    <div class=\\\\\"arco-space-item\\\\\"><a href=\\\\\"link\\\\\" class=\\\\\"arco-link arco-link-status-normal arco-link-with-icon\\\\\"><span class=\\\\\"arco-link-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-link\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"m14.1 25.414-4.95 4.95a6 6 0 0 0 8.486 8.485l8.485-8.485a6 6 0 0 0 0-8.485m7.779.707 4.95-4.95a6 6 0 1 0-8.486-8.485l-8.485 8.485a6 6 0 0 0 0 8.485\\\\\"></path></svg></span>Link</a></div>\n    <!---->\n    <div class=\\\\\"arco-space-item\\\\\"><a class=\\\\\"arco-link arco-link-status-normal arco-link-disabled arco-link-with-icon\\\\\"><span class=\\\\\"arco-link-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-link\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"m14.1 25.414-4.95 4.95a6 6 0 0 0 8.486 8.485l8.485-8.485a6 6 0 0 0 0-8.485m7.779.707 4.95-4.95a6 6 0 1 0-8.486-8.485l-8.485 8.485a6 6 0 0 0 0 8.485\\\\\"></path></svg></span>Link</a></div>\n  </div>\n</div>\n<div>\n  <div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 8px; row-gap: 8px;\\\\\">\n    <!---->\n    <div class=\\\\\"arco-space-item\\\\\"><a href=\\\\\"link\\\\\" class=\\\\\"arco-link arco-link-status-normal arco-link-with-icon\\\\\"><span class=\\\\\"arco-link-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-edit\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"m30.48 19.038 5.733-5.734a1 1 0 0 0 0-1.414l-5.586-5.586a1 1 0 0 0-1.414 0l-5.734 5.734m7 7L15.763 33.754a1 1 0 0 1-.59.286l-6.048.708a1 1 0 0 1-1.113-1.069l.477-6.31a1 1 0 0 1 .29-.631l14.7-14.7m7 7-7-7M6 42h36\\\\\"></path></svg></span> Link </a></div>\n    <!---->\n    <div class=\\\\\"arco-space-item\\\\\"><a class=\\\\\"arco-link arco-link-status-normal arco-link-disabled arco-link-with-icon\\\\\"><span class=\\\\\"arco-link-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-edit\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"m30.48 19.038 5.733-5.734a1 1 0 0 0 0-1.414l-5.586-5.586a1 1 0 0 0-1.414 0l-5.734 5.734m7 7L15.763 33.754a1 1 0 0 1-.59.286l-6.048.708a1 1 0 0 1-1.113-1.069l.477-6.31a1 1 0 0 1 .29-.631l14.7-14.7m7 7-7-7M6 42h36\\\\\"></path></svg></span> Link </a></div>\n  </div>\n</div>\"\n`;\n\nexports[`<link> demo: render [loading] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 8px; row-gap: 8px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><a class=\\\\\"arco-link arco-link-status-normal arco-link-loading arco-link-with-icon\\\\\"><span class=\\\\\"arco-link-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-loading\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M42 24c0 9.941-8.059 18-18 18S6 33.941 6 24 14.059 6 24 6\\\\\"></path></svg></span>Link</a></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><a class=\\\\\"arco-link arco-link-status-normal\\\\\">\n      <!--v-if-->Link\n    </a></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><a class=\\\\\"arco-link arco-link-status-normal arco-link-with-icon\\\\\"><span class=\\\\\"arco-link-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-edit\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"m30.48 19.038 5.733-5.734a1 1 0 0 0 0-1.414l-5.586-5.586a1 1 0 0 0-1.414 0l-5.734 5.734m7 7L15.763 33.754a1 1 0 0 1-.59.286l-6.048.708a1 1 0 0 1-1.113-1.069l.477-6.31a1 1 0 0 1 .29-.631l14.7-14.7m7 7-7-7M6 42h36\\\\\"></path></svg></span> Link </a></div>\n</div>\"\n`;\n\nexports[`<link> demo: render [status] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-vertical\\\\\" style=\\\\\"column-gap: 8px; row-gap: 8px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 8px; row-gap: 8px;\\\\\">\n      <!---->\n      <div class=\\\\\"arco-space-item\\\\\"><a href=\\\\\"link\\\\\" class=\\\\\"arco-link arco-link-status-normal\\\\\">\n          <!--v-if-->Normal Link\n        </a></div>\n      <!---->\n      <div class=\\\\\"arco-space-item\\\\\"><a class=\\\\\"arco-link arco-link-status-normal arco-link-disabled\\\\\">\n          <!--v-if-->Normal Link\n        </a></div>\n    </div>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 8px; row-gap: 8px;\\\\\">\n      <!---->\n      <div class=\\\\\"arco-space-item\\\\\"><a href=\\\\\"link\\\\\" class=\\\\\"arco-link arco-link-status-success\\\\\">\n          <!--v-if-->Success Link\n        </a></div>\n      <!---->\n      <div class=\\\\\"arco-space-item\\\\\"><a class=\\\\\"arco-link arco-link-status-success arco-link-disabled\\\\\">\n          <!--v-if-->Success Link\n        </a></div>\n    </div>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 8px; row-gap: 8px;\\\\\">\n      <!---->\n      <div class=\\\\\"arco-space-item\\\\\"><a href=\\\\\"link\\\\\" class=\\\\\"arco-link arco-link-status-warning\\\\\">\n          <!--v-if-->Warning Link\n        </a></div>\n      <!---->\n      <div class=\\\\\"arco-space-item\\\\\"><a class=\\\\\"arco-link arco-link-status-warning arco-link-disabled\\\\\">\n          <!--v-if-->Warning Link\n        </a></div>\n    </div>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 8px; row-gap: 8px;\\\\\">\n      <!---->\n      <div class=\\\\\"arco-space-item\\\\\"><a href=\\\\\"link\\\\\" class=\\\\\"arco-link arco-link-status-danger\\\\\">\n          <!--v-if-->Danger Link\n        </a></div>\n      <!---->\n      <div class=\\\\\"arco-space-item\\\\\"><a class=\\\\\"arco-link arco-link-status-danger arco-link-disabled\\\\\">\n          <!--v-if-->Danger Link\n        </a></div>\n    </div>\n  </div>\n</div>\"\n`;\n"
  },
  {
    "path": "packages/web-vue/components/link/__test__/demo.test.ts",
    "content": "import demoTest from '../../../scripts/demo-test';\n\ndemoTest('link');\n"
  },
  {
    "path": "packages/web-vue/components/link/__test__/index.test.ts",
    "content": "import { mount } from '@vue/test-utils';\nimport Link from '../index';\n\ndescribe('Link', () => {\n  test('should remove href attribute', () => {\n    const wrapper = mount(Link, {\n      props: {\n        disabled: true,\n      },\n    });\n    const href = wrapper.find('a').attributes('href');\n\n    expect(href).toBeUndefined();\n  });\n});\n"
  },
  {
    "path": "packages/web-vue/components/link/index.ts",
    "content": "import type { App } from 'vue';\nimport type { ArcoOptions } from '../_utils/types';\nimport { setGlobalConfig, getComponentPrefix } from '../_utils/global-config';\nimport _Link from './link.vue';\n\nconst Link = Object.assign(_Link, {\n  install: (app: App, options?: ArcoOptions) => {\n    setGlobalConfig(app, options);\n    const componentPrefix = getComponentPrefix(options);\n\n    app.component(componentPrefix + _Link.name, _Link);\n  },\n});\n\nexport type LinkInstance = InstanceType<typeof _Link>;\n\nexport default Link;\n"
  },
  {
    "path": "packages/web-vue/components/link/link.vue",
    "content": "<template>\n  <a :href=\"disabled ? undefined : href\" :class=\"cls\" @click=\"handleClick\">\n    <span v-if=\"loading || showIcon\" :class=\"`${prefixCls}-icon`\">\n      <icon-loading v-if=\"loading\" />\n      <slot v-else name=\"icon\">\n        <icon-link />\n      </slot>\n    </span>\n    <slot />\n  </a>\n</template>\n\n<script lang=\"ts\">\nimport type { PropType } from 'vue';\nimport { computed, defineComponent } from 'vue';\nimport { getPrefixCls } from '../_utils/global-config';\nimport { Status } from '../_utils/constant';\nimport IconLink from '../icon/icon-link';\nimport IconLoading from '../icon/icon-loading';\nimport { hasPropOrSlot } from '../_utils/use-prop-or-slot';\n\nexport default defineComponent({\n  name: 'Link',\n  components: { IconLink, IconLoading },\n  props: {\n    /**\n     * @zh 链接地址\n     * @en Link address\n     */\n    href: String,\n    /**\n     * @zh 链接的状态\n     * @en Link status\n     * @values 'normal','warning','success','danger'\n     */\n    status: {\n      type: String as PropType<Status>,\n      default: 'normal',\n    },\n    /**\n     * @zh 鼠标悬浮时存在底色\n     * @en Whether to hide background when hover\n     * @defaultValue true\n     * @version 2.7.0\n     */\n    hoverable: {\n      type: Boolean,\n      default: true,\n    },\n    /**\n     * @zh 图标\n     * @en icon\n     * @version 2.7.0\n     */\n    icon: Boolean,\n    /**\n     * @zh 链接是否为加载中状态\n     * @en Whether the link is in the loading state\n     * @version 2.37.0\n     */\n    loading: Boolean,\n    /**\n     * @zh 链接是否禁用\n     * @en Whether the link is disabled\n     */\n    disabled: Boolean,\n  },\n  emits: {\n    /**\n     * @zh 点击时触发\n     * @en Emitted when the link is clicked\n     * @property {MouseEvent} ev\n     */\n    click: (ev: MouseEvent) => true,\n  },\n  setup(props, { slots, emit }) {\n    const prefixCls = getPrefixCls('link');\n    const showIcon = hasPropOrSlot(props, slots, 'icon');\n\n    const handleClick = (ev: MouseEvent) => {\n      if (props.disabled || props.loading) {\n        ev.preventDefault();\n        return;\n      }\n      emit('click', ev);\n    };\n\n    const cls = computed(() => [\n      prefixCls,\n      `${prefixCls}-status-${props.status}`,\n      {\n        [`${prefixCls}-disabled`]: props.disabled,\n        [`${prefixCls}-loading`]: props.loading,\n        [`${prefixCls}-hoverless`]: !props.hoverable,\n        [`${prefixCls}-with-icon`]: props.loading || showIcon.value,\n      },\n    ]);\n\n    return {\n      cls,\n      prefixCls,\n      showIcon,\n      handleClick,\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/link/style/index.less",
    "content": "@import './token.less';\n\n@link-prefix-cls: ~'@{prefix}-link';\n\n.@{link-prefix-cls} {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: @link-padding-vertical @link-padding-horizontal;\n  color: @link-color-text;\n  font-size: @link-font-size;\n  line-height: @link-line-height;\n  text-decoration: none;\n  background-color: @color-transparent;\n  border-radius: @link-border-radius;\n  cursor: pointer;\n  transition: all @transition-duration-1 @transition-timing-function-linear;\n\n  &:hover {\n    color: @link-color-text_hover;\n    background-color: @link-color-bg_hover;\n  }\n\n  &:active {\n    color: @link-color-text_active;\n    background-color: @link-color-bg_active;\n    transition: none;\n  }\n\n  &&-hoverless {\n    display: inline;\n    padding: 0;\n    background-color: unset;\n\n    &:active,\n    &:hover {\n      background-color: unset;\n    }\n  }\n\n  &&-disabled {\n    color: @link-color-text_disabled;\n    background: none;\n    cursor: not-allowed;\n  }\n\n  &&-loading {\n    color: @link-color-text_loading;\n    background: none;\n    cursor: default;\n  }\n\n  // 不同状态\n  &-status-success {\n    color: @link-color-text_success;\n\n    &:hover {\n      color: @link-color-text_success_hover;\n    }\n\n    &:active {\n      color: @link-color-text_success_active;\n    }\n  }\n\n  &-status-success&-disabled {\n    color: @link-color-text_success_disabled;\n  }\n\n  &-status-success&-loading {\n    color: @link-color-text_success_loading;\n  }\n\n  &-status-danger {\n    color: @link-color-text_error;\n\n    &:hover {\n      color: @link-color-text_error_hover;\n    }\n\n    &:active {\n      color: @link-color-text_error_active;\n    }\n  }\n\n  &-status-danger&-disabled {\n    color: @link-color-text_error_disabled;\n  }\n\n  &-status-danger&-loading {\n    color: @link-color-text_error_loading;\n  }\n\n  &-status-warning {\n    color: @link-color-text_warning;\n\n    &:hover {\n      color: @link-color-text_warning_hover;\n    }\n\n    &:active {\n      color: @link-color-text_warning_active;\n    }\n  }\n\n  &-status-warning&-disabled {\n    color: @link-color-text_warning_disabled;\n  }\n\n  &-status-warning&-loading {\n    color: @link-color-text_warning_loading;\n  }\n\n  // 链接图标\n  &-icon {\n    margin-right: @link-margin-icon-right;\n    font-size: @link-size-icon;\n    vertical-align: middle;\n  }\n}\n"
  },
  {
    "path": "packages/web-vue/components/link/style/index.ts",
    "content": "import '../../style/index.less';\nimport './index.less';\n"
  },
  {
    "path": "packages/web-vue/components/link/style/token.less",
    "content": "@import '../../style/theme/index.less';\n\n@link-font-size: @font-size-body-3;\n@link-color-bg_hover: var(~'@{arco-cssvars-prefix}-color-fill-2');\n@link-color-bg_active: var(~'@{arco-cssvars-prefix}-color-fill-3');\n@link-padding-horizontal: @spacing-2;\n@link-line-height: @line-height-base;\n\n@link-color-text: @color-link-6;\n@link-color-text_hover: @link-color-text;\n@link-color-text_active: @link-color-text;\n@link-color-text_disabled: var(~'@{arco-cssvars-prefix}-color-link-light-3');\n@link-color-text_loading: var(~'@{arco-cssvars-prefix}-color-link-light-3');\n\n@link-color-text_success: @color-success-6;\n@link-color-text_success_hover: @link-color-text_success;\n@link-color-text_success_active: @link-color-text_success;\n@link-color-text_success_disabled: var(\n  ~'@{arco-cssvars-prefix}-color-success-light-3'\n);\n@link-color-text_success_loading: var(\n  ~'@{arco-cssvars-prefix}-color-success-light-3'\n);\n\n@link-color-text_error: @color-danger-6;\n@link-color-text_error_active: @link-color-text_error;\n@link-color-text_error_hover: @link-color-text_error;\n@link-color-text_error_disabled: var(\n  ~'@{arco-cssvars-prefix}-color-danger-light-3'\n);\n@link-color-text_error_loading: var(\n  ~'@{arco-cssvars-prefix}-color-danger-light-3'\n);\n\n@link-color-text_warning: @color-warning-6;\n@link-color-text_warning_hover: @link-color-text_warning;\n@link-color-text_warning_active: @link-color-text_warning;\n@link-color-text_warning_disabled: var(\n  ~'@{arco-cssvars-prefix}-color-warning-light-2'\n);\n@link-color-text_warning_loading: var(\n  ~'@{arco-cssvars-prefix}-color-warning-light-2'\n);\n@link-margin-icon-right: @spacing-3;\n\n@link-padding-vertical: 1px;\n@link-size-icon: @size-3;\n@link-border-radius: @radius-small;\n"
  },
  {
    "path": "packages/web-vue/components/list/CHANGELOG.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.49.0\n\n`2023-07-21`\n\n### 🆕 Feature\n\n- Scroll maxHeight supports string type ([#2544](https://github.com/arco-design/arco-design-vue/pull/2544))\n\n\n## 2.48.0\n\n`2023-06-30`\n\n### 🐛 BugFix\n\n- fix virtual-list scrolling position is wrong when data is modified ([#2502](https://github.com/arco-design/arco-design-vue/pull/2502))\n\n\n## 2.44.6\n\n`2023-03-31`\n\n### 🐛 BugFix\n\n- Fix an issue that may trigger reach-bottom when scrolling up ([#2295](https://github.com/arco-design/arco-design-vue/pull/2295))\n\n\n## 2.44.2\n\n`2023-03-17`\n\n### 🐛 BugFix\n\n- list supports backend data pagination ([#2199](https://github.com/arco-design/arco-design-vue/pull/2199))\n\n\n## 2.40.1\n\n`2022-12-23`\n\n### 🐛 BugFix\n\n- Fix the problem that the scroll bar appears in the grid list mode ([#1970](https://github.com/arco-design/arco-design-vue/pull/1970))\n\n\n## 2.40.0\n\n`2022-12-09`\n\n### 🐛 BugFix\n\n- Fix the problem that the scrollbar attribute fails when passing the virtual scrollbar attribute ([#1929](https://github.com/arco-design/arco-design-vue/pull/1929))\n\n\n## 2.37.2\n\n`2022-09-21`\n\n### 🐛 BugFix\n\n- Fix loading more scrollbar heights in use ([#1658](https://github.com/arco-design/arco-design-vue/pull/1658))\n\n\n## 2.37.0\n\n`2022-09-16`\n\n### 💎 Enhancement\n\n- add usage demo ([#1625](https://github.com/arco-design/arco-design-vue/pull/1625))\n\n\n## 2.29.1\n\n`2022-06-02`\n\n### 🐛 BugFix\n\n- Fixed an issue where reachBottom would not trigger in some cases ([#1228](https://github.com/arco-design/arco-design-vue/pull/1228))\n\n\n## 2.27.0\n\n`2022-05-13`\n\n### 🐛 BugFix\n\n- Fix the problem that the pagination property is invalid ([#1125](https://github.com/arco-design/arco-design-vue/pull/1125))\n\n\n## 2.26.0\n\n`2022-04-29`\n\n### 🆕 Feature\n\n- support `empty` slot ([#1045](https://github.com/arco-design/arco-design-vue/pull/1045))\n\n\n## 2.20.0\n\n`2022-03-18`\n\n### 🆕 Feature\n\n- Added `#scroll-loading` slot ([#838](https://github.com/arco-design/arco-design-vue/pull/838))\n\n\n## 2.18.0\n\n`2022-03-04`\n\n### 🐛 BugFix\n\n- List items should be rendered as div ([#776](https://github.com/arco-design/arco-design-vue/pull/776))\n\n\n## 2.18.0-beta.2\n\n`2022-02-25`\n\n### ⚠️ Important Attention\n\n- The spin component is rendered by default to prevent the component from remounting when switching states ([#730](https://github.com/arco-design/arco-design-vue/pull/730))\n- Supports rendering of any child element ([#730](https://github.com/arco-design/arco-design-vue/pull/730))\n\n\n## 2.8.0\n\n`2021-12-01`\n\n### 🆕 Feature\n\n- Add the display of empty data ([#296](https://github.com/arco-design/arco-design-vue/pull/296))\n\n"
  },
  {
    "path": "packages/web-vue/components/list/CHANGELOG.zh-CN.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.49.0\n\n`2023-07-21`\n\n### 🆕 新增功能\n\n- 滚动最大高度支持字符串类型 ([#2544](https://github.com/arco-design/arco-design-vue/pull/2544))\n\n\n## 2.48.0\n\n`2023-06-30`\n\n### 🐛 问题修复\n\n- 修复virtual-list在数据发生修改时候滚动位置不对 ([#2502](https://github.com/arco-design/arco-design-vue/pull/2502))\n\n\n## 2.44.6\n\n`2023-03-31`\n\n### 🐛 问题修复\n\n- 修复向上滚动时可能触发 reach-bottom 的问题 ([#2295](https://github.com/arco-design/arco-design-vue/pull/2295))\n\n\n## 2.44.2\n\n`2023-03-17`\n\n### 🐛 问题修复\n\n- 列表支持后端数据分页 ([#2199](https://github.com/arco-design/arco-design-vue/pull/2199))\n\n\n## 2.40.1\n\n`2022-12-23`\n\n### 🐛 问题修复\n\n- 修复栅格列表模式出现滚动条的问题 ([#1970](https://github.com/arco-design/arco-design-vue/pull/1970))\n\n\n## 2.40.0\n\n`2022-12-09`\n\n### 🐛 问题修复\n\n- 修复 scrollbar 属性传递虚拟滚动条属性时失效的问题 ([#1929](https://github.com/arco-design/arco-design-vue/pull/1929))\n\n\n## 2.37.2\n\n`2022-09-21`\n\n### 🐛 问题修复\n\n- 修复加载更多使用中滚动条高度的问题 ([#1658](https://github.com/arco-design/arco-design-vue/pull/1658))\n\n\n## 2.37.0\n\n`2022-09-16`\n\n### 💎 功能优化\n\n- 新增使用案例 ([#1625](https://github.com/arco-design/arco-design-vue/pull/1625))\n\n\n## 2.29.1\n\n`2022-06-02`\n\n### 🐛 问题修复\n\n- 修复在某些情况下 reachBottom 不会触发的问题 ([#1228](https://github.com/arco-design/arco-design-vue/pull/1228))\n\n\n## 2.27.0\n\n`2022-05-13`\n\n### 🐛 问题修复\n\n- 修复分页属性失效的问题 ([#1125](https://github.com/arco-design/arco-design-vue/pull/1125))\n\n\n## 2.26.0\n\n`2022-04-29`\n\n### 🆕 新增功能\n\n- 支持 `empty` 插槽 ([#1045](https://github.com/arco-design/arco-design-vue/pull/1045))\n\n\n## 2.20.0\n\n`2022-03-18`\n\n### 🆕 新增功能\n\n- 增加 `#scroll-loading` 插槽 ([#838](https://github.com/arco-design/arco-design-vue/pull/838))\n\n\n## 2.18.0\n\n`2022-03-04`\n\n### 🐛 问题修复\n\n- 列表项应渲染为 div ([#776](https://github.com/arco-design/arco-design-vue/pull/776))\n\n\n## 2.18.0-beta.2\n\n`2022-02-25`\n\n### ⚠️ 重点注意\n\n- 默认渲染 spin 组件，防止切换状态时导致组件重新挂载 ([#730](https://github.com/arco-design/arco-design-vue/pull/730))\n- 支持渲染任何子元素 ([#730](https://github.com/arco-design/arco-design-vue/pull/730))\n\n\n## 2.8.0\n\n`2021-12-01`\n\n### 🆕 新增功能\n\n- 增加空数据的展示 ([#296](https://github.com/arco-design/arco-design-vue/pull/296))\n\n"
  },
  {
    "path": "packages/web-vue/components/list/README.en-US.md",
    "content": "```yaml\nmeta:\n  type: Component\n  category: Data Display\ntitle: List\ndescription: The most basic list display, which can carry text, lists, pictures, and paragraphs, and is often used in the background data display page.\n```\n\n*Auto translate by google.*\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/size.md\n\n@import ./__demo__/meta.md\n\n@import ./__demo__/actions.md\n\n@import ./__demo__/actions-layout.md\n\n@import ./__demo__/grid.md\n\n@import ./__demo__/responsive-grid.md\n\n@import ./__demo__/scroll.md\n\n@import ./__demo__/virtual-list.md\n\n## API\n\n\n### `<list>` Props\n\n|Attribute|Description|Type|Default|version|\n|---|---|---|:---:|:---|\n|data|List data, need to be used with `item` slot at the same time|`any[]`|`-`||\n|size|List size|`'small' \\| 'medium' \\| 'large'`|`'medium'`||\n|bordered|Whether to show the border|`boolean`|`true`||\n|split|Whether to show the dividing line|`boolean`|`true`||\n|loading|Whether it is loading state|`boolean`|`false`||\n|hoverable|Whether to display the selected style|`boolean`|`false`||\n|pagination-props|List pagination configuration|`PaginationProps`|`-`||\n|grid-props|List grid configuration|`object`|`-`||\n|max-height|Maximum height of the list|`string \\| number`|`0`||\n|bottom-offset|Trigger the distance threshold to reach the bottom|`number`|`0`||\n|virtual-list-props|Pass virtual list properties, pass in this parameter to turn on virtual scrolling [VirtualListProps](#VirtualListProps)|`VirtualListProps`|`-`||\n|scrollbar|Whether to enable virtual scroll bar|`boolean \\| ScrollbarProps`|`true`|2.38.0|\n### `<list>` Events\n\n|Event Name|Description|Parameters|\n|---|---|---|\n|scroll|Triggered when the list scrolls|-|\n|reach-bottom|Triggered when the list reaches the bottom|-|\n|page-change|Triggered when the table pagination changes|page: `number`|\n|page-size-change|Triggered when the number of data per page of the table changes|pageSize: `number`|\n### `<list>` Methods\n\n|Method|Description|Parameters|Return|\n|---|---|---|:---:|\n|scrollIntoView|Virtual scroll to an element|options: `{ index?: number; key?: number \\| string; align: 'auto' \\| 'top' \\| 'bottom'}`|-|\n### `<list>` Slots\n\n|Slot Name|Description|Parameters|version|\n|---|---|---|:---|\n|scroll-loading|When scrolling loading state, scroll to the bottom tip|-|2.20.0|\n|item|List Item|index: `number`<br>item: `any`||\n|empty|Empty|-||\n|footer|Footer|-||\n|header|Header|-||\n\n\n\n\n### `<list-item>` Props\n\n|Attribute|Description|Type|Default|\n|---|---|---|:---:|\n|action-layout|Operation group arrangement direction|`Direction`|`'horizontal'`|\n### `<list-item>` Slots\n\n|Slot Name|Description|Parameters|\n|---|---|---|\n|meta|Meta data|-|\n|extra|Extra content|-|\n|actions|Actions|-|\n\n\n\n\n### `<list-item-meta>` Props\n\n|Attribute|Description|Type|Default|\n|---|---|---|:---:|\n|title|Title|`string`|`-`|\n|description|Description|`string`|`-`|\n### `<list-item-meta>` Slots\n\n|Slot Name|Description|Parameters|\n|---|---|---|\n|avatar|Avatar|-|\n|title|Title|-|\n|description|Description|-|\n\n\n\n\n### VirtualListProps\n\n|Name|Description|Type|Default|version|\n|---|---|---|:---:|:---|\n|height|Viewable area height|`number \\| string`|`-`||\n|threshold|The threshold of the number of elements to enable virtual scrolling. When the number of data is less than the threshold, virtual scrolling will not be enabled.|`number`|`-`||\n|isStaticItemHeight|(Repealed) Is the element height fixed. Version 2.18.0 deprecated, please use `fixedSize`|`boolean`|`false`||\n|fixedSize|Is the element height fixed.|`boolean`|`false`|2.34.1|\n|estimatedSize|Is the element height fixed.|`number`|`-`|2.34.1|\n|buffer|The number of elements mounted in advance outside the boundary of the viewport.|`number`|`10`|2.34.1|\n\n\n"
  },
  {
    "path": "packages/web-vue/components/list/README.zh-CN.md",
    "content": "```yaml\nmeta:\n  type: 组件\n  category: 数据展示\ntitle: 列表 List\ndescription: 最基础的列表展示，可承载文字、列表、图片、段落，常用于后台数据展示页面。\n```\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/size.md\n\n@import ./__demo__/meta.md\n\n@import ./__demo__/actions.md\n\n@import ./__demo__/actions-layout.md\n\n@import ./__demo__/grid.md\n\n@import ./__demo__/responsive-grid.md\n\n@import ./__demo__/scroll.md\n\n@import ./__demo__/virtual-list.md\n\n## API\n\n\n### `<list>` Props\n\n|参数名|描述|类型|默认值|版本|\n|---|---|---|:---:|:---|\n|data|列表数据，需要和 `item` 插槽同时使用|`any[]`|`-`||\n|size|列表大小|`'small' \\| 'medium' \\| 'large'`|`'medium'`||\n|bordered|是否显示边框|`boolean`|`true`||\n|split|是否显示分割线|`boolean`|`true`||\n|loading|是否为加载中状态|`boolean`|`false`||\n|hoverable|是否显示选中样式|`boolean`|`false`||\n|pagination-props|列表分页配置|`PaginationProps`|`-`||\n|grid-props|列表栅格配置|`object`|`-`||\n|max-height|列表的最大高度|`string \\| number`|`0`||\n|bottom-offset|触发到达底部的距离阈值|`number`|`0`||\n|virtual-list-props|传递虚拟列表属性，传入此参数以开启虚拟滚动 [VirtualListProps](#VirtualListProps)|`VirtualListProps`|`-`||\n|scrollbar|是否开启虚拟滚动条|`boolean \\| ScrollbarProps`|`true`|2.38.0|\n### `<list>` Events\n\n|事件名|描述|参数|\n|---|---|---|\n|scroll|列表滚动时触发|-|\n|reach-bottom|当列表到达底部时触发|-|\n|page-change|表格分页发生改变时触发|page: `number`|\n|page-size-change|表格每页数据数量发生改变时触发|pageSize: `number`|\n### `<list>` Methods\n\n|方法名|描述|参数|返回值|\n|---|---|---|---|\n|scrollIntoView|虚拟滚动到某个元素|options: `{ index?: number; key?: number \\| string; align: 'auto' \\| 'top' \\| 'bottom'}`|-|\n### `<list>` Slots\n\n|插槽名|描述|参数|版本|\n|---|:---:|---|:---|\n|scroll-loading|滚动加载状态时，滚动到底部的提示|-|2.20.0|\n|item|列表项|index: `number`<br>item: `any`||\n|empty|空白展示|-||\n|footer|底部信息|-||\n|header|头部信息|-||\n\n\n\n\n### `<list-item>` Props\n\n|参数名|描述|类型|默认值|\n|---|---|---|:---:|\n|action-layout|操作组排列方向|`Direction`|`'horizontal'`|\n### `<list-item>` Slots\n\n|插槽名|描述|参数|\n|---|:---:|---|\n|meta|meta信息|-|\n|extra|额外内容|-|\n|actions|操作组|-|\n\n\n\n\n### `<list-item-meta>` Props\n\n|参数名|描述|类型|默认值|\n|---|---|---|:---:|\n|title|标题|`string`|`-`|\n|description|描述内容|`string`|`-`|\n### `<list-item-meta>` Slots\n\n|插槽名|描述|参数|\n|---|:---:|---|\n|avatar|头像|-|\n|title|标题|-|\n|description|描述内容|-|\n\n\n\n\n### VirtualListProps\n\n|参数名|描述|类型|默认值|版本|\n|---|---|---|:---:|:---|\n|height|可视区域高度|`number \\| string`|`-`||\n|threshold|开启虚拟滚动的元素数量阈值，当数据数量小于阈值时不会开启虚拟滚动。|`number`|`-`||\n|isStaticItemHeight|（已废除）元素高度是否是固定的。2.34.1 版本废除，请使用 `fixedSize`|`boolean`|`false`||\n|fixedSize|元素高度是否是固定的。|`boolean`|`false`|2.34.1|\n|estimatedSize|元素高度不固定时的预估高度。|`number`|`-`|2.34.1|\n|buffer|视口边界外提前挂载的元素数量。|`number`|`10`|2.34.1|\n\n\n"
  },
  {
    "path": "packages/web-vue/components/list/TEMPLATE.md",
    "content": "## zh-CN\n```yaml\nmeta:\n  type: 组件\n  category: 数据展示\ntitle: 列表 List\ndescription: 最基础的列表展示，可承载文字、列表、图片、段落，常用于后台数据展示页面。\n```\n---\n## en-US\n```yaml\nmeta:\n  type: Component\n  category: Data Display\ntitle: List\ndescription: The most basic list display, which can carry text, lists, pictures, and paragraphs, and is often used in the background data display page.\n```\n---\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/size.md\n\n@import ./__demo__/meta.md\n\n@import ./__demo__/actions.md\n\n@import ./__demo__/actions-layout.md\n\n@import ./__demo__/grid.md\n\n@import ./__demo__/responsive-grid.md\n\n@import ./__demo__/scroll.md\n\n@import ./__demo__/virtual-list.md\n\n## API\n\n%%API(list.tsx)%%\n\n%%API(list-item.tsx)%%\n\n%%API(list-item-meta.vue)%%\n\n%%INTERFACE(../_components/virtual-list-v2/interface.ts)%%\n"
  },
  {
    "path": "packages/web-vue/components/list/__demo__/actions-layout.md",
    "content": "```yaml\ntitle:\n  zh-CN: 竖排列表样式\n  en-US: Vertical List\n```\n\n## zh-CN\n\n这是一个包括分页、右侧内容、下方列表操作的示例。\n\n---\n\n## en-US\n\nThis is an example including paging, content on the right, and list operations.\n\n---\n\n```vue\n<template>\n  <a-list\n    class=\"list-demo-action-layout\"\n    :bordered=\"false\"\n    :data=\"dataSource\"\n    :pagination-props=\"paginationProps\"\n  >\n    <template #item=\"{ item }\">\n      <a-list-item class=\"list-demo-item\" action-layout=\"vertical\">\n        <template #actions>\n          <span><icon-heart />83</span>\n          <span><icon-star />{{ item.index }}</span>\n          <span><icon-message />Reply</span>\n        </template>\n        <template #extra>\n          <div className=\"image-area\">\n            <img alt=\"arco-design\" :src=\"item.imageSrc\" />\n          </div>\n        </template>\n        <a-list-item-meta\n          :title=\"item.title\"\n          :description=\"item.description\"\n        >\n          <template #avatar>\n            <a-avatar shape=\"square\">\n              <img alt=\"avatar\" :src=\"item.avatar\" />\n            </a-avatar>\n          </template>\n        </a-list-item-meta>\n      </a-list-item>\n    </template>\n  </a-list>\n</template>\n\n<script>\nimport { reactive } from 'vue'\n\nconst names = ['Socrates', 'Balzac', 'Plato'];\nconst avatarSrc = [\n  '//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a8c8cdb109cb051163646151a4a5083b.png~tplv-uwbnlip3yd-webp.webp',\n  '//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/e278888093bef8910e829486fb45dd69.png~tplv-uwbnlip3yd-webp.webp',\n  '//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/9eeb1800d9b78349b24682c3518ac4a3.png~tplv-uwbnlip3yd-webp.webp',\n];\nconst imageSrc = [\n  '//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/29c1f9d7d17c503c5d7bf4e538cb7c4f.png~tplv-uwbnlip3yd-webp.webp',\n  '//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/04d7bc31dd67dcdf380bc3f6aa07599f.png~tplv-uwbnlip3yd-webp.webp',\n  '//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/1f61854a849a076318ed527c8fca1bbf.png~tplv-uwbnlip3yd-webp.webp',\n];\nconst dataSource = new Array(15).fill(null).map((_, index) => {\n  return {\n    index: index,\n    avatar: avatarSrc[index % avatarSrc.length],\n    title: names[index % names.length],\n    description:\n      'Beijing ByteDance Technology Co., Ltd. is an enterprise located in China. ByteDance has products such as TikTok, Toutiao, volcano video and Douyin (the Chinese version of TikTok).',\n    imageSrc: imageSrc[index % imageSrc.length],\n  };\n});\n\nexport default {\n  setup() {\n    return {\n      dataSource,\n      paginationProps: reactive({\n        defaultPageSize: 3,\n        total: dataSource.length\n      })\n    }\n  },\n}\n</script>\n\n<style scoped>\n.list-demo-action-layout .image-area {\n  width: 183px;\n  height: 119px;\n  border-radius: 2px;\n  overflow: hidden;\n}\n\n.list-demo-action-layout .list-demo-item {\n  padding: 20px 0;\n  border-bottom: 1px solid var(--color-fill-3);\n}\n\n.list-demo-action-layout .image-area img {\n  width: 100%;\n}\n\n.list-demo-action-layout .arco-list-item-action .arco-icon {\n  margin: 0 4px;\n}\n</style>\n```\n"
  },
  {
    "path": "packages/web-vue/components/list/__demo__/actions.md",
    "content": "```yaml\ntitle:\n  zh-CN: 增加操作项\n  en-US: With Actions\n```\n\n## zh-CN\n\n通过 `actions` 来为列表添加操作项。\n\n---\n\n## en-US\n\nUse `actions` to add operation items to the list.\n\n---\n\n```vue\n<template>\n  <a-list>\n    <a-list-item v-for=\"idx in 4\" :key=\"idx\">\n      <a-list-item-meta\n        title=\"Beijing Bytedance Technology Co., Ltd.\"\n        description=\"Beijing ByteDance Technology Co., Ltd. is an enterprise located in China.\"\n      >\n        <template #avatar>\n          <a-avatar shape=\"square\">\n            <img\n              alt=\"avatar\"\n              src=\"https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp\"\n            />\n          </a-avatar>\n        </template>\n      </a-list-item-meta>\n      <template #actions>\n        <icon-edit />\n        <icon-delete />\n      </template>\n    </a-list-item>\n  </a-list>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/list/__demo__/basic.md",
    "content": "```yaml\ntitle:\n  zh-CN: 基本使用\n  en-US: Basic Usage\n```\n\n## zh-CN\n\n列表的基本使用方法。可用于承载文字、列表、图片和段落。\n\n---\n\n## en-US\n\nBasic usage of the list. Can be used to carry text, lists, pictures and paragraphs.\n\n---\n\n```vue\n<template>\n  <a-list>\n    <template #header>\n      List title\n    </template>\n    <a-list-item>Beijing Bytedance Technology Co., Ltd.</a-list-item>\n    <a-list-item>Bytedance Technology Co., Ltd.</a-list-item>\n    <a-list-item>Beijing Toutiao Technology Co., Ltd.</a-list-item>\n    <a-list-item>Beijing Volcengine Technology Co., Ltd.</a-list-item>\n    <a-list-item>China Beijing Bytedance Technology Co., Ltd.</a-list-item>\n  </a-list>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/list/__demo__/grid.md",
    "content": "```yaml\ntitle:\n  zh-CN: 格栅列表\n  en-US: Grid\n```\n\n## zh-CN\n\n通过 `grid` 属性来配置格栅列表。\n\n---\n\n## en-US\n\nConfigure the grid list through the `grid` property.\n\n---\n\n```vue\n<template>\n  <a-list :gridProps=\"{ gutter: 0, span: 6 }\" :bordered=\"false\">\n    <a-list-item>\n      <a-list>\n        <template #header>Platform</template>\n        <a-list-item>iOS</a-list-item>\n        <a-list-item>Android</a-list-item>\n        <a-list-item>Web</a-list-item>\n      </a-list>\n    </a-list-item>\n    <a-list-item>\n      <a-list>\n        <template #header>Framework</template>\n        <a-list-item>Angular</a-list-item>\n        <a-list-item>Vue</a-list-item>\n        <a-list-item>React</a-list-item>\n      </a-list>\n    </a-list-item>\n    <a-list-item>\n      <a-list>\n        <template #header>Language</template>\n        <a-list-item>C++</a-list-item>\n        <a-list-item>JavaScript</a-list-item>\n        <a-list-item>Python</a-list-item>\n      </a-list>\n    </a-list-item>\n    <a-list-item>\n      <a-list>\n        <template #header>Component</template>\n        <a-list-item>Button</a-list-item>\n        <a-list-item>Breadcrumb</a-list-item>\n        <a-list-item>Transfer</a-list-item>\n      </a-list>\n    </a-list-item>\n  </a-list>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/list/__demo__/meta.md",
    "content": "```yaml\ntitle:\n  zh-CN: 列表元素\n  en-US: List Item Meta\n```\n\n## zh-CN\n\n使用 `list-item-meta` 组件可快速指定头像、标题、文字。\n\n---\n\n## en-US\n\nUse the `list-item-meta` component to quickly specify the avatar, title, and text.\n\n---\n\n```vue\n<template>\n  <a-list>\n    <a-list-item v-for=\"idx in 4\" :key=\"idx\">\n      <a-list-item-meta\n        title=\"Beijing Bytedance Technology Co., Ltd.\"\n        description=\"Beijing ByteDance Technology Co., Ltd. is an enterprise located in China.\"\n      >\n        <template #avatar>\n          <a-avatar shape=\"square\">\n            <img\n              alt=\"avatar\"\n              src=\"https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp\"\n            />\n          </a-avatar>\n        </template>\n      </a-list-item-meta>\n    </a-list-item>\n  </a-list>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/list/__demo__/responsive-grid.md",
    "content": "```yaml\ntitle:\n  zh-CN: 响应式栅格\n  en-US: Responsive List Grid\n```\n\n## zh-CN\n\n通过 `grid.sm` 等响应式参数动态设置每个单项横跨的列数，注意此时不要设置 `grid.span`。\n\n---\n\n## en-US\n\nDynamically set the number of columns occupied by each item through parameters such as `grid.sm`. Be careful not to set `grid.span` at this time.\n\n---\n\n```vue\n<template>\n  <a-list\n    :grid-props=\"{ gutter: [20, 20], sm: 24, md: 12, lg: 8, xl: 6 }\"\n    :data=\"dataSource\"\n    :bordered=\"false\"\n  >\n    <template #item=\"{ item }\">\n      <a-list :data=\"item.data\">\n        <template #header>{{ item.title }}</template>\n        <template #item=\"{ item: subItem }\">\n          <a-list-item>{{ subItem }}</a-list-item>\n        </template>\n      </a-list>\n    </template>\n  </a-list>\n</template>\n\n<script>\nconst dataSource = [\n  {\n    title: 'Platform',\n    data: ['iOS', 'Android', 'Web'],\n  },\n  {\n    title: 'Framework',\n    data: ['Angular', 'Vue', 'React'],\n  },\n  {\n    title: 'Language',\n    data: ['C++', 'JavaScript', 'Python'],\n  },\n  {\n    title: 'Component',\n    data: ['Button', 'Breadcrumb', 'Transfer'],\n  },\n  {\n    title: 'Design',\n    data: ['Figma', 'Sketch', 'Adobe XD'],\n  },\n  {\n    title: 'Plugin',\n    data: ['Edu Tools', 'BashSupport', 'GitToolBox'],\n  },\n  {\n    title: 'Platform',\n    data: ['iOS', 'Android', 'Web'],\n  },\n  {\n    title: 'Framework',\n    data: ['Angular', 'Vue', 'React'],\n  },\n  {\n    title: 'Language',\n    data: ['C++', 'JavaScript', 'Python'],\n  },\n];\n\nexport default {\n  setup() {\n    return {\n      dataSource\n    }\n  }\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/list/__demo__/scroll.md",
    "content": "```yaml\ntitle:\n  zh-CN: 滚动\n  en-US: Scroll\n```\n\n## zh-CN\n\n通过设置 `max-height` 属性限制列表的最大高度。通过 `reach-bottom` 事件可以监听列表触底的事件。\n\n---\n\n## en-US\n\nLimit the maximum height of the list by setting the `max-height` property. Through the `reach-bottom` event, you can\nlisten to the event of the bottom of the list.\n\n---\n\n```vue\n<template>\n  <div style=\"margin-bottom: 10px\">\n    <a-switch v-model=\"scrollbar\" />\n    Virtual Scrollbar\n  </div>\n  <a-list :max-height=\"240\" @reach-bottom=\"fetchData\" :scrollbar=\"scrollbar\">\n    <template #header>\n      List title\n    </template>\n    <template #scroll-loading>\n      <div v-if=\"bottom\">No more data</div>\n      <a-spin v-else />\n    </template>\n    <a-list-item v-for=\"item of data\">{{item}}</a-list-item>\n  </a-list>\n</template>\n\n<script>\nimport { reactive, ref } from 'vue';\n\nexport default {\n  setup() {\n    const current = ref(1);\n    const bottom = ref(false);\n    const data = reactive([]);\n    const scrollbar = ref(true);\n\n    const fetchData = () => {\n      console.log('reach bottom!');\n      if (current.value <= 5) {\n        window.setTimeout(() => {\n          const index = data.length;\n          data.push(\n            `Beijing Bytedance Technology Co., Ltd. ${index + 1}`,\n            `Bytedance Technology Co., Ltd. ${index + 2}`,\n            `Beijing Toutiao Technology Co., Ltd. ${index + 3}`,\n            `Beijing Volcengine Technology Co., Ltd. ${index + 4}`,\n            `China Beijing Bytedance Technology Co., Ltd. ${index + 5}`\n          );\n          current.value += 1\n        }, 2000)\n      } else {\n        bottom.value = true\n      }\n    }\n\n    return {\n      current,\n      bottom,\n      data,\n      fetchData,\n      scrollbar\n    }\n  },\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/list/__demo__/size.md",
    "content": "```yaml\ntitle:\n  zh-CN: 不同尺寸\n  en-US: Sizes\n```\n\n## zh-CN\n\n列表组件提供了三种大小 `small, medium, large` ，可根据业务需求自行选择。\n\n---\n\n## en-US\n\nThe list component provides three sizes `small, medium, large`, which can be selected according to business needs.\n\n---\n\n```vue\n\n<template>\n  <a-space direction=\"vertical\" size=\"large\">\n    <a-radio-group v-model=\"size\" type=\"button\">\n      <a-radio value=\"small\">Small</a-radio>\n      <a-radio value=\"medium\">Medium</a-radio>\n      <a-radio value=\"large\">Large</a-radio>\n    </a-radio-group>\n    <a-list :size=\"size\">\n      <template #header>\n        List title\n      </template>\n      <a-list-item>Beijing Bytedance Technology Co., Ltd.</a-list-item>\n      <a-list-item>Bytedance Technology Co., Ltd.</a-list-item>\n      <a-list-item>Beijing Toutiao Technology Co., Ltd.</a-list-item>\n      <a-list-item>Beijing Volcengine Technology Co., Ltd.</a-list-item>\n      <a-list-item>China Beijing Bytedance Technology Co., Ltd.</a-list-item>\n    </a-list>\n  </a-space>\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n  setup() {\n    const size = ref('medium');\n\n    return {\n      size\n    }\n  },\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/list/__demo__/virtual-list.md",
    "content": "```yaml\ntitle:\n  zh-CN: 无限长列表\n  en-US: Infinite List\n```\n\n## zh-CN\n\n通过指定 `virtualListProps` 来开启虚拟列表，在大量数据时获得高性能表现。\n在使用虚拟列表时，如果列表元素之间高度变化较大可能导致滚动时视口出现空白区域，可通过调整 `virtualListProps.buffer` 属性解决，[使用方式](/vue/docs/faq#%E8%99%9A%E6%8B%9F%E5%88%97%E8%A1%A8%E7%9A%84%E4%BD%BF%E7%94%A8)。\n\n---\n\n## en-US\n\nBy specifying `virtualListProps` to turn on the virtual list, high performance can be obtained when a large amount of data is used.\nWhen using a virtual list, if the height of the list items varies greatly, it may cause blank space in the viewport when scrolling, which can be solved by setting `virtualListProps.buffer`, [usage](/vue/en-US/docs/faq#The-use-of-virtual-lists).\n\n---\n\n```vue\n\n<template>\n  <h3 :style=\"{ color: 'var(--color-text-2)' }\">10000 items</h3>\n  <a-list\n    :style=\"{ width: `600px` }\"\n    :virtualListProps=\"{\n      height: 560,\n    }\"\n    :data=\"list\"\n  >\n    <template #item=\"{ item, index }\">\n      <a-list-item :key=\"index\">\n        <a-list-item-meta\n          :title=\"item.title\"\n          :description=\"item.description\"\n        >\n          <template #avatar>\n            <a-avatar shape=\"square\">\n              A\n            </a-avatar>\n          </template>\n        </a-list-item-meta>\n      </a-list-item>\n    </template>\n  </a-list>\n</template>\n\n<script>\nimport { reactive } from 'vue';\n\nexport default {\n  setup() {\n    const list = reactive(Array(10000).fill(null).map((_, index) => {\n      const prefix = `0000${index}`.slice(-5);\n      return {\n        title: 'Beijing Bytedance Technology Co., Ltd.',\n        description: `(${prefix}) Beijing ByteDance Technology Co., Ltd. is an enterprise located in China.`,\n      };\n    }))\n\n    return {\n      list\n    }\n  },\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/list/__test__/__snapshots__/demo.test.ts.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`<list> demo: render [actions] correctly 1`] = `\n\"<div class=\\\\\"arco-list-wrapper\\\\\">\n  <div class=\\\\\"arco-spin arco-list-spin\\\\\">\n    <div class=\\\\\"arco-scrollbar arco-scrollbar-type-embed\\\\\">\n      <div class=\\\\\"arco-scrollbar-container arco-list arco-list-medium arco-list-bordered arco-list-split\\\\\">\n        <div class=\\\\\"arco-list-content-wrapper\\\\\">\n          <!---->\n          <div role=\\\\\"list\\\\\" class=\\\\\"arco-list-content\\\\\">\n            <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-list-item\\\\\">\n              <div class=\\\\\"arco-list-item-main\\\\\">\n                <!---->\n                <div class=\\\\\"arco-list-item-content\\\\\">\n                  <div class=\\\\\"arco-list-item-meta\\\\\">\n                    <div class=\\\\\"arco-list-item-meta-avatar\\\\\">\n                      <div class=\\\\\"arco-avatar arco-avatar-square\\\\\"><span class=\\\\\"arco-avatar-text\\\\\"><img alt=\\\\\"avatar\\\\\" src=\\\\\"https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp\\\\\"></span>\n                        <!--v-if-->\n                      </div>\n                    </div>\n                    <div class=\\\\\"arco-list-item-meta-content\\\\\">\n                      <div class=\\\\\"arco-list-item-meta-title\\\\\">Beijing Bytedance Technology Co., Ltd.</div>\n                      <div class=\\\\\"arco-list-item-meta-description\\\\\">Beijing ByteDance Technology Co., Ltd. is an enterprise located in China.</div>\n                    </div>\n                  </div>\n                </div>\n                <!---->\n              </div>\n              <ul class=\\\\\"arco-list-item-action\\\\\">\n                <li><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-edit\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n                    <path d=\\\\\"m30.48 19.038 5.733-5.734a1 1 0 0 0 0-1.414l-5.586-5.586a1 1 0 0 0-1.414 0l-5.734 5.734m7 7L15.763 33.754a1 1 0 0 1-.59.286l-6.048.708a1 1 0 0 1-1.113-1.069l.477-6.31a1 1 0 0 1 .29-.631l14.7-14.7m7 7-7-7M6 42h36\\\\\"></path>\n                  </svg></li>\n                <li><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-delete\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n                    <path d=\\\\\"M5 11h5.5m0 0v29a1 1 0 0 0 1 1h25a1 1 0 0 0 1-1V11m-27 0H16m21.5 0H43m-5.5 0H32m-16 0V7h16v4m-16 0h16M20 18v15m8-15v15\\\\\"></path>\n                  </svg></li>\n              </ul>\n              <!---->\n            </div>\n            <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-list-item\\\\\">\n              <div class=\\\\\"arco-list-item-main\\\\\">\n                <!---->\n                <div class=\\\\\"arco-list-item-content\\\\\">\n                  <div class=\\\\\"arco-list-item-meta\\\\\">\n                    <div class=\\\\\"arco-list-item-meta-avatar\\\\\">\n                      <div class=\\\\\"arco-avatar arco-avatar-square\\\\\"><span class=\\\\\"arco-avatar-text\\\\\"><img alt=\\\\\"avatar\\\\\" src=\\\\\"https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp\\\\\"></span>\n                        <!--v-if-->\n                      </div>\n                    </div>\n                    <div class=\\\\\"arco-list-item-meta-content\\\\\">\n                      <div class=\\\\\"arco-list-item-meta-title\\\\\">Beijing Bytedance Technology Co., Ltd.</div>\n                      <div class=\\\\\"arco-list-item-meta-description\\\\\">Beijing ByteDance Technology Co., Ltd. is an enterprise located in China.</div>\n                    </div>\n                  </div>\n                </div>\n                <!---->\n              </div>\n              <ul class=\\\\\"arco-list-item-action\\\\\">\n                <li><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-edit\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n                    <path d=\\\\\"m30.48 19.038 5.733-5.734a1 1 0 0 0 0-1.414l-5.586-5.586a1 1 0 0 0-1.414 0l-5.734 5.734m7 7L15.763 33.754a1 1 0 0 1-.59.286l-6.048.708a1 1 0 0 1-1.113-1.069l.477-6.31a1 1 0 0 1 .29-.631l14.7-14.7m7 7-7-7M6 42h36\\\\\"></path>\n                  </svg></li>\n                <li><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-delete\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n                    <path d=\\\\\"M5 11h5.5m0 0v29a1 1 0 0 0 1 1h25a1 1 0 0 0 1-1V11m-27 0H16m21.5 0H43m-5.5 0H32m-16 0V7h16v4m-16 0h16M20 18v15m8-15v15\\\\\"></path>\n                  </svg></li>\n              </ul>\n              <!---->\n            </div>\n            <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-list-item\\\\\">\n              <div class=\\\\\"arco-list-item-main\\\\\">\n                <!---->\n                <div class=\\\\\"arco-list-item-content\\\\\">\n                  <div class=\\\\\"arco-list-item-meta\\\\\">\n                    <div class=\\\\\"arco-list-item-meta-avatar\\\\\">\n                      <div class=\\\\\"arco-avatar arco-avatar-square\\\\\"><span class=\\\\\"arco-avatar-text\\\\\"><img alt=\\\\\"avatar\\\\\" src=\\\\\"https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp\\\\\"></span>\n                        <!--v-if-->\n                      </div>\n                    </div>\n                    <div class=\\\\\"arco-list-item-meta-content\\\\\">\n                      <div class=\\\\\"arco-list-item-meta-title\\\\\">Beijing Bytedance Technology Co., Ltd.</div>\n                      <div class=\\\\\"arco-list-item-meta-description\\\\\">Beijing ByteDance Technology Co., Ltd. is an enterprise located in China.</div>\n                    </div>\n                  </div>\n                </div>\n                <!---->\n              </div>\n              <ul class=\\\\\"arco-list-item-action\\\\\">\n                <li><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-edit\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n                    <path d=\\\\\"m30.48 19.038 5.733-5.734a1 1 0 0 0 0-1.414l-5.586-5.586a1 1 0 0 0-1.414 0l-5.734 5.734m7 7L15.763 33.754a1 1 0 0 1-.59.286l-6.048.708a1 1 0 0 1-1.113-1.069l.477-6.31a1 1 0 0 1 .29-.631l14.7-14.7m7 7-7-7M6 42h36\\\\\"></path>\n                  </svg></li>\n                <li><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-delete\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n                    <path d=\\\\\"M5 11h5.5m0 0v29a1 1 0 0 0 1 1h25a1 1 0 0 0 1-1V11m-27 0H16m21.5 0H43m-5.5 0H32m-16 0V7h16v4m-16 0h16M20 18v15m8-15v15\\\\\"></path>\n                  </svg></li>\n              </ul>\n              <!---->\n            </div>\n            <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-list-item\\\\\">\n              <div class=\\\\\"arco-list-item-main\\\\\">\n                <!---->\n                <div class=\\\\\"arco-list-item-content\\\\\">\n                  <div class=\\\\\"arco-list-item-meta\\\\\">\n                    <div class=\\\\\"arco-list-item-meta-avatar\\\\\">\n                      <div class=\\\\\"arco-avatar arco-avatar-square\\\\\"><span class=\\\\\"arco-avatar-text\\\\\"><img alt=\\\\\"avatar\\\\\" src=\\\\\"https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp\\\\\"></span>\n                        <!--v-if-->\n                      </div>\n                    </div>\n                    <div class=\\\\\"arco-list-item-meta-content\\\\\">\n                      <div class=\\\\\"arco-list-item-meta-title\\\\\">Beijing Bytedance Technology Co., Ltd.</div>\n                      <div class=\\\\\"arco-list-item-meta-description\\\\\">Beijing ByteDance Technology Co., Ltd. is an enterprise located in China.</div>\n                    </div>\n                  </div>\n                </div>\n                <!---->\n              </div>\n              <ul class=\\\\\"arco-list-item-action\\\\\">\n                <li><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-edit\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n                    <path d=\\\\\"m30.48 19.038 5.733-5.734a1 1 0 0 0 0-1.414l-5.586-5.586a1 1 0 0 0-1.414 0l-5.734 5.734m7 7L15.763 33.754a1 1 0 0 1-.59.286l-6.048.708a1 1 0 0 1-1.113-1.069l.477-6.31a1 1 0 0 1 .29-.631l14.7-14.7m7 7-7-7M6 42h36\\\\\"></path>\n                  </svg></li>\n                <li><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-delete\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n                    <path d=\\\\\"M5 11h5.5m0 0v29a1 1 0 0 0 1 1h25a1 1 0 0 0 1-1V11m-27 0H16m21.5 0H43m-5.5 0H32m-16 0V7h16v4m-16 0h16M20 18v15m8-15v15\\\\\"></path>\n                  </svg></li>\n              </ul>\n              <!---->\n            </div>\n            <!---->\n          </div>\n          <!---->\n        </div>\n      </div>\n      <!--v-if-->\n      <!--v-if-->\n    </div>\n    <!---->\n    <!---->\n  </div>\n</div>\"\n`;\n\nexports[`<list> demo: render [actions-layout] correctly 1`] = `\n\"<div class=\\\\\"arco-list-wrapper list-demo-action-layout\\\\\">\n  <div class=\\\\\"arco-spin arco-list-spin\\\\\">\n    <div class=\\\\\"arco-scrollbar arco-scrollbar-type-embed\\\\\">\n      <div class=\\\\\"arco-scrollbar-container arco-list arco-list-medium arco-list-split\\\\\">\n        <div class=\\\\\"arco-list-content-wrapper\\\\\">\n          <!---->\n          <div role=\\\\\"list\\\\\" class=\\\\\"arco-list-content\\\\\">\n            <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-list-item list-demo-item\\\\\">\n              <div class=\\\\\"arco-list-item-main\\\\\">\n                <!---->\n                <div class=\\\\\"arco-list-item-content\\\\\">\n                  <div class=\\\\\"arco-list-item-meta\\\\\">\n                    <div class=\\\\\"arco-list-item-meta-avatar\\\\\">\n                      <div class=\\\\\"arco-avatar arco-avatar-square\\\\\"><span class=\\\\\"arco-avatar-text\\\\\"><img alt=\\\\\"avatar\\\\\" src=\\\\\"//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a8c8cdb109cb051163646151a4a5083b.png~tplv-uwbnlip3yd-webp.webp\\\\\"></span>\n                        <!--v-if-->\n                      </div>\n                    </div>\n                    <div class=\\\\\"arco-list-item-meta-content\\\\\">\n                      <div class=\\\\\"arco-list-item-meta-title\\\\\">Socrates</div>\n                      <div class=\\\\\"arco-list-item-meta-description\\\\\">Beijing ByteDance Technology Co., Ltd. is an enterprise located in China. ByteDance has products such as TikTok, Toutiao, volcano video and Douyin (the Chinese version of TikTok).</div>\n                    </div>\n                  </div>\n                </div>\n                <ul class=\\\\\"arco-list-item-action\\\\\">\n                  <li><span><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-heart\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M38.083 12.912a9.929 9.929 0 0 1 .177 13.878l-.177.18L25.76 39.273c-.972.97-2.548.97-3.52 0L9.917 26.971l-.177-.181a9.929 9.929 0 0 1 .177-13.878c3.889-3.883 10.194-3.883 14.083 0 3.889-3.883 10.194-3.883 14.083 0Z\\\\\"></path></svg>83</span></li>\n                  <li><span><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-star\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M22.552 6.908a.5.5 0 0 1 .896 0l5.02 10.17a.5.5 0 0 0 .376.274l11.224 1.631a.5.5 0 0 1 .277.853l-8.122 7.916a.5.5 0 0 0-.143.443l1.917 11.178a.5.5 0 0 1-.726.527l-10.038-5.278a.5.5 0 0 0-.466 0L12.73 39.9a.5.5 0 0 1-.726-.527l1.918-11.178a.5.5 0 0 0-.144-.443l-8.122-7.916a.5.5 0 0 1 .278-.853l11.223-1.63a.5.5 0 0 0 .376-.274l5.02-10.17Z\\\\\"></path></svg>0</span></li>\n                  <li><span><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-message\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M15 20h18m-18 9h9M7 41h17.63C33.67 41 41 33.67 41 24.63V24c0-9.389-7.611-17-17-17S7 14.611 7 24v17Z\\\\\"></path></svg>Reply</span></li>\n                </ul>\n              </div>\n              <!---->\n              <div class=\\\\\"arco-list-item-extra\\\\\">\n                <div class=\\\\\"image-area\\\\\"><img alt=\\\\\"arco-design\\\\\" src=\\\\\"//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/29c1f9d7d17c503c5d7bf4e538cb7c4f.png~tplv-uwbnlip3yd-webp.webp\\\\\"></div>\n              </div>\n            </div>\n            <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-list-item list-demo-item\\\\\">\n              <div class=\\\\\"arco-list-item-main\\\\\">\n                <!---->\n                <div class=\\\\\"arco-list-item-content\\\\\">\n                  <div class=\\\\\"arco-list-item-meta\\\\\">\n                    <div class=\\\\\"arco-list-item-meta-avatar\\\\\">\n                      <div class=\\\\\"arco-avatar arco-avatar-square\\\\\"><span class=\\\\\"arco-avatar-text\\\\\"><img alt=\\\\\"avatar\\\\\" src=\\\\\"//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/e278888093bef8910e829486fb45dd69.png~tplv-uwbnlip3yd-webp.webp\\\\\"></span>\n                        <!--v-if-->\n                      </div>\n                    </div>\n                    <div class=\\\\\"arco-list-item-meta-content\\\\\">\n                      <div class=\\\\\"arco-list-item-meta-title\\\\\">Balzac</div>\n                      <div class=\\\\\"arco-list-item-meta-description\\\\\">Beijing ByteDance Technology Co., Ltd. is an enterprise located in China. ByteDance has products such as TikTok, Toutiao, volcano video and Douyin (the Chinese version of TikTok).</div>\n                    </div>\n                  </div>\n                </div>\n                <ul class=\\\\\"arco-list-item-action\\\\\">\n                  <li><span><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-heart\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M38.083 12.912a9.929 9.929 0 0 1 .177 13.878l-.177.18L25.76 39.273c-.972.97-2.548.97-3.52 0L9.917 26.971l-.177-.181a9.929 9.929 0 0 1 .177-13.878c3.889-3.883 10.194-3.883 14.083 0 3.889-3.883 10.194-3.883 14.083 0Z\\\\\"></path></svg>83</span></li>\n                  <li><span><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-star\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M22.552 6.908a.5.5 0 0 1 .896 0l5.02 10.17a.5.5 0 0 0 .376.274l11.224 1.631a.5.5 0 0 1 .277.853l-8.122 7.916a.5.5 0 0 0-.143.443l1.917 11.178a.5.5 0 0 1-.726.527l-10.038-5.278a.5.5 0 0 0-.466 0L12.73 39.9a.5.5 0 0 1-.726-.527l1.918-11.178a.5.5 0 0 0-.144-.443l-8.122-7.916a.5.5 0 0 1 .278-.853l11.223-1.63a.5.5 0 0 0 .376-.274l5.02-10.17Z\\\\\"></path></svg>1</span></li>\n                  <li><span><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-message\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M15 20h18m-18 9h9M7 41h17.63C33.67 41 41 33.67 41 24.63V24c0-9.389-7.611-17-17-17S7 14.611 7 24v17Z\\\\\"></path></svg>Reply</span></li>\n                </ul>\n              </div>\n              <!---->\n              <div class=\\\\\"arco-list-item-extra\\\\\">\n                <div class=\\\\\"image-area\\\\\"><img alt=\\\\\"arco-design\\\\\" src=\\\\\"//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/04d7bc31dd67dcdf380bc3f6aa07599f.png~tplv-uwbnlip3yd-webp.webp\\\\\"></div>\n              </div>\n            </div>\n            <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-list-item list-demo-item\\\\\">\n              <div class=\\\\\"arco-list-item-main\\\\\">\n                <!---->\n                <div class=\\\\\"arco-list-item-content\\\\\">\n                  <div class=\\\\\"arco-list-item-meta\\\\\">\n                    <div class=\\\\\"arco-list-item-meta-avatar\\\\\">\n                      <div class=\\\\\"arco-avatar arco-avatar-square\\\\\"><span class=\\\\\"arco-avatar-text\\\\\"><img alt=\\\\\"avatar\\\\\" src=\\\\\"//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/9eeb1800d9b78349b24682c3518ac4a3.png~tplv-uwbnlip3yd-webp.webp\\\\\"></span>\n                        <!--v-if-->\n                      </div>\n                    </div>\n                    <div class=\\\\\"arco-list-item-meta-content\\\\\">\n                      <div class=\\\\\"arco-list-item-meta-title\\\\\">Plato</div>\n                      <div class=\\\\\"arco-list-item-meta-description\\\\\">Beijing ByteDance Technology Co., Ltd. is an enterprise located in China. ByteDance has products such as TikTok, Toutiao, volcano video and Douyin (the Chinese version of TikTok).</div>\n                    </div>\n                  </div>\n                </div>\n                <ul class=\\\\\"arco-list-item-action\\\\\">\n                  <li><span><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-heart\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M38.083 12.912a9.929 9.929 0 0 1 .177 13.878l-.177.18L25.76 39.273c-.972.97-2.548.97-3.52 0L9.917 26.971l-.177-.181a9.929 9.929 0 0 1 .177-13.878c3.889-3.883 10.194-3.883 14.083 0 3.889-3.883 10.194-3.883 14.083 0Z\\\\\"></path></svg>83</span></li>\n                  <li><span><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-star\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M22.552 6.908a.5.5 0 0 1 .896 0l5.02 10.17a.5.5 0 0 0 .376.274l11.224 1.631a.5.5 0 0 1 .277.853l-8.122 7.916a.5.5 0 0 0-.143.443l1.917 11.178a.5.5 0 0 1-.726.527l-10.038-5.278a.5.5 0 0 0-.466 0L12.73 39.9a.5.5 0 0 1-.726-.527l1.918-11.178a.5.5 0 0 0-.144-.443l-8.122-7.916a.5.5 0 0 1 .278-.853l11.223-1.63a.5.5 0 0 0 .376-.274l5.02-10.17Z\\\\\"></path></svg>2</span></li>\n                  <li><span><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-message\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M15 20h18m-18 9h9M7 41h17.63C33.67 41 41 33.67 41 24.63V24c0-9.389-7.611-17-17-17S7 14.611 7 24v17Z\\\\\"></path></svg>Reply</span></li>\n                </ul>\n              </div>\n              <!---->\n              <div class=\\\\\"arco-list-item-extra\\\\\">\n                <div class=\\\\\"image-area\\\\\"><img alt=\\\\\"arco-design\\\\\" src=\\\\\"//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/1f61854a849a076318ed527c8fca1bbf.png~tplv-uwbnlip3yd-webp.webp\\\\\"></div>\n              </div>\n            </div>\n            <!---->\n          </div>\n          <!---->\n        </div>\n      </div>\n      <!--v-if-->\n      <!--v-if-->\n    </div>\n    <div class=\\\\\"arco-pagination arco-pagination-size-medium arco-list-pagination\\\\\">\n      <!---->\n      <ul class=\\\\\"arco-pagination-list\\\\\"><span class=\\\\\"arco-pagination-item arco-pagination-item-previous arco-pagination-item-disabled\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-left\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M32 8.4 16.444 23.956 32 39.513\\\\\"></path></svg></span>\n        <li class=\\\\\"arco-pagination-item arco-pagination-item-active\\\\\" pages=\\\\\"5\\\\\">1</li>\n        <li class=\\\\\"arco-pagination-item\\\\\" pages=\\\\\"5\\\\\">2</li>\n        <li class=\\\\\"arco-pagination-item\\\\\" pages=\\\\\"5\\\\\">3</li>\n        <li class=\\\\\"arco-pagination-item\\\\\" pages=\\\\\"5\\\\\">4</li>\n        <li class=\\\\\"arco-pagination-item\\\\\" pages=\\\\\"5\\\\\">5</li>\n        <!----><span class=\\\\\"arco-pagination-item arco-pagination-item-next\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-right\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"m16 39.513 15.556-15.557L16 8.4\\\\\"></path></svg></span>\n      </ul>\n      <!---->\n      <!---->\n    </div>\n    <!---->\n  </div>\n</div>\"\n`;\n\nexports[`<list> demo: render [basic] correctly 1`] = `\n\"<div class=\\\\\"arco-list-wrapper\\\\\">\n  <div class=\\\\\"arco-spin arco-list-spin\\\\\">\n    <div class=\\\\\"arco-scrollbar arco-scrollbar-type-embed\\\\\">\n      <div class=\\\\\"arco-scrollbar-container arco-list arco-list-medium arco-list-bordered arco-list-split\\\\\">\n        <div class=\\\\\"arco-list-content-wrapper\\\\\">\n          <div class=\\\\\"arco-list-header\\\\\"> List title </div>\n          <div role=\\\\\"list\\\\\" class=\\\\\"arco-list-content\\\\\">\n            <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-list-item\\\\\">\n              <div class=\\\\\"arco-list-item-main\\\\\">\n                <!---->\n                <div class=\\\\\"arco-list-item-content\\\\\">Beijing Bytedance Technology Co., Ltd.</div>\n                <!---->\n              </div>\n              <!---->\n              <!---->\n            </div>\n            <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-list-item\\\\\">\n              <div class=\\\\\"arco-list-item-main\\\\\">\n                <!---->\n                <div class=\\\\\"arco-list-item-content\\\\\">Bytedance Technology Co., Ltd.</div>\n                <!---->\n              </div>\n              <!---->\n              <!---->\n            </div>\n            <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-list-item\\\\\">\n              <div class=\\\\\"arco-list-item-main\\\\\">\n                <!---->\n                <div class=\\\\\"arco-list-item-content\\\\\">Beijing Toutiao Technology Co., Ltd.</div>\n                <!---->\n              </div>\n              <!---->\n              <!---->\n            </div>\n            <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-list-item\\\\\">\n              <div class=\\\\\"arco-list-item-main\\\\\">\n                <!---->\n                <div class=\\\\\"arco-list-item-content\\\\\">Beijing Volcengine Technology Co., Ltd.</div>\n                <!---->\n              </div>\n              <!---->\n              <!---->\n            </div>\n            <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-list-item\\\\\">\n              <div class=\\\\\"arco-list-item-main\\\\\">\n                <!---->\n                <div class=\\\\\"arco-list-item-content\\\\\">China Beijing Bytedance Technology Co., Ltd.</div>\n                <!---->\n              </div>\n              <!---->\n              <!---->\n            </div>\n            <!---->\n          </div>\n          <!---->\n        </div>\n      </div>\n      <!--v-if-->\n      <!--v-if-->\n    </div>\n    <!---->\n    <!---->\n  </div>\n</div>\"\n`;\n\nexports[`<list> demo: render [grid] correctly 1`] = `\n\"<div class=\\\\\"arco-list-wrapper\\\\\">\n  <div class=\\\\\"arco-spin arco-list-spin\\\\\">\n    <div class=\\\\\"arco-scrollbar arco-scrollbar-type-embed\\\\\">\n      <div class=\\\\\"arco-scrollbar-container arco-list arco-list-medium arco-list-split\\\\\">\n        <div class=\\\\\"arco-list-content-wrapper\\\\\">\n          <!---->\n          <div role=\\\\\"list\\\\\" class=\\\\\"arco-list-content\\\\\">\n            <div class=\\\\\"arco-row arco-row-align-start arco-row-justify-start arco-list-row\\\\\">\n              <div class=\\\\\"arco-col arco-col-6 arco-list-col\\\\\">\n                <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-list-item\\\\\">\n                  <div class=\\\\\"arco-list-item-main\\\\\">\n                    <!---->\n                    <div class=\\\\\"arco-list-item-content\\\\\">\n                      <div class=\\\\\"arco-list-wrapper\\\\\">\n                        <div class=\\\\\"arco-spin arco-list-spin\\\\\">\n                          <div class=\\\\\"arco-scrollbar arco-scrollbar-type-embed\\\\\">\n                            <div class=\\\\\"arco-scrollbar-container arco-list arco-list-medium arco-list-bordered arco-list-split\\\\\">\n                              <div class=\\\\\"arco-list-content-wrapper\\\\\">\n                                <div class=\\\\\"arco-list-header\\\\\">Platform</div>\n                                <div role=\\\\\"list\\\\\" class=\\\\\"arco-list-content\\\\\">\n                                  <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-list-item\\\\\">\n                                    <div class=\\\\\"arco-list-item-main\\\\\">\n                                      <!---->\n                                      <div class=\\\\\"arco-list-item-content\\\\\">iOS</div>\n                                      <!---->\n                                    </div>\n                                    <!---->\n                                    <!---->\n                                  </div>\n                                  <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-list-item\\\\\">\n                                    <div class=\\\\\"arco-list-item-main\\\\\">\n                                      <!---->\n                                      <div class=\\\\\"arco-list-item-content\\\\\">Android</div>\n                                      <!---->\n                                    </div>\n                                    <!---->\n                                    <!---->\n                                  </div>\n                                  <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-list-item\\\\\">\n                                    <div class=\\\\\"arco-list-item-main\\\\\">\n                                      <!---->\n                                      <div class=\\\\\"arco-list-item-content\\\\\">Web</div>\n                                      <!---->\n                                    </div>\n                                    <!---->\n                                    <!---->\n                                  </div>\n                                  <!---->\n                                </div>\n                                <!---->\n                              </div>\n                            </div>\n                            <!--v-if-->\n                            <!--v-if-->\n                          </div>\n                          <!---->\n                          <!---->\n                        </div>\n                      </div>\n                    </div>\n                    <!---->\n                  </div>\n                  <!---->\n                  <!---->\n                </div>\n              </div>\n              <div class=\\\\\"arco-col arco-col-6 arco-list-col\\\\\">\n                <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-list-item\\\\\">\n                  <div class=\\\\\"arco-list-item-main\\\\\">\n                    <!---->\n                    <div class=\\\\\"arco-list-item-content\\\\\">\n                      <div class=\\\\\"arco-list-wrapper\\\\\">\n                        <div class=\\\\\"arco-spin arco-list-spin\\\\\">\n                          <div class=\\\\\"arco-scrollbar arco-scrollbar-type-embed\\\\\">\n                            <div class=\\\\\"arco-scrollbar-container arco-list arco-list-medium arco-list-bordered arco-list-split\\\\\">\n                              <div class=\\\\\"arco-list-content-wrapper\\\\\">\n                                <div class=\\\\\"arco-list-header\\\\\">Framework</div>\n                                <div role=\\\\\"list\\\\\" class=\\\\\"arco-list-content\\\\\">\n                                  <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-list-item\\\\\">\n                                    <div class=\\\\\"arco-list-item-main\\\\\">\n                                      <!---->\n                                      <div class=\\\\\"arco-list-item-content\\\\\">Angular</div>\n                                      <!---->\n                                    </div>\n                                    <!---->\n                                    <!---->\n                                  </div>\n                                  <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-list-item\\\\\">\n                                    <div class=\\\\\"arco-list-item-main\\\\\">\n                                      <!---->\n                                      <div class=\\\\\"arco-list-item-content\\\\\">Vue</div>\n                                      <!---->\n                                    </div>\n                                    <!---->\n                                    <!---->\n                                  </div>\n                                  <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-list-item\\\\\">\n                                    <div class=\\\\\"arco-list-item-main\\\\\">\n                                      <!---->\n                                      <div class=\\\\\"arco-list-item-content\\\\\">React</div>\n                                      <!---->\n                                    </div>\n                                    <!---->\n                                    <!---->\n                                  </div>\n                                  <!---->\n                                </div>\n                                <!---->\n                              </div>\n                            </div>\n                            <!--v-if-->\n                            <!--v-if-->\n                          </div>\n                          <!---->\n                          <!---->\n                        </div>\n                      </div>\n                    </div>\n                    <!---->\n                  </div>\n                  <!---->\n                  <!---->\n                </div>\n              </div>\n              <div class=\\\\\"arco-col arco-col-6 arco-list-col\\\\\">\n                <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-list-item\\\\\">\n                  <div class=\\\\\"arco-list-item-main\\\\\">\n                    <!---->\n                    <div class=\\\\\"arco-list-item-content\\\\\">\n                      <div class=\\\\\"arco-list-wrapper\\\\\">\n                        <div class=\\\\\"arco-spin arco-list-spin\\\\\">\n                          <div class=\\\\\"arco-scrollbar arco-scrollbar-type-embed\\\\\">\n                            <div class=\\\\\"arco-scrollbar-container arco-list arco-list-medium arco-list-bordered arco-list-split\\\\\">\n                              <div class=\\\\\"arco-list-content-wrapper\\\\\">\n                                <div class=\\\\\"arco-list-header\\\\\">Language</div>\n                                <div role=\\\\\"list\\\\\" class=\\\\\"arco-list-content\\\\\">\n                                  <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-list-item\\\\\">\n                                    <div class=\\\\\"arco-list-item-main\\\\\">\n                                      <!---->\n                                      <div class=\\\\\"arco-list-item-content\\\\\">C++</div>\n                                      <!---->\n                                    </div>\n                                    <!---->\n                                    <!---->\n                                  </div>\n                                  <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-list-item\\\\\">\n                                    <div class=\\\\\"arco-list-item-main\\\\\">\n                                      <!---->\n                                      <div class=\\\\\"arco-list-item-content\\\\\">JavaScript</div>\n                                      <!---->\n                                    </div>\n                                    <!---->\n                                    <!---->\n                                  </div>\n                                  <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-list-item\\\\\">\n                                    <div class=\\\\\"arco-list-item-main\\\\\">\n                                      <!---->\n                                      <div class=\\\\\"arco-list-item-content\\\\\">Python</div>\n                                      <!---->\n                                    </div>\n                                    <!---->\n                                    <!---->\n                                  </div>\n                                  <!---->\n                                </div>\n                                <!---->\n                              </div>\n                            </div>\n                            <!--v-if-->\n                            <!--v-if-->\n                          </div>\n                          <!---->\n                          <!---->\n                        </div>\n                      </div>\n                    </div>\n                    <!---->\n                  </div>\n                  <!---->\n                  <!---->\n                </div>\n              </div>\n              <div class=\\\\\"arco-col arco-col-6 arco-list-col\\\\\">\n                <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-list-item\\\\\">\n                  <div class=\\\\\"arco-list-item-main\\\\\">\n                    <!---->\n                    <div class=\\\\\"arco-list-item-content\\\\\">\n                      <div class=\\\\\"arco-list-wrapper\\\\\">\n                        <div class=\\\\\"arco-spin arco-list-spin\\\\\">\n                          <div class=\\\\\"arco-scrollbar arco-scrollbar-type-embed\\\\\">\n                            <div class=\\\\\"arco-scrollbar-container arco-list arco-list-medium arco-list-bordered arco-list-split\\\\\">\n                              <div class=\\\\\"arco-list-content-wrapper\\\\\">\n                                <div class=\\\\\"arco-list-header\\\\\">Component</div>\n                                <div role=\\\\\"list\\\\\" class=\\\\\"arco-list-content\\\\\">\n                                  <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-list-item\\\\\">\n                                    <div class=\\\\\"arco-list-item-main\\\\\">\n                                      <!---->\n                                      <div class=\\\\\"arco-list-item-content\\\\\">Button</div>\n                                      <!---->\n                                    </div>\n                                    <!---->\n                                    <!---->\n                                  </div>\n                                  <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-list-item\\\\\">\n                                    <div class=\\\\\"arco-list-item-main\\\\\">\n                                      <!---->\n                                      <div class=\\\\\"arco-list-item-content\\\\\">Breadcrumb</div>\n                                      <!---->\n                                    </div>\n                                    <!---->\n                                    <!---->\n                                  </div>\n                                  <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-list-item\\\\\">\n                                    <div class=\\\\\"arco-list-item-main\\\\\">\n                                      <!---->\n                                      <div class=\\\\\"arco-list-item-content\\\\\">Transfer</div>\n                                      <!---->\n                                    </div>\n                                    <!---->\n                                    <!---->\n                                  </div>\n                                  <!---->\n                                </div>\n                                <!---->\n                              </div>\n                            </div>\n                            <!--v-if-->\n                            <!--v-if-->\n                          </div>\n                          <!---->\n                          <!---->\n                        </div>\n                      </div>\n                    </div>\n                    <!---->\n                  </div>\n                  <!---->\n                  <!---->\n                </div>\n              </div>\n            </div>\n            <!---->\n          </div>\n          <!---->\n        </div>\n      </div>\n      <!--v-if-->\n      <!--v-if-->\n    </div>\n    <!---->\n    <!---->\n  </div>\n</div>\"\n`;\n\nexports[`<list> demo: render [meta] correctly 1`] = `\n\"<div class=\\\\\"arco-list-wrapper\\\\\">\n  <div class=\\\\\"arco-spin arco-list-spin\\\\\">\n    <div class=\\\\\"arco-scrollbar arco-scrollbar-type-embed\\\\\">\n      <div class=\\\\\"arco-scrollbar-container arco-list arco-list-medium arco-list-bordered arco-list-split\\\\\">\n        <div class=\\\\\"arco-list-content-wrapper\\\\\">\n          <!---->\n          <div role=\\\\\"list\\\\\" class=\\\\\"arco-list-content\\\\\">\n            <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-list-item\\\\\">\n              <div class=\\\\\"arco-list-item-main\\\\\">\n                <!---->\n                <div class=\\\\\"arco-list-item-content\\\\\">\n                  <div class=\\\\\"arco-list-item-meta\\\\\">\n                    <div class=\\\\\"arco-list-item-meta-avatar\\\\\">\n                      <div class=\\\\\"arco-avatar arco-avatar-square\\\\\"><span class=\\\\\"arco-avatar-text\\\\\"><img alt=\\\\\"avatar\\\\\" src=\\\\\"https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp\\\\\"></span>\n                        <!--v-if-->\n                      </div>\n                    </div>\n                    <div class=\\\\\"arco-list-item-meta-content\\\\\">\n                      <div class=\\\\\"arco-list-item-meta-title\\\\\">Beijing Bytedance Technology Co., Ltd.</div>\n                      <div class=\\\\\"arco-list-item-meta-description\\\\\">Beijing ByteDance Technology Co., Ltd. is an enterprise located in China.</div>\n                    </div>\n                  </div>\n                </div>\n                <!---->\n              </div>\n              <!---->\n              <!---->\n            </div>\n            <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-list-item\\\\\">\n              <div class=\\\\\"arco-list-item-main\\\\\">\n                <!---->\n                <div class=\\\\\"arco-list-item-content\\\\\">\n                  <div class=\\\\\"arco-list-item-meta\\\\\">\n                    <div class=\\\\\"arco-list-item-meta-avatar\\\\\">\n                      <div class=\\\\\"arco-avatar arco-avatar-square\\\\\"><span class=\\\\\"arco-avatar-text\\\\\"><img alt=\\\\\"avatar\\\\\" src=\\\\\"https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp\\\\\"></span>\n                        <!--v-if-->\n                      </div>\n                    </div>\n                    <div class=\\\\\"arco-list-item-meta-content\\\\\">\n                      <div class=\\\\\"arco-list-item-meta-title\\\\\">Beijing Bytedance Technology Co., Ltd.</div>\n                      <div class=\\\\\"arco-list-item-meta-description\\\\\">Beijing ByteDance Technology Co., Ltd. is an enterprise located in China.</div>\n                    </div>\n                  </div>\n                </div>\n                <!---->\n              </div>\n              <!---->\n              <!---->\n            </div>\n            <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-list-item\\\\\">\n              <div class=\\\\\"arco-list-item-main\\\\\">\n                <!---->\n                <div class=\\\\\"arco-list-item-content\\\\\">\n                  <div class=\\\\\"arco-list-item-meta\\\\\">\n                    <div class=\\\\\"arco-list-item-meta-avatar\\\\\">\n                      <div class=\\\\\"arco-avatar arco-avatar-square\\\\\"><span class=\\\\\"arco-avatar-text\\\\\"><img alt=\\\\\"avatar\\\\\" src=\\\\\"https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp\\\\\"></span>\n                        <!--v-if-->\n                      </div>\n                    </div>\n                    <div class=\\\\\"arco-list-item-meta-content\\\\\">\n                      <div class=\\\\\"arco-list-item-meta-title\\\\\">Beijing Bytedance Technology Co., Ltd.</div>\n                      <div class=\\\\\"arco-list-item-meta-description\\\\\">Beijing ByteDance Technology Co., Ltd. is an enterprise located in China.</div>\n                    </div>\n                  </div>\n                </div>\n                <!---->\n              </div>\n              <!---->\n              <!---->\n            </div>\n            <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-list-item\\\\\">\n              <div class=\\\\\"arco-list-item-main\\\\\">\n                <!---->\n                <div class=\\\\\"arco-list-item-content\\\\\">\n                  <div class=\\\\\"arco-list-item-meta\\\\\">\n                    <div class=\\\\\"arco-list-item-meta-avatar\\\\\">\n                      <div class=\\\\\"arco-avatar arco-avatar-square\\\\\"><span class=\\\\\"arco-avatar-text\\\\\"><img alt=\\\\\"avatar\\\\\" src=\\\\\"https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp\\\\\"></span>\n                        <!--v-if-->\n                      </div>\n                    </div>\n                    <div class=\\\\\"arco-list-item-meta-content\\\\\">\n                      <div class=\\\\\"arco-list-item-meta-title\\\\\">Beijing Bytedance Technology Co., Ltd.</div>\n                      <div class=\\\\\"arco-list-item-meta-description\\\\\">Beijing ByteDance Technology Co., Ltd. is an enterprise located in China.</div>\n                    </div>\n                  </div>\n                </div>\n                <!---->\n              </div>\n              <!---->\n              <!---->\n            </div>\n            <!---->\n          </div>\n          <!---->\n        </div>\n      </div>\n      <!--v-if-->\n      <!--v-if-->\n    </div>\n    <!---->\n    <!---->\n  </div>\n</div>\"\n`;\n\nexports[`<list> demo: render [responsive-grid] correctly 1`] = `\n\"<div class=\\\\\"arco-list-wrapper\\\\\">\n  <div class=\\\\\"arco-spin arco-list-spin\\\\\">\n    <div class=\\\\\"arco-scrollbar arco-scrollbar-type-embed\\\\\">\n      <div class=\\\\\"arco-scrollbar-container arco-list arco-list-medium arco-list-split\\\\\">\n        <div class=\\\\\"arco-list-content-wrapper\\\\\">\n          <!---->\n          <div role=\\\\\"list\\\\\" class=\\\\\"arco-list-content\\\\\">\n            <div class=\\\\\"arco-row arco-row-align-start arco-row-justify-start arco-list-row\\\\\" style=\\\\\"margin: -10px -10px -10px -10px;\\\\\">\n              <div class=\\\\\"arco-col arco-col-sm-24 arco-col-md-12 arco-col-lg-8 arco-col-xl-6 arco-list-col\\\\\" style=\\\\\"padding: 10px 10px 10px 10px;\\\\\">\n                <div class=\\\\\"arco-list-wrapper\\\\\">\n                  <div class=\\\\\"arco-spin arco-list-spin\\\\\">\n                    <div class=\\\\\"arco-scrollbar arco-scrollbar-type-embed\\\\\">\n                      <div class=\\\\\"arco-scrollbar-container arco-list arco-list-medium arco-list-bordered arco-list-split\\\\\">\n                        <div class=\\\\\"arco-list-content-wrapper\\\\\">\n                          <div class=\\\\\"arco-list-header\\\\\">Platform</div>\n                          <div role=\\\\\"list\\\\\" class=\\\\\"arco-list-content\\\\\">\n                            <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-list-item\\\\\">\n                              <div class=\\\\\"arco-list-item-main\\\\\">\n                                <!---->\n                                <div class=\\\\\"arco-list-item-content\\\\\">iOS</div>\n                                <!---->\n                              </div>\n                              <!---->\n                              <!---->\n                            </div>\n                            <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-list-item\\\\\">\n                              <div class=\\\\\"arco-list-item-main\\\\\">\n                                <!---->\n                                <div class=\\\\\"arco-list-item-content\\\\\">Android</div>\n                                <!---->\n                              </div>\n                              <!---->\n                              <!---->\n                            </div>\n                            <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-list-item\\\\\">\n                              <div class=\\\\\"arco-list-item-main\\\\\">\n                                <!---->\n                                <div class=\\\\\"arco-list-item-content\\\\\">Web</div>\n                                <!---->\n                              </div>\n                              <!---->\n                              <!---->\n                            </div>\n                            <!---->\n                          </div>\n                          <!---->\n                        </div>\n                      </div>\n                      <!--v-if-->\n                      <!--v-if-->\n                    </div>\n                    <!---->\n                    <!---->\n                  </div>\n                </div>\n              </div>\n              <div class=\\\\\"arco-col arco-col-sm-24 arco-col-md-12 arco-col-lg-8 arco-col-xl-6 arco-list-col\\\\\" style=\\\\\"padding: 10px 10px 10px 10px;\\\\\">\n                <div class=\\\\\"arco-list-wrapper\\\\\">\n                  <div class=\\\\\"arco-spin arco-list-spin\\\\\">\n                    <div class=\\\\\"arco-scrollbar arco-scrollbar-type-embed\\\\\">\n                      <div class=\\\\\"arco-scrollbar-container arco-list arco-list-medium arco-list-bordered arco-list-split\\\\\">\n                        <div class=\\\\\"arco-list-content-wrapper\\\\\">\n                          <div class=\\\\\"arco-list-header\\\\\">Framework</div>\n                          <div role=\\\\\"list\\\\\" class=\\\\\"arco-list-content\\\\\">\n                            <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-list-item\\\\\">\n                              <div class=\\\\\"arco-list-item-main\\\\\">\n                                <!---->\n                                <div class=\\\\\"arco-list-item-content\\\\\">Angular</div>\n                                <!---->\n                              </div>\n                              <!---->\n                              <!---->\n                            </div>\n                            <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-list-item\\\\\">\n                              <div class=\\\\\"arco-list-item-main\\\\\">\n                                <!---->\n                                <div class=\\\\\"arco-list-item-content\\\\\">Vue</div>\n                                <!---->\n                              </div>\n                              <!---->\n                              <!---->\n                            </div>\n                            <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-list-item\\\\\">\n                              <div class=\\\\\"arco-list-item-main\\\\\">\n                                <!---->\n                                <div class=\\\\\"arco-list-item-content\\\\\">React</div>\n                                <!---->\n                              </div>\n                              <!---->\n                              <!---->\n                            </div>\n                            <!---->\n                          </div>\n                          <!---->\n                        </div>\n                      </div>\n                      <!--v-if-->\n                      <!--v-if-->\n                    </div>\n                    <!---->\n                    <!---->\n                  </div>\n                </div>\n              </div>\n              <div class=\\\\\"arco-col arco-col-sm-24 arco-col-md-12 arco-col-lg-8 arco-col-xl-6 arco-list-col\\\\\" style=\\\\\"padding: 10px 10px 10px 10px;\\\\\">\n                <div class=\\\\\"arco-list-wrapper\\\\\">\n                  <div class=\\\\\"arco-spin arco-list-spin\\\\\">\n                    <div class=\\\\\"arco-scrollbar arco-scrollbar-type-embed\\\\\">\n                      <div class=\\\\\"arco-scrollbar-container arco-list arco-list-medium arco-list-bordered arco-list-split\\\\\">\n                        <div class=\\\\\"arco-list-content-wrapper\\\\\">\n                          <div class=\\\\\"arco-list-header\\\\\">Language</div>\n                          <div role=\\\\\"list\\\\\" class=\\\\\"arco-list-content\\\\\">\n                            <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-list-item\\\\\">\n                              <div class=\\\\\"arco-list-item-main\\\\\">\n                                <!---->\n                                <div class=\\\\\"arco-list-item-content\\\\\">C++</div>\n                                <!---->\n                              </div>\n                              <!---->\n                              <!---->\n                            </div>\n                            <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-list-item\\\\\">\n                              <div class=\\\\\"arco-list-item-main\\\\\">\n                                <!---->\n                                <div class=\\\\\"arco-list-item-content\\\\\">JavaScript</div>\n                                <!---->\n                              </div>\n                              <!---->\n                              <!---->\n                            </div>\n                            <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-list-item\\\\\">\n                              <div class=\\\\\"arco-list-item-main\\\\\">\n                                <!---->\n                                <div class=\\\\\"arco-list-item-content\\\\\">Python</div>\n                                <!---->\n                              </div>\n                              <!---->\n                              <!---->\n                            </div>\n                            <!---->\n                          </div>\n                          <!---->\n                        </div>\n                      </div>\n                      <!--v-if-->\n                      <!--v-if-->\n                    </div>\n                    <!---->\n                    <!---->\n                  </div>\n                </div>\n              </div>\n              <div class=\\\\\"arco-col arco-col-sm-24 arco-col-md-12 arco-col-lg-8 arco-col-xl-6 arco-list-col\\\\\" style=\\\\\"padding: 10px 10px 10px 10px;\\\\\">\n                <div class=\\\\\"arco-list-wrapper\\\\\">\n                  <div class=\\\\\"arco-spin arco-list-spin\\\\\">\n                    <div class=\\\\\"arco-scrollbar arco-scrollbar-type-embed\\\\\">\n                      <div class=\\\\\"arco-scrollbar-container arco-list arco-list-medium arco-list-bordered arco-list-split\\\\\">\n                        <div class=\\\\\"arco-list-content-wrapper\\\\\">\n                          <div class=\\\\\"arco-list-header\\\\\">Component</div>\n                          <div role=\\\\\"list\\\\\" class=\\\\\"arco-list-content\\\\\">\n                            <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-list-item\\\\\">\n                              <div class=\\\\\"arco-list-item-main\\\\\">\n                                <!---->\n                                <div class=\\\\\"arco-list-item-content\\\\\">Button</div>\n                                <!---->\n                              </div>\n                              <!---->\n                              <!---->\n                            </div>\n                            <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-list-item\\\\\">\n                              <div class=\\\\\"arco-list-item-main\\\\\">\n                                <!---->\n                                <div class=\\\\\"arco-list-item-content\\\\\">Breadcrumb</div>\n                                <!---->\n                              </div>\n                              <!---->\n                              <!---->\n                            </div>\n                            <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-list-item\\\\\">\n                              <div class=\\\\\"arco-list-item-main\\\\\">\n                                <!---->\n                                <div class=\\\\\"arco-list-item-content\\\\\">Transfer</div>\n                                <!---->\n                              </div>\n                              <!---->\n                              <!---->\n                            </div>\n                            <!---->\n                          </div>\n                          <!---->\n                        </div>\n                      </div>\n                      <!--v-if-->\n                      <!--v-if-->\n                    </div>\n                    <!---->\n                    <!---->\n                  </div>\n                </div>\n              </div>\n              <div class=\\\\\"arco-col arco-col-sm-24 arco-col-md-12 arco-col-lg-8 arco-col-xl-6 arco-list-col\\\\\" style=\\\\\"padding: 10px 10px 10px 10px;\\\\\">\n                <div class=\\\\\"arco-list-wrapper\\\\\">\n                  <div class=\\\\\"arco-spin arco-list-spin\\\\\">\n                    <div class=\\\\\"arco-scrollbar arco-scrollbar-type-embed\\\\\">\n                      <div class=\\\\\"arco-scrollbar-container arco-list arco-list-medium arco-list-bordered arco-list-split\\\\\">\n                        <div class=\\\\\"arco-list-content-wrapper\\\\\">\n                          <div class=\\\\\"arco-list-header\\\\\">Design</div>\n                          <div role=\\\\\"list\\\\\" class=\\\\\"arco-list-content\\\\\">\n                            <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-list-item\\\\\">\n                              <div class=\\\\\"arco-list-item-main\\\\\">\n                                <!---->\n                                <div class=\\\\\"arco-list-item-content\\\\\">Figma</div>\n                                <!---->\n                              </div>\n                              <!---->\n                              <!---->\n                            </div>\n                            <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-list-item\\\\\">\n                              <div class=\\\\\"arco-list-item-main\\\\\">\n                                <!---->\n                                <div class=\\\\\"arco-list-item-content\\\\\">Sketch</div>\n                                <!---->\n                              </div>\n                              <!---->\n                              <!---->\n                            </div>\n                            <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-list-item\\\\\">\n                              <div class=\\\\\"arco-list-item-main\\\\\">\n                                <!---->\n                                <div class=\\\\\"arco-list-item-content\\\\\">Adobe XD</div>\n                                <!---->\n                              </div>\n                              <!---->\n                              <!---->\n                            </div>\n                            <!---->\n                          </div>\n                          <!---->\n                        </div>\n                      </div>\n                      <!--v-if-->\n                      <!--v-if-->\n                    </div>\n                    <!---->\n                    <!---->\n                  </div>\n                </div>\n              </div>\n              <div class=\\\\\"arco-col arco-col-sm-24 arco-col-md-12 arco-col-lg-8 arco-col-xl-6 arco-list-col\\\\\" style=\\\\\"padding: 10px 10px 10px 10px;\\\\\">\n                <div class=\\\\\"arco-list-wrapper\\\\\">\n                  <div class=\\\\\"arco-spin arco-list-spin\\\\\">\n                    <div class=\\\\\"arco-scrollbar arco-scrollbar-type-embed\\\\\">\n                      <div class=\\\\\"arco-scrollbar-container arco-list arco-list-medium arco-list-bordered arco-list-split\\\\\">\n                        <div class=\\\\\"arco-list-content-wrapper\\\\\">\n                          <div class=\\\\\"arco-list-header\\\\\">Plugin</div>\n                          <div role=\\\\\"list\\\\\" class=\\\\\"arco-list-content\\\\\">\n                            <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-list-item\\\\\">\n                              <div class=\\\\\"arco-list-item-main\\\\\">\n                                <!---->\n                                <div class=\\\\\"arco-list-item-content\\\\\">Edu Tools</div>\n                                <!---->\n                              </div>\n                              <!---->\n                              <!---->\n                            </div>\n                            <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-list-item\\\\\">\n                              <div class=\\\\\"arco-list-item-main\\\\\">\n                                <!---->\n                                <div class=\\\\\"arco-list-item-content\\\\\">BashSupport</div>\n                                <!---->\n                              </div>\n                              <!---->\n                              <!---->\n                            </div>\n                            <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-list-item\\\\\">\n                              <div class=\\\\\"arco-list-item-main\\\\\">\n                                <!---->\n                                <div class=\\\\\"arco-list-item-content\\\\\">GitToolBox</div>\n                                <!---->\n                              </div>\n                              <!---->\n                              <!---->\n                            </div>\n                            <!---->\n                          </div>\n                          <!---->\n                        </div>\n                      </div>\n                      <!--v-if-->\n                      <!--v-if-->\n                    </div>\n                    <!---->\n                    <!---->\n                  </div>\n                </div>\n              </div>\n              <div class=\\\\\"arco-col arco-col-sm-24 arco-col-md-12 arco-col-lg-8 arco-col-xl-6 arco-list-col\\\\\" style=\\\\\"padding: 10px 10px 10px 10px;\\\\\">\n                <div class=\\\\\"arco-list-wrapper\\\\\">\n                  <div class=\\\\\"arco-spin arco-list-spin\\\\\">\n                    <div class=\\\\\"arco-scrollbar arco-scrollbar-type-embed\\\\\">\n                      <div class=\\\\\"arco-scrollbar-container arco-list arco-list-medium arco-list-bordered arco-list-split\\\\\">\n                        <div class=\\\\\"arco-list-content-wrapper\\\\\">\n                          <div class=\\\\\"arco-list-header\\\\\">Platform</div>\n                          <div role=\\\\\"list\\\\\" class=\\\\\"arco-list-content\\\\\">\n                            <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-list-item\\\\\">\n                              <div class=\\\\\"arco-list-item-main\\\\\">\n                                <!---->\n                                <div class=\\\\\"arco-list-item-content\\\\\">iOS</div>\n                                <!---->\n                              </div>\n                              <!---->\n                              <!---->\n                            </div>\n                            <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-list-item\\\\\">\n                              <div class=\\\\\"arco-list-item-main\\\\\">\n                                <!---->\n                                <div class=\\\\\"arco-list-item-content\\\\\">Android</div>\n                                <!---->\n                              </div>\n                              <!---->\n                              <!---->\n                            </div>\n                            <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-list-item\\\\\">\n                              <div class=\\\\\"arco-list-item-main\\\\\">\n                                <!---->\n                                <div class=\\\\\"arco-list-item-content\\\\\">Web</div>\n                                <!---->\n                              </div>\n                              <!---->\n                              <!---->\n                            </div>\n                            <!---->\n                          </div>\n                          <!---->\n                        </div>\n                      </div>\n                      <!--v-if-->\n                      <!--v-if-->\n                    </div>\n                    <!---->\n                    <!---->\n                  </div>\n                </div>\n              </div>\n              <div class=\\\\\"arco-col arco-col-sm-24 arco-col-md-12 arco-col-lg-8 arco-col-xl-6 arco-list-col\\\\\" style=\\\\\"padding: 10px 10px 10px 10px;\\\\\">\n                <div class=\\\\\"arco-list-wrapper\\\\\">\n                  <div class=\\\\\"arco-spin arco-list-spin\\\\\">\n                    <div class=\\\\\"arco-scrollbar arco-scrollbar-type-embed\\\\\">\n                      <div class=\\\\\"arco-scrollbar-container arco-list arco-list-medium arco-list-bordered arco-list-split\\\\\">\n                        <div class=\\\\\"arco-list-content-wrapper\\\\\">\n                          <div class=\\\\\"arco-list-header\\\\\">Framework</div>\n                          <div role=\\\\\"list\\\\\" class=\\\\\"arco-list-content\\\\\">\n                            <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-list-item\\\\\">\n                              <div class=\\\\\"arco-list-item-main\\\\\">\n                                <!---->\n                                <div class=\\\\\"arco-list-item-content\\\\\">Angular</div>\n                                <!---->\n                              </div>\n                              <!---->\n                              <!---->\n                            </div>\n                            <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-list-item\\\\\">\n                              <div class=\\\\\"arco-list-item-main\\\\\">\n                                <!---->\n                                <div class=\\\\\"arco-list-item-content\\\\\">Vue</div>\n                                <!---->\n                              </div>\n                              <!---->\n                              <!---->\n                            </div>\n                            <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-list-item\\\\\">\n                              <div class=\\\\\"arco-list-item-main\\\\\">\n                                <!---->\n                                <div class=\\\\\"arco-list-item-content\\\\\">React</div>\n                                <!---->\n                              </div>\n                              <!---->\n                              <!---->\n                            </div>\n                            <!---->\n                          </div>\n                          <!---->\n                        </div>\n                      </div>\n                      <!--v-if-->\n                      <!--v-if-->\n                    </div>\n                    <!---->\n                    <!---->\n                  </div>\n                </div>\n              </div>\n              <div class=\\\\\"arco-col arco-col-sm-24 arco-col-md-12 arco-col-lg-8 arco-col-xl-6 arco-list-col\\\\\" style=\\\\\"padding: 10px 10px 10px 10px;\\\\\">\n                <div class=\\\\\"arco-list-wrapper\\\\\">\n                  <div class=\\\\\"arco-spin arco-list-spin\\\\\">\n                    <div class=\\\\\"arco-scrollbar arco-scrollbar-type-embed\\\\\">\n                      <div class=\\\\\"arco-scrollbar-container arco-list arco-list-medium arco-list-bordered arco-list-split\\\\\">\n                        <div class=\\\\\"arco-list-content-wrapper\\\\\">\n                          <div class=\\\\\"arco-list-header\\\\\">Language</div>\n                          <div role=\\\\\"list\\\\\" class=\\\\\"arco-list-content\\\\\">\n                            <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-list-item\\\\\">\n                              <div class=\\\\\"arco-list-item-main\\\\\">\n                                <!---->\n                                <div class=\\\\\"arco-list-item-content\\\\\">C++</div>\n                                <!---->\n                              </div>\n                              <!---->\n                              <!---->\n                            </div>\n                            <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-list-item\\\\\">\n                              <div class=\\\\\"arco-list-item-main\\\\\">\n                                <!---->\n                                <div class=\\\\\"arco-list-item-content\\\\\">JavaScript</div>\n                                <!---->\n                              </div>\n                              <!---->\n                              <!---->\n                            </div>\n                            <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-list-item\\\\\">\n                              <div class=\\\\\"arco-list-item-main\\\\\">\n                                <!---->\n                                <div class=\\\\\"arco-list-item-content\\\\\">Python</div>\n                                <!---->\n                              </div>\n                              <!---->\n                              <!---->\n                            </div>\n                            <!---->\n                          </div>\n                          <!---->\n                        </div>\n                      </div>\n                      <!--v-if-->\n                      <!--v-if-->\n                    </div>\n                    <!---->\n                    <!---->\n                  </div>\n                </div>\n              </div>\n            </div>\n            <!---->\n          </div>\n          <!---->\n        </div>\n      </div>\n      <!--v-if-->\n      <!--v-if-->\n    </div>\n    <!---->\n    <!---->\n  </div>\n</div>\"\n`;\n\nexports[`<list> demo: render [scroll] correctly 1`] = `\n\"<div style=\\\\\"margin-bottom: 10px;\\\\\"><button type=\\\\\"button\\\\\" role=\\\\\"switch\\\\\" aria-checked=\\\\\"true\\\\\" class=\\\\\"arco-switch arco-switch-type-circle arco-switch-checked\\\\\"><span class=\\\\\"arco-switch-handle\\\\\"><span class=\\\\\"arco-switch-handle-icon\\\\\"></span></span><!--  prettier-ignore  -->\n    <!--v-if-->\n  </button> Virtual Scrollbar </div>\n<div class=\\\\\"arco-list-wrapper\\\\\">\n  <div class=\\\\\"arco-spin arco-list-spin\\\\\">\n    <div class=\\\\\"arco-scrollbar arco-scrollbar-type-embed\\\\\">\n      <div class=\\\\\"arco-scrollbar-container arco-list arco-list-medium arco-list-bordered arco-list-split\\\\\" style=\\\\\"max-height: 240px; overflow-y: auto;\\\\\">\n        <div class=\\\\\"arco-list-content-wrapper\\\\\">\n          <div class=\\\\\"arco-list-header\\\\\"> List title </div>\n          <div role=\\\\\"list\\\\\" class=\\\\\"arco-list-content\\\\\">\n            <!---->\n            <div class=\\\\\"arco-list-item arco-list-scroll-loading\\\\\">\n              <div class=\\\\\"arco-spin\\\\\">\n                <div class=\\\\\"arco-spin-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-loading arco-icon-spin\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n                    <path d=\\\\\"M42 24c0 9.941-8.059 18-18 18S6 33.941 6 24 14.059 6 24 6\\\\\"></path>\n                  </svg></div>\n                <!---->\n              </div>\n            </div>\n          </div>\n          <!---->\n        </div>\n      </div>\n      <!--v-if-->\n      <!--v-if-->\n    </div>\n    <!---->\n    <!---->\n  </div>\n</div>\"\n`;\n\nexports[`<list> demo: render [size] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-vertical\\\\\" style=\\\\\"column-gap: 24px; row-gap: 24px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-radio-group-button arco-radio-group-size-medium arco-radio-group-direction-horizontal\\\\\"><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"small\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">Small</span></label><label class=\\\\\"arco-radio-button arco-radio-checked\\\\\"><input type=\\\\\"radio\\\\\" checked=\\\\\"\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"medium\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">Medium</span></label><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"large\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">Large</span></label></span></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-list-wrapper\\\\\">\n      <div class=\\\\\"arco-spin arco-list-spin\\\\\">\n        <div class=\\\\\"arco-scrollbar arco-scrollbar-type-embed\\\\\">\n          <div class=\\\\\"arco-scrollbar-container arco-list arco-list-medium arco-list-bordered arco-list-split\\\\\">\n            <div class=\\\\\"arco-list-content-wrapper\\\\\">\n              <div class=\\\\\"arco-list-header\\\\\"> List title </div>\n              <div role=\\\\\"list\\\\\" class=\\\\\"arco-list-content\\\\\">\n                <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-list-item\\\\\">\n                  <div class=\\\\\"arco-list-item-main\\\\\">\n                    <!---->\n                    <div class=\\\\\"arco-list-item-content\\\\\">Beijing Bytedance Technology Co., Ltd.</div>\n                    <!---->\n                  </div>\n                  <!---->\n                  <!---->\n                </div>\n                <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-list-item\\\\\">\n                  <div class=\\\\\"arco-list-item-main\\\\\">\n                    <!---->\n                    <div class=\\\\\"arco-list-item-content\\\\\">Bytedance Technology Co., Ltd.</div>\n                    <!---->\n                  </div>\n                  <!---->\n                  <!---->\n                </div>\n                <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-list-item\\\\\">\n                  <div class=\\\\\"arco-list-item-main\\\\\">\n                    <!---->\n                    <div class=\\\\\"arco-list-item-content\\\\\">Beijing Toutiao Technology Co., Ltd.</div>\n                    <!---->\n                  </div>\n                  <!---->\n                  <!---->\n                </div>\n                <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-list-item\\\\\">\n                  <div class=\\\\\"arco-list-item-main\\\\\">\n                    <!---->\n                    <div class=\\\\\"arco-list-item-content\\\\\">Beijing Volcengine Technology Co., Ltd.</div>\n                    <!---->\n                  </div>\n                  <!---->\n                  <!---->\n                </div>\n                <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-list-item\\\\\">\n                  <div class=\\\\\"arco-list-item-main\\\\\">\n                    <!---->\n                    <div class=\\\\\"arco-list-item-content\\\\\">China Beijing Bytedance Technology Co., Ltd.</div>\n                    <!---->\n                  </div>\n                  <!---->\n                  <!---->\n                </div>\n                <!---->\n              </div>\n              <!---->\n            </div>\n          </div>\n          <!--v-if-->\n          <!--v-if-->\n        </div>\n        <!---->\n        <!---->\n      </div>\n    </div>\n  </div>\n</div>\"\n`;\n\nexports[`<list> demo: render [virtual-list] correctly 1`] = `\n\"<h3>10000 items</h3>\n<div class=\\\\\"arco-list-wrapper\\\\\" style=\\\\\"width: 600px;\\\\\">\n  <div class=\\\\\"arco-spin arco-list-spin\\\\\">\n    <div class=\\\\\"arco-scrollbar arco-scrollbar-type-embed\\\\\">\n      <div class=\\\\\"arco-scrollbar-container arco-list arco-list-medium arco-list-bordered arco-list-split\\\\\">\n        <div class=\\\\\"arco-list-content-wrapper\\\\\">\n          <!---->\n          <div class=\\\\\"arco-virtual-list arco-list-content arco-list-virtual\\\\\" style=\\\\\"height: 560px; overflow: auto;\\\\\">\n            <div>\n              <div style=\\\\\"padding-top: 0px; padding-bottom: 299100px;\\\\\">\n                <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-list-item\\\\\">\n                  <div class=\\\\\"arco-list-item-main\\\\\">\n                    <!---->\n                    <div class=\\\\\"arco-list-item-content\\\\\">\n                      <div class=\\\\\"arco-list-item-meta\\\\\">\n                        <div class=\\\\\"arco-list-item-meta-avatar\\\\\">\n                          <div class=\\\\\"arco-avatar arco-avatar-square\\\\\"><span class=\\\\\"arco-avatar-text\\\\\"> A </span>\n                            <!--v-if-->\n                          </div>\n                        </div>\n                        <div class=\\\\\"arco-list-item-meta-content\\\\\">\n                          <div class=\\\\\"arco-list-item-meta-title\\\\\">Beijing Bytedance Technology Co., Ltd.</div>\n                          <div class=\\\\\"arco-list-item-meta-description\\\\\">(00000) Beijing ByteDance Technology Co., Ltd. is an enterprise located in China.</div>\n                        </div>\n                      </div>\n                    </div>\n                    <!---->\n                  </div>\n                  <!---->\n                  <!---->\n                </div>\n                <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-list-item\\\\\">\n                  <div class=\\\\\"arco-list-item-main\\\\\">\n                    <!---->\n                    <div class=\\\\\"arco-list-item-content\\\\\">\n                      <div class=\\\\\"arco-list-item-meta\\\\\">\n                        <div class=\\\\\"arco-list-item-meta-avatar\\\\\">\n                          <div class=\\\\\"arco-avatar arco-avatar-square\\\\\"><span class=\\\\\"arco-avatar-text\\\\\"> A </span>\n                            <!--v-if-->\n                          </div>\n                        </div>\n                        <div class=\\\\\"arco-list-item-meta-content\\\\\">\n                          <div class=\\\\\"arco-list-item-meta-title\\\\\">Beijing Bytedance Technology Co., Ltd.</div>\n                          <div class=\\\\\"arco-list-item-meta-description\\\\\">(00001) Beijing ByteDance Technology Co., Ltd. is an enterprise located in China.</div>\n                        </div>\n                      </div>\n                    </div>\n                    <!---->\n                  </div>\n                  <!---->\n                  <!---->\n                </div>\n                <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-list-item\\\\\">\n                  <div class=\\\\\"arco-list-item-main\\\\\">\n                    <!---->\n                    <div class=\\\\\"arco-list-item-content\\\\\">\n                      <div class=\\\\\"arco-list-item-meta\\\\\">\n                        <div class=\\\\\"arco-list-item-meta-avatar\\\\\">\n                          <div class=\\\\\"arco-avatar arco-avatar-square\\\\\"><span class=\\\\\"arco-avatar-text\\\\\"> A </span>\n                            <!--v-if-->\n                          </div>\n                        </div>\n                        <div class=\\\\\"arco-list-item-meta-content\\\\\">\n                          <div class=\\\\\"arco-list-item-meta-title\\\\\">Beijing Bytedance Technology Co., Ltd.</div>\n                          <div class=\\\\\"arco-list-item-meta-description\\\\\">(00002) Beijing ByteDance Technology Co., Ltd. is an enterprise located in China.</div>\n                        </div>\n                      </div>\n                    </div>\n                    <!---->\n                  </div>\n                  <!---->\n                  <!---->\n                </div>\n                <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-list-item\\\\\">\n                  <div class=\\\\\"arco-list-item-main\\\\\">\n                    <!---->\n                    <div class=\\\\\"arco-list-item-content\\\\\">\n                      <div class=\\\\\"arco-list-item-meta\\\\\">\n                        <div class=\\\\\"arco-list-item-meta-avatar\\\\\">\n                          <div class=\\\\\"arco-avatar arco-avatar-square\\\\\"><span class=\\\\\"arco-avatar-text\\\\\"> A </span>\n                            <!--v-if-->\n                          </div>\n                        </div>\n                        <div class=\\\\\"arco-list-item-meta-content\\\\\">\n                          <div class=\\\\\"arco-list-item-meta-title\\\\\">Beijing Bytedance Technology Co., Ltd.</div>\n                          <div class=\\\\\"arco-list-item-meta-description\\\\\">(00003) Beijing ByteDance Technology Co., Ltd. is an enterprise located in China.</div>\n                        </div>\n                      </div>\n                    </div>\n                    <!---->\n                  </div>\n                  <!---->\n                  <!---->\n                </div>\n                <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-list-item\\\\\">\n                  <div class=\\\\\"arco-list-item-main\\\\\">\n                    <!---->\n                    <div class=\\\\\"arco-list-item-content\\\\\">\n                      <div class=\\\\\"arco-list-item-meta\\\\\">\n                        <div class=\\\\\"arco-list-item-meta-avatar\\\\\">\n                          <div class=\\\\\"arco-avatar arco-avatar-square\\\\\"><span class=\\\\\"arco-avatar-text\\\\\"> A </span>\n                            <!--v-if-->\n                          </div>\n                        </div>\n                        <div class=\\\\\"arco-list-item-meta-content\\\\\">\n                          <div class=\\\\\"arco-list-item-meta-title\\\\\">Beijing Bytedance Technology Co., Ltd.</div>\n                          <div class=\\\\\"arco-list-item-meta-description\\\\\">(00004) Beijing ByteDance Technology Co., Ltd. is an enterprise located in China.</div>\n                        </div>\n                      </div>\n                    </div>\n                    <!---->\n                  </div>\n                  <!---->\n                  <!---->\n                </div>\n                <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-list-item\\\\\">\n                  <div class=\\\\\"arco-list-item-main\\\\\">\n                    <!---->\n                    <div class=\\\\\"arco-list-item-content\\\\\">\n                      <div class=\\\\\"arco-list-item-meta\\\\\">\n                        <div class=\\\\\"arco-list-item-meta-avatar\\\\\">\n                          <div class=\\\\\"arco-avatar arco-avatar-square\\\\\"><span class=\\\\\"arco-avatar-text\\\\\"> A </span>\n                            <!--v-if-->\n                          </div>\n                        </div>\n                        <div class=\\\\\"arco-list-item-meta-content\\\\\">\n                          <div class=\\\\\"arco-list-item-meta-title\\\\\">Beijing Bytedance Technology Co., Ltd.</div>\n                          <div class=\\\\\"arco-list-item-meta-description\\\\\">(00005) Beijing ByteDance Technology Co., Ltd. is an enterprise located in China.</div>\n                        </div>\n                      </div>\n                    </div>\n                    <!---->\n                  </div>\n                  <!---->\n                  <!---->\n                </div>\n                <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-list-item\\\\\">\n                  <div class=\\\\\"arco-list-item-main\\\\\">\n                    <!---->\n                    <div class=\\\\\"arco-list-item-content\\\\\">\n                      <div class=\\\\\"arco-list-item-meta\\\\\">\n                        <div class=\\\\\"arco-list-item-meta-avatar\\\\\">\n                          <div class=\\\\\"arco-avatar arco-avatar-square\\\\\"><span class=\\\\\"arco-avatar-text\\\\\"> A </span>\n                            <!--v-if-->\n                          </div>\n                        </div>\n                        <div class=\\\\\"arco-list-item-meta-content\\\\\">\n                          <div class=\\\\\"arco-list-item-meta-title\\\\\">Beijing Bytedance Technology Co., Ltd.</div>\n                          <div class=\\\\\"arco-list-item-meta-description\\\\\">(00006) Beijing ByteDance Technology Co., Ltd. is an enterprise located in China.</div>\n                        </div>\n                      </div>\n                    </div>\n                    <!---->\n                  </div>\n                  <!---->\n                  <!---->\n                </div>\n                <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-list-item\\\\\">\n                  <div class=\\\\\"arco-list-item-main\\\\\">\n                    <!---->\n                    <div class=\\\\\"arco-list-item-content\\\\\">\n                      <div class=\\\\\"arco-list-item-meta\\\\\">\n                        <div class=\\\\\"arco-list-item-meta-avatar\\\\\">\n                          <div class=\\\\\"arco-avatar arco-avatar-square\\\\\"><span class=\\\\\"arco-avatar-text\\\\\"> A </span>\n                            <!--v-if-->\n                          </div>\n                        </div>\n                        <div class=\\\\\"arco-list-item-meta-content\\\\\">\n                          <div class=\\\\\"arco-list-item-meta-title\\\\\">Beijing Bytedance Technology Co., Ltd.</div>\n                          <div class=\\\\\"arco-list-item-meta-description\\\\\">(00007) Beijing ByteDance Technology Co., Ltd. is an enterprise located in China.</div>\n                        </div>\n                      </div>\n                    </div>\n                    <!---->\n                  </div>\n                  <!---->\n                  <!---->\n                </div>\n                <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-list-item\\\\\">\n                  <div class=\\\\\"arco-list-item-main\\\\\">\n                    <!---->\n                    <div class=\\\\\"arco-list-item-content\\\\\">\n                      <div class=\\\\\"arco-list-item-meta\\\\\">\n                        <div class=\\\\\"arco-list-item-meta-avatar\\\\\">\n                          <div class=\\\\\"arco-avatar arco-avatar-square\\\\\"><span class=\\\\\"arco-avatar-text\\\\\"> A </span>\n                            <!--v-if-->\n                          </div>\n                        </div>\n                        <div class=\\\\\"arco-list-item-meta-content\\\\\">\n                          <div class=\\\\\"arco-list-item-meta-title\\\\\">Beijing Bytedance Technology Co., Ltd.</div>\n                          <div class=\\\\\"arco-list-item-meta-description\\\\\">(00008) Beijing ByteDance Technology Co., Ltd. is an enterprise located in China.</div>\n                        </div>\n                      </div>\n                    </div>\n                    <!---->\n                  </div>\n                  <!---->\n                  <!---->\n                </div>\n                <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-list-item\\\\\">\n                  <div class=\\\\\"arco-list-item-main\\\\\">\n                    <!---->\n                    <div class=\\\\\"arco-list-item-content\\\\\">\n                      <div class=\\\\\"arco-list-item-meta\\\\\">\n                        <div class=\\\\\"arco-list-item-meta-avatar\\\\\">\n                          <div class=\\\\\"arco-avatar arco-avatar-square\\\\\"><span class=\\\\\"arco-avatar-text\\\\\"> A </span>\n                            <!--v-if-->\n                          </div>\n                        </div>\n                        <div class=\\\\\"arco-list-item-meta-content\\\\\">\n                          <div class=\\\\\"arco-list-item-meta-title\\\\\">Beijing Bytedance Technology Co., Ltd.</div>\n                          <div class=\\\\\"arco-list-item-meta-description\\\\\">(00009) Beijing ByteDance Technology Co., Ltd. is an enterprise located in China.</div>\n                        </div>\n                      </div>\n                    </div>\n                    <!---->\n                  </div>\n                  <!---->\n                  <!---->\n                </div>\n                <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-list-item\\\\\">\n                  <div class=\\\\\"arco-list-item-main\\\\\">\n                    <!---->\n                    <div class=\\\\\"arco-list-item-content\\\\\">\n                      <div class=\\\\\"arco-list-item-meta\\\\\">\n                        <div class=\\\\\"arco-list-item-meta-avatar\\\\\">\n                          <div class=\\\\\"arco-avatar arco-avatar-square\\\\\"><span class=\\\\\"arco-avatar-text\\\\\"> A </span>\n                            <!--v-if-->\n                          </div>\n                        </div>\n                        <div class=\\\\\"arco-list-item-meta-content\\\\\">\n                          <div class=\\\\\"arco-list-item-meta-title\\\\\">Beijing Bytedance Technology Co., Ltd.</div>\n                          <div class=\\\\\"arco-list-item-meta-description\\\\\">(00010) Beijing ByteDance Technology Co., Ltd. is an enterprise located in China.</div>\n                        </div>\n                      </div>\n                    </div>\n                    <!---->\n                  </div>\n                  <!---->\n                  <!---->\n                </div>\n                <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-list-item\\\\\">\n                  <div class=\\\\\"arco-list-item-main\\\\\">\n                    <!---->\n                    <div class=\\\\\"arco-list-item-content\\\\\">\n                      <div class=\\\\\"arco-list-item-meta\\\\\">\n                        <div class=\\\\\"arco-list-item-meta-avatar\\\\\">\n                          <div class=\\\\\"arco-avatar arco-avatar-square\\\\\"><span class=\\\\\"arco-avatar-text\\\\\"> A </span>\n                            <!--v-if-->\n                          </div>\n                        </div>\n                        <div class=\\\\\"arco-list-item-meta-content\\\\\">\n                          <div class=\\\\\"arco-list-item-meta-title\\\\\">Beijing Bytedance Technology Co., Ltd.</div>\n                          <div class=\\\\\"arco-list-item-meta-description\\\\\">(00011) Beijing ByteDance Technology Co., Ltd. is an enterprise located in China.</div>\n                        </div>\n                      </div>\n                    </div>\n                    <!---->\n                  </div>\n                  <!---->\n                  <!---->\n                </div>\n                <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-list-item\\\\\">\n                  <div class=\\\\\"arco-list-item-main\\\\\">\n                    <!---->\n                    <div class=\\\\\"arco-list-item-content\\\\\">\n                      <div class=\\\\\"arco-list-item-meta\\\\\">\n                        <div class=\\\\\"arco-list-item-meta-avatar\\\\\">\n                          <div class=\\\\\"arco-avatar arco-avatar-square\\\\\"><span class=\\\\\"arco-avatar-text\\\\\"> A </span>\n                            <!--v-if-->\n                          </div>\n                        </div>\n                        <div class=\\\\\"arco-list-item-meta-content\\\\\">\n                          <div class=\\\\\"arco-list-item-meta-title\\\\\">Beijing Bytedance Technology Co., Ltd.</div>\n                          <div class=\\\\\"arco-list-item-meta-description\\\\\">(00012) Beijing ByteDance Technology Co., Ltd. is an enterprise located in China.</div>\n                        </div>\n                      </div>\n                    </div>\n                    <!---->\n                  </div>\n                  <!---->\n                  <!---->\n                </div>\n                <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-list-item\\\\\">\n                  <div class=\\\\\"arco-list-item-main\\\\\">\n                    <!---->\n                    <div class=\\\\\"arco-list-item-content\\\\\">\n                      <div class=\\\\\"arco-list-item-meta\\\\\">\n                        <div class=\\\\\"arco-list-item-meta-avatar\\\\\">\n                          <div class=\\\\\"arco-avatar arco-avatar-square\\\\\"><span class=\\\\\"arco-avatar-text\\\\\"> A </span>\n                            <!--v-if-->\n                          </div>\n                        </div>\n                        <div class=\\\\\"arco-list-item-meta-content\\\\\">\n                          <div class=\\\\\"arco-list-item-meta-title\\\\\">Beijing Bytedance Technology Co., Ltd.</div>\n                          <div class=\\\\\"arco-list-item-meta-description\\\\\">(00013) Beijing ByteDance Technology Co., Ltd. is an enterprise located in China.</div>\n                        </div>\n                      </div>\n                    </div>\n                    <!---->\n                  </div>\n                  <!---->\n                  <!---->\n                </div>\n                <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-list-item\\\\\">\n                  <div class=\\\\\"arco-list-item-main\\\\\">\n                    <!---->\n                    <div class=\\\\\"arco-list-item-content\\\\\">\n                      <div class=\\\\\"arco-list-item-meta\\\\\">\n                        <div class=\\\\\"arco-list-item-meta-avatar\\\\\">\n                          <div class=\\\\\"arco-avatar arco-avatar-square\\\\\"><span class=\\\\\"arco-avatar-text\\\\\"> A </span>\n                            <!--v-if-->\n                          </div>\n                        </div>\n                        <div class=\\\\\"arco-list-item-meta-content\\\\\">\n                          <div class=\\\\\"arco-list-item-meta-title\\\\\">Beijing Bytedance Technology Co., Ltd.</div>\n                          <div class=\\\\\"arco-list-item-meta-description\\\\\">(00014) Beijing ByteDance Technology Co., Ltd. is an enterprise located in China.</div>\n                        </div>\n                      </div>\n                    </div>\n                    <!---->\n                  </div>\n                  <!---->\n                  <!---->\n                </div>\n                <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-list-item\\\\\">\n                  <div class=\\\\\"arco-list-item-main\\\\\">\n                    <!---->\n                    <div class=\\\\\"arco-list-item-content\\\\\">\n                      <div class=\\\\\"arco-list-item-meta\\\\\">\n                        <div class=\\\\\"arco-list-item-meta-avatar\\\\\">\n                          <div class=\\\\\"arco-avatar arco-avatar-square\\\\\"><span class=\\\\\"arco-avatar-text\\\\\"> A </span>\n                            <!--v-if-->\n                          </div>\n                        </div>\n                        <div class=\\\\\"arco-list-item-meta-content\\\\\">\n                          <div class=\\\\\"arco-list-item-meta-title\\\\\">Beijing Bytedance Technology Co., Ltd.</div>\n                          <div class=\\\\\"arco-list-item-meta-description\\\\\">(00015) Beijing ByteDance Technology Co., Ltd. is an enterprise located in China.</div>\n                        </div>\n                      </div>\n                    </div>\n                    <!---->\n                  </div>\n                  <!---->\n                  <!---->\n                </div>\n                <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-list-item\\\\\">\n                  <div class=\\\\\"arco-list-item-main\\\\\">\n                    <!---->\n                    <div class=\\\\\"arco-list-item-content\\\\\">\n                      <div class=\\\\\"arco-list-item-meta\\\\\">\n                        <div class=\\\\\"arco-list-item-meta-avatar\\\\\">\n                          <div class=\\\\\"arco-avatar arco-avatar-square\\\\\"><span class=\\\\\"arco-avatar-text\\\\\"> A </span>\n                            <!--v-if-->\n                          </div>\n                        </div>\n                        <div class=\\\\\"arco-list-item-meta-content\\\\\">\n                          <div class=\\\\\"arco-list-item-meta-title\\\\\">Beijing Bytedance Technology Co., Ltd.</div>\n                          <div class=\\\\\"arco-list-item-meta-description\\\\\">(00016) Beijing ByteDance Technology Co., Ltd. is an enterprise located in China.</div>\n                        </div>\n                      </div>\n                    </div>\n                    <!---->\n                  </div>\n                  <!---->\n                  <!---->\n                </div>\n                <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-list-item\\\\\">\n                  <div class=\\\\\"arco-list-item-main\\\\\">\n                    <!---->\n                    <div class=\\\\\"arco-list-item-content\\\\\">\n                      <div class=\\\\\"arco-list-item-meta\\\\\">\n                        <div class=\\\\\"arco-list-item-meta-avatar\\\\\">\n                          <div class=\\\\\"arco-avatar arco-avatar-square\\\\\"><span class=\\\\\"arco-avatar-text\\\\\"> A </span>\n                            <!--v-if-->\n                          </div>\n                        </div>\n                        <div class=\\\\\"arco-list-item-meta-content\\\\\">\n                          <div class=\\\\\"arco-list-item-meta-title\\\\\">Beijing Bytedance Technology Co., Ltd.</div>\n                          <div class=\\\\\"arco-list-item-meta-description\\\\\">(00017) Beijing ByteDance Technology Co., Ltd. is an enterprise located in China.</div>\n                        </div>\n                      </div>\n                    </div>\n                    <!---->\n                  </div>\n                  <!---->\n                  <!---->\n                </div>\n                <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-list-item\\\\\">\n                  <div class=\\\\\"arco-list-item-main\\\\\">\n                    <!---->\n                    <div class=\\\\\"arco-list-item-content\\\\\">\n                      <div class=\\\\\"arco-list-item-meta\\\\\">\n                        <div class=\\\\\"arco-list-item-meta-avatar\\\\\">\n                          <div class=\\\\\"arco-avatar arco-avatar-square\\\\\"><span class=\\\\\"arco-avatar-text\\\\\"> A </span>\n                            <!--v-if-->\n                          </div>\n                        </div>\n                        <div class=\\\\\"arco-list-item-meta-content\\\\\">\n                          <div class=\\\\\"arco-list-item-meta-title\\\\\">Beijing Bytedance Technology Co., Ltd.</div>\n                          <div class=\\\\\"arco-list-item-meta-description\\\\\">(00018) Beijing ByteDance Technology Co., Ltd. is an enterprise located in China.</div>\n                        </div>\n                      </div>\n                    </div>\n                    <!---->\n                  </div>\n                  <!---->\n                  <!---->\n                </div>\n                <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-list-item\\\\\">\n                  <div class=\\\\\"arco-list-item-main\\\\\">\n                    <!---->\n                    <div class=\\\\\"arco-list-item-content\\\\\">\n                      <div class=\\\\\"arco-list-item-meta\\\\\">\n                        <div class=\\\\\"arco-list-item-meta-avatar\\\\\">\n                          <div class=\\\\\"arco-avatar arco-avatar-square\\\\\"><span class=\\\\\"arco-avatar-text\\\\\"> A </span>\n                            <!--v-if-->\n                          </div>\n                        </div>\n                        <div class=\\\\\"arco-list-item-meta-content\\\\\">\n                          <div class=\\\\\"arco-list-item-meta-title\\\\\">Beijing Bytedance Technology Co., Ltd.</div>\n                          <div class=\\\\\"arco-list-item-meta-description\\\\\">(00019) Beijing ByteDance Technology Co., Ltd. is an enterprise located in China.</div>\n                        </div>\n                      </div>\n                    </div>\n                    <!---->\n                  </div>\n                  <!---->\n                  <!---->\n                </div>\n                <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-list-item\\\\\">\n                  <div class=\\\\\"arco-list-item-main\\\\\">\n                    <!---->\n                    <div class=\\\\\"arco-list-item-content\\\\\">\n                      <div class=\\\\\"arco-list-item-meta\\\\\">\n                        <div class=\\\\\"arco-list-item-meta-avatar\\\\\">\n                          <div class=\\\\\"arco-avatar arco-avatar-square\\\\\"><span class=\\\\\"arco-avatar-text\\\\\"> A </span>\n                            <!--v-if-->\n                          </div>\n                        </div>\n                        <div class=\\\\\"arco-list-item-meta-content\\\\\">\n                          <div class=\\\\\"arco-list-item-meta-title\\\\\">Beijing Bytedance Technology Co., Ltd.</div>\n                          <div class=\\\\\"arco-list-item-meta-description\\\\\">(00020) Beijing ByteDance Technology Co., Ltd. is an enterprise located in China.</div>\n                        </div>\n                      </div>\n                    </div>\n                    <!---->\n                  </div>\n                  <!---->\n                  <!---->\n                </div>\n                <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-list-item\\\\\">\n                  <div class=\\\\\"arco-list-item-main\\\\\">\n                    <!---->\n                    <div class=\\\\\"arco-list-item-content\\\\\">\n                      <div class=\\\\\"arco-list-item-meta\\\\\">\n                        <div class=\\\\\"arco-list-item-meta-avatar\\\\\">\n                          <div class=\\\\\"arco-avatar arco-avatar-square\\\\\"><span class=\\\\\"arco-avatar-text\\\\\"> A </span>\n                            <!--v-if-->\n                          </div>\n                        </div>\n                        <div class=\\\\\"arco-list-item-meta-content\\\\\">\n                          <div class=\\\\\"arco-list-item-meta-title\\\\\">Beijing Bytedance Technology Co., Ltd.</div>\n                          <div class=\\\\\"arco-list-item-meta-description\\\\\">(00021) Beijing ByteDance Technology Co., Ltd. is an enterprise located in China.</div>\n                        </div>\n                      </div>\n                    </div>\n                    <!---->\n                  </div>\n                  <!---->\n                  <!---->\n                </div>\n                <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-list-item\\\\\">\n                  <div class=\\\\\"arco-list-item-main\\\\\">\n                    <!---->\n                    <div class=\\\\\"arco-list-item-content\\\\\">\n                      <div class=\\\\\"arco-list-item-meta\\\\\">\n                        <div class=\\\\\"arco-list-item-meta-avatar\\\\\">\n                          <div class=\\\\\"arco-avatar arco-avatar-square\\\\\"><span class=\\\\\"arco-avatar-text\\\\\"> A </span>\n                            <!--v-if-->\n                          </div>\n                        </div>\n                        <div class=\\\\\"arco-list-item-meta-content\\\\\">\n                          <div class=\\\\\"arco-list-item-meta-title\\\\\">Beijing Bytedance Technology Co., Ltd.</div>\n                          <div class=\\\\\"arco-list-item-meta-description\\\\\">(00022) Beijing ByteDance Technology Co., Ltd. is an enterprise located in China.</div>\n                        </div>\n                      </div>\n                    </div>\n                    <!---->\n                  </div>\n                  <!---->\n                  <!---->\n                </div>\n                <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-list-item\\\\\">\n                  <div class=\\\\\"arco-list-item-main\\\\\">\n                    <!---->\n                    <div class=\\\\\"arco-list-item-content\\\\\">\n                      <div class=\\\\\"arco-list-item-meta\\\\\">\n                        <div class=\\\\\"arco-list-item-meta-avatar\\\\\">\n                          <div class=\\\\\"arco-avatar arco-avatar-square\\\\\"><span class=\\\\\"arco-avatar-text\\\\\"> A </span>\n                            <!--v-if-->\n                          </div>\n                        </div>\n                        <div class=\\\\\"arco-list-item-meta-content\\\\\">\n                          <div class=\\\\\"arco-list-item-meta-title\\\\\">Beijing Bytedance Technology Co., Ltd.</div>\n                          <div class=\\\\\"arco-list-item-meta-description\\\\\">(00023) Beijing ByteDance Technology Co., Ltd. is an enterprise located in China.</div>\n                        </div>\n                      </div>\n                    </div>\n                    <!---->\n                  </div>\n                  <!---->\n                  <!---->\n                </div>\n                <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-list-item\\\\\">\n                  <div class=\\\\\"arco-list-item-main\\\\\">\n                    <!---->\n                    <div class=\\\\\"arco-list-item-content\\\\\">\n                      <div class=\\\\\"arco-list-item-meta\\\\\">\n                        <div class=\\\\\"arco-list-item-meta-avatar\\\\\">\n                          <div class=\\\\\"arco-avatar arco-avatar-square\\\\\"><span class=\\\\\"arco-avatar-text\\\\\"> A </span>\n                            <!--v-if-->\n                          </div>\n                        </div>\n                        <div class=\\\\\"arco-list-item-meta-content\\\\\">\n                          <div class=\\\\\"arco-list-item-meta-title\\\\\">Beijing Bytedance Technology Co., Ltd.</div>\n                          <div class=\\\\\"arco-list-item-meta-description\\\\\">(00024) Beijing ByteDance Technology Co., Ltd. is an enterprise located in China.</div>\n                        </div>\n                      </div>\n                    </div>\n                    <!---->\n                  </div>\n                  <!---->\n                  <!---->\n                </div>\n                <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-list-item\\\\\">\n                  <div class=\\\\\"arco-list-item-main\\\\\">\n                    <!---->\n                    <div class=\\\\\"arco-list-item-content\\\\\">\n                      <div class=\\\\\"arco-list-item-meta\\\\\">\n                        <div class=\\\\\"arco-list-item-meta-avatar\\\\\">\n                          <div class=\\\\\"arco-avatar arco-avatar-square\\\\\"><span class=\\\\\"arco-avatar-text\\\\\"> A </span>\n                            <!--v-if-->\n                          </div>\n                        </div>\n                        <div class=\\\\\"arco-list-item-meta-content\\\\\">\n                          <div class=\\\\\"arco-list-item-meta-title\\\\\">Beijing Bytedance Technology Co., Ltd.</div>\n                          <div class=\\\\\"arco-list-item-meta-description\\\\\">(00025) Beijing ByteDance Technology Co., Ltd. is an enterprise located in China.</div>\n                        </div>\n                      </div>\n                    </div>\n                    <!---->\n                  </div>\n                  <!---->\n                  <!---->\n                </div>\n                <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-list-item\\\\\">\n                  <div class=\\\\\"arco-list-item-main\\\\\">\n                    <!---->\n                    <div class=\\\\\"arco-list-item-content\\\\\">\n                      <div class=\\\\\"arco-list-item-meta\\\\\">\n                        <div class=\\\\\"arco-list-item-meta-avatar\\\\\">\n                          <div class=\\\\\"arco-avatar arco-avatar-square\\\\\"><span class=\\\\\"arco-avatar-text\\\\\"> A </span>\n                            <!--v-if-->\n                          </div>\n                        </div>\n                        <div class=\\\\\"arco-list-item-meta-content\\\\\">\n                          <div class=\\\\\"arco-list-item-meta-title\\\\\">Beijing Bytedance Technology Co., Ltd.</div>\n                          <div class=\\\\\"arco-list-item-meta-description\\\\\">(00026) Beijing ByteDance Technology Co., Ltd. is an enterprise located in China.</div>\n                        </div>\n                      </div>\n                    </div>\n                    <!---->\n                  </div>\n                  <!---->\n                  <!---->\n                </div>\n                <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-list-item\\\\\">\n                  <div class=\\\\\"arco-list-item-main\\\\\">\n                    <!---->\n                    <div class=\\\\\"arco-list-item-content\\\\\">\n                      <div class=\\\\\"arco-list-item-meta\\\\\">\n                        <div class=\\\\\"arco-list-item-meta-avatar\\\\\">\n                          <div class=\\\\\"arco-avatar arco-avatar-square\\\\\"><span class=\\\\\"arco-avatar-text\\\\\"> A </span>\n                            <!--v-if-->\n                          </div>\n                        </div>\n                        <div class=\\\\\"arco-list-item-meta-content\\\\\">\n                          <div class=\\\\\"arco-list-item-meta-title\\\\\">Beijing Bytedance Technology Co., Ltd.</div>\n                          <div class=\\\\\"arco-list-item-meta-description\\\\\">(00027) Beijing ByteDance Technology Co., Ltd. is an enterprise located in China.</div>\n                        </div>\n                      </div>\n                    </div>\n                    <!---->\n                  </div>\n                  <!---->\n                  <!---->\n                </div>\n                <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-list-item\\\\\">\n                  <div class=\\\\\"arco-list-item-main\\\\\">\n                    <!---->\n                    <div class=\\\\\"arco-list-item-content\\\\\">\n                      <div class=\\\\\"arco-list-item-meta\\\\\">\n                        <div class=\\\\\"arco-list-item-meta-avatar\\\\\">\n                          <div class=\\\\\"arco-avatar arco-avatar-square\\\\\"><span class=\\\\\"arco-avatar-text\\\\\"> A </span>\n                            <!--v-if-->\n                          </div>\n                        </div>\n                        <div class=\\\\\"arco-list-item-meta-content\\\\\">\n                          <div class=\\\\\"arco-list-item-meta-title\\\\\">Beijing Bytedance Technology Co., Ltd.</div>\n                          <div class=\\\\\"arco-list-item-meta-description\\\\\">(00028) Beijing ByteDance Technology Co., Ltd. is an enterprise located in China.</div>\n                        </div>\n                      </div>\n                    </div>\n                    <!---->\n                  </div>\n                  <!---->\n                  <!---->\n                </div>\n                <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-list-item\\\\\">\n                  <div class=\\\\\"arco-list-item-main\\\\\">\n                    <!---->\n                    <div class=\\\\\"arco-list-item-content\\\\\">\n                      <div class=\\\\\"arco-list-item-meta\\\\\">\n                        <div class=\\\\\"arco-list-item-meta-avatar\\\\\">\n                          <div class=\\\\\"arco-avatar arco-avatar-square\\\\\"><span class=\\\\\"arco-avatar-text\\\\\"> A </span>\n                            <!--v-if-->\n                          </div>\n                        </div>\n                        <div class=\\\\\"arco-list-item-meta-content\\\\\">\n                          <div class=\\\\\"arco-list-item-meta-title\\\\\">Beijing Bytedance Technology Co., Ltd.</div>\n                          <div class=\\\\\"arco-list-item-meta-description\\\\\">(00029) Beijing ByteDance Technology Co., Ltd. is an enterprise located in China.</div>\n                        </div>\n                      </div>\n                    </div>\n                    <!---->\n                  </div>\n                  <!---->\n                  <!---->\n                </div>\n              </div>\n            </div>\n          </div>\n          <!---->\n          <!---->\n        </div>\n      </div>\n      <!--v-if-->\n      <!--v-if-->\n    </div>\n    <!---->\n    <!---->\n  </div>\n</div>\"\n`;\n"
  },
  {
    "path": "packages/web-vue/components/list/__test__/demo.test.ts",
    "content": "import demoTest from '../../../scripts/demo-test';\n\ndemoTest('list');\n"
  },
  {
    "path": "packages/web-vue/components/list/__test__/index.test.ts",
    "content": "import { mount } from '@vue/test-utils';\nimport List from '../index';\n\ndescribe('List', () => {\n  test('should render empty component', () => {\n    const wrapper = mount(List, {\n      props: {\n        data: [],\n      },\n    });\n    const empty = wrapper.find('.arco-empty').exists();\n    expect(empty).toBe(true);\n  });\n});\n"
  },
  {
    "path": "packages/web-vue/components/list/index.ts",
    "content": "import type { App } from 'vue';\nimport type { ArcoOptions } from '../_utils/types';\nimport { setGlobalConfig, getComponentPrefix } from '../_utils/global-config';\nimport _List from './list';\nimport _ListItem from './list-item';\nimport _ListItemMeta from './list-item-meta.vue';\n\nconst List = Object.assign(_List, {\n  Item: Object.assign(_ListItem, {\n    Meta: _ListItemMeta,\n  }),\n  install: (app: App, options?: ArcoOptions) => {\n    setGlobalConfig(app, options);\n    const componentPrefix = getComponentPrefix(options);\n\n    app.component(componentPrefix + _List.name, _List);\n    app.component(componentPrefix + _ListItem.name, _ListItem);\n    app.component(componentPrefix + _ListItemMeta.name, _ListItemMeta);\n  },\n});\n\nexport type ListInstance = InstanceType<typeof _List>;\nexport type ListItemInstance = InstanceType<typeof _ListItem>;\nexport type ListItemMetaInstance = InstanceType<typeof _ListItemMeta>;\n\nexport { _ListItem as ListItem, _ListItemMeta as ListItemMeta };\n\nexport default List;\n"
  },
  {
    "path": "packages/web-vue/components/list/list-item-meta.vue",
    "content": "<template>\n  <div :class=\"prefixCls\">\n    <div v-if=\"$slots.avatar\" :class=\"`${prefixCls}-avatar`\">\n      <slot name=\"avatar\" />\n    </div>\n    <div v-if=\"hasContent\" :class=\"`${prefixCls}-content`\">\n      <div v-if=\"$slots.title || title\" :class=\"`${prefixCls}-title`\">\n        <slot name=\"title\">{{ title }}</slot>\n      </div>\n      <div\n        v-if=\"$slots.description || description\"\n        :class=\"`${prefixCls}-description`\"\n      >\n        <slot name=\"description\">{{ description }}</slot>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue';\nimport { getPrefixCls } from '../_utils/global-config';\n\nexport default defineComponent({\n  name: 'ListItemMeta',\n  props: {\n    /**\n     * @zh 标题\n     * @en Title\n     */\n    title: String,\n    /**\n     * @zh 描述内容\n     * @en Description\n     */\n    description: String,\n  },\n  /**\n   * @zh 标题\n   * @en Title\n   * @slot title\n   */\n  /**\n   * @zh 描述内容\n   * @en Description\n   * @slot description\n   */\n  /**\n   * @zh 头像\n   * @en Avatar\n   * @slot avatar\n   */\n  setup(props, { slots }) {\n    const prefixCls = getPrefixCls('list-item-meta');\n    const hasContent = Boolean(\n      props.title || props.description || slots.title || slots.description\n    );\n\n    return {\n      prefixCls,\n      hasContent,\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/list/list-item.tsx",
    "content": "import { defineComponent, PropType } from 'vue';\nimport { getPrefixCls } from '../_utils/global-config';\nimport type { Direction } from '../_utils/constant';\n\nexport default defineComponent({\n  name: 'ListItem',\n  props: {\n    /**\n     * @zh 操作组排列方向\n     * @en Operation group arrangement direction\n     */\n    actionLayout: {\n      type: String as PropType<Direction>,\n      default: 'horizontal',\n    },\n  },\n  /**\n   * @zh 操作组\n   * @en Actions\n   * @slot actions\n   */\n  /**\n   * @zh 额外内容\n   * @en Extra content\n   * @slot extra\n   */\n  /**\n   * @zh meta信息\n   * @en Meta data\n   * @slot meta\n   */\n  setup(props, { slots }) {\n    const prefixCls = getPrefixCls('list-item');\n\n    const renderAction = () => {\n      const actions = slots.actions?.();\n      if (!actions || !actions.length) {\n        return null;\n      }\n\n      return (\n        <ul class={`${prefixCls}-action`}>\n          {actions.map((item, index) => (\n            <li key={`${prefixCls}-action-${index}`}>{item}</li>\n          ))}\n        </ul>\n      );\n    };\n\n    return () => (\n      <div role=\"listitem\" class={prefixCls}>\n        <div class={`${prefixCls}-main`}>\n          {slots.meta?.()}\n          <div class={`${prefixCls}-content`}>{slots.default?.()}</div>\n          {props.actionLayout === 'vertical' && renderAction()}\n        </div>\n        {props.actionLayout === 'horizontal' && renderAction()}\n        {slots.extra && <div class={`${prefixCls}-extra`}>{slots.extra()}</div>}\n      </div>\n    );\n  },\n});\n"
  },
  {
    "path": "packages/web-vue/components/list/list.tsx",
    "content": "import {\n  computed,\n  defineComponent,\n  inject,\n  isVNode,\n  onMounted,\n  PropType,\n  ref,\n  toRefs,\n} from 'vue';\nimport { getPrefixCls } from '../_utils/global-config';\nimport { configProviderInjectionKey } from '../config-provider/context';\nimport Spin from '../spin';\nimport Grid from '../grid';\nimport Pagination, { PaginationProps } from '../pagination';\nimport Empty from '../empty';\nimport VirtualList from '../_components/virtual-list-v2';\nimport type {\n  ScrollIntoViewOptions,\n  VirtualListProps,\n} from '../_components/virtual-list-v2/interface';\nimport { usePagination } from './use-pagination';\nimport { omit } from '../_utils/omit';\nimport { getAllElements } from '../_utils/vue-utils';\nimport Scrollbar, { ScrollbarProps } from '../scrollbar';\nimport { useComponentRef } from '../_hooks/use-component-ref';\nimport { useScrollbar } from '../_hooks/use-scrollbar';\nimport { isNumber } from '../_utils/is';\n\nexport default defineComponent({\n  name: 'List',\n  props: {\n    /**\n     * @zh 列表数据，需要和 `item` 插槽同时使用\n     * @en List data, need to be used with `item` slot at the same time\n     */\n    data: {\n      type: Array as PropType<any[]>,\n    },\n    /**\n     * @zh 列表大小\n     * @en List size\n     */\n    size: {\n      type: String as PropType<'small' | 'medium' | 'large'>,\n      default: 'medium',\n    },\n    /**\n     * @zh 是否显示边框\n     * @en Whether to show the border\n     */\n    bordered: {\n      type: Boolean,\n      default: true,\n    },\n    /**\n     * @zh 是否显示分割线\n     * @en Whether to show the dividing line\n     */\n    split: {\n      type: Boolean,\n      default: true,\n    },\n    /**\n     * @zh 是否为加载中状态\n     * @en Whether it is loading state\n     */\n    loading: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 是否显示选中样式\n     * @en Whether to display the selected style\n     */\n    hoverable: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 列表分页配置\n     * @en List pagination configuration\n     */\n    paginationProps: {\n      type: Object as PropType<PaginationProps>,\n    },\n    /**\n     * @zh 列表栅格配置\n     * @en List grid configuration\n     */\n    gridProps: {\n      type: Object,\n    },\n    /**\n     * @zh 列表的最大高度\n     * @en Maximum height of the list\n     */\n    maxHeight: {\n      type: [String, Number] as PropType<string | number>,\n      default: 0,\n    },\n    /**\n     * @zh 触发到达底部的距离阈值\n     * @en Trigger the distance threshold to reach the bottom\n     */\n    bottomOffset: {\n      type: Number,\n      default: 0,\n    },\n    /**\n     * @zh 传递虚拟列表属性，传入此参数以开启虚拟滚动 [VirtualListProps](#VirtualListProps)\n     * @en Pass virtual list properties, pass in this parameter to turn on virtual scrolling [VirtualListProps](#VirtualListProps)\n     */\n    virtualListProps: {\n      type: Object as PropType<VirtualListProps>,\n    },\n    /**\n     * @zh 是否开启虚拟滚动条\n     * @en Whether to enable virtual scroll bar\n     * @version 2.38.0\n     */\n    scrollbar: {\n      type: [Object, Boolean] as PropType<boolean | ScrollbarProps>,\n      default: true,\n    },\n  },\n  emits: {\n    /**\n     * @zh 列表滚动时触发\n     * @en Triggered when the list scrolls\n     */\n    scroll: () => true,\n    /**\n     * @zh 当列表到达底部时触发\n     * @en Triggered when the list reaches the bottom\n     */\n    reachBottom: () => true,\n    /**\n     * @zh 表格分页发生改变时触发\n     * @en Triggered when the table pagination changes\n     * @param {number} page\n     */\n    pageChange: (page: number) => true,\n    /**\n     * @zh 表格每页数据数量发生改变时触发\n     * @en Triggered when the number of data per page of the table changes\n     * @param {number} pageSize\n     */\n    pageSizeChange: (pageSize: number) => true,\n  },\n  /**\n   * @zh 头部信息\n   * @en Header\n   * @slot header\n   */\n  /**\n   * @zh 底部信息\n   * @en Footer\n   * @slot footer\n   */\n  /**\n   * @zh 空白展示\n   * @en Empty\n   * @slot empty\n   */\n  /**\n   * @zh 列表项\n   * @en List Item\n   * @slot item\n   * @binding {number} index\n   * @binding {any} item\n   */\n  /**\n   * @zh 滚动加载状态时，滚动到底部的提示\n   * @en When scrolling loading state, scroll to the bottom tip\n   * @slot scroll-loading\n   * @version 2.20.0\n   */\n  setup(props, { emit, slots }) {\n    const { scrollbar } = toRefs(props);\n    const prefixCls = getPrefixCls('list');\n    const configCtx = inject(configProviderInjectionKey, undefined);\n    const { componentRef, elementRef: listRef } =\n      useComponentRef('containerRef');\n    const isVirtualList = computed(() => props.virtualListProps);\n    const { displayScrollbar, scrollbarProps } = useScrollbar(scrollbar);\n    let preScrollTop = 0;\n\n    const handleScroll = (e: Event) => {\n      const { scrollTop, scrollHeight, offsetHeight } = e.target as HTMLElement;\n      const bottom = Math.floor(scrollHeight - (scrollTop + offsetHeight));\n      if (scrollTop > preScrollTop && bottom <= props.bottomOffset) {\n        emit('reachBottom');\n      }\n      emit('scroll');\n      preScrollTop = scrollTop;\n    };\n\n    onMounted(() => {\n      if (listRef.value) {\n        const { scrollTop, scrollHeight, offsetHeight } = listRef.value;\n        if (scrollHeight <= scrollTop + offsetHeight) {\n          emit('reachBottom');\n        }\n      }\n    });\n\n    const { current, pageSize, handlePageChange, handlePageSizeChange } =\n      usePagination(props, { emit });\n\n    const getCurrentPageItems = (data: unknown[]) => {\n      if (!props.paginationProps) {\n        return data;\n      }\n      if (props.paginationProps && data.length > pageSize.value) {\n        const startIndex = (current.value - 1) * pageSize.value;\n        return data.slice(startIndex, startIndex + pageSize.value);\n      }\n      return data;\n    };\n\n    const renderGridItems = (data: unknown[]) => {\n      if (!props.gridProps) {\n        return null;\n      }\n      const currentPageItems = getCurrentPageItems(data);\n\n      if (props.gridProps.span) {\n        const items = [];\n        const rowSize = 24 / props.gridProps.span;\n        for (let i = 0; i < currentPageItems.length; i += rowSize) {\n          const nextIndex = i + rowSize;\n          const rowIndex = Math.floor(i / rowSize);\n          items.push(\n            <Grid.Row\n              key={rowIndex}\n              class={`${prefixCls}-row`}\n              gutter={props.gridProps.gutter}\n            >\n              {currentPageItems.slice(i, nextIndex).map((item, index) => (\n                <Grid.Col\n                  key={`${rowIndex}-${index}`}\n                  class={`${prefixCls}-col`}\n                  span={props.gridProps?.span}\n                >\n                  {isVNode(item) ? item : slots.item?.({ item, index })}\n                </Grid.Col>\n              ))}\n            </Grid.Row>\n          );\n        }\n        return items;\n      }\n\n      return (\n        <Grid.Row class={`${prefixCls}-row`} gutter={props.gridProps.gutter}>\n          {currentPageItems.map((item, index) => (\n            <Grid.Col\n              key={index}\n              class={`${prefixCls}-col`}\n              {...omit(props.gridProps!, ['gutter'])}\n            >\n              {isVNode(item) ? item : slots.item?.({ item, index })}\n            </Grid.Col>\n          ))}\n        </Grid.Row>\n      );\n    };\n\n    const renderListItems = (data: unknown[]) => {\n      const currentPageItems = getCurrentPageItems(data);\n\n      return currentPageItems.map((item, index) =>\n        isVNode(item) ? item : slots.item?.({ item, index })\n      );\n    };\n\n    const renderItems = () => {\n      const data = slots.default ? getAllElements(slots.default()) : props.data;\n\n      if (data && data.length > 0) {\n        return props.gridProps ? renderGridItems(data) : renderListItems(data);\n      }\n\n      return renderEmpty();\n    };\n\n    const renderPagination = () => {\n      if (!props.paginationProps) {\n        return null;\n      }\n\n      const paginationProps = omit(props.paginationProps, [\n        'current',\n        'pageSize',\n        'defaultCurrent',\n        'defaultPageSize',\n      ]);\n\n      return (\n        <Pagination\n          class={`${prefixCls}-pagination`}\n          {...paginationProps}\n          current={current.value}\n          pageSize={pageSize.value}\n          onChange={handlePageChange}\n          onPageSizeChange={handlePageSizeChange}\n        />\n      );\n    };\n\n    const cls = computed(() => [\n      prefixCls,\n      `${prefixCls}-${props.size}`,\n      {\n        [`${prefixCls}-bordered`]: props.bordered,\n        [`${prefixCls}-split`]: props.split,\n        [`${prefixCls}-hover`]: props.hoverable,\n      },\n    ]);\n\n    const contentStyle = computed(() => {\n      if (props.maxHeight) {\n        const maxHeight = isNumber(props.maxHeight)\n          ? `${props.maxHeight}px`\n          : props.maxHeight;\n        return { maxHeight, overflowY: 'auto' };\n      }\n      return undefined;\n    });\n\n    const contentCls = computed(() => [\n      `${prefixCls}-content`,\n      {\n        [`${prefixCls}-virtual`]: isVirtualList.value,\n      },\n    ]);\n\n    const virtualListRef = ref();\n    const renderVirtualList = () => {\n      const currentPageItems = getCurrentPageItems(props.data ?? []);\n\n      return currentPageItems.length ? (\n        <VirtualList\n          ref={virtualListRef}\n          v-slots={{\n            item: ({ item, index }: { item: unknown; index: number }) =>\n              slots.item?.({ item, index }),\n          }}\n          class={contentCls.value}\n          data={currentPageItems}\n          {...props.virtualListProps}\n          onScroll={handleScroll}\n        />\n      ) : (\n        renderEmpty()\n      );\n    };\n\n    const renderScrollLoading = () => {\n      if (slots['scroll-loading']) {\n        return (\n          <div class={[`${prefixCls}-item`, `${prefixCls}-scroll-loading`]}>\n            {slots['scroll-loading']()}\n          </div>\n        );\n      }\n      return null;\n    };\n\n    const renderEmpty = () => {\n      if (slots['scroll-loading']) {\n        return null;\n      }\n\n      return (\n        slots.empty?.() ??\n        configCtx?.slots.empty?.({ component: 'list' }) ?? <Empty />\n      );\n    };\n\n    const render = () => {\n      const Component = displayScrollbar.value ? Scrollbar : 'div';\n\n      return (\n        <div class={`${prefixCls}-wrapper`}>\n          <Spin class={`${prefixCls}-spin`} loading={props.loading}>\n            <Component\n              ref={componentRef}\n              class={cls.value}\n              style={contentStyle.value}\n              {...scrollbarProps.value}\n              onScroll={handleScroll}\n            >\n              <div class={`${prefixCls}-content-wrapper`}>\n                {slots.header && (\n                  <div class={`${prefixCls}-header`}>{slots.header()}</div>\n                )}\n                {isVirtualList.value && !props.gridProps ? (\n                  <>\n                    {renderVirtualList()}\n                    {renderScrollLoading()}\n                  </>\n                ) : (\n                  <div role=\"list\" class={contentCls.value}>\n                    {renderItems()}\n                    {renderScrollLoading()}\n                  </div>\n                )}\n                {slots.footer && (\n                  <div class={`${prefixCls}-footer`}>{slots.footer()}</div>\n                )}\n              </div>\n            </Component>\n            {renderPagination()}\n          </Spin>\n        </div>\n      );\n    };\n\n    return {\n      virtualListRef,\n      render,\n    };\n  },\n  methods: {\n    /**\n     * @zh 虚拟滚动到某个元素\n     * @en Virtual scroll to an element\n     * @param {{ index?: number; key?: number | string; align: 'auto' | 'top' | 'bottom'}} options\n     * @public\n     */\n    scrollIntoView(options: ScrollIntoViewOptions) {\n      if (this.virtualListRef) {\n        this.virtualListRef.scrollTo(options);\n      }\n    },\n  },\n  render() {\n    return this.render();\n  },\n});\n"
  },
  {
    "path": "packages/web-vue/components/list/style/index.less",
    "content": "@import './token.less';\n\n@list-prefix-cls: ~'@{prefix}-list';\n\n.@{list-prefix-cls} {\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  width: 100%;\n  overflow-y: auto;\n  color: @list-color-text;\n  font-size: @list-font-size;\n  line-height: @list-line-height;\n  border-radius: @list-border-radius;\n\n  &-wrapper {\n    overflow: hidden;\n\n    .@{list-prefix-cls}-spin {\n      display: block;\n      height: 100%;\n      overflow: hidden;\n    }\n  }\n\n  &-content {\n    overflow: hidden;\n  }\n\n  .size(@size) {\n    &-@{size} {\n      @ref-padding-vertical-header: ~'list-size-@{size}-padding-vertical-header';\n      @ref-padding-horizontal-header: ~'list-size-@{size}-padding-horizontal-header';\n      @ref-padding-vertical-item: ~'list-size-@{size}-padding-vertical-item';\n      @ref-padding-horizontal-item: ~'list-size-@{size}-padding-horizontal-item';\n\n      .@{list-prefix-cls}-content-wrapper .@{list-prefix-cls}-header {\n        padding: @@ref-padding-vertical-header @@ref-padding-horizontal-header;\n      }\n\n      // 在存在列表嵌套的时候，通过 > 限定 size 仅对其直接子元素生效，避免影响被嵌套的列表的样式\n      .@{list-prefix-cls}-content-wrapper .@{list-prefix-cls}-footer,\n      .@{list-prefix-cls}-content-wrapper\n        .@{list-prefix-cls}-content\n        > .@{list-prefix-cls}-item,\n      .@{list-prefix-cls}-content-wrapper\n        .@{list-prefix-cls}-content\n        .@{list-prefix-cls}-col\n        > .@{list-prefix-cls}-item,\n      .@{list-prefix-cls}-content-wrapper\n        .@{list-prefix-cls}-content.@{list-prefix-cls}-virtual\n        .@{list-prefix-cls}-item {\n        padding: @@ref-padding-vertical-item @@ref-padding-horizontal-item;\n      }\n    }\n  }\n\n  .border() {\n    &-bordered {\n      border: @list-border-width solid @list-border-color;\n    }\n  }\n\n  .split() {\n    &-split &-header,\n    &-split &-item:not(:last-child) {\n      border-bottom: @list-border-width solid @list-border-color;\n    }\n\n    &-split &-footer {\n      border-top: @list-border-width solid @list-border-color;\n    }\n  }\n\n  .size(small);\n  .size(medium);\n  .size(large);\n  .border();\n  .split();\n\n  &-header {\n    color: @list-color-text-header;\n    font-weight: @list-font-weight-header;\n    font-size: @list-font-size-header;\n    line-height: @list-line-height-header;\n  }\n\n  &-item {\n    display: flex;\n    justify-content: space-between;\n    box-sizing: border-box;\n    width: 100%;\n    overflow: hidden;\n\n    &-main {\n      flex: 1;\n\n      .@{list-prefix-cls}-item-action:not(:first-child) {\n        margin-top: @list-action-margin-top;\n      }\n    }\n\n    &-meta {\n      display: flex;\n      align-items: center;\n      padding: @list-meta-padding-vertical @list-meta-padding-horizontal;\n\n      &-avatar {\n        display: flex;\n\n        &:not(:last-child) {\n          margin-right: @list-meta-margin-right-avatar;\n        }\n      }\n\n      &-title {\n        color: @list-meta-color-title;\n        font-weight: @list-meta-font-weight-title;\n\n        &:not(:last-child) {\n          margin-bottom: @list-meta-margin-bottom-title;\n        }\n      }\n\n      &-description {\n        color: @list-mete-color-description;\n      }\n    }\n\n    &-action {\n      display: flex;\n      flex-wrap: nowrap;\n      align-self: center;\n      margin: 0;\n      padding: 0;\n      list-style: none;\n\n      > li {\n        display: inline-block;\n        cursor: pointer;\n\n        &:not(:last-child) {\n          margin-right: @list-action-gap;\n        }\n      }\n    }\n  }\n\n  &-hover &-item:hover {\n    background-color: @list-color-bg-item-hover;\n  }\n\n  &-pagination {\n    float: right;\n    margin-top: @list-pagination-margin-top;\n\n    &::after {\n      display: block;\n      clear: both;\n      height: 0;\n      overflow: hidden;\n      visibility: hidden;\n      content: '';\n    }\n  }\n\n  &-scroll-loading {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  &-content {\n    flex: auto;\n\n    .@{prefix}-empty {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      height: 100%;\n    }\n  }\n}\n"
  },
  {
    "path": "packages/web-vue/components/list/style/index.ts",
    "content": "import '../../style/index.less';\nimport '../../pagination/style';\nimport '../../spin/style';\nimport '../../grid/style';\nimport '../../empty/style';\nimport '../../scrollbar/style';\nimport './index.less';\n"
  },
  {
    "path": "packages/web-vue/components/list/style/token.less",
    "content": "@import '../../style/theme/index.less';\n\n@list-border-width: 1px;\n@list-border-color: var(~'@{arco-cssvars-prefix}-color-neutral-3');\n@list-border-radius: @radius-medium;\n\n@list-color-text: var(~'@{arco-cssvars-prefix}-color-text-1');\n@list-font-size: @font-size-body-3;\n@list-line-height: @line-height-base;\n\n@list-color-text-header: var(~'@{arco-cssvars-prefix}-color-text-1');\n@list-color-bg-item-hover: var(~'@{arco-cssvars-prefix}-color-fill-1');\n@list-font-size-header: @font-size-title-1;\n@list-font-weight-header: @font-weight-500;\n@list-line-height-header: 1.5;\n\n/**********************************************\n * size:  small / default / large\n **********************************************/\n@list-size-small-padding-vertical-header: @spacing-4;\n@list-size-small-padding-horizontal-header: @spacing-8;\n@list-size-small-padding-vertical-item: 9px;\n@list-size-small-padding-horizontal-item: @spacing-8;\n\n@list-size-default-padding-vertical-header: @spacing-6;\n@list-size-default-padding-horizontal-header: @spacing-8;\n@list-size-default-padding-vertical-item: 13px;\n@list-size-default-padding-horizontal-item: @spacing-8;\n\n@list-size-large-padding-vertical-header: @spacing-7;\n@list-size-large-padding-horizontal-header: @spacing-8;\n@list-size-large-padding-vertical-item: 17px;\n@list-size-large-padding-horizontal-item: @spacing-8;\n\n// meta\n@list-meta-font-weight-title: @font-weight-500;\n@list-meta-color-title: var(~'@{arco-cssvars-prefix}-color-text-1');\n@list-mete-color-description: var(~'@{arco-cssvars-prefix}-color-text-2');\n@list-meta-margin-right-avatar: @spacing-7;\n@list-meta-margin-bottom-title: @spacing-1;\n@list-meta-padding-horizontal: @spacing-none;\n@list-meta-padding-vertical: @spacing-2;\n\n// actions\n@list-action-gap: @spacing-8;\n@list-action-margin-top: @spacing-2;\n\n// pagination\n@list-pagination-margin-top: @spacing-9;\n\n// vue覆盖token\n@list-size-medium-padding-vertical-header: @list-size-default-padding-vertical-header;\n@list-size-medium-padding-horizontal-header: @list-size-default-padding-horizontal-header;\n@list-size-medium-padding-vertical-item: @list-size-default-padding-vertical-item;\n@list-size-medium-padding-horizontal-item: @list-size-default-padding-horizontal-item;\n"
  },
  {
    "path": "packages/web-vue/components/list/use-pagination.ts",
    "content": "import { computed, ref } from 'vue';\nimport { isObject } from '../_utils/is';\n\nexport const usePagination = (props: any, { emit }: { emit: any }) => {\n  const _current = ref(\n    isObject(props.paginationProps)\n      ? props.paginationProps.defaultCurrent ?? 1\n      : 1\n  );\n  const _pageSize = ref(\n    isObject(props.paginationProps)\n      ? props.paginationProps.defaultPageSize ?? 10\n      : 10\n  );\n\n  const current = computed(() =>\n    isObject(props.paginationProps)\n      ? props.paginationProps.current ?? _current.value\n      : _current.value\n  );\n\n  const pageSize = computed(() =>\n    isObject(props.paginationProps)\n      ? props.paginationProps.pageSize ?? _pageSize.value\n      : _pageSize.value\n  );\n\n  const handlePageChange = (page: number) => {\n    _current.value = page;\n    emit('pageChange', page);\n  };\n\n  const handlePageSizeChange = (pageSize: number) => {\n    _pageSize.value = pageSize;\n    emit('pageSizeChange', pageSize);\n  };\n\n  return {\n    current,\n    pageSize,\n    handlePageChange,\n    handlePageSizeChange,\n  };\n};\n"
  },
  {
    "path": "packages/web-vue/components/locale/__test__/index.test.ts",
    "content": "import path from 'path';\nimport glob from 'glob';\nimport zhCN from '../lang/zh-cn';\n\nfunction hasEqualStructure(\n  obj1: Record<string, unknown>,\n  obj2: Record<string, unknown>\n) {\n  return Object.keys(obj1).every((key) => {\n    const v = obj1[key];\n\n    if (typeof v === 'object' && v !== null) {\n      if (!obj2[key]) {\n        return false;\n      }\n\n      return hasEqualStructure(v, obj2[key]);\n    }\n\n    return obj2.hasOwnProperty(key);\n  });\n}\n\nexport default function toMatchStructure(actual, expected) {\n  const pass = hasEqualStructure(actual, expected);\n\n  return {\n    message: () => `expected ${expected} to match structure ${actual}`,\n    pass,\n  };\n}\n\nexpect.extend({\n  toMatchStructure,\n});\n\ndescribe('Locale', () => {\n  test('should have same object', async () => {\n    const languages = glob.sync('*.ts', {\n      cwd: path.resolve(__dirname, '../lang'),\n      ignore: 'zh-cn.ts',\n    });\n\n    for (const item of languages) {\n      // eslint-disable-next-line no-await-in-loop\n      const lang = await import(`../lang/${item}`);\n      expect(lang.default).toMatchStructure(zhCN);\n    }\n  });\n});\n"
  },
  {
    "path": "packages/web-vue/components/locale/index.ts",
    "content": "import { ref, reactive, inject, computed } from 'vue';\nimport { isString } from '../_utils/is';\nimport { configProviderInjectionKey } from '../config-provider/context';\nimport type { ArcoI18nMessages, ArcoLang } from './interface';\nimport zhCN from './lang/zh-cn';\n\nconst LOCALE = ref('zh-CN');\nconst I18N_MESSAGES = reactive<ArcoI18nMessages>({\n  'zh-CN': zhCN,\n});\n\n/**\n * 添加地区语言包。添加过后的语言包可以通过 `useLocale` 使用\n * @param messages 需要添加的地区语言数据\n * @param options\n */\nexport const addI18nMessages = (\n  messages: ArcoI18nMessages,\n  options?: {\n    overwrite?: boolean;\n  }\n) => {\n  for (const key of Object.keys(messages)) {\n    if (!I18N_MESSAGES[key] || options?.overwrite) {\n      I18N_MESSAGES[key] = messages[key];\n    }\n  }\n};\n\n/**\n * 切换地区语言。仅在未提供ConfigProvider时生效。\n * @param locale\n */\nexport const useLocale = (locale: string) => {\n  if (!I18N_MESSAGES[locale]) {\n    // eslint-disable-next-line no-console\n    console.warn(`use ${locale} failed! Please add ${locale} first`);\n    return;\n  }\n  LOCALE.value = locale;\n};\n\n/**\n * 获取当前的地区语言\n */\nexport const getLocale = () => {\n  return LOCALE.value;\n};\n\n// 仅内部使用\nexport const useI18n = () => {\n  const configProvider = inject(configProviderInjectionKey, undefined);\n  const i18nMessage = computed<ArcoLang>(\n    () => configProvider?.locale ?? I18N_MESSAGES[LOCALE.value]\n  );\n  const locale = computed(() => i18nMessage.value.locale);\n\n  const transform = (key: string, ...args: any[]): string => {\n    const keyArray = key.split('.');\n    let temp: any = i18nMessage.value;\n\n    for (const keyItem of keyArray) {\n      if (!temp[keyItem]) {\n        return key;\n      }\n      temp = temp[keyItem];\n    }\n    if (isString(temp)) {\n      if (args.length > 0) {\n        return temp.replace(/{(\\d+)}/g, (sub, index) => args[index] ?? sub);\n      }\n\n      return temp;\n    }\n    return temp;\n  };\n\n  return {\n    i18nMessage,\n    locale,\n    t: transform,\n  };\n};\n"
  },
  {
    "path": "packages/web-vue/components/locale/interface.ts",
    "content": "export interface ArcoCalendarLang {\n  formatYear: string;\n  formatMonth: string;\n  today: string;\n  view: {\n    month: string;\n    year: string;\n    week: string;\n    day: string;\n  };\n  month: {\n    long: {\n      January: string;\n      February: string;\n      March: string;\n      April: string;\n      May: string;\n      June: string;\n      July: string;\n      August: string;\n      September: string;\n      October: string;\n      November: string;\n      December: string;\n    };\n    short: {\n      January: string;\n      February: string;\n      March: string;\n      April: string;\n      May: string;\n      June: string;\n      July: string;\n      August: string;\n      September: string;\n      October: string;\n      November: string;\n      December: string;\n    };\n  };\n  week: {\n    long: {\n      self: string;\n      monday: string;\n      tuesday: string;\n      wednesday: string;\n      thursday: string;\n      friday: string;\n      saturday: string;\n      sunday: string;\n    };\n    short: {\n      self: string;\n      monday: string;\n      tuesday: string;\n      wednesday: string;\n      thursday: string;\n      friday: string;\n      saturday: string;\n      sunday: string;\n    };\n  };\n}\n\nexport interface ValidateMessage {\n  required: string;\n  type: {\n    string: string;\n    number: string;\n    boolean: string;\n    array: string;\n    object: string;\n    url: string;\n    email: string;\n    ip: string;\n  };\n  number: {\n    min: string;\n    max: string;\n    equal: string;\n    range: string;\n    positive: string;\n    negative: string;\n  };\n  array: {\n    length: string;\n    minLength: string;\n    maxLength: string;\n    includes: string;\n    deepEqual: string;\n    empty: string;\n  };\n  string: {\n    minLength: string;\n    maxLength: string;\n    length: string;\n    match: string;\n    uppercase: string;\n    lowercase: string;\n  };\n  object: {\n    deepEqual: string;\n    hasKeys: string;\n    empty: string;\n  };\n  boolean: {\n    true: string;\n    false: string;\n  };\n}\n\nexport interface ArcoLang {\n  locale: string;\n  empty: {\n    description: string;\n  };\n  calendar: ArcoCalendarLang;\n  drawer: {\n    okText: string;\n    cancelText: string;\n  };\n  popconfirm: {\n    okText: string;\n    cancelText: string;\n  };\n  modal: {\n    okText: string;\n    cancelText: string;\n  };\n  pagination: {\n    goto: string;\n    page: string;\n    countPerPage: string;\n    total: string;\n  };\n  table: {\n    okText: string;\n    resetText: string;\n  };\n  upload: {\n    start: string;\n    cancel: string;\n    delete: string;\n    retry: string;\n    buttonText: string;\n    preview: string;\n    drag: string;\n    dragHover: string;\n    error: string;\n  };\n  datePicker: {\n    view: ArcoCalendarLang['view'];\n    month: ArcoCalendarLang['month'];\n    week: ArcoCalendarLang['week'];\n    placeholder: {\n      date: string;\n      week: string;\n      month: string;\n      year: string;\n      quarter: string;\n      time: string;\n    };\n    rangePlaceholder: {\n      date: [string, string];\n      week: [string, string];\n      month: [string, string];\n      year: [string, string];\n      quarter: [string, string];\n      time: [string, string];\n    };\n    selectTime: string;\n    today: string;\n    now: string;\n    ok: string;\n  };\n  image: {\n    loading: string;\n  };\n  imagePreview: {\n    fullScreen: string;\n    rotateRight: string;\n    rotateLeft: string;\n    zoomIn: string;\n    zoomOut: string;\n    originalSize: string;\n  };\n  typography: {\n    copied: string;\n    copy: string;\n    expand: string;\n    collapse: string;\n    edit: string;\n  };\n\n  form?: {\n    validateMessages: ValidateMessage;\n  };\n  colorPicker: {\n    history: string;\n    preset: string;\n    empty: string;\n  };\n}\n\nexport type ArcoI18nMessages = Record<string, ArcoLang>;\n"
  },
  {
    "path": "packages/web-vue/components/locale/lang/ar-eg.ts",
    "content": "import { ArcoCalendarLang, ArcoLang } from '../interface';\n\nconst calendarLang: ArcoCalendarLang = {\n  formatYear: 'YYYY',\n  formatMonth: 'MMMM YYYY',\n  today: 'اليوم',\n  view: {\n    month: 'شهر',\n    year: 'عام',\n    week: 'أسبوع',\n    day: 'يوم',\n  },\n  month: {\n    long: {\n      January: 'ديسمبر',\n      February: 'نوفمبر',\n      March: 'أكتوبر',\n      April: 'سبتمبر',\n      May: ' أغسطس',\n      June: 'يوليه',\n      July: 'يونيو',\n      August: 'مايو',\n      September: 'أبريل',\n      October: 'مارس',\n      November: 'فبراير',\n      December: 'يناير',\n    },\n    short: {\n      January: 'ديسمبر',\n      February: 'نوفمبر',\n      March: 'أكتوبر',\n      April: 'سبتمبر',\n      May: ' أغسطس',\n      June: 'يوليه',\n      July: 'يونيو',\n      August: 'مايو',\n      September: 'أبريل',\n      October: 'مارس',\n      November: 'فبراير',\n      December: 'يناير',\n    },\n  },\n  week: {\n    long: {\n      self: 'أسبوع',\n      monday: 'الجمعة',\n      tuesday: 'الخميس',\n      wednesday: 'الأربعاء',\n      thursday: 'الثلاثاء',\n      friday: 'الإثنين',\n      saturday: 'السبت',\n      sunday: 'الأحد',\n    },\n    short: {\n      self: 'أسبوع',\n      monday: 'الجمعة',\n      tuesday: 'الخميس',\n      wednesday: 'الأربعاء',\n      thursday: 'الثلاثاء',\n      friday: 'الإثنين',\n      saturday: 'السبت',\n      sunday: 'الأحد',\n    },\n  },\n};\n\nconst lang: ArcoLang = {\n  locale: 'ar-EG',\n  empty: {\n    description: 'لايوجد بيانات',\n  },\n  drawer: {\n    okText: 'موافق',\n    cancelText: 'إلغاء',\n  },\n  popconfirm: {\n    okText: 'موافق',\n    cancelText: 'إلغاء',\n  },\n  modal: {\n    okText: 'موافق',\n    cancelText: 'إلغاء',\n  },\n  pagination: {\n    goto: 'اذهب إلى',\n    page: 'الصفحة',\n    countPerPage: 'عنصر / صفحة',\n    total: '{0} الإجمالي',\n  },\n  table: {\n    okText: 'موافق',\n    resetText: 'إعادة تعيين',\n  },\n  upload: {\n    start: 'بداية',\n    cancel: 'يلغي',\n    delete: 'حذف',\n    retry: 'انقر للمحاول مجددا',\n    buttonText: 'انقر للتحميل',\n    preview: 'معاينة',\n    drag: 'انقر أو اسحب الملف إلى هذه المنطقة للتحميل',\n    dragHover: 'حرر الملف وابدأ في التحميل',\n    error: 'التحميل فشل',\n  },\n  calendar: calendarLang,\n  datePicker: {\n    view: calendarLang.view,\n    month: calendarLang.month,\n    week: calendarLang.week,\n    placeholder: {\n      date: 'الرجاء تحديد تاريخ',\n      week: 'الرجاء تحديد أسبوع',\n      month: 'الرجاء تحديد شهر',\n      year: 'الرجاء تحديد عام',\n      quarter: 'الرجاء تحديد ربع',\n      time: 'فترة الاختيار',\n    },\n    rangePlaceholder: {\n      date: ['تاريخ البدء', 'تاريخ الانتهاء'],\n      week: ['أسبوع البدء', 'نهاية الأسبوع'],\n      month: ['شهر البدء', 'نهاية الشهر'],\n      year: ['سنة البدء', 'نهاية عام'],\n      quarter: ['بداية ربع السنة', 'نهاية الربع'],\n      time: ['وقت البدء', 'وقت النهاية'],\n    },\n    selectTime: 'فترة الاختيار',\n    today: 'اليوم',\n    now: 'الآن',\n    ok: 'موافق',\n  },\n  image: {\n    loading: 'loading',\n  },\n  imagePreview: {\n    fullScreen: 'كامل الشاشة',\n    rotateRight: 'استدارة لليمين',\n    rotateLeft: 'استدر يسارا',\n    zoomIn: 'تكبير',\n    zoomOut: 'تصغير',\n    originalSize: 'الحجم الأصلي',\n  },\n  typography: {\n    copy: 'ينسخ',\n    copied: 'نسخ',\n    edit: 'تعديل',\n    collapse: 'يطوى',\n    expand: 'وسعت',\n  },\n  colorPicker: {\n    history: 'ألوان تاريخية',\n    preset: 'ألوان النظام المضبوطة مسبقاً',\n    empty: 'غير متوفرة',\n  },\n};\n\nexport default lang;\n"
  },
  {
    "path": "packages/web-vue/components/locale/lang/de-de.ts",
    "content": "import { ArcoCalendarLang, ArcoLang } from '../interface';\n\nconst calendarLang: ArcoCalendarLang = {\n  formatYear: 'YYYY',\n  formatMonth: 'MMM YYYY',\n  today: 'Heute',\n  view: {\n    month: 'Monat',\n    year: 'Jahr',\n    week: 'Woche',\n    day: 'Tag',\n  },\n  month: {\n    long: {\n      January: 'Januar',\n      February: 'Februar',\n      March: 'März',\n      April: 'April',\n      May: 'Mai',\n      June: 'Juni',\n      July: 'Juli',\n      August: 'August',\n      September: 'September',\n      October: 'Oktober',\n      November: 'November',\n      December: 'Dezember',\n    },\n    short: {\n      January: 'Jan',\n      February: 'Feb',\n      March: 'Mär',\n      April: 'Apr',\n      May: 'Mai',\n      June: 'Jun',\n      July: 'Jul',\n      August: 'Aug',\n      September: 'Sep',\n      October: 'Okt',\n      November: 'Nov',\n      December: 'Dez',\n    },\n  },\n  week: {\n    long: {\n      self: 'Woche',\n      monday: 'Montag',\n      tuesday: 'Dienstag',\n      wednesday: 'Mittwoch',\n      thursday: 'Donnerstag',\n      friday: 'Freitag',\n      saturday: 'Samstag',\n      sunday: 'Sonntag',\n    },\n    short: {\n      self: 'Woche',\n      monday: 'Mo.',\n      tuesday: 'Di.',\n      wednesday: 'Mi.',\n      thursday: 'Do.',\n      friday: 'Fr.',\n      saturday: 'Sa.',\n      sunday: 'So.',\n    },\n  },\n};\n\nconst lang: ArcoLang = {\n  locale: 'de-DE',\n  empty: {\n    description: 'Keine Daten',\n  },\n  drawer: {\n    okText: 'OK',\n    cancelText: 'Abbrechen',\n  },\n  popconfirm: {\n    okText: 'OK',\n    cancelText: 'Abbrechen',\n  },\n  modal: {\n    okText: 'OK',\n    cancelText: 'Abbrechen',\n  },\n  pagination: {\n    goto: 'Gehe zu',\n    page: '',\n    countPerPage: '/ Seite',\n    total: 'Gesamt {0}',\n  },\n  table: {\n    okText: 'OK',\n    resetText: 'Zurücksetzen',\n  },\n  upload: {\n    start: 'Anfang',\n    cancel: 'Abbrechen',\n    delete: 'löschen',\n    retry: 'Klicken Sie hier, um es erneut zu versuchen',\n    buttonText: 'Zum Hochladen klicken',\n    preview: 'Vorschau',\n    drag: 'Klicken oder ziehen Sie Dateien, um sie hier hochzuladen',\n    dragHover: 'Geben Sie die Datei frei und starten Sie den Upload',\n    error: 'Upload fehlgeschlagen',\n  },\n  calendar: calendarLang,\n  datePicker: {\n    view: calendarLang.view,\n    month: calendarLang.month,\n    week: calendarLang.week,\n    placeholder: {\n      date: 'Bitte wählen Sie ein Datum',\n      week: 'Bitte wählen Sie eine Woche',\n      month: 'Bitte wählen Sie einen Monat',\n      year: 'Bitte wählen Sie ein Jahr aus',\n      quarter: 'Bitte wählen Sie ein Quartal',\n\n      time: 'Zeit auswählen',\n    },\n    rangePlaceholder: {\n      date: ['Startdatum', 'Endtermin'],\n      week: ['Woche starten', 'Ende der Woche'],\n      month: ['Startmonat', 'Ende Monat'],\n      year: ['Startjahr', 'Ende Jahr'],\n      quarter: ['Anfangsquartal', 'Ende des Quartals'],\n      time: ['Startzeit', 'Endzeit'],\n    },\n    selectTime: 'Zeit auswählen',\n    today: 'Heute',\n    now: 'Jetzt',\n    ok: 'OK',\n  },\n  image: {\n    loading: 'Wird geladen',\n  },\n  imagePreview: {\n    fullScreen: 'Vollbild',\n    rotateRight: 'Nach rechts drehen',\n    rotateLeft: 'Nach links drehen',\n    zoomIn: 'Vergrößern',\n    zoomOut: 'Rauszoomen',\n    originalSize: 'Originalgröße',\n  },\n  typography: {\n    copy: 'Kopieren',\n    copied: 'Kopiert',\n    edit: 'Bearbeiten',\n    collapse: 'Falten',\n    expand: 'Erweitern',\n  },\n  colorPicker: {\n    history: 'Historische Farben',\n    preset: 'Standardfarbe des Systems',\n    empty: 'Noch keine',\n  },\n};\n\nexport default lang;\n"
  },
  {
    "path": "packages/web-vue/components/locale/lang/en-us.ts",
    "content": "// @ts-ignore\nimport { DefaultValidateMessage } from 'b-validate';\nimport { ArcoCalendarLang, ArcoLang } from '../interface';\n\nconst calendarLang: ArcoCalendarLang = {\n  formatYear: 'YYYY',\n  formatMonth: 'MMM YYYY',\n  today: 'Today',\n  view: {\n    month: 'Month',\n    year: 'Year',\n    week: 'Week',\n    day: 'Day',\n  },\n  month: {\n    long: {\n      January: 'January',\n      February: 'February',\n      March: 'March',\n      April: 'April',\n      May: 'May',\n      June: 'June',\n      July: 'July',\n      August: 'August',\n      September: 'September',\n      October: 'October',\n      November: 'November',\n      December: 'December',\n    },\n    short: {\n      January: 'Jan',\n      February: 'Feb',\n      March: 'Mar',\n      April: 'Apr',\n      May: 'May',\n      June: 'Jun',\n      July: 'Jul',\n      August: 'Aug',\n      September: 'Sept',\n      October: 'Oct',\n      November: 'Nov',\n      December: 'Dec',\n    },\n  },\n  week: {\n    long: {\n      self: 'Week',\n      monday: 'Monday',\n      tuesday: 'Tuesday',\n      wednesday: 'Wednesday',\n      thursday: 'Thursday',\n      friday: 'Friday',\n      saturday: 'Saturday',\n      sunday: 'Sunday',\n    },\n    short: {\n      self: 'Week',\n      monday: 'Mon',\n      tuesday: 'Tue',\n      wednesday: 'Wed',\n      thursday: 'Thu',\n      friday: 'Fri',\n      saturday: 'Sat',\n      sunday: 'Sun',\n    },\n  },\n};\n\nconst lang: ArcoLang = {\n  locale: 'en-US',\n  empty: {\n    description: 'No Data',\n  },\n  drawer: {\n    okText: 'Ok',\n    cancelText: 'Cancel',\n  },\n  popconfirm: {\n    okText: 'Ok',\n    cancelText: 'Cancel',\n  },\n  modal: {\n    okText: 'Ok',\n    cancelText: 'Cancel',\n  },\n  pagination: {\n    goto: 'Goto',\n    page: 'Page',\n    countPerPage: ' / Page',\n    total: 'Total: {0}',\n  },\n  table: {\n    okText: 'Ok',\n    resetText: 'Reset',\n  },\n  upload: {\n    start: 'Start',\n    cancel: 'Cancel',\n    delete: 'Delete',\n    retry: 'Click to retry',\n    buttonText: 'Upload',\n    preview: 'Preview',\n    drag: 'Click or drag file to this area to upload',\n    dragHover: 'Release to upload',\n    error: 'Upload Error',\n  },\n  calendar: calendarLang,\n  datePicker: {\n    view: calendarLang.view,\n    month: calendarLang.month,\n    week: calendarLang.week,\n    placeholder: {\n      date: 'Please select date',\n      week: 'Please select week',\n      month: 'Please select month',\n      year: 'Please select year',\n      quarter: 'Please select quarter',\n      time: 'Please select time',\n    },\n    rangePlaceholder: {\n      date: ['Start date', 'End date'],\n      week: ['Start week', 'End week'],\n      month: ['Start month', 'End month'],\n      year: ['Start year', 'End year'],\n      quarter: ['Start quarter', 'End quarter'],\n      time: ['Start time', 'End time'],\n    },\n    selectTime: 'Select time',\n    today: 'Today',\n    now: 'Now',\n    ok: 'Ok',\n  },\n  image: {\n    loading: 'loading',\n  },\n  imagePreview: {\n    fullScreen: 'Full Screen',\n    rotateRight: 'Rotate Right',\n    rotateLeft: 'Rotate Left',\n    zoomIn: 'Zoom In',\n    zoomOut: 'Zoom Out',\n    originalSize: 'Original Size',\n  },\n  typography: {\n    copied: 'Copied',\n    copy: 'Copy',\n    expand: 'Expand',\n    collapse: 'Collapse',\n    edit: 'Edit',\n  },\n  form: {\n    validateMessages: DefaultValidateMessage,\n  },\n  colorPicker: {\n    history: 'History Colors',\n    preset: 'Preset Colors',\n    empty: 'Empty',\n  },\n};\n\nexport default lang;\n"
  },
  {
    "path": "packages/web-vue/components/locale/lang/es-es.ts",
    "content": "import { ArcoCalendarLang, ArcoLang } from '../interface';\n\nconst calendarLang: ArcoCalendarLang = {\n  formatYear: 'YYYY',\n  formatMonth: 'M/YYYY',\n  today: 'Hoy',\n  view: {\n    month: 'Mes',\n    year: 'Año',\n    week: 'Semana',\n    day: 'Fecha',\n  },\n  month: {\n    long: {\n      January: 'Enero',\n      February: 'Febrero',\n      March: 'Marzo',\n      April: 'Abril',\n      May: 'Mayo',\n      June: 'Junio',\n      July: 'Julio',\n      August: 'Agosto',\n      September: 'Septiembre',\n      October: 'Octubre',\n      November: 'Noviembre',\n      December: 'Diciembre',\n    },\n    short: {\n      January: 'Ene',\n      February: 'Feb',\n      March: 'Mar',\n      April: 'Abr',\n      May: 'May',\n      June: 'Jun',\n      July: 'Jul',\n      August: 'Ago',\n      September: 'Sep',\n      October: 'Oct',\n      November: 'Nov',\n      December: 'Dic',\n    },\n  },\n  week: {\n    long: {\n      self: 'Semana',\n      monday: 'Lunes',\n      tuesday: 'Martes',\n      wednesday: 'Miércoles',\n      thursday: 'Jueves',\n      friday: 'Viernes',\n      saturday: 'Sábado',\n      sunday: 'Domingo',\n    },\n    short: {\n      self: 'Semana',\n      monday: 'Lun',\n      tuesday: 'Mar',\n      wednesday: 'Mié',\n      thursday: 'Jue',\n      friday: 'Vie',\n      saturday: 'Sáb',\n      sunday: 'Dom',\n    },\n  },\n};\n\nconst lang: ArcoLang = {\n  locale: 'es-ES',\n  empty: {\n    description: 'No hay datos',\n  },\n  drawer: {\n    okText: 'Aceptar',\n    cancelText: 'Cancelar',\n  },\n  popconfirm: {\n    okText: 'Aceptar',\n    cancelText: 'Cancelar',\n  },\n  modal: {\n    okText: 'Aceptar',\n    cancelText: 'Cancelar',\n  },\n  pagination: {\n    goto: 'Ir a',\n    page: 'Página',\n    countPerPage: '/ página',\n    total: '{0} en total',\n  },\n  table: {\n    okText: 'Aceptar',\n    resetText: 'Reiniciar',\n  },\n  upload: {\n    start: 'Comienzo',\n    cancel: 'Cancelar',\n    delete: 'Eliminar',\n    retry: 'Haga clic para intentarlo de nuevo',\n    buttonText: 'Haga clic para cargar',\n    preview: 'Vista Previa',\n    drag: 'Haga clic o arrastre los archivos para cargarlos aquí',\n    dragHover: 'Libera el archivo y empieza a subir',\n    error: 'Fallar',\n  },\n  calendar: calendarLang,\n  datePicker: {\n    view: calendarLang.view,\n    month: calendarLang.month,\n    week: calendarLang.week,\n    placeholder: {\n      date: 'Seleccionar fecha',\n      week: 'Seleccionar semana',\n      month: 'Elegir un mes',\n      year: 'Elegir un año',\n      quarter: 'Seleccionar trimestre',\n      time: 'Seleccionar hora',\n    },\n    rangePlaceholder: {\n      date: ['Fecha inicial', 'Fecha final'],\n      week: ['Semana inicial', 'Semana final'],\n      month: ['Mes inicial', 'Mes final'],\n      year: ['Año inicial', 'Año final'],\n      quarter: ['Trimestre inicial', 'Trimestre final'],\n      time: ['Seleccionar hora', 'Seleccionar hora'],\n    },\n    selectTime: 'Select time',\n    today: 'Today',\n    now: 'Now',\n    ok: 'Ok',\n  },\n  image: {\n    loading: 'cargando',\n  },\n  imagePreview: {\n    fullScreen: 'Pantalla completa',\n    rotateRight: 'Gira a la derecha',\n    rotateLeft: 'Girar a la izquierda',\n    zoomIn: 'Acercar',\n    zoomOut: 'Alejar',\n    originalSize: 'Tamaño original',\n  },\n  typography: {\n    copy: 'Copiar',\n    copied: 'Copiado',\n    edit: 'Editar',\n    expand: 'Expandir',\n    collapse: 'Pliegue',\n  },\n  colorPicker: {\n    history: 'Colores históricos',\n    preset: 'Colores predefinidos del sistema',\n    empty: 'No hay datos',\n  },\n};\n\nexport default lang;\n"
  },
  {
    "path": "packages/web-vue/components/locale/lang/fr-fr.ts",
    "content": "import { ArcoCalendarLang, ArcoLang } from '../interface';\n\nconst calendarLang: ArcoCalendarLang = {\n  formatYear: 'YYYY',\n  formatMonth: 'MM/YYYY',\n  today: \"Aujourd'hui\",\n  view: {\n    month: 'Mois',\n    year: 'Année',\n    week: 'Semaine',\n    day: 'Date',\n  },\n  month: {\n    long: {\n      January: 'Janvier',\n      February: 'Février',\n      March: 'Mars',\n      April: 'Avril',\n      May: 'Mai',\n      June: 'Juin',\n      July: 'Juillet',\n      August: 'Août',\n      September: 'Septembre',\n      October: 'Octobre',\n      November: 'Novembre',\n      December: 'Décembre',\n    },\n    short: {\n      January: 'Jan',\n      February: 'Fév',\n      March: 'Mar',\n      April: 'Avr',\n      May: 'Mai',\n      June: 'Jun',\n      July: 'Jul',\n      August: 'Aoû',\n      September: 'Sep',\n      October: 'Oct',\n      November: 'Nov',\n      December: 'Déc',\n    },\n  },\n  week: {\n    long: {\n      self: 'Week',\n      monday: 'Lundi',\n      tuesday: 'Mardi',\n      wednesday: 'Mercredi',\n      thursday: 'Jeudi',\n      friday: 'Vendredi',\n      saturday: 'Samedi',\n      sunday: 'Dimanche',\n    },\n    short: {\n      self: 'Week',\n      monday: 'Lun',\n      tuesday: 'Mar',\n      wednesday: 'Mer',\n      thursday: 'Jeu',\n      friday: 'Ven',\n      saturday: 'Sam',\n      sunday: 'Dim',\n    },\n  },\n};\n\nconst lang: ArcoLang = {\n  locale: 'fr-FR',\n  empty: {\n    description: 'Aucune donnée',\n  },\n  drawer: {\n    okText: 'OK',\n    cancelText: 'Annuler',\n  },\n  popconfirm: {\n    okText: 'OK',\n    cancelText: 'Annuler',\n  },\n  modal: {\n    okText: 'OK',\n    cancelText: 'Annuler',\n  },\n  pagination: {\n    goto: 'Aller à',\n    page: 'Page',\n    countPerPage: '/ page',\n    total: 'Total {0}',\n  },\n  table: {\n    okText: 'OK',\n    resetText: 'Réinitialiser',\n  },\n  upload: {\n    start: 'Démarrer',\n    cancel: 'Annuler',\n    delete: 'Supprimer',\n    retry: 'Cliquez pour réessayer',\n    buttonText: 'Cliquez pour télécharger',\n    preview: 'Aperçu',\n    drag: 'Cliquez ou faites glisser les fichiers à télécharger ici',\n    dragHover: 'Libérez le fichier et commencez à télécharger',\n    error: 'le téléchargement a échoué',\n  },\n  calendar: calendarLang,\n  datePicker: {\n    view: calendarLang.view,\n    month: calendarLang.month,\n    week: calendarLang.week,\n    placeholder: {\n      date: 'Sélectionner une date',\n      week: 'Sélectionner une semaine',\n      month: 'Sélectionner un mois',\n      year: 'Sélectionner une année',\n      quarter: 'Sélectionner un trimestre',\n\n      time: \"Sélectionner l'heure\",\n    },\n    rangePlaceholder: {\n      date: ['Date de début', 'Date de fin'],\n      week: ['Semaine de début', 'Semaine de fin'],\n      month: ['Mois de début', 'Mois de fin'],\n      year: ['Année de début', 'Année de fin'],\n      quarter: ['Trimestre de début', 'Trimestre de fin'],\n\n      time: ['Heure de début', 'Heure de fin'],\n    },\n    selectTime: \"Sélectionner l'heure\",\n    today: \"Aujourd'hui\",\n    now: 'Maintenant',\n    ok: 'OK',\n  },\n  image: {\n    loading: 'Chargement en cours',\n  },\n  imagePreview: {\n    fullScreen: 'Plein écran',\n    rotateRight: 'Tourner à droite',\n    rotateLeft: 'Tourner vers la gauche',\n    zoomIn: 'Agrandir',\n    zoomOut: 'Dézoomer',\n    originalSize: 'Format original',\n  },\n  typography: {\n    copy: 'Copier',\n    copied: 'Copie effectuée',\n    edit: 'Éditer',\n    collapse: 'Plier',\n    expand: 'Étendre',\n  },\n  colorPicker: {\n    history: 'Couleurs historiques',\n    preset: 'Couleurs prédéfinies par le système',\n    empty: 'Aucune donnée',\n  },\n};\n\nexport default lang;\n"
  },
  {
    "path": "packages/web-vue/components/locale/lang/id-id.ts",
    "content": "import { ArcoCalendarLang, ArcoLang } from '../interface';\n\nconst calendarLang: ArcoCalendarLang = {\n  formatYear: 'YYYY',\n  formatMonth: 'MMM YYYY',\n  today: 'Hari ini',\n  view: {\n    month: 'Bulan',\n    year: 'Tahun',\n    week: 'Minggu',\n    day: 'Hari',\n  },\n  month: {\n    long: {\n      January: 'Januari',\n      February: 'Februari',\n      March: 'Maret',\n      April: 'April',\n      May: 'Mungkin',\n      June: 'Juni',\n      July: 'Juli',\n      August: 'Agustus',\n      September: 'September',\n      October: 'Oktober',\n      November: 'November',\n      December: 'Desember',\n    },\n    short: {\n      January: 'Jan',\n      February: 'Feb',\n      March: 'Mar',\n      April: 'Apr',\n      May: 'Mungkin',\n      June: 'Jun',\n      July: 'Jul',\n      August: 'Agu',\n      September: 'Sept',\n      October: 'Okt',\n      November: 'Nov',\n      December: 'Des',\n    },\n  },\n  week: {\n    long: {\n      self: 'Minggu',\n      monday: 'Senin',\n      tuesday: 'Selasa',\n      wednesday: 'Rabu',\n      thursday: 'Kamis',\n      friday: 'Jumat',\n      saturday: 'Sabtu',\n      sunday: 'Minggu',\n    },\n    short: {\n      self: 'Minggu',\n      monday: 'Sen',\n      tuesday: 'Sel',\n      wednesday: 'Rab',\n      thursday: 'Kam',\n      friday: 'Jum',\n      saturday: 'Sab',\n      sunday: 'Min',\n    },\n  },\n};\n\nconst lang: ArcoLang = {\n  locale: 'id-ID',\n  empty: {\n    description: 'Tidak ada data',\n  },\n  drawer: {\n    okText: 'Baik',\n    cancelText: 'Membatalkan',\n  },\n  popconfirm: {\n    okText: 'Baik',\n    cancelText: 'Membatalkan',\n  },\n  modal: {\n    okText: 'Baik',\n    cancelText: 'Membatalkan',\n  },\n  pagination: {\n    goto: 'Pergi ke',\n    page: 'Halaman',\n    countPerPage: ' / Halaman',\n    total: 'Total: {0}',\n  },\n  table: {\n    okText: 'Baik',\n    resetText: 'Setel ulang',\n  },\n  upload: {\n    start: 'Mulailah',\n    cancel: 'Membatalkan',\n    delete: 'Menghapus',\n    retry: 'Klik untuk mencoba lagi',\n    buttonText: 'Unggah',\n    preview: 'Pratinjau',\n    drag: 'Klik atau seret file ke area ini untuk diunggah',\n    dragHover: 'Lepaskan untuk mengupload',\n    error: 'Kesalahan Unggahan',\n  },\n  calendar: calendarLang,\n  datePicker: {\n    view: calendarLang.view,\n    month: calendarLang.month,\n    week: calendarLang.week,\n    placeholder: {\n      date: 'Silakan pilih tanggal',\n      week: 'Silakan pilih minggu',\n      month: 'Silakan pilih bulan',\n      year: 'Silakan pilih tahun',\n      quarter: 'Silakan pilih perempat',\n      time: 'Pilih waktu',\n    },\n    rangePlaceholder: {\n      date: ['Mulai tanggal', 'Tanggal berakhir'],\n      week: ['Mulailah minggu', 'Akhir minggu'],\n      month: ['Mulai bulan', 'Akhir bulan'],\n      year: ['Awal tahun', 'Akhir tahun'],\n      quarter: ['Mulai kuartal', 'Seperempat akhir'],\n      time: ['Waktu mulai', 'Akhir waktu'],\n    },\n\n    selectTime: 'Pilih waktu',\n    today: 'Hari ini',\n    now: 'Sekarang',\n    ok: 'Baik',\n  },\n  image: {\n    loading: 'Memuat',\n  },\n  imagePreview: {\n    fullScreen: 'Layar penuh',\n    rotateRight: 'Putar ke kanan',\n    rotateLeft: 'Putar ke kiri',\n    zoomIn: 'Perbesar',\n    zoomOut: 'Perkecil',\n    originalSize: 'Ukuran asli',\n  },\n  typography: {\n    copy: 'Salinan',\n    copied: 'Disalin',\n    edit: 'Sunting',\n    collapse: 'Melipat',\n    expand: 'Membuka',\n  },\n  colorPicker: {\n    history: 'Warna sejarah',\n    preset: 'Sistem preset warna',\n    empty: 'Tidak ada data',\n  },\n};\n\nexport default lang;\n"
  },
  {
    "path": "packages/web-vue/components/locale/lang/it-it.ts",
    "content": "import { ArcoCalendarLang, ArcoLang } from '../interface';\n\nconst calendarLang: ArcoCalendarLang = {\n  formatYear: 'YYYY',\n  formatMonth: 'MMM YYYY',\n  today: 'Oggi',\n  view: {\n    month: 'Mese',\n    year: 'Anno',\n    week: 'Settimana',\n    day: 'Giorno',\n  },\n  month: {\n    long: {\n      January: 'Gennaio',\n      February: 'Febbraio',\n      March: 'Marzo',\n      April: 'Aprile',\n      May: 'Maggio',\n      June: 'Giugno',\n      July: 'Luglio',\n      August: 'Agosto',\n      September: 'Settembre',\n      October: 'Ottobre',\n      November: 'Novembre',\n      December: 'Dicembre',\n    },\n    short: {\n      January: 'Gen',\n      February: 'Feb',\n      March: 'Mar',\n      April: 'Apr',\n      May: 'Mag',\n      June: 'Giu',\n      July: 'Lug',\n      August: 'Ago',\n      September: 'Set',\n      October: 'Ott',\n      November: 'Nov',\n      December: 'Dic',\n    },\n  },\n  week: {\n    long: {\n      self: 'Settimana',\n      monday: 'Lunedì',\n      tuesday: 'Martedì',\n      wednesday: 'Mercoledì',\n      thursday: 'Giovedì',\n      friday: 'Venerdì',\n      saturday: 'Sabato',\n      sunday: 'Domenica',\n    },\n    short: {\n      self: 'Settimana',\n      monday: 'Lun',\n      tuesday: 'Mar',\n      wednesday: 'Mer',\n      thursday: 'Gio',\n      friday: 'Ven',\n      saturday: 'Sab',\n      sunday: 'Dom',\n    },\n  },\n};\n\nconst lang: ArcoLang = {\n  locale: 'it-IT',\n  empty: {\n    description: 'Nessun dato',\n  },\n  drawer: {\n    okText: 'OK',\n    cancelText: 'Annulla',\n  },\n  popconfirm: {\n    okText: 'OK',\n    cancelText: 'Annulla',\n  },\n  modal: {\n    okText: 'OK',\n    cancelText: 'Annulla',\n  },\n  pagination: {\n    goto: 'vai a',\n    page: '',\n    countPerPage: '/ pagina',\n    total: 'Totale {0}',\n  },\n  table: {\n    okText: 'OK',\n    resetText: 'Ripristina',\n  },\n  upload: {\n    start: 'Inizio',\n    cancel: 'Annulla',\n    delete: 'Elimina',\n    retry: 'Fare clic per riprovare',\n    buttonText: 'Fare clic per caricare',\n    preview: 'Anteprima',\n    drag: 'Fare clic o trascinare i file da caricare qui',\n    dragHover: 'Libera il file e inizia a caricare',\n    error: 'Caricamento non riuscito',\n  },\n  calendar: calendarLang,\n  datePicker: {\n    view: calendarLang.view,\n    month: calendarLang.month,\n    week: calendarLang.week,\n    placeholder: {\n      date: 'Seleziona una data',\n      week: 'Seleziona la settimana',\n      month: 'Seleziona un mese',\n      year: 'Seleziona un anno',\n      quarter: 'Selezionare il trimestre',\n      time: 'Seleziona un orario',\n    },\n    rangePlaceholder: {\n      date: ['Data di inizio', 'Data di fine'],\n      week: ['Settimana di inizio', 'Settimana di fine'],\n      month: ['Mese di inizio', 'Mese di fine'],\n      year: ['Anno di inizio', 'Anno di fine'],\n      quarter: ['Trimestre di inizio', 'Trimestre di fine'],\n\n      time: ['Orario di inizio', 'Orario di chiusura'],\n    },\n    selectTime: 'Seleziona un orario',\n    today: 'Oggi',\n    now: 'Ora',\n    ok: 'OK',\n  },\n  image: {\n    loading: 'Caricamento in corso',\n  },\n  imagePreview: {\n    fullScreen: 'A schermo intero',\n    rotateRight: 'Ruota a destra',\n    rotateLeft: 'Ruotare a sinistra',\n    zoomIn: 'Ingrandire',\n    zoomOut: 'Rimpicciolire',\n    originalSize: 'Misura originale',\n  },\n  typography: {\n    copy: 'Copia',\n    copied: 'Copia effettuata',\n    edit: 'Modifica',\n    collapse: 'Piega',\n    expand: 'Espandi',\n  },\n  colorPicker: {\n    history: 'Colori storici',\n    preset: 'Colori preimpostati dal sistema',\n    empty: 'Nessun dato',\n  },\n};\n\nexport default lang;\n"
  },
  {
    "path": "packages/web-vue/components/locale/lang/ja-jp.ts",
    "content": "import { ArcoCalendarLang, ArcoLang } from '../interface';\n\nconst calendarLang: ArcoCalendarLang = {\n  formatYear: 'YYYY 年',\n  formatMonth: 'YYYY 年 MM 月',\n  today: '今日',\n  view: {\n    month: '月',\n    year: '年',\n    week: '週',\n    day: '日',\n  },\n  month: {\n    long: {\n      January: '一月',\n      February: '二月',\n      March: '三月',\n      April: '四月',\n      May: '五月',\n      June: '六月',\n      July: '七月',\n      August: '八月',\n      September: '九月',\n      October: '十月',\n      November: '十一月',\n      December: '十二月',\n    },\n    short: {\n      January: '一月',\n      February: '二月',\n      March: '三月',\n      April: '四月',\n      May: '五月',\n      June: '六月',\n      July: '七月',\n      August: '八月',\n      September: '九月',\n      October: '十月',\n      November: '十一月',\n      December: '十二月',\n    },\n  },\n  week: {\n    long: {\n      self: '週',\n      monday: '月曜日',\n      tuesday: '火曜日',\n      wednesday: '水曜日',\n      thursday: '木曜日',\n      friday: '金曜日',\n      saturday: '土曜日',\n      sunday: '日曜日',\n    },\n    short: {\n      self: '週',\n      monday: '月',\n      tuesday: '火',\n      wednesday: '水',\n      thursday: '木',\n      friday: '金',\n      saturday: '土',\n      sunday: '日',\n    },\n  },\n};\n\nconst lang: ArcoLang = {\n  locale: 'ja-JP',\n  empty: {\n    description: 'データなし',\n  },\n  drawer: {\n    okText: 'OK',\n    cancelText: 'キャンセル',\n  },\n  popconfirm: {\n    okText: 'OK',\n    cancelText: 'キャンセル',\n  },\n  modal: {\n    okText: 'OK',\n    cancelText: 'キャンセル',\n  },\n  pagination: {\n    goto: '移動',\n    page: 'ページ',\n    countPerPage: '件/ページ',\n    total: '総計 {0} 件',\n  },\n  table: {\n    okText: 'OK',\n    resetText: 'リセット',\n  },\n  upload: {\n    start: 'スタート',\n    cancel: 'キャンセル',\n    delete: '削除',\n    retry: 'リトライ',\n    buttonText: 'アップロード',\n    preview: 'プレビュー',\n    drag: 'クリックまたはドラッグしてアップロードします。',\n    dragHover: 'ドロップしてアップロードを始めます',\n    error: 'アップロード失敗しました',\n  },\n  calendar: calendarLang,\n  datePicker: {\n    view: calendarLang.view,\n    month: calendarLang.month,\n    week: calendarLang.week,\n    placeholder: {\n      date: '日付を選択',\n      week: '週を選択',\n      month: '月を選択',\n      year: '年を選択',\n      quarter: '四半期を選択',\n      time: '時間を選択',\n    },\n    rangePlaceholder: {\n      date: ['開始日', '終了日'],\n      week: ['開始週', '終了週'],\n      month: ['開始月', '終了月'],\n      year: ['開始年', '終了年'],\n      quarter: ['開始四半期', '終了四半期'],\n      time: ['開始時間', '終了時間'],\n    },\n    selectTime: '時間を選択',\n    today: '今日',\n    now: '今',\n    ok: 'OK',\n  },\n  image: {\n    loading: 'Loading',\n  },\n  imagePreview: {\n    fullScreen: 'フルスクリーン',\n    rotateRight: '右回り',\n    rotateLeft: '左回り',\n    zoomIn: '拡大',\n    zoomOut: '縮小',\n    originalSize: 'デフォルト',\n  },\n  typography: {\n    copied: 'コピーしました',\n    copy: 'コピー',\n    expand: '展開',\n    collapse: '折る',\n    edit: '編集',\n  },\n  form: {\n    validateMessages: {\n      required: '#{field} が必要です',\n      type: {\n        string: 'は有効なテキストタイプではありません',\n        number: 'は有効な数値タイプではありません',\n        boolean: 'は有効なブール型ではありません',\n        array: 'は有効な配列型ではありません',\n        object: 'は有効なオブジェクトタイプではありません',\n        url: 'は有効なURLアドレスではありません',\n        email: 'は有効なメールアドレスではありません',\n        ip: 'は有効なIPアドレスではありません',\n      },\n      number: {\n        min: '`#{value}` は最小値 `#{min}` 未満です',\n        max: '`#{value}` は最大値 `#{max}` より大きい',\n        equal: '`#{value}` は `#{equal}` と等しくありません',\n        range: '`#{value}` は範囲 `#{min} ~ #{max}` にありません',\n        positive: '`#{value}` は正の数ではありません',\n        negative: '`#{value}` は負の数ではありません',\n      },\n      array: {\n        length: '`#{value}` は #{length} と等しくありません',\n        minLength: '`#{value}` は少なくとも #{minLength}',\n        maxLength: '`#{value}`は最大 #{maxLength}',\n        includes: '#{value} には #{includes} は含まれません',\n        deepEqual: '#{value} は #{deepEqual} と等しくありません',\n        empty: '`#{value}` は空の配列ではありません',\n      },\n      string: {\n        minLength: '最小文字数は #{minLength}',\n        maxLength: '最大文字数は #{maxLength}',\n        length: '`#{value}` 文字数が #{length} と等しくありません',\n        match: '`#{value}` はパターン #{pattern} と一致しません',\n        uppercase: '`#{value}` はすべて大文字ではありません',\n        lowercase: '`#{value}` はすべて小文字ではありません',\n      },\n      object: {\n        deepEqual: '`#{value}`は#{deepEqual}と等しくありません',\n        hasKeys: '`#{value}` にはフィールド #{keys} が含まれていません',\n        empty: '`#{value}`はオブジェクトではありません',\n      },\n      boolean: {\n        true: '`true` であると期待します',\n        false: '`false` であると期待します',\n      },\n    },\n  },\n  colorPicker: {\n    history: '最近使用した色',\n    preset: 'システムのデフォルトの色',\n    empty: '空の',\n  },\n};\n\nexport default lang;\n"
  },
  {
    "path": "packages/web-vue/components/locale/lang/km-kh.ts",
    "content": "import { ArcoCalendarLang, ArcoLang } from '../interface';\n\nconst calendarLang: ArcoCalendarLang = {\n  formatYear: 'YYYY ឆ្នាំ',\n  formatMonth: 'YYYY ឆ្នាំ MM ខែ',\n  today: 'ថ្ងៃនេះ',\n  view: {\n    month: 'ខែ',\n    year: 'ឆ្នាំ',\n    week: 'សប្តាហ៍',\n    day: 'ថ្ងៃ',\n  },\n  month: {\n    long: {\n      January: 'មករា',\n      February: 'កុម្ភៈ',\n      March: 'មិនា',\n      April: 'មេសា',\n      May: 'ឧសភា',\n      June: 'មិថុនា',\n      July: 'កក្កដា',\n      August: 'សីហា',\n      September: 'កញ្ញា',\n      October: 'តុលា',\n      November: 'វិច្ឆិកា',\n      December: 'ធ្នូ',\n    },\n    short: {\n      January: 'មករា',\n      February: 'កុម្ភៈ',\n      March: 'មិនា',\n      April: 'មេសា',\n      May: 'ឧសភា',\n      June: 'មិថុនា',\n      July: 'កក្កដា',\n      August: 'សីហា',\n      September: 'កញ្ញា',\n      October: 'តុលា',\n      November: 'វិច្ឆិកា',\n      December: 'ធ្នូ',\n    },\n  },\n  week: {\n    long: {\n      self: 'សប្តាហ៍',\n      monday: 'ច័ន្ទ',\n      tuesday: 'អង្គារ',\n      wednesday: 'ពុធ',\n      thursday: 'ព្រហស្បតិ៍',\n      friday: 'សុក្រ',\n      saturday: 'សៅរ៍',\n      sunday: 'អាទិត្យ',\n    },\n    short: {\n      self: 'សប្តាហ៍',\n      monday: 'ច',\n      tuesday: 'អ',\n      wednesday: 'ព',\n      thursday: 'ព្រ',\n      friday: 'សុ',\n      saturday: 'ស',\n      sunday: 'អា',\n    },\n  },\n};\n\nconst lang: ArcoLang = {\n  locale: 'km-KH',\n  empty: {\n    description: 'គ្មាន​ទិន្នន័យ',\n  },\n  drawer: {\n    okText: 'យល់ព្រម',\n    cancelText: 'បោះបង់',\n  },\n  popconfirm: {\n    okText: 'យល់ព្រម',\n    cancelText: 'បោះបង់',\n  },\n  modal: {\n    okText: 'យល់ព្រម',\n    cancelText: 'បោះបង់',\n  },\n  pagination: {\n    goto: 'ទៅកាន់',\n    page: 'ទំព័រ',\n    countPerPage: ' / ទំព័រ',\n    total: 'សរុប {0}',\n  },\n  table: {\n    okText: 'យល់ព្រម',\n    resetText: 'កំណត់ឡើងវិញ',\n  },\n  upload: {\n    start: 'ចាប់ផ្តើម',\n    cancel: 'បោះបង់',\n    delete: 'លុប',\n    retry: 'ចុចដើម្បីព្យាយាមម្តងទៀត',\n    buttonText: 'ផ្ទុកឡើង',\n    preview: 'មើលជាមុន',\n    drag: 'ចុចឬអូសឯកសារមកកាន់តំបន់នេះដើម្បីផ្ទុកឡើង',\n    dragHover: 'លែងដើម្បីផ្ទុកឡើង',\n    error: 'កំហុសក្នុងការផ្ទុកឡើង',\n  },\n  calendar: calendarLang,\n  datePicker: {\n    view: calendarLang.view,\n    month: calendarLang.month,\n    week: calendarLang.week,\n    placeholder: {\n      date: 'ជ្រើសរើសកាលបរិច្ឆេទ',\n      week: 'ជ្រើសរើសសប្តាហ៍',\n      month: 'ជ្រើសរើសខែ',\n      year: 'ជ្រើសរើសឆ្នាំ',\n      quarter: 'ជ្រើសរើសត្រីមាស',\n      time: 'ជ្រើសរើសពេលវេលា',\n    },\n    rangePlaceholder: {\n      date: ['កាលបរិច្ឆេទចាប់ផ្តើម', 'កាលបរិច្ឆេទបញ្ចប់'],\n      week: ['សប្តាហ៍ចាប់ផ្តើម', 'សប្តាហ៍បញ្ចប់'],\n      month: ['ខែចាប់ផ្តើម', 'ខែបញ្ចប់'],\n      year: ['ឆ្នាំចាប់ផ្តើម', 'ឆ្នាំបញ្ចប់'],\n      quarter: ['ត្រីមាសចាប់ផ្តើម', 'ត្រីមាសបញ្ចប់'],\n      time: ['ពេលវេលាចាប់ផ្តើម', 'ពេលវេលាបញ្ចប់'],\n    },\n    selectTime: 'ជ្រើសរើសពេលវេលា',\n    today: 'ថ្ងៃនេះ',\n    now: 'ឥឡូវនេះ',\n    ok: 'យល់ព្រម',\n  },\n  image: {\n    loading: 'កំពុងដំណើរការ',\n  },\n  imagePreview: {\n    fullScreen: 'ពេញ​អេក្រង់',\n    rotateRight: 'បង្វិល​ទៅ​ស្ដាំ',\n    rotateLeft: 'បង្វិល​ទៅឆ្វេង',\n    zoomIn: 'ពង្រីក',\n    zoomOut: 'បង្រួម',\n    originalSize: 'ទំហំដើម',\n  },\n  typography: {\n    copied: 'បាន​ចម្លង',\n    copy: 'ចម្លង',\n    expand: 'ពង្រីក',\n    collapse: 'បង្រួម',\n    edit: 'កែសម្រួល',\n  },\n  colorPicker: {\n    history: 'ប្រវត្តិពណ៌',\n    preset: 'ពណ៌កំណត់ជាមុន',\n    empty: 'ទទេ',\n  },\n};\n\nexport default lang;\n"
  },
  {
    "path": "packages/web-vue/components/locale/lang/ko-kr.ts",
    "content": "import { ArcoCalendarLang, ArcoLang } from '../interface';\n\nconst calendarLang: ArcoCalendarLang = {\n  formatYear: 'YYYY',\n  formatMonth: 'MMM YYYY',\n  today: '요즘',\n  view: {\n    month: '달',\n    year: '년',\n    week: '주',\n    day: '일',\n  },\n  month: {\n    long: {\n      January: '일월',\n      February: '이월',\n      March: '행진',\n      April: '사월',\n      May: '오월',\n      June: '유월',\n      July: '칠월',\n      August: '팔월',\n      September: '구월',\n      October: '시월',\n      November: '십일월',\n      December: '십이월',\n    },\n    short: {\n      January: '일월',\n      February: '이월',\n      March: '행진',\n      April: '사월',\n      May: '오월',\n      June: '유월',\n      July: '칠월',\n      August: '팔월',\n      September: '구월',\n      October: '시월',\n      November: '십일월',\n      December: '십이월',\n    },\n  },\n  week: {\n    long: {\n      self: '주',\n      monday: '월요일',\n      tuesday: '화요일',\n      wednesday: '수요일',\n      thursday: '목요일',\n      friday: '금요일',\n      saturday: '토요일',\n      sunday: '일요일',\n    },\n    short: {\n      self: '주',\n      monday: '월',\n      tuesday: '화',\n      wednesday: '수',\n      thursday: '목',\n      friday: '금',\n      saturday: '토',\n      sunday: '일',\n    },\n  },\n};\n\nconst lang: ArcoLang = {\n  locale: 'ko-KR',\n  empty: {\n    description: '데이터 없음',\n  },\n  drawer: {\n    okText: '결정',\n    cancelText: '취소',\n  },\n  popconfirm: {\n    okText: '결정',\n    cancelText: '취소',\n  },\n  modal: {\n    okText: '결정',\n    cancelText: '취소',\n  },\n  pagination: {\n    goto: '이동',\n    page: '페이지',\n    countPerPage: '기입 / 페이지',\n    total: '총 {0}',\n  },\n  table: {\n    okText: '결정',\n    resetText: '초기화',\n  },\n  upload: {\n    start: '스타트',\n    cancel: '취소',\n    delete: '지우다',\n    retry: '다시 시도를 클릭',\n    buttonText: '클릭 업로드',\n    preview: '시사',\n    drag: '여기에서 업로드 할 파일을 클릭하거나 드래그하세요',\n    dragHover: '파일을 해제하고 업로드 시작',\n    error: '업로드 실패',\n  },\n  calendar: calendarLang,\n  datePicker: {\n    view: calendarLang.view,\n    month: calendarLang.month,\n    week: calendarLang.week,\n    placeholder: {\n      date: '날짜를 선택하세요',\n      week: '주를 선택하세요',\n      month: '달을 선택하세요',\n      year: '연도를 선택하세요',\n      quarter: '분기를 선택하세요',\n      time: '선택 기간',\n    },\n    rangePlaceholder: {\n      date: ['시작일', '종료일'],\n      week: ['주 시작', '주 종료'],\n      month: ['시작 월', '종료 월'],\n      year: ['시작 년도', '연말'],\n      quarter: ['분기 시작', '분기 종료'],\n      time: ['시작 시간', '종료 시간'],\n    },\n    selectTime: '선택 기간',\n    today: '요즘',\n    now: '지금',\n    ok: '결정',\n  },\n  image: {\n    loading: '로딩',\n  },\n  imagePreview: {\n    fullScreen: '전체 화면',\n    rotateRight: '오른쪽으로 회전',\n    rotateLeft: '왼쪽으로 회전',\n    zoomIn: '확대',\n    zoomOut: '축소',\n    originalSize: '원래 크기',\n  },\n  typography: {\n    copy: '복사',\n    copied: '복사 됨',\n    edit: '편집하다',\n    collapse: '겹',\n    expand: '전개 하 다',\n  },\n  colorPicker: {\n    history: '최근 색상 사용',\n    preset: '시스템 기본 색상',\n    empty: '데이터 없음',\n  },\n};\n\nexport default lang;\n"
  },
  {
    "path": "packages/web-vue/components/locale/lang/ms-my.ts",
    "content": "import { ArcoCalendarLang, ArcoLang } from '../interface';\n\nconst calendarLang: ArcoCalendarLang = {\n  formatYear: 'YYYY',\n  formatMonth: 'MMM YYYY',\n  today: 'hari ini',\n  view: {\n    month: 'bulan',\n    year: 'tahun',\n    week: 'minggu',\n    day: 'hari',\n  },\n  month: {\n    long: {\n      January: 'Januari',\n      February: 'Februari',\n      March: 'Mac',\n      April: 'April',\n      May: 'Mei',\n      June: 'Jun',\n      July: 'Julai',\n      August: 'Ogos',\n      September: 'September',\n      October: 'Oktober',\n      November: 'November',\n      December: 'Disember',\n    },\n    short: {\n      January: 'Jan',\n      February: 'Feb',\n      March: 'Mac',\n      April: 'Apr',\n      May: 'Mei',\n      June: 'Jun',\n      July: 'Jul',\n      August: 'Ogos',\n      September: 'Sept',\n      October: 'Okt',\n      November: 'Nov',\n      December: 'Dis',\n    },\n  },\n  week: {\n    long: {\n      self: 'Minggu',\n      monday: 'Isnin',\n      tuesday: 'Selasa',\n      wednesday: 'Rabu',\n      thursday: 'Khamis',\n      friday: 'Jumaat',\n      saturday: 'Sabtu',\n      sunday: 'Ahad',\n    },\n    short: {\n      self: 'Minggu',\n      monday: 'Isn',\n      tuesday: 'Sel',\n      wednesday: 'Rab',\n      thursday: 'Kha',\n      friday: 'Jum',\n      saturday: 'Sab',\n      sunday: 'Ahd',\n    },\n  },\n};\n\nconst lang: ArcoLang = {\n  locale: 'ms-MY',\n  empty: {\n    description: 'Tiada data',\n  },\n  drawer: {\n    okText: 'okey',\n    cancelText: 'batalkan',\n  },\n  popconfirm: {\n    okText: 'okey',\n    cancelText: 'batalkan',\n  },\n  modal: {\n    okText: 'okey',\n    cancelText: 'batalkan',\n  },\n  pagination: {\n    goto: 'pergi ke',\n    page: 'Halaman',\n    countPerPage: 'Artikel / Halaman',\n    total: 'Jumlah {0}',\n  },\n  table: {\n    okText: 'okey',\n    resetText: 'set semula',\n  },\n  upload: {\n    start: 'mulakan',\n    cancel: 'batalkan',\n    delete: 'padam',\n    retry: 'Klik untuk mencuba lagi',\n    buttonText: 'Klik untuk memuat naik',\n    preview: 'pratonton',\n    drag: 'Klik atau seret fail untuk memuat naik di sini',\n    dragHover: 'Kosongkan fail dan mula memuat naik',\n    error: 'muatnaik gagal',\n  },\n  calendar: calendarLang,\n  datePicker: {\n    view: calendarLang.view,\n    month: calendarLang.month,\n    week: calendarLang.week,\n    placeholder: {\n      date: 'Sila pilih tarikh',\n      week: 'Sila pilih seminggu',\n      month: 'Sila pilih bulan',\n      year: 'Sila pilih tahun',\n      quarter: 'Sila pilih suku',\n      time: 'Sila pilih masa',\n    },\n    rangePlaceholder: {\n      date: ['tarikh mula', 'tarikh tamat'],\n      week: ['minggu mula', 'hujung minggu'],\n      month: ['bulan permulaan', 'akhir bulan'],\n      year: ['tahun mula', 'akhir tahun'],\n      quarter: ['suku mula', 'akhir suku tahun'],\n      time: ['Masa mula', 'Masa tamat'],\n    },\n    selectTime: 'tempoh pemilihan',\n    today: 'hari ini',\n    now: 'sekarang',\n    ok: 'okey',\n  },\n  image: {\n    loading: 'memuatkan',\n  },\n  imagePreview: {\n    fullScreen: 'skrin penuh',\n    rotateRight: 'putar ke kanan',\n    rotateLeft: 'berputar ke kiri',\n    zoomIn: 'besarkan',\n    zoomOut: 'zum keluar',\n    originalSize: 'saiz asal',\n  },\n  typography: {\n    copy: 'salinan',\n    copied: 'disalin',\n    edit: 'edit',\n    expand: 'lipat',\n    collapse: 'mengembang',\n  },\n  colorPicker: {\n    history: 'Warna yang digunakan baru-baru ini',\n    preset: 'Warna lalai sistem',\n    empty: 'Tiada data',\n  },\n};\n\nexport default lang;\n"
  },
  {
    "path": "packages/web-vue/components/locale/lang/nl-nl.ts",
    "content": "import { ArcoCalendarLang, ArcoLang } from '../interface';\n\nconst calendarLang: ArcoCalendarLang = {\n  formatYear: 'YYYY',\n  formatMonth: 'MM-YYYY',\n  today: 'Vandaag',\n  view: {\n    month: 'Maand',\n    year: 'Jaar',\n    week: 'Week',\n    day: 'Dag',\n  },\n  month: {\n    long: {\n      January: 'januari',\n      February: 'februari',\n      March: 'maart',\n      April: 'april',\n      May: 'mei',\n      June: 'juni',\n      July: 'juli',\n      August: 'augustus',\n      September: 'september',\n      October: 'oktober',\n      November: 'november',\n      December: 'december',\n    },\n    short: {\n      January: 'jan',\n      February: 'feb',\n      March: 'mrt',\n      April: 'apr',\n      May: 'mei',\n      June: 'jun',\n      July: 'jul',\n      August: 'aug',\n      September: 'sep',\n      October: 'okt',\n      November: 'nov',\n      December: 'dec',\n    },\n  },\n  week: {\n    long: {\n      self: 'Week',\n      monday: 'maandag',\n      tuesday: 'dinsdag',\n      wednesday: 'woensdag',\n      thursday: 'donderdag',\n      friday: 'vrijdag',\n      saturday: 'zaterdag',\n      sunday: 'zondag',\n    },\n    short: {\n      self: 'Week',\n      monday: 'ma',\n      tuesday: 'di',\n      wednesday: 'woe',\n      thursday: 'do',\n      friday: 'vr',\n      saturday: 'za',\n      sunday: 'zo',\n    },\n  },\n};\n\nconst lang: ArcoLang = {\n  locale: 'nl-NL',\n  empty: {\n    description: 'Geen gegevens',\n  },\n  drawer: {\n    okText: 'OK',\n    cancelText: 'Annuleren',\n  },\n  popconfirm: {\n    okText: 'OK',\n    cancelText: 'Annuleren',\n  },\n  modal: {\n    okText: 'OK',\n    cancelText: 'Annuleren',\n  },\n  pagination: {\n    goto: 'Ga naar',\n    page: 'pagina',\n    countPerPage: '/ pagina',\n    total: 'Totaal: {0}',\n  },\n  table: {\n    okText: 'OK',\n    resetText: 'Resetten',\n  },\n  upload: {\n    start: 'Start',\n    cancel: 'Annuleren',\n    delete: 'Verwijderen',\n    retry: 'Opnieuw proberen',\n    buttonText: 'Klik om te uploaden',\n    preview: 'Voorbeeld',\n    drag: 'Sleep bestanden naar hier om te uploaden',\n    dragHover: 'Laat los om te uploaden',\n    error: 'Upload mislukt',\n  },\n  calendar: calendarLang,\n  datePicker: {\n    view: calendarLang.view,\n    month: calendarLang.month,\n    week: calendarLang.week,\n    placeholder: {\n      date: 'Selecteer datum',\n      week: 'Selecteer week',\n      month: 'Selecteer maand',\n      year: 'Selecteer jaar',\n      quarter: 'Selecteer kwartaal',\n      time: 'Selecteer tijd',\n    },\n    rangePlaceholder: {\n      date: ['Startdatum', 'Einddatum'],\n      week: ['Startweek', 'Eindweek'],\n      month: ['Startmaand', 'Eindmaand'],\n      year: ['Startjaar', 'Eindjaar'],\n      quarter: ['Startkwartaal', 'Eindkwartaal'],\n      time: ['Starttijd', 'Eindtijd'],\n    },\n    selectTime: 'Selecteer tijd',\n    today: 'Vandaag',\n    now: 'Nu',\n    ok: 'OK',\n  },\n  image: {\n    loading: 'Laden',\n  },\n  imagePreview: {\n    fullScreen: 'Volledig scherm',\n    rotateRight: 'Draai rechtsom',\n    rotateLeft: 'Draai linksom',\n    zoomIn: 'Inzoomen',\n    zoomOut: 'Uitzoomen',\n    originalSize: 'Originele grootte',\n  },\n  typography: {\n    copied: 'Gekopieerd',\n    copy: 'Kopiëren',\n    expand: 'Uitklappen',\n    collapse: 'Inklappen',\n    edit: 'Bewerken',\n  },\n  form: {\n    validateMessages: {\n      required: '#{field} is verplicht',\n      type: {\n        string: '#{field} is geen geldige tekst',\n        number: '#{field} is geen geldig nummer',\n        boolean: '#{field} is geen geldige boolean',\n        array: '#{field} is geen geldige array',\n        object: '#{field} is geen geldig object',\n        url: '#{field} is geen geldige URL',\n        email: '#{field} is geen geldig e-mailadres',\n        ip: '#{field} is geen geldig IP-adres',\n      },\n      number: {\n        min: '#{value} is kleiner dan minimum #{min}',\n        max: '#{value} is groter dan maximum #{max}',\n        equal: '#{value} is niet gelijk aan #{equal}',\n        range: '#{value} valt niet binnen #{min} ~ #{max}',\n        positive: '#{value} is geen positief getal',\n        negative: '#{value} is geen negatief getal',\n      },\n      array: {\n        length: '#{field} heeft niet #{length} items',\n        minLength: '#{field} heeft minimaal #{minLength} items nodig',\n        maxLength: '#{field} heeft maximaal #{maxLength} items',\n        includes: '#{field} bevat niet #{includes}',\n        deepEqual: '#{field} is niet gelijk aan #{deepEqual}',\n        empty: '#{field} is geen lege array',\n      },\n      string: {\n        minLength: 'Minimaal #{minLength} tekens',\n        maxLength: 'Maximaal #{maxLength} tekens',\n        length: 'Moet #{length} tekens bevatten',\n        match: '#{value} voldoet niet aan patroon #{pattern}',\n        uppercase: '#{value} moet volledig hoofdletters zijn',\n        lowercase: '#{value} moet volledig kleine letters zijn',\n      },\n      object: {\n        deepEqual: '#{field} is niet gelijk aan verwachte waarde',\n        hasKeys: '#{field} mist verplichte velden',\n        empty: '#{field} is geen object',\n      },\n      boolean: {\n        true: 'Moet true zijn',\n        false: 'Moet false zijn',\n      },\n    },\n  },\n  colorPicker: {\n    history: 'Recent gebruikte kleuren',\n    preset: 'Systeem kleuren',\n    empty: 'Geen',\n  },\n};\n\nexport default lang;\n"
  },
  {
    "path": "packages/web-vue/components/locale/lang/pt-pt.ts",
    "content": "import { ArcoCalendarLang, ArcoLang } from '../interface';\n\nconst calendarLang: ArcoCalendarLang = {\n  formatYear: 'YYYY',\n  formatMonth: 'MM/YYYY',\n  today: 'Hoje',\n  view: {\n    month: 'Mês',\n    year: 'Ano',\n    week: 'Semana',\n    day: 'Dia',\n  },\n  month: {\n    long: {\n      January: 'Janeiro',\n      February: 'Fevereiro',\n      March: 'Março',\n      April: 'Abril',\n      May: 'Maio',\n      June: 'Junho',\n      July: 'Julho',\n      August: 'Agosto',\n      September: 'Setembro',\n      October: 'Outubro',\n      November: 'Novembro',\n      December: 'Dezembro',\n    },\n    short: {\n      January: 'Jan',\n      February: 'Fev',\n      March: 'Mar',\n      April: 'Abr',\n      May: 'Mai',\n      June: 'Jun',\n      July: 'Jul',\n      August: 'Ago',\n      September: 'Set',\n      October: 'Out',\n      November: 'Nov',\n      December: 'Dez',\n    },\n  },\n  week: {\n    long: {\n      self: 'Semana',\n      monday: 'Segunda-feira',\n      tuesday: 'Terça-feira',\n      wednesday: 'Quarta-feira',\n      thursday: 'Quinta-feira',\n      friday: 'Sexta-feira',\n      saturday: 'Sábado',\n      sunday: 'Domingo',\n    },\n    short: {\n      self: 'Semana',\n      monday: 'Seg',\n      tuesday: 'Ter',\n      wednesday: 'Qua',\n      thursday: 'Qui',\n      friday: 'Sex',\n      saturday: 'Sáb',\n      sunday: 'Dom',\n    },\n  },\n};\n\nconst lang: ArcoLang = {\n  locale: 'pt-PT',\n  empty: {\n    description: 'Sem dados',\n  },\n  drawer: {\n    okText: 'Ok',\n    cancelText: 'Cancelar',\n  },\n  popconfirm: {\n    okText: 'Ok',\n    cancelText: 'Cancelar',\n  },\n  modal: {\n    okText: 'Ok',\n    cancelText: 'Cancelar',\n  },\n  pagination: {\n    goto: 'Vamos para',\n    page: 'Página',\n    countPerPage: ' / Página',\n    total: 'Total: {0}',\n  },\n  table: {\n    okText: 'Ok',\n    resetText: 'Redefinir',\n  },\n  upload: {\n    start: 'Iniciar',\n    cancel: 'Cancelar',\n    delete: 'Excluir',\n    retry: 'Clique para tentar novamente',\n    buttonText: 'Carregar',\n    preview: 'Visualizar',\n    drag: 'Clique ou arraste o arquivo para esta área para fazer upload',\n    dragHover: 'Liberar para fazer upload',\n    error: 'Erro ao carregar',\n  },\n  calendar: calendarLang,\n  datePicker: {\n    view: calendarLang.view,\n    month: calendarLang.month,\n    week: calendarLang.week,\n    placeholder: {\n      date: 'Por favor, selecione a data',\n      week: 'Por favor, selecione a semana',\n      month: 'Por favor, selecione o mês',\n      year: 'Por favor, selecione o ano',\n      quarter: 'Por favor, selecione trimestre',\n      time: 'Por favor, selecione horário',\n    },\n    rangePlaceholder: {\n      date: ['Data de início', 'Data de término'],\n      week: ['Início da semana', 'Fim da semana'],\n      month: ['Mês inicial', 'Mês final'],\n      year: ['Ano inicial', 'Ano final'],\n      quarter: ['Início do trimestre', 'Fim do trimestre'],\n      time: ['Hora de inicio', 'Hora de fim'],\n    },\n    selectTime: 'Selecione a hora',\n    today: 'Hoje',\n    now: 'Agora',\n    ok: 'Ok',\n  },\n  image: {\n    loading: 'A carregar',\n  },\n  imagePreview: {\n    fullScreen: 'Tela Cheia',\n    rotateRight: 'Girar para a direita',\n    rotateLeft: 'Girar para a esquerda',\n    zoomIn: 'Ampliar',\n    zoomOut: 'Afastar',\n    originalSize: 'Tamanho original',\n  },\n  typography: {\n    copied: 'Copiado',\n    copy: 'Copiar',\n    expand: 'Desdobrar',\n    collapse: 'dobrar',\n    edit: 'Editar',\n  },\n  colorPicker: {\n    history: 'Cores usadas recentemente',\n    preset: 'Cor padrão do sistema',\n    empty: 'Sem dados',\n  },\n};\n\nexport default lang;\n"
  },
  {
    "path": "packages/web-vue/components/locale/lang/ru-ru.ts",
    "content": "import { ArcoCalendarLang, ArcoLang } from '../interface';\n\nconst calendarLang: ArcoCalendarLang = {\n  formatYear: 'YYYY',\n  formatMonth: 'MM/YYYY',\n  today: 'Cегодня',\n  view: {\n    month: 'месяц',\n    year: 'год',\n    week: 'Неделя',\n    day: 'день',\n  },\n  month: {\n    long: {\n      January: 'января',\n      February: 'февраля',\n      March: 'марта',\n      April: 'апреля',\n      May: 'мая',\n      June: 'июня',\n      July: 'июля',\n      August: 'августа',\n      September: 'сентября',\n      October: 'октября',\n      November: 'ноября',\n      December: 'декабря',\n    },\n    short: {\n      January: 'янв',\n      February: 'фев',\n      March: 'мар',\n      April: 'апр',\n      May: 'май',\n      June: 'июн',\n      July: 'июл',\n      August: 'авг',\n      September: 'сен',\n      October: 'окт',\n      November: 'ноя',\n      December: 'дек',\n    },\n  },\n  week: {\n    long: {\n      self: 'Неделя',\n      monday: 'понедельник',\n      tuesday: 'вторник',\n      wednesday: 'среда',\n      thursday: 'четверг',\n      friday: 'пятница',\n      saturday: 'суббота',\n      sunday: 'воскресенье',\n    },\n    short: {\n      self: 'Неделя',\n      monday: 'Пн',\n      tuesday: 'Вт',\n      wednesday: 'Ср',\n      thursday: 'Чт',\n      friday: 'Пт',\n      saturday: 'Сб',\n      sunday: 'Вс',\n    },\n  },\n};\n\nconst lang: ArcoLang = {\n  locale: 'ru-RU',\n  empty: {\n    description: 'нет данных',\n  },\n  drawer: {\n    okText: 'OK',\n    cancelText: 'Отмена',\n  },\n  popconfirm: {\n    okText: 'OK',\n    cancelText: 'Отмена',\n  },\n  modal: {\n    okText: 'OK',\n    cancelText: 'Отмена',\n  },\n  pagination: {\n    goto: 'Перейти',\n    page: 'Страница',\n    countPerPage: '/ стр.',\n    total: 'Всего {0}',\n  },\n  table: {\n    okText: 'OK',\n    resetText: 'перезагрузить',\n  },\n  upload: {\n    start: 'Начало',\n    cancel: 'Отмена',\n    delete: 'Удалить',\n    retry: 'Нажмите, чтобы повторить попытку',\n    buttonText: 'Нажмите, чтобы загрузить',\n    preview: 'предварительный просмотр',\n    drag: 'Нажмите или перетащите файлы, чтобы загрузить их сюда',\n    dragHover: 'Освободите файл и начните загрузку',\n    error: 'Загрузка не удалась',\n  },\n  calendar: calendarLang,\n  datePicker: {\n    view: calendarLang.view,\n    month: calendarLang.month,\n    week: calendarLang.week,\n    placeholder: {\n      date: 'Пожалуйста, выберите дату',\n      week: 'Пожалуйста, выберите неделю',\n      month: 'Выберите месяц',\n      year: 'Пожалуйста, выберите год',\n      quarter: 'Выберите квартал',\n      time: 'Пожалуйста, выберите время',\n    },\n    rangePlaceholder: {\n      date: ['Дата начала', 'Дата окончания'],\n      week: ['начальная неделя', 'конец недели'],\n      month: ['месяц начала', 'конец месяца'],\n      year: ['год начала', 'конец года'],\n      quarter: ['стартовая четверть', 'конец квартала'],\n      time: ['время начала', 'время окончания'],\n    },\n    selectTime: 'Выберите время',\n    today: 'Cегодня',\n    now: 'В настоящее время',\n    ok: 'OK',\n  },\n  image: {\n    loading: 'Загрузка',\n  },\n  imagePreview: {\n    fullScreen: 'полноэкранный',\n    rotateRight: 'повернуть вправо',\n    rotateLeft: 'повернуть влево',\n    zoomIn: 'увеличить',\n    zoomOut: 'уменьшить',\n    originalSize: 'оригинальный размер',\n  },\n  typography: {\n    copied: 'скопировано',\n    copy: 'копировать',\n    expand: 'расширять',\n    collapse: 'складывать',\n    edit: 'редактировать',\n  },\n  form: {\n    validateMessages: {\n      required: '#{field} обязательно для заполнения',\n      type: {\n        string: '#{field} должно быть строкой',\n        number: '#{field} должно быть числом',\n        boolean: '#{field} должно быть булевым значением (true/false)',\n        array: '#{field} должно быть массивом',\n        object: '#{field} должно быть объектом',\n        url: '#{field} должно быть правильным URL-адресом',\n        email: '#{field} должно быть корректным email-адресом',\n        ip: '#{field} должно быть правильным IP-адресом',\n      },\n      number: {\n        min: 'Значение #{value} меньше допустимого минимального значения #{min}',\n        max: 'Значение #{value} больше допустимого максимального значения #{max}',\n        equal: 'Значение должно быть равно #{equal}',\n        range: 'Значение должно быть в диапазоне от #{min} до #{max}',\n        positive: 'Значение должно быть положительным числом',\n        negative: 'Значение должно быть отрицательным числом',\n      },\n      array: {\n        length: 'В #{field} должно быть #{length} элементов',\n        minLength: 'Минимум #{minLength} элементов в #{field}',\n        maxLength: 'Максимум #{maxLength} элементов в #{field}',\n        includes: '#{field} должно содержать #{includes}',\n        deepEqual: '#{field} не соответствует ожидаемому значению',\n        empty: '#{field} не должно быть пустым',\n      },\n      string: {\n        minLength: '`#{field}` должно содержать не менее #{minLength} символов',\n        maxLength: '`#{field}` должно содержать не более #{maxLength} символов',\n        length: 'Длина строки в #{field} должна быть ровно #{length} символов',\n        match: 'Значение в #{field} не соответствует требуемому формату',\n        uppercase: 'Значение в #{field} должно быть в верхнем регистре',\n        lowercase: 'Значение в #{field} должно быть в нижнем регистре',\n      },\n      object: {\n        deepEqual: 'Значение в #{field} не совпадает с ожидаемым',\n        hasKeys: 'В #{field} должны быть необходимые ключи',\n        empty: '#{field} не должно быть пустым объектом',\n      },\n      boolean: {\n        true: 'Значение должно быть true',\n        false: 'Значение должно быть false',\n      },\n    },\n  },\n  colorPicker: {\n    history: 'Недавно использованные цвета',\n    preset: 'Цвет системы по умолчанию',\n    empty: 'нет данных',\n  },\n};\n\nexport default lang;\n"
  },
  {
    "path": "packages/web-vue/components/locale/lang/th-th.ts",
    "content": "import { ArcoCalendarLang, ArcoLang } from '../interface';\n\nconst calendarLang: ArcoCalendarLang = {\n  formatYear: 'YYYY',\n  formatMonth: 'MMM YYYY',\n  today: 'วันนี้',\n  view: {\n    month: 'เดือน',\n    year: 'ปี',\n    week: 'สัปดาห์',\n    day: 'วัน',\n  },\n  month: {\n    long: {\n      January: 'มกราคม',\n      February: 'กุมภาพันธ์',\n      March: 'มีนาคม',\n      April: 'เมษายน',\n      May: 'อาจ',\n      June: 'มิถุนายน',\n      July: 'กรกฎาคม',\n      August: 'สิงหาคม',\n      September: 'กันยายน',\n      October: 'ตุลาคม',\n      November: 'พฤศจิกายน',\n      December: 'ธันวาคม',\n    },\n    short: {\n      January: 'Jan',\n      February: 'Feb',\n      March: 'Mar',\n      April: 'Apr',\n      May: 'May',\n      June: 'Jun',\n      July: 'Jul',\n      August: 'Aug',\n      September: 'Sept',\n      October: 'Oct',\n      November: 'Nov',\n      December: 'Dec',\n    },\n  },\n  week: {\n    long: {\n      self: 'สัปดาห์',\n      monday: 'วันจันทร์',\n      tuesday: 'วันอังคาร',\n      wednesday: 'วันพุธ',\n      thursday: 'วันพฤหัสบดี',\n      friday: 'วันศุกร์',\n      saturday: 'วันเสาร์',\n      sunday: 'วันอาทิตย์',\n    },\n    short: {\n      self: 'สัปดาห์',\n      monday: 'Mon',\n      tuesday: 'Tue',\n      wednesday: 'Wed',\n      thursday: 'Thu',\n      friday: 'Fri',\n      saturday: 'Sat',\n      sunday: 'Sun',\n    },\n  },\n};\n\nconst lang: ArcoLang = {\n  locale: 'th-TH',\n  empty: {\n    description: 'ไม่มีข้อมูล',\n  },\n  drawer: {\n    okText: 'ตกลง',\n    cancelText: 'ยกเลิก',\n  },\n  popconfirm: {\n    okText: 'ตกลง',\n    cancelText: 'ยกเลิก',\n  },\n  modal: {\n    okText: 'ตกลง',\n    cancelText: 'ยกเลิก',\n  },\n  pagination: {\n    goto: 'ไปที่',\n    page: 'หน้า',\n    countPerPage: ' / หน้า',\n    total: 'รวม: {0}',\n  },\n  table: {\n    okText: 'ตกลง',\n    resetText: 'รีเซ็ต',\n  },\n  upload: {\n    start: 'เริ่ม',\n    cancel: 'ยกเลิก',\n    delete: 'ลบ',\n    retry: 'คลิกเพื่อลองอีกครั้ง',\n    buttonText: 'ที่อัพโหลด',\n    preview: 'ดูตัวอย่าง',\n    drag: 'คลิกหรือลากไฟล์ไปยังพื้นที่นี้เพื่ออัปโหลด',\n    dragHover: 'ปล่อยเพื่ออัปโหลด',\n    error: 'ข้อผิดพลาดในการอัปโหลด',\n  },\n  calendar: calendarLang,\n  datePicker: {\n    view: calendarLang.view,\n    month: calendarLang.month,\n    week: calendarLang.week,\n    placeholder: {\n      date: 'โปรดเลือกวันที่',\n      week: 'โปรดเลือกสัปดาห์',\n      month: 'โปรดเลือกเดือน',\n      year: 'โปรดเลือกปี',\n      quarter: 'โปรดเลือกไตรมาส',\n      time: 'เลือกเวลา',\n    },\n    rangePlaceholder: {\n      date: ['วันที่เริ่มต้น', 'วันที่สิ้นสุด'],\n      week: ['เริ่มต้นสัปดาห์', 'สิ้นสุดสัปดาห์'],\n      month: ['เริ่มเดือน', 'สิ้นเดือน'],\n      year: ['เริ่มต้นปี', 'สิ้นปี'],\n      quarter: ['เริ่มไตรมาส', 'สิ้นไตรมาส'],\n      time: ['เวลาเริ่มต้น', 'เวลาสิ้นสุด'],\n    },\n    selectTime: 'เลือกเวลา',\n    today: 'วันนี้',\n    now: 'ตอนนี้',\n    ok: 'ตกลง',\n  },\n  image: {\n    loading: 'กำลังโหลด',\n  },\n  imagePreview: {\n    fullScreen: 'เต็มจอ',\n    rotateRight: 'หมุนไปทางขวา',\n    rotateLeft: 'หมุนซ้าย',\n    zoomIn: 'ขยายเข้า',\n    zoomOut: 'ซูมออก',\n    originalSize: 'ขนาดต้นฉบับ',\n  },\n  typography: {\n    copy: 'สำเนา',\n    copied: 'คัดลอกแล้ว',\n    edit: 'แก้ไข',\n    collapse: 'พับ',\n    expand: 'แฉ',\n  },\n  colorPicker: {\n    history: 'สีที่ใช้ล่าสุด',\n    preset: 'สี ที่ตั้งไว้สำหรับระบบ',\n    empty: 'ไม่มีข้อมูล',\n  },\n};\n\nexport default lang;\n"
  },
  {
    "path": "packages/web-vue/components/locale/lang/vi-vn.ts",
    "content": "import { ArcoCalendarLang, ArcoLang } from '../interface';\n\nconst calendarLang: ArcoCalendarLang = {\n  formatYear: 'YYYY',\n  formatMonth: 'MMMM YYYY',\n  today: 'Hôm nay',\n  view: {\n    month: 'Tháng',\n    year: 'Năm',\n    week: 'Tuần',\n    day: 'Ngày',\n  },\n  month: {\n    long: {\n      January: 'Tháng Một',\n      February: 'Tháng Hai',\n      March: 'Tháng Ba',\n      April: 'Tháng Tư',\n      May: 'Tháng Năm',\n      June: 'Tháng Sáu',\n      July: 'Tháng Bảy',\n      August: 'Tháng Tám',\n      September: 'Tháng Chín',\n      October: 'Tháng Mười',\n      November: 'Tháng Mười Một',\n      December: 'Tháng Mười Hai',\n    },\n    short: {\n      January: 'Thg1',\n      February: 'Thg2',\n      March: 'Thg3',\n      April: 'Thg4',\n      May: 'Thg5',\n      June: 'Thg6',\n      July: 'Thg7',\n      August: 'Thg8',\n      September: 'Thg9',\n      October: 'Thg10',\n      November: 'Thg11',\n      December: 'Thg12',\n    },\n  },\n  week: {\n    long: {\n      self: 'Tuần',\n      monday: 'Thứ Hai',\n      tuesday: 'Thứ Ba',\n      wednesday: 'Thứ Tư',\n      thursday: 'Thứ Năm',\n      friday: 'Thứ Sáu',\n      saturday: 'Thứ Bảy',\n      sunday: 'Chủ Nhật',\n    },\n    short: {\n      self: 'Tuần',\n      monday: 'T2',\n      tuesday: 'T3',\n      wednesday: 'Tư',\n      thursday: 'Năm',\n      friday: 'Sáu',\n      saturday: 'Bảy',\n      sunday: 'CN',\n    },\n  },\n};\n\nconst lang: ArcoLang = {\n  locale: 'vi-VN',\n  empty: {\n    description: 'Không có dữ liệu',\n  },\n  drawer: {\n    okText: 'Đồng ý',\n    cancelText: 'Hủy bỏ',\n  },\n  popconfirm: {\n    okText: 'Đồng ý',\n    cancelText: 'Hủy bỏ',\n  },\n  modal: {\n    okText: 'Đồng ý',\n    cancelText: 'Hủy bỏ',\n  },\n  pagination: {\n    goto: 'Đi tới',\n    page: 'Trang',\n    countPerPage: 'sản phẩm/trang',\n    total: 'Tổng số {0}',\n  },\n  table: {\n    okText: 'Đồng ý',\n    resetText: 'Thiết lập lại',\n  },\n  upload: {\n    start: 'Bắt đầu',\n    cancel: 'Hủy bỏ',\n    delete: 'Xóa bỏ',\n    retry: 'Nhấp để thử lại',\n    buttonText: 'Nhấp để tải lên',\n    preview: 'Xem trước',\n    drag: 'Nhấp hoặc kéo thả tập tin vào đây để tải lên',\n    dragHover: 'Thả tập tin và bắt đầu tải lên',\n    error: 'Lỗi tải lên',\n  },\n  calendar: calendarLang,\n  datePicker: {\n    view: calendarLang.view,\n    month: calendarLang.month,\n    week: calendarLang.week,\n    placeholder: {\n      date: 'Vui lòng chọn một ngày',\n      week: 'Vui lòng chọn một tuần',\n      month: 'Vui lòng chọn một tháng',\n      year: 'Vui lòng chọn một năm',\n      quarter: 'Vui lòng chọn một phần tư',\n      time: 'Vui lòng chọn một',\n    },\n    rangePlaceholder: {\n      date: ['Ngày bắt đầu', 'Ngày kết thúc'],\n      week: ['Tuần bắt đầu', 'Tuần kết thúc'],\n      month: ['Tháng bắt đầu', 'Tháng kết thúc'],\n      year: ['Năm bắt đầu', 'Năm kết thúc'],\n      quarter: ['Quý bắt đầu', 'Quý kết thúc'],\n      time: ['Giờ bắt đầu', 'Giờ kết thúc'],\n    },\n    selectTime: 'Vui lòng chọn thời gian',\n    today: 'Hôm nay',\n    now: 'Bây giờ',\n    ok: 'Đồng ý',\n  },\n  image: {\n    loading: 'Đang tải',\n  },\n  imagePreview: {\n    fullScreen: 'Toàn màn hình',\n    rotateRight: 'Xoay sang phải',\n    rotateLeft: 'Xoay sang trái',\n    zoomIn: 'Phóng to',\n    zoomOut: 'Thu nhỏ',\n    originalSize: 'Kích thước gốc',\n  },\n  typography: {\n    copied: 'Đã sao chép',\n    copy: 'Sao chép',\n    expand: 'Mở rộng',\n    collapse: 'Thu gọn',\n    edit: 'Chỉnh sửa',\n  },\n  colorPicker: {\n    history: 'Màu sắc được sử dụng gần đây',\n    preset: 'Màu mặc định của hệ thống',\n    empty: 'Không có dữ liệu',\n  },\n};\n\nexport default lang;\n"
  },
  {
    "path": "packages/web-vue/components/locale/lang/zh-cn.ts",
    "content": "import { ArcoCalendarLang, ArcoLang } from '../interface';\n\nconst calendarLang: ArcoCalendarLang = {\n  formatYear: 'YYYY 年',\n  formatMonth: 'YYYY 年 MM 月',\n  today: '今天',\n  view: {\n    month: '月',\n    year: '年',\n    week: '周',\n    day: '日',\n  },\n  month: {\n    long: {\n      January: '一月',\n      February: '二月',\n      March: '三月',\n      April: '四月',\n      May: '五月',\n      June: '六月',\n      July: '七月',\n      August: '八月',\n      September: '九月',\n      October: '十月',\n      November: '十一月',\n      December: '十二月',\n    },\n    short: {\n      January: '一月',\n      February: '二月',\n      March: '三月',\n      April: '四月',\n      May: '五月',\n      June: '六月',\n      July: '七月',\n      August: '八月',\n      September: '九月',\n      October: '十月',\n      November: '十一月',\n      December: '十二月',\n    },\n  },\n  week: {\n    long: {\n      self: '周',\n      monday: '周一',\n      tuesday: '周二',\n      wednesday: '周三',\n      thursday: '周四',\n      friday: '周五',\n      saturday: '周六',\n      sunday: '周日',\n    },\n    short: {\n      self: '周',\n      monday: '一',\n      tuesday: '二',\n      wednesday: '三',\n      thursday: '四',\n      friday: '五',\n      saturday: '六',\n      sunday: '日',\n    },\n  },\n};\n\nconst lang: ArcoLang = {\n  locale: 'zh-CN',\n  empty: {\n    description: '暂无数据',\n  },\n  drawer: {\n    okText: '确定',\n    cancelText: '取消',\n  },\n  popconfirm: {\n    okText: '确定',\n    cancelText: '取消',\n  },\n  modal: {\n    okText: '确定',\n    cancelText: '取消',\n  },\n  pagination: {\n    goto: '前往',\n    page: '页',\n    countPerPage: '条/页',\n    total: '共 {0} 条',\n  },\n  table: {\n    okText: '确定',\n    resetText: '重置',\n  },\n  upload: {\n    start: '开始',\n    cancel: '取消',\n    delete: '删除',\n    retry: '点击重试',\n    buttonText: '点击上传',\n    preview: '预览',\n    drag: '点击或拖拽文件到此处上传',\n    dragHover: '释放文件并开始上传',\n    error: '上传失败',\n  },\n  calendar: calendarLang,\n  datePicker: {\n    view: calendarLang.view,\n    month: calendarLang.month,\n    week: calendarLang.week,\n    placeholder: {\n      date: '请选择日期',\n      week: '请选择周',\n      month: '请选择月份',\n      year: '请选择年份',\n      quarter: '请选择季度',\n      time: '请选择时间',\n    },\n    rangePlaceholder: {\n      date: ['开始日期', '结束日期'],\n      week: ['开始周', '结束周'],\n      month: ['开始月份', '结束月份'],\n      year: ['开始年份', '结束年份'],\n      quarter: ['开始季度', '结束季度'],\n      time: ['开始时间', '结束时间'],\n    },\n    selectTime: '选择时间',\n    today: '今天',\n    now: '此刻',\n    ok: '确定',\n  },\n  image: {\n    loading: '加载中',\n  },\n  imagePreview: {\n    fullScreen: '全屏',\n    rotateRight: '向右旋转',\n    rotateLeft: '向左旋转',\n    zoomIn: '放大',\n    zoomOut: '缩小',\n    originalSize: '原始尺寸',\n  },\n  typography: {\n    copied: '已复制',\n    copy: '复制',\n    expand: '展开',\n    collapse: '折叠',\n    edit: '编辑',\n  },\n  form: {\n    validateMessages: {\n      required: '#{field} 是必填项',\n      type: {\n        string: '#{field} 不是合法的文本类型',\n        number: '#{field} 不是合法的数字类型',\n        boolean: '#{field} 不是合法的布尔类型',\n        array: '#{field} 不是合法的数组类型',\n        object: '#{field} 不是合法的对象类型',\n        url: '#{field} 不是合法的 url 地址',\n        email: '#{field} 不是合法的邮箱地址',\n        ip: '#{field} 不是合法的 IP 地址',\n      },\n      number: {\n        min: '`#{value}` 小于最小值 `#{min}`',\n        max: '`#{value}` 大于最大值 `#{max}`',\n        equal: '`#{value}` 不等于 `#{equal}`',\n        range: '`#{value}` 不在 `#{min} ~ #{max}` 范围内',\n        positive: '`#{value}` 不是正数',\n        negative: '`#{value}` 不是负数',\n      },\n      array: {\n        length: '`#{field}` 个数不等于 #{length}',\n        minLength: '`#{field}` 个数最少为 #{minLength}',\n        maxLength: '`#{field}` 个数最多为 #{maxLength}',\n        includes: '#{field} 不包含 #{includes}',\n        deepEqual: '#{field} 不等于 #{deepEqual}',\n        empty: '`#{field}` 不是空数组',\n      },\n      string: {\n        minLength: '字符数最少为 #{minLength}',\n        maxLength: '字符数最多为 #{maxLength}',\n        length: '字符数必须是 #{length}',\n        match: '`#{value}` 不符合模式 #{pattern}',\n        uppercase: '`#{value}` 必须全大写',\n        lowercase: '`#{value}` 必须全小写',\n      },\n      object: {\n        deepEqual: '`#{field}` 不等于期望值',\n        hasKeys: '`#{field}` 不包含必须字段',\n        empty: '`#{field}` 不是对象',\n      },\n      boolean: {\n        true: '期望是 `true`',\n        false: '期望是 `false`',\n      },\n    },\n  },\n  colorPicker: {\n    history: '最近使用颜色',\n    preset: '系统预设颜色',\n    empty: '暂无',\n  },\n};\n\nexport default lang;\n"
  },
  {
    "path": "packages/web-vue/components/locale/lang/zh-tw.ts",
    "content": "import { ArcoCalendarLang, ArcoLang } from '../interface';\n\nconst calendarLang: ArcoCalendarLang = {\n  formatYear: 'YYYY 年',\n  formatMonth: 'YYYY 年 MM 月',\n  today: '今天',\n  view: {\n    month: '月',\n    year: '年',\n    week: '周',\n    day: '日',\n  },\n  month: {\n    long: {\n      January: '一月',\n      February: '二月',\n      March: '三月',\n      April: '四月',\n      May: '五月',\n      June: '六月',\n      July: '七月',\n      August: '八月',\n      September: '九月',\n      October: '十月',\n      November: '十一月',\n      December: '十二月',\n    },\n    short: {\n      January: '一月',\n      February: '二月',\n      March: '三月',\n      April: '四月',\n      May: '五月',\n      June: '六月',\n      July: '七月',\n      August: '八月',\n      September: '九月',\n      October: '十月',\n      November: '十一月',\n      December: '十二月',\n    },\n  },\n  week: {\n    long: {\n      self: '周',\n      monday: '周一',\n      tuesday: '周二',\n      wednesday: '周三',\n      thursday: '周四',\n      friday: '周五',\n      saturday: '周六',\n      sunday: '周日',\n    },\n    short: {\n      self: '周',\n      monday: '一',\n      tuesday: '二',\n      wednesday: '三',\n      thursday: '四',\n      friday: '五',\n      saturday: '六',\n      sunday: '日',\n    },\n  },\n};\n\nconst lang: ArcoLang = {\n  locale: 'zh-TW',\n  empty: {\n    description: '無資料',\n  },\n  drawer: {\n    okText: '確認',\n    cancelText: '取消',\n  },\n  popconfirm: {\n    okText: '確認',\n    cancelText: '取消',\n  },\n  modal: {\n    okText: '確認',\n    cancelText: '取消',\n  },\n  pagination: {\n    goto: '前往',\n    page: '頁',\n    countPerPage: '項/頁',\n    total: '共 {0} 項',\n  },\n  table: {\n    okText: '確認',\n    resetText: '重置',\n  },\n  upload: {\n    start: '開始',\n    cancel: '取消',\n    delete: '删除',\n    retry: '點擊重試',\n    buttonText: '點擊上傳',\n    preview: '預覽',\n    drag: '點擊或拖拽文件到此處上傳',\n    dragHover: '釋放文件並開始上傳',\n    error: '上傳失敗',\n  },\n  calendar: calendarLang,\n  datePicker: {\n    view: calendarLang.view,\n    month: calendarLang.month,\n    week: calendarLang.week,\n    placeholder: {\n      date: '請選擇日期',\n      week: '請選擇周',\n      month: '請選擇月份',\n      year: '請選擇年份',\n      quarter: '請選擇季度',\n      time: '請選擇時間',\n    },\n    rangePlaceholder: {\n      date: ['開始日期', '結束日期'],\n      week: ['開始周', '結束周'],\n      month: ['開始月份', '結束月份'],\n      year: ['開始年份', '結束年份'],\n      quarter: ['開始季度', '結束季度'],\n      time: ['開始時間', '結束時間'],\n    },\n    selectTime: '選擇時間',\n    today: '今天',\n    now: '此刻',\n    ok: '確認',\n  },\n  image: {\n    loading: '載入中',\n  },\n  imagePreview: {\n    fullScreen: '全屏',\n    rotateRight: '向右旋轉',\n    rotateLeft: '向左旋轉',\n    zoomIn: '放大',\n    zoomOut: '縮小',\n    originalSize: '原始尺寸',\n  },\n  typography: {\n    copied: '已複製',\n    copy: '複製',\n    expand: '展開',\n    collapse: '折疊',\n    edit: '編輯',\n  },\n  form: {\n    validateMessages: {\n      required: '#{field} 是必填項',\n      type: {\n        string: '#{value} 不是合法的文本類型',\n        number: '#{value} 不是合法的數字類型',\n        boolean: '#{value} 不是合法的布爾類型',\n        array: '#{value} 不是合法的數組類型',\n        object: '#{value} 不是合法的對像類型',\n        url: '#{value} 不是合法的 url 地址',\n        email: '#{value} 不是合法的郵箱地址',\n        ip: '#{value} 不是合法的 IP 地址',\n      },\n      number: {\n        min: '`#{value}` 小於最小值 `#{min}`',\n        max: '`#{value}` 大於最大值 `#{max}`',\n        equal: '`#{value}` 不等於 `#{equal}`',\n        range: '`#{value}` 不在 `#{min} ~ #{max}` 範圍內',\n        positive: '`#{value}` 不是正數',\n        negative: '`#{value}` 不是負數',\n      },\n      array: {\n        length: '`#{value}` 個數不等於 #{length}',\n        minLength: '`#{value}` 個數最少為 #{minLength}',\n        maxLength: '`#{value}` 個數最多為 #{maxLength}',\n        includes: '#{value} 不包含 #{includes}',\n        deepEqual: '#{value} 不等於 #{deepEqual}',\n        empty: '`#{value}` 不是空數組',\n      },\n      string: {\n        minLength: '字符數最少為 #{minLength}',\n        maxLength: '字符數最多為 #{maxLength}',\n        length: '`#{value}` 字符數不等於 #{length}',\n        match: '`#{value}` 不符合模式 #{pattern}',\n        uppercase: '`#{value}` 不是全大寫',\n        lowercase: '`#{value}` 不是全小寫',\n      },\n      object: {\n        deepEqual: '`#{value}` 不等於 #{deepEqual}',\n        hasKeys: '`#{value}` 不包含字段 #{keys}',\n        empty: '`#{value}` 不是對象',\n      },\n      boolean: {\n        true: '期望是 `true`',\n        false: '期望是 `false`',\n      },\n    },\n  },\n  colorPicker: {\n    history: '最近使用顏色',\n    preset: '系統預設顏色',\n    empty: '暫無',\n  },\n};\n\nexport default lang;\n"
  },
  {
    "path": "packages/web-vue/components/mention/CHANGELOG.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.52.1\n\n`2023-10-13`\n\n### 🐛 BugFix\n\n- Fixed the issue where the `disabled` attribute does not work properly under text-area ([#2723](https://github.com/arco-design/arco-design-vue/pull/2723))\n\n\n## 2.47.0\n\n`2023-06-02`\n\n### 🆕 Feature\n\n- Add `prefix` attribute to search event ([#2356](https://github.com/arco-design/arco-design-vue/pull/2356))\n\n\n## 2.42.0\n\n`2023-01-13`\n\n### 🆕 Feature\n\n- add focus and blur methods ([#2022](https://github.com/arco-design/arco-design-vue/pull/2022))\n\n\n## 2.41.0\n\n`2022-12-30`\n\n### 🐛 BugFix\n\n- Fix the problem that the Enter key is invalid in textarea mode ([#2013](https://github.com/arco-design/arco-design-vue/pull/2013))\n\n\n## 2.29.1\n\n`2022-06-02`\n\n### 🐛 BugFix\n\n- Fix missing textarea styles when loading on demand ([#1227](https://github.com/arco-design/arco-design-vue/pull/1227))\n\n\n## 2.29.0\n\n`2022-05-27`\n\n### 🐛 BugFix\n\n- Fixed the cursor movement problem after typing in textarea mode ([#1204](https://github.com/arco-design/arco-design-vue/pull/1204))\n\n\n## 2.23.0\n\n`2022-04-08`\n\n### 🆕 Feature\n\n- Added allow-clear property and event ([#951](https://github.com/arco-design/arco-design-vue/pull/951))\n\n\n## 2.22.1\n\n`2022-04-02`\n\n### 🐛 BugFix\n\n- Fix the problem of warning prompts in the development environment ([#925](https://github.com/arco-design/arco-design-vue/pull/925))\n\n\n## 2.22.0\n\n`2022-04-01`\n\n### 🐛 BugFix\n\n- Fix v-model two-way binding error when selecting value ([#908](https://github.com/arco-design/arco-design-vue/pull/908))\n\n\n## 2.13.0\n\n`2021-12-31`\n\n### 🆕 Feature\n\n- Increase input slot and option slot support ([#482](https://github.com/arco-design/arco-design-vue/pull/482))\n- The drop-down menu under the text field type is displayed following the prompt text ([#482](https://github.com/arco-design/arco-design-vue/pull/482))\n\n\n## 2.7.0\n\n`2021-11-26`\n\n### 🆕 Feature\n\n- Add `type` prop ([#205](https://github.com/arco-design/arco-design-vue/pull/205))\n\n"
  },
  {
    "path": "packages/web-vue/components/mention/CHANGELOG.zh-CN.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.52.1\n\n`2023-10-13`\n\n### 🐛 问题修复\n\n- 修复在text-area下disabled属性无法正常工作的问题 ([#2723](https://github.com/arco-design/arco-design-vue/pull/2723))\n\n\n## 2.47.0\n\n`2023-06-02`\n\n### 🆕 新增功能\n\n- search 事件增加 `prefix` 属性 ([#2356](https://github.com/arco-design/arco-design-vue/pull/2356))\n\n\n## 2.42.0\n\n`2023-01-13`\n\n### 🆕 新增功能\n\n- 增加focus与blur方法 ([#2022](https://github.com/arco-design/arco-design-vue/pull/2022))\n\n\n## 2.41.0\n\n`2022-12-30`\n\n### 🐛 问题修复\n\n- 修复 textarea 模式下回车键失效的问题 ([#2013](https://github.com/arco-design/arco-design-vue/pull/2013))\n\n\n## 2.29.1\n\n`2022-06-02`\n\n### 🐛 问题修复\n\n- 修复按需加载时丢失 textarea 样式的问题 ([#1227](https://github.com/arco-design/arco-design-vue/pull/1227))\n\n\n## 2.29.0\n\n`2022-05-27`\n\n### 🐛 问题修复\n\n- 修复 textarea 模式下输入后光标移动的问题 ([#1204](https://github.com/arco-design/arco-design-vue/pull/1204))\n\n\n## 2.23.0\n\n`2022-04-08`\n\n### 🆕 新增功能\n\n- 增加 allow-clear 属性和事件 ([#951](https://github.com/arco-design/arco-design-vue/pull/951))\n\n\n## 2.22.1\n\n`2022-04-02`\n\n### 🐛 问题修复\n\n- 修复开发环境下出现警告提示的问题 ([#925](https://github.com/arco-design/arco-design-vue/pull/925))\n\n\n## 2.22.0\n\n`2022-04-01`\n\n### 🐛 问题修复\n\n- 修复 v-model 双向绑定在选择值时错误的问题 ([#908](https://github.com/arco-design/arco-design-vue/pull/908))\n\n\n## 2.13.0\n\n`2021-12-31`\n\n### 🆕 新增功能\n\n- 增加 input 中的插槽和 option 插槽支持 ([#482](https://github.com/arco-design/arco-design-vue/pull/482))\n- 文本域类型下的下拉菜单跟随提示文字显示 ([#482](https://github.com/arco-design/arco-design-vue/pull/482))\n\n\n## 2.7.0\n\n`2021-11-26`\n\n### 🆕 新增功能\n\n- 增加 `type`  属性 ([#205](https://github.com/arco-design/arco-design-vue/pull/205))\n\n"
  },
  {
    "path": "packages/web-vue/components/mention/README.en-US.md",
    "content": "```yaml\nmeta:\n  type: Component\n  category: Data Entry\ntitle: Mention\ndescription: Used to mention someone or something in the input, often used for posting, chatting or commenting.\n```\n\n*Auto translate by google.*\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/prefix.md\n\n## API\n\n\n### `<mention>` Props\n\n|Attribute|Description|Type|Default|version|\n|---|---|---|:---:|:---|\n|model-value **(v-model)**|Value|`string`|`-`||\n|default-value|Default value (uncontrolled state)|`string`|`''`||\n|data|Data for automatic completion|`(string \\| number \\| SelectOptionData \\| SelectOptionGroup)[]`|`[]`||\n|prefix|Keywords that trigger auto-completion|`string \\| string[]`|`'@'`||\n|split|Before and after the selected item separator|`string`|`' '`||\n|type|default input or textarea|`'input' \\| 'textarea'`|`'input'`||\n|disabled|Whether to disable|`boolean`|`false`||\n|allow-clear|Whether to allow the input to be cleared|`boolean`|`false`|2.23.0|\n### `<mention>` Events\n\n|Event Name|Description|Parameters|version|\n|---|---|---|:---|\n|change|Triggered when the value changes|value: `string`||\n|search|Trigger on dynamic search prefix, version 2.47.0 adds prefix param|value: `string`<br>prefix: `string`||\n|select|Triggered when the drop-down option is selected|value: `string \\| number \\| Record<string, any> \\| undefined`||\n|clear|Triggered when the user clicks the clear button|-|2.23.0|\n|focus|Emitted when the text box gets focus|ev: `FocusEvent`|2.42.0|\n|blur|Emitted when the text box loses focus|ev: `FocusEvent`|2.42.0|\n### `<mention>` Methods\n\n|Method|Description|Parameters|Return|version|\n|---|---|---|:---:|:---|\n|focus|Make the input box focus|-|-|2.24.0|\n|blur|Make the input box lose focus|-|-|2.24.0|\n### `<mention>` Slots\n\n|Slot Name|Description|Parameters|version|\n|---|---|---|:---|\n|option|Display content of options|data: `OptionInfo`|2.13.0|\n\n\n"
  },
  {
    "path": "packages/web-vue/components/mention/README.zh-CN.md",
    "content": "```yaml\nmeta:\n  type: 组件\n  category: 数据输入\ntitle: 提及 Mention\ndescription: 用于在输入中提及某人或某事，常用于发布、聊天或评论功能。\n```\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/prefix.md\n\n## API\n\n\n### `<mention>` Props\n\n|参数名|描述|类型|默认值|版本|\n|---|---|---|:---:|:---|\n|model-value **(v-model)**|绑定值|`string`|`-`||\n|default-value|默认值（非受控状态）|`string`|`''`||\n|data|用于自动补全的数据|`(string \\| number \\| SelectOptionData \\| SelectOptionGroup)[]`|`[]`||\n|prefix|触发自动补全的关键字|`string \\| string[]`|`'@'`||\n|split|选中项的前后分隔符|`string`|`' '`||\n|type|输入框或文本域|`'input' \\| 'textarea'`|`'input'`||\n|disabled|是否禁用|`boolean`|`false`||\n|allow-clear|是否允许清空输入框|`boolean`|`false`|2.23.0|\n### `<mention>` Events\n\n|事件名|描述|参数|版本|\n|---|---|---|:---|\n|change|值发生改变时触发|value: `string`||\n|search|动态搜索时触发，2.47.0 版本增加 prefix 参数|value: `string`<br>prefix: `string`||\n|select|选择下拉选项时触发|value: `string \\| number \\| Record<string, any> \\| undefined`||\n|clear|用户点击清除按钮时触发|-|2.23.0|\n|focus|文本框获取焦点时触发|ev: `FocusEvent`|2.42.0|\n|blur|文本框失去焦点时触发|ev: `FocusEvent`|2.42.0|\n### `<mention>` Methods\n\n|方法名|描述|参数|返回值|版本|\n|---|---|---|---|:---|\n|focus|使输入框获取焦点|-|-|2.24.0|\n|blur|使输入框失去焦点|-|-|2.24.0|\n### `<mention>` Slots\n\n|插槽名|描述|参数|版本|\n|---|:---:|---|:---|\n|option|选项内容|data: `OptionInfo`|2.13.0|\n\n\n"
  },
  {
    "path": "packages/web-vue/components/mention/TEMPLATE.md",
    "content": "## zh-CN\n```yaml\nmeta:\n  type: 组件\n  category: 数据输入\ntitle: 提及 Mention\ndescription: 用于在输入中提及某人或某事，常用于发布、聊天或评论功能。\n```\n---\n## en-US\n```yaml\nmeta:\n  type: Component\n  category: Data Entry\ntitle: Mention\ndescription: Used to mention someone or something in the input, often used for posting, chatting or commenting.\n```\n---\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/prefix.md\n\n## API\n\n%%API(mention.tsx)%%\n"
  },
  {
    "path": "packages/web-vue/components/mention/__demo__/basic.md",
    "content": "```yaml\ntitle:\n  zh-CN: 基本使用\n  en-US: Basic Usage\n```\n\n## zh-CN\n\n用于在输入中提及某人或某事，常用于发布、聊天或评论功能。\n\n---\n\n## en-US\n\nUsed to mention someone or something in the input, often used for posting, chatting or commenting.\n\n---\n\n```vue\n<template>\n  <a-space direction=\"vertical\" size=\"large\" style=\"width: 100%\">\n    <a-mention v-model=\"value\" :data=\"['Bytedance', 'Bytedesign', 'Bytenumner']\" placeholder=\"enter something\" />\n    <a-mention v-model=\"text\" :data=\"['Bytedance', 'Bytedesign', 'Bytenumner']\" type=\"textarea\" placeholder=\"enter something\" />\n  </a-space>\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n  setup() {\n    const value = ref('');\n    const text = ref('');\n\n    return {\n      value,\n      text\n    }\n  }\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/mention/__demo__/prefix.md",
    "content": "```yaml\ntitle:\n  zh-CN: 自定义触发字符\n  en-US: Custom Prefix\n```\n\n## zh-CN\n\n指定 `prefix` 来自定义触发字符。默认为 `@`，可以自定义为任意字符。\n\n---\n\n## en-US\n\nSpecify `prefix` to customize the trigger character. The default is `@`, which can be customized to any character.\n\n---\n\n```vue\n<template>\n  <a-space direction=\"vertical\" size=\"large\" style=\"width: 100%\">\n    <a-mention :data=\"['Bytedance', 'Bytedesign', 'Bytenumner']\" placeholder=\"input @\" />\n    <a-mention :data=\"['Bytedance', 'Bytedesign', 'Bytenumner']\" prefix=\"#\" placeholder=\"input #\" />\n    <a-mention :data=\"['Bytedance', 'Bytedesign', 'Bytenumner']\" prefix=\"$\" placeholder=\"input $\" />\n  </a-space>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/mention/__test__/__snapshots__/demo.test.ts.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`<mention> demo: render [basic] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-vertical\\\\\" style=\\\\\"column-gap: 24px; row-gap: 24px; width: 100%;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-input-wrapper\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" placeholder=\\\\\"enter something\\\\\" value=\\\\\"\\\\\"><!----><!----></span>\n    <!---->\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-mention\\\\\">\n      <div class=\\\\\"arco-textarea-wrapper\\\\\">\n        <!--v-if--><textarea class=\\\\\"arco-textarea\\\\\" placeholder=\\\\\"enter something\\\\\" value=\\\\\"\\\\\"></textarea>\n        <!--v-if-->\n        <!--v-if-->\n      </div>\n      <!---->\n    </div>\n  </div>\n</div>\"\n`;\n\nexports[`<mention> demo: render [prefix] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-vertical\\\\\" style=\\\\\"column-gap: 24px; row-gap: 24px; width: 100%;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-input-wrapper\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" placeholder=\\\\\"input @\\\\\" value=\\\\\"\\\\\"><!----><!----></span>\n    <!---->\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-input-wrapper\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" placeholder=\\\\\"input #\\\\\" value=\\\\\"\\\\\"><!----><!----></span>\n    <!---->\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-input-wrapper\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" placeholder=\\\\\"input $\\\\\" value=\\\\\"\\\\\"><!----><!----></span>\n    <!---->\n  </div>\n</div>\"\n`;\n"
  },
  {
    "path": "packages/web-vue/components/mention/__test__/__snapshots__/index.test.ts.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Mention mention correctly 1`] = `\n\"<div class=\\\\\"arco-select-dropdown\\\\\">\n  <!--v-if-->\n  <!--v-if-->\n  <!--v-if-->\n  <div class=\\\\\"arco-scrollbar arco-scrollbar-type-embed\\\\\">\n    <div class=\\\\\"arco-scrollbar-container arco-select-dropdown-list-wrapper\\\\\">\n      <ul class=\\\\\"arco-select-dropdown-list\\\\\">\n        <li class=\\\\\"arco-select-option arco-select-option-active\\\\\">\n          <!--v-if--><span class=\\\\\"arco-select-option-content\\\\\">Bytedance</span>\n          <!--v-if-->\n        </li>\n        <li class=\\\\\"arco-select-option\\\\\">\n          <!--v-if--><span class=\\\\\"arco-select-option-content\\\\\">Bytedesign</span>\n          <!--v-if-->\n        </li>\n        <li class=\\\\\"arco-select-option\\\\\">\n          <!--v-if--><span class=\\\\\"arco-select-option-content\\\\\">Bytenumner</span>\n          <!--v-if-->\n        </li>\n      </ul>\n    </div>\n    <!--v-if-->\n    <!--v-if-->\n  </div>\n  <!--v-if-->\n</div>\"\n`;\n"
  },
  {
    "path": "packages/web-vue/components/mention/__test__/demo.test.ts",
    "content": "import demoTest from '../../../scripts/demo-test';\n\ndemoTest('mention');\n"
  },
  {
    "path": "packages/web-vue/components/mention/__test__/index.test.ts",
    "content": "import { mount } from '@vue/test-utils';\nimport Mention from '../index';\n\ndescribe('Mention', () => {\n  test('mention correctly', async () => {\n    const wrapper = mount(Mention, {\n      props: {\n        data: ['Bytedance', 'Bytedesign', 'Bytenumner'],\n      },\n    });\n    const input = wrapper.find('input');\n    await input.trigger('focusin');\n    await input.setValue('@');\n\n    expect(\n      wrapper.findComponent({ name: 'SelectDropdown' }).html()\n    ).toMatchSnapshot();\n  });\n\n  test('should select value', async () => {\n    const wrapper = mount(Mention, {\n      props: {\n        data: ['Bytedance', 'Bytedesign', 'Bytenumner'],\n      },\n    });\n    const input = wrapper.find('input');\n    await input.trigger('focusin');\n    await input.setValue('@');\n    const dropdown = wrapper.findComponent({ name: 'SelectDropdown' });\n    await input.trigger('keydown', { key: 'ArrowDown' });\n    expect(dropdown.find('.arco-select-option-active').text()).toBe(\n      'Bytedesign'\n    );\n    await input.trigger('keydown', { key: 'ArrowUp' });\n    expect(dropdown.find('.arco-select-option-active').text()).toBe(\n      'Bytedance'\n    );\n    await input.trigger('keydown', { key: 'Enter' });\n    expect(wrapper.emitted('change')?.[1]).toEqual(['@Bytedance']);\n  });\n});\n"
  },
  {
    "path": "packages/web-vue/components/mention/index.ts",
    "content": "import type { App } from 'vue';\nimport type { ArcoOptions } from '../_utils/types';\nimport { setGlobalConfig, getComponentPrefix } from '../_utils/global-config';\nimport _Mention from './mention';\n\nconst Mention = Object.assign(_Mention, {\n  install: (app: App, options?: ArcoOptions) => {\n    setGlobalConfig(app, options);\n    const componentPrefix = getComponentPrefix(options);\n\n    app.component(componentPrefix + _Mention.name, _Mention);\n  },\n});\n\nexport type MentionInstance = InstanceType<typeof _Mention>;\n\nexport default Mention;\n"
  },
  {
    "path": "packages/web-vue/components/mention/interface.ts",
    "content": "export interface MeasureInfo {\n  measuring:boolean;\n  location:number;\n  prefix:string;\n  text:string\n}\n"
  },
  {
    "path": "packages/web-vue/components/mention/mention.tsx",
    "content": "import {\n  computed,\n  defineComponent,\n  PropType,\n  ref,\n  toRefs,\n  ComponentPublicInstance,\n  onMounted,\n  watch,\n  nextTick,\n  toRef,\n} from 'vue';\nimport ArcoTextarea from '../textarea';\nimport ArcoInput from '../input';\nimport Trigger from '../trigger';\nimport SelectDropdown from '../select/select-dropdown.vue';\nimport Option from '../select/option.vue';\nimport { MeasureInfo } from './interface';\nimport {\n  getLastMeasureIndex,\n  getTextBeforeSelection,\n  isValidSearch,\n} from './utils';\nimport {\n  SelectOptionData,\n  SelectOptionGroup,\n  SelectOptionInfo,\n} from '../select/interface';\nimport { getPrefixCls } from '../_utils/global-config';\nimport { getSizeStyles } from '../textarea/utils';\nimport ResizeObserver from '../_components/resize-observer';\nimport { isFunction, isNull, isUndefined } from '../_utils/is';\nimport { useSelect } from '../select/hooks/use-select';\nimport { getKeyFromValue } from '../select/utils';\nimport { useFormItem } from '../_hooks/use-form-item';\n\nexport default defineComponent({\n  name: 'Mention',\n  inheritAttrs: false,\n  props: {\n    /**\n     * @zh 绑定值\n     * @en Value\n     * @vModel\n     */\n    modelValue: String,\n    /**\n     * @zh 默认值（非受控状态）\n     * @en Default value (uncontrolled state)\n     */\n    defaultValue: {\n      type: String,\n      default: '',\n    },\n    /**\n     * @zh 用于自动补全的数据\n     * @en Data for automatic completion\n     */\n    data: {\n      type: Array as PropType<\n        (string | number | SelectOptionData | SelectOptionGroup)[]\n      >,\n      default: () => [],\n    },\n    /**\n     * @zh 触发自动补全的关键字\n     * @en Keywords that trigger auto-completion\n     */\n    prefix: {\n      type: [String, Array] as PropType<string | string[]>,\n      default: '@',\n    },\n    /**\n     * @zh 选中项的前后分隔符\n     * @en Before and after the selected item separator\n     */\n    split: {\n      type: String,\n      default: ' ',\n    },\n    /**\n     * @zh 输入框或文本域\n     * @en default input or textarea\n     */\n    type: {\n      type: String as PropType<'input' | 'textarea'>,\n      default: 'input',\n    },\n    /**\n     * @zh 是否禁用\n     * @en Whether to disable\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 是否允许清空输入框\n     * @en Whether to allow the input to be cleared\n     * @version 2.23.0\n     */\n    allowClear: {\n      type: Boolean,\n      default: false,\n    },\n  },\n  emits: {\n    'update:modelValue': (value: string) => true,\n    /**\n     * @zh 值发生改变时触发\n     * @en Triggered when the value changes\n     * @property {string} value\n     */\n    'change': (value: string) => true,\n    /**\n     * @zh 动态搜索时触发，2.47.0 版本增加 prefix 参数\n     * @en Trigger on dynamic search prefix, version 2.47.0 adds prefix param\n     * @property {string} value\n     * @property {string} prefix\n     */\n    'search': (value: string, prefix: string) => true,\n    /**\n     * @zh 选择下拉选项时触发\n     * @en Triggered when the drop-down option is selected\n     * @property {string | number | Record<string, any> | undefined} value\n     */\n    'select': (value: string | number | Record<string, any> | undefined) =>\n      true,\n    /**\n     * @zh 用户点击清除按钮时触发\n     * @en Triggered when the user clicks the clear button\n     * @version 2.23.0\n     */\n    'clear': (ev: Event) => true,\n    /**\n     * @zh 文本框获取焦点时触发\n     * @en Emitted when the text box gets focus\n     * @param {FocusEvent} ev\n     * @version 2.42.0\n     */\n    'focus': (ev: FocusEvent) => true,\n    /**\n     * @zh 文本框失去焦点时触发\n     * @en Emitted when the text box loses focus\n     * @param {FocusEvent} ev\n     * @version 2.42.0\n     */\n    'blur': (ev: FocusEvent) => true,\n  },\n  /**\n   * @zh 选项内容\n   * @en Display content of options\n   * @slot option\n   * @binding {OptionInfo} data\n   * @version 2.13.0\n   */\n  setup(props, { emit, attrs, slots }) {\n    const prefixCls = getPrefixCls('mention');\n\n    let styleDeclaration: CSSStyleDeclaration;\n\n    const { mergedDisabled, eventHandlers } = useFormItem({\n      disabled: toRef(props, 'disabled'),\n    });\n\n    const { data, modelValue } = toRefs(props);\n    const dropdownRef = ref();\n    const optionRefs = ref<Record<string, HTMLElement>>({});\n    const _value = ref(props.defaultValue);\n    const computedValue = computed(() => props.modelValue ?? _value.value);\n\n    watch(modelValue, (value) => {\n      if (isUndefined(value) || isNull(value)) {\n        _value.value = '';\n      }\n    });\n\n    const computedValueKeys = computed(() =>\n      computedValue.value ? [getKeyFromValue(computedValue.value)] : []\n    );\n    const measureInfo = ref<MeasureInfo>({\n      measuring: false,\n      location: -1,\n      prefix: '',\n      text: '',\n    });\n\n    const resetMeasureInfo = () => {\n      measureInfo.value = {\n        measuring: false,\n        location: -1,\n        prefix: '',\n        text: '',\n      };\n    };\n\n    const inputRef = ref<HTMLElement>();\n\n    const measureText = computed(() => measureInfo.value.text);\n    const filterOption = ref(true);\n\n    const handleInput = (value: string, e: Event) => {\n      const text = getTextBeforeSelection(e.target as HTMLInputElement);\n      const lastMeasure = getLastMeasureIndex(text, props.prefix);\n      if (lastMeasure.location > -1) {\n        const measureText = text.slice(\n          lastMeasure.location + lastMeasure.prefix.length\n        );\n        if (isValidSearch(measureText, props.split)) {\n          _popupVisible.value = true;\n          measureInfo.value = {\n            measuring: true,\n            text: measureText,\n            ...lastMeasure,\n          };\n          emit('search', measureText, lastMeasure.prefix);\n        } else if (measureInfo.value.location > -1) {\n          resetMeasureInfo();\n        }\n      } else if (measureInfo.value.location > -1) {\n        resetMeasureInfo();\n      }\n      _value.value = value;\n      emit('update:modelValue', value);\n      emit('change', value);\n      eventHandlers.value?.onChange?.();\n    };\n\n    const handleClear = (ev: Event) => {\n      _value.value = '';\n      emit('update:modelValue', '');\n      emit('change', '');\n      eventHandlers.value?.onChange?.();\n      emit('clear', ev);\n    };\n\n    const _popupVisible = ref(false);\n    const computedPopupVisible = computed(\n      () =>\n        _popupVisible.value &&\n        measureInfo.value.measuring &&\n        validOptionInfos.value.length > 0\n    );\n\n    const handleResize = () => {\n      mirrorStyle.value = getSizeStyles(styleDeclaration);\n    };\n\n    const handlePopupVisibleChange = (popupVisible: boolean) => {\n      _popupVisible.value = popupVisible;\n    };\n\n    const handleSelect = (key: string, e: Event) => {\n      const { value } = optionInfoMap.get(key) ?? {};\n      const measureStart = measureInfo.value.location;\n      const measureEnd =\n        measureInfo.value.location + measureInfo.value.text.length;\n      let head = _value.value.slice(0, measureStart);\n      let tail = _value.value.slice(measureEnd + 1);\n      // 如过匹配内容之前或者之后已经存在内容，需要添加分割字符\n      head +=\n        !head || head.endsWith(props.split) || head.endsWith('\\n')\n          ? ''\n          : props.split;\n      tail =\n        (!tail || tail.startsWith(props.split) || tail.startsWith('\\n')\n          ? ''\n          : props.split) + tail;\n\n      const match = `${measureInfo.value.prefix}${value}`;\n      const nextValue = `${head}${match}${tail}`;\n\n      _value.value = nextValue;\n      emit(\n        'select',\n        value as string | number | Record<string, any> | undefined\n      );\n      emit('update:modelValue', nextValue);\n      emit('change', nextValue);\n      resetMeasureInfo();\n      eventHandlers.value?.onChange?.();\n    };\n\n    const { validOptions, optionInfoMap, validOptionInfos, handleKeyDown } =\n      useSelect({\n        options: data,\n        inputValue: measureText,\n        filterOption,\n        popupVisible: computedPopupVisible,\n        valueKeys: computedValueKeys,\n        dropdownRef,\n        optionRefs,\n        onSelect: handleSelect,\n        onPopupVisibleChange: handlePopupVisibleChange,\n        enterToOpen: false,\n      });\n\n    const mirrorStyle = ref();\n\n    onMounted(() => {\n      // @ts-ignore\n      if (props.type === 'textarea' && inputRef.value?.textareaRef) {\n        // @ts-ignore\n        styleDeclaration = window.getComputedStyle(inputRef.value.textareaRef);\n        mirrorStyle.value = getSizeStyles(styleDeclaration);\n      }\n    });\n\n    const getOptionContentFunc = (item: SelectOptionInfo) => {\n      if (isFunction(slots.option) && item.value) {\n        const optionInfo = optionInfoMap.get(item.key);\n        const optionSlot = slots.option;\n        return () => optionSlot({ data: optionInfo });\n      }\n      return () => item.label;\n    };\n\n    const renderOption = (item: SelectOptionInfo) => {\n      return (\n        <Option\n          // @ts-ignore\n          ref={(ref: ComponentPublicInstance) => {\n            if (ref?.$el) {\n              optionRefs.value[item.key] = ref.$el;\n            }\n          }}\n          v-slots={{ default: getOptionContentFunc(item) }}\n          key={item.key}\n          value={item.value}\n          disabled={item.disabled}\n          internal\n        />\n      );\n    };\n\n    const renderDropdown = () => {\n      return (\n        <SelectDropdown ref={dropdownRef}>\n          {validOptions.value.map((info) =>\n            renderOption(info as SelectOptionInfo)\n          )}\n        </SelectDropdown>\n      );\n    };\n\n    const mirrorRef = ref<HTMLElement>();\n\n    watch(computedPopupVisible, (visible) => {\n      if (props.type === 'textarea' && visible) {\n        nextTick(() => {\n          if (\n            // @ts-ignore\n            inputRef.value?.textareaRef &&\n            // @ts-ignore\n            inputRef.value.textareaRef.scrollTop > 0\n          ) {\n            // @ts-ignore\n            mirrorRef.value?.scrollTo(0, inputRef.value.textareaRef.scrollTop);\n          }\n        });\n      }\n    });\n\n    const onFocus = (ev: FocusEvent) => {\n      emit('focus', ev);\n    };\n    const onBlur = (ev: FocusEvent) => {\n      emit('blur', ev);\n    };\n\n    const render = () => {\n      if (props.type === 'textarea') {\n        return (\n          <div class={prefixCls}>\n            <ResizeObserver onResize={handleResize}>\n              <ArcoTextarea\n                {...attrs}\n                ref={inputRef}\n                allowClear={props.allowClear}\n                modelValue={computedValue.value}\n                disabled={mergedDisabled.value}\n                onInput={handleInput}\n                onClear={handleClear}\n                onFocus={onFocus}\n                onBlur={onBlur}\n                // @ts-ignore\n                onKeydown={handleKeyDown}\n              />\n            </ResizeObserver>\n            {measureInfo.value.measuring &&\n              validOptionInfos.value.length > 0 && (\n                <div\n                  ref={mirrorRef}\n                  style={mirrorStyle.value}\n                  class={`${prefixCls}-measure`}\n                >\n                  {computedValue.value?.slice(0, measureInfo.value.location)}\n                  <Trigger\n                    v-slots={{ content: renderDropdown }}\n                    trigger=\"focus\"\n                    position=\"bl\"\n                    popupOffset={4}\n                    preventFocus={true}\n                    popupVisible={computedPopupVisible.value}\n                    clickToClose={false}\n                    onPopupVisibleChange={handlePopupVisibleChange}\n                  >\n                    <span>@</span>\n                  </Trigger>\n                </div>\n              )}\n          </div>\n        );\n      }\n\n      return (\n        <Trigger\n          v-slots={{ content: renderDropdown }}\n          trigger=\"focus\"\n          position=\"bl\"\n          animationName=\"slide-dynamic-origin\"\n          popupOffset={4}\n          preventFocus={true}\n          popupVisible={computedPopupVisible.value}\n          clickToClose={false}\n          autoFitPopupWidth\n          autoFitTransformOrigin\n          disabled={mergedDisabled.value}\n          onPopupVisibleChange={handlePopupVisibleChange}\n        >\n          <ArcoInput\n            v-slots={slots}\n            {...attrs}\n            ref={inputRef}\n            allowClear={props.allowClear}\n            modelValue={computedValue.value}\n            disabled={mergedDisabled.value}\n            onInput={handleInput}\n            onClear={handleClear}\n            onFocus={onFocus}\n            onBlur={onBlur}\n            // @ts-ignore\n            onKeydown={handleKeyDown}\n          />\n        </Trigger>\n      );\n    };\n\n    return {\n      inputRef,\n      render,\n    };\n  },\n  methods: {\n    /**\n     * @zh 使输入框获取焦点\n     * @en Make the input box focus\n     * @public\n     * @version 2.24.0\n     */\n    focus() {\n      (this.inputRef as HTMLInputElement)?.focus();\n    },\n    /**\n     * @zh 使输入框失去焦点\n     * @en Make the input box lose focus\n     * @public\n     * @version 2.24.0\n     */\n    blur() {\n      (this.inputRef as HTMLInputElement)?.blur();\n    },\n  },\n  render() {\n    return this.render();\n  },\n});\n"
  },
  {
    "path": "packages/web-vue/components/mention/style/index.less",
    "content": "@import './token.less';\n\n@mention-prefix-cls: ~'@{prefix}-mention';\n\n.@{mention-prefix-cls} {\n  position: relative;\n  display: inline-block;\n  box-sizing: border-box;\n  width: 100%;\n\n  &-measure {\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    overflow: auto;\n    visibility: hidden;\n    pointer-events: none;\n  }\n}\n"
  },
  {
    "path": "packages/web-vue/components/mention/style/index.ts",
    "content": "import '../../style/index.less';\nimport '../../input/style';\nimport '../../textarea/style';\nimport '../../select/style';\nimport './index.less';\n"
  },
  {
    "path": "packages/web-vue/components/mention/style/token.less",
    "content": "@import '../../style/theme/index.less';\n\n@mentions-padding-horizontal: @spacing-6;\n@mentions-padding-vertical: @spacing-2;\n@mentions-font-size: @font-size-body-3;\n@mentions-line-height: @line-height-base;\n"
  },
  {
    "path": "packages/web-vue/components/mention/utils.ts",
    "content": "export const getTextBeforeSelection = (element: HTMLInputElement) => {\n  const { value, selectionStart } = element;\n  return value.slice(0, selectionStart);\n};\n\nexport const getLastMeasureIndex = (\n  text: string,\n  prefix: string | string[]\n) => {\n  const _prefix = ([] as string[]).concat(prefix);\n  return _prefix.reduce(\n    (pre, value) => {\n      const lastIndex = text.lastIndexOf(value);\n      if (lastIndex > pre.location) {\n        return {\n          location: lastIndex,\n          prefix: value,\n        };\n      }\n      return pre;\n    },\n    {\n      location: -1,\n      prefix: '',\n    }\n  );\n};\n\nexport const isValidSearch = (text: string, split: string) => {\n  return !split || !text.includes(split);\n};\n"
  },
  {
    "path": "packages/web-vue/components/menu/CHANGELOG.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.56.0\n\n`2024-07-26`\n\n### 💎 Enhancement\n\n- fix color transition effect in selected menu item ([#3192](https://github.com/arco-design/arco-design-vue/pull/3192))\n\n\n## 2.54.5\n\n`2024-02-21`\n\n### 🐛 BugFix\n\n- Fix warning “Invalid prop name: key is a reserved property.” ([#2978](https://github.com/arco-design/arco-design-vue/pull/2978))\n\n\n## 2.43.0\n\n`2023-02-10`\n\n### 🐛 BugFix\n\n- fix the hotreload problem ([#2091](https://github.com/arco-design/arco-design-vue/pull/2091))\n\n\n## 2.34.1\n\n`2022-08-05`\n\n### 🐛 BugFix\n\n- Fixed an issue where the popup attribute caused warnings in newer versions of Chrome ([#1487](https://github.com/arco-design/arco-design-vue/pull/1487))\n\n\n## 2.31.0\n\n`2022-06-17`\n\n### 🐛 BugFix\n\n- the horizontal menu cannot be expanded after being collapsed ([#1297](https://github.com/arco-design/arco-design-vue/pull/1297))\n\n\n## 2.25.1\n\n`2022-04-27`\n\n### 🐛 BugFix\n\n- Fix the problem that the collected menu data is incomplete ([#1034](https://github.com/arco-design/arco-design-vue/pull/1034))\n\n\n## 2.25.0\n\n`2022-04-22`\n\n### 💅 Style\n\n- Popup menu icon increased margin-right ([#1029](https://github.com/arco-design/arco-design-vue/pull/1029))\n\n\n## 2.24.0\n\n`2022-04-15`\n\n### 🐛 BugFix\n\n- fix the problem that `auto-scroll-into-view` is invalid ([#966](https://github.com/arco-design/arco-design-vue/pull/966))\n\n\n## 2.23.0\n\n`2022-04-08`\n\n### 🆕 Feature\n\n- Support set the set the maximum height of popover by `popup-max-height` ([#949](https://github.com/arco-design/arco-design-vue/pull/949))\n\n\n## 2.22.1\n\n`2022-04-02`\n\n### 🐛 BugFix\n\n- Fixed the problem that the height of menu icon is wrong ([#928](https://github.com/arco-design/arco-design-vue/pull/928))\n\n\n## 2.22.0\n\n`2022-04-01`\n\n### 🐛 BugFix\n\n- The icon in the popup box is not aligned with the text ([#889](https://github.com/arco-design/arco-design-vue/pull/889))\n\n\n## 2.21.0\n\n`2022-03-25`\n\n### 💅 Style\n\n- fix the indentation of menu item is wrapped ([#866](https://github.com/arco-design/arco-design-vue/pull/866))\n\n\n## 2.18.0\n\n`2022-03-04`\n\n### 💅 Style\n\n- the icon of sub-menu are not centered in vertically ([#767](https://github.com/arco-design/arco-design-vue/pull/767))\n\n\n## 2.18.0-beta.1\n\n`2022-02-18`\n\n### 🆕 Feature\n\n- Responsive collapsed support ([#700](https://github.com/arco-design/arco-design-vue/pull/700))\n\n\n## 2.11.0\n\n`2021-12-17`\n\n### 🆕 Feature\n\n- add icon slot for`sub-menu` and `menu-item` ([#412](https://github.com/arco-design/arco-design-vue/pull/412))\n\n### 💅 Style\n\n- Fix the problem of height overflow when the sidebar is collapsible ([#416](https://github.com/arco-design/arco-design-vue/pull/416))\n\n\n## 2.10.0\n\n`2021-12-10`\n\n### 🐛 BugFix\n\n- fix the problem that the width of the menu cannot fill the parent element ([#346](https://github.com/arco-design/arco-design-vue/pull/346))\n\n\n## 2.8.0\n\n`2021-12-01`\n\n### 🆕 Feature\n\n- add prop    auto-open-selected ([#306](https://github.com/arco-design/arco-design-vue/pull/306))\n\n\n## 2.7.0\n\n`2021-11-26`\n\n### 🐛 BugFix\n\n- the prop trigger-props take no effect ([#265](https://github.com/arco-design/arco-design-vue/pull/265))\n- Horizontal menu items are not displayed normally when they are collapsed and then expanded ([#264](https://github.com/arco-design/arco-design-vue/pull/264))\n\n\n## 2.6.0\n\n`2021-11-19`\n\n### 💅 Style\n\n- pop menu adapts to dark theme ([#193](https://github.com/arco-design/arco-design-vue/pull/193))\n\n\n## 2.3.0\n\n`2021-11-12`\n\n### 🐛 BugFix\n\n- Fix the problem that the parent menu is not selected when nesting custom components ([#147](https://github.com/arco-design/arco-design-vue/pull/147))\n\n\n## 2.1.1\n\n`2021-11-08`\n\n### 💎 Enhancement\n\n- Change the default expansion method of pop-up `menu` to hover ([#111](https://github.com/arco-design/arco-design-vue/pull/111))\n\n"
  },
  {
    "path": "packages/web-vue/components/menu/CHANGELOG.zh-CN.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.56.0\n\n`2024-07-26`\n\n### 💎 功能优化\n\n- 修复已选中菜单项中的颜色动画过渡效果 ([#3192](https://github.com/arco-design/arco-design-vue/pull/3192))\n\n\n## 2.54.5\n\n`2024-02-21`\n\n### 🐛 问题修复\n\n- 修复警告 “Invalid prop name: key is a reserved property.” ([#2978](https://github.com/arco-design/arco-design-vue/pull/2978))\n\n\n## 2.43.0\n\n`2023-02-10`\n\n### 🐛 问题修复\n\n- 修复热更新问题 ([#2091](https://github.com/arco-design/arco-design-vue/pull/2091))\n\n\n## 2.34.1\n\n`2022-08-05`\n\n### 🐛 问题修复\n\n- 修复新版本 Chrome 中 popup 属性导致警告的问题 ([#1487](https://github.com/arco-design/arco-design-vue/pull/1487))\n\n\n## 2.31.0\n\n`2022-06-17`\n\n### 🐛 问题修复\n\n- 修复横向菜单收起后无法展开的问题 ([#1297](https://github.com/arco-design/arco-design-vue/pull/1297))\n\n\n## 2.25.1\n\n`2022-04-27`\n\n### 🐛 问题修复\n\n- 菜单数据收集器收集到的数据有缺失 ([#1034](https://github.com/arco-design/arco-design-vue/pull/1034))\n\n\n## 2.25.0\n\n`2022-04-22`\n\n### 💅 样式更新\n\n- 弹出菜单的 icon 增加 margin-right ([#1029](https://github.com/arco-design/arco-design-vue/pull/1029))\n\n\n## 2.24.0\n\n`2022-04-15`\n\n### 🐛 问题修复\n\n- 修复 `auto-scroll-into-view` 无效的问题 ([#966](https://github.com/arco-design/arco-design-vue/pull/966))\n\n\n## 2.23.0\n\n`2022-04-08`\n\n### 🆕 新增功能\n\n- 支持通过 `popup-max-height` 设置弹出框的最大高度 ([#949](https://github.com/arco-design/arco-design-vue/pull/949))\n\n\n## 2.22.1\n\n`2022-04-02`\n\n### 🐛 问题修复\n\n- 修复菜单图标的高度不对的问题 ([#928](https://github.com/arco-design/arco-design-vue/pull/928))\n\n\n## 2.22.0\n\n`2022-04-01`\n\n### 🐛 问题修复\n\n- 弹出框中的图标与文字没有对齐 ([#889](https://github.com/arco-design/arco-design-vue/pull/889))\n\n\n## 2.21.0\n\n`2022-03-25`\n\n### 💅 样式更新\n\n- 解决菜单项的缩进换行的问题 ([#866](https://github.com/arco-design/arco-design-vue/pull/866))\n\n\n## 2.18.0\n\n`2022-03-04`\n\n### 💅 样式更新\n\n- 菜单项的图标没有垂直居中 ([#767](https://github.com/arco-design/arco-design-vue/pull/767))\n\n\n## 2.18.0-beta.1\n\n`2022-02-18`\n\n### 🆕 新增功能\n\n- 支持响应式收缩 ([#700](https://github.com/arco-design/arco-design-vue/pull/700))\n\n\n## 2.11.0\n\n`2021-12-17`\n\n### 🆕 新增功能\n\n- `sub-menu` 和 `menu-item` 新增 icon 的 slot ([#412](https://github.com/arco-design/arco-design-vue/pull/412))\n\n### 💅 样式更新\n\n- 修复侧边栏可折叠的时候高度溢出的问题 ([#416](https://github.com/arco-design/arco-design-vue/pull/416))\n\n\n## 2.10.0\n\n`2021-12-10`\n\n### 🐛 问题修复\n\n- 修复菜单宽度没有撑满父元素的问题 ([#346](https://github.com/arco-design/arco-design-vue/pull/346))\n\n\n## 2.8.0\n\n`2021-12-01`\n\n### 🆕 新增功能\n\n- 新增属性  `auto-open-selected` ([#306](https://github.com/arco-design/arco-design-vue/pull/306))\n\n\n## 2.7.0\n\n`2021-11-26`\n\n### 🐛 问题修复\n\n- `trigger-props` 不生效 ([#265](https://github.com/arco-design/arco-design-vue/pull/265))\n- 横向的菜单项收起再展开的时候没有正常显示 ([#264](https://github.com/arco-design/arco-design-vue/pull/264))\n\n\n## 2.6.0\n\n`2021-11-19`\n\n### 💅 样式更新\n\n- 弹出型子菜单适配暗色主题 ([#193](https://github.com/arco-design/arco-design-vue/pull/193))\n\n\n## 2.3.0\n\n`2021-11-12`\n\n### 🐛 问题修复\n\n- 修复嵌套自定义组件的时候父菜单没有高亮的问题 ([#147](https://github.com/arco-design/arco-design-vue/pull/147))\n\n\n## 2.1.1\n\n`2021-11-08`\n\n### 💎 功能优化\n\n- 将弹出型 `menu` 的默认展开方式改为 hover ([#111](https://github.com/arco-design/arco-design-vue/pull/111))\n\n"
  },
  {
    "path": "packages/web-vue/components/menu/README.en-US.md",
    "content": "```yaml\nmeta:\n  type: Component\n  category: Navigation\ntitle: Menu\ndescription: Organize, arrange, and display a list of options.\n```\n\n*Auto translate by google.*\n\n@import ./__demo__/horizontal.md\n\n@import ./__demo__/dark-horizontal.md\n\n@import ./__demo__/collapse-control.md\n\n@import ./__demo__/breakpoint.md\n\n@import ./__demo__/sub-menu.md\n\n@import ./__demo__/size.md\n\n@import ./__demo__/pop.md\n\n@import ./__demo__/pop-button.md\n\n## API\n\n\n### `<menu>` Props\n\n|Attribute|Description|Type|Default|version|\n|---|---|---|:---:|:---|\n|theme|Menu theme|`'light' \\| 'dark'`|`'light'`||\n|mode|The mode of menu|`'vertical' \\| 'horizontal' \\| 'pop' \\| 'popButton'`|`'vertical'`||\n|level-indent|Indentation between levels|`number`|`-`||\n|auto-open|Expand all multi-level menus by default|`boolean`|`false`||\n|collapsed **(v-model)**|Whether to collapse the menu|`boolean`|`-`||\n|default-collapsed|Whether to collapse the menu by default|`boolean`|`false`||\n|collapsed-width|Collapse menu width|`number`|`-`||\n|accordion|Turn on the accordion effect|`boolean`|`false`||\n|auto-scroll-into-view|Whether to automatically scroll the selected item to the visible area|`boolean`|`false`||\n|show-collapse-button|Whether built-in folding button|`boolean`|`false`||\n|selected-keys **(v-model)**|The selected menu item key array|`string[]`|`-`||\n|default-selected-keys|The key array of the menu items selected by default|`string[]`|`[]`||\n|open-keys **(v-model)**|Expanded submenu key array|`string[]`|`-`||\n|default-open-keys|The default expanded submenu key array|`string[]`|`[]`||\n|scroll-config|Scroll to the configuration items in the visible area and receive all the parameters of [scroll-into-view-if-needed](https://github.com/stipsan/scroll-into-view-if-needed)|`{ [key: string]: any }`|`-`||\n|trigger-props|Accept all `Props` of `Trigger` in pop-up mode|`TriggerProps`|`-`||\n|tooltip-props|Accept all `Props` of `ToolTip` in pop-up mode|`object`|`-`||\n|auto-open-selected|Expand the selected menus by default|`boolean`|`false`|2.8.0|\n|breakpoint|Responsive breakpoints, see [Responsive Grid](/vue/component/grid) for details|`'xxl' \\| 'xl' \\| 'lg' \\| 'md' \\| 'sm' \\| 'xs'`|`-`|2.18.0|\n|popup-max-height|The maximum height of popover|`boolean \\| number`|`true`|2.23.0|\n### `<menu>` Events\n\n|Event Name|Description|Parameters|\n|---|---|---|\n|collapse|Triggered when the collapsed state changes|collapsed: `boolean`<br>type: `'clickTrigger'\\|'responsive'`|\n|menu-item-click|Triggered when the menu item is clicked|key: `string`|\n|sub-menu-click|Triggered when the submenu is clicked|key: `string`<br>openKeys: `string[]`|\n### `<menu>` Slots\n\n|Slot Name|Description|Parameters|\n|---|---|---|\n|collapse-icon|Collapse icon|collapsed: `boolean`|\n|expand-icon-right|Icon expand right|-|\n|expand-icon-down|Icon expand down|-|\n\n\n\n\n### `<sub-menu>` Props\n\n|Attribute|Description|Type|Default|version|\n|---|---|---|:---:|:---|\n|title|The title of the submenu|`string`|`-`||\n|selectable|In the pop-up mode, whether the multi-level menu header is also used as a menu item to support the state such as click to select|`boolean`|`false`||\n|popup|Whether to force the use of pop-up mode, `level` indicates the level of the current submenu|`boolean \\| ((level: number) => boolean)`|`false`||\n|popup-max-height|The maximum height of popover|`boolean \\| number`|`true`|2.23.0|\n### `<sub-menu>` Slots\n\n|Slot Name|Description|Parameters|version|\n|---|---|---|:---|\n|title|Title|-||\n|expand-icon-right|Icon expand right|-||\n|expand-icon-down|Icon expand down|-||\n|icon|the icon of menu item|-|2.11.0|\n\n\n\n\n### `<menu-item-group>` Props\n\n|Attribute|Description|Type|Default|\n|---|---|---|:---:|\n|title|The title of the menu group|`string`|`-`|\n### `<menu-item-group>` Slots\n\n|Slot Name|Description|Parameters|\n|---|---|---|\n|title|Title|-|\n\n\n\n\n### `<menu-item>` Props\n\n|Attribute|Description|Type|Default|\n|---|---|---|:---:|\n|disabled|Whether to disable|`boolean`|`false`|\n### `<menu-item>` Slots\n\n|Slot Name|Description|Parameters|version|\n|---|---|---|:---|\n|icon|the icon of menu item|-|2.11.0|\n\n\n\n\n## FAQ\n\n\n### The `key` attribute of `<MenuItem>` and `<SubMenu>` components is required\nWhen using `<MenuItem>` and `<SubMenu>` components in the `<Menu>` component, please pass in the unique `key` attribute.\nThe component will rely on this value when calculating internally. If no value is assigned, some Abnormality in the scene\n"
  },
  {
    "path": "packages/web-vue/components/menu/README.zh-CN.md",
    "content": "```yaml\nmeta:\n  type: 组件\n  category: 导航\ntitle: 菜单 Menu\ndescription: 收纳、排列并展示一系列选项的列表。\n```\n\n@import ./__demo__/horizontal.md\n\n@import ./__demo__/dark-horizontal.md\n\n@import ./__demo__/collapse-control.md\n\n@import ./__demo__/breakpoint.md\n\n@import ./__demo__/sub-menu.md\n\n@import ./__demo__/size.md\n\n@import ./__demo__/pop.md\n\n@import ./__demo__/pop-button.md\n\n## API\n\n\n### `<menu>` Props\n\n|参数名|描述|类型|默认值|版本|\n|---|---|---|:---:|:---|\n|theme|菜单的主题|`'light' \\| 'dark'`|`'light'`||\n|mode|菜单的模式|`'vertical' \\| 'horizontal' \\| 'pop' \\| 'popButton'`|`'vertical'`||\n|level-indent|层级之间的缩进量|`number`|`-`||\n|auto-open|默认展开所有多级菜单|`boolean`|`false`||\n|collapsed **(v-model)**|是否折叠菜单|`boolean`|`-`||\n|default-collapsed|默认是否折叠菜单|`boolean`|`false`||\n|collapsed-width|折叠菜单宽度|`number`|`-`||\n|accordion|开启手风琴效果|`boolean`|`false`||\n|auto-scroll-into-view|是否自动滚动选中项目到可见区域|`boolean`|`false`||\n|show-collapse-button|是否内置折叠按钮|`boolean`|`false`||\n|selected-keys **(v-model)**|选中的菜单项 key 数组|`string[]`|`-`||\n|default-selected-keys|默认选中的菜单项 key 数组|`string[]`|`[]`||\n|open-keys **(v-model)**|展开的子菜单 key 数组|`string[]`|`-`||\n|default-open-keys|默认展开的子菜单 key 数组|`string[]`|`[]`||\n|scroll-config|滚动到可见区域的配置项，接收所有[scroll-into-view-if-needed](https://github.com/stipsan/scroll-into-view-if-needed)的参数|`{ [key: string]: any }`|`-`||\n|trigger-props|弹出模式下可接受所有 `Trigger` 的 `Props`|`TriggerProps`|`-`||\n|tooltip-props|弹出模式下可接受所有 `ToolTip` 的 `Props`|`object`|`-`||\n|auto-open-selected|默认展开选中的菜单|`boolean`|`false`|2.8.0|\n|breakpoint|响应式的断点, 详见[响应式栅格](/vue/component/grid)|`'xxl' \\| 'xl' \\| 'lg' \\| 'md' \\| 'sm' \\| 'xs'`|`-`|2.18.0|\n|popup-max-height|弹出框的最大高度|`boolean \\| number`|`true`|2.23.0|\n### `<menu>` Events\n\n|事件名|描述|参数|\n|---|---|---|\n|collapse|折叠状态改变时触发|collapsed: `boolean`<br>type: `'clickTrigger'\\|'responsive'`|\n|menu-item-click|点击菜单项时触发|key: `string`|\n|sub-menu-click|点击子菜单时触发|key: `string`<br>openKeys: `string[]`|\n### `<menu>` Slots\n\n|插槽名|描述|参数|\n|---|:---:|---|\n|collapse-icon|折叠图标|collapsed: `boolean`|\n|expand-icon-right|向右展开的图标|-|\n|expand-icon-down|向下展开的图标|-|\n\n\n\n\n### `<sub-menu>` Props\n\n|参数名|描述|类型|默认值|版本|\n|---|---|---|:---:|:---|\n|title|子菜单的标题|`string`|`-`||\n|selectable|弹出模式下，是否将多级菜单头也作为一个菜单项，支持点击选中等状态|`boolean`|`false`||\n|popup|是否强制使用弹出模式，`level` 表示当前子菜单的层级|`boolean \\| ((level: number) => boolean)`|`false`||\n|popup-max-height|弹出框的最大高度|`boolean \\| number`|`true`|2.23.0|\n### `<sub-menu>` Slots\n\n|插槽名|描述|参数|版本|\n|---|:---:|---|:---|\n|title|标题|-||\n|expand-icon-right|向右展开的图标|-||\n|expand-icon-down|向下展开的图标|-||\n|icon|菜单的图标|-|2.11.0|\n\n\n\n\n### `<menu-item-group>` Props\n\n|参数名|描述|类型|默认值|\n|---|---|---|:---:|\n|title|菜单组的标题|`string`|`-`|\n### `<menu-item-group>` Slots\n\n|插槽名|描述|参数|\n|---|:---:|---|\n|title|标题|-|\n\n\n\n\n### `<menu-item>` Props\n\n|参数名|描述|类型|默认值|\n|---|---|---|:---:|\n|disabled|是否禁用|`boolean`|`false`|\n### `<menu-item>` Slots\n\n|插槽名|描述|参数|版本|\n|---|:---:|---|:---|\n|icon|菜单的图标|-|2.11.0|\n\n\n\n\n## FAQ\n\n### `<MenuItem>` 和 `<SubMenu>` 组件的 `key` 属性为必填\n在 `<Menu>` 组件中使用 `<MenuItem>` 和 `<SubMenu>` 组件时，请传入唯一的 `key` 属性。\n组件内部在进行计算时会依赖此值，如果没有赋值会导致部分场景下异常\n\n"
  },
  {
    "path": "packages/web-vue/components/menu/TEMPLATE.md",
    "content": "## zh-CN\n```yaml\nmeta:\n  type: 组件\n  category: 导航\ntitle: 菜单 Menu\ndescription: 收纳、排列并展示一系列选项的列表。\n```\n---\n## en-US\n```yaml\nmeta:\n  type: Component\n  category: Navigation\ntitle: Menu\ndescription: Organize, arrange, and display a list of options.\n```\n---\n\n@import ./__demo__/horizontal.md\n\n@import ./__demo__/dark-horizontal.md\n\n@import ./__demo__/collapse-control.md\n\n@import ./__demo__/breakpoint.md\n\n@import ./__demo__/sub-menu.md\n\n@import ./__demo__/size.md\n\n@import ./__demo__/pop.md\n\n@import ./__demo__/pop-button.md\n\n## API\n\n%%API(base-menu.vue)%%\n\n%%API(sub-menu.tsx)%%\n\n%%API(item-group.vue)%%\n\n%%API(item.tsx)%%\n\n\n## FAQ\n\n## zh-CN\n### `<MenuItem>` 和 `<SubMenu>` 组件的 `key` 属性为必填\n在 `<Menu>` 组件中使用 `<MenuItem>` 和 `<SubMenu>` 组件时，请传入唯一的 `key` 属性。\n组件内部在进行计算时会依赖此值，如果没有赋值会导致部分场景下异常\n\n---\n\n## en-US\n### The `key` attribute of `<MenuItem>` and `<SubMenu>` components is required\nWhen using `<MenuItem>` and `<SubMenu>` components in the `<Menu>` component, please pass in the unique `key` attribute.\nThe component will rely on this value when calculating internally. If no value is assigned, some Abnormality in the scene\n\n---\n"
  },
  {
    "path": "packages/web-vue/components/menu/__demo__/breakpoint.md",
    "content": "```yaml\ntitle:\n  zh-CN: 响应式收缩\n  en-US: Responsive collapsed\n```\n\n## zh-CN\n\n设置 `breakpoint` 可触发响应式收缩。\n\n---\n\n## en-US\n\nset `breakpoint` for responsive contraction.\n\n---\n\n```vue\n<template>\n  <div class=\"menu-demo\">\n    <a-menu\n      :style=\"{ width: '200px', height: '100%' }\"\n      :default-open-keys=\"['0']\"\n      :default-selected-keys=\"['0_2']\"\n      show-collapse-button\n      breakpoint=\"xl\"\n      @collapse=\"onCollapse\"\n    >\n      <a-sub-menu key=\"0\">\n        <template #icon><icon-apps></icon-apps></template>\n        <template #title>Navigation 1</template>\n        <a-menu-item key=\"0_0\">Menu 1</a-menu-item>\n        <a-menu-item key=\"0_1\">Menu 2</a-menu-item>\n        <a-menu-item key=\"0_2\">Menu 3</a-menu-item>\n        <a-menu-item key=\"0_3\">Menu 4</a-menu-item>\n      </a-sub-menu>\n      <a-sub-menu key=\"1\">\n        <template #icon><icon-bug></icon-bug></template>\n        <template #title>Navigation 2</template>\n        <a-menu-item key=\"1_0\">Menu 1</a-menu-item>\n        <a-menu-item key=\"1_1\">Menu 2</a-menu-item>\n        <a-menu-item key=\"1_2\">Menu 3</a-menu-item>\n      </a-sub-menu>\n      <a-sub-menu key=\"2\">\n        <template #icon><icon-bulb></icon-bulb></template>\n        <template #title>Navigation 3</template>\n        <a-menu-item key=\"2_0\">Menu 1</a-menu-item>\n        <a-menu-item key=\"2_1\">Menu 2</a-menu-item>\n        <a-sub-menu key=\"2_2\" title=\"Navigation 4\">\n          <a-menu-item key=\"2_2_0\">Menu 1</a-menu-item>\n          <a-menu-item key=\"2_2_1\">Menu 2</a-menu-item>\n        </a-sub-menu>\n      </a-sub-menu>\n    </a-menu>\n  </div>\n</template>\n<script>\nimport { ref } from 'vue';\nimport { Message } from '@arco-design/web-vue';\nimport {\n  IconMenuFold,\n  IconMenuUnfold,\n  IconApps,\n  IconBug,\n  IconBulb,\n} from '@arco-design/web-vue/es/icon';\n\nexport default {\n  components: {\n    IconMenuFold,\n    IconMenuUnfold,\n    IconApps,\n    IconBug,\n    IconBulb,\n  },\n  setup() {\n    return {\n      onCollapse(val, type) {\n        const content = type === 'responsive' ? '触发响应式收缩' : '点击触发收缩';\n        Message.info({\n          content,\n          duration: 2000,\n        });\n      }\n    };\n  }\n};\n</script>\n<style scoped>\n.menu-demo {\n  box-sizing: border-box;\n  width: 100%;\n  height: 600px;\n  padding: 40px;\n  background-color: var(--color-neutral-2);\n}\n</style>\n```\n"
  },
  {
    "path": "packages/web-vue/components/menu/__demo__/collapse-control.md",
    "content": "```yaml\ntitle:\n  zh-CN: 缩起内嵌菜单\n  en-US: Collapsed Menu\n```\n\n## zh-CN\n\n通过 `collapsed` 来指定菜单收起。\n\n---\n\n## en-US\n\nUse `collapsed` to specify the menu to collapse.\n\n---\n\n```vue\n<template>\n  <div class=\"menu-demo\">\n    <a-button\n      :style=\"{ padding: '0 12px', height: '30px', lineHeight: '30px', marginBottom: '4px' }\"\n      type=\"primary\"\n      @click=\"toggleCollapse\"\n    >\n      <icon-menu-unfold v-if=\"collapsed\" />\n      <icon-menu-fold v-else />\n    </a-button>\n    <a-menu\n      :style=\"{ width: '200px', borderRadius: '4px' }\"\n      theme=\"dark\"\n      :collapsed=\"collapsed\"\n      :default-open-keys=\"['0']\"\n      :default-selected-keys=\"['0_2']\"\n    >\n      <a-sub-menu key=\"0\">\n        <template #icon><icon-apps></icon-apps></template>\n        <template #title>Navigation 1</template>\n        <a-menu-item key=\"0_0\">Menu 1</a-menu-item>\n        <a-menu-item key=\"0_1\">Menu 2</a-menu-item>\n        <a-menu-item key=\"0_2\">Menu 3</a-menu-item>\n        <a-menu-item key=\"0_3\">Menu 4</a-menu-item>\n      </a-sub-menu>\n      <a-sub-menu key=\"1\">\n        <template #icon><icon-bug></icon-bug></template>\n        <template #title>Navigation 2</template>\n        <a-menu-item key=\"1_0\">Menu 1</a-menu-item>\n        <a-menu-item key=\"1_1\">Menu 2</a-menu-item>\n        <a-menu-item key=\"1_2\">Menu 3</a-menu-item>\n      </a-sub-menu>\n      <a-sub-menu key=\"2\">\n        <template #icon><icon-bulb></icon-bulb></template>\n        <template #title>Navigation 3</template>\n        <a-menu-item key=\"2_0\">Menu 1</a-menu-item>\n        <a-menu-item key=\"2_1\">Menu 2</a-menu-item>\n        <a-sub-menu key=\"2_2\" title=\"Navigation 4\">\n          <a-menu-item key=\"2_2_0\">Menu 1</a-menu-item>\n          <a-menu-item key=\"2_2_1\">Menu 2</a-menu-item>\n        </a-sub-menu>\n      </a-sub-menu>\n    </a-menu>\n  </div>\n</template>\n<script>\nimport { ref } from 'vue';\nimport {\n  IconMenuFold,\n  IconMenuUnfold,\n  IconApps,\n  IconBug,\n  IconBulb,\n} from '@arco-design/web-vue/es/icon';\n\nexport default {\n  components: {\n    IconMenuFold,\n    IconMenuUnfold,\n    IconApps,\n    IconBug,\n    IconBulb,\n  },\n  setup() {\n    const collapsed = ref(false);\n    return {\n      collapsed,\n      toggleCollapse: () => { collapsed.value = !collapsed.value; },\n    }\n  }\n};\n</script>\n<style scoped>\n.menu-demo {\n  box-sizing: border-box;\n  width: 100%;\n  padding: 40px;\n  background-color: var(--color-neutral-2);\n}\n</style>\n```\n"
  },
  {
    "path": "packages/web-vue/components/menu/__demo__/dark-horizontal.md",
    "content": "```yaml\ntitle:\n  zh-CN: 深色模式导航\n  en-US: Dark Theme\n```\n\n## zh-CN\n\n通过 `theme` 指定主题，分为 `light` 和 `dark` 两种。\n\n---\n\n## en-US\n\nThe theme is specified by `theme`, which can be divided into two types: `light` and `dark`.\n\n---\n\n```vue\n<template>\n  <div class=\"menu-demo\">\n    <a-menu mode=\"horizontal\" theme=\"dark\" :default-selected-keys=\"['1']\">\n      <a-menu-item key=\"0\" :style=\"{ padding: 0, marginRight: '38px' }\" disabled>\n        <div\n          :style=\"{\n            width: '80px',\n            height: '30px',\n            background: 'var(--color-fill-3)',\n            cursor: 'text',\n          }\"\n        />\n      </a-menu-item>\n      <a-menu-item key=\"1\">Home</a-menu-item>\n      <a-menu-item key=\"2\">Solution</a-menu-item>\n      <a-menu-item key=\"3\">Cloud Service</a-menu-item>\n      <a-menu-item key=\"4\">Cooperation</a-menu-item>\n    </a-menu>\n  </div>\n</template>\n<style scoped>\n.menu-demo {\n  box-sizing: border-box;\n  width: 100%;\n  padding: 40px;\n  background-color: var(--color-neutral-2);\n}\n</style>\n```\n"
  },
  {
    "path": "packages/web-vue/components/menu/__demo__/horizontal.md",
    "content": "```yaml\ntitle:\n  zh-CN: 顶部导航菜单\n  en-US: Horizontal\n```\n\n## zh-CN\n\n设置 `mode` 为 `horizontal` 时，使用水平菜单。\n\n---\n\n## en-US\n\nBy setting `mode` to `horizontal`, you can use the horizontal menu.\n\n---\n\n```vue\n<template>\n  <div class=\"menu-demo\">\n    <a-menu mode=\"horizontal\" :default-selected-keys=\"['1']\">\n      <a-menu-item key=\"0\" :style=\"{ padding: 0, marginRight: '38px' }\" disabled>\n        <div\n          :style=\"{\n            width: '80px',\n            height: '30px',\n            borderRadius: '2px',\n            background: 'var(--color-fill-3)',\n            cursor: 'text',\n          }\"\n        />\n      </a-menu-item>\n      <a-menu-item key=\"1\">Home</a-menu-item>\n      <a-menu-item key=\"2\">Solution</a-menu-item>\n      <a-menu-item key=\"3\">Cloud Service</a-menu-item>\n      <a-menu-item key=\"4\">Cooperation</a-menu-item>\n    </a-menu>\n  </div>\n</template>\n<style scoped>\n.menu-demo {\n  box-sizing: border-box;\n  width: 100%;\n  padding: 40px;\n  background-color: var(--color-neutral-2);\n}\n</style>\n```\n"
  },
  {
    "path": "packages/web-vue/components/menu/__demo__/pop-button.md",
    "content": "```yaml\ntitle:\n  zh-CN: 悬浮按钮菜单\n  en-US: Floating Button Menu\n```\n\n## zh-CN\n\n指定 `mode` 为 `popButton` 使用按钮组样式的悬浮菜单。\n\n---\n\n## en-US\n\nBy setting `mode` to `popButton`, you can use a button group style floating menu.\n\n---\n\n```vue\n<template>\n  <div class=\"menu-demo\">\n    <a-trigger\n      :trigger=\"['click', 'hover']\"\n      clickToClose\n      position=\"top\"\n      v-model:popupVisible=\"popupVisible1\"\n    >\n      <div :class=\"`button-trigger ${popupVisible1 ? 'button-trigger-active' : ''}`\">\n        <IconClose v-if=\"popupVisible1\" />\n        <IconMessage v-else />\n      </div>\n      <template #content>\n        <a-menu\n          :style=\"{ marginBottom: '-4px' }\"\n          mode=\"popButton\"\n          :tooltipProps=\"{ position: 'left' }\"\n          showCollapseButton\n        >\n          <a-menu-item key=\"1\">\n            <template #icon><IconBug></IconBug></template>\n            Bugs\n          </a-menu-item>\n          <a-menu-item key=\"2\">\n            <template #icon><IconBulb></IconBulb></template>\n            Ideas\n          </a-menu-item>\n        </a-menu>\n      </template>\n    </a-trigger>\n\n    <a-trigger\n      :trigger=\"['click', 'hover']\"\n      clickToClose\n      position=\"top\"\n      v-model:popupVisible=\"popupVisible2\"\n    >\n      <div :class=\"`button-trigger ${popupVisible2 ? 'button-trigger-active' : ''}`\">\n        <IconClose v-if=\"popupVisible2\" />\n        <IconMessage v-else />\n      </div>\n      <template #content>\n        <a-menu\n          :style=\"{ marginBottom: '-4px' }\"\n          mode=\"popButton\"\n          :tooltipProps=\"{ position: 'left' }\"\n          showCollapseButton\n        >\n          <a-menu-item key=\"1\">\n            <template #icon><IconBug></IconBug></template>\n            Bugs\n          </a-menu-item>\n          <a-menu-item key=\"2\">\n            <template #icon><IconBulb></IconBulb></template>\n            Ideas\n          </a-menu-item>\n        </a-menu>\n      </template>\n    </a-trigger>\n  </div>\n</template>\n<script>\nimport {\n  IconBug,\n  IconBulb,\n  IconClose,\n  IconMessage,\n} from '@arco-design/web-vue/es/icon';\n\nexport default {\n  components: {\n    IconBug,\n    IconBulb,\n    IconClose,\n    IconMessage,\n  },\n  data() {\n    return {\n      popupVisible1: false,\n      popupVisible2: false,\n    };\n  }\n};\n</script>\n<style scoped>\n.menu-demo {\n  box-sizing: border-box;\n  width: 660px;\n  height: 300px;\n  padding: 40px;\n  background-color: var(--color-fill-2);\n  position: relative;\n}\n.button-trigger {\n  position: absolute;\n  bottom: 80px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 40px;\n  height: 40px;\n  color: var(--color-white);\n  font-size: 14px;\n  border-radius: 50%;\n  cursor: pointer;\n  transition: all 0.1s;\n}\n/* button left */\n.button-trigger:nth-child(1) {\n  left: 150px;\n  background-color: var(--color-neutral-5);\n}\n.button-trigger:nth-child(1).button-trigger-active {\n  background-color: var(--color-neutral-4);\n}\n/* button right */\n.button-trigger:nth-child(2) {\n  left: 372px;\n  background-color: rgb(var(--arcoblue-6));\n}\n.button-trigger:nth-child(3).button-trigger-active {\n  background-color: var(--color-primary-light-4);\n}\n</style>\n```\n"
  },
  {
    "path": "packages/web-vue/components/menu/__demo__/pop.md",
    "content": "```yaml\ntitle:\n  zh-CN: 悬浮菜单\n  en-US: Floating Menu\n```\n\n## zh-CN\n\n指定 `mode` 为 `pop` 可以使用悬浮菜单。\n\n---\n\n## en-US\n\nSpecify `mode` as `pop` to use floating menu.\n\n---\n\n```vue\n<template>\n  <div class=\"menu-demo\">\n    <a-menu mode=\"pop\" showCollapseButton>\n      <a-menu-item key=\"1\">\n        <template #icon><icon-apps></icon-apps></template>\n        Navigation 1\n      </a-menu-item>\n      <a-sub-menu key=\"2\">\n        <template #icon><icon-bug></icon-bug></template>\n        <template #title>Navigation 2</template>\n        <a-menu-item key=\"2_0\">Beijing</a-menu-item>\n        <a-menu-item key=\"2_1\">Shanghai</a-menu-item>\n        <a-menu-item key=\"2_2\">Guangzhou</a-menu-item>\n      </a-sub-menu>\n      <a-sub-menu key=\"3\">\n        <template #icon><icon-bulb></icon-bulb></template>\n        <template #title>Navigation 3</template>\n        <a-menu-item key=\"3_0\">Wuhan</a-menu-item>\n        <a-menu-item key=\"3_1\">Chengdu</a-menu-item>\n      </a-sub-menu>\n      <a-menu-item key=\"4\">\n        <template #icon><icon-safe></icon-safe></template>\n        Navigation 4\n      </a-menu-item>\n      <a-menu-item key=\"5\">\n        <template #icon><icon-fire></icon-fire></template>\n        Navigation 5\n      </a-menu-item>\n    </a-menu>\n  </div>\n</template>\n<script>\nimport {\n  IconApps,\n  IconBug,\n  IconBulb,\n} from '@arco-design/web-vue/es/icon';\n\nexport default {\n  components: {\n    IconApps,\n    IconBug,\n    IconBulb,\n  },\n};\n</script>\n<style scoped>\n.menu-demo {\n  width: 100%;\n  height: 600px;\n  padding: 40px;\n  box-sizing: border-box;\n  background-color: var(--color-neutral-2);\n}\n\n.menu-demo .arco-menu {\n  width: 200px;\n  height: 100%;\n  box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);\n}\n\n.menu-demo .arco-menu :deep(.arco-menu-collapse-button) {\n  width: 32px;\n  height: 32px;\n  border-radius: 50%;\n}\n\n.menu-demo .arco-menu:not(.arco-menu-collapsed) :deep(.arco-menu-collapse-button) {\n  right: 0;\n  bottom: 8px;\n  transform: translateX(50%);\n}\n\n.menu-demo .arco-menu:not(.arco-menu-collapsed)::before {\n  content: '';\n  position: absolute;\n  right: 0;\n  bottom: 0;\n  width: 48px;\n  height: 48px;\n  background-color: inherit;\n  border-radius: 50%;\n  box-shadow: -4px 0 2px var(--color-bg-2), 0 0 1px rgba(0, 0, 0, 0.3);\n  transform: translateX(50%);\n}\n\n.menu-demo .arco-menu.arco-menu-collapsed {\n  width: 48px;\n  height: auto;\n  padding-top: 24px;\n  padding-bottom: 138px;\n  border-radius: 22px;\n}\n\n.menu-demo .arco-menu.arco-menu-collapsed :deep(.arco-menu-collapse-button) {\n  right: 8px;\n  bottom: 8px;\n}\n</style>\n```\n"
  },
  {
    "path": "packages/web-vue/components/menu/__demo__/size.md",
    "content": "```yaml\ntitle:\n  zh-CN: 不同大小菜单\n  en-US: Custom Size\n```\n\n## zh-CN\n\n通过 `style` 自由指定菜单的宽度和菜单项的高度。\n\n---\n\n## en-US\n\nFreely specify width of menu and height of menu item through `style`.\n\n---\n\n```vue\n<template>\n  <div class=\"menu-demo\">\n    <a-slider\n      :style=\"{ width: '320px', marginBottom: '24px' }\"\n      v-model=\"width\"\n      :step=\"10\"\n      :min=\"160\"\n      :max=\"400\"\n    />\n    <a-menu\n      showCollapseButton\n      :default-open-keys=\"['0']\"\n      :default-selected-keys=\"['0_1']\"\n      :style=\"{ width: `${width}px`, height: 'calc(100% - 28px)' }\"\n    >\n      <a-sub-menu key=\"0\">\n        <template #icon><IconApps></IconApps></template>\n        <template #title>Navigation 1</template>\n        <a-menu-item key=\"0_0\">Menu 1</a-menu-item>\n        <a-menu-item key=\"0_1\">Menu 2</a-menu-item>\n        <a-menu-item key=\"0_2\" disabled>\n          Menu 3\n        </a-menu-item>\n      </a-sub-menu>\n      <a-sub-menu key=\"1\">\n        <template #icon><IconBug></IconBug></template>\n        <template #title>Navigation 2</template>\n        <a-menu-item key=\"1_0\">Menu 1</a-menu-item>\n        <a-menu-item key=\"1_1\">Menu 2</a-menu-item>\n        <a-menu-item key=\"1_2\">Menu 3</a-menu-item>\n      </a-sub-menu>\n      <a-sub-menu key=\"2\">\n        <template #icon><IconBulb></IconBulb></template>\n        <template #title>Navigation 3</template>\n        <a-menu-item key=\"2_0\">Menu 1</a-menu-item>\n        <a-menu-item key=\"2_1\">Menu 2</a-menu-item>\n        <a-menu-item key=\"2_2\">Menu 3</a-menu-item>\n      </a-sub-menu>\n    </a-menu>\n  </div>\n</template>\n<script>\nimport {\n  IconMenuFold,\n  IconMenuUnfold,\n  IconApps,\n  IconBug,\n  IconBulb,\n} from '@arco-design/web-vue/es/icon';\n\nexport default {\n  components: {\n    IconMenuFold,\n    IconMenuUnfold,\n    IconApps,\n    IconBug,\n    IconBulb,\n  },\n  data() {\n    return {\n      width: 240\n    }\n  }\n};\n</script>\n<style scoped>\n.menu-demo {\n  box-sizing: border-box;\n  width: 100%;\n  height: 600px;\n  padding: 40px;\n  background-color: var(--color-neutral-2);\n}\n</style>\n```\n"
  },
  {
    "path": "packages/web-vue/components/menu/__demo__/sub-menu.md",
    "content": "```yaml\ntitle:\n  zh-CN: 内嵌菜单\n  en-US: Sub Menu\n```\n\n## zh-CN\n\n菜单内可以嵌入多个子项，通过 `openKeys` 可以设置默认打开的子项。\n\n---\n\n## en-US\n\nMultiple sub-items can be embedded in the menu, and the items that are opened by default can be set through `openKeys`.\n\n---\n\n```vue\n<template>\n  <div class=\"menu-demo\">\n    <a-menu\n      :style=\"{ width: '200px', height: '100%' }\"\n      :default-open-keys=\"['0']\"\n      :default-selected-keys=\"['0_1']\"\n      show-collapse-button\n    >\n    <a-menu-item key=\"0_0_0\" data-obj=\"1\">Menu 1</a-menu-item>\n      <a-sub-menu key=\"0\">\n        <template #icon><icon-apps></icon-apps></template>\n        <template #title>Navigation 1</template>\n        <a-menu-item key=\"0_0\">Menu 1</a-menu-item>\n        <a-menu-item key=\"0_1\">Menu 2</a-menu-item>\n        <a-menu-item key=\"0_2\" disabled>Menu 3</a-menu-item>\n      </a-sub-menu>\n      <a-sub-menu key=\"1\">\n        <template #icon><icon-bug></icon-bug></template>\n        <template #title>Navigation 2</template>\n        <a-menu-item key=\"1_0\">Menu 1</a-menu-item>\n        <a-menu-item key=\"1_1\">Menu 2</a-menu-item>\n        <a-menu-item key=\"1_2\">Menu 3</a-menu-item>\n      </a-sub-menu>\n      <a-sub-menu key=\"2\">\n        <template #icon><icon-bulb></icon-bulb></template>\n        <template #title>Navigation 3</template>\n        <a-menu-item-group title=\"Menu Group 1\">\n          <a-menu-item key=\"2_0\">Menu 1</a-menu-item>\n          <a-menu-item key=\"2_1\">Menu 2</a-menu-item>\n        </a-menu-item-group>\n        <a-menu-item-group title=\"Menu Group 2\">\n          <a-menu-item key=\"2_2\">Menu 3</a-menu-item>\n          <a-menu-item key=\"2_3\">Menu 4</a-menu-item>\n        </a-menu-item-group>\n      </a-sub-menu>\n    </a-menu>\n  </div>\n</template>\n<script>\nimport {\n  IconMenuFold,\n  IconMenuUnfold,\n  IconApps,\n  IconBug,\n  IconBulb,\n} from '@arco-design/web-vue/es/icon';\n\nexport default {\n  components: {\n    IconMenuFold,\n    IconMenuUnfold,\n    IconApps,\n    IconBug,\n    IconBulb,\n  },\n};\n</script>\n<style scoped>\n.menu-demo {\n  box-sizing: border-box;\n  width: 100%;\n  height: 600px;\n  padding: 40px;\n  background-color: var(--color-neutral-2);\n}\n</style>\n```\n"
  },
  {
    "path": "packages/web-vue/components/menu/__test__/__snapshots__/demo.test.ts.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`<menu> demo: render [breakpoint] correctly 1`] = `\n\"<div class=\\\\\"menu-demo\\\\\">\n  <div class=\\\\\"arco-menu arco-menu-light arco-menu-vertical\\\\\" style=\\\\\"height: 100%; width: 200px;\\\\\">\n    <div class=\\\\\"arco-menu-inner\\\\\">\n      <div class=\\\\\"arco-menu-inline\\\\\">\n        <div class=\\\\\"arco-menu-inline-header arco-menu-has-icon\\\\\">\n          <!--v-if--><span class=\\\\\"arco-menu-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-apps\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M7 7h13v13H7zM28 7h13v13H28zM7 28h13v13H7zM28 28h13v13H28z\\\\\"></path></svg></span><span class=\\\\\"arco-menu-title\\\\\">Navigation 1</span><span class=\\\\\"arco-menu-icon-suffix is-open\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n        </div>\n        <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\">\n          <div class=\\\\\"arco-menu-inline-content\\\\\">\n            <div class=\\\\\"arco-menu-item\\\\\"><span class=\\\\\"arco-menu-indent-list\\\\\"><span class=\\\\\"arco-menu-indent\\\\\" style=\\\\\"\\\\\"></span></span><span class=\\\\\"arco-menu-item-inner\\\\\">Menu 1</span>\n              <!---->\n            </div>\n            <div class=\\\\\"arco-menu-item\\\\\"><span class=\\\\\"arco-menu-indent-list\\\\\"><span class=\\\\\"arco-menu-indent\\\\\" style=\\\\\"\\\\\"></span></span><span class=\\\\\"arco-menu-item-inner\\\\\">Menu 2</span>\n              <!---->\n            </div>\n            <div class=\\\\\"arco-menu-item arco-menu-selected\\\\\"><span class=\\\\\"arco-menu-indent-list\\\\\"><span class=\\\\\"arco-menu-indent\\\\\" style=\\\\\"\\\\\"></span></span><span class=\\\\\"arco-menu-item-inner\\\\\">Menu 3</span>\n              <!---->\n            </div>\n            <div class=\\\\\"arco-menu-item\\\\\"><span class=\\\\\"arco-menu-indent-list\\\\\"><span class=\\\\\"arco-menu-indent\\\\\" style=\\\\\"\\\\\"></span></span><span class=\\\\\"arco-menu-item-inner\\\\\">Menu 4</span>\n              <!---->\n            </div>\n          </div>\n        </transition-stub>\n      </div>\n      <div class=\\\\\"arco-menu-inline\\\\\">\n        <div class=\\\\\"arco-menu-inline-header arco-menu-has-icon\\\\\">\n          <!--v-if--><span class=\\\\\"arco-menu-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-bug\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M24 42c-6.075 0-11-4.925-11-11V18h22v13c0 6.075-4.925 11-11 11Zm0 0V23m11 4h8M5 27h8M7 14a4 4 0 0 0 4 4h26a4 4 0 0 0 4-4m0 28v-.5a6.5 6.5 0 0 0-6.5-6.5M7 42v-.5a6.5 6.5 0 0 1 6.5-6.5M17 14a7 7 0 1 1 14 0\\\\\"></path></svg></span><span class=\\\\\"arco-menu-title\\\\\">Navigation 2</span><span class=\\\\\"arco-menu-icon-suffix\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n        </div>\n        <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\">\n          <div class=\\\\\"arco-menu-inline-content\\\\\" style=\\\\\"display: none;\\\\\">\n            <div class=\\\\\"arco-menu-item\\\\\"><span class=\\\\\"arco-menu-indent-list\\\\\"><span class=\\\\\"arco-menu-indent\\\\\" style=\\\\\"\\\\\"></span></span><span class=\\\\\"arco-menu-item-inner\\\\\">Menu 1</span>\n              <!---->\n            </div>\n            <div class=\\\\\"arco-menu-item\\\\\"><span class=\\\\\"arco-menu-indent-list\\\\\"><span class=\\\\\"arco-menu-indent\\\\\" style=\\\\\"\\\\\"></span></span><span class=\\\\\"arco-menu-item-inner\\\\\">Menu 2</span>\n              <!---->\n            </div>\n            <div class=\\\\\"arco-menu-item\\\\\"><span class=\\\\\"arco-menu-indent-list\\\\\"><span class=\\\\\"arco-menu-indent\\\\\" style=\\\\\"\\\\\"></span></span><span class=\\\\\"arco-menu-item-inner\\\\\">Menu 3</span>\n              <!---->\n            </div>\n          </div>\n        </transition-stub>\n      </div>\n      <div class=\\\\\"arco-menu-inline\\\\\">\n        <div class=\\\\\"arco-menu-inline-header arco-menu-has-icon\\\\\">\n          <!--v-if--><span class=\\\\\"arco-menu-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-bulb\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M17 42h14m6-24c0 2.823-.9 5.437-2.43 7.568-1.539 2.147-3.185 4.32-3.77 6.897l-.623 2.756A1 1 0 0 1 29.2 36H18.8a1 1 0 0 1-.976-.779l-.624-2.756c-.584-2.576-2.23-4.75-3.77-6.897A12.94 12.94 0 0 1 11 18c0-7.18 5.82-13 13-13s13 5.82 13 13Z\\\\\"></path></svg></span><span class=\\\\\"arco-menu-title\\\\\">Navigation 3</span><span class=\\\\\"arco-menu-icon-suffix\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n        </div>\n        <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\">\n          <div class=\\\\\"arco-menu-inline-content\\\\\" style=\\\\\"display: none;\\\\\">\n            <div class=\\\\\"arco-menu-item\\\\\"><span class=\\\\\"arco-menu-indent-list\\\\\"><span class=\\\\\"arco-menu-indent\\\\\" style=\\\\\"\\\\\"></span></span><span class=\\\\\"arco-menu-item-inner\\\\\">Menu 1</span>\n              <!---->\n            </div>\n            <div class=\\\\\"arco-menu-item\\\\\"><span class=\\\\\"arco-menu-indent-list\\\\\"><span class=\\\\\"arco-menu-indent\\\\\" style=\\\\\"\\\\\"></span></span><span class=\\\\\"arco-menu-item-inner\\\\\">Menu 2</span>\n              <!---->\n            </div>\n            <div class=\\\\\"arco-menu-inline\\\\\">\n              <div class=\\\\\"arco-menu-inline-header\\\\\"><span class=\\\\\"arco-menu-indent-list\\\\\"><span class=\\\\\"arco-menu-indent\\\\\" style=\\\\\"\\\\\"></span></span>Navigation 4<span class=\\\\\"arco-menu-icon-suffix\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span></div>\n              <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\">\n                <div class=\\\\\"arco-menu-inline-content\\\\\" style=\\\\\"display: none;\\\\\">\n                  <div class=\\\\\"arco-menu-item\\\\\"><span class=\\\\\"arco-menu-indent-list\\\\\"><span class=\\\\\"arco-menu-indent\\\\\" style=\\\\\"\\\\\"></span><span class=\\\\\"arco-menu-indent\\\\\" style=\\\\\"\\\\\"></span></span><span class=\\\\\"arco-menu-item-inner\\\\\">Menu 1</span>\n                    <!---->\n                  </div>\n                  <div class=\\\\\"arco-menu-item\\\\\"><span class=\\\\\"arco-menu-indent-list\\\\\"><span class=\\\\\"arco-menu-indent\\\\\" style=\\\\\"\\\\\"></span><span class=\\\\\"arco-menu-indent\\\\\" style=\\\\\"\\\\\"></span></span><span class=\\\\\"arco-menu-item-inner\\\\\">Menu 2</span>\n                    <!---->\n                  </div>\n                </div>\n              </transition-stub>\n            </div>\n          </div>\n        </transition-stub>\n      </div>\n    </div>\n    <div class=\\\\\"arco-menu-collapse-button\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-menu-fold\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n        <path d=\\\\\"M42 11H6M42 24H22M42 37H6M13.66 26.912l-4.82-3.118 4.82-3.118v6.236Z\\\\\"></path>\n      </svg></div>\n  </div>\n</div>\"\n`;\n\nexports[`<menu> demo: render [collapse-control] correctly 1`] = `\n\"<div class=\\\\\"menu-demo\\\\\"><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\" style=\\\\\"padding: 0px 12px; height: 30px; line-height: 30px; margin-bottom: 4px;\\\\\">\n    <!--v-if--><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-menu-fold\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n      <path d=\\\\\"M42 11H6M42 24H22M42 37H6M13.66 26.912l-4.82-3.118 4.82-3.118v6.236Z\\\\\"></path>\n    </svg>\n  </button>\n  <div class=\\\\\"arco-menu arco-menu-dark arco-menu-vertical\\\\\" style=\\\\\"border-radius: 4px; width: 200px;\\\\\">\n    <div class=\\\\\"arco-menu-inner\\\\\">\n      <div class=\\\\\"arco-menu-inline\\\\\">\n        <div class=\\\\\"arco-menu-inline-header arco-menu-has-icon\\\\\">\n          <!--v-if--><span class=\\\\\"arco-menu-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-apps\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M7 7h13v13H7zM28 7h13v13H28zM7 28h13v13H7zM28 28h13v13H28z\\\\\"></path></svg></span><span class=\\\\\"arco-menu-title\\\\\">Navigation 1</span><span class=\\\\\"arco-menu-icon-suffix is-open\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n        </div>\n        <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\">\n          <div class=\\\\\"arco-menu-inline-content\\\\\">\n            <div class=\\\\\"arco-menu-item\\\\\"><span class=\\\\\"arco-menu-indent-list\\\\\"><span class=\\\\\"arco-menu-indent\\\\\" style=\\\\\"\\\\\"></span></span><span class=\\\\\"arco-menu-item-inner\\\\\">Menu 1</span>\n              <!---->\n            </div>\n            <div class=\\\\\"arco-menu-item\\\\\"><span class=\\\\\"arco-menu-indent-list\\\\\"><span class=\\\\\"arco-menu-indent\\\\\" style=\\\\\"\\\\\"></span></span><span class=\\\\\"arco-menu-item-inner\\\\\">Menu 2</span>\n              <!---->\n            </div>\n            <div class=\\\\\"arco-menu-item arco-menu-selected\\\\\"><span class=\\\\\"arco-menu-indent-list\\\\\"><span class=\\\\\"arco-menu-indent\\\\\" style=\\\\\"\\\\\"></span></span><span class=\\\\\"arco-menu-item-inner\\\\\">Menu 3</span>\n              <!---->\n            </div>\n            <div class=\\\\\"arco-menu-item\\\\\"><span class=\\\\\"arco-menu-indent-list\\\\\"><span class=\\\\\"arco-menu-indent\\\\\" style=\\\\\"\\\\\"></span></span><span class=\\\\\"arco-menu-item-inner\\\\\">Menu 4</span>\n              <!---->\n            </div>\n          </div>\n        </transition-stub>\n      </div>\n      <div class=\\\\\"arco-menu-inline\\\\\">\n        <div class=\\\\\"arco-menu-inline-header arco-menu-has-icon\\\\\">\n          <!--v-if--><span class=\\\\\"arco-menu-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-bug\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M24 42c-6.075 0-11-4.925-11-11V18h22v13c0 6.075-4.925 11-11 11Zm0 0V23m11 4h8M5 27h8M7 14a4 4 0 0 0 4 4h26a4 4 0 0 0 4-4m0 28v-.5a6.5 6.5 0 0 0-6.5-6.5M7 42v-.5a6.5 6.5 0 0 1 6.5-6.5M17 14a7 7 0 1 1 14 0\\\\\"></path></svg></span><span class=\\\\\"arco-menu-title\\\\\">Navigation 2</span><span class=\\\\\"arco-menu-icon-suffix\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n        </div>\n        <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\">\n          <div class=\\\\\"arco-menu-inline-content\\\\\" style=\\\\\"display: none;\\\\\">\n            <div class=\\\\\"arco-menu-item\\\\\"><span class=\\\\\"arco-menu-indent-list\\\\\"><span class=\\\\\"arco-menu-indent\\\\\" style=\\\\\"\\\\\"></span></span><span class=\\\\\"arco-menu-item-inner\\\\\">Menu 1</span>\n              <!---->\n            </div>\n            <div class=\\\\\"arco-menu-item\\\\\"><span class=\\\\\"arco-menu-indent-list\\\\\"><span class=\\\\\"arco-menu-indent\\\\\" style=\\\\\"\\\\\"></span></span><span class=\\\\\"arco-menu-item-inner\\\\\">Menu 2</span>\n              <!---->\n            </div>\n            <div class=\\\\\"arco-menu-item\\\\\"><span class=\\\\\"arco-menu-indent-list\\\\\"><span class=\\\\\"arco-menu-indent\\\\\" style=\\\\\"\\\\\"></span></span><span class=\\\\\"arco-menu-item-inner\\\\\">Menu 3</span>\n              <!---->\n            </div>\n          </div>\n        </transition-stub>\n      </div>\n      <div class=\\\\\"arco-menu-inline\\\\\">\n        <div class=\\\\\"arco-menu-inline-header arco-menu-has-icon\\\\\">\n          <!--v-if--><span class=\\\\\"arco-menu-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-bulb\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M17 42h14m6-24c0 2.823-.9 5.437-2.43 7.568-1.539 2.147-3.185 4.32-3.77 6.897l-.623 2.756A1 1 0 0 1 29.2 36H18.8a1 1 0 0 1-.976-.779l-.624-2.756c-.584-2.576-2.23-4.75-3.77-6.897A12.94 12.94 0 0 1 11 18c0-7.18 5.82-13 13-13s13 5.82 13 13Z\\\\\"></path></svg></span><span class=\\\\\"arco-menu-title\\\\\">Navigation 3</span><span class=\\\\\"arco-menu-icon-suffix\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n        </div>\n        <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\">\n          <div class=\\\\\"arco-menu-inline-content\\\\\" style=\\\\\"display: none;\\\\\">\n            <div class=\\\\\"arco-menu-item\\\\\"><span class=\\\\\"arco-menu-indent-list\\\\\"><span class=\\\\\"arco-menu-indent\\\\\" style=\\\\\"\\\\\"></span></span><span class=\\\\\"arco-menu-item-inner\\\\\">Menu 1</span>\n              <!---->\n            </div>\n            <div class=\\\\\"arco-menu-item\\\\\"><span class=\\\\\"arco-menu-indent-list\\\\\"><span class=\\\\\"arco-menu-indent\\\\\" style=\\\\\"\\\\\"></span></span><span class=\\\\\"arco-menu-item-inner\\\\\">Menu 2</span>\n              <!---->\n            </div>\n            <div class=\\\\\"arco-menu-inline\\\\\">\n              <div class=\\\\\"arco-menu-inline-header\\\\\"><span class=\\\\\"arco-menu-indent-list\\\\\"><span class=\\\\\"arco-menu-indent\\\\\" style=\\\\\"\\\\\"></span></span>Navigation 4<span class=\\\\\"arco-menu-icon-suffix\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span></div>\n              <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\">\n                <div class=\\\\\"arco-menu-inline-content\\\\\" style=\\\\\"display: none;\\\\\">\n                  <div class=\\\\\"arco-menu-item\\\\\"><span class=\\\\\"arco-menu-indent-list\\\\\"><span class=\\\\\"arco-menu-indent\\\\\" style=\\\\\"\\\\\"></span><span class=\\\\\"arco-menu-indent\\\\\" style=\\\\\"\\\\\"></span></span><span class=\\\\\"arco-menu-item-inner\\\\\">Menu 1</span>\n                    <!---->\n                  </div>\n                  <div class=\\\\\"arco-menu-item\\\\\"><span class=\\\\\"arco-menu-indent-list\\\\\"><span class=\\\\\"arco-menu-indent\\\\\" style=\\\\\"\\\\\"></span><span class=\\\\\"arco-menu-indent\\\\\" style=\\\\\"\\\\\"></span></span><span class=\\\\\"arco-menu-item-inner\\\\\">Menu 2</span>\n                    <!---->\n                  </div>\n                </div>\n              </transition-stub>\n            </div>\n          </div>\n        </transition-stub>\n      </div>\n    </div>\n    <!--v-if-->\n  </div>\n</div>\"\n`;\n\nexports[`<menu> demo: render [dark-horizontal] correctly 1`] = `\n\"<div class=\\\\\"menu-demo\\\\\">\n  <div class=\\\\\"arco-menu arco-menu-dark arco-menu-horizontal\\\\\">\n    <div class=\\\\\"arco-menu-inner\\\\\">\n      <div class=\\\\\"arco-menu-overflow-wrap\\\\\">\n        <div class=\\\\\"arco-menu-pop arco-menu-pop-header arco-menu-overflow-sub-menu-mirror\\\\\" aria-haspopup=\\\\\"true\\\\\">\n          <!-- header -->\n          <!--v-if--><span>...</span><!-- suffix --><span class=\\\\\"arco-menu-icon-suffix\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n          <!--v-if-->\n        </div>\n        <!---->\n        <div class=\\\\\"arco-menu-item arco-menu-disabled\\\\\" style=\\\\\"padding: 0px; margin-right: 38px;\\\\\">\n          <div style=\\\\\"width: 80px; height: 30px; cursor: text;\\\\\"></div>\n          <!---->\n        </div>\n        <div class=\\\\\"arco-menu-item arco-menu-selected\\\\\">Home<div class=\\\\\"arco-menu-selected-label\\\\\"></div>\n        </div>\n        <div class=\\\\\"arco-menu-item\\\\\">Solution\n          <!---->\n        </div>\n        <div class=\\\\\"arco-menu-item\\\\\">Cloud Service\n          <!---->\n        </div>\n        <div class=\\\\\"arco-menu-item\\\\\">Cooperation\n          <!---->\n        </div>\n        <!---->\n      </div>\n    </div>\n    <!--v-if-->\n  </div>\n</div>\"\n`;\n\nexports[`<menu> demo: render [horizontal] correctly 1`] = `\n\"<div class=\\\\\"menu-demo\\\\\">\n  <div class=\\\\\"arco-menu arco-menu-light arco-menu-horizontal\\\\\">\n    <div class=\\\\\"arco-menu-inner\\\\\">\n      <div class=\\\\\"arco-menu-overflow-wrap\\\\\">\n        <div class=\\\\\"arco-menu-pop arco-menu-pop-header arco-menu-overflow-sub-menu-mirror\\\\\" aria-haspopup=\\\\\"true\\\\\">\n          <!-- header -->\n          <!--v-if--><span>...</span><!-- suffix --><span class=\\\\\"arco-menu-icon-suffix\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n          <!--v-if-->\n        </div>\n        <!---->\n        <div class=\\\\\"arco-menu-item arco-menu-disabled\\\\\" style=\\\\\"padding: 0px; margin-right: 38px;\\\\\">\n          <div style=\\\\\"width: 80px; height: 30px; border-radius: 2px; cursor: text;\\\\\"></div>\n          <!---->\n        </div>\n        <div class=\\\\\"arco-menu-item arco-menu-selected\\\\\">Home<div class=\\\\\"arco-menu-selected-label\\\\\"></div>\n        </div>\n        <div class=\\\\\"arco-menu-item\\\\\">Solution\n          <!---->\n        </div>\n        <div class=\\\\\"arco-menu-item\\\\\">Cloud Service\n          <!---->\n        </div>\n        <div class=\\\\\"arco-menu-item\\\\\">Cooperation\n          <!---->\n        </div>\n        <!---->\n      </div>\n    </div>\n    <!--v-if-->\n  </div>\n</div>\"\n`;\n\nexports[`<menu> demo: render [pop] correctly 1`] = `\n\"<div class=\\\\\"menu-demo\\\\\">\n  <div class=\\\\\"arco-menu arco-menu-light arco-menu-vertical arco-menu-pop\\\\\">\n    <div class=\\\\\"arco-menu-inner\\\\\">\n      <div class=\\\\\"arco-menu-item arco-menu-has-icon\\\\\"><span class=\\\\\"arco-menu-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-apps\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M7 7h13v13H7zM28 7h13v13H28zM7 28h13v13H7zM28 28h13v13H28z\\\\\"></path></svg></span><span class=\\\\\"arco-menu-item-inner arco-menu-title\\\\\"> Navigation 1 </span>\n        <!---->\n      </div>\n      <div class=\\\\\"arco-menu-pop arco-menu-pop-header arco-menu-has-icon\\\\\" aria-haspopup=\\\\\"true\\\\\">\n        <!-- header -->\n        <!--v-if--><span class=\\\\\"arco-menu-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-bug\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M24 42c-6.075 0-11-4.925-11-11V18h22v13c0 6.075-4.925 11-11 11Zm0 0V23m11 4h8M5 27h8M7 14a4 4 0 0 0 4 4h26a4 4 0 0 0 4-4m0 28v-.5a6.5 6.5 0 0 0-6.5-6.5M7 42v-.5a6.5 6.5 0 0 1 6.5-6.5M17 14a7 7 0 1 1 14 0\\\\\"></path></svg></span><span class=\\\\\"arco-menu-title\\\\\">Navigation 2</span><!-- suffix --><span class=\\\\\"arco-menu-icon-suffix\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-right\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"m16 39.513 15.556-15.557L16 8.4\\\\\"></path></svg></span>\n        <!--v-if-->\n      </div>\n      <!---->\n      <div class=\\\\\"arco-menu-pop arco-menu-pop-header arco-menu-has-icon\\\\\" aria-haspopup=\\\\\"true\\\\\">\n        <!-- header -->\n        <!--v-if--><span class=\\\\\"arco-menu-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-bulb\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M17 42h14m6-24c0 2.823-.9 5.437-2.43 7.568-1.539 2.147-3.185 4.32-3.77 6.897l-.623 2.756A1 1 0 0 1 29.2 36H18.8a1 1 0 0 1-.976-.779l-.624-2.756c-.584-2.576-2.23-4.75-3.77-6.897A12.94 12.94 0 0 1 11 18c0-7.18 5.82-13 13-13s13 5.82 13 13Z\\\\\"></path></svg></span><span class=\\\\\"arco-menu-title\\\\\">Navigation 3</span><!-- suffix --><span class=\\\\\"arco-menu-icon-suffix\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-right\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"m16 39.513 15.556-15.557L16 8.4\\\\\"></path></svg></span>\n        <!--v-if-->\n      </div>\n      <!---->\n      <div class=\\\\\"arco-menu-item arco-menu-has-icon\\\\\"><span class=\\\\\"arco-menu-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-safe\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"m16.825 22.165 6 6 10-10M24 6c7 4 16 5 16 5v15s-2 12-16 16.027C10 38 8 26 8 26V11s9-1 16-5Z\\\\\"></path></svg></span><span class=\\\\\"arco-menu-item-inner arco-menu-title\\\\\"> Navigation 4 </span>\n        <!---->\n      </div>\n      <div class=\\\\\"arco-menu-item arco-menu-has-icon\\\\\"><span class=\\\\\"arco-menu-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-fire\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M17.577 27.477C20.022 22.579 17.041 12.98 24.546 6c0 0-1.156 15.55 5.36 17.181 2.145.537 2.68-5.369 4.289-8.59 0 0 .536 4.832 2.68 8.59 3.217 7.517-1 14.117-5.896 17.182-4.289 2.684-14.587 2.807-19.835-5.37-4.824-7.516 0-15.57 0-15.57s4.289 12.35 6.433 8.054Z\\\\\"></path></svg></span><span class=\\\\\"arco-menu-item-inner arco-menu-title\\\\\"> Navigation 5 </span>\n        <!---->\n      </div>\n    </div>\n    <div class=\\\\\"arco-menu-collapse-button\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-menu-fold\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n        <path d=\\\\\"M42 11H6M42 24H22M42 37H6M13.66 26.912l-4.82-3.118 4.82-3.118v6.236Z\\\\\"></path>\n      </svg></div>\n  </div>\n</div>\"\n`;\n\nexports[`<menu> demo: render [pop-button] correctly 1`] = `\n\"<div class=\\\\\"menu-demo\\\\\">\n  <div class=\\\\\"button-trigger\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-message\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n      <path d=\\\\\"M15 20h18m-18 9h9M7 41h17.63C33.67 41 41 33.67 41 24.63V24c0-9.389-7.611-17-17-17S7 14.611 7 24v17Z\\\\\"></path>\n    </svg></div>\n  <!---->\n  <div class=\\\\\"button-trigger\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-message\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n      <path d=\\\\\"M15 20h18m-18 9h9M7 41h17.63C33.67 41 41 33.67 41 24.63V24c0-9.389-7.611-17-17-17S7 14.611 7 24v17Z\\\\\"></path>\n    </svg></div>\n  <!---->\n</div>\"\n`;\n\nexports[`<menu> demo: render [size] correctly 1`] = `\n\"<div class=\\\\\"menu-demo\\\\\">\n  <div class=\\\\\"arco-slider\\\\\" style=\\\\\"width: 320px; margin-bottom: 24px;\\\\\">\n    <div class=\\\\\"arco-slider-track\\\\\">\n      <div class=\\\\\"arco-slider-bar\\\\\" style=\\\\\"left: 0%; right: 66.67%;\\\\\"></div>\n      <!--v-if-->\n      <!--v-if-->\n      <!--v-if-->\n      <!--v-if-->\n      <div style=\\\\\"left: 33.33%;\\\\\" tabindex=\\\\\"0\\\\\" role=\\\\\"slider\\\\\" aria-disabled=\\\\\"false\\\\\" aria-valuemax=\\\\\"400\\\\\" aria-valuemin=\\\\\"160\\\\\" aria-valuenow=\\\\\"240\\\\\" aria-valuetext=\\\\\"240\\\\\" class=\\\\\"arco-slider-btn\\\\\"></div>\n      <!---->\n    </div>\n    <!--v-if-->\n  </div>\n  <div class=\\\\\"arco-menu arco-menu-light arco-menu-vertical\\\\\" style=\\\\\"height: calc(100% - 28px); width: 240px;\\\\\">\n    <div class=\\\\\"arco-menu-inner\\\\\">\n      <div class=\\\\\"arco-menu-inline\\\\\">\n        <div class=\\\\\"arco-menu-inline-header arco-menu-has-icon\\\\\">\n          <!--v-if--><span class=\\\\\"arco-menu-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-apps\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M7 7h13v13H7zM28 7h13v13H28zM7 28h13v13H7zM28 28h13v13H28z\\\\\"></path></svg></span><span class=\\\\\"arco-menu-title\\\\\">Navigation 1</span><span class=\\\\\"arco-menu-icon-suffix is-open\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n        </div>\n        <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\">\n          <div class=\\\\\"arco-menu-inline-content\\\\\">\n            <div class=\\\\\"arco-menu-item\\\\\"><span class=\\\\\"arco-menu-indent-list\\\\\"><span class=\\\\\"arco-menu-indent\\\\\" style=\\\\\"\\\\\"></span></span><span class=\\\\\"arco-menu-item-inner\\\\\">Menu 1</span>\n              <!---->\n            </div>\n            <div class=\\\\\"arco-menu-item arco-menu-selected\\\\\"><span class=\\\\\"arco-menu-indent-list\\\\\"><span class=\\\\\"arco-menu-indent\\\\\" style=\\\\\"\\\\\"></span></span><span class=\\\\\"arco-menu-item-inner\\\\\">Menu 2</span>\n              <!---->\n            </div>\n            <div class=\\\\\"arco-menu-item arco-menu-disabled\\\\\"><span class=\\\\\"arco-menu-indent-list\\\\\"><span class=\\\\\"arco-menu-indent\\\\\" style=\\\\\"\\\\\"></span></span><span class=\\\\\"arco-menu-item-inner\\\\\"> Menu 3 </span>\n              <!---->\n            </div>\n          </div>\n        </transition-stub>\n      </div>\n      <div class=\\\\\"arco-menu-inline\\\\\">\n        <div class=\\\\\"arco-menu-inline-header arco-menu-has-icon\\\\\">\n          <!--v-if--><span class=\\\\\"arco-menu-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-bug\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M24 42c-6.075 0-11-4.925-11-11V18h22v13c0 6.075-4.925 11-11 11Zm0 0V23m11 4h8M5 27h8M7 14a4 4 0 0 0 4 4h26a4 4 0 0 0 4-4m0 28v-.5a6.5 6.5 0 0 0-6.5-6.5M7 42v-.5a6.5 6.5 0 0 1 6.5-6.5M17 14a7 7 0 1 1 14 0\\\\\"></path></svg></span><span class=\\\\\"arco-menu-title\\\\\">Navigation 2</span><span class=\\\\\"arco-menu-icon-suffix\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n        </div>\n        <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\">\n          <div class=\\\\\"arco-menu-inline-content\\\\\" style=\\\\\"display: none;\\\\\">\n            <div class=\\\\\"arco-menu-item\\\\\"><span class=\\\\\"arco-menu-indent-list\\\\\"><span class=\\\\\"arco-menu-indent\\\\\" style=\\\\\"\\\\\"></span></span><span class=\\\\\"arco-menu-item-inner\\\\\">Menu 1</span>\n              <!---->\n            </div>\n            <div class=\\\\\"arco-menu-item\\\\\"><span class=\\\\\"arco-menu-indent-list\\\\\"><span class=\\\\\"arco-menu-indent\\\\\" style=\\\\\"\\\\\"></span></span><span class=\\\\\"arco-menu-item-inner\\\\\">Menu 2</span>\n              <!---->\n            </div>\n            <div class=\\\\\"arco-menu-item\\\\\"><span class=\\\\\"arco-menu-indent-list\\\\\"><span class=\\\\\"arco-menu-indent\\\\\" style=\\\\\"\\\\\"></span></span><span class=\\\\\"arco-menu-item-inner\\\\\">Menu 3</span>\n              <!---->\n            </div>\n          </div>\n        </transition-stub>\n      </div>\n      <div class=\\\\\"arco-menu-inline\\\\\">\n        <div class=\\\\\"arco-menu-inline-header arco-menu-has-icon\\\\\">\n          <!--v-if--><span class=\\\\\"arco-menu-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-bulb\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M17 42h14m6-24c0 2.823-.9 5.437-2.43 7.568-1.539 2.147-3.185 4.32-3.77 6.897l-.623 2.756A1 1 0 0 1 29.2 36H18.8a1 1 0 0 1-.976-.779l-.624-2.756c-.584-2.576-2.23-4.75-3.77-6.897A12.94 12.94 0 0 1 11 18c0-7.18 5.82-13 13-13s13 5.82 13 13Z\\\\\"></path></svg></span><span class=\\\\\"arco-menu-title\\\\\">Navigation 3</span><span class=\\\\\"arco-menu-icon-suffix\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n        </div>\n        <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\">\n          <div class=\\\\\"arco-menu-inline-content\\\\\" style=\\\\\"display: none;\\\\\">\n            <div class=\\\\\"arco-menu-item\\\\\"><span class=\\\\\"arco-menu-indent-list\\\\\"><span class=\\\\\"arco-menu-indent\\\\\" style=\\\\\"\\\\\"></span></span><span class=\\\\\"arco-menu-item-inner\\\\\">Menu 1</span>\n              <!---->\n            </div>\n            <div class=\\\\\"arco-menu-item\\\\\"><span class=\\\\\"arco-menu-indent-list\\\\\"><span class=\\\\\"arco-menu-indent\\\\\" style=\\\\\"\\\\\"></span></span><span class=\\\\\"arco-menu-item-inner\\\\\">Menu 2</span>\n              <!---->\n            </div>\n            <div class=\\\\\"arco-menu-item\\\\\"><span class=\\\\\"arco-menu-indent-list\\\\\"><span class=\\\\\"arco-menu-indent\\\\\" style=\\\\\"\\\\\"></span></span><span class=\\\\\"arco-menu-item-inner\\\\\">Menu 3</span>\n              <!---->\n            </div>\n          </div>\n        </transition-stub>\n      </div>\n    </div>\n    <div class=\\\\\"arco-menu-collapse-button\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-menu-fold\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n        <path d=\\\\\"M42 11H6M42 24H22M42 37H6M13.66 26.912l-4.82-3.118 4.82-3.118v6.236Z\\\\\"></path>\n      </svg></div>\n  </div>\n</div>\"\n`;\n\nexports[`<menu> demo: render [sub-menu] correctly 1`] = `\n\"<div class=\\\\\"menu-demo\\\\\">\n  <div class=\\\\\"arco-menu arco-menu-light arco-menu-vertical\\\\\" style=\\\\\"height: 100%; width: 200px;\\\\\">\n    <div class=\\\\\"arco-menu-inner\\\\\">\n      <div class=\\\\\"arco-menu-item\\\\\" data-obj=\\\\\"1\\\\\">Menu 1\n        <!---->\n      </div>\n      <div class=\\\\\"arco-menu-inline\\\\\">\n        <div class=\\\\\"arco-menu-inline-header arco-menu-has-icon\\\\\">\n          <!--v-if--><span class=\\\\\"arco-menu-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-apps\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M7 7h13v13H7zM28 7h13v13H28zM7 28h13v13H7zM28 28h13v13H28z\\\\\"></path></svg></span><span class=\\\\\"arco-menu-title\\\\\">Navigation 1</span><span class=\\\\\"arco-menu-icon-suffix is-open\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n        </div>\n        <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\">\n          <div class=\\\\\"arco-menu-inline-content\\\\\">\n            <div class=\\\\\"arco-menu-item\\\\\"><span class=\\\\\"arco-menu-indent-list\\\\\"><span class=\\\\\"arco-menu-indent\\\\\" style=\\\\\"\\\\\"></span></span><span class=\\\\\"arco-menu-item-inner\\\\\">Menu 1</span>\n              <!---->\n            </div>\n            <div class=\\\\\"arco-menu-item arco-menu-selected\\\\\"><span class=\\\\\"arco-menu-indent-list\\\\\"><span class=\\\\\"arco-menu-indent\\\\\" style=\\\\\"\\\\\"></span></span><span class=\\\\\"arco-menu-item-inner\\\\\">Menu 2</span>\n              <!---->\n            </div>\n            <div class=\\\\\"arco-menu-item arco-menu-disabled\\\\\"><span class=\\\\\"arco-menu-indent-list\\\\\"><span class=\\\\\"arco-menu-indent\\\\\" style=\\\\\"\\\\\"></span></span><span class=\\\\\"arco-menu-item-inner\\\\\">Menu 3</span>\n              <!---->\n            </div>\n          </div>\n        </transition-stub>\n      </div>\n      <div class=\\\\\"arco-menu-inline\\\\\">\n        <div class=\\\\\"arco-menu-inline-header arco-menu-has-icon\\\\\">\n          <!--v-if--><span class=\\\\\"arco-menu-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-bug\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M24 42c-6.075 0-11-4.925-11-11V18h22v13c0 6.075-4.925 11-11 11Zm0 0V23m11 4h8M5 27h8M7 14a4 4 0 0 0 4 4h26a4 4 0 0 0 4-4m0 28v-.5a6.5 6.5 0 0 0-6.5-6.5M7 42v-.5a6.5 6.5 0 0 1 6.5-6.5M17 14a7 7 0 1 1 14 0\\\\\"></path></svg></span><span class=\\\\\"arco-menu-title\\\\\">Navigation 2</span><span class=\\\\\"arco-menu-icon-suffix\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n        </div>\n        <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\">\n          <div class=\\\\\"arco-menu-inline-content\\\\\" style=\\\\\"display: none;\\\\\">\n            <div class=\\\\\"arco-menu-item\\\\\"><span class=\\\\\"arco-menu-indent-list\\\\\"><span class=\\\\\"arco-menu-indent\\\\\" style=\\\\\"\\\\\"></span></span><span class=\\\\\"arco-menu-item-inner\\\\\">Menu 1</span>\n              <!---->\n            </div>\n            <div class=\\\\\"arco-menu-item\\\\\"><span class=\\\\\"arco-menu-indent-list\\\\\"><span class=\\\\\"arco-menu-indent\\\\\" style=\\\\\"\\\\\"></span></span><span class=\\\\\"arco-menu-item-inner\\\\\">Menu 2</span>\n              <!---->\n            </div>\n            <div class=\\\\\"arco-menu-item\\\\\"><span class=\\\\\"arco-menu-indent-list\\\\\"><span class=\\\\\"arco-menu-indent\\\\\" style=\\\\\"\\\\\"></span></span><span class=\\\\\"arco-menu-item-inner\\\\\">Menu 3</span>\n              <!---->\n            </div>\n          </div>\n        </transition-stub>\n      </div>\n      <div class=\\\\\"arco-menu-inline\\\\\">\n        <div class=\\\\\"arco-menu-inline-header arco-menu-has-icon\\\\\">\n          <!--v-if--><span class=\\\\\"arco-menu-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-bulb\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M17 42h14m6-24c0 2.823-.9 5.437-2.43 7.568-1.539 2.147-3.185 4.32-3.77 6.897l-.623 2.756A1 1 0 0 1 29.2 36H18.8a1 1 0 0 1-.976-.779l-.624-2.756c-.584-2.576-2.23-4.75-3.77-6.897A12.94 12.94 0 0 1 11 18c0-7.18 5.82-13 13-13s13 5.82 13 13Z\\\\\"></path></svg></span><span class=\\\\\"arco-menu-title\\\\\">Navigation 3</span><span class=\\\\\"arco-menu-icon-suffix\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n        </div>\n        <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\">\n          <div class=\\\\\"arco-menu-inline-content\\\\\" style=\\\\\"display: none;\\\\\">\n            <div class=\\\\\"arco-menu-group\\\\\">\n              <div class=\\\\\"arco-menu-group-title\\\\\"><span class=\\\\\"arco-menu-indent-list\\\\\"><span class=\\\\\"arco-menu-indent\\\\\" style=\\\\\"\\\\\"></span></span>Menu Group 1</div>\n              <div class=\\\\\"arco-menu-item\\\\\"><span class=\\\\\"arco-menu-indent-list\\\\\"><span class=\\\\\"arco-menu-indent\\\\\" style=\\\\\"\\\\\"></span></span><span class=\\\\\"arco-menu-item-inner\\\\\">Menu 1</span>\n                <!---->\n              </div>\n              <div class=\\\\\"arco-menu-item\\\\\"><span class=\\\\\"arco-menu-indent-list\\\\\"><span class=\\\\\"arco-menu-indent\\\\\" style=\\\\\"\\\\\"></span></span><span class=\\\\\"arco-menu-item-inner\\\\\">Menu 2</span>\n                <!---->\n              </div>\n            </div>\n            <div class=\\\\\"arco-menu-group\\\\\">\n              <div class=\\\\\"arco-menu-group-title\\\\\"><span class=\\\\\"arco-menu-indent-list\\\\\"><span class=\\\\\"arco-menu-indent\\\\\" style=\\\\\"\\\\\"></span></span>Menu Group 2</div>\n              <div class=\\\\\"arco-menu-item\\\\\"><span class=\\\\\"arco-menu-indent-list\\\\\"><span class=\\\\\"arco-menu-indent\\\\\" style=\\\\\"\\\\\"></span></span><span class=\\\\\"arco-menu-item-inner\\\\\">Menu 3</span>\n                <!---->\n              </div>\n              <div class=\\\\\"arco-menu-item\\\\\"><span class=\\\\\"arco-menu-indent-list\\\\\"><span class=\\\\\"arco-menu-indent\\\\\" style=\\\\\"\\\\\"></span></span><span class=\\\\\"arco-menu-item-inner\\\\\">Menu 4</span>\n                <!---->\n              </div>\n            </div>\n          </div>\n        </transition-stub>\n      </div>\n    </div>\n    <div class=\\\\\"arco-menu-collapse-button\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-menu-fold\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n        <path d=\\\\\"M42 11H6M42 24H22M42 37H6M13.66 26.912l-4.82-3.118 4.82-3.118v6.236Z\\\\\"></path>\n      </svg></div>\n  </div>\n</div>\"\n`;\n"
  },
  {
    "path": "packages/web-vue/components/menu/__test__/demo.test.ts",
    "content": "import demoTest from '../../../scripts/demo-test';\n\ndemoTest('menu');\n"
  },
  {
    "path": "packages/web-vue/components/menu/base-menu.vue",
    "content": "<template>\n  <div :class=\"classNames\" v-bind=\"$attrs\" :style=\"computedStyle\">\n    <div :class=\"`${computedPrefixCls}-inner`\">\n      <slot />\n    </div>\n    <div\n      v-if=\"computedHasCollapseButton\"\n      :class=\"`${computedPrefixCls}-collapse-button`\"\n      @click=\"onCollapseBtnClick\"\n    >\n      <slot name=\"collapse-icon\" :collapsed=\"computedCollapsed\">\n        <IconMenuUnfold v-if=\"computedCollapsed\" />\n        <IconMenuFold v-else />\n      </slot>\n    </div>\n  </div>\n</template>\n<script lang=\"ts\">\nimport {\n  computed,\n  CSSProperties,\n  defineComponent,\n  PropType,\n  provide,\n  reactive,\n  toRefs,\n  StyleValue,\n} from 'vue';\nimport { getPrefixCls } from '../_utils/global-config';\nimport IconMenuFold from '../icon/icon-menu-fold';\nimport IconMenuUnfold from '../icon/icon-menu-unfold';\nimport useMergeState from '../_hooks/use-merge-state';\nimport { provideLevel } from './hooks/use-level';\nimport { MenuInjectionKey } from './context';\nimport usePickSlots from '../_hooks/use-pick-slots';\nimport { omit } from '../_utils/omit';\nimport useMenuDataCollector from './hooks/use-menu-data-collector';\nimport useMenuOpenState from './hooks/use-menu-open-state';\nimport { useResponsive } from '../_hooks/use-responsive';\nimport { isNumber, isObject } from '../_utils/is';\nimport { TriggerProps } from '../trigger';\n\n/**\n * @displayName Menu\n */\nexport default defineComponent({\n  name: 'BaseMenu',\n  components: {\n    IconMenuFold,\n    IconMenuUnfold,\n  },\n  inheritAttrs: false,\n  props: {\n    style: {\n      type: Object as PropType<StyleValue>,\n    },\n    /**\n     * @zh 菜单的主题\n     * @en Menu theme\n     */\n    theme: {\n      type: String as PropType<'light' | 'dark'>,\n      default: 'light',\n    },\n    /**\n     * @zh 菜单的模式\n     * @en The mode of menu\n     */\n    mode: {\n      type: String as PropType<'vertical' | 'horizontal' | 'pop' | 'popButton'>,\n      default: 'vertical',\n    },\n    /**\n     * @zh 层级之间的缩进量\n     * @en Indentation between levels\n     */\n    levelIndent: {\n      type: Number,\n    },\n    /**\n     * @zh 默认展开所有多级菜单\n     * @en Expand all multi-level menus by default\n     */\n    autoOpen: {\n      type: Boolean,\n    },\n    /**\n     * @zh 是否折叠菜单\n     * @en Whether to collapse the menu\n     * @vModel\n     */\n    collapsed: {\n      type: Boolean,\n      default: undefined,\n    },\n    /**\n     * @zh 默认是否折叠菜单\n     * @en Whether to collapse the menu by default\n     */\n    defaultCollapsed: {\n      type: Boolean,\n    },\n    /**\n     * @zh 折叠菜单宽度\n     * @en Collapse menu width\n     */\n    collapsedWidth: {\n      type: Number,\n    },\n    /**\n     * @zh 开启手风琴效果\n     * @en Turn on the accordion effect\n     */\n    accordion: {\n      type: Boolean,\n    },\n    /**\n     * @zh 是否自动滚动选中项目到可见区域\n     * @en Whether to automatically scroll the selected item to the visible area\n     */\n    autoScrollIntoView: {\n      type: Boolean,\n    },\n    /**\n     * @zh 是否内置折叠按钮\n     * @en Whether built-in folding button\n     */\n    showCollapseButton: {\n      type: Boolean,\n    },\n    /**\n     * @zh 选中的菜单项 key 数组\n     * @en The selected menu item key array\n     * @vModel\n     */\n    selectedKeys: {\n      type: Array as PropType<string[]>,\n    },\n    /**\n     * @zh 默认选中的菜单项 key 数组\n     * @en The key array of the menu items selected by default\n     */\n    defaultSelectedKeys: {\n      type: Array as PropType<string[]>,\n      default: () => [],\n    },\n    /**\n     * @zh 展开的子菜单 key 数组\n     * @en Expanded submenu key array\n     * @vModel\n     */\n    openKeys: {\n      type: Array as PropType<string[]>,\n    },\n    /**\n     * @zh 默认展开的子菜单 key 数组\n     * @en The default expanded submenu key array\n     */\n    defaultOpenKeys: {\n      type: Array as PropType<string[]>,\n      default: () => [],\n    },\n    /**\n     * @zh 滚动到可见区域的配置项，接收所有[scroll-into-view-if-needed](https://github.com/stipsan/scroll-into-view-if-needed)的参数\n     * @en Scroll to the configuration items in the visible area and receive all the parameters of [scroll-into-view-if-needed](https://github.com/stipsan/scroll-into-view-if-needed)\n     */\n    scrollConfig: {\n      type: Object as PropType<{ [key: string]: any }>,\n    },\n    /**\n     * @zh 弹出模式下可接受所有 `Trigger` 的 `Props`\n     * @en Accept all `Props` of `Trigger` in pop-up mode\n     */\n    triggerProps: {\n      type: Object as PropType<TriggerProps>,\n    },\n    /**\n     * @zh 弹出模式下可接受所有 `ToolTip` 的 `Props`\n     * @en Accept all `Props` of `ToolTip` in pop-up mode\n     */\n    tooltipProps: {\n      type: Object,\n    },\n    /**\n     * @zh 默认展开选中的菜单\n     * @en Expand the selected menus by default\n     * @version 2.8.0\n     */\n    autoOpenSelected: {\n      type: Boolean,\n    },\n    /**\n     * @zh 响应式的断点, 详见[响应式栅格](/vue/component/grid)\n     * @en Responsive breakpoints, see [Responsive Grid](/vue/component/grid) for details\n     * @version 2.18.0\n     */\n    breakpoint: {\n      type: String as PropType<'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs'>,\n    },\n    /**\n     * @zh 弹出框的最大高度\n     * @en The maximum height of popover\n     * @version 2.23.0\n     */\n    popupMaxHeight: {\n      type: [Boolean, Number] as PropType<boolean | number>,\n      default: true,\n    },\n    // internal\n    prefixCls: {\n      type: String,\n    },\n    inTrigger: {\n      type: Boolean,\n    },\n    siderCollapsed: {\n      type: Boolean,\n    },\n    isRoot: {\n      type: Boolean,\n    },\n  },\n  emits: [\n    'update:collapsed',\n    'update:selectedKeys',\n    'update:openKeys',\n    /**\n     * @zh 折叠状态改变时触发\n     * @en Triggered when the collapsed state changes\n     * @param {boolean} collapsed\n     * @param {'clickTrigger'|'responsive'} type\n     */\n    'collapse',\n    /**\n     * @zh 点击菜单项时触发\n     * @en Triggered when the menu item is clicked\n     * @param {string} key\n     */\n    'menu-item-click',\n    /**\n     * @zh 点击子菜单时触发\n     * @en Triggered when the submenu is clicked\n     * @param {string} key\n     * @param {string[]} openKeys\n     */\n    'sub-menu-click',\n  ],\n  /**\n   * @zh 折叠图标\n   * @en Collapse icon\n   * @slot collapse-icon\n   * @binding {boolean} collapsed\n   */\n  /**\n   * @zh 向下展开的图标\n   * @en Icon expand down\n   * @slot expand-icon-down\n   */\n  /**\n   * @zh 向右展开的图标\n   * @en Icon expand right\n   * @slot expand-icon-right\n   */\n  setup(props, { emit, slots }) {\n    const {\n      style,\n      mode,\n      theme,\n      levelIndent,\n      accordion,\n      showCollapseButton,\n      scrollConfig,\n      autoScrollIntoView,\n      collapsedWidth,\n      autoOpen,\n      collapsed: propCollapsed,\n      defaultCollapsed,\n      selectedKeys: propSelectedKeys,\n      defaultSelectedKeys,\n      openKeys: propOpenKeys,\n      defaultOpenKeys,\n      triggerProps,\n      tooltipProps,\n      autoOpenSelected,\n      breakpoint,\n      popupMaxHeight,\n      // internal\n      prefixCls,\n      inTrigger,\n      siderCollapsed,\n      isRoot,\n    } = toRefs(props);\n\n    const { subMenuKeys, menuData } = useMenuDataCollector({\n      type: isRoot.value ? 'menu' : 'popupMenu',\n    });\n\n    const [selectedKeys, setSelectedKeys] = useMergeState(\n      defaultSelectedKeys.value,\n      reactive({\n        value: propSelectedKeys,\n      })\n    );\n\n    const { openKeys, setOpenKeys, open } = useMenuOpenState(\n      reactive({\n        modelValue: propOpenKeys,\n        defaultValue: defaultOpenKeys,\n        autoOpen,\n        autoOpenSelected,\n        selectedKeys,\n        subMenuKeys,\n        menuData,\n        accordion,\n      })\n    );\n\n    const [collapsed, setCollapsed] = useMergeState(\n      defaultCollapsed.value,\n      reactive({\n        value: propCollapsed,\n      })\n    );\n    const computedCollapsed = computed(\n      () =>\n        siderCollapsed.value || collapsed.value || mode.value === 'popButton'\n    );\n    const computedHasCollapseButton = computed(\n      () =>\n        ['horizontal', 'popButton'].indexOf(mode.value) < 0 &&\n        !inTrigger.value &&\n        showCollapseButton.value\n    );\n    const changeCollapsed = (\n      newVal: boolean,\n      type: 'clickTrigger' | 'responsive'\n    ) => {\n      if (newVal === collapsed.value) return;\n      setCollapsed(newVal);\n      emit('update:collapsed', newVal);\n      emit('collapse', newVal, type);\n    };\n    const onCollapseBtnClick = () => {\n      changeCollapsed(!collapsed.value, 'clickTrigger');\n    };\n    useResponsive(breakpoint, (checked) => {\n      changeCollapsed(!checked, 'responsive');\n    });\n\n    const computedPrefixCls = computed(\n      () => prefixCls?.value || getPrefixCls('menu')\n    );\n    const classNames = computed(() => [\n      computedPrefixCls.value,\n      `${computedPrefixCls.value}-${theme?.value}`,\n      {\n        [`${computedPrefixCls.value}-horizontal`]: mode.value === 'horizontal',\n        [`${computedPrefixCls.value}-vertical`]: mode.value !== 'horizontal',\n        [`${computedPrefixCls.value}-collapsed`]: computedCollapsed.value,\n        [`${computedPrefixCls.value}-pop`]:\n          mode.value === 'pop' || computedCollapsed.value,\n        [`${computedPrefixCls.value}-pop-button`]: mode.value === 'popButton',\n      },\n    ]);\n    const computedStyle = computed(() => {\n      const pxCollapsedWidth = isNumber(collapsedWidth.value)\n        ? `${collapsedWidth.value}px`\n        : undefined;\n\n      const objectStyle = isObject(style.value)\n        ? (style.value as CSSProperties)\n        : undefined;\n\n      const width = computedCollapsed.value\n        ? pxCollapsedWidth\n        : objectStyle?.width;\n\n      return [\n        objectStyle ? omit(objectStyle, ['width']) : style.value,\n        { width },\n      ];\n    });\n\n    const expandIconDown = usePickSlots(slots, 'expand-icon-down');\n    const expandIconRight = usePickSlots(slots, 'expand-icon-right');\n\n    // provide MenuContext\n    const menuContext = reactive({\n      theme,\n      mode,\n      levelIndent,\n      autoScrollIntoView,\n      selectedKeys,\n      openKeys,\n      prefixCls: computedPrefixCls,\n      scrollConfig,\n      inTrigger,\n      collapsed: computedCollapsed,\n      triggerProps,\n      tooltipProps,\n      popupMaxHeight,\n      expandIconDown,\n      expandIconRight,\n      onMenuItemClick: (key: string) => {\n        setSelectedKeys([key]);\n        emit('update:selectedKeys', [key]);\n        emit('menu-item-click', key);\n      },\n      onSubMenuClick: (key: string, level: number) => {\n        const newOpenKeys = open(key, level);\n        setOpenKeys(newOpenKeys);\n        emit('update:openKeys', newOpenKeys);\n        emit('sub-menu-click', key, newOpenKeys);\n      },\n    });\n    provide(MenuInjectionKey, menuContext);\n\n    // provide LevelContext\n    provideLevel(1);\n\n    return {\n      computedPrefixCls,\n      classNames,\n      computedStyle,\n      computedCollapsed,\n      computedHasCollapseButton,\n      onCollapseBtnClick,\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/menu/context.ts",
    "content": "import { InjectionKey, VNodeTypes } from 'vue';\nimport { InternalMenuProps, MenuData } from './interface';\n\nexport const MenuInjectionKey: InjectionKey<MenuContext> =\n  Symbol('MenuInjectionKey');\n\nexport type MenuContext = Readonly<\n  Pick<\n    InternalMenuProps,\n    | 'mode'\n    | 'theme'\n    | 'levelIndent'\n    | 'autoScrollIntoView'\n    | 'scrollConfig'\n    | 'inTrigger'\n    | 'triggerProps'\n    | 'tooltipProps'\n    | 'popupMaxHeight'\n  > & {\n    selectedKeys: string[];\n    openKeys: string[];\n    prefixCls: string;\n    collapsed: boolean;\n    expandIconDown?: () => VNodeTypes;\n    expandIconRight?: () => VNodeTypes;\n    onSubMenuClick?: (key: string, level: number) => void;\n    onMenuItemClick?: (key: string) => void;\n  }\n>;\n\nexport const LevelInjectionKey: InjectionKey<LevelContext> =\n  Symbol('LevelInjectionKey');\n\nexport type LevelContext = Readonly<{\n  level: number;\n}>;\n\nexport type MenuMapType = Map<string, string[]>;\n\nexport const DataCollectorInjectionKey: InjectionKey<DataCollectorContext> =\n  Symbol('DataCollectorInjectionKey');\n\nexport type DataCollectorContext = Readonly<{\n  collectSubMenu: (key: string, children: MenuData, isReport?: boolean) => void;\n  removeSubMenu: (key: string) => void;\n  collectMenuItem: (key: string) => void;\n  removeMenuItem: (keys: string) => void;\n  reportMenuData: (data: MenuData) => void;\n}>;\n"
  },
  {
    "path": "packages/web-vue/components/menu/hooks/use-level.ts",
    "content": "import { computed, inject, provide, reactive, Ref, isRef } from 'vue';\nimport { LevelInjectionKey } from '../context';\n\nexport function provideLevel(level: Ref<number> | number) {\n  const computedLevel = computed(() => (isRef(level) ? level.value : level));\n  provide(\n    LevelInjectionKey,\n    reactive({\n      level: computedLevel,\n    })\n  );\n}\n\nexport default function useLevel(props?: { provideNextLevel?: boolean }) {\n  const { provideNextLevel } = props || {};\n  const levelContext = inject(LevelInjectionKey);\n  const level = computed(() => levelContext?.level || 1);\n\n  if (provideNextLevel) {\n    const nextLevel = computed(() => level.value + 1);\n    provideLevel(nextLevel);\n  }\n\n  return {\n    level,\n  };\n}\n"
  },
  {
    "path": "packages/web-vue/components/menu/hooks/use-menu-context.ts",
    "content": "import { inject } from 'vue';\nimport { MenuContext, MenuInjectionKey } from '../context';\n\nexport default function useMenuContext(): Partial<MenuContext> {\n  const menuContext = inject(MenuInjectionKey);\n  return menuContext || {};\n}\n"
  },
  {
    "path": "packages/web-vue/components/menu/hooks/use-menu-data-collector.ts",
    "content": "import { ref, provide, inject, computed, onMounted, onUnmounted } from 'vue';\nimport { isUndefined } from '../../_utils/is';\nimport { DataCollectorContext, DataCollectorInjectionKey } from '../context';\nimport { MenuData, MenuDataItem } from '../interface';\n\nfunction getKeys(data: MenuData, condition: (item: MenuDataItem) => boolean) {\n  const keys: string[] = [];\n\n  const loop = (list: MenuData) => {\n    list.forEach((item) => {\n      if (condition(item)) {\n        keys.push(item.key);\n      }\n      if (item.children) {\n        loop(item.children);\n      }\n    });\n  };\n\n  loop(data);\n\n  return keys;\n}\n\nexport function useMenuDataCollectorContext(isRoot = false) {\n  const menuContext = isRoot ? undefined : inject(DataCollectorInjectionKey);\n  return menuContext;\n}\n\nexport default function useMenuDataCollector(props: {\n  key?: string | undefined;\n  type: 'menu' | 'popupMenu' | 'subMenu';\n}) {\n  const { key, type } = props;\n  const data = ref<MenuData>([]);\n  const menuContext = useMenuDataCollectorContext(type === 'menu');\n\n  const provideContext: DataCollectorContext = {\n    collectSubMenu(key, children, isReport = false) {\n      const item = {\n        key,\n        children,\n      };\n      if (isReport) {\n        const oldOne = data.value.find((i) => i.key === key);\n        if (oldOne) {\n          oldOne.children = children;\n        } else {\n          data.value.push(item);\n        }\n      } else {\n        data.value = [...data.value, item];\n      }\n\n      // 当接收到了更新数据，除了 menu，继续向上更新\n      if (isReport) {\n        if (type === 'popupMenu') {\n          menuContext?.reportMenuData(data.value);\n        } else if (type === 'subMenu' && !isUndefined(key)) {\n          menuContext?.collectSubMenu(key, data.value, true);\n        }\n      }\n    },\n    removeSubMenu(key) {\n      data.value = data.value.filter((item) => item.key !== key);\n    },\n    collectMenuItem(key) {\n      data.value.push({ key });\n    },\n    removeMenuItem(key) {\n      data.value = data.value.filter((item) => item.key !== key);\n    },\n    reportMenuData(reportData) {\n      data.value = reportData;\n      // 继续向上更新，注意：只有 popup submenu 会接收到 report\n      if (type === 'subMenu' && !isUndefined(key)) {\n        menuContext?.collectSubMenu(key, data.value, true);\n      }\n    },\n  };\n\n  provide(DataCollectorInjectionKey, provideContext);\n\n  if (type === 'subMenu' && !isUndefined(key)) {\n    onMounted(() => {\n      menuContext?.collectSubMenu(key, data.value);\n    });\n    onUnmounted(() => {\n      menuContext?.removeSubMenu(key);\n    });\n  } else if (type === 'popupMenu') {\n    onMounted(() => {\n      menuContext?.reportMenuData(data.value);\n    });\n  }\n\n  return {\n    menuData: data,\n    subMenuKeys: computed(() => getKeys(data.value, (item) => !!item.children)),\n    menuItemKeys: computed(() => getKeys(data.value, (item) => !item.children)),\n  };\n}\n"
  },
  {
    "path": "packages/web-vue/components/menu/hooks/use-menu-open-state.ts",
    "content": "import { computed, toRefs, watch, onMounted, ref } from 'vue';\nimport { isUndefined } from '../../_utils/is';\nimport { MenuData } from '../interface';\n\ninterface MenuOpenStateProps {\n  modelValue: string[] | undefined;\n  defaultValue: string[] | undefined;\n  autoOpen: boolean;\n  autoOpenSelected: boolean;\n  selectedKeys: string[];\n  subMenuKeys: string[];\n  menuData: MenuData;\n  accordion: boolean;\n}\n\nfunction getPath(data: MenuData, key: string) {\n  const path: string[] = [];\n  const loop = (list: MenuData) => {\n    for (let i = 0; i < list.length; i++) {\n      const item = list[i];\n      if (item.key === key) {\n        return true;\n      }\n      if (item.children) {\n        path.push(item.key);\n        const matched = loop(item.children);\n        if (matched) {\n          return true;\n        }\n        path.pop();\n      }\n    }\n    return false;\n  };\n\n  loop(data);\n\n  return path;\n}\n\nfunction isSameKeys(keys1: string[], keys2: string[]) {\n  if (keys1.length !== keys2.length) return false;\n  return keys1.toString() === keys2.toString();\n}\n\nexport default function useMenuOpenState(props: MenuOpenStateProps) {\n  const {\n    modelValue,\n    defaultValue,\n    autoOpen,\n    autoOpenSelected,\n    subMenuKeys,\n    selectedKeys,\n    menuData,\n    accordion,\n  } = toRefs(props);\n\n  const localValue = ref(\n    !isUndefined(modelValue.value)\n      ? modelValue.value\n      : !isUndefined(defaultValue.value)\n      ? defaultValue.value\n      : []\n  );\n  const setLocalValue = (val: string[]) => {\n    localValue.value = val;\n  };\n\n  watch(modelValue, () => {\n    if (isUndefined(modelValue.value)) {\n      setLocalValue([]);\n    }\n  });\n\n  let mountedSubMenuKeys: string[] = [];\n  onMounted(() => {\n    mountedSubMenuKeys = [...subMenuKeys.value];\n    let newOpenKeys: string[] = [];\n    if (autoOpen.value) {\n      newOpenKeys = accordion.value\n        ? subMenuKeys.value.slice(0, 1)\n        : [...subMenuKeys.value];\n    }\n    if (autoOpenSelected.value) {\n      const pathList = selectedKeys.value.map((key) =>\n        getPath(menuData.value, key)\n      );\n      if (pathList.length && (!autoOpen.value || accordion.value)) {\n        newOpenKeys = accordion.value\n          ? pathList[0]\n          : [...new Set(([] as string[]).concat(...pathList))];\n      }\n    }\n    if (newOpenKeys.length) {\n      setLocalValue(newOpenKeys);\n    }\n  });\n\n  let hasTriggered = false;\n  watch(subMenuKeys, (currentKeys, prevKeys = []) => {\n    if (hasTriggered || !isSameKeys(currentKeys, mountedSubMenuKeys)) {\n      const newOpenKeys = openKeys.value.filter((key) =>\n        currentKeys.includes(key)\n      );\n      if (autoOpen.value) {\n        const keysAdded = currentKeys.filter((key) => !prevKeys.includes(key));\n        newOpenKeys.push(...keysAdded);\n      }\n      setLocalValue(accordion.value ? newOpenKeys.slice(0, 1) : newOpenKeys);\n    }\n    hasTriggered = true;\n  });\n\n  const openKeys = computed(() => modelValue.value || localValue.value);\n\n  return {\n    openKeys,\n    localOpenKeys: localValue,\n    setOpenKeys: setLocalValue,\n    open(key: string, level: number) {\n      let newOpenKeys: string[] = [];\n      if (openKeys.value.indexOf(key) > -1) {\n        if (accordion.value && level === 1) {\n          newOpenKeys = [];\n        } else {\n          newOpenKeys = openKeys.value.filter((i) => i !== key);\n        }\n      } else if (accordion.value && level === 1) {\n        newOpenKeys = [key];\n      } else {\n        newOpenKeys = openKeys.value.concat([key]);\n      }\n      setLocalValue(newOpenKeys);\n      return newOpenKeys;\n    },\n  };\n}\n"
  },
  {
    "path": "packages/web-vue/components/menu/hooks/use-menu.ts",
    "content": "import { computed, getCurrentInstance, ComputedRef } from 'vue';\n\nconst generateId = (() => {\n  let i = 0;\n  return (prefix = '') => {\n    i += 1;\n    return `${prefix}${i}`;\n  };\n})();\n\nexport default function useMenu(): {\n  key: ComputedRef<string>;\n} {\n  const instance = getCurrentInstance();\n  const key = computed(\n    () => (instance?.vnode.key as string) || generateId('__arco_menu')\n  );\n\n  return {\n    key,\n  };\n}\n"
  },
  {
    "path": "packages/web-vue/components/menu/indent.vue",
    "content": "<template>\n  <span v-if=\"level > 1\" :class=\"`${prefixCls}-indent-list`\">\n    <span\n      v-for=\"index in level - 1\"\n      :key=\"index\"\n      :class=\"`${prefixCls}-indent`\"\n      :style=\"`width: ${levelIndent}px`\"\n    />\n  </span>\n</template>\n<script>\nimport { defineComponent, toRef } from 'vue';\nimport useMenuContext from './hooks/use-menu-context';\nimport { getPrefixCls } from '../_utils/global-config';\n\nexport default defineComponent({\n  name: 'MenuIndent',\n  props: {\n    level: {\n      type: Number,\n      default: 1,\n    },\n  },\n  setup() {\n    const prefixCls = getPrefixCls('menu');\n    const menuContext = useMenuContext();\n\n    return {\n      prefixCls,\n      levelIndent: toRef(menuContext, 'levelIndent'),\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/menu/index.ts",
    "content": "import type { App } from 'vue';\nimport type { ArcoOptions } from '../_utils/types';\nimport { setGlobalConfig, getComponentPrefix } from '../_utils/global-config';\nimport _Menu from './menu';\nimport _MenuItem from './item';\nimport _MenuItemGroup from './item-group.vue';\nimport _MenuSubMenu from './sub-menu';\n\nconst Menu = Object.assign(_Menu, {\n  Item: _MenuItem,\n  ItemGroup: _MenuItemGroup,\n  SubMenu: _MenuSubMenu,\n  install: (app: App, options?: ArcoOptions) => {\n    setGlobalConfig(app, options);\n    const componentPrefix = getComponentPrefix(options);\n\n    app.component(componentPrefix + _Menu.name, _Menu);\n    app.component(componentPrefix + _MenuItem.name, _MenuItem);\n    app.component(componentPrefix + _MenuItemGroup.name, _MenuItemGroup);\n    app.component(componentPrefix + _MenuSubMenu.name, _MenuSubMenu);\n  },\n});\n\nexport type MenuInstance = InstanceType<typeof _Menu>;\nexport type MenuItemInstance = InstanceType<typeof _MenuItem>;\nexport type MenuItemGroupInstance = InstanceType<typeof _MenuItemGroup>;\nexport type MenuSubMenuInstance = InstanceType<typeof _MenuSubMenu>;\n\nexport {\n  _MenuItem as MenuItem,\n  _MenuItemGroup as MenuItemGroup,\n  _MenuSubMenu as SubMenu,\n};\n\nexport default Menu;\n"
  },
  {
    "path": "packages/web-vue/components/menu/interface.ts",
    "content": "import { StyleValue } from 'vue';\nimport { Breakpoint } from '../_utils/responsive-observe';\nimport { Data } from '../_utils/types';\nimport { TriggerProps } from '../trigger';\n\nexport type MenuTheme = 'light' | 'dark';\n\nexport type MenuMode = 'vertical' | 'horizontal' | 'pop' | 'popButton';\n\nexport interface SubMenuChildDataType {\n  key: string;\n  children?: SubMenuChildDataType[];\n}\n\nexport type PopupMenuMaxHeightType = boolean | number;\n\nexport interface MenuProps {\n  style: StyleValue | undefined;\n  theme: MenuTheme | undefined;\n  mode: MenuMode;\n  levelIndent: number | undefined;\n  autoOpen: boolean;\n  collapsed: boolean | undefined;\n  defaultCollapsed: boolean;\n  collapsedWidth: number | undefined;\n  accordion: boolean;\n  autoScrollIntoView: boolean;\n  showCollapseButton: boolean;\n  selectedKeys: string[] | undefined;\n  defaultSelectedKeys: string[];\n  openKeys: string[] | undefined;\n  defaultOpenKeys: string[];\n  scrollConfig: { [key: string]: any } | undefined;\n  triggerProps: TriggerProps | undefined;\n  tooltipProps: Data | undefined;\n  autoOpenSelected: boolean;\n  breakpoint: Breakpoint | undefined;\n  popupMaxHeight: PopupMenuMaxHeightType;\n}\n\nexport interface InternalMenuProps extends MenuProps {\n  prefixCls: string | undefined;\n  inTrigger: boolean;\n  siderCollapsed: boolean;\n  isRoot: boolean;\n}\n\nexport interface SubMenuProps {\n  key: string | undefined;\n  title: string | undefined;\n  selectable: boolean;\n  popup: boolean | ((level: number) => boolean);\n  popupMaxHeight: PopupMenuMaxHeightType | undefined;\n}\n\nexport interface MenuItemGroupProps {\n  title: string | undefined;\n}\n\nexport interface MenuItemProps {\n  key: string | undefined;\n  disabled?: boolean;\n}\n\nexport interface SubMenuInlineProps {\n  title: string | undefined;\n  isChildrenSelected: boolean;\n}\n\nexport interface SubMenuPopProps {\n  title: string | undefined;\n  selectable: boolean;\n  isChildrenSelected: boolean;\n  popupMaxHeight: PopupMenuMaxHeightType | undefined;\n}\n\nexport interface MenuDataItem {\n  key: string;\n  children?: MenuData;\n}\n\nexport type MenuData = MenuDataItem[];\n"
  },
  {
    "path": "packages/web-vue/components/menu/item-group.vue",
    "content": "<template>\n  <div :class=\"classNames\">\n    <div :class=\"`${prefixCls}-group-title`\">\n      <MenuIndent :level=\"level\" />\n      <slot name=\"title\">{{ title }}</slot>\n    </div>\n    <slot />\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent } from 'vue';\nimport useMenuContext from './hooks/use-menu-context';\nimport useLevel, { provideLevel } from './hooks/use-level';\nimport MenuIndent from './indent.vue';\n\nexport default defineComponent({\n  name: 'MenuItemGroup',\n  components: {\n    MenuIndent,\n  },\n  props: {\n    /**\n     * @zh 菜单组的标题\n     * @en The title of the menu group\n     */\n    title: {\n      type: String,\n    },\n  },\n  /**\n   * @zh 标题\n   * @en Title\n   * @slot title\n   */\n  setup() {\n    const { level } = useLevel();\n    const nextLevel = computed(() =>\n      level.value === 1 ? level.value + 1 : level.value\n    );\n    provideLevel(nextLevel);\n\n    const menuContext = useMenuContext();\n    const prefixCls = computed(() => menuContext.prefixCls);\n    const classNames = computed(() => [`${prefixCls.value}-group`]);\n\n    return {\n      prefixCls,\n      classNames,\n      level,\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/menu/item.tsx",
    "content": "import {\n  computed,\n  defineComponent,\n  ref,\n  watch,\n  onMounted,\n  onUnmounted,\n} from 'vue';\nimport scrollIntoView from 'scroll-into-view-if-needed';\nimport Tooltip from '../tooltip';\nimport useMenu from './hooks/use-menu';\nimport useLevel from './hooks/use-level';\nimport { omit } from '../_utils/omit';\nimport MenuIndent from './indent.vue';\nimport useMenuContext from './hooks/use-menu-context';\nimport { useMenuDataCollectorContext } from './hooks/use-menu-data-collector';\n\nexport default defineComponent({\n  name: 'MenuItem',\n  inheritAttrs: false,\n  props: {\n    /**\n     * @zh 是否禁用\n     * @en Whether to disable\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n  },\n  emits: ['click'],\n  /**\n   * @zh 菜单的图标\n   * @en the icon of menu item\n   * @slot icon\n   * @version 2.11.0\n   */\n  setup(props, { emit }) {\n    const { key } = useMenu();\n    const { level } = useLevel();\n    const menuContext = useMenuContext();\n    const refItemElement = ref<HTMLDivElement>();\n    const isSelected = computed(\n      () => (menuContext.selectedKeys || []).indexOf(key.value) > -1\n    );\n\n    const menuDataCollector = useMenuDataCollectorContext();\n\n    onMounted(() => {\n      menuDataCollector?.collectMenuItem(key.value);\n    });\n\n    onUnmounted(() => {\n      menuDataCollector?.removeMenuItem(key.value);\n    });\n\n    function scrollTo() {\n      if (\n        menuContext.autoScrollIntoView &&\n        refItemElement.value &&\n        isSelected.value\n      ) {\n        scrollIntoView(refItemElement.value as HTMLDivElement, {\n          behavior: 'smooth',\n          block: 'nearest',\n          scrollMode: 'if-needed',\n          boundary: document.documentElement,\n          ...(menuContext.scrollConfig || {}),\n        });\n      }\n    }\n\n    let timer: NodeJS.Timeout;\n    onMounted(() => {\n      timer = setTimeout(() => {\n        scrollTo();\n      }, 500);\n    });\n    onUnmounted(() => {\n      clearTimeout(timer);\n    });\n    watch([isSelected], () => {\n      scrollTo();\n    });\n\n    return {\n      menuContext,\n      level,\n      isSelected,\n      refItemElement,\n      onClick(e: MouseEvent) {\n        if (props.disabled) return;\n        menuContext.onMenuItemClick && menuContext.onMenuItemClick(key.value);\n        emit('click', e);\n      },\n    };\n  },\n  render() {\n    const { level, menuContext, disabled, isSelected, onClick } = this;\n    const { prefixCls, collapsed, inTrigger, mode, tooltipProps } = menuContext;\n\n    const needTooltip = collapsed && !inTrigger && level === 1;\n    const needTextIndent = mode === 'vertical' && level > 1;\n    const children = this.$slots.default?.() || [];\n    const showIndent = needTextIndent && !inTrigger && !collapsed;\n    const iconElement = this.$slots.icon && this.$slots.icon();\n\n    const content = [\n      showIndent && <MenuIndent level={level} />,\n      iconElement && <span class={`${prefixCls}-icon`}>{iconElement}</span>,\n      showIndent || iconElement ? (\n        <span\n          class={[\n            `${prefixCls}-item-inner`,\n            {\n              [`${prefixCls}-title`]: iconElement,\n            },\n          ]}\n        >\n          {children}\n        </span>\n      ) : (\n        children\n      ),\n    ].filter(Boolean);\n\n    const itemElement = (\n      <div\n        ref=\"refItemElement\"\n        class={[\n          `${prefixCls}-item`,\n          {\n            [`${prefixCls}-disabled`]: disabled,\n            [`${prefixCls}-selected`]: isSelected,\n            [`${prefixCls}-has-icon`]: iconElement,\n          },\n        ]}\n        {...this.$attrs}\n        onClick={onClick}\n      >\n        {/* 内容 */}\n        {content}\n        {/* 选中的下横线 */}\n        {isSelected && mode === 'horizontal' && (\n          <div class={`${prefixCls}-selected-label`} />\n        )}\n      </div>\n    );\n\n    if (needTooltip) {\n      const tooltipClassNames = [\n        `${prefixCls}-item-tooltip`,\n        tooltipProps?.class,\n      ];\n      return (\n        <Tooltip\n          trigger=\"hover\"\n          position=\"right\"\n          class={tooltipClassNames}\n          {...omit(tooltipProps || {}, ['class'])}\n          v-slots={{\n            default: () => itemElement,\n            content: () => children,\n          }}\n        />\n      );\n    }\n\n    return itemElement;\n  },\n});\n"
  },
  {
    "path": "packages/web-vue/components/menu/menu.tsx",
    "content": "import {\n  computed,\n  defineComponent,\n  inject,\n  PropType,\n  provide,\n  toRefs,\n} from 'vue';\nimport { SiderInjectionKey } from '../layout/context';\nimport { LevelInjectionKey, MenuInjectionKey } from './context';\nimport BaseMenu from './base-menu.vue';\nimport OverflowWrap from './overflow-wrap';\n\nexport default defineComponent({\n  name: 'Menu',\n  components: {\n    BaseMenu,\n  },\n  inheritAttrs: false,\n  props: {\n    /** 菜单风格 */\n    theme: {\n      type: String as PropType<'light' | 'dark'>,\n    },\n    mode: {\n      type: String as PropType<'vertical' | 'horizontal' | 'pop' | 'popButton'>,\n      default: 'vertical',\n    },\n  },\n  setup(props, { attrs, slots }) {\n    const { theme: propTheme, mode } = toRefs(props);\n\n    const siderContext = inject(SiderInjectionKey, undefined);\n    const siderCollapsed = computed(() => siderContext?.collapsed || false);\n    const theme = computed(\n      () => propTheme?.value || siderContext?.theme || 'light'\n    );\n\n    // 截断上下文\n    provide(MenuInjectionKey, undefined as any);\n    provide(LevelInjectionKey, undefined as any);\n\n    return () => (\n      <BaseMenu\n        {...props}\n        {...attrs}\n        v-slots={{\n          ...slots,\n          default:\n            mode.value === 'horizontal' && slots.default\n              ? () => <OverflowWrap>{slots.default?.()}</OverflowWrap>\n              : slots.default,\n        }}\n        theme={theme.value as any}\n        inTrigger={false}\n        siderCollapsed={siderCollapsed.value}\n        isRoot\n      />\n    );\n  },\n});\n"
  },
  {
    "path": "packages/web-vue/components/menu/overflow-wrap.tsx",
    "content": "import {\n  cloneVNode,\n  defineComponent,\n  onMounted,\n  onUnmounted,\n  ref,\n  VNode,\n  VNodeNormalizedChildren,\n} from 'vue';\nimport ResizeObserver from 'resize-observer-polyfill';\nimport { getStyle } from '../_utils/style';\nimport useMenuContext from './hooks/use-menu-context';\nimport { SubMenuProps } from './interface';\nimport SubMenu from './sub-menu';\nimport { unFragment } from '../_utils/vue-utils';\n\nconst OVERFLOW_THRESHOLD = 10;\n\nfunction getNodeWidth(el: HTMLElement) {\n  return el && +el.getBoundingClientRect().width.toFixed(2);\n}\n\nfunction translatePxToNumber(str: string): number {\n  const result = Number(str.replace('px', ''));\n  return Number.isNaN(result) ? 0 : result;\n}\n\nexport default defineComponent({\n  name: 'MenuOverflowWrap',\n  setup(_, { slots }) {\n    const menuContext = useMenuContext();\n    const overflowPrefixCls = `${menuContext.prefixCls}-overflow`;\n    const overflowSubMenuClass = `${overflowPrefixCls}-sub-menu`;\n    const overflowMenuItemClass = `${overflowPrefixCls}-hidden-menu-item`;\n    const overflowSubMenuMirrorClass = `${overflowPrefixCls}-sub-menu-mirror`;\n\n    const refWrapper = ref<HTMLDivElement>();\n    const lastVisibleIndex = ref<number | null>(null);\n    const refResizeObserver = ref<ResizeObserver>();\n\n    function computeLastVisibleIndex() {\n      const wrapperElement = refWrapper.value as HTMLDivElement;\n      const wrapperWidth = getNodeWidth(wrapperElement);\n      const childNodeList = [].slice.call(\n        wrapperElement.children\n      ) as HTMLElement[];\n\n      let menuItemIndex = 0;\n      let currentRightWidth = 0;\n      let overflowSubMenuWidth = 0;\n\n      // 注意 childrenNodeList.length !== children.length 所以需要用 menuItemIndex 来标记真实的 MenuItem 下标\n      for (let i = 0; i < childNodeList.length; i++) {\n        const node = childNodeList[i];\n        const classNames = node.className.split(' ');\n        const isOverflowSubMenu = classNames.indexOf(overflowSubMenuClass) > -1;\n        const isOverflowSubMenuMirror =\n          classNames.indexOf(overflowSubMenuMirrorClass) > -1;\n\n        // 忽略 overflowSubMenu 的宽度，其宽度测量交由 overflowSubMenuMirror\n        if (isOverflowSubMenu) {\n          continue;\n        }\n\n        const nodeWidth =\n          getNodeWidth(node) +\n          translatePxToNumber(getStyle(node, 'marginLeft') as string) +\n          translatePxToNumber(getStyle(node, 'marginRight') as string);\n\n        if (isOverflowSubMenuMirror) {\n          overflowSubMenuWidth = nodeWidth;\n          continue;\n        }\n\n        currentRightWidth += nodeWidth;\n\n        if (\n          currentRightWidth + overflowSubMenuWidth + OVERFLOW_THRESHOLD >\n          wrapperWidth\n        ) {\n          lastVisibleIndex.value = menuItemIndex - 1;\n          return;\n        }\n\n        menuItemIndex++;\n      }\n\n      // 全部可见\n      lastVisibleIndex.value = null;\n    }\n\n    onMounted(() => {\n      computeLastVisibleIndex();\n\n      refResizeObserver.value = new ResizeObserver(\n        (entries: ResizeObserverEntry[]) => {\n          entries.forEach(computeLastVisibleIndex);\n        }\n      );\n\n      if (refWrapper.value) {\n        refResizeObserver.value.observe(refWrapper.value);\n      }\n    });\n\n    onUnmounted(() => {\n      refResizeObserver.value && refResizeObserver.value.disconnect();\n    });\n\n    return () => {\n      const renderSubMenu = (\n        children: VNodeNormalizedChildren,\n        options?: {\n          isMirror?: boolean;\n          props?: Partial<SubMenuProps>;\n        }\n      ): JSX.Element => {\n        const { isMirror = false, props = {} } = options || {};\n        return (\n          <SubMenu\n            key={`__arco-menu-overflow-sub-menu${isMirror ? '-mirror' : ''}`}\n            class={isMirror ? overflowSubMenuMirrorClass : overflowSubMenuClass}\n            {...props}\n            v-slots={{\n              title: () => <span>...</span>,\n              default: () => children,\n            }}\n          />\n        );\n      };\n\n      const renderChildren = () => {\n        const originChildren = slots.default?.() || [];\n        const children = unFragment(originChildren) as VNode[];\n\n        let overflowSubMenu = null;\n        const overflowSubMenuMirror = renderSubMenu(null, { isMirror: true });\n\n        const menuItems = children.map((child, index) => {\n          const item = cloneVNode(\n            child,\n            lastVisibleIndex.value !== null && index > lastVisibleIndex.value\n              ? { class: overflowMenuItemClass }\n              : { class: '' }\n          );\n\n          if (\n            lastVisibleIndex.value !== null &&\n            index === lastVisibleIndex.value + 1\n          ) {\n            const overflowMenuItems = children\n              .slice(index)\n              .map((child) => cloneVNode(child));\n\n            overflowSubMenu = renderSubMenu(overflowMenuItems);\n          }\n\n          return item;\n        });\n\n        return [overflowSubMenuMirror, ...menuItems, overflowSubMenu];\n      };\n\n      return (\n        <div class={`${overflowPrefixCls}-wrap`} ref={refWrapper}>\n          {renderChildren()}\n        </div>\n      );\n    };\n  },\n});\n"
  },
  {
    "path": "packages/web-vue/components/menu/style/index.less",
    "content": "@import '../../style/mixins/index.less';\n@import './token.less';\n@import '../../dropdown/style/token.less';\n\n@menu-prefix-cls: ~'@{prefix}-menu';\n@trigger-menu-prefix-cls: ~'@{prefix}-trigger-menu';\n\n.applyStyleToItem(@style) {\n  .@{menu-prefix-cls}-item,\n  .@{menu-prefix-cls}-group-title,\n  .@{menu-prefix-cls}-pop-header,\n  .@{menu-prefix-cls}-inline-header {\n    @style();\n  }\n}\n\n@keyframes ~'@{prefix}-menu-selected-item-label-enter' {\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n  }\n}\n\n.@{menu-prefix-cls} {\n  position: relative;\n  box-sizing: border-box;\n  width: 100%;\n  font-size: @menu-font-size;\n  line-height: @menu-line-height;\n  transition: width @transition-duration-2 @transition-timing-function-standard;\n\n  &:focus-visible {\n    outline: 3px solid var(~'@{arco-cssvars-prefix}-color-primary-light-2');\n  }\n\n  // 设置菜单层级的缩进\n  &-indent {\n    display: inline-block;\n    width: @menu-item-indent-spacing;\n  }\n\n  .text-color-transition() {\n    transition: color @transition-duration-2 @transition-timing-function-linear;\n  }\n\n  // menu-item 一些与 theme 和 mode 无关的样式\n  .item-base() {\n    @style: {\n      position: relative;\n      box-sizing: border-box;\n      border-radius: @menu-border-radius;\n      cursor: pointer;\n\n      &.@{menu-prefix-cls}-disabled {\n        cursor: not-allowed;\n      }\n\n      &.@{menu-prefix-cls}-selected {\n        font-weight: @menu-font-weight-item-selected;\n        .text-color-transition();\n\n        svg {\n          .text-color-transition();\n        }\n      }\n\n      .@{prefix}-icon,\n      .@{menu-prefix-cls}-icon {\n        margin-right: @menu-margin-right-item-prefix-icon;\n      }\n\n      .@{menu-prefix-cls}-icon {\n        .@{prefix}-icon {\n          margin-right: 0;\n        }\n      }\n    };\n\n    .applyStyleToItem(@style);\n  }\n\n  .item-mode(@mode) {\n    @style-both: {\n      padding: 0 ~'@{menu-@{mode}-item-padding-horizontal}';\n      line-height: ~'@{menu-@{mode}-item-height}';\n\n      .@{menu-prefix-cls}-icon-suffix .@{prefix}-icon {\n        margin-right: 0;\n      }\n    };\n\n    @style-vertical-only: {\n      margin-bottom: @menu-item-gap;\n      &:not(.@{menu-prefix-cls}-has-icon) {\n        .text-ellipsis();\n      }\n\n      &.@{menu-prefix-cls}-has-icon {\n        display: flex;\n        align-items: center;\n\n        > .@{menu-prefix-cls}-indent-list,\n        > .@{menu-prefix-cls}-icon {\n          flex: none;\n        }\n\n        .@{menu-prefix-cls}-icon {\n          line-height: 1;\n        }\n\n        .@{menu-prefix-cls}-title {\n          .text-ellipsis();\n        }\n      }\n\n      .@{menu-prefix-cls}-item-inner {\n        .text-ellipsis();\n\n        width: 100%;\n      }\n\n      .@{menu-prefix-cls}-icon-suffix {\n        position: absolute;\n        right: @menu-vertical-item-padding-horizontal;\n      }\n    };\n\n    @style-horizontal-only: {\n      .@{prefix}-icon,\n      .@{menu-prefix-cls}-icon {\n        margin-right: @menu-horizontal-margin-right-item-prefix-icon;\n      }\n\n      .@{menu-prefix-cls}-icon-suffix {\n        margin-left: @menu-margin-left-item-suffix-icon;\n      }\n    };\n\n    .applyStyleToItem(@style-both);\n    .applyStyleToItem(if(@mode = vertical, @style-vertical-only, @style-horizontal-only));\n  }\n\n  .theme(@theme) {\n    &-@{theme} {\n      background-color: ~'@{menu-@{theme}-color-bg}';\n\n      // 处理普通菜单项的状态变化\n      @item-style: {\n        color: ~'@{menu-@{theme}-color-item_default}';\n        background-color: ~'@{menu-@{theme}-color-bg-item_default}';\n\n        .@{prefix}-icon,\n        .@{menu-prefix-cls}-icon {\n          color: ~'@{menu-@{theme}-color-icon_default}';\n        }\n\n        &:hover {\n          color: ~'@{menu-@{theme}-color-item_hover}';\n          background-color: ~'@{menu-@{theme}-color-bg-item_hover}';\n\n          .@{prefix}-icon,\n          .@{menu-prefix-cls}-icon {\n            color: ~'@{menu-@{theme}-color-icon_hover}';\n          }\n        }\n\n        &.@{menu-prefix-cls}-selected {\n          color: ~'@{menu-@{theme}-color-item_selected}';\n\n          .@{prefix}-icon,\n          .@{menu-prefix-cls}-icon {\n            color: ~'@{menu-@{theme}-color-icon_selected}';\n          }\n        }\n\n        &.@{menu-prefix-cls}-disabled {\n          color: ~'@{menu-@{theme}-color-item_disabled}';\n          background-color: ~'@{menu-@{theme}-color-bg-item_disabled}';\n\n          .@{prefix}-icon,\n          .@{menu-prefix-cls}-icon {\n            color: ~'@{menu-@{theme}-color-icon_disabled}';\n          }\n        }\n      };\n\n      .applyStyleToItem(@item-style);\n\n      // 只有 menuItem 选中时需要背景色\n      .@{menu-prefix-cls}-item.@{menu-prefix-cls}-selected {\n        background-color: ~'@{menu-@{theme}-color-bg-item_selected}';\n      }\n\n      //  子菜单被选中时，没有背景色，所以可以单独设置字体色\n      .@{menu-prefix-cls}-inline-header.@{menu-prefix-cls}-selected {\n        color: ~'@{menu-@{theme}-color-submenu_selected}';\n\n        .@{prefix}-icon,\n        .@{menu-prefix-cls}-icon {\n          color: ~'@{menu-@{theme}-color-submenu_selected}';\n        }\n\n        &:hover {\n          background-color: ~'@{menu-@{theme}-color-bg-submenu_selected_hover}';\n        }\n      }\n\n      // 为水平菜单添加项目选中的样式\n      &.@{menu-prefix-cls}-horizontal {\n        @item-selected-style: {\n          &.@{menu-prefix-cls}-selected {\n            background: none;\n            .text-color-transition();\n\n            &:hover {\n              background-color: ~'@{menu-@{theme}-color-bg-item_hover}';\n            }\n          }\n        };\n\n        .applyStyleToItem(@item-selected-style);\n      }\n\n      // 处理标题样式\n      .@{menu-prefix-cls}-group-title {\n        color: ~'@{menu-@{theme}-color-group-title}';\n        // 快速消除 hover 的特殊样式\n        pointer-events: none;\n      }\n\n      // 展开折叠按钮颜色\n      .@{menu-prefix-cls}-collapse-button {\n        color: ~'@{menu-@{theme}-color-button}';\n        background-color: ~'@{menu-@{theme}-color-bg-button}';\n\n        &:hover {\n          background-color: ~'@{menu-@{theme}-color-bg-button_hover}';\n        }\n      }\n    }\n  }\n\n  .item-base();\n  .theme(light);\n  .theme(dark);\n\n  // 校正 a 标签颜色\n  a,\n  a:hover,\n  a:focus,\n  a:active {\n    color: inherit;\n    text-decoration: none;\n    cursor: inherit;\n  }\n\n  &-inner {\n    box-sizing: border-box;\n    width: 100%;\n    height: 100%;\n    overflow: auto;\n  }\n\n  // 展开折叠图标\n  &-icon-suffix {\n    &.is-open {\n      transform: rotate(180deg);\n    }\n  }\n\n  &-vertical {\n    .item-mode(vertical);\n\n    .@{menu-prefix-cls}-inner {\n      padding: @menu-vertical-padding-vertical @menu-vertical-padding-horizontal;\n    }\n\n    .@{menu-prefix-cls}-item.@{menu-prefix-cls}-item-indented {\n      display: flex;\n    }\n\n    // 为 header 右侧预留下放置 suffixIcon 的空间\n    .@{menu-prefix-cls}-pop-header,\n    .@{menu-prefix-cls}-inline-header {\n      padding-right: @menu-vertical-item-padding-horizontal + 16;\n    }\n  }\n\n  // 水平菜单中，仅允许出现普通 item 和 popSubMenu\n  &-horizontal {\n    width: 100%;\n    height: auto;\n\n    .item-mode(horizontal);\n\n    .@{menu-prefix-cls}-inner {\n      display: flex;\n      align-items: center;\n      padding: @menu-horizontal-padding-vertical\n        @menu-horizontal-padding-horizontal;\n    }\n\n    .@{menu-prefix-cls}-item,\n    .@{menu-prefix-cls}-pop {\n      display: inline-block;\n      flex-shrink: 0;\n      vertical-align: middle;\n\n      &:not(:first-child) {\n        margin-left: @menu-horizontal-item-gap;\n      }\n    }\n\n    .@{menu-prefix-cls}-pop::after {\n      position: absolute;\n      bottom: -$height;\n      left: 0;\n      width: 100%;\n      height: @menu-horizontal-padding-vertical;\n      content: ' ';\n    }\n  }\n\n  // 水平菜单的动态折叠容器\n  &-overflow {\n    &-wrap {\n      width: 100%;\n    }\n\n    &-sub-menu-mirror,\n    &-hidden-menu-item {\n      position: absolute !important;\n      white-space: nowrap;\n      visibility: hidden;\n      pointer-events: none;\n    }\n  }\n\n  // 选中状态下的提示浮标，相对于 MenuItem 定位\n  &-selected-label {\n    position: absolute;\n    right: $left;\n    bottom: -@menu-horizontal-padding-vertical;\n    left: @menu-horizontal-item-padding-horizontal;\n    height: @menu-height-label-item-selected;\n    background-color: @menu-color-label-item-selected;\n    animation: ~'@{prefix}-menu-selected-item-label-enter' @transition-duration-2\n      @transition-timing-function-linear;\n  }\n\n  &-pop-button {\n    width: auto;\n    background: none;\n    box-shadow: none;\n\n    &.@{menu-prefix-cls}-collapsed {\n      width: auto;\n    }\n\n    @item-style: {\n      width: @menu-pop-button-size;\n      height: $width;\n      margin-bottom: @menu-pop-button-margin-bottom;\n      line-height: $height;\n      border: 1px solid @menu-pop-button-border-color;\n      border-radius: 50%;\n      box-shadow: @menu-pop-button-box-shadow;\n    };\n\n    .applyStyleToItem(@item-style);\n  }\n\n  // 折叠样式\n  &-collapsed {\n    width: @menu-collapse-width;\n\n    .@{menu-prefix-cls}-inner {\n      padding: @menu-collapse-padding-vertical @menu-collapse-padding-horizontal;\n    }\n\n    .@{menu-prefix-cls}-icon-suffix {\n      display: none;\n    }\n\n    // Hide text after icon when menu is collapsed\n    @style-item-text: {\n      .@{prefix}-icon {\n        margin-right: 100%;\n      }\n    };\n\n    .@{menu-prefix-cls}-has-icon {\n      > *:not(.@{menu-prefix-cls}-icon) {\n        opacity: 0;\n      }\n    }\n\n    .applyStyleToItem(@style-item-text);\n  }\n\n  // 折叠按钮\n  &-collapse-button {\n    position: absolute;\n    right: 12px;\n    bottom: 12px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: @menu-width-collapse-button;\n    height: @menu-height-collapse-button;\n    border-radius: @menu-border-radius-collapse-button;\n    cursor: pointer;\n  }\n\n  // sub-menu-inline 的内容区域样式\n  &-inline-content {\n    height: auto;\n    overflow: hidden;\n    transition: height @transition-duration-2\n      @transition-timing-function-standard;\n\n    &-hide {\n      height: 0;\n    }\n  }\n\n  // 弹出的 ToolTip 中 a 标签的样式\n  &-item-tooltip a {\n    color: inherit;\n    cursor: text;\n\n    &:hover,\n    &:focus,\n    &:active {\n      color: inherit;\n    }\n  }\n\n  // 弹出菜单浮层三角箭头\n  &-pop-trigger {\n    &.@{prefix}-trigger-position-bl {\n      transform: translateY(@menu-horizontal-padding-vertical);\n\n      .@{prefix}-trigger-arrow {\n        z-index: 0;\n        border-top: 1px solid @menu-color-border-popup;\n        border-left: 1px solid @menu-color-border-popup;\n      }\n    }\n\n    &.@{prefix}-trigger-position-rt {\n      transform: translateX(@menu-vertical-padding-horizontal);\n\n      .@{prefix}-trigger-arrow {\n        z-index: 0;\n        border-bottom: 1px solid @menu-color-border-popup;\n        border-left: 1px solid @menu-color-border-popup;\n      }\n    }\n\n    &.@{menu-prefix-cls}-pop-trigger-dark {\n      .@{prefix}-trigger-arrow {\n        background-color: @menu-dark-color-bg;\n        border-color: @menu-dark-color-bg;\n      }\n    }\n  }\n}\n\n// trigger 里的 menu\n.@{trigger-menu-prefix-cls} {\n  position: relative;\n  box-sizing: border-box;\n  max-height: @dropdown-max-height;\n  padding: @dropdown-padding-vertical 0;\n  overflow: auto;\n  background-color: @dropdown-color-bg;\n  border: 1px solid @dropdown-color-border;\n  border-radius: @dropdown-border-radius;\n  box-shadow: @dropdown-box-shadow;\n\n  &-hidden {\n    display: none;\n  }\n\n  &-item,\n  &-pop-header {\n    position: relative;\n    // 避免 Trigger 的小箭头位于其上方\n    z-index: 1;\n    box-sizing: border-box;\n    width: 100%;\n    height: @dropdown-option-height;\n    padding: 0 @dropdown-option-padding-horizontal;\n\n    // default\n    color: @dropdown-option-color-text_default;\n    font-size: @dropdown-font-size;\n    line-height: $height;\n    text-align: left;\n    background-color: @dropdown-option-color-bg_default;\n    cursor: pointer;\n    .text-ellipsis();\n\n    // selected\n    &.@{trigger-menu-prefix-cls}-selected {\n      color: @dropdown-option-color-text_selected;\n      font-weight: @dropdown-option-font-weight_selected;\n      background-color: @dropdown-option-color-bg_selected;\n      transition: all @transition-duration-1 @transition-timing-function-linear;\n    }\n\n    // hover\n    &:hover {\n      color: @dropdown-option-color-text_hover;\n      background-color: @dropdown-option-color-bg_hover;\n    }\n\n    // disabled\n    &.@{trigger-menu-prefix-cls}-disabled {\n      color: @dropdown-option-color-text_disabled;\n      background-color: @dropdown-option-color-bg_disabled;\n      cursor: not-allowed;\n    }\n  }\n\n  .@{trigger-menu-prefix-cls}-has-icon {\n    display: flex;\n    align-items: center;\n\n    .@{trigger-menu-prefix-cls}-icon {\n      margin-right: 8px;\n      line-height: 1;\n    }\n\n    > * {\n      flex: none;\n    }\n\n    .@{trigger-menu-prefix-cls}-title {\n      flex: auto;\n      .text-ellipsis();\n    }\n  }\n\n  &-pop-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n\n    .@{trigger-menu-prefix-cls}-icon-suffix {\n      margin-left: @dropdown-margin-left-suffix-icon;\n    }\n  }\n\n  &-group {\n    &:first-child &-title {\n      padding-top: @dropdown-group-title-padding-top -\n        @dropdown-padding-vertical;\n    }\n  }\n\n  &-group-title {\n    box-sizing: border-box;\n    width: 100%;\n    padding: @dropdown-group-title-padding-top\n      @dropdown-group-title-padding-horizontal 0\n      @dropdown-group-title-padding-horizontal;\n    color: @dropdown-group-title-color-text;\n    font-size: @dropdown-group-title-font-size;\n    line-height: @dropdown-group-title-height;\n    .text-ellipsis();\n  }\n\n  &-pop-trigger {\n    // 下拉框的 menu 弹出不需要小箭头\n    .@{prefix}-trigger-arrow {\n      display: none;\n    }\n  }\n\n  &-dark {\n    background-color: @dropdown-dark-color-bg;\n    border-color: @dropdown-dark-color-border;\n\n    .@{trigger-menu-prefix-cls}-item,\n    .@{trigger-menu-prefix-cls}-pop-header {\n      // default\n      color: @dropdown-dark-option-color-text_default;\n      background-color: @dropdown-dark-option-color-bg_default;\n\n      // selected\n      &.@{trigger-menu-prefix-cls}-selected {\n        color: @dropdown-dark-option-color-text_selected;\n        background-color: @dropdown-dark-option-color-bg_selected;\n\n        &:hover {\n          color: @dropdown-dark-option-color-text_selected;\n        }\n      }\n\n      // hover\n      &:hover {\n        color: @dropdown-dark-option-color-text_hover;\n        background-color: @dropdown-dark-option-color-bg_hover;\n      }\n\n      // disabled\n      &.@{trigger-menu-prefix-cls}-disabled {\n        color: @dropdown-dark-option-color-text_disabled;\n        background-color: @dropdown-dark-option-color-bg_disabled;\n      }\n    }\n\n    .@{trigger-menu-prefix-cls}-group-title {\n      color: @dropdown-dark-group-title-color-text;\n    }\n  }\n}\n"
  },
  {
    "path": "packages/web-vue/components/menu/style/index.ts",
    "content": "import '../../style/index.less';\nimport '../../dropdown/style';\nimport '../../tooltip/style';\nimport './index.less';\n"
  },
  {
    "path": "packages/web-vue/components/menu/style/token.less",
    "content": "@import '../../style/theme/index.less';\n\n@menu-font-size: 14px;\n@menu-line-height: @line-height-base;\n@menu-border-radius: @radius-small;\n@menu-font-weight-item-selected: @font-weight-500;\n@menu-color-label-item-selected: @color-primary-6;\n@menu-height-label-item-selected: 3px;\n@menu-margin-left-item-suffix-icon: @spacing-3;\n@menu-margin-right-item-prefix-icon: @spacing-7;\n@menu-horizontal-margin-right-item-prefix-icon: @spacing-7;\n\n// vertical 模式下 item 之间的间隙\n@menu-item-gap: @spacing-2;\n// vertical 下嵌套子菜单的层级缩进\n@menu-item-indent-spacing: @spacing-8;\n\n// 折叠按钮\n@menu-width-collapse-button: @size-6;\n@menu-height-collapse-button: @size-6;\n@menu-border-radius-collapse-button: @radius-small;\n\n/**********************************************\n * theme: light / dark\n * status: default / disabled / selected / hover\n **********************************************/\n@menu-light-color-bg: var(~'@{arco-cssvars-prefix}-color-menu-light-bg');\n@menu-light-color-bg-item_default: @menu-light-color-bg;\n@menu-light-color-bg-item_hover: var(~'@{arco-cssvars-prefix}-color-fill-2');\n@menu-light-color-bg-item_selected: var(~'@{arco-cssvars-prefix}-color-fill-2');\n@menu-light-color-bg-item_disabled: @menu-light-color-bg;\n@menu-light-color-item_default: var(~'@{arco-cssvars-prefix}-color-text-2');\n@menu-light-color-item_hover: var(~'@{arco-cssvars-prefix}-color-text-2');\n@menu-light-color-item_selected: @color-primary-6;\n@menu-light-color-submenu_selected: @color-primary-6;\n@menu-light-color-bg-submenu_selected_hover: var(~'@{arco-cssvars-prefix}-color-fill-2');\n@menu-light-color-item_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');\n@menu-light-color-icon_default: var(~'@{arco-cssvars-prefix}-color-text-3');\n@menu-light-color-icon_hover: var(~'@{arco-cssvars-prefix}-color-text-3');\n@menu-light-color-icon_selected: @color-primary-6;\n@menu-light-color-icon_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');\n@menu-light-color-group-title: var(~'@{arco-cssvars-prefix}-color-text-3');\n\n@menu-dark-color-bg: var(~'@{arco-cssvars-prefix}-color-menu-dark-bg');\n@menu-dark-color-bg-item_default: @menu-dark-color-bg;\n@menu-dark-color-bg-item_hover: var(~'@{arco-cssvars-prefix}-color-menu-dark-hover');\n@menu-dark-color-bg-item_selected: var(~'@{arco-cssvars-prefix}-color-menu-dark-hover');\n@menu-dark-color-bg-item_disabled: @menu-dark-color-bg;\n@menu-dark-color-submenu_selected: @color-primary-6;\n@menu-dark-color-bg-submenu_selected_hover: var(~'@{arco-cssvars-prefix}-color-menu-dark-hover');\n@menu-dark-color-item_default: var(~'@{arco-cssvars-prefix}-color-text-4');\n@menu-dark-color-item_hover: var(~'@{arco-cssvars-prefix}-color-text-4');\n@menu-dark-color-item_selected: var(~'@{arco-cssvars-prefix}-color-white');\n@menu-dark-color-item_disabled: var(~'@{arco-cssvars-prefix}-color-text-2');\n@menu-dark-color-icon_default: var(~'@{arco-cssvars-prefix}-color-text-3');\n@menu-dark-color-icon_hover: var(~'@{arco-cssvars-prefix}-color-text-3');\n@menu-dark-color-icon_selected: var(~'@{arco-cssvars-prefix}-color-white');\n@menu-dark-color-icon_disabled: var(~'@{arco-cssvars-prefix}-color-text-2');\n@menu-dark-color-group-title: var(~'@{arco-cssvars-prefix}-color-text-3');\n\n// popup sub-menu\n@menu-color-border-popup: var(~'@{arco-cssvars-prefix}-color-neutral-3');\n\n// collapse button style\n@menu-light-color-bg-button: var(~'@{arco-cssvars-prefix}-color-fill-1');\n@menu-light-color-bg-button_hover: var(~'@{arco-cssvars-prefix}-color-fill-3');\n@menu-light-color-button: var(~'@{arco-cssvars-prefix}-color-text-3');\n@menu-dark-color-bg-button: @color-primary-6;\n@menu-dark-color-bg-button_hover: @color-primary-7;\n@menu-dark-color-button: var(~'@{arco-cssvars-prefix}-color-white');\n\n/**********************************************\n * horizontal / vertical\n **********************************************/\n@menu-horizontal-padding-vertical: 14px;\n@menu-horizontal-padding-horizontal: @spacing-8;\n@menu-horizontal-item-gap: @spacing-6;\n@menu-horizontal-item-height: 30px;\n@menu-horizontal-item-padding-horizontal: @spacing-6;\n\n@menu-vertical-padding-vertical: @spacing-2;\n@menu-vertical-padding-horizontal: @spacing-4;\n@menu-vertical-item-height: 40px;\n@menu-vertical-item-padding-horizontal: @spacing-6;\n\n/************************************************\n * collapse\n ***********************************************/\n@menu-collapse-width: @size-12;\n@menu-collapse-padding-vertical: @spacing-2;\n@menu-collapse-padding-horizontal: @spacing-2;\n\n/************************************************\n * popButton\n ***********************************************/\n@menu-pop-button-size: @size-10;\n@menu-pop-button-margin-bottom: @spacing-7;\n@menu-pop-button-box-shadow: @shadow2-down;\n@menu-pop-button-border-color: @color-transparent;\n\n/**********************************************\n * Theme dark in dropdown\n **********************************************/\n@dropdown-dark-color-bg: var(~'@{arco-cssvars-prefix}-color-menu-dark-bg');\n@dropdown-dark-color-border: @dropdown-dark-color-bg;\n\n@dropdown-dark-option-color-bg_default: @color-transparent;\n@dropdown-dark-option-color-bg_hover: var(~'@{arco-cssvars-prefix}-color-menu-dark-hover');\n@dropdown-dark-option-color-bg_selected: @color-transparent;\n@dropdown-dark-option-color-bg_disabled: @color-transparent;\n\n@dropdown-dark-option-color-text_default: var(~'@{arco-cssvars-prefix}-color-text-4');\n@dropdown-dark-option-color-text_hover: var(~'@{arco-cssvars-prefix}-color-text-4');\n@dropdown-dark-option-color-text_selected: var(~'@{arco-cssvars-prefix}-color-white');\n@dropdown-dark-option-color-text_disabled: var(~'@{arco-cssvars-prefix}-color-text-2');\n\n@dropdown-dark-group-title-color-text: var(~'@{arco-cssvars-prefix}-color-text-3');\n"
  },
  {
    "path": "packages/web-vue/components/menu/sub-menu-inline.vue",
    "content": "<template>\n  <div :class=\"classNames\">\n    <div\n      :class=\"[\n        `${prefixCls}-header`,\n        {\n          [`${menuPrefixCls}-selected`]: isSelected,\n          [`${menuPrefixCls}-has-icon`]: $slots.icon,\n        },\n      ]\"\n      @click=\"onHeaderClick\"\n    >\n      <MenuIndent :level=\"level\" />\n      <template v-if=\"$slots.icon\">\n        <span :class=\"`${menuPrefixCls}-icon`\">\n          <slot name=\"icon\"></slot>\n        </span>\n        <span :class=\"`${menuPrefixCls}-title`\">\n          <slot name=\"title\">{{ title }}</slot>\n        </span>\n      </template>\n      <template v-else>\n        <slot name=\"title\">{{ title }}</slot>\n      </template>\n      <span\n        :class=\"[\n          `${menuPrefixCls}-icon-suffix`,\n          {\n            [`is-open`]: isOpen,\n          },\n        ]\"\n      >\n        <slot name=\"expand-icon-down\" />\n      </span>\n    </div>\n    <ExpandTransition>\n      <div v-show=\"isOpen\" :class=\"`${prefixCls}-content`\">\n        <slot />\n      </div>\n    </ExpandTransition>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent } from 'vue';\nimport useMenuContext from './hooks/use-menu-context';\nimport useMenu from './hooks/use-menu';\nimport useLevel from './hooks/use-level';\nimport MenuIndent from './indent.vue';\nimport ExpandTransition from '../_components/transition/expand-transition.vue';\n\nexport default defineComponent({\n  name: 'SubMenuInline',\n  components: {\n    MenuIndent,\n    ExpandTransition,\n  },\n  props: {\n    title: {\n      type: String,\n    },\n    isChildrenSelected: {\n      type: Boolean,\n    },\n  },\n  setup(props) {\n    const { key } = useMenu();\n    const { level } = useLevel({\n      provideNextLevel: true,\n    });\n    const menuContext = useMenuContext();\n    const menuPrefixCls = computed(() => menuContext.prefixCls);\n    const prefixCls = computed(() => `${menuPrefixCls.value}-inline`);\n    const classNames = computed(() => [prefixCls.value]);\n    const isSelected = computed(() => props.isChildrenSelected);\n    const isOpen = computed(\n      () => (menuContext.openKeys || []).indexOf(key.value) > -1\n    );\n\n    return {\n      prefixCls,\n      menuPrefixCls,\n      classNames,\n      level,\n      isSelected,\n      isOpen,\n      onHeaderClick: () => {\n        menuContext.onSubMenuClick &&\n          menuContext.onSubMenuClick(key.value, level.value);\n      },\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/menu/sub-menu-pop.vue",
    "content": "<template>\n  <Trigger\n    trigger=\"hover\"\n    :class=\"triggerClassNames\"\n    :position=\"needPopOnBottom ? 'bl' : 'rt'\"\n    show-arrow\n    animation-class=\"fade-in\"\n    :mouse-enter-delay=\"50\"\n    :mouse-leave-delay=\"50\"\n    :popup-offset=\"4\"\n    :auto-fit-popup-min-width=\"true\"\n    :duration=\"100\"\n    v-bind=\"triggerProps\"\n    :unmount-on-close=\"false\"\n    :popup-visible=\"popVisible\"\n    @popupVisibleChange=\"onVisibleChange\"\n  >\n    <div\n      :class=\"[\n        classNames,\n        {\n          [`${menuPrefixCls}-has-icon`]: $slots.icon,\n        },\n      ]\"\n      aria-haspopup=\"true\"\n      v-bind=\"$attrs\"\n      @click=\"onClick\"\n    >\n      <!-- header -->\n      <MenuIndent :level=\"level\" />\n      <template v-if=\"$slots.icon\">\n        <span :class=\"`${menuPrefixCls}-icon`\">\n          <slot name=\"icon\"></slot>\n        </span>\n        <span :class=\"`${menuPrefixCls}-title`\">\n          <slot name=\"title\">{{ title }}</slot>\n        </span>\n      </template>\n      <template v-else>\n        <slot name=\"title\">{{ title }}</slot>\n      </template>\n      <!-- suffix -->\n      <span :class=\"`${menuPrefixCls}-icon-suffix`\">\n        <slot v-if=\"needPopOnBottom\" name=\"expand-icon-down\" />\n        <slot v-else name=\"expand-icon-right\" />\n      </span>\n      <div\n        v-if=\"isSelected && mode === 'horizontal'\"\n        :class=\"`${menuPrefixCls}-selected-label`\"\n      />\n    </div>\n    <!-- content -->\n    <template #content>\n      <Menu\n        in-trigger\n        :prefix-cls=\"`${triggerPrefixCls}-menu`\"\n        :selected-keys=\"selectedKeys\"\n        :theme=\"menuContext.theme\"\n        :trigger-props=\"menuContext.triggerProps\"\n        :style=\"popupMenuStyles\"\n        @menuItemClick=\"onMenuItemClick\"\n      >\n        <slot />\n        <template v-if=\"menuContext.expandIconDown\" #expand-icon-down>\n          <RenderFunction :render-func=\"menuContext.expandIconDown\" />\n        </template>\n        <template v-if=\"menuContext.expandIconRight\" #expand-icon-right>\n          <RenderFunction :render-func=\"menuContext.expandIconRight\" />\n        </template>\n      </Menu>\n    </template>\n  </Trigger>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, ref, toRefs } from 'vue';\nimport Trigger from '../trigger';\nimport { SubMenuPopProps } from './interface';\nimport Menu from './base-menu.vue';\nimport useMenu from './hooks/use-menu';\nimport useLevel from './hooks/use-level';\nimport { omit } from '../_utils/omit';\nimport { getPrefixCls } from '../_utils/global-config';\nimport MenuIndent from './indent.vue';\nimport useMenuContext from './hooks/use-menu-context';\nimport RenderFunction from '../_components/render-function';\nimport { isNumber } from '../_utils/is';\n\nexport default defineComponent({\n  name: 'SubMenuPop',\n  components: {\n    Menu,\n    Trigger,\n    MenuIndent,\n    RenderFunction,\n  },\n  inheritAttrs: false,\n  props: {\n    title: {\n      type: String,\n    },\n    selectable: {\n      type: Boolean,\n    },\n    isChildrenSelected: {\n      type: Boolean,\n    },\n    popupMaxHeight: {\n      type: [Boolean, Number],\n      default: undefined,\n    },\n  },\n  setup(props) {\n    const { key } = useMenu();\n    const { level } = useLevel();\n    const { selectable, isChildrenSelected, popupMaxHeight } = toRefs(props);\n    const menuContext = useMenuContext();\n    const { onSubMenuClick, onMenuItemClick } = menuContext;\n\n    const menuPrefixCls = computed(() => menuContext.prefixCls);\n    const mode = computed(() => menuContext.mode);\n    const selectedKeys = computed(() => menuContext.selectedKeys || []);\n\n    const prefixCls = computed(() => `${menuPrefixCls.value}-pop`);\n    const isSelected = computed(\n      () =>\n        (selectable.value && selectedKeys.value.includes(key.value)) ||\n        isChildrenSelected.value\n    );\n    const classNames = computed(() => [\n      `${prefixCls.value}`,\n      `${prefixCls.value}-header`,\n      {\n        [`${menuPrefixCls.value}-selected`]: isSelected.value,\n      },\n    ]);\n    const needPopOnBottom = computed(\n      () => mode.value === 'horizontal' && !menuContext.inTrigger\n    );\n    const popVisible = ref(false);\n    const setPopVisible = (val: boolean) => {\n      popVisible.value = val;\n    };\n    const triggerPrefixCls = getPrefixCls('trigger');\n    const triggerClassNames = computed(() => [\n      `${prefixCls.value}-trigger`,\n      {\n        [`${prefixCls.value}-trigger-dark`]: menuContext.theme === 'dark',\n      },\n      // @ts-ignore\n      menuContext.triggerProps?.class,\n    ]);\n    const triggerProps = computed(() =>\n      omit(menuContext.triggerProps || {}, ['class'])\n    );\n\n    return {\n      menuPrefixCls,\n      mode,\n      level,\n      classNames,\n      isSelected,\n      selectedKeys,\n      needPopOnBottom,\n      popVisible,\n      triggerPrefixCls,\n      triggerClassNames,\n      triggerProps,\n      menuContext,\n      popupMenuStyles: computed(() => {\n        const maxHeight = popupMaxHeight.value ?? menuContext.popupMaxHeight;\n        if (isNumber(maxHeight)) return { maxHeight: `${maxHeight}px` };\n        return maxHeight ? {} : { maxHeight: 'unset' };\n      }),\n      onClick: () => {\n        onSubMenuClick && onSubMenuClick(key.value, level.value);\n        selectable.value && onMenuItemClick && onMenuItemClick(key.value);\n      },\n      onMenuItemClick: (key: string) => {\n        onMenuItemClick && onMenuItemClick(key);\n        setPopVisible(false);\n      },\n      onVisibleChange: (visible: boolean) => {\n        setPopVisible(visible);\n      },\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/menu/sub-menu.tsx",
    "content": "import { computed, defineComponent, PropType, toRef, toRefs } from 'vue';\nimport SubMenuInline from './sub-menu-inline.vue';\nimport SubMenuPop from './sub-menu-pop.vue';\nimport useMenu from './hooks/use-menu';\nimport useLevel from './hooks/use-level';\nimport IconDown from '../icon/icon-down';\nimport IconRight from '../icon/icon-right';\nimport useMenuContext from './hooks/use-menu-context';\nimport useMenuDataCollector from './hooks/use-menu-data-collector';\n\nexport default defineComponent({\n  name: 'SubMenu',\n  props: {\n    /**\n     * @zh 子菜单的标题\n     * @en The title of the submenu\n     */\n    title: {\n      type: String,\n    },\n    /**\n     * @zh 弹出模式下，是否将多级菜单头也作为一个菜单项，支持点击选中等状态\n     * @en In the pop-up mode, whether the multi-level menu header is also used as a menu item to support the state such as click to select\n     */\n    selectable: {\n      type: Boolean,\n    },\n    /**\n     * @zh 是否强制使用弹出模式，`level` 表示当前子菜单的层级\n     * @en Whether to force the use of pop-up mode, `level` indicates the level of the current submenu\n     */\n    popup: {\n      type: [Boolean, Function] as PropType<\n        boolean | ((level: number) => boolean)\n      >,\n      default: false,\n    },\n    /**\n     * @zh 弹出框的最大高度\n     * @en The maximum height of popover\n     * @defaultValue true\n     * @version 2.23.0\n     */\n    popupMaxHeight: {\n      type: [Boolean, Number] as PropType<boolean | number>,\n      default: undefined,\n    },\n  },\n  /**\n   * @zh 菜单的图标\n   * @en the icon of menu item\n   * @slot icon\n   * @version 2.11.0\n   */\n  /**\n   * @zh 向下展开的图标\n   * @en Icon expand down\n   * @slot expand-icon-down\n   */\n  /**\n   * @zh 向右展开的图标\n   * @en Icon expand right\n   * @slot expand-icon-right\n   */\n  /**\n   * @zh 标题\n   * @en Title\n   * @slot title\n   */\n  setup(props, { attrs }) {\n    const { key } = useMenu();\n    const { level } = useLevel();\n    const { popup } = toRefs(props);\n    const menuContext = useMenuContext();\n    const computedPopup = computed(() => {\n      const { mode, collapsed, inTrigger } = menuContext;\n      const forcePopup = !!(typeof popup.value === 'function'\n        ? popup.value(level.value)\n        : popup.value);\n      return forcePopup || collapsed || inTrigger || mode !== 'vertical';\n    });\n\n    const { subMenuKeys, menuItemKeys } = useMenuDataCollector({\n      key: key.value,\n      type: 'subMenu',\n    });\n\n    const isChildrenSelected = computed(() => {\n      const selectedKeys = menuContext.selectedKeys || [];\n      const checkSelected = (menuKeys: string[]) => {\n        for (let i = 0; i < selectedKeys.length; i++) {\n          const selectedKey = selectedKeys[i];\n          if (menuKeys.includes(selectedKey)) {\n            return true;\n          }\n        }\n        return false;\n      };\n\n      return (\n        checkSelected(subMenuKeys.value) || checkSelected(menuItemKeys.value)\n      );\n    });\n\n    return {\n      subMenuKeys,\n      menuItemKeys,\n      isChildrenSelected,\n      props,\n      attrs,\n      computedKey: key,\n      computedPopup,\n      expandIconDown: toRef(menuContext, 'expandIconDown'),\n      expandIconRight: toRef(menuContext, 'expandIconRight'),\n    };\n  },\n  render() {\n    const {\n      props,\n      attrs,\n      computedKey,\n      computedPopup,\n      expandIconDown,\n      expandIconRight,\n      isChildrenSelected,\n    } = this;\n    const _slots = {\n      ...this.$slots,\n      'expand-icon-down':\n        this.$slots['expand-icon-down'] ||\n        expandIconDown ||\n        (() => [<IconDown />]),\n      'expand-icon-right':\n        this.$slots['expand-icon-right'] ||\n        expandIconRight ||\n        (() => [<IconRight />]),\n    };\n    return computedPopup ? (\n      <SubMenuPop\n        key={computedKey}\n        title={props.title}\n        selectable={props.selectable}\n        isChildrenSelected={isChildrenSelected}\n        popupMaxHeight={props.popupMaxHeight}\n        v-slots={_slots}\n        {...attrs}\n      />\n    ) : (\n      <SubMenuInline\n        key={computedKey}\n        title={props.title}\n        isChildrenSelected={isChildrenSelected}\n        v-slots={_slots}\n        {...attrs}\n      />\n    );\n  },\n});\n"
  },
  {
    "path": "packages/web-vue/components/menu/utils/index.ts",
    "content": "import { Fragment, isVNode, VNode, Component, Slots } from 'vue';\nimport { isArray } from '../../_utils/is';\nimport { ShapeFlags } from '../../_utils/vue-utils';\n\nexport function isFragmentChildren(children: VNode[]) {\n  return (\n    isArray(children) && children.length === 1 && children[0].type === Fragment\n  );\n}\n\nexport function isVNodeComponent(vNode: VNode) {\n  return !!(isVNode(vNode) && vNode.shapeFlag & ShapeFlags.COMPONENT);\n}\n\nexport function isArrayChildren(vNode: VNode) {\n  return !!(isVNode(vNode) && vNode.shapeFlag & ShapeFlags.ARRAY_CHILDREN);\n}\n\nexport function isSlotChildren(vNode: VNode) {\n  return !!isVNode(vNode) && vNode.shapeFlag & ShapeFlags.SLOTS_CHILDREN;\n}\n\nexport function isChildrenSelected(\n  children: VNode[] | undefined,\n  keys: string[]\n): boolean {\n  if (!isArray(children) || !children.length) return false;\n\n  for (let i = 0; i < children.length; i++) {\n    const child = children[i];\n    if (isVNodeComponent(child)) {\n      const { name } = child.type as Component;\n      if (name === 'MenuItem' || name === 'SubMenu') {\n        if (keys.includes(child.key as any)) {\n          return true;\n        }\n      }\n      if (name === 'MenuItem') {\n        continue;\n      }\n    }\n\n    if (isSlotChildren(child)) {\n      const _children = (child.children as Slots).default?.();\n      if (isChildrenSelected(_children, keys)) {\n        return true;\n      }\n    }\n\n    if (\n      isArrayChildren(child) &&\n      isChildrenSelected(child.children as VNode[], keys)\n    ) {\n      return true;\n    }\n  }\n\n  return false;\n}\n"
  },
  {
    "path": "packages/web-vue/components/message/CHANGELOG.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.57.0\n\n`2025-03-10`\n\n### 🐛 BugFix\n\n- Fixed an issue where message positioning would be affected by layout and would not be displayed ([#3406](https://github.com/arco-design/arco-design-vue/pull/3406))\n\n\n## 2.41.0\n\n`2022-12-30`\n\n### 🆕 Feature\n\n- Add `normal` type ([#2009](https://github.com/arco-design/arco-design-vue/pull/2009))\n\n\n## 2.39.0\n\n`2022-11-18`\n\n### 🆕 Feature\n\n- Add `resetOnHover` property to pause and restart timing when the mouse moves in ([#1841](https://github.com/arco-design/arco-design-vue/pull/1841))\n\n\n## 2.27.0\n\n`2022-05-13`\n\n### 🐛 BugFix\n\n- Fix the problem that the clear method has an error when called multiple times ([#1095](https://github.com/arco-design/arco-design-vue/pull/1095))\n\n\n## 2.18.0-beta.2\n\n`2022-02-25`\n\n### 🐛 BugFix\n\n- Fixed the problem of destroying an error when calling at the same time ([#705](https://github.com/arco-design/arco-design-vue/pull/705))\n\n\n## 2.16.0\n\n`2022-01-21`\n\n### 🐛 BugFix\n\n- fix type warning when using loading type ([#635](https://github.com/arco-design/arco-design-vue/pull/635))\n\n\n## 2.10.0\n\n`2021-12-10`\n\n### 💅 Style\n\n- Use flex layout to display message ([#354](https://github.com/arco-design/arco-design-vue/pull/354))\n\n\n## 2.3.0\n\n`2021-11-12`\n\n### 🆕 Feature\n\n- Added `onClose` callback method ([#149](https://github.com/arco-design/arco-design-vue/pull/149))\n- Added `loading` method ([#149](https://github.com/arco-design/arco-design-vue/pull/149))\n\n"
  },
  {
    "path": "packages/web-vue/components/message/CHANGELOG.zh-CN.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.57.0\n\n`2025-03-10`\n\n### 🐛 问题修复\n\n- 修复 message 定位会受到布局影响，从而不显示的问题 ([#3406](https://github.com/arco-design/arco-design-vue/pull/3406))\n\n\n## 2.41.0\n\n`2022-12-30`\n\n### 🆕 新增功能\n\n- 增加 `normal` 类型 ([#2009](https://github.com/arco-design/arco-design-vue/pull/2009))\n\n\n## 2.39.0\n\n`2022-11-18`\n\n### 🆕 新增功能\n\n- 增加 `resetOnHover` 属性，在鼠标移入时暂停并重新计时 ([#1841](https://github.com/arco-design/arco-design-vue/pull/1841))\n\n\n## 2.27.0\n\n`2022-05-13`\n\n### 🐛 问题修复\n\n- 修复 clear 方法在多次调用时出现错误的问题 ([#1095](https://github.com/arco-design/arco-design-vue/pull/1095))\n\n\n## 2.18.0-beta.2\n\n`2022-02-25`\n\n### 🐛 问题修复\n\n- 修复同时调用时，出现销毁报错的问题 ([#705](https://github.com/arco-design/arco-design-vue/pull/705))\n\n\n## 2.16.0\n\n`2022-01-21`\n\n### 🐛 问题修复\n\n- 修复使用 loading 类型时类型警告的问题 ([#635](https://github.com/arco-design/arco-design-vue/pull/635))\n\n\n## 2.10.0\n\n`2021-12-10`\n\n### 💅 样式更新\n\n- 使用 flex 布局方式展示信息 ([#354](https://github.com/arco-design/arco-design-vue/pull/354))\n\n\n## 2.3.0\n\n`2021-11-12`\n\n### 🆕 新增功能\n\n- 增加 `onClose` 回调方法 ([#149](https://github.com/arco-design/arco-design-vue/pull/149))\n- 增加 `loading` 方法 ([#149](https://github.com/arco-design/arco-design-vue/pull/149))\n\n"
  },
  {
    "path": "packages/web-vue/components/message/README.en-US.md",
    "content": "```yaml\nmeta:\n  type: Component\n  category: Feedback\ntitle: Message\ndescription: Lightweight global feedback triggered by user actions.\n```\n\n*Auto translate by google.*\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/type.md\n\n@import ./__demo__/icon.md\n\n@import ./__demo__/position.md\n\n@import ./__demo__/closeable.md\n\n@import ./__demo__/update.md\n\n### `Message` Global methods\n\nThe global methods provided by Message can be used in the following three ways:\n1. Called by this.$message\n2. In the Composition API, call getCurrentInstance().appContext.config.globalProperties.$message\n3. Import Message and call it through Message itself\n\nWhen used by import, the component has no way to obtain the current Vue Context. Content injected into the AppContext such as i18n or route cannot be used internally. You need to manually pass in the AppContext when calling, or specify the AppContext globally for the component.\n\n```ts\nimport { createApp } from 'vue'\nimport { Message } from '@arco-design/web-vue';\n\nconst app = createApp(App);\nMessage._context = app._context;\n````\n\n\n### MessageMethod\n\n|Name|Description|Type|Default|version|\n|---|---|---|:---:|:---|\n|info|Show info message|`(    config: string \\| MessageConfig,    appContext?: AppContext  ) => MessageReturn`|`-`||\n|success|Show success message|`(    config: string \\| MessageConfig,    appContext?: AppContext  ) => MessageReturn`|`-`||\n|warning|Show warning message|`(    config: string \\| MessageConfig,    appContext?: AppContext  ) => MessageReturn`|`-`||\n|error|Show error message|`(    config: string \\| MessageConfig,    appContext?: AppContext  ) => MessageReturn`|`-`||\n|loading|Show loading message|`(    config: string \\| MessageConfig,    appContext?: AppContext  ) => MessageReturn`|`-`||\n|normal|Show message|`(    config: string \\| MessageConfig,    appContext?: AppContext  ) => MessageReturn`|`-`|2.41.0|\n|clear|Clear all messages|`(position?: MessagePosition) => void`|`-`||\n\n\n\n### MessageConfig\n\n|Name|Description|Type|Default|version|\n|---|---|---|:---:|:---|\n|content|Content|`RenderContent`|`-`||\n|id|Unique id|`string`|`-`||\n|icon|Message icon|`RenderFunction`|`-`||\n|position|Location of the message|`'top'\\|'bottom'`|`-`||\n|showIcon|Whether to show icon|`boolean`|`false`||\n|closable|Whether to show the close button|`boolean`|`false`||\n|duration|The duration of the message display|`number`|`-`||\n|onClose|Callback function when closing|`(id: number \\| string) => void`|`-`||\n|resetOnHover|The mouse to move into the component will not automatically close|`boolean`|`false`|2.39.0|\n\n\n\n### MessageReturn\n\n|Name|Description|Type|Default|\n|---|---|---|:---:|\n|close|Close current message|`() => void`|`-`|\n\n\n"
  },
  {
    "path": "packages/web-vue/components/message/README.zh-CN.md",
    "content": "```yaml\nmeta:\n  type: 组件\n  category: 反馈\ntitle: 全局提示 Message\ndescription: 由用户的操作触发的轻量级全局反馈。\n```\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/type.md\n\n@import ./__demo__/icon.md\n\n@import ./__demo__/position.md\n\n@import ./__demo__/closeable.md\n\n@import ./__demo__/update.md\n\n### `Message` 全局方法\n\nMessage提供的全局方法，可以通过以下三种方法使用：\n1. 通过this.$message调用\n2. 在Composition API中，通过getCurrentInstance().appContext.config.globalProperties.$message调用\n3. 导入Message，通过Message本身调用\n\n当通过 import 方式使用时，组件没有办法获取当前的 Vue Context，如 i18n 或 route 等注入在 AppContext 上的内容无法在内部使用，需要在调用时手动传入 AppContext，或者为组件全局指定 AppContext\n\n```ts\nimport { createApp } from 'vue'\nimport { Message } from '@arco-design/web-vue';\n\nconst app = createApp(App);\nMessage._context = app._context;\n```\n\n\n### MessageMethod\n\n|参数名|描述|类型|默认值|版本|\n|---|---|---|:---:|:---|\n|info|显示信息提示|`(    config: string \\| MessageConfig,    appContext?: AppContext  ) => MessageReturn`|`-`||\n|success|显示成功提示|`(    config: string \\| MessageConfig,    appContext?: AppContext  ) => MessageReturn`|`-`||\n|warning|显示警告提示|`(    config: string \\| MessageConfig,    appContext?: AppContext  ) => MessageReturn`|`-`||\n|error|显示错误提示|`(    config: string \\| MessageConfig,    appContext?: AppContext  ) => MessageReturn`|`-`||\n|loading|显示加载中提示|`(    config: string \\| MessageConfig,    appContext?: AppContext  ) => MessageReturn`|`-`||\n|normal|显示提示|`(    config: string \\| MessageConfig,    appContext?: AppContext  ) => MessageReturn`|`-`|2.41.0|\n|clear|清空全部提示|`(position?: MessagePosition) => void`|`-`||\n\n\n\n### MessageConfig\n\n|参数名|描述|类型|默认值|版本|\n|---|---|---|:---:|:---|\n|content|内容|`RenderContent`|`-`||\n|id|唯一id|`string`|`-`||\n|icon|消息的图标|`RenderFunction`|`-`||\n|position|消息的位置|`'top'\\|'bottom'`|`-`||\n|showIcon|是否显示图标|`boolean`|`false`||\n|closable|是否显示关闭按钮|`boolean`|`false`||\n|duration|消息显示的持续时间|`number`|`-`||\n|onClose|关闭时的回调函数|`(id: number \\| string) => void`|`-`||\n|resetOnHover|设置鼠标移入后不会自动关闭|`boolean`|`false`|2.39.0|\n\n\n\n### MessageReturn\n\n|参数名|描述|类型|默认值|\n|---|---|---|:---:|\n|close|关闭当前消息|`() => void`|`-`|\n\n\n"
  },
  {
    "path": "packages/web-vue/components/message/TEMPLATE.md",
    "content": "## zh-CN\n```yaml\nmeta:\n  type: 组件\n  category: 反馈\ntitle: 全局提示 Message\ndescription: 由用户的操作触发的轻量级全局反馈。\n```\n---\n## en-US\n```yaml\nmeta:\n  type: Component\n  category: Feedback\ntitle: Message\ndescription: Lightweight global feedback triggered by user actions.\n```\n---\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/type.md\n\n@import ./__demo__/icon.md\n\n@import ./__demo__/position.md\n\n@import ./__demo__/closeable.md\n\n@import ./__demo__/update.md\n\n## zh-CN\n### `Message` 全局方法\n\nMessage提供的全局方法，可以通过以下三种方法使用：\n1. 通过this.$message调用\n2. 在Composition API中，通过getCurrentInstance().appContext.config.globalProperties.$message调用\n3. 导入Message，通过Message本身调用\n\n当通过 import 方式使用时，组件没有办法获取当前的 Vue Context，如 i18n 或 route 等注入在 AppContext 上的内容无法在内部使用，需要在调用时手动传入 AppContext，或者为组件全局指定 AppContext\n\n```ts\nimport { createApp } from 'vue'\nimport { Message } from '@arco-design/web-vue';\n\nconst app = createApp(App);\nMessage._context = app._context;\n```\n\n---\n## en-US\n### `Message` Global methods\n\nThe global methods provided by Message can be used in the following three ways:\n1. Called by this.$message\n2. In the Composition API, call getCurrentInstance().appContext.config.globalProperties.$message\n3. Import Message and call it through Message itself\n\nWhen used by import, the component has no way to obtain the current Vue Context. Content injected into the AppContext such as i18n or route cannot be used internally. You need to manually pass in the AppContext when calling, or specify the AppContext globally for the component.\n\n```ts\nimport { createApp } from 'vue'\nimport { Message } from '@arco-design/web-vue';\n\nconst app = createApp(App);\nMessage._context = app._context;\n````\n\n---\n\n%%INTERFACE(interface.ts)%%\n"
  },
  {
    "path": "packages/web-vue/components/message/__demo__/basic.md",
    "content": "```yaml\ntitle:\n  zh-CN: 基本用法\n  en-US: Basic Usage\n```\n\n## zh-CN\n\n全局提示的基本用法。\n\n---\n\n## en-US\n\nBasic usage of message.\n\n---\n\n```vue\n<template>\n  <a-button @click=\"handleClick\">Info Message</a-button>\n</template>\n\n<script>\nexport default {\n  methods: {\n    handleClick() {\n      this.$message.info('This is an info message')\n    }\n  }\n};\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/message/__demo__/closeable.md",
    "content": "```yaml\ntitle:\n  zh-CN: 可关闭\n  en-US: Closeable\n```\n\n## zh-CN\n\n设置 `closable` 来显示关闭按钮。\n\n---\n\n## en-US\n\nSet `closable` to show the close button.\n\n---\n\n```vue\n<template>\n  <a-button @click=\"handleClick\">Closeable Message</a-button>\n</template>\n\n<script>\nexport default {\n  methods: {\n    handleClick(){\n      this.$message.info({\n        content:'This is an info message!',\n        closable: true\n      })\n    }\n  }\n};\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/message/__demo__/icon.md",
    "content": "```yaml\ntitle:\n  zh-CN: 自定义图标\n  en-US: Custom icon\n```\n\n## zh-CN\n\n设置 `icon` 来自定义图标。\n\n---\n\n## en-US\n\nSet `icon` to customize the icon.\n\n---\n\n```vue\n<template>\n  <a-button @click=\"handleClick\">Info Message</a-button>\n</template>\n\n<script>\nimport { h } from 'vue';\nimport { IconFaceSmileFill } from '@arco-design/web-vue/es/icon';\n\nexport default {\n  methods: {\n    handleClick() {\n      this.$message.info({\n        content: 'This is an info message!',\n        icon: () => h(IconFaceSmileFill)\n      });\n    }\n  }\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/message/__demo__/position.md",
    "content": "```yaml\ntitle:\n  zh-CN: 全局提示的位置\n  en-US: Position\n```\n\n## zh-CN\n\n全局提示有 2 种不同的弹出位置，分别为顶部和底部。\n\n---\n\n## en-US\n\nThe prompt has 2 different pop-up positions, namely the top and the bottom.\n\n---\n\n```vue\n<template>\n  <a-space>\n    <a-button @click=\"()=>this.$message.info({content:'This is an info message!'})\">Top Message</a-button>\n    <a-button @click=\"()=>this.$message.info({content:'This is an info message!',position:'bottom'})\">Bottom Message</a-button>\n  </a-space>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/message/__demo__/type.md",
    "content": "```yaml\ntitle:\n  zh-CN: 消息类型\n  en-US: Message Type\n```\n\n## zh-CN\n\n全局提示有 6 种不同的类型，分别为：`info`, `success`, `warning`, `error`, `loading`。2.41.0 版本增加 `normal` 类型，此类型下默认没有图标。\n\n---\n\n## en-US\n\nThere are 6 different types of global prompts, namely: `info`, `success`, `warning`, `error`, `loading`. Version 2.41.0 adds the `normal` type, which has no icon by default.\n\n---\n\n```vue\n\n<template>\n  <div>\n    <a-space>\n      <a-button @click=\"()=>this.$message.info('This is an info message!')\">Info Message</a-button>\n      <a-button @click=\"()=>this.$message.success('This is a success message!')\" status=\"success\">Success Message\n      </a-button>\n      <a-button @click=\"()=>this.$message.warning('This is a warning message!')\" status=\"warning\">Warning Message\n      </a-button>\n      <a-button @click=\"()=>this.$message.error('This is an error message!')\" status=\"danger\">Error Message</a-button>\n    </a-space>\n  </div>\n  <div style=\"margin-top: 20px\">\n    <a-space>\n      <a-button @click=\"()=>this.$message.normal('This is a normal message!')\">Normal Message</a-button>\n      <a-button @click=\"()=>this.$message.normal({\n    content:'This is a normal message!',\n    icon:renderIcon\n    })\">Normal Message With Icon\n      </a-button>\n      <a-button @click=\"()=>this.$message.loading('This is a loading message!')\" status=\"primary\">Loading Message\n      </a-button>\n    </a-space>\n  </div>\n</template>\n\n<script>\nimport { h } from 'vue';\nimport { IconExclamationCircleFill } from '@arco-design/web-vue/es/icon';\n\nexport default {\n  setup() {\n    const renderIcon = () => h(IconExclamationCircleFill);\n    return {\n      renderIcon\n    }\n  }\n};\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/message/__demo__/update.md",
    "content": "```yaml\ntitle:\n  zh-CN: 更新内容\n  en-US: Update content\n```\n\n## zh-CN\n\n更新消息内容，通过设置 `duration` 属性可以重置定时器。\n\n---\n\n## en-US\n\nUpdate the message content and reset the timer by setting the `duration` property.\n\n---\n\n```vue\n<template>\n  <a-button @click=\"handleClick\">Update Info Message</a-button>\n</template>\n\n<script>\nexport default {\n  data() {\n    return {\n      index: 0\n    }\n  },\n  methods: {\n    handleClick() {\n      this.$message.info({\n        id: 'myInfo',\n        content: `This is an info message ${this.$data.index++}`,\n        duration: 2000\n      })\n    }\n  }\n};\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/message/__test__/__snapshots__/demo.test.ts.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`<message> demo: render [basic] correctly 1`] = `\n\"<button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n  <!--v-if-->Info Message\n</button>\"\n`;\n\nexports[`<message> demo: render [closeable] correctly 1`] = `\n\"<button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n  <!--v-if-->Closeable Message\n</button>\"\n`;\n\nexports[`<message> demo: render [icon] correctly 1`] = `\n\"<button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n  <!--v-if-->Info Message\n</button>\"\n`;\n\nexports[`<message> demo: render [position] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 8px; row-gap: 8px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n      <!--v-if-->Top Message\n    </button></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n      <!--v-if-->Bottom Message\n    </button></div>\n</div>\"\n`;\n\nexports[`<message> demo: render [type] correctly 1`] = `\n\"<div>\n  <div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 8px; row-gap: 8px;\\\\\">\n    <!---->\n    <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n        <!--v-if-->Info Message\n      </button></div>\n    <!---->\n    <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-success\\\\\" type=\\\\\"button\\\\\">\n        <!--v-if-->Success Message\n      </button></div>\n    <!---->\n    <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-warning\\\\\" type=\\\\\"button\\\\\">\n        <!--v-if-->Warning Message\n      </button></div>\n    <!---->\n    <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-danger\\\\\" type=\\\\\"button\\\\\">\n        <!--v-if-->Error Message\n      </button></div>\n  </div>\n</div>\n<div style=\\\\\"margin-top: 20px;\\\\\">\n  <div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 8px; row-gap: 8px;\\\\\">\n    <!---->\n    <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n        <!--v-if-->Normal Message\n      </button></div>\n    <!---->\n    <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n        <!--v-if-->Normal Message With Icon\n      </button></div>\n    <!---->\n    <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-primary\\\\\" type=\\\\\"button\\\\\">\n        <!--v-if-->Loading Message\n      </button></div>\n  </div>\n</div>\"\n`;\n\nexports[`<message> demo: render [update] correctly 1`] = `\n\"<button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n  <!--v-if-->Update Info Message\n</button>\"\n`;\n"
  },
  {
    "path": "packages/web-vue/components/message/__test__/__snapshots__/index.test.ts.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Message should render messages 1`] = `\n\"<transition-group-stub name=\\\\\"fade-message\\\\\" tag=\\\\\"ul\\\\\" appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\" class=\\\\\"arco-message-list arco-message-list-top\\\\\" style=\\\\\"z-index: 0;\\\\\">\n  <li role=\\\\\"alert\\\\\" class=\\\\\"arco-message arco-message-info\\\\\"><span class=\\\\\"arco-message-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-info-circle-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path fill-rule=\\\\\"evenodd\\\\\" clip-rule=\\\\\"evenodd\\\\\" d=\\\\\"M24 44c11.046 0 20-8.954 20-20S35.046 4 24 4 4 12.954 4 24s8.954 20 20 20Zm2-30a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-2Zm0 17h1a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-6a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1h1v-8a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1v11Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path></svg></span><span class=\\\\\"arco-message-content\\\\\">Info Message</span>\n    <!--v-if-->\n  </li>\n  <li role=\\\\\"alert\\\\\" class=\\\\\"arco-message arco-message-success\\\\\"><span class=\\\\\"arco-message-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-check-circle-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path fill-rule=\\\\\"evenodd\\\\\" clip-rule=\\\\\"evenodd\\\\\" d=\\\\\"M24 44c11.046 0 20-8.954 20-20S35.046 4 24 4 4 12.954 4 24s8.954 20 20 20Zm10.207-24.379a1 1 0 0 0 0-1.414l-1.414-1.414a1 1 0 0 0-1.414 0L22 26.172l-4.878-4.88a1 1 0 0 0-1.415 0l-1.414 1.415a1 1 0 0 0 0 1.414l7 7a1 1 0 0 0 1.414 0l11.5-11.5Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path></svg></span><span class=\\\\\"arco-message-content\\\\\">Success Message</span>\n    <!--v-if-->\n  </li>\n  <li role=\\\\\"alert\\\\\" class=\\\\\"arco-message arco-message-warning\\\\\"><span class=\\\\\"arco-message-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-exclamation-circle-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path fill-rule=\\\\\"evenodd\\\\\" clip-rule=\\\\\"evenodd\\\\\" d=\\\\\"M24 44c11.046 0 20-8.954 20-20S35.046 4 24 4 4 12.954 4 24s8.954 20 20 20Zm-2-11a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1v2Zm4-18a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V15Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path></svg></span><span class=\\\\\"arco-message-content\\\\\">Warning Message</span>\n    <!--v-if-->\n  </li>\n  <li role=\\\\\"alert\\\\\" class=\\\\\"arco-message arco-message-error\\\\\"><span class=\\\\\"arco-message-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-close-circle-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path fill-rule=\\\\\"evenodd\\\\\" clip-rule=\\\\\"evenodd\\\\\" d=\\\\\"M24 44c11.046 0 20-8.954 20-20S35.046 4 24 4 4 12.954 4 24s8.954 20 20 20Zm4.955-27.771-4.95 4.95-4.95-4.95a1 1 0 0 0-1.414 0l-1.414 1.414a1 1 0 0 0 0 1.414l4.95 4.95-4.95 4.95a1 1 0 0 0 0 1.414l1.414 1.414a1 1 0 0 0 1.414 0l4.95-4.95 4.95 4.95a1 1 0 0 0 1.414 0l1.414-1.414a1 1 0 0 0 0-1.414l-4.95-4.95 4.95-4.95a1 1 0 0 0 0-1.414l-1.414-1.414a1 1 0 0 0-1.414 0Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path></svg></span><span class=\\\\\"arco-message-content\\\\\">Error Message</span>\n    <!--v-if-->\n  </li>\n</transition-group-stub>\"\n`;\n"
  },
  {
    "path": "packages/web-vue/components/message/__test__/demo.test.ts",
    "content": "import demoTest from '../../../scripts/demo-test';\n\ndemoTest('message');\n"
  },
  {
    "path": "packages/web-vue/components/message/__test__/index.test.ts",
    "content": "import { mount } from '@vue/test-utils';\nimport Message from '../index';\nimport MessageList from '../message-list';\n\ndescribe('Message', () => {\n  test('should render messages', () => {\n    const wrapper = mount(MessageList, {\n      props: {\n        messages: [\n          {\n            id: 0,\n            content: 'Info Message',\n            type: 'info',\n          },\n          {\n            id: 1,\n            content: 'Success Message',\n            type: 'success',\n          },\n          {\n            id: 2,\n            content: 'Warning Message',\n            type: 'warning',\n          },\n          {\n            id: 3,\n            content: 'Error Message',\n            type: 'error',\n          },\n        ],\n      },\n    });\n\n    expect(wrapper.html()).toMatchSnapshot();\n  });\n\n  test('should show & remove message', async () => {\n    const wrapper = mount({\n      template:\n        '<button id=\"add\" @click=\"handleAdd\">Add</button>' +\n        '<button id=\"clear\" @click=\"handleClear\">Clear</button>',\n      methods: {\n        handleAdd() {\n          Message.info({\n            content: 'Info Message',\n            closable: true,\n          });\n        },\n        handleClear() {\n          Message.clear();\n        },\n      },\n    });\n\n    const addBtn = wrapper.find('#add');\n    await addBtn.trigger('click');\n    await addBtn.trigger('click');\n    expect(document.querySelectorAll('.arco-message')).toHaveLength(2);\n    (document.querySelector('.arco-message-close-btn') as HTMLElement)?.click();\n\n    await wrapper.find('#clear').trigger('click');\n    expect(document.querySelectorAll('.arco-message')).toHaveLength(0);\n  });\n\n  test('should emit close event', async () => {\n    const wrapper = mount(MessageList, {\n      props: {\n        messages: [\n          {\n            id: 0,\n            content: 'Info Message',\n            type: 'info',\n            closable: true,\n          },\n        ],\n      },\n    });\n\n    await wrapper.find('.arco-message-close-btn').trigger('click');\n    expect(wrapper.emitted('close')).toHaveLength(1);\n  });\n\n  test('should update message content', async () => {\n    let count = 0;\n\n    const wrapper = mount({\n      template: `\n        <button @click=\"handleClick\">Click</button>`,\n      methods: {\n        handleClick() {\n          Message.info({\n            id: '1',\n            content: `Info Message ${++count}`,\n          });\n        },\n      },\n    });\n\n    const button = wrapper.find('button');\n    await button.trigger('click');\n    expect(document.querySelector('.arco-message')?.textContent).toBe(\n      'Info Message 1'\n    );\n    await button.trigger('click');\n    expect(document.querySelector('.arco-message')?.textContent).toBe(\n      'Info Message 2'\n    );\n  });\n});\n"
  },
  {
    "path": "packages/web-vue/components/message/index.ts",
    "content": "import type { App, AppContext, Ref } from 'vue';\nimport { createVNode, render, ref, reactive } from 'vue';\nimport { MESSAGE_TYPES, MessageType } from '../_utils/constant';\nimport { getOverlay } from '../_utils/dom';\nimport { isFunction, isString, isUndefined } from '../_utils/is';\nimport MessageList from './message-list';\nimport {\n  MessageConfig,\n  MessageItem,\n  MessageMethod,\n  MessagePosition,\n} from './interface';\n\ntype _MessageConfig = MessageConfig & {\n  type: MessageType | 'loading' | 'normal';\n};\n\nclass MessageManger {\n  private readonly messageIds: Set<number | string>;\n\n  private readonly messages: Ref<MessageItem[]>;\n\n  private readonly position: MessagePosition;\n\n  private container: HTMLElement | null;\n\n  private messageCount = 0;\n\n  constructor(config: _MessageConfig, appContext?: AppContext) {\n    const { position = 'top' } = config;\n    this.container = getOverlay('message');\n    this.messageIds = new Set();\n    this.messages = ref([]);\n    this.position = position;\n\n    const vm = createVNode(MessageList, {\n      messages: this.messages.value,\n      position,\n      onClose: this.remove,\n      onAfterClose: this.destroy,\n    });\n\n    if (appContext ?? Message._context) {\n      vm.appContext = appContext ?? Message._context;\n    }\n    render(vm, this.container);\n    document.body.appendChild(this.container);\n  }\n\n  add = (config: _MessageConfig) => {\n    this.messageCount++;\n    const id = config.id ?? `__arco_message_${this.messageCount}`;\n    if (this.messageIds.has(id)) {\n      return this.update(id, config);\n    }\n    const message: MessageItem = reactive({ id, ...config });\n    this.messages.value.push(message);\n    this.messageIds.add(id);\n    return {\n      close: () => this.remove(id),\n    };\n  };\n\n  update = (id: number | string, config: _MessageConfig) => {\n    for (let i = 0; i < this.messages.value.length; i++) {\n      if (this.messages.value[i].id === id) {\n        const resetOnUpdate = !isUndefined(config.duration);\n        Object.assign(this.messages.value[i], { ...config, id, resetOnUpdate });\n        break;\n      }\n    }\n    return {\n      close: () => this.remove(id),\n    };\n  };\n\n  remove = (id: number | string) => {\n    for (let i = 0; i < this.messages.value.length; i++) {\n      const item = this.messages.value[i];\n      if (item.id === id) {\n        if (isFunction(item.onClose)) {\n          item.onClose(id);\n        }\n\n        this.messages.value.splice(i, 1);\n        this.messageIds.delete(id);\n        break;\n      }\n    }\n  };\n\n  clear = () => {\n    this.messages.value.splice(0);\n  };\n\n  destroy = () => {\n    if (this.messages.value.length === 0 && this.container) {\n      render(null, this.container);\n      document.body.removeChild(this.container);\n      this.container = null;\n      messageInstance[this.position] = undefined;\n    }\n  };\n}\n\nconst messageInstance: {\n  top?: MessageManger;\n  bottom?: MessageManger;\n} = {};\n\nconst types = [...MESSAGE_TYPES, 'loading', 'normal'] as const;\n\nconst message = types.reduce((pre, value) => {\n  pre[value] = (config, appContext?: AppContext) => {\n    if (isString(config)) {\n      config = { content: config };\n    }\n    const _config: _MessageConfig = { type: value, ...config };\n    const { position = 'top' } = _config;\n    if (!messageInstance[position]) {\n      messageInstance[position] = new MessageManger(_config, appContext);\n    }\n    return messageInstance[position]!.add(_config);\n  };\n  return pre;\n}, {} as MessageMethod);\n\nmessage.clear = (position?: MessagePosition) => {\n  if (position) {\n    messageInstance[position]?.clear();\n  } else {\n    Object.values(messageInstance).forEach((item) => item?.clear());\n  }\n};\n\nconst Message = {\n  ...message,\n  install: (app: App): void => {\n    const _message = {\n      clear: message.clear,\n    } as MessageMethod;\n\n    for (const key of types) {\n      _message[key] = (config, appContext = app._context) =>\n        message[key](config, appContext);\n    }\n\n    app.config.globalProperties.$message = _message;\n  },\n  _context: null as AppContext | null,\n};\n\nexport type { MessageMethod, MessageConfig, MessageReturn } from './interface';\n\nexport default Message;\n"
  },
  {
    "path": "packages/web-vue/components/message/interface.ts",
    "content": "import { AppContext, RenderFunction } from 'vue';\nimport { RenderContent } from '../_utils/types';\nimport { MessageType } from '../_utils/constant';\n\nexport const MESSAGE_POSITION = ['top', 'bottom'] as const;\n\nexport type MessagePosition = typeof MESSAGE_POSITION[number];\n\nexport interface MessageMethod {\n  /**\n   * @zh 显示信息提示\n   * @en Show info message\n   */\n  info: (\n    config: string | MessageConfig,\n    appContext?: AppContext\n  ) => MessageReturn;\n  /**\n   * @zh 显示成功提示\n   * @en Show success message\n   */\n  success: (\n    config: string | MessageConfig,\n    appContext?: AppContext\n  ) => MessageReturn;\n  /**\n   * @zh 显示警告提示\n   * @en Show warning message\n   */\n  warning: (\n    config: string | MessageConfig,\n    appContext?: AppContext\n  ) => MessageReturn;\n  /**\n   * @zh 显示错误提示\n   * @en Show error message\n   */\n  error: (\n    config: string | MessageConfig,\n    appContext?: AppContext\n  ) => MessageReturn;\n  /**\n   * @zh 显示加载中提示\n   * @en Show loading message\n   */\n  loading: (\n    config: string | MessageConfig,\n    appContext?: AppContext\n  ) => MessageReturn;\n  /**\n   * @zh 显示提示\n   * @en Show message\n   * @version 2.41.0\n   */\n  normal: (\n    config: string | MessageConfig,\n    appContext?: AppContext\n  ) => MessageReturn;\n  /**\n   * @zh 清空全部提示\n   * @en Clear all messages\n   */\n  clear: (position?: MessagePosition) => void;\n}\n\nexport interface MessageConfig {\n  /**\n   * @zh 内容\n   * @en Content\n   */\n  content: RenderContent;\n  /**\n   * @zh 唯一id\n   * @en Unique id\n   */\n  id?: string;\n  /**\n   * @zh 消息的图标\n   * @en Message icon\n   */\n  icon?: RenderFunction;\n  /**\n   * @zh 消息的位置\n   * @en Location of the message\n   * @type 'top'|'bottom'\n   */\n  position?: MessagePosition;\n  /**\n   * @zh 是否显示图标\n   * @en Whether to show icon\n   */\n  showIcon?: boolean;\n  /**\n   * @zh 是否显示关闭按钮\n   * @en Whether to show the close button\n   */\n  closable?: boolean;\n  /**\n   * @zh 消息显示的持续时间\n   * @en The duration of the message display\n   */\n  duration?: number;\n  /**\n   * @zh 关闭时的回调函数\n   * @en Callback function when closing\n   * @param id\n   */\n  onClose?: (id: number | string) => void;\n  /**\n   * @zh 设置鼠标移入后不会自动关闭\n   * @en The mouse to move into the component will not automatically close\n   * @version 2.39.0\n   */\n  resetOnHover?: boolean;\n}\n\nexport interface MessageReturn {\n  /**\n   * @zh 关闭当前消息\n   * @en Close current message\n   */\n  close: () => void;\n}\n\nexport interface MessageItem {\n  id: number | string;\n  content: RenderContent;\n  type?: MessageType | 'loading' | 'normal';\n  icon?: RenderFunction;\n  showIcon?: boolean;\n  closable?: boolean;\n  duration?: number;\n  resetOnUpdate?: boolean;\n  onClose?: (id: number | string) => void;\n  resetOnHover?: boolean;\n}\n"
  },
  {
    "path": "packages/web-vue/components/message/message-list.tsx",
    "content": "import type { PropType } from 'vue';\nimport { defineComponent, TransitionGroup } from 'vue';\nimport { getPrefixCls } from '../_utils/global-config';\nimport Message from './message.vue';\nimport { MessageItem, MessagePosition } from './interface';\nimport usePopupManager from '../_hooks/use-popup-manager';\nimport { getSlotFunction } from '../_utils/vue-utils';\n\nexport default defineComponent({\n  name: 'MessageList',\n  props: {\n    messages: {\n      type: Array as PropType<MessageItem[]>,\n      default: () => [],\n    },\n    position: {\n      type: String as PropType<MessagePosition>,\n      default: 'top',\n    },\n  },\n  emits: ['close', 'afterClose'],\n  setup(props, context) {\n    const prefixCls = getPrefixCls('message-list');\n    const { zIndex } = usePopupManager('message', { runOnMounted: true });\n\n    return () => (\n      <TransitionGroup\n        class={[prefixCls, `${prefixCls}-${props.position}`]}\n        name=\"fade-message\"\n        tag=\"ul\"\n        style={{ zIndex: zIndex.value }}\n        onAfterLeave={() => context.emit('afterClose')}\n      >\n        {props.messages.map((item) => {\n          const slots = {\n            default: getSlotFunction(item.content),\n            icon: getSlotFunction(item.icon),\n          };\n          return (\n            <Message\n              key={item.id}\n              type={item.type}\n              duration={item.duration}\n              closable={item.closable}\n              resetOnUpdate={item.resetOnUpdate}\n              resetOnHover={item.resetOnHover}\n              v-slots={slots}\n              onClose={() => context.emit('close', item.id)}\n            />\n          );\n        })}\n      </TransitionGroup>\n    );\n  },\n});\n"
  },
  {
    "path": "packages/web-vue/components/message/message.vue",
    "content": "<template>\n  <li\n    role=\"alert\"\n    :class=\"[\n      prefixCls,\n      `${prefixCls}-${type}`,\n      { [`${prefixCls}-closable`]: closable },\n    ]\"\n    @mouseenter=\"handleMouseEnter\"\n    @mouseleave=\"handleMouseLeave\"\n  >\n    <span\n      v-if=\"showIcon && !(type === 'normal' && !$slots.icon)\"\n      :class=\"`${prefixCls}-icon`\"\n    >\n      <slot name=\"icon\">\n        <icon-info-circle-fill v-if=\"type === 'info'\" />\n        <icon-check-circle-fill v-else-if=\"type === 'success'\" />\n        <icon-exclamation-circle-fill v-else-if=\"type === 'warning'\" />\n        <icon-close-circle-fill v-else-if=\"type === 'error'\" />\n        <icon-loading v-else-if=\"type === 'loading'\" />\n      </slot>\n    </span>\n    <span :class=\"`${prefixCls}-content`\">\n      <slot />\n    </span>\n    <span\n      v-if=\"closable\"\n      :class=\"`${prefixCls}-close-btn`\"\n      @click=\"handleClose\"\n    >\n      <a-icon-hover>\n        <icon-close />\n      </a-icon-hover>\n    </span>\n  </li>\n</template>\n\n<script lang=\"ts\">\nimport type { PropType } from 'vue';\nimport { defineComponent, onMounted, onUnmounted, onUpdated } from 'vue';\nimport { getPrefixCls } from '../_utils/global-config';\nimport { MESSAGE_TYPES, MessageType } from '../_utils/constant';\nimport AIconHover from '../_components/icon-hover.vue';\nimport IconClose from '../icon/icon-close';\nimport IconInfoCircleFill from '../icon/icon-info-circle-fill';\nimport IconCheckCircleFill from '../icon/icon-check-circle-fill';\nimport IconExclamationCircleFill from '../icon/icon-exclamation-circle-fill';\nimport IconCloseCircleFill from '../icon/icon-close-circle-fill';\nimport IconLoading from '../icon/icon-loading';\n\nexport default defineComponent({\n  name: 'Message',\n  components: {\n    AIconHover,\n    IconInfoCircleFill,\n    IconCheckCircleFill,\n    IconExclamationCircleFill,\n    IconCloseCircleFill,\n    IconClose,\n    IconLoading,\n  },\n  props: {\n    type: {\n      type: String as PropType<MessageType | 'loading' | 'normal'>,\n      default: 'info',\n    },\n    closable: {\n      type: Boolean,\n      default: false,\n    },\n    showIcon: {\n      type: Boolean,\n      default: true,\n    },\n    duration: {\n      type: Number,\n      default: 3000,\n    },\n    resetOnUpdate: {\n      type: Boolean,\n      default: false,\n    },\n    resetOnHover: {\n      type: Boolean,\n      default: false,\n    },\n  },\n  emits: ['close'],\n  setup(props, { emit }) {\n    const prefixCls = getPrefixCls('message');\n    let timer = 0;\n\n    const handleClose = () => {\n      emit('close');\n    };\n\n    const startTimer = () => {\n      if (props.duration > 0) {\n        timer = window.setTimeout(handleClose, props.duration);\n      }\n    };\n\n    const clearTimer = () => {\n      if (timer) {\n        window.clearTimeout(timer);\n        timer = 0;\n      }\n    };\n\n    onMounted(() => {\n      startTimer();\n    });\n\n    onUpdated(() => {\n      if (props.resetOnUpdate) {\n        clearTimer();\n        startTimer();\n      }\n    });\n\n    onUnmounted(() => {\n      clearTimer();\n    });\n\n    const handleMouseEnter = () => {\n      if (props.resetOnHover) {\n        clearTimer();\n      }\n    };\n\n    const handleMouseLeave = () => {\n      if (props.resetOnHover) {\n        startTimer();\n      }\n    };\n    return {\n      handleMouseEnter,\n      handleMouseLeave,\n      prefixCls,\n      handleClose,\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/message/style/index.less",
    "content": "@import '../../style/mixins/index.less';\n@import './token.less';\n\n@message-prefix-cls: ~'@{prefix}-message';\n\n.@{message-prefix-cls}-list {\n  position: fixed;\n  z-index: @z-index-message;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  box-sizing: border-box;\n  width: 100%;\n  margin: 0;\n  padding: 0 10px;\n  text-align: center;\n  pointer-events: none;\n  left: 0;\n\n  &-top {\n    top: @message-wrapper-margin-top;\n  }\n\n  &-bottom {\n    bottom: @message-wrapper-margin-bottom;\n  }\n}\n\n.@{message-prefix-cls} {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  margin-bottom: @message-margin-bottom;\n  padding: @message-padding-top @message-padding-right @message-padding-bottom\n    @message-padding-left;\n  overflow: hidden;\n  line-height: 1;\n  text-align: center;\n  list-style: none;\n  background-color: @message-normal-color-bg;\n  border: @message-border-width @message-border-style\n    @message-normal-color-border;\n  border-radius: @message-border-radius;\n  box-shadow: @shadow2-down;\n  transition: all @transition-duration-1 @transition-timing-function-linear;\n  pointer-events: auto;\n\n  &-icon {\n    display: inline-block;\n    margin-right: @message-icon-margin-right;\n    color: @message-normal-color-icon;\n    font-size: @message-font-size-icon;\n    vertical-align: middle;\n    animation: ~'@{prefix}-msg-fade' @transition-duration-1 @transition-timing-function-linear,\n      ~'@{prefix}-msg-fade' @transition-duration-4 @transition-timing-function-overshoot;\n  }\n\n  &-content {\n    font-size: @message-font-size-content;\n    color: @message-normal-color-content;\n    vertical-align: middle;\n  }\n\n  &-info {\n    background-color: @message-info-color-bg;\n    border-color: @message-info-color-border;\n  }\n\n  &-info &-icon {\n    color: @message-info-color-icon;\n  }\n\n  &-info &-content {\n    color: @message-info-color-content;\n  }\n\n  &-success {\n    background-color: @message-success-color-bg;\n    border-color: @message-success-color-border;\n  }\n\n  &-success &-icon {\n    color: @message-success-color-icon;\n  }\n\n  &-success &-content {\n    color: @message-success-color-content;\n  }\n\n  &-warning {\n    background-color: @message-warning-color-bg;\n    border-color: @message-warning-color-border;\n  }\n\n  &-warning &-icon {\n    color: @message-warning-color-icon;\n  }\n\n  &-warning &-content {\n    color: @message-warning-color-content;\n  }\n\n  &-error {\n    background-color: @message-error-color-bg;\n    border-color: @message-error-color-border;\n  }\n\n  &-error &-icon {\n    color: @message-error-color-icon;\n  }\n\n  &-error &-content {\n    color: @message-error-color-content;\n  }\n\n  &-loading {\n    background-color: @message-loading-color-bg;\n    border-color: @message-loading-color-border;\n  }\n\n  &-loading &-icon {\n    color: @message-loading-color-icon;\n  }\n\n  &-loading &-content {\n    color: @message-loading-color-content;\n  }\n\n  &-close-btn {\n    margin-left: 8px;\n    color: @message-color-close-icon;\n    font-size: @message-close-icon-font-size;\n  }\n\n  .icon-hover(\n    @message-prefix-cls,\n    @message-close-icon-font-size,\n      @message-close-icon-font-size + 8px\n  );\n}\n\n.fade-message-enter-from,\n.fade-message-appear-from {\n  opacity: 0;\n}\n\n.fade-message-enter-to,\n.fade-message-appear-to {\n  opacity: 1;\n}\n\n.fade-message-enter-active,\n.fade-message-appear-active {\n  transition: opacity @transition-duration-1 @transition-timing-function-linear;\n}\n\n.fade-message-leave-from {\n  opacity: 1;\n}\n\n.fade-message-leave-to {\n  opacity: 0;\n}\n\n.fade-message-leave-active {\n  position: absolute;\n}\n\n.flip-list-move {\n  transition: transform 0.8s ease;\n}\n\n@keyframes ~ '@{prefix}-msg-fade' {\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes ~ '@{prefix}-msg-scale' {\n  from {\n    transform: scale(0);\n  }\n\n  to {\n    transform: scale(1);\n  }\n}\n"
  },
  {
    "path": "packages/web-vue/components/message/style/index.ts",
    "content": "import '../../style/index.less';\nimport './index.less';\n"
  },
  {
    "path": "packages/web-vue/components/message/style/token.less",
    "content": "@import '../../style/theme/index.less';\n\n@message-wrapper-margin-top: @spacing-12;\n@message-wrapper-margin-bottom: @spacing-12;\n\n@message-padding-top: @spacing-5;\n@message-padding-bottom: @spacing-5;\n@message-padding-left: @spacing-7;\n@message-padding-right: @spacing-7;\n@message-margin-bottom: @spacing-7;\n@message-border-radius: @radius-small;\n@message-font-size-icon: 20px;\n@message-font-size-content: @font-size-body-3;\n@message-icon-margin-right: @spacing-4;\n\n@message-border-width: 1px;\n@message-border-style: solid;\n\n@message-color-close-icon: var(~'@{arco-cssvars-prefix}-color-text-1');\n@message-close-icon-font-size: 12px;\n@message-close-icon-top: 15px;\n@message-close-icon-right: @spacing-7;\n\n@message-normal-color-bg: var(~'@{arco-cssvars-prefix}-color-bg-popup');\n@message-normal-color-icon: var(~'@{arco-cssvars-prefix}-color-text-1');\n@message-normal-color-content: var(~'@{arco-cssvars-prefix}-color-text-1');\n@message-normal-color-border: var(~'@{arco-cssvars-prefix}-color-neutral-3');\n\n@message-info-color-bg: var(~'@{arco-cssvars-prefix}-color-bg-popup');\n@message-info-color-icon: @color-primary-6;\n@message-info-color-content: var(~'@{arco-cssvars-prefix}-color-text-1');\n@message-info-color-border: var(~'@{arco-cssvars-prefix}-color-neutral-3');\n\n@message-success-color-bg: var(~'@{arco-cssvars-prefix}-color-bg-popup');\n@message-success-color-icon: @color-success-6;\n@message-success-color-content: var(~'@{arco-cssvars-prefix}-color-text-1');\n@message-success-color-border: var(~'@{arco-cssvars-prefix}-color-neutral-3');\n\n@message-warning-color-bg: var(~'@{arco-cssvars-prefix}-color-bg-popup');\n@message-warning-color-icon: @color-warning-6;\n@message-warning-color-content: var(~'@{arco-cssvars-prefix}-color-text-1');\n@message-warning-color-border: var(~'@{arco-cssvars-prefix}-color-neutral-3');\n\n@message-error-color-bg: var(~'@{arco-cssvars-prefix}-color-bg-popup');\n@message-error-color-icon: @color-danger-6;\n@message-error-color-content: var(~'@{arco-cssvars-prefix}-color-text-1');\n@message-error-color-border: var(~'@{arco-cssvars-prefix}-color-neutral-3');\n\n@message-loading-color-bg: var(~'@{arco-cssvars-prefix}-color-bg-popup');\n@message-loading-color-icon: @color-primary-6;\n@message-loading-color-content: var(~'@{arco-cssvars-prefix}-color-text-1');\n@message-loading-color-border: var(~'@{arco-cssvars-prefix}-color-neutral-3');\n"
  },
  {
    "path": "packages/web-vue/components/modal/CHANGELOG.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.57.0\n\n`2025-03-10`\n\n### 💎 Enhancement\n\n- fix re-throw error in onBeforeOk for proper error handling ([#3407](https://github.com/arco-design/arco-design-vue/pull/3407))\n\n\n## 2.54.6\n\n`2024-03-01`\n\n### 💅 Style\n\n- fix fade-modal transition effect works on enter state ([#3007](https://github.com/arco-design/arco-design-vue/pull/3007))\n\n\n## 2.50.0\n\n`2023-08-11`\n\n### 💎 Enhancement\n\n- add hide-title prop, support hide title ([#2605](https://github.com/arco-design/arco-design-vue/pull/2605))\n\n### 🆎 TypeScript\n\n- Complete missing properties in ModalConfig ([#2628](https://github.com/arco-design/arco-design-vue/pull/2628))\n\n\n## 2.50.0\n\n`2023-8-1`\n\n### 💎 Enhancement\n\n- add hide-title prop, support hide title ([#2605](https://github.com/arco-design/arco-design-vue/pull/2605))\n\n## 2.47.0\n\n`2023-06-02`\n\n### ⚠️ Important Attention\n\n- fix modal confirm missing warning icon in the title ([#2465](https://github.com/arco-design/arco-design-vue/pull/2465))\n\n\n## 2.46.2\n\n`2023-05-31`\n\n### 🐛 BugFix\n\n- fix can not set width attribute ([#2467](https://github.com/arco-design/arco-design-vue/pull/2467))\n\n\n## 2.46.1\n\n`2023-05-26`\n\n### 🐛 BugFix\n\n- fix modal drag error when define top prop ([#2446](https://github.com/arco-design/arco-design-vue/pull/2446))\n- Fix the problem that there is no full screen when `width` and `fullscreen` are set at the same time ([#2441](https://github.com/arco-design/arco-design-vue/pull/2441))\n\n### 🆎 TypeScript\n\n- fix onOk & onCancel type error in function call ([#2426](https://github.com/arco-design/arco-design-vue/pull/2426))\n\n\n## 2.45.2\n\n`2023-04-21`\n\n\n## 2.43.2\n\n`2023-02-24`\n\n### 💎 Enhancement\n\n- add update method of function call ([#2155](https://github.com/arco-design/arco-design-vue/pull/2155))\n\n\n## 2.40.0\n\n`2022-12-09`\n\n\n## 2.38.0\n\n`2022-10-28`\n\n### 🐛 BugFix\n\n- Fix the problem that z-index does not take effect when custom style ([#1796](https://github.com/arco-design/arco-design-vue/pull/1796))\n- Fix the problem that closing does not unload internal components in function calls ([#1778](https://github.com/arco-design/arco-design-vue/pull/1778))\n\n\n## 2.38.0-beta.2\n\n`2022-10-21`\n\n### 🐛 问题修复\n\n- **modal:** Fixed the problem that the unloading of incoming subcomponents would not be triggered under the function call\n\n\n## 2.38.0-beta.1\n\n`2022-10-14`\n\n### 💎 Enhancement\n\n- Functional calls can set the renderToBody parameter ([#1682](https://github.com/arco-design/arco-design-vue/pull/1682))\n\n\n## 2.37.4\n\n`2022-09-30`\n\n### 💎 Enhancement\n\n- fix modal close problem ([#1696](https://github.com/arco-design/arco-design-vue/pull/1696))\n\n\n## 2.36.1\n\n`2022-09-09`\n\n### 💎 Enhancement\n\n- The on-before-ok property supports function returning a Promise ([#1623](https://github.com/arco-design/arco-design-vue/pull/1623))\n\n\n## 2.34.0\n\n`2022-07-29`\n\n### 💎 Enhancement\n\n- support hide footer in function call ([#1410](https://github.com/arco-design/arco-design-vue/pull/1410))\n\n\n## 2.33.1\n\n`2022-07-22`\n\n### 🐛 BugFix\n\n- Fix the problem that the default title class name is wrong ([#1413](https://github.com/arco-design/arco-design-vue/pull/1413))\n\n\n## 2.33.0\n\n`2022-07-08`\n\n### 💅 Style\n\n- Fix the problem that the footer button is not centered ([#1391](https://github.com/arco-design/arco-design-vue/pull/1391))\n\n\n## 2.32.0\n\n`2022-06-24`\n\n### 🐛 BugFix\n\n- Fixed the problem that when the modal box exceeds the size of the screen, the position of the modal will be misaligned ([#1336](https://github.com/arco-design/arco-design-vue/pull/1336))\n\n\n## 2.31.0\n\n`2022-06-17`\n\n### 🆕 Feature\n\n- Add bodyClass and bodyStyle ([#1303](https://github.com/arco-design/arco-design-vue/pull/1303))\n\n\n## 2.30.0\n\n`2022-06-10`\n\n### 🐛 BugFix\n\n- Reset overflow setting on component unmount ([#1262](https://github.com/arco-design/arco-design-vue/pull/1262))\n\n\n## 2.27.0\n\n`2022-05-13`\n\n### 🐛 BugFix\n\n- Fix the problem of position offset when opening full screen after dragging ([#1070](https://github.com/arco-design/arco-design-vue/pull/1070))\n\n### 🆎 TypeScript\n\n- Complete missing properties in ModalConfig ([#1120](https://github.com/arco-design/arco-design-vue/pull/1120))\n\n\n## 2.26.0\n\n`2022-04-29`\n\n### 💅 Style\n\n- Add `overflow: auto` to the body layer ([#1030](https://github.com/arco-design/arco-design-vue/pull/1030))\n\n\n## 2.25.0\n\n`2022-04-22`\n\n### 💎 Enhancement\n\n- When closing with `esc`, only the topmost popup will be closed ([#1018](https://github.com/arco-design/arco-design-vue/pull/1018))\n\n\n## 2.24.0\n\n`2022-04-15`\n\n### 🆕 Feature\n\n- Add animation name attribute ([#985](https://github.com/arco-design/arco-design-vue/pull/985))\n\n### 🐛 BugFix\n\n- Fixed an issue where the body would not be locked in some cases ([#968](https://github.com/arco-design/arco-design-vue/pull/968))\n\n### 💅 Style\n\n- Fix the issue that the scroll bar flashes when the animation is in full screen ([#985](https://github.com/arco-design/arco-design-vue/pull/985))\n\n\n## 2.23.0\n\n`2022-04-08`\n\n### 💎 Enhancement\n\n- Fix the problem that the body is not locked when the scroll bar is floating ([#945](https://github.com/arco-design/arco-design-vue/pull/945))\n\n### 💅 Style\n\n- Fix the problem that title-align is left-aligned invalid in simple mode ([#945](https://github.com/arco-design/arco-design-vue/pull/945))\n\n\n## 2.22.0\n\n`2022-04-01`\n\n### 🐛 BugFix\n\n- Fix auto width and drag error when `align-center=\"false\"` ([#918](https://github.com/arco-design/arco-design-vue/pull/918))\n\n\n## 2.21.0\n\n`2022-03-25`\n\n### 🐛 BugFix\n\n- Fix the bug that the enter key triggers modal display multiple times ([#860](https://github.com/arco-design/arco-design-vue/pull/860))\n\n\n## 2.20.0\n\n`2022-03-18`\n\n### 🐛 BugFix\n\n- Fixed `close` function returning wrong in create method ([#840](https://github.com/arco-design/arco-design-vue/pull/840))\n\n\n## 2.19.0\n\n`2022-03-11`\n\n### 🆕 Feature\n\n- Add `draggable` property to support draggable ([#802](https://github.com/arco-design/arco-design-vue/pull/802))\n- Added `fullscreen` property to support full screen display ([#802](https://github.com/arco-design/arco-design-vue/pull/802))\n\n\n## 2.18.0-beta.2\n\n`2022-02-25`\n\n### 💎 Enhancement\n\n- Optimize click mask layer off ([#737](https://github.com/arco-design/arco-design-vue/pull/737))\n\n\n## 2.17.0\n\n`2022-02-11`\n\n### 🆕 Feature\n\n- Added `title-align` attribute ([#673](https://github.com/arco-design/arco-design-vue/pull/673))\n\n\n## 2.16.0\n\n`2022-01-21`\n\n### 🆕 Feature\n\n- Added `before-open` and `before-close` events ([#628](https://github.com/arco-design/arco-design-vue/pull/628))\n\n### 🐛 BugFix\n\n- Fix style file missing `<button>` component style reference ([#635](https://github.com/arco-design/arco-design-vue/pull/635))\n\n\n## 2.15.0\n\n`2022-01-14`\n\n### 🆕 Feature\n\n- Added `escToClose` property and enabled by default ([#577](https://github.com/arco-design/arco-design-vue/pull/577))\n\n\n## 2.12.2\n\n`2021-12-27`\n\n### 🐛 BugFix\n\n- Fix the problem of invalid modalStyle ([#459](https://github.com/arco-design/arco-design-vue/pull/459))\n- Fix the problem that the flex layout causes vertical centering and incomplete display beyond the height ([#459](https://github.com/arco-design/arco-design-vue/pull/459))\n\n\n## 2.12.0\n\n`2021-12-24`\n\n### ⚠️ Important Attention\n\n- Modify the way the wrapper layer displays modal, and add the `width` and `top` attributes ([#454](https://github.com/arco-design/arco-design-vue/pull/454))\n\n### 🐛 BugFix\n\n- Fix the problem that the button content cannot be modified dynamically ([#453](https://github.com/arco-design/arco-design-vue/pull/453))\n\n\n## 2.11.0\n\n`2021-12-17`\n\n### 🐛 BugFix\n\n- Fix the problem that the `alignCenter` property does not take effect ([#384](https://github.com/arco-design/arco-design-vue/pull/384))\n- The `alignCenter` property of the adjustment component defaults to `true` ([#384](https://github.com/arco-design/arco-design-vue/pull/384))\n\n\n## 2.10.1\n\n`2021-12-14`\n\n### 🆎 TypeScript\n\n- `ModalConfig` adds `simple` attribute annotation ([#389](https://github.com/arco-design/arco-design-vue/pull/389))\n\n\n## 2.10.0\n\n`2021-12-10`\n\n### 💅 Style\n\n- Fix the problem of modal information display mode error ([#351](https://github.com/arco-design/arco-design-vue/pull/351))\n- The title bar close button is not displayed in simple mode ([#351](https://github.com/arco-design/arco-design-vue/pull/351))\n\n\n## 2.7.0\n\n`2021-11-26`\n\n### 🆕 Feature\n\n- Added `on-before-ok` and `on-before-cancel` property events ([#229](https://github.com/arco-design/arco-design-vue/pull/229))\n\n### 🐛 BugFix\n\n- Fix the issue of initial triggering of the `open` event ([#267](https://github.com/arco-design/arco-design-vue/pull/267))\n\n\n## 2.4.0\n\n`2021-11-17`\n\n### 💎 Enhancement\n\n- Manage the zIndex of the popup ([#167](https://github.com/arco-design/arco-design-vue/pull/167))\n\n\n## 2.1.1\n\n`2021-11-08`\n\n### 🐛 BugFix\n\n- Fix the problem that the `title` attribute does not take effect ([#116](https://github.com/arco-design/arco-design-vue/pull/116))\n\n\n## 2.0.3\n\n`2021-10-29`\n\n### 🐛 BugFix\n\n- Fix the problem of the wrong type of the main button ([#30](https://github.com/arco-design/arco-design-vue/pull/30))\n\n"
  },
  {
    "path": "packages/web-vue/components/modal/CHANGELOG.zh-CN.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.57.0\n\n`2025-03-10`\n\n### 💎 功能优化\n\n- 修复执行 onBeforeOk  时错误未传播的问题 ([#3407](https://github.com/arco-design/arco-design-vue/pull/3407))\n\n\n## 2.54.6\n\n`2024-03-01`\n\n### 💅 样式更新\n\n- 修复遮罩层 fade-modal 过渡动画在进入时不生效问题 ([#3007](https://github.com/arco-design/arco-design-vue/pull/3007))\n\n\n## 2.50.0\n\n`2023-08-11`\n\n### 💎 功能优化\n\n- 增加 `hide-title` 属性，支持隐藏标题 ([#2605](https://github.com/arco-design/arco-design-vue/pull/2605))\n\n### 🆎 类型修正\n\n- 补全 ModalConfig 缺失的属性 ([#2628](https://github.com/arco-design/arco-design-vue/pull/2628))\n\n\n## 2.50.0\n\n`2023-8-1`\n\n### 💎 功能优化\n\n- 增加 `hide-title` 属性，支持隐藏标题 ([#2605](https://github.com/arco-design/arco-design-vue/pull/2605))\n\n## 2.47.0\n\n`2023-06-02`\n\n### ⚠️ 重点注意\n\n- 修复Modal.confirm标题缺少warning icon的问题 ([#2465](https://github.com/arco-design/arco-design-vue/pull/2465))\n\n\n## 2.46.2\n\n`2023-05-31`\n\n### 🐛 问题修复\n\n- 修复modal组件不能设置width属性的问题 ([#2467](https://github.com/arco-design/arco-design-vue/pull/2467))\n\n\n## 2.46.1\n\n`2023-05-26`\n\n### 🐛 问题修复\n\n- 修复定义了top属性时拖拽错误 ([#2446](https://github.com/arco-design/arco-design-vue/pull/2446))\n- 修复同时设置 `width` 和 `fullscreen` 时，没有全屏的问题 ([#2441](https://github.com/arco-design/arco-design-vue/pull/2441))\n\n### 🆎 类型修正\n\n- 修复函数调用形式ts报错 ([#2426](https://github.com/arco-design/arco-design-vue/pull/2426))\n\n\n## 2.45.2\n\n`2023-04-21`\n\n\n## 2.43.2\n\n`2023-02-24`\n\n### 💎 功能优化\n\n- 添加函数调用的更新方法 ([#2155](https://github.com/arco-design/arco-design-vue/pull/2155))\n\n\n## 2.40.0\n\n`2022-12-09`\n\n\n## 2.38.0\n\n`2022-10-28`\n\n### 🐛 问题修复\n\n- 修复自定义 style 时 z-index 不能生效的问题 ([#1796](https://github.com/arco-design/arco-design-vue/pull/1796))\n- 修复函数式调用中关闭未卸载内部组件的问题 ([#1778](https://github.com/arco-design/arco-design-vue/pull/1778))\n\n\n## 2.38.0-beta.2\n\n`2022-10-21`\n\n### 🐛 问题修复\n\n- **modal:** 修复函数式调用下，传入子组件不会触发卸载的问题\n\n\n## 2.38.0-beta.1\n\n`2022-10-14`\n\n### 💎 功能优化\n\n- 函数式调用可以设置 renderToBody 参数 ([#1682](https://github.com/arco-design/arco-design-vue/pull/1682))\n\n\n## 2.37.4\n\n`2022-09-30`\n\n### 💎 功能优化\n\n- 修复对话框关闭的问题 ([#1696](https://github.com/arco-design/arco-design-vue/pull/1696))\n\n\n## 2.36.1\n\n`2022-09-09`\n\n### 💎 功能优化\n\n- on-before-ok 属性支持函数返回 Promise ([#1623](https://github.com/arco-design/arco-design-vue/pull/1623))\n\n\n## 2.34.0\n\n`2022-07-29`\n\n### 💎 功能优化\n\n- 支持在函数调用中隐藏页脚 ([#1410](https://github.com/arco-design/arco-design-vue/pull/1410))\n\n\n## 2.33.1\n\n`2022-07-22`\n\n### 🐛 问题修复\n\n- 修复默认标题类名错误的问题 ([#1413](https://github.com/arco-design/arco-design-vue/pull/1413))\n\n\n## 2.33.0\n\n`2022-07-08`\n\n### 💅 样式更新\n\n- 修复 footer 按钮不居中的问题 ([#1391](https://github.com/arco-design/arco-design-vue/pull/1391))\n\n\n## 2.32.0\n\n`2022-06-24`\n\n### 🐛 问题修复\n\n- 修复当模态框超出屏幕大小后，移动位置导致错位的问题 ([#1336](https://github.com/arco-design/arco-design-vue/pull/1336))\n\n\n## 2.31.0\n\n`2022-06-17`\n\n### 🆕 新增功能\n\n- 增加 bodyClass 和 bodyStyle ([#1303](https://github.com/arco-design/arco-design-vue/pull/1303))\n\n\n## 2.30.0\n\n`2022-06-10`\n\n### 🐛 问题修复\n\n- 在组件卸载时重置 overflow 设置 ([#1262](https://github.com/arco-design/arco-design-vue/pull/1262))\n\n\n## 2.27.0\n\n`2022-05-13`\n\n### 🐛 问题修复\n\n- 修复拖拽后开启全屏产生位置偏移的问题 ([#1070](https://github.com/arco-design/arco-design-vue/pull/1070))\n\n### 🆎 类型修正\n\n- 补全 ModalConfig 缺失的属性 ([#1120](https://github.com/arco-design/arco-design-vue/pull/1120))\n\n\n## 2.26.0\n\n`2022-04-29`\n\n### 💅 样式更新\n\n- body 层增加 `overflow: auto` ([#1030](https://github.com/arco-design/arco-design-vue/pull/1030))\n\n\n## 2.25.0\n\n`2022-04-22`\n\n### 💎 功能优化\n\n- 使用 `esc` 关闭时只会关闭最上层弹窗 ([#1018](https://github.com/arco-design/arco-design-vue/pull/1018))\n\n\n## 2.24.0\n\n`2022-04-15`\n\n### 🆕 新增功能\n\n- 增加动画名属性 ([#985](https://github.com/arco-design/arco-design-vue/pull/985))\n\n### 🐛 问题修复\n\n- 修复在某些情况下不会锁定 body 的问题 ([#968](https://github.com/arco-design/arco-design-vue/pull/968))\n\n### 💅 样式更新\n\n- 修复全屏下动画导致闪现滚动条的问题 ([#985](https://github.com/arco-design/arco-design-vue/pull/985))\n\n\n## 2.23.0\n\n`2022-04-08`\n\n### 💎 功能优化\n\n- 修复在滚动条为浮动的情况下，body没有锁定的问题 ([#945](https://github.com/arco-design/arco-design-vue/pull/945))\n\n### 💅 样式更新\n\n- 修复在简单模式下，title-align 靠左对齐失效的问题 ([#945](https://github.com/arco-design/arco-design-vue/pull/945))\n\n\n## 2.22.0\n\n`2022-04-01`\n\n### 🐛 问题修复\n\n- 修复 `align-center=\"false\"` 时自动宽度和拖动错误的问题 ([#918](https://github.com/arco-design/arco-design-vue/pull/918))\n\n\n## 2.21.0\n\n`2022-03-25`\n\n### 🐛 问题修复\n\n- 修复使用函数方式触发Modal显示时，按钮处于焦点，此时点击回车会继续出发点击事件 ([#860](https://github.com/arco-design/arco-design-vue/pull/860))\n\n\n## 2.20.0\n\n`2022-03-18`\n\n### 🐛 问题修复\n\n- 修复创建方法中返回的 `close` 函数错误的问题 ([#840](https://github.com/arco-design/arco-design-vue/pull/840))\n\n\n## 2.19.0\n\n`2022-03-11`\n\n### 🆕 新增功能\n\n- 增加 `draggable` 属性，支持可拖动 ([#802](https://github.com/arco-design/arco-design-vue/pull/802))\n- 增加 `fullscreen` 属性，支持全屏展示 ([#802](https://github.com/arco-design/arco-design-vue/pull/802))\n\n\n## 2.18.0-beta.2\n\n`2022-02-25`\n\n### 💎 功能优化\n\n- 优化点击遮罩层关闭 ([#737](https://github.com/arco-design/arco-design-vue/pull/737))\n\n\n## 2.17.0\n\n`2022-02-11`\n\n### 🆕 新增功能\n\n- 增加 `title-align` 属性 ([#673](https://github.com/arco-design/arco-design-vue/pull/673))\n\n\n## 2.16.0\n\n`2022-01-21`\n\n### 🆕 新增功能\n\n- 增加 `before-open` 和 `before-close` 事件 ([#628](https://github.com/arco-design/arco-design-vue/pull/628))\n\n### 🐛 问题修复\n\n- 修复样式文件缺少 `<button>` 组件样式引用的问题 ([#635](https://github.com/arco-design/arco-design-vue/pull/635))\n\n\n## 2.15.0\n\n`2022-01-14`\n\n### 🆕 新增功能\n\n- 增加 `escToClose` 属性并默认开启 ([#577](https://github.com/arco-design/arco-design-vue/pull/577))\n\n\n## 2.12.2\n\n`2021-12-27`\n\n### 🐛 问题修复\n\n- 修复 modalStyle 失效的问题 ([#459](https://github.com/arco-design/arco-design-vue/pull/459))\n- 修复 flex 布局导致垂直居中且超出高度显示不全的问题 ([#459](https://github.com/arco-design/arco-design-vue/pull/459))\n\n\n## 2.12.0\n\n`2021-12-24`\n\n### ⚠️ 重点注意\n\n- 修改 wrapper 层展示 modal 的方式，并添加 `width` 和 `top` 属性 ([#454](https://github.com/arco-design/arco-design-vue/pull/454))\n\n### 🐛 问题修复\n\n- 修复按钮内容不能动态修改的问题 ([#453](https://github.com/arco-design/arco-design-vue/pull/453))\n\n\n## 2.11.0\n\n`2021-12-17`\n\n### 🐛 问题修复\n\n- 修复 `alignCenter` 属性不生效的问题 ([#384](https://github.com/arco-design/arco-design-vue/pull/384))\n- 调整组件的 `alignCenter` 属性默认为 `true` ([#384](https://github.com/arco-design/arco-design-vue/pull/384))\n\n\n## 2.10.1\n\n`2021-12-14`\n\n### 🆎 类型修正\n\n- `ModalConfig ` 增加 `simple` 属性注解 ([#389](https://github.com/arco-design/arco-design-vue/pull/389))\n\n\n## 2.10.0\n\n`2021-12-10`\n\n### 💅 样式更新\n\n- 修复 modal 信息展示模式错误的问题 ([#351](https://github.com/arco-design/arco-design-vue/pull/351))\n- 简单模式下不展示标题栏关闭按钮 ([#351](https://github.com/arco-design/arco-design-vue/pull/351))\n\n\n## 2.7.0\n\n`2021-11-26`\n\n### 🆕 新增功能\n\n- 增加 `on-before-ok` 和 `on-before-cancel` 属性事件 ([#229](https://github.com/arco-design/arco-design-vue/pull/229))\n\n### 🐛 问题修复\n\n- 修复初始触发 `open` 事件的问题 ([#267](https://github.com/arco-design/arco-design-vue/pull/267))\n\n\n## 2.4.0\n\n`2021-11-17`\n\n### 💎 功能优化\n\n- 统一管理弹出层的 zIndex ([#167](https://github.com/arco-design/arco-design-vue/pull/167))\n\n\n## 2.1.1\n\n`2021-11-08`\n\n### 🐛 问题修复\n\n- 修复 `title` 属性不生效的问题 ([#116](https://github.com/arco-design/arco-design-vue/pull/116))\n\n\n## 2.0.3\n\n`2021-10-29`\n\n### 🐛 问题修复\n\n- 修复主按钮类型错误的问题 ([#30](https://github.com/arco-design/arco-design-vue/pull/30))\n\n"
  },
  {
    "path": "packages/web-vue/components/modal/README.en-US.md",
    "content": "```yaml\nmeta:\n  type: Component\n  category: Feedback\ntitle: Modal\ndescription: Open a floating layer on the current page to carry related operations.\n```\n\n*Auto translate by google.*\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/async.md\n\n@import ./__demo__/function.md\n\n@import ./__demo__/notice.md\n\n@import ./__demo__/width.md\n\n@import ./__demo__/custom.md\n\n@import ./__demo__/form.md\n\n@import ./__demo__/draggable.md\n\n@import ./__demo__/fullscreen.md\n\n## API\n\n\n### `<modal>` Props\n\n|Attribute|Description|Type|Default|version|\n|---|---|---|:---:|:---|\n|visible **(v-model)**|Whether the modal is visible|`boolean`|`-`||\n|default-visible|Whether the modal is visible by default (uncontrolled state)|`boolean`|`false`||\n|width|The width of the dialog box, if not set, the width value in the style will be used|`number\\|string`|`-`|2.12.0|\n|top|The height from the top of the dialog box. It does not take effect when the center display is turned on.|`number\\|string`|`-`|2.12.0|\n|mask|Whether to show the mask|`boolean`|`true`||\n|title|Title|`string`|`-`||\n|title-align|horizontal alignment of the title|`'start' \\| 'center'`|`'center'`|2.17.0|\n|align-center|Whether the dialog box is displayed in the center|`boolean`|`true`||\n|unmount-on-close|Whether to uninstall the node when close|`boolean`|`false`||\n|mask-closable|Whether to close the modal when click the mask|`boolean`|`true`||\n|hide-cancel|Whether to hide the cancel button|`boolean`|`false`||\n|simple|Whether to enable simple mode|`boolean`|`(props: any) => {  return props.notice;}`||\n|closable|Whether to show the close button|`boolean`|`true`||\n|ok-text|The content of the confirm button|`string`|`-`||\n|cancel-text|The content of the cancel button|`string`|`-`||\n|ok-loading|Whether the confirm button is in the loading state|`boolean`|`false`||\n|ok-button-props|Props of confirm button|`ButtonProps`|`-`||\n|cancel-button-props|Props of cancel button|`ButtonProps`|`-`||\n|footer|Whether to show the footer|`boolean`|`true`||\n|render-to-body|Whether the modal is mounted under the `body` element|`boolean`|`true`||\n|popup-container|Mount container for modal|`string \\| HTMLElement`|`'body'`||\n|mask-style|Mask style|`CSSProperties`|`-`||\n|modal-class|The classname of the modal|`string \\| any[]`|`-`||\n|modal-style|Modal style|`CSSProperties`|`-`||\n|on-before-ok|The callback function before the ok event is triggered. If false is returned, subsequent events will not be triggered, and done can also be used to close asynchronously.|`(  done: (closed: boolean) => void) => void \\| boolean \\| Promise<void \\| boolean>`|`-`|2.7.0|\n|on-before-cancel|The callback function before the cancel event is triggered. If it returns false, no subsequent events will be triggered.|`() => boolean`|`-`|2.7.0|\n|esc-to-close|Whether to support the ESC key to close the dialog|`boolean`|`true`|2.15.0|\n|draggable|Whether to support drag|`boolean`|`false`|2.19.0|\n|fullscreen|Whether to enable full screen|`boolean`|`false`|2.19.0|\n|mask-animation-name|Mask layer animation name|`string`|`-`|2.24.0|\n|modal-animation-name|Modal animation name|`string`|`-`|2.24.0|\n|body-class|The classname of the modal|`string \\| any[]`|`-`|2.31.0|\n|body-style|Modal style|`StyleValue`|`-`|2.31.0|\n|hide-title|Whether to hide the title|`boolean`|`false`|2.50.0|\n### `<modal>` Events\n\n|Event Name|Description|Parameters|version|\n|---|---|---|:---|\n|ok|Triggered when the OK button is clicked|ev: `MouseEvent`||\n|cancel|Triggered when the cancel/close button is clicked|ev: `MouseEvent \\| KeyboardEvent`||\n|open|Triggered after the modal is opened (the animation ends)|-||\n|close|Triggered after the modal is closed (the animation ends)|-||\n|before-open|Triggered before dialog is opened|-|2.16.0|\n|before-close|Triggered before dialog is closed|-|2.16.0|\n### `<modal>` Slots\n\n|Slot Name|Description|Parameters|\n|---|---|---|\n|title|Title|-|\n|footer|Footer|-|\n\n\n\n### `<modal>` Global methods\n\nThe global methods provided by Modal can be used in the following three ways:\n\n1. Called by this.$modal\n2. In the Composition API, call through getCurrentInstance().appContext.config.globalProperties.$modal\n3. Import Modal, call through Modal itself\n\nWhen used by import, the component has no way to obtain the current Vue Context. Content injected into the AppContext such as i18n or route cannot be used internally. You need to manually pass in the AppContext when calling, or specify the AppContext globally for the component.\n\n```ts\nimport { createApp } from 'vue'\nimport { Modal } from '@arco-design/web-vue';\n\nconst app = createApp(App);\nModal._context = app._context;\n````\n\n\n### ModalConfig\n\n|Name|Description|Type|Default|version|\n|---|---|---|:---:|:---|\n|title|Title|`RenderContent`|`-`||\n|content|Content|`RenderContent`|`-`||\n|footer|Footer|`boolean \\| RenderContent`|`true`||\n|closable|Whether to show the close button|`boolean`|`true`||\n|okText|The content of the confirm button|`string`|`-`||\n|cancelText|The content of the cancel button|`string`|`-`||\n|okButtonProps|Props of confirm button|`ButtonProps`|`-`||\n|cancelButtonProps|Props of cancel button|`ButtonProps`|`-`||\n|okLoading|Whether the confirm button is in the loading state|`boolean`|`false`||\n|hideCancel|Whether to hide the cancel button|`boolean`|`false`||\n|mask|Whether to show the mask|`boolean`|`true`||\n|simple|Whether to enable simple mode|`boolean`|`false`||\n|maskClosable|Whether to close the modal when click the mask|`boolean`|`true`||\n|maskStyle|Mask style|`CSSProperties`|`-`||\n|alignCenter|Whether the dialog box is displayed in the center|`boolean`|`true`||\n|escToClose|Whether to support the ESC key to close the dialog|`boolean`|`true`|2.15.0|\n|draggable|Whether to support drag|`boolean`|`false`|2.19.0|\n|fullscreen|Whether to enable full screen|`boolean`|`false`|2.19.0|\n|onOk|Callback function for clicking the OK button|`(e?: Event) => void`|`-`||\n|onCancel|Callback function for clicking the Cancel button|`(e?: Event) => void`|`-`||\n|onBeforeOk|The callback function before the ok event is triggered. If false is returned, subsequent events will not be triggered, and done can also be used to close asynchronously.|`(    done: (closed: boolean) => void  ) => void \\| boolean \\| Promise<void \\| boolean>`|`-`|2.7.0|\n|onBeforeCancel|The callback function before the cancel event is triggered. If it returns false, no subsequent events will be triggered.|`() => boolean`|`-`|2.7.0|\n|onOpen|Triggered after the modal is opened (the animation ends)|`() => void`|`-`||\n|onClose|Triggered after the modal is closed (the animation ends)|`() => void`|`-`||\n|onBeforeOpen|Triggered before dialog is opened|`() => void`|`-`|2.16.0|\n|onBeforeClose|Triggered before dialog is closed|`() => void`|`-`|2.16.0|\n|width|The width of the dialog box, if not set, the width value in the style will be used|`number \\| string`|`-`|2.12.0|\n|top|The height from the top of the dialog box. It does not take effect when the center display is turned on.|`number \\| string`|`-`|2.12.0|\n|titleAlign|horizontal alignment of the title|`'start' \\| 'center'`|`'center'`|2.17.0|\n|renderToBody|Whether the modal is mounted under the `body` element|`boolean`|`true`||\n|popupContainer|Mount container for modal|`string \\| HTMLElement`|`'body'`||\n|modalClass|The classname of the modal|`string \\| any[]`|`-`||\n|modalStyle|Modal style|`CSSProperties`|`-`||\n|maskAnimationName|Mask layer animation name|`string`|`-`|2.24.0|\n|modalAnimationName|Modal animation name|`string`|`-`|2.24.0|\n|hideTitle|Whether to hide the title|`boolean`|`false`|2.50.0|\n|bodyClass|The classname of the modal|`string \\| any[]`|`-`||\n|bodyStyle|Modal style|`StyleValue`|`-`||\n\n\n\n### ModalReturn\n\n|Name|Description|Type|Default|version|\n|---|---|---|:---:|:---|\n|close|Close Modal|`() => void`|`-`||\n|update|Update Modal|`(config: ModalUpdateConfig) => void`|`-`|2.43.2|\n\n\n\n### ModalMethod\n\n|Name|Description|Type|Default|\n|---|---|---|:---:|\n|open|Open modal|`(config: ModalConfig, appContext?: AppContext) => ModalReturn`|`-`|\n|confirm|Open modal (simple mode)|`(config: ModalConfig, appContext?: AppContext) => ModalReturn`|`-`|\n|info|Open info modal|`(config: ModalConfig, appContext?: AppContext) => ModalReturn`|`-`|\n|success|Open success modal|`(config: ModalConfig, appContext?: AppContext) => ModalReturn`|`-`|\n|warning|Open warning modal|`(config: ModalConfig, appContext?: AppContext) => ModalReturn`|`-`|\n|error|Open error modal|`(config: ModalConfig, appContext?: AppContext) => ModalReturn`|`-`|\n\n\n"
  },
  {
    "path": "packages/web-vue/components/modal/README.zh-CN.md",
    "content": "```yaml\nmeta:\n  type: 组件\n  category: 反馈\ntitle: Modal 对话框\ndescription: 在当前页面打开一个浮层，承载相关操作。\n```\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/async.md\n\n@import ./__demo__/function.md\n\n@import ./__demo__/notice.md\n\n@import ./__demo__/width.md\n\n@import ./__demo__/custom.md\n\n@import ./__demo__/form.md\n\n@import ./__demo__/draggable.md\n\n@import ./__demo__/fullscreen.md\n\n## API\n\n\n### `<modal>` Props\n\n|参数名|描述|类型|默认值|版本|\n|---|---|---|:---:|:---|\n|visible **(v-model)**|对话框是否可见|`boolean`|`-`||\n|default-visible|对话框默认是否可见（非受控状态）|`boolean`|`false`||\n|width|对话框的宽度，不设置的情况下会使用样式中的宽度值|`number\\|string`|`-`|2.12.0|\n|top|对话框的距离顶部的高度，居中显示开启的情况下不生效|`number\\|string`|`-`|2.12.0|\n|mask|是否显示遮罩层|`boolean`|`true`||\n|title|标题|`string`|`-`||\n|title-align|标题的水平对齐方向|`'start' \\| 'center'`|`'center'`|2.17.0|\n|align-center|对话框是否居中显示|`boolean`|`true`||\n|unmount-on-close|关闭时是否卸载节点|`boolean`|`false`||\n|mask-closable|是否点击遮罩层可以关闭对话框|`boolean`|`true`||\n|hide-cancel|是否隐藏取消按钮|`boolean`|`false`||\n|simple|是否开启简单模式|`boolean`|`(props: any) => {  return props.notice;}`||\n|closable|是否显示关闭按钮|`boolean`|`true`||\n|ok-text|确认按钮的内容|`string`|`-`||\n|cancel-text|取消按钮的内容|`string`|`-`||\n|ok-loading|确认按钮是否为加载中状态|`boolean`|`false`||\n|ok-button-props|确认按钮的Props|`ButtonProps`|`-`||\n|cancel-button-props|取消按钮的Props|`ButtonProps`|`-`||\n|footer|是否展示页脚部分|`boolean`|`true`||\n|render-to-body|对话框是否挂载在 `body` 元素下|`boolean`|`true`||\n|popup-container|弹出框的挂载容器|`string \\| HTMLElement`|`'body'`||\n|mask-style|蒙层的样式|`CSSProperties`|`-`||\n|modal-class|对话框的类名|`string \\| any[]`|`-`||\n|modal-style|对话框的样式|`CSSProperties`|`-`||\n|on-before-ok|触发 ok 事件前的回调函数。如果返回 false 则不会触发后续事件，也可使用 done 进行异步关闭。|`(  done: (closed: boolean) => void) => void \\| boolean \\| Promise<void \\| boolean>`|`-`|2.7.0|\n|on-before-cancel|触发 cancel 事件前的回调函数。如果返回 false 则不会触发后续事件。|`() => boolean`|`-`|2.7.0|\n|esc-to-close|是否支持 ESC 键关闭对话框|`boolean`|`true`|2.15.0|\n|draggable|是否支持拖动|`boolean`|`false`|2.19.0|\n|fullscreen|是否开启全屏|`boolean`|`false`|2.19.0|\n|mask-animation-name|遮罩层动画名字|`string`|`-`|2.24.0|\n|modal-animation-name|对话框动画名字|`string`|`-`|2.24.0|\n|body-class|对话框内容部分的类名|`string \\| any[]`|`-`|2.31.0|\n|body-style|对话框内容部分的样式|`StyleValue`|`-`|2.31.0|\n|hide-title|是否隐藏标题|`boolean`|`false`|2.50.0|\n### `<modal>` Events\n\n|事件名|描述|参数|版本|\n|---|---|---|:---|\n|ok|点击确定按钮时触发|ev: `MouseEvent`||\n|cancel|点击取消、关闭按钮时触发|ev: `MouseEvent \\| KeyboardEvent`||\n|open|对话框打开后（动画结束）触发|-||\n|close|对话框关闭后（动画结束）触发|-||\n|before-open|对话框打开前触发|-|2.16.0|\n|before-close|对话框关闭前触发|-|2.16.0|\n### `<modal>` Slots\n\n|插槽名|描述|参数|\n|---|:---:|---|\n|title|标题|-|\n|footer|页脚|-|\n\n\n\n### `<modal>` 全局方法\n\nModal提供的全局方法，可以通过以下三种方法使用：\n\n1. 通过this.$modal调用\n2. 在Composition API中，通过getCurrentInstance().appContext.config.globalProperties.$modal调用\n3. 导入Modal，通过Modal本身调用\n\n当通过 import 方式使用时，组件没有办法获取当前的 Vue Context，如 i18n 或 route 等注入在 AppContext 上的内容无法在内部使用，需要在调用时手动传入 AppContext，或者为组件全局指定 AppContext\n\n```ts\nimport { createApp } from 'vue'\nimport { Modal } from '@arco-design/web-vue';\n\nconst app = createApp(App);\nModal._context = app._context;\n```\n\n\n### ModalConfig\n\n|参数名|描述|类型|默认值|版本|\n|---|---|---|:---:|:---|\n|title|标题|`RenderContent`|`-`||\n|content|内容|`RenderContent`|`-`||\n|footer|页脚|`boolean \\| RenderContent`|`true`||\n|closable|是否显示关闭按钮|`boolean`|`true`||\n|okText|确认按钮的内容|`string`|`-`||\n|cancelText|取消按钮的内容|`string`|`-`||\n|okButtonProps|确认按钮的Props|`ButtonProps`|`-`||\n|cancelButtonProps|取消按钮的Props|`ButtonProps`|`-`||\n|okLoading|确认按钮是否为加载中状态|`boolean`|`false`||\n|hideCancel|是否隐藏取消按钮|`boolean`|`false`||\n|mask|是否显示遮罩层|`boolean`|`true`||\n|simple|是否开启简单模式|`boolean`|`false`||\n|maskClosable|是否点击遮罩层可以关闭对话框|`boolean`|`true`||\n|maskStyle|蒙层的样式|`CSSProperties`|`-`||\n|alignCenter|对话框是否居中显示|`boolean`|`true`||\n|escToClose|是否支持 ESC 键关闭对话框|`boolean`|`true`|2.15.0|\n|draggable|是否支持拖动|`boolean`|`false`|2.19.0|\n|fullscreen|是否开启全屏|`boolean`|`false`|2.19.0|\n|onOk|点击确定按钮的回调函数|`(e?: Event) => void`|`-`||\n|onCancel|点击取消按钮的回调函数|`(e?: Event) => void`|`-`||\n|onBeforeOk|触发 ok 事件前的回调函数。如果返回 false 则不会触发后续事件，也可使用 done 进行异步关闭。|`(    done: (closed: boolean) => void  ) => void \\| boolean \\| Promise<void \\| boolean>`|`-`|2.7.0|\n|onBeforeCancel|触发 cancel 事件前的回调函数。如果返回 false 则不会触发后续事件。|`() => boolean`|`-`|2.7.0|\n|onOpen|对话框打开后（动画结束）触发|`() => void`|`-`||\n|onClose|对话框关闭后（动画结束）触发|`() => void`|`-`||\n|onBeforeOpen|对话框打开前触发|`() => void`|`-`|2.16.0|\n|onBeforeClose|对话框关闭前触发|`() => void`|`-`|2.16.0|\n|width|对话框的宽度，不设置的情况下会使用样式中的宽度值|`number \\| string`|`-`|2.12.0|\n|top|对话框的距离顶部的高度，居中显示开启的情况下不生效|`number \\| string`|`-`|2.12.0|\n|titleAlign|标题的水平对齐方向|`'start' \\| 'center'`|`'center'`|2.17.0|\n|renderToBody|对话框是否挂载在 `body` 元素下|`boolean`|`true`||\n|popupContainer|弹出框的挂载容器|`string \\| HTMLElement`|`'body'`||\n|modalClass|对话框的类名|`string \\| any[]`|`-`||\n|modalStyle|对话框的样式|`CSSProperties`|`-`||\n|maskAnimationName|遮罩层动画名字|`string`|`-`|2.24.0|\n|modalAnimationName|对话框动画名字|`string`|`-`|2.24.0|\n|hideTitle|是否隐藏标题|`boolean`|`false`|2.50.0|\n|bodyClass|对话框内容部分的类名|`string \\| any[]`|`-`||\n|bodyStyle|对话框内容部分的样式|`StyleValue`|`-`||\n\n\n\n### ModalReturn\n\n|参数名|描述|类型|默认值|版本|\n|---|---|---|:---:|:---|\n|close|关闭对话框|`() => void`|`-`||\n|update|更新对话框|`(config: ModalUpdateConfig) => void`|`-`|2.43.2|\n\n\n\n### ModalMethod\n\n|参数名|描述|类型|默认值|\n|---|---|---|:---:|\n|open|打开对话框|`(config: ModalConfig, appContext?: AppContext) => ModalReturn`|`-`|\n|confirm|打开对话框（简单模式）|`(config: ModalConfig, appContext?: AppContext) => ModalReturn`|`-`|\n|info|打开信息对话框|`(config: ModalConfig, appContext?: AppContext) => ModalReturn`|`-`|\n|success|打开成功对话框|`(config: ModalConfig, appContext?: AppContext) => ModalReturn`|`-`|\n|warning|打开警告对话框|`(config: ModalConfig, appContext?: AppContext) => ModalReturn`|`-`|\n|error|打开错误对话框|`(config: ModalConfig, appContext?: AppContext) => ModalReturn`|`-`|\n\n\n"
  },
  {
    "path": "packages/web-vue/components/modal/TEMPLATE.md",
    "content": "## zh-CN\n```yaml\nmeta:\n  type: 组件\n  category: 反馈\ntitle: Modal 对话框\ndescription: 在当前页面打开一个浮层，承载相关操作。\n```\n---\n## en-US\n```yaml\nmeta:\n  type: Component\n  category: Feedback\ntitle: Modal\ndescription: Open a floating layer on the current page to carry related operations.\n```\n---\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/async.md\n\n@import ./__demo__/function.md\n\n@import ./__demo__/notice.md\n\n@import ./__demo__/width.md\n\n@import ./__demo__/custom.md\n\n@import ./__demo__/form.md\n\n@import ./__demo__/draggable.md\n\n@import ./__demo__/fullscreen.md\n\n## API\n\n%%API(modal.vue)%%\n\n## zh-CN\n### `<modal>` 全局方法\n\nModal提供的全局方法，可以通过以下三种方法使用：\n\n1. 通过this.$modal调用\n2. 在Composition API中，通过getCurrentInstance().appContext.config.globalProperties.$modal调用\n3. 导入Modal，通过Modal本身调用\n\n当通过 import 方式使用时，组件没有办法获取当前的 Vue Context，如 i18n 或 route 等注入在 AppContext 上的内容无法在内部使用，需要在调用时手动传入 AppContext，或者为组件全局指定 AppContext\n\n```ts\nimport { createApp } from 'vue'\nimport { Modal } from '@arco-design/web-vue';\n\nconst app = createApp(App);\nModal._context = app._context;\n```\n\n---\n## en-US\n### `<modal>` Global methods\n\nThe global methods provided by Modal can be used in the following three ways:\n\n1. Called by this.$modal\n2. In the Composition API, call through getCurrentInstance().appContext.config.globalProperties.$modal\n3. Import Modal, call through Modal itself\n\nWhen used by import, the component has no way to obtain the current Vue Context. Content injected into the AppContext such as i18n or route cannot be used internally. You need to manually pass in the AppContext when calling, or specify the AppContext globally for the component.\n\n```ts\nimport { createApp } from 'vue'\nimport { Modal } from '@arco-design/web-vue';\n\nconst app = createApp(App);\nModal._context = app._context;\n````\n\n---\n\n%%INTERFACE(interface.ts)%%\n"
  },
  {
    "path": "packages/web-vue/components/modal/__demo__/async.md",
    "content": "```yaml\ntitle:\n  zh-CN: 异步关闭\n  en-US: Async Close\n```\n\n## zh-CN\n\n可以通过 on-before-ok 更简洁的实现异步关闭功能\n\n---\n\n## en-US\n\nAsynchronous shutdown can be implemented more concisely through on-before-ok\n\n---\n\n```vue\n\n<template>\n  <a-button @click=\"handleClick\">Open Modal</a-button>\n  <a-modal v-model:visible=\"visible\" @cancel=\"handleCancel\" :on-before-ok=\"handleBeforeOk\" unmountOnClose>\n    <template #title>\n      Title\n    </template>\n    <div>You can customize modal body text by the current situation. This modal will be closed immediately once you\n      press the OK button.\n    </div>\n  </a-modal>\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n  setup() {\n    const visible = ref(false);\n\n    const handleClick = () => {\n      visible.value = true;\n    };\n    const handleBeforeOk = async () => {\n      await new Promise(resolve => setTimeout(resolve, 3000));\n      return true;\n      // prevent close\n      // return false;\n    };\n    const handleCancel = () => {\n      visible.value = false;\n    }\n\n    return {\n      visible,\n      handleClick,\n      handleBeforeOk,\n      handleCancel\n    }\n  },\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/modal/__demo__/basic.md",
    "content": "```yaml\ntitle:\n  zh-CN: 基本用法\n  en-US: Basic Usage\n```\n\n## zh-CN\n\n对话框的基本用法。\n\n---\n\n## en-US\n\nThe basic usage of the modal.\n\n---\n\n```vue\n<template>\n  <a-button @click=\"handleClick\">Open Modal</a-button>\n  <a-modal v-model:visible=\"visible\" @ok=\"handleOk\" @cancel=\"handleCancel\">\n    <template #title>\n      Title\n    </template>\n    <div>You can customize modal body text by the current situation. This modal will be closed immediately once you press the OK button.</div>\n  </a-modal>\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n  setup() {\n    const visible = ref(false);\n\n    const handleClick = () => {\n      visible.value = true;\n    };\n    const handleOk = () => {\n      visible.value = false;\n    };\n    const handleCancel = () => {\n      visible.value = false;\n    }\n\n    return {\n      visible,\n      handleClick,\n      handleOk,\n      handleCancel\n    }\n  },\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/modal/__demo__/confirm.md",
    "content": "```yaml\ntitle:\n  zh-CN: 确认对话框\n  en-US: Confirm Modal\n```\n\n## zh-CN\n\n使用Modal.confirm()，可以快速弹出对话框。\n\n---\n\n## en-US\n\nUse Modal.confirm() to quickly pop up a confirmation modal dialog.\n\n---\n\n```vue\n<template>\n  <a-button type=\"primary\" @click=\"handleClick\">Confirm</a-button>\n</template>\n\n<script>\nimport { ref } from 'vue';\nimport { Modal } from '@arco-design/web-vue';\n\nexport default {\n  setup() {\n    const handleClick = () => {\n      Modal.confirm({\n        title: 'Confirm deletion',\n        content: 'Are you sure you want to delete the 3 selected items? Once you press the delete button, the items will be deleted immediately. You can’t undo this action.',\n        okButtonProps: {\n          status: 'danger'\n        }\n      })\n    };\n\n    return {\n      handleClick\n    }\n  },\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/modal/__demo__/custom.md",
    "content": "```yaml\ntitle:\n  zh-CN: 定制按钮文字\n  en-US: Custom Button Text\n```\n\n## zh-CN\n\n设置 `okText` 与 `cancelText` 可以自定义按钮文字。\n\n---\n\n## en-US\n\nSet `okText` and `cancelText` to customize the button text.\n\n---\n\n```vue\n<template>\n  <a-button @click=\"handleClick\">Open Modal</a-button>\n  <a-modal :visible=\"visible\" @ok=\"handleOk\" @cancel=\"handleCancel\" okText=\"Confirm\" cancelText=\"Exit\" unmountOnClose>\n    <template #title>\n      Title\n    </template>\n    <div>You can customize modal body text by the current situation. This modal will be closed immediately once you press the OK button.</div>\n  </a-modal>\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n  setup() {\n    const visible = ref(false);\n\n    const handleClick = () => {\n      visible.value = true;\n    };\n    const handleOk = () => {\n      visible.value = false;\n    };\n    const handleCancel = () => {\n      visible.value = false;\n    }\n\n    return {\n      visible,\n      handleClick,\n      handleOk,\n      handleCancel\n    }\n  },\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/modal/__demo__/draggable.md",
    "content": "```yaml\ntitle:\n  zh-CN: 可拖动\n  en-US: Draggable\n```\n\n## zh-CN\n\n开启 `draggable` 属性，允许用户拖动对话框。\n\n---\n\n## en-US\n\nEnables the `draggable` property, which allows the user to drag the dialog.\n\n---\n\n```vue\n<template>\n  <a-button @click=\"handleClick\">Open Draggable Modal</a-button>\n  <a-modal v-model:visible=\"visible\" @ok=\"handleOk\" @cancel=\"handleCancel\" draggable>\n    <template #title>\n      Title\n    </template>\n    <div>You can customize modal body text by the current situation. This modal will be closed immediately once you press the OK button.</div>\n  </a-modal>\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n  setup() {\n    const visible = ref(false);\n\n    const handleClick = () => {\n      visible.value = true;\n    };\n    const handleOk = () => {\n      visible.value = false;\n    };\n    const handleCancel = () => {\n      visible.value = false;\n    }\n\n    return {\n      visible,\n      handleClick,\n      handleOk,\n      handleCancel\n    }\n  },\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/modal/__demo__/form.md",
    "content": "```yaml\ntitle:\n  zh-CN: 弹出层表单\n  en-US: Modal Form\n```\n\n## zh-CN\n\n在对话框中使用表单\n\n---\n\n## en-US\n\nUsing Form in Modal\n\n---\n\n```vue\n\n<template>\n  <a-button @click=\"handleClick\">Open Form Modal</a-button>\n  <a-modal v-model:visible=\"visible\" title=\"Modal Form\" @cancel=\"handleCancel\" @before-ok=\"handleBeforeOk\">\n    <a-form :model=\"form\">\n      <a-form-item field=\"name\" label=\"Name\">\n        <a-input v-model=\"form.name\" />\n      </a-form-item>\n      <a-form-item field=\"post\" label=\"Post\">\n        <a-select v-model=\"form.post\">\n          <a-option value=\"post1\">Post1</a-option>\n          <a-option value=\"post2\">Post2</a-option>\n          <a-option value=\"post3\">Post3</a-option>\n          <a-option value=\"post4\">Post4</a-option>\n        </a-select>\n      </a-form-item>\n    </a-form>\n  </a-modal>\n</template>\n\n<script>\nimport { reactive, ref } from 'vue';\n\nexport default {\n  setup() {\n    const visible = ref(false);\n    const form = reactive({\n      name: '',\n      post: ''\n    });\n\n    const handleClick = () => {\n      visible.value = true;\n    };\n    const handleBeforeOk = (done) => {\n      console.log(form)\n      window.setTimeout(() => {\n        done()\n        // prevent close\n        // done(false)\n      }, 3000)\n    };\n    const handleCancel = () => {\n      visible.value = false;\n    }\n\n    return {\n      visible,\n      form,\n      handleClick,\n      handleBeforeOk,\n      handleCancel\n    }\n  },\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/modal/__demo__/fullscreen.md",
    "content": "```yaml\ntitle:\n  zh-CN: 全屏\n  en-US: Fullscreen\n```\n\n## zh-CN\n\n开启 `fullscreen` 属性，可以让对话框占满整个容器。\n\n---\n\n## en-US\n\nEnable the `fullscreen` property to make the dialog fill the entire container.\n\n---\n\n```vue\n<template>\n  <a-button @click=\"handleClick\">Open Modal</a-button>\n  <a-modal v-model:visible=\"visible\" @ok=\"handleOk\" @cancel=\"handleCancel\" fullscreen>\n    <template #title>\n      Title\n    </template>\n    <div>You can customize modal body text by the current situation. This modal will be closed immediately once you press the OK button.</div>\n  </a-modal>\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n  setup() {\n    const visible = ref(false);\n\n    const handleClick = () => {\n      visible.value = true;\n    };\n    const handleOk = () => {\n      visible.value = false;\n    };\n    const handleCancel = () => {\n      visible.value = false;\n    }\n\n    return {\n      visible,\n      handleClick,\n      handleOk,\n      handleCancel\n    }\n  },\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/modal/__demo__/function.md",
    "content": "```yaml\ntitle:\n  zh-CN: 函数调用\n  en-US: Call By Function\n```\n\n## zh-CN\n\n通过函数的方式使用对话框。\n\n---\n\n## en-US\n\nUse the modal by function.\n\n---\n\n```vue\n<template>\n  <a-button @click=\"handleClick\">Open Modal</a-button>\n</template>\n\n<script>\nimport { h } from 'vue';\nimport { Modal, Button } from '@arco-design/web-vue';\n\nconst ModalContent = {\n  setup() {\n    const onClick = () => {\n      Modal.info({\n        title: 'Info Title',\n        content: 'This is an nest info message'\n      });\n    };\n\n    return () => h('div', {class: 'info-modal-content'}, [\n      h('span', {style: 'margin-bottom: 10px;'}, 'This is an info message'),\n      h(Button, {size: 'mini', onClick}, 'Open Nest Modal')\n    ])\n  },\n}\n\nexport default {\n  setup() {\n    const handleClick = () => {\n      Modal.info({\n        title: 'Info Title',\n        content: () => h(ModalContent)\n      });\n    };\n\n    return {\n      handleClick\n    }\n  },\n}\n</script>\n\n<style>\n.info-modal-content {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n}\n</style>\n```\n"
  },
  {
    "path": "packages/web-vue/components/modal/__demo__/notice.md",
    "content": "```yaml\ntitle:\n  zh-CN: 消息提示\n  en-US: Notice\n```\n\n## zh-CN\n\n有**info**, **success**, **warning**, **error**四种类型的消息提示，仅提供一个确认按钮用于关闭消息提示对话框。\n消息默认会默认开启 `simple` 和 `hideCancel`，如果想要取消可以再次设置。\n\n---\n\n## en-US\n\nThere are four types of notice: **info**, **success**, **warning**, **error**, and only a confirmation button is provided to close the notice.\nThe message defaults to enable `simple` and `hideCancel` by default, if you want to cancel, you can set it again.\n\n---\n\n```vue\n<template>\n  <a-space>\n    <a-button @click=\"handleClickInfo\">Info</a-button>\n    <a-button @click=\"handleClickSuccess\" status=\"success\">Success</a-button>\n    <a-button @click=\"handleClickWarning\" status=\"warning\">Warning</a-button>\n    <a-button @click=\"handleClickError\" status=\"danger\">Error</a-button>\n  </a-space>\n</template>\n\n<script>\nimport { Modal } from '@arco-design/web-vue';\n\nexport default {\n  setup() {\n    const handleClickInfo = () => {\n      Modal.info({\n        title: 'Info Notification',\n        content: 'This is an info description which directly indicates a neutral informative change or action.'\n      });\n    };\n    const handleClickSuccess = () => {\n      Modal.success({\n        title: 'Success Notification',\n        content: 'This is a success notification'\n      });\n    };\n    const handleClickWarning = () => {\n      Modal.warning({\n        title: 'Warning Notification',\n        content: 'This is a warning description which directly indicates a warning that might need attention.'\n      });\n    };\n    const handleClickError = () => {\n      Modal.error({\n        title: 'Error Notification',\n        content: 'This is an error description which directly indicates a dangerous or potentially negative action.'\n      });\n    };\n\n    return {\n      handleClickInfo,\n      handleClickSuccess,\n      handleClickWarning,\n      handleClickError\n    }\n  },\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/modal/__demo__/width.md",
    "content": "```yaml\ntitle:\n  zh-CN: 对话框的宽度\n  en-US: Modal width\n```\n\n## zh-CN\n\n设置 `width=\"auto\"` 可以让对话框自适应宽度\n\n---\n\n## en-US\n\nSet `width=\"auto\"` to make the dialog box adapt to the width\n\n---\n\n```vue\n<template>\n  <a-button @click=\"handleClick\">Open Modal</a-button>\n  <a-modal width=\"auto\" v-model:visible=\"visible\" @ok=\"handleOk\" @cancel=\"handleCancel\">\n    <template #title>\n      Title\n    </template>\n    <div>You can customize modal body text by the current situation. This modal will be closed immediately once you press the OK button.</div>\n  </a-modal>\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n  setup() {\n    const visible = ref(false);\n\n    const handleClick = () => {\n      visible.value = true;\n    };\n    const handleOk = () => {\n      visible.value = false;\n    };\n    const handleCancel = () => {\n      visible.value = false;\n    }\n\n    return {\n      visible,\n      handleClick,\n      handleOk,\n      handleCancel\n    }\n  },\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/modal/__test__/__snapshots__/demo.test.ts.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`<modal> demo: render [async] correctly 1`] = `\n\"<button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n  <!--v-if-->Open Modal\n</button>\"\n`;\n\nexports[`<modal> demo: render [basic] correctly 1`] = `\n\"<button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n  <!--v-if-->Open Modal\n</button>\"\n`;\n\nexports[`<modal> demo: render [confirm] correctly 1`] = `\n\"<button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n  <!--v-if-->Confirm\n</button>\"\n`;\n\nexports[`<modal> demo: render [custom] correctly 1`] = `\n\"<button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n  <!--v-if-->Open Modal\n</button>\"\n`;\n\nexports[`<modal> demo: render [draggable] correctly 1`] = `\n\"<button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n  <!--v-if-->Open Draggable Modal\n</button>\"\n`;\n\nexports[`<modal> demo: render [form] correctly 1`] = `\n\"<button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n  <!--v-if-->Open Form Modal\n</button>\"\n`;\n\nexports[`<modal> demo: render [fullscreen] correctly 1`] = `\n\"<button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n  <!--v-if-->Open Modal\n</button>\"\n`;\n\nexports[`<modal> demo: render [function] correctly 1`] = `\n\"<button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n  <!--v-if-->Open Modal\n</button>\"\n`;\n\nexports[`<modal> demo: render [notice] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 8px; row-gap: 8px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n      <!--v-if-->Info\n    </button></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-success\\\\\" type=\\\\\"button\\\\\">\n      <!--v-if-->Success\n    </button></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-warning\\\\\" type=\\\\\"button\\\\\">\n      <!--v-if-->Warning\n    </button></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-danger\\\\\" type=\\\\\"button\\\\\">\n      <!--v-if-->Error\n    </button></div>\n</div>\"\n`;\n\nexports[`<modal> demo: render [width] correctly 1`] = `\n\"<button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n  <!--v-if-->Open Modal\n</button>\"\n`;\n"
  },
  {
    "path": "packages/web-vue/components/modal/__test__/__snapshots__/index.test.ts.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Modal should render modal and emit ok/cancel event 1`] = `\n\"<!--teleport start-->\n<div class=\\\\\"arco-modal-container\\\\\" style=\\\\\"z-index: 1001;\\\\\">\n  <transition-stub name=\\\\\"fade-modal\\\\\" appear=\\\\\"true\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\">\n    <div class=\\\\\"arco-modal-mask\\\\\"></div>\n  </transition-stub>\n  <div class=\\\\\"arco-modal-wrapper arco-modal-wrapper-align-center\\\\\">\n    <transition-stub name=\\\\\"zoom-modal\\\\\" appear=\\\\\"true\\\\\" persisted=\\\\\"true\\\\\" css=\\\\\"true\\\\\">\n      <div class=\\\\\"arco-modal\\\\\">\n        <div class=\\\\\"arco-modal-header\\\\\">\n          <div class=\\\\\"arco-modal-title arco-modal-title-align-center\\\\\">\n            <!--v-if-->Title\n          </div>\n          <div tabindex=\\\\\"-1\\\\\" role=\\\\\"button\\\\\" aria-label=\\\\\"Close\\\\\" class=\\\\\"arco-modal-close-btn\\\\\"><span class=\\\\\"arco-icon-hover\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-close\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M9.857 9.858 24 24m0 0 14.142 14.142M24 24 38.142 9.858M24 24 9.857 38.142\\\\\"></path></svg></span></div>\n        </div>\n        <div class=\\\\\"arco-modal-body\\\\\">\n          <div>Modal Body</div>\n        </div>\n        <div class=\\\\\"arco-modal-footer\\\\\"><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n            <!--v-if-->取消\n          </button><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n            <!--v-if-->确定\n          </button></div>\n      </div>\n    </transition-stub>\n  </div>\n</div>\n<!--teleport end-->\"\n`;\n\nexports[`Modal should render simple modal 1`] = `\n\"<!--teleport start-->\n<div class=\\\\\"arco-modal-container\\\\\" style=\\\\\"z-index: 1001;\\\\\">\n  <transition-stub name=\\\\\"fade-modal\\\\\" appear=\\\\\"true\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\">\n    <div class=\\\\\"arco-modal-mask\\\\\"></div>\n  </transition-stub>\n  <div class=\\\\\"arco-modal-wrapper arco-modal-wrapper-align-center\\\\\">\n    <transition-stub name=\\\\\"zoom-modal\\\\\" appear=\\\\\"true\\\\\" persisted=\\\\\"true\\\\\" css=\\\\\"true\\\\\">\n      <div class=\\\\\"arco-modal arco-modal-simple\\\\\">\n        <div class=\\\\\"arco-modal-header\\\\\">\n          <div class=\\\\\"arco-modal-title arco-modal-title-align-center\\\\\">\n            <!--v-if-->Title\n          </div>\n          <!--v-if-->\n        </div>\n        <div class=\\\\\"arco-modal-body\\\\\">\n          <div>Modal Body</div>\n        </div>\n        <div class=\\\\\"arco-modal-footer\\\\\"><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n            <!--v-if-->取消\n          </button><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n            <!--v-if-->确定\n          </button></div>\n      </div>\n    </transition-stub>\n  </div>\n</div>\n<!--teleport end-->\"\n`;\n\nexports[`Modal should show modal and call cb 1`] = `\"<body style=\\\\\"overflow: hidden; width: -1024px; box-sizing: border-box;\\\\\"><div class=\\\\\"arco-overlay arco-overlay-modal\\\\\"><!--teleport start--><div class=\\\\\"arco-modal-container\\\\\" style=\\\\\"z-index: 1001;\\\\\"><transition-stub name=\\\\\"fade-modal\\\\\" appear=\\\\\"true\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"><div class=\\\\\"arco-modal-mask\\\\\"></div></transition-stub><div class=\\\\\"arco-modal-wrapper arco-modal-wrapper-align-center\\\\\"><transition-stub name=\\\\\"zoom-modal\\\\\" appear=\\\\\"true\\\\\" persisted=\\\\\"true\\\\\" css=\\\\\"true\\\\\"><div class=\\\\\"arco-modal\\\\\"><div class=\\\\\"arco-modal-header\\\\\"><div class=\\\\\"arco-modal-title arco-modal-title-align-center\\\\\"><!--v-if-->title</div><div tabindex=\\\\\"-1\\\\\" role=\\\\\"button\\\\\" aria-label=\\\\\"Close\\\\\" class=\\\\\"arco-modal-close-btn\\\\\"><span class=\\\\\"arco-icon-hover\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-close\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M9.857 9.858 24 24m0 0 14.142 14.142M24 24 38.142 9.858M24 24 9.857 38.142\\\\\"></path></svg></span></div></div><div class=\\\\\"arco-modal-body\\\\\">content</div><div class=\\\\\"arco-modal-footer\\\\\"><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\"><!--v-if-->取消</button><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\"><!--v-if-->确定</button></div></div></transition-stub></div></div><!--teleport end--></div></body>\"`;\n"
  },
  {
    "path": "packages/web-vue/components/modal/__test__/demo.test.ts",
    "content": "import demoTest from '../../../scripts/demo-test';\n\ndemoTest('modal');\n"
  },
  {
    "path": "packages/web-vue/components/modal/__test__/index.test.ts",
    "content": "import { nextTick } from 'vue';\nimport { mount } from '@vue/test-utils';\nimport Modal from '../index';\nimport ModalComponent from '../modal.vue';\n\ndescribe('Modal', () => {\n  test('should render modal and emit ok/cancel event', async () => {\n    const wrapper = mount(ModalComponent, {\n      props: {\n        defaultVisible: true,\n        renderToBody: false,\n      },\n      slots: {\n        default: `<div>Modal Body</div>`,\n        title: 'Title',\n      },\n    });\n\n    await nextTick();\n    expect(wrapper.html()).toMatchSnapshot();\n    const buttons = wrapper.findAll('button');\n    await buttons[0].trigger('click');\n    expect(wrapper.emitted('cancel')).toHaveLength(1);\n    await buttons[1].trigger('click');\n    expect(wrapper.emitted('ok')).toHaveLength(1);\n  });\n\n  test('should show modal and call cb', async () => {\n    const onOk = jest.fn();\n    const onCancel = jest.fn();\n\n    const wrapper = mount({\n      template: `\n        <button @click=\"handleClick\">Click</button>`,\n      methods: {\n        handleClick() {\n          Modal.open({\n            title: 'title',\n            content: 'content',\n            onOk,\n            onCancel,\n          });\n        },\n      },\n    });\n\n    await wrapper.find('button').trigger('click');\n    expect(document.body.outerHTML).toMatchSnapshot();\n    const buttons = document.querySelectorAll('button');\n    await buttons[0]?.click();\n    expect(onCancel).toBeCalled();\n    await buttons[1]?.click();\n    expect(onOk).toBeCalled();\n  });\n\n  test('should render simple modal', async () => {\n    const wrapper = mount(ModalComponent, {\n      props: {\n        defaultVisible: true,\n        simple: true,\n        renderToBody: false,\n      },\n      slots: {\n        default: `<div>Modal Body</div>`,\n        title: 'Title',\n      },\n    });\n\n    await nextTick();\n    expect(wrapper.html()).toMatchSnapshot();\n  });\n});\n"
  },
  {
    "path": "packages/web-vue/components/modal/context.ts",
    "content": "import { InjectionKey } from 'vue';\n\nexport interface ZIndexContext {\n  zIndex: number;\n}\n\nexport const zIndexInjectionKey: InjectionKey<ZIndexContext> =\n  Symbol('ArcoZIndex');\n"
  },
  {
    "path": "packages/web-vue/components/modal/hooks/use-draggable.ts",
    "content": "import { Ref, ref } from 'vue';\nimport { off, on } from '../../_utils/dom';\n\nexport const useDraggable = ({\n  modalRef,\n  wrapperRef,\n  draggable,\n  alignCenter,\n}: {\n  modalRef: Ref<HTMLElement | undefined>;\n  wrapperRef: Ref<HTMLElement | undefined>;\n  draggable: Ref<boolean>;\n  alignCenter: Ref<boolean>;\n}) => {\n  const isDragging = ref(false);\n  const startMouse = ref([0, 0]);\n\n  const initialPosition = ref([0, 0]);\n\n  const position = ref<[number, number]>();\n\n  const minPosition = ref<[number, number]>([0, 0]);\n\n  const maxPosition = ref<[number, number]>([0, 0]);\n\n  const getInitialPosition = () => {\n    if (wrapperRef.value && modalRef.value) {\n      const { top: wrapperTop, left: wrapperLeft } =\n        wrapperRef.value.getBoundingClientRect();\n      const { clientWidth: wrapperWidth, clientHeight: wrapperHeight } =\n        wrapperRef.value;\n      const { top, left, width, height } =\n        modalRef.value.getBoundingClientRect();\n\n      // subtract the top prop value when the alignCenter is false\n      const offsetTop = alignCenter.value ? 0 : modalRef.value?.offsetTop;\n      const initialX = left - wrapperLeft;\n      const initialY = top - wrapperTop - offsetTop;\n      if (\n        initialX !== initialPosition.value?.[0] ||\n        initialY !== initialPosition.value?.[1]\n      ) {\n        initialPosition.value = [initialX, initialY];\n      }\n      const maxX = wrapperWidth > width ? wrapperWidth - width : 0;\n      const maxY =\n        wrapperHeight > height ? wrapperHeight - height - offsetTop : 0;\n      if (maxX !== maxPosition.value[0] || maxY !== maxPosition.value[1]) {\n        maxPosition.value = [maxX, maxY];\n      }\n\n      if (offsetTop) {\n        minPosition.value = [0, 0 - offsetTop];\n      }\n    }\n  };\n\n  const handleMoveDown = (ev: MouseEvent) => {\n    if (draggable.value) {\n      ev.preventDefault();\n\n      isDragging.value = true;\n      getInitialPosition();\n      startMouse.value = [ev.x, ev.y];\n      on(window, 'mousemove', handleMouseMove);\n      on(window, 'mouseup', handleMouseUp);\n      on(window, 'contextmenu', handleMouseUp);\n    }\n  };\n\n  const handleMouseMove = (ev: MouseEvent) => {\n    if (isDragging.value) {\n      const diffX = ev.x - startMouse.value[0];\n      const diffY = ev.y - startMouse.value[1];\n\n      let x = initialPosition.value[0] + diffX;\n      let y = initialPosition.value[1] + diffY;\n\n      // eslint-disable-next-line prefer-destructuring\n      if (x < minPosition.value[0]) x = minPosition.value[0];\n      // eslint-disable-next-line prefer-destructuring\n      if (x > maxPosition.value[0]) x = maxPosition.value[0];\n      // eslint-disable-next-line prefer-destructuring\n      if (y < minPosition.value[1]) y = minPosition.value[1];\n      // eslint-disable-next-line prefer-destructuring\n      if (y > maxPosition.value[1]) y = maxPosition.value[1];\n\n      position.value = [x, y];\n    }\n  };\n\n  const handleMouseUp = () => {\n    isDragging.value = false;\n    off(window, 'mousemove', handleMouseMove);\n    off(window, 'mouseup', handleMouseUp);\n  };\n\n  return {\n    position,\n    handleMoveDown,\n  };\n};\n"
  },
  {
    "path": "packages/web-vue/components/modal/index.tsx",
    "content": "import type { App, AppContext } from 'vue';\nimport { nextTick, createVNode, render } from 'vue';\nimport type { ArcoOptions } from '../_utils/types';\nimport { setGlobalConfig, getComponentPrefix } from '../_utils/global-config';\nimport { MESSAGE_TYPES } from '../_utils/constant';\nimport { getOverlay } from '../_utils/dom';\nimport { isFunction } from '../_utils/is';\nimport _Modal from './modal.vue';\nimport type { ModalConfig, ModalMethod, ModalUpdateConfig } from './interface';\nimport { omit } from '../_utils/omit';\nimport { getSlotFunction } from '../_utils/vue-utils';\n\nconst open = (config: ModalConfig, appContext?: AppContext) => {\n  let container: HTMLElement | null = getOverlay('modal');\n\n  const handleOk = () => {\n    if (vm.component) {\n      vm.component.props.visible = false;\n    }\n\n    if (isFunction(config.onOk)) {\n      config.onOk();\n    }\n  };\n\n  const handleCancel = () => {\n    if (vm.component) {\n      vm.component.props.visible = false;\n    }\n\n    if (isFunction(config.onCancel)) {\n      config.onCancel();\n    }\n  };\n\n  const handleClose = async () => {\n    await nextTick();\n    if (container) {\n      render(null, container);\n      document.body.removeChild(container);\n    }\n    container = null;\n\n    if (isFunction(config.onClose)) {\n      config.onClose();\n    }\n  };\n\n  const handleReturnClose = () => {\n    if (vm.component) {\n      vm.component.props.visible = false;\n    }\n  };\n\n  const handleUpdateConfig = (config: ModalUpdateConfig) => {\n    if (vm.component) {\n      Object.entries(config).forEach(([key, value]) => {\n        vm.component!.props[key] = value;\n      });\n    }\n  };\n\n  const defaultConfig = {\n    visible: true,\n    renderToBody: false,\n    unmountOnClose: true,\n    onOk: handleOk,\n    onCancel: handleCancel,\n    onClose: handleClose,\n  };\n\n  // @ts-ignore\n  const vm = createVNode(\n    _Modal,\n    {\n      ...defaultConfig,\n      ...omit(config, [\n        'content',\n        'title',\n        'footer',\n        'visible',\n        'unmountOnClose',\n        'onOk',\n        'onCancel',\n        'onClose',\n      ]),\n      ...{\n        footer: typeof config.footer === 'boolean' ? config.footer : undefined,\n      },\n    },\n    {\n      default: getSlotFunction(config.content),\n      title: getSlotFunction(config.title),\n      footer:\n        typeof config.footer !== 'boolean'\n          ? getSlotFunction(config.footer)\n          : undefined,\n    }\n  );\n\n  if (appContext ?? Modal._context) {\n    vm.appContext = appContext ?? Modal._context;\n  }\n\n  render(vm, container);\n  document.body.appendChild(container);\n\n  return {\n    close: handleReturnClose,\n    update: handleUpdateConfig,\n  };\n};\n\nconst modal: ModalMethod = {\n  open,\n  confirm: (config: ModalConfig, appContext?: AppContext) => {\n    const _config = { simple: true, messageType: 'warning', ...config };\n\n    return open(_config, appContext);\n  },\n  ...MESSAGE_TYPES.reduce((pre, value) => {\n    pre[value] = (config: ModalConfig, appContext?: AppContext) => {\n      const _config = {\n        simple: true,\n        hideCancel: true,\n        messageType: value,\n        ...config,\n      };\n      return open(_config, appContext);\n    };\n\n    return pre;\n  }, {} as Pick<ModalMethod, 'info' | 'success' | 'warning' | 'error'>),\n};\n\nconst Modal = Object.assign(_Modal, {\n  ...modal,\n  install: (app: App, options?: ArcoOptions) => {\n    setGlobalConfig(app, options);\n    const componentPrefix = getComponentPrefix(options);\n\n    app.component(componentPrefix + _Modal.name, _Modal);\n\n    const modalWithContext = {} as ModalMethod;\n\n    for (const key of Object.keys(modal) as (keyof ModalMethod)[]) {\n      modalWithContext[key] = (config, appContext = app._context) =>\n        modal[key](config, appContext);\n    }\n\n    app.config.globalProperties.$modal = modalWithContext;\n  },\n  _context: null as AppContext | null,\n});\n\nexport type { ModalMethod, ModalConfig, ModalReturn } from './interface';\n\nexport default Modal;\n"
  },
  {
    "path": "packages/web-vue/components/modal/interface.ts",
    "content": "import { AppContext, CSSProperties, StyleValue } from 'vue';\nimport { ButtonProps } from '../button';\nimport { RenderContent } from '../_utils/types';\n\nexport interface ModalConfig {\n  /**\n   * @zh 标题\n   * @en Title\n   */\n  title?: RenderContent;\n  /**\n   * @zh 内容\n   * @en Content\n   */\n  content: RenderContent;\n  /**\n   * @zh 页脚\n   * @en Footer\n   * @defaultValue true\n   */\n  footer?: boolean | RenderContent;\n  /**\n   * @zh 是否显示关闭按钮\n   * @en Whether to show the close button\n   * @defaultValue true\n   */\n  closable?: boolean;\n  /**\n   * @zh 确认按钮的内容\n   * @en The content of the confirm button\n   */\n  okText?: string;\n  /**\n   * @zh 取消按钮的内容\n   * @en The content of the cancel button\n   */\n  cancelText?: string;\n  /**\n   * @zh 确认按钮的Props\n   * @en Props of confirm button\n   */\n  okButtonProps?: ButtonProps;\n  /**\n   * @zh 取消按钮的Props\n   * @en Props of cancel button\n   */\n  cancelButtonProps?: ButtonProps;\n  /**\n   * @zh 确认按钮是否为加载中状态\n   * @en Whether the confirm button is in the loading state\n   */\n  okLoading?: boolean;\n  /**\n   * @zh 是否隐藏取消按钮\n   * @en Whether to hide the cancel button\n   */\n  hideCancel?: boolean;\n  /**\n   * @zh 是否显示遮罩层\n   * @en Whether to show the mask\n   * @defaultValue true\n   */\n  mask?: boolean;\n  /**\n   * @zh 是否开启简单模式\n   * @en Whether to enable simple mode\n   */\n  simple?: boolean;\n  /**\n   * @zh 是否点击遮罩层可以关闭对话框\n   * @en Whether to close the modal when click the mask\n   * @defaultValue true\n   */\n  maskClosable?: boolean;\n  /**\n   * @zh 蒙层的样式\n   * @en Mask style\n   */\n  maskStyle?: CSSProperties;\n  /**\n   * @zh 对话框是否居中显示\n   * @en Whether the dialog box is displayed in the center\n   * @defaultValue true\n   */\n  alignCenter?: boolean;\n  /**\n   * @zh 是否支持 ESC 键关闭对话框\n   * @en Whether to support the ESC key to close the dialog\n   * @defaultValue true\n   * @version 2.15.0\n   */\n  escToClose?: boolean;\n  /**\n   * @zh 是否支持拖动\n   * @en Whether to support drag\n   * @version 2.19.0\n   */\n  draggable?: boolean;\n  /**\n   * @zh 是否开启全屏\n   * @en Whether to enable full screen\n   * @version 2.19.0\n   */\n  fullscreen?: boolean;\n  /**\n   * @zh 点击确定按钮的回调函数\n   * @en Callback function for clicking the OK button\n   */\n  onOk?: (e?: Event) => void;\n  /**\n   * @zh 点击取消按钮的回调函数\n   * @en Callback function for clicking the Cancel button\n   */\n  onCancel?: (e?: Event) => void;\n  /**\n   * @zh 触发 ok 事件前的回调函数。如果返回 false 则不会触发后续事件，也可使用 done 进行异步关闭。\n   * @en The callback function before the ok event is triggered. If false is returned, subsequent events will not be triggered, and done can also be used to close asynchronously.\n   * @version 2.7.0\n   */\n  onBeforeOk?: (\n    done: (closed: boolean) => void\n  ) => void | boolean | Promise<void | boolean>;\n  /**\n   * @zh 触发 cancel 事件前的回调函数。如果返回 false 则不会触发后续事件。\n   * @en The callback function before the cancel event is triggered. If it returns false, no subsequent events will be triggered.\n   * @version 2.7.0\n   */\n  onBeforeCancel?: () => boolean;\n  /**\n   * @zh 对话框打开后（动画结束）触发\n   * @en Triggered after the modal is opened (the animation ends)\n   */\n  onOpen?: () => void;\n  /**\n   * @zh 对话框关闭后（动画结束）触发\n   * @en Triggered after the modal is closed (the animation ends)\n   */\n  onClose?: () => void;\n  /**\n   * @zh 对话框打开前触发\n   * @en Triggered before dialog is opened\n   * @version 2.16.0\n   */\n  onBeforeOpen?: () => void;\n  /**\n   * @zh 对话框关闭前触发\n   * @en Triggered before dialog is closed\n   * @version 2.16.0\n   */\n  onBeforeClose?: () => void;\n  /**\n   * @zh 对话框的宽度，不设置的情况下会使用样式中的宽度值\n   * @en The width of the dialog box, if not set, the width value in the style will be used\n   * @version 2.12.0\n   */\n  width?: number | string;\n  /**\n   * @zh 对话框的距离顶部的高度，居中显示开启的情况下不生效\n   * @en The height from the top of the dialog box. It does not take effect when the center display is turned on.\n   * @version 2.12.0\n   */\n  top?: number | string;\n  /**\n   * @zh 标题的水平对齐方向\n   * @en horizontal alignment of the title\n   * @defaultValue 'center'\n   * @version 2.17.0\n   */\n  titleAlign?: 'start' | 'center';\n  /**\n   * @zh 对话框是否挂载在 `body` 元素下\n   * @en Whether the modal is mounted under the `body` element\n   * @defaultValue true\n   */\n  renderToBody?: boolean;\n  /**\n   * @zh 弹出框的挂载容器\n   * @en Mount container for modal\n   * @defaultValue 'body'\n   */\n  popupContainer?: string | HTMLElement;\n  /**\n   * @zh 对话框的类名\n   * @en The classname of the modal\n   */\n  modalClass?: string | any[];\n  /**\n   * @zh 对话框的样式\n   * @en Modal style\n   */\n  modalStyle?: CSSProperties;\n  /**\n   * @zh 遮罩层动画名字\n   * @en Mask layer animation name\n   * @version 2.24.0\n   */\n  maskAnimationName?: string;\n  /**\n   * @zh 对话框动画名字\n   * @en Modal animation name\n   * @version 2.24.0\n   */\n  modalAnimationName?: string;\n  /**\n   * @zh 是否隐藏标题\n   * @en Whether to hide the title\n   * @defaultValue false\n   * @version 2.50.0\n   */\n  hideTitle?: boolean;\n  /**\n   * @zh 对话框内容部分的类名\n   * @en The classname of the modal\n   */\n  bodyClass?: string | any[];\n  /**\n   * @zh 对话框内容部分的样式\n   * @en Modal style\n   */\n  bodyStyle?: StyleValue;\n}\n\nexport type ModalUpdateConfig = Omit<\n  ModalConfig,\n  | 'title'\n  | 'content'\n  | 'footer'\n  | 'onOk'\n  | 'onCancel'\n  | 'onBeforeOk'\n  | 'onBeforeCancel'\n  | 'onOpen'\n  | 'onClose'\n  | 'onBeforeOpen'\n  | 'onBeforeClose'\n>;\n\nexport interface ModalReturn {\n  /**\n   * @zh 关闭对话框\n   * @en Close Modal\n   */\n  close: () => void;\n  /**\n   * @zh 更新对话框\n   * @en Update Modal\n   * @version 2.43.2\n   */\n  update: (config: ModalUpdateConfig) => void;\n}\n\nexport interface ModalMethod {\n  /**\n   * @zh 打开对话框\n   * @en Open modal\n   */\n  open: (config: ModalConfig, appContext?: AppContext) => ModalReturn;\n  /**\n   * @zh 打开对话框（简单模式）\n   * @en Open modal (simple mode)\n   */\n  confirm: (config: ModalConfig, appContext?: AppContext) => ModalReturn;\n  /**\n   * @zh 打开信息对话框\n   * @en Open info modal\n   */\n  info: (config: ModalConfig, appContext?: AppContext) => ModalReturn;\n  /**\n   * @zh 打开成功对话框\n   * @en Open success modal\n   */\n  success: (config: ModalConfig, appContext?: AppContext) => ModalReturn;\n  /**\n   * @zh 打开警告对话框\n   * @en Open warning modal\n   */\n  warning: (config: ModalConfig, appContext?: AppContext) => ModalReturn;\n  /**\n   * @zh 打开错误对话框\n   * @en Open error modal\n   */\n  error: (config: ModalConfig, appContext?: AppContext) => ModalReturn;\n}\n"
  },
  {
    "path": "packages/web-vue/components/modal/modal.vue",
    "content": "<template>\n  <client-only>\n    <teleport :to=\"teleportContainer\" :disabled=\"!renderToBody\">\n      <div\n        v-if=\"!unmountOnClose || computedVisible || mounted\"\n        v-show=\"computedVisible || mounted\"\n        :class=\"`${prefixCls}-container`\"\n        :style=\"{ zIndex }\"\n        v-bind=\"$attrs\"\n      >\n        <transition :name=\"maskAnimationName\" appear>\n          <div\n            v-if=\"mask\"\n            v-show=\"computedVisible\"\n            ref=\"maskRef\"\n            :class=\"`${prefixCls}-mask`\"\n            :style=\"maskStyle\"\n          />\n        </transition>\n        <div\n          ref=\"wrapperRef\"\n          :class=\"wrapperCls\"\n          @click.self=\"handleMaskClick\"\n          @mousedown.self=\"handleMaskMouseDown\"\n        >\n          <transition\n            :name=\"modalAnimationName\"\n            appear\n            @after-enter=\"handleOpen\"\n            @after-leave=\"handleClose\"\n          >\n            <div\n              v-show=\"computedVisible\"\n              ref=\"modalRef\"\n              :class=\"modalCls\"\n              :style=\"mergedModalStyle\"\n            >\n              <div\n                v-if=\"!hideTitle && ($slots.title || title || closable)\"\n                :class=\"`${prefixCls}-header`\"\n                @mousedown=\"handleMoveDown\"\n              >\n                <div\n                  v-if=\"$slots.title || title\"\n                  :class=\"[\n                    `${prefixCls}-title`,\n                    `${prefixCls}-title-align-${titleAlign}`,\n                  ]\"\n                >\n                  <div v-if=\"messageType\" :class=\"`${prefixCls}-title-icon`\">\n                    <icon-info-circle-fill v-if=\"messageType === 'info'\" />\n                    <icon-check-circle-fill v-if=\"messageType === 'success'\" />\n                    <icon-exclamation-circle-fill\n                      v-if=\"messageType === 'warning'\"\n                    />\n                    <icon-close-circle-fill v-if=\"messageType === 'error'\" />\n                  </div>\n                  <slot name=\"title\">{{ title }}</slot>\n                </div>\n                <div\n                  v-if=\"!simple && closable\"\n                  tabindex=\"-1\"\n                  role=\"button\"\n                  aria-label=\"Close\"\n                  :class=\"`${prefixCls}-close-btn`\"\n                  @click=\"handleCancel\"\n                >\n                  <icon-hover>\n                    <icon-close />\n                  </icon-hover>\n                </div>\n              </div>\n              <div :class=\"[`${prefixCls}-body`, bodyClass]\" :style=\"bodyStyle\">\n                <slot />\n              </div>\n              <div v-if=\"footer\" :class=\"`${prefixCls}-footer`\">\n                <slot name=\"footer\">\n                  <arco-button\n                    v-if=\"!hideCancel\"\n                    v-bind=\"cancelButtonProps\"\n                    @click=\"handleCancel\"\n                  >\n                    {{ cancelDisplayText }}\n                  </arco-button>\n                  <arco-button\n                    type=\"primary\"\n                    v-bind=\"okButtonProps\"\n                    :loading=\"mergedOkLoading\"\n                    @click=\"handleOk\"\n                  >\n                    {{ okDisplayText }}\n                  </arco-button>\n                </slot>\n              </div>\n            </div>\n          </transition>\n        </div>\n      </div>\n    </teleport>\n  </client-only>\n</template>\n\n<script lang=\"tsx\">\nimport type { CSSProperties, PropType, StyleValue } from 'vue';\nimport {\n  defineComponent,\n  computed,\n  ref,\n  watch,\n  onMounted,\n  onBeforeUnmount,\n  toRefs,\n} from 'vue';\nimport { getPrefixCls } from '../_utils/global-config';\nimport { MessageType } from '../_utils/constant';\nimport ClientOnly from '../_components/client-only';\nimport IconHover from '../_components/icon-hover.vue';\nimport ArcoButton, { ButtonProps } from '../button';\nimport IconClose from '../icon/icon-close';\nimport IconInfoCircleFill from '../icon/icon-info-circle-fill';\nimport IconCheckCircleFill from '../icon/icon-check-circle-fill';\nimport IconExclamationCircleFill from '../icon/icon-exclamation-circle-fill';\nimport IconCloseCircleFill from '../icon/icon-close-circle-fill';\nimport { useI18n } from '../locale';\nimport { useOverflow } from '../_hooks/use-overflow';\nimport { getElement, off, on, contains } from '../_utils/dom';\nimport usePopupManager from '../_hooks/use-popup-manager';\nimport { isBoolean, isFunction, isNumber, isPromise } from '../_utils/is';\nimport { KEYBOARD_KEY } from '../_utils/keyboard';\nimport { useDraggable } from './hooks/use-draggable';\nimport { useTeleportContainer } from '../_hooks/use-teleport-container';\n\nexport default defineComponent({\n  name: 'Modal',\n  components: {\n    ClientOnly,\n    ArcoButton,\n    IconHover,\n    IconClose,\n    IconInfoCircleFill,\n    IconCheckCircleFill,\n    IconExclamationCircleFill,\n    IconCloseCircleFill,\n  },\n  inheritAttrs: false,\n  props: {\n    /**\n     * @zh 对话框是否可见\n     * @en Whether the modal is visible\n     * @vModel\n     */\n    visible: {\n      type: Boolean,\n      default: undefined,\n    },\n    /**\n     * @zh 对话框默认是否可见（非受控状态）\n     * @en Whether the modal is visible by default (uncontrolled state)\n     */\n    defaultVisible: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 对话框的宽度，不设置的情况下会使用样式中的宽度值\n     * @en The width of the dialog box, if not set, the width value in the style will be used\n     * @version 2.12.0\n     */\n    width: {\n      type: [Number, String],\n    },\n    /**\n     * @zh 对话框的距离顶部的高度，居中显示开启的情况下不生效\n     * @en The height from the top of the dialog box. It does not take effect when the center display is turned on.\n     * @version 2.12.0\n     */\n    top: {\n      type: [Number, String],\n    },\n    /**\n     * @zh 是否显示遮罩层\n     * @en Whether to show the mask\n     */\n    mask: {\n      type: Boolean,\n      default: true,\n    },\n    /**\n     * @zh 标题\n     * @en Title\n     */\n    title: {\n      type: String,\n    },\n    /**\n     * @zh 标题的水平对齐方向\n     * @en horizontal alignment of the title\n     * @version 2.17.0\n     */\n    titleAlign: {\n      type: String as PropType<'start' | 'center'>,\n      default: 'center',\n    },\n    /**\n     * @zh 对话框是否居中显示\n     * @en Whether the dialog box is displayed in the center\n     */\n    alignCenter: {\n      type: Boolean,\n      default: true,\n    },\n    /**\n     * @zh 关闭时是否卸载节点\n     * @en Whether to uninstall the node when close\n     */\n    unmountOnClose: Boolean,\n    /**\n     * @zh 是否点击遮罩层可以关闭对话框\n     * @en Whether to close the modal when click the mask\n     */\n    maskClosable: {\n      type: Boolean,\n      default: true,\n    },\n    /**\n     * @zh 是否隐藏取消按钮\n     * @en Whether to hide the cancel button\n     */\n    hideCancel: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 是否开启简单模式\n     * @en Whether to enable simple mode\n     */\n    simple: {\n      type: Boolean,\n      default: (props: any) => {\n        return props.notice;\n      },\n    },\n    /**\n     * @zh 是否显示关闭按钮\n     * @en Whether to show the close button\n     */\n    closable: {\n      type: Boolean,\n      default: true,\n    },\n    /**\n     * @zh 确认按钮的内容\n     * @en The content of the confirm button\n     */\n    okText: String,\n    /**\n     * @zh 取消按钮的内容\n     * @en The content of the cancel button\n     */\n    cancelText: String,\n    /**\n     * @zh 确认按钮是否为加载中状态\n     * @en Whether the confirm button is in the loading state\n     */\n    okLoading: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 确认按钮的Props\n     * @en Props of confirm button\n     */\n    okButtonProps: {\n      type: Object as PropType<ButtonProps>,\n    },\n    /**\n     * @zh 取消按钮的Props\n     * @en Props of cancel button\n     */\n    cancelButtonProps: {\n      type: Object as PropType<ButtonProps>,\n    },\n    /**\n     * @zh 是否展示页脚部分\n     * @en Whether to show the footer\n     */\n    footer: {\n      type: Boolean,\n      default: true,\n    },\n    /**\n     * @zh 对话框是否挂载在 `body` 元素下\n     * @en Whether the modal is mounted under the `body` element\n     */\n    renderToBody: {\n      type: Boolean,\n      default: true,\n    },\n    /**\n     * @zh 弹出框的挂载容器\n     * @en Mount container for modal\n     */\n    popupContainer: {\n      type: [String, Object] as PropType<string | HTMLElement>,\n      default: 'body',\n    },\n    /**\n     * @zh 蒙层的样式\n     * @en Mask style\n     */\n    maskStyle: {\n      type: Object as PropType<CSSProperties>,\n    },\n    /**\n     * @zh 对话框的类名\n     * @en The classname of the modal\n     */\n    modalClass: {\n      type: [String, Array] as PropType<string | any[]>,\n    },\n    /**\n     * @zh 对话框的样式\n     * @en Modal style\n     */\n    modalStyle: {\n      type: Object as PropType<CSSProperties>,\n    },\n    /**\n     * @zh 触发 ok 事件前的回调函数。如果返回 false 则不会触发后续事件，也可使用 done 进行异步关闭。\n     * @en The callback function before the ok event is triggered. If false is returned, subsequent events will not be triggered, and done can also be used to close asynchronously.\n     * @version 2.7.0\n     */\n    onBeforeOk: {\n      type: Function as PropType<\n        (\n          done: (closed: boolean) => void\n        ) => void | boolean | Promise<void | boolean>\n      >,\n    },\n    /**\n     * @zh 触发 cancel 事件前的回调函数。如果返回 false 则不会触发后续事件。\n     * @en The callback function before the cancel event is triggered. If it returns false, no subsequent events will be triggered.\n     * @version 2.7.0\n     */\n    onBeforeCancel: {\n      type: Function as PropType<() => boolean>,\n    },\n    /**\n     * @zh 是否支持 ESC 键关闭对话框\n     * @en Whether to support the ESC key to close the dialog\n     * @version 2.15.0\n     */\n    escToClose: {\n      type: Boolean,\n      default: true,\n    },\n    /**\n     * @zh 是否支持拖动\n     * @en Whether to support drag\n     * @version 2.19.0\n     */\n    draggable: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 是否开启全屏\n     * @en Whether to enable full screen\n     * @version 2.19.0\n     */\n    fullscreen: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 遮罩层动画名字\n     * @en Mask layer animation name\n     * @defaultValue -\n     * @version 2.24.0\n     */\n    maskAnimationName: {\n      type: String,\n      default: (props: Record<string, any>) => {\n        if (props.fullscreen) {\n          return 'fade-in-standard';\n        }\n        return 'fade-modal';\n      },\n    },\n    /**\n     * @zh 对话框动画名字\n     * @en Modal animation name\n     * @defaultValue -\n     * @version 2.24.0\n     */\n    modalAnimationName: {\n      type: String,\n      default: (props: Record<string, any>) => {\n        if (props.fullscreen) {\n          return 'zoom-in';\n        }\n        return 'zoom-modal';\n      },\n    },\n    /**\n     * @zh 对话框内容部分的类名\n     * @en The classname of the modal\n     * @version 2.31.0\n     */\n    bodyClass: {\n      type: [String, Array] as PropType<string | any[]>,\n    },\n    /**\n     * @zh 对话框内容部分的样式\n     * @en Modal style\n     * @version 2.31.0\n     */\n    bodyStyle: {\n      type: [String, Object, Array] as PropType<StyleValue>,\n    },\n    // private\n    messageType: {\n      type: String as PropType<MessageType>,\n    },\n    /**\n     * @zh 是否隐藏标题\n     * @en Whether to hide the title\n     * @defaultValue false\n     * @version 2.50.0\n     */\n    hideTitle: {\n      type: Boolean,\n      default: false,\n    },\n  },\n  emits: {\n    'update:visible': (visible: boolean) => true,\n    /**\n     * @zh 点击确定按钮时触发\n     * @en Triggered when the OK button is clicked\n     * @property {MouseEvent} ev\n     */\n    'ok': (e: Event) => true,\n    /**\n     * @zh 点击取消、关闭按钮时触发\n     * @en Triggered when the cancel/close button is clicked\n     * @property {MouseEvent | KeyboardEvent} ev\n     */\n    'cancel': (e: Event) => true,\n    /**\n     * @zh 对话框打开后（动画结束）触发\n     * @en Triggered after the modal is opened (the animation ends)\n     */\n    'open': () => true,\n    /**\n     * @zh 对话框关闭后（动画结束）触发\n     * @en Triggered after the modal is closed (the animation ends)\n     */\n    'close': () => true,\n    /**\n     * @zh 对话框打开前触发\n     * @en Triggered before dialog is opened\n     * @version 2.16.0\n     */\n    'beforeOpen': () => true,\n    /**\n     * @zh 对话框关闭前触发\n     * @en Triggered before dialog is closed\n     * @version 2.16.0\n     */\n    'beforeClose': () => true,\n  },\n  /**\n   * @zh 标题\n   * @en Title\n   * @slot title\n   */\n  /**\n   * @zh 页脚\n   * @en Footer\n   * @slot footer\n   */\n  setup(props, { emit }) {\n    const { fullscreen, popupContainer, alignCenter } = toRefs(props);\n    const prefixCls = getPrefixCls('modal');\n    const { t } = useI18n();\n    const wrapperRef = ref<HTMLElement>();\n    const modalRef = ref<HTMLElement>();\n\n    const _visible = ref(props.defaultVisible);\n    const computedVisible = computed(() => props.visible ?? _visible.value);\n    const _okLoading = ref(false);\n    const mergedOkLoading = computed(() => props.okLoading || _okLoading.value);\n    const mergedDraggable = computed(\n      () => props.draggable && !props.fullscreen\n    );\n\n    const { teleportContainer, containerRef } = useTeleportContainer({\n      popupContainer,\n      visible: computedVisible,\n    });\n\n    const mounted = ref(computedVisible.value);\n\n    const okDisplayText = computed(() => props.okText || t('modal.okText'));\n    const cancelDisplayText = computed(\n      () => props.cancelText || t('modal.cancelText')\n    );\n\n    const { zIndex, isLastDialog } = usePopupManager('dialog', {\n      visible: computedVisible,\n    });\n\n    let globalKeyDownListener = false;\n\n    const handleGlobalKeyDown = (ev: KeyboardEvent) => {\n      if (props.escToClose && ev.key === KEYBOARD_KEY.ESC && isLastDialog()) {\n        handleCancel(ev);\n      }\n    };\n\n    const addGlobalKeyDownListener = () => {\n      if (props.escToClose && !globalKeyDownListener) {\n        globalKeyDownListener = true;\n        on(document.documentElement, 'keydown', handleGlobalKeyDown);\n      }\n    };\n\n    const removeGlobalKeyDownListener = () => {\n      globalKeyDownListener = false;\n      off(document.documentElement, 'keydown', handleGlobalKeyDown);\n    };\n\n    // Used to ignore closed Promises\n    let promiseNumber = 0;\n\n    const { position, handleMoveDown } = useDraggable({\n      wrapperRef,\n      modalRef,\n      draggable: mergedDraggable,\n      alignCenter,\n    });\n\n    const close = () => {\n      promiseNumber++;\n      if (_okLoading.value) {\n        _okLoading.value = false;\n      }\n      _visible.value = false;\n      emit('update:visible', false);\n    };\n\n    const handleOk = async (e: Event) => {\n      const currentPromiseNumber = promiseNumber;\n      const closed = await new Promise<boolean>(\n        // eslint-disable-next-line no-async-promise-executor\n        async (resolve) => {\n          if (isFunction(props.onBeforeOk)) {\n            let result = props.onBeforeOk((closed = true) => resolve(closed));\n            if (isPromise(result) || !isBoolean(result)) {\n              _okLoading.value = true;\n            }\n            if (isPromise(result)) {\n              try {\n                // if onBeforeOk is Promise<void> ,set Defaults true\n                result = (await result) ?? true;\n              } catch (error) {\n                result = false;\n                throw error;\n              }\n            }\n            if (isBoolean(result)) {\n              resolve(result);\n            }\n          } else {\n            resolve(true);\n          }\n        }\n      );\n\n      if (currentPromiseNumber === promiseNumber) {\n        if (closed) {\n          emit('ok', e);\n          close();\n        } else if (_okLoading.value) {\n          _okLoading.value = false;\n        }\n      }\n    };\n\n    const handleCancel = (e: Event) => {\n      let result = true;\n      if (isFunction(props.onBeforeCancel)) {\n        result = props.onBeforeCancel() ?? false;\n      }\n      if (result) {\n        emit('cancel', e);\n        close();\n      }\n    };\n\n    const currentIsMask = ref(false);\n\n    const handleMaskMouseDown = (ev: Event) => {\n      if (ev.target === wrapperRef.value) {\n        currentIsMask.value = true;\n      }\n    };\n\n    const handleMaskClick = (e: Event) => {\n      if (props.mask && props.maskClosable && currentIsMask.value) {\n        handleCancel(e);\n      }\n    };\n\n    const handleOpen = () => {\n      if (computedVisible.value) {\n        if (\n          !contains(wrapperRef.value, document.activeElement) &&\n          document.activeElement instanceof HTMLElement\n        ) {\n          document.activeElement.blur();\n        }\n        emit('open');\n      }\n    };\n\n    const handleClose = () => {\n      if (!computedVisible.value) {\n        if (mergedDraggable.value) {\n          position.value = undefined;\n        }\n\n        mounted.value = false;\n        resetOverflow();\n        emit('close');\n      }\n    };\n\n    const { setOverflowHidden, resetOverflow } = useOverflow(containerRef);\n\n    onMounted(() => {\n      containerRef.value = getElement(props.popupContainer);\n      if (computedVisible.value) {\n        setOverflowHidden();\n        if (props.escToClose) {\n          addGlobalKeyDownListener();\n        }\n      }\n    });\n\n    onBeforeUnmount(() => {\n      resetOverflow();\n      removeGlobalKeyDownListener();\n    });\n\n    watch(computedVisible, (value: boolean) => {\n      if (_visible.value !== value) {\n        _visible.value = value;\n      }\n      if (value) {\n        emit('beforeOpen');\n        mounted.value = true;\n        currentIsMask.value = false;\n        setOverflowHidden();\n        addGlobalKeyDownListener();\n      } else {\n        emit('beforeClose');\n        removeGlobalKeyDownListener();\n      }\n    });\n\n    watch(fullscreen, () => {\n      if (position.value) {\n        position.value = undefined;\n      }\n    });\n\n    const wrapperCls = computed(() => [\n      `${prefixCls}-wrapper`,\n      {\n        [`${prefixCls}-wrapper-align-center`]:\n          props.alignCenter && !props.fullscreen,\n        [`${prefixCls}-wrapper-moved`]: Boolean(position.value),\n      },\n    ]);\n\n    const modalCls = computed(() => [\n      `${prefixCls}`,\n      props.modalClass,\n      {\n        [`${prefixCls}-simple`]: props.simple,\n        [`${prefixCls}-draggable`]: mergedDraggable.value,\n        [`${prefixCls}-fullscreen`]: props.fullscreen,\n      },\n    ]);\n\n    const mergedModalStyle = computed(() => {\n      const style: CSSProperties = {\n        ...(props.modalStyle ?? {}),\n      };\n      // 修复设置width属性后，全屏无法生效的问题\n      if (props.width && !props.fullscreen) {\n        style.width = isNumber(props.width) ? `${props.width}px` : props.width;\n      }\n      if (!props.alignCenter && props.top) {\n        style.top = isNumber(props.top) ? `${props.top}px` : props.top;\n      }\n      if (position.value) {\n        style.transform = `translate(${position.value[0]}px, ${position.value[1]}px)`;\n      }\n\n      return style;\n    });\n\n    return {\n      prefixCls,\n      mounted,\n      computedVisible,\n      containerRef,\n      wrapperRef,\n      mergedModalStyle,\n      okDisplayText,\n      cancelDisplayText,\n      zIndex,\n      handleOk,\n      handleCancel,\n      handleMaskClick,\n      handleMaskMouseDown,\n      handleOpen,\n      handleClose,\n      mergedOkLoading,\n      modalRef,\n      wrapperCls,\n      modalCls,\n      teleportContainer,\n      handleMoveDown,\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/modal/style/index.less",
    "content": "@import './token.less';\n\n@modal-prefix-cls: ~'@{prefix}-modal';\n\n.@{modal-prefix-cls}-container {\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n}\n\n.@{modal-prefix-cls}-mask {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  background-color: var(~'@{arco-cssvars-prefix}-color-mask-bg');\n}\n\n.@{modal-prefix-cls}-wrapper {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  overflow: auto;\n  text-align: center;\n\n  &&-align-center {\n    white-space: nowrap;\n\n    &::after {\n      display: inline-block;\n      width: 0;\n      height: 100%;\n      vertical-align: middle;\n      content: '';\n    }\n\n    .@{modal-prefix-cls} {\n      top: 0;\n      vertical-align: middle;\n    }\n  }\n\n  &&-moved {\n    text-align: left;\n\n    .@{modal-prefix-cls} {\n      top: 0;\n      vertical-align: top;\n    }\n  }\n}\n\n.@{modal-prefix-cls} {\n  position: relative;\n  top: @modal-margin-top;\n  display: inline-block;\n  width: @modal-default-size-width;\n  margin: 0 auto;\n  line-height: @line-height-base;\n  white-space: initial;\n  text-align: left;\n  background-color: var(~'@{arco-cssvars-prefix}-color-bg-3');\n  border-radius: @modal-border-radius;\n\n  &-draggable {\n    .@{modal-prefix-cls}-header {\n      cursor: move;\n    }\n  }\n\n  &-header {\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    box-sizing: border-box;\n    width: 100%;\n    height: @modal-default-size-header-height;\n    padding: 0 @modal-default-padding-horizontal;\n    border-bottom: @border-1 solid @modal-color-border;\n\n    .@{modal-prefix-cls}-title {\n      display: flex;\n      flex: 1;\n      align-items: center;\n      justify-content: if(\n        (@modal-default-align-header = left),\n        flex-start,\n        (if((@modal-default-align-header = right), flex-end, center))\n      );\n\n      &-align-start {\n        justify-content: flex-start;\n      }\n\n      &-align-center {\n        justify-content: center;\n      }\n    }\n  }\n\n  &-body {\n    position: relative;\n    padding: @modal-default-padding-content-vertical\n      @modal-default-padding-horizontal;\n    overflow: auto;\n    color: @modal-color-content-text;\n    font-size: @modal-font-content-size;\n  }\n\n  &-footer {\n    flex-shrink: 0;\n    box-sizing: border-box;\n    width: 100%;\n    padding: @modal-default-padding-footer-vertical\n      @modal-default-padding-horizontal;\n    text-align: right;\n    border-top: @border-1 solid @modal-color-border;\n\n    > .@{prefix}-btn:not(:nth-child(1)) {\n      margin-left: @modal-margin-footer-button-left;\n    }\n  }\n\n  &-close-btn {\n    margin-left: -@modal-font-size-close-icon;\n    color: @modal-color-header-text;\n    font-size: @modal-font-size-close-icon;\n    cursor: pointer;\n  }\n\n  &-title {\n    color: @modal-color-header-text;\n    font-weight: @font-weight-500;\n    font-size: @modal-font-header-size;\n\n    &-icon {\n      margin-right: @modal-margin-tip-icon-right;\n      font-size: @modal-size-tip-icon;\n      vertical-align: -0.15em;\n\n      .@{prefix}-icon-info-circle-fill {\n        color: @color-primary-6;\n      }\n\n      .@{prefix}-icon-check-circle-fill {\n        color: @color-success-6;\n      }\n\n      .@{prefix}-icon-exclamation-circle-fill {\n        color: @color-warning-6;\n      }\n\n      .@{prefix}-icon-close-circle-fill {\n        color: @color-danger-6;\n      }\n    }\n  }\n}\n\n// 简洁模式\n.@{modal-prefix-cls}-simple {\n  width: @modal-simple-size-width;\n  padding: @modal-simple-padding-top @modal-simple-padding-horizontal\n    @modal-simple-padding-bottom;\n\n  .@{modal-prefix-cls}-header,\n  .@{modal-prefix-cls}-footer {\n    height: unset;\n    padding: 0;\n    border: none;\n  }\n\n  .@{modal-prefix-cls}-header {\n    margin-bottom: @modal-simple-margin-content-top;\n  }\n\n  .@{modal-prefix-cls}-title {\n    justify-content: if(\n      (@modal-default-align-header = left),\n      flex-start,\n      (if((@modal-default-align-header = right), flex-end, center))\n    );\n\n    &-align-start {\n      justify-content: flex-start;\n    }\n\n    &-align-center {\n      justify-content: center;\n    }\n  }\n\n  .@{modal-prefix-cls}-footer {\n    margin-top: @modal-simple-margin-footer-top;\n    text-align: center;\n  }\n\n  .@{modal-prefix-cls}-body {\n    padding: 0;\n  }\n}\n\n.@{modal-prefix-cls}-fullscreen {\n  top: 0;\n  display: inline-flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  width: 100%;\n  height: 100%;\n\n  .@{modal-prefix-cls}-footer {\n    margin-top: auto;\n  }\n}\n\n.zoom-modal-enter-from,\n.zoom-modal-appear-from {\n  transform: scale(0.5, 0.5);\n  opacity: 0;\n}\n\n.zoom-modal-enter-to,\n.zoom-modal-appear-to {\n  transform: scale(1, 1);\n  opacity: 1;\n}\n\n.zoom-modal-enter-active,\n.zoom-modal-appear-active {\n  transition: opacity @transition-duration-4\n      @transition-timing-function-overshoot,\n    transform @transition-duration-4 @transition-timing-function-overshoot;\n}\n\n.zoom-modal-leave-from {\n  transform: scale(1, 1);\n  opacity: 1;\n}\n\n.zoom-modal-leave-to {\n  transform: scale(0.5, 0.5);\n  opacity: 0;\n}\n\n.zoom-modal-leave-active {\n  transition: opacity @transition-duration-4\n      @transition-timing-function-overshoot,\n    transform @transition-duration-4 @transition-timing-function-overshoot;\n}\n\n.fade-modal-enter-from,\n.fade-modal-appear-from {\n  opacity: 0;\n}\n\n.fade-modal-enter-to,\n.fade-modal-appear-to {\n  opacity: 1;\n}\n\n.fade-modal-enter-active,\n.fade-modal-appear-active {\n  transition: opacity @transition-duration-4\n    @transition-timing-function-overshoot;\n}\n\n.fade-modal-leave-from {\n  opacity: 1;\n}\n\n.fade-modal-leave-to {\n  opacity: 0;\n}\n\n.fade-modal-leave-active {\n  transition: opacity @transition-duration-4\n    @transition-timing-function-overshoot;\n}\n"
  },
  {
    "path": "packages/web-vue/components/modal/style/index.ts",
    "content": "import '../../style/index.less';\nimport '../../button/style';\nimport './index.less';\n"
  },
  {
    "path": "packages/web-vue/components/modal/style/token.less",
    "content": "@import '../../style/theme/index.less';\n\n@modal-border-radius: @radius-medium;\n@modal-size-tip-icon: 18px;\n@modal-margin-top: 100px;\n@modal-margin-tip-icon-right: @spacing-5;\n@modal-margin-footer-button-left: @spacing-6;\n@modal-color-border: var(~'@{arco-cssvars-prefix}-color-neutral-3');\n@modal-color-header-text: var(~'@{arco-cssvars-prefix}-color-text-1');\n@modal-color-content-text: var(~'@{arco-cssvars-prefix}-color-text-1');\n@modal-font-header-size: @font-size-title-1;\n\n@modal-default-padding-horizontal: @spacing-8;\n@modal-default-size-header-height: @size-12;\n@modal-default-padding-content-vertical: @spacing-9;\n@modal-default-padding-footer-vertical: @spacing-7;\n@modal-default-size-width: 520px;\n@modal-font-content-size: @font-size-body-3;\n@modal-default-align-header: center;\n@modal-simple-align-header: center;\n\n@modal-simple-size-width: 400px;\n@modal-simple-padding-horizontal: @spacing-10;\n@modal-simple-padding-top: @spacing-9;\n@modal-simple-padding-bottom: @spacing-10;\n@modal-simple-margin-footer-top: @spacing-10;\n@modal-simple-margin-content-top: @spacing-9;\n\n@modal-position-close-icon-right: 16px;\n@modal-font-size-close-icon: 12px;\n"
  },
  {
    "path": "packages/web-vue/components/notification/CHANGELOG.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.43.0\n\n`2023-02-10`\n\n### 🐛 BugFix\n\n- Fix the problem that the update duration fails ([#2106](https://github.com/arco-design/arco-design-vue/pull/2106))\n\n\n## 2.38.0-beta.1\n\n`2022-10-14`\n\n### 🆕 Feature\n\n- notification and  notification listspace style adjustment ([#1676](https://github.com/arco-design/arco-design-vue/pull/1676))\n- `showIcon` not working ([#1676](https://github.com/arco-design/arco-design-vue/pull/1676))\n- support custom close icon & close element ([#1676](https://github.com/arco-design/arco-design-vue/pull/1676))\n- support custom style ([#1676](https://github.com/arco-design/arco-design-vue/pull/1676))\n- temove the notification corresponding to `id` ([#1676](https://github.com/arco-design/arco-design-vue/pull/1676))\n- demo ([#1676](https://github.com/arco-design/arco-design-vue/pull/1676))\n\n\n## 2.25.0\n\n`2022-04-22`\n\n### 🆕 Feature\n\n- Add footer prop ([#1029](https://github.com/arco-design/arco-design-vue/pull/1029))\n\n\n## 2.3.0\n\n`2021-11-12`\n\n### 🆕 Feature\n\n- Added `onClose` callback method ([#149](https://github.com/arco-design/arco-design-vue/pull/149))\n\n"
  },
  {
    "path": "packages/web-vue/components/notification/CHANGELOG.zh-CN.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.43.0\n\n`2023-02-10`\n\n### 🐛 问题修复\n\n- 修复更新 duration 失效的问题 ([#2106](https://github.com/arco-design/arco-design-vue/pull/2106))\n\n\n## 2.38.0-beta.1\n\n`2022-10-14`\n\n### 🆕 新增功能\n\n- 提示框和提示框列表间隔样式调整 ([#1676](https://github.com/arco-design/arco-design-vue/pull/1676))\n- `showIcon` 属性无效 ([#1676](https://github.com/arco-design/arco-design-vue/pull/1676))\n- 支持自定义关闭按钮和元素 ([#1676](https://github.com/arco-design/arco-design-vue/pull/1676))\n- 支持自定义样式 ([#1676](https://github.com/arco-design/arco-design-vue/pull/1676))\n- 删除对应 `id` 的提示框 ([#1676](https://github.com/arco-design/arco-design-vue/pull/1676))\n- 使用案例 ([#1676](https://github.com/arco-design/arco-design-vue/pull/1676))\n\n\n## 2.25.0\n\n`2022-04-22`\n\n### 🆕 新增功能\n\n- 增加 footer 属性 ([#1029](https://github.com/arco-design/arco-design-vue/pull/1029))\n\n\n## 2.3.0\n\n`2021-11-12`\n\n### 🆕 新增功能\n\n- 增加 `onClose` 回调方法 ([#149](https://github.com/arco-design/arco-design-vue/pull/149))\n\n"
  },
  {
    "path": "packages/web-vue/components/notification/README.en-US.md",
    "content": "```yaml\nmeta:\n  type: Component\n  category: Feedback\ntitle: Notification\ndescription: Globally display notification reminders to convey information to users in a timely and effective manner.\n```\n\n*Auto translate by google.*\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/type.md\n\n@import ./__demo__/position.md\n\n@import ./__demo__/update_notification.md\n\n@import ./__demo__/update_duration.md\n\n@import ./__demo__/btn.md\n\n@import ./__demo__/custom-close.md\n\n@import ./__demo__/style.md\n\n## API\n\n\n\n\n\n### `Notification` Global methods\n\nThe global methods provided by `Notification` can be used in the following three ways:\n1. Called by `this.$notification`\n2. In the Composition API, call `getCurrentInstance().appContext.config.globalProperties.$notification`\n3. Import `Notification`, call through `Notification` itself\n\nWhen used by import, the component has no way to obtain the current Vue Context. Content injected into the AppContext such as i18n or route cannot be used internally. You need to manually pass in the AppContext when calling, or specify the AppContext globally for the component.\n\n```ts\nimport { createApp } from 'vue'\nimport { Notification } from '@arco-design/web-vue';\n\nconst app = createApp(App);\nNotification._context = app._context;\n````\n\n\n### NotificationMethod\n\n|Name|Description|Type|Default|\n|---|---|---|:---:|\n|info|Show info notification|`(    config: string \\| NotificationConfig,    appContext?: AppContext  ) => NotificationReturn`|`-`|\n|success|Show success notification|`(    config: string \\| NotificationConfig,    appContext?: AppContext  ) => NotificationReturn`|`-`|\n|warning|Show warning notification|`(    config: string \\| NotificationConfig,    appContext?: AppContext  ) => NotificationReturn`|`-`|\n|error|Show error notification|`(    config: string \\| NotificationConfig,    appContext?: AppContext  ) => NotificationReturn`|`-`|\n|remove|remove the notification for the corresponding `id`|`(id: string) => void`|`-`|\n|clear|Clear all notifications|`(position?: NotificationPosition) => void`|`-`|\n\n\n\n### NotificationConfig\n\n|Name|Description|Type|Default|version|\n|---|---|---|:---:|:---|\n|content|Content|`RenderContent`|`-`||\n|title|Title|`RenderContent`|`-`||\n|icon|Icon|`RenderFunction`|`-`||\n|id|Unique id|`string`|`-`||\n|style|Style|`CSSProperties`|`-`||\n|class|Style class name|`ClassName`|`-`||\n|position|Position|`'topLeft'\\|'topRight'\\|'bottomLeft'\\|'bottomRight'`|`-`||\n|showIcon|Whether to show icon|`boolean`|`true`||\n|closable|Whether it can be closed|`boolean`|`false`||\n|duration|Display duration, the unit is `ms`|`number`|`3000`||\n|footer|Footer Content|`RenderFunction`|`-`|2.25.0|\n|closeIcon|Close button icon|`RenderFunction`|`-`||\n|closeIconElement|Close button element|`RenderFunction`|`-`||\n|onClose|Callback function when closing|`(id: number \\| string) => void`|`-`||\n\n\n\n### NotificationReturn\n\n|Name|Description|Type|Default|\n|---|---|---|:---:|\n|close|Close the current notification|`() => void`|`-`|\n\n\n"
  },
  {
    "path": "packages/web-vue/components/notification/README.zh-CN.md",
    "content": "```yaml\nmeta:\n  type: 组件\n  category: 反馈\ntitle: 通知提醒框 Notification\ndescription: 全局展示通知提醒，将信息及时有效的传达给用户。\n```\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/type.md\n\n@import ./__demo__/position.md\n\n@import ./__demo__/update_notification.md\n\n@import ./__demo__/update_duration.md\n\n@import ./__demo__/btn.md\n\n@import ./__demo__/custom-close.md\n\n@import ./__demo__/style.md\n\n## API\n\n\n\n\n\n### `Notification` 全局方法\n\n`Notification` 提供的全局方法，可以通过以下三种方法使用：\n1. 通过 `this.$notification` 调用\n2. 在 Composition API 中，通过 `getCurrentInstance().appContext.config.globalProperties.$notification` 调用\n3. 导入 `Notification`，通过 `Notification` 本身调用\n\n当通过 `import` 方式使用时，组件没有办法获取当前的 Vue Context，如 i18n 或 route 等注入在 AppContext 上的内容无法在内部使用，需要在调用时手动传入 AppContext，或者为组件全局指定 AppContext\n\n```ts\nimport { createApp } from 'vue'\nimport { Notification } from '@arco-design/web-vue';\n\nconst app = createApp(App);\nNotification._context = app._context;\n```\n\n\n### NotificationMethod\n\n|参数名|描述|类型|默认值|\n|---|---|---|:---:|\n|info|显示信息提醒框|`(    config: string \\| NotificationConfig,    appContext?: AppContext  ) => NotificationReturn`|`-`|\n|success|显示成功提醒框|`(    config: string \\| NotificationConfig,    appContext?: AppContext  ) => NotificationReturn`|`-`|\n|warning|显示警告提醒框|`(    config: string \\| NotificationConfig,    appContext?: AppContext  ) => NotificationReturn`|`-`|\n|error|显示错误提醒框|`(    config: string \\| NotificationConfig,    appContext?: AppContext  ) => NotificationReturn`|`-`|\n|remove|清除对应 `id` 的提醒框|`(id: string) => void`|`-`|\n|clear|清除全部提醒框|`(position?: NotificationPosition) => void`|`-`|\n\n\n\n### NotificationConfig\n\n|参数名|描述|类型|默认值|版本|\n|---|---|---|:---:|:---|\n|content|内容|`RenderContent`|`-`||\n|title|标题|`RenderContent`|`-`||\n|icon|图标|`RenderFunction`|`-`||\n|id|唯一id|`string`|`-`||\n|style|样式|`CSSProperties`|`-`||\n|class|样式类名|`ClassName`|`-`||\n|position|位置|`'topLeft'\\|'topRight'\\|'bottomLeft'\\|'bottomRight'`|`-`||\n|showIcon|是否显示图标|`boolean`|`true`||\n|closable|是否可关闭|`boolean`|`false`||\n|duration|显示的持续时间，单位为 `ms`|`number`|`3000`||\n|footer|底部内容|`RenderFunction`|`-`|2.25.0|\n|closeIcon|关闭按钮图标|`RenderFunction`|`-`||\n|closeIconElement|关闭按钮元素|`RenderFunction`|`-`||\n|onClose|关闭时的回调函数|`(id: number \\| string) => void`|`-`||\n\n\n\n### NotificationReturn\n\n|参数名|描述|类型|默认值|\n|---|---|---|:---:|\n|close|关闭当前通知提醒框|`() => void`|`-`|\n\n\n"
  },
  {
    "path": "packages/web-vue/components/notification/TEMPLATE.md",
    "content": "## zh-CN\n```yaml\nmeta:\n  type: 组件\n  category: 反馈\ntitle: 通知提醒框 Notification\ndescription: 全局展示通知提醒，将信息及时有效的传达给用户。\n```\n---\n## en-US\n```yaml\nmeta:\n  type: Component\n  category: Feedback\ntitle: Notification\ndescription: Globally display notification reminders to convey information to users in a timely and effective manner.\n```\n---\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/type.md\n\n@import ./__demo__/position.md\n\n@import ./__demo__/update_notification.md\n\n@import ./__demo__/update_duration.md\n\n@import ./__demo__/btn.md\n\n@import ./__demo__/custom-close.md\n\n@import ./__demo__/style.md\n\n## API\n\n%%API(notification.vue)%%\n\n## zh-CN\n### `Notification` 全局方法\n\n`Notification` 提供的全局方法，可以通过以下三种方法使用：\n1. 通过 `this.$notification` 调用\n2. 在 Composition API 中，通过 `getCurrentInstance().appContext.config.globalProperties.$notification` 调用\n3. 导入 `Notification`，通过 `Notification` 本身调用\n\n当通过 `import` 方式使用时，组件没有办法获取当前的 Vue Context，如 i18n 或 route 等注入在 AppContext 上的内容无法在内部使用，需要在调用时手动传入 AppContext，或者为组件全局指定 AppContext\n\n```ts\nimport { createApp } from 'vue'\nimport { Notification } from '@arco-design/web-vue';\n\nconst app = createApp(App);\nNotification._context = app._context;\n```\n\n---\n## en-US\n### `Notification` Global methods\n\nThe global methods provided by `Notification` can be used in the following three ways:\n1. Called by `this.$notification`\n2. In the Composition API, call `getCurrentInstance().appContext.config.globalProperties.$notification`\n3. Import `Notification`, call through `Notification` itself\n\nWhen used by import, the component has no way to obtain the current Vue Context. Content injected into the AppContext such as i18n or route cannot be used internally. You need to manually pass in the AppContext when calling, or specify the AppContext globally for the component.\n\n```ts\nimport { createApp } from 'vue'\nimport { Notification } from '@arco-design/web-vue';\n\nconst app = createApp(App);\nNotification._context = app._context;\n````\n\n---\n\n%%INTERFACE(interface.ts)%%\n"
  },
  {
    "path": "packages/web-vue/components/notification/__demo__/basic.md",
    "content": "```yaml\ntitle:\n  zh-CN: 基本用法\n  en-US: Basic Usage\n```\n\n## zh-CN\n\n通知提醒框的基本用法。\n\n---\n\n## en-US\n\nBasic usage of notification.\n\n---\n\n```vue\n<template>\n  <a-space>\n    <a-button type=\"primary\" @click=\"() => this.$notification.info({\n      title:'Notification',\n      content:'This is a notification!'\n    })\"\n    >\n      Open Notification\n    </a-button>\n    <a-button @click=\"handleNotification\">\n      Open Notification\n    </a-button>\n  </a-space>\n</template>\n\n<script>\nimport { Notification } from '@arco-design/web-vue';\n\nexport default {\n  setup() {\n    const handleNotification = () => {\n      Notification.info({\n        title: 'Notification',\n        content: 'This is a notification!',\n      })\n    }\n\n    return { handleNotification }\n  }\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/notification/__demo__/btn.md",
    "content": "```yaml\ntitle:\n  zh-CN: 自定义操作按钮\n  en-US: Custom action buttons\n```\n\n## zh-CN\n\n通过指定 `btn` 字段，可以添加操作按钮。\n\n---\n\n## en-US\n\nYou can add operation buttons by specifying the `btn` field.\n\n---\n\n```vue\n<template>\n  <a-button type=\"primary\" @click=\"handleNotification\">\n    Open Notification\n  </a-button>\n</template>\n\n<script lang=\"jsx\">\nimport { Notification, Space, Button } from '@arco-design/web-vue';\n\nexport default {\n  setup() {\n    const handleNotification = () => {\n      const id = `${Date.now()}`;\n      const closeNotification =  Notification.info({\n        id,\n        title:'Notification',\n        content:'This is a notification!',\n        duration: 0,\n        footer: <Space>\n          <Button\n            type=\"secondary\"\n            size=\"small\"\n            onClick={() => Notification.remove(id)}\n          >\n            Cancel\n          </Button>\n          <Button type=\"primary\" size=\"small\" onClick={closeNotification}>\n            Ok\n          </Button>\n        </Space>\n      })\n    }\n\n    return { handleNotification }\n  }\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/notification/__demo__/custom-close.md",
    "content": "```yaml\ntitle:\n  zh-CN: 自定义关闭按钮\n  en-US: Custom close button\n```\n\n## zh-CN\n\n需要设置 `closable: true`，自定义元素使用 `closeIconElement`，仅图标使用 `closeIcon` (会有 `hover` 样式)。\n\n---\n\n## en-US\n\nNeed to set up `closable: true`, Custom elements use the `closeIconElement`, only icon use the `closeIcon` (There will be a `hover` style).\n\n---\n\n```vue\n<template>\n  <a-space>\n    <a-button type=\"primary\" @click=\"handleNotification\">\n      Open Notification\n    </a-button>\n    <a-button type=\"primary\" status=\"danger\" @click=\"handleNotification2\">\n      Open Notification\n    </a-button>\n  </a-space>\n</template>\n\n<script lang=\"jsx\">\nimport { Notification, Button } from '@arco-design/web-vue';\nimport { IconCloseCircle } from '@arco-design/web-vue/es/icon';\n\nexport default {\n  setup() {\n    const handleNotification = () => {\n      Notification.info({\n        title:'Notification',\n        content:'This is a notification!',\n        closable: true,\n        closeIcon: <IconCloseCircle />\n      })\n    }\n\n    const handleNotification2 = () => {\n      Notification.error({\n        title:'Notification',\n        content:'This is a notification!',\n        closable: true,\n        closeIconElement: <Button size=\"mini\">Close</Button>\n      })\n    }\n\n    return { handleNotification, handleNotification2 }\n  }\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/notification/__demo__/position.md",
    "content": "```yaml\ntitle:\n  zh-CN: 全局提示的位置\n  en-US: Position\n```\n\n## zh-CN\n\n通知提醒框有 4 种不同的弹出位置，分别为：`左上角`, `右上角 (默认)`, `左下角`, `右下角`。\n\n---\n\n## en-US\n\nNotification has 4 different positions, `Top Left`, `Top Right (default)`, `Bottom Left`, `Bottom Right`.\n\n---\n\n```vue\n<template>\n  <a-space>\n    <a-button type=\"primary\" @click=\"handleNotification\"> Top Right </a-button>\n    <a-button type=\"primary\" @click=\"handleNotificationTopLeft\"> Top Left </a-button>\n    <a-button type=\"primary\" @click=\"handleNotificationBottomRight\"> Bottom Right </a-button>\n    <a-button type=\"primary\" @click=\"handleNotificationBottomLeft\"> Bottom Left </a-button>\n  </a-space>\n</template>\n\n<script>\nimport { Notification } from '@arco-design/web-vue';\n\nexport default {\n  setup() {\n    const handleNotification = () => {\n      Notification.info({\n        title: 'Title',\n        content: 'This is a Notification!',\n      })\n    }\n\n    const handleNotificationTopLeft = () => {\n      Notification.info({\n        title: 'Title',\n        content: 'This is a Notification!',\n        position: \"topLeft\"\n      })\n    }\n\n    const handleNotificationBottomRight = () => {\n      Notification.info({\n        title: 'Title',\n        content: 'This is a Notification!',\n        position: 'bottomRight'\n      })\n    }\n\n    const handleNotificationBottomLeft = () => {\n      Notification.info({\n        title: 'Title',\n        content: 'This is a Notification!',\n        position: \"bottomLeft\"\n      })\n    }\n\n    return {\n      handleNotification,\n      handleNotificationTopLeft,\n      handleNotificationBottomRight,\n      handleNotificationBottomLeft\n    }\n  }\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/notification/__demo__/style.md",
    "content": "```yaml\ntitle:\n  zh-CN: 自定义样式\n  en-US: Customize style\n```\n\n## zh-CN\n\n可以设置 `style` 和 `class` 来定制样式。\n\n---\n\n## en-US\n\nYou can set `style` and `class` to customize the style.\n\n---\n\n```vue\n<template>\n  <a-button type=\"primary\" @click=\"handleNotification\">\n    Open Notification\n  </a-button>\n</template>\n\n<script>\nimport { Notification } from '@arco-design/web-vue';\n\nexport default {\n  setup() {\n    const handleNotification = () => {\n      Notification.info({\n        title: 'Notification',\n        content: 'This is a notification!',\n        closable: true,\n        style: { width: '500px' }\n      })\n    }\n\n    return { handleNotification }\n  }\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/notification/__demo__/type.md",
    "content": "```yaml\ntitle:\n  zh-CN: 消息类型\n  en-US: Notification Type\n```\n\n## zh-CN\n\n通知提醒框的消息类型。\n\n---\n\n## en-US\n\nThe message type of the notification.\n\n---\n\n```vue\n<template>\n  <a-space>\n    <a-button\n      type='primary'\n      @click=\"() => this.$notification.info('This is an info message!')\"\n    >\n      Info\n    </a-button>\n    <a-button\n      type='primary'\n      status=\"success\"\n      @click=\"() => this.$notification.success('This is a success message!')\"\n    >\n      Success\n    </a-button>\n    <a-button\n      type='primary'\n      status=\"warning\"\n      @click=\"() => this.$notification.warning('This is a warning message!')\"\n    >\n      Warning\n    </a-button>\n    <a-button\n      type='primary'\n      status=\"danger\"\n      @click=\"() => this.$notification.error('This is an error message!')\"\n    >\n      Error\n    </a-button>\n    <a-button\n      type='secondary'\n      @click=\"() => this.$notification.info({\n        content: 'This is an error message!',\n        showIcon: false\n      })\"\n    >\n      Normal\n    </a-button>\n  </a-space>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/notification/__demo__/update_duration.md",
    "content": "```yaml\ntitle:\n  zh-CN: 更新延迟\n  en-US: Update duration\n```\n\n## zh-CN\n\n通过指定参数 `id`，可以更新已经存在的通知提醒框。\n\n---\n\n## en-US\n\nSpecifying `id` to update the existing notification.\n\n---\n\n```vue\n<template>\n  <a-button type=\"primary\" @click=\"handleNotification\">\n    Open Notification\n  </a-button>\n</template>\n\n<script>\nimport { Notification } from '@arco-design/web-vue';\n\nexport default {\n  setup() {\n    const handleNotification = () => {\n      Notification.warning({\n        id: 'your_id',\n        title: 'Ready to update',\n        content: 'Will update after 2 seconds...',\n        duration: 0,\n      })\n\n      setTimeout(() => {\n        Notification.success({\n          id: 'your_id',\n          title: 'Success',\n          content: 'Update success!',\n          duration: 3000,\n        });\n      }, 2000)\n    }\n\n    return { handleNotification }\n  }\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/notification/__demo__/update_notification.md",
    "content": "```yaml\ntitle:\n  zh-CN: 更新通知内容\n  en-US: Update\n```\n\n## zh-CN\n\n通过指定参数 `id`，可以更新已经存在的通知提醒框。\n\n---\n\n## en-US\n\nSpecifying `id` to update the existing notification.\n\n---\n\n```vue\n<template>\n  <a-button type=\"primary\" @click=\"handleNotification\">\n    Open Notification\n  </a-button>\n</template>\n\n<script>\nimport { Notification } from '@arco-design/web-vue';\n\nexport default {\n  setup() {\n    const handleNotification = () => {\n      Notification.warning({\n        id: 'your_id',\n        title: 'Ready to update',\n        content: 'Will update after 2 seconds...',\n      })\n\n      setTimeout(() => {\n        Notification.success({\n          id: 'your_id',\n          title: 'Success',\n          content: 'Update success!',\n        });\n      }, 2000)\n    }\n\n    return { handleNotification }\n  }\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/notification/__test__/__snapshots__/demo.test.ts.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`<notification> demo: render [basic] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 8px; row-gap: 8px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n      <!--v-if--> Open Notification\n    </button></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n      <!--v-if--> Open Notification\n    </button></div>\n</div>\"\n`;\n\nexports[`<notification> demo: render [btn] correctly 1`] = `\n\"<button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n  <!--v-if--> Open Notification\n</button>\"\n`;\n\nexports[`<notification> demo: render [custom-close] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 8px; row-gap: 8px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n      <!--v-if--> Open Notification\n    </button></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-danger\\\\\" type=\\\\\"button\\\\\">\n      <!--v-if--> Open Notification\n    </button></div>\n</div>\"\n`;\n\nexports[`<notification> demo: render [position] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 8px; row-gap: 8px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n      <!--v-if--> Top Right\n    </button></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n      <!--v-if--> Top Left\n    </button></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n      <!--v-if--> Bottom Right\n    </button></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n      <!--v-if--> Bottom Left\n    </button></div>\n</div>\"\n`;\n\nexports[`<notification> demo: render [style] correctly 1`] = `\n\"<button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n  <!--v-if--> Open Notification\n</button>\"\n`;\n\nexports[`<notification> demo: render [type] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 8px; row-gap: 8px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n      <!--v-if--> Info\n    </button></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-success\\\\\" type=\\\\\"button\\\\\">\n      <!--v-if--> Success\n    </button></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-warning\\\\\" type=\\\\\"button\\\\\">\n      <!--v-if--> Warning\n    </button></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-danger\\\\\" type=\\\\\"button\\\\\">\n      <!--v-if--> Error\n    </button></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n      <!--v-if--> Normal\n    </button></div>\n</div>\"\n`;\n\nexports[`<notification> demo: render [update_duration] correctly 1`] = `\n\"<button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n  <!--v-if--> Open Notification\n</button>\"\n`;\n\nexports[`<notification> demo: render [update_notification] correctly 1`] = `\n\"<button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n  <!--v-if--> Open Notification\n</button>\"\n`;\n"
  },
  {
    "path": "packages/web-vue/components/notification/__test__/__snapshots__/index.test.ts.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Notification should render notification 1`] = `\n\"<transition-group-stub name=\\\\\"slide-right-notification\\\\\" tag=\\\\\"ul\\\\\" appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\" class=\\\\\"arco-notification-list arco-notification-list-top-right\\\\\" style=\\\\\"z-index: 0;\\\\\">\n  <li role=\\\\\"alert\\\\\" class=\\\\\"arco-notification arco-notification-info\\\\\">\n    <div class=\\\\\"arco-notification-left\\\\\">\n      <div class=\\\\\"arco-notification-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-info-circle-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n          <path fill-rule=\\\\\"evenodd\\\\\" clip-rule=\\\\\"evenodd\\\\\" d=\\\\\"M24 44c11.046 0 20-8.954 20-20S35.046 4 24 4 4 12.954 4 24s8.954 20 20 20Zm2-30a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-2Zm0 17h1a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-6a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1h1v-8a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1v11Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n        </svg></div>\n    </div>\n    <div class=\\\\\"arco-notification-right\\\\\">\n      <!--v-if-->\n      <div class=\\\\\"arco-notification-content\\\\\">Info Message</div>\n      <!--v-if-->\n    </div>\n    <!--v-if-->\n  </li>\n  <li role=\\\\\"alert\\\\\" class=\\\\\"arco-notification arco-notification-success\\\\\">\n    <div class=\\\\\"arco-notification-left\\\\\">\n      <div class=\\\\\"arco-notification-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-check-circle-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n          <path fill-rule=\\\\\"evenodd\\\\\" clip-rule=\\\\\"evenodd\\\\\" d=\\\\\"M24 44c11.046 0 20-8.954 20-20S35.046 4 24 4 4 12.954 4 24s8.954 20 20 20Zm10.207-24.379a1 1 0 0 0 0-1.414l-1.414-1.414a1 1 0 0 0-1.414 0L22 26.172l-4.878-4.88a1 1 0 0 0-1.415 0l-1.414 1.415a1 1 0 0 0 0 1.414l7 7a1 1 0 0 0 1.414 0l11.5-11.5Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n        </svg></div>\n    </div>\n    <div class=\\\\\"arco-notification-right\\\\\">\n      <!--v-if-->\n      <div class=\\\\\"arco-notification-content\\\\\">Success Message</div>\n      <!--v-if-->\n    </div>\n    <!--v-if-->\n  </li>\n  <li role=\\\\\"alert\\\\\" class=\\\\\"arco-notification arco-notification-warning\\\\\">\n    <div class=\\\\\"arco-notification-left\\\\\">\n      <div class=\\\\\"arco-notification-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-exclamation-circle-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n          <path fill-rule=\\\\\"evenodd\\\\\" clip-rule=\\\\\"evenodd\\\\\" d=\\\\\"M24 44c11.046 0 20-8.954 20-20S35.046 4 24 4 4 12.954 4 24s8.954 20 20 20Zm-2-11a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1v2Zm4-18a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V15Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n        </svg></div>\n    </div>\n    <div class=\\\\\"arco-notification-right\\\\\">\n      <!--v-if-->\n      <div class=\\\\\"arco-notification-content\\\\\">Warning Message</div>\n      <!--v-if-->\n    </div>\n    <!--v-if-->\n  </li>\n  <li role=\\\\\"alert\\\\\" class=\\\\\"arco-notification arco-notification-error\\\\\">\n    <div class=\\\\\"arco-notification-left\\\\\">\n      <div class=\\\\\"arco-notification-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-close-circle-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n          <path fill-rule=\\\\\"evenodd\\\\\" clip-rule=\\\\\"evenodd\\\\\" d=\\\\\"M24 44c11.046 0 20-8.954 20-20S35.046 4 24 4 4 12.954 4 24s8.954 20 20 20Zm4.955-27.771-4.95 4.95-4.95-4.95a1 1 0 0 0-1.414 0l-1.414 1.414a1 1 0 0 0 0 1.414l4.95 4.95-4.95 4.95a1 1 0 0 0 0 1.414l1.414 1.414a1 1 0 0 0 1.414 0l4.95-4.95 4.95 4.95a1 1 0 0 0 1.414 0l1.414-1.414a1 1 0 0 0 0-1.414l-4.95-4.95 4.95-4.95a1 1 0 0 0 0-1.414l-1.414-1.414a1 1 0 0 0-1.414 0Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n        </svg></div>\n    </div>\n    <div class=\\\\\"arco-notification-right\\\\\">\n      <!--v-if-->\n      <div class=\\\\\"arco-notification-content\\\\\">Error Message</div>\n      <!--v-if-->\n    </div>\n    <!--v-if-->\n  </li>\n</transition-group-stub>\"\n`;\n"
  },
  {
    "path": "packages/web-vue/components/notification/__test__/demo.test.ts",
    "content": "import demoTest from '../../../scripts/demo-test';\n\ndemoTest('notification');\n"
  },
  {
    "path": "packages/web-vue/components/notification/__test__/index.test.ts",
    "content": "import { mount } from '@vue/test-utils';\nimport Notification from '../index';\nimport NotificationList from '../notification-list';\n\ndescribe('Notification', () => {\n  test('should render notification', () => {\n    const wrapper = mount(NotificationList, {\n      props: {\n        notifications: [\n          {\n            id: 0,\n            content: 'Info Message',\n            type: 'info',\n          },\n          {\n            id: 1,\n            content: 'Success Message',\n            type: 'success',\n          },\n          {\n            id: 2,\n            content: 'Warning Message',\n            type: 'warning',\n          },\n          {\n            id: 3,\n            content: 'Error Message',\n            type: 'error',\n          },\n        ],\n      },\n    });\n\n    expect(wrapper.html()).toMatchSnapshot();\n  });\n\n  test('should show & remove notification', async () => {\n    const wrapper = mount({\n      template:\n        '<button id=\"add\" @click=\"handleAdd\">Add</button>' +\n        '<button id=\"clear\" @click=\"handleClear\">Clear</button>',\n      methods: {\n        handleAdd() {\n          Notification.info({\n            content: 'Info Message',\n            closable: true,\n          });\n        },\n        handleClear() {\n          Notification.clear();\n        },\n      },\n    });\n\n    const addBtn = wrapper.find('#add');\n    await addBtn.trigger('click');\n    await addBtn.trigger('click');\n    expect(document.querySelectorAll('.arco-notification')).toHaveLength(2);\n    (\n      document.querySelector('.arco-notification-close-btn') as HTMLElement\n    )?.click();\n\n    await wrapper.find('#clear').trigger('click');\n    expect(document.querySelectorAll('.arco-notification')).toHaveLength(0);\n  });\n\n  test('should emit close event', async () => {\n    const wrapper = mount(NotificationList, {\n      props: {\n        notifications: [\n          {\n            id: 0,\n            content: 'Info Message',\n            type: 'info',\n            closable: true,\n          },\n        ],\n      },\n    });\n\n    await wrapper.find('.arco-notification-close-btn').trigger('click');\n    expect(wrapper.emitted('close')).toHaveLength(1);\n  });\n\n  test('should update notification content', async () => {\n    let count = 0;\n\n    const wrapper = mount({\n      template: `\n        <button @click=\"handleClick\">Click</button>`,\n      methods: {\n        handleClick() {\n          Notification.info({\n            id: '1',\n            content: `Info Message ${++count}`,\n          });\n        },\n      },\n    });\n\n    const button = wrapper.find('button');\n    await button.trigger('click');\n    expect(document.querySelector('.arco-notification')?.textContent).toBe(\n      'Info Message 1'\n    );\n    await button.trigger('click');\n    expect(document.querySelector('.arco-notification')?.textContent).toBe(\n      'Info Message 2'\n    );\n  });\n});\n"
  },
  {
    "path": "packages/web-vue/components/notification/index.ts",
    "content": "import type { App, AppContext, Ref } from 'vue';\nimport { createVNode, render, reactive, ref } from 'vue';\nimport { MESSAGE_TYPES, MessageType } from '../_utils/constant';\nimport { getOverlay } from '../_utils/dom';\nimport { isFunction, isString, isUndefined } from '../_utils/is';\nimport NotificationList from './notification-list';\nimport {\n  NotificationConfig,\n  NotificationItem,\n  NotificationMethod,\n  NotificationPosition,\n} from './interface';\n\ntype _NotificationConfig = NotificationConfig & {\n  type: MessageType;\n};\n\nclass NotificationManger {\n  private readonly notificationIds: Set<number | string>;\n\n  private readonly notifications: Ref<NotificationItem[]>;\n\n  private readonly position: NotificationPosition;\n\n  private container: HTMLElement | null;\n\n  private notificationCount = 0;\n\n  constructor(config: _NotificationConfig, appContext?: AppContext) {\n    const { position = 'topRight' } = config;\n    this.container = getOverlay('notification');\n    this.notificationIds = new Set();\n    this.notifications = ref([]);\n    this.position = position;\n\n    const vm = createVNode(NotificationList, {\n      notifications: this.notifications.value,\n      position,\n      onClose: this.remove,\n      onAfterClose: this.destroy,\n    });\n\n    if (appContext ?? Notification._context) {\n      vm.appContext = appContext ?? Notification._context;\n    }\n    render(vm, this.container);\n    document.body.appendChild(this.container);\n  }\n\n  add = (config: _NotificationConfig) => {\n    this.notificationCount++;\n    const id = config.id ?? `__arco_notification_${this.notificationCount}`;\n    if (this.notificationIds.has(id)) {\n      return this.update(id, config);\n    }\n    const notification: NotificationItem = reactive({ id, ...config });\n    this.notifications.value.push(notification);\n    this.notificationIds.add(id);\n\n    return {\n      close: () => this.remove(id),\n    };\n  };\n\n  update = (id: number | string, config: _NotificationConfig) => {\n    for (let i = 0; i < this.notifications.value.length; i++) {\n      if (this.notifications.value[i].id === id) {\n        const resetOnUpdate = !isUndefined(config.duration);\n        Object.assign(this.notifications.value[i], {\n          ...config,\n          id,\n          resetOnUpdate,\n        });\n        break;\n      }\n    }\n    return {\n      close: () => this.remove(id),\n    };\n  };\n\n  remove = (id: number | string) => {\n    for (let i = 0; i < this.notifications.value.length; i++) {\n      const item = this.notifications.value[i];\n\n      if (item.id === id) {\n        if (isFunction(item.onClose)) {\n          item.onClose(id);\n        }\n\n        this.notifications.value.splice(i, 1);\n        this.notificationIds.delete(id);\n        break;\n      }\n    }\n  };\n\n  clear = () => {\n    this.notifications.value.splice(0);\n  };\n\n  destroy = () => {\n    if (this.notifications.value.length === 0 && this.container) {\n      render(null, this.container);\n      document.body.removeChild(this.container);\n      this.container = null;\n      notificationInstance[this.position] = undefined;\n    }\n  };\n}\n\nconst notificationInstance: {\n  topLeft?: NotificationManger;\n  topRight?: NotificationManger;\n  bottomLeft?: NotificationManger;\n  bottomRight?: NotificationManger;\n} = {};\n\nconst notification = MESSAGE_TYPES.reduce((pre, value) => {\n  pre[value] = (config, appContext?: AppContext) => {\n    if (isString(config)) {\n      config = { content: config };\n    }\n\n    const _config: _NotificationConfig = { type: value, ...config };\n    const { position = 'topRight' } = _config;\n    if (!notificationInstance[position]) {\n      notificationInstance[position] = new NotificationManger(\n        _config,\n        appContext\n      );\n    }\n    return notificationInstance[position]!.add(_config);\n  };\n  return pre;\n}, {} as NotificationMethod);\n\nnotification.remove = (id: string) => {\n  if (id) {\n    Object.values(notificationInstance).forEach((item) => item?.remove(id));\n  }\n};\n\nnotification.clear = (position?: NotificationPosition) => {\n  if (position) {\n    notificationInstance[position]?.clear();\n  } else {\n    Object.values(notificationInstance).forEach((item) => item?.clear());\n  }\n};\n\nconst Notification = {\n  ...notification,\n  install: (app: App) => {\n    const _notification = {\n      clear: notification.clear,\n    } as NotificationMethod;\n\n    for (const key of MESSAGE_TYPES) {\n      _notification[key] = (config, appContext = app._context) =>\n        notification[key](config, appContext);\n    }\n\n    app.config.globalProperties.$notification = _notification;\n  },\n  _context: null as AppContext | null,\n};\n\nexport type {\n  NotificationMethod,\n  NotificationConfig,\n  NotificationReturn,\n} from './interface';\n\nexport default Notification;\n"
  },
  {
    "path": "packages/web-vue/components/notification/interface.ts",
    "content": "import { AppContext, CSSProperties, RenderFunction } from 'vue';\nimport { ClassName, RenderContent } from '../_utils/types';\nimport { MessageType } from '../_utils/constant';\n\nexport const NOTIFICATION_POSITION = [\n  'topLeft',\n  'topRight',\n  'bottomLeft',\n  'bottomRight',\n] as const;\n\nexport type NotificationPosition = typeof NOTIFICATION_POSITION[number];\n\nexport interface NotificationMethod {\n  /**\n   * @zh 显示信息提醒框\n   * @en Show info notification\n   */\n  info: (\n    config: string | NotificationConfig,\n    appContext?: AppContext\n  ) => NotificationReturn;\n  /**\n   * @zh 显示成功提醒框\n   * @en Show success notification\n   */\n  success: (\n    config: string | NotificationConfig,\n    appContext?: AppContext\n  ) => NotificationReturn;\n  /**\n   * @zh 显示警告提醒框\n   * @en Show warning notification\n   */\n  warning: (\n    config: string | NotificationConfig,\n    appContext?: AppContext\n  ) => NotificationReturn;\n  /**\n   * @zh 显示错误提醒框\n   * @en Show error notification\n   */\n  error: (\n    config: string | NotificationConfig,\n    appContext?: AppContext\n  ) => NotificationReturn;\n  /**\n   * @zh 清除对应 `id` 的提醒框\n   * @en remove the notification for the corresponding `id`\n   */\n  remove: (id: string) => void;\n  /**\n   * @zh 清除全部提醒框\n   * @en Clear all notifications\n   */\n  clear: (position?: NotificationPosition) => void;\n}\n\nexport interface NotificationConfig {\n  /**\n   * @zh 内容\n   * @en Content\n   */\n  content: RenderContent;\n  /**\n   * @zh 标题\n   * @en Title\n   */\n  title?: RenderContent;\n  /**\n   * @zh 图标\n   * @en Icon\n   */\n  icon?: RenderFunction;\n  /**\n   * @zh 唯一id\n   * @en Unique id\n   */\n  id?: string;\n  /**\n   * @zh 样式\n   * @en Style\n   */\n  style?: CSSProperties;\n  /**\n   * @zh 样式类名\n   * @en Style class name\n   */\n  class?: ClassName;\n  /**\n   * @zh 位置\n   * @en Position\n   * @type 'topLeft'|'topRight'|'bottomLeft'|'bottomRight'\n   */\n  position?: NotificationPosition;\n  /**\n   * @zh 是否显示图标\n   * @en Whether to show icon\n   * @defaultValue true\n   */\n  showIcon?: boolean;\n  /**\n   * @zh 是否可关闭\n   * @en Whether it can be closed\n   * @defaultValue false\n   */\n  closable?: boolean;\n  /**\n   * @zh 显示的持续时间，单位为 `ms`\n   * @en Display duration, the unit is `ms`\n   * @defaultValue 3000\n   */\n  duration?: number;\n  /**\n   * @zh 底部内容\n   * @en Footer Content\n   * @version 2.25.0\n   */\n  footer?: RenderFunction;\n  /**\n   * @zh 关闭按钮图标\n   * @en Close button icon\n   */\n  closeIcon?: RenderFunction;\n  /**\n   * @zh 关闭按钮元素\n   * @en Close button element\n   */\n  closeIconElement?: RenderFunction;\n  /**\n   * @zh 关闭时的回调函数\n   * @en Callback function when closing\n   * @param id\n   */\n  onClose?: (id: number | string) => void;\n}\n\nexport interface NotificationReturn {\n  /**\n   * @zh 关闭当前通知提醒框\n   * @en Close the current notification\n   */\n  close: () => void;\n}\n\nexport interface NotificationItem {\n  id: number | string;\n  type: MessageType;\n  content: RenderContent;\n  style?: CSSProperties;\n  class?: ClassName;\n  title?: RenderContent;\n  icon?: RenderFunction;\n  footer?: RenderFunction;\n  closeIcon?: RenderFunction;\n  closeIconElement?: RenderFunction;\n  showIcon?: boolean;\n  closable?: boolean;\n  duration?: number;\n  resetOnUpdate?: boolean;\n  onClose?: (id: number | string) => void;\n}\n"
  },
  {
    "path": "packages/web-vue/components/notification/notification-list.tsx",
    "content": "import type { PropType } from 'vue';\nimport { defineComponent, TransitionGroup } from 'vue';\nimport { getPrefixCls } from '../_utils/global-config';\nimport { toKebabCase } from '../_utils/convert-case';\nimport Notification from './notification.vue';\nimport {\n  NOTIFICATION_POSITION,\n  NotificationItem,\n  NotificationPosition,\n} from './interface';\nimport usePopupManager from '../_hooks/use-popup-manager';\nimport { getSlotFunction } from '../_utils/vue-utils';\n\nexport default defineComponent({\n  name: 'NotificationList',\n  props: {\n    notifications: {\n      type: Array as PropType<NotificationItem[]>,\n      default: () => [],\n    },\n    position: {\n      type: String as PropType<NotificationPosition>,\n      default: 'topRight',\n      validator: (value: any) => {\n        return NOTIFICATION_POSITION.includes(value);\n      },\n    },\n  },\n  emits: ['close', 'afterClose'],\n  setup(props, context) {\n    const prefixCls = getPrefixCls('notification-list');\n    const kebabPosition = toKebabCase(props.position);\n    const { zIndex } = usePopupManager('message', { runOnMounted: true });\n\n    const isRight = props.position.includes('Right');\n\n    return () => (\n      <TransitionGroup\n        class={[prefixCls, `${prefixCls}-${kebabPosition}`]}\n        style={{ zIndex: zIndex.value }}\n        name={`slide-${isRight ? 'right' : 'left'}-notification`}\n        onAfterLeave={() => context.emit('afterClose')}\n        tag=\"ul\"\n      >\n        {props.notifications.map((item) => {\n          const slots = {\n            default: getSlotFunction(item.title),\n            content: getSlotFunction(item.content),\n            icon: getSlotFunction(item.icon),\n            footer: getSlotFunction(item.footer),\n            closeIcon: getSlotFunction(item.closeIcon),\n            closeIconElement: getSlotFunction(item.closeIconElement),\n          };\n          return (\n            <Notification\n              key={item.id}\n              type={item.type}\n              style={item.style}\n              class={item.class}\n              duration={item.duration}\n              closable={item.closable}\n              showIcon={item.showIcon}\n              resetOnUpdate={item.resetOnUpdate}\n              v-slots={slots}\n              onClose={() => context.emit('close', item.id)}\n            />\n          );\n        })}\n      </TransitionGroup>\n    );\n  },\n});\n"
  },
  {
    "path": "packages/web-vue/components/notification/notification.vue",
    "content": "<template>\n  <li\n    role=\"alert\"\n    :class=\"[\n      prefixCls,\n      `${prefixCls}-${type}`,\n      { [`${prefixCls}-closable`]: closable },\n    ]\"\n  >\n    <div v-if=\"showIcon\" :class=\"`${prefixCls}-left`\">\n      <div :class=\"`${prefixCls}-icon`\">\n        <slot name=\"icon\">\n          <icon-info-circle-fill v-if=\"type === 'info'\" />\n          <icon-check-circle-fill v-else-if=\"type === 'success'\" />\n          <icon-exclamation-circle-fill v-else-if=\"type === 'warning'\" />\n          <icon-close-circle-fill v-else-if=\"type === 'error'\" />\n        </slot>\n      </div>\n    </div>\n    <div :class=\"`${prefixCls}-right`\">\n      <div v-if=\"$slots.default\" :class=\"`${prefixCls}-title`\">\n        <slot />\n      </div>\n      <div v-if=\"$slots.content\" :class=\"`${prefixCls}-content`\">\n        <slot name=\"content\" />\n      </div>\n      <div v-if=\"$slots.footer\" :class=\"`${prefixCls}-footer`\">\n        <slot name=\"footer\" />\n      </div>\n    </div>\n    <div v-if=\"closable\" :class=\"`${prefixCls}-close-btn`\" @click=\"handleClose\">\n      <slot name=\"closeIconElement\">\n        <a-icon-hover>\n          <slot name=\"closeIcon\">\n            <icon-close />\n          </slot>\n        </a-icon-hover>\n      </slot>\n    </div>\n  </li>\n</template>\n\n<script lang=\"ts\">\nimport type { PropType } from 'vue';\nimport { defineComponent, onMounted, onUnmounted, onUpdated } from 'vue';\nimport { getPrefixCls } from '../_utils/global-config';\nimport { MessageType } from '../_utils/constant';\nimport AIconHover from '../_components/icon-hover.vue';\nimport IconClose from '../icon/icon-close';\nimport IconInfoCircleFill from '../icon/icon-info-circle-fill';\nimport IconCheckCircleFill from '../icon/icon-check-circle-fill';\nimport IconExclamationCircleFill from '../icon/icon-exclamation-circle-fill';\nimport IconCloseCircleFill from '../icon/icon-close-circle-fill';\n\nexport default defineComponent({\n  name: 'Notification',\n  components: {\n    AIconHover,\n    IconInfoCircleFill,\n    IconCheckCircleFill,\n    IconExclamationCircleFill,\n    IconCloseCircleFill,\n    IconClose,\n  },\n  props: {\n    type: {\n      type: String as PropType<MessageType>,\n      default: 'info',\n    },\n    showIcon: {\n      type: Boolean,\n      default: true,\n    },\n    closable: {\n      type: Boolean,\n      default: false,\n    },\n    duration: {\n      type: Number,\n      default: 3000,\n    },\n    resetOnUpdate: {\n      type: Boolean,\n      default: false,\n    },\n  },\n  emits: ['close'],\n  setup(props, context) {\n    const prefixCls = getPrefixCls('notification');\n    let timer = 0;\n\n    const handleClose = () => {\n      context.emit('close');\n    };\n\n    onMounted(() => {\n      if (props.duration > 0) {\n        timer = window.setTimeout(handleClose, props.duration);\n      }\n    });\n\n    onUpdated(() => {\n      if (props.resetOnUpdate) {\n        if (timer) {\n          window.clearTimeout(timer);\n          timer = 0;\n        }\n        if (props.duration > 0) {\n          timer = window.setTimeout(handleClose, props.duration);\n        }\n      }\n    });\n\n    onUnmounted(() => {\n      if (timer) {\n        window.clearTimeout(timer);\n      }\n    });\n\n    return {\n      prefixCls,\n      handleClose,\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/notification/style/index.less",
    "content": "@import '../../style/mixins/index.less';\n@import './token.less';\n\n@notification-prefix-cls: ~'@{prefix}-notification';\n\n.@{notification-prefix-cls}-list {\n  position: fixed;\n  z-index: @z-index-notification;\n  margin: 0;\n  padding-left: 0;\n\n  &-top-left {\n    top: @notification-wrapper-margin-top;\n    left: @notification-wrapper-margin-left;\n  }\n\n  &-top-right {\n    top: @notification-wrapper-margin-top;\n    right: @notification-wrapper-margin-right;\n\n    .@{notification-prefix-cls} {\n      margin-left: auto;\n    }\n  }\n\n  &-bottom-left {\n    bottom: @notification-wrapper-margin-bottom;\n    left: @notification-wrapper-margin-left;\n  }\n\n  &-bottom-right {\n    right: @notification-wrapper-margin-right;\n    bottom: @notification-wrapper-margin-bottom;\n\n    .@{notification-prefix-cls} {\n      margin-left: auto;\n    }\n  }\n}\n\n.@{notification-prefix-cls} {\n  position: relative;\n  display: flex;\n  box-sizing: border-box;\n  width: @notification-width + @notification-padding-right +\n    @notification-padding-left;\n  padding: @notification-padding-top @notification-padding-right\n    @notification-padding-bottom @notification-padding-left;\n  overflow: hidden;\n  background-color: @notification-normal-color-bg;\n  border: @notification-border-width @notification-border-style\n    @notification-normal-color-border;\n  border-radius: @notification-border-radius;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n  opacity: 1;\n  transition: opacity @transition-duration-2 @transition-timing-function-linear;\n\n  &:not(:last-child) {\n    margin-bottom: @notification-margin-bottom;\n  }\n\n  &-icon {\n    display: flex;\n    align-items: center;\n    font-size: @notification-font-size-icon;\n  }\n\n  &-info {\n    background-color: @notification-info-color-bg;\n    border-color: @notification-info-color-border;\n  }\n\n  &-info &-icon {\n    color: @notification-info-color-icon;\n  }\n\n  &-success {\n    background-color: @notification-success-color-bg;\n    border-color: @notification-success-color-border;\n  }\n\n  &-success &-icon {\n    color: @notification-success-color-icon;\n  }\n\n  &-warning {\n    background-color: @notification-warning-color-bg;\n    border-color: @notification-warning-color-border;\n  }\n\n  &-warning &-icon {\n    color: @notification-warning-color-icon;\n  }\n\n  &-error {\n    background-color: @notification-error-color-bg;\n    border-color: @notification-error-color-border;\n  }\n\n  &-error &-icon {\n    color: @notification-error-color-icon;\n  }\n\n  &-left {\n    padding-right: @notification-icon-margin-right;\n  }\n\n  &-right {\n    flex: 1;\n    word-break: break-word;\n  }\n\n  &-title {\n    color: @notification-normal-color-text-title;\n    font-weight: @font-weight-500;\n    font-size: @notification-font-size-title;\n  }\n\n  &-title + &-content {\n    margin-top: @notification-title-margin-bottom;\n  }\n\n  &-content {\n    color: @notification-normal-color-text-content;\n    font-size: @notification-font-size-content;\n  }\n\n  &-info &-title {\n    color: @notification-info-color-text-title;\n  }\n\n  &-info &-content {\n    color: @notification-info-color-text-content;\n  }\n\n  &-success &-title {\n    color: @notification-success-color-text-title;\n  }\n\n  &-success &-content {\n    color: @notification-success-color-text-content;\n  }\n\n  &-warning &-title {\n    color: @notification-warning-color-text-title;\n  }\n\n  &-warning &-content {\n    color: @notification-warning-color-text-content;\n  }\n\n  &-error &-title {\n    color: @notification-error-color-text-title;\n  }\n\n  &-error &-content {\n    color: @notification-error-color-text-content;\n  }\n\n  &-footer {\n    margin-top: @notification-btn-wrapper-margin-top;\n    text-align: right;\n  }\n\n  &-close-btn {\n    position: absolute;\n    top: @notification-close-icon-top;\n    right: @notification-close-icon-right;\n    color: @notification-color-close-icon;\n    font-size: @notification-close-icon-font-size;\n    cursor: pointer;\n\n    > svg {\n      position: relative;\n    }\n  }\n\n  .icon-hover(\n    @notification-prefix-cls,\n    @notification-close-icon-font-size,\n    @notification-close-icon-font-size + 8px\n  );\n}\n\n.slide-left-notification-enter-from,\n.slide-left-notification-appear-from {\n  transform: translateX(-100%);\n}\n\n.slide-left-notification-enter-to,\n.slide-left-notification-appear-to {\n  transform: translateX(0);\n}\n\n.slide-left-notification-enter-active,\n.slide-left-notification-appear-active {\n  transition: transform @transition-duration-4\n    @transition-timing-function-overshoot;\n}\n\n.slide-left-notification-leave-from {\n  opacity: 1;\n}\n\n.slide-left-notification-leave-to {\n  height: 0;\n  margin-top: 0;\n  margin-bottom: 0;\n  padding-top: 0;\n  padding-bottom: 0;\n  opacity: 0;\n}\n\n.slide-left-notification-leave-active {\n  transition: all @transition-duration-3 @transition-timing-function-standard;\n}\n\n.slide-right-notification-enter-from,\n.slide-right-notification-appear-from {\n  transform: translateX(100%);\n}\n\n.slide-right-notification-enter-to,\n.slide-right-notification-appear-to {\n  transform: translateX(0);\n}\n\n.slide-right-notification-enter-active,\n.slide-right-notification-appear-active {\n  transition: transform @transition-duration-4\n    @transition-timing-function-overshoot;\n}\n\n.slide-right-notification-leave-from {\n  opacity: 1;\n}\n\n.slide-right-notification-leave-to {\n  height: 0;\n  margin-top: 0;\n  margin-bottom: 0;\n  padding-top: 0;\n  padding-bottom: 0;\n  opacity: 0;\n}\n\n.slide-right-notification-leave-active {\n  transition: all @transition-duration-3 @transition-timing-function-standard;\n}\n"
  },
  {
    "path": "packages/web-vue/components/notification/style/index.ts",
    "content": "import '../../style/index.less';\nimport './index.less';\n"
  },
  {
    "path": "packages/web-vue/components/notification/style/token.less",
    "content": "@import '../../style/theme/index.less';\n\n@notification-wrapper-margin-top: @spacing-8;\n@notification-wrapper-margin-bottom: @spacing-8;\n@notification-wrapper-margin-left: @spacing-8;\n@notification-wrapper-margin-right: @spacing-8;\n\n@notification-border-radius: @radius-medium;\n@notification-margin-bottom: @spacing-8;\n@notification-width: 300px;\n@notification-padding-top: @spacing-8;\n@notification-padding-bottom: @spacing-8;\n@notification-padding-left: @spacing-8;\n@notification-padding-right: @spacing-8;\n@notification-font-size-icon: 24px;\n@notification-font-size-title: @font-size-title-1;\n@notification-font-size-content: @font-size-body-3;\n@notification-icon-margin-right: @spacing-7;\n@notification-title-margin-bottom: @spacing-2;\n@notification-btn-wrapper-margin-top: @spacing-7;\n\n@notification-border-width: 1px;\n@notification-border-style: solid;\n\n@notification-color-close-icon: var(~'@{arco-cssvars-prefix}-color-text-1');\n@notification-close-icon-font-size: 12px;\n@notification-close-icon-top: @spacing-6;\n@notification-close-icon-right: @spacing-6;\n\n@notification-normal-color-bg: var(~'@{arco-cssvars-prefix}-color-bg-popup');\n@notification-normal-color-icon: var(~'@{arco-cssvars-prefix}-color-text-1');\n@notification-normal-color-text-title: var(~'@{arco-cssvars-prefix}-color-text-1');\n@notification-normal-color-text-content: var(~'@{arco-cssvars-prefix}-color-text-1');\n@notification-normal-color-border: var(~'@{arco-cssvars-prefix}-color-neutral-3');\n\n@notification-info-color-bg: var(~'@{arco-cssvars-prefix}-color-bg-popup');\n@notification-info-color-icon: @color-primary-6;\n@notification-info-color-text-title: var(~'@{arco-cssvars-prefix}-color-text-1');\n@notification-info-color-text-content: var(~'@{arco-cssvars-prefix}-color-text-1');\n@notification-info-color-border: var(~'@{arco-cssvars-prefix}-color-neutral-3');\n\n@notification-success-color-bg: var(~'@{arco-cssvars-prefix}-color-bg-popup');\n@notification-success-color-icon: @color-success-6;\n@notification-success-color-text-title: var(~'@{arco-cssvars-prefix}-color-text-1');\n@notification-success-color-text-content: var(~'@{arco-cssvars-prefix}-color-text-1');\n@notification-success-color-border: var(~'@{arco-cssvars-prefix}-color-neutral-3');\n\n@notification-warning-color-bg: var(~'@{arco-cssvars-prefix}-color-bg-popup');\n@notification-warning-color-icon: @color-warning-6;\n@notification-warning-color-text-title: var(~'@{arco-cssvars-prefix}-color-text-1');\n@notification-warning-color-text-content: var(~'@{arco-cssvars-prefix}-color-text-1');\n@notification-warning-color-border: var(~'@{arco-cssvars-prefix}-color-neutral-3');\n\n@notification-error-color-bg: var(~'@{arco-cssvars-prefix}-color-bg-popup');\n@notification-error-color-icon: @color-danger-6;\n@notification-error-color-text-title: var(~'@{arco-cssvars-prefix}-color-text-1');\n@notification-error-color-text-content: var(~'@{arco-cssvars-prefix}-color-text-1');\n@notification-error-color-border: var(~'@{arco-cssvars-prefix}-color-neutral-3');\n"
  },
  {
    "path": "packages/web-vue/components/overflow-list/CHANGELOG.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.37.3\n\n`2022-09-23`\n\n### 💎 Enhancement\n\n- overflow quantity changes event ([#1287](https://github.com/arco-design/arco-design-vue/pull/1287))\n\n\n## 2.37.1\n\n`2022-09-16`\n\n### 🆕 Feature\n\n- Added `OverflowList` component ([#1634](https://github.com/arco-design/arco-design-vue/pull/1634))\n\n\n## 2.30.1-beta.1\n\n`2022-06-10`\n\n### 🆕 Feature\n\n- Added `OverflowList` component ([#1221](https://github.com/arco-design/arco-design-vue/pull/1221))\n\n"
  },
  {
    "path": "packages/web-vue/components/overflow-list/CHANGELOG.zh-CN.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.37.3\n\n`2022-09-23`\n\n### 💎 功能优化\n\n- 溢出数量改变事件 ([#1287](https://github.com/arco-design/arco-design-vue/pull/1287))\n\n\n## 2.37.1\n\n`2022-09-16`\n\n### 🆕 新增功能\n\n- 新增 `OverflowList` 组件 ([#1634](https://github.com/arco-design/arco-design-vue/pull/1634))\n\n\n## 2.30.1-beta.1\n\n`2022-06-10`\n\n### 🆕 新增功能\n\n- 新增 `OverflowList` 组件 ([#1221](https://github.com/arco-design/arco-design-vue/pull/1221))\n\n"
  },
  {
    "path": "packages/web-vue/components/overflow-list/README.en-US.md",
    "content": "```yaml\nmeta:\n  type: Component\n  category: Data Display\ntitle: List\ndescription:\n```\n\n*Auto translate by google.*\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/from.md\n\n## API\n\n\n### `<overflow-list>` Props\n\n|Attribute|Description|Type|Default|\n|---|---|---|:---:|\n|min|Minimum number of elements to display|`number`|`0`|\n|margin|Item Margin|`number`|`8`|\n|from|Overflow From|`'start' \\| 'end'`|`'end'`|\n### `<overflow-list>` Events\n\n|Event Name|Description|Parameters|\n|---|---|---|\n|change|Triggered when the overflow quantity changes|value: `number`|\n### `<overflow-list>` Slots\n\n|Slot Name|Description|Parameters|\n|---|---|---|\n|overflow|Overflow|number: `number`|\n\n\n\n"
  },
  {
    "path": "packages/web-vue/components/overflow-list/README.zh-CN.md",
    "content": "```yaml\nmeta:\n  type: 组件\n  category: 其他\ntitle: 折叠列表 OverflowList\ndescription:\n```\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/from.md\n\n## API\n\n\n### `<overflow-list>` Props\n\n|参数名|描述|类型|默认值|\n|---|---|---|:---:|\n|min|最少展示的元素个数|`number`|`0`|\n|margin|项目间隔|`number`|`8`|\n|from|折叠方向|`'start' \\| 'end'`|`'end'`|\n### `<overflow-list>` Events\n\n|事件名|描述|参数|\n|---|---|---|\n|change|溢出数量改变时触发|value: `number`|\n### `<overflow-list>` Slots\n\n|插槽名|描述|参数|\n|---|:---:|---|\n|overflow|折叠元素|number: `number`|\n\n\n\n"
  },
  {
    "path": "packages/web-vue/components/overflow-list/TEMPLATE.md",
    "content": "## zh-CN\n```yaml\nmeta:\n  type: 组件\n  category: 其他\ntitle: 折叠列表 OverflowList\ndescription:\n```\n---\n## en-US\n```yaml\nmeta:\n  type: Component\n  category: Data Display\ntitle: List\ndescription:\n```\n---\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/from.md\n\n## API\n\n%%API(overflow-list.tsx)%%\n\n"
  },
  {
    "path": "packages/web-vue/components/overflow-list/__demo__/basic.md",
    "content": "```yaml\ntitle:\n  zh-CN: 基本使用\n  en-US: Basic Usage\n```\n\n## zh-CN\n\n折叠列表的基本使用方法。\n\n---\n\n## en-US\n\nBasic usage of the overflow-list.\n\n---\n\n```vue\n<template>\n  <a-form auto-label-width>\n    <a-form-item label=\"Tag Number\">\n      <a-input-number v-model=\"number\" :min=\"0\" :max=\"20\" style=\"width: 200px\"/>\n    </a-form-item>\n    <a-form-item label=\"List Width\">\n      <a-slider v-model=\"width\" :min=\"0\" :max=\"800\" />\n    </a-form-item>\n  </a-form>\n  <div :style=\"{width:`${width}px`,marginTop:'20px'}\">\n    <a-overflow-list>\n      <div>DIV Element</div>\n      <a-tag v-for=\"item of tags\" :key=\"item\">Tag{{item}}</a-tag>\n    </a-overflow-list>\n  </div>\n</template>\n\n<script>\nimport { computed, ref } from 'vue';\n\nexport default {\n  setup() {\n    const width = ref(500);\n    const number = ref(10);\n    const tags = computed(() => Array.from({length: number.value}, (_, idx) => idx + 1));\n\n    return {\n      width,\n      number,\n      tags\n    }\n  }\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/overflow-list/__demo__/from.md",
    "content": "```yaml\ntitle:\n  zh-CN: 折叠方向\n  en-US: Overflow From\n```\n\n## zh-CN\n\n通过 `from` 属性可以设置折叠的方向。\n\n---\n\n## en-US\n\nThe folding direction can be set via the `from` property.\n\n---\n\n```vue\n<template>\n  <a-form auto-label-width>\n    <a-form-item label=\"Tag Number\">\n      <a-input-number v-model=\"number\" :min=\"0\" :max=\"20\" style=\"width: 200px\"/>\n    </a-form-item>\n    <a-form-item label=\"List Width\">\n      <a-slider v-model=\"width\" :min=\"0\" :max=\"800\" />\n    </a-form-item>\n  </a-form>\n  <div :style=\"{width:`${width}px`,marginTop:'20px'}\">\n    <a-overflow-list from=\"start\">\n      <div>DIV Element</div>\n      <a-tag v-for=\"item of tags\" :key=\"item\">Tag{{item}}</a-tag>\n    </a-overflow-list>\n  </div>\n</template>\n\n<script>\nimport { computed, ref } from 'vue';\n\nexport default {\n  setup() {\n    const width = ref(500);\n    const number = ref(10);\n    const tags = computed(() => Array.from({length: number.value}, (_, idx) => idx + 1));\n\n    return {\n      width,\n      number,\n      tags\n    }\n  }\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/overflow-list/index.ts",
    "content": "import type { App } from 'vue';\nimport type { ArcoOptions } from '../_utils/types';\nimport { setGlobalConfig, getComponentPrefix } from '../_utils/global-config';\nimport _OverflowList from './overflow-list';\n\nconst OverflowList = Object.assign(_OverflowList, {\n  install: (app: App, options?: ArcoOptions) => {\n    setGlobalConfig(app, options);\n    const componentPrefix = getComponentPrefix(options);\n\n    app.component(componentPrefix + _OverflowList.name, _OverflowList);\n  },\n});\n\nexport type OverflowListInstance = InstanceType<typeof _OverflowList>;\n\nexport default OverflowList;\n"
  },
  {
    "path": "packages/web-vue/components/overflow-list/overflow-list.tsx",
    "content": "import type { PropType, VNode } from 'vue';\nimport {\n  computed,\n  defineComponent,\n  mergeProps,\n  onMounted,\n  ref,\n  watch,\n} from 'vue';\nimport ResizeObserver from '../_components/resize-observer-v2';\nimport { getAllElements } from '../_utils/vue-utils';\nimport { getPrefixCls } from '../_utils/global-config';\nimport Tag from '../tag';\nimport { getReverse } from '../_utils/array';\n\nexport default defineComponent({\n  name: 'OverflowList',\n  props: {\n    /**\n     * @zh 最少展示的元素个数\n     * @en Minimum number of elements to display\n     */\n    min: {\n      type: Number,\n      default: 0,\n    },\n    /**\n     * @zh 项目间隔\n     * @en Item Margin\n     */\n    margin: {\n      type: Number,\n      default: 8,\n    },\n    /**\n     * @zh 折叠方向\n     * @en Overflow From\n     */\n    from: {\n      type: String as PropType<'start' | 'end'>,\n      default: 'end',\n    },\n  },\n  emits: {\n    /**\n     * @zh 溢出数量改变时触发\n     * @en Triggered when the overflow quantity changes\n     * @param {number} value\n     */\n    change: (value: number) => true,\n  },\n  /**\n   * @zh 折叠元素\n   * @en Overflow\n   * @slot overflow\n   * @binding {number} number\n   */\n  setup(props, { emit, slots }) {\n    const prefixCls = getPrefixCls('overflow-list');\n\n    const listRef = ref<HTMLElement>();\n    const overflowRef = ref<HTMLElement>();\n    const spacerRef = ref<HTMLElement>();\n    const children: { value?: VNode[] } = {};\n    const itemWidths: number[] = [];\n\n    const total = ref(0);\n    const overflowNumber = ref(0);\n    const showOverflow = computed(() => overflowNumber.value > 0);\n    const nextWidth = ref(0);\n\n    const isStart = computed(() => props.from === 'start');\n\n    watch(total, (cur, pre) => {\n      if (overflowNumber.value > 0) {\n        overflowNumber.value += cur - pre;\n        if (overflowNumber.value < 0) {\n          overflowNumber.value = 0;\n        }\n      }\n    });\n\n    watch(overflowNumber, (val) => {\n      emit('change', val);\n    });\n\n    const onResize = () => {\n      if (listRef.value && children.value && spacerRef.value) {\n        const spacerWidth = spacerRef.value.offsetWidth;\n        if (\n          spacerWidth > 1 &&\n          (overflowNumber.value === 0 || spacerWidth < nextWidth.value)\n        ) {\n          return;\n        }\n\n        // get new item width\n        for (let i = 0; i < children.value.length; i++) {\n          const element = children.value[i].el as HTMLElement;\n          if (element && element.offsetWidth) {\n            itemWidths[i] = element.offsetWidth + props.margin;\n          }\n        }\n\n        let remainingWidth =\n          listRef.value.clientWidth -\n          (overflowRef.value?.offsetWidth ?? 0) -\n          (isStart.value ? props.margin : 0);\n\n        const _itemWidths = isStart.value ? getReverse(itemWidths) : itemWidths;\n        let count = 0;\n        for (let i = 0; i < _itemWidths.length; i++) {\n          const itemWidth = _itemWidths[i] ?? 0;\n          if (itemWidth < remainingWidth - 1) {\n            remainingWidth -= itemWidth;\n            count += 1;\n          } else {\n            nextWidth.value = itemWidth;\n            break;\n          }\n        }\n        if (count < props.min && props.min < total.value) {\n          count = props.min;\n        }\n        if (overflowNumber.value !== total.value - count) {\n          overflowNumber.value = total.value - count;\n        }\n      }\n    };\n\n    watch(showOverflow, () => onResize(), { flush: 'post' });\n\n    onMounted(() => {\n      if (spacerRef.value && spacerRef.value.offsetWidth < 1) {\n        onResize();\n      }\n    });\n\n    const renderOverflow = () => {\n      const style = isStart.value\n        ? { marginRight: `${props.margin}px` }\n        : undefined;\n\n      return (\n        <div ref={overflowRef} class={`${prefixCls}-overflow`} style={style}>\n          {slots.overflow?.({ number: overflowNumber.value }) ?? (\n            <Tag>+{overflowNumber.value}</Tag>\n          )}\n        </div>\n      );\n    };\n\n    return () => {\n      children.value = getAllElements(slots.default?.());\n\n      if (total.value !== children.value.length) {\n        total.value = children.value.length;\n        itemWidths.length = total.value;\n      }\n      let visibleChildren = children.value;\n      if (overflowNumber.value > 0) {\n        visibleChildren = isStart.value\n          ? children.value.slice(overflowNumber.value)\n          : children.value.slice(0, -overflowNumber.value);\n      }\n      const withMarginNumber =\n        overflowNumber.value === 0 || isStart.value\n          ? visibleChildren.length - 1\n          : visibleChildren.length;\n      for (let i = 0; i < withMarginNumber; i++) {\n        visibleChildren[i].props = mergeProps(visibleChildren[i].props ?? {}, {\n          style: { marginRight: `${props.margin}px` },\n        });\n      }\n\n      return (\n        <div ref={listRef} class={prefixCls}>\n          {isStart.value && overflowNumber.value > 0 && renderOverflow()}\n          {visibleChildren}\n          {!isStart.value && overflowNumber.value > 0 && renderOverflow()}\n          <ResizeObserver onResize={onResize}>\n            <div ref={spacerRef} class={`${prefixCls}-spacer`} />\n          </ResizeObserver>\n        </div>\n      );\n    };\n  },\n});\n"
  },
  {
    "path": "packages/web-vue/components/overflow-list/style/index.less",
    "content": "@import '../../style/theme/index.less';\n\n@overflow-prefix-cls: ~'@{prefix}-overflow-list';\n\n.@{overflow-prefix-cls} {\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n\n  > *:not(:last-child) {\n    flex-shrink: 0;\n  }\n\n  &-spacer {\n    flex: 1;\n    min-width: 0;\n    height: 1px;\n  }\n}\n"
  },
  {
    "path": "packages/web-vue/components/overflow-list/style/index.ts",
    "content": "import '../../style/index.less';\nimport './index.less';\n"
  },
  {
    "path": "packages/web-vue/components/page-header/CHANGELOG.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.36.0\n\n`2022-09-02`\n\n### 🆕 Feature\n\n- support custom back icon ([#1499](https://github.com/arco-design/arco-design-vue/pull/1499))\n\n\n## 2.6.1\n\n`2021-11-24`\n\n### 🐛 BugFix\n\n- Fix the problem that the dividing line is still displayed when there is no subtitle ([#224](https://github.com/arco-design/arco-design-vue/pull/224))\n\n"
  },
  {
    "path": "packages/web-vue/components/page-header/CHANGELOG.zh-CN.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.36.0\n\n`2022-09-02`\n\n### 🆕 新增功能\n\n- 支持自定义返回按钮 ([#1499](https://github.com/arco-design/arco-design-vue/pull/1499))\n\n\n## 2.6.1\n\n`2021-11-24`\n\n### 🐛 问题修复\n\n- 修复没有子标题时仍然显示分割线的问题 ([#224](https://github.com/arco-design/arco-design-vue/pull/224))\n\n"
  },
  {
    "path": "packages/web-vue/components/page-header/README.en-US.md",
    "content": "```yaml\nmeta:\n  type: Component\n  category: Navigation\ntitle: PageHeader\ndescription: The page header is located at the top of the page container and serves as a content overview and guide page-level operations. Including breadcrumbs, titles, etc.\n```\n\n*Auto translate by google.*\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/breadcrumb.md\n\n@import ./__demo__/transparent.md\n\n@import ./__demo__/content.md\n\n## API\n\n\n### `<page-header>` Props\n\n|Attribute|Description|Type|Default|\n|---|---|---|:---:|\n|title|Main title|`string`|`-`|\n|subtitle|Subtitle|`string`|`-`|\n|show-back|Whether to show the back button|`boolean`|`true`|\n### `<page-header>` Events\n\n|Event Name|Description|Parameters|\n|---|---|---|\n|back|Emitted when the back button is clicked|event: `Event`|\n### `<page-header>` Slots\n\n|Slot Name|Description|Parameters|version|\n|---|---|---|:---|\n|breadcrumb|Breadcrumb|-||\n|back-icon|Back icon|-|2.36.0|\n|title|Main title|-||\n|subtitle|Subtitle|-||\n|extra|Extra content|-||\n\n\n"
  },
  {
    "path": "packages/web-vue/components/page-header/README.zh-CN.md",
    "content": "```yaml\nmeta:\n  type: 组件\n  category: 导航\ntitle: 页头 PageHeader\ndescription: 页头位于页容器顶部，起到了内容概览和引导页级操作的作用。包括面包屑、标题等内容。\n```\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/breadcrumb.md\n\n@import ./__demo__/transparent.md\n\n@import ./__demo__/content.md\n\n## API\n\n\n### `<page-header>` Props\n\n|参数名|描述|类型|默认值|\n|---|---|---|:---:|\n|title|页头的主标题|`string`|`-`|\n|subtitle|页头的次标题|`string`|`-`|\n|show-back|是否显示返回按钮|`boolean`|`true`|\n### `<page-header>` Events\n\n|事件名|描述|参数|\n|---|---|---|\n|back|点击返回按钮时触发|event: `Event`|\n### `<page-header>` Slots\n\n|插槽名|描述|参数|版本|\n|---|:---:|---|:---|\n|breadcrumb|面包屑|-||\n|back-icon|返回按钮|-|2.36.0|\n|title|主标题|-||\n|subtitle|次标题|-||\n|extra|额外的展示内容|-||\n\n\n"
  },
  {
    "path": "packages/web-vue/components/page-header/TEMPLATE.md",
    "content": "## zh-CN\n```yaml\nmeta:\n  type: 组件\n  category: 导航\ntitle: 页头 PageHeader\ndescription: 页头位于页容器顶部，起到了内容概览和引导页级操作的作用。包括面包屑、标题等内容。\n```\n---\n## en-US\n```yaml\nmeta:\n  type: Component\n  category: Navigation\ntitle: PageHeader\ndescription: The page header is located at the top of the page container and serves as a content overview and guide page-level operations. Including breadcrumbs, titles, etc.\n```\n---\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/breadcrumb.md\n\n@import ./__demo__/transparent.md\n\n@import ./__demo__/content.md\n\n## API\n\n%%API(page-header.vue)%%\n"
  },
  {
    "path": "packages/web-vue/components/page-header/__demo__/basic.md",
    "content": "```yaml\ntitle:\n  zh-CN: 基本用法\n  en-US: Basic Usage\n```\n\n## zh-CN\n\n基础页头，适合使用在需要简单描述的场景。默认是没有底色的。\n\n---\n\n## en-US\n\nThe basic page header is suitable for use in scenarios that require a simple description. The default is no background color.\n\n---\n\n```vue\n<template>\n  <div :style=\"{ background: 'var(--color-fill-2)', padding: '28px' }\" >\n    <a-page-header\n      :style=\"{ background: 'var(--color-bg-2)' }\"\n      title=\"ArcoDesign\"\n      subtitle=\"ArcoDesign Vue 2.0\"\n    >\n      <template #extra>\n        <a-radio-group type=\"button\" default-value=\"large\">\n          <a-radio value=\"mini\">Mini</a-radio>\n          <a-radio value=\"small\">Small</a-radio>\n          <a-radio value=\"large\">Large</a-radio>\n        </a-radio-group>\n      </template>\n    </a-page-header>\n  </div>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/page-header/__demo__/breadcrumb.md",
    "content": "```yaml\ntitle:\n  zh-CN: 带有面包屑\n  en-US: Breadcrumb\n```\n\n## zh-CN\n\n在页头中展示面包屑。\n\n---\n\n## en-US\n\nShow breadcrumbs in the header.\n\n---\n\n```vue\n<template>\n  <div :style=\"{ background: 'var(--color-fill-2)', padding: '28px' }\" >\n    <a-page-header\n      :style=\"{ background: 'var(--color-bg-2)' }\"\n      title=\"ArcoDesign\"\n      subtitle=\"ArcoDesign Vue 2.0\"\n      :show-back=\"false\"\n    >\n      <template #breadcrumb>\n        <a-breadcrumb>\n          <a-breadcrumb-item>Home</a-breadcrumb-item>\n          <a-breadcrumb-item>Channel</a-breadcrumb-item>\n          <a-breadcrumb-item>News</a-breadcrumb-item>\n        </a-breadcrumb>\n      </template>\n      <template #extra>\n        <a-radio-group type=\"button\" default-value=\"large\">\n          <a-radio value=\"mini\">Mini</a-radio>\n          <a-radio value=\"small\">Small</a-radio>\n          <a-radio value=\"large\">Large</a-radio>\n        </a-radio-group>\n      </template>\n    </a-page-header>\n  </div>\n</template>\n\n```\n"
  },
  {
    "path": "packages/web-vue/components/page-header/__demo__/content.md",
    "content": "```yaml\ntitle:\n  zh-CN: 组合示例\n  en-US: Content\n```\n\n## zh-CN\n\n页头的完整示例。\n\n---\n\n## en-US\n\nA complete example of the header.\n\n---\n\n```vue\n<template>\n  <div :style=\"{ background: 'var(--color-fill-2)', padding: '28px' }\" >\n    <a-page-header\n      :style=\"{ background: 'var(--color-bg-2)' }\"\n      title=\"ArcoDesign\"\n    >\n      <template #breadcrumb>\n        <a-breadcrumb>\n          <a-breadcrumb-item>Home</a-breadcrumb-item>\n          <a-breadcrumb-item>Channel</a-breadcrumb-item>\n          <a-breadcrumb-item>News</a-breadcrumb-item>\n        </a-breadcrumb>\n      </template>\n      <template #subtitle>\n        <a-space>\n          <span>ArcoDesign Vue 2.0</span>\n          <a-tag color=\"red\" size=\"small\">Default</a-tag>\n        </a-space>\n      </template>\n      <template #extra>\n        <a-space>\n          <a-button>Cancel</a-button>\n          <a-button type=\"primary\">Save</a-button>\n        </a-space>\n      </template>\n      <p>\n        For other uses, see Design\n      </p>\n      <p>\n        A design is a plan or specification for the construction of an object or system or for the\n        implementation of an activity or process, or the result of that plan or specification in the\n        form of a prototype, product or process. The verb to design expresses the process of\n        developing a design. In some cases, the direct construction of an object without an explicit\n        prior plan (such as in craftwork, some engineering, coding, and graphic design) may also be\n        considered to be a design activity. The design usually has to satisfy certain goals and\n        constraints, may take into account aesthetic, functional, economic, or socio-political\n        considerations, and is expected to interact with a certain environment. Major examples of\n        designs include architectural blueprints,engineering drawings, business processes, circuit\n        diagrams, and sewing patterns.Major examples of designs include architectural\n        blueprints,engineering drawings, business processes, circuit diagrams, and sewing patterns.\n      </p>\n    </a-page-header>\n  </div>\n</template>\n\n<script>\nexport default {\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/page-header/__demo__/transparent.md",
    "content": "```yaml\ntitle:\n  zh-CN: 透明底色\n  en-US: Transparent\n```\n\n## zh-CN\n\n默认是没有底色的，如果有需要可以通过`style`或类名设置不同底色。\n\n---\n\n## en-US\n\nThe default is no background color, if necessary, you can set a different background color by `style` or class name.\n\n---\n\n```vue\n<template>\n  <div :style=\"{\n    backgroundImage: 'radial-gradient(var(--color-fill-3) 1px, rgba(0, 0, 0, 0) 1px)',\n    backgroundSize: '16px 16px',\n    padding: '28px',\n  }\">\n    <a-page-header title=\"ArcoDesign\" subtitle=\"ArcoDesign Vue 2.0\">\n      <template #breadcrumb>\n        <a-breadcrumb>\n          <a-breadcrumb-item>Home</a-breadcrumb-item>\n          <a-breadcrumb-item>Channel</a-breadcrumb-item>\n          <a-breadcrumb-item>News</a-breadcrumb-item>\n        </a-breadcrumb>\n      </template>\n      <template #extra>\n        <a-radio-group type=\"button\">\n          <a-radio value=\"mini\">Mini</a-radio>\n          <a-radio value=\"small\">Small</a-radio>\n          <a-radio value=\"large\">Large</a-radio>\n        </a-radio-group>\n      </template>\n    </a-page-header>\n  </div>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/page-header/__test__/__snapshots__/demo.test.ts.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`<page-header> demo: render [basic] correctly 1`] = `\n\"<div style=\\\\\"padding: 28px;\\\\\">\n  <div class=\\\\\"arco-page-header\\\\\">\n    <div class=\\\\\"arco-page-header-wrapper\\\\\">\n      <!--v-if-->\n      <div class=\\\\\"arco-page-header-header\\\\\"><span class=\\\\\"arco-page-header-main\\\\\"><span class=\\\\\"arco-icon-hover arco-page-header-icon-hover arco-page-header-back-btn\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-left\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M32 8.4 16.444 23.956 32 39.513\\\\\"></path></svg></span><span class=\\\\\"arco-page-header-title\\\\\">ArcoDesign</span><span class=\\\\\"arco-page-header-divider\\\\\"></span><span class=\\\\\"arco-page-header-subtitle\\\\\">ArcoDesign Vue 2.0</span></span><span class=\\\\\"arco-page-header-extra\\\\\"><span class=\\\\\"arco-radio-group-button arco-radio-group-size-medium arco-radio-group-direction-horizontal\\\\\"><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"mini\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">Mini</span></label><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"small\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">Small</span></label><label class=\\\\\"arco-radio-button arco-radio-checked\\\\\"><input type=\\\\\"radio\\\\\" checked=\\\\\"\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"large\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">Large</span></label></span></span></div>\n    </div>\n    <!--v-if-->\n  </div>\n</div>\"\n`;\n\nexports[`<page-header> demo: render [breadcrumb] correctly 1`] = `\n\"<div style=\\\\\"padding: 28px;\\\\\">\n  <div class=\\\\\"arco-page-header arco-page-header-with-breadcrumb\\\\\">\n    <div class=\\\\\"arco-page-header-wrapper\\\\\">\n      <div class=\\\\\"arco-page-header-breadcrumb\\\\\">\n        <div role=\\\\\"list\\\\\" class=\\\\\"arco-breadcrumb\\\\\">\n          <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-breadcrumb-item\\\\\">Home\n            <!---->\n          </div>\n          <div aria-hidden=\\\\\"true\\\\\" class=\\\\\"arco-breadcrumb-item-separator\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-oblique-line\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n              <path d=\\\\\"M29.506 6.502 18.493 41.498\\\\\"></path>\n            </svg></div>\n          <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-breadcrumb-item\\\\\">Channel\n            <!---->\n          </div>\n          <div aria-hidden=\\\\\"true\\\\\" class=\\\\\"arco-breadcrumb-item-separator\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-oblique-line\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n              <path d=\\\\\"M29.506 6.502 18.493 41.498\\\\\"></path>\n            </svg></div>\n          <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-breadcrumb-item\\\\\">News\n            <!---->\n          </div>\n          <!---->\n        </div>\n      </div>\n      <div class=\\\\\"arco-page-header-header\\\\\"><span class=\\\\\"arco-page-header-main\\\\\"><!--v-if--><span class=\\\\\"arco-page-header-title\\\\\">ArcoDesign</span><span class=\\\\\"arco-page-header-divider\\\\\"></span><span class=\\\\\"arco-page-header-subtitle\\\\\">ArcoDesign Vue 2.0</span></span><span class=\\\\\"arco-page-header-extra\\\\\"><span class=\\\\\"arco-radio-group-button arco-radio-group-size-medium arco-radio-group-direction-horizontal\\\\\"><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"mini\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">Mini</span></label><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"small\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">Small</span></label><label class=\\\\\"arco-radio-button arco-radio-checked\\\\\"><input type=\\\\\"radio\\\\\" checked=\\\\\"\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"large\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">Large</span></label></span></span></div>\n    </div>\n    <!--v-if-->\n  </div>\n</div>\"\n`;\n\nexports[`<page-header> demo: render [content] correctly 1`] = `\n\"<div style=\\\\\"padding: 28px;\\\\\">\n  <div class=\\\\\"arco-page-header arco-page-header-with-breadcrumb arco-page-header-with-content\\\\\">\n    <div class=\\\\\"arco-page-header-wrapper\\\\\">\n      <div class=\\\\\"arco-page-header-breadcrumb\\\\\">\n        <div role=\\\\\"list\\\\\" class=\\\\\"arco-breadcrumb\\\\\">\n          <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-breadcrumb-item\\\\\">Home\n            <!---->\n          </div>\n          <div aria-hidden=\\\\\"true\\\\\" class=\\\\\"arco-breadcrumb-item-separator\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-oblique-line\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n              <path d=\\\\\"M29.506 6.502 18.493 41.498\\\\\"></path>\n            </svg></div>\n          <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-breadcrumb-item\\\\\">Channel\n            <!---->\n          </div>\n          <div aria-hidden=\\\\\"true\\\\\" class=\\\\\"arco-breadcrumb-item-separator\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-oblique-line\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n              <path d=\\\\\"M29.506 6.502 18.493 41.498\\\\\"></path>\n            </svg></div>\n          <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-breadcrumb-item\\\\\">News\n            <!---->\n          </div>\n          <!---->\n        </div>\n      </div>\n      <div class=\\\\\"arco-page-header-header\\\\\"><span class=\\\\\"arco-page-header-main\\\\\"><span class=\\\\\"arco-icon-hover arco-page-header-icon-hover arco-page-header-back-btn\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-left\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M32 8.4 16.444 23.956 32 39.513\\\\\"></path></svg></span><span class=\\\\\"arco-page-header-title\\\\\">ArcoDesign</span><span class=\\\\\"arco-page-header-divider\\\\\"></span><span class=\\\\\"arco-page-header-subtitle\\\\\"><div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 8px; row-gap: 8px;\\\\\"><!----><div class=\\\\\"arco-space-item\\\\\"><span>ArcoDesign Vue 2.0</span></div>\n      <!---->\n      <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-tag arco-tag-size-small arco-tag-red arco-tag-checked\\\\\"><!--v-if-->Default<!--v-if--><!--v-if--></span></div>\n    </div></span></span><span class=\\\\\"arco-page-header-extra\\\\\"><div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 8px; row-gap: 8px;\\\\\"><!----><div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\"><!--v-if-->Cancel</button></div><!----><div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\"><!--v-if-->Save</button></div></div></span>\n  </div>\n</div>\n<div class=\\\\\"arco-page-header-content\\\\\">\n  <p> For other uses, see Design </p>\n  <p> A design is a plan or specification for the construction of an object or system or for the implementation of an activity or process, or the result of that plan or specification in the form of a prototype, product or process. The verb to design expresses the process of developing a design. In some cases, the direct construction of an object without an explicit prior plan (such as in craftwork, some engineering, coding, and graphic design) may also be considered to be a design activity. The design usually has to satisfy certain goals and constraints, may take into account aesthetic, functional, economic, or socio-political considerations, and is expected to interact with a certain environment. Major examples of designs include architectural blueprints,engineering drawings, business processes, circuit diagrams, and sewing patterns.Major examples of designs include architectural blueprints,engineering drawings, business processes, circuit diagrams, and sewing patterns. </p>\n</div>\n</div>\n</div>\"\n`;\n\nexports[`<page-header> demo: render [transparent] correctly 1`] = `\n\"<div style=\\\\\"background-size: 16px 16px; padding: 28px;\\\\\">\n  <div class=\\\\\"arco-page-header arco-page-header-with-breadcrumb\\\\\">\n    <div class=\\\\\"arco-page-header-wrapper\\\\\">\n      <div class=\\\\\"arco-page-header-breadcrumb\\\\\">\n        <div role=\\\\\"list\\\\\" class=\\\\\"arco-breadcrumb\\\\\">\n          <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-breadcrumb-item\\\\\">Home\n            <!---->\n          </div>\n          <div aria-hidden=\\\\\"true\\\\\" class=\\\\\"arco-breadcrumb-item-separator\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-oblique-line\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n              <path d=\\\\\"M29.506 6.502 18.493 41.498\\\\\"></path>\n            </svg></div>\n          <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-breadcrumb-item\\\\\">Channel\n            <!---->\n          </div>\n          <div aria-hidden=\\\\\"true\\\\\" class=\\\\\"arco-breadcrumb-item-separator\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-oblique-line\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n              <path d=\\\\\"M29.506 6.502 18.493 41.498\\\\\"></path>\n            </svg></div>\n          <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-breadcrumb-item\\\\\">News\n            <!---->\n          </div>\n          <!---->\n        </div>\n      </div>\n      <div class=\\\\\"arco-page-header-header\\\\\"><span class=\\\\\"arco-page-header-main\\\\\"><span class=\\\\\"arco-icon-hover arco-page-header-icon-hover arco-page-header-back-btn\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-left\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M32 8.4 16.444 23.956 32 39.513\\\\\"></path></svg></span><span class=\\\\\"arco-page-header-title\\\\\">ArcoDesign</span><span class=\\\\\"arco-page-header-divider\\\\\"></span><span class=\\\\\"arco-page-header-subtitle\\\\\">ArcoDesign Vue 2.0</span></span><span class=\\\\\"arco-page-header-extra\\\\\"><span class=\\\\\"arco-radio-group-button arco-radio-group-size-medium arco-radio-group-direction-horizontal\\\\\"><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"mini\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">Mini</span></label><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"small\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">Small</span></label><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"large\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">Large</span></label></span></span></div>\n    </div>\n    <!--v-if-->\n  </div>\n</div>\"\n`;\n"
  },
  {
    "path": "packages/web-vue/components/page-header/__test__/demo.test.ts",
    "content": "import demoTest from '../../../scripts/demo-test';\n\ndemoTest('page-header');\n"
  },
  {
    "path": "packages/web-vue/components/page-header/__test__/index.test.ts",
    "content": "import { mount } from '@vue/test-utils';\nimport PageHeader from '../index';\n\ndescribe('PageHeader', () => {\n  test('should emit back event', async () => {\n    const wrapper = mount(PageHeader, {\n      props: {\n        title: 'ArcoDesign',\n      },\n    });\n\n    await wrapper.find('.arco-page-header-back-btn').trigger('click');\n    expect(wrapper.emitted('back')).toHaveLength(1);\n  });\n});\n"
  },
  {
    "path": "packages/web-vue/components/page-header/index.ts",
    "content": "import type { App } from 'vue';\nimport type { ArcoOptions } from '../_utils/types';\nimport { setGlobalConfig, getComponentPrefix } from '../_utils/global-config';\nimport _PageHeader from './page-header.vue';\n\nconst PageHeader = Object.assign(_PageHeader, {\n  install: (app: App, options?: ArcoOptions) => {\n    setGlobalConfig(app, options);\n    const componentPrefix = getComponentPrefix(options);\n\n    app.component(componentPrefix + _PageHeader.name, _PageHeader);\n  },\n});\n\nexport type PageHeaderInstance = InstanceType<typeof _PageHeader>;\n\nexport default PageHeader;\n"
  },
  {
    "path": "packages/web-vue/components/page-header/page-header.vue",
    "content": "<template>\n  <div :class=\"cls\">\n    <div :class=\"`${prefixCls}-wrapper`\">\n      <div v-if=\"$slots.breadcrumb\" :class=\"`${prefixCls}-breadcrumb`\">\n        <slot name=\"breadcrumb\" />\n      </div>\n      <div :class=\"`${prefixCls}-header`\">\n        <span :class=\"`${prefixCls}-main`\">\n          <a-icon-hover\n            v-if=\"showBack\"\n            :class=\"`${prefixCls}-back-btn`\"\n            :prefix=\"prefixCls\"\n            @click=\"handleBack\"\n          >\n            <slot name=\"back-icon\">\n              <icon-left />\n            </slot>\n          </a-icon-hover>\n          <span :class=\"`${prefixCls}-title`\">\n            <slot name=\"title\">{{ title }}</slot>\n          </span>\n          <span\n            v-if=\"$slots.subtitle || subtitle\"\n            :class=\"`${prefixCls}-divider`\"\n          />\n          <span\n            v-if=\"$slots.subtitle || subtitle\"\n            :class=\"`${prefixCls}-subtitle`\"\n          >\n            <slot name=\"subtitle\">{{ subtitle }}</slot>\n          </span>\n        </span>\n        <span v-if=\"$slots.extra\" :class=\"`${prefixCls}-extra`\">\n          <slot name=\"extra\" />\n        </span>\n      </div>\n    </div>\n    <div v-if=\"$slots.default\" :class=\"`${prefixCls}-content`\">\n      <slot />\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent } from 'vue';\nimport { getPrefixCls } from '../_utils/global-config';\nimport AIconHover from '../_components/icon-hover.vue';\nimport IconLeft from '../icon/icon-left';\n\nexport default defineComponent({\n  name: 'PageHeader',\n  components: { AIconHover, IconLeft },\n  props: {\n    /**\n     * @zh 页头的主标题\n     * @en Main title\n     */\n    title: String,\n    /**\n     * @zh 页头的次标题\n     * @en Subtitle\n     */\n    subtitle: String,\n    /**\n     * @zh 是否显示返回按钮\n     * @en Whether to show the back button\n     */\n    showBack: {\n      type: Boolean,\n      default: true,\n    },\n  },\n  emits: [\n    /**\n     * @zh 点击返回按钮时触发\n     * @en Emitted when the back button is clicked\n     * @property {Event} event\n     */\n    'back',\n  ],\n  /**\n   * @zh 返回按钮\n   * @en Back icon\n   * @slot back-icon\n   * @version 2.36.0\n   */\n  /**\n   * @zh 主标题\n   * @en Main title\n   * @slot title\n   */\n  /**\n   * @zh 次标题\n   * @en Subtitle\n   * @slot subtitle\n   */\n  /**\n   * @zh 面包屑\n   * @en Breadcrumb\n   * @slot breadcrumb\n   */\n  /**\n   * @zh 额外的展示内容\n   * @en Extra content\n   * @slot extra\n   */\n  setup(props, { emit, slots }) {\n    const prefixCls = getPrefixCls('page-header');\n\n    const handleBack = (e: Event) => {\n      emit('back', e);\n    };\n\n    const cls = computed(() => [\n      prefixCls,\n      {\n        [`${prefixCls}-with-breadcrumb`]: Boolean(slots.breadcrumb),\n        [`${prefixCls}-with-content`]: Boolean(slots.default),\n      },\n    ]);\n\n    return {\n      prefixCls,\n      cls,\n      handleBack,\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/page-header/style/index.less",
    "content": "@import '../../style/mixins/index.less';\n@import './token.less';\n\n@page-header-prefix-cls: ~'@{prefix}-page-header';\n\n.@{page-header-prefix-cls} {\n  padding: @page-header-padding-vertical 0;\n\n  &-breadcrumb + &-header {\n    margin-top: @page-header-margin-breadcrumb-bottom;\n  }\n\n  &-wrapper {\n    padding-right: @page-header-padding-right;\n    padding-left: @page-header-padding-left;\n  }\n\n  // 头部\n  &-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    line-height: @page-header-line-height;\n\n    &-left {\n      display: flex;\n      align-items: center;\n    }\n  }\n\n  &-main {\n    display: flex;\n    align-items: center;\n    // 最小高度避免按钮hover下背景被hidden\n    min-height: @page-header-size-back-icon-bg_hover;\n\n    // 带有返回按钮时，避免 overflow:hidden 导致返回按钮hover状态背景色显示不全\n    &-with-back {\n      margin-left: (@page-header-size-back-icon / 2) -\n        (@page-header-size-back-icon-bg_hover / 2);\n      padding-left: (@page-header-size-back-icon-bg_hover / 2) -\n        (@page-header-size-back-icon / 2);\n    }\n  }\n\n  &-extra {\n    overflow: hidden;\n    white-space: nowrap;\n  }\n\n  .icon-hover(@page-header-prefix-cls, @page-header-size-back-icon, @page-header-size-back-icon-bg_hover);\n\n  .icon-hover-bg(\n      @page-header-prefix-cls,\n      @page-header-color-back-icon-bg_hover\n    );\n\n  &-back-btn {\n    margin-right: @page-header-margin-back-icon-right;\n    color: @page-header-color-back-icon;\n    font-size: @page-header-size-back-icon;\n\n    &-icon {\n      position: relative;\n    }\n  }\n\n  &-title {\n    .text-ellipsis();\n\n    color: @page-header-color-title-text;\n    font-weight: @page-header-weight-title-text;\n    font-size: @page-header-size-title-text;\n  }\n\n  &-divider {\n    width: @page-header-size-divider-width;\n    height: @page-header-size-divider-height;\n    margin-right: @page-header-margin-divider-right;\n    margin-left: @page-header-margin-divider-left;\n    background-color: @page-header-color-divider-bg;\n  }\n\n  &-subtitle {\n    .text-ellipsis();\n\n    color: @page-header-color-sub-title-text;\n    font-size: @page-header-size-sub-title-text;\n  }\n\n  // 内容区\n  &-content {\n    padding: @page-header-padding-content-vertical\n      @page-header-padding-content-horizontal;\n    border-top: @page-header-border-header-width\n      @page-header-border-header-style @page-header-color-header-border;\n  }\n\n  &-footer {\n    padding: @page-header-padding-vertical @page-header-padding-right 0\n      @page-header-padding-left;\n  }\n\n  &-with-breadcrumb {\n    padding: @page-header-padding-vertical_breadcrumb 0;\n\n    .@{page-header-prefix-cls}-footer {\n      padding-top: @page-header-padding-vertical_breadcrumb;\n    }\n  }\n\n  &-with-content &-wrapper {\n    padding-bottom: @page-header-padding-vertical_breadcrumb;\n  }\n\n  &-with-footer {\n    padding-bottom: 0;\n  }\n\n  &-wrapper &-header {\n    flex-wrap: wrap;\n\n    .@{page-header-prefix-cls}-head-extra {\n      margin-top: @page-header-margin-breadcrumb-bottom;\n    }\n  }\n}\n"
  },
  {
    "path": "packages/web-vue/components/page-header/style/index.ts",
    "content": "import '../../style/index.less';\nimport './index.less';\n"
  },
  {
    "path": "packages/web-vue/components/page-header/style/token.less",
    "content": "@import '../../style/theme/index.less';\n\n@page-header-padding-left: @spacing-9;\n@page-header-padding-right: @spacing-8;\n@page-header-padding-vertical: @spacing-7;\n@page-header-padding-vertical_breadcrumb: @spacing-6;\n@page-header-color-back-icon: var(~'@{arco-cssvars-prefix}-color-text-2');\n@page-header-size-back-icon: @font-size-body-3;\n@page-header-margin-back-icon-right: @spacing-6;\n@page-header-line-height: @size-7;\n@page-header-color-title-text: var(~'@{arco-cssvars-prefix}-color-text-1');\n@page-header-weight-title-text: 600;\n@page-header-color-back-icon-bg_hover: var(~'@{arco-cssvars-prefix}-color-fill-2');\n@page-header-size-back-icon-bg_hover: 30px;\n@page-header-size-title-text: @font-size-title-2;\n\n@page-header-color-divider-bg: var(~'@{arco-cssvars-prefix}-color-fill-3');\n@page-header-size-divider-height: @size-4;\n@page-header-size-divider-width: 1px;\n@page-header-margin-divider-left: @spacing-6;\n@page-header-margin-divider-right: @spacing-6;\n\n@page-header-color-sub-title-text: var(~'@{arco-cssvars-prefix}-color-text-3');\n@page-header-size-sub-title-text: @font-size-body-3;\n@page-header-color-header-border: var(~'@{arco-cssvars-prefix}-color-neutral-3');\n@page-header-border-header-width: @border-1;\n@page-header-border-header-style: @border-solid;\n@page-header-padding-content-vertical: @spacing-8;\n@page-header-padding-content-horizontal: @spacing-10;\n@page-header-margin-breadcrumb-bottom: @spacing-2;\n"
  },
  {
    "path": "packages/web-vue/components/pagination/CHANGELOG.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.54.0\n\n`2023-12-15`\n\n### 🐛 BugFix\n\n- Fix the problem that the page number may be `0` ([#2828](https://github.com/arco-design/arco-design-vue/pull/2828))\n\n\n## 2.39.1\n\n`2022-11-25`\n\n### 🐛 BugFix\n\n- Fix the problem that the page number may exceed the number of pages when the pages become smaller ([#1879](https://github.com/arco-design/arco-design-vue/pull/1879))\n\n\n## 2.38.1\n\n`2022-11-04`\n\n### 🐛 BugFix\n\n- Fix jumper prompt warning problem ([#1822](https://github.com/arco-design/arco-design-vue/pull/1822))\n\n\n## 2.38.0-beta.2\n\n`2022-10-21`\n\n### 💎 Enhancement\n\n- Optimize number processing when entering page numbers ([#1750](https://github.com/arco-design/arco-design-vue/pull/1750))\n\n\n## 2.35.2\n\n`2022-08-29`\n\n### 💅 Style\n\n- Fix the problem that the display content is compressed ([#1579](https://github.com/arco-design/arco-design-vue/pull/1579))\n\n\n## 2.34.0\n\n`2022-07-29`\n\n### 🆕 Feature\n\n- Add autoAdjust property ([#1466](https://github.com/arco-design/arco-design-vue/pull/1466))\n\n\n## 2.27.0\n\n`2022-05-13`\n\n### 🐛 BugFix\n\n- Fix the problem that size is invalid in simple mode ([#1123](https://github.com/arco-design/arco-design-vue/pull/1123))\n\n\n## 2.24.0\n\n`2022-04-15`\n\n### 💅 Style\n\n- Add padding to pagination options ([#984](https://github.com/arco-design/arco-design-vue/pull/984))\n\n\n## 2.23.0\n\n`2022-04-08`\n\n### 💎 Enhancement\n\n- Optimize the page number change logic when switching pageSize ([#954](https://github.com/arco-design/arco-design-vue/pull/954))\n\n### 🆕 Feature\n\n- Added `jumper-prepend` and `jumper-append` slots ([#954](https://github.com/arco-design/arco-design-vue/pull/954))\n\n\n## 2.18.0-beta.2\n\n`2022-02-25`\n\n### 💅 Style\n\n- Fix the problem that the jumper text is not aligned under safari ([#736](https://github.com/arco-design/arco-design-vue/pull/736))\n\n\n## 2.13.0\n\n`2021-12-31`\n\n### 🐛 BugFix\n\n- Fix the problem that there is no clear value when the jump input box is out of focus ([#487](https://github.com/arco-design/arco-design-vue/pull/487))\n\n\n## 2.9.0\n\n`2021-12-03`\n\n### 🆕 Feature\n\n- Modify and add slots, support template customization ([#324](https://github.com/arco-design/arco-design-vue/pull/324))\n\n\n## 2.8.0\n\n`2021-12-01`\n\n### 🐛 BugFix\n\n- Fix the problem that the input box and the number selector are not disabled when the `disabled` property is set to true ([#297](https://github.com/arco-design/arco-design-vue/pull/297))\n\n\n## 2.7.0\n\n`2021-11-26`\n\n### 🆕 Feature\n\n- add `base-size` & `buffer-size` props ([#275](https://github.com/arco-design/arco-design-vue/pull/275))\n\n"
  },
  {
    "path": "packages/web-vue/components/pagination/CHANGELOG.zh-CN.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.54.0\n\n`2023-12-15`\n\n### 🐛 问题修复\n\n- 修复页码可能为 `0` 的问题 ([#2828](https://github.com/arco-design/arco-design-vue/pull/2828))\n\n\n## 2.39.1\n\n`2022-11-25`\n\n### 🐛 问题修复\n\n- 修复 pages 变小时，可能会出现页码超出页数的问题 ([#1879](https://github.com/arco-design/arco-design-vue/pull/1879))\n\n\n## 2.38.1\n\n`2022-11-04`\n\n### 🐛 问题修复\n\n- 修复 jumper 提示警告的问题 ([#1822](https://github.com/arco-design/arco-design-vue/pull/1822))\n\n\n## 2.38.0-beta.2\n\n`2022-10-21`\n\n### 💎 功能优化\n\n- 优化输入页码时的数字处理 ([#1750](https://github.com/arco-design/arco-design-vue/pull/1750))\n\n\n## 2.35.2\n\n`2022-08-29`\n\n### 💅 样式更新\n\n- 修复显示内容被压缩的问题 ([#1579](https://github.com/arco-design/arco-design-vue/pull/1579))\n\n\n## 2.34.0\n\n`2022-07-29`\n\n### 🆕 新增功能\n\n- 增加 autoAdjust 属性 ([#1466](https://github.com/arco-design/arco-design-vue/pull/1466))\n\n\n## 2.27.0\n\n`2022-05-13`\n\n### 🐛 问题修复\n\n- 修复 simple 模式下，size 失效的问题 ([#1123](https://github.com/arco-design/arco-design-vue/pull/1123))\n\n\n## 2.24.0\n\n`2022-04-15`\n\n### 💅 样式更新\n\n- 分页选择项增加 padding ([#984](https://github.com/arco-design/arco-design-vue/pull/984))\n\n\n## 2.23.0\n\n`2022-04-08`\n\n### 💎 功能优化\n\n- 优化切换 pageSize 时的页码改变逻辑 ([#954](https://github.com/arco-design/arco-design-vue/pull/954))\n\n### 🆕 新增功能\n\n- 增加 `jumper-prepend` 和  `jumper-append` 插槽 ([#954](https://github.com/arco-design/arco-design-vue/pull/954))\n\n\n## 2.18.0-beta.2\n\n`2022-02-25`\n\n### 💅 样式更新\n\n- 修复在safari下跳转器文字没有对齐的问题 ([#736](https://github.com/arco-design/arco-design-vue/pull/736))\n\n\n## 2.13.0\n\n`2021-12-31`\n\n### 🐛 问题修复\n\n- 修复跳转输入框失焦时没有清除值的问题 ([#487](https://github.com/arco-design/arco-design-vue/pull/487))\n\n\n## 2.9.0\n\n`2021-12-03`\n\n### 🆕 新增功能\n\n- 修改和增加插槽，支持模板自定义 ([#324](https://github.com/arco-design/arco-design-vue/pull/324))\n\n\n## 2.8.0\n\n`2021-12-01`\n\n### 🐛 问题修复\n\n- 修复 `disabled` 属性设置为 true 时，输入框和条数选择器未禁用的问题 ([#297](https://github.com/arco-design/arco-design-vue/pull/297))\n\n\n## 2.7.0\n\n`2021-11-26`\n\n### 🆕 新增功能\n\n- 增加 `base-size` & `buffer-size` 属性 ([#275](https://github.com/arco-design/arco-design-vue/pull/275))\n\n"
  },
  {
    "path": "packages/web-vue/components/pagination/README.en-US.md",
    "content": "```yaml\nmeta:\n  type: Component\n  category: Navigation\ntitle: Pagination\ndescription: Use paging to control the amount of information in a single page, and page jumps can also be performed.\n```\n\n*Auto translate by google.*\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/ellipsis.md\n\n@import ./__demo__/page-size.md\n\n@import ./__demo__/jumper.md\n\n@import ./__demo__/size.md\n\n@import ./__demo__/simple.md\n\n@import ./__demo__/total.md\n\n@import ./__demo__/all.md\n\n@import ./__demo__/custom.md\n\n## API\n\n\n### `<pagination>` Props\n\n|Attribute|Description|Type|Default|version|\n|---|---|---|:---:|:---|\n|total **(required)**|Total number of data|`number`|`-`||\n|current **(v-model)**|Current page number|`number`|`-`||\n|default-current|The default number of pages (uncontrolled state)|`number`|`1`||\n|page-size **(v-model)**|Number of data items displayed per page|`number`|`-`||\n|default-page-size|The number of data items displayed per page by default (uncontrolled state)|`number`|`10`||\n|disabled|Whether to disable|`boolean`|`false`||\n|hide-on-single-page|Whether to hide pagination when single page|`boolean`|`false`||\n|simple|Whether it is simple mode|`boolean`|`false`||\n|show-total|Whether to display the total number of data|`boolean`|`false`||\n|show-more|Whether to show more buttons|`boolean`|`false`||\n|show-jumper|Whether to show jump|`boolean`|`false`||\n|show-page-size|Whether to display the data number selector|`boolean`|`false`||\n|page-size-options|Selection list of data number selector|`number[]`|`[10, 20, 30, 40, 50]`||\n|page-size-props|Props of data number selector|`SelectProps`|`-`||\n|size|The size of the page selector|`'mini' \\| 'small' \\| 'medium' \\| 'large'`|`'medium'`||\n|page-item-style|The style of the paging button|`CSSProperties`|`-`||\n|active-page-item-style|The style of the current paging button|`CSSProperties`|`-`||\n|base-size|Calculate and display the number of omitted bases. Display the omitted number as `baseSize + 2 * bufferSize`|`number`|`6`||\n|buffer-size|When the ellipsis is displayed, the number of page numbers displayed on the left and right of the current page number|`number`|`2`||\n|auto-adjust|Whether to adjust the page number when changing the number of data|`boolean`|`true`|2.34.0|\n### `<pagination>` Events\n\n|Event Name|Description|Parameters|\n|---|---|---|\n|change|Triggered when page number changes|current: `number`|\n|page-size-change|Triggered when the number of data items changes|pageSize: `number`|\n### `<pagination>` Slots\n\n|Slot Name|Description|Parameters|version|\n|---|---|---|:---|\n|total|Total|total: `number`|2.9.0|\n|page-item-ellipsis|Page item (ellipsis)|-|2.9.0|\n|page-item-step|Page item (step)|type: `'previous'\\|'next'`The type of page item step|2.9.0|\n|page-item|Page item|page: `number`The page number of the paging button|2.9.0|\n\n\n"
  },
  {
    "path": "packages/web-vue/components/pagination/README.zh-CN.md",
    "content": "```yaml\nmeta:\n  type: 组件\n  category: 导航\ntitle: 分页 Pagination\ndescription: 采用分页控制单页内的信息数量，也可进行页面跳转。\n```\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/ellipsis.md\n\n@import ./__demo__/page-size.md\n\n@import ./__demo__/jumper.md\n\n@import ./__demo__/size.md\n\n@import ./__demo__/simple.md\n\n@import ./__demo__/total.md\n\n@import ./__demo__/all.md\n\n@import ./__demo__/custom.md\n\n## API\n\n\n### `<pagination>` Props\n\n|参数名|描述|类型|默认值|版本|\n|---|---|---|:---:|:---|\n|total **(必填)**|数据总数|`number`|`-`||\n|current **(v-model)**|当前的页数|`number`|`-`||\n|default-current|默认的页数（非受控状态）|`number`|`1`||\n|page-size **(v-model)**|每页展示的数据条数|`number`|`-`||\n|default-page-size|默认每页展示的数据条数（非受控状态）|`number`|`10`||\n|disabled|是否禁用|`boolean`|`false`||\n|hide-on-single-page|单页时是否隐藏分页|`boolean`|`false`||\n|simple|是否为简单模式|`boolean`|`false`||\n|show-total|是否显示数据总数|`boolean`|`false`||\n|show-more|是否显示更多按钮|`boolean`|`false`||\n|show-jumper|是否显示跳转|`boolean`|`false`||\n|show-page-size|是否显示数据条数选择器|`boolean`|`false`||\n|page-size-options|数据条数选择器的选项列表|`number[]`|`[10, 20, 30, 40, 50]`||\n|page-size-props|数据条数选择器的Props|`SelectProps`|`-`||\n|size|分页选择器的大小|`'mini' \\| 'small' \\| 'medium' \\| 'large'`|`'medium'`||\n|page-item-style|分页按钮的样式|`CSSProperties`|`-`||\n|active-page-item-style|当前分页按钮的样式|`CSSProperties`|`-`||\n|base-size|计算显示省略的基础个数。显示省略的个数为 `baseSize + 2 * bufferSize`|`number`|`6`||\n|buffer-size|显示省略号时，当前页码左右显示的页码个数|`number`|`2`||\n|auto-adjust|是否在改变数据条数时调整页码|`boolean`|`true`|2.34.0|\n### `<pagination>` Events\n\n|事件名|描述|参数|\n|---|---|---|\n|change|页码改变时触发|current: `number`|\n|page-size-change|数据条数改变时触发|pageSize: `number`|\n### `<pagination>` Slots\n\n|插槽名|描述|参数|版本|\n|---|:---:|---|:---|\n|total|总数|total: `number`|2.9.0|\n|page-item-ellipsis|分页按钮（省略）|-|2.9.0|\n|page-item-step|分页按钮（步）|type: `'previous'\\|'next'`The type of page item step|2.9.0|\n|page-item|分页按钮|page: `number`The page number of the paging button|2.9.0|\n\n\n"
  },
  {
    "path": "packages/web-vue/components/pagination/TEMPLATE.md",
    "content": "## zh-CN\n```yaml\nmeta:\n  type: 组件\n  category: 导航\ntitle: 分页 Pagination\ndescription: 采用分页控制单页内的信息数量，也可进行页面跳转。\n```\n---\n## en-US\n```yaml\nmeta:\n  type: Component\n  category: Navigation\ntitle: Pagination\ndescription: Use paging to control the amount of information in a single page, and page jumps can also be performed.\n```\n---\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/ellipsis.md\n\n@import ./__demo__/page-size.md\n\n@import ./__demo__/jumper.md\n\n@import ./__demo__/size.md\n\n@import ./__demo__/simple.md\n\n@import ./__demo__/total.md\n\n@import ./__demo__/all.md\n\n@import ./__demo__/custom.md\n\n## API\n\n%%API(pagination.tsx)%%\n"
  },
  {
    "path": "packages/web-vue/components/pagination/__demo__/all.md",
    "content": "```yaml\ntitle:\n  zh-CN: 全部展示\n  en-US: Show All\n```\n\n## zh-CN\n\n展示全部配置项。\n\n---\n\n## en-US\n\nShow all configuration.\n\n---\n\n```vue\n<template>\n  <a-pagination :total=\"50\" show-total show-jumper show-page-size/>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/pagination/__demo__/basic.md",
    "content": "```yaml\ntitle:\n  zh-CN: 基本用法\n  en-US: Basic Usage\n```\n\n## zh-CN\n\n分页的基本用法，`total` 属性为必填项。\n\n---\n\n## en-US\n\nBasic usage of pagination, `total` attribute is required.\n\n---\n\n```vue\n<template>\n  <a-pagination :total=\"50\"/>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/pagination/__demo__/custom.md",
    "content": "```yaml\ntitle:\n  zh-CN: 自定义分页按钮\n  en-US: Custom Page Item\n```\n\n## zh-CN\n\n可以通过插槽自定义分页按钮内容\n\n---\n\n## en-US\n\nThe content of the paging button can be customized through the slot\n\n---\n\n```vue\n<template>\n  <a-pagination :total=\"200\">\n    <template #page-item=\"{ page }\">\n      - {{page}} -\n    </template>\n    <template #page-item-step=\"{ type }\">\n      <icon-send :style=\"type==='previous' ? {transform:`rotate(180deg)`} : undefined\" />\n    </template>\n    <template #page-item-ellipsis>\n      <icon-sun-fill />\n    </template>\n  </a-pagination>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/pagination/__demo__/ellipsis.md",
    "content": "```yaml\ntitle:\n  zh-CN: 更多页码\n  en-US: Ellipsis Pager\n```\n\n## zh-CN\n\n当页码较大时，会使用更多页码的分页样式。\n\n---\n\n## en-US\n\nWhen the page number is larger, the pagination style with more page numbers will be used.\n\n---\n\n```vue\n<template>\n  <a-pagination :total=\"200\"/>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/pagination/__demo__/jumper.md",
    "content": "```yaml\ntitle:\n  zh-CN: 页码跳转\n  en-US: Page Jumper\n```\n\n## zh-CN\n\n通过设置 `show-jumper`，显示页码跳转输入框。\n\n---\n\n## en-US\n\nBy setting `show-jumper`, the page number jump input box is displayed.\n\n---\n\n```vue\n<template>\n  <a-pagination :total=\"50\" show-jumper/>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/pagination/__demo__/page-size.md",
    "content": "```yaml\ntitle:\n  zh-CN: 每页条数\n  en-US: PageSize Options\n```\n\n## zh-CN\n\n通过设置 `show-page-size`， 展示每页条数选择器。\n\n---\n\n## en-US\n\nBy setting `show-page-size`, the number of items per page selector is displayed.\n\n---\n\n```vue\n<template>\n  <a-pagination :total=\"200\" show-page-size/>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/pagination/__demo__/simple.md",
    "content": "```yaml\ntitle:\n  zh-CN: 简洁模式\n  en-US: Simple\n```\n\n## zh-CN\n\n通过设置 `simple` 属性开启简洁模式。\n\n---\n\n## en-US\n\nOpen the simple mode by setting the `simple` property.\n\n---\n\n```vue\n<template>\n  <a-pagination :total=\"200\" simple/>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/pagination/__demo__/size.md",
    "content": "```yaml\ntitle:\n  zh-CN: 分页尺寸\n  en-US: Pagination Size\n```\n\n## zh-CN\n\n分页分为 `mini`、`small`、`medium`、`large` 四种尺寸。\n\n---\n\n## en-US\n\nThe pagination is divided into four sizes: `mini`, `small`, `medium`, and `large`.\n\n---\n\n```vue\n<template>\n  <a-space direction=\"vertical\" size=\"large\">\n    <a-radio-group type=\"button\" v-model=\"size\">\n      <a-radio value=\"mini\">Mini</a-radio>\n      <a-radio value=\"small\">Small</a-radio>\n      <a-radio value=\"medium\">Medium</a-radio>\n      <a-radio value=\"large\">Large</a-radio>\n    </a-radio-group>\n    <a-pagination :total=\"50\" :size=\"size\" show-total show-jumper show-page-size />\n  </a-space>\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n  setup() {\n    const size = ref('medium');\n\n    return {\n      size\n    }\n  },\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/pagination/__demo__/total.md",
    "content": "```yaml\ntitle:\n  zh-CN: 展示总数\n  en-US: Total\n```\n\n## zh-CN\n\n通过设置 `show-total` 属性显示数据总数。\n\n---\n\n## en-US\n\nDisplay the total number of data by setting the `show-total` property.\n\n---\n\n```vue\n<template>\n  <a-pagination :total=\"200\" show-total/>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/pagination/__test__/__snapshots__/demo.test.ts.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`<pagination> demo: render [all] correctly 1`] = `\n\"<div class=\\\\\"arco-pagination arco-pagination-size-medium\\\\\"><span class=\\\\\"arco-pagination-total\\\\\">共 50 条</span>\n  <ul class=\\\\\"arco-pagination-list\\\\\"><span class=\\\\\"arco-pagination-item arco-pagination-item-previous arco-pagination-item-disabled\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-left\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M32 8.4 16.444 23.956 32 39.513\\\\\"></path></svg></span>\n    <li class=\\\\\"arco-pagination-item arco-pagination-item-active\\\\\" pages=\\\\\"5\\\\\">1</li>\n    <li class=\\\\\"arco-pagination-item\\\\\" pages=\\\\\"5\\\\\">2</li>\n    <li class=\\\\\"arco-pagination-item\\\\\" pages=\\\\\"5\\\\\">3</li>\n    <li class=\\\\\"arco-pagination-item\\\\\" pages=\\\\\"5\\\\\">4</li>\n    <li class=\\\\\"arco-pagination-item\\\\\" pages=\\\\\"5\\\\\">5</li>\n    <!----><span class=\\\\\"arco-pagination-item arco-pagination-item-next\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-right\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"m16 39.513 15.556-15.557L16 8.4\\\\\"></path></svg></span>\n  </ul><span class=\\\\\"arco-pagination-options\\\\\"><span class=\\\\\"arco-select-view-single arco-select arco-select-view arco-select-view-size-medium\\\\\" title=\\\\\"10 条/页\\\\\"><!----><input class=\\\\\"arco-select-view-input arco-select-view-input-hidden\\\\\" readonly=\\\\\"\\\\\" value=\\\\\"\\\\\"><span class=\\\\\"arco-select-view-value\\\\\">10 条/页</span><span class=\\\\\"arco-select-view-suffix\\\\\"><!----><span class=\\\\\"arco-select-view-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down arco-select-view-arrow-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n  <!----></span></span>\n  <!----></span><span class=\\\\\"arco-pagination-jumper\\\\\"><span class=\\\\\"arco-pagination-jumper-prepend arco-pagination-jumper-text-goto\\\\\">前往</span><span class=\\\\\"arco-input-wrapper arco-input-number arco-input-number-mode-embed arco-input-number-size-medium arco-pagination-jumper-input\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" role=\\\\\"spinbutton\\\\\" aria-valuemax=\\\\\"5\\\\\" aria-valuemin=\\\\\"1\\\\\" aria-valuenow=\\\\\"\\\\\" value=\\\\\"\\\\\"><!----><!----></span>\n  <!--v-if-->\n  <!--v-if--></span>\n</div>\"\n`;\n\nexports[`<pagination> demo: render [basic] correctly 1`] = `\n\"<div class=\\\\\"arco-pagination arco-pagination-size-medium\\\\\">\n  <!---->\n  <ul class=\\\\\"arco-pagination-list\\\\\"><span class=\\\\\"arco-pagination-item arco-pagination-item-previous arco-pagination-item-disabled\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-left\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M32 8.4 16.444 23.956 32 39.513\\\\\"></path></svg></span>\n    <li class=\\\\\"arco-pagination-item arco-pagination-item-active\\\\\" pages=\\\\\"5\\\\\">1</li>\n    <li class=\\\\\"arco-pagination-item\\\\\" pages=\\\\\"5\\\\\">2</li>\n    <li class=\\\\\"arco-pagination-item\\\\\" pages=\\\\\"5\\\\\">3</li>\n    <li class=\\\\\"arco-pagination-item\\\\\" pages=\\\\\"5\\\\\">4</li>\n    <li class=\\\\\"arco-pagination-item\\\\\" pages=\\\\\"5\\\\\">5</li>\n    <!----><span class=\\\\\"arco-pagination-item arco-pagination-item-next\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-right\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"m16 39.513 15.556-15.557L16 8.4\\\\\"></path></svg></span>\n  </ul>\n  <!---->\n  <!---->\n</div>\"\n`;\n\nexports[`<pagination> demo: render [custom] correctly 1`] = `\n\"<div class=\\\\\"arco-pagination arco-pagination-size-medium\\\\\">\n  <!---->\n  <ul class=\\\\\"arco-pagination-list\\\\\"><span class=\\\\\"arco-pagination-item arco-pagination-item-previous arco-pagination-item-disabled\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-send\\\\\" style=\\\\\"transform: rotate(180deg);\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"m14 24-7-5V7l34 17L7 41V29l7-5Zm0 0h25\\\\\" stroke-miterlimit=\\\\\"3.864\\\\\"></path></svg></span>\n    <li class=\\\\\"arco-pagination-item arco-pagination-item-active\\\\\" pages=\\\\\"20\\\\\"> - 1 - </li>\n    <li class=\\\\\"arco-pagination-item\\\\\" pages=\\\\\"20\\\\\"> - 2 - </li>\n    <li class=\\\\\"arco-pagination-item\\\\\" pages=\\\\\"20\\\\\"> - 3 - </li>\n    <li class=\\\\\"arco-pagination-item\\\\\" pages=\\\\\"20\\\\\"> - 4 - </li>\n    <li class=\\\\\"arco-pagination-item\\\\\" pages=\\\\\"20\\\\\"> - 5 - </li>\n    <li class=\\\\\"arco-pagination-item arco-pagination-item-ellipsis\\\\\" disabled=\\\\\"false\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-sun-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n        <circle cx=\\\\\"24\\\\\" cy=\\\\\"24\\\\\" r=\\\\\"9\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></circle>\n        <path d=\\\\\"M21 5.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-.5.5h-5a.5.5 0 0 1-.5-.5v-5ZM21 37.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-.5.5h-5a.5.5 0 0 1-.5-.5v-5ZM42.5 21a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-.5.5h-5a.5.5 0 0 1-.5-.5v-5a.5.5 0 0 1 .5-.5h5ZM10.5 21a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-.5.5h-5a.5.5 0 0 1-.5-.5v-5a.5.5 0 0 1 .5-.5h5ZM39.203 34.96a.5.5 0 0 1 0 .707l-3.536 3.536a.5.5 0 0 1-.707 0l-3.535-3.536a.5.5 0 0 1 0-.707l3.535-3.535a.5.5 0 0 1 .707 0l3.536 3.535ZM16.575 12.333a.5.5 0 0 1 0 .707l-3.535 3.535a.5.5 0 0 1-.707 0L8.797 13.04a.5.5 0 0 1 0-.707l3.536-3.536a.5.5 0 0 1 .707 0l3.535 3.536ZM13.04 39.203a.5.5 0 0 1-.707 0l-3.536-3.536a.5.5 0 0 1 0-.707l3.536-3.535a.5.5 0 0 1 .707 0l3.536 3.535a.5.5 0 0 1 0 .707l-3.536 3.536ZM35.668 16.575a.5.5 0 0 1-.708 0l-3.535-3.535a.5.5 0 0 1 0-.707l3.535-3.536a.5.5 0 0 1 .708 0l3.535 3.536a.5.5 0 0 1 0 .707l-3.535 3.535Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n      </svg></li>\n    <li class=\\\\\"arco-pagination-item\\\\\" pages=\\\\\"20\\\\\"> - 20 - </li>\n    <!----><span class=\\\\\"arco-pagination-item arco-pagination-item-next\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-send\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"m14 24-7-5V7l34 17L7 41V29l7-5Zm0 0h25\\\\\" stroke-miterlimit=\\\\\"3.864\\\\\"></path></svg></span>\n  </ul>\n  <!---->\n  <!---->\n</div>\"\n`;\n\nexports[`<pagination> demo: render [ellipsis] correctly 1`] = `\n\"<div class=\\\\\"arco-pagination arco-pagination-size-medium\\\\\">\n  <!---->\n  <ul class=\\\\\"arco-pagination-list\\\\\"><span class=\\\\\"arco-pagination-item arco-pagination-item-previous arco-pagination-item-disabled\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-left\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M32 8.4 16.444 23.956 32 39.513\\\\\"></path></svg></span>\n    <li class=\\\\\"arco-pagination-item arco-pagination-item-active\\\\\" pages=\\\\\"20\\\\\">1</li>\n    <li class=\\\\\"arco-pagination-item\\\\\" pages=\\\\\"20\\\\\">2</li>\n    <li class=\\\\\"arco-pagination-item\\\\\" pages=\\\\\"20\\\\\">3</li>\n    <li class=\\\\\"arco-pagination-item\\\\\" pages=\\\\\"20\\\\\">4</li>\n    <li class=\\\\\"arco-pagination-item\\\\\" pages=\\\\\"20\\\\\">5</li>\n    <li class=\\\\\"arco-pagination-item arco-pagination-item-ellipsis\\\\\" disabled=\\\\\"false\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-more\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n        <path d=\\\\\"M38 25v-2h2v2h-2ZM23 25v-2h2v2h-2ZM8 25v-2h2v2H8Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n        <path d=\\\\\"M38 25v-2h2v2h-2ZM23 25v-2h2v2h-2ZM8 25v-2h2v2H8Z\\\\\"></path>\n      </svg></li>\n    <li class=\\\\\"arco-pagination-item\\\\\" pages=\\\\\"20\\\\\">20</li>\n    <!----><span class=\\\\\"arco-pagination-item arco-pagination-item-next\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-right\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"m16 39.513 15.556-15.557L16 8.4\\\\\"></path></svg></span>\n  </ul>\n  <!---->\n  <!---->\n</div>\"\n`;\n\nexports[`<pagination> demo: render [jumper] correctly 1`] = `\n\"<div class=\\\\\"arco-pagination arco-pagination-size-medium\\\\\">\n  <!---->\n  <ul class=\\\\\"arco-pagination-list\\\\\"><span class=\\\\\"arco-pagination-item arco-pagination-item-previous arco-pagination-item-disabled\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-left\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M32 8.4 16.444 23.956 32 39.513\\\\\"></path></svg></span>\n    <li class=\\\\\"arco-pagination-item arco-pagination-item-active\\\\\" pages=\\\\\"5\\\\\">1</li>\n    <li class=\\\\\"arco-pagination-item\\\\\" pages=\\\\\"5\\\\\">2</li>\n    <li class=\\\\\"arco-pagination-item\\\\\" pages=\\\\\"5\\\\\">3</li>\n    <li class=\\\\\"arco-pagination-item\\\\\" pages=\\\\\"5\\\\\">4</li>\n    <li class=\\\\\"arco-pagination-item\\\\\" pages=\\\\\"5\\\\\">5</li>\n    <!----><span class=\\\\\"arco-pagination-item arco-pagination-item-next\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-right\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"m16 39.513 15.556-15.557L16 8.4\\\\\"></path></svg></span>\n  </ul>\n  <!----><span class=\\\\\"arco-pagination-jumper\\\\\"><span class=\\\\\"arco-pagination-jumper-prepend arco-pagination-jumper-text-goto\\\\\">前往</span><span class=\\\\\"arco-input-wrapper arco-input-number arco-input-number-mode-embed arco-input-number-size-medium arco-pagination-jumper-input\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" role=\\\\\"spinbutton\\\\\" aria-valuemax=\\\\\"5\\\\\" aria-valuemin=\\\\\"1\\\\\" aria-valuenow=\\\\\"\\\\\" value=\\\\\"\\\\\"><!----><!----></span>\n  <!--v-if-->\n  <!--v-if--></span>\n</div>\"\n`;\n\nexports[`<pagination> demo: render [page-size] correctly 1`] = `\n\"<div class=\\\\\"arco-pagination arco-pagination-size-medium\\\\\">\n  <!---->\n  <ul class=\\\\\"arco-pagination-list\\\\\"><span class=\\\\\"arco-pagination-item arco-pagination-item-previous arco-pagination-item-disabled\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-left\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M32 8.4 16.444 23.956 32 39.513\\\\\"></path></svg></span>\n    <li class=\\\\\"arco-pagination-item arco-pagination-item-active\\\\\" pages=\\\\\"20\\\\\">1</li>\n    <li class=\\\\\"arco-pagination-item\\\\\" pages=\\\\\"20\\\\\">2</li>\n    <li class=\\\\\"arco-pagination-item\\\\\" pages=\\\\\"20\\\\\">3</li>\n    <li class=\\\\\"arco-pagination-item\\\\\" pages=\\\\\"20\\\\\">4</li>\n    <li class=\\\\\"arco-pagination-item\\\\\" pages=\\\\\"20\\\\\">5</li>\n    <li class=\\\\\"arco-pagination-item arco-pagination-item-ellipsis\\\\\" disabled=\\\\\"false\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-more\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n        <path d=\\\\\"M38 25v-2h2v2h-2ZM23 25v-2h2v2h-2ZM8 25v-2h2v2H8Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n        <path d=\\\\\"M38 25v-2h2v2h-2ZM23 25v-2h2v2h-2ZM8 25v-2h2v2H8Z\\\\\"></path>\n      </svg></li>\n    <li class=\\\\\"arco-pagination-item\\\\\" pages=\\\\\"20\\\\\">20</li>\n    <!----><span class=\\\\\"arco-pagination-item arco-pagination-item-next\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-right\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"m16 39.513 15.556-15.557L16 8.4\\\\\"></path></svg></span>\n  </ul><span class=\\\\\"arco-pagination-options\\\\\"><span class=\\\\\"arco-select-view-single arco-select arco-select-view arco-select-view-size-medium\\\\\" title=\\\\\"10 条/页\\\\\"><!----><input class=\\\\\"arco-select-view-input arco-select-view-input-hidden\\\\\" readonly=\\\\\"\\\\\" value=\\\\\"\\\\\"><span class=\\\\\"arco-select-view-value\\\\\">10 条/页</span><span class=\\\\\"arco-select-view-suffix\\\\\"><!----><span class=\\\\\"arco-select-view-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down arco-select-view-arrow-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n  <!----></span></span>\n  <!----></span>\n  <!---->\n</div>\"\n`;\n\nexports[`<pagination> demo: render [simple] correctly 1`] = `\n\"<div class=\\\\\"arco-pagination arco-pagination-size-medium arco-pagination-simple\\\\\">\n  <!----><span class=\\\\\"arco-pagination-simple\\\\\"><span class=\\\\\"arco-pagination-item arco-pagination-item-previous arco-pagination-item-disabled\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-left\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M32 8.4 16.444 23.956 32 39.513\\\\\"></path></svg></span><span class=\\\\\"arco-pagination-jumper arco-pagination-jumper-simple\\\\\"><!--v-if--><span class=\\\\\"arco-input-wrapper arco-input-number arco-input-number-mode-embed arco-input-number-size-medium arco-pagination-jumper-input\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" role=\\\\\"spinbutton\\\\\" aria-valuemax=\\\\\"20\\\\\" aria-valuemin=\\\\\"1\\\\\" aria-valuenow=\\\\\"1\\\\\" value=\\\\\"1\\\\\"><!----><!----></span>\n  <!--v-if--><span class=\\\\\"arco-pagination-jumper-separator\\\\\">/</span><span class=\\\\\"arco-pagination-jumper-total-page\\\\\">20</span></span><span class=\\\\\"arco-pagination-item arco-pagination-item-next\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-right\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"m16 39.513 15.556-15.557L16 8.4\\\\\"></path></svg></span></span>\n  <!---->\n  <!---->\n</div>\"\n`;\n\nexports[`<pagination> demo: render [size] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-vertical\\\\\" style=\\\\\"column-gap: 24px; row-gap: 24px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-radio-group-button arco-radio-group-size-medium arco-radio-group-direction-horizontal\\\\\"><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"mini\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">Mini</span></label><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"small\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">Small</span></label><label class=\\\\\"arco-radio-button arco-radio-checked\\\\\"><input type=\\\\\"radio\\\\\" checked=\\\\\"\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"medium\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">Medium</span></label><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"large\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">Large</span></label></span></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-pagination arco-pagination-size-medium\\\\\"><span class=\\\\\"arco-pagination-total\\\\\">共 50 条</span>\n      <ul class=\\\\\"arco-pagination-list\\\\\"><span class=\\\\\"arco-pagination-item arco-pagination-item-previous arco-pagination-item-disabled\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-left\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M32 8.4 16.444 23.956 32 39.513\\\\\"></path></svg></span>\n        <li class=\\\\\"arco-pagination-item arco-pagination-item-active\\\\\" pages=\\\\\"5\\\\\">1</li>\n        <li class=\\\\\"arco-pagination-item\\\\\" pages=\\\\\"5\\\\\">2</li>\n        <li class=\\\\\"arco-pagination-item\\\\\" pages=\\\\\"5\\\\\">3</li>\n        <li class=\\\\\"arco-pagination-item\\\\\" pages=\\\\\"5\\\\\">4</li>\n        <li class=\\\\\"arco-pagination-item\\\\\" pages=\\\\\"5\\\\\">5</li>\n        <!----><span class=\\\\\"arco-pagination-item arco-pagination-item-next\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-right\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"m16 39.513 15.556-15.557L16 8.4\\\\\"></path></svg></span>\n      </ul><span class=\\\\\"arco-pagination-options\\\\\"><span class=\\\\\"arco-select-view-single arco-select arco-select-view arco-select-view-size-medium\\\\\" title=\\\\\"10 条/页\\\\\"><!----><input class=\\\\\"arco-select-view-input arco-select-view-input-hidden\\\\\" readonly=\\\\\"\\\\\" value=\\\\\"\\\\\"><span class=\\\\\"arco-select-view-value\\\\\">10 条/页</span><span class=\\\\\"arco-select-view-suffix\\\\\"><!----><span class=\\\\\"arco-select-view-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down arco-select-view-arrow-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n      <!----></span></span>\n      <!----></span><span class=\\\\\"arco-pagination-jumper\\\\\"><span class=\\\\\"arco-pagination-jumper-prepend arco-pagination-jumper-text-goto\\\\\">前往</span><span class=\\\\\"arco-input-wrapper arco-input-number arco-input-number-mode-embed arco-input-number-size-medium arco-pagination-jumper-input\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" role=\\\\\"spinbutton\\\\\" aria-valuemax=\\\\\"5\\\\\" aria-valuemin=\\\\\"1\\\\\" aria-valuenow=\\\\\"\\\\\" value=\\\\\"\\\\\"><!----><!----></span>\n      <!--v-if-->\n      <!--v-if--></span>\n    </div>\n  </div>\n</div>\"\n`;\n\nexports[`<pagination> demo: render [total] correctly 1`] = `\n\"<div class=\\\\\"arco-pagination arco-pagination-size-medium\\\\\"><span class=\\\\\"arco-pagination-total\\\\\">共 200 条</span>\n  <ul class=\\\\\"arco-pagination-list\\\\\"><span class=\\\\\"arco-pagination-item arco-pagination-item-previous arco-pagination-item-disabled\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-left\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M32 8.4 16.444 23.956 32 39.513\\\\\"></path></svg></span>\n    <li class=\\\\\"arco-pagination-item arco-pagination-item-active\\\\\" pages=\\\\\"20\\\\\">1</li>\n    <li class=\\\\\"arco-pagination-item\\\\\" pages=\\\\\"20\\\\\">2</li>\n    <li class=\\\\\"arco-pagination-item\\\\\" pages=\\\\\"20\\\\\">3</li>\n    <li class=\\\\\"arco-pagination-item\\\\\" pages=\\\\\"20\\\\\">4</li>\n    <li class=\\\\\"arco-pagination-item\\\\\" pages=\\\\\"20\\\\\">5</li>\n    <li class=\\\\\"arco-pagination-item arco-pagination-item-ellipsis\\\\\" disabled=\\\\\"false\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-more\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n        <path d=\\\\\"M38 25v-2h2v2h-2ZM23 25v-2h2v2h-2ZM8 25v-2h2v2H8Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n        <path d=\\\\\"M38 25v-2h2v2h-2ZM23 25v-2h2v2h-2ZM8 25v-2h2v2H8Z\\\\\"></path>\n      </svg></li>\n    <li class=\\\\\"arco-pagination-item\\\\\" pages=\\\\\"20\\\\\">20</li>\n    <!----><span class=\\\\\"arco-pagination-item arco-pagination-item-next\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-right\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"m16 39.513 15.556-15.557L16 8.4\\\\\"></path></svg></span>\n  </ul>\n  <!---->\n  <!---->\n</div>\"\n`;\n"
  },
  {
    "path": "packages/web-vue/components/pagination/__test__/demo.test.ts",
    "content": "import demoTest from '../../../scripts/demo-test';\n\ndemoTest('pagination');\n"
  },
  {
    "path": "packages/web-vue/components/pagination/__test__/index.test.tsx",
    "content": "import { mount } from '@vue/test-utils';\nimport { nextTick, ref } from 'vue';\nimport Pagination from '../pagination';\n\ndescribe('Pagination', () => {\n  test('should emit change event', async () => {\n    const wrapper = mount(Pagination, {\n      props: {\n        total: 200,\n        showJumper: true,\n      },\n    });\n\n    const pageButtons = wrapper.findAll('.arco-pagination-item');\n    await pageButtons[2].trigger('click');\n    expect(wrapper.emitted('change')[0]).toEqual([2]);\n    const ellipsis = wrapper.find('.arco-pagination-item-ellipsis');\n    await ellipsis.trigger('click');\n    expect(wrapper.emitted('change')[1]).toEqual([7]);\n  });\n\n  test('`total` causes page count changes to reset `current`', async () => {\n    const total = ref(5);\n    const current = ref(5);\n    const handleChange = (data: number) => {\n      current.value = data;\n    };\n    const wrapper = mount(() => (\n      <Pagination\n        total={total.value}\n        pageSize={1}\n        current={current.value}\n        onChange={handleChange}\n      ></Pagination>\n    ));\n    await nextTick();\n    total.value = 4;\n    await nextTick();\n    expect(current.value).toBe(4);\n\n    total.value = 5;\n    current.value = 3;\n    await nextTick();\n    total.value = 4;\n    await nextTick();\n    expect(current.value).toBe(3);\n  });\n});\n"
  },
  {
    "path": "packages/web-vue/components/pagination/index.ts",
    "content": "import type { App } from 'vue';\nimport type { ArcoOptions } from '../_utils/types';\nimport { setGlobalConfig, getComponentPrefix } from '../_utils/global-config';\nimport _Pagination from './pagination';\n\nconst Pagination = Object.assign(_Pagination, {\n  install: (app: App, options?: ArcoOptions) => {\n    setGlobalConfig(app, options);\n    const componentPrefix = getComponentPrefix(options);\n\n    app.component(componentPrefix + _Pagination.name, _Pagination);\n  },\n});\n\nexport type PaginationInstance = InstanceType<typeof _Pagination>;\nexport type { PaginationProps } from './interface';\n\nexport default Pagination;\n"
  },
  {
    "path": "packages/web-vue/components/pagination/interface.ts",
    "content": "import { CSSProperties } from 'vue';\nimport { Size } from '../_utils/constant';\nimport { SelectProps } from '../select';\n\nexport const PAGE_ITEM_TYPES = ['page', 'more', 'previous', 'next'] as const;\n\nexport type PageItemType = typeof PAGE_ITEM_TYPES[number];\n\nexport interface PaginationProps {\n  total?: number;\n  current?: number;\n  defaultCurrent?: number;\n  pageSize?: number;\n  defaultPageSize?: number;\n  disabled?: boolean;\n  hideOnSinglePage?: boolean;\n  simple?: boolean;\n  showTotal?: boolean;\n  showMore?: boolean;\n  showJumper?: boolean;\n  showPageSize?: boolean;\n  pageSizeOptions?: number[];\n  pageSizeProps?: SelectProps;\n  size?: Size;\n  pageItemStyle?: CSSProperties;\n  activePageItemStyle?: CSSProperties;\n  baseSize?: number;\n  bufferSize?: number;\n}\n"
  },
  {
    "path": "packages/web-vue/components/pagination/page-item-ellipsis.vue",
    "content": "<template>\n  <li :class=\"cls\" @click=\"handleClick\">\n    <slot>\n      <icon-more />\n    </slot>\n  </li>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent } from 'vue';\nimport { getPrefixCls } from '../_utils/global-config';\nimport IconMore from '../icon/icon-more';\nimport { getLegalPage } from './utils';\n\nexport default defineComponent({\n  name: 'EllipsisPager',\n  components: {\n    IconMore,\n  },\n  props: {\n    current: {\n      type: Number,\n      required: true,\n    },\n    step: {\n      type: Number,\n      default: 5,\n    },\n    pages: {\n      type: Number,\n      required: true,\n    },\n  },\n  emits: ['click'],\n  setup(props, { emit }) {\n    const prefixCls = getPrefixCls('pagination-item');\n\n    const nextPage = computed(() =>\n      getLegalPage(props.current + props.step, {\n        min: 1,\n        max: props.pages,\n      })\n    );\n\n    const handleClick = (e: MouseEvent) => {\n      emit('click', nextPage.value);\n    };\n\n    const cls = computed(() => [prefixCls, `${prefixCls}-ellipsis`]);\n\n    return {\n      prefixCls,\n      cls,\n      handleClick,\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/pagination/page-item-step.vue",
    "content": "<template>\n  <component :is=\"simple ? 'span' : 'li'\" :class=\"cls\" @click=\"handleClick\">\n    <slot :type=\"isNext ? 'next' : 'previous'\">\n      <icon-right v-if=\"isNext\" />\n      <icon-left v-else />\n    </slot>\n  </component>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent } from 'vue';\nimport { getPrefixCls } from '../_utils/global-config';\nimport IconLeft from '../icon/icon-left';\nimport IconRight from '../icon/icon-right';\nimport { getLegalPage } from './utils';\n\nexport default defineComponent({\n  name: 'StepPager',\n  components: {\n    IconLeft,\n    IconRight,\n  },\n  props: {\n    pages: {\n      type: Number,\n      required: true,\n    },\n    current: {\n      type: Number,\n      required: true,\n    },\n    type: {\n      type: String,\n      required: true,\n    },\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n    simple: {\n      type: Boolean,\n      default: false,\n    },\n  },\n  emits: ['click'],\n  setup(props, { emit }) {\n    const prefixCls = getPrefixCls('pagination-item');\n    const isNext = props.type === 'next';\n    const mergedDisabled = computed(() => {\n      if (props.disabled) {\n        return props.disabled;\n      }\n      if (!props.pages) {\n        return true;\n      }\n      if (isNext && props.current === props.pages) {\n        return true;\n      }\n      return !isNext && props.current <= 1;\n    });\n    const nextPage = computed(() =>\n      getLegalPage(props.current + (isNext ? 1 : -1), {\n        min: 1,\n        max: props.pages,\n      })\n    );\n\n    const handleClick = (e: MouseEvent) => {\n      if (!mergedDisabled.value) {\n        emit('click', nextPage.value);\n      }\n    };\n\n    const cls = computed(() => [\n      prefixCls,\n      `${prefixCls}-${props.type}`,\n      {\n        [`${prefixCls}-disabled`]: mergedDisabled.value,\n      },\n    ]);\n\n    return {\n      prefixCls,\n      cls,\n      isNext,\n      handleClick,\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/pagination/page-item.vue",
    "content": "<template>\n  <li :class=\"cls\" :style=\"mergedStyle\" @click=\"handleClick\">\n    <slot :page=\"pageNumber\">\n      {{ pageNumber }}\n    </slot>\n  </li>\n</template>\n\n<script lang=\"ts\">\nimport type { PropType, CSSProperties } from 'vue';\nimport { computed, defineComponent } from 'vue';\nimport { getPrefixCls } from '../_utils/global-config';\n\nexport default defineComponent({\n  name: 'Pager',\n  props: {\n    pageNumber: {\n      type: Number,\n    },\n    current: {\n      type: Number,\n    },\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n    style: {\n      type: Object as PropType<CSSProperties>,\n    },\n    activeStyle: {\n      type: Object as PropType<CSSProperties>,\n    },\n  },\n  emits: ['click'],\n  setup(props, { emit }) {\n    const prefixCls = getPrefixCls('pagination-item');\n    const isActive = computed(() => props.current === props.pageNumber);\n\n    const handleClick = (e: MouseEvent) => {\n      if (!props.disabled) {\n        emit('click', props.pageNumber, e);\n      }\n    };\n\n    const cls = computed(() => [\n      prefixCls,\n      {\n        [`${prefixCls}-active`]: isActive.value,\n      },\n    ]);\n\n    const mergedStyle = computed(() => {\n      return isActive.value ? props.activeStyle : props.style;\n    });\n\n    return {\n      prefixCls,\n      cls,\n      mergedStyle,\n      handleClick,\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/pagination/page-jumper.vue",
    "content": "<template>\n  <span :class=\"cls\">\n    <span\n      v-if=\"!simple\"\n      :class=\"[`${prefixCls}-prepend`, `${prefixCls}-text-goto`]\"\n    >\n      <slot name=\"jumper-prepend\">{{ t('pagination.goto') }}</slot>\n    </span>\n    <input-number\n      v-model=\"inputValue\"\n      :class=\"`${prefixCls}-input`\"\n      :min=\"1\"\n      :max=\"pages\"\n      :size=\"size\"\n      :disabled=\"disabled\"\n      hide-button\n      :formatter=\"handleFormatter\"\n      @change=\"handleChange\"\n    />\n    <span v-if=\"$slots['jumper-append']\" :class=\"`${prefixCls}-append`\"\n      ><slot name=\"jumper-append\"\n    /></span>\n    <template v-if=\"simple\">\n      <span :class=\"`${prefixCls}-separator`\">/</span>\n      <span :class=\"`${prefixCls}-total-page`\">{{ pages }}</span>\n    </template>\n  </span>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, nextTick, PropType, ref, watch } from 'vue';\nimport { useI18n } from '../locale';\nimport { getPrefixCls } from '../_utils/global-config';\nimport InputNumber from '../input-number';\n\nexport default defineComponent({\n  name: 'PageJumper',\n  components: {\n    InputNumber,\n  },\n  props: {\n    current: {\n      type: Number,\n      required: true,\n    },\n    simple: {\n      type: Boolean,\n      default: false,\n    },\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n    pages: {\n      type: Number,\n      required: true,\n    },\n    size: {\n      type: String,\n    },\n    onChange: {\n      type: Function as PropType<(value: number) => void>,\n    },\n  },\n  emits: ['change'],\n  setup(props, { emit }) {\n    const prefixCls = getPrefixCls('pagination-jumper');\n    const { t } = useI18n();\n    const inputValue = ref(props.simple ? props.current : undefined);\n\n    const handleFormatter = (value: number) => {\n      const parseIntVal = parseInt(value.toString(), 10);\n      return Number.isNaN(parseIntVal) ? undefined : String(parseIntVal);\n    };\n\n    const handleChange = (value: number) => {\n      emit('change', inputValue.value);\n      nextTick(() => {\n        if (!props.simple) {\n          inputValue.value = undefined;\n        }\n      });\n    };\n\n    watch(\n      () => props.current,\n      (value) => {\n        if (props.simple && value !== inputValue.value) {\n          inputValue.value = value;\n        }\n      }\n    );\n\n    const cls = computed(() => [\n      prefixCls,\n      {\n        [`${prefixCls}-simple`]: props.simple,\n      },\n    ]);\n\n    return {\n      prefixCls,\n      cls,\n      t,\n      inputValue,\n      handleChange,\n      handleFormatter,\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/pagination/page-options.vue",
    "content": "<template>\n  <span :class=\"prefixCls\">\n    <arco-select\n      :model-value=\"pageSize\"\n      :options=\"options\"\n      :size=\"size\"\n      :disabled=\"disabled\"\n      v-bind=\"selectProps\"\n      @change=\"handleChange\"\n    />\n  </span>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, PropType } from 'vue';\nimport { useI18n } from '../locale';\nimport { getPrefixCls } from '../_utils/global-config';\nimport ArcoSelect from '../select';\n\nexport default defineComponent({\n  name: 'PageOptions',\n  components: {\n    ArcoSelect,\n  },\n  props: {\n    sizeOptions: {\n      type: Array,\n      required: true,\n    },\n    pageSize: Number,\n    disabled: Boolean,\n    size: {\n      type: String,\n    },\n    onChange: {\n      type: Function as PropType<(value: number) => void>,\n    },\n    selectProps: {\n      type: Object,\n    },\n  },\n  emits: ['change'],\n  setup(props, { emit }) {\n    const prefixCls = getPrefixCls('pagination-options');\n    const { t } = useI18n();\n    const options = computed(() =>\n      props.sizeOptions.map((value) => ({\n        value,\n        label: `${value} ${t('pagination.countPerPage')}`,\n      }))\n    );\n\n    const handleChange = (value: string) => {\n      emit('change', value);\n    };\n\n    return {\n      prefixCls,\n      options,\n      handleChange,\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/pagination/pagination.tsx",
    "content": "import type { PropType, CSSProperties } from 'vue';\nimport { computed, defineComponent, reactive, ref, toRefs, watch } from 'vue';\nimport type { Data } from '../_utils/types';\nimport { getPrefixCls } from '../_utils/global-config';\nimport { Size } from '../_utils/constant';\nimport Pager from './page-item.vue';\nimport StepPager from './page-item-step.vue';\nimport EllipsisPager from './page-item-ellipsis.vue';\nimport PageJumper from './page-jumper.vue';\nimport PageOptions from './page-options.vue';\nimport { useI18n } from '../locale';\nimport { isNumber } from '../_utils/is';\nimport type { PageItemType } from './interface';\nimport { SelectProps } from '../select';\nimport { useSize } from '../_hooks/use-size';\n\nexport default defineComponent({\n  name: 'Pagination',\n  props: {\n    /**\n     * @zh 数据总数\n     * @en Total number of data\n     */\n    total: {\n      type: Number,\n      required: true,\n    },\n    /**\n     * @zh 当前的页数\n     * @en Current page number\n     * @vModel\n     */\n    current: Number,\n    /**\n     * @zh 默认的页数（非受控状态）\n     * @en The default number of pages (uncontrolled state)\n     */\n    defaultCurrent: {\n      type: Number,\n      default: 1,\n    },\n    /**\n     * @zh 每页展示的数据条数\n     * @en Number of data items displayed per page\n     * @vModel\n     */\n    pageSize: Number,\n    /**\n     * @zh 默认每页展示的数据条数（非受控状态）\n     * @en The number of data items displayed per page by default (uncontrolled state)\n     */\n    defaultPageSize: {\n      type: Number,\n      default: 10,\n    },\n    /**\n     * @zh 是否禁用\n     * @en Whether to disable\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 单页时是否隐藏分页\n     * @en Whether to hide pagination when single page\n     */\n    hideOnSinglePage: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 是否为简单模式\n     * @en Whether it is simple mode\n     */\n    simple: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 是否显示数据总数\n     * @en Whether to display the total number of data\n     */\n    showTotal: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 是否显示更多按钮\n     * @en Whether to show more buttons\n     */\n    showMore: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 是否显示跳转\n     * @en Whether to show jump\n     */\n    showJumper: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 是否显示数据条数选择器\n     * @en Whether to display the data number selector\n     */\n    showPageSize: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 数据条数选择器的选项列表\n     * @en Selection list of data number selector\n     */\n    pageSizeOptions: {\n      type: Array as PropType<number[]>,\n      default: () => [10, 20, 30, 40, 50],\n    },\n    /**\n     * @zh 数据条数选择器的Props\n     * @en Props of data number selector\n     */\n    pageSizeProps: {\n      type: Object as PropType<SelectProps>,\n    },\n    /**\n     * @zh 分页选择器的大小\n     * @en The size of the page selector\n     * @values 'mini', 'small', 'medium', 'large'\n     * @defaultValue 'medium'\n     */\n    size: {\n      type: String as PropType<Size>,\n    },\n    /**\n     * @zh 分页按钮的样式\n     * @en The style of the paging button\n     */\n    pageItemStyle: {\n      type: Object as PropType<CSSProperties>,\n    },\n    /**\n     * @zh 当前分页按钮的样式\n     * @en The style of the current paging button\n     */\n    activePageItemStyle: {\n      type: Object as PropType<CSSProperties>,\n    },\n    /**\n     * @zh 计算显示省略的基础个数。显示省略的个数为 `baseSize + 2 * bufferSize`\n     * @en Calculate and display the number of omitted bases. Display the omitted number as `baseSize + 2 * bufferSize`\n     */\n    baseSize: {\n      type: Number,\n      default: 6,\n    },\n    /**\n     * @zh 显示省略号时，当前页码左右显示的页码个数\n     * @en When the ellipsis is displayed, the number of page numbers displayed on the left and right of the current page number\n     */\n    bufferSize: {\n      type: Number,\n      default: 2,\n    },\n    /**\n     * @zh 是否在改变数据条数时调整页码\n     * @en Whether to adjust the page number when changing the number of data\n     * @version 2.34.0\n     */\n    autoAdjust: {\n      type: Boolean,\n      default: true,\n    },\n  },\n  emits: {\n    'update:current': (current: number) => true,\n    'update:pageSize': (pageSize: number) => true,\n    /**\n     * @zh 页码改变时触发\n     * @en Triggered when page number changes\n     * @param {number} current\n     */\n    'change': (current: number) => true,\n    /**\n     * @zh 数据条数改变时触发\n     * @en Triggered when the number of data items changes\n     * @param {number} pageSize\n     */\n    'pageSizeChange': (pageSize: number) => true,\n  },\n  /**\n   * @zh 分页按钮\n   * @en Page item\n   * @version 2.9.0\n   * @slot page-item\n   * @binding {number} page The page number of the paging button\n   */\n  /**\n   * @zh 分页按钮（步）\n   * @en Page item (step)\n   * @version 2.9.0\n   * @slot page-item-step\n   * @binding {'previous'|'next'} type The type of page item step\n   */\n  /**\n   * @zh 分页按钮（省略）\n   * @en Page item (ellipsis)\n   * @version 2.9.0\n   * @slot page-item-ellipsis\n   */\n  /**\n   * @zh 总数\n   * @en Total\n   * @version 2.9.0\n   * @slot total\n   * @binding {number} total\n   */\n  setup(props, { emit, slots }) {\n    const prefixCls = getPrefixCls('pagination');\n    const { t } = useI18n();\n    const { disabled, pageItemStyle, activePageItemStyle, size } =\n      toRefs(props);\n    const { mergedSize } = useSize(size);\n\n    const _current = ref(props.defaultCurrent);\n    const _pageSize = ref(props.defaultPageSize);\n    const computedCurrent = computed(() => props.current ?? _current.value);\n    const computedPageSize = computed(() => props.pageSize ?? _pageSize.value);\n\n    const pages = computed(() =>\n      Math.ceil(props.total / computedPageSize.value)\n    );\n\n    const handleClick = (page: number) => {\n      // when pageJumper blur and input.value is undefined, page is illegal\n      if (page !== computedCurrent.value && isNumber(page) && !props.disabled) {\n        _current.value = page;\n        emit('update:current', page);\n        emit('change', page);\n      }\n    };\n\n    const handlePageSizeChange = (pageSize: number) => {\n      _pageSize.value = pageSize;\n      emit('update:pageSize', pageSize);\n      emit('pageSizeChange', pageSize);\n    };\n\n    const pagerProps = reactive({\n      current: computedCurrent,\n      pages,\n      disabled,\n      style: pageItemStyle,\n      activeStyle: activePageItemStyle,\n      onClick: handleClick,\n    });\n\n    const getPageItemElement = (type: PageItemType, props: Data = {}) => {\n      if (type === 'more') {\n        return (\n          <EllipsisPager\n            v-slots={{ default: slots['page-item-ellipsis'] }}\n            {...props}\n            {...pagerProps}\n          />\n        );\n      }\n      if (type === 'previous') {\n        return (\n          <StepPager\n            v-slots={{ default: slots['page-item-step'] }}\n            type=\"previous\"\n            {...props}\n            {...pagerProps}\n          />\n        );\n      }\n      if (type === 'next') {\n        return (\n          <StepPager\n            v-slots={{ default: slots['page-item-step'] }}\n            type=\"next\"\n            {...props}\n            {...pagerProps}\n          />\n        );\n      }\n\n      return (\n        <Pager\n          v-slots={{ default: slots['page-item'] }}\n          {...props}\n          {...pagerProps}\n        />\n      );\n    };\n\n    const pageList = computed(() => {\n      const pageList: Array<JSX.Element | JSX.Element[]> = [];\n\n      if (pages.value < props.baseSize + props.bufferSize * 2) {\n        for (let i = 1; i <= pages.value; i++) {\n          pageList.push(getPageItemElement('page', { key: i, pageNumber: i }));\n        }\n      } else {\n        let left = 1;\n        let right = pages.value;\n        let hasLeftEllipsis = false;\n        let hasRightEllipsis = false;\n\n        if (computedCurrent.value > 2 + props.bufferSize) {\n          hasLeftEllipsis = true;\n          left = Math.min(\n            computedCurrent.value - props.bufferSize,\n            pages.value - 2 * props.bufferSize\n          );\n        }\n        if (computedCurrent.value < pages.value - (props.bufferSize + 1)) {\n          hasRightEllipsis = true;\n          right = Math.max(\n            computedCurrent.value + props.bufferSize,\n            2 * props.bufferSize + 1\n          );\n        }\n\n        if (hasLeftEllipsis) {\n          pageList.push(getPageItemElement('page', { key: 1, pageNumber: 1 }));\n          pageList.push(\n            getPageItemElement('more', {\n              key: 'left-ellipsis-pager',\n              step: -(props.bufferSize * 2 + 1),\n            })\n          );\n        }\n\n        for (let i = left; i <= right; i++) {\n          pageList.push(getPageItemElement('page', { key: i, pageNumber: i }));\n        }\n\n        if (hasRightEllipsis) {\n          pageList.push(\n            getPageItemElement('more', {\n              key: 'right-ellipsis-pager',\n              step: props.bufferSize * 2 + 1,\n            })\n          );\n          pageList.push(\n            getPageItemElement('page', {\n              key: pages.value,\n              pageNumber: pages.value,\n            })\n          );\n        }\n      }\n\n      return pageList;\n    });\n\n    const renderPager = () => {\n      if (props.simple) {\n        return (\n          <span class={`${prefixCls}-simple`}>\n            {getPageItemElement('previous', { simple: true })}\n            <PageJumper\n              disabled={props.disabled}\n              current={computedCurrent.value}\n              size={mergedSize.value}\n              pages={pages.value}\n              simple\n              onChange={handleClick}\n            />\n            {getPageItemElement('next', { simple: true })}\n          </span>\n        );\n      }\n\n      return (\n        <ul class={`${prefixCls}-list`}>\n          {getPageItemElement('previous', { simple: true })}\n          {pageList.value}\n          {props.showMore &&\n            getPageItemElement('more', {\n              key: 'more',\n              step: props.bufferSize * 2 + 1,\n            })}\n          {getPageItemElement('next', { simple: true })}\n        </ul>\n      );\n    };\n\n    // When the number of data items changes, recalculate the page number\n    watch(computedPageSize, (curPageSize, prePageSize) => {\n      if (\n        props.autoAdjust &&\n        curPageSize !== prePageSize &&\n        computedCurrent.value > 1\n      ) {\n        const index = prePageSize * (computedCurrent.value - 1) + 1;\n        const newPage = Math.ceil(index / curPageSize);\n        if (newPage !== computedCurrent.value) {\n          _current.value = newPage;\n          emit('update:current', newPage);\n          emit('change', newPage);\n        }\n      }\n    });\n\n    watch(pages, (curPages, prePages) => {\n      if (\n        props.autoAdjust &&\n        curPages !== prePages &&\n        computedCurrent.value > 1 &&\n        computedCurrent.value > curPages\n      ) {\n        const newCurrent = Math.max(curPages, 1);\n        _current.value = newCurrent;\n        emit('update:current', newCurrent);\n        emit('change', newCurrent);\n      }\n    });\n\n    const cls = computed(() => [\n      prefixCls,\n      `${prefixCls}-size-${mergedSize.value}`,\n      {\n        [`${prefixCls}-simple`]: props.simple,\n        [`${prefixCls}-disabled`]: props.disabled,\n      },\n    ]);\n\n    return () => {\n      if (props.hideOnSinglePage && pages.value <= 1) {\n        return null;\n      }\n\n      return (\n        <div class={cls.value}>\n          {props.showTotal && (\n            <span class={`${prefixCls}-total`}>\n              {slots.total?.({ total: props.total }) ??\n                t('pagination.total', props.total)}\n            </span>\n          )}\n          {renderPager()}\n          {props.showPageSize && (\n            <PageOptions\n              disabled={props.disabled}\n              sizeOptions={props.pageSizeOptions}\n              pageSize={computedPageSize.value}\n              size={mergedSize.value}\n              onChange={handlePageSizeChange}\n              selectProps={props.pageSizeProps}\n            />\n          )}\n          {!props.simple && props.showJumper && (\n            <PageJumper\n              v-slots={{\n                'jumper-prepend': slots['jumper-prepend'],\n                'jumper-append': slots['jumper-append'],\n              }}\n              disabled={props.disabled}\n              current={computedCurrent.value}\n              pages={pages.value}\n              size={mergedSize.value}\n              onChange={handleClick}\n            />\n          )}\n        </div>\n      );\n    };\n  },\n});\n"
  },
  {
    "path": "packages/web-vue/components/pagination/style/index.less",
    "content": "@import './token.less';\n\n.page-item(@size) {\n  min-width: ~'@{pagination-size-@{size}}';\n  height: ~'@{pagination-size-@{size}}';\n  font-size: ~'@{pagination-size-@{size}-font-size}';\n  line-height: ~'@{pagination-size-@{size}}';\n\n  &-previous,\n  &-next {\n    font-size: ~'@{pagination-size-icon-arrow_@{size}}';\n  }\n}\n\n.option(@size) {\n  height: ~'@{pagination-size-@{size}}';\n  font-size: ~'@{pagination-size-@{size}-font-size}';\n  line-height: 0;\n}\n\n.total(@size) {\n  font-size: ~'@{pagination-size-@{size}-font-size}';\n  line-height: ~'@{pagination-size-@{size}}';\n}\n\n.@{pagination-prefix-cls} {\n  display: flex;\n  align-items: center;\n  font-size: @pagination-size-default-font-size;\n\n  &-list {\n    display: inline-block;\n    margin: 0;\n    padding: 0;\n    white-space: nowrap;\n    list-style: none;\n  }\n\n  &-item {\n    display: inline-block;\n    box-sizing: border-box;\n    padding: 0 @pagination-padding-horizontal;\n    color: @pagination-color-item-text;\n    text-align: center;\n    vertical-align: middle;\n    list-style: none;\n    background-color: @pagination-color-bg-item;\n    border: @pagination-border-width solid @pagination-color-item-border;\n    border-radius: @pagination-item-border-radius;\n    outline: 0;\n    cursor: pointer;\n    user-select: none;\n\n    .page-item(default);\n\n    &:hover {\n      color: @pagination-color-item-text_hover;\n      background-color: @pagination-color-bg-item_hover;\n      border-color: @pagination-color-item-border_hover;\n    }\n\n    &-active,\n    &-active:hover {\n      color: @pagination-color-item-text_active;\n      background-color: @pagination-color-bg-item_active;\n      border-color: @pagination-color-item-border_active;\n      transition: color @transition-duration-2\n          @transition-timing-function-linear,\n        background-color @transition-duration-2\n          @transition-timing-function-linear;\n    }\n\n    &-disabled,\n    &-disabled:hover {\n      color: @pagination-color-item-text_disabled;\n      background-color: @pagination-color-bg-item_disabled;\n      border-color: @pagination-color-item-border_disabled;\n      cursor: not-allowed;\n    }\n\n    &:not(:last-child) {\n      margin-right: @pagination-item-spacing;\n    }\n  }\n\n  &-item-previous,\n  &-item-next {\n    color: @pagination-color-icon-arrow;\n    font-size: @pagination-size-icon-arrow_default;\n    background-color: @pagination-color-icon-arrow-bg;\n\n    &:not(.@{pagination-prefix-cls}-item-disabled):hover {\n      color: @pagination-color-icon-arrow-text_hover;\n      background-color: @pagination-color-icon-arrow-bg_hover;\n    }\n\n    // 解决少数情况下出现的图标不垂直水平剧中的 bug\n    &::after {\n      display: inline-block;\n      font-size: 0;\n      vertical-align: middle;\n      content: '.';\n    }\n  }\n\n  & &-item-previous&-item-disabled,\n  & &-item-next&-item-disabled {\n    color: @pagination-color-icon-arrow-text_disabled;\n    background-color: @pagination-color-icon-arrow-bg_disabled;\n  }\n\n  &-item-jumper {\n    font-size: @pagination-size-icon-ellipsis;\n  }\n\n  /*** 快速跳转 ***/\n  &-jumper {\n    display: flex;\n    align-items: center;\n    margin-left: @pagination-margin-jumper-left;\n\n    > span {\n      font-size: @pagination-size-default-font-size;\n    }\n\n    &-text-goto,\n    &-prepend,\n    &-append {\n      color: @pagination-color-jumper-goto;\n      white-space: nowrap;\n    }\n\n    &-prepend {\n      margin-right: @pagination-item-spacing;\n    }\n\n    &-append {\n      margin-left: @pagination-item-spacing;\n    }\n\n    & &-input {\n      width: @patination-jumper-input-width;\n      padding-right: 2px;\n      padding-left: 2px;\n\n      input {\n        text-align: center;\n      }\n    }\n  }\n\n  &-options {\n    position: relative;\n    display: inline-block;\n    flex: 0 0 auto;\n    min-width: 0;\n    margin-left: @pagination-margin-option-left;\n    text-align: center;\n    vertical-align: middle;\n\n    .@{prefix}-select {\n      width: auto;\n\n      &-view-value {\n        padding-right: 6px;\n        overflow: inherit;\n      }\n    }\n  }\n\n  &-total {\n    display: inline-block;\n    height: 100%;\n    margin-right: @pagination-margin-total-spacing;\n    color: @pagination-color-text-total;\n    font-size: @pagination-size-default-font-size;\n    .total(default);\n\n    white-space: nowrap;\n  }\n\n  // simple\n  &-jumper {\n    flex: 0 0 auto;\n\n    &-separator {\n      padding: 0 @pagination-simple-margin-separator-right 0\n        @pagination-simple-margin-separator-left;\n    }\n\n    &-total-page {\n      margin-right: @pagination-simple-margin-next-left -\n        @pagination-simple-margin-prev-right;\n    }\n  }\n\n  &-simple {\n    display: flex;\n    align-items: center;\n  }\n\n  &-simple &-item {\n    margin-right: 0;\n  }\n\n  &-simple &-jumper {\n    margin: 0 @pagination-simple-margin-prev-right;\n    color: var(~'@{arco-cssvars-prefix}-color-text-1');\n  }\n\n  &-simple &-jumper &-jumper-input {\n    width: @pagination-simple-input-width;\n    margin-left: 0;\n  }\n\n  &-simple &-item-previous,\n  &-simple &-item-next {\n    color: @pagination-simple-color-icon-arrow;\n    background-color: @pagination-simple-color-icon-arrow-bg;\n\n    &:not(.@{pagination-prefix-cls}-item-disabled):hover {\n      color: @pagination-simple-color-icon-arrow-text_hover;\n      background-color: @pagination-simple-color-icon-arrow-bg_hover;\n    }\n  }\n\n  &-simple &-item-previous&-item-disabled,\n  &-simple &-item-next&-item-disabled {\n    color: @pagination-simple-color-icon-arrow-text_disabled;\n    background-color: @pagination-simple-color-icon-arrow-bg_disabled;\n  }\n\n  // Disabled\n  &-disabled {\n    cursor: not-allowed;\n  }\n\n  &-disabled &-item,\n  &-disabled &-item:not(&-item-disabled):not(&-item-active):hover {\n    color: @pagination-color-item-text_disabled;\n    background-color: @pagination-color-bg-item_disabled;\n    border-color: @pagination-color-item-border_disabled;\n    cursor: not-allowed;\n  }\n\n  &&-disabled &-item-active {\n    color: @pagination-color-item-text_active_disabled;\n    background-color: @pagination-color-bg-item_active_disabled;\n    border-color: @pagination-color-item-border_active_disabled;\n  }\n\n  // size\n  &-size-mini &-item {\n    .page-item(mini);\n  }\n\n  &-size-mini &-total {\n    .total(mini);\n  }\n\n  &-size-mini &-option {\n    .option(mini);\n  }\n\n  &-size-mini &-jumper > span {\n    font-size: @pagination-size-mini-font-size;\n  }\n\n  &-size-small &-item {\n    .page-item(small);\n  }\n\n  &-size-small &-total {\n    .total(small);\n  }\n\n  &-size-small &-option {\n    .option(small);\n  }\n\n  &-size-small &-jumper > span {\n    font-size: @pagination-size-small-font-size;\n  }\n\n  &-size-large &-item {\n    .page-item(large);\n  }\n\n  &-size-large &-total {\n    .total(large);\n  }\n\n  &-size-large &-option {\n    .option(large);\n  }\n\n  &-size-large &-jumper > span {\n    font-size: @pagination-size-large-font-size;\n  }\n}\n"
  },
  {
    "path": "packages/web-vue/components/pagination/style/index.ts",
    "content": "import '../../style/index.less';\nimport '../../input/style';\nimport '../../select/style';\nimport './index.less';\n"
  },
  {
    "path": "packages/web-vue/components/pagination/style/token.less",
    "content": "@import '../../style/theme/index.less';\n\n@pagination-prefix-cls: ~'@{prefix}-pagination';\n\n@pagination-item-border-radius: @radius-small;\n@pagination-item-spacing: @spacing-4;\n@pagination-margin-total-spacing: @spacing-4;\n@pagination-margin-option-left: @spacing-4;\n@pagination-margin-jumper-left: @spacing-4;\n\n@pagination-size-mini: @size-mini;\n@pagination-size-small: @size-small;\n@pagination-size-default: @size-default;\n@pagination-size-large: @size-large;\n@pagination-padding-horizontal: 8px;\n\n@pagination-size-mini-font-size: @font-size-body-1;\n@pagination-size-small-font-size: @font-size-body-3;\n@pagination-size-default-font-size: @font-size-body-3;\n@pagination-size-large-font-size: @font-size-body-3;\n\n@pagination-size-icon-arrow_mini: @size-3;\n@pagination-size-icon-arrow_small: @size-3;\n@pagination-size-icon-arrow_default: @size-3;\n@pagination-size-icon-arrow_large: 14px;\n\n@pagination-size-icon-ellipsis: @size-4;\n\n@pagination-border-width: @border-none;\n@pagination-color-bg-item: @color-transparent;\n@pagination-color-bg-item_active: var(\n  ~'@{arco-cssvars-prefix}-color-primary-light-1'\n);\n@pagination-color-bg-item_hover: var(~'@{arco-cssvars-prefix}-color-fill-1');\n@pagination-color-bg-item_disabled: @color-transparent;\n@pagination-color-bg-item_active_disabled: var(\n  ~'@{arco-cssvars-prefix}-color-fill-1'\n);\n\n@pagination-color-item-text: var(~'@{arco-cssvars-prefix}-color-text-2');\n@pagination-color-item-text_hover: var(~'@{arco-cssvars-prefix}-color-text-2');\n@pagination-color-item-text_active: @color-primary-6;\n@pagination-color-item-text_disabled: var(\n  ~'@{arco-cssvars-prefix}-color-text-4'\n);\n@pagination-color-item-text_active_disabled: var(\n  ~'@{arco-cssvars-prefix}-color-primary-light-3'\n);\n\n@pagination-color-item-border: @color-transparent;\n@pagination-color-item-border_active: @color-transparent;\n@pagination-color-item-border_hover: @color-transparent;\n@pagination-color-item-border_disabled: @color-transparent;\n@pagination-color-item-border_active_disabled: @color-transparent;\n\n@pagination-color-icon-arrow: var(~'@{arco-cssvars-prefix}-color-text-2');\n@pagination-color-icon-arrow-bg: @color-transparent;\n@pagination-color-icon-arrow-bg_hover: var(\n  ~'@{arco-cssvars-prefix}-color-fill-1'\n);\n@pagination-color-icon-arrow-bg_disabled: @color-transparent;\n@pagination-color-icon-arrow-text_hover: @color-primary-6;\n@pagination-color-icon-arrow-text_disabled: var(\n  ~'@{arco-cssvars-prefix}-color-text-4'\n);\n\n// Simple\n@pagination-simple-input-width: @size-10;\n@pagination-simple-color-icon-arrow: var(\n  ~'@{arco-cssvars-prefix}-color-text-2'\n);\n@pagination-simple-color-icon-arrow-bg: @color-transparent;\n@pagination-simple-color-icon-arrow-bg_hover: var(\n  ~'@{arco-cssvars-prefix}-color-fill-1'\n);\n@pagination-simple-color-icon-arrow-bg_disabled: @color-transparent;\n@pagination-simple-color-icon-arrow-text_hover: @color-primary-6;\n@pagination-simple-color-icon-arrow-text_disabled: var(\n  ~'@{arco-cssvars-prefix}-color-text-4'\n);\n\n@pagination-simple-margin-prev-right: @spacing-2;\n@pagination-simple-margin-next-left: @spacing-6;\n@pagination-simple-margin-separator-left: @spacing-6;\n@pagination-simple-margin-separator-right: @spacing-6;\n// jumper\n@patination-jumper-input-width: @size-10;\n@pagination-color-jumper-goto: var(~'@{arco-cssvars-prefix}-color-text-3');\n\n// total text\n@pagination-color-text-total: var(~'@{arco-cssvars-prefix}-color-text-1');\n"
  },
  {
    "path": "packages/web-vue/components/pagination/utils.ts",
    "content": "export const getLegalPage = (\n  page: number,\n  { min, max }: { min: number; max: number }\n): number => {\n  if (page < min) {\n    return min;\n  }\n  if (page > max) {\n    return max;\n  }\n  return page;\n};\n"
  },
  {
    "path": "packages/web-vue/components/popconfirm/CHANGELOG.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.57.0\n\n`2025-03-10`\n\n### 💎 Enhancement\n\n- fix re-throw error in onBeforeOk for proper error handling ([#3407](https://github.com/arco-design/arco-design-vue/pull/3407))\n\n\n## 2.36.1\n\n`2022-09-09`\n\n### 💎 Enhancement\n\n- The on-before-ok property supports function returning a Promise ([#1623](https://github.com/arco-design/arco-design-vue/pull/1623))\n\n\n## 2.32.1\n\n`2022-07-01`\n\n### 💅 Style\n\n- Fix the problem that the icons under different types are black by default ([#1366](https://github.com/arco-design/arco-design-vue/pull/1366))\n\n\n## 2.18.0-beta.2\n\n`2022-02-25`\n\n### 💅 Style\n\n- Optimize display animation ([#733](https://github.com/arco-design/arco-design-vue/pull/733))\n\n\n## 2.10.1\n\n`2021-12-14`\n\n### 💅 Style\n\n- Fix the component style problem, and adjust the default size of the button to `mini`, which is consistent with React ([#390](https://github.com/arco-design/arco-design-vue/pull/390))\n\n\n## 2.7.0\n\n`2021-11-26`\n\n### 🆕 Feature\n\n- Added `on-before-ok` and `on-before-cancel` property events ([#229](https://github.com/arco-design/arco-design-vue/pull/229))\n\n\n## 2.1.1\n\n`2021-11-08`\n\n### 🐛 BugFix\n\n- Fix the problem that the parameters of the `ok/cancel` button are lost ([#105](https://github.com/arco-design/arco-design-vue/pull/105))\n\n"
  },
  {
    "path": "packages/web-vue/components/popconfirm/CHANGELOG.zh-CN.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.57.0\n\n`2025-03-10`\n\n### 💎 功能优化\n\n- 修复执行 onBeforeOk  时错误未传播的问题 ([#3407](https://github.com/arco-design/arco-design-vue/pull/3407))\n\n\n## 2.36.1\n\n`2022-09-09`\n\n### 💎 功能优化\n\n- on-before-ok 属性支持函数返回 Promise ([#1623](https://github.com/arco-design/arco-design-vue/pull/1623))\n\n\n## 2.32.1\n\n`2022-07-01`\n\n### 💅 样式更新\n\n- 修复不同类型下图标默认黑色的问题 ([#1366](https://github.com/arco-design/arco-design-vue/pull/1366))\n\n\n## 2.18.0-beta.2\n\n`2022-02-25`\n\n### 💅 样式更新\n\n- 优化显示动画 ([#733](https://github.com/arco-design/arco-design-vue/pull/733))\n\n\n## 2.10.1\n\n`2021-12-14`\n\n### 💅 样式更新\n\n- 修正组件样式问题，并调整按钮默认大小为 `mini`，同React保持一致 ([#390](https://github.com/arco-design/arco-design-vue/pull/390))\n\n\n## 2.7.0\n\n`2021-11-26`\n\n### 🆕 新增功能\n\n- 增加 `on-before-ok` 和 `on-before-cancel` 属性事件 ([#229](https://github.com/arco-design/arco-design-vue/pull/229))\n\n\n## 2.1.1\n\n`2021-11-08`\n\n### 🐛 问题修复\n\n- 修复 `ok/cancel` 按钮参数丢失的问题 ([#105](https://github.com/arco-design/arco-design-vue/pull/105))\n\n"
  },
  {
    "path": "packages/web-vue/components/popconfirm/README.en-US.md",
    "content": "```yaml\nmeta:\n  type: Component\n  category: Feedback\ntitle: Popconfirm\ndescription: Click on the element and a popconfirm will pop up.\n```\n\n*Auto translate by google.*\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/custom.md\n\n@import ./__demo__/position.md\n\n@import ./__demo__/type.md\n\n`<popconfirm>` 组件继承 `<trigger>` 组件的全部属性\n\n## API\n\n\n### `<popconfirm>` Props\n\n|Attribute|Description|Type|Default|\n|---|---|---|:---:|\n|content|Content|`string`|`-`|\n|position|Popup position|`'top' \\| 'tl' \\| 'tr' \\| 'bottom' \\| 'bl' \\| 'br' \\| 'left' \\| 'lt' \\| 'lb' \\| 'right' \\| 'rt' \\| 'rb'`|`'top'`|\n|popup-visible **(v-model)**|Whether the popconfirm is visible|`boolean`|`-`|\n|default-popup-visible|Whether the popconfirm is visible by default (uncontrolled mode)|`boolean`|`false`|\n|type|Types of the popconfirm|`'info' \\| 'success' \\| 'warning' \\| 'error'`|`'info'`|\n|ok-text|The content of the ok button|`string`|`-`|\n|cancel-text|The content of the cancel button|`string`|`-`|\n|ok-loading|Whether the ok button is in the loading state|`boolean`|`false`|\n|ok-button-props|Props of ok button|`ButtonProps`|`-`|\n|cancel-button-props|Props of cancel button|`ButtonProps`|`-`|\n|content-class|The class name of the popup content|`ClassName`|`-`|\n|content-style|The style of the popup content|`CSSProperties`|`-`|\n|arrow-class|The class name of the popup arrow|`ClassName`|`-`|\n|arrow-style|The style of the popup arrow|`CSSProperties`|`-`|\n|popup-container|Mount container for popup|`string \\| HTMLElement`|`-`|\n|on-before-ok|The callback function before the ok event is triggered. If false is returned, subsequent events will not be triggered, and done can also be used to close asynchronously.|`(  done: (closed: boolean) => void) => void \\| boolean \\| Promise<void \\| boolean>`|`-`|\n|on-before-cancel|The callback function before the cancel event is triggered. If it returns false, no subsequent events will be triggered.|`() => boolean`|`-`|\n### `<popconfirm>` Events\n\n|Event Name|Description|Parameters|\n|---|---|---|\n|popup-visible-change|Triggered when the visible or hidden state of the bubble confirmation box changes|visible: `boolean`|\n|ok|Triggered when the confirm button is clicked|-|\n|cancel|Triggered when the cancel button is clicked|-|\n### `<popconfirm>` Slots\n\n|Slot Name|Description|Parameters|\n|---|---|---|\n|icon|Icon|-|\n|content|Content|-|\n\n\n"
  },
  {
    "path": "packages/web-vue/components/popconfirm/README.zh-CN.md",
    "content": "```yaml\nmeta:\n  type: 组件\n  category: 反馈\ntitle: 气泡确认框 Popconfirm\ndescription: 点击元素，弹出气泡式的确认框。\n```\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/custom.md\n\n@import ./__demo__/position.md\n\n@import ./__demo__/type.md\n\n`<popconfirm>` 组件继承 `<trigger>` 组件的全部属性\n\n## API\n\n\n### `<popconfirm>` Props\n\n|参数名|描述|类型|默认值|\n|---|---|---|:---:|\n|content|内容|`string`|`-`|\n|position|弹出位置|`'top' \\| 'tl' \\| 'tr' \\| 'bottom' \\| 'bl' \\| 'br' \\| 'left' \\| 'lt' \\| 'lb' \\| 'right' \\| 'rt' \\| 'rb'`|`'top'`|\n|popup-visible **(v-model)**|气泡确认框是否可见|`boolean`|`-`|\n|default-popup-visible|气泡确认框默认是否可见（非受控模式）|`boolean`|`false`|\n|type|气泡确认框的类型|`'info' \\| 'success' \\| 'warning' \\| 'error'`|`'info'`|\n|ok-text|确认按钮的内容|`string`|`-`|\n|cancel-text|取消按钮的内容|`string`|`-`|\n|ok-loading|确认按钮是否为加载中状态|`boolean`|`false`|\n|ok-button-props|确认按钮的Props|`ButtonProps`|`-`|\n|cancel-button-props|取消按钮的Props|`ButtonProps`|`-`|\n|content-class|弹出框内容的类名|`ClassName`|`-`|\n|content-style|弹出框内容的样式|`CSSProperties`|`-`|\n|arrow-class|弹出框箭头的类名|`ClassName`|`-`|\n|arrow-style|弹出框箭头的样式|`CSSProperties`|`-`|\n|popup-container|弹出框的挂载点|`string \\| HTMLElement`|`-`|\n|on-before-ok|触发 ok 事件前的回调函数。如果返回 false 则不会触发后续事件，也可使用 done 进行异步关闭。|`(  done: (closed: boolean) => void) => void \\| boolean \\| Promise<void \\| boolean>`|`-`|\n|on-before-cancel|触发 cancel 事件前的回调函数。如果返回 false 则不会触发后续事件。|`() => boolean`|`-`|\n### `<popconfirm>` Events\n\n|事件名|描述|参数|\n|---|---|---|\n|popup-visible-change|气泡确认框的显隐状态改变时触发|visible: `boolean`|\n|ok|点击确认按钮时触发|-|\n|cancel|点击取消按钮时触发|-|\n### `<popconfirm>` Slots\n\n|插槽名|描述|参数|\n|---|:---:|---|\n|icon|图标|-|\n|content|内容|-|\n\n\n"
  },
  {
    "path": "packages/web-vue/components/popconfirm/TEMPLATE.md",
    "content": "## zh-CN\n```yaml\nmeta:\n  type: 组件\n  category: 反馈\ntitle: 气泡确认框 Popconfirm\ndescription: 点击元素，弹出气泡式的确认框。\n```\n---\n## en-US\n```yaml\nmeta:\n  type: Component\n  category: Feedback\ntitle: Popconfirm\ndescription: Click on the element and a popconfirm will pop up.\n```\n---\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/custom.md\n\n@import ./__demo__/position.md\n\n@import ./__demo__/type.md\n\n`<popconfirm>` 组件继承 `<trigger>` 组件的全部属性\n\n## API\n\n%%API(popconfirm.vue)%%\n"
  },
  {
    "path": "packages/web-vue/components/popconfirm/__demo__/async.md",
    "content": "```yaml\ntitle:\n  zh-CN: 异步关闭\n  en-US: Async Close\n```\n\n## zh-CN\n\n可以通过 on-before-ok 更简洁的实现异步关闭功能\n\n---\n\n## en-US\n\n$END$\n\n---\n\n```vue\n<template>\n  <a-popconfirm @before-ok=\"handleBeforeOk\">\n    <a-button>Click To Show</a-button>\n    <template #content>\n      <a-form>\n        <a-form-item label=\"Name\">\n          <a-input/>\n        </a-form-item>\n        <a-form-item label=\"Post\">\n          <a-input/>\n        </a-form-item>\n      </a-form>\n    </template>\n  </a-popconfirm>\n</template>\n\n<script setup>\nimport { ref } from 'vue';\n\nconst visible = ref(false)\n\nconst handleClick = () => {\n  visible.value = true;\n}\n\nconst handleBeforeOk = (done) => {\n  window.setTimeout(() => {\n    done()\n  }, 3000)\n}\n\nconst handleCancel = () => {\n  visible.value = false;\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/popconfirm/__demo__/basic.md",
    "content": "```yaml\ntitle:\n  zh-CN: 基本用法\n  en-US: Basic Usage\n```\n\n## zh-CN\n\n气泡确认框的基本用法。\n\n---\n\n## en-US\n\nBasic usage of popconfirm.\n\n---\n\n```vue\n<template>\n  <a-popconfirm content=\"Are you sure you want to delete?\">\n    <a-button>Click To Delete</a-button>\n  </a-popconfirm>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/popconfirm/__demo__/custom.md",
    "content": "```yaml\ntitle:\n  zh-CN: 自定义按钮\n  en-US: Custom Button\n```\n\n\n## zh-CN\n\n自定义按钮的文字或图标。\n\n---\n\n## en-US\n\nCustomize the text or icon of the button.\n\n---\n\n```vue\n<template>\n  <a-popconfirm content=\"Do you want to discard the draft?\" okText=\"Discard\" cancelText=\"No\">\n    <a-button>Discard</a-button>\n  </a-popconfirm>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/popconfirm/__demo__/position.md",
    "content": "```yaml\ntitle:\n  zh-CN: 弹出位置\n  en-US: Popup Position\n```\n\n\n## zh-CN\n\n`popconfirm` 支持 12 个不同的方位。分别为：`上左` `上` `上右` `下左` `下` `下右` `左上` `左` `左下` `右上` `右` `右下`。\n\n---\n\n## en-US\n\n`popconfirm` supports 12 different positions. They are: `upper left` `upper` `upper right` `lower left` `down` `lower right` `upper left` `left` `lower left` `upper right` `right` `lower right`.\n\n---\n\n```vue\n<template>\n  <div :style=\"{position: 'relative', width: '440px', height: '280px'}\">\n    <a-popconfirm content=\"This is a Popconfirm\" position=\"tl\">\n      <a-button class=\"button\" :style=\"{position: 'absolute',top:'0',left:'70px'}\">TL</a-button>\n    </a-popconfirm>\n    <a-popconfirm content=\"This is a Popconfirm\" position=\"top\">\n      <a-button class=\"button\" :style=\"{position: 'absolute',top:'0',left:'180px'}\">TOP</a-button>\n    </a-popconfirm>\n    <a-popconfirm content=\"This is a Popconfirm\" position=\"tr\">\n      <a-button class=\"button\" :style=\"{position: 'absolute',top:'0',left:'290px'}\">TR</a-button>\n    </a-popconfirm>\n    <a-popconfirm content=\"This is a Popconfirm\" position=\"bl\">\n      <a-button class=\"button\" :style=\"{position: 'absolute',top:'240px',left:'70px'}\">BL</a-button>\n    </a-popconfirm>\n    <a-popconfirm content=\"This is a Popconfirm\" position=\"bottom\">\n      <a-button class=\"button\" :style=\"{position: 'absolute',top:'240px',left:'180px'}\">BOTTOM</a-button>\n    </a-popconfirm>\n    <a-popconfirm content=\"This is a Popconfirm\" position=\"br\">\n      <a-button class=\"button\" :style=\"{position: 'absolute',top:'240px',left:'290px'}\">BR</a-button>\n    </a-popconfirm>\n    <a-popconfirm content=\"This is a Popconfirm\" position=\"lt\">\n      <a-button class=\"button\" :style=\"{position: 'absolute',top:'60px',left:'10px'}\">LT</a-button>\n    </a-popconfirm>\n    <a-popconfirm content=\"This is a Popconfirm\" position=\"left\">\n      <a-button class=\"button\" :style=\"{position: 'absolute',top:'120px',left:'10px'}\">LEFT</a-button>\n    </a-popconfirm>\n    <a-popconfirm content=\"This is a Popconfirm\" position=\"lb\">\n      <a-button class=\"button\" :style=\"{position: 'absolute',top:'180px',left:'10px'}\">LB</a-button>\n    </a-popconfirm>\n    <a-popconfirm content=\"This is a Popconfirm\" position=\"rt\">\n      <a-button class=\"button\" :style=\"{position: 'absolute',top:'60px',left:'350px'}\">RT</a-button>\n    </a-popconfirm>\n    <a-popconfirm content=\"This is a Popconfirm\" position=\"right\">\n      <a-button class=\"button\" :style=\"{position: 'absolute',top:'120px',left:'350px'}\">RIGHT</a-button>\n    </a-popconfirm>\n    <a-popconfirm content=\"This is a Popconfirm\" position=\"rb\">\n      <a-button class=\"button\" :style=\"{position: 'absolute',top:'180px',left:'350px'}\">RB</a-button>\n    </a-popconfirm>\n  </div>\n</template>\n\n<style scoped lang=\"less\">\n.button{\n  width: 100px;\n}\n</style>\n```\n"
  },
  {
    "path": "packages/web-vue/components/popconfirm/__demo__/type.md",
    "content": "```yaml\ntitle:\n  zh-CN: 确认框类型\n  en-US: Type\n```\n\n## zh-CN\n\n通过 `type` 属性可以设置确认框类型。\n\n---\n\n## en-US\n\nThe type of the confirmation box can be set via the `type` property.\n\n---\n\n```vue\n<template>\n  <a-space>\n    <a-popconfirm content=\"Are you sure you want to delete?\" type=\"info\">\n      <a-button>Click To Delete</a-button>\n    </a-popconfirm>\n    <a-popconfirm content=\"Are you sure you want to delete?\" type=\"success\">\n      <a-button>Click To Delete</a-button>\n    </a-popconfirm>\n    <a-popconfirm content=\"Are you sure you want to delete?\" type=\"warning\">\n      <a-button>Click To Delete</a-button>\n    </a-popconfirm>\n    <a-popconfirm content=\"Are you sure you want to delete?\" type=\"error\">\n      <a-button>Click To Delete</a-button>\n    </a-popconfirm>\n  </a-space>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/popconfirm/__test__/__snapshots__/demo.test.ts.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`<popconfirm> demo: render [async] correctly 1`] = `\n\"<button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n  <!--v-if-->Click To Show\n</button>\"\n`;\n\nexports[`<popconfirm> demo: render [basic] correctly 1`] = `\n\"<button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n  <!--v-if-->Click To Delete\n</button>\"\n`;\n\nexports[`<popconfirm> demo: render [custom] correctly 1`] = `\n\"<button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n  <!--v-if-->Discard\n</button>\"\n`;\n\nexports[`<popconfirm> demo: render [position] correctly 1`] = `\n\"<div style=\\\\\"position: relative; width: 440px; height: 280px;\\\\\"><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal button\\\\\" type=\\\\\"button\\\\\" style=\\\\\"position: absolute; top: 0px; left: 70px;\\\\\">\n    <!--v-if-->TL\n  </button>\n  <!----><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal button\\\\\" type=\\\\\"button\\\\\" style=\\\\\"position: absolute; top: 0px; left: 180px;\\\\\">\n    <!--v-if-->TOP\n  </button>\n  <!----><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal button\\\\\" type=\\\\\"button\\\\\" style=\\\\\"position: absolute; top: 0px; left: 290px;\\\\\">\n    <!--v-if-->TR\n  </button>\n  <!----><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal button\\\\\" type=\\\\\"button\\\\\" style=\\\\\"position: absolute; top: 240px; left: 70px;\\\\\">\n    <!--v-if-->BL\n  </button>\n  <!----><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal button\\\\\" type=\\\\\"button\\\\\" style=\\\\\"position: absolute; top: 240px; left: 180px;\\\\\">\n    <!--v-if-->BOTTOM\n  </button>\n  <!----><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal button\\\\\" type=\\\\\"button\\\\\" style=\\\\\"position: absolute; top: 240px; left: 290px;\\\\\">\n    <!--v-if-->BR\n  </button>\n  <!----><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal button\\\\\" type=\\\\\"button\\\\\" style=\\\\\"position: absolute; top: 60px; left: 10px;\\\\\">\n    <!--v-if-->LT\n  </button>\n  <!----><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal button\\\\\" type=\\\\\"button\\\\\" style=\\\\\"position: absolute; top: 120px; left: 10px;\\\\\">\n    <!--v-if-->LEFT\n  </button>\n  <!----><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal button\\\\\" type=\\\\\"button\\\\\" style=\\\\\"position: absolute; top: 180px; left: 10px;\\\\\">\n    <!--v-if-->LB\n  </button>\n  <!----><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal button\\\\\" type=\\\\\"button\\\\\" style=\\\\\"position: absolute; top: 60px; left: 350px;\\\\\">\n    <!--v-if-->RT\n  </button>\n  <!----><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal button\\\\\" type=\\\\\"button\\\\\" style=\\\\\"position: absolute; top: 120px; left: 350px;\\\\\">\n    <!--v-if-->RIGHT\n  </button>\n  <!----><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal button\\\\\" type=\\\\\"button\\\\\" style=\\\\\"position: absolute; top: 180px; left: 350px;\\\\\">\n    <!--v-if-->RB\n  </button>\n  <!---->\n</div>\"\n`;\n\nexports[`<popconfirm> demo: render [type] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 8px; row-gap: 8px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n      <!--v-if-->Click To Delete\n    </button>\n    <!---->\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n      <!--v-if-->Click To Delete\n    </button>\n    <!---->\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n      <!--v-if-->Click To Delete\n    </button>\n    <!---->\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n      <!--v-if-->Click To Delete\n    </button>\n    <!---->\n  </div>\n</div>\"\n`;\n"
  },
  {
    "path": "packages/web-vue/components/popconfirm/__test__/demo.test.ts",
    "content": "import demoTest from '../../../scripts/demo-test';\n\ndemoTest('popconfirm');\n"
  },
  {
    "path": "packages/web-vue/components/popconfirm/__test__/index.test.ts",
    "content": "import { nextTick } from 'vue';\nimport { mount } from '@vue/test-utils';\nimport Popconfirm from '../index';\n\ndescribe('Popconfirm', () => {\n  test('should emit ok/cancel events', async () => {\n    const wrapper = mount(Popconfirm, {\n      props: {\n        content: 'Content',\n        defaultPopupVisible: true,\n        renderToBody: false,\n      },\n      slots: {\n        default: '<button>Button</button>',\n      },\n    });\n\n    await nextTick();\n    const buttons = wrapper.findAllComponents({ name: 'Button' });\n    await buttons[0].trigger('click');\n    expect(wrapper.emitted('cancel')).toHaveLength(1);\n    await buttons[1].trigger('click');\n    expect(wrapper.emitted('ok')).toHaveLength(1);\n  });\n});\n"
  },
  {
    "path": "packages/web-vue/components/popconfirm/index.ts",
    "content": "import type { App } from 'vue';\nimport type { ArcoOptions } from '../_utils/types';\nimport { setGlobalConfig, getComponentPrefix } from '../_utils/global-config';\nimport _Popconfirm from './popconfirm.vue';\n\nconst Popconfirm = Object.assign(_Popconfirm, {\n  install: (app: App, options?: ArcoOptions) => {\n    setGlobalConfig(app, options);\n    const componentPrefix = getComponentPrefix(options);\n\n    app.component(componentPrefix + _Popconfirm.name, _Popconfirm);\n  },\n});\n\nexport type PopconfirmInstance = InstanceType<typeof _Popconfirm>;\n\nexport default Popconfirm;\n"
  },
  {
    "path": "packages/web-vue/components/popconfirm/popconfirm.vue",
    "content": "<template>\n  <trigger\n    :class=\"prefixCls\"\n    trigger=\"click\"\n    :position=\"position\"\n    show-arrow\n    :popup-visible=\"computedPopupVisible\"\n    :popup-offset=\"10\"\n    :popup-container=\"popupContainer\"\n    :content-class=\"contentCls\"\n    :content-style=\"contentStyle\"\n    :arrow-class=\"arrowCls\"\n    :arrow-style=\"arrowStyle\"\n    animation-name=\"zoom-in-fade-out\"\n    auto-fit-transform-origin\n    @popup-visible-change=\"handlePopupVisibleChange\"\n  >\n    <slot />\n    <template #content>\n      <div :class=\"`${prefixCls}-body`\">\n        <span :class=\"`${prefixCls}-icon`\">\n          <slot name=\"icon\">\n            <icon-info-circle-fill v-if=\"type === 'info'\" />\n            <icon-check-circle-fill v-else-if=\"type === 'success'\" />\n            <icon-exclamation-circle-fill v-else-if=\"type === 'warning'\" />\n            <icon-close-circle-fill v-else-if=\"type === 'error'\" />\n          </slot>\n        </span>\n        <span :class=\"`${prefixCls}-content`\">\n          <slot name=\"content\">{{ content }}</slot>\n        </span>\n      </div>\n      <div :class=\"`${prefixCls}-footer`\">\n        <arco-button\n          size=\"mini\"\n          v-bind=\"cancelButtonProps\"\n          @click=\"handleCancel\"\n        >\n          {{ cancelText || t('popconfirm.cancelText') }}\n        </arco-button>\n        <arco-button\n          type=\"primary\"\n          size=\"mini\"\n          v-bind=\"okButtonProps\"\n          :loading=\"mergedOkLoading\"\n          @click=\"handleOk\"\n        >\n          {{ okText || t('popconfirm.okText') }}\n        </arco-button>\n      </div>\n    </template>\n  </trigger>\n</template>\n\n<script lang=\"ts\">\nimport type { PropType } from 'vue';\nimport { computed, CSSProperties, defineComponent, ref } from 'vue';\nimport { getPrefixCls } from '../_utils/global-config';\nimport type { MessageType, TriggerPosition } from '../_utils/constant';\nimport IconInfoCircleFill from '../icon/icon-info-circle-fill';\nimport IconCheckCircleFill from '../icon/icon-check-circle-fill';\nimport IconExclamationCircleFill from '../icon/icon-exclamation-circle-fill';\nimport IconCloseCircleFill from '../icon/icon-close-circle-fill';\nimport ArcoButton, { ButtonProps } from '../button';\nimport Trigger from '../trigger';\nimport { useI18n } from '../locale';\nimport { ClassName } from '../_utils/types';\nimport { isBoolean, isFunction, isPromise } from '../_utils/is';\n\nexport default defineComponent({\n  name: 'Popconfirm',\n  components: {\n    ArcoButton,\n    Trigger,\n    IconInfoCircleFill,\n    IconCheckCircleFill,\n    IconExclamationCircleFill,\n    IconCloseCircleFill,\n  },\n  props: {\n    /**\n     * @zh 内容\n     * @en Content\n     */\n    content: String,\n    /**\n     * @zh 弹出位置\n     * @en Popup position\n     * @values 'top','tl','tr','bottom','bl','br','left','lt','lb','right','rt','rb'\n     */\n    position: {\n      type: String as PropType<TriggerPosition>,\n      default: 'top',\n    },\n    /**\n     * @zh 气泡确认框是否可见\n     * @en Whether the popconfirm is visible\n     * @vModel\n     */\n    popupVisible: {\n      type: Boolean,\n      default: undefined,\n    },\n    /**\n     * @zh 气泡确认框默认是否可见（非受控模式）\n     * @en Whether the popconfirm is visible by default (uncontrolled mode)\n     */\n    defaultPopupVisible: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 气泡确认框的类型\n     * @en Types of the popconfirm\n     * @values 'info','success','warning','error'\n     */\n    type: {\n      type: String as PropType<MessageType>,\n      default: 'info',\n    },\n    /**\n     * @zh 确认按钮的内容\n     * @en The content of the ok button\n     */\n    okText: String,\n    /**\n     * @zh 取消按钮的内容\n     * @en The content of the cancel button\n     */\n    cancelText: String,\n    /**\n     * @zh 确认按钮是否为加载中状态\n     * @en Whether the ok button is in the loading state\n     */\n    okLoading: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 确认按钮的Props\n     * @en Props of ok button\n     */\n    okButtonProps: {\n      type: Object as PropType<ButtonProps>,\n    },\n    /**\n     * @zh 取消按钮的Props\n     * @en Props of cancel button\n     */\n    cancelButtonProps: {\n      type: Object as PropType<ButtonProps>,\n    },\n    /**\n     * @zh 弹出框内容的类名\n     * @en The class name of the popup content\n     */\n    contentClass: {\n      type: [String, Array, Object] as PropType<ClassName>,\n    },\n    /**\n     * @zh 弹出框内容的样式\n     * @en The style of the popup content\n     */\n    contentStyle: {\n      type: Object as PropType<CSSProperties>,\n    },\n    /**\n     * @zh 弹出框箭头的类名\n     * @en The class name of the popup arrow\n     */\n    arrowClass: {\n      type: [String, Array, Object] as PropType<ClassName>,\n    },\n    /**\n     * @zh 弹出框箭头的样式\n     * @en The style of the popup arrow\n     */\n    arrowStyle: {\n      type: Object as PropType<CSSProperties>,\n    },\n    /**\n     * @zh 弹出框的挂载点\n     * @en Mount container for popup\n     */\n    popupContainer: {\n      type: [String, Object] as PropType<string | HTMLElement>,\n    },\n    /**\n     * @zh 触发 ok 事件前的回调函数。如果返回 false 则不会触发后续事件，也可使用 done 进行异步关闭。\n     * @en The callback function before the ok event is triggered. If false is returned, subsequent events will not be triggered, and done can also be used to close asynchronously.\n     */\n    onBeforeOk: {\n      type: Function as PropType<\n        (\n          done: (closed: boolean) => void\n        ) => void | boolean | Promise<void | boolean>\n      >,\n    },\n    /**\n     * @zh 触发 cancel 事件前的回调函数。如果返回 false 则不会触发后续事件。\n     * @en The callback function before the cancel event is triggered. If it returns false, no subsequent events will be triggered.\n     */\n    onBeforeCancel: {\n      type: Function as PropType<() => boolean>,\n    },\n  },\n  emits: {\n    'update:popupVisible': (visible: boolean) => true,\n    /**\n     * @zh 气泡确认框的显隐状态改变时触发\n     * @en Triggered when the visible or hidden state of the bubble confirmation box changes\n     * @param {boolean} visible\n     */\n    'popupVisibleChange': (visible: boolean) => true,\n    /**\n     * @zh 点击确认按钮时触发\n     * @en Triggered when the confirm button is clicked\n     */\n    'ok': () => true,\n    /**\n     * @zh 点击取消按钮时触发\n     * @en Triggered when the cancel button is clicked\n     */\n    'cancel': () => true,\n  },\n  /**\n   * @zh 内容\n   * @en Content\n   * @slot content\n   */\n  /**\n   * @zh 图标\n   * @en Icon\n   * @slot icon\n   */\n  setup(props, { emit }) {\n    const prefixCls = getPrefixCls('popconfirm');\n    const { t } = useI18n();\n\n    const _popupVisible = ref(props.defaultPopupVisible);\n    const computedPopupVisible = computed(\n      () => props.popupVisible ?? _popupVisible.value\n    );\n    const _okLoading = ref(false);\n    const mergedOkLoading = computed(() => props.okLoading || _okLoading.value);\n\n    // Used to ignore closed Promises\n    let promiseNumber = 0;\n\n    const close = () => {\n      promiseNumber++;\n      if (_okLoading.value) {\n        _okLoading.value = false;\n      }\n      _popupVisible.value = false;\n      emit('update:popupVisible', false);\n      emit('popupVisibleChange', false);\n    };\n\n    const handlePopupVisibleChange = (visible: boolean) => {\n      if (!visible) {\n        close();\n      } else {\n        _popupVisible.value = visible;\n        emit('update:popupVisible', visible);\n        emit('popupVisibleChange', visible);\n      }\n    };\n\n    const handleOk = async () => {\n      const currentPromiseNumber = promiseNumber;\n      const closed = await new Promise<boolean>(\n        // eslint-disable-next-line no-async-promise-executor\n        async (resolve) => {\n          if (isFunction(props.onBeforeOk)) {\n            let result = props.onBeforeOk((closed = true) => resolve(closed));\n            if (isPromise(result) || !isBoolean(result)) {\n              _okLoading.value = true;\n            }\n            if (isPromise(result)) {\n              try {\n                // if onBeforeOk is Promise<void> ,set Defaults true\n                result = (await result) ?? true;\n              } catch (error) {\n                result = false;\n                throw error;\n              }\n            }\n            if (isBoolean(result)) {\n              resolve(result);\n            }\n          } else {\n            resolve(true);\n          }\n        }\n      );\n\n      if (currentPromiseNumber === promiseNumber) {\n        if (closed) {\n          emit('ok');\n          close();\n        } else if (_okLoading.value) {\n          _okLoading.value = false;\n        }\n      }\n    };\n\n    const handleCancel = () => {\n      let result = true;\n      if (isFunction(props.onBeforeCancel)) {\n        result = props.onBeforeCancel() ?? false;\n      }\n      if (result) {\n        emit('cancel');\n        close();\n      }\n    };\n\n    const contentCls = computed(() => [\n      `${prefixCls}-popup-content`,\n      props.contentClass,\n    ]);\n\n    const arrowCls = computed(() => [\n      `${prefixCls}-popup-arrow`,\n      props.arrowClass,\n    ]);\n\n    return {\n      prefixCls,\n      contentCls,\n      arrowCls,\n      computedPopupVisible,\n      mergedOkLoading,\n      handlePopupVisibleChange,\n      handleOk,\n      handleCancel,\n      t,\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/popconfirm/style/index.less",
    "content": "@import './token.less';\n@import '../../popover/style/token.less';\n\n@popconfirm-prefix-cls: ~'@{prefix}-popconfirm';\n\n.@{popconfirm-prefix-cls} {\n  &-popup-content {\n    box-sizing: border-box;\n    padding: @popconfirm-padding-vertical @popconfirm-padding-horizontal;\n    color: @popup-color-content-text;\n    font-size: @popup-font-size;\n    line-height: @line-height-base;\n    background-color: @popconfirm-color-content-bg;\n    border: @border-1 solid @popconfirm-color-border;\n    border-radius: @popconfirm-border-radius;\n    box-shadow: @popconfirm-shadow;\n\n    .@{popconfirm-prefix-cls}-body {\n      position: relative;\n      display: flex;\n      align-items: flex-start;\n      margin-bottom: @popconfirm-margin-title-bottom;\n      color: @popconfirm-color-title-text;\n      font-size: @popconfirm-font-title-size;\n\n      .@{popconfirm-prefix-cls}-icon {\n        display: inline-flex;\n        align-items: center;\n        height: @line-height-base * @popconfirm-font-title-size;\n        margin-right: @popconfirm-margin-icon-right;\n        font-size: @popconfirm-size-title-icon;\n\n        .@{prefix}-icon-exclamation-circle-fill {\n          color: @popconfirm-color-title-icon;\n        }\n\n        .@{prefix}-icon-check-circle-fill {\n          color: @popconfirm-color-title-icon_success;\n        }\n\n        .@{prefix}-icon-info-circle-fill {\n          color: @popconfirm-color-title-icon_info;\n        }\n\n        .@{prefix}-icon-close-circle-fill {\n          color: @popconfirm-color-title-icon_danger;\n        }\n      }\n\n      .@{popconfirm-prefix-cls}-content {\n        text-align: left;\n        word-wrap: break-word;\n      }\n    }\n\n    .@{popconfirm-prefix-cls}-footer {\n      text-align: right;\n\n      > button {\n        margin-left: @popconfirm-margin-button-left;\n      }\n    }\n  }\n\n  &-popup-arrow {\n    z-index: 1;\n    background-color: @popup-color-content-bg;\n    border: @border-1 solid @popup-color-border;\n  }\n}\n"
  },
  {
    "path": "packages/web-vue/components/popconfirm/style/index.ts",
    "content": "import '../../style/index.less';\nimport '../../button/style';\nimport '../../trigger/style';\nimport './index.less';\n"
  },
  {
    "path": "packages/web-vue/components/popconfirm/style/token.less",
    "content": "@import '../../style/theme/index.less';\n\n@popconfirm-padding-horizontal: @spacing-7;\n@popconfirm-padding-vertical: @spacing-7;\n@popconfirm-margin-title-bottom: @spacing-7;\n@popconfirm-size-title-icon: 18px;\n@popconfirm-margin-icon-right: @spacing-4;\n@popconfirm-margin-button-left: @spacing-4;\n@popconfirm-font-title-size: @font-size-body-3;\n@popconfirm-color-title-text: var(~'@{arco-cssvars-prefix}-color-text-1');\n\n@popconfirm-color-content-bg: var(~'@{arco-cssvars-prefix}-color-bg-popup');\n@popconfirm-color-border: var(~'@{arco-cssvars-prefix}-color-neutral-3');\n@popconfirm-border-radius: @radius-medium;\n@popconfirm-shadow: @shadow2-down;\n// type\n@popconfirm-color-title-icon: @color-warning-6;\n@popconfirm-color-title-icon_danger: @color-danger-6;\n@popconfirm-color-title-icon_success: @color-success-6;\n@popconfirm-color-title-icon_info: @color-primary-6;\n"
  },
  {
    "path": "packages/web-vue/components/popover/CHANGELOG.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.18.0-beta.2\n\n`2022-02-25`\n\n### 💅 Style\n\n- Optimize display animation ([#733](https://github.com/arco-design/arco-design-vue/pull/733))\n\n"
  },
  {
    "path": "packages/web-vue/components/popover/CHANGELOG.zh-CN.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.18.0-beta.2\n\n`2022-02-25`\n\n### 💅 样式更新\n\n- 优化显示动画 ([#733](https://github.com/arco-design/arco-design-vue/pull/733))\n\n"
  },
  {
    "path": "packages/web-vue/components/popover/README.en-US.md",
    "content": "```yaml\nmeta:\n  type: Component\n  category: Data Display\ntitle: Popover\ndescription: When the mouse hovers, focus, or click on a component, a bubble-like card floating layer will pop up. You can manipulate the elements on the card.\n```\n\n*Auto translate by google.*\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/trigger.md\n\n@import ./__demo__/position.md\n\n`<popover>` 组件继承 `<trigger>` 组件的全部属性\n\n## API\n\n\n### `<popover>` Props\n\n|Attribute|Description|Type|Default|\n|---|---|---|:---:|\n|popup-visible **(v-model)**|Whether the popover is visible|`boolean`|`-`|\n|default-popup-visible|Whether the popover is visible by default (uncontrolled mode)|`boolean`|`false`|\n|title|Title|`string`|`-`|\n|content|Content|`string`|`-`|\n|trigger|Trigger method|`'hover' \\| 'click' \\| 'focus' \\| 'contextMenu'`|`'hover'`|\n|position|Pop-up position|`'top' \\| 'tl' \\| 'tr' \\| 'bottom' \\| 'bl' \\| 'br' \\| 'left' \\| 'lt' \\| 'lb' \\| 'right' \\| 'rt' \\| 'rb'`|`'top'`|\n|content-class|The class name of the popup content|`ClassName`|`-`|\n|content-style|The style of the popup content|`CSSProperties`|`-`|\n|arrow-class|The class name of the popup arrow|`ClassName`|`-`|\n|arrow-style|The style of the popup arrow|`CSSProperties`|`-`|\n|popup-container|Mount container for pop-up box|`string \\| HTMLElement`|`-`|\n### `<popover>` Events\n\n|Event Name|Description|Parameters|\n|---|---|---|\n|popup-visible-change|Triggered when the text bubble display status changes|visible: `boolean`|\n### `<popover>` Slots\n\n|Slot Name|Description|Parameters|\n|---|---|---|\n|title|Title|-|\n|content|Content|-|\n\n\n"
  },
  {
    "path": "packages/web-vue/components/popover/README.zh-CN.md",
    "content": "```yaml\nmeta:\n  type: 组件\n  category: 数据展示\ntitle: 气泡卡片 Popover\ndescription: 鼠标悬停、聚焦或点击在某个组件时，弹出的气泡式的卡片浮层。可以对卡片上的元素进行操作。\n```\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/trigger.md\n\n@import ./__demo__/position.md\n\n`<popover>` 组件继承 `<trigger>` 组件的全部属性\n\n## API\n\n\n### `<popover>` Props\n\n|参数名|描述|类型|默认值|\n|---|---|---|:---:|\n|popup-visible **(v-model)**|文字气泡是否可见|`boolean`|`-`|\n|default-popup-visible|文字气泡默认是否可见（非受控模式）|`boolean`|`false`|\n|title|标题|`string`|`-`|\n|content|内容|`string`|`-`|\n|trigger|触发方式|`'hover' \\| 'click' \\| 'focus' \\| 'contextMenu'`|`'hover'`|\n|position|弹出位置|`'top' \\| 'tl' \\| 'tr' \\| 'bottom' \\| 'bl' \\| 'br' \\| 'left' \\| 'lt' \\| 'lb' \\| 'right' \\| 'rt' \\| 'rb'`|`'top'`|\n|content-class|弹出框内容的类名|`ClassName`|`-`|\n|content-style|弹出框内容的样式|`CSSProperties`|`-`|\n|arrow-class|弹出框箭头的类名|`ClassName`|`-`|\n|arrow-style|弹出框箭头的样式|`CSSProperties`|`-`|\n|popup-container|弹出框的挂载容器|`string \\| HTMLElement`|`-`|\n### `<popover>` Events\n\n|事件名|描述|参数|\n|---|---|---|\n|popup-visible-change|文字气泡显示状态改变时触发|visible: `boolean`|\n### `<popover>` Slots\n\n|插槽名|描述|参数|\n|---|:---:|---|\n|title|标题|-|\n|content|内容|-|\n\n\n"
  },
  {
    "path": "packages/web-vue/components/popover/TEMPLATE.md",
    "content": "## zh-CN\n```yaml\nmeta:\n  type: 组件\n  category: 数据展示\ntitle: 气泡卡片 Popover\ndescription: 鼠标悬停、聚焦或点击在某个组件时，弹出的气泡式的卡片浮层。可以对卡片上的元素进行操作。\n```\n---\n## en-US\n```yaml\nmeta:\n  type: Component\n  category: Data Display\ntitle: Popover\ndescription: When the mouse hovers, focus, or click on a component, a bubble-like card floating layer will pop up. You can manipulate the elements on the card.\n```\n---\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/trigger.md\n\n@import ./__demo__/position.md\n\n`<popover>` 组件继承 `<trigger>` 组件的全部属性\n\n## API\n\n%%API(popover.vue)%%\n"
  },
  {
    "path": "packages/web-vue/components/popover/__demo__/basic.md",
    "content": "```yaml\ntitle:\n  zh-CN: 基本用法\n  en-US: Basic Usage\n```\n\n## zh-CN\n\n鼠标移入或点击，弹出气泡，可对浮层上元素进行操作，承载复杂内容和操作。\n\n---\n\n## en-US\n\nMove the mouse in or click to pop up bubbles, which can operate on the elements on the floating layer, and carry complex content and operations.\n\n---\n\n```vue\n<template>\n  <a-popover title=\"Title\">\n    <a-button>Hover</a-button>\n    <template #content>\n      <p>Here is the text content</p>\n      <p>Here is the text content</p>\n    </template>\n  </a-popover>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/popover/__demo__/position.md",
    "content": "```yaml\ntitle:\n  zh-CN: 弹出位置\n  en-US: Popup Position\n```\n\n## zh-CN\n\n`Popover`支持 12 个不同的方位。分别为：`上左` `上` `上右` `下左` `下` `下右` `左上` `左` `左下` `右上` `右` `右下`。\n\n---\n\n## en-US\n\n`Popover` supports 12 different positions. They are: `upper left` `upper` `upper right` `lower left` `down` `lower right` `upper left` `left` `lower left` `upper right` `right` `lower right`.\n\n---\n\n```vue\n<template>\n  <div :style=\"{position: 'relative', width: '440px', height: '280px'}\">\n    <a-popover position=\"tl\">\n      <a-button class=\"button\" :style=\"{position: 'absolute',top:'0',left:'70px'}\">TL</a-button>\n      <template #content>\n        <p>Here is the text content</p>\n        <p>Here is the text content</p>\n      </template>\n    </a-popover>\n    <a-popover position=\"top\">\n      <a-button class=\"button\" :style=\"{position: 'absolute',top:'0',left:'180px'}\">TOP</a-button>\n      <template #content>\n        <p>Here is the text content</p>\n        <p>Here is the text content</p>\n      </template>\n    </a-popover>\n    <a-popover position=\"tr\">\n      <a-button class=\"button\" :style=\"{position: 'absolute',top:'0',left:'290px'}\">TR</a-button>\n      <template #content>\n        <p>Here is the text content</p>\n        <p>Here is the text content</p>\n      </template>\n    </a-popover>\n    <a-popover position=\"bl\">\n      <a-button class=\"button\" :style=\"{position: 'absolute',top:'240px',left:'70px'}\">BL</a-button>\n      <template #content>\n        <p>Here is the text content</p>\n        <p>Here is the text content</p>\n      </template>\n    </a-popover>\n    <a-popover position=\"bottom\">\n      <a-button class=\"button\" :style=\"{position: 'absolute',top:'240px',left:'180px'}\">BOTTOM</a-button>\n      <template #content>\n        <p>Here is the text content</p>\n        <p>Here is the text content</p>\n      </template>\n    </a-popover>\n    <a-popover position=\"br\">\n      <a-button class=\"button\" :style=\"{position: 'absolute',top:'240px',left:'290px'}\">BR</a-button>\n      <template #content>\n        <p>Here is the text content</p>\n        <p>Here is the text content</p>\n      </template>\n    </a-popover>\n    <a-popover position=\"lt\">\n      <a-button class=\"button\" :style=\"{position: 'absolute',top:'60px',left:'10px'}\">LT</a-button>\n      <template #content>\n        <p>Here is the text content</p>\n        <p>Here is the text content</p>\n      </template>\n    </a-popover>\n    <a-popover position=\"left\">\n      <a-button class=\"button\" :style=\"{position: 'absolute',top:'120px',left:'10px'}\">LEFT</a-button>\n      <template #content>\n        <p>Here is the text content</p>\n        <p>Here is the text content</p>\n      </template>\n    </a-popover>\n    <a-popover position=\"lb\">\n      <a-button class=\"button\" :style=\"{position: 'absolute',top:'180px',left:'10px'}\">LB</a-button>\n      <template #content>\n        <p>Here is the text content</p>\n        <p>Here is the text content</p>\n      </template>\n    </a-popover>\n    <a-popover position=\"rt\">\n      <a-button class=\"button\" :style=\"{position: 'absolute',top:'60px',left:'350px'}\">RT</a-button>\n      <template #content>\n        <p>Here is the text content</p>\n        <p>Here is the text content</p>\n      </template>\n    </a-popover>\n    <a-popover position=\"right\">\n      <a-button class=\"button\" :style=\"{position: 'absolute',top:'120px',left:'350px'}\">RIGHT</a-button>\n      <template #content>\n        <p>Here is the text content</p>\n        <p>Here is the text content</p>\n      </template>\n    </a-popover>\n    <a-popover position=\"rb\">\n      <a-button class=\"button\" :style=\"{position: 'absolute',top:'180px',left:'350px'}\">RB</a-button>\n      <template #content>\n        <p>Here is the text content</p>\n        <p>Here is the text content</p>\n      </template>\n    </a-popover>\n  </div>\n</template>\n\n<style scoped lang=\"less\">\n.button{\n  width: 100px;\n}\n</style>\n```\n"
  },
  {
    "path": "packages/web-vue/components/popover/__demo__/trigger.md",
    "content": "```yaml\ntitle:\n  zh-CN: 触发方式\n  en-US: Trigger\n```\n\n## zh-CN\n\n通过设置 `trigger`，可以指定不同的触发方式。\n\n---\n\n## en-US\n\nBy setting `trigger`, you can specify different trigger methods.\n\n---\n\n```vue\n<template>\n  <a-space>\n    <a-popover title=\"Title\">\n      <a-button>Hover Me</a-button>\n      <template #content>\n        <p>Here is the text content</p>\n        <p>Here is the text content</p>\n      </template>\n    </a-popover>\n    <a-popover title=\"Title\" trigger=\"click\">\n      <a-button>Click Me</a-button>\n      <template #content>\n        <p>Here is the text content</p>\n        <p>Here is the text content</p>\n      </template>\n    </a-popover>\n  </a-space>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/popover/__test__/__snapshots__/demo.test.ts.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`<popover> demo: render [basic] correctly 1`] = `\n\"<button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n  <!--v-if-->Hover\n</button>\"\n`;\n\nexports[`<popover> demo: render [position] correctly 1`] = `\n\"<div style=\\\\\"position: relative; width: 440px; height: 280px;\\\\\"><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal button\\\\\" type=\\\\\"button\\\\\" style=\\\\\"position: absolute; top: 0px; left: 70px;\\\\\">\n    <!--v-if-->TL\n  </button>\n  <!----><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal button\\\\\" type=\\\\\"button\\\\\" style=\\\\\"position: absolute; top: 0px; left: 180px;\\\\\">\n    <!--v-if-->TOP\n  </button>\n  <!----><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal button\\\\\" type=\\\\\"button\\\\\" style=\\\\\"position: absolute; top: 0px; left: 290px;\\\\\">\n    <!--v-if-->TR\n  </button>\n  <!----><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal button\\\\\" type=\\\\\"button\\\\\" style=\\\\\"position: absolute; top: 240px; left: 70px;\\\\\">\n    <!--v-if-->BL\n  </button>\n  <!----><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal button\\\\\" type=\\\\\"button\\\\\" style=\\\\\"position: absolute; top: 240px; left: 180px;\\\\\">\n    <!--v-if-->BOTTOM\n  </button>\n  <!----><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal button\\\\\" type=\\\\\"button\\\\\" style=\\\\\"position: absolute; top: 240px; left: 290px;\\\\\">\n    <!--v-if-->BR\n  </button>\n  <!----><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal button\\\\\" type=\\\\\"button\\\\\" style=\\\\\"position: absolute; top: 60px; left: 10px;\\\\\">\n    <!--v-if-->LT\n  </button>\n  <!----><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal button\\\\\" type=\\\\\"button\\\\\" style=\\\\\"position: absolute; top: 120px; left: 10px;\\\\\">\n    <!--v-if-->LEFT\n  </button>\n  <!----><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal button\\\\\" type=\\\\\"button\\\\\" style=\\\\\"position: absolute; top: 180px; left: 10px;\\\\\">\n    <!--v-if-->LB\n  </button>\n  <!----><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal button\\\\\" type=\\\\\"button\\\\\" style=\\\\\"position: absolute; top: 60px; left: 350px;\\\\\">\n    <!--v-if-->RT\n  </button>\n  <!----><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal button\\\\\" type=\\\\\"button\\\\\" style=\\\\\"position: absolute; top: 120px; left: 350px;\\\\\">\n    <!--v-if-->RIGHT\n  </button>\n  <!----><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal button\\\\\" type=\\\\\"button\\\\\" style=\\\\\"position: absolute; top: 180px; left: 350px;\\\\\">\n    <!--v-if-->RB\n  </button>\n  <!---->\n</div>\"\n`;\n\nexports[`<popover> demo: render [trigger] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 8px; row-gap: 8px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n      <!--v-if-->Hover Me\n    </button>\n    <!---->\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n      <!--v-if-->Click Me\n    </button>\n    <!---->\n  </div>\n</div>\"\n`;\n"
  },
  {
    "path": "packages/web-vue/components/popover/__test__/demo.test.ts",
    "content": "import demoTest from '../../../scripts/demo-test';\n\ndemoTest('popover');\n"
  },
  {
    "path": "packages/web-vue/components/popover/index.ts",
    "content": "import type { App } from 'vue';\nimport type { ArcoOptions } from '../_utils/types';\nimport { setGlobalConfig, getComponentPrefix } from '../_utils/global-config';\nimport _Popover from './popover.vue';\n\nconst Popover = Object.assign(_Popover, {\n  install: (app: App, options?: ArcoOptions) => {\n    setGlobalConfig(app, options);\n    const componentPrefix = getComponentPrefix(options);\n\n    app.component(componentPrefix + _Popover.name, _Popover);\n  },\n});\n\nexport type PopoverInstance = InstanceType<typeof _Popover>;\n\nexport default Popover;\n"
  },
  {
    "path": "packages/web-vue/components/popover/popover.vue",
    "content": "<template>\n  <trigger\n    :class=\"prefixCls\"\n    :trigger=\"trigger\"\n    :position=\"position\"\n    :popup-visible=\"computedPopupVisible\"\n    :popup-offset=\"10\"\n    :content-class=\"contentCls\"\n    :content-style=\"contentStyle\"\n    :arrow-class=\"arrowCls\"\n    :arrow-style=\"arrowStyle\"\n    show-arrow\n    :popup-container=\"popupContainer\"\n    animation-name=\"zoom-in-fade-out\"\n    auto-fit-transform-origin\n    @popup-visible-change=\"handlePopupVisibleChange\"\n  >\n    <slot />\n    <template #content>\n      <div v-if=\"title || $slots.title\" :class=\"`${prefixCls}-title`\">\n        <slot name=\"title\">{{ title }}</slot>\n      </div>\n      <div :class=\"`${prefixCls}-content`\">\n        <slot name=\"content\">{{ content }}</slot>\n      </div>\n    </template>\n  </trigger>\n</template>\n\n<script lang=\"ts\">\nimport type { PropType } from 'vue';\nimport { computed, CSSProperties, defineComponent, ref } from 'vue';\nimport { getPrefixCls } from '../_utils/global-config';\nimport type { TriggerEvent, TriggerPosition } from '../_utils/constant';\nimport Trigger from '../trigger';\nimport { ClassName, EmitType } from '../_utils/types';\n\nexport default defineComponent({\n  name: 'Popover',\n  components: {\n    Trigger,\n  },\n  props: {\n    /**\n     * @zh 文字气泡是否可见\n     * @en Whether the popover is visible\n     * @vModel\n     */\n    popupVisible: {\n      type: Boolean,\n      default: undefined,\n    },\n    /**\n     * @zh 文字气泡默认是否可见（非受控模式）\n     * @en Whether the popover is visible by default (uncontrolled mode)\n     */\n    defaultPopupVisible: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 标题\n     * @en Title\n     */\n    title: String,\n    /**\n     * @zh 内容\n     * @en Content\n     */\n    content: String,\n    /**\n     * @zh 触发方式\n     * @en Trigger method\n     * @values 'hover','click','focus','contextMenu'\n     */\n    trigger: {\n      type: [String, Array] as PropType<TriggerEvent | TriggerEvent[]>,\n      default: 'hover',\n    },\n    /**\n     * @zh 弹出位置\n     * @en Pop-up position\n     * @values 'top','tl','tr','bottom','bl','br','left','lt','lb','right','rt','rb'\n     */\n    position: {\n      type: String as PropType<TriggerPosition>,\n      default: 'top',\n    },\n    /**\n     * @zh 弹出框内容的类名\n     * @en The class name of the popup content\n     */\n    contentClass: {\n      type: [String, Array, Object] as PropType<ClassName>,\n    },\n    /**\n     * @zh 弹出框内容的样式\n     * @en The style of the popup content\n     */\n    contentStyle: {\n      type: Object as PropType<CSSProperties>,\n    },\n    /**\n     * @zh 弹出框箭头的类名\n     * @en The class name of the popup arrow\n     */\n    arrowClass: {\n      type: [String, Array, Object] as PropType<ClassName>,\n    },\n    /**\n     * @zh 弹出框箭头的样式\n     * @en The style of the popup arrow\n     */\n    arrowStyle: {\n      type: Object as PropType<CSSProperties>,\n    },\n    /**\n     * @zh 弹出框的挂载容器\n     * @en Mount container for pop-up box\n     */\n    popupContainer: {\n      type: [String, Object] as PropType<string | HTMLElement>,\n    },\n  },\n  emits: {\n    'update:popupVisible': (visible: boolean) => true,\n    /**\n     * @zh 文字气泡显示状态改变时触发\n     * @en Triggered when the text bubble display status changes\n     * @param {boolean} visible\n     */\n    'popupVisibleChange': (visible: boolean) => true,\n  },\n  /**\n   * @zh 标题\n   * @en Title\n   * @slot title\n   */\n  /**\n   * @zh 内容\n   * @en Content\n   * @slot content\n   */\n  setup(props, { emit }) {\n    const prefixCls = getPrefixCls('popover');\n    const _popupVisible = ref(props.defaultPopupVisible);\n    const computedPopupVisible = computed(\n      () => props.popupVisible ?? _popupVisible.value\n    );\n\n    const handlePopupVisibleChange = (visible: boolean) => {\n      _popupVisible.value = visible;\n      emit('update:popupVisible', visible);\n      emit('popupVisibleChange', visible);\n    };\n\n    const contentCls = computed(() => [\n      `${prefixCls}-popup-content`,\n      props.contentClass,\n    ]);\n\n    const arrowCls = computed(() => [\n      `${prefixCls}-popup-arrow`,\n      props.arrowClass,\n    ]);\n\n    return {\n      prefixCls,\n      computedPopupVisible,\n      contentCls,\n      arrowCls,\n      handlePopupVisibleChange,\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/popover/style/index.less",
    "content": "@import './token.less';\n\n@popover-prefix-cls: ~'@{prefix}-popover';\n\n.@{popover-prefix-cls} {\n  &-popup-content {\n    box-sizing: border-box;\n    padding: @popup-padding-vertical @popup-padding-horizontal;\n    color: @popup-color-content-text;\n    font-size: @popup-font-size;\n    line-height: @line-height-base;\n    background-color: @popup-color-content-bg;\n    border: @border-1 solid @popup-color-border;\n    border-radius: @popup-border-radius;\n    box-shadow: @popup-shadow;\n  }\n\n  &-title {\n    color: @popup-color-title-text;\n    font-weight: @font-weight-500;\n    font-size: @popup-font-title-size;\n  }\n\n  &-content {\n    text-align: left;\n    word-wrap: break-word;\n  }\n\n  &-title + &-content {\n    margin-top: @popup-margin-content-top;\n  }\n\n  &-popup-arrow {\n    z-index: 1;\n    background-color: @popup-color-content-bg;\n    border: @border-1 solid @popup-color-border;\n  }\n}\n"
  },
  {
    "path": "packages/web-vue/components/popover/style/index.ts",
    "content": "import '../../style/index.less';\nimport '../../trigger/style';\nimport './index.less';\n"
  },
  {
    "path": "packages/web-vue/components/popover/style/token.less",
    "content": "@import '../../style/theme/index.less';\n\n@popup-color-content-text: var(~'@{arco-cssvars-prefix}-color-text-2');\n@popup-border-radius: @radius-large;\n@popup-color-content-bg: var(~'@{arco-cssvars-prefix}-color-bg-popup');\n@popup-shadow: @shadow2-down;\n@popup-padding-content-top: @spacing-2;\n@popup-padding-horizontal: @spacing-7;\n@popup-padding-vertical: @spacing-6;\n@popup-color-title-text: var(~'@{arco-cssvars-prefix}-color-text-1');\n@popup-font-title-size: @font-size-title-1;\n@popup-margin-content-top: @spacing-2;\n@popup-color-border: var(~'@{arco-cssvars-prefix}-color-neutral-3');\n@popup-font-size: @font-size-body-3;\n@popup-border-radius: @radius-medium;\n"
  },
  {
    "path": "packages/web-vue/components/progress/CHANGELOG.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.38.0-beta.2\n\n`2022-10-21`\n\n### 💎 Enhancement\n\n- Optimize the display logic of split points ([#1755](https://github.com/arco-design/arco-design-vue/pull/1755))\n\n\n## 2.12.0\n\n`2021-12-24`\n\n### 🐛 BugFix\n\n- Fix the display value precision problem ([#447](https://github.com/arco-design/arco-design-vue/pull/447))\n\n\n## 2.7.0\n\n`2021-11-26`\n\n### 🆕 Feature\n\n- Add `track-color` prop ([#277](https://github.com/arco-design/arco-design-vue/pull/277))\n\n"
  },
  {
    "path": "packages/web-vue/components/progress/CHANGELOG.zh-CN.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.38.0-beta.2\n\n`2022-10-21`\n\n### 💎 功能优化\n\n- 优化分割点的展示逻辑 ([#1755](https://github.com/arco-design/arco-design-vue/pull/1755))\n\n\n## 2.12.0\n\n`2021-12-24`\n\n### 🐛 问题修复\n\n- 修复显示数值精度问题 ([#447](https://github.com/arco-design/arco-design-vue/pull/447))\n\n\n## 2.7.0\n\n`2021-11-26`\n\n### 🆕 新增功能\n\n- 增加 `track-color` 属性 ([#277](https://github.com/arco-design/arco-design-vue/pull/277))\n\n"
  },
  {
    "path": "packages/web-vue/components/progress/README.en-US.md",
    "content": "```yaml\nmeta:\n  type: Component\n  category: Feedback\ntitle: Progress\ndescription: Give users feedback on the running status of tasks in the current system execution, which is mostly used in scenes that run for a period of time, effectively reducing the anxiety of users during waiting.\n```\n\n*Auto translate by google.*\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/status.md\n\n@import ./__demo__/circle.md\n\n@import ./__demo__/mini.md\n\n@import ./__demo__/size.md\n\n@import ./__demo__/linear.md\n\n@import ./__demo__/steps.md\n\n@import ./__demo__/trackColor.md\n\n## API\n\n\n### `<progress>` Props\n\n|Attribute|Description|Type|Default|\n|---|---|---|:---:|\n|type|The type of progress bar|`'line' \\| 'circle'`|`'line'`|\n|size|The size of the progress bar|`'mini' \\| 'small' \\| 'medium' \\| 'large'`|`'medium'`|\n|percent|The current percentage of the progress bar|`number`|`0`|\n|steps|Turn on the step bar mode and set the number of steps|`number`|`0`|\n|animation|Whether to turn on the transition animation|`boolean`|`false`|\n|stroke-width|The line width of the progress bar|`number`|`-`|\n|width|The width of the progress bar|`number\\|string`|`-`|\n|color|The color of the progress bar|`string\\|object`|`-`|\n|track-color|The color of the progress track|`string`|`-`|\n|show-text|Whether to display text|`boolean`|`true`|\n|status|Progress bar status|`'normal' \\| 'success' \\| 'warning' \\| 'danger'`|`-`|\n\n\n"
  },
  {
    "path": "packages/web-vue/components/progress/README.zh-CN.md",
    "content": "```yaml\nmeta:\n  type: 组件\n  category: 反馈\ntitle: 进度条 Progress\ndescription: 给予用户当前系统执行中任务运行状态的反馈，多用于运行一段时间的场景，有效减轻用户在等待中产生的焦虑感。\n```\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/status.md\n\n@import ./__demo__/circle.md\n\n@import ./__demo__/mini.md\n\n@import ./__demo__/size.md\n\n@import ./__demo__/linear.md\n\n@import ./__demo__/steps.md\n\n@import ./__demo__/trackColor.md\n\n## API\n\n\n### `<progress>` Props\n\n|参数名|描述|类型|默认值|\n|---|---|---|:---:|\n|type|进度条的类型|`'line' \\| 'circle'`|`'line'`|\n|size|进度条的大小|`'mini' \\| 'small' \\| 'medium' \\| 'large'`|`'medium'`|\n|percent|进度条当前的百分比|`number`|`0`|\n|steps|开启步骤条模式，并设置步骤数|`number`|`0`|\n|animation|是否开启过渡动画|`boolean`|`false`|\n|stroke-width|进度条的线宽|`number`|`-`|\n|width|进度条的长度|`number\\|string`|`-`|\n|color|进度条的颜色|`string\\|object`|`-`|\n|track-color|进度条的轨道颜色|`string`|`-`|\n|show-text|是否显示文字|`boolean`|`true`|\n|status|进度条状态|`'normal' \\| 'success' \\| 'warning' \\| 'danger'`|`-`|\n\n\n"
  },
  {
    "path": "packages/web-vue/components/progress/TEMPLATE.md",
    "content": "## zh-CN\n```yaml\nmeta:\n  type: 组件\n  category: 反馈\ntitle: 进度条 Progress\ndescription: 给予用户当前系统执行中任务运行状态的反馈，多用于运行一段时间的场景，有效减轻用户在等待中产生的焦虑感。\n```\n---\n## en-US\n```yaml\nmeta:\n  type: Component\n  category: Feedback\ntitle: Progress\ndescription: Give users feedback on the running status of tasks in the current system execution, which is mostly used in scenes that run for a period of time, effectively reducing the anxiety of users during waiting.\n```\n---\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/status.md\n\n@import ./__demo__/circle.md\n\n@import ./__demo__/mini.md\n\n@import ./__demo__/size.md\n\n@import ./__demo__/linear.md\n\n@import ./__demo__/steps.md\n\n@import ./__demo__/trackColor.md\n\n## API\n\n%%API(progress.vue)%%\n"
  },
  {
    "path": "packages/web-vue/components/progress/__demo__/basic.md",
    "content": "```yaml\ntitle:\n  zh-CN: 基本用法\n  en-US: Basic Usage\n```\n\n## zh-CN\n\n简单的进度条。\n\n---\n\n## en-US\n\nSimple progress bar.\n\n---\n\n```vue\n<template>\n  <a-progress :percent=\"0.2\" :style=\"{width:'50%'}\" />\n  <br/>\n  <br/>\n  <a-progress :percent=\"0.3\" :style=\"{width:'50%'}\">\n    <template v-slot:text=\"scope\" >\n      进度 {{scope.percent * 100}}%\n    </template>\n  </a-progress>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/progress/__demo__/circle.md",
    "content": "```yaml\ntitle:\n  zh-CN: 环形进度条\n  en-US: Circle Progress\n```\n\n## zh-CN\n\n设置 `type=\"circle\"` 将会展示环形进度条。\n\n---\n\n## en-US\n\nSetting `type=\"circle\"` will show a circular progress bar.\n\n---\n\n```vue\n\n<template>\n  <a-space size=\"large\">\n    <a-progress type=\"circle\" :percent=\"percent\" />\n    <a-progress type=\"circle\" status='warning' :percent=\"percent\" />\n    <a-progress type=\"circle\" status='danger' :percent=\"percent\" />\n    <a-progress type=\"circle\" status='success' :percent=\"percent\" />\n  </a-space>\n  <div :style=\"{marginTop:'20px'}\">\n    <a-slider v-model=\"percent\" :max=\"1\" :step=\"0.1\" :style=\"{width: '150px'}\" />\n  </div>\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n  setup() {\n    const percent = ref(0.2);\n\n    return {\n      percent\n    }\n  },\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/progress/__demo__/linear.md",
    "content": "```yaml\ntitle:\n  zh-CN: 渐变进度条\n  en-US: linear-gradient\n```\n\n## zh-CN\n\n`color` 传入对象时， 会作为 `linear-gradient` 的属性值设置渐变色。\n\n---\n\n## en-US\n\nlinear-gradient progress bar.\n\n\n---\n\n```vue\n<template>\n  <div>\n    <a-progress\n      :percent=\"0.8\"\n      :style=\"{ width: '50%' }\"\n      :color=\"{\n        '0%': 'rgb(var(--primary-6))',\n        '100%': 'rgb(var(--success-6))',\n      }\"\n    />\n    <br/>\n    <br/>\n\n    <a-progress\n      :percent=\"1\"\n      :style=\"{ width: '50%' }\"\n      :color=\"{\n        '0%': 'rgb(var(--primary-6))',\n        '100%': 'rgb(var(--success-6))',\n      }\"\n    />\n    <br/>\n    <br/>\n    <a-space size=\"large\">\n      <a-progress\n        type=\"circle\"\n        :percent=\"0.8\"\n        :style=\"{ width: '50%' }\"\n        :color=\"{\n          '0%': 'rgb(var(--primary-6))',\n          '100%': 'rgb(var(--success-6))',\n        }\"\n      />\n\n      <a-progress\n        type=\"circle\"\n        :percent=\"1\"\n        :style=\"{ width: '50%' }\"\n        :color=\"{\n          '0%': 'rgb(var(--primary-6))',\n          '100%': 'rgb(var(--success-6))',\n        }\"\n      />\n    </a-space>\n  </div>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/progress/__demo__/mini.md",
    "content": "```yaml\ntitle:\n  zh-CN: 迷你进度条\n  en-US: Mini Progress\n```\n\n## zh-CN\n\n设置 `size=\"mini\"` 展示微型进度条。\n\n---\n\n## en-US\n\nSet `size=\"mini\"` to display a miniature progress bar.\n\n---\n\n```vue\n<template>\n  <a-space size=\"large\" :style=\"{width: '100%'}\">\n    <a-progress size=\"mini\" :percent=\"percent\"/>\n    <a-progress size=\"mini\" status='warning' :percent=\"percent\"/>\n    <a-progress size=\"mini\" status='danger' :percent=\"percent\"/>\n    <a-progress size=\"mini\" status='success' :percent=\"percent\"/>\n  </a-space>\n  <a-space size=\"large\" :style=\"{width: '100%', marginTop: '20px'}\">\n    <a-progress type=\"circle\" size=\"mini\" :percent=\"percent\"/>\n    <a-progress type=\"circle\" size=\"mini\" status='warning' :percent=\"percent\"/>\n    <a-progress type=\"circle\" size=\"mini\" status='danger' :percent=\"percent\"/>\n    <a-progress type=\"circle\" size=\"mini\" status='success' :percent=\"percent\"/>\n  </a-space>\n  <div :style=\"{marginTop: '20px'}\">\n    <a-slider v-model=\"percent\" :max=\"1\" :step=\"0.1\" :style=\"{width: '150px'}\" />\n  </div>\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n  setup() {\n    const percent = ref(0.2);\n\n    return {\n      percent\n    }\n  },\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/progress/__demo__/size.md",
    "content": "```yaml\ntitle:\n  zh-CN: 进度条大小\n  en-US: Progress Size\n```\n\n## zh-CN\n\n通过 `size` 设置进度条的大小\n\n---\n\n## en-US\n\nSet the size of the progress bar through `size`\n\n---\n\n```vue\n<template>\n  <a-space direction=\"vertical\" size=\"large\" :style=\"{width:'50%'}\">\n    <a-radio-group v-model=\"size\" type=\"button\">\n      <a-radio value=\"small\">Small</a-radio>\n      <a-radio value=\"medium\">Medium</a-radio>\n      <a-radio value=\"large\">Large</a-radio>\n    </a-radio-group>\n    <a-progress :size=\"size\" :percent=\"0.2\"/>\n    <a-progress status='warning' :size=\"size\" :percent=\"0.2\"/>\n    <a-progress status='danger' :size=\"size\" :percent=\"0.2\"/>\n    <a-space>\n      <a-progress type=\"circle\" :size=\"size\" :percent=\"0.2\"/>\n      <a-progress type=\"circle\" status='warning' :size=\"size\" :percent=\"0.2\"/>\n      <a-progress type=\"circle\" status='danger' :size=\"size\" :percent=\"0.2\"/>\n    </a-space>\n  </a-space>\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n  setup() {\n    return {\n      size: ref('medium')\n    }\n  }\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/progress/__demo__/status.md",
    "content": "```yaml\ntitle:\n  zh-CN: 进度条状态\n  en-US: Progress Status\n```\n\n## zh-CN\n\n通过 `status` 指定进度条状态\n\n---\n\n## en-US\n\nSpecify the status of the progress bar through `status`\n\n---\n\n```vue\n<template>\n  <a-space direction=\"vertical\" :style=\"{width: '50%'}\">\n    <a-progress :percent=\"percent\" />\n    <a-progress status='warning' :percent=\"percent\" />\n    <a-progress status='danger' :percent=\"percent\" />\n  </a-space>\n  <div :style=\"{marginTop:'20px'}\">\n    <a-slider v-model=\"percent\" :max=\"1\" :step=\"0.1\" :style=\"{width: '150px'}\" />\n  </div>\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n  setup() {\n    const percent = ref(0.2);\n\n    return {\n      percent\n    }\n  },\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/progress/__demo__/steps.md",
    "content": "```yaml\ntitle:\n  zh-CN: 步骤进度条\n  en-US: Steps Progress\n```\n\n## zh-CN\n\n通过设置 `steps` 展示步骤进度条。\n\n---\n\n## en-US\n\nShow the step progress bar by setting `steps`.\n\n---\n\n```vue\n<template>\n  <div :style=\"{ width: '50%' }\">\n    <a-progress :steps=\"3\" :percent=\"0.3\" />\n    <a-progress :steps=\"5\" status=\"warning\" :percent=\"1\" />\n    <a-progress :steps=\"3\" size=\"small\" :percent=\"0.3\" />\n  </div>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/progress/__demo__/trackColor.md",
    "content": "```yaml\ntitle:\n  zh-CN: 剩余进度条的颜色\n  en-US: trackColor\n```\n\n## zh-CN\n\n可以通过 trackColor 设置剩余进度条的颜色\n\n---\n\n## en-US\n\nYou can use 'trackColor' to set the color of the remaining progress bar.\n\n---\n\n```vue\n<template>\n  <div :style=\"{ width: '50%' }\">\n    <a-progress\n      :percent=\"0.4\"\n      trackColor=\"var(--color-primary-light-1)\"\n      style=\"margin-bottom: 20px;\"\n    />\n    <a-progress\n      :percent=\"0.4\"\n      :steps=\"4\"\n      trackColor=\"var(--color-primary-light-1)\"\n      style=\"margin-bottom: 20px;\"\n    />\n    <a-progress\n      :percent=\"0.4\"\n      type=\"circle\"\n      trackColor=\"var(--color-primary-light-1)\"\n      style=\"margin-bottom: 20px;\"\n    />\n  </div>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/progress/__test__/__snapshots__/demo.test.ts.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`<progress> demo: render [basic] correctly 1`] = `\n\"<div class=\\\\\"arco-progress arco-progress-type-line arco-progress-size-medium arco-progress-status-normal\\\\\" style=\\\\\"width: 50%;\\\\\">\n  <div role=\\\\\"progressbar\\\\\" aria-valuemin=\\\\\"0\\\\\" aria-valuemax=\\\\\"100\\\\\" aria-valuenow=\\\\\"0.2\\\\\" class=\\\\\"arco-progress-line-wrapper\\\\\">\n    <div class=\\\\\"arco-progress-line\\\\\" style=\\\\\"width: 100%; height: 4px;\\\\\">\n      <div class=\\\\\"arco-progress-line-bar-buffer\\\\\"></div>\n      <div class=\\\\\"arco-progress-line-bar\\\\\" style=\\\\\"width: 20%;\\\\\"></div>\n    </div>\n    <div class=\\\\\"arco-progress-line-text\\\\\">20%\n      <!--v-if-->\n    </div>\n  </div>\n</div>\n<br>\n<br>\n<div class=\\\\\"arco-progress arco-progress-type-line arco-progress-size-medium arco-progress-status-normal\\\\\" style=\\\\\"width: 50%;\\\\\">\n  <div role=\\\\\"progressbar\\\\\" aria-valuemin=\\\\\"0\\\\\" aria-valuemax=\\\\\"100\\\\\" aria-valuenow=\\\\\"0.3\\\\\" class=\\\\\"arco-progress-line-wrapper\\\\\">\n    <div class=\\\\\"arco-progress-line\\\\\" style=\\\\\"width: 100%; height: 4px;\\\\\">\n      <div class=\\\\\"arco-progress-line-bar-buffer\\\\\"></div>\n      <div class=\\\\\"arco-progress-line-bar\\\\\" style=\\\\\"width: 30%;\\\\\"></div>\n    </div>\n    <div class=\\\\\"arco-progress-line-text\\\\\"> 进度 30% </div>\n  </div>\n</div>\"\n`;\n\nexports[`<progress> demo: render [circle] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 24px; row-gap: 24px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-progress arco-progress-type-circle arco-progress-size-medium arco-progress-status-normal\\\\\">\n      <div role=\\\\\"progressbar\\\\\" aria-valuemin=\\\\\"0\\\\\" aria-valuemax=\\\\\"100\\\\\" aria-valuenow=\\\\\"0.2\\\\\" class=\\\\\"arco-progress-circle-wrapper\\\\\" style=\\\\\"width: 64px; height: 64px;\\\\\"><svg viewBox=\\\\\"0 0 64 64\\\\\" class=\\\\\"arco-progress-circle-svg\\\\\">\n          <!--v-if-->\n          <circle class=\\\\\"arco-progress-circle-bg\\\\\" fill=\\\\\"none\\\\\" cx=\\\\\"32\\\\\" cy=\\\\\"32\\\\\" r=\\\\\"30\\\\\" stroke-width=\\\\\"2\\\\\"></circle>\n          <circle class=\\\\\"arco-progress-circle-bar\\\\\" fill=\\\\\"none\\\\\" cx=\\\\\"32\\\\\" cy=\\\\\"32\\\\\" r=\\\\\"30\\\\\" stroke-width=\\\\\"4\\\\\" style=\\\\\"stroke-dasharray: 188.49555921538757; stroke-dashoffset: 150.79644737231007;\\\\\"></circle>\n        </svg>\n        <div class=\\\\\"arco-progress-circle-text\\\\\">20%</div>\n      </div>\n    </div>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-progress arco-progress-type-circle arco-progress-size-medium arco-progress-status-warning\\\\\">\n      <div role=\\\\\"progressbar\\\\\" aria-valuemin=\\\\\"0\\\\\" aria-valuemax=\\\\\"100\\\\\" aria-valuenow=\\\\\"0.2\\\\\" class=\\\\\"arco-progress-circle-wrapper\\\\\" style=\\\\\"width: 64px; height: 64px;\\\\\"><svg viewBox=\\\\\"0 0 64 64\\\\\" class=\\\\\"arco-progress-circle-svg\\\\\">\n          <!--v-if-->\n          <circle class=\\\\\"arco-progress-circle-bg\\\\\" fill=\\\\\"none\\\\\" cx=\\\\\"32\\\\\" cy=\\\\\"32\\\\\" r=\\\\\"30\\\\\" stroke-width=\\\\\"2\\\\\"></circle>\n          <circle class=\\\\\"arco-progress-circle-bar\\\\\" fill=\\\\\"none\\\\\" cx=\\\\\"32\\\\\" cy=\\\\\"32\\\\\" r=\\\\\"30\\\\\" stroke-width=\\\\\"4\\\\\" style=\\\\\"stroke-dasharray: 188.49555921538757; stroke-dashoffset: 150.79644737231007;\\\\\"></circle>\n        </svg>\n        <div class=\\\\\"arco-progress-circle-text\\\\\">20%</div>\n      </div>\n    </div>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-progress arco-progress-type-circle arco-progress-size-medium arco-progress-status-danger\\\\\">\n      <div role=\\\\\"progressbar\\\\\" aria-valuemin=\\\\\"0\\\\\" aria-valuemax=\\\\\"100\\\\\" aria-valuenow=\\\\\"0.2\\\\\" class=\\\\\"arco-progress-circle-wrapper\\\\\" style=\\\\\"width: 64px; height: 64px;\\\\\"><svg viewBox=\\\\\"0 0 64 64\\\\\" class=\\\\\"arco-progress-circle-svg\\\\\">\n          <!--v-if-->\n          <circle class=\\\\\"arco-progress-circle-bg\\\\\" fill=\\\\\"none\\\\\" cx=\\\\\"32\\\\\" cy=\\\\\"32\\\\\" r=\\\\\"30\\\\\" stroke-width=\\\\\"2\\\\\"></circle>\n          <circle class=\\\\\"arco-progress-circle-bar\\\\\" fill=\\\\\"none\\\\\" cx=\\\\\"32\\\\\" cy=\\\\\"32\\\\\" r=\\\\\"30\\\\\" stroke-width=\\\\\"4\\\\\" style=\\\\\"stroke-dasharray: 188.49555921538757; stroke-dashoffset: 150.79644737231007;\\\\\"></circle>\n        </svg>\n        <div class=\\\\\"arco-progress-circle-text\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-exclamation\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n            <path d=\\\\\"M23 9h2v21h-2z\\\\\"></path>\n            <path fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\" d=\\\\\"M23 9h2v21h-2z\\\\\"></path>\n            <path d=\\\\\"M23 37h2v2h-2z\\\\\"></path>\n            <path fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\" d=\\\\\"M23 37h2v2h-2z\\\\\"></path>\n          </svg></div>\n      </div>\n    </div>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-progress arco-progress-type-circle arco-progress-size-medium arco-progress-status-success\\\\\">\n      <div role=\\\\\"progressbar\\\\\" aria-valuemin=\\\\\"0\\\\\" aria-valuemax=\\\\\"100\\\\\" aria-valuenow=\\\\\"0.2\\\\\" class=\\\\\"arco-progress-circle-wrapper\\\\\" style=\\\\\"width: 64px; height: 64px;\\\\\"><svg viewBox=\\\\\"0 0 64 64\\\\\" class=\\\\\"arco-progress-circle-svg\\\\\">\n          <!--v-if-->\n          <circle class=\\\\\"arco-progress-circle-bg\\\\\" fill=\\\\\"none\\\\\" cx=\\\\\"32\\\\\" cy=\\\\\"32\\\\\" r=\\\\\"30\\\\\" stroke-width=\\\\\"2\\\\\"></circle>\n          <circle class=\\\\\"arco-progress-circle-bar\\\\\" fill=\\\\\"none\\\\\" cx=\\\\\"32\\\\\" cy=\\\\\"32\\\\\" r=\\\\\"30\\\\\" stroke-width=\\\\\"4\\\\\" style=\\\\\"stroke-dasharray: 188.49555921538757; stroke-dashoffset: 150.79644737231007;\\\\\"></circle>\n        </svg>\n        <div class=\\\\\"arco-progress-circle-text\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-check\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n            <path d=\\\\\"M41.678 11.05 19.05 33.678 6.322 20.95\\\\\"></path>\n          </svg></div>\n      </div>\n    </div>\n  </div>\n</div>\n<div style=\\\\\"margin-top: 20px;\\\\\">\n  <div class=\\\\\"arco-slider\\\\\" style=\\\\\"width: 150px;\\\\\">\n    <div class=\\\\\"arco-slider-track\\\\\">\n      <div class=\\\\\"arco-slider-bar\\\\\" style=\\\\\"left: 0%; right: 80%;\\\\\"></div>\n      <!--v-if-->\n      <!--v-if-->\n      <!--v-if-->\n      <!--v-if-->\n      <div style=\\\\\"left: 20%;\\\\\" tabindex=\\\\\"0\\\\\" role=\\\\\"slider\\\\\" aria-disabled=\\\\\"false\\\\\" aria-valuemax=\\\\\"1\\\\\" aria-valuemin=\\\\\"0\\\\\" aria-valuenow=\\\\\"0.2\\\\\" aria-valuetext=\\\\\"0.2\\\\\" class=\\\\\"arco-slider-btn\\\\\"></div>\n      <!---->\n    </div>\n    <!--v-if-->\n  </div>\n</div>\"\n`;\n\nexports[`<progress> demo: render [linear] correctly 1`] = `\n\"<div>\n  <div class=\\\\\"arco-progress arco-progress-type-line arco-progress-size-medium arco-progress-status-normal\\\\\" style=\\\\\"width: 50%;\\\\\">\n    <div role=\\\\\"progressbar\\\\\" aria-valuemin=\\\\\"0\\\\\" aria-valuemax=\\\\\"100\\\\\" aria-valuenow=\\\\\"0.8\\\\\" class=\\\\\"arco-progress-line-wrapper\\\\\">\n      <div class=\\\\\"arco-progress-line\\\\\" style=\\\\\"width: 100%; height: 4px;\\\\\">\n        <div class=\\\\\"arco-progress-line-bar-buffer\\\\\"></div>\n        <div class=\\\\\"arco-progress-line-bar\\\\\" style=\\\\\"width: 80%;\\\\\"></div>\n      </div>\n      <div class=\\\\\"arco-progress-line-text\\\\\">80%\n        <!--v-if-->\n      </div>\n    </div>\n  </div><br><br>\n  <div class=\\\\\"arco-progress arco-progress-type-line arco-progress-size-medium arco-progress-status-success\\\\\" style=\\\\\"width: 50%;\\\\\">\n    <div role=\\\\\"progressbar\\\\\" aria-valuemin=\\\\\"0\\\\\" aria-valuemax=\\\\\"100\\\\\" aria-valuenow=\\\\\"1\\\\\" class=\\\\\"arco-progress-line-wrapper\\\\\">\n      <div class=\\\\\"arco-progress-line\\\\\" style=\\\\\"width: 100%; height: 4px;\\\\\">\n        <div class=\\\\\"arco-progress-line-bar-buffer\\\\\"></div>\n        <div class=\\\\\"arco-progress-line-bar\\\\\" style=\\\\\"width: 100%;\\\\\"></div>\n      </div>\n      <div class=\\\\\"arco-progress-line-text\\\\\">100%\n        <!--v-if-->\n      </div>\n    </div>\n  </div><br><br>\n  <div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 24px; row-gap: 24px;\\\\\">\n    <!---->\n    <div class=\\\\\"arco-space-item\\\\\">\n      <div class=\\\\\"arco-progress arco-progress-type-circle arco-progress-size-medium arco-progress-status-normal\\\\\" style=\\\\\"width: 50%;\\\\\">\n        <div role=\\\\\"progressbar\\\\\" aria-valuemin=\\\\\"0\\\\\" aria-valuemax=\\\\\"100\\\\\" aria-valuenow=\\\\\"0.8\\\\\" class=\\\\\"arco-progress-circle-wrapper\\\\\" style=\\\\\"width: 64px; height: 64px;\\\\\"><svg viewBox=\\\\\"0 0 64 64\\\\\" class=\\\\\"arco-progress-circle-svg\\\\\">\n            <defs>\n              <linearGradient id=\\\\\"arco-progress-circle-linear-gradient-1\\\\\" x1=\\\\\"0\\\\\" y1=\\\\\"1\\\\\" x2=\\\\\"0\\\\\" y2=\\\\\"0\\\\\">\n                <stop offset=\\\\\"0%\\\\\" stop-color=\\\\\"rgb(var(--primary-6))\\\\\"></stop>\n                <stop offset=\\\\\"100%\\\\\" stop-color=\\\\\"rgb(var(--success-6))\\\\\"></stop>\n              </linearGradient>\n            </defs>\n            <circle class=\\\\\"arco-progress-circle-bg\\\\\" fill=\\\\\"none\\\\\" cx=\\\\\"32\\\\\" cy=\\\\\"32\\\\\" r=\\\\\"30\\\\\" stroke-width=\\\\\"2\\\\\"></circle>\n            <circle class=\\\\\"arco-progress-circle-bar\\\\\" fill=\\\\\"none\\\\\" cx=\\\\\"32\\\\\" cy=\\\\\"32\\\\\" r=\\\\\"30\\\\\" stroke-width=\\\\\"4\\\\\" style=\\\\\"stroke: url(#arco-progress-circle-linear-gradient-1); stroke-dasharray: 188.49555921538757; stroke-dashoffset: 37.6991118430775;\\\\\"></circle>\n          </svg>\n          <div class=\\\\\"arco-progress-circle-text\\\\\">80%</div>\n        </div>\n      </div>\n    </div>\n    <!---->\n    <div class=\\\\\"arco-space-item\\\\\">\n      <div class=\\\\\"arco-progress arco-progress-type-circle arco-progress-size-medium arco-progress-status-success\\\\\" style=\\\\\"width: 50%;\\\\\">\n        <div role=\\\\\"progressbar\\\\\" aria-valuemin=\\\\\"0\\\\\" aria-valuemax=\\\\\"100\\\\\" aria-valuenow=\\\\\"1\\\\\" class=\\\\\"arco-progress-circle-wrapper\\\\\" style=\\\\\"width: 64px; height: 64px;\\\\\"><svg viewBox=\\\\\"0 0 64 64\\\\\" class=\\\\\"arco-progress-circle-svg\\\\\">\n            <defs>\n              <linearGradient id=\\\\\"arco-progress-circle-linear-gradient-2\\\\\" x1=\\\\\"0\\\\\" y1=\\\\\"1\\\\\" x2=\\\\\"0\\\\\" y2=\\\\\"0\\\\\">\n                <stop offset=\\\\\"0%\\\\\" stop-color=\\\\\"rgb(var(--primary-6))\\\\\"></stop>\n                <stop offset=\\\\\"100%\\\\\" stop-color=\\\\\"rgb(var(--success-6))\\\\\"></stop>\n              </linearGradient>\n            </defs>\n            <circle class=\\\\\"arco-progress-circle-bg\\\\\" fill=\\\\\"none\\\\\" cx=\\\\\"32\\\\\" cy=\\\\\"32\\\\\" r=\\\\\"30\\\\\" stroke-width=\\\\\"2\\\\\"></circle>\n            <circle class=\\\\\"arco-progress-circle-bar\\\\\" fill=\\\\\"none\\\\\" cx=\\\\\"32\\\\\" cy=\\\\\"32\\\\\" r=\\\\\"30\\\\\" stroke-width=\\\\\"4\\\\\" style=\\\\\"stroke: url(#arco-progress-circle-linear-gradient-2); stroke-dasharray: 188.49555921538757; stroke-dashoffset: 0;\\\\\"></circle>\n          </svg>\n          <div class=\\\\\"arco-progress-circle-text\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-check\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n              <path d=\\\\\"M41.678 11.05 19.05 33.678 6.322 20.95\\\\\"></path>\n            </svg></div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\"\n`;\n\nexports[`<progress> demo: render [mini] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 24px; row-gap: 24px; width: 100%;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-progress arco-progress-type-line arco-progress-size-mini arco-progress-status-normal\\\\\">\n      <div role=\\\\\"progressbar\\\\\" aria-valuemin=\\\\\"0\\\\\" aria-valuemax=\\\\\"100\\\\\" aria-valuenow=\\\\\"0.2\\\\\" class=\\\\\"arco-progress-circle-wrapper\\\\\" style=\\\\\"width: 16px; height: 16px;\\\\\"><svg viewBox=\\\\\"0 0 16 16\\\\\" class=\\\\\"arco-progress-circle-svg\\\\\">\n          <!--v-if-->\n          <circle class=\\\\\"arco-progress-circle-bg\\\\\" fill=\\\\\"none\\\\\" cx=\\\\\"8\\\\\" cy=\\\\\"8\\\\\" r=\\\\\"6\\\\\" stroke-width=\\\\\"4\\\\\"></circle>\n          <circle class=\\\\\"arco-progress-circle-bar\\\\\" fill=\\\\\"none\\\\\" cx=\\\\\"8\\\\\" cy=\\\\\"8\\\\\" r=\\\\\"6\\\\\" stroke-width=\\\\\"4\\\\\" style=\\\\\"stroke-dasharray: 37.69911184307752; stroke-dashoffset: 30.159289474462014;\\\\\"></circle>\n        </svg>\n        <!--v-if-->\n      </div>\n    </div>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-progress arco-progress-type-line arco-progress-size-mini arco-progress-status-warning\\\\\">\n      <div role=\\\\\"progressbar\\\\\" aria-valuemin=\\\\\"0\\\\\" aria-valuemax=\\\\\"100\\\\\" aria-valuenow=\\\\\"0.2\\\\\" class=\\\\\"arco-progress-circle-wrapper\\\\\" style=\\\\\"width: 16px; height: 16px;\\\\\"><svg viewBox=\\\\\"0 0 16 16\\\\\" class=\\\\\"arco-progress-circle-svg\\\\\">\n          <!--v-if-->\n          <circle class=\\\\\"arco-progress-circle-bg\\\\\" fill=\\\\\"none\\\\\" cx=\\\\\"8\\\\\" cy=\\\\\"8\\\\\" r=\\\\\"6\\\\\" stroke-width=\\\\\"4\\\\\"></circle>\n          <circle class=\\\\\"arco-progress-circle-bar\\\\\" fill=\\\\\"none\\\\\" cx=\\\\\"8\\\\\" cy=\\\\\"8\\\\\" r=\\\\\"6\\\\\" stroke-width=\\\\\"4\\\\\" style=\\\\\"stroke-dasharray: 37.69911184307752; stroke-dashoffset: 30.159289474462014;\\\\\"></circle>\n        </svg>\n        <!--v-if-->\n      </div>\n    </div>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-progress arco-progress-type-line arco-progress-size-mini arco-progress-status-danger\\\\\">\n      <div role=\\\\\"progressbar\\\\\" aria-valuemin=\\\\\"0\\\\\" aria-valuemax=\\\\\"100\\\\\" aria-valuenow=\\\\\"0.2\\\\\" class=\\\\\"arco-progress-circle-wrapper\\\\\" style=\\\\\"width: 16px; height: 16px;\\\\\"><svg viewBox=\\\\\"0 0 16 16\\\\\" class=\\\\\"arco-progress-circle-svg\\\\\">\n          <!--v-if-->\n          <circle class=\\\\\"arco-progress-circle-bg\\\\\" fill=\\\\\"none\\\\\" cx=\\\\\"8\\\\\" cy=\\\\\"8\\\\\" r=\\\\\"6\\\\\" stroke-width=\\\\\"4\\\\\"></circle>\n          <circle class=\\\\\"arco-progress-circle-bar\\\\\" fill=\\\\\"none\\\\\" cx=\\\\\"8\\\\\" cy=\\\\\"8\\\\\" r=\\\\\"6\\\\\" stroke-width=\\\\\"4\\\\\" style=\\\\\"stroke-dasharray: 37.69911184307752; stroke-dashoffset: 30.159289474462014;\\\\\"></circle>\n        </svg>\n        <!--v-if-->\n      </div>\n    </div>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-progress arco-progress-type-line arco-progress-size-mini arco-progress-status-success\\\\\">\n      <div role=\\\\\"progressbar\\\\\" aria-valuemin=\\\\\"0\\\\\" aria-valuemax=\\\\\"100\\\\\" aria-valuenow=\\\\\"0.2\\\\\" class=\\\\\"arco-progress-circle-wrapper\\\\\" style=\\\\\"width: 16px; height: 16px;\\\\\"><svg viewBox=\\\\\"0 0 16 16\\\\\" class=\\\\\"arco-progress-circle-svg\\\\\">\n          <!--v-if-->\n          <circle class=\\\\\"arco-progress-circle-bg\\\\\" fill=\\\\\"none\\\\\" cx=\\\\\"8\\\\\" cy=\\\\\"8\\\\\" r=\\\\\"6\\\\\" stroke-width=\\\\\"4\\\\\"></circle>\n          <circle class=\\\\\"arco-progress-circle-bar\\\\\" fill=\\\\\"none\\\\\" cx=\\\\\"8\\\\\" cy=\\\\\"8\\\\\" r=\\\\\"6\\\\\" stroke-width=\\\\\"4\\\\\" style=\\\\\"stroke-dasharray: 37.69911184307752; stroke-dashoffset: 30.159289474462014;\\\\\"></circle>\n        </svg>\n        <!--v-if-->\n      </div>\n    </div>\n  </div>\n</div>\n<div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 24px; row-gap: 24px; width: 100%; margin-top: 20px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-progress arco-progress-type-circle arco-progress-size-mini arco-progress-status-normal\\\\\">\n      <div role=\\\\\"progressbar\\\\\" aria-valuemin=\\\\\"0\\\\\" aria-valuemax=\\\\\"100\\\\\" aria-valuenow=\\\\\"0.2\\\\\" class=\\\\\"arco-progress-circle-wrapper\\\\\" style=\\\\\"width: 16px; height: 16px;\\\\\"><svg viewBox=\\\\\"0 0 16 16\\\\\" class=\\\\\"arco-progress-circle-svg\\\\\">\n          <!--v-if-->\n          <circle class=\\\\\"arco-progress-circle-bg\\\\\" fill=\\\\\"none\\\\\" cx=\\\\\"8\\\\\" cy=\\\\\"8\\\\\" r=\\\\\"4\\\\\" stroke-width=\\\\\"8\\\\\"></circle>\n          <circle class=\\\\\"arco-progress-circle-bar\\\\\" fill=\\\\\"none\\\\\" cx=\\\\\"8\\\\\" cy=\\\\\"8\\\\\" r=\\\\\"4\\\\\" stroke-width=\\\\\"8\\\\\" style=\\\\\"stroke-dasharray: 25.132741228718345; stroke-dashoffset: 20.106192982974676;\\\\\"></circle>\n        </svg>\n        <!--v-if-->\n      </div>\n    </div>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-progress arco-progress-type-circle arco-progress-size-mini arco-progress-status-warning\\\\\">\n      <div role=\\\\\"progressbar\\\\\" aria-valuemin=\\\\\"0\\\\\" aria-valuemax=\\\\\"100\\\\\" aria-valuenow=\\\\\"0.2\\\\\" class=\\\\\"arco-progress-circle-wrapper\\\\\" style=\\\\\"width: 16px; height: 16px;\\\\\"><svg viewBox=\\\\\"0 0 16 16\\\\\" class=\\\\\"arco-progress-circle-svg\\\\\">\n          <!--v-if-->\n          <circle class=\\\\\"arco-progress-circle-bg\\\\\" fill=\\\\\"none\\\\\" cx=\\\\\"8\\\\\" cy=\\\\\"8\\\\\" r=\\\\\"4\\\\\" stroke-width=\\\\\"8\\\\\"></circle>\n          <circle class=\\\\\"arco-progress-circle-bar\\\\\" fill=\\\\\"none\\\\\" cx=\\\\\"8\\\\\" cy=\\\\\"8\\\\\" r=\\\\\"4\\\\\" stroke-width=\\\\\"8\\\\\" style=\\\\\"stroke-dasharray: 25.132741228718345; stroke-dashoffset: 20.106192982974676;\\\\\"></circle>\n        </svg>\n        <!--v-if-->\n      </div>\n    </div>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-progress arco-progress-type-circle arco-progress-size-mini arco-progress-status-danger\\\\\">\n      <div role=\\\\\"progressbar\\\\\" aria-valuemin=\\\\\"0\\\\\" aria-valuemax=\\\\\"100\\\\\" aria-valuenow=\\\\\"0.2\\\\\" class=\\\\\"arco-progress-circle-wrapper\\\\\" style=\\\\\"width: 16px; height: 16px;\\\\\"><svg viewBox=\\\\\"0 0 16 16\\\\\" class=\\\\\"arco-progress-circle-svg\\\\\">\n          <!--v-if-->\n          <circle class=\\\\\"arco-progress-circle-bg\\\\\" fill=\\\\\"none\\\\\" cx=\\\\\"8\\\\\" cy=\\\\\"8\\\\\" r=\\\\\"4\\\\\" stroke-width=\\\\\"8\\\\\"></circle>\n          <circle class=\\\\\"arco-progress-circle-bar\\\\\" fill=\\\\\"none\\\\\" cx=\\\\\"8\\\\\" cy=\\\\\"8\\\\\" r=\\\\\"4\\\\\" stroke-width=\\\\\"8\\\\\" style=\\\\\"stroke-dasharray: 25.132741228718345; stroke-dashoffset: 20.106192982974676;\\\\\"></circle>\n        </svg>\n        <!--v-if-->\n      </div>\n    </div>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-progress arco-progress-type-circle arco-progress-size-mini arco-progress-status-success\\\\\">\n      <div role=\\\\\"progressbar\\\\\" aria-valuemin=\\\\\"0\\\\\" aria-valuemax=\\\\\"100\\\\\" aria-valuenow=\\\\\"0.2\\\\\" class=\\\\\"arco-progress-circle-wrapper\\\\\" style=\\\\\"width: 16px; height: 16px;\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-check\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n          <path d=\\\\\"M41.678 11.05 19.05 33.678 6.322 20.95\\\\\"></path>\n        </svg>\n        <!--v-if-->\n      </div>\n    </div>\n  </div>\n</div>\n<div style=\\\\\"margin-top: 20px;\\\\\">\n  <div class=\\\\\"arco-slider\\\\\" style=\\\\\"width: 150px;\\\\\">\n    <div class=\\\\\"arco-slider-track\\\\\">\n      <div class=\\\\\"arco-slider-bar\\\\\" style=\\\\\"left: 0%; right: 80%;\\\\\"></div>\n      <!--v-if-->\n      <!--v-if-->\n      <!--v-if-->\n      <!--v-if-->\n      <div style=\\\\\"left: 20%;\\\\\" tabindex=\\\\\"0\\\\\" role=\\\\\"slider\\\\\" aria-disabled=\\\\\"false\\\\\" aria-valuemax=\\\\\"1\\\\\" aria-valuemin=\\\\\"0\\\\\" aria-valuenow=\\\\\"0.2\\\\\" aria-valuetext=\\\\\"0.2\\\\\" class=\\\\\"arco-slider-btn\\\\\"></div>\n      <!---->\n    </div>\n    <!--v-if-->\n  </div>\n</div>\"\n`;\n\nexports[`<progress> demo: render [size] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-vertical\\\\\" style=\\\\\"column-gap: 24px; row-gap: 24px; width: 50%;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-radio-group-button arco-radio-group-size-medium arco-radio-group-direction-horizontal\\\\\"><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"small\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">Small</span></label><label class=\\\\\"arco-radio-button arco-radio-checked\\\\\"><input type=\\\\\"radio\\\\\" checked=\\\\\"\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"medium\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">Medium</span></label><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"large\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">Large</span></label></span></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-progress arco-progress-type-line arco-progress-size-medium arco-progress-status-normal\\\\\">\n      <div role=\\\\\"progressbar\\\\\" aria-valuemin=\\\\\"0\\\\\" aria-valuemax=\\\\\"100\\\\\" aria-valuenow=\\\\\"0.2\\\\\" class=\\\\\"arco-progress-line-wrapper\\\\\">\n        <div class=\\\\\"arco-progress-line\\\\\" style=\\\\\"width: 100%; height: 4px;\\\\\">\n          <div class=\\\\\"arco-progress-line-bar-buffer\\\\\"></div>\n          <div class=\\\\\"arco-progress-line-bar\\\\\" style=\\\\\"width: 20%;\\\\\"></div>\n        </div>\n        <div class=\\\\\"arco-progress-line-text\\\\\">20%\n          <!--v-if-->\n        </div>\n      </div>\n    </div>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-progress arco-progress-type-line arco-progress-size-medium arco-progress-status-warning\\\\\">\n      <div role=\\\\\"progressbar\\\\\" aria-valuemin=\\\\\"0\\\\\" aria-valuemax=\\\\\"100\\\\\" aria-valuenow=\\\\\"0.2\\\\\" class=\\\\\"arco-progress-line-wrapper\\\\\">\n        <div class=\\\\\"arco-progress-line\\\\\" style=\\\\\"width: 100%; height: 4px;\\\\\">\n          <div class=\\\\\"arco-progress-line-bar-buffer\\\\\"></div>\n          <div class=\\\\\"arco-progress-line-bar\\\\\" style=\\\\\"width: 20%;\\\\\"></div>\n        </div>\n        <div class=\\\\\"arco-progress-line-text\\\\\">20%\n          <!--v-if-->\n        </div>\n      </div>\n    </div>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-progress arco-progress-type-line arco-progress-size-medium arco-progress-status-danger\\\\\">\n      <div role=\\\\\"progressbar\\\\\" aria-valuemin=\\\\\"0\\\\\" aria-valuemax=\\\\\"100\\\\\" aria-valuenow=\\\\\"0.2\\\\\" class=\\\\\"arco-progress-line-wrapper\\\\\">\n        <div class=\\\\\"arco-progress-line\\\\\" style=\\\\\"width: 100%; height: 4px;\\\\\">\n          <div class=\\\\\"arco-progress-line-bar-buffer\\\\\"></div>\n          <div class=\\\\\"arco-progress-line-bar\\\\\" style=\\\\\"width: 20%;\\\\\"></div>\n        </div>\n        <div class=\\\\\"arco-progress-line-text\\\\\">20% <svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-exclamation-circle-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n            <path fill-rule=\\\\\"evenodd\\\\\" clip-rule=\\\\\"evenodd\\\\\" d=\\\\\"M24 44c11.046 0 20-8.954 20-20S35.046 4 24 4 4 12.954 4 24s8.954 20 20 20Zm-2-11a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1v2Zm4-18a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V15Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n          </svg></div>\n      </div>\n    </div>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 8px; row-gap: 8px;\\\\\">\n      <!---->\n      <div class=\\\\\"arco-space-item\\\\\">\n        <div class=\\\\\"arco-progress arco-progress-type-circle arco-progress-size-medium arco-progress-status-normal\\\\\">\n          <div role=\\\\\"progressbar\\\\\" aria-valuemin=\\\\\"0\\\\\" aria-valuemax=\\\\\"100\\\\\" aria-valuenow=\\\\\"0.2\\\\\" class=\\\\\"arco-progress-circle-wrapper\\\\\" style=\\\\\"width: 64px; height: 64px;\\\\\"><svg viewBox=\\\\\"0 0 64 64\\\\\" class=\\\\\"arco-progress-circle-svg\\\\\">\n              <!--v-if-->\n              <circle class=\\\\\"arco-progress-circle-bg\\\\\" fill=\\\\\"none\\\\\" cx=\\\\\"32\\\\\" cy=\\\\\"32\\\\\" r=\\\\\"30\\\\\" stroke-width=\\\\\"2\\\\\"></circle>\n              <circle class=\\\\\"arco-progress-circle-bar\\\\\" fill=\\\\\"none\\\\\" cx=\\\\\"32\\\\\" cy=\\\\\"32\\\\\" r=\\\\\"30\\\\\" stroke-width=\\\\\"4\\\\\" style=\\\\\"stroke-dasharray: 188.49555921538757; stroke-dashoffset: 150.79644737231007;\\\\\"></circle>\n            </svg>\n            <div class=\\\\\"arco-progress-circle-text\\\\\">20%</div>\n          </div>\n        </div>\n      </div>\n      <!---->\n      <div class=\\\\\"arco-space-item\\\\\">\n        <div class=\\\\\"arco-progress arco-progress-type-circle arco-progress-size-medium arco-progress-status-warning\\\\\">\n          <div role=\\\\\"progressbar\\\\\" aria-valuemin=\\\\\"0\\\\\" aria-valuemax=\\\\\"100\\\\\" aria-valuenow=\\\\\"0.2\\\\\" class=\\\\\"arco-progress-circle-wrapper\\\\\" style=\\\\\"width: 64px; height: 64px;\\\\\"><svg viewBox=\\\\\"0 0 64 64\\\\\" class=\\\\\"arco-progress-circle-svg\\\\\">\n              <!--v-if-->\n              <circle class=\\\\\"arco-progress-circle-bg\\\\\" fill=\\\\\"none\\\\\" cx=\\\\\"32\\\\\" cy=\\\\\"32\\\\\" r=\\\\\"30\\\\\" stroke-width=\\\\\"2\\\\\"></circle>\n              <circle class=\\\\\"arco-progress-circle-bar\\\\\" fill=\\\\\"none\\\\\" cx=\\\\\"32\\\\\" cy=\\\\\"32\\\\\" r=\\\\\"30\\\\\" stroke-width=\\\\\"4\\\\\" style=\\\\\"stroke-dasharray: 188.49555921538757; stroke-dashoffset: 150.79644737231007;\\\\\"></circle>\n            </svg>\n            <div class=\\\\\"arco-progress-circle-text\\\\\">20%</div>\n          </div>\n        </div>\n      </div>\n      <!---->\n      <div class=\\\\\"arco-space-item\\\\\">\n        <div class=\\\\\"arco-progress arco-progress-type-circle arco-progress-size-medium arco-progress-status-danger\\\\\">\n          <div role=\\\\\"progressbar\\\\\" aria-valuemin=\\\\\"0\\\\\" aria-valuemax=\\\\\"100\\\\\" aria-valuenow=\\\\\"0.2\\\\\" class=\\\\\"arco-progress-circle-wrapper\\\\\" style=\\\\\"width: 64px; height: 64px;\\\\\"><svg viewBox=\\\\\"0 0 64 64\\\\\" class=\\\\\"arco-progress-circle-svg\\\\\">\n              <!--v-if-->\n              <circle class=\\\\\"arco-progress-circle-bg\\\\\" fill=\\\\\"none\\\\\" cx=\\\\\"32\\\\\" cy=\\\\\"32\\\\\" r=\\\\\"30\\\\\" stroke-width=\\\\\"2\\\\\"></circle>\n              <circle class=\\\\\"arco-progress-circle-bar\\\\\" fill=\\\\\"none\\\\\" cx=\\\\\"32\\\\\" cy=\\\\\"32\\\\\" r=\\\\\"30\\\\\" stroke-width=\\\\\"4\\\\\" style=\\\\\"stroke-dasharray: 188.49555921538757; stroke-dashoffset: 150.79644737231007;\\\\\"></circle>\n            </svg>\n            <div class=\\\\\"arco-progress-circle-text\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-exclamation\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n                <path d=\\\\\"M23 9h2v21h-2z\\\\\"></path>\n                <path fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\" d=\\\\\"M23 9h2v21h-2z\\\\\"></path>\n                <path d=\\\\\"M23 37h2v2h-2z\\\\\"></path>\n                <path fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\" d=\\\\\"M23 37h2v2h-2z\\\\\"></path>\n              </svg></div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\"\n`;\n\nexports[`<progress> demo: render [status] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-vertical\\\\\" style=\\\\\"column-gap: 8px; row-gap: 8px; width: 50%;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-progress arco-progress-type-line arco-progress-size-medium arco-progress-status-normal\\\\\">\n      <div role=\\\\\"progressbar\\\\\" aria-valuemin=\\\\\"0\\\\\" aria-valuemax=\\\\\"100\\\\\" aria-valuenow=\\\\\"0.2\\\\\" class=\\\\\"arco-progress-line-wrapper\\\\\">\n        <div class=\\\\\"arco-progress-line\\\\\" style=\\\\\"width: 100%; height: 4px;\\\\\">\n          <div class=\\\\\"arco-progress-line-bar-buffer\\\\\"></div>\n          <div class=\\\\\"arco-progress-line-bar\\\\\" style=\\\\\"width: 20%;\\\\\"></div>\n        </div>\n        <div class=\\\\\"arco-progress-line-text\\\\\">20%\n          <!--v-if-->\n        </div>\n      </div>\n    </div>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-progress arco-progress-type-line arco-progress-size-medium arco-progress-status-warning\\\\\">\n      <div role=\\\\\"progressbar\\\\\" aria-valuemin=\\\\\"0\\\\\" aria-valuemax=\\\\\"100\\\\\" aria-valuenow=\\\\\"0.2\\\\\" class=\\\\\"arco-progress-line-wrapper\\\\\">\n        <div class=\\\\\"arco-progress-line\\\\\" style=\\\\\"width: 100%; height: 4px;\\\\\">\n          <div class=\\\\\"arco-progress-line-bar-buffer\\\\\"></div>\n          <div class=\\\\\"arco-progress-line-bar\\\\\" style=\\\\\"width: 20%;\\\\\"></div>\n        </div>\n        <div class=\\\\\"arco-progress-line-text\\\\\">20%\n          <!--v-if-->\n        </div>\n      </div>\n    </div>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-progress arco-progress-type-line arco-progress-size-medium arco-progress-status-danger\\\\\">\n      <div role=\\\\\"progressbar\\\\\" aria-valuemin=\\\\\"0\\\\\" aria-valuemax=\\\\\"100\\\\\" aria-valuenow=\\\\\"0.2\\\\\" class=\\\\\"arco-progress-line-wrapper\\\\\">\n        <div class=\\\\\"arco-progress-line\\\\\" style=\\\\\"width: 100%; height: 4px;\\\\\">\n          <div class=\\\\\"arco-progress-line-bar-buffer\\\\\"></div>\n          <div class=\\\\\"arco-progress-line-bar\\\\\" style=\\\\\"width: 20%;\\\\\"></div>\n        </div>\n        <div class=\\\\\"arco-progress-line-text\\\\\">20% <svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-exclamation-circle-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n            <path fill-rule=\\\\\"evenodd\\\\\" clip-rule=\\\\\"evenodd\\\\\" d=\\\\\"M24 44c11.046 0 20-8.954 20-20S35.046 4 24 4 4 12.954 4 24s8.954 20 20 20Zm-2-11a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1v2Zm4-18a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V15Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n          </svg></div>\n      </div>\n    </div>\n  </div>\n</div>\n<div style=\\\\\"margin-top: 20px;\\\\\">\n  <div class=\\\\\"arco-slider\\\\\" style=\\\\\"width: 150px;\\\\\">\n    <div class=\\\\\"arco-slider-track\\\\\">\n      <div class=\\\\\"arco-slider-bar\\\\\" style=\\\\\"left: 0%; right: 80%;\\\\\"></div>\n      <!--v-if-->\n      <!--v-if-->\n      <!--v-if-->\n      <!--v-if-->\n      <div style=\\\\\"left: 20%;\\\\\" tabindex=\\\\\"0\\\\\" role=\\\\\"slider\\\\\" aria-disabled=\\\\\"false\\\\\" aria-valuemax=\\\\\"1\\\\\" aria-valuemin=\\\\\"0\\\\\" aria-valuenow=\\\\\"0.2\\\\\" aria-valuetext=\\\\\"0.2\\\\\" class=\\\\\"arco-slider-btn\\\\\"></div>\n      <!---->\n    </div>\n    <!--v-if-->\n  </div>\n</div>\"\n`;\n\nexports[`<progress> demo: render [steps] correctly 1`] = `\n\"<div style=\\\\\"width: 50%;\\\\\">\n  <div class=\\\\\"arco-progress arco-progress-type-steps arco-progress-size-medium arco-progress-status-normal\\\\\">\n    <div role=\\\\\"progressbar\\\\\" aria-valuemin=\\\\\"0\\\\\" aria-valuemax=\\\\\"100\\\\\" aria-valuenow=\\\\\"0.3\\\\\" class=\\\\\"arco-progress-steps-wrapper\\\\\">\n      <div class=\\\\\"arco-progress-steps\\\\\" style=\\\\\"height: 4px;\\\\\">\n        <div class=\\\\\"arco-progress-steps-item arco-progress-steps-item-active\\\\\"></div>\n        <div class=\\\\\"arco-progress-steps-item\\\\\"></div>\n        <div class=\\\\\"arco-progress-steps-item\\\\\"></div>\n      </div>\n      <div class=\\\\\"arco-progress-steps-text\\\\\">30%\n        <!--v-if-->\n      </div>\n    </div>\n  </div>\n  <div class=\\\\\"arco-progress arco-progress-type-steps arco-progress-size-medium arco-progress-status-warning\\\\\">\n    <div role=\\\\\"progressbar\\\\\" aria-valuemin=\\\\\"0\\\\\" aria-valuemax=\\\\\"100\\\\\" aria-valuenow=\\\\\"1\\\\\" class=\\\\\"arco-progress-steps-wrapper\\\\\">\n      <div class=\\\\\"arco-progress-steps\\\\\" style=\\\\\"height: 4px;\\\\\">\n        <div class=\\\\\"arco-progress-steps-item arco-progress-steps-item-active\\\\\"></div>\n        <div class=\\\\\"arco-progress-steps-item arco-progress-steps-item-active\\\\\"></div>\n        <div class=\\\\\"arco-progress-steps-item arco-progress-steps-item-active\\\\\"></div>\n        <div class=\\\\\"arco-progress-steps-item arco-progress-steps-item-active\\\\\"></div>\n        <div class=\\\\\"arco-progress-steps-item arco-progress-steps-item-active\\\\\"></div>\n      </div>\n      <div class=\\\\\"arco-progress-steps-text\\\\\">100%\n        <!--v-if-->\n      </div>\n    </div>\n  </div>\n  <div class=\\\\\"arco-progress arco-progress-type-steps arco-progress-size-small arco-progress-status-normal\\\\\">\n    <div role=\\\\\"progressbar\\\\\" aria-valuemin=\\\\\"0\\\\\" aria-valuemax=\\\\\"100\\\\\" aria-valuenow=\\\\\"0.3\\\\\" class=\\\\\"arco-progress-steps-wrapper\\\\\">\n      <div class=\\\\\"arco-progress-steps\\\\\" style=\\\\\"height: 8px;\\\\\">\n        <div class=\\\\\"arco-progress-steps-item arco-progress-steps-item-active\\\\\"></div>\n        <div class=\\\\\"arco-progress-steps-item\\\\\"></div>\n        <div class=\\\\\"arco-progress-steps-item\\\\\"></div>\n      </div>\n      <div class=\\\\\"arco-progress-steps-text\\\\\">30%\n        <!--v-if-->\n      </div>\n    </div>\n  </div>\n</div>\"\n`;\n\nexports[`<progress> demo: render [trackColor] correctly 1`] = `\n\"<div style=\\\\\"width: 50%;\\\\\">\n  <div class=\\\\\"arco-progress arco-progress-type-line arco-progress-size-medium arco-progress-status-normal\\\\\" style=\\\\\"margin-bottom: 20px;\\\\\">\n    <div role=\\\\\"progressbar\\\\\" aria-valuemin=\\\\\"0\\\\\" aria-valuemax=\\\\\"100\\\\\" aria-valuenow=\\\\\"0.4\\\\\" class=\\\\\"arco-progress-line-wrapper\\\\\">\n      <div class=\\\\\"arco-progress-line\\\\\" style=\\\\\"width: 100%; height: 4px;\\\\\">\n        <div class=\\\\\"arco-progress-line-bar-buffer\\\\\"></div>\n        <div class=\\\\\"arco-progress-line-bar\\\\\" style=\\\\\"width: 40%;\\\\\"></div>\n      </div>\n      <div class=\\\\\"arco-progress-line-text\\\\\">40%\n        <!--v-if-->\n      </div>\n    </div>\n  </div>\n  <div class=\\\\\"arco-progress arco-progress-type-steps arco-progress-size-medium arco-progress-status-normal\\\\\" style=\\\\\"margin-bottom: 20px;\\\\\">\n    <div role=\\\\\"progressbar\\\\\" aria-valuemin=\\\\\"0\\\\\" aria-valuemax=\\\\\"100\\\\\" aria-valuenow=\\\\\"0.4\\\\\" class=\\\\\"arco-progress-steps-wrapper\\\\\">\n      <div class=\\\\\"arco-progress-steps\\\\\" style=\\\\\"height: 4px;\\\\\">\n        <div class=\\\\\"arco-progress-steps-item arco-progress-steps-item-active\\\\\"></div>\n        <div class=\\\\\"arco-progress-steps-item arco-progress-steps-item-active\\\\\"></div>\n        <div class=\\\\\"arco-progress-steps-item\\\\\"></div>\n        <div class=\\\\\"arco-progress-steps-item\\\\\"></div>\n      </div>\n      <div class=\\\\\"arco-progress-steps-text\\\\\">40%\n        <!--v-if-->\n      </div>\n    </div>\n  </div>\n  <div class=\\\\\"arco-progress arco-progress-type-circle arco-progress-size-medium arco-progress-status-normal\\\\\" style=\\\\\"margin-bottom: 20px;\\\\\">\n    <div role=\\\\\"progressbar\\\\\" aria-valuemin=\\\\\"0\\\\\" aria-valuemax=\\\\\"100\\\\\" aria-valuenow=\\\\\"0.4\\\\\" class=\\\\\"arco-progress-circle-wrapper\\\\\" style=\\\\\"width: 64px; height: 64px;\\\\\"><svg viewBox=\\\\\"0 0 64 64\\\\\" class=\\\\\"arco-progress-circle-svg\\\\\">\n        <!--v-if-->\n        <circle class=\\\\\"arco-progress-circle-bg\\\\\" fill=\\\\\"none\\\\\" cx=\\\\\"32\\\\\" cy=\\\\\"32\\\\\" r=\\\\\"30\\\\\" stroke-width=\\\\\"2\\\\\" style=\\\\\"stroke: var(--color-primary-light-1);\\\\\"></circle>\n        <circle class=\\\\\"arco-progress-circle-bar\\\\\" fill=\\\\\"none\\\\\" cx=\\\\\"32\\\\\" cy=\\\\\"32\\\\\" r=\\\\\"30\\\\\" stroke-width=\\\\\"4\\\\\" style=\\\\\"stroke-dasharray: 188.49555921538757; stroke-dashoffset: 113.09733552923254;\\\\\"></circle>\n      </svg>\n      <div class=\\\\\"arco-progress-circle-text\\\\\">40%</div>\n    </div>\n  </div>\n</div>\"\n`;\n"
  },
  {
    "path": "packages/web-vue/components/progress/__test__/demo.test.ts",
    "content": "import demoTest from '../../../scripts/demo-test';\n\ndemoTest('progress');\n"
  },
  {
    "path": "packages/web-vue/components/progress/circle.vue",
    "content": "<template>\n  <div\n    role=\"progressbar\"\n    aria-valuemin=\"0\"\n    aria-valuemax=\"100\"\n    :aria-valuenow=\"percent\"\n    :class=\"`${prefixCls}-wrapper`\"\n    :style=\"{ width: `${mergedWidth}px`, height: `${mergedWidth}px` }\"\n  >\n    <icon-check\n      v-if=\"type === 'circle' && size === 'mini' && status === 'success'\"\n      :style=\"{ fontSize: mergedWidth - 2, color }\"\n    />\n    <svg\n      v-else\n      :viewBox=\"`0 0 ${mergedWidth} ${mergedWidth}`\"\n      :class=\"`${prefixCls}-svg`\"\n    >\n      <defs v-if=\"isLinearGradient\">\n        <linearGradient :id=\"linearGradientId\" x1=\"0\" y1=\"1\" x2=\"0\" y2=\"0\">\n          <stop\n            v-for=\"key of Object.keys(color)\"\n            :key=\"key\"\n            :offset=\"key\"\n            :stop-color=\"color[key]\"\n          />\n        </linearGradient>\n      </defs>\n      <circle\n        :class=\"`${prefixCls}-bg`\"\n        fill=\"none\"\n        :cx=\"center\"\n        :cy=\"center\"\n        :r=\"radius\"\n        :stroke-width=\"mergedPathStrokeWidth\"\n        :style=\"{\n          stroke: trackColor,\n        }\"\n      />\n      <circle\n        :class=\"`${prefixCls}-bar`\"\n        fill=\"none\"\n        :cx=\"center\"\n        :cy=\"center\"\n        :r=\"radius\"\n        :stroke-width=\"mergedStrokeWidth\"\n        :style=\"{\n          stroke: isLinearGradient ? `url(#${linearGradientId})` : color,\n          strokeDasharray: perimeter,\n          strokeDashoffset: (percent >= 1 ? 0 : 1 - percent) * perimeter,\n        }\"\n      />\n    </svg>\n    <div v-if=\"showText && size !== 'mini'\" :class=\"`${prefixCls}-text`\">\n      <slot name=\"text\" :percent=\"percent\">\n        <icon-exclamation v-if=\"status === 'danger'\" />\n        <icon-check v-else-if=\"status === 'success'\" />\n        <template v-else>\n          {{ text }}\n        </template>\n      </slot>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, PropType } from 'vue';\nimport NP from 'number-precision';\nimport { getPrefixCls } from '../_utils/global-config';\nimport { isObject } from '../_utils/is';\nimport { SIZES } from '../_utils/constant';\nimport IconExclamation from '../icon/icon-exclamation';\nimport IconCheck from '../icon/icon-check';\n\nlet __ARCO_PROGRESS_SEED = 0;\n\nconst DEFAULT_WIDTH = {\n  mini: 16,\n  small: 48,\n  medium: 64,\n  large: 80,\n};\n\nconst DEFAULT_STROKE_WIDTH = {\n  mini: 4,\n  small: 3,\n  medium: 4,\n  large: 4,\n};\n\nexport default defineComponent({\n  name: 'ProgressCircle',\n  components: {\n    IconExclamation,\n    IconCheck,\n  },\n  props: {\n    percent: {\n      type: Number,\n      default: 0,\n    },\n    type: {\n      type: String,\n    },\n    size: {\n      type: String as PropType<typeof SIZES[number]>,\n      default: 'medium',\n    },\n    strokeWidth: {\n      type: Number,\n    },\n    width: {\n      type: Number,\n      default: undefined,\n    },\n    color: {\n      type: [String, Object],\n      default: undefined,\n    },\n    trackColor: String,\n    status: {\n      type: String,\n      default: undefined,\n    },\n    showText: {\n      type: Boolean,\n      default: true,\n    },\n    pathStrokeWidth: {\n      type: Number,\n    },\n  },\n  setup(props) {\n    const prefixCls = getPrefixCls('progress-circle');\n\n    const isLinearGradient = isObject(props.color);\n\n    const mergedWidth = computed(() => {\n      return props.width ?? DEFAULT_WIDTH[props.size];\n    });\n\n    const mergedStrokeWidth = computed(\n      () =>\n        props.strokeWidth ??\n        (props.size === 'mini'\n          ? mergedWidth.value / 2\n          : DEFAULT_STROKE_WIDTH[props.size])\n    );\n\n    const mergedPathStrokeWidth = computed(\n      () =>\n        props.pathStrokeWidth ??\n        (props.size === 'mini'\n          ? mergedStrokeWidth.value\n          : Math.max(2, mergedStrokeWidth.value - 2))\n    );\n\n    const radius = computed(\n      () => (mergedWidth.value - mergedStrokeWidth.value) / 2\n    );\n    const perimeter = computed(() => Math.PI * 2 * radius.value);\n    const center = computed(() => mergedWidth.value / 2);\n\n    const linearGradientId = computed(() => {\n      __ARCO_PROGRESS_SEED += 1;\n      return `${prefixCls}-linear-gradient-${__ARCO_PROGRESS_SEED}`;\n    });\n\n    const text = computed(() => `${NP.times(props.percent, 100)}%`);\n\n    return {\n      prefixCls,\n      isLinearGradient,\n      radius,\n      text,\n      perimeter,\n      center,\n      mergedWidth,\n      mergedStrokeWidth,\n      mergedPathStrokeWidth,\n      linearGradientId,\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/progress/index.ts",
    "content": "import type { App } from 'vue';\nimport type { ArcoOptions } from '../_utils/types';\nimport { setGlobalConfig, getComponentPrefix } from '../_utils/global-config';\nimport _Progress from './progress.vue';\n\nconst Progress = Object.assign(_Progress, {\n  install: (app: App, options?: ArcoOptions) => {\n    setGlobalConfig(app, options);\n    const componentPrefix = getComponentPrefix(options);\n\n    app.component(componentPrefix + _Progress.name, _Progress);\n  },\n});\n\nexport type ProgressInstance = InstanceType<typeof _Progress>;\n\nexport default Progress;\n"
  },
  {
    "path": "packages/web-vue/components/progress/line.vue",
    "content": "<template>\n  <div\n    role=\"progressbar\"\n    aria-valuemin=\"0\"\n    aria-valuemax=\"100\"\n    :aria-valuenow=\"percent\"\n    :class=\"`${prefixCls}-wrapper`\"\n  >\n    <div :class=\"prefixCls\" :style=\"style\">\n      <div :class=\"`${prefixCls}-bar-buffer`\" />\n      <div :class=\"[`${prefixCls}-bar`]\" :style=\"barStyle\" />\n    </div>\n    <div v-if=\"showText\" :class=\"`${prefixCls}-text`\">\n      <slot name=\"text\" :percent=\"percent\">\n        {{ text }}\n        <icon-exclamation-circle-fill v-if=\"status === 'danger'\" />\n      </slot>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, PropType } from 'vue';\nimport NP from 'number-precision';\nimport { getPrefixCls } from '../_utils/global-config';\nimport { isObject } from '../_utils/is';\nimport IconExclamationCircleFill from '../icon/icon-exclamation-circle-fill';\nimport { Status } from '../_utils/constant';\n\nconst DEFAULT_STROKE_WIDTH = {\n  small: 3,\n  medium: 4,\n  large: 8,\n};\n\nconst getBackground = (color?: string | Record<string, string>) => {\n  if (!color) {\n    return undefined;\n  }\n\n  if (isObject(color)) {\n    const val = Object.keys(color)\n      .map((key) => `${color[key]} ${key}`)\n      .join(',');\n    return {\n      backgroundImage: `linear-gradient(to right, ${val})`,\n    };\n  }\n  return {\n    backgroundColor: color,\n  };\n};\n\nexport default defineComponent({\n  name: 'ProgressLine',\n  components: {\n    IconExclamationCircleFill,\n  },\n  props: {\n    percent: {\n      type: Number,\n      default: 0,\n    },\n    animation: {\n      type: Boolean,\n      default: false,\n    },\n    size: {\n      type: String as PropType<'small' | 'medium' | 'large'>,\n      default: 'medium',\n    },\n    strokeWidth: {\n      type: Number,\n      default: 4,\n    },\n    width: {\n      type: [Number, String],\n      default: '100%',\n    },\n    color: {\n      type: [String, Object],\n      default: undefined,\n    },\n    trackColor: String,\n    formatText: {\n      type: Function,\n      default: undefined,\n    },\n    status: {\n      type: String as PropType<Status>,\n    },\n    showText: Boolean,\n  },\n  setup(props) {\n    const prefixCls = getPrefixCls('progress-line');\n\n    const strokeWidth = computed(() => {\n      if (props.strokeWidth !== 4) {\n        return props.strokeWidth;\n      }\n      return DEFAULT_STROKE_WIDTH[props.size];\n    });\n\n    const text = computed(() => `${NP.times(props.percent, 100)}%`);\n\n    const style = computed(() => ({\n      width: props.width,\n      height: `${strokeWidth.value}px`,\n      backgroundColor: props.trackColor,\n    }));\n\n    // const computedText = computed(() => {\n    //   if (isFunction(props.formatText)) {\n    //     return props.formatText(props.percent);\n    //   }\n    //   return `${props.percent}%`;\n    // });\n\n    const barStyle = computed(() => ({\n      width: `${props.percent * 100}%`,\n      ...getBackground(props.color),\n    }));\n\n    return {\n      prefixCls,\n      style,\n      barStyle,\n      text,\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/progress/progress.vue",
    "content": "<template>\n  <div :class=\"cls\">\n    <progress-steps\n      v-if=\"steps > 0\"\n      :stroke-width=\"strokeWidth\"\n      :percent=\"percent\"\n      :color=\"color\"\n      :track-color=\"trackColor\"\n      :width=\"width\"\n      :steps=\"steps\"\n      :size=\"mergedSize\"\n      :show-text=\"showText\"\n    >\n      <template v-if=\"$slots.text\" #text=\"scope\">\n        <slot name=\"text\" v-bind=\"scope\"></slot>\n      </template>\n    </progress-steps>\n    <progress-line\n      v-else-if=\"type === 'line' && mergedSize !== 'mini'\"\n      :stroke-width=\"strokeWidth\"\n      :animation=\"animation\"\n      :percent=\"percent\"\n      :color=\"color\"\n      :track-color=\"trackColor\"\n      :size=\"mergedSize\"\n      :buffer-color=\"bufferColor\"\n      :width=\"width\"\n      :show-text=\"showText\"\n      :status=\"computedStatus\"\n    >\n      <template v-if=\"$slots.text\" #text=\"scope\">\n        <slot name=\"text\" v-bind=\"scope\"></slot>\n      </template>\n    </progress-line>\n    <progress-circle\n      v-else\n      :type=\"type\"\n      :stroke-width=\"type === 'line' ? strokeWidth || 4 : strokeWidth\"\n      :path-stroke-width=\"type === 'line' ? strokeWidth || 4 : strokeWidth\"\n      :width=\"width\"\n      :percent=\"percent\"\n      :color=\"color\"\n      :track-color=\"trackColor\"\n      :size=\"mergedSize\"\n      :show-text=\"showText\"\n      :status=\"computedStatus\"\n    >\n      <template v-if=\"$slots.text\" #text=\"scope\">\n        <slot name=\"text\" v-bind=\"scope\"></slot>\n      </template>\n    </progress-circle>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, PropType, toRefs } from 'vue';\nimport ProgressLine from './line.vue';\nimport ProgressCircle from './circle.vue';\nimport ProgressSteps from './steps.vue';\nimport { Size, Status } from '../_utils/constant';\nimport { getPrefixCls } from '../_utils/global-config';\nimport { useSize } from '../_hooks/use-size';\n\nconst PROGRESS_TYPES = ['line', 'circle'] as const;\ntype ProgressType = typeof PROGRESS_TYPES[number];\n\nexport default defineComponent({\n  name: 'Progress',\n  components: {\n    ProgressLine,\n    ProgressCircle,\n    ProgressSteps,\n  },\n  props: {\n    /**\n     * @zh 进度条的类型\n     * @en The type of progress bar\n     * @values 'line', 'circle'\n     */\n    type: {\n      type: String as PropType<ProgressType>,\n      default: 'line',\n    },\n    /**\n     * @zh 进度条的大小\n     * @en The size of the progress bar\n     * @values 'mini','small','medium','large'\n     * @defaultValue 'medium'\n     */\n    size: {\n      type: String as PropType<Size>,\n    },\n    /**\n     * @zh 进度条当前的百分比\n     * @en The current percentage of the progress bar\n     */\n    percent: {\n      type: Number,\n      default: 0,\n    },\n    /**\n     * @zh 开启步骤条模式，并设置步骤数\n     * @en Turn on the step bar mode and set the number of steps\n     */\n    steps: {\n      type: Number,\n      default: 0,\n    },\n    /**\n     * @zh 是否开启过渡动画\n     * @en Whether to turn on the transition animation\n     */\n    animation: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 进度条的线宽\n     * @en The line width of the progress bar\n     */\n    strokeWidth: {\n      type: Number,\n    },\n    /**\n     * @zh 进度条的长度\n     * @en The width of the progress bar\n     */\n    width: {\n      type: [Number, String],\n    },\n    /**\n     * @zh 进度条的颜色\n     * @en The color of the progress bar\n     */\n    color: {\n      type: [String, Object],\n    },\n    /**\n     * @zh 进度条的轨道颜色\n     * @en The color of the progress track\n     */\n    trackColor: String,\n    bufferColor: {\n      type: [String, Object],\n    },\n\n    /**\n     * @zh 是否显示文字\n     * @en Whether to display text\n     */\n    showText: {\n      type: Boolean,\n      default: true,\n    },\n    /**\n     * @zh 进度条状态\n     * @en Progress bar status\n     * @values 'normal', 'success', 'warning', 'danger'\n     */\n    status: {\n      type: String as PropType<Status>,\n    },\n    /**\n     * @zh 文本\n     * @en Text\n     * @slot text\n     */\n  },\n  setup(props) {\n    const prefixCls = getPrefixCls('progress');\n    const { size } = toRefs(props);\n    const type = computed(() => (props.steps > 0 ? 'steps' : props.type));\n    const computedStatus = computed(() => {\n      return props.status || (props.percent >= 1 ? 'success' : 'normal');\n    });\n    const { mergedSize } = useSize(size);\n\n    const cls = computed(() => [\n      prefixCls,\n      `${prefixCls}-type-${type.value}`,\n      `${prefixCls}-size-${mergedSize.value}`,\n      `${prefixCls}-status-${computedStatus.value}`,\n    ]);\n\n    return {\n      cls,\n      computedStatus,\n      mergedSize,\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/progress/steps.vue",
    "content": "<template>\n  <div\n    role=\"progressbar\"\n    aria-valuemin=\"0\"\n    aria-valuemax=\"100\"\n    :aria-valuenow=\"percent\"\n    :class=\"`${prefixCls}-wrapper`\"\n  >\n    <div :class=\"prefixCls\" :style=\"{ height: `${mergedStrokeWidth}px` }\">\n      <div\n        v-for=\"(active, index) of stepList\"\n        :key=\"index\"\n        :class=\"[\n          `${prefixCls}-item`,\n          {\n            [`${prefixCls}-item-active`]: active,\n          },\n        ]\"\n        :style=\"{\n          backgroundColor: active ? color : trackColor,\n        }\"\n      />\n    </div>\n    <div v-if=\"showText\" :class=\"`${prefixCls}-text`\">\n      <slot name=\"text\" :percent=\"percent\">\n        {{ text }}\n        <icon-exclamation-circle-fill v-if=\"status === 'danger'\" />\n      </slot>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, PropType } from 'vue';\nimport NP from 'number-precision';\nimport { getPrefixCls } from '../_utils/global-config';\nimport IconExclamationCircleFill from '../icon/icon-exclamation-circle-fill';\n\nexport default defineComponent({\n  name: 'ProgressSteps',\n  components: {\n    IconExclamationCircleFill,\n  },\n  props: {\n    steps: {\n      type: Number,\n      default: 0,\n    },\n    percent: {\n      type: Number,\n      default: 0,\n    },\n    size: {\n      type: String,\n    },\n    color: {\n      type: [String, Object],\n      default: undefined,\n    },\n    trackColor: String,\n    strokeWidth: {\n      type: Number,\n    },\n    status: {\n      type: String,\n      default: undefined,\n    },\n    showText: {\n      type: Boolean,\n      default: true,\n    },\n  },\n  setup(props) {\n    const prefixCls = getPrefixCls('progress-steps');\n\n    const mergedStrokeWidth = computed(() =>\n      props.strokeWidth ?? props.size === 'small' ? 8 : 4\n    );\n\n    const stepList = computed(() =>\n      [...Array(props.steps)].map((_, index) => {\n        return props.percent > 0 && props.percent > (1 / props.steps) * index;\n      })\n    );\n\n    const text = computed(() => `${NP.times(props.percent, 100)}%`);\n\n    return {\n      prefixCls,\n      stepList,\n      mergedStrokeWidth,\n      text,\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/progress/style/index.less",
    "content": "@import '../../style/theme/index.less';\n@import './token.less';\n\n@progress-prefix-cls: ~'@{prefix}-progress';\n\n.@{progress-prefix-cls} {\n  position: relative;\n  line-height: 1;\n  font-size: @progress-line-size-default-font-size;\n\n  &-type-line,\n  &-type-steps {\n    display: inline-block;\n    max-width: 100%;\n    width: 100%;\n  }\n\n  &-type-line {\n    &.@{progress-prefix-cls}-size-mini {\n      width: auto;\n    }\n  }\n\n  &-line,\n  &-steps {\n    &-wrapper {\n      display: flex;\n      align-items: center;\n      width: 100%;\n      max-width: 100%;\n      height: 100%;\n    }\n\n    &-text {\n      font-size: @progress-line-size-default-font-size;\n      margin-left: @progress-line-margin-text-left;\n      color: @progress-line-color-text;\n      white-space: nowrap;\n      text-align: right;\n      flex-grow: 1;\n      flex-shrink: 0;\n      min-width: @progress-line-size-text-width;\n\n      .@{prefix}-icon {\n        font-size: @progress-line-size-default-icon-size;\n        margin-left: @progress-line-margin-icon-left;\n      }\n    }\n  }\n\n  // type = line\n  &-line {\n    background-color: @progress-line-color-line-bg;\n    border-radius: 100px;\n    width: 100%;\n    position: relative;\n    display: inline-block;\n    overflow: hidden;\n\n    &-bar {\n      height: 100%;\n      border-radius: 100px;\n      background-color: @progress-line-color-inner-bg;\n      position: relative;\n      transition: width 0.6s @transition-timing-function-standard,\n        background 0.3s @transition-timing-function-standard;\n      max-width: 100%;\n\n      &-buffer {\n        position: absolute;\n        background-color: @progress-line-color-buffer-bg;\n        height: 100%;\n        top: 0;\n        left: 0;\n        border-radius: 0 100px 100px 0;\n        max-width: 100%;\n        transition: all 0.6s @transition-timing-function-standard;\n      }\n\n      &-animate::after {\n        content: '';\n        display: block;\n        position: absolute;\n        top: 0;\n        width: 100%;\n        height: 100%;\n        border-radius: inherit;\n        background: linear-gradient(\n          90deg,\n          transparent 25%,\n          rgba(255, 255, 255, 0.5) 50%,\n          transparent 75%\n        );\n        background-size: 400% 100%;\n        animation: ~'@{prefix}-progress-loading' 1.5s @transition-timing-function-standard\n          infinite;\n      }\n    }\n\n    &-text {\n      .@{prefix}-icon {\n        color: @progress-line-color-icon_normal;\n      }\n    }\n  }\n\n  &-type-steps {\n    // size small\n    &.@{progress-prefix-cls}-size-small {\n      width: auto;\n    }\n\n    &.@{progress-prefix-cls}-size-small .@{progress-prefix-cls}-steps-item {\n      width: @progress-steps-size-small-steps-item-width;\n      flex: unset;\n      border-radius: @progress-steps-size-small-steps-item-width;\n\n      &:not(:last-of-type) {\n        margin-right: @progress-steps-margin-steps-item-right_small;\n      }\n    }\n  }\n\n  &-steps {\n    display: flex;\n    width: 100%;\n\n    &-text {\n      margin-left: @progress-steps-margin-text-left;\n      min-width: unset;\n\n      .@{prefix}-icon {\n        color: @progress-line-color-icon_normal;\n      }\n    }\n\n    &-item {\n      height: 100%;\n      flex: 1;\n      background-color: @progress-steps-color-item-bg;\n      position: relative;\n      display: inline-block;\n\n      &:not(:last-of-type) {\n        margin-right: @progress-steps-margin-steps-item-right;\n      }\n\n      &:last-of-type {\n        border-top-right-radius: 100px;\n        border-bottom-right-radius: 100px;\n      }\n\n      &:first-of-type {\n        border-top-left-radius: 100px;\n        border-bottom-left-radius: 100px;\n      }\n\n      &-active {\n        background-color: @progress-steps-color-item-bg_normal;\n      }\n    }\n  }\n\n  &-status-warning {\n    .@{progress-prefix-cls}-line-bar {\n      background-color: @progress-line-color-inner-bg_warning;\n    }\n\n    .@{progress-prefix-cls}-steps-item-active {\n      background-color: @progress-steps-color-item-bg_warning;\n    }\n\n    .@{progress-prefix-cls}-line-text .@{prefix}-icon,\n    .@{progress-prefix-cls}-steps-text .@{prefix}-icon {\n      color: @progress-line-color-icon_warning;\n    }\n  }\n\n  &-status-success {\n    .@{progress-prefix-cls}-line-bar {\n      background-color: @progress-line-color-inner-bg_success;\n    }\n\n    .@{progress-prefix-cls}-steps-item-active {\n      background-color: @progress-steps-color-item-bg_success;\n    }\n\n    .@{progress-prefix-cls}-line-text .@{prefix}-icon,\n    .@{progress-prefix-cls}-steps-text .@{prefix}-icon {\n      color: @progress-line-color-icon_success;\n    }\n  }\n\n  &-status-danger {\n    .@{progress-prefix-cls}-line-bar {\n      background-color: @progress-line-color-inner-bg_error;\n    }\n\n    .@{progress-prefix-cls}-steps-item-active {\n      background-color: @progress-steps-color-item-bg_error;\n    }\n\n    .@{progress-prefix-cls}-line-text .@{prefix}-icon,\n    .@{progress-prefix-cls}-steps-text .@{prefix}-icon {\n      color: @progress-line-color-icon_error;\n    }\n  }\n\n  // size\n  &-size-small {\n    .@{progress-prefix-cls}-line-text {\n      font-size: @progress-line-size-small-font-size;\n      margin-left: @progress-line-size-small-margin-text-left;\n    }\n\n    .@{progress-prefix-cls}-line-text .@{prefix}-icon {\n      font-size: @progress-line-size-small-icon-size;\n    }\n  }\n\n  &-size-large {\n    .@{progress-prefix-cls}-line-text {\n      font-size: @progress-line-size-large-font-size;\n      margin-left: @progress-line-size-large-margin-text-left;\n    }\n\n    .@{progress-prefix-cls}-line-text .@{prefix}-icon {\n      font-size: @progress-line-size-large-icon-size;\n    }\n  }\n}\n\n// type = circle\n.@{progress-prefix-cls} {\n  &-type-circle {\n    display: inline-block;\n  }\n\n  &-circle {\n    &-wrapper {\n      position: relative;\n      text-align: center;\n      line-height: 1;\n      display: inline-block;\n      vertical-align: text-bottom;\n    }\n\n    &-svg {\n      transform: rotate(-90deg);\n    }\n\n    &-text {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      color: @progress-circle-color-text;\n      transform: translate(-50%, -50%);\n      font-size: @progress-circle-size-default-font-size;\n\n      .@{prefix}-icon {\n        font-size: @progress-circle-size-default-icon-size;\n        color: @progress-line-color-icon_normal;\n      }\n    }\n\n    &-bg {\n      stroke: @progress-circle-color-mask-stroke;\n    }\n\n    &-bar {\n      stroke: @progress-circle-color-path-stroke;\n      transition: stroke-dashoffset 0.6s @transition-timing-function-linear 0s,\n        stroke 0.6s @transition-timing-function-linear;\n    }\n  }\n\n  &-size-mini {\n    .@{progress-prefix-cls}-circle-bg {\n      stroke: @progress-circle-size-mini-color-mask-stroke;\n    }\n\n    .@{progress-prefix-cls}-circle-bar {\n      stroke: @progress-circle-color-path-stroke;\n    }\n\n    &.@{progress-prefix-cls}-status-warning {\n      .@{progress-prefix-cls}-circle-bg {\n        stroke: @progress-circle-size-mini-color-mask-stroke_warning;\n      }\n    }\n\n    &.@{progress-prefix-cls}-status-danger {\n      .@{progress-prefix-cls}-circle-bg {\n        stroke: @progress-circle-size-mini-color-mask-stroke_error;\n      }\n    }\n\n    &.@{progress-prefix-cls}-status-success {\n      .@{progress-prefix-cls}-circle-bg {\n        stroke: @progress-circle-size-mini-color-mask-stroke_success;\n      }\n    }\n\n    .@{progress-prefix-cls}-circle-wrapper .@{prefix}-icon-check {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translateX(-50%) translateY(-50%);\n    }\n\n    .@{progress-prefix-cls}-circle-text {\n      position: static;\n      top: unset;\n      left: unset;\n      transform: unset;\n    }\n  }\n\n  &-size-small {\n    .@{progress-prefix-cls}-circle-text {\n      font-size: @progress-circle-size-small-font-size;\n\n      .@{prefix}-icon {\n        font-size: @progress-circle-size-small-icon-size;\n      }\n    }\n  }\n\n  &-size-large {\n    .@{progress-prefix-cls}-circle-text {\n      font-size: @progress-circle-size-large-font-size;\n\n      .@{prefix}-icon {\n        font-size: @progress-circle-size-large-icon-size;\n      }\n    }\n  }\n\n  &-status-warning {\n    .@{progress-prefix-cls}-circle-bar {\n      stroke: @progress-circle-color-path-stroke_warning;\n    }\n\n    .@{prefix}-icon {\n      color: @progress-circle-color-icon_warning;\n    }\n  }\n\n  &-status-success {\n    .@{progress-prefix-cls}-circle-bar {\n      stroke: @progress-circle-color-path-stroke_success;\n    }\n\n    .@{prefix}-icon {\n      color: @progress-circle-color-icon_success;\n    }\n  }\n\n  &-status-danger {\n    .@{progress-prefix-cls}-circle-bar {\n      stroke: @progress-circle-color-path-stroke_error;\n    }\n\n    .@{prefix}-icon {\n      color: @progress-circle-color-icon_error;\n    }\n  }\n}\n\n@keyframes ~'@{prefix}-progress-loading' {\n  0% {\n    background-position: 100% 50%;\n  }\n\n  100% {\n    background-position: 0 50%;\n  }\n}\n"
  },
  {
    "path": "packages/web-vue/components/progress/style/index.ts",
    "content": "import '../../style/index.less';\nimport '../../tooltip/style';\nimport './index.less';\n"
  },
  {
    "path": "packages/web-vue/components/progress/style/token.less",
    "content": "@progress-line-color-line-bg: var(~'@{arco-cssvars-prefix}-color-fill-3');\n@progress-line-color-inner-bg: @color-primary-6;\n@progress-line-color-inner-bg_success: @color-success-6;\n@progress-line-color-inner-bg_error: @color-danger-6;\n@progress-line-color-buffer-bg: var(~'@{arco-cssvars-prefix}-color-primary-light-3');\n\n@progress-line-size-large-font-size: 16px;\n@progress-line-size-small-font-size: @font-size-body-1;\n@progress-line-size-default-font-size: @font-size-body-1;\n@progress-line-size-large-margin-text-left: @spacing-7;\n@progress-line-size-small-margin-text-left: @spacing-7;\n\n@progress-line-color-icon_success: @color-success-6;\n@progress-line-color-icon_error: @color-danger-6;\n@progress-line-margin-text-left: @spacing-7;\n@progress-line-margin-icon-left: @spacing-2;\n@progress-line-color-text: var(~'@{arco-cssvars-prefix}-color-text-2');\n@progress-line-color-icon_normal: var(~'@{arco-cssvars-prefix}-color-text-2');\n@progress-line-size-text-width: @size-8;\n\n@progress-line-size-default-icon-size: 12px;\n@progress-line-size-small-icon-size: 12px;\n@progress-line-size-large-icon-size: 14px;\n\n@progress-circle-size-small-font-size: @font-size-body-2;\n@progress-circle-size-default-font-size: @font-size-body-3;\n@progress-circle-size-large-font-size: 16px;\n\n@progress-circle-size-small-icon-size: 14px;\n@progress-circle-size-default-icon-size: @size-4;\n@progress-circle-size-large-icon-size: @size-4;\n@progress-circle-color-text: var(~'@{arco-cssvars-prefix}-color-text-3');\n\n@progress-circle-color-mask-stroke: var(~'@{arco-cssvars-prefix}-color-fill-3');\n@progress-circle-size-mini-color-mask-stroke: var(~'@{arco-cssvars-prefix}-color-primary-light-3');\n@progress-circle-size-mini-color-mask-stroke_success: var(~'@{arco-cssvars-prefix}-color-success-light-3');\n@progress-circle-size-mini-color-mask-stroke_error: var(~'@{arco-cssvars-prefix}-color-danger-light-3');\n\n@progress-circle-color-path-stroke: @color-primary-6;\n@progress-circle-color-path-stroke_success: @color-success-6;\n@progress-circle-color-path-stroke_error: @color-danger-6;\n\n@progress-circle-color-icon_success: @color-success-6;\n@progress-circle-color-icon_error: @color-danger-6;\n\n@progress-steps-size-small-steps-item-width: 2px;\n@progress-steps-margin-steps-item-right: 3px;\n@progress-steps-margin-steps-item-right_small: 3px;\n@progress-steps-color-item-bg: var(~'@{arco-cssvars-prefix}-color-fill-3');\n@progress-steps-color-item-bg_normal: @color-primary-6;\n@progress-steps-color-item-bg_success: @color-success-6;\n@progress-steps-color-item-bg_error: @color-danger-6;\n@progress-steps-margin-text-left: @spacing-4;\n\n@progress-line-color-inner-bg_warning: @color-warning-6;\n@progress-line-color-icon_warning: @color-warning-6;\n@progress-circle-size-mini-color-mask-stroke_warning: var(~'@{arco-cssvars-prefix}-color-warning-light-3');\n@progress-circle-color-path-stroke_warning: @color-warning-6;\n@progress-circle-color-icon_warning: @color-warning-6;\n@progress-steps-color-item-bg_warning: @color-warning-6;\n"
  },
  {
    "path": "packages/web-vue/components/radio/CHANGELOG.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.56.2\n\n`2024-09-13`\n\n### 🐛 BugFix\n\n- fix not inheriting the injected size ([#3267](https://github.com/arco-design/arco-design-vue/pull/3267))\n\n\n## 2.38.1\n\n`2022-11-04`\n\n### 🐛 BugFix\n\n- Fix `radio-group` state not reset when resetting value ([#1813](https://github.com/arco-design/arco-design-vue/pull/1813))\n\n\n## 2.38.0\n\n`2022-10-28`\n\n### 🐛 BugFix\n\n- Fix the problem that the state is not cleared when clearing model-value ([#1794](https://github.com/arco-design/arco-design-vue/pull/1794))\n\n\n## 2.27.0\n\n`2022-05-13`\n\n### 🆕 Feature\n\n- `radio-group` support  `options` prop ([#1090](https://github.com/arco-design/arco-design-vue/pull/1090))\n\n\n## 2.18.0\n\n`2022-03-04`\n\n### 🆕 Feature\n\n- Add radio slot, you can customize the radio ([#769](https://github.com/arco-design/arco-design-vue/pull/769))\n\n\n## 2.18.0-beta.1\n\n`2022-02-18`\n\n### ⚠️ Important Attention\n\n- Outer wrapping DOM changed from span to label ([#697](https://github.com/arco-design/arco-design-vue/pull/697))\n\n\n## 2.8.0\n\n`2021-12-01`\n\n### 💅 Style\n\n- Remove the selected bold effect in button mode ([#308](https://github.com/arco-design/arco-design-vue/pull/308))\n\n"
  },
  {
    "path": "packages/web-vue/components/radio/CHANGELOG.zh-CN.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.56.2\n\n`2024-09-13`\n\n### 🐛 问题修复\n\n- 修复未继承注入的size问题 ([#3267](https://github.com/arco-design/arco-design-vue/pull/3267))\n\n\n## 2.38.1\n\n`2022-11-04`\n\n### 🐛 问题修复\n\n- 修复 `radio-group` 重置值时状态没有重置的问题 ([#1813](https://github.com/arco-design/arco-design-vue/pull/1813))\n\n\n## 2.38.0\n\n`2022-10-28`\n\n### 🐛 问题修复\n\n- 修复清除 model-value 时状态未清除的问题 ([#1794](https://github.com/arco-design/arco-design-vue/pull/1794))\n\n\n## 2.27.0\n\n`2022-05-13`\n\n### 🆕 新增功能\n\n- `radio-group` 支持 `options` 属性 ([#1090](https://github.com/arco-design/arco-design-vue/pull/1090))\n\n\n## 2.18.0\n\n`2022-03-04`\n\n### 🆕 新增功能\n\n- 增加 radio 插槽，可以自定义单选框 ([#769](https://github.com/arco-design/arco-design-vue/pull/769))\n\n\n## 2.18.0-beta.1\n\n`2022-02-18`\n\n### ⚠️ 重点注意\n\n- 外层包裹 DOM 从 span 改为 label ([#697](https://github.com/arco-design/arco-design-vue/pull/697))\n\n\n## 2.8.0\n\n`2021-12-01`\n\n### 💅 样式更新\n\n- 去除 button 模式下选中加粗的效果 ([#308](https://github.com/arco-design/arco-design-vue/pull/308))\n\n"
  },
  {
    "path": "packages/web-vue/components/radio/README.en-US.md",
    "content": "```yaml\nmeta:\n  type: Component\n  category: Data Entry\ntitle: Radio\ndescription: In a set of related and mutually exclusive data, the user can only select one option.\n```\n\n*Auto translate by google.*\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/control.md\n\n@import ./__demo__/group.md\n\n@import ./__demo__/options.md\n\n@import ./__demo__/direction.md\n\n@import ./__demo__/button.md\n\n@import ./__demo__/size.md\n\n@import ./__demo__/layout.md\n\n@import ./__demo__/custom.md\n\n## API\n\n\n### `<radio>` Props\n\n|Attribute|Description|Type|Default|\n|---|---|---|:---:|\n|model-value **(v-model)**|Value|`string \\| number \\| boolean`|`-`|\n|default-checked|Whether checked by default (uncontrolled state)|`boolean`|`false`|\n|value|The `value` of the option|`string \\| number \\| boolean`|`true`|\n|type|Radio type|`'radio' \\| 'button'`|`'radio'`|\n|disabled|Whether to disable|`boolean`|`false`|\n### `<radio>` Events\n\n|Event Name|Description|Parameters|\n|---|---|---|\n|change|Trigger when the value changes|value: ` string \\| number \\| boolean `<br>ev: `Event`|\n### `<radio>` Slots\n\n|Slot Name|Description|Parameters|version|\n|---|---|---|:---|\n|radio|Custom radio|checked: `boolean`<br>disabled: `boolean`|2.18.0|\n\n\n\n\n### `<radio-group>` Props\n\n|Attribute|Description|Type|Default|version|\n|---|---|---|:---:|:---|\n|model-value **(v-model)**|Value|`string \\| number \\| boolean`|`-`||\n|default-value|Default value (uncontrolled state)|`string \\| number \\| boolean`|`''`||\n|type|Types of radio group|`'radio' \\| 'button'`|`'radio'`||\n|size|The size of the radio group|`'mini' \\| 'small' \\| 'medium' \\| 'large'`|`-`||\n|options|Options|`Array<string \\| number \\| RadioOption>`|`-`|2.27.0|\n|direction|The direction of the radio group|`'horizontal' \\| 'vertical'`|`'horizontal'`||\n|disabled|Whether to disable|`boolean`|`false`||\n### `<radio-group>` Events\n\n|Event Name|Description|Parameters|\n|---|---|---|\n|change|Trigger when the value changes|value: ` string \\| number \\| boolean `|\n### `<radio-group>` Slots\n\n|Slot Name|Description|Parameters|version|\n|---|---|---|:---|\n|radio|Custom radio|checked: `boolean`<br>disabled: `boolean`|2.27.0|\n|label|radio label content|data: `RadioOption`|2.27.0|\n\n\n\n\n### RadioOption\n\n|Name|Description|Type|Default|\n|---|---|---|:---:|\n|label|label content|`RenderContent`|`-`|\n|value|The `value` of the option|`string \\| number`|`-`|\n|disabled|Whether to disable|`boolean`|`false`|\n\n\n"
  },
  {
    "path": "packages/web-vue/components/radio/README.zh-CN.md",
    "content": "```yaml\nmeta:\n  type: 组件\n  category: 数据输入\ntitle: 单选框 Radio\ndescription: 在一组相关且互斥数据中，用户仅能选择一个选项。\n```\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/control.md\n\n@import ./__demo__/group.md\n\n@import ./__demo__/options.md\n\n@import ./__demo__/direction.md\n\n@import ./__demo__/button.md\n\n@import ./__demo__/size.md\n\n@import ./__demo__/layout.md\n\n@import ./__demo__/custom.md\n\n## API\n\n\n### `<radio>` Props\n\n|参数名|描述|类型|默认值|\n|---|---|---|:---:|\n|model-value **(v-model)**|绑定值|`string \\| number \\| boolean`|`-`|\n|default-checked|默认是否选中（非受控状态）|`boolean`|`false`|\n|value|选项的 `value`|`string \\| number \\| boolean`|`true`|\n|type|单选的类型|`'radio' \\| 'button'`|`'radio'`|\n|disabled|是否禁用|`boolean`|`false`|\n### `<radio>` Events\n\n|事件名|描述|参数|\n|---|---|---|\n|change|值改变时触发|value: ` string \\| number \\| boolean `<br>ev: `Event`|\n### `<radio>` Slots\n\n|插槽名|描述|参数|版本|\n|---|:---:|---|:---|\n|radio|自定义单选框|checked: `boolean`<br>disabled: `boolean`|2.18.0|\n\n\n\n\n### `<radio-group>` Props\n\n|参数名|描述|类型|默认值|版本|\n|---|---|---|:---:|:---|\n|model-value **(v-model)**|绑定值|`string \\| number \\| boolean`|`-`||\n|default-value|默认值（非受控状态）|`string \\| number \\| boolean`|`''`||\n|type|单选框组的类型|`'radio' \\| 'button'`|`'radio'`||\n|size|单选框组的尺寸|`'mini' \\| 'small' \\| 'medium' \\| 'large'`|`-`||\n|options|选项|`Array<string \\| number \\| RadioOption>`|`-`|2.27.0|\n|direction|单选框组的方向|`'horizontal' \\| 'vertical'`|`'horizontal'`||\n|disabled|是否禁用|`boolean`|`false`||\n### `<radio-group>` Events\n\n|事件名|描述|参数|\n|---|---|---|\n|change|值改变时触发|value: ` string \\| number \\| boolean `|\n### `<radio-group>` Slots\n\n|插槽名|描述|参数|版本|\n|---|:---:|---|:---|\n|radio|自定义单选框|checked: `boolean`<br>disabled: `boolean`|2.27.0|\n|label|radio 文案内容|data: `RadioOption`|2.27.0|\n\n\n\n\n### RadioOption\n\n|参数名|描述|类型|默认值|\n|---|---|---|:---:|\n|label|文案|`RenderContent`|`-`|\n|value|选项的 `value`|`string \\| number`|`-`|\n|disabled|是否禁用|`boolean`|`false`|\n\n\n"
  },
  {
    "path": "packages/web-vue/components/radio/TEMPLATE.md",
    "content": "## zh-CN\n```yaml\nmeta:\n  type: 组件\n  category: 数据输入\ntitle: 单选框 Radio\ndescription: 在一组相关且互斥数据中，用户仅能选择一个选项。\n```\n---\n## en-US\n```yaml\nmeta:\n  type: Component\n  category: Data Entry\ntitle: Radio\ndescription: In a set of related and mutually exclusive data, the user can only select one option.\n```\n---\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/control.md\n\n@import ./__demo__/group.md\n\n@import ./__demo__/options.md\n\n@import ./__demo__/direction.md\n\n@import ./__demo__/button.md\n\n@import ./__demo__/size.md\n\n@import ./__demo__/layout.md\n\n@import ./__demo__/custom.md\n\n## API\n\n%%API(radio.tsx)%%\n\n%%API(radio-group.tsx)%%\n\n%%INTERFACE(interface.ts)%%\n"
  },
  {
    "path": "packages/web-vue/components/radio/__demo__/basic.md",
    "content": "```yaml\ntitle:\n  zh-CN: 基本用法\n  en-US: Basic Usage\n```\n\n## zh-CN\n\n单选框的基本用法。\n\n---\n\n## en-US\n\nBasic usage of radio.\n\n---\n\n```vue\n<template>\n  <a-space size=\"large\">\n    <a-radio value=\"radio\">Radio</a-radio>\n    <a-radio value=\"disabled radio\" :default-checked=\"true\" disabled>Disabled Radio</a-radio>\n  </a-space>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/radio/__demo__/button.md",
    "content": "```yaml\ntitle:\n  zh-CN: 按钮类型的单选框组\n  en-US: Button Radio Group\n```\n\n## zh-CN\n\n通过指定 `type=\"button\"` ，可以显示按钮类型的单选框组。\n\n---\n\n## en-US\n\nBy specifying `type=\"button\"`, a radio group of button types can be displayed.\n\n---\n\n```vue\n<template>\n  <a-radio-group type=\"button\">\n    <a-radio value=\"Beijing\">Beijing</a-radio>\n    <a-radio value=\"Shanghai\">Shanghai</a-radio>\n    <a-radio value=\"Guangzhou\">Guangzhou</a-radio>\n    <a-radio value=\"Shenzhen\">Shenzhen</a-radio>\n  </a-radio-group>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/radio/__demo__/control.md",
    "content": "```yaml\ntitle:\n  zh-CN: 受控\n  en-US: Controlled\n```\n\n## zh-CN\n\n通过 `v-model` (`model-value`) 属性控制是否选中\n\n---\n\n## en-US\n\nControl whether the radio is selected\n\n---\n\n```vue\n<template>\n  <a-space size=\"large\">\n    <a-radio v-model=\"checked1\">v-model</a-radio>\n    <a-radio :model-value=\"true\">binding \"true\"</a-radio>\n    <a-radio :model-value=\"checked2\">binding value2</a-radio>\n    <a-radio :default-checked=\"true\">uncontrolled state</a-radio>\n  </a-space>\n  <div :style=\"{ marginTop: '20px' }\">\n    <a-space size=\"large\">\n      <a-button type=\"primary\" @click=\"handleSetCheck\">\n        {{ checked2 ? 'uncheck' : 'check' }} value2\n      </a-button>\n      <a-button @click=\"handleReset\"> reset all </a-button>\n    </a-space>\n  </div>\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n  setup() {\n    const checked1 = ref(false);\n    const checked2 = ref(false);\n\n    const handleSetCheck = () => {\n      checked2.value = !checked2.value;\n    };\n\n    const handleReset = () => {\n      checked1.value = false;\n      checked2.value = false;\n    };\n\n    return {\n      checked1,\n      checked2,\n      handleSetCheck,\n      handleReset,\n    };\n  },\n};\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/radio/__demo__/custom.md",
    "content": "```yaml\ntitle:\n  zh-CN: 自定义单选框\n  en-US: Custom radio Display\n```\n\n## zh-CN\n\n使用 #radio 插槽自定义复选框的展示\n\n---\n\n## en-US\n\nUse the #radio slot to customize the display of radios\n\n---\n\n```vue\n<template>\n  <a-radio-group default-value=\"1\">\n    <a-radio value=\"1\">\n      <template #radio=\"{ checked }\">\n        <a-tag :checked=\"checked\" checkable>This is a tag radio 1</a-tag>\n      </template>\n    </a-radio>\n    <a-radio value=\"2\">\n      <template #radio=\"{ checked }\">\n        <a-tag :checked=\"checked\" checkable>This is a tag radio 2</a-tag>\n      </template>\n    </a-radio>\n    <a-radio value=\"3\">\n      <template #radio=\"{ checked }\">\n        <a-tag :checked=\"checked\" checkable>This is a tag radio 3</a-tag>\n      </template>\n    </a-radio>\n  </a-radio-group>\n\n  <div :style=\"{ marginTop: '20px' }\">\n    <a-radio-group>\n      <template v-for=\"item in 2\" :key=\"item\">\n        <a-radio :value=\"item\">\n          <template #radio=\"{ checked }\">\n            <a-space\n              align=\"start\"\n              class=\"custom-radio-card\"\n              :class=\"{ 'custom-radio-card-checked': checked }\"\n            >\n              <div className=\"custom-radio-card-mask\">\n                <div className=\"custom-radio-card-mask-dot\" />\n              </div>\n              <div>\n                <div className=\"custom-radio-card-title\">\n                  radio Card {{ item }}\n                </div>\n                <a-typography-text type=\"secondary\">\n                  this is a text\n                </a-typography-text>\n              </div>\n            </a-space>\n          </template>\n        </a-radio>\n      </template>\n    </a-radio-group>\n  </div>\n</template>\n\n<style scoped>\n.custom-radio-card {\n  padding: 10px 16px;\n  border: 1px solid var(--color-border-2);\n  border-radius: 4px;\n  width: 250px;\n  box-sizing: border-box;\n}\n\n.custom-radio-card-mask {\n  height: 14px;\n  width: 14px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 100%;\n  border: 1px solid var(--color-border-2);\n  box-sizing: border-box;\n}\n\n.custom-radio-card-mask-dot {\n  width: 8px;\n  height: 8px;\n  border-radius: 100%;\n}\n\n.custom-radio-card-title {\n  color: var(--color-text-1);\n  font-size: 14px;\n  font-weight: bold;\n  margin-bottom: 8px;\n}\n\n.custom-radio-card:hover,\n.custom-radio-card-checked,\n.custom-radio-card:hover .custom-radio-card-mask,\n.custom-radio-card-checked  .custom-radio-card-mask{\n  border-color: rgb(var(--primary-6));\n}\n\n.custom-radio-card-checked {\n  background-color: var(--color-primary-light-1);\n}\n\n.custom-radio-card:hover .custom-radio-card-title,\n.custom-radio-card-checked .custom-radio-card-title {\n  color: rgb(var(--primary-6));\n}\n\n.custom-radio-card-checked .custom-radio-card-mask-dot {\n  background-color: rgb(var(--primary-6));\n}\n</style>\n```\n"
  },
  {
    "path": "packages/web-vue/components/radio/__demo__/direction.md",
    "content": "```yaml\ntitle:\n  zh-CN: 单选框组方向\n  en-US: Radio Group Direction\n```\n\n## zh-CN\n\n通过设置 `direction=\"vertical\"` 可以展示竖直的单选框组。\n\n---\n\n## en-US\n\nBy setting `direction=\"vertical\"`, you can display the vertical radio group.\n\n---\n\n```vue\n<template>\n  <a-radio-group direction=\"vertical\">\n    <a-radio value=\"A\">A</a-radio>\n    <a-radio value=\"B\">B</a-radio>\n    <a-radio value=\"C\">C</a-radio>\n    <a-radio value=\"D\">D</a-radio>\n  </a-radio-group>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/radio/__demo__/group.md",
    "content": "```yaml\ntitle:\n  zh-CN: 单选框组\n  en-US: Radio Group\n```\n\n## zh-CN\n\n通过 `<a-radio-group>` 组件展示单选框组。\n\n---\n\n## en-US\n\nThe radio group is displayed through the `<a-radio-group>` component.\n\n---\n\n```vue\n<template>\n  <a-space direction=\"vertical\" size=\"large\">\n    <a-radio-group>\n      <a-radio value=\"A\">A</a-radio>\n      <a-radio value=\"B\">B</a-radio>\n      <a-radio value=\"C\">C</a-radio>\n      <a-radio value=\"D\">D</a-radio>\n    </a-radio-group>\n    <a-radio-group>\n      <a-radio value=\"A\">A</a-radio>\n      <a-radio value=\"B\">B</a-radio>\n      <a-radio value=\"C\">C</a-radio>\n      <a-radio value=\"D\" disabled>D</a-radio>\n    </a-radio-group>\n  </a-space>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/radio/__demo__/layout.md",
    "content": "```yaml\ntitle:\n  zh-CN: 布局\n  en-US: Layout\n```\n\n## zh-CN\n\n使用 `<a-radio-group>` 传入 `<a-radio>`，配合 `<a-grid>` 组件实现灵活的布局。\n\n---\n\n## en-US\n\nWe can use `<a-radio>` and `<a-grid>` in `<a-radio-group>`, to implement complex layout.\n\n---\n\n```vue\n<template>\n  <a-radio-group v-model=\"checkedValue\">\n    <a-grid :cols=\"3\" :colGap=\"24\" :rowGap=\"16\">\n      <a-grid-item>\n        <a-radio value=\"1\">Option 1</a-radio>\n      </a-grid-item>\n      <a-grid-item>\n        <a-radio value=\"2\" disabled>Option 2</a-radio>\n      </a-grid-item>\n      <a-grid-item>\n        <a-radio value=\"3\">Option 3</a-radio>\n      </a-grid-item>\n      <a-grid-item>\n        <a-radio value=\"4\">Option 4</a-radio>\n      </a-grid-item>\n      <a-grid-item>\n        <a-radio value=\"5\">Option 5</a-radio>\n      </a-grid-item>\n    </a-grid>\n  </a-radio-group>\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n  setup() {\n    const checkedValue = ref('1');\n\n    return {\n      checkedValue,\n    };\n  },\n};\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/radio/__demo__/options.md",
    "content": "```yaml\ntitle:\n  zh-CN: 单选框组选项\n  en-US: Radio group options\n```\n\n## zh-CN\n\n`a-radio-group` 通过 `options` 属性设置子元素\n\n---\n\n## en-US\n\n`a-radio-group` set child elements through `options` prop\n\n---\n\n```vue\n<template>\n  <a-space direction=\"vertical\" size=\"large\">\n    <a-radio-group v-model=\"value1\" :options=\"plainOptions\" />\n    <a-radio-group v-model=\"value2\" :options=\"options\" />\n    <a-radio-group v-model=\"value2\" :options=\"options\">\n      <template #label=\"{ data }\">\n        <a-tag>{{ data.label }}</a-tag>\n      </template>\n    </a-radio-group>\n  </a-space>\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n  setup() {\n    const value1 = ref('plain 1');\n    const plainOptions = ['plain 1', 'plain 2', 'plain 3'];\n\n    const value2 = ref('1');\n    const options = [\n      { label: 'option 1', value: '1' },\n      { label: 'option 2', value: '2' },\n      { label: 'option 3', value: '3', disabled: true },\n    ];\n\n    return {\n      plainOptions,\n      options,\n      value1,\n      value2,\n    };\n  },\n};\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/radio/__demo__/size.md",
    "content": "```yaml\ntitle:\n  zh-CN: 按钮类型单选框组的尺寸\n  en-US: Button Radio Group Size\n```\n\n## zh-CN\n\n按钮类型的单选框组分为 `mini`、`small`、`medium`、`large` 四种尺寸。\n\n---\n\n## en-US\n\nThe radio buttons of the button type have four sizes of `mini`, `small`, `medium`, and `large`.\n\n---\n\n```vue\n<template>\n  <a-space direction=\"vertical\" size=\"large\">\n    <a-radio-group type=\"button\" size=\"mini\">\n      <a-radio value=\"Beijing\">Beijing</a-radio>\n      <a-radio value=\"Shanghai\">Shanghai</a-radio>\n      <a-radio value=\"Guangzhou\">Guangzhou</a-radio>\n      <a-radio value=\"Shenzhen\">Shenzhen</a-radio>\n    </a-radio-group>\n    <a-radio-group type=\"button\" size=\"small\">\n      <a-radio value=\"Beijing\">Beijing</a-radio>\n      <a-radio value=\"Shanghai\">Shanghai</a-radio>\n      <a-radio value=\"Guangzhou\">Guangzhou</a-radio>\n      <a-radio value=\"Shenzhen\">Shenzhen</a-radio>\n    </a-radio-group>\n    <a-radio-group type=\"button\">\n      <a-radio value=\"Beijing\">Beijing</a-radio>\n      <a-radio value=\"Shanghai\">Shanghai</a-radio>\n      <a-radio value=\"Guangzhou\">Guangzhou</a-radio>\n      <a-radio value=\"Shenzhen\">Shenzhen</a-radio>\n    </a-radio-group>\n    <a-radio-group type=\"button\" size=\"large\">\n      <a-radio value=\"Beijing\">Beijing</a-radio>\n      <a-radio value=\"Shanghai\">Shanghai</a-radio>\n      <a-radio value=\"Guangzhou\">Guangzhou</a-radio>\n      <a-radio value=\"Shenzhen\">Shenzhen</a-radio>\n    </a-radio-group>\n  </a-space>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/radio/__test__/__snapshots__/demo.test.ts.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`<radio> demo: render [basic] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 24px; row-gap: 24px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><label class=\\\\\"arco-radio\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"radio\\\\\"><span class=\\\\\"arco-icon-hover arco-radio-icon-hover\\\\\"><span class=\\\\\"arco-radio-icon\\\\\"></span></span><span class=\\\\\"arco-radio-label\\\\\">Radio</span></label></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><label class=\\\\\"arco-radio arco-radio-checked arco-radio-disabled\\\\\"><input type=\\\\\"radio\\\\\" checked=\\\\\"\\\\\" class=\\\\\"arco-radio-target\\\\\" disabled=\\\\\"\\\\\" value=\\\\\"disabled radio\\\\\"><span class=\\\\\"arco-icon-hover arco-icon-hover-disabled arco-radio-icon-hover\\\\\"><span class=\\\\\"arco-radio-icon\\\\\"></span></span><span class=\\\\\"arco-radio-label\\\\\">Disabled Radio</span></label></div>\n</div>\"\n`;\n\nexports[`<radio> demo: render [button] correctly 1`] = `\"<span class=\\\\\"arco-radio-group-button arco-radio-group-size-medium arco-radio-group-direction-horizontal\\\\\"><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"Beijing\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">Beijing</span></label><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"Shanghai\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">Shanghai</span></label><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"Guangzhou\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">Guangzhou</span></label><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"Shenzhen\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">Shenzhen</span></label></span>\"`;\n\nexports[`<radio> demo: render [control] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 24px; row-gap: 24px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><label class=\\\\\"arco-radio\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"true\\\\\"><span class=\\\\\"arco-icon-hover arco-radio-icon-hover\\\\\"><span class=\\\\\"arco-radio-icon\\\\\"></span></span><span class=\\\\\"arco-radio-label\\\\\">v-model</span></label></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><label class=\\\\\"arco-radio arco-radio-checked\\\\\"><input type=\\\\\"radio\\\\\" checked=\\\\\"\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"true\\\\\"><span class=\\\\\"arco-icon-hover arco-icon-hover-disabled arco-radio-icon-hover\\\\\"><span class=\\\\\"arco-radio-icon\\\\\"></span></span><span class=\\\\\"arco-radio-label\\\\\">binding \\\\\"true\\\\\"</span></label></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><label class=\\\\\"arco-radio\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"true\\\\\"><span class=\\\\\"arco-icon-hover arco-radio-icon-hover\\\\\"><span class=\\\\\"arco-radio-icon\\\\\"></span></span><span class=\\\\\"arco-radio-label\\\\\">binding value2</span></label></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><label class=\\\\\"arco-radio arco-radio-checked\\\\\"><input type=\\\\\"radio\\\\\" checked=\\\\\"\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"true\\\\\"><span class=\\\\\"arco-icon-hover arco-icon-hover-disabled arco-radio-icon-hover\\\\\"><span class=\\\\\"arco-radio-icon\\\\\"></span></span><span class=\\\\\"arco-radio-label\\\\\">uncontrolled state</span></label></div>\n</div>\n<div style=\\\\\"margin-top: 20px;\\\\\">\n  <div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 24px; row-gap: 24px;\\\\\">\n    <!---->\n    <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n        <!--v-if-->check value2\n      </button></div>\n    <!---->\n    <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n        <!--v-if--> reset all\n      </button></div>\n  </div>\n</div>\"\n`;\n\nexports[`<radio> demo: render [custom] correctly 1`] = `\n\"<span class=\\\\\"arco-radio-group arco-radio-group-size-medium arco-radio-group-direction-horizontal\\\\\"><label class=\\\\\"arco-radio arco-radio-checked\\\\\"><input type=\\\\\"radio\\\\\" checked=\\\\\"\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"1\\\\\"><span class=\\\\\"arco-tag arco-tag-size-medium arco-tag-checkable arco-tag-checked\\\\\"><!--v-if-->This is a tag radio 1<!--v-if--><!--v-if--></span></label><label class=\\\\\"arco-radio\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"2\\\\\"><span class=\\\\\"arco-tag arco-tag-size-medium arco-tag-checkable\\\\\"><!--v-if-->This is a tag radio 2<!--v-if--><!--v-if--></span></label><label class=\\\\\"arco-radio\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"3\\\\\"><span class=\\\\\"arco-tag arco-tag-size-medium arco-tag-checkable\\\\\"><!--v-if-->This is a tag radio 3<!--v-if--><!--v-if--></span></label></span>\n<div style=\\\\\"margin-top: 20px;\\\\\"><span class=\\\\\"arco-radio-group arco-radio-group-size-medium arco-radio-group-direction-horizontal\\\\\"><label class=\\\\\"arco-radio\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"1\\\\\"><div class=\\\\\"arco-space arco-space-horizontal arco-space-align-start custom-radio-card\\\\\" style=\\\\\"column-gap: 8px; row-gap: 8px;\\\\\"><!----><div class=\\\\\"arco-space-item\\\\\"><div class=\\\\\"custom-radio-card-mask\\\\\"><div class=\\\\\"custom-radio-card-mask-dot\\\\\"></div></div></div><!----><div class=\\\\\"arco-space-item\\\\\"><div><div class=\\\\\"custom-radio-card-title\\\\\"> radio Card 1</div><span class=\\\\\"arco-typography arco-typography-secondary\\\\\"> this is a text <!----><!--v-if--><!--v-if--><!--v-if--></span></div>\n</div>\n</div></label><label class=\\\\\"arco-radio\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"2\\\\\">\n  <div class=\\\\\"arco-space arco-space-horizontal arco-space-align-start custom-radio-card\\\\\" style=\\\\\"column-gap: 8px; row-gap: 8px;\\\\\">\n    <!---->\n    <div class=\\\\\"arco-space-item\\\\\">\n      <div class=\\\\\"custom-radio-card-mask\\\\\">\n        <div class=\\\\\"custom-radio-card-mask-dot\\\\\"></div>\n      </div>\n    </div>\n    <!---->\n    <div class=\\\\\"arco-space-item\\\\\">\n      <div>\n        <div class=\\\\\"custom-radio-card-title\\\\\"> radio Card 2</div><span class=\\\\\"arco-typography arco-typography-secondary\\\\\"> this is a text <!----><!--v-if--><!--v-if--><!--v-if--></span>\n      </div>\n    </div>\n  </div>\n</label></span></div>\"\n`;\n\nexports[`<radio> demo: render [direction] correctly 1`] = `\"<span class=\\\\\"arco-radio-group arco-radio-group-size-medium arco-radio-group-direction-vertical\\\\\"><label class=\\\\\"arco-radio\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"A\\\\\"><span class=\\\\\"arco-icon-hover arco-radio-icon-hover\\\\\"><span class=\\\\\"arco-radio-icon\\\\\"></span></span><span class=\\\\\"arco-radio-label\\\\\">A</span></label><label class=\\\\\"arco-radio\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"B\\\\\"><span class=\\\\\"arco-icon-hover arco-radio-icon-hover\\\\\"><span class=\\\\\"arco-radio-icon\\\\\"></span></span><span class=\\\\\"arco-radio-label\\\\\">B</span></label><label class=\\\\\"arco-radio\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"C\\\\\"><span class=\\\\\"arco-icon-hover arco-radio-icon-hover\\\\\"><span class=\\\\\"arco-radio-icon\\\\\"></span></span><span class=\\\\\"arco-radio-label\\\\\">C</span></label><label class=\\\\\"arco-radio\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"D\\\\\"><span class=\\\\\"arco-icon-hover arco-radio-icon-hover\\\\\"><span class=\\\\\"arco-radio-icon\\\\\"></span></span><span class=\\\\\"arco-radio-label\\\\\">D</span></label></span>\"`;\n\nexports[`<radio> demo: render [group] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-vertical\\\\\" style=\\\\\"column-gap: 24px; row-gap: 24px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-radio-group arco-radio-group-size-medium arco-radio-group-direction-horizontal\\\\\"><label class=\\\\\"arco-radio\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"A\\\\\"><span class=\\\\\"arco-icon-hover arco-radio-icon-hover\\\\\"><span class=\\\\\"arco-radio-icon\\\\\"></span></span><span class=\\\\\"arco-radio-label\\\\\">A</span></label><label class=\\\\\"arco-radio\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"B\\\\\"><span class=\\\\\"arco-icon-hover arco-radio-icon-hover\\\\\"><span class=\\\\\"arco-radio-icon\\\\\"></span></span><span class=\\\\\"arco-radio-label\\\\\">B</span></label><label class=\\\\\"arco-radio\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"C\\\\\"><span class=\\\\\"arco-icon-hover arco-radio-icon-hover\\\\\"><span class=\\\\\"arco-radio-icon\\\\\"></span></span><span class=\\\\\"arco-radio-label\\\\\">C</span></label><label class=\\\\\"arco-radio\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"D\\\\\"><span class=\\\\\"arco-icon-hover arco-radio-icon-hover\\\\\"><span class=\\\\\"arco-radio-icon\\\\\"></span></span><span class=\\\\\"arco-radio-label\\\\\">D</span></label></span></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-radio-group arco-radio-group-size-medium arco-radio-group-direction-horizontal\\\\\"><label class=\\\\\"arco-radio\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"A\\\\\"><span class=\\\\\"arco-icon-hover arco-radio-icon-hover\\\\\"><span class=\\\\\"arco-radio-icon\\\\\"></span></span><span class=\\\\\"arco-radio-label\\\\\">A</span></label><label class=\\\\\"arco-radio\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"B\\\\\"><span class=\\\\\"arco-icon-hover arco-radio-icon-hover\\\\\"><span class=\\\\\"arco-radio-icon\\\\\"></span></span><span class=\\\\\"arco-radio-label\\\\\">B</span></label><label class=\\\\\"arco-radio\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"C\\\\\"><span class=\\\\\"arco-icon-hover arco-radio-icon-hover\\\\\"><span class=\\\\\"arco-radio-icon\\\\\"></span></span><span class=\\\\\"arco-radio-label\\\\\">C</span></label><label class=\\\\\"arco-radio arco-radio-disabled\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" disabled=\\\\\"\\\\\" value=\\\\\"D\\\\\"><span class=\\\\\"arco-icon-hover arco-icon-hover-disabled arco-radio-icon-hover\\\\\"><span class=\\\\\"arco-radio-icon\\\\\"></span></span><span class=\\\\\"arco-radio-label\\\\\">D</span></label></span></div>\n</div>\"\n`;\n\nexports[`<radio> demo: render [layout] correctly 1`] = `\n\"<span class=\\\\\"arco-radio-group arco-radio-group-size-medium arco-radio-group-direction-horizontal\\\\\"><div class=\\\\\"arco-grid\\\\\" style=\\\\\"gap: 16px 24px; grid-template-columns: repeat(3, minmax(0px, 1fr));\\\\\"><div class=\\\\\"arco-grid-item\\\\\"><label class=\\\\\"arco-radio arco-radio-checked\\\\\"><input type=\\\\\"radio\\\\\" checked=\\\\\"\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"1\\\\\"><span class=\\\\\"arco-icon-hover arco-icon-hover-disabled arco-radio-icon-hover\\\\\"><span class=\\\\\"arco-radio-icon\\\\\"></span></span><span class=\\\\\"arco-radio-label\\\\\">Option 1</span></label></div>\n<div class=\\\\\"arco-grid-item\\\\\"><label class=\\\\\"arco-radio arco-radio-disabled\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" disabled=\\\\\"\\\\\" value=\\\\\"2\\\\\"><span class=\\\\\"arco-icon-hover arco-icon-hover-disabled arco-radio-icon-hover\\\\\"><span class=\\\\\"arco-radio-icon\\\\\"></span></span><span class=\\\\\"arco-radio-label\\\\\">Option 2</span></label></div>\n<div class=\\\\\"arco-grid-item\\\\\"><label class=\\\\\"arco-radio\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"3\\\\\"><span class=\\\\\"arco-icon-hover arco-radio-icon-hover\\\\\"><span class=\\\\\"arco-radio-icon\\\\\"></span></span><span class=\\\\\"arco-radio-label\\\\\">Option 3</span></label></div>\n<div class=\\\\\"arco-grid-item\\\\\"><label class=\\\\\"arco-radio\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"4\\\\\"><span class=\\\\\"arco-icon-hover arco-radio-icon-hover\\\\\"><span class=\\\\\"arco-radio-icon\\\\\"></span></span><span class=\\\\\"arco-radio-label\\\\\">Option 4</span></label></div>\n<div class=\\\\\"arco-grid-item\\\\\"><label class=\\\\\"arco-radio\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"5\\\\\"><span class=\\\\\"arco-icon-hover arco-radio-icon-hover\\\\\"><span class=\\\\\"arco-radio-icon\\\\\"></span></span><span class=\\\\\"arco-radio-label\\\\\">Option 5</span></label></div>\n</div></span>\"\n`;\n\nexports[`<radio> demo: render [options] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-vertical\\\\\" style=\\\\\"column-gap: 24px; row-gap: 24px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-radio-group arco-radio-group-size-medium arco-radio-group-direction-horizontal\\\\\"><label class=\\\\\"arco-radio arco-radio-checked\\\\\"><input type=\\\\\"radio\\\\\" checked=\\\\\"\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"plain 1\\\\\"><span class=\\\\\"arco-icon-hover arco-icon-hover-disabled arco-radio-icon-hover\\\\\"><span class=\\\\\"arco-radio-icon\\\\\"></span></span><span class=\\\\\"arco-radio-label\\\\\">plain 1</span></label><label class=\\\\\"arco-radio\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"plain 2\\\\\"><span class=\\\\\"arco-icon-hover arco-radio-icon-hover\\\\\"><span class=\\\\\"arco-radio-icon\\\\\"></span></span><span class=\\\\\"arco-radio-label\\\\\">plain 2</span></label><label class=\\\\\"arco-radio\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"plain 3\\\\\"><span class=\\\\\"arco-icon-hover arco-radio-icon-hover\\\\\"><span class=\\\\\"arco-radio-icon\\\\\"></span></span><span class=\\\\\"arco-radio-label\\\\\">plain 3</span></label></span></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-radio-group arco-radio-group-size-medium arco-radio-group-direction-horizontal\\\\\"><label class=\\\\\"arco-radio arco-radio-checked\\\\\"><input type=\\\\\"radio\\\\\" checked=\\\\\"\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"1\\\\\"><span class=\\\\\"arco-icon-hover arco-icon-hover-disabled arco-radio-icon-hover\\\\\"><span class=\\\\\"arco-radio-icon\\\\\"></span></span><span class=\\\\\"arco-radio-label\\\\\">option 1</span></label><label class=\\\\\"arco-radio\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"2\\\\\"><span class=\\\\\"arco-icon-hover arco-radio-icon-hover\\\\\"><span class=\\\\\"arco-radio-icon\\\\\"></span></span><span class=\\\\\"arco-radio-label\\\\\">option 2</span></label><label class=\\\\\"arco-radio arco-radio-disabled\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" disabled=\\\\\"\\\\\" value=\\\\\"3\\\\\"><span class=\\\\\"arco-icon-hover arco-icon-hover-disabled arco-radio-icon-hover\\\\\"><span class=\\\\\"arco-radio-icon\\\\\"></span></span><span class=\\\\\"arco-radio-label\\\\\">option 3</span></label></span></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-radio-group arco-radio-group-size-medium arco-radio-group-direction-horizontal\\\\\"><label class=\\\\\"arco-radio arco-radio-checked\\\\\"><input type=\\\\\"radio\\\\\" checked=\\\\\"\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"1\\\\\"><span class=\\\\\"arco-icon-hover arco-icon-hover-disabled arco-radio-icon-hover\\\\\"><span class=\\\\\"arco-radio-icon\\\\\"></span></span><span class=\\\\\"arco-radio-label\\\\\"><span class=\\\\\"arco-tag arco-tag-size-medium arco-tag-checked\\\\\"><!--v-if-->option 1<!--v-if--><!--v-if--></span></span></label><label class=\\\\\"arco-radio\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"2\\\\\"><span class=\\\\\"arco-icon-hover arco-radio-icon-hover\\\\\"><span class=\\\\\"arco-radio-icon\\\\\"></span></span><span class=\\\\\"arco-radio-label\\\\\"><span class=\\\\\"arco-tag arco-tag-size-medium arco-tag-checked\\\\\"><!--v-if-->option 2<!--v-if--><!--v-if--></span></span></label><label class=\\\\\"arco-radio arco-radio-disabled\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" disabled=\\\\\"\\\\\" value=\\\\\"3\\\\\"><span class=\\\\\"arco-icon-hover arco-icon-hover-disabled arco-radio-icon-hover\\\\\"><span class=\\\\\"arco-radio-icon\\\\\"></span></span><span class=\\\\\"arco-radio-label\\\\\"><span class=\\\\\"arco-tag arco-tag-size-medium arco-tag-checked\\\\\"><!--v-if-->option 3<!--v-if--><!--v-if--></span></span></label></span></div>\n</div>\"\n`;\n\nexports[`<radio> demo: render [size] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-vertical\\\\\" style=\\\\\"column-gap: 24px; row-gap: 24px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-radio-group-button arco-radio-group-size-mini arco-radio-group-direction-horizontal\\\\\"><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"Beijing\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">Beijing</span></label><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"Shanghai\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">Shanghai</span></label><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"Guangzhou\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">Guangzhou</span></label><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"Shenzhen\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">Shenzhen</span></label></span></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-radio-group-button arco-radio-group-size-small arco-radio-group-direction-horizontal\\\\\"><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"Beijing\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">Beijing</span></label><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"Shanghai\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">Shanghai</span></label><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"Guangzhou\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">Guangzhou</span></label><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"Shenzhen\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">Shenzhen</span></label></span></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-radio-group-button arco-radio-group-size-medium arco-radio-group-direction-horizontal\\\\\"><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"Beijing\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">Beijing</span></label><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"Shanghai\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">Shanghai</span></label><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"Guangzhou\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">Guangzhou</span></label><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"Shenzhen\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">Shenzhen</span></label></span></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-radio-group-button arco-radio-group-size-large arco-radio-group-direction-horizontal\\\\\"><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"Beijing\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">Beijing</span></label><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"Shanghai\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">Shanghai</span></label><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"Guangzhou\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">Guangzhou</span></label><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"Shenzhen\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">Shenzhen</span></label></span></div>\n</div>\"\n`;\n"
  },
  {
    "path": "packages/web-vue/components/radio/__test__/demo.test.ts",
    "content": "import demoTest from '../../../scripts/demo-test';\n\ndemoTest('radio');\n"
  },
  {
    "path": "packages/web-vue/components/radio/__test__/index.test.ts",
    "content": "import { mount } from '@vue/test-utils';\nimport Radio from '../index';\n\ndescribe('Radio', () => {\n  test('should emit change event', async () => {\n    const wrapper = mount(Radio, {\n      props: {\n        value: 'test',\n      },\n      slots: {\n        default: 'Label',\n      },\n    });\n    await wrapper.find('input').setValue();\n    expect(wrapper.emitted('change')).toHaveLength(1);\n  });\n\n  test('should not emit change event when disabled', async () => {\n    const wrapper = mount(Radio, {\n      props: {\n        value: 'test',\n        disabled: true,\n      },\n    });\n    await wrapper.find('input').setValue();\n\n    expect(wrapper.emitted('change')).toBeUndefined();\n  });\n\n  test('should emit change event in group', async () => {\n    const wrapper = mount(Radio.Group, {\n      slots: {\n        default:\n          '<a-radio value=\"1\">Option1</a-radio>' +\n          '<a-radio value=\"2\">Option2</a-radio>',\n      },\n      global: {\n        plugins: [Radio],\n      },\n    });\n\n    await wrapper.find('input').setValue();\n    expect(wrapper.emitted('change')).toHaveLength(1);\n  });\n});\n"
  },
  {
    "path": "packages/web-vue/components/radio/context.ts",
    "content": "import type { InjectionKey, Slots } from 'vue';\nimport type { Size } from '../_utils/constant';\n\nexport const RADIO_TYPES = ['radio', 'button'] as const;\nexport type RadioType = typeof RADIO_TYPES[number];\n\nexport interface RadioGroupContext {\n  name: 'ArcoRadioGroup';\n  value: string | number | boolean;\n  size: Size;\n  type: RadioType;\n  disabled: boolean;\n  slots: Slots;\n  handleChange: (value: string | number | boolean, e: Event) => void;\n}\n\nexport const radioGroupKey: InjectionKey<RadioGroupContext> =\n  Symbol('RadioGroup');\n"
  },
  {
    "path": "packages/web-vue/components/radio/index.ts",
    "content": "import type { App } from 'vue';\nimport type { ArcoOptions } from '../_utils/types';\nimport { setGlobalConfig, getComponentPrefix } from '../_utils/global-config';\nimport _Radio from './radio';\nimport _RadioGroup from './radio-group';\n\nconst Radio = Object.assign(_Radio, {\n  Group: _RadioGroup,\n  install: (app: App, options?: ArcoOptions) => {\n    setGlobalConfig(app, options);\n    const componentPrefix = getComponentPrefix(options);\n\n    app.component(componentPrefix + _Radio.name, _Radio);\n    app.component(componentPrefix + _RadioGroup.name, _RadioGroup);\n  },\n});\n\nexport type RadioInstance = InstanceType<typeof _Radio>;\nexport type RadioGroupInstance = InstanceType<typeof _RadioGroup>;\n\nexport { _RadioGroup as RadioGroup };\n\nexport default Radio;\n"
  },
  {
    "path": "packages/web-vue/components/radio/interface.ts",
    "content": "import { RenderContent } from '../_utils/types';\n\nexport interface RadioOption {\n  /**\n   * @zh 文案\n   * @en label content\n   */\n  label?: RenderContent;\n  /**\n   * @zh 选项的 `value`\n   * @en The `value` of the option\n   */\n  value: string | number;\n  /**\n   * @zh 是否禁用\n   * @en Whether to disable\n   */\n  disabled?: boolean;\n}\n"
  },
  {
    "path": "packages/web-vue/components/radio/radio-group.tsx",
    "content": "import type { PropType } from 'vue';\nimport {\n  defineComponent,\n  provide,\n  reactive,\n  toRefs,\n  ref,\n  computed,\n  watch,\n} from 'vue';\nimport { getPrefixCls } from '../_utils/global-config';\nimport { Size, Direction } from '../_utils/constant';\nimport { radioGroupKey, RadioType } from './context';\nimport {\n  isFunction,\n  isNull,\n  isNumber,\n  isString,\n  isUndefined,\n} from '../_utils/is';\nimport { useFormItem } from '../_hooks/use-form-item';\nimport { RadioOption } from './interface';\nimport Radio from './radio';\nimport { useSize } from '../_hooks/use-size';\n\nexport default defineComponent({\n  name: 'RadioGroup',\n  props: {\n    /**\n     * @zh 绑定值\n     * @en Value\n     * @vModel\n     */\n    modelValue: {\n      type: [String, Number, Boolean] as PropType<string | number | boolean>,\n      default: undefined,\n    },\n    /**\n     * @zh 默认值（非受控状态）\n     * @en Default value (uncontrolled state)\n     */\n    defaultValue: {\n      type: [String, Number, Boolean] as PropType<string | number | boolean>,\n      default: '',\n    },\n    /**\n     * @zh 单选框组的类型\n     * @en Types of radio group\n     * @values 'radio', 'button'\n     */\n    type: {\n      type: String as PropType<RadioType>,\n      default: 'radio',\n    },\n    /**\n     * @zh 单选框组的尺寸\n     * @en The size of the radio group\n     * @values 'mini','small','medium','large'\n     */\n    size: {\n      type: String as PropType<Size>,\n    },\n    /**\n     * @zh 选项\n     * @en Options\n     * @version 2.27.0\n     */\n    options: {\n      type: Array as PropType<Array<string | number | RadioOption>>,\n    },\n    /**\n     * @zh 单选框组的方向\n     * @en The direction of the radio group\n     * @values 'horizontal', 'vertical'\n     */\n    direction: {\n      type: String as PropType<Direction>,\n      default: 'horizontal',\n    },\n    /**\n     * @zh 是否禁用\n     * @en Whether to disable\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n  },\n  emits: {\n    'update:modelValue': (value: string | number | boolean) => true,\n    /**\n     * @zh 值改变时触发\n     * @en Trigger when the value changes\n     * @property { string | number | boolean } value\n     */\n    'change': (value: string | number | boolean, ev: Event) => true,\n  },\n  /**\n   * @zh radio 文案内容\n   * @en radio label content\n   * @slot label\n   * @binding {RadioOption} data\n   * @version 2.27.0\n   */\n  /**\n   * @zh 自定义单选框\n   * @en Custom radio\n   * @slot radio\n   * @binding {boolean} checked\n   * @binding {boolean} disabled\n   * @version 2.27.0\n   */\n  setup(props, { emit, slots }) {\n    const prefixCls = getPrefixCls('radio-group');\n    const { size, type, disabled, modelValue } = toRefs(props);\n    const {\n      mergedDisabled,\n      mergedSize: _mergedSize,\n      eventHandlers,\n    } = useFormItem({\n      size,\n      disabled,\n    });\n    const { mergedSize } = useSize(_mergedSize);\n\n    const _value = ref(props.defaultValue);\n\n    const computedValue = computed(() => props.modelValue ?? _value.value);\n\n    const options = computed(() => {\n      return (props.options ?? []).map((option) => {\n        if (isString(option) || isNumber(option)) {\n          return {\n            label: option,\n            value: option,\n          } as RadioOption;\n        }\n        return option;\n      });\n    });\n\n    const handleChange = (value: string | number | boolean, e: Event) => {\n      _value.value = value;\n      emit('update:modelValue', value);\n      emit('change', value, e);\n      eventHandlers.value?.onChange?.(e);\n    };\n\n    provide(\n      radioGroupKey,\n      reactive({\n        name: 'ArcoRadioGroup',\n        value: computedValue,\n        size: mergedSize,\n        type,\n        disabled: mergedDisabled,\n        slots,\n        handleChange,\n      })\n    );\n\n    watch(computedValue, (cur) => {\n      if (_value.value !== cur) {\n        _value.value = cur;\n      }\n    });\n\n    watch(modelValue, (val) => {\n      if (isUndefined(val) || isNull(val)) {\n        _value.value = '';\n      }\n    });\n\n    const cls = computed(() => [\n      `${prefixCls}${props.type === 'button' ? '-button' : ''}`,\n      `${prefixCls}-size-${mergedSize.value}`,\n      `${prefixCls}-direction-${props.direction}`,\n      {\n        [`${prefixCls}-disabled`]: mergedDisabled.value,\n      },\n    ]);\n\n    const renderOptions = () => {\n      return options.value.map((option) => (\n        <Radio\n          key={option.value}\n          value={option.value}\n          disabled={option.disabled}\n          modelValue={computedValue.value === option.value}\n        >\n          {slots.label\n            ? slots.label({ data: option })\n            : isFunction(option.label)\n            ? option.label()\n            : option.label}\n        </Radio>\n      ));\n    };\n\n    return () => (\n      <span class={cls.value}>\n        {options.value.length > 0 ? renderOptions() : slots.default?.()}\n      </span>\n    );\n  },\n});\n"
  },
  {
    "path": "packages/web-vue/components/radio/radio.tsx",
    "content": "import type { PropType } from 'vue';\nimport {\n  computed,\n  defineComponent,\n  ref,\n  inject,\n  watch,\n  nextTick,\n  toRef,\n  toRefs,\n} from 'vue';\nimport { getPrefixCls } from '../_utils/global-config';\nimport IconHover from '../_components/icon-hover.vue';\nimport type { RadioType } from './context';\nimport { radioGroupKey } from './context';\nimport { isNull, isUndefined } from '../_utils/is';\nimport { useFormItem } from '../_hooks/use-form-item';\n\nexport default defineComponent({\n  name: 'Radio',\n  components: {\n    IconHover,\n  },\n  props: {\n    /**\n     * @zh 绑定值\n     * @en Value\n     * @vModel\n     */\n    modelValue: {\n      type: [String, Number, Boolean] as PropType<string | number | boolean>,\n      default: undefined,\n    },\n    /**\n     * @zh 默认是否选中（非受控状态）\n     * @en Whether checked by default (uncontrolled state)\n     */\n    defaultChecked: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 选项的 `value`\n     * @en The `value` of the option\n     */\n    value: {\n      type: [String, Number, Boolean] as PropType<string | number | boolean>,\n      default: true,\n    },\n    /**\n     * @zh 单选的类型\n     * @en Radio type\n     * @values 'radio', 'button'\n     */\n    type: {\n      type: String as PropType<RadioType>,\n      default: 'radio',\n    },\n    /**\n     * @zh 是否禁用\n     * @en Whether to disable\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n    // private\n    uninjectGroupContext: {\n      type: Boolean,\n      default: false,\n    },\n  },\n  emits: {\n    'update:modelValue': (value: string | number | boolean) => true,\n    /**\n     * @zh 值改变时触发\n     * @en Trigger when the value changes\n     * @param { string | number | boolean } value\n     * @param {Event} ev\n     */\n    'change': (value: string | number | boolean, ev: Event) => true,\n  },\n  /**\n   * @zh 自定义单选框\n   * @en Custom radio\n   * @slot radio\n   * @binding {boolean} checked\n   * @binding {boolean} disabled\n   * @version 2.18.0\n   */\n  setup(props, { emit, slots }) {\n    const prefixCls = getPrefixCls('radio');\n    const { modelValue } = toRefs(props);\n    const radioGroupCtx = !props.uninjectGroupContext\n      ? inject(radioGroupKey, undefined)\n      : undefined;\n    const { mergedDisabled: _mergedDisabled, eventHandlers } = useFormItem({\n      disabled: toRef(props, 'disabled'),\n    });\n\n    const inputRef = ref<HTMLInputElement | null>(null);\n    const _checked = ref(props.defaultChecked);\n\n    const isGroup = computed(() => radioGroupCtx?.name === 'ArcoRadioGroup');\n    const mergedType = computed(() => radioGroupCtx?.type ?? props.type);\n    const mergedDisabled = computed(\n      () => radioGroupCtx?.disabled || _mergedDisabled.value\n    );\n\n    const computedChecked = computed(() => {\n      if (isGroup.value) {\n        return radioGroupCtx?.value === (props.value ?? true);\n      }\n\n      if (!isUndefined(props.modelValue)) {\n        return props.modelValue === (props.value ?? true);\n      }\n      return _checked.value;\n    });\n\n    watch(modelValue, (value) => {\n      if (isUndefined(value) || isNull(value)) {\n        _checked.value = false;\n      }\n    });\n\n    watch(computedChecked, (curValue, preValue) => {\n      if (curValue !== preValue) {\n        _checked.value = curValue;\n        if (inputRef.value) {\n          inputRef.value.checked = curValue;\n        }\n      }\n    });\n\n    // const handleClick = (ev: MouseEvent) => {\n    //   if (!props.disabled && inputRef.value && ev.target !== inputRef.value) {\n    //     ev.preventDefault();\n    //     inputRef.value.click();\n    //   }\n    // };\n\n    const handleFocus = (ev: FocusEvent) => {\n      eventHandlers.value?.onFocus?.(ev);\n    };\n\n    const handleBlur = (ev: FocusEvent) => {\n      eventHandlers.value?.onBlur?.(ev);\n    };\n\n    const handleClick = (ev: Event) => {\n      ev.stopPropagation();\n    };\n\n    const handleChange = (e: Event) => {\n      _checked.value = true;\n      if (isGroup.value) {\n        radioGroupCtx?.handleChange(props.value ?? true, e);\n      } else {\n        emit('update:modelValue', props.value ?? true);\n        emit('change', props.value ?? true, e);\n        eventHandlers.value?.onChange?.(e);\n      }\n\n      nextTick(() => {\n        if (\n          inputRef.value &&\n          inputRef.value.checked !== computedChecked.value\n        ) {\n          inputRef.value.checked = computedChecked.value;\n        }\n      });\n    };\n\n    const cls = computed(() => [\n      `${mergedType.value === 'button' ? `${prefixCls}-button` : prefixCls}`,\n      {\n        [`${prefixCls}-checked`]: computedChecked.value,\n        [`${prefixCls}-disabled`]: mergedDisabled.value,\n      },\n    ]);\n\n    const defaultRadio = () => (\n      <>\n        <icon-hover\n          class={`${prefixCls}-icon-hover`}\n          disabled={mergedDisabled.value || computedChecked.value}\n        >\n          <span class={`${prefixCls}-icon`} />\n        </icon-hover>\n        {slots.default && (\n          <span class={`${prefixCls}-label`}>{slots.default()}</span>\n        )}\n      </>\n    );\n\n    return () => (\n      <label class={cls.value}>\n        <input\n          ref={inputRef}\n          type=\"radio\"\n          checked={computedChecked.value}\n          value={props.value}\n          class={`${prefixCls}-target`}\n          disabled={mergedDisabled.value}\n          onClick={handleClick}\n          onChange={handleChange}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n        />\n        {mergedType.value === 'radio' ? (\n          (slots.radio ?? radioGroupCtx?.slots?.radio)?.({\n            checked: computedChecked.value,\n            disabled: mergedDisabled.value,\n          }) ?? defaultRadio()\n        ) : (\n          <span class={`${prefixCls}-button-content`}>\n            {slots.default && slots.default()}\n          </span>\n        )}\n      </label>\n    );\n  },\n});\n"
  },
  {
    "path": "packages/web-vue/components/radio/style/index.less",
    "content": "@import '../../style/mixins/index.less';\n@import './token.less';\n\n@radio-prefix-cls: ~'@{prefix}-radio';\n\n.@{radio-prefix-cls},\n.@{radio-prefix-cls}-button {\n  > input[type='radio'] {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 0;\n    height: 0;\n    opacity: 0;\n\n    &:focus + .@{prefix}-radio-icon-hover::before {\n      background-color: @icon-hover-color-bg;\n    }\n  }\n}\n\n.icon-hover(@radio-prefix-cls, @radio-layout-height, @radio-size-mask-height);\n\n.@{radio-prefix-cls} {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  padding-left: (@radio-size-mask-height / 2) - (@radio-layout-height / 2);\n  font-size: @radio-font-text-size;\n  line-height: unset;\n  cursor: pointer;\n\n  // radio circle\n  &-label {\n    margin-left: @radio-margin-text-left;\n    color: @radio-color-text;\n  }\n\n  &-icon {\n    position: relative;\n    display: block;\n    box-sizing: border-box;\n    width: @radio-layout-height;\n    height: @radio-layout-height;\n    line-height: @radio-layout-height;\n    border: @radio-border-width solid @radio-color-border;\n    border-radius: @radio-border-radius;\n\n    &::after {\n      position: absolute;\n      top: 0;\n      left: 0;\n      display: inline-block;\n      box-sizing: border-box;\n      width: @radio-layout-height - @radio-border-width * 2;\n      height: @radio-layout-height - @radio-border-width * 2;\n      background-color: @radio-color-bg;\n      border-radius: @radio-border-radius;\n      transform: scale(1);\n      transition: transform @transition-duration-3\n        @transition-timing-function-overshoot;\n      content: '';\n    }\n  }\n\n  &:hover &-icon {\n    border-color: @radio-color-border_hover;\n  }\n\n  &-checked &-icon {\n    background-color: @radio-color-bg_checked;\n    border-color: @radio-color-bg_checked;\n\n    &::after {\n      background-color: var(~'@{arco-cssvars-prefix}-color-white');\n      transform: scale(0.4);\n    }\n  }\n\n  &-checked:hover &-icon {\n    border-color: @radio-color-bg_checked;\n  }\n\n  &-disabled {\n    cursor: not-allowed;\n\n    .@{prefix}-radio-icon-hover {\n      cursor: not-allowed;\n    }\n\n    .@{radio-prefix-cls}-label {\n      color: @radio-color-text_disabled;\n    }\n  }\n\n  &-disabled &-icon {\n    border-color: @radio-color-border_disabled;\n\n    &::after {\n      background-color: @radio-color-bg_disabled;\n    }\n  }\n\n  &-disabled:hover &-icon {\n    border-color: @radio-color-border_disabled;\n  }\n\n  &-checked&-disabled {\n    .@{radio-prefix-cls}-icon,\n    &:hover .@{radio-prefix-cls}-icon {\n      background-color: @radio-color-bg_checked_disabled;\n      border-color: @color-transparent;\n    }\n\n    .@{radio-prefix-cls}-icon::after {\n      background-color: @radio-color-dot-bg_checked_disabled;\n    }\n\n    .@{radio-prefix-cls}-label {\n      color: @radio-color-text_checked_disabled;\n    }\n  }\n\n  &:hover {\n    .@{prefix}-radio-icon-hover::before {\n      background-color: @radio-mask-bg-color-bg;\n    }\n  }\n}\n\n// group type\n.@{radio-prefix-cls}-group {\n  display: inline-block;\n  box-sizing: border-box;\n\n  .@{radio-prefix-cls} {\n    margin-right: @radio-group-margin-right;\n  }\n\n  // button type\n  &-button {\n    display: inline-flex;\n    padding: (@radio-button-spacing / 2);\n    line-height: @radio-size-default-height - @radio-button-spacing * 2;\n    background-color: @radio-group-button-color-bg;\n    border-radius: @radio-button-bg-border-radius;\n  }\n}\n\n.@{radio-prefix-cls}-button {\n  position: relative;\n  display: inline-block;\n  margin: (@radio-button-spacing / 2);\n  color: @radio-button-color-text;\n  font-size: @radio-font-text-size;\n  line-height: @radio-size-default-height - @radio-button-spacing * 2;\n  background-color: @radio-button-color-bg;\n  border-radius: @radio-button-border-radius;\n  cursor: pointer;\n  transition: all @transition-duration-1 @transition-timing-function-linear;\n\n  &-content {\n    position: relative;\n    display: block;\n    padding: 0 @radio-button-padding-horizontal;\n  }\n\n  // 按钮之间的分割线\n  &:not(:first-of-type)::before {\n    position: absolute;\n    top: 50%;\n    left: -((@radio-button-spacing - @radio-button-size-separator-width) / 2) - @radio-button-size-separator-width;\n    display: block;\n    width: @radio-button-size-separator-width;\n    height: @radio-button-size-separator-height;\n    background-color: @radio-button-color-separator-bg;\n    transform: translateY(-50%);\n    transition: all @transition-duration-1 @transition-timing-function-linear;\n    content: '';\n  }\n\n  // 被选中的按钮不需要左右的分割线\n  &:hover::before,\n  &:hover + &::before,\n  &.@{radio-prefix-cls}-checked::before,\n  &.@{radio-prefix-cls}-checked + &::before {\n    opacity: 0;\n  }\n\n  &:hover {\n    color: @radio-button-color-text_hover;\n    background-color: @radio-button-color-bg_hover;\n  }\n\n  &.@{radio-prefix-cls}-checked {\n    color: @radio-button-color-text_active;\n    background-color: @radio-button-color-bg_active;\n  }\n\n  &.@{radio-prefix-cls}-disabled {\n    color: @radio-button-color-text_disabled;\n    background-color: @radio-button-color-bg_disabled;\n    cursor: not-allowed;\n  }\n\n  &.@{radio-prefix-cls}-disabled.@{radio-prefix-cls}-checked {\n    color: @radio-button-color-text_checked_disabled;\n    background-color: @radio-button-color-bg_checked_disabled;\n  }\n}\n\n// size small default large huge\n.@{radio-prefix-cls}-group {\n  &-size-small {\n    line-height: @radio-size-small-height;\n\n    &.@{radio-prefix-cls}-group-button,\n    .@{radio-prefix-cls}-button {\n      font-size: @radio-font-text-size_small;\n      line-height: @radio-size-small-height - @radio-button-spacing * 2;\n    }\n  }\n\n  &-size-large {\n    line-height: @radio-size-large-height;\n\n    &.@{radio-prefix-cls}-group-button,\n    .@{radio-prefix-cls}-button {\n      font-size: @radio-font-text-size_large;\n      line-height: @radio-size-large-height - @radio-button-spacing * 2;\n    }\n  }\n\n  &-size-mini {\n    line-height: @radio-size-mini-height;\n\n    &.@{radio-prefix-cls}-group-button,\n    .@{radio-prefix-cls}-button {\n      font-size: @radio-font-text-size_mini;\n      line-height: @radio-size-mini-height - @radio-button-spacing * 2;\n    }\n  }\n}\n\n// vertical direction\n.@{radio-prefix-cls}-group-direction-vertical {\n  // default radio\n  .@{radio-prefix-cls} {\n    display: flex;\n    margin-right: 0;\n    line-height: @radio-group-size-line-height_vertical;\n  }\n}\n\n// dark mode\n\n@{arco-theme-tag}[arco-theme='dark'] {\n  .@{radio-prefix-cls}-button.@{radio-prefix-cls}-checked,\n  .@{radio-prefix-cls}-button:not(.@{radio-prefix-cls}-disabled):hover {\n    background-color: var(~'@{arco-cssvars-prefix}-color-fill-3');\n  }\n\n  .@{radio-prefix-cls}-button::after {\n    background-color: var(~'@{arco-cssvars-prefix}-color-bg-3');\n  }\n}\n"
  },
  {
    "path": "packages/web-vue/components/radio/style/index.ts",
    "content": "import '../../style/index.less';\nimport './index.less';\n"
  },
  {
    "path": "packages/web-vue/components/radio/style/token.less",
    "content": "@import '../../style/theme/index.less';\n\n@radio-color-border: var(~'@{arco-cssvars-prefix}-color-neutral-3');\n@radio-border-width: @border-2;\n@radio-layout-height: 14px;\n@radio-color-border_hover: var(~'@{arco-cssvars-prefix}-color-neutral-3');\n@radio-color-border_disabled: var(~'@{arco-cssvars-prefix}-color-neutral-3');\n@radio-color-bg: var(~'@{arco-cssvars-prefix}-color-bg-2');\n@radio-color-bg_checked: @color-primary-6;\n@radio-border-radius: @radius-circle;\n@radio-color-bg_disabled: var(~'@{arco-cssvars-prefix}-color-fill-2');\n@radio-color-bg_checked_disabled: var(~'@{arco-cssvars-prefix}-color-primary-light-3');\n@radio-color-dot-bg_checked_disabled: @radio-color-bg_disabled;\n\n@radio-color-text: var(~'@{arco-cssvars-prefix}-color-text-1');\n@radio-color-text_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');\n@radio-color-text_checked_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');\n@radio-font-text-size: @font-size-body-3;\n@radio-font-text-size_large: @font-size-body-3;\n@radio-font-text-size_mini: @font-size-body-1;\n@radio-font-text-size_small: @font-size-body-3;\n@radio-margin-text-left: @spacing-4;\n\n@radio-size-mask-height: @size-6;\n@radio-mask-bg-color-bg: @icon-hover-color-bg;\n@radio-group-margin-right: @spacing-8;\n@radio-group-button-color-bg: var(~'@{arco-cssvars-prefix}-color-fill-2');\n@radio-button-padding-horizontal: @spacing-6;\n@radio-button-spacing: 3px;\n@radio-button-color-bg_active: var(~'@{arco-cssvars-prefix}-color-bg-5');\n@radio-button-color-bg_hover: @radio-button-color-bg_active;\n@radio-button-color-text_active: @color-primary-6;\n@radio-button-font-text-weight_active: @font-weight-500;\n@radio-button-color-text_hover: @radio-color-text;\n\n@radio-button-border-radius: @radius-small;\n@radio-button-bg-border-radius: @radio-button-border-radius;\n\n@radio-button-color-bg: @color-transparent;\n@radio-button-color-text: var(~'@{arco-cssvars-prefix}-color-text-2');\n\n@radio-button-color-bg_disabled: @color-transparent;\n@radio-button-color-text_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');\n@radio-button-color-bg_checked_disabled: @radio-button-color-bg_active;\n@radio-button-color-text_checked_disabled: var(~'@{arco-cssvars-prefix}-color-primary-light-3');\n\n@radio-button-color-separator-bg: var(~'@{arco-cssvars-prefix}-color-neutral-3');\n@radio-button-size-separator-width: 1px;\n@radio-button-size-separator-height: 14px;\n\n@radio-size-default-height: @size-default;\n@radio-size-small-height: @size-small;\n@radio-size-mini-height: @size-mini;\n@radio-size-large-height: @size-large;\n@radio-group-size-line-height_vertical: @size-8;\n"
  },
  {
    "path": "packages/web-vue/components/rate/CHANGELOG.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.54.3\n\n`2024-01-19`\n\n### 🐛 BugFix\n\n- Fix missing icon elements in `nuxt` ([#2930](https://github.com/arco-design/arco-design-vue/pull/2930))\n\n\n## 2.18.0\n\n`2022-03-04`\n\n### 🆕 Feature\n\n- Add color attribute ([#770](https://github.com/arco-design/arco-design-vue/pull/770))\n\n"
  },
  {
    "path": "packages/web-vue/components/rate/CHANGELOG.zh-CN.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.54.3\n\n`2024-01-19`\n\n### 🐛 问题修复\n\n- 修复在`nuxt`中图标元素缺失的问题 ([#2930](https://github.com/arco-design/arco-design-vue/pull/2930))\n\n\n## 2.18.0\n\n`2022-03-04`\n\n### 🆕 新增功能\n\n- 增加 color 属性 ([#770](https://github.com/arco-design/arco-design-vue/pull/770))\n\n"
  },
  {
    "path": "packages/web-vue/components/rate/README.en-US.md",
    "content": "```yaml\nmeta:\n  type: Component\n  category: Data Entry\ntitle: Rate\ndescription: The component used for scoring or starring.\n```\n\n*Auto translate by google.*\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/half.md\n\n@import ./__demo__/color.md\n\n@import ./__demo__/readonly.md\n\n@import ./__demo__/clear.md\n\n@import ./__demo__/character.md\n\n@import ./__demo__/count.md\n\n@import ./__demo__/grading.md\n\n## API\n\n\n### `<rate>` Props\n\n|Attribute|Description|Type|Default|version|\n|---|---|---|:---:|:---|\n|count|Total number of rate|`number`|`5`||\n|model-value **(v-model)**|Value|`number`|`-`||\n|default-value|Default Value|`number`|`0`||\n|allow-half|Whether to allow half selection|`boolean`|`false`||\n|allow-clear|Whether to allow clear|`boolean`|`false`||\n|grading|Whether to enable smile grading|`boolean`|`false`||\n|readonly|Whether it is readonly|`boolean`|`false`||\n|disabled|Whether to disable|`boolean`|`false`||\n|color|Color|`string \\| Record<string, string>`|`-`|2.18.0|\n### `<rate>` Events\n\n|Event Name|Description|Parameters|\n|---|---|---|\n|change|Trigger when the value changes|value: `number`|\n|hover-change|Triggered when the mouse moves over the value|value: `number`|\n### `<rate>` Slots\n\n|Slot Name|Description|Parameters|\n|---|---|---|\n|character|Character|index: `number`|\n\n\n"
  },
  {
    "path": "packages/web-vue/components/rate/README.zh-CN.md",
    "content": "```yaml\nmeta:\n  type: 组件\n  category: 数据输入\ntitle: 评分 Rate\ndescription: 用于评分或打星的组件。\n```\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/half.md\n\n@import ./__demo__/color.md\n\n@import ./__demo__/readonly.md\n\n@import ./__demo__/clear.md\n\n@import ./__demo__/character.md\n\n@import ./__demo__/count.md\n\n@import ./__demo__/grading.md\n\n## API\n\n\n### `<rate>` Props\n\n|参数名|描述|类型|默认值|版本|\n|---|---|---|:---:|:---|\n|count|评分的总数|`number`|`5`||\n|model-value **(v-model)**|绑定值|`number`|`-`||\n|default-value|默认值|`number`|`0`||\n|allow-half|是否允许半选|`boolean`|`false`||\n|allow-clear|是否允许清除|`boolean`|`false`||\n|grading|是否开启笑脸分级|`boolean`|`false`||\n|readonly|是否为只读状态|`boolean`|`false`||\n|disabled|是否禁用|`boolean`|`false`||\n|color|颜色|`string \\| Record<string, string>`|`-`|2.18.0|\n### `<rate>` Events\n\n|事件名|描述|参数|\n|---|---|---|\n|change|值改变时触发|value: `number`|\n|hover-change|鼠标移动到数值上时触发|value: `number`|\n### `<rate>` Slots\n\n|插槽名|描述|参数|\n|---|:---:|---|\n|character|符号|index: `number`|\n\n\n"
  },
  {
    "path": "packages/web-vue/components/rate/TEMPLATE.md",
    "content": "## zh-CN\n```yaml\nmeta:\n  type: 组件\n  category: 数据输入\ntitle: 评分 Rate\ndescription: 用于评分或打星的组件。\n```\n---\n## en-US\n```yaml\nmeta:\n  type: Component\n  category: Data Entry\ntitle: Rate\ndescription: The component used for scoring or starring.\n```\n---\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/half.md\n\n@import ./__demo__/color.md\n\n@import ./__demo__/readonly.md\n\n@import ./__demo__/clear.md\n\n@import ./__demo__/character.md\n\n@import ./__demo__/count.md\n\n@import ./__demo__/grading.md\n\n## API\n\n%%API(rate.tsx)%%\n"
  },
  {
    "path": "packages/web-vue/components/rate/__demo__/basic.md",
    "content": "```yaml\ntitle:\n  zh-CN: 基本用法\n  en-US: Basic Usage\n```\n\n## zh-CN\n\n评分组件基本用法。\n\n---\n\n## en-US\n\nBasic usage of rate component.\n\n---\n\n```vue\n<template>\n  <a-rate/>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/rate/__demo__/character.md",
    "content": "```yaml\ntitle:\n  zh-CN: 自定义评分字符\n  en-US: Custom Character\n```\n\n## zh-CN\n\n可以将星星替换为其他字符，比如表情、字母，数字，字体图标甚至中文。\n\n---\n\n## en-US\n\nYou can replace the stars with other characters, such as emoticons, letters, numbers, font icons and even Chinese.\n\n---\n\n```vue\n<template>\n  <a-rate :default-value=\"2\">\n    <template #character=\"{ index }\">\n      <icon-check v-if=\"index < 3\"/>\n      <icon-close v-else/>\n    </template>\n  </a-rate>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/rate/__demo__/clear.md",
    "content": "```yaml\ntitle:\n  zh-CN: 支持清除\n  en-US: Allow Clear\n```\n\n## zh-CN\n\n通过设置 `allow-clear` 来允许清除评分。\n\n---\n\n## en-US\n\nAllow the score to be cleared by setting `allow-clear`.\n\n---\n\n```vue\n<template>\n  <a-rate :default-value=\"3\" allow-clear/>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/rate/__demo__/color.md",
    "content": "```yaml\ntitle:\n  zh-CN: 自定义颜色\n  en-US: Custom Color\n```\n\n## zh-CN\n\n通过 color 可以自定义颜色。另外可以通过对象形式自定义不同分值时的颜色。\n\n---\n\n## en-US\n\nColor can be customized through color. In addition, you can customize the color of different score values through object form.\n\n---\n\n```vue\n<template>\n  <a-space direction=\"vertical\">\n    <a-rate color=\"red\" />\n    <a-rate :color=\"color\" />\n  </a-space>\n</template>\n\n<script>\nexport default {\n  setup() {\n    const color = {\n      2: 'red',\n      4: 'green',\n      5: 'blue'\n    }\n    return {\n      color\n    }\n  },\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/rate/__demo__/count.md",
    "content": "```yaml\ntitle:\n  zh-CN: 任意长度的评分\n  en-US: Rate Count\n```\n\n## zh-CN\n\n通过指定 `count` 来指定任意长度的评分组件。\n\n---\n\n## en-US\n\nSpecify a rate component of any length by specifying `count`.\n\n---\n\n```vue\n<template>\n  <a-rate :count=\"10\"/>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/rate/__demo__/grading.md",
    "content": "```yaml\ntitle:\n  zh-CN: 笑脸分级\n  en-US: Grading\n```\n\n## zh-CN\n\n通过 `grading` 使用笑脸分级。\n\n---\n\n## en-US\n\nUse `grading` to use the smiley grading.\n\n---\n\n```vue\n<template>\n  <a-rate grading/>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/rate/__demo__/half.md",
    "content": "```yaml\ntitle:\n  zh-CN: 半选\n  en-US: Half\n```\n\n## zh-CN\n\n指定 `allow-half` 来开启半选。\n\n---\n\n## en-US\n\nSpecify `allow-half` to enable half selection.\n\n---\n\n```vue\n<template>\n  <a-rate :default-value=\"2.5\" allow-half/>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/rate/__demo__/readonly.md",
    "content": "```yaml\ntitle:\n  zh-CN: 只读模式\n  en-US: Readonly\n```\n\n## zh-CN\n\n通过设置 `readonly` 属性让评分组件为只读状态。\n\n---\n\n## en-US\n\nMake the scoring component readonly by setting the `readonly` property.\n\n---\n\n```vue\n<template>\n  <a-rate :default-value=\"4\" readonly />\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/rate/__test__/__snapshots__/demo.test.ts.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`<rate> demo: render [basic] correctly 1`] = `\n\"<div class=\\\\\"arco-rate\\\\\">\n  <div class=\\\\\"arco-rate-character\\\\\" role=\\\\\"radio\\\\\" aria-checked=\\\\\"false\\\\\" aria-setsize=\\\\\"5\\\\\" aria-posinset=\\\\\"1\\\\\">\n    <div class=\\\\\"arco-rate-character-left\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-star-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n        <path d=\\\\\"M22.683 5.415c.568-1.043 2.065-1.043 2.634 0l5.507 10.098a1.5 1.5 0 0 0 1.04.756l11.306 2.117c1.168.219 1.63 1.642.814 2.505l-7.902 8.359a1.5 1.5 0 0 0-.397 1.223l1.48 11.407c.153 1.177-1.058 2.057-2.131 1.548l-10.391-4.933a1.5 1.5 0 0 0-1.287 0l-10.39 4.933c-1.073.51-2.284-.37-2.131-1.548l1.48-11.407a1.5 1.5 0 0 0-.398-1.223L4.015 20.89c-.816-.863-.353-2.286.814-2.505l11.306-2.117a1.5 1.5 0 0 0 1.04-.756l5.508-10.098Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n      </svg></div>\n    <div class=\\\\\"arco-rate-character-right\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-star-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n        <path d=\\\\\"M22.683 5.415c.568-1.043 2.065-1.043 2.634 0l5.507 10.098a1.5 1.5 0 0 0 1.04.756l11.306 2.117c1.168.219 1.63 1.642.814 2.505l-7.902 8.359a1.5 1.5 0 0 0-.397 1.223l1.48 11.407c.153 1.177-1.058 2.057-2.131 1.548l-10.391-4.933a1.5 1.5 0 0 0-1.287 0l-10.39 4.933c-1.073.51-2.284-.37-2.131-1.548l1.48-11.407a1.5 1.5 0 0 0-.398-1.223L4.015 20.89c-.816-.863-.353-2.286.814-2.505l11.306-2.117a1.5 1.5 0 0 0 1.04-.756l5.508-10.098Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n      </svg></div>\n  </div>\n  <div class=\\\\\"arco-rate-character\\\\\" role=\\\\\"radio\\\\\" aria-checked=\\\\\"false\\\\\" aria-setsize=\\\\\"5\\\\\" aria-posinset=\\\\\"2\\\\\">\n    <div class=\\\\\"arco-rate-character-left\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-star-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n        <path d=\\\\\"M22.683 5.415c.568-1.043 2.065-1.043 2.634 0l5.507 10.098a1.5 1.5 0 0 0 1.04.756l11.306 2.117c1.168.219 1.63 1.642.814 2.505l-7.902 8.359a1.5 1.5 0 0 0-.397 1.223l1.48 11.407c.153 1.177-1.058 2.057-2.131 1.548l-10.391-4.933a1.5 1.5 0 0 0-1.287 0l-10.39 4.933c-1.073.51-2.284-.37-2.131-1.548l1.48-11.407a1.5 1.5 0 0 0-.398-1.223L4.015 20.89c-.816-.863-.353-2.286.814-2.505l11.306-2.117a1.5 1.5 0 0 0 1.04-.756l5.508-10.098Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n      </svg></div>\n    <div class=\\\\\"arco-rate-character-right\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-star-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n        <path d=\\\\\"M22.683 5.415c.568-1.043 2.065-1.043 2.634 0l5.507 10.098a1.5 1.5 0 0 0 1.04.756l11.306 2.117c1.168.219 1.63 1.642.814 2.505l-7.902 8.359a1.5 1.5 0 0 0-.397 1.223l1.48 11.407c.153 1.177-1.058 2.057-2.131 1.548l-10.391-4.933a1.5 1.5 0 0 0-1.287 0l-10.39 4.933c-1.073.51-2.284-.37-2.131-1.548l1.48-11.407a1.5 1.5 0 0 0-.398-1.223L4.015 20.89c-.816-.863-.353-2.286.814-2.505l11.306-2.117a1.5 1.5 0 0 0 1.04-.756l5.508-10.098Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n      </svg></div>\n  </div>\n  <div class=\\\\\"arco-rate-character\\\\\" role=\\\\\"radio\\\\\" aria-checked=\\\\\"false\\\\\" aria-setsize=\\\\\"5\\\\\" aria-posinset=\\\\\"3\\\\\">\n    <div class=\\\\\"arco-rate-character-left\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-star-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n        <path d=\\\\\"M22.683 5.415c.568-1.043 2.065-1.043 2.634 0l5.507 10.098a1.5 1.5 0 0 0 1.04.756l11.306 2.117c1.168.219 1.63 1.642.814 2.505l-7.902 8.359a1.5 1.5 0 0 0-.397 1.223l1.48 11.407c.153 1.177-1.058 2.057-2.131 1.548l-10.391-4.933a1.5 1.5 0 0 0-1.287 0l-10.39 4.933c-1.073.51-2.284-.37-2.131-1.548l1.48-11.407a1.5 1.5 0 0 0-.398-1.223L4.015 20.89c-.816-.863-.353-2.286.814-2.505l11.306-2.117a1.5 1.5 0 0 0 1.04-.756l5.508-10.098Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n      </svg></div>\n    <div class=\\\\\"arco-rate-character-right\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-star-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n        <path d=\\\\\"M22.683 5.415c.568-1.043 2.065-1.043 2.634 0l5.507 10.098a1.5 1.5 0 0 0 1.04.756l11.306 2.117c1.168.219 1.63 1.642.814 2.505l-7.902 8.359a1.5 1.5 0 0 0-.397 1.223l1.48 11.407c.153 1.177-1.058 2.057-2.131 1.548l-10.391-4.933a1.5 1.5 0 0 0-1.287 0l-10.39 4.933c-1.073.51-2.284-.37-2.131-1.548l1.48-11.407a1.5 1.5 0 0 0-.398-1.223L4.015 20.89c-.816-.863-.353-2.286.814-2.505l11.306-2.117a1.5 1.5 0 0 0 1.04-.756l5.508-10.098Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n      </svg></div>\n  </div>\n  <div class=\\\\\"arco-rate-character\\\\\" role=\\\\\"radio\\\\\" aria-checked=\\\\\"false\\\\\" aria-setsize=\\\\\"5\\\\\" aria-posinset=\\\\\"4\\\\\">\n    <div class=\\\\\"arco-rate-character-left\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-star-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n        <path d=\\\\\"M22.683 5.415c.568-1.043 2.065-1.043 2.634 0l5.507 10.098a1.5 1.5 0 0 0 1.04.756l11.306 2.117c1.168.219 1.63 1.642.814 2.505l-7.902 8.359a1.5 1.5 0 0 0-.397 1.223l1.48 11.407c.153 1.177-1.058 2.057-2.131 1.548l-10.391-4.933a1.5 1.5 0 0 0-1.287 0l-10.39 4.933c-1.073.51-2.284-.37-2.131-1.548l1.48-11.407a1.5 1.5 0 0 0-.398-1.223L4.015 20.89c-.816-.863-.353-2.286.814-2.505l11.306-2.117a1.5 1.5 0 0 0 1.04-.756l5.508-10.098Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n      </svg></div>\n    <div class=\\\\\"arco-rate-character-right\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-star-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n        <path d=\\\\\"M22.683 5.415c.568-1.043 2.065-1.043 2.634 0l5.507 10.098a1.5 1.5 0 0 0 1.04.756l11.306 2.117c1.168.219 1.63 1.642.814 2.505l-7.902 8.359a1.5 1.5 0 0 0-.397 1.223l1.48 11.407c.153 1.177-1.058 2.057-2.131 1.548l-10.391-4.933a1.5 1.5 0 0 0-1.287 0l-10.39 4.933c-1.073.51-2.284-.37-2.131-1.548l1.48-11.407a1.5 1.5 0 0 0-.398-1.223L4.015 20.89c-.816-.863-.353-2.286.814-2.505l11.306-2.117a1.5 1.5 0 0 0 1.04-.756l5.508-10.098Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n      </svg></div>\n  </div>\n  <div class=\\\\\"arco-rate-character\\\\\" role=\\\\\"radio\\\\\" aria-checked=\\\\\"false\\\\\" aria-setsize=\\\\\"5\\\\\" aria-posinset=\\\\\"5\\\\\">\n    <div class=\\\\\"arco-rate-character-left\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-star-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n        <path d=\\\\\"M22.683 5.415c.568-1.043 2.065-1.043 2.634 0l5.507 10.098a1.5 1.5 0 0 0 1.04.756l11.306 2.117c1.168.219 1.63 1.642.814 2.505l-7.902 8.359a1.5 1.5 0 0 0-.397 1.223l1.48 11.407c.153 1.177-1.058 2.057-2.131 1.548l-10.391-4.933a1.5 1.5 0 0 0-1.287 0l-10.39 4.933c-1.073.51-2.284-.37-2.131-1.548l1.48-11.407a1.5 1.5 0 0 0-.398-1.223L4.015 20.89c-.816-.863-.353-2.286.814-2.505l11.306-2.117a1.5 1.5 0 0 0 1.04-.756l5.508-10.098Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n      </svg></div>\n    <div class=\\\\\"arco-rate-character-right\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-star-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n        <path d=\\\\\"M22.683 5.415c.568-1.043 2.065-1.043 2.634 0l5.507 10.098a1.5 1.5 0 0 0 1.04.756l11.306 2.117c1.168.219 1.63 1.642.814 2.505l-7.902 8.359a1.5 1.5 0 0 0-.397 1.223l1.48 11.407c.153 1.177-1.058 2.057-2.131 1.548l-10.391-4.933a1.5 1.5 0 0 0-1.287 0l-10.39 4.933c-1.073.51-2.284-.37-2.131-1.548l1.48-11.407a1.5 1.5 0 0 0-.398-1.223L4.015 20.89c-.816-.863-.353-2.286.814-2.505l11.306-2.117a1.5 1.5 0 0 0 1.04-.756l5.508-10.098Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n      </svg></div>\n  </div>\n</div>\"\n`;\n\nexports[`<rate> demo: render [character] correctly 1`] = `\n\"<div class=\\\\\"arco-rate\\\\\">\n  <div class=\\\\\"arco-rate-character arco-rate-character-full\\\\\" role=\\\\\"radio\\\\\" aria-checked=\\\\\"true\\\\\" aria-setsize=\\\\\"5\\\\\" aria-posinset=\\\\\"1\\\\\">\n    <div class=\\\\\"arco-rate-character-left\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-check\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n        <path d=\\\\\"M41.678 11.05 19.05 33.678 6.322 20.95\\\\\"></path>\n      </svg></div>\n    <div class=\\\\\"arco-rate-character-right\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-check\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n        <path d=\\\\\"M41.678 11.05 19.05 33.678 6.322 20.95\\\\\"></path>\n      </svg></div>\n  </div>\n  <div class=\\\\\"arco-rate-character arco-rate-character-full\\\\\" role=\\\\\"radio\\\\\" aria-checked=\\\\\"true\\\\\" aria-setsize=\\\\\"5\\\\\" aria-posinset=\\\\\"2\\\\\">\n    <div class=\\\\\"arco-rate-character-left\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-check\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n        <path d=\\\\\"M41.678 11.05 19.05 33.678 6.322 20.95\\\\\"></path>\n      </svg></div>\n    <div class=\\\\\"arco-rate-character-right\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-check\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n        <path d=\\\\\"M41.678 11.05 19.05 33.678 6.322 20.95\\\\\"></path>\n      </svg></div>\n  </div>\n  <div class=\\\\\"arco-rate-character\\\\\" role=\\\\\"radio\\\\\" aria-checked=\\\\\"false\\\\\" aria-setsize=\\\\\"5\\\\\" aria-posinset=\\\\\"3\\\\\">\n    <div class=\\\\\"arco-rate-character-left\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-check\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n        <path d=\\\\\"M41.678 11.05 19.05 33.678 6.322 20.95\\\\\"></path>\n      </svg></div>\n    <div class=\\\\\"arco-rate-character-right\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-check\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n        <path d=\\\\\"M41.678 11.05 19.05 33.678 6.322 20.95\\\\\"></path>\n      </svg></div>\n  </div>\n  <div class=\\\\\"arco-rate-character\\\\\" role=\\\\\"radio\\\\\" aria-checked=\\\\\"false\\\\\" aria-setsize=\\\\\"5\\\\\" aria-posinset=\\\\\"4\\\\\">\n    <div class=\\\\\"arco-rate-character-left\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-close\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n        <path d=\\\\\"M9.857 9.858 24 24m0 0 14.142 14.142M24 24 38.142 9.858M24 24 9.857 38.142\\\\\"></path>\n      </svg></div>\n    <div class=\\\\\"arco-rate-character-right\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-close\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n        <path d=\\\\\"M9.857 9.858 24 24m0 0 14.142 14.142M24 24 38.142 9.858M24 24 9.857 38.142\\\\\"></path>\n      </svg></div>\n  </div>\n  <div class=\\\\\"arco-rate-character\\\\\" role=\\\\\"radio\\\\\" aria-checked=\\\\\"false\\\\\" aria-setsize=\\\\\"5\\\\\" aria-posinset=\\\\\"5\\\\\">\n    <div class=\\\\\"arco-rate-character-left\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-close\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n        <path d=\\\\\"M9.857 9.858 24 24m0 0 14.142 14.142M24 24 38.142 9.858M24 24 9.857 38.142\\\\\"></path>\n      </svg></div>\n    <div class=\\\\\"arco-rate-character-right\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-close\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n        <path d=\\\\\"M9.857 9.858 24 24m0 0 14.142 14.142M24 24 38.142 9.858M24 24 9.857 38.142\\\\\"></path>\n      </svg></div>\n  </div>\n</div>\"\n`;\n\nexports[`<rate> demo: render [clear] correctly 1`] = `\n\"<div class=\\\\\"arco-rate\\\\\">\n  <div class=\\\\\"arco-rate-character arco-rate-character-full\\\\\" role=\\\\\"radio\\\\\" aria-checked=\\\\\"true\\\\\" aria-setsize=\\\\\"5\\\\\" aria-posinset=\\\\\"1\\\\\">\n    <div class=\\\\\"arco-rate-character-left\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-star-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n        <path d=\\\\\"M22.683 5.415c.568-1.043 2.065-1.043 2.634 0l5.507 10.098a1.5 1.5 0 0 0 1.04.756l11.306 2.117c1.168.219 1.63 1.642.814 2.505l-7.902 8.359a1.5 1.5 0 0 0-.397 1.223l1.48 11.407c.153 1.177-1.058 2.057-2.131 1.548l-10.391-4.933a1.5 1.5 0 0 0-1.287 0l-10.39 4.933c-1.073.51-2.284-.37-2.131-1.548l1.48-11.407a1.5 1.5 0 0 0-.398-1.223L4.015 20.89c-.816-.863-.353-2.286.814-2.505l11.306-2.117a1.5 1.5 0 0 0 1.04-.756l5.508-10.098Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n      </svg></div>\n    <div class=\\\\\"arco-rate-character-right\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-star-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n        <path d=\\\\\"M22.683 5.415c.568-1.043 2.065-1.043 2.634 0l5.507 10.098a1.5 1.5 0 0 0 1.04.756l11.306 2.117c1.168.219 1.63 1.642.814 2.505l-7.902 8.359a1.5 1.5 0 0 0-.397 1.223l1.48 11.407c.153 1.177-1.058 2.057-2.131 1.548l-10.391-4.933a1.5 1.5 0 0 0-1.287 0l-10.39 4.933c-1.073.51-2.284-.37-2.131-1.548l1.48-11.407a1.5 1.5 0 0 0-.398-1.223L4.015 20.89c-.816-.863-.353-2.286.814-2.505l11.306-2.117a1.5 1.5 0 0 0 1.04-.756l5.508-10.098Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n      </svg></div>\n  </div>\n  <div class=\\\\\"arco-rate-character arco-rate-character-full\\\\\" role=\\\\\"radio\\\\\" aria-checked=\\\\\"true\\\\\" aria-setsize=\\\\\"5\\\\\" aria-posinset=\\\\\"2\\\\\">\n    <div class=\\\\\"arco-rate-character-left\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-star-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n        <path d=\\\\\"M22.683 5.415c.568-1.043 2.065-1.043 2.634 0l5.507 10.098a1.5 1.5 0 0 0 1.04.756l11.306 2.117c1.168.219 1.63 1.642.814 2.505l-7.902 8.359a1.5 1.5 0 0 0-.397 1.223l1.48 11.407c.153 1.177-1.058 2.057-2.131 1.548l-10.391-4.933a1.5 1.5 0 0 0-1.287 0l-10.39 4.933c-1.073.51-2.284-.37-2.131-1.548l1.48-11.407a1.5 1.5 0 0 0-.398-1.223L4.015 20.89c-.816-.863-.353-2.286.814-2.505l11.306-2.117a1.5 1.5 0 0 0 1.04-.756l5.508-10.098Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n      </svg></div>\n    <div class=\\\\\"arco-rate-character-right\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-star-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n        <path d=\\\\\"M22.683 5.415c.568-1.043 2.065-1.043 2.634 0l5.507 10.098a1.5 1.5 0 0 0 1.04.756l11.306 2.117c1.168.219 1.63 1.642.814 2.505l-7.902 8.359a1.5 1.5 0 0 0-.397 1.223l1.48 11.407c.153 1.177-1.058 2.057-2.131 1.548l-10.391-4.933a1.5 1.5 0 0 0-1.287 0l-10.39 4.933c-1.073.51-2.284-.37-2.131-1.548l1.48-11.407a1.5 1.5 0 0 0-.398-1.223L4.015 20.89c-.816-.863-.353-2.286.814-2.505l11.306-2.117a1.5 1.5 0 0 0 1.04-.756l5.508-10.098Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n      </svg></div>\n  </div>\n  <div class=\\\\\"arco-rate-character arco-rate-character-full\\\\\" role=\\\\\"radio\\\\\" aria-checked=\\\\\"true\\\\\" aria-setsize=\\\\\"5\\\\\" aria-posinset=\\\\\"3\\\\\">\n    <div class=\\\\\"arco-rate-character-left\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-star-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n        <path d=\\\\\"M22.683 5.415c.568-1.043 2.065-1.043 2.634 0l5.507 10.098a1.5 1.5 0 0 0 1.04.756l11.306 2.117c1.168.219 1.63 1.642.814 2.505l-7.902 8.359a1.5 1.5 0 0 0-.397 1.223l1.48 11.407c.153 1.177-1.058 2.057-2.131 1.548l-10.391-4.933a1.5 1.5 0 0 0-1.287 0l-10.39 4.933c-1.073.51-2.284-.37-2.131-1.548l1.48-11.407a1.5 1.5 0 0 0-.398-1.223L4.015 20.89c-.816-.863-.353-2.286.814-2.505l11.306-2.117a1.5 1.5 0 0 0 1.04-.756l5.508-10.098Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n      </svg></div>\n    <div class=\\\\\"arco-rate-character-right\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-star-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n        <path d=\\\\\"M22.683 5.415c.568-1.043 2.065-1.043 2.634 0l5.507 10.098a1.5 1.5 0 0 0 1.04.756l11.306 2.117c1.168.219 1.63 1.642.814 2.505l-7.902 8.359a1.5 1.5 0 0 0-.397 1.223l1.48 11.407c.153 1.177-1.058 2.057-2.131 1.548l-10.391-4.933a1.5 1.5 0 0 0-1.287 0l-10.39 4.933c-1.073.51-2.284-.37-2.131-1.548l1.48-11.407a1.5 1.5 0 0 0-.398-1.223L4.015 20.89c-.816-.863-.353-2.286.814-2.505l11.306-2.117a1.5 1.5 0 0 0 1.04-.756l5.508-10.098Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n      </svg></div>\n  </div>\n  <div class=\\\\\"arco-rate-character\\\\\" role=\\\\\"radio\\\\\" aria-checked=\\\\\"false\\\\\" aria-setsize=\\\\\"5\\\\\" aria-posinset=\\\\\"4\\\\\">\n    <div class=\\\\\"arco-rate-character-left\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-star-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n        <path d=\\\\\"M22.683 5.415c.568-1.043 2.065-1.043 2.634 0l5.507 10.098a1.5 1.5 0 0 0 1.04.756l11.306 2.117c1.168.219 1.63 1.642.814 2.505l-7.902 8.359a1.5 1.5 0 0 0-.397 1.223l1.48 11.407c.153 1.177-1.058 2.057-2.131 1.548l-10.391-4.933a1.5 1.5 0 0 0-1.287 0l-10.39 4.933c-1.073.51-2.284-.37-2.131-1.548l1.48-11.407a1.5 1.5 0 0 0-.398-1.223L4.015 20.89c-.816-.863-.353-2.286.814-2.505l11.306-2.117a1.5 1.5 0 0 0 1.04-.756l5.508-10.098Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n      </svg></div>\n    <div class=\\\\\"arco-rate-character-right\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-star-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n        <path d=\\\\\"M22.683 5.415c.568-1.043 2.065-1.043 2.634 0l5.507 10.098a1.5 1.5 0 0 0 1.04.756l11.306 2.117c1.168.219 1.63 1.642.814 2.505l-7.902 8.359a1.5 1.5 0 0 0-.397 1.223l1.48 11.407c.153 1.177-1.058 2.057-2.131 1.548l-10.391-4.933a1.5 1.5 0 0 0-1.287 0l-10.39 4.933c-1.073.51-2.284-.37-2.131-1.548l1.48-11.407a1.5 1.5 0 0 0-.398-1.223L4.015 20.89c-.816-.863-.353-2.286.814-2.505l11.306-2.117a1.5 1.5 0 0 0 1.04-.756l5.508-10.098Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n      </svg></div>\n  </div>\n  <div class=\\\\\"arco-rate-character\\\\\" role=\\\\\"radio\\\\\" aria-checked=\\\\\"false\\\\\" aria-setsize=\\\\\"5\\\\\" aria-posinset=\\\\\"5\\\\\">\n    <div class=\\\\\"arco-rate-character-left\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-star-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n        <path d=\\\\\"M22.683 5.415c.568-1.043 2.065-1.043 2.634 0l5.507 10.098a1.5 1.5 0 0 0 1.04.756l11.306 2.117c1.168.219 1.63 1.642.814 2.505l-7.902 8.359a1.5 1.5 0 0 0-.397 1.223l1.48 11.407c.153 1.177-1.058 2.057-2.131 1.548l-10.391-4.933a1.5 1.5 0 0 0-1.287 0l-10.39 4.933c-1.073.51-2.284-.37-2.131-1.548l1.48-11.407a1.5 1.5 0 0 0-.398-1.223L4.015 20.89c-.816-.863-.353-2.286.814-2.505l11.306-2.117a1.5 1.5 0 0 0 1.04-.756l5.508-10.098Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n      </svg></div>\n    <div class=\\\\\"arco-rate-character-right\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-star-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n        <path d=\\\\\"M22.683 5.415c.568-1.043 2.065-1.043 2.634 0l5.507 10.098a1.5 1.5 0 0 0 1.04.756l11.306 2.117c1.168.219 1.63 1.642.814 2.505l-7.902 8.359a1.5 1.5 0 0 0-.397 1.223l1.48 11.407c.153 1.177-1.058 2.057-2.131 1.548l-10.391-4.933a1.5 1.5 0 0 0-1.287 0l-10.39 4.933c-1.073.51-2.284-.37-2.131-1.548l1.48-11.407a1.5 1.5 0 0 0-.398-1.223L4.015 20.89c-.816-.863-.353-2.286.814-2.505l11.306-2.117a1.5 1.5 0 0 0 1.04-.756l5.508-10.098Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n      </svg></div>\n  </div>\n</div>\"\n`;\n\nexports[`<rate> demo: render [color] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-vertical\\\\\" style=\\\\\"column-gap: 8px; row-gap: 8px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-rate\\\\\">\n      <div class=\\\\\"arco-rate-character\\\\\" role=\\\\\"radio\\\\\" aria-checked=\\\\\"false\\\\\" aria-setsize=\\\\\"5\\\\\" aria-posinset=\\\\\"1\\\\\">\n        <div class=\\\\\"arco-rate-character-left\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-star-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n            <path d=\\\\\"M22.683 5.415c.568-1.043 2.065-1.043 2.634 0l5.507 10.098a1.5 1.5 0 0 0 1.04.756l11.306 2.117c1.168.219 1.63 1.642.814 2.505l-7.902 8.359a1.5 1.5 0 0 0-.397 1.223l1.48 11.407c.153 1.177-1.058 2.057-2.131 1.548l-10.391-4.933a1.5 1.5 0 0 0-1.287 0l-10.39 4.933c-1.073.51-2.284-.37-2.131-1.548l1.48-11.407a1.5 1.5 0 0 0-.398-1.223L4.015 20.89c-.816-.863-.353-2.286.814-2.505l11.306-2.117a1.5 1.5 0 0 0 1.04-.756l5.508-10.098Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n          </svg></div>\n        <div class=\\\\\"arco-rate-character-right\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-star-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n            <path d=\\\\\"M22.683 5.415c.568-1.043 2.065-1.043 2.634 0l5.507 10.098a1.5 1.5 0 0 0 1.04.756l11.306 2.117c1.168.219 1.63 1.642.814 2.505l-7.902 8.359a1.5 1.5 0 0 0-.397 1.223l1.48 11.407c.153 1.177-1.058 2.057-2.131 1.548l-10.391-4.933a1.5 1.5 0 0 0-1.287 0l-10.39 4.933c-1.073.51-2.284-.37-2.131-1.548l1.48-11.407a1.5 1.5 0 0 0-.398-1.223L4.015 20.89c-.816-.863-.353-2.286.814-2.505l11.306-2.117a1.5 1.5 0 0 0 1.04-.756l5.508-10.098Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n          </svg></div>\n      </div>\n      <div class=\\\\\"arco-rate-character\\\\\" role=\\\\\"radio\\\\\" aria-checked=\\\\\"false\\\\\" aria-setsize=\\\\\"5\\\\\" aria-posinset=\\\\\"2\\\\\">\n        <div class=\\\\\"arco-rate-character-left\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-star-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n            <path d=\\\\\"M22.683 5.415c.568-1.043 2.065-1.043 2.634 0l5.507 10.098a1.5 1.5 0 0 0 1.04.756l11.306 2.117c1.168.219 1.63 1.642.814 2.505l-7.902 8.359a1.5 1.5 0 0 0-.397 1.223l1.48 11.407c.153 1.177-1.058 2.057-2.131 1.548l-10.391-4.933a1.5 1.5 0 0 0-1.287 0l-10.39 4.933c-1.073.51-2.284-.37-2.131-1.548l1.48-11.407a1.5 1.5 0 0 0-.398-1.223L4.015 20.89c-.816-.863-.353-2.286.814-2.505l11.306-2.117a1.5 1.5 0 0 0 1.04-.756l5.508-10.098Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n          </svg></div>\n        <div class=\\\\\"arco-rate-character-right\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-star-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n            <path d=\\\\\"M22.683 5.415c.568-1.043 2.065-1.043 2.634 0l5.507 10.098a1.5 1.5 0 0 0 1.04.756l11.306 2.117c1.168.219 1.63 1.642.814 2.505l-7.902 8.359a1.5 1.5 0 0 0-.397 1.223l1.48 11.407c.153 1.177-1.058 2.057-2.131 1.548l-10.391-4.933a1.5 1.5 0 0 0-1.287 0l-10.39 4.933c-1.073.51-2.284-.37-2.131-1.548l1.48-11.407a1.5 1.5 0 0 0-.398-1.223L4.015 20.89c-.816-.863-.353-2.286.814-2.505l11.306-2.117a1.5 1.5 0 0 0 1.04-.756l5.508-10.098Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n          </svg></div>\n      </div>\n      <div class=\\\\\"arco-rate-character\\\\\" role=\\\\\"radio\\\\\" aria-checked=\\\\\"false\\\\\" aria-setsize=\\\\\"5\\\\\" aria-posinset=\\\\\"3\\\\\">\n        <div class=\\\\\"arco-rate-character-left\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-star-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n            <path d=\\\\\"M22.683 5.415c.568-1.043 2.065-1.043 2.634 0l5.507 10.098a1.5 1.5 0 0 0 1.04.756l11.306 2.117c1.168.219 1.63 1.642.814 2.505l-7.902 8.359a1.5 1.5 0 0 0-.397 1.223l1.48 11.407c.153 1.177-1.058 2.057-2.131 1.548l-10.391-4.933a1.5 1.5 0 0 0-1.287 0l-10.39 4.933c-1.073.51-2.284-.37-2.131-1.548l1.48-11.407a1.5 1.5 0 0 0-.398-1.223L4.015 20.89c-.816-.863-.353-2.286.814-2.505l11.306-2.117a1.5 1.5 0 0 0 1.04-.756l5.508-10.098Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n          </svg></div>\n        <div class=\\\\\"arco-rate-character-right\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-star-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n            <path d=\\\\\"M22.683 5.415c.568-1.043 2.065-1.043 2.634 0l5.507 10.098a1.5 1.5 0 0 0 1.04.756l11.306 2.117c1.168.219 1.63 1.642.814 2.505l-7.902 8.359a1.5 1.5 0 0 0-.397 1.223l1.48 11.407c.153 1.177-1.058 2.057-2.131 1.548l-10.391-4.933a1.5 1.5 0 0 0-1.287 0l-10.39 4.933c-1.073.51-2.284-.37-2.131-1.548l1.48-11.407a1.5 1.5 0 0 0-.398-1.223L4.015 20.89c-.816-.863-.353-2.286.814-2.505l11.306-2.117a1.5 1.5 0 0 0 1.04-.756l5.508-10.098Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n          </svg></div>\n      </div>\n      <div class=\\\\\"arco-rate-character\\\\\" role=\\\\\"radio\\\\\" aria-checked=\\\\\"false\\\\\" aria-setsize=\\\\\"5\\\\\" aria-posinset=\\\\\"4\\\\\">\n        <div class=\\\\\"arco-rate-character-left\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-star-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n            <path d=\\\\\"M22.683 5.415c.568-1.043 2.065-1.043 2.634 0l5.507 10.098a1.5 1.5 0 0 0 1.04.756l11.306 2.117c1.168.219 1.63 1.642.814 2.505l-7.902 8.359a1.5 1.5 0 0 0-.397 1.223l1.48 11.407c.153 1.177-1.058 2.057-2.131 1.548l-10.391-4.933a1.5 1.5 0 0 0-1.287 0l-10.39 4.933c-1.073.51-2.284-.37-2.131-1.548l1.48-11.407a1.5 1.5 0 0 0-.398-1.223L4.015 20.89c-.816-.863-.353-2.286.814-2.505l11.306-2.117a1.5 1.5 0 0 0 1.04-.756l5.508-10.098Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n          </svg></div>\n        <div class=\\\\\"arco-rate-character-right\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-star-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n            <path d=\\\\\"M22.683 5.415c.568-1.043 2.065-1.043 2.634 0l5.507 10.098a1.5 1.5 0 0 0 1.04.756l11.306 2.117c1.168.219 1.63 1.642.814 2.505l-7.902 8.359a1.5 1.5 0 0 0-.397 1.223l1.48 11.407c.153 1.177-1.058 2.057-2.131 1.548l-10.391-4.933a1.5 1.5 0 0 0-1.287 0l-10.39 4.933c-1.073.51-2.284-.37-2.131-1.548l1.48-11.407a1.5 1.5 0 0 0-.398-1.223L4.015 20.89c-.816-.863-.353-2.286.814-2.505l11.306-2.117a1.5 1.5 0 0 0 1.04-.756l5.508-10.098Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n          </svg></div>\n      </div>\n      <div class=\\\\\"arco-rate-character\\\\\" role=\\\\\"radio\\\\\" aria-checked=\\\\\"false\\\\\" aria-setsize=\\\\\"5\\\\\" aria-posinset=\\\\\"5\\\\\">\n        <div class=\\\\\"arco-rate-character-left\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-star-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n            <path d=\\\\\"M22.683 5.415c.568-1.043 2.065-1.043 2.634 0l5.507 10.098a1.5 1.5 0 0 0 1.04.756l11.306 2.117c1.168.219 1.63 1.642.814 2.505l-7.902 8.359a1.5 1.5 0 0 0-.397 1.223l1.48 11.407c.153 1.177-1.058 2.057-2.131 1.548l-10.391-4.933a1.5 1.5 0 0 0-1.287 0l-10.39 4.933c-1.073.51-2.284-.37-2.131-1.548l1.48-11.407a1.5 1.5 0 0 0-.398-1.223L4.015 20.89c-.816-.863-.353-2.286.814-2.505l11.306-2.117a1.5 1.5 0 0 0 1.04-.756l5.508-10.098Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n          </svg></div>\n        <div class=\\\\\"arco-rate-character-right\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-star-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n            <path d=\\\\\"M22.683 5.415c.568-1.043 2.065-1.043 2.634 0l5.507 10.098a1.5 1.5 0 0 0 1.04.756l11.306 2.117c1.168.219 1.63 1.642.814 2.505l-7.902 8.359a1.5 1.5 0 0 0-.397 1.223l1.48 11.407c.153 1.177-1.058 2.057-2.131 1.548l-10.391-4.933a1.5 1.5 0 0 0-1.287 0l-10.39 4.933c-1.073.51-2.284-.37-2.131-1.548l1.48-11.407a1.5 1.5 0 0 0-.398-1.223L4.015 20.89c-.816-.863-.353-2.286.814-2.505l11.306-2.117a1.5 1.5 0 0 0 1.04-.756l5.508-10.098Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n          </svg></div>\n      </div>\n    </div>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-rate\\\\\">\n      <div class=\\\\\"arco-rate-character\\\\\" role=\\\\\"radio\\\\\" aria-checked=\\\\\"false\\\\\" aria-setsize=\\\\\"5\\\\\" aria-posinset=\\\\\"1\\\\\">\n        <div class=\\\\\"arco-rate-character-left\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-star-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n            <path d=\\\\\"M22.683 5.415c.568-1.043 2.065-1.043 2.634 0l5.507 10.098a1.5 1.5 0 0 0 1.04.756l11.306 2.117c1.168.219 1.63 1.642.814 2.505l-7.902 8.359a1.5 1.5 0 0 0-.397 1.223l1.48 11.407c.153 1.177-1.058 2.057-2.131 1.548l-10.391-4.933a1.5 1.5 0 0 0-1.287 0l-10.39 4.933c-1.073.51-2.284-.37-2.131-1.548l1.48-11.407a1.5 1.5 0 0 0-.398-1.223L4.015 20.89c-.816-.863-.353-2.286.814-2.505l11.306-2.117a1.5 1.5 0 0 0 1.04-.756l5.508-10.098Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n          </svg></div>\n        <div class=\\\\\"arco-rate-character-right\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-star-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n            <path d=\\\\\"M22.683 5.415c.568-1.043 2.065-1.043 2.634 0l5.507 10.098a1.5 1.5 0 0 0 1.04.756l11.306 2.117c1.168.219 1.63 1.642.814 2.505l-7.902 8.359a1.5 1.5 0 0 0-.397 1.223l1.48 11.407c.153 1.177-1.058 2.057-2.131 1.548l-10.391-4.933a1.5 1.5 0 0 0-1.287 0l-10.39 4.933c-1.073.51-2.284-.37-2.131-1.548l1.48-11.407a1.5 1.5 0 0 0-.398-1.223L4.015 20.89c-.816-.863-.353-2.286.814-2.505l11.306-2.117a1.5 1.5 0 0 0 1.04-.756l5.508-10.098Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n          </svg></div>\n      </div>\n      <div class=\\\\\"arco-rate-character\\\\\" role=\\\\\"radio\\\\\" aria-checked=\\\\\"false\\\\\" aria-setsize=\\\\\"5\\\\\" aria-posinset=\\\\\"2\\\\\">\n        <div class=\\\\\"arco-rate-character-left\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-star-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n            <path d=\\\\\"M22.683 5.415c.568-1.043 2.065-1.043 2.634 0l5.507 10.098a1.5 1.5 0 0 0 1.04.756l11.306 2.117c1.168.219 1.63 1.642.814 2.505l-7.902 8.359a1.5 1.5 0 0 0-.397 1.223l1.48 11.407c.153 1.177-1.058 2.057-2.131 1.548l-10.391-4.933a1.5 1.5 0 0 0-1.287 0l-10.39 4.933c-1.073.51-2.284-.37-2.131-1.548l1.48-11.407a1.5 1.5 0 0 0-.398-1.223L4.015 20.89c-.816-.863-.353-2.286.814-2.505l11.306-2.117a1.5 1.5 0 0 0 1.04-.756l5.508-10.098Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n          </svg></div>\n        <div class=\\\\\"arco-rate-character-right\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-star-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n            <path d=\\\\\"M22.683 5.415c.568-1.043 2.065-1.043 2.634 0l5.507 10.098a1.5 1.5 0 0 0 1.04.756l11.306 2.117c1.168.219 1.63 1.642.814 2.505l-7.902 8.359a1.5 1.5 0 0 0-.397 1.223l1.48 11.407c.153 1.177-1.058 2.057-2.131 1.548l-10.391-4.933a1.5 1.5 0 0 0-1.287 0l-10.39 4.933c-1.073.51-2.284-.37-2.131-1.548l1.48-11.407a1.5 1.5 0 0 0-.398-1.223L4.015 20.89c-.816-.863-.353-2.286.814-2.505l11.306-2.117a1.5 1.5 0 0 0 1.04-.756l5.508-10.098Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n          </svg></div>\n      </div>\n      <div class=\\\\\"arco-rate-character\\\\\" role=\\\\\"radio\\\\\" aria-checked=\\\\\"false\\\\\" aria-setsize=\\\\\"5\\\\\" aria-posinset=\\\\\"3\\\\\">\n        <div class=\\\\\"arco-rate-character-left\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-star-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n            <path d=\\\\\"M22.683 5.415c.568-1.043 2.065-1.043 2.634 0l5.507 10.098a1.5 1.5 0 0 0 1.04.756l11.306 2.117c1.168.219 1.63 1.642.814 2.505l-7.902 8.359a1.5 1.5 0 0 0-.397 1.223l1.48 11.407c.153 1.177-1.058 2.057-2.131 1.548l-10.391-4.933a1.5 1.5 0 0 0-1.287 0l-10.39 4.933c-1.073.51-2.284-.37-2.131-1.548l1.48-11.407a1.5 1.5 0 0 0-.398-1.223L4.015 20.89c-.816-.863-.353-2.286.814-2.505l11.306-2.117a1.5 1.5 0 0 0 1.04-.756l5.508-10.098Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n          </svg></div>\n        <div class=\\\\\"arco-rate-character-right\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-star-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n            <path d=\\\\\"M22.683 5.415c.568-1.043 2.065-1.043 2.634 0l5.507 10.098a1.5 1.5 0 0 0 1.04.756l11.306 2.117c1.168.219 1.63 1.642.814 2.505l-7.902 8.359a1.5 1.5 0 0 0-.397 1.223l1.48 11.407c.153 1.177-1.058 2.057-2.131 1.548l-10.391-4.933a1.5 1.5 0 0 0-1.287 0l-10.39 4.933c-1.073.51-2.284-.37-2.131-1.548l1.48-11.407a1.5 1.5 0 0 0-.398-1.223L4.015 20.89c-.816-.863-.353-2.286.814-2.505l11.306-2.117a1.5 1.5 0 0 0 1.04-.756l5.508-10.098Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n          </svg></div>\n      </div>\n      <div class=\\\\\"arco-rate-character\\\\\" role=\\\\\"radio\\\\\" aria-checked=\\\\\"false\\\\\" aria-setsize=\\\\\"5\\\\\" aria-posinset=\\\\\"4\\\\\">\n        <div class=\\\\\"arco-rate-character-left\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-star-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n            <path d=\\\\\"M22.683 5.415c.568-1.043 2.065-1.043 2.634 0l5.507 10.098a1.5 1.5 0 0 0 1.04.756l11.306 2.117c1.168.219 1.63 1.642.814 2.505l-7.902 8.359a1.5 1.5 0 0 0-.397 1.223l1.48 11.407c.153 1.177-1.058 2.057-2.131 1.548l-10.391-4.933a1.5 1.5 0 0 0-1.287 0l-10.39 4.933c-1.073.51-2.284-.37-2.131-1.548l1.48-11.407a1.5 1.5 0 0 0-.398-1.223L4.015 20.89c-.816-.863-.353-2.286.814-2.505l11.306-2.117a1.5 1.5 0 0 0 1.04-.756l5.508-10.098Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n          </svg></div>\n        <div class=\\\\\"arco-rate-character-right\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-star-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n            <path d=\\\\\"M22.683 5.415c.568-1.043 2.065-1.043 2.634 0l5.507 10.098a1.5 1.5 0 0 0 1.04.756l11.306 2.117c1.168.219 1.63 1.642.814 2.505l-7.902 8.359a1.5 1.5 0 0 0-.397 1.223l1.48 11.407c.153 1.177-1.058 2.057-2.131 1.548l-10.391-4.933a1.5 1.5 0 0 0-1.287 0l-10.39 4.933c-1.073.51-2.284-.37-2.131-1.548l1.48-11.407a1.5 1.5 0 0 0-.398-1.223L4.015 20.89c-.816-.863-.353-2.286.814-2.505l11.306-2.117a1.5 1.5 0 0 0 1.04-.756l5.508-10.098Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n          </svg></div>\n      </div>\n      <div class=\\\\\"arco-rate-character\\\\\" role=\\\\\"radio\\\\\" aria-checked=\\\\\"false\\\\\" aria-setsize=\\\\\"5\\\\\" aria-posinset=\\\\\"5\\\\\">\n        <div class=\\\\\"arco-rate-character-left\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-star-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n            <path d=\\\\\"M22.683 5.415c.568-1.043 2.065-1.043 2.634 0l5.507 10.098a1.5 1.5 0 0 0 1.04.756l11.306 2.117c1.168.219 1.63 1.642.814 2.505l-7.902 8.359a1.5 1.5 0 0 0-.397 1.223l1.48 11.407c.153 1.177-1.058 2.057-2.131 1.548l-10.391-4.933a1.5 1.5 0 0 0-1.287 0l-10.39 4.933c-1.073.51-2.284-.37-2.131-1.548l1.48-11.407a1.5 1.5 0 0 0-.398-1.223L4.015 20.89c-.816-.863-.353-2.286.814-2.505l11.306-2.117a1.5 1.5 0 0 0 1.04-.756l5.508-10.098Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n          </svg></div>\n        <div class=\\\\\"arco-rate-character-right\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-star-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n            <path d=\\\\\"M22.683 5.415c.568-1.043 2.065-1.043 2.634 0l5.507 10.098a1.5 1.5 0 0 0 1.04.756l11.306 2.117c1.168.219 1.63 1.642.814 2.505l-7.902 8.359a1.5 1.5 0 0 0-.397 1.223l1.48 11.407c.153 1.177-1.058 2.057-2.131 1.548l-10.391-4.933a1.5 1.5 0 0 0-1.287 0l-10.39 4.933c-1.073.51-2.284-.37-2.131-1.548l1.48-11.407a1.5 1.5 0 0 0-.398-1.223L4.015 20.89c-.816-.863-.353-2.286.814-2.505l11.306-2.117a1.5 1.5 0 0 0 1.04-.756l5.508-10.098Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n          </svg></div>\n      </div>\n    </div>\n  </div>\n</div>\"\n`;\n\nexports[`<rate> demo: render [count] correctly 1`] = `\n\"<div class=\\\\\"arco-rate\\\\\">\n  <div class=\\\\\"arco-rate-character\\\\\" role=\\\\\"radio\\\\\" aria-checked=\\\\\"false\\\\\" aria-setsize=\\\\\"10\\\\\" aria-posinset=\\\\\"1\\\\\">\n    <div class=\\\\\"arco-rate-character-left\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-star-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n        <path d=\\\\\"M22.683 5.415c.568-1.043 2.065-1.043 2.634 0l5.507 10.098a1.5 1.5 0 0 0 1.04.756l11.306 2.117c1.168.219 1.63 1.642.814 2.505l-7.902 8.359a1.5 1.5 0 0 0-.397 1.223l1.48 11.407c.153 1.177-1.058 2.057-2.131 1.548l-10.391-4.933a1.5 1.5 0 0 0-1.287 0l-10.39 4.933c-1.073.51-2.284-.37-2.131-1.548l1.48-11.407a1.5 1.5 0 0 0-.398-1.223L4.015 20.89c-.816-.863-.353-2.286.814-2.505l11.306-2.117a1.5 1.5 0 0 0 1.04-.756l5.508-10.098Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n      </svg></div>\n    <div class=\\\\\"arco-rate-character-right\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-star-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n        <path d=\\\\\"M22.683 5.415c.568-1.043 2.065-1.043 2.634 0l5.507 10.098a1.5 1.5 0 0 0 1.04.756l11.306 2.117c1.168.219 1.63 1.642.814 2.505l-7.902 8.359a1.5 1.5 0 0 0-.397 1.223l1.48 11.407c.153 1.177-1.058 2.057-2.131 1.548l-10.391-4.933a1.5 1.5 0 0 0-1.287 0l-10.39 4.933c-1.073.51-2.284-.37-2.131-1.548l1.48-11.407a1.5 1.5 0 0 0-.398-1.223L4.015 20.89c-.816-.863-.353-2.286.814-2.505l11.306-2.117a1.5 1.5 0 0 0 1.04-.756l5.508-10.098Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n      </svg></div>\n  </div>\n  <div class=\\\\\"arco-rate-character\\\\\" role=\\\\\"radio\\\\\" aria-checked=\\\\\"false\\\\\" aria-setsize=\\\\\"10\\\\\" aria-posinset=\\\\\"2\\\\\">\n    <div class=\\\\\"arco-rate-character-left\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-star-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n        <path d=\\\\\"M22.683 5.415c.568-1.043 2.065-1.043 2.634 0l5.507 10.098a1.5 1.5 0 0 0 1.04.756l11.306 2.117c1.168.219 1.63 1.642.814 2.505l-7.902 8.359a1.5 1.5 0 0 0-.397 1.223l1.48 11.407c.153 1.177-1.058 2.057-2.131 1.548l-10.391-4.933a1.5 1.5 0 0 0-1.287 0l-10.39 4.933c-1.073.51-2.284-.37-2.131-1.548l1.48-11.407a1.5 1.5 0 0 0-.398-1.223L4.015 20.89c-.816-.863-.353-2.286.814-2.505l11.306-2.117a1.5 1.5 0 0 0 1.04-.756l5.508-10.098Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n      </svg></div>\n    <div class=\\\\\"arco-rate-character-right\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-star-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n        <path d=\\\\\"M22.683 5.415c.568-1.043 2.065-1.043 2.634 0l5.507 10.098a1.5 1.5 0 0 0 1.04.756l11.306 2.117c1.168.219 1.63 1.642.814 2.505l-7.902 8.359a1.5 1.5 0 0 0-.397 1.223l1.48 11.407c.153 1.177-1.058 2.057-2.131 1.548l-10.391-4.933a1.5 1.5 0 0 0-1.287 0l-10.39 4.933c-1.073.51-2.284-.37-2.131-1.548l1.48-11.407a1.5 1.5 0 0 0-.398-1.223L4.015 20.89c-.816-.863-.353-2.286.814-2.505l11.306-2.117a1.5 1.5 0 0 0 1.04-.756l5.508-10.098Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n      </svg></div>\n  </div>\n  <div class=\\\\\"arco-rate-character\\\\\" role=\\\\\"radio\\\\\" aria-checked=\\\\\"false\\\\\" aria-setsize=\\\\\"10\\\\\" aria-posinset=\\\\\"3\\\\\">\n    <div class=\\\\\"arco-rate-character-left\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-star-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n        <path d=\\\\\"M22.683 5.415c.568-1.043 2.065-1.043 2.634 0l5.507 10.098a1.5 1.5 0 0 0 1.04.756l11.306 2.117c1.168.219 1.63 1.642.814 2.505l-7.902 8.359a1.5 1.5 0 0 0-.397 1.223l1.48 11.407c.153 1.177-1.058 2.057-2.131 1.548l-10.391-4.933a1.5 1.5 0 0 0-1.287 0l-10.39 4.933c-1.073.51-2.284-.37-2.131-1.548l1.48-11.407a1.5 1.5 0 0 0-.398-1.223L4.015 20.89c-.816-.863-.353-2.286.814-2.505l11.306-2.117a1.5 1.5 0 0 0 1.04-.756l5.508-10.098Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n      </svg></div>\n    <div class=\\\\\"arco-rate-character-right\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-star-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n        <path d=\\\\\"M22.683 5.415c.568-1.043 2.065-1.043 2.634 0l5.507 10.098a1.5 1.5 0 0 0 1.04.756l11.306 2.117c1.168.219 1.63 1.642.814 2.505l-7.902 8.359a1.5 1.5 0 0 0-.397 1.223l1.48 11.407c.153 1.177-1.058 2.057-2.131 1.548l-10.391-4.933a1.5 1.5 0 0 0-1.287 0l-10.39 4.933c-1.073.51-2.284-.37-2.131-1.548l1.48-11.407a1.5 1.5 0 0 0-.398-1.223L4.015 20.89c-.816-.863-.353-2.286.814-2.505l11.306-2.117a1.5 1.5 0 0 0 1.04-.756l5.508-10.098Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n      </svg></div>\n  </div>\n  <div class=\\\\\"arco-rate-character\\\\\" role=\\\\\"radio\\\\\" aria-checked=\\\\\"false\\\\\" aria-setsize=\\\\\"10\\\\\" aria-posinset=\\\\\"4\\\\\">\n    <div class=\\\\\"arco-rate-character-left\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-star-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n        <path d=\\\\\"M22.683 5.415c.568-1.043 2.065-1.043 2.634 0l5.507 10.098a1.5 1.5 0 0 0 1.04.756l11.306 2.117c1.168.219 1.63 1.642.814 2.505l-7.902 8.359a1.5 1.5 0 0 0-.397 1.223l1.48 11.407c.153 1.177-1.058 2.057-2.131 1.548l-10.391-4.933a1.5 1.5 0 0 0-1.287 0l-10.39 4.933c-1.073.51-2.284-.37-2.131-1.548l1.48-11.407a1.5 1.5 0 0 0-.398-1.223L4.015 20.89c-.816-.863-.353-2.286.814-2.505l11.306-2.117a1.5 1.5 0 0 0 1.04-.756l5.508-10.098Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n      </svg></div>\n    <div class=\\\\\"arco-rate-character-right\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-star-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n        <path d=\\\\\"M22.683 5.415c.568-1.043 2.065-1.043 2.634 0l5.507 10.098a1.5 1.5 0 0 0 1.04.756l11.306 2.117c1.168.219 1.63 1.642.814 2.505l-7.902 8.359a1.5 1.5 0 0 0-.397 1.223l1.48 11.407c.153 1.177-1.058 2.057-2.131 1.548l-10.391-4.933a1.5 1.5 0 0 0-1.287 0l-10.39 4.933c-1.073.51-2.284-.37-2.131-1.548l1.48-11.407a1.5 1.5 0 0 0-.398-1.223L4.015 20.89c-.816-.863-.353-2.286.814-2.505l11.306-2.117a1.5 1.5 0 0 0 1.04-.756l5.508-10.098Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n      </svg></div>\n  </div>\n  <div class=\\\\\"arco-rate-character\\\\\" role=\\\\\"radio\\\\\" aria-checked=\\\\\"false\\\\\" aria-setsize=\\\\\"10\\\\\" aria-posinset=\\\\\"5\\\\\">\n    <div class=\\\\\"arco-rate-character-left\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-star-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n        <path d=\\\\\"M22.683 5.415c.568-1.043 2.065-1.043 2.634 0l5.507 10.098a1.5 1.5 0 0 0 1.04.756l11.306 2.117c1.168.219 1.63 1.642.814 2.505l-7.902 8.359a1.5 1.5 0 0 0-.397 1.223l1.48 11.407c.153 1.177-1.058 2.057-2.131 1.548l-10.391-4.933a1.5 1.5 0 0 0-1.287 0l-10.39 4.933c-1.073.51-2.284-.37-2.131-1.548l1.48-11.407a1.5 1.5 0 0 0-.398-1.223L4.015 20.89c-.816-.863-.353-2.286.814-2.505l11.306-2.117a1.5 1.5 0 0 0 1.04-.756l5.508-10.098Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n      </svg></div>\n    <div class=\\\\\"arco-rate-character-right\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-star-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n        <path d=\\\\\"M22.683 5.415c.568-1.043 2.065-1.043 2.634 0l5.507 10.098a1.5 1.5 0 0 0 1.04.756l11.306 2.117c1.168.219 1.63 1.642.814 2.505l-7.902 8.359a1.5 1.5 0 0 0-.397 1.223l1.48 11.407c.153 1.177-1.058 2.057-2.131 1.548l-10.391-4.933a1.5 1.5 0 0 0-1.287 0l-10.39 4.933c-1.073.51-2.284-.37-2.131-1.548l1.48-11.407a1.5 1.5 0 0 0-.398-1.223L4.015 20.89c-.816-.863-.353-2.286.814-2.505l11.306-2.117a1.5 1.5 0 0 0 1.04-.756l5.508-10.098Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n      </svg></div>\n  </div>\n  <div class=\\\\\"arco-rate-character\\\\\" role=\\\\\"radio\\\\\" aria-checked=\\\\\"false\\\\\" aria-setsize=\\\\\"10\\\\\" aria-posinset=\\\\\"6\\\\\">\n    <div class=\\\\\"arco-rate-character-left\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-star-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n        <path d=\\\\\"M22.683 5.415c.568-1.043 2.065-1.043 2.634 0l5.507 10.098a1.5 1.5 0 0 0 1.04.756l11.306 2.117c1.168.219 1.63 1.642.814 2.505l-7.902 8.359a1.5 1.5 0 0 0-.397 1.223l1.48 11.407c.153 1.177-1.058 2.057-2.131 1.548l-10.391-4.933a1.5 1.5 0 0 0-1.287 0l-10.39 4.933c-1.073.51-2.284-.37-2.131-1.548l1.48-11.407a1.5 1.5 0 0 0-.398-1.223L4.015 20.89c-.816-.863-.353-2.286.814-2.505l11.306-2.117a1.5 1.5 0 0 0 1.04-.756l5.508-10.098Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n      </svg></div>\n    <div class=\\\\\"arco-rate-character-right\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-star-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n        <path d=\\\\\"M22.683 5.415c.568-1.043 2.065-1.043 2.634 0l5.507 10.098a1.5 1.5 0 0 0 1.04.756l11.306 2.117c1.168.219 1.63 1.642.814 2.505l-7.902 8.359a1.5 1.5 0 0 0-.397 1.223l1.48 11.407c.153 1.177-1.058 2.057-2.131 1.548l-10.391-4.933a1.5 1.5 0 0 0-1.287 0l-10.39 4.933c-1.073.51-2.284-.37-2.131-1.548l1.48-11.407a1.5 1.5 0 0 0-.398-1.223L4.015 20.89c-.816-.863-.353-2.286.814-2.505l11.306-2.117a1.5 1.5 0 0 0 1.04-.756l5.508-10.098Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n      </svg></div>\n  </div>\n  <div class=\\\\\"arco-rate-character\\\\\" role=\\\\\"radio\\\\\" aria-checked=\\\\\"false\\\\\" aria-setsize=\\\\\"10\\\\\" aria-posinset=\\\\\"7\\\\\">\n    <div class=\\\\\"arco-rate-character-left\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-star-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n        <path d=\\\\\"M22.683 5.415c.568-1.043 2.065-1.043 2.634 0l5.507 10.098a1.5 1.5 0 0 0 1.04.756l11.306 2.117c1.168.219 1.63 1.642.814 2.505l-7.902 8.359a1.5 1.5 0 0 0-.397 1.223l1.48 11.407c.153 1.177-1.058 2.057-2.131 1.548l-10.391-4.933a1.5 1.5 0 0 0-1.287 0l-10.39 4.933c-1.073.51-2.284-.37-2.131-1.548l1.48-11.407a1.5 1.5 0 0 0-.398-1.223L4.015 20.89c-.816-.863-.353-2.286.814-2.505l11.306-2.117a1.5 1.5 0 0 0 1.04-.756l5.508-10.098Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n      </svg></div>\n    <div class=\\\\\"arco-rate-character-right\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-star-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n        <path d=\\\\\"M22.683 5.415c.568-1.043 2.065-1.043 2.634 0l5.507 10.098a1.5 1.5 0 0 0 1.04.756l11.306 2.117c1.168.219 1.63 1.642.814 2.505l-7.902 8.359a1.5 1.5 0 0 0-.397 1.223l1.48 11.407c.153 1.177-1.058 2.057-2.131 1.548l-10.391-4.933a1.5 1.5 0 0 0-1.287 0l-10.39 4.933c-1.073.51-2.284-.37-2.131-1.548l1.48-11.407a1.5 1.5 0 0 0-.398-1.223L4.015 20.89c-.816-.863-.353-2.286.814-2.505l11.306-2.117a1.5 1.5 0 0 0 1.04-.756l5.508-10.098Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n      </svg></div>\n  </div>\n  <div class=\\\\\"arco-rate-character\\\\\" role=\\\\\"radio\\\\\" aria-checked=\\\\\"false\\\\\" aria-setsize=\\\\\"10\\\\\" aria-posinset=\\\\\"8\\\\\">\n    <div class=\\\\\"arco-rate-character-left\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-star-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n        <path d=\\\\\"M22.683 5.415c.568-1.043 2.065-1.043 2.634 0l5.507 10.098a1.5 1.5 0 0 0 1.04.756l11.306 2.117c1.168.219 1.63 1.642.814 2.505l-7.902 8.359a1.5 1.5 0 0 0-.397 1.223l1.48 11.407c.153 1.177-1.058 2.057-2.131 1.548l-10.391-4.933a1.5 1.5 0 0 0-1.287 0l-10.39 4.933c-1.073.51-2.284-.37-2.131-1.548l1.48-11.407a1.5 1.5 0 0 0-.398-1.223L4.015 20.89c-.816-.863-.353-2.286.814-2.505l11.306-2.117a1.5 1.5 0 0 0 1.04-.756l5.508-10.098Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n      </svg></div>\n    <div class=\\\\\"arco-rate-character-right\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-star-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n        <path d=\\\\\"M22.683 5.415c.568-1.043 2.065-1.043 2.634 0l5.507 10.098a1.5 1.5 0 0 0 1.04.756l11.306 2.117c1.168.219 1.63 1.642.814 2.505l-7.902 8.359a1.5 1.5 0 0 0-.397 1.223l1.48 11.407c.153 1.177-1.058 2.057-2.131 1.548l-10.391-4.933a1.5 1.5 0 0 0-1.287 0l-10.39 4.933c-1.073.51-2.284-.37-2.131-1.548l1.48-11.407a1.5 1.5 0 0 0-.398-1.223L4.015 20.89c-.816-.863-.353-2.286.814-2.505l11.306-2.117a1.5 1.5 0 0 0 1.04-.756l5.508-10.098Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n      </svg></div>\n  </div>\n  <div class=\\\\\"arco-rate-character\\\\\" role=\\\\\"radio\\\\\" aria-checked=\\\\\"false\\\\\" aria-setsize=\\\\\"10\\\\\" aria-posinset=\\\\\"9\\\\\">\n    <div class=\\\\\"arco-rate-character-left\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-star-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n        <path d=\\\\\"M22.683 5.415c.568-1.043 2.065-1.043 2.634 0l5.507 10.098a1.5 1.5 0 0 0 1.04.756l11.306 2.117c1.168.219 1.63 1.642.814 2.505l-7.902 8.359a1.5 1.5 0 0 0-.397 1.223l1.48 11.407c.153 1.177-1.058 2.057-2.131 1.548l-10.391-4.933a1.5 1.5 0 0 0-1.287 0l-10.39 4.933c-1.073.51-2.284-.37-2.131-1.548l1.48-11.407a1.5 1.5 0 0 0-.398-1.223L4.015 20.89c-.816-.863-.353-2.286.814-2.505l11.306-2.117a1.5 1.5 0 0 0 1.04-.756l5.508-10.098Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n      </svg></div>\n    <div class=\\\\\"arco-rate-character-right\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-star-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n        <path d=\\\\\"M22.683 5.415c.568-1.043 2.065-1.043 2.634 0l5.507 10.098a1.5 1.5 0 0 0 1.04.756l11.306 2.117c1.168.219 1.63 1.642.814 2.505l-7.902 8.359a1.5 1.5 0 0 0-.397 1.223l1.48 11.407c.153 1.177-1.058 2.057-2.131 1.548l-10.391-4.933a1.5 1.5 0 0 0-1.287 0l-10.39 4.933c-1.073.51-2.284-.37-2.131-1.548l1.48-11.407a1.5 1.5 0 0 0-.398-1.223L4.015 20.89c-.816-.863-.353-2.286.814-2.505l11.306-2.117a1.5 1.5 0 0 0 1.04-.756l5.508-10.098Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n      </svg></div>\n  </div>\n  <div class=\\\\\"arco-rate-character\\\\\" role=\\\\\"radio\\\\\" aria-checked=\\\\\"false\\\\\" aria-setsize=\\\\\"10\\\\\" aria-posinset=\\\\\"10\\\\\">\n    <div class=\\\\\"arco-rate-character-left\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-star-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n        <path d=\\\\\"M22.683 5.415c.568-1.043 2.065-1.043 2.634 0l5.507 10.098a1.5 1.5 0 0 0 1.04.756l11.306 2.117c1.168.219 1.63 1.642.814 2.505l-7.902 8.359a1.5 1.5 0 0 0-.397 1.223l1.48 11.407c.153 1.177-1.058 2.057-2.131 1.548l-10.391-4.933a1.5 1.5 0 0 0-1.287 0l-10.39 4.933c-1.073.51-2.284-.37-2.131-1.548l1.48-11.407a1.5 1.5 0 0 0-.398-1.223L4.015 20.89c-.816-.863-.353-2.286.814-2.505l11.306-2.117a1.5 1.5 0 0 0 1.04-.756l5.508-10.098Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n      </svg></div>\n    <div class=\\\\\"arco-rate-character-right\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-star-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n        <path d=\\\\\"M22.683 5.415c.568-1.043 2.065-1.043 2.634 0l5.507 10.098a1.5 1.5 0 0 0 1.04.756l11.306 2.117c1.168.219 1.63 1.642.814 2.505l-7.902 8.359a1.5 1.5 0 0 0-.397 1.223l1.48 11.407c.153 1.177-1.058 2.057-2.131 1.548l-10.391-4.933a1.5 1.5 0 0 0-1.287 0l-10.39 4.933c-1.073.51-2.284-.37-2.131-1.548l1.48-11.407a1.5 1.5 0 0 0-.398-1.223L4.015 20.89c-.816-.863-.353-2.286.814-2.505l11.306-2.117a1.5 1.5 0 0 0 1.04-.756l5.508-10.098Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n      </svg></div>\n  </div>\n</div>\"\n`;\n\nexports[`<rate> demo: render [grading] correctly 1`] = `\n\"<div class=\\\\\"arco-rate\\\\\">\n  <div class=\\\\\"arco-rate-character\\\\\" role=\\\\\"radio\\\\\" aria-checked=\\\\\"false\\\\\" aria-setsize=\\\\\"5\\\\\" aria-posinset=\\\\\"1\\\\\">\n    <div class=\\\\\"arco-rate-character-left\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-face-frown-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n        <path fill-rule=\\\\\"evenodd\\\\\" clip-rule=\\\\\"evenodd\\\\\" d=\\\\\"M24 44c11.046 0 20-8.954 20-20S35.046 4 24 4 4 12.954 4 24s8.954 20 20 20Zm7.322-26.873a2.625 2.625 0 1 1 0 5.25 2.625 2.625 0 0 1 0-5.25Zm-14.646 0a2.625 2.625 0 1 1 0 5.25 2.625 2.625 0 0 1 0-5.25ZM31.68 32.88a1.91 1.91 0 0 1-2.694-.176 6.66 6.66 0 0 0-5.026-2.28c-1.918 0-3.701.81-4.962 2.207a1.91 1.91 0 0 1-2.834-2.559 10.476 10.476 0 0 1 7.796-3.465c3.063 0 5.916 1.321 7.896 3.58a1.909 1.909 0 0 1-.176 2.693Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n      </svg></div>\n    <div class=\\\\\"arco-rate-character-right\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-face-frown-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n        <path fill-rule=\\\\\"evenodd\\\\\" clip-rule=\\\\\"evenodd\\\\\" d=\\\\\"M24 44c11.046 0 20-8.954 20-20S35.046 4 24 4 4 12.954 4 24s8.954 20 20 20Zm7.322-26.873a2.625 2.625 0 1 1 0 5.25 2.625 2.625 0 0 1 0-5.25Zm-14.646 0a2.625 2.625 0 1 1 0 5.25 2.625 2.625 0 0 1 0-5.25ZM31.68 32.88a1.91 1.91 0 0 1-2.694-.176 6.66 6.66 0 0 0-5.026-2.28c-1.918 0-3.701.81-4.962 2.207a1.91 1.91 0 0 1-2.834-2.559 10.476 10.476 0 0 1 7.796-3.465c3.063 0 5.916 1.321 7.896 3.58a1.909 1.909 0 0 1-.176 2.693Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n      </svg></div>\n  </div>\n  <div class=\\\\\"arco-rate-character\\\\\" role=\\\\\"radio\\\\\" aria-checked=\\\\\"false\\\\\" aria-setsize=\\\\\"5\\\\\" aria-posinset=\\\\\"2\\\\\">\n    <div class=\\\\\"arco-rate-character-left\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-face-meh-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n        <path fill-rule=\\\\\"evenodd\\\\\" clip-rule=\\\\\"evenodd\\\\\" d=\\\\\"M24 44c11.046 0 20-8.954 20-20S35.046 4 24 4 4 12.954 4 24s8.954 20 20 20Zm7.321-26.873a2.625 2.625 0 1 1 0 5.25 2.625 2.625 0 0 1 0-5.25Zm-14.646 0a2.625 2.625 0 1 1 0 5.25 2.625 2.625 0 0 1 0-5.25ZM15.999 30a2 2 0 0 1 2-2h12a2 2 0 1 1 0 4H18a2 2 0 0 1-2-2Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n      </svg></div>\n    <div class=\\\\\"arco-rate-character-right\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-face-meh-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n        <path fill-rule=\\\\\"evenodd\\\\\" clip-rule=\\\\\"evenodd\\\\\" d=\\\\\"M24 44c11.046 0 20-8.954 20-20S35.046 4 24 4 4 12.954 4 24s8.954 20 20 20Zm7.321-26.873a2.625 2.625 0 1 1 0 5.25 2.625 2.625 0 0 1 0-5.25Zm-14.646 0a2.625 2.625 0 1 1 0 5.25 2.625 2.625 0 0 1 0-5.25ZM15.999 30a2 2 0 0 1 2-2h12a2 2 0 1 1 0 4H18a2 2 0 0 1-2-2Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n      </svg></div>\n  </div>\n  <div class=\\\\\"arco-rate-character\\\\\" role=\\\\\"radio\\\\\" aria-checked=\\\\\"false\\\\\" aria-setsize=\\\\\"5\\\\\" aria-posinset=\\\\\"3\\\\\">\n    <div class=\\\\\"arco-rate-character-left\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-face-meh-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n        <path fill-rule=\\\\\"evenodd\\\\\" clip-rule=\\\\\"evenodd\\\\\" d=\\\\\"M24 44c11.046 0 20-8.954 20-20S35.046 4 24 4 4 12.954 4 24s8.954 20 20 20Zm7.321-26.873a2.625 2.625 0 1 1 0 5.25 2.625 2.625 0 0 1 0-5.25Zm-14.646 0a2.625 2.625 0 1 1 0 5.25 2.625 2.625 0 0 1 0-5.25ZM15.999 30a2 2 0 0 1 2-2h12a2 2 0 1 1 0 4H18a2 2 0 0 1-2-2Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n      </svg></div>\n    <div class=\\\\\"arco-rate-character-right\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-face-meh-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n        <path fill-rule=\\\\\"evenodd\\\\\" clip-rule=\\\\\"evenodd\\\\\" d=\\\\\"M24 44c11.046 0 20-8.954 20-20S35.046 4 24 4 4 12.954 4 24s8.954 20 20 20Zm7.321-26.873a2.625 2.625 0 1 1 0 5.25 2.625 2.625 0 0 1 0-5.25Zm-14.646 0a2.625 2.625 0 1 1 0 5.25 2.625 2.625 0 0 1 0-5.25ZM15.999 30a2 2 0 0 1 2-2h12a2 2 0 1 1 0 4H18a2 2 0 0 1-2-2Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n      </svg></div>\n  </div>\n  <div class=\\\\\"arco-rate-character\\\\\" role=\\\\\"radio\\\\\" aria-checked=\\\\\"false\\\\\" aria-setsize=\\\\\"5\\\\\" aria-posinset=\\\\\"4\\\\\">\n    <div class=\\\\\"arco-rate-character-left\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-face-meh-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n        <path fill-rule=\\\\\"evenodd\\\\\" clip-rule=\\\\\"evenodd\\\\\" d=\\\\\"M24 44c11.046 0 20-8.954 20-20S35.046 4 24 4 4 12.954 4 24s8.954 20 20 20Zm7.321-26.873a2.625 2.625 0 1 1 0 5.25 2.625 2.625 0 0 1 0-5.25Zm-14.646 0a2.625 2.625 0 1 1 0 5.25 2.625 2.625 0 0 1 0-5.25ZM15.999 30a2 2 0 0 1 2-2h12a2 2 0 1 1 0 4H18a2 2 0 0 1-2-2Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n      </svg></div>\n    <div class=\\\\\"arco-rate-character-right\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-face-meh-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n        <path fill-rule=\\\\\"evenodd\\\\\" clip-rule=\\\\\"evenodd\\\\\" d=\\\\\"M24 44c11.046 0 20-8.954 20-20S35.046 4 24 4 4 12.954 4 24s8.954 20 20 20Zm7.321-26.873a2.625 2.625 0 1 1 0 5.25 2.625 2.625 0 0 1 0-5.25Zm-14.646 0a2.625 2.625 0 1 1 0 5.25 2.625 2.625 0 0 1 0-5.25ZM15.999 30a2 2 0 0 1 2-2h12a2 2 0 1 1 0 4H18a2 2 0 0 1-2-2Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n      </svg></div>\n  </div>\n  <div class=\\\\\"arco-rate-character\\\\\" role=\\\\\"radio\\\\\" aria-checked=\\\\\"false\\\\\" aria-setsize=\\\\\"5\\\\\" aria-posinset=\\\\\"5\\\\\">\n    <div class=\\\\\"arco-rate-character-left\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-face-meh-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n        <path fill-rule=\\\\\"evenodd\\\\\" clip-rule=\\\\\"evenodd\\\\\" d=\\\\\"M24 44c11.046 0 20-8.954 20-20S35.046 4 24 4 4 12.954 4 24s8.954 20 20 20Zm7.321-26.873a2.625 2.625 0 1 1 0 5.25 2.625 2.625 0 0 1 0-5.25Zm-14.646 0a2.625 2.625 0 1 1 0 5.25 2.625 2.625 0 0 1 0-5.25ZM15.999 30a2 2 0 0 1 2-2h12a2 2 0 1 1 0 4H18a2 2 0 0 1-2-2Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n      </svg></div>\n    <div class=\\\\\"arco-rate-character-right\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-face-meh-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n        <path fill-rule=\\\\\"evenodd\\\\\" clip-rule=\\\\\"evenodd\\\\\" d=\\\\\"M24 44c11.046 0 20-8.954 20-20S35.046 4 24 4 4 12.954 4 24s8.954 20 20 20Zm7.321-26.873a2.625 2.625 0 1 1 0 5.25 2.625 2.625 0 0 1 0-5.25Zm-14.646 0a2.625 2.625 0 1 1 0 5.25 2.625 2.625 0 0 1 0-5.25ZM15.999 30a2 2 0 0 1 2-2h12a2 2 0 1 1 0 4H18a2 2 0 0 1-2-2Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n      </svg></div>\n  </div>\n</div>\"\n`;\n\nexports[`<rate> demo: render [half] correctly 1`] = `\n\"<div class=\\\\\"arco-rate\\\\\">\n  <div class=\\\\\"arco-rate-character arco-rate-character-full\\\\\">\n    <div class=\\\\\"arco-rate-character-left\\\\\" role=\\\\\"radio\\\\\" aria-checked=\\\\\"true\\\\\" aria-setsize=\\\\\"5\\\\\" aria-posinset=\\\\\"0.5\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-star-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n        <path d=\\\\\"M22.683 5.415c.568-1.043 2.065-1.043 2.634 0l5.507 10.098a1.5 1.5 0 0 0 1.04.756l11.306 2.117c1.168.219 1.63 1.642.814 2.505l-7.902 8.359a1.5 1.5 0 0 0-.397 1.223l1.48 11.407c.153 1.177-1.058 2.057-2.131 1.548l-10.391-4.933a1.5 1.5 0 0 0-1.287 0l-10.39 4.933c-1.073.51-2.284-.37-2.131-1.548l1.48-11.407a1.5 1.5 0 0 0-.398-1.223L4.015 20.89c-.816-.863-.353-2.286.814-2.505l11.306-2.117a1.5 1.5 0 0 0 1.04-.756l5.508-10.098Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n      </svg></div>\n    <div class=\\\\\"arco-rate-character-right\\\\\" role=\\\\\"radio\\\\\" aria-checked=\\\\\"true\\\\\" aria-setsize=\\\\\"5\\\\\" aria-posinset=\\\\\"1\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-star-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n        <path d=\\\\\"M22.683 5.415c.568-1.043 2.065-1.043 2.634 0l5.507 10.098a1.5 1.5 0 0 0 1.04.756l11.306 2.117c1.168.219 1.63 1.642.814 2.505l-7.902 8.359a1.5 1.5 0 0 0-.397 1.223l1.48 11.407c.153 1.177-1.058 2.057-2.131 1.548l-10.391-4.933a1.5 1.5 0 0 0-1.287 0l-10.39 4.933c-1.073.51-2.284-.37-2.131-1.548l1.48-11.407a1.5 1.5 0 0 0-.398-1.223L4.015 20.89c-.816-.863-.353-2.286.814-2.505l11.306-2.117a1.5 1.5 0 0 0 1.04-.756l5.508-10.098Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n      </svg></div>\n  </div>\n  <div class=\\\\\"arco-rate-character arco-rate-character-full\\\\\">\n    <div class=\\\\\"arco-rate-character-left\\\\\" role=\\\\\"radio\\\\\" aria-checked=\\\\\"true\\\\\" aria-setsize=\\\\\"5\\\\\" aria-posinset=\\\\\"1.5\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-star-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n        <path d=\\\\\"M22.683 5.415c.568-1.043 2.065-1.043 2.634 0l5.507 10.098a1.5 1.5 0 0 0 1.04.756l11.306 2.117c1.168.219 1.63 1.642.814 2.505l-7.902 8.359a1.5 1.5 0 0 0-.397 1.223l1.48 11.407c.153 1.177-1.058 2.057-2.131 1.548l-10.391-4.933a1.5 1.5 0 0 0-1.287 0l-10.39 4.933c-1.073.51-2.284-.37-2.131-1.548l1.48-11.407a1.5 1.5 0 0 0-.398-1.223L4.015 20.89c-.816-.863-.353-2.286.814-2.505l11.306-2.117a1.5 1.5 0 0 0 1.04-.756l5.508-10.098Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n      </svg></div>\n    <div class=\\\\\"arco-rate-character-right\\\\\" role=\\\\\"radio\\\\\" aria-checked=\\\\\"true\\\\\" aria-setsize=\\\\\"5\\\\\" aria-posinset=\\\\\"2\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-star-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n        <path d=\\\\\"M22.683 5.415c.568-1.043 2.065-1.043 2.634 0l5.507 10.098a1.5 1.5 0 0 0 1.04.756l11.306 2.117c1.168.219 1.63 1.642.814 2.505l-7.902 8.359a1.5 1.5 0 0 0-.397 1.223l1.48 11.407c.153 1.177-1.058 2.057-2.131 1.548l-10.391-4.933a1.5 1.5 0 0 0-1.287 0l-10.39 4.933c-1.073.51-2.284-.37-2.131-1.548l1.48-11.407a1.5 1.5 0 0 0-.398-1.223L4.015 20.89c-.816-.863-.353-2.286.814-2.505l11.306-2.117a1.5 1.5 0 0 0 1.04-.756l5.508-10.098Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n      </svg></div>\n  </div>\n  <div class=\\\\\"arco-rate-character arco-rate-character-half\\\\\">\n    <div class=\\\\\"arco-rate-character-left\\\\\" role=\\\\\"radio\\\\\" aria-checked=\\\\\"true\\\\\" aria-setsize=\\\\\"5\\\\\" aria-posinset=\\\\\"2.5\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-star-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n        <path d=\\\\\"M22.683 5.415c.568-1.043 2.065-1.043 2.634 0l5.507 10.098a1.5 1.5 0 0 0 1.04.756l11.306 2.117c1.168.219 1.63 1.642.814 2.505l-7.902 8.359a1.5 1.5 0 0 0-.397 1.223l1.48 11.407c.153 1.177-1.058 2.057-2.131 1.548l-10.391-4.933a1.5 1.5 0 0 0-1.287 0l-10.39 4.933c-1.073.51-2.284-.37-2.131-1.548l1.48-11.407a1.5 1.5 0 0 0-.398-1.223L4.015 20.89c-.816-.863-.353-2.286.814-2.505l11.306-2.117a1.5 1.5 0 0 0 1.04-.756l5.508-10.098Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n      </svg></div>\n    <div class=\\\\\"arco-rate-character-right\\\\\" role=\\\\\"radio\\\\\" aria-checked=\\\\\"false\\\\\" aria-setsize=\\\\\"5\\\\\" aria-posinset=\\\\\"3\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-star-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n        <path d=\\\\\"M22.683 5.415c.568-1.043 2.065-1.043 2.634 0l5.507 10.098a1.5 1.5 0 0 0 1.04.756l11.306 2.117c1.168.219 1.63 1.642.814 2.505l-7.902 8.359a1.5 1.5 0 0 0-.397 1.223l1.48 11.407c.153 1.177-1.058 2.057-2.131 1.548l-10.391-4.933a1.5 1.5 0 0 0-1.287 0l-10.39 4.933c-1.073.51-2.284-.37-2.131-1.548l1.48-11.407a1.5 1.5 0 0 0-.398-1.223L4.015 20.89c-.816-.863-.353-2.286.814-2.505l11.306-2.117a1.5 1.5 0 0 0 1.04-.756l5.508-10.098Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n      </svg></div>\n  </div>\n  <div class=\\\\\"arco-rate-character\\\\\">\n    <div class=\\\\\"arco-rate-character-left\\\\\" role=\\\\\"radio\\\\\" aria-checked=\\\\\"false\\\\\" aria-setsize=\\\\\"5\\\\\" aria-posinset=\\\\\"3.5\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-star-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n        <path d=\\\\\"M22.683 5.415c.568-1.043 2.065-1.043 2.634 0l5.507 10.098a1.5 1.5 0 0 0 1.04.756l11.306 2.117c1.168.219 1.63 1.642.814 2.505l-7.902 8.359a1.5 1.5 0 0 0-.397 1.223l1.48 11.407c.153 1.177-1.058 2.057-2.131 1.548l-10.391-4.933a1.5 1.5 0 0 0-1.287 0l-10.39 4.933c-1.073.51-2.284-.37-2.131-1.548l1.48-11.407a1.5 1.5 0 0 0-.398-1.223L4.015 20.89c-.816-.863-.353-2.286.814-2.505l11.306-2.117a1.5 1.5 0 0 0 1.04-.756l5.508-10.098Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n      </svg></div>\n    <div class=\\\\\"arco-rate-character-right\\\\\" role=\\\\\"radio\\\\\" aria-checked=\\\\\"false\\\\\" aria-setsize=\\\\\"5\\\\\" aria-posinset=\\\\\"4\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-star-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n        <path d=\\\\\"M22.683 5.415c.568-1.043 2.065-1.043 2.634 0l5.507 10.098a1.5 1.5 0 0 0 1.04.756l11.306 2.117c1.168.219 1.63 1.642.814 2.505l-7.902 8.359a1.5 1.5 0 0 0-.397 1.223l1.48 11.407c.153 1.177-1.058 2.057-2.131 1.548l-10.391-4.933a1.5 1.5 0 0 0-1.287 0l-10.39 4.933c-1.073.51-2.284-.37-2.131-1.548l1.48-11.407a1.5 1.5 0 0 0-.398-1.223L4.015 20.89c-.816-.863-.353-2.286.814-2.505l11.306-2.117a1.5 1.5 0 0 0 1.04-.756l5.508-10.098Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n      </svg></div>\n  </div>\n  <div class=\\\\\"arco-rate-character\\\\\">\n    <div class=\\\\\"arco-rate-character-left\\\\\" role=\\\\\"radio\\\\\" aria-checked=\\\\\"false\\\\\" aria-setsize=\\\\\"5\\\\\" aria-posinset=\\\\\"4.5\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-star-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n        <path d=\\\\\"M22.683 5.415c.568-1.043 2.065-1.043 2.634 0l5.507 10.098a1.5 1.5 0 0 0 1.04.756l11.306 2.117c1.168.219 1.63 1.642.814 2.505l-7.902 8.359a1.5 1.5 0 0 0-.397 1.223l1.48 11.407c.153 1.177-1.058 2.057-2.131 1.548l-10.391-4.933a1.5 1.5 0 0 0-1.287 0l-10.39 4.933c-1.073.51-2.284-.37-2.131-1.548l1.48-11.407a1.5 1.5 0 0 0-.398-1.223L4.015 20.89c-.816-.863-.353-2.286.814-2.505l11.306-2.117a1.5 1.5 0 0 0 1.04-.756l5.508-10.098Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n      </svg></div>\n    <div class=\\\\\"arco-rate-character-right\\\\\" role=\\\\\"radio\\\\\" aria-checked=\\\\\"false\\\\\" aria-setsize=\\\\\"5\\\\\" aria-posinset=\\\\\"5\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-star-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n        <path d=\\\\\"M22.683 5.415c.568-1.043 2.065-1.043 2.634 0l5.507 10.098a1.5 1.5 0 0 0 1.04.756l11.306 2.117c1.168.219 1.63 1.642.814 2.505l-7.902 8.359a1.5 1.5 0 0 0-.397 1.223l1.48 11.407c.153 1.177-1.058 2.057-2.131 1.548l-10.391-4.933a1.5 1.5 0 0 0-1.287 0l-10.39 4.933c-1.073.51-2.284-.37-2.131-1.548l1.48-11.407a1.5 1.5 0 0 0-.398-1.223L4.015 20.89c-.816-.863-.353-2.286.814-2.505l11.306-2.117a1.5 1.5 0 0 0 1.04-.756l5.508-10.098Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n      </svg></div>\n  </div>\n</div>\"\n`;\n\nexports[`<rate> demo: render [readonly] correctly 1`] = `\n\"<div class=\\\\\"arco-rate arco-rate-readonly\\\\\">\n  <div class=\\\\\"arco-rate-character arco-rate-character-full\\\\\" role=\\\\\"radio\\\\\" aria-checked=\\\\\"true\\\\\" aria-setsize=\\\\\"5\\\\\" aria-posinset=\\\\\"1\\\\\">\n    <div class=\\\\\"arco-rate-character-left\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-star-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n        <path d=\\\\\"M22.683 5.415c.568-1.043 2.065-1.043 2.634 0l5.507 10.098a1.5 1.5 0 0 0 1.04.756l11.306 2.117c1.168.219 1.63 1.642.814 2.505l-7.902 8.359a1.5 1.5 0 0 0-.397 1.223l1.48 11.407c.153 1.177-1.058 2.057-2.131 1.548l-10.391-4.933a1.5 1.5 0 0 0-1.287 0l-10.39 4.933c-1.073.51-2.284-.37-2.131-1.548l1.48-11.407a1.5 1.5 0 0 0-.398-1.223L4.015 20.89c-.816-.863-.353-2.286.814-2.505l11.306-2.117a1.5 1.5 0 0 0 1.04-.756l5.508-10.098Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n      </svg></div>\n    <div class=\\\\\"arco-rate-character-right\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-star-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n        <path d=\\\\\"M22.683 5.415c.568-1.043 2.065-1.043 2.634 0l5.507 10.098a1.5 1.5 0 0 0 1.04.756l11.306 2.117c1.168.219 1.63 1.642.814 2.505l-7.902 8.359a1.5 1.5 0 0 0-.397 1.223l1.48 11.407c.153 1.177-1.058 2.057-2.131 1.548l-10.391-4.933a1.5 1.5 0 0 0-1.287 0l-10.39 4.933c-1.073.51-2.284-.37-2.131-1.548l1.48-11.407a1.5 1.5 0 0 0-.398-1.223L4.015 20.89c-.816-.863-.353-2.286.814-2.505l11.306-2.117a1.5 1.5 0 0 0 1.04-.756l5.508-10.098Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n      </svg></div>\n  </div>\n  <div class=\\\\\"arco-rate-character arco-rate-character-full\\\\\" role=\\\\\"radio\\\\\" aria-checked=\\\\\"true\\\\\" aria-setsize=\\\\\"5\\\\\" aria-posinset=\\\\\"2\\\\\">\n    <div class=\\\\\"arco-rate-character-left\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-star-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n        <path d=\\\\\"M22.683 5.415c.568-1.043 2.065-1.043 2.634 0l5.507 10.098a1.5 1.5 0 0 0 1.04.756l11.306 2.117c1.168.219 1.63 1.642.814 2.505l-7.902 8.359a1.5 1.5 0 0 0-.397 1.223l1.48 11.407c.153 1.177-1.058 2.057-2.131 1.548l-10.391-4.933a1.5 1.5 0 0 0-1.287 0l-10.39 4.933c-1.073.51-2.284-.37-2.131-1.548l1.48-11.407a1.5 1.5 0 0 0-.398-1.223L4.015 20.89c-.816-.863-.353-2.286.814-2.505l11.306-2.117a1.5 1.5 0 0 0 1.04-.756l5.508-10.098Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n      </svg></div>\n    <div class=\\\\\"arco-rate-character-right\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-star-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n        <path d=\\\\\"M22.683 5.415c.568-1.043 2.065-1.043 2.634 0l5.507 10.098a1.5 1.5 0 0 0 1.04.756l11.306 2.117c1.168.219 1.63 1.642.814 2.505l-7.902 8.359a1.5 1.5 0 0 0-.397 1.223l1.48 11.407c.153 1.177-1.058 2.057-2.131 1.548l-10.391-4.933a1.5 1.5 0 0 0-1.287 0l-10.39 4.933c-1.073.51-2.284-.37-2.131-1.548l1.48-11.407a1.5 1.5 0 0 0-.398-1.223L4.015 20.89c-.816-.863-.353-2.286.814-2.505l11.306-2.117a1.5 1.5 0 0 0 1.04-.756l5.508-10.098Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n      </svg></div>\n  </div>\n  <div class=\\\\\"arco-rate-character arco-rate-character-full\\\\\" role=\\\\\"radio\\\\\" aria-checked=\\\\\"true\\\\\" aria-setsize=\\\\\"5\\\\\" aria-posinset=\\\\\"3\\\\\">\n    <div class=\\\\\"arco-rate-character-left\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-star-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n        <path d=\\\\\"M22.683 5.415c.568-1.043 2.065-1.043 2.634 0l5.507 10.098a1.5 1.5 0 0 0 1.04.756l11.306 2.117c1.168.219 1.63 1.642.814 2.505l-7.902 8.359a1.5 1.5 0 0 0-.397 1.223l1.48 11.407c.153 1.177-1.058 2.057-2.131 1.548l-10.391-4.933a1.5 1.5 0 0 0-1.287 0l-10.39 4.933c-1.073.51-2.284-.37-2.131-1.548l1.48-11.407a1.5 1.5 0 0 0-.398-1.223L4.015 20.89c-.816-.863-.353-2.286.814-2.505l11.306-2.117a1.5 1.5 0 0 0 1.04-.756l5.508-10.098Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n      </svg></div>\n    <div class=\\\\\"arco-rate-character-right\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-star-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n        <path d=\\\\\"M22.683 5.415c.568-1.043 2.065-1.043 2.634 0l5.507 10.098a1.5 1.5 0 0 0 1.04.756l11.306 2.117c1.168.219 1.63 1.642.814 2.505l-7.902 8.359a1.5 1.5 0 0 0-.397 1.223l1.48 11.407c.153 1.177-1.058 2.057-2.131 1.548l-10.391-4.933a1.5 1.5 0 0 0-1.287 0l-10.39 4.933c-1.073.51-2.284-.37-2.131-1.548l1.48-11.407a1.5 1.5 0 0 0-.398-1.223L4.015 20.89c-.816-.863-.353-2.286.814-2.505l11.306-2.117a1.5 1.5 0 0 0 1.04-.756l5.508-10.098Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n      </svg></div>\n  </div>\n  <div class=\\\\\"arco-rate-character arco-rate-character-full\\\\\" role=\\\\\"radio\\\\\" aria-checked=\\\\\"true\\\\\" aria-setsize=\\\\\"5\\\\\" aria-posinset=\\\\\"4\\\\\">\n    <div class=\\\\\"arco-rate-character-left\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-star-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n        <path d=\\\\\"M22.683 5.415c.568-1.043 2.065-1.043 2.634 0l5.507 10.098a1.5 1.5 0 0 0 1.04.756l11.306 2.117c1.168.219 1.63 1.642.814 2.505l-7.902 8.359a1.5 1.5 0 0 0-.397 1.223l1.48 11.407c.153 1.177-1.058 2.057-2.131 1.548l-10.391-4.933a1.5 1.5 0 0 0-1.287 0l-10.39 4.933c-1.073.51-2.284-.37-2.131-1.548l1.48-11.407a1.5 1.5 0 0 0-.398-1.223L4.015 20.89c-.816-.863-.353-2.286.814-2.505l11.306-2.117a1.5 1.5 0 0 0 1.04-.756l5.508-10.098Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n      </svg></div>\n    <div class=\\\\\"arco-rate-character-right\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-star-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n        <path d=\\\\\"M22.683 5.415c.568-1.043 2.065-1.043 2.634 0l5.507 10.098a1.5 1.5 0 0 0 1.04.756l11.306 2.117c1.168.219 1.63 1.642.814 2.505l-7.902 8.359a1.5 1.5 0 0 0-.397 1.223l1.48 11.407c.153 1.177-1.058 2.057-2.131 1.548l-10.391-4.933a1.5 1.5 0 0 0-1.287 0l-10.39 4.933c-1.073.51-2.284-.37-2.131-1.548l1.48-11.407a1.5 1.5 0 0 0-.398-1.223L4.015 20.89c-.816-.863-.353-2.286.814-2.505l11.306-2.117a1.5 1.5 0 0 0 1.04-.756l5.508-10.098Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n      </svg></div>\n  </div>\n  <div class=\\\\\"arco-rate-character\\\\\" role=\\\\\"radio\\\\\" aria-checked=\\\\\"false\\\\\" aria-setsize=\\\\\"5\\\\\" aria-posinset=\\\\\"5\\\\\">\n    <div class=\\\\\"arco-rate-character-left\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-star-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n        <path d=\\\\\"M22.683 5.415c.568-1.043 2.065-1.043 2.634 0l5.507 10.098a1.5 1.5 0 0 0 1.04.756l11.306 2.117c1.168.219 1.63 1.642.814 2.505l-7.902 8.359a1.5 1.5 0 0 0-.397 1.223l1.48 11.407c.153 1.177-1.058 2.057-2.131 1.548l-10.391-4.933a1.5 1.5 0 0 0-1.287 0l-10.39 4.933c-1.073.51-2.284-.37-2.131-1.548l1.48-11.407a1.5 1.5 0 0 0-.398-1.223L4.015 20.89c-.816-.863-.353-2.286.814-2.505l11.306-2.117a1.5 1.5 0 0 0 1.04-.756l5.508-10.098Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n      </svg></div>\n    <div class=\\\\\"arco-rate-character-right\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-star-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n        <path d=\\\\\"M22.683 5.415c.568-1.043 2.065-1.043 2.634 0l5.507 10.098a1.5 1.5 0 0 0 1.04.756l11.306 2.117c1.168.219 1.63 1.642.814 2.505l-7.902 8.359a1.5 1.5 0 0 0-.397 1.223l1.48 11.407c.153 1.177-1.058 2.057-2.131 1.548l-10.391-4.933a1.5 1.5 0 0 0-1.287 0l-10.39 4.933c-1.073.51-2.284-.37-2.131-1.548l1.48-11.407a1.5 1.5 0 0 0-.398-1.223L4.015 20.89c-.816-.863-.353-2.286.814-2.505l11.306-2.117a1.5 1.5 0 0 0 1.04-.756l5.508-10.098Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n      </svg></div>\n  </div>\n</div>\"\n`;\n"
  },
  {
    "path": "packages/web-vue/components/rate/__test__/demo.test.ts",
    "content": "import demoTest from '../../../scripts/demo-test';\n\ndemoTest('rate');\n"
  },
  {
    "path": "packages/web-vue/components/rate/__test__/index.test.ts",
    "content": "import { mount } from '@vue/test-utils';\nimport Rate from '../index';\n\ndescribe('Rate', () => {\n  test('should show selected score', async () => {\n    const wrapper = mount(Rate, {\n      props: {\n        allowClear: true,\n      },\n    });\n    const buttons = wrapper.findAll('.arco-rate-character-left');\n\n    await buttons[1].trigger('click');\n    expect(wrapper.findAll('.arco-rate-character-full')).toHaveLength(2);\n    await buttons[1].trigger('click');\n    expect(wrapper.findAll('.arco-rate-character-full')).toHaveLength(0);\n  });\n\n  test('should show selected score (half)', async () => {\n    const wrapper = mount(Rate, {\n      props: {\n        allowHalf: true,\n      },\n    });\n    const buttons = wrapper.findAll('.arco-rate-character-left');\n\n    await buttons[2].trigger('click');\n    expect(wrapper.findAll('.arco-rate-character-full')).toHaveLength(2);\n    expect(wrapper.findAll('.arco-rate-character-half')).toHaveLength(1);\n  });\n\n  test('should show hover score', async () => {\n    const wrapper = mount(Rate);\n    const buttons = wrapper.findAll('.arco-rate-character-left');\n\n    await buttons[2].trigger('mouseenter');\n    expect(wrapper.findAll('.arco-rate-character-full')).toHaveLength(3);\n    await wrapper.find('.arco-rate').trigger('mouseleave');\n    expect(wrapper.findAll('.arco-rate-character-full')).toHaveLength(0);\n  });\n});\n"
  },
  {
    "path": "packages/web-vue/components/rate/index.ts",
    "content": "import type { App } from 'vue';\nimport type { ArcoOptions } from '../_utils/types';\nimport { setGlobalConfig, getComponentPrefix } from '../_utils/global-config';\nimport _Rate from './rate';\n\nconst Rate = Object.assign(_Rate, {\n  install: (app: App, options?: ArcoOptions) => {\n    setGlobalConfig(app, options);\n    const componentPrefix = getComponentPrefix(options);\n\n    app.component(componentPrefix + _Rate.name, _Rate);\n  },\n});\n\nexport type RateInstance = InstanceType<typeof _Rate>;\n\nexport default Rate;\n"
  },
  {
    "path": "packages/web-vue/components/rate/rate.tsx",
    "content": "import {\n  computed,\n  defineComponent,\n  PropType,\n  ref,\n  toRef,\n  toRefs,\n  watch,\n} from 'vue';\nimport NP from 'number-precision';\nimport IconStarFill from '../icon/icon-star-fill';\nimport IconFaceMehFill from '../icon/icon-face-meh-fill';\nimport IconFaceSmileFill from '../icon/icon-face-smile-fill';\nimport IconFaceFrownFill from '../icon/icon-face-frown-fill';\nimport { getPrefixCls } from '../_utils/global-config';\nimport { useFormItem } from '../_hooks/use-form-item';\nimport { isNull, isObject, isString, isUndefined } from '../_utils/is';\n\nexport default defineComponent({\n  name: 'Rate',\n  props: {\n    /**\n     * @zh 评分的总数\n     * @en Total number of rate\n     */\n    count: {\n      type: Number,\n      default: 5,\n    },\n    /**\n     * @zh 绑定值\n     * @en Value\n     * @vModel\n     */\n    modelValue: {\n      type: Number,\n      default: undefined,\n    },\n    /**\n     * @zh 默认值\n     * @en Default Value\n     */\n    defaultValue: {\n      type: Number,\n      default: 0,\n    },\n    /**\n     * @zh 是否允许半选\n     * @en Whether to allow half selection\n     */\n    allowHalf: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 是否允许清除\n     * @en Whether to allow clear\n     */\n    allowClear: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 是否开启笑脸分级\n     * @en Whether to enable smile grading\n     */\n    grading: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 是否为只读状态\n     * @en Whether it is readonly\n     */\n    readonly: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 是否禁用\n     * @en Whether to disable\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 颜色\n     * @en Color\n     * @version 2.18.0\n     */\n    color: {\n      type: [String, Object] as PropType<string | Record<string, string>>,\n    },\n  },\n  emits: {\n    'update:modelValue': (value: number) => true,\n    /**\n     * @zh 值改变时触发\n     * @en Trigger when the value changes\n     * @property {number} value\n     */\n    'change': (value: number) => true,\n    /**\n     * @zh 鼠标移动到数值上时触发\n     * @en Triggered when the mouse moves over the value\n     * @property {number} value\n     */\n    'hoverChange': (value: number) => true,\n  },\n  /**\n   * @zh 符号\n   * @en Character\n   * @slot character\n   * @binding {number} index\n   */\n  setup(props, { emit, slots }) {\n    const { modelValue } = toRefs(props);\n    const prefixCls = getPrefixCls('rate');\n    const { mergedDisabled: _mergedDisabled, eventHandlers } = useFormItem({\n      disabled: toRef(props, 'disabled'),\n    });\n    const _value = ref(props.defaultValue);\n\n    const animation = ref(false);\n\n    watch(modelValue, (value) => {\n      if (isUndefined(value) || isNull(value)) {\n        _value.value = 0;\n      }\n    });\n\n    const hoverIndex = ref(0);\n\n    const computedValue = computed(() => props.modelValue ?? _value.value);\n\n    const displayIndex = computed(() => {\n      const fixedValue = props.allowHalf\n        ? NP.times(NP.round(NP.divide(computedValue.value, 0.5), 0), 0.5)\n        : Math.round(computedValue.value);\n\n      return hoverIndex.value || fixedValue;\n    });\n\n    const mergedDisabled = computed(\n      () => _mergedDisabled.value || props.readonly\n    );\n\n    const indexArray = computed<undefined[]>(() => [\n      ...Array(props.grading ? 5 : props.count),\n    ]);\n\n    const customColor = computed(() => {\n      if (isString(props.color)) {\n        return indexArray.value.map(() => props.color as string);\n      }\n      if (isObject(props.color)) {\n        const sortedKeys = Object.keys(props.color)\n          .map((key) => Number(key))\n          .sort((a, b) => b - a);\n        let threshold = sortedKeys.pop() ?? indexArray.value.length;\n        return indexArray.value.map((_, index) => {\n          if (index + 1 > threshold) {\n            threshold = sortedKeys.pop() ?? threshold;\n          }\n          return (props.color as Record<string, string>)[String(threshold)];\n        });\n      }\n      return undefined;\n    });\n\n    const resetHoverIndex = () => {\n      if (hoverIndex.value) {\n        hoverIndex.value = 0;\n        emit('hoverChange', 0);\n      }\n    };\n\n    const handleMouseEnter = (index: number, isHalf: boolean) => {\n      const newHoverIndex = isHalf && props.allowHalf ? index + 0.5 : index + 1;\n      if (newHoverIndex !== hoverIndex.value) {\n        hoverIndex.value = newHoverIndex;\n        emit('hoverChange', newHoverIndex);\n      }\n    };\n\n    const handleClick = (index: number, isHalf: boolean) => {\n      const newValue = isHalf && props.allowHalf ? index + 0.5 : index + 1;\n      animation.value = true;\n      if (newValue !== computedValue.value) {\n        _value.value = newValue;\n        emit('update:modelValue', newValue);\n        emit('change', newValue);\n        eventHandlers.value?.onChange?.();\n      } else if (props.allowClear) {\n        _value.value = 0;\n        emit('update:modelValue', 0);\n        emit('change', 0);\n        eventHandlers.value?.onChange?.();\n      }\n    };\n\n    const handleAnimationEnd = (index: number) => {\n      if (animation.value && index + 1 >= computedValue.value - 1) {\n        animation.value = false;\n      }\n    };\n\n    const renderGradingCharacter = (index: number, displayIndex: number) => {\n      if (index > displayIndex) {\n        return <IconFaceMehFill />;\n      }\n\n      if (displayIndex <= 2) {\n        return <IconFaceFrownFill />;\n      }\n      if (displayIndex <= 3) {\n        return <IconFaceMehFill />;\n      }\n      return <IconFaceSmileFill />;\n    };\n\n    const getAriaProps = (index: number, isHalf = false) => {\n      return {\n        'role': 'radio',\n        'aria-checked': index + (isHalf ? 0.5 : 1) <= computedValue.value,\n        'aria-setsize': indexArray.value.length,\n        'aria-posinset': index + (isHalf ? 0.5 : 1),\n      };\n    };\n\n    const renderElement = (index: number) => {\n      if (props.grading) {\n        return renderGradingCharacter(index, displayIndex.value);\n      }\n      if (slots.character) {\n        return slots.character({ index });\n      }\n      return <IconStarFill />;\n    };\n\n    // TODO: need to perf\n    const renderCharacter = (index: number) => {\n      const leftProps = mergedDisabled.value\n        ? {}\n        : {\n            onMouseenter: () => handleMouseEnter(index, true),\n            onClick: () => handleClick(index, true),\n          };\n      const rightProps = mergedDisabled.value\n        ? {}\n        : {\n            onMouseenter: () => handleMouseEnter(index, false),\n            onClick: () => handleClick(index, false),\n          };\n\n      const style = animation.value\n        ? { animationDelay: `${50 * index}ms` }\n        : undefined;\n\n      const parseDisplayIndex = Math.ceil(displayIndex.value) - 1;\n\n      const leftStyle =\n        customColor.value &&\n        props.allowHalf &&\n        index + 0.5 === displayIndex.value\n          ? { color: customColor.value[parseDisplayIndex] }\n          : undefined;\n      const rightStyle =\n        customColor.value && index + 1 <= displayIndex.value\n          ? { color: customColor.value[parseDisplayIndex] }\n          : undefined;\n\n      const cls = [\n        `${prefixCls}-character`,\n        {\n          [`${prefixCls}-character-half`]:\n            props.allowHalf && index + 0.5 === displayIndex.value,\n          [`${prefixCls}-character-full`]: index + 1 <= displayIndex.value,\n          [`${prefixCls}-character-scale`]:\n            animation.value && index + 1 < computedValue.value,\n        },\n      ];\n\n      return (\n        <div\n          class={cls}\n          style={style}\n          {...(!props.allowHalf ? getAriaProps(index) : undefined)}\n          onAnimationend={() => handleAnimationEnd(index)}\n        >\n          <div\n            class={`${prefixCls}-character-left`}\n            style={leftStyle}\n            {...leftProps}\n            {...(props.allowHalf ? getAriaProps(index, true) : undefined)}\n          >\n            {renderElement(index)}\n          </div>\n          <div\n            class={`${prefixCls}-character-right`}\n            style={rightStyle}\n            {...rightProps}\n            {...(props.allowHalf ? getAriaProps(index) : undefined)}\n          >\n            {renderElement(index)}\n          </div>\n        </div>\n      );\n    };\n\n    const cls = computed(() => [\n      prefixCls,\n      {\n        [`${prefixCls}-readonly`]: props.readonly,\n        [`${prefixCls}-disabled`]: _mergedDisabled.value,\n      },\n    ]);\n\n    return () => (\n      <div class={cls.value} onMouseleave={resetHoverIndex}>\n        {indexArray.value.map((_, index) => renderCharacter(index))}\n      </div>\n    );\n  },\n});\n"
  },
  {
    "path": "packages/web-vue/components/rate/style/index.less",
    "content": "@import './token.less';\n\n@rate-prefix-cls: ~'@{prefix}-rate';\n\n.@{rate-prefix-cls} {\n  display: inline-flex;\n  align-items: center;\n  min-height: @rate-min-height;\n  font-size: @rate-font-size;\n  line-height: 1;\n  user-select: none;\n\n  &-disabled {\n    cursor: not-allowed;\n  }\n\n  &-character {\n    position: relative;\n    color: @rate-color-bg_default;\n    transition: transform @transition-duration-2\n      @transition-timing-function-standard;\n\n    &:not(:last-child) {\n      margin-right: @rate-gap-size;\n    }\n\n    &-left,\n    &-right {\n      transition: inherit;\n\n      // float 消除 inline-block 导致的父元素被多撑开几个像素\n      > * {\n        float: left;\n      }\n    }\n\n    &-left {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 50%;\n      overflow: hidden;\n      white-space: nowrap;\n      opacity: 0;\n    }\n\n    &-scale {\n      animation: ~'@{prefix}-rate-scale' @transition-duration-4 @transition-timing-function-standard;\n    }\n\n    &-full &-right {\n      color: @rate-color-bg_active;\n    }\n\n    &-half &-left {\n      color: @rate-color-bg_active;\n      opacity: 1;\n    }\n\n    &-disabled {\n      cursor: not-allowed;\n    }\n  }\n\n  &:not(&-readonly):not(&-disabled) &-character {\n    cursor: pointer;\n\n    &:hover,\n    &:focus {\n      transform: scale(@rate-scale_active);\n    }\n  }\n}\n\n@keyframes ~'@{prefix}-rate-scale' {\n  0% {\n    transform: scale(1);\n  }\n\n  50% {\n    transform: scale(@rate-scale_active);\n  }\n\n  100% {\n    transform: scale(1);\n  }\n}\n"
  },
  {
    "path": "packages/web-vue/components/rate/style/index.ts",
    "content": "import '../../style/index.less';\nimport '../../tooltip/style';\nimport './index.less';\n"
  },
  {
    "path": "packages/web-vue/components/rate/style/token.less",
    "content": "@import '../../style/theme/index.less';\n\n/**********************************************\n * status: disabled / readonly\n **********************************************/\n@rate-min-height: @size-default;\n@rate-gap-size: @spacing-4;\n@rate-font-size: @font-size-title-3;\n@rate-scale_active: 1.2;\n\n@rate-color-bg_active: rgb(var(~'@{arco-cssvars-prefix}-gold-6'));\n@rate-color-bg_default: var(~'@{arco-cssvars-prefix}-color-fill-3');\n@rate-color-bg_hover: rgb(var(~'@{arco-cssvars-prefix}-gold-5'));\n"
  },
  {
    "path": "packages/web-vue/components/resize-box/README.en-US.md",
    "content": "```yaml\nmeta:\n  type: Component\n  category: Other\ntitle: ResizeBox\ndescription: Telescopic frame components.\n```\n\n*Auto translate by google.*\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/controlled.md\n\n@import ./__demo__/layout.md\n\n@import ./__demo__/custom-triggers.md\n\n## API\n\n\n### `<resize-box>` Props\n\n|Attribute|Description|Type|Default|\n|---|---|---|:---:|\n|width **(v-model)**|Width|`number`|`-`|\n|height **(v-model)**|Height|`number`|`-`|\n|component|The html tag of the telescopic box|`string`|`'div'`|\n|directions|Can be stretched side, there are up, down, left and right can be used|`('left' \\| 'right' \\| 'top' \\| 'bottom')[]`|`['right']`|\n### `<resize-box>` Events\n\n|Event Name|Description|Parameters|\n|---|---|---|\n|moving-start|Triggered when dragging starts|ev: `MouseEvent`|\n|moving|Triggered when dragging|size: `{ width: number; height: number; }`<br>ev: `MouseEvent`|\n|moving-end|Triggered when the drag ends|ev: `MouseEvent`|\n### `<resize-box>` Slots\n\n|Slot Name|Description|Parameters|\n|---|---|---|\n|resize-trigger|The contents of the resize pole|direction: `'left' \\| 'right' \\| 'top' \\| 'bottom'`|\n|resize-trigger-icon|Resize pole icon|direction: `'left' \\| 'right' \\| 'top' \\| 'bottom'`|\n\n\n"
  },
  {
    "path": "packages/web-vue/components/resize-box/README.zh-CN.md",
    "content": "```yaml\nmeta:\n  type: 组件\n  category: 其他\ntitle: 伸缩框 ResizeBox\ndescription: 伸缩框组件。\n```\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/controlled.md\n\n@import ./__demo__/layout.md\n\n@import ./__demo__/custom-triggers.md\n\n## API\n\n\n### `<resize-box>` Props\n\n|参数名|描述|类型|默认值|\n|---|---|---|:---:|\n|width **(v-model)**|宽度|`number`|`-`|\n|height **(v-model)**|高度|`number`|`-`|\n|component|伸缩框的 html 标签|`string`|`'div'`|\n|directions|可以进行伸缩的边，有上、下、左、右可以使用|`('left' \\| 'right' \\| 'top' \\| 'bottom')[]`|`['right']`|\n### `<resize-box>` Events\n\n|事件名|描述|参数|\n|---|---|---|\n|moving-start|拖拽开始时触发|ev: `MouseEvent`|\n|moving|拖拽时触发|size: `{ width: number; height: number; }`<br>ev: `MouseEvent`|\n|moving-end|拖拽结束时触发|ev: `MouseEvent`|\n### `<resize-box>` Slots\n\n|插槽名|描述|参数|\n|---|:---:|---|\n|resize-trigger|伸缩杆的内容|direction: `'left' \\| 'right' \\| 'top' \\| 'bottom'`|\n|resize-trigger-icon|伸缩杆的图标|direction: `'left' \\| 'right' \\| 'top' \\| 'bottom'`|\n\n\n"
  },
  {
    "path": "packages/web-vue/components/resize-box/TEMPLATE.md",
    "content": "## zh-CN\n```yaml\nmeta:\n  type: 组件\n  category: 其他\ntitle: 伸缩框 ResizeBox\ndescription: 伸缩框组件。\n```\n---\n## en-US\n```yaml\nmeta:\n  type: Component\n  category: Other\ntitle: ResizeBox\ndescription: Telescopic frame components.\n```\n---\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/controlled.md\n\n@import ./__demo__/layout.md\n\n@import ./__demo__/custom-triggers.md\n\n## API\n\n%%API(resize-box.vue)%%\n"
  },
  {
    "path": "packages/web-vue/components/resize-box/__demo__/basic.md",
    "content": "```yaml\ntitle:\n  zh-CN: 基本用法\n  en-US: Basic\n```\n\n## zh-CN\n\n`ResizeBox` 伸缩框组件的基础使用。通过设置 `directions`，可以指定四条边中的哪几条边可以进行伸缩。\n\n---\n\n## en-US\n\nBasic usage of `ResizeBox`. By setting `directions`, you can specify which of the four sides can be stretched.\n\n---\n\n```vue\n<template>\n  <div>\n    <a-resize-box\n      :directions=\"['right', 'bottom']\"\n      :style=\"{ width: '500px', minWidth: '100px', maxWidth: '100%', height: '200px', textAlign: 'center' }\"\n    >\n      <a-typography-paragraph>We are building the future of content discovery and creation.</a-typography-paragraph>\n      <a-divider />\n      <a-typography-paragraph>\n        ByteDance's content platforms enable people to enjoy content powered by AI technology. We\n        inform, entertain, and inspire people across language, culture and geography.\n      </a-typography-paragraph>\n      <a-divider>ByteDance</a-divider>\n      <a-typography-paragraph>Yiming Zhang is the founder and CEO of ByteDance.</a-typography-paragraph>\n    </a-resize-box>\n  </div>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/resize-box/__demo__/controlled.md",
    "content": "```yaml\ntitle:\n  zh-CN: 受控的高宽\n  en-US: two-way binding\n```\n\n## zh-CN\n\n`ResizeBox` 的 `width` 和 `height` 都支持 `v-model`。\n\n---\n\n## en-US\n\nBoth `width` and `height` of `ResizeBox` support `v-model`..\n\n---\n\n```vue\n<template>\n<div>\n  <a-resize-box\n    :directions=\"['right', 'bottom']\"\n    :style=\"{ minWidth: '100px', maxWidth: '100%', textAlign: 'center' }\"\n    v-model:width=\"width\"\n    v-model:height=\"height\"\n  >\n    <a-typography-paragraph>We are building the future of content discovery and creation.</a-typography-paragraph>\n    <a-divider />\n    <a-typography-paragraph>\n      ByteDance's content platforms enable people to enjoy content powered by AI technology. We\n      inform, entertain, and inspire people across language, culture and geography.\n    </a-typography-paragraph>\n    <a-divider>ByteDance</a-divider>\n    <a-typography-paragraph>Yiming Zhang is the founder and CEO of ByteDance.</a-typography-paragraph>\n  </a-resize-box>\n</div>\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n  setup() {\n    const width = ref(500);\n    const height = ref(200);\n    return {\n      width,\n      height,\n    };\n  }\n};\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/resize-box/__demo__/custom-triggers.md",
    "content": "```yaml\ntitle:\n  zh-CN: 定制伸缩杆内容\n  en-US: Customize Trigger\n```\n\n## zh-CN\n\n可通过插槽 `resize-trigger` 定制各个方向的伸缩杆的内容。\n\n---\n\n## en-US\n\nThe content of trigger in all directions can be customized through the slot `resize-trigger`.\n\n---\n\n```vue\n<template>\n  <a-resize-box\n    :directions=\"['right', 'bottom']\"\n    style=\"width: 500px; min-width: 100px; max-width: 100%; height: 200px; text-align: center;\"\n  >\n    <template #resize-trigger=\"{ direction }\">\n      <div\n        :class=\"[\n          `resizebox-demo`,\n          `resizebox-demo-${direction === 'right' ? 'vertical' : 'horizontal'}`\n        ]\"\n      >\n        <div class=\"resizebox-demo-line\"/>\n      </div>\n    </template>\n    <a-typography-paragraph>We are building the future of content discovery and creation.</a-typography-paragraph>\n    <a-divider />\n    <a-typography-paragraph>\n      ByteDance's content platforms enable people to enjoy content powered by AI technology. We\n      inform, entertain, and inspire people across language, culture and geography.\n    </a-typography-paragraph>\n    <a-divider>ByteDance</a-divider>\n    <a-typography-paragraph>Yiming Zhang is the founder and CEO of ByteDance.</a-typography-paragraph>\n  </a-resize-box>\n</template>\n\n<style scoped>\n  .resizebox-demo {\n    position: relative;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    height: 100%;\n    background-color: var(--color-bg-2);\n  }\n  .resizebox-demo::before,\n  .resizebox-demo::after {\n    width: 6px;\n    height: 6px;\n    border: 1px solid rgb(var(--arcoblue-6));\n    content: '';\n}\n  .resizebox-demo-line {\n    flex: 1;\n    background-color: rgb(var(--arcoblue-6));\n  }\n  .resizebox-demo-vertical {\n    flex-direction: column;\n  }\n  .resizebox-demo-vertical .resizebox-demo-line {\n    width: 1px;\n    height: 100%;\n  }\n  .resizebox-demo-horizontal .resizebox-demo-line {\n    height: 1px;\n  }\n</style>\n```\n"
  },
  {
    "path": "packages/web-vue/components/resize-box/__demo__/layout.md",
    "content": "```yaml\ntitle:\n  zh-CN: 在布局中使用\n  en-US: Use in Layout\n```\n\n## zh-CN\n\n[Layout](/react/components/ResizeBox) 组件中集成了 `ResizeBox` 组件，可以在 Layout 中使用可伸缩的侧边栏。\n\n---\n\n## en-US\n\nThe `ResizeBox` component is integrated in the [Layout](/react/components/ResizeBox) component, so a scalable sidebar can be used in the layout.\n\n---\n\n```vue\n<template>\n<div class=\"layout-demo\">\n  <a-layout>\n    <a-layout-header>Header</a-layout-header>\n    <a-layout>\n      <a-layout-sider :resize-directions=\"['right']\">\n        Sider\n      </a-layout-sider>\n      <a-layout-content>Content</a-layout-content>\n    </a-layout>\n    <a-layout-footer>Footer</a-layout-footer>\n  </a-layout>\n</div>\n</template>\n\n<style scoped>\n.layout-demo :deep(.arco-layout-header),\n.layout-demo :deep(.arco-layout-footer),\n.layout-demo :deep(.arco-layout-sider-children),\n.layout-demo :deep(.arco-layout-content) {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  color: var(--color-white);\n  font-size: 16px;\n  font-stretch: condensed;\n  text-align: center;\n}\n\n\n.layout-demo :deep(.arco-layout-header),\n.layout-demo :deep(.arco-layout-footer) {\n  height: 64px;\n  background-color: var(--color-primary-light-4);\n}\n\n.layout-demo :deep(.arco-layout-sider) {\n  width: 206px;\n  background-color: var(--color-primary-light-3);\n  min-width: 150px;\n  max-width: 500px;\n  height: 200px;\n}\n\n.layout-demo :deep(.arco-layout-content) {\n  background-color: rgb(var(--arcoblue-6));\n}\n</style>\n```\n"
  },
  {
    "path": "packages/web-vue/components/resize-box/__test__/__snapshots__/demo.test.ts.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`<resize-box> demo: render [basic] correctly 1`] = `\n\"<div>\n  <div class=\\\\\"arco-resizebox\\\\\" style=\\\\\"width: 500px; min-width: 100px; max-width: 100%; height: 200px; text-align: center;\\\\\">\n    <div class=\\\\\"arco-typography\\\\\">We are building the future of content discovery and creation.\n      <!---->\n      <!--v-if-->\n      <!--v-if-->\n      <!--v-if-->\n    </div>\n    <div role=\\\\\"separator\\\\\" class=\\\\\"arco-divider arco-divider-horizontal\\\\\">\n      <!---->\n    </div>\n    <div class=\\\\\"arco-typography\\\\\"> ByteDance's content platforms enable people to enjoy content powered by AI technology. We inform, entertain, and inspire people across language, culture and geography.\n      <!---->\n      <!--v-if-->\n      <!--v-if-->\n      <!--v-if-->\n    </div>\n    <div role=\\\\\"separator\\\\\" class=\\\\\"arco-divider arco-divider-horizontal arco-divider-with-text\\\\\"><span class=\\\\\"arco-divider-text arco-divider-text-center\\\\\">ByteDance</span></div>\n    <div class=\\\\\"arco-typography\\\\\">Yiming Zhang is the founder and CEO of ByteDance.\n      <!---->\n      <!--v-if-->\n      <!--v-if-->\n      <!--v-if-->\n    </div>\n    <div class=\\\\\"arco-resizebox-trigger arco-resizebox-trigger-vertical arco-resizebox-direction-right\\\\\">\n      <!-- @slot 自定义内容 -->\n      <div class=\\\\\"arco-resizebox-trigger-icon-wrapper\\\\\">\n        <!-- @slot 自定义 icon --><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-drag-dot-vertical arco-resizebox-trigger-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n          <path d=\\\\\"M17 8h2v2h-2V8ZM17 23h2v2h-2v-2ZM17 38h2v2h-2v-2ZM29 8h2v2h-2V8ZM29 23h2v2h-2v-2ZM29 38h2v2h-2v-2Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n          <path d=\\\\\"M17 8h2v2h-2V8ZM17 23h2v2h-2v-2ZM17 38h2v2h-2v-2ZM29 8h2v2h-2V8ZM29 23h2v2h-2v-2ZM29 38h2v2h-2v-2Z\\\\\"></path>\n        </svg>\n      </div>\n    </div>\n    <div class=\\\\\"arco-resizebox-trigger arco-resizebox-trigger-horizontal arco-resizebox-direction-bottom\\\\\">\n      <!-- @slot 自定义内容 -->\n      <div class=\\\\\"arco-resizebox-trigger-icon-wrapper\\\\\">\n        <!-- @slot 自定义 icon --><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-drag-dot arco-resizebox-trigger-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n          <path d=\\\\\"M40 17v2h-2v-2h2ZM25 17v2h-2v-2h2ZM10 17v2H8v-2h2ZM40 29v2h-2v-2h2ZM25 29v2h-2v-2h2ZM10 29v2H8v-2h2Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n          <path d=\\\\\"M40 17v2h-2v-2h2ZM25 17v2h-2v-2h2ZM10 17v2H8v-2h2ZM40 29v2h-2v-2h2ZM25 29v2h-2v-2h2ZM10 29v2H8v-2h2Z\\\\\"></path>\n        </svg>\n      </div>\n    </div>\n  </div>\n</div>\"\n`;\n\nexports[`<resize-box> demo: render [controlled] correctly 1`] = `\n\"<div>\n  <div class=\\\\\"arco-resizebox\\\\\" style=\\\\\"min-width: 100px; max-width: 100%; text-align: center; width: 500px; height: 200px;\\\\\">\n    <div class=\\\\\"arco-typography\\\\\">We are building the future of content discovery and creation.\n      <!---->\n      <!--v-if-->\n      <!--v-if-->\n      <!--v-if-->\n    </div>\n    <div role=\\\\\"separator\\\\\" class=\\\\\"arco-divider arco-divider-horizontal\\\\\">\n      <!---->\n    </div>\n    <div class=\\\\\"arco-typography\\\\\"> ByteDance's content platforms enable people to enjoy content powered by AI technology. We inform, entertain, and inspire people across language, culture and geography.\n      <!---->\n      <!--v-if-->\n      <!--v-if-->\n      <!--v-if-->\n    </div>\n    <div role=\\\\\"separator\\\\\" class=\\\\\"arco-divider arco-divider-horizontal arco-divider-with-text\\\\\"><span class=\\\\\"arco-divider-text arco-divider-text-center\\\\\">ByteDance</span></div>\n    <div class=\\\\\"arco-typography\\\\\">Yiming Zhang is the founder and CEO of ByteDance.\n      <!---->\n      <!--v-if-->\n      <!--v-if-->\n      <!--v-if-->\n    </div>\n    <div class=\\\\\"arco-resizebox-trigger arco-resizebox-trigger-vertical arco-resizebox-direction-right\\\\\">\n      <!-- @slot 自定义内容 -->\n      <div class=\\\\\"arco-resizebox-trigger-icon-wrapper\\\\\">\n        <!-- @slot 自定义 icon --><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-drag-dot-vertical arco-resizebox-trigger-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n          <path d=\\\\\"M17 8h2v2h-2V8ZM17 23h2v2h-2v-2ZM17 38h2v2h-2v-2ZM29 8h2v2h-2V8ZM29 23h2v2h-2v-2ZM29 38h2v2h-2v-2Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n          <path d=\\\\\"M17 8h2v2h-2V8ZM17 23h2v2h-2v-2ZM17 38h2v2h-2v-2ZM29 8h2v2h-2V8ZM29 23h2v2h-2v-2ZM29 38h2v2h-2v-2Z\\\\\"></path>\n        </svg>\n      </div>\n    </div>\n    <div class=\\\\\"arco-resizebox-trigger arco-resizebox-trigger-horizontal arco-resizebox-direction-bottom\\\\\">\n      <!-- @slot 自定义内容 -->\n      <div class=\\\\\"arco-resizebox-trigger-icon-wrapper\\\\\">\n        <!-- @slot 自定义 icon --><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-drag-dot arco-resizebox-trigger-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n          <path d=\\\\\"M40 17v2h-2v-2h2ZM25 17v2h-2v-2h2ZM10 17v2H8v-2h2ZM40 29v2h-2v-2h2ZM25 29v2h-2v-2h2ZM10 29v2H8v-2h2Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n          <path d=\\\\\"M40 17v2h-2v-2h2ZM25 17v2h-2v-2h2ZM10 17v2H8v-2h2ZM40 29v2h-2v-2h2ZM25 29v2h-2v-2h2ZM10 29v2H8v-2h2Z\\\\\"></path>\n        </svg>\n      </div>\n    </div>\n  </div>\n</div>\"\n`;\n\nexports[`<resize-box> demo: render [custom-triggers] correctly 1`] = `\n\"<div class=\\\\\"arco-resizebox\\\\\" style=\\\\\"width: 500px; min-width: 100px; max-width: 100%; height: 200px; text-align: center;\\\\\">\n  <div class=\\\\\"arco-typography\\\\\">We are building the future of content discovery and creation.\n    <!---->\n    <!--v-if-->\n    <!--v-if-->\n    <!--v-if-->\n  </div>\n  <div role=\\\\\"separator\\\\\" class=\\\\\"arco-divider arco-divider-horizontal\\\\\">\n    <!---->\n  </div>\n  <div class=\\\\\"arco-typography\\\\\"> ByteDance's content platforms enable people to enjoy content powered by AI technology. We inform, entertain, and inspire people across language, culture and geography.\n    <!---->\n    <!--v-if-->\n    <!--v-if-->\n    <!--v-if-->\n  </div>\n  <div role=\\\\\"separator\\\\\" class=\\\\\"arco-divider arco-divider-horizontal arco-divider-with-text\\\\\"><span class=\\\\\"arco-divider-text arco-divider-text-center\\\\\">ByteDance</span></div>\n  <div class=\\\\\"arco-typography\\\\\">Yiming Zhang is the founder and CEO of ByteDance.\n    <!---->\n    <!--v-if-->\n    <!--v-if-->\n    <!--v-if-->\n  </div>\n  <div class=\\\\\"arco-resizebox-trigger arco-resizebox-trigger-vertical arco-resizebox-direction-right\\\\\">\n    <!-- @slot 自定义内容 -->\n    <div class=\\\\\"resizebox-demo resizebox-demo-vertical\\\\\">\n      <div class=\\\\\"resizebox-demo-line\\\\\"></div>\n    </div>\n  </div>\n  <div class=\\\\\"arco-resizebox-trigger arco-resizebox-trigger-horizontal arco-resizebox-direction-bottom\\\\\">\n    <!-- @slot 自定义内容 -->\n    <div class=\\\\\"resizebox-demo resizebox-demo-horizontal\\\\\">\n      <div class=\\\\\"resizebox-demo-line\\\\\"></div>\n    </div>\n  </div>\n</div>\"\n`;\n\nexports[`<resize-box> demo: render [layout] correctly 1`] = `\n\"<div class=\\\\\"layout-demo\\\\\">\n  <section class=\\\\\"arco-layout\\\\\">\n    <header class=\\\\\"arco-layout-header\\\\\">Header</header>\n    <section class=\\\\\"arco-layout\\\\\">\n      <div class=\\\\\"arco-resizebox arco-layout-sider arco-layout-sider-light\\\\\" style=\\\\\"width: 200px;\\\\\">\n        <div class=\\\\\"arco-layout-sider-children\\\\\"> Sider </div>\n        <!--v-if-->\n        <div class=\\\\\"arco-resizebox-trigger arco-resizebox-trigger-vertical arco-resizebox-direction-right\\\\\">\n          <!-- @slot 自定义内容 -->\n          <div class=\\\\\"arco-resizebox-trigger-icon-wrapper\\\\\">\n            <!-- @slot 自定义 icon --><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-drag-dot-vertical arco-resizebox-trigger-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n              <path d=\\\\\"M17 8h2v2h-2V8ZM17 23h2v2h-2v-2ZM17 38h2v2h-2v-2ZM29 8h2v2h-2V8ZM29 23h2v2h-2v-2ZM29 38h2v2h-2v-2Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n              <path d=\\\\\"M17 8h2v2h-2V8ZM17 23h2v2h-2v-2ZM17 38h2v2h-2v-2ZM29 8h2v2h-2V8ZM29 23h2v2h-2v-2ZM29 38h2v2h-2v-2Z\\\\\"></path>\n            </svg>\n          </div>\n        </div>\n      </div>\n      <main class=\\\\\"arco-layout-content\\\\\">Content</main>\n    </section>\n    <footer class=\\\\\"arco-layout-footer\\\\\">Footer</footer>\n  </section>\n</div>\"\n`;\n"
  },
  {
    "path": "packages/web-vue/components/resize-box/__test__/demo.test.ts",
    "content": "import demoTest from '../../../scripts/demo-test';\n\ndemoTest('resize-box');\n"
  },
  {
    "path": "packages/web-vue/components/resize-box/__test__/index.test.tsx",
    "content": "import { mount } from '@vue/test-utils';\nimport ResizeBox from '..';\n\ndescribe('ResizeBox', () => {\n  // Simulate wrapper size\n  const wrapperElement = {\n    clientWidth: 500,\n    clientHeight: 200,\n  };\n\n  beforeEach(() => {\n    Object.defineProperty(HTMLElement.prototype, 'clientWidth', {\n      value: wrapperElement.clientWidth,\n    });\n    Object.defineProperty(HTMLElement.prototype, 'clientHeight', {\n      value: wrapperElement.clientHeight,\n    });\n  });\n\n  afterEach(() => {\n    Object.defineProperty(HTMLElement.prototype, 'clientWidth', {\n      value: HTMLElement.prototype.clientWidth,\n    });\n    Object.defineProperty(HTMLElement.prototype, 'clientHeight', {\n      value: HTMLElement.prototype.clientHeight,\n    });\n  });\n\n  test('trigger event correctly', () => {\n    const wrapper = mount(ResizeBox, { props: { width: 500, height: 200 } });\n\n    // Simulate window events\n    const map: any = {};\n    window.addEventListener = jest.fn().mockImplementation((event, cb) => {\n      map[event] = cb;\n    });\n    window.removeEventListener = jest.fn().mockImplementation((event) => {\n      delete map[event];\n    });\n\n    // move start\n    const resizeTriggerWrapper = wrapper.findComponent({\n      name: 'ResizeTrigger',\n    });\n    resizeTriggerWrapper.trigger('mousedown', { pageX: 500, pageY: 0 });\n    expect(wrapper.emitted('movingStart')).toHaveLength(1);\n\n    expect(map.mousemove).toBeDefined();\n    expect(map.mouseup).toBeDefined();\n    expect(map.contextmenu).toBeDefined();\n\n    // moving\n    map.mousemove({ pageX: 200, pageY: 0 });\n    expect(wrapper.emitted('moving')).toHaveLength(1);\n    expect(wrapper.emitted('update:width')).toHaveLength(1);\n\n    // move end\n    map.mouseup({ pageX: 200, pageY: 0 });\n    expect(wrapper.emitted('movingEnd')).toHaveLength(1);\n\n    expect(map.mousemove).toBeUndefined();\n    expect(map.mouseup).toBeUndefined();\n    expect(map.contextmenu).toBeUndefined();\n  });\n\n  test('control top trigger correctly', async (done) => {\n    const wrapper = mount(ResizeBox, {\n      props: {\n        directions: ['top'],\n      },\n    });\n\n    const trigger = wrapper.findComponent({\n      name: 'ResizeTrigger',\n    });\n\n    // Simulate window events\n    const map: any = {};\n    window.addEventListener = jest.fn().mockImplementation((event, cb) => {\n      map[event] = cb;\n    });\n\n    const startPos = 200;\n    const endPos = 100;\n    const offset = endPos - startPos;\n    const result = wrapperElement.clientHeight - offset;\n    trigger.trigger('mousedown', { pageX: 0, pageY: startPos });\n    map.mousemove({ pageX: 0, pageY: endPos });\n    expect(wrapper.emitted('update:height')[0][0]).toEqual(result);\n    wrapper.vm.$nextTick(() => {\n      expect(wrapper.element.getAttribute('style')).toContain(\n        `height: ${result}px`\n      );\n      done();\n    });\n  });\n\n  test('control right trigger correctly', async (done) => {\n    const wrapper = mount(ResizeBox, {\n      props: {\n        directions: ['right'],\n      },\n    });\n\n    const trigger = wrapper.findComponent({\n      name: 'ResizeTrigger',\n    });\n\n    // Simulate window events\n    const map: any = {};\n    window.addEventListener = jest.fn().mockImplementation((event, cb) => {\n      map[event] = cb;\n    });\n\n    const startPos = 200;\n    const endPos = 100;\n    const offset = endPos - startPos;\n    const result = wrapperElement.clientWidth + offset;\n    trigger.trigger('mousedown', { pageX: startPos, pageY: 0 });\n    map.mousemove({ pageX: endPos, pageY: 0 });\n    expect(wrapper.emitted('update:width')[0][0]).toEqual(result);\n    wrapper.vm.$nextTick(() => {\n      expect(wrapper.element.getAttribute('style')).toContain(\n        `width: ${result}px`\n      );\n      done();\n    });\n  });\n\n  test('control bottom trigger correctly', async (done) => {\n    const wrapper = mount(ResizeBox, {\n      props: {\n        directions: ['bottom'],\n      },\n    });\n\n    const trigger = wrapper.findComponent({\n      name: 'ResizeTrigger',\n    });\n\n    // Simulate window events\n    const map: any = {};\n    window.addEventListener = jest.fn().mockImplementation((event, cb) => {\n      map[event] = cb;\n    });\n\n    const startPos = 200;\n    const endPos = 100;\n    const offset = endPos - startPos;\n    const result = wrapperElement.clientHeight + offset;\n    trigger.trigger('mousedown', { pageX: 0, pageY: startPos });\n    map.mousemove({ pageX: 0, pageY: endPos });\n    expect(wrapper.emitted('update:height')[0][0]).toEqual(result);\n    wrapper.vm.$nextTick(() => {\n      expect(wrapper.element.getAttribute('style')).toContain(\n        `height: ${result}px`\n      );\n      done();\n    });\n  });\n\n  test('control left trigger correctly', async (done) => {\n    const wrapper = mount(ResizeBox, {\n      props: {\n        directions: ['left'],\n      },\n    });\n\n    const trigger = wrapper.findComponent({\n      name: 'ResizeTrigger',\n    });\n\n    // Simulate window events\n    const map: any = {};\n    window.addEventListener = jest.fn().mockImplementation((event, cb) => {\n      map[event] = cb;\n    });\n\n    const startPos = 200;\n    const endPos = 100;\n    const offset = endPos - startPos;\n    const result = wrapperElement.clientWidth - offset;\n    trigger.trigger('mousedown', { pageX: startPos, pageY: 0 });\n    map.mousemove({ pageX: endPos, pageY: 0 });\n    expect(wrapper.emitted('update:width')[0][0]).toEqual(result);\n    wrapper.vm.$nextTick(() => {\n      expect(wrapper.element.getAttribute('style')).toContain(\n        `width: ${result}px`\n      );\n      done();\n    });\n  });\n\n  test('render trigger size correctly', async (done) => {\n    const wrapper = mount(ResizeBox);\n    const trigger = wrapper.findComponent({ name: 'ResizeTrigger' });\n    trigger.vm.$emit('resize', { contentRect: { width: 100 } });\n    wrapper.vm.$nextTick(() => {\n      expect(wrapper.element.getAttribute('style')).toContain(\n        'padding-right: 100px'\n      );\n      done();\n    });\n  });\n});\n"
  },
  {
    "path": "packages/web-vue/components/resize-box/index.ts",
    "content": "import { App } from 'vue';\nimport type { ArcoOptions } from '../_utils/types';\nimport { setGlobalConfig, getComponentPrefix } from '../_utils/global-config';\nimport _ResizeBox from './resize-box.vue';\n\nconst ResizeBox = Object.assign(_ResizeBox, {\n  install: (app: App, options?: ArcoOptions) => {\n    setGlobalConfig(app, options);\n    const componentPrefix = getComponentPrefix(options);\n\n    app.component(componentPrefix + _ResizeBox.name, _ResizeBox);\n  },\n});\n\nexport type ResizeBoxInstance = InstanceType<typeof _ResizeBox>;\n\nexport default ResizeBox;\n"
  },
  {
    "path": "packages/web-vue/components/resize-box/resize-box.vue",
    "content": "<template>\n  <component\n    :is=\"component\"\n    ref=\"wrapperRef\"\n    :class=\"classNames\"\n    v-bind=\"$attrs\"\n    :style=\"styles\"\n  >\n    <slot />\n    <ResizeTrigger\n      v-for=\"direction in allowDirections\"\n      :key=\"direction\"\n      :prefix-cls=\"`${prefixCls}-trigger`\"\n      :class=\"`${prefixCls}-direction-${direction}`\"\n      :direction=\"isHorizontal(direction) ? 'horizontal' : 'vertical'\"\n      @mousedown=\"\n        (e) => {\n          onMoveStart(direction, e);\n        }\n      \"\n      @resize=\"\n        (entry) => {\n          onTiggerResize(direction, entry);\n        }\n      \"\n    >\n      <slot\n        v-if=\"$slots['resize-trigger']\"\n        name=\"resize-trigger\"\n        :direction=\"direction\"\n      />\n      <template v-if=\"$slots['resize-trigger-icon']\" #icon>\n        <slot name=\"resize-trigger-icon\" :direction=\"direction\" />\n      </template>\n    </ResizeTrigger>\n  </component>\n</template>\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  PropType,\n  toRefs,\n  ref,\n  reactive,\n} from 'vue';\nimport ResizeTrigger from '../_components/resize-trigger.vue';\nimport useMergeState from '../_hooks/use-merge-state';\nimport { getPrefixCls } from '../_utils/global-config';\nimport { isNumber } from '../_utils/is';\nimport { off, on } from '../_utils/dom';\n\nexport type DirectionType = 'left' | 'right' | 'top' | 'bottom';\n\ntype PaddingCSSProperties =\n  | 'padding-left'\n  | 'padding-right'\n  | 'padding-top'\n  | 'padding-bottom';\n\nconst DIRECTION_LEFT = 'left';\nconst DIRECTION_RIGHT = 'right';\nconst DIRECTION_TOP = 'top';\nconst DIRECTION_BOTTOM = 'bottom';\n\nconst allDirections: DirectionType[] = [\n  DIRECTION_LEFT,\n  DIRECTION_RIGHT,\n  DIRECTION_TOP,\n  DIRECTION_BOTTOM,\n];\n\nfunction getRealSize(pageSize: number, padding: number) {\n  if (pageSize === 0) return 0;\n\n  const res = pageSize - padding;\n  return res <= 0 ? 0 : res;\n}\n\nfunction isHorizontal(direction: DirectionType) {\n  return [DIRECTION_TOP, DIRECTION_BOTTOM].indexOf(direction) > -1;\n}\n\nexport default defineComponent({\n  name: 'ResizeBox',\n  components: {\n    ResizeTrigger,\n  },\n  inheritAttrs: false,\n  props: {\n    /**\n     * @zh 宽度\n     * @en Width\n     * @vModel\n     */\n    width: {\n      type: Number,\n    },\n    /**\n     * @zh 高度\n     * @en Height\n     * @vModel\n     */\n    height: {\n      type: Number,\n    },\n    /**\n     * @zh 伸缩框的 html 标签\n     * @en The html tag of the telescopic box\n     */\n    component: {\n      type: String,\n      default: 'div',\n    },\n    /**\n     * @zh 可以进行伸缩的边，有上、下、左、右可以使用\n     * @en Can be stretched side, there are up, down, left and right can be used\n     * */\n    directions: {\n      type: Array as PropType<('left' | 'right' | 'top' | 'bottom')[]>,\n      default: () => ['right'],\n    },\n  },\n  emits: {\n    'update:width': (width: number) => true,\n    'update:height': (height: number) => true,\n    /**\n     * @zh 拖拽开始时触发\n     * @en Triggered when dragging starts\n     * @param {MouseEvent} ev\n     */\n    'movingStart': (ev: MouseEvent) => true,\n    /**\n     * @zh 拖拽时触发\n     * @en Triggered when dragging\n     * @param {{ width: number; height: number; }} size\n     * @param {MouseEvent} ev\n     */\n    'moving': (size: { width: number; height: number }, ev: MouseEvent) => true,\n    /**\n     * @zh 拖拽结束时触发\n     * @en Triggered when the drag ends\n     * @param {MouseEvent} ev\n     */\n    'movingEnd': (ev: MouseEvent) => true,\n  },\n  /**\n   * @zh 伸缩杆的内容\n   * @en The contents of the resize pole\n   * @slot resize-trigger\n   * @binding {'left' | 'right' | 'top' | 'bottom'} direction\n   */\n  /**\n   * @zh 伸缩杆的图标\n   * @en Resize pole icon\n   * @slot resize-trigger-icon\n   * @binding {'left' | 'right' | 'top' | 'bottom'} direction\n   */\n  setup(props, { emit }) {\n    const { height: propHeight, width: propWidth, directions } = toRefs(props);\n\n    const [width, setWidth] = useMergeState<number | null>(\n      null,\n      reactive({\n        value: propWidth,\n      })\n    );\n\n    const [height, setHeight] = useMergeState<number | null>(\n      null,\n      reactive({\n        value: propHeight,\n      })\n    );\n\n    const wrapperRef = ref<HTMLDivElement>();\n\n    const paddingStyles = reactive<\n      Partial<Record<PaddingCSSProperties, string>>\n    >({});\n\n    const prefixCls = getPrefixCls('resizebox');\n    const classNames = computed(() => [prefixCls]);\n    const styles = computed(() => {\n      return {\n        ...(isNumber(width.value) ? { width: `${width.value}px` } : {}),\n        ...(isNumber(height.value) ? { height: `${height.value}px` } : {}),\n        ...paddingStyles,\n      };\n    });\n    const allowDirections = computed(() =>\n      directions.value.filter((direction) => allDirections.includes(direction))\n    );\n\n    const record = {\n      direction: '',\n      startPageX: 0,\n      startPageY: 0,\n      startWidth: 0,\n      startHeight: 0,\n      moving: false,\n      padding: {\n        left: 0,\n        right: 0,\n        top: 0,\n        bottom: 0,\n      },\n    };\n\n    function onMoving(e: MouseEvent) {\n      if (!record.moving) return;\n\n      const { startPageX, startPageY, startWidth, startHeight, direction } =\n        record;\n      let newWidth = startWidth;\n      let newHeight = startHeight;\n\n      // 往右移动的距离\n      const offsetX = e.pageX - startPageX;\n      // 往下移动的距离\n      const offsetY = e.pageY - startPageY;\n\n      switch (direction) {\n        case DIRECTION_LEFT:\n          newWidth = startWidth - offsetX;\n          setWidth(newWidth);\n          emit('update:width', newWidth);\n          break;\n        case DIRECTION_RIGHT:\n          newWidth = startWidth + offsetX;\n          setWidth(newWidth);\n          emit('update:width', newWidth);\n          break;\n        case DIRECTION_TOP:\n          newHeight = startHeight - offsetY;\n          setHeight(newHeight);\n          emit('update:height', newHeight);\n          break;\n        case DIRECTION_BOTTOM:\n          newHeight = startHeight + offsetY;\n          setHeight(newHeight);\n          emit('update:height', newHeight);\n          break;\n        default:\n          break;\n      }\n\n      emit(\n        'moving',\n        {\n          width: newWidth,\n          height: newHeight,\n        },\n        e\n      );\n    }\n\n    function onMoveEnd(e: MouseEvent) {\n      record.moving = false;\n\n      off(window, 'mousemove', onMoving);\n      off(window, 'mouseup', onMoveEnd);\n      off(window, 'contextmenu', onMoveEnd);\n\n      document.body.style.cursor = 'default';\n\n      emit('movingEnd', e);\n    }\n\n    function onMoveStart(direction: DirectionType, e: MouseEvent) {\n      emit('movingStart', e);\n\n      record.moving = true;\n      record.startPageX = e.pageX;\n      record.startPageY = e.pageY;\n      record.direction = direction;\n\n      const { top, left, right, bottom } = record.padding;\n      record.startWidth = getRealSize(\n        wrapperRef.value?.clientWidth || 0,\n        left + right\n      );\n      record.startHeight = getRealSize(\n        wrapperRef.value?.clientHeight || 0,\n        top + bottom\n      );\n\n      on(window, 'mousemove', onMoving);\n      on(window, 'mouseup', onMoveEnd);\n      on(window, 'contextmenu', onMoveEnd);\n\n      document.body.style.cursor = isHorizontal(direction)\n        ? 'row-resize'\n        : 'col-resize';\n    }\n\n    function onTiggerResize(\n      direction: DirectionType,\n      entry: ResizeObserverEntry\n    ) {\n      const { width, height } = entry.contentRect;\n      const size = isHorizontal(direction) ? height : width;\n      record.padding[direction] = size;\n      paddingStyles[\n        `padding-${direction}` as PaddingCSSProperties\n      ] = `${size}px`;\n    }\n\n    return {\n      prefixCls,\n      classNames,\n      styles,\n      wrapperRef,\n      onMoveStart,\n      isHorizontal,\n      allowDirections,\n      onTiggerResize,\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/resize-box/style/index.less",
    "content": "@import './token.less';\n\n@resizebox-prefix-cls: ~'@{prefix}-resizebox';\n@resizebox-trigger-prefix-cls: ~'@{resizebox-prefix-cls}-trigger';\n\n.@{resizebox-prefix-cls} {\n  position: relative;\n  width: 100%;\n  overflow: hidden;\n\n  &-direction-left,\n  &-direction-right,\n  &-direction-top,\n  &-direction-bottom {\n    position: absolute;\n    top: 0;\n    left: 0;\n    box-sizing: border-box;\n    user-select: none;\n  }\n\n  &-direction-right {\n    right: 0;\n    left: unset;\n  }\n\n  &-direction-bottom {\n    top: unset;\n    bottom: 0;\n  }\n}\n\n// 伸缩触发杆\n.@{resizebox-trigger-prefix-cls} {\n  &-icon-wrapper {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: 100%;\n    color: @resizeBox-trigger-color-icon;\n    font-size: @resizeBox-trigger-font-size-icon;\n    line-height: 1;\n    background-color: @resizeBox-trigger-color-background;\n  }\n\n  &-icon {\n    display: inline-block;\n    margin: -(@resizeBox-trigger-font-size-icon / 4);\n  }\n\n  &-vertical {\n    height: 100%;\n    cursor: col-resize;\n  }\n\n  &-horizontal {\n    width: 100%;\n    cursor: row-resize;\n  }\n}\n"
  },
  {
    "path": "packages/web-vue/components/resize-box/style/index.ts",
    "content": "import '../../style/index.less';\nimport './index.less';\n"
  },
  {
    "path": "packages/web-vue/components/resize-box/style/token.less",
    "content": "@import '../../style/theme/index.less';\n\n@resizeBox-trigger-color-background: var(~'@{arco-cssvars-prefix}-color-neutral-3');\n// @resizeBox-trigger-size-icon-wrapper: 6px;\n@resizeBox-trigger-font-size-icon: 12px;\n@resizeBox-trigger-color-icon: var(~'@{arco-cssvars-prefix}-color-text-1');\n"
  },
  {
    "path": "packages/web-vue/components/result/403.tsx",
    "content": "import { defineComponent } from 'vue';\n\nexport default defineComponent({\n  name: 'ResultForbidden',\n  render() {\n    return (\n      <svg\n        viewBox=\"0 0 213 213\"\n        height=\"100%\"\n        width=\"100%\"\n        style={{\n          fillRule: 'evenodd',\n          clipRule: 'evenodd',\n          strokeLinejoin: 'round',\n          strokeMiterlimit: 2,\n        }}\n      >\n        <g transform=\"matrix(1,0,0,1,-871.485,-445.62)\">\n          <g>\n            <g transform=\"matrix(1,0,0,1,-75.2684,-87.3801)\">\n              <circle\n                cx=\"1053.23\"\n                cy=\"639.477\"\n                r=\"106.477\"\n                style={{ fill: 'rgb(235, 238, 246)' }}\n              />\n            </g>\n            <g transform=\"matrix(1,0,0,1,246.523,295.575)\">\n              <g transform=\"matrix(0.316667,0,0,0.316667,277.545,71.0298)\">\n                <g transform=\"matrix(0.989011,-0.571006,1.14201,0.659341,-335.171,81.4498)\">\n                  <rect\n                    x=\"495.52\"\n                    y=\"1057.87\"\n                    width=\"105.078\"\n                    height=\"91\"\n                    style={{ fill: 'rgb(253, 243, 228)' }}\n                  />\n                </g>\n                <g transform=\"matrix(0.164835,-0.0951676,1.14201,0.659341,116.224,-179.163)\">\n                  <rect\n                    x=\"495.52\"\n                    y=\"1057.87\"\n                    width=\"105.078\"\n                    height=\"91\"\n                    style={{ fill: 'rgb(202, 174, 136)' }}\n                  />\n                </g>\n                <g transform=\"matrix(0.978261,-0.564799,1.26804e-16,1.30435,-337.046,42.0327)\">\n                  <rect\n                    x=\"1844.06\"\n                    y=\"1192.54\"\n                    width=\"106.232\"\n                    height=\"92\"\n                    style={{ fill: 'rgb(196, 173, 142)' }}\n                  />\n                </g>\n                <g transform=\"matrix(0.267591,-0.154493,3.46856e-17,0.356787,992.686,475.823)\">\n                  <rect\n                    x=\"1844.06\"\n                    y=\"1192.54\"\n                    width=\"106.232\"\n                    height=\"92\"\n                    style={{ fill: 'rgb(102, 102, 102)' }}\n                  />\n                </g>\n                <g transform=\"matrix(1.28257,-0.740494,1.23317e-16,1.7101,1501.14,624.071)\">\n                  <g transform=\"matrix(1,0,0,1,-6,-6)\">\n                    <path\n                      d=\"M2.25,10.5C2.25,10.5 1.5,10.5 1.5,9.75C1.5,9 2.25,6.75 6,6.75C9.75,6.75 10.5,9 10.5,9.75C10.5,10.5 9.75,10.5 9.75,10.5L2.25,10.5ZM6,6C7.234,6 8.25,4.984 8.25,3.75C8.25,2.516 7.234,1.5 6,1.5C4.766,1.5 3.75,2.516 3.75,3.75C3.75,4.984 4.766,6 6,6Z\"\n                      style={{ fill: 'white' }}\n                    />\n                  </g>\n                </g>\n                <g transform=\"matrix(0.725806,0.419045,1.75755e-17,1.01444,155.314,212.138)\">\n                  <rect\n                    x=\"1663.92\"\n                    y=\"-407.511\"\n                    width=\"143.183\"\n                    height=\"118.292\"\n                    style={{ fill: 'rgb(240, 218, 183)' }}\n                  />\n                </g>\n                <g transform=\"matrix(1.58977,-0.917857,1.15976e-16,2.2425,-1270.46,-614.379)\">\n                  <rect\n                    x=\"1748.87\"\n                    y=\"1226.67\"\n                    width=\"10.895\"\n                    height=\"13.378\"\n                    style={{ fill: 'rgb(132, 97, 0)' }}\n                  />\n                </g>\n              </g>\n              <g transform=\"matrix(0.182997,0.105653,-0.494902,0.285732,814.161,66.3087)\">\n                <rect\n                  x=\"657.012\"\n                  y=\"404.643\"\n                  width=\"198.586\"\n                  height=\"145.08\"\n                  style={{ fillOpacity: 0.1 }}\n                />\n              </g>\n              <g transform=\"matrix(0.316667,0,0,0.316667,237.301,94.2647)\">\n                <g transform=\"matrix(0.989011,-0.571006,1.14201,0.659341,-335.171,81.4498)\">\n                  <rect\n                    x=\"495.52\"\n                    y=\"1057.87\"\n                    width=\"105.078\"\n                    height=\"91\"\n                    style={{ fill: 'rgb(253, 243, 228)' }}\n                  />\n                </g>\n                <g transform=\"matrix(0.164835,-0.0951676,1.14201,0.659341,116.224,-179.163)\">\n                  <rect\n                    x=\"495.52\"\n                    y=\"1057.87\"\n                    width=\"105.078\"\n                    height=\"91\"\n                    style={{ fill: 'rgb(202, 174, 136)' }}\n                  />\n                </g>\n                <g transform=\"matrix(0.978261,-0.564799,1.26804e-16,1.30435,-337.046,42.0327)\">\n                  <rect\n                    x=\"1844.06\"\n                    y=\"1192.54\"\n                    width=\"106.232\"\n                    height=\"92\"\n                    style={{ fill: 'rgb(196, 173, 142)' }}\n                  />\n                </g>\n                <g transform=\"matrix(0.267591,-0.154493,3.46856e-17,0.356787,992.686,475.823)\">\n                  <rect\n                    x=\"1844.06\"\n                    y=\"1192.54\"\n                    width=\"106.232\"\n                    height=\"92\"\n                    style={{ fill: 'rgb(102, 102, 102)' }}\n                  />\n                </g>\n                <g transform=\"matrix(1.28257,-0.740494,1.23317e-16,1.7101,1501.14,624.071)\">\n                  <g transform=\"matrix(1,0,0,1,-6,-6)\">\n                    <path\n                      d=\"M2.25,10.5C2.25,10.5 1.5,10.5 1.5,9.75C1.5,9 2.25,6.75 6,6.75C9.75,6.75 10.5,9 10.5,9.75C10.5,10.5 9.75,10.5 9.75,10.5L2.25,10.5ZM6,6C7.234,6 8.25,4.984 8.25,3.75C8.25,2.516 7.234,1.5 6,1.5C4.766,1.5 3.75,2.516 3.75,3.75C3.75,4.984 4.766,6 6,6Z\"\n                      style={{ fill: 'white' }}\n                    />\n                  </g>\n                </g>\n                <g transform=\"matrix(0.725806,0.419045,1.75755e-17,1.01444,155.314,212.138)\">\n                  <rect\n                    x=\"1663.92\"\n                    y=\"-407.511\"\n                    width=\"143.183\"\n                    height=\"118.292\"\n                    style={{ fill: 'rgb(240, 218, 183)' }}\n                  />\n                </g>\n                <g transform=\"matrix(1.58977,-0.917857,1.15976e-16,2.2425,-1270.46,-614.379)\">\n                  <rect\n                    x=\"1748.87\"\n                    y=\"1226.67\"\n                    width=\"10.895\"\n                    height=\"13.378\"\n                    style={{ fill: 'rgb(132, 97, 0)' }}\n                  />\n                </g>\n              </g>\n              <g transform=\"matrix(0.474953,0,0,0.474953,538.938,8.95289)\">\n                <g transform=\"matrix(0.180615,0.104278,-0.973879,0.562269,790.347,286.159)\">\n                  <rect\n                    x=\"657.012\"\n                    y=\"404.643\"\n                    width=\"198.586\"\n                    height=\"145.08\"\n                    style={{ fillOpacity: 0.1 }}\n                  />\n                </g>\n                <g transform=\"matrix(0.473356,0,0,0.473356,294.481,129.741)\">\n                  <g>\n                    <g transform=\"matrix(0.1761,-0.101671,1.73518e-16,1.22207,442.564,7.31508)\">\n                      <rect\n                        x=\"202.62\"\n                        y=\"575.419\"\n                        width=\"124.002\"\n                        height=\"259.402\"\n                        style={{ fill: 'rgb(235, 235, 235)' }}\n                      />\n                    </g>\n                    <g transform=\"matrix(0.0922781,0.0532768,2.03964e-16,2.20569,405.236,-248.842)\">\n                      <rect\n                        x=\"657.012\"\n                        y=\"404.643\"\n                        width=\"198.586\"\n                        height=\"145.08\"\n                        style={{ fill: 'rgb(34, 34, 34)' }}\n                      />\n                    </g>\n                    <g transform=\"matrix(0.147541,-0.0851831,1.52371e-16,1.23446,454.294,-3.8127)\">\n                      <rect\n                        x=\"202.62\"\n                        y=\"575.419\"\n                        width=\"124.002\"\n                        height=\"259.402\"\n                        style={{ fill: 'rgb(51, 51, 51)' }}\n                      />\n                    </g>\n                    <g transform=\"matrix(0.0921286,0.0531905,-0.126106,0.0728076,474.688,603.724)\">\n                      <rect\n                        x=\"657.012\"\n                        y=\"404.643\"\n                        width=\"198.586\"\n                        height=\"145.08\"\n                        style={{ fill: 'rgb(102, 102, 102)' }}\n                      />\n                    </g>\n                  </g>\n                </g>\n                <g transform=\"matrix(0.473356,0,0,0.473356,192.621,188.549)\">\n                  <g>\n                    <g transform=\"matrix(0.1761,-0.101671,1.73518e-16,1.22207,442.564,7.31508)\">\n                      <rect\n                        x=\"202.62\"\n                        y=\"575.419\"\n                        width=\"124.002\"\n                        height=\"259.402\"\n                        style={{ fill: 'rgb(235, 235, 235)' }}\n                      />\n                    </g>\n                    <g transform=\"matrix(0.0922781,0.0532768,2.03964e-16,2.20569,405.236,-248.842)\">\n                      <rect\n                        x=\"657.012\"\n                        y=\"404.643\"\n                        width=\"198.586\"\n                        height=\"145.08\"\n                        style={{ fill: 'rgb(34, 34, 34)' }}\n                      />\n                    </g>\n                    <g transform=\"matrix(0.147541,-0.0851831,1.52371e-16,1.23446,454.294,-3.8127)\">\n                      <rect\n                        x=\"202.62\"\n                        y=\"575.419\"\n                        width=\"124.002\"\n                        height=\"259.402\"\n                        style={{ fill: 'rgb(51, 51, 51)' }}\n                      />\n                    </g>\n                    <g transform=\"matrix(0.0921286,0.0531905,-0.126106,0.0728076,474.688,603.724)\">\n                      <rect\n                        x=\"657.012\"\n                        y=\"404.643\"\n                        width=\"198.586\"\n                        height=\"145.08\"\n                        style={{ fill: 'rgb(102, 102, 102)' }}\n                      />\n                    </g>\n                  </g>\n                </g>\n                <g transform=\"matrix(0.668111,0,0,0.668111,-123.979,-49.2109)\">\n                  <g transform=\"matrix(0.0349225,0.0201625,1.81598e-17,0.220789,974.758,729.412)\">\n                    <rect\n                      x=\"657.012\"\n                      y=\"404.643\"\n                      width=\"198.586\"\n                      height=\"145.08\"\n                      style={{ fill: 'rgb(235, 235, 235)' }}\n                    />\n                  </g>\n                  <g transform=\"matrix(1.1164,-0.644557,0,0.220789,42.5091,1294.14)\">\n                    <rect\n                      x=\"657.012\"\n                      y=\"404.643\"\n                      width=\"198.586\"\n                      height=\"145.08\"\n                      style={{ fill: 'rgb(235, 235, 235)' }}\n                    />\n                  </g>\n                  <g transform=\"matrix(0.0349225,0.0201625,-1.52814,0.882275,1593.11,461.746)\">\n                    <rect\n                      x=\"657.012\"\n                      y=\"404.643\"\n                      width=\"198.586\"\n                      height=\"145.08\"\n                      style={{ fill: 'rgb(102, 102, 102)' }}\n                    />\n                  </g>\n                  <g transform=\"matrix(1.1164,-0.644557,0,0.220789,49.4442,1298.14)\">\n                    <rect\n                      x=\"657.012\"\n                      y=\"404.643\"\n                      width=\"198.586\"\n                      height=\"145.08\"\n                      style={{ fill: 'rgb(51, 51, 51)' }}\n                    />\n                  </g>\n                  <g transform=\"matrix(0.0349225,0.0201625,1.81598e-17,0.220789,753.056,857.412)\">\n                    <rect\n                      x=\"657.012\"\n                      y=\"404.643\"\n                      width=\"198.586\"\n                      height=\"145.08\"\n                      style={{ fill: 'rgb(34, 34, 34)' }}\n                    />\n                  </g>\n                  <g transform=\"matrix(0.142968,-0.0825428,-0.207261,0.478709,898.874,529.479)\">\n                    <rect\n                      x=\"831\"\n                      y=\"1023.79\"\n                      width=\"89.214\"\n                      height=\"89.214\"\n                      style={{ fill: 'rgb(255, 125, 0)' }}\n                    />\n                  </g>\n                  <g transform=\"matrix(0.142968,-0.0825428,-0.207261,0.478709,930.12,511.44)\">\n                    <rect\n                      x=\"831\"\n                      y=\"1023.79\"\n                      width=\"89.214\"\n                      height=\"89.214\"\n                      style={{ fill: 'rgb(255, 125, 0)' }}\n                    />\n                  </g>\n                  <g transform=\"matrix(0.142968,-0.0825428,-0.207261,0.478709,961.365,493.4)\">\n                    <rect\n                      x=\"831\"\n                      y=\"1023.79\"\n                      width=\"89.214\"\n                      height=\"89.214\"\n                      style={{ fill: 'rgb(248, 248, 248)' }}\n                    />\n                  </g>\n                  <g transform=\"matrix(0.142968,-0.0825428,-0.207261,0.478709,992.61,475.361)\">\n                    <rect\n                      x=\"831\"\n                      y=\"1023.79\"\n                      width=\"89.214\"\n                      height=\"89.214\"\n                      style={{ fill: 'rgb(248, 248, 248)' }}\n                    />\n                  </g>\n                  <g transform=\"matrix(0.142968,-0.0825428,-0.207261,0.478709,1023.86,457.321)\">\n                    <rect\n                      x=\"831\"\n                      y=\"1023.79\"\n                      width=\"89.214\"\n                      height=\"89.214\"\n                      style={{ fill: 'rgb(248, 248, 248)' }}\n                    />\n                  </g>\n                  <g transform=\"matrix(0.142968,-0.0825428,-0.207261,0.478709,1056.25,438.617)\">\n                    <rect\n                      x=\"831\"\n                      y=\"1023.79\"\n                      width=\"89.214\"\n                      height=\"89.214\"\n                      style={{ fill: 'rgb(255, 125, 0)' }}\n                    />\n                  </g>\n                  <g transform=\"matrix(0.142968,-0.0825428,-0.207261,0.478709,1085.74,421.589)\">\n                    <rect\n                      x=\"831\"\n                      y=\"1023.79\"\n                      width=\"89.214\"\n                      height=\"89.214\"\n                      style={{ fill: 'rgb(255, 125, 0)' }}\n                    />\n                  </g>\n                </g>\n                <g transform=\"matrix(0.668111,0,0,0.668111,-123.979,-91.97)\">\n                  <g transform=\"matrix(0.0349225,0.0201625,1.81598e-17,0.220789,974.758,729.412)\">\n                    <rect\n                      x=\"657.012\"\n                      y=\"404.643\"\n                      width=\"198.586\"\n                      height=\"145.08\"\n                      style={{ fill: 'rgb(235, 235, 235)' }}\n                    />\n                  </g>\n                  <g transform=\"matrix(1.1164,-0.644557,0,0.220789,42.5091,1294.14)\">\n                    <rect\n                      x=\"657.012\"\n                      y=\"404.643\"\n                      width=\"198.586\"\n                      height=\"145.08\"\n                      style={{ fill: 'rgb(235, 235, 235)' }}\n                    />\n                  </g>\n                  <g transform=\"matrix(0.0349225,0.0201625,-1.52814,0.882275,1593.11,461.746)\">\n                    <rect\n                      x=\"657.012\"\n                      y=\"404.643\"\n                      width=\"198.586\"\n                      height=\"145.08\"\n                      style={{ fill: 'rgb(102, 102, 102)' }}\n                    />\n                  </g>\n                  <g transform=\"matrix(1.1164,-0.644557,0,0.220789,49.4442,1298.14)\">\n                    <rect\n                      x=\"657.012\"\n                      y=\"404.643\"\n                      width=\"198.586\"\n                      height=\"145.08\"\n                      style={{ fill: 'rgb(51, 51, 51)' }}\n                    />\n                  </g>\n                  <g transform=\"matrix(0.0349225,0.0201625,1.81598e-17,0.220789,753.056,857.412)\">\n                    <rect\n                      x=\"657.012\"\n                      y=\"404.643\"\n                      width=\"198.586\"\n                      height=\"145.08\"\n                      style={{ fill: 'rgb(34, 34, 34)' }}\n                    />\n                  </g>\n                  <g transform=\"matrix(0.142968,-0.0825428,-0.207261,0.478709,898.874,529.479)\">\n                    <rect\n                      x=\"831\"\n                      y=\"1023.79\"\n                      width=\"89.214\"\n                      height=\"89.214\"\n                      style={{ fill: 'rgb(255, 125, 0)' }}\n                    />\n                  </g>\n                  <g transform=\"matrix(0.142968,-0.0825428,-0.207261,0.478709,930.12,511.44)\">\n                    <rect\n                      x=\"831\"\n                      y=\"1023.79\"\n                      width=\"89.214\"\n                      height=\"89.214\"\n                      style={{ fill: 'rgb(255, 125, 0)' }}\n                    />\n                  </g>\n                  <g transform=\"matrix(0.142968,-0.0825428,-0.207261,0.478709,961.365,493.4)\">\n                    <rect\n                      x=\"831\"\n                      y=\"1023.79\"\n                      width=\"89.214\"\n                      height=\"89.214\"\n                      style={{ fill: 'rgb(248, 248, 248)' }}\n                    />\n                  </g>\n                  <g transform=\"matrix(0.142968,-0.0825428,-0.207261,0.478709,992.61,475.361)\">\n                    <rect\n                      x=\"831\"\n                      y=\"1023.79\"\n                      width=\"89.214\"\n                      height=\"89.214\"\n                      style={{ fill: 'rgb(248, 248, 248)' }}\n                    />\n                  </g>\n                  <g transform=\"matrix(0.142968,-0.0825428,-0.207261,0.478709,1023.86,457.321)\">\n                    <rect\n                      x=\"831\"\n                      y=\"1023.79\"\n                      width=\"89.214\"\n                      height=\"89.214\"\n                      style={{ fill: 'rgb(248, 248, 248)' }}\n                    />\n                  </g>\n                  <g transform=\"matrix(0.142968,-0.0825428,-0.207261,0.478709,1056.25,438.617)\">\n                    <rect\n                      x=\"831\"\n                      y=\"1023.79\"\n                      width=\"89.214\"\n                      height=\"89.214\"\n                      style={{ fill: 'rgb(255, 125, 0)' }}\n                    />\n                  </g>\n                  <g transform=\"matrix(0.142968,-0.0825428,-0.207261,0.478709,1085.74,421.589)\">\n                    <rect\n                      x=\"831\"\n                      y=\"1023.79\"\n                      width=\"89.214\"\n                      height=\"89.214\"\n                      style={{ fill: 'rgb(255, 125, 0)' }}\n                    />\n                  </g>\n                </g>\n                <g transform=\"matrix(0.701585,5.16096e-35,-5.16096e-35,0.701585,-546.219,-21.3487)\">\n                  <g transform=\"matrix(0.558202,-0.322278,0,0.882275,1033.27,615.815)\">\n                    <path\n                      d=\"M855.598,410.446C855.598,407.244 852.515,404.643 848.718,404.643L663.891,404.643C660.094,404.643 657.012,407.244 657.012,410.446L657.012,543.92C657.012,547.123 660.094,549.723 663.891,549.723L848.718,549.723C852.515,549.723 855.598,547.123 855.598,543.92L855.598,410.446Z\"\n                      style={{ fill: 'white' }}\n                    />\n                  </g>\n                  <g transform=\"matrix(0.558202,-0.322278,0,0.882275,1035.25,616.977)\">\n                    <path\n                      d=\"M855.598,410.446C855.598,407.244 852.515,404.643 848.718,404.643L663.891,404.643C660.094,404.643 657.012,407.244 657.012,410.446L657.012,543.92C657.012,547.123 660.094,549.723 663.891,549.723L848.718,549.723C852.515,549.723 855.598,547.123 855.598,543.92L855.598,410.446Z\"\n                      style={{ fill: 'white' }}\n                    />\n                  </g>\n                  <g transform=\"matrix(1,0,0,1,418.673,507.243)\">\n                    <path\n                      d=\"M1088.34,192.063C1089.79,191.209 1090.78,191.821 1090.78,191.821L1092.71,192.944C1092.71,192.944 1092.29,192.721 1091.7,192.763C1090.99,192.813 1090.34,193.215 1090.34,193.215C1090.34,193.215 1088.85,192.362 1088.34,192.063Z\"\n                      style={{ fill: 'rgb(248, 248, 248)' }}\n                    />\n                  </g>\n                  <g transform=\"matrix(1,0,0,1,235.984,-39.1315)\">\n                    <path\n                      d=\"M1164.02,805.247C1164.05,802.517 1165.64,799.379 1167.67,798.118L1169.67,799.272C1167.58,800.648 1166.09,803.702 1166.02,806.402L1164.02,805.247Z\"\n                      style={{ fill: 'url(#_Linear1)' }}\n                    />\n                  </g>\n                  <g transform=\"matrix(0.396683,0,0,0.396683,1000.22,516.921)\">\n                    <path\n                      d=\"M1011.2,933.14C1009.31,932.075 1008.05,929.696 1007.83,926.324L1012.87,929.235C1012.87,929.235 1012.96,930.191 1013.04,930.698C1013.16,931.427 1013.42,932.344 1013.62,932.845C1013.79,933.255 1014.59,935.155 1016.22,936.046C1015.83,935.781 1011.19,933.139 1011.19,933.139L1011.2,933.14Z\"\n                      style={{ fill: 'rgb(238, 238, 238)' }}\n                    />\n                  </g>\n                  <g transform=\"matrix(0.253614,-0.146424,4.87691e-17,0.338152,1209.98,830.02)\">\n                    <circle\n                      cx=\"975.681\"\n                      cy=\"316.681\"\n                      r=\"113.681\"\n                      style={{ fill: 'rgb(245, 63, 63)' }}\n                    />\n                    <g transform=\"matrix(1.08844,0,0,0.61677,-99.9184,125.436)\">\n                      <path\n                        d=\"M1062,297.556C1062,296.697 1061.61,296 1061.12,296L915.882,296C915.395,296 915,296.697 915,297.556L915,333.356C915,334.215 915.395,334.912 915.882,334.912L1061.12,334.912C1061.61,334.912 1062,334.215 1062,333.356L1062,297.556Z\"\n                        style={{ fill: 'white' }}\n                      />\n                    </g>\n                  </g>\n                  <g transform=\"matrix(5.57947,-3.22131,0.306277,0.176829,-6260.71,4938.32)\">\n                    <rect\n                      x=\"1335.54\"\n                      y=\"694.688\"\n                      width=\"18.525\"\n                      height=\"6.511\"\n                      style={{ fill: 'rgb(248, 248, 248)' }}\n                    />\n                  </g>\n                  <g transform=\"matrix(0.10726,0.0619268,-1.83335e-14,18.1609,1256.76,-11932.8)\">\n                    <rect\n                      x=\"1335.54\"\n                      y=\"694.688\"\n                      width=\"18.525\"\n                      height=\"6.511\"\n                      style={{ fill: 'rgb(238, 238, 238)' }}\n                    />\n                  </g>\n                </g>\n              </g>\n              <g transform=\"matrix(0.316667,0,0,0.316667,269.139,37.8829)\">\n                <g transform=\"matrix(0.989011,-0.571006,1.14201,0.659341,-335.171,81.4498)\">\n                  <rect\n                    x=\"495.52\"\n                    y=\"1057.87\"\n                    width=\"105.078\"\n                    height=\"91\"\n                    style={{ fill: 'rgb(253, 243, 228)' }}\n                  />\n                </g>\n                <g transform=\"matrix(0.164835,-0.0951676,1.14201,0.659341,116.224,-179.163)\">\n                  <rect\n                    x=\"495.52\"\n                    y=\"1057.87\"\n                    width=\"105.078\"\n                    height=\"91\"\n                    style={{ fill: 'rgb(202, 174, 136)' }}\n                  />\n                </g>\n                <g transform=\"matrix(0.978261,-0.564799,1.26804e-16,1.30435,-337.046,42.0327)\">\n                  <rect\n                    x=\"1844.06\"\n                    y=\"1192.54\"\n                    width=\"106.232\"\n                    height=\"92\"\n                    style={{ fill: 'rgb(196, 173, 142)' }}\n                  />\n                </g>\n                <g transform=\"matrix(0.267591,-0.154493,3.46856e-17,0.356787,992.686,475.823)\">\n                  <rect\n                    x=\"1844.06\"\n                    y=\"1192.54\"\n                    width=\"106.232\"\n                    height=\"92\"\n                    style={{ fill: 'rgb(102, 102, 102)' }}\n                  />\n                </g>\n                <g transform=\"matrix(1.28257,-0.740494,1.23317e-16,1.7101,1501.14,624.071)\">\n                  <g transform=\"matrix(1,0,0,1,-6,-6)\">\n                    <path\n                      d=\"M2.25,10.5C2.25,10.5 1.5,10.5 1.5,9.75C1.5,9 2.25,6.75 6,6.75C9.75,6.75 10.5,9 10.5,9.75C10.5,10.5 9.75,10.5 9.75,10.5L2.25,10.5ZM6,6C7.234,6 8.25,4.984 8.25,3.75C8.25,2.516 7.234,1.5 6,1.5C4.766,1.5 3.75,2.516 3.75,3.75C3.75,4.984 4.766,6 6,6Z\"\n                      style={{ fill: 'white' }}\n                    />\n                  </g>\n                </g>\n                <g transform=\"matrix(0.725806,0.419045,1.75755e-17,1.01444,155.314,212.138)\">\n                  <rect\n                    x=\"1663.92\"\n                    y=\"-407.511\"\n                    width=\"143.183\"\n                    height=\"118.292\"\n                    style={{ fill: 'rgb(240, 218, 183)' }}\n                  />\n                </g>\n                <g transform=\"matrix(1.58977,-0.917857,1.15976e-16,2.2425,-1270.46,-614.379)\">\n                  <rect\n                    x=\"1748.87\"\n                    y=\"1226.67\"\n                    width=\"10.895\"\n                    height=\"13.378\"\n                    style={{ fill: 'rgb(132, 97, 0)' }}\n                  />\n                </g>\n              </g>\n            </g>\n          </g>\n        </g>\n        <defs>\n          <linearGradient\n            id=\"_Linear1\"\n            x1=\"0\"\n            y1=\"0\"\n            x2=\"1\"\n            y2=\"0\"\n            gradientUnits=\"userSpaceOnUse\"\n            gradientTransform=\"matrix(-2.64571,4.04098,-4.04098,-2.64571,1167.67,799.269)\"\n          >\n            <stop\n              offset=\"0\"\n              style={{ stopColor: 'rgb(248, 248, 248)', stopOpacity: 1 }}\n            />\n            <stop\n              offset=\"1\"\n              style={{ stopColor: 'rgb(248, 248, 248)', stopOpacity: 1 }}\n            />\n          </linearGradient>\n        </defs>\n      </svg>\n    );\n  },\n});\n"
  },
  {
    "path": "packages/web-vue/components/result/404.tsx",
    "content": "import { defineComponent } from 'vue';\n\nexport default defineComponent({\n  name: 'ResultNotFound',\n  render() {\n    return (\n      <svg\n        width=\"100%\"\n        height=\"100%\"\n        viewBox=\"0 0 213 213\"\n        style={{\n          fillRule: 'evenodd',\n          clipRule: 'evenodd',\n          strokeLinejoin: 'round',\n          strokeMiterlimit: 2,\n        }}\n      >\n        <g transform=\"matrix(1,0,0,1,-1241.95,-445.62)\">\n          <g>\n            <g transform=\"matrix(1,0,0,1,295.2,-87.3801)\">\n              <circle\n                cx=\"1053.23\"\n                cy=\"639.477\"\n                r=\"106.477\"\n                style={{ fill: 'rgb(235, 238, 246)' }}\n              />\n            </g>\n            <g transform=\"matrix(0.38223,0,0,0.38223,1126.12,238.549)\">\n              <g transform=\"matrix(0.566536,0.327089,-1.28774,0.74348,763.4,317.171)\">\n                <rect\n                  x=\"657.012\"\n                  y=\"404.643\"\n                  width=\"198.586\"\n                  height=\"145.08\"\n                  style={{ fillOpacity: 0.1 }}\n                />\n              </g>\n              <g transform=\"matrix(0.29595,0.170867,-0.91077,0.525833,873.797,588.624)\">\n                <rect\n                  x=\"657.012\"\n                  y=\"404.643\"\n                  width=\"198.586\"\n                  height=\"145.08\"\n                  style={{ fillOpacity: 0.1 }}\n                />\n              </g>\n              <g transform=\"matrix(1,0,0,1,275,-15)\">\n                <path\n                  d=\"M262.077,959.012L276.923,959.012L273.388,1004.01C273.388,1004.59 273.009,1005.16 272.25,1005.6C270.732,1006.48 268.268,1006.48 266.75,1005.6C265.991,1005.16 265.612,1004.59 265.612,1004.01L262.077,959.012Z\"\n                  style={{ fill: 'rgb(196, 173, 142)' }}\n                />\n                <g transform=\"matrix(0.866025,-0.5,1,0.57735,0,-45)\">\n                  <ellipse\n                    cx=\"-848.416\"\n                    cy=\"1004.25\"\n                    rx=\"6.062\"\n                    ry=\"5.25\"\n                    style={{ fill: 'rgb(255, 125, 0)' }}\n                  />\n                </g>\n              </g>\n              <g transform=\"matrix(1,0,0,1,183.952,-67.5665)\">\n                <path\n                  d=\"M262.077,959.012L276.923,959.012L273.388,1004.01C273.388,1004.59 273.009,1005.16 272.25,1005.6C270.732,1006.48 268.268,1006.48 266.75,1005.6C265.991,1005.16 265.612,1004.59 265.612,1004.01L262.077,959.012Z\"\n                  style={{ fill: 'rgb(196, 173, 142)' }}\n                />\n                <g transform=\"matrix(0.866025,-0.5,1,0.57735,0,-45)\">\n                  <ellipse\n                    cx=\"-848.416\"\n                    cy=\"1004.25\"\n                    rx=\"6.062\"\n                    ry=\"5.25\"\n                    style={{ fill: 'rgb(255, 125, 0)' }}\n                  />\n                </g>\n              </g>\n              <g transform=\"matrix(1,0,0,1,414,-95.2517)\">\n                <path\n                  d=\"M262.077,959.012L276.923,959.012L273.388,1004.01C273.388,1004.59 273.009,1005.16 272.25,1005.6C270.732,1006.48 268.268,1006.48 266.75,1005.6C265.991,1005.16 265.612,1004.59 265.612,1004.01L262.077,959.012Z\"\n                  style={{ fill: 'rgb(196, 173, 142)' }}\n                />\n                <g transform=\"matrix(0.866025,-0.5,1,0.57735,0,-45)\">\n                  <ellipse\n                    cx=\"-848.416\"\n                    cy=\"1004.25\"\n                    rx=\"6.062\"\n                    ry=\"5.25\"\n                    style={{ fill: 'rgb(255, 125, 0)' }}\n                  />\n                </g>\n              </g>\n              <g transform=\"matrix(1,0,0,1,322.952,-147.818)\">\n                <path\n                  d=\"M262.077,959.012L276.923,959.012L273.388,1004.01C273.388,1004.59 273.009,1005.16 272.25,1005.6C270.732,1006.48 268.268,1006.48 266.75,1005.6C265.991,1005.16 265.612,1004.59 265.612,1004.01L262.077,959.012Z\"\n                  style={{ fill: 'rgb(196, 173, 142)' }}\n                />\n                <g transform=\"matrix(0.866025,-0.5,1,0.57735,0,-45)\">\n                  <ellipse\n                    cx=\"-848.416\"\n                    cy=\"1004.25\"\n                    rx=\"6.062\"\n                    ry=\"5.25\"\n                    style={{ fill: 'rgb(255, 125, 0)' }}\n                  />\n                </g>\n              </g>\n              <g>\n                <g transform=\"matrix(1.42334,-0.821763,1.11271,0.642426,-1439.64,459.621)\">\n                  <rect\n                    x=\"495.52\"\n                    y=\"1057.87\"\n                    width=\"105.078\"\n                    height=\"91\"\n                    style={{ fill: 'rgb(253, 243, 228)' }}\n                  />\n                </g>\n                <g transform=\"matrix(1.40786,-0.812831,6.60237e-16,1.99081,-2052.17,-84.7286)\">\n                  <rect\n                    x=\"1844.06\"\n                    y=\"1192.54\"\n                    width=\"106.232\"\n                    height=\"92\"\n                    style={{ fill: 'rgb(196, 173, 142)' }}\n                  />\n                </g>\n                <g transform=\"matrix(1.26159,-0.728382,5.91642e-16,1.78397,-1774.67,11.2303)\">\n                  <path\n                    d=\"M1950.29,1194.38C1950.29,1193.37 1949.41,1192.54 1948.34,1192.54L1846.01,1192.54C1844.93,1192.54 1844.06,1193.37 1844.06,1194.38L1844.06,1282.7C1844.06,1283.72 1844.93,1284.54 1846.01,1284.54L1948.34,1284.54C1949.41,1284.54 1950.29,1283.72 1950.29,1282.7L1950.29,1194.38Z\"\n                    style={{ fill: 'rgb(132, 97, 51)' }}\n                  />\n                </g>\n                <g transform=\"matrix(1.2198,-0.704254,5.72043e-16,1.72488,-1697.6,37.2103)\">\n                  <path\n                    d=\"M1950.29,1194.38C1950.29,1193.37 1949.41,1192.54 1948.34,1192.54L1846.01,1192.54C1844.93,1192.54 1844.06,1193.37 1844.06,1194.38L1844.06,1282.7C1844.06,1283.72 1844.93,1284.54 1846.01,1284.54L1948.34,1284.54C1949.41,1284.54 1950.29,1283.72 1950.29,1282.7L1950.29,1194.38Z\"\n                    style={{ fill: 'rgb(196, 173, 142)' }}\n                  />\n                </g>\n                <g transform=\"matrix(0.707187,0.408295,9.06119e-17,1.54833,-733.949,683.612)\">\n                  <rect\n                    x=\"1663.92\"\n                    y=\"-407.511\"\n                    width=\"143.183\"\n                    height=\"118.292\"\n                    style={{ fill: 'rgb(240, 218, 183)' }}\n                  />\n                </g>\n                <g transform=\"matrix(1.64553,-0.950049,1.17482,0.678285,-1632.45,473.879)\">\n                  <rect\n                    x=\"495.52\"\n                    y=\"1057.87\"\n                    width=\"105.078\"\n                    height=\"91\"\n                    style={{ fill: 'rgb(253, 243, 228)' }}\n                  />\n                </g>\n                <g transform=\"matrix(0.74666,0.431085,2.3583e-17,0.135259,-816.63,57.1397)\">\n                  <rect\n                    x=\"1663.92\"\n                    y=\"-407.511\"\n                    width=\"143.183\"\n                    height=\"118.292\"\n                    style={{ fill: 'rgb(240, 218, 183)' }}\n                  />\n                </g>\n                <g transform=\"matrix(1.64553,-0.950049,1.17482,0.678285,-1632.45,473.879)\">\n                  <rect\n                    x=\"495.52\"\n                    y=\"1057.87\"\n                    width=\"105.078\"\n                    height=\"91\"\n                    style={{ fill: 'rgb(253, 243, 228)' }}\n                  />\n                </g>\n                <g transform=\"matrix(0.750082,0,0,0.750082,163.491,354.191)\">\n                  <g transform=\"matrix(1.75943,-1.01581,1.75879e-16,0.632893,-2721.54,1876.43)\">\n                    <rect\n                      x=\"1844.06\"\n                      y=\"1192.54\"\n                      width=\"106.232\"\n                      height=\"92\"\n                      style={{ fill: 'rgb(196, 173, 142)' }}\n                    />\n                  </g>\n                  <g transform=\"matrix(0.290956,-0.167984,2.90849e-17,0.104661,69.4195,919.311)\">\n                    <path\n                      d=\"M1950.29,1238.54C1950.29,1213.15 1944.73,1192.54 1937.88,1192.54L1856.47,1192.54C1849.62,1192.54 1844.06,1213.15 1844.06,1238.54C1844.06,1263.93 1849.62,1284.54 1856.47,1284.54L1937.88,1284.54C1944.73,1284.54 1950.29,1263.93 1950.29,1238.54Z\"\n                      style={{ fill: 'rgb(132, 97, 51)' }}\n                    />\n                  </g>\n                  <g transform=\"matrix(0.262716,-0.151679,8.27418e-18,0.0364999,121.496,970.53)\">\n                    <path\n                      d=\"M1950.29,1238.54C1950.29,1213.15 1948.14,1192.54 1945.5,1192.54L1848.85,1192.54C1846.2,1192.54 1844.06,1213.15 1844.06,1238.54C1844.06,1263.93 1846.2,1284.54 1848.85,1284.54L1945.5,1284.54C1948.14,1284.54 1950.29,1263.93 1950.29,1238.54Z\"\n                      style={{ fill: 'rgb(246, 220, 185)' }}\n                    />\n                  </g>\n                  <g transform=\"matrix(1.77877,-1.02697,0.0581765,0.0335882,-425.293,1228.27)\">\n                    <rect\n                      x=\"495.52\"\n                      y=\"1057.87\"\n                      width=\"105.078\"\n                      height=\"91\"\n                      style={{ fill: 'rgb(240, 218, 183)' }}\n                    />\n                  </g>\n                  <g transform=\"matrix(0.0369741,0.021347,4.72735e-17,0.492225,456.143,919.985)\">\n                    <rect\n                      x=\"1663.92\"\n                      y=\"-407.511\"\n                      width=\"143.183\"\n                      height=\"118.292\"\n                      style={{ fill: 'rgb(240, 218, 183)' }}\n                    />\n                  </g>\n                </g>\n                <g transform=\"matrix(0.750082,0,0,0.750082,163.491,309.191)\">\n                  <g transform=\"matrix(1.75943,-1.01581,1.75879e-16,0.632893,-2721.54,1876.43)\">\n                    <rect\n                      x=\"1844.06\"\n                      y=\"1192.54\"\n                      width=\"106.232\"\n                      height=\"92\"\n                      style={{ fill: 'rgb(196, 173, 142)' }}\n                    />\n                  </g>\n                  <g transform=\"matrix(0.290956,-0.167984,2.90849e-17,0.104661,69.4195,919.311)\">\n                    <path\n                      d=\"M1950.29,1238.54C1950.29,1213.15 1944.73,1192.54 1937.88,1192.54L1856.47,1192.54C1849.62,1192.54 1844.06,1213.15 1844.06,1238.54C1844.06,1263.93 1849.62,1284.54 1856.47,1284.54L1937.88,1284.54C1944.73,1284.54 1950.29,1263.93 1950.29,1238.54Z\"\n                      style={{ fill: 'rgb(132, 97, 51)' }}\n                    />\n                  </g>\n                  <g transform=\"matrix(0.262716,-0.151679,8.27418e-18,0.0364999,121.496,970.53)\">\n                    <path\n                      d=\"M1950.29,1238.54C1950.29,1213.15 1948.14,1192.54 1945.5,1192.54L1848.85,1192.54C1846.2,1192.54 1844.06,1213.15 1844.06,1238.54C1844.06,1263.93 1846.2,1284.54 1848.85,1284.54L1945.5,1284.54C1948.14,1284.54 1950.29,1263.93 1950.29,1238.54Z\"\n                      style={{ fill: 'rgb(246, 220, 185)' }}\n                    />\n                  </g>\n                  <g transform=\"matrix(1.77877,-1.02697,0.0581765,0.0335882,-425.293,1228.27)\">\n                    <rect\n                      x=\"495.52\"\n                      y=\"1057.87\"\n                      width=\"105.078\"\n                      height=\"91\"\n                      style={{ fill: 'rgb(240, 218, 183)' }}\n                    />\n                  </g>\n                  <g transform=\"matrix(0.0369741,0.021347,4.72735e-17,0.492225,456.143,919.985)\">\n                    <rect\n                      x=\"1663.92\"\n                      y=\"-407.511\"\n                      width=\"143.183\"\n                      height=\"118.292\"\n                      style={{ fill: 'rgb(240, 218, 183)' }}\n                    />\n                  </g>\n                </g>\n                <g transform=\"matrix(0.750082,0,0,0.750082,163.491,263.931)\">\n                  <g transform=\"matrix(1.75943,-1.01581,1.75879e-16,0.632893,-2721.54,1876.43)\">\n                    <rect\n                      x=\"1844.06\"\n                      y=\"1192.54\"\n                      width=\"106.232\"\n                      height=\"92\"\n                      style={{ fill: 'rgb(196, 173, 142)' }}\n                    />\n                  </g>\n                  <g transform=\"matrix(0.290956,-0.167984,2.90849e-17,0.104661,69.4195,919.311)\">\n                    <path\n                      d=\"M1950.29,1238.54C1950.29,1213.15 1944.73,1192.54 1937.88,1192.54L1856.47,1192.54C1849.62,1192.54 1844.06,1213.15 1844.06,1238.54C1844.06,1263.93 1849.62,1284.54 1856.47,1284.54L1937.88,1284.54C1944.73,1284.54 1950.29,1263.93 1950.29,1238.54Z\"\n                      style={{ fill: 'rgb(132, 97, 51)' }}\n                    />\n                  </g>\n                  <g transform=\"matrix(0.262716,-0.151679,8.27418e-18,0.0364999,121.496,970.53)\">\n                    <path\n                      d=\"M1950.29,1238.54C1950.29,1213.15 1948.14,1192.54 1945.5,1192.54L1848.85,1192.54C1846.2,1192.54 1844.06,1213.15 1844.06,1238.54C1844.06,1263.93 1846.2,1284.54 1848.85,1284.54L1945.5,1284.54C1948.14,1284.54 1950.29,1263.93 1950.29,1238.54Z\"\n                      style={{ fill: 'rgb(246, 220, 185)' }}\n                    />\n                  </g>\n                  <g transform=\"matrix(1.77877,-1.02697,0.0581765,0.0335882,-425.293,1228.27)\">\n                    <rect\n                      x=\"495.52\"\n                      y=\"1057.87\"\n                      width=\"105.078\"\n                      height=\"91\"\n                      style={{ fill: 'rgb(240, 218, 183)' }}\n                    />\n                  </g>\n                  <g transform=\"matrix(0.0369741,0.021347,4.72735e-17,0.492225,456.143,919.985)\">\n                    <rect\n                      x=\"1663.92\"\n                      y=\"-407.511\"\n                      width=\"143.183\"\n                      height=\"118.292\"\n                      style={{ fill: 'rgb(240, 218, 183)' }}\n                    />\n                  </g>\n                </g>\n                <path\n                  d=\"M555.753,832.474L555.753,921.408L630.693,878.141L630.693,789.207L555.753,832.474Z\"\n                  style={{ fillOpacity: 0.1 }}\n                />\n                <g transform=\"matrix(0.750082,0,0,0.750082,236.431,272.852)\">\n                  <g transform=\"matrix(1.64553,-0.950049,1.14552,0.661368,-1606.78,467.933)\">\n                    <rect\n                      x=\"495.52\"\n                      y=\"1057.87\"\n                      width=\"105.078\"\n                      height=\"91\"\n                      style={{ fill: 'rgb(253, 243, 228)' }}\n                    />\n                  </g>\n                  <g transform=\"matrix(1.54477,-0.891873,1.05847,0.611108,-1456.84,490.734)\">\n                    <rect\n                      x=\"495.52\"\n                      y=\"1057.87\"\n                      width=\"105.078\"\n                      height=\"91\"\n                      style={{ fill: 'rgb(132, 97, 51)' }}\n                    />\n                  </g>\n                  <g transform=\"matrix(1.27607,-0.736739,0.751435,0.433841,-970.952,617.519)\">\n                    <rect\n                      x=\"495.52\"\n                      y=\"1057.87\"\n                      width=\"105.078\"\n                      height=\"91\"\n                      style={{ fill: 'rgb(240, 218, 183)' }}\n                    />\n                  </g>\n                  <g transform=\"matrix(1.62765,-0.939723,1.42156e-16,0.5,-2476.81,1893.62)\">\n                    <rect\n                      x=\"1844.06\"\n                      y=\"1192.54\"\n                      width=\"106.232\"\n                      height=\"92\"\n                      style={{ fill: 'rgb(196, 173, 142)' }}\n                    />\n                  </g>\n                  <g transform=\"matrix(1.62765,-0.939723,1.42156e-16,0.5,-2476.81,1893.62)\">\n                    <rect\n                      x=\"1844.06\"\n                      y=\"1192.54\"\n                      width=\"106.232\"\n                      height=\"92\"\n                      style={{ fill: 'rgb(196, 173, 142)' }}\n                    />\n                  </g>\n                  <g transform=\"matrix(0.728038,0.420333,3.52595e-17,0.377589,-790.978,151.274)\">\n                    <rect\n                      x=\"1663.92\"\n                      y=\"-407.511\"\n                      width=\"143.183\"\n                      height=\"118.292\"\n                      style={{ fill: 'rgb(240, 218, 183)' }}\n                    />\n                  </g>\n                  <g transform=\"matrix(1.75943,-1.01581,1.75879e-16,0.632893,-2726.83,1873.38)\">\n                    <rect\n                      x=\"1844.06\"\n                      y=\"1192.54\"\n                      width=\"106.232\"\n                      height=\"92\"\n                      style={{ fill: 'rgb(196, 173, 142)' }}\n                    />\n                  </g>\n                  <g>\n                    <g transform=\"matrix(1.75943,-1.01581,1.75879e-16,0.632893,-2721.54,1876.43)\">\n                      <rect\n                        x=\"1844.06\"\n                        y=\"1192.54\"\n                        width=\"106.232\"\n                        height=\"92\"\n                        style={{ fill: 'rgb(196, 173, 142)' }}\n                      />\n                    </g>\n                    <g transform=\"matrix(0.290956,-0.167984,2.90849e-17,0.104661,69.4195,919.311)\">\n                      <path\n                        d=\"M1950.29,1238.54C1950.29,1213.15 1944.73,1192.54 1937.88,1192.54L1856.47,1192.54C1849.62,1192.54 1844.06,1213.15 1844.06,1238.54C1844.06,1263.93 1849.62,1284.54 1856.47,1284.54L1937.88,1284.54C1944.73,1284.54 1950.29,1263.93 1950.29,1238.54Z\"\n                        style={{ fill: 'rgb(132, 97, 51)' }}\n                      />\n                    </g>\n                    <g transform=\"matrix(0.262716,-0.151679,8.27418e-18,0.0364999,121.496,970.53)\">\n                      <path\n                        d=\"M1950.29,1238.54C1950.29,1213.15 1948.14,1192.54 1945.5,1192.54L1848.85,1192.54C1846.2,1192.54 1844.06,1213.15 1844.06,1238.54C1844.06,1263.93 1846.2,1284.54 1848.85,1284.54L1945.5,1284.54C1948.14,1284.54 1950.29,1263.93 1950.29,1238.54Z\"\n                        style={{ fill: 'rgb(246, 220, 185)' }}\n                      />\n                    </g>\n                    <g transform=\"matrix(1.77877,-1.02697,0.0581765,0.0335882,-425.293,1228.27)\">\n                      <rect\n                        x=\"495.52\"\n                        y=\"1057.87\"\n                        width=\"105.078\"\n                        height=\"91\"\n                        style={{ fill: 'rgb(240, 218, 183)' }}\n                      />\n                    </g>\n                    <g transform=\"matrix(0.0369741,0.021347,4.72735e-17,0.492225,456.143,919.985)\">\n                      <rect\n                        x=\"1663.92\"\n                        y=\"-407.511\"\n                        width=\"143.183\"\n                        height=\"118.292\"\n                        style={{ fill: 'rgb(240, 218, 183)' }}\n                      />\n                    </g>\n                  </g>\n                </g>\n                <g transform=\"matrix(1.62765,-0.939723,4.80984e-17,0.173913,-2468.81,2307.87)\">\n                  <rect\n                    x=\"1844.06\"\n                    y=\"1192.54\"\n                    width=\"106.232\"\n                    height=\"92\"\n                    style={{ fill: 'rgb(196, 173, 142)' }}\n                  />\n                </g>\n              </g>\n              <g>\n                <g transform=\"matrix(0.479077,0.276595,-0.564376,0.325843,598.357,-129.986)\">\n                  <path\n                    d=\"M1776.14,1326C1776.14,1321.19 1772.15,1317.28 1767.24,1317.28L1684.37,1317.28C1679.46,1317.28 1675.47,1321.19 1675.47,1326L1675.47,1395.75C1675.47,1400.56 1679.46,1404.46 1684.37,1404.46L1767.24,1404.46C1772.15,1404.46 1776.14,1400.56 1776.14,1395.75L1776.14,1326Z\"\n                    style={{ fill: 'white' }}\n                  />\n                </g>\n                <g transform=\"matrix(2.61622,0,0,2.61622,-2305.73,162.161)\">\n                  <g transform=\"matrix(1.09915,-0.634597,1.26919,0.73277,-299.167,-62.4615)\">\n                    <ellipse\n                      cx=\"412.719\"\n                      cy=\"770.575\"\n                      rx=\"6.303\"\n                      ry=\"5.459\"\n                      style={{ fill: 'rgb(255, 125, 0)' }}\n                    />\n                  </g>\n                  <g transform=\"matrix(0.238212,-0.137532,0.178659,0.103149,875.064,207.93)\">\n                    <text\n                      x=\"413.474px\"\n                      y=\"892.067px\"\n                      style={{\n                        fontFamily: 'NunitoSans-Bold, Nunito Sans',\n                        fontWeight: 700,\n                        fontSize: 41.569,\n                        fill: 'white',\n                      }}\n                    >\n                      ?\n                    </text>\n                  </g>\n                </g>\n              </g>\n            </g>\n          </g>\n        </g>\n      </svg>\n    );\n  },\n});\n"
  },
  {
    "path": "packages/web-vue/components/result/500.tsx",
    "content": "import { defineComponent } from 'vue';\n\nexport default defineComponent({\n  name: 'ResultServerError',\n  render() {\n    return (\n      <svg\n        width=\"100%\"\n        height=\"100%\"\n        viewBox=\"0 0 213 213\"\n        style=\"fill-rule: evenodd; clip-rule: evenodd; stroke-linejoin: round; stroke-miterlimit: 2;\"\n      >\n        <g transform=\"matrix(1,0,0,1,-483.054,-445.448)\">\n          <g>\n            <g transform=\"matrix(1,0,0,1,-463.699,-87.5516)\">\n              <circle\n                cx=\"1053.23\"\n                cy=\"639.477\"\n                r=\"106.477\"\n                style=\"fill: rgb(235, 238, 246);\"\n              ></circle>\n            </g>\n            <g transform=\"matrix(0.384532,-0.222009,0.444019,0.256354,-0.569781,260.021)\">\n              <path\n                d=\"M84.299,1269.38C84.299,1261.99 78.301,1256 70.913,1256L-56.874,1256C-64.261,1256 -70.259,1261.99 -70.259,1269.38L-70.259,1376.46C-70.259,1383.85 -64.261,1389.85 -56.874,1389.85L70.913,1389.85C78.301,1389.85 84.299,1383.85 84.299,1376.46L84.299,1269.38Z\"\n                style=\"fill-opacity: 0.1;\"\n              ></path>\n            </g>\n            <g transform=\"matrix(0.384532,-0.222009,0.444019,0.256354,-0.569781,218.845)\">\n              <path\n                d=\"M84.299,1269.38C84.299,1261.99 78.301,1256 70.913,1256L-56.874,1256C-64.261,1256 -70.259,1261.99 -70.259,1269.38L-70.259,1376.46C-70.259,1383.85 -64.261,1389.85 -56.874,1389.85L70.913,1389.85C78.301,1389.85 84.299,1383.85 84.299,1376.46L84.299,1269.38Z\"\n                style=\"fill: rgb(64, 128, 255);\"\n              ></path>\n            </g>\n            <g transform=\"matrix(0.361496,-0.20871,0.41742,0.240997,34.7805,238.807)\">\n              <path\n                d=\"M84.299,1269.38C84.299,1261.99 78.301,1256 70.913,1256L-56.874,1256C-64.261,1256 -70.259,1261.99 -70.259,1269.38L-70.259,1376.46C-70.259,1383.85 -64.261,1389.85 -56.874,1389.85L70.913,1389.85C78.301,1389.85 84.299,1383.85 84.299,1376.46L84.299,1269.38Z\"\n                style=\"fill: rgb(0, 85, 255);\"\n              ></path>\n            </g>\n            <g transform=\"matrix(0.341853,-0.197369,0.394738,0.227902,64.9247,257.804)\">\n              <path\n                d=\"M84.299,1269.38C84.299,1261.99 78.301,1256 70.913,1256L-56.874,1256C-64.261,1256 -70.259,1261.99 -70.259,1269.38L-70.259,1376.46C-70.259,1383.85 -64.261,1389.85 -56.874,1389.85L70.913,1389.85C78.301,1389.85 84.299,1383.85 84.299,1376.46L84.299,1269.38Z\"\n                style=\"fill: rgb(29, 105, 255);\"\n              ></path>\n            </g>\n            <g transform=\"matrix(0.428916,0,0,0.428916,19.0588,329.956)\">\n              <clipPath id=\"_clip1\">\n                <path d=\"M1461.07,528.445C1461.07,530.876 1459.6,533.196 1456.6,534.928L1342.04,601.072C1335.41,604.896 1323.83,604.415 1316.18,600L1205.33,536C1201.14,533.585 1199,530.489 1199,527.555L1199,559.555C1199,562.489 1201.14,565.585 1205.33,568L1316.18,632C1323.83,636.415 1335.41,636.896 1342.04,633.072L1456.6,566.928C1459.6,565.196 1461.07,562.876 1461.07,560.445L1461.07,528.445Z\"></path>\n              </clipPath>\n              <g clip-path=\"url(#_clip1)\">\n                <g transform=\"matrix(2.33146,-0,-0,2.33146,1081.79,269.266)\">\n                  <use\n                    href=\"#_Image2\"\n                    x=\"50.54\"\n                    y=\"112.301\"\n                    width=\"112.406px\"\n                    height=\"46.365px\"\n                    transform=\"matrix(0.99474,0,0,0.98649,0,0)\"\n                  ></use>\n                </g>\n              </g>\n            </g>\n            <g transform=\"matrix(0.347769,0.200785,3.44852e-18,0.545466,52.0929,265.448)\">\n              <path\n                d=\"M1480.33,34.813C1480.33,34.162 1479.7,33.634 1478.94,33.634L1396.27,33.634C1395.5,33.634 1394.88,34.162 1394.88,34.813C1394.88,35.464 1395.5,35.993 1396.27,35.993L1478.94,35.993C1479.7,35.993 1480.33,35.464 1480.33,34.813Z\"\n                style=\"fill: white;\"\n              ></path>\n            </g>\n            <g transform=\"matrix(0.347769,0.200785,3.44852e-18,0.545466,52.0929,268.45)\">\n              <path\n                d=\"M1480.33,34.813C1480.33,34.162 1479.7,33.634 1478.94,33.634L1396.27,33.634C1395.5,33.634 1394.88,34.162 1394.88,34.813C1394.88,35.464 1395.5,35.993 1396.27,35.993L1478.94,35.993C1479.7,35.993 1480.33,35.464 1480.33,34.813Z\"\n                style=\"fill: white;\"\n              ></path>\n            </g>\n            <g transform=\"matrix(0.347769,0.200785,3.44852e-18,0.545466,52.0929,271.452)\">\n              <path\n                d=\"M1480.33,34.813C1480.33,34.162 1479.7,33.634 1478.94,33.634L1396.27,33.634C1395.5,33.634 1394.88,34.162 1394.88,34.813C1394.88,35.464 1395.5,35.993 1396.27,35.993L1478.94,35.993C1479.7,35.993 1480.33,35.464 1480.33,34.813Z\"\n                style=\"fill: white;\"\n              ></path>\n            </g>\n            <g transform=\"matrix(0.360289,-0.208013,-4.39887e-18,0.576941,37.5847,124.262)\">\n              <rect\n                x=\"1621.2\"\n                y=\"1370.57\"\n                width=\"57.735\"\n                height=\"5.947\"\n                style=\"fill: rgb(106, 161, 255);\"\n              ></rect>\n            </g>\n            <g transform=\"matrix(0.185726,-0.107229,-1.84168e-18,0.247635,307.505,420.796)\">\n              <ellipse\n                cx=\"1566.31\"\n                cy=\"1372.3\"\n                rx=\"4\"\n                ry=\"3.464\"\n                style=\"fill: rgb(64, 128, 255);\"\n              ></ellipse>\n            </g>\n            <g transform=\"matrix(0.185726,-0.107229,-1.84168e-18,0.247635,310.507,419.062)\">\n              <ellipse\n                cx=\"1566.31\"\n                cy=\"1372.3\"\n                rx=\"4\"\n                ry=\"3.464\"\n                style=\"fill: rgb(64, 128, 255);\"\n              ></ellipse>\n            </g>\n            <g transform=\"matrix(0.185726,-0.107229,-1.84168e-18,0.247635,313.509,417.329)\">\n              <ellipse\n                cx=\"1566.31\"\n                cy=\"1372.3\"\n                rx=\"4\"\n                ry=\"3.464\"\n                style=\"fill: white;\"\n              ></ellipse>\n            </g>\n            <g transform=\"matrix(0.185726,-0.107229,-1.84168e-18,0.247635,316.512,415.595)\">\n              <ellipse\n                cx=\"1566.31\"\n                cy=\"1372.3\"\n                rx=\"4\"\n                ry=\"3.464\"\n                style=\"fill: rgb(64, 128, 255);\"\n              ></ellipse>\n            </g>\n            <g transform=\"matrix(0.185726,-0.107229,-1.84168e-18,0.247635,319.514,413.862)\">\n              <ellipse\n                cx=\"1566.31\"\n                cy=\"1372.3\"\n                rx=\"4\"\n                ry=\"3.464\"\n                style=\"fill: rgb(64, 128, 255);\"\n              ></ellipse>\n            </g>\n            <g transform=\"matrix(0.384532,-0.222009,0.444019,0.256354,-0.569781,196.542)\">\n              <clipPath id=\"_clip3\">\n                <path d=\"M84.299,1269.38C84.299,1261.99 78.301,1256 70.913,1256L-56.874,1256C-64.261,1256 -70.259,1261.99 -70.259,1269.38L-70.259,1376.46C-70.259,1383.85 -64.261,1389.85 -56.874,1389.85L70.913,1389.85C78.301,1389.85 84.299,1383.85 84.299,1376.46L84.299,1269.38Z\"></path>\n              </clipPath>\n              <g clip-path=\"url(#_clip3)\">\n                <g transform=\"matrix(1.30028,1.12608,-2.25216,1.95042,68.2716,1030.07)\">\n                  <use\n                    href=\"#_Image4\"\n                    x=\"50.54\"\n                    y=\"56.312\"\n                    width=\"112.406px\"\n                    height=\"64.897px\"\n                    transform=\"matrix(0.99474,0,0,0.998422,0,0)\"\n                  ></use>\n                </g>\n              </g>\n            </g>\n            <g transform=\"matrix(0.361496,-0.20871,0.41742,0.240997,34.7805,216.764)\">\n              <path\n                d=\"M84.299,1269.38C84.299,1261.99 78.301,1256 70.913,1256L-56.874,1256C-64.261,1256 -70.259,1261.99 -70.259,1269.38L-70.259,1376.46C-70.259,1383.85 -64.261,1389.85 -56.874,1389.85L70.913,1389.85C78.301,1389.85 84.299,1383.85 84.299,1376.46L84.299,1269.38Z\"\n                style=\"fill: rgb(0, 85, 255);\"\n              ></path>\n            </g>\n            <g transform=\"matrix(0.341853,-0.197369,0.394738,0.227902,64.9247,235.762)\">\n              <path\n                d=\"M84.299,1269.38C84.299,1261.99 78.301,1256 70.913,1256L-56.874,1256C-64.261,1256 -70.259,1261.99 -70.259,1269.38L-70.259,1376.46C-70.259,1383.85 -64.261,1389.85 -56.874,1389.85L70.913,1389.85C78.301,1389.85 84.299,1383.85 84.299,1376.46L84.299,1269.38Z\"\n                style=\"fill: rgb(29, 105, 255);\"\n              ></path>\n            </g>\n            <g transform=\"matrix(0.428916,0,0,0.428916,19.0588,307.652)\">\n              <clipPath id=\"_clip5\">\n                <path d=\"M1461.07,528.445C1461.07,530.876 1459.6,533.196 1456.6,534.928L1342.04,601.072C1335.41,604.896 1323.83,604.415 1316.18,600L1205.33,536C1201.14,533.585 1199,530.489 1199,527.555L1199,559.555C1199,562.489 1201.14,565.585 1205.33,568L1316.18,632C1323.83,636.415 1335.41,636.896 1342.04,633.072L1456.6,566.928C1459.6,565.196 1461.07,562.876 1461.07,560.445L1461.07,528.445Z\"></path>\n              </clipPath>\n              <g clip-path=\"url(#_clip5)\">\n                <g transform=\"matrix(2.33146,-0,-0,2.33146,1081.79,321.266)\">\n                  <use\n                    href=\"#_Image2\"\n                    x=\"50.54\"\n                    y=\"89.692\"\n                    width=\"112.406px\"\n                    height=\"46.365px\"\n                    transform=\"matrix(0.99474,0,0,0.98649,0,0)\"\n                  ></use>\n                </g>\n              </g>\n            </g>\n            <g transform=\"matrix(0.347769,0.200785,3.44852e-18,0.545466,52.0929,243.144)\">\n              <path\n                d=\"M1480.33,34.813C1480.33,34.162 1479.7,33.634 1478.94,33.634L1396.27,33.634C1395.5,33.634 1394.88,34.162 1394.88,34.813C1394.88,35.464 1395.5,35.993 1396.27,35.993L1478.94,35.993C1479.7,35.993 1480.33,35.464 1480.33,34.813Z\"\n                style=\"fill: white;\"\n              ></path>\n            </g>\n            <g transform=\"matrix(0.347769,0.200785,3.44852e-18,0.545466,52.0929,246.146)\">\n              <path\n                d=\"M1480.33,34.813C1480.33,34.162 1479.7,33.634 1478.94,33.634L1396.27,33.634C1395.5,33.634 1394.88,34.162 1394.88,34.813C1394.88,35.464 1395.5,35.993 1396.27,35.993L1478.94,35.993C1479.7,35.993 1480.33,35.464 1480.33,34.813Z\"\n                style=\"fill: white;\"\n              ></path>\n            </g>\n            <g transform=\"matrix(0.347769,0.200785,3.44852e-18,0.545466,52.0929,249.149)\">\n              <path\n                d=\"M1480.33,34.813C1480.33,34.162 1479.7,33.634 1478.94,33.634L1396.27,33.634C1395.5,33.634 1394.88,34.162 1394.88,34.813C1394.88,35.464 1395.5,35.993 1396.27,35.993L1478.94,35.993C1479.7,35.993 1480.33,35.464 1480.33,34.813Z\"\n                style=\"fill: white;\"\n              ></path>\n            </g>\n            <g transform=\"matrix(0.360289,-0.208013,-4.39887e-18,0.576941,37.5847,101.958)\">\n              <rect\n                x=\"1621.2\"\n                y=\"1370.57\"\n                width=\"57.735\"\n                height=\"5.947\"\n                style=\"fill: rgb(106, 161, 255);\"\n              ></rect>\n            </g>\n            <g transform=\"matrix(0.185726,-0.107229,-1.84168e-18,0.247635,307.505,398.492)\">\n              <ellipse\n                cx=\"1566.31\"\n                cy=\"1372.3\"\n                rx=\"4\"\n                ry=\"3.464\"\n                style=\"fill: rgb(64, 128, 255);\"\n              ></ellipse>\n            </g>\n            <g transform=\"matrix(0.185726,-0.107229,-1.84168e-18,0.247635,310.507,396.759)\">\n              <ellipse\n                cx=\"1566.31\"\n                cy=\"1372.3\"\n                rx=\"4\"\n                ry=\"3.464\"\n                style=\"fill: white;\"\n              ></ellipse>\n            </g>\n            <g transform=\"matrix(0.185726,-0.107229,-1.84168e-18,0.247635,313.509,395.025)\">\n              <ellipse\n                cx=\"1566.31\"\n                cy=\"1372.3\"\n                rx=\"4\"\n                ry=\"3.464\"\n                style=\"fill: rgb(64, 128, 255);\"\n              ></ellipse>\n            </g>\n            <g transform=\"matrix(0.185726,-0.107229,-1.84168e-18,0.247635,316.512,393.292)\">\n              <ellipse\n                cx=\"1566.31\"\n                cy=\"1372.3\"\n                rx=\"4\"\n                ry=\"3.464\"\n                style=\"fill: rgb(64, 128, 255);\"\n              ></ellipse>\n            </g>\n            <g transform=\"matrix(0.185726,-0.107229,-1.84168e-18,0.247635,319.514,391.558)\">\n              <ellipse\n                cx=\"1566.31\"\n                cy=\"1372.3\"\n                rx=\"4\"\n                ry=\"3.464\"\n                style=\"fill: rgb(64, 128, 255);\"\n              ></ellipse>\n            </g>\n            <g transform=\"matrix(0.384532,-0.222009,0.444019,0.256354,-0.569781,171.832)\">\n              <clipPath id=\"_clip6\">\n                <path d=\"M84.299,1269.38C84.299,1261.99 78.301,1256 70.913,1256L-56.874,1256C-64.261,1256 -70.259,1261.99 -70.259,1269.38L-70.259,1376.46C-70.259,1383.85 -64.261,1389.85 -56.874,1389.85L70.913,1389.85C78.301,1389.85 84.299,1383.85 84.299,1376.46L84.299,1269.38Z\"></path>\n              </clipPath>\n              <g clip-path=\"url(#_clip6)\">\n                <g transform=\"matrix(1.30028,1.12608,-2.25216,1.95042,12.6215,1078.27)\">\n                  <use\n                    href=\"#_Image7\"\n                    x=\"50.54\"\n                    y=\"31.563\"\n                    width=\"112.406px\"\n                    height=\"64.897px\"\n                    transform=\"matrix(0.99474,0,0,0.998422,0,0)\"\n                  ></use>\n                </g>\n              </g>\n            </g>\n            <g transform=\"matrix(0.361496,-0.20871,0.41742,0.240997,34.7805,192.055)\">\n              <path\n                d=\"M84.299,1269.38C84.299,1261.99 78.301,1256 70.913,1256L-56.874,1256C-64.261,1256 -70.259,1261.99 -70.259,1269.38L-70.259,1376.46C-70.259,1383.85 -64.261,1389.85 -56.874,1389.85L70.913,1389.85C78.301,1389.85 84.299,1383.85 84.299,1376.46L84.299,1269.38Z\"\n                style=\"fill: rgb(0, 85, 255);\"\n              ></path>\n            </g>\n            <g transform=\"matrix(0.341853,-0.197369,0.394738,0.227902,64.9247,211.052)\">\n              <path\n                d=\"M84.299,1269.38C84.299,1261.99 78.301,1256 70.913,1256L-56.874,1256C-64.261,1256 -70.259,1261.99 -70.259,1269.38L-70.259,1376.46C-70.259,1383.85 -64.261,1389.85 -56.874,1389.85L70.913,1389.85C78.301,1389.85 84.299,1383.85 84.299,1376.46L84.299,1269.38Z\"\n                style=\"fill: rgb(29, 105, 255);\"\n              ></path>\n            </g>\n            <g transform=\"matrix(0.428916,0,0,0.428916,19.0588,282.943)\">\n              <clipPath id=\"_clip8\">\n                <path d=\"M1461.07,528.445C1461.07,530.876 1459.6,533.196 1456.6,534.928L1342.04,601.072C1335.41,604.896 1323.83,604.415 1316.18,600L1205.33,536C1201.14,533.585 1199,530.489 1199,527.555L1199,559.555C1199,562.489 1201.14,565.585 1205.33,568L1316.18,632C1323.83,636.415 1335.41,636.896 1342.04,633.072L1456.6,566.928C1459.6,565.196 1461.07,562.876 1461.07,560.445L1461.07,528.445Z\"></path>\n              </clipPath>\n              <g clip-path=\"url(#_clip8)\">\n                <g transform=\"matrix(2.33146,-0,-0,2.33146,1081.79,378.876)\">\n                  <use\n                    href=\"#_Image2\"\n                    x=\"50.54\"\n                    y=\"64.644\"\n                    width=\"112.406px\"\n                    height=\"46.365px\"\n                    transform=\"matrix(0.99474,0,0,0.98649,0,0)\"\n                  ></use>\n                </g>\n              </g>\n            </g>\n            <g transform=\"matrix(0.347769,0.200785,3.44852e-18,0.545466,52.0929,218.434)\">\n              <path\n                d=\"M1480.33,34.813C1480.33,34.162 1479.7,33.634 1478.94,33.634L1396.27,33.634C1395.5,33.634 1394.88,34.162 1394.88,34.813C1394.88,35.464 1395.5,35.993 1396.27,35.993L1478.94,35.993C1479.7,35.993 1480.33,35.464 1480.33,34.813Z\"\n                style=\"fill: white;\"\n              ></path>\n            </g>\n            <g transform=\"matrix(0.347769,0.200785,3.44852e-18,0.545466,52.0929,221.437)\">\n              <path\n                d=\"M1480.33,34.813C1480.33,34.162 1479.7,33.634 1478.94,33.634L1396.27,33.634C1395.5,33.634 1394.88,34.162 1394.88,34.813C1394.88,35.464 1395.5,35.993 1396.27,35.993L1478.94,35.993C1479.7,35.993 1480.33,35.464 1480.33,34.813Z\"\n                style=\"fill: white;\"\n              ></path>\n            </g>\n            <g transform=\"matrix(0.347769,0.200785,3.44852e-18,0.545466,52.0929,224.439)\">\n              <path\n                d=\"M1480.33,34.813C1480.33,34.162 1479.7,33.634 1478.94,33.634L1396.27,33.634C1395.5,33.634 1394.88,34.162 1394.88,34.813C1394.88,35.464 1395.5,35.993 1396.27,35.993L1478.94,35.993C1479.7,35.993 1480.33,35.464 1480.33,34.813Z\"\n                style=\"fill: white;\"\n              ></path>\n            </g>\n            <g transform=\"matrix(0.360289,-0.208013,-4.39887e-18,0.576941,37.5847,77.2484)\">\n              <rect\n                x=\"1621.2\"\n                y=\"1370.57\"\n                width=\"57.735\"\n                height=\"5.947\"\n                style=\"fill: rgb(106, 161, 255);\"\n              ></rect>\n            </g>\n            <g transform=\"matrix(0.185726,-0.107229,-1.84168e-18,0.247635,307.505,373.782)\">\n              <ellipse\n                cx=\"1566.31\"\n                cy=\"1372.3\"\n                rx=\"4\"\n                ry=\"3.464\"\n                style=\"fill: white;\"\n              ></ellipse>\n            </g>\n            <g transform=\"matrix(0.185726,-0.107229,-1.84168e-18,0.247635,310.507,372.049)\">\n              <ellipse\n                cx=\"1566.31\"\n                cy=\"1372.3\"\n                rx=\"4\"\n                ry=\"3.464\"\n                style=\"fill: rgb(64, 128, 255);\"\n              ></ellipse>\n            </g>\n            <g transform=\"matrix(0.185726,-0.107229,-1.84168e-18,0.247635,313.509,370.316)\">\n              <ellipse\n                cx=\"1566.31\"\n                cy=\"1372.3\"\n                rx=\"4\"\n                ry=\"3.464\"\n                style=\"fill: rgb(64, 128, 255);\"\n              ></ellipse>\n            </g>\n            <g transform=\"matrix(0.185726,-0.107229,-1.84168e-18,0.247635,316.512,368.582)\">\n              <ellipse\n                cx=\"1566.31\"\n                cy=\"1372.3\"\n                rx=\"4\"\n                ry=\"3.464\"\n                style=\"fill: rgb(64, 128, 255);\"\n              ></ellipse>\n            </g>\n            <g transform=\"matrix(0.185726,-0.107229,-1.84168e-18,0.247635,319.514,366.849)\">\n              <ellipse\n                cx=\"1566.31\"\n                cy=\"1372.3\"\n                rx=\"4\"\n                ry=\"3.464\"\n                style=\"fill: rgb(64, 128, 255);\"\n              ></ellipse>\n            </g>\n            <g transform=\"matrix(0.365442,-0.210988,0.421976,0.243628,28.7259,185.45)\">\n              <clipPath id=\"_clip9\">\n                <path d=\"M84.299,1269.38C84.299,1261.99 78.301,1256 70.913,1256L-56.874,1256C-64.261,1256 -70.259,1261.99 -70.259,1269.38L-70.259,1376.46C-70.259,1383.85 -64.261,1389.85 -56.874,1389.85L70.913,1389.85C78.301,1389.85 84.299,1383.85 84.299,1376.46L84.299,1269.38Z\"></path>\n              </clipPath>\n              <g clip-path=\"url(#_clip9)\">\n                <g transform=\"matrix(1.36821,1.1849,-2.36981,2.05231,5.46929,1071.93)\">\n                  <use\n                    href=\"#_Image10\"\n                    x=\"53.151\"\n                    y=\"30.14\"\n                    width=\"106.825px\"\n                    height=\"61.676px\"\n                    transform=\"matrix(0.998367,0,0,0.994768,0,0)\"\n                  ></use>\n                </g>\n              </g>\n            </g>\n            <g transform=\"matrix(0.365442,-0.210988,0.421976,0.243628,28.7259,183.729)\">\n              <path\n                d=\"M84.299,1269.38C84.299,1261.99 78.301,1256 70.913,1256L-56.874,1256C-64.261,1256 -70.259,1261.99 -70.259,1269.38L-70.259,1376.46C-70.259,1383.85 -64.261,1389.85 -56.874,1389.85L70.913,1389.85C78.301,1389.85 84.299,1383.85 84.299,1376.46L84.299,1269.38Z\"\n                style='fill: url(\"#_Linear11\");'\n              ></path>\n            </g>\n            <g transform=\"matrix(0.407622,0,0,0.407622,47.38,278)\">\n              <clipPath id=\"_clip12\">\n                <path d=\"M1461.07,554.317C1461.07,556.747 1459.6,559.067 1456.6,560.8L1342.04,626.943C1335.41,630.767 1323.83,630.287 1316.18,625.871L1205.33,561.871C1201.14,559.456 1199,556.361 1199,553.426L1199,559.555C1199,562.489 1201.14,565.585 1205.33,568L1316.18,632C1323.83,636.415 1335.41,636.896 1342.04,633.072L1456.6,566.928C1459.6,565.196 1461.07,562.876 1461.07,560.445L1461.07,554.317Z\"></path>\n              </clipPath>\n              <g clip-path=\"url(#_clip12)\">\n                <g transform=\"matrix(2.45325,-0,-0,2.45325,1068.82,410.793)\">\n                  <use\n                    href=\"#_Image13\"\n                    x=\"53.151\"\n                    y=\"58.978\"\n                    width=\"106.825px\"\n                    height=\"33.517px\"\n                    transform=\"matrix(0.998367,0,0,0.985808,0,0)\"\n                  ></use>\n                </g>\n              </g>\n            </g>\n            <g transform=\"matrix(0.371452,-0.214458,2.38096e-17,0.495269,-19.3677,248.256)\">\n              <clipPath id=\"_clip14\">\n                <path d=\"M1776.14,1326C1776.14,1321.19 1772.23,1317.28 1767.42,1317.28L1684.19,1317.28C1679.38,1317.28 1675.47,1321.19 1675.47,1326L1675.47,1395.75C1675.47,1400.56 1679.38,1404.46 1684.19,1404.46L1767.42,1404.46C1772.23,1404.46 1776.14,1400.56 1776.14,1395.75L1776.14,1326Z\"></path>\n              </clipPath>\n              <g clip-path=\"url(#_clip14)\">\n                <g transform=\"matrix(2.69214,1.16573,-1.29422e-16,2.0191,1352.59,983.841)\">\n                  <use\n                    href=\"#_Image15\"\n                    x=\"121.882\"\n                    y=\"76.034\"\n                    width=\"37.393px\"\n                    height=\"61.803px\"\n                    transform=\"matrix(0.984021,0,0,0.996825,0,0)\"\n                  ></use>\n                </g>\n              </g>\n            </g>\n            <g transform=\"matrix(0.371452,-0.214458,2.38096e-17,0.495269,-15.0786,249.972)\">\n              <path\n                d=\"M1776.14,1326C1776.14,1321.19 1772.23,1317.28 1767.42,1317.28L1684.19,1317.28C1679.38,1317.28 1675.47,1321.19 1675.47,1326L1675.47,1395.75C1675.47,1400.56 1679.38,1404.46 1684.19,1404.46L1767.42,1404.46C1772.23,1404.46 1776.14,1400.56 1776.14,1395.75L1776.14,1326Z\"\n                style=\"fill: white; stop-opacity: 0.9;\"\n              ></path>\n            </g>\n            <g transform=\"matrix(0.220199,-0.127132,1.41145e-17,0.293599,339.708,327.53)\">\n              <path d=\"M1306.5,1286.73C1307.09,1285.72 1308.6,1285.48 1310.36,1286.12C1312.13,1286.76 1313.84,1288.16 1314.73,1289.7C1326.44,1309.98 1355.4,1360.15 1363.73,1374.57C1364.33,1375.61 1364.49,1376.61 1364.18,1377.35C1363.87,1378.09 1363.11,1378.5 1362.07,1378.5C1346.41,1378.5 1288.17,1378.5 1264.07,1378.5C1262.42,1378.5 1260.37,1377.48 1258.9,1375.94C1257.44,1374.41 1256.88,1372.67 1257.5,1371.6C1268.1,1353.25 1296.8,1303.53 1306.5,1286.73Z\"></path>\n            </g>\n            <g transform=\"matrix(0.254264,-0.1468,1.22235e-17,0.254264,329.57,364.144)\">\n              <text\n                x=\"1170.88px\"\n                y=\"1451.42px\"\n                style='font-family: NunitoSans-Bold, \"Nunito Sans\"; font-weight: 700; font-size: 41.569px; fill: white; fill-opacity: 0.9;'\n              >\n                !\n              </text>\n            </g>\n          </g>\n        </g>\n        <defs>\n          <image\n            id=\"_Image2\"\n            width=\"113px\"\n            height=\"47px\"\n            href=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHEAAAAvCAYAAADU+iVXAAAACXBIWXMAAA7EAAAOxAGVKw4bAAABVUlEQVR4nO2aQRKCMAxFxUN4O+9/DNw4CoiTliZN8vPfQlm00ykvP3aQ5fFc11sjy/L+/nx8r3ffm7Fn845jz+aJa23XOJvfs9Zh7NBawv3YrSGtdbj+x10egkFzpRrNt+SSxMgbqkiZJCJDiQDoSmSfdYFJ3JD18GMmcXhDTHUzNZIIXhA1JIJDib0MptqiKbhKzHqQiAaT6IlSFVIiAJQIACUGpLfLhpfIw49Ml8T2v4/JTPySyIJQI3w7JTIYEp2fong3FXWJ3huqCEYSNUlYhZRoyaSCoEQAKHESlqF0kZj9NBgNJhEASgSAEgNx9WfCTmLxpygzYRIBmCORsTIlXxJZED/kk0h+KC1x9E2FKG86qEkMsh8/HG9A6SSGYqAIKDEinUIpUSDDYXiqxAw3JCNMIgDXJTIWYdBJIvukK2ynARit4XASUZ6izCScRFWKCH0BfLM84oTw1Z8AAAAASUVORK5CYII=\"\n          ></image>\n          <image\n            id=\"_Image4\"\n            width=\"113px\"\n            height=\"65px\"\n            href=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHEAAABBCAYAAADmBEt9AAAACXBIWXMAAA7EAAAOxAGVKw4bAAASeElEQVR4nN2d6ZbcNpKFL5cs9UN1W5bntWxr6XmsWTzLQ7mSJDA/gh/iApWyLalUy+AcnypVJkEAsd24EaQn/T8Yb9+XKknrOuk4pOM4tCyLpkkqpWpZJu170TzPKqVoWWZJUq3Sbx+m6VkX/wjjVW/gH7/sdZ5nTacc5lkqJT6rtWqaJtVaVUrRNE26XGbd3+9alkW1Vi3LrFKq/uvj/KrP4dUu/t3HWkupmuepWVspIcjrddc8z1qWWcdRTusLwc3z3Cz1OA5dLouOo+o4Dv3vv15e5Xm8ukX//eetTtOkdV20bWFVkrQsk+ZZOo74Xq3SNMVPqXextYal1lq1rrNqlfb90LrGXP/5/nW52Fez2B8/1FpPiSxLLLsUaV2lfZdKiZiHkHCtuFWPj/73cvpfLDQseNJxvB43++IX+cOvR5WkZQkBbdsh4uCySNtWWkxEuLVKx1HOuLecFjdp3/NnWiYKUbSuAXiOIwR8HIf+55/riz+jF73Anz7VWkq4RSkEI+m0Fun+ftflsra/r+usfY/fATVY3DzP2ratCe3Nm7UhWawv3KzO69PtllJetDBf5MJ++hRHWWu4QCkOm1h4HH2agJuVpHme2ufHUXS5zLpeQ1B8Ns9zu2ZdU3gAJdwxFh3zxjUv0cW+qAX9+KFWhMV/Urg6kCUWcxzpRvlsmno3ehwBVhDKcWRMZQ6uQ4D7HsgI1MrcDIT/koT5IhaC28T17fuudV0bWAmhTJ0QpN56ti1cq4MXSR1wiWv6+ChJ12ukGpJaunG5rJpnad9rm+NyWVRKgqiXQhQ8+yI87pEicDQIRApAg3US60gvPPYhbBceqYTH17DEo8VLSVqWTFGmKdKOZVm0LDKlqIaEQ+GeO798tpu/fV/qPE+nCwwLiwNVi1FhCaUJIFxbury7uxAiwrled0k6Dz6F78J2FgcBk2qs66J9T/QrpRt2MoH7RX6ZXuO/Py3Pcp5PftMffj0qdBeHF4AlXJwU4ETSGavUMSsAD1AlqYDHvut1P61y6QRPMg/g2bbSudnJvCNCgmsFQKEE8Z2p+1x6Hi72SW/47mPk6/u+txwNa4vfpw4hYi3Lok7AHBiHCfjArTr6ZE4Sfr+W+aVAqQgVpUCJJBQq1kas7FFxAqTLZdK//fx0wnySG/3LP2sl1uEKU4uX9r1Siu7uliYwhHwctR0y1zmz4gwO80gp3OM4dHe3NqIAy3R36kjX4yvVj31P4OR0HYJluPVOk/Qfv35/YX7XG/z4IVSVQ8d11lp1ucydsNxlLsukbQth4zLnWQ8sA85zWZYm7LCiiFEp7J6O477rOul6TU5VUpdHjgJmL4QDKiGxzmSP3OqJ8d+Tj/0uE//w61EBI57jSWldUk+hxWc9OR1Wk+4WYWNNaD2jlNKsxdMOEnZJ7dC3bTcFmZpQSimNzXHl81ok7tndvAOlW8KXvl9u+eiTAlyoIozuB4DhrAt/w6qkdL3kb1Jymli0xzSH/Vi153QcLqmJX0t6c70erTqyrusfKhPEggOjmGvqANAIxNZ10r//8rhW+WiTkTI4iCDuOGAZ+U8osXWddH+/twMn5iEIeFEswasRkroir49l4cDVhM/Bcshc44LwCkcKZD6tfW75JHN6jRJlQnld+NzzOB4vJfnmSd59rHWMTwEkFh3HeDBxDVaIwB1JjlxofhZCj0pG7bQ9508rIH+bJq6JU/eaYsybaczd3dJVRXCZpajVLhEMua2j5VueIeZxAqNXnlrrNwvzqy/+6VP1s+6Sdnpd/LAYxJ1lWbTv+2mpc8ekeOz5XJINkPEknbSABN/dIfFrniddr9uZm65tPudsGS4gLyqzX9ZTSgIq9iipoWfQKyGm1qyDxn2+DcV+1YU/faqVxbEZL8Iy3AURV0Z2Bgjv8aPW2iyJgbDcejk4YiCQnwEH6gpGuuHxknV5GAApe+rhjBIM0Zs362dJAwTM2uNzNWAnPQRtX1Py+qILEJ4kXS6Tfv89ER6D2ITLjEPpSWjiCL8DXvhezrO0eIhuJILNQ6IqUUqS2lJAfikQKWi01tq5enJBXKQn/SiK57LO3XrvDvdxZgfSAC+xbXvjat3K2a+fyZe42L/0RfI94sO+H11S7ptzwDFCbQcKHuTTitVZhR+g/x13u+/HGaPWJtBucwZOGNQXmddjl9cYr9fjjIlzQ6EolO9vjIHM4Yo65o6+L1CuK76j2b+SlvzhF959rBWEySY9r/IWBxeapJsxgs9gP9y6cHlj99q+9zwow8tRzIFr4l4jqHJkPOaAzOFzOnjy3z3ZZw73HJwRQM/PZZzLz5bwdH+/6e7ucirDnxeiP/shqPN63U1rMo5J6nI/YgiaD9IbUahX19mwI1dHp+6SRvDgBzIWbaHvIu7VB4dIHCwly09es8TF46JZH6AJl4i18H2KyMuS83tbpSvXuk4nKs70ybGBnwWe4XPx8sEf//7zVtd17YAKNJgjPrSNSjqCy5bBjBmx+FyUC5IxghyPM1w75nMIxF0v6yVmjqzQmJT7YaKYYdUJtCQ1ZaKjwNMPZ4ig+dwlxv6mdi2CJm0ZvYafnYcg1jNWSto/3r4v9ZZms/HRlTjKQ0ggMQcCXhPctiwZObr0+7iC8D0npEHCgBuGu0f+/ebN2oTh1ZFQjhAUwvBiMMriB+kpTwi1z1P9++wF0OSAB4HggpkDz+WKFF6uV2z3fljm5IgTM0ZjRqQ2ukKPDSzO3aa7orHhyGONI8FsR8wD8Prfus5dh/donX4PDjYtZ+q8ixecHUl6l/jIf8LYcOC33Dnu2lOQEEAqsKPymPchNnDBj/2yDnwmmnK9h2WEzLhWhifcnvDimm5B5xH0eFwZEah/lw2wMdryuX6sMKTVBnrl87E7oFZ1uagDHPZIDuzC2/eoF+57368z5pPUTDGMUaHhjdnPSNXhacbvO4BrBoNWQEthUQ7NXSNCcHHQYSnxtzjgZFxG7eU+6S5n0856WmJfaOXacKHTef/ZWJ4ERB4BYv0xN4IJ96fu4CC5Y/299W7b3pRx33cdx9GUwKszpFnpVQL8ZQpTT4XILvTLJWuRtVZdLuvpcY4GchAg3wnsQdf7fLJiZ7nucoleTvpViEfRbLurlKJ9P0R9zjcQ2l5PTcxDpIgaLjc/QFvRqlLKqWW90gSY6asBbNoJ5/QYcd3lMneQnYNIIAQhjkLoTAVK21+eQWrF5bI2yO9rZB8BpNxT8GwITExt3kuKpmcPJft+nCEj8QHnOU2TLpelU7JQdhR60gzHSWCPw4kvRNse6Cpb58NNhN/3+MXNp4lmpfk8uIxzjiyzWiCt63JuPONcBPjpVCSaoJhrOQ+otPgUrj3dZ+ynnGWp0lkTQMsbo6KaklYFmYBFuXsOoKS2/rT+uSl74Ae8SQhynjPnDYusZwpVTmFmTJXCC4T7zHXFd0u754zv9aQ6hJDawE1i0nrGtNHNzp3Gx3dDMwJKT6ebqJ2WpSstLb5SPkLYcbhrs66Ma7W7p1sdG5+mqeV2d3f5eFsp0UcKp5nxWuf9lnbYXjCutbbQwz7dK3C4t/7tqBdwlLhj7lgkUheUi/RlXRMLtNDkQuDQ2EwejE6Txh0Gyrpe9xYj0MrrdWtaFDeSKcbcDrBPvp2P7BXBlQPrgtlY16nrYNu2ox22K1Ek7rV5m5hD5uZAxulmM16lN7hcLlpXd9mJavEarBe37fGbGOasUn/mx2mpkPJHM6DoWCgNaHEPSZoxSQIrpr8sKcTQjocVgiAFKPMEyPnb3y7NbXiciU7qkTlJITT/PmM5STaQNzn4Oo6qbStdyoOg2XgSErWzOD+MzHOnM/bXbn2wOl4uC1DUK7S7PI/5/MTL8W/iIvdGwblH/7SXt3hSgMjcc/7twzQFsKhnHOu7zxws3mIWvM/kONRATghy7jbM4XBAaDNaz+/ExQQ2vav0DjMs7+5ubRZfStWbN+tpFRmTwhVu56GGJUfYANpHQTs9TD1jYW3MET2trCNqolCEEXe3bX8Q23wsy3KS9tNZ2chqTICsuB8MkbNEefY6UfCUjA09oeR+TjPBRDhMJj/yZHesQLjvHvnDyHcOcz+525HKg3DgQBB23BNSvafFXPHCivdWe/T0BCKBkEDO5wfrMZ690k7iBLfv2+/Nnih3ZZqVzV6eQ2ca1VOfyAVlpYPuAXf6w69HRTDOSUJ1OUODK4VJyUCftUQqERRnnTz3p47CctON4Ipo9/BnIjzPQ3mc2+WQ6d9hH5DiHJz37XDIsf5UNhTTFQY35uuE4QqFedgoxVhX6f4+FS7z2KPjSsdaLGSF9Afc6Tho+B0tKm6Q7A6jTzN6rXRqzVGVL9gZDRTBm4wkDe0cbm09COO7zsZwyM6lIhj3QOMenT1yxiisI1MtUD50JHO612B/sz04RGbg/UCu3G6lnytJfVaIDIhxKUtPvmkHFH6QuLVbLfmOEhGCF0bd/2MJY/u+Wyqbj8/yIFAsn+9WYXp0b27NiQbVXR/INSx726L+xx5w3azLH/Rx78Y8biBO03nnwB/VFP9UiFI+N4/b+1wNzA8AV0Tux8K8y8sJdCeV4T1HlwPmwn07F+oCxI17DB3LQAyvdXa51/A01Gjld3fe/9P3lUaumUqO1/E+G+ZBuM6fEo+lv9Zw/JeEyHj7vtSE6KW5tlhYDwhwB+5SvGDsKYs3XAVK7J+7cMDi7i0P0d9Tk4/Lcf3Y+uCIGqGS81FZGEEE8SnnDJxwf7+1RN2TeI+3faGgXzfM0RiyvqRb/IuEyPAne/0gvGbn8XAM0qNFjMjSEaWDFag7Ns3fYo5wYR5fODzosh6mZ58se0iXP3VKABd8qyls7FCgQoM38aIwrvXubhXPjYT1hiAvl+WrWhe/SoiMdx9r3ba9FYcdsPATq0MLSV04SEeCoE93yxyAIzxHjMsy6XpNAQaAWdr3cYNYqb/ACEXyZzWSe+1flcKAfPBWjFt9SCPwGoGUdyIg/K99Q8c3CVFK4DPmiuNz8xRzqbGND7k4MMFyvJHJEWBel+4JZcLaoarI/WLusWUkrdJDgIMdVybAjyNp0iLQqgvM+2K5npqkM1ff+qDNNwuRwZNQkiO51OQR+IyFUM+r+mfk+2Ymb5kYXVm3MQMitxDo+HQVa/Jiredmjh79+35fqvUoknce4GkgSEopj/as/6MJkfH2faluhYAF75qT+ke66TDzxByXOLpD4qbnpWPq4vkWvUDjsxOOHhGw9w8FNTbdtGLefeO4AKtjnW6hxHvW+tiPhD+6EBkgWafi0NxMqLMxV1JzO/nSvRDMSGUx3NW5sBwZ8293Y2Mvq6PbsbKQCHlurNDIEI05rOefTliU8n3eTPXdhCipPXQDqPEOs/FgsB7i3mGMgLfCe46aaDIZfY9rntLwaJv0UHnGFAIheC+QP3rnDE78VKsNEoOdTqz1+76Q4bsKkfHjh3z8jYP2eIF78u4zb8N482bV/X0++CllY7ET0t7z6k1bWA6oOL4TPz2mpkt/yBG7O7/VsXeLbXqqF/w9iRAZvCk4qyL9YUk9HUZMcsAwHhYgyHNCrMU5Tql3dQjM06Jb77FhjZ97xM4JArzIND3tO1OfVIgM3tntVsWIikc0JXkJa3y2A+33vM+tydkbKd359Rrm+rlccryPs0kjIxPr7b2HpCd/KdGzCFGKlCRLTA9fTuSVhs/1nYIo/ZAdaY6v9fL6IDVLYh41O3JcrIoOB2I3aQgx1K99ited3BrPJkSGv0k/QU1SXaBIJwPGOOYpRyLTqfs+sdObgD1l8WqL1yoldUwQXgHhS8//xsVnFyLjxw+13mJn/O1Okk5O9eGrouuNup2/+MgRqZeaHAzxXQTtL2tAOUh7njru/dG40QHyPOO3D9ME6EGAPUUWLvH337cmJBJorwyEi0xrTlaIZuVDNCtfr4fot6EXKB9Xyw6+7FxLxXopApRekCX6ePexVtzc+MZhSc1KnEgAzUpZb/SHVp3IdvLZLXPsOhgrM4/Bc36P8eIW5IP/9wWW5+S354hSz6z4+25IJ2BzmCuuiZ+AFn9x4EiKv5QX1N4aL3ZhPqDwvN/H63vENqe6kgbrCXAHObcq+k504w1eovX5eNGL8/GPX4KJBpXi4oh/lLrGd7tRdIUsx7L89SjEv/EFuS9deIxXsUgf8LF9p3a+o3TsO3UOk1eQSLQY5iulqXpIz58yfOl4VYv14awPeZ0XpEnE+Y7Hwuw4ry33k16f8BivctE+/H8/5IBkfLmfv2Wf3NIF/ZKBy5+NV7twH2OVRPJH1fp3vsG0IMTnevn6Y47/AxX1K5XSf237AAAAAElFTkSuQmCC\"\n          ></image>\n          <image\n            id=\"_Image7\"\n            width=\"113px\"\n            height=\"65px\"\n            href=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHEAAABBCAYAAADmBEt9AAAACXBIWXMAAA7EAAAOxAGVKw4bAAAMrklEQVR4nOVdW2LbNhAcUD5Xkl4scXqxpr0XiX7AQwwGu7Rj2RLV7o8lknjtc3YBygX/Afr2XOu2bQCAZVkAALVWlFJQClAr9mvLUrBt7R4A/Hp++fDA9NAL+PpjqwBQSkF9kVQkOBIFx2vLUlDr4wvyYSf/7blJghanglFLc9q2DZfLgnXddqvl9X/+vDwkPx5u0l9/bFWtTf+q8Hidwt22DaWUXYCtj3H5bPNolvkwk2Xc05hHcjep1yk8Fy4tksSmfH5ZCv768RjCPP0k3W3ysxKFtSwLaq0vAGYZXC2vtefHmKn9Lkv7TKt+BKs89QT/+FnrtnVECYwghuRukfcpOL1N4fgzrZ/umgHsbvfsVnnKiX35vlYFHUpMJQAMwMQtqpSCdV3x9HTBujbXSUUAZmVQa876A84ZL081oS/f1+qAQwGLusx+vz/rSNUtbk5FZvccpSuOdmut+PvnchrenWIidJvAKJRIaPpZY6B+Z/6nAlBrisjjp4KezKWfRZB3n8QfP2tlKuBWAHS0SMZqOFSAwu+R1QA9sVdhupA5riNapUjY946Xdxv823OtHnfIFGp+lv+pZSiaZH/e1gVIlmseCXRBk1SBFO26i6fA7xUvbz4oS2UABoaua699ZjFK25CJ/NzajukBgMmNerzUNuyD1Rw2U6XR/ihAzhu4D/C56YDM+QAMDMqScrUiYMzjiDjVmjT2aTLvlhtZLeOvI9RufWWyRCUt9906Xt5kIFpf5uaUKarlR0jUy2p+X2Nh62+2bi3faaxz1JoBInf1nr/WWm9Sj/3UAb7+2KrHo6hC4gJ0kAOMwMSf0RwwSgu8isNrDpSU1KIVBY9zX+Rz9xAaP3n/My3zUzrWOqdbhLpGPqMuFMhjkGu8pxZRKuE5H0ljYFaC0z60b8ZNutllAbatC1PdcxurPftZgvzwTnWDFuhJdSlzHFOozudGsHBsxeMYc5xiHxm6jdyx11mVojHVkt2zaJ/6+aOF+WGdffm+7hu0zrB9sCC2ULiRNUUF6fa5l9H0GjCX4nRsF9BRPsj2kVC8fyofx88KC5/lYq/uhPt7zni6FFoetZaCjQU2okPgWBBqtXrfXbczmP2qmz7a5oqAVwR6Mkv1Zz3eXpuWvLux7jBwog7bIyKTNaboEjQ+7ZMUl+RQnvdVYTKE6S48AiD6LOepwMmVTfs6Qsw+P1/XNVb5roaa7wFjzIqAgloHidaoRyUiVOruz9MOIE4ZpoVapcfben9ODpAyC9M+dc1UWmCuDGnb9wjztxqo65wXNqcNUVDXeBmdc4kWqsKLQBL78zIcx6U71aMZfa6xW86uOeKOarU6R3fZ6n2y3Bj4vcrPmx789lyrx7QsH9OFXC4F6xqnGBHo0aqJCihzpa+hV33OEWpk/ZGFkJWeh0YVI953ZSU+UIGyzeVSQDDvHgF4m2UePsAiNRmoNUXX9NcOIDkTyJhs0R782/PxZzLAtZ3XNYXxeKhMzRivfbW1XlKX/1oakn3XsVyxXtslSW+q61QNjayv1oqnp+VlMnGVxRnnwEKFQAaocFQx9BkHPWSIV1OyfUUfb2KQeRnPL13wJHWrkedyZY3auSfKrHK6mIEW7YyTd2txbVbw0vuL9/1GxvXPtG510W3xs6X4wtXyiJo9Trml6jo1vqqCaHvOVcd1AWdgz/FFBu6cTx4v9y9R3BsZO2uPCkM1Xl1vhvwi16j967PKKP0cxTMFFC4k9umxl8r2lvlmTPa4TXIBet+RG414wvbqrVhcL9xZ10Hcuo6OO0QD8/MoiNnqdIKZ4pB8AY4ql4VKNQ0zzU3XGrlgjdk6F80ds3VxHd6vto3G8fyTc4x2ftimlLYRXfx9Bg/+RxoRAYMIYUX3IxfdJz6fOHPGt+8Yis9jSjDHnAzRcj56cDg686NziEALKQNdLhQKg89oKVHvR25+2BPVCXECOvkuVGWyl7fmZF7jUCljfNB2nem8P277aIzhuG0BdJ0ag0bm6PEKlQX7dNR6uSwTCGLb7gEU0I0xMFJQzoHt13Xb16BEdE8Z1NpPOyiPW1/kbVOUJy6+MaUMGuaW1jvE3hlJNYptIhfZJ6CId0aL/XhEmdqy7yjuRrlnmz+ZU3amKVCJ5sO+lZlRESFCvbyuSuHgiXzkGN3tLnt7kuIN9zBPFIpqfktkL4NAI4TlVRXVDk6ScYBMIXEBbMt9RUd8ruVdaGXoT4Wsa1ENZ36nCkjk7IwZ4/Wcv+l1pVHZ66R4kZtuAtKxxudU4I7qSylYdHK8p9pNBvRFjh3rgtpkutvRwTtYKnJPraYrQ3OF82I5R3V1zlB3b02Rln1MjtUtYi4ucA0zSi7Wd//chD4K0EOClyL7sx2YqWA7Nhnz4a7kbdyFDSh9jxMx7MYuMHdZFAQnNrYru4A4MQBD+SqD8XroieMrc3Ujms9qfFXLJwP6urcpduv8KVi9766xucMYuLkSjC61DoqrMX/Mr0fF7Ir24k5ZBxy1I/bxbn1uGRHkBub9ui60Lnx+VjfJ/hXWKyR3N6fITZmpcZ9/+wszfc9ThcM41ePQnMwreFJBUYk0DXIBdtc5sGxYp7r+plTtu26PLb+eS9Fis1pes6hZc2gFZEhHq8s+GLWTWtMtaazAaL9kJEmhvgZ7R6M9PleJf8uLhVe48ilq1O+cqwqBHqqHmrIrjzJdleNy6crl6+acPZy4B+S6xnl2DzEAOH7gyywKWrzyoaiwI7h8OyY6/qBWM2rtnJvRerLjGGOs7Qm0H0T2Z9RiIytRiqzHrU7bRWiXbfnXT+dpH17A8KOd6g32io1PmoVvAFjX1VxbXAgYAUpvq2hQ6WhfLXc5M9DxcSOXFjGabfW6CjUqcGTz8XU3IY3u1wERkKc4vn72rWN6IXxWvRfSQngWrFWjfTG+aPZ2lFtFWsrJ6zjqLbQUxTFG1DimGmq97hK1LRALVj2HMz1atyuok3o8XU+0qZ5tFKdCJOm7EzqZyGqUGdGiIgaxjbpMzS3VYltfnEd3tRq7FOFqnOHzylivZWZzzcKB3su8hc5TQ4saQOQu3WCOdvpfFSLQD0VlKCsThPrvvtjxJRqPmd6nMydihraL4mAkkGynnVbrrjD6q3OLGD8x+6AvnyObv+W1uTcJkcSd/sjslZFR3Iqq+srQ6Liiotr2fY4vc/yMT75pm+hsaCk9pXDhZ3E5U+bIUx3FPi+8v2U3X+m3hEji9pW6uKOJRxpHxmg88A1gXfDR+ZouiDnuaLw8iu0TY4LrPjb78L5UOTxsRHxQPr3nDOq7hEjyHwaKDjpFsTJzJZGL3Cdaeo7Fw1fRM1FKQWUBxkIC73Hu0Y8zeExrfcRbVUcuNVN4Heu9h4ivEiLQUawDhkAOALRgsEzxTZ9xrScz94kbkFGA47sb6g5Lab+q0Sw9Pi7ZxxjzP68kqTVyHvxOPmTHULgPClz/YurVQiTpu/fDAAkQcMa6Fkcbq15XVQFGxwd53wGIx0udBxAXFzxdorJkz+kcVMBt7e3vR73r/2FCJPm7GRkgIJGpwJhAq9D8tJ3qicdHLbpHqNaF6CAt3hQe88kIWPn61KXrXwAf/uLphwuR5O/mAzEIUe1u17XwO8Y1t1rdQPb+dQwlzw0jhJmVHCNAlYGkTMCf8U7/pwkRGH+XDRhztAhgROhTBaUC8SqNWjzHygBTlgY4ZejV+1aX6aiT1x7uTWGn6PW3iMmkjBEeWzLk6y7TyWObu9YobrZ2CEt3fN7jfa23+TWNmwiRpL9dE0HwaOdbGeIC6e44P2LpVSG3IHePfiSQlBUAVNDX5nvvpZsKkURhZpYF5AXpKN3gcx6TFDkeKU0Elvg3eukGiBWOz9/6t2zuIkRgfFknQoJRhUaL4wo6nDKAEVWAvBzom9aRq492VIDrXhS9hu4mRJL+LKaDE1IE+9vz84azu9hIgBHAigCOWqgKj6+j8dr/9rfdnHzLi+Qul9eAectHD3rpfbf43maOi442gX5kg5vcFOZZfmUx/mXYO5AyRC3MXWP0mbLUE3BKUWrCds1ix+OPHLe3WXC5XNL53ptOMxElLaz7ybUsufadBY9/fu4mugZgf7vZx6SQz/hvF043ISX/Mdsoz9QYmCX8fMYL0hEqzXLWM1me02knpuRbXsC8tdM+x7vmWmrrQh/P7mgMVGU4A3B5jU49OaXX/i8Gy3N+iizKEbPKkVvsma1P6SEmqeRVH2U8CwGa/wHjXqG++KPWrHniGePeET3UZJX05VhgLouR/H526uxWdc7PoIectBJ/a8B3872yoxvHwHxu51EFCPwHhAjMv/gBzNUYIP5duEeJe0f0L+D749HrhKeLAAAAAElFTkSuQmCC\"\n          ></image>\n          <image\n            id=\"_Image10\"\n            width=\"107px\"\n            height=\"62px\"\n            href=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGsAAAA+CAYAAAAs/OVIAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAgAElEQVR4nN2dWa8saXaWn5jnzMjMPZ5T1V3tsrGR+TNIvjAgC+y2uw22bIONzB/gBgkEAowZJbiBCyR+CzdIIHDX0Gfvs4fMjHmO+LhYEbGrrabdQw2nCKl0ztlDROQ3rPWu933XVxpf0+vn/0CpplEAeJ7G83MBQByHmCaczzVx7GEYMI7QtjAMA/f/1tK+yvf+Wa6v5Yt/4+8olWU5YRgCYJoawyATZxgargtVBZoGZVlhWRamaeJ5Gl0HRVFx/I/B1+6zf61e+Ju/o1TXDTw/P3N7e4NhQN8rbFujaUY0TSMMdU6nhjh2GUfoezBN+a/rIM9LLi8DHh8LNpuQj/+l9rUZg6/Fi17+eq00TaNpGjabDZ6noesyEY4jk2BZUBQKTdPQNIgiyHMYx4lpmnh+fiaKIq6vAz799MxmsyEMDboOlOJrMWnv9Au++s6gLMvgeDxzc7Pj+Tnn4iICIElqLMvCMAxcV2MYoOtGdF0HoOs6NhuH47HAMAw8z0PXIQyhruHx8cwHH+zo+2Wi4aN/8W5P2Dv7cq+/OyrL0jFNAQhl2RIEDtMEwzDRNA2GYWCaJrZtcDwm7PcxVdXQdR37/Ya2HTFNg7bt6LqOi4uQpoEggGGQnFYUA45jzvcdiWOD//GP3s1Je+de6uf/QKkkqXFdlzDUyLKR/d7g+bmfJ0Yjy+T7fd8DEAQ2AIYhIbGqGkzTpCxLttstcSwTrhSk6YjrGuS5THZZllxcxOg6uK6EzjiWifzv//DdmrR35mVuf6tXlmUyTYqqqthuAwxDBm0YBCBoGjw9CURXSrHbRUyT/P4wTLiujq5DWY4YhsHbt2/58MMbHh4KXr8OOZ8nlFJM04TnWVRVh67r6LqO7+u8fZsQxzGGAUVREwTeO5XL3okX+cU/VCpNe7quw3VdbNtgmmQnBAGkqYSq5+czV1e7dVeM40gQuOuEdV2P61r0vXzBsnSaRnZkVVVomkbXdWiaxmazwTDk44+jQinFOI64rkXXCbLUdZ0ggKendwPqf6Uv8Oo7gxrHkf3eJk0FHBiGhmVJ2Hp6EmBR1xPavMCTJMGyLDRNIwgC6rpmHEeUUmy3EXXdst87VBV4HhTFhOPo1PVAFJn0Pei63B9kxyoFeS45sW1Hmqbh/fcD2lZ28+Njxe2tT5Iovv+n+lc2Zl/Jg3e/lisAwzC4ufFmiK0wTY2qahnHEd/3sSxBba7rMk0Tr14FVJUMcF0LPO86uWffy78fH1s8z1mfVVWyC+PYommgrjtc10bXwbbh+bnC932qqsLzPDRNI0kSwjDEtk0sS+6tafJf3yt8X+N//ZMvPzx+qQ/8xt9RCgR1WZZBVTW4rouuQ123dF3H9XXE+dxydeXQdTIxaTphWfoKApJEQMfpNLLdSsh8fq4YxxHLstjvXepaQmieK6JIo65hGGRBLGiwaWQyHcdhGAa2W4tpetl1SVLiui5ZlrHb7VBKYRgamw0cjyN3/8b8UsdP/7IedPG3KrXdwjQp2ralLGvC0GW3g+0WqqqawxlomsbxOFCWE30vNVPT9HSdoq5hszE4HgeCwJjBwIRpmrx+HXFx4ZIkHY4jfGDXdYyj1FKGIbTU+TzO7MbIxYVLHGsMw0Cej+i6TFLfw/vvB2y3Bo7jEEl5R5YVvH3bSH77lUe1/Rup+rLG8AtfGX/p7yk1jpAkFWHoM00CsR1HcsfjY0UQ+KRpNoceHcOQHVUUijjWqCqYJil6o8jANOGTTxLeey+maaDrJrquw/Nc2rbDcWyKouT6OkDTIMvkPkmi2Gw0jsduDXv7vUNZQlEUbLchj49HXr8+rCVA27YEQYBpmozjOIdUeHrqmaYJy7IA2G71L7w++8Ju/kt/pFTfQ12P9H2PruvEsY1SMlF3dxWvXvlkGWw28uGVUvi+jWHA8SiDl+cVjiM5KAyNleuzrIVOGpkmgeS2bWOazPBdBvPyUn738VFyl6ZpuK5J3yssS8P3hfRdCuhpUniexjRBUXQz+2GsTMeSv2ybmd3vsW2ZsGGQ+PlFhcfPPQxef7tVv/zHStU1pGlNFBlEkQtInkjTjrKE/d7n/r7G8+D+vp4LXpthgKoaiaKQYVDouo6maWy3BgB13VPXik8+OdO2LUmSsNtZTJNwgAtpOwwDYejQNHA6DTPMt+j7nr5XpGmK5wlQUUrAjiwkYebbVhFFNk3ToJSE7+MxZxwnum7g/v5MVUEUWXRdTxDAdmuQ5znv/231hYTGz3WyXn93VI5j07ZwOiV4nkdZKrKsZr+3CUPwfZtxhDzvKYqC47HB9z0MQxJ/FMlAx7Hcs65r+r7n8bECIAyteSJCuk6K2rKUwfZ9naIYaBrwfY++l/DbdR1RFOA4cH3tsdlInfX01OD7EpYNQ547DLKDhmGgaRS+73M+SyE+DAOapnE4mDNDUtP3cHtr0XWQJAPvvy9F9eavJ+qD3/18J+1z2a7X324VgOMI7XM6nQHQdZ3NZoNlCYL63vdSXr3aUlUSMmzboGl6qqpis9lgmhpJkq/E636vkabQdVIUN00/k7fQNBJa27YlDP0VtpumCcjAWpZFGOqkac9mYzEMzEVuz25nUZbQNO2aj2zbRinZdZeX8VqTLXVf0wwYhuxw09RwHAmhris5tW0VYaiRJBLSlVJ4nkPTdDz8e+dnHuuf6Qa7X8vV9XWIZcFHHyVzYbrFdfWVfTif1YzIRnY7n7aVAQCJ/a4Lb9/mRFFEXdd4nkdVCejoup793sKy4HhU6LrIH6dTwqtXMVk24Lom4whFUc7PD9E0Zgguz7ZtG8PQqKqGvu85HCK6DsqyxDRNHMdZ0eMCfJoG+n7g6srk6UlykYANH5CclSQ1tm0TBAZv30qxHscBXSclwgI3TFNy3c/K6v/Uv3z567WKY3fl4ZqmIQhc6rrjcLDpe3h4SLm93a4F7MIqZJmiLEssS0Ka7/szoRry9JQTx4KTpwnqull3y7ID0jTl9es9b9+m2LaNZVl0XUcY+tR1y/W1gIqylHukqYSxzSZkHBXDMNC27TyJBpZlcDolXF7GaJrsEAmJA77vEYbyzn3fs9lImJ8m+bfr2uu7Sn6THRVFPmEoIGgYhIGxLA3DgP/9T3+6SfuJc1b0187qm7+j1OWly/lcs9sJlHYchywrVz2p72G/3zIM8nt5Ln+ezwNxrKGUwjRN4jjgcNB4770Qz4M4juYBG5gmNSNEk67r6Pue3c7A9/05pAXYto1tm/PPQRg6HI8jeS7vUNcdnucRxyF9/8L5tW3LdmvTdR2GARcXMVXVUxQdti1j+eqVx/Pzcf3sSikeHzMA0jRlu7Vpmo7n5xOmCRcXLlHkYZomeV5xOo0YhnCURVHg+/JOr74zqJvf7H7ifPZjz/B7vz0ppdScrF2Uku3dNPIhNE2jqiouLnzGUVZaWUrN07YdFxf2al4ZRzgeG4Zh4OYm5OGhJAwDxlF4vDR9get5nrPbCdooipKLi4Dz+QWGT9PEdmtTlhNBoK9C4kIPCZID3xdC+HAwub+v5h1lEQQ6SdLOSHSYw6KEsK57uUfbdrNtwMJx5BllKWHQ9405Cgzouo5t63TdRBjKwjVNuL8v8TyPpmnWksVxZPw++ZMfb6f9hTvrw99X6hf+rlJZlqFpGp7nkqYVVdXx9JSTpikguSeKfE6nBtuWiYoim74fmKaJuoaHh448Z4buAufrGrbbYKaREspSapv9XuqbwyGmKEpME3zfp2nkd7MsI45Ntlt7DrM6x2PFOC6c4Uhd9+i6TPLjY8luZ/LxxwkAlmWRpum8++p5UGWH6jo8PCSM40RZ1ozjRBjKLpSwquj7kcPBmxeMLEDPM2fKC8JQ5/4+pSwVaarYbAKqShbhQoVlWU/X9T821P+Rk/X6u6MaR6mPvvWtLbouRSSI4HdzExGGIaapMY4yQI7j8OmnCZqmEUWsVX8Uwc2NvSZw4flcum6kbUf6njnW27RtS9+/cHSO49A0I0GgMU2KcYT9fr8O0jAMdB3Ytk3XQZoKEnVdi6YZub2VcFmWsNvFXF0Jcbvb7ajrnutr2bmbjYZl6bQt3N7GGIbOxYXH4aBTliK1TJP8XF3XGIY8p+tk8ppmxLYtzueGuoY43hIEkqvO52z+2W7O5xVKKW5vLTQNfu73lFpQ9f/r+qHbz/qr9+rDD28YBkE8mqZxdeVyd1dwcRFi27K6hmHAcSzOZwESDw9iD3McDaUkPrvuwihIQnYcG8+TuibLFK6rkeeyC7tOVNokEUjteQ6nk8j1SskOCYIAXRdEeDjEKyNSVeJyenqS+s5xnJmyknDrui5RZFJVijzP2W43lGU112cOeV6x3/v0vYTMtoXHxwTf99ls7DXcPzw88OrVDUVRYds24zhS1zWHQzwvnhc5x/MEUCyFN8i96/olvC6k8v19MpcvOn3/w0niH/hC+KsntdvtZugrDPM4KrZbjTyXAZYQJ1SNhBjxN3zwQcgwvEB1WTUuZSmUU1EU7HbbFY3VdU0cb6iqBt93KQqB63kuyO2zxpcoivB9g2GQiX96+qym5dP3gmIOB5OyhCQRm5llQV1PxLHO42OzcodRZK8KdJIUKKUIw5BhGFZRU9O0dZJlMQitFcfCzJ9O9fw9bd79gnYXrWwcX+ist28rdjt//nvLdisLqSwlFwpQkXquqiRvRpF8/7NKtQbwwe8q5TiQpsJzaZo8XOCo1AwgyEoEQgPL0lY+7XxOuLqKSdMa3xcXkePA8VgzTRPX18G6A85ncRgdjx2bjXCFCwgYBlkMS6gcR7i/zzFNk7Zt8TyP16+FQioKIV89z8OyjHWVlqXcbwm/4ziuueLy0uajj8SGJpKIQ12rVb8KQ4u2lR0kphsHTRP+b7+3yHN5pmVZc8h2sW1517Zd0GdDXYvzStd1HMdhuzXWiWzbkTA0SFPR1dq2xzAM0jTl1asdZTlhmjrjqKjrGsdx1l2m/ZV/oFSWsdq08lyI1ft7QTq6rs+eBYHowj4M+L6JbcPp1BEENlUlrECWTUSRzt1dShxvGQZRgPu+ZxxHwtADpPa5vAxnmkaK4jiGLBPpQrg84Qo9j3kXy4TI7pYdGwQGeS6DWZby/U8/TbBtmzj2ybKGsizZ7/fzhLtkmTwvyzJev96QptOsWcV0nZhwltJCPBpwPqdcX285nSo2G5++V+tOdBydthXH1cWFT1lKydE0DTc3AooELcoY6LrOMAwcDj739xJql5C6eBkXt1YQyOe2bdAXo6Ss4oq6btcJCQKDYRjYbAzGcVFoayzLpK7HWSey6Hvh7N68STEMna4Tri7LcnRdRylFENhEkYemycDHcbjunu02IgzhdJrWWmgphA1DVm2ajmgavHmT8NFHKboutU6evyT+/V5W99VVjO/7KAW+73I4HCjLcg1pcRyhlMJxnBnF6ViWhW0LMXt5abHbCdAR24Di8nJLnvdcXvqcz1I0TtOEbctkmqbObuevoXu71TkcfO7uCqZJFGZRqxtcVxaSbcN778WM40iWZRiGweOj3PvqKp69IRIeTRP0slQUxTCHPmf2IahVCGya5geS7n7vMU0KxzE4nxsBJJaEy/1+S98PZFm91jGyKwUxDQNkWUWeN2voEGGx43zu15eWUKtTlt2cv8A0DYZhJIoibm+3WBYcDvsZTWmczx2nk8T2cZQoIQ0JPZoGFxfhCsuXLOB5Ds/PFedzRRAEPD1l1LWi70VLMwyDIBB4Lova4ulJgIXjaBwODsMgu2ah0IZBFnRdy9d3u5CybHFdjdOp5fXreJVXJMf3OI6DrutEkcyBUswLRyPLJpSSn9Vlpk08T1ZKkkiCD8OQtpU/01TY5b6XxBqGGk0zcHUl3ogXWM3skHWpqgrXdbm8NGYxUQrNqyufw8FlGCR+L+Kd48ifu91uDpkTrmtTVR1ZVmNZsNsJrVUUE3kOux3c3QmYsSwLz5OFs4Tn8znFdS2mSdgNIWtllSdJQt+PRJE/85Adt7cbgkCjKCRP931P2/Zst3A+J2ga3Nz4aJpGWfZzflQURTtrW6IMbLfbWcHuOR4z4tjh8VGose9//8zpVJGm/ZyrRYv7xjdC7u8lH55OCXUNd3fZLP0IwNEOf7NUC+sgtY7krDRlVVOXLg2ZWBddXxjnabV3Lbxd3/c0TUMcx0SRwfEoqElW3UCWZWw2G+LY4nwWVsC2rRni9mRZNsvoIUEgFb5hvDAiS/ja7eDP/uzFmqaU4vra4/m5m8OnQd/3DMMw+wJ9np6eME0TTdP45jdjigKyTJiFKNLpe1nBS+gRH7wiy7LZpxjT98PMZBjc3yfz38MZlhtomoyLMBmSb9++fSF8FyI7z8Woo2lSpvR9z8VFyPlcz5KRLOZpmnAcWYjaYlNumn71zJ1OJ25uLgHW9plFUZWXkUnbbGQwxxEeH4/s93tsW3ZQmopJMgjg7dty5vVi6loMKotnT9fh+VlI1CU0+v4LU11VkqzP5zOO43A4hOS5wF0pxGVAl8vztJmz9DidxEL25k1BEAT4vsbxWBFF/uqL3++1Wf4QdTkIRErx/UUsbZmmadbHBmzbZBgkVzXNsOZWXWeWbsY53ztUVTfbDTxc18B1hRsVf6KzSi+uK97EIPDRdXn2w0M1q+sueT4DE8PQGQaF686zp2lcXFzQNBLrP/nkiK7LRNV1MwuELuM4znWCmgFDPPsbsjlceLRtP/Nr2oy+cm5uXA4Hjb4fqev2MywFc64oSJKONFWzu0m6R0zTxHVdDEPYk9Oppm3VHIYbDEPD8zSSRMwsAqV7qkpCeRRpFMU452XZBV3XkSSyQNpWEQQWx2NOlhXzTh7nWs6b84hJ28rAdd1EURQ4juSoMISuU+vC6bppLTeapqHrFEky4jgmwzBg26xCZ9PA7a1ocraQ+Fxe+nPBrdjvLbZbV+imzUabfd6KoijQdY3NxqIoGl6/PpDn1Sp9C3qCKDJ4fj6jaRrPz+lniladp6eMqoI4lrpFaKBOaoa7isfHgSgy2G4lmb56FVOWzDkkpKoqTFOjrru5PnN49WqLpmmzaRMuLz0cR4jc3c7j6em4vuP1tWha2+2WPJe6pyjAsowZaUqxfH3tEMfw+Jiy2Whz2PJo23ZGlwKSzueUNE1xXbBtsQbYtr7SW+M48sknCXGsURTFHLrElp1l2Spquq4xRzB3DrkTRTFwPCYkiXCIadpxPIr14fY2mEsIyX9rdfxLf6RUUYjOdHkZkiQtUeTMiGrAssw11CxajoQRk/N5XF9sAQy7nb+WBOKulXadZcX7vkWaVtzc+PNASjhI08U2JtJ/HFsoBff36YzCHJqmYZomwjCc2fF+VYa3W5MkEfV5yVXDMHBxIS7d+fVoGoH+oiZL7ghDef5CChyPJZtNQBiymkvzfFhFUssyOZ3OxHFMWZa8ehXy8CAOYc/z8H2Dh4eE29uYtoWm6fA8e65XpUYUEfOFohJ0LX+vKvn5PBf79g/QTe/99qQ8TyPP+1WgE1len7sw1JwIhR5ZFFnPg48/lmTfdWrt/kiShIuLA1mWc3sbUVXC6d3cxNS18ILCM76Ic54nAzkMwp6/fSsTKsWyTHKSlPK+7wWzfCE5482bZGYWIjYbE8OA+/uCOA5n4CBq89L8YNs2fd/jeR5ZlnF1teV0KmeNzJpRsZhKNxuDspR8soAe8XgkXFzEFIV0W3adjIfY7xr2e5eqkp/b72NcVxbMxx9L4f76tc+bNxXTNHE4hLMFrub62qMsf1Bd/qFE7vW3W3VxYfPxx0LNyPaVVhmxNBe4rsswDFxfuzw8CL8nu47ZFqZxPhc4joPrWivddDxWbLc+VSXU1uKB2O8NkkTNZpiXnxeXVMnNTUCWiXVZdkU2W6xNsixnv49WC/WnnyazsBnSNOJxf3jIuLraoGmQJC23tw53d/Le0/RS4I6jLELDWDzwNZuNmG+macIw9BURGoZBXQuYEZpKJsX3fS4v7bWrsusk5IHoc9/85pb7e6lFw9CmbcX+JjRagW3bP9Sz8SNFL/dXHtXFxcUqyi3EbpIk3N7ueHrKORwimuZlGxuGwPrvfe8tH3xwQ1VJK87iim0aOJ/Pcy2i43mQJB2WZeE4Ur9EkbUW0GHoE8fw/Cwf1vd1hmGRRl6oLN+3aZqBvu8JAo9xlETvuhpFIQtjATFSZE6z1yOY/YUG9/fC9KephOyFXpP7QFGM+L6B5wlhLbltWkGI9IcpLi+liBZ7tlBISdICzKDE4fY2pCggzwt0Xef2VqLHjxIif6Se1fzXK+37f6prCyEq6rA228BEjxKI3X8GlS3o5oY8l0Q8lyFzp2GBaZr0fc/5nJDnQrhO08T5XHJxYVHXiq6bCAIfzxOzzOEgWlBRDKRpObMZxsyE27guM1vt0TQdbdtSVRVVNVKW5QyH09nvLjWk7/trC1CaCqMxjmr2lKjZONNiGHB3dyYM5et3dxVBoLHdujiOQxx7zAgeXdf45JNqNd90XUdVKaLImZVpcfem6UTX9VxdhbP/Uf2FivGPLevf/lavxnEkihzqesRxDLpOGOKlvgBmuf1Fspa6TAq9um6wLIu2bbm99TmdFh5Q53xOef16uxLBDw/CpARBgKaJ1CCrmzVESn0npGwQQJL0lGXJbhdTltXqbNrv/dVSIMy/7Ib9XuPTTyWnWZaE8PNZdvMwCPQW86m1cppZJnJHUfT0fc9+768O3cfHdmbahWfsOmZILwtFhFoBFVnWcnHhkKYTb/618WPNw0/ssvm531OqqiRUSfErjMF2a/P0VHB9HfL8XHN15VFVUFXtHJqCub5Y6jl4eCjm5jkhYpcicRzVGtocB56f61lM1ElTETiXGL+gvsUDcn29o20FvLx9K/1dWSbhCiCOPaZJNDEhdh1cV6Np1ErcfvjhjtNJ7h2GPlXVEIYuWVZxOPgUxThbD2TXAytRvKgLi3NqYdilTpTnOI5GXf/kXSg/tRXt6jcatds5ZNlAGJorKmuaht3OpW2XLvh+RjpCej495VxeRiRJQxRJu8/xWLDbhZzPBVEkMdOy4HyWMytAEr4UlQZl2a4OJSmUDYpCWArD0EnTjJubzbxYRNJYitRhGNjtIvJcdjvIbhP/vRhy7u7On+EoRzzPJQzh6amZuU/xMmZZtxpbF5/7QjjbtsEwCHBoW1G5bdvm+tr6qXuVf2aX6F/++0rJJEnyrSoRJIXYlGTq+xZdJ6v9fK7mVWYTRfDmjfzMxYXFRx+d125GOadCm3WrmosLj/NZtLOuU7MPQpiCpTkhihzKsl9lGYA4Nueww9pDLMYWKcLD0FgprbaVRSCuX52yrFYuse97osinqgRJns/LCTYiNEoXypY0TWeUKnLI5aXH83OzaoOf/quf3uj5udinf/mPpWPk6Unif5IUvP9+SJqKRLEgSduWvJAkFXHs0zQCl/v+Bbm1LatAB5Kg5XvCNhgGPD2p2e+3AB9h3S3LWOX052epa8TTCHd3+SxDBKv7Vu4riK8opEl8IV2X0LrbidD58HAmiiK6ruPmxl89KEFgzfodlKUYXZUS/tTz3PUZn0en5OfamvLeb09KQp5BnktCXpqzP2tpLsuSzSbkdEpm352P677UJGUpk1nXUowuRPLiUxgGGYAsm6jrmv0+4HgsOBzEzHN/L+1Ci1IQRUIoPz8LUfvmzRO6rnN9fZhbTyXnSDuQuy6WIDBWqJ9lEqIti1VvWkJ9WU6cz2cuLw+AfEbZ6Qb/8x9/fj1bX0gf0TJpfd8Thu6aH3xfEJthGGuN9fwsSXwcpZAWL4bi+fmZ/X6PruszMdtyOATkeT9bzPrZhLOjLKVoXgjZaRKJ4nQ68fr1AcuSfKfrOufzmffe2895pCaKPBwH8nyakZzk0JubkDwXXUuUXmHcXfflqIdPPz3yC79w4O5OdpGgYvHfT9Pnf8TQF9ZMd/UbjdpuRQZ4eKhm+O3N/cPdipSyLOP997eMI5zP3bqq+75fm+kuLvx1hy6QuG1lwNp2YrvV5w5IxX4vH0kpePtWlOzt1uXhQSxqfd/zjW9IiO77ic1G5/m54fLS5XTqubiw1ibyYZAdE8/9R8LMmPT9uDq0ttvt6nHf7Xy67sd32P6k1xfepvr6u6NaTCdNs8j0+io3RJGF6wqt1PfM9ZI0iKdpznYrTQrL15cmiO3W5XgsaNuWq6vDLOP0q74kjXVyFBC85MHbW4ePP5b7iggou35RbTVNI4417u7KuRbzSVOZvLIUoFOWi7G0WwXEsvziz8r40rrNlxNklILj8cirV4f1WATTlB2T5xO+r5PnPYeDWL/O5wTDMNhsIoZhXLs0tltr3lmsNdrzsyjbck9Rt4W81Wcm5AWJ1nWL4zgrk7H0MS8uX8mfPZ5n0bbjeqCKlCbe7NUQ0+oXtZP+/PWln+Xw4e8rlSQyQHVdz40A1mxFlhDXdf0s95ukqdRlZSmtPldX+zUkLpY1zxPTpijHclLNe+8Fs2AquXMxhcqgO6sBaJFFhkHAzCITXV+Hs/dBmPoFVb55I7LK0qZ0+k/hlzaGX8mhJT//B0qlabNyi0tH4vEo0FfafWRGgsBeqaCyHFe/uFILdA6wLI00FWu1uGuFSLVtGVzf9/E8a0Wjcp6FPnNzFlUFed4xTRP7vYvrwsODyDHLwsiyksMhIE2lFnv77+z/vw8t+fNX+Ksntd/vVmtY2/azVGHjujLgi4zuOA6bjRTJYfiieS1HNeS5eBjKUsBM0zR861s7zmcpxstSjKnzQWozky8F/HYr/vqlt3ix4rVtSxQFNE1HGNqUZf+VTNJyfWmHlvywq/gve+2TP9E0yQ8DRVGsO0aI4A7ft9ak//QkHpCPPz7PTW/Mztd+1paa+SxcjziOOZ/FmZTn3Xw24dLoPc4yy4jvC7sh8jucTvIOeZ6vB0q6rs3/+Wea9lVOFLwjp6It1y/+oTzw8moAAAHYSURBVFJl+cJOLBrZZmOQ52IWTVOxQ4vxJVhdUkqJoadtWyzL4nDw1zZWOWjEnk+gfhH6kkSOrNM0+V3fd9fifQE9bQvf++df/jlNP+x6J17is9f1t1slsNtc/eJRFK2+jEWUXPyMy0Eii31rYfhBmtsk1y07zqTr5J6CEB36fmS3M+beXykZyrKmbVvy/7x7p8bnnXqZz17f/B2lmqabpXRhuhf6yLZt8jxns9ng+8I6LKzC6TSujLznuSuh7Hketm3MLMo4d+2LMzjPO4ZhmPWp7Tt7Vu47+VKfvV59Z1B1Xa/Iz/etGVio9biE5aihpVuy7wWG17XkvcPB5u4un21rW5qmY7ezubtL567MkGmSXPlV56Ufdb2zL/bZ6+Y3O+W6FmXZrAJfFFkUxbDmryhyZxVYWAyhgnyaZlxNKLe3Huezms0uL4eN/CRN2F/l9c6/4GevX/ojpapKitMX1gPyXDjA5WyLxUMoNmWXzcbg8bFkuw3WBkA5zvXLPzPwZ7m+Ni/62Wv5/5Asx4W7rs3pJK2rV1fB3GB9nifKo22Fxlr8hVXV8vgf3K/dZ//avfBnr8tfr9UC1a+u/PXM9udnYc+zbPH+vfx/Sx4eHuj/2+3X8nP/X8+jjAy2QdiEAAAAAElFTkSuQmCC\"\n          ></image>\n          <linearGradient\n            id=\"_Linear11\"\n            x1=\"0\"\n            y1=\"0\"\n            x2=\"1\"\n            y2=\"0\"\n            gradientUnits=\"userSpaceOnUse\"\n            gradientTransform=\"matrix(-118.47,-106.79,210.785,-180.125,69.2121,1372.7)\"\n          >\n            <stop\n              offset=\"0\"\n              style=\"stop-color: rgb(64, 128, 255); stop-opacity: 1;\"\n            ></stop>\n            <stop\n              offset=\"1\"\n              style=\"stop-color: rgb(64, 128, 255); stop-opacity: 1;\"\n            ></stop>\n          </linearGradient>\n          <image\n            id=\"_Image13\"\n            width=\"107px\"\n            height=\"34px\"\n            href=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGsAAAAiCAYAAABY6CeoAAAACXBIWXMAAA7EAAAOxAGVKw4bAAABFElEQVRoge2aQRKDMAhFmx6it/P+x7Ab64xOmaAG8vnwFnWhiOGFOG3TPsu6vpS0djpuH61zXoz5F3s6r4rRxipiftddeUbp3t18QozEu3/JfdSzgCy5VWpTWcVYSlaPqcvDEUpZQPUdCqUsSAbMoJIViJIVCBNZrO+MHtbjrs4KRMkKBJUs9uXXTxZ7JR2g6ix27sly6BIxReIOHdpZWevoNe68y2DAmTVXFmDBAB9pJ29nBYRCln5jgkVyv1QUsrIAJyvtvg1F7iGykF/KlniPG66zKDCyWLI2IqwOJSsQz2URbqZEpTorEDCypn6xnciVYT+SlbS+08Zt01lJfv7xBmYZLPpgy6p/pA9gyxIArKMLXxexLNiBCThLAAAAAElFTkSuQmCC\"\n          ></image>\n          <image\n            id=\"_Image15\"\n            width=\"38px\"\n            height=\"62px\"\n            href=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAA+CAYAAABHuGlYAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAGaElEQVRogcVZSWLjOAwsblIu+oD+/zZ/YC4di8sc7IKLsJzJdCdpXGxLXIACUADpgL8oIYR9jKG/wd/hL+m080uMEb33pwHpR9UBkFLaU7ptW0rBGAOKGgAsy/KjiO3Aw105Z4wx0FpDSgmtNVPqer0if7c2Oee91oqUEsYY5rZaK5ZlQYwRx3HY+J+IsSmOQghPqKhwTO8dIYRvU8yU0kzzEmPEGGNSiGO/Ovh3ABtwQ4UI5ZxRSjEFKBprYwyUUtB7v6H3hQqhlGIb1loRY0RKCcdxIKWE3rshUkqZYsvLHykWQthjjJZZGtwqpRS01ia3MaZCCKi1cj2MMZBS+n1XhhB2brKuK2qtj/hIyeJHkVEypft678g5I+c8uf53FNsBbLoJF6RwU800kirjinM18HXcpxULIewANi5KyDWT1nWd3KquXZbF5tGVmq2qXO/9UzG2f/SSyK3rivf395e1T5/TmBAClmXB+/u7AnBD+7NK5fwoEiE822OM7d7lnBFjtIwlmkSMga97hBBelqRdraTf1SIvnsm1/gEwVBgCfMfPpwQ6UWgj0XGQxgrfeUWJFIO7tYacs20WYzRDPbqkDcZs790U25dl2ai9xoKK+V+oQFEhspzvWZ4kC2DKTK6tCRBjjDtd4RVZlgVvb2/T4lqMj+Ow9yRaRU/Xi/E5nIkUjWLMpZSQxhibn8C6dhyHlRZa6Ru73jtKKbYgDeBmWor8PN2LLmf8JdyLrsKrlV7hp+XeRa01G+/jjaj4hGE49N6ngm/vVakQgqU1N9c2uPc+pTdLjyqpn7qOFz6PMU48RjBsVcaHr/hqPZVZ13XKMn3v+U4zmiWKhur6mpm994diDDwN2BDCxD80wD9TZWqttimfE1lPQYyndV2n32OMW4xp6jI7vGi80CqSr48PRZGGkttSShO/sV9b19XHcjSkmEWKmP5mcKsiipaXs/hjCFCUO1ncASDFGLdXmxJBjRFFk4VbfxNVpRi6h/F2tgfBoRdiaw3LshifeCGPsW3hQsCj/lER5T1SCN3nWd76rhehk0IIGxVQC7iAh3xZlmksUVQC1eMaS5gqRve/OoXXWm/Br0jwANFas3aFStFNuomlt7iZ2aeErUox8Espxp9U1GomgJ0WTec6l23+HcvIWWPIHoytkM7lfYWi7ue21hBZ/9TiUsqUPWcMT746U6rWOvVnOvdVJaAYjeScNwYorSeFeDL0LO838W5WQ/S7ZZ4klc/4eL1eLViZsrVW8z39f9a2eKR8u8Mg93NpZGsNx3FMBxTzEoDt7KCqCcFNtTNVK1+dK1trljxKEWyVfDfLLM05I7Fz1c191tVarbPwLlXOMjecKKWbMtEo/s6s945IjWutBq1apxbpUR94JAkX00Kv8aSuZDZynWVZTCltNs2VHikN/DP+okvOEsCHA68BPFLa3XoujZqFKlqctRx5BfQsSI7iHACWeeoySmvt6eDDsmaIeSF18PbPu5ZjtCroe7+mP01pS+T3tZM4G7uzWGCvpNZpdhExZqx2ptpRKPX47oJoszMG7j2/xoIqx8DU1oYLcxwTxbfkPl5jjFN4MAP53p8nIsmV15G+9yICXIyKcNHjOKY5KjqXY6kc6yzXbK0ZkjFGhFLKzoH2UG75xIIP6xzT3X8HHg3B2TGOzabe+/PiblOfn8UEn3MToqnI6R0GjfOJoOXNcx7r552CLmmMsem1NjdX7uGiSqa6IUWPa2eZzoOtntBVeu8XAP8AuF1D5ZytmKoVFH/0OpNX79St/lMo5uLnJdzvUzXwpk5SiFTpwlv9qnfXYm8F+jHPEPJiaUR21gzTf8fUytba1E2Qw/TcSdECzaS6U8sTShPS/MKOk27T9FXxqKirSBetNby9veHXr182XrL0Q4UokVdInnO0vj1Zc+ciJUV2HloVXON4+axSAJDJ2F4Bn+p6tD9rhbkGkZee//JR0rySlHPelLfOWhUqqH966gFFKYRz7p+fRuhJsRDCaWtNJf1JiJvqkf6E4y6999Ns+6xkbVtIE2enZ0XKX4VzPP5HDP2XGI8B81W5lhTlOZYiV3YuY4w/QshLVJeR/TVOBA0TF49fhpJKptXaT/mSoZlLRa/X67coRAkAdt+OnP2ZLvKtClEy8Bz4L5T6EYUoU2utqGm9+2mlAMz/vunfxHda+HGFKP8C6wW6ett+DK8AAAAASUVORK5CYII=\"\n          ></image>\n        </defs>\n      </svg>\n    );\n  },\n});\n"
  },
  {
    "path": "packages/web-vue/components/result/CHANGELOG.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.49.0\n\n`2023-07-21`\n\n### 💅 Style\n\n- Fix 500 image misalignment issues ([#2578](https://github.com/arco-design/arco-design-vue/pull/2578))\n\n\n## 2.8.0\n\n`2021-12-01`\n\n### 🆕 Feature\n\n- Added `extra` slot and `default` slot ([#302](https://github.com/arco-design/arco-design-vue/pull/302))\n\n"
  },
  {
    "path": "packages/web-vue/components/result/CHANGELOG.zh-CN.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.49.0\n\n`2023-07-21`\n\n### 💅 样式更新\n\n- 修复 500 图片错位问题 ([#2578](https://github.com/arco-design/arco-design-vue/pull/2578))\n\n\n## 2.8.0\n\n`2021-12-01`\n\n### 🆕 新增功能\n\n- 增加 `extra` 插槽和 `default` 插槽 ([#302](https://github.com/arco-design/arco-design-vue/pull/302))\n\n"
  },
  {
    "path": "packages/web-vue/components/result/README.en-US.md",
    "content": "```yaml\nmeta:\n  type: Component\n  category: Feedback\ntitle: Result\ndescription: It is used to feed back the processing results of a series of operation tasks. It is used when there are important operations that need to inform the user of the processing results and the feedback content is more complicated.\n```\n\n*Auto translate by google.*\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/success.md\n\n@import ./__demo__/warning.md\n\n@import ./__demo__/error.md\n\n@import ./__demo__/403.md\n\n@import ./__demo__/404.md\n\n@import ./__demo__/500.md\n\n@import ./__demo__/custom.md\n\n\n@import ./__demo__/all.md\n\n## API\n\n\n### `<result>` Props\n\n|Attribute|Description|Type|Default|\n|---|---|---|:---:|\n|status|The status displayed on the result page|`'info' \\| 'success' \\| 'warning' \\| 'error' \\| '403' \\| '404' \\| '500' \\| null`|`'info'`|\n|title|Title|`string`|`-`|\n|subtitle|Subtitle|`string`|`-`|\n### `<result>` Slots\n\n|Slot Name|Description|Parameters|version|\n|---|---|---|:---|\n|icon|Icon|-||\n|title|Title|-||\n|subtitle|Subtitle|-||\n|extra|Extra|-|2.8.0|\n|default|Default|-|2.8.0|\n\n\n"
  },
  {
    "path": "packages/web-vue/components/result/README.zh-CN.md",
    "content": "```yaml\nmeta:\n  type: 组件\n  category: 反馈\ntitle: 结果页 Result\ndescription: 用于反馈一系列操作任务的处理结果，当有重要操作需告知用户处理结果，且反馈内容较为复杂时使用。\n```\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/success.md\n\n@import ./__demo__/warning.md\n\n@import ./__demo__/error.md\n\n@import ./__demo__/403.md\n\n@import ./__demo__/404.md\n\n@import ./__demo__/500.md\n\n@import ./__demo__/custom.md\n\n\n@import ./__demo__/all.md\n\n## API\n\n\n### `<result>` Props\n\n|参数名|描述|类型|默认值|\n|---|---|---|:---:|\n|status|结果页显示的状态|`'info' \\| 'success' \\| 'warning' \\| 'error' \\| '403' \\| '404' \\| '500' \\| null`|`'info'`|\n|title|标题内容|`string`|`-`|\n|subtitle|子标题内容|`string`|`-`|\n### `<result>` Slots\n\n|插槽名|描述|参数|版本|\n|---|:---:|---|:---|\n|icon|图标|-||\n|title|标题|-||\n|subtitle|副标题|-||\n|extra|操作区|-|2.8.0|\n|default|默认插槽|-|2.8.0|\n\n\n"
  },
  {
    "path": "packages/web-vue/components/result/TEMPLATE.md",
    "content": "## zh-CN\n```yaml\nmeta:\n  type: 组件\n  category: 反馈\ntitle: 结果页 Result\ndescription: 用于反馈一系列操作任务的处理结果，当有重要操作需告知用户处理结果，且反馈内容较为复杂时使用。\n```\n---\n## en-US\n```yaml\nmeta:\n  type: Component\n  category: Feedback\ntitle: Result\ndescription: It is used to feed back the processing results of a series of operation tasks. It is used when there are important operations that need to inform the user of the processing results and the feedback content is more complicated.\n```\n---\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/success.md\n\n@import ./__demo__/warning.md\n\n@import ./__demo__/error.md\n\n@import ./__demo__/403.md\n\n@import ./__demo__/404.md\n\n@import ./__demo__/500.md\n\n@import ./__demo__/custom.md\n\n\n@import ./__demo__/all.md\n\n## API\n\n%%API(result.vue)%%\n"
  },
  {
    "path": "packages/web-vue/components/result/__demo__/403.md",
    "content": "```yaml\ntitle:\n  zh-CN: HTTP状态码 403\n  en-US: HTTP Status Code 403\n```\n\n## zh-CN\n\n没有当前页面的访问权限。\n\n---\n\n## en-US\n\nNo access to the current page.\n\n---\n\n```vue\n<template>\n  <a-result\n    status=\"403\"\n    subtitle=\"Access to this resource on the server is denied.\"\n  >\n    <template #extra>\n      <a-space>\n        <a-button type=\"primary\">Back</a-button>\n      </a-space>\n    </template>\n  </a-result>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/result/__demo__/404.md",
    "content": "```yaml\ntitle:\n  zh-CN: HTTP状态码 404\n  en-US: HTTP Status Code 404\n```\n\n## zh-CN\n\n页面未找到\n\n---\n\n## en-US\n\nPage not found\n\n---\n\n```vue\n<template>\n  <a-result status=\"404\" subtitle=\"Whoops, that page is gone.\">\n    <template #extra>\n      <a-space>\n        <a-button type=\"primary\">Back</a-button>\n      </a-space>\n    </template>\n  </a-result>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/result/__demo__/500.md",
    "content": "```yaml\ntitle:\n  zh-CN: HTTP状态码 500\n  en-US: HTTP Status Code 500\n```\n\n## zh-CN\n\n通常表示服务器错误\n\n---\n\n## en-US\n\nUsually indicates a server error\n\n---\n\n```vue\n<template>\n  <a-result status=\"500\" subtitle=\"This page isn’t working.\">\n    <template #extra>\n      <a-space>\n        <a-button type=\"primary\">Back</a-button>\n      </a-space>\n    </template>\n  </a-result>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/result/__demo__/all.md",
    "content": "```yaml\ntitle:\n  zh-CN: 完整功能\n  en-US: All features\n```\n\n## zh-CN\n\n完整功能\n\n---\n\n## en-US\n\nAll features\n\n---\n\n```vue\n<template>\n  <a-result status=\"error\" title=\"No internet \">\n    <template #icon>\n      <IconFaceFrownFill />\n    </template>\n    <template #subtitle> DNS_PROBE_FINISHED_NO_INTERNET </template>\n\n    <template #extra>\n      <a-button type=\"primary\">Refresh</a-button>\n    </template>\n    <a-typography style=\"background: var(--color-fill-2); padding: 24px;\">\n      <a-typography-paragraph>Try:</a-typography-paragraph>\n      <ul>\n        <li> Checking the network cables, modem, and router </li>\n        <li> Reconnecting to Wi-Fi </li>\n      </ul>\n    </a-typography>\n  </a-result>\n</template>\n\n<script>\nimport { IconFaceFrownFill } from '@arco-design/web-vue/es/icon';\n\nexport default {\n  components: {\n    IconFaceFrownFill\n  },\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/result/__demo__/basic.md",
    "content": "```yaml\ntitle:\n  zh-CN: 基本用法\n  en-US: Basic Usage\n```\n\n## zh-CN\n\n展示结果状态。\n\n---\n\n## en-US\n\nShow the result status.\n\n---\n\n```vue\n<template>\n  <a-result title=\"This is title content\" subtitle=\"This is subtitle content\">\n    <template #extra>\n      <a-space>\n        <a-button type=\"secondary\">Again</a-button>\n        <a-button type=\"primary\">Back</a-button>\n      </a-space>\n    </template>\n  </a-result>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/result/__demo__/custom.md",
    "content": "```yaml\ntitle:\n  zh-CN: 自定义状态\n  en-US: Custom Status\n```\n\n## zh-CN\n\n自定义状态。需要传入指定的图标\n\n---\n\n## en-US\n\nCustom Status. You need to set the Icon property\n\n---\n\n```vue\n<template>\n  <a-result :status=\"null\" title=\"This is title content\" subtitle=\"This is subtitle content\">\n    <template #icon>\n      <IconFaceSmileFill />\n    </template>\n    <template #extra>\n      <a-space>\n        <a-button type=\"secondary\">Again</a-button>\n        <a-button type=\"primary\">Back</a-button>\n      </a-space>\n    </template>\n  </a-result>\n</template>\n<script>\nimport { IconFaceSmileFill } from '@arco-design/web-vue/es/icon';\n\nexport default {\n  components: {\n    IconFaceSmileFill\n  },\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/result/__demo__/error.md",
    "content": "```yaml\ntitle:\n  zh-CN: 错误状态\n  en-US: Error\n```\n\n## zh-CN\n\n展示错误状态。\n\n---\n\n## en-US\n\nShow error status.\n\n---\n\n```vue\n<template>\n  <a-result status=\"error\" title=\"This is title content\">\n    <template #subtitle>\n      This is subtitle content\n    </template>\n\n    <template #extra>\n      <a-space>\n        <a-button type='primary'>Back</a-button>\n      </a-space>\n    </template>\n  </a-result>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/result/__demo__/success.md",
    "content": "```yaml\ntitle:\n  zh-CN: 成功状态\n  en-US: Success\n```\n\n## zh-CN\n\n展示成功状态。\n\n---\n\n## en-US\n\nShow success status.\n\n---\n\n```vue\n<template>\n  <a-result status=\"success\" title=\"This is title content\" >\n    <template #subtitle>\n      This is subtitle content\n    </template>\n    <template #extra>\n      <a-space>\n        <a-button type='primary'>Back</a-button>\n      </a-space>\n    </template>\n  </a-result>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/result/__demo__/warning.md",
    "content": "```yaml\ntitle:\n  zh-CN: 警告状态\n  en-US: Warning\n```\n\n## zh-CN\n\n展示警告状态。\n\n---\n\n## en-US\n\nShow warning status.\n\n---\n\n```vue\n<template>\n  <a-result status=\"warning\" title=\"This is title content\">\n    <template #subtitle>\n      This is subtitle content\n    </template>\n\n    <template #extra>\n      <a-space>\n        <a-button type='primary'>Back</a-button>\n      </a-space>\n    </template>\n  </a-result>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/result/__test__/__snapshots__/demo.test.ts.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`<result> demo: render [403] correctly 1`] = `\n\"<div class=\\\\\"arco-result\\\\\">\n  <div class=\\\\\"arco-result-icon arco-result-icon-403\\\\\">\n    <div class=\\\\\"arco-result-icon-tip\\\\\"><svg viewBox=\\\\\"0 0 213 213\\\\\" height=\\\\\"100%\\\\\" width=\\\\\"100%\\\\\" style=\\\\\"fill-rule: evenodd; clip-rule: evenodd; stroke-linejoin: round; stroke-miterlimit: 2;\\\\\">\n        <g transform=\\\\\"matrix(1,0,0,1,-871.485,-445.62)\\\\\">\n          <g>\n            <g transform=\\\\\"matrix(1,0,0,1,-75.2684,-87.3801)\\\\\">\n              <circle cx=\\\\\"1053.23\\\\\" cy=\\\\\"639.477\\\\\" r=\\\\\"106.477\\\\\" style=\\\\\"fill: rgb(235, 238, 246);\\\\\"></circle>\n            </g>\n            <g transform=\\\\\"matrix(1,0,0,1,246.523,295.575)\\\\\">\n              <g transform=\\\\\"matrix(0.316667,0,0,0.316667,277.545,71.0298)\\\\\">\n                <g transform=\\\\\"matrix(0.989011,-0.571006,1.14201,0.659341,-335.171,81.4498)\\\\\">\n                  <rect x=\\\\\"495.52\\\\\" y=\\\\\"1057.87\\\\\" width=\\\\\"105.078\\\\\" height=\\\\\"91\\\\\" style=\\\\\"fill: rgb(253, 243, 228);\\\\\"></rect>\n                </g>\n                <g transform=\\\\\"matrix(0.164835,-0.0951676,1.14201,0.659341,116.224,-179.163)\\\\\">\n                  <rect x=\\\\\"495.52\\\\\" y=\\\\\"1057.87\\\\\" width=\\\\\"105.078\\\\\" height=\\\\\"91\\\\\" style=\\\\\"fill: rgb(202, 174, 136);\\\\\"></rect>\n                </g>\n                <g transform=\\\\\"matrix(0.978261,-0.564799,1.26804e-16,1.30435,-337.046,42.0327)\\\\\">\n                  <rect x=\\\\\"1844.06\\\\\" y=\\\\\"1192.54\\\\\" width=\\\\\"106.232\\\\\" height=\\\\\"92\\\\\" style=\\\\\"fill: rgb(196, 173, 142);\\\\\"></rect>\n                </g>\n                <g transform=\\\\\"matrix(0.267591,-0.154493,3.46856e-17,0.356787,992.686,475.823)\\\\\">\n                  <rect x=\\\\\"1844.06\\\\\" y=\\\\\"1192.54\\\\\" width=\\\\\"106.232\\\\\" height=\\\\\"92\\\\\" style=\\\\\"fill: rgb(102, 102, 102);\\\\\"></rect>\n                </g>\n                <g transform=\\\\\"matrix(1.28257,-0.740494,1.23317e-16,1.7101,1501.14,624.071)\\\\\">\n                  <g transform=\\\\\"matrix(1,0,0,1,-6,-6)\\\\\">\n                    <path d=\\\\\"M2.25,10.5C2.25,10.5 1.5,10.5 1.5,9.75C1.5,9 2.25,6.75 6,6.75C9.75,6.75 10.5,9 10.5,9.75C10.5,10.5 9.75,10.5 9.75,10.5L2.25,10.5ZM6,6C7.234,6 8.25,4.984 8.25,3.75C8.25,2.516 7.234,1.5 6,1.5C4.766,1.5 3.75,2.516 3.75,3.75C3.75,4.984 4.766,6 6,6Z\\\\\" style=\\\\\"fill: white;\\\\\"></path>\n                  </g>\n                </g>\n                <g transform=\\\\\"matrix(0.725806,0.419045,1.75755e-17,1.01444,155.314,212.138)\\\\\">\n                  <rect x=\\\\\"1663.92\\\\\" y=\\\\\"-407.511\\\\\" width=\\\\\"143.183\\\\\" height=\\\\\"118.292\\\\\" style=\\\\\"fill: rgb(240, 218, 183);\\\\\"></rect>\n                </g>\n                <g transform=\\\\\"matrix(1.58977,-0.917857,1.15976e-16,2.2425,-1270.46,-614.379)\\\\\">\n                  <rect x=\\\\\"1748.87\\\\\" y=\\\\\"1226.67\\\\\" width=\\\\\"10.895\\\\\" height=\\\\\"13.378\\\\\" style=\\\\\"fill: rgb(132, 97, 0);\\\\\"></rect>\n                </g>\n              </g>\n              <g transform=\\\\\"matrix(0.182997,0.105653,-0.494902,0.285732,814.161,66.3087)\\\\\">\n                <rect x=\\\\\"657.012\\\\\" y=\\\\\"404.643\\\\\" width=\\\\\"198.586\\\\\" height=\\\\\"145.08\\\\\" style=\\\\\"fill-opacity: 0.1;\\\\\"></rect>\n              </g>\n              <g transform=\\\\\"matrix(0.316667,0,0,0.316667,237.301,94.2647)\\\\\">\n                <g transform=\\\\\"matrix(0.989011,-0.571006,1.14201,0.659341,-335.171,81.4498)\\\\\">\n                  <rect x=\\\\\"495.52\\\\\" y=\\\\\"1057.87\\\\\" width=\\\\\"105.078\\\\\" height=\\\\\"91\\\\\" style=\\\\\"fill: rgb(253, 243, 228);\\\\\"></rect>\n                </g>\n                <g transform=\\\\\"matrix(0.164835,-0.0951676,1.14201,0.659341,116.224,-179.163)\\\\\">\n                  <rect x=\\\\\"495.52\\\\\" y=\\\\\"1057.87\\\\\" width=\\\\\"105.078\\\\\" height=\\\\\"91\\\\\" style=\\\\\"fill: rgb(202, 174, 136);\\\\\"></rect>\n                </g>\n                <g transform=\\\\\"matrix(0.978261,-0.564799,1.26804e-16,1.30435,-337.046,42.0327)\\\\\">\n                  <rect x=\\\\\"1844.06\\\\\" y=\\\\\"1192.54\\\\\" width=\\\\\"106.232\\\\\" height=\\\\\"92\\\\\" style=\\\\\"fill: rgb(196, 173, 142);\\\\\"></rect>\n                </g>\n                <g transform=\\\\\"matrix(0.267591,-0.154493,3.46856e-17,0.356787,992.686,475.823)\\\\\">\n                  <rect x=\\\\\"1844.06\\\\\" y=\\\\\"1192.54\\\\\" width=\\\\\"106.232\\\\\" height=\\\\\"92\\\\\" style=\\\\\"fill: rgb(102, 102, 102);\\\\\"></rect>\n                </g>\n                <g transform=\\\\\"matrix(1.28257,-0.740494,1.23317e-16,1.7101,1501.14,624.071)\\\\\">\n                  <g transform=\\\\\"matrix(1,0,0,1,-6,-6)\\\\\">\n                    <path d=\\\\\"M2.25,10.5C2.25,10.5 1.5,10.5 1.5,9.75C1.5,9 2.25,6.75 6,6.75C9.75,6.75 10.5,9 10.5,9.75C10.5,10.5 9.75,10.5 9.75,10.5L2.25,10.5ZM6,6C7.234,6 8.25,4.984 8.25,3.75C8.25,2.516 7.234,1.5 6,1.5C4.766,1.5 3.75,2.516 3.75,3.75C3.75,4.984 4.766,6 6,6Z\\\\\" style=\\\\\"fill: white;\\\\\"></path>\n                  </g>\n                </g>\n                <g transform=\\\\\"matrix(0.725806,0.419045,1.75755e-17,1.01444,155.314,212.138)\\\\\">\n                  <rect x=\\\\\"1663.92\\\\\" y=\\\\\"-407.511\\\\\" width=\\\\\"143.183\\\\\" height=\\\\\"118.292\\\\\" style=\\\\\"fill: rgb(240, 218, 183);\\\\\"></rect>\n                </g>\n                <g transform=\\\\\"matrix(1.58977,-0.917857,1.15976e-16,2.2425,-1270.46,-614.379)\\\\\">\n                  <rect x=\\\\\"1748.87\\\\\" y=\\\\\"1226.67\\\\\" width=\\\\\"10.895\\\\\" height=\\\\\"13.378\\\\\" style=\\\\\"fill: rgb(132, 97, 0);\\\\\"></rect>\n                </g>\n              </g>\n              <g transform=\\\\\"matrix(0.474953,0,0,0.474953,538.938,8.95289)\\\\\">\n                <g transform=\\\\\"matrix(0.180615,0.104278,-0.973879,0.562269,790.347,286.159)\\\\\">\n                  <rect x=\\\\\"657.012\\\\\" y=\\\\\"404.643\\\\\" width=\\\\\"198.586\\\\\" height=\\\\\"145.08\\\\\" style=\\\\\"fill-opacity: 0.1;\\\\\"></rect>\n                </g>\n                <g transform=\\\\\"matrix(0.473356,0,0,0.473356,294.481,129.741)\\\\\">\n                  <g>\n                    <g transform=\\\\\"matrix(0.1761,-0.101671,1.73518e-16,1.22207,442.564,7.31508)\\\\\">\n                      <rect x=\\\\\"202.62\\\\\" y=\\\\\"575.419\\\\\" width=\\\\\"124.002\\\\\" height=\\\\\"259.402\\\\\" style=\\\\\"fill: rgb(235, 235, 235);\\\\\"></rect>\n                    </g>\n                    <g transform=\\\\\"matrix(0.0922781,0.0532768,2.03964e-16,2.20569,405.236,-248.842)\\\\\">\n                      <rect x=\\\\\"657.012\\\\\" y=\\\\\"404.643\\\\\" width=\\\\\"198.586\\\\\" height=\\\\\"145.08\\\\\" style=\\\\\"fill: rgb(34, 34, 34);\\\\\"></rect>\n                    </g>\n                    <g transform=\\\\\"matrix(0.147541,-0.0851831,1.52371e-16,1.23446,454.294,-3.8127)\\\\\">\n                      <rect x=\\\\\"202.62\\\\\" y=\\\\\"575.419\\\\\" width=\\\\\"124.002\\\\\" height=\\\\\"259.402\\\\\" style=\\\\\"fill: rgb(51, 51, 51);\\\\\"></rect>\n                    </g>\n                    <g transform=\\\\\"matrix(0.0921286,0.0531905,-0.126106,0.0728076,474.688,603.724)\\\\\">\n                      <rect x=\\\\\"657.012\\\\\" y=\\\\\"404.643\\\\\" width=\\\\\"198.586\\\\\" height=\\\\\"145.08\\\\\" style=\\\\\"fill: rgb(102, 102, 102);\\\\\"></rect>\n                    </g>\n                  </g>\n                </g>\n                <g transform=\\\\\"matrix(0.473356,0,0,0.473356,192.621,188.549)\\\\\">\n                  <g>\n                    <g transform=\\\\\"matrix(0.1761,-0.101671,1.73518e-16,1.22207,442.564,7.31508)\\\\\">\n                      <rect x=\\\\\"202.62\\\\\" y=\\\\\"575.419\\\\\" width=\\\\\"124.002\\\\\" height=\\\\\"259.402\\\\\" style=\\\\\"fill: rgb(235, 235, 235);\\\\\"></rect>\n                    </g>\n                    <g transform=\\\\\"matrix(0.0922781,0.0532768,2.03964e-16,2.20569,405.236,-248.842)\\\\\">\n                      <rect x=\\\\\"657.012\\\\\" y=\\\\\"404.643\\\\\" width=\\\\\"198.586\\\\\" height=\\\\\"145.08\\\\\" style=\\\\\"fill: rgb(34, 34, 34);\\\\\"></rect>\n                    </g>\n                    <g transform=\\\\\"matrix(0.147541,-0.0851831,1.52371e-16,1.23446,454.294,-3.8127)\\\\\">\n                      <rect x=\\\\\"202.62\\\\\" y=\\\\\"575.419\\\\\" width=\\\\\"124.002\\\\\" height=\\\\\"259.402\\\\\" style=\\\\\"fill: rgb(51, 51, 51);\\\\\"></rect>\n                    </g>\n                    <g transform=\\\\\"matrix(0.0921286,0.0531905,-0.126106,0.0728076,474.688,603.724)\\\\\">\n                      <rect x=\\\\\"657.012\\\\\" y=\\\\\"404.643\\\\\" width=\\\\\"198.586\\\\\" height=\\\\\"145.08\\\\\" style=\\\\\"fill: rgb(102, 102, 102);\\\\\"></rect>\n                    </g>\n                  </g>\n                </g>\n                <g transform=\\\\\"matrix(0.668111,0,0,0.668111,-123.979,-49.2109)\\\\\">\n                  <g transform=\\\\\"matrix(0.0349225,0.0201625,1.81598e-17,0.220789,974.758,729.412)\\\\\">\n                    <rect x=\\\\\"657.012\\\\\" y=\\\\\"404.643\\\\\" width=\\\\\"198.586\\\\\" height=\\\\\"145.08\\\\\" style=\\\\\"fill: rgb(235, 235, 235);\\\\\"></rect>\n                  </g>\n                  <g transform=\\\\\"matrix(1.1164,-0.644557,0,0.220789,42.5091,1294.14)\\\\\">\n                    <rect x=\\\\\"657.012\\\\\" y=\\\\\"404.643\\\\\" width=\\\\\"198.586\\\\\" height=\\\\\"145.08\\\\\" style=\\\\\"fill: rgb(235, 235, 235);\\\\\"></rect>\n                  </g>\n                  <g transform=\\\\\"matrix(0.0349225,0.0201625,-1.52814,0.882275,1593.11,461.746)\\\\\">\n                    <rect x=\\\\\"657.012\\\\\" y=\\\\\"404.643\\\\\" width=\\\\\"198.586\\\\\" height=\\\\\"145.08\\\\\" style=\\\\\"fill: rgb(102, 102, 102);\\\\\"></rect>\n                  </g>\n                  <g transform=\\\\\"matrix(1.1164,-0.644557,0,0.220789,49.4442,1298.14)\\\\\">\n                    <rect x=\\\\\"657.012\\\\\" y=\\\\\"404.643\\\\\" width=\\\\\"198.586\\\\\" height=\\\\\"145.08\\\\\" style=\\\\\"fill: rgb(51, 51, 51);\\\\\"></rect>\n                  </g>\n                  <g transform=\\\\\"matrix(0.0349225,0.0201625,1.81598e-17,0.220789,753.056,857.412)\\\\\">\n                    <rect x=\\\\\"657.012\\\\\" y=\\\\\"404.643\\\\\" width=\\\\\"198.586\\\\\" height=\\\\\"145.08\\\\\" style=\\\\\"fill: rgb(34, 34, 34);\\\\\"></rect>\n                  </g>\n                  <g transform=\\\\\"matrix(0.142968,-0.0825428,-0.207261,0.478709,898.874,529.479)\\\\\">\n                    <rect x=\\\\\"831\\\\\" y=\\\\\"1023.79\\\\\" width=\\\\\"89.214\\\\\" height=\\\\\"89.214\\\\\" style=\\\\\"fill: rgb(255, 125, 0);\\\\\"></rect>\n                  </g>\n                  <g transform=\\\\\"matrix(0.142968,-0.0825428,-0.207261,0.478709,930.12,511.44)\\\\\">\n                    <rect x=\\\\\"831\\\\\" y=\\\\\"1023.79\\\\\" width=\\\\\"89.214\\\\\" height=\\\\\"89.214\\\\\" style=\\\\\"fill: rgb(255, 125, 0);\\\\\"></rect>\n                  </g>\n                  <g transform=\\\\\"matrix(0.142968,-0.0825428,-0.207261,0.478709,961.365,493.4)\\\\\">\n                    <rect x=\\\\\"831\\\\\" y=\\\\\"1023.79\\\\\" width=\\\\\"89.214\\\\\" height=\\\\\"89.214\\\\\" style=\\\\\"fill: rgb(248, 248, 248);\\\\\"></rect>\n                  </g>\n                  <g transform=\\\\\"matrix(0.142968,-0.0825428,-0.207261,0.478709,992.61,475.361)\\\\\">\n                    <rect x=\\\\\"831\\\\\" y=\\\\\"1023.79\\\\\" width=\\\\\"89.214\\\\\" height=\\\\\"89.214\\\\\" style=\\\\\"fill: rgb(248, 248, 248);\\\\\"></rect>\n                  </g>\n                  <g transform=\\\\\"matrix(0.142968,-0.0825428,-0.207261,0.478709,1023.86,457.321)\\\\\">\n                    <rect x=\\\\\"831\\\\\" y=\\\\\"1023.79\\\\\" width=\\\\\"89.214\\\\\" height=\\\\\"89.214\\\\\" style=\\\\\"fill: rgb(248, 248, 248);\\\\\"></rect>\n                  </g>\n                  <g transform=\\\\\"matrix(0.142968,-0.0825428,-0.207261,0.478709,1056.25,438.617)\\\\\">\n                    <rect x=\\\\\"831\\\\\" y=\\\\\"1023.79\\\\\" width=\\\\\"89.214\\\\\" height=\\\\\"89.214\\\\\" style=\\\\\"fill: rgb(255, 125, 0);\\\\\"></rect>\n                  </g>\n                  <g transform=\\\\\"matrix(0.142968,-0.0825428,-0.207261,0.478709,1085.74,421.589)\\\\\">\n                    <rect x=\\\\\"831\\\\\" y=\\\\\"1023.79\\\\\" width=\\\\\"89.214\\\\\" height=\\\\\"89.214\\\\\" style=\\\\\"fill: rgb(255, 125, 0);\\\\\"></rect>\n                  </g>\n                </g>\n                <g transform=\\\\\"matrix(0.668111,0,0,0.668111,-123.979,-91.97)\\\\\">\n                  <g transform=\\\\\"matrix(0.0349225,0.0201625,1.81598e-17,0.220789,974.758,729.412)\\\\\">\n                    <rect x=\\\\\"657.012\\\\\" y=\\\\\"404.643\\\\\" width=\\\\\"198.586\\\\\" height=\\\\\"145.08\\\\\" style=\\\\\"fill: rgb(235, 235, 235);\\\\\"></rect>\n                  </g>\n                  <g transform=\\\\\"matrix(1.1164,-0.644557,0,0.220789,42.5091,1294.14)\\\\\">\n                    <rect x=\\\\\"657.012\\\\\" y=\\\\\"404.643\\\\\" width=\\\\\"198.586\\\\\" height=\\\\\"145.08\\\\\" style=\\\\\"fill: rgb(235, 235, 235);\\\\\"></rect>\n                  </g>\n                  <g transform=\\\\\"matrix(0.0349225,0.0201625,-1.52814,0.882275,1593.11,461.746)\\\\\">\n                    <rect x=\\\\\"657.012\\\\\" y=\\\\\"404.643\\\\\" width=\\\\\"198.586\\\\\" height=\\\\\"145.08\\\\\" style=\\\\\"fill: rgb(102, 102, 102);\\\\\"></rect>\n                  </g>\n                  <g transform=\\\\\"matrix(1.1164,-0.644557,0,0.220789,49.4442,1298.14)\\\\\">\n                    <rect x=\\\\\"657.012\\\\\" y=\\\\\"404.643\\\\\" width=\\\\\"198.586\\\\\" height=\\\\\"145.08\\\\\" style=\\\\\"fill: rgb(51, 51, 51);\\\\\"></rect>\n                  </g>\n                  <g transform=\\\\\"matrix(0.0349225,0.0201625,1.81598e-17,0.220789,753.056,857.412)\\\\\">\n                    <rect x=\\\\\"657.012\\\\\" y=\\\\\"404.643\\\\\" width=\\\\\"198.586\\\\\" height=\\\\\"145.08\\\\\" style=\\\\\"fill: rgb(34, 34, 34);\\\\\"></rect>\n                  </g>\n                  <g transform=\\\\\"matrix(0.142968,-0.0825428,-0.207261,0.478709,898.874,529.479)\\\\\">\n                    <rect x=\\\\\"831\\\\\" y=\\\\\"1023.79\\\\\" width=\\\\\"89.214\\\\\" height=\\\\\"89.214\\\\\" style=\\\\\"fill: rgb(255, 125, 0);\\\\\"></rect>\n                  </g>\n                  <g transform=\\\\\"matrix(0.142968,-0.0825428,-0.207261,0.478709,930.12,511.44)\\\\\">\n                    <rect x=\\\\\"831\\\\\" y=\\\\\"1023.79\\\\\" width=\\\\\"89.214\\\\\" height=\\\\\"89.214\\\\\" style=\\\\\"fill: rgb(255, 125, 0);\\\\\"></rect>\n                  </g>\n                  <g transform=\\\\\"matrix(0.142968,-0.0825428,-0.207261,0.478709,961.365,493.4)\\\\\">\n                    <rect x=\\\\\"831\\\\\" y=\\\\\"1023.79\\\\\" width=\\\\\"89.214\\\\\" height=\\\\\"89.214\\\\\" style=\\\\\"fill: rgb(248, 248, 248);\\\\\"></rect>\n                  </g>\n                  <g transform=\\\\\"matrix(0.142968,-0.0825428,-0.207261,0.478709,992.61,475.361)\\\\\">\n                    <rect x=\\\\\"831\\\\\" y=\\\\\"1023.79\\\\\" width=\\\\\"89.214\\\\\" height=\\\\\"89.214\\\\\" style=\\\\\"fill: rgb(248, 248, 248);\\\\\"></rect>\n                  </g>\n                  <g transform=\\\\\"matrix(0.142968,-0.0825428,-0.207261,0.478709,1023.86,457.321)\\\\\">\n                    <rect x=\\\\\"831\\\\\" y=\\\\\"1023.79\\\\\" width=\\\\\"89.214\\\\\" height=\\\\\"89.214\\\\\" style=\\\\\"fill: rgb(248, 248, 248);\\\\\"></rect>\n                  </g>\n                  <g transform=\\\\\"matrix(0.142968,-0.0825428,-0.207261,0.478709,1056.25,438.617)\\\\\">\n                    <rect x=\\\\\"831\\\\\" y=\\\\\"1023.79\\\\\" width=\\\\\"89.214\\\\\" height=\\\\\"89.214\\\\\" style=\\\\\"fill: rgb(255, 125, 0);\\\\\"></rect>\n                  </g>\n                  <g transform=\\\\\"matrix(0.142968,-0.0825428,-0.207261,0.478709,1085.74,421.589)\\\\\">\n                    <rect x=\\\\\"831\\\\\" y=\\\\\"1023.79\\\\\" width=\\\\\"89.214\\\\\" height=\\\\\"89.214\\\\\" style=\\\\\"fill: rgb(255, 125, 0);\\\\\"></rect>\n                  </g>\n                </g>\n                <g transform=\\\\\"matrix(0.701585,5.16096e-35,-5.16096e-35,0.701585,-546.219,-21.3487)\\\\\">\n                  <g transform=\\\\\"matrix(0.558202,-0.322278,0,0.882275,1033.27,615.815)\\\\\">\n                    <path d=\\\\\"M855.598,410.446C855.598,407.244 852.515,404.643 848.718,404.643L663.891,404.643C660.094,404.643 657.012,407.244 657.012,410.446L657.012,543.92C657.012,547.123 660.094,549.723 663.891,549.723L848.718,549.723C852.515,549.723 855.598,547.123 855.598,543.92L855.598,410.446Z\\\\\" style=\\\\\"fill: white;\\\\\"></path>\n                  </g>\n                  <g transform=\\\\\"matrix(0.558202,-0.322278,0,0.882275,1035.25,616.977)\\\\\">\n                    <path d=\\\\\"M855.598,410.446C855.598,407.244 852.515,404.643 848.718,404.643L663.891,404.643C660.094,404.643 657.012,407.244 657.012,410.446L657.012,543.92C657.012,547.123 660.094,549.723 663.891,549.723L848.718,549.723C852.515,549.723 855.598,547.123 855.598,543.92L855.598,410.446Z\\\\\" style=\\\\\"fill: white;\\\\\"></path>\n                  </g>\n                  <g transform=\\\\\"matrix(1,0,0,1,418.673,507.243)\\\\\">\n                    <path d=\\\\\"M1088.34,192.063C1089.79,191.209 1090.78,191.821 1090.78,191.821L1092.71,192.944C1092.71,192.944 1092.29,192.721 1091.7,192.763C1090.99,192.813 1090.34,193.215 1090.34,193.215C1090.34,193.215 1088.85,192.362 1088.34,192.063Z\\\\\" style=\\\\\"fill: rgb(248, 248, 248);\\\\\"></path>\n                  </g>\n                  <g transform=\\\\\"matrix(1,0,0,1,235.984,-39.1315)\\\\\">\n                    <path d=\\\\\"M1164.02,805.247C1164.05,802.517 1165.64,799.379 1167.67,798.118L1169.67,799.272C1167.58,800.648 1166.09,803.702 1166.02,806.402L1164.02,805.247Z\\\\\" style=\\\\\"fill: url(#_Linear1);\\\\\"></path>\n                  </g>\n                  <g transform=\\\\\"matrix(0.396683,0,0,0.396683,1000.22,516.921)\\\\\">\n                    <path d=\\\\\"M1011.2,933.14C1009.31,932.075 1008.05,929.696 1007.83,926.324L1012.87,929.235C1012.87,929.235 1012.96,930.191 1013.04,930.698C1013.16,931.427 1013.42,932.344 1013.62,932.845C1013.79,933.255 1014.59,935.155 1016.22,936.046C1015.83,935.781 1011.19,933.139 1011.19,933.139L1011.2,933.14Z\\\\\" style=\\\\\"fill: rgb(238, 238, 238);\\\\\"></path>\n                  </g>\n                  <g transform=\\\\\"matrix(0.253614,-0.146424,4.87691e-17,0.338152,1209.98,830.02)\\\\\">\n                    <circle cx=\\\\\"975.681\\\\\" cy=\\\\\"316.681\\\\\" r=\\\\\"113.681\\\\\" style=\\\\\"fill: rgb(245, 63, 63);\\\\\"></circle>\n                    <g transform=\\\\\"matrix(1.08844,0,0,0.61677,-99.9184,125.436)\\\\\">\n                      <path d=\\\\\"M1062,297.556C1062,296.697 1061.61,296 1061.12,296L915.882,296C915.395,296 915,296.697 915,297.556L915,333.356C915,334.215 915.395,334.912 915.882,334.912L1061.12,334.912C1061.61,334.912 1062,334.215 1062,333.356L1062,297.556Z\\\\\" style=\\\\\"fill: white;\\\\\"></path>\n                    </g>\n                  </g>\n                  <g transform=\\\\\"matrix(5.57947,-3.22131,0.306277,0.176829,-6260.71,4938.32)\\\\\">\n                    <rect x=\\\\\"1335.54\\\\\" y=\\\\\"694.688\\\\\" width=\\\\\"18.525\\\\\" height=\\\\\"6.511\\\\\" style=\\\\\"fill: rgb(248, 248, 248);\\\\\"></rect>\n                  </g>\n                  <g transform=\\\\\"matrix(0.10726,0.0619268,-1.83335e-14,18.1609,1256.76,-11932.8)\\\\\">\n                    <rect x=\\\\\"1335.54\\\\\" y=\\\\\"694.688\\\\\" width=\\\\\"18.525\\\\\" height=\\\\\"6.511\\\\\" style=\\\\\"fill: rgb(238, 238, 238);\\\\\"></rect>\n                  </g>\n                </g>\n              </g>\n              <g transform=\\\\\"matrix(0.316667,0,0,0.316667,269.139,37.8829)\\\\\">\n                <g transform=\\\\\"matrix(0.989011,-0.571006,1.14201,0.659341,-335.171,81.4498)\\\\\">\n                  <rect x=\\\\\"495.52\\\\\" y=\\\\\"1057.87\\\\\" width=\\\\\"105.078\\\\\" height=\\\\\"91\\\\\" style=\\\\\"fill: rgb(253, 243, 228);\\\\\"></rect>\n                </g>\n                <g transform=\\\\\"matrix(0.164835,-0.0951676,1.14201,0.659341,116.224,-179.163)\\\\\">\n                  <rect x=\\\\\"495.52\\\\\" y=\\\\\"1057.87\\\\\" width=\\\\\"105.078\\\\\" height=\\\\\"91\\\\\" style=\\\\\"fill: rgb(202, 174, 136);\\\\\"></rect>\n                </g>\n                <g transform=\\\\\"matrix(0.978261,-0.564799,1.26804e-16,1.30435,-337.046,42.0327)\\\\\">\n                  <rect x=\\\\\"1844.06\\\\\" y=\\\\\"1192.54\\\\\" width=\\\\\"106.232\\\\\" height=\\\\\"92\\\\\" style=\\\\\"fill: rgb(196, 173, 142);\\\\\"></rect>\n                </g>\n                <g transform=\\\\\"matrix(0.267591,-0.154493,3.46856e-17,0.356787,992.686,475.823)\\\\\">\n                  <rect x=\\\\\"1844.06\\\\\" y=\\\\\"1192.54\\\\\" width=\\\\\"106.232\\\\\" height=\\\\\"92\\\\\" style=\\\\\"fill: rgb(102, 102, 102);\\\\\"></rect>\n                </g>\n                <g transform=\\\\\"matrix(1.28257,-0.740494,1.23317e-16,1.7101,1501.14,624.071)\\\\\">\n                  <g transform=\\\\\"matrix(1,0,0,1,-6,-6)\\\\\">\n                    <path d=\\\\\"M2.25,10.5C2.25,10.5 1.5,10.5 1.5,9.75C1.5,9 2.25,6.75 6,6.75C9.75,6.75 10.5,9 10.5,9.75C10.5,10.5 9.75,10.5 9.75,10.5L2.25,10.5ZM6,6C7.234,6 8.25,4.984 8.25,3.75C8.25,2.516 7.234,1.5 6,1.5C4.766,1.5 3.75,2.516 3.75,3.75C3.75,4.984 4.766,6 6,6Z\\\\\" style=\\\\\"fill: white;\\\\\"></path>\n                  </g>\n                </g>\n                <g transform=\\\\\"matrix(0.725806,0.419045,1.75755e-17,1.01444,155.314,212.138)\\\\\">\n                  <rect x=\\\\\"1663.92\\\\\" y=\\\\\"-407.511\\\\\" width=\\\\\"143.183\\\\\" height=\\\\\"118.292\\\\\" style=\\\\\"fill: rgb(240, 218, 183);\\\\\"></rect>\n                </g>\n                <g transform=\\\\\"matrix(1.58977,-0.917857,1.15976e-16,2.2425,-1270.46,-614.379)\\\\\">\n                  <rect x=\\\\\"1748.87\\\\\" y=\\\\\"1226.67\\\\\" width=\\\\\"10.895\\\\\" height=\\\\\"13.378\\\\\" style=\\\\\"fill: rgb(132, 97, 0);\\\\\"></rect>\n                </g>\n              </g>\n            </g>\n          </g>\n        </g>\n        <defs>\n          <linearGradient id=\\\\\"_Linear1\\\\\" x1=\\\\\"0\\\\\" y1=\\\\\"0\\\\\" x2=\\\\\"1\\\\\" y2=\\\\\"0\\\\\" gradientUnits=\\\\\"userSpaceOnUse\\\\\" gradientTransform=\\\\\"matrix(-2.64571,4.04098,-4.04098,-2.64571,1167.67,799.269)\\\\\">\n            <stop offset=\\\\\"0\\\\\" style=\\\\\"stop-color: rgb(248, 248, 248); stop-opacity: 1;\\\\\"></stop>\n            <stop offset=\\\\\"1\\\\\" style=\\\\\"stop-color: rgb(248, 248, 248); stop-opacity: 1;\\\\\"></stop>\n          </linearGradient>\n        </defs>\n      </svg></div>\n  </div>\n  <!--v-if-->\n  <div class=\\\\\"arco-result-subtitle\\\\\">Access to this resource on the server is denied.</div>\n  <div class=\\\\\"arco-result-extra\\\\\">\n    <div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 8px; row-gap: 8px;\\\\\">\n      <!---->\n      <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n          <!--v-if-->Back\n        </button></div>\n    </div>\n  </div>\n  <!--v-if-->\n</div>\"\n`;\n\nexports[`<result> demo: render [404] correctly 1`] = `\n\"<div class=\\\\\"arco-result\\\\\">\n  <div class=\\\\\"arco-result-icon arco-result-icon-404\\\\\">\n    <div class=\\\\\"arco-result-icon-tip\\\\\"><svg width=\\\\\"100%\\\\\" height=\\\\\"100%\\\\\" viewBox=\\\\\"0 0 213 213\\\\\" style=\\\\\"fill-rule: evenodd; clip-rule: evenodd; stroke-linejoin: round; stroke-miterlimit: 2;\\\\\">\n        <g transform=\\\\\"matrix(1,0,0,1,-1241.95,-445.62)\\\\\">\n          <g>\n            <g transform=\\\\\"matrix(1,0,0,1,295.2,-87.3801)\\\\\">\n              <circle cx=\\\\\"1053.23\\\\\" cy=\\\\\"639.477\\\\\" r=\\\\\"106.477\\\\\" style=\\\\\"fill: rgb(235, 238, 246);\\\\\"></circle>\n            </g>\n            <g transform=\\\\\"matrix(0.38223,0,0,0.38223,1126.12,238.549)\\\\\">\n              <g transform=\\\\\"matrix(0.566536,0.327089,-1.28774,0.74348,763.4,317.171)\\\\\">\n                <rect x=\\\\\"657.012\\\\\" y=\\\\\"404.643\\\\\" width=\\\\\"198.586\\\\\" height=\\\\\"145.08\\\\\" style=\\\\\"fill-opacity: 0.1;\\\\\"></rect>\n              </g>\n              <g transform=\\\\\"matrix(0.29595,0.170867,-0.91077,0.525833,873.797,588.624)\\\\\">\n                <rect x=\\\\\"657.012\\\\\" y=\\\\\"404.643\\\\\" width=\\\\\"198.586\\\\\" height=\\\\\"145.08\\\\\" style=\\\\\"fill-opacity: 0.1;\\\\\"></rect>\n              </g>\n              <g transform=\\\\\"matrix(1,0,0,1,275,-15)\\\\\">\n                <path d=\\\\\"M262.077,959.012L276.923,959.012L273.388,1004.01C273.388,1004.59 273.009,1005.16 272.25,1005.6C270.732,1006.48 268.268,1006.48 266.75,1005.6C265.991,1005.16 265.612,1004.59 265.612,1004.01L262.077,959.012Z\\\\\" style=\\\\\"fill: rgb(196, 173, 142);\\\\\"></path>\n                <g transform=\\\\\"matrix(0.866025,-0.5,1,0.57735,0,-45)\\\\\">\n                  <ellipse cx=\\\\\"-848.416\\\\\" cy=\\\\\"1004.25\\\\\" rx=\\\\\"6.062\\\\\" ry=\\\\\"5.25\\\\\" style=\\\\\"fill: rgb(255, 125, 0);\\\\\"></ellipse>\n                </g>\n              </g>\n              <g transform=\\\\\"matrix(1,0,0,1,183.952,-67.5665)\\\\\">\n                <path d=\\\\\"M262.077,959.012L276.923,959.012L273.388,1004.01C273.388,1004.59 273.009,1005.16 272.25,1005.6C270.732,1006.48 268.268,1006.48 266.75,1005.6C265.991,1005.16 265.612,1004.59 265.612,1004.01L262.077,959.012Z\\\\\" style=\\\\\"fill: rgb(196, 173, 142);\\\\\"></path>\n                <g transform=\\\\\"matrix(0.866025,-0.5,1,0.57735,0,-45)\\\\\">\n                  <ellipse cx=\\\\\"-848.416\\\\\" cy=\\\\\"1004.25\\\\\" rx=\\\\\"6.062\\\\\" ry=\\\\\"5.25\\\\\" style=\\\\\"fill: rgb(255, 125, 0);\\\\\"></ellipse>\n                </g>\n              </g>\n              <g transform=\\\\\"matrix(1,0,0,1,414,-95.2517)\\\\\">\n                <path d=\\\\\"M262.077,959.012L276.923,959.012L273.388,1004.01C273.388,1004.59 273.009,1005.16 272.25,1005.6C270.732,1006.48 268.268,1006.48 266.75,1005.6C265.991,1005.16 265.612,1004.59 265.612,1004.01L262.077,959.012Z\\\\\" style=\\\\\"fill: rgb(196, 173, 142);\\\\\"></path>\n                <g transform=\\\\\"matrix(0.866025,-0.5,1,0.57735,0,-45)\\\\\">\n                  <ellipse cx=\\\\\"-848.416\\\\\" cy=\\\\\"1004.25\\\\\" rx=\\\\\"6.062\\\\\" ry=\\\\\"5.25\\\\\" style=\\\\\"fill: rgb(255, 125, 0);\\\\\"></ellipse>\n                </g>\n              </g>\n              <g transform=\\\\\"matrix(1,0,0,1,322.952,-147.818)\\\\\">\n                <path d=\\\\\"M262.077,959.012L276.923,959.012L273.388,1004.01C273.388,1004.59 273.009,1005.16 272.25,1005.6C270.732,1006.48 268.268,1006.48 266.75,1005.6C265.991,1005.16 265.612,1004.59 265.612,1004.01L262.077,959.012Z\\\\\" style=\\\\\"fill: rgb(196, 173, 142);\\\\\"></path>\n                <g transform=\\\\\"matrix(0.866025,-0.5,1,0.57735,0,-45)\\\\\">\n                  <ellipse cx=\\\\\"-848.416\\\\\" cy=\\\\\"1004.25\\\\\" rx=\\\\\"6.062\\\\\" ry=\\\\\"5.25\\\\\" style=\\\\\"fill: rgb(255, 125, 0);\\\\\"></ellipse>\n                </g>\n              </g>\n              <g>\n                <g transform=\\\\\"matrix(1.42334,-0.821763,1.11271,0.642426,-1439.64,459.621)\\\\\">\n                  <rect x=\\\\\"495.52\\\\\" y=\\\\\"1057.87\\\\\" width=\\\\\"105.078\\\\\" height=\\\\\"91\\\\\" style=\\\\\"fill: rgb(253, 243, 228);\\\\\"></rect>\n                </g>\n                <g transform=\\\\\"matrix(1.40786,-0.812831,6.60237e-16,1.99081,-2052.17,-84.7286)\\\\\">\n                  <rect x=\\\\\"1844.06\\\\\" y=\\\\\"1192.54\\\\\" width=\\\\\"106.232\\\\\" height=\\\\\"92\\\\\" style=\\\\\"fill: rgb(196, 173, 142);\\\\\"></rect>\n                </g>\n                <g transform=\\\\\"matrix(1.26159,-0.728382,5.91642e-16,1.78397,-1774.67,11.2303)\\\\\">\n                  <path d=\\\\\"M1950.29,1194.38C1950.29,1193.37 1949.41,1192.54 1948.34,1192.54L1846.01,1192.54C1844.93,1192.54 1844.06,1193.37 1844.06,1194.38L1844.06,1282.7C1844.06,1283.72 1844.93,1284.54 1846.01,1284.54L1948.34,1284.54C1949.41,1284.54 1950.29,1283.72 1950.29,1282.7L1950.29,1194.38Z\\\\\" style=\\\\\"fill: rgb(132, 97, 51);\\\\\"></path>\n                </g>\n                <g transform=\\\\\"matrix(1.2198,-0.704254,5.72043e-16,1.72488,-1697.6,37.2103)\\\\\">\n                  <path d=\\\\\"M1950.29,1194.38C1950.29,1193.37 1949.41,1192.54 1948.34,1192.54L1846.01,1192.54C1844.93,1192.54 1844.06,1193.37 1844.06,1194.38L1844.06,1282.7C1844.06,1283.72 1844.93,1284.54 1846.01,1284.54L1948.34,1284.54C1949.41,1284.54 1950.29,1283.72 1950.29,1282.7L1950.29,1194.38Z\\\\\" style=\\\\\"fill: rgb(196, 173, 142);\\\\\"></path>\n                </g>\n                <g transform=\\\\\"matrix(0.707187,0.408295,9.06119e-17,1.54833,-733.949,683.612)\\\\\">\n                  <rect x=\\\\\"1663.92\\\\\" y=\\\\\"-407.511\\\\\" width=\\\\\"143.183\\\\\" height=\\\\\"118.292\\\\\" style=\\\\\"fill: rgb(240, 218, 183);\\\\\"></rect>\n                </g>\n                <g transform=\\\\\"matrix(1.64553,-0.950049,1.17482,0.678285,-1632.45,473.879)\\\\\">\n                  <rect x=\\\\\"495.52\\\\\" y=\\\\\"1057.87\\\\\" width=\\\\\"105.078\\\\\" height=\\\\\"91\\\\\" style=\\\\\"fill: rgb(253, 243, 228);\\\\\"></rect>\n                </g>\n                <g transform=\\\\\"matrix(0.74666,0.431085,2.3583e-17,0.135259,-816.63,57.1397)\\\\\">\n                  <rect x=\\\\\"1663.92\\\\\" y=\\\\\"-407.511\\\\\" width=\\\\\"143.183\\\\\" height=\\\\\"118.292\\\\\" style=\\\\\"fill: rgb(240, 218, 183);\\\\\"></rect>\n                </g>\n                <g transform=\\\\\"matrix(1.64553,-0.950049,1.17482,0.678285,-1632.45,473.879)\\\\\">\n                  <rect x=\\\\\"495.52\\\\\" y=\\\\\"1057.87\\\\\" width=\\\\\"105.078\\\\\" height=\\\\\"91\\\\\" style=\\\\\"fill: rgb(253, 243, 228);\\\\\"></rect>\n                </g>\n                <g transform=\\\\\"matrix(0.750082,0,0,0.750082,163.491,354.191)\\\\\">\n                  <g transform=\\\\\"matrix(1.75943,-1.01581,1.75879e-16,0.632893,-2721.54,1876.43)\\\\\">\n                    <rect x=\\\\\"1844.06\\\\\" y=\\\\\"1192.54\\\\\" width=\\\\\"106.232\\\\\" height=\\\\\"92\\\\\" style=\\\\\"fill: rgb(196, 173, 142);\\\\\"></rect>\n                  </g>\n                  <g transform=\\\\\"matrix(0.290956,-0.167984,2.90849e-17,0.104661,69.4195,919.311)\\\\\">\n                    <path d=\\\\\"M1950.29,1238.54C1950.29,1213.15 1944.73,1192.54 1937.88,1192.54L1856.47,1192.54C1849.62,1192.54 1844.06,1213.15 1844.06,1238.54C1844.06,1263.93 1849.62,1284.54 1856.47,1284.54L1937.88,1284.54C1944.73,1284.54 1950.29,1263.93 1950.29,1238.54Z\\\\\" style=\\\\\"fill: rgb(132, 97, 51);\\\\\"></path>\n                  </g>\n                  <g transform=\\\\\"matrix(0.262716,-0.151679,8.27418e-18,0.0364999,121.496,970.53)\\\\\">\n                    <path d=\\\\\"M1950.29,1238.54C1950.29,1213.15 1948.14,1192.54 1945.5,1192.54L1848.85,1192.54C1846.2,1192.54 1844.06,1213.15 1844.06,1238.54C1844.06,1263.93 1846.2,1284.54 1848.85,1284.54L1945.5,1284.54C1948.14,1284.54 1950.29,1263.93 1950.29,1238.54Z\\\\\" style=\\\\\"fill: rgb(246, 220, 185);\\\\\"></path>\n                  </g>\n                  <g transform=\\\\\"matrix(1.77877,-1.02697,0.0581765,0.0335882,-425.293,1228.27)\\\\\">\n                    <rect x=\\\\\"495.52\\\\\" y=\\\\\"1057.87\\\\\" width=\\\\\"105.078\\\\\" height=\\\\\"91\\\\\" style=\\\\\"fill: rgb(240, 218, 183);\\\\\"></rect>\n                  </g>\n                  <g transform=\\\\\"matrix(0.0369741,0.021347,4.72735e-17,0.492225,456.143,919.985)\\\\\">\n                    <rect x=\\\\\"1663.92\\\\\" y=\\\\\"-407.511\\\\\" width=\\\\\"143.183\\\\\" height=\\\\\"118.292\\\\\" style=\\\\\"fill: rgb(240, 218, 183);\\\\\"></rect>\n                  </g>\n                </g>\n                <g transform=\\\\\"matrix(0.750082,0,0,0.750082,163.491,309.191)\\\\\">\n                  <g transform=\\\\\"matrix(1.75943,-1.01581,1.75879e-16,0.632893,-2721.54,1876.43)\\\\\">\n                    <rect x=\\\\\"1844.06\\\\\" y=\\\\\"1192.54\\\\\" width=\\\\\"106.232\\\\\" height=\\\\\"92\\\\\" style=\\\\\"fill: rgb(196, 173, 142);\\\\\"></rect>\n                  </g>\n                  <g transform=\\\\\"matrix(0.290956,-0.167984,2.90849e-17,0.104661,69.4195,919.311)\\\\\">\n                    <path d=\\\\\"M1950.29,1238.54C1950.29,1213.15 1944.73,1192.54 1937.88,1192.54L1856.47,1192.54C1849.62,1192.54 1844.06,1213.15 1844.06,1238.54C1844.06,1263.93 1849.62,1284.54 1856.47,1284.54L1937.88,1284.54C1944.73,1284.54 1950.29,1263.93 1950.29,1238.54Z\\\\\" style=\\\\\"fill: rgb(132, 97, 51);\\\\\"></path>\n                  </g>\n                  <g transform=\\\\\"matrix(0.262716,-0.151679,8.27418e-18,0.0364999,121.496,970.53)\\\\\">\n                    <path d=\\\\\"M1950.29,1238.54C1950.29,1213.15 1948.14,1192.54 1945.5,1192.54L1848.85,1192.54C1846.2,1192.54 1844.06,1213.15 1844.06,1238.54C1844.06,1263.93 1846.2,1284.54 1848.85,1284.54L1945.5,1284.54C1948.14,1284.54 1950.29,1263.93 1950.29,1238.54Z\\\\\" style=\\\\\"fill: rgb(246, 220, 185);\\\\\"></path>\n                  </g>\n                  <g transform=\\\\\"matrix(1.77877,-1.02697,0.0581765,0.0335882,-425.293,1228.27)\\\\\">\n                    <rect x=\\\\\"495.52\\\\\" y=\\\\\"1057.87\\\\\" width=\\\\\"105.078\\\\\" height=\\\\\"91\\\\\" style=\\\\\"fill: rgb(240, 218, 183);\\\\\"></rect>\n                  </g>\n                  <g transform=\\\\\"matrix(0.0369741,0.021347,4.72735e-17,0.492225,456.143,919.985)\\\\\">\n                    <rect x=\\\\\"1663.92\\\\\" y=\\\\\"-407.511\\\\\" width=\\\\\"143.183\\\\\" height=\\\\\"118.292\\\\\" style=\\\\\"fill: rgb(240, 218, 183);\\\\\"></rect>\n                  </g>\n                </g>\n                <g transform=\\\\\"matrix(0.750082,0,0,0.750082,163.491,263.931)\\\\\">\n                  <g transform=\\\\\"matrix(1.75943,-1.01581,1.75879e-16,0.632893,-2721.54,1876.43)\\\\\">\n                    <rect x=\\\\\"1844.06\\\\\" y=\\\\\"1192.54\\\\\" width=\\\\\"106.232\\\\\" height=\\\\\"92\\\\\" style=\\\\\"fill: rgb(196, 173, 142);\\\\\"></rect>\n                  </g>\n                  <g transform=\\\\\"matrix(0.290956,-0.167984,2.90849e-17,0.104661,69.4195,919.311)\\\\\">\n                    <path d=\\\\\"M1950.29,1238.54C1950.29,1213.15 1944.73,1192.54 1937.88,1192.54L1856.47,1192.54C1849.62,1192.54 1844.06,1213.15 1844.06,1238.54C1844.06,1263.93 1849.62,1284.54 1856.47,1284.54L1937.88,1284.54C1944.73,1284.54 1950.29,1263.93 1950.29,1238.54Z\\\\\" style=\\\\\"fill: rgb(132, 97, 51);\\\\\"></path>\n                  </g>\n                  <g transform=\\\\\"matrix(0.262716,-0.151679,8.27418e-18,0.0364999,121.496,970.53)\\\\\">\n                    <path d=\\\\\"M1950.29,1238.54C1950.29,1213.15 1948.14,1192.54 1945.5,1192.54L1848.85,1192.54C1846.2,1192.54 1844.06,1213.15 1844.06,1238.54C1844.06,1263.93 1846.2,1284.54 1848.85,1284.54L1945.5,1284.54C1948.14,1284.54 1950.29,1263.93 1950.29,1238.54Z\\\\\" style=\\\\\"fill: rgb(246, 220, 185);\\\\\"></path>\n                  </g>\n                  <g transform=\\\\\"matrix(1.77877,-1.02697,0.0581765,0.0335882,-425.293,1228.27)\\\\\">\n                    <rect x=\\\\\"495.52\\\\\" y=\\\\\"1057.87\\\\\" width=\\\\\"105.078\\\\\" height=\\\\\"91\\\\\" style=\\\\\"fill: rgb(240, 218, 183);\\\\\"></rect>\n                  </g>\n                  <g transform=\\\\\"matrix(0.0369741,0.021347,4.72735e-17,0.492225,456.143,919.985)\\\\\">\n                    <rect x=\\\\\"1663.92\\\\\" y=\\\\\"-407.511\\\\\" width=\\\\\"143.183\\\\\" height=\\\\\"118.292\\\\\" style=\\\\\"fill: rgb(240, 218, 183);\\\\\"></rect>\n                  </g>\n                </g>\n                <path d=\\\\\"M555.753,832.474L555.753,921.408L630.693,878.141L630.693,789.207L555.753,832.474Z\\\\\" style=\\\\\"fill-opacity: 0.1;\\\\\"></path>\n                <g transform=\\\\\"matrix(0.750082,0,0,0.750082,236.431,272.852)\\\\\">\n                  <g transform=\\\\\"matrix(1.64553,-0.950049,1.14552,0.661368,-1606.78,467.933)\\\\\">\n                    <rect x=\\\\\"495.52\\\\\" y=\\\\\"1057.87\\\\\" width=\\\\\"105.078\\\\\" height=\\\\\"91\\\\\" style=\\\\\"fill: rgb(253, 243, 228);\\\\\"></rect>\n                  </g>\n                  <g transform=\\\\\"matrix(1.54477,-0.891873,1.05847,0.611108,-1456.84,490.734)\\\\\">\n                    <rect x=\\\\\"495.52\\\\\" y=\\\\\"1057.87\\\\\" width=\\\\\"105.078\\\\\" height=\\\\\"91\\\\\" style=\\\\\"fill: rgb(132, 97, 51);\\\\\"></rect>\n                  </g>\n                  <g transform=\\\\\"matrix(1.27607,-0.736739,0.751435,0.433841,-970.952,617.519)\\\\\">\n                    <rect x=\\\\\"495.52\\\\\" y=\\\\\"1057.87\\\\\" width=\\\\\"105.078\\\\\" height=\\\\\"91\\\\\" style=\\\\\"fill: rgb(240, 218, 183);\\\\\"></rect>\n                  </g>\n                  <g transform=\\\\\"matrix(1.62765,-0.939723,1.42156e-16,0.5,-2476.81,1893.62)\\\\\">\n                    <rect x=\\\\\"1844.06\\\\\" y=\\\\\"1192.54\\\\\" width=\\\\\"106.232\\\\\" height=\\\\\"92\\\\\" style=\\\\\"fill: rgb(196, 173, 142);\\\\\"></rect>\n                  </g>\n                  <g transform=\\\\\"matrix(1.62765,-0.939723,1.42156e-16,0.5,-2476.81,1893.62)\\\\\">\n                    <rect x=\\\\\"1844.06\\\\\" y=\\\\\"1192.54\\\\\" width=\\\\\"106.232\\\\\" height=\\\\\"92\\\\\" style=\\\\\"fill: rgb(196, 173, 142);\\\\\"></rect>\n                  </g>\n                  <g transform=\\\\\"matrix(0.728038,0.420333,3.52595e-17,0.377589,-790.978,151.274)\\\\\">\n                    <rect x=\\\\\"1663.92\\\\\" y=\\\\\"-407.511\\\\\" width=\\\\\"143.183\\\\\" height=\\\\\"118.292\\\\\" style=\\\\\"fill: rgb(240, 218, 183);\\\\\"></rect>\n                  </g>\n                  <g transform=\\\\\"matrix(1.75943,-1.01581,1.75879e-16,0.632893,-2726.83,1873.38)\\\\\">\n                    <rect x=\\\\\"1844.06\\\\\" y=\\\\\"1192.54\\\\\" width=\\\\\"106.232\\\\\" height=\\\\\"92\\\\\" style=\\\\\"fill: rgb(196, 173, 142);\\\\\"></rect>\n                  </g>\n                  <g>\n                    <g transform=\\\\\"matrix(1.75943,-1.01581,1.75879e-16,0.632893,-2721.54,1876.43)\\\\\">\n                      <rect x=\\\\\"1844.06\\\\\" y=\\\\\"1192.54\\\\\" width=\\\\\"106.232\\\\\" height=\\\\\"92\\\\\" style=\\\\\"fill: rgb(196, 173, 142);\\\\\"></rect>\n                    </g>\n                    <g transform=\\\\\"matrix(0.290956,-0.167984,2.90849e-17,0.104661,69.4195,919.311)\\\\\">\n                      <path d=\\\\\"M1950.29,1238.54C1950.29,1213.15 1944.73,1192.54 1937.88,1192.54L1856.47,1192.54C1849.62,1192.54 1844.06,1213.15 1844.06,1238.54C1844.06,1263.93 1849.62,1284.54 1856.47,1284.54L1937.88,1284.54C1944.73,1284.54 1950.29,1263.93 1950.29,1238.54Z\\\\\" style=\\\\\"fill: rgb(132, 97, 51);\\\\\"></path>\n                    </g>\n                    <g transform=\\\\\"matrix(0.262716,-0.151679,8.27418e-18,0.0364999,121.496,970.53)\\\\\">\n                      <path d=\\\\\"M1950.29,1238.54C1950.29,1213.15 1948.14,1192.54 1945.5,1192.54L1848.85,1192.54C1846.2,1192.54 1844.06,1213.15 1844.06,1238.54C1844.06,1263.93 1846.2,1284.54 1848.85,1284.54L1945.5,1284.54C1948.14,1284.54 1950.29,1263.93 1950.29,1238.54Z\\\\\" style=\\\\\"fill: rgb(246, 220, 185);\\\\\"></path>\n                    </g>\n                    <g transform=\\\\\"matrix(1.77877,-1.02697,0.0581765,0.0335882,-425.293,1228.27)\\\\\">\n                      <rect x=\\\\\"495.52\\\\\" y=\\\\\"1057.87\\\\\" width=\\\\\"105.078\\\\\" height=\\\\\"91\\\\\" style=\\\\\"fill: rgb(240, 218, 183);\\\\\"></rect>\n                    </g>\n                    <g transform=\\\\\"matrix(0.0369741,0.021347,4.72735e-17,0.492225,456.143,919.985)\\\\\">\n                      <rect x=\\\\\"1663.92\\\\\" y=\\\\\"-407.511\\\\\" width=\\\\\"143.183\\\\\" height=\\\\\"118.292\\\\\" style=\\\\\"fill: rgb(240, 218, 183);\\\\\"></rect>\n                    </g>\n                  </g>\n                </g>\n                <g transform=\\\\\"matrix(1.62765,-0.939723,4.80984e-17,0.173913,-2468.81,2307.87)\\\\\">\n                  <rect x=\\\\\"1844.06\\\\\" y=\\\\\"1192.54\\\\\" width=\\\\\"106.232\\\\\" height=\\\\\"92\\\\\" style=\\\\\"fill: rgb(196, 173, 142);\\\\\"></rect>\n                </g>\n              </g>\n              <g>\n                <g transform=\\\\\"matrix(0.479077,0.276595,-0.564376,0.325843,598.357,-129.986)\\\\\">\n                  <path d=\\\\\"M1776.14,1326C1776.14,1321.19 1772.15,1317.28 1767.24,1317.28L1684.37,1317.28C1679.46,1317.28 1675.47,1321.19 1675.47,1326L1675.47,1395.75C1675.47,1400.56 1679.46,1404.46 1684.37,1404.46L1767.24,1404.46C1772.15,1404.46 1776.14,1400.56 1776.14,1395.75L1776.14,1326Z\\\\\" style=\\\\\"fill: white;\\\\\"></path>\n                </g>\n                <g transform=\\\\\"matrix(2.61622,0,0,2.61622,-2305.73,162.161)\\\\\">\n                  <g transform=\\\\\"matrix(1.09915,-0.634597,1.26919,0.73277,-299.167,-62.4615)\\\\\">\n                    <ellipse cx=\\\\\"412.719\\\\\" cy=\\\\\"770.575\\\\\" rx=\\\\\"6.303\\\\\" ry=\\\\\"5.459\\\\\" style=\\\\\"fill: rgb(255, 125, 0);\\\\\"></ellipse>\n                  </g>\n                  <g transform=\\\\\"matrix(0.238212,-0.137532,0.178659,0.103149,875.064,207.93)\\\\\"><text x=\\\\\"413.474px\\\\\" y=\\\\\"892.067px\\\\\" style=\\\\\"font-family: NunitoSans-Bold, Nunito Sans; font-weight: 700; fill: white;\\\\\">?</text></g>\n                </g>\n              </g>\n            </g>\n          </g>\n        </g>\n      </svg></div>\n  </div>\n  <!--v-if-->\n  <div class=\\\\\"arco-result-subtitle\\\\\">Whoops, that page is gone.</div>\n  <div class=\\\\\"arco-result-extra\\\\\">\n    <div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 8px; row-gap: 8px;\\\\\">\n      <!---->\n      <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n          <!--v-if-->Back\n        </button></div>\n    </div>\n  </div>\n  <!--v-if-->\n</div>\"\n`;\n\nexports[`<result> demo: render [500] correctly 1`] = `\n\"<div class=\\\\\"arco-result\\\\\">\n  <div class=\\\\\"arco-result-icon arco-result-icon-500\\\\\">\n    <div class=\\\\\"arco-result-icon-tip\\\\\"><svg width=\\\\\"100%\\\\\" height=\\\\\"100%\\\\\" viewBox=\\\\\"0 0 213 213\\\\\" style=\\\\\"fill-rule: evenodd; clip-rule: evenodd; stroke-linejoin: round; stroke-miterlimit: 2;\\\\\">\n        <g transform=\\\\\"matrix(1,0,0,1,-483.054,-445.448)\\\\\">\n          <g>\n            <g transform=\\\\\"matrix(1,0,0,1,-463.699,-87.5516)\\\\\">\n              <circle cx=\\\\\"1053.23\\\\\" cy=\\\\\"639.477\\\\\" r=\\\\\"106.477\\\\\" style=\\\\\"fill: rgb(235, 238, 246);\\\\\"></circle>\n            </g>\n            <g transform=\\\\\"matrix(0.384532,-0.222009,0.444019,0.256354,-0.569781,260.021)\\\\\">\n              <path d=\\\\\"M84.299,1269.38C84.299,1261.99 78.301,1256 70.913,1256L-56.874,1256C-64.261,1256 -70.259,1261.99 -70.259,1269.38L-70.259,1376.46C-70.259,1383.85 -64.261,1389.85 -56.874,1389.85L70.913,1389.85C78.301,1389.85 84.299,1383.85 84.299,1376.46L84.299,1269.38Z\\\\\" style=\\\\\"fill-opacity: 0.1;\\\\\"></path>\n            </g>\n            <g transform=\\\\\"matrix(0.384532,-0.222009,0.444019,0.256354,-0.569781,218.845)\\\\\">\n              <path d=\\\\\"M84.299,1269.38C84.299,1261.99 78.301,1256 70.913,1256L-56.874,1256C-64.261,1256 -70.259,1261.99 -70.259,1269.38L-70.259,1376.46C-70.259,1383.85 -64.261,1389.85 -56.874,1389.85L70.913,1389.85C78.301,1389.85 84.299,1383.85 84.299,1376.46L84.299,1269.38Z\\\\\" style=\\\\\"fill: rgb(64, 128, 255);\\\\\"></path>\n            </g>\n            <g transform=\\\\\"matrix(0.361496,-0.20871,0.41742,0.240997,34.7805,238.807)\\\\\">\n              <path d=\\\\\"M84.299,1269.38C84.299,1261.99 78.301,1256 70.913,1256L-56.874,1256C-64.261,1256 -70.259,1261.99 -70.259,1269.38L-70.259,1376.46C-70.259,1383.85 -64.261,1389.85 -56.874,1389.85L70.913,1389.85C78.301,1389.85 84.299,1383.85 84.299,1376.46L84.299,1269.38Z\\\\\" style=\\\\\"fill: rgb(0, 85, 255);\\\\\"></path>\n            </g>\n            <g transform=\\\\\"matrix(0.341853,-0.197369,0.394738,0.227902,64.9247,257.804)\\\\\">\n              <path d=\\\\\"M84.299,1269.38C84.299,1261.99 78.301,1256 70.913,1256L-56.874,1256C-64.261,1256 -70.259,1261.99 -70.259,1269.38L-70.259,1376.46C-70.259,1383.85 -64.261,1389.85 -56.874,1389.85L70.913,1389.85C78.301,1389.85 84.299,1383.85 84.299,1376.46L84.299,1269.38Z\\\\\" style=\\\\\"fill: rgb(29, 105, 255);\\\\\"></path>\n            </g>\n            <g transform=\\\\\"matrix(0.428916,0,0,0.428916,19.0588,329.956)\\\\\">\n              <clipPath id=\\\\\"_clip1\\\\\">\n                <path d=\\\\\"M1461.07,528.445C1461.07,530.876 1459.6,533.196 1456.6,534.928L1342.04,601.072C1335.41,604.896 1323.83,604.415 1316.18,600L1205.33,536C1201.14,533.585 1199,530.489 1199,527.555L1199,559.555C1199,562.489 1201.14,565.585 1205.33,568L1316.18,632C1323.83,636.415 1335.41,636.896 1342.04,633.072L1456.6,566.928C1459.6,565.196 1461.07,562.876 1461.07,560.445L1461.07,528.445Z\\\\\"></path>\n              </clipPath>\n              <g clip-path=\\\\\"url(#_clip1)\\\\\">\n                <g transform=\\\\\"matrix(2.33146,-0,-0,2.33146,1081.79,269.266)\\\\\">\n                  <use href=\\\\\"#_Image2\\\\\" x=\\\\\"50.54\\\\\" y=\\\\\"112.301\\\\\" width=\\\\\"112.406px\\\\\" height=\\\\\"46.365px\\\\\" transform=\\\\\"matrix(0.99474,0,0,0.98649,0,0)\\\\\"></use>\n                </g>\n              </g>\n            </g>\n            <g transform=\\\\\"matrix(0.347769,0.200785,3.44852e-18,0.545466,52.0929,265.448)\\\\\">\n              <path d=\\\\\"M1480.33,34.813C1480.33,34.162 1479.7,33.634 1478.94,33.634L1396.27,33.634C1395.5,33.634 1394.88,34.162 1394.88,34.813C1394.88,35.464 1395.5,35.993 1396.27,35.993L1478.94,35.993C1479.7,35.993 1480.33,35.464 1480.33,34.813Z\\\\\" style=\\\\\"fill: white;\\\\\"></path>\n            </g>\n            <g transform=\\\\\"matrix(0.347769,0.200785,3.44852e-18,0.545466,52.0929,268.45)\\\\\">\n              <path d=\\\\\"M1480.33,34.813C1480.33,34.162 1479.7,33.634 1478.94,33.634L1396.27,33.634C1395.5,33.634 1394.88,34.162 1394.88,34.813C1394.88,35.464 1395.5,35.993 1396.27,35.993L1478.94,35.993C1479.7,35.993 1480.33,35.464 1480.33,34.813Z\\\\\" style=\\\\\"fill: white;\\\\\"></path>\n            </g>\n            <g transform=\\\\\"matrix(0.347769,0.200785,3.44852e-18,0.545466,52.0929,271.452)\\\\\">\n              <path d=\\\\\"M1480.33,34.813C1480.33,34.162 1479.7,33.634 1478.94,33.634L1396.27,33.634C1395.5,33.634 1394.88,34.162 1394.88,34.813C1394.88,35.464 1395.5,35.993 1396.27,35.993L1478.94,35.993C1479.7,35.993 1480.33,35.464 1480.33,34.813Z\\\\\" style=\\\\\"fill: white;\\\\\"></path>\n            </g>\n            <g transform=\\\\\"matrix(0.360289,-0.208013,-4.39887e-18,0.576941,37.5847,124.262)\\\\\">\n              <rect x=\\\\\"1621.2\\\\\" y=\\\\\"1370.57\\\\\" width=\\\\\"57.735\\\\\" height=\\\\\"5.947\\\\\" style=\\\\\"fill: rgb(106, 161, 255);\\\\\"></rect>\n            </g>\n            <g transform=\\\\\"matrix(0.185726,-0.107229,-1.84168e-18,0.247635,307.505,420.796)\\\\\">\n              <ellipse cx=\\\\\"1566.31\\\\\" cy=\\\\\"1372.3\\\\\" rx=\\\\\"4\\\\\" ry=\\\\\"3.464\\\\\" style=\\\\\"fill: rgb(64, 128, 255);\\\\\"></ellipse>\n            </g>\n            <g transform=\\\\\"matrix(0.185726,-0.107229,-1.84168e-18,0.247635,310.507,419.062)\\\\\">\n              <ellipse cx=\\\\\"1566.31\\\\\" cy=\\\\\"1372.3\\\\\" rx=\\\\\"4\\\\\" ry=\\\\\"3.464\\\\\" style=\\\\\"fill: rgb(64, 128, 255);\\\\\"></ellipse>\n            </g>\n            <g transform=\\\\\"matrix(0.185726,-0.107229,-1.84168e-18,0.247635,313.509,417.329)\\\\\">\n              <ellipse cx=\\\\\"1566.31\\\\\" cy=\\\\\"1372.3\\\\\" rx=\\\\\"4\\\\\" ry=\\\\\"3.464\\\\\" style=\\\\\"fill: white;\\\\\"></ellipse>\n            </g>\n            <g transform=\\\\\"matrix(0.185726,-0.107229,-1.84168e-18,0.247635,316.512,415.595)\\\\\">\n              <ellipse cx=\\\\\"1566.31\\\\\" cy=\\\\\"1372.3\\\\\" rx=\\\\\"4\\\\\" ry=\\\\\"3.464\\\\\" style=\\\\\"fill: rgb(64, 128, 255);\\\\\"></ellipse>\n            </g>\n            <g transform=\\\\\"matrix(0.185726,-0.107229,-1.84168e-18,0.247635,319.514,413.862)\\\\\">\n              <ellipse cx=\\\\\"1566.31\\\\\" cy=\\\\\"1372.3\\\\\" rx=\\\\\"4\\\\\" ry=\\\\\"3.464\\\\\" style=\\\\\"fill: rgb(64, 128, 255);\\\\\"></ellipse>\n            </g>\n            <g transform=\\\\\"matrix(0.384532,-0.222009,0.444019,0.256354,-0.569781,196.542)\\\\\">\n              <clipPath id=\\\\\"_clip3\\\\\">\n                <path d=\\\\\"M84.299,1269.38C84.299,1261.99 78.301,1256 70.913,1256L-56.874,1256C-64.261,1256 -70.259,1261.99 -70.259,1269.38L-70.259,1376.46C-70.259,1383.85 -64.261,1389.85 -56.874,1389.85L70.913,1389.85C78.301,1389.85 84.299,1383.85 84.299,1376.46L84.299,1269.38Z\\\\\"></path>\n              </clipPath>\n              <g clip-path=\\\\\"url(#_clip3)\\\\\">\n                <g transform=\\\\\"matrix(1.30028,1.12608,-2.25216,1.95042,68.2716,1030.07)\\\\\">\n                  <use href=\\\\\"#_Image4\\\\\" x=\\\\\"50.54\\\\\" y=\\\\\"56.312\\\\\" width=\\\\\"112.406px\\\\\" height=\\\\\"64.897px\\\\\" transform=\\\\\"matrix(0.99474,0,0,0.998422,0,0)\\\\\"></use>\n                </g>\n              </g>\n            </g>\n            <g transform=\\\\\"matrix(0.361496,-0.20871,0.41742,0.240997,34.7805,216.764)\\\\\">\n              <path d=\\\\\"M84.299,1269.38C84.299,1261.99 78.301,1256 70.913,1256L-56.874,1256C-64.261,1256 -70.259,1261.99 -70.259,1269.38L-70.259,1376.46C-70.259,1383.85 -64.261,1389.85 -56.874,1389.85L70.913,1389.85C78.301,1389.85 84.299,1383.85 84.299,1376.46L84.299,1269.38Z\\\\\" style=\\\\\"fill: rgb(0, 85, 255);\\\\\"></path>\n            </g>\n            <g transform=\\\\\"matrix(0.341853,-0.197369,0.394738,0.227902,64.9247,235.762)\\\\\">\n              <path d=\\\\\"M84.299,1269.38C84.299,1261.99 78.301,1256 70.913,1256L-56.874,1256C-64.261,1256 -70.259,1261.99 -70.259,1269.38L-70.259,1376.46C-70.259,1383.85 -64.261,1389.85 -56.874,1389.85L70.913,1389.85C78.301,1389.85 84.299,1383.85 84.299,1376.46L84.299,1269.38Z\\\\\" style=\\\\\"fill: rgb(29, 105, 255);\\\\\"></path>\n            </g>\n            <g transform=\\\\\"matrix(0.428916,0,0,0.428916,19.0588,307.652)\\\\\">\n              <clipPath id=\\\\\"_clip5\\\\\">\n                <path d=\\\\\"M1461.07,528.445C1461.07,530.876 1459.6,533.196 1456.6,534.928L1342.04,601.072C1335.41,604.896 1323.83,604.415 1316.18,600L1205.33,536C1201.14,533.585 1199,530.489 1199,527.555L1199,559.555C1199,562.489 1201.14,565.585 1205.33,568L1316.18,632C1323.83,636.415 1335.41,636.896 1342.04,633.072L1456.6,566.928C1459.6,565.196 1461.07,562.876 1461.07,560.445L1461.07,528.445Z\\\\\"></path>\n              </clipPath>\n              <g clip-path=\\\\\"url(#_clip5)\\\\\">\n                <g transform=\\\\\"matrix(2.33146,-0,-0,2.33146,1081.79,321.266)\\\\\">\n                  <use href=\\\\\"#_Image2\\\\\" x=\\\\\"50.54\\\\\" y=\\\\\"89.692\\\\\" width=\\\\\"112.406px\\\\\" height=\\\\\"46.365px\\\\\" transform=\\\\\"matrix(0.99474,0,0,0.98649,0,0)\\\\\"></use>\n                </g>\n              </g>\n            </g>\n            <g transform=\\\\\"matrix(0.347769,0.200785,3.44852e-18,0.545466,52.0929,243.144)\\\\\">\n              <path d=\\\\\"M1480.33,34.813C1480.33,34.162 1479.7,33.634 1478.94,33.634L1396.27,33.634C1395.5,33.634 1394.88,34.162 1394.88,34.813C1394.88,35.464 1395.5,35.993 1396.27,35.993L1478.94,35.993C1479.7,35.993 1480.33,35.464 1480.33,34.813Z\\\\\" style=\\\\\"fill: white;\\\\\"></path>\n            </g>\n            <g transform=\\\\\"matrix(0.347769,0.200785,3.44852e-18,0.545466,52.0929,246.146)\\\\\">\n              <path d=\\\\\"M1480.33,34.813C1480.33,34.162 1479.7,33.634 1478.94,33.634L1396.27,33.634C1395.5,33.634 1394.88,34.162 1394.88,34.813C1394.88,35.464 1395.5,35.993 1396.27,35.993L1478.94,35.993C1479.7,35.993 1480.33,35.464 1480.33,34.813Z\\\\\" style=\\\\\"fill: white;\\\\\"></path>\n            </g>\n            <g transform=\\\\\"matrix(0.347769,0.200785,3.44852e-18,0.545466,52.0929,249.149)\\\\\">\n              <path d=\\\\\"M1480.33,34.813C1480.33,34.162 1479.7,33.634 1478.94,33.634L1396.27,33.634C1395.5,33.634 1394.88,34.162 1394.88,34.813C1394.88,35.464 1395.5,35.993 1396.27,35.993L1478.94,35.993C1479.7,35.993 1480.33,35.464 1480.33,34.813Z\\\\\" style=\\\\\"fill: white;\\\\\"></path>\n            </g>\n            <g transform=\\\\\"matrix(0.360289,-0.208013,-4.39887e-18,0.576941,37.5847,101.958)\\\\\">\n              <rect x=\\\\\"1621.2\\\\\" y=\\\\\"1370.57\\\\\" width=\\\\\"57.735\\\\\" height=\\\\\"5.947\\\\\" style=\\\\\"fill: rgb(106, 161, 255);\\\\\"></rect>\n            </g>\n            <g transform=\\\\\"matrix(0.185726,-0.107229,-1.84168e-18,0.247635,307.505,398.492)\\\\\">\n              <ellipse cx=\\\\\"1566.31\\\\\" cy=\\\\\"1372.3\\\\\" rx=\\\\\"4\\\\\" ry=\\\\\"3.464\\\\\" style=\\\\\"fill: rgb(64, 128, 255);\\\\\"></ellipse>\n            </g>\n            <g transform=\\\\\"matrix(0.185726,-0.107229,-1.84168e-18,0.247635,310.507,396.759)\\\\\">\n              <ellipse cx=\\\\\"1566.31\\\\\" cy=\\\\\"1372.3\\\\\" rx=\\\\\"4\\\\\" ry=\\\\\"3.464\\\\\" style=\\\\\"fill: white;\\\\\"></ellipse>\n            </g>\n            <g transform=\\\\\"matrix(0.185726,-0.107229,-1.84168e-18,0.247635,313.509,395.025)\\\\\">\n              <ellipse cx=\\\\\"1566.31\\\\\" cy=\\\\\"1372.3\\\\\" rx=\\\\\"4\\\\\" ry=\\\\\"3.464\\\\\" style=\\\\\"fill: rgb(64, 128, 255);\\\\\"></ellipse>\n            </g>\n            <g transform=\\\\\"matrix(0.185726,-0.107229,-1.84168e-18,0.247635,316.512,393.292)\\\\\">\n              <ellipse cx=\\\\\"1566.31\\\\\" cy=\\\\\"1372.3\\\\\" rx=\\\\\"4\\\\\" ry=\\\\\"3.464\\\\\" style=\\\\\"fill: rgb(64, 128, 255);\\\\\"></ellipse>\n            </g>\n            <g transform=\\\\\"matrix(0.185726,-0.107229,-1.84168e-18,0.247635,319.514,391.558)\\\\\">\n              <ellipse cx=\\\\\"1566.31\\\\\" cy=\\\\\"1372.3\\\\\" rx=\\\\\"4\\\\\" ry=\\\\\"3.464\\\\\" style=\\\\\"fill: rgb(64, 128, 255);\\\\\"></ellipse>\n            </g>\n            <g transform=\\\\\"matrix(0.384532,-0.222009,0.444019,0.256354,-0.569781,171.832)\\\\\">\n              <clipPath id=\\\\\"_clip6\\\\\">\n                <path d=\\\\\"M84.299,1269.38C84.299,1261.99 78.301,1256 70.913,1256L-56.874,1256C-64.261,1256 -70.259,1261.99 -70.259,1269.38L-70.259,1376.46C-70.259,1383.85 -64.261,1389.85 -56.874,1389.85L70.913,1389.85C78.301,1389.85 84.299,1383.85 84.299,1376.46L84.299,1269.38Z\\\\\"></path>\n              </clipPath>\n              <g clip-path=\\\\\"url(#_clip6)\\\\\">\n                <g transform=\\\\\"matrix(1.30028,1.12608,-2.25216,1.95042,12.6215,1078.27)\\\\\">\n                  <use href=\\\\\"#_Image7\\\\\" x=\\\\\"50.54\\\\\" y=\\\\\"31.563\\\\\" width=\\\\\"112.406px\\\\\" height=\\\\\"64.897px\\\\\" transform=\\\\\"matrix(0.99474,0,0,0.998422,0,0)\\\\\"></use>\n                </g>\n              </g>\n            </g>\n            <g transform=\\\\\"matrix(0.361496,-0.20871,0.41742,0.240997,34.7805,192.055)\\\\\">\n              <path d=\\\\\"M84.299,1269.38C84.299,1261.99 78.301,1256 70.913,1256L-56.874,1256C-64.261,1256 -70.259,1261.99 -70.259,1269.38L-70.259,1376.46C-70.259,1383.85 -64.261,1389.85 -56.874,1389.85L70.913,1389.85C78.301,1389.85 84.299,1383.85 84.299,1376.46L84.299,1269.38Z\\\\\" style=\\\\\"fill: rgb(0, 85, 255);\\\\\"></path>\n            </g>\n            <g transform=\\\\\"matrix(0.341853,-0.197369,0.394738,0.227902,64.9247,211.052)\\\\\">\n              <path d=\\\\\"M84.299,1269.38C84.299,1261.99 78.301,1256 70.913,1256L-56.874,1256C-64.261,1256 -70.259,1261.99 -70.259,1269.38L-70.259,1376.46C-70.259,1383.85 -64.261,1389.85 -56.874,1389.85L70.913,1389.85C78.301,1389.85 84.299,1383.85 84.299,1376.46L84.299,1269.38Z\\\\\" style=\\\\\"fill: rgb(29, 105, 255);\\\\\"></path>\n            </g>\n            <g transform=\\\\\"matrix(0.428916,0,0,0.428916,19.0588,282.943)\\\\\">\n              <clipPath id=\\\\\"_clip8\\\\\">\n                <path d=\\\\\"M1461.07,528.445C1461.07,530.876 1459.6,533.196 1456.6,534.928L1342.04,601.072C1335.41,604.896 1323.83,604.415 1316.18,600L1205.33,536C1201.14,533.585 1199,530.489 1199,527.555L1199,559.555C1199,562.489 1201.14,565.585 1205.33,568L1316.18,632C1323.83,636.415 1335.41,636.896 1342.04,633.072L1456.6,566.928C1459.6,565.196 1461.07,562.876 1461.07,560.445L1461.07,528.445Z\\\\\"></path>\n              </clipPath>\n              <g clip-path=\\\\\"url(#_clip8)\\\\\">\n                <g transform=\\\\\"matrix(2.33146,-0,-0,2.33146,1081.79,378.876)\\\\\">\n                  <use href=\\\\\"#_Image2\\\\\" x=\\\\\"50.54\\\\\" y=\\\\\"64.644\\\\\" width=\\\\\"112.406px\\\\\" height=\\\\\"46.365px\\\\\" transform=\\\\\"matrix(0.99474,0,0,0.98649,0,0)\\\\\"></use>\n                </g>\n              </g>\n            </g>\n            <g transform=\\\\\"matrix(0.347769,0.200785,3.44852e-18,0.545466,52.0929,218.434)\\\\\">\n              <path d=\\\\\"M1480.33,34.813C1480.33,34.162 1479.7,33.634 1478.94,33.634L1396.27,33.634C1395.5,33.634 1394.88,34.162 1394.88,34.813C1394.88,35.464 1395.5,35.993 1396.27,35.993L1478.94,35.993C1479.7,35.993 1480.33,35.464 1480.33,34.813Z\\\\\" style=\\\\\"fill: white;\\\\\"></path>\n            </g>\n            <g transform=\\\\\"matrix(0.347769,0.200785,3.44852e-18,0.545466,52.0929,221.437)\\\\\">\n              <path d=\\\\\"M1480.33,34.813C1480.33,34.162 1479.7,33.634 1478.94,33.634L1396.27,33.634C1395.5,33.634 1394.88,34.162 1394.88,34.813C1394.88,35.464 1395.5,35.993 1396.27,35.993L1478.94,35.993C1479.7,35.993 1480.33,35.464 1480.33,34.813Z\\\\\" style=\\\\\"fill: white;\\\\\"></path>\n            </g>\n            <g transform=\\\\\"matrix(0.347769,0.200785,3.44852e-18,0.545466,52.0929,224.439)\\\\\">\n              <path d=\\\\\"M1480.33,34.813C1480.33,34.162 1479.7,33.634 1478.94,33.634L1396.27,33.634C1395.5,33.634 1394.88,34.162 1394.88,34.813C1394.88,35.464 1395.5,35.993 1396.27,35.993L1478.94,35.993C1479.7,35.993 1480.33,35.464 1480.33,34.813Z\\\\\" style=\\\\\"fill: white;\\\\\"></path>\n            </g>\n            <g transform=\\\\\"matrix(0.360289,-0.208013,-4.39887e-18,0.576941,37.5847,77.2484)\\\\\">\n              <rect x=\\\\\"1621.2\\\\\" y=\\\\\"1370.57\\\\\" width=\\\\\"57.735\\\\\" height=\\\\\"5.947\\\\\" style=\\\\\"fill: rgb(106, 161, 255);\\\\\"></rect>\n            </g>\n            <g transform=\\\\\"matrix(0.185726,-0.107229,-1.84168e-18,0.247635,307.505,373.782)\\\\\">\n              <ellipse cx=\\\\\"1566.31\\\\\" cy=\\\\\"1372.3\\\\\" rx=\\\\\"4\\\\\" ry=\\\\\"3.464\\\\\" style=\\\\\"fill: white;\\\\\"></ellipse>\n            </g>\n            <g transform=\\\\\"matrix(0.185726,-0.107229,-1.84168e-18,0.247635,310.507,372.049)\\\\\">\n              <ellipse cx=\\\\\"1566.31\\\\\" cy=\\\\\"1372.3\\\\\" rx=\\\\\"4\\\\\" ry=\\\\\"3.464\\\\\" style=\\\\\"fill: rgb(64, 128, 255);\\\\\"></ellipse>\n            </g>\n            <g transform=\\\\\"matrix(0.185726,-0.107229,-1.84168e-18,0.247635,313.509,370.316)\\\\\">\n              <ellipse cx=\\\\\"1566.31\\\\\" cy=\\\\\"1372.3\\\\\" rx=\\\\\"4\\\\\" ry=\\\\\"3.464\\\\\" style=\\\\\"fill: rgb(64, 128, 255);\\\\\"></ellipse>\n            </g>\n            <g transform=\\\\\"matrix(0.185726,-0.107229,-1.84168e-18,0.247635,316.512,368.582)\\\\\">\n              <ellipse cx=\\\\\"1566.31\\\\\" cy=\\\\\"1372.3\\\\\" rx=\\\\\"4\\\\\" ry=\\\\\"3.464\\\\\" style=\\\\\"fill: rgb(64, 128, 255);\\\\\"></ellipse>\n            </g>\n            <g transform=\\\\\"matrix(0.185726,-0.107229,-1.84168e-18,0.247635,319.514,366.849)\\\\\">\n              <ellipse cx=\\\\\"1566.31\\\\\" cy=\\\\\"1372.3\\\\\" rx=\\\\\"4\\\\\" ry=\\\\\"3.464\\\\\" style=\\\\\"fill: rgb(64, 128, 255);\\\\\"></ellipse>\n            </g>\n            <g transform=\\\\\"matrix(0.365442,-0.210988,0.421976,0.243628,28.7259,185.45)\\\\\">\n              <clipPath id=\\\\\"_clip9\\\\\">\n                <path d=\\\\\"M84.299,1269.38C84.299,1261.99 78.301,1256 70.913,1256L-56.874,1256C-64.261,1256 -70.259,1261.99 -70.259,1269.38L-70.259,1376.46C-70.259,1383.85 -64.261,1389.85 -56.874,1389.85L70.913,1389.85C78.301,1389.85 84.299,1383.85 84.299,1376.46L84.299,1269.38Z\\\\\"></path>\n              </clipPath>\n              <g clip-path=\\\\\"url(#_clip9)\\\\\">\n                <g transform=\\\\\"matrix(1.36821,1.1849,-2.36981,2.05231,5.46929,1071.93)\\\\\">\n                  <use href=\\\\\"#_Image10\\\\\" x=\\\\\"53.151\\\\\" y=\\\\\"30.14\\\\\" width=\\\\\"106.825px\\\\\" height=\\\\\"61.676px\\\\\" transform=\\\\\"matrix(0.998367,0,0,0.994768,0,0)\\\\\"></use>\n                </g>\n              </g>\n            </g>\n            <g transform=\\\\\"matrix(0.365442,-0.210988,0.421976,0.243628,28.7259,183.729)\\\\\">\n              <path d=\\\\\"M84.299,1269.38C84.299,1261.99 78.301,1256 70.913,1256L-56.874,1256C-64.261,1256 -70.259,1261.99 -70.259,1269.38L-70.259,1376.46C-70.259,1383.85 -64.261,1389.85 -56.874,1389.85L70.913,1389.85C78.301,1389.85 84.299,1383.85 84.299,1376.46L84.299,1269.38Z\\\\\" style=\\\\\"fill: url(&quot;#_Linear11&quot;);\\\\\"></path>\n            </g>\n            <g transform=\\\\\"matrix(0.407622,0,0,0.407622,47.38,278)\\\\\">\n              <clipPath id=\\\\\"_clip12\\\\\">\n                <path d=\\\\\"M1461.07,554.317C1461.07,556.747 1459.6,559.067 1456.6,560.8L1342.04,626.943C1335.41,630.767 1323.83,630.287 1316.18,625.871L1205.33,561.871C1201.14,559.456 1199,556.361 1199,553.426L1199,559.555C1199,562.489 1201.14,565.585 1205.33,568L1316.18,632C1323.83,636.415 1335.41,636.896 1342.04,633.072L1456.6,566.928C1459.6,565.196 1461.07,562.876 1461.07,560.445L1461.07,554.317Z\\\\\"></path>\n              </clipPath>\n              <g clip-path=\\\\\"url(#_clip12)\\\\\">\n                <g transform=\\\\\"matrix(2.45325,-0,-0,2.45325,1068.82,410.793)\\\\\">\n                  <use href=\\\\\"#_Image13\\\\\" x=\\\\\"53.151\\\\\" y=\\\\\"58.978\\\\\" width=\\\\\"106.825px\\\\\" height=\\\\\"33.517px\\\\\" transform=\\\\\"matrix(0.998367,0,0,0.985808,0,0)\\\\\"></use>\n                </g>\n              </g>\n            </g>\n            <g transform=\\\\\"matrix(0.371452,-0.214458,2.38096e-17,0.495269,-19.3677,248.256)\\\\\">\n              <clipPath id=\\\\\"_clip14\\\\\">\n                <path d=\\\\\"M1776.14,1326C1776.14,1321.19 1772.23,1317.28 1767.42,1317.28L1684.19,1317.28C1679.38,1317.28 1675.47,1321.19 1675.47,1326L1675.47,1395.75C1675.47,1400.56 1679.38,1404.46 1684.19,1404.46L1767.42,1404.46C1772.23,1404.46 1776.14,1400.56 1776.14,1395.75L1776.14,1326Z\\\\\"></path>\n              </clipPath>\n              <g clip-path=\\\\\"url(#_clip14)\\\\\">\n                <g transform=\\\\\"matrix(2.69214,1.16573,-1.29422e-16,2.0191,1352.59,983.841)\\\\\">\n                  <use href=\\\\\"#_Image15\\\\\" x=\\\\\"121.882\\\\\" y=\\\\\"76.034\\\\\" width=\\\\\"37.393px\\\\\" height=\\\\\"61.803px\\\\\" transform=\\\\\"matrix(0.984021,0,0,0.996825,0,0)\\\\\"></use>\n                </g>\n              </g>\n            </g>\n            <g transform=\\\\\"matrix(0.371452,-0.214458,2.38096e-17,0.495269,-15.0786,249.972)\\\\\">\n              <path d=\\\\\"M1776.14,1326C1776.14,1321.19 1772.23,1317.28 1767.42,1317.28L1684.19,1317.28C1679.38,1317.28 1675.47,1321.19 1675.47,1326L1675.47,1395.75C1675.47,1400.56 1679.38,1404.46 1684.19,1404.46L1767.42,1404.46C1772.23,1404.46 1776.14,1400.56 1776.14,1395.75L1776.14,1326Z\\\\\" style=\\\\\"fill: white; stop-opacity: 0.9;\\\\\"></path>\n            </g>\n            <g transform=\\\\\"matrix(0.220199,-0.127132,1.41145e-17,0.293599,339.708,327.53)\\\\\">\n              <path d=\\\\\"M1306.5,1286.73C1307.09,1285.72 1308.6,1285.48 1310.36,1286.12C1312.13,1286.76 1313.84,1288.16 1314.73,1289.7C1326.44,1309.98 1355.4,1360.15 1363.73,1374.57C1364.33,1375.61 1364.49,1376.61 1364.18,1377.35C1363.87,1378.09 1363.11,1378.5 1362.07,1378.5C1346.41,1378.5 1288.17,1378.5 1264.07,1378.5C1262.42,1378.5 1260.37,1377.48 1258.9,1375.94C1257.44,1374.41 1256.88,1372.67 1257.5,1371.6C1268.1,1353.25 1296.8,1303.53 1306.5,1286.73Z\\\\\"></path>\n            </g>\n            <g transform=\\\\\"matrix(0.254264,-0.1468,1.22235e-17,0.254264,329.57,364.144)\\\\\"><text x=\\\\\"1170.88px\\\\\" y=\\\\\"1451.42px\\\\\" style=\\\\\"font-family: NunitoSans-Bold, &quot;Nunito Sans&quot;; font-weight: 700; font-size: 41.569px; fill: white; fill-opacity: 0.9;\\\\\">!</text></g>\n          </g>\n        </g>\n        <defs>\n          <image id=\\\\\"_Image2\\\\\" width=\\\\\"113px\\\\\" height=\\\\\"47px\\\\\" href=\\\\\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHEAAAAvCAYAAADU+iVXAAAACXBIWXMAAA7EAAAOxAGVKw4bAAABVUlEQVR4nO2aQRKCMAxFxUN4O+9/DNw4CoiTliZN8vPfQlm00ykvP3aQ5fFc11sjy/L+/nx8r3ffm7Fn845jz+aJa23XOJvfs9Zh7NBawv3YrSGtdbj+x10egkFzpRrNt+SSxMgbqkiZJCJDiQDoSmSfdYFJ3JD18GMmcXhDTHUzNZIIXhA1JIJDib0MptqiKbhKzHqQiAaT6IlSFVIiAJQIACUGpLfLhpfIw49Ml8T2v4/JTPySyIJQI3w7JTIYEp2fong3FXWJ3huqCEYSNUlYhZRoyaSCoEQAKHESlqF0kZj9NBgNJhEASgSAEgNx9WfCTmLxpygzYRIBmCORsTIlXxJZED/kk0h+KC1x9E2FKG86qEkMsh8/HG9A6SSGYqAIKDEinUIpUSDDYXiqxAw3JCNMIgDXJTIWYdBJIvukK2ynARit4XASUZ6izCScRFWKCH0BfLM84oTw1Z8AAAAASUVORK5CYII=\\\\\"></image>\n          <image id=\\\\\"_Image4\\\\\" width=\\\\\"113px\\\\\" height=\\\\\"65px\\\\\" href=\\\\\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHEAAABBCAYAAADmBEt9AAAACXBIWXMAAA7EAAAOxAGVKw4bAAASeElEQVR4nN2d6ZbcNpKFL5cs9UN1W5bntWxr6XmsWTzLQ7mSJDA/gh/iApWyLalUy+AcnypVJkEAsd24EaQn/T8Yb9+XKknrOuk4pOM4tCyLpkkqpWpZJu170TzPKqVoWWZJUq3Sbx+m6VkX/wjjVW/gH7/sdZ5nTacc5lkqJT6rtWqaJtVaVUrRNE26XGbd3+9alkW1Vi3LrFKq/uvj/KrP4dUu/t3HWkupmuepWVspIcjrddc8z1qWWcdRTusLwc3z3Cz1OA5dLouOo+o4Dv3vv15e5Xm8ukX//eetTtOkdV20bWFVkrQsk+ZZOo74Xq3SNMVPqXextYal1lq1rrNqlfb90LrGXP/5/nW52Fez2B8/1FpPiSxLLLsUaV2lfZdKiZiHkHCtuFWPj/73cvpfLDQseNJxvB43++IX+cOvR5WkZQkBbdsh4uCySNtWWkxEuLVKx1HOuLecFjdp3/NnWiYKUbSuAXiOIwR8HIf+55/riz+jF73Anz7VWkq4RSkEI+m0Fun+ftflsra/r+usfY/fATVY3DzP2ratCe3Nm7UhWawv3KzO69PtllJetDBf5MJ++hRHWWu4QCkOm1h4HH2agJuVpHme2ufHUXS5zLpeQ1B8Ns9zu2ZdU3gAJdwxFh3zxjUv0cW+qAX9+KFWhMV/Urg6kCUWcxzpRvlsmno3ehwBVhDKcWRMZQ6uQ4D7HsgI1MrcDIT/koT5IhaC28T17fuudV0bWAmhTJ0QpN56ti1cq4MXSR1wiWv6+ChJ12ukGpJaunG5rJpnad9rm+NyWVRKgqiXQhQ8+yI87pEicDQIRApAg3US60gvPPYhbBceqYTH17DEo8VLSVqWTFGmKdKOZVm0LDKlqIaEQ+GeO798tpu/fV/qPE+nCwwLiwNVi1FhCaUJIFxbury7uxAiwrled0k6Dz6F78J2FgcBk2qs66J9T/QrpRt2MoH7RX6ZXuO/Py3Pcp5PftMffj0qdBeHF4AlXJwU4ETSGavUMSsAD1AlqYDHvut1P61y6QRPMg/g2bbSudnJvCNCgmsFQKEE8Z2p+1x6Hi72SW/47mPk6/u+txwNa4vfpw4hYi3Lok7AHBiHCfjArTr6ZE4Sfr+W+aVAqQgVpUCJJBQq1kas7FFxAqTLZdK//fx0wnySG/3LP2sl1uEKU4uX9r1Siu7uliYwhHwctR0y1zmz4gwO80gp3OM4dHe3NqIAy3R36kjX4yvVj31P4OR0HYJluPVOk/Qfv35/YX7XG/z4IVSVQ8d11lp1ucydsNxlLsukbQth4zLnWQ8sA85zWZYm7LCiiFEp7J6O477rOul6TU5VUpdHjgJmL4QDKiGxzmSP3OqJ8d+Tj/0uE//w61EBI57jSWldUk+hxWc9OR1Wk+4WYWNNaD2jlNKsxdMOEnZJ7dC3bTcFmZpQSimNzXHl81ok7tndvAOlW8KXvl9u+eiTAlyoIozuB4DhrAt/w6qkdL3kb1Jymli0xzSH/Vi153QcLqmJX0t6c70erTqyrusfKhPEggOjmGvqANAIxNZ10r//8rhW+WiTkTI4iCDuOGAZ+U8osXWddH+/twMn5iEIeFEswasRkroir49l4cDVhM/Bcshc44LwCkcKZD6tfW75JHN6jRJlQnld+NzzOB4vJfnmSd59rHWMTwEkFh3HeDBxDVaIwB1JjlxofhZCj0pG7bQ9508rIH+bJq6JU/eaYsybaczd3dJVRXCZpajVLhEMua2j5VueIeZxAqNXnlrrNwvzqy/+6VP1s+6Sdnpd/LAYxJ1lWbTv+2mpc8ekeOz5XJINkPEknbSABN/dIfFrniddr9uZm65tPudsGS4gLyqzX9ZTSgIq9iipoWfQKyGm1qyDxn2+DcV+1YU/faqVxbEZL8Iy3AURV0Z2Bgjv8aPW2iyJgbDcejk4YiCQnwEH6gpGuuHxknV5GAApe+rhjBIM0Zs362dJAwTM2uNzNWAnPQRtX1Py+qILEJ4kXS6Tfv89ER6D2ITLjEPpSWjiCL8DXvhezrO0eIhuJILNQ6IqUUqS2lJAfikQKWi01tq5enJBXKQn/SiK57LO3XrvDvdxZgfSAC+xbXvjat3K2a+fyZe42L/0RfI94sO+H11S7ptzwDFCbQcKHuTTitVZhR+g/x13u+/HGaPWJtBucwZOGNQXmddjl9cYr9fjjIlzQ6EolO9vjIHM4Yo65o6+L1CuK76j2b+SlvzhF959rBWEySY9r/IWBxeapJsxgs9gP9y6cHlj99q+9zwow8tRzIFr4l4jqHJkPOaAzOFzOnjy3z3ZZw73HJwRQM/PZZzLz5bwdH+/6e7ucirDnxeiP/shqPN63U1rMo5J6nI/YgiaD9IbUahX19mwI1dHp+6SRvDgBzIWbaHvIu7VB4dIHCwly09es8TF46JZH6AJl4i18H2KyMuS83tbpSvXuk4nKs70ybGBnwWe4XPx8sEf//7zVtd17YAKNJgjPrSNSjqCy5bBjBmx+FyUC5IxghyPM1w75nMIxF0v6yVmjqzQmJT7YaKYYdUJtCQ1ZaKjwNMPZ4ig+dwlxv6mdi2CJm0ZvYafnYcg1jNWSto/3r4v9ZZms/HRlTjKQ0ggMQcCXhPctiwZObr0+7iC8D0npEHCgBuGu0f+/ebN2oTh1ZFQjhAUwvBiMMriB+kpTwi1z1P9++wF0OSAB4HggpkDz+WKFF6uV2z3fljm5IgTM0ZjRqQ2ukKPDSzO3aa7orHhyGONI8FsR8wD8Prfus5dh/donX4PDjYtZ+q8ixecHUl6l/jIf8LYcOC33Dnu2lOQEEAqsKPymPchNnDBj/2yDnwmmnK9h2WEzLhWhifcnvDimm5B5xH0eFwZEah/lw2wMdryuX6sMKTVBnrl87E7oFZ1uagDHPZIDuzC2/eoF+57368z5pPUTDGMUaHhjdnPSNXhacbvO4BrBoNWQEthUQ7NXSNCcHHQYSnxtzjgZFxG7eU+6S5n0856WmJfaOXacKHTef/ZWJ4ERB4BYv0xN4IJ96fu4CC5Y/299W7b3pRx33cdx9GUwKszpFnpVQL8ZQpTT4XILvTLJWuRtVZdLuvpcY4GchAg3wnsQdf7fLJiZ7nucoleTvpViEfRbLurlKJ9P0R9zjcQ2l5PTcxDpIgaLjc/QFvRqlLKqWW90gSY6asBbNoJ5/QYcd3lMneQnYNIIAQhjkLoTAVK21+eQWrF5bI2yO9rZB8BpNxT8GwITExt3kuKpmcPJft+nCEj8QHnOU2TLpelU7JQdhR60gzHSWCPw4kvRNse6Cpb58NNhN/3+MXNp4lmpfk8uIxzjiyzWiCt63JuPONcBPjpVCSaoJhrOQ+otPgUrj3dZ+ynnGWp0lkTQMsbo6KaklYFmYBFuXsOoKS2/rT+uSl74Ae8SQhynjPnDYusZwpVTmFmTJXCC4T7zHXFd0u754zv9aQ6hJDawE1i0nrGtNHNzp3Gx3dDMwJKT6ebqJ2WpSstLb5SPkLYcbhrs66Ma7W7p1sdG5+mqeV2d3f5eFsp0UcKp5nxWuf9lnbYXjCutbbQwz7dK3C4t/7tqBdwlLhj7lgkUheUi/RlXRMLtNDkQuDQ2EwejE6Txh0Gyrpe9xYj0MrrdWtaFDeSKcbcDrBPvp2P7BXBlQPrgtlY16nrYNu2ox22K1Ek7rV5m5hD5uZAxulmM16lN7hcLlpXd9mJavEarBe37fGbGOasUn/mx2mpkPJHM6DoWCgNaHEPSZoxSQIrpr8sKcTQjocVgiAFKPMEyPnb3y7NbXiciU7qkTlJITT/PmM5STaQNzn4Oo6qbStdyoOg2XgSErWzOD+MzHOnM/bXbn2wOl4uC1DUK7S7PI/5/MTL8W/iIvdGwblH/7SXt3hSgMjcc/7twzQFsKhnHOu7zxws3mIWvM/kONRATghy7jbM4XBAaDNaz+/ExQQ2vav0DjMs7+5ubRZfStWbN+tpFRmTwhVu56GGJUfYANpHQTs9TD1jYW3MET2trCNqolCEEXe3bX8Q23wsy3KS9tNZ2chqTICsuB8MkbNEefY6UfCUjA09oeR+TjPBRDhMJj/yZHesQLjvHvnDyHcOcz+525HKg3DgQBB23BNSvafFXPHCivdWe/T0BCKBkEDO5wfrMZ690k7iBLfv2+/Nnih3ZZqVzV6eQ2ca1VOfyAVlpYPuAXf6w69HRTDOSUJ1OUODK4VJyUCftUQqERRnnTz3p47CctON4Ipo9/BnIjzPQ3mc2+WQ6d9hH5DiHJz37XDIsf5UNhTTFQY35uuE4QqFedgoxVhX6f4+FS7z2KPjSsdaLGSF9Afc6Tho+B0tKm6Q7A6jTzN6rXRqzVGVL9gZDRTBm4wkDe0cbm09COO7zsZwyM6lIhj3QOMenT1yxiisI1MtUD50JHO612B/sz04RGbg/UCu3G6lnytJfVaIDIhxKUtPvmkHFH6QuLVbLfmOEhGCF0bd/2MJY/u+Wyqbj8/yIFAsn+9WYXp0b27NiQbVXR/INSx726L+xx5w3azLH/Rx78Y8biBO03nnwB/VFP9UiFI+N4/b+1wNzA8AV0Tux8K8y8sJdCeV4T1HlwPmwn07F+oCxI17DB3LQAyvdXa51/A01Gjld3fe/9P3lUaumUqO1/E+G+ZBuM6fEo+lv9Zw/JeEyHj7vtSE6KW5tlhYDwhwB+5SvGDsKYs3XAVK7J+7cMDi7i0P0d9Tk4/Lcf3Y+uCIGqGS81FZGEEE8SnnDJxwf7+1RN2TeI+3faGgXzfM0RiyvqRb/IuEyPAne/0gvGbn8XAM0qNFjMjSEaWDFag7Ns3fYo5wYR5fODzosh6mZ58se0iXP3VKABd8qyls7FCgQoM38aIwrvXubhXPjYT1hiAvl+WrWhe/SoiMdx9r3ba9FYcdsPATq0MLSV04SEeCoE93yxyAIzxHjMsy6XpNAQaAWdr3cYNYqb/ACEXyZzWSe+1flcKAfPBWjFt9SCPwGoGUdyIg/K99Q8c3CVFK4DPmiuNz8xRzqbGND7k4MMFyvJHJEWBel+4JZcLaoarI/WLusWUkrdJDgIMdVybAjyNp0iLQqgvM+2K5npqkM1ff+qDNNwuRwZNQkiO51OQR+IyFUM+r+mfk+2Ymb5kYXVm3MQMitxDo+HQVa/Jiredmjh79+35fqvUoknce4GkgSEopj/as/6MJkfH2faluhYAF75qT+ke66TDzxByXOLpD4qbnpWPq4vkWvUDjsxOOHhGw9w8FNTbdtGLefeO4AKtjnW6hxHvW+tiPhD+6EBkgWafi0NxMqLMxV1JzO/nSvRDMSGUx3NW5sBwZ8293Y2Mvq6PbsbKQCHlurNDIEI05rOefTliU8n3eTPXdhCipPXQDqPEOs/FgsB7i3mGMgLfCe46aaDIZfY9rntLwaJv0UHnGFAIheC+QP3rnDE78VKsNEoOdTqz1+76Q4bsKkfHjh3z8jYP2eIF78u4zb8N482bV/X0++CllY7ET0t7z6k1bWA6oOL4TPz2mpkt/yBG7O7/VsXeLbXqqF/w9iRAZvCk4qyL9YUk9HUZMcsAwHhYgyHNCrMU5Tql3dQjM06Jb77FhjZ97xM4JArzIND3tO1OfVIgM3tntVsWIikc0JXkJa3y2A+33vM+tydkbKd359Rrm+rlccryPs0kjIxPr7b2HpCd/KdGzCFGKlCRLTA9fTuSVhs/1nYIo/ZAdaY6v9fL6IDVLYh41O3JcrIoOB2I3aQgx1K99ited3BrPJkSGv0k/QU1SXaBIJwPGOOYpRyLTqfs+sdObgD1l8WqL1yoldUwQXgHhS8//xsVnFyLjxw+13mJn/O1Okk5O9eGrouuNup2/+MgRqZeaHAzxXQTtL2tAOUh7njru/dG40QHyPOO3D9ME6EGAPUUWLvH337cmJBJorwyEi0xrTlaIZuVDNCtfr4fot6EXKB9Xyw6+7FxLxXopApRekCX6ePexVtzc+MZhSc1KnEgAzUpZb/SHVp3IdvLZLXPsOhgrM4/Bc36P8eIW5IP/9wWW5+S354hSz6z4+25IJ2BzmCuuiZ+AFn9x4EiKv5QX1N4aL3ZhPqDwvN/H63vENqe6kgbrCXAHObcq+k504w1eovX5eNGL8/GPX4KJBpXi4oh/lLrGd7tRdIUsx7L89SjEv/EFuS9deIxXsUgf8LF9p3a+o3TsO3UOk1eQSLQY5iulqXpIz58yfOl4VYv14awPeZ0XpEnE+Y7Hwuw4ry33k16f8BivctE+/H8/5IBkfLmfv2Wf3NIF/ZKBy5+NV7twH2OVRPJH1fp3vsG0IMTnevn6Y47/AxX1K5XSf237AAAAAElFTkSuQmCC\\\\\"></image>\n          <image id=\\\\\"_Image7\\\\\" width=\\\\\"113px\\\\\" height=\\\\\"65px\\\\\" href=\\\\\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHEAAABBCAYAAADmBEt9AAAACXBIWXMAAA7EAAAOxAGVKw4bAAAMrklEQVR4nOVdW2LbNhAcUD5Xkl4scXqxpr0XiX7AQwwGu7Rj2RLV7o8lknjtc3YBygX/Afr2XOu2bQCAZVkAALVWlFJQClAr9mvLUrBt7R4A/Hp++fDA9NAL+PpjqwBQSkF9kVQkOBIFx2vLUlDr4wvyYSf/7blJghanglFLc9q2DZfLgnXddqvl9X/+vDwkPx5u0l9/bFWtTf+q8Hidwt22DaWUXYCtj3H5bPNolvkwk2Xc05hHcjep1yk8Fy4tksSmfH5ZCv768RjCPP0k3W3ysxKFtSwLaq0vAGYZXC2vtefHmKn9Lkv7TKt+BKs89QT/+FnrtnVECYwghuRukfcpOL1N4fgzrZ/umgHsbvfsVnnKiX35vlYFHUpMJQAMwMQtqpSCdV3x9HTBujbXSUUAZmVQa876A84ZL081oS/f1+qAQwGLusx+vz/rSNUtbk5FZvccpSuOdmut+PvnchrenWIidJvAKJRIaPpZY6B+Z/6nAlBrisjjp4KezKWfRZB3n8QfP2tlKuBWAHS0SMZqOFSAwu+R1QA9sVdhupA5riNapUjY946Xdxv823OtHnfIFGp+lv+pZSiaZH/e1gVIlmseCXRBk1SBFO26i6fA7xUvbz4oS2UABoaua699ZjFK25CJ/NzajukBgMmNerzUNuyD1Rw2U6XR/ihAzhu4D/C56YDM+QAMDMqScrUiYMzjiDjVmjT2aTLvlhtZLeOvI9RufWWyRCUt9906Xt5kIFpf5uaUKarlR0jUy2p+X2Nh62+2bi3faaxz1JoBInf1nr/WWm9Sj/3UAb7+2KrHo6hC4gJ0kAOMwMSf0RwwSgu8isNrDpSU1KIVBY9zX+Rz9xAaP3n/My3zUzrWOqdbhLpGPqMuFMhjkGu8pxZRKuE5H0ljYFaC0z60b8ZNutllAbatC1PdcxurPftZgvzwTnWDFuhJdSlzHFOozudGsHBsxeMYc5xiHxm6jdyx11mVojHVkt2zaJ/6+aOF+WGdffm+7hu0zrB9sCC2ULiRNUUF6fa5l9H0GjCX4nRsF9BRPsj2kVC8fyofx88KC5/lYq/uhPt7zni6FFoetZaCjQU2okPgWBBqtXrfXbczmP2qmz7a5oqAVwR6Mkv1Zz3eXpuWvLux7jBwog7bIyKTNaboEjQ+7ZMUl+RQnvdVYTKE6S48AiD6LOepwMmVTfs6Qsw+P1/XNVb5roaa7wFjzIqAgloHidaoRyUiVOruz9MOIE4ZpoVapcfben9ODpAyC9M+dc1UWmCuDGnb9wjztxqo65wXNqcNUVDXeBmdc4kWqsKLQBL78zIcx6U71aMZfa6xW86uOeKOarU6R3fZ6n2y3Bj4vcrPmx789lyrx7QsH9OFXC4F6xqnGBHo0aqJCihzpa+hV33OEWpk/ZGFkJWeh0YVI953ZSU+UIGyzeVSQDDvHgF4m2UePsAiNRmoNUXX9NcOIDkTyJhs0R782/PxZzLAtZ3XNYXxeKhMzRivfbW1XlKX/1oakn3XsVyxXtslSW+q61QNjayv1oqnp+VlMnGVxRnnwEKFQAaocFQx9BkHPWSIV1OyfUUfb2KQeRnPL13wJHWrkedyZY3auSfKrHK6mIEW7YyTd2txbVbw0vuL9/1GxvXPtG510W3xs6X4wtXyiJo9Trml6jo1vqqCaHvOVcd1AWdgz/FFBu6cTx4v9y9R3BsZO2uPCkM1Xl1vhvwi16j967PKKP0cxTMFFC4k9umxl8r2lvlmTPa4TXIBet+RG414wvbqrVhcL9xZ10Hcuo6OO0QD8/MoiNnqdIKZ4pB8AY4ql4VKNQ0zzU3XGrlgjdk6F80ds3VxHd6vto3G8fyTc4x2ftimlLYRXfx9Bg/+RxoRAYMIYUX3IxfdJz6fOHPGt+8Yis9jSjDHnAzRcj56cDg686NziEALKQNdLhQKg89oKVHvR25+2BPVCXECOvkuVGWyl7fmZF7jUCljfNB2nem8P277aIzhuG0BdJ0ag0bm6PEKlQX7dNR6uSwTCGLb7gEU0I0xMFJQzoHt13Xb16BEdE8Z1NpPOyiPW1/kbVOUJy6+MaUMGuaW1jvE3hlJNYptIhfZJ6CId0aL/XhEmdqy7yjuRrlnmz+ZU3amKVCJ5sO+lZlRESFCvbyuSuHgiXzkGN3tLnt7kuIN9zBPFIpqfktkL4NAI4TlVRXVDk6ScYBMIXEBbMt9RUd8ruVdaGXoT4Wsa1ENZ36nCkjk7IwZ4/Wcv+l1pVHZ66R4kZtuAtKxxudU4I7qSylYdHK8p9pNBvRFjh3rgtpkutvRwTtYKnJPraYrQ3OF82I5R3V1zlB3b02Rln1MjtUtYi4ucA0zSi7Wd//chD4K0EOClyL7sx2YqWA7Nhnz4a7kbdyFDSh9jxMx7MYuMHdZFAQnNrYru4A4MQBD+SqD8XroieMrc3Ujms9qfFXLJwP6urcpduv8KVi9766xucMYuLkSjC61DoqrMX/Mr0fF7Ir24k5ZBxy1I/bxbn1uGRHkBub9ui60Lnx+VjfJ/hXWKyR3N6fITZmpcZ9/+wszfc9ThcM41ePQnMwreFJBUYk0DXIBdtc5sGxYp7r+plTtu26PLb+eS9Fis1pes6hZc2gFZEhHq8s+GLWTWtMtaazAaL9kJEmhvgZ7R6M9PleJf8uLhVe48ilq1O+cqwqBHqqHmrIrjzJdleNy6crl6+acPZy4B+S6xnl2DzEAOH7gyywKWrzyoaiwI7h8OyY6/qBWM2rtnJvRerLjGGOs7Qm0H0T2Z9RiIytRiqzHrU7bRWiXbfnXT+dpH17A8KOd6g32io1PmoVvAFjX1VxbXAgYAUpvq2hQ6WhfLXc5M9DxcSOXFjGabfW6CjUqcGTz8XU3IY3u1wERkKc4vn72rWN6IXxWvRfSQngWrFWjfTG+aPZ2lFtFWsrJ6zjqLbQUxTFG1DimGmq97hK1LRALVj2HMz1atyuok3o8XU+0qZ5tFKdCJOm7EzqZyGqUGdGiIgaxjbpMzS3VYltfnEd3tRq7FOFqnOHzylivZWZzzcKB3su8hc5TQ4saQOQu3WCOdvpfFSLQD0VlKCsThPrvvtjxJRqPmd6nMydihraL4mAkkGynnVbrrjD6q3OLGD8x+6AvnyObv+W1uTcJkcSd/sjslZFR3Iqq+srQ6Liiotr2fY4vc/yMT75pm+hsaCk9pXDhZ3E5U+bIUx3FPi+8v2U3X+m3hEji9pW6uKOJRxpHxmg88A1gXfDR+ZouiDnuaLw8iu0TY4LrPjb78L5UOTxsRHxQPr3nDOq7hEjyHwaKDjpFsTJzJZGL3Cdaeo7Fw1fRM1FKQWUBxkIC73Hu0Y8zeExrfcRbVUcuNVN4Heu9h4ivEiLQUawDhkAOALRgsEzxTZ9xrScz94kbkFGA47sb6g5Lab+q0Sw9Pi7ZxxjzP68kqTVyHvxOPmTHULgPClz/YurVQiTpu/fDAAkQcMa6Fkcbq15XVQFGxwd53wGIx0udBxAXFzxdorJkz+kcVMBt7e3vR73r/2FCJPm7GRkgIJGpwJhAq9D8tJ3qicdHLbpHqNaF6CAt3hQe88kIWPn61KXrXwAf/uLphwuR5O/mAzEIUe1u17XwO8Y1t1rdQPb+dQwlzw0jhJmVHCNAlYGkTMCf8U7/pwkRGH+XDRhztAhgROhTBaUC8SqNWjzHygBTlgY4ZejV+1aX6aiT1x7uTWGn6PW3iMmkjBEeWzLk6y7TyWObu9YobrZ2CEt3fN7jfa23+TWNmwiRpL9dE0HwaOdbGeIC6e44P2LpVSG3IHePfiSQlBUAVNDX5nvvpZsKkURhZpYF5AXpKN3gcx6TFDkeKU0Elvg3eukGiBWOz9/6t2zuIkRgfFknQoJRhUaL4wo6nDKAEVWAvBzom9aRq492VIDrXhS9hu4mRJL+LKaDE1IE+9vz84azu9hIgBHAigCOWqgKj6+j8dr/9rfdnHzLi+Qul9eAectHD3rpfbf43maOi442gX5kg5vcFOZZfmUx/mXYO5AyRC3MXWP0mbLUE3BKUWrCds1ix+OPHLe3WXC5XNL53ptOMxElLaz7ybUsufadBY9/fu4mugZgf7vZx6SQz/hvF043ISX/Mdsoz9QYmCX8fMYL0hEqzXLWM1me02knpuRbXsC8tdM+x7vmWmrrQh/P7mgMVGU4A3B5jU49OaXX/i8Gy3N+iizKEbPKkVvsma1P6SEmqeRVH2U8CwGa/wHjXqG++KPWrHniGePeET3UZJX05VhgLouR/H526uxWdc7PoIectBJ/a8B3872yoxvHwHxu51EFCPwHhAjMv/gBzNUYIP5duEeJe0f0L+D749HrhKeLAAAAAElFTkSuQmCC\\\\\"></image>\n          <image id=\\\\\"_Image10\\\\\" width=\\\\\"107px\\\\\" height=\\\\\"62px\\\\\" href=\\\\\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGsAAAA+CAYAAAAs/OVIAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAgAElEQVR4nN2dWa8saXaWn5jnzMjMPZ5T1V3tsrGR+TNIvjAgC+y2uw22bIONzB/gBgkEAowZJbiBCyR+CzdIIHDX0Gfvs4fMjHmO+LhYEbGrrabdQw2nCKl0ztlDROQ3rPWu933XVxpf0+vn/0CpplEAeJ7G83MBQByHmCaczzVx7GEYMI7QtjAMA/f/1tK+yvf+Wa6v5Yt/4+8olWU5YRgCYJoawyATZxgargtVBZoGZVlhWRamaeJ5Gl0HRVFx/I/B1+6zf61e+Ju/o1TXDTw/P3N7e4NhQN8rbFujaUY0TSMMdU6nhjh2GUfoezBN+a/rIM9LLi8DHh8LNpuQj/+l9rUZg6/Fi17+eq00TaNpGjabDZ6noesyEY4jk2BZUBQKTdPQNIgiyHMYx4lpmnh+fiaKIq6vAz799MxmsyEMDboOlOJrMWnv9Au++s6gLMvgeDxzc7Pj+Tnn4iICIElqLMvCMAxcV2MYoOtGdF0HoOs6NhuH47HAMAw8z0PXIQyhruHx8cwHH+zo+2Wi4aN/8W5P2Dv7cq+/OyrL0jFNAQhl2RIEDtMEwzDRNA2GYWCaJrZtcDwm7PcxVdXQdR37/Ya2HTFNg7bt6LqOi4uQpoEggGGQnFYUA45jzvcdiWOD//GP3s1Je+de6uf/QKkkqXFdlzDUyLKR/d7g+bmfJ0Yjy+T7fd8DEAQ2AIYhIbGqGkzTpCxLttstcSwTrhSk6YjrGuS5THZZllxcxOg6uK6EzjiWifzv//DdmrR35mVuf6tXlmUyTYqqqthuAwxDBm0YBCBoGjw9CURXSrHbRUyT/P4wTLiujq5DWY4YhsHbt2/58MMbHh4KXr8OOZ8nlFJM04TnWVRVh67r6LqO7+u8fZsQxzGGAUVREwTeO5XL3okX+cU/VCpNe7quw3VdbNtgmmQnBAGkqYSq5+czV1e7dVeM40gQuOuEdV2P61r0vXzBsnSaRnZkVVVomkbXdWiaxmazwTDk44+jQinFOI64rkXXCbLUdZ0ggKendwPqf6Uv8Oo7gxrHkf3eJk0FHBiGhmVJ2Hp6EmBR1xPavMCTJMGyLDRNIwgC6rpmHEeUUmy3EXXdst87VBV4HhTFhOPo1PVAFJn0Pei63B9kxyoFeS45sW1Hmqbh/fcD2lZ28+Njxe2tT5Iovv+n+lc2Zl/Jg3e/lisAwzC4ufFmiK0wTY2qahnHEd/3sSxBba7rMk0Tr14FVJUMcF0LPO86uWffy78fH1s8z1mfVVWyC+PYommgrjtc10bXwbbh+bnC932qqsLzPDRNI0kSwjDEtk0sS+6tafJf3yt8X+N//ZMvPzx+qQ/8xt9RCgR1WZZBVTW4rouuQ123dF3H9XXE+dxydeXQdTIxaTphWfoKApJEQMfpNLLdSsh8fq4YxxHLstjvXepaQmieK6JIo65hGGRBLGiwaWQyHcdhGAa2W4tpetl1SVLiui5ZlrHb7VBKYRgamw0cjyN3/8b8UsdP/7IedPG3KrXdwjQp2ralLGvC0GW3g+0WqqqawxlomsbxOFCWE30vNVPT9HSdoq5hszE4HgeCwJjBwIRpmrx+HXFx4ZIkHY4jfGDXdYyj1FKGIbTU+TzO7MbIxYVLHGsMw0Cej+i6TFLfw/vvB2y3Bo7jEEl5R5YVvH3bSH77lUe1/Rup+rLG8AtfGX/p7yk1jpAkFWHoM00CsR1HcsfjY0UQ+KRpNoceHcOQHVUUijjWqCqYJil6o8jANOGTTxLeey+maaDrJrquw/Nc2rbDcWyKouT6OkDTIMvkPkmi2Gw0jsduDXv7vUNZQlEUbLchj49HXr8+rCVA27YEQYBpmozjOIdUeHrqmaYJy7IA2G71L7w++8Ju/kt/pFTfQ12P9H2PruvEsY1SMlF3dxWvXvlkGWw28uGVUvi+jWHA8SiDl+cVjiM5KAyNleuzrIVOGpkmgeS2bWOazPBdBvPyUn738VFyl6ZpuK5J3yssS8P3hfRdCuhpUniexjRBUXQz+2GsTMeSv2ybmd3vsW2ZsGGQ+PlFhcfPPQxef7tVv/zHStU1pGlNFBlEkQtInkjTjrKE/d7n/r7G8+D+vp4LXpthgKoaiaKQYVDouo6maWy3BgB13VPXik8+OdO2LUmSsNtZTJNwgAtpOwwDYejQNHA6DTPMt+j7nr5XpGmK5wlQUUrAjiwkYebbVhFFNk3ToJSE7+MxZxwnum7g/v5MVUEUWXRdTxDAdmuQ5znv/231hYTGz3WyXn93VI5j07ZwOiV4nkdZKrKsZr+3CUPwfZtxhDzvKYqC47HB9z0MQxJ/FMlAx7Hcs65r+r7n8bECIAyteSJCuk6K2rKUwfZ9naIYaBrwfY++l/DbdR1RFOA4cH3tsdlInfX01OD7EpYNQ547DLKDhmGgaRS+73M+SyE+DAOapnE4mDNDUtP3cHtr0XWQJAPvvy9F9eavJ+qD3/18J+1z2a7X324VgOMI7XM6nQHQdZ3NZoNlCYL63vdSXr3aUlUSMmzboGl6qqpis9lgmhpJkq/E636vkabQdVIUN00/k7fQNBJa27YlDP0VtpumCcjAWpZFGOqkac9mYzEMzEVuz25nUZbQNO2aj2zbRinZdZeX8VqTLXVf0wwYhuxw09RwHAmhris5tW0VYaiRJBLSlVJ4nkPTdDz8e+dnHuuf6Qa7X8vV9XWIZcFHHyVzYbrFdfWVfTif1YzIRnY7n7aVAQCJ/a4Lb9/mRFFEXdd4nkdVCejoup793sKy4HhU6LrIH6dTwqtXMVk24Lom4whFUc7PD9E0Zgguz7ZtG8PQqKqGvu85HCK6DsqyxDRNHMdZ0eMCfJoG+n7g6srk6UlykYANH5CclSQ1tm0TBAZv30qxHscBXSclwgI3TFNy3c/K6v/Uv3z567WKY3fl4ZqmIQhc6rrjcLDpe3h4SLm93a4F7MIqZJmiLEssS0Ka7/szoRry9JQTx4KTpwnqull3y7ID0jTl9es9b9+m2LaNZVl0XUcY+tR1y/W1gIqylHukqYSxzSZkHBXDMNC27TyJBpZlcDolXF7GaJrsEAmJA77vEYbyzn3fs9lImJ8m+bfr2uu7Sn6THRVFPmEoIGgYhIGxLA3DgP/9T3+6SfuJc1b0187qm7+j1OWly/lcs9sJlHYchywrVz2p72G/3zIM8nt5Ln+ezwNxrKGUwjRN4jjgcNB4770Qz4M4juYBG5gmNSNEk67r6Pue3c7A9/05pAXYto1tm/PPQRg6HI8jeS7vUNcdnucRxyF9/8L5tW3LdmvTdR2GARcXMVXVUxQdti1j+eqVx/Pzcf3sSikeHzMA0jRlu7Vpmo7n5xOmCRcXLlHkYZomeV5xOo0YhnCURVHg+/JOr74zqJvf7H7ifPZjz/B7vz0ppdScrF2Uku3dNPIhNE2jqiouLnzGUVZaWUrN07YdFxf2al4ZRzgeG4Zh4OYm5OGhJAwDxlF4vDR9get5nrPbCdooipKLi4Dz+QWGT9PEdmtTlhNBoK9C4kIPCZID3xdC+HAwub+v5h1lEQQ6SdLOSHSYw6KEsK57uUfbdrNtwMJx5BllKWHQ9405Cgzouo5t63TdRBjKwjVNuL8v8TyPpmnWksVxZPw++ZMfb6f9hTvrw99X6hf+rlJZlqFpGp7nkqYVVdXx9JSTpikguSeKfE6nBtuWiYoim74fmKaJuoaHh448Z4buAufrGrbbYKaREspSapv9XuqbwyGmKEpME3zfp2nkd7MsI45Ntlt7DrM6x2PFOC6c4Uhd9+i6TPLjY8luZ/LxxwkAlmWRpum8++p5UGWH6jo8PCSM40RZ1ozjRBjKLpSwquj7kcPBmxeMLEDPM2fKC8JQ5/4+pSwVaarYbAKqShbhQoVlWU/X9T821P+Rk/X6u6MaR6mPvvWtLbouRSSI4HdzExGGIaapMY4yQI7j8OmnCZqmEUWsVX8Uwc2NvSZw4flcum6kbUf6njnW27RtS9+/cHSO49A0I0GgMU2KcYT9fr8O0jAMdB3Ytk3XQZoKEnVdi6YZub2VcFmWsNvFXF0Jcbvb7ajrnutr2bmbjYZl6bQt3N7GGIbOxYXH4aBTliK1TJP8XF3XGIY8p+tk8ppmxLYtzueGuoY43hIEkqvO52z+2W7O5xVKKW5vLTQNfu73lFpQ9f/r+qHbz/qr9+rDD28YBkE8mqZxdeVyd1dwcRFi27K6hmHAcSzOZwESDw9iD3McDaUkPrvuwihIQnYcG8+TuibLFK6rkeeyC7tOVNokEUjteQ6nk8j1SskOCYIAXRdEeDjEKyNSVeJyenqS+s5xnJmyknDrui5RZFJVijzP2W43lGU112cOeV6x3/v0vYTMtoXHxwTf99ls7DXcPzw88OrVDUVRYds24zhS1zWHQzwvnhc5x/MEUCyFN8i96/olvC6k8v19MpcvOn3/w0niH/hC+KsntdvtZugrDPM4KrZbjTyXAZYQJ1SNhBjxN3zwQcgwvEB1WTUuZSmUU1EU7HbbFY3VdU0cb6iqBt93KQqB63kuyO2zxpcoivB9g2GQiX96+qym5dP3gmIOB5OyhCQRm5llQV1PxLHO42OzcodRZK8KdJIUKKUIw5BhGFZRU9O0dZJlMQitFcfCzJ9O9fw9bd79gnYXrWwcX+ist28rdjt//nvLdisLqSwlFwpQkXquqiRvRpF8/7NKtQbwwe8q5TiQpsJzaZo8XOCo1AwgyEoEQgPL0lY+7XxOuLqKSdMa3xcXkePA8VgzTRPX18G6A85ncRgdjx2bjXCFCwgYBlkMS6gcR7i/zzFNk7Zt8TyP16+FQioKIV89z8OyjHWVlqXcbwm/4ziuueLy0uajj8SGJpKIQ12rVb8KQ4u2lR0kphsHTRP+b7+3yHN5pmVZc8h2sW1517Zd0GdDXYvzStd1HMdhuzXWiWzbkTA0SFPR1dq2xzAM0jTl1asdZTlhmjrjqKjrGsdx1l2m/ZV/oFSWsdq08lyI1ft7QTq6rs+eBYHowj4M+L6JbcPp1BEENlUlrECWTUSRzt1dShxvGQZRgPu+ZxxHwtADpPa5vAxnmkaK4jiGLBPpQrg84Qo9j3kXy4TI7pYdGwQGeS6DWZby/U8/TbBtmzj2ybKGsizZ7/fzhLtkmTwvyzJev96QptOsWcV0nZhwltJCPBpwPqdcX285nSo2G5++V+tOdBydthXH1cWFT1lKydE0DTc3AooELcoY6LrOMAwcDj739xJql5C6eBkXt1YQyOe2bdAXo6Ss4oq6btcJCQKDYRjYbAzGcVFoayzLpK7HWSey6Hvh7N68STEMna4Tri7LcnRdRylFENhEkYemycDHcbjunu02IgzhdJrWWmgphA1DVm2ajmgavHmT8NFHKboutU6evyT+/V5W99VVjO/7KAW+73I4HCjLcg1pcRyhlMJxnBnF6ViWhW0LMXt5abHbCdAR24Di8nJLnvdcXvqcz1I0TtOEbctkmqbObuevoXu71TkcfO7uCqZJFGZRqxtcVxaSbcN778WM40iWZRiGweOj3PvqKp69IRIeTRP0slQUxTCHPmf2IahVCGya5geS7n7vMU0KxzE4nxsBJJaEy/1+S98PZFm91jGyKwUxDQNkWUWeN2voEGGx43zu15eWUKtTlt2cv8A0DYZhJIoibm+3WBYcDvsZTWmczx2nk8T2cZQoIQ0JPZoGFxfhCsuXLOB5Ds/PFedzRRAEPD1l1LWi70VLMwyDIBB4Lova4ulJgIXjaBwODsMgu2ah0IZBFnRdy9d3u5CybHFdjdOp5fXreJVXJMf3OI6DrutEkcyBUswLRyPLJpSSn9Vlpk08T1ZKkkiCD8OQtpU/01TY5b6XxBqGGk0zcHUl3ogXWM3skHWpqgrXdbm8NGYxUQrNqyufw8FlGCR+L+Kd48ifu91uDpkTrmtTVR1ZVmNZsNsJrVUUE3kOux3c3QmYsSwLz5OFs4Tn8znFdS2mSdgNIWtllSdJQt+PRJE/85Adt7cbgkCjKCRP931P2/Zst3A+J2ga3Nz4aJpGWfZzflQURTtrW6IMbLfbWcHuOR4z4tjh8VGose9//8zpVJGm/ZyrRYv7xjdC7u8lH55OCXUNd3fZLP0IwNEOf7NUC+sgtY7krDRlVVOXLg2ZWBddXxjnabV3Lbxd3/c0TUMcx0SRwfEoqElW3UCWZWw2G+LY4nwWVsC2rRni9mRZNsvoIUEgFb5hvDAiS/ja7eDP/uzFmqaU4vra4/m5m8OnQd/3DMMw+wJ9np6eME0TTdP45jdjigKyTJiFKNLpe1nBS+gRH7wiy7LZpxjT98PMZBjc3yfz38MZlhtomoyLMBmSb9++fSF8FyI7z8Woo2lSpvR9z8VFyPlcz5KRLOZpmnAcWYjaYlNumn71zJ1OJ25uLgHW9plFUZWXkUnbbGQwxxEeH4/s93tsW3ZQmopJMgjg7dty5vVi6loMKotnT9fh+VlI1CU0+v4LU11VkqzP5zOO43A4hOS5wF0pxGVAl8vztJmz9DidxEL25k1BEAT4vsbxWBFF/uqL3++1Wf4QdTkIRErx/UUsbZmmadbHBmzbZBgkVzXNsOZWXWeWbsY53ztUVTfbDTxc18B1hRsVf6KzSi+uK97EIPDRdXn2w0M1q+sueT4DE8PQGQaF686zp2lcXFzQNBLrP/nkiK7LRNV1MwuELuM4znWCmgFDPPsbsjlceLRtP/Nr2oy+cm5uXA4Hjb4fqev2MywFc64oSJKONFWzu0m6R0zTxHVdDEPYk9Oppm3VHIYbDEPD8zSSRMwsAqV7qkpCeRRpFMU452XZBV3XkSSyQNpWEQQWx2NOlhXzTh7nWs6b84hJ28rAdd1EURQ4juSoMISuU+vC6bppLTeapqHrFEky4jgmwzBg26xCZ9PA7a1ocraQ+Fxe+nPBrdjvLbZbV+imzUabfd6KoijQdY3NxqIoGl6/PpDn1Sp9C3qCKDJ4fj6jaRrPz+lniladp6eMqoI4lrpFaKBOaoa7isfHgSgy2G4lmb56FVOWzDkkpKoqTFOjrru5PnN49WqLpmmzaRMuLz0cR4jc3c7j6em4vuP1tWha2+2WPJe6pyjAsowZaUqxfH3tEMfw+Jiy2Whz2PJo23ZGlwKSzueUNE1xXbBtsQbYtr7SW+M48sknCXGsURTFHLrElp1l2Spquq4xRzB3DrkTRTFwPCYkiXCIadpxPIr14fY2mEsIyX9rdfxLf6RUUYjOdHkZkiQtUeTMiGrAssw11CxajoQRk/N5XF9sAQy7nb+WBOKulXadZcX7vkWaVtzc+PNASjhI08U2JtJ/HFsoBff36YzCHJqmYZomwjCc2fF+VYa3W5MkEfV5yVXDMHBxIS7d+fVoGoH+oiZL7ghDef5CChyPJZtNQBiymkvzfFhFUssyOZ3OxHFMWZa8ehXy8CAOYc/z8H2Dh4eE29uYtoWm6fA8e65XpUYUEfOFohJ0LX+vKvn5PBf79g/QTe/99qQ8TyPP+1WgE1len7sw1JwIhR5ZFFnPg48/lmTfdWrt/kiShIuLA1mWc3sbUVXC6d3cxNS18ILCM76Ic54nAzkMwp6/fSsTKsWyTHKSlPK+7wWzfCE5482bZGYWIjYbE8OA+/uCOA5n4CBq89L8YNs2fd/jeR5ZlnF1teV0KmeNzJpRsZhKNxuDspR8soAe8XgkXFzEFIV0W3adjIfY7xr2e5eqkp/b72NcVxbMxx9L4f76tc+bNxXTNHE4hLMFrub62qMsf1Bd/qFE7vW3W3VxYfPxx0LNyPaVVhmxNBe4rsswDFxfuzw8CL8nu47ZFqZxPhc4joPrWivddDxWbLc+VSXU1uKB2O8NkkTNZpiXnxeXVMnNTUCWiXVZdkU2W6xNsixnv49WC/WnnyazsBnSNOJxf3jIuLraoGmQJC23tw53d/Le0/RS4I6jLELDWDzwNZuNmG+macIw9BURGoZBXQuYEZpKJsX3fS4v7bWrsusk5IHoc9/85pb7e6lFw9CmbcX+JjRagW3bP9Sz8SNFL/dXHtXFxcUqyi3EbpIk3N7ueHrKORwimuZlGxuGwPrvfe8tH3xwQ1VJK87iim0aOJ/Pcy2i43mQJB2WZeE4Ur9EkbUW0GHoE8fw/Cwf1vd1hmGRRl6oLN+3aZqBvu8JAo9xlETvuhpFIQtjATFSZE6z1yOY/YUG9/fC9KephOyFXpP7QFGM+L6B5wlhLbltWkGI9IcpLi+liBZ7tlBISdICzKDE4fY2pCggzwt0Xef2VqLHjxIif6Se1fzXK+37f6prCyEq6rA228BEjxKI3X8GlS3o5oY8l0Q8lyFzp2GBaZr0fc/5nJDnQrhO08T5XHJxYVHXiq6bCAIfzxOzzOEgWlBRDKRpObMZxsyE27guM1vt0TQdbdtSVRVVNVKW5QyH09nvLjWk7/trC1CaCqMxjmr2lKjZONNiGHB3dyYM5et3dxVBoLHdujiOQxx7zAgeXdf45JNqNd90XUdVKaLImZVpcfem6UTX9VxdhbP/Uf2FivGPLevf/lavxnEkihzqesRxDLpOGOKlvgBmuf1Fspa6TAq9um6wLIu2bbm99TmdFh5Q53xOef16uxLBDw/CpARBgKaJ1CCrmzVESn0npGwQQJL0lGXJbhdTltXqbNrv/dVSIMy/7Ib9XuPTTyWnWZaE8PNZdvMwCPQW86m1cppZJnJHUfT0fc9+768O3cfHdmbahWfsOmZILwtFhFoBFVnWcnHhkKYTb/618WPNw0/ssvm531OqqiRUSfErjMF2a/P0VHB9HfL8XHN15VFVUFXtHJqCub5Y6jl4eCjm5jkhYpcicRzVGtocB56f61lM1ElTETiXGL+gvsUDcn29o20FvLx9K/1dWSbhCiCOPaZJNDEhdh1cV6Np1ErcfvjhjtNJ7h2GPlXVEIYuWVZxOPgUxThbD2TXAytRvKgLi3NqYdilTpTnOI5GXf/kXSg/tRXt6jcatds5ZNlAGJorKmuaht3OpW2XLvh+RjpCej495VxeRiRJQxRJu8/xWLDbhZzPBVEkMdOy4HyWMytAEr4UlQZl2a4OJSmUDYpCWArD0EnTjJubzbxYRNJYitRhGNjtIvJcdjvIbhP/vRhy7u7On+EoRzzPJQzh6amZuU/xMmZZtxpbF5/7QjjbtsEwCHBoW1G5bdvm+tr6qXuVf2aX6F/++0rJJEnyrSoRJIXYlGTq+xZdJ6v9fK7mVWYTRfDmjfzMxYXFRx+d125GOadCm3WrmosLj/NZtLOuU7MPQpiCpTkhihzKsl9lGYA4Nueww9pDLMYWKcLD0FgprbaVRSCuX52yrFYuse97osinqgRJns/LCTYiNEoXypY0TWeUKnLI5aXH83OzaoOf/quf3uj5udinf/mPpWPk6Unif5IUvP9+SJqKRLEgSduWvJAkFXHs0zQCl/v+Bbm1LatAB5Kg5XvCNhgGPD2p2e+3AB9h3S3LWOX052epa8TTCHd3+SxDBKv7Vu4riK8opEl8IV2X0LrbidD58HAmiiK6ruPmxl89KEFgzfodlKUYXZUS/tTz3PUZn0en5OfamvLeb09KQp5BnktCXpqzP2tpLsuSzSbkdEpm352P677UJGUpk1nXUowuRPLiUxgGGYAsm6jrmv0+4HgsOBzEzHN/L+1Ci1IQRUIoPz8LUfvmzRO6rnN9fZhbTyXnSDuQuy6WIDBWqJ9lEqIti1VvWkJ9WU6cz2cuLw+AfEbZ6Qb/8x9/fj1bX0gf0TJpfd8Thu6aH3xfEJthGGuN9fwsSXwcpZAWL4bi+fmZ/X6PruszMdtyOATkeT9bzPrZhLOjLKVoXgjZaRKJ4nQ68fr1AcuSfKfrOufzmffe2895pCaKPBwH8nyakZzk0JubkDwXXUuUXmHcXfflqIdPPz3yC79w4O5OdpGgYvHfT9Pnf8TQF9ZMd/UbjdpuRQZ4eKhm+O3N/cPdipSyLOP997eMI5zP3bqq+75fm+kuLvx1hy6QuG1lwNp2YrvV5w5IxX4vH0kpePtWlOzt1uXhQSxqfd/zjW9IiO77ic1G5/m54fLS5XTqubiw1ibyYZAdE8/9R8LMmPT9uDq0ttvt6nHf7Xy67sd32P6k1xfepvr6u6NaTCdNs8j0+io3RJGF6wqt1PfM9ZI0iKdpznYrTQrL15cmiO3W5XgsaNuWq6vDLOP0q74kjXVyFBC85MHbW4ePP5b7iggou35RbTVNI4417u7KuRbzSVOZvLIUoFOWi7G0WwXEsvziz8r40rrNlxNklILj8cirV4f1WATTlB2T5xO+r5PnPYeDWL/O5wTDMNhsIoZhXLs0tltr3lmsNdrzsyjbck9Rt4W81Wcm5AWJ1nWL4zgrk7H0MS8uX8mfPZ5n0bbjeqCKlCbe7NUQ0+oXtZP+/PWln+Xw4e8rlSQyQHVdz40A1mxFlhDXdf0s95ukqdRlZSmtPldX+zUkLpY1zxPTpijHclLNe+8Fs2AquXMxhcqgO6sBaJFFhkHAzCITXV+Hs/dBmPoFVb55I7LK0qZ0+k/hlzaGX8mhJT//B0qlabNyi0tH4vEo0FfafWRGgsBeqaCyHFe/uFILdA6wLI00FWu1uGuFSLVtGVzf9/E8a0Wjcp6FPnNzFlUFed4xTRP7vYvrwsODyDHLwsiyksMhIE2lFnv77+z/vw8t+fNX+Ksntd/vVmtY2/azVGHjujLgi4zuOA6bjRTJYfiieS1HNeS5eBjKUsBM0zR861s7zmcpxstSjKnzQWozky8F/HYr/vqlt3ix4rVtSxQFNE1HGNqUZf+VTNJyfWmHlvywq/gve+2TP9E0yQ8DRVGsO0aI4A7ft9ak//QkHpCPPz7PTW/Mztd+1paa+SxcjziOOZ/FmZTn3Xw24dLoPc4yy4jvC7sh8jucTvIOeZ6vB0q6rs3/+Wea9lVOFLwjp6It1y/+oTzw8moAAAHYSURBVFJl+cJOLBrZZmOQ52IWTVOxQ4vxJVhdUkqJoadtWyzL4nDw1zZWOWjEnk+gfhH6kkSOrNM0+V3fd9fifQE9bQvf++df/jlNP+x6J17is9f1t1slsNtc/eJRFK2+jEWUXPyMy0Eii31rYfhBmtsk1y07zqTr5J6CEB36fmS3M+beXykZyrKmbVvy/7x7p8bnnXqZz17f/B2lmqabpXRhuhf6yLZt8jxns9ng+8I6LKzC6TSujLznuSuh7Hketm3MLMo4d+2LMzjPO4ZhmPWp7Tt7Vu47+VKfvV59Z1B1Xa/Iz/etGVio9biE5aihpVuy7wWG17XkvcPB5u4un21rW5qmY7ezubtL567MkGmSXPlV56Ufdb2zL/bZ6+Y3O+W6FmXZrAJfFFkUxbDmryhyZxVYWAyhgnyaZlxNKLe3Huezms0uL4eN/CRN2F/l9c6/4GevX/ojpapKitMX1gPyXDjA5WyLxUMoNmWXzcbg8bFkuw3WBkA5zvXLPzPwZ7m+Ni/62Wv5/5Asx4W7rs3pJK2rV1fB3GB9nifKo22Fxlr8hVXV8vgf3K/dZ//avfBnr8tfr9UC1a+u/PXM9udnYc+zbPH+vfx/Sx4eHuj/2+3X8nP/X8+jjAy2QdiEAAAAAElFTkSuQmCC\\\\\"></image>\n          <linearGradient id=\\\\\"_Linear11\\\\\" x1=\\\\\"0\\\\\" y1=\\\\\"0\\\\\" x2=\\\\\"1\\\\\" y2=\\\\\"0\\\\\" gradientUnits=\\\\\"userSpaceOnUse\\\\\" gradientTransform=\\\\\"matrix(-118.47,-106.79,210.785,-180.125,69.2121,1372.7)\\\\\">\n            <stop offset=\\\\\"0\\\\\" style=\\\\\"stop-color: rgb(64, 128, 255); stop-opacity: 1;\\\\\"></stop>\n            <stop offset=\\\\\"1\\\\\" style=\\\\\"stop-color: rgb(64, 128, 255); stop-opacity: 1;\\\\\"></stop>\n          </linearGradient>\n          <image id=\\\\\"_Image13\\\\\" width=\\\\\"107px\\\\\" height=\\\\\"34px\\\\\" href=\\\\\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGsAAAAiCAYAAABY6CeoAAAACXBIWXMAAA7EAAAOxAGVKw4bAAABFElEQVRoge2aQRKDMAhFmx6it/P+x7Ab64xOmaAG8vnwFnWhiOGFOG3TPsu6vpS0djpuH61zXoz5F3s6r4rRxipiftddeUbp3t18QozEu3/JfdSzgCy5VWpTWcVYSlaPqcvDEUpZQPUdCqUsSAbMoJIViJIVCBNZrO+MHtbjrs4KRMkKBJUs9uXXTxZ7JR2g6ix27sly6BIxReIOHdpZWevoNe68y2DAmTVXFmDBAB9pJ29nBYRCln5jgkVyv1QUsrIAJyvtvg1F7iGykF/KlniPG66zKDCyWLI2IqwOJSsQz2URbqZEpTorEDCypn6xnciVYT+SlbS+08Zt01lJfv7xBmYZLPpgy6p/pA9gyxIArKMLXxexLNiBCThLAAAAAElFTkSuQmCC\\\\\"></image>\n          <image id=\\\\\"_Image15\\\\\" width=\\\\\"38px\\\\\" height=\\\\\"62px\\\\\" href=\\\\\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAA+CAYAAABHuGlYAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAGaElEQVRogcVZSWLjOAwsblIu+oD+/zZ/YC4di8sc7IKLsJzJdCdpXGxLXIACUADpgL8oIYR9jKG/wd/hL+m080uMEb33pwHpR9UBkFLaU7ptW0rBGAOKGgAsy/KjiO3Aw105Z4wx0FpDSgmtNVPqer0if7c2Oee91oqUEsYY5rZaK5ZlQYwRx3HY+J+IsSmOQghPqKhwTO8dIYRvU8yU0kzzEmPEGGNSiGO/Ovh3ABtwQ4UI5ZxRSjEFKBprYwyUUtB7v6H3hQqhlGIb1loRY0RKCcdxIKWE3rshUkqZYsvLHykWQthjjJZZGtwqpRS01ia3MaZCCKi1cj2MMZBS+n1XhhB2brKuK2qtj/hIyeJHkVEypft678g5I+c8uf53FNsBbLoJF6RwU800kirjinM18HXcpxULIewANi5KyDWT1nWd3KquXZbF5tGVmq2qXO/9UzG2f/SSyK3rivf395e1T5/TmBAClmXB+/u7AnBD+7NK5fwoEiE822OM7d7lnBFjtIwlmkSMga97hBBelqRdraTf1SIvnsm1/gEwVBgCfMfPpwQ6UWgj0XGQxgrfeUWJFIO7tYacs20WYzRDPbqkDcZs790U25dl2ai9xoKK+V+oQFEhspzvWZ4kC2DKTK6tCRBjjDtd4RVZlgVvb2/T4lqMj+Ow9yRaRU/Xi/E5nIkUjWLMpZSQxhibn8C6dhyHlRZa6Ru73jtKKbYgDeBmWor8PN2LLmf8JdyLrsKrlV7hp+XeRa01G+/jjaj4hGE49N6ngm/vVakQgqU1N9c2uPc+pTdLjyqpn7qOFz6PMU48RjBsVcaHr/hqPZVZ13XKMn3v+U4zmiWKhur6mpm994diDDwN2BDCxD80wD9TZWqttimfE1lPQYyndV2n32OMW4xp6jI7vGi80CqSr48PRZGGkttSShO/sV9b19XHcjSkmEWKmP5mcKsiipaXs/hjCFCUO1ncASDFGLdXmxJBjRFFk4VbfxNVpRi6h/F2tgfBoRdiaw3LshifeCGPsW3hQsCj/lER5T1SCN3nWd76rhehk0IIGxVQC7iAh3xZlmksUVQC1eMaS5gqRve/OoXXWm/Br0jwANFas3aFStFNuomlt7iZ2aeErUox8Espxp9U1GomgJ0WTec6l23+HcvIWWPIHoytkM7lfYWi7ue21hBZ/9TiUsqUPWcMT746U6rWOvVnOvdVJaAYjeScNwYorSeFeDL0LO838W5WQ/S7ZZ4klc/4eL1eLViZsrVW8z39f9a2eKR8u8Mg93NpZGsNx3FMBxTzEoDt7KCqCcFNtTNVK1+dK1trljxKEWyVfDfLLM05I7Fz1c191tVarbPwLlXOMjecKKWbMtEo/s6s945IjWutBq1apxbpUR94JAkX00Kv8aSuZDZynWVZTCltNs2VHikN/DP+okvOEsCHA68BPFLa3XoujZqFKlqctRx5BfQsSI7iHACWeeoySmvt6eDDsmaIeSF18PbPu5ZjtCroe7+mP01pS+T3tZM4G7uzWGCvpNZpdhExZqx2ptpRKPX47oJoszMG7j2/xoIqx8DU1oYLcxwTxbfkPl5jjFN4MAP53p8nIsmV15G+9yICXIyKcNHjOKY5KjqXY6kc6yzXbK0ZkjFGhFLKzoH2UG75xIIP6xzT3X8HHg3B2TGOzabe+/PiblOfn8UEn3MToqnI6R0GjfOJoOXNcx7r552CLmmMsem1NjdX7uGiSqa6IUWPa2eZzoOtntBVeu8XAP8AuF1D5ZytmKoVFH/0OpNX79St/lMo5uLnJdzvUzXwpk5SiFTpwlv9qnfXYm8F+jHPEPJiaUR21gzTf8fUytba1E2Qw/TcSdECzaS6U8sTShPS/MKOk27T9FXxqKirSBetNby9veHXr182XrL0Q4UokVdInnO0vj1Zc+ciJUV2HloVXON4+axSAJDJ2F4Bn+p6tD9rhbkGkZee//JR0rySlHPelLfOWhUqqH966gFFKYRz7p+fRuhJsRDCaWtNJf1JiJvqkf6E4y6999Ns+6xkbVtIE2enZ0XKX4VzPP5HDP2XGI8B81W5lhTlOZYiV3YuY4w/QshLVJeR/TVOBA0TF49fhpJKptXaT/mSoZlLRa/X67coRAkAdt+OnP2ZLvKtClEy8Bz4L5T6EYUoU2utqGm9+2mlAMz/vunfxHda+HGFKP8C6wW6ett+DK8AAAAASUVORK5CYII=\\\\\"></image>\n        </defs>\n      </svg></div>\n  </div>\n  <!--v-if-->\n  <div class=\\\\\"arco-result-subtitle\\\\\">This page isn’t working.</div>\n  <div class=\\\\\"arco-result-extra\\\\\">\n    <div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 8px; row-gap: 8px;\\\\\">\n      <!---->\n      <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n          <!--v-if-->Back\n        </button></div>\n    </div>\n  </div>\n  <!--v-if-->\n</div>\"\n`;\n\nexports[`<result> demo: render [all] correctly 1`] = `\n\"<div class=\\\\\"arco-result\\\\\">\n  <div class=\\\\\"arco-result-icon arco-result-icon-error\\\\\">\n    <div class=\\\\\"arco-result-icon-tip\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-face-frown-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n        <path fill-rule=\\\\\"evenodd\\\\\" clip-rule=\\\\\"evenodd\\\\\" d=\\\\\"M24 44c11.046 0 20-8.954 20-20S35.046 4 24 4 4 12.954 4 24s8.954 20 20 20Zm7.322-26.873a2.625 2.625 0 1 1 0 5.25 2.625 2.625 0 0 1 0-5.25Zm-14.646 0a2.625 2.625 0 1 1 0 5.25 2.625 2.625 0 0 1 0-5.25ZM31.68 32.88a1.91 1.91 0 0 1-2.694-.176 6.66 6.66 0 0 0-5.026-2.28c-1.918 0-3.701.81-4.962 2.207a1.91 1.91 0 0 1-2.834-2.559 10.476 10.476 0 0 1 7.796-3.465c3.063 0 5.916 1.321 7.896 3.58a1.909 1.909 0 0 1-.176 2.693Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n      </svg></div>\n  </div>\n  <div class=\\\\\"arco-result-title\\\\\">No internet </div>\n  <div class=\\\\\"arco-result-subtitle\\\\\"> DNS_PROBE_FINISHED_NO_INTERNET </div>\n  <div class=\\\\\"arco-result-extra\\\\\"><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n      <!--v-if-->Refresh\n    </button></div>\n  <div class=\\\\\"arco-result-content\\\\\">\n    <article class=\\\\\"arco-typography\\\\\" style=\\\\\"padding: 24px;\\\\\">\n      <div class=\\\\\"arco-typography\\\\\">Try:\n        <!---->\n        <!--v-if-->\n        <!--v-if-->\n        <!--v-if-->\n      </div>\n      <ul>\n        <li> Checking the network cables, modem, and router </li>\n        <li> Reconnecting to Wi-Fi </li>\n      </ul>\n    </article>\n  </div>\n</div>\"\n`;\n\nexports[`<result> demo: render [basic] correctly 1`] = `\n\"<div class=\\\\\"arco-result\\\\\">\n  <div class=\\\\\"arco-result-icon arco-result-icon-info\\\\\">\n    <div class=\\\\\"arco-result-icon-tip\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-info\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n        <path d=\\\\\"M25 39h-2V18h2z\\\\\"></path>\n        <path fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\" d=\\\\\"M25 39h-2V18h2z\\\\\"></path>\n        <path d=\\\\\"M25 11h-2V9h2z\\\\\"></path>\n        <path fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\" d=\\\\\"M25 11h-2V9h2z\\\\\"></path>\n      </svg></div>\n  </div>\n  <div class=\\\\\"arco-result-title\\\\\">This is title content</div>\n  <div class=\\\\\"arco-result-subtitle\\\\\">This is subtitle content</div>\n  <div class=\\\\\"arco-result-extra\\\\\">\n    <div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 8px; row-gap: 8px;\\\\\">\n      <!---->\n      <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n          <!--v-if-->Again\n        </button></div>\n      <!---->\n      <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n          <!--v-if-->Back\n        </button></div>\n    </div>\n  </div>\n  <!--v-if-->\n</div>\"\n`;\n\nexports[`<result> demo: render [custom] correctly 1`] = `\n\"<div class=\\\\\"arco-result\\\\\">\n  <div class=\\\\\"arco-result-icon arco-result-icon-custom\\\\\">\n    <div class=\\\\\"arco-result-icon-tip\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-face-smile-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n        <path fill-rule=\\\\\"evenodd\\\\\" clip-rule=\\\\\"evenodd\\\\\" d=\\\\\"M24 44c11.046 0 20-8.954 20-20S35.046 4 24 4 4 12.954 4 24s8.954 20 20 20Zm7.321-26.873a2.625 2.625 0 1 1 0 5.25 2.625 2.625 0 0 1 0-5.25Zm-14.646 0a2.625 2.625 0 1 1 0 5.25 2.625 2.625 0 0 1 0-5.25Zm-.355 9.953a1.91 1.91 0 0 1 2.694.177 6.66 6.66 0 0 0 5.026 2.279c1.918 0 3.7-.81 4.961-2.206a1.91 1.91 0 0 1 2.834 2.558 10.476 10.476 0 0 1-7.795 3.466 10.477 10.477 0 0 1-7.897-3.58 1.91 1.91 0 0 1 .177-2.694Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n      </svg></div>\n  </div>\n  <div class=\\\\\"arco-result-title\\\\\">This is title content</div>\n  <div class=\\\\\"arco-result-subtitle\\\\\">This is subtitle content</div>\n  <div class=\\\\\"arco-result-extra\\\\\">\n    <div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 8px; row-gap: 8px;\\\\\">\n      <!---->\n      <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n          <!--v-if-->Again\n        </button></div>\n      <!---->\n      <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n          <!--v-if-->Back\n        </button></div>\n    </div>\n  </div>\n  <!--v-if-->\n</div>\"\n`;\n\nexports[`<result> demo: render [error] correctly 1`] = `\n\"<div class=\\\\\"arco-result\\\\\">\n  <div class=\\\\\"arco-result-icon arco-result-icon-error\\\\\">\n    <div class=\\\\\"arco-result-icon-tip\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-close\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n        <path d=\\\\\"M9.857 9.858 24 24m0 0 14.142 14.142M24 24 38.142 9.858M24 24 9.857 38.142\\\\\"></path>\n      </svg></div>\n  </div>\n  <div class=\\\\\"arco-result-title\\\\\">This is title content</div>\n  <div class=\\\\\"arco-result-subtitle\\\\\"> This is subtitle content </div>\n  <div class=\\\\\"arco-result-extra\\\\\">\n    <div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 8px; row-gap: 8px;\\\\\">\n      <!---->\n      <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n          <!--v-if-->Back\n        </button></div>\n    </div>\n  </div>\n  <!--v-if-->\n</div>\"\n`;\n\nexports[`<result> demo: render [success] correctly 1`] = `\n\"<div class=\\\\\"arco-result\\\\\">\n  <div class=\\\\\"arco-result-icon arco-result-icon-success\\\\\">\n    <div class=\\\\\"arco-result-icon-tip\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-check\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n        <path d=\\\\\"M41.678 11.05 19.05 33.678 6.322 20.95\\\\\"></path>\n      </svg></div>\n  </div>\n  <div class=\\\\\"arco-result-title\\\\\">This is title content</div>\n  <div class=\\\\\"arco-result-subtitle\\\\\"> This is subtitle content </div>\n  <div class=\\\\\"arco-result-extra\\\\\">\n    <div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 8px; row-gap: 8px;\\\\\">\n      <!---->\n      <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n          <!--v-if-->Back\n        </button></div>\n    </div>\n  </div>\n  <!--v-if-->\n</div>\"\n`;\n\nexports[`<result> demo: render [warning] correctly 1`] = `\n\"<div class=\\\\\"arco-result\\\\\">\n  <div class=\\\\\"arco-result-icon arco-result-icon-warning\\\\\">\n    <div class=\\\\\"arco-result-icon-tip\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-exclamation\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n        <path d=\\\\\"M23 9h2v21h-2z\\\\\"></path>\n        <path fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\" d=\\\\\"M23 9h2v21h-2z\\\\\"></path>\n        <path d=\\\\\"M23 37h2v2h-2z\\\\\"></path>\n        <path fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\" d=\\\\\"M23 37h2v2h-2z\\\\\"></path>\n      </svg></div>\n  </div>\n  <div class=\\\\\"arco-result-title\\\\\">This is title content</div>\n  <div class=\\\\\"arco-result-subtitle\\\\\"> This is subtitle content </div>\n  <div class=\\\\\"arco-result-extra\\\\\">\n    <div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 8px; row-gap: 8px;\\\\\">\n      <!---->\n      <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n          <!--v-if-->Back\n        </button></div>\n    </div>\n  </div>\n  <!--v-if-->\n</div>\"\n`;\n"
  },
  {
    "path": "packages/web-vue/components/result/__test__/demo.test.ts",
    "content": "import demoTest from '../../../scripts/demo-test';\n\ndemoTest('result');\n"
  },
  {
    "path": "packages/web-vue/components/result/index.ts",
    "content": "import type { App } from 'vue';\nimport type { ArcoOptions } from '../_utils/types';\nimport { setGlobalConfig, getComponentPrefix } from '../_utils/global-config';\nimport _Result from './result.vue';\n\nconst Result = Object.assign(_Result, {\n  install: (app: App, options?: ArcoOptions) => {\n    setGlobalConfig(app, options);\n    const componentPrefix = getComponentPrefix(options);\n\n    app.component(componentPrefix + _Result.name, _Result);\n  },\n});\n\nexport type ResultInstance = InstanceType<typeof _Result>;\n\nexport default Result;\n"
  },
  {
    "path": "packages/web-vue/components/result/result.vue",
    "content": "<template>\n  <div :class=\"prefixCls\">\n    <div\n      :class=\"[\n        `${prefixCls}-icon`,\n        {\n          [`${prefixCls}-icon-${status}`]: status,\n          [`${prefixCls}-icon-custom`]: status === null,\n        },\n      ]\"\n    >\n      <div :class=\"`${prefixCls}-icon-tip`\">\n        <slot name=\"icon\">\n          <icon-info v-if=\"status === 'info'\" />\n          <icon-check v-else-if=\"status === 'success'\" />\n          <icon-exclamation v-else-if=\"status === 'warning'\" />\n          <icon-close v-else-if=\"status === 'error'\" />\n          <result-forbidden v-else-if=\"status === '403'\" />\n          <result-not-found v-else-if=\"status === '404'\" />\n          <result-server-error v-else-if=\"status === '500'\" />\n        </slot>\n      </div>\n    </div>\n    <div v-if=\"title || $slots.title\" :class=\"`${prefixCls}-title`\">\n      <slot name=\"title\">\n        {{ title }}\n      </slot>\n    </div>\n    <div v-if=\"subtitle || $slots.subtitle\" :class=\"`${prefixCls}-subtitle`\">\n      <slot name=\"subtitle\">\n        {{ subtitle }}\n      </slot>\n    </div>\n    <div v-if=\"$slots.extra\" :class=\"`${prefixCls}-extra`\">\n      <slot name=\"extra\"></slot>\n    </div>\n    <div v-if=\"$slots.default\" :class=\"`${prefixCls}-content`\">\n      <slot></slot>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, PropType } from 'vue';\nimport { getPrefixCls } from '../_utils/global-config';\nimport IconInfo from '../icon/icon-info';\nimport IconCheck from '../icon/icon-check';\nimport IconExclamation from '../icon/icon-exclamation';\nimport IconClose from '../icon/icon-close';\nimport ResultForbidden from './403';\nimport ResultNotFound from './404';\nimport ResultServerError from './500';\n\nconst RESULT_STATUS = [\n  'info',\n  'success',\n  'warning',\n  'error',\n  '403',\n  '404',\n  '500',\n  null,\n] as const;\n\ntype ResultStatus = typeof RESULT_STATUS[number];\n\nexport default defineComponent({\n  name: 'Result',\n  components: {\n    IconInfo,\n    IconCheck,\n    IconExclamation,\n    IconClose,\n    ResultForbidden,\n    ResultNotFound,\n    ResultServerError,\n  },\n  props: {\n    /**\n     * @zh 结果页显示的状态\n     * @en The status displayed on the result page\n     * @values 'info','success','warning','error','403','404','500', null\n     */\n    status: {\n      type: String as PropType<ResultStatus>,\n      default: 'info',\n      validator: (value: any) => {\n        return RESULT_STATUS.includes(value);\n      },\n    },\n    /**\n     * @zh 标题内容\n     * @en Title\n     */\n    title: String,\n    /**\n     * @zh 子标题内容\n     * @en Subtitle\n     */\n    subtitle: String,\n  },\n  /**\n   * @zh 图标\n   * @en Icon\n   * @slot icon\n   */\n  /**\n   * @zh 标题\n   * @en Title\n   * @slot title\n   */\n  /**\n   * @zh 副标题\n   * @en Subtitle\n   * @slot subtitle\n   */\n  /**\n   * @zh 操作区\n   * @en Extra\n   * @slot extra\n   * @version 2.8.0\n   */\n  /**\n   * @zh 默认插槽\n   * @en Default\n   * @slot default\n   * @version 2.8.0\n   */\n  setup() {\n    const prefixCls = getPrefixCls('result');\n\n    return {\n      prefixCls,\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/result/style/index.less",
    "content": "@import './token.less';\n\n@result-prefix-cls: ~'@{prefix}-result';\n\n.icon-status (@status) {\n  @color: ~'result-color-icon_@{status}';\n  @bg: ~'result-color-icon-bg_@{status}';\n\n  color: @@color;\n  background-color: @@bg;\n}\n\n.@{result-prefix-cls} {\n  box-sizing: border-box;\n  width: 100%;\n  padding: @result-padding-top_icon @result-padding-horizontal\n    @result-padding-bottom;\n\n  &-icon {\n    margin-bottom: @result-margin-icon-bottom;\n    font-size: @result-size-icon;\n    text-align: center;\n\n    &-tip {\n      display: flex;\n      width: @result-size-icon-wrapper;\n      height: @result-size-icon-wrapper;\n      align-items: center;\n      justify-content: center;\n      border-radius: 50%;\n      margin: 0 auto;\n    }\n\n    // status = null\n    &-custom &-tip {\n      font-size: @result-size-icon_custom;\n      color: @result-color-icon_default;\n      width: unset;\n      height: unset;\n    }\n\n    &-success &-tip {\n      .icon-status(success);\n    }\n\n    &-error &-tip {\n      .icon-status(error);\n    }\n\n    &-info &-tip {\n      .icon-status(info);\n    }\n\n    &-warning &-tip {\n      .icon-status(warning);\n    }\n\n    &-404,\n    &-403,\n    &-500 {\n      padding-top: @result-padding-top;\n\n      .@{result-prefix-cls}-icon-tip {\n        width: @result-size-image-width;\n        height: @result-size-image-width;\n        line-height: @result-size-image-width;\n      }\n    }\n  }\n\n  &-title {\n    color: @result-color-title-text;\n    font-weight: @result-font-title-weight;\n    font-size: @result-font-title-size;\n    line-height: 1.5715;\n    text-align: center;\n  }\n\n  &-subtitle {\n    color: @result-color-subtitle-text;\n    font-size: @result-font-subtitle-size;\n    line-height: 1.5715;\n    text-align: center;\n  }\n\n  &-extra {\n    margin-top: @result-margin-extra-top;\n    text-align: center;\n  }\n\n  &-content {\n    margin-top: @result-margin-content-top;\n  }\n}\n"
  },
  {
    "path": "packages/web-vue/components/result/style/index.ts",
    "content": "import '../../style/index.less';\nimport './index.less';\n"
  },
  {
    "path": "packages/web-vue/components/result/style/token.less",
    "content": "@import '../../style/theme/index.less';\n\n@result-padding-top: @spacing-9;\n@result-padding-top_icon: @spacing-10;\n@result-padding-bottom: @spacing-9;\n@result-padding-horizontal: @spacing-10;\n\n@result-margin-icon-bottom: @spacing-7;\n@result-margin-extra-top: @spacing-8;\n@result-margin-content-top: @spacing-8;\n@result-font-title-size: @font-size-body-3;\n@result-font-title-weight: @font-weight-500;\n@result-font-subtitle-size: @font-size-body-3;\n\n@result-color-title-text: var(~'@{arco-cssvars-prefix}-color-text-1');\n@result-color-subtitle-text: var(~'@{arco-cssvars-prefix}-color-text-2');\n@result-size-icon: @size-5;\n@result-size-icon-wrapper: 45px;\n@result-size-image-width: @size-23;\n\n@result-color-icon_success: @color-success-6;\n@result-color-icon-bg_success: var(~'@{arco-cssvars-prefix}-color-success-light-1');\n@result-color-icon_error: @color-danger-6;\n@result-color-icon-bg_error: var(~'@{arco-cssvars-prefix}-color-danger-light-1');\n@result-color-icon_warning: @color-warning-6;\n@result-color-icon-bg_warning: var(~'@{arco-cssvars-prefix}-color-warning-light-1');\n@result-color-icon_info: @color-primary-6;\n@result-color-icon-bg_info: var(~'@{arco-cssvars-prefix}-color-primary-light-1');\n\n@result-size-icon_custom: 45px;\n\n@result-color-icon_default: inherit;\n"
  },
  {
    "path": "packages/web-vue/components/scrollbar/CHANGELOG.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.42.1\n\n`2023-02-03`\n\n### 🐛 BugFix\n\n- fix ts declaration error for emits ([#2077](https://github.com/arco-design/arco-design-vue/pull/2077))\n\n\n## 2.40.0\n\n`2022-12-09`\n\n### 🆕 Feature\n\n- Add scrollLeft and scrollTop methods ([#1909](https://github.com/arco-design/arco-design-vue/pull/1909))\n\n\n## 2.37.2\n\n`2022-09-21`\n\n### 🐛 BugFix\n\n- Fix styling issues in Firefox ([#1655](https://github.com/arco-design/arco-design-vue/pull/1655))\n\n\n## 2.37.1\n\n`2022-09-16`\n\n### 🆕 Feature\n\n- Add virtual scrollbar component ([#1634](https://github.com/arco-design/arco-design-vue/pull/1634))\n- Table, select, list components replace virtual scroll bars ([#1634](https://github.com/arco-design/arco-design-vue/pull/1634))\n\n\n## 2.30.1-beta.1\n\n`2022-06-10`\n\n### 🆕 Feature\n\n- Add virtual scrollbar component ([#1098](https://github.com/arco-design/arco-design-vue/pull/1098))\n- Table, select, list components replace virtual scroll bars ([#1098](https://github.com/arco-design/arco-design-vue/pull/1098))\n\n"
  },
  {
    "path": "packages/web-vue/components/scrollbar/CHANGELOG.zh-CN.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.42.1\n\n`2023-02-03`\n\n### 🐛 问题修复\n\n- 修复emits 的 ts 声明错误 ([#2077](https://github.com/arco-design/arco-design-vue/pull/2077))\n\n\n## 2.40.0\n\n`2022-12-09`\n\n### 🆕 新增功能\n\n- 增加 scrollLeft 和 scrollTop 方法 ([#1909](https://github.com/arco-design/arco-design-vue/pull/1909))\n\n\n## 2.37.2\n\n`2022-09-21`\n\n### 🐛 问题修复\n\n- 修复在 Firefox 下的样式问题 ([#1655](https://github.com/arco-design/arco-design-vue/pull/1655))\n\n\n## 2.37.1\n\n`2022-09-16`\n\n### 🆕 新增功能\n\n- 增加虚拟滚动条组件 ([#1634](https://github.com/arco-design/arco-design-vue/pull/1634))\n- table、select、list、cascader、dropdown 组件替换虚拟滚动条 ([#1634](https://github.com/arco-design/arco-design-vue/pull/1634))\n\n\n## 2.30.1-beta.1\n\n`2022-06-10`\n\n### 🆕 新增功能\n\n- 增加虚拟滚动条组件 ([#1098](https://github.com/arco-design/arco-design-vue/pull/1098))\n- table、select、list 组件替换虚拟滚动条 ([#1098](https://github.com/arco-design/arco-design-vue/pull/1098))\n\n"
  },
  {
    "path": "packages/web-vue/components/scrollbar/README.en-US.md",
    "content": "```yaml\nmeta:\n  type: Component\n  category: Other\ntitle: Scrollbar\ndescription: Used to replace the browser default scroll bar style.\n```\n\n*Auto translate by google.*\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/type.md\n\n\n### `<scrollbar>` Props\n\n|Attribute|Description|Type|Default|\n|---|---|---|:---:|\n|type|Type|`'track' \\| 'embed'`|`'embed'`|\n|outer-class|Outer class|`string\\|object\\|array`|`-`|\n|outer-style|Outer style|`StyleValue`|`-`|\n### `<scrollbar>` Events\n\n|Event Name|Description|Parameters|\n|---|---|---|\n|scroll|Triggered when scroll|-|\n### `<scrollbar>` Methods\n\n|Method|Description|Parameters|Return|version|\n|---|---|---|:---:|:---|\n|scrollTo|scrollTo|options: `number \\| {left?: number;top?: number}`<br>y: `number`|-||\n|scrollTop|scroll vertically|top: `number`|-|2.40.0|\n|scrollLeft|scroll horizontal|left: `number`|-|2.40.0|\n\n\n"
  },
  {
    "path": "packages/web-vue/components/scrollbar/README.zh-CN.md",
    "content": "```yaml\nmeta:\n  type: 组件\n  category: 其他\ntitle: 滚动条 Scrollbar\ndescription: 用于替换浏览器默认滚动条样式。\n```\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/type.md\n\n\n### `<scrollbar>` Props\n\n|参数名|描述|类型|默认值|\n|---|---|---|:---:|\n|type|类型|`'track' \\| 'embed'`|`'embed'`|\n|outer-class|外层的类名|`string\\|object\\|array`|`-`|\n|outer-style|外层的样式|`StyleValue`|`-`|\n### `<scrollbar>` Events\n\n|事件名|描述|参数|\n|---|---|---|\n|scroll|滚动时触发|-|\n### `<scrollbar>` Methods\n\n|方法名|描述|参数|返回值|版本|\n|---|---|---|---|:---|\n|scrollTo|滚动|options: `number \\| {left?: number;top?: number}`<br>y: `number`|-||\n|scrollTop|纵向滚动|top: `number`|-|2.40.0|\n|scrollLeft|横向滚动|left: `number`|-|2.40.0|\n\n\n"
  },
  {
    "path": "packages/web-vue/components/scrollbar/TEMPLATE.md",
    "content": "## zh-CN\n```yaml\nmeta:\n  type: 组件\n  category: 其他\ntitle: 滚动条 Scrollbar\ndescription: 用于替换浏览器默认滚动条样式。\n```\n---\n## en-US\n```yaml\nmeta:\n  type: Component\n  category: Other\ntitle: Scrollbar\ndescription: Used to replace the browser default scroll bar style.\n```\n---\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/type.md\n\n%%API(scrollbar.vue)%%\n"
  },
  {
    "path": "packages/web-vue/components/scrollbar/__demo__/basic.md",
    "content": "```yaml\ntitle:\n  zh-CN: 基本用法\n  en-US: Basic Usage\n```\n\n## zh-CN\n\n滚动条组件基本用法。scrollbar 的默认插槽需要唯一的子元素。\n\n---\n\n## en-US\n\nBasic usage of scrollbar component.\n\n---\n\n```vue\n<template>\n  <a-scrollbar style=\"height:200px;overflow: auto;\">\n    <div style=\"height: 2000px;width: 2000px; background-color: var(--color-primary-light-4);\">Content</div>\n  </a-scrollbar>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/scrollbar/__demo__/type.md",
    "content": "```yaml\ntitle:\n  zh-CN: 滚动条类型\n  en-US: Scrollbar Type\n```\n\n## zh-CN\n\n设置 `type` 属性改变滚动条类型，`track` 类型会显示滚动条轨道。\n\n---\n\n## en-US\n\nSet the `type` property to change the scrollbar type, the `track` type will display the scrollbar track.\n\n---\n\n```vue\n<template>\n  <a-scrollbar type=\"track\" style=\"height:200px;overflow: auto;\">\n    <div style=\"height: 2000px;width: 2000px; background-color: var(--color-primary-light-4);\">Content</div>\n  </a-scrollbar>\n</template>\n\n<script>\nexport default {\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/scrollbar/index.ts",
    "content": "import type { App } from 'vue';\nimport type { ArcoOptions } from '../_utils/types';\nimport { setGlobalConfig, getComponentPrefix } from '../_utils/global-config';\nimport _Scrollbar from './scrollbar.vue';\n\nconst Scrollbar = Object.assign(_Scrollbar, {\n  install: (app: App, options?: ArcoOptions) => {\n    setGlobalConfig(app, options);\n    const componentPrefix = getComponentPrefix(options);\n\n    app.component(componentPrefix + _Scrollbar.name, _Scrollbar);\n  },\n});\n\nexport type ScrollbarInstance = InstanceType<typeof _Scrollbar>;\nexport type { ScrollbarProps } from './interface';\n\nexport default Scrollbar;\n"
  },
  {
    "path": "packages/web-vue/components/scrollbar/interface.ts",
    "content": "import { StyleValue } from 'vue';\n\nexport interface ThumbData {\n  ratio: number;\n  thumbSize: number;\n  max: number;\n}\n\nexport interface ThumbMap {\n  size: 'width' | 'height';\n  direction: 'left' | 'top';\n  offset: 'offsetWidth' | 'offsetHeight';\n  client: 'clientX' | 'clientY';\n}\n\nexport interface ScrollbarProps {\n  type: 'track' | 'embed';\n  outerClass: any;\n  outerStyle: any;\n}\n"
  },
  {
    "path": "packages/web-vue/components/scrollbar/scrollbar.vue",
    "content": "<template>\n  <div :class=\"cls\" :style=\"style\">\n    <ResizeObserver @resize=\"handleResize\">\n      <div\n        ref=\"containerRef\"\n        :class=\"`${prefixCls}-container`\"\n        v-bind=\"$attrs\"\n        @scroll=\"handleScroll\"\n      >\n        <ResizeObserver @resize=\"handleResize\">\n          <slot />\n        </ResizeObserver>\n      </div>\n    </ResizeObserver>\n    <thumb\n      v-if=\"!hide && hasHorizontalScrollbar\"\n      ref=\"horizontalThumbRef\"\n      :data=\"horizontalData\"\n      direction=\"horizontal\"\n      :both=\"isBoth\"\n      @scroll=\"handleHorizontalScroll\"\n    />\n    <thumb\n      v-if=\"!hide && hasVerticalScrollbar\"\n      ref=\"verticalThumbRef\"\n      :data=\"verticalData\"\n      direction=\"vertical\"\n      :both=\"isBoth\"\n      @scroll=\"handleVerticalScroll\"\n    />\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport {\n  computed,\n  CSSProperties,\n  defineComponent,\n  onMounted,\n  PropType,\n  ref,\n  StyleValue,\n} from 'vue';\nimport { ThumbData } from './interface';\nimport ResizeObserver from '../_components/resize-observer-v2';\nimport Thumb from './thumb.vue';\nimport { getPrefixCls } from '../_utils/global-config';\nimport { isNumber, isObject } from '../_utils/is';\n\nconst THUMB_MIN_SIZE = 20;\nconst TRACK_SIZE = 15;\n\nexport default defineComponent({\n  name: 'Scrollbar',\n  components: {\n    ResizeObserver,\n    Thumb,\n  },\n  inheritAttrs: false,\n  props: {\n    /**\n     * @zh 类型\n     * @en Type\n     */\n    type: {\n      type: String as PropType<'track' | 'embed'>,\n      default: 'embed',\n    },\n    /**\n     * @zh 外层的类名\n     * @en Outer class\n     */\n    outerClass: [String, Object, Array],\n    /**\n     * @zh 外层的样式\n     * @en Outer style\n     */\n    outerStyle: {\n      type: [String, Object, Array] as PropType<StyleValue>,\n    },\n    // private\n    hide: {\n      type: Boolean,\n      default: false,\n    },\n    disableHorizontal: {\n      type: Boolean,\n      default: false,\n    },\n    disableVertical: {\n      type: Boolean,\n      default: false,\n    },\n  },\n  emits: {\n    /**\n     * @zh 滚动时触发\n     * @en Triggered when scroll\n     */\n    scroll: (ev: Event) => true,\n  },\n  setup(props, { emit }) {\n    const prefixCls = getPrefixCls('scrollbar');\n\n    const containerRef = ref<HTMLElement>();\n    const horizontalData = ref<ThumbData>();\n    const verticalData = ref<ThumbData>();\n    const horizontalThumbRef = ref();\n    const verticalThumbRef = ref();\n    const _hasHorizontalScrollbar = ref(false);\n    const _hasVerticalScrollbar = ref(false);\n    const hasHorizontalScrollbar = computed(\n      () => _hasHorizontalScrollbar.value && !props.disableHorizontal\n    );\n    const hasVerticalScrollbar = computed(\n      () => _hasVerticalScrollbar.value && !props.disableVertical\n    );\n    const isBoth = ref(false);\n\n    const getContainerSize = () => {\n      if (containerRef.value) {\n        const {\n          clientWidth,\n          clientHeight,\n          offsetWidth,\n          offsetHeight,\n          scrollWidth,\n          scrollHeight,\n          scrollTop,\n          scrollLeft,\n        } = containerRef.value;\n        _hasHorizontalScrollbar.value = scrollWidth > clientWidth;\n        _hasVerticalScrollbar.value = scrollHeight > clientHeight;\n        isBoth.value =\n          hasHorizontalScrollbar.value && hasVerticalScrollbar.value;\n        const horizontalTrackWidth =\n          props.type === 'embed' && isBoth.value\n            ? offsetWidth - TRACK_SIZE\n            : offsetWidth;\n        const verticalTrackHeight =\n          props.type === 'embed' && isBoth.value\n            ? offsetHeight - TRACK_SIZE\n            : offsetHeight;\n\n        const horizontalThumbWidth = Math.round(\n          horizontalTrackWidth /\n            Math.min(\n              scrollWidth / clientWidth,\n              horizontalTrackWidth / THUMB_MIN_SIZE\n            )\n        );\n        const maxHorizontalOffset = horizontalTrackWidth - horizontalThumbWidth;\n        const horizontalRatio =\n          (scrollWidth - clientWidth) / maxHorizontalOffset;\n        const verticalThumbHeight = Math.round(\n          verticalTrackHeight /\n            Math.min(\n              scrollHeight / clientHeight,\n              verticalTrackHeight / THUMB_MIN_SIZE\n            )\n        );\n        const maxVerticalOffset = verticalTrackHeight - verticalThumbHeight;\n        const verticalRatio = (scrollHeight - clientHeight) / maxVerticalOffset;\n\n        horizontalData.value = {\n          ratio: horizontalRatio,\n          thumbSize: horizontalThumbWidth,\n          max: maxHorizontalOffset,\n        };\n        verticalData.value = {\n          ratio: verticalRatio,\n          thumbSize: verticalThumbHeight,\n          max: maxVerticalOffset,\n        };\n        if (scrollTop > 0) {\n          const verticalOffset = Math.round(\n            scrollTop / (verticalData.value?.ratio ?? 1)\n          );\n          verticalThumbRef.value?.setOffset(verticalOffset);\n        }\n        if (scrollLeft > 0) {\n          const horizontalOffset = Math.round(\n            scrollLeft / (verticalData.value?.ratio ?? 1)\n          );\n          horizontalThumbRef.value?.setOffset(horizontalOffset);\n        }\n      }\n    };\n\n    onMounted(() => {\n      getContainerSize();\n    });\n\n    const handleResize = () => {\n      getContainerSize();\n    };\n\n    const handleScroll = (ev: Event) => {\n      if (containerRef.value) {\n        if (hasHorizontalScrollbar.value && !props.disableHorizontal) {\n          const horizontalOffset = Math.round(\n            containerRef.value.scrollLeft / (horizontalData.value?.ratio ?? 1)\n          );\n          horizontalThumbRef.value?.setOffset(horizontalOffset);\n        }\n        if (hasVerticalScrollbar.value && !props.disableVertical) {\n          const verticalOffset = Math.round(\n            containerRef.value.scrollTop / (verticalData.value?.ratio ?? 1)\n          );\n          verticalThumbRef.value?.setOffset(verticalOffset);\n        }\n      }\n      emit('scroll', ev);\n    };\n\n    const handleHorizontalScroll = (offset: number) => {\n      if (containerRef.value) {\n        containerRef.value.scrollTo({\n          left: offset * (horizontalData.value?.ratio ?? 1),\n        });\n      }\n    };\n\n    const handleVerticalScroll = (offset: number) => {\n      if (containerRef.value) {\n        containerRef.value.scrollTo({\n          top: offset * (verticalData.value?.ratio ?? 1),\n        });\n      }\n    };\n\n    const style = computed(() => {\n      const style: CSSProperties = {};\n      if (props.type === 'track') {\n        if (hasHorizontalScrollbar.value) {\n          style.paddingBottom = `${TRACK_SIZE}px`;\n        }\n        if (hasVerticalScrollbar.value) {\n          style.paddingRight = `${TRACK_SIZE}px`;\n        }\n      }\n      return [style, props.outerStyle];\n    });\n\n    const cls = computed(() => [\n      `${prefixCls}`,\n      `${prefixCls}-type-${props.type}`,\n      {\n        [`${prefixCls}-both`]: isBoth.value,\n      },\n      props.outerClass,\n    ]);\n\n    return {\n      prefixCls,\n      cls,\n      style,\n      containerRef,\n      horizontalThumbRef,\n      verticalThumbRef,\n      horizontalData,\n      verticalData,\n      isBoth,\n      hasHorizontalScrollbar,\n      hasVerticalScrollbar,\n      handleResize,\n      handleScroll,\n      handleHorizontalScroll,\n      handleVerticalScroll,\n    };\n  },\n  methods: {\n    /**\n     * @zh 滚动\n     * @en scrollTo\n     * @public\n     * @param {number | {left?: number;top?: number}} options\n     * @param {number} y\n     */\n    scrollTo(\n      options?:\n        | number\n        | {\n            left?: number;\n            top?: number;\n          },\n      y?: number\n    ) {\n      if (isObject(options)) {\n        (this.$refs.containerRef as HTMLElement)?.scrollTo(options);\n      } else if (options || y) {\n        (this.$refs.containerRef as HTMLElement)?.scrollTo(\n          options as number,\n          y as number\n        );\n      }\n    },\n    /**\n     * @zh 纵向滚动\n     * @en scroll vertically\n     * @public\n     * @param {number} top\n     * @version 2.40.0\n     */\n    scrollTop(top: number) {\n      (this.$refs.containerRef as HTMLElement)?.scrollTo({\n        top,\n      });\n    },\n    /**\n     * @zh 横向滚动\n     * @en scroll horizontal\n     * @public\n     * @param {number} left\n     * @version 2.40.0\n     */\n    scrollLeft(left: number) {\n      (this.$refs.containerRef as HTMLElement)?.scrollTo({\n        left,\n      });\n    },\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/scrollbar/style/index.less",
    "content": "@import './token.less';\n\n@scroll-prefix-cls: ~'@{prefix}-scrollbar';\n\n.@{scroll-prefix-cls} {\n  position: relative;\n\n  &-container {\n    position: relative;\n    scrollbar-width: none;\n\n    &::-webkit-scrollbar {\n      display: none;\n    }\n  }\n\n  &-track {\n    position: absolute;\n    z-index: 100;\n\n    &-direction-horizontal {\n      bottom: 0;\n      left: 0;\n      box-sizing: border-box;\n      width: 100%;\n      height: @scrollbar-track-size;\n    }\n\n    &-direction-vertical {\n      top: 0;\n      right: 0;\n      box-sizing: border-box;\n      width: @scrollbar-track-size;\n      height: 100%;\n    }\n  }\n\n  &-thumb {\n    position: absolute;\n    display: block;\n    box-sizing: border-box;\n\n    &-bar {\n      width: 100%;\n      height: 100%;\n      background-color: @scrollbar-thumb-bar-bg_color;\n      border-radius: @scrollbar-thumb-bar-border_radius;\n    }\n\n    &:hover,\n    &-dragging {\n      .@{scroll-prefix-cls}-thumb-bar {\n        background-color: @scrollbar-thumb-bar-bg_color_hover;\n      }\n    }\n\n    &-direction-horizontal {\n      .@{scroll-prefix-cls}-thumb-bar {\n        height: @scrollbar-thumb-bar-size;\n        margin: ((@scrollbar-track-size - @scrollbar-thumb-bar-size)/2) 0;\n      }\n    }\n\n    &-direction-vertical {\n      .@{scroll-prefix-cls}-thumb-bar {\n        width: @scrollbar-thumb-bar-size;\n        margin: 0 ((@scrollbar-track-size - @scrollbar-thumb-bar-size)/2);\n      }\n    }\n  }\n\n  &&-type-embed {\n    .@{scroll-prefix-cls}-thumb {\n      opacity: 0;\n\n      &-dragging {\n        opacity: 0.8;\n      }\n\n      transition: opacity ease 200ms;\n    }\n\n    &:hover {\n      .@{scroll-prefix-cls}-thumb {\n        opacity: 0.8;\n      }\n    }\n  }\n\n  &&-type-track {\n    .@{scroll-prefix-cls}-track {\n      background-color: @scrollbar-track-bg_color;\n\n      &-direction-horizontal {\n        border-top: @scrollbar-track-border_size solid\n          @scrollbar-track-border_color;\n        border-bottom: @scrollbar-track-border_size solid\n          @scrollbar-track-border_color;\n      }\n\n      &-direction-vertical {\n        border-right: @scrollbar-track-border_size solid\n          @scrollbar-track-border_color;\n        border-left: @scrollbar-track-border_size solid\n          @scrollbar-track-border_color;\n      }\n    }\n\n    .@{scroll-prefix-cls}-thumb {\n      &-direction-horizontal {\n        margin: -@scrollbar-track-border_size 0;\n      }\n\n      &-direction-vertical {\n        margin: 0 -@scrollbar-track-border_size;\n      }\n    }\n\n    &.@{scroll-prefix-cls}-both {\n      .@{scroll-prefix-cls}-track-direction-vertical::after {\n        position: absolute;\n        right: -@scrollbar-track-border_size;\n        bottom: 0;\n        display: block;\n        box-sizing: border-box;\n        width: @scrollbar-track-size;\n        height: @scrollbar-track-size;\n        background-color: @scrollbar-track-bg_color;\n        border-right: @scrollbar-track-border_size solid\n          @scrollbar-track-border_color;\n        border-bottom: @scrollbar-track-border_size solid\n          @scrollbar-track-border_color;\n        content: '';\n      }\n    }\n  }\n}\n"
  },
  {
    "path": "packages/web-vue/components/scrollbar/style/index.ts",
    "content": "import '../../style/index.less';\nimport './index.less';\n"
  },
  {
    "path": "packages/web-vue/components/scrollbar/style/token.less",
    "content": "@import '../../style/theme/index.less';\n\n@scrollbar-track-size: 15px;\n@scrollbar-track-border_size: @border-1;\n@scrollbar-track-border_color: var(~'@{arco-cssvars-prefix}-color-neutral-3');\n@scrollbar-track-bg_color: var(~'@{arco-cssvars-prefix}-color-neutral-1');\n@scrollbar-thumb-bar-size: 9px;\n@scrollbar-thumb-bar-border_radius: 6px;\n@scrollbar-thumb-bar-bg_color: var(~'@{arco-cssvars-prefix}-color-neutral-4');\n@scrollbar-thumb-bar-bg_color_hover: var(\n  ~'@{arco-cssvars-prefix}-color-neutral-6'\n);\n"
  },
  {
    "path": "packages/web-vue/components/scrollbar/thumb.vue",
    "content": "<template>\n  <transition>\n    <div\n      ref=\"trackRef\"\n      :class=\"[\n        `${prefixCls}-track`,\n        `${prefixCls}-track-direction-${direction}`,\n      ]\"\n      @mousedown.self=\"handleTrackClick\"\n    >\n      <div\n        ref=\"thumbRef\"\n        :class=\"thumbCls\"\n        :style=\"thumbStyle\"\n        @mousedown=\"handleThumbMouseDown\"\n      >\n        <div :class=\"`${prefixCls}-thumb-bar`\" />\n      </div>\n    </div>\n  </transition>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, PropType, ref, watch } from 'vue';\nimport { off, on } from '../_utils/dom';\nimport { ThumbData, ThumbMap } from './interface';\nimport { getPrefixCls } from '../_utils/global-config';\nimport { Direction } from '../_utils/constant';\n\nexport default defineComponent({\n  name: 'Thumb',\n  props: {\n    data: {\n      type: Object as PropType<ThumbData>,\n    },\n    direction: {\n      type: String as PropType<Direction>,\n      default: 'horizontal',\n    },\n    alwaysShow: {\n      type: Boolean,\n      default: false,\n    },\n    both: {\n      type: Boolean,\n      default: false,\n    },\n  },\n  emits: ['scroll'],\n  setup(props, { emit }) {\n    const prefixCls = getPrefixCls('scrollbar');\n\n    const visible = ref(false);\n    const trackRef = ref<HTMLElement>();\n    const thumbRef = ref<HTMLElement>();\n\n    const thumbMap = computed<ThumbMap>(() => {\n      if (props.direction === 'horizontal') {\n        return {\n          size: 'width',\n          direction: 'left',\n          offset: 'offsetWidth',\n          client: 'clientX',\n        };\n      }\n      return {\n        size: 'height',\n        direction: 'top',\n        offset: 'offsetHeight',\n        client: 'clientY',\n      };\n    });\n\n    const offset = ref(0);\n\n    const isDragging = ref(false);\n    const mouseOffset = ref(0);\n\n    const thumbStyle = computed(() => {\n      return {\n        [thumbMap.value.size]: `${props.data?.thumbSize ?? 0}px`,\n        [thumbMap.value.direction]: `${offset.value}px`,\n      };\n    });\n\n    const handleThumbMouseDown = (ev: MouseEvent) => {\n      ev.preventDefault();\n\n      if (thumbRef.value) {\n        mouseOffset.value =\n          ev[thumbMap.value.client] -\n          thumbRef.value.getBoundingClientRect()[thumbMap.value.direction];\n        isDragging.value = true;\n        on(window, 'mousemove', handleMouseMove);\n        on(window, 'mouseup', handleMouseUp);\n        on(window, 'contextmenu', handleMouseUp);\n      }\n    };\n\n    const handleTrackClick = (ev: MouseEvent) => {\n      ev.preventDefault();\n\n      if (thumbRef.value) {\n        const _offset = getLegalOffset(\n          ev[thumbMap.value.client] >\n            thumbRef.value.getBoundingClientRect()[thumbMap.value.direction]\n            ? offset.value + (props.data?.thumbSize ?? 0)\n            : offset.value - (props.data?.thumbSize ?? 0)\n        );\n        if (_offset !== offset.value) {\n          offset.value = _offset;\n          emit('scroll', _offset);\n        }\n      }\n    };\n\n    const getLegalOffset = (offset: number) => {\n      if (offset < 0) {\n        return 0;\n      }\n      if (props.data && offset > props.data.max) {\n        return props.data.max;\n      }\n      return offset;\n    };\n\n    const handleMouseMove = (ev: MouseEvent) => {\n      if (trackRef.value && thumbRef.value) {\n        const _offset = getLegalOffset(\n          ev[thumbMap.value.client] -\n            trackRef.value.getBoundingClientRect()[thumbMap.value.direction] -\n            mouseOffset.value\n        );\n        if (_offset !== offset.value) {\n          offset.value = _offset;\n          emit('scroll', _offset);\n        }\n      }\n    };\n\n    const handleMouseUp = () => {\n      isDragging.value = false;\n      off(window, 'mousemove', handleMouseMove);\n      off(window, 'mouseup', handleMouseUp);\n    };\n\n    const setOffset = (_offset: number) => {\n      if (!isDragging.value) {\n        _offset = getLegalOffset(_offset);\n        if (_offset !== offset.value) {\n          offset.value = _offset;\n        }\n      }\n    };\n\n    const thumbCls = computed(() => [\n      `${prefixCls}-thumb`,\n      `${prefixCls}-thumb-direction-${props.direction}`,\n      {\n        [`${prefixCls}-thumb-dragging`]: isDragging.value,\n      },\n    ]);\n\n    return {\n      visible,\n      trackRef,\n      thumbRef,\n      prefixCls,\n      thumbCls,\n      thumbStyle,\n      handleThumbMouseDown,\n      handleTrackClick,\n      setOffset,\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/select/CHANGELOG.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.56.2\n\n`2024-09-13`\n\n### 🐛 BugFix\n\n- fix(switch): loading state can't be controlled with truthy initial state ([#3285](https://github.com/arco-design/arco-design-vue/pull/3285))\n\n\n## 2.56.1\n\n`2024-08-22`\n\n### 🆕 Feature\n\n- add `tagNowrap` prop ([#3270](https://github.com/arco-design/arco-design-vue/pull/3270))\n\n\n## 2.54.2\n\n`2024-01-11`\n\n### 💎 Enhancement\n\n- enhance selected state style for options ([#2895](https://github.com/arco-design/arco-design-vue/pull/2895))\n\n\n## 2.54.1\n\n`2023-12-28`\n\n### 🐛 BugFix\n\n- Fix `defaultPopupVisible` failure problem ([#2881](https://github.com/arco-design/arco-design-vue/pull/2881))\n\n\n## 2.51.0\n\n`2023-09-01`\n\n### 🆕 Feature\n\n- support boolean type ([#2661](https://github.com/arco-design/arco-design-vue/pull/2661))\n\n\n## 2.47.1\n\n`2023-06-09`\n\n### 🐛 BugFix\n\n- Fix mouse cursor positioning issue in search mode ([#2487](https://github.com/arco-design/arco-design-vue/pull/2487))\n\n\n## 2.47.0\n\n`2023-06-02`\n\n### 🆕 Feature\n\n- the header and footer are displayed in the empty state of select ([#2429](https://github.com/arco-design/arco-design-vue/pull/2429))\n\n\n## 2.46.0\n\n`2023-05-12`\n\n### 💎 Enhancement\n\n- Add a title hint to the selection box ([#2412](https://github.com/arco-design/arco-design-vue/pull/2412))\n\n\n## 2.45.3\n\n`2023-04-28`\n\n### 🐛 BugFix\n\n- Fix the problem that the Enter key in the input method state will trigger the selection ([#2378](https://github.com/arco-design/arco-design-vue/pull/2378))\n\n\n## 2.45.2\n\n`2023-04-21`\n\n### 💅 Style\n\n- Fix the inconsistent line-height and height of select-view-input ([#2346](https://github.com/arco-design/arco-design-vue/pull/2346))\n\n\n## 2.44.6\n\n`2023-03-31`\n\n### 🐛 BugFix\n\n- Fix the problem that setting modelValue to undefined is invalid ([#2285](https://github.com/arco-design/arco-design-vue/pull/2285))\n\n\n## 2.44.3\n\n`2023-03-24`\n\n### 🐛 BugFix\n\n- fix blank dropdown caused by dynamic slot options ([#2265](https://github.com/arco-design/arco-design-vue/pull/2265))\n- Automatic creation of empty string entries is not allowed. Dropdown option with empty string, set value to `undefined` when empty ([#2257](https://github.com/arco-design/arco-design-vue/pull/2257))\n\n\n## 2.44.2\n\n`2023-03-17`\n\n### 🐛 BugFix\n\n- drop-down option value supports empty string ([#2190](https://github.com/arco-design/arco-design-vue/pull/2190))\n\n\n## 2.43.0\n\n`2023-02-10`\n\n### 🆕 Feature\n\n- Added `defaultActiveFirstOption` property ([#2107](https://github.com/arco-design/arco-design-vue/pull/2107))\n- add header slot ([#2099](https://github.com/arco-design/arco-design-vue/pull/2099))\n\n\n## 2.41.0\n\n`2022-12-30`\n\n### 💅 Style\n\n- Unify the suffix icon of `select` component for single selection and multi-selection as `arrow-icon`. ([#2005](https://github.com/arco-design/arco-design-vue/pull/2005))\n\n\n## 2.38.0\n\n`2022-10-28`\n\n### 🐛 BugFix\n\n- Fix formatLabel error when there is no data ([#1797](https://github.com/arco-design/arco-design-vue/pull/1797))\n\n\n## 2.38.0-beta.1\n\n`2022-10-14`\n\n### 💎 Enhancement\n\n- Increase the cache of selected items, and optimize the label display problem during remote search ([#1731](https://github.com/arco-design/arco-design-vue/pull/1731))\n\n\n## 2.37.4\n\n`2022-09-30`\n\n### 💅 Style\n\n- Fix the problem that the custom label color is displayed incorrectly ([#1703](https://github.com/arco-design/arco-design-vue/pull/1703))\n\n\n## 2.37.2\n\n`2022-09-21`\n\n### 🐛 BugFix\n\n- Fixed the problem that the drop-down menu did not follow the scrolling in keyboard interaction ([#1655](https://github.com/arco-design/arco-design-vue/pull/1655))\n- Fix the problem of error reporting in some cases of built-in virtual scroll bar ([#1655](https://github.com/arco-design/arco-design-vue/pull/1655))\n\n\n## 2.36.1\n\n`2022-09-09`\n\n### 🐛 BugFix\n\n- Fix option slot parameter problem ([#1607](https://github.com/arco-design/arco-design-vue/pull/1607))\n\n\n## 2.32.1\n\n`2022-07-01`\n\n### 🐛 BugFix\n\n- Fixed click-to-expand issue in search mode in Firefox ([#1371](https://github.com/arco-design/arco-design-vue/pull/1371))\n\n\n## 2.30.0\n\n`2022-06-10`\n\n### 🐛 BugFix\n\n- Fixed remote search and fieldNames used at the same time, no options displayed ([#1271](https://github.com/arco-design/arco-design-vue/pull/1271))\n\n### 💅 Style\n\n- Fixed the issue that the selection box collapsed when the option label was empty ([#1274](https://github.com/arco-design/arco-design-vue/pull/1274))\n\n\n## 2.29.0\n\n`2022-05-27`\n\n### 🐛 BugFix\n\n- Fix the problem of controlled invalidation of inputValue ([#1204](https://github.com/arco-design/arco-design-vue/pull/1204))\n\n\n## 2.27.1\n\n`2022-05-16`\n\n### 🐛 BugFix\n\n- Fixed an issue where grouping options could not be selected when using the options property ([#1141](https://github.com/arco-design/arco-design-vue/pull/1141))\n\n\n## 2.27.0\n\n`2022-05-13`\n\n### 🐛 BugFix\n\n- Fix the problem that `render` and `tagProps` in options property do not take effect ([#1114](https://github.com/arco-design/arco-design-vue/pull/1114))\n\n### 💅 Style\n\n- Fix the problem that the mouse pointer is wrong in the disabled state when the search is turned on ([#1114](https://github.com/arco-design/arco-design-vue/pull/1114))\n\n\n## 2.24.0\n\n`2022-04-15`\n\n### 🆎 TypeScript\n\n- `Option, OptionData, GroupOption` interface names are changed to `SelectOption, SelectOptionData, SelectOptionGroup` ([#983](https://github.com/arco-design/arco-design-vue/pull/983))\n\n\n## 2.23.0\n\n`2022-04-08`\n\n### 🆕 Feature\n\n- add trigger slot ([#952](https://github.com/arco-design/arco-design-vue/pull/952))\n\n\n## 2.22.0\n\n`2022-04-01`\n\n### 💎 Enhancement\n\n- Enter event can no longer be triggered in loading state ([#911](https://github.com/arco-design/arco-design-vue/pull/911))\n\n### 🆕 Feature\n\n- Added `field-names` attribute to allow custom fields ([#911](https://github.com/arco-design/arco-design-vue/pull/911))\n\n### 🐛 BugFix\n\n- Fixed duplicate options in `allow-create` mode ([#911](https://github.com/arco-design/arco-design-vue/pull/911))\n\n\n## 2.21.2\n\n`2022-03-29`\n\n### 🐛 BugFix\n\n- Fix the problem that `fallback-option` attribute setting false is invalid ([#893](https://github.com/arco-design/arco-design-vue/pull/893))\n- Fixed the problem that the selected label in the multi-selection mode does not display delete by default ([#886](https://github.com/arco-design/arco-design-vue/pull/886))\n\n\n## 2.20.1\n\n`2022-03-21`\n\n### 💅 Style\n\n- Fixed vertical centering of option #icon slots ([#854](https://github.com/arco-design/arco-design-vue/pull/854))\n- Fix the problem that the omission is not displayed after the option exceeds the width ([#854](https://github.com/arco-design/arco-design-vue/pull/854))\n\n\n## 2.20.0\n\n`2022-03-18`\n\n### 🐛 BugFix\n\n- Fixed the problem that the search function failed when the virtual list was opened ([#841](https://github.com/arco-design/arco-design-vue/pull/841))\n- Fix the problem that the `Enter` key on the small keyboard cannot be selected ([#841](https://github.com/arco-design/arco-design-vue/pull/841))\n\n\n## 2.18.0\n\n`2022-03-04`\n\n### 💎 Enhancement\n\n- Select box display using flex layout ([#778](https://github.com/arco-design/arco-design-vue/pull/778))\n- trigger-props properties can override default properties ([#778](https://github.com/arco-design/arco-design-vue/pull/778))\n\n### 🐛 BugFix\n\n- Fix the problem that the label attribute is invalid ([#777](https://github.com/arco-design/arco-design-vue/pull/777))\n- Fix the problem that the properties of option are not updated synchronously ([#777](https://github.com/arco-design/arco-design-vue/pull/777))\n\n\n## 2.18.0-beta.2\n\n`2022-02-25`\n\n### 🆕 Feature\n\n- Added `search-delay` property and defaulted to `500ms` ([#728](https://github.com/arco-design/arco-design-vue/pull/728))\n\n\n## 2.18.0-beta.1\n\n`2022-02-18`\n\n### ⚠️ Important Attention\n\n- Component uses context refactoring to allow encapsulation of Option components ([#688](https://github.com/arco-design/arco-design-vue/pull/688))\n- Added `valueKey` attribute, option value supports object form ([#688](https://github.com/arco-design/arco-design-vue/pull/688))\n- The class name of the <option> component is changed from arco-dropdown-option to arco-select-option, and flex is used to center the layout vertically ([#688](https://github.com/arco-design/arco-design-vue/pull/688))\n\n\n## 2.16.0\n\n`2022-01-21`\n\n### 🆕 Feature\n\n- Added custom icon slot ([#634](https://github.com/arco-design/arco-design-vue/pull/634))\n\n\n## 2.15.0\n\n`2022-01-14`\n\n### 💎 Enhancement\n\n- Optimize loading status display ([#557](https://github.com/arco-design/arco-design-vue/pull/557))\n\n\n## 2.14.3\n\n`2022-01-12`\n\n### 🐛 BugFix\n\n- missing arguments when calling scrollTo ([#543](https://github.com/arco-design/arco-design-vue/pull/543))\n\n\n## 2.14.2\n\n`2022-01-10`\n\n### 🐛 BugFix\n\n- Fix on-demand loading without imported styles ([#536](https://github.com/arco-design/arco-design-vue/pull/536))\n\n\n## 2.13.0\n\n`2021-12-31`\n\n### 🐛 BugFix\n\n- Fix the problem of Chinese input method when searching ([#481](https://github.com/arco-design/arco-design-vue/pull/481))\n- Fix the incomplete display of placeholder in `drawer` ([#481](https://github.com/arco-design/arco-design-vue/pull/481))\n\n\n## 2.11.1\n\n`2021-12-20`\n\n### 🐛 BugFix\n\n- Fix the problem that Group is unavailable when using JSX ([#427](https://github.com/arco-design/arco-design-vue/pull/427))\n\n\n## 2.10.1\n\n`2021-12-14`\n\n### 🐛 BugFix\n\n- Fix the problem of disabled in the options attribute ([#385](https://github.com/arco-design/arco-design-vue/pull/385))\n- Fix the problem that the bordered property does not take effect, add an example ([#385](https://github.com/arco-design/arco-design-vue/pull/385))\n\n\n## 2.10.0\n\n`2021-12-10`\n\n### 💎 Enhancement\n\n- When the input box is editable, clicking will not close the drop-down menu ([#348](https://github.com/arco-design/arco-design-vue/pull/348))\n\n### 🆕 Feature\n\n- Add fallback-option and show-extra-options attributes ([#347](https://github.com/arco-design/arco-design-vue/pull/347))\n\n### 🐛 BugFix\n\n- Fix the problem of warnings when components are used in JSX, and variables cannot be used in slots ([#347](https://github.com/arco-design/arco-design-vue/pull/347))\n- Fix the problem that the drop-down menu cannot pop up when the icon is clicked for the first time in the multi-select input box ([#347](https://github.com/arco-design/arco-design-vue/pull/347))\n\n\n## 2.8.0\n\n`2021-12-01`\n\n### 🆕 Feature\n\n- Add support for `tagProps` ([#307](https://github.com/arco-design/arco-design-vue/pull/307))\n\n\n## 2.6.0\n\n`2021-11-19`\n\n### 🆕 Feature\n\n- Add `footer` slot ([#201](https://github.com/arco-design/arco-design-vue/pull/201))\n- Add `trigger-props` property ([#197](https://github.com/arco-design/arco-design-vue/pull/197))\n\n### 🐛 BugFix\n\n- Fix the problem that the `data` parameter is not sent from the `option` slot ([#200](https://github.com/arco-design/arco-design-vue/pull/200))\n\n\n## 2.5.0\n\n`2021-11-18`\n\n### ⚠️ Important Attention\n\n- Move the custom rendering of `options.label` added in 2.4.0 to `options.render` ([#183](https://github.com/arco-design/arco-design-vue/pull/183))\n- `<option>` Add label prop support ([#183](https://github.com/arco-design/arco-design-vue/pull/183))\n\n\n## 2.4.0\n\n`2021-11-17`\n\n### 🆕 Feature\n\n- Add `option` slot ([#170](https://github.com/arco-design/arco-design-vue/pull/170))\n- `options.label` supports custom rendering ([#170](https://github.com/arco-design/arco-design-vue/pull/170))\n\n\n## 2.1.0\n\n`2021-11-05`\n\n### 🐛 BugFix\n\n- Fix the issue of `#empty` slot loss ([#96](https://github.com/arco-design/arco-design-vue/pull/96))\n\n\n## 2.0.3\n\n`2021-10-29`\n\n### 🐛 BugFix\n\n- Fix the clear button is not displayed in multi-select mode ([#38](https://github.com/arco-design/arco-design-vue/pull/38))\n\n"
  },
  {
    "path": "packages/web-vue/components/select/CHANGELOG.zh-CN.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.56.2\n\n`2024-09-13`\n\n### 🐛 问题修复\n\n- fix(switch): 修复当加载状态被真值初始化后无法受控 ([#3285](https://github.com/arco-design/arco-design-vue/pull/3285))\n\n\n## 2.56.1\n\n`2024-08-22`\n\n### 🆕 新增功能\n\n- 增加 `tagNowrap` 选项 ([#3270](https://github.com/arco-design/arco-design-vue/pull/3270))\n\n\n## 2.54.2\n\n`2024-01-11`\n\n### 💎 功能优化\n\n- 下拉选择器添加选中效果 ([#2895](https://github.com/arco-design/arco-design-vue/pull/2895))\n\n\n## 2.54.1\n\n`2023-12-28`\n\n### 🐛 问题修复\n\n- 修复 `defaultPopupVisible` 失效的问题 ([#2881](https://github.com/arco-design/arco-design-vue/pull/2881))\n\n\n## 2.51.0\n\n`2023-09-01`\n\n### 🆕 新增功能\n\n- 支持`boolean` 类型 ([#2661](https://github.com/arco-design/arco-design-vue/pull/2661))\n\n\n## 2.47.1\n\n`2023-06-09`\n\n### 🐛 问题修复\n\n- 修复搜索模式下鼠标光标定位问题 ([#2487](https://github.com/arco-design/arco-design-vue/pull/2487))\n\n\n## 2.47.0\n\n`2023-06-02`\n\n### 🆕 新增功能\n\n- 空状态下可以显示 header 和 footer ([#2429](https://github.com/arco-design/arco-design-vue/pull/2429))\n\n\n## 2.46.0\n\n`2023-05-12`\n\n### 💎 功能优化\n\n- 选择框增加 title 提示 ([#2412](https://github.com/arco-design/arco-design-vue/pull/2412))\n\n\n## 2.45.3\n\n`2023-04-28`\n\n### 🐛 问题修复\n\n- 修复输入法状态下 Enter 键会触发选择的问题 ([#2378](https://github.com/arco-design/arco-design-vue/pull/2378))\n\n\n## 2.45.2\n\n`2023-04-21`\n\n### 💅 样式更新\n\n- 修复 select-view-input 的 line-height 和 height 不一致 ([#2346](https://github.com/arco-design/arco-design-vue/pull/2346))\n\n\n## 2.44.6\n\n`2023-03-31`\n\n### 🐛 问题修复\n\n- 修复设置 modelValue 为 undefined 失效的问题 ([#2285](https://github.com/arco-design/arco-design-vue/pull/2285))\n\n\n## 2.44.3\n\n`2023-03-24`\n\n### 🐛 问题修复\n\n- 修复动态 slot options 导致 dropdown 为空的问题 ([#2265](https://github.com/arco-design/arco-design-vue/pull/2265))\n- 不允许自动创建空字符串条目。含有空字符串的下拉选项，清空时将值设置为 `undefined` ([#2257](https://github.com/arco-design/arco-design-vue/pull/2257))\n\n\n## 2.44.2\n\n`2023-03-17`\n\n### 🐛 问题修复\n\n- 下拉选项值支持空字符串 ([#2190](https://github.com/arco-design/arco-design-vue/pull/2190))\n\n\n## 2.43.0\n\n`2023-02-10`\n\n### 🆕 新增功能\n\n- 新增 `defaultActiveFirstOption` 属性 ([#2107](https://github.com/arco-design/arco-design-vue/pull/2107))\n- 增加 header 插槽 ([#2099](https://github.com/arco-design/arco-design-vue/pull/2099))\n\n\n## 2.41.0\n\n`2022-12-30`\n\n### 💅 样式更新\n\n- 统一 `select` 组件单选和多选时后缀图标为 `arrow-icon`。 ([#2005](https://github.com/arco-design/arco-design-vue/pull/2005))\n\n\n## 2.38.0\n\n`2022-10-28`\n\n### 🐛 问题修复\n\n- 修复 formatLabel 在无数据时报错的问题 ([#1797](https://github.com/arco-design/arco-design-vue/pull/1797))\n\n\n## 2.38.0-beta.1\n\n`2022-10-14`\n\n### 💎 功能优化\n\n- 增加已选择项的缓存，优化在远程搜索时的 label 显示问题 ([#1731](https://github.com/arco-design/arco-design-vue/pull/1731))\n\n\n## 2.37.4\n\n`2022-09-30`\n\n### 💅 样式更新\n\n- 修复自定义标签颜色显示错误的问题 ([#1703](https://github.com/arco-design/arco-design-vue/pull/1703))\n\n\n## 2.37.2\n\n`2022-09-21`\n\n### 🐛 问题修复\n\n- 修复键盘交互中下拉菜单没有跟随滚动的问题 ([#1655](https://github.com/arco-design/arco-design-vue/pull/1655))\n- 修复内置虚拟滚动条部分情况下报错的问题 ([#1655](https://github.com/arco-design/arco-design-vue/pull/1655))\n\n\n## 2.36.1\n\n`2022-09-09`\n\n### 🐛 问题修复\n\n- 修复 option 插槽参数错误的问题 ([#1607](https://github.com/arco-design/arco-design-vue/pull/1607))\n\n\n## 2.32.1\n\n`2022-07-01`\n\n### 🐛 问题修复\n\n- 修复在火狐浏览器下搜索模式的点击展开问题 ([#1371](https://github.com/arco-design/arco-design-vue/pull/1371))\n\n\n## 2.30.0\n\n`2022-06-10`\n\n### 🐛 问题修复\n\n- 修复远程搜索与 fieldNames 同时使用，没有显示选项的问题 ([#1271](https://github.com/arco-design/arco-design-vue/pull/1271))\n\n### 💅 样式更新\n\n- 修复在选项 label 为空时，选择框塌陷的问题 ([#1274](https://github.com/arco-design/arco-design-vue/pull/1274))\n\n\n## 2.29.0\n\n`2022-05-27`\n\n### 🐛 问题修复\n\n- 修复 inputValue 受控失效的问题 ([#1204](https://github.com/arco-design/arco-design-vue/pull/1204))\n\n\n## 2.27.1\n\n`2022-05-16`\n\n### 🐛 问题修复\n\n- 修复使用 options 属性时，分组选项不能选择的问题 ([#1141](https://github.com/arco-design/arco-design-vue/pull/1141))\n\n\n## 2.27.0\n\n`2022-05-13`\n\n### 🐛 问题修复\n\n- 修复 options 属性中 `render`、`tagProps` 不生效的问题 ([#1114](https://github.com/arco-design/arco-design-vue/pull/1114))\n\n### 💅 样式更新\n\n- 修复开启搜索时，禁用状态下鼠标指针错误的问题 ([#1114](https://github.com/arco-design/arco-design-vue/pull/1114))\n\n\n## 2.24.0\n\n`2022-04-15`\n\n### 🆎 类型修正\n\n- `Option、OptionData、GroupOption`  接口名修改为 `SelectOption、SelectOptionData、SelectOptionGroup` ([#983](https://github.com/arco-design/arco-design-vue/pull/983))\n\n\n## 2.23.0\n\n`2022-04-08`\n\n### 🆕 新增功能\n\n- 增加 trigger 插槽 ([#952](https://github.com/arco-design/arco-design-vue/pull/952))\n\n\n## 2.22.0\n\n`2022-04-01`\n\n### 💎 功能优化\n\n- 加载状态下不再可以触发回车事件 ([#911](https://github.com/arco-design/arco-design-vue/pull/911))\n\n### 🆕 新增功能\n\n- 增加 `field-names` 属性，允许自定义字段 ([#911](https://github.com/arco-design/arco-design-vue/pull/911))\n\n### 🐛 问题修复\n\n- 修复 `allow-create` 模式下会出现重复选项的问题 ([#911](https://github.com/arco-design/arco-design-vue/pull/911))\n\n\n## 2.21.2\n\n`2022-03-29`\n\n### 🐛 问题修复\n\n- 修复 `fallback-option` 属性设置 false 失效的问题 ([#893](https://github.com/arco-design/arco-design-vue/pull/893))\n- 修复多选模式下选择的标签默认不显示删除的问题 ([#886](https://github.com/arco-design/arco-design-vue/pull/886))\n\n\n## 2.20.1\n\n`2022-03-21`\n\n### 💅 样式更新\n\n- 修复选项 #icon 插槽的垂直居中问题 ([#854](https://github.com/arco-design/arco-design-vue/pull/854))\n- 修复选项超出宽度后没有显示省略的问题 ([#854](https://github.com/arco-design/arco-design-vue/pull/854))\n\n\n## 2.20.0\n\n`2022-03-18`\n\n### 🐛 问题修复\n\n- 修复开启虚拟列表时，搜索功能失败的问题 ([#841](https://github.com/arco-design/arco-design-vue/pull/841))\n- 修复小键盘 `Enter` 键不能选中的问题 ([#841](https://github.com/arco-design/arco-design-vue/pull/841))\n\n\n## 2.18.0\n\n`2022-03-04`\n\n### 💎 功能优化\n\n- 选择框展示使用 flex 布局方式 ([#778](https://github.com/arco-design/arco-design-vue/pull/778))\n- trigger-props 属性可以覆盖默认属性 ([#778](https://github.com/arco-design/arco-design-vue/pull/778))\n\n### 🐛 问题修复\n\n- 修复 label 属性失效的问题 ([#777](https://github.com/arco-design/arco-design-vue/pull/777))\n- 修复 option 的属性\b没有同步更新的问题 ([#777](https://github.com/arco-design/arco-design-vue/pull/777))\n\n\n## 2.18.0-beta.2\n\n`2022-02-25`\n\n### 🆕 新增功能\n\n- 增加 `search-delay` 属性，并默认为 `500ms` ([#728](https://github.com/arco-design/arco-design-vue/pull/728))\n\n\n## 2.18.0-beta.1\n\n`2022-02-18`\n\n### ⚠️ 重点注意\n\n- 组件使用 context 重构，允许对 Option 组件的封装使用 ([#688](https://github.com/arco-design/arco-design-vue/pull/688))\n- 增加 `valueKey` 属性，选项 value 支持 object 形式 ([#688](https://github.com/arco-design/arco-design-vue/pull/688))\n- <option> 组件的类名由 arco-dropdown-option 改为 arco-select-option，并使用 flex 垂直居中布局 ([#688](https://github.com/arco-design/arco-design-vue/pull/688))\n\n\n## 2.16.0\n\n`2022-01-21`\n\n### 🆕 新增功能\n\n- 增加自定义图标插槽 ([#634](https://github.com/arco-design/arco-design-vue/pull/634))\n\n\n## 2.15.0\n\n`2022-01-14`\n\n### 💎 功能优化\n\n- 优化加载中状态显示 ([#557](https://github.com/arco-design/arco-design-vue/pull/557))\n\n\n## 2.14.3\n\n`2022-01-12`\n\n### 🐛 问题修复\n\n- 调用虚拟列表的 `scrollTo` 函数时缺失了参数 ([#543](https://github.com/arco-design/arco-design-vue/pull/543))\n\n\n## 2.14.2\n\n`2022-01-10`\n\n### 🐛 问题修复\n\n- 修复按需加载没有导入样式的问题 ([#536](https://github.com/arco-design/arco-design-vue/pull/536))\n\n\n## 2.13.0\n\n`2021-12-31`\n\n### 🐛 问题修复\n\n- 修复搜索时中文输入法问题 ([#481](https://github.com/arco-design/arco-design-vue/pull/481))\n- 修复在 `drawer` 中 placeholder 显示不全的问题 ([#481](https://github.com/arco-design/arco-design-vue/pull/481))\n\n\n## 2.11.1\n\n`2021-12-20`\n\n### 🐛 问题修复\n\n- 修复使用 JSX 时，Group 不可用的问题 ([#427](https://github.com/arco-design/arco-design-vue/pull/427))\n\n\n## 2.10.1\n\n`2021-12-14`\n\n### 🐛 问题修复\n\n- 修复 options 属性中 disabled 失效的问题 ([#385](https://github.com/arco-design/arco-design-vue/pull/385))\n- 修复 bordered 属性未生效的问题，添加示例 ([#385](https://github.com/arco-design/arco-design-vue/pull/385))\n\n\n## 2.10.0\n\n`2021-12-10`\n\n### 💎 功能优化\n\n- 输入框可编辑时，点击不会关闭下拉菜单 ([#348](https://github.com/arco-design/arco-design-vue/pull/348))\n\n### 🆕 新增功能\n\n- 增加 fallback-option 和 show-extra-options 属性 ([#347](https://github.com/arco-design/arco-design-vue/pull/347))\n\n### 🐛 问题修复\n\n- 修复组件在 JSX 使用中出现警告、插槽不能使用变量的问题 ([#347](https://github.com/arco-design/arco-design-vue/pull/347))\n- 修复多选输入框首次点击图标不能弹出下拉菜单的问题 ([#347](https://github.com/arco-design/arco-design-vue/pull/347))\n\n\n## 2.8.0\n\n`2021-12-01`\n\n### 🆕 新增功能\n\n- 增加 `tagProps` 的支持 ([#307](https://github.com/arco-design/arco-design-vue/pull/307))\n\n\n## 2.6.0\n\n`2021-11-19`\n\n### 🆕 新增功能\n\n- 增加 `footer` 插槽 ([#201](https://github.com/arco-design/arco-design-vue/pull/201))\n- 增加 `trigger-props` 属性 ([#197](https://github.com/arco-design/arco-design-vue/pull/197))\n\n### 🐛 问题修复\n\n- 修复 `option` 插槽没有传出 `data` 参数的问题 ([#200](https://github.com/arco-design/arco-design-vue/pull/200))\n\n\n## 2.5.0\n\n`2021-11-18`\n\n### ⚠️ 重点注意\n\n- 将 2.4.0 添加的 `options.label` 的自定义渲染移动到 `options.render` 上 ([#183](https://github.com/arco-design/arco-design-vue/pull/183))\n- `<option>` 添加 label 属性支持 ([#183](https://github.com/arco-design/arco-design-vue/pull/183))\n\n\n## 2.4.0\n\n`2021-11-17`\n\n### 🆕 新增功能\n\n- 增加 `option` 插槽 ([#170](https://github.com/arco-design/arco-design-vue/pull/170))\n- `options.label` 支持自定义渲染 ([#170](https://github.com/arco-design/arco-design-vue/pull/170))\n\n\n## 2.1.0\n\n`2021-11-05`\n\n### 🐛 问题修复\n\n- 修复 `#empty` 插槽丢失的问题 ([#96](https://github.com/arco-design/arco-design-vue/pull/96))\n\n\n## 2.0.3\n\n`2021-10-29`\n\n### 🐛 问题修复\n\n- 修复清除按钮在多选模式下不显示的问题 ([#38](https://github.com/arco-design/arco-design-vue/pull/38))\n\n"
  },
  {
    "path": "packages/web-vue/components/select/README.en-US.md",
    "content": "\n```yaml\nmeta:\n  type: Component\n  category: Data Entry\ntitle: Select\ndescription: When users need to select one or more from a group of similar data, they can use the drop-down selector, click and select the corresponding item.\n```\n\n*Auto translate by google.*\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/clear.md\n\n@import ./__demo__/multiple.md\n\n@import ./__demo__/size.md\n\n@import ./__demo__/loading.md\n\n@import ./__demo__/header.md\n\n@import ./__demo__/footer.md\n\n@import ./__demo__/border.md\n\n@import ./__demo__/create.md\n\n@import ./__demo__/search.md\n\n@import ./__demo__/scroll.md\n\n@import ./__demo__/fallback.md\n\n@import ./__demo__/remote.md\n\n@import ./__demo__/group.md\n\n@import ./__demo__/label.md\n\n@import ./__demo__/linkage.md\n\n@import ./__demo__/field-names.md\n\n@import ./__demo__/virtual-list.md\n\n## API\n\n\n### `<select>` Props\n\n|Attribute|Description|Type|Default|version|\n|---|---|---|:---:|:---|\n|multiple|Whether to open multi-select mode (The search is turned on by default in the multi-select mode)|`boolean`|`false`||\n|model-value **(v-model)**|Value|`string\\| number\\| boolean\\| Record<string, any>\\| (string \\| number \\| boolean \\| Record<string, any>)[]`|`-`||\n|default-value|Default value (uncontrolled mode)|`string\\| number\\| boolean\\| Record<string, unknown>\\| (string \\| number \\| boolean \\| Record<string, unknown>)[]`|`'' \\| []`||\n|input-value **(v-model)**|The value of the input|`string`|`-`||\n|default-input-value|The default value of the input (uncontrolled mode)|`string`|`''`||\n|size|The size of the select|`'mini' \\| 'small' \\| 'medium' \\| 'large'`|`'medium'`||\n|placeholder|Placeholder|`string`|`-`||\n|loading|Whether it is loading state|`boolean`|`false`||\n|disabled|Whether to disable|`boolean`|`false`||\n|error|Whether it is an error state|`boolean`|`false`||\n|allow-clear|Whether to allow clear|`boolean`|`false`||\n|allow-search|Whether to allow searching|`boolean \\| { retainInputValue?: boolean }`|`false (single) \\| true (multiple)`||\n|allow-create|Whether to allow creation|`boolean`|`false`||\n|max-tag-count|In multi-select mode, the maximum number of labels displayed. 0 means unlimited|`number`|`0`||\n|popup-container|Mount container for popup|`string \\| HTMLElement`|`-`||\n|bordered|Whether to display the border of the input box|`boolean`|`true`||\n|default-active-first-option|Whether to select the first option by default when there is no value|`boolean`|`true`|2.43.0|\n|popup-visible **(v-model)**|Whether to show the dropdown|`boolean`|`-`||\n|default-popup-visible|Whether the popup is visible by default (uncontrolled mode)|`boolean`|`false`||\n|unmount-on-close|Whether to destroy the element when the dropdown is closed|`boolean`|`false`||\n|filter-option|Whether to filter options|`boolean \\| ((inputValue: string, option: SelectOptionData) => boolean)`|`true`||\n|options|Option data|`(string \\| number \\| boolean \\| SelectOptionData \\| SelectOptionGroup)[]`|`[]`||\n|virtual-list-props|Pass the virtual list attribute, pass in this parameter to turn on virtual scrolling [VirtualListProps](#VirtualListProps)|`VirtualListProps`|`-`||\n|trigger-props|Trigger props of the drop-down menu|`TriggerProps`|`-`||\n|format-label|Format display content|`(data: SelectOptionData) => string`|`-`||\n|fallback-option|Options that do not exist in custom values|`boolean\\| ((    value: string \\| number \\| boolean \\| Record<string, unknown>  ) => SelectOptionData)`|`true`|2.10.0|\n|show-extra-options|Options that do not exist in custom values|`boolean`|`true`|2.10.0|\n|value-key|Used to determine the option key value attribute name|`string`|`'value'`|2.18.0|\n|search-delay|Delay time to trigger search event|`number`|`500`|2.18.0|\n|limit|Maximum number of choices in multiple choice|`number`|`0`|2.18.0|\n|field-names|Customize fields in `SelectOptionData`|`SelectFieldNames`|`-`|2.22.0|\n|scrollbar|Whether to enable virtual scroll bar|`boolean \\| ScrollbarProps`|`true`|2.38.0|\n|show-header-on-empty|Whether to display the header in the empty state|`boolean`|`false`||\n|show-footer-on-empty|Whether to display the footer in the empty state|`boolean`|`false`||\n|tag-nowrap|Tag content does not wrap|`boolean`|`false`|2.56.1|\n### `<select>` Events\n\n|Event Name|Description|Parameters|version|\n|---|---|---|:---|\n|change|Triggered when the value changes|value: ` string \\| number \\| boolean \\| Record<string, any> \\| (string \\| number \\| boolean \\| Record<string, any>)[] `||\n|input-value-change|Triggered when the value of the input changes|inputValue: `string`||\n|popup-visible-change|Triggered when the display state of the drop-down box changes|visible: `boolean`||\n|clear|Triggered when the clear button is clicked|-||\n|remove|Triggered when the delete button of the label is clicked|removed: `string \\| number \\| boolean \\| Record<string, any> \\| undefined`||\n|search|Triggered when the user searches|inputValue: `string`||\n|dropdown-scroll|Triggered when the drop-down scrolls|-||\n|dropdown-reach-bottom|Triggered when the drop-down menu is scrolled to the bottom|-||\n|exceed-limit|Triggered when multiple selection exceeds the limit|value: `string \\| number \\| boolean \\| Record<string, any> \\| undefined`<br>ev: `Event`|2.18.0|\n### `<select>` Slots\n\n|Slot Name|Description|Parameters|version|\n|---|---|---|:---|\n|trigger|Custom trigger element|-|2.22.0|\n|prefix|Prefix|-|2.22.0|\n|search-icon|Search icon for select box|-|2.16.0|\n|loading-icon|Loading icon for select box|-|2.16.0|\n|arrow-icon|Arrow icon for select box|-|2.16.0|\n|footer|The footer of the drop-down box|-||\n|header|The header of the drop-down box|-|2.43.0|\n|label|Display content of label|data: `SelectOptionData`||\n|option|Display content of options|data: `SelectOptionData`||\n|empty|Display content when the option is empty|-||\n\n\n\n\n### `<option>` Props\n\n|Attribute|Description|Type|Default|version|\n|---|---|---|:---:|:---|\n|value|Option value (if not filled, it will be obtained from the content)|`string\\|number\\|boolean\\|object`|`-`||\n|label|Option label (if not filled, it will be obtained from the content)|`string`|`-`||\n|disabled|Whether to disable|`boolean`|`false`||\n|tag-props|Displayed tag attributes|`TagProps`|`-`|2.8.0|\n|extra|Extra data|`object`|`-`|2.10.0|\n|index|index for manually specifying option|`number`|`-`|2.20.0|\n\n\n\n\n### `<optgroup>` Props\n\n|Attribute|Description|Type|Default|\n|---|---|---|:---:|\n|label|Title of option group|`string`|`-`|\n### `<optgroup>` Slots\n\n|Slot Name|Description|Parameters|version|\n|---|---|---|:---|\n|label|Title of option group|-|2.10.0|\n\n\n\n### Type\n\n```ts\n/**\n * @zh 选项\n * @en Option\n */\ntype Option = string | number | SelectOptionData | SelectOptionGroup;\n\n/**\n * @zh 筛选\n * @en Filter\n */\ntype FilterOption = boolean | ((inputValue: string, option: SelectOptionData) => boolean);\n```\n\n\n### SelectOptionData\n\n|Name|Description|Type|Default|\n|---|---|---|:---:|\n|value|Option Value|`string \\| number \\| boolean \\| Record<string, unknown>`|`-`|\n|label|Option content|`string`|`-`|\n|disabled|Whether to disable|`boolean`|`false`|\n|tagProps|Props of the multi-select label corresponding to the option|`any`|`-`|\n|render|Custom Render|`RenderFunction`|`-`|\n\n\n\n### SelectOptionGroup\n\n|Name|Description|Type|Default|\n|---|---|---|:---:|\n|isGroup|Whether it is an option group|`true`|`-`|\n|label|Option group title|`string`|`-`|\n|options|Options in the option group|`SelectOption[]`|`-`|\n\n\n\n\n### VirtualListProps\n\n|Name|Description|Type|Default|version|\n|---|---|---|:---:|:---|\n|height|Viewable area height|`number \\| string`|`-`||\n|threshold|The threshold of the number of elements to enable virtual scrolling. When the number of data is less than the threshold, virtual scrolling will not be enabled.|`number`|`-`||\n|isStaticItemHeight|(Repealed) Is the element height fixed. Version 2.18.0 deprecated, please use `fixedSize`|`boolean`|`false`||\n|fixedSize|Is the element height fixed.|`boolean`|`false`|2.34.1|\n|estimatedSize|Is the element height fixed.|`number`|`-`|2.34.1|\n|buffer|The number of elements mounted in advance outside the boundary of the viewport.|`number`|`10`|2.34.1|\n\n\n\n\n## FAQ\n\n### Use `Object` format as option value\nWhen using the `Object` format as the value of the option, you need to specify the field name to obtain the unique identifier for the selector through the `value-key` attribute, and the default value is `value`.\nIn addition, the object value of `value` needs to be defined in `setup`, and the object cannot be created in the template, which will lead to repeated rendering of the `Option` component.\n\nFor example, when I need to specify `key` as a unique identifier:\n```vue\n<template>\n  <a-select v-model=\"value\" :style=\"{width:'320px'}\" placeholder=\"Please select ...\" value-key=\"key\">\n    <a-option v-for=\"item of data\" :value=\"item\" :label=\"item.label\" />\n  </a-select>\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n  setup() {\n    const value = ref();\n    const data = [{\n      value: 'beijing',\n      label: 'Beijing',\n      key: 'extra1'\n    }, {\n      value: 'shanghai',\n      label: 'Shanghai',\n      key: 'extra2'\n    }, {\n      value: 'guangzhou',\n      label: 'Guangzhou',\n      key: 'extra3'\n    }, {\n      value: 'chengdu',\n      label: 'Chengdu',\n      key: 'extra4'\n    }]\n\n    return {\n      value,\n      data\n    }\n  },\n}\n</script>\n```\n\n### Dropdown menu separation issue in scroll container\nThe `Select` component does not enable the container scrolling event monitoring function by default. If you encounter the problem of separating the drop-down menu in the scrolling container, you can manually enable the `updateAtScroll` function of the internal `Trigger` component.\nIf this is the case in the global environment, you can use the `ConfigProvider` component to enable this property by default.\n\n```vue\n<a-select :trigger-props=\"{updateAtScroll:true}\"></a-select>\n```\n"
  },
  {
    "path": "packages/web-vue/components/select/README.zh-CN.md",
    "content": "```yaml\nmeta:\n  type: 组件\n  category: 数据输入\ntitle: 选择器 Select\ndescription: 当用户需要从一组同类数据中选择一个或多个时，可以使用下拉选择器，点击后选择对应项。\n```\n\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/clear.md\n\n@import ./__demo__/multiple.md\n\n@import ./__demo__/size.md\n\n@import ./__demo__/loading.md\n\n@import ./__demo__/header.md\n\n@import ./__demo__/footer.md\n\n@import ./__demo__/border.md\n\n@import ./__demo__/create.md\n\n@import ./__demo__/search.md\n\n@import ./__demo__/scroll.md\n\n@import ./__demo__/fallback.md\n\n@import ./__demo__/remote.md\n\n@import ./__demo__/group.md\n\n@import ./__demo__/label.md\n\n@import ./__demo__/linkage.md\n\n@import ./__demo__/field-names.md\n\n@import ./__demo__/virtual-list.md\n\n## API\n\n\n### `<select>` Props\n\n|参数名|描述|类型|默认值|版本|\n|---|---|---|:---:|:---|\n|multiple|是否开启多选模式（多选模式默认开启搜索）|`boolean`|`false`||\n|model-value **(v-model)**|绑定值|`string\\| number\\| boolean\\| Record<string, any>\\| (string \\| number \\| boolean \\| Record<string, any>)[]`|`-`||\n|default-value|默认值（非受控模式）|`string\\| number\\| boolean\\| Record<string, unknown>\\| (string \\| number \\| boolean \\| Record<string, unknown>)[]`|`'' \\| []`||\n|input-value **(v-model)**|输入框的值|`string`|`-`||\n|default-input-value|输入框的默认值（非受控模式）|`string`|`''`||\n|size|选择框的大小|`'mini' \\| 'small' \\| 'medium' \\| 'large'`|`'medium'`||\n|placeholder|占位符|`string`|`-`||\n|loading|是否为加载中状态|`boolean`|`false`||\n|disabled|是否禁用|`boolean`|`false`||\n|error|是否为错误状态|`boolean`|`false`||\n|allow-clear|是否允许清空|`boolean`|`false`||\n|allow-search|是否允许搜索|`boolean \\| { retainInputValue?: boolean }`|`false (single) \\| true (multiple)`||\n|allow-create|是否允许创建|`boolean`|`false`||\n|max-tag-count|多选模式下，最多显示的标签数量。0 表示不限制|`number`|`0`||\n|popup-container|弹出框的挂载容器|`string \\| HTMLElement`|`-`||\n|bordered|是否显示输入框的边框|`boolean`|`true`||\n|default-active-first-option|是否在无值时默认选择第一个选项|`boolean`|`true`|2.43.0|\n|popup-visible **(v-model)**|是否显示下拉菜单|`boolean`|`-`||\n|default-popup-visible|弹出框默认是否可见（非受控模式）|`boolean`|`false`||\n|unmount-on-close|是否在下拉菜单关闭时销毁元素|`boolean`|`false`||\n|filter-option|是否过滤选项|`boolean \\| ((inputValue: string, option: SelectOptionData) => boolean)`|`true`||\n|options|选项数据|`(string \\| number \\| boolean \\| SelectOptionData \\| SelectOptionGroup)[]`|`[]`||\n|virtual-list-props|传递虚拟列表属性，传入此参数以开启虚拟滚动 [VirtualListProps](#VirtualListProps)|`VirtualListProps`|`-`||\n|trigger-props|下拉菜单的触发器属性|`TriggerProps`|`-`||\n|format-label|格式化显示内容|`(data: SelectOptionData) => string`|`-`||\n|fallback-option|自定义值中不存在的选项|`boolean\\| ((    value: string \\| number \\| boolean \\| Record<string, unknown>  ) => SelectOptionData)`|`true`|2.10.0|\n|show-extra-options|是否在下拉菜单中显示额外选项|`boolean`|`true`|2.10.0|\n|value-key|用于确定选项键值的属性名|`string`|`'value'`|2.18.0|\n|search-delay|触发搜索事件的延迟时间|`number`|`500`|2.18.0|\n|limit|多选时最多的选择个数|`number`|`0`|2.18.0|\n|field-names|自定义 `SelectOptionData` 中的字段|`SelectFieldNames`|`-`|2.22.0|\n|scrollbar|是否开启虚拟滚动条|`boolean \\| ScrollbarProps`|`true`|2.38.0|\n|show-header-on-empty|空状态时是否显示header|`boolean`|`false`||\n|show-footer-on-empty|空状态时是否显示footer|`boolean`|`false`||\n|tag-nowrap|标签内容不换行|`boolean`|`false`|2.56.1|\n### `<select>` Events\n\n|事件名|描述|参数|版本|\n|---|---|---|:---|\n|change|值发生改变时触发|value: ` string \\| number \\| boolean \\| Record<string, any> \\| (string \\| number \\| boolean \\| Record<string, any>)[] `||\n|input-value-change|输入框的值发生改变时触发|inputValue: `string`||\n|popup-visible-change|下拉框的显示状态改变时触发|visible: `boolean`||\n|clear|点击清除按钮时触发|-||\n|remove|点击标签的删除按钮时触发|removed: `string \\| number \\| boolean \\| Record<string, any> \\| undefined`||\n|search|用户搜索时触发|inputValue: `string`||\n|dropdown-scroll|下拉菜单发生滚动时触发|-||\n|dropdown-reach-bottom|下拉菜单滚动到底部时触发|-||\n|exceed-limit|多选超出限制时触发|value: `string \\| number \\| boolean \\| Record<string, any> \\| undefined`<br>ev: `Event`|2.18.0|\n### `<select>` Slots\n\n|插槽名|描述|参数|版本|\n|---|:---:|---|:---|\n|trigger|自定义触发元素|-|2.22.0|\n|prefix|前缀元素|-|2.22.0|\n|search-icon|选择框的搜索图标|-|2.16.0|\n|loading-icon|选择框的加载中图标|-|2.16.0|\n|arrow-icon|选择框的箭头图标|-|2.16.0|\n|footer|下拉框的页脚|-||\n|header|下拉框的页头|-|2.43.0|\n|label|选择框的显示内容|data: `SelectOptionData`||\n|option|选项内容|data: `SelectOptionData`||\n|empty|选项为空时的显示内容|-||\n\n\n\n\n### `<option>` Props\n\n|参数名|描述|类型|默认值|版本|\n|---|---|---|:---:|:---|\n|value|选项值（如不填，会从内容中获取）|`string\\|number\\|boolean\\|object`|`-`||\n|label|选项标签（如不填，会从内容中获取）|`string`|`-`||\n|disabled|是否禁用|`boolean`|`false`||\n|tag-props|展示的标签属性|`TagProps`|`-`|2.8.0|\n|extra|额外数据。2.18.0 版本废弃，可使用对象形式的 value 扩展数据|`object`|`-`|2.10.0|\n|index|用于手动指定选项的 index|`number`|`-`|2.20.0|\n\n\n\n\n### `<optgroup>` Props\n\n|参数名|描述|类型|默认值|\n|---|---|---|:---:|\n|label|选项组的标题|`string`|`-`|\n### `<optgroup>` Slots\n\n|插槽名|描述|参数|版本|\n|---|:---:|---|:---|\n|label|选项组的标题|-|2.10.0|\n\n\n\n### Type\n\n```ts\n/**\n * @zh 选项\n * @en Option\n */\ntype Option = string | number | SelectOptionData | SelectOptionGroup;\n\n/**\n * @zh 筛选\n * @en Filter\n */\ntype FilterOption = boolean | ((inputValue: string, option: SelectOptionData) => boolean);\n```\n\n\n### SelectOptionData\n\n|参数名|描述|类型|默认值|\n|---|---|---|:---:|\n|value|选项值|`string \\| number \\| boolean \\| Record<string, unknown>`|`-`|\n|label|选项内容|`string`|`-`|\n|disabled|是否禁用|`boolean`|`false`|\n|tagProps|选项对应的多选标签的属性|`any`|`-`|\n|render|自定义渲染|`RenderFunction`|`-`|\n\n\n\n### SelectOptionGroup\n\n|参数名|描述|类型|默认值|\n|---|---|---|:---:|\n|isGroup|是否为选项组|`true`|`-`|\n|label|选项组标题|`string`|`-`|\n|options|选项组中的选项|`SelectOption[]`|`-`|\n\n\n\n\n### VirtualListProps\n\n|参数名|描述|类型|默认值|版本|\n|---|---|---|:---:|:---|\n|height|可视区域高度|`number \\| string`|`-`||\n|threshold|开启虚拟滚动的元素数量阈值，当数据数量小于阈值时不会开启虚拟滚动。|`number`|`-`||\n|isStaticItemHeight|（已废除）元素高度是否是固定的。2.34.1 版本废除，请使用 `fixedSize`|`boolean`|`false`||\n|fixedSize|元素高度是否是固定的。|`boolean`|`false`|2.34.1|\n|estimatedSize|元素高度不固定时的预估高度。|`number`|`-`|2.34.1|\n|buffer|视口边界外提前挂载的元素数量。|`number`|`10`|2.34.1|\n\n\n\n\n## FAQ\n\n### 使用 `Object` 格式作为选项的值\n当使用 `Object` 格式作为选项的值时，需要通过 `value-key` 属性为选择器指定获取唯一标识的字段名，默认值为 `value`.\n此外 `value` 的对象值需要在 `setup` 中定义好，不能够在模版中创建对象，这样会导致 `Option` 组件的重复渲染。\n\n例如当我需要指定 `key` 为唯一标识时：\n```vue\n<template>\n  <a-select v-model=\"value\" :style=\"{width:'320px'}\" placeholder=\"Please select ...\" value-key=\"key\">\n    <a-option v-for=\"item of data\" :value=\"item\" :label=\"item.label\" />\n  </a-select>\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n  setup() {\n    const value = ref();\n    const data = [{\n      value: 'beijing',\n      label: 'Beijing',\n      key: 'extra1'\n    }, {\n      value: 'shanghai',\n      label: 'Shanghai',\n      key: 'extra2'\n    }, {\n      value: 'guangzhou',\n      label: 'Guangzhou',\n      key: 'extra3'\n    }, {\n      value: 'chengdu',\n      label: 'Chengdu',\n      key: 'extra4'\n    }]\n\n    return {\n      value,\n      data\n    }\n  },\n}\n</script>\n```\n\n### 滚动容器中的下拉菜单分离问题\n`Select` 组件默认没有开启容器滚动的事件监听功能，如果遇到在滚动容器中下拉菜单分离的问题，可以手动开启内部 `Trigger` 组件的 `updateAtScroll` 功能。\n如果是在全局环境中存在此种情况，可以使用 `ConfigProvider` 组件默认开启此属性。\n\n```vue\n<a-select :trigger-props=\"{updateAtScroll:true}\"></a-select>\n```\n"
  },
  {
    "path": "packages/web-vue/components/select/TEMPLATE.md",
    "content": "## zh-CN\n\n```yaml\nmeta:\n  type: 组件\n  category: 数据输入\ntitle: 选择器 Select\ndescription: 当用户需要从一组同类数据中选择一个或多个时，可以使用下拉选择器，点击后选择对应项。\n```\n\n---\n\n## en-US\n\n```yaml\nmeta:\n  type: Component\n  category: Data Entry\ntitle: Select\ndescription: When users need to select one or more from a group of similar data, they can use the drop-down selector, click and select the corresponding item.\n```\n\n---\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/clear.md\n\n@import ./__demo__/multiple.md\n\n@import ./__demo__/size.md\n\n@import ./__demo__/loading.md\n\n@import ./__demo__/header.md\n\n@import ./__demo__/footer.md\n\n@import ./__demo__/border.md\n\n@import ./__demo__/create.md\n\n@import ./__demo__/search.md\n\n@import ./__demo__/scroll.md\n\n@import ./__demo__/fallback.md\n\n@import ./__demo__/remote.md\n\n@import ./__demo__/group.md\n\n@import ./__demo__/label.md\n\n@import ./__demo__/linkage.md\n\n@import ./__demo__/field-names.md\n\n@import ./__demo__/virtual-list.md\n\n## API\n\n%%API(select.tsx)%%\n\n%%API(option.vue)%%\n\n%%API(optgroup.vue)%%\n\n### Type\n\n```ts\n/**\n * @zh 选项\n * @en Option\n */\ntype Option = string | number | SelectOptionData | SelectOptionGroup;\n\n/**\n * @zh 筛选\n * @en Filter\n */\ntype FilterOption = boolean | ((inputValue: string, option: SelectOptionData) => boolean);\n```\n\n%%INTERFACE(interface.ts)%%\n\n%%INTERFACE(../_components/virtual-list-v2/interface.ts)%%\n\n\n## zh-CN\n## FAQ\n\n### 使用 `Object` 格式作为选项的值\n当使用 `Object` 格式作为选项的值时，需要通过 `value-key` 属性为选择器指定获取唯一标识的字段名，默认值为 `value`.\n此外 `value` 的对象值需要在 `setup` 中定义好，不能够在模版中创建对象，这样会导致 `Option` 组件的重复渲染。\n\n例如当我需要指定 `key` 为唯一标识时：\n```vue\n<template>\n  <a-select v-model=\"value\" :style=\"{width:'320px'}\" placeholder=\"Please select ...\" value-key=\"key\">\n    <a-option v-for=\"item of data\" :value=\"item\" :label=\"item.label\" />\n  </a-select>\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n  setup() {\n    const value = ref();\n    const data = [{\n      value: 'beijing',\n      label: 'Beijing',\n      key: 'extra1'\n    }, {\n      value: 'shanghai',\n      label: 'Shanghai',\n      key: 'extra2'\n    }, {\n      value: 'guangzhou',\n      label: 'Guangzhou',\n      key: 'extra3'\n    }, {\n      value: 'chengdu',\n      label: 'Chengdu',\n      key: 'extra4'\n    }]\n\n    return {\n      value,\n      data\n    }\n  },\n}\n</script>\n```\n\n### 滚动容器中的下拉菜单分离问题\n`Select` 组件默认没有开启容器滚动的事件监听功能，如果遇到在滚动容器中下拉菜单分离的问题，可以手动开启内部 `Trigger` 组件的 `updateAtScroll` 功能。\n如果是在全局环境中存在此种情况，可以使用 `ConfigProvider` 组件默认开启此属性。\n\n```vue\n<a-select :trigger-props=\"{updateAtScroll:true}\"></a-select>\n```\n\n---\n## en-US\n## FAQ\n\n### Use `Object` format as option value\nWhen using the `Object` format as the value of the option, you need to specify the field name to obtain the unique identifier for the selector through the `value-key` attribute, and the default value is `value`.\nIn addition, the object value of `value` needs to be defined in `setup`, and the object cannot be created in the template, which will lead to repeated rendering of the `Option` component.\n\nFor example, when I need to specify `key` as a unique identifier:\n```vue\n<template>\n  <a-select v-model=\"value\" :style=\"{width:'320px'}\" placeholder=\"Please select ...\" value-key=\"key\">\n    <a-option v-for=\"item of data\" :value=\"item\" :label=\"item.label\" />\n  </a-select>\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n  setup() {\n    const value = ref();\n    const data = [{\n      value: 'beijing',\n      label: 'Beijing',\n      key: 'extra1'\n    }, {\n      value: 'shanghai',\n      label: 'Shanghai',\n      key: 'extra2'\n    }, {\n      value: 'guangzhou',\n      label: 'Guangzhou',\n      key: 'extra3'\n    }, {\n      value: 'chengdu',\n      label: 'Chengdu',\n      key: 'extra4'\n    }]\n\n    return {\n      value,\n      data\n    }\n  },\n}\n</script>\n```\n\n### Dropdown menu separation issue in scroll container\nThe `Select` component does not enable the container scrolling event monitoring function by default. If you encounter the problem of separating the drop-down menu in the scrolling container, you can manually enable the `updateAtScroll` function of the internal `Trigger` component.\nIf this is the case in the global environment, you can use the `ConfigProvider` component to enable this property by default.\n\n```vue\n<a-select :trigger-props=\"{updateAtScroll:true}\"></a-select>\n```\n\n---\n"
  },
  {
    "path": "packages/web-vue/components/select/__demo__/basic.md",
    "content": "```yaml\ntitle:\n  zh-CN: 基本用法\n  en-US: Basic Usage\n```\n\n## zh-CN\n\n选择器的基本用法。\n通过 `trigger-props` 属性自定义下拉框的属性，比如可以让下拉框自动适应最小宽度。\n\n---\n\n## en-US\n\nBasic usage of selectors.\nUse the `trigger-props` property to customize the properties of the drop-down box, for example, the drop-down box can automatically adapt to the minimum width.\n\n---\n\n```vue\n\n<template>\n  <a-space direction=\"vertical\" size=\"large\">\n    <a-select :style=\"{width:'320px'}\" placeholder=\"Please select ...\">\n      <a-option>Beijing</a-option>\n      <a-option>Shanghai</a-option>\n      <a-option>Guangzhou</a-option>\n      <a-option disabled>Disabled</a-option>\n    </a-select>\n    <a-select :style=\"{width:'320px'}\" placeholder=\"Please select ...\">\n      <a-option :value=\"true\">是</a-option>\n      <a-option :value=\"false\">否</a-option>\n    </a-select>\n    <a-select defaultValue=\"Beijing\" :style=\"{width:'320px'}\" placeholder=\"Please select ...\" disabled>\n      <a-option>Beijing</a-option>\n      <a-option>Shanghai</a-option>\n      <a-option>Guangzhou</a-option>\n      <a-option disabled>Disabled</a-option>\n    </a-select>\n    <a-select v-model=\"value\" :style=\"{width:'320px'}\" placeholder=\"Please select ...\">\n      <a-option v-for=\"item of data\" :value=\"item\" :label=\"item.label\" />\n    </a-select>\n    <div>Select Value: {{ value }}</div>\n    <a-select :style=\"{width:'160px'}\" placeholder=\"Select\" :trigger-props=\"{ autoFitPopupMinWidth: true }\">\n      <a-option>Beijing-Beijing-Beijing</a-option>\n      <a-option>Shanghai</a-option>\n      <a-option>Guangzhou</a-option>\n      <a-option disabled>Disabled</a-option>\n    </a-select>\n    \n  </a-space>\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n  setup() {\n    const value = ref();\n    const data = [{\n      value: 'beijing',\n      label: 'Beijing',\n      other: 'extra'\n    }, {\n      value: 'shanghai',\n      label: 'Shanghai',\n      other: 'extra'\n    }, {\n      value: 'guangzhou',\n      label: 'Guangzhou',\n      other: 'extra'\n    }, {\n      value: 'chengdu',\n      label: 'Chengdu',\n      other: 'extra'\n    }]\n\n    return {\n      value,\n      data\n    }\n  },\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/select/__demo__/border.md",
    "content": "```yaml\ntitle:\n  zh-CN: 无边框模式\n  en-US: Borderless\n```\n\n## zh-CN\n\n设置 `bordered=\"false\"` 开启无边框模式，常用于沉浸式使用。\n\n---\n\n## en-US\n\nSet `bordered=\"false\"` to enable borderless mode, which is often used for immersive use.\n\n---\n\n```vue\n<template>\n  <a-space direction=\"vertical\" size=\"large\">\n    <a-select :style=\"{width:'100%'}\" placeholder=\"Please select ...\" :bordered=\"false\">\n      <a-option>Beijing</a-option>\n      <a-option>Shanghai</a-option>\n      <a-option>Guangzhou</a-option>\n      <a-option disabled>Disabled</a-option>\n    </a-select>\n    <a-select :default-value=\"['Beijing','Shanghai']\" :style=\"{width:'360px'}\" placeholder=\"Please select ...\" multiple :bordered=\"false\">\n      <a-option>Beijing</a-option>\n      <a-option :tag-props=\"{color:'red'}\">Shanghai</a-option>\n      <a-option>Guangzhou</a-option>\n      <a-option disabled>Disabled</a-option>\n      <a-option>Shenzhen</a-option>\n      <a-option>Wuhan</a-option>\n    </a-select>\n  </a-space>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/select/__demo__/clear.md",
    "content": "```yaml\ntitle:\n  zh-CN: 允许清除\n  en-US: Allow Clear\n```\n\n## zh-CN\n\n通过设置 `allow-clear` ，显示清除按钮。\n\n---\n\n## en-US\n\nBy setting `allow-clear`, the clear button is displayed.\n\n---\n\n```vue\n\n<template>\n  <a-select :style=\"{width:'320px'}\" v-model=\"value\" placeholder=\"Please select ...\" allow-clear>\n    <a-option>Beijing</a-option>\n    <a-option>Shanghai</a-option>\n    <a-option>Guangzhou</a-option>\n    <a-option disabled>Disabled</a-option>\n  </a-select>\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n  setup() {\n    const value = ref('Shanghai');\n    return {\n      value\n    }\n  },\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/select/__demo__/create.md",
    "content": "```yaml\ntitle:\n  zh-CN: 允许创建\n  en-US: To Create\n```\n\n## zh-CN\n\n通过设置 `allow-create` ，让选择器可以创建选项中不存在的条目。\n\n---\n\n## en-US\n\nBy setting `allow-create`, the selector can create items that do not exist in the options.\n\n---\n\n```vue\n<template>\n  <a-space direction=\"vertical\" size=\"large\">\n    <a-select :style=\"{width:'320px'}\" placeholder=\"Please select ...\" allow-create>\n      <a-option>Beijing</a-option>\n      <a-option>Shanghai</a-option>\n      <a-option>Guangzhou</a-option>\n      <a-option disabled>Disabled</a-option>\n      <a-option>Shenzhen</a-option>\n      <a-option>Chengdu</a-option>\n      <a-option>Wuhan</a-option>\n    </a-select>\n    <a-select :style=\"{width:'320px'}\" placeholder=\"Please select ...\" multiple allow-create>\n      <a-option>Beijing</a-option>\n      <a-option>Shanghai</a-option>\n      <a-option>Guangzhou</a-option>\n      <a-option disabled>Disabled</a-option>\n      <a-option>Shenzhen</a-option>\n      <a-option>Chengdu</a-option>\n      <a-option>Wuhan</a-option>\n    </a-select>\n  </a-space>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/select/__demo__/fallback.md",
    "content": "```yaml\ntitle:\n  zh-CN: 回退选项\n  en-US: Fallback Option\n```\n\n## zh-CN\n\n使用 `fallback-option` 自定义选项中不存在的值，默认会在输入框中展示不存在的选项值。可能用于选项还没有获取完，或者远程搜索时选项改变了。\n\n---\n\n## en-US\n\nUse `fallback-option` to customize the value that does not exist in the option. By default, the value of the option that does not exist in the input box will display. It may be used when the options have not been obtained, or the options have changed during remote search.\n\n---\n\n```vue\n\n<template>\n  <a-space direction=\"vertical\" size=\"large\">\n    <a-select defaultValue=\"Shanxi\" :style=\"{width:'320px'}\" placeholder=\"Please select ...\" :fallback-option=\"fallback\">\n      <a-option>Beijing</a-option>\n      <a-option>Shanghai</a-option>\n      <a-option>Guangzhou</a-option>\n      <a-option disabled>Disabled</a-option>\n    </a-select>\n    <a-select defaultValue=\"Shanxi\" :style=\"{width:'320px'}\" placeholder=\"Please select ...\" :fallback-option=\"fallback\" :show-extra-options=\"false\">\n      <a-option>Beijing</a-option>\n      <a-option>Shanghai</a-option>\n      <a-option>Guangzhou</a-option>\n      <a-option disabled>Disabled</a-option>\n    </a-select>\n    <a-select :default-value=\"['Shanxi','Nanjing','Hangzhou']\" :style=\"{width:'320px'}\" placeholder=\"Please select ...\" multiple :fallback-option=\"fallback\">\n      <a-option>Beijing</a-option>\n      <a-option>Shanghai</a-option>\n      <a-option>Guangzhou</a-option>\n      <a-option disabled>Disabled</a-option>\n      <a-option>Shenzhen</a-option>\n      <a-option>Chengdu</a-option>\n      <a-option>Wuhan</a-option>\n    </a-select>\n  </a-space>\n</template>\n\n<script>\nexport default {\n  setup() {\n    const fallback = (value) => {\n      return {\n        value,\n        label: `++${value}++`\n      }\n    };\n    return {\n      fallback\n    }\n  },\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/select/__demo__/field-names.md",
    "content": "```yaml\ntitle:\n  zh-CN: 自定义字段名\n  en-US: Custom FieldNames\n```\n\n## zh-CN\n\n可以通过 `field-names` 属性自定义 `options` 中数据的格式。\n\n---\n\n## en-US\n\nThe format of the data in `options` can be customized through the `field-names` attribute.\n\n---\n\n```vue\n<template>\n  <a-select v-model=\"value\" :options=\"options\" :field-names=\"fieldNames\" :style=\"{width:'320px'}\"\n            placeholder=\"Please select ...\" />\n</template>\n\n<script>\nimport { reactive, ref } from 'vue';\n\nexport default {\n  setup() {\n    const value = ref('bj');\n    const fieldNames = {value: 'city', label: 'text'}\n    const options = reactive([\n      {\n        city: 'bj',\n        text: 'Beijing'\n      },\n      {\n        city: 'sh',\n        text: 'Shanghai'\n      },\n      {\n        city: 'gz',\n        text: 'Guangzhou'\n      },\n      {\n        city: 'cd',\n        text: 'Chengdu'\n      },\n    ]);\n\n    return {\n      value,\n      fieldNames,\n      options\n    }\n  }\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/select/__demo__/footer.md",
    "content": "```yaml\ntitle:\n  zh-CN: 下拉菜单的页脚\n  en-US: Dropdown Footer\n```\n\n## zh-CN\n\n自定义下拉菜单的页脚\n\n---\n\n## en-US\n\ncustom dropdown menu footer\n\n---\n\n```vue\n<template>\n  <a-space>\n    <a-select :default-value=\"'Beijing'\" :style=\"{width:'360px'}\" placeholder=\"Please select ...\" allow-search>\n      <a-option>Beijing</a-option>\n      <a-option>Shanghai</a-option>\n      <a-option>Guangzhou</a-option>\n      <a-option disabled>Disabled</a-option>\n      <a-option>Shenzhen</a-option>\n      <a-option>Wuhan</a-option>\n      <template #footer>\n        <div style=\"padding: 6px 0; text-align: center;\">\n          <a-button>Click Me</a-button>\n        </div>\n      </template>\n    </a-select>\n    <a-select :default-value=\"'Beijing'\" :style=\"{width:'360px'}\" placeholder=\"Please select ...\" allow-search show-footer-on-empty>\n      <a-option>Beijing</a-option>\n      <a-option>Shanghai</a-option>\n      <a-option>Guangzhou</a-option>\n      <a-option disabled>Disabled</a-option>\n      <a-option>Shenzhen</a-option>\n      <a-option>Wuhan</a-option>\n      <template #footer>\n        <div style=\"padding: 6px 0; text-align: center;\">\n          <a-button>Click Me</a-button>\n        </div>\n      </template>\n    </a-select>\n  </a-space>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/select/__demo__/group.md",
    "content": "```yaml\ntitle:\n  zh-CN: 分组\n  en-US: Group\n```\n\n## zh-CN\n\n使用 `optgroup` 组件添加分组选项。\n\n---\n\n## en-US\n\nUse the `optgroup` component to add grouping options.\n\n---\n\n```vue\n<template>\n  <a-space direction=\"vertical\" size=\"large\">\n    <a-select :style=\"{width:'320px'}\" placeholder=\"Please select ...\">\n      <a-optgroup label=\"Group-1\">\n        <a-option>Beijing</a-option>\n        <a-option>Shanghai</a-option>\n      </a-optgroup>\n      <a-optgroup label=\"Group-2\">\n        <a-option>Guangzhou</a-option>\n        <a-option disabled>Disabled</a-option>\n        <a-option>Shenzhen</a-option>\n      </a-optgroup>\n      <a-optgroup label=\"Group-3\">\n        <a-option>Chengdu</a-option>\n        <a-option>Wuhan</a-option>\n      </a-optgroup>\n    </a-select>\n    <a-select :style=\"{width:'320px'}\" placeholder=\"Please select ...\" multiple>\n      <a-optgroup label=\"Group-1\">\n        <a-option>Beijing</a-option>\n        <a-option>Shanghai</a-option>\n      </a-optgroup>\n      <a-optgroup label=\"Group-2\">\n        <a-option>Guangzhou</a-option>\n        <a-option disabled>Disabled</a-option>\n        <a-option>Shenzhen</a-option>\n      </a-optgroup>\n      <a-optgroup label=\"Group-3\">\n        <a-option>Chengdu</a-option>\n        <a-option>Wuhan</a-option>\n      </a-optgroup>\n    </a-select>\n  </a-space>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/select/__demo__/header.md",
    "content": "```yaml\ntitle:\n  zh-CN: 下拉菜单的页头\n  en-US: Dropdown Header\n```\n\n## zh-CN\n\n自定义下拉菜单的页头\n\n---\n\n## en-US\n\ncustom dropdown menu header\n\n---\n\n```vue\n<template>\n  <a-space>\n    <a-select :default-value=\"'Beijing'\" :style=\"{width:'360px'}\" placeholder=\"Please select ...\" multiple>\n      <a-option>Beijing</a-option>\n      <a-option>Shanghai</a-option>\n      <a-option>Guangzhou</a-option>\n      <a-option disabled>Disabled</a-option>\n      <a-option>Shenzhen</a-option>\n      <a-option>Wuhan</a-option>\n      <template #header>\n        <div style=\"padding: 6px 12px;\" >\n          <a-checkbox value=\"1\">全选</a-checkbox>\n        </div>\n      </template>\n    </a-select>\n\n    <a-select :default-value=\"'Beijing'\" :style=\"{width:'360px'}\" placeholder=\"Please select ...\" multiple show-header-on-empty>\n      <a-option>Beijing</a-option>\n      <a-option>Shanghai</a-option>\n      <a-option>Guangzhou</a-option>\n      <a-option disabled>Disabled</a-option>\n      <a-option>Shenzhen</a-option>\n      <a-option>Wuhan</a-option>\n      <template #header>\n        <div style=\"padding: 6px 12px;\" >\n          <a-checkbox value=\"1\">全选</a-checkbox>\n        </div>\n      </template>\n    </a-select>\n  </a-space>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/select/__demo__/label.md",
    "content": "```yaml\ntitle:\n  zh-CN: 自定义选择框展示内容\n  en-US: Label\n```\n\n## zh-CN\n\n通过 `#label` 插槽可以自定义选择框展示内容。\n\n---\n\n## en-US\n\nThe display content of the select box can be customized through the `#label` slot.\n\n---\n\n```vue\n<template>\n  <a-select default-value=\"Beijing\" :style=\"{width:'320px'}\" placeholder=\"Please select ...\">\n    <template #label=\"{ data }\">\n      <span><icon-plus/>{{data?.label}}</span>\n    </template>\n    <a-option>Beijing</a-option>\n    <a-option>Shanghai</a-option>\n    <a-option>Guangzhou</a-option>\n    <a-option disabled>Disabled</a-option>\n  </a-select>\n</template>\n\n<script>\nimport { IconPlus } from '@arco-design/web-vue/es/icon';\n\nexport default {\n  components: { IconPlus }\n};\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/select/__demo__/linkage.md",
    "content": "```yaml\ntitle:\n  zh-CN: 联动选择框\n  en-US: Linkage Select\n```\n\n## zh-CN\n\n展示联动选择框的实现方法。\n\n---\n\n## en-US\n\nShow how to realize the linkage selection box.\n\n---\n\n```vue\n\n<template>\n  <a-space>\n    <a-select :style=\"{width:'200px'}\" v-model=\"province\">\n      <a-option v-for=\"value of Object.keys(data)\">{{value}}</a-option>\n    </a-select>\n    <a-select :style=\"{width:'200px'}\" :options=\"data[province] || []\" v-model=\"city\" />\n  </a-space>\n</template>\n\n<script>\nimport { ref, watch } from 'vue';\n\nexport default {\n  setup() {\n    const province = ref('Sichuan');\n    const city = ref('Chengdu');\n    const data = {\n      Beijing: ['Haidian', 'Chaoyang', 'Changping'],\n      Sichuan: ['Chengdu', 'Mianyang', 'Aba'],\n      Guangdong: ['Guangzhou', 'Shenzhen', 'Shantou']\n    };\n\n    watch(province, () => {\n      city.value = ''\n    })\n\n    return {\n      province,\n      city,\n      data\n    }\n  },\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/select/__demo__/loading.md",
    "content": "```yaml\ntitle:\n  zh-CN: 加载中\n  en-US: Loading\n```\n\n## zh-CN\n\n选择框和下拉菜单显示加载中状态。\n\n---\n\n## en-US\n\nSelect boxes and drop-down menus show loading status.\n\n---\n\n```vue\n<template>\n  <a-select :style=\"{width:'320px'}\" placeholder=\"Please select ...\" loading>\n    <a-option>Beijing</a-option>\n    <a-option>Shanghai</a-option>\n    <a-option>Guangzhou</a-option>\n    <a-option disabled>Disabled</a-option>\n  </a-select>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/select/__demo__/multiple.md",
    "content": "```yaml\ntitle:\n  zh-CN: 多选选择器\n  en-US: Multiple Select\n```\n\n## zh-CN\n\n通过设置 `multiple` ，可以让选择器支持多选。此外通过 `max-tag-count` 可以设置最多显示的标签个数。\n\n---\n\n## en-US\n\nBy setting `multiple`, the selector can support multiple selection. In addition, the maximum number of tags displayed\ncan be set by `max-tag-count`.\n\n---\n\n```vue\n\n<template>\n  <div style=\"margin-bottom: 10px\">\n    <a-switch v-model=\"scrollbar\" />\n    Virtual Scrollbar\n  </div>\n  <a-space direction=\"vertical\" size=\"large\">\n    <a-select :default-value=\"['Beijing','Shanghai']\" :style=\"{width:'360px'}\" placeholder=\"Please select ...\" multiple\n              :scrollbar=\"scrollbar\">\n      <a-option>Beijing</a-option>\n      <a-option :tag-props=\"{color:'red'}\">Shanghai</a-option>\n      <a-option>Guangzhou</a-option>\n      <a-option disabled>Disabled</a-option>\n      <a-option>Shenzhen</a-option>\n      <a-option>Wuhan</a-option>\n    </a-select>\n    <a-select :default-value=\"['Beijing','Shanghai','Guangzhou']\" :style=\"{width:'360px'}\"\n              placeholder=\"Please select ...\" multiple :max-tag-count=\"2\" allow-clear :scrollbar=\"scrollbar\">\n      <a-option>Beijing</a-option>\n      <a-option>Shanghai</a-option>\n      <a-option>Guangzhou</a-option>\n      <a-option disabled>Disabled</a-option>\n      <a-option>Shenzhen</a-option>\n      <a-option>Chengdu</a-option>\n      <a-option>Wuhan</a-option>\n    </a-select>\n    <a-select :default-value=\"['Beijing','Shanghai']\" :style=\"{width:'360px'}\" placeholder=\"Please select ...\" multiple\n              :limit=\"2\" :scrollbar=\"scrollbar\">\n      <a-option>Beijing</a-option>\n      <a-option :tag-props=\"{color:'red'}\">Shanghai</a-option>\n      <a-option>Guangzhou</a-option>\n      <a-option disabled>Disabled</a-option>\n      <a-option>Shenzhen</a-option>\n      <a-option>Wuhan</a-option>\n    </a-select>\n  </a-space>\n</template>\n\n<script>\nimport { ref } from 'vue'\n\nexport default {\n  setup() {\n    const scrollbar = ref(true);\n\n    return {\n      scrollbar\n    }\n  }\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/select/__demo__/remote.md",
    "content": "```yaml\ntitle:\n  zh-CN: 远程搜索\n  en-US: Remote search\n```\n\n## zh-CN\n\n使用 `search` 事件进行远程搜索，并改变选项。\n\n---\n\n## en-US\n\nUse the `search` event to search remotely and change options.\n\n---\n\n```vue\n\n<template>\n  <a-space direction=\"vertical\" size=\"large\">\n    <div>Show selections after search options</div>\n    <a-select :style=\"{width:'320px'}\" :loading=\"loading\" placeholder=\"Please select ...\" multiple\n              @search=\"handleSearch\" :filter-option=\"false\">\n      <a-option v-for=\"item of options\" :value=\"item\">{{item}}</a-option>\n    </a-select>\n    <div>Hide selections after search options</div>\n    <a-select :options=\"options\" :style=\"{width:'320px'}\" :loading=\"loading\" placeholder=\"Please select ...\" multiple\n              @search=\"handleSearch\" :filter-option=\"false\" :show-extra-options=\"false\" />\n  </a-space>\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n  setup() {\n    const options = ref(['Option1', 'Option2', 'Option3']);\n    const loading = ref(false);\n\n    const handleSearch = (value) => {\n      if (value) {\n        loading.value = true;\n        window.setTimeout(() => {\n          options.value = [`${value}-Option1`, `${value}-Option2`, `${value}-Option3`]\n          loading.value = false;\n        }, 2000)\n      } else {\n        options.value = []\n      }\n    };\n\n    return {\n      options,\n      loading,\n      handleSearch\n    }\n  },\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/select/__demo__/scroll.md",
    "content": "```yaml\ntitle:\n  zh-CN: 下拉菜单滚动\n  en-US: Dropdown Scroll\n```\n\n## zh-CN\n\n可以通过 `dropdown-scroll` 监听下拉菜单的滚动事件。或者通过 `dropdown-reach-bottom` 监听下拉菜单滚动到底部的事件。\n\n---\n\n## en-US\n\nYou can monitor the scroll event of the drop-down menu through `dropdown-scroll`. Or use `dropdown-reach-bottom` to monitor the event of the drop-down menu scrolling to the bottom.\n\n---\n\n```vue\n<template>\n  <a-select\n    :style=\"{width:'320px'}\"\n    default-value=\"Beijing\"\n    placeholder=\"Please select ...\"\n    @dropdown-scroll=\"handleScroll\"\n    @dropdown-reach-bottom=\"handleReachBottom\"\n  >\n    <a-option>Beijing</a-option>\n    <a-option>Shanghai</a-option>\n    <a-option>Guangzhou</a-option>\n    <a-option disabled>Disabled</a-option>\n    <a-option>Shenzhen</a-option>\n    <a-option>Chengdu</a-option>\n    <a-option>Wuhan</a-option>\n  </a-select>\n</template>\n\n<script>\nexport default {\n  setup() {\n    const handleScroll = (ev) => {\n      console.log('scroll', ev)\n    }\n    const handleReachBottom = (ev) => {\n      console.log('reach the bottom', ev)\n    }\n\n    return {\n      handleScroll,\n      handleReachBottom\n    }\n  },\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/select/__demo__/search.md",
    "content": "```yaml\ntitle:\n  zh-CN: 允许搜索\n  en-US: Allow Search\n```\n\n## zh-CN\n\n通过设置 `allow-search` ，可以让选择器支持对选项的搜索，配合 `filter-option` 可以自定义搜索。\n\n---\n\n## en-US\n\nBy setting `allow-search`, you can make the selector support searching for options, and you can customize the search with `filter-option`.\n\n---\n\n```vue\n<template>\n  <a-space direction=\"vertical\" size=\"large\">\n    <a-select :style=\"{width:'320px'}\" placeholder=\"Please select ...\" allow-search>\n      <a-option>Beijing</a-option>\n      <a-option>Shanghai</a-option>\n      <a-option>Guangzhou</a-option>\n      <a-option disabled>Disabled</a-option>\n      <a-option>Shenzhen</a-option>\n      <a-option>Chengdu</a-option>\n      <a-option>Wuhan</a-option>\n    </a-select>\n    <a-select :style=\"{width:'320px'}\" placeholder=\"Please select ...\" :allow-search=\"{ retainInputValue: true }\">\n      <a-option>Beijing</a-option>\n      <a-option>Shanghai</a-option>\n      <a-option>Guangzhou</a-option>\n      <a-option disabled>Disabled</a-option>\n      <a-option>Shenzhen</a-option>\n      <a-option>Chengdu</a-option>\n      <a-option>Wuhan</a-option>\n    </a-select>\n    <a-select :options=\"options\" :style=\"{width:'320px'}\" :loading=\"loading\" placeholder=\"Please select ...\" multiple\n              @search=\"handleSearch\" />\n  </a-space>\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n  setup() {\n    const options = ref(['Option1', 'Option2', 'Option3']);\n    const loading = ref(false);\n\n    const handleSearch = (value) => {\n      if (value) {\n        loading.value = true;\n        window.setTimeout(() => {\n          options.value = [`${value}-Option1`, `${value}-Option2`, `${value}-Option3`]\n          loading.value = false;\n        }, 2000)\n      } else {\n        options.value = []\n      }\n    };\n\n    return {\n      options,\n      loading,\n      handleSearch\n    }\n  },\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/select/__demo__/size.md",
    "content": "```yaml\ntitle:\n  zh-CN: 选择框大小\n  en-US: Select Size\n```\n\n## zh-CN\n\n选择框分为 `mini`、`small`、`medium`、`large` 四种尺寸。\n\n---\n\n## en-US\n\nThe selection box is divided into four sizes: `mini`, `small`, `medium`, and `large`.\n\n---\n\n```vue\n\n<template>\n  <a-space direction=\"vertical\" size=\"large\">\n    <a-radio-group type=\"button\" v-model=\"size\">\n      <a-radio value=\"mini\">Mini</a-radio>\n      <a-radio value=\"small\">Small</a-radio>\n      <a-radio value=\"medium\">Medium</a-radio>\n      <a-radio value=\"large\">Large</a-radio>\n    </a-radio-group>\n    <a-select default-value=\"Beijing\" :style=\"{width:'320px'}\" :size=\"size\" placeholder=\"Please select ...\">\n      <a-option>Beijing</a-option>\n      <a-option>Shanghai</a-option>\n      <a-option>Guangzhou</a-option>\n      <a-option disabled>Disabled</a-option>\n    </a-select>\n    <a-select :default-value=\"['Beijing','Shanghai']\" :style=\"{width:'320px'}\" :size=\"size\"\n              placeholder=\"Please select ...\" multiple>\n      <a-option>Beijing</a-option>\n      <a-option>Shanghai</a-option>\n      <a-option>Guangzhou</a-option>\n      <a-option disabled>Disabled</a-option>\n      <a-option>Shenzhen</a-option>\n      <a-option>Chengdu</a-option>\n      <a-option>Wuhan</a-option>\n    </a-select>\n  </a-space>\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n  setup() {\n    const size = ref('medium');\n\n    return {\n      size\n    }\n  },\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/select/__demo__/virtual-list.md",
    "content": "```yaml\ntitle:\n  zh-CN: 虚拟列表\n  en-US: Virtual List\n```\n\n## zh-CN\n\n虚拟列表的使用方法。\n\n---\n\n## en-US\n\nHow to use the virtual list.\n\n---\n\n```vue\n\n<template>\n  <a-select :style=\"{width:'320px'}\" :options=\"options\" placeholder=\"Please select ...\" :virtual-list-props=\"{height:200}\" />\n</template>\n\n<script>\nexport default {\n  setup() {\n    const options = Array(1000).fill(null).map((_, index) => `Option ${index}`);\n\n    return {\n      options\n    }\n  },\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/select/__test__/__snapshots__/demo.test.ts.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`<select> demo: render [basic] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-vertical\\\\\" style=\\\\\"column-gap: 24px; row-gap: 24px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-select-view-single arco-select arco-select-view arco-select-view-size-medium\\\\\" style=\\\\\"width: 320px;\\\\\" title=\\\\\"\\\\\"><!----><input class=\\\\\"arco-select-view-input\\\\\" readonly=\\\\\"\\\\\" placeholder=\\\\\"Please select ...\\\\\" value=\\\\\"\\\\\"><span class=\\\\\"arco-select-view-value arco-select-view-value-hidden\\\\\"><!----></span><span class=\\\\\"arco-select-view-suffix\\\\\"><!----><span class=\\\\\"arco-select-view-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down arco-select-view-arrow-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n    <!----></span></span>\n    <!---->\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-select-view-single arco-select arco-select-view arco-select-view-size-medium\\\\\" style=\\\\\"width: 320px;\\\\\" title=\\\\\"\\\\\"><!----><input class=\\\\\"arco-select-view-input\\\\\" readonly=\\\\\"\\\\\" placeholder=\\\\\"Please select ...\\\\\" value=\\\\\"\\\\\"><span class=\\\\\"arco-select-view-value arco-select-view-value-hidden\\\\\"><!----></span><span class=\\\\\"arco-select-view-suffix\\\\\"><!----><span class=\\\\\"arco-select-view-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down arco-select-view-arrow-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n    <!----></span></span>\n    <!---->\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-select-view-single arco-select arco-select-view arco-select-view-size-medium arco-select-view-disabled\\\\\" style=\\\\\"width: 320px;\\\\\" title=\\\\\"\\\\\"><!----><input class=\\\\\"arco-select-view-input\\\\\" readonly=\\\\\"\\\\\" placeholder=\\\\\"Please select ...\\\\\" disabled=\\\\\"\\\\\" value=\\\\\"\\\\\"><span class=\\\\\"arco-select-view-value arco-select-view-value-hidden\\\\\"><!----></span><span class=\\\\\"arco-select-view-suffix\\\\\"><!----><span class=\\\\\"arco-select-view-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down arco-select-view-arrow-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n    <!----></span></span>\n    <!---->\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-select-view-single arco-select arco-select-view arco-select-view-size-medium\\\\\" style=\\\\\"width: 320px;\\\\\" title=\\\\\"\\\\\"><!----><input class=\\\\\"arco-select-view-input\\\\\" readonly=\\\\\"\\\\\" placeholder=\\\\\"Please select ...\\\\\" value=\\\\\"\\\\\"><span class=\\\\\"arco-select-view-value arco-select-view-value-hidden\\\\\"><!----></span><span class=\\\\\"arco-select-view-suffix\\\\\"><!----><span class=\\\\\"arco-select-view-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down arco-select-view-arrow-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n    <!----></span></span>\n    <!---->\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div>Select Value: </div>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-select-view-single arco-select arco-select-view arco-select-view-size-medium\\\\\" style=\\\\\"width: 160px;\\\\\" title=\\\\\"\\\\\"><!----><input class=\\\\\"arco-select-view-input\\\\\" readonly=\\\\\"\\\\\" placeholder=\\\\\"Select\\\\\" value=\\\\\"\\\\\"><span class=\\\\\"arco-select-view-value arco-select-view-value-hidden\\\\\"><!----></span><span class=\\\\\"arco-select-view-suffix\\\\\"><!----><span class=\\\\\"arco-select-view-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down arco-select-view-arrow-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n    <!----></span></span>\n    <!---->\n  </div>\n</div>\"\n`;\n\nexports[`<select> demo: render [border] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-vertical\\\\\" style=\\\\\"column-gap: 24px; row-gap: 24px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-select-view-single arco-select-view-borderless arco-select arco-select-view arco-select-view-size-medium\\\\\" style=\\\\\"width: 100%;\\\\\" title=\\\\\"\\\\\"><!----><input class=\\\\\"arco-select-view-input\\\\\" readonly=\\\\\"\\\\\" placeholder=\\\\\"Please select ...\\\\\" value=\\\\\"\\\\\"><span class=\\\\\"arco-select-view-value arco-select-view-value-hidden\\\\\"><!----></span><span class=\\\\\"arco-select-view-suffix\\\\\"><!----><span class=\\\\\"arco-select-view-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down arco-select-view-arrow-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n    <!----></span></span>\n    <!---->\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-select-view arco-select-view-size-medium arco-select-view-has-suffix arco-select-view-has-placeholder arco-select-view-multiple arco-select-view-borderless arco-select\\\\\" style=\\\\\"width: 360px;\\\\\"><span class=\\\\\"arco-select-view-mirror\\\\\">Please select ...</span>\n    <!---->\n    <transition-group-stub tag=\\\\\"span\\\\\" name=\\\\\"input-tag-zoom\\\\\" appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\" class=\\\\\"arco-select-view-inner\\\\\"><input class=\\\\\"arco-select-view-input\\\\\" style=\\\\\"width: 12px;\\\\\" placeholder=\\\\\"Please select ...\\\\\"></transition-group-stub>\n    <!----><span class=\\\\\"arco-select-view-suffix\\\\\"><!----><span class=\\\\\"arco-select-view-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down arco-select-view-arrow-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n    <!---->\n    <!----></span></span>\n    <!---->\n  </div>\n</div>\"\n`;\n\nexports[`<select> demo: render [clear] correctly 1`] = `\n\"<span class=\\\\\"arco-select-view-single arco-select arco-select-view arco-select-view-size-medium\\\\\" style=\\\\\"width: 320px;\\\\\" title=\\\\\"\\\\\"><!----><input class=\\\\\"arco-select-view-input\\\\\" readonly=\\\\\"\\\\\" placeholder=\\\\\"Please select ...\\\\\" value=\\\\\"\\\\\"><span class=\\\\\"arco-select-view-value arco-select-view-value-hidden\\\\\"><!----></span><span class=\\\\\"arco-select-view-suffix\\\\\"><!----><span class=\\\\\"arco-select-view-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down arco-select-view-arrow-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n<!----></span></span>\"\n`;\n\nexports[`<select> demo: render [create] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-vertical\\\\\" style=\\\\\"column-gap: 24px; row-gap: 24px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-select-view-single arco-select arco-select-view arco-select-view-size-medium arco-select-view-search\\\\\" style=\\\\\"width: 320px;\\\\\" title=\\\\\"\\\\\"><!----><input class=\\\\\"arco-select-view-input\\\\\" placeholder=\\\\\"Please select ...\\\\\" value=\\\\\"\\\\\"><span class=\\\\\"arco-select-view-value arco-select-view-value-hidden\\\\\"><!----></span><span class=\\\\\"arco-select-view-suffix\\\\\"><!----><span class=\\\\\"arco-select-view-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down arco-select-view-arrow-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n    <!----></span></span>\n    <!---->\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-select-view arco-select-view-size-medium arco-select-view-has-suffix arco-select-view-has-placeholder arco-select-view-multiple arco-select\\\\\" style=\\\\\"width: 320px;\\\\\"><span class=\\\\\"arco-select-view-mirror\\\\\">Please select ...</span>\n    <!---->\n    <transition-group-stub tag=\\\\\"span\\\\\" name=\\\\\"input-tag-zoom\\\\\" appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\" class=\\\\\"arco-select-view-inner\\\\\"><input class=\\\\\"arco-select-view-input\\\\\" style=\\\\\"width: 12px;\\\\\" placeholder=\\\\\"Please select ...\\\\\"></transition-group-stub>\n    <!----><span class=\\\\\"arco-select-view-suffix\\\\\"><!----><span class=\\\\\"arco-select-view-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down arco-select-view-arrow-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n    <!---->\n    <!----></span></span>\n    <!---->\n  </div>\n</div>\"\n`;\n\nexports[`<select> demo: render [fallback] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-vertical\\\\\" style=\\\\\"column-gap: 24px; row-gap: 24px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-select-view-single arco-select arco-select-view arco-select-view-size-medium\\\\\" style=\\\\\"width: 320px;\\\\\" title=\\\\\"\\\\\"><!----><input class=\\\\\"arco-select-view-input\\\\\" readonly=\\\\\"\\\\\" placeholder=\\\\\"Please select ...\\\\\" value=\\\\\"\\\\\"><span class=\\\\\"arco-select-view-value arco-select-view-value-hidden\\\\\"><!----></span><span class=\\\\\"arco-select-view-suffix\\\\\"><!----><span class=\\\\\"arco-select-view-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down arco-select-view-arrow-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n    <!----></span></span>\n    <!---->\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-select-view-single arco-select arco-select-view arco-select-view-size-medium\\\\\" style=\\\\\"width: 320px;\\\\\" title=\\\\\"\\\\\"><!----><input class=\\\\\"arco-select-view-input\\\\\" readonly=\\\\\"\\\\\" placeholder=\\\\\"Please select ...\\\\\" value=\\\\\"\\\\\"><span class=\\\\\"arco-select-view-value arco-select-view-value-hidden\\\\\"><!----></span><span class=\\\\\"arco-select-view-suffix\\\\\"><!----><span class=\\\\\"arco-select-view-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down arco-select-view-arrow-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n    <!----></span></span>\n    <!---->\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-select-view arco-select-view-size-medium arco-select-view-has-suffix arco-select-view-has-placeholder arco-select-view-multiple arco-select\\\\\" style=\\\\\"width: 320px;\\\\\"><span class=\\\\\"arco-select-view-mirror\\\\\">Please select ...</span>\n    <!---->\n    <transition-group-stub tag=\\\\\"span\\\\\" name=\\\\\"input-tag-zoom\\\\\" appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\" class=\\\\\"arco-select-view-inner\\\\\"><input class=\\\\\"arco-select-view-input\\\\\" style=\\\\\"width: 12px;\\\\\" placeholder=\\\\\"Please select ...\\\\\"></transition-group-stub>\n    <!----><span class=\\\\\"arco-select-view-suffix\\\\\"><!----><span class=\\\\\"arco-select-view-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down arco-select-view-arrow-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n    <!---->\n    <!----></span></span>\n    <!---->\n  </div>\n</div>\"\n`;\n\nexports[`<select> demo: render [field-names] correctly 1`] = `\n\"<span class=\\\\\"arco-select-view-single arco-select arco-select-view arco-select-view-size-medium\\\\\" style=\\\\\"width: 320px;\\\\\" title=\\\\\"Beijing\\\\\"><!----><input class=\\\\\"arco-select-view-input arco-select-view-input-hidden\\\\\" readonly=\\\\\"\\\\\" placeholder=\\\\\"Please select ...\\\\\" value=\\\\\"\\\\\"><span class=\\\\\"arco-select-view-value\\\\\">Beijing</span><span class=\\\\\"arco-select-view-suffix\\\\\"><!----><span class=\\\\\"arco-select-view-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down arco-select-view-arrow-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n<!----></span></span>\"\n`;\n\nexports[`<select> demo: render [footer] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 8px; row-gap: 8px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-select-view-single arco-select arco-select-view arco-select-view-size-medium arco-select-view-search\\\\\" style=\\\\\"width: 360px;\\\\\" title=\\\\\"\\\\\"><!----><input class=\\\\\"arco-select-view-input\\\\\" placeholder=\\\\\"Please select ...\\\\\" value=\\\\\"\\\\\"><span class=\\\\\"arco-select-view-value arco-select-view-value-hidden\\\\\"><!----></span><span class=\\\\\"arco-select-view-suffix\\\\\"><!----><span class=\\\\\"arco-select-view-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down arco-select-view-arrow-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n    <!----></span></span>\n    <!---->\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-select-view-single arco-select arco-select-view arco-select-view-size-medium arco-select-view-search\\\\\" style=\\\\\"width: 360px;\\\\\" title=\\\\\"\\\\\"><!----><input class=\\\\\"arco-select-view-input\\\\\" placeholder=\\\\\"Please select ...\\\\\" value=\\\\\"\\\\\"><span class=\\\\\"arco-select-view-value arco-select-view-value-hidden\\\\\"><!----></span><span class=\\\\\"arco-select-view-suffix\\\\\"><!----><span class=\\\\\"arco-select-view-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down arco-select-view-arrow-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n    <!----></span></span>\n    <!---->\n  </div>\n</div>\"\n`;\n\nexports[`<select> demo: render [group] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-vertical\\\\\" style=\\\\\"column-gap: 24px; row-gap: 24px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-select-view-single arco-select arco-select-view arco-select-view-size-medium\\\\\" style=\\\\\"width: 320px;\\\\\" title=\\\\\"\\\\\"><!----><input class=\\\\\"arco-select-view-input\\\\\" readonly=\\\\\"\\\\\" placeholder=\\\\\"Please select ...\\\\\" value=\\\\\"\\\\\"><span class=\\\\\"arco-select-view-value arco-select-view-value-hidden\\\\\"><!----></span><span class=\\\\\"arco-select-view-suffix\\\\\"><!----><span class=\\\\\"arco-select-view-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down arco-select-view-arrow-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n    <!----></span></span>\n    <!---->\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-select-view arco-select-view-size-medium arco-select-view-has-suffix arco-select-view-has-placeholder arco-select-view-multiple arco-select\\\\\" style=\\\\\"width: 320px;\\\\\"><span class=\\\\\"arco-select-view-mirror\\\\\">Please select ...</span>\n    <!---->\n    <transition-group-stub tag=\\\\\"span\\\\\" name=\\\\\"input-tag-zoom\\\\\" appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\" class=\\\\\"arco-select-view-inner\\\\\"><input class=\\\\\"arco-select-view-input\\\\\" style=\\\\\"width: 12px;\\\\\" placeholder=\\\\\"Please select ...\\\\\"></transition-group-stub>\n    <!----><span class=\\\\\"arco-select-view-suffix\\\\\"><!----><span class=\\\\\"arco-select-view-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down arco-select-view-arrow-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n    <!---->\n    <!----></span></span>\n    <!---->\n  </div>\n</div>\"\n`;\n\nexports[`<select> demo: render [header] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 8px; row-gap: 8px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-select-view arco-select-view-size-medium arco-select-view-has-suffix arco-select-view-has-placeholder arco-select-view-multiple arco-select\\\\\" style=\\\\\"width: 360px;\\\\\"><span class=\\\\\"arco-select-view-mirror\\\\\">Please select ...</span>\n    <!---->\n    <transition-group-stub tag=\\\\\"span\\\\\" name=\\\\\"input-tag-zoom\\\\\" appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\" class=\\\\\"arco-select-view-inner\\\\\"><input class=\\\\\"arco-select-view-input\\\\\" style=\\\\\"width: 12px;\\\\\" placeholder=\\\\\"Please select ...\\\\\"></transition-group-stub>\n    <!----><span class=\\\\\"arco-select-view-suffix\\\\\"><!----><span class=\\\\\"arco-select-view-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down arco-select-view-arrow-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n    <!---->\n    <!----></span></span>\n    <!---->\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-select-view arco-select-view-size-medium arco-select-view-has-suffix arco-select-view-has-placeholder arco-select-view-multiple arco-select\\\\\" style=\\\\\"width: 360px;\\\\\"><span class=\\\\\"arco-select-view-mirror\\\\\">Please select ...</span>\n    <!---->\n    <transition-group-stub tag=\\\\\"span\\\\\" name=\\\\\"input-tag-zoom\\\\\" appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\" class=\\\\\"arco-select-view-inner\\\\\"><input class=\\\\\"arco-select-view-input\\\\\" style=\\\\\"width: 12px;\\\\\" placeholder=\\\\\"Please select ...\\\\\"></transition-group-stub>\n    <!----><span class=\\\\\"arco-select-view-suffix\\\\\"><!----><span class=\\\\\"arco-select-view-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down arco-select-view-arrow-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n    <!---->\n    <!----></span></span>\n    <!---->\n  </div>\n</div>\"\n`;\n\nexports[`<select> demo: render [label] correctly 1`] = `\n\"<span class=\\\\\"arco-select-view-single arco-select arco-select-view arco-select-view-size-medium\\\\\" style=\\\\\"width: 320px;\\\\\" title=\\\\\"\\\\\"><!----><input class=\\\\\"arco-select-view-input\\\\\" readonly=\\\\\"\\\\\" placeholder=\\\\\"Please select ...\\\\\" value=\\\\\"\\\\\"><span class=\\\\\"arco-select-view-value arco-select-view-value-hidden\\\\\"><!----></span><span class=\\\\\"arco-select-view-suffix\\\\\"><!----><span class=\\\\\"arco-select-view-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down arco-select-view-arrow-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n<!----></span></span>\"\n`;\n\nexports[`<select> demo: render [linkage] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 8px; row-gap: 8px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-select-view-single arco-select arco-select-view arco-select-view-size-medium\\\\\" style=\\\\\"width: 200px;\\\\\" title=\\\\\"\\\\\"><!----><input class=\\\\\"arco-select-view-input\\\\\" readonly=\\\\\"\\\\\" value=\\\\\"\\\\\"><span class=\\\\\"arco-select-view-value arco-select-view-value-hidden\\\\\"><!----></span><span class=\\\\\"arco-select-view-suffix\\\\\"><!----><span class=\\\\\"arco-select-view-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down arco-select-view-arrow-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n    <!----></span></span>\n    <!---->\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-select-view-single arco-select arco-select-view arco-select-view-size-medium\\\\\" style=\\\\\"width: 200px;\\\\\" title=\\\\\"Chengdu\\\\\"><!----><input class=\\\\\"arco-select-view-input arco-select-view-input-hidden\\\\\" readonly=\\\\\"\\\\\" value=\\\\\"\\\\\"><span class=\\\\\"arco-select-view-value\\\\\">Chengdu</span><span class=\\\\\"arco-select-view-suffix\\\\\"><!----><span class=\\\\\"arco-select-view-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down arco-select-view-arrow-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n    <!----></span></span>\n    <!---->\n  </div>\n</div>\"\n`;\n\nexports[`<select> demo: render [loading] correctly 1`] = `\n\"<span class=\\\\\"arco-select-view-single arco-select arco-select-view arco-select-view-size-medium\\\\\" style=\\\\\"width: 320px;\\\\\" title=\\\\\"\\\\\"><!----><input class=\\\\\"arco-select-view-input\\\\\" readonly=\\\\\"\\\\\" placeholder=\\\\\"Please select ...\\\\\" value=\\\\\"\\\\\"><span class=\\\\\"arco-select-view-value arco-select-view-value-hidden\\\\\"><!----></span><span class=\\\\\"arco-select-view-suffix\\\\\"><!----><span class=\\\\\"arco-select-view-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-loading\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M42 24c0 9.941-8.059 18-18 18S6 33.941 6 24 14.059 6 24 6\\\\\"></path></svg></span>\n<!----></span></span>\"\n`;\n\nexports[`<select> demo: render [multiple] correctly 1`] = `\n\"<div style=\\\\\"margin-bottom: 10px;\\\\\"><button type=\\\\\"button\\\\\" role=\\\\\"switch\\\\\" aria-checked=\\\\\"true\\\\\" class=\\\\\"arco-switch arco-switch-type-circle arco-switch-checked\\\\\"><span class=\\\\\"arco-switch-handle\\\\\"><span class=\\\\\"arco-switch-handle-icon\\\\\"></span></span><!--  prettier-ignore  -->\n    <!--v-if-->\n  </button> Virtual Scrollbar </div>\n<div class=\\\\\"arco-space arco-space-vertical\\\\\" style=\\\\\"column-gap: 24px; row-gap: 24px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-select-view arco-select-view-size-medium arco-select-view-has-suffix arco-select-view-has-placeholder arco-select-view-multiple arco-select\\\\\" style=\\\\\"width: 360px;\\\\\"><span class=\\\\\"arco-select-view-mirror\\\\\">Please select ...</span>\n    <!---->\n    <transition-group-stub tag=\\\\\"span\\\\\" name=\\\\\"input-tag-zoom\\\\\" appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\" class=\\\\\"arco-select-view-inner\\\\\"><input class=\\\\\"arco-select-view-input\\\\\" style=\\\\\"width: 12px;\\\\\" placeholder=\\\\\"Please select ...\\\\\"></transition-group-stub>\n    <!----><span class=\\\\\"arco-select-view-suffix\\\\\"><!----><span class=\\\\\"arco-select-view-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down arco-select-view-arrow-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n    <!---->\n    <!----></span></span>\n    <!---->\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-select-view arco-select-view-size-medium arco-select-view-has-suffix arco-select-view-has-placeholder arco-select-view-multiple arco-select\\\\\" style=\\\\\"width: 360px;\\\\\"><span class=\\\\\"arco-select-view-mirror\\\\\">Please select ...</span>\n    <!---->\n    <transition-group-stub tag=\\\\\"span\\\\\" name=\\\\\"input-tag-zoom\\\\\" appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\" class=\\\\\"arco-select-view-inner\\\\\"><input class=\\\\\"arco-select-view-input\\\\\" style=\\\\\"width: 12px;\\\\\" placeholder=\\\\\"Please select ...\\\\\"></transition-group-stub>\n    <!----><span class=\\\\\"arco-select-view-suffix\\\\\"><!----><span class=\\\\\"arco-select-view-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down arco-select-view-arrow-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n    <!---->\n    <!----></span></span>\n    <!---->\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-select-view arco-select-view-size-medium arco-select-view-has-suffix arco-select-view-has-placeholder arco-select-view-multiple arco-select\\\\\" style=\\\\\"width: 360px;\\\\\"><span class=\\\\\"arco-select-view-mirror\\\\\">Please select ...</span>\n    <!---->\n    <transition-group-stub tag=\\\\\"span\\\\\" name=\\\\\"input-tag-zoom\\\\\" appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\" class=\\\\\"arco-select-view-inner\\\\\"><input class=\\\\\"arco-select-view-input\\\\\" style=\\\\\"width: 12px;\\\\\" placeholder=\\\\\"Please select ...\\\\\"></transition-group-stub>\n    <!----><span class=\\\\\"arco-select-view-suffix\\\\\"><!----><span class=\\\\\"arco-select-view-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down arco-select-view-arrow-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n    <!---->\n    <!----></span></span>\n    <!---->\n  </div>\n</div>\"\n`;\n\nexports[`<select> demo: render [remote] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-vertical\\\\\" style=\\\\\"column-gap: 24px; row-gap: 24px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div>Show selections after search options</div>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-select-view arco-select-view-size-medium arco-select-view-has-suffix arco-select-view-has-placeholder arco-select-view-multiple arco-select\\\\\" style=\\\\\"width: 320px;\\\\\"><span class=\\\\\"arco-select-view-mirror\\\\\">Please select ...</span>\n    <!---->\n    <transition-group-stub tag=\\\\\"span\\\\\" name=\\\\\"input-tag-zoom\\\\\" appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\" class=\\\\\"arco-select-view-inner\\\\\"><input class=\\\\\"arco-select-view-input\\\\\" style=\\\\\"width: 12px;\\\\\" placeholder=\\\\\"Please select ...\\\\\"></transition-group-stub>\n    <!----><span class=\\\\\"arco-select-view-suffix\\\\\"><!----><span class=\\\\\"arco-select-view-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down arco-select-view-arrow-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n    <!---->\n    <!----></span></span>\n    <!---->\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div>Hide selections after search options</div>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-select-view arco-select-view-size-medium arco-select-view-has-suffix arco-select-view-has-placeholder arco-select-view-multiple arco-select\\\\\" style=\\\\\"width: 320px;\\\\\"><span class=\\\\\"arco-select-view-mirror\\\\\">Please select ...</span>\n    <!---->\n    <transition-group-stub tag=\\\\\"span\\\\\" name=\\\\\"input-tag-zoom\\\\\" appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\" class=\\\\\"arco-select-view-inner\\\\\"><input class=\\\\\"arco-select-view-input\\\\\" style=\\\\\"width: 12px;\\\\\" placeholder=\\\\\"Please select ...\\\\\"></transition-group-stub>\n    <!----><span class=\\\\\"arco-select-view-suffix\\\\\"><!----><span class=\\\\\"arco-select-view-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down arco-select-view-arrow-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n    <!---->\n    <!----></span></span>\n    <!---->\n  </div>\n</div>\"\n`;\n\nexports[`<select> demo: render [scroll] correctly 1`] = `\n\"<span class=\\\\\"arco-select-view-single arco-select arco-select-view arco-select-view-size-medium\\\\\" style=\\\\\"width: 320px;\\\\\" title=\\\\\"\\\\\"><!----><input class=\\\\\"arco-select-view-input\\\\\" readonly=\\\\\"\\\\\" placeholder=\\\\\"Please select ...\\\\\" value=\\\\\"\\\\\"><span class=\\\\\"arco-select-view-value arco-select-view-value-hidden\\\\\"><!----></span><span class=\\\\\"arco-select-view-suffix\\\\\"><!----><span class=\\\\\"arco-select-view-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down arco-select-view-arrow-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n<!----></span></span>\"\n`;\n\nexports[`<select> demo: render [search] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-vertical\\\\\" style=\\\\\"column-gap: 24px; row-gap: 24px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-select-view-single arco-select arco-select-view arco-select-view-size-medium arco-select-view-search\\\\\" style=\\\\\"width: 320px;\\\\\" title=\\\\\"\\\\\"><!----><input class=\\\\\"arco-select-view-input\\\\\" placeholder=\\\\\"Please select ...\\\\\" value=\\\\\"\\\\\"><span class=\\\\\"arco-select-view-value arco-select-view-value-hidden\\\\\"><!----></span><span class=\\\\\"arco-select-view-suffix\\\\\"><!----><span class=\\\\\"arco-select-view-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down arco-select-view-arrow-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n    <!----></span></span>\n    <!---->\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-select-view-single arco-select arco-select-view arco-select-view-size-medium arco-select-view-search\\\\\" style=\\\\\"width: 320px;\\\\\" title=\\\\\"\\\\\"><!----><input class=\\\\\"arco-select-view-input\\\\\" placeholder=\\\\\"Please select ...\\\\\" value=\\\\\"\\\\\"><span class=\\\\\"arco-select-view-value arco-select-view-value-hidden\\\\\"><!----></span><span class=\\\\\"arco-select-view-suffix\\\\\"><!----><span class=\\\\\"arco-select-view-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down arco-select-view-arrow-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n    <!----></span></span>\n    <!---->\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-select-view arco-select-view-size-medium arco-select-view-has-suffix arco-select-view-has-placeholder arco-select-view-multiple arco-select\\\\\" style=\\\\\"width: 320px;\\\\\"><span class=\\\\\"arco-select-view-mirror\\\\\">Please select ...</span>\n    <!---->\n    <transition-group-stub tag=\\\\\"span\\\\\" name=\\\\\"input-tag-zoom\\\\\" appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\" class=\\\\\"arco-select-view-inner\\\\\"><input class=\\\\\"arco-select-view-input\\\\\" style=\\\\\"width: 12px;\\\\\" placeholder=\\\\\"Please select ...\\\\\"></transition-group-stub>\n    <!----><span class=\\\\\"arco-select-view-suffix\\\\\"><!----><span class=\\\\\"arco-select-view-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down arco-select-view-arrow-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n    <!---->\n    <!----></span></span>\n    <!---->\n  </div>\n</div>\"\n`;\n\nexports[`<select> demo: render [size] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-vertical\\\\\" style=\\\\\"column-gap: 24px; row-gap: 24px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-radio-group-button arco-radio-group-size-medium arco-radio-group-direction-horizontal\\\\\"><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"mini\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">Mini</span></label><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"small\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">Small</span></label><label class=\\\\\"arco-radio-button arco-radio-checked\\\\\"><input type=\\\\\"radio\\\\\" checked=\\\\\"\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"medium\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">Medium</span></label><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"large\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">Large</span></label></span></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-select-view-single arco-select arco-select-view arco-select-view-size-medium\\\\\" style=\\\\\"width: 320px;\\\\\" title=\\\\\"\\\\\"><!----><input class=\\\\\"arco-select-view-input\\\\\" readonly=\\\\\"\\\\\" placeholder=\\\\\"Please select ...\\\\\" value=\\\\\"\\\\\"><span class=\\\\\"arco-select-view-value arco-select-view-value-hidden\\\\\"><!----></span><span class=\\\\\"arco-select-view-suffix\\\\\"><!----><span class=\\\\\"arco-select-view-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down arco-select-view-arrow-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n    <!----></span></span>\n    <!---->\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-select-view arco-select-view-size-medium arco-select-view-has-suffix arco-select-view-has-placeholder arco-select-view-multiple arco-select\\\\\" style=\\\\\"width: 320px;\\\\\"><span class=\\\\\"arco-select-view-mirror\\\\\">Please select ...</span>\n    <!---->\n    <transition-group-stub tag=\\\\\"span\\\\\" name=\\\\\"input-tag-zoom\\\\\" appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\" class=\\\\\"arco-select-view-inner\\\\\"><input class=\\\\\"arco-select-view-input\\\\\" style=\\\\\"width: 12px;\\\\\" placeholder=\\\\\"Please select ...\\\\\"></transition-group-stub>\n    <!----><span class=\\\\\"arco-select-view-suffix\\\\\"><!----><span class=\\\\\"arco-select-view-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down arco-select-view-arrow-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n    <!---->\n    <!----></span></span>\n    <!---->\n  </div>\n</div>\"\n`;\n\nexports[`<select> demo: render [virtual-list] correctly 1`] = `\n\"<span class=\\\\\"arco-select-view-single arco-select arco-select-view arco-select-view-size-medium\\\\\" style=\\\\\"width: 320px;\\\\\" title=\\\\\"\\\\\"><!----><input class=\\\\\"arco-select-view-input\\\\\" readonly=\\\\\"\\\\\" placeholder=\\\\\"Please select ...\\\\\" value=\\\\\"\\\\\"><span class=\\\\\"arco-select-view-value arco-select-view-value-hidden\\\\\"><!----></span><span class=\\\\\"arco-select-view-suffix\\\\\"><!----><span class=\\\\\"arco-select-view-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down arco-select-view-arrow-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n<!----></span></span>\"\n`;\n"
  },
  {
    "path": "packages/web-vue/components/select/__test__/__snapshots__/index.test.ts.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Select show dropdown correctly 1`] = `\"<body><div class=\\\\\"arco-trigger-popup arco-trigger-position-bl\\\\\" style=\\\\\"z-index: 1001; pointer-events: auto; left: 0px; top: 4px; width: 0px;\\\\\" trigger-placement=\\\\\"bl\\\\\"><transition-stub name=\\\\\"slide-dynamic-origin\\\\\" appear=\\\\\"true\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"><div class=\\\\\"arco-trigger-popup-wrapper\\\\\" style=\\\\\"transform-origin: 0 0;\\\\\"><div class=\\\\\"arco-trigger-content\\\\\"><div class=\\\\\"arco-select-dropdown\\\\\"><!--v-if--><!--v-if--><!--v-if--><div class=\\\\\"arco-scrollbar arco-scrollbar-type-embed\\\\\"><div class=\\\\\"arco-scrollbar-container arco-select-dropdown-list-wrapper\\\\\"><ul class=\\\\\"arco-select-dropdown-list\\\\\"><li class=\\\\\"arco-select-option arco-select-option-active\\\\\"><!--v-if--><span class=\\\\\"arco-select-option-content\\\\\">Beijing</span><!--v-if--></li><li class=\\\\\"arco-select-option\\\\\"><!--v-if--><span class=\\\\\"arco-select-option-content\\\\\">Shanghai</span><!--v-if--></li><li class=\\\\\"arco-select-option\\\\\"><!--v-if--><span class=\\\\\"arco-select-option-content\\\\\">Guangzhou</span><!--v-if--></li><li class=\\\\\"arco-select-option\\\\\"><!--v-if--><span class=\\\\\"arco-select-option-content\\\\\">Chengdu</span><!--v-if--></li></ul></div><!--v-if--><!--v-if--></div><!--v-if--></div></div><!----></div></transition-stub></div></body>\"`;\n"
  },
  {
    "path": "packages/web-vue/components/select/__test__/demo.test.ts",
    "content": "import demoTest from '../../../scripts/demo-test';\n\ndemoTest('select');\n"
  },
  {
    "path": "packages/web-vue/components/select/__test__/index.test.ts",
    "content": "import { mount } from '@vue/test-utils';\nimport Select from '../index';\n\ndescribe('Select', () => {\n  test('show dropdown correctly', async () => {\n    const wrapper = mount(Select, {\n      props: {\n        options: ['Beijing', 'Shanghai', 'Guangzhou', 'Chengdu'],\n      },\n    });\n\n    await wrapper.find('.arco-select-view').trigger('click');\n\n    expect(document.body.outerHTML).toMatchSnapshot();\n  });\n\n  test('keyboard correctly', async () => {\n    const wrapper = mount(Select, {\n      props: {\n        options: ['Beijing', 'Shanghai', 'Guangzhou'],\n      },\n    });\n\n    const input = wrapper.find('input');\n    await input.trigger('click');\n    const dropdown = wrapper.findComponent({ name: 'SelectDropdown' });\n    await input.trigger('keydown', { key: 'ArrowUp' });\n\n    expect(dropdown.find('.arco-select-option-active').text()).toBe(\n      'Guangzhou'\n    );\n\n    await input.trigger('keydown', { key: 'ArrowDown' });\n\n    expect(dropdown.find('.arco-select-option-active').text()).toBe('Beijing');\n\n    await input.trigger('keydown', { key: 'Enter' });\n\n    expect(wrapper.emitted('change')?.[0]).toEqual(['Beijing']);\n  });\n\n  test('should support mouse', async () => {\n    const wrapper = mount(Select, {\n      props: {\n        options: ['Beijing', 'Shanghai', 'Guangzhou'],\n      },\n    });\n\n    const input = wrapper.find('input');\n    await input.trigger('click');\n    const dropdown = wrapper.findComponent({ name: 'SelectDropdown' });\n    const options = dropdown.findAll('.arco-select-option');\n    await options[0].trigger('mouseenter');\n    await options[0].trigger('mouseleave');\n    await options[1].trigger('mouseenter');\n    await options[1].trigger('click');\n\n    expect(wrapper.emitted('change')?.[0]).toEqual(['Shanghai']);\n  });\n\n  test('should show search option', async () => {\n    const wrapper = mount(Select, {\n      props: {\n        options: ['Beijing', 'Shanghai', 'Guangzhou'],\n        allowSearch: true,\n      },\n    });\n\n    const input = wrapper.find('input');\n    await input.trigger('click');\n    await input.setValue('sh');\n    const dropdown = wrapper.findComponent({ name: 'SelectDropdown' });\n    const option = dropdown.find('.arco-select-option');\n    expect(option.text()).toBe('Shanghai');\n  });\n\n  test('should enable create option', async () => {\n    const wrapper = mount(Select, {\n      props: {\n        options: ['Beijing', 'Shanghai', 'Guangzhou'],\n        allowCreate: true,\n      },\n    });\n\n    const input = wrapper.find('input');\n    await input.trigger('click');\n    await input.setValue('Xian');\n    await input.trigger('keydown', { key: 'Enter' });\n\n    expect(wrapper.emitted('change')?.[0]).toEqual(['Xian']);\n  });\n});\n"
  },
  {
    "path": "packages/web-vue/components/select/context.ts",
    "content": "import type { InjectionKey } from 'vue';\nimport type { FilterOption, SelectOptionInfo } from './interface';\n\nexport interface SelectContext {\n  multiple?: boolean;\n  valueKey?: string;\n  inputValue?: string;\n  filterOption?: FilterOption;\n  component?: string;\n  valueKeys: string[];\n  activeKey: string | undefined;\n  onSelect: (key: string, ev: Event) => void;\n  setActiveKey: (key?: string) => void;\n  getNextSlotOptionIndex: () => number;\n  addSlotOptionInfo: (id: number, optionInfo: SelectOptionInfo) => void;\n  removeSlotOptionInfo: (id: number) => void;\n}\n\nexport const selectInjectionKey: InjectionKey<SelectContext> =\n  Symbol('ArcoSelectContext');\n"
  },
  {
    "path": "packages/web-vue/components/select/hooks/use-options.ts",
    "content": "import type { Ref } from 'vue';\nimport { computed, reactive, ref, watch } from 'vue';\nimport type {\n  FilterOption,\n  SelectOption,\n  SelectOptionInfo,\n  SelectFieldNames,\n} from '../interface';\nimport { getOptionInfos, getValidOptions, isValidOption } from '../utils';\nimport { isNumber } from '../../_utils/is';\n\nconst DEFAULT_FIELD_NAMES = {\n  value: 'value',\n  label: 'label',\n  disabled: 'disabled',\n  tagProps: 'tagProps',\n  render: 'render',\n};\n\nexport const useOptions = ({\n  options,\n  extraOptions,\n  inputValue,\n  filterOption,\n  showExtraOptions,\n  valueKey,\n  fieldNames,\n}: {\n  options?: Ref<SelectOption[]>;\n  extraOptions?: Ref<SelectOption[]>;\n  inputValue?: Ref<string>;\n  filterOption?: Ref<FilterOption>;\n  showExtraOptions?: Ref<boolean>;\n  valueKey?: Ref<string>;\n  fieldNames?: Ref<SelectFieldNames | undefined>;\n}) => {\n  const mergedFieldNames = computed(() => ({\n    ...DEFAULT_FIELD_NAMES,\n    ...fieldNames?.value,\n  }));\n\n  const slotOptionInfoMap = reactive(new Map<number, SelectOptionInfo>());\n  const sortedSlotOptionInfos = computed<SelectOptionInfo[]>(() =>\n    Array.from(slotOptionInfoMap.values()).sort((a, b) => {\n      if (isNumber(a.index) && isNumber(b.index)) {\n        return a.index - b.index;\n      }\n      return 0;\n    })\n  );\n\n  const propOptionData = computed(() => {\n    const optionInfoMap = new Map<string, SelectOptionInfo>();\n    const optionInfos = getOptionInfos(options?.value ?? [], {\n      valueKey: valueKey?.value ?? 'value',\n      fieldNames: mergedFieldNames.value,\n      origin: 'options',\n      optionInfoMap,\n    });\n\n    return {\n      optionInfos,\n      optionInfoMap,\n    };\n  });\n\n  const extraOptionData = computed(() => {\n    const optionInfoMap = new Map<string, SelectOptionInfo>();\n\n    const optionInfos = getOptionInfos(extraOptions?.value ?? [], {\n      valueKey: valueKey?.value ?? 'value',\n      fieldNames: mergedFieldNames.value,\n      origin: 'extraOptions',\n      optionInfoMap,\n    });\n    return {\n      optionInfos,\n      optionInfoMap,\n    };\n  });\n\n  const optionInfoMap = reactive(new Map<string, SelectOptionInfo>());\n\n  watch(\n    [\n      sortedSlotOptionInfos,\n      options ?? ref([]),\n      extraOptions ?? ref([]),\n      valueKey ?? ref('value'),\n    ],\n    () => {\n      optionInfoMap.clear();\n\n      sortedSlotOptionInfos.value.forEach((info, index) => {\n        optionInfoMap.set(info.key, { ...info, index });\n      });\n      propOptionData.value.optionInfoMap.forEach((info) => {\n        if (!optionInfoMap.has(info.key)) {\n          info.index = optionInfoMap.size;\n          optionInfoMap.set(info.key, info);\n        }\n      });\n      extraOptionData.value.optionInfoMap.forEach((info) => {\n        if (!optionInfoMap.has(info.key)) {\n          info.index = optionInfoMap.size;\n          optionInfoMap.set(info.key, info);\n        }\n      });\n    },\n    { immediate: true, deep: true }\n  );\n\n  const validOptions = computed(() => {\n    const options = getValidOptions(propOptionData.value.optionInfos, {\n      inputValue: inputValue?.value,\n      filterOption: filterOption?.value,\n    });\n    if (showExtraOptions?.value ?? true) {\n      options.push(\n        ...getValidOptions(extraOptionData.value.optionInfos, {\n          inputValue: inputValue?.value,\n          filterOption: filterOption?.value,\n        })\n      );\n    }\n    return options;\n  });\n\n  const validOptionInfos = computed(() =>\n    Array.from(optionInfoMap.values()).filter((optionInfo) => {\n      if (\n        optionInfo.origin === 'extraOptions' &&\n        showExtraOptions?.value === false\n      ) {\n        return false;\n      }\n      return isValidOption(optionInfo, {\n        inputValue: inputValue?.value,\n        filterOption: filterOption?.value,\n      });\n    })\n  );\n\n  const enabledOptionKeys = computed(() =>\n    validOptionInfos.value\n      .filter((optionInfo) => !optionInfo.disabled)\n      .map((info) => info.key)\n  );\n\n  const getNextSlotOptionIndex = () => slotOptionInfoMap.size;\n\n  const addSlotOptionInfo = (id: number, optionInfo: SelectOptionInfo) => {\n    slotOptionInfoMap.set(id, optionInfo);\n  };\n\n  const removeSlotOptionInfo = (id: number) => {\n    slotOptionInfoMap.delete(id);\n  };\n\n  return {\n    validOptions,\n    optionInfoMap,\n    validOptionInfos,\n    enabledOptionKeys,\n    getNextSlotOptionIndex,\n    addSlotOptionInfo,\n    removeSlotOptionInfo,\n  };\n};\n"
  },
  {
    "path": "packages/web-vue/components/select/hooks/use-select.ts",
    "content": "import type { ComponentPublicInstance, Ref } from 'vue';\nimport { nextTick, provide, reactive, ref, watch } from 'vue';\nimport { FilterOption, SelectOption, SelectFieldNames } from '../interface';\nimport { VirtualListRef } from '../../_components/virtual-list-v2/interface';\nimport { getRelativeRect } from '../../_utils/dom';\nimport { useOptions } from './use-options';\nimport { KEYBOARD_KEY, getKeyDownHandler } from '../../_utils/keyboard';\nimport { selectInjectionKey } from '../context';\n\nexport const useSelect = ({\n  multiple,\n  options,\n  extraOptions,\n  inputValue,\n  filterOption,\n  showExtraOptions,\n  component,\n  valueKey,\n  fieldNames,\n  loading,\n  popupVisible,\n  valueKeys,\n  dropdownRef,\n  optionRefs,\n  virtualListRef,\n  onSelect,\n  onPopupVisibleChange,\n  enterToOpen = true,\n  defaultActiveFirstOption,\n}: {\n  multiple?: Ref<boolean>;\n  options?: Ref<SelectOption[]>;\n  extraOptions?: Ref<SelectOption[]>;\n  inputValue?: Ref<string>;\n  filterOption?: Ref<FilterOption>;\n  showExtraOptions?: Ref<boolean>;\n  component?: Ref<'li' | 'div'>;\n  valueKey?: Ref<string>;\n  fieldNames?: Ref<SelectFieldNames | undefined>;\n  loading?: Ref<boolean>;\n  popupVisible: Ref<boolean>;\n  valueKeys: Ref<string[]>;\n  dropdownRef?: Ref<ComponentPublicInstance | undefined>;\n  optionRefs?: Ref<Record<string | number, HTMLElement>>;\n  virtualListRef?: Ref<VirtualListRef>;\n  onSelect: (key: string, ev: Event) => void;\n  onPopupVisibleChange: (visible: boolean) => void;\n  enterToOpen?: boolean;\n  defaultActiveFirstOption?: Ref<boolean>;\n}) => {\n  const {\n    validOptions,\n    optionInfoMap,\n    validOptionInfos,\n    enabledOptionKeys,\n    getNextSlotOptionIndex,\n    addSlotOptionInfo,\n    removeSlotOptionInfo,\n  } = useOptions({\n    options,\n    extraOptions,\n    inputValue,\n    filterOption,\n    showExtraOptions,\n    valueKey,\n    fieldNames,\n  });\n\n  const activeKey = ref<string | undefined>();\n\n  watch(enabledOptionKeys, (enabledKeys) => {\n    if (!activeKey.value || !enabledKeys.includes(activeKey.value)) {\n      // eslint-disable-next-line prefer-destructuring\n      activeKey.value = enabledKeys[0];\n    }\n  });\n\n  const setActiveKey = (key?: string) => {\n    activeKey.value = key;\n  };\n\n  const getNextActiveKey = (direction: 'up' | 'down') => {\n    const _length = enabledOptionKeys.value.length;\n    if (_length === 0) {\n      return undefined;\n    }\n\n    if (!activeKey.value) {\n      if (direction === 'down') {\n        return enabledOptionKeys.value[0];\n      }\n      return enabledOptionKeys.value[_length - 1];\n    }\n\n    const activeIndex = enabledOptionKeys.value.indexOf(activeKey.value);\n    const nextIndex =\n      (_length + activeIndex + (direction === 'up' ? -1 : 1)) % _length;\n    return enabledOptionKeys.value[nextIndex];\n  };\n\n  const scrollIntoView = (key: string) => {\n    if (virtualListRef?.value) {\n      virtualListRef.value.scrollTo({ key });\n    }\n    const optionInfo = optionInfoMap.get(key);\n    // @ts-ignore\n    const wrapperEle = dropdownRef?.value?.wrapperRef as HTMLElement;\n    const optionEle = optionRefs?.value[key] ?? optionInfo?.ref;\n\n    if (!wrapperEle || !optionEle) {\n      return;\n    }\n    if (wrapperEle.scrollHeight === wrapperEle.offsetHeight) {\n      return;\n    }\n    const optionRect = getRelativeRect(optionEle, wrapperEle);\n    const wrapperScrollTop = wrapperEle.scrollTop;\n\n    if (optionRect.top < 0) {\n      wrapperEle.scrollTo(0, wrapperScrollTop + optionRect.top);\n    } else if (optionRect.bottom < 0) {\n      wrapperEle.scrollTo(0, wrapperScrollTop - optionRect.bottom);\n    }\n  };\n\n  // Handling when the drop-down box is displayed/hide\n  watch(popupVisible, (visible) => {\n    if (visible) {\n      // get last value key\n      const current = valueKeys.value[valueKeys.value.length - 1];\n      let _activeKey =\n        defaultActiveFirstOption?.value ?? true\n          ? enabledOptionKeys.value[0]\n          : undefined;\n      if (enabledOptionKeys.value.includes(current)) {\n        _activeKey = current;\n      }\n      if (_activeKey !== activeKey.value) {\n        activeKey.value = _activeKey;\n      }\n      // Execute scrollIntoView after the pop-up animation ends, otherwise unnecessary scrolling will occur\n      nextTick(() => {\n        if (activeKey.value) {\n          scrollIntoView(activeKey.value);\n        }\n      });\n    }\n  });\n\n  const handleKeyDown = getKeyDownHandler(\n    new Map([\n      [\n        KEYBOARD_KEY.ENTER,\n        (e: Event) => {\n          // @ts-ignore\n          if (!loading?.value && !e.isComposing) {\n            if (popupVisible.value) {\n              if (activeKey.value) {\n                onSelect(activeKey.value, e);\n                e.preventDefault();\n              }\n            } else if (enterToOpen) {\n              onPopupVisibleChange(true);\n              e.preventDefault();\n            }\n          }\n        },\n      ],\n      [\n        KEYBOARD_KEY.ESC,\n        (e: Event) => {\n          if (popupVisible.value) {\n            onPopupVisibleChange(false);\n            e.preventDefault();\n          }\n        },\n      ],\n      [\n        KEYBOARD_KEY.ARROW_DOWN,\n        (e: Event) => {\n          if (popupVisible.value) {\n            const next = getNextActiveKey('down');\n            if (next) {\n              activeKey.value = next;\n              scrollIntoView(next);\n            }\n            e.preventDefault();\n          }\n        },\n      ],\n      [\n        KEYBOARD_KEY.ARROW_UP,\n        (e: Event) => {\n          if (popupVisible.value) {\n            const next = getNextActiveKey('up');\n            if (next) {\n              activeKey.value = next;\n              scrollIntoView(next);\n            }\n            e.preventDefault();\n          }\n        },\n      ],\n    ])\n  );\n\n  provide(\n    selectInjectionKey,\n    reactive({\n      multiple,\n      valueKey,\n      inputValue,\n      filterOption,\n      component,\n      valueKeys,\n      activeKey,\n      setActiveKey,\n      onSelect,\n      getNextSlotOptionIndex,\n      addSlotOptionInfo,\n      removeSlotOptionInfo,\n    })\n  );\n\n  return {\n    validOptions,\n    optionInfoMap,\n    validOptionInfos,\n    enabledOptionKeys,\n    activeKey,\n    setActiveKey,\n    addSlotOptionInfo,\n    removeSlotOptionInfo,\n    getNextActiveKey,\n    scrollIntoView,\n    handleKeyDown,\n  };\n};\n"
  },
  {
    "path": "packages/web-vue/components/select/index.ts",
    "content": "import type { App } from 'vue';\nimport type { ArcoOptions } from '../_utils/types';\nimport { setGlobalConfig, getComponentPrefix } from '../_utils/global-config';\nimport _Select from './select';\nimport _Option from './option.vue';\nimport _Optgroup from './optgroup.vue';\n\nconst Select = Object.assign(_Select, {\n  Option: _Option,\n  OptGroup: _Optgroup,\n  install: (app: App, options?: ArcoOptions) => {\n    setGlobalConfig(app, options);\n    const componentPrefix = getComponentPrefix(options);\n\n    app.component(componentPrefix + _Select.name, _Select);\n    app.component(componentPrefix + _Option.name, _Option);\n    app.component(componentPrefix + _Optgroup.name, _Optgroup);\n  },\n});\n\nexport type SelectInstance = InstanceType<typeof _Select>;\nexport type SelectOptionInstance = InstanceType<typeof _Option>;\nexport type SelectOptGroupInstance = InstanceType<typeof _Optgroup>;\nexport type {\n  SelectProps,\n  SelectOption,\n  SelectOptionData,\n  SelectOptionGroup,\n  SelectFieldNames,\n  FilterOption,\n} from './interface';\n\nexport { _Option as Option, _Optgroup as Optgroup };\n\nexport default Select;\n"
  },
  {
    "path": "packages/web-vue/components/select/interface.ts",
    "content": "import type { RenderFunction } from 'vue';\nimport { FieldString } from '../_utils/types';\nimport { Size } from '../_utils/constant';\nimport { VirtualListProps } from '../_components/virtual-list-v2/interface';\nimport { TriggerProps } from '../trigger';\n\nexport interface SelectProps {\n  options?: (\n    | string\n    | number\n    | boolean\n    | SelectOptionData\n    | SelectOptionGroup\n  )[];\n  multiple?: boolean;\n  modelValue?:\n    | string\n    | number\n    | boolean\n    | Record<string, unknown>\n    | (string | number | boolean | Record<string, unknown>)[];\n  defaultValue?:\n    | string\n    | number\n    | boolean\n    | Record<string, unknown>\n    | (string | number | boolean | Record<string, unknown>)[];\n  inputValue?: string;\n  defaultInputValue?: string;\n  size?: Size;\n  placeholder?: string;\n  loading?: boolean;\n  disabled?: boolean;\n  error?: boolean;\n  allowClear?: boolean;\n  allowSearch?: boolean | { retainInputValue?: boolean };\n  allowCreate?: boolean;\n  maxTagCount?: number;\n  popupContainer?: string | HTMLElement;\n  bordered?: boolean;\n  popupVisible?: boolean;\n  defaultPopupVisible?: boolean;\n  unmountOnClose?: boolean;\n  filterOption?:\n    | boolean\n    | ((inputValue: string, option: SelectOptionData) => boolean);\n  virtualListProps?: VirtualListProps;\n  triggerProps?: TriggerProps;\n  formatLabel?: (data: SelectOptionData) => string;\n  fallbackOption?:\n    | boolean\n    | ((\n        value: string | number | boolean | Record<string, unknown>\n      ) => SelectOptionData);\n  showExtraOptions?: boolean;\n  valueKey?: string;\n  searchDelay?: number;\n  limit?: number;\n  fieldNames?: SelectFieldNames;\n  showHeaderOnEmpty?: boolean;\n  showFooterOnEmpty?: boolean;\n}\n\nexport type SelectOptionValue =\n  | string\n  | number\n  | boolean\n  | Record<string, unknown>;\n\nexport interface OptionValueWithKey {\n  value: SelectOptionValue;\n  key: string;\n}\n\nexport type SelectFieldNames = FieldString<SelectOptionData>;\n\nexport interface SelectOptionData {\n  /**\n   * @zh 选项值\n   * @en Option Value\n   */\n  value?: string | number | boolean | Record<string, unknown>;\n  /**\n   * @zh 选项内容\n   * @en Option content\n   */\n  label?: string;\n  /**\n   * @zh 是否禁用\n   * @en Whether to disable\n   */\n  disabled?: boolean;\n  /**\n   * @zh 选项对应的多选标签的属性\n   * @en Props of the multi-select label corresponding to the option\n   */\n  tagProps?: any;\n  /**\n   * @zh 自定义渲染\n   * @en Custom Render\n   */\n  render?: RenderFunction;\n\n  [other: string]: any;\n}\n\nexport interface SelectOptionGroup {\n  /**\n   * @zh 是否为选项组\n   * @en Whether it is an option group\n   */\n  isGroup: true;\n  /**\n   * @zh 选项组标题\n   * @en Option group title\n   */\n  label: string;\n  /**\n   * @zh 选项组中的选项\n   * @en Options in the option group\n   */\n  options: SelectOption[];\n\n  [other: string]: any;\n}\n\n/**\n * @zh 选项\n * @en Option\n */\nexport type SelectOption =\n  | string\n  | number\n  | boolean\n  | SelectOptionData\n  | SelectOptionGroup;\n\nexport interface SelectOptionInfo extends SelectOptionData {\n  raw: Record<string, unknown>;\n  key: string;\n  index?: number;\n  origin: 'slot' | 'options' | 'extraOptions';\n  value: SelectOptionValue;\n  label: string;\n}\n\nexport interface SelectOptionGroupInfo extends SelectOptionGroup {\n  key: string;\n  options: (SelectOptionInfo | SelectOptionGroupInfo)[];\n}\n\n/**\n * @zh 筛选\n * @en Filter\n */\nexport type FilterOption =\n  | boolean\n  | ((inputValue: string, option: SelectOptionData) => boolean);\n"
  },
  {
    "path": "packages/web-vue/components/select/optgroup.vue",
    "content": "<template>\n  <li :class=\"`${prefixCls}-title`\">\n    <slot name=\"label\">\n      {{ label }}\n    </slot>\n  </li>\n  <slot />\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue';\nimport { getPrefixCls } from '../_utils/global-config';\n\nexport default defineComponent({\n  name: 'Optgroup',\n  props: {\n    /**\n     * @zh 选项组的标题\n     * @en Title of option group\n     */\n    label: {\n      type: String,\n    },\n  },\n  /**\n   * @zh 选项组的标题\n   * @en Title of option group\n   * @slot label\n   * @version 2.10.0\n   */\n  setup() {\n    const prefixCls = getPrefixCls('select-group');\n\n    return {\n      prefixCls,\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/select/option.vue",
    "content": "<template>\n  <component\n    :is=\"component\"\n    v-show=\"isValid\"\n    ref=\"itemRef\"\n    :class=\"[cls, { [`${prefixCls}-has-suffix`]: Boolean($slots.suffix) }]\"\n    @click=\"handleClick\"\n    @mouseenter=\"handleMouseEnter\"\n    @mouseleave=\"handleMouseLeave\"\n  >\n    <span v-if=\"$slots.icon\" :class=\"`${prefixCls}-icon`\">\n      <slot name=\"icon\" />\n    </span>\n    <checkbox\n      v-if=\"selectCtx && selectCtx.multiple\"\n      :class=\"`${prefixCls}-checkbox`\"\n      :model-value=\"isSelected\"\n      :disabled=\"disabled\"\n      uninject-group-context\n    >\n      <slot>{{ label }}</slot>\n    </checkbox>\n    <template v-else>\n      <span :class=\"`${prefixCls}-content`\"\n        ><slot>{{ label }}</slot></span\n      >\n    </template>\n    <span v-if=\"$slots.suffix\" :class=\"`${prefixCls}-suffix`\">\n      <slot name=\"suffix\" />\n    </span>\n  </component>\n</template>\n\n<script lang=\"ts\">\nimport type { PropType } from 'vue';\nimport {\n  computed,\n  defineComponent,\n  inject,\n  reactive,\n  ref,\n  toRefs,\n  onBeforeUnmount,\n  onMounted,\n  onUpdated,\n  getCurrentInstance,\n  watch,\n} from 'vue';\nimport type { TagProps } from '../tag';\nimport { getPrefixCls } from '../_utils/global-config';\nimport Checkbox from '../checkbox';\nimport { selectInjectionKey } from './context';\nimport { getKeyFromValue, isValidOption } from './utils';\nimport { isEqual } from '../_utils/is-equal';\n\nexport default defineComponent({\n  name: 'Option',\n  components: {\n    Checkbox,\n  },\n  props: {\n    /**\n     * @zh 选项值（如不填，会从内容中获取）\n     * @en Option value (if not filled, it will be obtained from the content)\n     */\n    value: {\n      type: [String, Number, Boolean, Object],\n      default: undefined,\n    },\n    /**\n     * @zh 选项标签（如不填，会从内容中获取）\n     * @en Option label (if not filled, it will be obtained from the content)\n     */\n    label: String,\n    /**\n     * @zh 是否禁用\n     * @en Whether to disable\n     */\n    disabled: Boolean,\n    /**\n     * @zh 展示的标签属性\n     * @en Displayed tag attributes\n     * @version 2.8.0\n     */\n    tagProps: {\n      type: Object as PropType<TagProps>,\n    },\n    /**\n     * @zh 额外数据。2.18.0 版本废弃，可使用对象形式的 value 扩展数据\n     * @en Extra data\n     * @version 2.10.0\n     */\n    extra: {\n      type: Object,\n    },\n    /**\n     * @zh 用于手动指定选项的 index\n     * @en index for manually specifying option\n     * @version 2.20.0\n     */\n    index: {\n      type: Number,\n    },\n    // private\n    internal: Boolean,\n  },\n  setup(props) {\n    const { disabled, tagProps: _tagProps, index } = toRefs(props);\n    const prefixCls = getPrefixCls('select-option');\n    const selectCtx = inject(selectInjectionKey, undefined);\n    const instance = getCurrentInstance();\n    const itemRef = ref<HTMLElement>();\n\n    const tagProps = ref(_tagProps.value);\n\n    watch(_tagProps, (cur, pre) => {\n      if (!isEqual(cur, pre)) {\n        tagProps.value = cur;\n      }\n    });\n\n    const textContent = ref('');\n    const value = computed(\n      () => props.value ?? props.label ?? textContent.value\n    );\n    const label = computed(() => props.label ?? textContent.value);\n    const key = computed(() =>\n      getKeyFromValue(value.value, selectCtx?.valueKey)\n    );\n    const component = computed(() => selectCtx?.component ?? 'li');\n\n    const setTextContent = () => {\n      if (!props.label && itemRef.value) {\n        const text = itemRef.value.textContent ?? '';\n        if (textContent.value !== text) {\n          textContent.value = text;\n        }\n      }\n    };\n\n    onMounted(() => setTextContent());\n    onUpdated(() => setTextContent());\n\n    const isSelected = computed(\n      () => selectCtx?.valueKeys.includes(key.value) ?? false\n    );\n    const isActive = computed(\n      () => selectCtx?.activeKey === key.value ?? false\n    );\n    let isValid = ref(true);\n\n    if (!props.internal) {\n      const optionInfo = reactive({\n        raw: {\n          value,\n          label,\n          disabled,\n          tagProps,\n        },\n        ref: itemRef,\n        index,\n        key,\n        origin: 'slot' as const,\n        value,\n        label,\n        disabled,\n        tagProps,\n      });\n\n      isValid = computed(() =>\n        isValidOption(optionInfo, {\n          inputValue: selectCtx?.inputValue,\n          filterOption: selectCtx?.filterOption,\n        })\n      );\n\n      if (instance) {\n        selectCtx?.addSlotOptionInfo(instance.uid, optionInfo);\n      }\n\n      onBeforeUnmount(() => {\n        if (instance) {\n          selectCtx?.removeSlotOptionInfo(instance.uid);\n        }\n      });\n    }\n\n    const handleClick = (ev: MouseEvent) => {\n      if (!props.disabled) {\n        selectCtx?.onSelect(key.value, ev);\n      }\n    };\n\n    const handleMouseEnter = () => {\n      if (!props.disabled) {\n        selectCtx?.setActiveKey(key.value);\n      }\n    };\n\n    const handleMouseLeave = () => {\n      if (!props.disabled) {\n        selectCtx?.setActiveKey();\n      }\n    };\n\n    const cls = computed(() => [\n      prefixCls,\n      {\n        [`${prefixCls}-disabled`]: props.disabled,\n        [`${prefixCls}-selected`]: isSelected.value,\n        [`${prefixCls}-active`]: isActive.value,\n        [`${prefixCls}-multiple`]: selectCtx?.multiple,\n      },\n    ]);\n\n    return {\n      prefixCls,\n      cls,\n      selectCtx,\n      itemRef,\n      component,\n      isSelected,\n      isValid,\n      handleClick,\n      handleMouseEnter,\n      handleMouseLeave,\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/select/select-dropdown.vue",
    "content": "<template>\n  <div :class=\"cls\">\n    <div\n      v-if=\"$slots.header && (!empty || showHeaderOnEmpty)\"\n      :class=\"`${prefixCls}-header`\"\n    >\n      <slot name=\"header\" />\n    </div>\n    <spin v-if=\"loading\" :class=\"`${prefixCls}-loading`\" />\n    <div v-else-if=\"empty\" :class=\"`${prefixCls}-empty`\">\n      <slot name=\"empty\">\n        <component :is=\"SelectEmpty ? SelectEmpty : 'Empty'\" />\n      </slot>\n    </div>\n    <slot v-if=\"virtualList && !loading && !empty\" name=\"virtual-list\" />\n    <component\n      :is=\"displayScrollbar ? 'ScrollbarComponent' : 'div'\"\n      v-if=\"!virtualList\"\n      v-show=\"!loading && !empty\"\n      ref=\"wrapperComRef\"\n      :class=\"`${prefixCls}-list-wrapper`\"\n      v-bind=\"scrollbarProps\"\n      @scroll=\"handleScroll\"\n    >\n      <ul :class=\"`${prefixCls}-list`\">\n        <slot />\n      </ul>\n    </component>\n    <div\n      v-if=\"$slots.footer && (!empty || showFooterOnEmpty)\"\n      :class=\"`${prefixCls}-footer`\"\n    >\n      <slot name=\"footer\" />\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport type { PropType } from 'vue';\nimport { computed, defineComponent, toRefs, inject } from 'vue';\nimport type { EmitType } from '../_utils/types';\nimport { configProviderInjectionKey } from '../config-provider/context';\nimport { getPrefixCls } from '../_utils/global-config';\nimport Empty from '../empty';\nimport Spin from '../spin';\nimport Scrollbar, { ScrollbarProps } from '../scrollbar';\nimport { useComponentRef } from '../_hooks/use-component-ref';\nimport { useScrollbar } from '../_hooks/use-scrollbar';\n\nexport default defineComponent({\n  name: 'SelectDropdown',\n  components: {\n    ScrollbarComponent: Scrollbar,\n    Empty,\n    Spin,\n  },\n  props: {\n    loading: Boolean,\n    empty: Boolean,\n    virtualList: Boolean,\n    bottomOffset: {\n      type: Number,\n      default: 0,\n    },\n    scrollbar: {\n      type: [Boolean, Object] as PropType<boolean | ScrollbarProps>,\n      default: true,\n    },\n    onScroll: {\n      type: [Function, Array] as PropType<EmitType<(ev: Event) => void>>,\n    },\n    onReachBottom: {\n      type: [Function, Array] as PropType<EmitType<(ev: Event) => void>>,\n    },\n    showHeaderOnEmpty: {\n      type: Boolean as PropType<boolean>,\n      default: false,\n    },\n    showFooterOnEmpty: {\n      type: Boolean as PropType<boolean>,\n      default: false,\n    },\n  },\n  emits: ['scroll', 'reachBottom'],\n  setup(props, { emit, slots }) {\n    const { scrollbar } = toRefs(props);\n    const prefixCls = getPrefixCls('select-dropdown');\n    const configCtx = inject(configProviderInjectionKey, undefined);\n    const SelectEmpty = configCtx?.slots.empty?.({ component: 'select' })?.[0];\n\n    const { componentRef: wrapperComRef, elementRef: wrapperRef } =\n      useComponentRef('containerRef');\n    const { displayScrollbar, scrollbarProps } = useScrollbar(scrollbar);\n\n    const handleScroll = (e: Event) => {\n      const { scrollTop, scrollHeight, offsetHeight } = e.target as HTMLElement;\n      const bottom = scrollHeight - (scrollTop + offsetHeight);\n      if (bottom <= props.bottomOffset) {\n        emit('reachBottom', e);\n      }\n      emit('scroll', e);\n    };\n\n    const cls = computed(() => [\n      prefixCls,\n      {\n        [`${prefixCls}-has-header`]: Boolean(slots.header),\n        [`${prefixCls}-has-footer`]: Boolean(slots.footer),\n      },\n    ]);\n\n    return {\n      prefixCls,\n      SelectEmpty,\n      cls,\n      wrapperRef,\n      wrapperComRef,\n      handleScroll,\n      displayScrollbar,\n      scrollbarProps,\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/select/select.tsx",
    "content": "import type { ComponentPublicInstance, PropType } from 'vue';\nimport {\n  computed,\n  defineComponent,\n  nextTick,\n  ref,\n  toRefs,\n  watch,\n  watchEffect,\n} from 'vue';\nimport { getPrefixCls } from '../_utils/global-config';\nimport {\n  isArray,\n  isEmptyObject,\n  isFunction,\n  isNull,\n  isNumber,\n  isObject,\n  isString,\n  isBoolean,\n  isUndefined,\n} from '../_utils/is';\nimport {\n  getKeyFromValue,\n  isGroupOptionInfo,\n  isValidOption,\n  hasEmptyStringKey,\n} from './utils';\nimport Trigger, { TriggerProps } from '../trigger';\nimport SelectView from '../_components/select-view/select-view';\nimport { Size } from '../_utils/constant';\nimport { Data } from '../_utils/types';\nimport SelectDropdown from './select-dropdown.vue';\nimport Option from './option.vue';\nimport OptGroup from './optgroup.vue';\nimport {\n  OptionValueWithKey,\n  SelectFieldNames,\n  SelectOptionData,\n  SelectOptionGroup,\n  SelectOptionGroupInfo,\n  SelectOptionInfo,\n} from './interface';\nimport VirtualList from '../_components/virtual-list-v2';\nimport { VirtualListProps } from '../_components/virtual-list-v2/interface';\nimport { useSelect } from './hooks/use-select';\nimport { TagData } from '../input-tag';\nimport { useTrigger } from '../_hooks/use-trigger';\nimport { useFormItem } from '../_hooks/use-form-item';\nimport { debounce } from '../_utils/debounce';\nimport { SelectViewValue } from '../_components/select-view/interface';\nimport { ScrollbarProps } from '../scrollbar';\n\nconst DEFAULT_FIELD_NAMES = {\n  value: 'value',\n  label: 'label',\n  disabled: 'disabled',\n  tagProps: 'tagProps',\n  render: 'render',\n};\n\nexport default defineComponent({\n  name: 'Select',\n  components: {\n    Trigger,\n    SelectView,\n  },\n  inheritAttrs: false,\n  props: {\n    /**\n     * @zh 是否开启多选模式（多选模式默认开启搜索）\n     * @en Whether to open multi-select mode (The search is turned on by default in the multi-select mode)\n     */\n    multiple: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 绑定值\n     * @en Value\n     */\n    modelValue: {\n      type: [String, Number, Boolean, Object, Array] as PropType<\n        | string\n        | number\n        | boolean\n        | Record<string, any>\n        | (string | number | boolean | Record<string, any>)[]\n      >,\n      default: undefined,\n    },\n    /**\n     * @zh 默认值（非受控模式）\n     * @en Default value (uncontrolled mode)\n     * @defaultValue '' \\| []\n     */\n    defaultValue: {\n      type: [String, Number, Boolean, Object, Array] as PropType<\n        | string\n        | number\n        | boolean\n        | Record<string, unknown>\n        | (string | number | boolean | Record<string, unknown>)[]\n      >,\n      default: (props: Data) => (isUndefined(props.multiple) ? '' : []),\n    },\n    /**\n     * @zh 输入框的值\n     * @en The value of the input\n     * @vModel\n     */\n    inputValue: {\n      type: String,\n    },\n    /**\n     * @zh 输入框的默认值（非受控模式）\n     * @en The default value of the input (uncontrolled mode)\n     */\n    defaultInputValue: {\n      type: String,\n      default: '',\n    },\n    /**\n     * @zh 选择框的大小\n     * @en The size of the select\n     * @values 'mini','small','medium','large'\n     * @defaultValue 'medium'\n     */\n    size: {\n      type: String as PropType<Size>,\n    },\n    /**\n     * @zh 占位符\n     * @en Placeholder\n     */\n    placeholder: String,\n    /**\n     * @zh 是否为加载中状态\n     * @en Whether it is loading state\n     */\n    loading: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 是否禁用\n     * @en Whether to disable\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 是否为错误状态\n     * @en Whether it is an error state\n     */\n    error: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 是否允许清空\n     * @en Whether to allow clear\n     */\n    allowClear: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 是否允许搜索\n     * @en Whether to allow searching\n     * @defaultValue false (single) \\| true (multiple)\n     */\n    allowSearch: {\n      type: [Boolean, Object] as PropType<\n        boolean | { retainInputValue?: boolean }\n      >,\n      default: (props: Data) => Boolean(props.multiple),\n    },\n    /**\n     * @zh 是否允许创建\n     * @en Whether to allow creation\n     */\n    allowCreate: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 多选模式下，最多显示的标签数量。0 表示不限制\n     * @en In multi-select mode, the maximum number of labels displayed. 0 means unlimited\n     */\n    maxTagCount: {\n      type: Number,\n      default: 0,\n    },\n    /**\n     * @zh 弹出框的挂载容器\n     * @en Mount container for popup\n     */\n    popupContainer: {\n      type: [String, Object] as PropType<string | HTMLElement>,\n    },\n    /**\n     * @zh 是否显示输入框的边框\n     * @en Whether to display the border of the input box\n     */\n    bordered: {\n      type: Boolean,\n      default: true,\n    },\n    /**\n     * @zh 是否在无值时默认选择第一个选项\n     * @en Whether to select the first option by default when there is no value\n     * @version 2.43.0\n     */\n    defaultActiveFirstOption: {\n      type: Boolean,\n      default: true,\n    },\n    /**\n     * @zh 是否显示下拉菜单\n     * @en Whether to show the dropdown\n     * @vModel\n     */\n    popupVisible: {\n      type: Boolean,\n      default: undefined,\n    },\n    /**\n     * @zh 弹出框默认是否可见（非受控模式）\n     * @en Whether the popup is visible by default (uncontrolled mode)\n     */\n    defaultPopupVisible: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 是否在下拉菜单关闭时销毁元素\n     * @en Whether to destroy the element when the dropdown is closed\n     */\n    unmountOnClose: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 是否过滤选项\n     * @en Whether to filter options\n     */\n    filterOption: {\n      type: [Boolean, Function] as PropType<\n        boolean | ((inputValue: string, option: SelectOptionData) => boolean)\n      >,\n      default: true,\n    },\n    /**\n     * @zh 选项数据\n     * @en Option data\n     */\n    options: {\n      type: Array as PropType<\n        (string | number | boolean | SelectOptionData | SelectOptionGroup)[]\n      >,\n      default: () => [],\n    },\n    /**\n     * @zh 传递虚拟列表属性，传入此参数以开启虚拟滚动 [VirtualListProps](#VirtualListProps)\n     * @en Pass the virtual list attribute, pass in this parameter to turn on virtual scrolling [VirtualListProps](#VirtualListProps)\n     * @type VirtualListProps\n     */\n    virtualListProps: {\n      type: Object as PropType<VirtualListProps>,\n    },\n    /**\n     * @zh 下拉菜单的触发器属性\n     * @en Trigger props of the drop-down menu\n     * @type TriggerProps\n     */\n    triggerProps: {\n      type: Object as PropType<TriggerProps>,\n    },\n    /**\n     * @zh 格式化显示内容\n     * @en Format display content\n     */\n    formatLabel: {\n      type: Function as PropType<(data: SelectOptionData) => string>,\n    },\n    /**\n     * @zh 自定义值中不存在的选项\n     * @en Options that do not exist in custom values\n     * @version 2.10.0\n     */\n    fallbackOption: {\n      type: [Boolean, Function] as PropType<\n        | boolean\n        | ((\n            value: string | number | boolean | Record<string, unknown>\n          ) => SelectOptionData)\n      >,\n      default: true,\n    },\n    /**\n     * @zh 是否在下拉菜单中显示额外选项\n     * @en Options that do not exist in custom values\n     * @version 2.10.0\n     */\n    showExtraOptions: {\n      type: Boolean,\n      default: true,\n    },\n    /**\n     * @zh 用于确定选项键值的属性名\n     * @en Used to determine the option key value attribute name\n     * @version 2.18.0\n     */\n    valueKey: {\n      type: String,\n      default: 'value',\n    },\n    /**\n     * @zh 触发搜索事件的延迟时间\n     * @en Delay time to trigger search event\n     * @version 2.18.0\n     */\n    searchDelay: {\n      type: Number,\n      default: 500,\n    },\n    /**\n     * @zh 多选时最多的选择个数\n     * @en Maximum number of choices in multiple choice\n     * @version 2.18.0\n     */\n    limit: {\n      type: Number,\n      default: 0,\n    },\n    /**\n     * @zh 自定义 `SelectOptionData` 中的字段\n     * @en Customize fields in `SelectOptionData`\n     * @version 2.22.0\n     */\n    fieldNames: {\n      type: Object as PropType<SelectFieldNames>,\n    },\n    /**\n     * @zh 是否开启虚拟滚动条\n     * @en Whether to enable virtual scroll bar\n     * @version 2.38.0\n     */\n    scrollbar: {\n      type: [Boolean, Object] as PropType<boolean | ScrollbarProps>,\n      default: true,\n    },\n    /**\n     * @zh 空状态时是否显示header\n     * @en Whether to display the header in the empty state\n     */\n    showHeaderOnEmpty: {\n      type: Boolean as PropType<boolean>,\n      default: false,\n    },\n    /**\n     * @zh 空状态时是否显示footer\n     * @en Whether to display the footer in the empty state\n     */\n    showFooterOnEmpty: {\n      type: Boolean as PropType<boolean>,\n      default: false,\n    },\n    /**\n     * @zh 标签内容不换行\n     * @en Tag content does not wrap\n     * @version 2.56.1\n     */\n    tagNowrap: {\n      type: Boolean,\n      default: false,\n    },\n  },\n  emits: {\n    'update:modelValue': (\n      value:\n        | string\n        | number\n        | boolean\n        | Record<string, any>\n        | (string | number | boolean | Record<string, any>)[]\n    ) => true,\n    'update:inputValue': (inputValue: string) => true,\n    'update:popupVisible': (visible: boolean) => true,\n    /**\n     * @zh 值发生改变时触发\n     * @en Triggered when the value changes\n     * @param { string | number | boolean | Record<string, any> | (string | number | boolean | Record<string, any>)[] } value\n     */\n    'change': (\n      value:\n        | string\n        | number\n        | boolean\n        | Record<string, any>\n        | (string | number | boolean | Record<string, any>)[]\n    ) => true,\n    /**\n     * @zh 输入框的值发生改变时触发\n     * @en Triggered when the value of the input changes\n     * @param {string} inputValue\n     */\n    'inputValueChange': (inputValue: string) => true,\n    /**\n     * @zh 下拉框的显示状态改变时触发\n     * @en Triggered when the display state of the drop-down box changes\n     * @param {boolean} visible\n     */\n    'popupVisibleChange': (visible: boolean) => true,\n    /**\n     * @zh 点击清除按钮时触发\n     * @en Triggered when the clear button is clicked\n     */\n    'clear': (ev: Event) => true,\n    /**\n     * @zh 点击标签的删除按钮时触发\n     * @en Triggered when the delete button of the label is clicked\n     * @param {string | number | boolean | Record<string, any> | undefined} removed\n     */\n    'remove': (\n      removed: string | number | boolean | Record<string, any> | undefined\n    ) => true,\n    /**\n     * @zh 用户搜索时触发\n     * @en Triggered when the user searches\n     * @param {string} inputValue\n     */\n    'search': (inputValue: string) => true,\n    /**\n     * @zh 下拉菜单发生滚动时触发\n     * @en Triggered when the drop-down scrolls\n     */\n    'dropdownScroll': (ev: Event) => true,\n    /**\n     * @zh 下拉菜单滚动到底部时触发\n     * @en Triggered when the drop-down menu is scrolled to the bottom\n     */\n    'dropdownReachBottom': (ev: Event) => true,\n    /**\n     * @zh 多选超出限制时触发\n     * @en Triggered when multiple selection exceeds the limit\n     * @param {string | number | boolean | Record<string, any> | undefined} value\n     * @param {Event} ev\n     * @version 2.18.0\n     */\n    'exceedLimit': (\n      value: string | number | boolean | Record<string, any> | undefined,\n      ev: Event\n    ) => true,\n  },\n  /**\n   * @zh 选项为空时的显示内容\n   * @en Display content when the option is empty\n   * @slot empty\n   */\n  /**\n   * @zh 选项内容\n   * @en Display content of options\n   * @slot option\n   * @binding {SelectOptionData} data\n   */\n  /**\n   * @zh 选择框的显示内容\n   * @en Display content of label\n   * @slot label\n   * @binding {SelectOptionData} data\n   */\n  /**\n   * @zh 下拉框的页头\n   * @en The header of the drop-down box\n   * @slot header\n   * @version 2.43.0\n   */\n  /**\n   * @zh 下拉框的页脚\n   * @en The footer of the drop-down box\n   * @slot footer\n   */\n  /**\n   * @zh 选择框的箭头图标\n   * @en Arrow icon for select box\n   * @slot arrow-icon\n   * @version 2.16.0\n   */\n  /**\n   * @zh 选择框的加载中图标\n   * @en Loading icon for select box\n   * @slot loading-icon\n   * @version 2.16.0\n   */\n  /**\n   * @zh 选择框的搜索图标\n   * @en Search icon for select box\n   * @slot search-icon\n   * @version 2.16.0\n   */\n  /**\n   * @zh 前缀元素\n   * @en Prefix\n   * @slot prefix\n   * @version 2.22.0\n   */\n  /**\n   * @zh 自定义触发元素\n   * @en Custom trigger element\n   * @slot trigger\n   * @version 2.22.0\n   */\n  setup(props, { slots, emit, attrs }) {\n    // props\n    const {\n      size,\n      disabled,\n      error,\n      options,\n      filterOption,\n      valueKey,\n      multiple,\n      popupVisible,\n      defaultPopupVisible,\n      showExtraOptions,\n      modelValue,\n      fieldNames,\n      loading,\n      defaultActiveFirstOption,\n    } = toRefs(props);\n    const prefixCls = getPrefixCls('select');\n    const { mergedSize, mergedDisabled, mergedError, eventHandlers } =\n      useFormItem({\n        size,\n        disabled,\n        error,\n      });\n    const component = computed(() => (props.virtualListProps ? 'div' : 'li'));\n    const retainInputValue = computed(\n      () =>\n        isObject(props.allowSearch) &&\n        Boolean(props.allowSearch.retainInputValue)\n    );\n    const formatLabel = computed(() => {\n      if (isFunction(props.formatLabel)) {\n        return (data: TagData) => {\n          const optionInfo = optionInfoMap.get(data.value as string);\n          // @ts-ignore\n          return props.formatLabel(optionInfo);\n        };\n      }\n      return undefined;\n    });\n\n    // refs\n    const dropdownRef = ref<ComponentPublicInstance>();\n    const optionRefs = ref<Record<string, HTMLElement>>({});\n    const virtualListRef = ref();\n\n    // trigger\n    const { computedPopupVisible, handlePopupVisibleChange } = useTrigger({\n      popupVisible,\n      defaultPopupVisible,\n      emit,\n    });\n\n    // value and key\n    const _value = ref(props.defaultValue);\n    const computedValueObjects = computed<OptionValueWithKey[]>(() => {\n      const mergedValue = props.modelValue ?? _value.value;\n      const valueArray = isArray(mergedValue)\n        ? mergedValue\n        : mergedValue ||\n          isNumber(mergedValue) ||\n          isString(mergedValue) ||\n          isBoolean(mergedValue)\n        ? [mergedValue]\n        : [];\n      return valueArray.map((value) => ({\n        value,\n        key: getKeyFromValue(value, props.valueKey),\n      }));\n    });\n    watch(modelValue, (value) => {\n      if (isUndefined(value) || isNull(value)) {\n        _value.value = multiple.value ? [] : (value as any);\n      }\n    });\n\n    const computedValueKeys = computed(() =>\n      computedValueObjects.value.map((obj) => obj.key)\n    );\n\n    const mergedFieldNames = computed(() => ({\n      ...DEFAULT_FIELD_NAMES,\n      ...fieldNames?.value,\n    }));\n\n    // selected option\n    const _selectedOption = ref();\n    const getRawOptionFromValueKeys = (valueKeys: string[]) => {\n      const optionMap: Record<string, unknown> = {};\n\n      valueKeys.forEach((key) => {\n        optionMap[key] = optionInfoMap.get(key);\n      });\n\n      return optionMap;\n    };\n\n    const updateSelectedOption = (valueKeys: string[]) => {\n      _selectedOption.value = getRawOptionFromValueKeys(valueKeys);\n    };\n\n    // extra value and option\n    const getFallBackOption = (\n      value: string | number | boolean | Record<string, unknown>\n    ): SelectOptionData => {\n      if (isFunction(props.fallbackOption)) {\n        return props.fallbackOption(value);\n      }\n      return {\n        [mergedFieldNames.value.value]: value,\n        [mergedFieldNames.value.label]: String(\n          isObject(value) ? value[valueKey?.value] : value\n        ),\n      };\n    };\n\n    const getExtraValueData = (): OptionValueWithKey[] => {\n      const valueArray: OptionValueWithKey[] = [];\n      const keyArray: string[] = [];\n\n      if (props.allowCreate || props.fallbackOption) {\n        for (const item of computedValueObjects.value) {\n          if (!keyArray.includes(item.key) && item.value !== '') {\n            const optionInfo = optionInfoMap.get(item.key);\n            if (!optionInfo || optionInfo.origin === 'extraOptions') {\n              valueArray.push(item);\n              keyArray.push(item.key);\n            }\n          }\n        }\n      }\n\n      if (props.allowCreate && computedInputValue.value) {\n        const key = getKeyFromValue(computedInputValue.value);\n        if (!keyArray.includes(key)) {\n          const optionInfo = optionInfoMap.get(key);\n          if (!optionInfo || optionInfo.origin === 'extraOptions') {\n            valueArray.push({\n              value: computedInputValue.value,\n              key,\n            });\n          }\n        }\n      }\n      return valueArray;\n    };\n\n    const extraValueObjects = ref<OptionValueWithKey[]>([]);\n    const extraOptions = computed(() =>\n      extraValueObjects.value.map((obj) => {\n        let optionInfo = getFallBackOption(obj.value);\n        const extraOptionRawInfo = _selectedOption.value?.[obj.key];\n        if (\n          !isUndefined(extraOptionRawInfo) &&\n          !isEmptyObject(extraOptionRawInfo)\n        ) {\n          optionInfo = { ...optionInfo, ...extraOptionRawInfo };\n        }\n        return optionInfo;\n      })\n    );\n\n    nextTick(() => {\n      watchEffect(() => {\n        const valueData = getExtraValueData();\n        if (valueData.length !== extraValueObjects.value.length) {\n          extraValueObjects.value = valueData;\n        } else if (valueData.length > 0) {\n          for (let i = 0; i < valueData.length; i++) {\n            if (valueData[i].key !== extraValueObjects.value[i]?.key) {\n              extraValueObjects.value = valueData;\n              break;\n            }\n          }\n        }\n      });\n    });\n\n    // input value\n    const _inputValue = ref('');\n    const computedInputValue = computed(\n      () => props.inputValue ?? _inputValue.value\n    );\n\n    // clear input value when close dropdown\n    watch(computedPopupVisible, (visible) => {\n      if (!visible && !retainInputValue.value && computedInputValue.value) {\n        updateInputValue('');\n      }\n    });\n\n    // update func\n    const getValueFromValueKeys = (valueKeys: string[]) => {\n      if (!props.multiple) {\n        return (\n          optionInfoMap.get(valueKeys[0])?.value ??\n          (hasEmptyStringKey(optionInfoMap)\n            ? (undefined as unknown as string)\n            : '')\n        );\n      }\n      return valueKeys.map((key) => optionInfoMap.get(key)?.value ?? '');\n    };\n\n    const updateValue = (valueKeys: string[]) => {\n      const value = getValueFromValueKeys(valueKeys);\n      _value.value = value;\n      emit('update:modelValue', value);\n      emit('change', value);\n      eventHandlers.value?.onChange?.();\n      updateSelectedOption(valueKeys);\n    };\n\n    const updateInputValue = (inputValue: string) => {\n      _inputValue.value = inputValue;\n      emit('update:inputValue', inputValue);\n      emit('inputValueChange', inputValue);\n    };\n\n    // events\n    const handleSelect = (key: string, ev: Event) => {\n      if (props.multiple) {\n        if (!computedValueKeys.value.includes(key)) {\n          if (enabledOptionKeys.value.includes(key)) {\n            if (\n              props.limit > 0 &&\n              computedValueKeys.value.length >= props.limit\n            ) {\n              const info = optionInfoMap.get(key);\n              emit('exceedLimit', info?.value, ev);\n            } else {\n              const valueKeys = computedValueKeys.value.concat(key);\n              updateValue(valueKeys);\n            }\n          }\n        } else {\n          const valueKeys = computedValueKeys.value.filter(\n            (_key) => _key !== key\n          );\n          updateValue(valueKeys);\n        }\n        if (!retainInputValue.value) {\n          // 点击一个选项时，清空输入框内容\n          updateInputValue('');\n        }\n      } else {\n        if (key !== computedValueKeys.value[0]) {\n          updateValue([key]);\n        }\n        if (retainInputValue.value) {\n          const optionInfo = optionInfoMap.get(key);\n          if (optionInfo) {\n            updateInputValue(optionInfo.label);\n          }\n        }\n\n        handlePopupVisibleChange(false);\n      }\n    };\n\n    const handleSearch = debounce((value: string) => {\n      emit('search', value);\n    }, props.searchDelay);\n\n    const handleInputValueChange = (inputValue: string) => {\n      if (inputValue !== computedInputValue.value) {\n        if (!computedPopupVisible.value) {\n          handlePopupVisibleChange(true);\n        }\n\n        updateInputValue(inputValue);\n\n        if (props.allowSearch) {\n          handleSearch(inputValue);\n        }\n      }\n    };\n\n    const handleRemove = (key: string) => {\n      const optionInfo = optionInfoMap.get(key);\n      const newKeys = computedValueKeys.value.filter((_key) => _key !== key);\n      updateValue(newKeys);\n      emit('remove', optionInfo?.value);\n    };\n\n    const handleClear = (e: Event) => {\n      e?.stopPropagation();\n      const newKeys = computedValueKeys.value.filter(\n        (key) => optionInfoMap.get(key)?.disabled\n      );\n      updateValue(newKeys);\n      updateInputValue('');\n      emit('clear', e);\n    };\n\n    const handleDropdownScroll = (e: Event) => {\n      emit('dropdownScroll', e);\n    };\n\n    const handleDropdownReachBottom = (e: Event) => {\n      emit('dropdownReachBottom', e);\n    };\n\n    const {\n      validOptions,\n      optionInfoMap,\n      validOptionInfos,\n      enabledOptionKeys,\n      handleKeyDown,\n    } = useSelect({\n      multiple,\n      options,\n      extraOptions,\n      inputValue: computedInputValue,\n      filterOption,\n      showExtraOptions,\n      component,\n      valueKey,\n      fieldNames,\n      loading,\n      popupVisible: computedPopupVisible,\n      valueKeys: computedValueKeys,\n      dropdownRef,\n      optionRefs,\n      virtualListRef,\n      defaultActiveFirstOption,\n      onSelect: handleSelect,\n      onPopupVisibleChange: handlePopupVisibleChange,\n    });\n\n    const selectViewValue = computed(() => {\n      const result: SelectViewValue[] = [];\n      for (const item of computedValueObjects.value) {\n        const optionInfo = optionInfoMap.get(item.key);\n        if (optionInfo) {\n          result.push({\n            ...optionInfo,\n            value: item.key,\n            label:\n              optionInfo?.label ??\n              String(\n                isObject(item.value) ? item.value[valueKey?.value] : item.value\n              ),\n            closable: !optionInfo?.disabled,\n            tagProps: optionInfo?.tagProps,\n          });\n        }\n      }\n      return result;\n    });\n\n    const getOptionContentFunc = (optionInfo: SelectOptionInfo) => {\n      if (isFunction(slots.option)) {\n        const optionSlot = slots.option;\n        return () => optionSlot({ data: optionInfo.raw });\n      }\n      if (isFunction(optionInfo.render)) {\n        return optionInfo.render;\n      }\n      return () => optionInfo.label;\n    };\n\n    const renderOption = (\n      optionInfo: SelectOptionInfo | SelectOptionGroupInfo\n    ) => {\n      if (isGroupOptionInfo(optionInfo)) {\n        return (\n          <OptGroup key={optionInfo.key} label={optionInfo.label}>\n            {optionInfo.options.map((child) => renderOption(child))}\n          </OptGroup>\n        );\n      }\n\n      if (\n        !isValidOption(optionInfo, {\n          inputValue: computedInputValue.value,\n          filterOption: filterOption?.value,\n        })\n      ) {\n        return null;\n      }\n\n      return (\n        <Option\n          v-slots={{\n            default: getOptionContentFunc(optionInfo),\n          }}\n          // @ts-ignore\n          ref={(ref: ComponentPublicInstance) => {\n            if (ref?.$el) {\n              optionRefs.value[optionInfo.key] = ref.$el;\n            }\n          }}\n          key={optionInfo.key}\n          value={optionInfo.value}\n          label={optionInfo.label}\n          disabled={optionInfo.disabled}\n          internal\n        />\n      );\n    };\n\n    const renderDropDown = () => {\n      return (\n        <SelectDropdown\n          ref={dropdownRef}\n          v-slots={{\n            'default': () => [\n              ...(slots.default?.() ?? []),\n              ...validOptions.value.map(renderOption),\n            ],\n            'virtual-list': () => (\n              <VirtualList\n                {...props.virtualListProps}\n                ref={virtualListRef}\n                data={validOptions.value}\n                v-slots={{\n                  item: ({\n                    item,\n                  }: {\n                    item: SelectOptionInfo | SelectOptionGroupInfo;\n                  }) => renderOption(item),\n                }}\n              />\n            ),\n            'empty': slots.empty,\n            'header': slots.header,\n            'footer': slots.footer,\n          }}\n          loading={props.loading}\n          empty={validOptionInfos.value.length === 0}\n          virtualList={Boolean(props.virtualListProps)}\n          scrollbar={props.scrollbar}\n          showHeaderOnEmpty={props.showHeaderOnEmpty}\n          showFooterOnEmpty={props.showFooterOnEmpty}\n          onScroll={handleDropdownScroll}\n          onReachBottom={handleDropdownReachBottom}\n        />\n      );\n    };\n\n    const renderLabel = ({ data }: { data: SelectViewValue }) => {\n      if ((slots.label || isFunction(props.formatLabel)) && data) {\n        const optionInfo = optionInfoMap.get(data.value as string);\n        if (optionInfo?.raw) {\n          return (\n            slots.label?.({ data: optionInfo.raw }) ??\n            props.formatLabel?.(optionInfo.raw)\n          );\n        }\n      }\n      return data?.label ?? '';\n    };\n\n    return () => (\n      <Trigger\n        v-slots={{ content: renderDropDown }}\n        trigger=\"click\"\n        position=\"bl\"\n        popupOffset={4}\n        animationName=\"slide-dynamic-origin\"\n        hideEmpty\n        preventFocus\n        autoFitPopupWidth\n        autoFitTransformOrigin\n        disabled={mergedDisabled.value}\n        popupVisible={computedPopupVisible.value}\n        unmountOnClose={props.unmountOnClose}\n        clickToClose={!(props.allowSearch || props.allowCreate)}\n        popupContainer={props.popupContainer}\n        onPopupVisibleChange={handlePopupVisibleChange}\n        {...props.triggerProps}\n      >\n        {slots.trigger?.() ?? (\n          <SelectView\n            v-slots={{\n              'label': renderLabel,\n              'prefix': slots.prefix,\n              'arrow-icon': slots['arrow-icon'],\n              'loading-icon': slots['loading-icon'],\n              'search-icon': slots['search-icon'],\n            }}\n            class={prefixCls}\n            modelValue={selectViewValue.value}\n            inputValue={computedInputValue.value}\n            multiple={props.multiple}\n            disabled={mergedDisabled.value}\n            error={mergedError.value}\n            loading={props.loading}\n            allowClear={props.allowClear}\n            allowCreate={props.allowCreate}\n            allowSearch={Boolean(props.allowSearch)}\n            opened={computedPopupVisible.value}\n            maxTagCount={props.maxTagCount}\n            placeholder={props.placeholder}\n            bordered={props.bordered}\n            size={mergedSize.value}\n            tagNowrap={props.tagNowrap}\n            // @ts-ignore\n            onInputValueChange={handleInputValueChange}\n            onRemove={handleRemove}\n            onClear={handleClear}\n            onKeydown={handleKeyDown}\n            {...attrs}\n          />\n        )}\n      </Trigger>\n    );\n  },\n});\n"
  },
  {
    "path": "packages/web-vue/components/select/style/index.less",
    "content": "@import '../../style/mixins/index.less';\n@import './token.less';\n\n@select-prefix-cls: ~'@{prefix}-select';\n\n.@{select-prefix-cls}-dropdown {\n  box-sizing: border-box;\n  padding: @select-popup-padding-vertical 0;\n  background-color: @select-popup-color-bg;\n  border: 1px solid @select-popup-color-border;\n  border-radius: @select-popup-border-radius;\n  box-shadow: @select-popup-box-shadow;\n\n  & &-loading {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    min-height: 50px;\n  }\n\n  &-list {\n    margin-top: 0;\n    margin-bottom: 0;\n    padding-left: 0;\n    list-style: none;\n\n    &-wrapper {\n      max-height: @select-popup-max-height;\n      overflow-y: auto;\n    }\n  }\n\n  .@{select-prefix-cls}-option {\n    position: relative;\n    // 避免 Trigger 的小箭头位于其上方\n    z-index: 1;\n    display: flex;\n    align-items: center;\n    box-sizing: border-box;\n    width: 100%;\n    padding: 0 @select-signal-popup-option-padding-horizontal;\n\n    // default\n    color: @select-popup-option-color-text_default;\n    font-size: @select-popup-font-size;\n    line-height: @select-popup-option-height;\n    text-align: left;\n    background-color: @select-popup-option-color-bg_default;\n    cursor: pointer;\n\n    &-content {\n      .text-ellipsis();\n    }\n\n    &-checkbox {\n      overflow: hidden;\n\n      .@{prefix}-checkbox-label {\n        .text-ellipsis();\n      }\n    }\n\n    &-has-suffix {\n      justify-content: space-between;\n    }\n\n    // selected\n    &-selected {\n      color: @select-popup-option-color-text_selected;\n      font-weight: @select-popup-option-font-weight_selected;\n      background-color: @select-popup-option-color-bg_selected;\n    }\n\n    // hover\n    &-active,\n    &:not(&-disabled):hover {\n      color: @select-popup-option-color-text_hover;\n      background-color: @select-popup-option-color-bg_hover;\n      transition: all @transition-duration-1 @transition-timing-function-linear;\n    }\n\n    // disabled\n    &-disabled {\n      color: @select-popup-option-color-text_disabled;\n      background-color: @select-popup-option-color-bg_disabled;\n      cursor: not-allowed;\n    }\n\n    &-icon {\n      display: inline-flex;\n      margin-right: 8px;\n    }\n\n    &-suffix {\n      margin-left: @dropdown-margin-left-suffix-icon;\n    }\n  }\n\n  .@{select-prefix-cls}-group {\n    &:first-child &-title {\n      margin-top: @select-popup-group-title-padding-top;\n    }\n\n    &-title {\n      box-sizing: border-box;\n      width: 100%;\n      margin-top: @select-popup-group-title-padding-top;\n      padding: 0 @select-popup-group-title-padding-horizontal;\n      color: @select-popup-group-title-color-text;\n      font-size: @select-popup-group-title-font-size;\n      line-height: @select-popup-group-title-height;\n      cursor: default;\n      .text-ellipsis();\n    }\n  }\n\n  &&-has-header {\n    padding-top: 0;\n  }\n\n  &-header {\n    border-bottom: 1px solid @select-popup-color-border;\n  }\n\n  &&-has-footer {\n    padding-bottom: 0;\n  }\n\n  &-footer {\n    border-top: 1px solid @select-popup-color-border;\n  }\n}\n"
  },
  {
    "path": "packages/web-vue/components/select/style/index.ts",
    "content": "import '../../style/index.less';\nimport '../../_components/select-view/style';\nimport '../../trigger/style';\nimport '../../empty/style';\nimport '../../checkbox/style';\nimport '../../scrollbar/style';\nimport './index.less';\n"
  },
  {
    "path": "packages/web-vue/components/select/style/token.less",
    "content": "@import '../../style/theme/index.less';\n\n/**********************************************\n * Popup Box\n **********************************************/\n@select-popup-max-height: @size-50;\n@select-popup-border-radius: @radius-medium;\n@select-popup-padding-vertical: @spacing-2;\n@select-popup-font-size: @font-size-body-3;\n@select-popup-color-bg: var(~'@{arco-cssvars-prefix}-color-bg-popup');\n@select-popup-color-border: var(~'@{arco-cssvars-prefix}-color-fill-3');\n@select-popup-box-shadow: @shadow2-down;\n\n/**********************************************\n * Popup Options\n * status: default / disabled / selected / hover\n **********************************************/\n@select-popup-option-height: @size-9;\n@select-popup-option-font-weight_selected: @font-weight-500;\n@select-signal-popup-option-padding-horizontal: @spacing-6;\n@select-multi-popup-option-padding-horizontal: @spacing-2;\n\n@select-popup-option-color-bg_default: var(~'@{arco-cssvars-prefix}-color-bg-popup');\n@select-popup-option-color-bg_hover: var(~'@{arco-cssvars-prefix}-color-fill-2');\n@select-popup-option-color-bg_selected: var(~'@{arco-cssvars-prefix}-color-bg-popup');\n@select-popup-option-color-bg_disabled: var(~'@{arco-cssvars-prefix}-color-bg-popup');\n\n@select-popup-option-color-text_default: var(~'@{arco-cssvars-prefix}-color-text-1');\n@select-popup-option-color-text_hover: var(~'@{arco-cssvars-prefix}-color-text-1');\n@select-popup-option-color-text_selected: var(~'@{arco-cssvars-prefix}-color-text-1');\n@select-popup-option-color-text_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');\n\n@select-popup-option-color-highlight-text: var(--color-text-1);\n@select-popup-option-font-highlight-weight: @font-weight-500;\n\n// option group title\n@select-popup-group-title-height: @size-5;\n@select-popup-group-title-padding-horizontal: @spacing-6;\n@select-popup-group-title-padding-top: @spacing-4;\n@select-popup-group-title-font-size: @font-size-body-1;\n@select-popup-group-title-color-text: var(~'@{arco-cssvars-prefix}-color-text-3');\n\n@dropdown-margin-left-suffix-icon: @spacing-6;\n"
  },
  {
    "path": "packages/web-vue/components/select/utils.ts",
    "content": "import {\n  isBoolean,\n  isFunction,\n  isNumber,\n  isObject,\n  isString,\n} from '../_utils/is';\nimport type {\n  FilterOption,\n  SelectOptionGroup,\n  SelectOptionGroupInfo,\n  SelectOption,\n  SelectOptionData,\n  SelectOptionInfo,\n  SelectOptionValue,\n  SelectFieldNames,\n} from './interface';\n\nexport const isGroupOption = (\n  option: SelectOption\n): option is SelectOptionGroup => {\n  return isObject(option) && 'isGroup' in option;\n};\n\nexport const isGroupOptionInfo = (\n  option: SelectOptionInfo | SelectOptionGroupInfo\n): option is SelectOptionGroupInfo => {\n  return isObject(option) && 'isGroup' in option;\n};\n\nexport const getValueString = (value: SelectOptionValue, valueKey = 'value') =>\n  String(isObject(value) ? value[valueKey] : value);\n\nexport const getKeyFromValue = (\n  value?: SelectOptionValue,\n  valueKey = 'value'\n) => {\n  if (isObject(value)) {\n    return `__arco__option__object__${value[valueKey]}`;\n  }\n  if (value || isNumber(value) || isString(value) || isBoolean(value)) {\n    return `__arco__option__${typeof value}-${value}`;\n  }\n  return '';\n};\n\nexport const hasEmptyStringKey = (\n  optionInfoMap: Map<string, SelectOptionInfo>\n) => {\n  return optionInfoMap.has(`__arco__option__string-`);\n};\n\nexport const createOptionInfo = (\n  option: string | number | SelectOptionData,\n  {\n    valueKey,\n    fieldNames,\n    origin,\n    index = -1,\n  }: {\n    valueKey: string;\n    fieldNames: Required<SelectFieldNames>;\n    origin: 'slot' | 'options' | 'extraOptions';\n    index?: number;\n  }\n): SelectOptionInfo => {\n  if (isObject(option)) {\n    const value = option[fieldNames.value];\n\n    return {\n      raw: option,\n      index,\n      key: getKeyFromValue(value, valueKey),\n      origin,\n      value,\n      label: option[fieldNames.label] ?? getValueString(value, valueKey),\n      render: option[fieldNames.render],\n      disabled: Boolean(option[fieldNames.disabled]),\n      tagProps: option[fieldNames.tagProps],\n    };\n  }\n  const raw = {\n    value: option,\n    label: String(option),\n    disabled: false,\n  };\n\n  return {\n    raw,\n    index,\n    key: getKeyFromValue(option, valueKey),\n    origin,\n    ...raw,\n  };\n};\n\nexport const getOptionInfos = (\n  options: SelectOption[],\n  {\n    valueKey,\n    fieldNames,\n    origin,\n    optionInfoMap,\n  }: {\n    valueKey: string;\n    fieldNames: Required<SelectFieldNames>;\n    origin: 'options' | 'extraOptions';\n    optionInfoMap: Map<string, SelectOptionInfo>;\n  }\n) => {\n  const infos: (SelectOptionInfo | SelectOptionGroupInfo)[] = [];\n\n  for (const item of options) {\n    if (isGroupOption(item)) {\n      const options = getOptionInfos(item.options ?? [], {\n        valueKey,\n        fieldNames,\n        origin,\n        optionInfoMap,\n      });\n      if (options.length > 0) {\n        infos.push({\n          ...item,\n          key: `__arco__group__${item.label}`,\n          options,\n        });\n      }\n    } else {\n      const optionInfo = createOptionInfo(item, {\n        valueKey,\n        fieldNames,\n        origin,\n      });\n      infos.push(optionInfo);\n      if (!optionInfoMap.get(optionInfo.key)) {\n        optionInfoMap.set(optionInfo.key, optionInfo);\n      }\n    }\n  }\n  return infos;\n};\n\nexport const createOptionInfoMap = (\n  optionInfos: (SelectOptionInfo | SelectOptionGroupInfo)[]\n) => {\n  const optionInfoMap = new Map<string, SelectOptionInfo>();\n\n  const travel = (\n    optionInfos: (SelectOptionInfo | SelectOptionGroupInfo)[]\n  ) => {\n    for (const item of optionInfos) {\n      if (isGroupOptionInfo(item)) {\n        travel(item.options ?? []);\n      } else if (!optionInfoMap.get(item.key)) {\n        optionInfoMap.set(item.key, item);\n      }\n    }\n  };\n\n  travel(optionInfos);\n\n  return optionInfoMap;\n};\n\nexport const getValidOptions = (\n  optionInfos: (SelectOptionInfo | SelectOptionGroupInfo)[],\n  {\n    inputValue,\n    filterOption,\n  }: {\n    inputValue?: string;\n    filterOption?: FilterOption;\n  }\n) => {\n  const travel = (\n    optionInfos: (SelectOptionInfo | SelectOptionGroupInfo)[]\n  ) => {\n    const options: (SelectOptionInfo | SelectOptionGroupInfo)[] = [];\n\n    for (const item of optionInfos) {\n      if (isGroupOptionInfo(item)) {\n        const _options = travel(item.options ?? []);\n        if (_options.length > 0) {\n          options.push({ ...item, options: _options });\n        }\n      } else if (isValidOption(item, { inputValue, filterOption })) {\n        options.push(item);\n      }\n    }\n    return options;\n  };\n\n  return travel(optionInfos);\n};\n\nexport const isValidOption = (\n  optionInfo: SelectOptionInfo,\n  {\n    inputValue,\n    filterOption,\n  }: {\n    inputValue?: string;\n    filterOption?: FilterOption;\n  }\n) => {\n  if (isFunction(filterOption)) {\n    return !inputValue || filterOption(inputValue, optionInfo.raw);\n  }\n\n  if (filterOption) {\n    return optionInfo.label\n      .toLowerCase()\n      .includes((inputValue ?? '').toLowerCase());\n  }\n\n  return true;\n};\n"
  },
  {
    "path": "packages/web-vue/components/skeleton/README.en-US.md",
    "content": "```yaml\nmeta:\n  type: Component\n  category: Feedback\ntitle: Skeleton\ndescription: Use gray to place the data being loaded.\n```\n\n*Auto translate by google.*\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/type.md\n\n@import ./__demo__/animation.md\n\n## API\n\n\n### `<skeleton>` Props\n\n|Attribute|Description|Type|Default|\n|---|---|---|:---:|\n|loading|Whether to display the skeleton screen (loading state)|`boolean`|`true`|\n|animation|Whether to enable skeleton screen animation|`boolean`|`false`|\n\n\n\n\n### `<skeleton-line>` Props\n\n|Attribute|Description|Type|Default|\n|---|---|---|:---:|\n|rows|Number of rows displayed|`number`|`1`|\n|widths|The width of the line skeleton|`Array<number \\| string>`|`[]`|\n|line-height|Line height of the line skeleton|`number`|`20`|\n|line-spacing|Line spacing of line skeleton|`number`|`15`|\n\n\n\n\n### `<skeleton-shape>` Props\n\n|Attribute|Description|Type|Default|\n|---|---|---|:---:|\n|shape|The shape of the shape skeleton|`'square' \\| 'circle'`|`'square'`|\n|size|The size of the shape skeleton|`'small' \\| 'medium' \\| 'large'`|`'medium'`|\n\n\n"
  },
  {
    "path": "packages/web-vue/components/skeleton/README.zh-CN.md",
    "content": "```yaml\nmeta:\n  type: 组件\n  category: 反馈\ntitle: 骨架屏 Skeleton\ndescription: 将加载中的数据用灰色占位。\n```\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/type.md\n\n@import ./__demo__/animation.md\n\n## API\n\n\n### `<skeleton>` Props\n\n|参数名|描述|类型|默认值|\n|---|---|---|:---:|\n|loading|是否展示骨架屏（加载中状态）|`boolean`|`true`|\n|animation|是否开启骨架屏动画|`boolean`|`false`|\n\n\n\n\n### `<skeleton-line>` Props\n\n|参数名|描述|类型|默认值|\n|---|---|---|:---:|\n|rows|展示的行数|`number`|`1`|\n|widths|线型骨架的宽度|`Array<number \\| string>`|`[]`|\n|line-height|线型骨架的行高|`number`|`20`|\n|line-spacing|线型骨架的行间距|`number`|`15`|\n\n\n\n\n### `<skeleton-shape>` Props\n\n|参数名|描述|类型|默认值|\n|---|---|---|:---:|\n|shape|图形骨架的形状|`'square' \\| 'circle'`|`'square'`|\n|size|图形骨架的大小|`'small' \\| 'medium' \\| 'large'`|`'medium'`|\n\n\n"
  },
  {
    "path": "packages/web-vue/components/skeleton/TEMPLATE.md",
    "content": "## zh-CN\n```yaml\nmeta:\n  type: 组件\n  category: 反馈\ntitle: 骨架屏 Skeleton\ndescription: 将加载中的数据用灰色占位。\n```\n---\n## en-US\n```yaml\nmeta:\n  type: Component\n  category: Feedback\ntitle: Skeleton\ndescription: Use gray to place the data being loaded.\n```\n---\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/type.md\n\n@import ./__demo__/animation.md\n\n## API\n\n%%API(skeleton.vue)%%\n\n%%API(line.vue)%%\n\n%%API(shape.vue)%%\n"
  },
  {
    "path": "packages/web-vue/components/skeleton/__demo__/animation.md",
    "content": "```yaml\ntitle:\n  zh-CN: 动画\n  en-US: Animation\n```\n\n## zh-CN\n\n通过设置 `animation` 属性，让骨架屏显示动画效果。\n\n---\n\n## en-US\n\nBy setting the `animation` property, the skeleton screen can display the animation effect.\n\n---\n\n```vue\n<template>\n  <a-space direction=\"vertical\" size=\"large\" :style=\"{width:'100%'}\">\n    <a-space>\n      <span>Animation</span>\n      <a-switch v-model=\"animation\" />\n    </a-space>\n    <a-skeleton :animation=\"animation\">\n      <a-space direction=\"vertical\" :style=\"{width:'100%'}\" size=\"large\">\n        <a-skeleton-line :rows=\"3\" />\n        <a-skeleton-shape />\n      </a-space>\n    </a-skeleton>\n  </a-space>\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n  setup() {\n    const animation = ref(true);\n\n    return {\n      animation\n    }\n  },\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/skeleton/__demo__/basic.md",
    "content": "```yaml\ntitle:\n  zh-CN: 基本用法\n  en-US: Basic Usage\n```\n\n## zh-CN\n\n骨架屏组件提供 `<a-skeleton-line>` 和 `<a-skeleton-shape>` 两种组件，用户可根据需要组合使用。\n\n---\n\n## en-US\n\nThe skeleton screen component provides two components: `<a-skeleton-line>` and `<a-skeleton-shape>`, users can combine them according to their needs.\n\n---\n\n```vue\n<template>\n  <a-skeleton>\n    <a-space direction=\"vertical\" :style=\"{width:'100%'}\" size=\"large\">\n      <a-skeleton-line :rows=\"3\" />\n      <a-skeleton-shape />\n    </a-space>\n  </a-skeleton>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/skeleton/__demo__/type.md",
    "content": "```yaml\ntitle:\n  zh-CN: 图形骨架屏\n  en-US: Shape Skeleton\n```\n\n## zh-CN\n\n图形骨架屏分为 `square` - **正方形（默认）**、 `circle` - **圆形**两种形状，并提供 `small`、`medium`、`large` 三种尺寸。\n\n---\n\n## en-US\n\nThe graphic skeleton screen is divided into two shapes: `square`, `circle`, and provides three sizes of `small`, `medium`, and `large`.\n\n---\n\n```vue\n<template>\n  <a-skeleton>\n    <a-space size=\"large\">\n      <a-skeleton-shape size=\"small\" />\n      <a-skeleton-shape />\n      <a-skeleton-shape size=\"large\" />\n      <a-skeleton-shape shape=\"circle\" size=\"small\" />\n      <a-skeleton-shape shape=\"circle\" />\n      <a-skeleton-shape shape=\"circle\" size=\"large\" />\n    </a-space>\n  </a-skeleton>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/skeleton/__test__/__snapshots__/demo.test.ts.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`<skeleton> demo: render [animation] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-vertical\\\\\" style=\\\\\"column-gap: 24px; row-gap: 24px; width: 100%;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 8px; row-gap: 8px;\\\\\">\n      <!---->\n      <div class=\\\\\"arco-space-item\\\\\"><span>Animation</span></div>\n      <!---->\n      <div class=\\\\\"arco-space-item\\\\\"><button type=\\\\\"button\\\\\" role=\\\\\"switch\\\\\" aria-checked=\\\\\"true\\\\\" class=\\\\\"arco-switch arco-switch-type-circle arco-switch-checked\\\\\"><span class=\\\\\"arco-switch-handle\\\\\"><span class=\\\\\"arco-switch-handle-icon\\\\\"></span></span><!--  prettier-ignore  -->\n          <!--v-if-->\n        </button></div>\n    </div>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-skeleton arco-skeleton-animation\\\\\">\n      <div class=\\\\\"arco-space arco-space-vertical\\\\\" style=\\\\\"column-gap: 24px; row-gap: 24px; width: 100%;\\\\\">\n        <!---->\n        <div class=\\\\\"arco-space-item\\\\\">\n          <ul class=\\\\\"arco-skeleton-line\\\\\">\n            <li class=\\\\\"arco-skeleton-line-row\\\\\" style=\\\\\"height: 20px;\\\\\"></li>\n          </ul>\n          <ul class=\\\\\"arco-skeleton-line\\\\\">\n            <li class=\\\\\"arco-skeleton-line-row\\\\\" style=\\\\\"height: 20px; margin-top: 15px;\\\\\"></li>\n          </ul>\n          <ul class=\\\\\"arco-skeleton-line\\\\\">\n            <li class=\\\\\"arco-skeleton-line-row\\\\\" style=\\\\\"height: 20px; margin-top: 15px;\\\\\"></li>\n          </ul>\n        </div>\n        <!---->\n        <div class=\\\\\"arco-space-item\\\\\">\n          <div class=\\\\\"arco-skeleton-shape arco-skeleton-shape-square arco-skeleton-shape-medium\\\\\"></div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\"\n`;\n\nexports[`<skeleton> demo: render [basic] correctly 1`] = `\n\"<div class=\\\\\"arco-skeleton\\\\\">\n  <div class=\\\\\"arco-space arco-space-vertical\\\\\" style=\\\\\"column-gap: 24px; row-gap: 24px; width: 100%;\\\\\">\n    <!---->\n    <div class=\\\\\"arco-space-item\\\\\">\n      <ul class=\\\\\"arco-skeleton-line\\\\\">\n        <li class=\\\\\"arco-skeleton-line-row\\\\\" style=\\\\\"height: 20px;\\\\\"></li>\n      </ul>\n      <ul class=\\\\\"arco-skeleton-line\\\\\">\n        <li class=\\\\\"arco-skeleton-line-row\\\\\" style=\\\\\"height: 20px; margin-top: 15px;\\\\\"></li>\n      </ul>\n      <ul class=\\\\\"arco-skeleton-line\\\\\">\n        <li class=\\\\\"arco-skeleton-line-row\\\\\" style=\\\\\"height: 20px; margin-top: 15px;\\\\\"></li>\n      </ul>\n    </div>\n    <!---->\n    <div class=\\\\\"arco-space-item\\\\\">\n      <div class=\\\\\"arco-skeleton-shape arco-skeleton-shape-square arco-skeleton-shape-medium\\\\\"></div>\n    </div>\n  </div>\n</div>\"\n`;\n\nexports[`<skeleton> demo: render [type] correctly 1`] = `\n\"<div class=\\\\\"arco-skeleton\\\\\">\n  <div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 24px; row-gap: 24px;\\\\\">\n    <!---->\n    <div class=\\\\\"arco-space-item\\\\\">\n      <div class=\\\\\"arco-skeleton-shape arco-skeleton-shape-square arco-skeleton-shape-small\\\\\"></div>\n    </div>\n    <!---->\n    <div class=\\\\\"arco-space-item\\\\\">\n      <div class=\\\\\"arco-skeleton-shape arco-skeleton-shape-square arco-skeleton-shape-medium\\\\\"></div>\n    </div>\n    <!---->\n    <div class=\\\\\"arco-space-item\\\\\">\n      <div class=\\\\\"arco-skeleton-shape arco-skeleton-shape-square arco-skeleton-shape-large\\\\\"></div>\n    </div>\n    <!---->\n    <div class=\\\\\"arco-space-item\\\\\">\n      <div class=\\\\\"arco-skeleton-shape arco-skeleton-shape-circle arco-skeleton-shape-small\\\\\"></div>\n    </div>\n    <!---->\n    <div class=\\\\\"arco-space-item\\\\\">\n      <div class=\\\\\"arco-skeleton-shape arco-skeleton-shape-circle arco-skeleton-shape-medium\\\\\"></div>\n    </div>\n    <!---->\n    <div class=\\\\\"arco-space-item\\\\\">\n      <div class=\\\\\"arco-skeleton-shape arco-skeleton-shape-circle arco-skeleton-shape-large\\\\\"></div>\n    </div>\n  </div>\n</div>\"\n`;\n"
  },
  {
    "path": "packages/web-vue/components/skeleton/__test__/demo.test.ts",
    "content": "import demoTest from '../../../scripts/demo-test';\n\ndemoTest('skeleton');\n"
  },
  {
    "path": "packages/web-vue/components/skeleton/index.ts",
    "content": "import type { App } from 'vue';\nimport type { ArcoOptions } from '../_utils/types';\nimport { setGlobalConfig, getComponentPrefix } from '../_utils/global-config';\nimport _Skeleton from './skeleton.vue';\nimport _SkeletonLine from './line.vue';\nimport _SkeletonShape from './shape.vue';\n\nconst Skeleton = Object.assign(_Skeleton, {\n  Line: _SkeletonLine,\n  Shape: _SkeletonShape,\n  install: (app: App, options?: ArcoOptions) => {\n    setGlobalConfig(app, options);\n    const componentPrefix = getComponentPrefix(options);\n\n    app.component(componentPrefix + _Skeleton.name, _Skeleton);\n    app.component(componentPrefix + _SkeletonLine.name, _SkeletonLine);\n    app.component(componentPrefix + _SkeletonShape.name, _SkeletonShape);\n  },\n});\n\nexport type SkeletonInstance = InstanceType<typeof _Skeleton>;\nexport type SkeletonLineInstance = InstanceType<typeof _SkeletonLine>;\nexport type SkeletonShapeInstance = InstanceType<typeof _SkeletonShape>;\n\nexport { _SkeletonLine as SkeletonLine, _SkeletonShape as SkeletonShape };\n\nexport default Skeleton;\n"
  },
  {
    "path": "packages/web-vue/components/skeleton/line.vue",
    "content": "<template>\n  <ul v-for=\"(style, index) of lines\" :key=\"index\" :class=\"prefixCls\">\n    <li :class=\"`${prefixCls}-row`\" :style=\"style\" />\n  </ul>\n</template>\n\n<script lang=\"ts\">\nimport type { PropType, CSSProperties } from 'vue';\nimport { defineComponent } from 'vue';\nimport { getPrefixCls } from '../_utils/global-config';\nimport { isNumber, isString } from '../_utils/is';\n\nexport default defineComponent({\n  name: 'SkeletonLine',\n  props: {\n    /**\n     * @zh 展示的行数\n     * @en Number of rows displayed\n     */\n    rows: {\n      type: Number,\n      default: 1,\n    },\n    /**\n     * @zh 线型骨架的宽度\n     * @en The width of the line skeleton\n     */\n    widths: {\n      type: Array as PropType<Array<number | string>>,\n      default: () => [],\n    },\n    /**\n     * @zh 线型骨架的行高\n     * @en Line height of the line skeleton\n     */\n    lineHeight: {\n      type: Number,\n      default: 20,\n    },\n    /**\n     * @zh 线型骨架的行间距\n     * @en Line spacing of line skeleton\n     */\n    lineSpacing: {\n      type: Number,\n      default: 15,\n    },\n  },\n  setup(props) {\n    const prefixCls = getPrefixCls('skeleton-line');\n\n    const lines: CSSProperties[] = [];\n    for (let i = 0; i < props.rows; i++) {\n      const style: CSSProperties = {};\n      if (isNumber(props.widths[i])) {\n        style.width = `${props.widths[i]}px`;\n      } else if (isString(props.widths[i])) {\n        style.width = String(props.widths[i]);\n      }\n      style.height = `${props.lineHeight}px`;\n      if (i > 0) {\n        style.marginTop = `${props.lineSpacing}px`;\n      }\n      lines.push(style);\n    }\n\n    return {\n      prefixCls,\n      lines,\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/skeleton/shape.vue",
    "content": "<template>\n  <div :class=\"cls\" />\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, PropType } from 'vue';\nimport { getPrefixCls } from '../_utils/global-config';\n\nexport default defineComponent({\n  name: 'SkeletonShape',\n  props: {\n    /**\n     * @zh 图形骨架的形状\n     * @en The shape of the shape skeleton\n     * @values 'square', 'circle'\n     */\n    shape: {\n      type: String as PropType<'square' | 'circle'>,\n      default: 'square',\n    },\n    /**\n     * @zh 图形骨架的大小\n     * @en The size of the shape skeleton\n     * @values 'small', 'medium', 'large'\n     */\n    size: {\n      type: String,\n      default: 'medium',\n    },\n  },\n  setup(props) {\n    const prefixCls = getPrefixCls('skeleton-shape');\n\n    const cls = computed(() => [\n      prefixCls,\n      `${prefixCls}-${props.shape}`,\n      `${prefixCls}-${props.size}`,\n    ]);\n\n    return {\n      prefixCls,\n      cls,\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/skeleton/skeleton.vue",
    "content": "<template>\n  <div :class=\"cls\">\n    <slot v-if=\"loading\" />\n    <slot v-else name=\"content\" />\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent } from 'vue';\nimport { getPrefixCls } from '../_utils/global-config';\n\nexport default defineComponent({\n  name: 'Skeleton',\n  props: {\n    /**\n     * @zh 是否展示骨架屏（加载中状态）\n     * @en Whether to display the skeleton screen (loading state)\n     */\n    loading: {\n      type: Boolean,\n      default: true,\n    },\n    /**\n     * @zh 是否开启骨架屏动画\n     * @en Whether to enable skeleton screen animation\n     */\n    animation: {\n      type: Boolean,\n      default: false,\n    },\n  },\n  setup(props) {\n    const prefixCls = getPrefixCls('skeleton');\n\n    const cls = computed(() => [\n      prefixCls,\n      {\n        [`${prefixCls}-animation`]: props.animation,\n      },\n    ]);\n\n    return {\n      prefixCls,\n      cls,\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/skeleton/style/index.less",
    "content": "@import './token.less';\n\n@skeleton-prefix-cls: ~'@{prefix}-skeleton';\n\n.@{skeleton-prefix-cls} {\n  &-shape {\n    width: @skeleton-size-image_default;\n    height: @skeleton-size-image_default;\n    background-color: @skeleton-color-bg-base;\n    border-radius: @skeleton-radius-image-border;\n\n    &-circle {\n      border-radius: 50%;\n    }\n\n    &-small {\n      width: @skeleton-size-image_small;\n      height: @skeleton-size-image_small;\n    }\n\n    &-large {\n      width: @skeleton-size-image_large;\n      height: @skeleton-size-image_large;\n    }\n  }\n\n  &-line {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n\n    &-row {\n      height: @skeleton-size-row-height;\n      background-color: @skeleton-color-bg-base;\n    }\n\n    &-row:not(:last-child) {\n      margin-bottom: @skeleton-spacing-last_row-margin-bottom;\n    }\n  }\n\n  &-animation {\n    .@{skeleton-prefix-cls}-shape,\n    .@{skeleton-prefix-cls}-line-row {\n      background: linear-gradient(\n        90deg,\n        @skeleton-color-bg-base 25%,\n        @skeleton-color-animate-bg 37%,\n        @skeleton-color-bg-base 63%\n      );\n      background-size: 400% 100%;\n      animation: ~'@{prefix}-skeleton-circle' 1.5s @transition-timing-function-linear\n        infinite;\n    }\n  }\n}\n\n@keyframes ~'@{prefix}-skeleton-circle' {\n  0% {\n    background-position: 100% 50%;\n  }\n\n  100% {\n    background-position: 0 50%;\n  }\n}\n"
  },
  {
    "path": "packages/web-vue/components/skeleton/style/index.ts",
    "content": "import '../../style/index.less';\nimport './index.less';\n"
  },
  {
    "path": "packages/web-vue/components/skeleton/style/token.less",
    "content": "@import '../../style/theme/index.less';\n\n@skeleton-color-bg-base: var(~'@{arco-cssvars-prefix}-color-fill-2');\n\n@skeleton-radius-image-border: @radius-small;\n@skeleton-size-image_default: @size-12;\n@skeleton-size-image_small: @size-9;\n@skeleton-size-image_large: @size-15;\n@skeleton-spacing-image_left-margin-right: @spacing-7;\n@skeleton-spacing-image_right-margin-left: @spacing-7;\n\n@skeleton-size-row-height: @size-4;\n@skeleton-spacing-last_row-margin-bottom: @spacing-7;\n\n@skeleton-color-animate-bg: var(~'@{arco-cssvars-prefix}-color-fill-3');\n"
  },
  {
    "path": "packages/web-vue/components/slider/CHANGELOG.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.57.0\n\n`2025-03-10`\n\n### 🐛 BugFix\n\n- Fixed Drag change slider value not working on mobile side ([#3343](https://github.com/arco-design/arco-design-vue/pull/3343))\n\n\n## 2.44.2\n\n`2023-03-17`\n\n### 🐛 BugFix\n\n- Fix the problem of model-value binding error in range mode ([#2241](https://github.com/arco-design/arco-design-vue/pull/2241))\n\n\n## 2.42.1\n\n`2023-02-03`\n\n### 🐛 BugFix\n\n- Optimize the automatic repair of invalid input in the digital input box ([#1952](https://github.com/arco-design/arco-design-vue/pull/1952))\n\n\n## 2.42.0\n\n`2023-01-13`\n\n### 🆕 Feature\n\n- add show-tooltip props ([#2037](https://github.com/arco-design/arco-design-vue/pull/2037))\n\n\n## 2.38.1\n\n`2022-11-04`\n\n### 🐛 BugFix\n\n- fix the slider show wrong position when set min value ([#1826](https://github.com/arco-design/arco-design-vue/pull/1826))\n\n\n## 2.18.0\n\n`2022-03-04`\n\n### 🐛 BugFix\n\n- Fix the problem that change will not be triggered when the input box is changed ([#775](https://github.com/arco-design/arco-design-vue/pull/775))\n\n\n## 2.1.0\n\n`2021-11-05`\n\n### 🐛 BugFix\n\n- Fixed the problem that the right click did not release the drag event ([#97](https://github.com/arco-design/arco-design-vue/pull/97))\n\n"
  },
  {
    "path": "packages/web-vue/components/slider/CHANGELOG.zh-CN.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.57.0\n\n`2025-03-10`\n\n### 🐛 问题修复\n\n- 修复拖动更改滑块值在移动端无效 ([#3343](https://github.com/arco-design/arco-design-vue/pull/3343))\n\n\n## 2.44.2\n\n`2023-03-17`\n\n### 🐛 问题修复\n\n- 修复在 range 模式下 model-value 绑定错误的问题 ([#2241](https://github.com/arco-design/arco-design-vue/pull/2241))\n\n\n## 2.42.1\n\n`2023-02-03`\n\n### 🐛 问题修复\n\n- 优化数字输入框无效输入时能够自动修复 ([#1952](https://github.com/arco-design/arco-design-vue/pull/1952))\n\n\n## 2.42.0\n\n`2023-01-13`\n\n### 🆕 新增功能\n\n- 添加show-tooltip属性 ([#2037](https://github.com/arco-design/arco-design-vue/pull/2037))\n\n\n## 2.38.1\n\n`2022-11-04`\n\n### 🐛 问题修复\n\n- 修复滑动输入条设置最小值起始位置错误 ([#1826](https://github.com/arco-design/arco-design-vue/pull/1826))\n\n\n## 2.18.0\n\n`2022-03-04`\n\n### 🐛 问题修复\n\n- 修复输入框改变时不会触发 change 的问题 ([#775](https://github.com/arco-design/arco-design-vue/pull/775))\n\n\n## 2.1.0\n\n`2021-11-05`\n\n### 🐛 问题修复\n\n- 修复点击右键没有释放拖拽事件的问题 ([#97](https://github.com/arco-design/arco-design-vue/pull/97))\n\n"
  },
  {
    "path": "packages/web-vue/components/slider/README.en-US.md",
    "content": "```yaml\nmeta:\n  type: Component\n  category: Data Entry\ntitle: Slider\ndescription: Sliding input device, showing current value and selectable range.\n```\n\n*Auto translate by google.*\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/disabled.md\n\n@import ./__demo__/step.md\n\n@import ./__demo__/marks.md\n\n@import ./__demo__/range.md\n\n@import ./__demo__/input.md\n\n@import ./__demo__/vertical.md\n\n@import ./__demo__/tooltip.md\n\n## API\n\n\n### `<slider>` Props\n\n|Attribute|Description|Type|Default|version|\n|---|---|---|:---:|:---|\n|model-value **(v-model)**|Value|`number \\| [number, number]`|`-`||\n|default-value|Default value (uncontrolled state)|`number \\| [number, number]`|`0`||\n|step|Sliding step|`number`|`1`||\n|min|Minimum sliding range|`number`|`0`||\n|marks|Set the displayed label|`Record<number, string>`|`-`||\n|max|Maximum sliding range|`number`|`100`||\n|direction|The direction of the slider|`Direction`|`'horizontal'`||\n|disabled|Whether to disable|`boolean`|`false`||\n|show-ticks|Whether to show ticks|`boolean`|`false`||\n|show-input|Whether to show the input|`boolean`|`false`||\n|range|Whether to use range selection|`boolean`|`false`||\n|show-tooltip|Whether to show tooltip|`boolean`|`true`|2.42.0|\n### `<slider>` Events\n\n|Event Name|Description|Parameters|\n|---|---|---|\n|change|Trigger when the value changes|value: `number \\| [number, number]`|\n\n\n"
  },
  {
    "path": "packages/web-vue/components/slider/README.zh-CN.md",
    "content": "```yaml\nmeta:\n  type: 组件\n  category: 数据输入\ntitle: 滑动输入条 Slider\ndescription: 滑动型输入器，展示当前值和可选范围。\n```\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/disabled.md\n\n@import ./__demo__/step.md\n\n@import ./__demo__/marks.md\n\n@import ./__demo__/range.md\n\n@import ./__demo__/input.md\n\n@import ./__demo__/vertical.md\n\n@import ./__demo__/tooltip.md\n\n## API\n\n\n### `<slider>` Props\n\n|参数名|描述|类型|默认值|版本|\n|---|---|---|:---:|:---|\n|model-value **(v-model)**|绑定值|`number \\| [number, number]`|`-`||\n|default-value|默认值（非受控状态）|`number \\| [number, number]`|`0`||\n|step|滑动的步长|`number`|`1`||\n|min|滑动范围的最小值|`number`|`0`||\n|marks|设置显示的标签|`Record<number, string>`|`-`||\n|max|滑动范围的最大值|`number`|`100`||\n|direction|滑动输入条的方向|`Direction`|`'horizontal'`||\n|disabled|是否禁用|`boolean`|`false`||\n|show-ticks|是否显示刻度线|`boolean`|`false`||\n|show-input|是否显示输入框|`boolean`|`false`||\n|range|是否开启范围选择|`boolean`|`false`||\n|show-tooltip|是否显示tooltip|`boolean`|`true`|2.42.0|\n### `<slider>` Events\n\n|事件名|描述|参数|\n|---|---|---|\n|change|值改变时触发|value: `number \\| [number, number]`|\n\n\n"
  },
  {
    "path": "packages/web-vue/components/slider/TEMPLATE.md",
    "content": "## zh-CN\n```yaml\nmeta:\n  type: 组件\n  category: 数据输入\ntitle: 滑动输入条 Slider\ndescription: 滑动型输入器，展示当前值和可选范围。\n```\n---\n## en-US\n```yaml\nmeta:\n  type: Component\n  category: Data Entry\ntitle: Slider\ndescription: Sliding input device, showing current value and selectable range.\n```\n---\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/disabled.md\n\n@import ./__demo__/step.md\n\n@import ./__demo__/marks.md\n\n@import ./__demo__/range.md\n\n@import ./__demo__/input.md\n\n@import ./__demo__/vertical.md\n\n@import ./__demo__/tooltip.md\n\n## API\n\n%%API(slider.vue)%%\n"
  },
  {
    "path": "packages/web-vue/components/slider/__demo__/basic.md",
    "content": "```yaml\ntitle:\n  zh-CN: 基本用法\n  en-US: Basic Usage\n```\n\n## zh-CN\n\n滑动输入条的基本用法。\n\n---\n\n## en-US\n\nBasic usage of sliding input bar.\n\n---\n\n```vue\n<template>\n  <a-slider :default-value=\"50\" :style=\"{ width: '200px' }\" />\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/slider/__demo__/disabled.md",
    "content": "```yaml\ntitle:\n  zh-CN: 禁用状态\n  en-US: Disabled\n```\n\n## zh-CN\n\n禁用滑动输入条。\n\n---\n\n## en-US\n\nDisable the slider.\n\n---\n\n```vue\n<template>\n  <a-slider :default-value=\"50\" :style=\"{ width: '200px' }\" disabled/>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/slider/__demo__/input.md",
    "content": "```yaml\ntitle:\n  zh-CN: 显示输入框\n  en-US: Show Input\n```\n\n## zh-CN\n\n当设置 `show-input` 时，将显示输入框。\n\n---\n\n## en-US\n\nWhen `show-input` is set, the input will be displayed.\n\n---\n\n```vue\n<template>\n  <a-space direction=\"vertical\" size=\"large\">\n    <a-slider :default-value=\"10\" :style=\"{ width: '300px' }\" show-input />\n    <a-slider :default-value=\"[10,20]\" :style=\"{ width: '380px' }\" range show-input />\n  </a-space>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/slider/__demo__/marks.md",
    "content": "```yaml\ntitle:\n  zh-CN: 添加文本标签\n  en-US: Marks\n```\n\n## zh-CN\n\n通过设置 `marks` 可以添加文本标签。\n\n---\n\n## en-US\n\nYou can add text labels by setting `marks`.\n\n---\n\n```vue\n<template>\n  <a-slider :default-value=\"5\" :style=\"{ width: '300px' }\" :max=\"15\" :marks=\"marks\" />\n</template>\n\n<script>\nexport default {\n  setup() {\n    const marks = {\n      0: '0km',\n      5: '5km',\n      10: '10km',\n      15: '15km'\n    };\n    return {\n      marks\n    }\n  },\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/slider/__demo__/range.md",
    "content": "```yaml\ntitle:\n  zh-CN: 范围选择\n  en-US: Range Slider\n```\n\n## zh-CN\n\n通过设置 `range` 可开启范围选择，此时 `modelValue` 为数组。\n\n---\n\n## en-US\n\nRange selection can be turned on by setting `range`, at this time `modelValue` is an array.\n\n---\n\n```vue\n<template>\n  <a-slider v-model=\"value\" :style=\"{ width: '300px' }\" range />\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n  setup() {\n    const value = ref([5, 10]);\n\n    return {\n      value\n    }\n\n  }\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/slider/__demo__/step.md",
    "content": "```yaml\ntitle:\n  zh-CN: 设置步长\n  en-US: Step\n```\n\n## zh-CN\n\n通过 `step` 设置步长，默认步长为 1。建议设置能够被 `max-min` 整除的值，否则会出现可选最大值小于 `max` 的情况。当设置 `show-ticks` 时，显示步长刻度线。\n\n---\n\n## en-US\n\nSet the step size by `step`, the default step size is 1. It is recommended to set a value that can be divisible by `max-min`, otherwise, the optional maximum value will be less than `max`. When `show-ticks` is set, the step ticks are displayed.\n\n---\n\n```vue\n\n<template>\n  <a-space direction=\"vertical\" size=\"large\">\n    <a-form :model=\"data\" layout=\"inline\">\n      <a-form-item label=\"Step\" field=\"step\">\n        <a-input-number :style=\"{ width: '100px' }\" v-model=\"data.step\" />\n      </a-form-item>\n      <a-form-item label=\"Show steps\" field=\"showTicks\">\n        <a-switch v-model=\"data.showTicks\" />\n      </a-form-item>\n    </a-form>\n    <a-slider :default-value=\"20\" :style=\"{ width: '300px' }\" :step=\"data.step\" :show-ticks=\"data.showTicks\" />\n  </a-space>\n</template>\n\n<script>\nimport { reactive } from 'vue';\n\nexport default {\n  setup() {\n    const data = reactive({\n      step: 5,\n      showTicks: true\n    });\n\n    return {\n      data\n    }\n  },\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/slider/__demo__/tooltip.md",
    "content": "```yaml\ntitle:\n  zh-CN: 自定义提示\n  en-US: Custom Tooltip\n```\n\n## zh-CN\n\n通过设置 `format-tooltip` 可以自定义提示文字。\n\n---\n\n## en-US\n\nYou can customize the prompt text by setting `format-tooltip`.\n\n---\n\n```vue\n<template>\n  <a-slider :min=\"0\" :max=\"50\" :style=\"{ width: '200px' }\" :format-tooltip=\"formatter\" />\n</template>\n\n<script>\nexport default {\n  setup() {\n    const formatter = (value) => {\n      return `${Math.round((value / 50) * 100)}%`\n    };\n\n    return {\n      formatter\n    }\n  },\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/slider/__demo__/vertical.md",
    "content": "```yaml\ntitle:\n  zh-CN: 竖直滑动条\n  en-US: Vertical Slider\n```\n\n## zh-CN\n\n设置 `direction=\"vertical\"` ，将会显示竖直的滑动条。\n\n---\n\n## en-US\n\nSet `direction=\"vertical\"` and a vertical slider will be displayed.\n\n---\n\n```vue\n<template>\n  <a-space align=\"start\">\n    <a-slider\n      :default-value=\"50\"\n      direction=\"vertical\"\n    />\n\n    <a-slider\n      direction=\"vertical\"\n      :default-value=\"5\"\n      :style=\"{ width: '300px' }\"\n      :max=\"15\"\n      :marks=\"{\n        5: '5km',\n        10: '10km',\n      }\"\n    />\n  </a-space>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/slider/__test__/__snapshots__/demo.test.ts.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`<slider> demo: render [basic] correctly 1`] = `\n\"<div class=\\\\\"arco-slider\\\\\" style=\\\\\"width: 200px;\\\\\">\n  <div class=\\\\\"arco-slider-track\\\\\">\n    <div class=\\\\\"arco-slider-bar\\\\\" style=\\\\\"left: 0%; right: 50%;\\\\\"></div>\n    <!--v-if-->\n    <!--v-if-->\n    <!--v-if-->\n    <!--v-if-->\n    <div style=\\\\\"left: 50%;\\\\\" tabindex=\\\\\"0\\\\\" role=\\\\\"slider\\\\\" aria-disabled=\\\\\"false\\\\\" aria-valuemax=\\\\\"100\\\\\" aria-valuemin=\\\\\"0\\\\\" aria-valuenow=\\\\\"50\\\\\" aria-valuetext=\\\\\"50\\\\\" class=\\\\\"arco-slider-btn\\\\\"></div>\n    <!---->\n  </div>\n  <!--v-if-->\n</div>\"\n`;\n\nexports[`<slider> demo: render [disabled] correctly 1`] = `\n\"<div class=\\\\\"arco-slider\\\\\" style=\\\\\"width: 200px;\\\\\">\n  <div class=\\\\\"arco-slider-track arco-slider-track-disabled\\\\\">\n    <div class=\\\\\"arco-slider-bar\\\\\" style=\\\\\"left: 0%; right: 50%;\\\\\"></div>\n    <!--v-if-->\n    <!--v-if-->\n    <!--v-if-->\n    <!--v-if-->\n    <div style=\\\\\"left: 50%;\\\\\" tabindex=\\\\\"0\\\\\" role=\\\\\"slider\\\\\" aria-disabled=\\\\\"true\\\\\" aria-valuemax=\\\\\"100\\\\\" aria-valuemin=\\\\\"0\\\\\" aria-valuenow=\\\\\"50\\\\\" aria-valuetext=\\\\\"50\\\\\" class=\\\\\"arco-slider-btn\\\\\"></div>\n    <!---->\n  </div>\n  <!--v-if-->\n</div>\"\n`;\n\nexports[`<slider> demo: render [input] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-vertical\\\\\" style=\\\\\"column-gap: 24px; row-gap: 24px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-slider\\\\\" style=\\\\\"width: 300px;\\\\\">\n      <div class=\\\\\"arco-slider-track\\\\\">\n        <div class=\\\\\"arco-slider-bar\\\\\" style=\\\\\"left: 0%; right: 90%;\\\\\"></div>\n        <!--v-if-->\n        <!--v-if-->\n        <!--v-if-->\n        <!--v-if-->\n        <div style=\\\\\"left: 10%;\\\\\" tabindex=\\\\\"0\\\\\" role=\\\\\"slider\\\\\" aria-disabled=\\\\\"false\\\\\" aria-valuemax=\\\\\"100\\\\\" aria-valuemin=\\\\\"0\\\\\" aria-valuenow=\\\\\"10\\\\\" aria-valuetext=\\\\\"10\\\\\" class=\\\\\"arco-slider-btn\\\\\"></div>\n        <!---->\n      </div>\n      <div class=\\\\\"arco-slider-input\\\\\">\n        <!--v-if--><span class=\\\\\"arco-input-wrapper arco-input-number arco-input-number-mode-embed arco-input-number-size-medium\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" role=\\\\\"spinbutton\\\\\" aria-valuemax=\\\\\"100\\\\\" aria-valuemin=\\\\\"0\\\\\" aria-valuenow=\\\\\"10\\\\\" value=\\\\\"10\\\\\"><!----><!----></span>\n      </div>\n    </div>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-slider\\\\\" style=\\\\\"width: 380px;\\\\\">\n      <div class=\\\\\"arco-slider-track\\\\\">\n        <div class=\\\\\"arco-slider-bar\\\\\" style=\\\\\"left: 10%; right: 80%;\\\\\"></div>\n        <!--v-if-->\n        <!--v-if-->\n        <!--v-if-->\n        <div style=\\\\\"left: 10%;\\\\\" tabindex=\\\\\"0\\\\\" role=\\\\\"slider\\\\\" aria-disabled=\\\\\"false\\\\\" aria-valuemax=\\\\\"100\\\\\" aria-valuemin=\\\\\"0\\\\\" aria-valuenow=\\\\\"10\\\\\" aria-valuetext=\\\\\"10\\\\\" class=\\\\\"arco-slider-btn\\\\\"></div>\n        <!---->\n        <div style=\\\\\"left: 20%;\\\\\" tabindex=\\\\\"0\\\\\" role=\\\\\"slider\\\\\" aria-disabled=\\\\\"false\\\\\" aria-valuemax=\\\\\"100\\\\\" aria-valuemin=\\\\\"0\\\\\" aria-valuenow=\\\\\"20\\\\\" aria-valuetext=\\\\\"20\\\\\" class=\\\\\"arco-slider-btn\\\\\"></div>\n        <!---->\n      </div>\n      <div class=\\\\\"arco-slider-input\\\\\"><span class=\\\\\"arco-input-wrapper arco-input-number arco-input-number-mode-embed arco-input-number-size-medium\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" role=\\\\\"spinbutton\\\\\" aria-valuemax=\\\\\"100\\\\\" aria-valuemin=\\\\\"0\\\\\" aria-valuenow=\\\\\"10\\\\\" value=\\\\\"10\\\\\"><!----><!----></span>\n        <div class=\\\\\"arco-slider-input-hyphens\\\\\"></div><span class=\\\\\"arco-input-wrapper arco-input-number arco-input-number-mode-embed arco-input-number-size-medium\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" role=\\\\\"spinbutton\\\\\" aria-valuemax=\\\\\"100\\\\\" aria-valuemin=\\\\\"0\\\\\" aria-valuenow=\\\\\"20\\\\\" value=\\\\\"20\\\\\"><!----><!----></span>\n      </div>\n    </div>\n  </div>\n</div>\"\n`;\n\nexports[`<slider> demo: render [marks] correctly 1`] = `\n\"<div class=\\\\\"arco-slider arco-slider-with-marks\\\\\" style=\\\\\"width: 300px;\\\\\">\n  <div class=\\\\\"arco-slider-track\\\\\">\n    <div class=\\\\\"arco-slider-bar\\\\\" style=\\\\\"left: 0%; right: 66.67%;\\\\\"></div>\n    <!--v-if-->\n    <div class=\\\\\"arco-slider-dots\\\\\">\n      <div class=\\\\\"arco-slider-dot-wrapper\\\\\" style=\\\\\"left: 0%;\\\\\">\n        <div class=\\\\\"arco-slider-dot arco-slider-dot-active\\\\\"></div>\n      </div>\n      <div class=\\\\\"arco-slider-dot-wrapper\\\\\" style=\\\\\"left: 33.33%;\\\\\">\n        <div class=\\\\\"arco-slider-dot arco-slider-dot-active\\\\\"></div>\n      </div>\n      <div class=\\\\\"arco-slider-dot-wrapper\\\\\" style=\\\\\"left: 66.67%;\\\\\">\n        <div class=\\\\\"arco-slider-dot\\\\\"></div>\n      </div>\n      <div class=\\\\\"arco-slider-dot-wrapper\\\\\" style=\\\\\"left: 100%;\\\\\">\n        <div class=\\\\\"arco-slider-dot\\\\\"></div>\n      </div>\n    </div>\n    <div class=\\\\\"arco-slider-marks\\\\\">\n      <div aria-hidden=\\\\\"true\\\\\" class=\\\\\"arco-slider-mark\\\\\" style=\\\\\"left: 0%;\\\\\">0km</div>\n      <div aria-hidden=\\\\\"true\\\\\" class=\\\\\"arco-slider-mark\\\\\" style=\\\\\"left: 33.33%;\\\\\">5km</div>\n      <div aria-hidden=\\\\\"true\\\\\" class=\\\\\"arco-slider-mark\\\\\" style=\\\\\"left: 66.67%;\\\\\">10km</div>\n      <div aria-hidden=\\\\\"true\\\\\" class=\\\\\"arco-slider-mark\\\\\" style=\\\\\"left: 100%;\\\\\">15km</div>\n    </div>\n    <!--v-if-->\n    <div style=\\\\\"left: 33.33%;\\\\\" tabindex=\\\\\"0\\\\\" role=\\\\\"slider\\\\\" aria-disabled=\\\\\"false\\\\\" aria-valuemax=\\\\\"15\\\\\" aria-valuemin=\\\\\"0\\\\\" aria-valuenow=\\\\\"5\\\\\" aria-valuetext=\\\\\"5\\\\\" class=\\\\\"arco-slider-btn\\\\\"></div>\n    <!---->\n  </div>\n  <!--v-if-->\n</div>\"\n`;\n\nexports[`<slider> demo: render [range] correctly 1`] = `\n\"<div class=\\\\\"arco-slider\\\\\" style=\\\\\"width: 300px;\\\\\">\n  <div class=\\\\\"arco-slider-track\\\\\">\n    <div class=\\\\\"arco-slider-bar\\\\\" style=\\\\\"left: 5%; right: 90%;\\\\\"></div>\n    <!--v-if-->\n    <!--v-if-->\n    <!--v-if-->\n    <div style=\\\\\"left: 5%;\\\\\" tabindex=\\\\\"0\\\\\" role=\\\\\"slider\\\\\" aria-disabled=\\\\\"false\\\\\" aria-valuemax=\\\\\"100\\\\\" aria-valuemin=\\\\\"0\\\\\" aria-valuenow=\\\\\"5\\\\\" aria-valuetext=\\\\\"5\\\\\" class=\\\\\"arco-slider-btn\\\\\"></div>\n    <!---->\n    <div style=\\\\\"left: 10%;\\\\\" tabindex=\\\\\"0\\\\\" role=\\\\\"slider\\\\\" aria-disabled=\\\\\"false\\\\\" aria-valuemax=\\\\\"100\\\\\" aria-valuemin=\\\\\"0\\\\\" aria-valuenow=\\\\\"10\\\\\" aria-valuetext=\\\\\"10\\\\\" class=\\\\\"arco-slider-btn\\\\\"></div>\n    <!---->\n  </div>\n  <!--v-if-->\n</div>\"\n`;\n\nexports[`<slider> demo: render [step] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-vertical\\\\\" style=\\\\\"column-gap: 24px; row-gap: 24px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <form class=\\\\\"arco-form arco-form-layout-inline arco-form-size-medium\\\\\">\n      <div class=\\\\\"arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-inline\\\\\">\n        <div class=\\\\\"arco-form-item-label-col\\\\\"><label class=\\\\\"arco-form-item-label\\\\\">\n            <!--v-if-->Step\n            <!--v-if-->\n            <!--v-if-->\n          </label></div>\n        <div class=\\\\\"arco-form-item-wrapper-col\\\\\" id=\\\\\"step\\\\\">\n          <div class=\\\\\"arco-form-item-content-wrapper\\\\\">\n            <div class=\\\\\"arco-form-item-content arco-form-item-content-flex\\\\\"><span class=\\\\\"arco-input-wrapper arco-input-number arco-input-number-mode-embed arco-input-number-size-medium\\\\\" style=\\\\\"width: 100px;\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" role=\\\\\"spinbutton\\\\\" aria-valuemax=\\\\\"Infinity\\\\\" aria-valuemin=\\\\\"-Infinity\\\\\" aria-valuenow=\\\\\"5\\\\\" value=\\\\\"5\\\\\"><!----><span class=\\\\\"arco-input-suffix\\\\\"><!----><!----><div class=\\\\\"arco-input-number-step\\\\\"><button class=\\\\\"arco-input-number-step-button\\\\\" type=\\\\\"button\\\\\" tabindex=\\\\\"-1\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-up\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 30.557 24.043 15 8.487 30.557\\\\\"></path></svg></button><button class=\\\\\"arco-input-number-step-button\\\\\" type=\\\\\"button\\\\\" tabindex=\\\\\"-1\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></button></div><!----></span></span></div>\n          </div>\n          <!--v-if-->\n          <!--v-if-->\n        </div>\n      </div>\n      <div class=\\\\\"arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-inline\\\\\">\n        <div class=\\\\\"arco-form-item-label-col\\\\\"><label class=\\\\\"arco-form-item-label\\\\\">\n            <!--v-if-->Show steps\n            <!--v-if-->\n            <!--v-if-->\n          </label></div>\n        <div class=\\\\\"arco-form-item-wrapper-col\\\\\" id=\\\\\"showTicks\\\\\">\n          <div class=\\\\\"arco-form-item-content-wrapper\\\\\">\n            <div class=\\\\\"arco-form-item-content arco-form-item-content-flex\\\\\"><button type=\\\\\"button\\\\\" role=\\\\\"switch\\\\\" aria-checked=\\\\\"true\\\\\" class=\\\\\"arco-switch arco-switch-type-circle arco-switch-checked\\\\\"><span class=\\\\\"arco-switch-handle\\\\\"><span class=\\\\\"arco-switch-handle-icon\\\\\"></span></span><!--  prettier-ignore  -->\n                <!--v-if-->\n              </button></div>\n          </div>\n          <!--v-if-->\n          <!--v-if-->\n        </div>\n      </div>\n    </form>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-slider\\\\\" style=\\\\\"width: 300px;\\\\\">\n      <div class=\\\\\"arco-slider-track\\\\\">\n        <div class=\\\\\"arco-slider-bar\\\\\" style=\\\\\"left: 0%; right: 80%;\\\\\"></div>\n        <div class=\\\\\"arco-slider-ticks\\\\\">\n          <div class=\\\\\"arco-slider-tick arco-slider-tick-active\\\\\" style=\\\\\"left: 5%;\\\\\"></div>\n          <div class=\\\\\"arco-slider-tick arco-slider-tick-active\\\\\" style=\\\\\"left: 10%;\\\\\"></div>\n          <div class=\\\\\"arco-slider-tick arco-slider-tick-active\\\\\" style=\\\\\"left: 15%;\\\\\"></div>\n          <div class=\\\\\"arco-slider-tick arco-slider-tick-active\\\\\" style=\\\\\"left: 20%;\\\\\"></div>\n          <div class=\\\\\"arco-slider-tick\\\\\" style=\\\\\"left: 25%;\\\\\"></div>\n          <div class=\\\\\"arco-slider-tick\\\\\" style=\\\\\"left: 30%;\\\\\"></div>\n          <div class=\\\\\"arco-slider-tick\\\\\" style=\\\\\"left: 35%;\\\\\"></div>\n          <div class=\\\\\"arco-slider-tick\\\\\" style=\\\\\"left: 40%;\\\\\"></div>\n          <div class=\\\\\"arco-slider-tick\\\\\" style=\\\\\"left: 45%;\\\\\"></div>\n          <div class=\\\\\"arco-slider-tick\\\\\" style=\\\\\"left: 50%;\\\\\"></div>\n          <div class=\\\\\"arco-slider-tick\\\\\" style=\\\\\"left: 55%;\\\\\"></div>\n          <div class=\\\\\"arco-slider-tick\\\\\" style=\\\\\"left: 60%;\\\\\"></div>\n          <div class=\\\\\"arco-slider-tick\\\\\" style=\\\\\"left: 65%;\\\\\"></div>\n          <div class=\\\\\"arco-slider-tick\\\\\" style=\\\\\"left: 70%;\\\\\"></div>\n          <div class=\\\\\"arco-slider-tick\\\\\" style=\\\\\"left: 75%;\\\\\"></div>\n          <div class=\\\\\"arco-slider-tick\\\\\" style=\\\\\"left: 80%;\\\\\"></div>\n          <div class=\\\\\"arco-slider-tick\\\\\" style=\\\\\"left: 85%;\\\\\"></div>\n          <div class=\\\\\"arco-slider-tick\\\\\" style=\\\\\"left: 90%;\\\\\"></div>\n          <div class=\\\\\"arco-slider-tick\\\\\" style=\\\\\"left: 95%;\\\\\"></div>\n        </div>\n        <!--v-if-->\n        <!--v-if-->\n        <!--v-if-->\n        <div style=\\\\\"left: 20%;\\\\\" tabindex=\\\\\"0\\\\\" role=\\\\\"slider\\\\\" aria-disabled=\\\\\"false\\\\\" aria-valuemax=\\\\\"100\\\\\" aria-valuemin=\\\\\"0\\\\\" aria-valuenow=\\\\\"20\\\\\" aria-valuetext=\\\\\"20\\\\\" class=\\\\\"arco-slider-btn\\\\\"></div>\n        <!---->\n      </div>\n      <!--v-if-->\n    </div>\n  </div>\n</div>\"\n`;\n\nexports[`<slider> demo: render [tooltip] correctly 1`] = `\n\"<div class=\\\\\"arco-slider\\\\\" style=\\\\\"width: 200px;\\\\\">\n  <div class=\\\\\"arco-slider-track\\\\\">\n    <div class=\\\\\"arco-slider-bar\\\\\" style=\\\\\"left: 0%; right: 100%;\\\\\"></div>\n    <!--v-if-->\n    <!--v-if-->\n    <!--v-if-->\n    <!--v-if-->\n    <div style=\\\\\"left: 0%;\\\\\" tabindex=\\\\\"0\\\\\" role=\\\\\"slider\\\\\" aria-disabled=\\\\\"false\\\\\" aria-valuemax=\\\\\"50\\\\\" aria-valuemin=\\\\\"0\\\\\" aria-valuenow=\\\\\"0\\\\\" aria-valuetext=\\\\\"0%\\\\\" class=\\\\\"arco-slider-btn\\\\\"></div>\n    <!---->\n  </div>\n  <!--v-if-->\n</div>\"\n`;\n\nexports[`<slider> demo: render [vertical] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-horizontal arco-space-align-start\\\\\" style=\\\\\"column-gap: 8px; row-gap: 8px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-slider arco-slider-vertical\\\\\">\n      <div class=\\\\\"arco-slider-track arco-slider-track-vertical\\\\\">\n        <div class=\\\\\"arco-slider-bar\\\\\" style=\\\\\"bottom: 0%; top: 50%;\\\\\"></div>\n        <!--v-if-->\n        <!--v-if-->\n        <!--v-if-->\n        <!--v-if-->\n        <div style=\\\\\"bottom: 50%;\\\\\" tabindex=\\\\\"0\\\\\" role=\\\\\"slider\\\\\" aria-disabled=\\\\\"false\\\\\" aria-valuemax=\\\\\"100\\\\\" aria-valuemin=\\\\\"0\\\\\" aria-valuenow=\\\\\"50\\\\\" aria-valuetext=\\\\\"50\\\\\" class=\\\\\"arco-slider-btn\\\\\"></div>\n        <!---->\n      </div>\n      <!--v-if-->\n    </div>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-slider arco-slider-vertical arco-slider-with-marks\\\\\" style=\\\\\"width: 300px;\\\\\">\n      <div class=\\\\\"arco-slider-track arco-slider-track-vertical\\\\\">\n        <div class=\\\\\"arco-slider-bar\\\\\" style=\\\\\"bottom: 0%; top: 66.67%;\\\\\"></div>\n        <!--v-if-->\n        <div class=\\\\\"arco-slider-dots\\\\\">\n          <div class=\\\\\"arco-slider-dot-wrapper\\\\\" style=\\\\\"bottom: 33.33%;\\\\\">\n            <div class=\\\\\"arco-slider-dot arco-slider-dot-active\\\\\"></div>\n          </div>\n          <div class=\\\\\"arco-slider-dot-wrapper\\\\\" style=\\\\\"bottom: 66.67%;\\\\\">\n            <div class=\\\\\"arco-slider-dot\\\\\"></div>\n          </div>\n        </div>\n        <div class=\\\\\"arco-slider-marks\\\\\">\n          <div aria-hidden=\\\\\"true\\\\\" class=\\\\\"arco-slider-mark\\\\\" style=\\\\\"bottom: 33.33%;\\\\\">5km</div>\n          <div aria-hidden=\\\\\"true\\\\\" class=\\\\\"arco-slider-mark\\\\\" style=\\\\\"bottom: 66.67%;\\\\\">10km</div>\n        </div>\n        <!--v-if-->\n        <div style=\\\\\"bottom: 33.33%;\\\\\" tabindex=\\\\\"0\\\\\" role=\\\\\"slider\\\\\" aria-disabled=\\\\\"false\\\\\" aria-valuemax=\\\\\"15\\\\\" aria-valuemin=\\\\\"0\\\\\" aria-valuenow=\\\\\"5\\\\\" aria-valuetext=\\\\\"5\\\\\" class=\\\\\"arco-slider-btn\\\\\"></div>\n        <!---->\n      </div>\n      <!--v-if-->\n    </div>\n  </div>\n</div>\"\n`;\n"
  },
  {
    "path": "packages/web-vue/components/slider/__test__/demo.test.ts",
    "content": "import demoTest from '../../../scripts/demo-test';\n\ndemoTest('slider');\n"
  },
  {
    "path": "packages/web-vue/components/slider/__test__/index.test.ts",
    "content": "import { mount } from '@vue/test-utils';\nimport Slider from '../index';\n\ndescribe('Slider', () => {\n  test('should emit change', async () => {\n    const wrapper = mount(Slider);\n\n    const btn = wrapper.find('.arco-slider-btn');\n    await btn.trigger('mousedown');\n    await btn.trigger('mousemove');\n    await btn.trigger('mouseup');\n\n    // expect(wrapper.emitted('change')).toHaveLength(1);\n  });\n});\n"
  },
  {
    "path": "packages/web-vue/components/slider/index.ts",
    "content": "import type { App } from 'vue';\nimport type { ArcoOptions } from '../_utils/types';\nimport { setGlobalConfig, getComponentPrefix } from '../_utils/global-config';\nimport _Slider from './slider.vue';\n\nconst Slider = Object.assign(_Slider, {\n  install: (app: App, options?: ArcoOptions) => {\n    setGlobalConfig(app, options);\n    const componentPrefix = getComponentPrefix(options);\n\n    app.component(componentPrefix + _Slider.name, _Slider);\n  },\n});\n\nexport type SliderInstance = InstanceType<typeof _Slider>;\n\nexport default Slider;\n"
  },
  {
    "path": "packages/web-vue/components/slider/slider-button.vue",
    "content": "<template>\n  <tooltip\n    :popup-visible=\"popupVisible\"\n    :position=\"mergedTooltipPosition\"\n    :content=\"tooltipContent\"\n  >\n    <div\n      v-bind=\"$attrs\"\n      tabindex=\"0\"\n      role=\"slider\"\n      :aria-disabled=\"disabled\"\n      :aria-valuemax=\"max\"\n      :aria-valuemin=\"min\"\n      :aria-valuenow=\"value\"\n      :aria-valuetext=\"tooltipContent\"\n      :class=\"cls\"\n      @mousedown=\"handleMouseDown\"\n      @touchstart=\"handleMouseDown\"\n      @contextmenu.prevent\n      @click.stop\n    />\n  </tooltip>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, PropType, ref } from 'vue';\nimport { getPrefixCls } from '../_utils/global-config';\nimport Tooltip from '../tooltip';\nimport { off, on } from '../_utils/dom';\nimport { DIRECTIONS } from '../_utils/constant';\n\nexport default defineComponent({\n  name: 'SliderButton',\n  components: {\n    Tooltip,\n  },\n  inheritAttrs: false,\n  props: {\n    direction: {\n      type: String as PropType<typeof DIRECTIONS[number]>,\n      default: 'horizontal',\n    },\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n    min: {\n      type: Number,\n      required: true,\n    },\n    max: {\n      type: Number,\n      required: true,\n    },\n    formatTooltip: {\n      type: Function,\n    },\n    value: [String, Number],\n    tooltipPosition: {\n      type: String,\n    },\n    showTooltip: {\n      type: Boolean,\n      default: true,\n    },\n  },\n  emits: ['movestart', 'moving', 'moveend'],\n  setup(props, { emit }) {\n    const prefixCls = getPrefixCls('slider-btn');\n    const isDragging = ref(false);\n\n    const handleMouseDown = (e: MouseEvent | TouchEvent) => {\n      if (props.disabled) {\n        return;\n      }\n      e.preventDefault();\n\n      isDragging.value = true;\n      on(window, 'mousemove', handleMouseMove);\n      on(window, 'touchmove', handleMouseMove);\n      on(window, 'mouseup', handleMouseUp);\n      on(window, 'contextmenu', handleMouseUp);\n      on(window, 'touchend', handleMouseUp);\n      emit('movestart');\n    };\n\n    const handleMouseMove = (e: MouseEvent | TouchEvent) => {\n      let clientX: number;\n      let clientY: number;\n      if (e.type.startsWith('touch')) {\n        clientY = (e as TouchEvent).touches[0].clientY;\n        clientX = (e as TouchEvent).touches[0].clientX;\n      } else {\n        clientY = (e as MouseEvent).clientY;\n        clientX = (e as MouseEvent).clientX;\n      }\n      emit('moving', clientX, clientY);\n    };\n\n    const handleMouseUp = () => {\n      isDragging.value = false;\n      off(window, 'mousemove', handleMouseMove);\n      off(window, 'mouseup', handleMouseUp);\n      off(window, 'touchend', handleMouseUp);\n      emit('moveend');\n    };\n\n    const cls = computed(() => [prefixCls]);\n\n    const mergedTooltipPosition = computed(() =>\n      props.tooltipPosition ?? props.direction === 'vertical' ? 'right' : 'top'\n    );\n\n    const tooltipContent = computed(\n      () => props.formatTooltip?.(props.value) ?? `${props.value}`\n    );\n\n    const popupVisible = computed(() =>\n      props.showTooltip ? (isDragging.value ? true : undefined) : false\n    );\n\n    return {\n      prefixCls,\n      cls,\n      tooltipContent,\n      mergedTooltipPosition,\n      popupVisible,\n      handleMouseDown,\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/slider/slider-dots.vue",
    "content": "<template>\n  <div :class=\"`${prefixCls}-dots`\">\n    <div\n      v-for=\"(item, index) of data\"\n      :key=\"index\"\n      :class=\"`${prefixCls}-dot-wrapper`\"\n      :style=\"getStyle(item.key)\"\n    >\n      <div\n        :class=\"[\n          `${prefixCls}-dot`,\n          { [`${prefixCls}-dot-active`]: item.isActive },\n        ]\"\n      ></div>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, PropType } from 'vue';\nimport { getPrefixCls } from '../_utils/global-config';\nimport { getOffsetPercent, getPositionStyle } from './utils';\nimport { DIRECTIONS } from '../_utils/constant';\n\nexport default defineComponent({\n  name: 'SliderDots',\n  props: {\n    data: {\n      type: Array as PropType<\n        Array<{ key: number; content: string; isActive: boolean }>\n      >,\n      required: true,\n    },\n    min: {\n      type: Number,\n      required: true,\n    },\n    max: {\n      type: Number,\n      required: true,\n    },\n    direction: {\n      type: String as PropType<typeof DIRECTIONS[number]>,\n      default: 'horizontal',\n    },\n  },\n  setup(props) {\n    const prefixCls = getPrefixCls('slider');\n\n    const getStyle = (value: number) =>\n      getPositionStyle(\n        getOffsetPercent(value, [props.min, props.max]),\n        props.direction\n      );\n\n    return {\n      prefixCls,\n      getStyle,\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/slider/slider-input.vue",
    "content": "<template>\n  <div :class=\"`${prefixCls}-input`\">\n    <template v-if=\"range\">\n      <input-number\n        :min=\"min\"\n        :max=\"max\"\n        :step=\"step\"\n        :disabled=\"disabled\"\n        :model-value=\"modelValue[0]\"\n        hide-button\n        @change=\"(value) => $emit('startChange', value)\"\n      />\n      <div :class=\"`${prefixCls}-input-hyphens`\" />\n    </template>\n    <input-number\n      :min=\"min\"\n      :max=\"max\"\n      :step=\"step\"\n      :disabled=\"disabled\"\n      :model-value=\"modelValue[1]\"\n      hide-button\n      @change=\"(value) => $emit('endChange', value)\"\n    />\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, PropType } from 'vue';\nimport InputNumber from '../input-number';\nimport { getPrefixCls } from '../_utils/global-config';\n\nexport default defineComponent({\n  name: 'SliderInput',\n  components: {\n    InputNumber,\n  },\n  props: {\n    modelValue: {\n      type: Array,\n      required: true,\n    },\n    min: {\n      type: Number,\n    },\n    max: {\n      type: Number,\n    },\n    step: {\n      type: Number,\n    },\n    disabled: {\n      type: Boolean,\n    },\n    range: {\n      type: Boolean,\n    },\n  },\n  emits: ['startChange', 'endChange'],\n  setup(props, { emit }) {\n    const prefixCls = getPrefixCls('slider');\n\n    return {\n      prefixCls,\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/slider/slider-marks.vue",
    "content": "<template>\n  <div :class=\"`${prefixCls}-marks`\">\n    <div\n      v-for=\"(item, index) of data\"\n      :key=\"index\"\n      aria-hidden=\"true\"\n      :class=\"`${prefixCls}-mark`\"\n      :style=\"getStyle(item.key)\"\n    >\n      {{ item.content }}\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, PropType } from 'vue';\nimport { getPrefixCls } from '../_utils/global-config';\nimport { getOffsetPercent, getPositionStyle } from './utils';\nimport { DIRECTIONS } from '../_utils/constant';\n\nexport default defineComponent({\n  name: 'SliderMarks',\n  props: {\n    data: {\n      type: Array as PropType<Array<{ key: number; content: string }>>,\n      required: true,\n    },\n    min: {\n      type: Number,\n      required: true,\n    },\n    max: {\n      type: Number,\n      required: true,\n    },\n    direction: {\n      type: String as PropType<typeof DIRECTIONS[number]>,\n      default: 'horizontal',\n    },\n  },\n  setup(props) {\n    const prefixCls = getPrefixCls('slider');\n\n    const getStyle = (value: number) =>\n      getPositionStyle(\n        getOffsetPercent(value, [props.min, props.max]),\n        props.direction\n      );\n\n    return {\n      prefixCls,\n      getStyle,\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/slider/slider-ticks.vue",
    "content": "<template>\n  <div :class=\"`${prefixCls}-ticks`\">\n    <div\n      v-for=\"(item, index) of steps\"\n      :key=\"index\"\n      :class=\"[\n        `${prefixCls}-tick`,\n        { [`${prefixCls}-tick-active`]: item.isActive },\n      ]\"\n      :style=\"getStyle(item.key)\"\n    />\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, PropType } from 'vue';\nimport NP from 'number-precision';\nimport { getPrefixCls } from '../_utils/global-config';\nimport { getOffsetPercent, getPositionStyle } from './utils';\nimport { Direction } from '../_utils/constant';\n\nexport default defineComponent({\n  name: 'SliderTicks',\n  props: {\n    value: {\n      type: Array as PropType<[number, number]>,\n      required: true,\n    },\n    step: {\n      type: Number,\n      required: true,\n    },\n    min: {\n      type: Number,\n      required: true,\n    },\n    max: {\n      type: Number,\n      required: true,\n    },\n    direction: {\n      type: String as PropType<Direction>,\n      default: 'horizontal',\n    },\n  },\n  setup(props) {\n    const prefixCls = getPrefixCls('slider');\n\n    const steps = computed(() => {\n      const steps: Array<{ key: number; isActive: boolean }> = [];\n      const stepsLength = Math.floor((props.max - props.min) / props.step);\n      for (let i = 0; i <= stepsLength; i++) {\n        const stepVal = NP.plus(i * props.step, props.min);\n        // eslint-disable-next-line no-continue\n        if (stepVal <= props.min || stepVal >= props.max) continue;\n        steps.push({\n          key: stepVal,\n          isActive: stepVal >= props.value[0] && stepVal <= props.value[1],\n        });\n      }\n      return steps;\n    });\n\n    const getStyle = (value: number) =>\n      getPositionStyle(\n        getOffsetPercent(value, [props.min, props.max]),\n        props.direction\n      );\n\n    return {\n      prefixCls,\n      steps,\n      getStyle,\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/slider/slider.vue",
    "content": "<template>\n  <div :class=\"cls\">\n    <div ref=\"trackRef\" :class=\"trackCls\" @click=\"handleClick\">\n      <div :class=\"`${prefixCls}-bar`\" :style=\"getBarStyle(computedValue)\" />\n      <slider-ticks\n        v-if=\"showTicks\"\n        :value=\"computedValue\"\n        :step=\"step\"\n        :min=\"min\"\n        :max=\"max\"\n        :direction=\"direction\"\n      />\n      <slider-dots\n        v-if=\"marks\"\n        :data=\"markList\"\n        :min=\"min\"\n        :max=\"max\"\n        :direction=\"direction\"\n      />\n      <slider-marks\n        v-if=\"marks\"\n        :data=\"markList\"\n        :min=\"min\"\n        :max=\"max\"\n        :direction=\"direction\"\n      />\n      <slider-button\n        v-if=\"range\"\n        :style=\"getBtnStyle(computedValue[0])\"\n        :value=\"computedValue[0]\"\n        :direction=\"direction\"\n        :disabled=\"mergedDisabled\"\n        :min=\"min\"\n        :max=\"max\"\n        :format-tooltip=\"formatTooltip\"\n        :show-tooltip=\"showTooltip\"\n        @movestart=\"handleMoveStart\"\n        @moving=\"handleStartMoving\"\n        @moveend=\"handleMoveEnd\"\n      />\n      <slider-button\n        :style=\"getBtnStyle(computedValue[1])\"\n        :value=\"computedValue[1]\"\n        :direction=\"direction\"\n        :disabled=\"mergedDisabled\"\n        :min=\"min\"\n        :max=\"max\"\n        :format-tooltip=\"formatTooltip\"\n        :show-tooltip=\"showTooltip\"\n        @movestart=\"handleMoveStart\"\n        @moving=\"handleEndMoving\"\n        @moveend=\"handleMoveEnd\"\n      />\n    </div>\n    <slider-input\n      v-if=\"showInput\"\n      :model-value=\"computedValue\"\n      :min=\"min\"\n      :max=\"max\"\n      :step=\"step\"\n      :range=\"range\"\n      :disabled=\"disabled\"\n      @start-change=\"handleStartChange\"\n      @end-change=\"handleEndChange\"\n    />\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport type { PropType, CSSProperties } from 'vue';\nimport { computed, defineComponent, ref, toRef, toRefs, watch } from 'vue';\nimport NP from 'number-precision';\nimport { getPrefixCls } from '../_utils/global-config';\nimport SliderButton from './slider-button.vue';\nimport SliderDots from './slider-dots.vue';\nimport SliderMarks from './slider-marks.vue';\nimport SliderTicks from './slider-ticks.vue';\nimport SliderInput from './slider-input.vue';\nimport { isArray, isUndefined } from '../_utils/is';\nimport { Direction, DIRECTIONS } from '../_utils/constant';\nimport { getOffsetPercent, getPositionStyle } from './utils';\nimport { useFormItem } from '../_hooks/use-form-item';\n\nexport default defineComponent({\n  name: 'Slider',\n  components: {\n    SliderButton,\n    SliderDots,\n    SliderMarks,\n    SliderTicks,\n    SliderInput,\n  },\n  props: {\n    /**\n     * @zh 绑定值\n     * @en Value\n     * @vModel\n     */\n    modelValue: {\n      type: [Number, Array] as PropType<number | [number, number]>,\n      default: undefined,\n    },\n    /**\n     * @zh 默认值（非受控状态）\n     * @en Default value (uncontrolled state)\n     */\n    defaultValue: {\n      type: [Number, Array] as PropType<number | [number, number]>,\n      default: 0,\n    },\n    /**\n     * @zh 滑动的步长\n     * @en Sliding step\n     */\n    step: {\n      type: Number,\n      default: 1,\n    },\n    /**\n     * @zh 滑动范围的最小值\n     * @en Minimum sliding range\n     */\n    min: {\n      type: Number,\n      default: 0,\n    },\n    /**\n     * @zh 设置显示的标签\n     * @en Set the displayed label\n     */\n    marks: {\n      type: Object as PropType<Record<number, string>>,\n    },\n    /**\n     * @zh 滑动范围的最大值\n     * @en Maximum sliding range\n     */\n    max: {\n      type: Number,\n      default: 100,\n    },\n    /**\n     * @zh 滑动输入条的方向\n     * @en The direction of the slider\n     */\n    direction: {\n      type: String as PropType<Direction>,\n      default: 'horizontal',\n    },\n    /**\n     * @zh 是否禁用\n     * @en Whether to disable\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 是否显示刻度线\n     * @en Whether to show ticks\n     */\n    showTicks: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 是否显示输入框\n     * @en Whether to show the input\n     */\n    showInput: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 是否开启范围选择\n     * @en Whether to use range selection\n     */\n    range: {\n      type: Boolean,\n      default: false,\n    },\n    formatTooltip: {\n      type: Function,\n    },\n    /**\n     * @zh 是否显示tooltip\n     * @en Whether to show tooltip\n     * @version 2.42.0\n     */\n    showTooltip: {\n      type: Boolean,\n      default: true,\n    },\n  },\n  emits: {\n    'update:modelValue': (value: number | [number, number]) => true,\n    /**\n     * @zh 值改变时触发\n     * @en Trigger when the value changes\n     * @param {number | [number, number]} value\n     */\n    'change': (value: number | [number, number]) => true,\n  },\n  setup(props, { emit }) {\n    const { modelValue } = toRefs(props);\n    const prefixCls = getPrefixCls('slider');\n    const { mergedDisabled, eventHandlers } = useFormItem({\n      disabled: toRef(props, 'disabled'),\n    });\n\n    const trackRef = ref<HTMLElement | null>(null);\n    const trackRect = ref<DOMRect>();\n    const defaultValue = props.modelValue\n      ? props.modelValue\n      : props.defaultValue;\n\n    const startValue = ref(isArray(defaultValue) ? defaultValue[0] : 0);\n\n    const endValue = ref(\n      isArray(defaultValue) ? defaultValue[1] : defaultValue\n    );\n\n    watch(modelValue, (value) => {\n      if (isArray(value)) {\n        startValue.value = value[0] ?? props.min ?? 0;\n        endValue.value = value[1] ?? props.min ?? 0;\n      } else {\n        endValue.value = value ?? props.min ?? 0;\n      }\n    });\n\n    const handleChange = () => {\n      if (props.range) {\n        emit('update:modelValue', [startValue.value, endValue.value]);\n        emit('change', [startValue.value, endValue.value]);\n      } else {\n        emit('update:modelValue', endValue.value);\n        emit('change', endValue.value);\n      }\n      eventHandlers.value?.onChange?.();\n    };\n\n    const handleStartChange = (value?: number) => {\n      value = value ?? props.min;\n      startValue.value = value;\n      handleChange();\n    };\n\n    const handleEndChange = (value?: number) => {\n      value = value ?? props.min;\n      endValue.value = value;\n      handleChange();\n    };\n\n    const computedValue = computed<[number, number]>(() => {\n      if (props.range) {\n        if (isArray(props.modelValue)) {\n          return props.modelValue;\n        }\n        return [startValue.value, props.modelValue ?? endValue.value];\n      }\n      if (isUndefined(props.modelValue)) {\n        return [startValue.value, endValue.value];\n      }\n      if (isArray(props.modelValue)) {\n        return [props.min ?? 0, props.modelValue[1]];\n      }\n      return [props.min ?? 0, props.modelValue];\n    });\n\n    // 标签数组\n    const markList = computed(() =>\n      Object.keys(props.marks || {}).map((index) => {\n        const key = Number(index);\n        return {\n          key,\n          content: props.marks?.[key],\n          isActive:\n            key >= computedValue.value[0] && key <= computedValue.value[1],\n        };\n      })\n    );\n\n    const getBtnStyle = (value: number) =>\n      getPositionStyle(\n        getOffsetPercent(value, [props.min, props.max]),\n        props.direction\n      );\n\n    const isDragging = ref(false);\n\n    const handleMoveStart = () => {\n      isDragging.value = true;\n      if (trackRef.value) {\n        trackRect.value = trackRef.value.getBoundingClientRect();\n      }\n    };\n\n    // 通过坐标获取value值\n    function getValueByCoords(x: number, y: number): number {\n      if (!trackRect.value) {\n        return 0;\n      }\n      const { left, top, width, height } = trackRect.value;\n      const trackLength = props.direction === 'horizontal' ? width : height;\n      const stepLength = (trackLength * props.step) / (props.max - props.min);\n      let diff = props.direction === 'horizontal' ? x - left : top + height - y;\n      if (diff < 0) diff = 0;\n      if (diff > trackLength) diff = trackLength;\n\n      // 根据diff计算步数\n      const steps = Math.round(diff / stepLength);\n\n      return NP.plus(props.min, NP.times(steps, props.step));\n    }\n\n    const handleEndMoving = (x: number, y: number) => {\n      endValue.value = getValueByCoords(x, y);\n      handleChange();\n    };\n\n    const handleClick = (e: MouseEvent) => {\n      if (mergedDisabled.value) {\n        return;\n      }\n\n      const { clientX, clientY } = e;\n\n      if (trackRef.value) {\n        trackRect.value = trackRef.value.getBoundingClientRect();\n      }\n\n      endValue.value = getValueByCoords(clientX, clientY);\n      handleChange();\n    };\n\n    function getBarStyle([start, end]: [number, number]): CSSProperties {\n      if (start > end) {\n        [start, end] = [end, start];\n      }\n      return props.direction === 'vertical'\n        ? {\n            bottom: getOffsetPercent(start, [props.min, props.max]),\n            top: getOffsetPercent(props.max + props.min - end, [\n              props.min,\n              props.max,\n            ]),\n          }\n        : {\n            left: getOffsetPercent(start, [props.min, props.max]),\n            right: getOffsetPercent(props.max + props.min - end, [\n              props.min,\n              props.max,\n            ]),\n          };\n    }\n\n    const handleStartMoving = (x: number, y: number) => {\n      startValue.value = getValueByCoords(x, y);\n      handleChange();\n    };\n\n    const handleMoveEnd = () => {\n      isDragging.value = false;\n    };\n\n    const cls = computed(() => [\n      prefixCls,\n      {\n        [`${prefixCls}-vertical`]: props.direction === 'vertical',\n        [`${prefixCls}-with-marks`]: Boolean(props.marks),\n      },\n    ]);\n\n    const trackCls = computed(() => [\n      `${prefixCls}-track`,\n      {\n        [`${prefixCls}-track-disabled`]: mergedDisabled.value,\n        [`${prefixCls}-track-vertical`]: props.direction === 'vertical',\n      },\n    ]);\n\n    return {\n      prefixCls,\n      cls,\n      trackCls,\n      trackRef,\n      computedValue,\n      mergedDisabled,\n      markList,\n      getBtnStyle,\n      getBarStyle,\n      handleClick,\n      handleMoveStart,\n      handleEndMoving,\n      handleMoveEnd,\n      handleStartMoving,\n      handleStartChange,\n      handleEndChange,\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/slider/style/index.less",
    "content": "@import './token.less';\n\n@slider-prefix: ~'@{prefix}-slider';\n\n.@{slider-prefix} {\n  display: inline-flex;\n  align-items: center;\n  width: 100%;\n\n  &-vertical {\n    display: inline-block;\n    width: auto;\n    min-width: @slider-size-button-width + 10;\n    height: auto;\n\n    .@{slider-prefix}-wrapper {\n      flex-direction: column;\n    }\n  }\n\n  &-with-marks {\n    margin-bottom: @slider-spacing-margin-bottom_with-mark;\n    padding: @slider-spacing-padding_width-mark_vertical\n      @slider-spacing-padding_width-mark;\n  }\n\n  &-vertical&-with-marks {\n    margin-bottom: 0;\n    padding: 0;\n  }\n\n  &-track {\n    position: relative;\n    flex: 1;\n    width: 100%;\n    height: @slider-size-button-width;\n    cursor: pointer;\n\n    &::before {\n      // 局中\n      position: absolute;\n      top: 50%;\n      display: block;\n      width: 100%;\n      height: @slider-size-road-width;\n      background-color: @slider-color-road-bg;\n      border-radius: @slider-size-road-width;\n      transform: translateY(-50%);\n      content: '';\n    }\n\n    &&-vertical {\n      width: @slider-size-button-width;\n      max-width: @slider-size-button-width;\n      height: 100%;\n      min-height: @slider-size-height_vertical;\n      margin-right: 0;\n      margin-bottom: (@slider-size-button-width / 2);\n      margin-top: (@slider-size-button-width / 2);\n      transform: translateY(0);\n\n      &::before {\n        // 局中\n        top: unset;\n        left: 50%;\n        width: @slider-size-road-width;\n        height: 100%;\n        transform: translateX(-50%);\n      }\n    }\n\n    &&-disabled {\n      &::before {\n        background-color: @slider-color-road-bg_disabled;\n      }\n\n      .@{slider-prefix}-bar {\n        background-color: @slider-color-bar-bg_disabled;\n      }\n\n      .@{slider-prefix}-btn {\n        cursor: not-allowed;\n\n        &::after {\n          border-color: @slider-color-button-border_disabled;\n        }\n      }\n\n      .@{slider-prefix}-dots {\n        .@{slider-prefix}-dot {\n          border-color: @slider-color-road-bg_disabled;\n\n          &-active {\n            border-color: @slider-color-bar-bg_disabled;\n          }\n        }\n      }\n\n      .@{slider-prefix}-ticks {\n        .@{slider-prefix}-tick {\n          background: @slider-color-road-bg_disabled;\n\n          &-active {\n            background: @slider-color-bar-bg_disabled;\n          }\n        }\n      }\n    }\n  }\n\n  &-bar {\n    position: absolute;\n    // 局中\n    position: absolute;\n    top: 50%;\n    height: @slider-size-road-width;\n    background-color: @slider-color-bar-bg;\n    border-radius: @slider-size-road-width;\n    transform: translateY(-50%);\n\n    .@{slider-prefix}-track-vertical & {\n      // 局中\n      top: unset;\n      left: 50%;\n      width: @slider-size-road-width;\n      height: unset;\n      transform: translateX(-50%);\n    }\n  }\n\n  &-btn {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: @slider-size-button-width;\n    height: @slider-size-button-width;\n    transform: translateX(-50%);\n\n    &::after {\n      position: absolute;\n      top: 0;\n      left: 0;\n      display: inline-block;\n      box-sizing: border-box;\n      width: @slider-size-button-width;\n      height: @slider-size-button-width;\n      background: @slider-color-button-bg;\n      border: @slider-border-size-button solid @slider-color-button-border;\n      border-radius: 50%;\n      transition: all @transition-duration-3\n        @transition-timing-function-overshoot;\n      content: '';\n    }\n\n    &&-active,\n    &:hover {\n      &::after {\n        box-shadow: @slider-shadow-button_active;\n        transform: scale(\n          (unit(@slider-size-button-width_active / @slider-size-button-width))\n        );\n      }\n    }\n\n    .@{slider-prefix}-track-vertical & {\n      top: unset;\n      bottom: 0;\n      left: 0;\n      transform: translateY(50%);\n    }\n  }\n\n  &-marks {\n    position: absolute;\n    top: @slider-size-button-width;\n    width: 100%;\n\n    .@{slider-prefix}-mark {\n      position: absolute;\n      color: @slider-color-mark-font;\n      font-size: @slider-font-size-mark;\n      line-height: 1;\n      transform: translateX(-50%);\n      cursor: pointer;\n    }\n\n    .@{slider-prefix}-track-vertical & {\n      top: 0;\n      left: @slider-size-button-width + @slider-spacing-mark-left;\n      height: 100%;\n\n      .@{slider-prefix}-mark {\n        transform: translateY(50%);\n      }\n    }\n  }\n\n  &-dots {\n    height: 100%;\n\n    .@{slider-prefix}-dot-wrapper {\n      position: absolute;\n      top: 50%;\n      font-size: @slider-font-size-dot;\n      transform: translate(-50%, -50%);\n\n      .@{slider-prefix}-track-vertical & {\n        top: unset;\n        left: 50%;\n        transform: translate(-50%, 50%);\n      }\n\n      .@{slider-prefix}-dot {\n        box-sizing: border-box;\n        width: @slider-size-dot-width;\n        height: @slider-size-dot-width;\n        background-color: @slider-color-dot-bg;\n        border: @slider-border-size-dot solid @slider-color-road-bg;\n        border-radius: 50%;\n        border-radius: 50%;\n\n        &-active {\n          border-color: @slider-color-bar-bg;\n        }\n      }\n    }\n  }\n\n  &-ticks {\n    .@{slider-prefix}-tick {\n      position: absolute;\n      top: 50%;\n      width: @slider-size-tick-width;\n      height: @slider-size-tick-height;\n      margin-top: -(@slider-size-road-width / 2);\n      background: @slider-color-road-bg;\n      transform: translate(-50%, -100%);\n\n      &-active {\n        background: @slider-color-bar-bg;\n      }\n\n      .@{slider-prefix}-vertical & {\n        top: unset;\n        left: 50%;\n        width: @slider-size-tick-height;\n        height: @slider-size-tick-width;\n        margin-top: unset;\n        transform: translate((@slider-size-road-width / 2), 50%);\n      }\n    }\n  }\n\n  &-input {\n    display: flex;\n    align-items: center;\n    margin-left: @slider-spacing-input-margin-left;\n\n    .@{slider-prefix}-vertical & {\n      margin-left: 0;\n    }\n\n    > .@{prefix}-input-number {\n      width: @slider-size-input-width;\n      height: @slider-size-input-height;\n      overflow: visible;\n      line-height: normal;\n\n      input {\n        text-align: center;\n      }\n    }\n\n    &-hyphens {\n      /* prettier-ignore */\n      margin: 0 ((@slider-size-input_range-width - @slider-size-input_range_content-width) / 2);\n      width: @slider-size-input_range_content-width;\n      height: @slider-size-input_range_content-height;\n      background: @slider-color-input_range_content-bg;\n    }\n  }\n}\n"
  },
  {
    "path": "packages/web-vue/components/slider/style/index.ts",
    "content": "import '../../style/index.less';\nimport '../../input/style';\nimport '../../input-number/style';\nimport '../../tooltip/style';\nimport './index.less';\n"
  },
  {
    "path": "packages/web-vue/components/slider/style/token.less",
    "content": "@import '../../style/theme/index.less';\n\n// road\n@slider-size-road-width: 2px;\n@slider-color-road-bg: var(~'@{arco-cssvars-prefix}-color-fill-3');\n@slider-color-road-bg_disabled: var(~'@{arco-cssvars-prefix}-color-fill-2');\n\n// bar\n@slider-color-bar-bg: @color-primary-6;\n@slider-color-bar-bg_disabled: var(~'@{arco-cssvars-prefix}-color-fill-3');\n\n// button\n@slider-color-button-bg: var(~'@{arco-cssvars-prefix}-color-bg-2');\n@slider-border-size-button: @border-2;\n@slider-color-button-border: @color-primary-6;\n@slider-color-button-border_disabled: var(~'@{arco-cssvars-prefix}-color-fill-3');\n@slider-shadow-button_active: @shadow1-down;\n@slider-size-button-width: @size-3;\n@slider-size-button-width_active: 14px;\n\n// dot\n@slider-color-dot-bg: var(~'@{arco-cssvars-prefix}-color-bg-2');\n@slider-border-size-dot: @border-2;\n@slider-font-size-dot: @font-size-body-1;\n@slider-size-dot-width: @size-2;\n\n// mark\n@slider-spacing-margin-bottom_with-mark: @spacing-9;\n@slider-spacing-padding_width-mark: @spacing-8;\n@slider-spacing-padding_width-mark_vertical: @spacing-8;\n@slider-font-size-mark: @font-size-body-3;\n@slider-color-mark-font: var(~'@{arco-cssvars-prefix}-color-text-3');\n\n// tick\n@slider-size-tick-width: 1px;\n@slider-size-tick-height: 3px;\n\n// input\n@slider-spacing-input-margin-left: @spacing-8;\n@slider-size-input-width: @size-15;\n@slider-size-input-height: @size-8;\n@slider-size-input_range-width: @size-5;\n@slider-size-input_range-height: @size-8;\n@slider-size-input_range_content-width: @size-2;\n@slider-size-input_range_content-height: 2px;\n@slider-color-input_range_content-bg: rgb(var(~'@{arco-cssvars-prefix}-gray-6'));\n\n// vertical\n@slider-size-height_vertical: 200px;\n@slider-spacing-mark-left: 3px; // mark 文本和滑动路径的距离\n"
  },
  {
    "path": "packages/web-vue/components/slider/utils.ts",
    "content": "import type { CSSProperties } from 'vue';\nimport NP from 'number-precision';\nimport { Direction } from '../_utils/constant';\n\nexport const getOffsetPercent = (\n  value: number,\n  [min, max]: [number, number]\n): string => {\n  const percent = Math.max((value - min) / (max - min), 0);\n  return `${NP.round(percent * 100, 2)}%`;\n};\n\nexport const getPositionStyle = (\n  offset: string,\n  direction: Direction\n): CSSProperties => {\n  return direction === 'vertical' ? { bottom: offset } : { left: offset };\n};\n"
  },
  {
    "path": "packages/web-vue/components/space/CHANGELOG.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.39.0\n\n`2022-11-18`\n\n### 🐛 BugFix\n\n- fix split margin ([#1864](https://github.com/arco-design/arco-design-vue/pull/1864))\n\n\n## 2.38.0\n\n`2022-10-28`\n\n### 🆕 Feature\n\n- add `split` slot ([#1774](https://github.com/arco-design/arco-design-vue/pull/1774))\n\n\n## 2.30.1\n\n`2022-06-10`\n\n### 💅 Style\n\n- Items that use flex layout only in landscape mode ([#1277](https://github.com/arco-design/arco-design-vue/pull/1277))\n\n\n## 2.30.0\n\n`2022-06-10`\n\n### 💅 Style\n\n- space-item is modified to flex layout to solve the problem of vertical centering of inline elements ([#1273](https://github.com/arco-design/arco-design-vue/pull/1273))\n\n\n## 2.29.1\n\n`2022-06-02`\n\n### 🐛 BugFix\n\n- Fix the problem that the child component uses the key to fail ([#1223](https://github.com/arco-design/arco-design-vue/pull/1223))\n\n\n## 2.25.1\n\n`2022-04-27`\n\n### 🐛 BugFix\n\n- Fix size attribute type detection problem ([#1052](https://github.com/arco-design/arco-design-vue/pull/1052))\n\n\n## 2.11.0\n\n`2021-12-17`\n\n### 🆕 Feature\n\n- add property `fill` ([#415](https://github.com/arco-design/arco-design-vue/pull/415))\n\n\n## 2.9.0\n\n`2021-12-03`\n\n### 🐛 BugFix\n\n- Fix the problem of rendering v-if nodes ([#318](https://github.com/arco-design/arco-design-vue/pull/318))\n\n"
  },
  {
    "path": "packages/web-vue/components/space/CHANGELOG.zh-CN.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.39.0\n\n`2022-11-18`\n\n### 🐛 问题修复\n\n- 修复分隔符间距 ([#1864](https://github.com/arco-design/arco-design-vue/pull/1864))\n\n\n## 2.38.0\n\n`2022-10-28`\n\n### 🆕 新增功能\n\n- 增加`split`插槽 ([#1774](https://github.com/arco-design/arco-design-vue/pull/1774))\n\n\n## 2.30.1\n\n`2022-06-10`\n\n### 💅 样式更新\n\n- 仅在横向模式使用 flex 布局的 item ([#1277](https://github.com/arco-design/arco-design-vue/pull/1277))\n\n\n## 2.30.0\n\n`2022-06-10`\n\n### 💅 样式更新\n\n- space-item 修改为 flex 布局，解决行内元素垂直居中问题 ([#1273](https://github.com/arco-design/arco-design-vue/pull/1273))\n\n\n## 2.29.1\n\n`2022-06-02`\n\n### 🐛 问题修复\n\n- 修复子组件使用 key 失效的问题 ([#1223](https://github.com/arco-design/arco-design-vue/pull/1223))\n\n\n## 2.25.1\n\n`2022-04-27`\n\n### 🐛 问题修复\n\n- 修复 size 属性类型检测问题 ([#1052](https://github.com/arco-design/arco-design-vue/pull/1052))\n\n\n## 2.11.0\n\n`2021-12-17`\n\n### 🆕 新增功能\n\n- 新增属性 `fill` ([#415](https://github.com/arco-design/arco-design-vue/pull/415))\n\n\n## 2.9.0\n\n`2021-12-03`\n\n### 🐛 问题修复\n\n- 修复渲染 v-if 节点的问题 ([#318](https://github.com/arco-design/arco-design-vue/pull/318))\n\n"
  },
  {
    "path": "packages/web-vue/components/space/README.en-US.md",
    "content": "```yaml\nmeta:\n  type: Component\n  category: Layout\ntitle: Space\ndescription: Set the spacing between components.\n```\n\n*Auto translate by google.*\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/vertical.md\n\n@import ./__demo__/size.md\n\n@import ./__demo__/align.md\n\n@import ./__demo__/wrap.md\n\n@import ./__demo__/split.md\n\n## API\n\n\n### `<space>` Props\n\n|Attribute|Description|Type|Default|version|\n|---|---|---|:---:|:---|\n|align|Alignment|`'start' \\| 'end' \\| 'center' \\| 'baseline'`|`-`||\n|direction|Spacing direction|`'vertical' \\| 'horizontal'`|`'horizontal'`||\n|size|Spacing size, support for setting horizontal and vertical spacing separately|`number \\| 'mini' \\| 'small' \\| 'medium' \\| 'large' \\| [SpaceSize, SpaceSize]`|`'small'`||\n|wrap|The spacing of the wrapping type, used in the scene of wrapping.|`boolean`|`false`||\n|fill|fill the block|`boolean`|`false`|2.11.0|\n### `<space>` Slots\n\n|Slot Name|Description|Parameters|\n|---|---|---|\n|split|Set separator|-|\n\n\n\n## Type\n```ts\ntype SpaceSize = number | 'mini' | 'small' | 'medium' | 'large';\n```\n"
  },
  {
    "path": "packages/web-vue/components/space/README.zh-CN.md",
    "content": "```yaml\nmeta:\n  type: 组件\n  category: 布局\ntitle: 间距 Space\ndescription: 设置组件之间的间距\n```\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/vertical.md\n\n@import ./__demo__/size.md\n\n@import ./__demo__/align.md\n\n@import ./__demo__/wrap.md\n\n@import ./__demo__/split.md\n\n## API\n\n\n### `<space>` Props\n\n|参数名|描述|类型|默认值|版本|\n|---|---|---|:---:|:---|\n|align|对齐方式|`'start' \\| 'end' \\| 'center' \\| 'baseline'`|`-`||\n|direction|间距方向|`'vertical' \\| 'horizontal'`|`'horizontal'`||\n|size|间距大小，支持分别制定横向和竖向的间距|`number \\| 'mini' \\| 'small' \\| 'medium' \\| 'large' \\| [SpaceSize, SpaceSize]`|`'small'`||\n|wrap|环绕类型的间距，用于折行的场景。|`boolean`|`false`||\n|fill|充满整行|`boolean`|`false`|2.11.0|\n### `<space>` Slots\n\n|插槽名|描述|参数|\n|---|:---:|---|\n|split|设置分隔符|-|\n\n\n\n## Type\n```ts\ntype SpaceSize = number | 'mini' | 'small' | 'medium' | 'large';\n```\n"
  },
  {
    "path": "packages/web-vue/components/space/TEMPLATE.md",
    "content": "## zh-CN\n```yaml\nmeta:\n  type: 组件\n  category: 布局\ntitle: 间距 Space\ndescription: 设置组件之间的间距\n```\n---\n## en-US\n```yaml\nmeta:\n  type: Component\n  category: Layout\ntitle: Space\ndescription: Set the spacing between components.\n```\n---\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/vertical.md\n\n@import ./__demo__/size.md\n\n@import ./__demo__/align.md\n\n@import ./__demo__/wrap.md\n\n@import ./__demo__/split.md\n\n## API\n\n%%API(space.tsx)%%\n\n## Type\n```ts\ntype SpaceSize = number | 'mini' | 'small' | 'medium' | 'large';\n```\n"
  },
  {
    "path": "packages/web-vue/components/space/__demo__/align.md",
    "content": "```yaml\ntitle:\n  zh-CN: 对齐\n  en-US: Align\n```\n\n## zh-CN\n\n内置 4 种对齐方式，分别为 `start` `center` `end` `baseline`，在水平模式下默认为 `center`。\n\n---\n\n## en-US\n\nThere are 4 built-in alignment methods, namely `start` `center` `end` `baseline`, and the default is `center` in horizontal mode.\n\n---\n\n```vue\n<template>\n  <div>\n    <div style=\"marginBottom: 20px\">\n      <a-radio-group v-model=\"align\" type='button'>\n        <a-radio value=\"start\">start</a-radio>\n        <a-radio value=\"center\">center</a-radio>\n        <a-radio value=\"end\">end</a-radio>\n        <a-radio value=\"baseline\">baseline</a-radio>\n      </a-radio-group>\n    </div>\n    <a-space :align=\"align\" style=\"backgroundColor: var(--color-fill-2);padding: 10px;\">\n      <a-typography-text>Space:</a-typography-text>\n      <a-button type=\"primary\">Item2</a-button>\n      <a-card title='Card'>\n        Card content\n      </a-card>\n    </a-space>\n  </div>\n</template>\n<script>\nexport default {\n  data() {\n    return {\n      align: 'center',\n    }\n  }\n};\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/space/__demo__/basic.md",
    "content": "```yaml\ntitle:\n  zh-CN: 基本用法\n  en-US: Basic\n```\n\n## zh-CN\n\n间距组件的基本用法。\n\n---\n\n## en-US\n\nBasic usage of spacing components.\n\n---\n\n```vue\n<template>\n  <a-space>\n    <a-typography-text>Space:</a-typography-text>\n    <a-tag v-if=\"false\" color='arcoblue'>Tag</a-tag>\n    <a-button type=\"primary\">Item1</a-button>\n    <a-button type=\"primary\">Item2</a-button>\n    <a-switch defaultChecked />\n  </a-space>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/space/__demo__/size.md",
    "content": "```yaml\ntitle:\n  zh-CN: 尺寸\n  en-US: Size\n```\n\n## zh-CN\n\n内置 4 个尺寸，`mini - 4px` `small - 8px (默认)` `medium - 16px` `large - 24px`，也支持传数字来自定义尺寸。\n\n---\n\n## en-US\n\nBuilt-in 4 sizes, `mini-4px` `small-8px (default)` `medium-16px` `large-24px`, and also support to pass numbers to customize the size.\n\n---\n\n```vue\n<template>\n  <div>\n    <div style=\"marginBottom: 20px\">\n      <a-radio-group v-model=\"size\" type='button'>\n        <a-radio value=\"mini\">mini</a-radio>\n        <a-radio value=\"small\">small</a-radio>\n        <a-radio value=\"medium\">medium</a-radio>\n        <a-radio value=\"large\">large</a-radio>\n      </a-radio-group>\n    </div>\n    <a-space :size=\"size\">\n      <a-button type=\"primary\">Item1</a-button>\n      <a-button type=\"primary\">Item2</a-button>\n      <a-button type=\"primary\">Item3</a-button>\n    </a-space>\n  </div>\n</template>\n<script>\nexport default {\n  data() {\n    return {\n      size: 'medium',\n    }\n  }\n};\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/space/__demo__/split.md",
    "content": "```yaml\ntitle:\n  zh-CN: 分隔符\n  en-US: Split\n```\n\n## zh-CN\n\n为相邻子元素设置分隔符。\n\n---\n\n## en-US\n\nSet separators for adjacent child elements.\n\n---\n\n```vue\n<template>\n  <a-space>\n    <template #split>\n      <a-divider direction=\"vertical\" :margin=\"0\" />\n    </template>\n    <a-button type=\"primary\">Item1</a-button>\n    <a-tag v-if=\"show\" color='arcoblue'>Tag</a-tag>\n    <a-button type=\"primary\">Item2</a-button>\n    <a-button type=\"primary\">Item3</a-button>\n    <a-switch v-model=\"show\"/>\n  </a-space>\n  <a-divider />\n  <a-space>\n    <template #split>\n      <a-divider direction=\"vertical\" :margin=\"0\" />\n    </template>\n    <a-link type=\"primary\">Link1</a-link>\n    <a-link type=\"primary\">Link2</a-link>\n    <a-link type=\"primary\">Link3</a-link>\n  </a-space>\n</template>\n\n<script setup>\nimport { ref } from 'vue'\n\nconst show = ref(false)\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/space/__demo__/vertical.md",
    "content": "```yaml\ntitle:\n  zh-CN: 垂直间距\n  en-US: Vertical\n```\n\n## zh-CN\n\n可以设置垂直方向排列的间距。\n\n---\n\n## en-US\n\nYou can set the spacing in the vertical direction.\n\n---\n\n```vue\n<template>\n  <a-space direction=\"vertical\" fill>\n    <a-button type=\"primary\" long>Item1</a-button>\n    <a-button type=\"primary\" long>Item2</a-button>\n    <a-button type=\"primary\" long>Item3</a-button>\n  </a-space>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/space/__demo__/wrap.md",
    "content": "```yaml\ntitle:\n  zh-CN: 环绕间距\n  en-US: Wrap\n```\n\n## zh-CN\n\n环绕类型的间距，四周都有间距，一般用于换行的场景。\n\n---\n\n## en-US\n\nSurround type spacing, there are spacing on all sides, generally used in the scene of line wrapping.\n\n---\n\n```vue\n<template>\n  <a-space wrap>\n    <a-button type=\"primary\">Item1</a-button>\n    <a-button type=\"primary\">Item2</a-button>\n    <a-button type=\"primary\">Item3</a-button>\n    <a-button type=\"primary\">Item4</a-button>\n    <a-button type=\"primary\">Item5</a-button>\n    <a-button type=\"primary\">Item6</a-button>\n    <a-button type=\"primary\">Item7</a-button>\n    <a-button type=\"primary\">Item8</a-button>\n    <a-button type=\"primary\">Item9</a-button>\n    <a-button type=\"primary\">Item10</a-button>\n    <a-button type=\"primary\">Item11</a-button>\n    <a-button type=\"primary\">Item12</a-button>\n    <a-button type=\"primary\">Item13</a-button>\n    <a-button type=\"primary\">Item14</a-button>\n    <a-button type=\"primary\">Item15</a-button>\n    <a-button type=\"primary\">Item16</a-button>\n    <a-button type=\"primary\">Item17</a-button>\n    <a-button type=\"primary\">Item18</a-button>\n    <a-button type=\"primary\">Item19</a-button>\n    <a-button type=\"primary\">Item20</a-button>\n  </a-space>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/space/__test__/__snapshots__/demo.test.ts.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`<space> demo: render [align] correctly 1`] = `\n\"<div>\n  <div style=\\\\\"margin-bottom: 20px;\\\\\"><span class=\\\\\"arco-radio-group-button arco-radio-group-size-medium arco-radio-group-direction-horizontal\\\\\"><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"start\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">start</span></label><label class=\\\\\"arco-radio-button arco-radio-checked\\\\\"><input type=\\\\\"radio\\\\\" checked=\\\\\"\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"center\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">center</span></label><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"end\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">end</span></label><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"baseline\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">baseline</span></label></span></div>\n  <div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 8px; row-gap: 8px; padding: 10px;\\\\\">\n    <!---->\n    <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-typography\\\\\">Space:<!----><!--v-if--><!--v-if--><!--v-if--></span></div>\n    <!---->\n    <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n        <!--v-if-->Item2\n      </button></div>\n    <!---->\n    <div class=\\\\\"arco-space-item\\\\\">\n      <div class=\\\\\"arco-card arco-card-size-medium arco-card-bordered\\\\\">\n        <div class=\\\\\"arco-card-header\\\\\">\n          <div class=\\\\\"arco-card-header-title\\\\\">Card</div>\n          <!---->\n        </div>\n        <!---->\n        <div class=\\\\\"arco-card-body\\\\\"> Card content\n          <!---->\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\"\n`;\n\nexports[`<space> demo: render [basic] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 8px; row-gap: 8px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-typography\\\\\">Space:<!----><!--v-if--><!--v-if--><!--v-if--></span></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n      <!--v-if-->Item1\n    </button></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n      <!--v-if-->Item2\n    </button></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button type=\\\\\"button\\\\\" role=\\\\\"switch\\\\\" aria-checked=\\\\\"true\\\\\" class=\\\\\"arco-switch arco-switch-type-circle arco-switch-checked\\\\\"><span class=\\\\\"arco-switch-handle\\\\\"><span class=\\\\\"arco-switch-handle-icon\\\\\"></span></span><!--  prettier-ignore  -->\n      <!--v-if-->\n    </button></div>\n</div>\"\n`;\n\nexports[`<space> demo: render [size] correctly 1`] = `\n\"<div>\n  <div style=\\\\\"margin-bottom: 20px;\\\\\"><span class=\\\\\"arco-radio-group-button arco-radio-group-size-medium arco-radio-group-direction-horizontal\\\\\"><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"mini\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">mini</span></label><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"small\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">small</span></label><label class=\\\\\"arco-radio-button arco-radio-checked\\\\\"><input type=\\\\\"radio\\\\\" checked=\\\\\"\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"medium\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">medium</span></label><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"large\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">large</span></label></span></div>\n  <div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 16px; row-gap: 16px;\\\\\">\n    <!---->\n    <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n        <!--v-if-->Item1\n      </button></div>\n    <!---->\n    <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n        <!--v-if-->Item2\n      </button></div>\n    <!---->\n    <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n        <!--v-if-->Item3\n      </button></div>\n  </div>\n</div>\"\n`;\n\nexports[`<space> demo: render [split] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 8px; row-gap: 8px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n      <!--v-if-->Item1\n    </button></div>\n  <div class=\\\\\"arco-space-item-split\\\\\">\n    <div role=\\\\\"separator\\\\\" class=\\\\\"arco-divider arco-divider-vertical\\\\\" style=\\\\\"margin: 0px 0px;\\\\\">\n      <!---->\n    </div>\n  </div>\n  <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n      <!--v-if-->Item2\n    </button></div>\n  <div class=\\\\\"arco-space-item-split\\\\\">\n    <div role=\\\\\"separator\\\\\" class=\\\\\"arco-divider arco-divider-vertical\\\\\" style=\\\\\"margin: 0px 0px;\\\\\">\n      <!---->\n    </div>\n  </div>\n  <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n      <!--v-if-->Item3\n    </button></div>\n  <div class=\\\\\"arco-space-item-split\\\\\">\n    <div role=\\\\\"separator\\\\\" class=\\\\\"arco-divider arco-divider-vertical\\\\\" style=\\\\\"margin: 0px 0px;\\\\\">\n      <!---->\n    </div>\n  </div>\n  <div class=\\\\\"arco-space-item\\\\\"><button type=\\\\\"button\\\\\" role=\\\\\"switch\\\\\" aria-checked=\\\\\"false\\\\\" class=\\\\\"arco-switch arco-switch-type-circle\\\\\"><span class=\\\\\"arco-switch-handle\\\\\"><span class=\\\\\"arco-switch-handle-icon\\\\\"></span></span><!--  prettier-ignore  -->\n      <!--v-if-->\n    </button></div>\n</div>\n<div role=\\\\\"separator\\\\\" class=\\\\\"arco-divider arco-divider-horizontal\\\\\">\n  <!---->\n</div>\n<div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 8px; row-gap: 8px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><a class=\\\\\"arco-link arco-link-status-normal\\\\\" type=\\\\\"primary\\\\\">\n      <!--v-if-->Link1\n    </a></div>\n  <div class=\\\\\"arco-space-item-split\\\\\">\n    <div role=\\\\\"separator\\\\\" class=\\\\\"arco-divider arco-divider-vertical\\\\\" style=\\\\\"margin: 0px 0px;\\\\\">\n      <!---->\n    </div>\n  </div>\n  <div class=\\\\\"arco-space-item\\\\\"><a class=\\\\\"arco-link arco-link-status-normal\\\\\" type=\\\\\"primary\\\\\">\n      <!--v-if-->Link2\n    </a></div>\n  <div class=\\\\\"arco-space-item-split\\\\\">\n    <div role=\\\\\"separator\\\\\" class=\\\\\"arco-divider arco-divider-vertical\\\\\" style=\\\\\"margin: 0px 0px;\\\\\">\n      <!---->\n    </div>\n  </div>\n  <div class=\\\\\"arco-space-item\\\\\"><a class=\\\\\"arco-link arco-link-status-normal\\\\\" type=\\\\\"primary\\\\\">\n      <!--v-if-->Link3\n    </a></div>\n</div>\"\n`;\n\nexports[`<space> demo: render [vertical] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-vertical arco-space-fill\\\\\" style=\\\\\"column-gap: 8px; row-gap: 8px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal arco-btn-long\\\\\" type=\\\\\"button\\\\\">\n      <!--v-if-->Item1\n    </button></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal arco-btn-long\\\\\" type=\\\\\"button\\\\\">\n      <!--v-if-->Item2\n    </button></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal arco-btn-long\\\\\" type=\\\\\"button\\\\\">\n      <!--v-if-->Item3\n    </button></div>\n</div>\"\n`;\n\nexports[`<space> demo: render [wrap] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center arco-space-wrap\\\\\" style=\\\\\"column-gap: 8px; row-gap: 8px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n      <!--v-if-->Item1\n    </button></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n      <!--v-if-->Item2\n    </button></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n      <!--v-if-->Item3\n    </button></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n      <!--v-if-->Item4\n    </button></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n      <!--v-if-->Item5\n    </button></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n      <!--v-if-->Item6\n    </button></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n      <!--v-if-->Item7\n    </button></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n      <!--v-if-->Item8\n    </button></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n      <!--v-if-->Item9\n    </button></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n      <!--v-if-->Item10\n    </button></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n      <!--v-if-->Item11\n    </button></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n      <!--v-if-->Item12\n    </button></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n      <!--v-if-->Item13\n    </button></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n      <!--v-if-->Item14\n    </button></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n      <!--v-if-->Item15\n    </button></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n      <!--v-if-->Item16\n    </button></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n      <!--v-if-->Item17\n    </button></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n      <!--v-if-->Item18\n    </button></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n      <!--v-if-->Item19\n    </button></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n      <!--v-if-->Item20\n    </button></div>\n</div>\"\n`;\n"
  },
  {
    "path": "packages/web-vue/components/space/__test__/__snapshots__/index.test.ts.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Space Size should work 1`] = `\n\"<div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 4px; row-gap: 4px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div>aaa</div>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div>bbb</div>\n  </div>\n</div>\"\n`;\n\nexports[`Space Size should work 2`] = `\n\"<div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 8px; row-gap: 8px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div>aaa</div>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div>bbb</div>\n  </div>\n</div>\"\n`;\n\nexports[`Space Size should work 3`] = `\n\"<div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 16px; row-gap: 16px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div>aaa</div>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div>bbb</div>\n  </div>\n</div>\"\n`;\n\nexports[`Space Size should work 4`] = `\n\"<div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 24px; row-gap: 24px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div>aaa</div>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div>bbb</div>\n  </div>\n</div>\"\n`;\n"
  },
  {
    "path": "packages/web-vue/components/space/__test__/demo.test.ts",
    "content": "import demoTest from '../../../scripts/demo-test';\n\ndemoTest('space');\n"
  },
  {
    "path": "packages/web-vue/components/space/__test__/index.test.ts",
    "content": "import { mount } from '@vue/test-utils';\nimport Space from '../index';\n\ndescribe('Space', () => {\n  test('Size should work', () => {\n    const sizes = ['mini', 'small', 'medium', 'large'];\n    sizes.forEach((size) => {\n      const wrapper = mount(Space, {\n        props: { size },\n        slots: {\n          default: ['<div>aaa</div>', '<div>bbb</div>'],\n        },\n      });\n      expect(wrapper.html()).toMatchSnapshot();\n    });\n  });\n});\n"
  },
  {
    "path": "packages/web-vue/components/space/index.ts",
    "content": "import type { App } from 'vue';\nimport type { ArcoOptions } from '../_utils/types';\nimport { setGlobalConfig, getComponentPrefix } from '../_utils/global-config';\nimport _Space from './space';\n\nconst Space = Object.assign(_Space, {\n  install: (app: App, options?: ArcoOptions) => {\n    setGlobalConfig(app, options);\n    const componentPrefix = getComponentPrefix(options);\n\n    app.component(componentPrefix + _Space.name, _Space);\n  },\n});\n\nexport type SpaceInstance = InstanceType<typeof _Space>;\n\nexport default Space;\n"
  },
  {
    "path": "packages/web-vue/components/space/space.tsx",
    "content": "import {\n  computed,\n  CSSProperties,\n  defineComponent,\n  PropType,\n  Comment,\n  Fragment,\n  inject,\n} from 'vue';\nimport { isArray, isNumber } from '../_utils/is';\nimport { getAllElements } from '../_utils/vue-utils';\nimport { getPrefixCls } from '../_utils/global-config';\nimport { configProviderInjectionKey } from '../config-provider/context';\n\ntype SpaceSize = number | 'mini' | 'small' | 'medium' | 'large';\n\nexport default defineComponent({\n  name: 'Space',\n  props: {\n    /**\n     * @zh 对齐方式\n     * @en Alignment\n     * @values 'start', 'end', 'center', 'baseline'\n     */\n    align: {\n      type: String as PropType<'start' | 'end' | 'center' | 'baseline'>,\n    },\n    /**\n     * @zh 间距方向\n     * @en Spacing direction\n     */\n    direction: {\n      type: String as PropType<'vertical' | 'horizontal'>,\n      default: 'horizontal',\n    },\n    /**\n     * @zh 间距大小，支持分别制定横向和竖向的间距\n     * @en Spacing size, support for setting horizontal and vertical spacing separately\n     */\n    size: {\n      type: [Number, String, Array] as PropType<\n        number | 'mini' | 'small' | 'medium' | 'large' | [SpaceSize, SpaceSize]\n      >,\n      default: 'small',\n    },\n    /**\n     * @zh 环绕类型的间距，用于折行的场景。\n     * @en The spacing of the wrapping type, used in the scene of wrapping.\n     */\n    wrap: {\n      type: Boolean,\n    },\n    /**\n     * @zh 充满整行\n     * @en fill the block\n     * @version 2.11.0\n     */\n    fill: {\n      type: Boolean,\n    },\n  },\n  /**\n   * @zh 设置分隔符\n   * @en Set separator\n   * @slot split\n   */\n  setup(props, { slots }) {\n    const prefixCls = getPrefixCls('space');\n    const configCtx = inject(configProviderInjectionKey, undefined);\n    const rtl = computed(() => configCtx?.rtl ?? false);\n\n    const mergedAlign = computed(\n      () => props.align ?? (props.direction === 'horizontal' ? 'center' : '')\n    );\n\n    const cls = computed(() => [\n      prefixCls,\n      {\n        [`${prefixCls}-${props.direction}`]: props.direction,\n        [`${prefixCls}-align-${mergedAlign.value}`]: mergedAlign.value,\n        [`${prefixCls}-wrap`]: props.wrap,\n        [`${prefixCls}-fill`]: props.fill,\n        [`${prefixCls}-rtl`]: rtl.value,\n      },\n    ]);\n\n    function getSize(size: SpaceSize) {\n      if (isNumber(size)) {\n        return size;\n      }\n      switch (size) {\n        case 'mini':\n          return 4;\n        case 'small':\n          return 8;\n        case 'medium':\n          return 16;\n        case 'large':\n          return 24;\n        default:\n          return 8;\n      }\n    }\n\n    const getSpaceStyle = computed(() => {\n      const style: CSSProperties = {};\n      const sizeArray = isArray(props.size)\n        ? props.size\n        : [props.size, props.size];\n      const [colGap, rowGap] = sizeArray.map(getSize);\n\n      style.columnGap = `${colGap}px`;\n      style.rowGap = `${rowGap}px`;\n      return style;\n    });\n\n    return () => {\n      const children = getAllElements(slots.default?.(), true).filter(\n        (item) => item.type !== Comment\n      );\n\n      return (\n        <div class={cls.value} style={getSpaceStyle.value}>\n          {children.map((child, index) => {\n            const shouldRenderSplit = slots.split && index > 0;\n            return (\n              <Fragment key={child.key ?? `item-${index}`}>\n                {shouldRenderSplit && (\n                  <div class={`${prefixCls}-item-split`}>{slots.split?.()}</div>\n                )}\n                <div class={`${prefixCls}-item`}>{child}</div>\n              </Fragment>\n            );\n          })}\n        </div>\n      );\n    };\n  },\n});\n"
  },
  {
    "path": "packages/web-vue/components/space/style/index.less",
    "content": "@import '../../style/theme/index.less';\n\n@space-prefix-cls: ~'@{prefix}-space';\n\n.@{space-prefix-cls} {\n  display: inline-flex;\n\n  .@{space-prefix-cls}-item:empty {\n    display: none;\n  }\n\n  &-horizontal {\n    .@{space-prefix-cls}-item {\n      display: flex;\n      align-items: center;\n    }\n  }\n\n  &-vertical {\n    flex-direction: column;\n  }\n\n  &-align-baseline {\n    align-items: baseline;\n  }\n\n  &-align-start {\n    align-items: flex-start;\n  }\n\n  &-align-end {\n    align-items: flex-end;\n  }\n\n  &-align-center {\n    align-items: center;\n  }\n\n  &-wrap {\n    flex-wrap: wrap;\n  }\n\n  &-fill {\n    display: flex;\n  }\n\n  &-rtl {\n    direction: rtl;\n  }\n}\n"
  },
  {
    "path": "packages/web-vue/components/space/style/index.ts",
    "content": "import '../../style/index.less';\nimport './index.less';\n"
  },
  {
    "path": "packages/web-vue/components/spin/CHANGELOG.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.47.0\n\n`2023-06-02`\n\n### 🆕 Feature\n\n- add hideIcon property ([#2303](https://github.com/arco-design/arco-design-vue/pull/2303))\n- add tip slot ([#2303](https://github.com/arco-design/arco-design-vue/pull/2303))\n\n\n## 2.38.0-beta.1\n\n`2022-10-14`\n\n### 🐛 BugFix\n\n- Fix the problem that size is invalid ([#1717](https://github.com/arco-design/arco-design-vue/pull/1717))\n\n\n## 2.35.1\n\n`2022-08-19`\n\n### 🐛 BugFix\n\n- Fix the spin problem caused by the increase of the z-index of fixed-column ([#1533](https://github.com/arco-design/arco-design-vue/pull/1533))\n\n\n## 2.9.0\n\n`2021-12-03`\n\n### 🐛 BugFix\n\n- Fix the problem that switching states in container mode causes sub-components to reload ([#320](https://github.com/arco-design/arco-design-vue/pull/320))\n\n\n## 2.1.0\n\n`2021-11-05`\n\n### 🆕 Feature\n\n- Add size prop and icon & element slot ([#86](https://github.com/arco-design/arco-design-vue/pull/86))\n\n"
  },
  {
    "path": "packages/web-vue/components/spin/CHANGELOG.zh-CN.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.47.0\n\n`2023-06-02`\n\n### 🆕 新增功能\n\n- 新增隐藏图标属性 ([#2303](https://github.com/arco-design/arco-design-vue/pull/2303))\n- 新增提示内容插槽 ([#2303](https://github.com/arco-design/arco-design-vue/pull/2303))\n\n\n## 2.38.0-beta.1\n\n`2022-10-14`\n\n### 🐛 问题修复\n\n- 修复 size 在失效的问题 ([#1717](https://github.com/arco-design/arco-design-vue/pull/1717))\n\n\n## 2.35.1\n\n`2022-08-19`\n\n### 🐛 问题修复\n\n- 修复 fixed-column 的 z-index 提高导致的 spin 问题 ([#1533](https://github.com/arco-design/arco-design-vue/pull/1533))\n\n\n## 2.9.0\n\n`2021-12-03`\n\n### 🐛 问题修复\n\n- 修复容器模式下切换状态导致子组件重新加载的问题 ([#320](https://github.com/arco-design/arco-design-vue/pull/320))\n\n\n## 2.1.0\n\n`2021-11-05`\n\n### 🆕 新增功能\n\n- 增加 `size` 属性和 `#icon` & `#element` 插槽 ([#86](https://github.com/arco-design/arco-design-vue/pull/86))\n\n"
  },
  {
    "path": "packages/web-vue/components/spin/README.en-US.md",
    "content": "```yaml\nmeta:\n  type: Component\n  category: Feedback\ntitle: Spin\ndescription: Used for the loading state of pages and blocks-when a part of the page is waiting for asynchronous data or is in the rendering process, appropriate loading dynamics will effectively alleviate user anxiety.\n```\n\n*Auto translate by google.*\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/size.md\n\n@import ./__demo__/dot.md\n\n@import ./__demo__/container.md\n\n@import ./__demo__/tip.md\n\n@import ./__demo__/icon.md\n\n## API\n\n\n### `<spin>` Props\n\n|Attribute|Description|Type|Default|\n|---|---|---|:---:|\n|size|Size|`number`|`-`|\n|loading|Whether it is loading state (Only effective in container mode)|`boolean`|`false`|\n|dot|Whether to use dot type animation|`boolean`|`false`|\n|tip|Prompt content|`string`|`-`|\n|hide-icon|Whether to hide the icon|`boolean`|`false`|\n### `<spin>` Slots\n\n|Slot Name|Description|Parameters|\n|---|---|---|\n|tip|Custom tip|-|\n|element|Custom element|-|\n|icon|Custom icon (auto-rotation)|-|\n\n\n"
  },
  {
    "path": "packages/web-vue/components/spin/README.zh-CN.md",
    "content": "```yaml\nmeta:\n  type: 组件\n  category: 反馈\ntitle: 加载中 Spin\ndescription: 用于页面和区块的加载中状态 - 页面局部处于等待异步数据或正在渲染过程时，合适的加载动效会有效缓解用户的焦虑。\n```\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/size.md\n\n@import ./__demo__/dot.md\n\n@import ./__demo__/container.md\n\n@import ./__demo__/tip.md\n\n@import ./__demo__/icon.md\n\n## API\n\n\n### `<spin>` Props\n\n|参数名|描述|类型|默认值|\n|---|---|---|:---:|\n|size|尺寸|`number`|`-`|\n|loading|是否为加载中状态（仅在容器模式下生效）|`boolean`|`false`|\n|dot|是否使用点类型的动画|`boolean`|`false`|\n|tip|提示内容|`string`|`-`|\n|hide-icon|是否隐藏图标|`boolean`|`false`|\n### `<spin>` Slots\n\n|插槽名|描述|参数|\n|---|:---:|---|\n|tip|自定义提示内容|-|\n|element|自定义元素|-|\n|icon|自定义图标（自动旋转）|-|\n\n\n"
  },
  {
    "path": "packages/web-vue/components/spin/TEMPLATE.md",
    "content": "## zh-CN\n```yaml\nmeta:\n  type: 组件\n  category: 反馈\ntitle: 加载中 Spin\ndescription: 用于页面和区块的加载中状态 - 页面局部处于等待异步数据或正在渲染过程时，合适的加载动效会有效缓解用户的焦虑。\n```\n---\n## en-US\n```yaml\nmeta:\n  type: Component\n  category: Feedback\ntitle: Spin\ndescription: Used for the loading state of pages and blocks-when a part of the page is waiting for asynchronous data or is in the rendering process, appropriate loading dynamics will effectively alleviate user anxiety.\n```\n---\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/size.md\n\n@import ./__demo__/dot.md\n\n@import ./__demo__/container.md\n\n@import ./__demo__/tip.md\n\n@import ./__demo__/icon.md\n\n## API\n\n%%API(spin.tsx)%%\n"
  },
  {
    "path": "packages/web-vue/components/spin/__demo__/basic.md",
    "content": "```yaml\ntitle:\n  zh-CN: 基本用法\n  en-US: Basic Usage\n```\n\n## zh-CN\n\n用于展示加载中的状态。\n\n---\n\n## en-US\n\nUsed to show the status of loading.\n\n---\n\n```vue\n<template>\n  <a-spin />\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/spin/__demo__/container.md",
    "content": "```yaml\ntitle:\n  zh-CN: 容器中\n  en-US: Container\n```\n\n## zh-CN\n\n可以给任意内容添加加载中指示符。\n\n---\n\n## en-US\n\nYou can add a loading indicator to any content.\n\n---\n\n```vue\n<template>\n  <a-spin :loading=\"loading\" tip=\"This may take a while...\">\n    <a-card title=\"Arco Card\">\n      ByteDance's core product, Toutiao ('Headlines'), is a content platform in China and around\n      the world. Toutiao started out as a news recommendation engine and gradually evolved into\n      a platform delivering content in various formats.\n    </a-card>\n  </a-spin>\n</template>\n\n<script>\nexport default {\n  data() {\n    return {\n      loading: true\n    }\n  }\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/spin/__demo__/dot.md",
    "content": "```yaml\ntitle:\n  zh-CN: 点类型指示符\n  en-US: Dot Loading\n```\n\n## zh-CN\n\n通过 `dot` 属性，可以展示点类型的指示符。\n\n---\n\n## en-US\n\nThe dot type indicator can be displayed through the `dot` attribute.\n\n---\n\n```vue\n\n<template>\n  <a-spin dot />\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/spin/__demo__/icon.md",
    "content": "```yaml\ntitle:\n  zh-CN: 自定义图标\n  en-US: Custom Icon\n```\n\n## zh-CN\n\n通过 `#icon` 插槽可以自定义图标。\n\n---\n\n## en-US\n\n$END$\n\n---\n\n```vue\n<template>\n  <a-spin>\n    <template #icon>\n      <icon-sync />\n    </template>\n  </a-spin>\n</template>\n\n<script>\nimport { IconSync } from '@arco-design/web-vue/es/icon';\n\nexport default {\n  components: { IconSync }\n};\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/spin/__demo__/size.md",
    "content": "```yaml\ntitle:\n  zh-CN: 不同尺寸\n  en-US: Custom Size\n```\n\n## zh-CN\n\n设置 `size` 可以得到不同尺寸的加载图标。\n\n---\n\n## en-US\n\n$END$\n\n---\n\n```vue\n<template>\n  <a-space size=\"large\">\n    <a-spin />\n    <a-spin :size=\"28\"/>\n    <a-spin :size=\"32\"/>\n  </a-space>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/spin/__demo__/tip.md",
    "content": "```yaml\ntitle:\n  zh-CN: 添加描述文案\n  en-US: Add tip\n```\n\n## zh-CN\n\n通过 `tip` 属性添加描述文案。\n\n---\n\n## en-US\n\n$END$\n\n---\n\n```vue\n<template>\n  <a-spin tip=\"This may take a while...\"/>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/spin/__test__/__snapshots__/demo.test.ts.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`<spin> demo: render [basic] correctly 1`] = `\n\"<div class=\\\\\"arco-spin\\\\\">\n  <div class=\\\\\"arco-spin-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-loading arco-icon-spin\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n      <path d=\\\\\"M42 24c0 9.941-8.059 18-18 18S6 33.941 6 24 14.059 6 24 6\\\\\"></path>\n    </svg></div>\n  <!---->\n</div>\"\n`;\n\nexports[`<spin> demo: render [container] correctly 1`] = `\n\"<div class=\\\\\"arco-spin arco-spin-loading\\\\\">\n  <div class=\\\\\"arco-card arco-card-size-medium arco-card-bordered\\\\\">\n    <div class=\\\\\"arco-card-header\\\\\">\n      <div class=\\\\\"arco-card-header-title\\\\\">Arco Card</div>\n      <!---->\n    </div>\n    <!---->\n    <div class=\\\\\"arco-card-body\\\\\"> ByteDance's core product, Toutiao ('Headlines'), is a content platform in China and around the world. Toutiao started out as a news recommendation engine and gradually evolved into a platform delivering content in various formats.\n      <!---->\n    </div>\n  </div>\n  <div class=\\\\\"arco-spin-mask\\\\\">\n    <div class=\\\\\"arco-spin-mask-icon\\\\\">\n      <div class=\\\\\"arco-spin-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-loading arco-icon-spin\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n          <path d=\\\\\"M42 24c0 9.941-8.059 18-18 18S6 33.941 6 24 14.059 6 24 6\\\\\"></path>\n        </svg></div>\n      <div class=\\\\\"arco-spin-tip\\\\\">This may take a while...</div>\n    </div>\n  </div>\n</div>\"\n`;\n\nexports[`<spin> demo: render [dot] correctly 1`] = `\n\"<div class=\\\\\"arco-spin\\\\\">\n  <div class=\\\\\"arco-spin-icon\\\\\">\n    <div class=\\\\\"arco-dot-loading\\\\\">\n      <div class=\\\\\"arco-dot-loading-item\\\\\"></div>\n      <div class=\\\\\"arco-dot-loading-item\\\\\"></div>\n      <div class=\\\\\"arco-dot-loading-item\\\\\"></div>\n      <div class=\\\\\"arco-dot-loading-item\\\\\"></div>\n      <div class=\\\\\"arco-dot-loading-item\\\\\"></div>\n    </div>\n  </div>\n  <!---->\n</div>\"\n`;\n\nexports[`<spin> demo: render [icon] correctly 1`] = `\n\"<div class=\\\\\"arco-spin\\\\\">\n  <div class=\\\\\"arco-spin-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-sync arco-icon-spin\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n      <path d=\\\\\"M11.98 11.703c-6.64 6.64-6.64 17.403 0 24.042a16.922 16.922 0 0 0 8.942 4.7M34.603 37.156l1.414-1.415c6.64-6.639 6.64-17.402 0-24.041A16.922 16.922 0 0 0 27.075 7M14.81 11.982l-1.414-1.414-1.414-1.414h2.829v2.828ZM33.192 36.02l1.414 1.414 1.414 1.415h-2.828V36.02Z\\\\\"></path>\n    </svg></div>\n  <!---->\n</div>\"\n`;\n\nexports[`<spin> demo: render [size] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 24px; row-gap: 24px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-spin\\\\\">\n      <div class=\\\\\"arco-spin-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-loading arco-icon-spin\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n          <path d=\\\\\"M42 24c0 9.941-8.059 18-18 18S6 33.941 6 24 14.059 6 24 6\\\\\"></path>\n        </svg></div>\n      <!---->\n    </div>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-spin\\\\\">\n      <div class=\\\\\"arco-spin-icon\\\\\" style=\\\\\"font-size: 28px;\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-loading arco-icon-spin\\\\\" style=\\\\\"font-size: 28px;\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n          <path d=\\\\\"M42 24c0 9.941-8.059 18-18 18S6 33.941 6 24 14.059 6 24 6\\\\\"></path>\n        </svg></div>\n      <!---->\n    </div>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-spin\\\\\">\n      <div class=\\\\\"arco-spin-icon\\\\\" style=\\\\\"font-size: 32px;\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-loading arco-icon-spin\\\\\" style=\\\\\"font-size: 32px;\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n          <path d=\\\\\"M42 24c0 9.941-8.059 18-18 18S6 33.941 6 24 14.059 6 24 6\\\\\"></path>\n        </svg></div>\n      <!---->\n    </div>\n  </div>\n</div>\"\n`;\n\nexports[`<spin> demo: render [tip] correctly 1`] = `\n\"<div class=\\\\\"arco-spin arco-spin-with-tip\\\\\">\n  <div class=\\\\\"arco-spin-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-loading arco-icon-spin\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n      <path d=\\\\\"M42 24c0 9.941-8.059 18-18 18S6 33.941 6 24 14.059 6 24 6\\\\\"></path>\n    </svg></div>\n  <div class=\\\\\"arco-spin-tip\\\\\">This may take a while...</div>\n</div>\"\n`;\n"
  },
  {
    "path": "packages/web-vue/components/spin/__test__/demo.test.ts",
    "content": "import demoTest from '../../../scripts/demo-test';\n\ndemoTest('spin');\n"
  },
  {
    "path": "packages/web-vue/components/spin/dot-loading.tsx",
    "content": "import { defineComponent } from 'vue';\nimport { getPrefixCls } from '../_utils/global-config';\n\nconst DOT_NUMBER = 5;\n\nexport default defineComponent({\n  name: 'DotLoading',\n  props: {\n    size: {\n      type: Number,\n    },\n  },\n  setup(props) {\n    const prefixCls = getPrefixCls('dot-loading');\n\n    return () => {\n      const style = props.size\n        ? {\n            width: `${props.size}px`,\n            height: `${props.size}px`,\n          }\n        : {};\n\n      return (\n        <div\n          class={prefixCls}\n          style={{\n            width: props.size ? `${props.size * 7}px` : undefined,\n            height: props.size ? `${props.size}px` : undefined,\n          }}\n        >\n          {Array(DOT_NUMBER)\n            .fill(1)\n            .map((_, index) => (\n              <div class={`${prefixCls}-item`} key={index} style={style} />\n            ))}\n        </div>\n      );\n    };\n  },\n});\n"
  },
  {
    "path": "packages/web-vue/components/spin/index.ts",
    "content": "import type { App } from 'vue';\nimport type { ArcoOptions } from '../_utils/types';\nimport { setGlobalConfig, getComponentPrefix } from '../_utils/global-config';\nimport _Spin from './spin';\n\nconst Spin = Object.assign(_Spin, {\n  install: (app: App, options?: ArcoOptions) => {\n    setGlobalConfig(app, options);\n    const componentPrefix = getComponentPrefix(options);\n\n    app.component(componentPrefix + _Spin.name, _Spin);\n  },\n});\n\nexport type SpinInstance = InstanceType<typeof _Spin>;\n\nexport default Spin;\n"
  },
  {
    "path": "packages/web-vue/components/spin/spin.tsx",
    "content": "import { cloneVNode, computed, defineComponent, inject } from 'vue';\nimport { getPrefixCls } from '../_utils/global-config';\nimport IconLoading from '../icon/icon-loading';\nimport DotLoading from './dot-loading';\nimport { getFirstComponent } from '../_utils/vue-utils';\nimport { configProviderInjectionKey } from '../config-provider/context';\n\nexport default defineComponent({\n  name: 'Spin',\n  props: {\n    /**\n     * @zh 尺寸\n     * @en Size\n     */\n    size: {\n      type: Number,\n    },\n    /**\n     * @zh 是否为加载中状态（仅在容器模式下生效）\n     * @en Whether it is loading state (Only effective in container mode)\n     */\n    loading: Boolean,\n    /**\n     * @zh 是否使用点类型的动画\n     * @en Whether to use dot type animation\n     */\n    dot: Boolean,\n    /**\n     * @zh 提示内容\n     * @en Prompt content\n     */\n    tip: String,\n    /**\n     * @zh 是否隐藏图标\n     * @en Whether to hide the icon\n     */\n    hideIcon: {\n      type: Boolean,\n      default: false,\n    },\n  },\n  /**\n   * @zh 自定义图标（自动旋转）\n   * @en Custom icon (auto-rotation)\n   * @slot icon\n   */\n  /**\n   * @zh 自定义元素\n   * @en Custom element\n   * @slot element\n   */\n  /**\n   * @zh 自定义提示内容\n   * @en Custom tip\n   * @slot tip\n   */\n  setup(props, { slots }) {\n    const prefixCls = getPrefixCls('spin');\n    const configCtx = inject(configProviderInjectionKey, undefined);\n\n    const cls = computed(() => [\n      prefixCls,\n      {\n        [`${prefixCls}-loading`]: props.loading,\n        [`${prefixCls}-with-tip`]: props.tip && !slots.default,\n      },\n    ]);\n\n    const renderIcon = () => {\n      if (slots.icon) {\n        const iconVNode = getFirstComponent(slots.icon());\n        if (iconVNode) {\n          return cloneVNode(iconVNode, { spin: true });\n        }\n      }\n      if (slots.element) {\n        return slots.element();\n      }\n      if (props.dot) {\n        return <DotLoading size={props.size} />;\n      }\n      if (configCtx?.slots.loading) {\n        return configCtx.slots.loading();\n      }\n      return <IconLoading spin={true} size={props.size} />;\n    };\n\n    const renderSpinIcon = () => {\n      const style = props.size ? { fontSize: `${props.size}px` } : undefined;\n      const hasTip = Boolean(slots.tip ?? props.tip);\n\n      return (\n        <>\n          {!props.hideIcon && (\n            <div class={`${prefixCls}-icon`} style={style}>\n              {renderIcon()}\n            </div>\n          )}\n          {hasTip && (\n            <div class={`${prefixCls}-tip`}>{slots.tip?.() ?? props.tip}</div>\n          )}\n        </>\n      );\n    };\n\n    return () => (\n      <div class={cls.value}>\n        {slots.default ? (\n          <>\n            {slots.default()}\n            {props.loading && (\n              <div class={`${prefixCls}-mask`}>\n                <div class={`${prefixCls}-mask-icon`}>{renderSpinIcon()}</div>\n              </div>\n            )}\n          </>\n        ) : (\n          renderSpinIcon()\n        )}\n      </div>\n    );\n  },\n});\n"
  },
  {
    "path": "packages/web-vue/components/spin/style/dot-loading.less",
    "content": "@import './token.less';\n\n@dot-prefix-cls: ~'@{prefix}-dot-loading';\n\n.@{dot-prefix-cls} {\n  position: relative;\n  display: inline-block;\n  width: @spin-dot-size-width * 7;\n  height: @spin-dot-size-width;\n  transform-style: preserve-3d;\n  perspective: 200px;\n\n  &-item {\n    position: absolute;\n    top: 0;\n    left: 50%;\n    width: @spin-dot-size-width;\n    height: @spin-dot-size-width;\n    background-color: @spin-dot-color-icon_default;\n    border-radius: @radius-circle;\n    transform: translateX(-50%) scale(0);\n    animation: @dot-prefix-cls 2s @transition-timing-function-linear infinite\n      forwards;\n\n    &:nth-child(2) {\n      background-color: @spin-dot-color-icon_second;\n      animation-delay: 400ms;\n    }\n\n    &:nth-child(3) {\n      background-color: @spin-dot-color-icon_third;\n      animation-delay: 800ms;\n    }\n\n    &:nth-child(4) {\n      background-color: @spin-dot-color-icon_forth;\n      animation-delay: 1200ms;\n    }\n\n    &:nth-child(5) {\n      background-color: @spin-dot-color-icon_last;\n      animation-delay: 1600ms;\n    }\n  }\n}\n\n/* prettier-ignore */\n@keyframes @dot-prefix-cls {\n/* prettier-ignore */\neach(range(36), {\n  @percent: round(percentage(((@value - 1) / 36)), 3);\n\n  // 半径\n  @radius: 280%;\n  @xOffset: round(sin((pi() / 180 * @value * 10)) * @radius, 3) * -1;\n  @zOffset: round(cos((pi() / 180 * @value * 10)), 3) * -1px;\n\n  @scaleOffset: round((1 - cos((pi() / 180) * @value * 10)) * 0.75 + 0.5, 3);\n\n  @{percent} {\n    transform: ~'translate3D(@{xOffset}, 0, @{zOffset}) scale(@{scaleOffset})'\n  }\n});\n}\n"
  },
  {
    "path": "packages/web-vue/components/spin/style/index.less",
    "content": "@import './token.less';\n@import './dot-loading.less';\n\n@spin-prefix-cls: ~'@{prefix}-spin';\n\n.@{spin-prefix-cls} {\n  display: inline-block;\n\n  &-with-tip {\n    text-align: center;\n  }\n\n  &-icon {\n    color: @spin-color-icon;\n    font-size: @spin-font-size-icon;\n  }\n\n  &-tip {\n    margin-top: @spin-margin-top-tip;\n    color: @spin-color-text;\n    font-weight: @spin-font-weight;\n    font-size: @spin-font-size-text;\n  }\n\n  &-mask {\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    z-index: 11;\n    text-align: center;\n    background-color: var(~'@{arco-cssvars-prefix}-color-spin-layer-bg');\n    transition: opacity @transition-duration-1\n      @transition-timing-function-linear;\n    user-select: none;\n  }\n\n  &-loading {\n    position: relative;\n    user-select: none;\n  }\n\n  &-loading &-mask-icon {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    z-index: 12;\n    transform: translate(-50%, -50%);\n  }\n\n  &-loading &-children::after {\n    opacity: 1;\n    pointer-events: auto;\n  }\n}\n"
  },
  {
    "path": "packages/web-vue/components/spin/style/index.ts",
    "content": "import '../../style/index.less';\nimport './index.less';\n"
  },
  {
    "path": "packages/web-vue/components/spin/style/token.less",
    "content": "@import '../../style/theme/index.less';\n\n@spin-font-size-text: 14px;\n@spin-font-size-icon: 20px;\n@spin-font-weight: @font-weight-500;\n@spin-line-height: @line-height-base;\n@spin-margin-top-tip: @spacing-3;\n\n@spin-color-text: @color-primary-6;\n@spin-color-icon: @color-primary-6;\n\n@spin-dot-color-icon_default: @color-primary-6;\n@spin-dot-color-icon_second: @color-primary-5;\n@spin-dot-color-icon_third: @color-primary-4;\n@spin-dot-color-icon_forth: @color-primary-4;\n@spin-dot-color-icon_last: @color-primary-2;\n@spin-dot-size-width: @size-2;\n"
  },
  {
    "path": "packages/web-vue/components/split/CHANGELOG.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.16.0\n\n`2022-01-21`\n\n### 🆕 Feature\n\n- Attributes `min` and `max` support setting pixel values ([#607](https://github.com/arco-design/arco-design-vue/pull/607))\n\n"
  },
  {
    "path": "packages/web-vue/components/split/CHANGELOG.zh-CN.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.16.0\n\n`2022-01-21`\n\n### 🆕 新增功能\n\n- 属性 `min` `max` 支持设置 px ([#607](https://github.com/arco-design/arco-design-vue/pull/607))\n\n"
  },
  {
    "path": "packages/web-vue/components/split/README.en-US.md",
    "content": "```yaml\nmeta:\n  type: Component\n  category: Other\ntitle: Split\ndescription: Divide the panel into two parts.\n```\n\n*Auto translate by google.*\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/nested.md\n\n## API\n\n\n### `<split>` Props\n\n|Attribute|Description|Type|Default|\n|---|---|---|:---:|\n|component|The html tag of the split box|`string`|`'div'`|\n|direction|Direction of division|`'horizontal' \\| 'vertical'`|`'horizontal'`|\n|size **(v-model)**|The size of the segmentation, it can be 0~1 representing a percentage, or a specific number of pixels, such as 300px|`number\\|string`|`-`|\n|default-size|Default split size, it can be 0~1 representing a percentage, or a specific number of pixels, such as 300px|`number\\|string`|`0.5`|\n|min|Minimum threshold, it can be 0~1 representing a percentage, or a specific number of pixels, such as 300px|`number\\|string`|`-`|\n|max|Maximum threshold, it can be 0~1 representing a percentage, or a specific number of pixels, such as 300px|`number\\|string`|`-`|\n|disabled|Whether to disable|`boolean`|`false`|\n### `<split>` Events\n\n|Event Name|Description|Parameters|\n|---|---|---|\n|move-start|Triggered before dragging|-|\n|moving|Triggered when dragging|-|\n|move-end|Triggered after dragging ends|-|\n### `<split>` Slots\n\n|Slot Name|Description|Parameters|\n|---|---|---|\n|first|The contents of the first panel|-|\n|resize-trigger|The contents of the resize pole|-|\n|resize-trigger-icon|Resize pole icon|-|\n|second|The contents of the second panel|-|\n\n\n"
  },
  {
    "path": "packages/web-vue/components/split/README.zh-CN.md",
    "content": "```yaml\nmeta:\n  type: 组件\n  category: 其他\ntitle: 面板分割 Split\ndescription: 将面板分割成两部分。\n```\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/nested.md\n\n## API\n\n\n### `<split>` Props\n\n|参数名|描述|类型|默认值|\n|---|---|---|:---:|\n|component|分割框的 html 标签|`string`|`'div'`|\n|direction|分割的方向|`'horizontal' \\| 'vertical'`|`'horizontal'`|\n|size **(v-model)**|分割的大小，可以是 0~1 代表百分比，或具体数值的像素，如 300px|`number\\|string`|`-`|\n|default-size|默认分割的大小，可以是 0~1 代表百分比，或具体数值的像素，如 300px|`number\\|string`|`0.5`|\n|min|最小阈值，可以是 0~1 代表百分比，或具体数值的像素，如 300px|`number\\|string`|`-`|\n|max|最大阈值，可以是 0~1 代表百分比，或具体数值的像素，如 300px|`number\\|string`|`-`|\n|disabled|是否禁用|`boolean`|`false`|\n### `<split>` Events\n\n|事件名|描述|参数|\n|---|---|---|\n|move-start|开始拖拽之前触发|-|\n|moving|拖拽时触发|-|\n|move-end|拖拽结束之后触发|-|\n### `<split>` Slots\n\n|插槽名|描述|参数|\n|---|:---:|---|\n|first|第一个面板的内容|-|\n|resize-trigger|伸缩杆的内容|-|\n|resize-trigger-icon|伸缩杆的图标|-|\n|second|第二个面板的内容|-|\n\n\n"
  },
  {
    "path": "packages/web-vue/components/split/TEMPLATE.md",
    "content": "## zh-CN\n```yaml\nmeta:\n  type: 组件\n  category: 其他\ntitle: 面板分割 Split\ndescription: 将面板分割成两部分。\n```\n---\n## en-US\n```yaml\nmeta:\n  type: Component\n  category: Other\ntitle: Split\ndescription: Divide the panel into two parts.\n```\n---\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/nested.md\n\n## API\n\n%%API(split.vue)%%\n"
  },
  {
    "path": "packages/web-vue/components/split/__demo__/basic.md",
    "content": "```yaml\ntitle:\n  zh-CN: 基本用法\n  en-US: Basic\n```\n\n## zh-CN\n\n将一个面板分割成两个可以调整宽度或高度的两部分。用`direction`控制分割方向。\n\n---\n\n## en-US\n\nDivide a panel into two parts with adjustable width or height. Use `direction` to control the direction of the split.\n\n---\n\n```vue\n<template>\n  <div>\n    <a-split :style=\"{\n        height: '200px',\n        width: '100%',\n        minWidth: '500px',\n        border: '1px solid var(--color-border)'\n      }\"\n      v-model:size=\"size\"\n      min=\"80px\"\n    >\n      <template #first>\n        <a-typography-paragraph>Left</a-typography-paragraph>\n      </template>\n      <template #second>\n        <a-typography-paragraph>Right</a-typography-paragraph>\n      </template>\n    </a-split>\n  </div>\n</template>\n<script>\nexport default {\n  data() {\n    return {\n      size: 0.5\n    }\n  }\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/split/__demo__/nested.md",
    "content": "```yaml\ntitle:\n  zh-CN: 面板分割嵌套\n  en-US: Panel Split Nesting\n```\n\n## zh-CN\n\n面板分割可以嵌套使用。\n\n---\n\n## en-US\n\nPanel split can be nested.\n\n---\n\n```vue\n<template>\n<div>\n  <a-split :style=\"{\n      height: '200px',\n      width: '100%',\n      minWidth: '500px',\n      border: '1px solid var(--color-border)'\n    }\"\n  >\n    <template #first>\n      <a-typography-paragraph>Left</a-typography-paragraph>\n    </template>\n    <template #second>\n      <div>\n        <a-split direction=\"vertical\" :style=\"{height: '200px'}\">\n          <template #first><a-typography-paragraph>Top</a-typography-paragraph></template>\n          <template #second><a-typography-paragraph>Bottom</a-typography-paragraph></template>\n        </a-split>\n      </div>\n    </template>\n  </a-split>\n</div>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/split/__test__/__snapshots__/demo.test.ts.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`<split> demo: render [basic] correctly 1`] = `\n\"<div>\n  <div class=\\\\\"arco-split arco-split-horizontal\\\\\" style=\\\\\"height: 200px; width: 100%; min-width: 500px;\\\\\">\n    <div class=\\\\\"arco-split-pane arco-split-pane-first\\\\\" style=\\\\\"flex: 0 0 calc(50% - 0px);\\\\\">\n      <div class=\\\\\"arco-typography\\\\\">Left\n        <!---->\n        <!--v-if-->\n        <!--v-if-->\n        <!--v-if-->\n      </div>\n    </div>\n    <div class=\\\\\"arco-split-trigger arco-split-trigger-vertical\\\\\">\n      <!-- @slot 自定义内容 -->\n      <div class=\\\\\"arco-split-trigger-icon-wrapper\\\\\">\n        <!-- @slot 自定义 icon --><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-drag-dot-vertical arco-split-trigger-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n          <path d=\\\\\"M17 8h2v2h-2V8ZM17 23h2v2h-2v-2ZM17 38h2v2h-2v-2ZM29 8h2v2h-2V8ZM29 23h2v2h-2v-2ZM29 38h2v2h-2v-2Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n          <path d=\\\\\"M17 8h2v2h-2V8ZM17 23h2v2h-2v-2ZM17 38h2v2h-2v-2ZM29 8h2v2h-2V8ZM29 23h2v2h-2v-2ZM29 38h2v2h-2v-2Z\\\\\"></path>\n        </svg>\n      </div>\n    </div>\n    <div class=\\\\\"arco-split-pane arco-split-pane-second\\\\\">\n      <div class=\\\\\"arco-typography\\\\\">Right\n        <!---->\n        <!--v-if-->\n        <!--v-if-->\n        <!--v-if-->\n      </div>\n    </div>\n  </div>\n</div>\"\n`;\n\nexports[`<split> demo: render [nested] correctly 1`] = `\n\"<div>\n  <div class=\\\\\"arco-split arco-split-horizontal\\\\\" style=\\\\\"height: 200px; width: 100%; min-width: 500px;\\\\\">\n    <div class=\\\\\"arco-split-pane arco-split-pane-first\\\\\" style=\\\\\"flex: 0 0 calc(50% - 0px);\\\\\">\n      <div class=\\\\\"arco-typography\\\\\">Left\n        <!---->\n        <!--v-if-->\n        <!--v-if-->\n        <!--v-if-->\n      </div>\n    </div>\n    <div class=\\\\\"arco-split-trigger arco-split-trigger-vertical\\\\\">\n      <!-- @slot 自定义内容 -->\n      <div class=\\\\\"arco-split-trigger-icon-wrapper\\\\\">\n        <!-- @slot 自定义 icon --><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-drag-dot-vertical arco-split-trigger-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n          <path d=\\\\\"M17 8h2v2h-2V8ZM17 23h2v2h-2v-2ZM17 38h2v2h-2v-2ZM29 8h2v2h-2V8ZM29 23h2v2h-2v-2ZM29 38h2v2h-2v-2Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n          <path d=\\\\\"M17 8h2v2h-2V8ZM17 23h2v2h-2v-2ZM17 38h2v2h-2v-2ZM29 8h2v2h-2V8ZM29 23h2v2h-2v-2ZM29 38h2v2h-2v-2Z\\\\\"></path>\n        </svg>\n      </div>\n    </div>\n    <div class=\\\\\"arco-split-pane arco-split-pane-second\\\\\">\n      <div>\n        <div class=\\\\\"arco-split arco-split-vertical\\\\\" style=\\\\\"height: 200px;\\\\\">\n          <div class=\\\\\"arco-split-pane arco-split-pane-first\\\\\" style=\\\\\"flex: 0 0 calc(50% - 0px);\\\\\">\n            <div class=\\\\\"arco-typography\\\\\">Top\n              <!---->\n              <!--v-if-->\n              <!--v-if-->\n              <!--v-if-->\n            </div>\n          </div>\n          <div class=\\\\\"arco-split-trigger arco-split-trigger-horizontal\\\\\">\n            <!-- @slot 自定义内容 -->\n            <div class=\\\\\"arco-split-trigger-icon-wrapper\\\\\">\n              <!-- @slot 自定义 icon --><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-drag-dot arco-split-trigger-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n                <path d=\\\\\"M40 17v2h-2v-2h2ZM25 17v2h-2v-2h2ZM10 17v2H8v-2h2ZM40 29v2h-2v-2h2ZM25 29v2h-2v-2h2ZM10 29v2H8v-2h2Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n                <path d=\\\\\"M40 17v2h-2v-2h2ZM25 17v2h-2v-2h2ZM10 17v2H8v-2h2ZM40 29v2h-2v-2h2ZM25 29v2h-2v-2h2ZM10 29v2H8v-2h2Z\\\\\"></path>\n              </svg>\n            </div>\n          </div>\n          <div class=\\\\\"arco-split-pane arco-split-pane-second\\\\\">\n            <div class=\\\\\"arco-typography\\\\\">Bottom\n              <!---->\n              <!--v-if-->\n              <!--v-if-->\n              <!--v-if-->\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\"\n`;\n"
  },
  {
    "path": "packages/web-vue/components/split/__test__/demo.test.ts",
    "content": "import demoTest from '../../../scripts/demo-test';\n\ndemoTest('split');\n"
  },
  {
    "path": "packages/web-vue/components/split/index.ts",
    "content": "import { App } from 'vue';\nimport type { ArcoOptions } from '../_utils/types';\nimport { setGlobalConfig, getComponentPrefix } from '../_utils/global-config';\nimport _Split from './split.vue';\n\nconst Split = Object.assign(_Split, {\n  install: (app: App, options?: ArcoOptions) => {\n    setGlobalConfig(app, options);\n    const componentPrefix = getComponentPrefix(options);\n\n    app.component(componentPrefix + _Split.name, _Split);\n  },\n});\n\nexport type SplitInstance = InstanceType<typeof _Split>;\n\nexport default Split;\n"
  },
  {
    "path": "packages/web-vue/components/split/interface.ts",
    "content": "export interface SplitProps {\n  component: string;\n  direction: 'horizontal' | 'vertical';\n  size: number | string | undefined;\n  defaultSize: number | string;\n  min: number | string | undefined;\n  max: number | string | undefined;\n  disabled: boolean;\n}\n"
  },
  {
    "path": "packages/web-vue/components/split/split.vue",
    "content": "<template>\n  <component :is=\"component\" ref=\"wrapperRef\" :class=\"classNames\">\n    <div\n      :class=\"[`${prefixCls}-pane`, `${prefixCls}-pane-first`]\"\n      :style=\"firstPaneStyles\"\n    >\n      <slot name=\"first\" />\n    </div>\n    <ResizeTrigger\n      v-if=\"!disabled\"\n      :prefix-cls=\"`${prefixCls}-trigger`\"\n      :direction=\"isHorizontal ? 'vertical' : 'horizontal'\"\n      @mousedown=\"onMoveStart\"\n      @resize=\"onTriggerResize\"\n    >\n      <template #default>\n        <slot name=\"resize-trigger\" />\n      </template>\n      <template #icon>\n        <slot name=\"resize-trigger-icon\" />\n      </template>\n    </ResizeTrigger>\n    <div :class=\"[`${prefixCls}-pane`, `${prefixCls}-pane-second`]\">\n      <slot name=\"second\" />\n    </div>\n  </component>\n</template>\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  PropType,\n  reactive,\n  ref,\n  toRefs,\n  onMounted,\n  nextTick,\n} from 'vue';\nimport ResizeTrigger from '../_components/resize-trigger.vue';\nimport useMergeState from '../_hooks/use-merge-state';\nimport { getPrefixCls } from '../_utils/global-config';\nimport { off, on } from '../_utils/dom';\nimport { isNumber, isString } from '../_utils/is';\nimport { SplitProps } from './interface';\n\nfunction getSizeConfig(size: number | string) {\n  const numberSize = isString(size) ? parseFloat(size) : size;\n  let unit = '';\n\n  if (isNumber(size) || String(numberSize) === size) {\n    unit = numberSize > 1 ? 'px' : '%';\n  } else {\n    unit = 'px';\n  }\n\n  return {\n    size: numberSize,\n    unit,\n    isPx: unit === 'px',\n  };\n}\n\nfunction getPxSize({\n  size,\n  defaultSize,\n  containerSize,\n}: {\n  size: number | string | undefined;\n  defaultSize?: string;\n  containerSize: number;\n}) {\n  const config = getSizeConfig(size ?? defaultSize);\n  if (config.isPx) {\n    return config.size;\n  }\n  return config.size * containerSize;\n}\n\nfunction px2percent(numerator: number | string, denominator: number | string) {\n  return parseFloat(numerator as string) / parseFloat(denominator as string);\n}\n\nexport default defineComponent({\n  name: 'Split',\n  components: {\n    ResizeTrigger,\n  },\n  props: {\n    /**\n     * @zh 分割框的 html 标签\n     * @en The html tag of the split box\n     */\n    component: {\n      type: String,\n      default: 'div',\n    },\n    /**\n     * @zh 分割的方向\n     * @en Direction of division\n     */\n    direction: {\n      type: String as PropType<'horizontal' | 'vertical'>,\n      default: 'horizontal',\n    },\n    /**\n     * @zh 分割的大小，可以是 0~1 代表百分比，或具体数值的像素，如 300px\n     * @en The size of the segmentation, it can be 0~1 representing a percentage, or a specific number of pixels, such as 300px\n     * @vModel\n     */\n    size: {\n      type: [Number, String],\n      default: undefined,\n    },\n    /**\n     * @zh 默认分割的大小，可以是 0~1 代表百分比，或具体数值的像素，如 300px\n     * @en Default split size, it can be 0~1 representing a percentage, or a specific number of pixels, such as 300px\n     */\n    defaultSize: {\n      type: [Number, String],\n      default: 0.5,\n    },\n    /**\n     * @zh 最小阈值，可以是 0~1 代表百分比，或具体数值的像素，如 300px\n     * @en Minimum threshold, it can be 0~1 representing a percentage, or a specific number of pixels, such as 300px\n     */\n    min: {\n      type: [Number, String],\n    },\n    /**\n     * @zh 最大阈值，可以是 0~1 代表百分比，或具体数值的像素，如 300px\n     * @en Maximum threshold, it can be 0~1 representing a percentage, or a specific number of pixels, such as 300px\n     * */\n    max: {\n      type: [Number, String],\n    },\n    /**\n     * @zh 是否禁用\n     * @en Whether to disable\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n  },\n  emits: {\n    /**\n     * @zh 开始拖拽之前触发\n     * @en Triggered before dragging\n     * */\n    'moveStart': (ev: MouseEvent) => true,\n    /**\n     * @zh 拖拽时触发\n     * @en Triggered when dragging\n     */\n    'moving': (ev: MouseEvent) => true,\n    /**\n     * @zh 拖拽结束之后触发\n     * @en Triggered after dragging ends\n     */\n    'moveEnd': (ev: MouseEvent) => true,\n    'update:size': (size: number | string) => true,\n  },\n  /**\n   * @zh 第一个面板的内容\n   * @en The contents of the first panel\n   * @slot first\n   */\n  /**\n   * @zh 第二个面板的内容\n   * @en The contents of the second panel\n   * @slot second\n   */\n  /**\n   * @zh 伸缩杆的内容\n   * @en The contents of the resize pole\n   * @slot resize-trigger\n   */\n  /**\n   * @zh 伸缩杆的图标\n   * @en Resize pole icon\n   * @slot resize-trigger-icon\n   */\n  setup(props: SplitProps, { emit }) {\n    const { direction, size: propSize, defaultSize, min, max } = toRefs(props);\n    const triggerSize = ref(0);\n    const wrapperRef = ref<HTMLDivElement>();\n    const prefixCls = getPrefixCls('split');\n    const [size, setSize] = useMergeState(\n      defaultSize.value,\n      reactive({\n        value: propSize,\n      })\n    );\n    const sizeConfig = computed(() => getSizeConfig(size.value));\n    const isHorizontal = computed(() => direction.value === 'horizontal');\n    const classNames = computed(() => [\n      prefixCls,\n      {\n        [`${prefixCls}-horizontal`]: isHorizontal.value,\n        [`${prefixCls}-vertical`]: !isHorizontal.value,\n      },\n    ]);\n    const firstPaneStyles = computed(() => {\n      const { size: numberSize, unit, isPx } = sizeConfig.value;\n      const baseVal = isPx ? numberSize : numberSize * 100;\n      return {\n        flex: `0 0 calc(${baseVal}${unit} - ${triggerSize.value / 2}px)`,\n      };\n    });\n    const record: {\n      startPageX: number;\n      startPageY: number;\n      startContainerSize: number;\n      startSize: number | string;\n    } = {\n      startPageX: 0,\n      startPageY: 0,\n      startContainerSize: 0,\n      startSize: 0,\n    };\n\n    async function getContainerSize() {\n      const getSize = () => {\n        return isHorizontal.value\n          ? wrapperRef.value?.clientWidth\n          : wrapperRef.value?.clientHeight || 0;\n      };\n\n      if (!wrapperRef.value || getSize()) {\n        await nextTick();\n      }\n\n      return getSize();\n    }\n\n    function updateSize(newPxSize: number, containerSize: number) {\n      if (!containerSize) {\n        return;\n      }\n\n      const newSize = sizeConfig.value.isPx\n        ? `${newPxSize}px`\n        : px2percent(newPxSize, containerSize);\n\n      if (size.value === newSize) return;\n      setSize(newSize);\n      emit('update:size', newSize);\n    }\n\n    function getLegalPxSize(size: number | string, containerSize: number) {\n      const pxSize = getPxSize({\n        size,\n        containerSize,\n      });\n      const minPxSize = getPxSize({\n        size: min.value,\n        defaultSize: '0px',\n        containerSize,\n      });\n      const maxPxSize = getPxSize({\n        size: max.value,\n        defaultSize: `${containerSize}px`,\n        containerSize,\n      });\n\n      let legalPxSize = pxSize;\n      legalPxSize = Math.max(legalPxSize, minPxSize);\n      legalPxSize = Math.min(legalPxSize, maxPxSize);\n\n      return legalPxSize;\n    }\n\n    function getNewPxSize({\n      startContainerSize,\n      startSize,\n      startPosition,\n      endPosition,\n    }: {\n      startContainerSize: number;\n      startSize: number | string;\n      startPosition: number;\n      endPosition: number;\n    }) {\n      const startPxSize = getPxSize({\n        size: startSize,\n        containerSize: startContainerSize,\n      });\n      return getLegalPxSize(\n        `${startPxSize + (endPosition - startPosition)}px`,\n        startContainerSize\n      );\n    }\n\n    // 移动中，更新 firstPane 的占位大小\n    function onMoving(e: MouseEvent) {\n      emit('moving', e);\n\n      const newPxSize = isHorizontal.value\n        ? getNewPxSize({\n            startContainerSize: record.startContainerSize,\n            startSize: record.startSize,\n            startPosition: record.startPageX,\n            endPosition: e.pageX,\n          })\n        : getNewPxSize({\n            startContainerSize: record.startContainerSize,\n            startSize: record.startSize,\n            startPosition: record.startPageY,\n            endPosition: e.pageY,\n          });\n\n      updateSize(newPxSize, record.startContainerSize);\n    }\n\n    // 移动结束，解除事件绑定\n    function onMovingEnd(e: MouseEvent) {\n      off(window, 'mousemove', onMoving);\n      off(window, 'mouseup', onMovingEnd);\n      off(window, 'contextmenu', onMovingEnd);\n\n      document.body.style.cursor = 'default';\n      emit('moveEnd', e);\n    }\n\n    // 移动开始，记录初始值，绑定移动事件\n    async function onMoveStart(e: MouseEvent) {\n      emit('moveStart', e);\n\n      record.startPageX = e.pageX;\n      record.startPageY = e.pageY;\n      record.startContainerSize = await getContainerSize();\n      record.startSize = size.value;\n\n      on(window, 'mousemove', onMoving);\n      on(window, 'mouseup', onMovingEnd);\n      on(window, 'contextmenu', onMovingEnd);\n\n      document.body.style.cursor = isHorizontal.value\n        ? 'col-resize'\n        : 'row-resize';\n    }\n\n    function onTriggerResize(entry: ResizeObserverEntry) {\n      const { width, height } = entry.contentRect;\n      triggerSize.value = isHorizontal.value ? width : height;\n    }\n\n    onMounted(async () => {\n      const containerSize = await getContainerSize();\n      const fixedPxSize = getLegalPxSize(size.value, containerSize);\n      updateSize(fixedPxSize, containerSize);\n    });\n\n    return {\n      prefixCls,\n      classNames,\n      isHorizontal,\n      wrapperRef,\n      onMoveStart,\n      onTriggerResize,\n      firstPaneStyles,\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/split/style/index.less",
    "content": "@import './token.less';\n\n@split-prefix-cls: ~'@{prefix}-split';\n@split-trigger-prefix-cls: ~'@{split-prefix-cls}-trigger';\n\n.@{split-prefix-cls} {\n  display: flex;\n\n  &-pane {\n    overflow: auto;\n  }\n\n  &-pane-second {\n    flex: 1;\n  }\n\n  &-horizontal {\n    flex-direction: row;\n  }\n\n  &-vertical {\n    flex-direction: column;\n  }\n}\n\n// 伸缩触发杆\n.@{split-trigger-prefix-cls} {\n  &-icon-wrapper {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: 100%;\n    color: @split-trigger-color-icon;\n    font-size: @split-trigger-font-size-icon;\n    line-height: 1;\n    background-color: @split-trigger-color-background;\n  }\n\n  &-icon {\n    display: inline-block;\n    margin: -(@resizeBox-trigger-font-size-icon / 4);\n  }\n\n  &-vertical {\n    height: 100%;\n    cursor: col-resize;\n  }\n\n  &-horizontal {\n    width: 100%;\n    cursor: row-resize;\n  }\n}\n"
  },
  {
    "path": "packages/web-vue/components/split/style/index.ts",
    "content": "import '../../style/index.less';\nimport './index.less';\n"
  },
  {
    "path": "packages/web-vue/components/split/style/token.less",
    "content": "@import '../../style/theme/index.less';\n@import '../../resize-box/style/token.less';\n\n@split-trigger-color-background: var(~'@{arco-cssvars-prefix}-color-neutral-3');\n@split-trigger-size-icon-wrapper: 6px;\n@split-trigger-font-size-icon: 12px;\n@split-trigger-color-icon: var(~'@{arco-cssvars-prefix}-color-text-1');\n"
  },
  {
    "path": "packages/web-vue/components/statistic/CHANGELOG.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.49.2\n\n`2023-07-28`\n\n### 🐛 BugFix\n\n- Fix the problem that `value-style` cannot modify the font size in digital content ([#2600](https://github.com/arco-design/arco-design-vue/pull/2600))\n\n\n## 2.32.0\n\n`2022-06-24`\n\n### 🆕 Feature\n\n- support custom value style prop ([#1320](https://github.com/arco-design/arco-design-vue/pull/1320))\n\n## 2.28.0\n\n`2022-05-20`\n\n### 🆕 Feature\n\n- Add the `placeholder` attribute to display when there is no value ([#1179](https://github.com/arco-design/arco-design-vue/pull/1179))\n\n\n## 2.14.2\n\n`2022-01-10`\n\n### 🐛 BugFix\n\n- fix dynamic assignment issue ([#534](https://github.com/arco-design/arco-design-vue/pull/534))\n\n\n## 2.14.0\n\n`2022-01-07`\n\n### 🆕 Feature\n\n- value supports responsive modification ([#514](https://github.com/arco-design/arco-design-vue/pull/514))\n\n\n## 2.10.0\n\n`2021-12-10`\n\n### 🐛 BugFix\n\n- Fix the problem that it does not take effect when precision is 0 ([#357](https://github.com/arco-design/arco-design-vue/pull/357))\n\n"
  },
  {
    "path": "packages/web-vue/components/statistic/CHANGELOG.zh-CN.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.49.2\n\n`2023-07-28`\n\n### 🐛 问题修复\n\n- 修复 `value-style` 在数字内容时不能修改字体大小的问题 ([#2600](https://github.com/arco-design/arco-design-vue/pull/2600))\n\n\n## 2.32.0\n\n`2022-06-24`\n\n### 🆕 新增功能\n\n- 支持自定义显示值样式 ([#1320](https://github.com/arco-design/arco-design-vue/pull/1320))\n\n## 2.28.0\n\n`2022-05-20`\n\n### 🆕 新增功能\n\n- 增加 `placeholder` 属性，用于无值时显示 ([#1179](https://github.com/arco-design/arco-design-vue/pull/1179))\n\n\n## 2.14.2\n\n`2022-01-10`\n\n### 🐛 问题修复\n\n- 修复动态赋值问题 ([#534](https://github.com/arco-design/arco-design-vue/pull/534))\n\n\n## 2.14.0\n\n`2022-01-07`\n\n### 🆕 新增功能\n\n- value 值支持响应式修改 ([#514](https://github.com/arco-design/arco-design-vue/pull/514))\n\n\n## 2.10.0\n\n`2021-12-10`\n\n### 🐛 问题修复\n\n- 修复 precision 为 0 时没有生效的问题 ([#357](https://github.com/arco-design/arco-design-vue/pull/357))\n\n"
  },
  {
    "path": "packages/web-vue/components/statistic/README.en-US.md",
    "content": "```yaml\nmeta:\n  type: Component\n  category: Data Display\ntitle: Statistic\ndescription: Highlight a certain number or group of numbers and statistical data with descriptions.\n```\n\n*Auto translate by google.*\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/prefix.md\n\n@import ./__demo__/animation.md\n\n@import ./__demo__/countdown.md\n\n## API\n\n\n### `<statistic>` Props\n\n|Attribute|Description|Type|Default|version|\n|---|---|---|:---:|:---|\n|title|Title of the numerical display|`string`|`-`||\n|value|Numerical display value|`number \\| Date`|`-`||\n|format|Format of numerical display [dayjs](https://day.js.org/docs/en/display/format) (used in date mode)|`string`|`'HH:mm:ss'`||\n|extra|Additional display content|`string`|`-`||\n|start|Whether to start animation|`boolean`|`true`||\n|precision|Decimal reserved digits (used in digital mode)|`number`|`0`||\n|separator|Carry separator (used in number mode)|`string`|`-`||\n|show-group-separator|Whether to display the carry separator (used in number mode)|`boolean`|`false`||\n|animation|Whether to turn on animation|`boolean`|`false`||\n|animation-duration|Animation's duration time|`number`|`2000`||\n|value-from|The starting value of the animation|`number`|`-`||\n|placeholder|Prompt text (displayed when value is undefined )|`string`|`-`|2.28.0|\n|value-style|Custom value style|`CSSProperties`|`-`|2.32.0|\n### `<statistic>` Slots\n\n|Slot Name|Description|Parameters|\n|---|---|---|\n|title|Title|-|\n|prefix|Prefix|-|\n|suffix|Suffix|-|\n|extra|Extra content|-|\n\n\n\n\n### `<countdown>` Props\n\n|Attribute|Description|Type|Default|version|\n|---|---|---|:---:|:---|\n|title|Countdown title|`string`|`-`||\n|value|Countdown value|`number`|`() => Date.now() + 300000`||\n|now|Used to correct the incorrect display of the initialization time|`number`|`() => Date.now()`||\n|format|Countdown display format [dayjs](https://day.js.org/docs/en/display/format)|`string`|`'HH:mm:ss'`||\n|start|Whether to start the countdown|`boolean`|`true`||\n|value-style|Custom value style|`CSSProperties`|`-`|2.32.0|\n### `<countdown>` Events\n\n|Event Name|Description|Parameters|\n|---|---|---|\n|finish|Callback at the end of the countdown|-|\n### `<countdown>` Slots\n\n|Slot Name|Description|Parameters|\n|---|---|---|\n|title|Title|-|\n\n\n"
  },
  {
    "path": "packages/web-vue/components/statistic/README.zh-CN.md",
    "content": "```yaml\nmeta:\n  type: 组件\n  category: 数据展示\ntitle: 数值显示 Statistic\ndescription: 突出展示某个或某组数字、带描述的统计类数据。\n```\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/prefix.md\n\n@import ./__demo__/animation.md\n\n@import ./__demo__/countdown.md\n\n## API\n\n\n### `<statistic>` Props\n\n|参数名|描述|类型|默认值|版本|\n|---|---|---|:---:|:---|\n|title|数值显示的标题|`string`|`-`||\n|value|数值显示的值|`number \\| Date`|`-`||\n|format|数值显示的格式 [dayjs](https://day.js.org/docs/en/display/format)（日期模式使用）|`string`|`'HH:mm:ss'`||\n|extra|额外的显示内容|`string`|`-`||\n|start|是否开始动画|`boolean`|`true`||\n|precision|小数保留位数（数字模式使用）|`number`|`0`||\n|separator|进位分隔符（数字模式使用）|`string`|`-`||\n|show-group-separator|是否展示进位分隔符（数字模式使用）|`boolean`|`false`||\n|animation|是否开启动画|`boolean`|`false`||\n|animation-duration|动画的过度时间|`number`|`2000`||\n|value-from|动画的起始值|`number`|`-`||\n|placeholder|提示文字（当 value 为 undefined 时显示）|`string`|`-`|2.28.0|\n|value-style|自定义显示值的样式|`CSSProperties`|`-`|2.32.0|\n### `<statistic>` Slots\n\n|插槽名|描述|参数|\n|---|:---:|---|\n|title|标题|-|\n|prefix|前缀|-|\n|suffix|后缀|-|\n|extra|额外内容|-|\n\n\n\n\n### `<countdown>` Props\n\n|参数名|描述|类型|默认值|版本|\n|---|---|---|:---:|:---|\n|title|倒计时的标题|`string`|`-`||\n|value|倒计时的值|`number`|`() => Date.now() + 300000`||\n|now|用于修正初始化时间显示不正确|`number`|`() => Date.now()`||\n|format|倒计时的展示格式 [dayjs](https://day.js.org/docs/en/display/format)|`string`|`'HH:mm:ss'`||\n|start|是否开始倒计时|`boolean`|`true`||\n|value-style|自定义显示值的样式|`CSSProperties`|`-`|2.32.0|\n### `<countdown>` Events\n\n|事件名|描述|参数|\n|---|---|---|\n|finish|倒计时完成后触发的回调|-|\n### `<countdown>` Slots\n\n|插槽名|描述|参数|\n|---|:---:|---|\n|title|标题|-|\n\n\n"
  },
  {
    "path": "packages/web-vue/components/statistic/TEMPLATE.md",
    "content": "## zh-CN\n```yaml\nmeta:\n  type: 组件\n  category: 数据展示\ntitle: 数值显示 Statistic\ndescription: 突出展示某个或某组数字、带描述的统计类数据。\n```\n---\n## en-US\n```yaml\nmeta:\n  type: Component\n  category: Data Display\ntitle: Statistic\ndescription: Highlight a certain number or group of numbers and statistical data with descriptions.\n```\n---\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/prefix.md\n\n@import ./__demo__/animation.md\n\n@import ./__demo__/countdown.md\n\n## API\n\n%%API(statistic.vue)%%\n\n%%API(countdown.vue)%%\n"
  },
  {
    "path": "packages/web-vue/components/statistic/__demo__/animation.md",
    "content": "```yaml\ntitle:\n  zh-CN: 数值动画\n  en-US: Animation\n```\n\n## zh-CN\n\n通过 `animation` 可以开启数值动画。\n\n---\n\n## en-US\n\nNumerical animation can be turned on through `animation`.\n\n---\n\n```vue\n<template>\n  <a-statistic title=\"User Growth Rate\" :value=\"50.52\" :precision=\"2\" :value-from=\"0\" :start=\"start\" animation>\n    <template #prefix>\n      <icon-arrow-rise />\n    </template>\n    <template #suffix>%</template>\n  </a-statistic>\n  <a-button @click=\"start=true\">Start</a-button>\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n  setup() {\n    const start = ref(false);\n\n    return {\n      start\n    }\n  },\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/statistic/__demo__/basic.md",
    "content": "```yaml\ntitle:\n  zh-CN: 基本用法\n  en-US: Basic Usage\n```\n\n## zh-CN\n\n当需要突出某个或某组数字或展示带描述的统计类数据时使用。\n\n---\n\n## en-US\n\nUse when you need to highlight a certain number or group of numbers or display statistical data with descriptions.\n\n---\n\n```vue\n<template>\n  <a-space size=\"large\">\n    <a-statistic title=\"Downloads\" :value=\"125670\" show-group-separator />\n    <a-statistic extra=\"Comments\" :value=\"40509\" :precision=\"2\" />\n  </a-space>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/statistic/__demo__/countdown.md",
    "content": "```yaml\ntitle:\n  zh-CN: 倒计时组件\n  en-US: Countdown\n```\n\n## zh-CN\n\n倒计时组件 `countdown` 的基本使用方法。\n\n---\n\n## en-US\n\nThe basic usage of the countdown component `countdown`.\n\n---\n\n```vue\n<template>\n  <a-row>\n    <a-col :flex=\"1\">\n      <a-countdown\n        title=\"Countdown\"\n        :value=\"now + 1000 * 60 * 60 * 2\"\n        :now=\"now\"\n      />\n    </a-col>\n    <a-col :flex=\"1\">\n      <a-countdown\n        title=\"Milliseconds\"\n        :value=\"now + 1000 * 60 * 60 * 2\"\n        :now=\"now\"\n        format=\"HH:mm:ss.SSS\"\n      />\n    </a-col>\n    <a-col :flex=\"1\">\n      <a-countdown\n        title=\"Days\"\n        :value=\"now + 1000 * 60 * 60 * 24 * 4\"\n        :now=\"now\"\n        format=\"D 天 H 时 m 分 s 秒\"\n      />\n    </a-col>\n  </a-row>\n  <a-space direction=\"vertical\" style=\"margin-top: 10px\">\n    <a-countdown\n      title=\"Trigger on finish\"\n      :value=\"Date.now() + 5 * 1000\"\n      format=\"mm:ss.SSS\"\n      :now=\"Date.now()\"\n      :start=\"start\"\n      @finish=\"handleFinish\"\n    />\n    <a-button @click=\"start = true\" type=\"primary\">Start</a-button>\n  </a-space>\n</template>\n\n<script>\nimport { ref } from 'vue';\nimport { Message } from '@arco-design/web-vue';\n\nexport default {\n  setup() {\n    const now = Date.now();\n    const start = ref(false);\n\n    const handleFinish = () => {\n      Message.info('Finish');\n    };\n\n    return {\n      now,\n      start,\n      handleFinish,\n    };\n  },\n};\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/statistic/__demo__/prefix.md",
    "content": "```yaml\ntitle:\n  zh-CN: 自定义前缀&后缀\n  en-US: Custom prefix & suffix\n```\n\n## zh-CN\n\n通过 `prefix` 和 `suffix` 插槽可以添加前后缀。\n\n---\n\n## en-US\n\nThe prefix and suffix can be added through the `prefix` and `suffix` slots.\n\n---\n\n```vue\n<template>\n  <a-space size=\"large\">\n    <a-statistic title=\"New Users\" :value=\"125670\" show-group-separator >\n      <template #suffix>\n        <icon-arrow-rise />\n      </template>\n    </a-statistic>\n    <a-statistic title=\"User Growth Rate\" :value=\"50.52\" :precision=\"2\" :value-style=\"{ color: '#0fbf60' }\">\n      <template #prefix>\n        <icon-arrow-rise />\n      </template>\n      <template #suffix>%</template>\n    </a-statistic>\n  </a-space>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/statistic/__test__/__snapshots__/demo.test.ts.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`<statistic> demo: render [animation] correctly 1`] = `\n\"<div class=\\\\\"arco-statistic\\\\\">\n  <div class=\\\\\"arco-statistic-title\\\\\">User Growth Rate</div>\n  <div class=\\\\\"arco-statistic-content\\\\\">\n    <div class=\\\\\"arco-statistic-value\\\\\"><span class=\\\\\"arco-statistic-prefix\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-arrow-rise\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M23.992 6.01a.01.01 0 0 1 .016 0l9.978 11.974a.01.01 0 0 1-.007.016H14.02a.01.01 0 0 1-.007-.016l9.978-11.975Z\\\\\"></path><path d=\\\\\"m24 6 10 12H14L24 6Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path><path d=\\\\\"M26 42h-4V16h4z\\\\\"></path><path fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\" d=\\\\\"M26 42h-4V16h4z\\\\\"></path></svg></span><span class=\\\\\"arco-statistic-value-integer\\\\\">0</span><span class=\\\\\"arco-statistic-value-decimal\\\\\"> .00</span><span class=\\\\\"arco-statistic-suffix\\\\\">%</span></div>\n    <!--v-if-->\n  </div>\n</div>\n<button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n  <!--v-if-->Start\n</button>\"\n`;\n\nexports[`<statistic> demo: render [basic] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 24px; row-gap: 24px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-statistic\\\\\">\n      <div class=\\\\\"arco-statistic-title\\\\\">Downloads</div>\n      <div class=\\\\\"arco-statistic-content\\\\\">\n        <div class=\\\\\"arco-statistic-value\\\\\">\n          <!--v-if--><span class=\\\\\"arco-statistic-value-integer\\\\\">125,670</span>\n          <!--v-if-->\n          <!--v-if-->\n        </div>\n        <!--v-if-->\n      </div>\n    </div>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-statistic\\\\\">\n      <!--v-if-->\n      <div class=\\\\\"arco-statistic-content\\\\\">\n        <div class=\\\\\"arco-statistic-value\\\\\">\n          <!--v-if--><span class=\\\\\"arco-statistic-value-integer\\\\\">40509</span><span class=\\\\\"arco-statistic-value-decimal\\\\\"> .00</span>\n          <!--v-if-->\n        </div>\n        <div class=\\\\\"arco-statistic-extra\\\\\">Comments</div>\n      </div>\n    </div>\n  </div>\n</div>\"\n`;\n\nexports[`<statistic> demo: render [countdown] correctly 1`] = `\n\"<div class=\\\\\"arco-row arco-row-align-start arco-row-justify-start\\\\\">\n  <div class=\\\\\"arco-col\\\\\" style=\\\\\"flex: 1;\\\\\">\n    <div class=\\\\\"arco-statistic arco-statistic-countdown\\\\\">\n      <div class=\\\\\"arco-statistic-title\\\\\">Countdown</div>\n      <div class=\\\\\"arco-statistic-content\\\\\">\n        <div class=\\\\\"arco-statistic-value\\\\\">02:00:00</div>\n      </div>\n    </div>\n  </div>\n  <div class=\\\\\"arco-col\\\\\" style=\\\\\"flex: 1;\\\\\">\n    <div class=\\\\\"arco-statistic arco-statistic-countdown\\\\\">\n      <div class=\\\\\"arco-statistic-title\\\\\">Milliseconds</div>\n      <div class=\\\\\"arco-statistic-content\\\\\">\n        <div class=\\\\\"arco-statistic-value\\\\\">02:00:00.000</div>\n      </div>\n    </div>\n  </div>\n  <div class=\\\\\"arco-col\\\\\" style=\\\\\"flex: 1;\\\\\">\n    <div class=\\\\\"arco-statistic arco-statistic-countdown\\\\\">\n      <div class=\\\\\"arco-statistic-title\\\\\">Days</div>\n      <div class=\\\\\"arco-statistic-content\\\\\">\n        <div class=\\\\\"arco-statistic-value\\\\\">4 天 0 时 0 分 0 秒</div>\n      </div>\n    </div>\n  </div>\n</div>\n<div class=\\\\\"arco-space arco-space-vertical\\\\\" style=\\\\\"column-gap: 8px; row-gap: 8px; margin-top: 10px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-statistic arco-statistic-countdown\\\\\">\n      <div class=\\\\\"arco-statistic-title\\\\\">Trigger on finish</div>\n      <div class=\\\\\"arco-statistic-content\\\\\">\n        <div class=\\\\\"arco-statistic-value\\\\\">00:05.000</div>\n      </div>\n    </div>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n      <!--v-if-->Start\n    </button></div>\n</div>\"\n`;\n\nexports[`<statistic> demo: render [prefix] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 24px; row-gap: 24px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-statistic\\\\\">\n      <div class=\\\\\"arco-statistic-title\\\\\">New Users</div>\n      <div class=\\\\\"arco-statistic-content\\\\\">\n        <div class=\\\\\"arco-statistic-value\\\\\">\n          <!--v-if--><span class=\\\\\"arco-statistic-value-integer\\\\\">125,670</span>\n          <!--v-if--><span class=\\\\\"arco-statistic-suffix\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-arrow-rise\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M23.992 6.01a.01.01 0 0 1 .016 0l9.978 11.974a.01.01 0 0 1-.007.016H14.02a.01.01 0 0 1-.007-.016l9.978-11.975Z\\\\\"></path><path d=\\\\\"m24 6 10 12H14L24 6Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path><path d=\\\\\"M26 42h-4V16h4z\\\\\"></path><path fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\" d=\\\\\"M26 42h-4V16h4z\\\\\"></path></svg></span>\n        </div>\n        <!--v-if-->\n      </div>\n    </div>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-statistic\\\\\">\n      <div class=\\\\\"arco-statistic-title\\\\\">User Growth Rate</div>\n      <div class=\\\\\"arco-statistic-content\\\\\">\n        <div class=\\\\\"arco-statistic-value\\\\\" style=\\\\\"color: rgb(15, 191, 96);\\\\\"><span class=\\\\\"arco-statistic-prefix\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-arrow-rise\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M23.992 6.01a.01.01 0 0 1 .016 0l9.978 11.974a.01.01 0 0 1-.007.016H14.02a.01.01 0 0 1-.007-.016l9.978-11.975Z\\\\\"></path><path d=\\\\\"m24 6 10 12H14L24 6Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path><path d=\\\\\"M26 42h-4V16h4z\\\\\"></path><path fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\" d=\\\\\"M26 42h-4V16h4z\\\\\"></path></svg></span><span class=\\\\\"arco-statistic-value-integer\\\\\">50</span><span class=\\\\\"arco-statistic-value-decimal\\\\\"> .52</span><span class=\\\\\"arco-statistic-suffix\\\\\">%</span></div>\n        <!--v-if-->\n      </div>\n    </div>\n  </div>\n</div>\"\n`;\n"
  },
  {
    "path": "packages/web-vue/components/statistic/__test__/demo.test.ts",
    "content": "import demoTest from '../../../scripts/demo-test';\n\ndemoTest('statistic');\n"
  },
  {
    "path": "packages/web-vue/components/statistic/countdown.vue",
    "content": "<template>\n  <div :class=\"[`${prefixCls}`, `${prefixCls}-countdown`]\">\n    <div v-if=\"title || $slots.title\" :class=\"`${prefixCls}-title`\">\n      <slot name=\"title\">\n        {{ title }}\n      </slot>\n    </div>\n    <div :class=\"`${prefixCls}-content`\">\n      <div :class=\"`${prefixCls}-value`\" :style=\"valueStyle\">\n        {{ displayValue }}\n      </div>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport {\n  CSSProperties,\n  defineComponent,\n  onBeforeUnmount,\n  onMounted,\n  PropType,\n  ref,\n  toRefs,\n  watch,\n} from 'vue';\nimport dayjs, { Dayjs } from 'dayjs';\nimport { getPrefixCls } from '../_utils/global-config';\nimport { getDateString } from './utils';\n\nexport default defineComponent({\n  name: 'Countdown',\n  props: {\n    /**\n     * @zh 倒计时的标题\n     * @en Countdown title\n     */\n    title: String,\n    /**\n     * @zh 倒计时的值\n     * @en Countdown value\n     */\n    value: {\n      type: Number,\n      default: () => Date.now() + 300000,\n    },\n    /**\n     * @zh 用于修正初始化时间显示不正确\n     * @en Used to correct the incorrect display of the initialization time\n     */\n    now: {\n      type: Number,\n      default: () => Date.now(),\n    },\n    /**\n     * @zh 倒计时的展示格式 [dayjs](https://day.js.org/docs/en/display/format)\n     * @en Countdown display format [dayjs](https://day.js.org/docs/en/display/format)\n     */\n    format: {\n      type: String,\n      default: 'HH:mm:ss',\n    },\n    /**\n     * @zh 是否开始倒计时\n     * @en Whether to start the countdown\n     */\n    start: {\n      type: Boolean,\n      default: true,\n    },\n    /**\n     * @zh 自定义显示值的样式\n     * @en Custom value style\n     * @version 2.32.0\n     */\n    valueStyle: {\n      type: Object as PropType<CSSProperties>,\n    },\n  },\n  emits: {\n    /**\n     * @zh 倒计时完成后触发的回调\n     * @en Callback at the end of the countdown\n     */\n    finish: () => true,\n  },\n  /**\n   * @zh 标题\n   * @en Title\n   * @slot title\n   */\n  setup(props, { emit }) {\n    const prefixCls = getPrefixCls('statistic');\n    const { start, value, now, format } = toRefs(props);\n\n    const displayValue = ref(\n      getDateString(\n        Math.max(dayjs(props.value).diff(dayjs(props.now), 'millisecond'), 0),\n        props.format\n      )\n    );\n\n    watch([value, now, format], () => {\n      const _value = getDateString(\n        Math.max(dayjs(props.value).diff(dayjs(props.now), 'millisecond'), 0),\n        props.format\n      );\n      if (_value !== displayValue.value) {\n        displayValue.value = _value;\n      }\n    });\n\n    const timer = ref(0);\n\n    const stopTimer = () => {\n      if (timer.value) {\n        window.clearInterval(timer.value);\n        timer.value = 0;\n      }\n    };\n\n    const startTimer = () => {\n      if (dayjs(props.value).valueOf() < Date.now()) {\n        return;\n      }\n\n      timer.value = window.setInterval(() => {\n        const _value = dayjs(props.value).diff(dayjs(), 'millisecond');\n        if (_value <= 0) {\n          stopTimer();\n          emit('finish');\n        }\n        displayValue.value = getDateString(Math.max(_value, 0), props.format);\n      }, 1000 / 30);\n    };\n\n    onMounted(() => {\n      if (props.start) {\n        startTimer();\n      }\n    });\n\n    onBeforeUnmount(() => {\n      stopTimer();\n    });\n\n    watch(start, (value) => {\n      if (value && !timer.value) {\n        startTimer();\n      }\n    });\n\n    return {\n      prefixCls,\n      displayValue,\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/statistic/index.ts",
    "content": "import type { App } from 'vue';\nimport type { ArcoOptions } from '../_utils/types';\nimport { setGlobalConfig, getComponentPrefix } from '../_utils/global-config';\nimport _Statistic from './statistic.vue';\nimport _Countdown from './countdown.vue';\n\nconst Statistic = Object.assign(_Statistic, {\n  Countdown: _Countdown,\n  install: (app: App, options?: ArcoOptions) => {\n    setGlobalConfig(app, options);\n    const componentPrefix = getComponentPrefix(options);\n\n    app.component(componentPrefix + _Statistic.name, _Statistic);\n    app.component(componentPrefix + _Countdown.name, _Countdown);\n  },\n});\n\nexport type StatisticInstance = InstanceType<typeof _Statistic>;\nexport type CountdownInstance = InstanceType<typeof _Countdown>;\n\nexport { _Countdown as Countdown };\n\nexport default Statistic;\n"
  },
  {
    "path": "packages/web-vue/components/statistic/statistic.vue",
    "content": "<template>\n  <div :class=\"prefixCls\">\n    <div v-if=\"title || $slots.title\" :class=\"`${prefixCls}-title`\">\n      <slot name=\"title\">\n        {{ title }}\n      </slot>\n    </div>\n    <div :class=\"`${prefixCls}-content`\">\n      <div :class=\"`${prefixCls}-value`\" :style=\"valueStyle\">\n        <span v-if=\"showPlaceholder\">{{ placeholder }}</span>\n        <template v-else>\n          <span v-if=\"$slots.prefix\" :class=\"`${prefixCls}-prefix`\">\n            <slot name=\"prefix\" />\n          </span>\n          <template v-if=\"formatValue.isNumber\">\n            <span :class=\"`${prefixCls}-value-integer`\">\n              {{ formatValue.integer }}\n            </span>\n            <span\n              v-if=\"formatValue.decimal\"\n              :class=\"`${prefixCls}-value-decimal`\"\n            >\n              .{{ formatValue.decimal }}\n            </span>\n          </template>\n          <template v-else>\n            {{ formatValue.value }}\n          </template>\n          <span v-if=\"$slots.suffix\" :class=\"`${prefixCls}-suffix`\">\n            <slot name=\"suffix\" />\n          </span>\n        </template>\n      </div>\n      <div v-if=\"extra || $slots.extra\" :class=\"`${prefixCls}-extra`\">\n        <slot name=\"extra\">\n          {{ extra }}\n        </slot>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport {\n  computed,\n  CSSProperties,\n  defineComponent,\n  onMounted,\n  PropType,\n  ref,\n  toRefs,\n  watch,\n} from 'vue';\nimport dayjs from 'dayjs';\n// @ts-ignore\nimport BTween from 'b-tween';\nimport NP from 'number-precision';\nimport { getPrefixCls } from '../_utils/global-config';\nimport { isNumber, isUndefined } from '../_utils/is';\nimport { Data } from '../_utils/types';\n\nexport default defineComponent({\n  name: 'Statistic',\n  props: {\n    /**\n     * @zh 数值显示的标题\n     * @en Title of the numerical display\n     */\n    title: String,\n    /**\n     * @zh 数值显示的值\n     * @en Numerical display value\n     */\n    value: {\n      type: [Number, Object] as PropType<number | Date>,\n    },\n    /**\n     * @zh 数值显示的格式 [dayjs](https://day.js.org/docs/en/display/format)（日期模式使用）\n     * @en Format of numerical display [dayjs](https://day.js.org/docs/en/display/format) (used in date mode)\n     */\n    format: {\n      type: String,\n      default: 'HH:mm:ss',\n    },\n    /**\n     * @zh 额外的显示内容\n     * @en Additional display content\n     */\n    extra: String,\n    /**\n     * @zh 是否开始动画\n     * @en Whether to start animation\n     */\n    start: {\n      type: Boolean,\n      default: true,\n    },\n    /**\n     * @zh 小数保留位数（数字模式使用）\n     * @en Decimal reserved digits (used in digital mode)\n     */\n    precision: {\n      type: Number,\n      default: 0,\n    },\n    /**\n     * @zh 进位分隔符（数字模式使用）\n     * @en Carry separator (used in number mode)\n     */\n    separator: String,\n    /**\n     * @zh 是否展示进位分隔符（数字模式使用）\n     * @en Whether to display the carry separator (used in number mode)\n     */\n    showGroupSeparator: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 是否开启动画\n     * @en Whether to turn on animation\n     */\n    animation: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 动画的过度时间\n     * @en Animation's duration time\n     */\n    animationDuration: {\n      type: Number,\n      default: 2000,\n    },\n    /**\n     * @zh 动画的起始值\n     * @en The starting value of the animation\n     */\n    valueFrom: {\n      type: Number,\n      default: undefined,\n    },\n    /**\n     * @zh 提示文字（当 value 为 undefined 时显示）\n     * @en Prompt text (displayed when value is undefined )\n     * @version 2.28.0\n     */\n    placeholder: {\n      type: String,\n    },\n    /**\n     * @zh 自定义显示值的样式\n     * @en Custom value style\n     * @version 2.32.0\n     */\n    valueStyle: {\n      type: Object as PropType<CSSProperties>,\n    },\n  },\n  /**\n   * @zh 标题\n   * @en Title\n   * @slot title\n   */\n  /**\n   * @zh 额外内容\n   * @en Extra content\n   * @slot extra\n   */\n  /**\n   * @zh 前缀\n   * @en Prefix\n   * @slot prefix\n   */\n  /**\n   * @zh 后缀\n   * @en Suffix\n   * @slot suffix\n   */\n  setup(props) {\n    const prefixCls = getPrefixCls('statistic');\n    const numberValue = computed(() => {\n      if (isNumber(props.value)) {\n        return props.value;\n      }\n      return 0;\n    });\n    const innerValue = ref(props.valueFrom ?? props.value);\n    const tween = ref(null);\n    const { value } = toRefs(props);\n\n    const showPlaceholder = computed(() => isUndefined(props.value));\n\n    const animation = (\n      from: number = props.valueFrom ?? 0,\n      to: number = numberValue.value\n    ) => {\n      if (from !== to) {\n        tween.value = new BTween({\n          from: {\n            value: from,\n          },\n          to: {\n            value: to,\n          },\n          duration: props.animationDuration,\n          easing: 'quartOut',\n          onUpdate: (keys: Data) => {\n            innerValue.value = keys.value;\n          },\n          onFinish: () => {\n            innerValue.value = to;\n          },\n        });\n        (tween.value as any)?.start();\n      }\n    };\n\n    const formatValue = computed(() => {\n      let _value: string | number | Date | undefined = innerValue.value;\n      if (isNumber(_value)) {\n        if (isNumber(props.precision)) {\n          _value = NP.round(_value, props.precision).toFixed(props.precision);\n        }\n        const splitValue = String(_value).split('.');\n        const integer = props.showGroupSeparator\n          ? Number(splitValue[0]).toLocaleString('en-US')\n          : splitValue[0];\n        const decimal = splitValue[1];\n        return {\n          isNumber: true,\n          integer,\n          decimal,\n        };\n      }\n      if (props.format) {\n        _value = dayjs(_value).format(props.format);\n      }\n      return {\n        isNumber: false,\n        value: _value,\n      };\n    });\n\n    onMounted(() => {\n      if (props.animation && props.start) {\n        animation();\n      }\n    });\n\n    watch(\n      () => props.start,\n      (value) => {\n        if (value && props.animation && !tween.value) {\n          animation();\n        }\n      }\n    );\n\n    watch(value, (value) => {\n      if (tween.value) {\n        (tween.value as any)?.stop();\n        tween.value = null;\n      }\n      innerValue.value = value;\n      if (props.animation && props.start) {\n        animation();\n      }\n    });\n\n    return {\n      prefixCls,\n      showPlaceholder,\n      formatValue,\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/statistic/style/index.less",
    "content": "@import './token.less';\n\n@statistic-prefix-cls: ~'@{prefix}-statistic';\n\n.@{statistic-prefix-cls} {\n  display: inline-block;\n  color: @statistic-color-text;\n  line-height: @line-height-base;\n\n  &-title {\n    margin-bottom: @statistic-margin-title-bottom;\n    color: @statistic-color-title-text;\n    font-size: @statistic-font-title-size;\n  }\n\n  &-content {\n    .@{statistic-prefix-cls}-value {\n      color: @statistic-color-value-text;\n      font-weight: @statistic-font-value-weight;\n      font-size: @statistic-font-int-size;\n      white-space: nowrap;\n\n      &-integer {\n        font-size: inherit;\n        white-space: nowrap;\n      }\n\n      &-decimal {\n        display: inline-block;\n        font-size: @statistic-font-decimal-size;\n      }\n    }\n  }\n\n  &-prefix {\n    font-size: @statistic-size-value-icon;\n  }\n\n  &-suffix {\n    font-size: @statistic-font-suffix-size;\n  }\n\n  &-extra {\n    margin-top: @statistic-margin-extra-top;\n    color: @statistic-color-extra-text;\n  }\n}\n"
  },
  {
    "path": "packages/web-vue/components/statistic/style/index.ts",
    "content": "import '../../style/index.less';\nimport './index.less';\n"
  },
  {
    "path": "packages/web-vue/components/statistic/style/token.less",
    "content": "@import '../../style/theme/index.less';\n\n@statistic-font-title-size: @font-size-body-3;\n@statistic-margin-title-bottom: @spacing-4;\n@statistic-margin-extra-top: @spacing-4;\n@statistic-font-value-size: @font-size-body-3;\n@statistic-font-int-size: 26px;\n@statistic-font-decimal-size: inherit;\n@statistic-font-value-weight: @font-weight-500;\n@statistic-color-value-text: var(~'@{arco-cssvars-prefix}-color-text-1');\n@statistic-color-text: var(~'@{arco-cssvars-prefix}-color-text-2');\n@statistic-size-value-icon: 14px;\n@statistic-font-suffix-size: 14px;\n@statistic-color-title-text: var(~'@{arco-cssvars-prefix}-color-text-2');\n@statistic-color-extra-text: var(~'@{arco-cssvars-prefix}-color-text-2');\n"
  },
  {
    "path": "packages/web-vue/components/statistic/utils.ts",
    "content": "const units: [string, number][] = [\n  ['Y', 1000 * 60 * 60 * 24 * 365], // years\n  ['M', 1000 * 60 * 60 * 24 * 30], // months\n  ['D', 1000 * 60 * 60 * 24], // days\n  ['H', 1000 * 60 * 60], // hours\n  ['m', 1000 * 60], // minutes\n  ['s', 1000], // seconds\n  ['S', 1], // million seconds\n];\n\nexport function getDateString(millisecond: number, format: string) {\n  let leftMillisecond: number = millisecond;\n  return units.reduce((current, [name, unit]) => {\n    if (current.indexOf(name) !== -1) {\n      const value = Math.floor(leftMillisecond / unit);\n      leftMillisecond -= value * unit;\n      return current.replace(new RegExp(`${name}+`, 'g'), (match: string) => {\n        const len = match.length;\n        return String(value).padStart(len, '0');\n      });\n    }\n    return current;\n  }, format);\n}\n"
  },
  {
    "path": "packages/web-vue/components/steps/CHANGELOG.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.24.0\n\n`2022-04-15`\n\n### 🐛 BugFix\n\n- Fix the problem of index error when Steps and Step components are not in direct parent-child relationship ([#959](https://github.com/arco-design/arco-design-vue/pull/959))\n\n\n## 2.18.0\n\n`2022-03-04`\n\n### 💎 Enhancement\n\n- Use Context to optimize components ([#772](https://github.com/arco-design/arco-design-vue/pull/772))\n\n\n## 2.14.2\n\n`2022-01-10`\n\n### 🐛 BugFix\n\n- Fix the problem that small can be enabled in dot mode ([#536](https://github.com/arco-design/arco-design-vue/pull/536))\n\n\n## 2.13.0\n\n`2021-12-31`\n\n### 💅 Style\n\n- Fix the wrong connection color problem in the next step ([#477](https://github.com/arco-design/arco-design-vue/pull/477))\n\n\n## 2.9.0\n\n`2021-12-03`\n\n### 🆕 Feature\n\n- add title props ([#316](https://github.com/arco-design/arco-design-vue/pull/316))\n\n\n## 2.7.0\n\n`2021-11-26`\n\n### 💅 Style\n\n- Fix the problem of the connection color of the vertical step bar ([#276](https://github.com/arco-design/arco-design-vue/pull/276))\n\n\n## 2.6.1\n\n`2021-11-24`\n\n### 🐛 BugFix\n\n- Fix the problem that the `status` attribute in the `<step>` component does not take effect ([#209](https://github.com/arco-design/arco-design-vue/pull/209))\n\n"
  },
  {
    "path": "packages/web-vue/components/steps/CHANGELOG.zh-CN.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.24.0\n\n`2022-04-15`\n\n### 🐛 问题修复\n\n- 修复 Steps 与 Step 组件非直接父子关系时 index 错误的问题 ([#959](https://github.com/arco-design/arco-design-vue/pull/959))\n\n\n## 2.18.0\n\n`2022-03-04`\n\n### 💎 功能优化\n\n- 使用 Context 方式优化组件 ([#772](https://github.com/arco-design/arco-design-vue/pull/772))\n\n\n## 2.14.2\n\n`2022-01-10`\n\n### 🐛 问题修复\n\n- 修复 dot 模式下可以开启 small 的问题 ([#536](https://github.com/arco-design/arco-design-vue/pull/536))\n\n\n## 2.13.0\n\n`2021-12-31`\n\n### 💅 样式更新\n\n- 修复下一步错误连线颜色错误问题 ([#477](https://github.com/arco-design/arco-design-vue/pull/477))\n\n\n## 2.9.0\n\n`2021-12-03`\n\n### 🆕 新增功能\n\n- 增加 `title` 属性 ([#316](https://github.com/arco-design/arco-design-vue/pull/316))\n\n\n## 2.7.0\n\n`2021-11-26`\n\n### 💅 样式更新\n\n- 修复竖直步骤条连线颜色的问题 ([#276](https://github.com/arco-design/arco-design-vue/pull/276))\n\n\n## 2.6.1\n\n`2021-11-24`\n\n### 🐛 问题修复\n\n- 修复 `<step>` 组件中 `status` 属性不生效的问题 ([#209](https://github.com/arco-design/arco-design-vue/pull/209))\n\n"
  },
  {
    "path": "packages/web-vue/components/steps/README.en-US.md",
    "content": "```yaml\nmeta:\n  type: Component\n  category: Navigation\ntitle: Steps\ndescription: Clearly indicate the task flow and the current degree of completion, and guide the user to follow the steps to complete the task.\n```\n\n*Auto translate by google.*\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/description.md\n\n@import ./__demo__/label-placement.md\n\n@import ./__demo__/error.md\n\n@import ./__demo__/icon.md\n\n@import ./__demo__/line-less.md\n\n@import ./__demo__/vertical.md\n\n@import ./__demo__/arrow.md\n\n@import ./__demo__/dot.md\n\n@import ./__demo__/navigation.md\n\n@import ./__demo__/changeable.md\n\n## API\n\n\n### `<steps>` Props\n\n|Attribute|Description|Type|Default|\n|---|---|---|:---:|\n|type|The type of the steps|`'default' \\| 'arrow' \\| 'dot' \\| 'navigation'`|`'default'`|\n|direction|The direction of the steps|`'horizontal' \\| 'vertical'`|`'horizontal'`|\n|label-placement|The location where the label description is placed.|`'horizontal' \\| 'vertical'`|`'horizontal'`|\n|current **(v-model)**|Number of current step|`number`|`-`|\n|default-current|The default number of step (uncontrolled state)|`number`|`1`|\n|status|The status of the current step|`'wait' \\| 'process' \\| 'finish' \\| 'error'`|`'process'`|\n|line-less|Whether to use the connectionless style|`boolean`|`false`|\n|small|Whether to use a small step bar|`boolean`|`false`|\n|changeable|Whether you can click to switch|`boolean`|`false`|\n### `<steps>` Events\n\n|Event Name|Description|Parameters|\n|---|---|---|\n|change|Triggered when the number of steps changes|step: `number`<br>ev: `Event`|\n\n\n\n\n### `<step>` Props\n\n|Attribute|Description|Type|Default|\n|---|---|---|:---:|\n|title|Title of the step|`string`|`-`|\n|description|Description of the step|`string`|`-`|\n|status|Status of the step|`'wait' \\| 'process' \\| 'finish' \\| 'error'`|`-`|\n|disabled|Whether to disable|`boolean`|`false`|\n### `<step>` Slots\n\n|Slot Name|Description|Parameters|\n|---|---|---|\n|node|Node|step: `number`<br>status: `string`|\n|icon|Icon|step: `number`<br>status: `string`|\n|description|Description|-|\n\n\n"
  },
  {
    "path": "packages/web-vue/components/steps/README.zh-CN.md",
    "content": "```yaml\nmeta:\n  type: 组件\n  category: 导航\ntitle: 步骤条 Steps\ndescription: 明示任务流程和当前完成程度，引导用户按照步骤完成任务。\n```\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/description.md\n\n@import ./__demo__/label-placement.md\n\n@import ./__demo__/error.md\n\n@import ./__demo__/icon.md\n\n@import ./__demo__/line-less.md\n\n@import ./__demo__/vertical.md\n\n@import ./__demo__/arrow.md\n\n@import ./__demo__/dot.md\n\n@import ./__demo__/navigation.md\n\n@import ./__demo__/changeable.md\n\n## API\n\n\n### `<steps>` Props\n\n|参数名|描述|类型|默认值|\n|---|---|---|:---:|\n|type|步骤条的类型|`'default' \\| 'arrow' \\| 'dot' \\| 'navigation'`|`'default'`|\n|direction|步骤条的显示方向|`'horizontal' \\| 'vertical'`|`'horizontal'`|\n|label-placement|标签描述文字放置的位置|`'horizontal' \\| 'vertical'`|`'horizontal'`|\n|current **(v-model)**|当前步骤数|`number`|`-`|\n|default-current|默认的步骤数（非受控状态）|`number`|`1`|\n|status|当前步骤的状态|`'wait' \\| 'process' \\| 'finish' \\| 'error'`|`'process'`|\n|line-less|是否使用无连接线样式|`boolean`|`false`|\n|small|是否使用小型步骤条|`boolean`|`false`|\n|changeable|是否可以点击切换|`boolean`|`false`|\n### `<steps>` Events\n\n|事件名|描述|参数|\n|---|---|---|\n|change|步骤数发生改变时触发|step: `number`<br>ev: `Event`|\n\n\n\n\n### `<step>` Props\n\n|参数名|描述|类型|默认值|\n|---|---|---|:---:|\n|title|步骤的标题|`string`|`-`|\n|description|步骤的描述信息|`string`|`-`|\n|status|步骤的状态|`'wait' \\| 'process' \\| 'finish' \\| 'error'`|`-`|\n|disabled|是否禁用|`boolean`|`false`|\n### `<step>` Slots\n\n|插槽名|描述|参数|\n|---|:---:|---|\n|node|节点|step: `number`<br>status: `string`|\n|icon|图标|step: `number`<br>status: `string`|\n|description|描述内容|-|\n\n\n"
  },
  {
    "path": "packages/web-vue/components/steps/TEMPLATE.md",
    "content": "## zh-CN\n```yaml\nmeta:\n  type: 组件\n  category: 导航\ntitle: 步骤条 Steps\ndescription: 明示任务流程和当前完成程度，引导用户按照步骤完成任务。\n```\n---\n## en-US\n```yaml\nmeta:\n  type: Component\n  category: Navigation\ntitle: Steps\ndescription: Clearly indicate the task flow and the current degree of completion, and guide the user to follow the steps to complete the task.\n```\n---\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/description.md\n\n@import ./__demo__/label-placement.md\n\n@import ./__demo__/error.md\n\n@import ./__demo__/icon.md\n\n@import ./__demo__/line-less.md\n\n@import ./__demo__/vertical.md\n\n@import ./__demo__/arrow.md\n\n@import ./__demo__/dot.md\n\n@import ./__demo__/navigation.md\n\n@import ./__demo__/changeable.md\n\n## API\n\n%%API(steps.vue)%%\n\n%%API(step.vue)%%\n"
  },
  {
    "path": "packages/web-vue/components/steps/__demo__/arrow.md",
    "content": "```yaml\ntitle:\n  zh-CN: 箭头步骤条\n  en-US: Arrow Steps\n```\n\n## zh-CN\n\n通过设置 `type=\"arrow\"`，可以使用箭头类型的步骤条。**注意**：仅支持水平步骤条。\n\n---\n\n## en-US\n\nBy setting `type=\"arrow\"`, you can use the arrow type step bar. **Note**: Only horizontal step bars are supported.\n\n---\n\n```vue\n<template>\n  <a-steps type=\"arrow\" :current=\"2\">\n    <a-step description=\"This is a description\">Succeeded</a-step>\n    <a-step description=\"This is a description\">Processing</a-step>\n    <a-step description=\"This is a description\">Pending</a-step>\n  </a-steps>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/steps/__demo__/basic.md",
    "content": "```yaml\ntitle:\n  zh-CN: 基本用法\n  en-US: Basic Usage\n```\n\n## zh-CN\n\n步骤条的基本用法。\n\n---\n\n## en-US\n\nBasic usage of the step bar.\n\n---\n\n```vue\n<template>\n  <div>\n    <a-steps :current=\"2\">\n      <a-step>Succeeded</a-step>\n      <a-step>Processing</a-step>\n      <a-step>Pending</a-step>\n    </a-steps>\n    <a-divider/>\n    <div style=\"line-height: 140px; text-align: center; color: #C9CDD4; \">\n      Step 2 Content\n    </div>\n  </div>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/steps/__demo__/changeable.md",
    "content": "```yaml\ntitle:\n  zh-CN: 可切换步骤条\n  en-US: Changeable\n```\n\n## zh-CN\n\n设置 `changeable` 开启点击切换步骤。\n\n---\n\n## en-US\n\nSet `changeable` to enable the click switch step.\n\n---\n\n```vue\n<template>\n  <div>\n    <a-steps changeable :current=\"current\" @change=\"setCurrent\">\n      <a-step description=\"This is a description\">Succeeded</a-step>\n      <a-step description=\"This is a description\">Processing</a-step>\n      <a-step description=\"This is a description\">Pending</a-step>\n    </a-steps>\n    <div :style=\"{\n          width: '100%',\n          height: '200px',\n          textAlign: 'center',\n          background: 'var(--color-bg-2)',\n          color: '#C2C7CC',\n        }\">\n      <div style=\"line-height: 160px;\">Step{{current}} Content</div>\n      <a-space size=\"large\">\n        <a-button type=\"secondary\" :disabled=\"current <= 1\" @click=\"onPrev\">\n          <IconLeft/> Back\n        </a-button>\n        <a-button type=\"primary\" :disabled=\"current >= 3\" @click=\"onNext\">\n          Next <IconRight/>\n        </a-button>\n      </a-space>\n    </div>\n  </div>\n</template>\n<script>\nexport default {\n  data() {\n    return {\n      current: 1,\n    };\n  },\n  methods: {\n    onPrev() {\n      this.current = Math.max(1, this.current - 1)\n    },\n\n    onNext() {\n      this.current = Math.min(3, this.current + 1)\n    },\n\n    setCurrent(current) {\n      this.current = current\n    }\n  }\n};\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/steps/__demo__/custom-node.md",
    "content": "```yaml\ntitle:\n  zh-CN: 自定义节点\n  en-US: Custom node\n```\n\n## zh-CN\n\n步骤条的基本用法。\n\n---\n\n## en-US\n\nBasic usage of the step bar.\n\n---\n\n```vue\n\n<template>\n  <div>\n    <a-steps\n      changeable\n      label-placement=\"vertical\"\n      :current=\"current\"\n      @change=\"setCurrent\"\n    >\n      <a-step description=\"This is a description\">\n        Succeeded\n        <template v-slot:node=\"slotProps\">\n          <a-popover content=\"step tip\" :popup-visible=\"current === 1\">\n            <span>{{ slotProps.step }}</span>\n          </a-popover>\n        </template>\n      </a-step>\n      <a-step description=\"This is a description\">\n        Processing Succeeded\n        <template v-slot:node=\"slotProps\">\n          <a-popover content=\"step tip\" :popup-visible=\"current === 2\">\n            <span>{{ slotProps.step }}</span>\n          </a-popover>\n        </template>\n      </a-step>\n      <a-step description=\"This is a description\"\n      >Pending\n        <template v-slot:node=\"slotProps\">\n          <a-popover content=\"step tip\" :popup-visible=\"current === 3\">\n            <span>{{ slotProps.step }}</span>\n          </a-popover>\n        </template>\n      </a-step>\n    </a-steps>\n    <div style=\"margin-top: 20px; text-align: center;\">\n      <a-space size=\"large\">\n        <a-button type=\"secondary\" :disabled=\"current <= 1\" @click=\"onPrev\">\n          <IconLeft />\n          Back\n        </a-button>\n        <a-button type=\"primary\" :disabled=\"current >= 3\" @click=\"onNext\">\n          Next\n          <IconRight />\n        </a-button>\n      </a-space>\n    </div>\n  </div>\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n  setup() {\n    const current = ref(1);\n\n    const onPrev = () => {\n      current.value = Math.max(1, current.value - 1);\n    };\n\n    const onNext = () => {\n      current.value = Math.min(3, current.value + 1);\n    };\n\n    const setCurrent = (current) => {\n      current.value = current;\n    };\n\n    return {\n      current,\n      onPrev,\n      onNext,\n      setCurrent\n    }\n  },\n};\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/steps/__demo__/description.md",
    "content": "```yaml\ntitle:\n  zh-CN: 描述信息\n  en-US: Description\n```\n\n## zh-CN\n\n通过设置 `description` 可以添加描述信息。\n\n---\n\n## en-US\n\nDescriptive information can be added by setting `description`.\n\n---\n\n```vue\n<template>\n  <a-steps>\n    <a-step description=\"This is a description\">Succeeded</a-step>\n    <a-step description=\"This is a description\">Processing</a-step>\n    <a-step description=\"This is a description\">Pending</a-step>\n  </a-steps>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/steps/__demo__/dot.md",
    "content": "```yaml\ntitle:\n  zh-CN: 点状步骤条\n  en-US: Dot Steps\n```\n\n## zh-CN\n\n通过设置 `type=\"dot\"` ， 可以使用点状的步骤条。此模式没有 small 尺寸。\n\n---\n\n## en-US\n\nBy setting `type=\"dot\"`, you can use a dotted step bar. There is no small size for this mode.\n\n---\n\n```vue\n<template>\n  <a-steps type=\"dot\">\n    <a-step>Succeeded</a-step>\n    <a-step>Processing</a-step>\n    <a-step>Pending</a-step>\n  </a-steps>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/steps/__demo__/error.md",
    "content": "```yaml\ntitle:\n  zh-CN: 步骤错误\n  en-US: Error Status\n```\n\n## zh-CN\n\n通过设置 `status=\"error\"` 来展示错误状态。\n\n---\n\n## en-US\n\nDisplay the error status by setting `status=\"error\"`.\n\n---\n\n```vue\n<template>\n  <a-steps :current=\"2\" status=\"error\">\n    <a-step description=\"This is a description\">Succeeded</a-step>\n    <a-step description=\"This is a description\">Error</a-step>\n    <a-step description=\"This is a description\">Pending</a-step>\n  </a-steps>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/steps/__demo__/icon.md",
    "content": "```yaml\ntitle:\n  zh-CN: 自定义图标\n  en-US: Custom Icon\n```\n\n## zh-CN\n\n通过 `#icon` 插槽可以自定义节点图标。\n\n\n---\n\n## en-US\n\nThe node icon can be customized through the `#icon` slot.\n\n---\n\n```vue\n<template>\n  <a-steps>\n    <a-step description=\"This is a description\">\n      Succeeded\n      <template #icon>\n        <icon-home/>\n      </template>\n    </a-step>\n    <a-step description=\"This is a description\">\n      Processing\n      <template #icon>\n        <icon-loading/>\n      </template>\n    </a-step>\n    <a-step description=\"This is a description\">\n      Pending\n      <template #icon>\n        <icon-thumb-up/>\n      </template>\n    </a-step>\n  </a-steps>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/steps/__demo__/label-placement.md",
    "content": "```yaml\ntitle:\n  zh-CN: 标签放置位置\n  en-US: Label Placement\n```\n\n## zh-CN\n\n通过设置 `label-placement` 可以改变标签描述文字放置的位置。放置位置分为 `horizontal` - **放置在图标右侧（默认）**、`vertical` - **放置在图标下方**两种。\n\n---\n\n## en-US\n\nThe placement of label description text can be changed by setting `label-placement`. There are two types of placement: `horizontal` - **placed on the right side of the icon (default)** and `vertical` - **placed below the icon**.\n\n---\n\n```vue\n<template>\n  <a-steps label-placement=\"vertical\">\n    <a-step description=\"This is a description\">Succeeded</a-step>\n    <a-step description=\"This is a description\">Processing</a-step>\n    <a-step description=\"This is a description\">Pending</a-step>\n  </a-steps>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/steps/__demo__/line-less.md",
    "content": "```yaml\ntitle:\n  zh-CN: 隐藏连接线\n  en-US: Line Less\n```\n\n## zh-CN\n\n通过设置 `line-less` 可以使用无连接线模式。\n\n---\n\n## en-US\n\nYou can use the connectionless mode by setting `line-less`.\n\n---\n\n```vue\n<template>\n  <a-steps :current=\"2\" line-less>\n    <a-step description=\"This is a description\">Succeeded</a-step>\n    <a-step description=\"This is a description\">Processing</a-step>\n    <a-step description=\"This is a description\">Pending</a-step>\n  </a-steps>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/steps/__demo__/navigation.md",
    "content": "```yaml\ntitle:\n  zh-CN: 导航步骤条\n  en-US: Navigation Steps\n```\n\n## zh-CN\n\n通过设置 `type=\"navigation\"` 展示导航类型的步骤条。\n\n---\n\n## en-US\n\nDisplay the step bar of navigation type by setting `type=\"navigation\"`.\n\n---\n\n```vue\n<template>\n  <a-steps type=\"navigation\">\n    <a-step>Succeeded</a-step>\n    <a-step>Processing</a-step>\n    <a-step>Pending</a-step>\n  </a-steps>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/steps/__demo__/small-arrow.md",
    "content": "```yaml\ntitle:\n  zh-CN: 迷你箭头步骤条\n  en-US: Small Arrow Steps\n```\n\n## zh-CN\n\n指定 `type: 'arrow', small: true`， 可以使用迷你箭头类型的步骤条。\n\n---\n\n## en-US\n\nBy setting `type=\"arrow\" & small=true`, you can use the small arrow type step bar.\n\n---\n\n```vue\n<template>\n  <div>\n    <a-steps type=\"arrow\" :current=\"2\" small style=\"margin-bottom: 20px;\">\n      <a-step description=\"This is a description\">Succeeded</a-step>\n      <a-step description=\"This is a description\">Processing</a-step>\n      <a-step description=\"This is a description\">Pending</a-step>\n    </a-steps>\n    <a-steps type=\"arrow\" :current=\"2\" small status=\"error\">\n      <a-step description=\"This is a description\">Succeeded</a-step>\n      <a-step description=\"This is a description\">Processing</a-step>\n      <a-step description=\"This is a description\">Pending</a-step>\n    </a-steps>\n  </div>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/steps/__demo__/small.md",
    "content": "```yaml\ntitle:\n  zh-CN: 小型步骤条\n  en-US: small steps\n```\n\n## zh-CN\n\n通过 `small` 可以设置展示小型步骤条\n\n\n---\n\n## en-US\n\nsmall steps\n\n---\n\n```vue\n<template>\n  <div>\n    <a-steps :current=\"2\" small>\n      <a-step>Succeeded</a-step>\n      <a-step>Processing</a-step>\n      <a-step>Pending</a-step>\n    </a-steps>\n    <a-divider/>\n    <div style=\"line-height: 140px; text-align: center; color: #C9CDD4; \">\n      Step 2 Content\n    </div>\n  </div>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/steps/__demo__/vertical.md",
    "content": "```yaml\ntitle:\n  zh-CN: 竖直步骤条\n  en-US: Vertical Steps\n```\n\n## zh-CN\n\n竖直方向的步骤条。\n\n---\n\n## en-US\n\nVertical step bar.\n\n---\n\n```vue\n<template>\n  <div class=\"frame-bg\">\n    <div class=\"frame-body\">\n      <div class=\"frame-aside\">\n        <a-steps :current=\"current\" direction=\"vertical\">\n          <a-step>Succeeded</a-step>\n          <a-step>Processing</a-step>\n          <a-step>Pending</a-step>\n        </a-steps>\n      </div>\n      <div class=\"frame-main\">\n        <div class=\"main-content\">The content of this step.</div>\n        <div class=\"main-bottom\">\n          <a-button :disabled=\"current===1\" @click=\"onPrev\">\n            <icon-left />\n            Back\n          </a-button>\n          <a-button :disabled=\"current===3\" @click=\"onNext\">\n            Next\n            <icon-right />\n          </a-button>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n  setup() {\n    const current = ref(1);\n\n    const onPrev = () => {\n      current.value = Math.max(1, current.value - 1);\n    };\n\n    const onNext = () => {\n      current.value = Math.min(3, current.value + 1);\n    };\n\n    return {\n      current,\n      onPrev,\n      onNext,\n    }\n  },\n};\n</script>\n\n<style scoped lang=\"less\">\n.frame-bg {\n  max-width: 780px;\n  padding: 40px;\n  background: var(--color-fill-2);\n}\n\n.frame-body {\n  display: flex;\n  background: var(--color-bg-2);\n}\n\n.frame-aside {\n  padding: 24px;\n  height: 272px;\n  border-right: 1px solid var(--color-border);\n}\n\n.frame-main {\n  width: 100%;\n}\n\n.main-content {\n  text-align: center;\n  line-height: 200px;\n}\n\n.main-bottom {\n  display: flex;\n  justify-content: center;\n\n  button {\n    margin: 0 20px;\n  }\n}\n</style>\n```\n"
  },
  {
    "path": "packages/web-vue/components/steps/__test__/__snapshots__/demo.test.ts.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`<steps> demo: render [arrow] correctly 1`] = `\n\"<div class=\\\\\"arco-steps arco-steps-horizontal arco-steps-label-horizontal arco-steps-mode-arrow\\\\\">\n  <div class=\\\\\"arco-steps-item arco-steps-item-finish\\\\\">\n    <!--v-if-->\n    <!--v-if-->\n    <div class=\\\\\"arco-steps-item-content\\\\\">\n      <div class=\\\\\"arco-steps-item-title\\\\\">Succeeded</div>\n      <div class=\\\\\"arco-steps-item-description\\\\\">This is a description</div>\n    </div>\n  </div>\n  <div class=\\\\\"arco-steps-item arco-steps-item-finish\\\\\">\n    <!--v-if-->\n    <!--v-if-->\n    <div class=\\\\\"arco-steps-item-content\\\\\">\n      <div class=\\\\\"arco-steps-item-title\\\\\">Processing</div>\n      <div class=\\\\\"arco-steps-item-description\\\\\">This is a description</div>\n    </div>\n  </div>\n  <div class=\\\\\"arco-steps-item arco-steps-item-finish\\\\\">\n    <!--v-if-->\n    <!--v-if-->\n    <div class=\\\\\"arco-steps-item-content\\\\\">\n      <div class=\\\\\"arco-steps-item-title\\\\\">Pending</div>\n      <div class=\\\\\"arco-steps-item-description\\\\\">This is a description</div>\n    </div>\n  </div>\n</div>\"\n`;\n\nexports[`<steps> demo: render [basic] correctly 1`] = `\n\"<div>\n  <div class=\\\\\"arco-steps arco-steps-horizontal arco-steps-label-horizontal arco-steps-mode-default\\\\\">\n    <div class=\\\\\"arco-steps-item arco-steps-item-finish\\\\\">\n      <!--v-if-->\n      <div class=\\\\\"arco-steps-item-node\\\\\">\n        <div class=\\\\\"arco-steps-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-check\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n            <path d=\\\\\"M41.678 11.05 19.05 33.678 6.322 20.95\\\\\"></path>\n          </svg></div>\n      </div>\n      <div class=\\\\\"arco-steps-item-content\\\\\">\n        <div class=\\\\\"arco-steps-item-title\\\\\">Succeeded</div>\n        <!--v-if-->\n      </div>\n    </div>\n    <div class=\\\\\"arco-steps-item arco-steps-item-finish\\\\\">\n      <!--v-if-->\n      <div class=\\\\\"arco-steps-item-node\\\\\">\n        <div class=\\\\\"arco-steps-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-check\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n            <path d=\\\\\"M41.678 11.05 19.05 33.678 6.322 20.95\\\\\"></path>\n          </svg></div>\n      </div>\n      <div class=\\\\\"arco-steps-item-content\\\\\">\n        <div class=\\\\\"arco-steps-item-title\\\\\">Processing</div>\n        <!--v-if-->\n      </div>\n    </div>\n    <div class=\\\\\"arco-steps-item arco-steps-item-finish\\\\\">\n      <!--v-if-->\n      <div class=\\\\\"arco-steps-item-node\\\\\">\n        <div class=\\\\\"arco-steps-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-check\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n            <path d=\\\\\"M41.678 11.05 19.05 33.678 6.322 20.95\\\\\"></path>\n          </svg></div>\n      </div>\n      <div class=\\\\\"arco-steps-item-content\\\\\">\n        <div class=\\\\\"arco-steps-item-title\\\\\">Pending</div>\n        <!--v-if-->\n      </div>\n    </div>\n  </div>\n  <div role=\\\\\"separator\\\\\" class=\\\\\"arco-divider arco-divider-horizontal\\\\\">\n    <!---->\n  </div>\n  <div style=\\\\\"line-height: 140px; text-align: center; color: rgb(201, 205, 212);\\\\\"> Step 2 Content </div>\n</div>\"\n`;\n\nexports[`<steps> demo: render [changeable] correctly 1`] = `\n\"<div>\n  <div class=\\\\\"arco-steps arco-steps-horizontal arco-steps-label-horizontal arco-steps-mode-default arco-steps-changeable\\\\\">\n    <div class=\\\\\"arco-steps-item arco-steps-item-finish\\\\\">\n      <!--v-if-->\n      <div class=\\\\\"arco-steps-item-node\\\\\">\n        <div class=\\\\\"arco-steps-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-check\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n            <path d=\\\\\"M41.678 11.05 19.05 33.678 6.322 20.95\\\\\"></path>\n          </svg></div>\n      </div>\n      <div class=\\\\\"arco-steps-item-content\\\\\">\n        <div class=\\\\\"arco-steps-item-title\\\\\">Succeeded</div>\n        <div class=\\\\\"arco-steps-item-description\\\\\">This is a description</div>\n      </div>\n    </div>\n    <div class=\\\\\"arco-steps-item arco-steps-item-finish\\\\\">\n      <!--v-if-->\n      <div class=\\\\\"arco-steps-item-node\\\\\">\n        <div class=\\\\\"arco-steps-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-check\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n            <path d=\\\\\"M41.678 11.05 19.05 33.678 6.322 20.95\\\\\"></path>\n          </svg></div>\n      </div>\n      <div class=\\\\\"arco-steps-item-content\\\\\">\n        <div class=\\\\\"arco-steps-item-title\\\\\">Processing</div>\n        <div class=\\\\\"arco-steps-item-description\\\\\">This is a description</div>\n      </div>\n    </div>\n    <div class=\\\\\"arco-steps-item arco-steps-item-finish\\\\\">\n      <!--v-if-->\n      <div class=\\\\\"arco-steps-item-node\\\\\">\n        <div class=\\\\\"arco-steps-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-check\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n            <path d=\\\\\"M41.678 11.05 19.05 33.678 6.322 20.95\\\\\"></path>\n          </svg></div>\n      </div>\n      <div class=\\\\\"arco-steps-item-content\\\\\">\n        <div class=\\\\\"arco-steps-item-title\\\\\">Pending</div>\n        <div class=\\\\\"arco-steps-item-description\\\\\">This is a description</div>\n      </div>\n    </div>\n  </div>\n  <div style=\\\\\"width: 100%; height: 200px; text-align: center; color: rgb(194, 199, 204);\\\\\">\n    <div style=\\\\\"line-height: 160px;\\\\\">Step1 Content</div>\n    <div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 24px; row-gap: 24px;\\\\\">\n      <!---->\n      <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal arco-btn-disabled\\\\\" type=\\\\\"button\\\\\" disabled=\\\\\"\\\\\">\n          <!--v-if--><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-left\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n            <path d=\\\\\"M32 8.4 16.444 23.956 32 39.513\\\\\"></path>\n          </svg> Back\n        </button></div>\n      <!---->\n      <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n          <!--v-if--> Next <svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-right\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n            <path d=\\\\\"m16 39.513 15.556-15.557L16 8.4\\\\\"></path>\n          </svg>\n        </button></div>\n    </div>\n  </div>\n</div>\"\n`;\n\nexports[`<steps> demo: render [custom-node] correctly 1`] = `\n\"<div>\n  <div class=\\\\\"arco-steps arco-steps-horizontal arco-steps-label-vertical arco-steps-mode-default arco-steps-changeable\\\\\">\n    <div class=\\\\\"arco-steps-item arco-steps-item-finish\\\\\">\n      <div class=\\\\\"arco-steps-item-tail\\\\\"></div>\n      <div class=\\\\\"arco-steps-item-node\\\\\"><span>0</span>\n        <!---->\n      </div>\n      <div class=\\\\\"arco-steps-item-content\\\\\">\n        <div class=\\\\\"arco-steps-item-title\\\\\"> Succeeded </div>\n        <div class=\\\\\"arco-steps-item-description\\\\\">This is a description</div>\n      </div>\n    </div>\n    <div class=\\\\\"arco-steps-item arco-steps-item-finish\\\\\">\n      <div class=\\\\\"arco-steps-item-tail\\\\\"></div>\n      <div class=\\\\\"arco-steps-item-node\\\\\"><span>0</span>\n        <!---->\n      </div>\n      <div class=\\\\\"arco-steps-item-content\\\\\">\n        <div class=\\\\\"arco-steps-item-title\\\\\"> Processing Succeeded </div>\n        <div class=\\\\\"arco-steps-item-description\\\\\">This is a description</div>\n      </div>\n    </div>\n    <div class=\\\\\"arco-steps-item arco-steps-item-finish\\\\\">\n      <div class=\\\\\"arco-steps-item-tail\\\\\"></div>\n      <div class=\\\\\"arco-steps-item-node\\\\\"><span>0</span>\n        <!---->\n      </div>\n      <div class=\\\\\"arco-steps-item-content\\\\\">\n        <div class=\\\\\"arco-steps-item-title\\\\\">Pending </div>\n        <div class=\\\\\"arco-steps-item-description\\\\\">This is a description</div>\n      </div>\n    </div>\n  </div>\n  <div style=\\\\\"margin-top: 20px; text-align: center;\\\\\">\n    <div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 24px; row-gap: 24px;\\\\\">\n      <!---->\n      <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal arco-btn-disabled\\\\\" type=\\\\\"button\\\\\" disabled=\\\\\"\\\\\">\n          <!--v-if--><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-left\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n            <path d=\\\\\"M32 8.4 16.444 23.956 32 39.513\\\\\"></path>\n          </svg> Back\n        </button></div>\n      <!---->\n      <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n          <!--v-if--> Next <svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-right\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n            <path d=\\\\\"m16 39.513 15.556-15.557L16 8.4\\\\\"></path>\n          </svg>\n        </button></div>\n    </div>\n  </div>\n</div>\"\n`;\n\nexports[`<steps> demo: render [description] correctly 1`] = `\n\"<div class=\\\\\"arco-steps arco-steps-horizontal arco-steps-label-horizontal arco-steps-mode-default\\\\\">\n  <div class=\\\\\"arco-steps-item arco-steps-item-finish\\\\\">\n    <!--v-if-->\n    <div class=\\\\\"arco-steps-item-node\\\\\">\n      <div class=\\\\\"arco-steps-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-check\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n          <path d=\\\\\"M41.678 11.05 19.05 33.678 6.322 20.95\\\\\"></path>\n        </svg></div>\n    </div>\n    <div class=\\\\\"arco-steps-item-content\\\\\">\n      <div class=\\\\\"arco-steps-item-title\\\\\">Succeeded</div>\n      <div class=\\\\\"arco-steps-item-description\\\\\">This is a description</div>\n    </div>\n  </div>\n  <div class=\\\\\"arco-steps-item arco-steps-item-finish\\\\\">\n    <!--v-if-->\n    <div class=\\\\\"arco-steps-item-node\\\\\">\n      <div class=\\\\\"arco-steps-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-check\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n          <path d=\\\\\"M41.678 11.05 19.05 33.678 6.322 20.95\\\\\"></path>\n        </svg></div>\n    </div>\n    <div class=\\\\\"arco-steps-item-content\\\\\">\n      <div class=\\\\\"arco-steps-item-title\\\\\">Processing</div>\n      <div class=\\\\\"arco-steps-item-description\\\\\">This is a description</div>\n    </div>\n  </div>\n  <div class=\\\\\"arco-steps-item arco-steps-item-finish\\\\\">\n    <!--v-if-->\n    <div class=\\\\\"arco-steps-item-node\\\\\">\n      <div class=\\\\\"arco-steps-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-check\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n          <path d=\\\\\"M41.678 11.05 19.05 33.678 6.322 20.95\\\\\"></path>\n        </svg></div>\n    </div>\n    <div class=\\\\\"arco-steps-item-content\\\\\">\n      <div class=\\\\\"arco-steps-item-title\\\\\">Pending</div>\n      <div class=\\\\\"arco-steps-item-description\\\\\">This is a description</div>\n    </div>\n  </div>\n</div>\"\n`;\n\nexports[`<steps> demo: render [dot] correctly 1`] = `\n\"<div class=\\\\\"arco-steps arco-steps-horizontal arco-steps-label-vertical arco-steps-mode-dot\\\\\">\n  <div class=\\\\\"arco-steps-item arco-steps-item-finish\\\\\">\n    <div class=\\\\\"arco-steps-item-tail\\\\\"></div>\n    <div class=\\\\\"arco-steps-item-node\\\\\">\n      <!--v-if-->\n    </div>\n    <div class=\\\\\"arco-steps-item-content\\\\\">\n      <div class=\\\\\"arco-steps-item-title\\\\\">Succeeded</div>\n      <!--v-if-->\n    </div>\n  </div>\n  <div class=\\\\\"arco-steps-item arco-steps-item-finish\\\\\">\n    <div class=\\\\\"arco-steps-item-tail\\\\\"></div>\n    <div class=\\\\\"arco-steps-item-node\\\\\">\n      <!--v-if-->\n    </div>\n    <div class=\\\\\"arco-steps-item-content\\\\\">\n      <div class=\\\\\"arco-steps-item-title\\\\\">Processing</div>\n      <!--v-if-->\n    </div>\n  </div>\n  <div class=\\\\\"arco-steps-item arco-steps-item-finish\\\\\">\n    <div class=\\\\\"arco-steps-item-tail\\\\\"></div>\n    <div class=\\\\\"arco-steps-item-node\\\\\">\n      <!--v-if-->\n    </div>\n    <div class=\\\\\"arco-steps-item-content\\\\\">\n      <div class=\\\\\"arco-steps-item-title\\\\\">Pending</div>\n      <!--v-if-->\n    </div>\n  </div>\n</div>\"\n`;\n\nexports[`<steps> demo: render [error] correctly 1`] = `\n\"<div class=\\\\\"arco-steps arco-steps-horizontal arco-steps-label-horizontal arco-steps-mode-default\\\\\">\n  <div class=\\\\\"arco-steps-item arco-steps-item-finish\\\\\">\n    <!--v-if-->\n    <div class=\\\\\"arco-steps-item-node\\\\\">\n      <div class=\\\\\"arco-steps-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-check\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n          <path d=\\\\\"M41.678 11.05 19.05 33.678 6.322 20.95\\\\\"></path>\n        </svg></div>\n    </div>\n    <div class=\\\\\"arco-steps-item-content\\\\\">\n      <div class=\\\\\"arco-steps-item-title\\\\\">Succeeded</div>\n      <div class=\\\\\"arco-steps-item-description\\\\\">This is a description</div>\n    </div>\n  </div>\n  <div class=\\\\\"arco-steps-item arco-steps-item-finish\\\\\">\n    <!--v-if-->\n    <div class=\\\\\"arco-steps-item-node\\\\\">\n      <div class=\\\\\"arco-steps-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-check\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n          <path d=\\\\\"M41.678 11.05 19.05 33.678 6.322 20.95\\\\\"></path>\n        </svg></div>\n    </div>\n    <div class=\\\\\"arco-steps-item-content\\\\\">\n      <div class=\\\\\"arco-steps-item-title\\\\\">Error</div>\n      <div class=\\\\\"arco-steps-item-description\\\\\">This is a description</div>\n    </div>\n  </div>\n  <div class=\\\\\"arco-steps-item arco-steps-item-finish\\\\\">\n    <!--v-if-->\n    <div class=\\\\\"arco-steps-item-node\\\\\">\n      <div class=\\\\\"arco-steps-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-check\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n          <path d=\\\\\"M41.678 11.05 19.05 33.678 6.322 20.95\\\\\"></path>\n        </svg></div>\n    </div>\n    <div class=\\\\\"arco-steps-item-content\\\\\">\n      <div class=\\\\\"arco-steps-item-title\\\\\">Pending</div>\n      <div class=\\\\\"arco-steps-item-description\\\\\">This is a description</div>\n    </div>\n  </div>\n</div>\"\n`;\n\nexports[`<steps> demo: render [icon] correctly 1`] = `\n\"<div class=\\\\\"arco-steps arco-steps-horizontal arco-steps-label-horizontal arco-steps-mode-default\\\\\">\n  <div class=\\\\\"arco-steps-item arco-steps-item-finish\\\\\">\n    <!--v-if-->\n    <div class=\\\\\"arco-steps-item-node\\\\\">\n      <div class=\\\\\"arco-steps-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-home\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n          <path d=\\\\\"M7 17 24 7l17 10v24H7V17Z\\\\\"></path>\n          <path d=\\\\\"M20 28h8v13h-8V28Z\\\\\"></path>\n        </svg></div>\n    </div>\n    <div class=\\\\\"arco-steps-item-content\\\\\">\n      <div class=\\\\\"arco-steps-item-title\\\\\"> Succeeded </div>\n      <div class=\\\\\"arco-steps-item-description\\\\\">This is a description</div>\n    </div>\n  </div>\n  <div class=\\\\\"arco-steps-item arco-steps-item-finish\\\\\">\n    <!--v-if-->\n    <div class=\\\\\"arco-steps-item-node\\\\\">\n      <div class=\\\\\"arco-steps-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-loading\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n          <path d=\\\\\"M42 24c0 9.941-8.059 18-18 18S6 33.941 6 24 14.059 6 24 6\\\\\"></path>\n        </svg></div>\n    </div>\n    <div class=\\\\\"arco-steps-item-content\\\\\">\n      <div class=\\\\\"arco-steps-item-title\\\\\"> Processing </div>\n      <div class=\\\\\"arco-steps-item-description\\\\\">This is a description</div>\n    </div>\n  </div>\n  <div class=\\\\\"arco-steps-item arco-steps-item-finish\\\\\">\n    <!--v-if-->\n    <div class=\\\\\"arco-steps-item-node\\\\\">\n      <div class=\\\\\"arco-steps-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-thumb-up\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n          <path d=\\\\\"M7 17v26m35.17-21.394-5.948 18.697a1 1 0 0 1-.953.697H14V19h3l9.403-12.223a1 1 0 0 1 1.386-.196l2.535 1.87a6 6 0 0 1 2.044 6.974L31 19h9.265a2 2 0 0 1 1.906 2.606Z\\\\\"></path>\n        </svg></div>\n    </div>\n    <div class=\\\\\"arco-steps-item-content\\\\\">\n      <div class=\\\\\"arco-steps-item-title\\\\\"> Pending </div>\n      <div class=\\\\\"arco-steps-item-description\\\\\">This is a description</div>\n    </div>\n  </div>\n</div>\"\n`;\n\nexports[`<steps> demo: render [label-placement] correctly 1`] = `\n\"<div class=\\\\\"arco-steps arco-steps-horizontal arco-steps-label-vertical arco-steps-mode-default\\\\\">\n  <div class=\\\\\"arco-steps-item arco-steps-item-finish\\\\\">\n    <div class=\\\\\"arco-steps-item-tail\\\\\"></div>\n    <div class=\\\\\"arco-steps-item-node\\\\\">\n      <div class=\\\\\"arco-steps-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-check\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n          <path d=\\\\\"M41.678 11.05 19.05 33.678 6.322 20.95\\\\\"></path>\n        </svg></div>\n    </div>\n    <div class=\\\\\"arco-steps-item-content\\\\\">\n      <div class=\\\\\"arco-steps-item-title\\\\\">Succeeded</div>\n      <div class=\\\\\"arco-steps-item-description\\\\\">This is a description</div>\n    </div>\n  </div>\n  <div class=\\\\\"arco-steps-item arco-steps-item-finish\\\\\">\n    <div class=\\\\\"arco-steps-item-tail\\\\\"></div>\n    <div class=\\\\\"arco-steps-item-node\\\\\">\n      <div class=\\\\\"arco-steps-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-check\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n          <path d=\\\\\"M41.678 11.05 19.05 33.678 6.322 20.95\\\\\"></path>\n        </svg></div>\n    </div>\n    <div class=\\\\\"arco-steps-item-content\\\\\">\n      <div class=\\\\\"arco-steps-item-title\\\\\">Processing</div>\n      <div class=\\\\\"arco-steps-item-description\\\\\">This is a description</div>\n    </div>\n  </div>\n  <div class=\\\\\"arco-steps-item arco-steps-item-finish\\\\\">\n    <div class=\\\\\"arco-steps-item-tail\\\\\"></div>\n    <div class=\\\\\"arco-steps-item-node\\\\\">\n      <div class=\\\\\"arco-steps-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-check\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n          <path d=\\\\\"M41.678 11.05 19.05 33.678 6.322 20.95\\\\\"></path>\n        </svg></div>\n    </div>\n    <div class=\\\\\"arco-steps-item-content\\\\\">\n      <div class=\\\\\"arco-steps-item-title\\\\\">Pending</div>\n      <div class=\\\\\"arco-steps-item-description\\\\\">This is a description</div>\n    </div>\n  </div>\n</div>\"\n`;\n\nexports[`<steps> demo: render [line-less] correctly 1`] = `\n\"<div class=\\\\\"arco-steps arco-steps-horizontal arco-steps-label-horizontal arco-steps-mode-default arco-steps-line-less\\\\\">\n  <div class=\\\\\"arco-steps-item arco-steps-item-finish\\\\\">\n    <!--v-if-->\n    <div class=\\\\\"arco-steps-item-node\\\\\">\n      <div class=\\\\\"arco-steps-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-check\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n          <path d=\\\\\"M41.678 11.05 19.05 33.678 6.322 20.95\\\\\"></path>\n        </svg></div>\n    </div>\n    <div class=\\\\\"arco-steps-item-content\\\\\">\n      <div class=\\\\\"arco-steps-item-title\\\\\">Succeeded</div>\n      <div class=\\\\\"arco-steps-item-description\\\\\">This is a description</div>\n    </div>\n  </div>\n  <div class=\\\\\"arco-steps-item arco-steps-item-finish\\\\\">\n    <!--v-if-->\n    <div class=\\\\\"arco-steps-item-node\\\\\">\n      <div class=\\\\\"arco-steps-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-check\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n          <path d=\\\\\"M41.678 11.05 19.05 33.678 6.322 20.95\\\\\"></path>\n        </svg></div>\n    </div>\n    <div class=\\\\\"arco-steps-item-content\\\\\">\n      <div class=\\\\\"arco-steps-item-title\\\\\">Processing</div>\n      <div class=\\\\\"arco-steps-item-description\\\\\">This is a description</div>\n    </div>\n  </div>\n  <div class=\\\\\"arco-steps-item arco-steps-item-finish\\\\\">\n    <!--v-if-->\n    <div class=\\\\\"arco-steps-item-node\\\\\">\n      <div class=\\\\\"arco-steps-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-check\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n          <path d=\\\\\"M41.678 11.05 19.05 33.678 6.322 20.95\\\\\"></path>\n        </svg></div>\n    </div>\n    <div class=\\\\\"arco-steps-item-content\\\\\">\n      <div class=\\\\\"arco-steps-item-title\\\\\">Pending</div>\n      <div class=\\\\\"arco-steps-item-description\\\\\">This is a description</div>\n    </div>\n  </div>\n</div>\"\n`;\n\nexports[`<steps> demo: render [navigation] correctly 1`] = `\n\"<div class=\\\\\"arco-steps arco-steps-horizontal arco-steps-label-horizontal arco-steps-mode-navigation\\\\\">\n  <div class=\\\\\"arco-steps-item arco-steps-item-finish\\\\\">\n    <!--v-if-->\n    <div class=\\\\\"arco-steps-item-node\\\\\">\n      <div class=\\\\\"arco-steps-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-check\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n          <path d=\\\\\"M41.678 11.05 19.05 33.678 6.322 20.95\\\\\"></path>\n        </svg></div>\n    </div>\n    <div class=\\\\\"arco-steps-item-content\\\\\">\n      <div class=\\\\\"arco-steps-item-title\\\\\">Succeeded</div>\n      <!--v-if-->\n    </div>\n  </div>\n  <div class=\\\\\"arco-steps-item arco-steps-item-finish\\\\\">\n    <!--v-if-->\n    <div class=\\\\\"arco-steps-item-node\\\\\">\n      <div class=\\\\\"arco-steps-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-check\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n          <path d=\\\\\"M41.678 11.05 19.05 33.678 6.322 20.95\\\\\"></path>\n        </svg></div>\n    </div>\n    <div class=\\\\\"arco-steps-item-content\\\\\">\n      <div class=\\\\\"arco-steps-item-title\\\\\">Processing</div>\n      <!--v-if-->\n    </div>\n  </div>\n  <div class=\\\\\"arco-steps-item arco-steps-item-finish\\\\\">\n    <!--v-if-->\n    <div class=\\\\\"arco-steps-item-node\\\\\">\n      <div class=\\\\\"arco-steps-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-check\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n          <path d=\\\\\"M41.678 11.05 19.05 33.678 6.322 20.95\\\\\"></path>\n        </svg></div>\n    </div>\n    <div class=\\\\\"arco-steps-item-content\\\\\">\n      <div class=\\\\\"arco-steps-item-title\\\\\">Pending</div>\n      <!--v-if-->\n    </div>\n  </div>\n</div>\"\n`;\n\nexports[`<steps> demo: render [small] correctly 1`] = `\n\"<div>\n  <div class=\\\\\"arco-steps arco-steps-horizontal arco-steps-label-horizontal arco-steps-mode-default arco-steps-size-small\\\\\">\n    <div class=\\\\\"arco-steps-item arco-steps-item-finish\\\\\">\n      <!--v-if-->\n      <div class=\\\\\"arco-steps-item-node\\\\\">\n        <div class=\\\\\"arco-steps-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-check\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n            <path d=\\\\\"M41.678 11.05 19.05 33.678 6.322 20.95\\\\\"></path>\n          </svg></div>\n      </div>\n      <div class=\\\\\"arco-steps-item-content\\\\\">\n        <div class=\\\\\"arco-steps-item-title\\\\\">Succeeded</div>\n        <!--v-if-->\n      </div>\n    </div>\n    <div class=\\\\\"arco-steps-item arco-steps-item-finish\\\\\">\n      <!--v-if-->\n      <div class=\\\\\"arco-steps-item-node\\\\\">\n        <div class=\\\\\"arco-steps-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-check\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n            <path d=\\\\\"M41.678 11.05 19.05 33.678 6.322 20.95\\\\\"></path>\n          </svg></div>\n      </div>\n      <div class=\\\\\"arco-steps-item-content\\\\\">\n        <div class=\\\\\"arco-steps-item-title\\\\\">Processing</div>\n        <!--v-if-->\n      </div>\n    </div>\n    <div class=\\\\\"arco-steps-item arco-steps-item-finish\\\\\">\n      <!--v-if-->\n      <div class=\\\\\"arco-steps-item-node\\\\\">\n        <div class=\\\\\"arco-steps-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-check\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n            <path d=\\\\\"M41.678 11.05 19.05 33.678 6.322 20.95\\\\\"></path>\n          </svg></div>\n      </div>\n      <div class=\\\\\"arco-steps-item-content\\\\\">\n        <div class=\\\\\"arco-steps-item-title\\\\\">Pending</div>\n        <!--v-if-->\n      </div>\n    </div>\n  </div>\n  <div role=\\\\\"separator\\\\\" class=\\\\\"arco-divider arco-divider-horizontal\\\\\">\n    <!---->\n  </div>\n  <div style=\\\\\"line-height: 140px; text-align: center; color: rgb(201, 205, 212);\\\\\"> Step 2 Content </div>\n</div>\"\n`;\n\nexports[`<steps> demo: render [small-arrow] correctly 1`] = `\n\"<div>\n  <div class=\\\\\"arco-steps arco-steps-horizontal arco-steps-label-horizontal arco-steps-mode-arrow arco-steps-size-small\\\\\" style=\\\\\"margin-bottom: 20px;\\\\\">\n    <div class=\\\\\"arco-steps-item arco-steps-item-finish\\\\\">\n      <!--v-if-->\n      <!--v-if-->\n      <div class=\\\\\"arco-steps-item-content\\\\\">\n        <div class=\\\\\"arco-steps-item-title\\\\\">Succeeded</div>\n        <div class=\\\\\"arco-steps-item-description\\\\\">This is a description</div>\n      </div>\n    </div>\n    <div class=\\\\\"arco-steps-item arco-steps-item-finish\\\\\">\n      <!--v-if-->\n      <!--v-if-->\n      <div class=\\\\\"arco-steps-item-content\\\\\">\n        <div class=\\\\\"arco-steps-item-title\\\\\">Processing</div>\n        <div class=\\\\\"arco-steps-item-description\\\\\">This is a description</div>\n      </div>\n    </div>\n    <div class=\\\\\"arco-steps-item arco-steps-item-finish\\\\\">\n      <!--v-if-->\n      <!--v-if-->\n      <div class=\\\\\"arco-steps-item-content\\\\\">\n        <div class=\\\\\"arco-steps-item-title\\\\\">Pending</div>\n        <div class=\\\\\"arco-steps-item-description\\\\\">This is a description</div>\n      </div>\n    </div>\n  </div>\n  <div class=\\\\\"arco-steps arco-steps-horizontal arco-steps-label-horizontal arco-steps-mode-arrow arco-steps-size-small\\\\\">\n    <div class=\\\\\"arco-steps-item arco-steps-item-finish\\\\\">\n      <!--v-if-->\n      <!--v-if-->\n      <div class=\\\\\"arco-steps-item-content\\\\\">\n        <div class=\\\\\"arco-steps-item-title\\\\\">Succeeded</div>\n        <div class=\\\\\"arco-steps-item-description\\\\\">This is a description</div>\n      </div>\n    </div>\n    <div class=\\\\\"arco-steps-item arco-steps-item-finish\\\\\">\n      <!--v-if-->\n      <!--v-if-->\n      <div class=\\\\\"arco-steps-item-content\\\\\">\n        <div class=\\\\\"arco-steps-item-title\\\\\">Processing</div>\n        <div class=\\\\\"arco-steps-item-description\\\\\">This is a description</div>\n      </div>\n    </div>\n    <div class=\\\\\"arco-steps-item arco-steps-item-finish\\\\\">\n      <!--v-if-->\n      <!--v-if-->\n      <div class=\\\\\"arco-steps-item-content\\\\\">\n        <div class=\\\\\"arco-steps-item-title\\\\\">Pending</div>\n        <div class=\\\\\"arco-steps-item-description\\\\\">This is a description</div>\n      </div>\n    </div>\n  </div>\n</div>\"\n`;\n\nexports[`<steps> demo: render [vertical] correctly 1`] = `\n\"<div class=\\\\\"frame-bg\\\\\">\n  <div class=\\\\\"frame-body\\\\\">\n    <div class=\\\\\"frame-aside\\\\\">\n      <div class=\\\\\"arco-steps arco-steps-vertical arco-steps-label-horizontal arco-steps-mode-default\\\\\">\n        <div class=\\\\\"arco-steps-item arco-steps-item-finish\\\\\">\n          <div class=\\\\\"arco-steps-item-tail\\\\\"></div>\n          <div class=\\\\\"arco-steps-item-node\\\\\">\n            <div class=\\\\\"arco-steps-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-check\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n                <path d=\\\\\"M41.678 11.05 19.05 33.678 6.322 20.95\\\\\"></path>\n              </svg></div>\n          </div>\n          <div class=\\\\\"arco-steps-item-content\\\\\">\n            <div class=\\\\\"arco-steps-item-title\\\\\">Succeeded</div>\n            <!--v-if-->\n          </div>\n        </div>\n        <div class=\\\\\"arco-steps-item arco-steps-item-finish\\\\\">\n          <div class=\\\\\"arco-steps-item-tail\\\\\"></div>\n          <div class=\\\\\"arco-steps-item-node\\\\\">\n            <div class=\\\\\"arco-steps-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-check\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n                <path d=\\\\\"M41.678 11.05 19.05 33.678 6.322 20.95\\\\\"></path>\n              </svg></div>\n          </div>\n          <div class=\\\\\"arco-steps-item-content\\\\\">\n            <div class=\\\\\"arco-steps-item-title\\\\\">Processing</div>\n            <!--v-if-->\n          </div>\n        </div>\n        <div class=\\\\\"arco-steps-item arco-steps-item-finish\\\\\">\n          <div class=\\\\\"arco-steps-item-tail\\\\\"></div>\n          <div class=\\\\\"arco-steps-item-node\\\\\">\n            <div class=\\\\\"arco-steps-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-check\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n                <path d=\\\\\"M41.678 11.05 19.05 33.678 6.322 20.95\\\\\"></path>\n              </svg></div>\n          </div>\n          <div class=\\\\\"arco-steps-item-content\\\\\">\n            <div class=\\\\\"arco-steps-item-title\\\\\">Pending</div>\n            <!--v-if-->\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\\\\\"frame-main\\\\\">\n      <div class=\\\\\"main-content\\\\\">The content of this step.</div>\n      <div class=\\\\\"main-bottom\\\\\"><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal arco-btn-disabled\\\\\" type=\\\\\"button\\\\\" disabled=\\\\\"\\\\\">\n          <!--v-if--><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-left\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n            <path d=\\\\\"M32 8.4 16.444 23.956 32 39.513\\\\\"></path>\n          </svg> Back\n        </button><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n          <!--v-if--> Next <svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-right\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n            <path d=\\\\\"m16 39.513 15.556-15.557L16 8.4\\\\\"></path>\n          </svg>\n        </button></div>\n    </div>\n  </div>\n</div>\"\n`;\n"
  },
  {
    "path": "packages/web-vue/components/steps/__test__/demo.test.ts",
    "content": "import demoTest from '../../../scripts/demo-test';\n\ndemoTest('steps');\n"
  },
  {
    "path": "packages/web-vue/components/steps/__test__/index.test.ts",
    "content": "import { mount } from '@vue/test-utils';\nimport Steps from '../index';\n\ndescribe('Steps', () => {\n  test('should emit change event', () => {\n    const wrapper = mount(Steps, {\n      props: {\n        changeable: true,\n      },\n      slots: {\n        default:\n          '<a-step>Step1</a-step>' +\n          '<a-step>Step2</a-step>' +\n          '<a-step>Step3</a-step>',\n      },\n      global: {\n        plugins: [Steps],\n      },\n    });\n\n    const steps = wrapper.findAllComponents({ name: 'Step' });\n    steps[1].trigger('click');\n    expect((wrapper.emitted('change')?.[0] as any[])[0]).toEqual(2);\n  });\n\n  test('nested step can have correct index', () => {\n    const wrapper = mount(Steps, {\n      props: {\n        changeable: true,\n      },\n      slots: {\n        default:\n          '<div><a-step>Step1</a-step></div>' +\n          '<div><a-step>Step2</a-step></div>' +\n          '<div><a-step>Step3</a-step></div>',\n      },\n      global: {\n        plugins: [Steps],\n      },\n    });\n\n    const steps = wrapper.findAllComponents({ name: 'Step' });\n    expect((steps[0].vm.$ as any).setupState.stepNumber).toEqual(1);\n    expect((steps[1].vm.$ as any).setupState.stepNumber).toEqual(2);\n    expect((steps[2].vm.$ as any).setupState.stepNumber).toEqual(3);\n  });\n});\n"
  },
  {
    "path": "packages/web-vue/components/steps/context.ts",
    "content": "import { InjectionKey } from 'vue';\nimport { StepData, StepStatus, StepsType } from './interface';\nimport { Direction } from '../_utils/constant';\n\nexport interface StepsContext {\n  current: number;\n  direction: Direction;\n  labelPlacement: Direction;\n  lineLess: boolean;\n  type: StepsType;\n  errorSteps: number[];\n  addItem: (step: number, data: StepData) => void;\n  removeItem: (step: number) => void;\n  getStatus: (step: number) => StepStatus;\n  onClick: (step: number, ev: Event) => void;\n  parentCls: string;\n}\n\nexport const stepsInjectionKey: InjectionKey<StepsContext> =\n  Symbol('ArcoSteps');\n"
  },
  {
    "path": "packages/web-vue/components/steps/index.ts",
    "content": "import type { App } from 'vue';\nimport type { ArcoOptions } from '../_utils/types';\nimport { setGlobalConfig, getComponentPrefix } from '../_utils/global-config';\nimport _Steps from './steps.vue';\nimport _StepsStep from './step.vue';\n\nconst Steps = Object.assign(_Steps, {\n  Step: _StepsStep,\n  install: (app: App, options?: ArcoOptions) => {\n    setGlobalConfig(app, options);\n    const componentPrefix = getComponentPrefix(options);\n\n    app.component(componentPrefix + _Steps.name, _Steps);\n    app.component(componentPrefix + _StepsStep.name, _StepsStep);\n  },\n});\n\nexport type StepsInstance = InstanceType<typeof _Steps>;\nexport type StepsStepInstance = InstanceType<typeof _StepsStep>;\n\nexport { _StepsStep as Step };\n\nexport default Steps;\n"
  },
  {
    "path": "packages/web-vue/components/steps/interface.ts",
    "content": "export const STEPS_TYPES = ['default', 'arrow', 'dot', 'navigation'] as const;\nexport type StepsType = typeof STEPS_TYPES[number];\n\nexport const STEP_STATUSES = ['wait', 'process', 'finish', 'error'] as const;\nexport type StepStatus = typeof STEP_STATUSES[number];\n\nexport interface StepData {\n  step: number;\n  status: StepStatus;\n}\n"
  },
  {
    "path": "packages/web-vue/components/steps/step.vue",
    "content": "<template>\n  <div ref=\"itemRef\" :class=\"cls\" @click=\"handleClick\">\n    <div v-if=\"showTail\" :class=\"`${prefixCls}-tail`\" />\n    <div v-if=\"type !== 'arrow'\" :class=\"`${prefixCls}-node`\">\n      <slot name=\"node\" :step=\"stepNumber\" :status=\"computedStatus\">\n        <div v-if=\"type !== 'dot'\" :class=\"iconCls\">\n          <slot name=\"icon\" :step=\"stepNumber\" :status=\"computedStatus\">\n            <icon-check v-if=\"computedStatus === 'finish'\" />\n            <icon-close v-else-if=\"computedStatus === 'error'\" />\n            <template v-else>{{ stepNumber }}</template>\n          </slot>\n        </div>\n      </slot>\n    </div>\n    <div :class=\"`${prefixCls}-content`\">\n      <div :class=\"`${prefixCls}-title`\">\n        <slot>{{ title }}</slot>\n      </div>\n      <div\n        v-if=\"description || $slots.description\"\n        :class=\"`${prefixCls}-description`\"\n      >\n        <slot name=\"description\">\n          {{ description }}\n        </slot>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  getCurrentInstance,\n  inject,\n  onBeforeUnmount,\n  PropType,\n  reactive,\n  ref,\n  watch,\n} from 'vue';\nimport { getPrefixCls } from '../_utils/global-config';\nimport IconCheck from '../icon/icon-check';\nimport IconClose from '../icon/icon-close';\nimport { StepStatus, StepsType } from './interface';\nimport { Direction } from '../_utils/constant';\nimport { stepsInjectionKey } from './context';\nimport { useIndex } from '../_hooks/use-index';\n\nexport default defineComponent({\n  name: 'Step',\n  components: {\n    IconCheck,\n    IconClose,\n  },\n  props: {\n    /**\n     * @zh 步骤的标题\n     * @en Title of the step\n     */\n    title: String,\n    /**\n     * @zh 步骤的描述信息\n     * @en Description of the step\n     */\n    description: String,\n    /**\n     * @zh 步骤的状态\n     * @en Status of the step\n     * @values 'wait', 'process', 'finish', 'error'\n     */\n    status: {\n      type: String as PropType<StepStatus>,\n    },\n    /**\n     * @zh 是否禁用\n     * @en Whether to disable\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n  },\n  /**\n   * @zh 节点\n   * @en Node\n   * @slot node\n   * @binding {number} step\n   * @binding {string} status\n   */\n  /**\n   * @zh 图标\n   * @en Icon\n   * @slot icon\n   * @binding {number} step\n   * @binding {string} status\n   */\n  /**\n   * @zh 描述内容\n   * @en Description\n   * @slot description\n   */\n  setup(props) {\n    const prefixCls = getPrefixCls('steps-item');\n    const instance = getCurrentInstance();\n    const iconCls = getPrefixCls('steps-icon');\n\n    const stepsCtx = inject(stepsInjectionKey, undefined);\n\n    const type = computed(() => stepsCtx?.type ?? 'default');\n\n    const itemRef = ref<HTMLElement>();\n    const { computedIndex } = useIndex({\n      itemRef,\n      selector: `.${prefixCls}`,\n      parentClassName: stepsCtx?.parentCls,\n    });\n    const stepNumber = computed(() => computedIndex.value + 1);\n\n    const computedStatus = computed(\n      () => props.status ?? stepsCtx?.getStatus(stepNumber.value) ?? 'process'\n    );\n\n    const nextStepError = computed(\n      () => stepsCtx?.errorSteps.includes(stepNumber.value + 1) ?? false\n    );\n\n    if (instance) {\n      stepsCtx?.addItem(\n        instance.uid,\n        reactive({\n          step: stepNumber,\n          status: computedStatus,\n        })\n      );\n    }\n\n    onBeforeUnmount(() => {\n      if (instance) {\n        stepsCtx?.removeItem(instance.uid);\n      }\n    });\n\n    const showTail = computed(\n      () =>\n        !stepsCtx?.lineLess &&\n        (stepsCtx?.labelPlacement === 'vertical' ||\n          stepsCtx?.direction === 'vertical')\n    );\n\n    const handleClick = (ev: Event) => {\n      if (!props.disabled) {\n        stepsCtx?.onClick(stepNumber.value, ev);\n      }\n    };\n\n    const cls = computed(() => [\n      prefixCls,\n      `${prefixCls}-${computedStatus.value}`,\n      {\n        [`${prefixCls}-active`]: stepNumber.value === stepsCtx?.current,\n        [`${prefixCls}-next-error`]: nextStepError.value,\n        [`${prefixCls}-disabled`]: props.disabled,\n        // [`${prefixCls}-custom`]: !!icon,\n      },\n    ]);\n\n    return {\n      prefixCls,\n      iconCls,\n      cls,\n      itemRef,\n      showTail,\n      stepNumber,\n      computedStatus,\n      type,\n      handleClick,\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/steps/steps.vue",
    "content": "<template>\n  <div :class=\"cls\">\n    <slot />\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  PropType,\n  provide,\n  reactive,\n  ref,\n  toRefs,\n} from 'vue';\nimport { Direction } from '../_utils/constant';\nimport { getPrefixCls } from '../_utils/global-config';\nimport { StepData, StepStatus, StepsType } from './interface';\nimport { stepsInjectionKey } from './context';\n\nexport default defineComponent({\n  name: 'Steps',\n  props: {\n    /**\n     * @zh 步骤条的类型\n     * @en The type of the steps\n     * @values 'default', 'arrow', 'dot', 'navigation'\n     */\n    type: {\n      type: String as PropType<StepsType>,\n      default: 'default',\n    },\n    /**\n     * @zh 步骤条的显示方向\n     * @en The direction of the steps\n     * @values 'horizontal', 'vertical'\n     */\n    direction: {\n      type: String as PropType<Direction>,\n      default: 'horizontal',\n    },\n    /**\n     * @zh 标签描述文字放置的位置\n     * @en The location where the label description is placed.\n     * @values 'horizontal', 'vertical'\n     */\n    labelPlacement: {\n      type: String as PropType<Direction>,\n      default: 'horizontal',\n    },\n    /**\n     * @zh 当前步骤数\n     * @en Number of current step\n     * @vModel\n     */\n    current: {\n      type: Number,\n      default: undefined,\n    },\n    /**\n     * @zh 默认的步骤数（非受控状态）\n     * @en The default number of step (uncontrolled state)\n     */\n    defaultCurrent: {\n      type: Number,\n      default: 1,\n    },\n    /**\n     * @zh 当前步骤的状态\n     * @en The status of the current step\n     * @values 'wait', 'process', 'finish', 'error'\n     */\n    status: {\n      type: String as PropType<StepStatus>,\n      default: 'process',\n    },\n    /**\n     * @zh 是否使用无连接线样式\n     * @en Whether to use the connectionless style\n     */\n    lineLess: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 是否使用小型步骤条\n     * @en Whether to use a small step bar\n     */\n    small: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 是否可以点击切换\n     * @en Whether you can click to switch\n     */\n    changeable: {\n      type: Boolean,\n      default: false,\n    },\n  },\n  emits: {\n    'update:current': (step: number) => true,\n    /**\n     * @zh 步骤数发生改变时触发\n     * @en Triggered when the number of steps changes\n     * @param {number} step\n     * @param {Event} ev\n     */\n    'change': (step: number, ev: Event) => true,\n  },\n  setup(props, { emit, slots }) {\n    const { type, lineLess } = toRefs(props);\n    const prefixCls = getPrefixCls('steps');\n    const _current = ref(props.defaultCurrent);\n    const computedCurrent = computed(() => props.current ?? _current.value);\n\n    const direction = computed(() =>\n      ['navigation', 'arrow'].includes(props.type)\n        ? 'horizontal'\n        : props.direction\n    );\n\n    const labelPlacement = computed(() => {\n      if (props.type === 'dot') {\n        return direction.value === 'vertical' ? 'horizontal' : 'vertical';\n      }\n      if (props.type === 'navigation') {\n        return 'horizontal';\n      }\n      return props.labelPlacement;\n    });\n\n    const getStatus = (step: number): StepStatus => {\n      if (step < computedCurrent.value) {\n        return 'finish';\n      }\n      if (step > computedCurrent.value) {\n        return 'wait';\n      }\n      return props.status;\n    };\n\n    const handleClick = (step: number, e: Event) => {\n      if (props.changeable) {\n        _current.value = step;\n        emit('update:current', step);\n        emit('change', step, e);\n      }\n    };\n\n    const stepMap = reactive(new Map<number, StepData>());\n    const errorSteps = computed(() =>\n      Array.from(stepMap.values())\n        .filter((item) => item.status === 'error')\n        .map((item) => item.step)\n    );\n\n    const addItem = (step: number, data: StepData) => {\n      stepMap.set(step, data);\n    };\n\n    const removeItem = (step: number) => {\n      stepMap.delete(step);\n    };\n\n    const cls = computed(() => [\n      prefixCls,\n      `${prefixCls}-${direction.value}`,\n      `${prefixCls}-label-${labelPlacement.value}`,\n      `${prefixCls}-mode-${type.value}`,\n      {\n        [`${prefixCls}-changeable`]: props.changeable,\n        [`${prefixCls}-size-small`]: props.small && props.type !== 'dot',\n        [`${prefixCls}-line-less`]: lineLess.value,\n      },\n    ]);\n\n    provide(\n      stepsInjectionKey,\n      reactive({\n        type,\n        direction,\n        labelPlacement,\n        lineLess,\n        current: computedCurrent,\n        errorSteps,\n        getStatus,\n        addItem,\n        removeItem,\n        onClick: handleClick,\n        parentCls: prefixCls,\n      })\n    );\n\n    return {\n      cls,\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/steps/style/arrow.less",
    "content": "@import './token.less';\n\n// Arrow\n.@{steps-prefix-cls} {\n  &-mode-arrow &-item {\n    position: relative;\n    display: flex;\n    flex: 1;\n    align-items: center;\n    height: @steps-size-default-arrow;\n    overflow: visible;\n    white-space: nowrap;\n\n    &:not(:last-child) {\n      margin-right: @steps-arrow-size-item-gap;\n    }\n  }\n\n  &-mode-arrow &-item-wait {\n    background-color: @steps-arrow-color-item-bg_wait;\n  }\n\n  &-mode-arrow &-item-process {\n    background-color: @steps-arrow-color-item-bg_process;\n  }\n\n  &-mode-arrow &-item-finish {\n    background-color: @steps-arrow-color-item-bg_finish;\n  }\n\n  &-mode-arrow &-item-error {\n    background-color: @steps-arrow-color-item-bg_error;\n  }\n\n  &-mode-arrow &-item-content {\n    display: inline-block;\n    box-sizing: border-box;\n  }\n\n  &-mode-arrow &-item:first-child &-item-content {\n    padding-left: @steps-arrow-size-default-title-padding-left;\n  }\n\n  &-mode-arrow &-item:not(:first-child) &-item-content {\n    padding-left: @steps-arrow-size-default-title-padding-left +\n      (@steps-size-default-arrow / 2);\n  }\n\n  &-mode-arrow &-item-title {\n    position: relative;\n    display: inline-block;\n    font-size: @steps-size-default-font-size-title;\n    white-space: nowrap;\n\n    &::after {\n      display: none !important;\n    }\n  }\n\n  &-mode-arrow &-item-wait &-item-title {\n    color: @steps-arrow-color-item-title_wait;\n  }\n\n  &-mode-arrow &-item-process &-item-title {\n    color: @steps-arrow-color-item-title_process;\n  }\n\n  &-mode-arrow &-item-finish &-item-title {\n    color: @steps-arrow-color-item-title_finish;\n  }\n\n  &-mode-arrow &-item-error &-item-title {\n    color: @steps-arrow-color-item-title_error;\n  }\n\n  &-mode-arrow &-item-active &-item-title {\n    font-weight: @steps-arrow-font-weight-item-title_active;\n  }\n\n  &-mode-arrow &-item-description {\n    max-width: none;\n    margin-top: @steps-arrow-item-description-margin-top;\n    font-size: @steps-size-default-font-size-description;\n    white-space: nowrap;\n  }\n\n  &-mode-arrow &-item-wait &-item-description {\n    color: @steps-arrow-color-item-description_wait;\n  }\n\n  &-mode-arrow &-item-process &-item-description {\n    color: @steps-arrow-color-item-description_process;\n  }\n\n  &-mode-arrow &-item-finish &-item-description {\n    color: @steps-arrow-color-item-description_finish;\n  }\n\n  &-mode-arrow &-item-error &-item-description {\n    color: @steps-arrow-color-item-description_error;\n  }\n\n  // 前箭头\n  &-mode-arrow &-item:not(:first-child)::before {\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: 1;\n    display: block;\n    width: 0;\n    height: 0;\n    border-top: (@steps-size-default-arrow / 2) solid transparent;\n    border-bottom: (@steps-size-default-arrow / 2) solid transparent;\n    border-left: (@steps-size-default-arrow / 2) solid var(~'@{arco-cssvars-prefix}-color-bg-2');\n    content: '';\n  }\n\n  // 后箭头\n  &-mode-arrow &-item:not(:last-child)::after {\n    position: absolute;\n    top: 0;\n    right: -(@steps-size-default-arrow / 2);\n    z-index: 2;\n    display: block;\n    clear: both;\n    width: 0;\n    height: 0;\n    border-top: (@steps-size-default-arrow / 2) solid transparent;\n    border-bottom: (@steps-size-default-arrow / 2) solid transparent;\n    content: '';\n  }\n\n  &-mode-arrow &-item:not(:last-child)&-item-wait::after {\n    border-left: (@steps-size-default-arrow / 2) solid\n      @steps-arrow-color-item-bg_wait;\n  }\n\n  &-mode-arrow &-item:not(:last-child)&-item-process::after {\n    border-left: (@steps-size-default-arrow / 2) solid\n      @steps-arrow-color-item-bg_process;\n  }\n\n  &-mode-arrow &-item:not(:last-child)&-item-error::after {\n    border-left: (@steps-size-default-arrow / 2) solid\n      @steps-arrow-color-item-bg_error;\n  }\n\n  &-mode-arrow &-item:not(:last-child)&-item-finish::after {\n    border-left: (@steps-size-default-arrow / 2) solid\n      @steps-arrow-color-item-bg_finish;\n  }\n\n  // Small\n  &-mode-arrow&-size-small &-item {\n    height: @steps-size-small-arrow;\n\n    &-title {\n      font-size: @steps-size-small-font-size-title;\n    }\n\n    &-description {\n      display: none;\n    }\n\n    &:not(:first-child) {\n      &::before {\n        border-top: (@steps-size-small-arrow / 2) solid transparent;\n        border-bottom: (@steps-size-small-arrow / 2) solid transparent;\n        border-left: (@steps-size-small-arrow / 2) solid var(~'@{arco-cssvars-prefix}-color-bg-2');\n      }\n    }\n\n    &:not(:last-child)::after {\n      right: -(@steps-size-small-arrow / 2);\n      border-top: (@steps-size-small-arrow / 2) solid transparent;\n      border-bottom: (@steps-size-small-arrow / 2) solid transparent;\n      border-left: (@steps-size-small-arrow / 2) solid\n        @steps-arrow-color-item-bg_wait;\n    }\n  }\n\n  &-mode-arrow&-size-small &-item:first-child &-item-content {\n    padding-left: @steps-arrow-size-small-title-padding-left;\n  }\n\n  &-mode-arrow&-size-small &-item:not(:first-child) &-item-content {\n    padding-left: @steps-arrow-size-small-title-padding-left +\n      (@steps-size-small-arrow / 2);\n  }\n\n  &-mode-arrow&-size-small &-item-error {\n    &:not(:last-child)::after {\n      border-left: (@steps-size-small-arrow / 2) solid\n        @steps-arrow-color-item-bg_error;\n    }\n  }\n\n  &-mode-arrow&-size-small &-item:not(:last-child)&-item-wait::after {\n    border-left: (@steps-size-small-arrow / 2) solid\n      @steps-arrow-color-item-bg_wait;\n  }\n\n  &-mode-arrow&-size-small &-item:not(:last-child)&-item-process::after {\n    border-left: (@steps-size-small-arrow / 2) solid\n      @steps-arrow-color-item-bg_process;\n  }\n\n  &-mode-arrow&-size-small &-item:not(:last-child)&-item-finish::after {\n    border-left: (@steps-size-small-arrow / 2) solid\n      @steps-arrow-color-item-bg_finish;\n  }\n}\n"
  },
  {
    "path": "packages/web-vue/components/steps/style/circle.less",
    "content": "@import './token.less';\n\n@steps-size-default-item-icon-margin-left: (\n    @steps-label-vertical-content-width / 2\n  ) - (@steps-size-default / 2);\n@steps-size-small-item-icon-margin-left: (\n    @steps-label-vertical-content-width / 2\n  ) - (@steps-size-small / 2);\n\n// Circle\n.@{steps-prefix-cls} {\n  &-item {\n    position: relative;\n    flex: 1;\n    margin-right: @steps-circle-size-item-icon-gap;\n    overflow: hidden;\n    white-space: nowrap;\n    text-align: left;\n\n    &:last-child {\n      flex: none;\n      margin-right: 0;\n    }\n  }\n\n  &-item-active &-item-title {\n    font-weight: @steps-circle-font-weight-item-title_active;\n  }\n\n  &-item-node {\n    display: inline-block;\n    margin-right: @steps-circle-size-item-icon-gap;\n    font-weight: @font-weight-500;\n    font-size: @steps-size-default-font-size-title;\n    vertical-align: top;\n  }\n\n  &-icon {\n    box-sizing: border-box;\n    width: @steps-size-default;\n    height: @steps-size-default;\n    line-height: @steps-size-default - 2;\n    text-align: center;\n    border-radius: @steps-circle-border-radius-item-icon;\n    font-size: @steps-size-default-font-size-icon;\n  }\n\n  &-item-wait &-icon {\n    color: @steps-circle-color-item-icon-text_wait;\n    background-color: @steps-circle-color-item-bg_wait;\n    border: 1px solid @steps-circle-color-item-border_wait;\n  }\n\n  &-item-process &-icon {\n    color: @steps-circle-color-item-icon-text_process;\n    background-color: @steps-circle-color-item-bg_process;\n    border: 1px solid @steps-circle-color-item-border_process;\n  }\n\n  &-item-finish &-icon {\n    color: @steps-circle-color-item-icon-text_finish;\n    background-color: @steps-circle-color-item-bg_finish;\n    border: 1px solid @steps-circle-color-item-border_finish;\n  }\n\n  &-item-error &-icon {\n    color: @steps-circle-color-item-icon-text_error;\n    background-color: @steps-circle-color-item-bg_error;\n    border: 1px solid @steps-circle-color-item-border_error;\n  }\n\n  &-item-title {\n    position: relative;\n    display: inline-block;\n    padding-right: @steps-circle-size-item-icon-gap;\n    color: @steps-circle-color-item-title_wait;\n    font-size: @steps-size-default-font-size-title;\n    line-height: @steps-size-default;\n    white-space: nowrap;\n  }\n\n  &-item-wait &-item-title {\n    color: @steps-circle-color-item-title_wait;\n  }\n\n  &-item-process &-item-title {\n    color: @steps-circle-color-item-title_process;\n  }\n\n  &-item-finish &-item-title {\n    color: @steps-circle-color-item-title_finish;\n  }\n\n  &-item-error &-item-title {\n    color: @steps-circle-color-item-title_error;\n  }\n\n  &-item-content {\n    display: inline-block;\n  }\n\n  &-item-description {\n    max-width: @steps-direction-horizontal-description-width;\n    margin-top: @steps-circle-horizontal-item-description-margin-top;\n    color: @steps-circle-color-item-description_wait;\n    font-size: @steps-size-default-font-size-description;\n    white-space: normal;\n  }\n\n  &-item-wait &-item-description {\n    color: @steps-circle-color-item-description_wait;\n  }\n\n  &-item-process &-item-description {\n    color: @steps-circle-color-item-description_process;\n  }\n\n  &-item-finish &-item-description {\n    color: @steps-circle-color-item-description_finish;\n  }\n\n  &-item-error &-item-description {\n    color: @steps-circle-color-item-description_error;\n  }\n\n  // label horizontal tail style\n  &-label-horizontal &-item:not(:last-child) &-item-title {\n    &::after {\n      position: absolute;\n      top: ((@steps-size-default - @steps-circle-size-item-tail) / 2);\n      left: 100%;\n      display: block;\n      box-sizing: border-box;\n      width: 5000px;\n      height: @steps-circle-size-item-tail;\n      background-color: @steps-circle-color-item-tail_wait;\n      content: '';\n    }\n  }\n\n  &-label-horizontal &-item&-item-process &-item-title::after {\n    background-color: @steps-circle-color-item-tail_wait;\n  }\n\n  &-label-horizontal &-item&-item-finish &-item-title::after {\n    background-color: @steps-circle-color-item-tail_process;\n  }\n\n  &-label-horizontal &-item&-item-next-error &-item-title::after {\n    background-color: @steps-circle-color-item-tail_error;\n  }\n\n  // label vertical & direction vertical tail style\n  &-item:not(:last-child) &-item-tail {\n    position: absolute;\n    top: ((@steps-size-default - @steps-circle-size-item-tail) / 2);\n    box-sizing: border-box;\n    width: 100%;\n    height: @steps-circle-size-item-tail;\n\n    &::after {\n      display: block;\n      width: 100%;\n      height: 100%;\n      background-color: @steps-circle-color-item-tail_wait;\n      content: '';\n    }\n  }\n\n  &-vertical &-item:not(:last-child) &-item-tail {\n    position: absolute;\n    top: 0;\n    left: ((@steps-size-default - @steps-circle-size-item-tail) / 2);\n    box-sizing: border-box;\n    width: @steps-circle-size-item-tail;\n    height: 100%;\n    padding: (@steps-size-default + 6px) 0 6px;\n\n    &::after {\n      display: block;\n      width: 100%;\n      height: 100%;\n      background-color: @steps-circle-color-item-tail_wait;\n      content: '';\n    }\n  }\n\n  &-size-small&-vertical &-item:not(:last-child) &-item-tail {\n    left: ((@steps-size-small - @steps-circle-size-item-tail) / 2);\n    padding: (@steps-size-small + 6px) 0 6px;\n  }\n\n  &-item:not(:last-child)&-item-finish &-item-tail::after {\n    background-color: @steps-circle-color-item-tail_process;\n  }\n\n  &-item:not(:last-child)&-item-next-error &-item-tail::after {\n    background-color: @steps-circle-color-item-tail_error;\n  }\n\n  // Size\n  &-size-small:not(&-vertical) &-item:not(:last-child) &-item-tail {\n    top: ((@steps-size-small - @steps-circle-size-item-tail) / 2);\n  }\n\n  &-size-small &-item {\n    &-node {\n      font-size: @steps-size-small-font-size-title;\n    }\n\n    &-title {\n      font-size: @steps-size-small-font-size-title;\n      line-height: @steps-size-small;\n    }\n\n    &-description {\n      font-size: @steps-size-small-font-size-description;\n    }\n  }\n\n  &-size-small &-icon {\n    width: @steps-size-small;\n    height: @steps-size-small;\n    font-size: @steps-size-small-font-size-icon;\n    line-height: @steps-size-small - 2;\n  }\n\n  &-size-small&-label-horizontal &-item:not(:last-child) &-item-title {\n    &::after {\n      top: ((@steps-size-small - @steps-circle-size-item-tail) / 2);\n    }\n  }\n\n  // Label vertical\n  &-label-vertical &-item {\n    overflow: visible;\n\n    &-title {\n      margin-top: @steps-circle-vertical-item-description-margin-top;\n      padding-right: 0;\n    }\n\n    &-node {\n      margin-left: @steps-size-default-item-icon-margin-left;\n    }\n\n    &-tail {\n      left: @steps-size-default-item-icon-margin-left + @steps-size-default +\n        @steps-circle-size-item-icon-gap;\n      padding-right: @steps-size-default + @steps-circle-size-item-icon-gap;\n    }\n  }\n\n  &-label-vertical&-size-small &-item {\n    &-node {\n      margin-left: @steps-size-small-item-icon-margin-left;\n    }\n\n    &-tail {\n      left: @steps-size-small-item-icon-margin-left + @steps-size-small +\n        @steps-circle-size-item-icon-gap;\n      padding-right: @steps-size-small + @steps-circle-size-item-icon-gap;\n    }\n  }\n}\n"
  },
  {
    "path": "packages/web-vue/components/steps/style/dot.less",
    "content": "@import './token.less';\n\n@steps-dot-item-icon-margin-left: (@steps-label-vertical-content-width / 2) -\n  (@steps-dot-size-item-icon / 2);\n@steps-dot-vertical-item-dot-margin-top-active: @steps-dot-vertical-item-dot-margin-top -\n  (@steps-dot-size-item-icon-active - @steps-dot-size-item-icon);\n// Dot\n.@{steps-prefix-cls} {\n  &-mode-dot &-item {\n    position: relative;\n    flex: 1;\n    margin-right: @steps-dot-size-item-icon + @steps-dot-size-item-icon-gap * 2;\n    overflow: visible;\n    white-space: nowrap;\n    text-align: left;\n\n    &:last-child {\n      flex: none;\n      margin-right: 0;\n    }\n  }\n\n  &-mode-dot &-item-active &-item-title {\n    font-weight: @steps-dot-font-weight-item-title_active;\n  }\n\n  &-mode-dot &-item-node {\n    display: inline-block;\n    box-sizing: border-box;\n    width: @steps-dot-size-item-icon;\n    height: @steps-dot-size-item-icon;\n    vertical-align: top;\n    border-radius: @steps-dot-border-radius-item-icon;\n  }\n\n  &-mode-dot &-item-active &-item-node {\n    width: @steps-dot-size-item-icon-active;\n    height: @steps-dot-size-item-icon-active;\n  }\n\n  &-mode-dot &-item-wait &-item-node {\n    background-color: @steps-dot-color-item-bg_wait;\n    border-color: @steps-dot-color-item-border_wait;\n  }\n\n  &-mode-dot &-item-process &-item-node {\n    background-color: @steps-dot-color-item-bg_process;\n    border-color: @steps-dot-color-item-border_process;\n  }\n\n  &-mode-dot &-item-finish &-item-node {\n    background-color: @steps-dot-color-item-bg_finish;\n    border-color: @steps-dot-color-item-border_finish;\n  }\n\n  &-mode-dot &-item-error &-item-node {\n    background-color: @steps-dot-color-item-bg_error;\n    border-color: @steps-dot-color-item-border_error;\n  }\n\n  &-mode-dot&-horizontal &-item-node {\n    margin-left: @steps-dot-item-icon-margin-left;\n  }\n\n  &-mode-dot&-horizontal &-item-active &-item-node {\n    margin-top: -((@steps-dot-size-item-icon-active - @steps-dot-size-item-icon) /\n          2);\n    margin-left: @steps-dot-item-icon-margin-left -\n      ((@steps-dot-size-item-icon-active - @steps-dot-size-item-icon) / 2);\n  }\n\n  &-mode-dot &-item-content {\n    display: inline-block;\n  }\n\n  &-mode-dot &-item-title {\n    position: relative;\n    display: inline-block;\n    margin-top: @steps-dot-horizontal-item-title-margin-top;\n    font-size: @steps-size-default-font-size-title;\n  }\n\n  &-mode-dot &-item-wait &-item-title {\n    color: @steps-dot-color-item-title_wait;\n  }\n\n  &-mode-dot &-item-process &-item-title {\n    color: @steps-dot-color-item-title_process;\n  }\n\n  &-mode-dot &-item-finish &-item-title {\n    color: @steps-dot-color-item-title_finish;\n  }\n\n  &-mode-dot &-item-error &-item-title {\n    color: @steps-dot-color-item-title_error;\n  }\n\n  &-mode-dot &-item-description {\n    margin-top: @steps-dot-horizontal-item-description-margin-top;\n    font-size: @steps-size-default-font-size-description;\n    white-space: normal;\n  }\n\n  &-mode-dot &-item-wait &-item-description {\n    color: @steps-dot-color-item-description_wait;\n  }\n\n  &-mode-dot &-item-process &-item-description {\n    color: @steps-dot-color-item-description_process;\n  }\n\n  &-mode-dot &-item-finish &-item-description {\n    color: @steps-dot-color-item-description_finish;\n  }\n\n  &-mode-dot &-item-error &-item-description {\n    color: @steps-dot-color-item-description_error;\n  }\n\n  &-mode-dot &-item:not(:last-child) &-item-tail {\n    position: absolute;\n    top: ((@steps-dot-size-item-icon - @steps-dot-size-item-tail) / 2);\n    left: @steps-dot-item-icon-margin-left + @steps-dot-size-item-icon +\n      @steps-dot-size-item-icon-gap;\n    box-sizing: border-box;\n    width: 100%;\n    height: @steps-dot-size-item-tail;\n    background-color: @steps-dot-color-item-tail_wait;\n  }\n\n  &-mode-dot &-item:not(:last-child)&-item-process &-item-tail {\n    background-color: @steps-dot-color-item-tail_wait;\n  }\n\n  &-mode-dot &-item:not(:last-child)&-item-finish &-item-tail {\n    background-color: @steps-dot-color-item-tail_process;\n  }\n\n  &-mode-dot &-item:not(:last-child)&-item-next-error &-item-tail {\n    background-color: @steps-dot-color-item-tail_error;\n  }\n\n  // Dot vertical\n  &-mode-dot&-vertical &-item-node {\n    margin-right: @steps-dot-vertical-item-icon-margin-right;\n  }\n\n  &-mode-dot&-vertical &-item-content {\n    overflow: hidden;\n  }\n\n  &-mode-dot&-vertical &-item-title {\n    margin-top: @steps-dot-vertical-item-dot-margin-top + (@steps-dot-size-item-icon / 2) - (@steps-size-default / 2);\n  }\n\n  &-mode-dot&-vertical &-item-description {\n    margin-top: @steps-dot-vertical-item-description-margin-top;\n  }\n\n  &-mode-dot&-vertical &-item:not(:last-child) &-item-tail {\n    position: absolute;\n    bottom: 0;\n    left: (@steps-dot-size-item-icon / 2);\n    box-sizing: border-box;\n    width: 1px;\n    height: 100%;\n    padding-top: (\n      @steps-dot-size-item-icon + 4px + @steps-dot-size-item-icon-gap\n    );\n    padding-bottom: 2px;\n    background-color: transparent;\n    transform: translateX(-50%);\n\n    &::after {\n      display: block;\n      width: 100%;\n      height: 100%;\n      background-color: @steps-dot-color-item-tail_wait;\n      content: '';\n    }\n  }\n\n  &-mode-dot&-vertical\n    &-item:not(:last-child)&-item-process\n    &-item-tail::after {\n    background-color: @steps-dot-color-item-tail_wait;\n  }\n\n  &-mode-dot&-vertical &-item:not(:last-child)&-item-finish &-item-tail::after {\n    background-color: @steps-dot-color-item-tail_process;\n  }\n\n  &-mode-dot&-vertical\n    &-item:not(:last-child)&-item-next-error\n    &-item-tail::after {\n    background-color: @steps-dot-color-item-tail_error;\n  }\n\n  &-mode-dot&-vertical &-item &-item-node {\n    margin-top: @steps-dot-vertical-item-dot-margin-top;\n  }\n\n  &-mode-dot&-vertical &-item-active &-item-node {\n    margin-top: @steps-dot-vertical-item-dot-margin-top-active;\n    margin-left: -((\n            @steps-dot-size-item-icon-active - @steps-dot-size-item-icon\n          ) / 2);\n  }\n}\n"
  },
  {
    "path": "packages/web-vue/components/steps/style/index.less",
    "content": "@import './token.less';\n@import './circle.less';\n@import './dot.less';\n@import './arrow.less';\n@import './navigation.less';\n\n@steps-prefix-cls: ~'@{prefix}-steps';\n\n.@{steps-prefix-cls} {\n  display: flex;\n\n  &-changeable {\n    .@{steps-prefix-cls}-item-title,\n    .@{steps-prefix-cls}-item-description {\n      transition: all @transition-duration-1 @transition-timing-function-linear;\n    }\n  }\n\n  &-changeable &-item:not(&-item-active):not(&-item-disabled) {\n    cursor: pointer;\n\n    &:hover {\n      .@{steps-prefix-cls}-item-content {\n        .@{steps-prefix-cls}-item-title,\n        .@{steps-prefix-cls}-item-description {\n          color: @color-primary-6;\n        }\n      }\n    }\n  }\n}\n\n// Line Less\n.@{steps-prefix-cls} {\n  &-line-less &-item-title::after {\n    display: none !important;\n  }\n}\n\n// Direction\n.@{steps-prefix-cls} {\n  &-vertical {\n    flex-direction: column;\n  }\n\n  &-vertical &-item {\n    &:not(:last-child) {\n      min-height: 90px;\n    }\n\n    &-title::after {\n      display: none !important;\n    }\n\n    &-description {\n      max-width: none;\n    }\n  }\n}\n\n// Label vertical\n.@{steps-prefix-cls} {\n  &-label-vertical &-item {\n    &-content {\n      display: block;\n      width: @steps-label-vertical-content-width;\n      text-align: center;\n    }\n\n    &-description {\n      max-width: none;\n    }\n  }\n}\n"
  },
  {
    "path": "packages/web-vue/components/steps/style/index.ts",
    "content": "import '../../style/index.less';\nimport './index.less';\n"
  },
  {
    "path": "packages/web-vue/components/steps/style/navigation.less",
    "content": "@import './token.less';\n\n// Navigation\n.@{steps-prefix-cls} {\n  &-mode-navigation&-label-horizontal\n    &-item:not(:last-child)\n    &-item-title::after {\n    display: none;\n  }\n\n  &-mode-navigation &-item {\n    padding-left: @steps-navigation-padding-left;\n    padding-right: @steps-navigation-spacing-arrow-right;\n    margin-right: @steps-navigation-margin-right;\n\n    &:last-child {\n      flex: 1;\n    }\n\n    &-content {\n      margin-bottom: 20px;\n    }\n\n    &-description {\n      padding-right: 20px;\n    }\n\n    &-active::after {\n      content: '';\n      position: absolute;\n      display: block;\n      height: 2px;\n      left: @steps-navigation-spacing-ink-left;\n      right: @steps-navigation-spacing-ink-right;\n      bottom: 0;\n      background-color: @color-primary-6;\n    }\n\n    &-active:last-child::after {\n      width: 100%;\n    }\n  }\n\n  &-mode-navigation &-item:not(:last-child) &-item-content::after {\n    position: absolute;\n    top: @steps-navigation-size-arrow-top;\n    right: 30px;\n    display: inline-block;\n    width: @steps-navigation-size-arrow;\n    height: @steps-navigation-size-arrow;\n    background-color: var(~'@{arco-cssvars-prefix}-color-bg-2');\n    border: @steps-navigation-size-arrow-line-width solid\n      @steps-navigation-color-arrow;\n    border-bottom: none;\n    border-left: none;\n    -webkit-transform: rotate(45deg);\n    transform: rotate(45deg);\n    content: '';\n  }\n}\n"
  },
  {
    "path": "packages/web-vue/components/steps/style/token.less",
    "content": "@import '../../style/theme/index.less';\n\n// Two size: Default and small\n@steps-size-default: @size-7;\n@steps-size-small: @size-6;\n@steps-size-default-arrow: @size-18;\n@steps-size-small-arrow: @size-10;\n\n@steps-size-default-font-size-icon: @size-4;\n@steps-size-default-font-size-title: @font-size-title-1;\n@steps-size-default-font-size-description: @font-size-body-1;\n@steps-size-small-font-size-icon: 14px;\n@steps-size-small-font-size-title: @font-size-body-3;\n@steps-size-small-font-size-description: @font-size-body-1;\n\n@steps-label-vertical-content-width: 140px;\n@steps-direction-horizontal-description-width: 140px;\n\n// Circle\n@steps-circle-size-item-tail: @border-1;\n@steps-circle-size-item-icon-gap: 12px;\n\n@steps-circle-font-weight-item-title_active: @font-weight-500;\n\n@steps-circle-border-radius-item-icon: @radius-circle;\n\n@steps-circle-horizontal-item-description-margin-top: @spacing-1;\n@steps-circle-vertical-item-description-margin-top: @spacing-1;\n\n@steps-circle-color-item-bg_wait: var(~'@{arco-cssvars-prefix}-color-fill-2');\n@steps-circle-color-item-border_wait: @color-transparent;\n@steps-circle-color-item-icon-text_wait: var(~'@{arco-cssvars-prefix}-color-text-2');\n@steps-circle-color-item-tail_wait: var(~'@{arco-cssvars-prefix}-color-neutral-3');\n@steps-circle-color-item-title_wait: var(~'@{arco-cssvars-prefix}-color-text-2');\n@steps-circle-color-item-description_wait: var(~'@{arco-cssvars-prefix}-color-text-3');\n\n@steps-circle-color-item-bg_process: @color-primary-6;\n@steps-circle-color-item-border_process: @color-transparent;\n@steps-circle-color-item-icon-text_process: var(~'@{arco-cssvars-prefix}-color-white');\n@steps-circle-color-item-tail_process: @color-primary-6;\n@steps-circle-color-item-title_process: var(~'@{arco-cssvars-prefix}-color-text-1');\n@steps-circle-color-item-description_process: var(~'@{arco-cssvars-prefix}-color-text-3');\n\n@steps-circle-color-item-bg_finish: var(~'@{arco-cssvars-prefix}-color-primary-light-1');\n@steps-circle-color-item-border_finish: @color-transparent;\n@steps-circle-color-item-icon-text_finish: @color-primary-6;\n@steps-circle-color-item-title_finish: var(~'@{arco-cssvars-prefix}-color-text-1');\n@steps-circle-color-item-description_finish: var(~'@{arco-cssvars-prefix}-color-text-3');\n\n@steps-circle-color-item-bg_error: @color-danger-6;\n@steps-circle-color-item-border_error: @color-transparent;\n@steps-circle-color-item-icon-text_error: var(~'@{arco-cssvars-prefix}-color-white');\n@steps-circle-color-item-tail_error: @color-danger-6;\n@steps-circle-color-item-title_error: var(~'@{arco-cssvars-prefix}-color-text-1');\n@steps-circle-color-item-description_error: var(~'@{arco-cssvars-prefix}-color-text-3');\n\n// Dot\n@steps-dot-horizontal-item-title-margin-top: @spacing-2;\n@steps-dot-horizontal-item-description-margin-top: @spacing-2;\n@steps-dot-vertical-item-title-margin-top: -2px;\n@steps-dot-vertical-item-description-margin-top: @spacing-2;\n\n@steps-dot-size-item-icon: @size-2;\n@steps-dot-size-item-icon-active: 10px;\n@steps-dot-size-item-icon-gap: @spacing-2;\n@steps-dot-size-item-tail: @border-1;\n\n@steps-dot-vertical-item-icon-margin-right: @spacing-7;\n\n@steps-dot-font-weight-item-title_active: @font-weight-500;\n\n@steps-dot-border-radius-item-icon: @radius-circle;\n\n@steps-dot-color-item-bg_wait: var(~'@{arco-cssvars-prefix}-color-fill-4');\n@steps-dot-color-item-border_wait: var(~'@{arco-cssvars-prefix}-color-fill-4');\n@steps-dot-color-item-tail_wait: var(~'@{arco-cssvars-prefix}-color-neutral-3');\n@steps-dot-color-item-title_wait: var(~'@{arco-cssvars-prefix}-color-text-2');\n@steps-dot-color-item-description_wait: var(~'@{arco-cssvars-prefix}-color-text-3');\n\n@steps-dot-color-item-bg_process: @color-primary-6;\n@steps-dot-color-item-border_process: @color-primary-6;\n@steps-dot-color-item-tail_process: @color-primary-6;\n@steps-dot-color-item-title_process: var(~'@{arco-cssvars-prefix}-color-text-1');\n@steps-dot-color-item-description_process: var(~'@{arco-cssvars-prefix}-color-text-3');\n\n@steps-dot-color-item-bg_finish: @color-primary-6;\n@steps-dot-color-item-border_finish: @color-primary-6;\n@steps-dot-color-item-title_finish: var(~'@{arco-cssvars-prefix}-color-text-1');\n@steps-dot-color-item-description_finish: var(~'@{arco-cssvars-prefix}-color-text-3');\n\n@steps-dot-color-item-bg_error: @color-danger-6;\n@steps-dot-color-item-border_error: @color-danger-6;\n@steps-dot-color-item-tail_error: @color-danger-6;\n@steps-dot-color-item-title_error: var(~'@{arco-cssvars-prefix}-color-text-1');\n@steps-dot-color-item-description_error: var(~'@{arco-cssvars-prefix}-color-text-3');\n\n// Arrow\n@steps-arrow-size-item-gap: @spacing-2;\n\n@steps-arrow-size-default-title-padding-left: @spacing-7;\n@steps-arrow-size-small-title-padding-left: @spacing-8;\n\n@steps-arrow-item-description-margin-top: 0;\n\n@steps-arrow-font-weight-item-title_active: @font-weight-500;\n\n@steps-arrow-color-item-bg_wait: var(~'@{arco-cssvars-prefix}-color-fill-1');\n@steps-arrow-color-item-title_wait: var(~'@{arco-cssvars-prefix}-color-text-2');\n@steps-arrow-color-item-description_wait: var(~'@{arco-cssvars-prefix}-color-text-3');\n\n@steps-arrow-color-item-bg_process: @color-primary-6;\n@steps-arrow-color-item-title_process: var(~'@{arco-cssvars-prefix}-color-white');\n@steps-arrow-color-item-description_process: var(~'@{arco-cssvars-prefix}-color-white');\n\n@steps-arrow-color-item-bg_finish: var(~'@{arco-cssvars-prefix}-color-primary-light-1');\n@steps-arrow-color-item-title_finish: var(~'@{arco-cssvars-prefix}-color-text-1');\n@steps-arrow-color-item-description_finish: var(~'@{arco-cssvars-prefix}-color-text-3');\n\n@steps-arrow-color-item-bg_error: @color-danger-6;\n@steps-arrow-color-item-title_error: var(~'@{arco-cssvars-prefix}-color-white');\n@steps-arrow-color-item-description_error: var(~'@{arco-cssvars-prefix}-color-white');\n\n// Navigation\n@steps-navigation-color-arrow: var(~'@{arco-cssvars-prefix}-color-text-4');\n@steps-navigation-size-arrow: 6px;\n@steps-navigation-size-arrow-line-width: 2px;\n@steps-navigation-size-arrow-top: @spacing-5;\n\n// Circle\n\n@steps-circle-vertical-spacing-tail-top: @spacing-3;\n@steps-circle-vertical-spacing-tail-bottom: @spacing-3;\n\n\n// Dot\n@steps-dot-vertical-item-dot-margin-top: @spacing-4;\n@steps-dot-vertical-spacing-tail-top: @spacing-2;\n@steps-dot-vertical-spacing-tail-bottom: @spacing-2;\n\n@steps-navigation-padding-left: @spacing-8;\n@steps-navigation-margin-right: @spacing-10;\n@steps-navigation-spacing-arrow-right: @spacing-5;\n@steps-navigation-spacing-ink-left: @spacing-none;\n@steps-navigation-spacing-ink-right: 30px;\n"
  },
  {
    "path": "packages/web-vue/components/style/animation/fade.less",
    "content": "@import '../theme/index.less';\n\n.fade-in-standard-enter-from,\n.fade-in-standard-appear-from {\n  opacity: 0;\n}\n\n.fade-in-standard-enter-to,\n.fade-in-standard-appear-to {\n  opacity: 1;\n}\n\n.fade-in-standard-enter-active,\n.fade-in-standard-appear-active {\n  transition: opacity @transition-duration-3\n    @transition-timing-function-standard;\n}\n\n.fade-in-standard-leave-from {\n  opacity: 1;\n}\n\n.fade-in-standard-leave-to {\n  opacity: 0;\n}\n\n.fade-in-standard-leave-active {\n  transition: opacity @transition-duration-3\n    @transition-timing-function-standard;\n}\n\n.fade-in-enter-from,\n.fade-in-appear-from {\n  opacity: 0;\n}\n\n.fade-in-enter-to,\n.fade-in-appear-to {\n  opacity: 1;\n}\n\n.fade-in-enter-active,\n.fade-in-appear-active {\n  transition: opacity @transition-duration-1 @transition-timing-function-linear;\n}\n\n.fade-in-leave-from {\n  opacity: 1;\n}\n\n.fade-in-leave-to {\n  opacity: 0;\n}\n\n.fade-in-leave-active {\n  transition: opacity @transition-duration-1 @transition-timing-function-linear;\n}\n"
  },
  {
    "path": "packages/web-vue/components/style/animation/index.less",
    "content": "@import './fade.less';\n@import './zoom.less';\n@import './slide.less';\n"
  },
  {
    "path": "packages/web-vue/components/style/animation/slide.less",
    "content": "@import '../theme/index.less';\n\n// used by cascader select treeselect ... like picker\n.slide-dynamic-origin-enter-from,\n.slide-dynamic-origin-appear-from {\n  transform: scaleY(0.9);\n  transform-origin: 0 0;\n  opacity: 0;\n}\n\n.slide-dynamic-origin-enter-to,\n.slide-dynamic-origin-appear-to {\n  transform: scaleY(1);\n  transform-origin: 0 0;\n  opacity: 1;\n}\n\n.slide-dynamic-origin-enter-active,\n.slide-dynamic-origin-appear-active {\n  transition: transform @transition-duration-2\n      @transition-timing-function-standard,\n    opacity @transition-duration-2 @transition-timing-function-standard;\n}\n\n.slide-dynamic-origin-leave-from {\n  transform: scaleY(1);\n  transform-origin: 0 0;\n  opacity: 1;\n}\n\n.slide-dynamic-origin-leave-to {\n  transform: scaleY(0.9);\n  transform-origin: 0 0;\n  opacity: 0;\n}\n\n.slide-dynamic-origin-leave-active {\n  transition: transform @transition-duration-2\n      @transition-timing-function-standard,\n    opacity @transition-duration-2 @transition-timing-function-standard;\n}\n\n// used by drawer\n.slide-left-enter-from,\n.slide-left-appear-from {\n  transform: translateX(-100%);\n}\n\n.slide-left-enter-to,\n.slide-left-appear-to {\n  transform: translateX(0);\n}\n\n.slide-left-enter-active,\n.slide-left-appear-active {\n  transition: transform @transition-duration-3\n    @transition-timing-function-standard;\n}\n\n.slide-left-leave-from {\n  transform: translateX(0);\n}\n\n.slide-left-leave-to {\n  transform: translateX(-100%);\n}\n\n.slide-left-leave-active {\n  transition: transform @transition-duration-3\n    @transition-timing-function-standard;\n}\n\n.slide-right-enter-from,\n.slide-right-appear-from {\n  transform: translateX(100%);\n}\n\n.slide-right-enter-to,\n.slide-right-appear-to {\n  transform: translateX(0);\n}\n\n.slide-right-enter-active,\n.slide-right-appear-active {\n  transition: transform @transition-duration-3\n    @transition-timing-function-standard;\n}\n\n.slide-right-leave-from {\n  transform: translateX(0);\n}\n\n.slide-right-leave-to {\n  transform: translateX(100%);\n}\n\n.slide-right-leave-active {\n  transition: transform @transition-duration-3\n    @transition-timing-function-standard;\n}\n\n.slide-top-enter-from,\n.slide-top-appear-from {\n  transform: translateY(-100%);\n}\n\n.slide-top-enter-to,\n.slide-top-appear-to {\n  transform: translateY(0);\n}\n\n.slide-top-enter-active,\n.slide-top-appear-active {\n  transition: transform @transition-duration-3\n    @transition-timing-function-standard;\n}\n\n.slide-top-leave-from {\n  transform: translateY(0);\n}\n\n.slide-top-leave-to {\n  transform: translateY(-100%);\n}\n\n.slide-top-leave-active {\n  transition: transform @transition-duration-3\n    @transition-timing-function-standard;\n}\n\n.slide-bottom-enter-from,\n.slide-bottom-appear-from {\n  transform: translateY(100%);\n}\n\n.slide-bottom-enter-to,\n.slide-bottom-appear-to {\n  transform: translateY(0);\n}\n\n.slide-bottom-enter-active,\n.slide-bottom-appear-active {\n  transition: transform @transition-duration-3\n    @transition-timing-function-standard;\n}\n\n.slide-bottom-leave-from {\n  transform: translateY(0);\n}\n\n.slide-bottom-leave-to {\n  transform: translateY(100%);\n}\n\n.slide-bottom-leave-active {\n  transition: transform @transition-duration-3\n    @transition-timing-function-standard;\n}\n"
  },
  {
    "path": "packages/web-vue/components/style/animation/zoom.less",
    "content": "@import '../theme/index.less';\n\n// modal use\n.zoom-in-enter-from,\n.zoom-in-appear-from {\n  transform: scale(0.5, 0.5);\n  opacity: 0;\n}\n\n.zoom-in-enter-to,\n.zoom-in-appear-to {\n  transform: scale(1, 1);\n  opacity: 1;\n}\n\n.zoom-in-enter-active,\n.zoom-in-appear-active {\n  transition: opacity @transition-duration-3\n      @transition-timing-function-standard,\n    transform @transition-duration-3 @transition-timing-function-standard;\n}\n\n.zoom-in-leave-from {\n  transform: scale(1, 1);\n  opacity: 1;\n}\n\n.zoom-in-leave-to {\n  transform: scale(0.5, 0.5);\n  opacity: 0;\n}\n\n.zoom-in-leave-active {\n  transition: opacity @transition-duration-3\n      @transition-timing-function-standard,\n    transform @transition-duration-3 @transition-timing-function-standard;\n}\n\n// used by tooltip。缩放出现，渐隐退出\n.zoom-in-fade-out-enter-from,\n.zoom-in-fade-out-appear-from {\n  transform: scale(0.5, 0.5);\n  opacity: 0;\n}\n\n.zoom-in-fade-out-enter-to,\n.zoom-in-fade-out-appear-to {\n  transform: scale(1, 1);\n  opacity: 1;\n}\n\n.zoom-in-fade-out-enter-active,\n.zoom-in-fade-out-appear-active {\n  transition: opacity @transition-duration-3\n      @transition-timing-function-overshoot,\n    transform @transition-duration-3 @transition-timing-function-overshoot;\n}\n\n.zoom-in-fade-out-leave-from {\n  transform: scale(1, 1);\n  opacity: 1;\n}\n\n.zoom-in-fade-out-leave-to {\n  transform: scale(0.5, 0.5);\n  opacity: 0;\n}\n\n.zoom-in-fade-out-leave-active {\n  transition: opacity @transition-duration-3\n      @transition-timing-function-overshoot,\n    transform @transition-duration-3 @transition-timing-function-overshoot;\n}\n\n// used by slide, table filter\n.zoom-in-big-enter-from,\n.zoom-in-big-appear-from {\n  transform: scale(0.5, 0.5);\n  opacity: 0;\n}\n\n.zoom-in-big-enter-to,\n.zoom-in-big-appear-to {\n  transform: scale(1, 1);\n  opacity: 1;\n}\n\n.zoom-in-big-enter-active,\n.zoom-in-big-appear-active {\n  transition: opacity @transition-duration-2 @transition-timing-function-linear,\n    transform @transition-duration-2 @transition-timing-function-linear;\n}\n\n.zoom-in-big-leave-from {\n  transform: scale(1, 1);\n  opacity: 1;\n}\n\n.zoom-in-big-leave-to {\n  transform: scale(0.2, 0.2);\n  opacity: 0;\n}\n\n.zoom-in-big-leave-active {\n  transition: opacity @transition-duration-2 @transition-timing-function-linear,\n    transform @transition-duration-2 @transition-timing-function-linear;\n}\n\n.zoom-in-left-enter-from,\n.zoom-in-left-appear-from {\n  transform: scale(0.1, 0.1);\n  opacity: 0.1;\n}\n\n.zoom-in-left-enter-to,\n.zoom-in-left-appear-to {\n  transform: scale(1, 1);\n  opacity: 1;\n}\n\n.zoom-in-left-enter-active,\n.zoom-in-left-appear-active {\n  transform-origin: 0 50%;\n  transition: opacity @transition-duration-3 @transition-timing-function-linear,\n    transform @transition-duration-3 @transition-timing-function-overshoot;\n}\n\n.zoom-in-left-leave-from {\n  transform: scale(1, 1);\n  opacity: 1;\n}\n\n.zoom-in-left-leave-to {\n  transform: scale(0.1, 0.1);\n  opacity: 0.1;\n}\n\n.zoom-in-left-leave-active {\n  transform-origin: 0 50%;\n  transition: opacity @transition-duration-3 @transition-timing-function-linear,\n    transform @transition-duration-3 @transition-timing-function-overshoot;\n}\n\n// used by alert form\n.zoom-in-top-enter-from,\n.zoom-in-top-appear-from {\n  transform: scaleY(0.8) translateZ(0);\n  opacity: 0;\n}\n\n.zoom-in-top-enter-to,\n.zoom-in-top-appear-to {\n  transform: scaleY(1) translateZ(0);\n  opacity: 1;\n}\n\n.zoom-in-top-enter-active,\n.zoom-in-top-appear-active {\n  transform-origin: 0 0;\n  transition: transform @transition-duration-3\n      @transition-timing-function-overshoot,\n    opacity @transition-duration-3 @transition-timing-function-overshoot;\n}\n\n.zoom-in-top-leave-from {\n  transform: scaleY(1) translateZ(0);\n  opacity: 1;\n}\n\n.zoom-in-top-leave-to {\n  transform: scaleY(0.8) translateZ(0);\n  opacity: 0;\n}\n\n.zoom-in-top-leave-active {\n  transform-origin: 0 0;\n  transition: transform @transition-duration-3\n      @transition-timing-function-overshoot,\n    opacity @transition-duration-3 @transition-timing-function-overshoot;\n}\n\n.zoom-in-bottom-enter-from,\n.zoom-in-bottom-appear-from {\n  transform: scaleY(0.8) translateZ(0);\n  opacity: 0;\n}\n\n.zoom-in-bottom-enter-to,\n.zoom-in-bottom-appear-to {\n  transform: scaleY(1) translateZ(0);\n  opacity: 1;\n}\n\n.zoom-in-bottom-enter-active,\n.zoom-in-bottom-appear-active {\n  transform-origin: 100% 100%;\n  transition: transform @transition-duration-3\n      @transition-timing-function-overshoot,\n    opacity @transition-duration-3 @transition-timing-function-overshoot;\n}\n\n.zoom-in-bottom-leave-from {\n  transform: scaleY(1) translateZ(0);\n  opacity: 1;\n}\n\n.zoom-in-bottom-leave-to {\n  transform: scaleY(0.8) translateZ(0);\n  opacity: 0;\n}\n\n.zoom-in-bottom-leave-active {\n  transform-origin: 100% 100%;\n  transition: transform @transition-duration-3\n      @transition-timing-function-overshoot,\n    opacity @transition-duration-3 @transition-timing-function-overshoot;\n}\n"
  },
  {
    "path": "packages/web-vue/components/style/color/colors.less",
    "content": "@plugin './palette.js';\n@plugin './palette-dark.js';\n\n@red-1: color-palette(@red-6, 1);\n@red-2: color-palette(@red-6, 2);\n@red-3: color-palette(@red-6, 3);\n@red-4: color-palette(@red-6, 4);\n@red-5: color-palette(@red-6, 5);\n@red-6: #f53f3f;\n@red-7: color-palette(@red-6, 7);\n@red-8: color-palette(@red-6, 8);\n@red-9: color-palette(@red-6, 9);\n@red-10: color-palette(@red-6, 10);\n\n@orangered-1: color-palette(@orangered-6, 1);\n@orangered-2: color-palette(@orangered-6, 2);\n@orangered-3: color-palette(@orangered-6, 3);\n@orangered-4: color-palette(@orangered-6, 4);\n@orangered-5: color-palette(@orangered-6, 5);\n@orangered-6: #f77234;\n@orangered-7: color-palette(@orangered-6, 7);\n@orangered-8: color-palette(@orangered-6, 8);\n@orangered-9: color-palette(@orangered-6, 9);\n@orangered-10: color-palette(@orangered-6, 10);\n\n@orange-1: color-palette(@orange-6, 1);\n@orange-2: color-palette(@orange-6, 2);\n@orange-3: color-palette(@orange-6, 3);\n@orange-4: color-palette(@orange-6, 4);\n@orange-5: color-palette(@orange-6, 5);\n@orange-6: #ff7d00;\n@orange-7: color-palette(@orange-6, 7);\n@orange-8: color-palette(@orange-6, 8);\n@orange-9: color-palette(@orange-6, 9);\n@orange-10: color-palette(@orange-6, 10);\n\n@gold-1: color-palette(@gold-6, 1);\n@gold-2: color-palette(@gold-6, 2);\n@gold-3: color-palette(@gold-6, 3);\n@gold-4: color-palette(@gold-6, 4);\n@gold-5: color-palette(@gold-6, 5);\n@gold-6: #f7ba1e;\n@gold-7: color-palette(@gold-6, 7);\n@gold-8: color-palette(@gold-6, 8);\n@gold-9: color-palette(@gold-6, 9);\n@gold-10: color-palette(@gold-6, 10);\n\n@yellow-1: color-palette(@yellow-6, 1);\n@yellow-2: color-palette(@yellow-6, 2);\n@yellow-3: color-palette(@yellow-6, 3);\n@yellow-4: color-palette(@yellow-6, 4);\n@yellow-5: color-palette(@yellow-6, 5);\n@yellow-6: #fadc19;\n@yellow-7: color-palette(@yellow-6, 7);\n@yellow-8: color-palette(@yellow-6, 8);\n@yellow-9: color-palette(@yellow-6, 9);\n@yellow-10: color-palette(@yellow-6, 10);\n\n@lime-1: color-palette(@lime-6, 1);\n@lime-2: color-palette(@lime-6, 2);\n@lime-3: color-palette(@lime-6, 3);\n@lime-4: color-palette(@lime-6, 4);\n@lime-5: color-palette(@lime-6, 5);\n@lime-6: #9fdb1d;\n@lime-7: color-palette(@lime-6, 7);\n@lime-8: color-palette(@lime-6, 8);\n@lime-9: color-palette(@lime-6, 9);\n@lime-10: color-palette(@lime-6, 10);\n\n@green-1: color-palette(@green-6, 1);\n@green-2: color-palette(@green-6, 2);\n@green-3: color-palette(@green-6, 3);\n@green-4: color-palette(@green-6, 4);\n@green-5: color-palette(@green-6, 5);\n@green-6: #00b42a;\n@green-7: color-palette(@green-6, 7);\n@green-8: color-palette(@green-6, 8);\n@green-9: color-palette(@green-6, 9);\n@green-10: color-palette(@green-6, 10);\n\n@cyan-1: color-palette(@cyan-6, 1);\n@cyan-2: color-palette(@cyan-6, 2);\n@cyan-3: color-palette(@cyan-6, 3);\n@cyan-4: color-palette(@cyan-6, 4);\n@cyan-5: color-palette(@cyan-6, 5);\n@cyan-6: #14c9c9;\n@cyan-7: color-palette(@cyan-6, 7);\n@cyan-8: color-palette(@cyan-6, 8);\n@cyan-9: color-palette(@cyan-6, 9);\n@cyan-10: color-palette(@cyan-6, 10);\n\n@blue-1: color-palette(@blue-6, 1);\n@blue-2: color-palette(@blue-6, 2);\n@blue-3: color-palette(@blue-6, 3);\n@blue-4: color-palette(@blue-6, 4);\n@blue-5: color-palette(@blue-6, 5);\n@blue-6: #3491fa;\n@blue-7: color-palette(@blue-6, 7);\n@blue-8: color-palette(@blue-6, 8);\n@blue-9: color-palette(@blue-6, 9);\n@blue-10: color-palette(@blue-6, 10);\n\n@arcoblue-1: color-palette(@arcoblue-6, 1);\n@arcoblue-2: color-palette(@arcoblue-6, 2);\n@arcoblue-3: color-palette(@arcoblue-6, 3);\n@arcoblue-4: color-palette(@arcoblue-6, 4);\n@arcoblue-5: color-palette(@arcoblue-6, 5);\n@arcoblue-6: #165dff;\n@arcoblue-7: color-palette(@arcoblue-6, 7);\n@arcoblue-8: color-palette(@arcoblue-6, 8);\n@arcoblue-9: color-palette(@arcoblue-6, 9);\n@arcoblue-10: color-palette(@arcoblue-6, 10);\n\n@purple-1: color-palette(@purple-6, 1);\n@purple-2: color-palette(@purple-6, 2);\n@purple-3: color-palette(@purple-6, 3);\n@purple-4: color-palette(@purple-6, 4);\n@purple-5: color-palette(@purple-6, 5);\n@purple-6: #722ed1;\n@purple-7: color-palette(@purple-6, 7);\n@purple-8: color-palette(@purple-6, 8);\n@purple-9: color-palette(@purple-6, 9);\n@purple-10: color-palette(@purple-6, 10);\n\n@pinkpurple-1: color-palette(@pinkpurple-6, 1);\n@pinkpurple-2: color-palette(@pinkpurple-6, 2);\n@pinkpurple-3: color-palette(@pinkpurple-6, 3);\n@pinkpurple-4: color-palette(@pinkpurple-6, 4);\n@pinkpurple-5: color-palette(@pinkpurple-6, 5);\n@pinkpurple-6: #d91ad9;\n@pinkpurple-7: color-palette(@pinkpurple-6, 7);\n@pinkpurple-8: color-palette(@pinkpurple-6, 8);\n@pinkpurple-9: color-palette(@pinkpurple-6, 9);\n@pinkpurple-10: color-palette(@pinkpurple-6, 10);\n\n@magenta-1: color-palette(@magenta-6, 1);\n@magenta-2: color-palette(@magenta-6, 2);\n@magenta-3: color-palette(@magenta-6, 3);\n@magenta-4: color-palette(@magenta-6, 4);\n@magenta-5: color-palette(@magenta-6, 5);\n@magenta-6: #f5319d;\n@magenta-7: color-palette(@magenta-6, 7);\n@magenta-8: color-palette(@magenta-6, 8);\n@magenta-9: color-palette(@magenta-6, 9);\n@magenta-10: color-palette(@magenta-6, 10);\n\n@gray-1: #f7f8fa;\n@gray-2: #f2f3f5;\n@gray-3: #e5e6eb;\n@gray-4: #c9cdd4;\n@gray-5: #a9aeb8;\n@gray-6: #86909c;\n@gray-7: #6b7785;\n@gray-8: #4e5969;\n@gray-9: #272e3b;\n@gray-10: #1d2129;\n\n// dark\n\n@dark-red-1: color-palette-dark(@red-6, 1);\n@dark-red-2: color-palette-dark(@red-6, 2);\n@dark-red-3: color-palette-dark(@red-6, 3);\n@dark-red-4: color-palette-dark(@red-6, 4);\n@dark-red-5: color-palette-dark(@red-6, 5);\n@dark-red-6: color-palette-dark(@red-6, 6);\n@dark-red-7: color-palette-dark(@red-6, 7);\n@dark-red-8: color-palette-dark(@red-6, 8);\n@dark-red-9: color-palette-dark(@red-6, 9);\n@dark-red-10: color-palette-dark(@red-6, 10);\n\n@dark-orangered-1: color-palette-dark(@orangered-6, 1);\n@dark-orangered-2: color-palette-dark(@orangered-6, 2);\n@dark-orangered-3: color-palette-dark(@orangered-6, 3);\n@dark-orangered-4: color-palette-dark(@orangered-6, 4);\n@dark-orangered-5: color-palette-dark(@orangered-6, 5);\n@dark-orangered-6: color-palette-dark(@orangered-6, 6);\n@dark-orangered-7: color-palette-dark(@orangered-6, 7);\n@dark-orangered-8: color-palette-dark(@orangered-6, 8);\n@dark-orangered-9: color-palette-dark(@orangered-6, 9);\n@dark-orangered-10: color-palette-dark(@orangered-6, 10);\n\n@dark-orange-1: color-palette-dark(@orange-6, 1);\n@dark-orange-2: color-palette-dark(@orange-6, 2);\n@dark-orange-3: color-palette-dark(@orange-6, 3);\n@dark-orange-4: color-palette-dark(@orange-6, 4);\n@dark-orange-5: color-palette-dark(@orange-6, 5);\n@dark-orange-6: color-palette-dark(@orange-6, 6);\n@dark-orange-7: color-palette-dark(@orange-6, 7);\n@dark-orange-8: color-palette-dark(@orange-6, 8);\n@dark-orange-9: color-palette-dark(@orange-6, 9);\n@dark-orange-10: color-palette-dark(@orange-6, 10);\n\n@dark-gold-1: color-palette-dark(@gold-6, 1);\n@dark-gold-2: color-palette-dark(@gold-6, 2);\n@dark-gold-3: color-palette-dark(@gold-6, 3);\n@dark-gold-4: color-palette-dark(@gold-6, 4);\n@dark-gold-5: color-palette-dark(@gold-6, 5);\n@dark-gold-6: color-palette-dark(@gold-6, 6);\n@dark-gold-7: color-palette-dark(@gold-6, 7);\n@dark-gold-8: color-palette-dark(@gold-6, 8);\n@dark-gold-9: color-palette-dark(@gold-6, 9);\n@dark-gold-10: color-palette-dark(@gold-6, 10);\n\n@dark-yellow-1: color-palette-dark(@yellow-6, 1);\n@dark-yellow-2: color-palette-dark(@yellow-6, 2);\n@dark-yellow-3: color-palette-dark(@yellow-6, 3);\n@dark-yellow-4: color-palette-dark(@yellow-6, 4);\n@dark-yellow-5: color-palette-dark(@yellow-6, 5);\n@dark-yellow-6: color-palette-dark(@yellow-6, 6);\n@dark-yellow-7: color-palette-dark(@yellow-6, 7);\n@dark-yellow-8: color-palette-dark(@yellow-6, 8);\n@dark-yellow-9: color-palette-dark(@yellow-6, 9);\n@dark-yellow-10: color-palette-dark(@yellow-6, 10);\n\n@dark-lime-1: color-palette-dark(@lime-6, 1);\n@dark-lime-2: color-palette-dark(@lime-6, 2);\n@dark-lime-3: color-palette-dark(@lime-6, 3);\n@dark-lime-4: color-palette-dark(@lime-6, 4);\n@dark-lime-5: color-palette-dark(@lime-6, 5);\n@dark-lime-6: color-palette-dark(@lime-6, 6);\n@dark-lime-7: color-palette-dark(@lime-6, 7);\n@dark-lime-8: color-palette-dark(@lime-6, 8);\n@dark-lime-9: color-palette-dark(@lime-6, 9);\n@dark-lime-10: color-palette-dark(@lime-6, 10);\n\n@dark-green-1: color-palette-dark(@green-6, 1);\n@dark-green-2: color-palette-dark(@green-6, 2);\n@dark-green-3: color-palette-dark(@green-6, 3);\n@dark-green-4: color-palette-dark(@green-6, 4);\n@dark-green-5: color-palette-dark(@green-6, 5);\n@dark-green-6: color-palette-dark(@green-6, 6);\n@dark-green-7: color-palette-dark(@green-6, 7);\n@dark-green-8: color-palette-dark(@green-6, 8);\n@dark-green-9: color-palette-dark(@green-6, 9);\n@dark-green-10: color-palette-dark(@green-6, 10);\n\n@dark-cyan-1: color-palette-dark(@cyan-6, 1);\n@dark-cyan-2: color-palette-dark(@cyan-6, 2);\n@dark-cyan-3: color-palette-dark(@cyan-6, 3);\n@dark-cyan-4: color-palette-dark(@cyan-6, 4);\n@dark-cyan-5: color-palette-dark(@cyan-6, 5);\n@dark-cyan-6: color-palette-dark(@cyan-6, 6);\n@dark-cyan-7: color-palette-dark(@cyan-6, 7);\n@dark-cyan-8: color-palette-dark(@cyan-6, 8);\n@dark-cyan-9: color-palette-dark(@cyan-6, 9);\n@dark-cyan-10: color-palette-dark(@cyan-6, 10);\n\n@dark-blue-1: color-palette-dark(@blue-6, 1);\n@dark-blue-2: color-palette-dark(@blue-6, 2);\n@dark-blue-3: color-palette-dark(@blue-6, 3);\n@dark-blue-4: color-palette-dark(@blue-6, 4);\n@dark-blue-5: color-palette-dark(@blue-6, 5);\n@dark-blue-6: color-palette-dark(@blue-6, 6);\n@dark-blue-7: color-palette-dark(@blue-6, 7);\n@dark-blue-8: color-palette-dark(@blue-6, 8);\n@dark-blue-9: color-palette-dark(@blue-6, 9);\n@dark-blue-10: color-palette-dark(@blue-6, 10);\n\n@dark-arcoblue-1: color-palette-dark(@arcoblue-6, 1);\n@dark-arcoblue-2: color-palette-dark(@arcoblue-6, 2);\n@dark-arcoblue-3: color-palette-dark(@arcoblue-6, 3);\n@dark-arcoblue-4: color-palette-dark(@arcoblue-6, 4);\n@dark-arcoblue-5: color-palette-dark(@arcoblue-6, 5);\n@dark-arcoblue-6: color-palette-dark(@arcoblue-6, 6);\n@dark-arcoblue-7: color-palette-dark(@arcoblue-6, 7);\n@dark-arcoblue-8: color-palette-dark(@arcoblue-6, 8);\n@dark-arcoblue-9: color-palette-dark(@arcoblue-6, 9);\n@dark-arcoblue-10: color-palette-dark(@arcoblue-6, 10);\n\n@dark-purple-1: color-palette-dark(@purple-6, 1);\n@dark-purple-2: color-palette-dark(@purple-6, 2);\n@dark-purple-3: color-palette-dark(@purple-6, 3);\n@dark-purple-4: color-palette-dark(@purple-6, 4);\n@dark-purple-5: color-palette-dark(@purple-6, 5);\n@dark-purple-6: color-palette-dark(@purple-6, 6);\n@dark-purple-7: color-palette-dark(@purple-6, 7);\n@dark-purple-8: color-palette-dark(@purple-6, 8);\n@dark-purple-9: color-palette-dark(@purple-6, 9);\n@dark-purple-10: color-palette-dark(@purple-6, 10);\n\n@dark-pinkpurple-1: color-palette-dark(@pinkpurple-6, 1);\n@dark-pinkpurple-2: color-palette-dark(@pinkpurple-6, 2);\n@dark-pinkpurple-3: color-palette-dark(@pinkpurple-6, 3);\n@dark-pinkpurple-4: color-palette-dark(@pinkpurple-6, 4);\n@dark-pinkpurple-5: color-palette-dark(@pinkpurple-6, 5);\n@dark-pinkpurple-6: color-palette-dark(@pinkpurple-6, 6);\n@dark-pinkpurple-7: color-palette-dark(@pinkpurple-6, 7);\n@dark-pinkpurple-8: color-palette-dark(@pinkpurple-6, 8);\n@dark-pinkpurple-9: color-palette-dark(@pinkpurple-6, 9);\n@dark-pinkpurple-10: color-palette-dark(@pinkpurple-6, 10);\n\n@dark-magenta-1: color-palette-dark(@magenta-6, 1);\n@dark-magenta-2: color-palette-dark(@magenta-6, 2);\n@dark-magenta-3: color-palette-dark(@magenta-6, 3);\n@dark-magenta-4: color-palette-dark(@magenta-6, 4);\n@dark-magenta-5: color-palette-dark(@magenta-6, 5);\n@dark-magenta-6: color-palette-dark(@magenta-6, 6);\n@dark-magenta-7: color-palette-dark(@magenta-6, 7);\n@dark-magenta-8: color-palette-dark(@magenta-6, 8);\n@dark-magenta-9: color-palette-dark(@magenta-6, 9);\n@dark-magenta-10: color-palette-dark(@magenta-6, 10);\n\n@dark-gray-1: #17171a;\n@dark-gray-2: #2e2e30;\n@dark-gray-3: #484849;\n@dark-gray-4: #5f5f60;\n@dark-gray-5: #78787a;\n@dark-gray-6: #929293;\n@dark-gray-7: #ababac;\n@dark-gray-8: #c5c5c5;\n@dark-gray-9: #dfdfdf;\n@dark-gray-10: #f6f6f6;\n\n// 命名具有具体含义，从预置色板取值\n@primary-1: rgb(var(~'@{arco-cssvars-prefix}-arcoblue-1'));\n@primary-2: rgb(var(~'@{arco-cssvars-prefix}-arcoblue-2'));\n@primary-3: rgb(var(~'@{arco-cssvars-prefix}-arcoblue-3'));\n@primary-4: rgb(var(~'@{arco-cssvars-prefix}-arcoblue-4'));\n@primary-5: rgb(var(~'@{arco-cssvars-prefix}-arcoblue-5'));\n@primary-6: rgb(var(~'@{arco-cssvars-prefix}-arcoblue-6'));\n@primary-7: rgb(var(~'@{arco-cssvars-prefix}-arcoblue-7'));\n@primary-8: rgb(var(~'@{arco-cssvars-prefix}-arcoblue-8'));\n@primary-9: rgb(var(~'@{arco-cssvars-prefix}-arcoblue-9'));\n@primary-10: rgb(var(~'@{arco-cssvars-prefix}-arcoblue-10'));\n\n@dark-primary-1: rgb(var(~'@{arco-cssvars-prefix}-arcoblue-1'));\n@dark-primary-2: rgb(var(~'@{arco-cssvars-prefix}-arcoblue-2'));\n@dark-primary-3: rgb(var(~'@{arco-cssvars-prefix}-arcoblue-3'));\n@dark-primary-4: rgb(var(~'@{arco-cssvars-prefix}-arcoblue-4'));\n@dark-primary-5: rgb(var(~'@{arco-cssvars-prefix}-arcoblue-5'));\n@dark-primary-6: rgb(var(~'@{arco-cssvars-prefix}-arcoblue-6'));\n@dark-primary-7: rgb(var(~'@{arco-cssvars-prefix}-arcoblue-7'));\n@dark-primary-8: rgb(var(~'@{arco-cssvars-prefix}-arcoblue-8'));\n@dark-primary-9: rgb(var(~'@{arco-cssvars-prefix}-arcoblue-9'));\n@dark-primary-10: rgb(var(~'@{arco-cssvars-prefix}-arcoblue-10'));\n\n// 成功色\n@success-1: rgb(var(~'@{arco-cssvars-prefix}-green-1'));\n@success-2: rgb(var(~'@{arco-cssvars-prefix}-green-2'));\n@success-3: rgb(var(~'@{arco-cssvars-prefix}-green-3'));\n@success-4: rgb(var(~'@{arco-cssvars-prefix}-green-4'));\n@success-5: rgb(var(~'@{arco-cssvars-prefix}-green-5'));\n@success-6: rgb(var(~'@{arco-cssvars-prefix}-green-6'));\n@success-7: rgb(var(~'@{arco-cssvars-prefix}-green-7'));\n@success-8: rgb(var(~'@{arco-cssvars-prefix}-green-8'));\n@success-9: rgb(var(~'@{arco-cssvars-prefix}-green-9'));\n@success-10: rgb(var(~'@{arco-cssvars-prefix}-green-10'));\n\n@dark-success-1: rgb(var(~'@{arco-cssvars-prefix}-green-1'));\n@dark-success-2: rgb(var(~'@{arco-cssvars-prefix}-green-2'));\n@dark-success-3: rgb(var(~'@{arco-cssvars-prefix}-green-3'));\n@dark-success-4: rgb(var(~'@{arco-cssvars-prefix}-green-4'));\n@dark-success-5: rgb(var(~'@{arco-cssvars-prefix}-green-5'));\n@dark-success-6: rgb(var(~'@{arco-cssvars-prefix}-green-6'));\n@dark-success-7: rgb(var(~'@{arco-cssvars-prefix}-green-7'));\n@dark-success-8: rgb(var(~'@{arco-cssvars-prefix}-green-8'));\n@dark-success-9: rgb(var(~'@{arco-cssvars-prefix}-green-9'));\n@dark-success-10: rgb(var(~'@{arco-cssvars-prefix}-green-10'));\n\n// 错误色\n@danger-1: rgb(var(~'@{arco-cssvars-prefix}-red-1'));\n@danger-2: rgb(var(~'@{arco-cssvars-prefix}-red-2'));\n@danger-3: rgb(var(~'@{arco-cssvars-prefix}-red-3'));\n@danger-4: rgb(var(~'@{arco-cssvars-prefix}-red-4'));\n@danger-5: rgb(var(~'@{arco-cssvars-prefix}-red-5'));\n@danger-6: rgb(var(~'@{arco-cssvars-prefix}-red-6'));\n@danger-7: rgb(var(~'@{arco-cssvars-prefix}-red-7'));\n@danger-8: rgb(var(~'@{arco-cssvars-prefix}-red-8'));\n@danger-9: rgb(var(~'@{arco-cssvars-prefix}-red-9'));\n@danger-10: rgb(var(~'@{arco-cssvars-prefix}-red-10'));\n\n@dark-danger-1: rgb(var(~'@{arco-cssvars-prefix}-red-1'));\n@dark-danger-2: rgb(var(~'@{arco-cssvars-prefix}-red-2'));\n@dark-danger-3: rgb(var(~'@{arco-cssvars-prefix}-red-3'));\n@dark-danger-4: rgb(var(~'@{arco-cssvars-prefix}-red-4'));\n@dark-danger-5: rgb(var(~'@{arco-cssvars-prefix}-red-5'));\n@dark-danger-6: rgb(var(~'@{arco-cssvars-prefix}-red-6'));\n@dark-danger-7: rgb(var(~'@{arco-cssvars-prefix}-red-7'));\n@dark-danger-8: rgb(var(~'@{arco-cssvars-prefix}-red-8'));\n@dark-danger-9: rgb(var(~'@{arco-cssvars-prefix}-red-9'));\n@dark-danger-10: rgb(var(~'@{arco-cssvars-prefix}-red-10'));\n\n// 警示色\n@warning-1: rgb(var(~'@{arco-cssvars-prefix}-orange-1'));\n@warning-2: rgb(var(~'@{arco-cssvars-prefix}-orange-2'));\n@warning-3: rgb(var(~'@{arco-cssvars-prefix}-orange-3'));\n@warning-4: rgb(var(~'@{arco-cssvars-prefix}-orange-4'));\n@warning-5: rgb(var(~'@{arco-cssvars-prefix}-orange-5'));\n@warning-6: rgb(var(~'@{arco-cssvars-prefix}-orange-6'));\n@warning-7: rgb(var(~'@{arco-cssvars-prefix}-orange-7'));\n@warning-8: rgb(var(~'@{arco-cssvars-prefix}-orange-8'));\n@warning-9: rgb(var(~'@{arco-cssvars-prefix}-orange-9'));\n@warning-10: rgb(var(~'@{arco-cssvars-prefix}-orange-10'));\n\n@dark-warning-1: rgb(var(~'@{arco-cssvars-prefix}-orange-1'));\n@dark-warning-2: rgb(var(~'@{arco-cssvars-prefix}-orange-2'));\n@dark-warning-3: rgb(var(~'@{arco-cssvars-prefix}-orange-3'));\n@dark-warning-4: rgb(var(~'@{arco-cssvars-prefix}-orange-4'));\n@dark-warning-5: rgb(var(~'@{arco-cssvars-prefix}-orange-5'));\n@dark-warning-6: rgb(var(~'@{arco-cssvars-prefix}-orange-6'));\n@dark-warning-7: rgb(var(~'@{arco-cssvars-prefix}-orange-7'));\n@dark-warning-8: rgb(var(~'@{arco-cssvars-prefix}-orange-8'));\n@dark-warning-9: rgb(var(~'@{arco-cssvars-prefix}-orange-9'));\n@dark-warning-10: rgb(var(~'@{arco-cssvars-prefix}-orange-10'));\n\n// 链接色\n@link-1: rgb(var(~'@{arco-cssvars-prefix}-arcoblue-1'));\n@link-2: rgb(var(~'@{arco-cssvars-prefix}-arcoblue-2'));\n@link-3: rgb(var(~'@{arco-cssvars-prefix}-arcoblue-3'));\n@link-4: rgb(var(~'@{arco-cssvars-prefix}-arcoblue-4'));\n@link-5: rgb(var(~'@{arco-cssvars-prefix}-arcoblue-5'));\n@link-6: rgb(var(~'@{arco-cssvars-prefix}-arcoblue-6'));\n@link-7: rgb(var(~'@{arco-cssvars-prefix}-arcoblue-7'));\n@link-8: rgb(var(~'@{arco-cssvars-prefix}-arcoblue-8'));\n@link-9: rgb(var(~'@{arco-cssvars-prefix}-arcoblue-9'));\n@link-10: rgb(var(~'@{arco-cssvars-prefix}-arcoblue-10'));\n\n@dark-link-1: rgb(var(~'@{arco-cssvars-prefix}-arcoblue-1'));\n@dark-link-2: rgb(var(~'@{arco-cssvars-prefix}-arcoblue-2'));\n@dark-link-3: rgb(var(~'@{arco-cssvars-prefix}-arcoblue-3'));\n@dark-link-4: rgb(var(~'@{arco-cssvars-prefix}-arcoblue-4'));\n@dark-link-5: rgb(var(~'@{arco-cssvars-prefix}-arcoblue-5'));\n@dark-link-6: rgb(var(~'@{arco-cssvars-prefix}-arcoblue-6'));\n@dark-link-7: rgb(var(~'@{arco-cssvars-prefix}-arcoblue-7'));\n@dark-link-8: rgb(var(~'@{arco-cssvars-prefix}-arcoblue-8'));\n@dark-link-9: rgb(var(~'@{arco-cssvars-prefix}-arcoblue-9'));\n@dark-link-10: rgb(var(~'@{arco-cssvars-prefix}-arcoblue-10'));\n"
  },
  {
    "path": "packages/web-vue/components/style/color/css-variables.less",
    "content": "@import './colors.less';\n\n@plugin './get-rgb-str.js';\n\n@{arco-theme-tag} {\n  @{arco-cssvars-prefix}-red-1: get-rgb-str(@red-1);\n  @{arco-cssvars-prefix}-red-2: get-rgb-str(@red-2);\n  @{arco-cssvars-prefix}-red-3: get-rgb-str(@red-3);\n  @{arco-cssvars-prefix}-red-4: get-rgb-str(@red-4);\n  @{arco-cssvars-prefix}-red-5: get-rgb-str(@red-5);\n  @{arco-cssvars-prefix}-red-6: get-rgb-str(@red-6);\n  @{arco-cssvars-prefix}-red-7: get-rgb-str(@red-7);\n  @{arco-cssvars-prefix}-red-8: get-rgb-str(@red-8);\n  @{arco-cssvars-prefix}-red-9: get-rgb-str(@red-9);\n  @{arco-cssvars-prefix}-red-10: get-rgb-str(@red-10);\n  @{arco-cssvars-prefix}-orangered-1: get-rgb-str(@orangered-1);\n  @{arco-cssvars-prefix}-orangered-2: get-rgb-str(@orangered-2);\n  @{arco-cssvars-prefix}-orangered-3: get-rgb-str(@orangered-3);\n  @{arco-cssvars-prefix}-orangered-4: get-rgb-str(@orangered-4);\n  @{arco-cssvars-prefix}-orangered-5: get-rgb-str(@orangered-5);\n  @{arco-cssvars-prefix}-orangered-6: get-rgb-str(@orangered-6);\n  @{arco-cssvars-prefix}-orangered-7: get-rgb-str(@orangered-7);\n  @{arco-cssvars-prefix}-orangered-8: get-rgb-str(@orangered-8);\n  @{arco-cssvars-prefix}-orangered-9: get-rgb-str(@orangered-9);\n  @{arco-cssvars-prefix}-orangered-10: get-rgb-str(@orangered-10);\n  @{arco-cssvars-prefix}-orange-1: get-rgb-str(@orange-1);\n  @{arco-cssvars-prefix}-orange-2: get-rgb-str(@orange-2);\n  @{arco-cssvars-prefix}-orange-3: get-rgb-str(@orange-3);\n  @{arco-cssvars-prefix}-orange-4: get-rgb-str(@orange-4);\n  @{arco-cssvars-prefix}-orange-5: get-rgb-str(@orange-5);\n  @{arco-cssvars-prefix}-orange-6: get-rgb-str(@orange-6);\n  @{arco-cssvars-prefix}-orange-7: get-rgb-str(@orange-7);\n  @{arco-cssvars-prefix}-orange-8: get-rgb-str(@orange-8);\n  @{arco-cssvars-prefix}-orange-9: get-rgb-str(@orange-9);\n  @{arco-cssvars-prefix}-orange-10: get-rgb-str(@orange-10);\n  @{arco-cssvars-prefix}-gold-1: get-rgb-str(@gold-1);\n  @{arco-cssvars-prefix}-gold-2: get-rgb-str(@gold-2);\n  @{arco-cssvars-prefix}-gold-3: get-rgb-str(@gold-3);\n  @{arco-cssvars-prefix}-gold-4: get-rgb-str(@gold-4);\n  @{arco-cssvars-prefix}-gold-5: get-rgb-str(@gold-5);\n  @{arco-cssvars-prefix}-gold-6: get-rgb-str(@gold-6);\n  @{arco-cssvars-prefix}-gold-7: get-rgb-str(@gold-7);\n  @{arco-cssvars-prefix}-gold-8: get-rgb-str(@gold-8);\n  @{arco-cssvars-prefix}-gold-9: get-rgb-str(@gold-9);\n  @{arco-cssvars-prefix}-gold-10: get-rgb-str(@gold-10);\n  @{arco-cssvars-prefix}-yellow-1: get-rgb-str(@yellow-1);\n  @{arco-cssvars-prefix}-yellow-2: get-rgb-str(@yellow-2);\n  @{arco-cssvars-prefix}-yellow-3: get-rgb-str(@yellow-3);\n  @{arco-cssvars-prefix}-yellow-4: get-rgb-str(@yellow-4);\n  @{arco-cssvars-prefix}-yellow-5: get-rgb-str(@yellow-5);\n  @{arco-cssvars-prefix}-yellow-6: get-rgb-str(@yellow-6);\n  @{arco-cssvars-prefix}-yellow-7: get-rgb-str(@yellow-7);\n  @{arco-cssvars-prefix}-yellow-8: get-rgb-str(@yellow-8);\n  @{arco-cssvars-prefix}-yellow-9: get-rgb-str(@yellow-9);\n  @{arco-cssvars-prefix}-yellow-10: get-rgb-str(@yellow-10);\n  @{arco-cssvars-prefix}-lime-1: get-rgb-str(@lime-1);\n  @{arco-cssvars-prefix}-lime-2: get-rgb-str(@lime-2);\n  @{arco-cssvars-prefix}-lime-3: get-rgb-str(@lime-3);\n  @{arco-cssvars-prefix}-lime-4: get-rgb-str(@lime-4);\n  @{arco-cssvars-prefix}-lime-5: get-rgb-str(@lime-5);\n  @{arco-cssvars-prefix}-lime-6: get-rgb-str(@lime-6);\n  @{arco-cssvars-prefix}-lime-7: get-rgb-str(@lime-7);\n  @{arco-cssvars-prefix}-lime-8: get-rgb-str(@lime-8);\n  @{arco-cssvars-prefix}-lime-9: get-rgb-str(@lime-9);\n  @{arco-cssvars-prefix}-lime-10: get-rgb-str(@lime-10);\n  @{arco-cssvars-prefix}-green-1: get-rgb-str(@green-1);\n  @{arco-cssvars-prefix}-green-2: get-rgb-str(@green-2);\n  @{arco-cssvars-prefix}-green-3: get-rgb-str(@green-3);\n  @{arco-cssvars-prefix}-green-4: get-rgb-str(@green-4);\n  @{arco-cssvars-prefix}-green-5: get-rgb-str(@green-5);\n  @{arco-cssvars-prefix}-green-6: get-rgb-str(@green-6);\n  @{arco-cssvars-prefix}-green-7: get-rgb-str(@green-7);\n  @{arco-cssvars-prefix}-green-8: get-rgb-str(@green-8);\n  @{arco-cssvars-prefix}-green-9: get-rgb-str(@green-9);\n  @{arco-cssvars-prefix}-green-10: get-rgb-str(@green-10);\n  @{arco-cssvars-prefix}-cyan-1: get-rgb-str(@cyan-1);\n  @{arco-cssvars-prefix}-cyan-2: get-rgb-str(@cyan-2);\n  @{arco-cssvars-prefix}-cyan-3: get-rgb-str(@cyan-3);\n  @{arco-cssvars-prefix}-cyan-4: get-rgb-str(@cyan-4);\n  @{arco-cssvars-prefix}-cyan-5: get-rgb-str(@cyan-5);\n  @{arco-cssvars-prefix}-cyan-6: get-rgb-str(@cyan-6);\n  @{arco-cssvars-prefix}-cyan-7: get-rgb-str(@cyan-7);\n  @{arco-cssvars-prefix}-cyan-8: get-rgb-str(@cyan-8);\n  @{arco-cssvars-prefix}-cyan-9: get-rgb-str(@cyan-9);\n  @{arco-cssvars-prefix}-cyan-10: get-rgb-str(@cyan-10);\n  @{arco-cssvars-prefix}-blue-1: get-rgb-str(@blue-1);\n  @{arco-cssvars-prefix}-blue-2: get-rgb-str(@blue-2);\n  @{arco-cssvars-prefix}-blue-3: get-rgb-str(@blue-3);\n  @{arco-cssvars-prefix}-blue-4: get-rgb-str(@blue-4);\n  @{arco-cssvars-prefix}-blue-5: get-rgb-str(@blue-5);\n  @{arco-cssvars-prefix}-blue-6: get-rgb-str(@blue-6);\n  @{arco-cssvars-prefix}-blue-7: get-rgb-str(@blue-7);\n  @{arco-cssvars-prefix}-blue-8: get-rgb-str(@blue-8);\n  @{arco-cssvars-prefix}-blue-9: get-rgb-str(@blue-9);\n  @{arco-cssvars-prefix}-blue-10: get-rgb-str(@blue-10);\n  @{arco-cssvars-prefix}-arcoblue-1: get-rgb-str(@arcoblue-1);\n  @{arco-cssvars-prefix}-arcoblue-2: get-rgb-str(@arcoblue-2);\n  @{arco-cssvars-prefix}-arcoblue-3: get-rgb-str(@arcoblue-3);\n  @{arco-cssvars-prefix}-arcoblue-4: get-rgb-str(@arcoblue-4);\n  @{arco-cssvars-prefix}-arcoblue-5: get-rgb-str(@arcoblue-5);\n  @{arco-cssvars-prefix}-arcoblue-6: get-rgb-str(@arcoblue-6);\n  @{arco-cssvars-prefix}-arcoblue-7: get-rgb-str(@arcoblue-7);\n  @{arco-cssvars-prefix}-arcoblue-8: get-rgb-str(@arcoblue-8);\n  @{arco-cssvars-prefix}-arcoblue-9: get-rgb-str(@arcoblue-9);\n  @{arco-cssvars-prefix}-arcoblue-10: get-rgb-str(@arcoblue-10);\n  @{arco-cssvars-prefix}-purple-1: get-rgb-str(@purple-1);\n  @{arco-cssvars-prefix}-purple-2: get-rgb-str(@purple-2);\n  @{arco-cssvars-prefix}-purple-3: get-rgb-str(@purple-3);\n  @{arco-cssvars-prefix}-purple-4: get-rgb-str(@purple-4);\n  @{arco-cssvars-prefix}-purple-5: get-rgb-str(@purple-5);\n  @{arco-cssvars-prefix}-purple-6: get-rgb-str(@purple-6);\n  @{arco-cssvars-prefix}-purple-7: get-rgb-str(@purple-7);\n  @{arco-cssvars-prefix}-purple-8: get-rgb-str(@purple-8);\n  @{arco-cssvars-prefix}-purple-9: get-rgb-str(@purple-9);\n  @{arco-cssvars-prefix}-purple-10: get-rgb-str(@purple-10);\n  @{arco-cssvars-prefix}-pinkpurple-1: get-rgb-str(@pinkpurple-1);\n  @{arco-cssvars-prefix}-pinkpurple-2: get-rgb-str(@pinkpurple-2);\n  @{arco-cssvars-prefix}-pinkpurple-3: get-rgb-str(@pinkpurple-3);\n  @{arco-cssvars-prefix}-pinkpurple-4: get-rgb-str(@pinkpurple-4);\n  @{arco-cssvars-prefix}-pinkpurple-5: get-rgb-str(@pinkpurple-5);\n  @{arco-cssvars-prefix}-pinkpurple-6: get-rgb-str(@pinkpurple-6);\n  @{arco-cssvars-prefix}-pinkpurple-7: get-rgb-str(@pinkpurple-7);\n  @{arco-cssvars-prefix}-pinkpurple-8: get-rgb-str(@pinkpurple-8);\n  @{arco-cssvars-prefix}-pinkpurple-9: get-rgb-str(@pinkpurple-9);\n  @{arco-cssvars-prefix}-pinkpurple-10: get-rgb-str(@pinkpurple-10);\n  @{arco-cssvars-prefix}-magenta-1: get-rgb-str(@magenta-1);\n  @{arco-cssvars-prefix}-magenta-2: get-rgb-str(@magenta-2);\n  @{arco-cssvars-prefix}-magenta-3: get-rgb-str(@magenta-3);\n  @{arco-cssvars-prefix}-magenta-4: get-rgb-str(@magenta-4);\n  @{arco-cssvars-prefix}-magenta-5: get-rgb-str(@magenta-5);\n  @{arco-cssvars-prefix}-magenta-6: get-rgb-str(@magenta-6);\n  @{arco-cssvars-prefix}-magenta-7: get-rgb-str(@magenta-7);\n  @{arco-cssvars-prefix}-magenta-8: get-rgb-str(@magenta-8);\n  @{arco-cssvars-prefix}-magenta-9: get-rgb-str(@magenta-9);\n  @{arco-cssvars-prefix}-magenta-10: get-rgb-str(@magenta-10);\n  @{arco-cssvars-prefix}-gray-1: get-rgb-str(@gray-1);\n  @{arco-cssvars-prefix}-gray-2: get-rgb-str(@gray-2);\n  @{arco-cssvars-prefix}-gray-3: get-rgb-str(@gray-3);\n  @{arco-cssvars-prefix}-gray-4: get-rgb-str(@gray-4);\n  @{arco-cssvars-prefix}-gray-5: get-rgb-str(@gray-5);\n  @{arco-cssvars-prefix}-gray-6: get-rgb-str(@gray-6);\n  @{arco-cssvars-prefix}-gray-7: get-rgb-str(@gray-7);\n  @{arco-cssvars-prefix}-gray-8: get-rgb-str(@gray-8);\n  @{arco-cssvars-prefix}-gray-9: get-rgb-str(@gray-9);\n  @{arco-cssvars-prefix}-gray-10: get-rgb-str(@gray-10);\n  @{arco-cssvars-prefix}-success-1: get-var-str(~'@{success-1}');\n  @{arco-cssvars-prefix}-success-2: get-var-str(~'@{success-2}');\n  @{arco-cssvars-prefix}-success-3: get-var-str(~'@{success-3}');\n  @{arco-cssvars-prefix}-success-4: get-var-str(~'@{success-4}');\n  @{arco-cssvars-prefix}-success-5: get-var-str(~'@{success-5}');\n  @{arco-cssvars-prefix}-success-6: get-var-str(~'@{success-6}');\n  @{arco-cssvars-prefix}-success-7: get-var-str(~'@{success-7}');\n  @{arco-cssvars-prefix}-success-8: get-var-str(~'@{success-8}');\n  @{arco-cssvars-prefix}-success-9: get-var-str(~'@{success-9}');\n  @{arco-cssvars-prefix}-success-10: get-var-str(~'@{success-10}');\n  @{arco-cssvars-prefix}-primary-1: get-var-str(~'@{primary-1}');\n  @{arco-cssvars-prefix}-primary-2: get-var-str(~'@{primary-2}');\n  @{arco-cssvars-prefix}-primary-3: get-var-str(~'@{primary-3}');\n  @{arco-cssvars-prefix}-primary-4: get-var-str(~'@{primary-4}');\n  @{arco-cssvars-prefix}-primary-5: get-var-str(~'@{primary-5}');\n  @{arco-cssvars-prefix}-primary-6: get-var-str(~'@{primary-6}');\n  @{arco-cssvars-prefix}-primary-7: get-var-str(~'@{primary-7}');\n  @{arco-cssvars-prefix}-primary-8: get-var-str(~'@{primary-8}');\n  @{arco-cssvars-prefix}-primary-9: get-var-str(~'@{primary-9}');\n  @{arco-cssvars-prefix}-primary-10: get-var-str(~'@{primary-10}');\n  @{arco-cssvars-prefix}-danger-1: get-var-str(~'@{danger-1}');\n  @{arco-cssvars-prefix}-danger-2: get-var-str(~'@{danger-2}');\n  @{arco-cssvars-prefix}-danger-3: get-var-str(~'@{danger-3}');\n  @{arco-cssvars-prefix}-danger-4: get-var-str(~'@{danger-4}');\n  @{arco-cssvars-prefix}-danger-5: get-var-str(~'@{danger-5}');\n  @{arco-cssvars-prefix}-danger-6: get-var-str(~'@{danger-6}');\n  @{arco-cssvars-prefix}-danger-7: get-var-str(~'@{danger-7}');\n  @{arco-cssvars-prefix}-danger-8: get-var-str(~'@{danger-8}');\n  @{arco-cssvars-prefix}-danger-9: get-var-str(~'@{danger-9}');\n  @{arco-cssvars-prefix}-danger-10: get-var-str(~'@{danger-10}');\n  @{arco-cssvars-prefix}-warning-1: get-var-str(~'@{warning-1}');\n  @{arco-cssvars-prefix}-warning-2: get-var-str(~'@{warning-2}');\n  @{arco-cssvars-prefix}-warning-3: get-var-str(~'@{warning-3}');\n  @{arco-cssvars-prefix}-warning-4: get-var-str(~'@{warning-4}');\n  @{arco-cssvars-prefix}-warning-5: get-var-str(~'@{warning-5}');\n  @{arco-cssvars-prefix}-warning-6: get-var-str(~'@{warning-6}');\n  @{arco-cssvars-prefix}-warning-7: get-var-str(~'@{warning-7}');\n  @{arco-cssvars-prefix}-warning-8: get-var-str(~'@{warning-8}');\n  @{arco-cssvars-prefix}-warning-9: get-var-str(~'@{warning-9}');\n  @{arco-cssvars-prefix}-warning-10: get-var-str(~'@{warning-10}');\n  @{arco-cssvars-prefix}-link-1: get-var-str(~'@{link-1}');\n  @{arco-cssvars-prefix}-link-2: get-var-str(~'@{link-2}');\n  @{arco-cssvars-prefix}-link-3: get-var-str(~'@{link-3}');\n  @{arco-cssvars-prefix}-link-4: get-var-str(~'@{link-4}');\n  @{arco-cssvars-prefix}-link-5: get-var-str(~'@{link-5}');\n  @{arco-cssvars-prefix}-link-6: get-var-str(~'@{link-6}');\n  @{arco-cssvars-prefix}-link-7: get-var-str(~'@{link-7}');\n  @{arco-cssvars-prefix}-link-8: get-var-str(~'@{link-8}');\n  @{arco-cssvars-prefix}-link-9: get-var-str(~'@{link-9}');\n  @{arco-cssvars-prefix}-link-10: get-var-str(~'@{link-10}');\n}\n\n@{arco-theme-tag}[arco-theme='dark'] {\n  @{arco-cssvars-prefix}-red-1: get-rgb-str(@dark-red-1);\n  @{arco-cssvars-prefix}-red-2: get-rgb-str(@dark-red-2);\n  @{arco-cssvars-prefix}-red-3: get-rgb-str(@dark-red-3);\n  @{arco-cssvars-prefix}-red-4: get-rgb-str(@dark-red-4);\n  @{arco-cssvars-prefix}-red-5: get-rgb-str(@dark-red-5);\n  @{arco-cssvars-prefix}-red-6: get-rgb-str(@dark-red-6);\n  @{arco-cssvars-prefix}-red-7: get-rgb-str(@dark-red-7);\n  @{arco-cssvars-prefix}-red-8: get-rgb-str(@dark-red-8);\n  @{arco-cssvars-prefix}-red-9: get-rgb-str(@dark-red-9);\n  @{arco-cssvars-prefix}-red-10: get-rgb-str(@dark-red-10);\n  @{arco-cssvars-prefix}-orangered-1: get-rgb-str(@dark-orangered-1);\n  @{arco-cssvars-prefix}-orangered-2: get-rgb-str(@dark-orangered-2);\n  @{arco-cssvars-prefix}-orangered-3: get-rgb-str(@dark-orangered-3);\n  @{arco-cssvars-prefix}-orangered-4: get-rgb-str(@dark-orangered-4);\n  @{arco-cssvars-prefix}-orangered-5: get-rgb-str(@dark-orangered-5);\n  @{arco-cssvars-prefix}-orangered-6: get-rgb-str(@dark-orangered-6);\n  @{arco-cssvars-prefix}-orangered-7: get-rgb-str(@dark-orangered-7);\n  @{arco-cssvars-prefix}-orangered-8: get-rgb-str(@dark-orangered-8);\n  @{arco-cssvars-prefix}-orangered-9: get-rgb-str(@dark-orangered-9);\n  @{arco-cssvars-prefix}-orangered-10: get-rgb-str(@dark-orangered-10);\n  @{arco-cssvars-prefix}-orange-1: get-rgb-str(@dark-orange-1);\n  @{arco-cssvars-prefix}-orange-2: get-rgb-str(@dark-orange-2);\n  @{arco-cssvars-prefix}-orange-3: get-rgb-str(@dark-orange-3);\n  @{arco-cssvars-prefix}-orange-4: get-rgb-str(@dark-orange-4);\n  @{arco-cssvars-prefix}-orange-5: get-rgb-str(@dark-orange-5);\n  @{arco-cssvars-prefix}-orange-6: get-rgb-str(@dark-orange-6);\n  @{arco-cssvars-prefix}-orange-7: get-rgb-str(@dark-orange-7);\n  @{arco-cssvars-prefix}-orange-8: get-rgb-str(@dark-orange-8);\n  @{arco-cssvars-prefix}-orange-9: get-rgb-str(@dark-orange-9);\n  @{arco-cssvars-prefix}-orange-10: get-rgb-str(@dark-orange-10);\n  @{arco-cssvars-prefix}-gold-1: get-rgb-str(@dark-gold-1);\n  @{arco-cssvars-prefix}-gold-2: get-rgb-str(@dark-gold-2);\n  @{arco-cssvars-prefix}-gold-3: get-rgb-str(@dark-gold-3);\n  @{arco-cssvars-prefix}-gold-4: get-rgb-str(@dark-gold-4);\n  @{arco-cssvars-prefix}-gold-5: get-rgb-str(@dark-gold-5);\n  @{arco-cssvars-prefix}-gold-6: get-rgb-str(@dark-gold-6);\n  @{arco-cssvars-prefix}-gold-7: get-rgb-str(@dark-gold-7);\n  @{arco-cssvars-prefix}-gold-8: get-rgb-str(@dark-gold-8);\n  @{arco-cssvars-prefix}-gold-9: get-rgb-str(@dark-gold-9);\n  @{arco-cssvars-prefix}-gold-10: get-rgb-str(@dark-gold-10);\n  @{arco-cssvars-prefix}-yellow-1: get-rgb-str(@dark-yellow-1);\n  @{arco-cssvars-prefix}-yellow-2: get-rgb-str(@dark-yellow-2);\n  @{arco-cssvars-prefix}-yellow-3: get-rgb-str(@dark-yellow-3);\n  @{arco-cssvars-prefix}-yellow-4: get-rgb-str(@dark-yellow-4);\n  @{arco-cssvars-prefix}-yellow-5: get-rgb-str(@dark-yellow-5);\n  @{arco-cssvars-prefix}-yellow-6: get-rgb-str(@dark-yellow-6);\n  @{arco-cssvars-prefix}-yellow-7: get-rgb-str(@dark-yellow-7);\n  @{arco-cssvars-prefix}-yellow-8: get-rgb-str(@dark-yellow-8);\n  @{arco-cssvars-prefix}-yellow-9: get-rgb-str(@dark-yellow-9);\n  @{arco-cssvars-prefix}-yellow-10: get-rgb-str(@dark-yellow-10);\n  @{arco-cssvars-prefix}-lime-1: get-rgb-str(@dark-lime-1);\n  @{arco-cssvars-prefix}-lime-2: get-rgb-str(@dark-lime-2);\n  @{arco-cssvars-prefix}-lime-3: get-rgb-str(@dark-lime-3);\n  @{arco-cssvars-prefix}-lime-4: get-rgb-str(@dark-lime-4);\n  @{arco-cssvars-prefix}-lime-5: get-rgb-str(@dark-lime-5);\n  @{arco-cssvars-prefix}-lime-6: get-rgb-str(@dark-lime-6);\n  @{arco-cssvars-prefix}-lime-7: get-rgb-str(@dark-lime-7);\n  @{arco-cssvars-prefix}-lime-8: get-rgb-str(@dark-lime-8);\n  @{arco-cssvars-prefix}-lime-9: get-rgb-str(@dark-lime-9);\n  @{arco-cssvars-prefix}-lime-10: get-rgb-str(@dark-lime-10);\n  @{arco-cssvars-prefix}-green-1: get-rgb-str(@dark-green-1);\n  @{arco-cssvars-prefix}-green-2: get-rgb-str(@dark-green-2);\n  @{arco-cssvars-prefix}-green-3: get-rgb-str(@dark-green-3);\n  @{arco-cssvars-prefix}-green-4: get-rgb-str(@dark-green-4);\n  @{arco-cssvars-prefix}-green-5: get-rgb-str(@dark-green-5);\n  @{arco-cssvars-prefix}-green-6: get-rgb-str(@dark-green-6);\n  @{arco-cssvars-prefix}-green-7: get-rgb-str(@dark-green-7);\n  @{arco-cssvars-prefix}-green-8: get-rgb-str(@dark-green-8);\n  @{arco-cssvars-prefix}-green-9: get-rgb-str(@dark-green-9);\n  @{arco-cssvars-prefix}-green-10: get-rgb-str(@dark-green-10);\n  @{arco-cssvars-prefix}-cyan-1: get-rgb-str(@dark-cyan-1);\n  @{arco-cssvars-prefix}-cyan-2: get-rgb-str(@dark-cyan-2);\n  @{arco-cssvars-prefix}-cyan-3: get-rgb-str(@dark-cyan-3);\n  @{arco-cssvars-prefix}-cyan-4: get-rgb-str(@dark-cyan-4);\n  @{arco-cssvars-prefix}-cyan-5: get-rgb-str(@dark-cyan-5);\n  @{arco-cssvars-prefix}-cyan-6: get-rgb-str(@dark-cyan-6);\n  @{arco-cssvars-prefix}-cyan-7: get-rgb-str(@dark-cyan-7);\n  @{arco-cssvars-prefix}-cyan-8: get-rgb-str(@dark-cyan-8);\n  @{arco-cssvars-prefix}-cyan-9: get-rgb-str(@dark-cyan-9);\n  @{arco-cssvars-prefix}-cyan-10: get-rgb-str(@dark-cyan-10);\n  @{arco-cssvars-prefix}-blue-1: get-rgb-str(@dark-blue-1);\n  @{arco-cssvars-prefix}-blue-2: get-rgb-str(@dark-blue-2);\n  @{arco-cssvars-prefix}-blue-3: get-rgb-str(@dark-blue-3);\n  @{arco-cssvars-prefix}-blue-4: get-rgb-str(@dark-blue-4);\n  @{arco-cssvars-prefix}-blue-5: get-rgb-str(@dark-blue-5);\n  @{arco-cssvars-prefix}-blue-6: get-rgb-str(@dark-blue-6);\n  @{arco-cssvars-prefix}-blue-7: get-rgb-str(@dark-blue-7);\n  @{arco-cssvars-prefix}-blue-8: get-rgb-str(@dark-blue-8);\n  @{arco-cssvars-prefix}-blue-9: get-rgb-str(@dark-blue-9);\n  @{arco-cssvars-prefix}-blue-10: get-rgb-str(@dark-blue-10);\n  @{arco-cssvars-prefix}-arcoblue-1: get-rgb-str(@dark-arcoblue-1);\n  @{arco-cssvars-prefix}-arcoblue-2: get-rgb-str(@dark-arcoblue-2);\n  @{arco-cssvars-prefix}-arcoblue-3: get-rgb-str(@dark-arcoblue-3);\n  @{arco-cssvars-prefix}-arcoblue-4: get-rgb-str(@dark-arcoblue-4);\n  @{arco-cssvars-prefix}-arcoblue-5: get-rgb-str(@dark-arcoblue-5);\n  @{arco-cssvars-prefix}-arcoblue-6: get-rgb-str(@dark-arcoblue-6);\n  @{arco-cssvars-prefix}-arcoblue-7: get-rgb-str(@dark-arcoblue-7);\n  @{arco-cssvars-prefix}-arcoblue-8: get-rgb-str(@dark-arcoblue-8);\n  @{arco-cssvars-prefix}-arcoblue-9: get-rgb-str(@dark-arcoblue-9);\n  @{arco-cssvars-prefix}-arcoblue-10: get-rgb-str(@dark-arcoblue-10);\n  @{arco-cssvars-prefix}-purple-1: get-rgb-str(@dark-purple-1);\n  @{arco-cssvars-prefix}-purple-2: get-rgb-str(@dark-purple-2);\n  @{arco-cssvars-prefix}-purple-3: get-rgb-str(@dark-purple-3);\n  @{arco-cssvars-prefix}-purple-4: get-rgb-str(@dark-purple-4);\n  @{arco-cssvars-prefix}-purple-5: get-rgb-str(@dark-purple-5);\n  @{arco-cssvars-prefix}-purple-6: get-rgb-str(@dark-purple-6);\n  @{arco-cssvars-prefix}-purple-7: get-rgb-str(@dark-purple-7);\n  @{arco-cssvars-prefix}-purple-8: get-rgb-str(@dark-purple-8);\n  @{arco-cssvars-prefix}-purple-9: get-rgb-str(@dark-purple-9);\n  @{arco-cssvars-prefix}-purple-10: get-rgb-str(@dark-purple-10);\n  @{arco-cssvars-prefix}-pinkpurple-1: get-rgb-str(@dark-pinkpurple-1);\n  @{arco-cssvars-prefix}-pinkpurple-2: get-rgb-str(@dark-pinkpurple-2);\n  @{arco-cssvars-prefix}-pinkpurple-3: get-rgb-str(@dark-pinkpurple-3);\n  @{arco-cssvars-prefix}-pinkpurple-4: get-rgb-str(@dark-pinkpurple-4);\n  @{arco-cssvars-prefix}-pinkpurple-5: get-rgb-str(@dark-pinkpurple-5);\n  @{arco-cssvars-prefix}-pinkpurple-6: get-rgb-str(@dark-pinkpurple-6);\n  @{arco-cssvars-prefix}-pinkpurple-7: get-rgb-str(@dark-pinkpurple-7);\n  @{arco-cssvars-prefix}-pinkpurple-8: get-rgb-str(@dark-pinkpurple-8);\n  @{arco-cssvars-prefix}-pinkpurple-9: get-rgb-str(@dark-pinkpurple-9);\n  @{arco-cssvars-prefix}-pinkpurple-10: get-rgb-str(@dark-pinkpurple-10);\n  @{arco-cssvars-prefix}-magenta-1: get-rgb-str(@dark-magenta-1);\n  @{arco-cssvars-prefix}-magenta-2: get-rgb-str(@dark-magenta-2);\n  @{arco-cssvars-prefix}-magenta-3: get-rgb-str(@dark-magenta-3);\n  @{arco-cssvars-prefix}-magenta-4: get-rgb-str(@dark-magenta-4);\n  @{arco-cssvars-prefix}-magenta-5: get-rgb-str(@dark-magenta-5);\n  @{arco-cssvars-prefix}-magenta-6: get-rgb-str(@dark-magenta-6);\n  @{arco-cssvars-prefix}-magenta-7: get-rgb-str(@dark-magenta-7);\n  @{arco-cssvars-prefix}-magenta-8: get-rgb-str(@dark-magenta-8);\n  @{arco-cssvars-prefix}-magenta-9: get-rgb-str(@dark-magenta-9);\n  @{arco-cssvars-prefix}-magenta-10: get-rgb-str(@dark-magenta-10);\n  @{arco-cssvars-prefix}-gray-1: get-rgb-str(@dark-gray-1);\n  @{arco-cssvars-prefix}-gray-2: get-rgb-str(@dark-gray-2);\n  @{arco-cssvars-prefix}-gray-3: get-rgb-str(@dark-gray-3);\n  @{arco-cssvars-prefix}-gray-4: get-rgb-str(@dark-gray-4);\n  @{arco-cssvars-prefix}-gray-5: get-rgb-str(@dark-gray-5);\n  @{arco-cssvars-prefix}-gray-6: get-rgb-str(@dark-gray-6);\n  @{arco-cssvars-prefix}-gray-7: get-rgb-str(@dark-gray-7);\n  @{arco-cssvars-prefix}-gray-8: get-rgb-str(@dark-gray-8);\n  @{arco-cssvars-prefix}-gray-9: get-rgb-str(@dark-gray-9);\n  @{arco-cssvars-prefix}-gray-10: get-rgb-str(@dark-gray-10);\n  @{arco-cssvars-prefix}-primary-1: get-var-str(~'@{dark-primary-1}');\n  @{arco-cssvars-prefix}-primary-2: get-var-str(~'@{dark-primary-2}');\n  @{arco-cssvars-prefix}-primary-3: get-var-str(~'@{dark-primary-3}');\n  @{arco-cssvars-prefix}-primary-4: get-var-str(~'@{dark-primary-4}');\n  @{arco-cssvars-prefix}-primary-5: get-var-str(~'@{dark-primary-5}');\n  @{arco-cssvars-prefix}-primary-6: get-var-str(~'@{dark-primary-6}');\n  @{arco-cssvars-prefix}-primary-7: get-var-str(~'@{dark-primary-7}');\n  @{arco-cssvars-prefix}-primary-8: get-var-str(~'@{dark-primary-8}');\n  @{arco-cssvars-prefix}-primary-9: get-var-str(~'@{dark-primary-9}');\n  @{arco-cssvars-prefix}-primary-10: get-var-str(~'@{dark-primary-10}');\n  @{arco-cssvars-prefix}-success-1: get-var-str(~'@{dark-success-1}');\n  @{arco-cssvars-prefix}-success-2: get-var-str(~'@{dark-success-2}');\n  @{arco-cssvars-prefix}-success-3: get-var-str(~'@{dark-success-3}');\n  @{arco-cssvars-prefix}-success-4: get-var-str(~'@{dark-success-4}');\n  @{arco-cssvars-prefix}-success-5: get-var-str(~'@{dark-success-5}');\n  @{arco-cssvars-prefix}-success-6: get-var-str(~'@{dark-success-6}');\n  @{arco-cssvars-prefix}-success-7: get-var-str(~'@{dark-success-7}');\n  @{arco-cssvars-prefix}-success-8: get-var-str(~'@{dark-success-8}');\n  @{arco-cssvars-prefix}-success-9: get-var-str(~'@{dark-success-9}');\n  @{arco-cssvars-prefix}-success-10: get-var-str(~'@{dark-success-10}');\n  @{arco-cssvars-prefix}-danger-1: get-var-str(~'@{dark-danger-1}');\n  @{arco-cssvars-prefix}-danger-2: get-var-str(~'@{dark-danger-2}');\n  @{arco-cssvars-prefix}-danger-3: get-var-str(~'@{dark-danger-3}');\n  @{arco-cssvars-prefix}-danger-4: get-var-str(~'@{dark-danger-4}');\n  @{arco-cssvars-prefix}-danger-5: get-var-str(~'@{dark-danger-5}');\n  @{arco-cssvars-prefix}-danger-6: get-var-str(~'@{dark-danger-6}');\n  @{arco-cssvars-prefix}-danger-7: get-var-str(~'@{dark-danger-7}');\n  @{arco-cssvars-prefix}-danger-8: get-var-str(~'@{dark-danger-8}');\n  @{arco-cssvars-prefix}-danger-9: get-var-str(~'@{dark-danger-9}');\n  @{arco-cssvars-prefix}-danger-10: get-var-str(~'@{dark-danger-10}');\n  @{arco-cssvars-prefix}-warning-1: get-var-str(~'@{dark-warning-1}');\n  @{arco-cssvars-prefix}-warning-2: get-var-str(~'@{dark-warning-2}');\n  @{arco-cssvars-prefix}-warning-3: get-var-str(~'@{dark-warning-3}');\n  @{arco-cssvars-prefix}-warning-4: get-var-str(~'@{dark-warning-4}');\n  @{arco-cssvars-prefix}-warning-5: get-var-str(~'@{dark-warning-5}');\n  @{arco-cssvars-prefix}-warning-6: get-var-str(~'@{dark-warning-6}');\n  @{arco-cssvars-prefix}-warning-7: get-var-str(~'@{dark-warning-7}');\n  @{arco-cssvars-prefix}-warning-8: get-var-str(~'@{dark-warning-8}');\n  @{arco-cssvars-prefix}-warning-9: get-var-str(~'@{dark-warning-9}');\n  @{arco-cssvars-prefix}-warning-10: get-var-str(~'@{dark-warning-10}');\n  @{arco-cssvars-prefix}-link-1: get-var-str(~'@{dark-link-1}');\n  @{arco-cssvars-prefix}-link-2: get-var-str(~'@{dark-link-2}');\n  @{arco-cssvars-prefix}-link-3: get-var-str(~'@{dark-link-3}');\n  @{arco-cssvars-prefix}-link-4: get-var-str(~'@{dark-link-4}');\n  @{arco-cssvars-prefix}-link-5: get-var-str(~'@{dark-link-5}');\n  @{arco-cssvars-prefix}-link-6: get-var-str(~'@{dark-link-6}');\n  @{arco-cssvars-prefix}-link-7: get-var-str(~'@{dark-link-7}');\n  @{arco-cssvars-prefix}-link-8: get-var-str(~'@{dark-link-8}');\n  @{arco-cssvars-prefix}-link-9: get-var-str(~'@{dark-link-9}');\n  @{arco-cssvars-prefix}-link-10: get-var-str(~'@{dark-link-10}');\n}\n"
  },
  {
    "path": "packages/web-vue/components/style/color/get-rgb-str.js",
    "content": "// eslint-disable-next-line @typescript-eslint/no-var-requires\nconst { getRgbStr } = require('@arco-design/color');\n\nmodule.exports = {\n  install(_, __, functions) {\n    functions.add('get-rgb-str', (color) => {\n      return getRgbStr(color.value);\n    });\n\n    functions.add('get-var-str', (color) => {\n      if (color.value.indexOf('rgb') === 0) {\n        return color.value.replace(/rgb\\((.*)\\)/, '$1');\n      }\n      return getRgbStr(color.value);\n    });\n  },\n};\n"
  },
  {
    "path": "packages/web-vue/components/style/color/palette-dark.js",
    "content": "// eslint-disable-next-line @typescript-eslint/no-var-requires\nconst { generate } = require('@arco-design/color');\n\nmodule.exports = {\n  install(_, __, functions) {\n    functions.add('color-palette-dark', (color, index) => {\n      return generate(color.value, { index: index.value, dark: true });\n    });\n  },\n};\n"
  },
  {
    "path": "packages/web-vue/components/style/color/palette.js",
    "content": "// eslint-disable-next-line @typescript-eslint/no-var-requires\nconst { generate } = require('@arco-design/color');\n\nmodule.exports = {\n  install(_, __, functions) {\n    functions.add('color-palette', (color, index) => {\n      return generate(color.value, { index: index.value });\n    });\n  },\n};\n"
  },
  {
    "path": "packages/web-vue/components/style/icon.less",
    "content": "@import './theme/index.less';\n\n.@{prefix}-icon {\n  display: inline-block;\n  width: 1em;\n  height: 1em;\n  color: inherit;\n  font-style: normal;\n  vertical-align: -2px;\n  outline: none;\n  stroke: currentColor;\n}\n\n.@{prefix}-icon-loading,\n.@{prefix}-icon-spin {\n  animation: ~'@{prefix}-loading-circle' @transition-duration-loading infinite @transition-timing-function-linear;\n}\n\n@keyframes ~'@{prefix}-loading-circle' {\n  0% {\n    transform: rotate(0);\n  }\n\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n.@{prefix}-icon-hover {\n  position: relative;\n  display: inline-block;\n  cursor: pointer;\n\n  .@{prefix}-icon {\n    position: relative;\n  }\n\n  &::before {\n    position: absolute;\n    display: block;\n    box-sizing: border-box;\n    background-color: @color-transparent;\n    border-radius: @icon-hover-border-radius;\n    transition: background-color @transition-duration-1\n      @transition-timing-function-linear;\n    content: '';\n  }\n\n  &:hover::before {\n    background-color: @icon-hover-color-bg;\n  }\n\n  &.@{prefix}-icon-hover-disabled::before {\n    opacity: 0;\n  }\n\n  .size(@icon-size, @icon-bg-height) {\n    line-height: @icon-size;\n\n    &::before {\n      top: 50%;\n      left: 50%;\n      width: @icon-bg-height;\n      height: @icon-bg-height;\n      transform: translate(-50%, -50%);\n    }\n  }\n\n  .size(@icon-hover-size-default-icon, @icon-hover-size-default-height);\n\n  &-size-mini {\n    .size(@icon-hover-size-mini-icon, @icon-hover-size-mini-height);\n  }\n\n  &-size-small {\n    .size(@icon-hover-size-small-icon, @icon-hover-size-small-height);\n  }\n\n  &-size-large {\n    .size(@icon-hover-size-large-icon, @icon-hover-size-large-height);\n  }\n\n  &-size-huge {\n    .size(@icon-hover-size-huge-icon, @icon-hover-size-huge-height);\n  }\n}\n"
  },
  {
    "path": "packages/web-vue/components/style/index.less",
    "content": "@import './normalize.less';\n@import './icon.less';\n@import './animation/index.less';\n@import './theme/index.less';\n@import './theme/css-variables.less';\n\nbody {\n  font-size: @font-size-body;\n  font-family: @font-family;\n\n}\n"
  },
  {
    "path": "packages/web-vue/components/style/mixins/icon-hover.less",
    "content": "@import '../theme/index.less';\n\n.icon-hover(@prefixCls, @inner-height, @bg-height) {\n  .@{prefix}-icon-hover.@{prefixCls}-icon-hover::before {\n    width: @bg-height;\n    height: @bg-height;\n  }\n}\n\n.icon-hover-bg(@prefixCls, @background-color-hover) {\n  .@{prefix}-icon-hover.@{prefixCls}-icon-hover:hover::before {\n    background-color: @background-color-hover;\n  }\n}\n"
  },
  {
    "path": "packages/web-vue/components/style/mixins/index.less",
    "content": "@import './icon-hover.less';\n\n.fixed-width(@width) {\n  width: @width;\n  min-width: @width;\n  max-width: @width;\n}\n\n.text-ellipsis() {\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n"
  },
  {
    "path": "packages/web-vue/components/style/normalize.less",
    "content": "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */\n\n/* Document\n   ========================================================================== */\n\n/**\n * 1. Correct the line height in all browsers.\n * 2. Prevent adjustments of font size after orientation changes in iOS.\n */\n\nhtml {\n  line-height: 1.15; /* 1 */\n  -webkit-text-size-adjust: 100%; /* 2 */\n  -webkit-font-smoothing: antialiased; /* chrome、safari */\n  -moz-osx-font-smoothing: grayscale; /* firefox */\n}\n\n/* Sections\n   ========================================================================== */\n\n/**\n * Remove the margin in all browsers.\n */\n\nbody {\n  margin: 0;\n}\n\n/**\n * Render the `main` element consistently in IE.\n */\n\nmain {\n  display: block;\n}\n\n/**\n * Correct the font size and margin on `h1` elements within `section` and\n * `article` contexts in Chrome, Firefox, and Safari.\n */\n\nh1 {\n  margin: 0.67em 0;\n  font-size: 2em;\n}\n\n/* Grouping content\n   ========================================================================== */\n\n/**\n * 1. Add the correct box sizing in Firefox.\n * 2. Show the overflow in Edge and IE.\n */\n\nhr {\n  box-sizing: content-box; /* 1 */\n  height: 0; /* 1 */\n  overflow: visible; /* 2 */\n}\n\n/**\n * 1. Correct the inheritance and scaling of font size in all browsers.\n * 2. Correct the odd `em` font sizing in all browsers.\n */\n\npre {\n  font-size: 1em; /* 2 */\n  font-family: monospace, monospace; /* 1 */\n}\n\n/* Text-level semantics\n   ========================================================================== */\n\n/**\n * Remove the gray background on active links in IE 10.\n */\n\na {\n  background-color: transparent;\n}\n\n/**\n * 1. Remove the bottom border in Chrome 57-\n * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.\n */\n\nabbr[title] {\n  text-decoration: underline; /* 2 */\n  text-decoration: underline dotted; /* 2 */\n  border-bottom: none; /* 1 */\n}\n\n/**\n * Add the correct font weight in Chrome, Edge, and Safari.\n */\n\nb,\nstrong {\n  font-weight: bolder;\n}\n\n/**\n * 1. Correct the inheritance and scaling of font size in all browsers.\n * 2. Correct the odd `em` font sizing in all browsers.\n */\n\ncode,\nkbd,\nsamp {\n  font-size: 1em; /* 2 */\n  font-family: monospace, monospace; /* 1 */\n}\n\n/**\n * Add the correct font size in all browsers.\n */\n\nsmall {\n  font-size: 80%;\n}\n\n/**\n * Prevent `sub` and `sup` elements from affecting the line height in\n * all browsers.\n */\n\nsub,\nsup {\n  position: relative;\n  font-size: 75%;\n  line-height: 0;\n  vertical-align: baseline;\n}\n\nsub {\n  bottom: -0.25em;\n}\n\nsup {\n  top: -0.5em;\n}\n\n/* Embedded content\n   ========================================================================== */\n\n/**\n * Remove the border on images inside links in IE 10.\n */\n\nimg {\n  border-style: none;\n}\n\n/* Forms\n   ========================================================================== */\n\n/**\n * 1. Change the font styles in all browsers.\n * 2. Remove the margin in Firefox and Safari.\n */\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n  margin: 0; /* 2 */\n  font-size: 100%; /* 1 */\n  font-family: inherit; /* 1 */\n  line-height: 1.15; /* 1 */\n}\n\n/**\n * Show the overflow in IE.\n * 1. Show the overflow in Edge.\n */\n\nbutton,\ninput {\n  /* 1 */\n  overflow: visible;\n}\n\n/**\n * Remove the inheritance of text transform in Edge, Firefox, and IE.\n * 1. Remove the inheritance of text transform in Firefox.\n */\n\nbutton,\nselect {\n  /* 1 */\n  text-transform: none;\n}\n\n/**\n * Correct the inability to style clickable types in iOS and Safari.\n */\n\nbutton,\n[type='button'],\n[type='reset'],\n[type='submit'] {\n  -webkit-appearance: button;\n}\n\n/**\n * Remove the inner border and padding in Firefox.\n */\n\nbutton::-moz-focus-inner,\n[type='button']::-moz-focus-inner,\n[type='reset']::-moz-focus-inner,\n[type='submit']::-moz-focus-inner {\n  padding: 0;\n  border-style: none;\n}\n\n/**\n * Restore the focus styles unset by the previous rule.\n */\n\nbutton:-moz-focusring,\n[type='button']:-moz-focusring,\n[type='reset']:-moz-focusring,\n[type='submit']:-moz-focusring {\n  outline: 1px dotted ButtonText;\n}\n\n/**\n * Correct the padding in Firefox.\n */\n\nfieldset {\n  padding: 0.35em 0.75em 0.625em;\n}\n\n/**\n * 1. Correct the text wrapping in Edge and IE.\n * 2. Correct the color inheritance from `fieldset` elements in IE.\n * 3. Remove the padding so developers are not caught out when they zero out\n *    `fieldset` elements in all browsers.\n */\n\nlegend {\n  display: table; /* 1 */\n  box-sizing: border-box; /* 1 */\n  max-width: 100%; /* 1 */\n  padding: 0; /* 3 */\n  color: inherit; /* 2 */\n  white-space: normal; /* 1 */\n}\n\n/**\n * Add the correct vertical alignment in Chrome, Firefox, and Opera.\n */\n\nprogress {\n  vertical-align: baseline;\n}\n\n/**\n * Remove the default vertical scrollbar in IE 10+.\n */\n\ntextarea {\n  overflow: auto;\n}\n\n/**\n * 1. Add the correct box sizing in IE 10.\n * 2. Remove the padding in IE 10.\n */\n\n[type='checkbox'],\n[type='radio'] {\n  box-sizing: border-box; /* 1 */\n  padding: 0; /* 2 */\n}\n\n/**\n * Correct the cursor style of increment and decrement buttons in Chrome.\n */\n\n[type='number']::-webkit-inner-spin-button,\n[type='number']::-webkit-outer-spin-button {\n  height: auto;\n}\n\n/**\n * 1. Correct the odd appearance in Chrome and Safari.\n * 2. Correct the outline style in Safari.\n */\n\n[type='search'] {\n  outline-offset: -2px; /* 2 */\n  -webkit-appearance: textfield; /* 1 */\n}\n\n/**\n * Remove the inner padding in Chrome and Safari on macOS.\n */\n\n[type='search']::-webkit-search-decoration {\n  -webkit-appearance: none;\n}\n\n/**\n * 1. Correct the inability to style clickable types in iOS and Safari.\n * 2. Change font properties to `inherit` in Safari.\n */\n\n::-webkit-file-upload-button {\n  font: inherit; /* 2 */\n  -webkit-appearance: button; /* 1 */\n}\n\n/* Interactive\n   ========================================================================== */\n\n/*\n * Add the correct display in Edge, IE 10+, and Firefox.\n */\n\ndetails {\n  display: block;\n}\n\n/*\n * Add the correct display in all browsers.\n */\n\nsummary {\n  display: list-item;\n}\n\n/* Misc\n   ========================================================================== */\n\n/**\n * Add the correct display in IE 10+.\n */\n\ntemplate {\n  display: none;\n}\n\n/**\n * Add the correct display in IE 10.\n */\n\n[hidden] {\n  display: none;\n}\n"
  },
  {
    "path": "packages/web-vue/components/style/theme/component.less",
    "content": "@import './global.less';\n\n/********* icon hover *********/\n@icon-hover-border-radius: @radius-circle;\n@icon-hover-color-bg: var(~'@{arco-cssvars-prefix}-color-fill-2');\n\n@icon-hover-size-default-height: @size-5;\n@icon-hover-size-small-height: @size-5;\n@icon-hover-size-mini-height: @size-5;\n@icon-hover-size-large-height: @size-6;\n@icon-hover-size-huge-height: @size-6;\n\n@icon-hover-size-small-icon: @size-3;\n@icon-hover-size-mini-icon: @size-3;\n@icon-hover-size-default-icon: @size-3;\n@icon-hover-size-large-icon: @size-3;\n@icon-hover-size-huge-icon: @size-3;\n\n// vue overwrite token\n@icon-hover-size-medium-height: @icon-hover-size-default-height;\n@icon-hover-size-medium-icon: @icon-hover-size-default-icon;\n"
  },
  {
    "path": "packages/web-vue/components/style/theme/css-variables.less",
    "content": "@import './global.less';\n@import '../color/css-variables.less';\n\n@{arco-theme-tag} {\n  @{arco-cssvars-prefix}-color-white: @color-white;\n  @{arco-cssvars-prefix}-color-black: @color-black;\n  @{arco-cssvars-prefix}-color-border: @color-border;\n  @{arco-cssvars-prefix}-color-bg-popup: @color-bg-popup;\n  @{arco-cssvars-prefix}-color-bg-1: @color-bg-1;\n  @{arco-cssvars-prefix}-color-bg-2: @color-bg-2;\n  @{arco-cssvars-prefix}-color-bg-3: @color-bg-3;\n  @{arco-cssvars-prefix}-color-bg-4: @color-bg-4;\n  @{arco-cssvars-prefix}-color-bg-5: @color-bg-5;\n  @{arco-cssvars-prefix}-color-bg-white: @color-bg-white;\n  @{arco-cssvars-prefix}-color-neutral-1: rgb(\n    var(~'@{arco-cssvars-prefix}-gray-1')\n  );\n  @{arco-cssvars-prefix}-color-neutral-2: rgb(\n    var(~'@{arco-cssvars-prefix}-gray-2')\n  );\n  @{arco-cssvars-prefix}-color-neutral-3: rgb(\n    var(~'@{arco-cssvars-prefix}-gray-3')\n  );\n  @{arco-cssvars-prefix}-color-neutral-4: rgb(\n    var(~'@{arco-cssvars-prefix}-gray-4')\n  );\n  @{arco-cssvars-prefix}-color-neutral-5: rgb(\n    var(~'@{arco-cssvars-prefix}-gray-5')\n  );\n  @{arco-cssvars-prefix}-color-neutral-6: rgb(\n    var(~'@{arco-cssvars-prefix}-gray-6')\n  );\n  @{arco-cssvars-prefix}-color-neutral-7: rgb(\n    var(~'@{arco-cssvars-prefix}-gray-7')\n  );\n  @{arco-cssvars-prefix}-color-neutral-8: rgb(\n    var(~'@{arco-cssvars-prefix}-gray-8')\n  );\n  @{arco-cssvars-prefix}-color-neutral-9: rgb(\n    var(~'@{arco-cssvars-prefix}-gray-9')\n  );\n  @{arco-cssvars-prefix}-color-neutral-10: rgb(\n    var(~'@{arco-cssvars-prefix}-gray-10')\n  );\n  @{arco-cssvars-prefix}-color-text-1: @color-text-1;\n  @{arco-cssvars-prefix}-color-text-2: @color-text-2;\n  @{arco-cssvars-prefix}-color-text-3: @color-text-3;\n  @{arco-cssvars-prefix}-color-text-4: @color-text-4;\n  @{arco-cssvars-prefix}-color-border-1: @color-border-1;\n  @{arco-cssvars-prefix}-color-border-2: @color-border-2;\n  @{arco-cssvars-prefix}-color-border-3: @color-border-3;\n  @{arco-cssvars-prefix}-color-border-4: @color-border-4;\n  @{arco-cssvars-prefix}-color-fill-1: @color-fill-1;\n  @{arco-cssvars-prefix}-color-fill-2: @color-fill-2;\n  @{arco-cssvars-prefix}-color-fill-3: @color-fill-3;\n  @{arco-cssvars-prefix}-color-fill-4: @color-fill-4;\n  @{arco-cssvars-prefix}-color-primary-light-1: @color-primary-light-1;\n  @{arco-cssvars-prefix}-color-primary-light-2: @color-primary-light-2;\n  @{arco-cssvars-prefix}-color-primary-light-3: @color-primary-light-3;\n  @{arco-cssvars-prefix}-color-primary-light-4: @color-primary-light-4;\n  @{arco-cssvars-prefix}-color-link-light-1: @color-link-light-1;\n  @{arco-cssvars-prefix}-color-link-light-2: @color-link-light-2;\n  @{arco-cssvars-prefix}-color-link-light-3: @color-link-light-3;\n  @{arco-cssvars-prefix}-color-link-light-4: @color-link-light-4;\n  @{arco-cssvars-prefix}-color-secondary: @color-secondary;\n  @{arco-cssvars-prefix}-color-secondary-hover: @color-secondary-hover;\n  @{arco-cssvars-prefix}-color-secondary-active: @color-secondary-active;\n  @{arco-cssvars-prefix}-color-secondary-disabled: @color-secondary-disabled;\n  @{arco-cssvars-prefix}-color-danger-light-1: @color-danger-light-1;\n  @{arco-cssvars-prefix}-color-danger-light-2: @color-danger-light-2;\n  @{arco-cssvars-prefix}-color-danger-light-3: @color-danger-light-3;\n  @{arco-cssvars-prefix}-color-danger-light-4: @color-danger-light-4;\n  @{arco-cssvars-prefix}-color-success-light-1: @color-success-light-1;\n  @{arco-cssvars-prefix}-color-success-light-2: @color-success-light-2;\n  @{arco-cssvars-prefix}-color-success-light-3: @color-success-light-3;\n  @{arco-cssvars-prefix}-color-success-light-4: @color-success-light-4;\n  @{arco-cssvars-prefix}-color-warning-light-1: @color-warning-light-1;\n  @{arco-cssvars-prefix}-color-warning-light-2: @color-warning-light-2;\n  @{arco-cssvars-prefix}-color-warning-light-3: @color-warning-light-3;\n  @{arco-cssvars-prefix}-color-warning-light-4: @color-warning-light-4;\n\n  // radius\n  @{arco-cssvars-prefix}-border-radius-none: @border-radius-none;\n  @{arco-cssvars-prefix}-border-radius-small: @border-radius-small;\n  @{arco-cssvars-prefix}-border-radius-medium: @border-radius-medium;\n  @{arco-cssvars-prefix}-border-radius-large: @border-radius-large;\n  @{arco-cssvars-prefix}-border-radius-circle: @border-radius-circle;\n  // component\n  @{arco-cssvars-prefix}-color-tooltip-bg: @color-tooltip-bg;\n  @{arco-cssvars-prefix}-color-spin-layer-bg: @color-spin-layer-bg;\n  @{arco-cssvars-prefix}-color-menu-dark-bg: @color-menu-dark-bg;\n  @{arco-cssvars-prefix}-color-menu-light-bg: @color-menu-light-bg;\n  @{arco-cssvars-prefix}-color-menu-dark-hover: @color-menu-dark-hover;\n  @{arco-cssvars-prefix}-color-mask-bg: @mask-color-bg;\n}\n\n@{arco-theme-tag}[arco-theme='dark'] {\n  @{arco-cssvars-prefix}-color-white: @dark-color-white;\n  @{arco-cssvars-prefix}-color-black: @dark-color-black;\n  @{arco-cssvars-prefix}-color-border: @dark-color-border;\n  @{arco-cssvars-prefix}-color-bg-1: @dark-color-bg-1;\n  @{arco-cssvars-prefix}-color-bg-2: @dark-color-bg-2;\n  @{arco-cssvars-prefix}-color-bg-3: @dark-color-bg-3;\n  @{arco-cssvars-prefix}-color-bg-4: @dark-color-bg-4;\n  @{arco-cssvars-prefix}-color-bg-5: @dark-color-bg-5;\n  @{arco-cssvars-prefix}-color-bg-white: @dark-color-bg-white;\n  @{arco-cssvars-prefix}-color-text-1: @dark-color-text-1;\n  @{arco-cssvars-prefix}-color-text-2: @dark-color-text-2;\n  @{arco-cssvars-prefix}-color-text-3: @dark-color-text-3;\n  @{arco-cssvars-prefix}-color-text-4: @dark-color-text-4;\n  @{arco-cssvars-prefix}-color-fill-1: @dark-color-fill-1;\n  @{arco-cssvars-prefix}-color-fill-2: @dark-color-fill-2;\n  @{arco-cssvars-prefix}-color-fill-3: @dark-color-fill-3;\n  @{arco-cssvars-prefix}-color-fill-4: @dark-color-fill-4;\n  @{arco-cssvars-prefix}-color-primary-light-1: @dark-color-primary-light-1;\n  @{arco-cssvars-prefix}-color-primary-light-2: @dark-color-primary-light-2;\n  @{arco-cssvars-prefix}-color-primary-light-3: @dark-color-primary-light-3;\n  @{arco-cssvars-prefix}-color-primary-light-4: @dark-color-primary-light-4;\n  @{arco-cssvars-prefix}-color-secondary: @dark-color-secondary;\n  @{arco-cssvars-prefix}-color-secondary-hover: @dark-color-secondary-hover;\n  @{arco-cssvars-prefix}-color-secondary-active: @dark-color-secondary-active;\n  @{arco-cssvars-prefix}-color-secondary-disabled: @dark-color-secondary-disabled;\n  @{arco-cssvars-prefix}-color-danger-light-1: @dark-color-danger-light-1;\n  @{arco-cssvars-prefix}-color-danger-light-2: @dark-color-danger-light-2;\n  @{arco-cssvars-prefix}-color-danger-light-3: @dark-color-danger-light-3;\n  @{arco-cssvars-prefix}-color-danger-light-4: @dark-color-danger-light-4;\n  @{arco-cssvars-prefix}-color-success-light-1: @dark-color-success-light-1;\n  @{arco-cssvars-prefix}-color-success-light-2: @dark-color-success-light-2;\n  @{arco-cssvars-prefix}-color-success-light-3: @dark-color-success-light-3;\n  @{arco-cssvars-prefix}-color-success-light-4: @dark-color-success-light-4;\n  @{arco-cssvars-prefix}-color-warning-light-1: @dark-color-warning-light-1;\n  @{arco-cssvars-prefix}-color-warning-light-2: @dark-color-warning-light-2;\n  @{arco-cssvars-prefix}-color-warning-light-3: @dark-color-warning-light-3;\n  @{arco-cssvars-prefix}-color-warning-light-4: @dark-color-warning-light-4;\n  @{arco-cssvars-prefix}-color-link-light-1: @dark-color-link-light-1;\n  @{arco-cssvars-prefix}-color-link-light-2: @dark-color-link-light-2;\n  @{arco-cssvars-prefix}-color-link-light-3: @dark-color-link-light-3;\n  @{arco-cssvars-prefix}-color-link-light-4: @dark-color-link-light-4;\n  // component\n  @{arco-cssvars-prefix}-color-tooltip-bg: @dark-color-tooltip-bg;\n  @{arco-cssvars-prefix}-color-spin-layer-bg: @dark-color-spin-layer-bg;\n  @{arco-cssvars-prefix}-color-menu-dark-bg: @color-menu-dark-bg;\n  @{arco-cssvars-prefix}-color-menu-light-bg: @color-menu-dark-bg;\n  @{arco-cssvars-prefix}-color-menu-dark-hover: @dark-color-menu-dark-hover;\n  @{arco-cssvars-prefix}-color-mask-bg: @dark-mask-color-bg;\n}\n"
  },
  {
    "path": "packages/web-vue/components/style/theme/global.less",
    "content": "@import '../color/colors.less';\n\n@arco-theme-tag: body; // css 变量定义的选择器\n\n@arco-vars-prefix: ~''; // css 变量的前缀\n\n// --arco-color-white or --color-white\n@arco-cssvars-prefix: if(@arco-vars-prefix = ~'', -, ~'--@{arco-vars-prefix}');\n\n/******** borderSize *******/\n\n@border-none: 0;\n@border-1: 1px;\n@border-2: 2px;\n@border-3: 3px;\n@border-4: 4px;\n@border-5: 5px;\n\n/******** borderStyle *******/\n\n@border-solid: solid;\n@border-dashed: dashed;\n@border-dotted: dotted;\n\n/******** radius *******/\n\n@border-radius-none: 0;\n@border-radius-small: 2px;\n@border-radius-medium: 4px;\n@border-radius-large: 8px;\n@border-radius-circle: 50%;\n\n/******** shadow distance *******/\n\n@shadow-distance-none: 0;\n@shadow-distance-1: 1px;\n@shadow-distance-2: 2px;\n@shadow-distance-3: 3px;\n@shadow-distance-4: 4px;\n\n/******** size *******/\n\n@size-none: 0;\n@size-1: 4px;\n@size-2: 8px;\n@size-3: 12px;\n@size-4: 16px;\n@size-5: 20px;\n@size-6: 24px;\n@size-7: 28px;\n@size-8: 32px;\n@size-9: 36px;\n@size-10: 40px;\n@size-11: 44px;\n@size-12: 48px;\n@size-13: 52px;\n@size-14: 56px;\n@size-15: 60px;\n@size-16: 64px;\n@size-17: 68px;\n@size-18: 72px;\n@size-19: 76px;\n@size-20: 80px;\n@size-21: 84px;\n@size-22: 88px;\n@size-23: 92px;\n@size-24: 96px;\n@size-25: 100px;\n@size-26: 104px;\n@size-27: 108px;\n@size-28: 112px;\n@size-29: 116px;\n@size-30: 120px;\n@size-31: 124px;\n@size-32: 128px;\n@size-33: 132px;\n@size-34: 136px;\n@size-35: 140px;\n@size-36: 144px;\n@size-37: 148px;\n@size-38: 152px;\n@size-39: 156px;\n@size-40: 160px;\n@size-41: 164px;\n@size-42: 168px;\n@size-43: 172px;\n@size-44: 176px;\n@size-45: 180px;\n@size-46: 184px;\n@size-47: 188px;\n@size-48: 192px;\n@size-49: 196px;\n@size-50: 200px;\n\n@size-mini: @size-6;\n@size-small: @size-7;\n@size-default: @size-8;\n@size-large: @size-9;\n\n/******** spacing *******/\n\n@spacing-none: 0;\n@spacing-1: 2px;\n@spacing-2: 4px;\n@spacing-3: 6px;\n@spacing-4: 8px;\n@spacing-5: 10px;\n@spacing-6: 12px;\n@spacing-7: 16px;\n@spacing-8: 20px;\n@spacing-9: 24px;\n@spacing-10: 32px;\n@spacing-11: 36px;\n@spacing-12: 40px;\n@spacing-13: 48px;\n@spacing-14: 56px;\n@spacing-15: 60px;\n@spacing-16: 64px;\n@spacing-17: 72px;\n@spacing-18: 80px;\n@spacing-19: 84px;\n@spacing-20: 96px;\n@spacing-21: 100px;\n@spacing-22: 120px;\n\n@color-transparent: transparent;\n\n/******** shadow *******/\n\n@shadow-none: none;\n@shadow-special: 0 0 1px rgba(0, 0, 0, 0.3);\n@shadow1-center: 0 0 5px rgba(0, 0, 0, 0.1);\n@shadow1-up: 0 -2px 5px rgba(0, 0, 0, 0.1);\n@shadow1-down: 0 2px 5px rgba(0, 0, 0, 0.1);\n@shadow1-left: -2px 0 5px rgba(0, 0, 0, 0.1);\n@shadow1-right: 2px 0 5px rgba(0, 0, 0, 0.1);\n@shadow1-left-up: -2px -2px 5px rgba(0, 0, 0, 0.1);\n@shadow1-left-down: -2px 2px 5px rgba(0, 0, 0, 0.1);\n@shadow1-right-up: 2px -2px 5px rgba(0, 0, 0, 0.1);\n@shadow1-right-down: 2px 2px 5px rgba(0, 0, 0, 0.1);\n@shadow2-center: 0 0 10px rgba(0, 0, 0, 0.1);\n@shadow2-up: 0 -4px 10px rgba(0, 0, 0, 0.1);\n@shadow2-down: 0 4px 10px rgba(0, 0, 0, 0.1);\n@shadow2-left: -4px 0 10px rgba(0, 0, 0, 0.1);\n@shadow2-right: 4px 0 10px rgba(0, 0, 0, 0.1);\n@shadow2-left-up: -4px -4px 10px rgba(0, 0, 0, 0.1);\n@shadow2-left-down: -4px 4px 10px rgba(0, 0, 0, 0.1);\n@shadow2-right-up: 4px -4px 10px rgba(0, 0, 0, 0.1);\n@shadow2-right-down: 4px 4px 10px rgba(0, 0, 0, 0.1);\n@shadow3-center: 0 0 20px rgba(0, 0, 0, 0.1);\n@shadow3-up: 0 -8px 20px rgba(0, 0, 0, 0.1);\n@shadow3-down: 0 8px 20px rgba(0, 0, 0, 0.1);\n@shadow3-left: -8px 0 20px rgba(0, 0, 0, 0.1);\n@shadow3-right: 8px 0 20px rgba(0, 0, 0, 0.1);\n@shadow3-left-up: -8px -8px 20px rgba(0, 0, 0, 0.1);\n@shadow3-left-down: -8px 8px 20px rgba(0, 0, 0, 0.1);\n@shadow3-right-up: 8px -8px 20px rgba(0, 0, 0, 0.1);\n@shadow3-right-down: 8px 8px 20px rgba(0, 0, 0, 0.1);\n\n/******** opacity *******/\n\n@opacity-none: 0;\n@opacity-1: 10%;\n@opacity-2: 20%;\n@opacity-3: 30%;\n@opacity-4: 40%;\n@opacity-5: 50%;\n@opacity-6: 60%;\n@opacity-7: 70%;\n@opacity-8: 80%;\n@opacity-9: 90%;\n@opacity-10: 100%;\n\n/******** fontSize *******/\n\n@font-size-display-3: 56px;\n@font-size-display-2: 48px;\n@font-size-display-1: 36px;\n@font-size-title-3: 24px;\n@font-size-title-2: 20px;\n@font-size-title-1: 16px;\n@font-size-body-3: 14px;\n@font-size-body-2: 13px;\n@font-size-body-1: 12px;\n@font-size-caption: 12px;\n\n/******** fontWeight ********/\n@font-weight-100: 100;\n@font-weight-200: 200;\n@font-weight-300: 300;\n@font-weight-400: 400;\n@font-weight-500: 500;\n@font-weight-600: 600;\n@font-weight-700: 700;\n@font-weight-800: 800;\n@font-weight-900: 900;\n\n/******** Primary *******/\n\n@color-primary-1: rgb(var(~'@{arco-cssvars-prefix}-primary-1'));\n@color-primary-2: rgb(var(~'@{arco-cssvars-prefix}-primary-2'));\n@color-primary-3: rgb(var(~'@{arco-cssvars-prefix}-primary-3'));\n@color-primary-4: rgb(var(~'@{arco-cssvars-prefix}-primary-4'));\n@color-primary-5: rgb(var(~'@{arco-cssvars-prefix}-primary-5'));\n@color-primary-6: rgb(var(~'@{arco-cssvars-prefix}-primary-6'));\n@color-primary-7: rgb(var(~'@{arco-cssvars-prefix}-primary-7'));\n@color-primary-8: rgb(var(~'@{arco-cssvars-prefix}-primary-8'));\n@color-primary-9: rgb(var(~'@{arco-cssvars-prefix}-primary-9'));\n@color-primary-10: rgb(var(~'@{arco-cssvars-prefix}-primary-10'));\n\n/******** success *******/\n\n@color-success-1: rgb(var(~'@{arco-cssvars-prefix}-success-1'));\n@color-success-2: rgb(var(~'@{arco-cssvars-prefix}-success-2'));\n@color-success-3: rgb(var(~'@{arco-cssvars-prefix}-success-3'));\n@color-success-4: rgb(var(~'@{arco-cssvars-prefix}-success-4'));\n@color-success-5: rgb(var(~'@{arco-cssvars-prefix}-success-5'));\n@color-success-6: rgb(var(~'@{arco-cssvars-prefix}-success-6'));\n@color-success-7: rgb(var(~'@{arco-cssvars-prefix}-success-7'));\n@color-success-8: rgb(var(~'@{arco-cssvars-prefix}-success-8'));\n@color-success-9: rgb(var(~'@{arco-cssvars-prefix}-success-9'));\n@color-success-10: rgb(var(~'@{arco-cssvars-prefix}-success-10'));\n\n/******** warning *******/\n\n@color-warning-1: rgb(var(~'@{arco-cssvars-prefix}-warning-1'));\n@color-warning-2: rgb(var(~'@{arco-cssvars-prefix}-warning-2'));\n@color-warning-3: rgb(var(~'@{arco-cssvars-prefix}-warning-3'));\n@color-warning-4: rgb(var(~'@{arco-cssvars-prefix}-warning-4'));\n@color-warning-5: rgb(var(~'@{arco-cssvars-prefix}-warning-5'));\n@color-warning-6: rgb(var(~'@{arco-cssvars-prefix}-warning-6'));\n@color-warning-7: rgb(var(~'@{arco-cssvars-prefix}-warning-7'));\n@color-warning-8: rgb(var(~'@{arco-cssvars-prefix}-warning-8'));\n@color-warning-9: rgb(var(~'@{arco-cssvars-prefix}-warning-9'));\n@color-warning-10: rgb(var(~'@{arco-cssvars-prefix}-warning-10'));\n\n/******** danger *******/\n\n@color-danger-1: rgb(var(~'@{arco-cssvars-prefix}-danger-1'));\n@color-danger-2: rgb(var(~'@{arco-cssvars-prefix}-danger-2'));\n@color-danger-3: rgb(var(~'@{arco-cssvars-prefix}-danger-3'));\n@color-danger-4: rgb(var(~'@{arco-cssvars-prefix}-danger-4'));\n@color-danger-5: rgb(var(~'@{arco-cssvars-prefix}-danger-5'));\n@color-danger-6: rgb(var(~'@{arco-cssvars-prefix}-danger-6'));\n@color-danger-7: rgb(var(~'@{arco-cssvars-prefix}-danger-7'));\n@color-danger-8: rgb(var(~'@{arco-cssvars-prefix}-danger-8'));\n@color-danger-9: rgb(var(~'@{arco-cssvars-prefix}-danger-9'));\n@color-danger-10: rgb(var(~'@{arco-cssvars-prefix}-danger-10'));\n\n/******** link *******/\n\n@color-link-1: rgb(var(~'@{arco-cssvars-prefix}-link-1'));\n@color-link-2: rgb(var(~'@{arco-cssvars-prefix}-link-2'));\n@color-link-3: rgb(var(~'@{arco-cssvars-prefix}-link-3'));\n@color-link-4: rgb(var(~'@{arco-cssvars-prefix}-link-4'));\n@color-link-5: rgb(var(~'@{arco-cssvars-prefix}-link-5'));\n@color-link-6: rgb(var(~'@{arco-cssvars-prefix}-link-6'));\n@color-link-7: rgb(var(~'@{arco-cssvars-prefix}-link-7'));\n@color-link-8: rgb(var(~'@{arco-cssvars-prefix}-link-8'));\n@color-link-9: rgb(var(~'@{arco-cssvars-prefix}-link-9'));\n@color-link-10: rgb(var(~'@{arco-cssvars-prefix}-link-10'));\n\n/******** radius *******/\n\n@radius-none: var(~'@{arco-cssvars-prefix}-border-radius-none');\n@radius-small: var(~'@{arco-cssvars-prefix}-border-radius-small');\n@radius-medium: var(~'@{arco-cssvars-prefix}-border-radius-medium');\n@radius-large: var(~'@{arco-cssvars-prefix}-border-radius-large');\n@radius-circle: var(~'@{arco-cssvars-prefix}-border-radius-circle');\n\n// Other\n@color-white: #ffffff;\n@dark-color-white: fade(\n  #fff,\n  90%\n); // 在亮色模式下所有白色文字对应。对应 @color-white;\n\n@color-black: #000000;\n@dark-color-black: #000000;\n\n@mask-bg-opacity: @opacity-6;\n@mask-color-bg: rgba(@gray-10, @mask-bg-opacity);\n\n@dark-mask-color-bg: rgba(@dark-gray-1, @mask-bg-opacity);\n\n// 暗黑主题的导航组件背景色，需要在主题商店可配置\n@color-menu-dark-bg: #232324;\n@color-menu-light-bg: #ffffff;\n@color-spin-layer-bg: rgba(255, 255, 255, 0.6);\n@color-menu-dark-hover: fade(#fff, 4%);\n@color-tooltip-bg: rgb(var(~'@{arco-cssvars-prefix}-gray-10'));\n\n// component\n@dark-color-tooltip-bg: #373739;\n@dark-color-spin-layer-bg: rgba(51, 51, 51, 0.6);\n@dark-color-menu-dark-hover: var(~'@{arco-cssvars-prefix}-color-fill-2');\n\n// variables\n@color-border: rgb(var(~'@{arco-cssvars-prefix}-gray-3'));\n@color-bg-popup: var(~'@{arco-cssvars-prefix}-color-bg-5');\n@color-bg-1: #fff;\n@color-bg-2: #fff;\n@color-bg-3: #fff;\n@color-bg-4: #fff;\n@color-bg-5: #fff;\n@color-bg-white: #fff;\n@color-text-1: var(~'@{arco-cssvars-prefix}-color-neutral-10'); // Title, body\n@color-text-2: var(~'@{arco-cssvars-prefix}-color-neutral-8'); // Statement\n@color-text-3: var(\n  ~'@{arco-cssvars-prefix}-color-neutral-6'\n); // Secondary information\n@color-text-4: var(\n  ~'@{arco-cssvars-prefix}-color-neutral-4'\n); // Secondary information\n@color-fill-1: var(~'@{arco-cssvars-prefix}-color-neutral-1');\n@color-fill-2: var(~'@{arco-cssvars-prefix}-color-neutral-2');\n@color-fill-3: var(~'@{arco-cssvars-prefix}-color-neutral-3');\n@color-fill-4: var(~'@{arco-cssvars-prefix}-color-neutral-4');\n@color-border-1: var(~'@{arco-cssvars-prefix}-color-neutral-2');\n@color-border-2: var(~'@{arco-cssvars-prefix}-color-neutral-3');\n@color-border-3: var(~'@{arco-cssvars-prefix}-color-neutral-4');\n@color-border-4: var(~'@{arco-cssvars-prefix}-color-neutral-6');\n@color-primary-light-1: rgb(var(~'@{arco-cssvars-prefix}-primary-1'));\n@color-primary-light-2: rgb(var(~'@{arco-cssvars-prefix}-primary-2'));\n@color-primary-light-3: rgb(var(~'@{arco-cssvars-prefix}-primary-3'));\n@color-primary-light-4: rgb(var(~'@{arco-cssvars-prefix}-primary-4'));\n@color-secondary: var(~'@{arco-cssvars-prefix}-color-neutral-2');\n@color-secondary-hover: var(~'@{arco-cssvars-prefix}-color-neutral-3');\n@color-secondary-active: var(~'@{arco-cssvars-prefix}-color-neutral-4');\n@color-secondary-disabled: var(~'@{arco-cssvars-prefix}-color-neutral-1');\n@color-danger-light-1: rgb(var(~'@{arco-cssvars-prefix}-danger-1'));\n@color-danger-light-2: rgb(var(~'@{arco-cssvars-prefix}-danger-2'));\n@color-danger-light-3: rgb(var(~'@{arco-cssvars-prefix}-danger-3'));\n@color-danger-light-4: rgb(var(~'@{arco-cssvars-prefix}-danger-4'));\n@color-success-light-1: rgb(var(~'@{arco-cssvars-prefix}-success-1'));\n@color-success-light-2: rgb(var(~'@{arco-cssvars-prefix}-success-2'));\n@color-success-light-3: rgb(var(~'@{arco-cssvars-prefix}-success-3'));\n@color-success-light-4: rgb(var(~'@{arco-cssvars-prefix}-success-4'));\n@color-warning-light-1: rgb(var(~'@{arco-cssvars-prefix}-warning-1'));\n@color-warning-light-2: rgb(var(~'@{arco-cssvars-prefix}-warning-2'));\n@color-warning-light-3: rgb(var(~'@{arco-cssvars-prefix}-warning-3'));\n@color-warning-light-4: rgb(var(~'@{arco-cssvars-prefix}-warning-4'));\n@color-link-light-1: rgb(var(~'@{arco-cssvars-prefix}-link-1'));\n@color-link-light-2: rgb(var(~'@{arco-cssvars-prefix}-link-2'));\n@color-link-light-3: rgb(var(~'@{arco-cssvars-prefix}-link-3'));\n@color-link-light-4: rgb(var(~'@{arco-cssvars-prefix}-link-4'));\n\n@dark-color-border: #333335;\n@dark-color-bg-1: #17171a; // The overall background is @dark-gray-1\n@dark-color-bg-2: #232324; // Primary container background (\"white\")\n@dark-color-bg-3: #2a2a2b; // Secondary container background\n@dark-color-bg-4: #313132; // Three-level container background\n@dark-color-bg-5: #373739; // Drop-down box, Tooltips background\n@dark-color-bg-white: #f6f6f6; // In bright color mode radio, switch white background\n@dark-color-text-1: fade(#fff, 90%);\n@dark-color-text-2: fade(#fff, 70%);\n@dark-color-text-3: fade(#fff, 50%);\n@dark-color-text-4: fade(#fff, 30%);\n@dark-color-fill-1: fade(#fff, 4%);\n@dark-color-fill-2: fade(#fff, 8%);\n@dark-color-fill-3: fade(#fff, 12%);\n@dark-color-fill-4: fade(#fff, 16%);\n@dark-color-primary-light-1: rgba(\n  var(~'@{arco-cssvars-prefix}-primary-6'),\n  0.2\n);\n@dark-color-primary-light-2: rgba(\n  var(~'@{arco-cssvars-prefix}-primary-6'),\n  0.35\n);\n@dark-color-primary-light-3: rgba(\n  var(~'@{arco-cssvars-prefix}-primary-6'),\n  0.5\n);\n@dark-color-primary-light-4: rgba(\n  var(~'@{arco-cssvars-prefix}-primary-6'),\n  0.65\n);\n@dark-color-secondary: rgba(var(~'@{arco-cssvars-prefix}-gray-9'), 0.08);\n@dark-color-secondary-hover: rgba(var(~'@{arco-cssvars-prefix}-gray-8'), 0.16);\n@dark-color-secondary-active: rgba(var(~'@{arco-cssvars-prefix}-gray-7'), 0.24);\n@dark-color-secondary-disabled: rgba(\n  var(~'@{arco-cssvars-prefix}-gray-9'),\n  0.08\n);\n@dark-color-danger-light-1: rgba(var(~'@{arco-cssvars-prefix}-danger-6'), 0.2);\n@dark-color-danger-light-2: rgba(var(~'@{arco-cssvars-prefix}-danger-6'), 0.35);\n@dark-color-danger-light-3: rgba(var(~'@{arco-cssvars-prefix}-danger-6'), 0.5);\n@dark-color-danger-light-4: rgba(var(~'@{arco-cssvars-prefix}-danger-6'), 0.65);\n@dark-color-success-light-1: rgb(var(~'@{arco-cssvars-prefix}-success-6'), 0.2);\n@dark-color-success-light-2: rgb(\n  var(~'@{arco-cssvars-prefix}-success-6'),\n  0.35\n);\n@dark-color-success-light-3: rgb(var(~'@{arco-cssvars-prefix}-success-6'), 0.5);\n@dark-color-success-light-4: rgb(\n  var(~'@{arco-cssvars-prefix}-success-6'),\n  0.65\n);\n@dark-color-warning-light-1: rgb(var(~'@{arco-cssvars-prefix}-warning-6'), 0.2);\n@dark-color-warning-light-2: rgb(\n  var(~'@{arco-cssvars-prefix}-warning-6'),\n  0.35\n);\n@dark-color-warning-light-3: rgb(var(~'@{arco-cssvars-prefix}-warning-6'), 0.5);\n@dark-color-warning-light-4: rgb(\n  var(~'@{arco-cssvars-prefix}-warning-6'),\n  0.65\n);\n@dark-color-link-light-1: rgb(var(~'@{arco-cssvars-prefix}-link-6'), 0.2);\n@dark-color-link-light-2: rgb(var(~'@{arco-cssvars-prefix}-link-6'), 0.35);\n@dark-color-link-light-3: rgb(var(~'@{arco-cssvars-prefix}-link-6'), 0.5);\n@dark-color-link-light-4: rgb(var(~'@{arco-cssvars-prefix}-link-6'), 0.65);\n\n// vue overwrite token\n@size-medium: @size-default;\n"
  },
  {
    "path": "packages/web-vue/components/style/theme/index.less",
    "content": "@import './global.less';\n@import './component.less';\n\n@prefix: arco;\n\n@font-family: Inter, \"-apple-system\", BlinkMacSystemFont, \"PingFang SC\", \"Hiragino Sans GB\", \"noto sans\", \"Microsoft YaHei\", \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n\n@code-family: Consolas, Menlo;\n\n// global font size\n@font-size-body: 14px;\n\n@transition-duration-1: 0.1s;\n@transition-duration-2: 0.2s;\n@transition-duration-3: 0.3s;\n@transition-duration-4: 0.4s;\n@transition-duration-5: 0.5s;\n@transition-duration-loading: 1s;\n\n// 线性\n@transition-timing-function-linear: cubic-bezier(0, 0, 1, 1);\n// 标准\n@transition-timing-function-standard: cubic-bezier(0.34, 0.69, 0.1, 1);\n// 过冲\n@transition-timing-function-overshoot: cubic-bezier(0.3, 1.3, 0.3, 1);\n// 减速\n@transition-timing-function-decelerate: cubic-bezier(0.4, 0.8, 0.74, 1);\n// 加速\n@transition-timing-function-accelerate: cubic-bezier(0.26, 0, 0.6, 0.2);\n\n@z-index-popup-base: 1000;\n@z-index-affix: @z-index-popup-base - 1; // 999\n@z-index-popup: @z-index-popup-base; // 1000\n@z-index-drawer: @z-index-popup-base + 1; // 1001\n@z-index-modal: @z-index-drawer; // 1001\n@z-index-message: @z-index-popup-base + 3; // 1003\n@z-index-notification: @z-index-popup-base + 3; // 1003\n@z-index-image-preview: @z-index-modal; // 1001\n\n@line-height-base: 1.5715;\n\n@popup-box-shadow-base: @shadow1-down;\n"
  },
  {
    "path": "packages/web-vue/components/switch/CHANGELOG.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.52.1\n\n`2023-10-13`\n\n### 💎 Enhancement\n\n- Optimize handling of `undefined` and `null` values ([#2737](https://github.com/arco-design/arco-design-vue/pull/2737))\n\n\n## 2.45.0\n\n`2023-04-07`\n\n### 🆕 Feature\n\n- add text props ([#2223](https://github.com/arco-design/arco-design-vue/pull/2223))\n\n\n## 2.42.0\n\n`2023-01-13`\n\n### 🐛 BugFix\n\n- Fix the problem that the custom color style is wrong when the type is `line` ([#2044](https://github.com/arco-design/arco-design-vue/pull/2044))\n\n\n## 2.40.1\n\n`2022-12-23`\n\n### 🐛 BugFix\n\n- Fixed the switch component whose type is line, size is small, and the checked state dot offset is incorrect ([#1975](https://github.com/arco-design/arco-design-vue/pull/1975))\n\n\n## 2.39.0\n\n`2022-11-18`\n\n### 🐛 BugFix\n\n- Fix value of hook before state change ([#1859](https://github.com/arco-design/arco-design-vue/pull/1859))\n- Fix style token issue ([#1859](https://github.com/arco-design/arco-design-vue/pull/1859))\n\n\n## 2.37.0\n\n`2022-09-16`\n\n### 🆕 Feature\n\n- support `beforeChange` intercept change event ([#1626](https://github.com/arco-design/arco-design-vue/pull/1626))\n\n\n## 2.17.0\n\n`2022-02-11`\n\n### 💅 Style\n\n- Fixed the occasional jitter problem of switch animation ([#656](https://github.com/arco-design/arco-design-vue/pull/656))\n\n\n## 2.12.0\n\n`2021-12-24`\n\n### 🆕 Feature\n\n- Added `checked-value` and `unchecked-value` attributes ([#444](https://github.com/arco-design/arco-design-vue/pull/444))\n- Added `checked-color` and `unchecked-color` attributes ([#444](https://github.com/arco-design/arco-design-vue/pull/444))\n\n"
  },
  {
    "path": "packages/web-vue/components/switch/CHANGELOG.zh-CN.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.52.1\n\n`2023-10-13`\n\n### 💎 功能优化\n\n- 优化对 `undefined` 和 `null` 值的处理 ([#2737](https://github.com/arco-design/arco-design-vue/pull/2737))\n\n\n## 2.45.0\n\n`2023-04-07`\n\n### 🆕 新增功能\n\n- 新增文案显示props ([#2223](https://github.com/arco-design/arco-design-vue/pull/2223))\n\n\n## 2.42.0\n\n`2023-01-13`\n\n### 🐛 问题修复\n\n- 修复类型为`line`时自定义颜色样式错误的问题 ([#2044](https://github.com/arco-design/arco-design-vue/pull/2044))\n\n\n## 2.40.1\n\n`2022-12-23`\n\n### 🐛 问题修复\n\n- 修复switch组件type为line,size为small,checked状态圆点偏移不正确 ([#1975](https://github.com/arco-design/arco-design-vue/pull/1975))\n\n\n## 2.39.0\n\n`2022-11-18`\n\n### 🐛 问题修复\n\n- 修复状态改变前钩子的值 ([#1859](https://github.com/arco-design/arco-design-vue/pull/1859))\n- 修复样式 token 问题 ([#1859](https://github.com/arco-design/arco-design-vue/pull/1859))\n\n\n## 2.37.0\n\n`2022-09-16`\n\n### 🆕 新增功能\n\n- 支持 `beforeChange` 切换事件拦截 ([#1626](https://github.com/arco-design/arco-design-vue/pull/1626))\n\n\n## 2.17.0\n\n`2022-02-11`\n\n### 💅 样式更新\n\n- 修复开关动画偶现抖动问题 ([#656](https://github.com/arco-design/arco-design-vue/pull/656))\n\n\n## 2.12.0\n\n`2021-12-24`\n\n### 🆕 新增功能\n\n- 增加 `checked-value` 和 `unchecked-value` 属性 ([#444](https://github.com/arco-design/arco-design-vue/pull/444))\n- 增加 `checked-color` 和 `unchecked-color` 属性 ([#444](https://github.com/arco-design/arco-design-vue/pull/444))\n\n"
  },
  {
    "path": "packages/web-vue/components/switch/README.en-US.md",
    "content": "```yaml\nmeta:\n  type: Component\n  category: Data Entry\ntitle: Switch\ndescription: Mutually exclusive operation controls, users can turn on or turn off a certain function.\n```\n\n*Auto translate by google.*\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/type.md\n\n@import ./__demo__/size.md\n\n@import ./__demo__/disabled.md\n\n@import ./__demo__/color.md\n\n@import ./__demo__/value.md\n\n@import ./__demo__/change-intercept.md\n\n@import ./__demo__/loading.md\n\n@import ./__demo__/text.md\n\n@import ./__demo__/icon.md\n\n## API\n\n\n### `<switch>` Props\n\n|Attribute|Description|Type|Default|version|\n|---|---|---|:---:|:---|\n|model-value **(v-model)**|Value|`string\\|number\\|boolean`|`-`||\n|default-checked|Default selected state (uncontrolled state)|`boolean`|`false`||\n|disabled|Whether to disable|`boolean`|`false`||\n|loading|Whether it is loading state|`boolean`|`false`||\n|type|Type of switch|`'circle' \\| 'round' \\| 'line'`|`'circle'`||\n|size|Size of switch|`'small' \\| 'medium'`|`'medium'`||\n|checked-value|Value when checked|`string\\|number\\|boolean`|`true`|2.12.0|\n|unchecked-value|Value when unchecked|`string\\|number\\|boolean`|`false`|2.12.0|\n|checked-color|The color of the switch when checked|`string`|`-`|2.12.0|\n|unchecked-color|The color of the switch when unchecked|`string`|`-`|2.12.0|\n|before-change|before-change hook before the switch state changes. If false is returned or a Promise is returned and then is rejected, will stop switching|`(  newValue: string \\| number \\| boolean) => Promise<boolean \\| void> \\| boolean \\| void`|`-`|2.37.0|\n|checked-text|Copywriting when opened (not effective when `type='line'` and `size='small'`)|`string`|`-`|2.45.0|\n|unchecked-text|Copywriting when closed (not effective when `type='line'` and `size='small'`)|`string`|`-`|2.45.0|\n### `<switch>` Events\n\n|Event Name|Description|Parameters|\n|---|---|---|\n|change|Trigger when the value changes|value: ` boolean \\| string \\| number `<br>ev: `Event`|\n|focus|Triggered when the component gets focus|ev: `FocusEvent`|\n|blur|Fired when the component loses focus|ev: `FocusEvent`|\n### `<switch>` Slots\n\n|Slot Name|Description|Parameters|\n|---|---|---|\n|checked-icon|The icon on the button when opened|-|\n|unchecked-icon|The icon on the button when closed|-|\n|checked|Copywriting when opened (not effective when `type='line'` and `size='small'`)|-|\n|unchecked|Copywriting when closed (not effective when `type='line'` and `size='small'`)|-|\n\n\n"
  },
  {
    "path": "packages/web-vue/components/switch/README.zh-CN.md",
    "content": "```yaml\nmeta:\n  type: 组件\n  category: 数据输入\ntitle: 开关 Switch\ndescription: 互斥性的操作控件，用户可打开或关闭某个功能。\n```\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/type.md\n\n@import ./__demo__/size.md\n\n@import ./__demo__/disabled.md\n\n@import ./__demo__/color.md\n\n@import ./__demo__/value.md\n\n@import ./__demo__/change-intercept.md\n\n@import ./__demo__/loading.md\n\n@import ./__demo__/text.md\n\n@import ./__demo__/icon.md\n\n## API\n\n\n### `<switch>` Props\n\n|参数名|描述|类型|默认值|版本|\n|---|---|---|:---:|:---|\n|model-value **(v-model)**|绑定值|`string\\|number\\|boolean`|`-`||\n|default-checked|默认选中状态（非受控状态）|`boolean`|`false`||\n|disabled|是否禁用|`boolean`|`false`||\n|loading|是否为加载中状态|`boolean`|`false`||\n|type|开关的类型|`'circle' \\| 'round' \\| 'line'`|`'circle'`||\n|size|开关的大小|`'small' \\| 'medium'`|`'medium'`||\n|checked-value|选中时的值|`string\\|number\\|boolean`|`true`|2.12.0|\n|unchecked-value|未选中时的值|`string\\|number\\|boolean`|`false`|2.12.0|\n|checked-color|选中时的开关颜色|`string`|`-`|2.12.0|\n|unchecked-color|未选中时的开关颜色|`string`|`-`|2.12.0|\n|before-change|switch 状态改变前的钩子， 返回 false 或者返回 Promise 且被 reject 则停止切换。|`(  newValue: string \\| number \\| boolean) => Promise<boolean \\| void> \\| boolean \\| void`|`-`|2.37.0|\n|checked-text|打开状态时的文案（`type='line'`和`size='small'`时不生效）|`string`|`-`|2.45.0|\n|unchecked-text|关闭状态时的文案（`type='line'`和`size='small'`时不生效）|`string`|`-`|2.45.0|\n### `<switch>` Events\n\n|事件名|描述|参数|\n|---|---|---|\n|change|值改变时触发|value: ` boolean \\| string \\| number `<br>ev: `Event`|\n|focus|组件获得焦点时触发|ev: `FocusEvent`|\n|blur|组件失去焦点时触发|ev: `FocusEvent`|\n### `<switch>` Slots\n\n|插槽名|描述|参数|\n|---|:---:|---|\n|checked-icon|打开状态时，按钮上的图标|-|\n|unchecked-icon|关闭状态时，按钮上的图标|-|\n|checked|打开状态时的文案（`type='line'`和`size='small'`时不生效）|-|\n|unchecked|关闭状态时的文案（`type='line'`和`size='small'`时不生效）|-|\n\n\n"
  },
  {
    "path": "packages/web-vue/components/switch/TEMPLATE.md",
    "content": "## zh-CN\n```yaml\nmeta:\n  type: 组件\n  category: 数据输入\ntitle: 开关 Switch\ndescription: 互斥性的操作控件，用户可打开或关闭某个功能。\n```\n---\n## en-US\n```yaml\nmeta:\n  type: Component\n  category: Data Entry\ntitle: Switch\ndescription: Mutually exclusive operation controls, users can turn on or turn off a certain function.\n```\n---\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/type.md\n\n@import ./__demo__/size.md\n\n@import ./__demo__/disabled.md\n\n@import ./__demo__/color.md\n\n@import ./__demo__/value.md\n\n@import ./__demo__/change-intercept.md\n\n@import ./__demo__/loading.md\n\n@import ./__demo__/text.md\n\n@import ./__demo__/icon.md\n\n## API\n\n%%API(switch.vue)%%\n"
  },
  {
    "path": "packages/web-vue/components/switch/__demo__/basic.md",
    "content": "```yaml\ntitle:\n  zh-CN: 基本用法\n  en-US: Basic Usage\n```\n\n## zh-CN\n\n开关的基本用法。\n\n---\n\n## en-US\n\nBasic usage of switch.\n\n---\n\n```vue\n<template>\n  <a-switch />\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/switch/__demo__/change-intercept.md",
    "content": "```yaml\ntitle:\n  zh-CN: 切换拦截\n  en-US: Switch intercept\n```\n\n## zh-CN\n\n设置 `beforeChange` 函数，函数的返回值将用于判断是否阻止切换。\n\n---\n\n## en-US\n\nSet the `beforeChange` function, and the return value of the function will be used to determine whether to block the switch.\n\n---\n\n```vue\n<template>\n  <a-space size=\"large\">\n    <a-switch :beforeChange=\"handleChangeIntercept\"/>\n    <a-switch type=\"round\" :beforeChange=\"handleChangeIntercept2\"/>\n    <a-switch type=\"line\" :beforeChange=\"handleChangeIntercept3\"/>\n  </a-space>\n</template>\n\n<script>\nimport { Message } from '@arco-design/web-vue';\n\nexport default {\n  setup() {\n    const handleChangeIntercept = async (newValue) => {\n      await new Promise((resolve) => setTimeout(resolve, 1000))\n      return true\n    }\n\n    const handleChangeIntercept2 = async (newValue) => {\n      await new Promise((resolve) => setTimeout(resolve, 500))\n      if (!newValue) {\n        Message.error(\"OH, You can't change\")\n        return false\n      }\n      return true\n    }\n\n    const handleChangeIntercept3 = async (newValue) => {\n      await new Promise((_, reject) => setTimeout(() => {\n        Message.error(\"OH, Something went wrong\")\n        reject()\n      }, 1000))\n      return true\n    }\n\n    return {\n      handleChangeIntercept,\n      handleChangeIntercept2,\n      handleChangeIntercept3\n    }\n  }\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/switch/__demo__/color.md",
    "content": "```yaml\ntitle:\n  zh-CN: 自定义开关的颜色\n  en-US: Button Color\n```\n\n## zh-CN\n\n通过 `checked-color` 和 `unchecked-color` 可以自定义开关的颜色。\n\n---\n\n## en-US\n\nThe color of the switch can be customized through `checked-color` and `unchecked-color`.\n\n---\n\n```vue\n<template>\n  <a-switch checked-color=\"#F53F3F\" unchecked-color=\"#14C9C9\" />\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/switch/__demo__/disabled.md",
    "content": "```yaml\ntitle:\n  zh-CN: 禁用状态\n  en-US: Disabled\n```\n\n## zh-CN\n\n禁用开关。\n\n---\n\n## en-US\n\nDisable the switch.\n\n---\n\n```vue\n<template>\n  <a-space size=\"large\">\n    <a-switch disabled/>\n    <a-switch :default-checked=\"true\" disabled/>\n    <a-switch type=\"round\" disabled/>\n    <a-switch :default-checked=\"true\" type=\"round\" disabled/>\n    <a-switch type=\"line\" disabled/>\n    <a-switch :default-checked=\"true\" type=\"line\" disabled/>\n  </a-space>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/switch/__demo__/icon.md",
    "content": "```yaml\ntitle:\n  zh-CN: 自定义图标\n  en-US: Custom Icon\n```\n\n## zh-CN\n\n自定义开关按钮上显示的图标。\n\n---\n\n## en-US\n\nCustomize the icon displayed on the switch button.\n\n---\n\n```vue\n<template>\n  <a-space size=\"large\">\n    <a-switch>\n      <template #checked-icon>\n        <icon-check/>\n      </template>\n      <template #unchecked-icon>\n        <icon-close/>\n      </template>\n    </a-switch>\n    <a-switch type=\"round\">\n      <template #checked-icon>\n        <icon-check/>\n      </template>\n      <template #unchecked-icon>\n        <icon-close/>\n      </template>\n    </a-switch>\n    <a-switch type=\"line\">\n      <template #checked-icon>\n        <icon-check/>\n      </template>\n      <template #unchecked-icon>\n        <icon-close/>\n      </template>\n    </a-switch>\n  </a-space>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/switch/__demo__/loading.md",
    "content": "```yaml\ntitle:\n  zh-CN: 加载中状态\n  en-US: Loading\n```\n\n## zh-CN\n\n通过设置 `loading` 使开关处于加载中状态，此时开关不可点击。\n\n---\n\n## en-US\n\nThe switch is in the loading state by setting `loading`, and the switch cannot be clicked at this time.\n\n---\n\n```vue\n<template>\n  <a-space size=\"large\">\n    <a-switch loading />\n    <a-switch type=\"round\" loading />\n    <a-switch type=\"line\" loading />\n  </a-space>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/switch/__demo__/size.md",
    "content": "```yaml\ntitle:\n  zh-CN: 开关尺寸\n  en-US: Switch Size\n```\n\n## zh-CN\n\n开关分为 `small`、`medium` 两种尺寸。\n\n---\n\n## en-US\n\nThe switch is divided into two sizes, `small` and `medium`.\n\n---\n\n```vue\n<template>\n  <a-space size=\"large\">\n    <a-switch />\n    <a-switch size=\"small\"/>\n  </a-space>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/switch/__demo__/text.md",
    "content": "```yaml\ntitle:\n  zh-CN: 自定义文案\n  en-US: Custom Text\n```\n\n## zh-CN\n\n自定义开关的打开/关闭状态的文字。\n\n---\n\n## en-US\n\nCustomize the text of the on/off state of the switch.\n\n---\n\n```vue\n<template>\n  <a-space size=\"large\">\n    <a-switch>\n      <template #checked>\n        ON\n      </template>\n      <template #unchecked>\n        OFF\n      </template>\n    </a-switch>\n    <a-switch type=\"round\">\n      <template #checked>\n        ON\n      </template>\n      <template #unchecked>\n        OFF\n      </template>\n    </a-switch>\n  </a-space>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/switch/__demo__/type.md",
    "content": "```yaml\ntitle:\n  zh-CN: 开关类型\n  en-US: Switch Type\n```\n\n## zh-CN\n\n开关分为 `circle` - **圆形（默认）**、`round` - **圆角**、`line` - **线性**三种类型。\n\n---\n\n## en-US\n\nThere are three types of switches: `circle`, `round` and `line`.\n\n---\n\n```vue\n<template>\n  <a-space size=\"large\">\n    <a-switch />\n    <a-switch type=\"round\"/>\n    <a-switch type=\"line\"/>\n  </a-space>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/switch/__demo__/value.md",
    "content": "```yaml\ntitle:\n  zh-CN: 自定义开关的值\n  en-US: Custom Value\n```\n\n## zh-CN\n\n通过 `checked-value` 和 `unchecked-value` 可以自定义开关的值。\n\n---\n\n## en-US\n\nThe value of the switch can be customized through `checked-value` and `unchecked-value`.\n\n---\n\n```vue\n\n<template>\n  <a-space direction=\"vertical\" size=\"large\">\n    <a-switch v-model=\"value\" checked-value=\"yes\" unchecked-value=\"no\" />\n    <div>Current Value: {{ value }}</div>\n  </a-space>\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n  setup() {\n    const value = ref('');\n\n    return {\n      value\n    }\n  },\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/switch/__test__/__snapshots__/demo.test.ts.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`<switch> demo: render [basic] correctly 1`] = `\n\"<button type=\\\\\"button\\\\\" role=\\\\\"switch\\\\\" aria-checked=\\\\\"false\\\\\" class=\\\\\"arco-switch arco-switch-type-circle\\\\\"><span class=\\\\\"arco-switch-handle\\\\\"><span class=\\\\\"arco-switch-handle-icon\\\\\"></span></span><!--  prettier-ignore  -->\n  <!--v-if-->\n</button>\"\n`;\n\nexports[`<switch> demo: render [change-intercept] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 24px; row-gap: 24px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button type=\\\\\"button\\\\\" role=\\\\\"switch\\\\\" aria-checked=\\\\\"false\\\\\" class=\\\\\"arco-switch arco-switch-type-circle\\\\\"><span class=\\\\\"arco-switch-handle\\\\\"><span class=\\\\\"arco-switch-handle-icon\\\\\"></span></span><!--  prettier-ignore  -->\n      <!--v-if-->\n    </button></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button type=\\\\\"button\\\\\" role=\\\\\"switch\\\\\" aria-checked=\\\\\"false\\\\\" class=\\\\\"arco-switch arco-switch-type-round\\\\\"><span class=\\\\\"arco-switch-handle\\\\\"><span class=\\\\\"arco-switch-handle-icon\\\\\"></span></span><!--  prettier-ignore  -->\n      <!--v-if-->\n    </button></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button type=\\\\\"button\\\\\" role=\\\\\"switch\\\\\" aria-checked=\\\\\"false\\\\\" class=\\\\\"arco-switch arco-switch-type-line\\\\\"><span class=\\\\\"arco-switch-handle\\\\\"><span class=\\\\\"arco-switch-handle-icon\\\\\"></span></span><!--  prettier-ignore  -->\n      <!--v-if-->\n    </button></div>\n</div>\"\n`;\n\nexports[`<switch> demo: render [color] correctly 1`] = `\n\"<button type=\\\\\"button\\\\\" role=\\\\\"switch\\\\\" aria-checked=\\\\\"false\\\\\" class=\\\\\"arco-switch arco-switch-type-circle\\\\\" style=\\\\\"background-color: rgb(20, 201, 201);\\\\\"><span class=\\\\\"arco-switch-handle\\\\\"><span class=\\\\\"arco-switch-handle-icon\\\\\"></span></span><!--  prettier-ignore  -->\n  <!--v-if-->\n</button>\"\n`;\n\nexports[`<switch> demo: render [disabled] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 24px; row-gap: 24px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button type=\\\\\"button\\\\\" role=\\\\\"switch\\\\\" aria-checked=\\\\\"false\\\\\" class=\\\\\"arco-switch arco-switch-type-circle arco-switch-disabled\\\\\" disabled=\\\\\"\\\\\"><span class=\\\\\"arco-switch-handle\\\\\"><span class=\\\\\"arco-switch-handle-icon\\\\\"></span></span><!--  prettier-ignore  -->\n      <!--v-if-->\n    </button></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button type=\\\\\"button\\\\\" role=\\\\\"switch\\\\\" aria-checked=\\\\\"true\\\\\" class=\\\\\"arco-switch arco-switch-type-circle arco-switch-checked arco-switch-disabled\\\\\" disabled=\\\\\"\\\\\"><span class=\\\\\"arco-switch-handle\\\\\"><span class=\\\\\"arco-switch-handle-icon\\\\\"></span></span><!--  prettier-ignore  -->\n      <!--v-if-->\n    </button></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button type=\\\\\"button\\\\\" role=\\\\\"switch\\\\\" aria-checked=\\\\\"false\\\\\" class=\\\\\"arco-switch arco-switch-type-round arco-switch-disabled\\\\\" disabled=\\\\\"\\\\\"><span class=\\\\\"arco-switch-handle\\\\\"><span class=\\\\\"arco-switch-handle-icon\\\\\"></span></span><!--  prettier-ignore  -->\n      <!--v-if-->\n    </button></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button type=\\\\\"button\\\\\" role=\\\\\"switch\\\\\" aria-checked=\\\\\"true\\\\\" class=\\\\\"arco-switch arco-switch-type-round arco-switch-checked arco-switch-disabled\\\\\" disabled=\\\\\"\\\\\"><span class=\\\\\"arco-switch-handle\\\\\"><span class=\\\\\"arco-switch-handle-icon\\\\\"></span></span><!--  prettier-ignore  -->\n      <!--v-if-->\n    </button></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button type=\\\\\"button\\\\\" role=\\\\\"switch\\\\\" aria-checked=\\\\\"false\\\\\" class=\\\\\"arco-switch arco-switch-type-line arco-switch-disabled\\\\\" disabled=\\\\\"\\\\\"><span class=\\\\\"arco-switch-handle\\\\\"><span class=\\\\\"arco-switch-handle-icon\\\\\"></span></span><!--  prettier-ignore  -->\n      <!--v-if-->\n    </button></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button type=\\\\\"button\\\\\" role=\\\\\"switch\\\\\" aria-checked=\\\\\"true\\\\\" class=\\\\\"arco-switch arco-switch-type-line arco-switch-checked arco-switch-disabled\\\\\" disabled=\\\\\"\\\\\"><span class=\\\\\"arco-switch-handle\\\\\"><span class=\\\\\"arco-switch-handle-icon\\\\\"></span></span><!--  prettier-ignore  -->\n      <!--v-if-->\n    </button></div>\n</div>\"\n`;\n\nexports[`<switch> demo: render [icon] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 24px; row-gap: 24px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button type=\\\\\"button\\\\\" role=\\\\\"switch\\\\\" aria-checked=\\\\\"false\\\\\" class=\\\\\"arco-switch arco-switch-type-circle\\\\\"><span class=\\\\\"arco-switch-handle\\\\\"><span class=\\\\\"arco-switch-handle-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-close\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M9.857 9.858 24 24m0 0 14.142 14.142M24 24 38.142 9.858M24 24 9.857 38.142\\\\\"></path></svg></span></span><!--  prettier-ignore  -->\n      <!--v-if-->\n    </button></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button type=\\\\\"button\\\\\" role=\\\\\"switch\\\\\" aria-checked=\\\\\"false\\\\\" class=\\\\\"arco-switch arco-switch-type-round\\\\\"><span class=\\\\\"arco-switch-handle\\\\\"><span class=\\\\\"arco-switch-handle-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-close\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M9.857 9.858 24 24m0 0 14.142 14.142M24 24 38.142 9.858M24 24 9.857 38.142\\\\\"></path></svg></span></span><!--  prettier-ignore  -->\n      <!--v-if-->\n    </button></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button type=\\\\\"button\\\\\" role=\\\\\"switch\\\\\" aria-checked=\\\\\"false\\\\\" class=\\\\\"arco-switch arco-switch-type-line\\\\\"><span class=\\\\\"arco-switch-handle\\\\\"><span class=\\\\\"arco-switch-handle-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-close\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M9.857 9.858 24 24m0 0 14.142 14.142M24 24 38.142 9.858M24 24 9.857 38.142\\\\\"></path></svg></span></span><!--  prettier-ignore  -->\n      <!--v-if-->\n    </button></div>\n</div>\"\n`;\n\nexports[`<switch> demo: render [loading] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 24px; row-gap: 24px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button type=\\\\\"button\\\\\" role=\\\\\"switch\\\\\" aria-checked=\\\\\"false\\\\\" class=\\\\\"arco-switch arco-switch-type-circle arco-switch-loading\\\\\"><span class=\\\\\"arco-switch-handle\\\\\"><span class=\\\\\"arco-switch-handle-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-loading\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M42 24c0 9.941-8.059 18-18 18S6 33.941 6 24 14.059 6 24 6\\\\\"></path></svg></span></span><!--  prettier-ignore  -->\n      <!--v-if-->\n    </button></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button type=\\\\\"button\\\\\" role=\\\\\"switch\\\\\" aria-checked=\\\\\"false\\\\\" class=\\\\\"arco-switch arco-switch-type-round arco-switch-loading\\\\\"><span class=\\\\\"arco-switch-handle\\\\\"><span class=\\\\\"arco-switch-handle-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-loading\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M42 24c0 9.941-8.059 18-18 18S6 33.941 6 24 14.059 6 24 6\\\\\"></path></svg></span></span><!--  prettier-ignore  -->\n      <!--v-if-->\n    </button></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button type=\\\\\"button\\\\\" role=\\\\\"switch\\\\\" aria-checked=\\\\\"false\\\\\" class=\\\\\"arco-switch arco-switch-type-line arco-switch-loading\\\\\"><span class=\\\\\"arco-switch-handle\\\\\"><span class=\\\\\"arco-switch-handle-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-loading\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M42 24c0 9.941-8.059 18-18 18S6 33.941 6 24 14.059 6 24 6\\\\\"></path></svg></span></span><!--  prettier-ignore  -->\n      <!--v-if-->\n    </button></div>\n</div>\"\n`;\n\nexports[`<switch> demo: render [size] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 24px; row-gap: 24px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button type=\\\\\"button\\\\\" role=\\\\\"switch\\\\\" aria-checked=\\\\\"false\\\\\" class=\\\\\"arco-switch arco-switch-type-circle\\\\\"><span class=\\\\\"arco-switch-handle\\\\\"><span class=\\\\\"arco-switch-handle-icon\\\\\"></span></span><!--  prettier-ignore  -->\n      <!--v-if-->\n    </button></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button type=\\\\\"button\\\\\" role=\\\\\"switch\\\\\" aria-checked=\\\\\"false\\\\\" class=\\\\\"arco-switch arco-switch-type-circle arco-switch-small\\\\\"><span class=\\\\\"arco-switch-handle\\\\\"><span class=\\\\\"arco-switch-handle-icon\\\\\"></span></span><!--  prettier-ignore  -->\n      <!--v-if-->\n    </button></div>\n</div>\"\n`;\n\nexports[`<switch> demo: render [text] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 24px; row-gap: 24px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button type=\\\\\"button\\\\\" role=\\\\\"switch\\\\\" aria-checked=\\\\\"false\\\\\" class=\\\\\"arco-switch arco-switch-type-circle\\\\\"><span class=\\\\\"arco-switch-handle\\\\\"><span class=\\\\\"arco-switch-handle-icon\\\\\"></span></span><!--  prettier-ignore  --><span class=\\\\\"arco-switch-text-holder\\\\\"> OFF </span><span class=\\\\\"arco-switch-text\\\\\"> OFF </span></button></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button type=\\\\\"button\\\\\" role=\\\\\"switch\\\\\" aria-checked=\\\\\"false\\\\\" class=\\\\\"arco-switch arco-switch-type-round\\\\\"><span class=\\\\\"arco-switch-handle\\\\\"><span class=\\\\\"arco-switch-handle-icon\\\\\"></span></span><!--  prettier-ignore  --><span class=\\\\\"arco-switch-text-holder\\\\\"> OFF </span><span class=\\\\\"arco-switch-text\\\\\"> OFF </span></button></div>\n</div>\"\n`;\n\nexports[`<switch> demo: render [type] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 24px; row-gap: 24px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button type=\\\\\"button\\\\\" role=\\\\\"switch\\\\\" aria-checked=\\\\\"false\\\\\" class=\\\\\"arco-switch arco-switch-type-circle\\\\\"><span class=\\\\\"arco-switch-handle\\\\\"><span class=\\\\\"arco-switch-handle-icon\\\\\"></span></span><!--  prettier-ignore  -->\n      <!--v-if-->\n    </button></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button type=\\\\\"button\\\\\" role=\\\\\"switch\\\\\" aria-checked=\\\\\"false\\\\\" class=\\\\\"arco-switch arco-switch-type-round\\\\\"><span class=\\\\\"arco-switch-handle\\\\\"><span class=\\\\\"arco-switch-handle-icon\\\\\"></span></span><!--  prettier-ignore  -->\n      <!--v-if-->\n    </button></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button type=\\\\\"button\\\\\" role=\\\\\"switch\\\\\" aria-checked=\\\\\"false\\\\\" class=\\\\\"arco-switch arco-switch-type-line\\\\\"><span class=\\\\\"arco-switch-handle\\\\\"><span class=\\\\\"arco-switch-handle-icon\\\\\"></span></span><!--  prettier-ignore  -->\n      <!--v-if-->\n    </button></div>\n</div>\"\n`;\n\nexports[`<switch> demo: render [value] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-vertical\\\\\" style=\\\\\"column-gap: 24px; row-gap: 24px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button type=\\\\\"button\\\\\" role=\\\\\"switch\\\\\" aria-checked=\\\\\"false\\\\\" class=\\\\\"arco-switch arco-switch-type-circle\\\\\"><span class=\\\\\"arco-switch-handle\\\\\"><span class=\\\\\"arco-switch-handle-icon\\\\\"></span></span><!--  prettier-ignore  -->\n      <!--v-if-->\n    </button></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div>Current Value: </div>\n  </div>\n</div>\"\n`;\n"
  },
  {
    "path": "packages/web-vue/components/switch/__test__/demo.test.ts",
    "content": "import demoTest from '../../../scripts/demo-test';\n\ndemoTest('switch');\n"
  },
  {
    "path": "packages/web-vue/components/switch/__test__/index.test.ts",
    "content": "import { mount } from '@vue/test-utils';\nimport Switch from '../index';\n\ndescribe('Switch', () => {\n  test('should emit change event', async () => {\n    const wrapper = mount(Switch);\n    await wrapper.find('button').trigger('click');\n    // @ts-ignore\n    expect(wrapper.emitted('change')?.[0]?.[0]).toEqual(true);\n  });\n});\n"
  },
  {
    "path": "packages/web-vue/components/switch/index.ts",
    "content": "import type { App } from 'vue';\nimport type { ArcoOptions } from '../_utils/types';\nimport { setGlobalConfig, getComponentPrefix } from '../_utils/global-config';\nimport _Switch from './switch.vue';\n\nconst Switch = Object.assign(_Switch, {\n  install: (app: App, options?: ArcoOptions) => {\n    setGlobalConfig(app, options);\n    const componentPrefix = getComponentPrefix(options);\n\n    app.component(componentPrefix + _Switch.name, _Switch);\n  },\n});\n\nexport type SwitchInstance = InstanceType<typeof _Switch>;\n\nexport default Switch;\n"
  },
  {
    "path": "packages/web-vue/components/switch/style/index.less",
    "content": "@import './token.less';\n\n@switch-prefix-cls: ~'@{prefix}-switch';\n\n@switch-size-default-gap: (\n  (@switch-size-default - @switch-size-dot-default) / 2\n);\n@switch-size-small-gap: ((@switch-size-small - @switch-size-dot-small) / 2);\n\n@switch-size-default-line-gap: (\n  (@switch-size-default - @switch-line-size-dot-default) / 2\n);\n@switch-size-small-line-gap: (\n  (@switch-size-small - @switch-line-size-dot-small) / 2\n);\n\n.switch-slide-text-enter-from {\n  left: -100% !important;\n}\n\n.switch-slide-text-enter-to {\n  left: 8px !important;\n}\n\n.switch-slide-text-enter-active {\n  transition: left @transition-duration-2 @transition-timing-function-standard;\n}\n\n.switch-slide-text-leave-from {\n  left: 100% !important;\n}\n\n.switch-slide-text-leave-to {\n  left: @switch-size-dot-default + @switch-size-default-gap + 6px !important;\n}\n\n.switch-slide-text-leave-active {\n  transition: left @transition-duration-2 @transition-timing-function-standard;\n}\n\n.@{switch-prefix-cls} {\n  position: relative;\n  box-sizing: border-box;\n  min-width: @switch-circle-default-width;\n  height: @switch-size-default;\n  padding: 0;\n  overflow: hidden;\n  line-height: @switch-size-default;\n  vertical-align: middle;\n  background-color: @switch-color-bg_off;\n  border: none;\n  border-radius: (@switch-size-default / 2);\n  outline: none;\n  cursor: pointer;\n  transition: background-color @transition-duration-2\n    @transition-timing-function-standard;\n\n  &-handle {\n    position: absolute;\n    top: @switch-size-default-gap;\n    left: @switch-size-default-gap;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: @switch-size-dot-default;\n    height: @switch-size-dot-default;\n    color: @switch-color-dot-icon_off;\n    font-size: 12px;\n    background-color: @switch-color-dot-bg;\n    border-radius: 50%;\n    transition: all @transition-duration-2 @transition-timing-function-standard;\n  }\n\n  &-checked {\n    background-color: @switch-color-bg_on;\n  }\n\n  &-checked &-handle {\n    left: calc(100% - @switch-size-dot-default - @switch-size-default-gap);\n    color: @switch-color-dot-icon_on;\n  }\n\n  &[disabled] &-handle {\n    color: @switch-color-dot-icon_off_disabled;\n  }\n\n  &[disabled]&-checked &-handle {\n    color: @switch-color-dot-icon_on_disabled;\n  }\n\n  &[disabled] &-handle {\n    color: @switch-color-dot-icon_off_disabled;\n  }\n\n  &[disabled]&-checked &-handle {\n    color: @switch-color-dot-icon_on_disabled;\n  }\n\n  &-text-holder {\n    margin: 0 8px 0 @switch-size-dot-default + @switch-size-default-gap + 6px;\n    font-size: @switch-font-size-text;\n    opacity: 0;\n  }\n\n  &-text {\n    position: absolute;\n    top: 0;\n    left: @switch-size-dot-default + @switch-size-default-gap + 6px;\n    color: @switch-color-text_off;\n    font-size: @switch-font-size-text;\n  }\n\n  &-checked &-text-holder {\n    margin: 0 @switch-size-dot-default + @switch-size-default-gap + 6px 0 8px;\n  }\n\n  &-checked &-text {\n    left: 8px;\n    color: @switch-color-text_on;\n  }\n\n  // Disabled\n  &[disabled] {\n    background-color: @switch-color-bg_off_disabled;\n    cursor: not-allowed;\n  }\n\n  &[disabled] &-text {\n    color: @switch-color-text_off_disabled;\n  }\n\n  &[disabled]&-checked {\n    background-color: @switch-color-bg_on_disabled;\n  }\n\n  &[disabled]&-checked &-text {\n    color: @switch-color-text_on_disabled;\n  }\n\n  // Loading\n  &-loading {\n    background-color: @switch-color-bg_off_loading;\n  }\n\n  &-loading &-handle {\n    color: @switch-color-dot-icon_off_loading;\n  }\n\n  &-loading &-text {\n    color: @switch-color-text_off_loading;\n  }\n\n  &-loading&-checked {\n    background-color: @switch-color-bg_on_loading;\n  }\n\n  &-loading&-checked &-handle {\n    color: @switch-color-dot-icon_on_loading;\n  }\n\n  &-loading&-checked &-text {\n    color: @switch-color-text_on_loading;\n  }\n\n  &-small {\n    min-width: @switch-circle-small-width;\n    height: @switch-size-small;\n    line-height: @switch-size-small;\n  }\n\n  &-small&-checked {\n    padding-left: -@switch-size-small-gap;\n  }\n\n  &-small &-handle {\n    top: @switch-size-small-gap;\n    left: @switch-size-small-gap;\n    width: @switch-size-dot-small;\n    height: @switch-size-dot-small;\n    border-radius: (@switch-size-small / 2);\n\n    &-icon {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%) scale(0.66667);\n    }\n  }\n\n  &-small&-checked &-handle {\n    left: calc(100% - @switch-size-dot-small - @switch-size-small-gap);\n  }\n}\n\n// Round\n.@{switch-prefix-cls} {\n  &-type-round {\n    min-width: @switch-round-default-width;\n    border-radius: @radius-small;\n  }\n\n  &-type-round &-handle {\n    border-radius: 2px;\n  }\n\n  &-type-round&-small {\n    min-width: @switch-round-small-width;\n    height: @switch-size-small;\n    line-height: @switch-size-small;\n    border-radius: 2px;\n  }\n\n  &-type-round&-small &-handle {\n    border-radius: 1px;\n  }\n}\n\n// Line\n.@{switch-prefix-cls} {\n  &-type-line {\n    min-width: @switch-line-default-width;\n    overflow: unset;\n    background-color: transparent;\n\n    &::after {\n      display: block;\n      width: 100%;\n      height: @switch-line-height-bg-line;\n      background-color: @switch-color-bg_off;\n      border-radius: (@switch-line-height-bg-line / 2);\n      transition: background-color @transition-duration-2\n        @transition-timing-function-standard;\n      content: '';\n    }\n  }\n\n  &-type-line &-handle {\n    top: @switch-size-default-line-gap;\n    left: 0;\n    width: @switch-line-size-dot-default;\n    height: @switch-line-size-dot-default;\n    background-color: @switch-color-dot-bg;\n    border-radius: (@switch-line-size-dot-default / 2);\n    box-shadow: 0 1px 3px @switch-line-color-dot-shadow;\n  }\n\n  &-type-line&-checked {\n    background-color: transparent;\n\n    &::after {\n      background-color: @switch-color-bg_on;\n    }\n  }\n\n  &-type-line&-custom-color {\n    --custom-color: @switch-color-bg_off;\n\n    &::after {\n      background-color: var(--custom-color);\n    }\n  }\n\n  &-type-line&-custom-color&-checked {\n    --custom-color: @switch-color-bg_on;\n  }\n\n  &-type-line&-checked &-handle {\n    left: calc(100% - @switch-line-size-dot-default);\n  }\n\n  // Disabled\n  &-type-line[disabled] {\n    background-color: transparent;\n    cursor: not-allowed;\n\n    &::after {\n      background-color: @switch-color-bg_off_disabled;\n    }\n  }\n\n  &-type-line[disabled]&-checked {\n    background-color: transparent;\n\n    &::after {\n      background-color: @switch-color-bg_on_disabled;\n    }\n  }\n\n  // Loading\n  &-type-line&-loading {\n    background-color: transparent;\n\n    &::after {\n      background-color: @switch-color-bg_off_loading;\n    }\n  }\n\n  &-type-line&-loading&-checked {\n    background-color: transparent;\n\n    &::after {\n      background-color: @switch-color-bg_on_loading;\n    }\n  }\n\n  &-type-line&-small {\n    min-width: @switch-line-small-width;\n    height: @switch-size-small;\n    line-height: @switch-size-small;\n  }\n\n  &-type-line&-small&-checked {\n    padding-left: -@switch-size-small-line-gap;\n  }\n\n  &-type-line&-small &-handle {\n    top: @switch-size-small-line-gap;\n    width: @switch-line-size-dot-small;\n    height: @switch-line-size-dot-small;\n    border-radius: (@switch-size-small / 2);\n\n    &-icon {\n      transform: translate(-50%, -50%) scale(1);\n    }\n  }\n\n  &-type-line&-small&-checked &-handle {\n    left: calc(\n      100% - @switch-line-size-dot-small - @switch-size-small-line-gap\n    );\n  }\n}\n"
  },
  {
    "path": "packages/web-vue/components/switch/style/index.ts",
    "content": "import '../../style/index.less';\nimport './index.less';\n"
  },
  {
    "path": "packages/web-vue/components/switch/style/token.less",
    "content": "@import '../../style/theme/index.less';\n\n// Global\n@switch-size-default: @size-6;\n@switch-size-small: @size-4;\n@switch-font-size-text: @font-size-caption;\n\n// circle and round\n@switch-size-dot-default: @size-4;\n@switch-size-dot-small: 12px;\n\n// line\n@switch-line-size-dot-default: @size-5;\n@switch-line-size-dot-small: @size-4;\n\n// Circle\n@switch-circle-default-width: @size-10;\n@switch-circle-small-width: @size-7;\n\n// Round\n@switch-round-default-width: @size-10;\n@switch-round-small-width: @size-7;\n\n// Line\n@switch-line-default-width: @size-9;\n@switch-line-small-width: @size-7;\n@switch-line-height-bg-line: 6px;\n@switch-line-color-dot-shadow: var(~'@{arco-cssvars-prefix}-color-neutral-6');\n\n@switch-color-bg_on: @color-primary-6;\n@switch-color-bg_off: var(~'@{arco-cssvars-prefix}-color-fill-4');\n@switch-color-bg_on_disabled: var(\n  ~'@{arco-cssvars-prefix}-color-primary-light-3'\n);\n@switch-color-bg_off_disabled: var(~'@{arco-cssvars-prefix}-color-fill-2');\n@switch-color-bg_on_loading: var(\n  ~'@{arco-cssvars-prefix}-color-primary-light-3'\n);\n@switch-color-bg_off_loading: var(~'@{arco-cssvars-prefix}-color-fill-2');\n@switch-color-dot-bg: var(~'@{arco-cssvars-prefix}-color-bg-white');\n@switch-color-text_on: var(~'@{arco-cssvars-prefix}-color-white');\n@switch-color-text_off: var(~'@{arco-cssvars-prefix}-color-white');\n@switch-color-text_on_disabled: var(~'@{arco-cssvars-prefix}-color-white');\n@switch-color-text_off_disabled: var(~'@{arco-cssvars-prefix}-color-white');\n@switch-color-text_on_loading: var(\n  ~'@{arco-cssvars-prefix}-color-primary-light-1'\n);\n@switch-color-text_off_loading: var(~'@{arco-cssvars-prefix}-color-white');\n@switch-color-dot-icon_on: @color-primary-6;\n@switch-color-dot-icon_off: var(~'@{arco-cssvars-prefix}-color-neutral-3');\n@switch-color-dot-icon_on_disabled: var(\n  ~'@{arco-cssvars-prefix}-color-primary-light-3'\n);\n@switch-color-dot-icon_off_disabled: var(\n  ~'@{arco-cssvars-prefix}-color-fill-2'\n);\n@switch-color-dot-icon_on_loading: var(\n  ~'@{arco-cssvars-prefix}-color-primary-light-3'\n);\n@switch-color-dot-icon_off_loading: var(\n  ~'@{arco-cssvars-prefix}-color-neutral-3'\n);\n"
  },
  {
    "path": "packages/web-vue/components/switch/switch.vue",
    "content": "<template>\n  <button\n    type=\"button\"\n    role=\"switch\"\n    :aria-checked=\"computedCheck\"\n    :class=\"cls\"\n    :style=\"buttonStyle\"\n    :disabled=\"mergedDisabled\"\n    @click=\"handleClick\"\n    @focus=\"handleFocus\"\n    @blur=\"handleBlur\"\n  >\n    <span :class=\"`${prefixCls}-handle`\">\n      <span :class=\"`${prefixCls}-handle-icon`\">\n        <icon-loading v-if=\"computedLoading\" />\n        <template v-else>\n          <slot v-if=\"computedCheck\" name=\"checked-icon\" />\n          <slot v-else name=\"unchecked-icon\" />\n        </template>\n      </span>\n    </span>\n    <!--  prettier-ignore  -->\n    <template\n      v-if=\"\n        type !== 'line' &&\n        size !== 'small' &&\n        ($slots.checked || checkedText || $slots.unchecked || uncheckedText)\n      \"\n    >\n      <span :class=\"`${prefixCls}-text-holder`\">\n        <slot v-if=\"computedCheck\" name=\"checked\">{{ checkedText }}</slot>\n        <slot v-else name=\"unchecked\">{{ uncheckedText }}</slot>\n      </span>\n      <span :class=\"`${prefixCls}-text`\">\n        <slot v-if=\"computedCheck\" name=\"checked\">{{ checkedText }}</slot>\n        <slot v-else name=\"unchecked\">{{ uncheckedText }}</slot>\n      </span>\n    </template>\n  </button>\n</template>\n\n<script lang=\"ts\">\nimport type { PropType } from 'vue';\nimport { computed, defineComponent, ref, toRefs, watch } from 'vue';\nimport { getPrefixCls } from '../_utils/global-config';\nimport IconLoading from '../icon/icon-loading';\nimport { useFormItem } from '../_hooks/use-form-item';\nimport { useSize } from '../_hooks/use-size';\nimport { isFunction, isNull, isUndefined } from '../_utils/is';\n\nexport default defineComponent({\n  name: 'Switch',\n  components: {\n    IconLoading,\n  },\n  props: {\n    /**\n     * @zh 绑定值\n     * @en Value\n     */\n    modelValue: {\n      type: [String, Number, Boolean],\n      default: undefined,\n    },\n    /**\n     * @zh 默认选中状态（非受控状态）\n     * @en Default selected state (uncontrolled state)\n     */\n    defaultChecked: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 是否禁用\n     * @en Whether to disable\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 是否为加载中状态\n     * @en Whether it is loading state\n     */\n    loading: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 开关的类型\n     * @en Type of switch\n     * @values 'circle', 'round', 'line'\n     */\n    type: {\n      type: String as PropType<'circle' | 'round' | 'line'>,\n      default: 'circle',\n    },\n    /**\n     * @zh 开关的大小\n     * @en Size of switch\n     * @defaultValue 'medium'\n     */\n    size: {\n      type: String as PropType<'small' | 'medium'>,\n    },\n    /**\n     * @zh 选中时的值\n     * @en Value when checked\n     * @version 2.12.0\n     */\n    checkedValue: {\n      type: [String, Number, Boolean],\n      default: true,\n    },\n    /**\n     * @zh 未选中时的值\n     * @en Value when unchecked\n     * @version 2.12.0\n     */\n    uncheckedValue: {\n      type: [String, Number, Boolean],\n      default: false,\n    },\n    /**\n     * @zh 选中时的开关颜色\n     * @en The color of the switch when checked\n     * @version 2.12.0\n     */\n    checkedColor: {\n      type: String,\n    },\n    /**\n     * @zh 未选中时的开关颜色\n     * @en The color of the switch when unchecked\n     * @version 2.12.0\n     */\n    uncheckedColor: {\n      type: String,\n    },\n    /**\n     * @zh switch 状态改变前的钩子， 返回 false 或者返回 Promise 且被 reject 则停止切换。\n     * @en before-change hook before the switch state changes. If false is returned or a Promise is returned and then is rejected, will stop switching\n     * @version 2.37.0\n     */\n    beforeChange: {\n      type: Function as PropType<\n        (\n          newValue: string | number | boolean\n        ) => Promise<boolean | void> | boolean | void\n      >,\n    },\n    /**\n     * @zh 打开状态时的文案（`type='line'`和`size='small'`时不生效）\n     * @en Copywriting when opened (not effective when `type='line'` and `size='small'`)\n     * @version 2.45.0\n     */\n    checkedText: {\n      type: String,\n    },\n    /**\n     * @zh 关闭状态时的文案（`type='line'`和`size='small'`时不生效）\n     * @en Copywriting when closed (not effective when `type='line'` and `size='small'`)\n     * @version 2.45.0\n     */\n    uncheckedText: {\n      type: String,\n    },\n  },\n  emits: {\n    'update:modelValue': (value: boolean | string | number) => true,\n    /**\n     * @zh 值改变时触发\n     * @en Trigger when the value changes\n     * @param { boolean | string | number } value\n     * @param {Event} ev\n     */\n    'change': (value: boolean | string | number, ev: Event) => true,\n    /**\n     * @zh 组件获得焦点时触发\n     * @en Triggered when the component gets focus\n     * @property {FocusEvent} ev\n     */\n    'focus': (ev: FocusEvent) => true,\n    /**\n     * @zh 组件失去焦点时触发\n     * @en Fired when the component loses focus\n     * @property {FocusEvent} ev\n     */\n    'blur': (ev: FocusEvent) => true,\n  },\n  /**\n   * @zh 打开状态时的文案（`type='line'`和`size='small'`时不生效）\n   * @en Copywriting when opened (not effective when `type='line'` and `size='small'`)\n   * @slot checked\n   */\n  /**\n   * @zh 关闭状态时的文案（`type='line'`和`size='small'`时不生效）\n   * @en Copywriting when closed (not effective when `type='line'` and `size='small'`)\n   * @slot unchecked\n   */\n  /**\n   * @zh 打开状态时，按钮上的图标\n   * @en The icon on the button when opened\n   * @slot checked-icon\n   */\n  /**\n   * @zh 关闭状态时，按钮上的图标\n   * @en The icon on the button when closed\n   * @slot unchecked-icon\n   */\n  setup(props, { emit }) {\n    const { disabled, size, modelValue } = toRefs(props);\n    const prefixCls = getPrefixCls('switch');\n    const { mergedSize: configSize } = useSize(size);\n    const { mergedDisabled, mergedSize, eventHandlers } = useFormItem({\n      disabled,\n      size: configSize,\n    });\n\n    const _checked = ref(\n      props.defaultChecked ? props.checkedValue : props.uncheckedValue\n    );\n    const computedCheck = computed<boolean>(\n      () => (props.modelValue ?? _checked.value) === props.checkedValue\n    );\n    const _loading = ref(false);\n    const computedLoading = computed(() => _loading.value || props.loading);\n\n    const handleChange = (checked: boolean, ev: Event) => {\n      _checked.value = checked ? props.checkedValue : props.uncheckedValue;\n      emit('update:modelValue', _checked.value);\n      emit('change', _checked.value, ev);\n      eventHandlers.value?.onChange?.(ev);\n    };\n\n    const handleClick = async (ev: Event) => {\n      if (computedLoading.value || mergedDisabled.value) {\n        return;\n      }\n      const checked = !computedCheck.value;\n      const checkedValue = checked ? props.checkedValue : props.uncheckedValue;\n      const shouldChange = props.beforeChange;\n\n      if (isFunction(shouldChange)) {\n        _loading.value = true;\n        try {\n          const result = await shouldChange(checkedValue);\n          if (result ?? true) {\n            handleChange(checked, ev);\n          }\n        } finally {\n          _loading.value = false;\n        }\n      } else {\n        handleChange(checked, ev);\n      }\n    };\n\n    const handleFocus = (ev: FocusEvent) => {\n      emit('focus', ev);\n      eventHandlers.value?.onFocus?.(ev);\n    };\n\n    const handleBlur = (ev: FocusEvent) => {\n      emit('blur', ev);\n      eventHandlers.value?.onBlur?.(ev);\n    };\n\n    watch(modelValue, (value) => {\n      if (isUndefined(value) || isNull(value)) {\n        _checked.value = props.uncheckedValue;\n      }\n    });\n\n    const cls = computed(() => [\n      prefixCls,\n      `${prefixCls}-type-${props.type}`,\n      {\n        [`${prefixCls}-small`]:\n          mergedSize.value === 'small' || mergedSize.value === 'mini',\n        [`${prefixCls}-checked`]: computedCheck.value,\n        [`${prefixCls}-disabled`]: mergedDisabled.value,\n        [`${prefixCls}-loading`]: computedLoading.value,\n        [`${prefixCls}-custom-color`]:\n          props.type === 'line' && (props.checkedColor || props.uncheckedColor),\n      },\n    ]);\n\n    const buttonStyle = computed(() => {\n      if (computedCheck.value && props.checkedColor) {\n        return props.type === 'line'\n          ? { '--custom-color': props.checkedColor }\n          : { backgroundColor: props.checkedColor };\n      }\n      if (!computedCheck.value && props.uncheckedColor) {\n        return props.type === 'line'\n          ? { '--custom-color': props.uncheckedColor }\n          : { backgroundColor: props.uncheckedColor };\n      }\n      return undefined;\n    });\n\n    return {\n      prefixCls,\n      cls,\n      mergedDisabled,\n      buttonStyle,\n      computedCheck,\n      computedLoading,\n      handleClick,\n      handleFocus,\n      handleBlur,\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/table/CHANGELOG.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.57.0\n\n`2025-03-10`\n\n### 🐛 BugFix\n\n- Fix fixed column background style issue in dark mode ([#3398](https://github.com/arco-design/arco-design-vue/pull/3398))\n\n\n## 2.55.3\n\n`2024-06-07`\n\n### 🆕 Feature\n\n- colum added the minWidth attribute ([#3157](https://github.com/arco-design/arco-design-vue/pull/3157))\n\n### 🐛 BugFix\n\n- fix table sticky-header failure with scrollbar ([#3170](https://github.com/arco-design/arco-design-vue/pull/3170))\n- Restore default style when table dynamically switches row-selection ([#3155](https://github.com/arco-design/arco-design-vue/pull/3155))\n\n\n## 2.54.4\n\n`2024-02-02`\n\n### 🐛 BugFix\n\n- fix virtual table list not displaying empty state ([#2949](https://github.com/arco-design/arco-design-vue/pull/2949))\n\n\n## 2.54.2\n\n`2024-01-11`\n\n### 🐛 BugFix\n\n- Fix the problem of `span-method` reporting an error after exceeding the number of rows and columns ([#2914](https://github.com/arco-design/arco-design-vue/pull/2914))\n\n\n## 2.51.0\n\n`2023-09-01`\n\n### 🆕 Feature\n\n- Support displaying empty subtrees ([#2673](https://github.com/arco-design/arco-design-vue/pull/2673))\n\n\n## 2.49.2\n\n`2023-07-28`\n\n### 🐛 BugFix\n\n- Fix the problem of turning on the adjustment of column width in the fixed column ([#2598](https://github.com/arco-design/arco-design-vue/pull/2598))\n- fix drag issue in tree table ([#2503](https://github.com/arco-design/arco-design-vue/pull/2503))\n\n\n## 2.49.0\n\n`2023-07-21`\n\n### 🐛 BugFix\n\n- Fix the wrong parameter of rowClass function record ([#2570](https://github.com/arco-design/arco-design-vue/pull/2570))\n\n\n## 2.48.1\n\n`2023-07-14`\n\n### 🐛 BugFix\n\n- Fix the wrong outgoing parameter in the `summary-span-method` attribute ([#2552](https://github.com/arco-design/arco-design-vue/pull/2552))\n- fix the bug of merging cells in subtrees ([#2540](https://github.com/arco-design/arco-design-vue/pull/2540))\n\n\n## 2.48.0\n\n`2023-06-30`\n\n### 🆕 Feature\n\n- Added mouse in and out events for cells ([#2489](https://github.com/arco-design/arco-design-vue/pull/2489))\n\n### 🐛 BugFix\n\n- add headerCell down to adjust column width highlight ([#2519](https://github.com/arco-design/arco-design-vue/pull/2519))\n\n\n## 2.46.1\n\n`2023-05-26`\n\n### 💎 Enhancement\n\n- Add table right-click and double-click events ([#2452](https://github.com/arco-design/arco-design-vue/pull/2452))\n\n\n## 2.46.0\n\n`2023-05-12`\n\n### 🐛 BugFix\n\n- Fix the problem that when the dataIndex is in the path format, the sorting and summary column functions do not take effect ([#2413](https://github.com/arco-design/arco-design-vue/pull/2413))\n\n\n## 2.45.1\n\n`2023-04-14`\n\n### 💅 Style\n\n- Fix the problem of displaying the horizontal scroll bar under the virtual list ([#2337](https://github.com/arco-design/arco-design-vue/pull/2337))\n\n\n## 2.41.1\n\n`2023-01-06`\n\n### 🐛 BugFix\n\n- Fix the problem that the width error may appear after the browser is zoomed when `scroll` is turned on ([#2028](https://github.com/arco-design/arco-design-vue/pull/2028))\n\n\n## 2.41.0\n\n`2022-12-30`\n\n### 🐛 BugFix\n\n- Fix the problem that there is no shadow when only the `operations` column is fixed ([#1938](https://github.com/arco-design/arco-design-vue/pull/1938))\n\n\n## 2.40.0\n\n`2022-12-09`\n\n### 🆕 Feature\n\n- The change event increases the current data parameter ([#1893](https://github.com/arco-design/arco-design-vue/pull/1893))\n\n\n## 2.39.2\n\n`2022-12-02`\n\n### 🐛 BugFix\n\n- Fix the problem that thead will have a vertical scroll bar in some cases ([#1913](https://github.com/arco-design/arco-design-vue/pull/1913))\n\n\n## 2.38.3\n\n`2022-11-11`\n\n### 🐛 BugFix\n\n- Fixed an issue where a warning would appear when customizing table elements in some scenarios\n\n\n## 2.38.2\n\n`2022-11-09`\n\n### 🐛 BugFix\n\n- Fix row selector state error ([#1849](https://github.com/arco-design/arco-design-vue/pull/1849))\n\n\n## 2.38.1\n\n`2022-11-04`\n\n### 🐛 BugFix\n\n- fix param when rowClass as function ([#1812](https://github.com/arco-design/arco-design-vue/pull/1812))\n\n\n## 2.38.0\n\n`2022-10-28`\n\n### 💅 Style\n\n- Fix stripe style issue in dark mode ([#1795](https://github.com/arco-design/arco-design-vue/pull/1795))\n\n\n## 2.38.0-beta.1\n\n`2022-10-14`\n\n### 💅 Style\n\n- Fixed the problem that summary row height was compressed when both summary row and scroll were enabled in the table ([#1733](https://github.com/arco-design/arco-design-vue/pull/1733))\n\n\n## 2.37.4\n\n`2022-09-30`\n\n### 🐛 BugFix\n\n- Fix default sorter&filters not working under template usage ([#1707](https://github.com/arco-design/arco-design-vue/pull/1707))\n\n\n## 2.37.3\n\n`2022-09-23`\n\n### 🐛 BugFix\n\n- Fix the problem that the tooltip does not display after the content changes ([#1662](https://github.com/arco-design/arco-design-vue/pull/1662))\n\n### 🆎 TypeScript\n\n- fix TableRowSelection type definition ([#1667](https://github.com/arco-design/arco-design-vue/pull/1667))\n\n\n## 2.37.2\n\n`2022-09-21`\n\n### 🐛 BugFix\n\n- Fixed the virtual scroll bar style error caused by maxHeight in the scroll property ([#1655](https://github.com/arco-design/arco-design-vue/pull/1655))\n\n\n## 2.36.0\n\n`2022-09-02`\n\n### 🆕 Feature\n\n- Add custom class name related prop ([#1580](https://github.com/arco-design/arco-design-vue/pull/1580))\n\n### 💎 Enhancement\n\n- type of extension key ([#1580](https://github.com/arco-design/arco-design-vue/pull/1580))\n\n\n## 2.35.0\n\n`2022-08-12`\n\n### 💅 Style\n\n- adjust zIndex of a fixed col ([#1479](https://github.com/arco-design/arco-design-vue/pull/1479))\n\n\n## 2.34.0\n\n`2022-07-29`\n\n### 💎 Enhancement\n\n- columns support reactive type updates ([#1470](https://github.com/arco-design/arco-design-vue/pull/1470))\n- rowClass supports values of function types ([#1453](https://github.com/arco-design/arco-design-vue/pull/1453))\n\n\n## 2.33.1\n\n`2022-07-22`\n\n### 💎 Enhancement\n\n- Selected rows can be displayed when selected-keys are set individually ([#1440](https://github.com/arco-design/arco-design-vue/pull/1440))\n\n\n## 2.32.1\n\n`2022-07-01`\n\n### 🐛 BugFix\n\n- Fixed the problem that the text prompt did not follow the content update ([#1373](https://github.com/arco-design/arco-design-vue/pull/1373))\n\n\n## 2.32.0\n\n`2022-06-24`\n\n### 🆕 Feature\n\n- TableRowSelection adds the onlyCurrent property to change the default state of the table to maintain the selection state of all paging ([#1334](https://github.com/arco-design/arco-design-vue/pull/1334))\n\n### 💎 Enhancement\n\n- The style added by the cellStyle class attribute is moved to the td element to solve the background color problem in some scenes ([#1334](https://github.com/arco-design/arco-design-vue/pull/1334))\n\n\n## 2.31.0\n\n`2022-06-17`\n\n### 🆕 Feature\n\n- Add new component methods, see the documentation for details ([#1304](https://github.com/arco-design/arco-design-vue/pull/1304))\n- The slot defined by titleSlotName adds the column parameter ([#1304](https://github.com/arco-design/arco-design-vue/pull/1304))\n\n\n## 2.30.2\n\n`2022-06-11`\n\n### 🐛 BugFix\n\n- Fix the problem that the header is centered when align='left' ([#1278](https://github.com/arco-design/arco-design-vue/pull/1278))\n\n### 💎 Enhancement\n\n- Indent no longer shows when there is no expand button ([#1278](https://github.com/arco-design/arco-design-vue/pull/1278))\n\n\n## 2.30.0\n\n`2022-06-10`\n\n### ⚠️ Important Attention\n\n- Due to functional requirements, `arco-table-cell` has been changed to flex layout, and the `arco-table-td-content` wrapper layer has been added outside the table content. If you have custom styles, please pay attention to the changes in the DOM structure ([#1248](https://github.com/arco-design/arco-design-vue/pull/1248))\n\n### 🆕 Feature\n\n- Added `sticky-header` header ceiling function ([#1248](https://github.com/arco-design/arco-design-vue/pull/1248))\n- Added `summaryCellStyle` property to table column configuration ([#1248](https://github.com/arco-design/arco-design-vue/pull/1248))\n\n### 🐛 BugFix\n\n- Fixed the problem of incorrect text omission in tree data ([#1248](https://github.com/arco-design/arco-design-vue/pull/1248))\n- Fix the problem of using grouped headers and fixed columns at the same time ([#1248](https://github.com/arco-design/arco-design-vue/pull/1248))\n\n### 💎 Enhancement\n\n- Supports the simultaneous use of virtual lists and fixed columns ([#1248](https://github.com/arco-design/arco-design-vue/pull/1248))\n\n### 💅 Style\n\n- Fix horizontal scroll shadow issue ([#1248](https://github.com/arco-design/arco-design-vue/pull/1248))\n\n\n## 2.29.0\n\n`2022-05-27`\n\n### 🆕 Feature\n\n- Line selectors add non-strict mode support (cascading control) ([#1202](https://github.com/arco-design/arco-design-vue/pull/1202))\n- Column properties add headerCellStyle and bodyCellStyle ([#1202](https://github.com/arco-design/arco-design-vue/pull/1202))\n\n\n## 2.28.0\n\n`2022-05-20`\n\n### 🆕 Feature\n\n- `expand` and `select` events add record parameter ([#1178](https://github.com/arco-design/arco-design-vue/pull/1178))\n- Added `columnResize` event ([#1178](https://github.com/arco-design/arco-design-vue/pull/1178))\n\n\n## 2.27.0\n\n`2022-05-13`\n\n### 💅 Style\n\n- Fixed the problem of vertical scroll bar when there are fixed columns ([#1124](https://github.com/arco-design/arco-design-vue/pull/1124))\n\n### 🆎 TypeScript\n\n- Use VNodeChild instead of VNode in the interface to support a wider range of types ([#1118](https://github.com/arco-design/arco-design-vue/pull/1118))\n\n\n## 2.26.0\n\n`2022-04-29`\n\n### 🆕 Feature\n\n- Column configuration adds tooltip attribute ([#1065](https://github.com/arco-design/arco-design-vue/pull/1065))\n- Add thead, th slots, tr, td slots add outgoing data ([#1065](https://github.com/arco-design/arco-design-vue/pull/1065))\n\n### 💎 Enhancement\n\n- The table-column dynamic modification order does not need to manually specify the index ([#1065](https://github.com/arco-design/arco-design-vue/pull/1065))\n\n\n## 2.25.1\n\n`2022-04-27`\n\n### 🐛 BugFix\n\n- Fix the problem of wrong format of outgoing record parameter in extended line in `2.25.0` version ([#1047](https://github.com/arco-design/arco-design-vue/pull/1047))\n\n### 💅 Style\n\n- Added internal table class names, fixed styling issues used with `descriptions` component ([#1053](https://github.com/arco-design/arco-design-vue/pull/1053))\n\n\n## 2.25.0\n\n`2022-04-22`\n\n### 🆕 Feature\n\n- Add row selector and expand row two-way binding properties ([#1023](https://github.com/arco-design/arco-design-vue/pull/1023))\n- Add a second param `rowKey` to the `select` event ([#999](https://github.com/arco-design/arco-design-vue/pull/999))\n\n### 💎 Enhancement\n\n- The `record` parameter of custom cell rendering supports modification ([#1023](https://github.com/arco-design/arco-design-vue/pull/1023))\n\n\n## 2.24.0\n\n`2022-04-15`\n\n### 💎 Enhancement\n\n- When titleSlotName exists in the columns attribute, it will be used first ([#969](https://github.com/arco-design/arco-design-vue/pull/969))\n\n### 🆎 TypeScript\n\n- `TableColumn` interface name is changed to `TableColumnData` ([#983](https://github.com/arco-design/arco-design-vue/pull/983))\n\n\n## 2.23.0\n\n`2022-04-08`\n\n### 💎 Enhancement\n\n- In horizontal scrolling mode, if the data is empty, the header will display a scroll bar ([#948](https://github.com/arco-design/arco-design-vue/pull/948))\n\n### 🆕 Feature\n\n- Add titleSlotName to the columns attribute and slotName to the filterable attribute ([#948](https://github.com/arco-design/arco-design-vue/pull/948))\n- table-column adds filter-content, filter-content slot ([#948](https://github.com/arco-design/arco-design-vue/pull/948))\n- Added summary-cell slot ([#948](https://github.com/arco-design/arco-design-vue/pull/948))\n\n\n## 2.22.1\n\n`2022-04-02`\n\n### 🐛 BugFix\n\n- Fix virtual list and scrolling used together ([#926](https://github.com/arco-design/arco-design-vue/pull/926))\n\n\n## 2.22.0\n\n`2022-04-01`\n\n### 🆕 Feature\n\n- Added `selectAll` method ([#920](https://github.com/arco-design/arco-design-vue/pull/920))\n\n### 🐛 BugFix\n\n- Fix the problem of wrong virtual list width in some cases ([#920](https://github.com/arco-design/arco-design-vue/pull/920))\n\n\n## 2.21.0\n\n`2022-03-25`\n\n### 🆕 Feature\n\n- Add summary prop ([#877](https://github.com/arco-design/arco-design-vue/pull/877))\n\n\n## 2.20.2\n\n`2022-03-24`\n\n### 🐛 BugFix\n\n- Fixed the problem that the `table-column` component caused continuous updating when writing object parameters directly in the template ([#861](https://github.com/arco-design/arco-design-vue/pull/861))\n- Fix the problem that there is no column data when there is only one `table-column` ([#861](https://github.com/arco-design/arco-design-vue/pull/861))\n- Fix the sorting problem of `table-column`, which can be solved by the `index` parameter ([#861](https://github.com/arco-design/arco-design-vue/pull/861))\n\n\n## 2.20.0\n\n`2022-03-18`\n\n### 🆕 Feature\n\n- Use Context to refactor components, `table-colum` supports secondary encapsulation ([#845](https://github.com/arco-design/arco-design-vue/pull/845))\n- scroll property adds `maxHeight`, `minWidth` properties ([#845](https://github.com/arco-design/arco-design-vue/pull/845))\n\n### 💅 Style\n\n- Fixed the problem that the header text could not be centered after sorting was enabled ([#845](https://github.com/arco-design/arco-design-vue/pull/845))\n\n\n## 2.19.0\n\n`2022-03-11`\n\n### ⚠️ Important Attention\n\n- Modify the outgoing data of the sorting function sorter to enhance the usage ([#810](https://github.com/arco-design/arco-design-vue/pull/810))\n\n\n## 2.18.0\n\n`2022-03-04`\n\n### 🆕 Feature\n\n- Scroll mode supports setting height percentage ([#780](https://github.com/arco-design/arco-design-vue/pull/780))\n- The column data adds the slotName property to allow specifying a rendering slot ([#780](https://github.com/arco-design/arco-design-vue/pull/780))\n- Added `pagination-left` and `pagination-right` slots ([#780](https://github.com/arco-design/arco-design-vue/pull/780))\n\n\n## 2.18.0-beta.2\n\n`2022-02-25`\n\n### 🆕 Feature\n\n- Added `span-all` attribute ([#735](https://github.com/arco-design/arco-design-vue/pull/735))\n\n### 🐛 BugFix\n\n- Fix the problem that v-for cannot render when table-column is nested ([#734](https://github.com/arco-design/arco-design-vue/pull/734))\n\n\n## 2.18.0-beta.1\n\n`2022-02-18`\n\n### 💎 Enhancement\n\n- Does not show pagination when the data is empty ([#684](https://github.com/arco-design/arco-design-vue/pull/684))\n\n\n## 2.16.2\n\n`2022-01-24`\n\n### 🐛 BugFix\n\n- Fix the problem of preventing bubbling and causing lazy loading to fail ([#641](https://github.com/arco-design/arco-design-vue/pull/641))\n- **table:** fix the problem that empty rows are displayed after deletion when expanding rows\n\n\n## 2.16.0\n\n`2022-01-21`\n\n### 💎 Enhancement\n\n- Internal buttons no longer fire `row-click` events ([#630](https://github.com/arco-design/arco-design-vue/pull/630))\n\n### 🆕 Feature\n\n- Add support for drag and drop sorting (experimental) ([#619](https://github.com/arco-design/arco-design-vue/pull/619))\n- Add support for resizing column widths (experimental) ([#619](https://github.com/arco-design/arco-design-vue/pull/619))\n- Added `tbody`, `tr`, `td` slots ([#619](https://github.com/arco-design/arco-design-vue/pull/619))\n\n\n## 2.15.0\n\n`2022-01-14`\n\n### 🆕 Feature\n\n- `sortable.sorter` adds boolean type to support server-side sorting ([#575](https://github.com/arco-design/arco-design-vue/pull/575))\n\n\n## 2.14.2\n\n`2022-01-10`\n\n### 🐛 BugFix\n\n- Fix the problem that the table content exceeds the container, causing the border not to be displayed in some cases ([#536](https://github.com/arco-design/arco-design-vue/pull/536))\n\n\n## 2.14.0\n\n`2022-01-07`\n\n### 🆕 Feature\n\n- Add hideExpandButtonOnEmpty property ([#520](https://github.com/arco-design/arco-design-vue/pull/520))\n\n### 🐛 BugFix\n\n- fix x-axis resize issue ([#519](https://github.com/arco-design/arco-design-vue/pull/519))\n- Fix the problem that the width of the expanded row is incorrectly set when there are fixed columns ([#519](https://github.com/arco-design/arco-design-vue/pull/519))\n- Fix the problem that the checkbox selection all is set incorrectly when there are subtrees ([#519](https://github.com/arco-design/arco-design-vue/pull/519))\n\n\n## 2.13.0\n\n`2021-12-31`\n\n### 🆕 Feature\n\n- Added `loadMore` property to support sub-slacker loading ([#485](https://github.com/arco-design/arco-design-vue/pull/485))\n- Add `filterIconAlignLeft` property ([#485](https://github.com/arco-design/arco-design-vue/pull/485))\n- Added `change` event to get processed data ([#485](https://github.com/arco-design/arco-design-vue/pull/485))\n\n### 🐛 BugFix\n\n- Fix the problem of invalid `sortOrder` emptying ([#478](https://github.com/arco-design/arco-design-vue/pull/478))\n- Fix the issue that the `expand-icon` slot does not take effect in the subtree ([#478](https://github.com/arco-design/arco-design-vue/pull/478))\n- Fix the problem that the shadow of the fixed column does not display when the table size changes dynamically ([#478](https://github.com/arco-design/arco-design-vue/pull/478))\n\n\n## 2.12.0\n\n`2021-12-24`\n\n### 💅 Style\n\n- Fix the problem of extra border on the last row in table scroll mode ([#456](https://github.com/arco-design/arco-design-vue/pull/456))\n\n\n## 2.11.0\n\n`2021-12-17`\n\n### 🆕 Feature\n\n- `columns` added cellStyle property ([#411](https://github.com/arco-design/arco-design-vue/pull/411))\n\n### 🐛 BugFix\n\n- Fix the problem of inconsistent width between the header and the main body caused by the change of the table size in the fixed column mode ([#410](https://github.com/arco-design/arco-design-vue/pull/410))\n\n\n## 2.10.0\n\n`2021-12-10`\n\n### 🆕 Feature\n\n- Add span-method prop ([#360](https://github.com/arco-design/arco-design-vue/pull/360))\n\n\n## 2.9.0\n\n`2021-12-03`\n\n### 🐛 BugFix\n\n- Fix the problem that the tree expand button triggers form submission ([#321](https://github.com/arco-design/arco-design-vue/pull/321))\n\n\n## 2.7.0\n\n`2021-11-26`\n\n### 🆕 Feature\n\n- Add `footer` slot ([#266](https://github.com/arco-design/arco-design-vue/pull/266))\n- In normal mode, the scroll bar will be turned on when the table width is larger than the container ([#266](https://github.com/arco-design/arco-design-vue/pull/266))\n\n\n## 2.6.1\n\n`2021-11-24`\n\n### 💎 Enhancement\n\n- Do not scroll when data is empty ([#245](https://github.com/arco-design/arco-design-vue/pull/245))\n\n### 🐛 BugFix\n\n- Fix the issue that the expand row button triggers form submission ([#210](https://github.com/arco-design/arco-design-vue/pull/210))\n\n\n## 2.3.0\n\n`2021-11-12`\n\n### 🐛 BugFix\n\n- Fix the problem that `<table-column>` is wrong in the header of the grouping table ([#151](https://github.com/arco-design/arco-design-vue/pull/151))\n\n\n## 2.2.0\n\n`2021-11-10`\n\n### 🆕 Feature\n\n- Add `row-key` prop ([#128](https://github.com/arco-design/arco-design-vue/pull/128))\n- Add `expandedRowRender` and `icon` props in `expandable` ([#128](https://github.com/arco-design/arco-design-vue/pull/128))\n- Add `expand-icon` and `expand-row` slots ([#128](https://github.com/arco-design/arco-design-vue/pull/128))\n\n### 🐛 BugFix\n\n- Fix the problem that the table operation items in the header grouping are occupied incorrectly ([#127](https://github.com/arco-design/arco-design-vue/pull/127))\n\n\n## 2.1.0\n\n`2021-11-05`\n\n### 🆕 Feature\n\n- Add the `#title` slot in `table-column` ([#95](https://github.com/arco-design/arco-design-vue/pull/95))\n\n### 🐛 BugFix\n\n- Fix the issue that `#column` slot cannot support Fragment ([#83](https://github.com/arco-design/arco-design-vue/pull/83))\n- Fix the problem that `scroll.x` does not take effect when used alone ([#83](https://github.com/arco-design/arco-design-vue/pull/83))\n\n\n## 2.0.3\n\n`2021-10-29`\n\n### 🐛 BugFix\n\n- Fix the display of scroll bar in `scroll` mode, causing cell misalignment ([#29](https://github.com/arco-design/arco-design-vue/pull/29))\n\n"
  },
  {
    "path": "packages/web-vue/components/table/CHANGELOG.zh-CN.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.57.0\n\n`2025-03-10`\n\n### 🐛 问题修复\n\n- 修复暗黑模式下固定列选中背景样式透明 ([#3398](https://github.com/arco-design/arco-design-vue/pull/3398))\n\n\n## 2.55.3\n\n`2024-06-07`\n\n### 🆕 新增功能\n\n- column 增加 minWidth 属性 ([#3157](https://github.com/arco-design/arco-design-vue/pull/3157))\n\n### 🐛 问题修复\n\n- 修复虚拟滚动条开启时 sticky-header 吸顶失效 ([#3170](https://github.com/arco-design/arco-design-vue/pull/3170))\n- table动态切换row-selection时恢复默认样式 ([#3155](https://github.com/arco-design/arco-design-vue/pull/3155))\n\n\n## 2.54.4\n\n`2024-02-02`\n\n### 🐛 问题修复\n\n- 修复表格虚拟列表下不显示 empty  问题 ([#2949](https://github.com/arco-design/arco-design-vue/pull/2949))\n\n\n## 2.54.2\n\n`2024-01-11`\n\n### 🐛 问题修复\n\n- 修复 `span-method` 在超出行列数后报错的问题 ([#2914](https://github.com/arco-design/arco-design-vue/pull/2914))\n\n\n## 2.51.0\n\n`2023-09-01`\n\n### 🆕 新增功能\n\n- 支持显示空子树 ([#2673](https://github.com/arco-design/arco-design-vue/pull/2673))\n\n\n## 2.49.2\n\n`2023-07-28`\n\n### 🐛 问题修复\n\n- 修复在固定列中开启调整列宽出现的问题 ([#2598](https://github.com/arco-design/arco-design-vue/pull/2598))\n- 修复树形表格拖拽问题 ([#2503](https://github.com/arco-design/arco-design-vue/pull/2503))\n\n\n## 2.49.0\n\n`2023-07-21`\n\n### 🐛 问题修复\n\n- 修复 rowClass 函数 record 参数错误的问题 ([#2570](https://github.com/arco-design/arco-design-vue/pull/2570))\n\n\n## 2.48.1\n\n`2023-07-14`\n\n### 🐛 问题修复\n\n- 修复 `summary-span-method` 属性中传出参数错误的问题 ([#2552](https://github.com/arco-design/arco-design-vue/pull/2552))\n- 修复子树的合并单元格的bug ([#2540](https://github.com/arco-design/arco-design-vue/pull/2540))\n\n\n## 2.48.0\n\n`2023-06-30`\n\n### 🆕 新增功能\n\n- 单元格新增鼠标移入移出事件 ([#2489](https://github.com/arco-design/arco-design-vue/pull/2489))\n\n### 🐛 问题修复\n\n- 增加headerCell下调整列宽高亮 ([#2519](https://github.com/arco-design/arco-design-vue/pull/2519))\n\n\n## 2.46.1\n\n`2023-05-26`\n\n### 💎 功能优化\n\n- 增加表格右击、双击的相关事件 ([#2452](https://github.com/arco-design/arco-design-vue/pull/2452))\n\n\n## 2.46.0\n\n`2023-05-12`\n\n### 🐛 问题修复\n\n- 修复当 dataIndex 为路径格式时，排序和总结栏功能不生效的问题 ([#2413](https://github.com/arco-design/arco-design-vue/pull/2413))\n\n\n## 2.45.1\n\n`2023-04-14`\n\n### 💅 样式更新\n\n- 修复虚拟列表下显示横向滚动条的问题 ([#2337](https://github.com/arco-design/arco-design-vue/pull/2337))\n\n\n## 2.41.1\n\n`2023-01-06`\n\n### 🐛 问题修复\n\n- 修复开启 `scroll` 时浏览器缩放后可能出现宽度错误的问题 ([#2028](https://github.com/arco-design/arco-design-vue/pull/2028))\n\n\n## 2.41.0\n\n`2022-12-30`\n\n### 🐛 问题修复\n\n- 修复仅 `operations` 列固定的情况下没有阴影的问题 ([#1938](https://github.com/arco-design/arco-design-vue/pull/1938))\n\n\n## 2.40.0\n\n`2022-12-09`\n\n### 🆕 新增功能\n\n- change 事件增加当前数据参数 ([#1893](https://github.com/arco-design/arco-design-vue/pull/1893))\n\n\n## 2.39.2\n\n`2022-12-02`\n\n### 🐛 问题修复\n\n- 修复 thead 在某些情况下会出现纵向滚动条的问题 ([#1913](https://github.com/arco-design/arco-design-vue/pull/1913))\n\n\n## 2.38.3\n\n`2022-11-11`\n\n### 🐛 问题修复\n\n- 修复某些场景下自定义表格元素时会出现警告的问题\n\n\n## 2.38.2\n\n`2022-11-09`\n\n### 🐛 问题修复\n\n- 修复行选择器状态错误的问题 ([#1849](https://github.com/arco-design/arco-design-vue/pull/1849))\n\n\n## 2.38.1\n\n`2022-11-04`\n\n### 🐛 问题修复\n\n- 修复rowClass为函数时的参数 ([#1812](https://github.com/arco-design/arco-design-vue/pull/1812))\n\n\n## 2.38.0\n\n`2022-10-28`\n\n### 💅 样式更新\n\n- 修复暗黑模式下 stripe 样式问题 ([#1795](https://github.com/arco-design/arco-design-vue/pull/1795))\n\n\n## 2.38.0-beta.1\n\n`2022-10-14`\n\n### 💅 样式更新\n\n- 修复表格同时开启总结行和滚动时，总结行高度被压缩的问题 ([#1733](https://github.com/arco-design/arco-design-vue/pull/1733))\n\n\n## 2.37.4\n\n`2022-09-30`\n\n### 🐛 问题修复\n\n- 修复 default sorter&filters 在模板用法下失效的问题 ([#1707](https://github.com/arco-design/arco-design-vue/pull/1707))\n\n\n## 2.37.3\n\n`2022-09-23`\n\n### 🐛 问题修复\n\n- 修复内容变化后tooltip不显示的问题 ([#1662](https://github.com/arco-design/arco-design-vue/pull/1662))\n\n### 🆎 类型修正\n\n- 修复 TableRowSelection 类型声明 ([#1667](https://github.com/arco-design/arco-design-vue/pull/1667))\n\n\n## 2.37.2\n\n`2022-09-21`\n\n### 🐛 问题修复\n\n- 修复 scroll 属性中 maxHeight 导致虚拟滚动条样式错误问题 ([#1655](https://github.com/arco-design/arco-design-vue/pull/1655))\n\n\n## 2.36.0\n\n`2022-09-02`\n\n### 🆕 新增功能\n\n- 新增自定义类名相关属性 ([#1580](https://github.com/arco-design/arco-design-vue/pull/1580))\n\n### 💎 功能优化\n\n- 扩展 key 的类型 ([#1580](https://github.com/arco-design/arco-design-vue/pull/1580))\n\n\n## 2.35.0\n\n`2022-08-12`\n\n### 💅 样式更新\n\n- 调整固定列的 zIndex ([#1479](https://github.com/arco-design/arco-design-vue/pull/1479))\n\n\n## 2.34.0\n\n`2022-07-29`\n\n### 💎 功能优化\n\n- columns 支持 reactive 类型的更新 ([#1470](https://github.com/arco-design/arco-design-vue/pull/1470))\n- rowClass 支持函数类型的值 ([#1453](https://github.com/arco-design/arco-design-vue/pull/1453))\n\n\n## 2.33.1\n\n`2022-07-22`\n\n### 💎 功能优化\n\n- 单独设置 selected-keys 时可以显示选中行 ([#1440](https://github.com/arco-design/arco-design-vue/pull/1440))\n\n\n## 2.32.1\n\n`2022-07-01`\n\n### 🐛 问题修复\n\n- 修复文本提示没有跟随内容更新的问题 ([#1373](https://github.com/arco-design/arco-design-vue/pull/1373))\n\n\n## 2.32.0\n\n`2022-06-24`\n\n### 🆕 新增功能\n\n- TableRowSelection 增加 onlyCurrent 属性，更改表格默认维护所有分页的选择状态 ([#1334](https://github.com/arco-design/arco-design-vue/pull/1334))\n\n### 💎 功能优化\n\n- cellStyle 类属性添加的样式移动到 td 元素上，解决部分场景下背景色问题 ([#1334](https://github.com/arco-design/arco-design-vue/pull/1334))\n\n\n## 2.31.0\n\n`2022-06-17`\n\n### 🆕 新增功能\n\n- 增加新的组件方法，详情可见文档 ([#1304](https://github.com/arco-design/arco-design-vue/pull/1304))\n- titleSlotName 定义的插槽增加 column 参数 ([#1304](https://github.com/arco-design/arco-design-vue/pull/1304))\n\n\n## 2.30.2\n\n`2022-06-11`\n\n### 🐛 问题修复\n\n- 修复 align='left' 时表头居中的问题 ([#1278](https://github.com/arco-design/arco-design-vue/pull/1278))\n\n### 💎 功能优化\n\n- 无展开按钮时不再显示缩进 ([#1278](https://github.com/arco-design/arco-design-vue/pull/1278))\n\n\n## 2.30.0\n\n`2022-06-10`\n\n### ⚠️ 重点注意\n\n- 由于功能需要，`arco-table-cell` 改为 flex 布局，且在表格内容外新增 `arco-table-td-content`  包裹层，如有自定义样式请留意 DOM 结构的改变 ([#1248](https://github.com/arco-design/arco-design-vue/pull/1248))\n\n### 🆕 新增功能\n\n- 增加 `sticky-header` 表头吸顶功能 ([#1248](https://github.com/arco-design/arco-design-vue/pull/1248))\n- 表格列配置增加 `summaryCellStyle` 属性 ([#1248](https://github.com/arco-design/arco-design-vue/pull/1248))\n\n### 🐛 问题修复\n\n- 修复树型数据时文字省略错误的问题 ([#1248](https://github.com/arco-design/arco-design-vue/pull/1248))\n- 修复分组表头与固定列同时使用出现的问题 ([#1248](https://github.com/arco-design/arco-design-vue/pull/1248))\n\n### 💎 功能优化\n\n- 支持虚拟列表和固定列同时使用 ([#1248](https://github.com/arco-design/arco-design-vue/pull/1248))\n\n### 💅 样式更新\n\n- 修复横向滚动阴影问题 ([#1248](https://github.com/arco-design/arco-design-vue/pull/1248))\n\n\n## 2.29.0\n\n`2022-05-27`\n\n### 🆕 新增功能\n\n- 行选择器增加非严格模式支持（级联控制） ([#1202](https://github.com/arco-design/arco-design-vue/pull/1202))\n- 列属性增加 headerCellStyle 和 bodyCellStyle ([#1202](https://github.com/arco-design/arco-design-vue/pull/1202))\n\n\n## 2.28.0\n\n`2022-05-20`\n\n### 🆕 新增功能\n\n- `expand ` 和 `select ` 事件增加 record 参数 ([#1178](https://github.com/arco-design/arco-design-vue/pull/1178))\n- 新增 `columnResize`  事件 ([#1178](https://github.com/arco-design/arco-design-vue/pull/1178))\n\n\n## 2.27.0\n\n`2022-05-13`\n\n### 💅 样式更新\n\n- 修复存在固定列时，出现竖向滚动条的问题 ([#1124](https://github.com/arco-design/arco-design-vue/pull/1124))\n\n### 🆎 类型修正\n\n- 使用 VNodeChild 替代接口中的 VNode，支持更广泛类型 ([#1118](https://github.com/arco-design/arco-design-vue/pull/1118))\n\n\n## 2.26.0\n\n`2022-04-29`\n\n### 🆕 新增功能\n\n- column 配置增加 tooltip 属性 ([#1065](https://github.com/arco-design/arco-design-vue/pull/1065))\n- 增加 thead、th 插槽，tr、td 插槽增加传出数据 ([#1065](https://github.com/arco-design/arco-design-vue/pull/1065))\n\n### 💎 功能优化\n\n- table-column 动态修改顺序不需要再手动指定 index ([#1065](https://github.com/arco-design/arco-design-vue/pull/1065))\n\n\n## 2.25.1\n\n`2022-04-27`\n\n### 🐛 问题修复\n\n- 修复 `2.25.0` 版本中扩展行传出 record 参数格式错误问题 ([#1047](https://github.com/arco-design/arco-design-vue/pull/1047))\n\n### 💅 样式更新\n\n- 增加内部 table 类名，修复与 `descriptions` 组件一起使用的样式问题 ([#1053](https://github.com/arco-design/arco-design-vue/pull/1053))\n\n\n## 2.25.0\n\n`2022-04-22`\n\n### 🆕 新增功能\n\n- 增加行选择器和展开行双向绑定属性 ([#1023](https://github.com/arco-design/arco-design-vue/pull/1023))\n- `select` 事件新增第二个参数 `rowKey` ([#999](https://github.com/arco-design/arco-design-vue/pull/999))\n\n### 💎 功能优化\n\n- 自定义单元格渲染的 `record` 参数支持修改 ([#1023](https://github.com/arco-design/arco-design-vue/pull/1023))\n\n\n## 2.24.0\n\n`2022-04-15`\n\n### 💎 功能优化\n\n- 当 columns 属性中存在 titleSlotName 时会优先使用 ([#969](https://github.com/arco-design/arco-design-vue/pull/969))\n\n### 🆎 类型修正\n\n- `TableColumn` 接口名修改为 `TableColumnData` ([#983](https://github.com/arco-design/arco-design-vue/pull/983))\n\n\n## 2.23.0\n\n`2022-04-08`\n\n### 💎 功能优化\n\n- 横向滚动模式下，如果数据为空，表头会显示滚动条 ([#948](https://github.com/arco-design/arco-design-vue/pull/948))\n\n### 🆕 新增功能\n\n- columns 属性增加 titleSlotName，filterable 属性增加 slotName ([#948](https://github.com/arco-design/arco-design-vue/pull/948))\n- table-column 增加 filter-content，filter-content 插槽 ([#948](https://github.com/arco-design/arco-design-vue/pull/948))\n- 增加 summary-cell 插槽 ([#948](https://github.com/arco-design/arco-design-vue/pull/948))\n\n\n## 2.22.1\n\n`2022-04-02`\n\n### 🐛 问题修复\n\n- 修复虚拟列表和滚动一起使用的问题 ([#926](https://github.com/arco-design/arco-design-vue/pull/926))\n\n\n## 2.22.0\n\n`2022-04-01`\n\n### 🆕 新增功能\n\n- 增加 `selectAll` 方法 ([#920](https://github.com/arco-design/arco-design-vue/pull/920))\n\n### 🐛 问题修复\n\n- 修复某些情况下虚拟列表宽度错误的问题 ([#920](https://github.com/arco-design/arco-design-vue/pull/920))\n\n\n## 2.21.0\n\n`2022-03-25`\n\n### 🆕 新增功能\n\n- 增加总结行功能 ([#877](https://github.com/arco-design/arco-design-vue/pull/877))\n\n\n## 2.20.2\n\n`2022-03-24`\n\n### 🐛 问题修复\n\n- 修复 `table-column` 组件在模板中直接书写对象参数时导致不断更新的问题 ([#861](https://github.com/arco-design/arco-design-vue/pull/861))\n- 修复仅有一个 `table-column` 时没有列数据的问题 ([#861](https://github.com/arco-design/arco-design-vue/pull/861))\n- 修复 `table-column` 的排序问题，可通过 `index` 参数解决 ([#861](https://github.com/arco-design/arco-design-vue/pull/861))\n\n\n## 2.20.0\n\n`2022-03-18`\n\n### 🆕 新增功能\n\n- 使用 Context 方式重构组件，`table-colum` 支持二次封装 ([#845](https://github.com/arco-design/arco-design-vue/pull/845))\n- scroll 属性增加 `maxHeight`, `minWidth` 属性 ([#845](https://github.com/arco-design/arco-design-vue/pull/845))\n\n### 💅 样式更新\n\n- 修复开启排序后，表头文字不能居中的问题 ([#845](https://github.com/arco-design/arco-design-vue/pull/845))\n\n## 2.19.0\n\n`2022-03-11`\n\n### ⚠️ 重点注意\n\n- 修改排序函数 sorter 的传出数据，增强使用 ([#810](https://github.com/arco-design/arco-design-vue/pull/810))\n\n\n## 2.18.0\n\n`2022-03-04`\n\n### 🆕 新增功能\n\n- 滚动模式支持设置高度百分比 ([#780](https://github.com/arco-design/arco-design-vue/pull/780))\n- column 数据增加 slotName 属性，允许指定渲染插槽 ([#780](https://github.com/arco-design/arco-design-vue/pull/780))\n- 增加 `pagination-left` 和 `pagination-right` 插槽 ([#780](https://github.com/arco-design/arco-design-vue/pull/780))\n\n\n## 2.18.0-beta.2\n\n`2022-02-25`\n\n### 🆕 新增功能\n\n- 增加 `span-all`  属性 ([#735](https://github.com/arco-design/arco-design-vue/pull/735))\n\n### 🐛 问题修复\n\n- 修复 table-column 嵌套使用时，v-for 不能渲染的问题 ([#734](https://github.com/arco-design/arco-design-vue/pull/734))\n\n\n## 2.18.0-beta.1\n\n`2022-02-18`\n\n### 💎 功能优化\n\n- 在数据为空时，不展示分页组件 ([#684](https://github.com/arco-design/arco-design-vue/pull/684))\n\n\n## 2.16.2\n\n`2022-01-24`\n\n### 🐛 问题修复\n\n- 修复阻止冒泡导致懒加载失效的问题 ([#641](https://github.com/arco-design/arco-design-vue/pull/641))\n- **table:** 修复在展开行展开时，删除后显示空行的问题\n\n\n## 2.16.0\n\n`2022-01-21`\n\n### 💎 功能优化\n\n- 内部按钮不再触发 `row-click` 事件 ([#630](https://github.com/arco-design/arco-design-vue/pull/630))\n\n### 🆕 新增功能\n\n- 增加拖拽排序的支持（实验性） ([#619](https://github.com/arco-design/arco-design-vue/pull/619))\n- 增加调整列宽的支持（实验性） ([#619](https://github.com/arco-design/arco-design-vue/pull/619))\n- 增加 `tbody`、`tr`、`td` 插槽 ([#619](https://github.com/arco-design/arco-design-vue/pull/619))\n\n\n## 2.15.0\n\n`2022-01-14`\n\n### 🆕 新增功能\n\n- `sortable.sorter` 增加 boolean 类型，支持服务器端排序 ([#575](https://github.com/arco-design/arco-design-vue/pull/575))\n\n\n## 2.14.2\n\n`2022-01-10`\n\n### 🐛 问题修复\n\n- 修复 table 内容超出容器，导致某些情况下边框不显示的问题 ([#536](https://github.com/arco-design/arco-design-vue/pull/536))\n\n\n## 2.14.0\n\n`2022-01-07`\n\n### 🆕 新增功能\n\n- 增加 hideExpandButtonOnEmpty 属性 ([#520](https://github.com/arco-design/arco-design-vue/pull/520))\n\n### 🐛 问题修复\n\n- 修复 x 轴 resize 问题 ([#519](https://github.com/arco-design/arco-design-vue/pull/519))\n- 修复存在固定列时，展开行宽度设置错误的问题 ([#519](https://github.com/arco-design/arco-design-vue/pull/519))\n- 修复存在子树时，复选框全选设置错误的问题 ([#519](https://github.com/arco-design/arco-design-vue/pull/519))\n\n\n## 2.13.0\n\n`2021-12-31`\n\n### 🆕 新增功能\n\n- 增加 `loadMore` 属性，支持子树懒加载 ([#485](https://github.com/arco-design/arco-design-vue/pull/485))\n- 增加 `filterIconAlignLeft` 属性 ([#485](https://github.com/arco-design/arco-design-vue/pull/485))\n- 增加 `change` 事件，可获取处理后数据 ([#485](https://github.com/arco-design/arco-design-vue/pull/485))\n\n### 🐛 问题修复\n\n- 修复 `sortOrder ` 置空失效的问题 ([#478](https://github.com/arco-design/arco-design-vue/pull/478))\n- 修复 `expand-icon` 插槽在子树中不生效的问题 ([#478](https://github.com/arco-design/arco-design-vue/pull/478))\n- 修复固定列在表格尺寸动态变化时阴影不显示的问题 ([#478](https://github.com/arco-design/arco-design-vue/pull/478))\n\n\n## 2.12.0\n\n`2021-12-24`\n\n### 💅 样式更新\n\n- 修复 table 滚动模式下最后一行多余边框的问题 ([#456](https://github.com/arco-design/arco-design-vue/pull/456))\n\n\n## 2.11.0\n\n`2021-12-17`\n\n### 🆕 新增功能\n\n- `columns` 新增 cellStyle 属性 ([#411](https://github.com/arco-design/arco-design-vue/pull/411))\n\n### 🐛 问题修复\n\n- 修复固定列模式下，表格尺寸变化导致表头和主体宽度不一致问题 ([#410](https://github.com/arco-design/arco-design-vue/pull/410))\n\n\n## 2.10.0\n\n`2021-12-10`\n\n### 🆕 新增功能\n\n- 增加 span-method 属性 ([#360](https://github.com/arco-design/arco-design-vue/pull/360))\n\n\n## 2.9.0\n\n`2021-12-03`\n\n### 🐛 问题修复\n\n- 修复树形展开按钮触发表单提交的问题 ([#321](https://github.com/arco-design/arco-design-vue/pull/321))\n\n\n## 2.7.0\n\n`2021-11-26`\n\n### 🆕 新增功能\n\n- 增加 `footer` 插槽 ([#266](https://github.com/arco-design/arco-design-vue/pull/266))\n- 常规模式下表格宽度大于容器时会开启滚动条 ([#266](https://github.com/arco-design/arco-design-vue/pull/266))\n\n\n## 2.6.1\n\n`2021-11-24`\n\n### 💎 功能优化\n\n- 数据为空时不展示滚动 ([#245](https://github.com/arco-design/arco-design-vue/pull/245))\n\n### 🐛 问题修复\n\n- 修复展开行按钮触发表单提交的问题 ([#210](https://github.com/arco-design/arco-design-vue/pull/210))\n\n\n## 2.3.0\n\n`2021-11-12`\n\n### 🐛 问题修复\n\n- 修复 `<table-column>` 在分组表头错误的问题 ([#151](https://github.com/arco-design/arco-design-vue/pull/151))\n\n\n## 2.2.0\n\n`2021-11-10`\n\n### 🆕 新增功能\n\n- 增加 `row-key` 属性 ([#128](https://github.com/arco-design/arco-design-vue/pull/128))\n- 增加 `expandable` 中的 `expandedRowRender ` 和 `icon` 属性 ([#128](https://github.com/arco-design/arco-design-vue/pull/128))\n- 增加 `expand-icon` 和 `expand-row` 插槽 ([#128](https://github.com/arco-design/arco-design-vue/pull/128))\n\n### 🐛 问题修复\n\n- 修复表头分组中表格操作项占位错误的问题 ([#127](https://github.com/arco-design/arco-design-vue/pull/127))\n\n\n## 2.1.0\n\n`2021-11-05`\n\n### 🆕 新增功能\n\n- 添加 `table-column` 中的 `#title` 插槽 ([#95](https://github.com/arco-design/arco-design-vue/pull/95))\n\n### 🐛 问题修复\n\n- 修复 `#column` 插槽不能支持Fragment的问题 ([#83](https://github.com/arco-design/arco-design-vue/pull/83))\n- 修复 `scroll.x` 单独使用不生效的问题 ([#83](https://github.com/arco-design/arco-design-vue/pull/83))\n\n\n## 2.0.3\n\n`2021-10-29`\n\n### 🐛 问题修复\n\n- 修复 `scroll` 模式下，滚动条的显隐导致单元格错位 ([#29](https://github.com/arco-design/arco-design-vue/pull/29))\n\n"
  },
  {
    "path": "packages/web-vue/components/table/README.en-US.md",
    "content": "```yaml\nmeta:\n  type: Component\n  category: Data Display\ntitle: Table\ndescription: It is used for data collection, display, analysis and processing, and operation and processing.\n```\n\n*Auto translate by google.*\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/row-selection.md\n\n@import ./__demo__/radio.md\n\n@import ./__demo__/expand.md\n\n@import ./__demo__/ellipsis.md\n\n@import ./__demo__/subtree.md\n\n@import ./__demo__/lazy-load.md\n\n@import ./__demo__/props.md\n\n@import ./__demo__/sort.md\n\n@import ./__demo__/filter.md\n\n@import ./__demo__/scroll.md\n\n@import ./__demo__/fixed.md\n\n@import ./__demo__/span.md\n\n@import ./__demo__/sticky.md\n\n@import ./__demo__/summary.md\n\n@import ./__demo__/resize.md\n\n@import ./__demo__/drag-row.md\n\n@import ./__demo__/drag-handle.md\n\n@import ./__demo__/group.md\n\n@import ./__demo__/fixed-group.md\n\n@import ./__demo__/editable.md\n\n@import ./__demo__/custom.md\n\n@import ./__demo__/custom-dom.md\n\n@import ./__demo__/virtual-list.md\n\n## API\n\n\n### `<table>` Props\n\n|Attribute|Description|Type|Default|version|\n|---|---|---|:---:|:---|\n|columns|Column info of the table|`TableColumnData[]`|`[]`||\n|data|Table data|`TableData[]`|`[]`||\n|bordered|Whether to show the border|`boolean \\| TableBorder`|`true`||\n|hoverable|Whether to show the hover effect|`boolean`|`true`||\n|stripe|Whether to enable the stripe effect|`boolean`|`false`||\n|size|The size of the table|`'mini' \\| 'small' \\| 'medium' \\| 'large'`|`'large'`||\n|table-layout-fixed|The table-layout property of the table is set to fixed. After it is set to fixed, the width of the table will not be stretched beyond 100% by the content.|`boolean`|`false`||\n|loading|Whether it is loading state|`boolean\\|object`|`false`||\n|row-selection|Table row selector configuration|`TableRowSelection`|`-`||\n|expandable|Expand row configuration of the table|`TableExpandable`|`-`||\n|scroll|Scrolling attribute configuration of the table. The `2.13.0` version adds support for character values. `2.20.0` version adds support for `minWidth`, `maxHeight`.|`{  x?: number \\| string;  y?: number \\| string;  minWidth?: number \\| string;  maxHeight?: number \\| string;}`|`-`||\n|pagination|Pagination properties configuration|`boolean \\| PaginationProps`|`true`||\n|page-position|The position of the page selector|`'tl' \\| 'top' \\| tr' \\| 'bl' \\| 'bottom' \\| 'br'`|`'br'`||\n|indent-size|The indentation distance of the tree table|`number`|`16`||\n|row-key|Value field of table row `key`|`string`|`'key'`||\n|show-header|Whether to show the header|`boolean`|`true`||\n|virtual-list-props|Pass the virtual list attribute, pass in this parameter to turn on virtual scrolling [VirtualListProps](#VirtualListProps)|`VirtualListProps`|`-`||\n|span-method|Cell merge method (The index starts counting from the data item)|`(data: {  record: TableData;  column: TableColumnData \\| TableOperationColumn;  rowIndex: number;  columnIndex: number;}) => { rowspan?: number; colspan?: number } \\| void`|`-`|2.10.0|\n|span-all|Whether to make the index of the span method contain all|`boolean`|`false`|2.18.0|\n|load-more|Data lazy loading function, open the lazy loading function when it is passed in|`(record: TableData, done: (children?: TableData[]) => void) => void`|`-`|2.13.0|\n|filter-icon-align-left|Whether the filter icon is aligned to the left|`boolean`|`false`|2.13.0|\n|hide-expand-button-on-empty|Whether to hide expand button when subtree is empty|`boolean`|`false`|2.14.0|\n|row-class|The class name of the table row element. The `2.34.0` version adds support for function values.|`string\\| any[]\\| Record<string, any>\\| ((record: TableData, rowIndex: number) => any)`|`-`|2.16.0|\n|draggable|Table drag and drop sorting configuration|`TableDraggable`|`-`|2.16.0|\n|column-resizable|Whether to allow the column width to be adjusted|`boolean`|`false`|2.16.0|\n|summary|Show footer summary row|`boolean\\| ((params: {    columns: TableColumnData[];    data: TableData[];  }) => TableData[])`|`-`|2.21.0|\n|summary-text|The first column of text in the summary line|`string`|`'Summary'`|2.21.0|\n|summary-span-method|Cell Merge Method for Summarizing Rows|`(data: {  record: TableData;  column: TableColumnData \\| TableOperationColumn;  rowIndex: number;  columnIndex: number;}) => { rowspan?: number; colspan?: number } \\| void`|`-`|2.21.0|\n|selected-keys|Selected row (controlled mode) takes precedence over `rowSelection`|`(string \\| number)[]`|`-`|2.25.0|\n|default-selected-keys|The selected row by default (uncontrolled mode) takes precedence over `rowSelection`|`(string \\| number)[]`|`-`|2.25.0|\n|expanded-keys|Displayed Expanded Row, Subtree (Controlled Mode) takes precedence over `expandable`|`(string \\| number)[]`|`-`|2.25.0|\n|default-expanded-keys|Expand row, Subtree displayed by default (Uncontrolled mode) takes precedence over `expandable`|`(string \\| number)[]`|`-`|2.25.0|\n|default-expand-all-rows|Whether to expand all rows by default|`boolean`|`false`|2.25.0|\n|sticky-header|Whether to open the sticky header|`boolean\\|number`|`false`|2.30.0|\n|scrollbar|Whether to enable virtual scroll bar|`boolean \\| ScrollbarProps`|`true`|2.38.0|\n|show-empty-tree|Whether to display empty subtrees|`boolean`|`false`|2.51.0|\n### `<table>` Events\n\n|Event Name|Description|Parameters|version|\n|---|---|---|:---|\n|expand|Triggered when a row is clicked to expand|rowKey: `string \\| number`<br>record: `TableData`||\n|expanded-change|Triggered when the expanded data row changes|rowKeys: `(string \\| number)[]`||\n|select|Triggered when the row selector is clicked|rowKeys: `string \\| number[]`<br>rowKey: `string \\| number`<br>record: `TableData`||\n|select-all|Triggered when the select all selector is clicked|checked: `boolean`||\n|selection-change|Triggered when the selected data row changes|rowKeys: `(string \\| number)[]`||\n|sorter-change|Triggered when the collation changes|dataIndex: `string`<br>direction: `string`||\n|filter-change|Triggered when the filter options are changed|dataIndex: `string`<br>filteredValues: `string[]`||\n|page-change|Triggered when the table pagination changes|page: `number`||\n|page-size-change|Triggered when the number of data per page of the table changes|pageSize: `number`||\n|change|Triggered when table data changes|data: `TableData[]`<br>extra: `TableChangeExtra`<br>currentData: `TableData[]`|2.40.0 增加 currentData|\n|cell-mouse-enter|Triggered when hovering into a cell|record: `TableData`<br>column: `TableColumnData`<br>ev: `Event`||\n|cell-mouse-leave|Triggered when hovering out of a cell|record: `TableData`<br>column: `TableColumnData`<br>ev: `Event`||\n|cell-click|Triggered when a cell is clicked|record: `TableData`<br>column: `TableColumnData`<br>ev: `Event`||\n|row-click|Triggered when row data is clicked|record: `TableData`<br>ev: `Event`||\n|header-click|Triggered when the header data is clicked|column: `TableColumnData`<br>ev: `Event`||\n|column-resize|Triggered when column width is adjusted|dataIndex: `string`<br>width: `number`|2.28.0|\n|row-dblclick|Triggered when row data is double clicked|record: `TableData`<br>ev: `Event`||\n|cell-dblclick|Triggered when a cell is double clicked|record: `TableData`<br>column: `TableColumnData`<br>ev: `Event`||\n|row-contextmenu|Triggered when row data is right clicked|record: `TableData`<br>ev: `Event`||\n|cell-contextmenu|Triggered when a cell is right clicked|record: `TableData`<br>column: `TableColumnData`<br>ev: `Event`||\n### `<table>` Methods\n\n|Method|Description|Parameters|Return|version|\n|---|---|---|:---:|:---|\n|selectAll|Set select all state|checked: ` boolean `|-|2.22.0|\n|select|Set row selector state|rowKey: ` string \\| number \\| (string \\| number)[] `<br>checked: ` boolean `|-|2.31.0|\n|expandAll|Set all expanded state|checked: ` boolean `|-|2.31.0|\n|expand|Set select all state|rowKey: ` string \\| number \\| (string \\| number)[] `<br>checked: ` boolean `|-|2.31.0|\n|resetFilters|Reset the filter for columns|dataIndex: ` string \\| string[] `|-|2.31.0|\n|clearFilters|Clear the filter for columns|dataIndex: ` string \\| string[] `|-|2.31.0|\n|resetSorters|Reset the order of columns|-|-|2.31.0|\n|clearSorters|Clear the order of columns|-|-|2.31.0|\n### `<table>` Slots\n\n|Slot Name|Description|Parameters|version|\n|---|---|---|:---|\n|th|Custom th element|column: `TableColumnData`|2.26.0|\n|thead|Custom thead element|-|2.26.0|\n|empty|Empty|-||\n|summary-cell|Content on the right side of the pagination|column: `TableColumnData`<br>record: `TableData`<br>rowIndex: `number`|2.23.0|\n|pagination-right|Content on the right side of the pagination|-|2.18.0|\n|pagination-left|Content on the left side of the pagination|-|2.18.0|\n|td|Custom td element|column: `TableColumnData`<br>record: `TableData`<br>rowIndex: `number`|2.16.0|\n|tr|Custom tr element|record: `TableData`<br>rowIndex: `number`|2.16.0|\n|tbody|Custom tbody element|-|2.16.0|\n|drag-handle-icon|Drag handle icon|-|2.16.0|\n|footer|Table Footer|-||\n|expand-row|Expand row content|record: `TableData`||\n|expand-icon|Expand row icon|expanded: `boolean`<br>record: `TableData`||\n|columns|Table column definitions. When enabled, the columns attribute is masked|-||\n\n\n\n\n### `<table-column>` Props\n\n|Attribute|Description|Type|Default|version|\n|---|---|---|:---:|:---|\n|data-index|Identifies the column information, corresponding to the data in TableData|`string`|`-`||\n|title|Column title|`string`|`-`||\n|width|Column width|`number`|`-`||\n|min-width|Minimum column width|`number`|`-`||\n|align|Alignment direction|`TableColumnData['align']`|`-`||\n|fixed|Fixed position|`TableColumnData['fixed']`|`-`||\n|ellipsis|Whether to display as omitted|`boolean`|`false`||\n|sortable|Sorting related options|`TableSortable`|`-`||\n|filterable|Filter related options|`TableFilterable`|`-`||\n|cell-class|Custom cell class|`ClassName`|`-`|2.36.0|\n|header-cell-class|Custom cell class|`ClassName`|`-`|2.36.0|\n|body-cell-class|Custom cell class|`ClassName \\| ((record: TableData) => ClassName)`|`-`|2.36.0|\n|summary-cell-class|Customize summary column cell class|`ClassName \\| ((record: TableData) => ClassName)`|`-`|2.36.0|\n|cell-style|Custom cell style|`CSSProperties`|`-`|2.11.0|\n|header-cell-style|Custom cell style|`CSSProperties`|`-`|2.29.0|\n|body-cell-style|Custom cell style|`CSSProperties \\| ((record: TableData) => CSSProperties)`|`-`|2.29.0|\n|summary-cell-style|Customize summary column cell style|`CSSProperties \\| ((record: TableData) => CSSProperties)`|`-`|2.30.0|\n|index|index for manually specifying option. Manual specification is no longer required after version 2.26.0|`number`|`-`|2.20.2|\n|tooltip|Whether to show text hints when omitted|`boolean\\|object`|`false`|2.26.0|\n### `<table-column>` Slots\n\n|Slot Name|Description|Parameters|version|\n|---|---|---|:---|\n|filter-icon|Title|-|2.23.0|\n|filter-content|Title|filterValue: `string[]`<br>setFilterValue: `(filterValue: string[]) => void`<br>handleFilterConfirm: `(event: Event) => void`<br>handleFilterReset: `(event: Event) => void`|2.23.0|\n|title|Title|-||\n|cell|Cell|record: `TableData`<br>column: `TableColumnData`<br>rowIndex: `number`||\n\n\n\n## Type\n\n```ts\ntype Filters = Record<string, string[]>;\n\ntype Sorter = { filed: string; direction: 'ascend' | 'descend' } | Record<string, never>;\n```\n\n\n### TableData\n\n|Name|Description|Type|Default|version|\n|---|---|---|:---:|:---|\n|key|The key of the data row|`string`|`-`||\n|expand|Expand row content|`string \\| RenderFunction`|`-`||\n|children|Sub data|`TableData[]`|`-`||\n|disabled|Whether to disable the row selector|`boolean`|`false`||\n|isLeaf|Whether it is a leaf node|`boolean`|`false`|2.13.0|\n\n\n\n### TableSortable\n\n|Name|Description|Type|Default|\n|---|---|---|:---:|\n|sortDirections|Supported sort direction|`('ascend' \\| 'descend')[]`|`-`|\n|sorter|Sorting function. Set to `true` to turn off internal sorting. Version 2.19.0 modifies outgoing data.|`((        a: TableData,        b: TableData,        extra: { dataIndex: string; direction: 'ascend' \\| 'descend' }      ) => number)    \\| boolean`|`-`|\n|sortOrder|Sort direction|`'ascend' \\| 'descend' \\| ''`|`-`|\n|defaultSortOrder|Default sort direction (uncontrolled mode)|`'ascend' \\| 'descend' \\| ''`|`-`|\n\n\n\n### TableFilterData\n\n|Name|Description|Type|Default|\n|---|---|---|:---:|\n|text|Filter the content of the data option|`string \\| RenderFunction`|`-`|\n|value|Filter the value of the data option|`string`|`-`|\n\n\n\n### TableFilterable\n\n|Name|Description|Type|Default|version|\n|---|---|---|:---:|:---|\n|filters|Filter data|`TableFilterData[]`|`-`||\n|filter|Filter function|`(filteredValue: string[], record: TableData) => boolean`|`-`||\n|multiple|Whether to support multiple selection|`boolean`|`false`||\n|filteredValue|Filter value|`string[]`|`-`||\n|defaultFilteredValue|Default filter value|`string[]`|`-`||\n|renderContent|The content of filter box|`(data: {    filterValue: string[];    setFilterValue: (filterValue: string[]) => void;    handleFilterConfirm: (event: Event) => void;    handleFilterReset: (event: Event) => void;  }) => VNodeChild`|`-`||\n|icon|Filter icon for button|`RenderFunction`|`-`||\n|triggerProps|Pop-up box configuration of filter box|`TriggerProps`|`-`||\n|alignLeft|Whether the filter icon is aligned to the left|`boolean`|`false`|2.13.0|\n\n\n\n### TableColumnData\n\n|Name|Description|Type|Default|version|\n|---|---|---|:---:|:---|\n|dataIndex|The identifier of the column information, corresponding to the data in `TableData`|`string`|`-`||\n|title|Column header|`string \\| RenderFunction`|`-`||\n|width|Column width|`number`|`-`||\n|minWidth|Minimum column width|`number`|`-`||\n|align|Alignment direction|`'left' \\| 'center' \\| 'right'`|`-`||\n|fixed|Fixed position|`'left' \\| 'right'`|`-`||\n|ellipsis|Whether to show ellipsis|`boolean`|`false`||\n|tooltip|Whether to show a text hint when an ellipsis is displayed. Can be filled in tooltip component properties|`boolean \\| Record<string, any>`|`-`|2.26.0|\n|sortable|Sorting related options|`TableSortable`|`-`||\n|filterable|Filter related options|`TableFilterable`|`-`||\n|children|Header sub-data, used for header grouping|`TableColumnData[]`|`-`||\n|cellClass|Custom cell class|`ClassName`|`-`|2.36.0|\n|headerCellClass|Custom header cell class|`ClassName`|`-`|2.36.0|\n|bodyCellClass|Custom body cell class|`ClassName \\| ((record: TableData) => ClassName)`|`-`|2.36.0|\n|summaryCellClass|Custom body cell class|`ClassName \\| ((record: TableData) => ClassName)`|`-`|2.36.0|\n|cellStyle|Custom cell style|`CSSProperties`|`-`|2.11.0|\n|headerCellStyle|Custom header cell style|`CSSProperties`|`-`|2.29.0|\n|bodyCellStyle|Custom body cell style|`CSSProperties \\| ((record: TableData) => CSSProperties)`|`-`|2.29.0|\n|summaryCellStyle|Custom summary cell style|`CSSProperties \\| ((record: TableData) => CSSProperties)`|`-`|2.30.0|\n|render|Customize the rendering of column cells|`(data: {    record: TableData;    column: TableColumnData;    rowIndex: number;  }) => VNodeChild`|`-`||\n|slotName|Sets the name of the render slot for the current column. Slot parameters are the same as #cell|`string`|`-`|2.18.0|\n|titleSlotName|Set the name of the render slot for the header of the current column|`string`|`-`|2.23.0|\n\n\n\n### TableBorder\n\n|Name|Description|Type|Default|\n|---|---|---|:---:|\n|wrapper|TWhether to display the outer border|`boolean`|`false`|\n|cell|Whether to display the cell border (header + body)|`boolean`|`false`|\n|headerCell|Whether to display the header cell border|`boolean`|`false`|\n|bodyCell|Whether to display the body cell border|`boolean`|`false`|\n\n\n\n### TableRowSelection\n\n|Name|Description|Type|Default|version|\n|---|---|---|:---:|:---|\n|type|The type of row selector|`'checkbox' \\| 'radio'`|`-`||\n|selectedRowKeys|Selected row (controlled mode)|`BaseType[]`|`-`||\n|defaultSelectedRowKeys|The selected row by default (uncontrolled mode)|`BaseType[]`|`-`||\n|showCheckedAll|Whether to show the select all selector|`boolean`|`false`||\n|title|Column title|`string`|`-`||\n|width|Column width|`number`|`-`||\n|fixed|Is it fixed|`boolean`|`false`||\n|checkStrictly|Whether to enable strict selection mode|`boolean`|`true`|2.29.0|\n|onlyCurrent|Whether to display only the keys of the current page (clear keys when switching paging)|`boolean`|`false`|2.32.0|\n\n\n\n### TableExpandable\n\n|Name|Description|Type|Default|\n|---|---|---|:---:|\n|expandedRowKeys|Displayed Expanded Row (Controlled Mode)|`BaseType[]`|`-`|\n|defaultExpandedRowKeys|Expand row displayed by default (Uncontrolled mode)|`BaseType[]`|`-`|\n|defaultExpandAllRows|Whether to expand all rows by default|`boolean`|`false`|\n|expandedRowRender|Customize expanded row content|`(record: TableData) => VNodeChild`|`-`|\n|icon|Expand icon|`(expanded: boolean, record: TableData) => VNodeChild`|`-`|\n|title|Column title|`string`|`-`|\n|width|Column width|`number`|`-`|\n|fixed|Is it fixed|`boolean`|`false`|\n\n\n\n### TableDraggable\n\n|Name|Description|Type|Default|\n|---|---|---|:---:|\n|type|drag type|`'row' \\| 'handle'`|`-`|\n|title|Column title|`string`|`-`|\n|width|Column width|`number`|`-`|\n|fixed|Is it fixed|`boolean`|`false`|\n\n\n\n### TableChangeExtra\n\n|Name|Description|Type|Default|\n|---|---|---|:---:|\n|type|Trigger type|`'pagination' \\| 'sorter' \\| 'filter' \\| 'drag'`|`-`|\n|page|page number|`number`|`-`|\n|pageSize|number per page|`number`|`-`|\n|sorter|Sort information|`Sorter`|`-`|\n|filters|Filter information|`Filters`|`-`|\n|dragTarget|Drag and drop information|`TableData`|`-`|\n\n\n\n\n### VirtualListProps\n\n|Name|Description|Type|Default|version|\n|---|---|---|:---:|:---|\n|height|Viewable area height|`number \\| string`|`-`||\n|threshold|The threshold of the number of elements to enable virtual scrolling. When the number of data is less than the threshold, virtual scrolling will not be enabled.|`number`|`-`||\n|isStaticItemHeight|(Repealed) Is the element height fixed. Version 2.18.0 deprecated, please use `fixedSize`|`boolean`|`false`||\n|fixedSize|Is the element height fixed.|`boolean`|`false`|2.34.1|\n|estimatedSize|Is the element height fixed.|`number`|`-`|2.34.1|\n|buffer|The number of elements mounted in advance outside the boundary of the viewport.|`number`|`10`|2.34.1|\n\n\n\n## FAQ\n\n\n\nThe table component provides custom slots for internal elements, which are different from normal slots and have certain restrictions on what the user can pass in.\nBecause the slot of vue does not provide a way to send out children and render them in the slot, we have done some special processing for the element slot in the table, and will append the original children to the content passed in by the user to ensure that children Normal rendering of the element.\nAt this point, the user needs to pay attention that when custom rendering in the element slot, a single empty element needs to be passed in, and content cannot be added to the passed in element (refer to Example 1).\nIf the user needs to pass in a composite element, he can customize the component, specify the default slot, and then pass it into the element slot of the table (refer to Example 2).\n\nexample 1:\n```vue\n<!-- Only one element -->\n<template>\n  <a-table>\n    <template #td>\n      <td @click=\"onClick\"></td>\n    </template>\n  </a-table>\n</template>\n```\nexample 2：\n```vue\n<!-- Only one component -->\n<template>\n  <a-table>\n    <template #td>\n      <MyTd></MyTd>\n    </template>\n  </a-table>\n</template>\n```\n```vue\n<!-- MyTd.vue -->\n<template>\n  <td>\n    <div>my td content</div>\n    <div>\n      <slot/>\n    </div>\n  </td>\n</template>\n```\n\n### 2. About the `row-key` setting in the data\n\nBy default, the table will uniquely locate the row data through the `key` field set in the data. When providing data, please ensure that the `key` field is set in the row data. This field is a necessary field when enabling functions such as selectors. If you want to change the default field name, you can modify `row-key` to set it.\n"
  },
  {
    "path": "packages/web-vue/components/table/README.zh-CN.md",
    "content": "```yaml\nmeta:\n  type: 组件\n  category: 数据展示\ntitle: 表格 Table\ndescription: 用于数据收集展示、分析整理、操作处理。\n```\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/row-selection.md\n\n@import ./__demo__/radio.md\n\n@import ./__demo__/expand.md\n\n@import ./__demo__/ellipsis.md\n\n@import ./__demo__/subtree.md\n\n@import ./__demo__/lazy-load.md\n\n@import ./__demo__/props.md\n\n@import ./__demo__/sort.md\n\n@import ./__demo__/filter.md\n\n@import ./__demo__/scroll.md\n\n@import ./__demo__/fixed.md\n\n@import ./__demo__/span.md\n\n@import ./__demo__/sticky.md\n\n@import ./__demo__/summary.md\n\n@import ./__demo__/resize.md\n\n@import ./__demo__/drag-row.md\n\n@import ./__demo__/drag-handle.md\n\n@import ./__demo__/group.md\n\n@import ./__demo__/fixed-group.md\n\n@import ./__demo__/editable.md\n\n@import ./__demo__/custom.md\n\n@import ./__demo__/custom-dom.md\n\n@import ./__demo__/virtual-list.md\n\n## API\n\n\n### `<table>` Props\n\n|参数名|描述|类型|默认值|版本|\n|---|---|---|:---:|:---|\n|columns|表格的列描述信息|`TableColumnData[]`|`[]`||\n|data|表格的数据|`TableData[]`|`[]`||\n|bordered|是否显示边框|`boolean \\| TableBorder`|`true`||\n|hoverable|是否显示选中效果|`boolean`|`true`||\n|stripe|是否开启斑马纹效果|`boolean`|`false`||\n|size|表格的大小|`'mini' \\| 'small' \\| 'medium' \\| 'large'`|`'large'`||\n|table-layout-fixed|表格的 table-layout 属性设置为 fixed，设置为 fixed 后，表格的宽度不会被内容撑开超出 100%。|`boolean`|`false`||\n|loading|是否为加载中状态|`boolean\\|object`|`false`||\n|row-selection|表格的行选择器配置|`TableRowSelection`|`-`||\n|expandable|表格的展开行配置|`TableExpandable`|`-`||\n|scroll|表格的滚动属性配置。`2.13.0` 版本增加字符型值的支持。`2.20.0` 版本增加 `minWidth`,`maxHeight` 的支持。|`{  x?: number \\| string;  y?: number \\| string;  minWidth?: number \\| string;  maxHeight?: number \\| string;}`|`-`||\n|pagination|分页的属性配置|`boolean \\| PaginationProps`|`true`||\n|page-position|分页选择器的位置|`'tl' \\| 'top' \\| tr' \\| 'bl' \\| 'bottom' \\| 'br'`|`'br'`||\n|indent-size|树形表格的缩进距离|`number`|`16`||\n|row-key|表格行 `key` 的取值字段|`string`|`'key'`||\n|show-header|是否显示表头|`boolean`|`true`||\n|virtual-list-props|传递虚拟列表属性，传入此参数以开启虚拟滚动 [VirtualListProps](#VirtualListProps)|`VirtualListProps`|`-`||\n|span-method|单元格合并方法（索引从数据项开始计数）|`(data: {  record: TableData;  column: TableColumnData \\| TableOperationColumn;  rowIndex: number;  columnIndex: number;}) => { rowspan?: number; colspan?: number } \\| void`|`-`|2.10.0|\n|span-all|是否让合并方法的索引包含所有|`boolean`|`false`|2.18.0|\n|load-more|数据懒加载函数，传入时开启懒加载功能|`(record: TableData, done: (children?: TableData[]) => void) => void`|`-`|2.13.0|\n|filter-icon-align-left|筛选图标是否左对齐|`boolean`|`false`|2.13.0|\n|hide-expand-button-on-empty|是否在子树为空时隐藏展开按钮|`boolean`|`false`|2.14.0|\n|row-class|表格行元素的类名。`2.34.0` 版本增加函数值支持|`string\\| any[]\\| Record<string, any>\\| ((record: TableData, rowIndex: number) => any)`|`-`|2.16.0|\n|draggable|表格拖拽排序的配置|`TableDraggable`|`-`|2.16.0|\n|column-resizable|是否允许调整列宽|`boolean`|`false`|2.16.0|\n|summary|显示表尾总结行|`boolean\\| ((params: {    columns: TableColumnData[];    data: TableData[];  }) => TableData[])`|`-`|2.21.0|\n|summary-text|总结行的首列文字|`string`|`'Summary'`|2.21.0|\n|summary-span-method|总结行的单元格合并方法|`(data: {  record: TableData;  column: TableColumnData \\| TableOperationColumn;  rowIndex: number;  columnIndex: number;}) => { rowspan?: number; colspan?: number } \\| void`|`-`|2.21.0|\n|selected-keys|已选择的行（受控模式）优先于 `rowSelection`|`(string \\| number)[]`|`-`|2.25.0|\n|default-selected-keys|默认已选择的行（非受控模式）优先于 `rowSelection`|`(string \\| number)[]`|`-`|2.25.0|\n|expanded-keys|显示的展开行、子树（受控模式）优先于 `expandable`|`(string \\| number)[]`|`-`|2.25.0|\n|default-expanded-keys|默认显示的展开行、子树（非受控模式）优先于 `expandable`|`(string \\| number)[]`|`-`|2.25.0|\n|default-expand-all-rows|是否默认展开所有的行|`boolean`|`false`|2.25.0|\n|sticky-header|是否开启表头吸顶|`boolean\\|number`|`false`|2.30.0|\n|scrollbar|是否开启虚拟滚动条|`boolean \\| ScrollbarProps`|`true`|2.38.0|\n|show-empty-tree|是否展示空子树|`boolean`|`false`|2.51.0|\n### `<table>` Events\n\n|事件名|描述|参数|版本|\n|---|---|---|:---|\n|expand|点击展开行时触发|rowKey: `string \\| number`<br>record: `TableData`||\n|expanded-change|已展开的数据行发生改变时触发|rowKeys: `(string \\| number)[]`||\n|select|点击行选择器时触发|rowKeys: `string \\| number[]`<br>rowKey: `string \\| number`<br>record: `TableData`||\n|select-all|点击全选选择器时触发|checked: `boolean`||\n|selection-change|已选择的数据行发生改变时触发|rowKeys: `(string \\| number)[]`||\n|sorter-change|排序规则发生改变时触发|dataIndex: `string`<br>direction: `string`||\n|filter-change|过滤选项发生改变时触发|dataIndex: `string`<br>filteredValues: `string[]`||\n|page-change|表格分页发生改变时触发|page: `number`||\n|page-size-change|表格每页数据数量发生改变时触发|pageSize: `number`||\n|change|表格数据发生变化时触发|data: `TableData[]`<br>extra: `TableChangeExtra`<br>currentData: `TableData[]`|2.40.0 增加 currentData|\n|cell-mouse-enter|单元格 hover 进入时触发|record: `TableData`<br>column: `TableColumnData`<br>ev: `Event`||\n|cell-mouse-leave|单元格 hover 退出时触发|record: `TableData`<br>column: `TableColumnData`<br>ev: `Event`||\n|cell-click|点击单元格时触发|record: `TableData`<br>column: `TableColumnData`<br>ev: `Event`||\n|row-click|点击行数据时触发|record: `TableData`<br>ev: `Event`||\n|header-click|点击表头数据时触发|column: `TableColumnData`<br>ev: `Event`||\n|column-resize|调整列宽时触发|dataIndex: `string`<br>width: `number`|2.28.0|\n|row-dblclick|双击行数据时触发|record: `TableData`<br>ev: `Event`||\n|cell-dblclick|双击单元格时触发|record: `TableData`<br>column: `TableColumnData`<br>ev: `Event`||\n|row-contextmenu|右击行数据时触发|record: `TableData`<br>ev: `Event`||\n|cell-contextmenu|右击单元格时触发|record: `TableData`<br>column: `TableColumnData`<br>ev: `Event`||\n### `<table>` Methods\n\n|方法名|描述|参数|返回值|版本|\n|---|---|---|---|:---|\n|selectAll|设置全选状态|checked: ` boolean `|-|2.22.0|\n|select|设置行选择器状态|rowKey: ` string \\| number \\| (string \\| number)[] `<br>checked: ` boolean `|-|2.31.0|\n|expandAll|设置全部展开状态|checked: ` boolean `|-|2.31.0|\n|expand|设置展开状态|rowKey: ` string \\| number \\| (string \\| number)[] `<br>checked: ` boolean `|-|2.31.0|\n|resetFilters|重置列的筛选器|dataIndex: ` string \\| string[] `|-|2.31.0|\n|clearFilters|清空列的筛选器|dataIndex: ` string \\| string[] `|-|2.31.0|\n|resetSorters|重置列的排序|-|-|2.31.0|\n|clearSorters|清空列的排序|-|-|2.31.0|\n### `<table>` Slots\n\n|插槽名|描述|参数|版本|\n|---|:---:|---|:---|\n|th|自定义 th 元素|column: `TableColumnData`|2.26.0|\n|thead|自定义 thead 元素|-|2.26.0|\n|empty|空白展示|-||\n|summary-cell|总结行|column: `TableColumnData`<br>record: `TableData`<br>rowIndex: `number`|2.23.0|\n|pagination-right|分页器右侧内容|-|2.18.0|\n|pagination-left|分页器左侧内容|-|2.18.0|\n|td|自定义 td 元素|column: `TableColumnData`<br>record: `TableData`<br>rowIndex: `number`|2.16.0|\n|tr|自定义 tr 元素|record: `TableData`<br>rowIndex: `number`|2.16.0|\n|tbody|自定义 tbody 元素|-|2.16.0|\n|drag-handle-icon|拖拽锚点图标|-|2.16.0|\n|footer|表格底部|-||\n|expand-row|展开行内容|record: `TableData`||\n|expand-icon|展开行图标|expanded: `boolean`<br>record: `TableData`||\n|columns|表格列定义。启用时会屏蔽 columns 属性|-||\n\n\n\n\n### `<table-column>` Props\n\n|参数名|描述|类型|默认值|版本|\n|---|---|---|:---:|:---|\n|data-index|列信息的标识，对应TableData中的数据|`string`|`-`||\n|title|列标题|`string`|`-`||\n|width|列宽度|`number`|`-`||\n|min-width|最小列宽|`number`|`-`||\n|align|对齐方向|`TableColumnData['align']`|`-`||\n|fixed|固定位置|`TableColumnData['fixed']`|`-`||\n|ellipsis|是否显示为省略|`boolean`|`false`||\n|sortable|排序相关选项|`TableSortable`|`-`||\n|filterable|过滤相关选项|`TableFilterable`|`-`||\n|cell-class|自定义单元格类名|`ClassName`|`-`|2.36.0|\n|header-cell-class|自定义表头单元格类名|`ClassName`|`-`|2.36.0|\n|body-cell-class|自定义内容单元格类名|`ClassName \\| ((record: TableData) => ClassName)`|`-`|2.36.0|\n|summary-cell-class|自定义总结栏单元格类名|`ClassName \\| ((record: TableData) => ClassName)`|`-`|2.36.0|\n|cell-style|自定义单元格样式|`CSSProperties`|`-`|2.11.0|\n|header-cell-style|自定义表头单元格样式|`CSSProperties`|`-`|2.29.0|\n|body-cell-style|自定义内容单元格样式|`CSSProperties \\| ((record: TableData) => CSSProperties)`|`-`|2.29.0|\n|summary-cell-style|自定义总结栏单元格样式|`CSSProperties \\| ((record: TableData) => CSSProperties)`|`-`|2.30.0|\n|index|用于手动指定选项的 index。2.26.0 版本后不再需要手动指定|`number`|`-`|2.20.2|\n|tooltip|在省略时是否显示文字提示|`boolean\\|object`|`false`|2.26.0|\n### `<table-column>` Slots\n\n|插槽名|描述|参数|版本|\n|---|:---:|---|:---|\n|filter-icon|筛选按钮图标|-|2.23.0|\n|filter-content|自定义筛选弹出框内容|filterValue: `string[]`<br>setFilterValue: `(filterValue: string[]) => void`<br>handleFilterConfirm: `(event: Event) => void`<br>handleFilterReset: `(event: Event) => void`|2.23.0|\n|title|标题|-||\n|cell|单元格|record: `TableData`<br>column: `TableColumnData`<br>rowIndex: `number`||\n\n\n\n## Type\n\n```ts\ntype Filters = Record<string, string[]>;\n\ntype Sorter = { filed: string; direction: 'ascend' | 'descend' } | Record<string, never>;\n```\n\n\n### TableData\n\n|参数名|描述|类型|默认值|版本|\n|---|---|---|:---:|:---|\n|key|数据行的key|`string`|`-`||\n|expand|扩展行内容|`string \\| RenderFunction`|`-`||\n|children|子数据|`TableData[]`|`-`||\n|disabled|是否禁用行选择器|`boolean`|`false`||\n|isLeaf|是否是叶子节点|`boolean`|`false`|2.13.0|\n\n\n\n### TableSortable\n\n|参数名|描述|类型|默认值|\n|---|---|---|:---:|\n|sortDirections|支持的排序方向|`('ascend' \\| 'descend')[]`|`-`|\n|sorter|排序函数。设置为 `true` 可关闭内部排序。2.19.0 版本修改传出数据。|`((        a: TableData,        b: TableData,        extra: { dataIndex: string; direction: 'ascend' \\| 'descend' }      ) => number)    \\| boolean`|`-`|\n|sortOrder|排序方向|`'ascend' \\| 'descend' \\| ''`|`-`|\n|defaultSortOrder|默认排序方向（非受控模式）|`'ascend' \\| 'descend' \\| ''`|`-`|\n\n\n\n### TableFilterData\n\n|参数名|描述|类型|默认值|\n|---|---|---|:---:|\n|text|筛选数据选项的内容|`string \\| RenderFunction`|`-`|\n|value|筛选数据选项的值|`string`|`-`|\n\n\n\n### TableFilterable\n\n|参数名|描述|类型|默认值|版本|\n|---|---|---|:---:|:---|\n|filters|筛选数据|`TableFilterData[]`|`-`||\n|filter|筛选函数|`(filteredValue: string[], record: TableData) => boolean`|`-`||\n|multiple|是否支持多选|`boolean`|`false`||\n|filteredValue|筛选项|`string[]`|`-`||\n|defaultFilteredValue|默认筛选项|`string[]`|`-`||\n|renderContent|筛选框的内容|`(data: {    filterValue: string[];    setFilterValue: (filterValue: string[]) => void;    handleFilterConfirm: (event: Event) => void;    handleFilterReset: (event: Event) => void;  }) => VNodeChild`|`-`||\n|icon|筛选按钮的图标|`RenderFunction`|`-`||\n|triggerProps|筛选框的弹出框配置|`TriggerProps`|`-`||\n|alignLeft|筛选图标是否左对齐|`boolean`|`false`|2.13.0|\n\n\n\n### TableColumnData\n\n|参数名|描述|类型|默认值|版本|\n|---|---|---|:---:|:---|\n|dataIndex|列信息的标识，对应 `TableData` 中的数据|`string`|`-`||\n|title|列标题|`string \\| RenderFunction`|`-`||\n|width|列宽度|`number`|`-`||\n|minWidth|最小列宽|`number`|`-`||\n|align|对齐方向|`'left' \\| 'center' \\| 'right'`|`-`||\n|fixed|固定位置|`'left' \\| 'right'`|`-`||\n|ellipsis|是否显示省略号|`boolean`|`false`||\n|tooltip|是否在显示省略号时显示文本提示。可填入 tooltip 组件属性|`boolean \\| Record<string, any>`|`-`|2.26.0|\n|sortable|排序相关选项|`TableSortable`|`-`||\n|filterable|过滤相关选项|`TableFilterable`|`-`||\n|children|表头子数据，用于表头分组|`TableColumnData[]`|`-`||\n|cellClass|自定义单元格类名|`ClassName`|`-`|2.36.0|\n|headerCellClass|自定义表头单元格类名|`ClassName`|`-`|2.36.0|\n|bodyCellClass|自定义内容单元格类名|`ClassName \\| ((record: TableData) => ClassName)`|`-`|2.36.0|\n|summaryCellClass|自定义总结栏单元格类名|`ClassName \\| ((record: TableData) => ClassName)`|`-`|2.36.0|\n|cellStyle|自定义单元格样式|`CSSProperties`|`-`|2.11.0|\n|headerCellStyle|自定义表头单元格样式|`CSSProperties`|`-`|2.29.0|\n|bodyCellStyle|自定义内容单元格样式|`CSSProperties \\| ((record: TableData) => CSSProperties)`|`-`|2.29.0|\n|summaryCellStyle|自定义总结栏单元格样式|`CSSProperties \\| ((record: TableData) => CSSProperties)`|`-`|2.30.0|\n|render|自定义列单元格的渲染|`(data: {    record: TableData;    column: TableColumnData;    rowIndex: number;  }) => VNodeChild`|`-`||\n|slotName|设置当前列的渲染插槽的名字。插槽参数同 #cell|`string`|`-`|2.18.0|\n|titleSlotName|设置当前列的标题的渲染插槽的名字|`string`|`-`|2.23.0|\n\n\n\n### TableBorder\n\n|参数名|描述|类型|默认值|\n|---|---|---|:---:|\n|wrapper|是否展示外边框|`boolean`|`false`|\n|cell|是否展示单元格边框（表头+主体）|`boolean`|`false`|\n|headerCell|是否展示表头单元格边框|`boolean`|`false`|\n|bodyCell|是否展示主体单元格边框|`boolean`|`false`|\n\n\n\n### TableRowSelection\n\n|参数名|描述|类型|默认值|版本|\n|---|---|---|:---:|:---|\n|type|行选择器的类型|`'checkbox' \\| 'radio'`|`-`||\n|selectedRowKeys|已选择的行（受控模式）|`BaseType[]`|`-`||\n|defaultSelectedRowKeys|默认已选择的行（非受控模式）|`BaseType[]`|`-`||\n|showCheckedAll|是否显示全选选择器|`boolean`|`false`||\n|title|列标题|`string`|`-`||\n|width|列宽度|`number`|`-`||\n|fixed|是否固定|`boolean`|`false`||\n|checkStrictly|是否开启严格选择模式|`boolean`|`true`|2.29.0|\n|onlyCurrent|是否仅展示当前页的 keys（切换分页时清空 keys）|`boolean`|`false`|2.32.0|\n\n\n\n### TableExpandable\n\n|参数名|描述|类型|默认值|\n|---|---|---|:---:|\n|expandedRowKeys|显示的展开行（受控模式）|`BaseType[]`|`-`|\n|defaultExpandedRowKeys|默认显示的展开行（非受控模式）|`BaseType[]`|`-`|\n|defaultExpandAllRows|是否默认展开所有的行|`boolean`|`false`|\n|expandedRowRender|自定义展开行内容|`(record: TableData) => VNodeChild`|`-`|\n|icon|展开图标|`(expanded: boolean, record: TableData) => VNodeChild`|`-`|\n|title|列标题|`string`|`-`|\n|width|列宽度|`number`|`-`|\n|fixed|是否固定|`boolean`|`false`|\n\n\n\n### TableDraggable\n\n|参数名|描述|类型|默认值|\n|---|---|---|:---:|\n|type|拖拽类型|`'row' \\| 'handle'`|`-`|\n|title|列标题|`string`|`-`|\n|width|列宽度|`number`|`-`|\n|fixed|是否固定|`boolean`|`false`|\n\n\n\n### TableChangeExtra\n\n|参数名|描述|类型|默认值|\n|---|---|---|:---:|\n|type|触发类型|`'pagination' \\| 'sorter' \\| 'filter' \\| 'drag'`|`-`|\n|page|页码|`number`|`-`|\n|pageSize|每页数据数|`number`|`-`|\n|sorter|排序信息|`Sorter`|`-`|\n|filters|筛选信息|`Filters`|`-`|\n|dragTarget|拖拽信息|`TableData`|`-`|\n\n\n\n\n### VirtualListProps\n\n|参数名|描述|类型|默认值|版本|\n|---|---|---|:---:|:---|\n|height|可视区域高度|`number \\| string`|`-`||\n|threshold|开启虚拟滚动的元素数量阈值，当数据数量小于阈值时不会开启虚拟滚动。|`number`|`-`||\n|isStaticItemHeight|（已废除）元素高度是否是固定的。2.34.1 版本废除，请使用 `fixedSize`|`boolean`|`false`||\n|fixedSize|元素高度是否是固定的。|`boolean`|`false`|2.34.1|\n|estimatedSize|元素高度不固定时的预估高度。|`number`|`-`|2.34.1|\n|buffer|视口边界外提前挂载的元素数量。|`number`|`10`|2.34.1|\n\n\n\n## FAQ\n\n### 1. 关于元素插槽的使用\n\ntable 组件提供了内部元素的自定义插槽，这些插槽不同于普通插槽，对用户传入的内容有一定限制。\n因为 vue 的插槽没有提供传出 children 并在 slot 中渲染的方式，我们针对 table 中的元素插槽，做了一些特殊处理，会在用户传入的内容中，附加上原有的 children，保证子元素的正常渲染。\n此时需要用户注意，在元素插槽中自定义渲染时，需要传入单一空元素使用，不能在传入的元素中添加内容（参考例 1）。\n如果用户需要传入复合元素，可以自定义组件，并指定 default 插槽，然后传入 table 的元素插槽中（参考例 2）。\n\n例 1：\n```vue\n<!-- Only one element -->\n<template>\n  <a-table>\n    <template #td>\n      <td @click=\"onClick\"></td>\n    </template>\n  </a-table>\n</template>\n```\n例 2：\n```vue\n<!-- Only one component -->\n<template>\n  <a-table>\n    <template #td>\n      <MyTd></MyTd>\n    </template>\n  </a-table>\n</template>\n```\n```vue\n<!-- MyTd.vue -->\n<template>\n  <td>\n    <div>my td content</div>\n    <div>\n      <slot/>\n    </div>\n  </td>\n</template>\n```\n\n### 2. 关于数据中的 `row-key` 设置\n\n表格默认会通过数据中设置的 `key` 字段来唯一定位行数据，在提供数据时请确保行数据中都设置了 `key` 字段。这个字段在开启选择器等功能时为必要字段，如果想要更换默认的字段名，可以修改 `row-key` 进行设置。\n\n\n"
  },
  {
    "path": "packages/web-vue/components/table/TEMPLATE.md",
    "content": "## zh-CN\n```yaml\nmeta:\n  type: 组件\n  category: 数据展示\ntitle: 表格 Table\ndescription: 用于数据收集展示、分析整理、操作处理。\n```\n---\n## en-US\n```yaml\nmeta:\n  type: Component\n  category: Data Display\ntitle: Table\ndescription: It is used for data collection, display, analysis and processing, and operation and processing.\n```\n---\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/row-selection.md\n\n@import ./__demo__/radio.md\n\n@import ./__demo__/expand.md\n\n@import ./__demo__/ellipsis.md\n\n@import ./__demo__/subtree.md\n\n@import ./__demo__/lazy-load.md\n\n@import ./__demo__/props.md\n\n@import ./__demo__/sort.md\n\n@import ./__demo__/filter.md\n\n@import ./__demo__/scroll.md\n\n@import ./__demo__/fixed.md\n\n@import ./__demo__/span.md\n\n@import ./__demo__/sticky.md\n\n@import ./__demo__/summary.md\n\n@import ./__demo__/resize.md\n\n@import ./__demo__/drag-row.md\n\n@import ./__demo__/drag-handle.md\n\n@import ./__demo__/group.md\n\n@import ./__demo__/fixed-group.md\n\n@import ./__demo__/editable.md\n\n@import ./__demo__/custom.md\n\n@import ./__demo__/custom-dom.md\n\n@import ./__demo__/virtual-list.md\n\n## API\n\n%%API(table.tsx)%%\n\n%%API(table-column.tsx)%%\n\n## Type\n\n```ts\ntype Filters = Record<string, string[]>;\n\ntype Sorter = { filed: string; direction: 'ascend' | 'descend' } | Record<string, never>;\n```\n\n%%INTERFACE(interface.ts)%%\n\n%%INTERFACE(../_components/virtual-list-v2/interface.ts)%%\n\n## FAQ\n\n## zh-CN\n### 1. 关于元素插槽的使用\n\ntable 组件提供了内部元素的自定义插槽，这些插槽不同于普通插槽，对用户传入的内容有一定限制。\n因为 vue 的插槽没有提供传出 children 并在 slot 中渲染的方式，我们针对 table 中的元素插槽，做了一些特殊处理，会在用户传入的内容中，附加上原有的 children，保证子元素的正常渲染。\n此时需要用户注意，在元素插槽中自定义渲染时，需要传入单一空元素使用，不能在传入的元素中添加内容（参考例 1）。\n如果用户需要传入复合元素，可以自定义组件，并指定 default 插槽，然后传入 table 的元素插槽中（参考例 2）。\n\n例 1：\n```vue\n<!-- Only one element -->\n<template>\n  <a-table>\n    <template #td>\n      <td @click=\"onClick\"></td>\n    </template>\n  </a-table>\n</template>\n```\n例 2：\n```vue\n<!-- Only one component -->\n<template>\n  <a-table>\n    <template #td>\n      <MyTd></MyTd>\n    </template>\n  </a-table>\n</template>\n```\n```vue\n<!-- MyTd.vue -->\n<template>\n  <td>\n    <div>my td content</div>\n    <div>\n      <slot/>\n    </div>\n  </td>\n</template>\n```\n\n### 2. 关于数据中的 `row-key` 设置\n\n表格默认会通过数据中设置的 `key` 字段来唯一定位行数据，在提供数据时请确保行数据中都设置了 `key` 字段。这个字段在开启选择器等功能时为必要字段，如果想要更换默认的字段名，可以修改 `row-key` 进行设置。\n\n---\n\n\n## en-US\nThe table component provides custom slots for internal elements, which are different from normal slots and have certain restrictions on what the user can pass in.\nBecause the slot of vue does not provide a way to send out children and render them in the slot, we have done some special processing for the element slot in the table, and will append the original children to the content passed in by the user to ensure that children Normal rendering of the element.\nAt this point, the user needs to pay attention that when custom rendering in the element slot, a single empty element needs to be passed in, and content cannot be added to the passed in element (refer to Example 1).\nIf the user needs to pass in a composite element, he can customize the component, specify the default slot, and then pass it into the element slot of the table (refer to Example 2).\n\nexample 1:\n```vue\n<!-- Only one element -->\n<template>\n  <a-table>\n    <template #td>\n      <td @click=\"onClick\"></td>\n    </template>\n  </a-table>\n</template>\n```\nexample 2：\n```vue\n<!-- Only one component -->\n<template>\n  <a-table>\n    <template #td>\n      <MyTd></MyTd>\n    </template>\n  </a-table>\n</template>\n```\n```vue\n<!-- MyTd.vue -->\n<template>\n  <td>\n    <div>my td content</div>\n    <div>\n      <slot/>\n    </div>\n  </td>\n</template>\n```\n\n### 2. About the `row-key` setting in the data\n\nBy default, the table will uniquely locate the row data through the `key` field set in the data. When providing data, please ensure that the `key` field is set in the row data. This field is a necessary field when enabling functions such as selectors. If you want to change the default field name, you can modify `row-key` to set it.\n\n---\n"
  },
  {
    "path": "packages/web-vue/components/table/__demo__/basic.md",
    "content": "```yaml\ntitle:\n  zh-CN: 基本用法\n  en-US: Basic Usage\n```\n\n## zh-CN\n\n表格的基本用法，需要传递 `columns` 和 `data`。\n\n---\n\n## en-US\n\nFor the basic usage of the table, you need to pass `columns` and `data`.\n\n---\n\n```vue\n<template>\n  <a-table :columns=\"columns\" :data=\"data\" />\n</template>\n\n<script>\nimport { reactive } from 'vue';\n\nexport default {\n  setup() {\n    const columns = [\n      {\n        title: 'Name',\n        dataIndex: 'name',\n      },\n      {\n        title: 'Salary',\n        dataIndex: 'salary',\n      },\n      {\n        title: 'Address',\n        dataIndex: 'address',\n      },\n      {\n        title: 'Email',\n        dataIndex: 'email',\n      },\n    ];\n    const data = reactive([{\n      key: '1',\n      name: 'Jane Doe',\n      salary: 23000,\n      address: '32 Park Road, London',\n      email: 'jane.doe@example.com'\n    }, {\n      key: '2',\n      name: 'Alisa Ross',\n      salary: 25000,\n      address: '35 Park Road, London',\n      email: 'alisa.ross@example.com'\n    }, {\n      key: '3',\n      name: 'Kevin Sandra',\n      salary: 22000,\n      address: '31 Park Road, London',\n      email: 'kevin.sandra@example.com'\n    }, {\n      key: '4',\n      name: 'Ed Hellen',\n      salary: 17000,\n      address: '42 Park Road, London',\n      email: 'ed.hellen@example.com'\n    }, {\n      key: '5',\n      name: 'William Smith',\n      salary: 27000,\n      address: '62 Park Road, London',\n      email: 'william.smith@example.com'\n    }]);\n\n    return {\n      columns,\n      data\n    }\n  },\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/table/__demo__/custom-dom.md",
    "content": "```yaml\ntitle:\n  zh-CN: 自定义表格元素\n  en-US: Custom Table Element\n```\n\n## zh-CN\n\n可以通过特定插槽自定义表格元素的渲染。仅需要传入表格元素，内部属性会自动附加上去\n\n---\n\n## en-US\n\nThe rendering of table elements can be customized through specific slots. Only need to pass in the table element, the\ninternal attributes will be automatically attached\n\n---\n\n```vue\n<template>\n  <a-table :columns=\"columns\" :data=\"data\" row-class=\"common-row\">\n    <template #tr>\n      <tr class=\"my-tr\" @contextmenu=\"onContextMenu\" />\n    </template>\n    <template #td>\n      <td class=\"my-td\" />\n    </template>\n  </a-table>\n</template>\n\n<script>\nexport default {\n  setup() {\n    const onContextMenu = () => {\n      console.log('right click')\n    }\n\n    const columns = [{\n      title: 'Name',\n      dataIndex: 'name',\n    }, {\n      title: 'Salary',\n      dataIndex: 'salary',\n    }, {\n      title: 'Address',\n      dataIndex: 'address',\n    }, {\n      title: 'Email',\n      dataIndex: 'email',\n    }];\n    const data = [{\n      key: '1',\n      name: 'Jane Doe',\n      salary: 23000,\n      address: '32 Park Road, London',\n      email: 'jane.doe@example.com'\n    }, {\n      key: '2',\n      name: 'Alisa Ross',\n      salary: 25000,\n      address: '35 Park Road, London',\n      email: 'alisa.ross@example.com'\n    }, {\n      key: '3',\n      name: 'Kevin Sandra',\n      salary: 22000,\n      address: '31 Park Road, London',\n      email: 'kevin.sandra@example.com'\n    }, {\n      key: '4',\n      name: 'Ed Hellen',\n      salary: 17000,\n      address: '42 Park Road, London',\n      email: 'ed.hellen@example.com'\n    }, {\n      key: '5',\n      name: 'William Smith',\n      salary: 27000,\n      address: '62 Park Road, London',\n      email: 'william.smith@example.com'\n    }];\n\n    return {\n      columns,\n      data,\n      onContextMenu,\n    }\n  },\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/table/__demo__/custom.md",
    "content": "```yaml\ntitle:\n  zh-CN: 自定义渲染\n  en-US: Custom Columns\n```\n\n## zh-CN\n\n通过 `#columns` 插槽和 `<a-table-column>` 组件可以使用模板的方法自定义列渲染。\n**注意**：在使用 `#columns` 插槽后，将会屏蔽 `columns` 属性\n\n---\n\n## en-US\n\nWith the `#columns` slot and the `<a-table-column>` component, you can customize the column rendering using the template\nmethod.\n**Note**: After using the `#columns` slot, the `columns` attribute will be blocked\n\n---\n\n```vue\n<template>\n  <a-table :columns=\"columns\" :data=\"data\">\n    <template #optional=\"{ record }\">\n      <a-button @click=\"$modal.info({ title:'Name', content:record.name })\">view</a-button>\n    </template>\n  </a-table>\n  <a-table :data=\"data\" style=\"margin-top: 30px\">\n    <template #columns>\n      <a-table-column title=\"Name\">\n        <a-table-column title=\"First Name\" data-index=\"first\"></a-table-column>\n        <a-table-column title=\"Last Name\" data-index=\"last\"></a-table-column>\n      </a-table-column>\n      <a-table-column title=\"Salary\" data-index=\"salary\"></a-table-column>\n      <a-table-column title=\"Address\" data-index=\"address\"></a-table-column>\n      <a-table-column title=\"Email\" data-index=\"email\"></a-table-column>\n      <a-table-column title=\"Optional\">\n        <template #cell=\"{ record }\">\n          <a-button @click=\"$modal.info({ title:'Name', content:record.name })\">view</a-button>\n        </template>\n      </a-table-column>\n    </template>\n  </a-table>\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n  setup() {\n    const show = ref(true)\n\n    const columns = [{\n      title: 'Name',\n      dataIndex: 'name',\n    }, {\n      title: 'Salary',\n      dataIndex: 'salary',\n    }, {\n      title: 'Address',\n      dataIndex: 'address',\n    }, {\n      title: 'Email',\n      dataIndex: 'email',\n    }, {\n      title: 'Optional',\n      slotName: 'optional'\n    }];\n    const data = [{\n      key: '1',\n      name: 'Jane Doe',\n      first: 'Jane',\n      last: 'Doe',\n      salary: 23000,\n      address: '32 Park Road, London',\n      email: 'jane.doe@example.com'\n    }, {\n      key: '2',\n      name: 'Alisa Ross',\n      first: 'Alisa',\n      last: 'Ross',\n      salary: 25000,\n      address: '35 Park Road, London',\n      email: 'alisa.ross@example.com'\n    }, {\n      key: '3',\n      name: 'Kevin Sandra',\n      first: 'Kevin',\n      last: 'Sandra',\n      salary: 22000,\n      address: '31 Park Road, London',\n      email: 'kevin.sandra@example.com'\n    }, {\n      key: '4',\n      name: 'Ed Hellen',\n      first: 'Ed',\n      last: 'Hellen',\n      salary: 17000,\n      address: '42 Park Road, London',\n      email: 'ed.hellen@example.com'\n    }, {\n      key: '5',\n      name: 'William Smith',\n      first: 'William',\n      last: 'Smith',\n      salary: 27000,\n      address: '62 Park Road, London',\n      email: 'william.smith@example.com'\n    }];\n\n    return {\n      columns,\n      data,\n      show\n    }\n  },\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/table/__demo__/drag-handle.md",
    "content": "```yaml\ntitle:\n  zh-CN: 拖拽锚点\n  en-US: Drag handle\n```\n\n## zh-CN\n\n（实验性）\n开启锚点拖拽功能\n\n---\n\n## en-US\n\n(experimental)\nEnable anchor dragging\n\n---\n\n```vue\n<template>\n  <a-table :columns=\"columns\" :data=\"data\" @change=\"handleChange\" :draggable=\"{ type: 'handle', width: 40 }\" />\n</template>\n\n<script>\nimport { reactive, ref } from 'vue';\n\nexport default {\n  setup() {\n    const columns = reactive([\n      {\n        title: 'Name',\n        dataIndex: 'name',\n      },\n      {\n        title: 'Salary',\n        dataIndex: 'salary',\n      },\n      {\n        title: 'Address',\n        dataIndex: 'address',\n      },\n      {\n        title: 'Email',\n        dataIndex: 'email',\n      },\n    ]);\n    const data = ref([{\n      key: '1',\n      name: 'Jane Doe',\n      salary: 23000,\n      address: '32 Park Road, London',\n      email: 'jane.doe@example.com'\n    }, {\n      key: '2',\n      name: 'Alisa Ross',\n      salary: 25000,\n      address: '35 Park Road, London',\n      email: 'alisa.ross@example.com'\n    }, {\n      key: '3',\n      name: 'Kevin Sandra',\n      salary: 22000,\n      address: '31 Park Road, London',\n      email: 'kevin.sandra@example.com'\n    }, {\n      key: '4',\n      name: 'Ed Hellen',\n      salary: 17000,\n      address: '42 Park Road, London',\n      email: 'ed.hellen@example.com'\n    }, {\n      key: '5',\n      name: 'William Smith',\n      salary: 27000,\n      address: '62 Park Road, London',\n      email: 'william.smith@example.com'\n    }]);\n    const handleChange = (_data) => {\n      console.log(_data);\n      data.value = _data\n    }\n\n    return {\n      columns,\n      data,\n      handleChange\n    }\n  },\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/table/__demo__/drag-row.md",
    "content": "```yaml\ntitle:\n  zh-CN: 可拖拽表格\n  en-US: Draggable table\n```\n\n## zh-CN\n\n（实验性）\n开启表格行可拖拽功能\n\n---\n\n## en-US\n\n(experimental)\nEnable drag and drop function of table rows\n\n---\n\n```vue\n<template>\n  <a-table :columns=\"columns\" :data=\"data\" @change=\"handleChange\" :draggable=\"{}\"></a-table>\n</template>\n\n<script>\nimport { reactive, ref } from 'vue';\n\nexport default {\n  setup() {\n    const columns = reactive([\n      {\n        title: 'Name',\n        dataIndex: 'name',\n      },\n      {\n        title: 'Salary',\n        dataIndex: 'salary',\n      },\n      {\n        title: 'Address',\n        dataIndex: 'address',\n      },\n      {\n        title: 'Email',\n        dataIndex: 'email',\n      },\n    ]);\n    const data = ref([{\n      key: '1',\n      name: 'Jane Doe',\n      salary: 23000,\n      address: '32 Park Road, London',\n      email: 'jane.doe@example.com'\n    }, {\n      key: '2',\n      name: 'Alisa Ross',\n      salary: 25000,\n      address: '35 Park Road, London',\n      email: 'alisa.ross@example.com'\n    }, {\n      key: '3',\n      name: 'Kevin Sandra',\n      salary: 22000,\n      address: '31 Park Road, London',\n      email: 'kevin.sandra@example.com'\n    }, {\n      key: '4',\n      name: 'Ed Hellen',\n      salary: 17000,\n      address: '42 Park Road, London',\n      email: 'ed.hellen@example.com'\n    }, {\n      key: '5',\n      name: 'William Smith',\n      salary: 27000,\n      address: '62 Park Road, London',\n      email: 'william.smith@example.com'\n    }]);\n    const handleChange = (_data) => {\n      console.log(_data);\n      data.value = _data\n    }\n\n    return {\n      columns,\n      data,\n      handleChange\n    }\n  },\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/table/__demo__/editable.md",
    "content": "```yaml\ntitle:\n  zh-CN: 可编辑表格\n  en-US: Editable\n```\n\n## zh-CN\n\n可以在使用插槽获得的数据，修改 `data` 中的数据，达到可编辑表格的功能。\n`2.25.0` 版本后可以直接修改插槽传出的 `record` 变量。这个 `record` 变量是传入的 `data` 中对应数据的引用，请保证 `data` 为 Reactive 类型。\n\n---\n\n## en-US\n\nYou can use the data obtained from the slot to modify the data in `data` to achieve the function of editing the table.\nAfter the `2.25.0` version, you can directly modify the `record` variable from the slot. This `record` variable is a reference to the corresponding data in the incoming `data`, please make sure that `data` is of Reactive type.\n\n---\n\n```vue\n<template>\n  <a-table :columns=\"columns\" :data=\"data\">\n    <template #name=\"{ rowIndex }\">\n      <a-input v-model=\"data[rowIndex].name\" />\n    </template>\n    <template #province=\"{ rowIndex }\">\n      <a-select v-model=\"data[rowIndex].province\" @change=\"()=>handleChange(rowIndex)\">\n        <a-option v-for=\"value of Object.keys(options)\">{{value}}</a-option>\n      </a-select>\n    </template>\n    <template #city=\"{ rowIndex }\">\n      <a-select :options=\"options[data[rowIndex].province] || []\" v-model=\"data[rowIndex].city\" />\n    </template>\n  </a-table>\n  <!-- support from v2.25.0  -->\n  <a-table :columns=\"columns\" :data=\"data\" style=\"margin-top: 20px\">\n    <template #name=\"{ record, rowIndex }\">\n      <a-input v-model=\"record.name\" />\n    </template>\n    <template #province=\"{ record,rowIndex }\">\n      <a-select v-model=\"record.province\" @change=\"()=>{record.city=''}\">\n        <a-option v-for=\"value of Object.keys(options)\">{{value}}</a-option>\n      </a-select>\n    </template>\n    <template #city=\"{ record,rowIndex }\">\n      <a-select :options=\"options[record.province] || []\" v-model=\"record.city\" />\n    </template>\n  </a-table>\n</template>\n\n<script>\nimport { reactive } from 'vue';\n\nexport default {\n  setup() {\n    const options = {\n      Beijing: ['Haidian', 'Chaoyang', 'Changping'],\n      Sichuan: ['Chengdu', 'Mianyang', 'Aba'],\n      Guangdong: ['Guangzhou', 'Shenzhen', 'Shantou']\n    }\n    const columns = [{\n      title: 'Name',\n      dataIndex: 'name',\n      slotName: 'name'\n    }, {\n      title: 'Salary',\n      dataIndex: 'salary',\n    }, {\n      title: 'Address',\n      dataIndex: 'address',\n    }, {\n      title: 'Province',\n      dataIndex: 'province',\n      slotName: 'province'\n    }, {\n      title: 'City',\n      dataIndex: 'city',\n      slotName: 'city'\n    }, {\n      title: 'Email',\n      dataIndex: 'email',\n    }];\n\n    const data = reactive([{\n      key: '1',\n      name: 'Jane Doe',\n      salary: 23000,\n      address: '32 Park Road, London',\n      province: 'Beijing',\n      city: 'Haidian',\n      email: 'jane.doe@example.com'\n    }, {\n      key: '2',\n      name: 'Alisa Ross',\n      salary: 25000,\n      address: '35 Park Road, London',\n      email: 'alisa.ross@example.com'\n    }, {\n      key: '3',\n      name: 'Kevin Sandra',\n      salary: 22000,\n      address: '31 Park Road, London',\n      province: 'Sichuan',\n      city: 'Mianyang',\n      email: 'kevin.sandra@example.com'\n    }, {\n      key: '4',\n      name: 'Ed Hellen',\n      salary: 17000,\n      address: '42 Park Road, London',\n      email: 'ed.hellen@example.com'\n    }, {\n      key: '5',\n      name: 'William Smith',\n      salary: 27000,\n      address: '62 Park Road, London',\n      email: 'william.smith@example.com'\n    }]);\n\n    const handleChange = (rowIndex) => {\n      data[rowIndex].city = ''\n    }\n    return {\n      options,\n      columns,\n      data,\n      handleChange\n    }\n  },\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/table/__demo__/ellipsis.md",
    "content": "```yaml\ntitle:\n  zh-CN: 文本省略和提示\n  en-US: Ellipsis And Tooltip\n```\n\n## zh-CN\n\n开启 `ellipsis` 属性可以显示省略号，如果同时开启 `tooltip` 会在显示省略号时使用文本提示。注意：开启 `tooltip` 后会修改 `table-cell` 中的 DOM 结构。\n\n---\n\n## en-US\n\nEnable `ellipsis` property to display ellipsis, and also enable `tooltip` to use a text tip when displaying ellipses. Note: Enabling `tooltip` will modify the DOM structure in `table-cell`.\n\n---\n\n```vue\n<template>\n  <a-table :columns=\"columns\" :data=\"data\" />\n</template>\n\n<script>\nimport { reactive } from 'vue';\n\nexport default {\n  setup() {\n    const columns = [\n      {\n        title: 'Name',\n        dataIndex: 'name',\n        ellipsis: true,\n        tooltip: true,\n        width: 100\n      },\n      {\n        title: 'Salary',\n        dataIndex: 'salary',\n      },\n      {\n        title: 'Address',\n        dataIndex: 'address',\n        ellipsis: true,\n        width: 150,\n      },\n      {\n        title: 'Email',\n        dataIndex: 'email',\n        ellipsis: true,\n        tooltip: {position: 'left'},\n        width: 200,\n      },\n    ];\n    const data = reactive([{\n      key: '1',\n      name: 'Jane Doe',\n      salary: 23000,\n      address: '32 Park Road, London',\n      email: 'jane.doe@example.com'\n    }, {\n      key: '2',\n      name: 'Alisa Ross',\n      salary: 25000,\n      address: '35 Park Road, London',\n      email: 'alisa.ross@example.com'\n    }, {\n      key: '3',\n      name: 'Kevin Sandra',\n      salary: 22000,\n      address: '31 Park Road, London',\n      email: 'kevin.sandra@example.com'\n    }, {\n      key: '4',\n      name: 'Ed Hellen',\n      salary: 17000,\n      address: '42 Park Road, London',\n      email: 'ed.hellen@example.com'\n    }, {\n      key: '5',\n      name: 'William Smith',\n      salary: 27000,\n      address: '62 Park Road, London',\n      email: 'william.smith@example.com'\n    }]);\n\n    return {\n      columns,\n      data\n    }\n  },\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/table/__demo__/expand.md",
    "content": "```yaml\ntitle:\n  zh-CN: 展开行\n  en-US: Expand Row\n```\n\n## zh-CN\n\n通过设置 `expandable` 开启展开行功能。可以在 `data` 中添加 `expand` 属性，设置展开行显示内容。\n\n---\n\n## en-US\n\nEnable the expand line function by setting `expandable`. You can add the `expand` attribute to the `data` to set the expanded line display content.\n\n---\n\n```vue\n<template>\n  <a-table :columns=\"columns\" :data=\"data\" :expandable=\"expandable\" />\n</template>\n\n<script>\nimport { reactive } from 'vue';\n\nexport default {\n  setup() {\n    const expandable = reactive({\n      title: 'Expand',\n      width: 80,\n      expandedRowRender: (record) => {\n        if(record.key==='3'){\n          return `My Name is ${record.name}`\n        }\n      }\n    });\n\n    const columns = [\n      {\n        title: 'Name',\n        dataIndex: 'name',\n      },\n      {\n        title: 'Salary',\n        dataIndex: 'salary',\n      },\n      {\n        title: 'Address',\n        dataIndex: 'address',\n      },\n      {\n        title: 'Email',\n        dataIndex: 'email',\n      },\n    ];\n\n    const data = reactive([\n      {\n        key: '1',\n        name: 'Jane Doe',\n        salary: 23000,\n        address: '32 Park Road, London',\n        email: 'jane.doe@example.com',\n        expand: 'Expand Data'\n      }, {\n        key: '2',\n        name: 'Alisa Ross',\n        salary: 25000,\n        address: '35 Park Road, London',\n        email: 'alisa.ross@example.com'\n      }, {\n        key: '3',\n        name: 'Kevin Sandra',\n        salary: 22000,\n        address: '31 Park Road, London',\n        email: 'kevin.sandra@example.com'\n      }, {\n        key: '4',\n        name: 'Ed Hellen',\n        salary: 17000,\n        address: '42 Park Road, London',\n        email: 'ed.hellen@example.com'\n      }, {\n        key: '5',\n        name: 'William Smith',\n        salary: 27000,\n        address: '62 Park Road, London',\n        email: 'william.smith@example.com'\n      }\n    ]);\n\n    return {\n      columns,\n      expandable,\n      data\n    }\n  },\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/table/__demo__/filter.md",
    "content": "```yaml\ntitle:\n  zh-CN: 自定义筛选菜单\n  en-US: Custom Filter Content\n```\n\n## zh-CN\n\n通过插槽可以自定义筛选菜单内容。\n\n---\n\n## en-US\n\nThe filter menu content can be customized through the slot.\n\n---\n\n```vue\n\n<template>\n  <a-table :columns=\"columns\" :data=\"data\" @change=\"handleChange\">\n    <template #name-filter=\"{ filterValue, setFilterValue, handleFilterConfirm, handleFilterReset}\">\n      <div class=\"custom-filter\">\n        <a-space direction=\"vertical\">\n          <a-input :model-value=\"filterValue[0]\" @input=\"(value)=>setFilterValue([value])\" />\n          <div class=\"custom-filter-footer\">\n            <a-button @click=\"handleFilterConfirm\">Confirm</a-button>\n            <a-button @click=\"handleFilterReset\">Reset</a-button>\n          </div>\n        </a-space>\n      </div>\n    </template>\n  </a-table>\n</template>\n\n<script>\nimport { reactive, h } from 'vue';\nimport { IconSearch } from '@arco-design/web-vue/es/icon';\n\nexport default {\n  setup() {\n    const columns = [\n      {\n        title: 'Name',\n        dataIndex: 'name',\n        filterable: {\n          filter: (value, record) => record.name.includes(value),\n          slotName: 'name-filter',\n          icon: () => h(IconSearch)\n        }\n      },\n      {\n        title: 'Salary',\n        dataIndex: 'salary',\n        sortable: {\n          sortDirections: ['ascend']\n        },\n      },\n      {\n        title: 'Address',\n        dataIndex: 'address',\n      },\n      {\n        title: 'Email',\n        dataIndex: 'email',\n      },\n    ];\n    const data = reactive([{\n      key: '1',\n      name: 'Jane Doe',\n      salary: 23000,\n      address: '32 Park Road, London',\n      email: 'jane.doe@example.com'\n    }, {\n      key: '2',\n      name: 'Alisa Ross',\n      salary: 25000,\n      address: '35 Park Road, London',\n      email: 'alisa.ross@example.com'\n    }, {\n      key: '3',\n      name: 'Kevin Sandra',\n      salary: 22000,\n      address: '31 Park Road, London',\n      email: 'kevin.sandra@example.com'\n    }, {\n      key: '4',\n      name: 'Ed Hellen',\n      salary: 17000,\n      address: '42 Park Road, London',\n      email: 'ed.hellen@example.com'\n    }, {\n      key: '5',\n      name: 'William Smith',\n      salary: 27000,\n      address: '62 Park Road, London',\n      email: 'william.smith@example.com'\n    }]);\n\n    const handleChange = (data, extra, currentDataSource) => {\n      console.log('change', data, extra, currentDataSource)\n    }\n\n    return {\n      columns,\n      data,\n      handleChange\n    }\n  },\n}\n</script>\n\n<style>\n.custom-filter {\n  padding: 20px;\n  background: var(--color-bg-5);\n  border: 1px solid var(--color-neutral-3);\n  border-radius: var(--border-radius-medium);\n  box-shadow: 0 2px 5px rgb(0 0 0 / 10%);\n}\n\n.custom-filter-footer {\n  display: flex;\n  justify-content: space-between;\n}\n</style>\n```\n"
  },
  {
    "path": "packages/web-vue/components/table/__demo__/fixed-group.md",
    "content": "```yaml\ntitle:\n  zh-CN: 分组表头与固定列\n  en-US: Column Group & Fixed Column\n```\n\n## zh-CN\n\n分组表头使用固定列时，需要优先指定数据列为固定列。\n如果一个分组下的所有数据列都是固定列，此时可以设置分组列为固定列，宽度为子列宽度之和。\n\n---\n\n## en-US\n\nWhen a fixed column is used in the grouping header, the data column needs to be specified as a fixed column first.\nIf all data columns under a group are fixed columns, you can set the group column to be a fixed column, and the width is the sum of the widths of the sub-columns.\n\n---\n\n```vue\n<template>\n  <a-table :columns=\"columns\" :data=\"data\" :bordered=\"{cell:true}\" :scroll=\"{ x: 2000 }\"/>\n</template>\n\n<script>\nimport { reactive } from 'vue';\n\nexport default {\n  setup() {\n    const columns = [{\n      title: 'Name',\n      dataIndex: 'name',\n      fixed: 'left',\n      width: 140,\n    }, {\n      title: 'User Info',\n      children: [{\n        title: 'Birthday',\n        dataIndex: 'birthday',\n        fixed: 'left',\n        width: 200,\n      }, {\n        title: 'Address',\n        children: [{\n          title: 'City',\n          dataIndex: 'city',\n          fixed: 'left',\n          width: 100,\n        }, {\n          title: 'Road',\n          dataIndex: 'road',\n        }, {\n          title: 'No.',\n          dataIndex: 'no',\n        }]\n      }]\n    }, {\n      title: 'Information',\n      children: [{\n        title: 'Email',\n        dataIndex: 'email',\n      }, {\n        title: 'Phone',\n        dataIndex: 'phone',\n      }]\n    }, {\n      title: 'Salary',\n      dataIndex: 'salary',\n      fixed: 'right',\n      width: 120\n    }];\n    const data = reactive([{\n      key: '1',\n      name: 'Jane Doe',\n      salary: 23000,\n      birthday: '1994-04-21',\n      city: 'London',\n      road: 'Park',\n      no: '34',\n      phone: '12345678',\n      email: 'jane.doe@example.com'\n    }, {\n      key: '2',\n      name: 'Alisa Ross',\n      salary: 25000,\n      birthday: '1994-05-21',\n      city: 'London',\n      road: 'Park',\n      no: '37',\n      phone: '12345678',\n      email: 'alisa.ross@example.com'\n    }, {\n      key: '3',\n      name: 'Kevin Sandra',\n      salary: 22000,\n      birthday: '1992-02-11',\n      city: 'Paris',\n      road: 'Arco',\n      no: '67',\n      phone: '12345678',\n      email: 'kevin.sandra@example.com'\n    }, {\n      key: '4',\n      name: 'Ed Hellen',\n      salary: 17000,\n      birthday: '1991-06-21',\n      city: 'London',\n      road: 'Park',\n      no: '317',\n      phone: '12345678',\n      email: 'ed.hellen@example.com'\n    }, {\n      key: '5',\n      name: 'William Smith',\n      salary: 27000,\n      birthday: '1996-08-21',\n      city: 'Paris',\n      road: 'Park',\n      no: '114',\n      phone: '12345678',\n      email: 'william.smith@example.com'\n    }]);\n\n    return {\n      columns,\n      data\n    }\n  },\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/table/__demo__/fixed.md",
    "content": "```yaml\ntitle:\n  zh-CN: 固定列\n  en-US: Fixed Column\n```\n\n## zh-CN\n\n在 `columns` 中指定 `fixed: 'left'` 或 `fixed: 'right'`，可将列固定到左侧或右侧。设置了 `fixed` 的列必须设置 `width` 指定列的宽度。\n**注意**：要配合 `:scroll=\"{ x: number }\"` 使用。此外 `columns` 中至少需要有一列不设置宽度，自适应，不然会有样式问题。\n\n\n---\n\n## en-US\n\nSpecify `fixed:'left'` or `fixed:'right'` in `columns` to fix the column to the left or right. Columns with `fixed` must\nbe set to the width of the column specified by `width`.\n**Note**: Use with `:scroll=\"{ x: number }\"`. In addition, there must be at least one column in `columns` that does not\nset the width and is adaptive, otherwise there will be style problems.\n\n---\n\n```vue\n<template>\n  <a-table :columns=\"columns\" :data=\"data\" :scroll=\"scroll\" :expandable=\"expandable\" />\n</template>\n\n<script>\nimport { reactive } from 'vue';\n\nexport default {\n  setup() {\n    const columns = [\n      {\n        title: 'Name',\n        dataIndex: 'name',\n        fixed: 'left',\n        width: 140\n      },\n      {\n        title: 'Salary',\n        dataIndex: 'salary',\n      },\n      {\n        title: 'Address',\n        dataIndex: 'address',\n      },\n      {\n        title: 'Email',\n        dataIndex: 'email',\n        fixed: 'right',\n        width: 200\n      },\n    ];\n\n    const expandable = {\n      title: 'Expand',\n      width: 80,\n    }\n\n    const scroll = {\n      x: 2000,\n      y: 200\n    }\n\n    const data = reactive([\n      {\n        key: '1',\n        name: 'Jane Doe',\n        salary: 23000,\n        address: '32 Park Road, London',\n        email: 'jane.doe@example.com',\n        expand: 'Expand Content'\n      }, {\n        key: '2',\n        name: 'Alisa Ross',\n        salary: 25000,\n        address: '35 Park Road, London',\n        email: 'alisa.ross@example.com'\n      }, {\n        key: '3',\n        name: 'Kevin Sandra',\n        salary: 22000,\n        address: '31 Park Road, London',\n        email: 'kevin.sandra@example.com'\n      }, {\n        key: '4',\n        name: 'Ed Hellen',\n        salary: 17000,\n        address: '42 Park Road, London',\n        email: 'ed.hellen@example.com'\n      }, {\n        key: '5',\n        name: 'William Smith',\n        salary: 27000,\n        address: '62 Park Road, London',\n        email: 'william.smith@example.com'\n      }\n    ]);\n\n    return {\n      columns,\n      expandable,\n      scroll,\n      data\n    }\n  },\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/table/__demo__/group.md",
    "content": "```yaml\ntitle:\n  zh-CN: 分组表头\n  en-US: Column Group\n```\n\n## zh-CN\n\n`columns` 内可以设置 `children`，用于表头分组。\n\n---\n\n## en-US\n\n`Children` can be set in `columns` for header grouping.\n\n---\n\n```vue\n<template>\n  <a-table :columns=\"columns\" :data=\"data\" :bordered=\"{headerCell:true}\"/>\n</template>\n\n<script>\nimport { reactive } from 'vue';\n\nexport default {\n  setup() {\n    const columns = [{\n      title: 'Name',\n      dataIndex: 'name',\n      fixed: 'left',\n      width: 140,\n    }, {\n      title: 'User Info',\n      children: [{\n        title: 'Birthday',\n        dataIndex: 'birthday'\n      }, {\n        title: 'Address',\n        children: [{\n          title: 'City',\n          dataIndex: 'city'\n        }, {\n          title: 'Road',\n          dataIndex: 'road'\n        }, {\n          title: 'No.',\n          dataIndex: 'no'\n        }]\n      }]\n    }, {\n      title: 'Information',\n      children: [{\n        title: 'Email',\n        dataIndex: 'email',\n      }, {\n        title: 'Phone',\n        dataIndex: 'phone',\n      }]\n    }, {\n      title: 'Salary',\n      dataIndex: 'salary',\n      fixed: 'right',\n      width: 120\n    }];\n    const data = reactive([{\n      key: '1',\n      name: 'Jane Doe',\n      salary: 23000,\n      birthday: '1994-04-21',\n      city: 'London',\n      road: 'Park',\n      no: '34',\n      phone: '12345678',\n      email: 'jane.doe@example.com'\n    }, {\n      key: '2',\n      name: 'Alisa Ross',\n      salary: 25000,\n      birthday: '1994-05-21',\n      city: 'London',\n      road: 'Park',\n      no: '37',\n      phone: '12345678',\n      email: 'alisa.ross@example.com'\n    }, {\n      key: '3',\n      name: 'Kevin Sandra',\n      salary: 22000,\n      birthday: '1992-02-11',\n      city: 'Paris',\n      road: 'Arco',\n      no: '67',\n      phone: '12345678',\n      email: 'kevin.sandra@example.com'\n    }, {\n      key: '4',\n      name: 'Ed Hellen',\n      salary: 17000,\n      birthday: '1991-06-21',\n      city: 'London',\n      road: 'Park',\n      no: '317',\n      phone: '12345678',\n      email: 'ed.hellen@example.com'\n    }, {\n      key: '5',\n      name: 'William Smith',\n      salary: 27000,\n      birthday: '1996-08-21',\n      city: 'Paris',\n      road: 'Park',\n      no: '114',\n      phone: '12345678',\n      email: 'william.smith@example.com'\n    }]);\n\n    return {\n      columns,\n      data\n    }\n  },\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/table/__demo__/lazy-load.md",
    "content": "```yaml\ntitle:\n  zh-CN: 子树懒加载\n  en-US: Lazy Load\n```\n\n## zh-CN\n\n通过 `load-more` 属性可以开启子树懒加载功能。\n开启子树懒加载功能后，需要在无子树节点标注 `isLeaf: true`，没有标注且没有 `children` 属性的节点会认为需要子树懒加载处理。\n`load-more` 属性有提供 `done` 函数进行回调，可以在回调中传入懒加载的子树。如果 `done` 函数没有传入数据会认为懒加载失败，此节点可以再次触发懒加载。\n\n---\n\n## en-US\n\nThe loading function of sub-slacks can be turned on through the `load-more` property.\nAfter the child slot loading function is enabled, you need to mark `isLeaf: true` on nodes without subtrees. Nodes that are not marked and have no `children` attribute will be considered to need child slot loading processing.\nThe `load-more` attribute provides a `done` function for callbacks, and lazy loaded subtrees can be passed in the callback. If the `done` function does not pass in data, it will be considered as a lazy loading failure, and this node can trigger lazy loading again.\n\n---\n\n```vue\n\n<template>\n  <a-table :columns=\"columns\" :data=\"data\" :load-more=\"loadMore\" />\n</template>\n\n<script>\nimport { reactive } from 'vue';\n\nexport default {\n  setup() {\n    const columns = [{\n      title: 'Name',\n      dataIndex: 'name',\n    }, {\n      title: 'Salary',\n      dataIndex: 'salary',\n    }, {\n      title: 'Address',\n      dataIndex: 'address',\n    }, {\n      title: 'Email',\n      dataIndex: 'email',\n    }];\n    const data = reactive([{\n      key: '1',\n      name: 'Jane Doe',\n      salary: 23000,\n      address: '32 Park Road, London',\n      email: 'jane.doe@example.com',\n      children: [{\n        key: '2',\n        name: 'Alisa Ross',\n        salary: 25000,\n        address: '35 Park Road, London',\n        email: 'alisa.ross@example.com',\n      }, {\n        key: '5',\n        name: 'Alisa Ross',\n        salary: 25000,\n        address: '35 Park Road, London',\n        email: 'alisa.ross@example.com',\n        isLeaf: true,\n      }]\n    }, {\n      key: '6',\n      name: 'Alisa Ross',\n      salary: 25000,\n      address: '35 Park Road, London',\n      email: 'alisa.ross@example.com',\n    }, {\n      key: '7',\n      name: 'Kevin Sandra',\n      salary: 22000,\n      address: '31 Park Road, London',\n      email: 'kevin.sandra@example.com',\n      isLeaf: true,\n    }, {\n      key: '8',\n      name: 'Ed Hellen',\n      salary: 17000,\n      address: '42 Park Road, London',\n      email: 'ed.hellen@example.com',\n      isLeaf: true,\n    }, {\n      key: '9',\n      name: 'William Smith',\n      salary: 27000,\n      address: '62 Park Road, London',\n      email: 'william.smith@example.com',\n      isLeaf: true,\n    }])\n\n    const loadMore = (record, done) => {\n      window.setTimeout(() => {\n        done([\n          {\n            key: `${record.key}-1`,\n            name: 'Ed Hellen',\n            salary: 17000,\n            address: '42 Park Road, London',\n            email: 'ed.hellen@example.com',\n            isLeaf: true,\n          }, {\n            key: `${record.key}-2`,\n            name: 'William Smith',\n            salary: 27000,\n            address: '62 Park Road, London',\n            email: 'william.smith@example.com',\n            isLeaf: true,\n          }\n        ])\n      }, 2000)\n    }\n\n    return {\n      columns,\n      data,\n      loadMore\n    }\n  },\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/table/__demo__/props.md",
    "content": "```yaml\ntitle:\n  zh-CN: 表格属性\n  en-US: Table Props\n```\n\n## zh-CN\n\n这里罗列了一些表格的属性，你可以方便的打开或关闭一些属性，查看它的效果。\n\n---\n\n## en-US\n\nHere is a list of some table attributes, you can easily open or close some of the attributes to view its effects.\n\n---\n\n```vue\n\n<template>\n  <a-form layout=\"inline\" :model=\"form\">\n    <a-form-item label=\"Border\" field=\"border\">\n      <a-switch v-model=\"form.border\" />\n    </a-form-item>\n    <a-form-item label=\"Hover\" field=\"hover\">\n      <a-switch v-model=\"form.hover\" />\n    </a-form-item>\n    <a-form-item label=\"stripe\" field=\"stripe\">\n      <a-switch v-model=\"form.stripe\" />\n    </a-form-item>\n    <a-form-item label=\"checkbox\" field=\"checkbox\">\n      <a-switch v-model=\"form.checkbox\" />\n    </a-form-item>\n    <a-form-item label=\"checkAll\" field=\"checkAll\">\n      <a-switch v-model=\"rowSelection.showCheckedAll\" />\n    </a-form-item>\n    <a-form-item label=\"loading\" field=\"loading\">\n      <a-switch v-model=\"form.loading\" />\n    </a-form-item>\n    <a-form-item label=\"tableHeader\" field=\"tableHeader\">\n      <a-switch v-model=\"form.tableHeader\" />\n    </a-form-item>\n    <a-form-item label=\"noData\" field=\"noData\">\n      <a-switch v-model=\"form.noData\" />\n    </a-form-item>\n  </a-form>\n  <a-table\n    :columns=\"columns\"\n    :data=\"form.noData ? [] : data\"\n    :bordered=\"form.border\"\n    :hoverable=\"form.hover\"\n    :stripe=\"form.stripe\"\n    :loading=\"form.loading\"\n    :show-header=\"form.tableHeader\"\n    :row-selection=\"form.checkbox ? rowSelection : undefined\"\n  />\n</template>\n\n<script>\nimport { reactive } from 'vue';\n\nexport default {\n  setup() {\n    const form = reactive({\n      border: true,\n      borderCell: false,\n      hover: true,\n      stripe: false,\n      checkbox: true,\n      loading: false,\n      tableHeader: true,\n      noData: false\n    });\n\n    const rowSelection = reactive({\n      type: 'checkbox',\n      showCheckedAll: true\n    });\n\n    const columns = [\n      {\n        title: 'Name',\n        dataIndex: 'name',\n      },\n      {\n        title: 'Salary',\n        dataIndex: 'salary',\n      },\n      {\n        title: 'Address',\n        dataIndex: 'address',\n      },\n      {\n        title: 'Email',\n        dataIndex: 'email',\n      },\n    ];\n\n    const data = [{\n      key: '1',\n      name: 'Jane Doe',\n      salary: 23000,\n      address: '32 Park Road, London',\n      email: 'jane.doe@example.com'\n    }, {\n      key: '2',\n      name: 'Alisa Ross',\n      salary: 25000,\n      address: '35 Park Road, London',\n      email: 'alisa.ross@example.com'\n    }, {\n      key: '3',\n      name: 'Kevin Sandra',\n      salary: 22000,\n      address: '31 Park Road, London',\n      email: 'kevin.sandra@example.com'\n    }, {\n      key: '4',\n      name: 'Ed Hellen',\n      salary: 17000,\n      address: '42 Park Road, London',\n      email: 'ed.hellen@example.com'\n    }, {\n      key: '5',\n      name: 'William Smith',\n      salary: 27000,\n      address: '62 Park Road, London',\n      email: 'william.smith@example.com'\n    }];\n\n    return {\n      form,\n      rowSelection,\n      columns,\n      data\n    }\n  },\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/table/__demo__/radio.md",
    "content": "```yaml\ntitle:\n  zh-CN: 行选择器（单选框）\n  en-US: Row Selection (Radio)\n```\n\n## zh-CN\n\n通过设置 `rowSelection.type='radio'` 开启单选模式。\n\n---\n\n## en-US\n\nEnable single selection mode by setting `rowSelection.type='radio'`.\n\n---\n\n```vue\n<template>\n  <a-table :columns=\"columns\" :data=\"data\" :row-selection=\"rowSelection\" />\n</template>\n\n<script>\nimport { reactive } from 'vue';\n\nexport default {\n  setup() {\n    const rowSelection = {\n      type: 'radio'\n    };\n    const columns = [\n      {\n        title: 'Name',\n        dataIndex: 'name',\n      },\n      {\n        title: 'Salary',\n        dataIndex: 'salary',\n      },\n      {\n        title: 'Address',\n        dataIndex: 'address',\n      },\n      {\n        title: 'Email',\n        dataIndex: 'email',\n      },\n    ]\n    const data = reactive([{\n      key: '1',\n      name: 'Jane Doe',\n      salary: 23000,\n      address: '32 Park Road, London',\n      email: 'jane.doe@example.com'\n    }, {\n      key: '2',\n      name: 'Alisa Ross',\n      salary: 25000,\n      address: '35 Park Road, London',\n      email: 'alisa.ross@example.com'\n    }, {\n      key: '3',\n      name: 'Kevin Sandra',\n      salary: 22000,\n      address: '31 Park Road, London',\n      email: 'kevin.sandra@example.com'\n    }, {\n      key: '4',\n      name: 'Ed Hellen',\n      salary: 17000,\n      address: '42 Park Road, London',\n      email: 'ed.hellen@example.com'\n    }, {\n      key: '5',\n      name: 'William Smith',\n      salary: 27000,\n      address: '62 Park Road, London',\n      email: 'william.smith@example.com'\n    }]);\n\n    return {\n      rowSelection,\n      columns,\n      data\n    }\n  },\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/table/__demo__/resize.md",
    "content": "```yaml\ntitle:\n  zh-CN: 调整列宽\n  en-US: Column Width Resize\n```\n\n## zh-CN\n\n使用 `column-resizable` 属性开启列宽调整。建议初始设置除最后一列外其他列的默认列宽。\n\n---\n\n## en-US\n\nEnable column resizing using the `column-resizable` property. It is recommended to initially set default column widths for all but the last column.\n\n---\n\n```vue\n<template>\n  <a-table :columns=\"columns\" :data=\"data\" column-resizable :bordered=\"{cell:true}\"></a-table>\n</template>\n\n<script>\nimport { reactive } from 'vue';\n\nexport default {\n  setup() {\n    const columns = reactive([\n      {\n        title: 'Name',\n        dataIndex: 'name',\n        width: 150,\n        minWidth: 100,\n      },\n      {\n        title: 'Salary',\n        dataIndex: 'salary',\n        width: 120,\n        minWidth: 80,\n      },\n      {\n        title: 'Address',\n        dataIndex: 'address',\n        width: 300,\n      },\n      {\n        title: 'Email',\n        dataIndex: 'email',\n      },\n    ]);\n    const data = reactive([{\n      key: '1',\n      name: 'Jane Doe',\n      salary: 23000,\n      address: '32 Park Road, London',\n      email: 'jane.doe@example.com'\n    }, {\n      key: '2',\n      name: 'Alisa Ross',\n      salary: 25000,\n      address: '35 Park Road, London',\n      email: 'alisa.ross@example.com'\n    }, {\n      key: '3',\n      name: 'Kevin Sandra',\n      salary: 22000,\n      address: '31 Park Road, London',\n      email: 'kevin.sandra@example.com'\n    }, {\n      key: '4',\n      name: 'Ed Hellen',\n      salary: 17000,\n      address: '42 Park Road, London',\n      email: 'ed.hellen@example.com'\n    }, {\n      key: '5',\n      name: 'William Smith',\n      salary: 27000,\n      address: '62 Park Road, London',\n      email: 'william.smith@example.com'\n    }]);\n\n    return {\n      columns,\n      data\n    }\n  },\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/table/__demo__/row-selection.md",
    "content": "```yaml\ntitle:\n  zh-CN: 行选择器\n  en-US: Row Selection\n```\n\n## zh-CN\n\n通过设置 `row-selection` 开启行选择器。\n\n---\n\n## en-US\n\nTurn on the row selector by setting `row-selection`.\n\n---\n\n```vue\n<template>\n  <a-space direction=\"vertical\" size=\"large\" fill>\n    <div>\n      <span>OnlyCurrent: </span>\n      <a-switch v-model=\"rowSelection.onlyCurrent\" />\n    </div>\n    <a-table row-key=\"name\" :columns=\"columns\" :data=\"data\" :row-selection=\"rowSelection\"\n             v-model:selectedKeys=\"selectedKeys\" :pagination=\"pagination\" />\n  </a-space>\n</template>\n\n<script>\nimport { reactive, ref } from 'vue';\n\nexport default {\n  setup() {\n    const selectedKeys = ref(['Jane Doe', 'Alisa Ross']);\n\n    const rowSelection = reactive({\n      type: 'checkbox',\n      showCheckedAll: true,\n      onlyCurrent: false,\n    });\n    const pagination = {pageSize: 5}\n\n    const columns = [\n      {\n        title: 'Name',\n        dataIndex: 'name',\n      },\n      {\n        title: 'Salary',\n        dataIndex: 'salary',\n      },\n      {\n        title: 'Address',\n        dataIndex: 'address',\n      },\n      {\n        title: 'Email',\n        dataIndex: 'email',\n      },\n    ]\n    const data = reactive([{\n      key: '1',\n      name: 'Jane Doe',\n      salary: 23000,\n      address: '32 Park Road, London',\n      email: 'jane.doe@example.com'\n    }, {\n      key: '2',\n      name: 'Alisa Ross',\n      salary: 25000,\n      address: '35 Park Road, London',\n      email: 'alisa.ross@example.com'\n    }, {\n      key: '3',\n      name: 'Kevin Sandra',\n      salary: 22000,\n      address: '31 Park Road, London',\n      email: 'kevin.sandra@example.com',\n      disabled: true\n    }, {\n      key: '4',\n      name: 'Ed Hellen',\n      salary: 17000,\n      address: '42 Park Road, London',\n      email: 'ed.hellen@example.com'\n    }, {\n      key: '5',\n      name: 'William Smith',\n      salary: 27000,\n      address: '62 Park Road, London',\n      email: 'william.smith@example.com'\n    }, {\n      key: '6',\n      name: 'Jane Doe 2',\n      salary: 15000,\n      address: '32 Park Road, London',\n      email: 'jane.doe@example.com'\n    }, {\n      key: '7',\n      name: 'Alisa Ross 2',\n      salary: 28000,\n      address: '35 Park Road, London',\n      email: 'alisa.ross@example.com'\n    }, {\n      key: '8',\n      name: 'Kevin Sandra 2',\n      salary: 26000,\n      address: '31 Park Road, London',\n      email: 'kevin.sandra@example.com',\n    }, {\n      key: '9',\n      name: 'Ed Hellen 2',\n      salary: 18000,\n      address: '42 Park Road, London',\n      email: 'ed.hellen@example.com'\n    }, {\n      key: '10',\n      name: 'William Smith 2',\n      salary: 12000,\n      address: '62 Park Road, London',\n      email: 'william.smith@example.com'\n    }]);\n\n    return {\n      rowSelection,\n      columns,\n      data,\n      selectedKeys,\n      pagination\n    }\n  },\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/table/__demo__/scroll.md",
    "content": "```yaml\ntitle:\n  zh-CN: 表格滚动\n  en-US: Table Scroll\n```\n\n## zh-CN\n\n设置 scroll 属性可以开启表格滚动。x 指表格的实际宽度，一般设置的值会大于表格容器宽度；y 指表格的显示高度，表格实际高度超出后会显示滚动条。\n2.18.0 版本后 x, y 均可设置百分比。y 设置为 100% 可以让表格容器高度跟随外层容器，超出后自动显示滚动条。\n\n---\n\n## en-US\n\nSetting the scroll property enables table scrolling. x refers to the actual width of the table. Generally, the value set will be larger than the width of the table container; y refers to the display height of the table. When the actual height of the table exceeds, a scroll bar will be displayed.\nAfter version 2.18.0, both x, y can set percentage. Setting y to 100% can make the height of the table container follow the outer container, and automatically display the scroll bar when it exceeds.\n\n---\n\n```vue\n<template>\n  <div style=\"margin-bottom: 20px\">\n    <a-switch v-model=\"scrollbar\" />\n    Virtual Scrollbar\n  </div>\n  <a-table :columns=\"columns\" :data=\"data\" :scroll=\"scroll\" :scrollbar=\"scrollbar\" />\n  <a-split direction=\"vertical\" :default-size=\"0.9\" :style=\"{height: '500px', marginTop: '30px'}\">\n    <template #first>\n      <a-table :columns=\"columns\" :data=\"data\" :scroll=\"scrollPercent\" :scrollbar=\"scrollbar\" />\n    </template>\n  </a-split>\n</template>\n\n<script>\nimport { reactive, ref } from 'vue';\n\nexport default {\n  setup() {\n    const scrollbar = ref(true);\n    const scroll = {\n      x: 2000,\n      y: 200\n    };\n    const scrollPercent = {\n      x: '120%',\n      y: '100%'\n    };\n    const columns = [\n      {\n        title: 'Name',\n        dataIndex: 'name',\n      },\n      {\n        title: 'Salary',\n        dataIndex: 'salary',\n      },\n      {\n        title: 'Address',\n        dataIndex: 'address',\n      },\n      {\n        title: 'Email',\n        dataIndex: 'email',\n      },\n    ];\n    const data = reactive([{\n      key: '1',\n      name: 'Jane Doe',\n      salary: 23000,\n      address: '32 Park Road, London',\n      email: 'jane.doe@example.com'\n    }, {\n      key: '2',\n      name: 'Alisa Ross',\n      salary: 25000,\n      address: '35 Park Road, London',\n      email: 'alisa.ross@example.com'\n    }, {\n      key: '3',\n      name: 'Kevin Sandra',\n      salary: 22000,\n      address: '31 Park Road, London',\n      email: 'kevin.sandra@example.com'\n    }, {\n      key: '4',\n      name: 'Ed Hellen',\n      salary: 17000,\n      address: '42 Park Road, London',\n      email: 'ed.hellen@example.com'\n    }, {\n      key: '5',\n      name: 'William Smith',\n      salary: 27000,\n      address: '62 Park Road, London',\n      email: 'william.smith@example.com'\n    }]);\n\n    return {\n      scroll,\n      scrollPercent,\n      columns,\n      data,\n      scrollbar\n    }\n  },\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/table/__demo__/sort.md",
    "content": "```yaml\ntitle:\n  zh-CN: 排序和筛选\n  en-US: Sort & Filter\n```\n\n## zh-CN\n\n通过设置 `columns` 中的 `sortable` 和 `filterable` 属性，可以配置排序和筛选功能。 通过 `filter-icon-align-left` 属性可以让筛选按钮左对齐。\n可以通过设置 `sortable.sorter=true` 来关闭内部排序，并通过 `change` 或者 `sorterChange` 事件来实现服务器端排序。\n\n---\n\n## en-US\n\nYou can configure the sorting and filtering functions by setting the `sortable` and `filterable` attributes in `columns`\n. The filter button can be aligned to the left through the `filter-icon-align-left` property. Internal sorting can be\nturned off by setting `sortable.sorter=true`, and server-side sorting can be implemented via the `change`\nor `sorterChange` events.\n\n---\n\n```vue\n<template>\n  <a-space direction=\"vertical\" size=\"large\" fill>\n    <a-space>\n      <a-switch v-model=\"alignLeft\" />\n      <span>Filter icon align left: {{alignLeft}}</span>\n    </a-space>\n    <a-table :columns=\"columns\" :data=\"data\" :filter-icon-align-left=\"alignLeft\" @change=\"handleChange\" />\n  </a-space>\n</template>\n\n<script>\nimport { reactive, ref } from 'vue';\n\nexport default {\n  setup() {\n    const alignLeft = ref(false);\n\n    const columns = [\n      {\n        title: 'Name',\n        dataIndex: 'name',\n        sortable: {\n          sortDirections: ['ascend', 'descend']\n        }\n      },\n      {\n        title: 'Salary',\n        dataIndex: 'salary',\n        sortable: {\n          sortDirections: ['ascend']\n        },\n        filterable: {\n          filters: [{\n            text: '> 20000',\n            value: '20000',\n          }, {\n            text: '> 30000',\n            value: '30000',\n          }],\n          filter: (value, record) => record.salary > value,\n          multiple: true\n        }\n      },\n      {\n        title: 'Address',\n        dataIndex: 'address',\n        filterable: {\n          filters: [{\n            text: 'London',\n            value: 'London',\n          }, {\n            text: 'Paris',\n            value: 'Paris',\n          },],\n          filter: (value, row) => row.address.includes(value),\n        }\n      },\n      {\n        title: 'Email',\n        dataIndex: 'email',\n      },\n    ];\n    const data = reactive([{\n      key: '1',\n      name: 'Jane Doe',\n      salary: 23000,\n      address: '32 Park Road, London',\n      email: 'jane.doe@example.com'\n    }, {\n      key: '2',\n      name: 'Alisa Ross',\n      salary: 25000,\n      address: '35 Park Road, London',\n      email: 'alisa.ross@example.com'\n    }, {\n      key: '3',\n      name: 'Kevin Sandra',\n      salary: 22000,\n      address: '31 Park Road, London',\n      email: 'kevin.sandra@example.com'\n    }, {\n      key: '4',\n      name: 'Ed Hellen',\n      salary: 17000,\n      address: '42 Park Road, London',\n      email: 'ed.hellen@example.com'\n    }, {\n      key: '5',\n      name: 'William Smith',\n      salary: 27000,\n      address: '62 Park Road, London',\n      email: 'william.smith@example.com'\n    }]);\n\n    const handleChange = (data, extra, currentDataSource) => {\n      console.log('change', data, extra, currentDataSource)\n    }\n\n    return {\n      alignLeft,\n      columns,\n      data,\n      handleChange\n    }\n  },\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/table/__demo__/span.md",
    "content": "```yaml\ntitle:\n  zh-CN: 单元格合并\n  en-US: Cell Span\n```\n\n## zh-CN\n\n通过 `span-method` 属性进行单元格合并。可以设置 `span-all` 让列索引包含操作列，注意：目前如果合并多项选择器会导致全选状态判断错误。\n\n---\n\n## en-US\n\nCell merging is done via the `span-method` property. You can set `span-all` to make the column index include the operation column. Note: At present, if the multiple selectors are merged, the judgment of the all selection state will be wrong.\n\n---\n\n```vue\n<template>\n  <a-space direction=\"vertical\" size=\"large\" style=\"width: 100%\">\n    <a-table :columns=\"columns\" :data=\"data\" :span-method=\"spanMethod\" />\n    <a-table :columns=\"columns\" :data=\"data\" :span-method=\"dataSpanMethod\" :bordered=\"{wrapper: true, cell: true}\" />\n    <a-table :columns=\"columns\" :data=\"data\" :row-selection=\"{type: 'checkbox'}\" :span-method=\"spanMethodAll\" span-all :bordered=\"{wrapper: true, cell: true}\" />\n  </a-space>\n</template>\n\n<script>\nexport default {\n  setup(){\n    const spanMethod= ({rowIndex, columnIndex}) => {\n      if (rowIndex === 1 && columnIndex === 1) {\n        return {\n          rowspan: 2,\n          colspan: 3\n        }\n      }\n    };\n    const  dataSpanMethod= ({record, column}) => {\n      if (record.name === 'Alisa Ross' && column.dataIndex === 'salary') {\n        return {\n          rowspan: 2,\n        }\n      }\n    };\n    const  spanMethodAll= ({rowIndex, columnIndex}) => {\n      if (rowIndex === 1 && columnIndex === 0) {\n        return {rowspan: 2}\n      }\n\n      if (rowIndex === 1 && columnIndex === 2) {\n        return {\n          rowspan: 2,\n          colspan: 3\n        }\n      }\n    };\n    const columns=[\n      {\n        title: 'Name',\n        dataIndex: 'name',\n      },\n      {\n        title: 'Salary',\n        dataIndex: 'salary',\n      },\n      {\n        title: 'Address',\n        dataIndex: 'address',\n      },\n      {\n        title: 'Email',\n        dataIndex: 'email',\n      },\n    ];\n    const data=[{\n      key: '1',\n      name: 'Jane Doe',\n      salary: 23000,\n      address: '32 Park Road, London',\n      email: 'jane.doe@example.com'\n    }, {\n      key: '2',\n      name: 'Alisa Ross',\n      salary: 25000,\n      address: '35 Park Road, London',\n      email: 'alisa.ross@example.com'\n    }, {\n      key: '3',\n      name: 'Kevin Sandra',\n      salary: 22000,\n      address: '31 Park Road, London',\n      email: 'kevin.sandra@example.com'\n    }, {\n      key: '4',\n      name: 'Ed Hellen',\n      salary: 17000,\n      address: '42 Park Road, London',\n      email: 'ed.hellen@example.com'\n    }, {\n      key: '5',\n      name: 'William Smith',\n      salary: 27000,\n      address: '62 Park Road, London',\n      email: 'william.smith@example.com'\n    }];\n\n    return {\n      spanMethod,\n      dataSpanMethod,\n      spanMethodAll,\n      columns,\n      data\n    }\n  },\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/table/__demo__/sticky.md",
    "content": "```yaml\ntitle:\n  zh-CN: 表头吸顶\n  en-US: Sticky Header\n```\n\n## zh-CN\n\n通过 `sticky-header` 设置表头吸顶。表头吸顶的计算容器为最近滚动容器，设置数字时可指定距离滚动容器顶部的高度。\n\n---\n\n## en-US\n\nSet the header suction via `sticky-header`. The calculation container for the top of the header is the nearest scroll container. When setting the number, you can specify the height from the top of the scroll container.\n\n---\n\n```vue\n<template>\n  <a-table :columns=\"columns\" :data=\"data\" :sticky-header=\"60\"/>\n</template>\n\n<script>\nimport { reactive } from 'vue';\n\nexport default {\n  setup() {\n    const columns = [\n      {\n        title: 'Name',\n        dataIndex: 'name',\n      },\n      {\n        title: 'Salary',\n        dataIndex: 'salary',\n      },\n      {\n        title: 'Address',\n        dataIndex: 'address',\n      },\n      {\n        title: 'Email',\n        dataIndex: 'email',\n      },\n    ];\n    const data = reactive([{\n      key: '1',\n      name: 'Jane Doe',\n      salary: 23000,\n      address: '32 Park Road, London',\n      email: 'jane.doe@example.com'\n    }, {\n      key: '2',\n      name: 'Alisa Ross',\n      salary: 25000,\n      address: '35 Park Road, London',\n      email: 'alisa.ross@example.com'\n    }, {\n      key: '3',\n      name: 'Kevin Sandra',\n      salary: 22000,\n      address: '31 Park Road, London',\n      email: 'kevin.sandra@example.com'\n    }, {\n      key: '4',\n      name: 'Ed Hellen',\n      salary: 17000,\n      address: '42 Park Road, London',\n      email: 'ed.hellen@example.com'\n    }, {\n      key: '5',\n      name: 'William Smith',\n      salary: 27000,\n      address: '62 Park Road, London',\n      email: 'william.smith@example.com'\n    }]);\n\n    return {\n      columns,\n      data\n    }\n  },\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/table/__demo__/subtree.md",
    "content": "```yaml\ntitle:\n  zh-CN: 树形数据展示\n  en-US: SubTree\n```\n\n## zh-CN\n\n树形数据展示的例子，`data` 里有 `children` 字段时会展示为树形表格。\n\n---\n\n## en-US\n\nAn example of tree data display, when there is a `children` field in `data`, it will be displayed as a tree table.\n\n---\n\n```vue\n\n<template>\n  <a-space>\n    <span>checkStrictly:</span>\n    <a-switch v-model=\"rowSelection.checkStrictly\" />\n  </a-space>\n  <a-table :columns=\"columns\" :data=\"data\" v-model:expandedKeys=\"expandedKeys\" :row-selection=\"rowSelection\" show-empty-tree style=\"margin-top: 20px\"/>\n</template>\n\n<script>\nimport { ref,reactive } from 'vue';\n\nexport default {\n  setup() {\n    const expandedKeys = ref([]);\n\n\n    const rowSelection = reactive({\n      type: 'checkbox',\n      showCheckedAll: true,\n      checkStrictly: true\n    });\n\n    const columns = [\n      {\n        title: 'Name',\n        dataIndex: 'name',\n      },\n      {\n        title: 'Salary',\n        dataIndex: 'salary',\n      },\n      {\n        title: 'Address',\n        dataIndex: 'address',\n      },\n      {\n        title: 'Email',\n        dataIndex: 'email',\n      },\n    ];\n    const data = [{\n      key: '1',\n      name: 'Jane Doe',\n      salary: 23000,\n      address: '32 Park Road, London',\n      email: 'jane.doe@example.com',\n      children: [\n        {\n          key: '2',\n          name: 'Alisa Ross',\n          salary: 25000,\n          address: '35 Park Road, London',\n          email: 'alisa.ross@example.com',\n          children: [\n            {\n              key: '3',\n              name: 'Ed Hellen',\n              salary: 17000,\n              address: '42 Park Road, London',\n              email: 'ed.hellen@example.com'\n            }, {\n              key: '4',\n              name: 'William Smith',\n              salary: 27000,\n              address: '62 Park Road, London',\n              email: 'william.smith@example.com'\n            }\n          ]\n        },\n        {\n          key: '5',\n          name: 'Alisa Ross',\n          salary: 25000,\n          address: '35 Park Road, London',\n          email: 'alisa.ross@example.com'\n        }\n      ]\n    }, {\n      key: '6',\n      name: 'Alisa Ross',\n      salary: 25000,\n      address: '35 Park Road, London',\n      email: 'alisa.ross@example.com'\n    }, {\n      key: '7',\n      name: 'Kevin Sandra',\n      salary: 22000,\n      address: '31 Park Road, London',\n      email: 'kevin.sandra@example.com'\n    }, {\n      key: '8',\n      name: 'Ed Hellen',\n      salary: 17000,\n      address: '42 Park Road, London',\n      email: 'ed.hellen@example.com'\n    }, {\n      key: '9',\n      name: 'William Smith',\n      salary: 27000,\n      address: '62 Park Road, London',\n      email: 'william.smith@example.com',\n      children:[]\n    }];\n\n    return {\n      columns,\n      data,\n      expandedKeys,\n      rowSelection\n    }\n  },\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/table/__demo__/summary.md",
    "content": "```yaml\ntitle:\n  zh-CN: 总结行\n  en-US: Summary\n```\n\n## zh-CN\n\n设置 `summary` 可以开启表尾总结行，并可以通过 `summary-text` 指定首列文字。\n如果想要自定义总结行展示，可以传入函数。函数的返回值为需要展示的数据，结构同 `data` 一样即可，支持多行数据。\n注意：控制列暂不可以自定义内容\n\n---\n\n## en-US\n\nSet `summary` to turn on the summary line at the end of the table, and specify the first column of text\nwith `summary-text`. If you want to customize the summary line display, you can pass in a function. The return value of\nthe function is the data to be displayed, the structure is the same as `data`, and it supports multiple rows of data.\nNote: The control column cannot be customized for the time being\n\n---\n\n```vue\n\n<template>\n  <a-table :columns=\"columns\" :data=\"data\" :summary=\"true\" :summary-span-method=\"spanMethod\" />\n  <a-table :columns=\"columns\" :data=\"data\" :scroll=\"scroll\" :expandable=\"expandable\" :summary=\"summary\">\n    <template #summary-cell=\"{ column,record,rowIndex }\">\n      <div :style=\"getColorStyle(column,record)\">{{record[column.dataIndex]}}</div>\n    </template>\n  </a-table>\n</template>\n\n<script>\nimport { reactive } from 'vue';\n\nexport default {\n  setup() {\n    const expandable = {\n      title: 'Expand',\n      width: 80\n    };\n    const scroll = {\n      x: 2000,\n      y: 200\n    }\n    const columns = reactive([\n      {\n        title: 'Name',\n        dataIndex: 'name',\n        fixed: 'left',\n        width: 140\n      },\n      {\n        title: 'Salary',\n        dataIndex: 'salary',\n        summaryCellStyle: (record) => {\n          if (record.salary > 100000) {\n            return {\n              backgroundColor: 'rgb(var(--arcoblue-6))',\n              color: '#fff'\n            }\n          }\n        }\n      },\n      {\n        title: 'Data1',\n        dataIndex: 'data1',\n      },\n      {\n        title: 'Data2',\n        dataIndex: 'data2',\n      },\n    ]);\n    const data = reactive([\n      {\n        key: '1',\n        name: 'Jane Doe',\n        salary: 23000,\n        data1: 10,\n        data2: 8,\n        expand: 'Expand Content'\n      }, {\n        key: '2',\n        name: 'Alisa Ross',\n        salary: 25000,\n        data1: 9,\n        data2: -12,\n      }, {\n        key: '3',\n        name: 'Kevin Sandra',\n        salary: 22000,\n        data1: 15,\n        data2: -2,\n      }, {\n        key: '4',\n        name: 'Ed Hellen',\n        salary: 17000,\n        data1: 2,\n        data2: 3,\n      }, {\n        key: '5',\n        name: 'William Smith',\n        salary: 27000,\n        data1: 11,\n        data2: 0,\n      }\n    ])\n\n    const summary = ({columns, data}) => {\n      let countData = {\n        salary: 0,\n        data1: 0,\n        data2: 0\n      };\n      data.forEach(record => {\n        countData.salary += record.salary;\n        countData.data1 += record.data1;\n        countData.data2 += record.data2;\n      })\n\n\n      return [{\n        name: 'Avg',\n        salary: countData.salary / data.length,\n        data1: countData.data1 / data.length,\n        data2: countData.data2 / data.length,\n      }, {\n        name: 'Sum',\n        salary: countData.salary,\n        data1: countData.data1,\n        data2: countData.data2,\n      }]\n    }\n\n    const getColorStyle = (column, record) => {\n      if (['data1', 'data2'].includes(column.dataIndex)) {\n        return {color: record[column.dataIndex] > 0 ? 'red' : 'green'}\n      }\n      return undefined\n    }\n\n    const spanMethod = ({rowIndex, columnIndex}) => {\n      if (rowIndex === 0 && columnIndex === 1) {\n        return {\n          colspan: 2\n        }\n      }\n    };\n\n    return {\n      expandable,\n      scroll,\n      columns,\n      data,\n      summary,\n      getColorStyle,\n      spanMethod\n    }\n  },\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/table/__demo__/virtual-list.md",
    "content": "```yaml\ntitle:\n  zh-CN: 虚拟列表\n  en-US: Virtual List\n```\n\n## zh-CN\n\n设置 `virtual-list-props` 开启虚拟列表功能。\n目前虚拟滚动表格受限比较多，开启虚拟滚动后不能使用展开行、树形数据、固定列等功能\n\n---\n\n## en-US\n\nSet `virtual-list-props` to enable the virtual list function.\nCurrently, there are many restrictions on virtual scrolling tables. After enabling virtual scrolling, functions such as expanded rows, tree data, and fixed columns cannot be used.\n\n---\n\n```vue\n<template>\n  <a-table :columns=\"columns\" :data=\"data\"  :row-selection=\"rowSelection\"  :virtual-list-props=\"{height:400}\" :pagination=\"false\" :scroll=\"{x:1000}\" />\n</template>\n\n<script>\nimport { reactive } from 'vue';\n\nexport default {\n  setup() {\n    const columns = [\n      {\n        title: 'Name',\n        dataIndex: 'name',\n        fixed: 'left',\n        width: 140\n      },\n      {\n        title: 'Address',\n        dataIndex: 'address',\n      },\n      {\n        title: 'Email',\n        dataIndex: 'email',\n      },\n    ];\n    const data = reactive(Array(1000).fill(null).map((_, index) => ({\n      key: String(index),\n      name: `User ${index + 1}`,\n      address: '32 Park Road, London',\n      email: `user.${index + 1}@example.com`\n    })));\n    const rowSelection = {\n      type: 'checkbox',\n      showCheckedAll: true\n    };\n\n    return {\n      columns,\n      data,\n      rowSelection\n    }\n  },\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/table/__test__/__snapshots__/demo.test.ts.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`<table> demo: render [basic] correctly 1`] = `\n\"<div class=\\\\\"arco-table arco-table-size-large arco-table-border arco-table-hover\\\\\">\n  <!---->\n  <div class=\\\\\"arco-spin\\\\\">\n    <!---->\n    <div class=\\\\\"arco-table-container\\\\\">\n      <div class=\\\\\"arco-scrollbar arco-scrollbar-type-embed\\\\\" style=\\\\\"height: 100%;\\\\\">\n        <div class=\\\\\"arco-scrollbar-container arco-table-content arco-table-content-scroll-x\\\\\">\n          <table class=\\\\\"arco-table-element\\\\\" cellpadding=\\\\\"0\\\\\" cellspacing=\\\\\"0\\\\\">\n            <colgroup>\n              <col>\n              <col>\n              <col>\n              <col>\n            </colgroup>\n            <thead>\n              <tr class=\\\\\"arco-table-tr\\\\\">\n                <th class=\\\\\"arco-table-th\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Name</span>\n                  <!---->\n                  <!----></span>\n                  <!---->\n                  <!---->\n                </th>\n                <th class=\\\\\"arco-table-th\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Salary</span>\n                  <!---->\n                  <!----></span>\n                  <!---->\n                  <!---->\n                </th>\n                <th class=\\\\\"arco-table-th\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Address</span>\n                  <!---->\n                  <!----></span>\n                  <!---->\n                  <!---->\n                </th>\n                <th class=\\\\\"arco-table-th\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Email</span>\n                  <!---->\n                  <!----></span>\n                  <!---->\n                  <!---->\n                </th>\n              </tr>\n            </thead>\n            <tbody>\n              <tr class=\\\\\"arco-table-tr\\\\\">\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">Jane Doe</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">23000</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">32 Park Road, London</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">jane.doe@example.com</span></span></td>\n              </tr>\n              <!---->\n              <tr class=\\\\\"arco-table-tr\\\\\">\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">Alisa Ross</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">25000</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">35 Park Road, London</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">alisa.ross@example.com</span></span></td>\n              </tr>\n              <!---->\n              <tr class=\\\\\"arco-table-tr\\\\\">\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">Kevin Sandra</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">22000</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">31 Park Road, London</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">kevin.sandra@example.com</span></span></td>\n              </tr>\n              <!---->\n              <tr class=\\\\\"arco-table-tr\\\\\">\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">Ed Hellen</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">17000</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">42 Park Road, London</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">ed.hellen@example.com</span></span></td>\n              </tr>\n              <!---->\n              <tr class=\\\\\"arco-table-tr\\\\\">\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">William Smith</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">27000</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">62 Park Road, London</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">william.smith@example.com</span></span></td>\n              </tr>\n              <!---->\n            </tbody>\n            <!---->\n          </table>\n        </div>\n        <!--v-if-->\n        <!--v-if-->\n      </div>\n    </div>\n    <!---->\n    <div class=\\\\\"arco-table-pagination arco-table-pagination-right\\\\\">\n      <!---->\n      <div class=\\\\\"arco-pagination arco-pagination-size-medium\\\\\">\n        <!---->\n        <ul class=\\\\\"arco-pagination-list\\\\\"><span class=\\\\\"arco-pagination-item arco-pagination-item-previous arco-pagination-item-disabled\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-left\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M32 8.4 16.444 23.956 32 39.513\\\\\"></path></svg></span>\n          <li class=\\\\\"arco-pagination-item arco-pagination-item-active\\\\\" pages=\\\\\"1\\\\\">1</li>\n          <!----><span class=\\\\\"arco-pagination-item arco-pagination-item-next arco-pagination-item-disabled\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-right\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"m16 39.513 15.556-15.557L16 8.4\\\\\"></path></svg></span>\n        </ul>\n        <!---->\n        <!---->\n      </div>\n      <!---->\n    </div>\n    <!---->\n  </div>\n</div>\"\n`;\n\nexports[`<table> demo: render [custom] correctly 1`] = `\n\"<div class=\\\\\"arco-table arco-table-size-large arco-table-border arco-table-hover\\\\\">\n  <!---->\n  <div class=\\\\\"arco-spin\\\\\">\n    <!---->\n    <div class=\\\\\"arco-table-container\\\\\">\n      <div class=\\\\\"arco-scrollbar arco-scrollbar-type-embed\\\\\" style=\\\\\"height: 100%;\\\\\">\n        <div class=\\\\\"arco-scrollbar-container arco-table-content arco-table-content-scroll-x\\\\\">\n          <table class=\\\\\"arco-table-element\\\\\" cellpadding=\\\\\"0\\\\\" cellspacing=\\\\\"0\\\\\">\n            <colgroup>\n              <col>\n              <col>\n              <col>\n              <col>\n              <col>\n            </colgroup>\n            <thead>\n              <tr class=\\\\\"arco-table-tr\\\\\">\n                <th class=\\\\\"arco-table-th\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Name</span>\n                  <!---->\n                  <!----></span>\n                  <!---->\n                  <!---->\n                </th>\n                <th class=\\\\\"arco-table-th\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Salary</span>\n                  <!---->\n                  <!----></span>\n                  <!---->\n                  <!---->\n                </th>\n                <th class=\\\\\"arco-table-th\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Address</span>\n                  <!---->\n                  <!----></span>\n                  <!---->\n                  <!---->\n                </th>\n                <th class=\\\\\"arco-table-th\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Email</span>\n                  <!---->\n                  <!----></span>\n                  <!---->\n                  <!---->\n                </th>\n                <th class=\\\\\"arco-table-th\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Optional</span>\n                  <!---->\n                  <!----></span>\n                  <!---->\n                  <!---->\n                </th>\n              </tr>\n            </thead>\n            <tbody>\n              <tr class=\\\\\"arco-table-tr\\\\\">\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">Jane Doe</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">23000</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">32 Park Road, London</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">jane.doe@example.com</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\"><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\"><!--v-if-->view</button></span></span></td>\n              </tr>\n              <!---->\n              <tr class=\\\\\"arco-table-tr\\\\\">\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">Alisa Ross</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">25000</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">35 Park Road, London</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">alisa.ross@example.com</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\"><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\"><!--v-if-->view</button></span></span></td>\n              </tr>\n              <!---->\n              <tr class=\\\\\"arco-table-tr\\\\\">\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">Kevin Sandra</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">22000</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">31 Park Road, London</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">kevin.sandra@example.com</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\"><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\"><!--v-if-->view</button></span></span></td>\n              </tr>\n              <!---->\n              <tr class=\\\\\"arco-table-tr\\\\\">\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">Ed Hellen</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">17000</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">42 Park Road, London</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">ed.hellen@example.com</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\"><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\"><!--v-if-->view</button></span></span></td>\n              </tr>\n              <!---->\n              <tr class=\\\\\"arco-table-tr\\\\\">\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">William Smith</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">27000</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">62 Park Road, London</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">william.smith@example.com</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\"><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\"><!--v-if-->view</button></span></span></td>\n              </tr>\n              <!---->\n            </tbody>\n            <!---->\n          </table>\n        </div>\n        <!--v-if-->\n        <!--v-if-->\n      </div>\n    </div>\n    <!---->\n    <div class=\\\\\"arco-table-pagination arco-table-pagination-right\\\\\">\n      <!---->\n      <div class=\\\\\"arco-pagination arco-pagination-size-medium\\\\\">\n        <!---->\n        <ul class=\\\\\"arco-pagination-list\\\\\"><span class=\\\\\"arco-pagination-item arco-pagination-item-previous arco-pagination-item-disabled\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-left\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M32 8.4 16.444 23.956 32 39.513\\\\\"></path></svg></span>\n          <li class=\\\\\"arco-pagination-item arco-pagination-item-active\\\\\" pages=\\\\\"1\\\\\">1</li>\n          <!----><span class=\\\\\"arco-pagination-item arco-pagination-item-next arco-pagination-item-disabled\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-right\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"m16 39.513 15.556-15.557L16 8.4\\\\\"></path></svg></span>\n        </ul>\n        <!---->\n        <!---->\n      </div>\n      <!---->\n    </div>\n    <!---->\n  </div>\n</div>\n<div class=\\\\\"arco-table arco-table-size-large arco-table-border arco-table-hover\\\\\" style=\\\\\"margin-top: 30px;\\\\\">\n  <!---->\n  <!---->\n  <!---->\n  <!---->\n  <!---->\n  <!---->\n  <div class=\\\\\"arco-spin\\\\\">\n    <!---->\n    <div class=\\\\\"arco-table-container\\\\\">\n      <div class=\\\\\"arco-scrollbar arco-scrollbar-type-embed\\\\\" style=\\\\\"height: 100%;\\\\\">\n        <div class=\\\\\"arco-scrollbar-container arco-table-content arco-table-content-scroll-x\\\\\">\n          <table class=\\\\\"arco-table-element\\\\\" cellpadding=\\\\\"0\\\\\" cellspacing=\\\\\"0\\\\\">\n            <colgroup></colgroup>\n            <thead></thead>\n            <tbody>\n              <tr class=\\\\\"arco-table-tr\\\\\"></tr>\n              <!---->\n              <tr class=\\\\\"arco-table-tr\\\\\"></tr>\n              <!---->\n              <tr class=\\\\\"arco-table-tr\\\\\"></tr>\n              <!---->\n              <tr class=\\\\\"arco-table-tr\\\\\"></tr>\n              <!---->\n              <tr class=\\\\\"arco-table-tr\\\\\"></tr>\n              <!---->\n            </tbody>\n            <!---->\n          </table>\n        </div>\n        <!--v-if-->\n        <!--v-if-->\n      </div>\n    </div>\n    <!---->\n    <div class=\\\\\"arco-table-pagination arco-table-pagination-right\\\\\">\n      <!---->\n      <div class=\\\\\"arco-pagination arco-pagination-size-medium\\\\\">\n        <!---->\n        <ul class=\\\\\"arco-pagination-list\\\\\"><span class=\\\\\"arco-pagination-item arco-pagination-item-previous arco-pagination-item-disabled\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-left\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M32 8.4 16.444 23.956 32 39.513\\\\\"></path></svg></span>\n          <li class=\\\\\"arco-pagination-item arco-pagination-item-active\\\\\" pages=\\\\\"1\\\\\">1</li>\n          <!----><span class=\\\\\"arco-pagination-item arco-pagination-item-next arco-pagination-item-disabled\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-right\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"m16 39.513 15.556-15.557L16 8.4\\\\\"></path></svg></span>\n        </ul>\n        <!---->\n        <!---->\n      </div>\n      <!---->\n    </div>\n    <!---->\n  </div>\n</div>\"\n`;\n\nexports[`<table> demo: render [custom-dom] correctly 1`] = `\n\"<div class=\\\\\"arco-table arco-table-size-large arco-table-border arco-table-hover\\\\\">\n  <!---->\n  <div class=\\\\\"arco-spin\\\\\">\n    <!---->\n    <div class=\\\\\"arco-table-container\\\\\">\n      <div class=\\\\\"arco-scrollbar arco-scrollbar-type-embed\\\\\" style=\\\\\"height: 100%;\\\\\">\n        <div class=\\\\\"arco-scrollbar-container arco-table-content arco-table-content-scroll-x\\\\\">\n          <table class=\\\\\"arco-table-element\\\\\" cellpadding=\\\\\"0\\\\\" cellspacing=\\\\\"0\\\\\">\n            <colgroup>\n              <col>\n              <col>\n              <col>\n              <col>\n            </colgroup>\n            <thead>\n              <tr class=\\\\\"arco-table-tr\\\\\">\n                <th class=\\\\\"arco-table-th\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Name</span>\n                  <!---->\n                  <!----></span>\n                  <!---->\n                  <!---->\n                </th>\n                <th class=\\\\\"arco-table-th\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Salary</span>\n                  <!---->\n                  <!----></span>\n                  <!---->\n                  <!---->\n                </th>\n                <th class=\\\\\"arco-table-th\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Address</span>\n                  <!---->\n                  <!----></span>\n                  <!---->\n                  <!---->\n                </th>\n                <th class=\\\\\"arco-table-th\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Email</span>\n                  <!---->\n                  <!----></span>\n                  <!---->\n                  <!---->\n                </th>\n              </tr>\n            </thead>\n            <tbody>\n              <tr class=\\\\\"my-tr arco-table-tr common-row\\\\\">\n                <td class=\\\\\"my-td arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">Jane Doe</span></span></td>\n                <td class=\\\\\"my-td arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">23000</span></span></td>\n                <td class=\\\\\"my-td arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">32 Park Road, London</span></span></td>\n                <td class=\\\\\"my-td arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">jane.doe@example.com</span></span></td>\n              </tr>\n              <!---->\n              <tr class=\\\\\"my-tr arco-table-tr common-row\\\\\">\n                <td class=\\\\\"my-td arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">Alisa Ross</span></span></td>\n                <td class=\\\\\"my-td arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">25000</span></span></td>\n                <td class=\\\\\"my-td arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">35 Park Road, London</span></span></td>\n                <td class=\\\\\"my-td arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">alisa.ross@example.com</span></span></td>\n              </tr>\n              <!---->\n              <tr class=\\\\\"my-tr arco-table-tr common-row\\\\\">\n                <td class=\\\\\"my-td arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">Kevin Sandra</span></span></td>\n                <td class=\\\\\"my-td arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">22000</span></span></td>\n                <td class=\\\\\"my-td arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">31 Park Road, London</span></span></td>\n                <td class=\\\\\"my-td arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">kevin.sandra@example.com</span></span></td>\n              </tr>\n              <!---->\n              <tr class=\\\\\"my-tr arco-table-tr common-row\\\\\">\n                <td class=\\\\\"my-td arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">Ed Hellen</span></span></td>\n                <td class=\\\\\"my-td arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">17000</span></span></td>\n                <td class=\\\\\"my-td arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">42 Park Road, London</span></span></td>\n                <td class=\\\\\"my-td arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">ed.hellen@example.com</span></span></td>\n              </tr>\n              <!---->\n              <tr class=\\\\\"my-tr arco-table-tr common-row\\\\\">\n                <td class=\\\\\"my-td arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">William Smith</span></span></td>\n                <td class=\\\\\"my-td arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">27000</span></span></td>\n                <td class=\\\\\"my-td arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">62 Park Road, London</span></span></td>\n                <td class=\\\\\"my-td arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">william.smith@example.com</span></span></td>\n              </tr>\n              <!---->\n            </tbody>\n            <!---->\n          </table>\n        </div>\n        <!--v-if-->\n        <!--v-if-->\n      </div>\n    </div>\n    <!---->\n    <div class=\\\\\"arco-table-pagination arco-table-pagination-right\\\\\">\n      <!---->\n      <div class=\\\\\"arco-pagination arco-pagination-size-medium\\\\\">\n        <!---->\n        <ul class=\\\\\"arco-pagination-list\\\\\"><span class=\\\\\"arco-pagination-item arco-pagination-item-previous arco-pagination-item-disabled\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-left\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M32 8.4 16.444 23.956 32 39.513\\\\\"></path></svg></span>\n          <li class=\\\\\"arco-pagination-item arco-pagination-item-active\\\\\" pages=\\\\\"1\\\\\">1</li>\n          <!----><span class=\\\\\"arco-pagination-item arco-pagination-item-next arco-pagination-item-disabled\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-right\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"m16 39.513 15.556-15.557L16 8.4\\\\\"></path></svg></span>\n        </ul>\n        <!---->\n        <!---->\n      </div>\n      <!---->\n    </div>\n    <!---->\n  </div>\n</div>\"\n`;\n\nexports[`<table> demo: render [drag-handle] correctly 1`] = `\n\"<div class=\\\\\"arco-table arco-table-size-large arco-table-border arco-table-hover\\\\\">\n  <!---->\n  <div class=\\\\\"arco-spin\\\\\">\n    <!---->\n    <div class=\\\\\"arco-table-container\\\\\">\n      <div class=\\\\\"arco-scrollbar arco-scrollbar-type-embed\\\\\" style=\\\\\"height: 100%;\\\\\">\n        <div class=\\\\\"arco-scrollbar-container arco-table-content arco-table-content-scroll-x\\\\\">\n          <table class=\\\\\"arco-table-element\\\\\" cellpadding=\\\\\"0\\\\\" cellspacing=\\\\\"0\\\\\">\n            <colgroup>\n              <col class=\\\\\"arco-table-drag-handle-col\\\\\" style=\\\\\"width: 40px; min-width: 40px; max-width: 40px;\\\\\">\n              <col>\n              <col>\n              <col>\n              <col>\n            </colgroup>\n            <thead>\n              <tr class=\\\\\"arco-table-tr\\\\\">\n                <th class=\\\\\"arco-table-th arco-table-operation\\\\\"><span class=\\\\\"arco-table-cell\\\\\"><!----></span></th>\n                <th class=\\\\\"arco-table-th\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Name</span>\n                  <!---->\n                  <!----></span>\n                  <!---->\n                  <!---->\n                </th>\n                <th class=\\\\\"arco-table-th\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Salary</span>\n                  <!---->\n                  <!----></span>\n                  <!---->\n                  <!---->\n                </th>\n                <th class=\\\\\"arco-table-th\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Address</span>\n                  <!---->\n                  <!----></span>\n                  <!---->\n                  <!---->\n                </th>\n                <th class=\\\\\"arco-table-th\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Email</span>\n                  <!---->\n                  <!----></span>\n                  <!---->\n                  <!---->\n                </th>\n              </tr>\n            </thead>\n            <tbody>\n              <tr class=\\\\\"arco-table-tr\\\\\">\n                <td class=\\\\\"arco-table-td arco-table-operation arco-table-drag-handle\\\\\" draggable=\\\\\"true\\\\\"><span class=\\\\\"arco-table-cell\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-drag-dot-vertical\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M17 8h2v2h-2V8ZM17 23h2v2h-2v-2ZM17 38h2v2h-2v-2ZM29 8h2v2h-2V8ZM29 23h2v2h-2v-2ZM29 38h2v2h-2v-2Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path><path d=\\\\\"M17 8h2v2h-2V8ZM17 23h2v2h-2v-2ZM17 38h2v2h-2v-2ZM29 8h2v2h-2V8ZM29 23h2v2h-2v-2ZM29 38h2v2h-2v-2Z\\\\\"></path></svg></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">Jane Doe</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">23000</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">32 Park Road, London</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">jane.doe@example.com</span></span></td>\n              </tr>\n              <!---->\n              <tr class=\\\\\"arco-table-tr\\\\\">\n                <td class=\\\\\"arco-table-td arco-table-operation arco-table-drag-handle\\\\\" draggable=\\\\\"true\\\\\"><span class=\\\\\"arco-table-cell\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-drag-dot-vertical\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M17 8h2v2h-2V8ZM17 23h2v2h-2v-2ZM17 38h2v2h-2v-2ZM29 8h2v2h-2V8ZM29 23h2v2h-2v-2ZM29 38h2v2h-2v-2Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path><path d=\\\\\"M17 8h2v2h-2V8ZM17 23h2v2h-2v-2ZM17 38h2v2h-2v-2ZM29 8h2v2h-2V8ZM29 23h2v2h-2v-2ZM29 38h2v2h-2v-2Z\\\\\"></path></svg></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">Alisa Ross</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">25000</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">35 Park Road, London</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">alisa.ross@example.com</span></span></td>\n              </tr>\n              <!---->\n              <tr class=\\\\\"arco-table-tr\\\\\">\n                <td class=\\\\\"arco-table-td arco-table-operation arco-table-drag-handle\\\\\" draggable=\\\\\"true\\\\\"><span class=\\\\\"arco-table-cell\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-drag-dot-vertical\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M17 8h2v2h-2V8ZM17 23h2v2h-2v-2ZM17 38h2v2h-2v-2ZM29 8h2v2h-2V8ZM29 23h2v2h-2v-2ZM29 38h2v2h-2v-2Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path><path d=\\\\\"M17 8h2v2h-2V8ZM17 23h2v2h-2v-2ZM17 38h2v2h-2v-2ZM29 8h2v2h-2V8ZM29 23h2v2h-2v-2ZM29 38h2v2h-2v-2Z\\\\\"></path></svg></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">Kevin Sandra</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">22000</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">31 Park Road, London</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">kevin.sandra@example.com</span></span></td>\n              </tr>\n              <!---->\n              <tr class=\\\\\"arco-table-tr\\\\\">\n                <td class=\\\\\"arco-table-td arco-table-operation arco-table-drag-handle\\\\\" draggable=\\\\\"true\\\\\"><span class=\\\\\"arco-table-cell\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-drag-dot-vertical\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M17 8h2v2h-2V8ZM17 23h2v2h-2v-2ZM17 38h2v2h-2v-2ZM29 8h2v2h-2V8ZM29 23h2v2h-2v-2ZM29 38h2v2h-2v-2Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path><path d=\\\\\"M17 8h2v2h-2V8ZM17 23h2v2h-2v-2ZM17 38h2v2h-2v-2ZM29 8h2v2h-2V8ZM29 23h2v2h-2v-2ZM29 38h2v2h-2v-2Z\\\\\"></path></svg></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">Ed Hellen</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">17000</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">42 Park Road, London</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">ed.hellen@example.com</span></span></td>\n              </tr>\n              <!---->\n              <tr class=\\\\\"arco-table-tr\\\\\">\n                <td class=\\\\\"arco-table-td arco-table-operation arco-table-drag-handle\\\\\" draggable=\\\\\"true\\\\\"><span class=\\\\\"arco-table-cell\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-drag-dot-vertical\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M17 8h2v2h-2V8ZM17 23h2v2h-2v-2ZM17 38h2v2h-2v-2ZM29 8h2v2h-2V8ZM29 23h2v2h-2v-2ZM29 38h2v2h-2v-2Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path><path d=\\\\\"M17 8h2v2h-2V8ZM17 23h2v2h-2v-2ZM17 38h2v2h-2v-2ZM29 8h2v2h-2V8ZM29 23h2v2h-2v-2ZM29 38h2v2h-2v-2Z\\\\\"></path></svg></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">William Smith</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">27000</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">62 Park Road, London</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">william.smith@example.com</span></span></td>\n              </tr>\n              <!---->\n            </tbody>\n            <!---->\n          </table>\n        </div>\n        <!--v-if-->\n        <!--v-if-->\n      </div>\n    </div>\n    <!---->\n    <div class=\\\\\"arco-table-pagination arco-table-pagination-right\\\\\">\n      <!---->\n      <div class=\\\\\"arco-pagination arco-pagination-size-medium\\\\\">\n        <!---->\n        <ul class=\\\\\"arco-pagination-list\\\\\"><span class=\\\\\"arco-pagination-item arco-pagination-item-previous arco-pagination-item-disabled\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-left\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M32 8.4 16.444 23.956 32 39.513\\\\\"></path></svg></span>\n          <li class=\\\\\"arco-pagination-item arco-pagination-item-active\\\\\" pages=\\\\\"1\\\\\">1</li>\n          <!----><span class=\\\\\"arco-pagination-item arco-pagination-item-next arco-pagination-item-disabled\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-right\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"m16 39.513 15.556-15.557L16 8.4\\\\\"></path></svg></span>\n        </ul>\n        <!---->\n        <!---->\n      </div>\n      <!---->\n    </div>\n    <!---->\n  </div>\n</div>\"\n`;\n\nexports[`<table> demo: render [drag-row] correctly 1`] = `\n\"<div class=\\\\\"arco-table arco-table-size-large arco-table-border arco-table-hover\\\\\">\n  <!---->\n  <div class=\\\\\"arco-spin\\\\\">\n    <!---->\n    <div class=\\\\\"arco-table-container\\\\\">\n      <div class=\\\\\"arco-scrollbar arco-scrollbar-type-embed\\\\\" style=\\\\\"height: 100%;\\\\\">\n        <div class=\\\\\"arco-scrollbar-container arco-table-content arco-table-content-scroll-x\\\\\">\n          <table class=\\\\\"arco-table-element\\\\\" cellpadding=\\\\\"0\\\\\" cellspacing=\\\\\"0\\\\\">\n            <colgroup>\n              <col>\n              <col>\n              <col>\n              <col>\n            </colgroup>\n            <thead>\n              <tr class=\\\\\"arco-table-tr\\\\\">\n                <th class=\\\\\"arco-table-th\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Name</span>\n                  <!---->\n                  <!----></span>\n                  <!---->\n                  <!---->\n                </th>\n                <th class=\\\\\"arco-table-th\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Salary</span>\n                  <!---->\n                  <!----></span>\n                  <!---->\n                  <!---->\n                </th>\n                <th class=\\\\\"arco-table-th\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Address</span>\n                  <!---->\n                  <!----></span>\n                  <!---->\n                  <!---->\n                </th>\n                <th class=\\\\\"arco-table-th\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Email</span>\n                  <!---->\n                  <!----></span>\n                  <!---->\n                  <!---->\n                </th>\n              </tr>\n            </thead>\n            <tbody>\n              <tr class=\\\\\"arco-table-tr arco-table-tr-draggable\\\\\" draggable=\\\\\"true\\\\\">\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">Jane Doe</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">23000</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">32 Park Road, London</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">jane.doe@example.com</span></span></td>\n              </tr>\n              <!---->\n              <tr class=\\\\\"arco-table-tr arco-table-tr-draggable\\\\\" draggable=\\\\\"true\\\\\">\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">Alisa Ross</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">25000</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">35 Park Road, London</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">alisa.ross@example.com</span></span></td>\n              </tr>\n              <!---->\n              <tr class=\\\\\"arco-table-tr arco-table-tr-draggable\\\\\" draggable=\\\\\"true\\\\\">\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">Kevin Sandra</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">22000</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">31 Park Road, London</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">kevin.sandra@example.com</span></span></td>\n              </tr>\n              <!---->\n              <tr class=\\\\\"arco-table-tr arco-table-tr-draggable\\\\\" draggable=\\\\\"true\\\\\">\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">Ed Hellen</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">17000</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">42 Park Road, London</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">ed.hellen@example.com</span></span></td>\n              </tr>\n              <!---->\n              <tr class=\\\\\"arco-table-tr arco-table-tr-draggable\\\\\" draggable=\\\\\"true\\\\\">\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">William Smith</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">27000</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">62 Park Road, London</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">william.smith@example.com</span></span></td>\n              </tr>\n              <!---->\n            </tbody>\n            <!---->\n          </table>\n        </div>\n        <!--v-if-->\n        <!--v-if-->\n      </div>\n    </div>\n    <!---->\n    <div class=\\\\\"arco-table-pagination arco-table-pagination-right\\\\\">\n      <!---->\n      <div class=\\\\\"arco-pagination arco-pagination-size-medium\\\\\">\n        <!---->\n        <ul class=\\\\\"arco-pagination-list\\\\\"><span class=\\\\\"arco-pagination-item arco-pagination-item-previous arco-pagination-item-disabled\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-left\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M32 8.4 16.444 23.956 32 39.513\\\\\"></path></svg></span>\n          <li class=\\\\\"arco-pagination-item arco-pagination-item-active\\\\\" pages=\\\\\"1\\\\\">1</li>\n          <!----><span class=\\\\\"arco-pagination-item arco-pagination-item-next arco-pagination-item-disabled\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-right\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"m16 39.513 15.556-15.557L16 8.4\\\\\"></path></svg></span>\n        </ul>\n        <!---->\n        <!---->\n      </div>\n      <!---->\n    </div>\n    <!---->\n  </div>\n</div>\"\n`;\n\nexports[`<table> demo: render [editable] correctly 1`] = `\n\"<div class=\\\\\"arco-table arco-table-size-large arco-table-border arco-table-hover\\\\\">\n  <!---->\n  <div class=\\\\\"arco-spin\\\\\">\n    <!---->\n    <div class=\\\\\"arco-table-container\\\\\">\n      <div class=\\\\\"arco-scrollbar arco-scrollbar-type-embed\\\\\" style=\\\\\"height: 100%;\\\\\">\n        <div class=\\\\\"arco-scrollbar-container arco-table-content arco-table-content-scroll-x\\\\\">\n          <table class=\\\\\"arco-table-element\\\\\" cellpadding=\\\\\"0\\\\\" cellspacing=\\\\\"0\\\\\">\n            <colgroup>\n              <col>\n              <col>\n              <col>\n              <col>\n              <col>\n              <col>\n            </colgroup>\n            <thead>\n              <tr class=\\\\\"arco-table-tr\\\\\">\n                <th class=\\\\\"arco-table-th\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Name</span>\n                  <!---->\n                  <!----></span>\n                  <!---->\n                  <!---->\n                </th>\n                <th class=\\\\\"arco-table-th\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Salary</span>\n                  <!---->\n                  <!----></span>\n                  <!---->\n                  <!---->\n                </th>\n                <th class=\\\\\"arco-table-th\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Address</span>\n                  <!---->\n                  <!----></span>\n                  <!---->\n                  <!---->\n                </th>\n                <th class=\\\\\"arco-table-th\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Province</span>\n                  <!---->\n                  <!----></span>\n                  <!---->\n                  <!---->\n                </th>\n                <th class=\\\\\"arco-table-th\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">City</span>\n                  <!---->\n                  <!----></span>\n                  <!---->\n                  <!---->\n                </th>\n                <th class=\\\\\"arco-table-th\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Email</span>\n                  <!---->\n                  <!----></span>\n                  <!---->\n                  <!---->\n                </th>\n              </tr>\n            </thead>\n            <tbody>\n              <tr class=\\\\\"arco-table-tr\\\\\">\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\"><span class=\\\\\"arco-input-wrapper\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" value=\\\\\"Jane Doe\\\\\"><!----><!----></span></span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">23000</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">32 Park Road, London</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\"><span class=\\\\\"arco-select-view-single arco-select arco-select-view arco-select-view-size-medium\\\\\" title=\\\\\"\\\\\"><!----><input class=\\\\\"arco-select-view-input\\\\\" readonly=\\\\\"\\\\\" value=\\\\\"\\\\\"><span class=\\\\\"arco-select-view-value arco-select-view-value-hidden\\\\\"><!----></span><span class=\\\\\"arco-select-view-suffix\\\\\"><!----><span class=\\\\\"arco-select-view-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down arco-select-view-arrow-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n                  <!----></span></span>\n                  <!----></span></span>\n                </td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\"><span class=\\\\\"arco-select-view-single arco-select arco-select-view arco-select-view-size-medium\\\\\" title=\\\\\"Haidian\\\\\"><!----><input class=\\\\\"arco-select-view-input arco-select-view-input-hidden\\\\\" readonly=\\\\\"\\\\\" value=\\\\\"\\\\\"><span class=\\\\\"arco-select-view-value\\\\\">Haidian</span><span class=\\\\\"arco-select-view-suffix\\\\\"><!----><span class=\\\\\"arco-select-view-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down arco-select-view-arrow-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n                  <!----></span></span>\n                  <!----></span></span>\n                </td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">jane.doe@example.com</span></span></td>\n              </tr>\n              <!---->\n              <tr class=\\\\\"arco-table-tr\\\\\">\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\"><span class=\\\\\"arco-input-wrapper\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" value=\\\\\"Alisa Ross\\\\\"><!----><!----></span></span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">25000</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">35 Park Road, London</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\"><span class=\\\\\"arco-select-view-single arco-select arco-select-view arco-select-view-size-medium\\\\\" title=\\\\\"\\\\\"><!----><input class=\\\\\"arco-select-view-input\\\\\" readonly=\\\\\"\\\\\" value=\\\\\"\\\\\"><span class=\\\\\"arco-select-view-value arco-select-view-value-hidden\\\\\"><!----></span><span class=\\\\\"arco-select-view-suffix\\\\\"><!----><span class=\\\\\"arco-select-view-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down arco-select-view-arrow-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n                  <!----></span></span>\n                  <!----></span></span>\n                </td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\"><span class=\\\\\"arco-select-view-single arco-select arco-select-view arco-select-view-size-medium\\\\\" title=\\\\\"\\\\\"><!----><input class=\\\\\"arco-select-view-input\\\\\" readonly=\\\\\"\\\\\" value=\\\\\"\\\\\"><span class=\\\\\"arco-select-view-value arco-select-view-value-hidden\\\\\"><!----></span><span class=\\\\\"arco-select-view-suffix\\\\\"><!----><span class=\\\\\"arco-select-view-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down arco-select-view-arrow-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n                  <!----></span></span>\n                  <!----></span></span>\n                </td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">alisa.ross@example.com</span></span></td>\n              </tr>\n              <!---->\n              <tr class=\\\\\"arco-table-tr\\\\\">\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\"><span class=\\\\\"arco-input-wrapper\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" value=\\\\\"Kevin Sandra\\\\\"><!----><!----></span></span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">22000</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">31 Park Road, London</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\"><span class=\\\\\"arco-select-view-single arco-select arco-select-view arco-select-view-size-medium\\\\\" title=\\\\\"\\\\\"><!----><input class=\\\\\"arco-select-view-input\\\\\" readonly=\\\\\"\\\\\" value=\\\\\"\\\\\"><span class=\\\\\"arco-select-view-value arco-select-view-value-hidden\\\\\"><!----></span><span class=\\\\\"arco-select-view-suffix\\\\\"><!----><span class=\\\\\"arco-select-view-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down arco-select-view-arrow-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n                  <!----></span></span>\n                  <!----></span></span>\n                </td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\"><span class=\\\\\"arco-select-view-single arco-select arco-select-view arco-select-view-size-medium\\\\\" title=\\\\\"Mianyang\\\\\"><!----><input class=\\\\\"arco-select-view-input arco-select-view-input-hidden\\\\\" readonly=\\\\\"\\\\\" value=\\\\\"\\\\\"><span class=\\\\\"arco-select-view-value\\\\\">Mianyang</span><span class=\\\\\"arco-select-view-suffix\\\\\"><!----><span class=\\\\\"arco-select-view-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down arco-select-view-arrow-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n                  <!----></span></span>\n                  <!----></span></span>\n                </td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">kevin.sandra@example.com</span></span></td>\n              </tr>\n              <!---->\n              <tr class=\\\\\"arco-table-tr\\\\\">\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\"><span class=\\\\\"arco-input-wrapper\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" value=\\\\\"Ed Hellen\\\\\"><!----><!----></span></span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">17000</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">42 Park Road, London</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\"><span class=\\\\\"arco-select-view-single arco-select arco-select-view arco-select-view-size-medium\\\\\" title=\\\\\"\\\\\"><!----><input class=\\\\\"arco-select-view-input\\\\\" readonly=\\\\\"\\\\\" value=\\\\\"\\\\\"><span class=\\\\\"arco-select-view-value arco-select-view-value-hidden\\\\\"><!----></span><span class=\\\\\"arco-select-view-suffix\\\\\"><!----><span class=\\\\\"arco-select-view-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down arco-select-view-arrow-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n                  <!----></span></span>\n                  <!----></span></span>\n                </td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\"><span class=\\\\\"arco-select-view-single arco-select arco-select-view arco-select-view-size-medium\\\\\" title=\\\\\"\\\\\"><!----><input class=\\\\\"arco-select-view-input\\\\\" readonly=\\\\\"\\\\\" value=\\\\\"\\\\\"><span class=\\\\\"arco-select-view-value arco-select-view-value-hidden\\\\\"><!----></span><span class=\\\\\"arco-select-view-suffix\\\\\"><!----><span class=\\\\\"arco-select-view-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down arco-select-view-arrow-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n                  <!----></span></span>\n                  <!----></span></span>\n                </td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">ed.hellen@example.com</span></span></td>\n              </tr>\n              <!---->\n              <tr class=\\\\\"arco-table-tr\\\\\">\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\"><span class=\\\\\"arco-input-wrapper\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" value=\\\\\"William Smith\\\\\"><!----><!----></span></span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">27000</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">62 Park Road, London</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\"><span class=\\\\\"arco-select-view-single arco-select arco-select-view arco-select-view-size-medium\\\\\" title=\\\\\"\\\\\"><!----><input class=\\\\\"arco-select-view-input\\\\\" readonly=\\\\\"\\\\\" value=\\\\\"\\\\\"><span class=\\\\\"arco-select-view-value arco-select-view-value-hidden\\\\\"><!----></span><span class=\\\\\"arco-select-view-suffix\\\\\"><!----><span class=\\\\\"arco-select-view-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down arco-select-view-arrow-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n                  <!----></span></span>\n                  <!----></span></span>\n                </td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\"><span class=\\\\\"arco-select-view-single arco-select arco-select-view arco-select-view-size-medium\\\\\" title=\\\\\"\\\\\"><!----><input class=\\\\\"arco-select-view-input\\\\\" readonly=\\\\\"\\\\\" value=\\\\\"\\\\\"><span class=\\\\\"arco-select-view-value arco-select-view-value-hidden\\\\\"><!----></span><span class=\\\\\"arco-select-view-suffix\\\\\"><!----><span class=\\\\\"arco-select-view-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down arco-select-view-arrow-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n                  <!----></span></span>\n                  <!----></span></span>\n                </td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">william.smith@example.com</span></span></td>\n              </tr>\n              <!---->\n            </tbody>\n            <!---->\n          </table>\n        </div>\n        <!--v-if-->\n        <!--v-if-->\n      </div>\n    </div>\n    <!---->\n    <div class=\\\\\"arco-table-pagination arco-table-pagination-right\\\\\">\n      <!---->\n      <div class=\\\\\"arco-pagination arco-pagination-size-medium\\\\\">\n        <!---->\n        <ul class=\\\\\"arco-pagination-list\\\\\"><span class=\\\\\"arco-pagination-item arco-pagination-item-previous arco-pagination-item-disabled\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-left\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M32 8.4 16.444 23.956 32 39.513\\\\\"></path></svg></span>\n          <li class=\\\\\"arco-pagination-item arco-pagination-item-active\\\\\" pages=\\\\\"1\\\\\">1</li>\n          <!----><span class=\\\\\"arco-pagination-item arco-pagination-item-next arco-pagination-item-disabled\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-right\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"m16 39.513 15.556-15.557L16 8.4\\\\\"></path></svg></span>\n        </ul>\n        <!---->\n        <!---->\n      </div>\n      <!---->\n    </div>\n    <!---->\n  </div>\n</div>\n<!-- support from v2.25.0  -->\n<div class=\\\\\"arco-table arco-table-size-large arco-table-border arco-table-hover\\\\\" style=\\\\\"margin-top: 20px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-spin\\\\\">\n    <!---->\n    <div class=\\\\\"arco-table-container\\\\\">\n      <div class=\\\\\"arco-scrollbar arco-scrollbar-type-embed\\\\\" style=\\\\\"height: 100%;\\\\\">\n        <div class=\\\\\"arco-scrollbar-container arco-table-content arco-table-content-scroll-x\\\\\">\n          <table class=\\\\\"arco-table-element\\\\\" cellpadding=\\\\\"0\\\\\" cellspacing=\\\\\"0\\\\\">\n            <colgroup>\n              <col>\n              <col>\n              <col>\n              <col>\n              <col>\n              <col>\n            </colgroup>\n            <thead>\n              <tr class=\\\\\"arco-table-tr\\\\\">\n                <th class=\\\\\"arco-table-th\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Name</span>\n                  <!---->\n                  <!----></span>\n                  <!---->\n                  <!---->\n                </th>\n                <th class=\\\\\"arco-table-th\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Salary</span>\n                  <!---->\n                  <!----></span>\n                  <!---->\n                  <!---->\n                </th>\n                <th class=\\\\\"arco-table-th\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Address</span>\n                  <!---->\n                  <!----></span>\n                  <!---->\n                  <!---->\n                </th>\n                <th class=\\\\\"arco-table-th\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Province</span>\n                  <!---->\n                  <!----></span>\n                  <!---->\n                  <!---->\n                </th>\n                <th class=\\\\\"arco-table-th\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">City</span>\n                  <!---->\n                  <!----></span>\n                  <!---->\n                  <!---->\n                </th>\n                <th class=\\\\\"arco-table-th\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Email</span>\n                  <!---->\n                  <!----></span>\n                  <!---->\n                  <!---->\n                </th>\n              </tr>\n            </thead>\n            <tbody>\n              <tr class=\\\\\"arco-table-tr\\\\\">\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\"><span class=\\\\\"arco-input-wrapper\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" value=\\\\\"Jane Doe\\\\\"><!----><!----></span></span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">23000</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">32 Park Road, London</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\"><span class=\\\\\"arco-select-view-single arco-select arco-select-view arco-select-view-size-medium\\\\\" title=\\\\\"\\\\\"><!----><input class=\\\\\"arco-select-view-input\\\\\" readonly=\\\\\"\\\\\" value=\\\\\"\\\\\"><span class=\\\\\"arco-select-view-value arco-select-view-value-hidden\\\\\"><!----></span><span class=\\\\\"arco-select-view-suffix\\\\\"><!----><span class=\\\\\"arco-select-view-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down arco-select-view-arrow-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n                  <!----></span></span>\n                  <!----></span></span>\n                </td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\"><span class=\\\\\"arco-select-view-single arco-select arco-select-view arco-select-view-size-medium\\\\\" title=\\\\\"Haidian\\\\\"><!----><input class=\\\\\"arco-select-view-input arco-select-view-input-hidden\\\\\" readonly=\\\\\"\\\\\" value=\\\\\"\\\\\"><span class=\\\\\"arco-select-view-value\\\\\">Haidian</span><span class=\\\\\"arco-select-view-suffix\\\\\"><!----><span class=\\\\\"arco-select-view-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down arco-select-view-arrow-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n                  <!----></span></span>\n                  <!----></span></span>\n                </td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">jane.doe@example.com</span></span></td>\n              </tr>\n              <!---->\n              <tr class=\\\\\"arco-table-tr\\\\\">\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\"><span class=\\\\\"arco-input-wrapper\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" value=\\\\\"Alisa Ross\\\\\"><!----><!----></span></span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">25000</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">35 Park Road, London</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\"><span class=\\\\\"arco-select-view-single arco-select arco-select-view arco-select-view-size-medium\\\\\" title=\\\\\"\\\\\"><!----><input class=\\\\\"arco-select-view-input\\\\\" readonly=\\\\\"\\\\\" value=\\\\\"\\\\\"><span class=\\\\\"arco-select-view-value arco-select-view-value-hidden\\\\\"><!----></span><span class=\\\\\"arco-select-view-suffix\\\\\"><!----><span class=\\\\\"arco-select-view-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down arco-select-view-arrow-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n                  <!----></span></span>\n                  <!----></span></span>\n                </td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\"><span class=\\\\\"arco-select-view-single arco-select arco-select-view arco-select-view-size-medium\\\\\" title=\\\\\"\\\\\"><!----><input class=\\\\\"arco-select-view-input\\\\\" readonly=\\\\\"\\\\\" value=\\\\\"\\\\\"><span class=\\\\\"arco-select-view-value arco-select-view-value-hidden\\\\\"><!----></span><span class=\\\\\"arco-select-view-suffix\\\\\"><!----><span class=\\\\\"arco-select-view-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down arco-select-view-arrow-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n                  <!----></span></span>\n                  <!----></span></span>\n                </td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">alisa.ross@example.com</span></span></td>\n              </tr>\n              <!---->\n              <tr class=\\\\\"arco-table-tr\\\\\">\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\"><span class=\\\\\"arco-input-wrapper\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" value=\\\\\"Kevin Sandra\\\\\"><!----><!----></span></span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">22000</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">31 Park Road, London</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\"><span class=\\\\\"arco-select-view-single arco-select arco-select-view arco-select-view-size-medium\\\\\" title=\\\\\"\\\\\"><!----><input class=\\\\\"arco-select-view-input\\\\\" readonly=\\\\\"\\\\\" value=\\\\\"\\\\\"><span class=\\\\\"arco-select-view-value arco-select-view-value-hidden\\\\\"><!----></span><span class=\\\\\"arco-select-view-suffix\\\\\"><!----><span class=\\\\\"arco-select-view-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down arco-select-view-arrow-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n                  <!----></span></span>\n                  <!----></span></span>\n                </td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\"><span class=\\\\\"arco-select-view-single arco-select arco-select-view arco-select-view-size-medium\\\\\" title=\\\\\"Mianyang\\\\\"><!----><input class=\\\\\"arco-select-view-input arco-select-view-input-hidden\\\\\" readonly=\\\\\"\\\\\" value=\\\\\"\\\\\"><span class=\\\\\"arco-select-view-value\\\\\">Mianyang</span><span class=\\\\\"arco-select-view-suffix\\\\\"><!----><span class=\\\\\"arco-select-view-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down arco-select-view-arrow-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n                  <!----></span></span>\n                  <!----></span></span>\n                </td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">kevin.sandra@example.com</span></span></td>\n              </tr>\n              <!---->\n              <tr class=\\\\\"arco-table-tr\\\\\">\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\"><span class=\\\\\"arco-input-wrapper\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" value=\\\\\"Ed Hellen\\\\\"><!----><!----></span></span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">17000</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">42 Park Road, London</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\"><span class=\\\\\"arco-select-view-single arco-select arco-select-view arco-select-view-size-medium\\\\\" title=\\\\\"\\\\\"><!----><input class=\\\\\"arco-select-view-input\\\\\" readonly=\\\\\"\\\\\" value=\\\\\"\\\\\"><span class=\\\\\"arco-select-view-value arco-select-view-value-hidden\\\\\"><!----></span><span class=\\\\\"arco-select-view-suffix\\\\\"><!----><span class=\\\\\"arco-select-view-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down arco-select-view-arrow-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n                  <!----></span></span>\n                  <!----></span></span>\n                </td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\"><span class=\\\\\"arco-select-view-single arco-select arco-select-view arco-select-view-size-medium\\\\\" title=\\\\\"\\\\\"><!----><input class=\\\\\"arco-select-view-input\\\\\" readonly=\\\\\"\\\\\" value=\\\\\"\\\\\"><span class=\\\\\"arco-select-view-value arco-select-view-value-hidden\\\\\"><!----></span><span class=\\\\\"arco-select-view-suffix\\\\\"><!----><span class=\\\\\"arco-select-view-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down arco-select-view-arrow-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n                  <!----></span></span>\n                  <!----></span></span>\n                </td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">ed.hellen@example.com</span></span></td>\n              </tr>\n              <!---->\n              <tr class=\\\\\"arco-table-tr\\\\\">\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\"><span class=\\\\\"arco-input-wrapper\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" value=\\\\\"William Smith\\\\\"><!----><!----></span></span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">27000</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">62 Park Road, London</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\"><span class=\\\\\"arco-select-view-single arco-select arco-select-view arco-select-view-size-medium\\\\\" title=\\\\\"\\\\\"><!----><input class=\\\\\"arco-select-view-input\\\\\" readonly=\\\\\"\\\\\" value=\\\\\"\\\\\"><span class=\\\\\"arco-select-view-value arco-select-view-value-hidden\\\\\"><!----></span><span class=\\\\\"arco-select-view-suffix\\\\\"><!----><span class=\\\\\"arco-select-view-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down arco-select-view-arrow-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n                  <!----></span></span>\n                  <!----></span></span>\n                </td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\"><span class=\\\\\"arco-select-view-single arco-select arco-select-view arco-select-view-size-medium\\\\\" title=\\\\\"\\\\\"><!----><input class=\\\\\"arco-select-view-input\\\\\" readonly=\\\\\"\\\\\" value=\\\\\"\\\\\"><span class=\\\\\"arco-select-view-value arco-select-view-value-hidden\\\\\"><!----></span><span class=\\\\\"arco-select-view-suffix\\\\\"><!----><span class=\\\\\"arco-select-view-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down arco-select-view-arrow-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n                  <!----></span></span>\n                  <!----></span></span>\n                </td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">william.smith@example.com</span></span></td>\n              </tr>\n              <!---->\n            </tbody>\n            <!---->\n          </table>\n        </div>\n        <!--v-if-->\n        <!--v-if-->\n      </div>\n    </div>\n    <!---->\n    <div class=\\\\\"arco-table-pagination arco-table-pagination-right\\\\\">\n      <!---->\n      <div class=\\\\\"arco-pagination arco-pagination-size-medium\\\\\">\n        <!---->\n        <ul class=\\\\\"arco-pagination-list\\\\\"><span class=\\\\\"arco-pagination-item arco-pagination-item-previous arco-pagination-item-disabled\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-left\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M32 8.4 16.444 23.956 32 39.513\\\\\"></path></svg></span>\n          <li class=\\\\\"arco-pagination-item arco-pagination-item-active\\\\\" pages=\\\\\"1\\\\\">1</li>\n          <!----><span class=\\\\\"arco-pagination-item arco-pagination-item-next arco-pagination-item-disabled\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-right\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"m16 39.513 15.556-15.557L16 8.4\\\\\"></path></svg></span>\n        </ul>\n        <!---->\n        <!---->\n      </div>\n      <!---->\n    </div>\n    <!---->\n  </div>\n</div>\"\n`;\n\nexports[`<table> demo: render [ellipsis] correctly 1`] = `\n\"<div class=\\\\\"arco-table arco-table-size-large arco-table-border arco-table-hover arco-table-layout-fixed\\\\\">\n  <!---->\n  <div class=\\\\\"arco-spin\\\\\">\n    <!---->\n    <div class=\\\\\"arco-table-container\\\\\">\n      <div class=\\\\\"arco-scrollbar arco-scrollbar-type-embed\\\\\" style=\\\\\"height: 100%;\\\\\">\n        <div class=\\\\\"arco-scrollbar-container arco-table-content arco-table-content-scroll-x\\\\\">\n          <table class=\\\\\"arco-table-element\\\\\" cellpadding=\\\\\"0\\\\\" cellspacing=\\\\\"0\\\\\">\n            <colgroup>\n              <col style=\\\\\"width: 100px; min-width: 100px; max-width: 100px;\\\\\">\n              <col>\n              <col style=\\\\\"width: 150px; min-width: 150px; max-width: 150px;\\\\\">\n              <col style=\\\\\"width: 200px; min-width: 200px; max-width: 200px;\\\\\">\n            </colgroup>\n            <thead>\n              <tr class=\\\\\"arco-table-tr\\\\\">\n                <th class=\\\\\"arco-table-th\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-auto-tooltip arco-table-th-title\\\\\"><span class=\\\\\"arco-auto-tooltip-content\\\\\">Name</span></span>\n                  <!---->\n                  <!----></span>\n                  <!---->\n                  <!---->\n                </th>\n                <th class=\\\\\"arco-table-th\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Salary</span>\n                  <!---->\n                  <!----></span>\n                  <!---->\n                  <!---->\n                </th>\n                <th class=\\\\\"arco-table-th\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title arco-table-text-ellipsis\\\\\">Address</span>\n                  <!---->\n                  <!----></span>\n                  <!---->\n                  <!---->\n                </th>\n                <th class=\\\\\"arco-table-th\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-auto-tooltip arco-table-th-title\\\\\"><span class=\\\\\"arco-auto-tooltip-content\\\\\">Email</span></span>\n                  <!---->\n                  <!----></span>\n                  <!---->\n                  <!---->\n                </th>\n              </tr>\n            </thead>\n            <tbody>\n              <tr class=\\\\\"arco-table-tr\\\\\">\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-auto-tooltip arco-table-td-content\\\\\"><span class=\\\\\"arco-auto-tooltip-content\\\\\">Jane Doe</span></span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">23000</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content arco-table-text-ellipsis\\\\\">32 Park Road, London</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-auto-tooltip arco-table-td-content\\\\\"><span class=\\\\\"arco-auto-tooltip-content\\\\\">jane.doe@example.com</span></span></span></td>\n              </tr>\n              <!---->\n              <tr class=\\\\\"arco-table-tr\\\\\">\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-auto-tooltip arco-table-td-content\\\\\"><span class=\\\\\"arco-auto-tooltip-content\\\\\">Alisa Ross</span></span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">25000</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content arco-table-text-ellipsis\\\\\">35 Park Road, London</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-auto-tooltip arco-table-td-content\\\\\"><span class=\\\\\"arco-auto-tooltip-content\\\\\">alisa.ross@example.com</span></span></span></td>\n              </tr>\n              <!---->\n              <tr class=\\\\\"arco-table-tr\\\\\">\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-auto-tooltip arco-table-td-content\\\\\"><span class=\\\\\"arco-auto-tooltip-content\\\\\">Kevin Sandra</span></span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">22000</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content arco-table-text-ellipsis\\\\\">31 Park Road, London</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-auto-tooltip arco-table-td-content\\\\\"><span class=\\\\\"arco-auto-tooltip-content\\\\\">kevin.sandra@example.com</span></span></span></td>\n              </tr>\n              <!---->\n              <tr class=\\\\\"arco-table-tr\\\\\">\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-auto-tooltip arco-table-td-content\\\\\"><span class=\\\\\"arco-auto-tooltip-content\\\\\">Ed Hellen</span></span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">17000</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content arco-table-text-ellipsis\\\\\">42 Park Road, London</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-auto-tooltip arco-table-td-content\\\\\"><span class=\\\\\"arco-auto-tooltip-content\\\\\">ed.hellen@example.com</span></span></span></td>\n              </tr>\n              <!---->\n              <tr class=\\\\\"arco-table-tr\\\\\">\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-auto-tooltip arco-table-td-content\\\\\"><span class=\\\\\"arco-auto-tooltip-content\\\\\">William Smith</span></span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">27000</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content arco-table-text-ellipsis\\\\\">62 Park Road, London</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-auto-tooltip arco-table-td-content\\\\\"><span class=\\\\\"arco-auto-tooltip-content\\\\\">william.smith@example.com</span></span></span></td>\n              </tr>\n              <!---->\n            </tbody>\n            <!---->\n          </table>\n        </div>\n        <!--v-if-->\n        <!--v-if-->\n      </div>\n    </div>\n    <!---->\n    <div class=\\\\\"arco-table-pagination arco-table-pagination-right\\\\\">\n      <!---->\n      <div class=\\\\\"arco-pagination arco-pagination-size-medium\\\\\">\n        <!---->\n        <ul class=\\\\\"arco-pagination-list\\\\\"><span class=\\\\\"arco-pagination-item arco-pagination-item-previous arco-pagination-item-disabled\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-left\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M32 8.4 16.444 23.956 32 39.513\\\\\"></path></svg></span>\n          <li class=\\\\\"arco-pagination-item arco-pagination-item-active\\\\\" pages=\\\\\"1\\\\\">1</li>\n          <!----><span class=\\\\\"arco-pagination-item arco-pagination-item-next arco-pagination-item-disabled\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-right\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"m16 39.513 15.556-15.557L16 8.4\\\\\"></path></svg></span>\n        </ul>\n        <!---->\n        <!---->\n      </div>\n      <!---->\n    </div>\n    <!---->\n  </div>\n</div>\"\n`;\n\nexports[`<table> demo: render [expand] correctly 1`] = `\n\"<div class=\\\\\"arco-table arco-table-size-large arco-table-border arco-table-hover\\\\\">\n  <!---->\n  <div class=\\\\\"arco-spin\\\\\">\n    <!---->\n    <div class=\\\\\"arco-table-container\\\\\">\n      <div class=\\\\\"arco-scrollbar arco-scrollbar-type-embed\\\\\" style=\\\\\"height: 100%;\\\\\">\n        <div class=\\\\\"arco-scrollbar-container arco-table-content arco-table-content-scroll-x\\\\\">\n          <table class=\\\\\"arco-table-element\\\\\" cellpadding=\\\\\"0\\\\\" cellspacing=\\\\\"0\\\\\">\n            <colgroup>\n              <col class=\\\\\"arco-table-expand-col\\\\\" style=\\\\\"width: 80px; min-width: 80px; max-width: 80px;\\\\\">\n              <col>\n              <col>\n              <col>\n              <col>\n            </colgroup>\n            <thead>\n              <tr class=\\\\\"arco-table-tr\\\\\">\n                <th class=\\\\\"arco-table-th arco-table-operation\\\\\"><span class=\\\\\"arco-table-cell\\\\\">Expand</span></th>\n                <th class=\\\\\"arco-table-th\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Name</span>\n                  <!---->\n                  <!----></span>\n                  <!---->\n                  <!---->\n                </th>\n                <th class=\\\\\"arco-table-th\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Salary</span>\n                  <!---->\n                  <!----></span>\n                  <!---->\n                  <!---->\n                </th>\n                <th class=\\\\\"arco-table-th\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Address</span>\n                  <!---->\n                  <!----></span>\n                  <!---->\n                  <!---->\n                </th>\n                <th class=\\\\\"arco-table-th\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Email</span>\n                  <!---->\n                  <!----></span>\n                  <!---->\n                  <!---->\n                </th>\n              </tr>\n            </thead>\n            <tbody>\n              <tr class=\\\\\"arco-table-tr\\\\\">\n                <td class=\\\\\"arco-table-td arco-table-operation arco-table-expand\\\\\"><span class=\\\\\"arco-table-cell\\\\\"><button type=\\\\\"button\\\\\" class=\\\\\"arco-table-expand-btn\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-plus\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M5 24h38M24 5v38\\\\\"></path></svg></button></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">Jane Doe</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">23000</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">32 Park Road, London</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">jane.doe@example.com</span></span></td>\n              </tr>\n              <!---->\n              <tr class=\\\\\"arco-table-tr\\\\\">\n                <td class=\\\\\"arco-table-td arco-table-operation arco-table-expand\\\\\"><span class=\\\\\"arco-table-cell\\\\\"><!----></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">Alisa Ross</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">25000</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">35 Park Road, London</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">alisa.ross@example.com</span></span></td>\n              </tr>\n              <!---->\n              <tr class=\\\\\"arco-table-tr\\\\\">\n                <td class=\\\\\"arco-table-td arco-table-operation arco-table-expand\\\\\"><span class=\\\\\"arco-table-cell\\\\\"><button type=\\\\\"button\\\\\" class=\\\\\"arco-table-expand-btn\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-plus\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M5 24h38M24 5v38\\\\\"></path></svg></button></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">Kevin Sandra</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">22000</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">31 Park Road, London</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">kevin.sandra@example.com</span></span></td>\n              </tr>\n              <!---->\n              <tr class=\\\\\"arco-table-tr\\\\\">\n                <td class=\\\\\"arco-table-td arco-table-operation arco-table-expand\\\\\"><span class=\\\\\"arco-table-cell\\\\\"><!----></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">Ed Hellen</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">17000</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">42 Park Road, London</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">ed.hellen@example.com</span></span></td>\n              </tr>\n              <!---->\n              <tr class=\\\\\"arco-table-tr\\\\\">\n                <td class=\\\\\"arco-table-td arco-table-operation arco-table-expand\\\\\"><span class=\\\\\"arco-table-cell\\\\\"><!----></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">William Smith</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">27000</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">62 Park Road, London</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">william.smith@example.com</span></span></td>\n              </tr>\n              <!---->\n            </tbody>\n            <!---->\n          </table>\n        </div>\n        <!--v-if-->\n        <!--v-if-->\n      </div>\n    </div>\n    <!---->\n    <div class=\\\\\"arco-table-pagination arco-table-pagination-right\\\\\">\n      <!---->\n      <div class=\\\\\"arco-pagination arco-pagination-size-medium\\\\\">\n        <!---->\n        <ul class=\\\\\"arco-pagination-list\\\\\"><span class=\\\\\"arco-pagination-item arco-pagination-item-previous arco-pagination-item-disabled\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-left\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M32 8.4 16.444 23.956 32 39.513\\\\\"></path></svg></span>\n          <li class=\\\\\"arco-pagination-item arco-pagination-item-active\\\\\" pages=\\\\\"1\\\\\">1</li>\n          <!----><span class=\\\\\"arco-pagination-item arco-pagination-item-next arco-pagination-item-disabled\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-right\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"m16 39.513 15.556-15.557L16 8.4\\\\\"></path></svg></span>\n        </ul>\n        <!---->\n        <!---->\n      </div>\n      <!---->\n    </div>\n    <!---->\n  </div>\n</div>\"\n`;\n\nexports[`<table> demo: render [filter] correctly 1`] = `\n\"<div class=\\\\\"arco-table arco-table-size-large arco-table-border arco-table-hover\\\\\">\n  <!---->\n  <div class=\\\\\"arco-spin\\\\\">\n    <!---->\n    <div class=\\\\\"arco-table-container\\\\\">\n      <div class=\\\\\"arco-scrollbar arco-scrollbar-type-embed\\\\\" style=\\\\\"height: 100%;\\\\\">\n        <div class=\\\\\"arco-scrollbar-container arco-table-content arco-table-content-scroll-x\\\\\">\n          <table class=\\\\\"arco-table-element\\\\\" cellpadding=\\\\\"0\\\\\" cellspacing=\\\\\"0\\\\\">\n            <colgroup>\n              <col>\n              <col>\n              <col>\n              <col>\n            </colgroup>\n            <thead>\n              <tr class=\\\\\"arco-table-tr\\\\\">\n                <th class=\\\\\"arco-table-th\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Name</span>\n                  <!---->\n                  <!----></span><span class=\\\\\"arco-icon-hover arco-icon-hover-disabled arco-table-filters\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-search\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M33.072 33.071c6.248-6.248 6.248-16.379 0-22.627-6.249-6.249-16.38-6.249-22.628 0-6.248 6.248-6.248 16.379 0 22.627 6.248 6.248 16.38 6.248 22.628 0Zm0 0 8.485 8.485\\\\\"></path></svg></span>\n                  <!---->\n                  <!---->\n                </th>\n                <th class=\\\\\"arco-table-th\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left arco-table-cell-with-sorter arco-table-cell-next-ascend\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Salary</span><span class=\\\\\"arco-table-sorter\\\\\"><div class=\\\\\"arco-table-sorter-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-caret-up\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M23.063 13.171a1.2 1.2 0 0 1 1.875 0l13.503 16.88c.628.785.069 1.949-.937 1.949H10.497c-1.006 0-1.565-1.164-.937-1.95l13.503-16.879Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path></svg></div><!----></span>\n                  <!----></span>\n                  <!---->\n                  <!---->\n                </th>\n                <th class=\\\\\"arco-table-th\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Address</span>\n                  <!---->\n                  <!----></span>\n                  <!---->\n                  <!---->\n                </th>\n                <th class=\\\\\"arco-table-th\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Email</span>\n                  <!---->\n                  <!----></span>\n                  <!---->\n                  <!---->\n                </th>\n              </tr>\n            </thead>\n            <tbody>\n              <tr class=\\\\\"arco-table-tr\\\\\">\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">Jane Doe</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">23000</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">32 Park Road, London</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">jane.doe@example.com</span></span></td>\n              </tr>\n              <!---->\n              <tr class=\\\\\"arco-table-tr\\\\\">\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">Alisa Ross</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">25000</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">35 Park Road, London</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">alisa.ross@example.com</span></span></td>\n              </tr>\n              <!---->\n              <tr class=\\\\\"arco-table-tr\\\\\">\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">Kevin Sandra</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">22000</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">31 Park Road, London</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">kevin.sandra@example.com</span></span></td>\n              </tr>\n              <!---->\n              <tr class=\\\\\"arco-table-tr\\\\\">\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">Ed Hellen</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">17000</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">42 Park Road, London</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">ed.hellen@example.com</span></span></td>\n              </tr>\n              <!---->\n              <tr class=\\\\\"arco-table-tr\\\\\">\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">William Smith</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">27000</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">62 Park Road, London</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">william.smith@example.com</span></span></td>\n              </tr>\n              <!---->\n            </tbody>\n            <!---->\n          </table>\n        </div>\n        <!--v-if-->\n        <!--v-if-->\n      </div>\n    </div>\n    <!---->\n    <div class=\\\\\"arco-table-pagination arco-table-pagination-right\\\\\">\n      <!---->\n      <div class=\\\\\"arco-pagination arco-pagination-size-medium\\\\\">\n        <!---->\n        <ul class=\\\\\"arco-pagination-list\\\\\"><span class=\\\\\"arco-pagination-item arco-pagination-item-previous arco-pagination-item-disabled\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-left\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M32 8.4 16.444 23.956 32 39.513\\\\\"></path></svg></span>\n          <li class=\\\\\"arco-pagination-item arco-pagination-item-active\\\\\" pages=\\\\\"1\\\\\">1</li>\n          <!----><span class=\\\\\"arco-pagination-item arco-pagination-item-next arco-pagination-item-disabled\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-right\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"m16 39.513 15.556-15.557L16 8.4\\\\\"></path></svg></span>\n        </ul>\n        <!---->\n        <!---->\n      </div>\n      <!---->\n    </div>\n    <!---->\n  </div>\n</div>\"\n`;\n\nexports[`<table> demo: render [fixed] correctly 1`] = `\n\"<div class=\\\\\"arco-table arco-table-size-large arco-table-border arco-table-hover arco-table-layout-fixed\\\\\">\n  <!---->\n  <div class=\\\\\"arco-spin\\\\\">\n    <!---->\n    <div class=\\\\\"arco-table-container arco-table-has-fixed-col-left arco-table-has-fixed-col-right arco-table-scroll-position-both arco-table-scroll-y\\\\\">\n      <div class=\\\\\"arco-scrollbar arco-scrollbar-type-embed\\\\\" style=\\\\\"height: 100%;\\\\\">\n        <div class=\\\\\"arco-scrollbar-container arco-table-content\\\\\">\n          <div class=\\\\\"arco-scrollbar arco-scrollbar-type-embed\\\\\">\n            <div class=\\\\\"arco-scrollbar-container arco-table-header\\\\\">\n              <table class=\\\\\"arco-table-element\\\\\" style=\\\\\"width: 2000px;\\\\\" cellpadding=\\\\\"0\\\\\" cellspacing=\\\\\"0\\\\\">\n                <colgroup>\n                  <col class=\\\\\"arco-table-expand-col\\\\\" style=\\\\\"width: 80px; min-width: 80px; max-width: 80px;\\\\\">\n                  <col style=\\\\\"width: 140px; min-width: 140px; max-width: 140px;\\\\\">\n                  <col>\n                  <col>\n                  <col style=\\\\\"width: 200px; min-width: 200px; max-width: 200px;\\\\\">\n                </colgroup>\n                <thead>\n                  <tr class=\\\\\"arco-table-tr\\\\\">\n                    <th class=\\\\\"arco-table-th arco-table-operation arco-table-col-fixed-left\\\\\" style=\\\\\"left: 0px;\\\\\"><span class=\\\\\"arco-table-cell\\\\\">Expand</span></th>\n                    <th class=\\\\\"arco-table-th arco-table-col-fixed-left arco-table-col-fixed-left-last\\\\\" style=\\\\\"left: 80px;\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Name</span>\n                      <!---->\n                      <!----></span>\n                      <!---->\n                      <!---->\n                    </th>\n                    <th class=\\\\\"arco-table-th\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Salary</span>\n                      <!---->\n                      <!----></span>\n                      <!---->\n                      <!---->\n                    </th>\n                    <th class=\\\\\"arco-table-th\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Address</span>\n                      <!---->\n                      <!----></span>\n                      <!---->\n                      <!---->\n                    </th>\n                    <th class=\\\\\"arco-table-th arco-table-col-fixed-right arco-table-col-fixed-right-first\\\\\" style=\\\\\"right: 0px;\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Email</span>\n                      <!---->\n                      <!----></span>\n                      <!---->\n                      <!---->\n                    </th>\n                  </tr>\n                </thead>\n              </table>\n            </div>\n            <!--v-if-->\n            <!--v-if-->\n          </div>\n          <div class=\\\\\"arco-scrollbar arco-scrollbar-type-embed\\\\\" style=\\\\\"display: flex; min-height: 0;\\\\\">\n            <div class=\\\\\"arco-scrollbar-container arco-table-body\\\\\" style=\\\\\"max-height: 200px;\\\\\">\n              <table class=\\\\\"arco-table-element\\\\\" style=\\\\\"width: 2000px;\\\\\" cellpadding=\\\\\"0\\\\\" cellspacing=\\\\\"0\\\\\">\n                <colgroup>\n                  <col class=\\\\\"arco-table-expand-col\\\\\" style=\\\\\"width: 80px; min-width: 80px; max-width: 80px;\\\\\">\n                  <col style=\\\\\"width: 140px; min-width: 140px; max-width: 140px;\\\\\">\n                  <col>\n                  <col>\n                  <col style=\\\\\"width: 200px; min-width: 200px; max-width: 200px;\\\\\">\n                </colgroup>\n                <tbody>\n                  <tr class=\\\\\"arco-table-tr\\\\\">\n                    <td class=\\\\\"arco-table-td arco-table-operation arco-table-expand arco-table-col-fixed-left\\\\\" style=\\\\\"left: 0px;\\\\\"><span class=\\\\\"arco-table-cell\\\\\"><button type=\\\\\"button\\\\\" class=\\\\\"arco-table-expand-btn\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-plus\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M5 24h38M24 5v38\\\\\"></path></svg></button></span></td>\n                    <td class=\\\\\"arco-table-td arco-table-col-fixed-left arco-table-col-fixed-left-last\\\\\" style=\\\\\"left: 80px;\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">Jane Doe</span></span></td>\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">23000</span></span></td>\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">32 Park Road, London</span></span></td>\n                    <td class=\\\\\"arco-table-td arco-table-col-fixed-right arco-table-col-fixed-right-first\\\\\" style=\\\\\"right: 0px;\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">jane.doe@example.com</span></span></td>\n                  </tr>\n                  <!---->\n                  <tr class=\\\\\"arco-table-tr\\\\\">\n                    <td class=\\\\\"arco-table-td arco-table-operation arco-table-expand arco-table-col-fixed-left\\\\\" style=\\\\\"left: 0px;\\\\\"><span class=\\\\\"arco-table-cell\\\\\"><!----></span></td>\n                    <td class=\\\\\"arco-table-td arco-table-col-fixed-left arco-table-col-fixed-left-last\\\\\" style=\\\\\"left: 80px;\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">Alisa Ross</span></span></td>\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">25000</span></span></td>\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">35 Park Road, London</span></span></td>\n                    <td class=\\\\\"arco-table-td arco-table-col-fixed-right arco-table-col-fixed-right-first\\\\\" style=\\\\\"right: 0px;\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">alisa.ross@example.com</span></span></td>\n                  </tr>\n                  <!---->\n                  <tr class=\\\\\"arco-table-tr\\\\\">\n                    <td class=\\\\\"arco-table-td arco-table-operation arco-table-expand arco-table-col-fixed-left\\\\\" style=\\\\\"left: 0px;\\\\\"><span class=\\\\\"arco-table-cell\\\\\"><!----></span></td>\n                    <td class=\\\\\"arco-table-td arco-table-col-fixed-left arco-table-col-fixed-left-last\\\\\" style=\\\\\"left: 80px;\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">Kevin Sandra</span></span></td>\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">22000</span></span></td>\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">31 Park Road, London</span></span></td>\n                    <td class=\\\\\"arco-table-td arco-table-col-fixed-right arco-table-col-fixed-right-first\\\\\" style=\\\\\"right: 0px;\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">kevin.sandra@example.com</span></span></td>\n                  </tr>\n                  <!---->\n                  <tr class=\\\\\"arco-table-tr\\\\\">\n                    <td class=\\\\\"arco-table-td arco-table-operation arco-table-expand arco-table-col-fixed-left\\\\\" style=\\\\\"left: 0px;\\\\\"><span class=\\\\\"arco-table-cell\\\\\"><!----></span></td>\n                    <td class=\\\\\"arco-table-td arco-table-col-fixed-left arco-table-col-fixed-left-last\\\\\" style=\\\\\"left: 80px;\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">Ed Hellen</span></span></td>\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">17000</span></span></td>\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">42 Park Road, London</span></span></td>\n                    <td class=\\\\\"arco-table-td arco-table-col-fixed-right arco-table-col-fixed-right-first\\\\\" style=\\\\\"right: 0px;\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">ed.hellen@example.com</span></span></td>\n                  </tr>\n                  <!---->\n                  <tr class=\\\\\"arco-table-tr\\\\\">\n                    <td class=\\\\\"arco-table-td arco-table-operation arco-table-expand arco-table-col-fixed-left\\\\\" style=\\\\\"left: 0px;\\\\\"><span class=\\\\\"arco-table-cell\\\\\"><!----></span></td>\n                    <td class=\\\\\"arco-table-td arco-table-col-fixed-left arco-table-col-fixed-left-last\\\\\" style=\\\\\"left: 80px;\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">William Smith</span></span></td>\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">27000</span></span></td>\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">62 Park Road, London</span></span></td>\n                    <td class=\\\\\"arco-table-td arco-table-col-fixed-right arco-table-col-fixed-right-first\\\\\" style=\\\\\"right: 0px;\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">william.smith@example.com</span></span></td>\n                  </tr>\n                  <!---->\n                </tbody>\n              </table>\n            </div>\n            <!--v-if-->\n            <!--v-if-->\n          </div>\n          <!---->\n        </div>\n        <!--v-if-->\n        <!--v-if-->\n      </div>\n    </div>\n    <!---->\n    <div class=\\\\\"arco-table-pagination arco-table-pagination-right\\\\\">\n      <!---->\n      <div class=\\\\\"arco-pagination arco-pagination-size-medium\\\\\">\n        <!---->\n        <ul class=\\\\\"arco-pagination-list\\\\\"><span class=\\\\\"arco-pagination-item arco-pagination-item-previous arco-pagination-item-disabled\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-left\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M32 8.4 16.444 23.956 32 39.513\\\\\"></path></svg></span>\n          <li class=\\\\\"arco-pagination-item arco-pagination-item-active\\\\\" pages=\\\\\"1\\\\\">1</li>\n          <!----><span class=\\\\\"arco-pagination-item arco-pagination-item-next arco-pagination-item-disabled\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-right\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"m16 39.513 15.556-15.557L16 8.4\\\\\"></path></svg></span>\n        </ul>\n        <!---->\n        <!---->\n      </div>\n      <!---->\n    </div>\n    <!---->\n  </div>\n</div>\"\n`;\n\nexports[`<table> demo: render [fixed-group] correctly 1`] = `\n\"<div class=\\\\\"arco-table arco-table-size-large arco-table-border arco-table-border-cell arco-table-hover arco-table-layout-fixed\\\\\">\n  <!---->\n  <div class=\\\\\"arco-spin\\\\\">\n    <!---->\n    <div class=\\\\\"arco-table-container arco-table-has-fixed-col-left arco-table-has-fixed-col-right arco-table-scroll-position-both\\\\\">\n      <div class=\\\\\"arco-scrollbar arco-scrollbar-type-embed\\\\\" style=\\\\\"height: 100%;\\\\\">\n        <div class=\\\\\"arco-scrollbar-container arco-table-content arco-table-content-scroll-x\\\\\">\n          <table class=\\\\\"arco-table-element\\\\\" cellpadding=\\\\\"0\\\\\" cellspacing=\\\\\"0\\\\\" style=\\\\\"width: 2000px;\\\\\">\n            <colgroup>\n              <col style=\\\\\"width: 140px; min-width: 140px; max-width: 140px;\\\\\">\n              <col style=\\\\\"width: 200px; min-width: 200px; max-width: 200px;\\\\\">\n              <col style=\\\\\"width: 100px; min-width: 100px; max-width: 100px;\\\\\">\n              <col>\n              <col>\n              <col>\n              <col>\n              <col style=\\\\\"width: 120px; min-width: 120px; max-width: 120px;\\\\\">\n            </colgroup>\n            <thead>\n              <tr class=\\\\\"arco-table-tr\\\\\">\n                <th class=\\\\\"arco-table-th arco-table-col-fixed-left\\\\\" style=\\\\\"left: 0px;\\\\\" rowspan=\\\\\"3\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Name</span>\n                  <!---->\n                  <!----></span>\n                  <!---->\n                  <!---->\n                </th>\n                <th class=\\\\\"arco-table-th\\\\\" colspan=\\\\\"4\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-center\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">User Info</span>\n                  <!---->\n                  <!----></span>\n                  <!---->\n                  <!---->\n                </th>\n                <th class=\\\\\"arco-table-th\\\\\" colspan=\\\\\"2\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-center\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Information</span>\n                  <!---->\n                  <!----></span>\n                  <!---->\n                  <!---->\n                </th>\n                <th class=\\\\\"arco-table-th arco-table-col-fixed-right arco-table-col-fixed-right-first\\\\\" style=\\\\\"right: 0px;\\\\\" rowspan=\\\\\"3\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Salary</span>\n                  <!---->\n                  <!----></span>\n                  <!---->\n                  <!---->\n                </th>\n              </tr>\n              <tr class=\\\\\"arco-table-tr\\\\\">\n                <!---->\n                <th class=\\\\\"arco-table-th arco-table-col-fixed-left\\\\\" style=\\\\\"left: 140px;\\\\\" rowspan=\\\\\"2\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Birthday</span>\n                  <!---->\n                  <!----></span>\n                  <!---->\n                  <!---->\n                </th>\n                <th class=\\\\\"arco-table-th\\\\\" colspan=\\\\\"3\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-center\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Address</span>\n                  <!---->\n                  <!----></span>\n                  <!---->\n                  <!---->\n                </th>\n                <th class=\\\\\"arco-table-th\\\\\" rowspan=\\\\\"2\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Email</span>\n                  <!---->\n                  <!----></span>\n                  <!---->\n                  <!---->\n                </th>\n                <th class=\\\\\"arco-table-th\\\\\" rowspan=\\\\\"2\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Phone</span>\n                  <!---->\n                  <!----></span>\n                  <!---->\n                  <!---->\n                </th>\n              </tr>\n              <tr class=\\\\\"arco-table-tr\\\\\">\n                <!---->\n                <th class=\\\\\"arco-table-th arco-table-col-fixed-left arco-table-col-fixed-left-last\\\\\" style=\\\\\"left: 340px;\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">City</span>\n                  <!---->\n                  <!----></span>\n                  <!---->\n                  <!---->\n                </th>\n                <th class=\\\\\"arco-table-th\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Road</span>\n                  <!---->\n                  <!----></span>\n                  <!---->\n                  <!---->\n                </th>\n                <th class=\\\\\"arco-table-th\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">No.</span>\n                  <!---->\n                  <!----></span>\n                  <!---->\n                  <!---->\n                </th>\n              </tr>\n            </thead>\n            <tbody>\n              <tr class=\\\\\"arco-table-tr\\\\\">\n                <td class=\\\\\"arco-table-td arco-table-col-fixed-left\\\\\" style=\\\\\"left: 0px;\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">Jane Doe</span></span></td>\n                <td class=\\\\\"arco-table-td arco-table-col-fixed-left\\\\\" style=\\\\\"left: 140px;\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">1994-04-21</span></span></td>\n                <td class=\\\\\"arco-table-td arco-table-col-fixed-left arco-table-col-fixed-left-last\\\\\" style=\\\\\"left: 340px;\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">London</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">Park</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">34</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">jane.doe@example.com</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">12345678</span></span></td>\n                <td class=\\\\\"arco-table-td arco-table-col-fixed-right arco-table-col-fixed-right-first\\\\\" style=\\\\\"right: 0px;\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">23000</span></span></td>\n              </tr>\n              <!---->\n              <tr class=\\\\\"arco-table-tr\\\\\">\n                <td class=\\\\\"arco-table-td arco-table-col-fixed-left\\\\\" style=\\\\\"left: 0px;\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">Alisa Ross</span></span></td>\n                <td class=\\\\\"arco-table-td arco-table-col-fixed-left\\\\\" style=\\\\\"left: 140px;\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">1994-05-21</span></span></td>\n                <td class=\\\\\"arco-table-td arco-table-col-fixed-left arco-table-col-fixed-left-last\\\\\" style=\\\\\"left: 340px;\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">London</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">Park</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">37</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">alisa.ross@example.com</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">12345678</span></span></td>\n                <td class=\\\\\"arco-table-td arco-table-col-fixed-right arco-table-col-fixed-right-first\\\\\" style=\\\\\"right: 0px;\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">25000</span></span></td>\n              </tr>\n              <!---->\n              <tr class=\\\\\"arco-table-tr\\\\\">\n                <td class=\\\\\"arco-table-td arco-table-col-fixed-left\\\\\" style=\\\\\"left: 0px;\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">Kevin Sandra</span></span></td>\n                <td class=\\\\\"arco-table-td arco-table-col-fixed-left\\\\\" style=\\\\\"left: 140px;\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">1992-02-11</span></span></td>\n                <td class=\\\\\"arco-table-td arco-table-col-fixed-left arco-table-col-fixed-left-last\\\\\" style=\\\\\"left: 340px;\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">Paris</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">Arco</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">67</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">kevin.sandra@example.com</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">12345678</span></span></td>\n                <td class=\\\\\"arco-table-td arco-table-col-fixed-right arco-table-col-fixed-right-first\\\\\" style=\\\\\"right: 0px;\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">22000</span></span></td>\n              </tr>\n              <!---->\n              <tr class=\\\\\"arco-table-tr\\\\\">\n                <td class=\\\\\"arco-table-td arco-table-col-fixed-left\\\\\" style=\\\\\"left: 0px;\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">Ed Hellen</span></span></td>\n                <td class=\\\\\"arco-table-td arco-table-col-fixed-left\\\\\" style=\\\\\"left: 140px;\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">1991-06-21</span></span></td>\n                <td class=\\\\\"arco-table-td arco-table-col-fixed-left arco-table-col-fixed-left-last\\\\\" style=\\\\\"left: 340px;\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">London</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">Park</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">317</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">ed.hellen@example.com</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">12345678</span></span></td>\n                <td class=\\\\\"arco-table-td arco-table-col-fixed-right arco-table-col-fixed-right-first\\\\\" style=\\\\\"right: 0px;\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">17000</span></span></td>\n              </tr>\n              <!---->\n              <tr class=\\\\\"arco-table-tr\\\\\">\n                <td class=\\\\\"arco-table-td arco-table-col-fixed-left\\\\\" style=\\\\\"left: 0px;\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">William Smith</span></span></td>\n                <td class=\\\\\"arco-table-td arco-table-col-fixed-left\\\\\" style=\\\\\"left: 140px;\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">1996-08-21</span></span></td>\n                <td class=\\\\\"arco-table-td arco-table-col-fixed-left arco-table-col-fixed-left-last\\\\\" style=\\\\\"left: 340px;\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">Paris</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">Park</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">114</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">william.smith@example.com</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">12345678</span></span></td>\n                <td class=\\\\\"arco-table-td arco-table-col-fixed-right arco-table-col-fixed-right-first\\\\\" style=\\\\\"right: 0px;\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">27000</span></span></td>\n              </tr>\n              <!---->\n            </tbody>\n            <!---->\n          </table>\n        </div>\n        <!--v-if-->\n        <!--v-if-->\n      </div>\n    </div>\n    <!---->\n    <div class=\\\\\"arco-table-pagination arco-table-pagination-right\\\\\">\n      <!---->\n      <div class=\\\\\"arco-pagination arco-pagination-size-medium\\\\\">\n        <!---->\n        <ul class=\\\\\"arco-pagination-list\\\\\"><span class=\\\\\"arco-pagination-item arco-pagination-item-previous arco-pagination-item-disabled\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-left\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M32 8.4 16.444 23.956 32 39.513\\\\\"></path></svg></span>\n          <li class=\\\\\"arco-pagination-item arco-pagination-item-active\\\\\" pages=\\\\\"1\\\\\">1</li>\n          <!----><span class=\\\\\"arco-pagination-item arco-pagination-item-next arco-pagination-item-disabled\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-right\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"m16 39.513 15.556-15.557L16 8.4\\\\\"></path></svg></span>\n        </ul>\n        <!---->\n        <!---->\n      </div>\n      <!---->\n    </div>\n    <!---->\n  </div>\n</div>\"\n`;\n\nexports[`<table> demo: render [group] correctly 1`] = `\n\"<div class=\\\\\"arco-table arco-table-size-large arco-table-border arco-table-border-header-cell arco-table-hover\\\\\">\n  <!---->\n  <div class=\\\\\"arco-spin\\\\\">\n    <!---->\n    <div class=\\\\\"arco-table-container arco-table-has-fixed-col-left arco-table-has-fixed-col-right\\\\\">\n      <div class=\\\\\"arco-scrollbar arco-scrollbar-type-embed\\\\\" style=\\\\\"height: 100%;\\\\\">\n        <div class=\\\\\"arco-scrollbar-container arco-table-content arco-table-content-scroll-x\\\\\">\n          <table class=\\\\\"arco-table-element\\\\\" cellpadding=\\\\\"0\\\\\" cellspacing=\\\\\"0\\\\\">\n            <colgroup>\n              <col style=\\\\\"width: 140px; min-width: 140px; max-width: 140px;\\\\\">\n              <col>\n              <col>\n              <col>\n              <col>\n              <col>\n              <col>\n              <col style=\\\\\"width: 120px; min-width: 120px; max-width: 120px;\\\\\">\n            </colgroup>\n            <thead>\n              <tr class=\\\\\"arco-table-tr\\\\\">\n                <th class=\\\\\"arco-table-th arco-table-col-fixed-left arco-table-col-fixed-left-last\\\\\" style=\\\\\"left: 0px;\\\\\" rowspan=\\\\\"3\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Name</span>\n                  <!---->\n                  <!----></span>\n                  <!---->\n                  <!---->\n                </th>\n                <th class=\\\\\"arco-table-th\\\\\" colspan=\\\\\"4\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-center\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">User Info</span>\n                  <!---->\n                  <!----></span>\n                  <!---->\n                  <!---->\n                </th>\n                <th class=\\\\\"arco-table-th\\\\\" colspan=\\\\\"2\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-center\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Information</span>\n                  <!---->\n                  <!----></span>\n                  <!---->\n                  <!---->\n                </th>\n                <th class=\\\\\"arco-table-th arco-table-col-fixed-right arco-table-col-fixed-right-first\\\\\" style=\\\\\"right: 0px;\\\\\" rowspan=\\\\\"3\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Salary</span>\n                  <!---->\n                  <!----></span>\n                  <!---->\n                  <!---->\n                </th>\n              </tr>\n              <tr class=\\\\\"arco-table-tr\\\\\">\n                <!---->\n                <th class=\\\\\"arco-table-th\\\\\" rowspan=\\\\\"2\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Birthday</span>\n                  <!---->\n                  <!----></span>\n                  <!---->\n                  <!---->\n                </th>\n                <th class=\\\\\"arco-table-th\\\\\" colspan=\\\\\"3\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-center\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Address</span>\n                  <!---->\n                  <!----></span>\n                  <!---->\n                  <!---->\n                </th>\n                <th class=\\\\\"arco-table-th\\\\\" rowspan=\\\\\"2\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Email</span>\n                  <!---->\n                  <!----></span>\n                  <!---->\n                  <!---->\n                </th>\n                <th class=\\\\\"arco-table-th\\\\\" rowspan=\\\\\"2\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Phone</span>\n                  <!---->\n                  <!----></span>\n                  <!---->\n                  <!---->\n                </th>\n              </tr>\n              <tr class=\\\\\"arco-table-tr\\\\\">\n                <!---->\n                <th class=\\\\\"arco-table-th\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">City</span>\n                  <!---->\n                  <!----></span>\n                  <!---->\n                  <!---->\n                </th>\n                <th class=\\\\\"arco-table-th\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Road</span>\n                  <!---->\n                  <!----></span>\n                  <!---->\n                  <!---->\n                </th>\n                <th class=\\\\\"arco-table-th\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">No.</span>\n                  <!---->\n                  <!----></span>\n                  <!---->\n                  <!---->\n                </th>\n              </tr>\n            </thead>\n            <tbody>\n              <tr class=\\\\\"arco-table-tr\\\\\">\n                <td class=\\\\\"arco-table-td arco-table-col-fixed-left arco-table-col-fixed-left-last\\\\\" style=\\\\\"left: 0px;\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">Jane Doe</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">1994-04-21</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">London</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">Park</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">34</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">jane.doe@example.com</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">12345678</span></span></td>\n                <td class=\\\\\"arco-table-td arco-table-col-fixed-right arco-table-col-fixed-right-first\\\\\" style=\\\\\"right: 0px;\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">23000</span></span></td>\n              </tr>\n              <!---->\n              <tr class=\\\\\"arco-table-tr\\\\\">\n                <td class=\\\\\"arco-table-td arco-table-col-fixed-left arco-table-col-fixed-left-last\\\\\" style=\\\\\"left: 0px;\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">Alisa Ross</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">1994-05-21</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">London</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">Park</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">37</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">alisa.ross@example.com</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">12345678</span></span></td>\n                <td class=\\\\\"arco-table-td arco-table-col-fixed-right arco-table-col-fixed-right-first\\\\\" style=\\\\\"right: 0px;\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">25000</span></span></td>\n              </tr>\n              <!---->\n              <tr class=\\\\\"arco-table-tr\\\\\">\n                <td class=\\\\\"arco-table-td arco-table-col-fixed-left arco-table-col-fixed-left-last\\\\\" style=\\\\\"left: 0px;\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">Kevin Sandra</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">1992-02-11</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">Paris</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">Arco</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">67</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">kevin.sandra@example.com</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">12345678</span></span></td>\n                <td class=\\\\\"arco-table-td arco-table-col-fixed-right arco-table-col-fixed-right-first\\\\\" style=\\\\\"right: 0px;\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">22000</span></span></td>\n              </tr>\n              <!---->\n              <tr class=\\\\\"arco-table-tr\\\\\">\n                <td class=\\\\\"arco-table-td arco-table-col-fixed-left arco-table-col-fixed-left-last\\\\\" style=\\\\\"left: 0px;\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">Ed Hellen</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">1991-06-21</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">London</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">Park</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">317</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">ed.hellen@example.com</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">12345678</span></span></td>\n                <td class=\\\\\"arco-table-td arco-table-col-fixed-right arco-table-col-fixed-right-first\\\\\" style=\\\\\"right: 0px;\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">17000</span></span></td>\n              </tr>\n              <!---->\n              <tr class=\\\\\"arco-table-tr\\\\\">\n                <td class=\\\\\"arco-table-td arco-table-col-fixed-left arco-table-col-fixed-left-last\\\\\" style=\\\\\"left: 0px;\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">William Smith</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">1996-08-21</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">Paris</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">Park</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">114</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">william.smith@example.com</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">12345678</span></span></td>\n                <td class=\\\\\"arco-table-td arco-table-col-fixed-right arco-table-col-fixed-right-first\\\\\" style=\\\\\"right: 0px;\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">27000</span></span></td>\n              </tr>\n              <!---->\n            </tbody>\n            <!---->\n          </table>\n        </div>\n        <!--v-if-->\n        <!--v-if-->\n      </div>\n    </div>\n    <!---->\n    <div class=\\\\\"arco-table-pagination arco-table-pagination-right\\\\\">\n      <!---->\n      <div class=\\\\\"arco-pagination arco-pagination-size-medium\\\\\">\n        <!---->\n        <ul class=\\\\\"arco-pagination-list\\\\\"><span class=\\\\\"arco-pagination-item arco-pagination-item-previous arco-pagination-item-disabled\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-left\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M32 8.4 16.444 23.956 32 39.513\\\\\"></path></svg></span>\n          <li class=\\\\\"arco-pagination-item arco-pagination-item-active\\\\\" pages=\\\\\"1\\\\\">1</li>\n          <!----><span class=\\\\\"arco-pagination-item arco-pagination-item-next arco-pagination-item-disabled\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-right\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"m16 39.513 15.556-15.557L16 8.4\\\\\"></path></svg></span>\n        </ul>\n        <!---->\n        <!---->\n      </div>\n      <!---->\n    </div>\n    <!---->\n  </div>\n</div>\"\n`;\n\nexports[`<table> demo: render [lazy-load] correctly 1`] = `\n\"<div class=\\\\\"arco-table arco-table-size-large arco-table-border arco-table-hover\\\\\">\n  <!---->\n  <div class=\\\\\"arco-spin\\\\\">\n    <!---->\n    <div class=\\\\\"arco-table-container\\\\\">\n      <div class=\\\\\"arco-scrollbar arco-scrollbar-type-embed\\\\\" style=\\\\\"height: 100%;\\\\\">\n        <div class=\\\\\"arco-scrollbar-container arco-table-content arco-table-content-scroll-x\\\\\">\n          <table class=\\\\\"arco-table-element\\\\\" cellpadding=\\\\\"0\\\\\" cellspacing=\\\\\"0\\\\\">\n            <colgroup>\n              <col>\n              <col>\n              <col>\n              <col>\n            </colgroup>\n            <thead>\n              <tr class=\\\\\"arco-table-tr\\\\\">\n                <th class=\\\\\"arco-table-th\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Name</span>\n                  <!---->\n                  <!----></span>\n                  <!---->\n                  <!---->\n                </th>\n                <th class=\\\\\"arco-table-th\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Salary</span>\n                  <!---->\n                  <!----></span>\n                  <!---->\n                  <!---->\n                </th>\n                <th class=\\\\\"arco-table-th\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Address</span>\n                  <!---->\n                  <!----></span>\n                  <!---->\n                  <!---->\n                </th>\n                <th class=\\\\\"arco-table-th\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Email</span>\n                  <!---->\n                  <!----></span>\n                  <!---->\n                  <!---->\n                </th>\n              </tr>\n            </thead>\n            <tbody>\n              <tr class=\\\\\"arco-table-tr\\\\\">\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left arco-table-cell-expand-icon\\\\\"><!----><span class=\\\\\"arco-table-cell-inline-icon\\\\\"><button type=\\\\\"button\\\\\" class=\\\\\"arco-table-expand-btn\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-plus\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M5 24h38M24 5v38\\\\\"></path></svg></button></span><span class=\\\\\"arco-table-td-content\\\\\">Jane Doe</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">23000</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">32 Park Road, London</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">jane.doe@example.com</span></span></td>\n              </tr>\n              <!---->\n              <tr class=\\\\\"arco-table-tr\\\\\">\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left arco-table-cell-expand-icon\\\\\"><!----><span class=\\\\\"arco-table-cell-inline-icon\\\\\"><button type=\\\\\"button\\\\\" class=\\\\\"arco-table-expand-btn\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-plus\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M5 24h38M24 5v38\\\\\"></path></svg></button></span><span class=\\\\\"arco-table-td-content\\\\\">Alisa Ross</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">25000</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">35 Park Road, London</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">alisa.ross@example.com</span></span></td>\n              </tr>\n              <!---->\n              <tr class=\\\\\"arco-table-tr\\\\\">\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span style=\\\\\"padding-left: 20px;\\\\\"></span>\n                  <!----><span class=\\\\\"arco-table-td-content\\\\\">Kevin Sandra</span></span>\n                </td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">22000</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">31 Park Road, London</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">kevin.sandra@example.com</span></span></td>\n              </tr>\n              <!---->\n              <tr class=\\\\\"arco-table-tr\\\\\">\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span style=\\\\\"padding-left: 20px;\\\\\"></span>\n                  <!----><span class=\\\\\"arco-table-td-content\\\\\">Ed Hellen</span></span>\n                </td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">17000</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">42 Park Road, London</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">ed.hellen@example.com</span></span></td>\n              </tr>\n              <!---->\n              <tr class=\\\\\"arco-table-tr\\\\\">\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span style=\\\\\"padding-left: 20px;\\\\\"></span>\n                  <!----><span class=\\\\\"arco-table-td-content\\\\\">William Smith</span></span>\n                </td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">27000</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">62 Park Road, London</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">william.smith@example.com</span></span></td>\n              </tr>\n              <!---->\n            </tbody>\n            <!---->\n          </table>\n        </div>\n        <!--v-if-->\n        <!--v-if-->\n      </div>\n    </div>\n    <!---->\n    <div class=\\\\\"arco-table-pagination arco-table-pagination-right\\\\\">\n      <!---->\n      <div class=\\\\\"arco-pagination arco-pagination-size-medium\\\\\">\n        <!---->\n        <ul class=\\\\\"arco-pagination-list\\\\\"><span class=\\\\\"arco-pagination-item arco-pagination-item-previous arco-pagination-item-disabled\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-left\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M32 8.4 16.444 23.956 32 39.513\\\\\"></path></svg></span>\n          <li class=\\\\\"arco-pagination-item arco-pagination-item-active\\\\\" pages=\\\\\"1\\\\\">1</li>\n          <!----><span class=\\\\\"arco-pagination-item arco-pagination-item-next arco-pagination-item-disabled\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-right\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"m16 39.513 15.556-15.557L16 8.4\\\\\"></path></svg></span>\n        </ul>\n        <!---->\n        <!---->\n      </div>\n      <!---->\n    </div>\n    <!---->\n  </div>\n</div>\"\n`;\n\nexports[`<table> demo: render [props] correctly 1`] = `\n\"<form class=\\\\\"arco-form arco-form-layout-inline arco-form-size-medium\\\\\">\n  <div class=\\\\\"arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-inline\\\\\">\n    <div class=\\\\\"arco-form-item-label-col\\\\\"><label class=\\\\\"arco-form-item-label\\\\\">\n        <!--v-if-->Border\n        <!--v-if-->\n        <!--v-if-->\n      </label></div>\n    <div class=\\\\\"arco-form-item-wrapper-col\\\\\" id=\\\\\"border\\\\\">\n      <div class=\\\\\"arco-form-item-content-wrapper\\\\\">\n        <div class=\\\\\"arco-form-item-content arco-form-item-content-flex\\\\\"><button type=\\\\\"button\\\\\" role=\\\\\"switch\\\\\" aria-checked=\\\\\"true\\\\\" class=\\\\\"arco-switch arco-switch-type-circle arco-switch-checked\\\\\"><span class=\\\\\"arco-switch-handle\\\\\"><span class=\\\\\"arco-switch-handle-icon\\\\\"></span></span><!--  prettier-ignore  -->\n            <!--v-if-->\n          </button></div>\n      </div>\n      <!--v-if-->\n      <!--v-if-->\n    </div>\n  </div>\n  <div class=\\\\\"arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-inline\\\\\">\n    <div class=\\\\\"arco-form-item-label-col\\\\\"><label class=\\\\\"arco-form-item-label\\\\\">\n        <!--v-if-->Hover\n        <!--v-if-->\n        <!--v-if-->\n      </label></div>\n    <div class=\\\\\"arco-form-item-wrapper-col\\\\\" id=\\\\\"hover\\\\\">\n      <div class=\\\\\"arco-form-item-content-wrapper\\\\\">\n        <div class=\\\\\"arco-form-item-content arco-form-item-content-flex\\\\\"><button type=\\\\\"button\\\\\" role=\\\\\"switch\\\\\" aria-checked=\\\\\"true\\\\\" class=\\\\\"arco-switch arco-switch-type-circle arco-switch-checked\\\\\"><span class=\\\\\"arco-switch-handle\\\\\"><span class=\\\\\"arco-switch-handle-icon\\\\\"></span></span><!--  prettier-ignore  -->\n            <!--v-if-->\n          </button></div>\n      </div>\n      <!--v-if-->\n      <!--v-if-->\n    </div>\n  </div>\n  <div class=\\\\\"arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-inline\\\\\">\n    <div class=\\\\\"arco-form-item-label-col\\\\\"><label class=\\\\\"arco-form-item-label\\\\\">\n        <!--v-if-->stripe\n        <!--v-if-->\n        <!--v-if-->\n      </label></div>\n    <div class=\\\\\"arco-form-item-wrapper-col\\\\\" id=\\\\\"stripe\\\\\">\n      <div class=\\\\\"arco-form-item-content-wrapper\\\\\">\n        <div class=\\\\\"arco-form-item-content arco-form-item-content-flex\\\\\"><button type=\\\\\"button\\\\\" role=\\\\\"switch\\\\\" aria-checked=\\\\\"false\\\\\" class=\\\\\"arco-switch arco-switch-type-circle\\\\\"><span class=\\\\\"arco-switch-handle\\\\\"><span class=\\\\\"arco-switch-handle-icon\\\\\"></span></span><!--  prettier-ignore  -->\n            <!--v-if-->\n          </button></div>\n      </div>\n      <!--v-if-->\n      <!--v-if-->\n    </div>\n  </div>\n  <div class=\\\\\"arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-inline\\\\\">\n    <div class=\\\\\"arco-form-item-label-col\\\\\"><label class=\\\\\"arco-form-item-label\\\\\">\n        <!--v-if-->checkbox\n        <!--v-if-->\n        <!--v-if-->\n      </label></div>\n    <div class=\\\\\"arco-form-item-wrapper-col\\\\\" id=\\\\\"checkbox\\\\\">\n      <div class=\\\\\"arco-form-item-content-wrapper\\\\\">\n        <div class=\\\\\"arco-form-item-content arco-form-item-content-flex\\\\\"><button type=\\\\\"button\\\\\" role=\\\\\"switch\\\\\" aria-checked=\\\\\"true\\\\\" class=\\\\\"arco-switch arco-switch-type-circle arco-switch-checked\\\\\"><span class=\\\\\"arco-switch-handle\\\\\"><span class=\\\\\"arco-switch-handle-icon\\\\\"></span></span><!--  prettier-ignore  -->\n            <!--v-if-->\n          </button></div>\n      </div>\n      <!--v-if-->\n      <!--v-if-->\n    </div>\n  </div>\n  <div class=\\\\\"arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-inline\\\\\">\n    <div class=\\\\\"arco-form-item-label-col\\\\\"><label class=\\\\\"arco-form-item-label\\\\\">\n        <!--v-if-->checkAll\n        <!--v-if-->\n        <!--v-if-->\n      </label></div>\n    <div class=\\\\\"arco-form-item-wrapper-col\\\\\" id=\\\\\"checkAll\\\\\">\n      <div class=\\\\\"arco-form-item-content-wrapper\\\\\">\n        <div class=\\\\\"arco-form-item-content arco-form-item-content-flex\\\\\"><button type=\\\\\"button\\\\\" role=\\\\\"switch\\\\\" aria-checked=\\\\\"true\\\\\" class=\\\\\"arco-switch arco-switch-type-circle arco-switch-checked\\\\\"><span class=\\\\\"arco-switch-handle\\\\\"><span class=\\\\\"arco-switch-handle-icon\\\\\"></span></span><!--  prettier-ignore  -->\n            <!--v-if-->\n          </button></div>\n      </div>\n      <!--v-if-->\n      <!--v-if-->\n    </div>\n  </div>\n  <div class=\\\\\"arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-inline\\\\\">\n    <div class=\\\\\"arco-form-item-label-col\\\\\"><label class=\\\\\"arco-form-item-label\\\\\">\n        <!--v-if-->loading\n        <!--v-if-->\n        <!--v-if-->\n      </label></div>\n    <div class=\\\\\"arco-form-item-wrapper-col\\\\\" id=\\\\\"loading\\\\\">\n      <div class=\\\\\"arco-form-item-content-wrapper\\\\\">\n        <div class=\\\\\"arco-form-item-content arco-form-item-content-flex\\\\\"><button type=\\\\\"button\\\\\" role=\\\\\"switch\\\\\" aria-checked=\\\\\"false\\\\\" class=\\\\\"arco-switch arco-switch-type-circle\\\\\"><span class=\\\\\"arco-switch-handle\\\\\"><span class=\\\\\"arco-switch-handle-icon\\\\\"></span></span><!--  prettier-ignore  -->\n            <!--v-if-->\n          </button></div>\n      </div>\n      <!--v-if-->\n      <!--v-if-->\n    </div>\n  </div>\n  <div class=\\\\\"arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-inline\\\\\">\n    <div class=\\\\\"arco-form-item-label-col\\\\\"><label class=\\\\\"arco-form-item-label\\\\\">\n        <!--v-if-->tableHeader\n        <!--v-if-->\n        <!--v-if-->\n      </label></div>\n    <div class=\\\\\"arco-form-item-wrapper-col\\\\\" id=\\\\\"tableHeader\\\\\">\n      <div class=\\\\\"arco-form-item-content-wrapper\\\\\">\n        <div class=\\\\\"arco-form-item-content arco-form-item-content-flex\\\\\"><button type=\\\\\"button\\\\\" role=\\\\\"switch\\\\\" aria-checked=\\\\\"true\\\\\" class=\\\\\"arco-switch arco-switch-type-circle arco-switch-checked\\\\\"><span class=\\\\\"arco-switch-handle\\\\\"><span class=\\\\\"arco-switch-handle-icon\\\\\"></span></span><!--  prettier-ignore  -->\n            <!--v-if-->\n          </button></div>\n      </div>\n      <!--v-if-->\n      <!--v-if-->\n    </div>\n  </div>\n  <div class=\\\\\"arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-inline\\\\\">\n    <div class=\\\\\"arco-form-item-label-col\\\\\"><label class=\\\\\"arco-form-item-label\\\\\">\n        <!--v-if-->noData\n        <!--v-if-->\n        <!--v-if-->\n      </label></div>\n    <div class=\\\\\"arco-form-item-wrapper-col\\\\\" id=\\\\\"noData\\\\\">\n      <div class=\\\\\"arco-form-item-content-wrapper\\\\\">\n        <div class=\\\\\"arco-form-item-content arco-form-item-content-flex\\\\\"><button type=\\\\\"button\\\\\" role=\\\\\"switch\\\\\" aria-checked=\\\\\"false\\\\\" class=\\\\\"arco-switch arco-switch-type-circle\\\\\"><span class=\\\\\"arco-switch-handle\\\\\"><span class=\\\\\"arco-switch-handle-icon\\\\\"></span></span><!--  prettier-ignore  -->\n            <!--v-if-->\n          </button></div>\n      </div>\n      <!--v-if-->\n      <!--v-if-->\n    </div>\n  </div>\n</form>\n<div class=\\\\\"arco-table arco-table-size-large arco-table-border arco-table-hover arco-table-type-selection\\\\\">\n  <!---->\n  <div class=\\\\\"arco-spin\\\\\">\n    <!---->\n    <div class=\\\\\"arco-table-container\\\\\">\n      <div class=\\\\\"arco-scrollbar arco-scrollbar-type-embed\\\\\" style=\\\\\"height: 100%;\\\\\">\n        <div class=\\\\\"arco-scrollbar-container arco-table-content arco-table-content-scroll-x\\\\\">\n          <table class=\\\\\"arco-table-element\\\\\" cellpadding=\\\\\"0\\\\\" cellspacing=\\\\\"0\\\\\">\n            <colgroup>\n              <col class=\\\\\"arco-table-selection-checkbox-col\\\\\">\n              <col>\n              <col>\n              <col>\n              <col>\n            </colgroup>\n            <thead>\n              <tr class=\\\\\"arco-table-tr\\\\\">\n                <th class=\\\\\"arco-table-th arco-table-operation arco-table-checkbox\\\\\"><span class=\\\\\"arco-table-cell\\\\\"><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n                  <!----></label></span>\n                </th>\n                <th class=\\\\\"arco-table-th\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Name</span>\n                  <!---->\n                  <!----></span>\n                  <!---->\n                  <!---->\n                </th>\n                <th class=\\\\\"arco-table-th\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Salary</span>\n                  <!---->\n                  <!----></span>\n                  <!---->\n                  <!---->\n                </th>\n                <th class=\\\\\"arco-table-th\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Address</span>\n                  <!---->\n                  <!----></span>\n                  <!---->\n                  <!---->\n                </th>\n                <th class=\\\\\"arco-table-th\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Email</span>\n                  <!---->\n                  <!----></span>\n                  <!---->\n                  <!---->\n                </th>\n              </tr>\n            </thead>\n            <tbody>\n              <tr class=\\\\\"arco-table-tr\\\\\">\n                <td class=\\\\\"arco-table-td arco-table-operation arco-table-checkbox\\\\\"><span class=\\\\\"arco-table-cell\\\\\"><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n                  <!----></label></span>\n                </td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">Jane Doe</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">23000</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">32 Park Road, London</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">jane.doe@example.com</span></span></td>\n              </tr>\n              <!---->\n              <tr class=\\\\\"arco-table-tr\\\\\">\n                <td class=\\\\\"arco-table-td arco-table-operation arco-table-checkbox\\\\\"><span class=\\\\\"arco-table-cell\\\\\"><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n                  <!----></label></span>\n                </td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">Alisa Ross</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">25000</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">35 Park Road, London</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">alisa.ross@example.com</span></span></td>\n              </tr>\n              <!---->\n              <tr class=\\\\\"arco-table-tr\\\\\">\n                <td class=\\\\\"arco-table-td arco-table-operation arco-table-checkbox\\\\\"><span class=\\\\\"arco-table-cell\\\\\"><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n                  <!----></label></span>\n                </td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">Kevin Sandra</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">22000</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">31 Park Road, London</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">kevin.sandra@example.com</span></span></td>\n              </tr>\n              <!---->\n              <tr class=\\\\\"arco-table-tr\\\\\">\n                <td class=\\\\\"arco-table-td arco-table-operation arco-table-checkbox\\\\\"><span class=\\\\\"arco-table-cell\\\\\"><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n                  <!----></label></span>\n                </td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">Ed Hellen</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">17000</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">42 Park Road, London</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">ed.hellen@example.com</span></span></td>\n              </tr>\n              <!---->\n              <tr class=\\\\\"arco-table-tr\\\\\">\n                <td class=\\\\\"arco-table-td arco-table-operation arco-table-checkbox\\\\\"><span class=\\\\\"arco-table-cell\\\\\"><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n                  <!----></label></span>\n                </td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">William Smith</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">27000</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">62 Park Road, London</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">william.smith@example.com</span></span></td>\n              </tr>\n              <!---->\n            </tbody>\n            <!---->\n          </table>\n        </div>\n        <!--v-if-->\n        <!--v-if-->\n      </div>\n    </div>\n    <!---->\n    <div class=\\\\\"arco-table-pagination arco-table-pagination-right\\\\\">\n      <!---->\n      <div class=\\\\\"arco-pagination arco-pagination-size-medium\\\\\">\n        <!---->\n        <ul class=\\\\\"arco-pagination-list\\\\\"><span class=\\\\\"arco-pagination-item arco-pagination-item-previous arco-pagination-item-disabled\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-left\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M32 8.4 16.444 23.956 32 39.513\\\\\"></path></svg></span>\n          <li class=\\\\\"arco-pagination-item arco-pagination-item-active\\\\\" pages=\\\\\"1\\\\\">1</li>\n          <!----><span class=\\\\\"arco-pagination-item arco-pagination-item-next arco-pagination-item-disabled\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-right\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"m16 39.513 15.556-15.557L16 8.4\\\\\"></path></svg></span>\n        </ul>\n        <!---->\n        <!---->\n      </div>\n      <!---->\n    </div>\n    <!---->\n  </div>\n</div>\"\n`;\n\nexports[`<table> demo: render [radio] correctly 1`] = `\n\"<div class=\\\\\"arco-table arco-table-size-large arco-table-border arco-table-hover arco-table-type-selection\\\\\">\n  <!---->\n  <div class=\\\\\"arco-spin\\\\\">\n    <!---->\n    <div class=\\\\\"arco-table-container\\\\\">\n      <div class=\\\\\"arco-scrollbar arco-scrollbar-type-embed\\\\\" style=\\\\\"height: 100%;\\\\\">\n        <div class=\\\\\"arco-scrollbar-container arco-table-content arco-table-content-scroll-x\\\\\">\n          <table class=\\\\\"arco-table-element\\\\\" cellpadding=\\\\\"0\\\\\" cellspacing=\\\\\"0\\\\\">\n            <colgroup>\n              <col class=\\\\\"arco-table-selection-radio-col\\\\\">\n              <col>\n              <col>\n              <col>\n              <col>\n            </colgroup>\n            <thead>\n              <tr class=\\\\\"arco-table-tr\\\\\">\n                <th class=\\\\\"arco-table-th arco-table-operation\\\\\"><span class=\\\\\"arco-table-cell\\\\\"><!----></span></th>\n                <th class=\\\\\"arco-table-th\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Name</span>\n                  <!---->\n                  <!----></span>\n                  <!---->\n                  <!---->\n                </th>\n                <th class=\\\\\"arco-table-th\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Salary</span>\n                  <!---->\n                  <!----></span>\n                  <!---->\n                  <!---->\n                </th>\n                <th class=\\\\\"arco-table-th\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Address</span>\n                  <!---->\n                  <!----></span>\n                  <!---->\n                  <!---->\n                </th>\n                <th class=\\\\\"arco-table-th\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Email</span>\n                  <!---->\n                  <!----></span>\n                  <!---->\n                  <!---->\n                </th>\n              </tr>\n            </thead>\n            <tbody>\n              <tr class=\\\\\"arco-table-tr\\\\\">\n                <td class=\\\\\"arco-table-td arco-table-operation arco-table-radio\\\\\"><span class=\\\\\"arco-table-cell\\\\\"><label class=\\\\\"arco-radio\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"true\\\\\"><span class=\\\\\"arco-icon-hover arco-radio-icon-hover\\\\\"><span class=\\\\\"arco-radio-icon\\\\\"></span></span>\n                  <!----></label></span>\n                </td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">Jane Doe</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">23000</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">32 Park Road, London</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">jane.doe@example.com</span></span></td>\n              </tr>\n              <!---->\n              <tr class=\\\\\"arco-table-tr\\\\\">\n                <td class=\\\\\"arco-table-td arco-table-operation arco-table-radio\\\\\"><span class=\\\\\"arco-table-cell\\\\\"><label class=\\\\\"arco-radio\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"true\\\\\"><span class=\\\\\"arco-icon-hover arco-radio-icon-hover\\\\\"><span class=\\\\\"arco-radio-icon\\\\\"></span></span>\n                  <!----></label></span>\n                </td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">Alisa Ross</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">25000</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">35 Park Road, London</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">alisa.ross@example.com</span></span></td>\n              </tr>\n              <!---->\n              <tr class=\\\\\"arco-table-tr\\\\\">\n                <td class=\\\\\"arco-table-td arco-table-operation arco-table-radio\\\\\"><span class=\\\\\"arco-table-cell\\\\\"><label class=\\\\\"arco-radio\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"true\\\\\"><span class=\\\\\"arco-icon-hover arco-radio-icon-hover\\\\\"><span class=\\\\\"arco-radio-icon\\\\\"></span></span>\n                  <!----></label></span>\n                </td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">Kevin Sandra</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">22000</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">31 Park Road, London</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">kevin.sandra@example.com</span></span></td>\n              </tr>\n              <!---->\n              <tr class=\\\\\"arco-table-tr\\\\\">\n                <td class=\\\\\"arco-table-td arco-table-operation arco-table-radio\\\\\"><span class=\\\\\"arco-table-cell\\\\\"><label class=\\\\\"arco-radio\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"true\\\\\"><span class=\\\\\"arco-icon-hover arco-radio-icon-hover\\\\\"><span class=\\\\\"arco-radio-icon\\\\\"></span></span>\n                  <!----></label></span>\n                </td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">Ed Hellen</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">17000</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">42 Park Road, London</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">ed.hellen@example.com</span></span></td>\n              </tr>\n              <!---->\n              <tr class=\\\\\"arco-table-tr\\\\\">\n                <td class=\\\\\"arco-table-td arco-table-operation arco-table-radio\\\\\"><span class=\\\\\"arco-table-cell\\\\\"><label class=\\\\\"arco-radio\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"true\\\\\"><span class=\\\\\"arco-icon-hover arco-radio-icon-hover\\\\\"><span class=\\\\\"arco-radio-icon\\\\\"></span></span>\n                  <!----></label></span>\n                </td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">William Smith</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">27000</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">62 Park Road, London</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">william.smith@example.com</span></span></td>\n              </tr>\n              <!---->\n            </tbody>\n            <!---->\n          </table>\n        </div>\n        <!--v-if-->\n        <!--v-if-->\n      </div>\n    </div>\n    <!---->\n    <div class=\\\\\"arco-table-pagination arco-table-pagination-right\\\\\">\n      <!---->\n      <div class=\\\\\"arco-pagination arco-pagination-size-medium\\\\\">\n        <!---->\n        <ul class=\\\\\"arco-pagination-list\\\\\"><span class=\\\\\"arco-pagination-item arco-pagination-item-previous arco-pagination-item-disabled\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-left\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M32 8.4 16.444 23.956 32 39.513\\\\\"></path></svg></span>\n          <li class=\\\\\"arco-pagination-item arco-pagination-item-active\\\\\" pages=\\\\\"1\\\\\">1</li>\n          <!----><span class=\\\\\"arco-pagination-item arco-pagination-item-next arco-pagination-item-disabled\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-right\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"m16 39.513 15.556-15.557L16 8.4\\\\\"></path></svg></span>\n        </ul>\n        <!---->\n        <!---->\n      </div>\n      <!---->\n    </div>\n    <!---->\n  </div>\n</div>\"\n`;\n\nexports[`<table> demo: render [resize] correctly 1`] = `\n\"<div class=\\\\\"arco-table arco-table-size-large arco-table-border arco-table-border-cell arco-table-hover\\\\\">\n  <!---->\n  <div class=\\\\\"arco-spin\\\\\">\n    <!---->\n    <div class=\\\\\"arco-table-container\\\\\">\n      <div class=\\\\\"arco-scrollbar arco-scrollbar-type-embed\\\\\" style=\\\\\"height: 100%;\\\\\">\n        <div class=\\\\\"arco-scrollbar-container arco-table-content arco-table-content-scroll-x\\\\\">\n          <table class=\\\\\"arco-table-element\\\\\" cellpadding=\\\\\"0\\\\\" cellspacing=\\\\\"0\\\\\">\n            <colgroup>\n              <col style=\\\\\"width: 150px; min-width: 150px; max-width: 150px;\\\\\">\n              <col style=\\\\\"width: 120px; min-width: 120px; max-width: 120px;\\\\\">\n              <col style=\\\\\"width: 300px; min-width: 300px; max-width: 300px;\\\\\">\n              <col>\n            </colgroup>\n            <thead>\n              <tr class=\\\\\"arco-table-tr\\\\\">\n                <th class=\\\\\"arco-table-th\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Name</span>\n                  <!---->\n                  <!----></span>\n                  <!----><span class=\\\\\"arco-table-column-handle\\\\\"></span>\n                </th>\n                <th class=\\\\\"arco-table-th\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Salary</span>\n                  <!---->\n                  <!----></span>\n                  <!----><span class=\\\\\"arco-table-column-handle\\\\\"></span>\n                </th>\n                <th class=\\\\\"arco-table-th\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Address</span>\n                  <!---->\n                  <!----></span>\n                  <!----><span class=\\\\\"arco-table-column-handle\\\\\"></span>\n                </th>\n                <th class=\\\\\"arco-table-th\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Email</span>\n                  <!---->\n                  <!----></span>\n                  <!---->\n                  <!---->\n                </th>\n              </tr>\n            </thead>\n            <tbody>\n              <tr class=\\\\\"arco-table-tr\\\\\">\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">Jane Doe</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">23000</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">32 Park Road, London</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">jane.doe@example.com</span></span></td>\n              </tr>\n              <!---->\n              <tr class=\\\\\"arco-table-tr\\\\\">\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">Alisa Ross</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">25000</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">35 Park Road, London</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">alisa.ross@example.com</span></span></td>\n              </tr>\n              <!---->\n              <tr class=\\\\\"arco-table-tr\\\\\">\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">Kevin Sandra</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">22000</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">31 Park Road, London</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">kevin.sandra@example.com</span></span></td>\n              </tr>\n              <!---->\n              <tr class=\\\\\"arco-table-tr\\\\\">\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">Ed Hellen</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">17000</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">42 Park Road, London</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">ed.hellen@example.com</span></span></td>\n              </tr>\n              <!---->\n              <tr class=\\\\\"arco-table-tr\\\\\">\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">William Smith</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">27000</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">62 Park Road, London</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">william.smith@example.com</span></span></td>\n              </tr>\n              <!---->\n            </tbody>\n            <!---->\n          </table>\n        </div>\n        <!--v-if-->\n        <!--v-if-->\n      </div>\n    </div>\n    <!---->\n    <div class=\\\\\"arco-table-pagination arco-table-pagination-right\\\\\">\n      <!---->\n      <div class=\\\\\"arco-pagination arco-pagination-size-medium\\\\\">\n        <!---->\n        <ul class=\\\\\"arco-pagination-list\\\\\"><span class=\\\\\"arco-pagination-item arco-pagination-item-previous arco-pagination-item-disabled\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-left\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M32 8.4 16.444 23.956 32 39.513\\\\\"></path></svg></span>\n          <li class=\\\\\"arco-pagination-item arco-pagination-item-active\\\\\" pages=\\\\\"1\\\\\">1</li>\n          <!----><span class=\\\\\"arco-pagination-item arco-pagination-item-next arco-pagination-item-disabled\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-right\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"m16 39.513 15.556-15.557L16 8.4\\\\\"></path></svg></span>\n        </ul>\n        <!---->\n        <!---->\n      </div>\n      <!---->\n    </div>\n    <!---->\n  </div>\n</div>\"\n`;\n\nexports[`<table> demo: render [row-selection] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-vertical arco-space-fill\\\\\" style=\\\\\"column-gap: 24px; row-gap: 24px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div><span>OnlyCurrent: </span><button type=\\\\\"button\\\\\" role=\\\\\"switch\\\\\" aria-checked=\\\\\"false\\\\\" class=\\\\\"arco-switch arco-switch-type-circle\\\\\"><span class=\\\\\"arco-switch-handle\\\\\"><span class=\\\\\"arco-switch-handle-icon\\\\\"></span></span><!--  prettier-ignore  -->\n        <!--v-if-->\n      </button></div>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-table arco-table-size-large arco-table-border arco-table-hover arco-table-type-selection\\\\\">\n      <!---->\n      <div class=\\\\\"arco-spin\\\\\">\n        <!---->\n        <div class=\\\\\"arco-table-container\\\\\">\n          <div class=\\\\\"arco-scrollbar arco-scrollbar-type-embed\\\\\" style=\\\\\"height: 100%;\\\\\">\n            <div class=\\\\\"arco-scrollbar-container arco-table-content arco-table-content-scroll-x\\\\\">\n              <table class=\\\\\"arco-table-element\\\\\" cellpadding=\\\\\"0\\\\\" cellspacing=\\\\\"0\\\\\">\n                <colgroup>\n                  <col class=\\\\\"arco-table-selection-checkbox-col\\\\\">\n                  <col>\n                  <col>\n                  <col>\n                  <col>\n                </colgroup>\n                <thead>\n                  <tr class=\\\\\"arco-table-tr\\\\\">\n                    <th class=\\\\\"arco-table-th arco-table-operation arco-table-checkbox\\\\\"><span class=\\\\\"arco-table-cell\\\\\"><label class=\\\\\"arco-checkbox arco-checkbox-indeterminate\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n                      <!----></label></span>\n                    </th>\n                    <th class=\\\\\"arco-table-th\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Name</span>\n                      <!---->\n                      <!----></span>\n                      <!---->\n                      <!---->\n                    </th>\n                    <th class=\\\\\"arco-table-th\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Salary</span>\n                      <!---->\n                      <!----></span>\n                      <!---->\n                      <!---->\n                    </th>\n                    <th class=\\\\\"arco-table-th\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Address</span>\n                      <!---->\n                      <!----></span>\n                      <!---->\n                      <!---->\n                    </th>\n                    <th class=\\\\\"arco-table-th\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Email</span>\n                      <!---->\n                      <!----></span>\n                      <!---->\n                      <!---->\n                    </th>\n                  </tr>\n                </thead>\n                <tbody>\n                  <tr class=\\\\\"arco-table-tr arco-table-tr-checked\\\\\">\n                    <td class=\\\\\"arco-table-td arco-table-operation arco-table-checkbox\\\\\"><span class=\\\\\"arco-table-cell\\\\\"><label aria-disabled=\\\\\"false\\\\\" class=\\\\\"arco-checkbox arco-checkbox-checked\\\\\"><input type=\\\\\"checkbox\\\\\" checked=\\\\\"\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-icon-hover-disabled arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><svg aria-hidden=\\\\\"true\\\\\" focusable=\\\\\"false\\\\\" viewBox=\\\\\"0 0 1024 1024\\\\\" width=\\\\\"200\\\\\" height=\\\\\"200\\\\\" fill=\\\\\"currentColor\\\\\" class=\\\\\"arco-checkbox-icon-check\\\\\"><path d=\\\\\"M877.44815445 206.10060629a64.72691371 64.72691371 0 0 0-95.14856334 4.01306852L380.73381888 685.46812814 235.22771741 533.48933518a64.72691371 64.72691371 0 0 0-92.43003222-1.03563036l-45.82665557 45.82665443a64.72691371 64.72691371 0 0 0-0.90617629 90.61767965l239.61903446 250.10479331a64.72691371 64.72691371 0 0 0 71.19960405 15.14609778 64.33855261 64.33855261 0 0 0 35.08198741-21.23042702l36.24707186-42.71976334 40.5190474-40.77795556-3.36579926-3.49525333 411.40426297-486.74638962a64.72691371 64.72691371 0 0 0-3.88361443-87.64024149l-45.3088404-45.43829334z\\\\\" p-id=\\\\\"840\\\\\"></path></svg></div></span>\n                      <!----></label></span>\n                    </td>\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">Jane Doe</span></span></td>\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">23000</span></span></td>\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">32 Park Road, London</span></span></td>\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">jane.doe@example.com</span></span></td>\n                  </tr>\n                  <!---->\n                  <tr class=\\\\\"arco-table-tr arco-table-tr-checked\\\\\">\n                    <td class=\\\\\"arco-table-td arco-table-operation arco-table-checkbox\\\\\"><span class=\\\\\"arco-table-cell\\\\\"><label aria-disabled=\\\\\"false\\\\\" class=\\\\\"arco-checkbox arco-checkbox-checked\\\\\"><input type=\\\\\"checkbox\\\\\" checked=\\\\\"\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-icon-hover-disabled arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><svg aria-hidden=\\\\\"true\\\\\" focusable=\\\\\"false\\\\\" viewBox=\\\\\"0 0 1024 1024\\\\\" width=\\\\\"200\\\\\" height=\\\\\"200\\\\\" fill=\\\\\"currentColor\\\\\" class=\\\\\"arco-checkbox-icon-check\\\\\"><path d=\\\\\"M877.44815445 206.10060629a64.72691371 64.72691371 0 0 0-95.14856334 4.01306852L380.73381888 685.46812814 235.22771741 533.48933518a64.72691371 64.72691371 0 0 0-92.43003222-1.03563036l-45.82665557 45.82665443a64.72691371 64.72691371 0 0 0-0.90617629 90.61767965l239.61903446 250.10479331a64.72691371 64.72691371 0 0 0 71.19960405 15.14609778 64.33855261 64.33855261 0 0 0 35.08198741-21.23042702l36.24707186-42.71976334 40.5190474-40.77795556-3.36579926-3.49525333 411.40426297-486.74638962a64.72691371 64.72691371 0 0 0-3.88361443-87.64024149l-45.3088404-45.43829334z\\\\\" p-id=\\\\\"840\\\\\"></path></svg></div></span>\n                      <!----></label></span>\n                    </td>\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">Alisa Ross</span></span></td>\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">25000</span></span></td>\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">35 Park Road, London</span></span></td>\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">alisa.ross@example.com</span></span></td>\n                  </tr>\n                  <!---->\n                  <tr class=\\\\\"arco-table-tr\\\\\">\n                    <td class=\\\\\"arco-table-td arco-table-operation arco-table-checkbox\\\\\"><span class=\\\\\"arco-table-cell\\\\\"><label aria-disabled=\\\\\"true\\\\\" class=\\\\\"arco-checkbox arco-checkbox-disabled\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" disabled=\\\\\"\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-icon-hover-disabled arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n                      <!----></label></span>\n                    </td>\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">Kevin Sandra</span></span></td>\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">22000</span></span></td>\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">31 Park Road, London</span></span></td>\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">kevin.sandra@example.com</span></span></td>\n                  </tr>\n                  <!---->\n                  <tr class=\\\\\"arco-table-tr\\\\\">\n                    <td class=\\\\\"arco-table-td arco-table-operation arco-table-checkbox\\\\\"><span class=\\\\\"arco-table-cell\\\\\"><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n                      <!----></label></span>\n                    </td>\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">Ed Hellen</span></span></td>\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">17000</span></span></td>\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">42 Park Road, London</span></span></td>\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">ed.hellen@example.com</span></span></td>\n                  </tr>\n                  <!---->\n                  <tr class=\\\\\"arco-table-tr\\\\\">\n                    <td class=\\\\\"arco-table-td arco-table-operation arco-table-checkbox\\\\\"><span class=\\\\\"arco-table-cell\\\\\"><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n                      <!----></label></span>\n                    </td>\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">William Smith</span></span></td>\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">27000</span></span></td>\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">62 Park Road, London</span></span></td>\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">william.smith@example.com</span></span></td>\n                  </tr>\n                  <!---->\n                </tbody>\n                <!---->\n              </table>\n            </div>\n            <!--v-if-->\n            <!--v-if-->\n          </div>\n        </div>\n        <!---->\n        <div class=\\\\\"arco-table-pagination arco-table-pagination-right\\\\\">\n          <!---->\n          <div class=\\\\\"arco-pagination arco-pagination-size-medium\\\\\">\n            <!---->\n            <ul class=\\\\\"arco-pagination-list\\\\\"><span class=\\\\\"arco-pagination-item arco-pagination-item-previous arco-pagination-item-disabled\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-left\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M32 8.4 16.444 23.956 32 39.513\\\\\"></path></svg></span>\n              <li class=\\\\\"arco-pagination-item arco-pagination-item-active\\\\\" pages=\\\\\"2\\\\\">1</li>\n              <li class=\\\\\"arco-pagination-item\\\\\" pages=\\\\\"2\\\\\">2</li>\n              <!----><span class=\\\\\"arco-pagination-item arco-pagination-item-next\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-right\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"m16 39.513 15.556-15.557L16 8.4\\\\\"></path></svg></span>\n            </ul>\n            <!---->\n            <!---->\n          </div>\n          <!---->\n        </div>\n        <!---->\n      </div>\n    </div>\n  </div>\n</div>\"\n`;\n\nexports[`<table> demo: render [scroll] correctly 1`] = `\n\"<div style=\\\\\"margin-bottom: 20px;\\\\\"><button type=\\\\\"button\\\\\" role=\\\\\"switch\\\\\" aria-checked=\\\\\"true\\\\\" class=\\\\\"arco-switch arco-switch-type-circle arco-switch-checked\\\\\"><span class=\\\\\"arco-switch-handle\\\\\"><span class=\\\\\"arco-switch-handle-icon\\\\\"></span></span><!--  prettier-ignore  -->\n    <!--v-if-->\n  </button> Virtual Scrollbar </div>\n<div class=\\\\\"arco-table arco-table-size-large arco-table-border arco-table-hover arco-table-layout-fixed\\\\\">\n  <!---->\n  <div class=\\\\\"arco-spin\\\\\">\n    <!---->\n    <div class=\\\\\"arco-table-container arco-table-scroll-position-both arco-table-scroll-y\\\\\">\n      <div class=\\\\\"arco-scrollbar arco-scrollbar-type-embed\\\\\" style=\\\\\"height: 100%;\\\\\">\n        <div class=\\\\\"arco-scrollbar-container arco-table-content\\\\\">\n          <div class=\\\\\"arco-scrollbar arco-scrollbar-type-embed\\\\\">\n            <div class=\\\\\"arco-scrollbar-container arco-table-header\\\\\">\n              <table class=\\\\\"arco-table-element\\\\\" style=\\\\\"width: 2000px;\\\\\" cellpadding=\\\\\"0\\\\\" cellspacing=\\\\\"0\\\\\">\n                <colgroup>\n                  <col>\n                  <col>\n                  <col>\n                  <col>\n                </colgroup>\n                <thead>\n                  <tr class=\\\\\"arco-table-tr\\\\\">\n                    <th class=\\\\\"arco-table-th\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Name</span>\n                      <!---->\n                      <!----></span>\n                      <!---->\n                      <!---->\n                    </th>\n                    <th class=\\\\\"arco-table-th\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Salary</span>\n                      <!---->\n                      <!----></span>\n                      <!---->\n                      <!---->\n                    </th>\n                    <th class=\\\\\"arco-table-th\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Address</span>\n                      <!---->\n                      <!----></span>\n                      <!---->\n                      <!---->\n                    </th>\n                    <th class=\\\\\"arco-table-th\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Email</span>\n                      <!---->\n                      <!----></span>\n                      <!---->\n                      <!---->\n                    </th>\n                  </tr>\n                </thead>\n              </table>\n            </div>\n            <!--v-if-->\n            <!--v-if-->\n          </div>\n          <div class=\\\\\"arco-scrollbar arco-scrollbar-type-embed\\\\\" style=\\\\\"display: flex; min-height: 0;\\\\\">\n            <div class=\\\\\"arco-scrollbar-container arco-table-body\\\\\" style=\\\\\"max-height: 200px;\\\\\">\n              <table class=\\\\\"arco-table-element\\\\\" style=\\\\\"width: 2000px;\\\\\" cellpadding=\\\\\"0\\\\\" cellspacing=\\\\\"0\\\\\">\n                <colgroup>\n                  <col>\n                  <col>\n                  <col>\n                  <col>\n                </colgroup>\n                <tbody>\n                  <tr class=\\\\\"arco-table-tr\\\\\">\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">Jane Doe</span></span></td>\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">23000</span></span></td>\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">32 Park Road, London</span></span></td>\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">jane.doe@example.com</span></span></td>\n                  </tr>\n                  <!---->\n                  <tr class=\\\\\"arco-table-tr\\\\\">\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">Alisa Ross</span></span></td>\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">25000</span></span></td>\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">35 Park Road, London</span></span></td>\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">alisa.ross@example.com</span></span></td>\n                  </tr>\n                  <!---->\n                  <tr class=\\\\\"arco-table-tr\\\\\">\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">Kevin Sandra</span></span></td>\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">22000</span></span></td>\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">31 Park Road, London</span></span></td>\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">kevin.sandra@example.com</span></span></td>\n                  </tr>\n                  <!---->\n                  <tr class=\\\\\"arco-table-tr\\\\\">\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">Ed Hellen</span></span></td>\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">17000</span></span></td>\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">42 Park Road, London</span></span></td>\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">ed.hellen@example.com</span></span></td>\n                  </tr>\n                  <!---->\n                  <tr class=\\\\\"arco-table-tr\\\\\">\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">William Smith</span></span></td>\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">27000</span></span></td>\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">62 Park Road, London</span></span></td>\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">william.smith@example.com</span></span></td>\n                  </tr>\n                  <!---->\n                </tbody>\n              </table>\n            </div>\n            <!--v-if-->\n            <!--v-if-->\n          </div>\n          <!---->\n        </div>\n        <!--v-if-->\n        <!--v-if-->\n      </div>\n    </div>\n    <!---->\n    <div class=\\\\\"arco-table-pagination arco-table-pagination-right\\\\\">\n      <!---->\n      <div class=\\\\\"arco-pagination arco-pagination-size-medium\\\\\">\n        <!---->\n        <ul class=\\\\\"arco-pagination-list\\\\\"><span class=\\\\\"arco-pagination-item arco-pagination-item-previous arco-pagination-item-disabled\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-left\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M32 8.4 16.444 23.956 32 39.513\\\\\"></path></svg></span>\n          <li class=\\\\\"arco-pagination-item arco-pagination-item-active\\\\\" pages=\\\\\"1\\\\\">1</li>\n          <!----><span class=\\\\\"arco-pagination-item arco-pagination-item-next arco-pagination-item-disabled\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-right\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"m16 39.513 15.556-15.557L16 8.4\\\\\"></path></svg></span>\n        </ul>\n        <!---->\n        <!---->\n      </div>\n      <!---->\n    </div>\n    <!---->\n  </div>\n</div>\n<div class=\\\\\"arco-split arco-split-vertical\\\\\" style=\\\\\"height: 500px; margin-top: 30px;\\\\\">\n  <div class=\\\\\"arco-split-pane arco-split-pane-first\\\\\" style=\\\\\"flex: 0 0 calc(90% - 0px);\\\\\">\n    <div class=\\\\\"arco-table arco-table-size-large arco-table-border arco-table-hover arco-table-layout-fixed\\\\\" style=\\\\\"height: 100%;\\\\\">\n      <!---->\n      <div class=\\\\\"arco-spin\\\\\">\n        <!---->\n        <div class=\\\\\"arco-table-container arco-table-scroll-position-both arco-table-scroll-y\\\\\">\n          <div class=\\\\\"arco-scrollbar arco-scrollbar-type-embed\\\\\" style=\\\\\"height: 100%;\\\\\">\n            <div class=\\\\\"arco-scrollbar-container arco-table-content\\\\\">\n              <div class=\\\\\"arco-scrollbar arco-scrollbar-type-embed\\\\\">\n                <div class=\\\\\"arco-scrollbar-container arco-table-header\\\\\">\n                  <table class=\\\\\"arco-table-element\\\\\" style=\\\\\"width: 120%;\\\\\" cellpadding=\\\\\"0\\\\\" cellspacing=\\\\\"0\\\\\">\n                    <colgroup>\n                      <col>\n                      <col>\n                      <col>\n                      <col>\n                    </colgroup>\n                    <thead>\n                      <tr class=\\\\\"arco-table-tr\\\\\">\n                        <th class=\\\\\"arco-table-th\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Name</span>\n                          <!---->\n                          <!----></span>\n                          <!---->\n                          <!---->\n                        </th>\n                        <th class=\\\\\"arco-table-th\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Salary</span>\n                          <!---->\n                          <!----></span>\n                          <!---->\n                          <!---->\n                        </th>\n                        <th class=\\\\\"arco-table-th\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Address</span>\n                          <!---->\n                          <!----></span>\n                          <!---->\n                          <!---->\n                        </th>\n                        <th class=\\\\\"arco-table-th\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Email</span>\n                          <!---->\n                          <!----></span>\n                          <!---->\n                          <!---->\n                        </th>\n                      </tr>\n                    </thead>\n                  </table>\n                </div>\n                <!--v-if-->\n                <!--v-if-->\n              </div>\n              <div class=\\\\\"arco-scrollbar arco-scrollbar-type-embed\\\\\" style=\\\\\"display: flex; min-height: 0;\\\\\">\n                <div class=\\\\\"arco-scrollbar-container arco-table-body\\\\\" style=\\\\\"max-height: 100%;\\\\\">\n                  <table class=\\\\\"arco-table-element\\\\\" style=\\\\\"width: 120%;\\\\\" cellpadding=\\\\\"0\\\\\" cellspacing=\\\\\"0\\\\\">\n                    <colgroup>\n                      <col>\n                      <col>\n                      <col>\n                      <col>\n                    </colgroup>\n                    <tbody>\n                      <tr class=\\\\\"arco-table-tr\\\\\">\n                        <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">Jane Doe</span></span></td>\n                        <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">23000</span></span></td>\n                        <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">32 Park Road, London</span></span></td>\n                        <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">jane.doe@example.com</span></span></td>\n                      </tr>\n                      <!---->\n                      <tr class=\\\\\"arco-table-tr\\\\\">\n                        <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">Alisa Ross</span></span></td>\n                        <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">25000</span></span></td>\n                        <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">35 Park Road, London</span></span></td>\n                        <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">alisa.ross@example.com</span></span></td>\n                      </tr>\n                      <!---->\n                      <tr class=\\\\\"arco-table-tr\\\\\">\n                        <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">Kevin Sandra</span></span></td>\n                        <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">22000</span></span></td>\n                        <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">31 Park Road, London</span></span></td>\n                        <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">kevin.sandra@example.com</span></span></td>\n                      </tr>\n                      <!---->\n                      <tr class=\\\\\"arco-table-tr\\\\\">\n                        <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">Ed Hellen</span></span></td>\n                        <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">17000</span></span></td>\n                        <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">42 Park Road, London</span></span></td>\n                        <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">ed.hellen@example.com</span></span></td>\n                      </tr>\n                      <!---->\n                      <tr class=\\\\\"arco-table-tr\\\\\">\n                        <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">William Smith</span></span></td>\n                        <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">27000</span></span></td>\n                        <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">62 Park Road, London</span></span></td>\n                        <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">william.smith@example.com</span></span></td>\n                      </tr>\n                      <!---->\n                    </tbody>\n                  </table>\n                </div>\n                <!--v-if-->\n                <!--v-if-->\n              </div>\n              <!---->\n            </div>\n            <!--v-if-->\n            <!--v-if-->\n          </div>\n        </div>\n        <!---->\n        <div class=\\\\\"arco-table-pagination arco-table-pagination-right\\\\\">\n          <!---->\n          <div class=\\\\\"arco-pagination arco-pagination-size-medium\\\\\">\n            <!---->\n            <ul class=\\\\\"arco-pagination-list\\\\\"><span class=\\\\\"arco-pagination-item arco-pagination-item-previous arco-pagination-item-disabled\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-left\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M32 8.4 16.444 23.956 32 39.513\\\\\"></path></svg></span>\n              <li class=\\\\\"arco-pagination-item arco-pagination-item-active\\\\\" pages=\\\\\"1\\\\\">1</li>\n              <!----><span class=\\\\\"arco-pagination-item arco-pagination-item-next arco-pagination-item-disabled\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-right\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"m16 39.513 15.556-15.557L16 8.4\\\\\"></path></svg></span>\n            </ul>\n            <!---->\n            <!---->\n          </div>\n          <!---->\n        </div>\n        <!---->\n      </div>\n    </div>\n  </div>\n  <div class=\\\\\"arco-split-trigger arco-split-trigger-horizontal\\\\\">\n    <!-- @slot 自定义内容 -->\n    <div class=\\\\\"arco-split-trigger-icon-wrapper\\\\\">\n      <!-- @slot 自定义 icon --><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-drag-dot arco-split-trigger-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n        <path d=\\\\\"M40 17v2h-2v-2h2ZM25 17v2h-2v-2h2ZM10 17v2H8v-2h2ZM40 29v2h-2v-2h2ZM25 29v2h-2v-2h2ZM10 29v2H8v-2h2Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n        <path d=\\\\\"M40 17v2h-2v-2h2ZM25 17v2h-2v-2h2ZM10 17v2H8v-2h2ZM40 29v2h-2v-2h2ZM25 29v2h-2v-2h2ZM10 29v2H8v-2h2Z\\\\\"></path>\n      </svg>\n    </div>\n  </div>\n  <div class=\\\\\"arco-split-pane arco-split-pane-second\\\\\"></div>\n</div>\"\n`;\n\nexports[`<table> demo: render [sort] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-vertical arco-space-fill\\\\\" style=\\\\\"column-gap: 24px; row-gap: 24px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 8px; row-gap: 8px;\\\\\">\n      <!---->\n      <div class=\\\\\"arco-space-item\\\\\"><button type=\\\\\"button\\\\\" role=\\\\\"switch\\\\\" aria-checked=\\\\\"false\\\\\" class=\\\\\"arco-switch arco-switch-type-circle\\\\\"><span class=\\\\\"arco-switch-handle\\\\\"><span class=\\\\\"arco-switch-handle-icon\\\\\"></span></span><!--  prettier-ignore  -->\n          <!--v-if-->\n        </button></div>\n      <!---->\n      <div class=\\\\\"arco-space-item\\\\\"><span>Filter icon align left: false</span></div>\n    </div>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-table arco-table-size-large arco-table-border arco-table-hover\\\\\">\n      <!---->\n      <div class=\\\\\"arco-spin\\\\\">\n        <!---->\n        <div class=\\\\\"arco-table-container\\\\\">\n          <div class=\\\\\"arco-scrollbar arco-scrollbar-type-embed\\\\\" style=\\\\\"height: 100%;\\\\\">\n            <div class=\\\\\"arco-scrollbar-container arco-table-content arco-table-content-scroll-x\\\\\">\n              <table class=\\\\\"arco-table-element\\\\\" cellpadding=\\\\\"0\\\\\" cellspacing=\\\\\"0\\\\\">\n                <colgroup>\n                  <col>\n                  <col>\n                  <col>\n                  <col>\n                </colgroup>\n                <thead>\n                  <tr class=\\\\\"arco-table-tr\\\\\">\n                    <th class=\\\\\"arco-table-th\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left arco-table-cell-with-sorter arco-table-cell-next-ascend\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Name</span><span class=\\\\\"arco-table-sorter\\\\\"><div class=\\\\\"arco-table-sorter-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-caret-up\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M23.063 13.171a1.2 1.2 0 0 1 1.875 0l13.503 16.88c.628.785.069 1.949-.937 1.949H10.497c-1.006 0-1.565-1.164-.937-1.95l13.503-16.879Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path></svg></div><div class=\\\\\"arco-table-sorter-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-caret-down\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M24.938 34.829a1.2 1.2 0 0 1-1.875 0L9.56 17.949c-.628-.785-.069-1.949.937-1.949h27.007c1.006 0 1.565 1.164.937 1.95L24.937 34.829Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path></svg></div></span>\n                      <!----></span>\n                      <!---->\n                      <!---->\n                    </th>\n                    <th class=\\\\\"arco-table-th\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left arco-table-cell-with-sorter arco-table-cell-next-ascend\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Salary</span><span class=\\\\\"arco-table-sorter\\\\\"><div class=\\\\\"arco-table-sorter-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-caret-up\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M23.063 13.171a1.2 1.2 0 0 1 1.875 0l13.503 16.88c.628.785.069 1.949-.937 1.949H10.497c-1.006 0-1.565-1.164-.937-1.95l13.503-16.879Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path></svg></div><!----></span>\n                      <!----></span><span class=\\\\\"arco-icon-hover arco-icon-hover-disabled arco-table-filters\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-filter\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M30 42V22.549a1 1 0 0 1 .463-.844l10.074-6.41A1 1 0 0 0 41 14.45V8a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v6.451a1 1 0 0 0 .463.844l10.074 6.41a1 1 0 0 1 .463.844V37\\\\\"></path></svg></span>\n                      <!---->\n                      <!---->\n                    </th>\n                    <th class=\\\\\"arco-table-th\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Address</span>\n                      <!---->\n                      <!----></span><span class=\\\\\"arco-icon-hover arco-icon-hover-disabled arco-table-filters\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-filter\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M30 42V22.549a1 1 0 0 1 .463-.844l10.074-6.41A1 1 0 0 0 41 14.45V8a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v6.451a1 1 0 0 0 .463.844l10.074 6.41a1 1 0 0 1 .463.844V37\\\\\"></path></svg></span>\n                      <!---->\n                      <!---->\n                    </th>\n                    <th class=\\\\\"arco-table-th\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Email</span>\n                      <!---->\n                      <!----></span>\n                      <!---->\n                      <!---->\n                    </th>\n                  </tr>\n                </thead>\n                <tbody>\n                  <tr class=\\\\\"arco-table-tr\\\\\">\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">Jane Doe</span></span></td>\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">23000</span></span></td>\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">32 Park Road, London</span></span></td>\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">jane.doe@example.com</span></span></td>\n                  </tr>\n                  <!---->\n                  <tr class=\\\\\"arco-table-tr\\\\\">\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">Alisa Ross</span></span></td>\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">25000</span></span></td>\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">35 Park Road, London</span></span></td>\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">alisa.ross@example.com</span></span></td>\n                  </tr>\n                  <!---->\n                  <tr class=\\\\\"arco-table-tr\\\\\">\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">Kevin Sandra</span></span></td>\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">22000</span></span></td>\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">31 Park Road, London</span></span></td>\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">kevin.sandra@example.com</span></span></td>\n                  </tr>\n                  <!---->\n                  <tr class=\\\\\"arco-table-tr\\\\\">\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">Ed Hellen</span></span></td>\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">17000</span></span></td>\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">42 Park Road, London</span></span></td>\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">ed.hellen@example.com</span></span></td>\n                  </tr>\n                  <!---->\n                  <tr class=\\\\\"arco-table-tr\\\\\">\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">William Smith</span></span></td>\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">27000</span></span></td>\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">62 Park Road, London</span></span></td>\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">william.smith@example.com</span></span></td>\n                  </tr>\n                  <!---->\n                </tbody>\n                <!---->\n              </table>\n            </div>\n            <!--v-if-->\n            <!--v-if-->\n          </div>\n        </div>\n        <!---->\n        <div class=\\\\\"arco-table-pagination arco-table-pagination-right\\\\\">\n          <!---->\n          <div class=\\\\\"arco-pagination arco-pagination-size-medium\\\\\">\n            <!---->\n            <ul class=\\\\\"arco-pagination-list\\\\\"><span class=\\\\\"arco-pagination-item arco-pagination-item-previous arco-pagination-item-disabled\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-left\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M32 8.4 16.444 23.956 32 39.513\\\\\"></path></svg></span>\n              <li class=\\\\\"arco-pagination-item arco-pagination-item-active\\\\\" pages=\\\\\"1\\\\\">1</li>\n              <!----><span class=\\\\\"arco-pagination-item arco-pagination-item-next arco-pagination-item-disabled\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-right\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"m16 39.513 15.556-15.557L16 8.4\\\\\"></path></svg></span>\n            </ul>\n            <!---->\n            <!---->\n          </div>\n          <!---->\n        </div>\n        <!---->\n      </div>\n    </div>\n  </div>\n</div>\"\n`;\n\nexports[`<table> demo: render [span] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-vertical\\\\\" style=\\\\\"column-gap: 24px; row-gap: 24px; width: 100%;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-table arco-table-size-large arco-table-border arco-table-hover\\\\\">\n      <!---->\n      <div class=\\\\\"arco-spin\\\\\">\n        <!---->\n        <div class=\\\\\"arco-table-container\\\\\">\n          <div class=\\\\\"arco-scrollbar arco-scrollbar-type-embed\\\\\" style=\\\\\"height: 100%;\\\\\">\n            <div class=\\\\\"arco-scrollbar-container arco-table-content arco-table-content-scroll-x\\\\\">\n              <table class=\\\\\"arco-table-element\\\\\" cellpadding=\\\\\"0\\\\\" cellspacing=\\\\\"0\\\\\">\n                <colgroup>\n                  <col>\n                  <col>\n                  <col>\n                  <col>\n                </colgroup>\n                <thead>\n                  <tr class=\\\\\"arco-table-tr\\\\\">\n                    <th class=\\\\\"arco-table-th\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Name</span>\n                      <!---->\n                      <!----></span>\n                      <!---->\n                      <!---->\n                    </th>\n                    <th class=\\\\\"arco-table-th\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Salary</span>\n                      <!---->\n                      <!----></span>\n                      <!---->\n                      <!---->\n                    </th>\n                    <th class=\\\\\"arco-table-th\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Address</span>\n                      <!---->\n                      <!----></span>\n                      <!---->\n                      <!---->\n                    </th>\n                    <th class=\\\\\"arco-table-th\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Email</span>\n                      <!---->\n                      <!----></span>\n                      <!---->\n                      <!---->\n                    </th>\n                  </tr>\n                </thead>\n                <tbody>\n                  <tr class=\\\\\"arco-table-tr\\\\\">\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">Jane Doe</span></span></td>\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">23000</span></span></td>\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">32 Park Road, London</span></span></td>\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">jane.doe@example.com</span></span></td>\n                  </tr>\n                  <!---->\n                  <tr class=\\\\\"arco-table-tr\\\\\">\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">Alisa Ross</span></span></td>\n                    <td class=\\\\\"arco-table-td\\\\\" rowspan=\\\\\"2\\\\\" colspan=\\\\\"3\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">25000</span></span></td>\n                    <!---->\n                    <!---->\n                  </tr>\n                  <!---->\n                  <tr class=\\\\\"arco-table-tr\\\\\">\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">Kevin Sandra</span></span></td>\n                    <!---->\n                    <!---->\n                    <!---->\n                  </tr>\n                  <!---->\n                  <tr class=\\\\\"arco-table-tr\\\\\">\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">Ed Hellen</span></span></td>\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">17000</span></span></td>\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">42 Park Road, London</span></span></td>\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">ed.hellen@example.com</span></span></td>\n                  </tr>\n                  <!---->\n                  <tr class=\\\\\"arco-table-tr\\\\\">\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">William Smith</span></span></td>\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">27000</span></span></td>\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">62 Park Road, London</span></span></td>\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">william.smith@example.com</span></span></td>\n                  </tr>\n                  <!---->\n                </tbody>\n                <!---->\n              </table>\n            </div>\n            <!--v-if-->\n            <!--v-if-->\n          </div>\n        </div>\n        <!---->\n        <div class=\\\\\"arco-table-pagination arco-table-pagination-right\\\\\">\n          <!---->\n          <div class=\\\\\"arco-pagination arco-pagination-size-medium\\\\\">\n            <!---->\n            <ul class=\\\\\"arco-pagination-list\\\\\"><span class=\\\\\"arco-pagination-item arco-pagination-item-previous arco-pagination-item-disabled\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-left\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M32 8.4 16.444 23.956 32 39.513\\\\\"></path></svg></span>\n              <li class=\\\\\"arco-pagination-item arco-pagination-item-active\\\\\" pages=\\\\\"1\\\\\">1</li>\n              <!----><span class=\\\\\"arco-pagination-item arco-pagination-item-next arco-pagination-item-disabled\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-right\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"m16 39.513 15.556-15.557L16 8.4\\\\\"></path></svg></span>\n            </ul>\n            <!---->\n            <!---->\n          </div>\n          <!---->\n        </div>\n        <!---->\n      </div>\n    </div>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-table arco-table-size-large arco-table-border arco-table-border-cell arco-table-hover\\\\\">\n      <!---->\n      <div class=\\\\\"arco-spin\\\\\">\n        <!---->\n        <div class=\\\\\"arco-table-container\\\\\">\n          <div class=\\\\\"arco-scrollbar arco-scrollbar-type-embed\\\\\" style=\\\\\"height: 100%;\\\\\">\n            <div class=\\\\\"arco-scrollbar-container arco-table-content arco-table-content-scroll-x\\\\\">\n              <table class=\\\\\"arco-table-element\\\\\" cellpadding=\\\\\"0\\\\\" cellspacing=\\\\\"0\\\\\">\n                <colgroup>\n                  <col>\n                  <col>\n                  <col>\n                  <col>\n                </colgroup>\n                <thead>\n                  <tr class=\\\\\"arco-table-tr\\\\\">\n                    <th class=\\\\\"arco-table-th\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Name</span>\n                      <!---->\n                      <!----></span>\n                      <!---->\n                      <!---->\n                    </th>\n                    <th class=\\\\\"arco-table-th\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Salary</span>\n                      <!---->\n                      <!----></span>\n                      <!---->\n                      <!---->\n                    </th>\n                    <th class=\\\\\"arco-table-th\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Address</span>\n                      <!---->\n                      <!----></span>\n                      <!---->\n                      <!---->\n                    </th>\n                    <th class=\\\\\"arco-table-th\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Email</span>\n                      <!---->\n                      <!----></span>\n                      <!---->\n                      <!---->\n                    </th>\n                  </tr>\n                </thead>\n                <tbody>\n                  <tr class=\\\\\"arco-table-tr\\\\\">\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">Jane Doe</span></span></td>\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">23000</span></span></td>\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">32 Park Road, London</span></span></td>\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">jane.doe@example.com</span></span></td>\n                  </tr>\n                  <!---->\n                  <tr class=\\\\\"arco-table-tr\\\\\">\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">Alisa Ross</span></span></td>\n                    <td class=\\\\\"arco-table-td\\\\\" rowspan=\\\\\"2\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">25000</span></span></td>\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">35 Park Road, London</span></span></td>\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">alisa.ross@example.com</span></span></td>\n                  </tr>\n                  <!---->\n                  <tr class=\\\\\"arco-table-tr\\\\\">\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">Kevin Sandra</span></span></td>\n                    <!---->\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">31 Park Road, London</span></span></td>\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">kevin.sandra@example.com</span></span></td>\n                  </tr>\n                  <!---->\n                  <tr class=\\\\\"arco-table-tr\\\\\">\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">Ed Hellen</span></span></td>\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">17000</span></span></td>\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">42 Park Road, London</span></span></td>\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">ed.hellen@example.com</span></span></td>\n                  </tr>\n                  <!---->\n                  <tr class=\\\\\"arco-table-tr\\\\\">\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">William Smith</span></span></td>\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">27000</span></span></td>\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">62 Park Road, London</span></span></td>\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">william.smith@example.com</span></span></td>\n                  </tr>\n                  <!---->\n                </tbody>\n                <!---->\n              </table>\n            </div>\n            <!--v-if-->\n            <!--v-if-->\n          </div>\n        </div>\n        <!---->\n        <div class=\\\\\"arco-table-pagination arco-table-pagination-right\\\\\">\n          <!---->\n          <div class=\\\\\"arco-pagination arco-pagination-size-medium\\\\\">\n            <!---->\n            <ul class=\\\\\"arco-pagination-list\\\\\"><span class=\\\\\"arco-pagination-item arco-pagination-item-previous arco-pagination-item-disabled\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-left\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M32 8.4 16.444 23.956 32 39.513\\\\\"></path></svg></span>\n              <li class=\\\\\"arco-pagination-item arco-pagination-item-active\\\\\" pages=\\\\\"1\\\\\">1</li>\n              <!----><span class=\\\\\"arco-pagination-item arco-pagination-item-next arco-pagination-item-disabled\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-right\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"m16 39.513 15.556-15.557L16 8.4\\\\\"></path></svg></span>\n            </ul>\n            <!---->\n            <!---->\n          </div>\n          <!---->\n        </div>\n        <!---->\n      </div>\n    </div>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-table arco-table-size-large arco-table-border arco-table-border-cell arco-table-hover arco-table-type-selection\\\\\">\n      <!---->\n      <div class=\\\\\"arco-spin\\\\\">\n        <!---->\n        <div class=\\\\\"arco-table-container\\\\\">\n          <div class=\\\\\"arco-scrollbar arco-scrollbar-type-embed\\\\\" style=\\\\\"height: 100%;\\\\\">\n            <div class=\\\\\"arco-scrollbar-container arco-table-content arco-table-content-scroll-x\\\\\">\n              <table class=\\\\\"arco-table-element\\\\\" cellpadding=\\\\\"0\\\\\" cellspacing=\\\\\"0\\\\\">\n                <colgroup>\n                  <col class=\\\\\"arco-table-selection-checkbox-col\\\\\">\n                  <col>\n                  <col>\n                  <col>\n                  <col>\n                </colgroup>\n                <thead>\n                  <tr class=\\\\\"arco-table-tr\\\\\">\n                    <th class=\\\\\"arco-table-th arco-table-operation\\\\\"><span class=\\\\\"arco-table-cell\\\\\"><!----></span></th>\n                    <th class=\\\\\"arco-table-th\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Name</span>\n                      <!---->\n                      <!----></span>\n                      <!---->\n                      <!---->\n                    </th>\n                    <th class=\\\\\"arco-table-th\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Salary</span>\n                      <!---->\n                      <!----></span>\n                      <!---->\n                      <!---->\n                    </th>\n                    <th class=\\\\\"arco-table-th\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Address</span>\n                      <!---->\n                      <!----></span>\n                      <!---->\n                      <!---->\n                    </th>\n                    <th class=\\\\\"arco-table-th\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Email</span>\n                      <!---->\n                      <!----></span>\n                      <!---->\n                      <!---->\n                    </th>\n                  </tr>\n                </thead>\n                <tbody>\n                  <tr class=\\\\\"arco-table-tr\\\\\">\n                    <td class=\\\\\"arco-table-td arco-table-operation arco-table-checkbox\\\\\"><span class=\\\\\"arco-table-cell\\\\\"><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n                      <!----></label></span>\n                    </td>\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">Jane Doe</span></span></td>\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">23000</span></span></td>\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">32 Park Road, London</span></span></td>\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">jane.doe@example.com</span></span></td>\n                  </tr>\n                  <!---->\n                  <tr class=\\\\\"arco-table-tr\\\\\">\n                    <td class=\\\\\"arco-table-td arco-table-operation arco-table-checkbox\\\\\" rowspan=\\\\\"2\\\\\"><span class=\\\\\"arco-table-cell\\\\\"><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n                      <!----></label></span>\n                    </td>\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">Alisa Ross</span></span></td>\n                    <td class=\\\\\"arco-table-td\\\\\" rowspan=\\\\\"2\\\\\" colspan=\\\\\"3\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">25000</span></span></td>\n                    <!---->\n                    <!---->\n                  </tr>\n                  <!---->\n                  <tr class=\\\\\"arco-table-tr\\\\\">\n                    <!---->\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">Kevin Sandra</span></span></td>\n                    <!---->\n                    <!---->\n                    <!---->\n                  </tr>\n                  <!---->\n                  <tr class=\\\\\"arco-table-tr\\\\\">\n                    <td class=\\\\\"arco-table-td arco-table-operation arco-table-checkbox\\\\\"><span class=\\\\\"arco-table-cell\\\\\"><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n                      <!----></label></span>\n                    </td>\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">Ed Hellen</span></span></td>\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">17000</span></span></td>\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">42 Park Road, London</span></span></td>\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">ed.hellen@example.com</span></span></td>\n                  </tr>\n                  <!---->\n                  <tr class=\\\\\"arco-table-tr\\\\\">\n                    <td class=\\\\\"arco-table-td arco-table-operation arco-table-checkbox\\\\\"><span class=\\\\\"arco-table-cell\\\\\"><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n                      <!----></label></span>\n                    </td>\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">William Smith</span></span></td>\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">27000</span></span></td>\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">62 Park Road, London</span></span></td>\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">william.smith@example.com</span></span></td>\n                  </tr>\n                  <!---->\n                </tbody>\n                <!---->\n              </table>\n            </div>\n            <!--v-if-->\n            <!--v-if-->\n          </div>\n        </div>\n        <!---->\n        <div class=\\\\\"arco-table-pagination arco-table-pagination-right\\\\\">\n          <!---->\n          <div class=\\\\\"arco-pagination arco-pagination-size-medium\\\\\">\n            <!---->\n            <ul class=\\\\\"arco-pagination-list\\\\\"><span class=\\\\\"arco-pagination-item arco-pagination-item-previous arco-pagination-item-disabled\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-left\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M32 8.4 16.444 23.956 32 39.513\\\\\"></path></svg></span>\n              <li class=\\\\\"arco-pagination-item arco-pagination-item-active\\\\\" pages=\\\\\"1\\\\\">1</li>\n              <!----><span class=\\\\\"arco-pagination-item arco-pagination-item-next arco-pagination-item-disabled\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-right\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"m16 39.513 15.556-15.557L16 8.4\\\\\"></path></svg></span>\n            </ul>\n            <!---->\n            <!---->\n          </div>\n          <!---->\n        </div>\n        <!---->\n      </div>\n    </div>\n  </div>\n</div>\"\n`;\n\nexports[`<table> demo: render [sticky] correctly 1`] = `\n\"<div class=\\\\\"arco-table arco-table-size-large arco-table-border arco-table-hover arco-table-layout-fixed\\\\\">\n  <!---->\n  <div class=\\\\\"arco-spin\\\\\">\n    <!---->\n    <div class=\\\\\"arco-table-container arco-table-scroll-y\\\\\">\n      <div class=\\\\\"arco-scrollbar arco-scrollbar-type-embed\\\\\" style=\\\\\"height: 100%;\\\\\">\n        <div class=\\\\\"arco-scrollbar-container arco-table-content\\\\\">\n          <div class=\\\\\"arco-scrollbar arco-scrollbar-type-embed arco-table-header-sticky\\\\\" style=\\\\\"top: 60px;\\\\\">\n            <div class=\\\\\"arco-scrollbar-container arco-table-header\\\\\">\n              <table class=\\\\\"arco-table-element\\\\\" cellpadding=\\\\\"0\\\\\" cellspacing=\\\\\"0\\\\\">\n                <colgroup>\n                  <col>\n                  <col>\n                  <col>\n                  <col>\n                </colgroup>\n                <thead>\n                  <tr class=\\\\\"arco-table-tr\\\\\">\n                    <th class=\\\\\"arco-table-th\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Name</span>\n                      <!---->\n                      <!----></span>\n                      <!---->\n                      <!---->\n                    </th>\n                    <th class=\\\\\"arco-table-th\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Salary</span>\n                      <!---->\n                      <!----></span>\n                      <!---->\n                      <!---->\n                    </th>\n                    <th class=\\\\\"arco-table-th\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Address</span>\n                      <!---->\n                      <!----></span>\n                      <!---->\n                      <!---->\n                    </th>\n                    <th class=\\\\\"arco-table-th\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Email</span>\n                      <!---->\n                      <!----></span>\n                      <!---->\n                      <!---->\n                    </th>\n                  </tr>\n                </thead>\n              </table>\n            </div>\n            <!--v-if-->\n            <!--v-if-->\n          </div>\n          <div class=\\\\\"arco-scrollbar arco-scrollbar-type-embed\\\\\" style=\\\\\"display: flex; min-height: 0;\\\\\">\n            <div class=\\\\\"arco-scrollbar-container arco-table-body\\\\\" style=\\\\\"max-height: 100%;\\\\\">\n              <table class=\\\\\"arco-table-element\\\\\" cellpadding=\\\\\"0\\\\\" cellspacing=\\\\\"0\\\\\">\n                <colgroup>\n                  <col>\n                  <col>\n                  <col>\n                  <col>\n                </colgroup>\n                <tbody>\n                  <tr class=\\\\\"arco-table-tr\\\\\">\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">Jane Doe</span></span></td>\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">23000</span></span></td>\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">32 Park Road, London</span></span></td>\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">jane.doe@example.com</span></span></td>\n                  </tr>\n                  <!---->\n                  <tr class=\\\\\"arco-table-tr\\\\\">\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">Alisa Ross</span></span></td>\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">25000</span></span></td>\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">35 Park Road, London</span></span></td>\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">alisa.ross@example.com</span></span></td>\n                  </tr>\n                  <!---->\n                  <tr class=\\\\\"arco-table-tr\\\\\">\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">Kevin Sandra</span></span></td>\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">22000</span></span></td>\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">31 Park Road, London</span></span></td>\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">kevin.sandra@example.com</span></span></td>\n                  </tr>\n                  <!---->\n                  <tr class=\\\\\"arco-table-tr\\\\\">\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">Ed Hellen</span></span></td>\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">17000</span></span></td>\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">42 Park Road, London</span></span></td>\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">ed.hellen@example.com</span></span></td>\n                  </tr>\n                  <!---->\n                  <tr class=\\\\\"arco-table-tr\\\\\">\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">William Smith</span></span></td>\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">27000</span></span></td>\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">62 Park Road, London</span></span></td>\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">william.smith@example.com</span></span></td>\n                  </tr>\n                  <!---->\n                </tbody>\n              </table>\n            </div>\n            <!--v-if-->\n            <!--v-if-->\n          </div>\n          <!---->\n        </div>\n        <!--v-if-->\n        <!--v-if-->\n      </div>\n    </div>\n    <!---->\n    <div class=\\\\\"arco-table-pagination arco-table-pagination-right\\\\\">\n      <!---->\n      <div class=\\\\\"arco-pagination arco-pagination-size-medium\\\\\">\n        <!---->\n        <ul class=\\\\\"arco-pagination-list\\\\\"><span class=\\\\\"arco-pagination-item arco-pagination-item-previous arco-pagination-item-disabled\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-left\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M32 8.4 16.444 23.956 32 39.513\\\\\"></path></svg></span>\n          <li class=\\\\\"arco-pagination-item arco-pagination-item-active\\\\\" pages=\\\\\"1\\\\\">1</li>\n          <!----><span class=\\\\\"arco-pagination-item arco-pagination-item-next arco-pagination-item-disabled\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-right\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"m16 39.513 15.556-15.557L16 8.4\\\\\"></path></svg></span>\n        </ul>\n        <!---->\n        <!---->\n      </div>\n      <!---->\n    </div>\n    <!---->\n  </div>\n</div>\"\n`;\n\nexports[`<table> demo: render [subtree] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 8px; row-gap: 8px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span>checkStrictly:</span></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button type=\\\\\"button\\\\\" role=\\\\\"switch\\\\\" aria-checked=\\\\\"true\\\\\" class=\\\\\"arco-switch arco-switch-type-circle arco-switch-checked\\\\\"><span class=\\\\\"arco-switch-handle\\\\\"><span class=\\\\\"arco-switch-handle-icon\\\\\"></span></span><!--  prettier-ignore  -->\n      <!--v-if-->\n    </button></div>\n</div>\n<div class=\\\\\"arco-table arco-table-size-large arco-table-border arco-table-hover arco-table-type-selection\\\\\" style=\\\\\"margin-top: 20px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-spin\\\\\">\n    <!---->\n    <div class=\\\\\"arco-table-container\\\\\">\n      <div class=\\\\\"arco-scrollbar arco-scrollbar-type-embed\\\\\" style=\\\\\"height: 100%;\\\\\">\n        <div class=\\\\\"arco-scrollbar-container arco-table-content arco-table-content-scroll-x\\\\\">\n          <table class=\\\\\"arco-table-element\\\\\" cellpadding=\\\\\"0\\\\\" cellspacing=\\\\\"0\\\\\">\n            <colgroup>\n              <col class=\\\\\"arco-table-selection-checkbox-col\\\\\">\n              <col>\n              <col>\n              <col>\n              <col>\n            </colgroup>\n            <thead>\n              <tr class=\\\\\"arco-table-tr\\\\\">\n                <th class=\\\\\"arco-table-th arco-table-operation arco-table-checkbox\\\\\"><span class=\\\\\"arco-table-cell\\\\\"><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n                  <!----></label></span>\n                </th>\n                <th class=\\\\\"arco-table-th\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Name</span>\n                  <!---->\n                  <!----></span>\n                  <!---->\n                  <!---->\n                </th>\n                <th class=\\\\\"arco-table-th\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Salary</span>\n                  <!---->\n                  <!----></span>\n                  <!---->\n                  <!---->\n                </th>\n                <th class=\\\\\"arco-table-th\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Address</span>\n                  <!---->\n                  <!----></span>\n                  <!---->\n                  <!---->\n                </th>\n                <th class=\\\\\"arco-table-th\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Email</span>\n                  <!---->\n                  <!----></span>\n                  <!---->\n                  <!---->\n                </th>\n              </tr>\n            </thead>\n            <tbody>\n              <tr class=\\\\\"arco-table-tr\\\\\">\n                <td class=\\\\\"arco-table-td arco-table-operation arco-table-checkbox\\\\\"><span class=\\\\\"arco-table-cell\\\\\"><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n                  <!----></label></span>\n                </td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left arco-table-cell-expand-icon\\\\\"><!----><span class=\\\\\"arco-table-cell-inline-icon\\\\\"><button type=\\\\\"button\\\\\" class=\\\\\"arco-table-expand-btn\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-plus\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M5 24h38M24 5v38\\\\\"></path></svg></button></span><span class=\\\\\"arco-table-td-content\\\\\">Jane Doe</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">23000</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">32 Park Road, London</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">jane.doe@example.com</span></span></td>\n              </tr>\n              <!---->\n              <tr class=\\\\\"arco-table-tr\\\\\">\n                <td class=\\\\\"arco-table-td arco-table-operation arco-table-checkbox\\\\\"><span class=\\\\\"arco-table-cell\\\\\"><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n                  <!----></label></span>\n                </td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span style=\\\\\"padding-left: 20px;\\\\\"></span>\n                  <!----><span class=\\\\\"arco-table-td-content\\\\\">Alisa Ross</span></span>\n                </td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">25000</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">35 Park Road, London</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">alisa.ross@example.com</span></span></td>\n              </tr>\n              <!---->\n              <tr class=\\\\\"arco-table-tr\\\\\">\n                <td class=\\\\\"arco-table-td arco-table-operation arco-table-checkbox\\\\\"><span class=\\\\\"arco-table-cell\\\\\"><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n                  <!----></label></span>\n                </td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span style=\\\\\"padding-left: 20px;\\\\\"></span>\n                  <!----><span class=\\\\\"arco-table-td-content\\\\\">Kevin Sandra</span></span>\n                </td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">22000</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">31 Park Road, London</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">kevin.sandra@example.com</span></span></td>\n              </tr>\n              <!---->\n              <tr class=\\\\\"arco-table-tr\\\\\">\n                <td class=\\\\\"arco-table-td arco-table-operation arco-table-checkbox\\\\\"><span class=\\\\\"arco-table-cell\\\\\"><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n                  <!----></label></span>\n                </td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span style=\\\\\"padding-left: 20px;\\\\\"></span>\n                  <!----><span class=\\\\\"arco-table-td-content\\\\\">Ed Hellen</span></span>\n                </td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">17000</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">42 Park Road, London</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">ed.hellen@example.com</span></span></td>\n              </tr>\n              <!---->\n              <tr class=\\\\\"arco-table-tr\\\\\">\n                <td class=\\\\\"arco-table-td arco-table-operation arco-table-checkbox\\\\\"><span class=\\\\\"arco-table-cell\\\\\"><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n                  <!----></label></span>\n                </td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left arco-table-cell-expand-icon\\\\\"><!----><span class=\\\\\"arco-table-cell-inline-icon\\\\\"><button type=\\\\\"button\\\\\" class=\\\\\"arco-table-expand-btn\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-plus\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M5 24h38M24 5v38\\\\\"></path></svg></button></span><span class=\\\\\"arco-table-td-content\\\\\">William Smith</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">27000</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">62 Park Road, London</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">william.smith@example.com</span></span></td>\n              </tr>\n              <!---->\n            </tbody>\n            <!---->\n          </table>\n        </div>\n        <!--v-if-->\n        <!--v-if-->\n      </div>\n    </div>\n    <!---->\n    <div class=\\\\\"arco-table-pagination arco-table-pagination-right\\\\\">\n      <!---->\n      <div class=\\\\\"arco-pagination arco-pagination-size-medium\\\\\">\n        <!---->\n        <ul class=\\\\\"arco-pagination-list\\\\\"><span class=\\\\\"arco-pagination-item arco-pagination-item-previous arco-pagination-item-disabled\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-left\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M32 8.4 16.444 23.956 32 39.513\\\\\"></path></svg></span>\n          <li class=\\\\\"arco-pagination-item arco-pagination-item-active\\\\\" pages=\\\\\"1\\\\\">1</li>\n          <!----><span class=\\\\\"arco-pagination-item arco-pagination-item-next arco-pagination-item-disabled\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-right\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"m16 39.513 15.556-15.557L16 8.4\\\\\"></path></svg></span>\n        </ul>\n        <!---->\n        <!---->\n      </div>\n      <!---->\n    </div>\n    <!---->\n  </div>\n</div>\"\n`;\n\nexports[`<table> demo: render [summary] correctly 1`] = `\n\"<div class=\\\\\"arco-table arco-table-size-large arco-table-border arco-table-hover\\\\\">\n  <!---->\n  <div class=\\\\\"arco-spin\\\\\">\n    <!---->\n    <div class=\\\\\"arco-table-container arco-table-has-fixed-col-left\\\\\">\n      <div class=\\\\\"arco-scrollbar arco-scrollbar-type-embed\\\\\" style=\\\\\"height: 100%;\\\\\">\n        <div class=\\\\\"arco-scrollbar-container arco-table-content arco-table-content-scroll-x\\\\\">\n          <table class=\\\\\"arco-table-element\\\\\" cellpadding=\\\\\"0\\\\\" cellspacing=\\\\\"0\\\\\">\n            <colgroup>\n              <col style=\\\\\"width: 140px; min-width: 140px; max-width: 140px;\\\\\">\n              <col>\n              <col>\n              <col>\n            </colgroup>\n            <thead>\n              <tr class=\\\\\"arco-table-tr\\\\\">\n                <th class=\\\\\"arco-table-th arco-table-col-fixed-left arco-table-col-fixed-left-last\\\\\" style=\\\\\"left: 0px;\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Name</span>\n                  <!---->\n                  <!----></span>\n                  <!---->\n                  <!---->\n                </th>\n                <th class=\\\\\"arco-table-th\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Salary</span>\n                  <!---->\n                  <!----></span>\n                  <!---->\n                  <!---->\n                </th>\n                <th class=\\\\\"arco-table-th\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Data1</span>\n                  <!---->\n                  <!----></span>\n                  <!---->\n                  <!---->\n                </th>\n                <th class=\\\\\"arco-table-th\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Data2</span>\n                  <!---->\n                  <!----></span>\n                  <!---->\n                  <!---->\n                </th>\n              </tr>\n            </thead>\n            <tbody>\n              <tr class=\\\\\"arco-table-tr\\\\\">\n                <td class=\\\\\"arco-table-td arco-table-col-fixed-left arco-table-col-fixed-left-last\\\\\" style=\\\\\"left: 0px;\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">Jane Doe</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">23000</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">10</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">8</span></span></td>\n              </tr>\n              <!---->\n              <tr class=\\\\\"arco-table-tr\\\\\">\n                <td class=\\\\\"arco-table-td arco-table-col-fixed-left arco-table-col-fixed-left-last\\\\\" style=\\\\\"left: 0px;\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">Alisa Ross</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">25000</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">9</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">-12</span></span></td>\n              </tr>\n              <!---->\n              <tr class=\\\\\"arco-table-tr\\\\\">\n                <td class=\\\\\"arco-table-td arco-table-col-fixed-left arco-table-col-fixed-left-last\\\\\" style=\\\\\"left: 0px;\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">Kevin Sandra</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">22000</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">15</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">-2</span></span></td>\n              </tr>\n              <!---->\n              <tr class=\\\\\"arco-table-tr\\\\\">\n                <td class=\\\\\"arco-table-td arco-table-col-fixed-left arco-table-col-fixed-left-last\\\\\" style=\\\\\"left: 0px;\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">Ed Hellen</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">17000</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">2</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">3</span></span></td>\n              </tr>\n              <!---->\n              <tr class=\\\\\"arco-table-tr\\\\\">\n                <td class=\\\\\"arco-table-td arco-table-col-fixed-left arco-table-col-fixed-left-last\\\\\" style=\\\\\"left: 0px;\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">William Smith</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">27000</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">11</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">0</span></span></td>\n              </tr>\n              <!---->\n            </tbody>\n            <tfoot>\n              <tr class=\\\\\"arco-table-tr arco-table-tr-summary\\\\\">\n                <td class=\\\\\"arco-table-td arco-table-col-fixed-left arco-table-col-fixed-left-last\\\\\" style=\\\\\"left: 0px;\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">Summary</span></span></td>\n                <td class=\\\\\"arco-table-td\\\\\" style=\\\\\"color: rgb(255, 255, 255);\\\\\" colspan=\\\\\"2\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">114000</span></span></td>\n                <!---->\n                <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">-3</span></span></td>\n              </tr>\n            </tfoot>\n          </table>\n        </div>\n        <!--v-if-->\n        <!--v-if-->\n      </div>\n    </div>\n    <!---->\n    <div class=\\\\\"arco-table-pagination arco-table-pagination-right\\\\\">\n      <!---->\n      <div class=\\\\\"arco-pagination arco-pagination-size-medium\\\\\">\n        <!---->\n        <ul class=\\\\\"arco-pagination-list\\\\\"><span class=\\\\\"arco-pagination-item arco-pagination-item-previous arco-pagination-item-disabled\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-left\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M32 8.4 16.444 23.956 32 39.513\\\\\"></path></svg></span>\n          <li class=\\\\\"arco-pagination-item arco-pagination-item-active\\\\\" pages=\\\\\"1\\\\\">1</li>\n          <!----><span class=\\\\\"arco-pagination-item arco-pagination-item-next arco-pagination-item-disabled\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-right\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"m16 39.513 15.556-15.557L16 8.4\\\\\"></path></svg></span>\n        </ul>\n        <!---->\n        <!---->\n      </div>\n      <!---->\n    </div>\n    <!---->\n  </div>\n</div>\n<div class=\\\\\"arco-table arco-table-size-large arco-table-border arco-table-hover arco-table-layout-fixed\\\\\">\n  <!---->\n  <div class=\\\\\"arco-spin\\\\\">\n    <!---->\n    <div class=\\\\\"arco-table-container arco-table-has-fixed-col-left arco-table-scroll-position-both arco-table-scroll-y\\\\\">\n      <div class=\\\\\"arco-scrollbar arco-scrollbar-type-embed\\\\\" style=\\\\\"height: 100%;\\\\\">\n        <div class=\\\\\"arco-scrollbar-container arco-table-content\\\\\">\n          <div class=\\\\\"arco-scrollbar arco-scrollbar-type-embed\\\\\">\n            <div class=\\\\\"arco-scrollbar-container arco-table-header\\\\\">\n              <table class=\\\\\"arco-table-element\\\\\" style=\\\\\"width: 2000px;\\\\\" cellpadding=\\\\\"0\\\\\" cellspacing=\\\\\"0\\\\\">\n                <colgroup>\n                  <col class=\\\\\"arco-table-expand-col\\\\\" style=\\\\\"width: 80px; min-width: 80px; max-width: 80px;\\\\\">\n                  <col style=\\\\\"width: 140px; min-width: 140px; max-width: 140px;\\\\\">\n                  <col>\n                  <col>\n                  <col>\n                </colgroup>\n                <thead>\n                  <tr class=\\\\\"arco-table-tr\\\\\">\n                    <th class=\\\\\"arco-table-th arco-table-operation arco-table-col-fixed-left\\\\\" style=\\\\\"left: 0px;\\\\\"><span class=\\\\\"arco-table-cell\\\\\">Expand</span></th>\n                    <th class=\\\\\"arco-table-th arco-table-col-fixed-left arco-table-col-fixed-left-last\\\\\" style=\\\\\"left: 80px;\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Name</span>\n                      <!---->\n                      <!----></span>\n                      <!---->\n                      <!---->\n                    </th>\n                    <th class=\\\\\"arco-table-th\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Salary</span>\n                      <!---->\n                      <!----></span>\n                      <!---->\n                      <!---->\n                    </th>\n                    <th class=\\\\\"arco-table-th\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Data1</span>\n                      <!---->\n                      <!----></span>\n                      <!---->\n                      <!---->\n                    </th>\n                    <th class=\\\\\"arco-table-th\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Data2</span>\n                      <!---->\n                      <!----></span>\n                      <!---->\n                      <!---->\n                    </th>\n                  </tr>\n                </thead>\n              </table>\n            </div>\n            <!--v-if-->\n            <!--v-if-->\n          </div>\n          <div class=\\\\\"arco-scrollbar arco-scrollbar-type-embed\\\\\" style=\\\\\"display: flex; min-height: 0;\\\\\">\n            <div class=\\\\\"arco-scrollbar-container arco-table-body\\\\\" style=\\\\\"max-height: 200px;\\\\\">\n              <table class=\\\\\"arco-table-element\\\\\" style=\\\\\"width: 2000px;\\\\\" cellpadding=\\\\\"0\\\\\" cellspacing=\\\\\"0\\\\\">\n                <colgroup>\n                  <col class=\\\\\"arco-table-expand-col\\\\\" style=\\\\\"width: 80px; min-width: 80px; max-width: 80px;\\\\\">\n                  <col style=\\\\\"width: 140px; min-width: 140px; max-width: 140px;\\\\\">\n                  <col>\n                  <col>\n                  <col>\n                </colgroup>\n                <tbody>\n                  <tr class=\\\\\"arco-table-tr\\\\\">\n                    <td class=\\\\\"arco-table-td arco-table-operation arco-table-expand arco-table-col-fixed-left\\\\\" style=\\\\\"left: 0px;\\\\\"><span class=\\\\\"arco-table-cell\\\\\"><button type=\\\\\"button\\\\\" class=\\\\\"arco-table-expand-btn\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-plus\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M5 24h38M24 5v38\\\\\"></path></svg></button></span></td>\n                    <td class=\\\\\"arco-table-td arco-table-col-fixed-left arco-table-col-fixed-left-last\\\\\" style=\\\\\"left: 80px;\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">Jane Doe</span></span></td>\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">23000</span></span></td>\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">10</span></span></td>\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">8</span></span></td>\n                  </tr>\n                  <!---->\n                  <tr class=\\\\\"arco-table-tr\\\\\">\n                    <td class=\\\\\"arco-table-td arco-table-operation arco-table-expand arco-table-col-fixed-left\\\\\" style=\\\\\"left: 0px;\\\\\"><span class=\\\\\"arco-table-cell\\\\\"><!----></span></td>\n                    <td class=\\\\\"arco-table-td arco-table-col-fixed-left arco-table-col-fixed-left-last\\\\\" style=\\\\\"left: 80px;\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">Alisa Ross</span></span></td>\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">25000</span></span></td>\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">9</span></span></td>\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">-12</span></span></td>\n                  </tr>\n                  <!---->\n                  <tr class=\\\\\"arco-table-tr\\\\\">\n                    <td class=\\\\\"arco-table-td arco-table-operation arco-table-expand arco-table-col-fixed-left\\\\\" style=\\\\\"left: 0px;\\\\\"><span class=\\\\\"arco-table-cell\\\\\"><!----></span></td>\n                    <td class=\\\\\"arco-table-td arco-table-col-fixed-left arco-table-col-fixed-left-last\\\\\" style=\\\\\"left: 80px;\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">Kevin Sandra</span></span></td>\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">22000</span></span></td>\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">15</span></span></td>\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">-2</span></span></td>\n                  </tr>\n                  <!---->\n                  <tr class=\\\\\"arco-table-tr\\\\\">\n                    <td class=\\\\\"arco-table-td arco-table-operation arco-table-expand arco-table-col-fixed-left\\\\\" style=\\\\\"left: 0px;\\\\\"><span class=\\\\\"arco-table-cell\\\\\"><!----></span></td>\n                    <td class=\\\\\"arco-table-td arco-table-col-fixed-left arco-table-col-fixed-left-last\\\\\" style=\\\\\"left: 80px;\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">Ed Hellen</span></span></td>\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">17000</span></span></td>\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">2</span></span></td>\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">3</span></span></td>\n                  </tr>\n                  <!---->\n                  <tr class=\\\\\"arco-table-tr\\\\\">\n                    <td class=\\\\\"arco-table-td arco-table-operation arco-table-expand arco-table-col-fixed-left\\\\\" style=\\\\\"left: 0px;\\\\\"><span class=\\\\\"arco-table-cell\\\\\"><!----></span></td>\n                    <td class=\\\\\"arco-table-td arco-table-col-fixed-left arco-table-col-fixed-left-last\\\\\" style=\\\\\"left: 80px;\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">William Smith</span></span></td>\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">27000</span></span></td>\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">11</span></span></td>\n                    <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">0</span></span></td>\n                  </tr>\n                  <!---->\n                </tbody>\n              </table>\n            </div>\n            <!--v-if-->\n            <!--v-if-->\n          </div>\n          <div class=\\\\\"arco-table-tfoot\\\\\" style=\\\\\"overflow-y: hidden;\\\\\">\n            <table class=\\\\\"arco-table-element\\\\\" style=\\\\\"width: 2000px;\\\\\" cellpadding=\\\\\"0\\\\\" cellspacing=\\\\\"0\\\\\">\n              <colgroup>\n                <col class=\\\\\"arco-table-expand-col\\\\\" style=\\\\\"width: 80px; min-width: 80px; max-width: 80px;\\\\\">\n                <col style=\\\\\"width: 140px; min-width: 140px; max-width: 140px;\\\\\">\n                <col>\n                <col>\n                <col>\n              </colgroup>\n              <tfoot>\n                <tr class=\\\\\"arco-table-tr arco-table-tr-summary\\\\\">\n                  <td class=\\\\\"arco-table-td arco-table-operation arco-table-expand arco-table-col-fixed-left\\\\\" style=\\\\\"left: 0px;\\\\\"><span class=\\\\\"arco-table-cell\\\\\"><!----></span></td>\n                  <td class=\\\\\"arco-table-td arco-table-col-fixed-left arco-table-col-fixed-left-last\\\\\" style=\\\\\"left: 80px;\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\"><div>Avg</div></span></span></td>\n                  <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\"><div>22800</div></span></span></td>\n                  <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\"><div style=\\\\\"color: red;\\\\\">9.4</div></span></span></td>\n                  <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\"><div style=\\\\\"color: green;\\\\\">-0.6</div></span></span></td>\n                </tr>\n                <tr class=\\\\\"arco-table-tr arco-table-tr-summary\\\\\">\n                  <td class=\\\\\"arco-table-td arco-table-operation arco-table-expand arco-table-col-fixed-left\\\\\" style=\\\\\"left: 0px;\\\\\"><span class=\\\\\"arco-table-cell\\\\\"><!----></span></td>\n                  <td class=\\\\\"arco-table-td arco-table-col-fixed-left arco-table-col-fixed-left-last\\\\\" style=\\\\\"left: 80px;\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\"><div>Sum</div></span></span></td>\n                  <td class=\\\\\"arco-table-td\\\\\" style=\\\\\"color: rgb(255, 255, 255);\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\"><div>114000</div></span></span></td>\n                  <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\"><div style=\\\\\"color: red;\\\\\">47</div></span></span></td>\n                  <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\"><div style=\\\\\"color: green;\\\\\">-3</div></span></span></td>\n                </tr>\n              </tfoot>\n            </table>\n          </div>\n        </div>\n        <!--v-if-->\n        <!--v-if-->\n      </div>\n    </div>\n    <!---->\n    <div class=\\\\\"arco-table-pagination arco-table-pagination-right\\\\\">\n      <!---->\n      <div class=\\\\\"arco-pagination arco-pagination-size-medium\\\\\">\n        <!---->\n        <ul class=\\\\\"arco-pagination-list\\\\\"><span class=\\\\\"arco-pagination-item arco-pagination-item-previous arco-pagination-item-disabled\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-left\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M32 8.4 16.444 23.956 32 39.513\\\\\"></path></svg></span>\n          <li class=\\\\\"arco-pagination-item arco-pagination-item-active\\\\\" pages=\\\\\"1\\\\\">1</li>\n          <!----><span class=\\\\\"arco-pagination-item arco-pagination-item-next arco-pagination-item-disabled\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-right\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"m16 39.513 15.556-15.557L16 8.4\\\\\"></path></svg></span>\n        </ul>\n        <!---->\n        <!---->\n      </div>\n      <!---->\n    </div>\n    <!---->\n  </div>\n</div>\"\n`;\n\nexports[`<table> demo: render [virtual-list] correctly 1`] = `\n\"<div class=\\\\\"arco-table arco-table-size-large arco-table-border arco-table-hover arco-table-type-selection arco-table-layout-fixed\\\\\">\n  <!---->\n  <div class=\\\\\"arco-spin\\\\\">\n    <!---->\n    <div class=\\\\\"arco-table-container arco-table-has-fixed-col-left arco-table-scroll-position-both arco-table-scroll-y\\\\\">\n      <div class=\\\\\"arco-scrollbar arco-scrollbar-type-embed\\\\\" style=\\\\\"height: 100%;\\\\\">\n        <div class=\\\\\"arco-scrollbar-container arco-table-content\\\\\">\n          <div class=\\\\\"arco-scrollbar arco-scrollbar-type-embed\\\\\">\n            <div class=\\\\\"arco-scrollbar-container arco-table-header\\\\\">\n              <table class=\\\\\"arco-table-element\\\\\" style=\\\\\"width: 1000px;\\\\\" cellpadding=\\\\\"0\\\\\" cellspacing=\\\\\"0\\\\\">\n                <colgroup>\n                  <col class=\\\\\"arco-table-selection-checkbox-col\\\\\">\n                  <col style=\\\\\"width: 140px; min-width: 140px; max-width: 140px;\\\\\">\n                  <col>\n                  <col>\n                </colgroup>\n                <thead>\n                  <tr class=\\\\\"arco-table-tr\\\\\">\n                    <th class=\\\\\"arco-table-th arco-table-operation arco-table-checkbox arco-table-col-fixed-left\\\\\" style=\\\\\"left: 0px;\\\\\"><span class=\\\\\"arco-table-cell\\\\\"><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n                      <!----></label></span>\n                    </th>\n                    <th class=\\\\\"arco-table-th arco-table-col-fixed-left arco-table-col-fixed-left-last\\\\\" style=\\\\\"left: 40px;\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Name</span>\n                      <!---->\n                      <!----></span>\n                      <!---->\n                      <!---->\n                    </th>\n                    <th class=\\\\\"arco-table-th\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Address</span>\n                      <!---->\n                      <!----></span>\n                      <!---->\n                      <!---->\n                    </th>\n                    <th class=\\\\\"arco-table-th\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><span class=\\\\\"arco-table-th-title\\\\\">Email</span>\n                      <!---->\n                      <!----></span>\n                      <!---->\n                      <!---->\n                    </th>\n                  </tr>\n                </thead>\n              </table>\n            </div>\n            <!--v-if-->\n            <!--v-if-->\n          </div>\n          <div class=\\\\\"arco-virtual-list arco-table-body\\\\\" style=\\\\\"height: 400px; overflow: auto;\\\\\">\n            <table class=\\\\\"arco-table-element\\\\\" style=\\\\\"width: 1000px; padding-top: 0px; padding-bottom: 29100px;\\\\\">\n              <tbody>\n                <tr class=\\\\\"arco-table-tr\\\\\">\n                  <td class=\\\\\"arco-table-td arco-table-operation arco-table-checkbox arco-table-col-fixed-left\\\\\" style=\\\\\"left: 0px;\\\\\"><span class=\\\\\"arco-table-cell\\\\\"><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n                    <!----></label></span>\n                  </td>\n                  <td class=\\\\\"arco-table-td arco-table-col-fixed-left arco-table-col-fixed-left-last\\\\\" style=\\\\\"left: 40px;\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">User 1</span></span></td>\n                  <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">32 Park Road, London</span></span></td>\n                  <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">user.1@example.com</span></span></td>\n                </tr>\n                <tr class=\\\\\"arco-table-tr\\\\\">\n                  <td class=\\\\\"arco-table-td arco-table-operation arco-table-checkbox arco-table-col-fixed-left\\\\\" style=\\\\\"left: 0px;\\\\\"><span class=\\\\\"arco-table-cell\\\\\"><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n                    <!----></label></span>\n                  </td>\n                  <td class=\\\\\"arco-table-td arco-table-col-fixed-left arco-table-col-fixed-left-last\\\\\" style=\\\\\"left: 40px;\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">User 2</span></span></td>\n                  <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">32 Park Road, London</span></span></td>\n                  <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">user.2@example.com</span></span></td>\n                </tr>\n                <tr class=\\\\\"arco-table-tr\\\\\">\n                  <td class=\\\\\"arco-table-td arco-table-operation arco-table-checkbox arco-table-col-fixed-left\\\\\" style=\\\\\"left: 0px;\\\\\"><span class=\\\\\"arco-table-cell\\\\\"><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n                    <!----></label></span>\n                  </td>\n                  <td class=\\\\\"arco-table-td arco-table-col-fixed-left arco-table-col-fixed-left-last\\\\\" style=\\\\\"left: 40px;\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">User 3</span></span></td>\n                  <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">32 Park Road, London</span></span></td>\n                  <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">user.3@example.com</span></span></td>\n                </tr>\n                <tr class=\\\\\"arco-table-tr\\\\\">\n                  <td class=\\\\\"arco-table-td arco-table-operation arco-table-checkbox arco-table-col-fixed-left\\\\\" style=\\\\\"left: 0px;\\\\\"><span class=\\\\\"arco-table-cell\\\\\"><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n                    <!----></label></span>\n                  </td>\n                  <td class=\\\\\"arco-table-td arco-table-col-fixed-left arco-table-col-fixed-left-last\\\\\" style=\\\\\"left: 40px;\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">User 4</span></span></td>\n                  <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">32 Park Road, London</span></span></td>\n                  <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">user.4@example.com</span></span></td>\n                </tr>\n                <tr class=\\\\\"arco-table-tr\\\\\">\n                  <td class=\\\\\"arco-table-td arco-table-operation arco-table-checkbox arco-table-col-fixed-left\\\\\" style=\\\\\"left: 0px;\\\\\"><span class=\\\\\"arco-table-cell\\\\\"><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n                    <!----></label></span>\n                  </td>\n                  <td class=\\\\\"arco-table-td arco-table-col-fixed-left arco-table-col-fixed-left-last\\\\\" style=\\\\\"left: 40px;\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">User 5</span></span></td>\n                  <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">32 Park Road, London</span></span></td>\n                  <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">user.5@example.com</span></span></td>\n                </tr>\n                <tr class=\\\\\"arco-table-tr\\\\\">\n                  <td class=\\\\\"arco-table-td arco-table-operation arco-table-checkbox arco-table-col-fixed-left\\\\\" style=\\\\\"left: 0px;\\\\\"><span class=\\\\\"arco-table-cell\\\\\"><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n                    <!----></label></span>\n                  </td>\n                  <td class=\\\\\"arco-table-td arco-table-col-fixed-left arco-table-col-fixed-left-last\\\\\" style=\\\\\"left: 40px;\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">User 6</span></span></td>\n                  <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">32 Park Road, London</span></span></td>\n                  <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">user.6@example.com</span></span></td>\n                </tr>\n                <tr class=\\\\\"arco-table-tr\\\\\">\n                  <td class=\\\\\"arco-table-td arco-table-operation arco-table-checkbox arco-table-col-fixed-left\\\\\" style=\\\\\"left: 0px;\\\\\"><span class=\\\\\"arco-table-cell\\\\\"><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n                    <!----></label></span>\n                  </td>\n                  <td class=\\\\\"arco-table-td arco-table-col-fixed-left arco-table-col-fixed-left-last\\\\\" style=\\\\\"left: 40px;\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">User 7</span></span></td>\n                  <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">32 Park Road, London</span></span></td>\n                  <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">user.7@example.com</span></span></td>\n                </tr>\n                <tr class=\\\\\"arco-table-tr\\\\\">\n                  <td class=\\\\\"arco-table-td arco-table-operation arco-table-checkbox arco-table-col-fixed-left\\\\\" style=\\\\\"left: 0px;\\\\\"><span class=\\\\\"arco-table-cell\\\\\"><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n                    <!----></label></span>\n                  </td>\n                  <td class=\\\\\"arco-table-td arco-table-col-fixed-left arco-table-col-fixed-left-last\\\\\" style=\\\\\"left: 40px;\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">User 8</span></span></td>\n                  <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">32 Park Road, London</span></span></td>\n                  <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">user.8@example.com</span></span></td>\n                </tr>\n                <tr class=\\\\\"arco-table-tr\\\\\">\n                  <td class=\\\\\"arco-table-td arco-table-operation arco-table-checkbox arco-table-col-fixed-left\\\\\" style=\\\\\"left: 0px;\\\\\"><span class=\\\\\"arco-table-cell\\\\\"><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n                    <!----></label></span>\n                  </td>\n                  <td class=\\\\\"arco-table-td arco-table-col-fixed-left arco-table-col-fixed-left-last\\\\\" style=\\\\\"left: 40px;\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">User 9</span></span></td>\n                  <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">32 Park Road, London</span></span></td>\n                  <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">user.9@example.com</span></span></td>\n                </tr>\n                <tr class=\\\\\"arco-table-tr\\\\\">\n                  <td class=\\\\\"arco-table-td arco-table-operation arco-table-checkbox arco-table-col-fixed-left\\\\\" style=\\\\\"left: 0px;\\\\\"><span class=\\\\\"arco-table-cell\\\\\"><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n                    <!----></label></span>\n                  </td>\n                  <td class=\\\\\"arco-table-td arco-table-col-fixed-left arco-table-col-fixed-left-last\\\\\" style=\\\\\"left: 40px;\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">User 10</span></span></td>\n                  <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">32 Park Road, London</span></span></td>\n                  <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">user.10@example.com</span></span></td>\n                </tr>\n                <tr class=\\\\\"arco-table-tr\\\\\">\n                  <td class=\\\\\"arco-table-td arco-table-operation arco-table-checkbox arco-table-col-fixed-left\\\\\" style=\\\\\"left: 0px;\\\\\"><span class=\\\\\"arco-table-cell\\\\\"><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n                    <!----></label></span>\n                  </td>\n                  <td class=\\\\\"arco-table-td arco-table-col-fixed-left arco-table-col-fixed-left-last\\\\\" style=\\\\\"left: 40px;\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">User 11</span></span></td>\n                  <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">32 Park Road, London</span></span></td>\n                  <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">user.11@example.com</span></span></td>\n                </tr>\n                <tr class=\\\\\"arco-table-tr\\\\\">\n                  <td class=\\\\\"arco-table-td arco-table-operation arco-table-checkbox arco-table-col-fixed-left\\\\\" style=\\\\\"left: 0px;\\\\\"><span class=\\\\\"arco-table-cell\\\\\"><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n                    <!----></label></span>\n                  </td>\n                  <td class=\\\\\"arco-table-td arco-table-col-fixed-left arco-table-col-fixed-left-last\\\\\" style=\\\\\"left: 40px;\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">User 12</span></span></td>\n                  <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">32 Park Road, London</span></span></td>\n                  <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">user.12@example.com</span></span></td>\n                </tr>\n                <tr class=\\\\\"arco-table-tr\\\\\">\n                  <td class=\\\\\"arco-table-td arco-table-operation arco-table-checkbox arco-table-col-fixed-left\\\\\" style=\\\\\"left: 0px;\\\\\"><span class=\\\\\"arco-table-cell\\\\\"><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n                    <!----></label></span>\n                  </td>\n                  <td class=\\\\\"arco-table-td arco-table-col-fixed-left arco-table-col-fixed-left-last\\\\\" style=\\\\\"left: 40px;\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">User 13</span></span></td>\n                  <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">32 Park Road, London</span></span></td>\n                  <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">user.13@example.com</span></span></td>\n                </tr>\n                <tr class=\\\\\"arco-table-tr\\\\\">\n                  <td class=\\\\\"arco-table-td arco-table-operation arco-table-checkbox arco-table-col-fixed-left\\\\\" style=\\\\\"left: 0px;\\\\\"><span class=\\\\\"arco-table-cell\\\\\"><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n                    <!----></label></span>\n                  </td>\n                  <td class=\\\\\"arco-table-td arco-table-col-fixed-left arco-table-col-fixed-left-last\\\\\" style=\\\\\"left: 40px;\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">User 14</span></span></td>\n                  <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">32 Park Road, London</span></span></td>\n                  <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">user.14@example.com</span></span></td>\n                </tr>\n                <tr class=\\\\\"arco-table-tr\\\\\">\n                  <td class=\\\\\"arco-table-td arco-table-operation arco-table-checkbox arco-table-col-fixed-left\\\\\" style=\\\\\"left: 0px;\\\\\"><span class=\\\\\"arco-table-cell\\\\\"><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n                    <!----></label></span>\n                  </td>\n                  <td class=\\\\\"arco-table-td arco-table-col-fixed-left arco-table-col-fixed-left-last\\\\\" style=\\\\\"left: 40px;\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">User 15</span></span></td>\n                  <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">32 Park Road, London</span></span></td>\n                  <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">user.15@example.com</span></span></td>\n                </tr>\n                <tr class=\\\\\"arco-table-tr\\\\\">\n                  <td class=\\\\\"arco-table-td arco-table-operation arco-table-checkbox arco-table-col-fixed-left\\\\\" style=\\\\\"left: 0px;\\\\\"><span class=\\\\\"arco-table-cell\\\\\"><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n                    <!----></label></span>\n                  </td>\n                  <td class=\\\\\"arco-table-td arco-table-col-fixed-left arco-table-col-fixed-left-last\\\\\" style=\\\\\"left: 40px;\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">User 16</span></span></td>\n                  <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">32 Park Road, London</span></span></td>\n                  <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">user.16@example.com</span></span></td>\n                </tr>\n                <tr class=\\\\\"arco-table-tr\\\\\">\n                  <td class=\\\\\"arco-table-td arco-table-operation arco-table-checkbox arco-table-col-fixed-left\\\\\" style=\\\\\"left: 0px;\\\\\"><span class=\\\\\"arco-table-cell\\\\\"><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n                    <!----></label></span>\n                  </td>\n                  <td class=\\\\\"arco-table-td arco-table-col-fixed-left arco-table-col-fixed-left-last\\\\\" style=\\\\\"left: 40px;\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">User 17</span></span></td>\n                  <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">32 Park Road, London</span></span></td>\n                  <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">user.17@example.com</span></span></td>\n                </tr>\n                <tr class=\\\\\"arco-table-tr\\\\\">\n                  <td class=\\\\\"arco-table-td arco-table-operation arco-table-checkbox arco-table-col-fixed-left\\\\\" style=\\\\\"left: 0px;\\\\\"><span class=\\\\\"arco-table-cell\\\\\"><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n                    <!----></label></span>\n                  </td>\n                  <td class=\\\\\"arco-table-td arco-table-col-fixed-left arco-table-col-fixed-left-last\\\\\" style=\\\\\"left: 40px;\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">User 18</span></span></td>\n                  <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">32 Park Road, London</span></span></td>\n                  <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">user.18@example.com</span></span></td>\n                </tr>\n                <tr class=\\\\\"arco-table-tr\\\\\">\n                  <td class=\\\\\"arco-table-td arco-table-operation arco-table-checkbox arco-table-col-fixed-left\\\\\" style=\\\\\"left: 0px;\\\\\"><span class=\\\\\"arco-table-cell\\\\\"><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n                    <!----></label></span>\n                  </td>\n                  <td class=\\\\\"arco-table-td arco-table-col-fixed-left arco-table-col-fixed-left-last\\\\\" style=\\\\\"left: 40px;\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">User 19</span></span></td>\n                  <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">32 Park Road, London</span></span></td>\n                  <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">user.19@example.com</span></span></td>\n                </tr>\n                <tr class=\\\\\"arco-table-tr\\\\\">\n                  <td class=\\\\\"arco-table-td arco-table-operation arco-table-checkbox arco-table-col-fixed-left\\\\\" style=\\\\\"left: 0px;\\\\\"><span class=\\\\\"arco-table-cell\\\\\"><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n                    <!----></label></span>\n                  </td>\n                  <td class=\\\\\"arco-table-td arco-table-col-fixed-left arco-table-col-fixed-left-last\\\\\" style=\\\\\"left: 40px;\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">User 20</span></span></td>\n                  <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">32 Park Road, London</span></span></td>\n                  <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">user.20@example.com</span></span></td>\n                </tr>\n                <tr class=\\\\\"arco-table-tr\\\\\">\n                  <td class=\\\\\"arco-table-td arco-table-operation arco-table-checkbox arco-table-col-fixed-left\\\\\" style=\\\\\"left: 0px;\\\\\"><span class=\\\\\"arco-table-cell\\\\\"><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n                    <!----></label></span>\n                  </td>\n                  <td class=\\\\\"arco-table-td arco-table-col-fixed-left arco-table-col-fixed-left-last\\\\\" style=\\\\\"left: 40px;\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">User 21</span></span></td>\n                  <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">32 Park Road, London</span></span></td>\n                  <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">user.21@example.com</span></span></td>\n                </tr>\n                <tr class=\\\\\"arco-table-tr\\\\\">\n                  <td class=\\\\\"arco-table-td arco-table-operation arco-table-checkbox arco-table-col-fixed-left\\\\\" style=\\\\\"left: 0px;\\\\\"><span class=\\\\\"arco-table-cell\\\\\"><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n                    <!----></label></span>\n                  </td>\n                  <td class=\\\\\"arco-table-td arco-table-col-fixed-left arco-table-col-fixed-left-last\\\\\" style=\\\\\"left: 40px;\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">User 22</span></span></td>\n                  <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">32 Park Road, London</span></span></td>\n                  <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">user.22@example.com</span></span></td>\n                </tr>\n                <tr class=\\\\\"arco-table-tr\\\\\">\n                  <td class=\\\\\"arco-table-td arco-table-operation arco-table-checkbox arco-table-col-fixed-left\\\\\" style=\\\\\"left: 0px;\\\\\"><span class=\\\\\"arco-table-cell\\\\\"><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n                    <!----></label></span>\n                  </td>\n                  <td class=\\\\\"arco-table-td arco-table-col-fixed-left arco-table-col-fixed-left-last\\\\\" style=\\\\\"left: 40px;\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">User 23</span></span></td>\n                  <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">32 Park Road, London</span></span></td>\n                  <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">user.23@example.com</span></span></td>\n                </tr>\n                <tr class=\\\\\"arco-table-tr\\\\\">\n                  <td class=\\\\\"arco-table-td arco-table-operation arco-table-checkbox arco-table-col-fixed-left\\\\\" style=\\\\\"left: 0px;\\\\\"><span class=\\\\\"arco-table-cell\\\\\"><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n                    <!----></label></span>\n                  </td>\n                  <td class=\\\\\"arco-table-td arco-table-col-fixed-left arco-table-col-fixed-left-last\\\\\" style=\\\\\"left: 40px;\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">User 24</span></span></td>\n                  <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">32 Park Road, London</span></span></td>\n                  <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">user.24@example.com</span></span></td>\n                </tr>\n                <tr class=\\\\\"arco-table-tr\\\\\">\n                  <td class=\\\\\"arco-table-td arco-table-operation arco-table-checkbox arco-table-col-fixed-left\\\\\" style=\\\\\"left: 0px;\\\\\"><span class=\\\\\"arco-table-cell\\\\\"><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n                    <!----></label></span>\n                  </td>\n                  <td class=\\\\\"arco-table-td arco-table-col-fixed-left arco-table-col-fixed-left-last\\\\\" style=\\\\\"left: 40px;\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">User 25</span></span></td>\n                  <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">32 Park Road, London</span></span></td>\n                  <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">user.25@example.com</span></span></td>\n                </tr>\n                <tr class=\\\\\"arco-table-tr\\\\\">\n                  <td class=\\\\\"arco-table-td arco-table-operation arco-table-checkbox arco-table-col-fixed-left\\\\\" style=\\\\\"left: 0px;\\\\\"><span class=\\\\\"arco-table-cell\\\\\"><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n                    <!----></label></span>\n                  </td>\n                  <td class=\\\\\"arco-table-td arco-table-col-fixed-left arco-table-col-fixed-left-last\\\\\" style=\\\\\"left: 40px;\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">User 26</span></span></td>\n                  <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">32 Park Road, London</span></span></td>\n                  <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">user.26@example.com</span></span></td>\n                </tr>\n                <tr class=\\\\\"arco-table-tr\\\\\">\n                  <td class=\\\\\"arco-table-td arco-table-operation arco-table-checkbox arco-table-col-fixed-left\\\\\" style=\\\\\"left: 0px;\\\\\"><span class=\\\\\"arco-table-cell\\\\\"><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n                    <!----></label></span>\n                  </td>\n                  <td class=\\\\\"arco-table-td arco-table-col-fixed-left arco-table-col-fixed-left-last\\\\\" style=\\\\\"left: 40px;\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">User 27</span></span></td>\n                  <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">32 Park Road, London</span></span></td>\n                  <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">user.27@example.com</span></span></td>\n                </tr>\n                <tr class=\\\\\"arco-table-tr\\\\\">\n                  <td class=\\\\\"arco-table-td arco-table-operation arco-table-checkbox arco-table-col-fixed-left\\\\\" style=\\\\\"left: 0px;\\\\\"><span class=\\\\\"arco-table-cell\\\\\"><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n                    <!----></label></span>\n                  </td>\n                  <td class=\\\\\"arco-table-td arco-table-col-fixed-left arco-table-col-fixed-left-last\\\\\" style=\\\\\"left: 40px;\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">User 28</span></span></td>\n                  <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">32 Park Road, London</span></span></td>\n                  <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">user.28@example.com</span></span></td>\n                </tr>\n                <tr class=\\\\\"arco-table-tr\\\\\">\n                  <td class=\\\\\"arco-table-td arco-table-operation arco-table-checkbox arco-table-col-fixed-left\\\\\" style=\\\\\"left: 0px;\\\\\"><span class=\\\\\"arco-table-cell\\\\\"><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n                    <!----></label></span>\n                  </td>\n                  <td class=\\\\\"arco-table-td arco-table-col-fixed-left arco-table-col-fixed-left-last\\\\\" style=\\\\\"left: 40px;\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">User 29</span></span></td>\n                  <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">32 Park Road, London</span></span></td>\n                  <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">user.29@example.com</span></span></td>\n                </tr>\n                <tr class=\\\\\"arco-table-tr\\\\\">\n                  <td class=\\\\\"arco-table-td arco-table-operation arco-table-checkbox arco-table-col-fixed-left\\\\\" style=\\\\\"left: 0px;\\\\\"><span class=\\\\\"arco-table-cell\\\\\"><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n                    <!----></label></span>\n                  </td>\n                  <td class=\\\\\"arco-table-td arco-table-col-fixed-left arco-table-col-fixed-left-last\\\\\" style=\\\\\"left: 40px;\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">User 30</span></span></td>\n                  <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">32 Park Road, London</span></span></td>\n                  <td class=\\\\\"arco-table-td\\\\\"><span class=\\\\\"arco-table-cell arco-table-cell-align-left\\\\\"><!----><!----><span class=\\\\\"arco-table-td-content\\\\\">user.30@example.com</span></span></td>\n                </tr>\n              </tbody>\n            </table>\n          </div>\n          <!---->\n        </div>\n        <!--v-if-->\n        <!--v-if-->\n      </div>\n    </div>\n    <!---->\n    <!---->\n    <!---->\n  </div>\n</div>\"\n`;\n"
  },
  {
    "path": "packages/web-vue/components/table/__test__/demo.test.ts",
    "content": "import demoTest from '../../../scripts/demo-test';\n\ndemoTest('table');\n"
  },
  {
    "path": "packages/web-vue/components/table/__test__/index.test.ts",
    "content": "import { mount } from '@vue/test-utils';\nimport { nextTick, reactive, ref } from 'vue';\nimport Table from '../table';\nimport { TableChangeExtra, TableColumnData, TableData } from '../interface';\n\nconst demoData = [\n  {\n    key: '1',\n    name: 'Jane Doe1',\n    age: 1,\n  },\n  {\n    key: '2',\n    name: 'Jane Doe2',\n    age: 2,\n  },\n  {\n    key: '3',\n    name: 'Jane Doe3',\n    age: 3,\n  },\n  {\n    key: '4',\n    name: 'Jane Doe4',\n    age: 4,\n  },\n  {\n    key: '5',\n    age: 5,\n    name: 'Jane Doe5',\n  },\n];\nconst demoColumns: TableColumnData[] = [\n  {\n    title: 'Name',\n    dataIndex: 'name',\n  },\n  {\n    title: 'Age',\n    dataIndex: 'age',\n  },\n];\nconst JSONCopy = (val: unknown) => JSON.parse(JSON.stringify(val));\ndescribe('Table', () => {\n  test('Correct rendering after deleting data on the last page', async () => {\n    const data = reactive(JSONCopy(demoData));\n    const columns = JSONCopy(demoColumns);\n    const current = ref(5);\n    const handleChange = (data: number) => {\n      current.value = data;\n    };\n    const pagination = reactive({\n      current,\n      onChange: handleChange,\n      pageSize: 1,\n    });\n    const wrapper = mount(Table as any, {\n      props: {\n        columns,\n        data,\n        pagination,\n      },\n    });\n    await nextTick();\n    let content = wrapper.find('.arco-table-td-content').element.innerHTML;\n    expect(content).toBe('Jane Doe5');\n    data.pop();\n    await nextTick();\n    content = wrapper.find('.arco-table-td-content').element.innerHTML;\n    expect(content).toBe('Jane Doe4');\n  });\n\n  test('table sort', async () => {\n    const data = reactive(JSONCopy(demoData));\n    const columns = JSONCopy(demoColumns);\n    columns[1].sortable = {\n      sortDirections: ['ascend', 'descend'],\n    };\n    let testSortRes = {\n      data: [] as TableData[],\n      extra: {} as TableChangeExtra,\n      currentDataSource: [] as TableData[],\n    };\n    const handleChange = (\n      data: TableData[],\n      extra: TableChangeExtra,\n      currentDataSource: TableData[]\n    ) => {\n      testSortRes = { data, extra, currentDataSource };\n    };\n    const wrapper = mount(Table as any, {\n      props: {\n        columns,\n        data,\n        onChange: handleChange,\n        pagination: {\n          pageSize: 2,\n        },\n      },\n    });\n    await nextTick();\n    wrapper.find('.arco-table-cell-with-sorter').trigger('click');\n    expect(testSortRes.data[0].key).toBe('1');\n    expect(testSortRes.extra.sorter?.direction).toBe('ascend');\n    expect(testSortRes.currentDataSource).toBeTruthy();\n    expect(testSortRes.currentDataSource.length).toBe(5);\n    expect(testSortRes.currentDataSource[0].key).toBe('1');\n    expect(testSortRes.currentDataSource[4].key).toBe('5');\n    await nextTick();\n    wrapper.find('.arco-table-cell-with-sorter').trigger('click');\n    expect(testSortRes.data[0].key).toBe('5');\n    expect(testSortRes.extra.sorter?.direction).toBe('descend');\n    expect(testSortRes.currentDataSource).toBeTruthy();\n    expect(testSortRes.currentDataSource.length).toBe(5);\n    expect(testSortRes.currentDataSource[0].key).toBe('5');\n    expect(testSortRes.currentDataSource[4].key).toBe('1');\n  });\n});\n"
  },
  {
    "path": "packages/web-vue/components/table/context.ts",
    "content": "import type { InjectionKey, Slots } from 'vue';\nimport { BaseType } from '../_utils/types';\nimport {\n  Filters,\n  Sorter,\n  TableColumnData,\n  TableData,\n  TableDataWithRaw,\n} from './interface';\n\nexport interface TableContext {\n  loadMore?: (\n    record: TableData,\n    done: (children?: TableData[]) => void\n  ) => void;\n  addLazyLoadData: (\n    children: TableData[] | undefined,\n    record: TableDataWithRaw\n  ) => void;\n  slots: Slots;\n  sorter: Sorter | undefined;\n  currentAllEnabledRowKeys: BaseType[];\n  currentSelectedRowKeys: BaseType[];\n  checkStrictly: boolean;\n  filters: Filters;\n  filterIconAlignLeft: boolean;\n  resizingColumn: string;\n  addColumn: (id: number, column: TableColumnData) => void;\n  removeColumn: (id: number) => void;\n  onSelectAll: (checked: boolean) => void;\n  onSelect: (checked: boolean, record: TableDataWithRaw) => void;\n  onSelectAllLeafs: (record: TableDataWithRaw, checked: boolean) => void;\n\n  onSorterChange: (\n    dataIndex: string,\n    direction: 'ascend' | 'descend' | '',\n    ev: Event\n  ) => void;\n  onFilterChange: (\n    dataIndex: string,\n    filteredValues: string[],\n    ev: Event\n  ) => void;\n  onThMouseDown: (dataIndex: string, ev: MouseEvent) => void;\n}\n\nexport interface TableColumnContext {\n  addChild: (id: number, column: TableColumnData) => void;\n  removeChild: (id: number) => void;\n}\n\nexport const tableInjectionKey: InjectionKey<TableContext> =\n  Symbol('ArcoTable');\n\nexport const tableColumnInjectionKey: InjectionKey<TableColumnContext> =\n  Symbol('ArcoTableColumn');\n"
  },
  {
    "path": "packages/web-vue/components/table/hooks/use-column-filter.ts",
    "content": "import type { Ref } from 'vue';\nimport { computed, ref, watch } from 'vue';\nimport { isArray } from '../../_utils/is';\nimport type { TableColumnData } from '../interface';\nimport type { TableContext } from '../context';\n\nexport const useColumnFilter = ({\n  column,\n  tableCtx,\n}: {\n  column: Ref<TableColumnData>;\n  tableCtx: Partial<TableContext>;\n}) => {\n  const filterValue = computed(() => {\n    if (column.value.dataIndex && tableCtx.filters?.[column.value.dataIndex]) {\n      return tableCtx.filters[column.value.dataIndex];\n    }\n    return [];\n  });\n\n  const filterPopupVisible = ref(false);\n  const isFilterActive = computed(() => filterValue.value.length > 0);\n  const isMultipleFilter = computed(() =>\n    Boolean(column.value.filterable?.multiple)\n  );\n  const columnFilterValue = ref<string[]>(filterValue.value);\n\n  watch(filterValue, (value) => {\n    if (isArray(value) && String(value) !== String(columnFilterValue.value)) {\n      columnFilterValue.value = value;\n    }\n  });\n\n  const handleFilterPopupVisibleChange = (value: boolean) => {\n    filterPopupVisible.value = value;\n  };\n\n  const setFilterValue = (filterValue: string[]) => {\n    columnFilterValue.value = filterValue;\n  };\n\n  const handleCheckboxFilterChange = (values: string[]) => {\n    setFilterValue(values);\n  };\n\n  const handleRadioFilterChange = (value: string) => {\n    setFilterValue([value]);\n  };\n\n  const handleFilterConfirm = (ev: Event) => {\n    if (column.value.dataIndex) {\n      tableCtx.onFilterChange?.(\n        column.value.dataIndex,\n        columnFilterValue.value,\n        ev\n      );\n    }\n    handleFilterPopupVisibleChange(false);\n  };\n\n  const handleFilterReset = (ev: Event) => {\n    setFilterValue([]);\n    if (column.value.dataIndex) {\n      tableCtx.onFilterChange?.(\n        column.value.dataIndex,\n        columnFilterValue.value,\n        ev\n      );\n    }\n    handleFilterPopupVisibleChange(false);\n  };\n\n  return {\n    filterPopupVisible,\n    isFilterActive,\n    isMultipleFilter,\n    columnFilterValue,\n    handleFilterPopupVisibleChange,\n    setFilterValue,\n    handleCheckboxFilterChange,\n    handleRadioFilterChange,\n    handleFilterConfirm,\n    handleFilterReset,\n  };\n};\n"
  },
  {
    "path": "packages/web-vue/components/table/hooks/use-column-resize.ts",
    "content": "import { reactive, ref, Ref } from 'vue';\nimport { off, on } from '../../_utils/dom';\nimport { EmitFn2 } from '../../_utils/types';\n\nexport const useColumnResize = (\n  thRefs: Ref<Record<string, HTMLElement>>,\n  emit: EmitFn2<{ columnResize: (dataIndex: string, width: number) => true }>\n) => {\n  const resizingColumn = ref('');\n  const columnWidth = reactive<Record<string, number>>({});\n\n  const handleThMouseDown = (dataIndex: string, ev: MouseEvent) => {\n    ev.preventDefault();\n\n    resizingColumn.value = dataIndex;\n    on(window, 'mousemove', handleThMouseMoving);\n    on(window, 'mouseup', handleThMouseUp);\n    on(window, 'contextmenu', handleThMouseUp);\n  };\n\n  const handleThMouseUp = () => {\n    resizingColumn.value = '';\n    off(window, 'mousemove', handleThMouseMoving);\n    off(window, 'mouseup', handleThMouseUp);\n    off(window, 'contextmenu', handleThMouseUp);\n  };\n\n  const handleThMouseMoving = (ev: MouseEvent) => {\n    const element = thRefs.value[resizingColumn.value];\n    if (element) {\n      const { clientX } = ev;\n      const { x } = element.getBoundingClientRect();\n      let width = Math.ceil(clientX - x);\n      if (width < 40) {\n        width = 40;\n      }\n      columnWidth[resizingColumn.value] = width;\n      emit('columnResize', resizingColumn.value, width);\n    }\n  };\n\n  return {\n    resizingColumn,\n    columnWidth,\n    handleThMouseDown,\n    handleThMouseUp,\n  };\n};\n"
  },
  {
    "path": "packages/web-vue/components/table/hooks/use-column-sorter.ts",
    "content": "import type { Ref } from 'vue';\nimport { computed } from 'vue';\nimport type { TableColumnData } from '../interface';\nimport type { TableContext } from '../context';\n\nexport const useColumnSorter = ({\n  column,\n  tableCtx,\n}: {\n  column: Ref<TableColumnData>;\n  tableCtx: Partial<TableContext>;\n}) => {\n  const sortOrder = computed(() => {\n    if (\n      column.value.dataIndex &&\n      column.value.dataIndex === tableCtx.sorter?.field\n    ) {\n      return tableCtx.sorter.direction;\n    }\n    return undefined;\n  });\n\n  const sortDirections = computed(\n    () => column.value?.sortable?.sortDirections ?? []\n  );\n\n  const hasSorter = computed(() => sortDirections.value.length > 0);\n\n  const hasAscendBtn = computed(() => sortDirections.value.includes('ascend'));\n  const hasDescendBtn = computed(() =>\n    sortDirections.value.includes('descend')\n  );\n\n  const nextSortOrder = computed(() => {\n    if (!sortOrder.value) {\n      return sortDirections.value[0] ?? '';\n    }\n    if (sortOrder.value === sortDirections.value[0]) {\n      return sortDirections.value[1] ?? '';\n    }\n    return '';\n  });\n\n  const handleClickSorter = (ev: Event) => {\n    if (column.value.dataIndex) {\n      tableCtx.onSorterChange?.(\n        column.value.dataIndex,\n        nextSortOrder.value,\n        ev\n      );\n    }\n  };\n\n  return {\n    sortOrder,\n    hasSorter,\n    hasAscendBtn,\n    hasDescendBtn,\n    nextSortOrder,\n    handleClickSorter,\n  };\n};\n"
  },
  {
    "path": "packages/web-vue/components/table/hooks/use-drag.ts",
    "content": "import { computed, reactive, Ref } from 'vue';\nimport { TableDraggable } from '../interface';\n\nexport const useDrag = (draggable: Ref<TableDraggable | undefined>) => {\n  const dragType = computed(() => {\n    if (draggable.value) {\n      if (draggable.value.type === 'handle') {\n        return 'handle';\n      }\n      return 'row';\n    }\n    return undefined;\n  });\n\n  const dragState = reactive({\n    dragging: false,\n    sourceKey: '',\n    sourcePath: [] as number[],\n    targetPath: [] as number[],\n    data: {} as Record<string, unknown>,\n  });\n\n  const clearDragState = () => {\n    dragState.dragging = false;\n    dragState.sourceKey = '';\n    dragState.sourcePath = [];\n    dragState.targetPath = [];\n    dragState.data = {};\n  };\n\n  const handleDragStart = (\n    ev: DragEvent,\n    sourceKey: string,\n    sourcePath: number[],\n    data: Record<string, unknown>\n  ) => {\n    if (ev.dataTransfer) {\n      ev.dataTransfer.effectAllowed = 'move';\n      if (ev.target && (ev.target as HTMLElement).tagName === 'TD') {\n        const { parentElement } = ev.target as HTMLElement;\n        if (parentElement && parentElement.tagName === 'TR') {\n          ev.dataTransfer.setDragImage(parentElement, 0, 0);\n        }\n      }\n    }\n    dragState.dragging = true;\n    dragState.sourceKey = sourceKey;\n    dragState.sourcePath = sourcePath;\n    dragState.targetPath = [...sourcePath];\n    dragState.data = data;\n  };\n\n  const handleDragEnter = (ev: DragEvent, targetPath: number[]) => {\n    if (ev.dataTransfer) {\n      ev.dataTransfer.dropEffect = 'move';\n    }\n    // prevent unnecessary data update, which will cause the table to re-render\n    if (dragState.targetPath.toString() !== targetPath.toString()) {\n      // drag row to another row\n      dragState.targetPath = targetPath;\n    }\n    ev.preventDefault();\n  };\n\n  const handleDragLeave = (ev: DragEvent) => {};\n\n  const handleDragover = (ev: DragEvent) => {\n    if (ev.dataTransfer) {\n      ev.dataTransfer.dropEffect = 'move';\n    }\n    ev.preventDefault();\n  };\n\n  const handleDragEnd = (ev: DragEvent) => {\n    if (ev.dataTransfer?.dropEffect === 'none') {\n      clearDragState();\n    }\n  };\n\n  const handleDrop = (ev: DragEvent) => {\n    clearDragState();\n    ev.preventDefault();\n  };\n\n  return {\n    dragType,\n    dragState,\n    handleDragStart,\n    handleDragEnter,\n    handleDragLeave,\n    handleDragover,\n    handleDragEnd,\n    handleDrop,\n  };\n};\n"
  },
  {
    "path": "packages/web-vue/components/table/hooks/use-expand.ts",
    "content": "import { computed, Ref, ref } from 'vue';\nimport type { TableData, TableExpandable } from '../interface';\nimport type { BaseType, EmitFn2 } from '../../_utils/types';\n\nexport const useExpand = ({\n  expandedKeys,\n  defaultExpandedKeys,\n  defaultExpandAllRows,\n  expandable,\n  allRowKeys,\n  emit,\n}: {\n  expandedKeys: Ref<BaseType[] | undefined>;\n  defaultExpandedKeys: Ref<BaseType[] | undefined>;\n  defaultExpandAllRows: Ref<boolean>;\n  expandable: Ref<TableExpandable | undefined>;\n  allRowKeys: Ref<BaseType[]>;\n  emit: EmitFn2<{\n    'update:expandedKeys': (rowKeys: BaseType[]) => true;\n    'expand': (rowKey: BaseType, record: TableData) => true;\n    'expandedChange': (rowKeys: BaseType[]) => true;\n  }>;\n}) => {\n  const getDefaultExpandedRowKeys = (): BaseType[] => {\n    if (defaultExpandedKeys.value) {\n      return defaultExpandedKeys.value;\n    }\n    if (expandable.value?.defaultExpandedRowKeys) {\n      return expandable.value.defaultExpandedRowKeys;\n    }\n    if (defaultExpandAllRows.value || expandable.value?.defaultExpandAllRows) {\n      return [...allRowKeys.value];\n    }\n    return [];\n  };\n\n  const _expandedRowKeys = ref(getDefaultExpandedRowKeys());\n\n  const expandedRowKeys = computed(\n    () =>\n      expandedKeys.value ??\n      expandable.value?.expandedRowKeys ??\n      _expandedRowKeys.value\n  );\n\n  const handleExpand = (rowKey: BaseType, record: TableData) => {\n    const isExpanded = expandedRowKeys.value.includes(rowKey);\n    const newExpandedRowKeys = isExpanded\n      ? expandedRowKeys.value.filter((key) => rowKey !== key)\n      : expandedRowKeys.value.concat(rowKey);\n    _expandedRowKeys.value = newExpandedRowKeys;\n    emit('expand', rowKey, record);\n    emit('expandedChange', newExpandedRowKeys);\n    emit('update:expandedKeys', newExpandedRowKeys);\n  };\n\n  const expand = (rowKey: BaseType | BaseType[], expanded = true) => {\n    const _rowKeys = ([] as BaseType[]).concat(rowKey);\n    const newExpandedRowKeys = expanded\n      ? expandedRowKeys.value.concat(_rowKeys)\n      : expandedRowKeys.value.filter((key) => !_rowKeys.includes(key));\n    _expandedRowKeys.value = newExpandedRowKeys;\n    emit('expandedChange', newExpandedRowKeys);\n    emit('update:expandedKeys', newExpandedRowKeys);\n  };\n\n  const expandAll = (expanded = true) => {\n    const newExpandedRowKeys = expanded ? [...allRowKeys.value] : [];\n    _expandedRowKeys.value = newExpandedRowKeys;\n    emit('expandedChange', newExpandedRowKeys);\n    emit('update:expandedKeys', newExpandedRowKeys);\n  };\n\n  return {\n    expandedRowKeys,\n    handleExpand,\n    expand,\n    expandAll,\n  };\n};\n"
  },
  {
    "path": "packages/web-vue/components/table/hooks/use-filter.ts",
    "content": "import type { Ref } from 'vue';\nimport { computed, ref, watch } from 'vue';\nimport type { Filters, TableColumnData } from '../interface';\nimport { isEqual } from '../../_utils/is-equal';\n\nexport const useFilter = ({\n  columns,\n  onFilterChange,\n}: {\n  columns: Ref<TableColumnData[]>;\n  onFilterChange: (dataIndex: string, filteredValues: string[]) => void;\n}) => {\n  const _filters = ref<Filters>(getDefaultFilters(columns.value));\n\n  watch(columns, (columns) => {\n    const newFilters = getDefaultFilters(columns);\n    if (!isEqual(newFilters, _filters.value)) {\n      _filters.value = newFilters;\n    }\n  });\n\n  const computedFilters = computed<Filters>(() => {\n    const filters: Filters = {};\n    for (const item of columns.value) {\n      if (item.dataIndex) {\n        const value =\n          item.filterable?.filteredValue ?? _filters.value[item.dataIndex];\n        if (value) {\n          filters[item.dataIndex] = value;\n        }\n      }\n    }\n    return filters;\n  });\n\n  const resetFilters = (dataIndex?: string | string[]) => {\n    const _dataIndex = dataIndex ? ([] as string[]).concat(dataIndex) : [];\n\n    const filters: Filters = {};\n    for (const item of columns.value) {\n      if (item.dataIndex && item.filterable) {\n        if (_dataIndex.length === 0 || _dataIndex.includes(item.dataIndex)) {\n          const filteredValue = item.filterable.defaultFilteredValue ?? [];\n          filters[item.dataIndex] = filteredValue;\n          onFilterChange(item.dataIndex, filteredValue);\n        }\n      }\n    }\n    _filters.value = filters;\n  };\n\n  const clearFilters = (dataIndex?: string | string[]) => {\n    const _dataIndex = dataIndex ? ([] as string[]).concat(dataIndex) : [];\n\n    const filters: Filters = {};\n    for (const item of columns.value) {\n      if (item.dataIndex && item.filterable) {\n        if (_dataIndex.length === 0 || _dataIndex.includes(item.dataIndex)) {\n          const filteredValue: string[] = [];\n          filters[item.dataIndex] = filteredValue;\n          onFilterChange(item.dataIndex, filteredValue);\n        }\n      }\n    }\n    _filters.value = filters;\n  };\n\n  return {\n    _filters,\n    computedFilters,\n    resetFilters,\n    clearFilters,\n  };\n};\n\nconst getDefaultFilters = (columns: TableColumnData[]) => {\n  const filters: Filters = {};\n  for (const item of columns) {\n    if (item.dataIndex && item.filterable?.defaultFilteredValue) {\n      filters[item.dataIndex] = item.filterable.defaultFilteredValue;\n    }\n  }\n  return filters;\n};\n"
  },
  {
    "path": "packages/web-vue/components/table/hooks/use-pagination.ts",
    "content": "import { computed, ref } from 'vue';\nimport { TableProps } from '../interface';\nimport { isObject } from '../../_utils/is';\n\nexport const usePagination = (props: TableProps, emit: any) => {\n  const _page = ref(\n    isObject(props.pagination) ? props.pagination.defaultCurrent ?? 1 : 1\n  );\n  const _pageSize = ref(\n    isObject(props.pagination) ? props.pagination.defaultPageSize ?? 10 : 10\n  );\n\n  const pageSize = computed(() =>\n    isObject(props.pagination)\n      ? props.pagination.pageSize ?? _pageSize.value\n      : _pageSize.value\n  );\n  const page = computed(() =>\n    isObject(props.pagination)\n      ? props.pagination.current ?? _page.value\n      : _page.value\n  );\n\n  const handlePageChange = (page: number) => {\n    _page.value = page;\n    emit('pageChange', page);\n  };\n\n  const handlePageSizeChange = (pageSize: number) => {\n    _pageSize.value = pageSize;\n    emit('pageSizeChange', pageSize);\n  };\n\n  return {\n    page,\n    pageSize,\n    handlePageChange,\n    handlePageSizeChange,\n  };\n};\n"
  },
  {
    "path": "packages/web-vue/components/table/hooks/use-row-selection.ts",
    "content": "import type { Ref } from 'vue';\nimport { computed, ref } from 'vue';\nimport type { BaseType, EmitFn2 } from '../../_utils/types';\nimport type { TableDataWithRaw, TableRowSelection } from '../interface';\nimport { TableData } from '../interface';\nimport { getLeafKeys } from '../utils';\nimport { union } from '../../_utils/array';\n\nexport const useRowSelection = ({\n  selectedKeys,\n  defaultSelectedKeys,\n  rowSelection,\n  currentAllRowKeys,\n  currentAllEnabledRowKeys,\n  emit,\n}: {\n  selectedKeys: Ref<BaseType[] | undefined>;\n  defaultSelectedKeys: Ref<BaseType[] | undefined>;\n  rowSelection: Ref<TableRowSelection | undefined>;\n  currentAllRowKeys: Ref<BaseType[]>;\n  currentAllEnabledRowKeys: Ref<BaseType[]>;\n  emit: EmitFn2<{\n    'update:selectedKeys': (rowKeys: BaseType[]) => true;\n    'select': (\n      rowKeys: BaseType[],\n      rowKey: BaseType,\n      record: TableData\n    ) => true;\n    'selectAll': (checked: boolean) => true;\n    'selectionChange': (rowKeys: BaseType[]) => true;\n  }>;\n}) => {\n  const isRadio = computed(() => rowSelection.value?.type === 'radio');\n  const _selectedRowKeys = ref(\n    defaultSelectedKeys.value ??\n      rowSelection.value?.defaultSelectedRowKeys ??\n      []\n  );\n  const selectedRowKeys = computed(\n    () =>\n      selectedKeys.value ??\n      rowSelection.value?.selectedRowKeys ??\n      _selectedRowKeys.value\n  );\n  const currentSelectedRowKeys = computed(() =>\n    selectedRowKeys.value.filter((key) => currentAllRowKeys.value.includes(key))\n  );\n\n  const handleSelectAll = (checked: boolean) => {\n    const newKeys = union(\n      selectedRowKeys.value,\n      currentAllEnabledRowKeys.value,\n      !checked\n    );\n    _selectedRowKeys.value = newKeys;\n\n    emit('selectAll', checked);\n    emit('selectionChange', newKeys);\n    emit('update:selectedKeys', newKeys);\n  };\n\n  const handleSelect = (checked: boolean, record: TableDataWithRaw) => {\n    const selectedAllRowKeys = isRadio.value\n      ? [record.key]\n      : union(selectedRowKeys.value, [record.key], !checked);\n    _selectedRowKeys.value = selectedAllRowKeys;\n    emit('select', selectedAllRowKeys, record.key, record.raw);\n    emit('selectionChange', selectedAllRowKeys);\n    emit('update:selectedKeys', selectedAllRowKeys);\n  };\n\n  const handleSelectAllLeafs = (record: TableDataWithRaw, checked: boolean) => {\n    const newKeys = union(selectedRowKeys.value, getLeafKeys(record), !checked);\n    _selectedRowKeys.value = newKeys;\n    emit('select', newKeys, record.key, record.raw);\n    emit('selectionChange', newKeys);\n    emit('update:selectedKeys', newKeys);\n  };\n\n  const select = (rowKey: BaseType | BaseType[], checked = true) => {\n    const _rowKeys = ([] as BaseType[]).concat(rowKey);\n    const newSelectedRowKeys = isRadio.value\n      ? _rowKeys\n      : union(selectedRowKeys.value, _rowKeys, !checked);\n    _selectedRowKeys.value = newSelectedRowKeys;\n    emit('selectionChange', newSelectedRowKeys);\n    emit('update:selectedKeys', newSelectedRowKeys);\n  };\n\n  const selectAll = (checked = true) => {\n    const newKeys = union(\n      selectedRowKeys.value,\n      currentAllEnabledRowKeys.value,\n      !checked\n    );\n    _selectedRowKeys.value = newKeys;\n\n    emit('selectionChange', newKeys);\n    emit('update:selectedKeys', newKeys);\n  };\n\n  const clearSelected = () => {\n    _selectedRowKeys.value = [];\n\n    emit('selectionChange', []);\n    emit('update:selectedKeys', []);\n  };\n\n  return {\n    isRadio,\n    selectedRowKeys,\n    currentSelectedRowKeys,\n    handleSelectAll,\n    handleSelect,\n    handleSelectAllLeafs,\n    select,\n    selectAll,\n    clearSelected,\n  };\n};\n"
  },
  {
    "path": "packages/web-vue/components/table/hooks/use-sorter.ts",
    "content": "import type { Ref } from 'vue';\nimport { computed, ref, watch } from 'vue';\nimport { isString } from '../../_utils/is';\nimport type { Sorter, TableColumnData } from '../interface';\nimport { isEqual } from '../../_utils/is-equal';\n\nexport const useSorter = ({\n  columns,\n  onSorterChange,\n}: {\n  columns: Ref<TableColumnData[]>;\n  onSorterChange: (\n    dataIndex: string,\n    direction: 'ascend' | 'descend' | ''\n  ) => void;\n}) => {\n  const _sorter = ref<Sorter | undefined>(getDefaultSorter(columns.value));\n\n  watch(columns, (columns) => {\n    const newSorter = getDefaultSorter(columns);\n    if (!isEqual(newSorter, _sorter.value)) {\n      _sorter.value = newSorter;\n    }\n  });\n\n  const computedSorter = computed<Sorter | undefined>(() => {\n    for (const item of columns.value) {\n      if (item.dataIndex && item.sortable) {\n        // Take the first existing collation\n        const direction = isString(item.sortable.sortOrder)\n          ? item.sortable.sortOrder\n          : _sorter.value?.field === item.dataIndex\n          ? _sorter.value.direction\n          : '';\n        if (direction) {\n          return {\n            field: item.dataIndex,\n            direction,\n          };\n        }\n      }\n    }\n    return undefined;\n  });\n\n  const resetSorters = () => {\n    let sorter: Sorter | undefined;\n    for (const item of columns.value) {\n      if (item.dataIndex && item.sortable) {\n        if (!sorter && item.sortable.defaultSortOrder) {\n          sorter = {\n            field: item.dataIndex,\n            direction: item.sortable.defaultSortOrder,\n          };\n        }\n        onSorterChange(item.dataIndex, item.sortable.defaultSortOrder ?? '');\n      }\n    }\n    _sorter.value = sorter;\n  };\n\n  const clearSorters = () => {\n    for (const item of columns.value) {\n      if (item.dataIndex && item.sortable) {\n        onSorterChange(item.dataIndex, '');\n      }\n    }\n  };\n\n  return {\n    _sorter,\n    computedSorter,\n    resetSorters,\n    clearSorters,\n  };\n};\n\nconst getDefaultSorter = (columns: TableColumnData[]): Sorter | undefined => {\n  for (const item of columns) {\n    // get first enabled sorter\n    if (item.dataIndex && item.sortable?.defaultSortOrder) {\n      return {\n        field: item.dataIndex,\n        direction: item.sortable.defaultSortOrder,\n      };\n    }\n  }\n  return undefined;\n};\n"
  },
  {
    "path": "packages/web-vue/components/table/hooks/use-span.ts",
    "content": "import { computed, Ref, ref } from 'vue';\nimport {\n  TableColumnData,\n  TableData,\n  TableDataWithRaw,\n  TableOperationColumn,\n} from '../interface';\n\nexport const useSpan = ({\n  spanMethod,\n  data,\n  columns,\n}: {\n  spanMethod: Ref<\n    | ((data: {\n        record: TableData;\n        column: TableColumnData | TableOperationColumn;\n        rowIndex: number;\n        columnIndex: number;\n      }) => { rowspan?: number; colspan?: number } | void)\n    | undefined\n  >;\n  data: Ref<TableDataWithRaw[]>;\n  columns: Ref<(TableColumnData | TableOperationColumn)[]>;\n}) => {\n  const flattenTableSpan = (\n    tableData: TableDataWithRaw[],\n    span: Record<string, [number, number]>\n  ) => {\n    tableData?.forEach((record, rowIndex) => {\n      if (record.hasSubtree && record.children?.length) {\n        flattenTableSpan(record.children || [], span);\n      }\n      columns.value.forEach((column, columnIndex) => {\n        const { rowspan = 1, colspan = 1 } =\n          spanMethod.value?.({\n            record: record.raw,\n            column,\n            rowIndex,\n            columnIndex,\n          }) ?? {};\n        if (rowspan > 1 || colspan > 1) {\n          span[`${rowIndex}-${columnIndex}-${record.key}`] = [rowspan, colspan];\n          Array.from({ length: rowspan }).forEach((_, r) => {\n            if (rowIndex + r < tableData.length) {\n              const { key } = tableData[rowIndex + r] ?? {};\n              Array.from({ length: colspan }).forEach((_, c) => {\n                if (\n                  columnIndex + c < columns.value.length &&\n                  `${rowIndex}-${columnIndex}-${record.key}` !==\n                    `${rowIndex + r}-${columnIndex + c}-${key}`\n                ) {\n                  spanzero.value[`${rowIndex + r}-${columnIndex + c}-${key}`] =\n                    [0, 0];\n                }\n              });\n            }\n          });\n        }\n      });\n    });\n  };\n  let spanzero = ref<Record<string, [number, number]>>({});\n  const tableSpan = computed(() => {\n    const span: Record<string, [number, number]> = {};\n    spanzero.value = {};\n    if (spanMethod.value) {\n      flattenTableSpan(data.value, span);\n    }\n    return span;\n  });\n\n  const removedCells = computed(() => {\n    const data: string[] = [];\n    for (const indexKey of Object.keys(spanzero.value)) {\n      data.push(indexKey);\n    }\n    return data;\n  });\n\n  return {\n    tableSpan,\n    removedCells,\n  };\n};\n"
  },
  {
    "path": "packages/web-vue/components/table/index.ts",
    "content": "import type { App } from 'vue';\nimport type { ArcoOptions } from '../_utils/types';\nimport { getComponentPrefix, setGlobalConfig } from '../_utils/global-config';\nimport _Table from './table';\nimport _Thead from './table-thead';\nimport _Tbody from './table-tbody';\nimport _Tr from './table-tr';\nimport _Th from './table-th';\nimport _Td from './table-td';\nimport _Column from './table-column';\n\nconst Table = Object.assign(_Table, {\n  Thead: _Thead,\n  Tbody: _Tbody,\n  Tr: _Tr,\n  Th: _Th,\n  Td: _Td,\n  Column: _Column,\n  install: (app: App, options?: ArcoOptions) => {\n    setGlobalConfig(app, options);\n    const componentPrefix = getComponentPrefix(options);\n\n    app.component(componentPrefix + _Table.name, _Table);\n    app.component(componentPrefix + _Thead.name, _Thead);\n    app.component(componentPrefix + _Tbody.name, _Tbody);\n    app.component(componentPrefix + _Tr.name, _Tr);\n    app.component(componentPrefix + _Th.name, _Th);\n    app.component(componentPrefix + _Td.name, _Td);\n    app.component(componentPrefix + _Column.name, _Column);\n  },\n});\n\nexport type TableInstance = InstanceType<typeof _Table>;\nexport type TheadInstance = InstanceType<typeof _Thead>;\nexport type TbodyInstance = InstanceType<typeof _Tbody>;\nexport type TrInstance = InstanceType<typeof _Tr>;\nexport type ThInstance = InstanceType<typeof _Th>;\nexport type TdInstance = InstanceType<typeof _Td>;\nexport type TableColumnInstance = InstanceType<typeof _Column>;\n\nexport type {\n  TableData,\n  TableSortable,\n  TableFilterData,\n  TableFilterable,\n  TableColumnData,\n  TableBorder,\n  TableRowSelection,\n  TableExpandable,\n  TableDraggable,\n  TableChangeExtra,\n} from './interface';\n\nexport {\n  _Thead as Thead,\n  _Tbody as Tbody,\n  _Tr as Tr,\n  _Th as Th,\n  _Td as Td,\n  _Column as TableColumn,\n};\n\nexport default Table;\n"
  },
  {
    "path": "packages/web-vue/components/table/interface.ts",
    "content": "import { CSSProperties, RenderFunction, Slots, VNodeChild } from 'vue';\nimport { BaseType, ClassName, Data } from '../_utils/types';\nimport { TriggerProps } from '../trigger';\n\nexport const TABLE_PAGE_POSITION = [\n  'tl',\n  'top',\n  'tr',\n  'bl',\n  'bottom',\n  'br',\n] as const;\nexport type TablePagePosition = typeof TABLE_PAGE_POSITION[number];\n\nexport interface TableData {\n  /**\n   * @zh 数据行的key\n   * @en The key of the data row\n   */\n  key?: string;\n  /**\n   * @zh 扩展行内容\n   * @en Expand row content\n   */\n  expand?: string | RenderFunction;\n  /**\n   * @zh 子数据\n   * @en Sub data\n   */\n  children?: TableData[];\n  /**\n   * @zh 是否禁用行选择器\n   * @en Whether to disable the row selector\n   */\n  disabled?: boolean;\n  /**\n   * @zh 是否是叶子节点\n   * @en Whether it is a leaf node\n   * @version 2.13.0\n   */\n  isLeaf?: boolean;\n\n  [name: string]: any;\n}\n\nexport interface TableDataWithRaw {\n  raw: TableData;\n  key: string;\n  disabled?: boolean;\n  expand?: string | RenderFunction;\n  children?: TableDataWithRaw[];\n  isLeaf?: boolean;\n  hasSubtree?: boolean;\n}\n\nexport interface TableSortable {\n  /**\n   * @zh 支持的排序方向\n   * @en Supported sort direction\n   */\n  sortDirections: ('ascend' | 'descend')[];\n  /**\n   * @zh 排序函数。设置为 `true` 可关闭内部排序。2.19.0 版本修改传出数据。\n   * @en Sorting function. Set to `true` to turn off internal sorting. Version 2.19.0 modifies outgoing data.\n   */\n  sorter?:\n    | ((\n        a: TableData,\n        b: TableData,\n        extra: { dataIndex: string; direction: 'ascend' | 'descend' }\n      ) => number)\n    | boolean;\n  /**\n   * @zh 排序方向\n   * @en Sort direction\n   */\n  sortOrder?: 'ascend' | 'descend' | '';\n  /**\n   * @zh 默认排序方向（非受控模式）\n   * @en Default sort direction (uncontrolled mode)\n   */\n  defaultSortOrder?: 'ascend' | 'descend' | '';\n}\n\nexport interface TableFilterData {\n  /**\n   * @zh 筛选数据选项的内容\n   * @en Filter the content of the data option\n   */\n  text: string | RenderFunction;\n  /**\n   * @zh 筛选数据选项的值\n   * @en Filter the value of the data option\n   */\n  value: string;\n}\n\nexport interface TableFilterable {\n  /**\n   * @zh 筛选数据\n   * @en Filter data\n   */\n  filters?: TableFilterData[];\n  /**\n   * @zh 筛选函数\n   * @en Filter function\n   */\n  filter: (filteredValue: string[], record: TableData) => boolean;\n  /**\n   * @zh 是否支持多选\n   * @en Whether to support multiple selection\n   */\n  multiple?: boolean;\n  /**\n   * @zh 筛选项\n   * @en Filter value\n   */\n  filteredValue?: string[];\n  /**\n   * @zh 默认筛选项\n   * @en Default filter value\n   */\n  defaultFilteredValue?: string[];\n  /**\n   * @zh 筛选框的内容\n   * @en The content of filter box\n   */\n  renderContent?: (data: {\n    filterValue: string[];\n    setFilterValue: (filterValue: string[]) => void;\n    handleFilterConfirm: (event: Event) => void;\n    handleFilterReset: (event: Event) => void;\n  }) => VNodeChild;\n  /**\n   * @zh 筛选按钮的图标\n   * @en Filter icon for button\n   */\n  icon?: RenderFunction;\n  /**\n   * @zh 筛选框的弹出框配置\n   * @en Pop-up box configuration of filter box\n   */\n  triggerProps?: TriggerProps;\n  /**\n   * @zh 筛选图标是否左对齐\n   * @en Whether the filter icon is aligned to the left\n   * @version 2.13.0\n   */\n  alignLeft?: boolean;\n\n  slotName?: string;\n}\n\nexport interface TableColumnData {\n  /**\n   * @zh 列信息的标识，对应 `TableData` 中的数据\n   * @en The identifier of the column information, corresponding to the data in `TableData`\n   */\n  dataIndex?: string;\n  /**\n   * @zh 列标题\n   * @en Column header\n   */\n  title?: string | RenderFunction;\n  /**\n   * @zh 列宽度\n   * @en Column width\n   */\n  width?: number;\n  /**\n   * @zh 最小列宽\n   * @en Minimum column width\n   */\n  minWidth?: number;\n  /**\n   * @zh 对齐方向\n   * @en Alignment direction\n   */\n  align?: 'left' | 'center' | 'right';\n  /**\n   * @zh 固定位置\n   * @en Fixed position\n   */\n  fixed?: 'left' | 'right';\n  /**\n   * @zh 是否显示省略号\n   * @en Whether to show ellipsis\n   */\n  ellipsis?: boolean;\n  /**\n   * @zh 是否在显示省略号时显示文本提示。可填入 tooltip 组件属性\n   * @en Whether to show a text hint when an ellipsis is displayed. Can be filled in tooltip component properties\n   * @version 2.26.0\n   */\n  tooltip?: boolean | Record<string, any>;\n  /**\n   * @zh 排序相关选项\n   * @en Sorting related options\n   */\n  sortable?: TableSortable;\n  /**\n   * @zh 过滤相关选项\n   * @en Filter related options\n   */\n  filterable?: TableFilterable;\n  /**\n   * @zh 表头子数据，用于表头分组\n   * @en Header sub-data, used for header grouping\n   */\n  children?: TableColumnData[];\n  /**\n   * @zh 自定义单元格类名\n   * @en Custom cell class\n   * @version 2.36.0\n   */\n  cellClass?: ClassName;\n  /**\n   * @zh 自定义表头单元格类名\n   * @en Custom header cell class\n   * @version 2.36.0\n   */\n  headerCellClass?: ClassName;\n  /**\n   * @zh 自定义内容单元格类名\n   * @en Custom body cell class\n   * @version 2.36.0\n   */\n  bodyCellClass?: ClassName | ((record: TableData) => ClassName);\n  /**\n   * @zh 自定义总结栏单元格类名\n   * @en Custom body cell class\n   * @version 2.36.0\n   */\n  summaryCellClass?: ClassName | ((record: TableData) => ClassName);\n  /**\n   * @zh 自定义单元格样式\n   * @en Custom cell style\n   * @version 2.11.0\n   */\n  cellStyle?: CSSProperties;\n  /**\n   * @zh 自定义表头单元格样式\n   * @en Custom header cell style\n   * @version 2.29.0\n   */\n  headerCellStyle?: CSSProperties;\n  /**\n   * @zh 自定义内容单元格样式\n   * @en Custom body cell style\n   * @version 2.29.0\n   */\n  bodyCellStyle?: CSSProperties | ((record: TableData) => CSSProperties);\n  /**\n   * @zh 自定义总结栏单元格样式\n   * @en Custom summary cell style\n   * @version 2.30.0\n   */\n  summaryCellStyle?: CSSProperties | ((record: TableData) => CSSProperties);\n  /**\n   * @zh 自定义列单元格的渲染\n   * @en Customize the rendering of column cells\n   */\n  render?: (data: {\n    record: TableData;\n    column: TableColumnData;\n    rowIndex: number;\n  }) => VNodeChild;\n  /**\n   * @zh 设置当前列的渲染插槽的名字。插槽参数同 #cell\n   * @en Sets the name of the render slot for the current column. Slot parameters are the same as #cell\n   * @version 2.18.0\n   */\n  slotName?: string;\n  /**\n   * @zh 设置当前列的标题的渲染插槽的名字\n   * @en Set the name of the render slot for the header of the current column\n   * @version 2.23.0\n   */\n  titleSlotName?: string;\n\n  // private\n  slots?: Slots;\n  isLastLeftFixed?: boolean;\n  isFirstRightFixed?: boolean;\n  colSpan?: number;\n  rowSpan?: number;\n  index?: number;\n  parent?: TableColumnData;\n  _resizeWidth?: number;\n}\n\nexport interface TableBorder {\n  /**\n   * @zh 是否展示外边框\n   * @en TWhether to display the outer border\n   */\n  wrapper?: boolean;\n  /**\n   * @zh 是否展示单元格边框（表头+主体）\n   * @en Whether to display the cell border (header + body)\n   */\n  cell?: boolean;\n  /**\n   * @zh 是否展示表头单元格边框\n   * @en Whether to display the header cell border\n   */\n  headerCell?: boolean;\n  /**\n   * @zh 是否展示主体单元格边框\n   * @en Whether to display the body cell border\n   */\n  bodyCell?: boolean;\n}\n\nexport interface TableRowSelection {\n  /**\n   * @zh 行选择器的类型\n   * @en The type of row selector\n   */\n  type?: 'checkbox' | 'radio';\n  /**\n   * @zh 已选择的行（受控模式）\n   * @en Selected row (controlled mode)\n   */\n  selectedRowKeys?: BaseType[];\n  /**\n   * @zh 默认已选择的行（非受控模式）\n   * @en The selected row by default (uncontrolled mode)\n   */\n  defaultSelectedRowKeys?: BaseType[];\n  /**\n   * @zh 是否显示全选选择器\n   * @en Whether to show the select all selector\n   */\n  showCheckedAll?: boolean;\n  // crossPage?: boolean;\n  /**\n   * @zh 列标题\n   * @en Column title\n   */\n  title?: string;\n  /**\n   * @zh 列宽度\n   * @en Column width\n   */\n  width?: number;\n  /**\n   * @zh 是否固定\n   * @en Is it fixed\n   */\n  fixed?: boolean;\n  /**\n   * @zh 是否开启严格选择模式\n   * @en Whether to enable strict selection mode\n   * @defaultValue true\n   * @version 2.29.0\n   */\n  checkStrictly?: boolean;\n  /**\n   * @zh 是否仅展示当前页的 keys（切换分页时清空 keys）\n   * @en Whether to display only the keys of the current page (clear keys when switching paging)\n   * @version 2.32.0\n   */\n  onlyCurrent?: boolean;\n}\n\nexport interface TableExpandable {\n  /**\n   * @zh 显示的展开行（受控模式）\n   * @en Displayed Expanded Row (Controlled Mode)\n   */\n  expandedRowKeys?: BaseType[];\n  /**\n   * @zh 默认显示的展开行（非受控模式）\n   * @en Expand row displayed by default (Uncontrolled mode)\n   */\n  defaultExpandedRowKeys?: BaseType[];\n  /**\n   * @zh 是否默认展开所有的行\n   * @en Whether to expand all rows by default\n   */\n  defaultExpandAllRows?: boolean;\n  /**\n   * @zh 自定义展开行内容\n   * @en Customize expanded row content\n   */\n  expandedRowRender?: (record: TableData) => VNodeChild;\n  /**\n   * @zh 展开图标\n   * @en Expand icon\n   */\n  icon?: (expanded: boolean, record: TableData) => VNodeChild;\n  /**\n   * @zh 列标题\n   * @en Column title\n   */\n  title?: string;\n  /**\n   * @zh 列宽度\n   * @en Column width\n   */\n  width?: number;\n  /**\n   * @zh 是否固定\n   * @en Is it fixed\n   */\n  fixed?: boolean;\n}\n\nexport interface TableDraggable {\n  /**\n   * @zh 拖拽类型\n   * @en drag type\n   */\n  type?: 'row' | 'handle';\n  /**\n   * @zh 列标题\n   * @en Column title\n   */\n  title?: string;\n  /**\n   * @zh 列宽度\n   * @en Column width\n   */\n  width?: number;\n  /**\n   * @zh 是否固定\n   * @en Is it fixed\n   */\n  fixed?: boolean;\n}\n\nexport type OperationName =\n  | 'selection-checkbox'\n  | 'selection-radio'\n  | 'expand'\n  | 'drag-handle';\n\nexport interface TableOperationColumn {\n  name: OperationName | string;\n  title?: string | RenderFunction;\n  width?: number;\n  fixed?: boolean;\n  render?: (record: TableData) => VNodeChild;\n  isLastLeftFixed?: boolean;\n}\n\nexport interface TableComponents {\n  operations: (operations: {\n    dragHandle?: TableOperationColumn;\n    expand?: TableOperationColumn;\n    selection?: TableOperationColumn;\n  }) => TableOperationColumn[];\n}\n\nexport interface TableChangeExtra {\n  /**\n   * @zh 触发类型\n   * @en Trigger type\n   */\n  type: 'pagination' | 'sorter' | 'filter' | 'drag';\n  /**\n   * @zh 页码\n   * @en page number\n   */\n  page?: number;\n  /**\n   * @zh 每页数据数\n   * @en number per page\n   */\n  pageSize?: number;\n  /**\n   * @zh 排序信息\n   * @en Sort information\n   */\n  sorter?: Sorter;\n  /**\n   * @zh 筛选信息\n   * @en Filter information\n   */\n  filters?: Filters;\n  /**\n   * @zh 拖拽信息\n   * @en Drag and drop information\n   */\n  dragTarget?: TableData;\n}\n\nexport interface TableProps {\n  columns: TableColumnData[];\n  data: TableData[];\n  bordered?: boolean | TableBorder;\n  rowSelection?: TableRowSelection;\n  expandable?: TableExpandable;\n  pagination?: boolean | Data;\n  pagePosition?: string;\n}\n\nexport type Sorter = { field: string; direction: 'ascend' | 'descend' };\n\nexport type Filters = Record<string, string[]>;\n"
  },
  {
    "path": "packages/web-vue/components/table/style/filters-popup.less",
    "content": "@table-prefix-cls: ~'@{prefix}-table';\n\n.@{table-prefix-cls} {\n  &-filters-content {\n    box-sizing: border-box;\n    min-width: @table-popup-min-width;\n    background: @table-color-bg-filters-popup;\n    border: 1px solid @table-color-border-filters-popup;\n    border-radius: @table-popup-border-radius;\n    box-shadow: @shadow1-down;\n  }\n\n  &-filters-list {\n    max-height: @table-popup-max-height;\n    padding: 4px 0;\n    overflow-y: auto;\n  }\n\n  &-filters-item {\n    height: 32px;\n    padding: 0 12px;\n    font-size: 14px;\n    line-height: 32px;\n  }\n\n  &-filters-text {\n    width: 100%;\n    max-width: 160px;\n    height: 34px;\n    margin-right: 0;\n    padding-left: 10px;\n    overflow: hidden;\n    line-height: 32px;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    cursor: pointer;\n  }\n\n  &-filters-bottom {\n    box-sizing: border-box;\n    height: 38px;\n    padding: 0 12px;\n    overflow: hidden;\n    line-height: 38px;\n    border-top: 1px solid @table-color-border;\n\n    > *:not(*:last-child) {\n      margin-right: 8px;\n    }\n  }\n}\n"
  },
  {
    "path": "packages/web-vue/components/table/style/index.less",
    "content": "@import '../../style/mixins/index.less';\n@import './token.less';\n@import './filters-popup.less';\n\n@table-prefix-cls: ~'@{prefix}-table';\n\n@table-cls-table: ~'@{table-prefix-cls}-element';\n@table-cls-tr: ~'@{table-prefix-cls}-tr';\n@table-cls-th: ~'@{table-prefix-cls}-th';\n@table-cls-td: ~'@{table-prefix-cls}-td';\n\n.expandBtn() {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: @table-size-expand-button;\n  height: @table-size-expand-button;\n  padding: 0;\n  color: @table-color-expand-icon;\n  font-size: @table-font-size-expand-button;\n  line-height: @table-size-expand-button;\n  background-color: @table-color-bg-expand-icon;\n  border: @table-border-expand-icon-width solid @table-color-expand-icon-border;\n  border-radius: @table-border-radius-expand-button;\n  outline: none;\n  cursor: pointer;\n  transition: background-color @transition-duration-1\n    @transition-timing-function-linear;\n\n  &:hover {\n    color: @table-color-expand-icon_hover;\n    background-color: @table-color-bg-expand-icon_hover;\n    border-color: @table-color-expand-icon-border_hover;\n  }\n}\n\n.table-size(@size) {\n  .@{table-prefix-cls}-cell {\n    padding: ~'@{table-size-@{size}-padding-vertical}' ~'@{table-size-@{size}-padding-horizontal}';\n  }\n\n  //.@{table-prefix-cls}-col-has-sorter .@{table-prefix-cls}-cell-with-sorter {\n  //  padding: ~'@{table-size-@{size}-padding-vertical}' ~'@{table-size-@{size}-padding-horizontal}';\n  //  cursor: pointer;\n  //}\n\n  //.@{table-cls-td} {\n  //  padding: ~'@{table-size-@{size}-padding-vertical}' ~'@{table-size-@{size}-padding-horizontal}';\n  //}\n\n  .@{table-cls-th} {\n    font-size: ~'@{table-size-@{size}-font-header-size}';\n  }\n\n  .@{table-cls-td} {\n    font-size: ~'@{table-size-@{size}-font-size}';\n  }\n\n  .@{table-prefix-cls}-footer {\n    padding: ~'@{table-size-@{size}-padding-vertical}' ~'@{table-size-@{size}-padding-horizontal}';\n  }\n\n  // expand row in fixed\n  //.@{table-prefix-cls}-cell-fixed-expand {\n  //  margin: ~'-@{table-size-@{size}-padding-vertical}' ~'-@{table-size-@{size}-padding-horizontal}';\n  //  padding: ~'@{table-size-@{size}-padding-vertical}' ~'@{table-size-@{size}-padding-horizontal}';\n  //}\n\n  // sub table\n  .@{table-prefix-cls}-tr-expand .@{table-cls-td} .@{table-prefix-cls} {\n    margin: ~'-@{table-size-@{size}-padding-vertical}' ~'-@{table-size-@{size}-padding-horizontal}'\n      ~'calc(-@{table-size-@{size}-padding-vertical} - @{table-border-width})' ~'-@{table-size-@{size}-padding-horizontal}';\n  }\n\n  // editor row\n  .@{table-prefix-cls}-editable-row {\n    .@{table-prefix-cls}-cell-wrap-value {\n      padding: ~'@{table-size-@{size}-padding-vertical}' ~'@{table-size-@{size}-padding-horizontal}';\n    }\n  }\n}\n\n.@{table-prefix-cls} {\n  position: relative;\n\n  &-column-handle {\n    position: absolute;\n    top: 0;\n    right: -4px;\n    z-index: 1;\n    width: 8px;\n    height: 100%;\n    cursor: col-resize;\n  }\n\n  // spin\n  .@{prefix}-spin {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n  }\n\n  // ???\n  > .@{prefix}-spin > .@{prefix}-spin-children::after {\n    z-index: 2;\n  }\n\n  // footer\n  &-footer {\n    border-radius: 0 0 @table-border-radius @table-border-radius;\n  }\n\n  // box-shadow of the fixed column on the left\n  &-scroll-position-right &-col-fixed-left-last::after,\n  &-scroll-position-middle &-col-fixed-left-last::after {\n    box-shadow: @table-shadow-left;\n  }\n\n  // box-shadow of the fixed column on the right\n  &-scroll-position-left &-col-fixed-right-first::after,\n  &-scroll-position-middle &-col-fixed-right-first::after {\n    box-shadow: @table-shadow-right;\n  }\n\n  &-layout-fixed {\n    .@{table-cls-table} {\n      table-layout: fixed;\n    }\n  }\n\n  .@{table-cls-table} {\n    width: 100%;\n    min-width: 100%;\n    margin: 0;\n    border-collapse: separate;\n    border-spacing: 0;\n  }\n\n  &-th {\n    position: relative;\n    box-sizing: border-box;\n    color: @table-color-text-header-cell;\n    font-weight: @table-font-weight-header-text;\n    line-height: @line-height-base;\n    text-align: left;\n    background-color: @table-color-bg-header-cell;\n\n    &[colspan] {\n      text-align: center;\n    }\n\n    &-align-right {\n      text-align: right;\n\n      .@{table-prefix-cls}-cell-with-sorter {\n        justify-content: flex-end;\n      }\n    }\n\n    &-align-center {\n      text-align: center;\n\n      .@{table-prefix-cls}-cell-with-sorter {\n        justify-content: center;\n      }\n    }\n  }\n\n  &-td {\n    box-sizing: border-box;\n    color: @table-color-text-body-cell;\n    line-height: @line-height-base;\n    text-align: left;\n    word-break: break-all;\n    background-color: @table-color-bg-body-cell;\n    border-bottom: @table-border-width @table-border-style @table-color-border;\n\n    &-align-right {\n      text-align: right;\n    }\n\n    &-align-center {\n      text-align: center;\n    }\n\n    &.@{table-prefix-cls}-drag-handle {\n      cursor: move;\n    }\n  }\n\n  &-cell {\n    display: flex;\n    align-items: center;\n\n    &-align-right {\n      justify-content: flex-end;\n      text-align: right;\n    }\n\n    &-align-center {\n      justify-content: center;\n      text-align: center;\n    }\n  }\n\n  &-text-ellipsis {\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n  }\n\n  &-td-content {\n    display: block;\n    width: 100%;\n  }\n\n  .@{table-cls-th}&-col-sorted {\n    background-color: @table-color-bg-header-sorted-cell;\n  }\n\n  .@{table-cls-td}&-col-sorted {\n    background-color: @table-color-bg-body-sorted-cell;\n  }\n\n  &-col-fixed-left,\n  &-col-fixed-right {\n    position: sticky;\n    z-index: 10;\n  }\n\n  &-col-fixed-left-last::after,\n  &-col-fixed-right-first::after {\n    position: absolute;\n    top: 0;\n    bottom: -@table-border-width;\n    left: 0;\n    width: @table-size-shadow-wrapper-width;\n    box-shadow: none;\n    transform: translateX(-100%);\n    transition: box-shadow @transition-duration-1\n      @transition-timing-function-linear;\n    content: '';\n    pointer-events: none;\n  }\n\n  // ????\n  &-col-fixed-left-last::after {\n    right: 0;\n    left: unset;\n    transform: translateX(100%);\n  }\n\n  &-cell-text-ellipsis {\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n  }\n\n  // useless\n  &-editable-row {\n    .@{table-prefix-cls}-cell-wrap-value {\n      border: @table-border-width solid @table-color-editable-body-cell-border;\n      border-radius: @table-border-radius;\n      cursor: pointer;\n      transition: all @transition-duration-1 @transition-timing-function-linear;\n    }\n\n    &:hover {\n      .@{table-prefix-cls}-cell-wrap-value {\n        border: @table-border-width solid @table-color-border;\n      }\n    }\n  }\n\n  //&-cell {\n  //  word-break: break-all;\n  //}\n\n  // Expand\n  .@{table-prefix-cls}-expand-btn {\n    .expandBtn();\n  }\n\n  &-cell-expand-icon {\n    display: flex;\n    align-items: center;\n  }\n\n  &-cell-expand-icon &-cell-inline-icon {\n    display: inline-flex;\n    margin-right: @table-spacing-expand-button-margin-right;\n\n    .@{prefix}-icon-loading {\n      color: @color-primary-6;\n    }\n  }\n\n  &-cell-expand-icon-hidden {\n    display: inline-block;\n    width: @table-size-expand-button;\n    height: @table-size-expand-button;\n    margin-right: @table-spacing-expand-button-margin-right;\n  }\n\n  &-tr-expand .@{table-cls-td} {\n    background-color: @table-color-bg-expand-content;\n  }\n\n  &-cell-fixed-expand {\n    position: sticky;\n    left: 0;\n    box-sizing: border-box;\n  }\n\n  &-tr-expand .@{table-cls-td} & {\n    .@{table-prefix-cls}-container {\n      border: none;\n    }\n\n    .@{table-cls-th} {\n      border-bottom: @table-border-width @table-border-style @table-color-border;\n    }\n\n    .@{table-cls-th},\n    .@{table-cls-td} {\n      background-color: transparent;\n    }\n\n    .@{table-prefix-cls}-pagination {\n      margin-bottom: @table-spacing-pagination-margin;\n    }\n  }\n\n  // Selection\n  //& &-th&-operation &-th-item,\n  //& &-td&-operation {\n  //  padding-right: @table-spacing-selection-padding-horizontal;\n  //  padding-left: @table-spacing-selection-padding-horizontal;\n  //}\n  &-th&-operation,\n  &-td&-operation {\n    text-align: center;\n  }\n\n  &-th&-operation &-cell,\n  &-td&-operation &-cell {\n    display: flex;\n    justify-content: center;\n    padding: 0;\n  }\n\n  &-radio,\n  &-checkbox {\n    justify-content: center;\n  }\n\n  &-checkbox .@{prefix}-checkbox,\n  &-radio .@{prefix}-radio {\n    padding-left: 0;\n  }\n\n  // colgroup selection\n  &-selection-checkbox-col,\n  &-selection-radio-col {\n    .fixed-width(@table-size-selection-col-width);\n  }\n\n  &-expand-col {\n    .fixed-width(@table-size-expand-icon-col-width);\n  }\n\n  &-drag-handle-col {\n    .fixed-width(@table-size-drag-handle-col-width);\n  }\n\n  &-th {\n    transition: background-color @transition-duration-1\n      @transition-timing-function-linear;\n  }\n\n  &-cell-with-sorter {\n    display: flex;\n    align-items: center;\n    cursor: pointer;\n\n    &:hover {\n      background-color: @table-color-bg-header-sorted-cell_hover;\n    }\n  }\n\n  &-cell-with-filter {\n    display: flex;\n    align-items: center;\n  }\n\n  &-cell-next-ascend &-sorter-icon {\n    .@{prefix}-icon-caret-up {\n      color: @table-color-header-sorter-icon_next;\n    }\n  }\n\n  &-cell-next-descend &-sorter-icon {\n    .@{prefix}-icon-caret-down {\n      color: @table-color-header-sorter-icon_next;\n    }\n  }\n\n  &-sorter {\n    display: inline-block;\n    margin-left: @table-spacing-header-sorter-icon-margin-left;\n    vertical-align: -3px;\n  }\n\n  &-sorter&-sorter-direction-one {\n    vertical-align: 0;\n  }\n\n  &-sorter-icon {\n    position: relative;\n    width: @table-size-header-sorter-icon-width;\n    height: @table-size-header-sorter-icon-height;\n    overflow: hidden;\n    line-height: @table-size-header-sorter-icon-height;\n\n    .@{prefix}-icon-caret-up,\n    .@{prefix}-icon-caret-down {\n      position: absolute;\n      top: 50%;\n      color: @table-color-header-sorter-icon;\n      font-size: @table-font-size-header-sorter-icon;\n      transition: all @transition-duration-1 @transition-timing-function-linear;\n    }\n\n    .@{prefix}-icon-caret-up {\n      top: @table-position-header-sorter-icon-up-top;\n      left: @table-position-header-sorter-icon-left;\n    }\n\n    .@{prefix}-icon-caret-down {\n      top: @table-position-header-sorter-icon-down-top;\n      left: @table-position-header-sorter-icon-left;\n    }\n\n    &&-active {\n      svg {\n        color: @table-color-header-sorter-icon_active;\n      }\n    }\n  }\n\n  &-filters {\n    position: absolute;\n    top: 0;\n    right: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: @table-size-filters-width;\n    height: 100%;\n    line-height: 1;\n    vertical-align: 0;\n    background-color: transparent;\n    cursor: pointer;\n    transition: all @transition-duration-1 @transition-timing-function-linear;\n\n    &:hover,\n    &-open {\n      background-color: @table-color-bg-header-filters-icon_hover;\n    }\n\n    svg {\n      color: @table-color-header-filters-icon;\n      font-size: @table-font-size-filters-icon;\n      transition: all @transition-duration-1 @transition-timing-function-linear;\n    }\n\n    &-active {\n      svg {\n        color: @table-color-header-filters-icon_active;\n      }\n    }\n\n    &-align-left {\n      position: relative;\n      width: auto;\n      margin-left: @table-spacing-header-sorter-icon-margin-left;\n\n      svg {\n        font-size: @table-font-size-header-sorter-icon;\n      }\n\n      &:hover,\n      &-open {\n        background: none;\n      }\n\n      &:hover::before,\n      &.@{table-prefix-cls}-filters-open::before {\n        background: @table-filters-icon-bg_hover;\n      }\n    }\n  }\n\n  /* ---- Table sorter, filter, checkbox, radio (End) ---- */\n  &-container {\n    position: relative;\n    border-radius: @table-border-radius @table-border-radius 0 0;\n  }\n\n  &-header {\n    flex-shrink: 0;\n    border-radius: @table-border-radius @table-border-radius 0 0;\n  }\n\n  &-container {\n    box-sizing: border-box;\n    width: 100%;\n    min-height: 0;\n\n    // chrome not fluent: https://codepen.io/quanqqq/pen/BaLpEQd?editors=0010\n    // border-radius: @table-border-radius @table-border-radius 0 0 0;\n\n    .@{table-prefix-cls}-content {\n      display: flex;\n      flex-direction: column;\n      width: auto;\n      height: 100%;\n\n      &-scroll-x {\n        overflow-x: auto;\n        overflow-y: hidden;\n      }\n    }\n\n    &::before,\n    &::after {\n      position: absolute;\n      //top: -@table-border-width;\n      //bottom: -@table-border-width;\n      z-index: 1;\n      width: @table-size-shadow-wrapper-width;\n      height: 100%;\n      box-shadow: none;\n      transition: box-shadow @transition-duration-1\n        @transition-timing-function-linear;\n      content: '';\n      pointer-events: none;\n    }\n\n    &::before {\n      top: 0;\n      left: 0;\n      border-top-left-radius: @table-border-radius;\n    }\n\n    &::after {\n      top: 0;\n      right: 0;\n      border-top-right-radius: @table-border-radius;\n    }\n\n    // box-shadow on the left side of the scroll table\n    &:not(.@{table-prefix-cls}-has-fixed-col-left) {\n      &.@{table-prefix-cls}-scroll-position-right::before,\n      &.@{table-prefix-cls}-scroll-position-middle::before {\n        box-shadow: @table-shadow-left;\n      }\n    }\n\n    // box-shadow on the right side of the scroll table\n    &:not(.@{table-prefix-cls}-has-fixed-col-right) {\n      &.@{table-prefix-cls}-scroll-position-left::after,\n      &.@{table-prefix-cls}-scroll-position-middle::after {\n        box-shadow: @table-shadow-right;\n      }\n    }\n  }\n\n  &-header {\n    overflow-x: hidden;\n    overflow-y: hidden;\n    background-color: @table-color-bg-header-cell;\n    scrollbar-color: transparent transparent;\n\n    &-sticky {\n      position: sticky;\n      top: 0;\n      z-index: 100;\n    }\n  }\n\n  &:not(&-empty) &-header::-webkit-scrollbar {\n    // 仅隐藏横向滚动条\n    height: 0;\n    background-color: transparent;\n  }\n\n  &&-empty &-header {\n    overflow-x: auto;\n  }\n\n  &-body {\n    position: relative;\n    width: 100%;\n    min-height: @table-size-body-min-width;\n    overflow: auto;\n    background-color: @table-color-body-background;\n  }\n\n  &-border {\n    .@{table-prefix-cls}-container {\n      border-top: @table-border-width @table-border-style @table-color-border;\n      border-left: @table-border-width @table-border-style @table-color-border;\n\n      // ??用处\n      //&::before {\n      //  position: absolute;\n      //  bottom: 0;\n      //  left: 0;\n      //  z-index: 2;\n      //  width: 100%;\n      //  height: @table-border-width;\n      //  background-color: @table-color-border;\n      //  content: '';\n      //}\n    }\n\n    .@{table-prefix-cls}-scroll-y {\n      border-bottom: @table-border-width @table-border-style @table-color-border;\n\n      .@{table-prefix-cls}-body .@{table-cls-tr}:last-of-type .@{table-cls-td},\n      tfoot .@{table-cls-tr}:last-of-type .@{table-cls-td} {\n        border-bottom: none;\n\n        &.@{table-prefix-cls}-col-fixed-left-last::after,\n        &.@{table-prefix-cls}-col-fixed-right-first::after {\n          bottom: 0;\n        }\n      }\n    }\n\n    .@{table-cls-tr} .@{table-cls-th} {\n      border-bottom: @table-border-width @table-border-style @table-color-border;\n    }\n\n    //.@{table-prefix-cls}-tr-expand .@{table-prefix-cls}-cell-fixed-expand {\n    //  border-left: @table-border-width @table-border-style @table-color-border;\n    //}\n\n    .@{table-prefix-cls}-footer {\n      border: @table-border-width @table-border-style @table-color-border;\n      border-top: 0;\n    }\n  }\n\n  &-border:not(&-border-cell) {\n    .@{table-prefix-cls}-container {\n      border-right: @table-border-width @table-border-style @table-color-border;\n    }\n\n    //.@{table-cls-tr} .@{table-cls-th}[colspan] {\n    //  border-bottom: none;\n    //}\n    //\n    //.@{table-prefix-cls}-tr-expand .@{table-prefix-cls}-cell-fixed-expand {\n    //  border-left: none;\n    //}\n  }\n\n  &-border-cell {\n    .@{table-cls-th},\n    .@{table-cls-td}:not(.@{table-prefix-cls}-tr-expand) {\n      border-right: @table-border-width @table-border-style @table-color-border;\n    }\n\n    .@{table-cls-th}-resizing,\n    .@{table-cls-td}-resizing:not(.@{table-prefix-cls}-tr-expand) {\n      border-right-color: @table-color-border_resizing;\n    }\n  }\n\n  &-border-header-cell {\n    .@{table-cls-th} {\n      border-right: @table-border-width @table-border-style @table-color-border;\n      border-bottom: @table-border-width @table-border-style @table-color-border;\n    }\n    .@{table-cls-th}-resizing,\n    .@{table-cls-td}-resizing:not(.@{table-prefix-cls}-tr-expand) {\n      border-right-color: @table-color-border_resizing;\n    }\n  }\n\n  &-border&-border-header-cell {\n    thead {\n      .@{table-cls-tr}:first-child .@{table-cls-th}:last-child {\n        border-right: 0;\n      }\n    }\n  }\n\n  &-border-body-cell {\n    .@{table-cls-td}:not(:last-child):not(.@{table-prefix-cls}-tr-expand) {\n      border-right: @table-border-width @table-border-style @table-color-border;\n    }\n  }\n\n  // stripe: true\n  &-stripe {\n    &:not(.@{table-prefix-cls}-dragging)\n      .@{table-cls-tr}:not(.@{table-prefix-cls}-tr-empty):not(.@{table-prefix-cls}-tr-summary):nth-child(even),\n    .@{table-cls-tr}-drag {\n      .@{table-cls-td}:not(.@{table-prefix-cls}-col-fixed-left):not(.@{table-prefix-cls}-col-fixed-right) {\n        background-color: @table-color-bg-body-stripe-row;\n      }\n\n      .@{table-cls-td}.@{table-prefix-cls}-col-fixed-left,\n      .@{table-cls-td}.@{table-prefix-cls}-col-fixed-right {\n        &::before {\n          position: absolute;\n          top: 0;\n          left: 0;\n          z-index: -1;\n          width: 100%;\n          height: 100%;\n          background-color: @table-color-bg-body-stripe-row;\n          content: '';\n        }\n      }\n    }\n  }\n\n  & .@{table-cls-tr}-draggable {\n    cursor: move;\n  }\n\n  &-hover {\n    &:not(.@{table-prefix-cls}-dragging)\n      .@{table-cls-tr}:not(.@{table-prefix-cls}-tr-empty):not(.@{table-prefix-cls}-tr-summary):hover,\n    .@{table-cls-tr}-drag {\n      .@{table-cls-td}:not(.@{table-prefix-cls}-col-fixed-left):not(.@{table-prefix-cls}-col-fixed-right) {\n        background-color: @table-color-bg-body-row_hover;\n      }\n\n      .@{table-cls-td}.@{table-prefix-cls}-col-fixed-left,\n      .@{table-cls-td}.@{table-prefix-cls}-col-fixed-right {\n        &::before {\n          position: absolute;\n          top: 0;\n          left: 0;\n          z-index: -1;\n          width: 100%;\n          height: 100%;\n          background-color: @table-color-bg-body-row_hover;\n          content: '';\n        }\n      }\n    }\n\n    .@{table-cls-tr}-expand:not(.@{table-prefix-cls}-tr-empty):hover {\n      .@{table-cls-td}:not(.@{table-prefix-cls}-col-fixed-left):not(.@{table-prefix-cls}-col-fixed-right) {\n        background-color: @table-color-bg-expand-content_hover;\n      }\n    }\n\n    // 去除嵌套子表格的 hover 效果\n    .@{table-prefix-cls}-tr-expand .@{table-cls-td} & {\n      .@{table-cls-tr}:not(.@{table-prefix-cls}-tr-empty) {\n        .@{table-cls-td}:not(.@{table-prefix-cls}-col-fixed-left):not(.@{table-prefix-cls}-col-fixed-right) {\n          background-color: transparent;\n        }\n\n        .@{table-cls-td}.@{table-prefix-cls}-col-fixed-left,\n        .@{table-cls-td}.@{table-prefix-cls}-col-fixed-right {\n          &::before {\n            background-color: transparent;\n          }\n        }\n      }\n    }\n  }\n\n  &-tfoot {\n    position: relative;\n    z-index: 1;\n    flex-shrink: 0;\n    width: 100%;\n    overflow-x: auto;\n    background-color: @table-color-bg-tfoot;\n    box-shadow: 0 -@table-border-width 0 @table-color-border;\n    scrollbar-color: transparent transparent;\n\n    &::-webkit-scrollbar {\n      height: 0;\n      background-color: transparent;\n    }\n  }\n\n  & tfoot &-td {\n    background-color: @table-color-bg-tfoot;\n  }\n\n  // Active row\n  &-tr-checked .@{table-cls-td} {\n    background-color: @table-color-bg-body-row_active;\n  }\n\n  // Size\n  .table-size(large);\n\n  &-size-medium {\n    .table-size(medium);\n  }\n\n  &-size-small {\n    .table-size(small);\n  }\n\n  &-size-mini {\n    .table-size(mini);\n  }\n\n  // virtualized\n  &-virtualized .@{table-cls-table} {\n    table-layout: fixed;\n  }\n\n  &-virtualized div&-body div&-tr {\n    display: flex;\n  }\n\n  &-virtualized div&-body div&-td {\n    display: flex;\n    flex: 1;\n    align-items: center;\n  }\n}\n\n.@{table-prefix-cls}-pagination {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  margin-top: @table-spacing-pagination-margin;\n\n  &-left {\n    justify-content: flex-start;\n  }\n\n  &-center {\n    justify-content: center;\n  }\n\n  &-top {\n    margin-top: 0;\n    margin-bottom: @table-spacing-pagination-margin;\n  }\n}\n\n.@{prefix}-virtual-list {\n  & > .@{table-prefix-cls}-element {\n    width: auto;\n  }\n}\n\n@{arco-theme-tag}[arco-theme='dark'] {\n  .@{table-prefix-cls}-tr-checked .@{table-cls-td} {\n    background-color: @table-color-bg-body-row_active_dark;\n  }\n}\n"
  },
  {
    "path": "packages/web-vue/components/table/style/index.ts",
    "content": "import '../../style/index.less';\nimport '../../checkbox/style';\nimport '../../button/style';\nimport '../../empty/style';\nimport '../../pagination/style';\nimport '../../radio/style';\nimport '../../spin/style';\nimport '../../trigger/style';\nimport '../../scrollbar/style';\nimport '../../_components/auto-tooltip/style';\nimport './index.less';\n"
  },
  {
    "path": "packages/web-vue/components/table/style/token.less",
    "content": "@import '../../style/theme/index.less';\n\n@table-size-default-padding-horizontal: @spacing-7;\n@table-size-default-padding-vertical: 9px;\n@table-size-middle-padding-horizontal: @spacing-7;\n@table-size-middle-padding-vertical: 7px;\n@table-size-small-padding-horizontal: @spacing-7;\n@table-size-small-padding-vertical: 5px;\n@table-size-mini-padding-horizontal: @spacing-7;\n@table-size-mini-padding-vertical: 2px;\n\n@table-size-default-font-size: @font-size-body-3;\n@table-size-middle-font-size: @font-size-body-3;\n@table-size-small-font-size: @font-size-body-3;\n@table-size-mini-font-size: @font-size-body-1;\n\n@table-size-default-font-header-size: @font-size-body-3;\n@table-size-middle-font-header-size: @font-size-body-3;\n@table-size-small-font-header-size: @font-size-body-3;\n@table-size-mini-font-header-size: @font-size-body-1;\n\n@table-border-width: @border-1;\n@table-border-style: solid;\n\n@table-size-expand-button: 14px;\n@table-spacing-expand-button-margin-right: @spacing-2;\n@table-font-size-expand-button: 12px;\n@table-border-radius-expand-button: 2px;\n\n@table-color-border: var(~'@{arco-cssvars-prefix}-color-neutral-3');\n@table-border-radius: @radius-medium;\n\n@table-color-text-header-cell: rgb(var(~'@{arco-cssvars-prefix}-gray-10'));\n@table-color-bg-header-cell: var(~'@{arco-cssvars-prefix}-color-neutral-2');\n@table-color-bg-header-sorted-cell: var(\n  ~'@{arco-cssvars-prefix}-color-neutral-3'\n);\n@table-color-bg-header-sorted-cell_hover: rgba(\n  var(~'@{arco-cssvars-prefix}-gray-4'),\n  0.5\n);\n@table-color-header-filters-icon: var(~'@{arco-cssvars-prefix}-color-text-2');\n@table-color-header-filters-icon_active: @color-primary-6;\n@table-color-bg-header-filters-icon_hover: var(\n  ~'@{arco-cssvars-prefix}-color-neutral-4'\n);\n@table-font-size-filters-icon: 16px;\n@table-size-filters-width: 24px;\n@table-font-weight-header-text: @font-weight-500;\n\n@table-color-text-body-cell: rgb(var(~'@{arco-cssvars-prefix}-gray-10'));\n@table-color-bg-body-cell: var(~'@{arco-cssvars-prefix}-color-bg-2');\n@table-color-bg-body-sorted-cell: var(~'@{arco-cssvars-prefix}-color-fill-1');\n@table-color-bg-body-stripe-row: var(~'@{arco-cssvars-prefix}-color-fill-1');\n@table-color-bg-body-row_hover: var(~'@{arco-cssvars-prefix}-color-fill-1');\n@table-color-bg-body-row_active: var(~'@{arco-cssvars-prefix}-color-fill-1');\n@table-color-bg-body-row_active_dark: var(\n  ~'@{arco-cssvars-prefix}-color-neutral-2'\n);\n\n@table-color-expand-icon: var(~'@{arco-cssvars-prefix}-color-text-2');\n@table-color-expand-icon-border: @color-transparent;\n@table-color-expand-icon-border_hover: @color-transparent;\n@table-color-expand-icon_hover: var(~'@{arco-cssvars-prefix}-color-text-1');\n@table-color-bg-expand-icon: var(~'@{arco-cssvars-prefix}-color-neutral-3');\n@table-color-bg-expand-icon_hover: var(\n  ~'@{arco-cssvars-prefix}-color-neutral-4'\n);\n@table-color-bg-expand-content: var(~'@{arco-cssvars-prefix}-color-fill-1');\n@table-color-bg-expand-content_hover: var(\n  ~'@{arco-cssvars-prefix}-color-fill-1'\n);\n@table-border-expand-icon-width: @border-1;\n\n@table-color-header-sorter-icon: var(~'@{arco-cssvars-prefix}-color-neutral-5');\n@table-color-header-sorter-icon_next: var(\n  ~'@{arco-cssvars-prefix}-color-neutral-6'\n);\n@table-color-header-sorter-icon_active: @color-primary-6;\n@table-spacing-header-sorter-icon-margin-left: @spacing-4;\n@table-size-header-sorter-icon-height: 8px;\n@table-size-header-sorter-icon-width: 14px;\n@table-font-size-header-sorter-icon: 12px;\n@table-position-header-sorter-icon-up-top: -2px;\n@table-position-header-sorter-icon-down-top: -3px;\n@table-position-header-sorter-icon-left: 1px;\n\n// Popup\n@table-color-bg-filters-popup: var(~'@{arco-cssvars-prefix}-color-bg-5');\n@table-color-border-filters-popup: var(\n  ~'@{arco-cssvars-prefix}-color-neutral-3'\n);\n@table-popup-min-width: 100px;\n@table-popup-max-height: 200px;\n@table-popup-border-radius: @radius-medium;\n\n// box shadow\n@table-shadow-left: inset 6px 0 8px -3px rgba(0, 0, 0, 0.15);\n@table-shadow-right: inset -6px 0 8px -3px rgba(0, 0, 0, 0.15);\n@table-size-shadow-wrapper-width: 10px;\n\n// editable row\n@table-color-editable-body-cell-border: var(\n  ~'@{arco-cssvars-prefix}-color-white'\n);\n\n// pagination\n@table-spacing-pagination-margin: @spacing-6;\n\n// selection\n@table-size-selection-col-width: 40px;\n@table-size-expand-icon-col-width: 40px;\n@table-size-drag-handle-col-width: 40px;\n@table-size-body-min-width: 40px;\n@table-color-body-background: var(~'@{arco-cssvars-prefix}-color-bg-2');\n\n// vue overwrite token\n@table-size-large-padding-horizontal: @table-size-default-padding-horizontal;\n@table-size-large-padding-vertical: @table-size-default-padding-vertical;\n@table-size-large-font-size: @table-size-default-font-size;\n@table-size-large-font-header-size: @table-size-default-font-header-size;\n\n@table-size-medium-padding-horizontal: @table-size-middle-padding-horizontal;\n@table-size-medium-padding-vertical: @table-size-middle-padding-vertical;\n@table-size-medium-font-size: @table-size-middle-font-size;\n@table-size-medium-font-header-size: @table-size-middle-font-header-size;\n\n@table-color-bg-tfoot: var(~'@{arco-cssvars-prefix}-color-neutral-2');\n\n// filter icon align left\n@table-filters-icon-bg_hover: var(~'@{arco-cssvars-prefix}-color-fill-4');\n\n// new\n@table-color-border_resizing: @color-primary-6;\n"
  },
  {
    "path": "packages/web-vue/components/table/table-col-group.vue",
    "content": "<template>\n  <colgroup>\n    <col\n      v-for=\"item of operations\"\n      :key=\"`arco-col-${item.name}`\"\n      :class=\"`arco-table-${item.name}-col`\"\n      :style=\"fixedWidth(item.width)\"\n    />\n    <col\n      v-for=\"item of dataColumns\"\n      :key=\"`arco-col-${item.dataIndex}`\"\n      :style=\"\n        fixedWidth(\n          (columnWidth && item.dataIndex && columnWidth[item.dataIndex]) ||\n            item.width,\n          item.minWidth\n        )\n      \"\n    />\n  </colgroup>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, PropType } from 'vue';\nimport { TableColumnData, TableOperationColumn } from './interface';\n\nexport default defineComponent({\n  name: 'ColGroup',\n  props: {\n    dataColumns: {\n      type: Array as PropType<TableColumnData[]>,\n      required: true,\n    },\n    operations: {\n      type: Array as PropType<TableOperationColumn[]>,\n      required: true,\n    },\n    columnWidth: {\n      type: Object as PropType<Record<string, number>>,\n    },\n  },\n  setup() {\n    const fixedWidth = (width?: number, minWidth?: number) => {\n      if (width) {\n        const min = Math.max(width, minWidth || 0);\n        return {\n          width: `${width}px`,\n          minWidth: `${min}px`,\n          maxWidth: `${width}px`,\n        };\n      }\n      if (minWidth) {\n        return { minWidth: `${minWidth}px` };\n      }\n      return undefined;\n    };\n    return {\n      fixedWidth,\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/table/table-column.tsx",
    "content": "import {\n  CSSProperties,\n  defineComponent,\n  getCurrentInstance,\n  inject,\n  onBeforeUnmount,\n  PropType,\n  provide,\n  reactive,\n  Ref,\n  ref,\n  toRefs,\n  watch,\n} from 'vue';\nimport {\n  TableColumnData,\n  TableData,\n  TableFilterable,\n  TableSortable,\n} from './interface';\nimport {\n  tableColumnInjectionKey,\n  TableContext,\n  tableInjectionKey,\n} from './context';\nimport { useChildrenComponents } from '../_hooks/use-children-components';\nimport { usePureProp } from '../_hooks/use-pure-prop';\nimport { ClassName } from '../_utils/types';\n\nexport default defineComponent({\n  name: 'TableColumn',\n  props: {\n    /**\n     * @zh 列信息的标识，对应TableData中的数据\n     * @en Identifies the column information, corresponding to the data in TableData\n     */\n    dataIndex: String,\n    /**\n     * @zh 列标题\n     * @en Column title\n     */\n    title: String,\n    /**\n     * @zh 列宽度\n     * @en Column width\n     */\n    width: Number,\n    /**\n     * @zh 最小列宽\n     * @en Minimum column width\n     */\n    minWidth: Number,\n    /**\n     * @zh 对齐方向\n     * @en Alignment direction\n     */\n    align: {\n      type: String as PropType<TableColumnData['align']>,\n    },\n    /**\n     * @zh 固定位置\n     * @en Fixed position\n     */\n    fixed: {\n      type: String as PropType<TableColumnData['fixed']>,\n    },\n    /**\n     * @zh 是否显示为省略\n     * @en Whether to display as omitted\n     */\n    ellipsis: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 排序相关选项\n     * @en Sorting related options\n     */\n    sortable: {\n      type: Object as PropType<TableSortable>,\n      default: undefined,\n    },\n    /**\n     * @zh 过滤相关选项\n     * @en Filter related options\n     */\n    filterable: {\n      type: Object as PropType<TableFilterable>,\n      default: undefined,\n    },\n    /**\n     * @zh 自定义单元格类名\n     * @en Custom cell class\n     * @version 2.36.0\n     */\n    cellClass: {\n      type: [String, Array, Object] as PropType<ClassName>,\n    },\n    /**\n     * @zh 自定义表头单元格类名\n     * @en Custom cell class\n     * @version 2.36.0\n     */\n    headerCellClass: {\n      type: [String, Array, Object] as PropType<ClassName>,\n    },\n    /**\n     * @zh 自定义内容单元格类名\n     * @en Custom cell class\n     * @version 2.36.0\n     */\n    bodyCellClass: {\n      type: [String, Array, Object, Function] as PropType<\n        ClassName | ((record: TableData) => ClassName)\n      >,\n    },\n    /**\n     * @zh 自定义总结栏单元格类名\n     * @en Customize summary column cell class\n     * @version 2.36.0\n     */\n    summaryCellClass: {\n      type: [String, Array, Object, Function] as PropType<\n        ClassName | ((record: TableData) => ClassName)\n      >,\n    },\n    /**\n     * @zh 自定义单元格样式\n     * @en Custom cell style\n     * @version 2.11.0\n     */\n    cellStyle: {\n      type: Object as PropType<CSSProperties>,\n    },\n    /**\n     * @zh 自定义表头单元格样式\n     * @en Custom cell style\n     * @version 2.29.0\n     */\n    headerCellStyle: {\n      type: Object as PropType<CSSProperties>,\n    },\n    /**\n     * @zh 自定义内容单元格样式\n     * @en Custom cell style\n     * @version 2.29.0\n     */\n    bodyCellStyle: {\n      type: [Object, Function] as PropType<\n        CSSProperties | ((record: TableData) => CSSProperties)\n      >,\n    },\n    /**\n     * @zh 自定义总结栏单元格样式\n     * @en Customize summary column cell style\n     * @version 2.30.0\n     */\n    summaryCellStyle: {\n      type: [Object, Function] as PropType<\n        CSSProperties | ((record: TableData) => CSSProperties)\n      >,\n    },\n    /**\n     * @zh 用于手动指定选项的 index。2.26.0 版本后不再需要手动指定\n     * @en index for manually specifying option. Manual specification is no longer required after version 2.26.0\n     * @version 2.20.2\n     */\n    index: {\n      type: Number,\n    },\n    /**\n     * @zh 在省略时是否显示文字提示\n     * @en Whether to show text hints when omitted\n     * @version 2.26.0\n     */\n    tooltip: {\n      type: [Boolean, Object],\n      default: false,\n    },\n  },\n  /**\n   * @zh 单元格\n   * @en Cell\n   * @slot cell\n   * @binding {TableData} record\n   * @binding {TableColumnData} column\n   * @binding {number} rowIndex\n   */\n  /**\n   * @zh 标题\n   * @en Title\n   * @slot title\n   */\n  /**\n   * @zh 自定义筛选弹出框内容\n   * @en Title\n   * @slot filter-content\n   * @binding {string[]} filterValue\n   * @binding {(filterValue: string[]) => void} setFilterValue\n   * @binding {(event: Event) => void} handleFilterConfirm\n   * @binding {(event: Event) => void} handleFilterReset\n   * @version 2.23.0\n   */\n  /**\n   * @zh 筛选按钮图标\n   * @en Title\n   * @slot filter-icon\n   * @version 2.23.0\n   */\n  setup(props, { slots }) {\n    const { dataIndex, title, width, align, fixed, ellipsis, index, minWidth } =\n      toRefs(props);\n    const sortable = usePureProp(props, 'sortable');\n    const filterable = usePureProp(props, 'filterable');\n    const cellClass = usePureProp(props, 'cellClass') as Ref<\n      typeof props.cellClass\n    >;\n    const headerCellClass = usePureProp(props, 'headerCellClass') as Ref<\n      typeof props.headerCellClass\n    >;\n    const bodyCellClass = usePureProp(props, 'bodyCellClass') as Ref<\n      typeof props.bodyCellClass\n    >;\n    const summaryCellClass = usePureProp(props, 'summaryCellClass') as Ref<\n      typeof props.summaryCellClass\n    >;\n    const cellStyle = usePureProp(props, 'cellStyle');\n    const headerCellStyle = usePureProp(props, 'headerCellStyle');\n    const bodyCellStyle = usePureProp(props, 'bodyCellStyle');\n    const summaryCellStyle = usePureProp(props, 'summaryCellStyle');\n    const tooltip = usePureProp(props, 'tooltip');\n\n    const instance = getCurrentInstance();\n    const tableCtx = inject<Partial<TableContext>>(tableInjectionKey, {});\n    const tableColumnCtx = inject(tableColumnInjectionKey, undefined);\n    const { children, components } = useChildrenComponents('TableColumn');\n\n    const childrenColumnMap = reactive(new Map<number, TableColumnData>());\n\n    const addChild = (id: number, data: any) => {\n      childrenColumnMap.set(id, data);\n    };\n\n    const removeChild = (id: number) => {\n      childrenColumnMap.delete(id);\n    };\n\n    provide(tableColumnInjectionKey, {\n      addChild,\n      removeChild,\n    });\n\n    const childrenColumns = ref<TableColumnData[]>();\n    watch(\n      [components, childrenColumnMap],\n      ([components, childrenColumnMap]) => {\n        if (components.length > 0) {\n          const columns: TableColumnData[] = [];\n          components.forEach((id) => {\n            const column = childrenColumnMap.get(id);\n            if (column) columns.push(column);\n          });\n          childrenColumns.value = columns;\n        } else {\n          childrenColumns.value = undefined;\n        }\n      }\n    );\n\n    const column = reactive({\n      dataIndex,\n      title,\n      width,\n      minWidth,\n      align,\n      fixed,\n      ellipsis,\n      sortable,\n      filterable,\n      cellClass,\n      headerCellClass,\n      bodyCellClass,\n      summaryCellClass,\n      cellStyle,\n      headerCellStyle,\n      bodyCellStyle,\n      summaryCellStyle,\n      index,\n      tooltip,\n      children: childrenColumns,\n      slots,\n    });\n\n    if (instance) {\n      if (tableColumnCtx) {\n        // @ts-ignore\n        tableColumnCtx.addChild(instance.uid, column);\n      } else {\n        tableCtx.addColumn?.(instance.uid, column);\n      }\n    }\n\n    onBeforeUnmount(() => {\n      if (instance) {\n        if (tableColumnCtx) {\n          tableColumnCtx.removeChild(instance.uid);\n        } else {\n          tableCtx.removeColumn?.(instance.uid);\n        }\n      }\n    });\n\n    return () => {\n      children.value = slots.default?.();\n      return children.value;\n    };\n  },\n});\n"
  },
  {
    "path": "packages/web-vue/components/table/table-operation-td.tsx",
    "content": "import { computed, defineComponent, inject, PropType, VNode } from 'vue';\nimport { TableDataWithRaw, TableOperationColumn } from './interface';\nimport { getPrefixCls } from '../_utils/global-config';\nimport {\n  getLeafKeys,\n  getOperationFixedCls,\n  getOperationStyle,\n  getSelectionStatus,\n} from './utils';\nimport Checkbox from '../checkbox';\nimport Radio from '../radio';\nimport IconPlus from '../icon/icon-plus';\nimport IconMinus from '../icon/icon-minus';\nimport IconDragDotVertical from '../icon/icon-drag-dot-vertical';\nimport { TableContext, tableInjectionKey } from './context';\nimport { BaseType } from '../_utils/types';\n\nexport default defineComponent({\n  name: 'OperationTd',\n  components: {\n    Checkbox,\n    Radio,\n    IconPlus,\n    IconMinus,\n  },\n  props: {\n    operationColumn: {\n      type: Object as PropType<TableOperationColumn>,\n      required: true,\n    },\n    operations: {\n      type: Array as PropType<TableOperationColumn[]>,\n      required: true,\n    },\n    record: {\n      type: Object as PropType<TableDataWithRaw>,\n      required: true,\n    },\n    hasExpand: {\n      type: Boolean,\n      default: false,\n    },\n    selectedRowKeys: {\n      type: Array as PropType<BaseType[]>,\n    },\n    renderExpandBtn: {\n      type: Function as PropType<\n        (record: TableDataWithRaw, stopPropagation?: boolean) => VNode\n      >,\n    },\n    colSpan: {\n      type: Number,\n      default: 1,\n    },\n    rowSpan: {\n      type: Number,\n      default: 1,\n    },\n    summary: {\n      type: Boolean,\n      default: false,\n    },\n  },\n  emits: ['select'],\n  setup(props, { emit, slots }) {\n    const prefixCls = getPrefixCls('table');\n    const tableCtx = inject<Partial<TableContext>>(tableInjectionKey, {});\n    const style = computed(() =>\n      getOperationStyle(props.operationColumn, props.operations)\n    );\n\n    const cls = computed(() => [\n      `${prefixCls}-td`,\n      `${prefixCls}-operation`,\n      {\n        [`${prefixCls}-checkbox`]:\n          props.operationColumn.name === 'selection-checkbox',\n        [`${prefixCls}-radio`]:\n          props.operationColumn.name === 'selection-radio',\n        [`${prefixCls}-expand`]: props.operationColumn.name === 'expand',\n        [`${prefixCls}-drag-handle`]:\n          props.operationColumn.name === 'drag-handle',\n      },\n      ...getOperationFixedCls(prefixCls, props.operationColumn),\n    ]);\n\n    const leafKeys = computed(() => getLeafKeys(props.record));\n\n    const selectionStatus = computed(() =>\n      getSelectionStatus(tableCtx.currentSelectedRowKeys ?? [], leafKeys.value)\n    );\n\n    const renderContent = () => {\n      if (props.summary) {\n        return null;\n      }\n      if (props.operationColumn.render) {\n        return props.operationColumn.render(props.record.raw);\n      }\n      if (props.operationColumn.name === 'selection-checkbox') {\n        const value = props.record.key;\n\n        if (!tableCtx.checkStrictly && !props.record.isLeaf) {\n          return (\n            <Checkbox\n              modelValue={selectionStatus.value.checked}\n              indeterminate={selectionStatus.value.indeterminate}\n              disabled={Boolean(props.record.disabled)}\n              uninjectGroupContext\n              onChange={(checked) =>\n                tableCtx.onSelectAllLeafs?.(props.record, checked as boolean)\n              }\n              // @ts-ignore\n              onClick={(ev: Event) => ev.stopPropagation()}\n            />\n          );\n        }\n\n        return (\n          <Checkbox\n            modelValue={props.selectedRowKeys?.includes(value) ?? false}\n            disabled={Boolean(props.record.disabled)}\n            uninjectGroupContext\n            onChange={(checked) =>\n              tableCtx.onSelect?.(checked as boolean, props.record)\n            }\n            // @ts-ignore\n            onClick={(ev: Event) => ev.stopPropagation()}\n          />\n        );\n      }\n      if (props.operationColumn.name === 'selection-radio') {\n        const value = props.record.key;\n        return (\n          <Radio\n            modelValue={props.selectedRowKeys?.includes(value) ?? false}\n            disabled={Boolean(props.record.disabled)}\n            uninjectGroupContext\n            onChange={(checked) =>\n              tableCtx.onSelect?.(checked as boolean, props.record)\n            }\n            // @ts-ignore\n            onClick={(ev: Event) => ev.stopPropagation()}\n          />\n        );\n      }\n      if (props.operationColumn.name === 'expand') {\n        if (props.hasExpand && props.renderExpandBtn) {\n          return props.renderExpandBtn(props.record);\n        }\n        return null;\n      }\n      if (props.operationColumn.name === 'drag-handle') {\n        return slots['drag-handle-icon']?.() ?? <IconDragDotVertical />;\n      }\n      return null;\n    };\n\n    return () => (\n      <td\n        class={cls.value}\n        style={style.value}\n        rowspan={props.rowSpan > 1 ? props.rowSpan : undefined}\n        colspan={props.colSpan > 1 ? props.colSpan : undefined}\n      >\n        <span class={`${prefixCls}-cell`}>{renderContent()}</span>\n      </td>\n    );\n  },\n});\n"
  },
  {
    "path": "packages/web-vue/components/table/table-operation-th.tsx",
    "content": "import { computed, defineComponent, inject, PropType } from 'vue';\nimport { getOperationFixedCls, getOperationStyle } from './utils';\nimport { getPrefixCls } from '../_utils/global-config';\nimport Checkbox from '../checkbox';\nimport { TableOperationColumn } from './interface';\nimport { isFunction } from '../_utils/is';\nimport { TableContext, tableInjectionKey } from './context';\n\nexport default defineComponent({\n  name: 'OperationTh',\n  props: {\n    operationColumn: {\n      type: Object as PropType<TableOperationColumn>,\n      required: true,\n    },\n    operations: {\n      type: Array as PropType<TableOperationColumn[]>,\n      required: true,\n    },\n    rowSpan: {\n      type: Number,\n      default: 1,\n    },\n    // for selection\n    selectAll: {\n      type: Boolean,\n      default: false,\n    },\n  },\n  setup(props) {\n    const prefixCls = getPrefixCls('table');\n    const tableCtx = inject<Partial<TableContext>>(tableInjectionKey, {});\n\n    const checkboxStatus = computed(() => {\n      let checked = false;\n      let indeterminate = false;\n\n      const currentSelectedEnabledRowKeys =\n        tableCtx.currentSelectedRowKeys?.filter(\n          (key) => tableCtx.currentAllEnabledRowKeys?.includes(key) ?? true\n        ) ?? [];\n\n      const selectedNumber = currentSelectedEnabledRowKeys.length;\n      const totalEnabledNumber = tableCtx.currentAllEnabledRowKeys?.length ?? 0;\n      if (selectedNumber > 0) {\n        if (selectedNumber >= totalEnabledNumber) {\n          checked = true;\n        } else {\n          indeterminate = true;\n        }\n      }\n      return {\n        checked,\n        indeterminate,\n      };\n    });\n\n    const renderContent = () => {\n      if (props.selectAll) {\n        return (\n          <Checkbox\n            v-slots={{\n              default: isFunction(props.operationColumn.title)\n                ? props.operationColumn.title()\n                : props.operationColumn.title,\n            }}\n            modelValue={checkboxStatus.value.checked}\n            indeterminate={checkboxStatus.value.indeterminate}\n            uninjectGroupContext\n            onChange={(checked) => {\n              tableCtx.onSelectAll?.(checked as boolean);\n            }}\n          />\n        );\n      }\n      if (props.operationColumn.title) {\n        return isFunction(props.operationColumn.title)\n          ? props.operationColumn.title()\n          : props.operationColumn.title;\n      }\n      return null;\n    };\n\n    const style = computed(() =>\n      getOperationStyle(props.operationColumn, props.operations)\n    );\n\n    const cls = computed(() => [\n      `${prefixCls}-th`,\n      `${prefixCls}-operation`,\n      {\n        [`${prefixCls}-checkbox`]: props.selectAll,\n      },\n      ...getOperationFixedCls(prefixCls, props.operationColumn),\n    ]);\n\n    return () => (\n      <th\n        class={cls.value}\n        style={style.value}\n        rowspan={props.rowSpan > 1 ? props.rowSpan : undefined}\n      >\n        <span class={`${prefixCls}-cell`}>{renderContent()}</span>\n      </th>\n    );\n  },\n});\n"
  },
  {
    "path": "packages/web-vue/components/table/table-tbody.tsx",
    "content": "import { createVNode, defineComponent } from 'vue';\n\nexport default defineComponent({\n  name: 'Tbody',\n  setup(_, { slots }) {\n    return () => {\n      return createVNode(slots.tbody?.()[0] ?? 'tbody', null, {\n        default: slots.default,\n      });\n    };\n  },\n});\n"
  },
  {
    "path": "packages/web-vue/components/table/table-td.tsx",
    "content": "import {\n  computed,\n  createVNode,\n  defineComponent,\n  inject,\n  PropType,\n  ref,\n  VNode,\n} from 'vue';\nimport { getPrefixCls } from '../_utils/global-config';\nimport {\n  TableColumnData,\n  TableData,\n  TableDataWithRaw,\n  TableOperationColumn,\n} from './interface';\nimport { getFixedCls, getStyle } from './utils';\nimport { getValueByPath } from '../_utils/get-value-by-path';\nimport IconLoading from '../icon/icon-loading';\nimport { isFunction, isObject } from '../_utils/is';\nimport { TableContext, tableInjectionKey } from './context';\nimport AutoTooltip from '../_components/auto-tooltip/auto-tooltip';\n\nconst TD_TYPES = [\n  'normal',\n  'operation',\n  'checkbox',\n  'radio',\n  'expand',\n] as const;\ntype TdTypes = typeof TD_TYPES[number];\n\nexport default defineComponent({\n  name: 'Td',\n  props: {\n    rowIndex: Number,\n    record: {\n      type: Object as PropType<TableDataWithRaw>,\n      default: () => ({}),\n    },\n    column: {\n      type: Object as PropType<TableColumnData>,\n      default: () => ({}),\n    },\n    type: {\n      type: String as PropType<TdTypes>,\n      default: 'normal',\n    },\n    operations: {\n      type: Array as PropType<TableOperationColumn[]>,\n      default: () => [],\n    },\n    dataColumns: {\n      type: Array as PropType<TableColumnData[]>,\n      default: () => [],\n    },\n    colSpan: {\n      type: Number,\n      default: 1,\n    },\n    rowSpan: {\n      type: Number,\n      default: 1,\n    },\n    isFixedExpand: {\n      type: Boolean,\n      default: false,\n    },\n    containerWidth: {\n      type: Number,\n    },\n    showExpandBtn: {\n      type: Boolean,\n      default: false,\n    },\n    indentSize: {\n      type: Number,\n      default: 0,\n    },\n    renderExpandBtn: {\n      type: Function as PropType<\n        (record: TableDataWithRaw, stopPropagation?: boolean) => VNode\n      >,\n    },\n    summary: {\n      type: Boolean,\n      default: false,\n    },\n  },\n  setup(props, { slots }) {\n    const prefixCls = getPrefixCls('table');\n\n    const tooltipProps = computed(() => {\n      if (isObject(props.column?.tooltip)) {\n        return props.column.tooltip;\n      }\n      return undefined;\n    });\n\n    const isSorted = computed(\n      () =>\n        props.column?.dataIndex &&\n        tableCtx.sorter?.field === props.column.dataIndex\n    );\n\n    const resizing = computed(\n      () =>\n        props.column?.dataIndex &&\n        tableCtx.resizingColumn === props.column.dataIndex\n    );\n\n    const getCustomClass = () => {\n      if (props.summary) {\n        return isFunction(props.column?.summaryCellClass)\n          ? props.column.summaryCellClass(props.record?.raw)\n          : props.column?.summaryCellClass;\n      }\n      return isFunction(props.column?.bodyCellClass)\n        ? props.column.bodyCellClass(props.record?.raw)\n        : props.column?.bodyCellClass;\n    };\n\n    const cls = computed(() => [\n      `${prefixCls}-td`,\n      {\n        [`${prefixCls}-col-sorted`]: isSorted.value,\n        [`${prefixCls}-td-resizing`]: resizing.value,\n      },\n      ...getFixedCls(prefixCls, props.column),\n      props.column?.cellClass,\n      getCustomClass(),\n    ]);\n\n    const getCustomStyle = () => {\n      if (props.summary) {\n        return isFunction(props.column?.summaryCellStyle)\n          ? props.column.summaryCellStyle(props.record?.raw)\n          : props.column?.summaryCellStyle;\n      }\n      return isFunction(props.column?.bodyCellStyle)\n        ? props.column.bodyCellStyle(props.record?.raw)\n        : props.column?.bodyCellStyle;\n    };\n\n    const style = computed(() => {\n      const style = getStyle(props.column, {\n        dataColumns: props.dataColumns,\n        operations: props.operations,\n      });\n      const customStyle = getCustomStyle();\n      return {\n        ...style,\n        ...props.column?.cellStyle,\n        ...customStyle,\n      };\n    });\n\n    const cellStyle = computed(() => {\n      if (props.isFixedExpand && props.containerWidth) {\n        return {\n          width: `${props.containerWidth}px`,\n        };\n      }\n      return undefined;\n    });\n\n    const tableCtx = inject<Partial<TableContext>>(tableInjectionKey, {});\n\n    const renderContent = () => {\n      if (slots.default) {\n        return slots.default();\n      }\n      const data = {\n        record: props.record?.raw,\n        column: props.column,\n        rowIndex: props.rowIndex ?? -1,\n      };\n      if (slots.cell) {\n        return slots.cell(data);\n      }\n      if (props.column.slots?.cell) {\n        return props.column.slots.cell(data);\n      }\n      if (props.column.render) {\n        return props.column.render(data);\n      }\n      if (props.column.slotName && tableCtx.slots?.[props.column.slotName]) {\n        return tableCtx.slots[props.column.slotName]?.(data);\n      }\n      return String(\n        getValueByPath(props.record?.raw, props.column.dataIndex) ?? ''\n      );\n    };\n\n    const isLoading = ref(false);\n\n    const handleClick = (ev: Event) => {\n      if (\n        isFunction(tableCtx.loadMore) &&\n        !props.record?.isLeaf &&\n        !props.record?.children\n      ) {\n        isLoading.value = true;\n        new Promise<TableData[] | undefined>((resolve) => {\n          tableCtx.loadMore?.(props.record.raw, resolve);\n        }).then((children?: TableData[]) => {\n          tableCtx.addLazyLoadData?.(children, props.record);\n          isLoading.value = false;\n        });\n      }\n      ev.stopPropagation();\n    };\n\n    const renderCell = () => {\n      return (\n        <span\n          class={[\n            `${prefixCls}-cell`,\n            `${prefixCls}-cell-align-${props.column?.align ?? 'left'}`,\n            {\n              [`${prefixCls}-cell-fixed-expand`]: props.isFixedExpand,\n              [`${prefixCls}-cell-expand-icon`]: props.showExpandBtn,\n            },\n          ]}\n          style={cellStyle.value}\n        >\n          {props.indentSize > 0 && (\n            <span\n              style={{\n                paddingLeft: `${props.indentSize}px`,\n              }}\n            />\n          )}\n          {props.showExpandBtn && (\n            <span class={`${prefixCls}-cell-inline-icon`} onClick={handleClick}>\n              {isLoading.value ? (\n                <IconLoading />\n              ) : (\n                props.renderExpandBtn?.(props.record, false)\n              )}\n            </span>\n          )}\n          {props.column?.ellipsis && props.column?.tooltip ? (\n            <AutoTooltip\n              class={`${prefixCls}-td-content`}\n              tooltipProps={tooltipProps.value}\n            >\n              {renderContent()}\n            </AutoTooltip>\n          ) : (\n            <span\n              class={[\n                `${prefixCls}-td-content`,\n                {\n                  [`${prefixCls}-text-ellipsis`]: props.column?.ellipsis,\n                },\n              ]}\n            >\n              {renderContent()}\n            </span>\n          )}\n        </span>\n      );\n    };\n\n    return () => {\n      return createVNode(\n        slots.td?.({\n          record: props.record?.raw,\n          column: props.column,\n          rowIndex: props.rowIndex ?? -1,\n        })[0] ?? 'td',\n        {\n          class: cls.value,\n          style: style.value,\n          rowspan: props.rowSpan > 1 ? props.rowSpan : undefined,\n          colspan: props.colSpan > 1 ? props.colSpan : undefined,\n        },\n        {\n          default: () => [renderCell()],\n        }\n      );\n    };\n  },\n});\n"
  },
  {
    "path": "packages/web-vue/components/table/table-th.tsx",
    "content": "import {\n  computed,\n  createVNode,\n  defineComponent,\n  inject,\n  PropType,\n  toRefs,\n} from 'vue';\nimport { getPrefixCls } from '../_utils/global-config';\nimport Checkbox from '../checkbox';\nimport Radio from '../radio';\nimport Button from '../button';\nimport Trigger from '../trigger';\nimport IconCaretDown from '../icon/icon-caret-down';\nimport IconCaretUp from '../icon/icon-caret-up';\nimport IconFilter from '../icon/icon-filter';\nimport { TableColumnData, TableOperationColumn } from './interface';\nimport { useColumnSorter } from './hooks/use-column-sorter';\nimport { useColumnFilter } from './hooks/use-column-filter';\nimport { useI18n } from '../locale';\nimport { getFixedCls, getStyle } from './utils';\nimport { isBoolean, isFunction, isObject } from '../_utils/is';\nimport IconHover from '../_components/icon-hover.vue';\nimport { TableContext, tableInjectionKey } from './context';\nimport AutoTooltip from '../_components/auto-tooltip/auto-tooltip';\n\nexport default defineComponent({\n  name: 'Th',\n  props: {\n    column: {\n      type: Object as PropType<TableColumnData>,\n      default: () => ({}),\n    },\n    operations: {\n      type: Array as PropType<TableOperationColumn[]>,\n      default: () => [],\n    },\n    dataColumns: {\n      type: Array as PropType<TableColumnData[]>,\n      default: () => [],\n    },\n    resizable: Boolean,\n  },\n  setup(props, { slots }) {\n    const { column } = toRefs(props);\n    const prefixCls = getPrefixCls('table');\n    const { t } = useI18n();\n\n    const tableCtx = inject<Partial<TableContext>>(tableInjectionKey, {});\n\n    const resizing = computed(\n      () =>\n        props.column?.dataIndex &&\n        tableCtx.resizingColumn === props.column.dataIndex\n    );\n\n    const tooltipProps = computed(() => {\n      if (isObject(props.column?.tooltip)) {\n        return props.column.tooltip;\n      }\n      return undefined;\n    });\n\n    const filterIconAlignLeft = computed(() => {\n      if (\n        props.column?.filterable &&\n        isBoolean(props.column.filterable.alignLeft)\n      ) {\n        return props.column.filterable.alignLeft;\n      }\n      return tableCtx.filterIconAlignLeft;\n    });\n\n    const {\n      sortOrder,\n      hasSorter,\n      hasAscendBtn,\n      hasDescendBtn,\n      nextSortOrder,\n      handleClickSorter,\n      // @ts-ignore\n    } = useColumnSorter({\n      column,\n      tableCtx,\n    });\n\n    const {\n      filterPopupVisible,\n      isFilterActive,\n      isMultipleFilter,\n      columnFilterValue,\n      handleFilterPopupVisibleChange,\n      setFilterValue,\n      handleCheckboxFilterChange,\n      handleRadioFilterChange,\n      handleFilterConfirm,\n      handleFilterReset,\n    } = useColumnFilter({\n      column,\n      tableCtx,\n    });\n\n    const renderFilterContent = () => {\n      const { filterable } = props.column;\n\n      if (props.column.slots?.['filter-content']) {\n        return props.column.slots?.['filter-content']({\n          filterValue: columnFilterValue.value,\n          setFilterValue,\n          handleFilterConfirm,\n          handleFilterReset,\n        });\n      }\n\n      if (filterable?.slotName) {\n        return tableCtx?.slots?.[filterable?.slotName]?.({\n          filterValue: columnFilterValue.value,\n          setFilterValue,\n          handleFilterConfirm,\n          handleFilterReset,\n        });\n      }\n\n      if (filterable?.renderContent) {\n        return filterable.renderContent({\n          filterValue: columnFilterValue.value,\n          setFilterValue,\n          handleFilterConfirm,\n          handleFilterReset,\n        });\n      }\n\n      return (\n        <div class={`${prefixCls}-filters-content`}>\n          <ul class={`${prefixCls}-filters-list`}>\n            {filterable?.filters?.map((item, index) => {\n              return (\n                <li class={`${prefixCls}-filters-item`} key={index}>\n                  {isMultipleFilter.value ? (\n                    <Checkbox\n                      value={item.value}\n                      modelValue={columnFilterValue.value}\n                      uninjectGroupContext\n                      // @ts-ignore\n                      onChange={handleCheckboxFilterChange}\n                    >\n                      {item.text}\n                    </Checkbox>\n                  ) : (\n                    <Radio\n                      value={item.value}\n                      modelValue={columnFilterValue.value[0] ?? ''}\n                      uninjectGroupContext\n                      // @ts-ignore\n                      onChange={handleRadioFilterChange}\n                    >\n                      {item.text}\n                    </Radio>\n                  )}\n                </li>\n              );\n            })}\n          </ul>\n          <div class={`${prefixCls}-filters-bottom`}>\n            <Button size=\"mini\" onClick={handleFilterReset}>\n              {t('table.resetText')}\n            </Button>\n            <Button type=\"primary\" size=\"mini\" onClick={handleFilterConfirm}>\n              {t('table.okText')}\n            </Button>\n          </div>\n        </div>\n      );\n    };\n\n    const renderFilter = () => {\n      const { filterable } = props.column;\n\n      if (!filterable) {\n        return null;\n      }\n\n      return (\n        <Trigger\n          v-slots={{ content: renderFilterContent }}\n          popupVisible={filterPopupVisible.value}\n          trigger=\"click\"\n          autoFitPosition\n          popupOffset={filterIconAlignLeft.value ? 4 : 0}\n          onPopupVisibleChange={handleFilterPopupVisibleChange}\n          {...filterable.triggerProps}\n        >\n          <IconHover\n            class={[\n              `${prefixCls}-filters`,\n              {\n                [`${prefixCls}-filters-active`]: isFilterActive.value,\n                [`${prefixCls}-filters-open`]: filterPopupVisible.value,\n                [`${prefixCls}-filters-align-left`]: filterIconAlignLeft.value,\n              },\n            ]}\n            disabled={!filterIconAlignLeft.value}\n            // @ts-ignore\n            onClick={(ev: Event) => ev.stopPropagation()}\n          >\n            {props.column.slots?.['filter-icon']?.() ?? filterable.icon?.() ?? (\n              <IconFilter />\n            )}\n          </IconHover>\n        </Trigger>\n      );\n    };\n\n    const cellCls = computed(() => {\n      const cls: any[] = [\n        `${prefixCls}-cell`,\n        `${prefixCls}-cell-align-${\n          props.column?.align ?? (props.column.children ? 'center' : 'left')\n        }`,\n      ];\n\n      if (hasSorter.value) {\n        cls.push(`${prefixCls}-cell-with-sorter`, {\n          [`${prefixCls}-cell-next-ascend`]: nextSortOrder.value === 'ascend',\n          [`${prefixCls}-cell-next-descend`]: nextSortOrder.value === 'descend',\n        });\n      }\n\n      if (filterIconAlignLeft.value) {\n        cls.push(`${prefixCls}-cell-with-filter`);\n      }\n\n      return cls;\n    });\n\n    const renderTitle = () => {\n      if (slots.default) {\n        return slots.default();\n      }\n      if (\n        props.column?.titleSlotName &&\n        tableCtx.slots?.[props.column.titleSlotName]\n      ) {\n        return tableCtx.slots[props.column.titleSlotName]?.({\n          column: props.column,\n        });\n      }\n      if (props.column?.slots?.title) {\n        return props.column.slots.title();\n      }\n      if (isFunction(props.column.title)) {\n        return props.column.title();\n      }\n      return props.column.title;\n    };\n\n    const renderCell = () => (\n      <span\n        class={cellCls.value}\n        onClick={hasSorter.value ? handleClickSorter : undefined}\n      >\n        {props.column?.ellipsis && props.column?.tooltip ? (\n          <AutoTooltip\n            class={`${prefixCls}-th-title`}\n            tooltipProps={tooltipProps.value}\n          >\n            {renderTitle()}\n          </AutoTooltip>\n        ) : (\n          <span\n            class={[\n              `${prefixCls}-th-title`,\n              { [`${prefixCls}-text-ellipsis`]: props.column?.ellipsis },\n            ]}\n          >\n            {renderTitle()}\n          </span>\n        )}\n        {hasSorter.value && (\n          <span class={`${prefixCls}-sorter`}>\n            {hasAscendBtn.value && (\n              <div\n                class={[\n                  `${prefixCls}-sorter-icon`,\n                  {\n                    [`${prefixCls}-sorter-icon-active`]:\n                      sortOrder.value === 'ascend',\n                  },\n                ]}\n              >\n                <IconCaretUp />\n              </div>\n            )}\n            {hasDescendBtn.value && (\n              <div\n                class={[\n                  `${prefixCls}-sorter-icon`,\n                  {\n                    [`${prefixCls}-sorter-icon-active`]:\n                      sortOrder.value === 'descend',\n                  },\n                ]}\n              >\n                <IconCaretDown />\n              </div>\n            )}\n          </span>\n        )}\n        {filterIconAlignLeft.value && renderFilter()}\n      </span>\n    );\n\n    const style = computed(() => {\n      return {\n        ...getStyle(props.column, {\n          dataColumns: props.dataColumns,\n          operations: props.operations,\n        }),\n        ...props.column?.cellStyle,\n        ...props.column?.headerCellStyle,\n      };\n    });\n\n    const cls = computed(() => [\n      `${prefixCls}-th`,\n      {\n        [`${prefixCls}-col-sorted`]: Boolean(sortOrder.value),\n        [`${prefixCls}-th-resizing`]: resizing.value,\n      },\n      ...getFixedCls(prefixCls, props.column),\n      props.column?.cellClass,\n      props.column?.headerCellClass,\n    ]);\n\n    const handleMouseDown = (ev: MouseEvent) => {\n      if (props.column?.dataIndex) {\n        tableCtx.onThMouseDown?.(props.column?.dataIndex, ev);\n      }\n    };\n\n    return () => {\n      const colSpan = props.column.colSpan ?? 1;\n      const rowSpan = props.column.rowSpan ?? 1;\n\n      return createVNode(\n        slots.th?.({\n          column: props.column,\n        })[0] ?? 'th',\n        {\n          class: cls.value,\n          style: style.value,\n          colspan: colSpan > 1 ? colSpan : undefined,\n          rowspan: rowSpan > 1 ? rowSpan : undefined,\n        },\n        {\n          default: () => [\n            renderCell(),\n            !filterIconAlignLeft.value && renderFilter(),\n            props.resizable && (\n              <span\n                class={`${prefixCls}-column-handle`}\n                onMousedown={handleMouseDown}\n              />\n            ),\n          ],\n        }\n      );\n    };\n  },\n});\n"
  },
  {
    "path": "packages/web-vue/components/table/table-thead.tsx",
    "content": "import { createVNode, defineComponent } from 'vue';\n\nexport default defineComponent({\n  name: 'Thead',\n  setup(_, { slots }) {\n    return () => {\n      return createVNode(slots.thead?.()[0] ?? 'thead', null, {\n        default: slots.default,\n      });\n    };\n  },\n});\n"
  },
  {
    "path": "packages/web-vue/components/table/table-tr.tsx",
    "content": "import { computed, defineComponent, createVNode, PropType } from 'vue';\nimport { getPrefixCls } from '../_utils/global-config';\nimport { TableDataWithRaw } from './interface';\n\nexport default defineComponent({\n  name: 'Tr',\n  props: {\n    expand: {\n      type: Boolean,\n    },\n    empty: {\n      type: Boolean,\n    },\n    checked: {\n      type: Boolean,\n    },\n    rowIndex: Number,\n    record: {\n      type: Object as PropType<TableDataWithRaw>,\n      default: () => ({}),\n    },\n  },\n  setup(props, { slots }) {\n    const prefixCls = getPrefixCls('table');\n\n    const cls = computed(() => [\n      `${prefixCls}-tr`,\n      {\n        [`${prefixCls}-tr-expand`]: props.expand,\n        [`${prefixCls}-tr-empty`]: props.empty,\n        [`${prefixCls}-tr-checked`]: props.checked,\n      },\n    ]);\n\n    return () => {\n      return createVNode(\n        slots.tr?.({\n          rowIndex: props.rowIndex,\n          record: props.record?.raw,\n        })[0] ?? 'tr',\n        { class: cls.value },\n        {\n          default: slots.default,\n        }\n      );\n    };\n  },\n});\n"
  },
  {
    "path": "packages/web-vue/components/table/table.tsx",
    "content": "import type {\n  ComponentPublicInstance,\n  CSSProperties,\n  PropType,\n  Slot,\n} from 'vue';\nimport {\n  computed,\n  defineComponent,\n  inject,\n  onMounted,\n  provide,\n  reactive,\n  ref,\n  toRefs,\n  watch,\n  watchEffect,\n} from 'vue';\nimport { getPrefixCls } from '../_utils/global-config';\nimport type { Size } from '../_utils/constant';\nimport {\n  isArray,\n  isFunction,\n  isNull,\n  isNumber,\n  isObject,\n  isString,\n  isUndefined,\n} from '../_utils/is';\nimport { debounce } from '../_utils/debounce';\nimport type {\n  TableBorder,\n  TableChangeExtra,\n  TableColumnData,\n  TableComponents,\n  TableData,\n  TableDataWithRaw,\n  TableDraggable,\n  TableExpandable,\n  TableOperationColumn,\n  TablePagePosition,\n  TableRowSelection,\n} from './interface';\nimport {\n  getGroupColumns,\n  mapArrayWithChildren,\n  mapRawTableData,\n} from './utils';\nimport { useRowSelection } from './hooks/use-row-selection';\nimport { useExpand } from './hooks/use-expand';\nimport { usePagination } from './hooks/use-pagination';\nimport IconPlus from '../icon/icon-plus';\nimport IconMinus from '../icon/icon-minus';\nimport Spin from '../spin';\nimport Pagination, { PaginationProps } from '../pagination';\nimport Empty from '../empty';\nimport ColGroup from './table-col-group.vue';\nimport Thead from './table-thead';\nimport Tbody from './table-tbody';\nimport Tr from './table-tr';\nimport Th from './table-th';\nimport Td from './table-td';\nimport OperationTh from './table-operation-th';\nimport OperationTd from './table-operation-td';\nimport VirtualList from '../_components/virtual-list-v2';\nimport ResizeObserver from '../_components/resize-observer';\nimport { VirtualListProps } from '../_components/virtual-list-v2/interface';\nimport { omit } from '../_utils/omit';\nimport { configProviderInjectionKey } from '../config-provider/context';\nimport { useDrag } from './hooks/use-drag';\nimport { useColumnResize } from './hooks/use-column-resize';\nimport { tableInjectionKey } from './context';\nimport { useFilter } from './hooks/use-filter';\nimport { useSorter } from './hooks/use-sorter';\nimport ClientOnly from '../_components/client-only';\nimport { useSpan } from './hooks/use-span';\nimport { useChildrenComponents } from '../_hooks/use-children-components';\nimport Scrollbar, { ScrollbarProps } from '../scrollbar';\nimport { useComponentRef } from '../_hooks/use-component-ref';\nimport type { BaseType } from '../_utils/types';\nimport { useScrollbar } from '../_hooks/use-scrollbar';\nimport { getValueByPath, setValueByPath } from '../_utils/get-value-by-path';\n\nconst DEFAULT_BORDERED = {\n  wrapper: true,\n  cell: false,\n  headerCell: false,\n  bodyCell: false,\n};\n\nexport default defineComponent({\n  name: 'Table',\n  props: {\n    /**\n     * @zh 表格的列描述信息\n     * @en Column info of the table\n     */\n    columns: {\n      type: Array as PropType<TableColumnData[]>,\n      default: () => [],\n    },\n    /**\n     * @zh 表格的数据\n     * @en Table data\n     */\n    data: {\n      type: Array as PropType<TableData[]>,\n      default: () => [],\n    },\n    /**\n     * @zh 是否显示边框\n     * @en Whether to show the border\n     */\n    bordered: {\n      type: [Boolean, Object] as PropType<boolean | TableBorder>,\n      default: true,\n    },\n    /**\n     * @zh 是否显示选中效果\n     * @en Whether to show the hover effect\n     */\n    hoverable: {\n      type: Boolean,\n      default: true,\n    },\n    /**\n     * @zh 是否开启斑马纹效果\n     * @en Whether to enable the stripe effect\n     */\n    stripe: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 表格的大小\n     * @en The size of the table\n     * @values 'mini','small','medium','large'\n     * @defaultValue 'large'\n     */\n    size: {\n      type: String as PropType<Size>,\n      default: () =>\n        inject(configProviderInjectionKey, undefined)?.size ?? 'large',\n    },\n    /**\n     * @zh 表格的 table-layout 属性设置为 fixed，设置为 fixed 后，表格的宽度不会被内容撑开超出 100%。\n     * @en The table-layout property of the table is set to fixed. After it is set to fixed, the width of the table will not be stretched beyond 100% by the content.\n     */\n    tableLayoutFixed: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 是否为加载中状态\n     * @en Whether it is loading state\n     */\n    loading: {\n      type: [Boolean, Object],\n      default: false,\n    },\n    /**\n     * @zh 表格的行选择器配置\n     * @en Table row selector configuration\n     */\n    rowSelection: {\n      type: Object as PropType<TableRowSelection>,\n    },\n    /**\n     * @zh 表格的展开行配置\n     * @en Expand row configuration of the table\n     */\n    expandable: {\n      type: Object as PropType<TableExpandable>,\n    },\n    /**\n     * @zh 表格的滚动属性配置。`2.13.0` 版本增加字符型值的支持。`2.20.0` 版本增加 `minWidth`,`maxHeight` 的支持。\n     * @en Scrolling attribute configuration of the table. The `2.13.0` version adds support for character values. `2.20.0` version adds support for `minWidth`, `maxHeight`.\n     */\n    scroll: {\n      type: Object as PropType<{\n        x?: number | string;\n        y?: number | string;\n        minWidth?: number | string;\n        maxHeight?: number | string;\n      }>,\n    },\n    /**\n     * @zh 分页的属性配置\n     * @en Pagination properties configuration\n     */\n    pagination: {\n      type: [Boolean, Object] as PropType<boolean | PaginationProps>,\n      default: true,\n    },\n    /**\n     * @zh 分页选择器的位置\n     * @en The position of the page selector\n     * @values 'tl','top',tr','bl','bottom','br'\n     */\n    pagePosition: {\n      type: String as PropType<TablePagePosition>,\n      default: 'br',\n    },\n    /**\n     * @zh 树形表格的缩进距离\n     * @en The indentation distance of the tree table\n     */\n    indentSize: {\n      type: Number,\n      default: 16,\n    },\n    /**\n     * @zh 表格行 `key` 的取值字段\n     * @en Value field of table row `key`\n     */\n    rowKey: {\n      type: String,\n      default: 'key',\n    },\n    /**\n     * @zh 是否显示表头\n     * @en Whether to show the header\n     */\n    showHeader: {\n      type: Boolean,\n      default: true,\n    },\n    /**\n     * @zh 传递虚拟列表属性，传入此参数以开启虚拟滚动 [VirtualListProps](#VirtualListProps)\n     * @en Pass the virtual list attribute, pass in this parameter to turn on virtual scrolling [VirtualListProps](#VirtualListProps)\n     * @type VirtualListProps\n     */\n    virtualListProps: {\n      type: Object as PropType<VirtualListProps>,\n    },\n    /**\n     * @zh 单元格合并方法（索引从数据项开始计数）\n     * @en Cell merge method (The index starts counting from the data item)\n     * @version 2.10.0\n     */\n    spanMethod: {\n      type: Function as PropType<\n        (data: {\n          record: TableData;\n          column: TableColumnData | TableOperationColumn;\n          rowIndex: number;\n          columnIndex: number;\n        }) => { rowspan?: number; colspan?: number } | void\n      >,\n    },\n    /**\n     * @zh 是否让合并方法的索引包含所有\n     * @en Whether to make the index of the span method contain all\n     * @version 2.18.0\n     */\n    spanAll: {\n      type: Boolean,\n      default: false,\n    },\n    components: {\n      type: Object as PropType<TableComponents>,\n    },\n    /**\n     * @zh 数据懒加载函数，传入时开启懒加载功能\n     * @en Data lazy loading function, open the lazy loading function when it is passed in\n     * @version 2.13.0\n     */\n    loadMore: {\n      type: Function as PropType<\n        (record: TableData, done: (children?: TableData[]) => void) => void\n      >,\n    },\n    /**\n     * @zh 筛选图标是否左对齐\n     * @en Whether the filter icon is aligned to the left\n     * @version 2.13.0\n     */\n    filterIconAlignLeft: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 是否在子树为空时隐藏展开按钮\n     * @en Whether to hide expand button when subtree is empty\n     * @version 2.14.0\n     */\n    hideExpandButtonOnEmpty: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 表格行元素的类名。`2.34.0` 版本增加函数值支持\n     * @en The class name of the table row element. The `2.34.0` version adds support for function values.\n     * @version 2.16.0\n     */\n    rowClass: {\n      type: [String, Array, Object, Function] as PropType<\n        | string\n        | any[]\n        | Record<string, any>\n        | ((record: TableData, rowIndex: number) => any)\n      >,\n    },\n    /**\n     * @zh 表格拖拽排序的配置\n     * @en Table drag and drop sorting configuration\n     * @version 2.16.0\n     */\n    draggable: {\n      type: Object as PropType<TableDraggable>,\n    },\n    rowNumber: {\n      type: [Boolean, Object],\n    },\n    /**\n     * @zh 是否允许调整列宽\n     * @en Whether to allow the column width to be adjusted\n     * @version 2.16.0\n     */\n    columnResizable: {\n      type: Boolean,\n    },\n    /**\n     * @zh 显示表尾总结行\n     * @en Show footer summary row\n     * @version 2.21.0\n     */\n    summary: {\n      type: [Boolean, Function] as PropType<\n        | boolean\n        | ((params: {\n            columns: TableColumnData[];\n            data: TableData[];\n          }) => TableData[])\n      >,\n    },\n    /**\n     * @zh 总结行的首列文字\n     * @en The first column of text in the summary line\n     * @version 2.21.0\n     */\n    summaryText: {\n      type: String,\n      default: 'Summary',\n    },\n    /**\n     * @zh 总结行的单元格合并方法\n     * @en Cell Merge Method for Summarizing Rows\n     * @version 2.21.0\n     */\n    summarySpanMethod: {\n      type: Function as PropType<\n        (data: {\n          record: TableData;\n          column: TableColumnData | TableOperationColumn;\n          rowIndex: number;\n          columnIndex: number;\n        }) => { rowspan?: number; colspan?: number } | void\n      >,\n    },\n    /**\n     * @zh 已选择的行（受控模式）优先于 `rowSelection`\n     * @en Selected row (controlled mode) takes precedence over `rowSelection`\n     * @version 2.25.0\n     */\n    selectedKeys: {\n      type: Array as PropType<(string | number)[]>,\n    },\n    /**\n     * @zh 默认已选择的行（非受控模式）优先于 `rowSelection`\n     * @en The selected row by default (uncontrolled mode) takes precedence over `rowSelection`\n     * @version 2.25.0\n     */\n    defaultSelectedKeys: {\n      type: Array as PropType<(string | number)[]>,\n    },\n    /**\n     * @zh 显示的展开行、子树（受控模式）优先于 `expandable`\n     * @en Displayed Expanded Row, Subtree (Controlled Mode) takes precedence over `expandable`\n     * @version 2.25.0\n     */\n    expandedKeys: {\n      type: Array as PropType<(string | number)[]>,\n    },\n    /**\n     * @zh 默认显示的展开行、子树（非受控模式）优先于 `expandable`\n     * @en Expand row, Subtree displayed by default (Uncontrolled mode) takes precedence over `expandable`\n     * @version 2.25.0\n     */\n    defaultExpandedKeys: {\n      type: Array as PropType<(string | number)[]>,\n    },\n    /**\n     * @zh 是否默认展开所有的行\n     * @en Whether to expand all rows by default\n     * @version 2.25.0\n     */\n    defaultExpandAllRows: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 是否开启表头吸顶\n     * @en Whether to open the sticky header\n     * @version 2.30.0\n     */\n    stickyHeader: {\n      type: [Boolean, Number],\n      default: false,\n    },\n    /**\n     * @zh 是否开启虚拟滚动条\n     * @en Whether to enable virtual scroll bar\n     * @version 2.38.0\n     */\n    scrollbar: {\n      type: [Object, Boolean] as PropType<boolean | ScrollbarProps>,\n      default: true,\n    },\n    /**\n     * @zh 是否展示空子树\n     * @en Whether to display empty subtrees\n     * @version 2.51.0\n     */\n    showEmptyTree: {\n      type: Boolean,\n      default: false,\n    },\n  },\n  emits: {\n    'update:selectedKeys': (rowKeys: (string | number)[]) => true,\n    'update:expandedKeys': (rowKeys: (string | number)[]) => true,\n    /**\n     * @zh 点击展开行时触发\n     * @en Triggered when a row is clicked to expand\n     * @param {string | number} rowKey\n     * @param {TableData} record\n     */\n    'expand': (rowKey: string | number, record: TableData) => true,\n    /**\n     * @zh 已展开的数据行发生改变时触发\n     * @en Triggered when the expanded data row changes\n     * @param {(string | number)[]} rowKeys\n     */\n    'expandedChange': (rowKeys: (string | number)[]) => true,\n    /**\n     * @zh 点击行选择器时触发\n     * @en Triggered when the row selector is clicked\n     * @param {string | number[]} rowKeys\n     * @param {string | number} rowKey\n     * @param {TableData} record\n     */\n    'select': (\n      rowKeys: (string | number)[],\n      rowKey: string | number,\n      record: TableData\n    ) => true,\n    /**\n     * @zh 点击全选选择器时触发\n     * @en Triggered when the select all selector is clicked\n     * @param {boolean} checked\n     */\n    'selectAll': (checked: boolean) => true,\n    /**\n     * @zh 已选择的数据行发生改变时触发\n     * @en Triggered when the selected data row changes\n     * @param {(string | number)[]} rowKeys\n     */\n    'selectionChange': (rowKeys: (string | number)[]) => true,\n    /**\n     * @zh 排序规则发生改变时触发\n     * @en Triggered when the collation changes\n     * @param {string} dataIndex\n     * @param {string} direction\n     */\n    'sorterChange': (dataIndex: string, direction: string) => true,\n    /**\n     * @zh 过滤选项发生改变时触发\n     * @en Triggered when the filter options are changed\n     * @param {string} dataIndex\n     * @param {string[]} filteredValues\n     */\n    'filterChange': (dataIndex: string, filteredValues: string[]) => true,\n    /**\n     * @zh 表格分页发生改变时触发\n     * @en Triggered when the table pagination changes\n     * @param {number} page\n     */\n    'pageChange': (page: number) => true,\n    /**\n     * @zh 表格每页数据数量发生改变时触发\n     * @en Triggered when the number of data per page of the table changes\n     * @param {number} pageSize\n     */\n    'pageSizeChange': (pageSize: number) => true,\n    /**\n     * @zh 表格数据发生变化时触发\n     * @en Triggered when table data changes\n     * @param {TableData[]} data\n     * @param {TableChangeExtra} extra\n     * @param {TableData[]} currentData\n     * @version 2.40.0 增加 currentData\n     */\n    'change': (\n      data: TableData[],\n      extra: TableChangeExtra,\n      currentData: TableData[]\n    ) => true,\n    /**\n     * @zh 单元格 hover 进入时触发\n     * @en Triggered when hovering into a cell\n     * @param {TableData} record\n     * @param {TableColumnData} column\n     * @param {Event} ev\n     */\n    'cellMouseEnter': (record: TableData, column: TableColumnData, ev: Event) =>\n      true,\n    /**\n     * @zh 单元格 hover 退出时触发\n     * @en Triggered when hovering out of a cell\n     * @param {TableData} record\n     * @param {TableColumnData} column\n     * @param {Event} ev\n     */\n    'cellMouseLeave': (record: TableData, column: TableColumnData, ev: Event) =>\n      true,\n    /**\n     * @zh 点击单元格时触发\n     * @en Triggered when a cell is clicked\n     * @param {TableData} record\n     * @param {TableColumnData} column\n     * @param {Event} ev\n     */\n    'cellClick': (record: TableData, column: TableColumnData, ev: Event) =>\n      true,\n    /**\n     * @zh 点击行数据时触发\n     * @en Triggered when row data is clicked\n     * @param {TableData} record\n     * @param {Event} ev\n     */\n    'rowClick': (record: TableData, ev: Event) => true,\n    /**\n     * @zh 点击表头数据时触发\n     * @en Triggered when the header data is clicked\n     * @param {TableColumnData} column\n     * @param {Event} ev\n     */\n    'headerClick': (column: TableColumnData, ev: Event) => true,\n    /**\n     * @zh 调整列宽时触发\n     * @en Triggered when column width is adjusted\n     * @param {string} dataIndex\n     * @param {number} width\n     * @version 2.28.0\n     */\n    'columnResize': (dataIndex: string, width: number) => true,\n    /**\n     * @zh 双击行数据时触发\n     * @en Triggered when row data is double clicked\n     * @param {TableData} record\n     * @param {Event} ev\n     */\n    'rowDblclick': (record: TableData, ev: Event) => true,\n    /**\n     * @zh 双击单元格时触发\n     * @en Triggered when a cell is double clicked\n     * @param {TableData} record\n     * @param {TableColumnData} column\n     * @param {Event} ev\n     */\n    'cellDblclick': (record: TableData, column: TableColumnData, ev: Event) =>\n      true,\n    /**\n     * @zh 右击行数据时触发\n     * @en Triggered when row data is right clicked\n     * @param {TableData} record\n     * @param {Event} ev\n     */\n    'rowContextmenu': (record: TableData, ev: Event) => true,\n    /**\n     * @zh 右击单元格时触发\n     * @en Triggered when a cell is right clicked\n     * @param {TableData} record\n     * @param {TableColumnData} column\n     * @param {Event} ev\n     */\n    'cellContextmenu': (\n      record: TableData,\n      column: TableColumnData,\n      ev: Event\n    ) => true,\n  },\n  /**\n   * @zh 表格列定义。启用时会屏蔽 columns 属性\n   * @en Table column definitions. When enabled, the columns attribute is masked\n   * @slot columns\n   */\n  /**\n   * @zh 展开行图标\n   * @en Expand row icon\n   * @slot expand-icon\n   * @binding {boolean} expanded\n   * @binding {TableData} record\n   */\n  /**\n   * @zh 展开行内容\n   * @en Expand row content\n   * @slot expand-row\n   * @binding {TableData} record\n   */\n  /**\n   * @zh 表格底部\n   * @en Table Footer\n   * @slot footer\n   */\n  /**\n   * @zh 拖拽锚点图标\n   * @en Drag handle icon\n   * @slot drag-handle-icon\n   * @version 2.16.0\n   */\n  /**\n   * @zh 自定义 tbody 元素\n   * @en Custom tbody element\n   * @slot tbody\n   * @version 2.16.0\n   */\n  /**\n   * @zh 自定义 tr 元素\n   * @en Custom tr element\n   * @slot tr\n   * @binding {TableData} record\n   * @binding {number} rowIndex\n   * @version 2.16.0\n   */\n  /**\n   * @zh 自定义 td 元素\n   * @en Custom td element\n   * @slot td\n   * @binding {TableColumnData} column\n   * @binding {TableData} record\n   * @binding {number} rowIndex\n   * @version 2.16.0\n   */\n  /**\n   * @zh 分页器左侧内容\n   * @en Content on the left side of the pagination\n   * @slot pagination-left\n   * @version 2.18.0\n   */\n  /**\n   * @zh 分页器右侧内容\n   * @en Content on the right side of the pagination\n   * @slot pagination-right\n   * @version 2.18.0\n   */\n  /**\n   * @zh 总结行\n   * @en Content on the right side of the pagination\n   * @slot summary-cell\n   * @binding {TableColumnData} column\n   * @binding {TableData} record\n   * @binding {number} rowIndex\n   * @version 2.23.0\n   */\n  /**\n   * @zh 空白展示\n   * @en Empty\n   * @slot empty\n   */\n  /**\n   * @zh 自定义 thead 元素\n   * @en Custom thead element\n   * @slot thead\n   * @version 2.26.0\n   */\n  /**\n   * @zh 自定义 th 元素\n   * @en Custom th element\n   * @slot th\n   * @binding {TableColumnData} column\n   * @version 2.26.0\n   */\n  setup(props, { emit, slots }) {\n    const {\n      columns,\n      rowKey,\n      rowSelection,\n      expandable,\n      loadMore,\n      filterIconAlignLeft,\n      selectedKeys,\n      defaultSelectedKeys,\n      expandedKeys,\n      defaultExpandedKeys,\n      defaultExpandAllRows,\n      spanMethod,\n      draggable,\n      summarySpanMethod,\n      scrollbar,\n      showEmptyTree,\n    } = toRefs(props);\n    const prefixCls = getPrefixCls('table');\n    const configCtx = inject(configProviderInjectionKey, undefined);\n    const bordered = computed(() => {\n      if (isObject(props.bordered)) {\n        return { ...DEFAULT_BORDERED, ...props.bordered };\n      }\n      return { ...DEFAULT_BORDERED, wrapper: props.bordered };\n    });\n    const { children, components } = useChildrenComponents('TableColumn');\n    const checkStrictly = computed(\n      () => rowSelection.value?.checkStrictly ?? true\n    );\n\n    const { displayScrollbar, scrollbarProps } = useScrollbar(scrollbar);\n\n    // whether to scroll\n    const isScroll = computed(() => {\n      const x = Boolean(props.scroll?.x || props.scroll?.minWidth);\n      const y = Boolean(props.scroll?.y || props.scroll?.maxHeight);\n      return { x, y };\n    });\n\n    // const theadRef = ref<HTMLElement>();\n    const summaryRef = ref<HTMLElement>();\n    const thRefs = ref<Record<string, HTMLElement>>({});\n\n    const { componentRef: contentComRef, elementRef: contentRef } =\n      useComponentRef('containerRef');\n    const { componentRef: tbodyComRef, elementRef: tbodyRef } =\n      useComponentRef('containerRef');\n    const { componentRef: virtualComRef, elementRef: virtualRef } =\n      useComponentRef('viewportRef');\n    const { componentRef: theadComRef, elementRef: theadRef } =\n      useComponentRef('containerRef');\n    const containerElement = computed(() => {\n      if (splitTable.value) {\n        if (isVirtualList.value) {\n          return virtualRef.value;\n        }\n        return tbodyRef.value;\n      }\n      return contentRef.value;\n    });\n\n    const splitTable = computed(\n      () =>\n        isScroll.value.y ||\n        props.stickyHeader ||\n        isVirtualList.value ||\n        (isScroll.value.x && flattenData.value.length === 0)\n    );\n\n    const slotColumnMap = reactive(new Map<number, TableColumnData>());\n    const slotColumns = ref<TableColumnData[]>();\n\n    watch([components, slotColumnMap], ([components, slotColumnMap]) => {\n      if (components.length > 0) {\n        const columns: TableColumnData[] = [];\n        components.forEach((id) => {\n          const column = slotColumnMap.get(id);\n          if (column) columns.push(column);\n        });\n        slotColumns.value = columns;\n      } else {\n        slotColumns.value = undefined;\n      }\n    });\n\n    // 拆解分组后的数据表头信息\n    const dataColumnMap = new Map<string, TableColumnData>();\n    const dataColumns = ref<TableColumnData[]>([]);\n    const groupColumns = ref<TableColumnData[][]>([]);\n\n    const { resizingColumn, columnWidth, handleThMouseDown } = useColumnResize(\n      thRefs,\n      emit\n    );\n\n    watch(\n      [columns, slotColumns, columnWidth],\n      ([columns, slotColumns]) => {\n        const result = getGroupColumns(\n          slotColumns ?? columns ?? [],\n          dataColumnMap,\n          columnWidth\n        );\n        dataColumns.value = result.dataColumns;\n        groupColumns.value = result.groupColumns;\n      },\n      { immediate: true, deep: true }\n    );\n\n    const isPaginationTop = computed(() =>\n      ['tl', 'top', 'tr'].includes(props.pagePosition)\n    );\n\n    const hasLeftFixedColumn = ref(false);\n    const hasRightFixedColumn = ref(false);\n    const hasLeftFixedDataColumns = ref(false);\n\n    watchEffect(() => {\n      let _hasLeftFixedColumn = false;\n      let _hasRightFixedColumn = false;\n      let _hasLeftFixedDataColumns = false;\n      if (\n        props.rowSelection?.fixed ||\n        props.expandable?.fixed ||\n        props.draggable?.fixed\n      ) {\n        _hasLeftFixedColumn = true;\n      }\n      for (const column of dataColumns.value) {\n        if (column.fixed === 'left') {\n          _hasLeftFixedColumn = true;\n          _hasLeftFixedDataColumns = true;\n        } else if (column.fixed === 'right') {\n          _hasRightFixedColumn = true;\n        }\n      }\n      if (_hasLeftFixedColumn !== hasLeftFixedColumn.value) {\n        hasLeftFixedColumn.value = _hasLeftFixedColumn;\n      }\n      if (_hasRightFixedColumn !== hasRightFixedColumn.value) {\n        hasRightFixedColumn.value = _hasRightFixedColumn;\n      }\n      if (_hasLeftFixedDataColumns !== hasLeftFixedDataColumns.value) {\n        hasLeftFixedDataColumns.value = _hasLeftFixedDataColumns;\n      }\n    });\n\n    const hasEllipsis = computed(() => {\n      for (const col of dataColumns.value) {\n        if (col.ellipsis) {\n          return true;\n        }\n      }\n      return false;\n    });\n\n    const handleChange = (\n      type: 'pagination' | 'sorter' | 'filter' | 'drag'\n    ) => {\n      const extra: TableChangeExtra = {\n        type,\n        page: page.value,\n        pageSize: pageSize.value,\n        sorter: computedSorter.value,\n        filters: computedFilters.value,\n        dragTarget: type === 'drag' ? dragState.data : undefined,\n      };\n      emit('change', flattenRawData.value, extra, sortedData.value);\n    };\n\n    const handleFilterChange = (\n      dataIndex: string,\n      filteredValues: string[]\n    ) => {\n      _filters.value = {\n        ...computedFilters.value,\n        [dataIndex]: filteredValues,\n      };\n\n      emit('filterChange', dataIndex, filteredValues);\n      handleChange('filter');\n    };\n\n    const handleSorterChange = (\n      dataIndex: string,\n      direction: 'ascend' | 'descend' | ''\n    ) => {\n      _sorter.value = direction\n        ? {\n            field: dataIndex,\n            direction,\n          }\n        : undefined;\n\n      emit('sorterChange', dataIndex, direction);\n      handleChange('sorter');\n    };\n\n    const { _filters, computedFilters, resetFilters, clearFilters } = useFilter(\n      {\n        columns: dataColumns,\n        onFilterChange: handleFilterChange,\n      }\n    );\n    const { _sorter, computedSorter, resetSorters, clearSorters } = useSorter({\n      columns: dataColumns,\n      onSorterChange: handleSorterChange,\n    });\n\n    const disabledKeys = new Set();\n\n    const allRowKeys = computed(() => {\n      const allRowKeys: BaseType[] = [];\n      disabledKeys.clear();\n      const travelData = (data: TableData[]) => {\n        if (isArray(data) && data.length > 0) {\n          for (const record of data) {\n            allRowKeys.push(record[rowKey.value]);\n            if (record.disabled) {\n              disabledKeys.add(record[rowKey.value]);\n            }\n            if (record.children) {\n              travelData(record.children);\n            }\n          }\n        }\n      };\n\n      travelData(props.data);\n\n      return allRowKeys;\n    });\n\n    const currentAllRowKeys = computed(() => {\n      const keys: BaseType[] = [];\n      const travel = (data: TableDataWithRaw[]) => {\n        for (const record of data) {\n          keys.push(record.key);\n          if (record.children) {\n            travel(record.children);\n          }\n        }\n      };\n      travel(flattenData.value);\n\n      return keys;\n    });\n\n    const currentAllEnabledRowKeys = computed(() => {\n      const keys: BaseType[] = [];\n\n      const travel = (data: TableDataWithRaw[]) => {\n        for (const record of data) {\n          if (!record.disabled) {\n            keys.push(record.key);\n          }\n          if (record.children) {\n            travel(record.children);\n          }\n        }\n      };\n      travel(flattenData.value);\n\n      return keys;\n    });\n\n    const {\n      isRadio,\n      selectedRowKeys,\n      currentSelectedRowKeys,\n      handleSelect,\n      handleSelectAllLeafs,\n      handleSelectAll,\n      select,\n      selectAll,\n      clearSelected,\n    } = useRowSelection({\n      selectedKeys,\n      defaultSelectedKeys,\n      rowSelection,\n      currentAllRowKeys,\n      currentAllEnabledRowKeys,\n      emit,\n    });\n\n    const { expandedRowKeys, handleExpand, expand, expandAll } = useExpand({\n      expandedKeys,\n      defaultExpandedKeys,\n      defaultExpandAllRows,\n      expandable,\n      allRowKeys,\n      emit,\n    });\n\n    const lazyLoadData = reactive<Record<string, TableData[]>>({});\n\n    const addLazyLoadData = (\n      children: TableData[] | undefined,\n      record: TableDataWithRaw\n    ) => {\n      if (children) {\n        lazyLoadData[record.key] = children;\n      }\n    };\n\n    const isValidRecord = (record: TableDataWithRaw) => {\n      for (const field of Object.keys(computedFilters.value)) {\n        const filteredValues = computedFilters.value[field];\n        const column = dataColumnMap.get(field);\n        if (column && column.filterable?.filter && filteredValues.length > 0) {\n          const result = column.filterable?.filter(filteredValues, record.raw);\n          if (!result) {\n            return result;\n          }\n        }\n      }\n      return true;\n    };\n\n    const {\n      dragType,\n      dragState,\n      handleDragStart,\n      handleDragEnter,\n      handleDragLeave,\n      handleDragover,\n      handleDragEnd,\n      handleDrop,\n    } = useDrag(draggable);\n\n    const processedData = computed(() => {\n      const travel = (data: TableData[]) => {\n        const result: TableDataWithRaw[] = [];\n\n        for (const _record of data) {\n          const record: TableDataWithRaw = {\n            raw: _record,\n            key: _record[props.rowKey],\n            disabled: _record.disabled,\n            expand: _record.expand,\n            isLeaf: _record.isLeaf,\n          };\n          if (_record.children) {\n            record.isLeaf = false;\n            record.children = travel(_record.children);\n          } else if (props.loadMore && !_record.isLeaf) {\n            record.isLeaf = false;\n            if (lazyLoadData[record.key]) {\n              record.children = travel(lazyLoadData[record.key]);\n            }\n          } else {\n            record.isLeaf = true;\n          }\n          record.hasSubtree = Boolean(\n            record.children\n              ? props.hideExpandButtonOnEmpty\n                ? record.children.length > 0\n                : true\n              : props.loadMore && !record.isLeaf\n          );\n\n          result.push(record);\n        }\n        return result;\n      };\n\n      return travel(props.data ?? []);\n    });\n\n    const validData = computed(() => {\n      const travel = (data: TableDataWithRaw[]) =>\n        data.filter((record) => {\n          if (isValidRecord(record)) {\n            if (record.children) {\n              record.children = travel(record.children);\n            }\n            return true;\n          }\n          return false;\n        });\n\n      return Object.keys(computedFilters.value).length > 0\n        ? travel(processedData.value)\n        : processedData.value;\n    });\n\n    const sortedData = computed(() => {\n      const data = mapArrayWithChildren(validData.value);\n      if (data.length > 0) {\n        if (computedSorter.value?.field) {\n          const column = dataColumnMap.get(computedSorter.value.field);\n          if (column && column.sortable?.sorter !== true) {\n            const { field, direction } = computedSorter.value;\n            data.sort((a, b) => {\n              const valueA = getValueByPath(a.raw, field);\n              const valueB = getValueByPath(b.raw, field);\n\n              if (\n                column.sortable?.sorter &&\n                isFunction(column.sortable.sorter)\n              ) {\n                return column.sortable.sorter(a.raw, b.raw, {\n                  dataIndex: field,\n                  direction,\n                });\n              }\n\n              const result = valueA > valueB ? 1 : -1;\n              return direction === 'descend' ? -result : result;\n            });\n          }\n        }\n\n        const { sourcePath, targetPath } = dragState;\n        // drag row to another row\n        if (\n          dragState.dragging &&\n          targetPath.length &&\n          targetPath.toString() !== sourcePath.toString()\n        ) {\n          // same level drag\n          if (\n            sourcePath.length === targetPath.length &&\n            sourcePath.slice(0, -1).toString() ===\n              targetPath.slice(0, -1).toString()\n          ) {\n            let children = data;\n            for (let i = 0; i < sourcePath.length; i++) {\n              const sourceIndex = sourcePath[i];\n              const isLast = i >= sourcePath.length - 1;\n              if (isLast) {\n                const sourceChild = children[sourceIndex];\n                const targetIndex = targetPath[i];\n                if (targetIndex > sourceIndex) {\n                  // move down\n                  children.splice(targetIndex + 1, 0, sourceChild);\n                  children.splice(sourceIndex, 1);\n                } else {\n                  // move up\n                  children.splice(targetIndex, 0, sourceChild);\n                  children.splice(sourceIndex + 1, 1);\n                }\n              } else {\n                children = children[sourceIndex].children ?? [];\n              }\n            }\n          }\n        }\n      }\n      return data;\n    });\n\n    const { page, pageSize, handlePageChange, handlePageSizeChange } =\n      usePagination(props, emit);\n\n    const onlyCurrent = computed(\n      () => rowSelection.value?.onlyCurrent ?? false\n    );\n\n    watch(page, (cur, pre) => {\n      if (cur !== pre && onlyCurrent.value) {\n        clearSelected();\n      }\n    });\n\n    const flattenData = computed(() => {\n      if (props.pagination && sortedData.value.length > pageSize.value) {\n        return sortedData.value.slice(\n          (page.value - 1) * pageSize.value,\n          page.value * pageSize.value\n        );\n      }\n      return sortedData.value;\n    });\n\n    const flattenRawData = computed(() => mapRawTableData(flattenData.value));\n\n    const getSummaryData = () => {\n      return dataColumns.value.reduce((per, column, index) => {\n        if (column.dataIndex) {\n          if (index === 0) {\n            setValueByPath(per, column.dataIndex, props.summaryText, {\n              addPath: true,\n            });\n          } else {\n            let count = 0;\n            let isNotNumber = false;\n            flattenData.value.forEach((data) => {\n              if (column.dataIndex) {\n                const _number = getValueByPath(data.raw, column.dataIndex);\n                if (isNumber(_number)) {\n                  count += _number;\n                } else if (!isUndefined(_number) && !isNull(_number)) {\n                  isNotNumber = true;\n                }\n              }\n            });\n            setValueByPath(per, column.dataIndex, isNotNumber ? '' : count, {\n              addPath: true,\n            });\n          }\n        }\n\n        return per;\n      }, {} as Record<string, any>);\n    };\n\n    const getTableDataWithRaw = (data?: TableData[]): TableDataWithRaw[] => {\n      if (data && data.length > 0) {\n        return data.map((raw) => {\n          return {\n            raw,\n            key: raw[props.rowKey],\n          };\n        });\n      }\n      return [];\n    };\n\n    const summaryData = computed(() => {\n      if (props.summary) {\n        if (isFunction(props.summary)) {\n          return getTableDataWithRaw(\n            props.summary({\n              columns: dataColumns.value,\n              data: flattenRawData.value,\n            })\n          );\n        }\n        return getTableDataWithRaw([getSummaryData()]);\n      }\n      return [];\n    });\n\n    const containerScrollLeft = ref(0);\n\n    const alignLeft = ref(true);\n    const alignRight = ref(true);\n\n    const setAlignPosition = () => {\n      let _alignLeft = true;\n      let _alignRight = true;\n\n      const scrollContainer = containerElement.value;\n\n      if (scrollContainer) {\n        _alignLeft = containerScrollLeft.value === 0;\n        _alignRight =\n          Math.ceil(containerScrollLeft.value + scrollContainer.offsetWidth) >=\n          scrollContainer.scrollWidth;\n      }\n\n      if (_alignLeft !== alignLeft.value) {\n        alignLeft.value = _alignLeft;\n      }\n      if (_alignRight !== alignRight.value) {\n        alignRight.value = _alignRight;\n      }\n    };\n\n    const getTableScrollCls = () => {\n      if (alignLeft.value && alignRight.value) {\n        return `${prefixCls}-scroll-position-both`;\n      }\n      if (alignLeft.value) {\n        return `${prefixCls}-scroll-position-left`;\n      }\n      if (alignRight.value) {\n        return `${prefixCls}-scroll-position-right`;\n      }\n      return `${prefixCls}-scroll-position-middle`;\n    };\n\n    const getTableFixedCls = () => {\n      const cls: string[] = [];\n      if (hasLeftFixedColumn.value) {\n        cls.push(`${prefixCls}-has-fixed-col-left`);\n      }\n      if (hasRightFixedColumn.value) {\n        cls.push(`${prefixCls}-has-fixed-col-right`);\n      }\n      return cls;\n    };\n\n    const handleScroll = (e: Event) => {\n      if (\n        (e.target as HTMLDivElement).scrollLeft !== containerScrollLeft.value\n      ) {\n        containerScrollLeft.value = (e.target as HTMLDivElement).scrollLeft;\n      }\n      setAlignPosition();\n    };\n\n    const onTbodyScroll = (e: Event) => {\n      handleScroll(e);\n      const { scrollLeft } = e.target as HTMLDivElement;\n      if (theadRef.value) {\n        theadRef.value.scrollLeft = scrollLeft;\n      }\n      if (summaryRef.value) {\n        summaryRef.value.scrollLeft = scrollLeft;\n      }\n    };\n\n    const handleRowClick = (record: TableDataWithRaw, ev: Event) => {\n      emit('rowClick', record.raw, ev);\n    };\n\n    const handleRowDblclick = (record: TableDataWithRaw, ev: Event) => {\n      emit('rowDblclick', record.raw, ev);\n    };\n\n    const handleRowContextMenu = (record: TableDataWithRaw, ev: Event) => {\n      emit('rowContextmenu', record.raw, ev);\n    };\n\n    const handleCellClick = (\n      record: TableDataWithRaw,\n      column: TableColumnData,\n      ev: Event\n    ) => {\n      emit('cellClick', record.raw, column, ev);\n    };\n\n    const handleCellMouseEnter = debounce(\n      (record: TableDataWithRaw, column: TableColumnData, ev: Event) => {\n        emit('cellMouseEnter', record.raw, column, ev);\n      },\n      30\n    );\n\n    const handleCellMouseLeave = debounce(\n      (record: TableDataWithRaw, column: TableColumnData, ev: Event) => {\n        emit('cellMouseLeave', record.raw, column, ev);\n      },\n      30\n    );\n\n    const handleCellDblclick = (\n      record: TableDataWithRaw,\n      column: TableColumnData,\n      ev: Event\n    ) => {\n      emit('cellDblclick', record.raw, column, ev);\n    };\n\n    const handleCellContextmenu = (\n      record: TableDataWithRaw,\n      column: TableColumnData,\n      ev: Event\n    ) => {\n      emit('cellContextmenu', record.raw, column, ev);\n    };\n\n    const handleHeaderClick = (column: TableColumnData, ev: Event) => {\n      emit('headerClick', column, ev);\n    };\n\n    const operations = computed(() => {\n      const operations: TableOperationColumn[] = [];\n      const hasFixedColumn =\n        hasLeftFixedColumn.value || hasRightFixedColumn.value;\n      let dragHandle: TableOperationColumn | undefined;\n      let expand: TableOperationColumn | undefined;\n      let selection: TableOperationColumn | undefined;\n\n      if (props.draggable?.type === 'handle') {\n        dragHandle = {\n          name: 'drag-handle',\n          title: props.draggable.title,\n          width: props.draggable.width,\n          fixed: props.draggable.fixed || hasFixedColumn,\n        };\n        operations.push(dragHandle);\n      }\n\n      if (props.expandable) {\n        expand = {\n          name: 'expand',\n          title: props.expandable.title,\n          width: props.expandable.width,\n          fixed: props.expandable.fixed || hasFixedColumn,\n        };\n        operations.push(expand);\n      }\n\n      if (props.rowSelection) {\n        selection = {\n          name:\n            props.rowSelection.type === 'radio'\n              ? 'selection-radio'\n              : 'selection-checkbox',\n          title: props.rowSelection.title,\n          width: props.rowSelection.width,\n          fixed: props.rowSelection.fixed || hasFixedColumn,\n        };\n        operations.push(selection);\n      }\n      if (\n        !hasLeftFixedDataColumns.value &&\n        operations.length > 0 &&\n        operations[operations.length - 1].fixed\n      ) {\n        operations[operations.length - 1].isLastLeftFixed = true;\n      }\n      const operationsFn = props.components?.operations;\n\n      return isFunction(operationsFn)\n        ? operationsFn({ dragHandle, expand, selection })\n        : operations;\n    });\n\n    const headerStyle = computed(() => {\n      if (isScroll.value.x) {\n        const style: CSSProperties = {\n          width: isNumber(props.scroll?.x)\n            ? `${props.scroll?.x}px`\n            : props.scroll?.x,\n        };\n        if (props.scroll?.minWidth) {\n          style.minWidth = isNumber(props.scroll.minWidth)\n            ? `${props.scroll.minWidth}px`\n            : props.scroll.minWidth;\n        }\n        return style;\n      }\n      return undefined;\n    });\n\n    const contentStyle = computed(() => {\n      if (isScroll.value.x && flattenData.value.length > 0) {\n        const style: CSSProperties = {\n          width: isNumber(props.scroll?.x)\n            ? `${props.scroll?.x}px`\n            : props.scroll?.x,\n        };\n        if (props.scroll?.minWidth) {\n          style.minWidth = isNumber(props.scroll.minWidth)\n            ? `${props.scroll.minWidth}px`\n            : props.scroll.minWidth;\n        }\n        return style;\n      }\n      return undefined;\n    });\n\n    const addColumn = (id: number, column: TableColumnData) => {\n      slotColumnMap.set(id, column);\n    };\n\n    const removeColumn = (id: number) => {\n      slotColumnMap.delete(id);\n    };\n\n    provide(\n      tableInjectionKey,\n      reactive({\n        loadMore,\n        addLazyLoadData,\n        slots,\n        sorter: computedSorter,\n        filters: computedFilters,\n        filterIconAlignLeft,\n        resizingColumn,\n        checkStrictly,\n        currentAllEnabledRowKeys,\n        currentSelectedRowKeys,\n        addColumn,\n        removeColumn,\n        onSelectAll: handleSelectAll,\n        onSelect: handleSelect,\n        onSelectAllLeafs: handleSelectAllLeafs,\n        onSorterChange: handleSorterChange,\n        onFilterChange: handleFilterChange,\n        onThMouseDown: handleThMouseDown,\n      })\n    );\n\n    const cls = computed(() => [\n      prefixCls,\n      `${prefixCls}-size-${props.size}`,\n      {\n        [`${prefixCls}-border`]: bordered.value.wrapper,\n        [`${prefixCls}-border-cell`]: bordered.value.cell,\n        [`${prefixCls}-border-header-cell`]:\n          !bordered.value.cell && bordered.value.headerCell,\n        [`${prefixCls}-border-body-cell`]:\n          !bordered.value.cell && bordered.value.bodyCell,\n        [`${prefixCls}-stripe`]: props.stripe,\n        [`${prefixCls}-hover`]: props.hoverable,\n        [`${prefixCls}-dragging`]: dragState.dragging,\n        [`${prefixCls}-type-selection`]: Boolean(props.rowSelection),\n        [`${prefixCls}-empty`]: props.data && flattenData.value.length === 0,\n        [`${prefixCls}-layout-fixed`]:\n          props.tableLayoutFixed ||\n          isScroll.value.x ||\n          splitTable.value ||\n          hasEllipsis.value,\n      },\n    ]);\n\n    const paginationCls = computed(() => [\n      `${prefixCls}-pagination`,\n      {\n        [`${prefixCls}-pagination-left`]:\n          props.pagePosition === 'tl' || props.pagePosition === 'bl',\n        [`${prefixCls}-pagination-center`]:\n          props.pagePosition === 'top' || props.pagePosition === 'bottom',\n        [`${prefixCls}-pagination-right`]:\n          props.pagePosition === 'tr' || props.pagePosition === 'br',\n        [`${prefixCls}-pagination-top`]: isPaginationTop.value,\n      },\n    ]);\n\n    const tableCls = computed(() => {\n      const cls = getTableFixedCls();\n\n      if (isScroll.value.x) {\n        cls.push(getTableScrollCls());\n      }\n\n      if (splitTable.value) {\n        cls.push(`${prefixCls}-scroll-y`);\n      }\n\n      return cls;\n    });\n\n    const isVirtualList = computed(() => Boolean(props.virtualListProps));\n\n    const thWidth = ref<Record<string, number>>({});\n\n    const getThWidth = () => {\n      const width: Record<string, number> = {};\n      for (const key of Object.keys(thRefs.value)) {\n        width[key] = thRefs.value[key].offsetWidth;\n      }\n      thWidth.value = width;\n    };\n\n    const hasScrollBar = ref(false);\n\n    const isTbodyHasScrollBar = () => {\n      if (tbodyRef.value) {\n        return tbodyRef.value.offsetWidth > tbodyRef.value.clientWidth;\n      }\n      return false;\n    };\n\n    const handleTbodyResize = () => {\n      const _hasScrollBar = isTbodyHasScrollBar();\n      if (hasScrollBar.value !== _hasScrollBar) {\n        hasScrollBar.value = _hasScrollBar;\n      }\n      setAlignPosition();\n      getThWidth();\n    };\n\n    onMounted(() => {\n      hasScrollBar.value = isTbodyHasScrollBar();\n      getThWidth();\n    });\n\n    const spinProps = computed(() =>\n      isObject(props.loading) ? props.loading : { loading: props.loading }\n    );\n\n    const renderEmpty = () => {\n      return (\n        <Tr empty>\n          <Td colSpan={dataColumns.value.length + operations.value.length}>\n            {slots.empty?.() ??\n              configCtx?.slots.empty?.({ component: 'table' }) ?? <Empty />}\n          </Td>\n        </Tr>\n      );\n    };\n\n    const renderExpandContent = (record: TableDataWithRaw) => {\n      if (record.expand) {\n        return isFunction(record.expand) ? record.expand() : record.expand;\n      }\n      if (slots['expand-row']) {\n        return slots['expand-row']({ record: record.raw });\n      }\n      if (props.expandable?.expandedRowRender) {\n        return props.expandable.expandedRowRender(record.raw);\n      }\n\n      return undefined;\n    };\n\n    const allColumns = computed(() =>\n      ([] as (TableColumnData | TableOperationColumn)[]).concat(\n        operations.value,\n        dataColumns.value\n      )\n    );\n\n    const spanColumns = computed(() =>\n      props.spanAll ? allColumns.value : dataColumns.value\n    );\n\n    const { tableSpan, removedCells } = useSpan({\n      spanMethod,\n      data: flattenData,\n      columns: spanColumns,\n    });\n\n    const { tableSpan: tableSummarySpan, removedCells: removedSummaryCells } =\n      useSpan({\n        spanMethod: summarySpanMethod,\n        data: summaryData,\n        columns: allColumns,\n      });\n\n    const getVirtualColumnStyle = (name: string | undefined) => {\n      if (!isVirtualList.value || !name || !thWidth.value[name]) {\n        return undefined;\n      }\n\n      return { width: `${thWidth.value[name]}px` };\n    };\n\n    const renderSummaryRow = (record: TableDataWithRaw, rowIndex: number) => {\n      return (\n        <Tr\n          v-slots={{\n            tr: slots.tr,\n          }}\n          key={`table-summary-${rowIndex}`}\n          class={[\n            `${prefixCls}-tr-summary`,\n            isFunction(props.rowClass)\n              ? props.rowClass(record.raw, rowIndex)\n              : props.rowClass,\n          ]}\n          // @ts-ignore\n          onClick={(ev: Event) => handleRowClick(record, ev)}\n        >\n          {operations.value.map((operation, index) => {\n            const cellId = `${rowIndex}-${index}-${record.key}`;\n            const [rowspan, colspan] = tableSummarySpan.value[cellId] ?? [1, 1];\n\n            if (removedSummaryCells.value.includes(cellId)) {\n              return null;\n            }\n\n            const style = getVirtualColumnStyle(operation.name);\n\n            return (\n              <OperationTd\n                style={style}\n                operationColumn={operation}\n                operations={operations.value}\n                record={record}\n                rowSpan={rowspan}\n                colSpan={colspan}\n                summary\n              />\n            );\n          })}\n          {dataColumns.value.map((column, index) => {\n            const cellId = `${rowIndex}-${operations.value.length + index}-${\n              record.key\n            }`;\n            const [rowspan, colspan] = tableSummarySpan.value[cellId] ?? [1, 1];\n\n            if (removedSummaryCells.value.includes(cellId)) {\n              return null;\n            }\n\n            const style = getVirtualColumnStyle(column.dataIndex);\n\n            return (\n              <Td\n                v-slots={{\n                  td: slots.td,\n                  cell: slots['summary-cell'],\n                }}\n                key={`td-${cellId}`}\n                style={style}\n                rowIndex={rowIndex}\n                record={record}\n                column={column}\n                operations={operations.value}\n                dataColumns={dataColumns.value}\n                rowSpan={rowspan}\n                colSpan={colspan}\n                summary\n                // @ts-ignore\n                onClick={(ev: Event) => handleCellClick(record, column, ev)}\n                onDblclick={(ev: Event) =>\n                  handleCellDblclick(record, column, ev)\n                }\n                onMouseenter={(ev: Event) =>\n                  handleCellMouseEnter(record, column, ev)\n                }\n                onMouseleave={(ev: Event) =>\n                  handleCellMouseLeave(record, column, ev)\n                }\n                onContextmenu={(ev: Event) =>\n                  handleCellContextmenu(record, column, ev)\n                }\n              />\n            );\n          })}\n        </Tr>\n      );\n    };\n\n    const renderSummary = () => {\n      if (summaryData.value && summaryData.value.length > 0) {\n        return (\n          <tfoot>\n            {summaryData.value.map((data, index) =>\n              renderSummaryRow(data, index)\n            )}\n          </tfoot>\n        );\n      }\n      return null;\n    };\n\n    const renderExpandBtn = (\n      record: TableDataWithRaw,\n      stopPropagation = true\n    ) => {\n      const currentKey = record.key;\n      const expanded = expandedRowKeys.value.includes(currentKey);\n\n      return (\n        <button\n          type=\"button\"\n          class={`${prefixCls}-expand-btn`}\n          onClick={(ev: Event) => {\n            handleExpand(currentKey, record.raw);\n            if (stopPropagation) {\n              ev.stopPropagation();\n            }\n          }}\n        >\n          {slots['expand-icon']?.({ expanded, record: record.raw }) ??\n            props.expandable?.icon?.(expanded, record.raw) ??\n            (expanded ? <IconMinus /> : <IconPlus />)}\n        </button>\n      );\n    };\n\n    const renderExpand = (\n      record: TableDataWithRaw,\n      {\n        indentSize,\n        indexPath,\n        allowDrag,\n        expandContent,\n      }: {\n        indentSize: number;\n        indexPath: number[];\n        allowDrag: boolean;\n        expandContent: any;\n      }\n    ) => {\n      if (record.hasSubtree) {\n        if (record.children?.length === 0 && showEmptyTree.value) {\n          return renderEmpty();\n        }\n\n        return record.children?.map((item, index) =>\n          renderRecord(item, index, {\n            indentSize,\n            indexPath,\n            allowDrag,\n          })\n        );\n      }\n\n      if (expandContent) {\n        const scrollContainer = containerElement.value;\n\n        return (\n          <Tr key={`${record.key}-expand`} expand>\n            <Td\n              isFixedExpand={\n                hasLeftFixedColumn.value || hasRightFixedColumn.value\n              }\n              containerWidth={scrollContainer?.clientWidth}\n              colSpan={dataColumns.value.length + operations.value.length}\n            >\n              {expandContent}\n            </Td>\n          </Tr>\n        );\n      }\n\n      return null;\n    };\n\n    const renderRecord = (\n      record: TableDataWithRaw,\n      rowIndex: number,\n      {\n        indentSize = 0,\n        indexPath,\n        allowDrag = true,\n      }: { indentSize?: number; indexPath?: number[]; allowDrag?: boolean } = {}\n    ): JSX.Element => {\n      const currentKey = record.key;\n      const currentPath = (indexPath ?? []).concat(rowIndex);\n      const expandContent = renderExpandContent(record);\n      const showExpand = expandedRowKeys.value.includes(currentKey);\n\n      const isDragTarget = dragState.sourceKey === record.key;\n\n      const dragSourceEvent = dragType.value\n        ? {\n            draggable: allowDrag,\n            onDragstart: (ev: DragEvent) => {\n              if (!allowDrag) return;\n              handleDragStart(ev, record.key, currentPath, record.raw);\n            },\n            onDragend: (ev: DragEvent) => {\n              if (!allowDrag) return;\n              handleDragEnd(ev);\n            },\n          }\n        : {};\n\n      const dragTargetEvent = dragType.value\n        ? {\n            onDragenter: (ev: DragEvent) => {\n              if (!allowDrag) return;\n              handleDragEnter(ev, currentPath);\n            },\n            onDragover: (ev: DragEvent) => {\n              if (!allowDrag) return;\n              handleDragover(ev);\n            },\n            onDrop: (ev: DragEvent) => {\n              if (!allowDrag) return;\n              handleChange('drag');\n              handleDrop(ev);\n            },\n          }\n        : {};\n\n      return (\n        <>\n          <Tr\n            v-slots={{\n              tr: slots.tr,\n            }}\n            key={currentKey}\n            class={[\n              {\n                [`${prefixCls}-tr-draggable`]: dragType.value === 'row',\n                [`${prefixCls}-tr-drag`]: isDragTarget,\n              },\n              isFunction(props.rowClass)\n                ? props.rowClass(record.raw, rowIndex)\n                : props.rowClass,\n            ]}\n            rowIndex={rowIndex}\n            record={record}\n            checked={\n              props.rowSelection && selectedRowKeys.value?.includes(currentKey)\n            }\n            // @ts-ignore\n            onClick={(ev: Event) => handleRowClick(record, ev)}\n            onDblclick={(ev: Event) => handleRowDblclick(record, ev)}\n            onContextmenu={(ev: Event) => handleRowContextMenu(record, ev)}\n            {...(dragType.value === 'row' ? dragSourceEvent : {})}\n            {...dragTargetEvent}\n          >\n            {operations.value.map((operation, index) => {\n              const cellId = `${rowIndex}-${index}-${record.key}`;\n              const [rowspan, colspan] = props.spanAll\n                ? tableSpan.value[cellId] ?? [1, 1]\n                : [1, 1];\n\n              if (props.spanAll && removedCells.value.includes(cellId)) {\n                return null;\n              }\n\n              const style = getVirtualColumnStyle(operation.name);\n\n              return (\n                <OperationTd\n                  v-slots={{\n                    'drag-handle-icon': slots['drag-handle-icon'],\n                  }}\n                  key={`operation-td-${index}`}\n                  style={style}\n                  operationColumn={operation}\n                  operations={operations.value}\n                  record={record}\n                  hasExpand={Boolean(expandContent)}\n                  selectedRowKeys={currentSelectedRowKeys.value}\n                  rowSpan={rowspan}\n                  colSpan={colspan}\n                  renderExpandBtn={renderExpandBtn}\n                  {...(dragType.value === 'handle' ? dragSourceEvent : {})}\n                />\n              );\n            })}\n            {dataColumns.value.map((column, index) => {\n              const cellId = `${rowIndex}-${\n                props.spanAll ? operations.value.length + index : index\n              }-${record.key}`;\n              const [rowspan, colspan] = tableSpan.value[cellId] ?? [1, 1];\n\n              if (removedCells.value.includes(cellId)) {\n                return null;\n              }\n\n              const extraProps =\n                index === 0\n                  ? {\n                      showExpandBtn: record.hasSubtree,\n                      indentSize: record.hasSubtree\n                        ? indentSize - 20\n                        : indentSize,\n                    }\n                  : {};\n\n              const style = getVirtualColumnStyle(column.dataIndex);\n\n              return (\n                <Td\n                  v-slots={{\n                    td: slots.td,\n                  }}\n                  key={`td-${index}`}\n                  style={style}\n                  rowIndex={rowIndex}\n                  record={record}\n                  column={column}\n                  operations={operations.value}\n                  dataColumns={dataColumns.value}\n                  rowSpan={rowspan}\n                  renderExpandBtn={renderExpandBtn}\n                  colSpan={colspan}\n                  {...extraProps}\n                  // @ts-ignore\n                  onClick={(ev: Event) => handleCellClick(record, column, ev)}\n                  onDblclick={(ev: Event) =>\n                    handleCellDblclick(record, column, ev)\n                  }\n                  onMouseenter={(ev: Event) =>\n                    handleCellMouseEnter(record, column, ev)\n                  }\n                  onMouseleave={(ev: Event) =>\n                    handleCellMouseLeave(record, column, ev)\n                  }\n                  onContextmenu={(ev: Event) =>\n                    handleCellContextmenu(record, column, ev)\n                  }\n                />\n              );\n            })}\n          </Tr>\n          {showExpand &&\n            renderExpand(record, {\n              indentSize: indentSize + props.indentSize,\n              indexPath: currentPath,\n              allowDrag: allowDrag && !isDragTarget,\n              expandContent,\n            })}\n        </>\n      );\n    };\n\n    const renderBody = () => {\n      const hasSubData = flattenData.value.some((record) =>\n        Boolean(record.hasSubtree)\n      );\n\n      return (\n        <Tbody\n          v-slots={{\n            tbody: slots.tbody,\n          }}\n        >\n          {flattenData.value.length > 0\n            ? flattenData.value.map((record, index) =>\n                renderRecord(record, index, { indentSize: hasSubData ? 20 : 0 })\n              )\n            : renderEmpty()}\n        </Tbody>\n      );\n    };\n\n    const renderHeader = () => (\n      <Thead v-slots={{ thead: slots.thead }}>\n        {groupColumns.value.map((row, index) => (\n          <Tr key={`header-row-${index}`}>\n            {index === 0 &&\n              operations.value.map((operation, index) => (\n                <OperationTh\n                  key={`operation-th-${index}`}\n                  // @ts-ignore\n                  ref={(ins: ComponentPublicInstance) => {\n                    if (ins?.$el && operation.name) {\n                      thRefs.value[operation.name] = ins.$el;\n                    }\n                  }}\n                  operationColumn={operation}\n                  operations={operations.value}\n                  selectAll={Boolean(\n                    operation.name === 'selection-checkbox' &&\n                      props.rowSelection?.showCheckedAll\n                  )}\n                  rowSpan={groupColumns.value.length}\n                />\n              ))}\n            {row.map((column, index) => {\n              const resizable =\n                props.columnResizable &&\n                Boolean(column.dataIndex) &&\n                index < row.length - 1;\n\n              return (\n                <Th\n                  key={`th-${index}`}\n                  // @ts-ignore\n                  ref={(ins: ComponentPublicInstance) => {\n                    if (ins?.$el && column.dataIndex) {\n                      thRefs.value[column.dataIndex] = ins.$el;\n                    }\n                  }}\n                  v-slots={{ th: slots.th }}\n                  column={column}\n                  operations={operations.value}\n                  dataColumns={dataColumns.value}\n                  resizable={resizable}\n                  onClick={(ev: Event) => handleHeaderClick(column, ev)}\n                />\n              );\n            })}\n          </Tr>\n        ))}\n      </Thead>\n    );\n\n    const renderContent = () => {\n      if (splitTable.value) {\n        const top = isNumber(props.stickyHeader)\n          ? `${props.stickyHeader}px`\n          : undefined;\n\n        const mergeOuterClass = [scrollbarProps.value?.outerClass];\n        if (props.stickyHeader) {\n          mergeOuterClass.push(`${prefixCls}-header-sticky`);\n        }\n\n        const mergeOuterStyle = { top, ...scrollbarProps.value?.outerStyle };\n\n        const Component = displayScrollbar.value ? Scrollbar : 'div';\n\n        return (\n          <>\n            {props.showHeader && (\n              <Component\n                ref={theadComRef}\n                class={[\n                  `${prefixCls}-header`,\n                  {\n                    [`${prefixCls}-header-sticky`]:\n                      props.stickyHeader && !displayScrollbar.value,\n                  },\n                ]}\n                style={{\n                  overflowY: hasScrollBar.value ? 'scroll' : undefined,\n                  top: !displayScrollbar.value ? top : undefined,\n                }}\n                {...(scrollbar.value\n                  ? {\n                      hide: flattenData.value.length !== 0,\n                      disableVertical: true,\n                      ...scrollbarProps.value,\n                      outerClass: mergeOuterClass,\n                      outerStyle: mergeOuterStyle,\n                    }\n                  : undefined)}\n              >\n                <table\n                  class={`${prefixCls}-element`}\n                  style={headerStyle.value}\n                  cellpadding={0}\n                  cellspacing={0}\n                >\n                  <ColGroup\n                    dataColumns={dataColumns.value}\n                    operations={operations.value}\n                    columnWidth={columnWidth}\n                  />\n                  {renderHeader()}\n                </table>\n              </Component>\n            )}\n            <ResizeObserver onResize={handleTbodyResize}>\n              {isVirtualList.value && flattenData.value.length ? (\n                <VirtualList\n                  v-slots={{\n                    item: ({\n                      item,\n                      index,\n                    }: {\n                      item: TableDataWithRaw;\n                      index: number;\n                    }) => renderRecord(item, index),\n                  }}\n                  ref={(ins: any) => {\n                    if (ins?.$el) tbodyRef.value = ins.$el;\n                  }}\n                  class={`${prefixCls}-body`}\n                  data={flattenData.value}\n                  itemKey=\"_key\"\n                  component={{\n                    list: 'table',\n                    content: 'tbody',\n                  }}\n                  listAttrs={{\n                    class: `${prefixCls}-element`,\n                    style: contentStyle.value,\n                  }}\n                  paddingPosition=\"list\"\n                  height=\"auto\"\n                  {...props.virtualListProps}\n                  onScroll={onTbodyScroll}\n                />\n              ) : (\n                <Component\n                  ref={tbodyComRef}\n                  class={`${prefixCls}-body`}\n                  style={{\n                    maxHeight: isNumber(props.scroll?.y)\n                      ? `${props.scroll?.y}px`\n                      : '100%',\n                  }}\n                  {...(scrollbar.value\n                    ? {\n                        outerStyle: { display: 'flex', minHeight: '0' },\n                        ...scrollbarProps.value,\n                      }\n                    : undefined)}\n                  onScroll={onTbodyScroll}\n                >\n                  <table\n                    class={`${prefixCls}-element`}\n                    style={contentStyle.value}\n                    cellpadding={0}\n                    cellspacing={0}\n                  >\n                    {flattenData.value.length !== 0 && (\n                      <ColGroup\n                        dataColumns={dataColumns.value}\n                        operations={operations.value}\n                        columnWidth={columnWidth}\n                      />\n                    )}\n                    {renderBody()}\n                  </table>\n                </Component>\n              )}\n            </ResizeObserver>\n            {summaryData.value && summaryData.value.length > 0 && (\n              <div\n                ref={summaryRef}\n                class={`${prefixCls}-tfoot`}\n                style={{\n                  overflowY: hasScrollBar.value ? 'scroll' : 'hidden',\n                }}\n              >\n                <table\n                  class={`${prefixCls}-element`}\n                  style={contentStyle.value}\n                  cellpadding={0}\n                  cellspacing={0}\n                >\n                  <ColGroup\n                    dataColumns={dataColumns.value}\n                    operations={operations.value}\n                    columnWidth={columnWidth}\n                  />\n                  {renderSummary()}\n                </table>\n              </div>\n            )}\n          </>\n        );\n      }\n\n      return (\n        <ResizeObserver onResize={() => setAlignPosition()}>\n          <table\n            class={`${prefixCls}-element`}\n            cellpadding={0}\n            cellspacing={0}\n            style={contentStyle.value}\n          >\n            <ColGroup\n              dataColumns={dataColumns.value}\n              operations={operations.value}\n              columnWidth={columnWidth}\n            />\n            {props.showHeader && renderHeader()}\n            {renderBody()}\n            {summaryData.value &&\n              summaryData.value.length > 0 &&\n              renderSummary()}\n          </table>\n        </ResizeObserver>\n      );\n    };\n\n    const renderTable = (content?: Slot) => {\n      const style = props.scroll?.maxHeight\n        ? { maxHeight: props.scroll.maxHeight }\n        : undefined;\n\n      const Component = displayScrollbar.value ? Scrollbar : 'div';\n\n      return (\n        <>\n          <div class={[`${prefixCls}-container`, tableCls.value]}>\n            <Component\n              ref={contentComRef}\n              class={[\n                `${prefixCls}-content`,\n                {\n                  [`${prefixCls}-content-scroll-x`]: !splitTable.value,\n                },\n              ]}\n              style={style}\n              {...(scrollbar.value\n                ? { outerStyle: { height: '100%' }, ...scrollbarProps.value }\n                : undefined)}\n              onScroll={handleScroll}\n            >\n              {content ? (\n                <table\n                  class={`${prefixCls}-element`}\n                  cellpadding={0}\n                  cellspacing={0}\n                >\n                  {content()}\n                </table>\n              ) : (\n                renderContent()\n              )}\n            </Component>\n          </div>\n          {slots.footer && (\n            <div class={`${prefixCls}-footer`}>{slots.footer()}</div>\n          )}\n        </>\n      );\n    };\n\n    const renderPagination = () => {\n      const paginationProps = isObject(props.pagination)\n        ? omit(props.pagination, [\n            'current',\n            'pageSize',\n            'defaultCurrent',\n            'defaultPageSize',\n          ])\n        : {};\n\n      return (\n        <div class={paginationCls.value}>\n          {slots['pagination-left']?.()}\n          <Pagination\n            total={validData.value.length}\n            current={page.value}\n            pageSize={pageSize.value}\n            onChange={(page: number) => {\n              handlePageChange(page);\n              handleChange('pagination');\n            }}\n            onPageSizeChange={(pageSize: number) => {\n              handlePageSizeChange(pageSize);\n              handleChange('pagination');\n            }}\n            {...paginationProps}\n          />\n          {slots['pagination-right']?.()}\n        </div>\n      );\n    };\n\n    const style = computed<CSSProperties | undefined>(() => {\n      if (isString(props.scroll?.y)) {\n        return { height: props.scroll?.y };\n      }\n      return undefined;\n    });\n\n    const render = () => {\n      if (slots.default) {\n        return <div class={cls.value}>{renderTable(slots.default)}</div>;\n      }\n      children.value = slots.columns?.();\n      // fix #1724 sortedData.value.length > 0\n      return (\n        <div class={cls.value} style={style.value}>\n          {children.value}\n          <Spin {...spinProps.value}>\n            {props.pagination !== false &&\n              (flattenData.value.length > 0 || sortedData.value.length > 0) &&\n              isPaginationTop.value &&\n              renderPagination()}\n            {renderTable()}\n            {props.pagination !== false &&\n              (flattenData.value.length > 0 || sortedData.value.length > 0) &&\n              !isPaginationTop.value &&\n              renderPagination()}\n          </Spin>\n        </div>\n      );\n    };\n\n    return {\n      render,\n      selfExpand: expand,\n      selfExpandAll: expandAll,\n      selfSelect: select,\n      selfSelectAll: selectAll,\n      selfResetFilters: resetFilters,\n      selfClearFilters: clearFilters,\n      selfResetSorters: resetSorters,\n      selfClearSorters: clearSorters,\n    };\n  },\n  methods: {\n    /**\n     * @zh 设置全选状态\n     * @en Set select all state\n     * @param { boolean } checked\n     * @public\n     * @version 2.22.0\n     */\n    selectAll(checked?: boolean) {\n      return this.selfSelectAll(checked);\n    },\n    /**\n     * @zh 设置行选择器状态\n     * @en Set row selector state\n     * @param { string | number | (string | number)[] } rowKey\n     * @param { boolean } checked\n     * @public\n     * @version 2.31.0\n     */\n    select(rowKey: string | number | (string | number)[], checked?: boolean) {\n      return this.selfSelect(rowKey, checked);\n    },\n    /**\n     * @zh 设置全部展开状态\n     * @en Set all expanded state\n     * @param { boolean } checked\n     * @public\n     * @version 2.31.0\n     */\n    expandAll(checked?: boolean) {\n      return this.selfExpandAll(checked);\n    },\n    /**\n     * @zh 设置展开状态\n     * @en Set select all state\n     * @param { string | number | (string | number)[] } rowKey\n     * @param { boolean } checked\n     * @public\n     * @version 2.31.0\n     */\n    expand(rowKey: string | number | (string | number)[], checked?: boolean) {\n      return this.selfExpand(rowKey, checked);\n    },\n    /**\n     * @zh 重置列的筛选器\n     * @en Reset the filter for columns\n     * @param { string | string[] } dataIndex\n     * @public\n     * @version 2.31.0\n     */\n    resetFilters(dataIndex?: string | string[]) {\n      return this.selfResetFilters(dataIndex);\n    },\n    /**\n     * @zh 清空列的筛选器\n     * @en Clear the filter for columns\n     * @param { string | string[] } dataIndex\n     * @public\n     * @version 2.31.0\n     */\n    clearFilters(dataIndex?: string | string[]) {\n      return this.selfClearFilters(dataIndex);\n    },\n    /**\n     * @zh 重置列的排序\n     * @en Reset the order of columns\n     * @public\n     * @version 2.31.0\n     */\n    resetSorters() {\n      return this.selfResetSorters();\n    },\n    /**\n     * @zh 清空列的排序\n     * @en Clear the order of columns\n     * @public\n     * @version 2.31.0\n     */\n    clearSorters() {\n      return this.selfClearSorters();\n    },\n  },\n  render() {\n    return this.render();\n  },\n});\n"
  },
  {
    "path": "packages/web-vue/components/table/utils.ts",
    "content": "import type { CSSProperties, VNode } from 'vue';\nimport {\n  TableColumnData,\n  TableDataWithRaw,\n  TableOperationColumn,\n} from './interface';\nimport { isArray, isNull, isUndefined } from '../_utils/is';\nimport {\n  resolveProps,\n  isNamedComponent,\n  isSlotsChildren,\n  isArrayChildren,\n} from '../_utils/vue-utils';\nimport { BaseType } from '../_utils/types';\n\nconst getDataColumnsNumber = (columns: TableColumnData[]): number => {\n  let count = 0;\n\n  const travelColumns = (columns: TableColumnData[]) => {\n    if (isArray(columns) && columns.length > 0) {\n      for (const item of columns) {\n        if (!item.children) {\n          count += 1;\n        } else {\n          travelColumns(item.children);\n        }\n      }\n    }\n  };\n  travelColumns(columns);\n\n  return count;\n};\n\n// Get the total number of rows in the header\nconst getTotalHeaderRows = (columns: TableColumnData[]): number => {\n  let count = 0;\n  if (isArray(columns) && columns.length > 0) {\n    count = 1;\n    for (const item of columns) {\n      if (item.children) {\n        const depth = getTotalHeaderRows(item.children);\n        if (depth > 0) {\n          count = Math.max(count, depth + 1);\n        }\n      }\n    }\n  }\n  return count;\n};\n\nconst setParentFixed = (column: TableColumnData, fixed: 'left' | 'right') => {\n  let { parent } = column;\n  while (parent) {\n    if (parent.fixed === fixed) {\n      if (fixed === 'left') {\n        parent.isLastLeftFixed = true;\n      } else {\n        parent.isFirstRightFixed = true;\n      }\n    }\n    parent = parent.parent;\n  }\n};\n\n// Get the grouped header row data\nexport const getGroupColumns = (\n  columns: TableColumnData[],\n  columnMap: Map<string, TableColumnData>,\n  columnWidth: Record<string, number>\n) => {\n  const totalHeaderRows = getTotalHeaderRows(columns);\n\n  columnMap.clear();\n  const dataColumns: TableColumnData[] = [];\n  const groupColumns: TableColumnData[][] = [...Array(totalHeaderRows)].map(\n    () => []\n  );\n\n  // For recording\n  let lastLeftFixedIndex: number | undefined;\n  let firstRightFixedIndex: number | undefined;\n\n  const travelColumns = (\n    columns: TableColumnData[],\n    {\n      level = 0,\n      parent,\n      fixed,\n    }: {\n      level?: number;\n      parent?: TableColumnData;\n      fixed?: 'left' | 'right';\n    } = {}\n  ) => {\n    for (const item of columns) {\n      const cell: TableColumnData = { ...item, parent };\n      if (isArray(cell.children)) {\n        const colSpan = getDataColumnsNumber(cell.children);\n        if (colSpan > 1) {\n          cell.colSpan = colSpan;\n        }\n        groupColumns[level].push(cell);\n        travelColumns(cell.children, {\n          level: level + 1,\n          parent: cell,\n          fixed: cell.fixed,\n        });\n      } else {\n        // Minimum header\n        const rowSpan = totalHeaderRows - level;\n        if (rowSpan > 1) {\n          cell.rowSpan = rowSpan;\n        }\n        if (fixed || cell.fixed) {\n          cell.fixed = cell.fixed ?? fixed;\n          if (cell.fixed === 'left') {\n            lastLeftFixedIndex = dataColumns.length;\n          } else if (isUndefined(firstRightFixedIndex)) {\n            firstRightFixedIndex = dataColumns.length;\n          }\n        }\n\n        if (isUndefined(cell.dataIndex) || isNull(cell.dataIndex)) {\n          cell.dataIndex = `__arco_data_index_${dataColumns.length}`;\n        }\n\n        if (columnWidth[cell.dataIndex]) {\n          cell._resizeWidth = columnWidth[cell.dataIndex];\n        }\n\n        // dataColumns和groupColumns公用一个cell的引用\n        columnMap.set(cell.dataIndex, cell);\n        dataColumns.push(cell);\n        groupColumns[level].push(cell);\n      }\n    }\n  };\n\n  travelColumns(columns);\n\n  if (!isUndefined(lastLeftFixedIndex)) {\n    dataColumns[lastLeftFixedIndex].isLastLeftFixed = true;\n    setParentFixed(dataColumns[lastLeftFixedIndex], 'left');\n  }\n  if (!isUndefined(firstRightFixedIndex)) {\n    dataColumns[firstRightFixedIndex].isFirstRightFixed = true;\n    setParentFixed(dataColumns[firstRightFixedIndex], 'right');\n  }\n\n  return { dataColumns, groupColumns };\n};\n\nconst getOperationColumnIndex = (\n  operations: TableOperationColumn[],\n  name: string\n) => {\n  for (let i = 0; i < operations.length; i++) {\n    if (operations[i].name === name) {\n      return i;\n    }\n  }\n  return -1;\n};\n\nexport const getOperationFixedNumber = (\n  column: TableOperationColumn,\n  operations: TableOperationColumn[]\n) => {\n  const index = getOperationColumnIndex(operations, column.name);\n  if (index <= 0) {\n    return 0;\n  }\n  let count = 0;\n  const _operations = operations.slice(0, index);\n  for (const item of _operations) {\n    count += item.width ?? 0;\n  }\n\n  return count;\n};\n\nconst getFirstDataColumn = (column: TableColumnData): TableColumnData => {\n  if (column.children && column.children.length > 0)\n    return getFirstDataColumn(column.children[0]);\n  return column;\n};\n\nconst getLastDataColumn = (column: TableColumnData): TableColumnData => {\n  if (column.children && column.children.length > 0)\n    return getFirstDataColumn(column.children[column.children.length - 1]);\n  return column;\n};\n\n// Get the location data of a fixed column\nexport const getFixedNumber = (\n  column: TableColumnData,\n  {\n    dataColumns,\n    operations,\n  }: {\n    dataColumns: TableColumnData[];\n    operations: TableOperationColumn[];\n  }\n) => {\n  let count = 0;\n\n  if (column.fixed === 'left') {\n    for (const item of operations) {\n      count += item.width ?? 40;\n    }\n    const first = getFirstDataColumn(column);\n    for (const item of dataColumns) {\n      if (first.dataIndex === item.dataIndex) {\n        break;\n      }\n      count += item._resizeWidth ?? item.width ?? 0;\n    }\n    return count;\n  }\n\n  const last = getLastDataColumn(column);\n  for (let i = dataColumns.length - 1; i > 0; i--) {\n    const item = dataColumns[i];\n    if (last.dataIndex === item.dataIndex) {\n      break;\n    }\n\n    if (item.fixed === 'right') {\n      count += item.width as number;\n    }\n  }\n  return count;\n};\n\nexport const getOperationFixedCls = (\n  prefixCls: string,\n  column: TableOperationColumn\n): any[] => {\n  if (column.fixed) {\n    return [\n      `${prefixCls}-col-fixed-left`,\n      {\n        [`${prefixCls}-col-fixed-left-last`]: column.isLastLeftFixed,\n      },\n    ];\n  }\n  return [];\n};\n\nexport const getFixedCls = (\n  prefixCls: string,\n  column: Pick<\n    TableColumnData,\n    'fixed' | 'isLastLeftFixed' | 'isFirstRightFixed'\n  >\n): any[] => {\n  if (column.fixed === 'left') {\n    return [\n      `${prefixCls}-col-fixed-left`,\n      {\n        [`${prefixCls}-col-fixed-left-last`]: column.isLastLeftFixed,\n      },\n    ];\n  }\n  if (column.fixed === 'right') {\n    return [\n      `${prefixCls}-col-fixed-right`,\n      {\n        [`${prefixCls}-col-fixed-right-first`]: column.isFirstRightFixed,\n      },\n    ];\n  }\n  return [];\n};\n\nexport const getStyle = (\n  column: TableColumnData,\n  {\n    dataColumns,\n    operations,\n  }: {\n    dataColumns: TableColumnData[];\n    operations: TableOperationColumn[];\n  }\n): CSSProperties => {\n  if (column.fixed) {\n    const offset = `${getFixedNumber(column, { dataColumns, operations })}px`;\n    if (column.fixed === 'left') {\n      return {\n        left: offset,\n      };\n    }\n    return {\n      right: offset,\n    };\n  }\n  return {};\n};\n\nexport const getOperationStyle = (\n  column: TableOperationColumn,\n  operations: TableOperationColumn[]\n) => {\n  if (column.fixed) {\n    return {\n      left: `${getOperationFixedNumber(column, operations)}px`,\n    };\n  }\n  return {};\n};\n\n/**\n * Obtain table column data through the <TableColumnData> component\n * @param {VNode[]} vns\n */\nexport const getColumnsFromSlot = (vns: VNode[]) => {\n  const columns: TableColumnData[] = [];\n  for (const vn of vns) {\n    if (isNamedComponent(vn, 'TableColumn')) {\n      const column = resolveProps(vn) as TableColumnData;\n      if (isSlotsChildren(vn, vn.children)) {\n        if (vn.children.default) {\n          column.children = getColumnsFromSlot(vn.children.default());\n        }\n        if (vn.children.cell) {\n          // @ts-ignore\n          column.render = vn.children.cell;\n        }\n        if (vn.children.title) {\n          // @ts-ignore\n          column.title = vn.children.title;\n        }\n      }\n      columns.push(column);\n    } else if (isArrayChildren(vn, vn.children)) {\n      columns.push(...getColumnsFromSlot(vn.children));\n    } else if (isArray(vn)) {\n      columns.push(...getColumnsFromSlot(vn));\n    }\n  }\n  return columns;\n};\n\nexport function mapArrayWithChildren<\n  T extends Array<{ [key: string]: any; children?: T }>\n>(arr: T): T {\n  return arr.map((item) => {\n    const newItem = { ...item };\n    if (newItem.children) {\n      newItem.children = mapArrayWithChildren(newItem.children);\n    }\n    return newItem;\n  }) as T;\n}\n\nexport function mapRawTableData<T extends TableDataWithRaw[]>(\n  arr: T\n): TableDataWithRaw['raw'][] {\n  return arr.map((item) => {\n    const rawItem = item.raw;\n    if (item.children && rawItem.children) {\n      rawItem.children = mapRawTableData(item.children);\n    }\n    return item.raw;\n  });\n}\n\nexport const getLeafKeys = (record: TableDataWithRaw) => {\n  const keys: BaseType[] = [];\n  if (record.children) {\n    for (const item of record.children) {\n      if (item.isLeaf) {\n        keys.push(item.key);\n      } else {\n        keys.push(...getLeafKeys(item));\n      }\n    }\n  }\n  return keys;\n};\n\nexport const getSelectionStatus = (\n  selectedRowKeys: BaseType[],\n  leafKeys: BaseType[]\n) => {\n  let checked = false;\n  let indeterminate = false;\n  const selectedLeafKeys = leafKeys.filter((key) =>\n    selectedRowKeys.includes(key)\n  );\n  if (selectedLeafKeys.length > 0) {\n    if (selectedLeafKeys.length >= leafKeys.length) {\n      checked = true;\n    } else {\n      indeterminate = true;\n    }\n  }\n\n  return {\n    checked,\n    indeterminate,\n  };\n};\n"
  },
  {
    "path": "packages/web-vue/components/tabs/CHANGELOG.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.57.0\n\n`2025-03-10`\n\n### 🐛 BugFix\n\n- resolve `wheel` event listener passive warning ([#3413](https://github.com/arco-design/arco-design-vue/pull/3413))\n- optimize memory release during tab removal ([#3413](https://github.com/arco-design/arco-design-vue/pull/3413))\n\n\n## 2.55.0\n\n`2024-03-15`\n\n### 💅 Style\n\n- fix transition animation for tab title ([#3008](https://github.com/arco-design/arco-design-vue/pull/3008))\n\n\n## 2.45.1\n\n`2023-04-14`\n\n### 🐛 BugFix\n\n- fixed individual cases where tab slots are not updated ([#2325](https://github.com/arco-design/arco-design-vue/pull/2325))\n\n\n## 2.43.0\n\n`2023-02-10`\n\n### 🐛 BugFix\n\n- Hide the tab indicator when there are no matching tabs ([#2105](https://github.com/arco-design/arco-design-vue/pull/2105))\n\n\n## 2.41.1\n\n`2023-01-06`\n\n### 🐛 BugFix\n\n- Fix the problem of scrolling exception under `capsule` type ([#2031](https://github.com/arco-design/arco-design-vue/pull/2031))\n\n\n## 2.40.1\n\n`2022-12-23`\n\n### 💅 Style\n\n- Fix the problem that `size` does not take effect under `rounded` and `capsule` types ([#1988](https://github.com/arco-design/arco-design-vue/pull/1988))\n\n\n## 2.37.4\n\n`2022-09-30`\n\n### 💅 Style\n\n- Fix the problem that the content of the label under the `card` type is not centered ([#1704](https://github.com/arco-design/arco-design-vue/pull/1704))\n\n\n## 2.34.0\n\n`2022-07-29`\n\n### 🆕 Feature\n\n- Add trigger property to support changing switching mode ([#1456](https://github.com/arco-design/arco-design-vue/pull/1456))\n\n\n## 2.33.0\n\n`2022-07-08`\n\n### 💅 Style\n\n- Fix the problem of wrong style when focusing ([#1398](https://github.com/arco-design/arco-design-vue/pull/1398))\n\n\n## 2.30.0\n\n`2022-06-10`\n\n### 💎 Enhancement\n\n- Add focus styles and keyboard events ([#1264](https://github.com/arco-design/arco-design-vue/pull/1264))\n\n\n## 2.27.0\n\n`2022-05-13`\n\n### 🆕 Feature\n\n- Add destroyOnHide attribute ([#1107](https://github.com/arco-design/arco-design-vue/pull/1107))\n\n\n## 2.25.1\n\n`2022-04-27`\n\n### 🐛 BugFix\n\n- Fixed #title slot not updating in some cases ([#1050](https://github.com/arco-design/arco-design-vue/pull/1050))\n\n\n## 2.25.0\n\n`2022-04-22`\n\n### 🆕 Feature\n\n- Add hideContent property ([#1025](https://github.com/arco-design/arco-design-vue/pull/1025))\n\n\n## 2.18.1\n\n`2022-03-07`\n\n### 🐛 BugFix\n\n- Fix the problem that activeKey modification will be triggered during initialization ([#787](https://github.com/arco-design/arco-design-vue/pull/787))\n\n\n## 2.18.0\n\n`2022-03-04`\n\n### 💎 Enhancement\n\n- Use Context to optimize components and support secondary encapsulation of TabPane ([#771](https://github.com/arco-design/arco-design-vue/pull/771))\n- key supports number type ([#771](https://github.com/arco-design/arco-design-vue/pull/771))\n- Add autoSwitch attribute ([#771](https://github.com/arco-design/arco-design-vue/pull/771))\n\n\n## 2.11.0\n\n`2021-12-17`\n\n### 🐛 BugFix\n\n- Fix the problem that scrolling is not recalculated when the width of the tab bar changes ([#409](https://github.com/arco-design/arco-design-vue/pull/409))\n- Fix the problem that the indicator width cannot follow the update when the width of the label option changes ([#409](https://github.com/arco-design/arco-design-vue/pull/409))\n\n\n## 2.10.0\n\n`2021-12-10`\n\n### 🆕 Feature\n\n- Add headerPadding property and enable it by default ([#362](https://github.com/arco-design/arco-design-vue/pull/362))\n\n### 🐛 BugFix\n\n- Fix the problem of tab closable failure in editable mode ([#356](https://github.com/arco-design/arco-design-vue/pull/356))\n\n\n## 2.1.0\n\n`2021-11-05`\n\n### 💎 Enhancement\n\n- Optimize the scrolling method of the tab bar ([#87](https://github.com/arco-design/arco-design-vue/pull/87))\n\n"
  },
  {
    "path": "packages/web-vue/components/tabs/CHANGELOG.zh-CN.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.57.0\n\n`2025-03-10`\n\n### 🐛 问题修复\n\n- 解决`wheel`事件监听器性能警告 ([#3413](https://github.com/arco-design/arco-design-vue/pull/3413))\n- 优化标签页动态增减时内存释放问题 ([#3413](https://github.com/arco-design/arco-design-vue/pull/3413))\n\n\n## 2.55.0\n\n`2024-03-15`\n\n### 💅 样式更新\n\n- 修复 title 过渡动画效果 ([#3008](https://github.com/arco-design/arco-design-vue/pull/3008))\n\n\n## 2.45.1\n\n`2023-04-14`\n\n### 🐛 问题修复\n\n- 修复个别情况下tab-pane 的title 插槽不更新的问题 ([#2325](https://github.com/arco-design/arco-design-vue/pull/2325))\n\n\n## 2.43.0\n\n`2023-02-10`\n\n### 🐛 问题修复\n\n- 无匹配选项卡时，隐藏选项卡指示器 ([#2105](https://github.com/arco-design/arco-design-vue/pull/2105))\n\n\n## 2.41.1\n\n`2023-01-06`\n\n### 🐛 问题修复\n\n- 修复在 `capsule` 类型下滚动异常的问题 ([#2031](https://github.com/arco-design/arco-design-vue/pull/2031))\n\n\n## 2.40.1\n\n`2022-12-23`\n\n### 💅 样式更新\n\n- 修复 `rounded` 和 `capsule` 类型下 `size` 不生效的问题 ([#1988](https://github.com/arco-design/arco-design-vue/pull/1988))\n\n\n## 2.37.4\n\n`2022-09-30`\n\n### 💅 样式更新\n\n- 修复 `card` 类型下标签内容没有居中的问题 ([#1704](https://github.com/arco-design/arco-design-vue/pull/1704))\n\n\n## 2.34.0\n\n`2022-07-29`\n\n### 🆕 新增功能\n\n- 增加 trigger 属性，支持更改切换方式 ([#1456](https://github.com/arco-design/arco-design-vue/pull/1456))\n\n\n## 2.33.0\n\n`2022-07-08`\n\n### 💅 样式更新\n\n- 修复聚焦时样式错误的问题 ([#1398](https://github.com/arco-design/arco-design-vue/pull/1398))\n\n\n## 2.30.0\n\n`2022-06-10`\n\n### 💎 功能优化\n\n- 增加 focus 样式和键盘事件 ([#1264](https://github.com/arco-design/arco-design-vue/pull/1264))\n\n\n## 2.27.0\n\n`2022-05-13`\n\n### 🆕 新增功能\n\n- 增加 destroyOnHide 属性 ([#1107](https://github.com/arco-design/arco-design-vue/pull/1107))\n\n\n## 2.25.1\n\n`2022-04-27`\n\n### 🐛 问题修复\n\n- 修复 #title 插槽在某些情况下不能更新的问题 ([#1050](https://github.com/arco-design/arco-design-vue/pull/1050))\n\n\n## 2.25.0\n\n`2022-04-22`\n\n### 🆕 新增功能\n\n- 增加 hideContent 属性 ([#1025](https://github.com/arco-design/arco-design-vue/pull/1025))\n\n\n## 2.18.1\n\n`2022-03-07`\n\n### 🐛 问题修复\n\n- 修复初始化时会触发 activeKey 修改的问题 ([#787](https://github.com/arco-design/arco-design-vue/pull/787))\n\n\n## 2.18.0\n\n`2022-03-04`\n\n### 💎 功能优化\n\n- 使用 Context 方式优化组件，支持对 TabPane 的二次封装 ([#771](https://github.com/arco-design/arco-design-vue/pull/771))\n- key 支持 number 类型 ([#771](https://github.com/arco-design/arco-design-vue/pull/771))\n- 增加 autoSwitch 属性 ([#771](https://github.com/arco-design/arco-design-vue/pull/771))\n\n\n## 2.11.0\n\n`2021-12-17`\n\n### 🐛 问题修复\n\n- 修复标签栏宽度变化时，没有重新计算滚动的问题 ([#409](https://github.com/arco-design/arco-design-vue/pull/409))\n- 修复标签选项宽度变化时，指示器宽度不能跟随更新的问题 ([#409](https://github.com/arco-design/arco-design-vue/pull/409))\n\n\n## 2.10.0\n\n`2021-12-10`\n\n### 🆕 新增功能\n\n- 增加 headerPadding 属性并默认开启 ([#362](https://github.com/arco-design/arco-design-vue/pull/362))\n\n### 🐛 问题修复\n\n- 修复可编辑模式下选项卡 closable 失效的问题 ([#356](https://github.com/arco-design/arco-design-vue/pull/356))\n\n\n## 2.1.0\n\n`2021-11-05`\n\n### 💎 功能优化\n\n- 优化标签栏滚动方法 ([#87](https://github.com/arco-design/arco-design-vue/pull/87))\n\n"
  },
  {
    "path": "packages/web-vue/components/tabs/README.en-US.md",
    "content": "```yaml\nmeta:\n  type: Component\n  category: Data Display\ntitle: Tabs\ndescription: Organize content in the same view. You can view the content of one view at a time, and you can switch tabs to view other content.\n```\n\n*Auto translate by google.*\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/icon.md\n\n@import ./__demo__/position.md\n\n@import ./__demo__/type.md\n\n@import ./__demo__/lazy.md\n\n@import ./__demo__/extra.md\n\n@import ./__demo__/editable.md\n\n@import ./__demo__/trigger.md\n\n@import ./__demo__/scroll.md\n\n## API\n\n\n### `<tabs>` Props\n\n|Attribute|Description|Type|Default|version|\n|---|---|---|:---:|:---|\n|active-key **(v-model)**|The `key` of the currently selected label|`string\\|number`|`-`||\n|default-active-key|The `key` of the tab selected by default (uncontrolled state, select the first tab page when it is empty)|`string\\|number`|`-`||\n|position|Position of the tab|`'left' \\| 'right' \\| 'top' \\| 'bottom'`|`'top'`||\n|size|The size of the tab|`'mini' \\| 'small' \\| 'medium' \\| 'large'`|`-`||\n|type|The type of tab|`'line' \\| 'card' \\| 'card-gutter' \\| 'text' \\| 'rounded' \\| 'capsule'`|`'line'`||\n|direction|The direction of tab|`'horizontal' \\| 'vertical'`|`'horizontal'`||\n|editable|Whether to enable editable mode|`boolean`|`false`||\n|show-add-button|Whether to display the add button (only available in editable mode)|`boolean`|`false`||\n|destroy-on-hide|Whether to destroy the content when the label is not displayed|`boolean`|`false`|2.27.0|\n|lazy-load|Whether to mount the content when the label is first displayed|`boolean`|`false`||\n|justify|The height of the container is fully supported, and it only takes effect in horizontal mode.|`boolean`|`false`||\n|animation|Whether to enable option content transition animation|`boolean`|`false`||\n|header-padding|Whether there is a horizontal margin on the header of the tab. Only valid for tabs with `type` equal to `line` and `text` type|`boolean`|`true`|2.10.0|\n|auto-switch|Whether to switch to a new tab after creating a tab (the last one)|`boolean`|`false`|2.18.0|\n|hide-content|Whether to hide content|`boolean`|`false`|2.25.0|\n|trigger|Trigger method|`'hover' \\| 'click'`|`'click'`|2.34.0|\n|scroll-position|The scroll position of the selected tab, the default auto will scroll the activeTab to the visible area, but will not adjust the position intentionally|`'start' \\| 'end' \\| 'center' \\| 'auto' \\| number`|`'auto'`||\n### `<tabs>` Events\n\n|Event Name|Description|Parameters|\n|---|---|---|\n|change|Triggered when the current tag value changes|key: ` string \\| number `|\n|tab-click|Triggered when the user clicks on the tab|key: ` string \\| number `|\n|add|Triggered when the user clicks the add button|-|\n|delete|Triggered when the user clicks the delete button|key: ` string \\| number `|\n### `<tabs>` Slots\n\n|Slot Name|Description|Parameters|\n|---|---|---|\n|extra|Additional tab content|-|\n\n\n\n\n### `<tab-pane>` Props\n\n|Attribute|Description|Type|Default|version|\n|---|---|---|:---:|:---|\n|title|Title of the tab|`string`|`-`||\n|disabled|Whether to disable|`boolean`|`false`||\n|closable|Whether to allow this tab to be closed (only effective in editable mode)|`boolean`|`true`||\n|destroy-on-hide|Whether to destroy the content when the label is not displayed|`boolean`|`false`|2.27.0|\n### `<tab-pane>` Slots\n\n|Slot Name|Description|Parameters|\n|---|---|---|\n|title|Tab title|-|\n\n\n"
  },
  {
    "path": "packages/web-vue/components/tabs/README.zh-CN.md",
    "content": "```yaml\nmeta:\n  type: 组件\n  category: 数据展示\ntitle: 标签页 Tabs\ndescription: 将内容组织同一视图中，一次可查看一个视图内容，查看其他内容可切换选项卡查看。\n```\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/icon.md\n\n@import ./__demo__/position.md\n\n@import ./__demo__/type.md\n\n@import ./__demo__/lazy.md\n\n@import ./__demo__/extra.md\n\n@import ./__demo__/editable.md\n\n@import ./__demo__/trigger.md\n\n@import ./__demo__/scroll.md\n\n## API\n\n\n### `<tabs>` Props\n\n|参数名|描述|类型|默认值|版本|\n|---|---|---|:---:|:---|\n|active-key **(v-model)**|当前选中的标签的 `key`|`string\\|number`|`-`||\n|default-active-key|默认选中的标签的`key`（非受控状态，为空时选中第一个标签页）|`string\\|number`|`-`||\n|position|选项卡的位置|`'left' \\| 'right' \\| 'top' \\| 'bottom'`|`'top'`||\n|size|选项卡的大小|`'mini' \\| 'small' \\| 'medium' \\| 'large'`|`-`||\n|type|选项卡的类型|`'line' \\| 'card' \\| 'card-gutter' \\| 'text' \\| 'rounded' \\| 'capsule'`|`'line'`||\n|direction|选项卡的方向|`'horizontal' \\| 'vertical'`|`'horizontal'`||\n|editable|是否开启可编辑模式|`boolean`|`false`||\n|show-add-button|是否显示增加按钮（仅在可编辑模式可用）|`boolean`|`false`||\n|destroy-on-hide|是否在不显示标签时销毁内容|`boolean`|`false`|2.27.0|\n|lazy-load|是否在首次展示标签时挂载内容|`boolean`|`false`||\n|justify|高度撑满容器，只在水平模式下生效。|`boolean`|`false`||\n|animation|是否开启选项内容过渡动画|`boolean`|`false`||\n|header-padding|选项卡头部是否存在水平边距。仅对 `type` 等于 `line`、`text` 类型的选项卡生效|`boolean`|`true`|2.10.0|\n|auto-switch|创建标签后是否切换到新标签（最后一个）|`boolean`|`false`|2.18.0|\n|hide-content|是否隐藏内容|`boolean`|`false`|2.25.0|\n|trigger|触发方式|`'hover' \\| 'click'`|`'click'`|2.34.0|\n|scroll-position|被选中 tab 的滚动位置，默认 auto 即会将 activeTab 滚动到可见区域，但不会特意做位置调整|`'start' \\| 'end' \\| 'center' \\| 'auto' \\| number`|`'auto'`||\n### `<tabs>` Events\n\n|事件名|描述|参数|\n|---|---|---|\n|change|当前标签值改变时触发|key: ` string \\| number `|\n|tab-click|用户点击标签时触发|key: ` string \\| number `|\n|add|用户点击增加按钮时触发|-|\n|delete|用户点击删除按钮时触发|key: ` string \\| number `|\n### `<tabs>` Slots\n\n|插槽名|描述|参数|\n|---|:---:|---|\n|extra|选项卡额外内容|-|\n\n\n\n\n### `<tab-pane>` Props\n\n|参数名|描述|类型|默认值|版本|\n|---|---|---|:---:|:---|\n|title|选项卡的标题|`string`|`-`||\n|disabled|是否禁用|`boolean`|`false`||\n|closable|是否允许关闭此选项卡（仅在可编辑模式生效）|`boolean`|`true`||\n|destroy-on-hide|是否在不显示标签时销毁内容|`boolean`|`false`|2.27.0|\n### `<tab-pane>` Slots\n\n|插槽名|描述|参数|\n|---|:---:|---|\n|title|选项卡标题|-|\n\n\n"
  },
  {
    "path": "packages/web-vue/components/tabs/TEMPLATE.md",
    "content": "## zh-CN\n```yaml\nmeta:\n  type: 组件\n  category: 数据展示\ntitle: 标签页 Tabs\ndescription: 将内容组织同一视图中，一次可查看一个视图内容，查看其他内容可切换选项卡查看。\n```\n---\n## en-US\n```yaml\nmeta:\n  type: Component\n  category: Data Display\ntitle: Tabs\ndescription: Organize content in the same view. You can view the content of one view at a time, and you can switch tabs to view other content.\n```\n---\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/icon.md\n\n@import ./__demo__/position.md\n\n@import ./__demo__/type.md\n\n@import ./__demo__/lazy.md\n\n@import ./__demo__/extra.md\n\n@import ./__demo__/editable.md\n\n@import ./__demo__/trigger.md\n\n@import ./__demo__/scroll.md\n\n## API\n\n%%API(tabs.tsx)%%\n\n%%API(tab-pane.vue)%%\n"
  },
  {
    "path": "packages/web-vue/components/tabs/__demo__/basic.md",
    "content": "```yaml\ntitle:\n  zh-CN: 基本用法\n  en-US: Basic Usage\n```\n\n## zh-CN\n\n标签页的基本使用方法。\n\n---\n\n## en-US\n\nBasic usage of tab.\n\n---\n\n```vue\n<template>\n  <a-tabs default-active-key=\"2\">\n    <a-tab-pane key=\"1\" title=\"Tab 1\">\n      Content of Tab Panel 1\n    </a-tab-pane>\n    <a-tab-pane key=\"2\" title=\"Tab 2\">\n      Content of Tab Panel 2\n    </a-tab-pane>\n    <a-tab-pane key=\"3\">\n      <template #title>Tab 3</template>\n      Content of Tab Panel 3\n    </a-tab-pane>\n  </a-tabs>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/tabs/__demo__/editable.md",
    "content": "```yaml\ntitle:\n  zh-CN: 动态增减标签页\n  en-US: Editable\n```\n\n## zh-CN\n\n通过设置 `:editable=\"true\"` 可以开启动态增减标签页。仅在 `line` | `card` | `card-gutter` 生效\n\n---\n\n## en-US\n\nBy setting `:editable=\"true\"`, you can turn on the dynamic increase and decrease tabs. Only works with `line` | `card` | `card-gutter`\n\n---\n\n```vue\n\n<template>\n  <a-tabs type=\"card-gutter\" :editable=\"true\" @add=\"handleAdd\" @delete=\"handleDelete\" show-add-button auto-switch>\n    <a-tab-pane v-for=\"(item, index) of data\" :key=\"item.key\" :title=\"item.title\" :closable=\"index!==2\">\n      {{ item?.content }}\n    </a-tab-pane>\n  </a-tabs>\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nlet count = 5;\n\nexport default {\n  setup() {\n    const data = ref([\n      {\n        key: '1',\n        title: 'Tab 1',\n        content: 'Content of Tab Panel 1'\n      },\n      {\n        key: '2',\n        title: 'Tab 2',\n        content: 'Content of Tab Panel 2'\n      },\n      {\n        key: '3',\n        title: 'Tab 3',\n        content: 'Content of Tab Panel 3'\n      },\n      {\n        key: '4',\n        title: 'Tab 4',\n        content: 'Content of Tab Panel 4'\n      }\n    ]);\n\n    const handleAdd = () => {\n      const number = count++;\n      data.value = data.value.concat({\n        key: `${number}`,\n        title: `New Tab ${number}`,\n        content: `Content of New Tab Panel ${number}`\n      })\n    };\n    const handleDelete = (key) => {\n      data.value = data.value.filter(item => item.key !== key)\n    };\n\n    return {\n      data,\n      handleAdd,\n      handleDelete\n    }\n  },\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/tabs/__demo__/extra.md",
    "content": "```yaml\ntitle:\n  zh-CN: 附加内容\n  en-US: Extra\n```\n\n## zh-CN\n\n通过 `extra` 插槽可以自定义额外显示内容。\n\n---\n\n## en-US\n\nThe extra display content can be customized through the `extra` slot.\n\n---\n\n```vue\n<template>\n  <a-tabs>\n    <template #extra>\n      <a-button>Action</a-button>\n    </template>\n    <a-tab-pane key=\"1\" title=\"Tab 1\">\n      Content of Tab Panel 1\n    </a-tab-pane>\n    <a-tab-pane key=\"2\" title=\"Tab 2\">\n      Content of Tab Panel 2\n    </a-tab-pane>\n    <a-tab-pane key=\"3\" title=\"Tab 3\">\n      Content of Tab Panel 3\n    </a-tab-pane>\n  </a-tabs>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/tabs/__demo__/icon.md",
    "content": "```yaml\ntitle:\n  zh-CN: 带图标的页签\n  en-US: Icon Tab\n```\n\n## zh-CN\n\n带有图标的标签页。\n\n---\n\n## en-US\n\nTab page with icons.\n\n---\n\n```vue\n<template>\n  <a-tabs>\n    <a-tab-pane key=\"1\">\n      <template #title>\n        <icon-calendar/> Tab 1\n      </template>\n      Content of Tab Panel 1\n    </a-tab-pane>\n    <a-tab-pane key=\"2\">\n      <template #title>\n        <icon-clock-circle/> Tab 2\n      </template>\n      Content of Tab Panel 2\n    </a-tab-pane>\n    <a-tab-pane key=\"3\">\n      <template #title>\n        <icon-user/> Tab 3\n      </template>\n      Content of Tab Panel 3\n    </a-tab-pane>\n  </a-tabs>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/tabs/__demo__/lazy.md",
    "content": "```yaml\ntitle:\n  zh-CN: 懒加载\n  en-US: Lazy load\n```\n\n## zh-CN\n\n通过设置 lazy-load 属性，可以让面板在首次激活时渲染。\n\n---\n\n## en-US\n\nBy setting the lazy-load property, the panel can be rendered when it is first activated.\n\n---\n\n```vue\n<template>\n  <a-tabs default-active-key=\"2\" lazy-load>\n    <a-tab-pane key=\"1\" title=\"Tab 1\">\n      Content of Tab Panel 1\n    </a-tab-pane>\n    <a-tab-pane key=\"2\" title=\"Tab 2\">\n      Content of Tab Panel 2\n    </a-tab-pane>\n    <a-tab-pane key=\"3\" title=\"Tab 3\">\n      Content of Tab Panel 3\n    </a-tab-pane>\n  </a-tabs>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/tabs/__demo__/position.md",
    "content": "```yaml\ntitle:\n  zh-CN: 位置\n  en-US: Position\n```\n\n## zh-CN\n\n通过 `position` 属性可以自定义标签栏的位置。\n\n---\n\n## en-US\n\nThe position of the tab bar can be customized through the `position` property.\n\n---\n\n```vue\n<template>\n  <a-space direction=\"vertical\" size=\"large\">\n    <a-radio-group v-model=\"position\" type=\"button\">\n      <a-radio value=\"top\">Top</a-radio>\n      <a-radio value=\"right\">Right</a-radio>\n      <a-radio value=\"bottom\">Bottom</a-radio>\n      <a-radio value=\"left\">Left</a-radio>\n    </a-radio-group>\n    <a-tabs :position=\"position\">\n      <a-tab-pane key=\"1\" title=\"Tab 1\">\n        Content of Tab Panel 1\n      </a-tab-pane>\n      <a-tab-pane key=\"2\" title=\"Tab 2\">\n        Content of Tab Panel 2\n      </a-tab-pane>\n      <a-tab-pane key=\"3\" title=\"Tab 3\">\n        Content of Tab Panel 3\n      </a-tab-pane>\n    </a-tabs>\n  </a-space>\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n  setup() {\n    const position = ref('top');\n\n    return {\n      position\n    }\n  },\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/tabs/__demo__/scroll.md",
    "content": "```yaml\ntitle:\n  zh-CN: 滚动\n  en-US: Scrollable\n```\n\n## zh-CN\n\n支持通过滚轮或者触摸板进行滚动操作，且可以通过 `scrollPosition` 属性设置滚动位置。\n\n---\n\n## en-US\n\nSupport scrolling operation via scroll wheel or touch pad. And you can set the scroll position through the `scrollPosition` property.\n\n---\n\n```vue\n\n<template>\n  <a-space direction=\"vertical\" size=\"large\">\n    <a-radio-group v-model=\"position\" type=\"button\">\n      <a-radio value=\"left\">Left</a-radio>\n      <a-radio value=\"top\">Top</a-radio>\n      <a-radio value=\"right\">Right</a-radio>\n      <a-radio value=\"bottom\">Bottom</a-radio>\n    </a-radio-group>\n    <a-radio-group v-model=\"scrollPosition\" type=\"button\">\n      <a-radio value=\"auto\">auto</a-radio>\n      <a-radio value=\"start\">start</a-radio>\n      <a-radio value=\"center\">center</a-radio>\n      <a-radio value=\"end\">end</a-radio>\n    </a-radio-group>\n    <a-button @click=\"changeActive\"> Change: {{activeKey}}</a-button>\n  </a-space>\n  <a-tabs\n    v-model:activeKey=\"activeKey\"\n    :position=\"position\"\n    :scrollPosition=\"scrollPosition\"\n    style=\"width: 100%;height: 300px;margin-top: 20px\"\n  >\n    <a-tab-pane v-for=\"tab in tabs\" :key=\"tab.key\" :title=\"tab.title\">\n      {{ tab.content }}\n    </a-tab-pane>\n  </a-tabs>\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n  setup() {\n    const position = ref('top');\n    const scrollPosition = ref('auto');\n    const activeKey = ref('Tab1');\n    const tabs = Array.from({ length: 30 }, (v, i) => {\n      return {\n        key: `Tab${i + 1}`,\n        title: `Tab ${i + 1}`,\n        content: `Content of Tab Panel ${i + 1}`\n      }\n    });\n\n    const changeActive = () => {\n      activeKey.value = `Tab${Math.floor(Math.random() * 30) + 1}`;\n    }\n\n    return {\n      tabs,\n      position,\n      scrollPosition,\n      activeKey,\n      changeActive\n    }\n  },\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/tabs/__demo__/trigger.md",
    "content": "```yaml\ntitle:\n  zh-CN: 触发方式\n  en-US: Trigger\n```\n\n## zh-CN\n\n通过 `trigger` 指定触发方式。\n\n---\n\n## en-US\n\nSpecify the trigger method by `trigger`.\n\n---\n\n```vue\n<template>\n  <a-radio-group v-model=\"trigger\">\n    <a-radio value=\"click\">click</a-radio>\n    <a-radio value=\"hover\">hover</a-radio>\n  </a-radio-group>\n  <a-tabs default-active-key=\"1\" :trigger=\"trigger\">\n    <a-tab-pane key=\"1\" title=\"Tab 1\"> Content of Tab Panel 1 </a-tab-pane>\n    <a-tab-pane key=\"2\" title=\"Tab 2\"> Content of Tab Panel 2 </a-tab-pane>\n    <a-tab-pane key=\"3\">\n      <template #title>Tab 3</template>\n      Content of Tab Panel 3\n    </a-tab-pane>\n  </a-tabs>\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n  setup() {\n    const trigger = ref('click');\n    return {\n      trigger,\n    };\n  },\n};\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/tabs/__demo__/type.md",
    "content": "```yaml\ntitle:\n  zh-CN: 不同类型\n  en-US: Types\n```\n\n## zh-CN\n\n通过 `type` 可以设置标签的类型。\n\n---\n\n## en-US\n\nThe type of label can be set by `type`.\n\n---\n\n```vue\n\n<template>\n  <a-space direction=\"vertical\" size=\"large\">\n    <a-radio-group v-model=\"type\" type=\"button\">\n      <a-radio value=\"line\">Line</a-radio>\n      <a-radio value=\"card\">Card</a-radio>\n      <a-radio value=\"card-gutter\">Card Gutter</a-radio>\n      <a-radio value=\"text\">Text</a-radio>\n      <a-radio value=\"rounded\">Rounded</a-radio>\n      <a-radio value=\"capsule\">Capsule</a-radio>\n    </a-radio-group>\n    <a-radio-group v-model=\"size\" type=\"button\">\n      <a-radio value=\"mini\">Mini</a-radio>\n      <a-radio value=\"small\">Small</a-radio>\n      <a-radio value=\"medium\">Medium</a-radio>\n      <a-radio value=\"large\">Large</a-radio>\n    </a-radio-group>\n    <a-tabs :type=\"type\" :size=\"size\">\n      <a-tab-pane key=\"1\" title=\"Tab 1\">\n        Content of Tab Panel 1\n      </a-tab-pane>\n      <a-tab-pane key=\"2\" title=\"Tab 2\">\n        Content of Tab Panel 2\n      </a-tab-pane>\n      <a-tab-pane key=\"3\" title=\"Tab 3\">\n        Content of Tab Panel 3\n      </a-tab-pane>\n    </a-tabs>\n  </a-space>\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n  setup() {\n    const type = ref('line');\n    const size = ref('medium');\n\n    return {\n      type,\n      size\n    }\n  },\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/tabs/__test__/__snapshots__/demo.test.ts.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`<tabs> demo: render [basic] correctly 1`] = `\n\"<div class=\\\\\"arco-tabs arco-tabs-horizontal arco-tabs-top arco-tabs-type-line arco-tabs-size-medium\\\\\">\n  <!---->\n  <div class=\\\\\"arco-tabs-nav arco-tabs-nav-horizontal arco-tabs-nav-top arco-tabs-nav-size-medium arco-tabs-nav-type-line\\\\\">\n    <!---->\n    <div class=\\\\\"arco-tabs-nav-tab\\\\\">\n      <div class=\\\\\"arco-tabs-nav-tab-list\\\\\" style=\\\\\"transform: translateX(0px);\\\\\">\n        <!---->\n      </div>\n      <!---->\n    </div>\n    <!---->\n    <div class=\\\\\"arco-tabs-nav-extra\\\\\">\n      <!---->\n      <!---->\n    </div>\n  </div>\n  <div class=\\\\\"arco-tabs-content\\\\\">\n    <div class=\\\\\"arco-tabs-content-list\\\\\" style=\\\\\"margin-left: -0%;\\\\\">\n      <div class=\\\\\"arco-tabs-content-item\\\\\">\n        <div class=\\\\\"arco-tabs-pane\\\\\"> Content of Tab Panel 1 </div>\n      </div>\n      <div class=\\\\\"arco-tabs-content-item arco-tabs-content-item-active\\\\\">\n        <div class=\\\\\"arco-tabs-pane\\\\\"> Content of Tab Panel 2 </div>\n      </div>\n      <div class=\\\\\"arco-tabs-content-item\\\\\">\n        <div class=\\\\\"arco-tabs-pane\\\\\"> Content of Tab Panel 3 </div>\n      </div>\n    </div>\n  </div>\n</div>\"\n`;\n\nexports[`<tabs> demo: render [editable] correctly 1`] = `\n\"<div class=\\\\\"arco-tabs arco-tabs-horizontal arco-tabs-top arco-tabs-type-card-gutter arco-tabs-size-medium\\\\\">\n  <!---->\n  <div class=\\\\\"arco-tabs-nav arco-tabs-nav-horizontal arco-tabs-nav-top arco-tabs-nav-size-medium arco-tabs-nav-type-card-gutter\\\\\">\n    <!---->\n    <div class=\\\\\"arco-tabs-nav-tab\\\\\">\n      <div class=\\\\\"arco-tabs-nav-tab-list\\\\\" style=\\\\\"transform: translateX(0px);\\\\\">\n        <!---->\n      </div>\n      <div class=\\\\\"arco-tabs-nav-add-btn\\\\\"><span class=\\\\\"arco-icon-hover\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-plus\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M5 24h38M24 5v38\\\\\"></path></svg></span></div>\n    </div>\n    <!---->\n    <div class=\\\\\"arco-tabs-nav-extra\\\\\">\n      <!---->\n      <!---->\n    </div>\n  </div>\n  <div class=\\\\\"arco-tabs-content\\\\\">\n    <div class=\\\\\"arco-tabs-content-list\\\\\" style=\\\\\"margin-left: -0%;\\\\\">\n      <div class=\\\\\"arco-tabs-content-item\\\\\">\n        <div class=\\\\\"arco-tabs-pane\\\\\">Content of Tab Panel 1</div>\n      </div>\n      <div class=\\\\\"arco-tabs-content-item\\\\\">\n        <div class=\\\\\"arco-tabs-pane\\\\\">Content of Tab Panel 2</div>\n      </div>\n      <div class=\\\\\"arco-tabs-content-item\\\\\">\n        <div class=\\\\\"arco-tabs-pane\\\\\">Content of Tab Panel 3</div>\n      </div>\n      <div class=\\\\\"arco-tabs-content-item\\\\\">\n        <div class=\\\\\"arco-tabs-pane\\\\\">Content of Tab Panel 4</div>\n      </div>\n    </div>\n  </div>\n</div>\"\n`;\n\nexports[`<tabs> demo: render [extra] correctly 1`] = `\n\"<div class=\\\\\"arco-tabs arco-tabs-horizontal arco-tabs-top arco-tabs-type-line arco-tabs-size-medium\\\\\">\n  <!---->\n  <div class=\\\\\"arco-tabs-nav arco-tabs-nav-horizontal arco-tabs-nav-top arco-tabs-nav-size-medium arco-tabs-nav-type-line\\\\\">\n    <!---->\n    <div class=\\\\\"arco-tabs-nav-tab\\\\\">\n      <div class=\\\\\"arco-tabs-nav-tab-list\\\\\" style=\\\\\"transform: translateX(0px);\\\\\">\n        <!---->\n      </div>\n      <!---->\n    </div>\n    <!---->\n    <div class=\\\\\"arco-tabs-nav-extra\\\\\">\n      <!----><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n        <!--v-if-->Action\n      </button>\n    </div>\n  </div>\n  <div class=\\\\\"arco-tabs-content\\\\\">\n    <div class=\\\\\"arco-tabs-content-list\\\\\" style=\\\\\"margin-left: -0%;\\\\\">\n      <div class=\\\\\"arco-tabs-content-item\\\\\">\n        <div class=\\\\\"arco-tabs-pane\\\\\"> Content of Tab Panel 1 </div>\n      </div>\n      <div class=\\\\\"arco-tabs-content-item\\\\\">\n        <div class=\\\\\"arco-tabs-pane\\\\\"> Content of Tab Panel 2 </div>\n      </div>\n      <div class=\\\\\"arco-tabs-content-item\\\\\">\n        <div class=\\\\\"arco-tabs-pane\\\\\"> Content of Tab Panel 3 </div>\n      </div>\n    </div>\n  </div>\n</div>\"\n`;\n\nexports[`<tabs> demo: render [icon] correctly 1`] = `\n\"<div class=\\\\\"arco-tabs arco-tabs-horizontal arco-tabs-top arco-tabs-type-line arco-tabs-size-medium\\\\\">\n  <!---->\n  <div class=\\\\\"arco-tabs-nav arco-tabs-nav-horizontal arco-tabs-nav-top arco-tabs-nav-size-medium arco-tabs-nav-type-line\\\\\">\n    <!---->\n    <div class=\\\\\"arco-tabs-nav-tab\\\\\">\n      <div class=\\\\\"arco-tabs-nav-tab-list\\\\\" style=\\\\\"transform: translateX(0px);\\\\\">\n        <!---->\n      </div>\n      <!---->\n    </div>\n    <!---->\n    <div class=\\\\\"arco-tabs-nav-extra\\\\\">\n      <!---->\n      <!---->\n    </div>\n  </div>\n  <div class=\\\\\"arco-tabs-content\\\\\">\n    <div class=\\\\\"arco-tabs-content-list\\\\\" style=\\\\\"margin-left: -0%;\\\\\">\n      <div class=\\\\\"arco-tabs-content-item\\\\\">\n        <div class=\\\\\"arco-tabs-pane\\\\\"> Content of Tab Panel 1 </div>\n      </div>\n      <div class=\\\\\"arco-tabs-content-item\\\\\">\n        <div class=\\\\\"arco-tabs-pane\\\\\"> Content of Tab Panel 2 </div>\n      </div>\n      <div class=\\\\\"arco-tabs-content-item\\\\\">\n        <div class=\\\\\"arco-tabs-pane\\\\\"> Content of Tab Panel 3 </div>\n      </div>\n    </div>\n  </div>\n</div>\"\n`;\n\nexports[`<tabs> demo: render [lazy] correctly 1`] = `\n\"<div class=\\\\\"arco-tabs arco-tabs-horizontal arco-tabs-top arco-tabs-type-line arco-tabs-size-medium\\\\\">\n  <!---->\n  <div class=\\\\\"arco-tabs-nav arco-tabs-nav-horizontal arco-tabs-nav-top arco-tabs-nav-size-medium arco-tabs-nav-type-line\\\\\">\n    <!---->\n    <div class=\\\\\"arco-tabs-nav-tab\\\\\">\n      <div class=\\\\\"arco-tabs-nav-tab-list\\\\\" style=\\\\\"transform: translateX(0px);\\\\\">\n        <!---->\n      </div>\n      <!---->\n    </div>\n    <!---->\n    <div class=\\\\\"arco-tabs-nav-extra\\\\\">\n      <!---->\n      <!---->\n    </div>\n  </div>\n  <div class=\\\\\"arco-tabs-content\\\\\">\n    <div class=\\\\\"arco-tabs-content-list\\\\\" style=\\\\\"margin-left: -0%;\\\\\">\n      <div class=\\\\\"arco-tabs-content-item\\\\\">\n        <!--v-if-->\n      </div>\n      <div class=\\\\\"arco-tabs-content-item arco-tabs-content-item-active\\\\\">\n        <div class=\\\\\"arco-tabs-pane\\\\\"> Content of Tab Panel 2 </div>\n      </div>\n      <div class=\\\\\"arco-tabs-content-item\\\\\">\n        <!--v-if-->\n      </div>\n    </div>\n  </div>\n</div>\"\n`;\n\nexports[`<tabs> demo: render [position] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-vertical\\\\\" style=\\\\\"column-gap: 24px; row-gap: 24px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-radio-group-button arco-radio-group-size-medium arco-radio-group-direction-horizontal\\\\\"><label class=\\\\\"arco-radio-button arco-radio-checked\\\\\"><input type=\\\\\"radio\\\\\" checked=\\\\\"\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"top\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">Top</span></label><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"right\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">Right</span></label><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"bottom\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">Bottom</span></label><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"left\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">Left</span></label></span></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-tabs arco-tabs-horizontal arco-tabs-top arco-tabs-type-line arco-tabs-size-medium\\\\\">\n      <!---->\n      <div class=\\\\\"arco-tabs-nav arco-tabs-nav-horizontal arco-tabs-nav-top arco-tabs-nav-size-medium arco-tabs-nav-type-line\\\\\">\n        <!---->\n        <div class=\\\\\"arco-tabs-nav-tab\\\\\">\n          <div class=\\\\\"arco-tabs-nav-tab-list\\\\\" style=\\\\\"transform: translateX(0px);\\\\\">\n            <!---->\n          </div>\n          <!---->\n        </div>\n        <!---->\n        <div class=\\\\\"arco-tabs-nav-extra\\\\\">\n          <!---->\n          <!---->\n        </div>\n      </div>\n      <div class=\\\\\"arco-tabs-content\\\\\">\n        <div class=\\\\\"arco-tabs-content-list\\\\\" style=\\\\\"margin-left: -0%;\\\\\">\n          <div class=\\\\\"arco-tabs-content-item\\\\\">\n            <div class=\\\\\"arco-tabs-pane\\\\\"> Content of Tab Panel 1 </div>\n          </div>\n          <div class=\\\\\"arco-tabs-content-item\\\\\">\n            <div class=\\\\\"arco-tabs-pane\\\\\"> Content of Tab Panel 2 </div>\n          </div>\n          <div class=\\\\\"arco-tabs-content-item\\\\\">\n            <div class=\\\\\"arco-tabs-pane\\\\\"> Content of Tab Panel 3 </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\"\n`;\n\nexports[`<tabs> demo: render [scroll] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-vertical\\\\\" style=\\\\\"column-gap: 24px; row-gap: 24px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-radio-group-button arco-radio-group-size-medium arco-radio-group-direction-horizontal\\\\\"><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"left\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">Left</span></label><label class=\\\\\"arco-radio-button arco-radio-checked\\\\\"><input type=\\\\\"radio\\\\\" checked=\\\\\"\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"top\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">Top</span></label><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"right\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">Right</span></label><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"bottom\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">Bottom</span></label></span></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-radio-group-button arco-radio-group-size-medium arco-radio-group-direction-horizontal\\\\\"><label class=\\\\\"arco-radio-button arco-radio-checked\\\\\"><input type=\\\\\"radio\\\\\" checked=\\\\\"\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"auto\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">auto</span></label><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"start\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">start</span></label><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"center\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">center</span></label><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"end\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">end</span></label></span></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n      <!--v-if--> Change: Tab1\n    </button></div>\n</div>\n<div class=\\\\\"arco-tabs arco-tabs-horizontal arco-tabs-top arco-tabs-type-line arco-tabs-size-medium\\\\\" style=\\\\\"width: 100%; height: 300px; margin-top: 20px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-tabs-nav arco-tabs-nav-horizontal arco-tabs-nav-top arco-tabs-nav-size-medium arco-tabs-nav-type-line\\\\\">\n    <!---->\n    <div class=\\\\\"arco-tabs-nav-tab\\\\\">\n      <div class=\\\\\"arco-tabs-nav-tab-list\\\\\" style=\\\\\"transform: translateX(0px);\\\\\">\n        <!---->\n      </div>\n      <!---->\n    </div>\n    <!---->\n    <div class=\\\\\"arco-tabs-nav-extra\\\\\">\n      <!---->\n      <!---->\n    </div>\n  </div>\n  <div class=\\\\\"arco-tabs-content\\\\\">\n    <div class=\\\\\"arco-tabs-content-list\\\\\" style=\\\\\"margin-left: -0%;\\\\\">\n      <div class=\\\\\"arco-tabs-content-item arco-tabs-content-item-active\\\\\">\n        <div class=\\\\\"arco-tabs-pane\\\\\">Content of Tab Panel 1</div>\n      </div>\n      <div class=\\\\\"arco-tabs-content-item\\\\\">\n        <div class=\\\\\"arco-tabs-pane\\\\\">Content of Tab Panel 2</div>\n      </div>\n      <div class=\\\\\"arco-tabs-content-item\\\\\">\n        <div class=\\\\\"arco-tabs-pane\\\\\">Content of Tab Panel 3</div>\n      </div>\n      <div class=\\\\\"arco-tabs-content-item\\\\\">\n        <div class=\\\\\"arco-tabs-pane\\\\\">Content of Tab Panel 4</div>\n      </div>\n      <div class=\\\\\"arco-tabs-content-item\\\\\">\n        <div class=\\\\\"arco-tabs-pane\\\\\">Content of Tab Panel 5</div>\n      </div>\n      <div class=\\\\\"arco-tabs-content-item\\\\\">\n        <div class=\\\\\"arco-tabs-pane\\\\\">Content of Tab Panel 6</div>\n      </div>\n      <div class=\\\\\"arco-tabs-content-item\\\\\">\n        <div class=\\\\\"arco-tabs-pane\\\\\">Content of Tab Panel 7</div>\n      </div>\n      <div class=\\\\\"arco-tabs-content-item\\\\\">\n        <div class=\\\\\"arco-tabs-pane\\\\\">Content of Tab Panel 8</div>\n      </div>\n      <div class=\\\\\"arco-tabs-content-item\\\\\">\n        <div class=\\\\\"arco-tabs-pane\\\\\">Content of Tab Panel 9</div>\n      </div>\n      <div class=\\\\\"arco-tabs-content-item\\\\\">\n        <div class=\\\\\"arco-tabs-pane\\\\\">Content of Tab Panel 10</div>\n      </div>\n      <div class=\\\\\"arco-tabs-content-item\\\\\">\n        <div class=\\\\\"arco-tabs-pane\\\\\">Content of Tab Panel 11</div>\n      </div>\n      <div class=\\\\\"arco-tabs-content-item\\\\\">\n        <div class=\\\\\"arco-tabs-pane\\\\\">Content of Tab Panel 12</div>\n      </div>\n      <div class=\\\\\"arco-tabs-content-item\\\\\">\n        <div class=\\\\\"arco-tabs-pane\\\\\">Content of Tab Panel 13</div>\n      </div>\n      <div class=\\\\\"arco-tabs-content-item\\\\\">\n        <div class=\\\\\"arco-tabs-pane\\\\\">Content of Tab Panel 14</div>\n      </div>\n      <div class=\\\\\"arco-tabs-content-item\\\\\">\n        <div class=\\\\\"arco-tabs-pane\\\\\">Content of Tab Panel 15</div>\n      </div>\n      <div class=\\\\\"arco-tabs-content-item\\\\\">\n        <div class=\\\\\"arco-tabs-pane\\\\\">Content of Tab Panel 16</div>\n      </div>\n      <div class=\\\\\"arco-tabs-content-item\\\\\">\n        <div class=\\\\\"arco-tabs-pane\\\\\">Content of Tab Panel 17</div>\n      </div>\n      <div class=\\\\\"arco-tabs-content-item\\\\\">\n        <div class=\\\\\"arco-tabs-pane\\\\\">Content of Tab Panel 18</div>\n      </div>\n      <div class=\\\\\"arco-tabs-content-item\\\\\">\n        <div class=\\\\\"arco-tabs-pane\\\\\">Content of Tab Panel 19</div>\n      </div>\n      <div class=\\\\\"arco-tabs-content-item\\\\\">\n        <div class=\\\\\"arco-tabs-pane\\\\\">Content of Tab Panel 20</div>\n      </div>\n      <div class=\\\\\"arco-tabs-content-item\\\\\">\n        <div class=\\\\\"arco-tabs-pane\\\\\">Content of Tab Panel 21</div>\n      </div>\n      <div class=\\\\\"arco-tabs-content-item\\\\\">\n        <div class=\\\\\"arco-tabs-pane\\\\\">Content of Tab Panel 22</div>\n      </div>\n      <div class=\\\\\"arco-tabs-content-item\\\\\">\n        <div class=\\\\\"arco-tabs-pane\\\\\">Content of Tab Panel 23</div>\n      </div>\n      <div class=\\\\\"arco-tabs-content-item\\\\\">\n        <div class=\\\\\"arco-tabs-pane\\\\\">Content of Tab Panel 24</div>\n      </div>\n      <div class=\\\\\"arco-tabs-content-item\\\\\">\n        <div class=\\\\\"arco-tabs-pane\\\\\">Content of Tab Panel 25</div>\n      </div>\n      <div class=\\\\\"arco-tabs-content-item\\\\\">\n        <div class=\\\\\"arco-tabs-pane\\\\\">Content of Tab Panel 26</div>\n      </div>\n      <div class=\\\\\"arco-tabs-content-item\\\\\">\n        <div class=\\\\\"arco-tabs-pane\\\\\">Content of Tab Panel 27</div>\n      </div>\n      <div class=\\\\\"arco-tabs-content-item\\\\\">\n        <div class=\\\\\"arco-tabs-pane\\\\\">Content of Tab Panel 28</div>\n      </div>\n      <div class=\\\\\"arco-tabs-content-item\\\\\">\n        <div class=\\\\\"arco-tabs-pane\\\\\">Content of Tab Panel 29</div>\n      </div>\n      <div class=\\\\\"arco-tabs-content-item\\\\\">\n        <div class=\\\\\"arco-tabs-pane\\\\\">Content of Tab Panel 30</div>\n      </div>\n    </div>\n  </div>\n</div>\"\n`;\n\nexports[`<tabs> demo: render [trigger] correctly 1`] = `\n\"<span class=\\\\\"arco-radio-group arco-radio-group-size-medium arco-radio-group-direction-horizontal\\\\\"><label class=\\\\\"arco-radio arco-radio-checked\\\\\"><input type=\\\\\"radio\\\\\" checked=\\\\\"\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"click\\\\\"><span class=\\\\\"arco-icon-hover arco-icon-hover-disabled arco-radio-icon-hover\\\\\"><span class=\\\\\"arco-radio-icon\\\\\"></span></span><span class=\\\\\"arco-radio-label\\\\\">click</span></label><label class=\\\\\"arco-radio\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"hover\\\\\"><span class=\\\\\"arco-icon-hover arco-radio-icon-hover\\\\\"><span class=\\\\\"arco-radio-icon\\\\\"></span></span><span class=\\\\\"arco-radio-label\\\\\">hover</span></label></span>\n<div class=\\\\\"arco-tabs arco-tabs-horizontal arco-tabs-top arco-tabs-type-line arco-tabs-size-medium\\\\\">\n  <!---->\n  <div class=\\\\\"arco-tabs-nav arco-tabs-nav-horizontal arco-tabs-nav-top arco-tabs-nav-size-medium arco-tabs-nav-type-line\\\\\">\n    <!---->\n    <div class=\\\\\"arco-tabs-nav-tab\\\\\">\n      <div class=\\\\\"arco-tabs-nav-tab-list\\\\\" style=\\\\\"transform: translateX(0px);\\\\\">\n        <!---->\n      </div>\n      <!---->\n    </div>\n    <!---->\n    <div class=\\\\\"arco-tabs-nav-extra\\\\\">\n      <!---->\n      <!---->\n    </div>\n  </div>\n  <div class=\\\\\"arco-tabs-content\\\\\">\n    <div class=\\\\\"arco-tabs-content-list\\\\\" style=\\\\\"margin-left: -0%;\\\\\">\n      <div class=\\\\\"arco-tabs-content-item arco-tabs-content-item-active\\\\\">\n        <div class=\\\\\"arco-tabs-pane\\\\\"> Content of Tab Panel 1 </div>\n      </div>\n      <div class=\\\\\"arco-tabs-content-item\\\\\">\n        <div class=\\\\\"arco-tabs-pane\\\\\"> Content of Tab Panel 2 </div>\n      </div>\n      <div class=\\\\\"arco-tabs-content-item\\\\\">\n        <div class=\\\\\"arco-tabs-pane\\\\\"> Content of Tab Panel 3 </div>\n      </div>\n    </div>\n  </div>\n</div>\"\n`;\n\nexports[`<tabs> demo: render [type] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-vertical\\\\\" style=\\\\\"column-gap: 24px; row-gap: 24px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-radio-group-button arco-radio-group-size-medium arco-radio-group-direction-horizontal\\\\\"><label class=\\\\\"arco-radio-button arco-radio-checked\\\\\"><input type=\\\\\"radio\\\\\" checked=\\\\\"\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"line\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">Line</span></label><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"card\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">Card</span></label><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"card-gutter\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">Card Gutter</span></label><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"text\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">Text</span></label><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"rounded\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">Rounded</span></label><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"capsule\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">Capsule</span></label></span></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-radio-group-button arco-radio-group-size-medium arco-radio-group-direction-horizontal\\\\\"><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"mini\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">Mini</span></label><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"small\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">Small</span></label><label class=\\\\\"arco-radio-button arco-radio-checked\\\\\"><input type=\\\\\"radio\\\\\" checked=\\\\\"\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"medium\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">Medium</span></label><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"large\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">Large</span></label></span></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-tabs arco-tabs-horizontal arco-tabs-top arco-tabs-type-line arco-tabs-size-medium\\\\\">\n      <!---->\n      <div class=\\\\\"arco-tabs-nav arco-tabs-nav-horizontal arco-tabs-nav-top arco-tabs-nav-size-medium arco-tabs-nav-type-line\\\\\">\n        <!---->\n        <div class=\\\\\"arco-tabs-nav-tab\\\\\">\n          <div class=\\\\\"arco-tabs-nav-tab-list\\\\\" style=\\\\\"transform: translateX(0px);\\\\\">\n            <!---->\n          </div>\n          <!---->\n        </div>\n        <!---->\n        <div class=\\\\\"arco-tabs-nav-extra\\\\\">\n          <!---->\n          <!---->\n        </div>\n      </div>\n      <div class=\\\\\"arco-tabs-content\\\\\">\n        <div class=\\\\\"arco-tabs-content-list\\\\\" style=\\\\\"margin-left: -0%;\\\\\">\n          <div class=\\\\\"arco-tabs-content-item\\\\\">\n            <div class=\\\\\"arco-tabs-pane\\\\\"> Content of Tab Panel 1 </div>\n          </div>\n          <div class=\\\\\"arco-tabs-content-item\\\\\">\n            <div class=\\\\\"arco-tabs-pane\\\\\"> Content of Tab Panel 2 </div>\n          </div>\n          <div class=\\\\\"arco-tabs-content-item\\\\\">\n            <div class=\\\\\"arco-tabs-pane\\\\\"> Content of Tab Panel 3 </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\"\n`;\n"
  },
  {
    "path": "packages/web-vue/components/tabs/__test__/demo.test.ts",
    "content": "import demoTest from '../../../scripts/demo-test';\n\ndemoTest('tabs');\n"
  },
  {
    "path": "packages/web-vue/components/tabs/__test__/index.test.ts",
    "content": "import { nextTick } from 'vue';\nimport { mount } from '@vue/test-utils';\nimport Tabs from '../index';\n\nconst { TabPane } = Tabs;\n\ndescribe('Tabs', () => {\n  test('should emit change event', async () => {\n    const wrapper = mount(Tabs, {\n      global: {\n        components: {\n          TabPane,\n        },\n      },\n      slots: {\n        default:\n          '<tab-pane key=\"1\" title=\"Tab 1\">Panel 1</tab-pane>' +\n          '<tab-pane key=\"2\" title=\"Tab 2\">Panel 2</tab-pane>',\n      },\n    });\n\n    await nextTick();\n\n    await wrapper.findAll('.arco-tabs-tab')[1].trigger('click');\n\n    expect(wrapper.emitted('change')?.[0]).toEqual(['2']);\n  });\n\n  test('should emit add/delete event', async () => {\n    const wrapper = mount(Tabs, {\n      global: {\n        components: {\n          TabPane,\n        },\n      },\n      slots: {\n        default:\n          '<tab-pane key=\"1\" title=\"Tab 1\">Panel 1</tab-pane>' +\n          '<tab-pane key=\"2\" title=\"Tab 2\">Panel 2</tab-pane>',\n      },\n      props: {\n        editable: true,\n        showAddButton: true,\n      },\n    });\n\n    await nextTick();\n\n    await wrapper.find('.arco-tabs-nav-add-btn').trigger('click');\n    expect(wrapper.emitted('add')).toHaveLength(1);\n    await wrapper.find('.arco-tabs-tab-close-btn').trigger('click');\n    expect(wrapper.emitted('delete')).toHaveLength(1);\n  });\n});\n"
  },
  {
    "path": "packages/web-vue/components/tabs/context.ts",
    "content": "import { InjectionKey } from 'vue';\nimport { TabData, TabTriggerEvent } from './interface';\n\nexport interface TabsContext {\n  lazyLoad: boolean;\n  destroyOnHide: boolean;\n  activeKey: string | number;\n  addItem: (id: number, data: TabData) => void;\n  removeItem: (id: number) => void;\n  trigger: TabTriggerEvent;\n}\n\nexport const tabsInjectionKey: InjectionKey<TabsContext> = Symbol('ArcoTabs');\n"
  },
  {
    "path": "packages/web-vue/components/tabs/index.ts",
    "content": "import type { App } from 'vue';\nimport type { ArcoOptions } from '../_utils/types';\nimport { setGlobalConfig, getComponentPrefix } from '../_utils/global-config';\nimport _Tabs from './tabs';\nimport _TabPane from './tab-pane.vue';\n\nconst Tabs = Object.assign(_Tabs, {\n  TabPane: _TabPane,\n  install: (app: App, options?: ArcoOptions) => {\n    setGlobalConfig(app, options);\n    const componentPrefix = getComponentPrefix(options);\n\n    app.component(componentPrefix + _Tabs.name, _Tabs);\n    app.component(componentPrefix + _TabPane.name, _TabPane);\n  },\n});\n\nexport type TabsInstance = InstanceType<typeof _Tabs>;\nexport type TabPaneInstance = InstanceType<typeof _TabPane>;\n\nexport { _TabPane as TabPane };\n\nexport default Tabs;\n"
  },
  {
    "path": "packages/web-vue/components/tabs/interface.ts",
    "content": "import type { Slots } from 'vue';\n\nexport type TabsPosition = 'left' | 'right' | 'top' | 'bottom';\n\nexport type TabsType =\n  | 'line'\n  | 'card'\n  | 'card-gutter'\n  | 'text'\n  | 'rounded'\n  | 'capsule';\n\nexport interface TabData {\n  key: string | number;\n  title?: string;\n  disabled?: boolean;\n  closable?: boolean;\n  slots: Slots;\n}\n\nexport type TabTriggerEvent = 'click' | 'hover';\n\nexport type ScrollPosition = 'start' | 'end' | 'center' | 'auto' | number;\n"
  },
  {
    "path": "packages/web-vue/components/tabs/style/index.less",
    "content": "@import './token.less';\n@import '../../style/mixins/index';\n\n@tabs-prefix-cls: ~'@{prefix}-tabs';\n\n.get-title-padding(@header-height, @font-size, @padding-vertical ) {\n  // prettier-ignore\n  @result: max(0, round((@header-height / 2) - @line-height-base * (@font-size / 2) - @padding-vertical));\n}\n\n// tabs icon style\n\n.icon-hover(@tabs-prefix-cls, @tabs-size-icon, @tabs-size-icon-bg);\n\n.@{tabs-prefix-cls} {\n  & &-icon-hover {\n    color: @tabs-color-icon;\n    font-size: @tabs-size-icon;\n    user-select: none;\n  }\n\n  &-dropdown-icon {\n    margin-left: @tabs-spacing-nav-icon-header;\n    font-size: @tabs-size-icon;\n    user-select: none;\n  }\n\n  &-tab-close-btn {\n    margin-left: @tabs-margin-close-icon-left;\n    user-select: none;\n  }\n\n  &-nav-add-btn {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0 @tabs-margin-add-icon-left;\n    font-size: @tabs-size-icon;\n    user-select: none;\n  }\n\n  &-add {\n    position: relative;\n  }\n\n  &-nav-button {\n    &-left {\n      margin-right: @tabs-spacing-nav-icon-header;\n      margin-left: @tabs-padding-header-wrapper-horizontal;\n    }\n\n    &-right {\n      margin-right: @tabs-padding-header-wrapper-horizontal;\n      margin-left: @tabs-spacing-nav-icon-header;\n    }\n\n    &-up {\n      margin-bottom: @tabs-padding-header-wrapper-horizontal;\n    }\n\n    &-down {\n      margin-top: @tabs-padding-header-wrapper-horizontal;\n    }\n\n    &-disabled {\n      color: @tabs-color-icon_disabled;\n      cursor: not-allowed;\n    }\n  }\n}\n\n.@{tabs-prefix-cls} {\n  position: relative;\n  overflow: hidden;\n\n  &-nav {\n    position: relative;\n    flex-shrink: 0;\n\n    &::before {\n      position: absolute;\n      right: 0;\n      bottom: 0;\n      left: 0;\n      display: block;\n      clear: both;\n      height: @tabs-line-size-header-border;\n      background-color: @tabs-line-color-header-border;\n      content: '';\n    }\n  }\n\n  &-nav-tab {\n    display: flex;\n    flex: 1;\n    overflow: hidden;\n  }\n\n  &-nav-tab-list {\n    position: relative;\n    display: inline-block;\n    white-space: nowrap;\n    transition: transform @transition-duration-2\n      @transition-timing-function-standard;\n  }\n\n  &-nav-extra {\n    display: flex;\n    align-items: center;\n    width: auto;\n    line-height: @tabs-size-default-header-height;\n\n    .@{tabs-prefix-cls}-nav-add-btn {\n      padding-left: 0;\n    }\n  }\n\n  &-tab {\n    display: inline-flex;\n    align-items: center;\n    box-sizing: border-box;\n    padding: .get-title-padding(\n        @tabs-size-default-header-height,\n        @tabs-size-default-font-size,\n        @tabs-padding-title-text-vertical\n      )\n      [] 0;\n    color: @tabs-color-title-text;\n    font-size: @tabs-size-default-font-size;\n    line-height: 1.5715;\n    outline: none;\n    cursor: pointer;\n    transition: color @transition-duration-2 @transition-timing-function-linear;\n\n    &-title {\n      display: inline-block;\n    }\n\n    &:hover {\n      color: @tabs-color-title-text_hover;\n      font-weight: @tabs-line-font-title-text-weight_hover;\n    }\n\n    &-disabled,\n    &-disabled:hover {\n      color: @tabs-color-title-text_disabled;\n      cursor: not-allowed;\n    }\n\n    &-active,\n    &-active:hover {\n      color: @tabs-color-title-text_active;\n      font-weight: @tabs-line-font-title-text-weight_active;\n\n      &.@{tabs-prefix-cls}-tab-disabled {\n        color: @tabs-color-title-text_disabled_active;\n      }\n    }\n  }\n\n  &-nav-ink {\n    position: absolute;\n    top: initial;\n    right: initial;\n    bottom: 0;\n    height: @tabs-line-size-ink-stroke;\n    background-color: @tabs-line-color-ink-bg;\n    transition: left @transition-duration-2 @transition-timing-function-standard,\n      width @transition-duration-2 @transition-timing-function-standard;\n\n    &.@{tabs-prefix-cls}-header-ink-no-animation {\n      transition: none;\n    }\n\n    &-disabled {\n      background-color: @tabs-line-color-ink-bg_disabled;\n    }\n  }\n}\n\n// card card-gutter 类型\n\n.@{tabs-prefix-cls} {\n  // type = line\n  &-nav-type-line &-nav-extra {\n    line-height: @tabs-size-default-header-height_line;\n  }\n\n  &-nav-type-line &-tab {\n    margin: 0 (@tabs-line-margin-title-horizontal / 2);\n    padding: .get-title-padding(\n        @tabs-size-default-header-height_line,\n        @tabs-size-default-font-size,\n        @tabs-padding-title-text-vertical\n      )\n      [] 0;\n    line-height: 1.5715;\n\n    &-title {\n      position: relative;\n      display: inline-block;\n      padding: @tabs-padding-title-text-vertical 0;\n\n      &::before {\n        position: absolute;\n        top: 0;\n        right: -@tabs-padding-title-text-horizontal;\n        bottom: 0;\n        left: -@tabs-padding-title-text-horizontal;\n        z-index: -1;\n        background-color: @tabs-line-color-title-bg;\n        border-radius: @tabs-line-border-radius;\n        opacity: 1;\n        transition: background-color @transition-duration-2\n            @transition-timing-function-linear,\n          opacity @transition-duration-2 @transition-timing-function-linear;\n        content: '';\n      }\n    }\n\n    &:hover {\n      .@{tabs-prefix-cls}-tab-title::before {\n        background-color: @tabs-line-color-title-bg_hover;\n      }\n    }\n\n    &-active,\n    &-active:hover {\n      .@{tabs-prefix-cls}-tab-title::before {\n        background-color: @tabs-line-color-title-bg_active;\n      }\n    }\n\n    &-disabled,\n    &-disabled:hover {\n      .@{tabs-prefix-cls}-tab-title::before {\n        opacity: 0;\n      }\n    }\n\n    &:focus-visible {\n      .@{tabs-prefix-cls}-tab-title::before {\n        border: 2px solid @color-primary-6;\n      }\n    }\n  }\n\n  &-nav-type-line&-nav-horizontal > &-tab:first-of-type {\n    margin-left: @tabs-line-margin-title-horizontal_first;\n  }\n\n  // headerPadding=false & type === line/text & horizontal\n  &-nav-type-line&-nav-horizontal\n    &-nav-tab-list-no-padding\n    > &-tab:first-of-type,\n  &-nav-text&-nav-horizontal &-nav-tab-list-no-padding > &-tab:first-of-type {\n    margin-left: 0;\n  }\n\n  // type = card card-gutter\n  &-nav-type-card,\n  &-nav-type-card-gutter {\n    .@{tabs-prefix-cls}-tab {\n      position: relative;\n      padding: .get-title-padding(\n          (@tabs-size-default-header-height - @tabs-card-border-width * 2),\n          @tabs-size-default-font-size_card,\n          0\n        )\n        [] @tabs-card-padding-title-horizontal;\n      font-size: @tabs-size-default-font-size_card;\n      border: @tabs-card-border-width solid @tabs-card-color-title-border;\n      transition: padding @transition-duration-2\n          @transition-timing-function-linear,\n        color @transition-duration-2 @transition-timing-function-linear;\n\n      &-closable {\n        padding-right: @tabs-card-padding-title-right_editable;\n      }\n\n      &-closable:not(.@{tabs-prefix-cls}-tab-active):hover\n        .@{prefix}-icon-hover:hover::before {\n        background-color: @tabs-card-color-close-icon-bg_hover;\n      }\n\n      &:focus-visible::before {\n        position: absolute;\n        top: -1px;\n        right: 0;\n        bottom: -1px;\n        left: -1px;\n        border: 2px solid @color-primary-6;\n        content: '';\n      }\n\n      &:last-child:focus-visible::before {\n        right: -1px;\n      }\n    }\n  }\n\n  &-nav-type-card,\n  &-nav-type-card-gutter {\n    .@{tabs-prefix-cls}-nav-add-btn {\n      height: @tabs-size-default-header-height;\n    }\n  }\n\n  &-nav-type-card &-tab {\n    background-color: @tabs-card-color-title-bg;\n    border-right: none;\n\n    &:last-child {\n      border-right: @tabs-card-border-width solid @tabs-card-color-title-border;\n      border-top-right-radius: @tabs-card-border-radius;\n    }\n\n    &:first-child {\n      border-top-left-radius: @tabs-card-border-radius;\n    }\n\n    &:hover {\n      background-color: @tabs-card-color-title-bg_hover;\n    }\n\n    &-disabled,\n    &-disabled:hover {\n      background-color: @tabs-card-color-title-bg_disabled;\n    }\n\n    &-active,\n    &-active:hover {\n      background-color: @tabs-card-color-title-bg_active;\n      border-bottom-color: var(~'@{arco-cssvars-prefix}-color-bg-2');\n    }\n  }\n\n  &-nav-type-card-gutter &-tab {\n    margin-left: @tabs-card-gutter-spacing-horizontal;\n    background-color: @tabs-card-gutter-color-title-bg;\n    border-right: @tabs-card-border-width solid @tabs-card-color-title-border;\n    border-radius: @tabs-card-border-radius @tabs-card-border-radius 0 0;\n\n    &:hover {\n      background-color: @tabs-card-gutter-color-title-bg_hover;\n    }\n\n    &-disabled,\n    &-disabled:hover {\n      background-color: @tabs-card-gutter-color-title-bg_disabled;\n    }\n\n    &-active,\n    &-active:hover {\n      background-color: @tabs-card-gutter-color-title-bg_active;\n      border-bottom-color: var(~'@{arco-cssvars-prefix}-color-bg-2');\n    }\n\n    &:first-child {\n      margin-left: 0;\n    }\n  }\n\n  // type = text\n  &-nav-type-text {\n    &::before {\n      display: none;\n    }\n\n    .@{tabs-prefix-cls}-tab {\n      position: relative;\n      margin: 0\n        (\n          @tabs-text-margin-title-horizontal +\n            (@tabs-text-size-separator-width / 2)\n        );\n      padding: .get-title-padding(\n          @tabs-size-default-header-height_text,\n          @tabs-size-default-font-size,\n          0\n        )\n        [] 0;\n      font-size: @tabs-size-default-font-size_text;\n      line-height: 1.5715;\n\n      &:not(:first-of-type)::before {\n        position: absolute;\n        top: 50%;\n        left: -(@tabs-text-margin-title-horizontal +\n              (@tabs-text-size-separator-width / 2));\n        display: block;\n        width: @tabs-text-size-separator-width;\n        height: @tabs-text-size-separator-height;\n        background-color: @tabs-text-color-separator-bg;\n        transform: translateY(-50%);\n        content: '';\n      }\n\n      &-title {\n        padding-right: @tabs-text-margin-title-horizontal;\n        padding-left: @tabs-text-margin-title-horizontal;\n        background-color: @tabs-text-color-title-bg;\n      }\n\n      &-title:hover {\n        background-color: @tabs-text-color-title-bg_hover;\n      }\n\n      &-active {\n        .@{tabs-prefix-cls}-tab-title,\n        .@{tabs-prefix-cls}-tab-title:hover {\n          background-color: @tabs-text-color-title-bg_active;\n        }\n      }\n\n      &-disabled {\n        .@{tabs-prefix-cls}-tab-title,\n        .@{tabs-prefix-cls}-tab-title:hover {\n          background-color: @tabs-text-color-title-bg_disabled;\n        }\n      }\n\n      &-active&-disabled {\n        .@{tabs-prefix-cls}-tab-title,\n        .@{tabs-prefix-cls}-tab-title:hover {\n          background-color: @tabs-text-color-title-bg_disabled_active;\n        }\n      }\n\n      &:focus-visible {\n        .@{tabs-prefix-cls}-tab-title {\n          margin: -2px;\n          border: 2px solid @color-primary-6;\n        }\n      }\n    }\n  }\n\n  &-nav-type-rounded {\n    &::before {\n      display: none;\n    }\n\n    .@{tabs-prefix-cls}-tab {\n      margin: 0 (@tabs-rounded-margin-title-horizontal / 2);\n      padding: .get-title-padding(\n          @tabs-size-default-header-height_rounded,\n          @tabs-size-default-font-size_rounded,\n          0\n        )\n        [] 0;\n      padding-right: @tabs-rounded-padding-title-horizontal;\n      padding-left: @tabs-rounded-padding-title-horizontal;\n      font-size: @tabs-size-default-font-size_rounded;\n      background-color: @tabs-rounded-color-title-bg;\n      border-radius: @tabs-size-default-header-height_rounded;\n\n      &:hover {\n        background-color: @tabs-rounded-color-title-bg_hover;\n      }\n\n      &-disabled:hover {\n        background-color: @tabs-rounded-color-title-bg_disabled;\n      }\n\n      &-active,\n      &-active:hover {\n        background-color: @tabs-rounded-color-title-bg_active;\n      }\n\n      &:focus-visible {\n        border-color: @color-primary-6;\n      }\n    }\n  }\n\n  &-nav-type-capsule {\n    &::before {\n      display: none;\n    }\n\n    .@{tabs-prefix-cls}-nav-tab:not(.@{tabs-prefix-cls}-nav-tab-scroll) {\n      justify-content: flex-end;\n    }\n\n    .@{tabs-prefix-cls}-nav-tab-list {\n      padding: @tabs-capsule-padding-header-vertical\n        @tabs-capsule-padding-header-horizontal;\n      line-height: 1;\n      background-color: @tabs-capsule-color-header-bg;\n      border-radius: @tabs-capsule-border-header-radius;\n    }\n\n    .@{tabs-prefix-cls}-tab {\n      position: relative;\n      padding: 0 @tabs-capsule-padding-title-horizontal - 2;\n      font-size: @tabs-size-default-font-size_capsule;\n      line-height: (\n        @tabs-size-default-header-height_capsule -\n          @tabs-capsule-padding-header-vertical * 2\n      );\n      background-color: @tabs-capsule-color-title-bg;\n\n      &:hover {\n        background-color: @tabs-capsule-color-title-bg_hover;\n      }\n\n      &-disabled:hover {\n        background-color: unset;\n      }\n\n      &-active,\n      &-active:hover {\n        background-color: @tabs-capsule-color-title-bg_active;\n\n        &::before,\n        & + .@{tabs-prefix-cls}-tab::before {\n          opacity: 0;\n        }\n      }\n\n      &:focus-visible {\n        border-color: @color-primary-6;\n      }\n    }\n\n    &.@{tabs-prefix-cls}-nav-horizontal\n      .@{tabs-prefix-cls}-tab:not(:first-of-type) {\n      margin-left: @tabs-capsule-margin-title-horizontal;\n\n      &::before {\n        position: absolute;\n        top: 50%;\n        left: -(@tabs-capsule-margin-title-horizontal / 2) - (\n            @tabs-capsule-size-separator-width / 2\n          ) - 2;\n        display: block;\n        width: @tabs-capsule-size-separator-width;\n        height: @tabs-capsule-size-separator-height;\n        background-color: @tabs-capsule-color-separator-bg;\n        transform: translateY(-50%);\n        transition: all @transition-duration-2\n          @transition-timing-function-linear;\n        content: '';\n      }\n    }\n  }\n}\n\n//   /** header */\n\n.@{tabs-prefix-cls} {\n  &-nav {\n    position: relative;\n    display: flex;\n    align-items: center;\n    overflow: hidden;\n  }\n\n  &-content {\n    box-sizing: border-box;\n    width: 100%;\n    padding-top: @tabs-content-padding;\n    overflow: hidden;\n\n    &-hide {\n      display: none;\n    }\n\n    .@{tabs-prefix-cls}-content-list {\n      display: flex;\n      width: 100%;\n    }\n\n    .@{tabs-prefix-cls}-content-item {\n      flex-shrink: 0;\n      width: 100%;\n      height: 0;\n      overflow: hidden;\n\n      &.@{tabs-prefix-cls}-content-item-active {\n        height: auto;\n      }\n    }\n  }\n\n  &-type-card,\n  &-type-card-gutter {\n    > .@{tabs-prefix-cls}-content {\n      border: @tabs-card-border-content-width solid\n        @tabs-line-color-header-border;\n      border-top: none;\n    }\n  }\n\n  &-content-animation {\n    transition: all @transition-duration-2 @transition-timing-function-standard;\n  }\n\n  &-horizontal&-justify {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n\n    .@{tabs-prefix-cls}-content,\n    .@{tabs-prefix-cls}-content-list,\n    .@{tabs-prefix-cls}-pane {\n      height: 100%;\n    }\n  }\n}\n\n@sizes: mini, small, large;\n\n.for(@data, @i: 1) when (@i =< length(@data)) {\n  @size: extract(@data, @i);\n\n  .@{tabs-prefix-cls}-nav-size-@{size} {\n    &.@{tabs-prefix-cls}-nav-type-line {\n      @height: ~'tabs-size-@{size}-header-height_line';\n      @font-size: ~'tabs-size-@{size}-font-size';\n\n      .@{tabs-prefix-cls}-nav-extra {\n        font-size: @@font-size;\n        line-height: @@height;\n      }\n\n      .@{tabs-prefix-cls}-tab {\n        padding-top: @padding;\n        padding-bottom: @padding;\n        font-size: @@font-size;\n\n        @padding: .get-title-padding(\n            @@height,\n            @@font-size,\n            @tabs-padding-title-text-vertical\n          )\n          [];\n      }\n\n      .@{tabs-prefix-cls}-nav-extra {\n        font-size: @@font-size;\n        line-height: @@height;\n      }\n    }\n\n    &.@{tabs-prefix-cls}-nav-type-card,\n    &.@{tabs-prefix-cls}-nav-type-card-gutter {\n      @card-font-size: ~'tabs-size-@{size}-font-size_card';\n      @card-height: ~'tabs-size-@{size}-header-height';\n\n      .@{tabs-prefix-cls}-tab {\n        padding-top: .get-title-padding(\n            @@card-height - @tabs-card-border-width * 2,\n            @@card-font-size,\n            @tabs-padding-title-text-vertical\n          )\n          [];\n        padding-bottom: $padding-top;\n        font-size: @@card-font-size;\n      }\n\n      .@{tabs-prefix-cls}-nav-extra {\n        font-size: @@card-font-size;\n        line-height: @@card-height;\n      }\n\n      .@{tabs-prefix-cls}-nav-add-btn {\n        height: @@card-height;\n      }\n    }\n\n    &.@{tabs-prefix-cls}-nav-type-capsule {\n      @capsule-font-size: ~'tabs-size-@{size}-font-size_capsule';\n      @capsule-height: ~'tabs-size-@{size}-header-height_capsule';\n\n      .@{tabs-prefix-cls}-tab {\n        font-size: @@capsule-font-size;\n        line-height: @@capsule-height - @tabs-capsule-padding-header-vertical * 2;\n      }\n\n      .@{tabs-prefix-cls}-nav-extra {\n        font-size: @@capsule-font-size;\n        line-height: @@capsule-height;\n      }\n    }\n\n    &.@{tabs-prefix-cls}-nav-type-rounded {\n      @rounded-font-size: ~'tabs-size-@{size}-font-size_rounded';\n      @rounded-height: ~'tabs-size-@{size}-header-height_rounded';\n\n      .@{tabs-prefix-cls}-tab {\n        padding-top: .get-title-padding(\n            @@rounded-height,\n            @@rounded-font-size,\n            0\n          )\n          [];\n        padding-bottom: $padding-top;\n        font-size: @@rounded-font-size;\n      }\n\n      .@{tabs-prefix-cls}-nav-extra {\n        font-size: @@rounded-font-size;\n        line-height: @@rounded-height;\n      }\n    }\n  }\n\n  .for(@data, (@i + 1));\n}\n\n.for(@sizes);\n\n@import './vertical.less';\n@import './rtl.less';\n\n@{arco-theme-tag}[arco-theme='dark'] {\n  .@{tabs-prefix-cls}-nav-type-capsule {\n    .@{tabs-prefix-cls}-tab {\n      &-active {\n        background-color: var(~'@{arco-cssvars-prefix}-color-fill-3');\n      }\n\n      &:hover {\n        background-color: var(~'@{arco-cssvars-prefix}-color-fill-3');\n      }\n    }\n  }\n}\n"
  },
  {
    "path": "packages/web-vue/components/tabs/style/index.ts",
    "content": "import '../../style/index.less';\nimport './index.less';\n"
  },
  {
    "path": "packages/web-vue/components/tabs/style/rtl.less",
    "content": ".@{tabs-prefix-cls}-rtl {\n  direction: rtl;\n\n  &.@{tabs-prefix-cls}-left {\n    flex-direction: row-reverse;\n  }\n\n  &.@{tabs-prefix-cls}-right {\n    flex-direction: row;\n  }\n\n  .@{tabs-prefix-cls} {\n    &-close-icon {\n      margin-right: @tabs-margin-close-icon-left;\n      margin-left: 0;\n    }\n\n    &-left-icon,\n    &-right-icon {\n      margin-right: @tabs-padding-header-wrapper-horizontal;\n      margin-left: @tabs-spacing-nav-icon-header;\n    }\n  }\n\n  .@{tabs-prefix-cls}-nav-type-line {\n    > .@{tabs-prefix-cls}-nav-type-horizontal {\n      .@{tabs-prefix-cls}-header-scroll {\n        > .@{tabs-prefix-cls}-header-title {\n          &:first-of-type {\n            margin-right: 0;\n          }\n        }\n      }\n    }\n  }\n\n  .@{tabs-prefix-cls}-nav-type-line,\n  .@{tabs-prefix-cls}-nav-type-text {\n    > .@{tabs-prefix-cls}-nav-type-horizontal {\n      .@{tabs-prefix-cls}-header-no-padding {\n        > .@{tabs-prefix-cls}-header-title {\n          &:first-of-type {\n            margin-right: 0;\n          }\n        }\n      }\n    }\n  }\n\n  .@{tabs-prefix-cls}-nav-type-card,\n  .@{tabs-prefix-cls}-nav-type-card-gutter {\n    .@{tabs-prefix-cls}-header-title-editable {\n      padding-right: @tabs-card-padding-title-horizontal;\n      padding-left: @tabs-card-padding-title-right_editable;\n    }\n  }\n\n  .@{tabs-prefix-cls}-nav-type-card .@{tabs-prefix-cls}-header-title {\n    border-right: @tabs-card-border-width solid @tabs-card-color-title-border;\n    border-left: none;\n\n    &:last-child {\n      border-left: @tabs-card-border-width solid @tabs-card-color-title-border;\n      border-top-left-radius: @tabs-card-border-radius;\n      border-top-right-radius: 0;\n    }\n\n    &:first-child {\n      border-top-left-radius: 0;\n      border-top-right-radius: @tabs-card-border-radius;\n    }\n  }\n\n  .@{tabs-prefix-cls}-nav-type-card-gutter .@{tabs-prefix-cls}-header-title {\n    margin-right: @tabs-card-gutter-spacing-horizontal;\n\n    &:first-child {\n      margin-right: 0;\n    }\n  }\n\n  .@{tabs-prefix-cls}-nav-type-text {\n    .@{tabs-prefix-cls}-header-title {\n      &:not(:first-of-type)::before {\n        right: -(@tabs-text-margin-title-horizontal +\n              (@tabs-text-size-separator-width / 2));\n        left: initial;\n      }\n    }\n  }\n\n  .@{tabs-prefix-cls}-nav-type-capsule.@{tabs-prefix-cls}-nav-type-horizontal {\n    .@{tabs-prefix-cls}-header-title:not(:first-of-type) {\n      margin-right: @tabs-capsule-margin-title-horizontal;\n      margin-left: 0;\n\n      &::before {\n        right: -(@tabs-capsule-margin-title-horizontal / 2) - (@tabs-capsule-size-separator-width /\n              2);\n        left: initial;\n      }\n    }\n  }\n}\n"
  },
  {
    "path": "packages/web-vue/components/tabs/style/token.less",
    "content": "@import '../../style/theme/index.less';\n\n@tabs-size-mini-font-size: @font-size-body-1;\n@tabs-size-small-font-size: @font-size-body-3;\n@tabs-size-default-font-size: @font-size-body-3;\n@tabs-size-large-font-size: @font-size-body-3;\n\n@tabs-size-mini-font-size_card: @font-size-body-1;\n@tabs-size-small-font-size_card: @font-size-body-3;\n@tabs-size-default-font-size_card: @font-size-body-3;\n@tabs-size-large-font-size_card: @font-size-body-3;\n\n@tabs-size-default-font-size_text: @font-size-body-3;\n@tabs-size-default-font-size_rounded: @font-size-body-3;\n\n@tabs-size-mini-font-size_capsule: @font-size-body-1;\n@tabs-size-small-font-size_capsule: @font-size-body-3;\n@tabs-size-default-font-size_capsule: @font-size-body-3;\n@tabs-size-large-font-size_capsule: @font-size-body-3;\n\n@tabs-size-mini-font-size_rounded: @font-size-body-1;\n@tabs-size-small-font-size_rounded: @font-size-body-3;\n@tabs-size-default-font-size_rounded: @font-size-body-3;\n@tabs-size-large-font-size_rounded: @font-size-body-3;\n\n@tabs-size-mini-header-height_line: @size-8;\n@tabs-size-small-header-height_line: @size-9;\n@tabs-size-default-header-height_line: @size-10;\n@tabs-size-large-header-height_line: @size-11;\n\n@tabs-size-mini-header-height: @size-6;\n@tabs-size-small-header-height: @size-7;\n@tabs-size-default-header-height: @size-8;\n@tabs-size-large-header-height: @size-9;\n\n@tabs-size-mini-header-height_capsule: @size-6;\n@tabs-size-small-header-height_capsule: @size-7;\n@tabs-size-default-header-height_capsule: @size-8;\n@tabs-size-large-header-height_capsule: @size-9;\n\n@tabs-size-mini-header-height_rounded: @size-6;\n@tabs-size-small-header-height_rounded: @size-7;\n@tabs-size-default-header-height_rounded: @size-8;\n@tabs-size-large-header-height_rounded: @size-9;\n\n@tabs-size-default-header-height_text: @size-8;\n@tabs-size-default-header-height_rounded: @size-8;\n\n@tabs-padding-title-text-vertical: 1px;\n@tabs-padding-title-text-horizontal: @spacing-4;\n\n@tabs-color-title-text: var(~'@{arco-cssvars-prefix}-color-text-2');\n@tabs-color-title-text_active: @color-primary-6;\n@tabs-color-title-text_hover: @tabs-color-title-text;\n@tabs-color-title-text_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');\n@tabs-color-title-text_disabled_active: var(\n  ~'@{arco-cssvars-prefix}-color-primary-light-3'\n);\n\n@tabs-line-size-header-border: @border-1;\n@tabs-line-color-header-border: var(~'@{arco-cssvars-prefix}-color-neutral-3');\n@tabs-line-size-ink-stroke: 2px;\n@tabs-line-color-ink-bg: @color-primary-6;\n@tabs-line-color-ink-bg_disabled: var(\n  ~'@{arco-cssvars-prefix}-color-primary-light-3'\n);\n@tabs-line-font-title-text-weight_active: @font-weight-500;\n@tabs-line-margin-title-horizontal: @spacing-10;\n@tabs-line-margin-title-horizontal_first: @spacing-7;\n@tabs-line-margin-title-vertical: @spacing-6;\n@tabs-line-padding-title-horizontal_vertical: @spacing-8;\n@tabs-line-color-title-bg: @color-transparent;\n@tabs-line-color-title-bg_active: @color-transparent;\n@tabs-line-color-title-bg_hover: var(~'@{arco-cssvars-prefix}-color-fill-2');\n\n@tabs-line-font-title-text-weight_hover: @font-weight-400;\n@tabs-line-border-radius: @radius-small;\n\n@tabs-card-border-width: @border-1;\n@tabs-card-color-title-border: var(~'@{arco-cssvars-prefix}-color-neutral-3');\n@tabs-card-padding-title-horizontal: @spacing-7;\n@tabs-card-padding-title-right_editable: @spacing-6;\n@tabs-card-border-radius: @radius-small;\n@tabs-card-color-title-bg: @color-transparent;\n@tabs-card-color-title-bg_hover: var(~'@{arco-cssvars-prefix}-color-fill-3');\n@tabs-card-color-title-bg_disabled: @tabs-card-color-title-bg;\n@tabs-card-color-title-bg_active: @color-transparent;\n@tabs-card-border-content-width: @border-1;\n\n@tabs-card-gutter-spacing-horizontal: @spacing-2;\n@tabs-card-gutter-color-title-bg: var(~'@{arco-cssvars-prefix}-color-fill-1');\n@tabs-card-gutter-color-title-bg_hover: var(\n  ~'@{arco-cssvars-prefix}-color-fill-3'\n);\n@tabs-card-gutter-color-title-bg_active: @color-transparent;\n@tabs-card-gutter-color-title-bg_disabled: @tabs-card-gutter-color-title-bg;\n\n@tabs-text-size-separator-height: @size-3;\n@tabs-text-size-separator-width: 2px;\n@tabs-text-color-separator-bg: var(~'@{arco-cssvars-prefix}-color-fill-3');\n@tabs-text-margin-title-horizontal: @spacing-4;\n@tabs-text-color-title-bg: @color-transparent;\n@tabs-text-color-title-bg_active: @color-transparent;\n@tabs-text-color-title-bg_disabled: @color-transparent;\n@tabs-text-color-title-bg_disabled_active: var(\n  ~'@{arco-cssvars-prefix}-color-primary-light-3'\n);\n@tabs-text-color-title-bg_hover: var(~'@{arco-cssvars-prefix}-color-fill-2');\n\n@tabs-rounded-padding-title-horizontal: @spacing-7;\n@tabs-rounded-margin-title-horizontal: @spacing-6;\n@tabs-rounded-color-title-bg: @color-transparent;\n@tabs-rounded-color-title-bg_active: var(\n  ~'@{arco-cssvars-prefix}-color-fill-2'\n);\n@tabs-rounded-color-title-bg_disabled: @color-transparent;\n@tabs-rounded-color-title-bg_hover: @tabs-rounded-color-title-bg_active;\n\n@tabs-capsule-color-header-bg: var(~'@{arco-cssvars-prefix}-color-fill-2');\n@tabs-capsule-margin-title-horizontal: 3px;\n@tabs-capsule-padding-title-horizontal: @spacing-6;\n@tabs-capsule-padding-header-vertical: 3px;\n@tabs-capsule-padding-header-horizontal: 3px;\n@tabs-capsule-border-header-radius: @radius-small;\n\n@tabs-capsule-color-title-bg: @color-transparent;\n@tabs-capsule-color-title-bg_active: var(~'@{arco-cssvars-prefix}-color-bg-2');\n@tabs-capsule-color-title-bg_hover: @tabs-capsule-color-title-bg_active;\n@tabs-capsule-size-separator-width: 1px;\n@tabs-capsule-size-separator-height: 14px;\n@tabs-capsule-color-separator-bg: var(~'@{arco-cssvars-prefix}-color-fill-3');\n\n@tabs-margin-close-icon-left: @spacing-4;\n@tabs-size-icon: @size-3;\n@tabs-size-icon-bg: @size-4;\n@tabs-card-color-close-icon-bg_hover: var(\n  ~'@{arco-cssvars-prefix}-color-fill-4'\n);\n@tabs-margin-add-icon-left: @spacing-4;\n@tabs-color-icon: var(~'@{arco-cssvars-prefix}-color-text-2');\n@tabs-color-icon_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');\n@tabs-spacing-nav-icon-header: @spacing-3;\n@tabs-padding-header-wrapper-horizontal: @spacing-5;\n@tabs-padding-header-wrapper-vertical: @spacing-3;\n\n@tabs-content-padding: @spacing-7;\n"
  },
  {
    "path": "packages/web-vue/components/tabs/style/vertical.less",
    "content": "@tabs-prefix-cls: ~'@{prefix}-tabs';\n\n@tabs-prefix-cls-vertical: ~'@{tabs-prefix-cls}-vertical';\n\n/* Vertical */\n.@{tabs-prefix-cls} {\n  &-vertical {\n    // overflow: hidden;\n  }\n\n  &-nav-vertical {\n    float: left;\n    height: 100%;\n\n    &::before {\n      position: absolute;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: initial;\n      clear: both;\n      width: @tabs-line-size-header-border;\n      height: 100%;\n    }\n\n    .@{tabs-prefix-cls}-nav-add-btn {\n      height: auto;\n      margin-top: @tabs-margin-add-icon-left;\n      margin-left: 0;\n      padding: 0 @tabs-card-padding-title-horizontal;\n    }\n  }\n\n  &-nav-right {\n    float: right;\n  }\n\n  &-nav-vertical {\n    flex-direction: column;\n  }\n\n  &-nav-vertical &-nav-tab {\n    flex-direction: column;\n    height: 100%;\n  }\n\n  &-nav-vertical &-nav-ink {\n    position: absolute;\n    right: 0;\n    bottom: initial;\n    left: initial;\n    width: @tabs-line-size-ink-stroke;\n    transition: top @transition-duration-2 @transition-timing-function-standard,\n      height @transition-duration-2 @transition-timing-function-standard;\n  }\n\n  &-nav-vertical &-nav-tab-list {\n    height: auto;\n\n    &-overflow-scroll {\n      padding: @tabs-padding-header-wrapper-vertical 0;\n    }\n  }\n\n  &-nav-vertical &-tab {\n    display: block;\n    margin: 0;\n    margin-top: @tabs-line-margin-title-vertical;\n    white-space: nowrap;\n\n    &:first-of-type {\n      margin-top: 0;\n    }\n  }\n\n  &-nav-right::before {\n    right: unset;\n    left: 0;\n  }\n\n  &-nav-right &-nav-ink {\n    right: unset;\n    left: 0;\n  }\n\n  &-nav-vertical {\n    position: relative;\n    box-sizing: border-box;\n    height: 100%;\n  }\n\n  &-nav-vertical&-nav-type-line &-tab {\n    padding: 0 @tabs-line-padding-title-horizontal_vertical;\n  }\n\n  &-nav-vertical&-nav-type-card &-tab {\n    position: relative;\n    margin: 0;\n    border: @tabs-card-border-width solid @tabs-card-color-title-border;\n    border-bottom-color: @color-transparent;\n\n    &:first-child {\n      border-top-left-radius: @tabs-card-border-radius;\n    }\n\n    &-active,\n    &-active:hover {\n      border-right-color: var(~'@{arco-cssvars-prefix}-color-bg-2');\n      border-bottom-color: @color-transparent;\n    }\n\n    &:last-child {\n      border-bottom: @tabs-card-border-width solid @tabs-card-color-title-border;\n      border-bottom-left-radius: @tabs-card-border-radius;\n    }\n  }\n\n  &-nav-vertical&-nav-type-card-gutter &-tab {\n    position: relative;\n    margin-left: 0;\n    border-radius: @tabs-card-border-radius 0 0 @tabs-card-border-radius;\n\n    &:not(:first-of-type) {\n      margin-top: 4px;\n    }\n\n    &-active,\n    &-active:hover {\n      border-right-color: var(~'@{arco-cssvars-prefix}-color-bg-2');\n      border-bottom-color: @tabs-card-color-title-border;\n    }\n  }\n\n  &-vertical &-content {\n    width: auto;\n    height: 100%;\n    padding: 0;\n  }\n\n  &-right&-vertical &-content {\n    padding-right: @tabs-content-padding;\n  }\n\n  &-left&-vertical &-content {\n    padding-left: @tabs-content-padding;\n  }\n\n  &-vertical&-type-card,\n  &-vertical&-type-card-gutter {\n    > .@{tabs-prefix-cls}-content {\n      border: @tabs-card-border-content-width solid\n        @tabs-line-color-header-border;\n      border-left: none;\n    }\n  }\n}\n"
  },
  {
    "path": "packages/web-vue/components/tabs/tab-pane.vue",
    "content": "<template>\n  <div\n    ref=\"itemRef\"\n    :class=\"[\n      `${prefixCls}-content-item`,\n      { [`${prefixCls}-content-item-active`]: active },\n    ]\"\n  >\n    <div v-if=\"mounted\" :class=\"`${prefixCls}-pane`\">\n      <slot />\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  getCurrentInstance,\n  inject,\n  onBeforeUnmount,\n  onUpdated,\n  reactive,\n  ref,\n  toRefs,\n  watch,\n} from 'vue';\nimport { getPrefixCls } from '../_utils/global-config';\nimport { TabsContext, tabsInjectionKey } from './context';\n\nexport default defineComponent({\n  name: 'TabPane',\n  props: {\n    /**\n     * @zh 选项卡的标题\n     * @en Title of the tab\n     */\n    title: String,\n    /**\n     * @zh 是否禁用\n     * @en Whether to disable\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 是否允许关闭此选项卡（仅在可编辑模式生效）\n     * @en Whether to allow this tab to be closed (only effective in editable mode)\n     */\n    closable: {\n      type: Boolean,\n      default: true,\n    },\n    /**\n     * @zh 是否在不显示标签时销毁内容\n     * @en Whether to destroy the content when the label is not displayed\n     * @version 2.27.0\n     */\n    destroyOnHide: {\n      type: Boolean,\n      default: false,\n    },\n  },\n  /**\n   * @zh 选项卡标题\n   * @en Tab title\n   * @slot title\n   */\n  setup(props, { slots }) {\n    const { title, disabled, closable } = toRefs(props);\n    const instance = getCurrentInstance();\n    const prefixCls = getPrefixCls('tabs');\n    const tabsCtx = inject<Partial<TabsContext>>(tabsInjectionKey, {});\n\n    const itemRef = ref<HTMLElement>();\n    const key = computed(() => instance?.vnode.key as string | number);\n    const active = computed(() => key.value === tabsCtx.activeKey);\n    const mounted = ref(tabsCtx.lazyLoad ? active.value : true);\n\n    const data = reactive({\n      key,\n      title,\n      disabled,\n      closable,\n      slots,\n    });\n\n    if (instance?.uid) {\n      tabsCtx.addItem?.(instance.uid, data);\n    }\n\n    onBeforeUnmount(() => {\n      if (instance?.uid) {\n        tabsCtx.removeItem?.(instance.uid);\n      }\n    });\n\n    watch(active, (active) => {\n      if (active) {\n        if (!mounted.value) {\n          mounted.value = true;\n        }\n      } else if (props.destroyOnHide || tabsCtx.destroyOnHide) {\n        mounted.value = false;\n      }\n    });\n\n    onUpdated(() => {\n      data.slots = { ...slots };\n    });\n\n    return {\n      prefixCls,\n      active,\n      itemRef,\n      mounted,\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/tabs/tabs-button.tsx",
    "content": "import type { PropType } from 'vue';\nimport { computed, defineComponent } from 'vue';\nimport IconHover from '../_components/icon-hover.vue';\nimport IconLeft from '../icon/icon-left';\nimport IconRight from '../icon/icon-right';\nimport IconUp from '../icon/icon-up';\nimport IconDown from '../icon/icon-down';\nimport type { Direction } from '../_utils/constant';\nimport { getPrefixCls } from '../_utils/global-config';\n\ntype ButtonTypes = 'previous' | 'next';\n\nexport default defineComponent({\n  name: 'TabsButton',\n  props: {\n    type: {\n      type: String as PropType<ButtonTypes>,\n      default: 'next',\n    },\n    direction: {\n      type: String as PropType<Direction>,\n      default: 'horizontal',\n    },\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n    onClick: {\n      type: Function as PropType<(type: ButtonTypes, ev: Event) => void>,\n    },\n  },\n  emits: ['click'],\n  setup(props, { emit }) {\n    const prefixCls = getPrefixCls('tabs-nav-button');\n\n    const handleClick = (ev: Event) => {\n      if (!props.disabled) {\n        emit('click', props.type, ev);\n      }\n    };\n\n    const renderIcon = () => {\n      if (props.direction === 'horizontal') {\n        if (props.type === 'next') {\n          return <IconRight />;\n        }\n        return <IconLeft />;\n      }\n      if (props.type === 'next') {\n        return <IconDown />;\n      }\n      return <IconUp />;\n    };\n\n    const cls = computed(() => [\n      prefixCls,\n      {\n        [`${prefixCls}-disabled`]: props.disabled,\n        [`${prefixCls}-left`]:\n          props.direction === 'horizontal' && props.type === 'previous',\n        [`${prefixCls}-right`]:\n          props.direction === 'horizontal' && props.type === 'next',\n        [`${prefixCls}-up`]:\n          props.direction === 'vertical' && props.type === 'previous',\n        [`${prefixCls}-down`]:\n          props.direction === 'vertical' && props.type === 'next',\n      },\n    ]);\n\n    return () => (\n      <div class={cls.value} onClick={handleClick}>\n        <IconHover disabled={props.disabled}>{renderIcon()}</IconHover>\n      </div>\n    );\n  },\n});\n"
  },
  {
    "path": "packages/web-vue/components/tabs/tabs-nav-ink.vue",
    "content": "<template>\n  <div :class=\"cls\" :style=\"style\" />\n</template>\n\n<script lang=\"ts\">\nimport type { CSSProperties, PropType } from 'vue';\nimport {\n  computed,\n  defineComponent,\n  nextTick,\n  onMounted,\n  onUpdated,\n  ref,\n  toRefs,\n} from 'vue';\nimport { getPrefixCls } from '../_utils/global-config';\nimport { Direction } from '../_utils/constant';\n\nexport default defineComponent({\n  name: 'TabsNavInk',\n  props: {\n    activeTabRef: {\n      type: Object as PropType<HTMLElement>,\n    },\n    direction: {\n      type: String as PropType<Direction>,\n    },\n    disabled: Boolean,\n    animation: Boolean,\n  },\n  setup(props, { expose }) {\n    const { activeTabRef } = toRefs(props);\n    const prefixCls = getPrefixCls('tabs-nav-ink');\n    const position = ref(0);\n    const size = ref(0);\n\n    const style = computed<CSSProperties>(() => {\n      if (props.direction === 'vertical') {\n        return {\n          top: `${position.value}px`,\n          height: `${size.value}px`,\n        };\n      }\n      return {\n        left: `${position.value}px`,\n        width: `${size.value}px`,\n      };\n    });\n\n    const getInkStyle = () => {\n      if (activeTabRef.value) {\n        const _position =\n          props.direction === 'vertical'\n            ? activeTabRef.value.offsetTop\n            : activeTabRef.value.offsetLeft;\n        const _size =\n          props.direction === 'vertical'\n            ? activeTabRef.value.offsetHeight\n            : activeTabRef.value.offsetWidth;\n        if (_position !== position.value || _size !== size.value) {\n          position.value = _position;\n          size.value = _size;\n        }\n      }\n    };\n\n    onMounted(() => {\n      nextTick(() => getInkStyle());\n    });\n\n    onUpdated(() => {\n      getInkStyle();\n    });\n\n    const cls = computed(() => [\n      prefixCls,\n      {\n        [`${prefixCls}-animation`]: props.animation,\n        [`${prefixCls}-disabled`]: props.disabled,\n      },\n    ]);\n\n    expose({\n      getInkStyle,\n    });\n\n    return {\n      getInkStyle,\n      prefixCls,\n      cls,\n      style,\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/tabs/tabs-nav.tsx",
    "content": "import {\n  computed,\n  defineComponent,\n  nextTick,\n  onMounted,\n  onUnmounted,\n  PropType,\n  ref,\n  toRefs,\n  watch,\n  inject,\n} from 'vue';\nimport { updateScrollOffset } from './utils';\nimport { getPrefixCls } from '../_utils/global-config';\nimport type { Direction } from '../_utils/constant';\nimport TabsTab from './tabs-tab.vue';\nimport TabsButton from './tabs-button';\nimport TabsNavInk from './tabs-nav-ink.vue';\nimport type { TabData, TabsType, ScrollPosition } from './interface';\nimport IconHover from '../_components/icon-hover.vue';\nimport IconPlus from '../icon/icon-plus';\nimport ResizeObserver from '../_components/resize-observer';\nimport { isUndefined, isNumber } from '../_utils/is';\nimport { off, on } from '../_utils/dom';\nimport { configProviderInjectionKey } from '../config-provider/context';\n\nexport default defineComponent({\n  name: 'TabsNav',\n  props: {\n    tabs: {\n      type: Array as PropType<TabData[]>,\n      required: true,\n    },\n    direction: {\n      type: String as PropType<Direction>,\n      required: true,\n    },\n    type: {\n      type: String as PropType<TabsType>,\n      required: true,\n    },\n    activeKey: {\n      type: [String, Number],\n    },\n    activeIndex: {\n      type: Number,\n      required: true,\n    },\n    position: {\n      type: String,\n      required: true,\n    },\n    size: {\n      type: String,\n      required: true,\n    },\n    showAddButton: {\n      type: Boolean,\n      default: false,\n    },\n    editable: {\n      type: Boolean,\n      default: false,\n    },\n    animation: {\n      type: Boolean,\n      required: true,\n    },\n    headerPadding: {\n      type: Boolean,\n      default: true,\n    },\n    scrollPosition: {\n      type: String as PropType<ScrollPosition>,\n      default: 'auto',\n    },\n  },\n  emits: ['click', 'add', 'delete'],\n  setup(props, { emit, slots }) {\n    const { tabs, activeKey, activeIndex, direction, scrollPosition } =\n      toRefs(props);\n    const prefixCls = getPrefixCls('tabs-nav');\n    const configCtx = inject(configProviderInjectionKey, undefined);\n    const rtl = computed(() => configCtx?.rtl ?? false);\n\n    const wrapperRef = ref<HTMLElement>();\n    const listRef = ref<HTMLElement>();\n    const tabsRef = ref<Record<string | number, HTMLElement>>({});\n    const activeTabRef = computed(() => {\n      if (!isUndefined(activeKey.value)) {\n        return tabsRef.value[activeKey.value];\n      }\n      return undefined;\n    });\n    const isRtlHorizontal = computed(\n      () => rtl.value && direction.value === 'horizontal'\n    );\n    const inkRef = ref<InstanceType<typeof TabsNavInk>>();\n\n    const mergedEditable = computed(\n      () =>\n        props.editable && ['line', 'card', 'card-gutter'].includes(props.type)\n    );\n    const isScroll = ref(false);\n    const wrapperLength = ref(0);\n    const maxOffset = ref(0);\n    const offset = ref(0);\n\n    const getWrapperLength = () => {\n      return (\n        (direction.value === 'vertical'\n          ? wrapperRef.value?.offsetHeight\n          : wrapperRef.value?.offsetWidth) ?? 0\n      );\n    };\n\n    const getMaxOffset = () => {\n      if (!listRef.value || !wrapperRef.value) {\n        return 0;\n      }\n\n      if (direction.value === 'vertical') {\n        return listRef.value.offsetHeight - wrapperRef.value.offsetHeight;\n      }\n      return listRef.value.offsetWidth - wrapperRef.value.offsetWidth;\n    };\n\n    const getSize = () => {\n      isScroll.value = isOverflow();\n      if (isScroll.value) {\n        wrapperLength.value = getWrapperLength();\n        maxOffset.value = getMaxOffset();\n        if (offset.value > maxOffset.value) {\n          offset.value = maxOffset.value;\n        }\n      } else {\n        offset.value = 0;\n      }\n    };\n\n    const isOverflow = () => {\n      if (wrapperRef.value && listRef.value) {\n        return props.direction === 'vertical'\n          ? listRef.value.offsetHeight > wrapperRef.value.offsetHeight\n          : listRef.value.offsetWidth > wrapperRef.value.offsetWidth;\n      }\n      return false;\n    };\n\n    const setOffset = (newOffset: number) => {\n      if (!wrapperRef.value || !listRef.value || newOffset < 0) {\n        newOffset = 0;\n      }\n      offset.value = Math.min(newOffset, maxOffset.value);\n    };\n\n    const setActiveTabOffset = () => {\n      if (!activeTabRef.value || !wrapperRef.value || !isScroll.value) return;\n\n      // 纠正浏览器默认行为导致的滚动偏移， 比如 Tab 聚焦\n      updateScrollOffset(wrapperRef.value, direction.value);\n\n      const isHorizontal = direction.value === 'horizontal';\n      const sizeProperty = isHorizontal ? 'offsetWidth' : 'offsetHeight';\n      const wrapperSize = wrapperRef.value[sizeProperty];\n      const tabSize = activeTabRef.value[sizeProperty];\n\n      // 计算标签位置（考虑 RTL 模式）\n      let tabPosition = 0;\n      if (isRtlHorizontal.value) {\n        const listWidth = listRef.value?.offsetWidth || 0;\n        const { offsetLeft } = activeTabRef.value;\n        // 对于 RTL 模式，计算从右侧开始的位置\n        tabPosition = listWidth - offsetLeft - tabSize;\n      } else {\n        // 对于 LTR 模式或垂直方向，直接使用标准偏移\n        tabPosition = isHorizontal\n          ? activeTabRef.value.offsetLeft\n          : activeTabRef.value.offsetTop;\n      }\n\n      const marginSide = isHorizontal\n        ? isRtlHorizontal.value\n          ? scrollPosition.value === 'end'\n            ? 'marginLeft'\n            : 'marginRight'\n          : scrollPosition.value === 'end'\n          ? 'marginRight'\n          : 'marginLeft'\n        : scrollPosition.value === 'end'\n        ? 'marginBottom'\n        : 'marginTop';\n\n      const tabStyle = window.getComputedStyle(activeTabRef.value);\n      const tabMargin = parseFloat(tabStyle[marginSide]) || 0;\n\n      let targetOffset = 0;\n      switch (scrollPosition.value) {\n        case 'auto':\n          if (tabPosition < offset.value) {\n            targetOffset = tabPosition - tabMargin;\n          } else if (tabPosition + tabSize > offset.value + wrapperSize) {\n            targetOffset = tabPosition + tabSize - wrapperSize + tabMargin;\n          }\n          break;\n        case 'center':\n          targetOffset = tabPosition + (tabSize - wrapperSize + tabMargin) / 2;\n          break;\n        case 'start':\n          targetOffset = tabPosition - tabMargin;\n          break;\n        case 'end':\n          targetOffset = tabPosition + tabSize - wrapperSize + tabMargin;\n          break;\n        default:\n          if (isNumber(scrollPosition.value)) {\n            targetOffset = tabPosition - scrollPosition.value;\n          }\n      }\n\n      setOffset(targetOffset);\n    };\n\n    const handleWheel = (ev: WheelEvent) => {\n      if (!isScroll.value) return;\n      ev.preventDefault();\n\n      const { deltaX, deltaY } = ev;\n      if (Math.abs(deltaX) > Math.abs(deltaY)) {\n        setOffset(offset.value + deltaX);\n      } else {\n        setOffset(offset.value + deltaY);\n      }\n    };\n\n    const handleClick = (key: string | number, ev: Event) => {\n      emit('click', key, ev);\n    };\n\n    const handleDelete = (key: string | number, ev: Event) => {\n      emit('delete', key, ev);\n      nextTick(() => {\n        delete tabsRef.value[key];\n      });\n    };\n\n    const handleButtonClick = (type: string) => {\n      const scrollDirection =\n        (type === 'previous') !== isRtlHorizontal.value ? -1 : 1;\n      const nextOffset = offset.value + scrollDirection * wrapperLength.value;\n\n      setOffset(nextOffset);\n    };\n\n    const handleResize = () => {\n      getSize();\n      if (inkRef.value) {\n        inkRef.value.$forceUpdate();\n      }\n    };\n\n    watch(tabs, () => {\n      nextTick(() => {\n        getSize();\n      });\n    });\n\n    watch([activeIndex, scrollPosition, rtl], () => {\n      setTimeout(() => {\n        setActiveTabOffset();\n        if (inkRef.value) {\n          inkRef.value.getInkStyle();\n        }\n      }, 0);\n    });\n\n    onMounted(() => {\n      getSize();\n      if (wrapperRef.value) {\n        on(wrapperRef.value, 'wheel', handleWheel, { passive: false });\n      }\n    });\n\n    onUnmounted(() => {\n      if (wrapperRef.value) {\n        off(wrapperRef.value, 'wheel', handleWheel);\n      }\n    });\n\n    const renderAddBtn = () => {\n      if (!mergedEditable.value || !props.showAddButton) {\n        return null;\n      }\n      return (\n        <div\n          class={`${prefixCls}-add-btn`}\n          onClick={(ev: Event) => emit('add', ev)}\n        >\n          <IconHover>\n            <IconPlus />\n          </IconHover>\n        </div>\n      );\n    };\n\n    const cls = computed(() => [\n      prefixCls,\n      `${prefixCls}-${props.direction}`,\n      `${prefixCls}-${props.position}`,\n      `${prefixCls}-size-${props.size}`,\n      `${prefixCls}-type-${props.type}`,\n    ]);\n\n    const listCls = computed(() => [\n      `${prefixCls}-tab-list`,\n      {\n        [`${prefixCls}-tab-list-no-padding`]:\n          !props.headerPadding &&\n          ['line', 'text'].includes(props.type) &&\n          props.direction === 'horizontal',\n      },\n    ]);\n\n    const listStyle = computed(() => ({\n      transform:\n        direction.value === 'vertical'\n          ? `translateY(${-offset.value}px)`\n          : `translateX(${rtl.value ? offset.value : -offset.value}px)`,\n    }));\n\n    const tabCls = computed(() => [\n      `${prefixCls}-tab`,\n      {\n        [`${prefixCls}-tab-scroll`]: isScroll.value,\n      },\n    ]);\n\n    return () => (\n      <div class={cls.value}>\n        {isScroll.value && (\n          <TabsButton\n            type={isRtlHorizontal.value ? 'next' : 'previous'}\n            direction={props.direction}\n            disabled={offset.value <= 0}\n            onClick={handleButtonClick}\n          />\n        )}\n        <ResizeObserver onResize={() => getSize()}>\n          <div class={tabCls.value} ref={wrapperRef}>\n            <ResizeObserver onResize={handleResize}>\n              <div ref={listRef} class={listCls.value} style={listStyle.value}>\n                {props.tabs.map((tab) => (\n                  <TabsTab\n                    key={tab.key}\n                    ref={(component: any) => {\n                      if (component?.$el) {\n                        tabsRef.value[tab.key] = component.$el;\n                      }\n                    }}\n                    active={tab.key === activeKey.value}\n                    tab={tab}\n                    editable={props.editable}\n                    onClick={handleClick}\n                    onDelete={handleDelete}\n                  >\n                    {tab.slots.title?.() ?? tab.title}\n                  </TabsTab>\n                ))}\n                {props.type === 'line' && activeTabRef.value && (\n                  <TabsNavInk\n                    ref={inkRef}\n                    activeTabRef={activeTabRef.value}\n                    direction={props.direction}\n                    disabled={false}\n                    animation={props.animation}\n                  />\n                )}\n              </div>\n            </ResizeObserver>\n            {!isScroll.value && renderAddBtn()}\n          </div>\n        </ResizeObserver>\n        {isScroll.value && (\n          <TabsButton\n            type={isRtlHorizontal.value ? 'previous' : 'next'}\n            direction={props.direction}\n            disabled={offset.value >= maxOffset.value}\n            onClick={handleButtonClick}\n          />\n        )}\n        <div class={`${prefixCls}-extra`}>\n          {isScroll.value && renderAddBtn()}\n          {slots.extra?.()}\n        </div>\n      </div>\n    );\n  },\n});\n"
  },
  {
    "path": "packages/web-vue/components/tabs/tabs-tab.vue",
    "content": "<template>\n  <div tabindex=\"0\" :class=\"cls\" v-bind=\"eventHandlers\">\n    <span :class=\"`${prefixCls}-title`\">\n      <slot />\n    </span>\n    <icon-hover\n      v-if=\"editable && tab.closable\"\n      :class=\"`${prefixCls}-close-btn`\"\n      @click.stop=\"handleDelete\"\n    >\n      <icon-close />\n    </icon-hover>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport type { PropType } from 'vue';\nimport { computed, defineComponent, inject } from 'vue';\nimport { getPrefixCls } from '../_utils/global-config';\nimport IconHover from '../_components/icon-hover.vue';\nimport IconClose from '../icon/icon-close';\nimport type { TabData } from './interface';\nimport { TabsContext, tabsInjectionKey } from './context';\n\nexport default defineComponent({\n  name: 'TabsTab',\n  components: {\n    IconHover,\n    IconClose,\n  },\n  props: {\n    tab: {\n      type: Object as PropType<TabData>,\n      required: true,\n    },\n    active: Boolean,\n    editable: Boolean,\n  },\n  emits: ['click', 'delete'],\n  setup(props, { emit }) {\n    const prefixCls = getPrefixCls('tabs-tab');\n    const tabsCtx = inject<Partial<TabsContext>>(tabsInjectionKey, {});\n    const handleClick = (e: Event) => {\n      if (!props.tab.disabled) {\n        emit('click', props.tab.key, e);\n      }\n    };\n\n    const onKeyDown = (ev: KeyboardEvent) => {\n      if (ev.key === 'Enter') {\n        handleClick(ev);\n      }\n    };\n\n    const eventHandlers = computed(() => {\n      return Object.assign(\n        tabsCtx.trigger === 'click'\n          ? { onClick: handleClick }\n          : { onMouseover: handleClick },\n        { onKeydown: onKeyDown }\n      );\n    });\n\n    const handleDelete = (e: Event) => {\n      if (!props.tab.disabled) {\n        emit('delete', props.tab.key, e);\n      }\n    };\n\n    const cls = computed(() => [\n      prefixCls,\n      {\n        [`${prefixCls}-active`]: props.active,\n        [`${prefixCls}-closable`]: props.editable && props.tab.closable,\n        [`${prefixCls}-disabled`]: props.tab.disabled,\n      },\n    ]);\n\n    return {\n      prefixCls,\n      cls,\n      eventHandlers,\n      handleDelete,\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/tabs/tabs.tsx",
    "content": "import type { PropType } from 'vue';\nimport {\n  computed,\n  defineComponent,\n  nextTick,\n  provide,\n  reactive,\n  ref,\n  toRefs,\n  inject,\n  onMounted,\n} from 'vue';\nimport type { Direction, Size } from '../_utils/constant';\nimport type {\n  TabsPosition,\n  TabsType,\n  TabData,\n  TabTriggerEvent,\n  ScrollPosition,\n} from './interface';\nimport { getPrefixCls } from '../_utils/global-config';\nimport TabsNav from './tabs-nav';\nimport { tabsInjectionKey } from './context';\nimport { isUndefined } from '../_utils/is';\nimport { useSize } from '../_hooks/use-size';\nimport { useChildrenComponents } from '../_hooks/use-children-components';\nimport { configProviderInjectionKey } from '../config-provider/context';\n\nexport default defineComponent({\n  name: 'Tabs',\n  props: {\n    /**\n     * @zh 当前选中的标签的 `key`\n     * @en The `key` of the currently selected label\n     * @vModel\n     */\n    activeKey: {\n      type: [String, Number],\n      default: undefined,\n    },\n    /**\n     * @zh 默认选中的标签的`key`（非受控状态，为空时选中第一个标签页）\n     * @en The `key` of the tab selected by default (uncontrolled state, select the first tab page when it is empty)\n     */\n    defaultActiveKey: {\n      type: [String, Number],\n      default: undefined,\n    },\n    /**\n     * @zh 选项卡的位置\n     * @en Position of the tab\n     * @values 'left', 'right', 'top', 'bottom'\n     */\n    position: {\n      type: String as PropType<TabsPosition>,\n      default: 'top',\n    },\n    /**\n     * @zh 选项卡的大小\n     * @en The size of the tab\n     * @values 'mini', 'small', 'medium', 'large'\n     */\n    size: {\n      type: String as PropType<Size>,\n    },\n    /**\n     * @zh 选项卡的类型\n     * @en The type of tab\n     * @values 'line', 'card', 'card-gutter', 'text', 'rounded', 'capsule'\n     */\n    type: {\n      type: String as PropType<TabsType>,\n      default: 'line',\n    },\n    /**\n     * @zh 选项卡的方向\n     * @en The direction of tab\n     * @values 'horizontal', 'vertical'\n     */\n    direction: {\n      type: String as PropType<Direction>,\n      default: 'horizontal',\n    },\n    /**\n     * @zh 是否开启可编辑模式\n     * @en Whether to enable editable mode\n     */\n    editable: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 是否显示增加按钮（仅在可编辑模式可用）\n     * @en Whether to display the add button (only available in editable mode)\n     */\n    showAddButton: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 是否在不显示标签时销毁内容\n     * @en Whether to destroy the content when the label is not displayed\n     * @version 2.27.0\n     */\n    destroyOnHide: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 是否在首次展示标签时挂载内容\n     * @en Whether to mount the content when the label is first displayed\n     */\n    lazyLoad: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 高度撑满容器，只在水平模式下生效。\n     * @en The height of the container is fully supported, and it only takes effect in horizontal mode.\n     */\n    justify: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 是否开启选项内容过渡动画\n     * @en Whether to enable option content transition animation\n     */\n    animation: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 选项卡头部是否存在水平边距。仅对 `type` 等于 `line`、`text` 类型的选项卡生效\n     * @en Whether there is a horizontal margin on the header of the tab. Only valid for tabs with `type` equal to `line` and `text` type\n     * @version 2.10.0\n     */\n    headerPadding: {\n      type: Boolean,\n      default: true,\n    },\n    /**\n     * @zh 创建标签后是否切换到新标签（最后一个）\n     * @en Whether to switch to a new tab after creating a tab (the last one)\n     * @version 2.18.0\n     */\n    autoSwitch: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 是否隐藏内容\n     * @en Whether to hide content\n     * @version 2.25.0\n     */\n    hideContent: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 触发方式\n     * @en Trigger method\n     * @values 'hover','click'\n     * @version 2.34.0\n     */\n    trigger: {\n      type: String as PropType<TabTriggerEvent>,\n      default: 'click',\n    },\n    /**\n     * @zh 被选中 tab 的滚动位置，默认 auto 即会将 activeTab 滚动到可见区域，但不会特意做位置调整\n     * @en The scroll position of the selected tab, the default auto will scroll the activeTab to the visible area, but will not adjust the position intentionally\n     * @values 'start', 'end', 'center', 'auto', number\n     */\n    scrollPosition: {\n      type: [String, Number] as PropType<ScrollPosition>,\n      default: 'auto',\n    },\n  },\n  emits: {\n    'update:activeKey': (key: string | number) => true,\n    /**\n     * @zh 当前标签值改变时触发\n     * @en Triggered when the current tag value changes\n     * @property { string | number } key\n     */\n    'change': (key: string | number) => true,\n    /**\n     * @zh 用户点击标签时触发\n     * @en Triggered when the user clicks on the tab\n     * @property { string | number } key\n     */\n    'tabClick': (key: string | number, ev: Event) => true,\n    /**\n     * @zh 用户点击增加按钮时触发\n     * @en Triggered when the user clicks the add button\n     */\n    'add': (ev: Event) => true,\n    /**\n     * @zh 用户点击删除按钮时触发\n     * @en Triggered when the user clicks the delete button\n     * @property { string | number } key\n     */\n    'delete': (key: string | number, ev: Event) => true,\n  },\n  /**\n   * @zh 选项卡额外内容\n   * @en Additional tab content\n   * @slot extra\n   */\n  setup(props, { emit, slots }) {\n    const { size, lazyLoad, destroyOnHide, trigger } = toRefs(props);\n    const prefixCls = getPrefixCls('tabs');\n    const { mergedSize } = useSize(size);\n    const mergedPosition = computed(() =>\n      props.direction === 'vertical' ? 'left' : props.position\n    );\n    const mergedDirection = computed(() =>\n      ['left', 'right'].includes(mergedPosition.value)\n        ? 'vertical'\n        : 'horizontal'\n    );\n    const { children, components } = useChildrenComponents('TabPane');\n\n    const tabMap = reactive(new Map<number, TabData>());\n    const sortedTabs = computed(() => {\n      const tabData: TabData[] = [];\n      components.value.forEach((id) => {\n        const tab = tabMap.get(id);\n        if (tab) tabData.push(tab);\n      });\n      return tabData;\n    });\n    const tabKeys = computed(() => sortedTabs.value.map((item) => item.key));\n\n    const addItem = (id: number, data: any) => {\n      tabMap.set(id, data);\n    };\n\n    const removeItem = (id: number) => {\n      tabMap.delete(id);\n    };\n\n    const _activeKey = ref(props.defaultActiveKey);\n\n    const computedActiveKey = computed(() => {\n      const activeKey = props.activeKey ?? _activeKey.value;\n      if (isUndefined(activeKey)) {\n        return tabKeys.value[0];\n      }\n      return activeKey;\n    });\n\n    const activeIndex = computed(() => {\n      const index = tabKeys.value.indexOf(computedActiveKey.value);\n      if (index === -1) {\n        return 0;\n      }\n      return index;\n    });\n\n    provide(\n      tabsInjectionKey,\n      reactive({\n        lazyLoad,\n        destroyOnHide,\n        activeKey: computedActiveKey,\n        addItem,\n        removeItem,\n        trigger,\n      })\n    );\n\n    const handleChange = (key: string | number) => {\n      if (key !== computedActiveKey.value) {\n        _activeKey.value = key;\n        emit('update:activeKey', key);\n        emit('change', key);\n      }\n    };\n\n    const handleClick = (key: string | number, e: Event) => {\n      handleChange(key);\n      emit('tabClick', key, e);\n    };\n\n    const handleAdd = (ev: Event) => {\n      emit('add', ev);\n      if (props.autoSwitch) {\n        nextTick(() => {\n          const lastKey = tabKeys.value[tabKeys.value.length - 1];\n          handleChange(lastKey);\n        });\n      }\n    };\n\n    const handleDelete = (key: string | number, ev: Event) => {\n      emit('delete', key, ev);\n    };\n\n    const configCtx = inject(configProviderInjectionKey, undefined);\n    const rtl = computed(() => configCtx?.rtl ?? false);\n\n    const renderContent = () => {\n      return (\n        <div\n          class={[\n            `${prefixCls}-content`,\n            {\n              [`${prefixCls}-content-hide`]: props.hideContent,\n            },\n          ]}\n        >\n          <div\n            class={[\n              `${prefixCls}-content-list`,\n              {\n                [`${prefixCls}-content-animation`]: props.animation,\n              },\n            ]}\n            style={\n              rtl.value\n                ? { marginRight: `-${activeIndex.value * 100}%` }\n                : { marginLeft: `-${activeIndex.value * 100}%` }\n            }\n          >\n            {children.value}\n          </div>\n        </div>\n      );\n    };\n\n    const cls = computed(() => [\n      prefixCls,\n      `${prefixCls}-${mergedDirection.value}`,\n      `${prefixCls}-${mergedPosition.value}`,\n      `${prefixCls}-type-${props.type}`,\n      `${prefixCls}-size-${mergedSize.value}`,\n      {\n        [`${prefixCls}-justify`]: props.justify,\n        [`${prefixCls}-rtl`]: rtl.value,\n      },\n    ]);\n\n    return () => {\n      children.value = slots.default?.();\n\n      return (\n        <div class={cls.value}>\n          {mergedPosition.value === 'bottom' && renderContent()}\n          <TabsNav\n            v-slots={{ extra: slots.extra }}\n            tabs={sortedTabs.value}\n            activeKey={computedActiveKey.value}\n            activeIndex={activeIndex.value}\n            direction={mergedDirection.value}\n            position={mergedPosition.value}\n            editable={props.editable}\n            animation={props.animation}\n            showAddButton={props.showAddButton}\n            headerPadding={props.headerPadding}\n            scrollPosition={props.scrollPosition}\n            size={mergedSize.value}\n            type={props.type}\n            onClick={handleClick}\n            onAdd={handleAdd}\n            onDelete={handleDelete}\n          />\n          {mergedPosition.value !== 'bottom' && renderContent()}\n        </div>\n      );\n    };\n  },\n});\n"
  },
  {
    "path": "packages/web-vue/components/tabs/utils.ts",
    "content": "export const getDiffRect = (node: HTMLElement, parentNode: HTMLElement) => {\n  const nodeRect = node.getBoundingClientRect();\n  const parentNodeRect = parentNode.getBoundingClientRect();\n\n  return {\n    left: nodeRect.left - parentNodeRect.left,\n    top: nodeRect.top - parentNodeRect.top,\n    right: nodeRect.right - parentNodeRect.right,\n    bottom: nodeRect.bottom - parentNodeRect.bottom,\n  };\n};\n\nexport const updateScrollOffset = (\n  parentNode: HTMLElement,\n  direction: 'horizontal' | 'vertical'\n) => {\n  const { scrollTop, scrollLeft } = parentNode;\n\n  if (direction === 'horizontal' && scrollLeft) {\n    parentNode.scrollTo({ left: -1 * scrollLeft });\n  }\n  if (direction === 'vertical' && scrollTop) {\n    parentNode.scrollTo({ top: -1 * scrollTop });\n  }\n};\n"
  },
  {
    "path": "packages/web-vue/components/tag/CHANGELOG.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.38.0\n\n`2022-10-28`\n\n\n## 2.33.0\n\n`2022-07-08`\n\n### 🆕 Feature\n\n- support `bordered`  show border ([#1342](https://github.com/arco-design/arco-design-vue/pull/1342))\n\n\n## 2.32.0\n\n`2022-06-24`\n\n### 💅 Style\n\n- Firefox overflow style compatibility ([#1317](https://github.com/arco-design/arco-design-vue/pull/1317))\n\n\n## 2.25.0\n\n`2022-04-22`\n\n### 🆎 TypeScript\n\n- Fix TagProps issues ([#1024](https://github.com/arco-design/arco-design-vue/pull/1024))\n\n\n## 2.21.0\n\n`2022-03-25`\n\n### 🐛 BugFix\n\n- Remove `mini` size type ([#860](https://github.com/arco-design/arco-design-vue/pull/860))\n\n\n## 2.15.0\n\n`2022-01-14`\n\n### 💅 Style\n\n- Fix checkable state style bug ([#570](https://github.com/arco-design/arco-design-vue/pull/570))\n\n"
  },
  {
    "path": "packages/web-vue/components/tag/CHANGELOG.zh-CN.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.38.0\n\n`2022-10-28`\n\n\n## 2.33.0\n\n`2022-07-08`\n\n### 🆕 新增功能\n\n- 支持 `bordered` 显示边框 ([#1342](https://github.com/arco-design/arco-design-vue/pull/1342))\n\n\n## 2.32.0\n\n`2022-06-24`\n\n### 💅 样式更新\n\n- 火狐浏览器溢出样式兼容 ([#1317](https://github.com/arco-design/arco-design-vue/pull/1317))\n\n\n## 2.25.0\n\n`2022-04-22`\n\n### 🆎 类型修正\n\n- 修复 TagProps 的问题 ([#1024](https://github.com/arco-design/arco-design-vue/pull/1024))\n\n\n## 2.21.0\n\n`2022-03-25`\n\n### 🐛 问题修复\n\n- 移除尺寸类型 `mini` ([#860](https://github.com/arco-design/arco-design-vue/pull/860))\n\n\n## 2.15.0\n\n`2022-01-14`\n\n### 💅 样式更新\n\n- 修复 checkable 状态样式错误的问题 ([#570](https://github.com/arco-design/arco-design-vue/pull/570))\n\n"
  },
  {
    "path": "packages/web-vue/components/tag/README.en-US.md",
    "content": "```yaml\nmeta:\n  type: Component\n  category: Data Display\ntitle: Tag\ndescription: Used for the selection, screening and classification of information. Users use tags for information feedback and interactive operations.\n```\n\n*Auto translate by google.*\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/closeable.md\n\n@import ./__demo__/dynamically.md\n\n@import ./__demo__/checkable.md\n\n@import ./__demo__/color.md\n\n@import ./__demo__/size.md\n\n@import ./__demo__/loading.md\n\n@import ./__demo__/icon.md\n\n@import ./__demo__/bordered.md\n\n## API\n\n\n### `<tag>` Props\n\n|Attribute|Description|Type|Default|version|\n|---|---|---|:---:|:---|\n|color|Label color|`'red' \\| 'orangered' \\| 'orange' \\| 'gold' \\| 'lime' \\| 'green' \\| 'cyan' \\| 'blue' \\| 'arcoblue' \\| 'purple' \\| 'pinkpurple' \\| 'magenta' \\| 'gray'`|`-`||\n|size|Label size|`'small' \\| 'medium' \\| 'large'`|`'medium'`||\n|bordered|Whether the tag is bordered|`boolean`|`false`|2.33.0|\n|visible **(v-model)**|Whether the tag is visible|`boolean`|`-`||\n|default-visible|Whether the tag is visible by default|`boolean`|`true`||\n|loading|Whether the tag is loading state|`boolean`|`false`||\n|closable|Whether the tag can be closed|`boolean`|`false`||\n|checkable|Whether the tag can be checked|`boolean`|`false`||\n|checked **(v-model)**|Whether the tag is checked (available when the tag is checkable)|`boolean`|`-`||\n|default-checked|Whether the tag is checked by default (available when the tag is checkable)|`boolean`|`true`||\n|nowrap|Tag content does not wrap|`boolean`|`false`|2.56.1|\n### `<tag>` Events\n\n|Event Name|Description|Parameters|\n|---|---|---|\n|close|Emitted when the close button is clicked|ev: `MouseEvent`|\n|check|Emitted when the user check (emit only in the checkable mode)|checked: `boolean`<br>ev: `MouseEvent`|\n### `<tag>` Slots\n\n|Slot Name|Description|Parameters|\n|---|---|---|\n|icon|Icon|-|\n|close-icon|Close button icon|-|\n\n\n"
  },
  {
    "path": "packages/web-vue/components/tag/README.zh-CN.md",
    "content": "```yaml\nmeta:\n  type: 组件\n  category: 数据展示\ntitle: 标签 Tag\ndescription: 用于信息的选择、筛选、分类。用户通过标签进行信息反馈和交互操作。\n```\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/closeable.md\n\n@import ./__demo__/dynamically.md\n\n@import ./__demo__/checkable.md\n\n@import ./__demo__/color.md\n\n@import ./__demo__/size.md\n\n@import ./__demo__/loading.md\n\n@import ./__demo__/icon.md\n\n@import ./__demo__/bordered.md\n\n## API\n\n\n### `<tag>` Props\n\n|参数名|描述|类型|默认值|版本|\n|---|---|---|:---:|:---|\n|color|标签的颜色|`'red' \\| 'orangered' \\| 'orange' \\| 'gold' \\| 'lime' \\| 'green' \\| 'cyan' \\| 'blue' \\| 'arcoblue' \\| 'purple' \\| 'pinkpurple' \\| 'magenta' \\| 'gray'`|`-`||\n|size|标签的大小|`'small' \\| 'medium' \\| 'large'`|`'medium'`||\n|bordered|是否显示边框|`boolean`|`false`|2.33.0|\n|visible **(v-model)**|标签是否可见|`boolean`|`-`||\n|default-visible|标签默认是否可见|`boolean`|`true`||\n|loading|标签是否为加载中状态|`boolean`|`false`||\n|closable|标签是否可关闭|`boolean`|`false`||\n|checkable|标签是否可选中|`boolean`|`false`||\n|checked **(v-model)**|标签是否选中（标签可选中时可用）|`boolean`|`-`||\n|default-checked|标签默认选中状态（标签可选中时可用）|`boolean`|`true`||\n|nowrap|标签内容不换行|`boolean`|`false`|2.56.1|\n### `<tag>` Events\n\n|事件名|描述|参数|\n|---|---|---|\n|close|点击关闭按钮时触发|ev: `MouseEvent`|\n|check|用户选中时触发（仅在可选中模式下触发）|checked: `boolean`<br>ev: `MouseEvent`|\n### `<tag>` Slots\n\n|插槽名|描述|参数|\n|---|:---:|---|\n|icon|图标|-|\n|close-icon|关闭按钮的图标|-|\n\n\n"
  },
  {
    "path": "packages/web-vue/components/tag/TEMPLATE.md",
    "content": "## zh-CN\n```yaml\nmeta:\n  type: 组件\n  category: 数据展示\ntitle: 标签 Tag\ndescription: 用于信息的选择、筛选、分类。用户通过标签进行信息反馈和交互操作。\n```\n---\n## en-US\n```yaml\nmeta:\n  type: Component\n  category: Data Display\ntitle: Tag\ndescription: Used for the selection, screening and classification of information. Users use tags for information feedback and interactive operations.\n```\n---\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/closeable.md\n\n@import ./__demo__/dynamically.md\n\n@import ./__demo__/checkable.md\n\n@import ./__demo__/color.md\n\n@import ./__demo__/size.md\n\n@import ./__demo__/loading.md\n\n@import ./__demo__/icon.md\n\n@import ./__demo__/bordered.md\n\n## API\n\n%%API(tag.vue)%%\n"
  },
  {
    "path": "packages/web-vue/components/tag/__demo__/basic.md",
    "content": "```yaml\ntitle:\n  zh-CN: 基本用法\n  en-US: Basic Usage\n```\n\n## zh-CN\n\n标签的基本用法\n\n---\n\n## en-US\n\nBasic usage of tags\n\n---\n\n```vue\n<template>\n  <a-space>\n    <a-tag>Default</a-tag>\n    <a-tag>Tag 1</a-tag>\n    <a-tag>Tag 2</a-tag>\n    <a-tag>\n      <template #icon>\n        <icon-check-circle-fill />\n      </template>\n      Complete\n    </a-tag>\n  </a-space>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/tag/__demo__/bordered.md",
    "content": "```yaml\ntitle:\n  zh-CN: 带边框的标签\n  en-US: Bordered\n```\n\n## zh-CN\n\n通过参数 `bordered`，可以显示带边框的标签。\n\n---\n\n## en-US\n\nThrough the prop `bordered` to display a bordered tag.\n\n---\n\n```vue\n<template>\n   <a-space wrap>\n    <a-tag bordered>default</a-tag>\n    <a-tag v-for=\"(color, index) of colors\" :key=\"index\" :color=\"color\" bordered>{{ color }}</a-tag>\n  </a-space>\n</template>\n\n<script>\nexport default {\n  setup() {\n    const colors = [\n      'orangered',\n      'orange',\n      'gold',\n      'lime',\n      'green',\n      'cyan',\n      'blue',\n      'arcoblue',\n      'purple',\n      'pinkpurple',\n      'magenta',\n      'gray'\n    ];\n    return {\n      colors\n    }\n  },\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/tag/__demo__/checkable.md",
    "content": "```yaml\ntitle:\n  zh-CN: 可选中\n  en-US: Checkable\n```\n\n## zh-CN\n\n通过设置 `checkable` ，可以实现点击选中的效果。\n\n---\n\n## en-US\n\nBy setting `checkable`, the effect of selecting can be achieved.\n\n---\n\n```vue\n<template>\n  <a-space>\n    <a-tag checkable>Awesome</a-tag>\n    <a-tag checkable color=\"red\" :default-checked=\"true\">Toutiao</a-tag>\n    <a-tag checkable color=\"arcoblue\" :default-checked=\"true\">Lark</a-tag>\n  </a-space>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/tag/__demo__/closeable.md",
    "content": "```yaml\ntitle:\n  zh-CN: 可关闭标签\n  en-US: Closeable\n```\n\n## zh-CN\n\n通过 `closable` 属性控制标签是否可关闭。可关闭标签可通过 `close` 事件执行一些关闭后操作，也可通过 `visible` 属性控制标签的显示或隐藏。\n\n---\n\n## en-US\n\nUse the `closable` attribute to control whether the label can be closed. Closable tags can perform some post-closing operations through the `close` event, and the display or hiding of the tags can also be controlled through the `visible` property.\n\n---\n\n```vue\n<template>\n  <a-space>\n    <a-tag closable>Tag</a-tag>\n    <a-tag closable>\n      <template #icon>\n        <icon-star/>\n      </template>\n      Tag\n    </a-tag>\n  </a-space>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/tag/__demo__/color.md",
    "content": "```yaml\ntitle:\n  zh-CN: 标签的颜色\n  en-US: Color\n```\n\n## zh-CN\n\n我们提供多种预设色彩的标签样式，通过 `color` 设置不同颜色。如果预设值不能满足你的需求，`color` 字段也可以设置自定义色值。\n\n---\n\n## en-US\n\nWe provide a variety of label styles with preset colors, and set different colors through `color`. If the preset value cannot meet your needs, you can also set a custom color value in the `color` field.\n\n---\n\n```vue\n<template>\n  <a-space wrap>\n    <a-tag v-for=\"(color, index) of colors\" :key=\"index\" :color=\"color\" closable>{{ color }}</a-tag>\n  </a-space>\n  <h3>Custom Color:</h3>\n  <a-space wrap>\n    <a-tag v-for=\"(color, index) of custom\" :key=\"index\" :color=\"color\" closable>{{ color }}</a-tag>\n  </a-space>\n</template>\n\n<script>\nexport default {\n  setup() {\n    const colors = [\n      'red',\n      'orangered',\n      'orange',\n      'gold',\n      'lime',\n      'green',\n      'cyan',\n      'blue',\n      'arcoblue',\n      'purple',\n      'pinkpurple',\n      'magenta',\n      'gray'\n    ];\n    const custom = [\n      '#f53f3f',\n      '#7816ff',\n      '#00b42a',\n      '#165dff',\n      '#ff7d00',\n      '#eb0aa4',\n      '#7bc616',\n      '#86909c',\n      '#b71de8',\n      '#0fc6c2',\n      '#ffb400',\n      '#168cff',\n      '#ff5722'\n    ];\n\n    return {\n      colors,\n      custom\n    }\n  },\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/tag/__demo__/dynamically.md",
    "content": "```yaml\ntitle:\n  zh-CN: 动态编辑标签\n  en-US: Dynamically Edit\n```\n\n## zh-CN\n\n可动态添加和删除标签。\n\n---\n\n## en-US\n\nCan add and delete tags dynamically.\n\n---\n\n```vue\n<template>\n  <a-space wrap>\n    <a-tag\n      v-for=\"(tag, index) of tags\"\n      :key=\"tag\"\n      :closable=\"index !== 0\"\n      @close=\"handleRemove(tag)\"\n    >\n      {{ tag }}\n    </a-tag>\n\n    <a-input\n      v-if=\"showInput\"\n      ref=\"inputRef\"\n      :style=\"{ width: '90px'}\"\n      size=\"mini\"\n      v-model.trim=\"inputVal\"\n      @keyup.enter=\"handleAdd\"\n      @blur=\"handleAdd\"\n    />\n    <a-tag\n      v-else\n      :style=\"{\n        width: '90px',\n        backgroundColor: 'var(--color-fill-2)',\n        border: '1px dashed var(--color-fill-3)',\n        cursor: 'pointer',\n      }\"\n      @click=\"handleEdit\"\n    >\n      <template #icon>\n        <icon-plus />\n      </template>\n      Add Tag\n    </a-tag>\n  </a-space>\n</template>\n\n<script>\nimport { ref, nextTick } from 'vue';\n\nexport default {\n  setup() {\n    const tags = ref(['Tag 1', 'Tag 2', 'Tag 3']);\n    const inputRef = ref(null);\n    const showInput = ref(false);\n    const inputVal = ref('');\n\n    const handleEdit = () => {\n      showInput.value = true;\n\n      nextTick(() => {\n        if (inputRef.value) {\n          inputRef.value.focus();\n        }\n      });\n    };\n\n    const handleAdd = () => {\n      if (inputVal.value) {\n        tags.value.push(inputVal.value);\n        inputVal.value = '';\n      }\n      showInput.value = false;\n    };\n\n    const handleRemove = (key) => {\n      tags.value = tags.value.filter((tag) => tag !== key);\n    };\n\n    return {\n      tags,\n      inputRef,\n      showInput,\n      inputVal,\n      handleEdit,\n      handleAdd,\n      handleRemove,\n    };\n  },\n};\n</script>\n\n```\n"
  },
  {
    "path": "packages/web-vue/components/tag/__demo__/icon.md",
    "content": "```yaml\ntitle:\n  zh-CN: 带图标的标签\n  en-US: Icon\n```\n\n## zh-CN\n\n可通过 `icon` 插槽在标签中加入图标。\n\n---\n\n## en-US\n\nAn icon can be added to the tag through the `icon` slot.\n\n---\n\n```vue\n<template>\n  <a-space>\n    <a-tag color=\"gray\">\n      <template #icon>\n        <icon-github/>\n      </template>\n      Github\n    </a-tag>\n    <a-tag color=\"orangered\">\n      <template #icon>\n        <icon-gitlab/>\n      </template>\n      Gitlab\n    </a-tag>\n    <a-tag color=\"blue\">\n      <template #icon>\n        <icon-twitter/>\n      </template>\n      Twitter\n    </a-tag>\n    <a-tag color=\"arcoblue\">\n      <template #icon>\n        <icon-facebook/>\n      </template>\n      Facebook\n    </a-tag>\n  </a-space>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/tag/__demo__/loading.md",
    "content": "```yaml\ntitle:\n  zh-CN: 加载中状态\n  en-US: Loading\n```\n\n## zh-CN\n\n标签的加载中状态。\n\n---\n\n## en-US\n\nThe loading status of the tag.\n\n---\n\n```vue\n<template>\n  <a-tag loading>Loading</a-tag>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/tag/__demo__/size.md",
    "content": "```yaml\ntitle:\n  zh-CN: 标签的尺寸\n  en-US: Size\n```\n\n## zh-CN\n\n标签的大小分为：`small`、`medium`、`large` 三种，可以在不同场景下选择合适按钮尺寸。推荐及默认尺寸为 `medium`。\n\n---\n\n## en-US\n\nThe size of the label is divided into three types: `small`, `medium`, and `large`. The appropriate button size can be selected in different scenarios. The recommended and default size is `medium`.\n\n---\n\n```vue\n<template>\n  <a-space>\n    <a-tag size=\"large\">Large</a-tag>\n    <a-tag>Medium</a-tag>\n    <a-tag size=\"small\">Small</a-tag>\n  </a-space>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/tag/__test__/__snapshots__/demo.test.ts.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`<tag> demo: render [basic] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 8px; row-gap: 8px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-tag arco-tag-size-medium arco-tag-checked\\\\\"><!--v-if-->Default<!--v-if--><!--v-if--></span></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-tag arco-tag-size-medium arco-tag-checked\\\\\"><!--v-if-->Tag 1<!--v-if--><!--v-if--></span></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-tag arco-tag-size-medium arco-tag-checked\\\\\"><!--v-if-->Tag 2<!--v-if--><!--v-if--></span></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-tag arco-tag-size-medium arco-tag-checked\\\\\"><span class=\\\\\"arco-tag-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-check-circle-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path fill-rule=\\\\\"evenodd\\\\\" clip-rule=\\\\\"evenodd\\\\\" d=\\\\\"M24 44c11.046 0 20-8.954 20-20S35.046 4 24 4 4 12.954 4 24s8.954 20 20 20Zm10.207-24.379a1 1 0 0 0 0-1.414l-1.414-1.414a1 1 0 0 0-1.414 0L22 26.172l-4.878-4.88a1 1 0 0 0-1.415 0l-1.414 1.415a1 1 0 0 0 0 1.414l7 7a1 1 0 0 0 1.414 0l11.5-11.5Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path></svg></span> Complete\n    <!--v-if-->\n    <!--v-if--></span>\n  </div>\n</div>\"\n`;\n\nexports[`<tag> demo: render [bordered] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center arco-space-wrap\\\\\" style=\\\\\"column-gap: 8px; row-gap: 8px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-tag arco-tag-size-medium arco-tag-bordered arco-tag-checked\\\\\"><!--v-if-->default<!--v-if--><!--v-if--></span></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-tag arco-tag-size-medium arco-tag-orangered arco-tag-bordered arco-tag-checked\\\\\"><!--v-if-->orangered<!--v-if--><!--v-if--></span></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-tag arco-tag-size-medium arco-tag-orange arco-tag-bordered arco-tag-checked\\\\\"><!--v-if-->orange<!--v-if--><!--v-if--></span></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-tag arco-tag-size-medium arco-tag-gold arco-tag-bordered arco-tag-checked\\\\\"><!--v-if-->gold<!--v-if--><!--v-if--></span></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-tag arco-tag-size-medium arco-tag-lime arco-tag-bordered arco-tag-checked\\\\\"><!--v-if-->lime<!--v-if--><!--v-if--></span></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-tag arco-tag-size-medium arco-tag-green arco-tag-bordered arco-tag-checked\\\\\"><!--v-if-->green<!--v-if--><!--v-if--></span></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-tag arco-tag-size-medium arco-tag-cyan arco-tag-bordered arco-tag-checked\\\\\"><!--v-if-->cyan<!--v-if--><!--v-if--></span></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-tag arco-tag-size-medium arco-tag-blue arco-tag-bordered arco-tag-checked\\\\\"><!--v-if-->blue<!--v-if--><!--v-if--></span></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-tag arco-tag-size-medium arco-tag-arcoblue arco-tag-bordered arco-tag-checked\\\\\"><!--v-if-->arcoblue<!--v-if--><!--v-if--></span></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-tag arco-tag-size-medium arco-tag-purple arco-tag-bordered arco-tag-checked\\\\\"><!--v-if-->purple<!--v-if--><!--v-if--></span></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-tag arco-tag-size-medium arco-tag-pinkpurple arco-tag-bordered arco-tag-checked\\\\\"><!--v-if-->pinkpurple<!--v-if--><!--v-if--></span></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-tag arco-tag-size-medium arco-tag-magenta arco-tag-bordered arco-tag-checked\\\\\"><!--v-if-->magenta<!--v-if--><!--v-if--></span></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-tag arco-tag-size-medium arco-tag-gray arco-tag-bordered arco-tag-checked\\\\\"><!--v-if-->gray<!--v-if--><!--v-if--></span></div>\n</div>\"\n`;\n\nexports[`<tag> demo: render [checkable] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 8px; row-gap: 8px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-tag arco-tag-size-medium arco-tag-checkable arco-tag-checked\\\\\"><!--v-if-->Awesome<!--v-if--><!--v-if--></span></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-tag arco-tag-size-medium arco-tag-red arco-tag-checkable arco-tag-checked\\\\\"><!--v-if-->Toutiao<!--v-if--><!--v-if--></span></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-tag arco-tag-size-medium arco-tag-arcoblue arco-tag-checkable arco-tag-checked\\\\\"><!--v-if-->Lark<!--v-if--><!--v-if--></span></div>\n</div>\"\n`;\n\nexports[`<tag> demo: render [closeable] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 8px; row-gap: 8px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-tag arco-tag-size-medium arco-tag-checked\\\\\"><!--v-if-->Tag<span class=\\\\\"arco-icon-hover arco-tag-icon-hover arco-tag-close-btn\\\\\" role=\\\\\"button\\\\\" aria-label=\\\\\"Close\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-close\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M9.857 9.858 24 24m0 0 14.142 14.142M24 24 38.142 9.858M24 24 9.857 38.142\\\\\"></path></svg></span>\n    <!--v-if--></span>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-tag arco-tag-size-medium arco-tag-checked\\\\\"><span class=\\\\\"arco-tag-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-star\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M22.552 6.908a.5.5 0 0 1 .896 0l5.02 10.17a.5.5 0 0 0 .376.274l11.224 1.631a.5.5 0 0 1 .277.853l-8.122 7.916a.5.5 0 0 0-.143.443l1.917 11.178a.5.5 0 0 1-.726.527l-10.038-5.278a.5.5 0 0 0-.466 0L12.73 39.9a.5.5 0 0 1-.726-.527l1.918-11.178a.5.5 0 0 0-.144-.443l-8.122-7.916a.5.5 0 0 1 .278-.853l11.223-1.63a.5.5 0 0 0 .376-.274l5.02-10.17Z\\\\\"></path></svg></span> Tag <span class=\\\\\"arco-icon-hover arco-tag-icon-hover arco-tag-close-btn\\\\\" role=\\\\\"button\\\\\" aria-label=\\\\\"Close\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-close\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M9.857 9.858 24 24m0 0 14.142 14.142M24 24 38.142 9.858M24 24 9.857 38.142\\\\\"></path></svg></span>\n    <!--v-if--></span>\n  </div>\n</div>\"\n`;\n\nexports[`<tag> demo: render [color] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center arco-space-wrap\\\\\" style=\\\\\"column-gap: 8px; row-gap: 8px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-tag arco-tag-size-medium arco-tag-red arco-tag-checked\\\\\"><!--v-if-->red<span class=\\\\\"arco-icon-hover arco-tag-icon-hover arco-tag-close-btn\\\\\" role=\\\\\"button\\\\\" aria-label=\\\\\"Close\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-close\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M9.857 9.858 24 24m0 0 14.142 14.142M24 24 38.142 9.858M24 24 9.857 38.142\\\\\"></path></svg></span>\n    <!--v-if--></span>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-tag arco-tag-size-medium arco-tag-orangered arco-tag-checked\\\\\"><!--v-if-->orangered<span class=\\\\\"arco-icon-hover arco-tag-icon-hover arco-tag-close-btn\\\\\" role=\\\\\"button\\\\\" aria-label=\\\\\"Close\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-close\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M9.857 9.858 24 24m0 0 14.142 14.142M24 24 38.142 9.858M24 24 9.857 38.142\\\\\"></path></svg></span>\n    <!--v-if--></span>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-tag arco-tag-size-medium arco-tag-orange arco-tag-checked\\\\\"><!--v-if-->orange<span class=\\\\\"arco-icon-hover arco-tag-icon-hover arco-tag-close-btn\\\\\" role=\\\\\"button\\\\\" aria-label=\\\\\"Close\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-close\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M9.857 9.858 24 24m0 0 14.142 14.142M24 24 38.142 9.858M24 24 9.857 38.142\\\\\"></path></svg></span>\n    <!--v-if--></span>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-tag arco-tag-size-medium arco-tag-gold arco-tag-checked\\\\\"><!--v-if-->gold<span class=\\\\\"arco-icon-hover arco-tag-icon-hover arco-tag-close-btn\\\\\" role=\\\\\"button\\\\\" aria-label=\\\\\"Close\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-close\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M9.857 9.858 24 24m0 0 14.142 14.142M24 24 38.142 9.858M24 24 9.857 38.142\\\\\"></path></svg></span>\n    <!--v-if--></span>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-tag arco-tag-size-medium arco-tag-lime arco-tag-checked\\\\\"><!--v-if-->lime<span class=\\\\\"arco-icon-hover arco-tag-icon-hover arco-tag-close-btn\\\\\" role=\\\\\"button\\\\\" aria-label=\\\\\"Close\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-close\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M9.857 9.858 24 24m0 0 14.142 14.142M24 24 38.142 9.858M24 24 9.857 38.142\\\\\"></path></svg></span>\n    <!--v-if--></span>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-tag arco-tag-size-medium arco-tag-green arco-tag-checked\\\\\"><!--v-if-->green<span class=\\\\\"arco-icon-hover arco-tag-icon-hover arco-tag-close-btn\\\\\" role=\\\\\"button\\\\\" aria-label=\\\\\"Close\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-close\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M9.857 9.858 24 24m0 0 14.142 14.142M24 24 38.142 9.858M24 24 9.857 38.142\\\\\"></path></svg></span>\n    <!--v-if--></span>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-tag arco-tag-size-medium arco-tag-cyan arco-tag-checked\\\\\"><!--v-if-->cyan<span class=\\\\\"arco-icon-hover arco-tag-icon-hover arco-tag-close-btn\\\\\" role=\\\\\"button\\\\\" aria-label=\\\\\"Close\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-close\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M9.857 9.858 24 24m0 0 14.142 14.142M24 24 38.142 9.858M24 24 9.857 38.142\\\\\"></path></svg></span>\n    <!--v-if--></span>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-tag arco-tag-size-medium arco-tag-blue arco-tag-checked\\\\\"><!--v-if-->blue<span class=\\\\\"arco-icon-hover arco-tag-icon-hover arco-tag-close-btn\\\\\" role=\\\\\"button\\\\\" aria-label=\\\\\"Close\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-close\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M9.857 9.858 24 24m0 0 14.142 14.142M24 24 38.142 9.858M24 24 9.857 38.142\\\\\"></path></svg></span>\n    <!--v-if--></span>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-tag arco-tag-size-medium arco-tag-arcoblue arco-tag-checked\\\\\"><!--v-if-->arcoblue<span class=\\\\\"arco-icon-hover arco-tag-icon-hover arco-tag-close-btn\\\\\" role=\\\\\"button\\\\\" aria-label=\\\\\"Close\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-close\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M9.857 9.858 24 24m0 0 14.142 14.142M24 24 38.142 9.858M24 24 9.857 38.142\\\\\"></path></svg></span>\n    <!--v-if--></span>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-tag arco-tag-size-medium arco-tag-purple arco-tag-checked\\\\\"><!--v-if-->purple<span class=\\\\\"arco-icon-hover arco-tag-icon-hover arco-tag-close-btn\\\\\" role=\\\\\"button\\\\\" aria-label=\\\\\"Close\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-close\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M9.857 9.858 24 24m0 0 14.142 14.142M24 24 38.142 9.858M24 24 9.857 38.142\\\\\"></path></svg></span>\n    <!--v-if--></span>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-tag arco-tag-size-medium arco-tag-pinkpurple arco-tag-checked\\\\\"><!--v-if-->pinkpurple<span class=\\\\\"arco-icon-hover arco-tag-icon-hover arco-tag-close-btn\\\\\" role=\\\\\"button\\\\\" aria-label=\\\\\"Close\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-close\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M9.857 9.858 24 24m0 0 14.142 14.142M24 24 38.142 9.858M24 24 9.857 38.142\\\\\"></path></svg></span>\n    <!--v-if--></span>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-tag arco-tag-size-medium arco-tag-magenta arco-tag-checked\\\\\"><!--v-if-->magenta<span class=\\\\\"arco-icon-hover arco-tag-icon-hover arco-tag-close-btn\\\\\" role=\\\\\"button\\\\\" aria-label=\\\\\"Close\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-close\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M9.857 9.858 24 24m0 0 14.142 14.142M24 24 38.142 9.858M24 24 9.857 38.142\\\\\"></path></svg></span>\n    <!--v-if--></span>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-tag arco-tag-size-medium arco-tag-gray arco-tag-checked\\\\\"><!--v-if-->gray<span class=\\\\\"arco-icon-hover arco-tag-icon-hover arco-tag-close-btn\\\\\" role=\\\\\"button\\\\\" aria-label=\\\\\"Close\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-close\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M9.857 9.858 24 24m0 0 14.142 14.142M24 24 38.142 9.858M24 24 9.857 38.142\\\\\"></path></svg></span>\n    <!--v-if--></span>\n  </div>\n</div>\n<h3>Custom Color:</h3>\n<div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center arco-space-wrap\\\\\" style=\\\\\"column-gap: 8px; row-gap: 8px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-tag arco-tag-size-medium arco-tag-checked arco-tag-custom-color\\\\\" style=\\\\\"background-color: rgb(245, 63, 63);\\\\\"><!--v-if-->#f53f3f<span class=\\\\\"arco-icon-hover arco-tag-icon-hover arco-tag-close-btn\\\\\" role=\\\\\"button\\\\\" aria-label=\\\\\"Close\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-close\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M9.857 9.858 24 24m0 0 14.142 14.142M24 24 38.142 9.858M24 24 9.857 38.142\\\\\"></path></svg></span>\n    <!--v-if--></span>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-tag arco-tag-size-medium arco-tag-checked arco-tag-custom-color\\\\\" style=\\\\\"background-color: rgb(120, 22, 255);\\\\\"><!--v-if-->#7816ff<span class=\\\\\"arco-icon-hover arco-tag-icon-hover arco-tag-close-btn\\\\\" role=\\\\\"button\\\\\" aria-label=\\\\\"Close\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-close\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M9.857 9.858 24 24m0 0 14.142 14.142M24 24 38.142 9.858M24 24 9.857 38.142\\\\\"></path></svg></span>\n    <!--v-if--></span>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-tag arco-tag-size-medium arco-tag-checked arco-tag-custom-color\\\\\" style=\\\\\"background-color: rgb(0, 180, 42);\\\\\"><!--v-if-->#00b42a<span class=\\\\\"arco-icon-hover arco-tag-icon-hover arco-tag-close-btn\\\\\" role=\\\\\"button\\\\\" aria-label=\\\\\"Close\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-close\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M9.857 9.858 24 24m0 0 14.142 14.142M24 24 38.142 9.858M24 24 9.857 38.142\\\\\"></path></svg></span>\n    <!--v-if--></span>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-tag arco-tag-size-medium arco-tag-checked arco-tag-custom-color\\\\\" style=\\\\\"background-color: rgb(22, 93, 255);\\\\\"><!--v-if-->#165dff<span class=\\\\\"arco-icon-hover arco-tag-icon-hover arco-tag-close-btn\\\\\" role=\\\\\"button\\\\\" aria-label=\\\\\"Close\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-close\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M9.857 9.858 24 24m0 0 14.142 14.142M24 24 38.142 9.858M24 24 9.857 38.142\\\\\"></path></svg></span>\n    <!--v-if--></span>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-tag arco-tag-size-medium arco-tag-checked arco-tag-custom-color\\\\\" style=\\\\\"background-color: rgb(255, 125, 0);\\\\\"><!--v-if-->#ff7d00<span class=\\\\\"arco-icon-hover arco-tag-icon-hover arco-tag-close-btn\\\\\" role=\\\\\"button\\\\\" aria-label=\\\\\"Close\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-close\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M9.857 9.858 24 24m0 0 14.142 14.142M24 24 38.142 9.858M24 24 9.857 38.142\\\\\"></path></svg></span>\n    <!--v-if--></span>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-tag arco-tag-size-medium arco-tag-checked arco-tag-custom-color\\\\\" style=\\\\\"background-color: rgb(235, 10, 164);\\\\\"><!--v-if-->#eb0aa4<span class=\\\\\"arco-icon-hover arco-tag-icon-hover arco-tag-close-btn\\\\\" role=\\\\\"button\\\\\" aria-label=\\\\\"Close\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-close\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M9.857 9.858 24 24m0 0 14.142 14.142M24 24 38.142 9.858M24 24 9.857 38.142\\\\\"></path></svg></span>\n    <!--v-if--></span>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-tag arco-tag-size-medium arco-tag-checked arco-tag-custom-color\\\\\" style=\\\\\"background-color: rgb(123, 198, 22);\\\\\"><!--v-if-->#7bc616<span class=\\\\\"arco-icon-hover arco-tag-icon-hover arco-tag-close-btn\\\\\" role=\\\\\"button\\\\\" aria-label=\\\\\"Close\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-close\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M9.857 9.858 24 24m0 0 14.142 14.142M24 24 38.142 9.858M24 24 9.857 38.142\\\\\"></path></svg></span>\n    <!--v-if--></span>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-tag arco-tag-size-medium arco-tag-checked arco-tag-custom-color\\\\\" style=\\\\\"background-color: rgb(134, 144, 156);\\\\\"><!--v-if-->#86909c<span class=\\\\\"arco-icon-hover arco-tag-icon-hover arco-tag-close-btn\\\\\" role=\\\\\"button\\\\\" aria-label=\\\\\"Close\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-close\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M9.857 9.858 24 24m0 0 14.142 14.142M24 24 38.142 9.858M24 24 9.857 38.142\\\\\"></path></svg></span>\n    <!--v-if--></span>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-tag arco-tag-size-medium arco-tag-checked arco-tag-custom-color\\\\\" style=\\\\\"background-color: rgb(183, 29, 232);\\\\\"><!--v-if-->#b71de8<span class=\\\\\"arco-icon-hover arco-tag-icon-hover arco-tag-close-btn\\\\\" role=\\\\\"button\\\\\" aria-label=\\\\\"Close\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-close\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M9.857 9.858 24 24m0 0 14.142 14.142M24 24 38.142 9.858M24 24 9.857 38.142\\\\\"></path></svg></span>\n    <!--v-if--></span>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-tag arco-tag-size-medium arco-tag-checked arco-tag-custom-color\\\\\" style=\\\\\"background-color: rgb(15, 198, 194);\\\\\"><!--v-if-->#0fc6c2<span class=\\\\\"arco-icon-hover arco-tag-icon-hover arco-tag-close-btn\\\\\" role=\\\\\"button\\\\\" aria-label=\\\\\"Close\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-close\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M9.857 9.858 24 24m0 0 14.142 14.142M24 24 38.142 9.858M24 24 9.857 38.142\\\\\"></path></svg></span>\n    <!--v-if--></span>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-tag arco-tag-size-medium arco-tag-checked arco-tag-custom-color\\\\\" style=\\\\\"background-color: rgb(255, 180, 0);\\\\\"><!--v-if-->#ffb400<span class=\\\\\"arco-icon-hover arco-tag-icon-hover arco-tag-close-btn\\\\\" role=\\\\\"button\\\\\" aria-label=\\\\\"Close\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-close\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M9.857 9.858 24 24m0 0 14.142 14.142M24 24 38.142 9.858M24 24 9.857 38.142\\\\\"></path></svg></span>\n    <!--v-if--></span>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-tag arco-tag-size-medium arco-tag-checked arco-tag-custom-color\\\\\" style=\\\\\"background-color: rgb(22, 140, 255);\\\\\"><!--v-if-->#168cff<span class=\\\\\"arco-icon-hover arco-tag-icon-hover arco-tag-close-btn\\\\\" role=\\\\\"button\\\\\" aria-label=\\\\\"Close\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-close\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M9.857 9.858 24 24m0 0 14.142 14.142M24 24 38.142 9.858M24 24 9.857 38.142\\\\\"></path></svg></span>\n    <!--v-if--></span>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-tag arco-tag-size-medium arco-tag-checked arco-tag-custom-color\\\\\" style=\\\\\"background-color: rgb(255, 87, 34);\\\\\"><!--v-if-->#ff5722<span class=\\\\\"arco-icon-hover arco-tag-icon-hover arco-tag-close-btn\\\\\" role=\\\\\"button\\\\\" aria-label=\\\\\"Close\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-close\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M9.857 9.858 24 24m0 0 14.142 14.142M24 24 38.142 9.858M24 24 9.857 38.142\\\\\"></path></svg></span>\n    <!--v-if--></span>\n  </div>\n</div>\"\n`;\n\nexports[`<tag> demo: render [dynamically] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center arco-space-wrap\\\\\" style=\\\\\"column-gap: 8px; row-gap: 8px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-tag arco-tag-size-medium arco-tag-checked\\\\\"><!--v-if-->Tag 1<!--v-if--><!--v-if--></span></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-tag arco-tag-size-medium arco-tag-checked\\\\\"><!--v-if-->Tag 2<span class=\\\\\"arco-icon-hover arco-tag-icon-hover arco-tag-close-btn\\\\\" role=\\\\\"button\\\\\" aria-label=\\\\\"Close\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-close\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M9.857 9.858 24 24m0 0 14.142 14.142M24 24 38.142 9.858M24 24 9.857 38.142\\\\\"></path></svg></span>\n    <!--v-if--></span>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-tag arco-tag-size-medium arco-tag-checked\\\\\"><!--v-if-->Tag 3<span class=\\\\\"arco-icon-hover arco-tag-icon-hover arco-tag-close-btn\\\\\" role=\\\\\"button\\\\\" aria-label=\\\\\"Close\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-close\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M9.857 9.858 24 24m0 0 14.142 14.142M24 24 38.142 9.858M24 24 9.857 38.142\\\\\"></path></svg></span>\n    <!--v-if--></span>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-tag arco-tag-size-medium arco-tag-checked\\\\\" style=\\\\\"width: 90px; cursor: pointer;\\\\\"><span class=\\\\\"arco-tag-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-plus\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M5 24h38M24 5v38\\\\\"></path></svg></span> Add Tag\n    <!--v-if-->\n    <!--v-if--></span>\n  </div>\n</div>\"\n`;\n\nexports[`<tag> demo: render [icon] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 8px; row-gap: 8px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-tag arco-tag-size-medium arco-tag-gray arco-tag-checked\\\\\"><span class=\\\\\"arco-tag-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-github\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M.056 24.618c0 10.454 6.7 19.344 16.038 22.608 1.259.32 1.067-.582 1.067-1.19v-4.148c-7.265.853-7.553-3.957-8.043-4.758-.987-1.686-3.312-2.112-2.62-2.912 1.654-.853 3.34.213 5.291 3.1 1.413 2.09 4.166 1.738 5.562 1.385a6.777 6.777 0 0 1 1.856-3.253C11.687 34.112 8.55 29.519 8.55 24.057c0-2.646.874-5.082 2.586-7.045-1.088-3.243.102-6.01.26-6.422 3.11-.282 6.337 2.225 6.587 2.421 1.766-.474 3.782-.73 6.038-.73 2.266 0 4.293.26 6.069.74.603-.458 3.6-2.608 6.49-2.345.155.41 1.317 3.12.294 6.315 1.734 1.968 2.62 4.422 2.62 7.077 0 5.472-3.158 10.07-10.699 11.397a6.82 6.82 0 0 1 2.037 4.875v6.02c.042.48 0 .96.806.96 9.477-3.194 16.299-12.15 16.299-22.697C47.938 11.396 37.218.68 23.996.68 10.77.675.055 11.391.055 24.617l.001.001Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path></svg></span> Github\n    <!--v-if-->\n    <!--v-if--></span>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-tag arco-tag-size-medium arco-tag-orangered arco-tag-checked\\\\\"><span class=\\\\\"arco-tag-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-gitlab\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M45.53 26.154 39.694 6.289v-.005c-.407-1.227-1.377-1.955-2.587-1.955-1.254 0-2.277.723-2.663 1.885L30.62 17.625H17.4l-3.825-11.41c-.386-1.163-1.41-1.886-2.663-1.886-1.237 0-2.276.792-2.592 1.96l-5.83 19.865a2.047 2.047 0 0 0 .724 2.18l19.741 14.807c.14.193.332.338.557.418l.461.343.455-.343c.263-.091.483-.252.638-.477L44.8 28.33a2.03 2.03 0 0 0 .728-2.175ZM36.84 6.932c.053-.096.155-.102.187-.102.06 0 .134.016.182.161l3.183 10.704H33.24l3.6-10.763Zm-26.11.054c.047-.14.122-.156.181-.156.145 0 .156.006.183.091L14.699 17.7H7.633l3.096-10.714ZM5.076 26.502l1.511-5.213 10.843 14.475-12.354-9.262Zm3.96-6.236h6.54l4.865 15.23-11.406-15.23Zm15.01 17.877-5.743-17.877h11.48l-5.737 17.877Zm8.459-17.877h6.402L27.642 35.31l4.864-15.043Zm-2.18 15.745L41.43 21.187l1.58 5.315-12.685 9.509Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path></svg></span> Gitlab\n    <!--v-if-->\n    <!--v-if--></span>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-tag arco-tag-size-medium arco-tag-blue arco-tag-checked\\\\\"><span class=\\\\\"arco-tag-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-twitter\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M43.277 13.575c0 16.613-10.912 28.575-26.962 29.1-6.788.525-11.438-1.537-15.6-4.65 4.65.525 10.912-1.012 13.987-4.163-4.65 0-7.275-2.625-8.812-6.187h4.162C5.89 26.1 2.74 22.987 2.74 17.812c1.012.525 2.062 1.013 4.162 1.013-3.637-2.063-5.7-8.813-3.112-12.975 4.65 5.175 10.35 9.863 19.762 10.35C20.927 5.85 34.465.6 40.165 7.388c2.625-.525 4.162-1.538 6.187-2.625-.525 2.625-2.062 4.162-4.162 5.175 2.062 0 3.637-.525 5.175-1.538-.488 2.063-2.55 4.162-4.088 5.175Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path></svg></span> Twitter\n    <!--v-if-->\n    <!--v-if--></span>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-tag arco-tag-size-medium arco-tag-arcoblue arco-tag-checked\\\\\"><span class=\\\\\"arco-tag-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-facebook\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M35.184 15.727 34.312 24h-6.613v24h-9.933V24h-4.95v-8.273h4.95v-4.98C17.766 4.016 20.564 0 28.518 0h6.61v8.273H30.99c-3.086 0-3.292 1.166-3.292 3.32v4.134h7.485Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path></svg></span> Facebook\n    <!--v-if-->\n    <!--v-if--></span>\n  </div>\n</div>\"\n`;\n\nexports[`<tag> demo: render [loading] correctly 1`] = `\"<span class=\\\\\"arco-tag arco-tag-size-medium arco-tag-loading arco-tag-checked\\\\\"><!--v-if-->Loading<!--v-if--><span class=\\\\\"arco-tag-loading-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-loading\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M42 24c0 9.941-8.059 18-18 18S6 33.941 6 24 14.059 6 24 6\\\\\"></path></svg></span></span>\"`;\n\nexports[`<tag> demo: render [size] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 8px; row-gap: 8px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-tag arco-tag-size-large arco-tag-checked\\\\\"><!--v-if-->Large<!--v-if--><!--v-if--></span></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-tag arco-tag-size-medium arco-tag-checked\\\\\"><!--v-if-->Medium<!--v-if--><!--v-if--></span></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-tag arco-tag-size-small arco-tag-checked\\\\\"><!--v-if-->Small<!--v-if--><!--v-if--></span></div>\n</div>\"\n`;\n"
  },
  {
    "path": "packages/web-vue/components/tag/__test__/demo.test.ts",
    "content": "import demoTest from '../../../scripts/demo-test';\n\ndemoTest('tag');\n"
  },
  {
    "path": "packages/web-vue/components/tag/__test__/index.test.ts",
    "content": "import { mount } from '@vue/test-utils';\nimport Tag from '../index';\n\ndescribe('Tag', () => {\n  test('should ', async () => {\n    const wrapper = mount(Tag, {\n      props: {\n        checkable: true,\n      },\n    });\n    await wrapper.trigger('click');\n\n    // @ts-ignore\n    expect(wrapper.emitted('check')?.[0][0]).toEqual(false);\n  });\n});\n"
  },
  {
    "path": "packages/web-vue/components/tag/index.ts",
    "content": "import type { App } from 'vue';\nimport type { ArcoOptions } from '../_utils/types';\nimport { setGlobalConfig, getComponentPrefix } from '../_utils/global-config';\nimport _Tag from './tag.vue';\n\nconst Tag = Object.assign(_Tag, {\n  install: (app: App, options?: ArcoOptions) => {\n    setGlobalConfig(app, options);\n    const componentPrefix = getComponentPrefix(options);\n\n    app.component(componentPrefix + _Tag.name, _Tag);\n  },\n});\n\nexport type TagInstance = InstanceType<typeof _Tag>;\nexport type { TagProps, TagColor } from './interface';\n\nexport default Tag;\n"
  },
  {
    "path": "packages/web-vue/components/tag/interface.ts",
    "content": "export const TAG_COLORS = [\n  'red',\n  'orangered',\n  'orange',\n  'gold',\n  'lime',\n  'green',\n  'cyan',\n  'blue',\n  'arcoblue',\n  'purple',\n  'pinkpurple',\n  'magenta',\n  'gray',\n] as const;\n\nexport type TagColor = typeof TAG_COLORS[number];\n\nexport interface TagProps {\n  /**\n   * @zh 标签的颜色\n   * @en Label color\n   */\n  color?: TagColor | string;\n  /**\n   * @zh 标签的大小\n   * @en Label size\n   */\n  size?: 'small' | 'medium' | 'large';\n  /**\n   * @zh 标签是否可见\n   * @en Whether the tag is visible\n   */\n  visible?: boolean;\n  /**\n   * @zh 标签默认是否可见\n   * @en Whether the tag is visible by default\n   */\n  defaultVisible?: boolean;\n  /**\n   * @zh 标签是否为加载中状态\n   * @en Whether the tag is loading state\n   */\n  loading?: boolean;\n  /**\n   * @zh 标签是否可关闭\n   * @en Whether the tag can be closed\n   */\n  closable?: boolean;\n  /**\n   * @zh 标签是否可选中\n   * @en Whether the tag can be checked\n   */\n  checkable?: boolean;\n  /**\n   * @zh 标签是否选中（标签可选中时可用）\n   * @en Whether the tag is checked (available when the tag is checkable)\n   */\n  checked?: boolean;\n  /**\n   * @zh 标签默认选中状态（标签可选中时可用）\n   * @en Whether the tag is checked by default (available when the tag is checkable)\n   */\n  defaultChecked?: boolean;\n}\n"
  },
  {
    "path": "packages/web-vue/components/tag/style/index.less",
    "content": "@import '../../style/mixins/index.less';\n@import './token.less';\n\n@tag-prefix-cls: ~'@{prefix}-tag';\n\n@colors: red, orangered, orange, gold, lime, green, cyan, blue, arcoblue, purple,\n  pinkpurple, magenta, gray;\n\n.@{tag-prefix-cls} {\n  display: inline-flex;\n  align-items: center;\n  box-sizing: border-box;\n  height: @tag-size-default;\n  padding: @tag-padding-vertical @tag-padding-horizontal;\n  color: @tag-default-color-text;\n  font-weight: @tag-text-font-weight;\n  font-size: @tag-size-default-font-size;\n  line-height: @tag-size-default - @tag-border-width * 2 - @tag-padding-vertical *\n    2;\n  vertical-align: middle;\n  border: @tag-border-width @tag-border-type transparent;\n  border-radius: @tag-border-radius;\n  .text-ellipsis();\n\n  .icon-hover(@tag-prefix-cls, 12px, 16px);\n  .icon-hover-bg(@tag-prefix-cls, @tag-default-color-bg_hover);\n\n  &-checkable {\n    cursor: pointer;\n    transition: all @transition-duration-1 @transition-timing-function-linear;\n  }\n\n  &-checkable:hover {\n    background-color: @tag-color-bg-not-checked_hover;\n  }\n\n  &-checked {\n    background-color: @tag-default-color-bg;\n    border-color: @tag-default-color-border;\n  }\n\n  &-checkable&-checked:hover {\n    background-color: @tag-default-color-bg_hover;\n    border-color: @tag-default-color-border_hover;\n  }\n\n  &-bordered,\n  &-checkable&-checked&-bordered:hover {\n    border-color: @tag-default-bordered-color-border;\n  }\n\n  // Size\n  &-size-small {\n    height: @tag-size-small;\n    font-size: @tag-size-small-font-size;\n    line-height: @tag-size-small - @tag-border-width * 2;\n  }\n\n  &-size-medium {\n    height: @tag-size-medium;\n    font-size: @tag-size-medium-font-size;\n    line-height: @tag-size-medium - @tag-border-width * 2;\n  }\n\n  &-size-large {\n    height: @tag-size-large;\n    font-size: @tag-size-large-font-size;\n    line-height: @tag-size-large - @tag-border-width * 2;\n  }\n\n  &-hide {\n    display: none;\n  }\n\n  &-loading {\n    cursor: default;\n    opacity: 0.8;\n  }\n\n  &-icon {\n    margin-right: @tag-icon-margin-right;\n    color: @tag-default-color-icon;\n  }\n\n  &-text {\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n  }\n\n  each(@colors, {\n    &&-checked&-@{value} {\n      color: ~'@{tag-@{value}-color-text}';\n      background-color: ~'@{tag-@{value}-color-bg}';\n      border: @tag-border-width @tag-border-type ~'@{tag-@{value}-color-border}';\n\n      .icon-hover-bg(@tag-prefix-cls, ~'@{tag-@{value}-color-icon-bg_hover}');\n    }\n\n    &&-checkable&-checked&-@{value}&:hover {\n      background-color: ~'@{tag-@{value}-color-bg_hover}';\n      border-color: ~'@{tag-@{value}-color-border_hover}';\n    }\n\n    &-checked&-@{value}&-bordered,\n    &-checked&-@{value}&-bordered:hover {\n      border-color: ~'@{tag-@{value}-bordered-color-border}';\n    }\n\n    &&-checked&-@{value} &-icon,\n    &&-checked&-@{value} &-close-btn,\n    &&-checked&-@{value} &-loading-icon {\n      color: ~'@{tag-@{value}-color-icon}';\n    }\n  });\n\n  &&-custom-color {\n    color: @tag-custom-color-text;\n\n    .icon-hover-bg(@tag-prefix-cls, @tag-custom-color-icon-bg_hover);\n  }\n\n  & &-close-btn {\n    margin-left: 4px;\n    font-size: 12px;\n\n    > svg {\n      position: relative;\n    }\n  }\n\n  & &-loading-icon {\n    margin-left: 4px;\n    font-size: 12px;\n  }\n}\n\n@{arco-theme-tag}[arco-theme='dark'] {\n  .@{tag-prefix-cls}-checked {\n    color: rgba(255, 255, 255, 0.9);\n  }\n\n  each(@colors, {\n    .@{tag-prefix-cls}-checked.@{tag-prefix-cls}-@{value} {\n      background-color: ~'rgba(var(@{arco-cssvars-prefix}-@{value}-6), 0.2)';\n\n      .icon-hover-bg(@tag-prefix-cls, ~'rgba(var(@{arco-cssvars-prefix}-@{value}-6), 0.35)');\n    }\n\n    .@{tag-prefix-cls}-checkable.@{tag-prefix-cls}-checked.@{tag-prefix-cls}-@{value}:hover {\n      background-color: ~'rgba(var(@{arco-cssvars-prefix}-@{value}-6), 0.35)';\n    }\n  });\n}\n\n.@{tag-prefix-cls}-rtl {\n  direction: rtl;\n\n  .@{tag-prefix-cls} {\n    &-icon {\n      margin-right: 0;\n      margin-left: @tag-icon-margin-right;\n    }\n\n    &-close-btn,\n    &-loading-icon {\n      margin-right: 4px;\n      margin-left: 0;\n    }\n  }\n}\n"
  },
  {
    "path": "packages/web-vue/components/tag/style/index.ts",
    "content": "import '../../style/index.less';\nimport './index.less';\n"
  },
  {
    "path": "packages/web-vue/components/tag/style/token.less",
    "content": "@import '../../style/theme/index.less';\n\n@tag-border-width: 1px;\n@tag-border-type: solid;\n@tag-padding-horizontal: 8px;\n@tag-padding-vertical: 0;\n@tag-icon-margin-right: @spacing-2;\n@tag-text-font-weight: @font-weight-500;\n@tag-border-radius: @radius-small;\n\n@tag-size-small: @size-5;\n@tag-size-default: @size-6;\n@tag-size-medium: @size-7;\n@tag-size-large: @size-8;\n\n@tag-size-small-font-size: 12px;\n@tag-size-default-font-size: 12px;\n@tag-size-medium-font-size: 14px;\n@tag-size-large-font-size: 14px;\n\n@tag-color-bg-not-checked_hover: var(~'@{arco-cssvars-prefix}-color-fill-2');\n\n@tag-custom-color-text: var(~'@{arco-cssvars-prefix}-color-white');\n@tag-custom-color-icon-bg_hover: rgba(255, 255, 255, 0.2);\n\n@tag-default-color-bg: var(~'@{arco-cssvars-prefix}-color-fill-2');\n@tag-default-color-bg_hover: var(~'@{arco-cssvars-prefix}-color-fill-3');\n@tag-default-color-icon: var(~'@{arco-cssvars-prefix}-color-text-2');\n@tag-default-color-text: var(~'@{arco-cssvars-prefix}-color-text-1');\n@tag-default-color-border: @color-transparent;\n@tag-default-bordered-color-border: var(\n  ~'@{arco-cssvars-prefix}-color-border-2'\n);\n@tag-default-color-border_hover: @color-transparent;\n\n@tag-red-color-bg: rgb(var(~'@{arco-cssvars-prefix}-red-1'));\n@tag-red-color-bg_hover: rgb(var(~'@{arco-cssvars-prefix}-red-2'));\n@tag-red-color-border: @color-transparent;\n@tag-red-bordered-color-border: rgb(var(~'@{arco-cssvars-prefix}-red-6'));\n@tag-red-color-border_hover: @color-transparent;\n@tag-red-color-icon: rgb(var(~'@{arco-cssvars-prefix}-red-6'));\n@tag-red-color-icon-bg_hover: rgb(var(~'@{arco-cssvars-prefix}-red-2'));\n@tag-red-color-text: rgb(var(~'@{arco-cssvars-prefix}-red-6'));\n\n@tag-orangered-color-bg: rgb(var(~'@{arco-cssvars-prefix}-orangered-1'));\n@tag-orangered-color-bg_hover: rgb(var(~'@{arco-cssvars-prefix}-orangered-2'));\n@tag-orangered-color-border: @color-transparent;\n@tag-orangered-bordered-color-border: rgb(\n  var(~'@{arco-cssvars-prefix}-orangered-6')\n);\n@tag-orangered-color-border_hover: @color-transparent;\n@tag-orangered-color-icon: rgb(var(~'@{arco-cssvars-prefix}-orangered-6'));\n@tag-orangered-color-icon-bg_hover: rgb(\n  var(~'@{arco-cssvars-prefix}-orangered-2')\n);\n@tag-orangered-color-text: rgb(var(~'@{arco-cssvars-prefix}-orangered-6'));\n\n@tag-orange-color-bg: rgb(var(~'@{arco-cssvars-prefix}-orange-1'));\n@tag-orange-color-bg_hover: rgb(var(~'@{arco-cssvars-prefix}-orange-2'));\n@tag-orange-color-border: @color-transparent;\n@tag-orange-bordered-color-border: rgb(var(~'@{arco-cssvars-prefix}-orange-6'));\n@tag-orange-color-border_hover: @color-transparent;\n@tag-orange-color-icon: rgb(var(~'@{arco-cssvars-prefix}-orange-6'));\n@tag-orange-color-icon-bg_hover: rgb(var(~'@{arco-cssvars-prefix}-orange-2'));\n@tag-orange-color-text: rgb(var(~'@{arco-cssvars-prefix}-orange-6'));\n\n@tag-gold-color-bg: rgb(var(~'@{arco-cssvars-prefix}-gold-1'));\n@tag-gold-color-bg_hover: rgb(var(~'@{arco-cssvars-prefix}-gold-3'));\n@tag-gold-color-border: @color-transparent;\n@tag-gold-bordered-color-border: rgb(var(~'@{arco-cssvars-prefix}-gold-6'));\n@tag-gold-color-border_hover: @color-transparent;\n@tag-gold-color-icon: rgb(var(~'@{arco-cssvars-prefix}-gold-6'));\n@tag-gold-color-icon-bg_hover: rgb(var(~'@{arco-cssvars-prefix}-gold-2'));\n@tag-gold-color-text: rgb(var(~'@{arco-cssvars-prefix}-gold-6'));\n\n@tag-lime-color-bg: rgb(var(~'@{arco-cssvars-prefix}-lime-1'));\n@tag-lime-color-bg_hover: rgb(var(~'@{arco-cssvars-prefix}-lime-2'));\n@tag-lime-color-border: @color-transparent;\n@tag-lime-bordered-color-border: rgb(var(~'@{arco-cssvars-prefix}-lime-6'));\n@tag-lime-color-border_hover: @color-transparent;\n@tag-lime-color-icon: rgb(var(~'@{arco-cssvars-prefix}-lime-6'));\n@tag-lime-color-icon-bg_hover: rgb(var(~'@{arco-cssvars-prefix}-lime-2'));\n@tag-lime-color-text: rgb(var(~'@{arco-cssvars-prefix}-lime-6'));\n\n@tag-green-color-bg: rgb(var(~'@{arco-cssvars-prefix}-green-1'));\n@tag-green-color-bg_hover: rgb(var(~'@{arco-cssvars-prefix}-green-2'));\n@tag-green-color-border: @color-transparent;\n@tag-green-bordered-color-border: rgb(var(~'@{arco-cssvars-prefix}-green-6'));\n@tag-green-color-border_hover: @color-transparent;\n@tag-green-color-icon: rgb(var(~'@{arco-cssvars-prefix}-green-6'));\n@tag-green-color-icon-bg_hover: rgb(var(~'@{arco-cssvars-prefix}-green-2'));\n@tag-green-color-text: rgb(var(~'@{arco-cssvars-prefix}-green-6'));\n\n@tag-cyan-color-bg: rgb(var(~'@{arco-cssvars-prefix}-cyan-1'));\n@tag-cyan-color-bg_hover: rgb(var(~'@{arco-cssvars-prefix}-cyan-2'));\n@tag-cyan-color-border: @color-transparent;\n@tag-cyan-bordered-color-border: rgb(var(~'@{arco-cssvars-prefix}-cyan-6'));\n@tag-cyan-color-border_hover: @color-transparent;\n@tag-cyan-color-icon: rgb(var(~'@{arco-cssvars-prefix}-cyan-6'));\n@tag-cyan-color-icon-bg_hover: rgb(var(~'@{arco-cssvars-prefix}-cyan-2'));\n@tag-cyan-color-text: rgb(var(~'@{arco-cssvars-prefix}-cyan-6'));\n\n@tag-blue-color-bg: rgb(var(~'@{arco-cssvars-prefix}-blue-1'));\n@tag-blue-color-bg_hover: rgb(var(~'@{arco-cssvars-prefix}-blue-2'));\n@tag-blue-color-border: @color-transparent;\n@tag-blue-bordered-color-border: rgb(var(~'@{arco-cssvars-prefix}-blue-6'));\n@tag-blue-color-border_hover: @color-transparent;\n@tag-blue-color-icon: rgb(var(~'@{arco-cssvars-prefix}-blue-6'));\n@tag-blue-color-icon-bg_hover: rgb(var(~'@{arco-cssvars-prefix}-blue-2'));\n@tag-blue-color-text: rgb(var(~'@{arco-cssvars-prefix}-blue-6'));\n\n@tag-arcoblue-color-bg: rgb(var(~'@{arco-cssvars-prefix}-arcoblue-1'));\n@tag-arcoblue-color-bg_hover: rgb(var(~'@{arco-cssvars-prefix}-arcoblue-2'));\n@tag-arcoblue-color-border: @color-transparent;\n@tag-arcoblue-bordered-color-border: rgb(\n  var(~'@{arco-cssvars-prefix}-arcoblue-6')\n);\n@tag-arcoblue-color-border_hover: @color-transparent;\n@tag-arcoblue-color-icon: rgb(var(~'@{arco-cssvars-prefix}-arcoblue-6'));\n@tag-arcoblue-color-icon-bg_hover: rgb(\n  var(~'@{arco-cssvars-prefix}-arcoblue-2')\n);\n@tag-arcoblue-color-text: rgb(var(~'@{arco-cssvars-prefix}-arcoblue-6'));\n\n@tag-purple-color-bg: rgb(var(~'@{arco-cssvars-prefix}-purple-1'));\n@tag-purple-color-bg_hover: rgb(var(~'@{arco-cssvars-prefix}-purple-2'));\n@tag-purple-color-border: @color-transparent;\n@tag-purple-bordered-color-border: rgb(var(~'@{arco-cssvars-prefix}-purple-6'));\n@tag-purple-color-border_hover: @color-transparent;\n@tag-purple-color-icon: rgb(var(~'@{arco-cssvars-prefix}-purple-6'));\n@tag-purple-color-icon-bg_hover: rgb(var(~'@{arco-cssvars-prefix}-purple-2'));\n@tag-purple-color-text: rgb(var(~'@{arco-cssvars-prefix}-purple-6'));\n\n@tag-pinkpurple-color-bg: rgb(var(~'@{arco-cssvars-prefix}-pinkpurple-1'));\n@tag-pinkpurple-color-bg_hover: rgb(\n  var(~'@{arco-cssvars-prefix}-pinkpurple-2')\n);\n@tag-pinkpurple-color-border: @color-transparent;\n@tag-pinkpurple-bordered-color-border: rgb(\n  var(~'@{arco-cssvars-prefix}-pinkpurple-6')\n);\n@tag-pinkpurple-color-border_hover: @color-transparent;\n@tag-pinkpurple-color-icon: rgb(var(~'@{arco-cssvars-prefix}-pinkpurple-6'));\n@tag-pinkpurple-color-icon-bg_hover: rgb(\n  var(~'@{arco-cssvars-prefix}-pinkpurple-2')\n);\n@tag-pinkpurple-color-text: rgb(var(~'@{arco-cssvars-prefix}-pinkpurple-6'));\n\n@tag-magenta-color-bg: rgb(var(~'@{arco-cssvars-prefix}-magenta-1'));\n@tag-magenta-color-bg_hover: rgb(var(~'@{arco-cssvars-prefix}-magenta-2'));\n@tag-magenta-color-border: @color-transparent;\n@tag-magenta-bordered-color-border: rgb(\n  var(~'@{arco-cssvars-prefix}-magenta-6')\n);\n@tag-magenta-color-border_hover: @color-transparent;\n@tag-magenta-color-icon: rgb(var(~'@{arco-cssvars-prefix}-magenta-6'));\n@tag-magenta-color-icon-bg_hover: rgb(var(~'@{arco-cssvars-prefix}-magenta-2'));\n@tag-magenta-color-text: rgb(var(~'@{arco-cssvars-prefix}-magenta-6'));\n\n@tag-gray-color-bg: rgb(var(~'@{arco-cssvars-prefix}-gray-2'));\n@tag-gray-color-bg_hover: rgb(var(~'@{arco-cssvars-prefix}-gray-3'));\n@tag-gray-color-border: @color-transparent;\n@tag-gray-bordered-color-border: rgb(var(~'@{arco-cssvars-prefix}-gray-6'));\n@tag-gray-color-border_hover: @color-transparent;\n@tag-gray-color-icon: rgb(var(~'@{arco-cssvars-prefix}-gray-6'));\n@tag-gray-color-icon-bg_hover: rgb(var(~'@{arco-cssvars-prefix}-gray-3'));\n@tag-gray-color-text: rgb(var(~'@{arco-cssvars-prefix}-gray-6'));\n\n// vue overwrite token\n@tag-size-medium: @tag-size-default;\n@tag-size-medium-font-size: @tag-size-default-font-size;\n"
  },
  {
    "path": "packages/web-vue/components/tag/tag.vue",
    "content": "<template>\n  <span v-if=\"computedVisible\" :class=\"cls\" :style=\"style\" @click=\"handleClick\">\n    <span v-if=\"$slots.icon\" :class=\"`${prefixCls}-icon`\">\n      <slot name=\"icon\" />\n    </span>\n    <span v-if=\"nowrap\" :class=\"`${prefixCls}-text`\">\n      <slot />\n    </span>\n    <slot v-else />\n    <icon-hover\n      v-if=\"closable\"\n      role=\"button\"\n      aria-label=\"Close\"\n      :prefix=\"prefixCls\"\n      :class=\"`${prefixCls}-close-btn`\"\n      @click.stop=\"handleClose\"\n    >\n      <slot name=\"close-icon\">\n        <icon-close />\n      </slot>\n    </icon-hover>\n    <span v-if=\"loading\" :class=\"`${prefixCls}-loading-icon`\">\n      <icon-loading />\n    </span>\n  </span>\n</template>\n\n<script lang=\"ts\">\nimport type { CSSProperties, PropType } from 'vue';\nimport { computed, defineComponent, ref, toRefs, inject } from 'vue';\nimport { getPrefixCls } from '../_utils/global-config';\nimport IconHover from '../_components/icon-hover.vue';\nimport IconClose from '../icon/icon-close';\nimport IconLoading from '../icon/icon-loading';\nimport { TAG_COLORS, TagColor } from './interface';\nimport { useSize } from '../_hooks/use-size';\nimport { configProviderInjectionKey } from '../config-provider/context';\n\nexport default defineComponent({\n  name: 'Tag',\n  components: {\n    IconHover,\n    IconClose,\n    IconLoading,\n  },\n  props: {\n    /**\n     * @zh 标签的颜色\n     * @en Label color\n     * @values 'red','orangered','orange','gold','lime','green','cyan','blue','arcoblue','purple','pinkpurple','magenta','gray'\n     */\n    color: {\n      type: String as PropType<TagColor | string>,\n    },\n    /**\n     * @zh 标签的大小\n     * @en Label size\n     * @values 'small','medium','large'\n     * @defaultValue 'medium'\n     */\n    size: {\n      type: String as PropType<'small' | 'medium' | 'large'>,\n    },\n    /**\n     * @zh 是否显示边框\n     * @en Whether the tag is bordered\n     * @version 2.33.0\n     */\n    bordered: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 标签是否可见\n     * @en Whether the tag is visible\n     * @vModel\n     */\n    visible: {\n      type: Boolean,\n      default: undefined,\n    },\n    /**\n     * @zh 标签默认是否可见\n     * @en Whether the tag is visible by default\n     */\n    defaultVisible: {\n      type: Boolean,\n      default: true,\n    },\n    /**\n     * @zh 标签是否为加载中状态\n     * @en Whether the tag is loading state\n     */\n    loading: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 标签是否可关闭\n     * @en Whether the tag can be closed\n     */\n    closable: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 标签是否可选中\n     * @en Whether the tag can be checked\n     */\n    checkable: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 标签是否选中（标签可选中时可用）\n     * @en Whether the tag is checked (available when the tag is checkable)\n     * @vModel\n     */\n    checked: {\n      type: Boolean,\n      default: undefined,\n    },\n    /**\n     * @zh 标签默认选中状态（标签可选中时可用）\n     * @en Whether the tag is checked by default (available when the tag is checkable)\n     */\n    defaultChecked: {\n      type: Boolean,\n      default: true,\n    },\n    /**\n     * @zh 标签内容不换行\n     * @en Tag content does not wrap\n     * @version 2.56.1\n     */\n    nowrap: {\n      type: Boolean,\n      default: false,\n    },\n  },\n  emits: {\n    'update:visible': (visible: boolean) => true,\n    'update:checked': (checked: boolean) => true,\n    /**\n     * @zh 点击关闭按钮时触发\n     * @en Emitted when the close button is clicked\n     * @param {MouseEvent} ev\n     */\n    'close': (ev: MouseEvent) => true,\n    /**\n     * @zh 用户选中时触发（仅在可选中模式下触发）\n     * @en Emitted when the user check (emit only in the checkable mode)\n     * @param {boolean} checked\n     * @param {MouseEvent} ev\n     */\n    'check': (checked: boolean, ev: MouseEvent) => true,\n  },\n  /**\n   * @zh 图标\n   * @en Icon\n   * @slot icon\n   */\n  /**\n   * @zh 关闭按钮的图标\n   * @en Close button icon\n   * @slot close-icon\n   */\n  setup(props, { emit }) {\n    const { size } = toRefs(props);\n    const prefixCls = getPrefixCls('tag');\n    const isBuiltInColor = computed(\n      () => props.color && TAG_COLORS.includes(props.color as any)\n    );\n    const isCustomColor = computed(\n      () => props.color && !TAG_COLORS.includes(props.color as any)\n    );\n    const _visible = ref(props.defaultVisible);\n    const _checked = ref(props.defaultChecked);\n    const computedVisible = computed(() => props.visible ?? _visible.value);\n    const computedChecked = computed(() =>\n      props.checkable ? props.checked ?? _checked.value : true\n    );\n    const { mergedSize: _mergedSize } = useSize(size);\n    const mergedSize = computed(() => {\n      if (_mergedSize.value === 'mini') {\n        return 'small';\n      }\n      return _mergedSize.value;\n    });\n\n    const handleClose = (ev: MouseEvent) => {\n      _visible.value = false;\n      emit('update:visible', false);\n      emit('close', ev);\n    };\n\n    const handleClick = (ev: MouseEvent) => {\n      if (props.checkable) {\n        const newChecked = !computedChecked.value;\n        _checked.value = newChecked;\n        emit('update:checked', newChecked);\n        emit('check', newChecked, ev);\n      }\n    };\n\n    const configCtx = inject(configProviderInjectionKey, undefined);\n    const rtl = computed(() => configCtx?.rtl ?? false);\n    const cls = computed(() => [\n      prefixCls,\n      `${prefixCls}-size-${mergedSize.value}`,\n      {\n        [`${prefixCls}-loading`]: props.loading,\n        [`${prefixCls}-hide`]: !computedVisible.value,\n        [`${prefixCls}-${props.color}`]: isBuiltInColor.value,\n        [`${prefixCls}-bordered`]: props.bordered,\n        [`${prefixCls}-checkable`]: props.checkable,\n        [`${prefixCls}-checked`]: computedChecked.value,\n        [`${prefixCls}-custom-color`]: isCustomColor.value,\n        [`${prefixCls}-rtl`]: rtl.value,\n      },\n    ]);\n\n    const style = computed(() => {\n      if (isCustomColor.value) {\n        return {\n          backgroundColor: props.color,\n        } as CSSProperties;\n      }\n      return undefined;\n    });\n\n    return {\n      prefixCls,\n      cls,\n      style,\n      computedVisible,\n      computedChecked,\n      handleClick,\n      handleClose,\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/textarea/CHANGELOG.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.56.3\n\n`2024-10-25`\n\n### 💎 Enhancement\n\n- Support textareaAttrs attribute for textarea ([#3303](https://github.com/arco-design/arco-design-vue/pull/3303))\n\n\n## 2.28.0\n\n`2022-05-20`\n\n### 💅 Style\n\n- Fix the display problem of the text box after setting the height style ([#1176](https://github.com/arco-design/arco-design-vue/pull/1176))\n\n\n## 2.14.2\n\n`2022-01-10`\n\n### 🐛 BugFix\n\n- Fix the problem that the downlink height setting is invalid in Firefox browser ([#536](https://github.com/arco-design/arco-design-vue/pull/536))\n\n\n## 2.12.0\n\n`2021-12-24`\n\n### ⚠️ Important Attention\n\n- The calculation of max-length no longer excludes carriage returns, which is consistent with the React version ([#452](https://github.com/arco-design/arco-design-vue/pull/452))\n\n### 🆕 Feature\n\n- `max-length` adds `errorOnly` attribute and `word-slice` attribute ([#451](https://github.com/arco-design/arco-design-vue/pull/451))\n\n\n## 2.10.0\n\n`2021-12-10`\n\n### 💅 Style\n\n- Fix the style problem of prohibited mode ([#355](https://github.com/arco-design/arco-design-vue/pull/355))\n\n\n## 2.8.0\n\n`2021-12-01`\n\n### 🆕 Feature\n\n- Add support for min rows and max rows ([#309](https://github.com/arco-design/arco-design-vue/pull/309))\n\n\n## 2.6.0\n\n`2021-11-19`\n\n### 🆕 Feature\n\n- Add `word-length` attribute ([#199](https://github.com/arco-design/arco-design-vue/pull/199))\n\n\n## 2.3.0\n\n`2021-11-12`\n\n### 🐛 BugFix\n\n- Fix the problem that `disabled` does not take effect ([#139](https://github.com/arco-design/arco-design-vue/pull/139))\n- Fix the issue of missing `style/index.js` ([#139](https://github.com/arco-design/arco-design-vue/pull/139))\n\n\n## 2.1.1\n\n`2021-11-08`\n\n### 🐛 BugFix\n\n- Fix the problem of internal loop update in `autoSize` mode ([#113](https://github.com/arco-design/arco-design-vue/pull/113))\n\n\n## 2.1.0\n\n`2021-11-05`\n\n### 🐛 BugFix\n\n- Fix the problem of inaccurate automatic height adjustment ([#78](https://github.com/arco-design/arco-design-vue/pull/78))\n\n"
  },
  {
    "path": "packages/web-vue/components/textarea/CHANGELOG.zh-CN.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.56.3\n\n`2024-10-25`\n\n### 💎 功能优化\n\n- 支持textarea的textareaAttrs属性 ([#3303](https://github.com/arco-design/arco-design-vue/pull/3303))\n\n\n## 2.28.0\n\n`2022-05-20`\n\n### 💅 样式更新\n\n- 修复设置高度样式后，文本框的显示问题 ([#1176](https://github.com/arco-design/arco-design-vue/pull/1176))\n\n\n## 2.14.2\n\n`2022-01-10`\n\n### 🐛 问题修复\n\n- 修复在 Firefox 浏览器下行高设置失效的问题 ([#536](https://github.com/arco-design/arco-design-vue/pull/536))\n\n\n## 2.12.0\n\n`2021-12-24`\n\n### ⚠️ 重点注意\n\n- max-length 的计算不再排除回车情况，同 React 版本保持一致 ([#452](https://github.com/arco-design/arco-design-vue/pull/452))\n\n### 🆕 新增功能\n\n- `max-length` 增加 `errorOnly` 属性，增加 `word-slice` 属性 ([#451](https://github.com/arco-design/arco-design-vue/pull/451))\n\n\n## 2.10.0\n\n`2021-12-10`\n\n### 💅 样式更新\n\n- 修正禁止模式的样式问题 ([#355](https://github.com/arco-design/arco-design-vue/pull/355))\n\n\n## 2.8.0\n\n`2021-12-01`\n\n### 🆕 新增功能\n\n- 增加最小行和最大行的支持 ([#309](https://github.com/arco-design/arco-design-vue/pull/309))\n\n\n## 2.6.0\n\n`2021-11-19`\n\n### 🆕 新增功能\n\n- 增加 `word-length` 属性 ([#199](https://github.com/arco-design/arco-design-vue/pull/199))\n\n\n## 2.3.0\n\n`2021-11-12`\n\n### 🐛 问题修复\n\n- 修复 `disabled` 不生效的问题 ([#139](https://github.com/arco-design/arco-design-vue/pull/139))\n- 修复缺失 `style/index.js` 的问题 ([#139](https://github.com/arco-design/arco-design-vue/pull/139))\n\n\n## 2.1.1\n\n`2021-11-08`\n\n### 🐛 问题修复\n\n- 修复 `autoSize` 模式下内部循环更新的问题 ([#113](https://github.com/arco-design/arco-design-vue/pull/113))\n\n\n## 2.1.0\n\n`2021-11-05`\n\n### 🐛 问题修复\n\n- 修复自动高度调整不准的问题 ([#78](https://github.com/arco-design/arco-design-vue/pull/78))\n\n"
  },
  {
    "path": "packages/web-vue/components/textarea/README.en-US.md",
    "content": "```yaml\nmeta:\n  type: Component\n  category: Data Entry\ntitle: Textarea\ndescription: Multi-line plain text edit control, suitable for a paragraph of opinion in the comment or feedback form.\n```\n\n*Auto translate by google.*\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/status.md\n\n@import ./__demo__/word-limit.md\n\n@import ./__demo__/auto-size.md\n\n## API\n\n\n### `<textarea>` Props\n\n|Attribute|Description|Type|Default|version|\n|---|---|---|:---:|:---|\n|model-value **(v-model)**|Value|`string`|`-`||\n|default-value|Default value (uncontrolled state)|`string`|`''`||\n|placeholder|Placeholder|`string`|`-`||\n|disabled|Whether to disable|`boolean`|`false`||\n|error|Whether it is an error state|`boolean`|`false`||\n|max-length|Maximum length of input value, the errorOnly attribute was added in version 2.12.0|`number \\| { length: number; errorOnly?: boolean }`|`0`||\n|show-word-limit|Whether to display word count|`boolean`|`false`||\n|allow-clear|Whether to allow clearing the text|`boolean`|`false`||\n|auto-size|Whether to make the textarea adapt to the height of the content|`boolean \\| { minRows?: number; maxRows?: number }`|`false`||\n|word-length|Calculation method of word length|`(value: string) => number`|`-`||\n|word-slice|Character interception method, used together with wordLength|`(value: string, maxLength: number) => string`|`-`|2.12.0|\n|textarea-attrs|Attributes passed to textarea|`Record<string, any>`|`-`||\n### `<textarea>` Events\n\n|Event Name|Description|Parameters|\n|---|---|---|\n|input|Emitted when the user enters|value: `string`<br>ev: `Event`|\n|change|Only emitted when the textarea is out of focus|value: `string`<br>ev: `Event`|\n|clear|Emitted when the clear button is clicked|ev: `MouseEvent`|\n|focus|Emitted when the textarea gets focus|ev: `FocusEvent`|\n|blur|Emitted when the textarea loses focus|ev: `FocusEvent`|\n### `<textarea>` Methods\n\n|Method|Description|Parameters|Return|version|\n|---|---|---|:---:|:---|\n|focus|Make the input box focus|-|-|2.24.0|\n|blur|Make the input box lose focus|-|-|2.24.0|\n\n\n"
  },
  {
    "path": "packages/web-vue/components/textarea/README.zh-CN.md",
    "content": "```yaml\nmeta:\n  type: 组件\n  category: 数据输入\ntitle: 文本域 Textarea\ndescription: 多行纯文本编辑控件，适用于评论或反馈表单中的一段意见。\n```\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/status.md\n\n@import ./__demo__/word-limit.md\n\n@import ./__demo__/auto-size.md\n\n## API\n\n\n### `<textarea>` Props\n\n|参数名|描述|类型|默认值|版本|\n|---|---|---|:---:|:---|\n|model-value **(v-model)**|绑定值|`string`|`-`||\n|default-value|默认值（非受控状态）|`string`|`''`||\n|placeholder|提示文字|`string`|`-`||\n|disabled|是否禁用|`boolean`|`false`||\n|error|是否为错误状态|`boolean`|`false`||\n|max-length|输入值的最大长度，errorOnly 属性在 2.12.0 版本添加|`number \\| { length: number; errorOnly?: boolean }`|`0`||\n|show-word-limit|是否显示字数统计|`boolean`|`false`||\n|allow-clear|是否允许清空文本域|`boolean`|`false`||\n|auto-size|是否让文本框自适应内容高度|`boolean \\| { minRows?: number; maxRows?: number }`|`false`||\n|word-length|字符长度的计算方法|`(value: string) => number`|`-`||\n|word-slice|字符截取方法，同 wordLength 一起使用|`(value: string, maxLength: number) => string`|`-`|2.12.0|\n|textarea-attrs|透传给 textarea 的属性|`Record<string, any>`|`-`||\n### `<textarea>` Events\n\n|事件名|描述|参数|\n|---|---|---|\n|input|用户输入时触发|value: `string`<br>ev: `Event`|\n|change|仅在文本框失焦时触发|value: `string`<br>ev: `Event`|\n|clear|点击清除按钮时触发|ev: `MouseEvent`|\n|focus|文本框获取焦点时触发|ev: `FocusEvent`|\n|blur|文本框失去焦点时触发|ev: `FocusEvent`|\n### `<textarea>` Methods\n\n|方法名|描述|参数|返回值|版本|\n|---|---|---|---|:---|\n|focus|使输入框获取焦点|-|-|2.24.0|\n|blur|使输入框失去焦点|-|-|2.24.0|\n\n\n"
  },
  {
    "path": "packages/web-vue/components/textarea/TEMPLATE.md",
    "content": "## zh-CN\n```yaml\nmeta:\n  type: 组件\n  category: 数据输入\ntitle: 文本域 Textarea\ndescription: 多行纯文本编辑控件，适用于评论或反馈表单中的一段意见。\n```\n---\n## en-US\n```yaml\nmeta:\n  type: Component\n  category: Data Entry\ntitle: Textarea\ndescription: Multi-line plain text edit control, suitable for a paragraph of opinion in the comment or feedback form.\n```\n---\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/status.md\n\n@import ./__demo__/word-limit.md\n\n@import ./__demo__/auto-size.md\n\n## API\n\n%%API(textarea.vue)%%\n"
  },
  {
    "path": "packages/web-vue/components/textarea/__demo__/auto-size.md",
    "content": "```yaml\ntitle:\n  zh-CN: 自适应高度\n  en-US: Auto Size\n```\n\n## zh-CN\n\n通过设置 `auto-size`，可以让文本框自适应输入内容。\n\n---\n\n## en-US\n\nBy setting `auto-size`, you can make the text box self-use input content.\n\n---\n\n```vue\n<template>\n  <a-textarea default-value=\"This is the contents of the textarea. This is the contents of the textarea. This is the contents of the textarea.\" auto-size />\n  <a-textarea default-value=\"This is the contents of the textarea. This is the contents of the textarea. This is the contents of the textarea.\" :auto-size=\"{\n    minRows:2,\n    maxRows:5\n  }\" style=\"margin-top: 20px\"/>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/textarea/__demo__/basic.md",
    "content": "```yaml\ntitle:\n  zh-CN: 基本使用\n  en-US: Basic Usage\n```\n\n## zh-CN\n\n可以用于多行输入。\n\n---\n\n## en-US\n\nCan be used for multi-line input.\n\n---\n\n```vue\n<template>\n  <a-textarea placeholder=\"Please enter something\" allow-clear/>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/textarea/__demo__/status.md",
    "content": "```yaml\ntitle:\n  zh-CN: 文本域状态\n  en-US: Status\n```\n\n## zh-CN\n\n文本域可以设置禁用和错误状态。\n\n---\n\n## en-US\n\n文本域可以设置禁用和错误状态。\n\n---\n\n```vue\n<template>\n  <a-space direction=\"vertical\" size=\"large\" style=\"width: 100%\">\n    <a-textarea placeholder=\"Disabled status\" disabled/>\n    <a-textarea placeholder=\"Error status\" error/>\n  </a-space>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/textarea/__demo__/word-limit.md",
    "content": "```yaml\ntitle:\n  zh-CN: 字数统计\n  en-US: Word Limit\n```\n\n## zh-CN\n\n设置 `max-length` 可以限制最大字数，配合 `show-word-limit` 可以显示字数统计。\n\n---\n\n## en-US\n\nSet `max-length` to limit the maximum number of words, and use `show-word-limit` to display word count statistics.\n\n---\n\n```vue\n<template>\n  <a-space direction=\"vertical\" size=\"large\" fill>\n    <a-textarea placeholder=\"Please enter something\" :max-length=\"10\" allow-clear show-word-limit />\n    <a-textarea placeholder=\"Please enter something\" :max-length=\"{length:10,errorOnly:true}\" allow-clear\n                show-word-limit />\n  </a-space>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/textarea/__test__/__snapshots__/demo.test.ts.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`<textarea> demo: render [auto-size] correctly 1`] = `\n\"<div class=\\\\\"arco-textarea-wrapper\\\\\">\n  <div class=\\\\\"arco-textarea-mirror\\\\\">This is the contents of the textarea. This is the contents of the textarea. This is the contents of the textarea.\n  </div><textarea class=\\\\\"arco-textarea\\\\\" value=\\\\\"This is the contents of the textarea. This is the contents of the textarea. This is the contents of the textarea.\\\\\"></textarea>\n  <!--v-if-->\n  <!--v-if-->\n</div>\n<div style=\\\\\"margin-top: 20px;\\\\\" class=\\\\\"arco-textarea-wrapper\\\\\">\n  <div class=\\\\\"arco-textarea-mirror\\\\\">This is the contents of the textarea. This is the contents of the textarea. This is the contents of the textarea.\n  </div><textarea class=\\\\\"arco-textarea\\\\\" value=\\\\\"This is the contents of the textarea. This is the contents of the textarea. This is the contents of the textarea.\\\\\"></textarea>\n  <!--v-if-->\n  <!--v-if-->\n</div>\"\n`;\n\nexports[`<textarea> demo: render [basic] correctly 1`] = `\n\"<div class=\\\\\"arco-textarea-wrapper\\\\\">\n  <!--v-if--><textarea class=\\\\\"arco-textarea\\\\\" placeholder=\\\\\"Please enter something\\\\\" value=\\\\\"\\\\\"></textarea>\n  <!--v-if-->\n  <!--v-if-->\n</div>\"\n`;\n\nexports[`<textarea> demo: render [status] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-vertical\\\\\" style=\\\\\"column-gap: 24px; row-gap: 24px; width: 100%;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-textarea-wrapper arco-textarea-disabled\\\\\">\n      <!--v-if--><textarea disabled=\\\\\"\\\\\" class=\\\\\"arco-textarea\\\\\" placeholder=\\\\\"Disabled status\\\\\" value=\\\\\"\\\\\"></textarea>\n      <!--v-if-->\n      <!--v-if-->\n    </div>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-textarea-wrapper arco-textarea-error\\\\\">\n      <!--v-if--><textarea aria-invalid=\\\\\"true\\\\\" class=\\\\\"arco-textarea\\\\\" placeholder=\\\\\"Error status\\\\\" value=\\\\\"\\\\\"></textarea>\n      <!--v-if-->\n      <!--v-if-->\n    </div>\n  </div>\n</div>\"\n`;\n\nexports[`<textarea> demo: render [word-limit] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-vertical arco-space-fill\\\\\" style=\\\\\"column-gap: 24px; row-gap: 24px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-textarea-wrapper\\\\\">\n      <!--v-if--><textarea class=\\\\\"arco-textarea\\\\\" placeholder=\\\\\"Please enter something\\\\\" value=\\\\\"\\\\\"></textarea>\n      <div class=\\\\\"arco-textarea-word-limit\\\\\">0/10</div>\n      <!--v-if-->\n    </div>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-textarea-wrapper\\\\\">\n      <!--v-if--><textarea class=\\\\\"arco-textarea\\\\\" placeholder=\\\\\"Please enter something\\\\\" value=\\\\\"\\\\\"></textarea>\n      <div class=\\\\\"arco-textarea-word-limit\\\\\">0/10</div>\n      <!--v-if-->\n    </div>\n  </div>\n</div>\"\n`;\n"
  },
  {
    "path": "packages/web-vue/components/textarea/__test__/demo.test.ts",
    "content": "import demoTest from '../../../scripts/demo-test';\n\ndemoTest('textarea');\n"
  },
  {
    "path": "packages/web-vue/components/textarea/__test__/index.test.ts",
    "content": "import { mount } from '@vue/test-utils';\nimport Textarea from '../index';\n\ndescribe('Textarea', () => {\n  test('should remove href attribute', async () => {\n    const wrapper = mount(Textarea, {\n      props: {\n        maxLength: 10,\n        allowClear: true,\n        showWordLimit: true,\n      },\n    });\n    const textarea = wrapper.find('textarea');\n    await textarea.trigger('focus');\n    await textarea.setValue('textarea');\n    expect(wrapper.find('.arco-textarea-word-limit').text()).toBe('8/10');\n    await textarea.setValue('textareatextarea');\n    expect(wrapper.find('.arco-textarea-word-limit').text()).toBe('10/10');\n    expect(textarea.element.value).toBe('textareate');\n    await wrapper.find('.arco-textarea-clear-btn').trigger('click');\n    expect(textarea.element.value).toBe('');\n  });\n});\n"
  },
  {
    "path": "packages/web-vue/components/textarea/index.ts",
    "content": "import type { App } from 'vue';\nimport type { ArcoOptions } from '../_utils/types';\nimport { setGlobalConfig, getComponentPrefix } from '../_utils/global-config';\nimport _Textarea from './textarea.vue';\n\nconst Textarea = Object.assign(_Textarea, {\n  install: (app: App, options?: ArcoOptions) => {\n    setGlobalConfig(app, options);\n    const componentPrefix = getComponentPrefix(options);\n\n    app.component(componentPrefix + _Textarea.name, _Textarea);\n  },\n});\n\nexport type TextareaInstance = InstanceType<typeof _Textarea>;\n\nexport default Textarea;\n"
  },
  {
    "path": "packages/web-vue/components/textarea/style/index.less",
    "content": "@import '../../input/style/token.less';\n@import '../../input/style/input.less';\n\n@textarea-prefix-cls: ~'@{prefix}-textarea';\n\n.@{textarea-prefix-cls}-wrapper {\n  .input-wrapper-style(@textarea-prefix-cls);\n\n  position: relative;\n  display: inline-block;\n  width: 100%;\n  padding-right: 0;\n  padding-left: 0;\n  overflow: hidden;\n\n  .@{textarea-prefix-cls}-word-limit {\n    position: absolute;\n    right: @textarea-layout-tip-right;\n    bottom: @textarea-layout-tip-bottom;\n    color: @textarea-color-tip-text;\n    font-size: @textarea-font-tip-size;\n    user-select: none;\n  }\n\n  &.@{textarea-prefix-cls}-scroll .@{textarea-prefix-cls}-word-limit {\n    right: @textarea-layout-tip-right + 15px;\n  }\n\n  .@{textarea-prefix-cls}-clear-btn {\n    position: absolute;\n    top: 50%;\n    right: @textarea-layout-tip-right;\n    transform: translateY(-50%);\n  }\n\n  &.@{textarea-prefix-cls}-scroll .@{textarea-prefix-cls}-clear-btn {\n    right: @textarea-layout-tip-right + 15px;\n  }\n\n  &:hover {\n    .@{textarea-prefix-cls}-clear-btn {\n      display: block;\n    }\n  }\n\n  .@{textarea-prefix-cls}-mirror {\n    position: absolute;\n    visibility: hidden;\n  }\n}\n\n.@{textarea-prefix-cls} {\n  .input-style();\n\n  display: block;\n  box-sizing: border-box;\n  height: 100%;\n  min-height: @textarea-size-min-height;\n  padding: @textarea-padding-vertical @textarea-padding-horizontal;\n  font-size: @textarea-font-size;\n  line-height: @line-height-base;\n  vertical-align: top;\n  resize: vertical;\n}\n"
  },
  {
    "path": "packages/web-vue/components/textarea/style/index.ts",
    "content": "import '../../style/index.less';\nimport './index.less';\n"
  },
  {
    "path": "packages/web-vue/components/textarea/textarea.vue",
    "content": "<template>\n  <div\n    v-bind=\"getWrapperAttrs($attrs)\"\n    :class=\"wrapperCls\"\n    @mousedown=\"handleMousedown\"\n  >\n    <div\n      v-if=\"autoSize\"\n      ref=\"mirrorRef\"\n      :class=\"`${prefixCls}-mirror`\"\n      :style=\"mirrorStyle\"\n    >\n      {{ `${computedValue}\\n` }}\n    </div>\n    <resize-observer @resize=\"handleResize\">\n      <textarea\n        ref=\"textareaRef\"\n        v-bind=\"mergeTextareaAttrs\"\n        :disabled=\"mergedDisabled\"\n        :class=\"prefixCls\"\n        :style=\"textareaStyle\"\n        :value=\"computedValue\"\n        :placeholder=\"placeholder\"\n        @input=\"handleInput\"\n        @focus=\"handleFocus\"\n        @blur=\"handleBlur\"\n        @compositionstart=\"handleComposition\"\n        @compositionupdate=\"handleComposition\"\n        @compositionend=\"handleComposition\"\n      />\n    </resize-observer>\n    <slot name=\"suffix\" />\n    <div\n      v-if=\"computedMaxLength && showWordLimit\"\n      :class=\"`${prefixCls}-word-limit`\"\n    >\n      {{ valueLength }}/{{ computedMaxLength }}\n    </div>\n    <div\n      v-if=\"showClearBtn\"\n      :class=\"`${prefixCls}-clear-btn`\"\n      @click=\"handleClear\"\n    >\n      <icon-hover>\n        <icon-close />\n      </icon-hover>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport {\n  computed,\n  CSSProperties,\n  defineComponent,\n  nextTick,\n  onMounted,\n  PropType,\n  ref,\n  toRefs,\n  watch,\n} from 'vue';\nimport ResizeObserver from '../_components/resize-observer';\nimport IconHover from '../_components/icon-hover.vue';\nimport IconClose from '../icon/icon-close';\nimport { getPrefixCls } from '../_utils/global-config';\nimport { getSizeStyles } from './utils';\nimport { isFunction, isNull, isObject, isUndefined } from '../_utils/is';\nimport { omit } from '../_utils/omit';\nimport { INPUT_EVENTS } from '../_utils/constant';\nimport pick from '../_utils/pick';\nimport { useFormItem } from '../_hooks/use-form-item';\nimport { useCursor } from '../_hooks/use-cursor';\n\nexport default defineComponent({\n  name: 'Textarea',\n  components: { ResizeObserver, IconHover, IconClose },\n  inheritAttrs: false,\n  props: {\n    /**\n     * @zh 绑定值\n     * @en Value\n     * @vModel\n     */\n    modelValue: String,\n    /**\n     * @zh 默认值（非受控状态）\n     * @en Default value (uncontrolled state)\n     */\n    defaultValue: {\n      type: String,\n      default: '',\n    },\n    /**\n     * @zh 提示文字\n     * @en Placeholder\n     */\n    placeholder: String,\n    /**\n     * @zh 是否禁用\n     * @en Whether to disable\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 是否为错误状态\n     * @en Whether it is an error state\n     */\n    error: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 输入值的最大长度，errorOnly 属性在 2.12.0 版本添加\n     * @en Maximum length of input value, the errorOnly attribute was added in version 2.12.0\n     */\n    maxLength: {\n      type: [Number, Object] as PropType<\n        number | { length: number; errorOnly?: boolean }\n      >,\n      default: 0,\n    },\n    /**\n     * @zh 是否显示字数统计\n     * @en Whether to display word count\n     */\n    showWordLimit: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 是否允许清空文本域\n     * @en Whether to allow clearing the text\n     */\n    allowClear: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 是否让文本框自适应内容高度\n     * @en Whether to make the textarea adapt to the height of the content\n     */\n    autoSize: {\n      type: [Boolean, Object] as PropType<\n        boolean | { minRows?: number; maxRows?: number }\n      >,\n      default: false,\n    },\n    /**\n     * @zh 字符长度的计算方法\n     * @en Calculation method of word length\n     */\n    wordLength: {\n      type: Function as PropType<(value: string) => number>,\n    },\n    /**\n     * @zh 字符截取方法，同 wordLength 一起使用\n     * @en Character interception method, used together with wordLength\n     * @version 2.12.0\n     */\n    wordSlice: {\n      type: Function as PropType<(value: string, maxLength: number) => string>,\n    },\n    /**\n     * @zh 透传给 textarea 的属性\n     * @en Attributes passed to textarea\n     */\n    textareaAttrs: {\n      type: Object as PropType<Record<string, any>>,\n    },\n  },\n  emits: {\n    'update:modelValue': (value: string) => true,\n    /**\n     * @zh 用户输入时触发\n     * @en Emitted when the user enters\n     * @param {string} value\n     * @param {Event} ev\n     */\n    'input': (value: string, ev: Event) => true,\n    /**\n     * @zh 仅在文本框失焦时触发\n     * @en Only emitted when the textarea is out of focus\n     * @param {string} value\n     * @param {Event} ev\n     */\n    'change': (value: string, ev: Event) => true,\n    /**\n     * @zh 点击清除按钮时触发\n     * @en Emitted when the clear button is clicked\n     * @param {MouseEvent} ev\n     */\n    'clear': (ev: MouseEvent) => true,\n    /**\n     * @zh 文本框获取焦点时触发\n     * @en Emitted when the textarea gets focus\n     * @param {FocusEvent} ev\n     */\n    'focus': (ev: FocusEvent) => true,\n    /**\n     * @zh 文本框失去焦点时触发\n     * @en Emitted when the textarea loses focus\n     * @param {FocusEvent} ev\n     */\n    'blur': (ev: FocusEvent) => true,\n  },\n  setup(props, { emit, attrs }) {\n    const { disabled, error, modelValue } = toRefs(props);\n    const prefixCls = getPrefixCls('textarea');\n    const {\n      mergedDisabled,\n      mergedError: _mergedError,\n      eventHandlers,\n    } = useFormItem({ disabled, error });\n\n    const textareaRef = ref<HTMLInputElement>();\n    const textareaStyle = ref<CSSProperties>();\n    const mirrorRef = ref<HTMLInputElement>();\n    const mirrorStyle = ref<CSSProperties>();\n\n    const _value = ref(props.defaultValue);\n    const computedValue = computed(() => modelValue.value ?? _value.value);\n    const [recordCursor, setCursor] = useCursor(textareaRef);\n\n    watch(modelValue, (value) => {\n      if (isUndefined(value) || isNull(value)) {\n        _value.value = '';\n      }\n    });\n\n    const maxLengthErrorOnly = computed(\n      () => isObject(props.maxLength) && Boolean(props.maxLength.errorOnly)\n    );\n\n    const computedMaxLength = computed(() => {\n      if (isObject(props.maxLength)) {\n        return props.maxLength.length;\n      }\n      return props.maxLength;\n    });\n\n    const getValueLength = (value: string) => {\n      if (isFunction(props.wordLength)) {\n        return props.wordLength(value);\n      }\n      return value.length ?? 0;\n    };\n\n    const valueLength = computed(() => getValueLength(computedValue.value));\n\n    const mergedError = computed(\n      () =>\n        _mergedError.value ||\n        Boolean(\n          computedMaxLength.value &&\n            maxLengthErrorOnly.value &&\n            valueLength.value > computedMaxLength.value\n        )\n    );\n\n    const isScroll = ref(false);\n\n    // 状态相关\n    const focused = ref(false);\n    const showClearBtn = computed(\n      () => props.allowClear && !mergedDisabled.value && computedValue.value\n    );\n\n    // 输入法相关\n    const isComposition = ref(false);\n    const compositionValue = ref('');\n\n    const keepControl = () => {\n      recordCursor();\n      nextTick(() => {\n        if (\n          textareaRef.value &&\n          computedValue.value !== textareaRef.value.value\n        ) {\n          textareaRef.value.value = computedValue.value;\n          setCursor();\n        }\n      });\n    };\n\n    const updateValue = (value: string, inner = true) => {\n      if (\n        computedMaxLength.value &&\n        !maxLengthErrorOnly.value &&\n        getValueLength(value) > computedMaxLength.value\n      ) {\n        value =\n          props.wordSlice?.(value, computedMaxLength.value) ??\n          value.slice(0, computedMaxLength.value);\n      }\n\n      _value.value = value;\n      if (inner) {\n        emit('update:modelValue', value);\n      }\n\n      keepControl();\n    };\n\n    let preValue = computedValue.value;\n    const emitChange = (value: string, ev: Event) => {\n      if (value !== preValue) {\n        preValue = value;\n        emit('change', value, ev);\n        eventHandlers.value?.onChange?.(ev);\n      }\n    };\n\n    const handleFocus = (ev: FocusEvent) => {\n      focused.value = true;\n      preValue = computedValue.value;\n      emit('focus', ev);\n      eventHandlers.value?.onFocus?.(ev);\n    };\n\n    const handleBlur = (ev: FocusEvent) => {\n      focused.value = false;\n      emit('blur', ev);\n      eventHandlers.value?.onBlur?.(ev);\n      emitChange(computedValue.value, ev);\n    };\n\n    const handleComposition = (e: CompositionEvent) => {\n      const { value } = e.target as HTMLInputElement;\n\n      if (e.type === 'compositionend') {\n        isComposition.value = false;\n        compositionValue.value = '';\n\n        if (\n          computedMaxLength.value &&\n          !maxLengthErrorOnly.value &&\n          computedValue.value.length >= computedMaxLength.value &&\n          getValueLength(value) > computedMaxLength.value\n        ) {\n          keepControl();\n          return;\n        }\n\n        emit('input', value, e);\n        updateValue(value);\n        eventHandlers.value?.onInput?.(e);\n      } else {\n        isComposition.value = true;\n      }\n    };\n\n    const handleInput = (e: InputEvent) => {\n      const { value } = e.target as HTMLInputElement;\n\n      if (!isComposition.value) {\n        if (\n          computedMaxLength.value &&\n          !maxLengthErrorOnly.value &&\n          computedValue.value.length >= computedMaxLength.value &&\n          getValueLength(value) > computedMaxLength.value &&\n          e.inputType === 'insertText'\n        ) {\n          keepControl();\n          return;\n        }\n\n        emit('input', value, e);\n        updateValue(value);\n        eventHandlers.value?.onInput?.(e);\n      } else {\n        compositionValue.value = value;\n      }\n    };\n\n    const handleClear = (ev: MouseEvent) => {\n      updateValue('');\n      emitChange('', ev);\n      emit('clear', ev);\n    };\n\n    // modelValue发生改变时，更新内部值\n    watch(modelValue, (value: string | undefined) => {\n      if (value !== computedValue.value) {\n        updateValue(value ?? '', false);\n      }\n    });\n\n    const getWrapperAttrs = (attr: Record<string, any>) =>\n      omit(attrs, INPUT_EVENTS);\n    const getTextareaAttrs = (attr: Record<string, any>) =>\n      pick(attrs, INPUT_EVENTS);\n    const textareaAttrs = getTextareaAttrs(attrs);\n    const mergeTextareaAttrs = computed(() => {\n      const attrs = {\n        ...textareaAttrs,\n        ...props.textareaAttrs,\n      };\n      if (mergedError.value) {\n        attrs['aria-invalid'] = true;\n      }\n      return attrs;\n    });\n\n    const wrapperCls = computed(() => [\n      `${prefixCls}-wrapper`,\n      {\n        [`${prefixCls}-focus`]: focused.value,\n        [`${prefixCls}-disabled`]: mergedDisabled.value,\n        [`${prefixCls}-error`]: mergedError.value,\n        [`${prefixCls}-scroll`]: isScroll.value,\n      },\n    ]);\n\n    let styleDeclaration: CSSStyleDeclaration;\n\n    const lineHeight = ref<number>(0);\n    const outerHeight = ref<number>(0);\n    const minHeight = computed(() => {\n      if (!isObject(props.autoSize) || !props.autoSize.minRows) {\n        return 0;\n      }\n      return props.autoSize.minRows * lineHeight.value + outerHeight.value;\n    });\n    const maxHeight = computed(() => {\n      if (!isObject(props.autoSize) || !props.autoSize.maxRows) {\n        return 0;\n      }\n      return props.autoSize.maxRows * lineHeight.value + outerHeight.value;\n    });\n\n    const getMirrorStyle = () => {\n      const styles = getSizeStyles(styleDeclaration);\n\n      lineHeight.value = Number.parseInt(styles['line-height'] || 0, 10);\n      outerHeight.value =\n        Number.parseInt(styles['border-width'] || 0, 10) * 2 +\n        Number.parseInt(styles['padding-top'] || 0, 10) +\n        Number.parseInt(styles['padding-bottom'] || 0, 10);\n\n      mirrorStyle.value = styles;\n\n      nextTick(() => {\n        const mirrorHeight = mirrorRef.value?.offsetHeight;\n\n        let height = mirrorHeight ?? 0;\n        let overflow = 'hidden';\n\n        if (minHeight.value && height < minHeight.value) {\n          height = minHeight.value;\n        }\n        if (maxHeight.value && height > maxHeight.value) {\n          height = maxHeight.value;\n          overflow = 'auto';\n        }\n\n        textareaStyle.value = {\n          height: `${height}px`,\n          resize: 'none',\n          overflow,\n        };\n      });\n    };\n\n    onMounted(() => {\n      if (textareaRef.value) {\n        styleDeclaration = window.getComputedStyle(textareaRef.value);\n        if (props.autoSize) {\n          getMirrorStyle();\n        }\n      }\n      computeIsScroll();\n    });\n\n    const handleResize = () => {\n      if (props.autoSize && mirrorRef.value) {\n        getMirrorStyle();\n      }\n      computeIsScroll();\n    };\n\n    const handleMousedown = (e: MouseEvent) => {\n      if (textareaRef.value && e.target !== textareaRef.value) {\n        e.preventDefault();\n        textareaRef.value.focus();\n      }\n    };\n\n    const computeIsScroll = () => {\n      if (textareaRef.value) {\n        if (textareaRef.value.scrollHeight > textareaRef.value.offsetHeight) {\n          if (!isScroll.value) isScroll.value = true;\n        } else if (isScroll.value) {\n          isScroll.value = false;\n        }\n      }\n    };\n\n    watch(computedValue, () => {\n      if (props.autoSize && mirrorRef.value) {\n        getMirrorStyle();\n      }\n      computeIsScroll();\n    });\n\n    return {\n      prefixCls,\n      wrapperCls,\n      textareaRef,\n      textareaStyle,\n      mirrorRef,\n      mirrorStyle,\n      computedValue,\n      showClearBtn,\n      valueLength,\n      computedMaxLength,\n      mergedDisabled,\n      mergeTextareaAttrs,\n      getWrapperAttrs,\n      getTextareaAttrs,\n      handleInput,\n      handleFocus,\n      handleBlur,\n      handleComposition,\n      handleClear,\n      handleResize,\n      handleMousedown,\n    };\n  },\n  methods: {\n    /**\n     * @zh 使输入框获取焦点\n     * @en Make the input box focus\n     * @public\n     * @version 2.24.0\n     */\n    focus() {\n      (this.$refs.textareaRef as HTMLInputElement)?.focus();\n    },\n    /**\n     * @zh 使输入框失去焦点\n     * @en Make the input box lose focus\n     * @public\n     * @version 2.24.0\n     */\n    blur() {\n      (this.$refs.textareaRef as HTMLInputElement)?.blur();\n    },\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/textarea/utils.ts",
    "content": "const sizeStyles = [\n  'border-width',\n  'box-sizing',\n  'font-family',\n  'font-weight',\n  'font-size',\n  'font-variant',\n  'letter-spacing',\n  'line-height',\n  'padding-top',\n  'padding-bottom',\n  'padding-left',\n  'padding-right',\n  'text-indent',\n  'text-rendering',\n  'text-transform',\n  'white-space',\n  'overflow-wrap',\n  'width',\n];\n\nexport const getSizeStyles = (styleDeclaration: CSSStyleDeclaration) => {\n  const styles: Record<string, any> = {};\n  sizeStyles.forEach((item) => {\n    styles[item] = styleDeclaration.getPropertyValue(item);\n  });\n  return styles;\n};\n"
  },
  {
    "path": "packages/web-vue/components/time-picker/CHANGELOG.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.56.0\n\n`2024-07-26`\n\n### 🐛 BugFix\n\n- TriggerProps property not correctly passed through ([#3178](https://github.com/arco-design/arco-design-vue/pull/3178))\n\n\n## 2.55.3\n\n`2024-06-07`\n\n### 🐛 BugFix\n\n- Fix issue with read-only mode still being editable ([#3173](https://github.com/arco-design/arco-design-vue/pull/3173))\n- Added `placeholder` type definition ([#3173](https://github.com/arco-design/arco-design-vue/pull/3173))\n\n\n## 2.44.6\n\n`2023-03-31`\n\n### 🐛 BugFix\n\n- Fix the bubbling behavior of the clear event. ([#2271](https://github.com/arco-design/arco-design-vue/pull/2271))\n\n\n## 2.41.0\n\n`2022-12-30`\n\n### 🆕 Feature\n\n- `time-picker` supports prefix slots ([#1997](https://github.com/arco-design/arco-design-vue/pull/1997))\n\n\n## 2.35.1\n\n`2022-08-19`\n\n### 🐛 BugFix\n\n- Fix default value of size property in time-picker ([#1513](https://github.com/arco-design/arco-design-vue/pull/1513))\n\n"
  },
  {
    "path": "packages/web-vue/components/time-picker/CHANGELOG.zh-CN.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.56.0\n\n`2024-07-26`\n\n### 🐛 问题修复\n\n- triggerProps 属性未正确透传问题 ([#3178](https://github.com/arco-design/arco-design-vue/pull/3178))\n\n\n## 2.55.3\n\n`2024-06-07`\n\n### 🐛 问题修复\n\n- 修复只读模式仍可编辑问题 ([#3173](https://github.com/arco-design/arco-design-vue/pull/3173))\n- 补充 `placeholder` 类型定义 ([#3173](https://github.com/arco-design/arco-design-vue/pull/3173))\n\n\n## 2.44.6\n\n`2023-03-31`\n\n### 🐛 问题修复\n\n- 修复清除事件冒泡行为 ([#2271](https://github.com/arco-design/arco-design-vue/pull/2271))\n\n\n## 2.41.0\n\n`2022-12-30`\n\n### 🆕 新增功能\n\n- `time-picker` 支持 `prefix` 插槽。 ([#1997](https://github.com/arco-design/arco-design-vue/pull/1997))\n\n\n## 2.35.1\n\n`2022-08-19`\n\n### 🐛 问题修复\n\n- 修复 time-picker 中 size 属性的默认值问题 ([#1513](https://github.com/arco-design/arco-design-vue/pull/1513))\n\n"
  },
  {
    "path": "packages/web-vue/components/time-picker/README.en-US.md",
    "content": "```yaml\nmeta:\n  type: Component\n  category: Data Entry\ntitle: TimePicker\ndescription: Select the time on the pop-up panel to conveniently complete the time input control.\n```\n\n*Auto translate by google.*\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/rangepicker.md\n\n@import ./__demo__/control.md\n\n@import ./__demo__/default-value.md\n\n@import ./__demo__/size.md\n\n@import ./__demo__/disabled.md\n\n@import ./__demo__/disabled-time.md\n\n@import ./__demo__/disable-confirm.md\n\n@import ./__demo__/format.md\n\n@import ./__demo__/step.md\n\n@import ./__demo__/extra.md\n\n@import ./__demo__/use-12-hours.md\n\n## API\n\n\n### `<time-picker>` Props\n\n|Attribute|Description|Type|Default|\n|---|---|---|:---:|\n|type|Selector type|`'time' \\| 'time-range'`|`'time'`|\n|model-value **(v-model)**|Value|`string \\| number \\| Date \\| Array<string \\| number \\| Date>`|`-`|\n|default-value|Default value|`string \\| number \\| Date \\| Array<string \\| number \\| Date>`|`-`|\n|disabled|Whether to disable|`boolean`|`false`|\n|allow-clear|Whether to allow clear|`boolean`|`true`|\n|readonly|Whether it is read-only mode|`boolean`|`false`|\n|error|Whether it is an error state|`boolean`|`false`|\n|format|Display the format of the date, refer to [String Parsing Format](#String Parsing Format)|`string`|`'HH:mm:ss'`|\n|placeholder|Prompt copy|`string \\| string[]`|`-`|\n|size|Input box size|`'mini' \\| 'small' \\| 'medium' \\| 'large'`|`'medium'`|\n|popup-container|Mount container for pop-up box|`string \\| HTMLElement`|`-`|\n|use12-hours|12 hour clock|`boolean`|`false`|\n|step|Set the hour/minute/second selection interval|`{  hour?: number;  minute?: number;  second?: number;}`|`-`|\n|disabled-hours|Disabled partial hour options|`() => number[]`|`-`|\n|disabled-minutes|Disabled some minutes options|`(selectedHour?: number) => number[]`|`-`|\n|disabled-seconds|Disabled partial seconds option|`(selectedHour?: number, selectedMinute?: number) => number[]`|`-`|\n|hide-disabled-options|Hide prohibited options|`boolean`|`false`|\n|disable-confirm|Disable the confirmation step, click the time directly after opening, without clicking the confirmation button|`boolean`|`false`|\n|position|Pop-up position|`'top' \\| 'tl' \\| 'tr' \\| 'bottom' \\| 'bl' \\| 'br'`|`'bl'`|\n|popup-visible **(v-model)**|Control the pop-up box to open or close|`boolean`|`-`|\n|default-popup-visible|The pop-up box is opened or closed by default|`boolean`|`false`|\n|trigger-props|You can pass in the parameters of the `Trigger` component|`TriggerProps`|`-`|\n|unmount-on-close|Whether to destroy the dom structure after closing|`boolean`|`false`|\n### `<time-picker>` Events\n\n|Event Name|Description|Parameters|\n|---|---|---|\n|change|The component value changes|timeString: `string \\| Array<string \\| undefined> \\| undefined`<br>time: `date \\| Array<date \\| undefined> \\| undefined`|\n|select|Select time but do not trigger component value change|timeString: `string \\| Array<string \\| undefined>`<br>time: `Date \\| Array<Date \\| undefined>`|\n|clear|Click the clear button|-|\n|popup-visible-change|Pop-up box expand and collapse|visible: `boolean`|\n### `<time-picker>` Slots\n\n|Slot Name|Description|Parameters|version|\n|---|---|---|:---|\n|prefix|Input box prefix|-|2.41.0|\n|suffix-icon|Input box suffix icon|-||\n|extra|Extra footer|-||\n\n\n\n### String parsing format\n\nFormat|Output|Description\n---|---|---:\n`YY`|21|Two-digit year\n`YYYY`|2021|Four-digit year\n`M`|1-12|Month, starting from 1\n`MM`|01-12|Month, two digits\n`MMM`|Jan-Dec|Abbreviated month name\n`MMMM`|January-December|Full month name\n`D`|1-31|Day of the month\n`DD`|01-31|Day of the month, two digits\n`d`|0-6|Day of the week, Sunday is 0\n`dd`|Su-Sa|The shortest name of the day of the week\n`ddd`|Sun-Sat|Abbreviated name of the day of the week\n`dddd`|Sunday-Saturday|The name of the day of the week\n`H`|0-23|Hour\n`HH`|00-23|Hour, two digits\n`h`|1-12|Hour, 12-hour clock\n`hh`|01-12|Hour, 12-hour clock, two digits\n`m`|0-59|Minute\n`mm`|00-59|Minute, two digits\n`s`|0-59|Second\n`ss`|00-59|Second, two digits\n`S`|0-9|Hundreds of milliseconds, one digits\n`SS`|00-99|Tens of milliseconds, two digits\n`SSS`|000-999|Millisecond, three digits\n`Z`|-5:00|UTC offset\n`ZZ`|-0500|UTC offset, add 0 in front of the number\n`A`|AM PM|-\n`a`|am pm|-\n`Do`|1st... 3st|Day of month with serial number\n`X`|1410715640.579|Unix timestamp\n`x`|1410715640579|Unix millisecond timestamp\n"
  },
  {
    "path": "packages/web-vue/components/time-picker/README.zh-CN.md",
    "content": "```yaml\nmeta:\n  type: 组件\n  category: 数据输入\ntitle: 时间选择器 TimePicker\ndescription: 在弹出面板上选择时间，以便捷完成时间输入的控件。\n```\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/rangepicker.md\n\n@import ./__demo__/control.md\n\n@import ./__demo__/default-value.md\n\n@import ./__demo__/size.md\n\n@import ./__demo__/disabled.md\n\n@import ./__demo__/disabled-time.md\n\n@import ./__demo__/disable-confirm.md\n\n@import ./__demo__/format.md\n\n@import ./__demo__/step.md\n\n@import ./__demo__/extra.md\n\n@import ./__demo__/use-12-hours.md\n\n## API\n\n\n### `<time-picker>` Props\n\n|参数名|描述|类型|默认值|\n|---|---|---|:---:|\n|type|选择器类型|`'time' \\| 'time-range'`|`'time'`|\n|model-value **(v-model)**|绑定值|`string \\| number \\| Date \\| Array<string \\| number \\| Date>`|`-`|\n|default-value|默认值|`string \\| number \\| Date \\| Array<string \\| number \\| Date>`|`-`|\n|disabled|是否禁用|`boolean`|`false`|\n|allow-clear|是否允许清除|`boolean`|`true`|\n|readonly|是否为只读模式|`boolean`|`false`|\n|error|是否为错误状态|`boolean`|`false`|\n|format|展示日期的格式，参考[字符串解析格式](#字符串解析格式)|`string`|`'HH:mm:ss'`|\n|placeholder|提示文案|`string \\| string[]`|`-`|\n|size|输入框尺寸|`'mini' \\| 'small' \\| 'medium' \\| 'large'`|`'medium'`|\n|popup-container|弹出框的挂载容器|`string \\| HTMLElement`|`-`|\n|use12-hours|12 小时制|`boolean`|`false`|\n|step|设置 时 / 分 / 秒 的选择间隔|`{  hour?: number;  minute?: number;  second?: number;}`|`-`|\n|disabled-hours|禁用的部分小时选项|`() => number[]`|`-`|\n|disabled-minutes|禁用的部分分钟选项|`(selectedHour?: number) => number[]`|`-`|\n|disabled-seconds|禁用的部分秒数选项|`(selectedHour?: number, selectedMinute?: number) => number[]`|`-`|\n|hide-disabled-options|隐藏禁止选择的选项|`boolean`|`false`|\n|disable-confirm|禁用确认步骤，开启后直接点选时间不需要点击确认按钮|`boolean`|`false`|\n|position|弹出的位置|`'top' \\| 'tl' \\| 'tr' \\| 'bottom' \\| 'bl' \\| 'br'`|`'bl'`|\n|popup-visible **(v-model)**|控制弹出框打开或者关闭|`boolean`|`-`|\n|default-popup-visible|弹出框默认打开或者关闭|`boolean`|`false`|\n|trigger-props|可以传入 `Trigger` 组件的参数|`TriggerProps`|`-`|\n|unmount-on-close|是否在关闭后销毁 dom 结构|`boolean`|`false`|\n### `<time-picker>` Events\n\n|事件名|描述|参数|\n|---|---|---|\n|change|组件值发生改变|timeString: `string \\| Array<string \\| undefined> \\| undefined`<br>time: `date \\| Array<date \\| undefined> \\| undefined`|\n|select|选择时间但未触发组件值变化|timeString: `string \\| Array<string \\| undefined>`<br>time: `Date \\| Array<Date \\| undefined>`|\n|clear|点击清除按钮|-|\n|popup-visible-change|弹出框展开和收起|visible: `boolean`|\n### `<time-picker>` Slots\n\n|插槽名|描述|参数|版本|\n|---|:---:|---|:---|\n|prefix|输入框前缀|-|2.41.0|\n|suffix-icon|输入框后缀图标|-||\n|extra|额外的页脚|-||\n\n\n\n### 字符串解析格式\n\n格式|输出|描述\n---|---|---:\n`YY`|21|两位数的年份\n`YYYY`|2021|四位数年份\n`M`|1-12|月份，从 1 开始\n`MM`|01-12|月份，两位数\n`MMM`|Jan-Dec|缩写的月份名称\n`MMMM`|January-December|完整的月份名称\n`D`|1-31|月份里的一天\n`DD`|01-31|月份里的一天，两位数\n`d`|0-6|一周中的一天，星期天是 0\n`dd`|Su-Sa|最简写的一周中一天的名称\n`ddd`|Sun-Sat|简写的一周中一天的名称\n`dddd`|Sunday-Saturday|一周中一天的名称\n`H`|0-23|小时\n`HH`|00-23|小时，两位数\n`h`|1-12|小时, 12 小时制\n`hh`|01-12|小时, 12 小时制, 两位数\n`m`|0-59|分钟\n`mm`|00-59|分钟，两位数\n`s`|0-59|秒\n`ss`|00-59|秒，两位数\n`S`|0-9|数百毫秒，一位数\n`SS`|00-99|几十毫秒，两位数\n`SSS`|000-999|毫秒，三位数字\n`Z`|-5:00|UTC 的偏移量\n`ZZ`|-0500|UTC 的偏移量，数字前面加上 0\n`A`|AM PM|-\n`a`|am pm|-\n`Do`|1st... 3st|带序号的月份中的某天\n`X`|1410715640.579|Unix 时间戳\n`x`|1410715640579|Unix 毫秒时间戳\n"
  },
  {
    "path": "packages/web-vue/components/time-picker/TEMPLATE.md",
    "content": "## zh-CN\n```yaml\nmeta:\n  type: 组件\n  category: 数据输入\ntitle: 时间选择器 TimePicker\ndescription: 在弹出面板上选择时间，以便捷完成时间输入的控件。\n```\n---\n## en-US\n```yaml\nmeta:\n  type: Component\n  category: Data Entry\ntitle: TimePicker\ndescription: Select the time on the pop-up panel to conveniently complete the time input control.\n```\n---\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/rangepicker.md\n\n@import ./__demo__/control.md\n\n@import ./__demo__/default-value.md\n\n@import ./__demo__/size.md\n\n@import ./__demo__/disabled.md\n\n@import ./__demo__/disabled-time.md\n\n@import ./__demo__/disable-confirm.md\n\n@import ./__demo__/format.md\n\n@import ./__demo__/step.md\n\n@import ./__demo__/extra.md\n\n@import ./__demo__/use-12-hours.md\n\n## API\n\n%%API(time-picker.vue)%%\n\n## zh-CN\n### 字符串解析格式\n\n格式|输出|描述\n---|---|---:\n`YY`|21|两位数的年份\n`YYYY`|2021|四位数年份\n`M`|1-12|月份，从 1 开始\n`MM`|01-12|月份，两位数\n`MMM`|Jan-Dec|缩写的月份名称\n`MMMM`|January-December|完整的月份名称\n`D`|1-31|月份里的一天\n`DD`|01-31|月份里的一天，两位数\n`d`|0-6|一周中的一天，星期天是 0\n`dd`|Su-Sa|最简写的一周中一天的名称\n`ddd`|Sun-Sat|简写的一周中一天的名称\n`dddd`|Sunday-Saturday|一周中一天的名称\n`H`|0-23|小时\n`HH`|00-23|小时，两位数\n`h`|1-12|小时, 12 小时制\n`hh`|01-12|小时, 12 小时制, 两位数\n`m`|0-59|分钟\n`mm`|00-59|分钟，两位数\n`s`|0-59|秒\n`ss`|00-59|秒，两位数\n`S`|0-9|数百毫秒，一位数\n`SS`|00-99|几十毫秒，两位数\n`SSS`|000-999|毫秒，三位数字\n`Z`|-5:00|UTC 的偏移量\n`ZZ`|-0500|UTC 的偏移量，数字前面加上 0\n`A`|AM PM|-\n`a`|am pm|-\n`Do`|1st... 3st|带序号的月份中的某天\n`X`|1410715640.579|Unix 时间戳\n`x`|1410715640579|Unix 毫秒时间戳\n---\n## en-US\n### String parsing format\n\nFormat|Output|Description\n---|---|---:\n`YY`|21|Two-digit year\n`YYYY`|2021|Four-digit year\n`M`|1-12|Month, starting from 1\n`MM`|01-12|Month, two digits\n`MMM`|Jan-Dec|Abbreviated month name\n`MMMM`|January-December|Full month name\n`D`|1-31|Day of the month\n`DD`|01-31|Day of the month, two digits\n`d`|0-6|Day of the week, Sunday is 0\n`dd`|Su-Sa|The shortest name of the day of the week\n`ddd`|Sun-Sat|Abbreviated name of the day of the week\n`dddd`|Sunday-Saturday|The name of the day of the week\n`H`|0-23|Hour\n`HH`|00-23|Hour, two digits\n`h`|1-12|Hour, 12-hour clock\n`hh`|01-12|Hour, 12-hour clock, two digits\n`m`|0-59|Minute\n`mm`|00-59|Minute, two digits\n`s`|0-59|Second\n`ss`|00-59|Second, two digits\n`S`|0-9|Hundreds of milliseconds, one digits\n`SS`|00-99|Tens of milliseconds, two digits\n`SSS`|000-999|Millisecond, three digits\n`Z`|-5:00|UTC offset\n`ZZ`|-0500|UTC offset, add 0 in front of the number\n`A`|AM PM|-\n`a`|am pm|-\n`Do`|1st... 3st|Day of month with serial number\n`X`|1410715640.579|Unix timestamp\n`x`|1410715640579|Unix millisecond timestamp\n---\n"
  },
  {
    "path": "packages/web-vue/components/time-picker/__demo__/basic.md",
    "content": "```yaml\ntitle:\n  zh-CN: 基本用法\n  en-US: Basic\n```\n\n## zh-CN\n\n时间输入器的基础用法。\n\n---\n\n## en-US\n\nThe basic usage of TimePicker.\n\n---\n\n```vue\n<template>\n  <a-time-picker style=\"width: 194px;\" />\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/time-picker/__demo__/control.md",
    "content": "```yaml\ntitle:\n  zh-CN: 双向绑定\n  en-US: Two-way binding\n```\n\n## zh-CN\n\n支持 `v-model` 进行数据的双向绑定。\n\n---\n\n## en-US\n\nSupport `v-model` for two-way data binding.\n\n---\n\n```vue\n<template>\n  <a-time-picker\n    style=\"width: 194px\"\n    v-model=\"value\"\n  />\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        value: null\n      }\n    }\n  }\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/time-picker/__demo__/default-value.md",
    "content": "```yaml\ntitle:\n  zh-CN: 默认值\n  en-US: defaultValue\n```\n\n## zh-CN\n\n只有默认值的情况，可通过 `defaultValue` 传递。\n\n---\n\n## en-US\n\nThe default value can be passed through `defaultValue`\n\n---\n\n```vue\n<template>\n  <a-time-picker\n    defaultValue=\"18:24:23\"\n    style=\"width: 194px; marginRight: 24px; marginBottom: 24px\"\n  />\n  <a-time-picker\n    type=\"time-range\"\n    :defaultValue=\"['09:24:53', '18:44:33']\"\n    style=\"width: 252px; marginBottom: 24px\"\n  />\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/time-picker/__demo__/disable-confirm.md",
    "content": "```yaml\ntitle:\n  zh-CN: 跳过确认\n  en-US: Skip confirmation\n```\n\n## zh-CN\n\n跳过确认步骤，直接点击选择时间。\n\n---\n\n## en-US\n\nSkip the confirm step and click directly to select time.\n\n---\n\n```vue\n<template>\n  <a-time-picker\n    disableConfirm\n    style=\"width: 194px; margin: 0 24px 24px 0;\"\n  />\n  <a-time-picker\n    type=\"time-range\"\n    disableConfirm\n    style=\"width: 252px; margin: 0 24px 24px 0;\"\n  />\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/time-picker/__demo__/disabled-time.md",
    "content": "```yaml\ntitle:\n  zh-CN: 禁用部分时间选项\n  en-US: Disable partial time option\n```\n\n## zh-CN\n\n通过设置 `disabledHours` `disabledMinutes` `disabledSeconds`，可以禁用 时 / 分 / 秒的部分选项。\n\n---\n\n## en-US\n\nBy setting `disabledHours` `disabledMinutes` `disabledSeconds`, you can disable some options of hour/minute/second.\n\n---\n\n```vue\n<template>\n  <a-time-picker\n    style=\"width: 194px; margin: 0 24px 24px 0;\"\n    :disabledHours=\"() => [1, 2, 4, 14]\"\n    :disabledMinutes=\"() => [1, 2, 3, 4, 14, 15, 16, 20, 50]\"\n    :disabledSeconds=\"() => [1, 2, 3, 4, 5, 6, 7, 10, 14, 60]\"\n  />\n  <a-time-picker\n    type=\"time-range\"\n    style=\"width: 252px; margin: 0 24px 24px 0;\"\n    :disabledHours=\"() => [1, 2, 4, 14]\"\n    :disabledMinutes=\"() => [1, 2, 3, 4, 14, 15, 16, 20, 50]\"\n    :disabledSeconds=\"() => [1, 2, 3, 4, 5, 6, 7, 10, 14, 60]\"\n  />\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/time-picker/__demo__/disabled.md",
    "content": "```yaml\ntitle:\n  zh-CN: 禁用\n  en-US: Disabled\n```\n\n## zh-CN\n\n禁用状态。\n\n---\n\n## en-US\n\nDisabled.\n\n---\n\n```vue\n<template>\n  <a-time-picker disabled style=\"margin: 0 24px 24px 0;\" />\n  <a-time-picker type=\"time-range\" disabled style=\"width: 252px; margin: 0 24px 24px 0;\" />\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/time-picker/__demo__/extra.md",
    "content": "```yaml\ntitle:\n  zh-CN: 附加内容\n  en-US: Extra content\n```\n\n## zh-CN\n\n选择框底部显示自定义的内容。\n\n---\n\n## en-US\n\nShow extra content.\n\n---\n\n```vue\n<template>\n  <a-time-picker style=\"width: 194px;\">\n    <template #extra>\n      Extra Footer\n    </template>\n  </a-time-picker>\n</template>\n```\n\n"
  },
  {
    "path": "packages/web-vue/components/time-picker/__demo__/format.md",
    "content": "```yaml\ntitle:\n  zh-CN: 定制格式\n  en-US: Custom format\n```\n\n## zh-CN\n\n通过设置 `format`，可以定制需要显示的时、分、秒。\n\n---\n\n## en-US\n\nBy setting `format`, you can customize the hour, minute, and second.\n\n---\n\n```vue\n<template>\n  <a-time-picker format=\"HH:mm\" :defaultValue=\"defaultValue\" style=\"width: 130px;\" />\n</template>\n<script>\nexport default {\n  data() {\n    return {\n      defaultValue: '09:24'\n    }\n  }\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/time-picker/__demo__/prefix.md",
    "content": "```yaml\ntitle:\n  zh-CN: 前缀\n  en-US: Prefix\n```\n\n## zh-CN\n\n通过 `prefix` 插槽可以设置输入框前缀\n\n---\n\n## en-US\n\nThe prefix of the input box can be set through the `prefix` slot\n\n---\n\n```vue\n<template>\n  <div>\n    <div>\n      <a-time-picker style=\"width: 194px;\">\n        <template #prefix>\n          <IconInfoCircle />\n        </template> </a-time-picker\n    ></div>\n    <div>\n      <a-time-picker type=\"time-range\" style=\"width: 252px; margin-top: 20px\">\n        <template #prefix>\n          <IconInfoCircle />\n        </template>\n      </a-time-picker>\n    </div>\n  </div>\n</template>\n\n<script>\nimport { IconInfoCircle } from '@arco-design/web-vue/es/icon';\n\nexport default {\n  components: { IconInfoCircle },\n};\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/time-picker/__demo__/rangepicker.md",
    "content": "```yaml\ntitle:\n  zh-CN: 范围选择器\n  en-US: RangePicker\n```\n\n## zh-CN\n\n时间输入器的范围选择器。\n\n---\n\n## en-US\n\nSelect time range.\n\n---\n\n```vue\n<template>\n  <a-time-picker\n    type=\"time-range\"\n    @select=\"(valueString, value) => print('onSelect:', valueString, value)\"\n    @change=\"(valueString, value) => print('onChange:', valueString, value)\"\n    style=\"width: 252px;\" />\n</template>\n<script>\n  export default {\n    methods: {\n      print(...arg) {\n        console.log(...arg);\n      }\n    }\n  }\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/time-picker/__demo__/size.md",
    "content": "```yaml\ntitle:\n  zh-CN: 尺寸\n  en-US: Size\n```\n\n## zh-CN\n\n有四种尺寸可供选择。\n\n---\n\n## en-US\n\nThere are four sizes.\n\n---\n\n```vue\n<template>\n  <div style=\"marginBottom: 20px\">\n    <a-radio-group v-model=\"size\" type='button'>\n      <a-radio value=\"mini\">mini</a-radio>\n      <a-radio value=\"small\">small</a-radio>\n      <a-radio value=\"medium\">medium</a-radio>\n      <a-radio value=\"large\">large</a-radio>\n    </a-radio-group>\n  </div>\n  <a-time-picker style=\"width: 194px;\" :size=\"size\" />\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        size: 'small'\n      }\n    }\n  }\n</script>\n```\n\n"
  },
  {
    "path": "packages/web-vue/components/time-picker/__demo__/step.md",
    "content": "```yaml\ntitle:\n  zh-CN: 定制步长\n  en-US: Step\n```\n\n## zh-CN\n\n通过设置 `step`，可以定制需要显示的时、分、秒的步长。\n\n---\n\n## en-US\n\nBy setting `step`, you can customize the step length of the hour, minute, and second.\n\n---\n\n```vue\n<template>\n  <a-time-picker\n    defaultValue=\"10:25:30\"\n    :step=\"{\n      hour: 2,\n      minute: 5,\n      second: 10,\n    }\"\n    style=\"width: 194px;\" />\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/time-picker/__demo__/use-12-hours.md",
    "content": "```yaml\ntitle:\n  zh-CN: 十二小时制\n  en-US: 12 hours\n```\n\n## zh-CN\n\n通过设置 `use12Hours`，可以定制需要显示的时、分、秒。\n\n---\n\n## en-US\n\nBy setting `use12Hours`, you can customize the hours, minutes, and seconds.\n\n---\n\n```vue\n<template>\n  <a-time-picker\n    use12Hours\n    defaultValue=\"12:20:20 AM\"\n    format=\"hh:mm:ss A\"\n    style=\"width: 194px; margin: 0 24px 24px 0;\"\n  />\n  <a-time-picker\n    use12Hours\n    defaultValue=\"09:20:20 pm\"\n    format=\"hh:mm:ss a\"\n    style=\"width: 194px; margin: 0 24px 24px 0;\"\n  />\n  <a-time-picker\n    use12Hours\n    defaultValue=\"2:20 AM\"\n    format=\"h:mm A\"\n    style=\"width: 194px; margin: 0 24px 24px 0;\"\n  />\n  <a-time-picker\n    type=\"time-range\"\n    use12Hours\n    :defaultValue=\"['12:20:20 AM', '08:30:30 PM']\"\n    format=\"hh:mm:ss A\"\n    style=\"width: 300px; margin: 0 24px 24px 0;\"\n  />\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/time-picker/__test__/__snapshots__/demo.test.ts.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`<time-picker> demo: render [basic] correctly 1`] = `\n\"<div class=\\\\\"arco-picker arco-picker-size-medium\\\\\" style=\\\\\"width: 194px;\\\\\" visible=\\\\\"false\\\\\" editable=\\\\\"true\\\\\">\n  <!--v-if-->\n  <div class=\\\\\"arco-picker-input\\\\\"><input placeholder=\\\\\"请选择时间\\\\\" class=\\\\\"arco-picker-start-time\\\\\"></div>\n  <div class=\\\\\"arco-picker-suffix\\\\\">\n    <!--v-if--><span class=\\\\\"arco-picker-suffix-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-clock-circle\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M24 14v10h9.5m8.5 0c0 9.941-8.059 18-18 18S6 33.941 6 24 14.059 6 24 6s18 8.059 18 18Z\\\\\"></path></svg></span>\n    <!--v-if-->\n  </div>\n</div>\"\n`;\n\nexports[`<time-picker> demo: render [control] correctly 1`] = `\n\"<div class=\\\\\"arco-picker arco-picker-size-medium\\\\\" style=\\\\\"width: 194px;\\\\\" visible=\\\\\"false\\\\\" editable=\\\\\"true\\\\\">\n  <!--v-if-->\n  <div class=\\\\\"arco-picker-input\\\\\"><input placeholder=\\\\\"请选择时间\\\\\" class=\\\\\"arco-picker-start-time\\\\\"></div>\n  <div class=\\\\\"arco-picker-suffix\\\\\">\n    <!--v-if--><span class=\\\\\"arco-picker-suffix-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-clock-circle\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M24 14v10h9.5m8.5 0c0 9.941-8.059 18-18 18S6 33.941 6 24 14.059 6 24 6s18 8.059 18 18Z\\\\\"></path></svg></span>\n    <!--v-if-->\n  </div>\n</div>\"\n`;\n\nexports[`<time-picker> demo: render [default-value] correctly 1`] = `\n\"<div class=\\\\\"arco-picker arco-picker-size-medium\\\\\" style=\\\\\"width: 194px; margin-right: 24px; margin-bottom: 24px;\\\\\" visible=\\\\\"false\\\\\" editable=\\\\\"true\\\\\">\n  <!--v-if-->\n  <div class=\\\\\"arco-picker-input\\\\\"><input placeholder=\\\\\"请选择时间\\\\\" class=\\\\\"arco-picker-start-time\\\\\" value=\\\\\"18:24:23\\\\\"></div>\n  <div class=\\\\\"arco-picker-suffix\\\\\"><span class=\\\\\"arco-icon-hover arco-picker-icon-hover arco-picker-clear-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-close\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M9.857 9.858 24 24m0 0 14.142 14.142M24 24 38.142 9.858M24 24 9.857 38.142\\\\\"></path></svg></span><span class=\\\\\"arco-picker-suffix-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-clock-circle\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M24 14v10h9.5m8.5 0c0 9.941-8.059 18-18 18S6 33.941 6 24 14.059 6 24 6s18 8.059 18 18Z\\\\\"></path></svg></span>\n    <!--v-if-->\n  </div>\n</div>\n<div class=\\\\\"arco-picker arco-picker-range arco-picker-size-medium\\\\\" style=\\\\\"width: 252px; margin-bottom: 24px;\\\\\" visible=\\\\\"false\\\\\" editable=\\\\\"true\\\\\">\n  <!--v-if-->\n  <div class=\\\\\"arco-picker-input arco-picker-input-active\\\\\"><input placeholder=\\\\\"开始时间\\\\\" value=\\\\\"09:24:53\\\\\"></div><span class=\\\\\"arco-picker-separator\\\\\"> - </span>\n  <div class=\\\\\"arco-picker-input\\\\\"><input placeholder=\\\\\"结束时间\\\\\" value=\\\\\"18:44:33\\\\\"></div>\n  <div class=\\\\\"arco-picker-suffix\\\\\"><span class=\\\\\"arco-icon-hover arco-picker-icon-hover arco-picker-clear-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-close\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M9.857 9.858 24 24m0 0 14.142 14.142M24 24 38.142 9.858M24 24 9.857 38.142\\\\\"></path></svg></span><span class=\\\\\"arco-picker-suffix-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-clock-circle\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M24 14v10h9.5m8.5 0c0 9.941-8.059 18-18 18S6 33.941 6 24 14.059 6 24 6s18 8.059 18 18Z\\\\\"></path></svg></span>\n    <!--v-if-->\n  </div>\n</div>\"\n`;\n\nexports[`<time-picker> demo: render [disable-confirm] correctly 1`] = `\n\"<div class=\\\\\"arco-picker arco-picker-size-medium\\\\\" style=\\\\\"width: 194px; margin: 0px 24px 24px 0px;\\\\\" visible=\\\\\"false\\\\\" editable=\\\\\"true\\\\\">\n  <!--v-if-->\n  <div class=\\\\\"arco-picker-input\\\\\"><input placeholder=\\\\\"请选择时间\\\\\" class=\\\\\"arco-picker-start-time\\\\\"></div>\n  <div class=\\\\\"arco-picker-suffix\\\\\">\n    <!--v-if--><span class=\\\\\"arco-picker-suffix-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-clock-circle\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M24 14v10h9.5m8.5 0c0 9.941-8.059 18-18 18S6 33.941 6 24 14.059 6 24 6s18 8.059 18 18Z\\\\\"></path></svg></span>\n    <!--v-if-->\n  </div>\n</div>\n<div class=\\\\\"arco-picker arco-picker-range arco-picker-size-medium\\\\\" style=\\\\\"width: 252px; margin: 0px 24px 24px 0px;\\\\\" visible=\\\\\"false\\\\\" editable=\\\\\"true\\\\\">\n  <!--v-if-->\n  <div class=\\\\\"arco-picker-input arco-picker-input-active\\\\\"><input placeholder=\\\\\"开始时间\\\\\"></div><span class=\\\\\"arco-picker-separator\\\\\"> - </span>\n  <div class=\\\\\"arco-picker-input\\\\\"><input placeholder=\\\\\"结束时间\\\\\"></div>\n  <div class=\\\\\"arco-picker-suffix\\\\\">\n    <!--v-if--><span class=\\\\\"arco-picker-suffix-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-clock-circle\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M24 14v10h9.5m8.5 0c0 9.941-8.059 18-18 18S6 33.941 6 24 14.059 6 24 6s18 8.059 18 18Z\\\\\"></path></svg></span>\n    <!--v-if-->\n  </div>\n</div>\"\n`;\n\nexports[`<time-picker> demo: render [disabled] correctly 1`] = `\n\"<div class=\\\\\"arco-picker arco-picker-size-medium arco-picker-disabled\\\\\" style=\\\\\"margin: 0px 24px 24px 0px;\\\\\" visible=\\\\\"false\\\\\" editable=\\\\\"true\\\\\">\n  <!--v-if-->\n  <div class=\\\\\"arco-picker-input\\\\\"><input disabled=\\\\\"\\\\\" placeholder=\\\\\"请选择时间\\\\\" class=\\\\\"arco-picker-start-time\\\\\"></div>\n  <div class=\\\\\"arco-picker-suffix\\\\\">\n    <!--v-if--><span class=\\\\\"arco-picker-suffix-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-clock-circle\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M24 14v10h9.5m8.5 0c0 9.941-8.059 18-18 18S6 33.941 6 24 14.059 6 24 6s18 8.059 18 18Z\\\\\"></path></svg></span>\n    <!--v-if-->\n  </div>\n</div>\n<div class=\\\\\"arco-picker arco-picker-range arco-picker-size-medium arco-picker-disabled\\\\\" style=\\\\\"width: 252px; margin: 0px 24px 24px 0px;\\\\\" visible=\\\\\"false\\\\\" editable=\\\\\"true\\\\\">\n  <!--v-if-->\n  <div class=\\\\\"arco-picker-input arco-picker-input-active\\\\\"><input disabled=\\\\\"\\\\\" placeholder=\\\\\"开始时间\\\\\"></div><span class=\\\\\"arco-picker-separator\\\\\"> - </span>\n  <div class=\\\\\"arco-picker-input\\\\\"><input disabled=\\\\\"\\\\\" placeholder=\\\\\"结束时间\\\\\"></div>\n  <div class=\\\\\"arco-picker-suffix\\\\\">\n    <!--v-if--><span class=\\\\\"arco-picker-suffix-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-clock-circle\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M24 14v10h9.5m8.5 0c0 9.941-8.059 18-18 18S6 33.941 6 24 14.059 6 24 6s18 8.059 18 18Z\\\\\"></path></svg></span>\n    <!--v-if-->\n  </div>\n</div>\"\n`;\n\nexports[`<time-picker> demo: render [disabled-time] correctly 1`] = `\n\"<div class=\\\\\"arco-picker arco-picker-size-medium\\\\\" style=\\\\\"width: 194px; margin: 0px 24px 24px 0px;\\\\\" visible=\\\\\"false\\\\\" editable=\\\\\"true\\\\\">\n  <!--v-if-->\n  <div class=\\\\\"arco-picker-input\\\\\"><input placeholder=\\\\\"请选择时间\\\\\" class=\\\\\"arco-picker-start-time\\\\\"></div>\n  <div class=\\\\\"arco-picker-suffix\\\\\">\n    <!--v-if--><span class=\\\\\"arco-picker-suffix-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-clock-circle\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M24 14v10h9.5m8.5 0c0 9.941-8.059 18-18 18S6 33.941 6 24 14.059 6 24 6s18 8.059 18 18Z\\\\\"></path></svg></span>\n    <!--v-if-->\n  </div>\n</div>\n<div class=\\\\\"arco-picker arco-picker-range arco-picker-size-medium\\\\\" style=\\\\\"width: 252px; margin: 0px 24px 24px 0px;\\\\\" visible=\\\\\"false\\\\\" editable=\\\\\"true\\\\\">\n  <!--v-if-->\n  <div class=\\\\\"arco-picker-input arco-picker-input-active\\\\\"><input placeholder=\\\\\"开始时间\\\\\"></div><span class=\\\\\"arco-picker-separator\\\\\"> - </span>\n  <div class=\\\\\"arco-picker-input\\\\\"><input placeholder=\\\\\"结束时间\\\\\"></div>\n  <div class=\\\\\"arco-picker-suffix\\\\\">\n    <!--v-if--><span class=\\\\\"arco-picker-suffix-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-clock-circle\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M24 14v10h9.5m8.5 0c0 9.941-8.059 18-18 18S6 33.941 6 24 14.059 6 24 6s18 8.059 18 18Z\\\\\"></path></svg></span>\n    <!--v-if-->\n  </div>\n</div>\"\n`;\n\nexports[`<time-picker> demo: render [extra] correctly 1`] = `\n\"<div class=\\\\\"arco-picker arco-picker-size-medium\\\\\" style=\\\\\"width: 194px;\\\\\" visible=\\\\\"false\\\\\" editable=\\\\\"true\\\\\">\n  <!--v-if-->\n  <div class=\\\\\"arco-picker-input\\\\\"><input placeholder=\\\\\"请选择时间\\\\\" class=\\\\\"arco-picker-start-time\\\\\"></div>\n  <div class=\\\\\"arco-picker-suffix\\\\\">\n    <!--v-if--><span class=\\\\\"arco-picker-suffix-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-clock-circle\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M24 14v10h9.5m8.5 0c0 9.941-8.059 18-18 18S6 33.941 6 24 14.059 6 24 6s18 8.059 18 18Z\\\\\"></path></svg></span>\n    <!--v-if-->\n  </div>\n</div>\"\n`;\n\nexports[`<time-picker> demo: render [format] correctly 1`] = `\n\"<div class=\\\\\"arco-picker arco-picker-size-medium\\\\\" style=\\\\\"width: 130px;\\\\\" visible=\\\\\"false\\\\\" editable=\\\\\"true\\\\\">\n  <!--v-if-->\n  <div class=\\\\\"arco-picker-input\\\\\"><input placeholder=\\\\\"请选择时间\\\\\" class=\\\\\"arco-picker-start-time\\\\\" value=\\\\\"09:24\\\\\"></div>\n  <div class=\\\\\"arco-picker-suffix\\\\\"><span class=\\\\\"arco-icon-hover arco-picker-icon-hover arco-picker-clear-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-close\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M9.857 9.858 24 24m0 0 14.142 14.142M24 24 38.142 9.858M24 24 9.857 38.142\\\\\"></path></svg></span><span class=\\\\\"arco-picker-suffix-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-clock-circle\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M24 14v10h9.5m8.5 0c0 9.941-8.059 18-18 18S6 33.941 6 24 14.059 6 24 6s18 8.059 18 18Z\\\\\"></path></svg></span>\n    <!--v-if-->\n  </div>\n</div>\"\n`;\n\nexports[`<time-picker> demo: render [prefix] correctly 1`] = `\n\"<div>\n  <div>\n    <div class=\\\\\"arco-picker arco-picker-size-medium arco-picker-has-prefix\\\\\" style=\\\\\"width: 194px;\\\\\" visible=\\\\\"false\\\\\" editable=\\\\\"true\\\\\">\n      <div class=\\\\\"arco-picker-prefix\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-info-circle\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n          <path d=\\\\\"M24 20v14m0-16v-4m18 10c0 9.941-8.059 18-18 18S6 33.941 6 24 14.059 6 24 6s18 8.059 18 18Z\\\\\"></path>\n        </svg></div>\n      <div class=\\\\\"arco-picker-input\\\\\"><input placeholder=\\\\\"请选择时间\\\\\" class=\\\\\"arco-picker-start-time\\\\\"></div>\n      <div class=\\\\\"arco-picker-suffix\\\\\">\n        <!--v-if--><span class=\\\\\"arco-picker-suffix-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-clock-circle\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M24 14v10h9.5m8.5 0c0 9.941-8.059 18-18 18S6 33.941 6 24 14.059 6 24 6s18 8.059 18 18Z\\\\\"></path></svg></span>\n        <!--v-if-->\n      </div>\n    </div>\n    <!---->\n  </div>\n  <div>\n    <div class=\\\\\"arco-picker arco-picker-range arco-picker-size-medium arco-picker-has-prefix\\\\\" style=\\\\\"width: 252px; margin-top: 20px;\\\\\" visible=\\\\\"false\\\\\" editable=\\\\\"true\\\\\">\n      <div class=\\\\\"arco-picker-prefix\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-info-circle\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n          <path d=\\\\\"M24 20v14m0-16v-4m18 10c0 9.941-8.059 18-18 18S6 33.941 6 24 14.059 6 24 6s18 8.059 18 18Z\\\\\"></path>\n        </svg></div>\n      <div class=\\\\\"arco-picker-input arco-picker-input-active\\\\\"><input placeholder=\\\\\"开始时间\\\\\"></div><span class=\\\\\"arco-picker-separator\\\\\"> - </span>\n      <div class=\\\\\"arco-picker-input\\\\\"><input placeholder=\\\\\"结束时间\\\\\"></div>\n      <div class=\\\\\"arco-picker-suffix\\\\\">\n        <!--v-if--><span class=\\\\\"arco-picker-suffix-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-clock-circle\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M24 14v10h9.5m8.5 0c0 9.941-8.059 18-18 18S6 33.941 6 24 14.059 6 24 6s18 8.059 18 18Z\\\\\"></path></svg></span>\n        <!--v-if-->\n      </div>\n    </div>\n    <!---->\n  </div>\n</div>\"\n`;\n\nexports[`<time-picker> demo: render [rangepicker] correctly 1`] = `\n\"<div class=\\\\\"arco-picker arco-picker-range arco-picker-size-medium\\\\\" style=\\\\\"width: 252px;\\\\\" visible=\\\\\"false\\\\\" editable=\\\\\"true\\\\\">\n  <!--v-if-->\n  <div class=\\\\\"arco-picker-input arco-picker-input-active\\\\\"><input placeholder=\\\\\"开始时间\\\\\"></div><span class=\\\\\"arco-picker-separator\\\\\"> - </span>\n  <div class=\\\\\"arco-picker-input\\\\\"><input placeholder=\\\\\"结束时间\\\\\"></div>\n  <div class=\\\\\"arco-picker-suffix\\\\\">\n    <!--v-if--><span class=\\\\\"arco-picker-suffix-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-clock-circle\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M24 14v10h9.5m8.5 0c0 9.941-8.059 18-18 18S6 33.941 6 24 14.059 6 24 6s18 8.059 18 18Z\\\\\"></path></svg></span>\n    <!--v-if-->\n  </div>\n</div>\"\n`;\n\nexports[`<time-picker> demo: render [size] correctly 1`] = `\n\"<div style=\\\\\"margin-bottom: 20px;\\\\\"><span class=\\\\\"arco-radio-group-button arco-radio-group-size-medium arco-radio-group-direction-horizontal\\\\\"><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"mini\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">mini</span></label><label class=\\\\\"arco-radio-button arco-radio-checked\\\\\"><input type=\\\\\"radio\\\\\" checked=\\\\\"\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"small\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">small</span></label><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"medium\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">medium</span></label><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"large\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">large</span></label></span></div>\n<div class=\\\\\"arco-picker arco-picker-size-small\\\\\" style=\\\\\"width: 194px;\\\\\" visible=\\\\\"false\\\\\" editable=\\\\\"true\\\\\">\n  <!--v-if-->\n  <div class=\\\\\"arco-picker-input\\\\\"><input placeholder=\\\\\"请选择时间\\\\\" class=\\\\\"arco-picker-start-time\\\\\"></div>\n  <div class=\\\\\"arco-picker-suffix\\\\\">\n    <!--v-if--><span class=\\\\\"arco-picker-suffix-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-clock-circle\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M24 14v10h9.5m8.5 0c0 9.941-8.059 18-18 18S6 33.941 6 24 14.059 6 24 6s18 8.059 18 18Z\\\\\"></path></svg></span>\n    <!--v-if-->\n  </div>\n</div>\"\n`;\n\nexports[`<time-picker> demo: render [step] correctly 1`] = `\n\"<div class=\\\\\"arco-picker arco-picker-size-medium\\\\\" style=\\\\\"width: 194px;\\\\\" visible=\\\\\"false\\\\\" editable=\\\\\"true\\\\\">\n  <!--v-if-->\n  <div class=\\\\\"arco-picker-input\\\\\"><input placeholder=\\\\\"请选择时间\\\\\" class=\\\\\"arco-picker-start-time\\\\\" value=\\\\\"10:25:30\\\\\"></div>\n  <div class=\\\\\"arco-picker-suffix\\\\\"><span class=\\\\\"arco-icon-hover arco-picker-icon-hover arco-picker-clear-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-close\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M9.857 9.858 24 24m0 0 14.142 14.142M24 24 38.142 9.858M24 24 9.857 38.142\\\\\"></path></svg></span><span class=\\\\\"arco-picker-suffix-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-clock-circle\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M24 14v10h9.5m8.5 0c0 9.941-8.059 18-18 18S6 33.941 6 24 14.059 6 24 6s18 8.059 18 18Z\\\\\"></path></svg></span>\n    <!--v-if-->\n  </div>\n</div>\"\n`;\n\nexports[`<time-picker> demo: render [use-12-hours] correctly 1`] = `\n\"<div class=\\\\\"arco-picker arco-picker-size-medium\\\\\" style=\\\\\"width: 194px; margin: 0px 24px 24px 0px;\\\\\" visible=\\\\\"false\\\\\" editable=\\\\\"true\\\\\">\n  <!--v-if-->\n  <div class=\\\\\"arco-picker-input\\\\\"><input placeholder=\\\\\"请选择时间\\\\\" class=\\\\\"arco-picker-start-time\\\\\" value=\\\\\"12:20:20 AM\\\\\"></div>\n  <div class=\\\\\"arco-picker-suffix\\\\\"><span class=\\\\\"arco-icon-hover arco-picker-icon-hover arco-picker-clear-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-close\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M9.857 9.858 24 24m0 0 14.142 14.142M24 24 38.142 9.858M24 24 9.857 38.142\\\\\"></path></svg></span><span class=\\\\\"arco-picker-suffix-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-clock-circle\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M24 14v10h9.5m8.5 0c0 9.941-8.059 18-18 18S6 33.941 6 24 14.059 6 24 6s18 8.059 18 18Z\\\\\"></path></svg></span>\n    <!--v-if-->\n  </div>\n</div>\n<div class=\\\\\"arco-picker arco-picker-size-medium\\\\\" style=\\\\\"width: 194px; margin: 0px 24px 24px 0px;\\\\\" visible=\\\\\"false\\\\\" editable=\\\\\"true\\\\\">\n  <!--v-if-->\n  <div class=\\\\\"arco-picker-input\\\\\"><input placeholder=\\\\\"请选择时间\\\\\" class=\\\\\"arco-picker-start-time\\\\\" value=\\\\\"09:20:20 pm\\\\\"></div>\n  <div class=\\\\\"arco-picker-suffix\\\\\"><span class=\\\\\"arco-icon-hover arco-picker-icon-hover arco-picker-clear-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-close\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M9.857 9.858 24 24m0 0 14.142 14.142M24 24 38.142 9.858M24 24 9.857 38.142\\\\\"></path></svg></span><span class=\\\\\"arco-picker-suffix-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-clock-circle\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M24 14v10h9.5m8.5 0c0 9.941-8.059 18-18 18S6 33.941 6 24 14.059 6 24 6s18 8.059 18 18Z\\\\\"></path></svg></span>\n    <!--v-if-->\n  </div>\n</div>\n<div class=\\\\\"arco-picker arco-picker-size-medium\\\\\" style=\\\\\"width: 194px; margin: 0px 24px 24px 0px;\\\\\" visible=\\\\\"false\\\\\" editable=\\\\\"true\\\\\">\n  <!--v-if-->\n  <div class=\\\\\"arco-picker-input\\\\\"><input placeholder=\\\\\"请选择时间\\\\\" class=\\\\\"arco-picker-start-time\\\\\" value=\\\\\"2:20 AM\\\\\"></div>\n  <div class=\\\\\"arco-picker-suffix\\\\\"><span class=\\\\\"arco-icon-hover arco-picker-icon-hover arco-picker-clear-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-close\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M9.857 9.858 24 24m0 0 14.142 14.142M24 24 38.142 9.858M24 24 9.857 38.142\\\\\"></path></svg></span><span class=\\\\\"arco-picker-suffix-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-clock-circle\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M24 14v10h9.5m8.5 0c0 9.941-8.059 18-18 18S6 33.941 6 24 14.059 6 24 6s18 8.059 18 18Z\\\\\"></path></svg></span>\n    <!--v-if-->\n  </div>\n</div>\n<div class=\\\\\"arco-picker arco-picker-range arco-picker-size-medium\\\\\" style=\\\\\"width: 300px; margin: 0px 24px 24px 0px;\\\\\" visible=\\\\\"false\\\\\" editable=\\\\\"true\\\\\">\n  <!--v-if-->\n  <div class=\\\\\"arco-picker-input arco-picker-input-active\\\\\"><input placeholder=\\\\\"开始时间\\\\\" value=\\\\\"12:20:20 AM\\\\\"></div><span class=\\\\\"arco-picker-separator\\\\\"> - </span>\n  <div class=\\\\\"arco-picker-input\\\\\"><input placeholder=\\\\\"结束时间\\\\\" value=\\\\\"08:30:30 PM\\\\\"></div>\n  <div class=\\\\\"arco-picker-suffix\\\\\"><span class=\\\\\"arco-icon-hover arco-picker-icon-hover arco-picker-clear-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-close\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M9.857 9.858 24 24m0 0 14.142 14.142M24 24 38.142 9.858M24 24 9.857 38.142\\\\\"></path></svg></span><span class=\\\\\"arco-picker-suffix-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-clock-circle\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M24 14v10h9.5m8.5 0c0 9.941-8.059 18-18 18S6 33.941 6 24 14.059 6 24 6s18 8.059 18 18Z\\\\\"></path></svg></span>\n    <!--v-if-->\n  </div>\n</div>\"\n`;\n"
  },
  {
    "path": "packages/web-vue/components/time-picker/__test__/demo.test.ts",
    "content": "import demoTest from '../../../scripts/demo-test';\n\ndemoTest('time-picker');\n"
  },
  {
    "path": "packages/web-vue/components/time-picker/hooks/use-is-disabled-time.ts",
    "content": "import { Dayjs } from 'dayjs';\nimport { isArray } from '../../_utils/is';\nimport { TimePickerProps } from '../interface';\nimport { isDisabledTime } from '../utils';\n\nexport default function useIsDisabledTime(props: {\n  disabledHours: TimePickerProps['disabledHours'];\n  disabledMinutes: TimePickerProps['disabledMinutes'];\n  disabledSeconds: TimePickerProps['disabledSeconds'];\n}) {\n  const isDisabled = (value: Dayjs | undefined) => {\n    return isDisabledTime(value, {\n      disabledHours: props.disabledHours,\n      disabledMinutes: props.disabledMinutes,\n      disabledSeconds: props.disabledSeconds,\n    });\n  };\n\n  return (value: Array<Dayjs | undefined> | Dayjs | undefined) => {\n    return isArray(value)\n      ? value.some((i) => isDisabled(i))\n      : isDisabled(value);\n  };\n}\n"
  },
  {
    "path": "packages/web-vue/components/time-picker/hooks/use-time-format.ts",
    "content": "// 根据 format 和 use12Hours\n// 1. 格式化 format 和 use12Hours\n// 2. 带回要展示的时间列\n// 3. 带回 am pm 的大小写格式\n\nimport { computed, toRefs } from 'vue';\nimport { getColumnsFromFormat } from '../utils';\n\ninterface FormatProps {\n  format?: string;\n  defaultFormat?: string;\n  use12Hours?: boolean;\n}\n\nexport default function useTimeFormat(props: FormatProps) {\n  const {\n    format: propFormat,\n    use12Hours: propUse12Hours,\n    defaultFormat,\n  } = toRefs(props);\n\n  const format = computed(() => {\n    let res = propFormat?.value || defaultFormat?.value;\n    if (!res || !getColumnsFromFormat(res).list.length) {\n      res = propUse12Hours?.value ? 'hh:mm:ss a' : 'HH:mm:ss';\n    }\n    return res;\n  });\n\n  const configFromFormat = computed(() => getColumnsFromFormat(format.value));\n  const list = computed(() => configFromFormat.value.list);\n  const formatUse12Hours = computed(() => configFromFormat.value.use12Hours);\n\n  const computedUse12Hours = computed(\n    () => !!(propUse12Hours?.value || formatUse12Hours.value)\n  );\n\n  return {\n    columns: list,\n    use12Hours: computedUse12Hours,\n    format,\n  };\n}\n"
  },
  {
    "path": "packages/web-vue/components/time-picker/hooks/use-time-list.ts",
    "content": "// 生成时分秒的列数据，用于展示选项\n\nimport { toRefs, computed, ComputedRef } from 'vue';\nimport { padStart } from '../../_utils/pad';\nimport { PanelProps, TimeList } from '../interface';\nimport { getColumnsFromFormat } from '../utils';\n\ninterface TimeListProps\n  extends Pick<\n    PanelProps,\n    | 'format'\n    | 'step'\n    | 'use12Hours'\n    | 'disabledHours'\n    | 'disabledMinutes'\n    | 'disabledSeconds'\n    | 'hideDisabledOptions'\n  > {\n  selectedHour: number | undefined;\n  selectedMinute: number | undefined;\n  selectedSecond: number | undefined;\n  selectedAmpm: string;\n  disabled?: boolean;\n}\n\nexport default function useTimeList(props: TimeListProps): {\n  hours: ComputedRef<TimeList>;\n  minutes: ComputedRef<TimeList>;\n  seconds: ComputedRef<TimeList>;\n  ampmList: ComputedRef<TimeList>;\n} {\n  const {\n    format,\n    step,\n    use12Hours,\n    hideDisabledOptions,\n    disabledHours,\n    disabledMinutes,\n    disabledSeconds,\n    selectedHour,\n    selectedMinute,\n    selectedSecond,\n    selectedAmpm,\n    disabled,\n  } = toRefs(props);\n\n  // 小时\n  const hours = computed(() => {\n    const { hour: hourStep = 1 } = step?.value || {};\n    const disabledList = disabledHours?.value?.() || [];\n    let list = [];\n    for (let i = 0; i < (use12Hours.value ? 12 : 24); i += hourStep) {\n      list.push(i);\n    }\n    if (use12Hours.value) {\n      list[0] = 12;\n    }\n    if (hideDisabledOptions.value && disabledList.length) {\n      list = list.filter((h) => disabledList.indexOf(h) < 0);\n    }\n    return list.map((h) => ({\n      label: padStart(h, 2, '0'),\n      value: h,\n      selected: selectedHour.value === h,\n      disabled: disabled?.value || disabledList.includes(h),\n    }));\n  });\n\n  // 分钟\n  const minutes = computed(() => {\n    const { minute: minuteStep = 1 } = step?.value || {};\n    const disabledList = disabledMinutes?.value?.(selectedHour.value) || [];\n    let list = [];\n    for (let i = 0; i < 60; i += minuteStep) {\n      list.push(i);\n    }\n    if (hideDisabledOptions.value && disabledList.length) {\n      list = list.filter((m) => disabledList.indexOf(m) < 0);\n    }\n    return list.map((m) => ({\n      label: padStart(m, 2, '0'),\n      value: m,\n      selected: selectedMinute.value === m,\n      disabled: disabled?.value || disabledList.includes(m),\n    }));\n  });\n\n  // 秒\n  const seconds = computed(() => {\n    const { second: secondStep = 1 } = step?.value || {};\n    const disabledList =\n      disabledSeconds?.value?.(selectedHour.value, selectedMinute.value) || [];\n    let list = [];\n    for (let i = 0; i < 60; i += secondStep) {\n      list.push(i);\n    }\n    if (hideDisabledOptions.value && disabledList.length) {\n      list = list.filter((s) => disabledList.indexOf(s) < 0);\n    }\n    return list.map((s) => ({\n      label: padStart(s, 2, '0'),\n      value: s,\n      selected: selectedSecond.value === s,\n      disabled: disabled?.value || disabledList.includes(s),\n    }));\n  });\n\n  // ampm\n  const AMPM = ['am', 'pm'];\n  const ampmList = computed(() => {\n    const isUpperCase = getColumnsFromFormat(format.value).list.includes('A');\n    return AMPM.map((a) => ({\n      label: isUpperCase ? a.toUpperCase() : a,\n      value: a,\n      selected: selectedAmpm.value === a,\n      disabled: disabled?.value,\n    }));\n  });\n\n  return {\n    hours,\n    minutes,\n    seconds,\n    ampmList,\n  };\n}\n"
  },
  {
    "path": "packages/web-vue/components/time-picker/hooks/use-time-state.ts",
    "content": "import { Dayjs } from 'dayjs';\nimport { computed, toRefs, watch } from 'vue';\nimport { getDayjsValue } from '../../_utils/date';\nimport { isArray, isUndefined } from '../../_utils/is';\nimport { TimeValue } from '../interface';\nimport useState from '../../_hooks/use-state';\n\nexport default function useTimeState(props: {\n  modelValue: TimeValue | TimeValue[] | undefined;\n  defaultValue: TimeValue | TimeValue[] | undefined;\n  format: string;\n  isRange: boolean;\n}) {\n  const { modelValue, defaultValue, format, isRange } = toRefs(props);\n\n  function getLocalEmptyValue(): Dayjs[] | undefined {\n    return isRange.value ? [] : undefined;\n  }\n\n  function normalizeValue(time: TimeValue | TimeValue[] | undefined) {\n    if (isUndefined(time)) {\n      return undefined;\n    }\n\n    if (isRange.value) {\n      return isArray(time) ? time : [time, undefined];\n    }\n\n    return time;\n  }\n\n  // 转为 dayjs 的 modelValue\n  const computedModelValue = computed(() => {\n    const time = normalizeValue(modelValue.value);\n    return getDayjsValue(time, format.value);\n  });\n\n  // 转为 dayjs 的 defaultValue\n  const computedDefaultValue = computed(() => {\n    const time = normalizeValue(defaultValue.value);\n    return getDayjsValue(time, format.value);\n  });\n\n  const [localValue, setLocalValue] = useState<\n    Dayjs | Array<Dayjs | undefined> | undefined\n  >(\n    !isUndefined(computedModelValue.value)\n      ? computedModelValue.value\n      : !isUndefined(computedDefaultValue.value)\n      ? computedDefaultValue.value\n      : getLocalEmptyValue()\n  );\n\n  watch(computedModelValue, () => {\n    if (isUndefined(computedModelValue.value)) {\n      setLocalValue(getLocalEmptyValue());\n    }\n  });\n\n  // 混合的最终值：如果外部有传的话，就用外部的值，不然就使用内部维护的值\n  const computedValue = computed(\n    () => computedModelValue.value || localValue.value\n  );\n\n  // 用于操作过程中 panel 展示的值\n  // 1. 跟随最终值变化\n  // 2. 面板选择后手动更新\n  // 3. 输入框输入格式正确后手动更新\n  const [panelValue, setPanelValue] = useState<\n    Dayjs | Array<Dayjs | undefined> | undefined\n  >(computedValue.value);\n\n  watch([computedValue], () => {\n    setPanelValue(computedValue.value);\n  });\n\n  // 用于操作 input 的过程中 input 展示的值\n  // 1. 最终值变化后置空\n  // 2. 面板选择后置空\n  // 3. 输入框变化后手动更新\n  const [inputValue, setInputValue] = useState<\n    string | Array<string | undefined> | undefined\n  >();\n  watch([panelValue], () => {\n    setInputValue(undefined);\n  });\n\n  return {\n    computedValue,\n    panelValue,\n    inputValue,\n    setValue: setLocalValue,\n    setPanelValue,\n    setInputValue,\n  };\n}\n"
  },
  {
    "path": "packages/web-vue/components/time-picker/index.ts",
    "content": "import type { App } from 'vue';\nimport type { ArcoOptions } from '../_utils/types';\nimport { setGlobalConfig, getComponentPrefix } from '../_utils/global-config';\nimport _TimePicker from './time-picker.vue';\n\nconst TimePicker = Object.assign(_TimePicker, {\n  install: (app: App, options?: ArcoOptions) => {\n    setGlobalConfig(app, options);\n    const componentPrefix = getComponentPrefix(options);\n\n    app.component(componentPrefix + _TimePicker.name, _TimePicker);\n  },\n});\n\nexport type TimePickerInstance = InstanceType<typeof _TimePicker>;\n\nexport default TimePicker;\n"
  },
  {
    "path": "packages/web-vue/components/time-picker/interface.ts",
    "content": "import { Dayjs } from 'dayjs';\n\n// 支持：Date ｜ 字符串 ｜ 时间戳\nexport type TimeValue = Date | string | number;\n\nexport interface BasePanelProps {\n  disableConfirm: boolean;\n  use12Hours: boolean;\n  step?: { hour?: number; minute?: number; second?: number };\n  disabledHours?: () => number[];\n  disabledMinutes?: (selectedHour?: number) => number[];\n  disabledSeconds?: (\n    selectedHour?: number,\n    selectedMinute?: number\n  ) => number[];\n  hideDisabledOptions: boolean;\n}\n\nexport interface PanelProps extends Omit<BasePanelProps, 'disableConfirm'> {\n  value?: Dayjs;\n  defaultValue?: Dayjs;\n  format: string;\n  visible: boolean;\n  hideFooter: boolean;\n  isRange: boolean;\n  disabled: boolean;\n}\n\nexport interface RangePanelProps extends Omit<PanelProps, 'value'> {\n  value?: Array<Dayjs | undefined>;\n}\n\nexport interface TimePickerProps extends BasePanelProps {\n  type: 'time' | 'time-range';\n  modelValue?: TimeValue | TimeValue[];\n  defaultValue?: TimeValue | TimeValue[];\n  placeholder?: string | string[];\n  disabled: boolean;\n  allowClear: boolean;\n  readonly: boolean;\n  error: boolean;\n  format?: string;\n  size: 'mini' | 'small' | 'medium' | 'large';\n  position: 'top' | 'tl' | 'tr' | 'bottom' | 'bl' | 'br';\n  popupVisible: boolean | undefined;\n  defaultPopupVisible: boolean;\n  triggerProps?: Record<string, unknown>;\n  unmountOnClose: boolean;\n}\n\nexport interface TimeListItem {\n  value: number | string;\n  label: string;\n  disabled?: boolean;\n  selected?: boolean;\n}\n\nexport type TimeList = TimeListItem[];\n"
  },
  {
    "path": "packages/web-vue/components/time-picker/panel.vue",
    "content": "<template>\n  <div :class=\"prefixCls\">\n    <TimeColumn\n      v-if=\"columns.includes('H') || columns.includes('h')\"\n      :value=\"selectedHour\"\n      :list=\"hours\"\n      :prefix-cls=\"prefixCls\"\n      :visible=\"visible\"\n      @select=\"\n        (value) => {\n          onSelect(value, 'hour');\n        }\n      \"\n    />\n    <TimeColumn\n      v-if=\"columns.includes('m')\"\n      :value=\"selectedMinute\"\n      :list=\"minutes\"\n      :prefix-cls=\"prefixCls\"\n      :visible=\"visible\"\n      @select=\"\n        (value) => {\n          onSelect(value, 'minute');\n        }\n      \"\n    />\n    <TimeColumn\n      v-if=\"columns.includes('s')\"\n      :value=\"selectedSecond\"\n      :list=\"seconds\"\n      :prefix-cls=\"prefixCls\"\n      :visible=\"visible\"\n      @select=\"\n        (value) => {\n          onSelect(value, 'second');\n        }\n      \"\n    />\n    <TimeColumn\n      v-if=\"computedUse12Hours\"\n      :value=\"selectedAmpm\"\n      :list=\"ampmList\"\n      :prefix-cls=\"prefixCls\"\n      :visible=\"visible\"\n      @select=\"\n        (value) => {\n          onSelect(value, 'ampm');\n        }\n      \"\n    />\n  </div>\n  <div\n    v-if=\"$slots['extra-footer']\"\n    :class=\"`${prefixCls}-footer-extra-wrapper`\"\n  >\n    <slot name=\"extra-footer\"></slot>\n  </div>\n  <div v-if=\"!hideFooter\" :class=\"`${prefixCls}-footer-btn-wrapper`\">\n    <Button v-if=\"!isRange\" size=\"mini\" @click=\"onSelectNow\">\n      {{ t('datePicker.now') }}\n    </Button>\n    <Button\n      type=\"primary\"\n      size=\"mini\"\n      :disabled=\"confirmBtnDisabled || !selectedValue\"\n      @click=\"onConfirm\"\n    >\n      {{ t('datePicker.ok') }}\n    </Button>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  PropType,\n  reactive,\n  ref,\n  toRefs,\n  watch,\n} from 'vue';\nimport { Dayjs } from 'dayjs';\nimport TimeColumn from './time-column.vue';\nimport Button from '../button';\nimport type { PanelProps } from './interface';\nimport { isDayjs, isUndefined } from '../_utils/is';\nimport { dayjs } from '../_utils/date';\nimport { getPrefixCls } from '../_utils/global-config';\nimport useTimeList from './hooks/use-time-list';\nimport useTimeFormat from './hooks/use-time-format';\nimport useIsDisabledTime from './hooks/use-is-disabled-time';\nimport { useI18n } from '../locale';\n\nexport default defineComponent({\n  name: 'TimePickerPanel',\n  components: {\n    TimeColumn,\n    Button,\n  },\n  props: {\n    value: {\n      type: Object as PropType<PanelProps['value']>,\n    },\n    visible: {\n      type: Boolean,\n    },\n    format: {\n      type: String,\n      default: 'HH:mm:ss',\n    },\n    use12Hours: {\n      type: Boolean,\n    },\n    step: {\n      type: Object as PropType<PanelProps['step']>,\n    },\n    disabledHours: {\n      type: Function as unknown as PropType<PanelProps['disabledHours']>,\n    },\n    disabledMinutes: {\n      type: Function as unknown as PropType<PanelProps['disabledMinutes']>,\n    },\n    disabledSeconds: {\n      type: Function as unknown as PropType<PanelProps['disabledSeconds']>,\n    },\n    hideDisabledOptions: {\n      type: Boolean,\n    },\n    hideFooter: {\n      type: Boolean,\n    },\n    isRange: {\n      type: Boolean,\n    },\n    disabled: {\n      type: Boolean,\n    },\n  },\n  emits: {\n    // 每点击一个时间就会触发该事件（还没点击确定，时间只能展示但未生效）\n    select: (value: Dayjs) => isDayjs(value),\n    // 确认选择之后触发该事件\n    confirm: (value: Dayjs) => isDayjs(value),\n  },\n  setup(props: PanelProps, { emit }) {\n    const {\n      value,\n      visible,\n      format,\n      step,\n      use12Hours,\n      hideDisabledOptions,\n      disabledHours,\n      disabledMinutes,\n      disabledSeconds,\n      disabled,\n    } = toRefs(props);\n\n    const prefixCls = getPrefixCls('timepicker');\n    const { t } = useI18n();\n\n    const {\n      columns,\n      use12Hours: computedUse12Hours,\n      format: computedFormat,\n    } = useTimeFormat(\n      reactive({\n        format,\n        use12Hours,\n      })\n    );\n\n    const selectedValue = ref<Dayjs | undefined>(value?.value);\n    const setSelectedValue = (value: Dayjs | undefined) => {\n      selectedValue.value = value;\n    };\n    // Synchronize selectedValue every time you open or change the value\n    watch([visible, value], () => {\n      if (!visible.value) return;\n      setSelectedValue(value?.value);\n    });\n\n    const selectedHour = computed(() => {\n      const _hour = selectedValue.value?.hour();\n      if (isUndefined(_hour) || !computedUse12Hours.value) return _hour;\n      // Use 12-hour clock\n      if (_hour > 12) return _hour - 12;\n      if (_hour === 0) return 12;\n      return _hour;\n    });\n    const selectedMinute = computed(() => selectedValue.value?.minute());\n    const selectedSecond = computed(() => selectedValue.value?.second());\n    const selectedAmpm = computed(() => {\n      const _hour = selectedValue.value?.hour();\n      return !isUndefined(_hour) && _hour >= 12 ? 'pm' : 'am';\n    });\n\n    const { hours, minutes, seconds, ampmList } = useTimeList(\n      reactive({\n        format: computedFormat,\n        step,\n        use12Hours: computedUse12Hours,\n        hideDisabledOptions,\n        disabledHours,\n        disabledMinutes,\n        disabledSeconds,\n        selectedHour,\n        selectedMinute,\n        selectedSecond,\n        selectedAmpm,\n        disabled,\n      })\n    );\n\n    const isDisabledTime = useIsDisabledTime(\n      reactive({\n        disabledHours,\n        disabledMinutes,\n        disabledSeconds,\n      })\n    );\n    const confirmBtnDisabled = computed(() =>\n      isDisabledTime(selectedValue.value)\n    );\n\n    function emitConfirm(value: Dayjs | undefined) {\n      if (isUndefined(value)) return;\n      emit('confirm', value);\n    }\n\n    function emitSelect(value: Dayjs) {\n      setSelectedValue(value);\n      emit('select', value);\n    }\n\n    // 选中谁就更新谁\n    function onSelect(\n      value: number | string,\n      type: 'hour' | 'minute' | 'second' | 'ampm' = 'hour'\n    ) {\n      let newValue;\n      const hour = selectedHour.value || '00';\n      const minute = selectedMinute.value || '00';\n      const second = selectedSecond.value || '00';\n      const ampm = selectedAmpm.value || 'am';\n\n      switch (type) {\n        case 'hour':\n          newValue = `${value}:${minute}:${second}`;\n          break;\n        case 'minute':\n          newValue = `${hour}:${value}:${second}`;\n          break;\n        case 'second':\n          newValue = `${hour}:${minute}:${value}`;\n          break;\n        case 'ampm':\n          newValue = `${hour}:${minute}:${second} ${value}`;\n          break;\n        default:\n          newValue = '00:00:00';\n      }\n\n      let valueFormat = 'HH:mm:ss';\n      if (computedUse12Hours.value) {\n        valueFormat = 'HH:mm:ss a';\n        if (type !== 'ampm') {\n          newValue = `${newValue} ${ampm}`;\n        }\n      }\n\n      newValue = dayjs(newValue, valueFormat);\n      emitSelect(newValue);\n    }\n\n    return {\n      prefixCls,\n      t,\n      hours,\n      minutes,\n      seconds,\n      ampmList,\n      selectedValue,\n      selectedHour,\n      selectedMinute,\n      selectedSecond,\n      selectedAmpm,\n      computedUse12Hours,\n      confirmBtnDisabled,\n      columns,\n      onSelect,\n      onSelectNow() {\n        const newValue = dayjs(new Date());\n        emitSelect(newValue);\n      },\n      onConfirm() {\n        emitConfirm(selectedValue.value);\n      },\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/time-picker/range-panel.tsx",
    "content": "import { Dayjs } from 'dayjs';\nimport { computed, defineComponent, PropType, ref, toRefs, watch } from 'vue';\nimport { isUndefined } from '../_utils/is';\nimport { RangePanelProps } from './interface';\nimport Panel from './panel.vue';\nimport { isValidRangeValue } from './utils';\n\nexport default defineComponent({\n  name: 'TimePickerRangePanel',\n  components: {\n    Panel,\n  },\n  props: {\n    value: {\n      type: Array as PropType<RangePanelProps['value']>,\n    },\n    displayIndex: {\n      type: Number,\n      default: 0,\n    },\n  },\n  emits: ['select', 'confirm', 'update:displayIndex', 'display-index-change'],\n  setup(props, { emit }) {\n    const { value, displayIndex } = toRefs(props);\n\n    const localDisplayIndex = ref<number>(displayIndex.value);\n    watch(displayIndex, () => {\n      localDisplayIndex.value = displayIndex.value;\n    });\n\n    const displayValue = computed(() =>\n      value?.value ? value.value[localDisplayIndex.value] : undefined\n    );\n\n    function onSelect(selectedValue: Dayjs) {\n      const newValue =\n        isUndefined(value) || isUndefined(value?.value) ? [] : [...value.value];\n      newValue[localDisplayIndex.value] = selectedValue;\n      emit('select', newValue);\n    }\n\n    function onConfirm() {\n      if (!isValidRangeValue(value?.value)) {\n        const newIndex = (localDisplayIndex.value + 1) % 2;\n        localDisplayIndex.value = newIndex;\n        emit('display-index-change', newIndex);\n        emit('update:displayIndex', newIndex);\n      } else {\n        emit('confirm', value?.value);\n      }\n    }\n\n    return {\n      displayValue,\n      onSelect,\n      onConfirm,\n    };\n  },\n  render() {\n    const _props = {\n      ...this.$attrs,\n      isRange: true,\n      value: this.displayValue,\n      onSelect: this.onSelect,\n      onConfirm: this.onConfirm,\n    } as any;\n\n    return <Panel {..._props} v-slots={this.$slots} />;\n  },\n});\n"
  },
  {
    "path": "packages/web-vue/components/time-picker/style/index.less",
    "content": "@import './token.less';\n\n@time-picker-prefix-cls: ~'@{prefix}-timepicker';\n\n.@{time-picker-prefix-cls} {\n  position: relative;\n  display: flex;\n  box-sizing: border-box;\n  padding: 0;\n\n  &-container {\n    overflow: hidden;\n    background-color: var(~'@{arco-cssvars-prefix}-color-bg-popup');\n    border: 1px solid @timepicker-color-border;\n    border-radius: @timepicker-wrapper-border-radius;\n    box-shadow: @popup-box-shadow-base;\n  }\n\n  &-column {\n    box-sizing: border-box;\n    width: @timepicker-column-width;\n    height: @timepicker-column-height;\n    overflow: hidden;\n\n    &:not(:last-child) {\n      border-right: 1px solid @timepicker-color-border;\n    }\n\n    &:hover {\n      overflow-y: auto;\n    }\n\n    ul {\n      box-sizing: border-box;\n      margin: 0;\n      padding: 0;\n      list-style: none;\n\n      &::after {\n        display: block;\n        width: 100%;\n        height: @timepicker-column-height - @timepicker-cell-height -\n          @timepicker-cell-spacing * 2;\n        content: '';\n      }\n    }\n  }\n\n  &-cell {\n    padding: @timepicker-cell-spacing 0;\n    color: @timepicker-color-text-cell;\n    font-weight: @timepicker-font-weight-cell;\n    cursor: pointer;\n\n    &-inner {\n      height: @timepicker-cell-height;\n      padding-left: 24px;\n      font-size: 14px;\n      line-height: @timepicker-cell-height;\n    }\n\n    &:not(&-selected):not(&-disabled):hover &-inner {\n      background-color: @timepicker-color-bg-cell_hover;\n    }\n  }\n\n  &-cell-selected &-cell-inner {\n    font-weight: @timepicker-font-weight-cell_active;\n    background-color: @timepicker-color-bg-cell_active;\n  }\n\n  &-cell-disabled {\n    color: @timepicker-color-text-cell_disabled;\n    cursor: not-allowed;\n  }\n\n  &-footer-extra-wrapper {\n    padding: 8px;\n    color: var(~'@{arco-cssvars-prefix}-color-text-1');\n    font-size: @font-size-body-1;\n    border-top: 1px solid @timepicker-color-border;\n  }\n\n  &-footer-btn-wrapper {\n    display: flex;\n    justify-content: space-between;\n    padding: 8px;\n    border-top: 1px solid @timepicker-color-border;\n\n    & :only-child {\n      margin-left: auto;\n    }\n  }\n}\n"
  },
  {
    "path": "packages/web-vue/components/time-picker/style/index.ts",
    "content": "import '../../style/index.less';\nimport '../../input/style';\nimport '../../trigger/style';\nimport '../../_components/picker/style/index.less';\nimport './index.less';\n"
  },
  {
    "path": "packages/web-vue/components/time-picker/style/token.less",
    "content": "@import '../../style/theme/index.less';\n\n@timepicker-wrapper-border-radius: @radius-medium;\n\n@timepicker-column-width: 64px;\n@timepicker-column-height: 224px;\n@timepicker-cell-height: 24px;\n@timepicker-cell-spacing: 4px;\n\n@timepicker-color-border: var(~'@{arco-cssvars-prefix}-color-neutral-3');\n@timepicker-color-text-cell: var(~'@{arco-cssvars-prefix}-color-text-1');\n@timepicker-color-bg-cell_hover: var(~'@{arco-cssvars-prefix}-color-fill-2');\n@timepicker-color-bg-cell_active: var(~'@{arco-cssvars-prefix}-color-fill-2');\n@timepicker-color-text-cell_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');\n\n@timepicker-font-weight-cell: @font-weight-500;\n@timepicker-font-weight-cell_active: @font-weight-500;\n"
  },
  {
    "path": "packages/web-vue/components/time-picker/time-column.vue",
    "content": "<template>\n  <div ref=\"refWrapper\" :class=\"`${prefixCls}-column`\">\n    <ul>\n      <li\n        v-for=\"item in list\"\n        :key=\"item.value\"\n        :ref=\"\n          (el) => {\n            onItemRef(el, item);\n          }\n        \"\n        :class=\"[\n          `${prefixCls}-cell`,\n          {\n            [`${prefixCls}-cell-disabled`]: item.disabled,\n            [`${prefixCls}-cell-selected`]: item.selected,\n          },\n        ]\"\n        @click=\"\n          () => {\n            onItemClick(item);\n          }\n        \"\n      >\n        <div :class=\"`${prefixCls}-cell-inner`\">{{ item.label }}</div>\n      </li>\n    </ul>\n  </div>\n</template>\n<script lang=\"ts\">\nimport {\n  defineComponent,\n  nextTick,\n  onMounted,\n  PropType,\n  ref,\n  toRefs,\n  watch,\n} from 'vue';\nimport { isUndefined } from '../_utils/is';\nimport { TimeList, TimeListItem } from './interface';\nimport { scrollTo } from './utils';\n\nexport default defineComponent({\n  name: 'TimePickerColumn',\n  props: {\n    prefixCls: {\n      type: String,\n      required: true,\n    },\n    list: {\n      type: Array as PropType<TimeList>,\n      required: true,\n    },\n    value: {\n      type: [Number, String],\n    },\n    visible: {\n      type: Boolean,\n    },\n  },\n  emits: ['select'],\n  setup(props, { emit }) {\n    const { visible, value } = toRefs(props);\n    const refMap = ref(new Map<TimeListItem['value'], HTMLElement>());\n    const refWrapper = ref<HTMLElement>();\n\n    function scrollToTop(easing = false) {\n      if (!refWrapper.value || isUndefined(value?.value) || !visible?.value) {\n        return;\n      }\n\n      const refSelected = refMap.value.get(value.value);\n\n      if (refSelected) {\n        scrollTo(refWrapper.value, refSelected.offsetTop, easing ? 100 : 0);\n      }\n    }\n\n    watch([value, visible], (_, [, preVisible]) => {\n      if (visible.value !== preVisible) {\n        nextTick(() => {\n          scrollToTop();\n        });\n      } else {\n        scrollToTop(true);\n      }\n    });\n\n    onMounted(() => {\n      scrollToTop();\n    });\n\n    return {\n      refWrapper,\n      refMap,\n      onItemRef(el: HTMLElement, item: TimeListItem) {\n        refMap.value.set(item.value, el);\n      },\n      onItemClick(item: TimeListItem) {\n        if (!item.disabled) {\n          emit('select', item.value);\n        }\n      },\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/time-picker/time-picker.vue",
    "content": "<template>\n  <Trigger\n    trigger=\"click\"\n    animation-name=\"slide-dynamic-origin\"\n    auto-fit-transform-origin\n    :click-to-close=\"false\"\n    :position=\"position\"\n    :disabled=\"mergedDisabled || readonly\"\n    :popup-offset=\"4\"\n    :popup-visible=\"panelVisible\"\n    :prevent-focus=\"true\"\n    :unmount-on-close=\"unmountOnClose\"\n    :popup-container=\"popupContainer\"\n    v-bind=\"{ ...triggerProps }\"\n    @popupVisibleChange=\"onPanelVisibleChange\"\n  >\n    <component\n      :is=\"isRange ? 'DateRangeInput' : 'DateInput'\"\n      v-bind=\"{\n        ...$attrs,\n        ...inputProps,\n      }\"\n      ref=\"refInput\"\n      :input-value=\"inputValue\"\n      :value=\"panelValue\"\n      :size=\"size\"\n      :focused=\"panelVisible\"\n      :format=\"computedFormat\"\n      :visible=\"panelVisible\"\n      :disabled=\"mergedDisabled\"\n      :error=\"error\"\n      :readonly=\"readonly\"\n      :editable=\"!readonly\"\n      :allow-clear=\"allowClear && !readonly\"\n      :placeholder=\"computedPlaceholder\"\n      @clear=\"onInputClear\"\n    >\n      <template v-if=\"$slots.prefix\" #prefix>\n        <slot name=\"prefix\"> </slot>\n      </template>\n      <template #suffix-icon>\n        <slot name=\"suffix-icon\">\n          <IconClockCircle />\n        </slot>\n      </template>\n    </component>\n    <template #content>\n      <div :class=\"`${prefixCls}-container`\" @click=\"onPanelClick\">\n        <component\n          :is=\"isRange ? 'RangePanel' : 'Panel'\"\n          v-bind=\"panelProps\"\n          :value=\"panelValue\"\n          :visible=\"panelVisible\"\n          :format=\"computedFormat\"\n          :use12-hours=\"computedUse12Hours\"\n          :step=\"step\"\n          :disabled-hours=\"disabledHours\"\n          :disabled-minutes=\"disabledMinutes\"\n          :disabled-seconds=\"disabledSeconds\"\n          :hide-disabled-options=\"hideDisabledOptions\"\n          :hide-footer=\"disableConfirm\"\n          @select=\"onPanelSelect\"\n          @confirm=\"onPanelConfirm\"\n        >\n          <template v-if=\"$slots.extra\" #extra-footer>\n            <slot name=\"extra\" />\n          </template>\n        </component>\n      </div>\n    </template>\n  </Trigger>\n</template>\n\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  nextTick,\n  PropType,\n  reactive,\n  ref,\n  toRefs,\n  watch,\n} from 'vue';\nimport { Dayjs } from 'dayjs';\nimport {\n  dayjs,\n  getSortedDayjsArray,\n  isValueChange,\n  getDateValue,\n} from '../_utils/date';\nimport { isArray, isUndefined } from '../_utils/is';\nimport { getPrefixCls } from '../_utils/global-config';\nimport Trigger, { TriggerProps } from '../trigger';\nimport DateInput from '../_components/picker/input.vue';\nimport DateRangeInput from '../_components/picker/input-range.vue';\nimport IconClockCircle from '../icon/icon-clock-circle';\nimport useState from '../_hooks/use-state';\nimport useTimeFormat from './hooks/use-time-format';\nimport useTimeState from './hooks/use-time-state';\nimport {\n  getFormattedValue,\n  isValidInputValue,\n  isValidRangeValue,\n} from './utils';\nimport Panel from './panel.vue';\nimport RangePanel from './range-panel';\nimport useIsDisabledTime from './hooks/use-is-disabled-time';\nimport useMergeState from '../_hooks/use-merge-state';\nimport { useI18n } from '../locale';\nimport { Size } from '../_utils/constant';\nimport { useFormItem } from '../_hooks/use-form-item';\n\nexport default defineComponent({\n  name: 'TimePicker',\n  components: {\n    Trigger,\n    DateInput,\n    DateRangeInput,\n    Panel,\n    RangePanel,\n    IconClockCircle,\n  },\n  inheritAttrs: false,\n  props: {\n    /**\n     * @zh 选择器类型\n     * @en Selector type\n     */\n    type: {\n      type: String as PropType<'time' | 'time-range'>,\n      default: 'time',\n    },\n    /**\n     * @zh 绑定值\n     * @en Value\n     * */\n    modelValue: {\n      type: [String, Number, Date, Array] as PropType<\n        string | number | Date | Array<string | number | Date>\n      >,\n    },\n    /**\n     * @zh 默认值\n     * @en Default value\n     * */\n    defaultValue: {\n      type: [String, Number, Date, Array] as PropType<\n        string | number | Date | Array<string | number | Date>\n      >,\n    },\n    /**\n     * @zh 是否禁用\n     * @en Whether to disable\n     */\n    disabled: {\n      type: Boolean,\n    },\n    /**\n     * @zh 是否允许清除\n     * @en Whether to allow clear\n     * */\n    allowClear: {\n      type: Boolean,\n      default: true,\n    },\n    /**\n     * @zh 是否为只读模式\n     * @en Whether it is read-only mode\n     * */\n    readonly: {\n      type: Boolean,\n    },\n    /**\n     * @zh 是否为错误状态\n     * @en Whether it is an error state\n     * */\n    error: {\n      type: Boolean,\n    },\n    /**\n     * @zh 展示日期的格式，参考[字符串解析格式](#字符串解析格式)\n     * @en Display the format of the date, refer to [String Parsing Format](#String Parsing Format)\n     * */\n    format: {\n      type: String,\n      default: 'HH:mm:ss',\n    },\n    /**\n     * @zh 提示文案\n     * @en Prompt copy\n     * */\n    placeholder: {\n      type: [String, Array] as PropType<string | string[]>,\n    },\n    /**\n     * @zh 输入框尺寸\n     * @en Input box size\n     * @values 'mini','small','medium','large'\n     * @defaultValue 'medium'\n     * */\n    size: {\n      type: String as PropType<Size>,\n    },\n    /**\n     * @zh 弹出框的挂载容器\n     * @en Mount container for pop-up box\n     * */\n    popupContainer: {\n      type: [String, Object] as PropType<string | HTMLElement>,\n    },\n    /**\n     * @zh 12 小时制\n     * @en 12 hour clock\n     * */\n    use12Hours: {\n      type: Boolean,\n    },\n    /**\n     * @zh 设置 时 / 分 / 秒 的选择间隔\n     * @en Set the hour/minute/second selection interval\n     * */\n    step: {\n      type: Object as PropType<{\n        hour?: number;\n        minute?: number;\n        second?: number;\n      }>,\n    },\n    /**\n     * @zh 禁用的部分小时选项\n     * @en Disabled partial hour options\n     * */\n    disabledHours: {\n      type: Function as PropType<() => number[]>,\n    },\n    /**\n     * @zh 禁用的部分分钟选项\n     * @en Disabled some minutes options\n     * */\n    disabledMinutes: {\n      type: Function as PropType<(selectedHour?: number) => number[]>,\n    },\n    /**\n     * @zh 禁用的部分秒数选项\n     * @en Disabled partial seconds option\n     * */\n    disabledSeconds: {\n      type: Function as PropType<\n        (selectedHour?: number, selectedMinute?: number) => number[]\n      >,\n    },\n    /**\n     * @zh 隐藏禁止选择的选项\n     * @en Hide prohibited options\n     * */\n    hideDisabledOptions: {\n      type: Boolean,\n    },\n    /**\n     * @zh 禁用确认步骤，开启后直接点选时间不需要点击确认按钮\n     * @en Disable the confirmation step, click the time directly after opening, without clicking the confirmation button\n     * */\n    disableConfirm: {\n      type: Boolean,\n    },\n    /**\n     * @zh 弹出的位置\n     * @en Pop-up position\n     * */\n    position: {\n      type: String as PropType<'top' | 'tl' | 'tr' | 'bottom' | 'bl' | 'br'>,\n      default: 'bl',\n    },\n    /**\n     * @zh 控制弹出框打开或者关闭\n     * @en Control the pop-up box to open or close\n     * @vModel\n     */\n    popupVisible: {\n      type: Boolean,\n      default: undefined,\n    },\n    /**\n     * @zh 弹出框默认打开或者关闭\n     * @en The pop-up box is opened or closed by default\n     * */\n    defaultPopupVisible: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 可以传入 `Trigger` 组件的参数\n     * @en You can pass in the parameters of the `Trigger` component\n     * */\n    triggerProps: {\n      type: Object as PropType<TriggerProps>,\n    },\n    /**\n     * @zh 是否在关闭后销毁 dom 结构\n     * @en Whether to destroy the dom structure after closing\n     * */\n    unmountOnClose: {\n      type: Boolean,\n    },\n  },\n  emits: {\n    /**\n     * @zh 组件值发生改变\n     * @en The component value changes\n     * @param {string | Array<string | undefined> | undefined} timeString\n     * @param {date | Array<date | undefined> | undefined} time\n     */\n    'change': (\n      timeString: string | Array<string | undefined> | undefined,\n      time: Date | Array<Date | undefined> | undefined\n    ) => true,\n    'update:modelValue': (\n      timeString: string | Array<string | undefined> | undefined\n    ) => true,\n    /**\n     * @zh 选择时间但未触发组件值变化\n     * @en Select time but do not trigger component value change\n     * @param {string | Array<string | undefined>} timeString\n     * @param {Date | Array<Date | undefined>} time\n     */\n    'select': (\n      timeString: string | Array<string | undefined>,\n      time: Date | Array<Date | undefined>\n    ) => true,\n    /**\n     * @zh 点击清除按钮\n     * @en Click the clear button\n     * */\n    'clear': () => true,\n    /**\n     * @zh 弹出框展开和收起\n     * @en Pop-up box expand and collapse\n     * @param {boolean} visible\n     */\n    'popup-visible-change': (visible: boolean) => true,\n    'update:popupVisible': (visible: boolean) => true,\n  },\n  /**\n   * @zh 输入框前缀\n   * @en Input box prefix\n   * @slot prefix\n   * @version 2.41.0\n   */\n  /**\n   * @zh 输入框后缀图标\n   * @en Input box suffix icon\n   * @slot suffix-icon\n   */\n  /**\n   * @zh 额外的页脚\n   * @en Extra footer\n   * @slot extra\n   */\n  setup(props, { emit }) {\n    const {\n      type,\n      format,\n      use12Hours,\n      modelValue,\n      defaultValue,\n      popupVisible,\n      defaultPopupVisible,\n      disabled,\n      placeholder,\n      disableConfirm,\n      disabledHours,\n      disabledMinutes,\n      disabledSeconds,\n    } = toRefs(props);\n\n    const { mergedDisabled, eventHandlers } = useFormItem({ disabled });\n\n    const isRange = computed(() => type.value === 'time-range');\n    const prefixCls = getPrefixCls('timepicker');\n    const refInput = ref();\n\n    const { format: computedFormat, use12Hours: computedUse12Hours } =\n      useTimeFormat(\n        reactive({\n          format,\n          use12Hours,\n        })\n      );\n\n    const {\n      computedValue,\n      panelValue,\n      inputValue,\n      setValue,\n      setPanelValue,\n      setInputValue,\n    } = useTimeState(\n      reactive({\n        modelValue,\n        defaultValue,\n        isRange,\n        format: computedFormat,\n      })\n    );\n\n    // 选择面板是否可见\n    const [panelVisible, setLocalVisible] = useMergeState(\n      defaultPopupVisible.value,\n      reactive({ value: popupVisible })\n    );\n    const setPanelVisible = (newVisible: boolean) => {\n      if (newVisible !== panelVisible.value) {\n        setLocalVisible(newVisible);\n        emit('popup-visible-change', newVisible);\n        emit('update:popupVisible', newVisible);\n      }\n    };\n    const { t } = useI18n();\n\n    // 当前焦点所在的 input\n    const [focusedInputIndex, setFocusedInputIndex] = useState(0);\n\n    // placeholder\n    const computedPlaceholder = computed(() => {\n      const _placeholder = placeholder?.value;\n      // 单个\n      if (!isRange.value) {\n        return !isUndefined(_placeholder)\n          ? _placeholder\n          : t('datePicker.placeholder.time');\n      }\n      // 范围\n      if (isUndefined(_placeholder)) {\n        return t('datePicker.rangePlaceholder.time');\n      }\n      if (!isArray(_placeholder)) {\n        return [_placeholder, _placeholder];\n      }\n      return _placeholder;\n    });\n\n    const isDisabledTime = useIsDisabledTime(\n      reactive({\n        disabledHours,\n        disabledMinutes,\n        disabledSeconds,\n      })\n    );\n\n    function emitChange(value: Dayjs | Array<Dayjs | undefined> | undefined) {\n      if (isValueChange(value, computedValue.value)) {\n        const formattedValue = getFormattedValue(value, computedFormat.value);\n        const dateValue = getDateValue(value);\n        emit('update:modelValue', formattedValue);\n        emit('change', formattedValue, dateValue);\n        eventHandlers.value?.onChange?.();\n      }\n    }\n\n    function confirm(\n      value: Dayjs | Array<Dayjs | undefined> | undefined,\n      showPanel: boolean\n    ) {\n      if (isDisabledTime(value)) return;\n\n      let newValue = value;\n\n      if (isArray(value)) {\n        const now = dayjs();\n        newValue = value.map((item) => {\n          if (item) {\n            item = item.year(now.year());\n            item = item.month(now.month());\n            item = item.date(now.date());\n          }\n          return item;\n        });\n        if (isValidRangeValue(newValue)) {\n          newValue = getSortedDayjsArray(newValue as Dayjs[]);\n        }\n        if (newValue?.length === 0) {\n          newValue = undefined;\n        }\n      }\n\n      emitChange(newValue);\n      setValue(newValue);\n\n      if (showPanel !== panelVisible.value) {\n        setPanelVisible(showPanel);\n      }\n    }\n\n    function select(\n      value: Dayjs | Array<Dayjs | undefined>,\n      showPanel: boolean\n    ) {\n      setPanelValue(value);\n\n      if (showPanel !== panelVisible.value) {\n        setPanelVisible(showPanel);\n      }\n    }\n\n    function focusInput(index?: number) {\n      refInput.value && refInput.value.focus && refInput.value.focus(index);\n    }\n\n    function onPanelVisibleChange(newVisible: boolean) {\n      if (mergedDisabled.value) return;\n      setPanelVisible(newVisible);\n\n      if (newVisible) {\n        nextTick(() => {\n          focusInput(focusedInputIndex.value);\n        });\n      }\n    }\n\n    function onPanelSelect(value: Dayjs | Array<Dayjs | undefined>) {\n      // 先触发 select 事件\n      const formattedValue = getFormattedValue(value, computedFormat.value);\n      const dateValue = getDateValue(value);\n      emit('select', formattedValue as any, dateValue);\n\n      if (\n        disableConfirm.value &&\n        (!isRange.value || isValidRangeValue(value))\n      ) {\n        confirm(value, true);\n      } else {\n        select(value, true);\n        setInputValue(undefined);\n      }\n    }\n\n    function onPanelConfirm(value: Dayjs | Dayjs[]) {\n      confirm(value, false);\n    }\n\n    function onInputPressEnter() {\n      confirm(panelValue.value || computedValue.value, false);\n    }\n\n    function onRangeInputPressEnter() {\n      if (isValidRangeValue(panelValue.value)) {\n        confirm(panelValue.value, false);\n      } else {\n        const newFocusedInputIndex = (focusedInputIndex.value + 1) % 2;\n        setFocusedInputIndex(newFocusedInputIndex);\n        focusInput(newFocusedInputIndex);\n      }\n    }\n\n    function onInputChange(e: any) {\n      setPanelVisible(true);\n\n      const targetValue = e.target.value;\n      setInputValue(targetValue);\n\n      if (!isValidInputValue(targetValue, computedFormat.value)) return;\n\n      const newValue = dayjs(targetValue, computedFormat.value);\n\n      if (isDisabledTime(newValue)) return;\n\n      if (disableConfirm.value) {\n        confirm(newValue, true);\n      } else {\n        select(newValue, true);\n      }\n    }\n\n    function onRangeInputChange(e: any) {\n      setPanelVisible(true);\n\n      const targetValue = e.target.value;\n      const newInputValue = isArray(inputValue.value)\n        ? [...inputValue.value]\n        : (isArray(panelValue.value) &&\n            (getFormattedValue(panelValue.value, computedFormat.value) as Array<\n              string | undefined\n            >)) ||\n          [];\n      newInputValue[focusedInputIndex.value] = targetValue;\n\n      setInputValue(newInputValue);\n\n      if (!isValidInputValue(targetValue, computedFormat.value)) return;\n\n      const targetValueDayjs = dayjs(targetValue, computedFormat.value);\n\n      if (isDisabledTime(targetValueDayjs)) return;\n\n      const newValue = isArray(panelValue.value) ? [...panelValue.value] : [];\n      newValue[focusedInputIndex.value] = targetValueDayjs;\n\n      if (disableConfirm.value && isValidRangeValue(newValue)) {\n        confirm(newValue, true);\n      } else {\n        select(newValue, true);\n      }\n    }\n\n    function onClear(e: Event) {\n      e.stopPropagation();\n      setPanelValue(undefined);\n      confirm(undefined, isRange.value);\n    }\n\n    // 1. 每次打开关闭重新赋值 panelValue\n    watch(panelVisible, (curVal, preVal) => {\n      if (curVal !== preVal) {\n        setPanelValue(computedValue.value);\n      }\n      if (!curVal) {\n        setInputValue(undefined);\n      }\n    });\n\n    const inputProps = computed(() => {\n      if (isRange.value) {\n        return {\n          focusedIndex: focusedInputIndex.value,\n          onFocusedIndexChange: (index: number) => {\n            setFocusedInputIndex(index);\n          },\n          onChange: onRangeInputChange,\n          onPressEnter: onRangeInputPressEnter,\n        };\n      }\n      return {\n        onChange: onInputChange,\n        onPressEnter: onInputPressEnter,\n      };\n    });\n\n    const panelProps = computed(() => {\n      if (isRange.value) {\n        return {\n          displayIndex: focusedInputIndex.value,\n          onDisplayIndexChange: (index: number) => {\n            setFocusedInputIndex(index);\n            focusInput(index);\n          },\n        };\n      }\n      return {};\n    });\n\n    return {\n      refInput,\n      isRange,\n      prefixCls,\n      panelVisible,\n      focusedInputIndex,\n      computedPlaceholder,\n      panelValue,\n      inputValue,\n      computedFormat,\n      computedUse12Hours,\n      inputProps,\n      panelProps,\n      mergedDisabled,\n      onPanelVisibleChange: onPanelVisibleChange as any,\n      onInputClear: onClear,\n      onPanelSelect,\n      onPanelConfirm,\n      onPanelClick: () => {\n        focusInput(focusedInputIndex.value);\n      },\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/time-picker/utils/index.ts",
    "content": "import BTween from 'b-tween';\nimport { Dayjs } from 'dayjs';\nimport { dayjs } from '../../_utils/date';\nimport { isArray, isUndefined, isDayjs } from '../../_utils/is';\nimport { TimePickerProps } from '../interface';\n\nexport function getColumnsFromFormat(format: string) {\n  const units = ['H', 'h', 'm', 's', 'a', 'A'];\n  const list: string[] = [];\n  let use12Hours = false;\n  units.forEach((unit) => {\n    if (format.indexOf(unit) !== -1) {\n      list.push(unit);\n      if (unit === 'a' || unit === 'A') {\n        use12Hours = true;\n      }\n    }\n  });\n  return {\n    list,\n    use12Hours,\n  };\n}\n\nconst scrollIds = new Map<HTMLElement, number>();\n\nexport function scrollTo(element: HTMLElement, to: number, duration: number) {\n  const scrollId = scrollIds.get(element);\n  if (!isUndefined(scrollId)) {\n    cancelAnimationFrame(scrollId);\n  }\n\n  if (duration <= 0) {\n    element.scrollTop = to;\n  }\n\n  scrollIds.set(\n    element,\n    requestAnimationFrame(() => {\n      const tween = new BTween({\n        from: { scrollTop: element.scrollTop },\n        to: { scrollTop: to },\n        duration,\n        onUpdate: (keys: { scrollTop: number }) => {\n          element.scrollTop = keys.scrollTop;\n        },\n      });\n      tween.start();\n    })\n  );\n}\n\nexport function getFormattedValue(time: Dayjs, format: string): string;\nexport function getFormattedValue(\n  time: Dayjs | undefined,\n  format: string\n): string | undefined;\nexport function getFormattedValue(\n  time: Array<Dayjs | undefined> | undefined,\n  format: string\n): Array<string | undefined> | undefined;\nexport function getFormattedValue(\n  time: Dayjs | Array<Dayjs | undefined> | undefined,\n  format: string\n): string | Array<string | undefined> | undefined {\n  const formatValue = (time: any): any => {\n    if (isArray(time)) {\n      return time.map((t) => formatValue(t));\n    }\n\n    if (isUndefined(time)) return undefined;\n\n    return time.format(format);\n  };\n\n  return formatValue(time);\n}\n\nexport function isValidRangeValue(value: any): value is undefined | Dayjs[] {\n  if (isUndefined(value)) return true;\n  if (!isArray(value)) return false;\n  return (\n    value.length === 0 ||\n    (value.length === 2 && isDayjs(value[0]) && isDayjs(value[1]))\n  );\n}\n\nexport function isValidInputValue(time: string, format: string): boolean {\n  if (!time) return false;\n\n  return (\n    typeof time === 'string' && dayjs(time, format).format(format) === time\n  );\n}\n\nexport function isDisabledTime(\n  value: Dayjs | undefined,\n  {\n    disabledHours,\n    disabledMinutes,\n    disabledSeconds,\n  }: {\n    disabledHours: TimePickerProps['disabledHours'];\n    disabledMinutes: TimePickerProps['disabledMinutes'];\n    disabledSeconds: TimePickerProps['disabledSeconds'];\n  }\n) {\n  if (!value) return false;\n\n  const hour = value.hour();\n  const minute = value.minute();\n  const second = value.second();\n\n  const disabledHourList = disabledHours?.() || [];\n  const disabledMinuteList = disabledMinutes?.(hour) || [];\n  const disabledSecondList = disabledSeconds?.(hour, minute) || [];\n\n  const isDisabledItem = (num: number | undefined, disabledList: number[]) => {\n    return !isUndefined(num) && disabledList.includes(num);\n  };\n\n  return (\n    isDisabledItem(hour, disabledHourList) ||\n    isDisabledItem(minute, disabledMinuteList) ||\n    isDisabledItem(second, disabledSecondList)\n  );\n}\n"
  },
  {
    "path": "packages/web-vue/components/timeline/CHANGELOG.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.50.0\n\n`2023-08-11`\n\n### 🆕 Feature\n\n- add label slot ([#2591](https://github.com/arco-design/arco-design-vue/pull/2591))\n\n\n## 2.34.0\n\n`2022-07-29`\n\n### 🐛 BugFix\n\n- Fixed an issue where the timeline was incorrectly calculated when using v-if ([#1467](https://github.com/arco-design/arco-design-vue/pull/1467))\n\n\n## 2.34.0\n\n`2022-07-29`\n\n### 🐛 BugFix\n\n- Fixed an issue where the timeline was incorrectly calculated when using v-if ([#1467](https://github.com/arco-design/arco-design-vue/pull/1467))\n\n"
  },
  {
    "path": "packages/web-vue/components/timeline/CHANGELOG.zh-CN.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.50.0\n\n`2023-08-11`\n\n### 🆕 新增功能\n\n- 添加自定义标签插槽 ([#2591](https://github.com/arco-design/arco-design-vue/pull/2591))\n\n\n## 2.34.0\n\n`2022-07-29`\n\n### 🐛 问题修复\n\n- 修复时间线使用 v-if 时计算错误的问题 ([#1467](https://github.com/arco-design/arco-design-vue/pull/1467))\n\n\n## 2.34.0\n\n`2022-07-29`\n\n### 🐛 问题修复\n\n- 修复时间线使用 v-if 时计算错误的问题 ([#1467](https://github.com/arco-design/arco-design-vue/pull/1467))\n\n"
  },
  {
    "path": "packages/web-vue/components/timeline/README.en-US.md",
    "content": "```yaml\nmeta:\n  type: Component\n  category: Data Display\ntitle: Timeline\ndescription: Display information content in chronological or reverse order.\n```\n\n*Auto translate by google.*\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/icon.md\n\n@import ./__demo__/dot.md\n\n@import ./__demo__/type.md\n\n@import ./__demo__/pending.md\n\n@import ./__demo__/mode.md\n\n@import ./__demo__/vertical.md\n\n@import ./__demo__/direction.md\n\n@import ./__demo__/label.md\n\n@import ./__demo__/custom.md\n\n## API\n\n\n### `<timeline>` Props\n\n|Attribute|Description|Type|Default|\n|---|---|---|:---:|\n|reverse|Whether reverse order|`boolean`|`false`|\n|direction|Timeline direction|`'horizontal' \\| 'vertical'`|`'vertical'`|\n|mode|The display mode of Timeline|`'left' \\| 'right' \\| 'top' \\| 'bottom' \\| 'alternate'`|`'left'`|\n|pending|Whether to display ghost nodes. When set to true, only ghost nodes are displayed. When passed to ReactNode, it will be displayed as node content|`boolean\\|string`|`-`|\n|label-position|Position of label text|`'relative' \\| 'same'`|`'same'`|\n### `<timeline>` Slots\n\n|Slot Name|Description|Parameters|\n|---|---|---|\n|dot|Custom dot|-|\n\n\n\n\n### `<timeline-item>` Props\n\n|Attribute|Description|Type|Default|\n|---|---|---|:---:|\n|dot-color|Dot color|`string`|`-`|\n|dot-type|Dot type|`'hollow' \\| 'solid'`|`'solid'`|\n|line-type|Line type|`'solid' \\| 'dashed' \\| 'dotted'`|`'solid'`|\n|line-color|Line Color|`string`|`-`|\n|label|Label text|`string`|`-`|\n|position|Item position|`PositionType`|`-`|\n### `<timeline-item>` Slots\n\n|Slot Name|Description|Parameters|version|\n|---|---|---|:---|\n|dot|Custom dot|-||\n|label|Custom label|-|2.50.0|\n\n\n"
  },
  {
    "path": "packages/web-vue/components/timeline/README.zh-CN.md",
    "content": "```yaml\nmeta:\n  type: 组件\n  category: 数据展示\ntitle: 时间轴 Timeline\ndescription: 按照时间顺序或倒序规则的展示信息内容。\n```\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/icon.md\n\n@import ./__demo__/dot.md\n\n@import ./__demo__/type.md\n\n@import ./__demo__/pending.md\n\n@import ./__demo__/mode.md\n\n@import ./__demo__/vertical.md\n\n@import ./__demo__/direction.md\n\n@import ./__demo__/label.md\n\n@import ./__demo__/custom.md\n\n## API\n\n\n### `<timeline>` Props\n\n|参数名|描述|类型|默认值|\n|---|---|---|:---:|\n|reverse|是否倒序|`boolean`|`false`|\n|direction|时间轴方向|`'horizontal' \\| 'vertical'`|`'vertical'`|\n|mode|时间轴的展示类型：时间轴在左侧，时间轴在右侧, 交替出现。|`'left' \\| 'right' \\| 'top' \\| 'bottom' \\| 'alternate'`|`'left'`|\n|pending|是否展示幽灵节点，设置为 true 时候只展示幽灵节点。传入ReactNode时，会作为节点内容展示。|`boolean\\|string`|`-`|\n|label-position|设置标签文本的位置|`'relative' \\| 'same'`|`'same'`|\n### `<timeline>` Slots\n\n|插槽名|描述|参数|\n|---|:---:|---|\n|dot|幽灵节点|-|\n\n\n\n\n### `<timeline-item>` Props\n\n|参数名|描述|类型|默认值|\n|---|---|---|:---:|\n|dot-color|节点颜色|`string`|`-`|\n|dot-type|节点类型：空心圆/实心圆|`'hollow' \\| 'solid'`|`'solid'`|\n|line-type|时间轴类型：实线/虚线/点状线|`'solid' \\| 'dashed' \\| 'dotted'`|`'solid'`|\n|line-color|时间轴颜色|`string`|`-`|\n|label|标签文本|`string`|`-`|\n|position|Item 位置|`PositionType`|`-`|\n### `<timeline-item>` Slots\n\n|插槽名|描述|参数|版本|\n|---|:---:|---|:---|\n|dot|自定义节点|-||\n|label|自定义标签|-|2.50.0|\n\n\n"
  },
  {
    "path": "packages/web-vue/components/timeline/TEMPLATE.md",
    "content": "## zh-CN\n```yaml\nmeta:\n  type: 组件\n  category: 数据展示\ntitle: 时间轴 Timeline\ndescription: 按照时间顺序或倒序规则的展示信息内容。\n```\n---\n## en-US\n```yaml\nmeta:\n  type: Component\n  category: Data Display\ntitle: Timeline\ndescription: Display information content in chronological or reverse order.\n```\n---\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/icon.md\n\n@import ./__demo__/dot.md\n\n@import ./__demo__/type.md\n\n@import ./__demo__/pending.md\n\n@import ./__demo__/mode.md\n\n@import ./__demo__/vertical.md\n\n@import ./__demo__/direction.md\n\n@import ./__demo__/label.md\n\n@import ./__demo__/custom.md\n\n## API\n\n%%API(timeline.tsx)%%\n\n%%API(item.vue)%%\n"
  },
  {
    "path": "packages/web-vue/components/timeline/__demo__/basic.md",
    "content": "```yaml\ntitle:\n  zh-CN: 基本用法\n  en-US: Basic Usage\n```\n\n## zh-CN\n\n基本使用\n\n---\n\n## en-US\n\nBasic usage\n\n---\n\n```vue\n<template>\n  <div :style=\"{ marginBottom: '40px' }\">\n    <a-typography-text :style=\"{ verticalAlign: 'middle', marginRight: '8px' }\">\n      Reverse\n    </a-typography-text>\n    <a-radio-group\n      @change=\"onChange\"\n      style=\"{ marginBottom: '30px' }\"\n      :modelValue=\"isReverse\"\n    >\n      <a-radio :value=\"false\">No Reverse</a-radio>\n      <a-radio :value=\"true\">Reverse</a-radio>\n    </a-radio-group>\n  </div>\n  <a-timeline :reverse=\"isReverse\">\n    <a-timeline-item label=\"2017-03-10\">The first milestone</a-timeline-item>\n    <a-timeline-item label=\"2018-05-12\">The second milestone</a-timeline-item>\n    <a-timeline-item label=\"2020-09-30\">The third milestone</a-timeline-item>\n  </a-timeline>\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n  setup() {\n    const isReverse = ref(false);\n\n    const onChange = (bool) => {\n      isReverse.value = bool;\n    };\n\n    return {\n      isReverse,\n      onChange\n    }\n  },\n};\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/timeline/__demo__/custom.md",
    "content": "```yaml\ntitle:\n  zh-CN: 自定义标签\n  en-US: Custom Label\n```\n\n## zh-CN\n\n可以通过 `label` 插槽自定义标签\n\n---\n\n## en-US\n\nYou can customize labels through the 'label' slot\n\n---\n\n```vue\n<template>\n  <a-timeline>\n    <a-timeline-item>\n      Code Review\n      <template #label>\n        <a-tag>\n          <template #icon>\n            <icon-check-circle-fill />\n          </template>\n          Passed\n        </a-tag>\n      </template>\n    </a-timeline-item>\n  </a-timeline>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/timeline/__demo__/direction.md",
    "content": "```yaml\ntitle:\n  zh-CN: 横向时间轴\n  en-US: Direction\n```\n\n## zh-CN\n\n可以通过 `direction` 设置展示横向时间轴\n\n---\n\n## en-US\n\nYou can set the display horizontal timeline through `direction`\n\n---\n\n```vue\n<template>\n  <div>\n    <a-row align=\"center\" :style=\"{ marginBottom: '24px' }\">\n      <a-typography-text>mode: &nbsp; &nbsp;</a-typography-text>\n      <a-radio-group @change=\"onChange\" :modelValue=\"mode\">\n        <a-radio value=\"top\">top</a-radio>\n        <a-radio value=\"bottom\">bottom</a-radio>\n        <a-radio value=\"alternate\">alternate</a-radio>\n      </a-radio-group>\n    </a-row>\n    <a-timeline direction=\"horizontal\" pending :mode=\"mode\">\n      <a-timeline-item label=\"2012-08\">\n        <a-row :style=\"{ display: 'inline-flex', alignItems: 'center' }\">\n          <img\n            width=\"40\"\n            :style=\"{ marginRight: '16px', marginBottom: '12px' }\"\n            src=\"https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/b5d834b83708a269b4562924436eac48.png~tplv-uwbnlip3yd-png.png\"\n          />\n          <div :style=\"{ marginBottom: '12px' }\">\n            Toutiao\n            <div :style=\"{ fontSize: '12px', color: '#4E5969' }\">\n              Founded in 2012\n            </div>\n          </div>\n        </a-row>\n      </a-timeline-item>\n      <a-timeline-item label=\"2017-05\">\n        <a-row :style=\"{ display: 'inline-flex', alignItems: 'center' }\">\n          <img\n            width=\"40\"\n            :style=\"{ marginRight: '16px', marginBottom: '12px' }\"\n            src=\"https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/385ed540c359ec8a9b9ce2b5fe89b098.png~tplv-uwbnlip3yd-png.png\"\n          />\n          <div :style=\"{ marginBottom: '12px' }\">\n            Xigua Video\n            <div :style=\"{ fontSize: '12px', color: '#4E5969' }\">\n              Founded in 2017\n            </div>\n          </div>\n        </a-row>\n      </a-timeline-item>\n      <a-timeline-item label=\"2018-07\">\n        <a-row :style=\"{ display: 'inline-flex', alignItems: 'center' }\">\n          <img\n            width=\"40\"\n            :style=\"{ marginRight: '16px', marginBottom: '12px' }\"\n            src=\"https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/385ed540c359ec8a9b9ce2b5fe89b098.png~tplv-uwbnlip3yd-png.png\"\n          />\n          <div :style=\"{ marginBottom: '12px' }\">\n            Pipidance\n            <div :style=\"{ fontSize: '12px', color: '#4E5969' }\">\n              Founded in 2018\n            </div>\n          </div>\n        </a-row>\n      </a-timeline-item>\n    </a-timeline>\n  </div>\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n  setup() {\n    const mode = ref('top');\n\n    const onChange = (_mode) => {\n      mode.value = _mode;\n    };\n\n    return {\n      mode,\n      onChange\n    }\n  },\n};\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/timeline/__demo__/dot.md",
    "content": "```yaml\ntitle:\n  zh-CN: 自定义节点\n  en-US: Dot\n```\n\n## zh-CN\n\n可以通过属性 `dotColor`, `dotType` 设置节点的颜色以及节点类型。同时可通过 `dot` 直接传入 DOM 自定义节点样式。优先级高于 `dotColor` 和 `dotType`\n\n---\n\n## en-US\n\nThe color and type of the node can be set through the attributes `dotColor`, `dotType`. At the same time, you can directly pass in DOM node to customize node styles through `slot#dot`. Priority is higher than `dotColor` and `dotType`\n\n---\n\n```vue\n<template>\n  <div :style=\"{ display: 'flex' }\">\n    <a-timeline :style=\"{ marginRight: '40px' }\">\n      <a-timeline-item label=\"2020-04-12\" dotColor=\"#00B42A\">\n        The first milestone\n      </a-timeline-item>\n      <a-timeline-item label=\"2020-05-17\">\n        The second milestone\n      </a-timeline-item>\n      <a-timeline-item label=\"2020-06-22\">\n        <template #dot>\n          <IconClockCircle :style=\"{ fontSize: '12px', color: '#F53F3F' }\" />\n        </template>\n        The third milestone\n      </a-timeline-item>\n      <a-timeline-item label=\"2020-06-22\" dotColor=\"var(--color-fill-4)\">\n        The third milestone\n      </a-timeline-item>\n    </a-timeline>\n\n    <a-timeline :style=\"{ marginRight: '40px' }\">\n      <a-timeline-item label=\"2020-04-12\">\n        <template #dot>\n          <IconCheck\n            :style=\"{\n              fontSize: '12px',\n              padding: '2px',\n              boxSizing: 'border-box',\n              borderRadius: '50%',\n              backgroundColor: 'var(--color-primary-light-1)',\n            }\"\n          />\n        </template>\n        The first milestone\n      </a-timeline-item>\n      <a-timeline-item label=\"2020-05-17\">\n        <template #dot>\n          <IconCheck\n            :style=\"{\n              fontSize: '12px',\n              padding: '2px',\n              boxSizing: 'border-box',\n              borderRadius: '50%',\n              backgroundColor: 'var(--color-primary-light-1)',\n            }\"\n          />\n        </template>\n      </a-timeline-item>\n      <a-timeline-item label=\"2020-06-22\">The third milestone</a-timeline-item>\n      <a-timeline-item label=\"2020-06-22\" dotColor=\"var(--color-fill-4)\">\n        The third milestone\n      </a-timeline-item>\n    </a-timeline>\n\n    <a-timeline>\n      <a-timeline-item label=\"2020-04-12\">The first milestone</a-timeline-item>\n      <a-timeline-item label=\"2020-05-17\" dotColor=\"var(--color-fill-4)\">\n        The second milestone\n      </a-timeline-item>\n      <a-timeline-item label=\"2020-06-22\" dotColor=\"var(--color-fill-4)\">\n        The third milestone\n      </a-timeline-item>\n    </a-timeline>\n  </div>\n</template>\n\n<script>\nimport { IconCheck } from '@arco-design/web-vue/es/icon';\n\nexport default {\n  components: { IconCheck },\n};\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/timeline/__demo__/icon.md",
    "content": "```yaml\ntitle:\n  zh-CN: 自定义节点内容\n  en-US: Icon\n```\n\n## zh-CN\n\n自定义节点内容\n\n---\n\n## en-US\n\nCustom node content\n\n---\n\n```vue\n<template>\n  <a-timeline>\n    <a-timeline-item label=\"2017-03-10\" dotColor=\"#00B42A\">\n      The first milestone\n    </a-timeline-item>\n    <a-timeline-item label=\"2018-05-22\">The second milestone</a-timeline-item>\n    <a-timeline-item label=\"2020-06-22\" dotColor=\"#F53F3F\">\n      The third milestone\n      <IconExclamationCircleFill\n        :style=\"{ color: 'F53F3F', fontSize: '12px', marginLeft: '4px' }\"\n      />\n    </a-timeline-item>\n    <a-timeline-item label=\"2020-09-30\" dotColor=\"#C9CDD4\">\n      The fourth milestone\n    </a-timeline-item>\n  </a-timeline>\n</template>\n\n<script>\nimport { IconExclamationCircleFill } from '@arco-design/web-vue/es/icon';\n\nexport default {\n  components: { IconExclamationCircleFill },\n};\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/timeline/__demo__/label.md",
    "content": "```yaml\ntitle:\n  zh-CN: 标签文本位置\n  en-US: Label Position\n```\n\n## zh-CN\n\n通过 `labelPosition` 可以设置标签文本的位置。\n\n---\n\n## en-US\n\nThe position of the label text can be set by `labelPosition`.\n\n---\n\n```vue\n<template>\n  <div>\n    <a-row align=\"center\">\n      <a-typography-text>labelPosition: &nbsp; &nbsp;</a-typography-text>\n      <a-radio-group @change=\"onLabelPositionChange\" :modelValue=\"pos\">\n        <a-radio value=\"same\">same</a-radio>\n        <a-radio value=\"relative\">relative</a-radio>\n      </a-radio-group>\n    </a-row>\n    <a-row align=\"center\" :style=\"{ margin: '20px 0px 24px' }\">\n      <a-typography-text>mode: &nbsp; &nbsp;</a-typography-text>\n      <a-radio-group @change=\"onModeChange\" :modelValue=\"mode\">\n        <a-radio value=\"left\">left</a-radio>\n        <a-radio value=\"right\">right</a-radio>\n        <a-radio value=\"alternate\">alternate</a-radio>\n      </a-radio-group>\n    </a-row>\n    <a-timeline :mode=\"mode\" :labelPosition=\"pos\">\n      <a-timeline-item label=\"2017-03-10\" dotColor=\"#52C419\">\n        The first milestone\n      </a-timeline-item>\n      <a-timeline-item\n        label=\"2018-05-12\"\n        dotColor=\"#F5222D\"\n        labelPosition=\"same\"\n      >\n        The second milestone\n      </a-timeline-item>\n      <a-timeline-item label=\"2020-09-30\" position=\"bottom\">\n        The third milestone\n      </a-timeline-item>\n    </a-timeline>\n  </div>\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n  setup() {\n    const mode = ref('left');\n    const pos = ref('same');\n\n    const onLabelPositionChange = (_pos) => {\n      pos.value = _pos;\n    };\n\n    const onModeChange = (_mode) => {\n      mode.value = _mode;\n    };\n\n    return {\n      mode,\n      pos,\n      onLabelPositionChange,\n      onModeChange\n    }\n  },\n};\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/timeline/__demo__/mode.md",
    "content": "```yaml\ntitle:\n  zh-CN: 时间轴展示类型\n  en-US: Mode\n```\n\n## zh-CN\n\n设置 `mode=alternate`时将会交替展示内容。同时可以通过设置 `TimelineItem` 的 `positon`属性控制时间轴节点的位置.\n\n---\n\n## en-US\n\nThe content will be displayed alternately when `mode=alternate` is set. At the same time, you can control the position of the timeline node by setting the positon property of TimelineItem.\n\n---\n\n```vue\n<template>\n  <a-row justify=\"space-between\">\n    <a-timeline mode=\"alternate\" :style=\"{ flex: 1 }\">\n      <a-timeline-item label=\"2017-03-10\">The first milestone</a-timeline-item>\n      <a-timeline-item label=\"2018-05-12\">The second milestone</a-timeline-item>\n      <a-timeline-item label=\"2020-09-30\" position=\"bottom\">\n        The third milestone\n      </a-timeline-item>\n    </a-timeline>\n    <a-timeline mode=\"right\" :style=\"{ flex: 1 }\">\n      <a-timeline-item label=\"2017-03-10\">The first milestone</a-timeline-item>\n      <a-timeline-item label=\"2018-05-12\">The second milestone</a-timeline-item>\n      <a-timeline-item label=\"2020-09-30\" position=\"bottom\">\n        The third milestone\n      </a-timeline-item>\n    </a-timeline>\n  </a-row>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/timeline/__demo__/pending.md",
    "content": "```yaml\ntitle:\n  zh-CN: 幽灵节点\n  en-US: Pending\n```\n\n## zh-CN\n\n当任务状态正在发生，还在记录过程中，可用幽灵节点来表示当前的时间节点，通过`slot#pending-dot`定制其轴点。\n\n---\n\n## en-US\n\nWhen the task state is happening and the recording is still in progress, ghost nodes can be used to represent the current time node, and its pivot point can be customized through `slot#pending-dot`.\n\n---\n\n```vue\n\n<template>\n  <a-row align=\"center\" :style=\"{ marginBottom: '24px' }\">\n    <a-checkbox\n      :checked=\"!!pendingProps.direction\"\n      @change=\"(v) => onChange({ direction: v ? 'horizontal' : '' })\"\n    >\n      horizontal &nbsp; &nbsp;\n    </a-checkbox>\n    <a-checkbox\n      :checked=\"!!pendingProps.reverse\"\n      @change=\"(v) => onChange({ reverse: v })\"\n    >\n      reverse &nbsp; &nbsp;\n    </a-checkbox>\n    <a-checkbox\n      :checked=\"!!pendingProps.pending\"\n      @change=\"\n        (v) => onChange({ pending: v ? 'This is a pending dot' : false })\n      \"\n    >\n      pending &nbsp; &nbsp;\n    </a-checkbox>\n\n    <a-checkbox\n      :checked=\"!!pendingProps.hasPendingDot\"\n      @change=\"(v) => onChange({ hasPendingDot: v })\"\n    >\n      custom pendingDot\n    </a-checkbox>\n  </a-row>\n  <a-timeline v-bind=\"pendingProps\">\n    <template v-if=\"pendingProps.hasPendingDot\" #dot>\n      <IconFire :style=\"{ color: '#e70a0a' }\" />\n    </template>\n    <a-timeline-item label=\"2017-03-10\" dotColor=\"#52C419\">\n      The first milestone\n    </a-timeline-item>\n    <a-timeline-item label=\"2018-05-12\" dotColor=\"#F5222D\">\n      The second milestone\n    </a-timeline-item>\n    <a-timeline-item label=\"2020-09-30\">The third milestone</a-timeline-item>\n  </a-timeline>\n</template>\n\n<script>\nimport { ref } from 'vue';\nimport { IconFire } from '@arco-design/web-vue/es/icon';\n\nexport default {\n  components: {\n    IconFire,\n  },\n  setup() {\n    const pendingProps = ref({});\n\n    const onChange = (newProps) => {\n      pendingProps.value = {\n        ...pendingProps.value,\n        ...newProps,\n      };\n    };\n\n    return {\n      pendingProps,\n      onChange\n    }\n  },\n};\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/timeline/__demo__/type.md",
    "content": "```yaml\ntitle:\n  zh-CN: 自定义轴线样式\n  en-US: Type\n```\n\n## zh-CN\n\n自定义轴线的示例。\n\n---\n\n## en-US\n\nExample of custom axis.\n\n---\n\n```vue\n<template>\n  <a-timeline>\n    <a-timeline-item label=\"2017-03-10\" lineType=\"dashed\">\n      The first milestone\n      <br />\n      <a-typography-text\n        type=\"secondary\"\n        :style=\"{ fontSize: '12px', marginTop: '4px' }\"\n      >\n        This is a descriptive message\n      </a-typography-text>\n    </a-timeline-item>\n    <a-timeline-item label=\"2018-05-12\" lineType=\"dashed\">\n      The second milestone\n      <br />\n      <a-typography-text\n        type=\"secondary\"\n        :style=\"{ fontSize: '12px', marginTop: '4px' }\"\n      >\n        This is a descriptive message\n      </a-typography-text>\n    </a-timeline-item>\n    <a-timeline-item label=\"2020-09-30\" lineType=\"dashed\">\n      The third milestone\n      <br />\n      <a-typography-text\n        type=\"secondary\"\n        :style=\"{ fontSize: '12px', marginTop: '4px' }\"\n      >\n        This is a descriptive message\n      </a-typography-text>\n    </a-timeline-item>\n  </a-timeline>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/timeline/__demo__/vertical.md",
    "content": "```yaml\ntitle:\n  zh-CN: 纵向时间轴\n  en-US: Vertical\n```\n\n## zh-CN\n\n竖直方向的时间轴。\n\n---\n\n## en-US\n\nThe vertical time axis.\n\n---\n\n```vue\n<template>\n  <div>\n    <a-row align=\"center\" :style=\"{ marginBottom: '24px' }\">\n      <a-typography-text>mode: &nbsp; &nbsp;</a-typography-text>\n      <a-radio-group @change=\"onChange\" :modelValue=\"mode\">\n        <a-radio value=\"left\">left</a-radio>\n        <a-radio value=\"right\">right</a-radio>\n        <a-radio value=\"alternate\">alternate</a-radio>\n      </a-radio-group>\n    </a-row>\n    <a-timeline :mode=\"mode\" labelPosition=\"relative\">\n      <a-timeline-item label=\"2012-08\">\n        <a-row :style=\"{ display: 'inline-flex', alignItems: 'center' }\">\n          <img\n            width=\"40\"\n            :style=\"{ marginRight: '16px', marginBottom: '12px' }\"\n            src=\"https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/b5d834b83708a269b4562924436eac48.png~tplv-uwbnlip3yd-png.png\"\n          />\n          <div :style=\"{ marginBottom: '12px' }\">\n            Toutiao\n            <div :style=\"{ fontSize: '12px', color: '#4E5969' }\">\n              Founded in 2012\n            </div>\n          </div>\n        </a-row>\n      </a-timeline-item>\n      <a-timeline-item label=\"2017-05\">\n        <a-row :style=\"{ display: 'inline-flex', alignItems: 'center' }\">\n          <img\n            width=\"40\"\n            :style=\"{ marginRight: '16px', marginBottom: '12px' }\"\n            src=\"https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/385ed540c359ec8a9b9ce2b5fe89b098.png~tplv-uwbnlip3yd-png.png\"\n          />\n          <div :style=\"{ marginBottom: '12px' }\">\n            Xigua Video\n            <div :style=\"{ fontSize: '12px', color: '#4E5969' }\">\n              Founded in 2017\n            </div>\n          </div>\n        </a-row>\n      </a-timeline-item>\n      <a-timeline-item label=\"2018-07\">\n        <a-row :style=\"{ display: 'inline-flex', alignItems: 'center' }\">\n          <img\n            width=\"40\"\n            :style=\"{ marginRight: '16px', marginBottom: '12px' }\"\n            src=\"https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/385ed540c359ec8a9b9ce2b5fe89b098.png~tplv-uwbnlip3yd-png.png\"\n          />\n          <div :style=\"{ marginBottom: '12px' }\">\n            Pipidance\n            <div :style=\"{ fontSize: '12px', color: '#4E5969' }\">\n              Founded in 2018\n            </div>\n          </div>\n        </a-row>\n      </a-timeline-item>\n    </a-timeline>\n  </div>\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n  setup() {\n    const mode = ref('left');\n\n    const onChange = (_mode) => {\n      mode.value = _mode;\n    };\n\n    return {\n      mode,\n      onChange\n    }\n  },\n};\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/timeline/__test__/__snapshots__/demo.test.ts.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`<timeline> demo: render [basic] correctly 1`] = `\n\"<div style=\\\\\"margin-bottom: 40px;\\\\\"><span class=\\\\\"arco-typography\\\\\" style=\\\\\"vertical-align: middle; margin-right: 8px;\\\\\"> Reverse <!----><!--v-if--><!--v-if--><!--v-if--></span><span class=\\\\\"arco-radio-group arco-radio-group-size-medium arco-radio-group-direction-horizontal\\\\\"><label class=\\\\\"arco-radio arco-radio-checked\\\\\"><input type=\\\\\"radio\\\\\" checked=\\\\\"\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-icon-hover-disabled arco-radio-icon-hover\\\\\"><span class=\\\\\"arco-radio-icon\\\\\"></span></span><span class=\\\\\"arco-radio-label\\\\\">No Reverse</span></label><label class=\\\\\"arco-radio\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"true\\\\\"><span class=\\\\\"arco-icon-hover arco-radio-icon-hover\\\\\"><span class=\\\\\"arco-radio-icon\\\\\"></span></span><span class=\\\\\"arco-radio-label\\\\\">Reverse</span></label></span></div>\n<div role=\\\\\"list\\\\\" class=\\\\\"arco-timeline arco-timeline-left arco-timeline-direction-vertical\\\\\">\n  <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-timeline-item arco-timeline-item-vertical-left arco-timeline-item-label-same arco-timeline-item-last\\\\\">\n    <div class=\\\\\"arco-timeline-item-dot-wrapper\\\\\">\n      <div class=\\\\\"arco-timeline-item-dot-line arco-timeline-item-dot-line-is-vertical\\\\\" style=\\\\\"border-left-style: solid;\\\\\"></div>\n      <div class=\\\\\"arco-timeline-item-dot-content\\\\\">\n        <div class=\\\\\"arco-timeline-item-dot arco-timeline-item-dot-solid\\\\\"></div>\n      </div>\n    </div>\n    <div class=\\\\\"arco-timeline-item-content-wrapper\\\\\">\n      <div class=\\\\\"arco-timeline-item-content\\\\\">The first milestone</div>\n      <div class=\\\\\"arco-timeline-item-label\\\\\">2017-03-10</div>\n    </div>\n    <!--v-if-->\n  </div>\n  <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-timeline-item arco-timeline-item-vertical-left arco-timeline-item-label-same arco-timeline-item-last\\\\\">\n    <div class=\\\\\"arco-timeline-item-dot-wrapper\\\\\">\n      <div class=\\\\\"arco-timeline-item-dot-line arco-timeline-item-dot-line-is-vertical\\\\\" style=\\\\\"border-left-style: solid;\\\\\"></div>\n      <div class=\\\\\"arco-timeline-item-dot-content\\\\\">\n        <div class=\\\\\"arco-timeline-item-dot arco-timeline-item-dot-solid\\\\\"></div>\n      </div>\n    </div>\n    <div class=\\\\\"arco-timeline-item-content-wrapper\\\\\">\n      <div class=\\\\\"arco-timeline-item-content\\\\\">The second milestone</div>\n      <div class=\\\\\"arco-timeline-item-label\\\\\">2018-05-12</div>\n    </div>\n    <!--v-if-->\n  </div>\n  <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-timeline-item arco-timeline-item-vertical-left arco-timeline-item-label-same arco-timeline-item-last\\\\\">\n    <div class=\\\\\"arco-timeline-item-dot-wrapper\\\\\">\n      <div class=\\\\\"arco-timeline-item-dot-line arco-timeline-item-dot-line-is-vertical\\\\\" style=\\\\\"border-left-style: solid;\\\\\"></div>\n      <div class=\\\\\"arco-timeline-item-dot-content\\\\\">\n        <div class=\\\\\"arco-timeline-item-dot arco-timeline-item-dot-solid\\\\\"></div>\n      </div>\n    </div>\n    <div class=\\\\\"arco-timeline-item-content-wrapper\\\\\">\n      <div class=\\\\\"arco-timeline-item-content\\\\\">The third milestone</div>\n      <div class=\\\\\"arco-timeline-item-label\\\\\">2020-09-30</div>\n    </div>\n    <!--v-if-->\n  </div>\n</div>\"\n`;\n\nexports[`<timeline> demo: render [custom] correctly 1`] = `\n\"<div role=\\\\\"list\\\\\" class=\\\\\"arco-timeline arco-timeline-left arco-timeline-direction-vertical\\\\\">\n  <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-timeline-item arco-timeline-item-vertical-left arco-timeline-item-label-same arco-timeline-item-last\\\\\">\n    <div class=\\\\\"arco-timeline-item-dot-wrapper\\\\\">\n      <div class=\\\\\"arco-timeline-item-dot-line arco-timeline-item-dot-line-is-vertical\\\\\" style=\\\\\"border-left-style: solid;\\\\\"></div>\n      <div class=\\\\\"arco-timeline-item-dot-content\\\\\">\n        <div class=\\\\\"arco-timeline-item-dot arco-timeline-item-dot-solid\\\\\"></div>\n      </div>\n    </div>\n    <div class=\\\\\"arco-timeline-item-content-wrapper\\\\\">\n      <div class=\\\\\"arco-timeline-item-content\\\\\"> Code Review </div>\n      <div class=\\\\\"arco-timeline-item-label\\\\\"><span class=\\\\\"arco-tag arco-tag-size-medium arco-tag-checked\\\\\"><span class=\\\\\"arco-tag-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-check-circle-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path fill-rule=\\\\\"evenodd\\\\\" clip-rule=\\\\\"evenodd\\\\\" d=\\\\\"M24 44c11.046 0 20-8.954 20-20S35.046 4 24 4 4 12.954 4 24s8.954 20 20 20Zm10.207-24.379a1 1 0 0 0 0-1.414l-1.414-1.414a1 1 0 0 0-1.414 0L22 26.172l-4.878-4.88a1 1 0 0 0-1.415 0l-1.414 1.415a1 1 0 0 0 0 1.414l7 7a1 1 0 0 0 1.414 0l11.5-11.5Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path></svg></span> Passed\n        <!--v-if-->\n        <!--v-if--></span>\n      </div>\n    </div>\n    <!--v-if-->\n  </div>\n</div>\"\n`;\n\nexports[`<timeline> demo: render [direction] correctly 1`] = `\n\"<div>\n  <div class=\\\\\"arco-row arco-row-align-center arco-row-justify-start\\\\\" style=\\\\\"margin-bottom: 24px;\\\\\"><span class=\\\\\"arco-typography\\\\\">mode: &nbsp; &nbsp;<!----><!--v-if--><!--v-if--><!--v-if--></span><span class=\\\\\"arco-radio-group arco-radio-group-size-medium arco-radio-group-direction-horizontal\\\\\"><label class=\\\\\"arco-radio arco-radio-checked\\\\\"><input type=\\\\\"radio\\\\\" checked=\\\\\"\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"top\\\\\"><span class=\\\\\"arco-icon-hover arco-icon-hover-disabled arco-radio-icon-hover\\\\\"><span class=\\\\\"arco-radio-icon\\\\\"></span></span><span class=\\\\\"arco-radio-label\\\\\">top</span></label><label class=\\\\\"arco-radio\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"bottom\\\\\"><span class=\\\\\"arco-icon-hover arco-radio-icon-hover\\\\\"><span class=\\\\\"arco-radio-icon\\\\\"></span></span><span class=\\\\\"arco-radio-label\\\\\">bottom</span></label><label class=\\\\\"arco-radio\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"alternate\\\\\"><span class=\\\\\"arco-icon-hover arco-radio-icon-hover\\\\\"><span class=\\\\\"arco-radio-icon\\\\\"></span></span><span class=\\\\\"arco-radio-label\\\\\">alternate</span></label></span></div>\n  <div role=\\\\\"list\\\\\" class=\\\\\"arco-timeline arco-timeline-top arco-timeline-direction-horizontal\\\\\">\n    <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-timeline-item arco-timeline-item-horizontal-top arco-timeline-item-label-same arco-timeline-item-last\\\\\">\n      <div class=\\\\\"arco-timeline-item-dot-wrapper\\\\\">\n        <div class=\\\\\"arco-timeline-item-dot-line arco-timeline-item-dot-line-is-horizontal\\\\\" style=\\\\\"border-top-style: solid;\\\\\"></div>\n        <div class=\\\\\"arco-timeline-item-dot-content\\\\\">\n          <div class=\\\\\"arco-timeline-item-dot arco-timeline-item-dot-solid\\\\\"></div>\n        </div>\n      </div>\n      <div class=\\\\\"arco-timeline-item-content-wrapper\\\\\">\n        <div class=\\\\\"arco-timeline-item-content\\\\\">\n          <div class=\\\\\"arco-row arco-row-align-start arco-row-justify-start\\\\\" style=\\\\\"display: inline-flex; align-items: center;\\\\\"><img width=\\\\\"40\\\\\" style=\\\\\"margin-right: 16px; margin-bottom: 12px;\\\\\" src=\\\\\"https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/b5d834b83708a269b4562924436eac48.png~tplv-uwbnlip3yd-png.png\\\\\">\n            <div style=\\\\\"margin-bottom: 12px;\\\\\"> Toutiao <div style=\\\\\"font-size: 12px; color: rgb(78, 89, 105);\\\\\"> Founded in 2012 </div>\n            </div>\n          </div>\n        </div>\n        <div class=\\\\\"arco-timeline-item-label\\\\\">2012-08</div>\n      </div>\n      <!--v-if-->\n    </div>\n    <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-timeline-item arco-timeline-item-horizontal-top arco-timeline-item-label-same arco-timeline-item-last\\\\\">\n      <div class=\\\\\"arco-timeline-item-dot-wrapper\\\\\">\n        <div class=\\\\\"arco-timeline-item-dot-line arco-timeline-item-dot-line-is-horizontal\\\\\" style=\\\\\"border-top-style: solid;\\\\\"></div>\n        <div class=\\\\\"arco-timeline-item-dot-content\\\\\">\n          <div class=\\\\\"arco-timeline-item-dot arco-timeline-item-dot-solid\\\\\"></div>\n        </div>\n      </div>\n      <div class=\\\\\"arco-timeline-item-content-wrapper\\\\\">\n        <div class=\\\\\"arco-timeline-item-content\\\\\">\n          <div class=\\\\\"arco-row arco-row-align-start arco-row-justify-start\\\\\" style=\\\\\"display: inline-flex; align-items: center;\\\\\"><img width=\\\\\"40\\\\\" style=\\\\\"margin-right: 16px; margin-bottom: 12px;\\\\\" src=\\\\\"https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/385ed540c359ec8a9b9ce2b5fe89b098.png~tplv-uwbnlip3yd-png.png\\\\\">\n            <div style=\\\\\"margin-bottom: 12px;\\\\\"> Xigua Video <div style=\\\\\"font-size: 12px; color: rgb(78, 89, 105);\\\\\"> Founded in 2017 </div>\n            </div>\n          </div>\n        </div>\n        <div class=\\\\\"arco-timeline-item-label\\\\\">2017-05</div>\n      </div>\n      <!--v-if-->\n    </div>\n    <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-timeline-item arco-timeline-item-horizontal-top arco-timeline-item-label-same arco-timeline-item-last\\\\\">\n      <div class=\\\\\"arco-timeline-item-dot-wrapper\\\\\">\n        <div class=\\\\\"arco-timeline-item-dot-line arco-timeline-item-dot-line-is-horizontal\\\\\" style=\\\\\"border-top-style: solid;\\\\\"></div>\n        <div class=\\\\\"arco-timeline-item-dot-content\\\\\">\n          <div class=\\\\\"arco-timeline-item-dot arco-timeline-item-dot-solid\\\\\"></div>\n        </div>\n      </div>\n      <div class=\\\\\"arco-timeline-item-content-wrapper\\\\\">\n        <div class=\\\\\"arco-timeline-item-content\\\\\">\n          <div class=\\\\\"arco-row arco-row-align-start arco-row-justify-start\\\\\" style=\\\\\"display: inline-flex; align-items: center;\\\\\"><img width=\\\\\"40\\\\\" style=\\\\\"margin-right: 16px; margin-bottom: 12px;\\\\\" src=\\\\\"https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/385ed540c359ec8a9b9ce2b5fe89b098.png~tplv-uwbnlip3yd-png.png\\\\\">\n            <div style=\\\\\"margin-bottom: 12px;\\\\\"> Pipidance <div style=\\\\\"font-size: 12px; color: rgb(78, 89, 105);\\\\\"> Founded in 2018 </div>\n            </div>\n          </div>\n        </div>\n        <div class=\\\\\"arco-timeline-item-label\\\\\">2018-07</div>\n      </div>\n      <!--v-if-->\n    </div>\n    <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-timeline-item arco-timeline-item-horizontal-top arco-timeline-item-label-same arco-timeline-item-last\\\\\">\n      <div class=\\\\\"arco-timeline-item-dot-wrapper\\\\\">\n        <div class=\\\\\"arco-timeline-item-dot-line arco-timeline-item-dot-line-is-horizontal\\\\\" style=\\\\\"border-top-style: dashed;\\\\\"></div>\n        <div class=\\\\\"arco-timeline-item-dot-content\\\\\">\n          <div class=\\\\\"arco-timeline-item-dot-custom\\\\\">\n            <div class=\\\\\"arco-spin\\\\\">\n              <div class=\\\\\"arco-spin-icon\\\\\" style=\\\\\"font-size: 12px;\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-loading arco-icon-spin\\\\\" style=\\\\\"font-size: 12px;\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n                  <path d=\\\\\"M42 24c0 9.941-8.059 18-18 18S6 33.941 6 24 14.059 6 24 6\\\\\"></path>\n                </svg></div>\n              <!---->\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\\\\\"arco-timeline-item-content-wrapper\\\\\">\n        <div class=\\\\\"arco-timeline-item-content\\\\\"></div>\n        <div class=\\\\\"arco-timeline-item-label\\\\\"></div>\n      </div>\n      <!--v-if-->\n    </div>\n  </div>\n</div>\"\n`;\n\nexports[`<timeline> demo: render [dot] correctly 1`] = `\n\"<div style=\\\\\"display: flex;\\\\\">\n  <div role=\\\\\"list\\\\\" class=\\\\\"arco-timeline arco-timeline-left arco-timeline-direction-vertical\\\\\" style=\\\\\"margin-right: 40px;\\\\\">\n    <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-timeline-item arco-timeline-item-vertical-left arco-timeline-item-label-same arco-timeline-item-last\\\\\">\n      <div class=\\\\\"arco-timeline-item-dot-wrapper\\\\\">\n        <div class=\\\\\"arco-timeline-item-dot-line arco-timeline-item-dot-line-is-vertical\\\\\" style=\\\\\"border-left-style: solid;\\\\\"></div>\n        <div class=\\\\\"arco-timeline-item-dot-content\\\\\">\n          <div class=\\\\\"arco-timeline-item-dot arco-timeline-item-dot-solid\\\\\" style=\\\\\"background-color: rgb(0, 180, 42);\\\\\"></div>\n        </div>\n      </div>\n      <div class=\\\\\"arco-timeline-item-content-wrapper\\\\\">\n        <div class=\\\\\"arco-timeline-item-content\\\\\"> The first milestone </div>\n        <div class=\\\\\"arco-timeline-item-label\\\\\">2020-04-12</div>\n      </div>\n      <!--v-if-->\n    </div>\n    <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-timeline-item arco-timeline-item-vertical-left arco-timeline-item-label-same arco-timeline-item-last\\\\\">\n      <div class=\\\\\"arco-timeline-item-dot-wrapper\\\\\">\n        <div class=\\\\\"arco-timeline-item-dot-line arco-timeline-item-dot-line-is-vertical\\\\\" style=\\\\\"border-left-style: solid;\\\\\"></div>\n        <div class=\\\\\"arco-timeline-item-dot-content\\\\\">\n          <div class=\\\\\"arco-timeline-item-dot arco-timeline-item-dot-solid\\\\\"></div>\n        </div>\n      </div>\n      <div class=\\\\\"arco-timeline-item-content-wrapper\\\\\">\n        <div class=\\\\\"arco-timeline-item-content\\\\\"> The second milestone </div>\n        <div class=\\\\\"arco-timeline-item-label\\\\\">2020-05-17</div>\n      </div>\n      <!--v-if-->\n    </div>\n    <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-timeline-item arco-timeline-item-vertical-left arco-timeline-item-label-same arco-timeline-item-last\\\\\">\n      <div class=\\\\\"arco-timeline-item-dot-wrapper\\\\\">\n        <div class=\\\\\"arco-timeline-item-dot-line arco-timeline-item-dot-line-is-vertical\\\\\" style=\\\\\"border-left-style: solid;\\\\\"></div>\n        <div class=\\\\\"arco-timeline-item-dot-content\\\\\">\n          <div class=\\\\\"arco-timeline-item-dot-custom\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-clock-circle\\\\\" style=\\\\\"font-size: 12px; color: rgb(245, 63, 63);\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n              <path d=\\\\\"M24 14v10h9.5m8.5 0c0 9.941-8.059 18-18 18S6 33.941 6 24 14.059 6 24 6s18 8.059 18 18Z\\\\\"></path>\n            </svg></div>\n        </div>\n      </div>\n      <div class=\\\\\"arco-timeline-item-content-wrapper\\\\\">\n        <div class=\\\\\"arco-timeline-item-content\\\\\"> The third milestone </div>\n        <div class=\\\\\"arco-timeline-item-label\\\\\">2020-06-22</div>\n      </div>\n      <!--v-if-->\n    </div>\n    <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-timeline-item arco-timeline-item-vertical-left arco-timeline-item-label-same arco-timeline-item-last\\\\\">\n      <div class=\\\\\"arco-timeline-item-dot-wrapper\\\\\">\n        <div class=\\\\\"arco-timeline-item-dot-line arco-timeline-item-dot-line-is-vertical\\\\\" style=\\\\\"border-left-style: solid;\\\\\"></div>\n        <div class=\\\\\"arco-timeline-item-dot-content\\\\\">\n          <div class=\\\\\"arco-timeline-item-dot arco-timeline-item-dot-solid\\\\\"></div>\n        </div>\n      </div>\n      <div class=\\\\\"arco-timeline-item-content-wrapper\\\\\">\n        <div class=\\\\\"arco-timeline-item-content\\\\\"> The third milestone </div>\n        <div class=\\\\\"arco-timeline-item-label\\\\\">2020-06-22</div>\n      </div>\n      <!--v-if-->\n    </div>\n  </div>\n  <div role=\\\\\"list\\\\\" class=\\\\\"arco-timeline arco-timeline-left arco-timeline-direction-vertical\\\\\" style=\\\\\"margin-right: 40px;\\\\\">\n    <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-timeline-item arco-timeline-item-vertical-left arco-timeline-item-label-same arco-timeline-item-last\\\\\">\n      <div class=\\\\\"arco-timeline-item-dot-wrapper\\\\\">\n        <div class=\\\\\"arco-timeline-item-dot-line arco-timeline-item-dot-line-is-vertical\\\\\" style=\\\\\"border-left-style: solid;\\\\\"></div>\n        <div class=\\\\\"arco-timeline-item-dot-content\\\\\">\n          <div class=\\\\\"arco-timeline-item-dot-custom\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-check\\\\\" style=\\\\\"font-size: 12px; padding: 2px; box-sizing: border-box; border-radius: 50%;\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n              <path d=\\\\\"M41.678 11.05 19.05 33.678 6.322 20.95\\\\\"></path>\n            </svg></div>\n        </div>\n      </div>\n      <div class=\\\\\"arco-timeline-item-content-wrapper\\\\\">\n        <div class=\\\\\"arco-timeline-item-content\\\\\"> The first milestone </div>\n        <div class=\\\\\"arco-timeline-item-label\\\\\">2020-04-12</div>\n      </div>\n      <!--v-if-->\n    </div>\n    <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-timeline-item arco-timeline-item-vertical-left arco-timeline-item-label-same arco-timeline-item-last\\\\\">\n      <div class=\\\\\"arco-timeline-item-dot-wrapper\\\\\">\n        <div class=\\\\\"arco-timeline-item-dot-line arco-timeline-item-dot-line-is-vertical\\\\\" style=\\\\\"border-left-style: solid;\\\\\"></div>\n        <div class=\\\\\"arco-timeline-item-dot-content\\\\\">\n          <div class=\\\\\"arco-timeline-item-dot-custom\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-check\\\\\" style=\\\\\"font-size: 12px; padding: 2px; box-sizing: border-box; border-radius: 50%;\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n              <path d=\\\\\"M41.678 11.05 19.05 33.678 6.322 20.95\\\\\"></path>\n            </svg></div>\n        </div>\n      </div>\n      <div class=\\\\\"arco-timeline-item-content-wrapper\\\\\">\n        <!--v-if-->\n        <div class=\\\\\"arco-timeline-item-label\\\\\">2020-05-17</div>\n      </div>\n      <!--v-if-->\n    </div>\n    <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-timeline-item arco-timeline-item-vertical-left arco-timeline-item-label-same arco-timeline-item-last\\\\\">\n      <div class=\\\\\"arco-timeline-item-dot-wrapper\\\\\">\n        <div class=\\\\\"arco-timeline-item-dot-line arco-timeline-item-dot-line-is-vertical\\\\\" style=\\\\\"border-left-style: solid;\\\\\"></div>\n        <div class=\\\\\"arco-timeline-item-dot-content\\\\\">\n          <div class=\\\\\"arco-timeline-item-dot arco-timeline-item-dot-solid\\\\\"></div>\n        </div>\n      </div>\n      <div class=\\\\\"arco-timeline-item-content-wrapper\\\\\">\n        <div class=\\\\\"arco-timeline-item-content\\\\\">The third milestone</div>\n        <div class=\\\\\"arco-timeline-item-label\\\\\">2020-06-22</div>\n      </div>\n      <!--v-if-->\n    </div>\n    <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-timeline-item arco-timeline-item-vertical-left arco-timeline-item-label-same arco-timeline-item-last\\\\\">\n      <div class=\\\\\"arco-timeline-item-dot-wrapper\\\\\">\n        <div class=\\\\\"arco-timeline-item-dot-line arco-timeline-item-dot-line-is-vertical\\\\\" style=\\\\\"border-left-style: solid;\\\\\"></div>\n        <div class=\\\\\"arco-timeline-item-dot-content\\\\\">\n          <div class=\\\\\"arco-timeline-item-dot arco-timeline-item-dot-solid\\\\\"></div>\n        </div>\n      </div>\n      <div class=\\\\\"arco-timeline-item-content-wrapper\\\\\">\n        <div class=\\\\\"arco-timeline-item-content\\\\\"> The third milestone </div>\n        <div class=\\\\\"arco-timeline-item-label\\\\\">2020-06-22</div>\n      </div>\n      <!--v-if-->\n    </div>\n  </div>\n  <div role=\\\\\"list\\\\\" class=\\\\\"arco-timeline arco-timeline-left arco-timeline-direction-vertical\\\\\">\n    <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-timeline-item arco-timeline-item-vertical-left arco-timeline-item-label-same arco-timeline-item-last\\\\\">\n      <div class=\\\\\"arco-timeline-item-dot-wrapper\\\\\">\n        <div class=\\\\\"arco-timeline-item-dot-line arco-timeline-item-dot-line-is-vertical\\\\\" style=\\\\\"border-left-style: solid;\\\\\"></div>\n        <div class=\\\\\"arco-timeline-item-dot-content\\\\\">\n          <div class=\\\\\"arco-timeline-item-dot arco-timeline-item-dot-solid\\\\\"></div>\n        </div>\n      </div>\n      <div class=\\\\\"arco-timeline-item-content-wrapper\\\\\">\n        <div class=\\\\\"arco-timeline-item-content\\\\\">The first milestone</div>\n        <div class=\\\\\"arco-timeline-item-label\\\\\">2020-04-12</div>\n      </div>\n      <!--v-if-->\n    </div>\n    <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-timeline-item arco-timeline-item-vertical-left arco-timeline-item-label-same arco-timeline-item-last\\\\\">\n      <div class=\\\\\"arco-timeline-item-dot-wrapper\\\\\">\n        <div class=\\\\\"arco-timeline-item-dot-line arco-timeline-item-dot-line-is-vertical\\\\\" style=\\\\\"border-left-style: solid;\\\\\"></div>\n        <div class=\\\\\"arco-timeline-item-dot-content\\\\\">\n          <div class=\\\\\"arco-timeline-item-dot arco-timeline-item-dot-solid\\\\\"></div>\n        </div>\n      </div>\n      <div class=\\\\\"arco-timeline-item-content-wrapper\\\\\">\n        <div class=\\\\\"arco-timeline-item-content\\\\\"> The second milestone </div>\n        <div class=\\\\\"arco-timeline-item-label\\\\\">2020-05-17</div>\n      </div>\n      <!--v-if-->\n    </div>\n    <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-timeline-item arco-timeline-item-vertical-left arco-timeline-item-label-same arco-timeline-item-last\\\\\">\n      <div class=\\\\\"arco-timeline-item-dot-wrapper\\\\\">\n        <div class=\\\\\"arco-timeline-item-dot-line arco-timeline-item-dot-line-is-vertical\\\\\" style=\\\\\"border-left-style: solid;\\\\\"></div>\n        <div class=\\\\\"arco-timeline-item-dot-content\\\\\">\n          <div class=\\\\\"arco-timeline-item-dot arco-timeline-item-dot-solid\\\\\"></div>\n        </div>\n      </div>\n      <div class=\\\\\"arco-timeline-item-content-wrapper\\\\\">\n        <div class=\\\\\"arco-timeline-item-content\\\\\"> The third milestone </div>\n        <div class=\\\\\"arco-timeline-item-label\\\\\">2020-06-22</div>\n      </div>\n      <!--v-if-->\n    </div>\n  </div>\n</div>\"\n`;\n\nexports[`<timeline> demo: render [icon] correctly 1`] = `\n\"<div role=\\\\\"list\\\\\" class=\\\\\"arco-timeline arco-timeline-left arco-timeline-direction-vertical\\\\\">\n  <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-timeline-item arco-timeline-item-vertical-left arco-timeline-item-label-same arco-timeline-item-last\\\\\">\n    <div class=\\\\\"arco-timeline-item-dot-wrapper\\\\\">\n      <div class=\\\\\"arco-timeline-item-dot-line arco-timeline-item-dot-line-is-vertical\\\\\" style=\\\\\"border-left-style: solid;\\\\\"></div>\n      <div class=\\\\\"arco-timeline-item-dot-content\\\\\">\n        <div class=\\\\\"arco-timeline-item-dot arco-timeline-item-dot-solid\\\\\" style=\\\\\"background-color: rgb(0, 180, 42);\\\\\"></div>\n      </div>\n    </div>\n    <div class=\\\\\"arco-timeline-item-content-wrapper\\\\\">\n      <div class=\\\\\"arco-timeline-item-content\\\\\"> The first milestone </div>\n      <div class=\\\\\"arco-timeline-item-label\\\\\">2017-03-10</div>\n    </div>\n    <!--v-if-->\n  </div>\n  <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-timeline-item arco-timeline-item-vertical-left arco-timeline-item-label-same arco-timeline-item-last\\\\\">\n    <div class=\\\\\"arco-timeline-item-dot-wrapper\\\\\">\n      <div class=\\\\\"arco-timeline-item-dot-line arco-timeline-item-dot-line-is-vertical\\\\\" style=\\\\\"border-left-style: solid;\\\\\"></div>\n      <div class=\\\\\"arco-timeline-item-dot-content\\\\\">\n        <div class=\\\\\"arco-timeline-item-dot arco-timeline-item-dot-solid\\\\\"></div>\n      </div>\n    </div>\n    <div class=\\\\\"arco-timeline-item-content-wrapper\\\\\">\n      <div class=\\\\\"arco-timeline-item-content\\\\\">The second milestone</div>\n      <div class=\\\\\"arco-timeline-item-label\\\\\">2018-05-22</div>\n    </div>\n    <!--v-if-->\n  </div>\n  <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-timeline-item arco-timeline-item-vertical-left arco-timeline-item-label-same arco-timeline-item-last\\\\\">\n    <div class=\\\\\"arco-timeline-item-dot-wrapper\\\\\">\n      <div class=\\\\\"arco-timeline-item-dot-line arco-timeline-item-dot-line-is-vertical\\\\\" style=\\\\\"border-left-style: solid;\\\\\"></div>\n      <div class=\\\\\"arco-timeline-item-dot-content\\\\\">\n        <div class=\\\\\"arco-timeline-item-dot arco-timeline-item-dot-solid\\\\\" style=\\\\\"background-color: rgb(245, 63, 63);\\\\\"></div>\n      </div>\n    </div>\n    <div class=\\\\\"arco-timeline-item-content-wrapper\\\\\">\n      <div class=\\\\\"arco-timeline-item-content\\\\\"> The third milestone <svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-exclamation-circle-fill\\\\\" style=\\\\\"font-size: 12px; margin-left: 4px;\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n          <path fill-rule=\\\\\"evenodd\\\\\" clip-rule=\\\\\"evenodd\\\\\" d=\\\\\"M24 44c11.046 0 20-8.954 20-20S35.046 4 24 4 4 12.954 4 24s8.954 20 20 20Zm-2-11a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1v2Zm4-18a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V15Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path>\n        </svg></div>\n      <div class=\\\\\"arco-timeline-item-label\\\\\">2020-06-22</div>\n    </div>\n    <!--v-if-->\n  </div>\n  <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-timeline-item arco-timeline-item-vertical-left arco-timeline-item-label-same arco-timeline-item-last\\\\\">\n    <div class=\\\\\"arco-timeline-item-dot-wrapper\\\\\">\n      <div class=\\\\\"arco-timeline-item-dot-line arco-timeline-item-dot-line-is-vertical\\\\\" style=\\\\\"border-left-style: solid;\\\\\"></div>\n      <div class=\\\\\"arco-timeline-item-dot-content\\\\\">\n        <div class=\\\\\"arco-timeline-item-dot arco-timeline-item-dot-solid\\\\\" style=\\\\\"background-color: rgb(201, 205, 212);\\\\\"></div>\n      </div>\n    </div>\n    <div class=\\\\\"arco-timeline-item-content-wrapper\\\\\">\n      <div class=\\\\\"arco-timeline-item-content\\\\\"> The fourth milestone </div>\n      <div class=\\\\\"arco-timeline-item-label\\\\\">2020-09-30</div>\n    </div>\n    <!--v-if-->\n  </div>\n</div>\"\n`;\n\nexports[`<timeline> demo: render [label] correctly 1`] = `\n\"<div>\n  <div class=\\\\\"arco-row arco-row-align-center arco-row-justify-start\\\\\"><span class=\\\\\"arco-typography\\\\\">labelPosition: &nbsp; &nbsp;<!----><!--v-if--><!--v-if--><!--v-if--></span><span class=\\\\\"arco-radio-group arco-radio-group-size-medium arco-radio-group-direction-horizontal\\\\\"><label class=\\\\\"arco-radio arco-radio-checked\\\\\"><input type=\\\\\"radio\\\\\" checked=\\\\\"\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"same\\\\\"><span class=\\\\\"arco-icon-hover arco-icon-hover-disabled arco-radio-icon-hover\\\\\"><span class=\\\\\"arco-radio-icon\\\\\"></span></span><span class=\\\\\"arco-radio-label\\\\\">same</span></label><label class=\\\\\"arco-radio\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"relative\\\\\"><span class=\\\\\"arco-icon-hover arco-radio-icon-hover\\\\\"><span class=\\\\\"arco-radio-icon\\\\\"></span></span><span class=\\\\\"arco-radio-label\\\\\">relative</span></label></span></div>\n  <div class=\\\\\"arco-row arco-row-align-center arco-row-justify-start\\\\\" style=\\\\\"margin: 20px 0px 24px;\\\\\"><span class=\\\\\"arco-typography\\\\\">mode: &nbsp; &nbsp;<!----><!--v-if--><!--v-if--><!--v-if--></span><span class=\\\\\"arco-radio-group arco-radio-group-size-medium arco-radio-group-direction-horizontal\\\\\"><label class=\\\\\"arco-radio arco-radio-checked\\\\\"><input type=\\\\\"radio\\\\\" checked=\\\\\"\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"left\\\\\"><span class=\\\\\"arco-icon-hover arco-icon-hover-disabled arco-radio-icon-hover\\\\\"><span class=\\\\\"arco-radio-icon\\\\\"></span></span><span class=\\\\\"arco-radio-label\\\\\">left</span></label><label class=\\\\\"arco-radio\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"right\\\\\"><span class=\\\\\"arco-icon-hover arco-radio-icon-hover\\\\\"><span class=\\\\\"arco-radio-icon\\\\\"></span></span><span class=\\\\\"arco-radio-label\\\\\">right</span></label><label class=\\\\\"arco-radio\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"alternate\\\\\"><span class=\\\\\"arco-icon-hover arco-radio-icon-hover\\\\\"><span class=\\\\\"arco-radio-icon\\\\\"></span></span><span class=\\\\\"arco-radio-label\\\\\">alternate</span></label></span></div>\n  <div role=\\\\\"list\\\\\" class=\\\\\"arco-timeline arco-timeline-left arco-timeline-direction-vertical\\\\\">\n    <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-timeline-item arco-timeline-item-vertical-left arco-timeline-item-label-same arco-timeline-item-last\\\\\">\n      <div class=\\\\\"arco-timeline-item-dot-wrapper\\\\\">\n        <div class=\\\\\"arco-timeline-item-dot-line arco-timeline-item-dot-line-is-vertical\\\\\" style=\\\\\"border-left-style: solid;\\\\\"></div>\n        <div class=\\\\\"arco-timeline-item-dot-content\\\\\">\n          <div class=\\\\\"arco-timeline-item-dot arco-timeline-item-dot-solid\\\\\" style=\\\\\"background-color: rgb(82, 196, 25);\\\\\"></div>\n        </div>\n      </div>\n      <div class=\\\\\"arco-timeline-item-content-wrapper\\\\\">\n        <div class=\\\\\"arco-timeline-item-content\\\\\"> The first milestone </div>\n        <div class=\\\\\"arco-timeline-item-label\\\\\">2017-03-10</div>\n      </div>\n      <!--v-if-->\n    </div>\n    <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-timeline-item arco-timeline-item-vertical-left arco-timeline-item-label-same arco-timeline-item-last\\\\\" labelposition=\\\\\"same\\\\\">\n      <div class=\\\\\"arco-timeline-item-dot-wrapper\\\\\">\n        <div class=\\\\\"arco-timeline-item-dot-line arco-timeline-item-dot-line-is-vertical\\\\\" style=\\\\\"border-left-style: solid;\\\\\"></div>\n        <div class=\\\\\"arco-timeline-item-dot-content\\\\\">\n          <div class=\\\\\"arco-timeline-item-dot arco-timeline-item-dot-solid\\\\\" style=\\\\\"background-color: rgb(245, 34, 45);\\\\\"></div>\n        </div>\n      </div>\n      <div class=\\\\\"arco-timeline-item-content-wrapper\\\\\">\n        <div class=\\\\\"arco-timeline-item-content\\\\\"> The second milestone </div>\n        <div class=\\\\\"arco-timeline-item-label\\\\\">2018-05-12</div>\n      </div>\n      <!--v-if-->\n    </div>\n    <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-timeline-item arco-timeline-item-vertical-left arco-timeline-item-label-same arco-timeline-item-last\\\\\">\n      <div class=\\\\\"arco-timeline-item-dot-wrapper\\\\\">\n        <div class=\\\\\"arco-timeline-item-dot-line arco-timeline-item-dot-line-is-vertical\\\\\" style=\\\\\"border-left-style: solid;\\\\\"></div>\n        <div class=\\\\\"arco-timeline-item-dot-content\\\\\">\n          <div class=\\\\\"arco-timeline-item-dot arco-timeline-item-dot-solid\\\\\"></div>\n        </div>\n      </div>\n      <div class=\\\\\"arco-timeline-item-content-wrapper\\\\\">\n        <div class=\\\\\"arco-timeline-item-content\\\\\"> The third milestone </div>\n        <div class=\\\\\"arco-timeline-item-label\\\\\">2020-09-30</div>\n      </div>\n      <!--v-if-->\n    </div>\n  </div>\n</div>\"\n`;\n\nexports[`<timeline> demo: render [mode] correctly 1`] = `\n\"<div class=\\\\\"arco-row arco-row-align-start arco-row-justify-space-between\\\\\">\n  <div role=\\\\\"list\\\\\" class=\\\\\"arco-timeline arco-timeline-alternate arco-timeline-direction-vertical\\\\\" style=\\\\\"flex: 1;\\\\\">\n    <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-timeline-item arco-timeline-item-vertical-left arco-timeline-item-label-same arco-timeline-item-last\\\\\">\n      <div class=\\\\\"arco-timeline-item-dot-wrapper\\\\\">\n        <div class=\\\\\"arco-timeline-item-dot-line arco-timeline-item-dot-line-is-vertical\\\\\" style=\\\\\"border-left-style: solid;\\\\\"></div>\n        <div class=\\\\\"arco-timeline-item-dot-content\\\\\">\n          <div class=\\\\\"arco-timeline-item-dot arco-timeline-item-dot-solid\\\\\"></div>\n        </div>\n      </div>\n      <div class=\\\\\"arco-timeline-item-content-wrapper\\\\\">\n        <div class=\\\\\"arco-timeline-item-content\\\\\">The first milestone</div>\n        <div class=\\\\\"arco-timeline-item-label\\\\\">2017-03-10</div>\n      </div>\n      <!--v-if-->\n    </div>\n    <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-timeline-item arco-timeline-item-vertical-left arco-timeline-item-label-same arco-timeline-item-last\\\\\">\n      <div class=\\\\\"arco-timeline-item-dot-wrapper\\\\\">\n        <div class=\\\\\"arco-timeline-item-dot-line arco-timeline-item-dot-line-is-vertical\\\\\" style=\\\\\"border-left-style: solid;\\\\\"></div>\n        <div class=\\\\\"arco-timeline-item-dot-content\\\\\">\n          <div class=\\\\\"arco-timeline-item-dot arco-timeline-item-dot-solid\\\\\"></div>\n        </div>\n      </div>\n      <div class=\\\\\"arco-timeline-item-content-wrapper\\\\\">\n        <div class=\\\\\"arco-timeline-item-content\\\\\">The second milestone</div>\n        <div class=\\\\\"arco-timeline-item-label\\\\\">2018-05-12</div>\n      </div>\n      <!--v-if-->\n    </div>\n    <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-timeline-item arco-timeline-item-vertical-left arco-timeline-item-label-same arco-timeline-item-last\\\\\">\n      <div class=\\\\\"arco-timeline-item-dot-wrapper\\\\\">\n        <div class=\\\\\"arco-timeline-item-dot-line arco-timeline-item-dot-line-is-vertical\\\\\" style=\\\\\"border-left-style: solid;\\\\\"></div>\n        <div class=\\\\\"arco-timeline-item-dot-content\\\\\">\n          <div class=\\\\\"arco-timeline-item-dot arco-timeline-item-dot-solid\\\\\"></div>\n        </div>\n      </div>\n      <div class=\\\\\"arco-timeline-item-content-wrapper\\\\\">\n        <div class=\\\\\"arco-timeline-item-content\\\\\"> The third milestone </div>\n        <div class=\\\\\"arco-timeline-item-label\\\\\">2020-09-30</div>\n      </div>\n      <!--v-if-->\n    </div>\n  </div>\n  <div role=\\\\\"list\\\\\" class=\\\\\"arco-timeline arco-timeline-right arco-timeline-direction-vertical\\\\\" style=\\\\\"flex: 1;\\\\\">\n    <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-timeline-item arco-timeline-item-vertical-right arco-timeline-item-label-same arco-timeline-item-last\\\\\">\n      <div class=\\\\\"arco-timeline-item-dot-wrapper\\\\\">\n        <div class=\\\\\"arco-timeline-item-dot-line arco-timeline-item-dot-line-is-vertical\\\\\" style=\\\\\"border-left-style: solid;\\\\\"></div>\n        <div class=\\\\\"arco-timeline-item-dot-content\\\\\">\n          <div class=\\\\\"arco-timeline-item-dot arco-timeline-item-dot-solid\\\\\"></div>\n        </div>\n      </div>\n      <div class=\\\\\"arco-timeline-item-content-wrapper\\\\\">\n        <div class=\\\\\"arco-timeline-item-content\\\\\">The first milestone</div>\n        <div class=\\\\\"arco-timeline-item-label\\\\\">2017-03-10</div>\n      </div>\n      <!--v-if-->\n    </div>\n    <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-timeline-item arco-timeline-item-vertical-right arco-timeline-item-label-same arco-timeline-item-last\\\\\">\n      <div class=\\\\\"arco-timeline-item-dot-wrapper\\\\\">\n        <div class=\\\\\"arco-timeline-item-dot-line arco-timeline-item-dot-line-is-vertical\\\\\" style=\\\\\"border-left-style: solid;\\\\\"></div>\n        <div class=\\\\\"arco-timeline-item-dot-content\\\\\">\n          <div class=\\\\\"arco-timeline-item-dot arco-timeline-item-dot-solid\\\\\"></div>\n        </div>\n      </div>\n      <div class=\\\\\"arco-timeline-item-content-wrapper\\\\\">\n        <div class=\\\\\"arco-timeline-item-content\\\\\">The second milestone</div>\n        <div class=\\\\\"arco-timeline-item-label\\\\\">2018-05-12</div>\n      </div>\n      <!--v-if-->\n    </div>\n    <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-timeline-item arco-timeline-item-vertical-right arco-timeline-item-label-same arco-timeline-item-last\\\\\">\n      <div class=\\\\\"arco-timeline-item-dot-wrapper\\\\\">\n        <div class=\\\\\"arco-timeline-item-dot-line arco-timeline-item-dot-line-is-vertical\\\\\" style=\\\\\"border-left-style: solid;\\\\\"></div>\n        <div class=\\\\\"arco-timeline-item-dot-content\\\\\">\n          <div class=\\\\\"arco-timeline-item-dot arco-timeline-item-dot-solid\\\\\"></div>\n        </div>\n      </div>\n      <div class=\\\\\"arco-timeline-item-content-wrapper\\\\\">\n        <div class=\\\\\"arco-timeline-item-content\\\\\"> The third milestone </div>\n        <div class=\\\\\"arco-timeline-item-label\\\\\">2020-09-30</div>\n      </div>\n      <!--v-if-->\n    </div>\n  </div>\n</div>\"\n`;\n\nexports[`<timeline> demo: render [pending] correctly 1`] = `\n\"<div class=\\\\\"arco-row arco-row-align-center arco-row-justify-start\\\\\" style=\\\\\"margin-bottom: 24px;\\\\\"><label class=\\\\\"arco-checkbox\\\\\" checked=\\\\\"false\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span><span class=\\\\\"arco-checkbox-label\\\\\"> horizontal &nbsp; &nbsp; </span></label><label class=\\\\\"arco-checkbox\\\\\" checked=\\\\\"false\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span><span class=\\\\\"arco-checkbox-label\\\\\"> reverse &nbsp; &nbsp; </span></label><label class=\\\\\"arco-checkbox\\\\\" checked=\\\\\"false\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span><span class=\\\\\"arco-checkbox-label\\\\\"> pending &nbsp; &nbsp; </span></label><label class=\\\\\"arco-checkbox\\\\\" checked=\\\\\"false\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span><span class=\\\\\"arco-checkbox-label\\\\\"> custom pendingDot </span></label></div>\n<div role=\\\\\"list\\\\\" class=\\\\\"arco-timeline arco-timeline-left arco-timeline-direction-vertical\\\\\">\n  <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-timeline-item arco-timeline-item-vertical-left arco-timeline-item-label-same arco-timeline-item-last\\\\\">\n    <div class=\\\\\"arco-timeline-item-dot-wrapper\\\\\">\n      <div class=\\\\\"arco-timeline-item-dot-line arco-timeline-item-dot-line-is-vertical\\\\\" style=\\\\\"border-left-style: solid;\\\\\"></div>\n      <div class=\\\\\"arco-timeline-item-dot-content\\\\\">\n        <div class=\\\\\"arco-timeline-item-dot arco-timeline-item-dot-solid\\\\\" style=\\\\\"background-color: rgb(82, 196, 25);\\\\\"></div>\n      </div>\n    </div>\n    <div class=\\\\\"arco-timeline-item-content-wrapper\\\\\">\n      <div class=\\\\\"arco-timeline-item-content\\\\\"> The first milestone </div>\n      <div class=\\\\\"arco-timeline-item-label\\\\\">2017-03-10</div>\n    </div>\n    <!--v-if-->\n  </div>\n  <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-timeline-item arco-timeline-item-vertical-left arco-timeline-item-label-same arco-timeline-item-last\\\\\">\n    <div class=\\\\\"arco-timeline-item-dot-wrapper\\\\\">\n      <div class=\\\\\"arco-timeline-item-dot-line arco-timeline-item-dot-line-is-vertical\\\\\" style=\\\\\"border-left-style: solid;\\\\\"></div>\n      <div class=\\\\\"arco-timeline-item-dot-content\\\\\">\n        <div class=\\\\\"arco-timeline-item-dot arco-timeline-item-dot-solid\\\\\" style=\\\\\"background-color: rgb(245, 34, 45);\\\\\"></div>\n      </div>\n    </div>\n    <div class=\\\\\"arco-timeline-item-content-wrapper\\\\\">\n      <div class=\\\\\"arco-timeline-item-content\\\\\"> The second milestone </div>\n      <div class=\\\\\"arco-timeline-item-label\\\\\">2018-05-12</div>\n    </div>\n    <!--v-if-->\n  </div>\n  <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-timeline-item arco-timeline-item-vertical-left arco-timeline-item-label-same arco-timeline-item-last\\\\\">\n    <div class=\\\\\"arco-timeline-item-dot-wrapper\\\\\">\n      <div class=\\\\\"arco-timeline-item-dot-line arco-timeline-item-dot-line-is-vertical\\\\\" style=\\\\\"border-left-style: solid;\\\\\"></div>\n      <div class=\\\\\"arco-timeline-item-dot-content\\\\\">\n        <div class=\\\\\"arco-timeline-item-dot arco-timeline-item-dot-solid\\\\\"></div>\n      </div>\n    </div>\n    <div class=\\\\\"arco-timeline-item-content-wrapper\\\\\">\n      <div class=\\\\\"arco-timeline-item-content\\\\\">The third milestone</div>\n      <div class=\\\\\"arco-timeline-item-label\\\\\">2020-09-30</div>\n    </div>\n    <!--v-if-->\n  </div>\n</div>\"\n`;\n\nexports[`<timeline> demo: render [type] correctly 1`] = `\n\"<div role=\\\\\"list\\\\\" class=\\\\\"arco-timeline arco-timeline-left arco-timeline-direction-vertical\\\\\">\n  <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-timeline-item arco-timeline-item-vertical-left arco-timeline-item-label-same arco-timeline-item-last\\\\\">\n    <div class=\\\\\"arco-timeline-item-dot-wrapper\\\\\">\n      <div class=\\\\\"arco-timeline-item-dot-line arco-timeline-item-dot-line-is-vertical\\\\\" style=\\\\\"border-left-style: dashed;\\\\\"></div>\n      <div class=\\\\\"arco-timeline-item-dot-content\\\\\">\n        <div class=\\\\\"arco-timeline-item-dot arco-timeline-item-dot-solid\\\\\"></div>\n      </div>\n    </div>\n    <div class=\\\\\"arco-timeline-item-content-wrapper\\\\\">\n      <div class=\\\\\"arco-timeline-item-content\\\\\"> The first milestone <br><span class=\\\\\"arco-typography arco-typography-secondary\\\\\" style=\\\\\"font-size: 12px; margin-top: 4px;\\\\\"> This is a descriptive message <!----><!--v-if--><!--v-if--><!--v-if--></span></div>\n      <div class=\\\\\"arco-timeline-item-label\\\\\">2017-03-10</div>\n    </div>\n    <!--v-if-->\n  </div>\n  <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-timeline-item arco-timeline-item-vertical-left arco-timeline-item-label-same arco-timeline-item-last\\\\\">\n    <div class=\\\\\"arco-timeline-item-dot-wrapper\\\\\">\n      <div class=\\\\\"arco-timeline-item-dot-line arco-timeline-item-dot-line-is-vertical\\\\\" style=\\\\\"border-left-style: dashed;\\\\\"></div>\n      <div class=\\\\\"arco-timeline-item-dot-content\\\\\">\n        <div class=\\\\\"arco-timeline-item-dot arco-timeline-item-dot-solid\\\\\"></div>\n      </div>\n    </div>\n    <div class=\\\\\"arco-timeline-item-content-wrapper\\\\\">\n      <div class=\\\\\"arco-timeline-item-content\\\\\"> The second milestone <br><span class=\\\\\"arco-typography arco-typography-secondary\\\\\" style=\\\\\"font-size: 12px; margin-top: 4px;\\\\\"> This is a descriptive message <!----><!--v-if--><!--v-if--><!--v-if--></span></div>\n      <div class=\\\\\"arco-timeline-item-label\\\\\">2018-05-12</div>\n    </div>\n    <!--v-if-->\n  </div>\n  <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-timeline-item arco-timeline-item-vertical-left arco-timeline-item-label-same arco-timeline-item-last\\\\\">\n    <div class=\\\\\"arco-timeline-item-dot-wrapper\\\\\">\n      <div class=\\\\\"arco-timeline-item-dot-line arco-timeline-item-dot-line-is-vertical\\\\\" style=\\\\\"border-left-style: dashed;\\\\\"></div>\n      <div class=\\\\\"arco-timeline-item-dot-content\\\\\">\n        <div class=\\\\\"arco-timeline-item-dot arco-timeline-item-dot-solid\\\\\"></div>\n      </div>\n    </div>\n    <div class=\\\\\"arco-timeline-item-content-wrapper\\\\\">\n      <div class=\\\\\"arco-timeline-item-content\\\\\"> The third milestone <br><span class=\\\\\"arco-typography arco-typography-secondary\\\\\" style=\\\\\"font-size: 12px; margin-top: 4px;\\\\\"> This is a descriptive message <!----><!--v-if--><!--v-if--><!--v-if--></span></div>\n      <div class=\\\\\"arco-timeline-item-label\\\\\">2020-09-30</div>\n    </div>\n    <!--v-if-->\n  </div>\n</div>\"\n`;\n\nexports[`<timeline> demo: render [vertical] correctly 1`] = `\n\"<div>\n  <div class=\\\\\"arco-row arco-row-align-center arco-row-justify-start\\\\\" style=\\\\\"margin-bottom: 24px;\\\\\"><span class=\\\\\"arco-typography\\\\\">mode: &nbsp; &nbsp;<!----><!--v-if--><!--v-if--><!--v-if--></span><span class=\\\\\"arco-radio-group arco-radio-group-size-medium arco-radio-group-direction-horizontal\\\\\"><label class=\\\\\"arco-radio arco-radio-checked\\\\\"><input type=\\\\\"radio\\\\\" checked=\\\\\"\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"left\\\\\"><span class=\\\\\"arco-icon-hover arco-icon-hover-disabled arco-radio-icon-hover\\\\\"><span class=\\\\\"arco-radio-icon\\\\\"></span></span><span class=\\\\\"arco-radio-label\\\\\">left</span></label><label class=\\\\\"arco-radio\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"right\\\\\"><span class=\\\\\"arco-icon-hover arco-radio-icon-hover\\\\\"><span class=\\\\\"arco-radio-icon\\\\\"></span></span><span class=\\\\\"arco-radio-label\\\\\">right</span></label><label class=\\\\\"arco-radio\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"alternate\\\\\"><span class=\\\\\"arco-icon-hover arco-radio-icon-hover\\\\\"><span class=\\\\\"arco-radio-icon\\\\\"></span></span><span class=\\\\\"arco-radio-label\\\\\">alternate</span></label></span></div>\n  <div role=\\\\\"list\\\\\" class=\\\\\"arco-timeline arco-timeline-left arco-timeline-direction-vertical\\\\\">\n    <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-timeline-item arco-timeline-item-vertical-left arco-timeline-item-label-relative arco-timeline-item-last\\\\\">\n      <div class=\\\\\"arco-timeline-item-dot-wrapper\\\\\">\n        <div class=\\\\\"arco-timeline-item-dot-line arco-timeline-item-dot-line-is-vertical\\\\\" style=\\\\\"border-left-style: solid;\\\\\"></div>\n        <div class=\\\\\"arco-timeline-item-dot-content\\\\\">\n          <div class=\\\\\"arco-timeline-item-dot arco-timeline-item-dot-solid\\\\\"></div>\n        </div>\n      </div>\n      <div class=\\\\\"arco-timeline-item-content-wrapper\\\\\">\n        <div class=\\\\\"arco-timeline-item-content\\\\\">\n          <div class=\\\\\"arco-row arco-row-align-start arco-row-justify-start\\\\\" style=\\\\\"display: inline-flex; align-items: center;\\\\\"><img width=\\\\\"40\\\\\" style=\\\\\"margin-right: 16px; margin-bottom: 12px;\\\\\" src=\\\\\"https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/b5d834b83708a269b4562924436eac48.png~tplv-uwbnlip3yd-png.png\\\\\">\n            <div style=\\\\\"margin-bottom: 12px;\\\\\"> Toutiao <div style=\\\\\"font-size: 12px; color: rgb(78, 89, 105);\\\\\"> Founded in 2012 </div>\n            </div>\n          </div>\n        </div>\n        <!--v-if-->\n      </div>\n      <div class=\\\\\"arco-timeline-item-label\\\\\">2012-08</div>\n    </div>\n    <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-timeline-item arco-timeline-item-vertical-left arco-timeline-item-label-relative arco-timeline-item-last\\\\\">\n      <div class=\\\\\"arco-timeline-item-dot-wrapper\\\\\">\n        <div class=\\\\\"arco-timeline-item-dot-line arco-timeline-item-dot-line-is-vertical\\\\\" style=\\\\\"border-left-style: solid;\\\\\"></div>\n        <div class=\\\\\"arco-timeline-item-dot-content\\\\\">\n          <div class=\\\\\"arco-timeline-item-dot arco-timeline-item-dot-solid\\\\\"></div>\n        </div>\n      </div>\n      <div class=\\\\\"arco-timeline-item-content-wrapper\\\\\">\n        <div class=\\\\\"arco-timeline-item-content\\\\\">\n          <div class=\\\\\"arco-row arco-row-align-start arco-row-justify-start\\\\\" style=\\\\\"display: inline-flex; align-items: center;\\\\\"><img width=\\\\\"40\\\\\" style=\\\\\"margin-right: 16px; margin-bottom: 12px;\\\\\" src=\\\\\"https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/385ed540c359ec8a9b9ce2b5fe89b098.png~tplv-uwbnlip3yd-png.png\\\\\">\n            <div style=\\\\\"margin-bottom: 12px;\\\\\"> Xigua Video <div style=\\\\\"font-size: 12px; color: rgb(78, 89, 105);\\\\\"> Founded in 2017 </div>\n            </div>\n          </div>\n        </div>\n        <!--v-if-->\n      </div>\n      <div class=\\\\\"arco-timeline-item-label\\\\\">2017-05</div>\n    </div>\n    <div role=\\\\\"listitem\\\\\" class=\\\\\"arco-timeline-item arco-timeline-item-vertical-left arco-timeline-item-label-relative arco-timeline-item-last\\\\\">\n      <div class=\\\\\"arco-timeline-item-dot-wrapper\\\\\">\n        <div class=\\\\\"arco-timeline-item-dot-line arco-timeline-item-dot-line-is-vertical\\\\\" style=\\\\\"border-left-style: solid;\\\\\"></div>\n        <div class=\\\\\"arco-timeline-item-dot-content\\\\\">\n          <div class=\\\\\"arco-timeline-item-dot arco-timeline-item-dot-solid\\\\\"></div>\n        </div>\n      </div>\n      <div class=\\\\\"arco-timeline-item-content-wrapper\\\\\">\n        <div class=\\\\\"arco-timeline-item-content\\\\\">\n          <div class=\\\\\"arco-row arco-row-align-start arco-row-justify-start\\\\\" style=\\\\\"display: inline-flex; align-items: center;\\\\\"><img width=\\\\\"40\\\\\" style=\\\\\"margin-right: 16px; margin-bottom: 12px;\\\\\" src=\\\\\"https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/385ed540c359ec8a9b9ce2b5fe89b098.png~tplv-uwbnlip3yd-png.png\\\\\">\n            <div style=\\\\\"margin-bottom: 12px;\\\\\"> Pipidance <div style=\\\\\"font-size: 12px; color: rgb(78, 89, 105);\\\\\"> Founded in 2018 </div>\n            </div>\n          </div>\n        </div>\n        <!--v-if-->\n      </div>\n      <div class=\\\\\"arco-timeline-item-label\\\\\">2018-07</div>\n    </div>\n  </div>\n</div>\"\n`;\n"
  },
  {
    "path": "packages/web-vue/components/timeline/__test__/demo.test.ts",
    "content": "import demoTest from '../../../scripts/demo-test';\n\ndemoTest('timeline');\n"
  },
  {
    "path": "packages/web-vue/components/timeline/__test__/index.test.ts",
    "content": "import { mount } from '@vue/test-utils';\nimport Timeline from '../index';\n\nconst { Item } = Timeline;\n\ndescribe('Timeline', () => {\n  test('Reverse should work', () => {\n    const wrapper = mount(Timeline, {\n      props: {\n        reverse: true,\n      },\n    });\n    expect(wrapper.classes()).toContain('arco-timeline-is-reverse');\n  });\n\n  test('Should work with timeline item', () => {\n    const wrapper = mount(Timeline, {\n      global: {\n        components: {\n          TimelineItem: Item,\n        },\n      },\n      slots: {\n        default: `\n          <timeline-item>1</timeline-item>\n          <timeline-item>2</timeline-item>\n        `,\n      },\n    });\n    expect(wrapper.findAll('.arco-timeline-item').length).toBe(2);\n  });\n\n  test('Dot type and dot color should work for timeline item', () => {\n    const wrapper = mount(Item, {\n      props: {\n        label: 'hello world',\n        dotColor: 'rgb(10, 180, 42)',\n      },\n    });\n    const dot = wrapper.find('.arco-timeline-item-dot');\n    expect(dot.attributes('style')).toContain(\n      'background-color: rgb(10, 180, 42)'\n    );\n  });\n});\n"
  },
  {
    "path": "packages/web-vue/components/timeline/context.ts",
    "content": "import { InjectionKey } from 'vue';\nimport { Direction } from '../_utils/constant';\nimport type { ModeType, LabelPositionType } from './interface';\n\nexport interface TimelineContext {\n  items: number[];\n  direction: Direction;\n  reverse: boolean;\n  labelPosition: LabelPositionType;\n  mode: ModeType;\n}\n\nexport const timelineInjectionKey: InjectionKey<TimelineContext> =\n  Symbol('ArcoTimeline');\n"
  },
  {
    "path": "packages/web-vue/components/timeline/index.ts",
    "content": "import type { App } from 'vue';\nimport type { ArcoOptions } from '../_utils/types';\nimport { setGlobalConfig, getComponentPrefix } from '../_utils/global-config';\nimport _Timeline from './timeline';\nimport _TimelineItem from './item.vue';\n\nconst Timeline = Object.assign(_Timeline, {\n  Item: _TimelineItem,\n  install: (app: App, options?: ArcoOptions) => {\n    setGlobalConfig(app, options);\n    const componentPrefix = getComponentPrefix(options);\n\n    app.component(componentPrefix + _Timeline.name, _Timeline);\n    app.component(componentPrefix + _TimelineItem.name, _TimelineItem);\n  },\n});\n\nexport type TimelineInstance = InstanceType<typeof _Timeline>;\nexport type TimelineItemInstance = InstanceType<typeof _TimelineItem>;\n\nexport { _TimelineItem as TimelineItem };\n\nexport default Timeline;\n"
  },
  {
    "path": "packages/web-vue/components/timeline/interface.ts",
    "content": "export type ModeType = 'left' | 'right' | 'top' | 'bottom' | 'alternate';\n\nexport type LabelPositionType = 'relative' | 'same';\n\nexport type DotType = 'hollow' | 'solid';\n\nexport type LineType = 'solid' | 'dashed' | 'dotted';\n\nexport type PositionType = 'left' | 'right' | 'top' | 'bottom';\n"
  },
  {
    "path": "packages/web-vue/components/timeline/item.vue",
    "content": "<template>\n  <div role=\"listitem\" :class=\"cls\">\n    <div :class=\"`${prefixCls}-dot-wrapper`\">\n      <div :class=\"dotLineCls\" :style=\"computedDotLineStyle\" />\n      <div :class=\"`${prefixCls}-dot-content`\">\n        <div v-if=\"$slots.dot\" :class=\"`${prefixCls}-dot-custom`\">\n          <slot name=\"dot\" />\n        </div>\n        <div v-else :class=\"dotTypeCls\" :style=\"computedDotStyle\" />\n      </div>\n    </div>\n    <div :class=\"`${prefixCls}-content-wrapper`\">\n      <div v-if=\"$slots.default\" :class=\"`${prefixCls}-content`\">\n        <slot />\n      </div>\n      <div v-if=\"labelPosition !== 'relative'\" :class=\"`${prefixCls}-label`\">\n        <slot v-if=\"$slots.label\" name=\"label\" />\n        <template v-else>{{ label }}</template>\n      </div>\n    </div>\n    <div v-if=\"labelPosition === 'relative'\" :class=\"`${prefixCls}-label`\">\n      <slot v-if=\"$slots.label\" name=\"label\" />\n      <template v-else>{{ label }}</template>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport {\n  defineComponent,\n  getCurrentInstance,\n  inject,\n  computed,\n  PropType,\n} from 'vue';\nimport { getPrefixCls } from '../_utils/global-config';\nimport { TimelineContext, timelineInjectionKey } from './context';\nimport { DotType, LineType, PositionType, ModeType } from './interface';\nimport { Direction } from '../_utils/constant';\n\nconst getDefaultPosition = (\n  index: number,\n  mode: ModeType,\n  direction: Direction,\n  position?: string\n) => {\n  let map = ['left', 'right'];\n  if (direction === 'horizontal') {\n    map = ['top', 'bottom'];\n  }\n  const res = mode === 'alternate' ? position || map[index % 2] : mode;\n\n  return map.indexOf(res) > -1 ? res : map[0];\n};\n\nexport default defineComponent({\n  name: 'TimelineItem',\n  props: {\n    /**\n     * @zh 节点颜色\n     * @en Dot color\n     */\n    dotColor: {\n      type: String,\n    },\n    /**\n     * @zh 节点类型：空心圆/实心圆\n     * @en Dot type\n     * @values 'hollow', 'solid'\n     */\n    dotType: {\n      type: String as PropType<DotType>,\n      default: 'solid',\n    },\n    /**\n     * @zh 时间轴类型：实线/虚线/点状线\n     * @en Line type\n     * @values 'solid', 'dashed', 'dotted'\n     */\n    lineType: {\n      type: String as PropType<LineType>,\n      default: 'solid',\n    },\n    /**\n     * @zh 时间轴颜色\n     * @en Line Color\n     */\n    lineColor: {\n      type: String,\n    },\n    /**\n     * @zh 标签文本\n     * @en Label text\n     */\n    label: {\n      type: String,\n    },\n    /**\n     * @zh Item 位置\n     * @en Item position\n     */\n    position: {\n      type: String as PropType<PositionType>,\n    },\n  },\n  /**\n   * @zh 自定义节点\n   * @en Custom dot\n   * @slot dot\n   */\n  /**\n   * @zh 自定义标签\n   * @en Custom label\n   * @slot label\n   * @version 2.50.0\n   */\n  setup(props) {\n    const prefixCls = getPrefixCls('timeline-item');\n    const instance = getCurrentInstance();\n    const context = inject<Partial<TimelineContext>>(timelineInjectionKey, {});\n\n    const index = computed(\n      () => context.items?.indexOf(instance?.uid ?? -1) ?? -1\n    );\n\n    const contextDirection = computed(() => {\n      return context?.direction ?? 'vertical';\n    });\n\n    const contextLabelPosition = computed(() => {\n      return context?.labelPosition ?? 'same';\n    });\n\n    const cls = computed(() => {\n      const { items = [], reverse, labelPosition, mode = 'left' } = context;\n      const direction = contextDirection.value;\n      const computedPosition = getDefaultPosition(\n        index.value,\n        mode,\n        direction,\n        props.position\n      );\n      return [\n        prefixCls,\n        {\n          [`${prefixCls}-${direction}-${computedPosition}`]: direction,\n          [`${prefixCls}-label-${labelPosition}`]: labelPosition,\n          [`${prefixCls}-last`]:\n            index.value === (reverse === true ? 0 : items.length - 1),\n        },\n      ];\n    });\n\n    const dotLineCls = computed(() => {\n      return [\n        `${prefixCls}-dot-line`,\n        `${prefixCls}-dot-line-is-${contextDirection.value}`,\n      ];\n    });\n\n    const computedDotLineStyle = computed(() => {\n      const { direction } = context! || {};\n      return {\n        [direction === 'horizontal' ? 'borderTopStyle' : 'borderLeftStyle']:\n          props.lineType,\n        ...(props.lineColor ? { borderColor: props.lineColor } : {}),\n      };\n    });\n\n    const dotTypeCls = computed(() => {\n      return [`${prefixCls}-dot`, `${prefixCls}-dot-${props.dotType}`];\n    });\n\n    const computedDotStyle = computed(() => {\n      return {\n        [props.dotType === 'solid' ? 'backgroundColor' : 'borderColor']:\n          props.dotColor,\n      };\n    });\n\n    return {\n      cls,\n      dotLineCls,\n      dotTypeCls,\n      prefixCls,\n      computedDotLineStyle,\n      computedDotStyle,\n      labelPosition: contextLabelPosition,\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/timeline/style/horizontal.less",
    "content": ".@{timeline-prefix-cls}-direction-horizontal {\n  display: flex;\n  flex-direction: row;\n\n  &.@{timeline-prefix-cls}-is-reverse {\n    flex-direction: row-reverse;\n  }\n}\n\n.@{timeline-prefix-cls}-item-dot-line-is-horizontal {\n  top: 50%;\n  right: @timeline-horizontal-margin-line-right;\n  left: @timeline-dot-size-width + @timeline-horizontal-margin-line-left;\n  width: unset;\n  height: @timeline-size-line-width;\n  border-top-width: @timeline-size-line-width;\n  border-left: none;\n  transform: translateY(-50%);\n}\n\n.@{timeline-prefix-cls}-item-horizontal-bottom,\n.@{timeline-prefix-cls}-item-horizontal-top {\n  flex: 1;\n  min-height: unset;\n  padding-right: 0;\n  padding-left: 0;\n\n  > .@{timeline-prefix-cls}-item-dot-wrapper {\n    top: 0;\n    width: 100%;\n    height: auto;\n\n    .@{timeline-prefix-cls}-item-dot {\n      top: unset;\n      margin-top: unset;\n    }\n\n    .@{timeline-prefix-cls}-item-dot-content {\n      height: 6px;\n      line-height: 6px;\n    }\n  }\n}\n\n.@{timeline-prefix-cls}-item-horizontal-top {\n  padding-top: @timeline-dot-size-width;\n\n  > .@{timeline-prefix-cls}-item-dot-wrapper {\n    top: 0;\n    bottom: unset;\n  }\n\n  > .@{timeline-prefix-cls}-item-content-wrapper {\n    margin-top: @timeline-horizontal-margin-content-spacing;\n    margin-left: 0;\n  }\n}\n\n.@{timeline-prefix-cls}-item-horizontal-bottom {\n  padding-bottom: @timeline-dot-size-width;\n\n  > .@{timeline-prefix-cls}-item-dot-wrapper {\n    top: unset;\n    bottom: 0;\n  }\n\n  > .@{timeline-prefix-cls}-item-content-wrapper {\n    margin-bottom: @timeline-horizontal-margin-content-spacing;\n    margin-left: 0;\n  }\n}\n\n.@{timeline-prefix-cls}-alternate.@{timeline-prefix-cls}-direction-horizontal {\n  align-items: center;\n  min-height: 200px;\n  overflow: visible;\n\n  .@{timeline-prefix-cls}-item-horizontal-bottom {\n    margin-top: @timeline-dot-size-width;\n    transform: translateY(-50%);\n  }\n\n  .@{timeline-prefix-cls}-item-horizontal-top {\n    margin-top: -@timeline-dot-size-width;\n    transform: translateY(50%);\n  }\n}\n"
  },
  {
    "path": "packages/web-vue/components/timeline/style/index.less",
    "content": "@import './token.less';\n\n@timeline-prefix-cls: ~'@{prefix}-timeline';\n@timeline-item-prefix-cls: ~'@{prefix}-timeline-item';\n\n.@{timeline-prefix-cls} {\n  display: flex;\n  flex-direction: column;\n\n  &-item {\n    position: relative;\n    min-height: @timeline-item-min-height;\n    padding-left: @timeline-dot-size-width;\n    color: @timeline-color-content-text;\n    font-size: @timeline-font-content-size;\n\n    &-label {\n      color: @timeline-color-label-text;\n      font-size: @timeline-font-label-size;\n      line-height: 1.667;\n    }\n\n    &-content {\n      margin-bottom: @timeline-vertical-margin-content-bottom;\n      color: @timeline-color-content-text;\n      font-size: @timeline-font-content-size;\n      line-height: 1.5715;\n\n      &-wrapper {\n        position: relative;\n        margin-left: @timeline-vertical-margin-content-left;\n      }\n    }\n  }\n}\n\n// 节点的样式\n.@{timeline-prefix-cls}-item {\n  &&-last {\n    > .@{timeline-prefix-cls}-item-dot-wrapper\n      .@{timeline-prefix-cls}-item-dot-line {\n      display: none;\n    }\n  }\n\n  &-dot-wrapper {\n    position: absolute;\n    left: 0;\n    height: 100%;\n    text-align: center;\n\n    .@{timeline-prefix-cls}-item-dot-content {\n      position: relative;\n      width: @timeline-dot-size-width;\n      height: 1.5715 * @timeline-font-content-size;\n      line-height: $height;\n    }\n  }\n\n  &-dot {\n    position: relative;\n    top: 50%;\n    box-sizing: border-box;\n    width: @timeline-dot-size-width;\n    height: @timeline-dot-size-width;\n    margin-top: -50%;\n    color: @timeline-color-dot-bg;\n    border-radius: @timeline-dot-border-radius;\n\n    &-solid {\n      background-color: @timeline-color-dot-bg;\n    }\n\n    &-hollow {\n      background-color: @timeline-color-dot-bg_hollow;\n      border: @timeline-dot-border-width_hollow solid @timeline-color-dot-bg;\n    }\n\n    &-custom {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      display: inline-flex;\n      box-sizing: border-box;\n      color: @timeline-color-dot-bg;\n      background-color: var(~'@{arco-cssvars-prefix}-color-bg-2');\n      transform: translateX(-50%) translateY(-50%);\n      transform-origin: center;\n\n      svg {\n        color: inherit;\n      }\n    }\n  }\n\n  &-dot-line {\n    // bottom: -7px;\n    position: absolute;\n    top: 1.5715 * (@timeline-font-content-size / 2) +\n      (@timeline-dot-size-width / 2) + @timeline-vertical-margin-line-top;\n    bottom: -(1.5715 * (@timeline-font-content-size / 2) -\n          (@timeline-dot-size-width / 2) - @timeline-vertical-margin-line-bottom);\n    left: 50%;\n    box-sizing: border-box;\n    width: @timeline-size-line-width;\n    border-color: @timeline-color-line-bg;\n    border-left-width: @timeline-size-line-width;\n    transform: translateX(-50%);\n  }\n}\n\n/* reverse  */\n.@{timeline-prefix-cls} {\n  &-is-reverse {\n    flex-direction: column-reverse;\n  }\n}\n\n/* mode  */\n.@{timeline-prefix-cls} {\n  &-alternate {\n    overflow: hidden;\n\n    .@{timeline-item-prefix-cls}-vertical-left {\n      padding-left: 0;\n\n      > .@{timeline-item-prefix-cls}-dot-wrapper {\n        left: 50%;\n      }\n\n      > .@{timeline-item-prefix-cls}-content-wrapper {\n        left: 50%;\n        width: 50%;\n        margin-left: @timeline-vertical-margin-content-left +\n          @timeline-dot-size-width;\n        padding-right: @timeline-vertical-margin-content-left +\n          @timeline-dot-size-width;\n      }\n    }\n\n    .@{timeline-item-prefix-cls}-vertical-right {\n      padding-right: 0;\n\n      > .@{timeline-item-prefix-cls}-dot-wrapper {\n        left: 50%;\n      }\n\n      > .@{timeline-item-prefix-cls}-content-wrapper {\n        left: 0;\n        width: 50%;\n        margin-right: 0;\n        margin-left: -@timeline-vertical-margin-content-left;\n        padding-right: @timeline-vertical-margin-content-left;\n        text-align: right;\n      }\n    }\n  }\n\n  &-right {\n    .@{timeline-item-prefix-cls}-vertical-right {\n      padding-right: @timeline-dot-size-width;\n\n      > .@{timeline-item-prefix-cls}-dot-wrapper {\n        right: 0;\n        left: unset;\n      }\n\n      > .@{timeline-item-prefix-cls}-content-wrapper {\n        margin-right: @timeline-vertical-margin-content-left;\n        margin-left: 0;\n        text-align: right;\n      }\n    }\n  }\n}\n\n/* label position */\n.@{timeline-prefix-cls}-item {\n  &-label-relative {\n    > .@{timeline-prefix-cls}-item-label {\n      position: absolute;\n      top: 0;\n      box-sizing: border-box;\n      max-width: 100px;\n    }\n  }\n\n  &-vertical-left&-label-relative {\n    margin-left: 100px;\n\n    > .@{timeline-prefix-cls}-item-label {\n      left: 0;\n      padding-right: @timeline-vertical-margin-content-left;\n      text-align: right;\n      transform: translateX(-100%);\n    }\n  }\n\n  &-vertical-right&-label-relative {\n    margin-right: 100px;\n\n    > .@{timeline-prefix-cls}-item-label {\n      right: 0;\n      padding-left: @timeline-vertical-margin-content-left;\n      text-align: left;\n      transform: translateX(100%);\n    }\n  }\n\n  &-horizontal-top&-label-relative {\n    margin-top: 50px;\n\n    > .@{timeline-prefix-cls}-item-label {\n      padding-bottom: @timeline-horizontal-margin-content-spacing;\n      transform: translateY(-100%);\n    }\n\n    > .@{timeline-prefix-cls}-item-content {\n      margin-bottom: 0;\n    }\n  }\n\n  &-horizontal-bottom&-label-relative {\n    margin-bottom: 50px;\n\n    > .@{timeline-prefix-cls}-item-content {\n      margin-bottom: 0;\n    }\n\n    > .@{timeline-prefix-cls}-item-label {\n      top: unset;\n      bottom: 0;\n      padding-top: @timeline-horizontal-margin-content-spacing;\n      text-align: left;\n      transform: translateY(100%);\n    }\n  }\n}\n\n.@{timeline-prefix-cls}-alternate {\n  .@{timeline-prefix-cls}-item-vertical-left.@{timeline-prefix-cls}-item-label-relative {\n    margin-left: 0;\n\n    > .@{timeline-prefix-cls}-item-label {\n      left: 0;\n      width: 50%;\n      max-width: unset;\n      transform: none;\n    }\n  }\n\n  .@{timeline-prefix-cls}-item-vertical-right.@{timeline-prefix-cls}-item-label-relative {\n    margin-right: 0;\n\n    > .@{timeline-prefix-cls}-item-label {\n      right: 0;\n      width: 50%;\n      max-width: unset;\n      transform: none;\n    }\n  }\n\n  .@{timeline-prefix-cls}-item-horizontal-top.@{timeline-prefix-cls}-item-label-relative {\n    margin-top: 0;\n  }\n\n  .@{timeline-prefix-cls}-item-horizontal-bottom.@{timeline-prefix-cls}-item-label-relative {\n    margin-bottom: 0;\n  }\n}\n\n@import './horizontal.less';\n"
  },
  {
    "path": "packages/web-vue/components/timeline/style/index.ts",
    "content": "import '../../style/index.less';\nimport './index.less';\n"
  },
  {
    "path": "packages/web-vue/components/timeline/style/token.less",
    "content": "@import '../../style/theme/index.less';\n\n@timeline-color-content-text: var(~'@{arco-cssvars-prefix}-color-text-1');\n@timeline-color-label-text: var(~'@{arco-cssvars-prefix}-color-text-3');\n@timeline-color-dot-bg: @color-primary-6;\n@timeline-color-line-bg: var(~'@{arco-cssvars-prefix}-color-neutral-3');\n\n@timeline-font-content-size: @font-size-body-3;\n@timeline-font-label-size: @font-size-body-1;\n@timeline-item-min-height: 78px;\n\n@timeline-dot-size-width: 6px;\n@timeline-dot-border-radius: @radius-circle;\n@timeline-dot-border-width_hollow: @border-2;\n\n@timeline-color-dot-bg_hollow: var(~'@{arco-cssvars-prefix}-color-bg-2');\n@timeline-horizontal-margin-content-spacing: @spacing-7;\n@timeline-horizontal-margin-line-left: @spacing-3;\n@timeline-horizontal-margin-line-right: @spacing-2;\n\n@timeline-vertical-margin-content-bottom: @spacing-2;\n@timeline-vertical-margin-content-left: @spacing-7;\n@timeline-vertical-margin-line-top: @spacing-2;\n@timeline-vertical-margin-line-bottom: @spacing-2;\n@timeline-size-line-width: @border-1;\n"
  },
  {
    "path": "packages/web-vue/components/timeline/timeline.tsx",
    "content": "import {\n  defineComponent,\n  PropType,\n  provide,\n  reactive,\n  computed,\n  toRefs,\n} from 'vue';\nimport { getPrefixCls } from '../_utils/global-config';\nimport type { ModeType, LabelPositionType } from './interface';\nimport { timelineInjectionKey } from './context';\nimport Item from './item.vue';\nimport Spin from '../spin';\nimport { Direction } from '../_utils/constant';\nimport { useChildrenComponents } from '../_hooks/use-children-components';\n\nexport default defineComponent({\n  name: 'Timeline',\n  components: {\n    Item,\n    Spin,\n  },\n  props: {\n    /**\n     * @zh 是否倒序\n     * @en Whether reverse order\n     */\n    reverse: {\n      type: Boolean,\n    },\n    /**\n     * @zh 时间轴方向\n     * @en Timeline direction\n     * @values 'horizontal', 'vertical'\n     */\n    direction: {\n      type: String as PropType<Direction>,\n      default: 'vertical',\n    },\n    /**\n     * @zh 时间轴的展示类型：时间轴在左侧，时间轴在右侧, 交替出现。\n     * @en The display mode of Timeline\n     * @values 'left','right','top','bottom','alternate'\n     */\n    mode: {\n      type: String as PropType<ModeType>,\n      default: 'left',\n    },\n    /**\n     * @zh 是否展示幽灵节点，设置为 true 时候只展示幽灵节点。传入ReactNode时，会作为节点内容展示。\n     * @en Whether to display ghost nodes. When set to true, only ghost nodes are displayed. When passed to ReactNode, it will be displayed as node content\n     */\n    pending: {\n      type: [Boolean, String],\n    },\n    /**\n     * @zh 设置标签文本的位置\n     * @en Position of label text\n     * @values 'relative', 'same'\n     */\n    labelPosition: {\n      type: String as PropType<LabelPositionType>,\n      default: 'same',\n    },\n  },\n  /**\n   * @zh 幽灵节点\n   * @en Custom dot\n   * @slot dot\n   */\n  setup(props, { slots }) {\n    const prefixCls = getPrefixCls('timeline');\n    const hasPending = computed(() => {\n      return props.pending || slots.pending;\n    });\n    const { children, components } = useChildrenComponents('TimelineItem');\n    const {\n      reverse: reverseRef,\n      direction: directionRef,\n      labelPosition: labelPositionRef,\n      mode: modeRef,\n    } = toRefs(props);\n\n    const timelineContext = reactive({\n      items: components,\n      direction: directionRef,\n      reverse: reverseRef,\n      labelPosition: labelPositionRef,\n      mode: modeRef,\n    });\n    provide(timelineInjectionKey, timelineContext);\n\n    const cls = computed(() => {\n      return [\n        prefixCls,\n        `${prefixCls}-${props.mode}`,\n        `${prefixCls}-direction-${props.direction}`,\n        {\n          [`${prefixCls}-is-reverse`]: props.reverse,\n        },\n      ];\n    });\n\n    return () => {\n      if (hasPending.value) {\n        children.value = slots.default?.().concat(\n          <Item\n            v-slots={{\n              dot: () => slots.dot?.() ?? <Spin size={12} />,\n            }}\n            lineType=\"dashed\"\n          >\n            {props.pending !== true && <div>{props.pending}</div>}\n          </Item>\n        );\n      } else {\n        children.value = slots.default?.();\n      }\n\n      return (\n        <div role=\"list\" class={cls.value}>\n          {children.value}\n        </div>\n      );\n    };\n  },\n});\n"
  },
  {
    "path": "packages/web-vue/components/tooltip/CHANGELOG.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.18.0-beta.2\n\n`2022-02-25`\n\n### 💅 Style\n\n- Optimized display animation, consistent with the react version ([#733](https://github.com/arco-design/arco-design-vue/pull/733))\n\n\n## 2.17.0\n\n`2022-02-11`\n\n### 🐛 BugFix\n\n- Fix the issue of losing trigger style when loading on demand ([#674](https://github.com/arco-design/arco-design-vue/pull/674))\n\n"
  },
  {
    "path": "packages/web-vue/components/tooltip/CHANGELOG.zh-CN.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.18.0-beta.2\n\n`2022-02-25`\n\n### 💅 样式更新\n\n- 优化显示动画，同 react 版本保持一致 ([#733](https://github.com/arco-design/arco-design-vue/pull/733))\n\n\n## 2.17.0\n\n`2022-02-11`\n\n### 🐛 问题修复\n\n- 修复按需加载时丢失 trigger 样式的问题 ([#674](https://github.com/arco-design/arco-design-vue/pull/674))\n\n"
  },
  {
    "path": "packages/web-vue/components/tooltip/README.en-US.md",
    "content": "```yaml\nmeta:\n  type: Component\n  category: Data Display\ntitle: Tooltip\ndescription: A tooltip that popup when the mouse hovers, focus, or click on a component.\n```\n\n*Auto translate by google.*\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/mini.md\n\n@import ./__demo__/position.md\n\n@import ./__demo__/color.md\n\n`<tooltip>` 组件继承 `<trigger>` 组件的全部属性\n\n## API\n\n\n### `<tooltip>` Props\n\n|Attribute|Description|Type|Default|\n|---|---|---|:---:|\n|popup-visible **(v-model)**|Whether the tooltip is visible|`boolean`|`-`|\n|default-popup-visible|Whether the tooltip is visible by default (uncontrolled mode)|`boolean`|`false`|\n|disabled|Whether the tooltip is disabled|`boolean`|`false`|\n|content|Tooltip content|`string`|`-`|\n|position|Popup position|`'top' \\| 'tl' \\| 'tr' \\| 'bottom' \\| 'bl' \\| 'br' \\| 'left' \\| 'lt' \\| 'lb' \\| 'right' \\| 'rt' \\| 'rb'`|`'top'`|\n|mini|Whether to display as a mini size|`boolean`|`false`|\n|background-color|Background color of the popover|`string`|`-`|\n|content-class|The class name of the popup content|`ClassName`|`-`|\n|content-style|The style of the popup content|`CSSProperties`|`-`|\n|arrow-class|The class name of the popup arrow|`ClassName`|`-`|\n|arrow-style|The style of the popup arrow|`CSSProperties`|`-`|\n|popup-container|Mount container for popup|`string \\| HTMLElement`|`-`|\n### `<tooltip>` Events\n\n|Event Name|Description|Parameters|\n|---|---|---|\n|popup-visible-change|Emitted when the tooltip display status changes|visible: `boolean`|\n### `<tooltip>` Slots\n\n|Slot Name|Description|Parameters|\n|---|---|---|\n|content|Content|-|\n\n\n"
  },
  {
    "path": "packages/web-vue/components/tooltip/README.zh-CN.md",
    "content": "```yaml\nmeta:\n  type: 组件\n  category: 数据展示\ntitle: 文字气泡 Tooltip\ndescription: 鼠标悬停、聚焦或点击在某个组件时，弹出的文字提示。\n```\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/mini.md\n\n@import ./__demo__/position.md\n\n@import ./__demo__/color.md\n\n`<tooltip>` 组件继承 `<trigger>` 组件的全部属性\n\n## API\n\n\n### `<tooltip>` Props\n\n|参数名|描述|类型|默认值|\n|---|---|---|:---:|\n|popup-visible **(v-model)**|文字气泡是否可见|`boolean`|`-`|\n|default-popup-visible|文字气泡默认是否可见（非受控模式）|`boolean`|`false`|\n|disabled|文字气泡是否禁用|`boolean`|`false`|\n|content|文字气泡内容|`string`|`-`|\n|position|弹出位置|`'top' \\| 'tl' \\| 'tr' \\| 'bottom' \\| 'bl' \\| 'br' \\| 'left' \\| 'lt' \\| 'lb' \\| 'right' \\| 'rt' \\| 'rb'`|`'top'`|\n|mini|是否展示为迷你尺寸|`boolean`|`false`|\n|background-color|弹出框的背景颜色|`string`|`-`|\n|content-class|弹出框内容的类名|`ClassName`|`-`|\n|content-style|弹出框内容的样式|`CSSProperties`|`-`|\n|arrow-class|弹出框箭头的类名|`ClassName`|`-`|\n|arrow-style|弹出框箭头的样式|`CSSProperties`|`-`|\n|popup-container|弹出框的挂载容器|`string \\| HTMLElement`|`-`|\n### `<tooltip>` Events\n\n|事件名|描述|参数|\n|---|---|---|\n|popup-visible-change|文字气泡显示状态改变时触发|visible: `boolean`|\n### `<tooltip>` Slots\n\n|插槽名|描述|参数|\n|---|:---:|---|\n|content|内容|-|\n\n\n"
  },
  {
    "path": "packages/web-vue/components/tooltip/TEMPLATE.md",
    "content": "## zh-CN\n```yaml\nmeta:\n  type: 组件\n  category: 数据展示\ntitle: 文字气泡 Tooltip\ndescription: 鼠标悬停、聚焦或点击在某个组件时，弹出的文字提示。\n```\n---\n## en-US\n```yaml\nmeta:\n  type: Component\n  category: Data Display\ntitle: Tooltip\ndescription: A tooltip that popup when the mouse hovers, focus, or click on a component.\n```\n---\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/mini.md\n\n@import ./__demo__/position.md\n\n@import ./__demo__/color.md\n\n`<tooltip>` 组件继承 `<trigger>` 组件的全部属性\n\n## API\n\n%%API(tooltip.vue)%%\n"
  },
  {
    "path": "packages/web-vue/components/tooltip/__demo__/basic.md",
    "content": "```yaml\ntitle:\n  zh-CN: 基本用法\n  en-US: Basic Usage\n```\n\n## zh-CN\n\n鼠标移入，气泡出现，鼠标移出，气泡消失。\n\n---\n\n## en-US\n\nWhen the mouse is moved in, the tooltip appears, and when the mouse is moved out, the tooltip disappears.\n\n---\n\n```vue\n<template>\n  <a-space>\n    <a-tooltip content=\"This is tooltip content\">\n      <a-button>Mouse over to display tooltip</a-button>\n    </a-tooltip>\n    <a-tooltip content=\"This is a two-line tooltip content.This is a two-line tooltip content.\">\n      <a-button>Mouse over to display tooltip</a-button>\n    </a-tooltip>\n  </a-space>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/tooltip/__demo__/color.md",
    "content": "```yaml\ntitle:\n  zh-CN: 自定义背景颜色\n  en-US: Custom Background Color\n```\n\n## zh-CN\n\n通过 `background-color` 属性自定义背景颜色。\n\n---\n\n## en-US\n\nCustomize the background color through the `background-color` property.\n\n---\n\n```vue\n<template>\n  <a-space>\n    <a-tooltip content=\"This is tooltip content\" background-color=\"#3491FA\">\n      <a-button>#3491FA</a-button>\n    </a-tooltip>\n    <a-tooltip content=\"This is tooltip content\" background-color=\"#165DFF\">\n      <a-button>#165DFF</a-button>\n    </a-tooltip>\n    <a-tooltip content=\"This is tooltip content\" background-color=\"#722ED1\">\n      <a-button>#722ED1</a-button>\n    </a-tooltip>\n  </a-space>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/tooltip/__demo__/mini.md",
    "content": "```yaml\ntitle:\n  zh-CN: 迷你尺寸\n  en-US: Mini Size\n```\n\n## zh-CN\n\n适用于小场景或数字气泡样式。\n\n---\n\n## en-US\n\nSuitable for small scenes or digital tooltip styles.\n\n---\n\n```vue\n<template>\n  <a-tooltip content=\"1234\" position=\"top\" mini>\n    <a-button>Mouse over to display tooltip</a-button>\n  </a-tooltip>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/tooltip/__demo__/position.md",
    "content": "```yaml\ntitle:\n  zh-CN: 位置\n  en-US: Position\n```\n\n## zh-CN\n\n文字气泡支持 12 个不同的方位。分别为：`上左`、`上`、`上右`、`下左`、`下`、`下右`、`左上`、`左`、`左下`、`右上`、`右`、`右下`。\n\n---\n\n## en-US\n\nThe tooltip supports 12 different orientations. They are: `upper left`, `upper`, `upper right`, `lower left`, `down`, `lower right`, `upper left`, `left`, `lower left`, `upper right`, `right`, `lower right`.\n\n---\n\n```vue\n<template>\n  <div :style=\"{position: 'relative', width: '440px', height: '280px'}\">\n    <a-tooltip content=\"This is a Tooltip\" position=\"tl\">\n      <a-button class=\"button\" :style=\"{position: 'absolute',top:'0',left:'70px'}\">TL</a-button>\n    </a-tooltip>\n    <a-tooltip content=\"This is a Tooltip\" position=\"top\">\n      <a-button class=\"button\" :style=\"{position: 'absolute',top:'0',left:'180px'}\">TOP</a-button>\n    </a-tooltip>\n    <a-tooltip content=\"This is a Tooltip\" position=\"tr\">\n      <a-button class=\"button\" :style=\"{position: 'absolute',top:'0',left:'290px'}\">TR</a-button>\n    </a-tooltip>\n    <a-tooltip content=\"This is a Tooltip\" position=\"bl\">\n      <a-button class=\"button\" :style=\"{position: 'absolute',top:'240px',left:'70px'}\">BL</a-button>\n    </a-tooltip>\n    <a-tooltip content=\"This is a Tooltip\" position=\"bottom\">\n      <a-button class=\"button\" :style=\"{position: 'absolute',top:'240px',left:'180px'}\">BOTTOM</a-button>\n    </a-tooltip>\n    <a-tooltip content=\"This is a Tooltip\" position=\"br\">\n      <a-button class=\"button\" :style=\"{position: 'absolute',top:'240px',left:'290px'}\">BR</a-button>\n    </a-tooltip>\n    <a-tooltip content=\"This is a Tooltip\" position=\"lt\">\n      <a-button class=\"button\" :style=\"{position: 'absolute',top:'60px',left:'10px'}\">LT</a-button>\n    </a-tooltip>\n    <a-tooltip content=\"This is a Tooltip\" position=\"left\">\n      <a-button class=\"button\" :style=\"{position: 'absolute',top:'120px',left:'10px'}\">LEFT</a-button>\n    </a-tooltip>\n    <a-tooltip content=\"This is a Tooltip\" position=\"lb\">\n      <a-button class=\"button\" :style=\"{position: 'absolute',top:'180px',left:'10px'}\">LB</a-button>\n    </a-tooltip>\n    <a-tooltip content=\"This is a Tooltip\" position=\"rt\">\n      <a-button class=\"button\" :style=\"{position: 'absolute',top:'60px',left:'350px'}\">RT</a-button>\n    </a-tooltip>\n    <a-tooltip content=\"This is a Tooltip\" position=\"right\">\n      <a-button class=\"button\" :style=\"{position: 'absolute',top:'120px',left:'350px'}\">RIGHT</a-button>\n    </a-tooltip>\n    <a-tooltip content=\"This is a Tooltip\" position=\"rb\">\n      <a-button class=\"button\" :style=\"{position: 'absolute',top:'180px',left:'350px'}\">RB</a-button>\n    </a-tooltip>\n  </div>\n</template>\n\n<style scoped>\n.button {\n  width: 100px;\n}\n</style>\n```\n"
  },
  {
    "path": "packages/web-vue/components/tooltip/__test__/__snapshots__/demo.test.ts.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`<tooltip> demo: render [basic] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 8px; row-gap: 8px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n      <!--v-if-->Mouse over to display tooltip\n    </button>\n    <!---->\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n      <!--v-if-->Mouse over to display tooltip\n    </button>\n    <!---->\n  </div>\n</div>\"\n`;\n\nexports[`<tooltip> demo: render [color] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 8px; row-gap: 8px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n      <!--v-if-->#3491FA\n    </button>\n    <!---->\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n      <!--v-if-->#165DFF\n    </button>\n    <!---->\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n      <!--v-if-->#722ED1\n    </button>\n    <!---->\n  </div>\n</div>\"\n`;\n\nexports[`<tooltip> demo: render [mini] correctly 1`] = `\n\"<button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n  <!--v-if-->Mouse over to display tooltip\n</button>\"\n`;\n\nexports[`<tooltip> demo: render [position] correctly 1`] = `\n\"<div style=\\\\\"position: relative; width: 440px; height: 280px;\\\\\"><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal button\\\\\" type=\\\\\"button\\\\\" style=\\\\\"position: absolute; top: 0px; left: 70px;\\\\\">\n    <!--v-if-->TL\n  </button>\n  <!----><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal button\\\\\" type=\\\\\"button\\\\\" style=\\\\\"position: absolute; top: 0px; left: 180px;\\\\\">\n    <!--v-if-->TOP\n  </button>\n  <!----><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal button\\\\\" type=\\\\\"button\\\\\" style=\\\\\"position: absolute; top: 0px; left: 290px;\\\\\">\n    <!--v-if-->TR\n  </button>\n  <!----><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal button\\\\\" type=\\\\\"button\\\\\" style=\\\\\"position: absolute; top: 240px; left: 70px;\\\\\">\n    <!--v-if-->BL\n  </button>\n  <!----><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal button\\\\\" type=\\\\\"button\\\\\" style=\\\\\"position: absolute; top: 240px; left: 180px;\\\\\">\n    <!--v-if-->BOTTOM\n  </button>\n  <!----><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal button\\\\\" type=\\\\\"button\\\\\" style=\\\\\"position: absolute; top: 240px; left: 290px;\\\\\">\n    <!--v-if-->BR\n  </button>\n  <!----><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal button\\\\\" type=\\\\\"button\\\\\" style=\\\\\"position: absolute; top: 60px; left: 10px;\\\\\">\n    <!--v-if-->LT\n  </button>\n  <!----><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal button\\\\\" type=\\\\\"button\\\\\" style=\\\\\"position: absolute; top: 120px; left: 10px;\\\\\">\n    <!--v-if-->LEFT\n  </button>\n  <!----><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal button\\\\\" type=\\\\\"button\\\\\" style=\\\\\"position: absolute; top: 180px; left: 10px;\\\\\">\n    <!--v-if-->LB\n  </button>\n  <!----><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal button\\\\\" type=\\\\\"button\\\\\" style=\\\\\"position: absolute; top: 60px; left: 350px;\\\\\">\n    <!--v-if-->RT\n  </button>\n  <!----><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal button\\\\\" type=\\\\\"button\\\\\" style=\\\\\"position: absolute; top: 120px; left: 350px;\\\\\">\n    <!--v-if-->RIGHT\n  </button>\n  <!----><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal button\\\\\" type=\\\\\"button\\\\\" style=\\\\\"position: absolute; top: 180px; left: 350px;\\\\\">\n    <!--v-if-->RB\n  </button>\n  <!---->\n</div>\"\n`;\n"
  },
  {
    "path": "packages/web-vue/components/tooltip/__test__/__snapshots__/index.test.ts.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Tooltip should render tooltip 1`] = `\n\"<button>Button</button>\n<!--teleport start-->\n\n<div class=\\\\\"arco-trigger-popup arco-trigger-position-top arco-tooltip\\\\\" style=\\\\\"z-index: 1001; pointer-events: auto;\\\\\" trigger-placement=\\\\\"top\\\\\" role=\\\\\"tooltip\\\\\">\n  <transition-stub name=\\\\\"zoom-in-fade-out\\\\\" appear=\\\\\"true\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\">\n    <div class=\\\\\"arco-trigger-popup-wrapper\\\\\">\n      <div class=\\\\\"arco-trigger-content arco-tooltip-content\\\\\">content</div>\n      <div class=\\\\\"arco-trigger-arrow arco-tooltip-popup-arrow\\\\\"></div>\n    </div>\n  </transition-stub>\n</div>\n\n<!--teleport end-->\n/n\n<button>Button</button>\n<!--teleport start-->\n\n<div class=\\\\\"arco-trigger-popup arco-trigger-position-tl arco-tooltip\\\\\" style=\\\\\"z-index: 1002; pointer-events: auto;\\\\\" trigger-placement=\\\\\"tl\\\\\" role=\\\\\"tooltip\\\\\">\n  <transition-stub name=\\\\\"zoom-in-fade-out\\\\\" appear=\\\\\"true\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\">\n    <div class=\\\\\"arco-trigger-popup-wrapper\\\\\">\n      <div class=\\\\\"arco-trigger-content arco-tooltip-content\\\\\">content</div>\n      <div class=\\\\\"arco-trigger-arrow arco-tooltip-popup-arrow\\\\\"></div>\n    </div>\n  </transition-stub>\n</div>\n\n<!--teleport end-->\n/n\n<button>Button</button>\n<!--teleport start-->\n\n<div class=\\\\\"arco-trigger-popup arco-trigger-position-tr arco-tooltip\\\\\" style=\\\\\"z-index: 1003; pointer-events: auto;\\\\\" trigger-placement=\\\\\"tr\\\\\" role=\\\\\"tooltip\\\\\">\n  <transition-stub name=\\\\\"zoom-in-fade-out\\\\\" appear=\\\\\"true\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\">\n    <div class=\\\\\"arco-trigger-popup-wrapper\\\\\">\n      <div class=\\\\\"arco-trigger-content arco-tooltip-content\\\\\">content</div>\n      <div class=\\\\\"arco-trigger-arrow arco-tooltip-popup-arrow\\\\\"></div>\n    </div>\n  </transition-stub>\n</div>\n\n<!--teleport end-->\n/n\n<button>Button</button>\n<!--teleport start-->\n\n<div class=\\\\\"arco-trigger-popup arco-trigger-position-bottom arco-tooltip\\\\\" style=\\\\\"z-index: 1004; pointer-events: auto;\\\\\" trigger-placement=\\\\\"bottom\\\\\" role=\\\\\"tooltip\\\\\">\n  <transition-stub name=\\\\\"zoom-in-fade-out\\\\\" appear=\\\\\"true\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\">\n    <div class=\\\\\"arco-trigger-popup-wrapper\\\\\">\n      <div class=\\\\\"arco-trigger-content arco-tooltip-content\\\\\">content</div>\n      <div class=\\\\\"arco-trigger-arrow arco-tooltip-popup-arrow\\\\\"></div>\n    </div>\n  </transition-stub>\n</div>\n\n<!--teleport end-->\n/n\n<button>Button</button>\n<!--teleport start-->\n\n<div class=\\\\\"arco-trigger-popup arco-trigger-position-bl arco-tooltip\\\\\" style=\\\\\"z-index: 1005; pointer-events: auto;\\\\\" trigger-placement=\\\\\"bl\\\\\" role=\\\\\"tooltip\\\\\">\n  <transition-stub name=\\\\\"zoom-in-fade-out\\\\\" appear=\\\\\"true\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\">\n    <div class=\\\\\"arco-trigger-popup-wrapper\\\\\">\n      <div class=\\\\\"arco-trigger-content arco-tooltip-content\\\\\">content</div>\n      <div class=\\\\\"arco-trigger-arrow arco-tooltip-popup-arrow\\\\\"></div>\n    </div>\n  </transition-stub>\n</div>\n\n<!--teleport end-->\n/n\n<button>Button</button>\n<!--teleport start-->\n\n<div class=\\\\\"arco-trigger-popup arco-trigger-position-br arco-tooltip\\\\\" style=\\\\\"z-index: 1006; pointer-events: auto;\\\\\" trigger-placement=\\\\\"br\\\\\" role=\\\\\"tooltip\\\\\">\n  <transition-stub name=\\\\\"zoom-in-fade-out\\\\\" appear=\\\\\"true\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\">\n    <div class=\\\\\"arco-trigger-popup-wrapper\\\\\">\n      <div class=\\\\\"arco-trigger-content arco-tooltip-content\\\\\">content</div>\n      <div class=\\\\\"arco-trigger-arrow arco-tooltip-popup-arrow\\\\\"></div>\n    </div>\n  </transition-stub>\n</div>\n\n<!--teleport end-->\n/n\n<button>Button</button>\n<!--teleport start-->\n\n<div class=\\\\\"arco-trigger-popup arco-trigger-position-left arco-tooltip\\\\\" style=\\\\\"z-index: 1007; pointer-events: auto;\\\\\" trigger-placement=\\\\\"left\\\\\" role=\\\\\"tooltip\\\\\">\n  <transition-stub name=\\\\\"zoom-in-fade-out\\\\\" appear=\\\\\"true\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\">\n    <div class=\\\\\"arco-trigger-popup-wrapper\\\\\">\n      <div class=\\\\\"arco-trigger-content arco-tooltip-content\\\\\">content</div>\n      <div class=\\\\\"arco-trigger-arrow arco-tooltip-popup-arrow\\\\\"></div>\n    </div>\n  </transition-stub>\n</div>\n\n<!--teleport end-->\n/n\n<button>Button</button>\n<!--teleport start-->\n\n<div class=\\\\\"arco-trigger-popup arco-trigger-position-lt arco-tooltip\\\\\" style=\\\\\"z-index: 1008; pointer-events: auto;\\\\\" trigger-placement=\\\\\"lt\\\\\" role=\\\\\"tooltip\\\\\">\n  <transition-stub name=\\\\\"zoom-in-fade-out\\\\\" appear=\\\\\"true\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\">\n    <div class=\\\\\"arco-trigger-popup-wrapper\\\\\">\n      <div class=\\\\\"arco-trigger-content arco-tooltip-content\\\\\">content</div>\n      <div class=\\\\\"arco-trigger-arrow arco-tooltip-popup-arrow\\\\\"></div>\n    </div>\n  </transition-stub>\n</div>\n\n<!--teleport end-->\n/n\n<button>Button</button>\n<!--teleport start-->\n\n<div class=\\\\\"arco-trigger-popup arco-trigger-position-lb arco-tooltip\\\\\" style=\\\\\"z-index: 1009; pointer-events: auto;\\\\\" trigger-placement=\\\\\"lb\\\\\" role=\\\\\"tooltip\\\\\">\n  <transition-stub name=\\\\\"zoom-in-fade-out\\\\\" appear=\\\\\"true\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\">\n    <div class=\\\\\"arco-trigger-popup-wrapper\\\\\">\n      <div class=\\\\\"arco-trigger-content arco-tooltip-content\\\\\">content</div>\n      <div class=\\\\\"arco-trigger-arrow arco-tooltip-popup-arrow\\\\\"></div>\n    </div>\n  </transition-stub>\n</div>\n\n<!--teleport end-->\n/n\n<button>Button</button>\n<!--teleport start-->\n\n<div class=\\\\\"arco-trigger-popup arco-trigger-position-right arco-tooltip\\\\\" style=\\\\\"z-index: 1010; pointer-events: auto;\\\\\" trigger-placement=\\\\\"right\\\\\" role=\\\\\"tooltip\\\\\">\n  <transition-stub name=\\\\\"zoom-in-fade-out\\\\\" appear=\\\\\"true\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\">\n    <div class=\\\\\"arco-trigger-popup-wrapper\\\\\">\n      <div class=\\\\\"arco-trigger-content arco-tooltip-content\\\\\">content</div>\n      <div class=\\\\\"arco-trigger-arrow arco-tooltip-popup-arrow\\\\\"></div>\n    </div>\n  </transition-stub>\n</div>\n\n<!--teleport end-->\n/n\n<button>Button</button>\n<!--teleport start-->\n\n<div class=\\\\\"arco-trigger-popup arco-trigger-position-rt arco-tooltip\\\\\" style=\\\\\"z-index: 1011; pointer-events: auto;\\\\\" trigger-placement=\\\\\"rt\\\\\" role=\\\\\"tooltip\\\\\">\n  <transition-stub name=\\\\\"zoom-in-fade-out\\\\\" appear=\\\\\"true\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\">\n    <div class=\\\\\"arco-trigger-popup-wrapper\\\\\">\n      <div class=\\\\\"arco-trigger-content arco-tooltip-content\\\\\">content</div>\n      <div class=\\\\\"arco-trigger-arrow arco-tooltip-popup-arrow\\\\\"></div>\n    </div>\n  </transition-stub>\n</div>\n\n<!--teleport end-->\n/n\n<button>Button</button>\n<!--teleport start-->\n\n<div class=\\\\\"arco-trigger-popup arco-trigger-position-rb arco-tooltip\\\\\" style=\\\\\"z-index: 1012; pointer-events: auto;\\\\\" trigger-placement=\\\\\"rb\\\\\" role=\\\\\"tooltip\\\\\">\n  <transition-stub name=\\\\\"zoom-in-fade-out\\\\\" appear=\\\\\"true\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\">\n    <div class=\\\\\"arco-trigger-popup-wrapper\\\\\">\n      <div class=\\\\\"arco-trigger-content arco-tooltip-content\\\\\">content</div>\n      <div class=\\\\\"arco-trigger-arrow arco-tooltip-popup-arrow\\\\\"></div>\n    </div>\n  </transition-stub>\n</div>\n\n<!--teleport end-->\"\n`;\n"
  },
  {
    "path": "packages/web-vue/components/tooltip/__test__/demo.test.ts",
    "content": "import demoTest from '../../../scripts/demo-test';\n\ndemoTest('tooltip');\n"
  },
  {
    "path": "packages/web-vue/components/tooltip/__test__/index.test.ts",
    "content": "import { nextTick } from 'vue';\nimport { mount } from '@vue/test-utils';\nimport Tooltip from '../index';\n\ndescribe('Tooltip', () => {\n  test('should render tooltip', async () => {\n    const wrapper = mount(\n      {\n        template: [\n          'top',\n          'tl',\n          'tr',\n          'bottom',\n          'bl',\n          'br',\n          'left',\n          'lt',\n          'lb',\n          'right',\n          'rt',\n          'rb',\n        ]\n          .map(\n            (item) =>\n              `<a-tooltip content=\"content\" :default-popup-visible=\"true\" position=\"${item}\" :render-to-body=\"false\"><button>Button</button></a-tooltip>`\n          )\n          .join('/n'),\n      },\n      {\n        global: {\n          plugins: [Tooltip],\n        },\n      }\n    );\n\n    await nextTick();\n    expect(wrapper.html()).toMatchSnapshot();\n  });\n\n  test('should emit popupVisibleChange event', async () => {\n    const wrapper = mount(Tooltip, {\n      props: {\n        mouseEnterDelay: 0,\n        mouseLeaveDelay: 0,\n      },\n      slots: {\n        default: '<button>Button</button>',\n        content: 'Content',\n      },\n    });\n\n    await wrapper.find('button').trigger('mouseenter');\n    await wrapper.find('button').trigger('mouseleave');\n\n    expect(wrapper.emitted('popupVisibleChange')).toHaveLength(2);\n  });\n});\n"
  },
  {
    "path": "packages/web-vue/components/tooltip/index.ts",
    "content": "import type { App } from 'vue';\nimport type { ArcoOptions } from '../_utils/types';\nimport { setGlobalConfig, getComponentPrefix } from '../_utils/global-config';\nimport _Tooltip from './tooltip.vue';\n\nconst Tooltip = Object.assign(_Tooltip, {\n  install: (app: App, options?: ArcoOptions) => {\n    setGlobalConfig(app, options);\n    const componentPrefix = getComponentPrefix(options);\n\n    app.component(componentPrefix + _Tooltip.name, _Tooltip);\n  },\n});\n\nexport type TooltipInstance = InstanceType<typeof _Tooltip>;\n\nexport default Tooltip;\n"
  },
  {
    "path": "packages/web-vue/components/tooltip/style/index.less",
    "content": "@import './token.less';\n\n.@{prefix}-tooltip {\n  &-content {\n    max-width: 350px;\n    padding: @tooltip-padding-vertical @tooltip-padding-horizontal;\n    color: @tooltip-color-text;\n    font-size: @tooltip-font-size;\n    line-height: @line-height-base;\n    text-align: left;\n    word-wrap: break-word;\n    background-color: @tooltip-color-bg;\n    border-radius: @tooltip-border-radius;\n  }\n\n  &-mini {\n    padding: @tooltip-mini-padding-vertical @tooltip-mini-padding-horizontal;\n    font-size: @tooltip-mini-font-size;\n  }\n\n  &-popup-arrow {\n    background-color: @tooltip-color-bg;\n  }\n}\n"
  },
  {
    "path": "packages/web-vue/components/tooltip/style/index.ts",
    "content": "import '../../style/index.less';\nimport '../../trigger/style';\nimport './index.less';\n"
  },
  {
    "path": "packages/web-vue/components/tooltip/style/token.less",
    "content": "@import '../../style/theme/index.less';\n\n@tooltip-padding-horizontal: @spacing-6;\n@tooltip-padding-vertical: @spacing-4;\n\n@tooltip-mini-padding-horizontal: @spacing-6;\n@tooltip-mini-padding-vertical: @spacing-2;\n@tooltip-mini-font-size: @font-size-body-3;\n\n@tooltip-font-size: @font-size-body-3;\n@tooltip-border-radius: @radius-small;\n\n@tooltip-color-text: #fff;\n@tooltip-color-bg: var(~'@{arco-cssvars-prefix}-color-tooltip-bg');\n"
  },
  {
    "path": "packages/web-vue/components/tooltip/tooltip.vue",
    "content": "<template>\n  <Trigger\n    :class=\"prefixCls\"\n    trigger=\"hover\"\n    :position=\"position\"\n    :popup-visible=\"computedPopupVisible\"\n    :disabled=\"disabled\"\n    :popup-offset=\"10\"\n    show-arrow\n    :content-class=\"contentCls\"\n    :content-style=\"computedContentStyle\"\n    :arrow-class=\"arrowCls\"\n    :arrow-style=\"computedArrowStyle\"\n    :popup-container=\"popupContainer\"\n    animation-name=\"zoom-in-fade-out\"\n    auto-fit-transform-origin\n    role=\"tooltip\"\n    @popup-visible-change=\"handlePopupVisibleChange\"\n  >\n    <slot />\n    <template #content>\n      <slot name=\"content\">{{ content }}</slot>\n    </template>\n  </Trigger>\n</template>\n\n<script lang=\"ts\">\nimport type { PropType } from 'vue';\nimport { computed, CSSProperties, defineComponent, ref } from 'vue';\nimport { getPrefixCls } from '../_utils/global-config';\nimport { TriggerPosition } from '../_utils/constant';\nimport Trigger from '../trigger';\nimport { ClassName } from '../_utils/types';\n\nexport default defineComponent({\n  name: 'Tooltip',\n  components: {\n    Trigger,\n  },\n  props: {\n    /**\n     * @zh 文字气泡是否可见\n     * @en Whether the tooltip is visible\n     * @vModel\n     */\n    popupVisible: {\n      type: Boolean,\n      default: undefined,\n    },\n    /**\n     * @zh 文字气泡默认是否可见（非受控模式）\n     * @en Whether the tooltip is visible by default (uncontrolled mode)\n     */\n    defaultPopupVisible: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 文字气泡是否禁用\n     * @en Whether to disable the tooltip\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 文字气泡内容\n     * @en Tooltip content\n     */\n    content: String,\n    /**\n     * @zh 弹出位置\n     * @en Popup position\n     * @values 'top','tl','tr','bottom','bl','br','left','lt','lb','right','rt','rb'\n     */\n    position: {\n      type: String as PropType<TriggerPosition>,\n      default: 'top',\n    },\n    /**\n     * @zh 是否展示为迷你尺寸\n     * @en Whether to display as a mini size\n     */\n    mini: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 弹出框的背景颜色\n     * @en Background color of the popover\n     */\n    backgroundColor: {\n      type: String,\n    },\n    /**\n     * @zh 弹出框内容的类名\n     * @en The class name of the popup content\n     */\n    contentClass: {\n      type: [String, Array, Object] as PropType<ClassName>,\n    },\n    /**\n     * @zh 弹出框内容的样式\n     * @en The style of the popup content\n     */\n    contentStyle: {\n      type: Object as PropType<CSSProperties>,\n    },\n    /**\n     * @zh 弹出框箭头的类名\n     * @en The class name of the popup arrow\n     */\n    arrowClass: {\n      type: [String, Array, Object] as PropType<ClassName>,\n    },\n    /**\n     * @zh 弹出框箭头的样式\n     * @en The style of the popup arrow\n     */\n    arrowStyle: {\n      type: Object as PropType<CSSProperties>,\n    },\n    /**\n     * @zh 弹出框的挂载容器\n     * @en Mount container for popup\n     */\n    popupContainer: {\n      type: [String, Object] as PropType<string | HTMLElement>,\n    },\n  },\n  emits: {\n    'update:popupVisible': (visible: boolean) => true,\n    /**\n     * @zh 文字气泡显示状态改变时触发\n     * @en Emitted when the tooltip display status changes\n     * @param {boolean} visible\n     */\n    'popupVisibleChange': (visible: boolean) => true,\n  },\n  /**\n   * @zh 内容\n   * @en Content\n   * @slot content\n   */\n  setup(props, { emit }) {\n    const prefixCls = getPrefixCls('tooltip');\n\n    const _popupVisible = ref(props.defaultPopupVisible);\n    const computedPopupVisible = computed(\n      () => props.popupVisible ?? _popupVisible.value\n    );\n\n    const handlePopupVisibleChange = (visible: boolean) => {\n      _popupVisible.value = visible;\n      emit('update:popupVisible', visible);\n      emit('popupVisibleChange', visible);\n    };\n\n    const contentCls = computed(() => [\n      `${prefixCls}-content`,\n      props.contentClass,\n      { [`${prefixCls}-mini`]: props.mini },\n    ]);\n\n    const computedContentStyle = computed<CSSProperties | undefined>(() => {\n      if (props.backgroundColor || props.contentStyle) {\n        return {\n          backgroundColor: props.backgroundColor,\n          ...props.contentStyle,\n        };\n      }\n      return undefined;\n    });\n\n    const arrowCls = computed(() => [\n      `${prefixCls}-popup-arrow`,\n      props.arrowClass,\n    ]);\n\n    const computedArrowStyle = computed<CSSProperties | undefined>(() => {\n      if (props.backgroundColor || props.arrowStyle) {\n        return {\n          backgroundColor: props.backgroundColor,\n          ...props.arrowStyle,\n        };\n      }\n      return undefined;\n    });\n\n    return {\n      prefixCls,\n      computedPopupVisible,\n      contentCls,\n      computedContentStyle,\n      arrowCls,\n      computedArrowStyle,\n      handlePopupVisibleChange,\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/transfer/CHANGELOG.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.55.2\n\n`2024-05-10`\n\n### 🐛 BugFix\n\n- fix disabled behavior in transfer simple mode ([#3067](https://github.com/arco-design/arco-design-vue/pull/3067))\n\n\n## 2.54.6\n\n`2024-03-01`\n\n### 🐛 BugFix\n\n- fix disabled props not working ([#2996](https://github.com/arco-design/arco-design-vue/pull/2996))\n\n\n## 2.52.0\n\n`2023-09-22`\n\n### 🆕 Feature\n\n- add an action icon slot ([#2708](https://github.com/arco-design/arco-design-vue/pull/2708))\n\n\n## 2.50.1\n\n`2023-08-18`\n\n### 🆕 Feature\n\n- Increase the configuration properties of the search box ([#2656](https://github.com/arco-design/arco-design-vue/pull/2656))\n\n\n## 2.46.1\n\n`2023-05-26`\n\n### 🐛 BugFix\n\n- fix transfer item can be selected when disabled ([#2445](https://github.com/arco-design/arco-design-vue/pull/2445))\n\n\n## 2.45.0\n\n`2023-04-07`\n\n### 🆕 Feature\n\n- add custom header slots ([#2314](https://github.com/arco-design/arco-design-vue/pull/2314))\n\n\n## 2.44.6\n\n`2023-03-31`\n\n### 🐛 BugFix\n\n- Fix title ellipsis failure ([#2278](https://github.com/arco-design/arco-design-vue/pull/2278))\n\n\n## 2.39.0\n\n`2022-11-18`\n\n### 🆕 Feature\n\n- Added panel slot to allow custom content ([#1873](https://github.com/arco-design/arco-design-vue/pull/1873))\n- internally replaced with a virtual scrollbar ([#1873](https://github.com/arco-design/arco-design-vue/pull/1873))\n- can hide select all checkbox ([#1845](https://github.com/arco-design/arco-design-vue/pull/1845))\n\n\n## 2.38.0-beta.1\n\n`2022-10-14`\n\n### 🐛 BugFix\n\n- Fix can't scroll problem ([#1723](https://github.com/arco-design/arco-design-vue/pull/1723))\n\n\n## 2.34.0\n\n`2022-07-29`\n\n### 💎 Enhancement\n\n- item slot adds value attribute ([#1447](https://github.com/arco-design/arco-design-vue/pull/1447))\n\n\n## 2.20.1\n\n`2022-03-21`\n\n### 💅 Style\n\n- Fix the problem that the omission is not displayed after the option exceeds the width ([#854](https://github.com/arco-design/arco-design-vue/pull/854))\n\n\n## 2.18.0-beta.3\n\n`2022-02-26`\n\n### 🐛 BugFix\n\n- Fix list display issue ([#744](https://github.com/arco-design/arco-design-vue/pull/744))\n\n\n## 2.17.0\n\n`2022-02-11`\n\n### 🐛 BugFix\n\n- Fix search function should check option label ([#659](https://github.com/arco-design/arco-design-vue/pull/659))\n\n"
  },
  {
    "path": "packages/web-vue/components/transfer/CHANGELOG.zh-CN.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.55.2\n\n`2024-05-10`\n\n### 🐛 问题修复\n\n- 修复 simple 模式下禁用失效 ([#3067](https://github.com/arco-design/arco-design-vue/pull/3067))\n\n\n## 2.54.6\n\n`2024-03-01`\n\n### 🐛 问题修复\n\n- 修复 disabled 属性不生效问题 ([#2996](https://github.com/arco-design/arco-design-vue/pull/2996))\n\n\n## 2.52.0\n\n`2023-09-22`\n\n### 🆕 新增功能\n\n- 增加操作图标插槽 ([#2708](https://github.com/arco-design/arco-design-vue/pull/2708))\n\n\n## 2.50.1\n\n`2023-08-18`\n\n### 🆕 新增功能\n\n- 增加搜索框的配置属性 ([#2656](https://github.com/arco-design/arco-design-vue/pull/2656))\n\n\n## 2.46.1\n\n`2023-05-26`\n\n### 🐛 问题修复\n\n- 修复穿梭框选项被禁用时仍可以点击以及全选/半选在存在被禁用选项时错误 ([#2445](https://github.com/arco-design/arco-design-vue/pull/2445))\n\n\n## 2.45.0\n\n`2023-04-07`\n\n### 🆕 新增功能\n\n- 添加自定义标题栏插槽 ([#2314](https://github.com/arco-design/arco-design-vue/pull/2314))\n\n\n## 2.44.6\n\n`2023-03-31`\n\n### 🐛 问题修复\n\n- 修复 title 部分 ellipsis 失效 ([#2278](https://github.com/arco-design/arco-design-vue/pull/2278))\n\n\n## 2.39.0\n\n`2022-11-18`\n\n### 🆕 新增功能\n\n- 新增面板插槽，允许自定义内容 ([#1873](https://github.com/arco-design/arco-design-vue/pull/1873))\n- 内部替换为虚拟滚动条 ([#1873](https://github.com/arco-design/arco-design-vue/pull/1873))\n- 可以隐藏全选勾选框 ([#1845](https://github.com/arco-design/arco-design-vue/pull/1845))\n\n\n## 2.38.0-beta.1\n\n`2022-10-14`\n\n### 🐛 问题修复\n\n- 修复无法滚动问题 ([#1723](https://github.com/arco-design/arco-design-vue/pull/1723))\n\n\n## 2.34.0\n\n`2022-07-29`\n\n### 💎 功能优化\n\n- item 插槽增加 value 属性 ([#1447](https://github.com/arco-design/arco-design-vue/pull/1447))\n\n\n## 2.20.1\n\n`2022-03-21`\n\n### 💅 样式更新\n\n- 修复选项超出宽度后没有显示省略的问题 ([#854](https://github.com/arco-design/arco-design-vue/pull/854))\n\n\n## 2.18.0-beta.3\n\n`2022-02-26`\n\n### 🐛 问题修复\n\n- 修复列表显示问题 ([#744](https://github.com/arco-design/arco-design-vue/pull/744))\n\n\n## 2.17.0\n\n`2022-02-11`\n\n### 🐛 问题修复\n\n- 修复搜索功能应该检查选项的问题 ([#659](https://github.com/arco-design/arco-design-vue/pull/659))\n\n"
  },
  {
    "path": "packages/web-vue/components/transfer/README.en-US.md",
    "content": "\n```yaml\nmeta:\n  type: Component\n  category: Data Entry\ntitle: Transfer\ndescription: A two-column multi-select component that moves elements from one column to another in real time.\n```\n\n*Auto translate by google.*\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/search.md\n\n@import ./__demo__/one-way.md\n\n@import ./__demo__/custom.md\n\n@import ./__demo__/simple.md\n\n@import ./__demo__/tree.md\n\n@import ./__demo__/custom-header.md\n\n## API\n\n\n### `<transfer>` Props\n\n|Attribute|Description|Type|Default|version|\n|---|---|---|:---:|:---|\n|data|Data of the transfer|`TransferItem[]`|`[]`||\n|model-value **(v-model)**|Value in the target selection box|`string[]`|`-`||\n|default-value|The default value in the target selection box (uncontrolled state)|`string[]`|`[]`||\n|selected **(v-model)**|Selected option value|`string[]`|`-`||\n|default-selected|The option value selected by default (uncontrolled state)|`string[]`|`[]`||\n|disabled|Whether to disable|`boolean`|`false`||\n|simple|Whether to open the simple mode (click the option to move)|`boolean`|`false`||\n|one-way|Whether to open the one-way mode (only move to the target selection box)|`boolean`|`false`||\n|show-search|Whether to show the search input|`boolean`|`false`||\n|show-select-all|Whether show select all checkbox on the header|`boolean`|`true`|2.39.0|\n|title|The title of the source and target selection boxes|`string[]`|`['Source', 'Target']`||\n|source-input-search-props|Search box configuration for source selection box|`object`|`-`|2.51.1|\n|target-input-search-props|Search box configuration for target selection box|`object`|`-`|2.51.1|\n### `<transfer>` Events\n\n|Event Name|Description|Parameters|\n|---|---|---|\n|change|Triggered when the value of the target selection box changes|value: `string[]`|\n|select|Triggered when the selected value changes|selected: `string[]`|\n|search|Triggered when the user searches|value: `string`<br>type: `'target'\\|'source'`|\n### `<transfer>` Slots\n\n|Slot Name|Description|Parameters|version|\n|---|---|---|:---|\n|source|Source content|data: `TransferItem[]`<br>selectedKeys: `string[]`<br>onSelect: `(value: string[]) => void`|2.39.0|\n|source-title|Source Header|countTotal: `number`<br>countSelected: `number`<br>searchValue: `string`<br>checked: `boolean`<br>indeterminate: `boolean`<br>onSelectAllChange: `(checked:boolean) => void`<br>onClear: `() => void`|2.45.0|\n|to-target-icon|To target icon slot|-|2.52.0|\n|to-source-icon|To source icon slot|-|2.52.0|\n|target|Target content|data: `TransferItem[]`<br>selectedKeys: `string[]`<br>onSelect: `(value: string[]) => void`|2.39.0|\n|target-title|Target Header|countTotal: `number`<br>countSelected: `number`<br>searchValue: `string`<br>checked: `boolean`<br>indeterminate: `boolean`<br>onSelectAllChange: `(checked:boolean) => void`<br>onClear: `() => void`|2.45.0|\n|item|Option|value: `string`<br>label: `string`||\n\n\n\n\n### TransferItem\n\n|Name|Description|Type|Default|\n|---|---|---|:---:|\n|value|Option value|`string`|`-`|\n|label|Option label|`string`|`-`|\n|disabled|Whether to disable|`boolean`|`false`|\n\n\n"
  },
  {
    "path": "packages/web-vue/components/transfer/README.zh-CN.md",
    "content": "```yaml\nmeta:\n  type: 组件\n  category: 数据输入\ntitle: 数据穿梭框 Transfer\ndescription: 两栏布局的多选组件，将元素从一栏即时移到另一栏。\n```\n\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/search.md\n\n@import ./__demo__/one-way.md\n\n@import ./__demo__/custom.md\n\n@import ./__demo__/simple.md\n\n@import ./__demo__/tree.md\n\n@import ./__demo__/custom-header.md\n\n## API\n\n\n### `<transfer>` Props\n\n|参数名|描述|类型|默认值|版本|\n|---|---|---|:---:|:---|\n|data|穿梭框的数据|`TransferItem[]`|`[]`||\n|model-value **(v-model)**|目标选择框中的值|`string[]`|`-`||\n|default-value|目标选择框中默认的值（非受控状态）|`string[]`|`[]`||\n|selected **(v-model)**|选中的选项值|`string[]`|`-`||\n|default-selected|默认选中的选项值（非受控状态）|`string[]`|`[]`||\n|disabled|是否禁用|`boolean`|`false`||\n|simple|是否开启简单模式（点击选项即移动）|`boolean`|`false`||\n|one-way|是否开启单向模式（仅可移动到目标选择框）|`boolean`|`false`||\n|show-search|是否显示搜索框|`boolean`|`false`||\n|show-select-all|是否展示全选勾选框|`boolean`|`true`|2.39.0|\n|title|源选择框和目标选择框的标题|`string[]`|`['Source', 'Target']`||\n|source-input-search-props|源选择框的搜索框配置|`object`|`-`|2.51.1|\n|target-input-search-props|目标选择框的搜索框配置|`object`|`-`|2.51.1|\n### `<transfer>` Events\n\n|事件名|描述|参数|\n|---|---|---|\n|change|目标选择框的值改变时触发|value: `string[]`|\n|select|选中的值改变时触发|selected: `string[]`|\n|search|用户搜索时触发|value: `string`<br>type: `'target'\\|'source'`|\n### `<transfer>` Slots\n\n|插槽名|描述|参数|版本|\n|---|:---:|---|:---|\n|source|源面板|data: `TransferItem[]`<br>selectedKeys: `string[]`<br>onSelect: `(value: string[]) => void`|2.39.0|\n|source-title|源标题插槽|countTotal: `number`<br>countSelected: `number`<br>searchValue: `string`<br>checked: `boolean`<br>indeterminate: `boolean`<br>onSelectAllChange: `(checked:boolean) => void`<br>onClear: `() => void`|2.45.0|\n|to-target-icon|移至目标图标插槽|-|2.52.0|\n|to-source-icon|移至源图标插槽|-|2.52.0|\n|target|目标面板|data: `TransferItem[]`<br>selectedKeys: `string[]`<br>onSelect: `(value: string[]) => void`|2.39.0|\n|target-title|目标标题插槽|countTotal: `number`<br>countSelected: `number`<br>searchValue: `string`<br>checked: `boolean`<br>indeterminate: `boolean`<br>onSelectAllChange: `(checked:boolean) => void`<br>onClear: `() => void`|2.45.0|\n|item|选项|value: `string`<br>label: `string`||\n\n\n\n\n### TransferItem\n\n|参数名|描述|类型|默认值|\n|---|---|---|:---:|\n|value|选项的值|`string`|`-`|\n|label|选项的标签|`string`|`-`|\n|disabled|是否禁用|`boolean`|`false`|\n\n\n"
  },
  {
    "path": "packages/web-vue/components/transfer/TEMPLATE.md",
    "content": "## zh-CN\n\n```yaml\nmeta:\n  type: 组件\n  category: 数据输入\ntitle: 数据穿梭框 Transfer\ndescription: 两栏布局的多选组件，将元素从一栏即时移到另一栏。\n```\n\n---\n\n## en-US\n\n```yaml\nmeta:\n  type: Component\n  category: Data Entry\ntitle: Transfer\ndescription: A two-column multi-select component that moves elements from one column to another in real time.\n```\n\n---\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/search.md\n\n@import ./__demo__/one-way.md\n\n@import ./__demo__/custom.md\n\n@import ./__demo__/simple.md\n\n@import ./__demo__/tree.md\n\n@import ./__demo__/custom-header.md\n\n## API\n\n%%API(transfer.vue)%%\n\n%%INTERFACE(interface.ts)%%\n"
  },
  {
    "path": "packages/web-vue/components/transfer/__demo__/basic.md",
    "content": "```yaml\ntitle:\n  zh-CN: 基本使用\n  en-US: Basic Usage\n```\n\n## zh-CN\n\n数据穿梭框的基本用法。\n\n---\n\n## en-US\n\nBasic usage of the transfer.\n\n---\n\n```vue\n<template>\n  <a-transfer :data=\"data\" :default-value=\"value\" />\n</template>\n\n<script>\nexport default {\n  setup() {\n    const data = Array(8).fill(undefined).map((_, index) => ({\n      value: `option${index + 1}`,\n      label: `Option ${index + 1}`\n    }));\n    const value = ['option1', 'option3', 'option5'];\n\n    return {\n      data,\n      value\n    }\n  },\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/transfer/__demo__/custom-header.md",
    "content": "```yaml\ntitle:\n  zh-CN: 自定义标题栏\n  en-US: Custom Header\n```\n\n## zh-CN\n\n通过 `source-title` ,`target-title` 插槽自定义标题栏的渲染内容\n\n---\n\n## en-US\n\nCustomize the rendering content of the title bar through the `source-title` and `target-title` slots\n\n---\n\n```vue\n<template>\n  <a-transfer :data=\"data\" :default-value=\"value\">\n    <template\n      #source-title=\"{\n        countTotal,\n        countSelected,\n        checked,\n        indeterminate,\n        onSelectAllChange,\n      }\"\n    >\n      <div :style=\"styleHeader\">\n        Source Title {{ countSelected }}-{{ countTotal }}\n        <a-checkbox\n          :model-value=\"checked\"\n          :indeterminate=\"indeterminate\"\n          @change=\"onSelectAllChange\"\n        />\n      </div>\n    </template>\n\n    <template #target-title=\"{ countTotal, countSelected, onClear }\">\n      <div :style=\"styleHeader\">\n        Target Title {{ countSelected }}-{{ countTotal }}\n        <IconDelete @click=\"onClear\" />\n      </div>\n    </template>\n  </a-transfer>\n</template>\n\n<script>\nimport { IconDelete } from '@arco-design/web-vue/es/icon';\n\nexport default {\n  components: { IconDelete },\n  setup() {\n    const data = Array(8)\n      .fill(undefined)\n      .map((_, index) => ({\n        value: `option${index + 1}`,\n        label: `Option ${index + 1}`,\n      }));\n    const value = ['option1', 'option3', 'option5'];\n\n    const styleHeader = {\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'space-between',\n      paddingRight: '8px'\n    };\n\n    return {\n      styleHeader,\n      data,\n      value,\n    };\n  },\n};\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/transfer/__demo__/custom.md",
    "content": "```yaml\ntitle:\n  zh-CN: 自定义选项渲染\n  en-US: Custom Item\n```\n\n## zh-CN\n\n通过 `item` 插槽自定义选项的渲染内容。\n\n---\n\n## en-US\n\nCustomize the rendering content of the options through the `item` slot.\n\n---\n\n```vue\n\n<template>\n  <a-transfer :data=\"data\" :default-value=\"value\">\n    <template #item=\"{ label }\">\n      <icon-up />\n      {{ label }}\n    </template>\n  </a-transfer>\n</template>\n\n<script>\nexport default {\n  setup() {\n    const data = Array(8).fill(undefined).map((_, index) => {\n      return {\n        value: `option${index + 1}`,\n        label: `Option ${index + 1}`,\n        disabled: index === 1\n      }\n    });\n    const value = ['option1', 'option3', 'option5'];\n\n    return {\n      data,\n      value\n    }\n  },\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/transfer/__demo__/one-way.md",
    "content": "```yaml\ntitle:\n  zh-CN: 单向\n  en-US: One Way\n```\n\n## zh-CN\n\n通过设置 `one-way` ，使用单向模式的穿梭框。\n\n---\n\n## en-US\n\nBy setting `one-way`, the shuttle frame in one-way mode is used.\n\n---\n\n```vue\n<template>\n  <a-transfer :data=\"data\" :default-value=\"value\" one-way/>\n</template>\n\n<script>\nexport default {\n  setup() {\n    const data = Array(8).fill(undefined).map((_, index) => ({\n      value: `option${index + 1}`,\n      label: `Option ${index + 1}`\n    }));\n    const value = ['option1', 'option3', 'option5'];\n\n    return {\n      data,\n      value\n    }\n  },\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/transfer/__demo__/pagination.md",
    "content": "```yaml\ntitle:\n  zh-CN: 分页\n  en-US: Pagination\n```\n\n## zh-CN\n\n\n\n---\n\n## en-US\n\n\n\n---\n\n```vue\n<template>\n\n</template>\n\n<script>\nexport default {\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/transfer/__demo__/search.md",
    "content": "```yaml\ntitle:\n  zh-CN: 搜索\n  en-US: Search\n```\n\n## zh-CN\n\n通过设置 `show-search` 来使用带搜索框的穿梭框，可以自定义搜索函数。\n\n---\n\n## en-US\n\nYou can customize the search function by setting `show-search` to use the shuttle box with search box.\n\n---\n\n```vue\n<template>\n  <a-transfer\n    show-search\n    :data=\"data\"\n    :default-value=\"value\"\n    :source-input-search-props=\"{\n      placeholder:'source item search'\n    }\"\n    :target-input-search-props=\"{\n      placeholder:'target item search'\n    }\"\n  />\n</template>\n\n<script>\nexport default {\n  setup() {\n    const data = Array(8).fill(undefined).map((_, index) => ({\n      value: `option${index + 1}`,\n      label: `Option ${index + 1}`\n    }));\n    const value = ['option1', 'option3', 'option5'];\n\n    return {\n      data,\n      value\n    }\n  },\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/transfer/__demo__/simple.md",
    "content": "```yaml\ntitle:\n  zh-CN: 简单模式\n  en-US: Simple\n```\n\n## zh-CN\n\n通过设置 `simple` 来开启简单模式，点击选项即可移动。\n\n---\n\n## en-US\n\nTurn on the simple mode by setting `simple`, and click the option to move.\n\n---\n\n```vue\n<template>\n  <a-transfer :data=\"data\" :default-value=\"value\" simple />\n</template>\n\n<script>\nexport default {\n  setup() {\n    const data = Array(8).fill(undefined).map((_, index) => ({\n      value: `option${index + 1}`,\n      label: `Option ${index + 1}`\n    }));\n    const value = ['option1', 'option3', 'option5'];\n\n    return {\n      data,\n      value\n    }\n  },\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/transfer/__demo__/tree.md",
    "content": "```yaml\ntitle:\n  zh-CN: 树型穿梭框\n  en-US: Tree Transfer\n```\n\n## zh-CN\n\n通过穿梭框自定义接口可以实现树型穿梭框。\n\n---\n\n## en-US\n\nThe tree-type shuttle box can be realized by customizing the interface of the shuttle box.\n\n---\n\n```vue\n\n<template>\n  <a-transfer :data=\"transferData\" :default-value=\"value\">\n    <template #source=\"{data,selectedKeys,onSelect}\">\n      <a-tree\n        :checkable=\"true\"\n        checked-strategy=\"child\"\n        :checked-keys=\"selectedKeys\"\n        :data=\"getTreeData(data)\"\n        @check=\"onSelect\"\n      />\n    </template>\n  </a-transfer>\n</template>\n\n<script>\nexport default {\n  setup() {\n    const treeData = [\n      {\n        title: 'Trunk 0-0',\n        key: '0-0',\n        children: [\n          {\n            title: 'Leaf 0-0-1',\n            key: '0-0-1',\n          },\n          {\n            title: 'Branch 0-0-2',\n            key: '0-0-2',\n            children: [\n              {\n                title: 'Leaf 0-0-2-1',\n                key: '0-0-2-1'\n              },\n              {\n                title: 'Leaf 0-0-2-2',\n                key: '0-0-2-2',\n              }\n            ]\n          },\n        ],\n      },\n      {\n        title: 'Trunk 0-1',\n        key: '0-1',\n        children: [\n          {\n            title: 'Branch 0-1-1',\n            key: '0-1-1',\n            children: [\n              {\n                title: 'Leaf 0-1-1-1',\n                key: '0-1-1-1',\n              },\n              {\n                title: 'Leaf 0-1-1-2',\n                key: '0-1-1-2',\n              },\n            ]\n          },\n          {\n            title: 'Leaf 0-1-2',\n            key: '0-1-2',\n          },\n        ],\n      },\n    ];\n\n    const getTransferData = (treeData = [], transferDataSource = []) => {\n      treeData.forEach((item) => {\n        if (item.children) getTransferData(item.children, transferDataSource);\n        else transferDataSource.push({label: item.title, value: item.key});\n      });\n      return transferDataSource;\n    };\n\n    const getTreeData = (data = []) => {\n      const values = data.map(item => item.value)\n\n      const travel = (_treeData = []) => {\n        const treeDataSource = []\n        _treeData.forEach((item) => {\n          if (item.children || values.includes(item.key)) {\n            treeDataSource.push({title: item.title, key: item.key, children: travel(item.children)})\n          }\n        });\n        return treeDataSource\n      }\n\n      return travel(treeData)\n    }\n\n    const transferData = getTransferData(treeData);\n\n\n    const value = ['0-0-2-1'];\n\n    return {\n      transferData,\n      value,\n      getTreeData\n    }\n  },\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/transfer/__test__/__snapshots__/demo.test.ts.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`<transfer> demo: render [basic] correctly 1`] = `\n\"<div class=\\\\\"arco-transfer\\\\\">\n  <div class=\\\\\"arco-transfer-view arco-transfer-view-source\\\\\">\n    <div class=\\\\\"arco-transfer-view-header\\\\\"><span class=\\\\\"arco-transfer-view-header-title\\\\\"><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span><span class=\\\\\"arco-checkbox-label\\\\\">Source</span></label></span><span class=\\\\\"arco-transfer-view-header-count\\\\\">0 / 5</span></div>\n    <!--v-if-->\n    <div class=\\\\\"arco-transfer-view-body\\\\\">\n      <div class=\\\\\"arco-scrollbar arco-scrollbar-type-embed\\\\\">\n        <div class=\\\\\"arco-scrollbar-container\\\\\">\n          <div class=\\\\\"arco-list-wrapper arco-transfer-view-list\\\\\">\n            <div class=\\\\\"arco-spin arco-list-spin\\\\\">\n              <div class=\\\\\"arco-list arco-list-medium arco-list-split\\\\\">\n                <div class=\\\\\"arco-list-content-wrapper\\\\\">\n                  <!---->\n                  <div role=\\\\\"list\\\\\" class=\\\\\"arco-list-content\\\\\">\n                    <div class=\\\\\"arco-transfer-list-item\\\\\"><label class=\\\\\"arco-checkbox arco-transfer-list-item-content arco-transfer-list-item-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"option2\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span><span class=\\\\\"arco-checkbox-label\\\\\">Option 2</span></label>\n                      <!---->\n                    </div>\n                    <div class=\\\\\"arco-transfer-list-item\\\\\"><label class=\\\\\"arco-checkbox arco-transfer-list-item-content arco-transfer-list-item-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"option4\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span><span class=\\\\\"arco-checkbox-label\\\\\">Option 4</span></label>\n                      <!---->\n                    </div>\n                    <div class=\\\\\"arco-transfer-list-item\\\\\"><label class=\\\\\"arco-checkbox arco-transfer-list-item-content arco-transfer-list-item-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"option6\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span><span class=\\\\\"arco-checkbox-label\\\\\">Option 6</span></label>\n                      <!---->\n                    </div>\n                    <div class=\\\\\"arco-transfer-list-item\\\\\"><label class=\\\\\"arco-checkbox arco-transfer-list-item-content arco-transfer-list-item-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"option7\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span><span class=\\\\\"arco-checkbox-label\\\\\">Option 7</span></label>\n                      <!---->\n                    </div>\n                    <div class=\\\\\"arco-transfer-list-item\\\\\"><label class=\\\\\"arco-checkbox arco-transfer-list-item-content arco-transfer-list-item-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"option8\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span><span class=\\\\\"arco-checkbox-label\\\\\">Option 8</span></label>\n                      <!---->\n                    </div>\n                    <!---->\n                  </div>\n                  <!---->\n                </div>\n              </div>\n              <!---->\n              <!---->\n            </div>\n          </div>\n        </div>\n        <!--v-if-->\n        <!--v-if-->\n      </div>\n    </div>\n  </div>\n  <div class=\\\\\"arco-transfer-operations\\\\\"><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-round arco-btn-size-small arco-btn-status-normal arco-btn-disabled arco-btn-only-icon\\\\\" type=\\\\\"button\\\\\" disabled=\\\\\"\\\\\" tabindex=\\\\\"-1\\\\\" aria-label=\\\\\"Move selected right\\\\\"><span class=\\\\\"arco-btn-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-right\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"m16 39.513 15.556-15.557L16 8.4\\\\\"></path></svg></span></button><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-round arco-btn-size-small arco-btn-status-normal arco-btn-disabled arco-btn-only-icon\\\\\" type=\\\\\"button\\\\\" disabled=\\\\\"\\\\\" tabindex=\\\\\"-1\\\\\" aria-label=\\\\\"Move selected left\\\\\"><span class=\\\\\"arco-btn-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-left\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M32 8.4 16.444 23.956 32 39.513\\\\\"></path></svg></span></button></div>\n  <div class=\\\\\"arco-transfer-view arco-transfer-view-target\\\\\">\n    <div class=\\\\\"arco-transfer-view-header\\\\\"><span class=\\\\\"arco-transfer-view-header-title\\\\\"><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span><span class=\\\\\"arco-checkbox-label\\\\\">Target</span></label></span><span class=\\\\\"arco-transfer-view-header-count\\\\\">0 / 3</span></div>\n    <!--v-if-->\n    <div class=\\\\\"arco-transfer-view-body\\\\\">\n      <div class=\\\\\"arco-scrollbar arco-scrollbar-type-embed\\\\\">\n        <div class=\\\\\"arco-scrollbar-container\\\\\">\n          <div class=\\\\\"arco-list-wrapper arco-transfer-view-list\\\\\">\n            <div class=\\\\\"arco-spin arco-list-spin\\\\\">\n              <div class=\\\\\"arco-list arco-list-medium arco-list-split\\\\\">\n                <div class=\\\\\"arco-list-content-wrapper\\\\\">\n                  <!---->\n                  <div role=\\\\\"list\\\\\" class=\\\\\"arco-list-content\\\\\">\n                    <div class=\\\\\"arco-transfer-list-item\\\\\"><label class=\\\\\"arco-checkbox arco-transfer-list-item-content arco-transfer-list-item-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"option1\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span><span class=\\\\\"arco-checkbox-label\\\\\">Option 1</span></label>\n                      <!---->\n                    </div>\n                    <div class=\\\\\"arco-transfer-list-item\\\\\"><label class=\\\\\"arco-checkbox arco-transfer-list-item-content arco-transfer-list-item-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"option3\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span><span class=\\\\\"arco-checkbox-label\\\\\">Option 3</span></label>\n                      <!---->\n                    </div>\n                    <div class=\\\\\"arco-transfer-list-item\\\\\"><label class=\\\\\"arco-checkbox arco-transfer-list-item-content arco-transfer-list-item-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"option5\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span><span class=\\\\\"arco-checkbox-label\\\\\">Option 5</span></label>\n                      <!---->\n                    </div>\n                    <!---->\n                  </div>\n                  <!---->\n                </div>\n              </div>\n              <!---->\n              <!---->\n            </div>\n          </div>\n        </div>\n        <!--v-if-->\n        <!--v-if-->\n      </div>\n    </div>\n  </div>\n</div>\"\n`;\n\nexports[`<transfer> demo: render [custom] correctly 1`] = `\n\"<div class=\\\\\"arco-transfer\\\\\">\n  <div class=\\\\\"arco-transfer-view arco-transfer-view-source\\\\\">\n    <div class=\\\\\"arco-transfer-view-header\\\\\"><span class=\\\\\"arco-transfer-view-header-title\\\\\"><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span><span class=\\\\\"arco-checkbox-label\\\\\">Source</span></label></span><span class=\\\\\"arco-transfer-view-header-count\\\\\">0 / 5</span></div>\n    <!--v-if-->\n    <div class=\\\\\"arco-transfer-view-body\\\\\">\n      <div class=\\\\\"arco-scrollbar arco-scrollbar-type-embed\\\\\">\n        <div class=\\\\\"arco-scrollbar-container\\\\\">\n          <div class=\\\\\"arco-list-wrapper arco-transfer-view-list\\\\\">\n            <div class=\\\\\"arco-spin arco-list-spin\\\\\">\n              <div class=\\\\\"arco-list arco-list-medium arco-list-split\\\\\">\n                <div class=\\\\\"arco-list-content-wrapper\\\\\">\n                  <!---->\n                  <div role=\\\\\"list\\\\\" class=\\\\\"arco-list-content\\\\\">\n                    <div class=\\\\\"arco-transfer-list-item arco-transfer-list-item-disabled\\\\\"><label aria-disabled=\\\\\"true\\\\\" class=\\\\\"arco-checkbox arco-checkbox-disabled arco-transfer-list-item-content arco-transfer-list-item-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" disabled=\\\\\"\\\\\" value=\\\\\"option2\\\\\"><span class=\\\\\"arco-icon-hover arco-icon-hover-disabled arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span><span class=\\\\\"arco-checkbox-label\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-up\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 30.557 24.043 15 8.487 30.557\\\\\"></path></svg> Option 2</span></label>\n                      <!---->\n                    </div>\n                    <div class=\\\\\"arco-transfer-list-item\\\\\"><label class=\\\\\"arco-checkbox arco-transfer-list-item-content arco-transfer-list-item-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"option4\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span><span class=\\\\\"arco-checkbox-label\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-up\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 30.557 24.043 15 8.487 30.557\\\\\"></path></svg> Option 4</span></label>\n                      <!---->\n                    </div>\n                    <div class=\\\\\"arco-transfer-list-item\\\\\"><label class=\\\\\"arco-checkbox arco-transfer-list-item-content arco-transfer-list-item-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"option6\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span><span class=\\\\\"arco-checkbox-label\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-up\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 30.557 24.043 15 8.487 30.557\\\\\"></path></svg> Option 6</span></label>\n                      <!---->\n                    </div>\n                    <div class=\\\\\"arco-transfer-list-item\\\\\"><label class=\\\\\"arco-checkbox arco-transfer-list-item-content arco-transfer-list-item-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"option7\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span><span class=\\\\\"arco-checkbox-label\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-up\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 30.557 24.043 15 8.487 30.557\\\\\"></path></svg> Option 7</span></label>\n                      <!---->\n                    </div>\n                    <div class=\\\\\"arco-transfer-list-item\\\\\"><label class=\\\\\"arco-checkbox arco-transfer-list-item-content arco-transfer-list-item-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"option8\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span><span class=\\\\\"arco-checkbox-label\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-up\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 30.557 24.043 15 8.487 30.557\\\\\"></path></svg> Option 8</span></label>\n                      <!---->\n                    </div>\n                    <!---->\n                  </div>\n                  <!---->\n                </div>\n              </div>\n              <!---->\n              <!---->\n            </div>\n          </div>\n        </div>\n        <!--v-if-->\n        <!--v-if-->\n      </div>\n    </div>\n  </div>\n  <div class=\\\\\"arco-transfer-operations\\\\\"><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-round arco-btn-size-small arco-btn-status-normal arco-btn-disabled arco-btn-only-icon\\\\\" type=\\\\\"button\\\\\" disabled=\\\\\"\\\\\" tabindex=\\\\\"-1\\\\\" aria-label=\\\\\"Move selected right\\\\\"><span class=\\\\\"arco-btn-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-right\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"m16 39.513 15.556-15.557L16 8.4\\\\\"></path></svg></span></button><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-round arco-btn-size-small arco-btn-status-normal arco-btn-disabled arco-btn-only-icon\\\\\" type=\\\\\"button\\\\\" disabled=\\\\\"\\\\\" tabindex=\\\\\"-1\\\\\" aria-label=\\\\\"Move selected left\\\\\"><span class=\\\\\"arco-btn-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-left\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M32 8.4 16.444 23.956 32 39.513\\\\\"></path></svg></span></button></div>\n  <div class=\\\\\"arco-transfer-view arco-transfer-view-target\\\\\">\n    <div class=\\\\\"arco-transfer-view-header\\\\\"><span class=\\\\\"arco-transfer-view-header-title\\\\\"><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span><span class=\\\\\"arco-checkbox-label\\\\\">Target</span></label></span><span class=\\\\\"arco-transfer-view-header-count\\\\\">0 / 3</span></div>\n    <!--v-if-->\n    <div class=\\\\\"arco-transfer-view-body\\\\\">\n      <div class=\\\\\"arco-scrollbar arco-scrollbar-type-embed\\\\\">\n        <div class=\\\\\"arco-scrollbar-container\\\\\">\n          <div class=\\\\\"arco-list-wrapper arco-transfer-view-list\\\\\">\n            <div class=\\\\\"arco-spin arco-list-spin\\\\\">\n              <div class=\\\\\"arco-list arco-list-medium arco-list-split\\\\\">\n                <div class=\\\\\"arco-list-content-wrapper\\\\\">\n                  <!---->\n                  <div role=\\\\\"list\\\\\" class=\\\\\"arco-list-content\\\\\">\n                    <div class=\\\\\"arco-transfer-list-item\\\\\"><label class=\\\\\"arco-checkbox arco-transfer-list-item-content arco-transfer-list-item-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"option1\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span><span class=\\\\\"arco-checkbox-label\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-up\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 30.557 24.043 15 8.487 30.557\\\\\"></path></svg> Option 1</span></label>\n                      <!---->\n                    </div>\n                    <div class=\\\\\"arco-transfer-list-item\\\\\"><label class=\\\\\"arco-checkbox arco-transfer-list-item-content arco-transfer-list-item-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"option3\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span><span class=\\\\\"arco-checkbox-label\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-up\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 30.557 24.043 15 8.487 30.557\\\\\"></path></svg> Option 3</span></label>\n                      <!---->\n                    </div>\n                    <div class=\\\\\"arco-transfer-list-item\\\\\"><label class=\\\\\"arco-checkbox arco-transfer-list-item-content arco-transfer-list-item-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"option5\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span><span class=\\\\\"arco-checkbox-label\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-up\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 30.557 24.043 15 8.487 30.557\\\\\"></path></svg> Option 5</span></label>\n                      <!---->\n                    </div>\n                    <!---->\n                  </div>\n                  <!---->\n                </div>\n              </div>\n              <!---->\n              <!---->\n            </div>\n          </div>\n        </div>\n        <!--v-if-->\n        <!--v-if-->\n      </div>\n    </div>\n  </div>\n</div>\"\n`;\n\nexports[`<transfer> demo: render [custom-header] correctly 1`] = `\n\"<div class=\\\\\"arco-transfer\\\\\">\n  <div class=\\\\\"arco-transfer-view arco-transfer-view-source\\\\\">\n    <div class=\\\\\"arco-transfer-view-header\\\\\">\n      <div style=\\\\\"display: flex; align-items: center; justify-content: space-between; padding-right: 8px;\\\\\"> Source Title 0-5 <label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n          <!---->\n        </label></div>\n    </div>\n    <!--v-if-->\n    <div class=\\\\\"arco-transfer-view-body\\\\\">\n      <div class=\\\\\"arco-scrollbar arco-scrollbar-type-embed\\\\\">\n        <div class=\\\\\"arco-scrollbar-container\\\\\">\n          <div class=\\\\\"arco-list-wrapper arco-transfer-view-list\\\\\">\n            <div class=\\\\\"arco-spin arco-list-spin\\\\\">\n              <div class=\\\\\"arco-list arco-list-medium arco-list-split\\\\\">\n                <div class=\\\\\"arco-list-content-wrapper\\\\\">\n                  <!---->\n                  <div role=\\\\\"list\\\\\" class=\\\\\"arco-list-content\\\\\">\n                    <div class=\\\\\"arco-transfer-list-item\\\\\"><label class=\\\\\"arco-checkbox arco-transfer-list-item-content arco-transfer-list-item-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"option2\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span><span class=\\\\\"arco-checkbox-label\\\\\">Option 2</span></label>\n                      <!---->\n                    </div>\n                    <div class=\\\\\"arco-transfer-list-item\\\\\"><label class=\\\\\"arco-checkbox arco-transfer-list-item-content arco-transfer-list-item-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"option4\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span><span class=\\\\\"arco-checkbox-label\\\\\">Option 4</span></label>\n                      <!---->\n                    </div>\n                    <div class=\\\\\"arco-transfer-list-item\\\\\"><label class=\\\\\"arco-checkbox arco-transfer-list-item-content arco-transfer-list-item-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"option6\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span><span class=\\\\\"arco-checkbox-label\\\\\">Option 6</span></label>\n                      <!---->\n                    </div>\n                    <div class=\\\\\"arco-transfer-list-item\\\\\"><label class=\\\\\"arco-checkbox arco-transfer-list-item-content arco-transfer-list-item-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"option7\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span><span class=\\\\\"arco-checkbox-label\\\\\">Option 7</span></label>\n                      <!---->\n                    </div>\n                    <div class=\\\\\"arco-transfer-list-item\\\\\"><label class=\\\\\"arco-checkbox arco-transfer-list-item-content arco-transfer-list-item-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"option8\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span><span class=\\\\\"arco-checkbox-label\\\\\">Option 8</span></label>\n                      <!---->\n                    </div>\n                    <!---->\n                  </div>\n                  <!---->\n                </div>\n              </div>\n              <!---->\n              <!---->\n            </div>\n          </div>\n        </div>\n        <!--v-if-->\n        <!--v-if-->\n      </div>\n    </div>\n  </div>\n  <div class=\\\\\"arco-transfer-operations\\\\\"><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-round arco-btn-size-small arco-btn-status-normal arco-btn-disabled arco-btn-only-icon\\\\\" type=\\\\\"button\\\\\" disabled=\\\\\"\\\\\" tabindex=\\\\\"-1\\\\\" aria-label=\\\\\"Move selected right\\\\\"><span class=\\\\\"arco-btn-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-right\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"m16 39.513 15.556-15.557L16 8.4\\\\\"></path></svg></span></button><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-round arco-btn-size-small arco-btn-status-normal arco-btn-disabled arco-btn-only-icon\\\\\" type=\\\\\"button\\\\\" disabled=\\\\\"\\\\\" tabindex=\\\\\"-1\\\\\" aria-label=\\\\\"Move selected left\\\\\"><span class=\\\\\"arco-btn-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-left\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M32 8.4 16.444 23.956 32 39.513\\\\\"></path></svg></span></button></div>\n  <div class=\\\\\"arco-transfer-view arco-transfer-view-target\\\\\">\n    <div class=\\\\\"arco-transfer-view-header\\\\\">\n      <div style=\\\\\"display: flex; align-items: center; justify-content: space-between; padding-right: 8px;\\\\\"> Target Title 0-3 <svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-delete\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n          <path d=\\\\\"M5 11h5.5m0 0v29a1 1 0 0 0 1 1h25a1 1 0 0 0 1-1V11m-27 0H16m21.5 0H43m-5.5 0H32m-16 0V7h16v4m-16 0h16M20 18v15m8-15v15\\\\\"></path>\n        </svg></div>\n    </div>\n    <!--v-if-->\n    <div class=\\\\\"arco-transfer-view-body\\\\\">\n      <div class=\\\\\"arco-scrollbar arco-scrollbar-type-embed\\\\\">\n        <div class=\\\\\"arco-scrollbar-container\\\\\">\n          <div class=\\\\\"arco-list-wrapper arco-transfer-view-list\\\\\">\n            <div class=\\\\\"arco-spin arco-list-spin\\\\\">\n              <div class=\\\\\"arco-list arco-list-medium arco-list-split\\\\\">\n                <div class=\\\\\"arco-list-content-wrapper\\\\\">\n                  <!---->\n                  <div role=\\\\\"list\\\\\" class=\\\\\"arco-list-content\\\\\">\n                    <div class=\\\\\"arco-transfer-list-item\\\\\"><label class=\\\\\"arco-checkbox arco-transfer-list-item-content arco-transfer-list-item-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"option1\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span><span class=\\\\\"arco-checkbox-label\\\\\">Option 1</span></label>\n                      <!---->\n                    </div>\n                    <div class=\\\\\"arco-transfer-list-item\\\\\"><label class=\\\\\"arco-checkbox arco-transfer-list-item-content arco-transfer-list-item-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"option3\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span><span class=\\\\\"arco-checkbox-label\\\\\">Option 3</span></label>\n                      <!---->\n                    </div>\n                    <div class=\\\\\"arco-transfer-list-item\\\\\"><label class=\\\\\"arco-checkbox arco-transfer-list-item-content arco-transfer-list-item-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"option5\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span><span class=\\\\\"arco-checkbox-label\\\\\">Option 5</span></label>\n                      <!---->\n                    </div>\n                    <!---->\n                  </div>\n                  <!---->\n                </div>\n              </div>\n              <!---->\n              <!---->\n            </div>\n          </div>\n        </div>\n        <!--v-if-->\n        <!--v-if-->\n      </div>\n    </div>\n  </div>\n</div>\"\n`;\n\nexports[`<transfer> demo: render [one-way] correctly 1`] = `\n\"<div class=\\\\\"arco-transfer\\\\\">\n  <div class=\\\\\"arco-transfer-view arco-transfer-view-source\\\\\">\n    <div class=\\\\\"arco-transfer-view-header\\\\\"><span class=\\\\\"arco-transfer-view-header-title\\\\\"><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span><span class=\\\\\"arco-checkbox-label\\\\\">Source</span></label></span><span class=\\\\\"arco-transfer-view-header-count\\\\\">0 / 5</span></div>\n    <!--v-if-->\n    <div class=\\\\\"arco-transfer-view-body\\\\\">\n      <div class=\\\\\"arco-scrollbar arco-scrollbar-type-embed\\\\\">\n        <div class=\\\\\"arco-scrollbar-container\\\\\">\n          <div class=\\\\\"arco-list-wrapper arco-transfer-view-list\\\\\">\n            <div class=\\\\\"arco-spin arco-list-spin\\\\\">\n              <div class=\\\\\"arco-list arco-list-medium arco-list-split\\\\\">\n                <div class=\\\\\"arco-list-content-wrapper\\\\\">\n                  <!---->\n                  <div role=\\\\\"list\\\\\" class=\\\\\"arco-list-content\\\\\">\n                    <div class=\\\\\"arco-transfer-list-item\\\\\"><label class=\\\\\"arco-checkbox arco-transfer-list-item-content arco-transfer-list-item-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"option2\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span><span class=\\\\\"arco-checkbox-label\\\\\">Option 2</span></label>\n                      <!---->\n                    </div>\n                    <div class=\\\\\"arco-transfer-list-item\\\\\"><label class=\\\\\"arco-checkbox arco-transfer-list-item-content arco-transfer-list-item-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"option4\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span><span class=\\\\\"arco-checkbox-label\\\\\">Option 4</span></label>\n                      <!---->\n                    </div>\n                    <div class=\\\\\"arco-transfer-list-item\\\\\"><label class=\\\\\"arco-checkbox arco-transfer-list-item-content arco-transfer-list-item-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"option6\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span><span class=\\\\\"arco-checkbox-label\\\\\">Option 6</span></label>\n                      <!---->\n                    </div>\n                    <div class=\\\\\"arco-transfer-list-item\\\\\"><label class=\\\\\"arco-checkbox arco-transfer-list-item-content arco-transfer-list-item-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"option7\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span><span class=\\\\\"arco-checkbox-label\\\\\">Option 7</span></label>\n                      <!---->\n                    </div>\n                    <div class=\\\\\"arco-transfer-list-item\\\\\"><label class=\\\\\"arco-checkbox arco-transfer-list-item-content arco-transfer-list-item-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"option8\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span><span class=\\\\\"arco-checkbox-label\\\\\">Option 8</span></label>\n                      <!---->\n                    </div>\n                    <!---->\n                  </div>\n                  <!---->\n                </div>\n              </div>\n              <!---->\n              <!---->\n            </div>\n          </div>\n        </div>\n        <!--v-if-->\n        <!--v-if-->\n      </div>\n    </div>\n  </div>\n  <div class=\\\\\"arco-transfer-operations\\\\\"><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-round arco-btn-size-small arco-btn-status-normal arco-btn-disabled arco-btn-only-icon\\\\\" type=\\\\\"button\\\\\" disabled=\\\\\"\\\\\" tabindex=\\\\\"-1\\\\\" aria-label=\\\\\"Move selected right\\\\\"><span class=\\\\\"arco-btn-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-right\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"m16 39.513 15.556-15.557L16 8.4\\\\\"></path></svg></span></button>\n    <!--v-if-->\n  </div>\n  <div class=\\\\\"arco-transfer-view arco-transfer-view-target\\\\\">\n    <div class=\\\\\"arco-transfer-view-header\\\\\"><span class=\\\\\"arco-transfer-view-header-title\\\\\"><span class=\\\\\"arco-transfer-view-header-title-simple\\\\\">Target</span></span><span class=\\\\\"arco-icon-hover arco-transfer-view-header-clear-btn\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-delete\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M5 11h5.5m0 0v29a1 1 0 0 0 1 1h25a1 1 0 0 0 1-1V11m-27 0H16m21.5 0H43m-5.5 0H32m-16 0V7h16v4m-16 0h16M20 18v15m8-15v15\\\\\"></path></svg></span></div>\n    <!--v-if-->\n    <div class=\\\\\"arco-transfer-view-body\\\\\">\n      <div class=\\\\\"arco-scrollbar arco-scrollbar-type-embed\\\\\">\n        <div class=\\\\\"arco-scrollbar-container\\\\\">\n          <div class=\\\\\"arco-list-wrapper arco-transfer-view-list\\\\\">\n            <div class=\\\\\"arco-spin arco-list-spin\\\\\">\n              <div class=\\\\\"arco-list arco-list-medium arco-list-split\\\\\">\n                <div class=\\\\\"arco-list-content-wrapper\\\\\">\n                  <!---->\n                  <div role=\\\\\"list\\\\\" class=\\\\\"arco-list-content\\\\\">\n                    <div class=\\\\\"arco-transfer-list-item\\\\\"><span class=\\\\\"arco-transfer-list-item-content\\\\\">Option 1</span><span class=\\\\\"arco-icon-hover arco-transfer-list-item-remove-btn\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-close\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M9.857 9.858 24 24m0 0 14.142 14.142M24 24 38.142 9.858M24 24 9.857 38.142\\\\\"></path></svg></span></div>\n                    <div class=\\\\\"arco-transfer-list-item\\\\\"><span class=\\\\\"arco-transfer-list-item-content\\\\\">Option 3</span><span class=\\\\\"arco-icon-hover arco-transfer-list-item-remove-btn\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-close\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M9.857 9.858 24 24m0 0 14.142 14.142M24 24 38.142 9.858M24 24 9.857 38.142\\\\\"></path></svg></span></div>\n                    <div class=\\\\\"arco-transfer-list-item\\\\\"><span class=\\\\\"arco-transfer-list-item-content\\\\\">Option 5</span><span class=\\\\\"arco-icon-hover arco-transfer-list-item-remove-btn\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-close\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M9.857 9.858 24 24m0 0 14.142 14.142M24 24 38.142 9.858M24 24 9.857 38.142\\\\\"></path></svg></span></div>\n                    <!---->\n                  </div>\n                  <!---->\n                </div>\n              </div>\n              <!---->\n              <!---->\n            </div>\n          </div>\n        </div>\n        <!--v-if-->\n        <!--v-if-->\n      </div>\n    </div>\n  </div>\n</div>\"\n`;\n\nexports[`<transfer> demo: render [pagination] correctly 1`] = `\"\"`;\n\nexports[`<transfer> demo: render [search] correctly 1`] = `\n\"<div class=\\\\\"arco-transfer\\\\\">\n  <div class=\\\\\"arco-transfer-view arco-transfer-view-source\\\\\">\n    <div class=\\\\\"arco-transfer-view-header\\\\\"><span class=\\\\\"arco-transfer-view-header-title\\\\\"><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span><span class=\\\\\"arco-checkbox-label\\\\\">Source</span></label></span><span class=\\\\\"arco-transfer-view-header-count\\\\\">0 / 5</span></div>\n    <div class=\\\\\"arco-transfer-view-search\\\\\"><span class=\\\\\"arco-input-wrapper arco-input-search\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" placeholder=\\\\\"source item search\\\\\" value=\\\\\"\\\\\"><!----><span class=\\\\\"arco-input-suffix\\\\\"><!----><span class=\\\\\"arco-icon-hover\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-search\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M33.072 33.071c6.248-6.248 6.248-16.379 0-22.627-6.249-6.249-16.38-6.249-22.628 0-6.248 6.248-6.248 16.379 0 22.627 6.248 6.248 16.38 6.248 22.628 0Zm0 0 8.485 8.485\\\\\"></path></svg></span>\n      <!---->\n      <!----></span></span>\n    </div>\n    <div class=\\\\\"arco-transfer-view-body\\\\\">\n      <div class=\\\\\"arco-scrollbar arco-scrollbar-type-embed\\\\\">\n        <div class=\\\\\"arco-scrollbar-container\\\\\">\n          <div class=\\\\\"arco-list-wrapper arco-transfer-view-list\\\\\">\n            <div class=\\\\\"arco-spin arco-list-spin\\\\\">\n              <div class=\\\\\"arco-list arco-list-medium arco-list-split\\\\\">\n                <div class=\\\\\"arco-list-content-wrapper\\\\\">\n                  <!---->\n                  <div role=\\\\\"list\\\\\" class=\\\\\"arco-list-content\\\\\">\n                    <div class=\\\\\"arco-transfer-list-item\\\\\"><label class=\\\\\"arco-checkbox arco-transfer-list-item-content arco-transfer-list-item-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"option2\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span><span class=\\\\\"arco-checkbox-label\\\\\">Option 2</span></label>\n                      <!---->\n                    </div>\n                    <div class=\\\\\"arco-transfer-list-item\\\\\"><label class=\\\\\"arco-checkbox arco-transfer-list-item-content arco-transfer-list-item-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"option4\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span><span class=\\\\\"arco-checkbox-label\\\\\">Option 4</span></label>\n                      <!---->\n                    </div>\n                    <div class=\\\\\"arco-transfer-list-item\\\\\"><label class=\\\\\"arco-checkbox arco-transfer-list-item-content arco-transfer-list-item-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"option6\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span><span class=\\\\\"arco-checkbox-label\\\\\">Option 6</span></label>\n                      <!---->\n                    </div>\n                    <div class=\\\\\"arco-transfer-list-item\\\\\"><label class=\\\\\"arco-checkbox arco-transfer-list-item-content arco-transfer-list-item-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"option7\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span><span class=\\\\\"arco-checkbox-label\\\\\">Option 7</span></label>\n                      <!---->\n                    </div>\n                    <div class=\\\\\"arco-transfer-list-item\\\\\"><label class=\\\\\"arco-checkbox arco-transfer-list-item-content arco-transfer-list-item-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"option8\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span><span class=\\\\\"arco-checkbox-label\\\\\">Option 8</span></label>\n                      <!---->\n                    </div>\n                    <!---->\n                  </div>\n                  <!---->\n                </div>\n              </div>\n              <!---->\n              <!---->\n            </div>\n          </div>\n        </div>\n        <!--v-if-->\n        <!--v-if-->\n      </div>\n    </div>\n  </div>\n  <div class=\\\\\"arco-transfer-operations\\\\\"><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-round arco-btn-size-small arco-btn-status-normal arco-btn-disabled arco-btn-only-icon\\\\\" type=\\\\\"button\\\\\" disabled=\\\\\"\\\\\" tabindex=\\\\\"-1\\\\\" aria-label=\\\\\"Move selected right\\\\\"><span class=\\\\\"arco-btn-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-right\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"m16 39.513 15.556-15.557L16 8.4\\\\\"></path></svg></span></button><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-round arco-btn-size-small arco-btn-status-normal arco-btn-disabled arco-btn-only-icon\\\\\" type=\\\\\"button\\\\\" disabled=\\\\\"\\\\\" tabindex=\\\\\"-1\\\\\" aria-label=\\\\\"Move selected left\\\\\"><span class=\\\\\"arco-btn-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-left\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M32 8.4 16.444 23.956 32 39.513\\\\\"></path></svg></span></button></div>\n  <div class=\\\\\"arco-transfer-view arco-transfer-view-target\\\\\">\n    <div class=\\\\\"arco-transfer-view-header\\\\\"><span class=\\\\\"arco-transfer-view-header-title\\\\\"><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span><span class=\\\\\"arco-checkbox-label\\\\\">Target</span></label></span><span class=\\\\\"arco-transfer-view-header-count\\\\\">0 / 3</span></div>\n    <div class=\\\\\"arco-transfer-view-search\\\\\"><span class=\\\\\"arco-input-wrapper arco-input-search\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" placeholder=\\\\\"target item search\\\\\" value=\\\\\"\\\\\"><!----><span class=\\\\\"arco-input-suffix\\\\\"><!----><span class=\\\\\"arco-icon-hover\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-search\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M33.072 33.071c6.248-6.248 6.248-16.379 0-22.627-6.249-6.249-16.38-6.249-22.628 0-6.248 6.248-6.248 16.379 0 22.627 6.248 6.248 16.38 6.248 22.628 0Zm0 0 8.485 8.485\\\\\"></path></svg></span>\n      <!---->\n      <!----></span></span>\n    </div>\n    <div class=\\\\\"arco-transfer-view-body\\\\\">\n      <div class=\\\\\"arco-scrollbar arco-scrollbar-type-embed\\\\\">\n        <div class=\\\\\"arco-scrollbar-container\\\\\">\n          <div class=\\\\\"arco-list-wrapper arco-transfer-view-list\\\\\">\n            <div class=\\\\\"arco-spin arco-list-spin\\\\\">\n              <div class=\\\\\"arco-list arco-list-medium arco-list-split\\\\\">\n                <div class=\\\\\"arco-list-content-wrapper\\\\\">\n                  <!---->\n                  <div role=\\\\\"list\\\\\" class=\\\\\"arco-list-content\\\\\">\n                    <div class=\\\\\"arco-transfer-list-item\\\\\"><label class=\\\\\"arco-checkbox arco-transfer-list-item-content arco-transfer-list-item-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"option1\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span><span class=\\\\\"arco-checkbox-label\\\\\">Option 1</span></label>\n                      <!---->\n                    </div>\n                    <div class=\\\\\"arco-transfer-list-item\\\\\"><label class=\\\\\"arco-checkbox arco-transfer-list-item-content arco-transfer-list-item-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"option3\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span><span class=\\\\\"arco-checkbox-label\\\\\">Option 3</span></label>\n                      <!---->\n                    </div>\n                    <div class=\\\\\"arco-transfer-list-item\\\\\"><label class=\\\\\"arco-checkbox arco-transfer-list-item-content arco-transfer-list-item-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"option5\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span><span class=\\\\\"arco-checkbox-label\\\\\">Option 5</span></label>\n                      <!---->\n                    </div>\n                    <!---->\n                  </div>\n                  <!---->\n                </div>\n              </div>\n              <!---->\n              <!---->\n            </div>\n          </div>\n        </div>\n        <!--v-if-->\n        <!--v-if-->\n      </div>\n    </div>\n  </div>\n</div>\"\n`;\n\nexports[`<transfer> demo: render [simple] correctly 1`] = `\n\"<div class=\\\\\"arco-transfer arco-transfer-simple\\\\\">\n  <div class=\\\\\"arco-transfer-view arco-transfer-view-source\\\\\">\n    <div class=\\\\\"arco-transfer-view-header\\\\\"><span class=\\\\\"arco-transfer-view-header-title\\\\\"><span class=\\\\\"arco-transfer-view-header-title-simple\\\\\">Source</span></span>\n      <!--v-if-->\n    </div>\n    <!--v-if-->\n    <div class=\\\\\"arco-transfer-view-body\\\\\">\n      <div class=\\\\\"arco-scrollbar arco-scrollbar-type-embed\\\\\">\n        <div class=\\\\\"arco-scrollbar-container\\\\\">\n          <div class=\\\\\"arco-list-wrapper arco-transfer-view-list\\\\\">\n            <div class=\\\\\"arco-spin arco-list-spin\\\\\">\n              <div class=\\\\\"arco-list arco-list-medium arco-list-split\\\\\">\n                <div class=\\\\\"arco-list-content-wrapper\\\\\">\n                  <!---->\n                  <div role=\\\\\"list\\\\\" class=\\\\\"arco-list-content\\\\\">\n                    <div class=\\\\\"arco-transfer-list-item\\\\\"><span class=\\\\\"arco-transfer-list-item-content\\\\\">Option 2</span>\n                      <!---->\n                    </div>\n                    <div class=\\\\\"arco-transfer-list-item\\\\\"><span class=\\\\\"arco-transfer-list-item-content\\\\\">Option 4</span>\n                      <!---->\n                    </div>\n                    <div class=\\\\\"arco-transfer-list-item\\\\\"><span class=\\\\\"arco-transfer-list-item-content\\\\\">Option 6</span>\n                      <!---->\n                    </div>\n                    <div class=\\\\\"arco-transfer-list-item\\\\\"><span class=\\\\\"arco-transfer-list-item-content\\\\\">Option 7</span>\n                      <!---->\n                    </div>\n                    <div class=\\\\\"arco-transfer-list-item\\\\\"><span class=\\\\\"arco-transfer-list-item-content\\\\\">Option 8</span>\n                      <!---->\n                    </div>\n                    <!---->\n                  </div>\n                  <!---->\n                </div>\n              </div>\n              <!---->\n              <!---->\n            </div>\n          </div>\n        </div>\n        <!--v-if-->\n        <!--v-if-->\n      </div>\n    </div>\n  </div>\n  <!--v-if-->\n  <div class=\\\\\"arco-transfer-view arco-transfer-view-target\\\\\">\n    <div class=\\\\\"arco-transfer-view-header\\\\\"><span class=\\\\\"arco-transfer-view-header-title\\\\\"><span class=\\\\\"arco-transfer-view-header-title-simple\\\\\">Target</span></span>\n      <!--v-if-->\n    </div>\n    <!--v-if-->\n    <div class=\\\\\"arco-transfer-view-body\\\\\">\n      <div class=\\\\\"arco-scrollbar arco-scrollbar-type-embed\\\\\">\n        <div class=\\\\\"arco-scrollbar-container\\\\\">\n          <div class=\\\\\"arco-list-wrapper arco-transfer-view-list\\\\\">\n            <div class=\\\\\"arco-spin arco-list-spin\\\\\">\n              <div class=\\\\\"arco-list arco-list-medium arco-list-split\\\\\">\n                <div class=\\\\\"arco-list-content-wrapper\\\\\">\n                  <!---->\n                  <div role=\\\\\"list\\\\\" class=\\\\\"arco-list-content\\\\\">\n                    <div class=\\\\\"arco-transfer-list-item\\\\\"><span class=\\\\\"arco-transfer-list-item-content\\\\\">Option 1</span>\n                      <!---->\n                    </div>\n                    <div class=\\\\\"arco-transfer-list-item\\\\\"><span class=\\\\\"arco-transfer-list-item-content\\\\\">Option 3</span>\n                      <!---->\n                    </div>\n                    <div class=\\\\\"arco-transfer-list-item\\\\\"><span class=\\\\\"arco-transfer-list-item-content\\\\\">Option 5</span>\n                      <!---->\n                    </div>\n                    <!---->\n                  </div>\n                  <!---->\n                </div>\n              </div>\n              <!---->\n              <!---->\n            </div>\n          </div>\n        </div>\n        <!--v-if-->\n        <!--v-if-->\n      </div>\n    </div>\n  </div>\n</div>\"\n`;\n\nexports[`<transfer> demo: render [tree] correctly 1`] = `\n\"<div class=\\\\\"arco-transfer\\\\\">\n  <div class=\\\\\"arco-transfer-view arco-transfer-view-source\\\\\">\n    <div class=\\\\\"arco-transfer-view-header\\\\\"><span class=\\\\\"arco-transfer-view-header-title\\\\\"><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span><span class=\\\\\"arco-checkbox-label\\\\\">Source</span></label></span><span class=\\\\\"arco-transfer-view-header-count\\\\\">0 / 5</span></div>\n    <!--v-if-->\n    <div class=\\\\\"arco-transfer-view-body\\\\\">\n      <div class=\\\\\"arco-scrollbar arco-scrollbar-type-embed\\\\\">\n        <div class=\\\\\"arco-scrollbar-container\\\\\">\n          <div class=\\\\\"arco-tree arco-tree-checkable arco-tree-size-medium\\\\\">\n            <div class=\\\\\"arco-tree-node arco-tree-node-expanded\\\\\" data-level=\\\\\"0\\\\\" data-key=\\\\\"0-0\\\\\">\n              <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher arco-tree-node-switcher-expanded\\\\\"><span class=\\\\\"arco-icon-hover arco-tree-node-icon-hover\\\\\"><span class=\\\\\"arco-tree-node-switcher-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-caret-down\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M24.938 34.829a1.2 1.2 0 0 1-1.875 0L9.56 17.949c-.628-.785-.069-1.949.937-1.949h27.007c1.006 0 1.565 1.164.937 1.95L24.937 34.829Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path></svg></span></span></span><!-- checkbox --><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n                <!---->\n              </label><!-- 内容 --><span class=\\\\\"arco-tree-node-title\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->Trunk 0-0<!--v-if--></span></span><!-- 额外 -->\n              <!--v-if-->\n            </div>\n            <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n            <div class=\\\\\"arco-tree-node arco-tree-node-is-leaf\\\\\" data-level=\\\\\"1\\\\\" data-key=\\\\\"0-0-1\\\\\">\n              <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"><span class=\\\\\"arco-tree-node-indent-block\\\\\"></span></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher\\\\\"><!----></span><!-- checkbox --><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n                <!---->\n              </label><!-- 内容 --><span class=\\\\\"arco-tree-node-title\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->Leaf 0-0-1<!--v-if--></span></span><!-- 额外 -->\n              <!--v-if-->\n            </div>\n            <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n            <div class=\\\\\"arco-tree-node arco-tree-node-is-tail arco-tree-node-expanded\\\\\" data-level=\\\\\"1\\\\\" data-key=\\\\\"0-0-2\\\\\">\n              <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"><span class=\\\\\"arco-tree-node-indent-block\\\\\"></span></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher arco-tree-node-switcher-expanded\\\\\"><span class=\\\\\"arco-icon-hover arco-tree-node-icon-hover\\\\\"><span class=\\\\\"arco-tree-node-switcher-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-caret-down\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M24.938 34.829a1.2 1.2 0 0 1-1.875 0L9.56 17.949c-.628-.785-.069-1.949.937-1.949h27.007c1.006 0 1.565 1.164.937 1.95L24.937 34.829Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path></svg></span></span></span><!-- checkbox --><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n                <!---->\n              </label><!-- 内容 --><span class=\\\\\"arco-tree-node-title\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->Branch 0-0-2<!--v-if--></span></span><!-- 额外 -->\n              <!--v-if-->\n            </div>\n            <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n            <div class=\\\\\"arco-tree-node arco-tree-node-is-leaf arco-tree-node-is-tail\\\\\" data-level=\\\\\"2\\\\\" data-key=\\\\\"0-0-2-2\\\\\">\n              <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"><span class=\\\\\"arco-tree-node-indent-block\\\\\"></span><span class=\\\\\"arco-tree-node-indent-block arco-tree-node-indent-block-lineless\\\\\"></span></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher\\\\\"><!----></span><!-- checkbox --><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n                <!---->\n              </label><!-- 内容 --><span class=\\\\\"arco-tree-node-title\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->Leaf 0-0-2-2<!--v-if--></span></span><!-- 额外 -->\n              <!--v-if-->\n            </div>\n            <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n            <div class=\\\\\"arco-tree-node arco-tree-node-is-tail arco-tree-node-expanded\\\\\" data-level=\\\\\"0\\\\\" data-key=\\\\\"0-1\\\\\">\n              <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher arco-tree-node-switcher-expanded\\\\\"><span class=\\\\\"arco-icon-hover arco-tree-node-icon-hover\\\\\"><span class=\\\\\"arco-tree-node-switcher-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-caret-down\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M24.938 34.829a1.2 1.2 0 0 1-1.875 0L9.56 17.949c-.628-.785-.069-1.949.937-1.949h27.007c1.006 0 1.565 1.164.937 1.95L24.937 34.829Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path></svg></span></span></span><!-- checkbox --><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n                <!---->\n              </label><!-- 内容 --><span class=\\\\\"arco-tree-node-title\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->Trunk 0-1<!--v-if--></span></span><!-- 额外 -->\n              <!--v-if-->\n            </div>\n            <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n            <div class=\\\\\"arco-tree-node arco-tree-node-expanded\\\\\" data-level=\\\\\"1\\\\\" data-key=\\\\\"0-1-1\\\\\">\n              <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"><span class=\\\\\"arco-tree-node-indent-block arco-tree-node-indent-block-lineless\\\\\"></span></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher arco-tree-node-switcher-expanded\\\\\"><span class=\\\\\"arco-icon-hover arco-tree-node-icon-hover\\\\\"><span class=\\\\\"arco-tree-node-switcher-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-caret-down\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M24.938 34.829a1.2 1.2 0 0 1-1.875 0L9.56 17.949c-.628-.785-.069-1.949.937-1.949h27.007c1.006 0 1.565 1.164.937 1.95L24.937 34.829Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path></svg></span></span></span><!-- checkbox --><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n                <!---->\n              </label><!-- 内容 --><span class=\\\\\"arco-tree-node-title\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->Branch 0-1-1<!--v-if--></span></span><!-- 额外 -->\n              <!--v-if-->\n            </div>\n            <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n            <div class=\\\\\"arco-tree-node arco-tree-node-is-leaf\\\\\" data-level=\\\\\"2\\\\\" data-key=\\\\\"0-1-1-1\\\\\">\n              <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"><span class=\\\\\"arco-tree-node-indent-block arco-tree-node-indent-block-lineless\\\\\"></span><span class=\\\\\"arco-tree-node-indent-block\\\\\"></span></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher\\\\\"><!----></span><!-- checkbox --><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n                <!---->\n              </label><!-- 内容 --><span class=\\\\\"arco-tree-node-title\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->Leaf 0-1-1-1<!--v-if--></span></span><!-- 额外 -->\n              <!--v-if-->\n            </div>\n            <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n            <div class=\\\\\"arco-tree-node arco-tree-node-is-leaf arco-tree-node-is-tail\\\\\" data-level=\\\\\"2\\\\\" data-key=\\\\\"0-1-1-2\\\\\">\n              <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"><span class=\\\\\"arco-tree-node-indent-block arco-tree-node-indent-block-lineless\\\\\"></span><span class=\\\\\"arco-tree-node-indent-block\\\\\"></span></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher\\\\\"><!----></span><!-- checkbox --><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n                <!---->\n              </label><!-- 内容 --><span class=\\\\\"arco-tree-node-title\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->Leaf 0-1-1-2<!--v-if--></span></span><!-- 额外 -->\n              <!--v-if-->\n            </div>\n            <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n            <div class=\\\\\"arco-tree-node arco-tree-node-is-leaf arco-tree-node-is-tail\\\\\" data-level=\\\\\"1\\\\\" data-key=\\\\\"0-1-2\\\\\">\n              <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"><span class=\\\\\"arco-tree-node-indent-block arco-tree-node-indent-block-lineless\\\\\"></span></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher\\\\\"><!----></span><!-- checkbox --><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n                <!---->\n              </label><!-- 内容 --><span class=\\\\\"arco-tree-node-title\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->Leaf 0-1-2<!--v-if--></span></span><!-- 额外 -->\n              <!--v-if-->\n            </div>\n            <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n          </div>\n        </div>\n        <!--v-if-->\n        <!--v-if-->\n      </div>\n    </div>\n  </div>\n  <div class=\\\\\"arco-transfer-operations\\\\\"><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-round arco-btn-size-small arco-btn-status-normal arco-btn-disabled arco-btn-only-icon\\\\\" type=\\\\\"button\\\\\" disabled=\\\\\"\\\\\" tabindex=\\\\\"-1\\\\\" aria-label=\\\\\"Move selected right\\\\\"><span class=\\\\\"arco-btn-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-right\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"m16 39.513 15.556-15.557L16 8.4\\\\\"></path></svg></span></button><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-round arco-btn-size-small arco-btn-status-normal arco-btn-disabled arco-btn-only-icon\\\\\" type=\\\\\"button\\\\\" disabled=\\\\\"\\\\\" tabindex=\\\\\"-1\\\\\" aria-label=\\\\\"Move selected left\\\\\"><span class=\\\\\"arco-btn-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-left\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M32 8.4 16.444 23.956 32 39.513\\\\\"></path></svg></span></button></div>\n  <div class=\\\\\"arco-transfer-view arco-transfer-view-target\\\\\">\n    <div class=\\\\\"arco-transfer-view-header\\\\\"><span class=\\\\\"arco-transfer-view-header-title\\\\\"><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span><span class=\\\\\"arco-checkbox-label\\\\\">Target</span></label></span><span class=\\\\\"arco-transfer-view-header-count\\\\\">0 / 1</span></div>\n    <!--v-if-->\n    <div class=\\\\\"arco-transfer-view-body\\\\\">\n      <div class=\\\\\"arco-scrollbar arco-scrollbar-type-embed\\\\\">\n        <div class=\\\\\"arco-scrollbar-container\\\\\">\n          <div class=\\\\\"arco-list-wrapper arco-transfer-view-list\\\\\">\n            <div class=\\\\\"arco-spin arco-list-spin\\\\\">\n              <div class=\\\\\"arco-list arco-list-medium arco-list-split\\\\\">\n                <div class=\\\\\"arco-list-content-wrapper\\\\\">\n                  <!---->\n                  <div role=\\\\\"list\\\\\" class=\\\\\"arco-list-content\\\\\">\n                    <div class=\\\\\"arco-transfer-list-item\\\\\"><label class=\\\\\"arco-checkbox arco-transfer-list-item-content arco-transfer-list-item-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"0-0-2-1\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span><span class=\\\\\"arco-checkbox-label\\\\\">Leaf 0-0-2-1</span></label>\n                      <!---->\n                    </div>\n                    <!---->\n                  </div>\n                  <!---->\n                </div>\n              </div>\n              <!---->\n              <!---->\n            </div>\n          </div>\n        </div>\n        <!--v-if-->\n        <!--v-if-->\n      </div>\n    </div>\n  </div>\n</div>\"\n`;\n"
  },
  {
    "path": "packages/web-vue/components/transfer/__test__/demo.test.ts",
    "content": "import demoTest from '../../../scripts/demo-test';\n\ndemoTest('transfer');\n"
  },
  {
    "path": "packages/web-vue/components/transfer/__test__/index.test.ts",
    "content": "import { mount } from '@vue/test-utils';\nimport Transfer from '../index';\n\ndescribe('Transfer', () => {\n  test('should emit change event', async () => {\n    const wrapper = mount(Transfer, {\n      props: {\n        data: Array(4)\n          .fill(undefined)\n          .map((_, index) => ({\n            value: `option${index + 1}`,\n            label: `Option ${index + 1}`,\n          })),\n      },\n    });\n\n    const options = wrapper.findAll(\n      '.arco-transfer-list-item .arco-checkbox-target'\n    );\n    await options[0].setValue();\n    const moveButton = wrapper.findComponent({ name: 'Button' });\n    await moveButton.trigger('click');\n    expect(wrapper.emitted('change')[0]).toEqual([['option1']]);\n  });\n\n  test('should emit select event', async () => {\n    const wrapper = mount(Transfer, {\n      props: {\n        data: Array(4)\n          .fill(undefined)\n          .map((_, index) => ({\n            value: `option${index + 1}`,\n            label: `Option ${index + 1}`,\n          })),\n      },\n    });\n\n    const checkAll = wrapper.find(\n      '.arco-transfer-view-header .arco-checkbox-target'\n    );\n    await checkAll.setValue();\n    expect(wrapper.emitted('select')[0]).toEqual([\n      ['option1', 'option2', 'option3', 'option4'],\n    ]);\n  });\n});\n"
  },
  {
    "path": "packages/web-vue/components/transfer/context.ts",
    "content": "import { InjectionKey, Slots } from 'vue';\n\nexport interface TransferContext {\n  selected: string[];\n  slots: Slots;\n  moveTo: (values: string[], target: 'target' | 'source') => void;\n  onSelect: (value: string[]) => void;\n}\n\nexport const transferInjectionKey: InjectionKey<TransferContext> =\n  Symbol('ArcoTransfer');\n"
  },
  {
    "path": "packages/web-vue/components/transfer/index.ts",
    "content": "import type { App } from 'vue';\nimport type { ArcoOptions } from '../_utils/types';\nimport { setGlobalConfig, getComponentPrefix } from '../_utils/global-config';\nimport _Transfer from './transfer.vue';\n\nconst Transfer = Object.assign(_Transfer, {\n  install: (app: App, options?: ArcoOptions) => {\n    setGlobalConfig(app, options);\n    const componentPrefix = getComponentPrefix(options);\n\n    app.component(componentPrefix + _Transfer.name, _Transfer);\n  },\n});\n\nexport type TransferInstance = InstanceType<typeof _Transfer>;\n\nexport default Transfer;\n"
  },
  {
    "path": "packages/web-vue/components/transfer/interface.ts",
    "content": "export interface TransferItem {\n  /**\n   * @zh 选项的值\n   * @en Option value\n   */\n  value: string;\n  /**\n   * @zh 选项的标签\n   * @en Option label\n   */\n  label: string;\n  /**\n   * @zh 是否禁用\n   * @en Whether to disable\n   */\n  disabled: boolean;\n}\n\nexport interface DataInfo {\n  data: TransferItem[];\n  allValidValues: string[];\n  selected: string[];\n  validSelected: string[];\n}\n"
  },
  {
    "path": "packages/web-vue/components/transfer/style/index.less",
    "content": "@import './token.less';\n@import '../../style/mixins/index.less';\n\n@transfer-prefix-cls: ~'@{prefix}-transfer';\n\n.@{transfer-prefix-cls} {\n  display: flex;\n  align-items: center;\n\n  &-view {\n    display: flex;\n    flex-direction: column;\n    box-sizing: border-box;\n    width: @transfer-width;\n    height: @transfer-height;\n    border: @transfer-border-width solid @transfer-border-color;\n    border-radius: @transfer-border-radius;\n\n    &-search {\n      padding: @transfer-search-padding-top @transfer-search-padding-right\n        @transfer-search-padding-bottom @transfer-search-padding-left;\n    }\n\n    &-list {\n      flex: 1;\n    }\n\n    &-custom-list {\n      flex: 1;\n      overflow: auto;\n    }\n\n    &-header {\n      display: flex;\n      align-items: center;\n      padding: 0 @transfer-item-padding-horizontal;\n    }\n\n    &-header > *:first-child {\n      flex: 1;\n      .text-ellipsis();\n\n      &:not(:last-child) {\n        margin-right: 8px;\n      }\n    }\n\n    &-header {\n      height: @transfer-height-title;\n      color: @transfer-color-text-header;\n      font-weight: @transfer-font-weight-header;\n      font-size: @transfer-font-size-header;\n      line-height: $height;\n      background-color: @transfer-color-bg-header;\n\n      &-title {\n        display: flex;\n        align-items: center;\n\n        .@{prefix}-checkbox {\n          .text-ellipsis();\n\n          font-size: inherit;\n\n          &-text {\n            color: inherit;\n          }\n          // fix the title in checkbox-label ellipsis not work\n          &-label {\n            .text-ellipsis();\n          }\n        }\n        // fix simple mode the title  ellipsis not work\n        &-simple {\n          .text-ellipsis();\n        }\n      }\n\n      &-clear-btn {\n        color: @transfer-color-icon;\n        font-size: @transfer-font-size-icon;\n        cursor: pointer;\n\n        &:hover::before {\n          background-color: @transfer-color-bg-icon;\n        }\n      }\n\n      &-count {\n        margin-right: 2px;\n        color: @transfer-color-text-header-unit;\n        font-weight: normal;\n        font-size: @transfer-font-size-header-unit;\n      }\n    }\n\n    &-body {\n      flex: 1 1 auto;\n      overflow: hidden;\n\n      .@{transfer-prefix-cls}-view-empty {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n        height: 100%;\n      }\n    }\n\n    .@{prefix}-scrollbar {\n      height: 100%;\n\n      &-container {\n        height: 100%;\n        overflow: auto;\n      }\n    }\n\n    .@{prefix}-list {\n      border-radius: 0;\n\n      &-footer {\n        position: relative;\n        display: flex;\n        align-items: center;\n        box-sizing: border-box;\n        height: @transfer-height-footer;\n        padding: 0 @transfer-padding-horizontal-footer;\n      }\n\n      .@{prefix}-pagination {\n        position: absolute;\n        top: 50%;\n        right: @transfer-padding-horizontal-footer;\n        margin: 0;\n        transform: translateY(-50%);\n\n        &-jumper-input {\n          width: @transfer-pagination-width-input;\n        }\n\n        &-jumper-separator {\n          padding: 0 @transfer-pagination-gap-separator;\n        }\n      }\n    }\n\n    .@{prefix}-checkbox {\n      padding-left: 6px;\n\n      &-wrapper {\n        display: inline;\n      }\n\n      .@{prefix}-icon-hover:hover::before {\n        background-color: @transfer-color-bg-icon;\n      }\n    }\n  }\n\n  &-list-item {\n    position: relative;\n    display: flex;\n    align-items: center;\n    height: @transfer-item-height;\n    padding: 0 @transfer-item-padding-horizontal;\n    color: @transfer-item-color_default;\n    line-height: $height;\n    list-style: none;\n    background-color: @transfer-item-color-bg_default;\n    cursor: default;\n\n    &-content {\n      font-size: @transfer-item-font-size;\n      .text-ellipsis();\n    }\n\n    &-checkbox {\n      .@{prefix}-checkbox-label {\n        .text-ellipsis();\n      }\n    }\n\n    &-disabled {\n      color: @transfer-item-color_disabled;\n      background-color: @transfer-item-color-bg_disabled;\n      cursor: not-allowed;\n    }\n\n    &:not(&-disabled):hover {\n      color: @transfer-item-color_hover;\n      background-color: @transfer-item-color-bg_hover;\n    }\n\n    .@{prefix}-checkbox {\n      width: 100%;\n\n      &-text {\n        color: inherit;\n      }\n    }\n\n    &-remove-btn {\n      margin-left: auto;\n      color: @transfer-color-icon;\n      font-size: @transfer-font-size-icon;\n      cursor: pointer;\n\n      &:hover::before {\n        background-color: @transfer-color-bg-icon;\n      }\n    }\n\n    // 拖动样式\n    &-draggable::before {\n      position: absolute;\n      right: 0;\n      left: 0;\n      display: block;\n      height: @transfer-item-draggable-height-gap;\n      border-radius: ($height / 2);\n      content: '';\n    }\n\n    &-gap-bottom::before {\n      bottom: -@transfer-item-draggable-height-gap;\n      background-color: @transfer-item-draggable-color-bg-gap;\n    }\n\n    &-gap-top::before {\n      top: -@transfer-item-draggable-height-gap;\n      background-color: @transfer-item-draggable-color-bg-gap;\n    }\n\n    &-dragging {\n      color: @transfer-item-draggable-color_dragging !important;\n      background-color: @transfer-item-draggable-color-bg_dragging !important;\n    }\n\n    &-dragged {\n      animation: ~'@{prefix}-transfer-drag-item-blink' 0.4s;\n      animation-timing-function: @transition-timing-function-linear;\n    }\n  }\n\n  &-operations {\n    padding: 0 @transfer-operation-padding-horizontal;\n\n    .@{prefix}-btn {\n      display: block;\n\n      &:last-child {\n        margin-top: @transfer-operation-gap-buttons;\n      }\n    }\n\n    &-words {\n      .@{prefix}-btn {\n        width: 100%;\n        padding: 0 12px;\n        text-align: left;\n      }\n    }\n  }\n\n  &-simple {\n    .@{transfer-prefix-cls}-view-source {\n      border-right: none;\n      border-top-right-radius: 0;\n      border-bottom-right-radius: 0;\n    }\n\n    .@{transfer-prefix-cls}-view-target {\n      border-top-left-radius: 0;\n      border-bottom-left-radius: 0;\n    }\n  }\n\n  &-disabled {\n    .@{transfer-prefix-cls}-view-header {\n      color: @transfer-item-color_disabled;\n    }\n  }\n}\n\n@keyframes ~ '@{prefix}-transfer-drag-item-blink' {\n  0% {\n    background-color: @transfer-item-draggable-color_blink;\n  }\n\n  100% {\n    background-color: transparent;\n  }\n}\n"
  },
  {
    "path": "packages/web-vue/components/transfer/style/index.ts",
    "content": "import '../../style/index.less';\nimport '../../button/style';\nimport '../../checkbox/style';\nimport '../../input/style';\nimport '../../list/style';\nimport './index.less';\n"
  },
  {
    "path": "packages/web-vue/components/transfer/style/token.less",
    "content": "@import '../../style/theme/index.less';\n\n@transfer-width: 200px;\n@transfer-height: 224px;\n@transfer-height-title: @size-10;\n@transfer-height-footer: @size-10;\n@transfer-padding-horizontal-footer: @spacing-4;\n@transfer-border-color: var(~'@{arco-cssvars-prefix}-color-neutral-3');\n@transfer-border-width: @border-1;\n@transfer-border-radius: @radius-small;\n\n@transfer-font-size-header: @font-size-body-3;\n@transfer-font-size-header-unit: @font-size-body-1;\n@transfer-font-size-icon: @font-size-body-1;\n@transfer-font-weight-header: @font-weight-500;\n\n@transfer-color-text-header: var(~'@{arco-cssvars-prefix}-color-text-1');\n@transfer-color-text-header-unit: var(~'@{arco-cssvars-prefix}-color-text-3');\n@transfer-color-icon: var(~'@{arco-cssvars-prefix}-color-text-2');\n@transfer-color-bg-icon: var(~'@{arco-cssvars-prefix}-color-fill-3');\n@transfer-color-bg-header: var(~'@{arco-cssvars-prefix}-color-fill-1');\n\n@transfer-search-padding-left: 12px;\n@transfer-search-padding-right: 12px;\n@transfer-search-padding-top: 8px;\n@transfer-search-padding-bottom: 4px;\n\n@transfer-item-color-bg_default: @color-transparent;\n@transfer-item-color-bg_hover: var(~'@{arco-cssvars-prefix}-color-fill-2');\n@transfer-item-color-bg_disabled: @color-transparent;\n@transfer-item-color_default: var(~'@{arco-cssvars-prefix}-color-text-1');\n@transfer-item-color_hover: var(~'@{arco-cssvars-prefix}-color-text-1');\n@transfer-item-color_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');\n@transfer-item-height: @size-9;\n@transfer-item-padding-horizontal: @spacing-5;\n@transfer-item-font-size: @font-size-body-3;\n\n@transfer-item-draggable-height-gap: 2px;\n@transfer-item-draggable-color-bg-gap: @color-primary-6;\n@transfer-item-draggable-color-bg_dragging: var(~'@{arco-cssvars-prefix}-color-fill-1');\n@transfer-item-draggable-color_dragging: var(~'@{arco-cssvars-prefix}-color-text-4');\n@transfer-item-draggable-color_blink: var(~'@{arco-cssvars-prefix}-color-primary-light-1');\n\n@transfer-pagination-width-input: @size-6;\n@transfer-pagination-gap-separator: @spacing-4;\n\n@transfer-operation-padding-horizontal: @spacing-8;\n@transfer-operation-gap-buttons: @spacing-6;\n"
  },
  {
    "path": "packages/web-vue/components/transfer/transfer-list-item.tsx",
    "content": "import { computed, defineComponent, inject, PropType } from 'vue';\nimport { getPrefixCls } from '../_utils/global-config';\nimport IconHover from '../_components/icon-hover.vue';\nimport Checkbox from '../checkbox';\nimport IconClose from '../icon/icon-close';\nimport { TransferItem } from './interface';\nimport { transferInjectionKey } from './context';\n\nexport default defineComponent({\n  name: 'TransferListItem',\n  props: {\n    type: {\n      type: String as PropType<'source' | 'target'>,\n    },\n    data: {\n      type: Object as PropType<TransferItem>,\n      required: true,\n    },\n    allowClear: {\n      type: Boolean,\n    },\n    disabled: {\n      type: Boolean,\n    },\n    draggable: {\n      type: Boolean,\n    },\n    simple: Boolean,\n  },\n  setup(props) {\n    const prefixCls = getPrefixCls('transfer-list-item');\n    const transferCtx = inject(transferInjectionKey, undefined);\n\n    const handleClick = () => {\n      if (props.simple && !props.disabled) {\n        transferCtx?.moveTo(\n          [props.data.value],\n          props.type === 'target' ? 'source' : 'target'\n        );\n      }\n    };\n\n    const cls = computed(() => [\n      prefixCls,\n      {\n        [`${prefixCls}-disabled`]: props.disabled,\n        [`${prefixCls}-draggable`]: props.draggable,\n      },\n    ]);\n\n    const handleRemove = () => {\n      transferCtx?.moveTo([props.data.value], 'source');\n    };\n\n    return () => (\n      <div class={cls.value} onClick={handleClick}>\n        {props.allowClear || props.simple ? (\n          <span class={`${prefixCls}-content`}>\n            {transferCtx?.slots.item?.({\n              label: props.data.label,\n              value: props.data.value,\n            }) ?? props.data.label}\n          </span>\n        ) : (\n          <Checkbox\n            class={[`${prefixCls}-content`, `${prefixCls}-checkbox`]}\n            modelValue={transferCtx?.selected}\n            value={props.data.value}\n            onChange={(value: unknown) =>\n              transferCtx?.onSelect(value as string[])\n            }\n            uninjectGroupContext\n            disabled={props.disabled}\n          >\n            {transferCtx?.slots.item?.({\n              label: props.data.label,\n              value: props.data.value,\n            }) ?? props.data.label}\n          </Checkbox>\n        )}\n        {props.allowClear && !props.disabled && (\n          <IconHover\n            class={`${prefixCls}-remove-btn`}\n            // @ts-ignore\n            onClick={handleRemove}\n          >\n            <IconClose />\n          </IconHover>\n        )}\n      </div>\n    );\n  },\n});\n"
  },
  {
    "path": "packages/web-vue/components/transfer/transfer-view.vue",
    "content": "<template>\n  <div :class=\"prefixCls\">\n    <div :class=\"`${prefixCls}-header`\">\n      <slot\n        name=\"title\"\n        :count-total=\"dataInfo.data.length\"\n        :count-selected=\"dataInfo.selected.length\"\n        :search-value=\"filter\"\n        :checked=\"checked\"\n        :indeterminate=\"indeterminate\"\n        :on-select-all-change=\"handleSelectAllChange\"\n        :on-clear=\"handleClear\"\n      >\n        <span :class=\"`${prefixCls}-header-title`\">\n          <span\n            v-if=\"allowClear || simple || !showSelectAll\"\n            :class=\"`${prefixCls}-header-title-simple`\"\n          >\n            {{ title }}\n          </span>\n          <checkbox\n            v-else\n            :model-value=\"checked\"\n            :indeterminate=\"indeterminate\"\n            :disabled=\"disabled\"\n            uninject-group-context\n            @change=\"handleSelectAllChange\"\n          >\n            {{ title }}\n          </checkbox>\n        </span>\n        <icon-hover\n          v-if=\"allowClear\"\n          :disabled=\"disabled\"\n          :class=\"`${prefixCls}-header-clear-btn`\"\n          @click=\"handleClear\"\n        >\n          <icon-delete />\n        </icon-hover>\n        <span v-else-if=\"!simple\" :class=\"`${prefixCls}-header-count`\">\n          {{ dataInfo.selected.length }} / {{ dataInfo.data.length }}\n        </span>\n      </slot>\n    </div>\n    <div v-if=\"showSearch\" :class=\"`${prefixCls}-search`\">\n      <input-search\n        v-model=\"filter\"\n        :disabled=\"disabled\"\n        v-bind=\"inputSearchProps\"\n        @change=\"handleSearch\"\n      />\n    </div>\n    <div :class=\"`${prefixCls}-body`\">\n      <Scrollbar v-if=\"filteredData.length > 0\">\n        <slot\n          :data=\"filteredData\"\n          :selected-keys=\"transferCtx?.selected\"\n          :on-select=\"transferCtx?.onSelect\"\n        >\n          <list\n            :class=\"`${prefixCls}-list`\"\n            :bordered=\"false\"\n            :scrollbar=\"false\"\n          >\n            <transfer-list-item\n              v-for=\"item of filteredData\"\n              :key=\"item.value\"\n              :type=\"type\"\n              :data=\"item\"\n              :simple=\"simple\"\n              :allow-clear=\"allowClear\"\n              :disabled=\"disabled || item.disabled\"\n            />\n          </list>\n        </slot>\n      </Scrollbar>\n      <Empty v-else :class=\"`${prefixCls}-empty`\" />\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, inject, PropType, ref } from 'vue';\nimport { getPrefixCls } from '../_utils/global-config';\nimport Checkbox from '../checkbox';\nimport IconHover from '../_components/icon-hover.vue';\nimport IconDelete from '../icon/icon-delete';\nimport Input from '../input';\nimport List from '../list';\nimport TransferListItem from './transfer-list-item';\nimport { DataInfo, TransferItem } from './interface';\nimport { transferInjectionKey } from './context';\nimport Scrollbar from '../scrollbar';\nimport Empty from '../empty/empty';\n\nexport default defineComponent({\n  name: 'TransferView',\n  components: {\n    Empty,\n    Checkbox,\n    IconHover,\n    IconDelete,\n    InputSearch: Input.Search,\n    List,\n    TransferListItem,\n    Scrollbar,\n  },\n  props: {\n    type: {\n      type: String as PropType<'source' | 'target'>,\n    },\n    dataInfo: {\n      type: Object as PropType<DataInfo>,\n      required: true,\n    },\n    title: String,\n    data: {\n      type: Array as PropType<TransferItem[]>,\n      required: true,\n    },\n    disabled: Boolean,\n    allowClear: Boolean,\n    selected: {\n      type: Array as PropType<string[]>,\n      required: true,\n    },\n    showSearch: Boolean,\n    showSelectAll: Boolean,\n    simple: Boolean,\n    inputSearchProps: {\n      type: Object,\n    },\n  },\n  emits: ['search'],\n  setup(props, { emit }) {\n    const prefixCls = getPrefixCls('transfer-view');\n    const filter = ref('');\n    const transferCtx = inject(transferInjectionKey, undefined);\n    const countSelected = computed(() => props.dataInfo.selected.length);\n    const countRendered = computed(() => props.dataInfo.data.length);\n\n    const checked = computed(\n      () =>\n        props.dataInfo.selected.length > 0 &&\n        props.dataInfo.selected.length === props.dataInfo.allValidValues.length\n    );\n    const indeterminate = computed(\n      () =>\n        props.dataInfo.selected.length > 0 &&\n        props.dataInfo.selected.length < props.dataInfo.allValidValues.length\n    );\n\n    const handleSelectAllChange = (checked: boolean) => {\n      if (checked) {\n        transferCtx?.onSelect([\n          ...props.selected,\n          ...props.dataInfo.allValidValues,\n        ]);\n      } else {\n        transferCtx?.onSelect(\n          props.selected.filter(\n            (value) => !props.dataInfo.allValidValues.includes(value)\n          )\n        );\n      }\n    };\n\n    const filteredData = computed(() =>\n      props.dataInfo.data.filter((item) => {\n        if (filter.value) {\n          return item.label.includes(filter.value);\n        }\n        return true;\n      })\n    );\n\n    const handleSearch = (value: string) => {\n      emit('search', value, props.type);\n    };\n\n    const handleClear = () => {\n      transferCtx?.moveTo(props.dataInfo.allValidValues, 'source');\n    };\n\n    return {\n      prefixCls,\n      filteredData,\n      filter,\n      checked,\n      indeterminate,\n      countSelected,\n      countRendered,\n      handleSelectAllChange,\n      handleSearch,\n      handleClear,\n      transferCtx,\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/transfer/transfer.vue",
    "content": "<template>\n  <div :class=\"cls\">\n    <transfer-view\n      type=\"source\"\n      :class=\"`${prefixCls}-view-source`\"\n      :title=\"sourceTitle\"\n      :data-info=\"dataInfo.sourceInfo\"\n      :data=\"dataInfo.sourceInfo.data\"\n      :disabled=\"mergedDisabled\"\n      :selected=\"computedSelected\"\n      :show-search=\"showSearch\"\n      :show-select-all=\"showSelectAll\"\n      :simple=\"simple\"\n      :input-search-props=\"sourceInputSearchProps\"\n      @search=\"handleSearch\"\n    >\n      <template v-if=\"$slots.source\" #default=\"slotData\">\n        <slot name=\"source\" v-bind=\"slotData\" />\n      </template>\n      <template v-if=\"$slots['source-title']\" #title=\"titleProps\">\n        <slot name=\"source-title\" v-bind=\"titleProps\" />\n      </template>\n    </transfer-view>\n    <div v-if=\"!simple\" :class=\"[`${prefixCls}-operations`]\">\n      <arco-button\n        tabindex=\"-1\"\n        aria-label=\"Move selected right\"\n        size=\"small\"\n        shape=\"round\"\n        :disabled=\"dataInfo.sourceInfo.validSelected.length === 0\"\n        @click=\"handleClick('target')\"\n      >\n        <template #icon>\n          <slot name=\"to-target-icon\"> <icon-right /> </slot>\n        </template>\n      </arco-button>\n      <arco-button\n        v-if=\"!oneWay\"\n        tabindex=\"-1\"\n        aria-label=\"Move selected left\"\n        size=\"small\"\n        shape=\"round\"\n        :disabled=\"dataInfo.targetInfo.validSelected.length === 0\"\n        @click=\"handleClick('source')\"\n      >\n        <template #icon>\n          <slot name=\"to-source-icon\"><icon-left /></slot>\n        </template>\n      </arco-button>\n    </div>\n    <transfer-view\n      type=\"target\"\n      :class=\"`${prefixCls}-view-target`\"\n      :title=\"targetTitle\"\n      :data-info=\"dataInfo.targetInfo\"\n      :data=\"dataInfo.targetInfo.data\"\n      :disabled=\"mergedDisabled\"\n      :selected=\"computedSelected\"\n      :allow-clear=\"oneWay\"\n      :show-search=\"showSearch\"\n      :show-select-all=\"showSelectAll\"\n      :simple=\"simple\"\n      :input-search-props=\"targetInputSearchProps\"\n      @search=\"handleSearch\"\n    >\n      <template v-if=\"$slots.target\" #default=\"slotData\">\n        <slot name=\"target\" v-bind=\"slotData\" />\n      </template>\n      <template v-if=\"$slots['target-title']\" #title=\"titleProps\">\n        <slot name=\"target-title\" v-bind=\"titleProps\" />\n      </template>\n    </transfer-view>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  PropType,\n  provide,\n  reactive,\n  ref,\n  toRef,\n} from 'vue';\nimport { getPrefixCls } from '../_utils/global-config';\nimport ArcoButton from '../button';\nimport TransferView from './transfer-view.vue';\nimport IconLeft from '../icon/icon-left';\nimport IconRight from '../icon/icon-right';\nimport { DataInfo, TransferItem } from './interface';\nimport { transferInjectionKey } from './context';\nimport { useFormItem } from '../_hooks/use-form-item';\n\nexport default defineComponent({\n  name: 'Transfer',\n  components: {\n    ArcoButton,\n    TransferView,\n    IconLeft,\n    IconRight,\n  },\n  props: {\n    /**\n     * @zh 穿梭框的数据\n     * @en Data of the transfer\n     */\n    data: {\n      type: Array as PropType<TransferItem[]>,\n      default: () => [],\n    },\n    /**\n     * @zh 目标选择框中的值\n     * @en Value in the target selection box\n     * @vModel\n     */\n    modelValue: {\n      type: Array as PropType<string[]>,\n      default: undefined,\n    },\n    /**\n     * @zh 目标选择框中默认的值（非受控状态）\n     * @en The default value in the target selection box (uncontrolled state)\n     */\n    defaultValue: {\n      type: Array as PropType<string[]>,\n      default: () => [],\n    },\n    /**\n     * @zh 选中的选项值\n     * @en Selected option value\n     * @vModel\n     */\n    selected: {\n      type: Array as PropType<string[]>,\n      default: undefined,\n    },\n    /**\n     * @zh 默认选中的选项值（非受控状态）\n     * @en The option value selected by default (uncontrolled state)\n     */\n    defaultSelected: {\n      type: Array as PropType<string[]>,\n      default: () => [],\n    },\n    /**\n     * @zh 是否禁用\n     * @en Whether to disable\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 是否开启简单模式（点击选项即移动）\n     * @en Whether to open the simple mode (click the option to move)\n     */\n    simple: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 是否开启单向模式（仅可移动到目标选择框）\n     * @en Whether to open the one-way mode (only move to the target selection box)\n     */\n    oneWay: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 是否显示搜索框\n     * @en Whether to show the search input\n     */\n    showSearch: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 是否展示全选勾选框\n     * @en Whether show select all checkbox on the header\n     * @version 2.39.0\n     */\n    showSelectAll: {\n      type: Boolean,\n      default: true,\n    },\n    /**\n     * @zh 源选择框和目标选择框的标题\n     * @en The title of the source and target selection boxes\n     */\n    title: {\n      type: Array as PropType<string[]>,\n      default: () => ['Source', 'Target'],\n    },\n    /**\n     * @zh 源选择框的搜索框配置\n     * @en Search box configuration for source selection box\n     * @version 2.51.1\n     */\n    sourceInputSearchProps: {\n      type: Object,\n    },\n    /**\n     * @zh 目标选择框的搜索框配置\n     * @en Search box configuration for target selection box\n     * @version 2.51.1\n     */\n    targetInputSearchProps: {\n      type: Object,\n    },\n  },\n  emits: {\n    'update:modelValue': (value: string[]) => true,\n    'update:selected': (selected: string[]) => true,\n    /**\n     * @zh 目标选择框的值改变时触发\n     * @en Triggered when the value of the target selection box changes\n     * @property {string[]} value\n     */\n    'change': (value: string[]) => true,\n    /**\n     * @zh 选中的值改变时触发\n     * @en Triggered when the selected value changes\n     * @property {string[]} selected\n     */\n    'select': (selected: string[]) => true,\n    /**\n     * @zh 用户搜索时触发\n     * @en Triggered when the user searches\n     * @property {string} value\n     * @property {'target'|'source'} type\n     */\n    'search': (value: string, type: 'target' | 'source') => true,\n  },\n  /**\n   * @zh 选项\n   * @en Option\n   * @slot item\n   * @binding {string} value\n   * @binding {string} label\n   */\n  /**\n   * @zh 源面板\n   * @en Source content\n   * @slot source\n   * @binding {TransferItem[]} data\n   * @binding {string[]} selectedKeys\n   * @binding {(value: string[]) => void} onSelect\n   * @version 2.39.0\n   */\n  /**\n   * @zh 目标面板\n   * @en Target content\n   * @slot target\n   * @binding {TransferItem[]} data\n   * @binding {string[]} selectedKeys\n   * @binding {(value: string[]) => void} onSelect\n   * @version 2.39.0\n   */\n  /**\n   * @zh 源标题插槽\n   * @en Source Header\n   * @slot source-title\n   * @binding {number} countTotal\n   * @binding {number} countSelected\n   * @binding {string} searchValue\n   * @binding {boolean} checked\n   * @binding {boolean} indeterminate\n   * @binding {(checked:boolean) => void} onSelectAllChange\n   * @binding {() => void} onClear\n   * @version 2.45.0\n   */\n  /**\n   * @zh 目标标题插槽\n   * @en Target Header\n   * @slot target-title\n   * @binding {number} countTotal\n   * @binding {number} countSelected\n   * @binding {string} searchValue\n   * @binding {boolean} checked\n   * @binding {boolean} indeterminate\n   * @binding {(checked:boolean) => void} onSelectAllChange\n   * @binding {() => void} onClear\n   * @version 2.45.0\n   */\n  /**\n   * @zh 移至源图标插槽\n   * @en To source icon slot\n   * @slot to-source-icon\n   * @version 2.52.0\n   */\n  /**\n   * @zh 移至目标图标插槽\n   * @en To target icon slot\n   * @slot to-target-icon\n   * @version 2.52.0\n   */\n  setup(props, { emit, slots }) {\n    const { mergedDisabled, eventHandlers } = useFormItem({\n      disabled: toRef(props, 'disabled'),\n    });\n    const prefixCls = getPrefixCls('transfer');\n\n    const _target = ref(props.defaultValue);\n    const computedTarget = computed(() => props.modelValue ?? _target.value);\n    const _selected = ref(props.defaultSelected);\n    const computedSelected = computed(() => props.selected ?? _selected.value);\n\n    const sourceTitle = computed(() => props.title?.[0]);\n    const targetTitle = computed(() => props.title?.[1]);\n\n    const dataInfo = computed(() => {\n      const sourceInfo: DataInfo = {\n        data: [],\n        allValidValues: [],\n        selected: [],\n        validSelected: [],\n      };\n\n      const targetInfo: DataInfo = {\n        data: [],\n        allValidValues: [],\n        selected: [],\n        validSelected: [],\n      };\n\n      for (const item of props.data) {\n        if (computedTarget.value.includes(item.value)) {\n          targetInfo.data.push(item);\n          if (!item.disabled) {\n            targetInfo.allValidValues.push(item.value);\n          }\n          if (computedSelected.value.includes(item.value)) {\n            targetInfo.selected.push(item.value);\n            if (!item.disabled) {\n              targetInfo.validSelected.push(item.value);\n            }\n          }\n        } else {\n          sourceInfo.data.push(item);\n          if (!item.disabled) {\n            sourceInfo.allValidValues.push(item.value);\n          }\n          if (computedSelected.value.includes(item.value)) {\n            sourceInfo.selected.push(item.value);\n            if (!item.disabled) {\n              sourceInfo.validSelected.push(item.value);\n            }\n          }\n        }\n      }\n\n      return {\n        sourceInfo,\n        targetInfo,\n      };\n    });\n\n    const handleSearch = (value: string, type: 'target' | 'source') => {\n      emit('search', value, type);\n    };\n\n    const moveTo = (values: string[], target: 'target' | 'source') => {\n      const newTarget =\n        target === 'target'\n          ? [...computedTarget.value, ...values]\n          : computedTarget.value.filter((value) => !values.includes(value));\n      handleSelect(\n        dataInfo.value[target === 'target' ? 'targetInfo' : 'sourceInfo']\n          .selected\n      );\n      _target.value = newTarget;\n      emit('update:modelValue', newTarget);\n      emit('change', newTarget);\n      eventHandlers.value?.onChange?.();\n    };\n\n    const handleClick = (target: 'target' | 'source') => {\n      const values =\n        target === 'target'\n          ? dataInfo.value.sourceInfo.validSelected\n          : dataInfo.value.targetInfo.validSelected;\n      moveTo(values, target);\n    };\n\n    const handleSelect = (values: string[]) => {\n      _selected.value = values;\n      emit('update:selected', values);\n      emit('select', values);\n    };\n\n    provide(\n      transferInjectionKey,\n      reactive({\n        selected: computedSelected,\n        slots,\n        moveTo,\n        onSelect: handleSelect,\n      })\n    );\n\n    const cls = computed(() => [\n      prefixCls,\n      {\n        [`${prefixCls}-simple`]: props.simple,\n        [`${prefixCls}-disabled`]: mergedDisabled.value,\n      },\n    ]);\n\n    return {\n      prefixCls,\n      cls,\n      dataInfo,\n      computedSelected,\n      mergedDisabled,\n      sourceTitle,\n      targetTitle,\n      handleClick,\n      handleSearch,\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/tree/CHANGELOG.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.56.0\n\n`2024-07-26`\n\n### 🐛 BugFix\n\n- fix tree node folding animation ([#3234](https://github.com/arco-design/arco-design-vue/pull/3234))\n\n\n## 2.55.1\n\n`2024-03-29`\n\n### 💅 Style\n\n- fix scrollHeight calculation exception problem ([#3044](https://github.com/arco-design/arco-design-vue/pull/3044))\n\n\n## 2.55.0\n\n`2024-03-15`\n\n### 🆕 Feature\n\n- The `title` slot has a new `title` parameter ([#3024](https://github.com/arco-design/arco-design-vue/pull/3024))\n\n\n## 2.54.6\n\n`2024-03-01`\n\n### 🐛 BugFix\n\n- resolve invalid property name console warning issue ([#2995](https://github.com/arco-design/arco-design-vue/pull/2995))\n\n\n## 2.54.3\n\n`2024-01-19`\n\n\n## 2.45.0\n\n`2023-04-07`\n\n### 🆕 Feature\n\n- add data-level and data-key attributes to tree nodes ([#2192](https://github.com/arco-design/arco-design-vue/pull/2192))\n\n\n## 2.44.2\n\n`2023-03-17`\n\n### 🐛 BugFix\n\n- adjust the emit order of select and update:selectedKeys, check and update:checkedKeys ([#2228](https://github.com/arco-design/arco-design-vue/pull/2228))\n\n\n## 2.34.0\n\n`2022-07-29`\n\n### 🆕 Feature\n\n- Add node status to slot ([#1469](https://github.com/arco-design/arco-design-vue/pull/1469))\n\n\n## 2.33.0\n\n`2022-07-08`\n\n### 🐛 BugFix\n\n- Fix the problem of filtering data for processing in the subtree expansion animation ([#1397](https://github.com/arco-design/arco-design-vue/pull/1397))\n- Fix the problem of setting defaultExpandSelected invalid ([#1362](https://github.com/arco-design/arco-design-vue/pull/1362))\n\n\n## 2.32.0\n\n`2022-06-24`\n\n### 🐛 BugFix\n\n- check on the node in the half-selected state have a wrong result ([#1331](https://github.com/arco-design/arco-design-vue/pull/1331))\n\n\n## 2.27.0\n\n`2022-05-13`\n\n### 🆕 Feature\n\n- `checkable` supports configuration via function ([#1119](https://github.com/arco-design/arco-design-vue/pull/1119))\n- `selectable` supports configuration via function ([#1119](https://github.com/arco-design/arco-design-vue/pull/1119))\n- Added property `actionOnNodeClick`, which can be used to enable the function: click on a node to trigger expansion ([#1119](https://github.com/arco-design/arco-design-vue/pull/1119))\n\n### 🐛 BugFix\n\n- expandAll failed when the type of key is number ([#1113](https://github.com/arco-design/arco-design-vue/pull/1113))\n\n\n## 2.25.0\n\n`2022-04-22`\n\n### 💎 Enhancement\n\n- When calling a method to operate a single node, add the target node information in the callback parameter ([#1021](https://github.com/arco-design/arco-design-vue/pull/1021))\n\n\n## 2.24.0\n\n`2022-04-15`\n\n### 🆎 TypeScript\n\n- upgrate `FieldNames` to `TreeFieldNames` ([#977](https://github.com/arco-design/arco-design-vue/pull/977))\n\n\n## 2.21.0\n\n`2022-03-25`\n\n### 🆕 Feature\n\n- add property `onlyCheckLeaf ` ([#876](https://github.com/arco-design/arco-design-vue/pull/876))\n- support to turn off expand transition animation ([#867](https://github.com/arco-design/arco-design-vue/pull/867))\n\n### 💅 Style\n\n- fix the connection line is displayed incorrectly ([#865](https://github.com/arco-design/arco-design-vue/pull/865))\n\n### 🆎 TypeScript\n\n- Add the custom icon field of filednames ([#848](https://github.com/arco-design/arco-design-vue/pull/848))\n\n\n## 2.20.1\n\n`2022-03-21`\n\n### 🐛 BugFix\n\n- Fix the problem that the expansion event name is wrong in the new version ([#853](https://github.com/arco-design/arco-design-vue/pull/853))\n\n\n## 2.20.0\n\n`2022-03-18`\n\n### 🆕 Feature\n\n- add instance method to tree component ([#837](https://github.com/arco-design/arco-design-vue/pull/837))\n\n\n## 2.19.0\n\n`2022-03-11`\n\n### 🆕 Feature\n\n- support for setting half-checked nodes ([#809](https://github.com/arco-design/arco-design-vue/pull/809))\n- add some methods in instance: `getCheckedNodes` `getSelectedNodes` `getExpandedNodes` `getHalfCheckedNodes` ([#809](https://github.com/arco-design/arco-design-vue/pull/809))\n\n### 🐛 BugFix\n\n- Fix the problem of component rendering error when the node cannot be found ([#800](https://github.com/arco-design/arco-design-vue/pull/800))\n\n\n## 2.18.0-beta.2\n\n`2022-02-25`\n\n### 🆕 Feature\n\n- Add slot `icon` for customizing node icon globally ([#710](https://github.com/arco-design/arco-design-vue/pull/710))\n\n\n## 2.9.0\n\n`2021-12-03`\n\n### 🆕 Feature\n\n- add prop default-expand-selected default-expand-checked auto-expand-parent ([#322](https://github.com/arco-design/arco-design-vue/pull/322))\n\n\n## 2.8.0\n\n`2021-12-01`\n\n### 🐛 BugFix\n\n- Update checked keys after load more ([#206](https://github.com/arco-design/arco-design-vue/pull/206))\n\n\n## 2.7.0\n\n`2021-11-26`\n\n### 💅 Style\n\n- let the content of tree node centerd in vertical ([#260](https://github.com/arco-design/arco-design-vue/pull/260))\n\n\n## 2.4.0\n\n`2021-11-17`\n\n### 🆕 Feature\n\n- `key` support `number` ([#169](https://github.com/arco-design/arco-design-vue/pull/169))\n\n\n## 2.3.0\n\n`2021-11-12`\n\n### 🐛 BugFix\n\n- Fix the problem that the setting of `default-checked-keys` is invalid ([#131](https://github.com/arco-design/arco-design-vue/pull/131))\n\n"
  },
  {
    "path": "packages/web-vue/components/tree/CHANGELOG.zh-CN.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.56.0\n\n`2024-07-26`\n\n### 🐛 问题修复\n\n- 修复树折叠动画不生效问题 ([#3234](https://github.com/arco-design/arco-design-vue/pull/3234))\n\n\n## 2.55.1\n\n`2024-03-29`\n\n### 💅 样式更新\n\n- 修复scrollHeight计算异常问题 ([#3044](https://github.com/arco-design/arco-design-vue/pull/3044))\n\n\n## 2.55.0\n\n`2024-03-15`\n\n### 🆕 新增功能\n\n- `title` 插槽新增 `title` 参数 ([#3024](https://github.com/arco-design/arco-design-vue/pull/3024))\n\n\n## 2.54.6\n\n`2024-03-01`\n\n### 🐛 问题修复\n\n- 解决无效的属性名称控制台警告问题 ([#2995](https://github.com/arco-design/arco-design-vue/pull/2995))\n\n\n## 2.54.3\n\n`2024-01-19`\n\n\n## 2.45.0\n\n`2023-04-07`\n\n### 🆕 新增功能\n\n- 树节点增加 data-level 和 data-key 数据属性 ([#2192](https://github.com/arco-design/arco-design-vue/pull/2192))\n\n\n## 2.44.2\n\n`2023-03-17`\n\n### 🐛 问题修复\n\n- 调整 select 和 update:selectedKeys, check 和 update:checkedKeys 的触发顺序 ([#2228](https://github.com/arco-design/arco-design-vue/pull/2228))\n\n\n## 2.34.0\n\n`2022-07-29`\n\n### 🆕 新增功能\n\n- 给 slot 添加节点状态信息 ([#1469](https://github.com/arco-design/arco-design-vue/pull/1469))\n\n\n## 2.33.0\n\n`2022-07-08`\n\n### 🐛 问题修复\n\n- 修复子树展开动画中为处理过滤数据的问题 ([#1397](https://github.com/arco-design/arco-design-vue/pull/1397))\n- 修复设置 defaultExpandSelected 失效的问题 ([#1362](https://github.com/arco-design/arco-design-vue/pull/1362))\n\n\n## 2.32.0\n\n`2022-06-24`\n\n### 🐛 问题修复\n\n- 修复点击半选状态的节点显示错误的问题 ([#1331](https://github.com/arco-design/arco-design-vue/pull/1331))\n\n\n## 2.27.0\n\n`2022-05-13`\n\n### 🆕 新增功能\n\n- `checkable` 支持函数格式 ([#1119](https://github.com/arco-design/arco-design-vue/pull/1119))\n- `seleable` 支持函数格式 ([#1119](https://github.com/arco-design/arco-design-vue/pull/1119))\n- 新增属性 `actionOnNodeClick`，可用于开启点击节点触发展开 ([#1119](https://github.com/arco-design/arco-design-vue/pull/1119))\n\n### 🐛 问题修复\n\n- 修复当 key 为 number 的时候，expandAll 失败的问题 ([#1113](https://github.com/arco-design/arco-design-vue/pull/1113))\n\n\n## 2.25.0\n\n`2022-04-22`\n\n### 💎 功能优化\n\n- 调用方法操作单个节点的时候在回调参数重增加目标节点信息 ([#1021](https://github.com/arco-design/arco-design-vue/pull/1021))\n\n\n## 2.24.0\n\n`2022-04-15`\n\n### 🆎 类型修正\n\n- `FieldNames` 修改为 `TreeFieldNames` ([#977](https://github.com/arco-design/arco-design-vue/pull/977))\n\n\n## 2.21.0\n\n`2022-03-25`\n\n### 🆕 新增功能\n\n- 新增配置项 `onlyCheckLeaf` ([#876](https://github.com/arco-design/arco-design-vue/pull/876))\n- 支持关闭展开时的动效 ([#867](https://github.com/arco-design/arco-design-vue/pull/867))\n\n### 💅 样式更新\n\n- 修复连接线显示错乱的问题 ([#865](https://github.com/arco-design/arco-design-vue/pull/865))\n\n### 🆎 类型修正\n\n- 增加filednames的自定义icon功能 ([#848](https://github.com/arco-design/arco-design-vue/pull/848))\n\n\n## 2.20.1\n\n`2022-03-21`\n\n### 🐛 问题修复\n\n- 修复新版本中展开事件名称错误的问题 ([#853](https://github.com/arco-design/arco-design-vue/pull/853))\n\n\n## 2.20.0\n\n`2022-03-18`\n\n### 🆕 新增功能\n\n- 添加树的实例方法 ([#837](https://github.com/arco-design/arco-design-vue/pull/837))\n\n\n## 2.19.0\n\n`2022-03-11`\n\n### 🆕 新增功能\n\n- 支持设置半选节点 ([#809](https://github.com/arco-design/arco-design-vue/pull/809))\n- 实例上新增可调用的方法:  `getCheckedNodes` `getSelectedNodes` `getExpandedNodes` `getHalfCheckedNodes` ([#809](https://github.com/arco-design/arco-design-vue/pull/809))\n\n### 🐛 问题修复\n\n- 修复当节点找不到的时候组件渲染出错的问题 ([#800](https://github.com/arco-design/arco-design-vue/pull/800))\n\n\n## 2.18.0-beta.2\n\n`2022-02-25`\n\n### 🆕 新增功能\n\n- 新增插槽 `icon` 用于全局定制节点图标 ([#710](https://github.com/arco-design/arco-design-vue/pull/710))\n\n\n## 2.9.0\n\n`2021-12-03`\n\n### 🆕 新增功能\n\n- 新增属性 `default-expand-selected` `default-expand-checked` `auto-expand-parent` ([#322](https://github.com/arco-design/arco-design-vue/pull/322))\n\n\n## 2.8.0\n\n`2021-12-01`\n\n### 🐛 问题修复\n\n- 动态加载节点后更新勾选状态 ([#206](https://github.com/arco-design/arco-design-vue/pull/206))\n\n\n## 2.7.0\n\n`2021-11-26`\n\n### 💅 样式更新\n\n- 让树节点的内容垂直居中 ([#260](https://github.com/arco-design/arco-design-vue/pull/260))\n\n\n## 2.4.0\n\n`2021-11-17`\n\n### 🆕 新增功能\n\n- `key` 支持 `number`  类型 ([#169](https://github.com/arco-design/arco-design-vue/pull/169))\n\n\n## 2.3.0\n\n`2021-11-12`\n\n### 🐛 问题修复\n\n- 修复设置  `default-checked-keys` 无效的问题 ([#131](https://github.com/arco-design/arco-design-vue/pull/131))\n\n"
  },
  {
    "path": "packages/web-vue/components/tree/README.en-US.md",
    "content": "```yaml\nmeta:\n  type: Component\n  category: Data Display\ntitle: Tree\ndescription: For content with many levels, such as folders, catalogs, and organizational structures, the tree can clearly show their hierarchical relationship, and has interactive functions such as expanding, collapsing, and selecting.\n```\n\n*Auto translate by google.*\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/block-node.md\n\n@import ./__demo__/multiple.md\n\n@import ./__demo__/checkable.md\n\n@import ./__demo__/control.md\n\n@import ./__demo__/load-more.md\n\n@import ./__demo__/draggable.md\n\n@import ./__demo__/checked-strategy.md\n\n@import ./__demo__/show-line.md\n\n@import ./__demo__/size.md\n\n@import ./__demo__/node-icon.md\n\n@import ./__demo__/render-extra.md\n\n@import ./__demo__/icons.md\n\n@import ./__demo__/virtual.md\n\n@import ./__demo__/search.md\n\n@import ./__demo__/field-names.md\n\n## API\n\n\n### `<tree>` Props\n\n|Attribute|Description|Type|Default|version|\n|---|---|---|:---:|:---|\n|size|Size|`'mini' \\| 'small' \\| 'medium' \\| 'large'`|`'medium'`||\n|block-node|Whether the node occupies a row|`boolean`|`false`||\n|default-expand-all|Whether to expand the parent node by default|`boolean`|`true`||\n|multiple|Whether to support multiple selection|`boolean`|`false`||\n|checkable|Whether to add a checkbox before the node, function format is supported since `2.27.0`|`boolean\\| ((    node: TreeNodeData,    info: {      level: number;      isLeaf: boolean;    }  ) => boolean)`|`false`||\n|selectable|Whether to support selection, function format is supported since `2.27.0`|`boolean\\| ((    node: TreeNodeData,    info: {      level: number;      isLeaf: boolean;    }  ) => boolean)`|`true`||\n|check-strictly|Whether to cancel the parent-child node association|`boolean`|`false`||\n|checked-strategy|Customized backfill method <br/> all: return all selected nodes <br/> parent: return only parent node when both parent and child nodes are selected <br/> child: return only child nodes|`'all' \\| 'parent' \\| 'child'`|`'all'`||\n|default-selected-keys|Tree node selected by default|`Array<string \\| number>`|`-`||\n|selected-keys **(v-model)**|Selected tree node|`Array<string \\| number>`|`-`||\n|default-checked-keys|Tree node with checkbox selected by default|`Array<string \\| number>`|`-`||\n|checked-keys **(v-model)**|Tree node with check box selected|`Array<string \\| number>`|`-`||\n|default-expanded-keys|Nodes expanded by default|`Array<string \\| number>`|`-`||\n|expanded-keys **(v-model)**|Expanded node|`Array<string \\| number>`|`-`||\n|data|Pass in `data` to generate the corresponding tree structure|`TreeNodeData[]`|`[]`||\n|field-names|Specify the field name in the node data|`TreeFieldNames`|`-`||\n|show-line|Whether to display the connection line|`boolean`|`false`||\n|load-more|A callback for loading data asynchronously, returning a `Promise`|`(node: TreeNodeData) => Promise<void>`|`-`||\n|draggable|Whether it can be dragged|`boolean`|`false`||\n|allow-drop|Whether to allow release on a node when dragging|`(options: {  dropNode: TreeNodeData;  dropPosition: -1 \\| 0 \\| 1;}) => boolean`|`-`||\n|virtual-list-props|Pass virtual list properties, pass in this parameter to turn on virtual scrolling, [VirtualListProps](#VirtualListProps)|`VirtualListProps`|`-`||\n|default-expand-selected|Whether to expand the parent node of the selected node by default|`boolean`|`false`|2.9.0|\n|default-expand-checked|Whether to expand the parent node of the checked node by default|`boolean`|`false`|2.9.0|\n|auto-expand-parent|Whether to automatically expand the parent node of the expanded node|`boolean`|`true`|2.9.0|\n|half-checked-keys **(v-model)**|The keys of half checked. Only valid when checkable and checkStrictly|`Array<string \\| number>`|`-`|2.19.0|\n|only-check-leaf|When enabled, checkedKeys is only for checked leaf nodes, and the status of the parent node is determined by the child node.(Only valid when checkable and checkStrictly is false)|`boolean`|`false`|2.21.0|\n|animation|Whether to enable expand transition animation|`boolean`|`true`|2.21.0|\n|action-on-node-click|The action triggered when the node is clicked|`'expand'`|`-`|2.27.0|\n### `<tree>` Events\n\n|Event Name|Description|Parameters|\n|---|---|---|\n|select|Triggered when the tree node is clicked|selectedKeys: `Array<string \\| number>`<br>data: `{ selected?: boolean; selectedNodes: TreeNodeData[]; node?: TreeNodeData; e?: Event; }`|\n|check|Triggered when the tree node checkbox is clicked. `halfCheckedKeys` and `halfCheckedNodes` support from `2.19.0`.|checkedKeys: `Array<string \\| number>`<br>data: `{ checked?: boolean; checkedNodes: TreeNodeData[]; node?: TreeNodeData; e?: Event; halfCheckedKeys: (string \\| number)[]; halfCheckedNodes: TreeNodeData[]; }`|\n|expand|Expand/close|expandKeys: `Array<string \\| number>`<br>data: `{ expanded?: boolean; expandNodes: TreeNodeData[]; node?: TreeNodeData; e?: Event; }`|\n|drag-start|Node starts dragging|ev: `DragEvent`<br>node: `TreeNodeData`|\n|drag-end|Node end drag|ev: `DragEvent`<br>node: `TreeNodeData`|\n|drag-over|The node is dragged to the releasable target|ev: `DragEvent`<br>node: `TreeNodeData`|\n|drag-leave|Node leaves to release the target|ev: `DragEvent`<br>node: `TreeNodeData`|\n|drop|The node is released on a releasable target|data: `{ e: DragEvent; dragNode: TreeNodeData; dropNode: TreeNodeData; dropPosition: number; }`|\n### `<tree>` Methods\n\n|Method|Description|Parameters|Return|version|\n|---|---|---|:---:|:---|\n|scrollIntoView|Virtual list scroll to an element|options: `{ index?: number; key?: number \\| string; align: 'auto' \\| 'top' \\| 'bottom'}`|-||\n|getSelectedNodes|Get selected nodes|-|TreeNodeData[]|2.19.0|\n|getCheckedNodes|Get checked nodes. Supports passing in `checkedStrategy`, if not passed, the configuration of the component is taken.|options: ` checkedStrategy?: 'all' \\| 'parent' \\| 'child'; includeHalfChecked?: boolean; `|TreeNodeData[]|2.19.0|\n|getHalfCheckedNodes|Get half checked nodes|-|TreeNodeData[]|2.19.0|\n|getExpandedNodes|Get expanded nodes|-|TreeNodeData[]|2.19.0|\n|checkAll|Set the checkbox state of all nodes|checked: ` boolean `|-|2.20.0|\n|checkNode|Sets the checkbox state of the specified node|key: ` TreeNodeKey \\| TreeNodeKey[] `<br>checked: ` boolean `<br>onlyCheckLeaf: ` boolean `|-|2.20.0，onlyCheckLeaf from 2.21.0|\n|selectAll|Set the selected state of all nodes|selected: ` boolean `|-|2.20.0|\n|selectNode|Sets the selected state of the specified node|key: ` TreeNodeKey \\| TreeNodeKey[] `<br>selected: ` boolean `|-|2.20.0|\n|expandAll|Set the expanded state of all nodes|expanded: ` boolean `|-|2.20.0|\n|expandNode|Sets the expanded state of the specified node|key: ` TreeNodeKey \\| TreeNodeKey[] `<br>expanded: ` boolean `|-|2.20.0|\n### `<tree>` Slots\n\n|Slot Name|Description|Parameters|version|\n|---|---|---|:---|\n|title|Title|title: `string`||\n|extra|Render additional node content|-||\n|drag-icon|Custom drag icon|node: `TreeNodeData`||\n|loading-icon|Custom loading icon|-||\n|switcher-icon|Custom switcher icon|-||\n|icon|Custom node icon|node: `TreeNodeData`|2.18.0|\n\n\n\n\n### TreeNodeData\n\n|Name|Description|Type|Default|\n|---|---|---|:---:|\n|key|Unique key|`string \\| number`|`-`|\n|title|The title of the node|`string`|`-`|\n|selectable|Whether to allow selection|`boolean`|`false`|\n|disabled|Whether to disable the node|`boolean`|`false`|\n|disableCheckbox|Whether to disable the checkbox|`boolean`|`false`|\n|checkable|Whether to show checkbox|`boolean`|`false`|\n|draggable|Whether it can be dragged|`boolean`|`false`|\n|isLeaf|Whether it is a leaf node. Effective when loading dynamically|`boolean`|`false`|\n|icon|Node icon|`() => VNode`|`-`|\n|switcherIcon|Custom switcher icon, priority is greater than tree|`() => VNode`|`-`|\n|loadingIcon|Customize loading icon, priority is greater than tree|`() => VNode`|`-`|\n|dragIcon|Custom drag icon, priority is greater than tree|`() => VNode`|`-`|\n|children|Child node|`TreeNodeData[]`|`-`|\n\n\n\n### TreeFieldNames\n\n|Name|Description|Type|Default|\n|---|---|---|:---:|\n|key|Specify the field name of key in TreeNodeData|`string`|`key`|\n|title|Specify the field name of title in TreeNodeData|`string`|`title`|\n|disabled|Specify the field name of disabled in TreeNodeData|`string`|`disabled`|\n|children|Specify the field name of children in TreeNodeData|`string`|`children`|\n|isLeaf|Specify the field name of isLeaf in TreeNodeData|`string`|`isLeaf`|\n|disableCheckbox|Specify the field name of disableCheckbox in TreeNodeData|`string`|`disableCheckbox`|\n|checkable|Specify the field name of checkable in TreeNodeData|`string`|`checkable`|\n|icon|Specify the field name of icon in TreeNodeData|`string`|`checkable`|\n\n\n\n\n### VirtualListProps\n\n|Name|Description|Type|Default|version|\n|---|---|---|:---:|:---|\n|height|Viewable area height|`number \\| string`|`-`||\n|threshold|The threshold of the number of elements to enable virtual scrolling. When the number of data is less than the threshold, virtual scrolling will not be enabled.|`number`|`-`||\n|isStaticItemHeight|(Repealed) Is the element height fixed. Version 2.18.0 deprecated, please use `fixedSize`|`boolean`|`false`||\n|fixedSize|Is the element height fixed.|`boolean`|`false`|2.34.1|\n|estimatedSize|Is the element height fixed.|`number`|`-`|2.34.1|\n|buffer|The number of elements mounted in advance outside the boundary of the viewport.|`number`|`10`|2.34.1|\n\n\n"
  },
  {
    "path": "packages/web-vue/components/tree/README.zh-CN.md",
    "content": "```yaml\nmeta:\n  type: 组件\n  category: 数据展示\ntitle: 树 Tree\ndescription: 对于文件夹、分类目录、组织架构等层级较多的内容，树可以清楚显示他们的层级关系，并具有展开、收起、选择等交互功能。\n```\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/block-node.md\n\n@import ./__demo__/multiple.md\n\n@import ./__demo__/checkable.md\n\n@import ./__demo__/control.md\n\n@import ./__demo__/load-more.md\n\n@import ./__demo__/draggable.md\n\n@import ./__demo__/checked-strategy.md\n\n@import ./__demo__/show-line.md\n\n@import ./__demo__/size.md\n\n@import ./__demo__/node-icon.md\n\n@import ./__demo__/render-extra.md\n\n@import ./__demo__/icons.md\n\n@import ./__demo__/virtual.md\n\n@import ./__demo__/search.md\n\n@import ./__demo__/field-names.md\n\n## API\n\n\n### `<tree>` Props\n\n|参数名|描述|类型|默认值|版本|\n|---|---|---|:---:|:---|\n|size|尺寸|`'mini' \\| 'small' \\| 'medium' \\| 'large'`|`'medium'`||\n|block-node|节点是否占据一行|`boolean`|`false`||\n|default-expand-all|是否默认展开父节点|`boolean`|`true`||\n|multiple|是否支持多选|`boolean`|`false`||\n|checkable|是否在节点前添加复选框，从 `2.27.0` 开始支持函数格式|`boolean\\| ((    node: TreeNodeData,    info: {      level: number;      isLeaf: boolean;    }  ) => boolean)`|`false`||\n|selectable|是否支持选择，从 `2.27.0` 开始支持函数格式|`boolean\\| ((    node: TreeNodeData,    info: {      level: number;      isLeaf: boolean;    }  ) => boolean)`|`true`||\n|check-strictly|是否取消父子节点关联|`boolean`|`false`||\n|checked-strategy|定制回填方式 <br/> all: 返回所有选中的节点  <br/> parent: 父子节点都选中时只返回父节点 <br/> child: 只返回子节点|`'all' \\| 'parent' \\| 'child'`|`'all'`||\n|default-selected-keys|默认选中的树节点|`Array<string \\| number>`|`-`||\n|selected-keys **(v-model)**|选中的树节点|`Array<string \\| number>`|`-`||\n|default-checked-keys|默认选中复选框的树节点|`Array<string \\| number>`|`-`||\n|checked-keys **(v-model)**|选中复选框的树节点|`Array<string \\| number>`|`-`||\n|default-expanded-keys|默认展开的节点|`Array<string \\| number>`|`-`||\n|expanded-keys **(v-model)**|展开的节点|`Array<string \\| number>`|`-`||\n|data|传入`data`,生成对应的树结构|`TreeNodeData[]`|`[]`||\n|field-names|指定节点数据中的字段名|`TreeFieldNames`|`-`||\n|show-line|是否展示连接线|`boolean`|`false`||\n|load-more|异步加载数据的回调，返回一个 `Promise`|`(node: TreeNodeData) => Promise<void>`|`-`||\n|draggable|是否可以拖拽|`boolean`|`false`||\n|allow-drop|拖拽时是否允许在某节点上释放|`(options: {  dropNode: TreeNodeData;  dropPosition: -1 \\| 0 \\| 1;}) => boolean`|`-`||\n|virtual-list-props|传递虚拟列表属性，传入此参数以开启虚拟滚动，[VirtualListProps](#VirtualListProps)|`VirtualListProps`|`-`||\n|default-expand-selected|是否默认展开已选中节点的父节点|`boolean`|`false`|2.9.0|\n|default-expand-checked|是否默认展开已选中复选框节点的父节点|`boolean`|`false`|2.9.0|\n|auto-expand-parent|是否自动展开已展开节点的父节点|`boolean`|`true`|2.9.0|\n|half-checked-keys **(v-model)**|半选状态的节点.仅在 checkable 且 checkStrictly 时生效|`Array<string \\| number>`|`-`|2.19.0|\n|only-check-leaf|开启后 checkedKeys 只处理叶子节点，父节点状态由子节点决定（仅在 checkable 且 checkStrictly 为 false 时生效）|`boolean`|`false`|2.21.0|\n|animation|是否开启展开时的过渡动效|`boolean`|`true`|2.21.0|\n|action-on-node-click|点击节点的时候触发的动作|`'expand'`|`-`|2.27.0|\n### `<tree>` Events\n\n|事件名|描述|参数|\n|---|---|---|\n|select|点击树节点时触发|selectedKeys: `Array<string \\| number>`<br>data: `{ selected?: boolean; selectedNodes: TreeNodeData[]; node?: TreeNodeData; e?: Event; }`|\n|check|点击树节点复选框时触发。`halfCheckedKeys` 和 `halfCheckedNodes` 从 `2.19.0` 开始支持。|checkedKeys: `Array<string \\| number>`<br>data: `{ checked?: boolean; checkedNodes: TreeNodeData[]; node?: TreeNodeData; e?: Event; halfCheckedKeys: (string \\| number)[]; halfCheckedNodes: TreeNodeData[]; }`|\n|expand|展开/关闭|expandKeys: `Array<string \\| number>`<br>data: `{ expanded?: boolean; expandNodes: TreeNodeData[]; node?: TreeNodeData; e?: Event; }`|\n|drag-start|节点开始拖拽|ev: `DragEvent`<br>node: `TreeNodeData`|\n|drag-end|节点结束拖拽|ev: `DragEvent`<br>node: `TreeNodeData`|\n|drag-over|节点被拖拽至可释放目标|ev: `DragEvent`<br>node: `TreeNodeData`|\n|drag-leave|节点离开可释放目标|ev: `DragEvent`<br>node: `TreeNodeData`|\n|drop|节点在可释放目标上释放|data: `{ e: DragEvent; dragNode: TreeNodeData; dropNode: TreeNodeData; dropPosition: number; }`|\n### `<tree>` Methods\n\n|方法名|描述|参数|返回值|版本|\n|---|---|---|---|:---|\n|scrollIntoView|虚拟列表滚动某个元素|options: `{ index?: number; key?: number \\| string; align: 'auto' \\| 'top' \\| 'bottom'}`|-||\n|getSelectedNodes|获取选中的节点|-|TreeNodeData[]|2.19.0|\n|getCheckedNodes|获取选中复选框的节点。支持传入 `checkedStrategy`，没有传则取组件的配置。|options: ` checkedStrategy?: 'all' \\| 'parent' \\| 'child'; includeHalfChecked?: boolean; `|TreeNodeData[]|2.19.0|\n|getHalfCheckedNodes|获取复选框半选的节点|-|TreeNodeData[]|2.19.0|\n|getExpandedNodes|获取展开的节点|-|TreeNodeData[]|2.19.0|\n|checkAll|设置全部节点的复选框状态|checked: ` boolean `|-|2.20.0|\n|checkNode|设置指定节点的复选框状态|key: ` TreeNodeKey \\| TreeNodeKey[] `<br>checked: ` boolean `<br>onlyCheckLeaf: ` boolean `|-|2.20.0，onlyCheckLeaf from 2.21.0|\n|selectAll|设置全部节点的选中状态|selected: ` boolean `|-|2.20.0|\n|selectNode|设置指定节点的选中状态|key: ` TreeNodeKey \\| TreeNodeKey[] `<br>selected: ` boolean `|-|2.20.0|\n|expandAll|设置全部节点的展开状态|expanded: ` boolean `|-|2.20.0|\n|expandNode|设置指定节点的展开状态|key: ` TreeNodeKey \\| TreeNodeKey[] `<br>expanded: ` boolean `|-|2.20.0|\n### `<tree>` Slots\n\n|插槽名|描述|参数|版本|\n|---|:---:|---|:---|\n|title|标题|title: `string`||\n|extra|渲染额外的节点内容|-||\n|drag-icon|定制 drag 图标|node: `TreeNodeData`||\n|loading-icon|定制 loading 图标|-||\n|switcher-icon|定制 switcher 图标|-||\n|icon|定制节点图标|node: `TreeNodeData`|2.18.0|\n\n\n\n\n### TreeNodeData\n\n|参数名|描述|类型|默认值|\n|---|---|---|:---:|\n|key|唯一标示|`string \\| number`|`-`|\n|title|该节点显示的标题|`string`|`-`|\n|selectable|是否允许选中|`boolean`|`false`|\n|disabled|是否禁用节点|`boolean`|`false`|\n|disableCheckbox|是否禁用复选框|`boolean`|`false`|\n|checkable|是否显示多选框|`boolean`|`false`|\n|draggable|是否可以拖拽|`boolean`|`false`|\n|isLeaf|是否是叶子节点。动态加载时有效|`boolean`|`false`|\n|icon|节点的图标|`() => VNode`|`-`|\n|switcherIcon|定制 switcher 图标，优先级大于 tree|`() => VNode`|`-`|\n|loadingIcon|定制 loading 图标，优先级大于 tree|`() => VNode`|`-`|\n|dragIcon|定制 drag 图标，优先级大于 tree|`() => VNode`|`-`|\n|children|子节点|`TreeNodeData[]`|`-`|\n\n\n\n### TreeFieldNames\n\n|参数名|描述|类型|默认值|\n|---|---|---|:---:|\n|key|指定 key 在 TreeNodeData 中的字段名|`string`|`key`|\n|title|指定 title 在 TreeNodeData 中的字段名|`string`|`title`|\n|disabled|指定 disabled 在 TreeNodeData 中的字段名|`string`|`disabled`|\n|children|指定 children 在 TreeNodeData 中的字段名|`string`|`children`|\n|isLeaf|指定 isLeaf 在 TreeNodeData 中的字段名|`string`|`isLeaf`|\n|disableCheckbox|指定 disableCheckbox 在 TreeNodeData 中的字段名|`string`|`disableCheckbox`|\n|checkable|指定 checkable 在 TreeNodeData 中的字段名|`string`|`checkable`|\n|icon|指定 icon 在 TreeNodeData 中的字段名|`string`|`checkable`|\n\n\n\n\n### VirtualListProps\n\n|参数名|描述|类型|默认值|版本|\n|---|---|---|:---:|:---|\n|height|可视区域高度|`number \\| string`|`-`||\n|threshold|开启虚拟滚动的元素数量阈值，当数据数量小于阈值时不会开启虚拟滚动。|`number`|`-`||\n|isStaticItemHeight|（已废除）元素高度是否是固定的。2.34.1 版本废除，请使用 `fixedSize`|`boolean`|`false`||\n|fixedSize|元素高度是否是固定的。|`boolean`|`false`|2.34.1|\n|estimatedSize|元素高度不固定时的预估高度。|`number`|`-`|2.34.1|\n|buffer|视口边界外提前挂载的元素数量。|`number`|`10`|2.34.1|\n\n\n"
  },
  {
    "path": "packages/web-vue/components/tree/TEMPLATE.md",
    "content": "## zh-CN\n```yaml\nmeta:\n  type: 组件\n  category: 数据展示\ntitle: 树 Tree\ndescription: 对于文件夹、分类目录、组织架构等层级较多的内容，树可以清楚显示他们的层级关系，并具有展开、收起、选择等交互功能。\n```\n---\n## en-US\n```yaml\nmeta:\n  type: Component\n  category: Data Display\ntitle: Tree\ndescription: For content with many levels, such as folders, catalogs, and organizational structures, the tree can clearly show their hierarchical relationship, and has interactive functions such as expanding, collapsing, and selecting.\n```\n---\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/block-node.md\n\n@import ./__demo__/multiple.md\n\n@import ./__demo__/checkable.md\n\n@import ./__demo__/control.md\n\n@import ./__demo__/load-more.md\n\n@import ./__demo__/draggable.md\n\n@import ./__demo__/checked-strategy.md\n\n@import ./__demo__/show-line.md\n\n@import ./__demo__/size.md\n\n@import ./__demo__/node-icon.md\n\n@import ./__demo__/render-extra.md\n\n@import ./__demo__/icons.md\n\n@import ./__demo__/virtual.md\n\n@import ./__demo__/search.md\n\n@import ./__demo__/field-names.md\n\n## API\n\n%%API(tree.vue)%%\n\n%%INTERFACE(interface.ts)%%\n\n%%INTERFACE(../_components/virtual-list-v2/interface.ts)%%\n"
  },
  {
    "path": "packages/web-vue/components/tree/__demo__/basic.md",
    "content": "```yaml\ntitle:\n  zh-CN: 基本用法\n  en-US: Basic\n```\n\n## zh-CN\n\n为每个节点赋予全局唯一的 `key`（必填项），`title` 为该节点显示的内容。\n\n---\n\n## en-US\n\nGive each node a globally unique `key` (required), and the `title` is the content to be displayed on the node.\n\n---\n\n```vue\n<template>\n  <a-tree\n    :data=\"treeData\"\n    :default-expanded-keys=\"['0-0-0']\"\n    :default-selected-keys=\"['0-0-0', '0-0-1']\"\n  />\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        treeData,\n      };\n    },\n  };\n\n  const treeData = [\n    {\n      title: 'Trunk 0-0',\n      key: '0-0',\n      children: [\n        {\n          title: 'Branch 0-0-0',\n          key: '0-0-0',\n          disabled: true,\n          children: [\n            {\n              title: 'Leaf',\n              key: '0-0-0-0',\n            },\n            {\n              title: 'Leaf',\n              key: '0-0-0-1',\n            }\n          ]\n        },\n        {\n          title: 'Branch 0-0-1',\n          key: '0-0-1',\n          children: [\n            {\n              title: 'Leaf',\n              key: '0-0-1-0',\n            },\n          ]\n        },\n      ],\n    },\n  ];\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/tree/__demo__/block-node.md",
    "content": "```yaml\ntitle:\n  zh-CN: 节点占一行\n  en-US: BlockNode\n```\n\n## zh-CN\n\n节点占据一整行。\n---\n\n## en-US\n\nThe treeNode occupy the remaining horizontal space.\n\n---\n\n```vue\n<template>\n  <a-tree blockNode :data=\"treeData\" />\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        treeData,\n      };\n    },\n  };\n\n  const treeData = [\n    {\n      title: 'Trunk 0-0',\n      key: '0-0',\n      children: [\n        {\n          title: 'Branch 0-0-0',\n          key: '0-0-0',\n          children: [\n            {\n              title: 'Leaf',\n              key: '0-0-0-0',\n            },\n            {\n              title: 'Leaf',\n              key: '0-0-0-1',\n            }\n          ]\n        },\n        {\n          title: 'Branch 0-0-1',\n          key: '0-0-1',\n          children: [\n            {\n              title: 'Leaf',\n              key: '0-0-1-0',\n            },\n          ]\n        },\n      ],\n    },\n  ];\n</script>\n```\n\n"
  },
  {
    "path": "packages/web-vue/components/tree/__demo__/checkable.md",
    "content": "```yaml\ntitle:\n  zh-CN: 带复选框的树\n  en-US: Checkable\n```\n\n## zh-CN\n\n为 `Tree` 添加 `checkable` 属性即可使树具有复选框功能，可以用 `defaultCheckedKeys` 指定复选框默认选中的节点。\n\n---\n\n## en-US\n\nAdd the `checkable` attribute to display the checkbox, and you can use `defaultCheckedKeys` to specify which nodes are checked by default.\n\n---\n\n```vue\n<template>\n  <a-checkbox\n    style=\"marginBottom: 24px;\"\n    v-model=\"checkStrictly\"\n    @change=\"() => {\n      checkedKeys = [];\n    }\"\n  >\n    checkStrictly\n  </a-checkbox>\n  <a-tree\n    :checkable=\"true\"\n    v-model:checked-keys=\"checkedKeys\"\n    :check-strictly=\"checkStrictly\"\n    :data=\"treeData\"\n  />\n</template>\n<script>\n  import { ref } from 'vue';\n\n  export default {\n    setup() {\n    const checkedKeys = ref([]);\n    const checkStrictly = ref(false);\n\n      return {\n        checkedKeys,\n        checkStrictly,\n        treeData,\n      }\n    }\n  }\n\n  const treeData = [\n    {\n      title: 'Trunk 0-0',\n      key: '0-0',\n      children: [\n        {\n          title: 'Leaf',\n          key: '0-0-1',\n        },\n        {\n          title: 'Branch 0-0-2',\n          key: '0-0-2',\n          disabled: true,\n          children: [\n            {\n              title: 'Leaf',\n              key: '0-0-2-1'\n            },\n            {\n              title: 'Leaf',\n              key: '0-0-2-2',\n              disableCheckbox: true\n            }\n          ]\n        },\n      ],\n    },\n    {\n      title: 'Trunk 0-1',\n      key: '0-1',\n      children: [\n        {\n          title: 'Branch 0-1-1',\n          key: '0-1-1',\n          children: [\n            {\n              title: 'Leaf ',\n              key: '0-1-1-1',\n            },\n            {\n              title: 'Leaf ',\n              key: '0-1-1-2',\n            },\n          ]\n        },\n        {\n          title: 'Leaf',\n          key: '0-1-2',\n        },\n      ],\n    },\n  ];\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/tree/__demo__/checked-strategy.md",
    "content": "```yaml\ntitle:\n  zh-CN: 设置回填方式\n  en-US: Checked Strategy\n```\n\n## zh-CN\n\n为 `Tree` 添加 `checkedStrategy` 可以设置选中时的回填方式\n\n---\n\n## en-US\n\nAdd `checkedStrategy` to set the return value when selected.\n\n---\n\n```vue\n<template>\n  <a-radio-group\n    type='button'\n    v-model=\"checkedStrategy\"\n    @change=\"(value) => {\n      checkedKeys = []\n    }\"\n  >\n    <a-radio\n      v-for=\"item in strategyOptions\"\n      :key=\"item?.value\"\n      :value=\"item?.value\"\n    >\n      {{ item?.label }}\n    </a-radio>\n  </a-radio-group>\n  <br/>\n  <a-typography-text style=\"margin: 24px 0; display: inline-block;\">\n    Current: {{ checkedKeys?.join(' , ') }}\n  </a-typography-text>\n  <br/>\n  <a-tree\n    :checkable=\"true\"\n    v-model:checked-keys=\"checkedKeys\"\n    :checked-strategy=\"checkedStrategy\"\n    :data=\"treeData\"\n  />\n</template>\n<script>\n  import { ref } from 'vue';\n\n  const treeData = [\n    {\n      title: 'Trunk 0-0',\n      key: '0-0',\n      children: [\n        {\n          title: 'Leaf',\n          key: '0-0-1',\n        },\n        {\n          title: 'Branch 0-0-2',\n          key: '0-0-2',\n          children: [\n            {\n              title: 'Leaf',\n              key: '0-0-2-1'\n            }\n          ]\n        },\n      ],\n    },\n    {\n      title: 'Trunk 0-1',\n      key: '0-1',\n      children: [\n        {\n          title: 'Branch 0-1-1',\n          key: '0-1-1',\n          children: [\n            {\n              title: 'Leaf',\n              key: '0-1-1-1',\n            },\n            {\n              title: 'Leaf',\n              key: '0-1-1-2',\n            },\n          ]\n        },\n        {\n          title: 'Leaf',\n          key: '0-1-2',\n        },\n      ],\n    },\n  ];\n\n  const strategyOptions = [\n    {\n      value: 'all',\n      label: 'show all'\n    },\n    {\n      value: 'parent',\n      label: 'show parent'\n    },\n    {\n      value: 'child',\n      label: 'show child'\n    }\n  ];\n\n  export default {\n    setup() {\n      const checkedKeys = ref([]);\n      const checkedStrategy = ref('all');\n\n      return {\n        treeData,\n        strategyOptions,\n        checkedStrategy,\n        checkedKeys,\n      }\n    }\n  }\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/tree/__demo__/control.md",
    "content": "```yaml\ntitle:\n  zh-CN: 双向绑定\n  en-US: Two-way binding\n```\n\n## zh-CN\n\n`selectedKeys` 、 `checkedKeys` 、 `expandedKeys` 属性均可受控，不仅支持 `v-model` ，还可以在对应的 `select` / `check` / `expand` 事件中自行控制如何更新属性值。\n\n---\n\n## en-US\n\nThe `selectedKeys`, `checkedKeys`, and `expandedKeys` attributes can all be controlled, not only supporting `v-model`, but also controlling how to update attribute values in the corresponding `select` / `check` / `expand` events.\n\n---\n\n```vue\n<template>\n  <a-button-group style=\"margin-bottom: 20px;\">\n    <a-button\n      type=\"primary\"\n      @click=\"toggleChecked\"\n    >\n      {{\n        checkedKeys?.length ? 'deselect all' : 'select all'\n      }}\n    </a-button>\n    <a-button\n      type=\"primary\"\n      @click=\"toggleExpanded\"\n    >\n      {{\n        expandedKeys?.length ? 'fold' : 'unfold'\n      }}\n    </a-button>\n  </a-button-group>\n  <a-tree\n    :checkable=\"true\"\n    v-model:selected-keys=\"selectedKeys\"\n    v-model:checked-keys=\"checkedKeys\"\n    v-model:expanded-keys=\"expandedKeys\"\n    @select=\"onSelect\"\n    @check=\"onCheck\"\n    @expand=\"onExpand\"\n    :data=\"treeData\"\n  />\n</template>\n<script>\n  import { ref } from 'vue';\n\n  const allCheckedKeys = ['0-0', '0-0-1', '0-0-2', '0-0-2-1', '0-1', '0-1-1', '0-1-2'];\n  const allExpandedKeys = ['0-0', '0-1', '0-0-2'];\n\n\n  export default {\n    setup() {\n      const selectedKeys = ref([]);\n      const checkedKeys = ref([]);\n      const expandedKeys = ref([]);\n\n\n      return {\n        selectedKeys,\n        checkedKeys,\n        expandedKeys,\n        treeData,\n        toggleChecked() {\n          checkedKeys.value = checkedKeys?.value.length ? [] : allCheckedKeys;\n        },\n        toggleExpanded() {\n          expandedKeys.value = expandedKeys?.value.length ? [] : allExpandedKeys;\n        },\n        onSelect(newSelectedKeys, event) {\n          console.log('select: ', newSelectedKeys, event);\n        },\n        onCheck(newCheckedKeys, event) {\n          console.log('check: ', newCheckedKeys, event);\n        },\n        onExpand(newExpandedKeys, event) {\n          console.log('expand: ', newExpandedKeys, event);\n        },\n      };\n    },\n  };\n\n  const treeData = [\n    {\n      title: 'Trunk 0-0',\n      key: '0-0',\n      children: [\n        {\n          title: 'Leaf 0-0-1',\n          key: '0-0-1',\n        },\n        {\n          title: 'Branch 0-0-2',\n          key: '0-0-2',\n          children: [\n            {\n              title: 'Leaf 0-0-2-1',\n              key: '0-0-2-1'\n            }\n          ]\n        },\n      ],\n    },\n    {\n      title: 'Trunk 0-1',\n      key: '0-1',\n      children: [\n        {\n          title: 'Leaf 0-1-1',\n          key: '0-1-1',\n        },\n        {\n          title: 'Leaf 0-1-2',\n          key: '0-1-2',\n        },\n      ],\n    },\n  ];\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/tree/__demo__/draggable.md",
    "content": "```yaml\ntitle:\n  zh-CN: 拖拽\n  en-US: Draggable\n```\n\n## zh-CN\n\n可拖拽的树节点。\n\n---\n\n## en-US\n\nDraggable nodes.\n\n---\n\n```vue\n<template>\n  <a-checkbox\n    v-model=\"checked\"\n    style=\"margin-bottom: 20px;\"\n  >\n    checkable\n  </a-checkbox>\n  <a-tree\n    class=\"tree-demo\"\n    draggable\n    blockNode\n    :checkable=\"checked\"\n    :data=\"treeData\"\n    @drop=\"onDrop\"\n  />\n</template>\n<script>\n  import { ref } from 'vue';\n  export default {\n    setup() {\n      const treeData = ref(defaultTreeData);\n      const checkedKeys = ref([]);\n      const checked = ref(false);\n\n      return {\n        treeData,\n        checkedKeys,\n        checked,\n        onDrop({ dragNode, dropNode, dropPosition }) {\n          const data = treeData.value;\n          const loop = (data, key, callback) => {\n            data.some((item, index, arr) => {\n              if (item.key === key) {\n                callback(item, index, arr);\n                return true;\n              }\n              if (item.children) {\n                return loop(item.children, key, callback);\n              }\n              return false;\n            });\n          };\n\n          loop(data, dragNode.key, (_, index, arr) => {\n            arr.splice(index, 1);\n          });\n\n          if (dropPosition === 0) {\n            loop(data, dropNode.key, (item) => {\n              item.children = item.children || [];\n              item.children.push(dragNode);\n            });\n          } else {\n            loop(data, dropNode.key, (_, index, arr) => {\n              arr.splice(dropPosition < 0 ? index : index + 1, 0, dragNode);\n            });\n          }\n        }\n      };\n    }\n  };\n\n  const defaultTreeData = [\n    {\n      title: 'Trunk 0-0',\n      key: '0-0',\n      children: [\n        {\n          title: 'Leaf 0-0-1',\n          key: '0-0-1',\n        },\n        {\n          title: 'Branch 0-0-2',\n          key: '0-0-2',\n          disableCheckbox: true,\n          children: [\n            {\n              draggable: false,\n              title: 'Leaf 0-0-2-1 (Drag disabled)',\n              key: '0-0-2-1'\n            }\n          ]\n        },\n      ],\n    },\n    {\n      title: 'Trunk 0-1',\n      key: '0-1',\n      children: [\n        {\n          title: 'Branch 0-1-1',\n          key: '0-1-1',\n          checkable: false,\n          children: [\n            {\n              title: 'Leaf 0-1-1-1',\n              key: '0-1-1-1',\n            },\n            {\n              title: 'Leaf 0-1-1-2',\n              key: '0-1-1-2',\n            },\n          ]\n        },\n        {\n          title: 'Leaf 0-1-2',\n          key: '0-1-2',\n        },\n      ],\n    },\n  ]\n</script>\n<style scoped>\n.tree-demo :deep(.tree-node-dropover) > :deep(.arco-tree-node-title),\n.tree-demo :deep(.tree-node-dropover) > :deep(.arco-tree-node-title):hover, {\n  animation: blinkBg 0.4s 2;\n}\n\n@keyframes blinkBg {\n  0% {\n    background-color: transparent;\n  }\n\n  100% {\n    background-color: var(--color-primary-light-1);\n  }\n}\n</style>\n```\n"
  },
  {
    "path": "packages/web-vue/components/tree/__demo__/field-names.md",
    "content": "```yaml\ntitle:\n  zh-CN: 自定义 data 的字段名称\n  en-US: Customize data\n```\n\n## zh-CN\n\n通过 `fieldNames` 字段可以自定义 data 的字段名。\n\n---\n\n## en-US\n\nYou can customize `data` by `fieldNames`.\n\n---\n\n```vue\n<template>\n  <a-tree\n    :default-selected-keys=\"['0-0-1']\"\n    :fieldNames=\"{\n      key: 'value',\n      title: 'label',\n      children: 'items',\n      icon: 'customIcon'\n    }\"\n    :data=\"treeData\"\n  />\n</template>\n<script>\n  import { h } from 'vue';\n  import { IconStar, IconDriveFile } from '@arco-design/web-vue/es/icon';\n  export default {\n    data() {\n      return {\n        treeData,\n      };\n    },\n  };\n\n  const treeData = [\n    {\n      label: 'Trunk 0-0',\n      value: '0-0',\n      items: [\n        {\n          label: 'Branch 0-0-2',\n          value: '0-0-2',\n          selectable: false,\n          customIcon: () => h(IconDriveFile),\n          items: [\n            {\n              label: 'Leaf',\n              value: '0-0-2-1',\n              items: [\n                {\n                  label: 'Leaf 0-0-2',\n                  value: '0-0-2-1-0',\n                  items: [\n                    {\n                      label: 'Leaf',\n                      customIcon: () => h(IconStar),\n                      value: '0-0-2-1-0-0'\n                    }\n                  ]\n                },\n              ],\n            }\n          ]\n        },\n      ],\n    },\n    {\n      label: 'Trunk 0-1',\n      value: '0-1',\n      items: [\n        {\n          label: 'Branch 0-1-1',\n          value: '0-1-1',\n          items: [\n            {\n              label: 'Leaf',\n              value: '0-1-1-0',\n            }\n          ]\n        },\n      ],\n    },\n  ];\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/tree/__demo__/icons.md",
    "content": "```yaml\ntitle:\n  zh-CN: 定制组件图标\n  en-US: Component Icons\n```\n\n## zh-CN\n\n节点的图标 `loadingIcon`,  `switcherIcon`，同时支持在 `tree` 和 `node` 两个纬度上定制，其中 `node` 的优先级较高。\n\n---\n\n## en-US\n\nThe node icons `loadingIcon`, `switcherIcon`, support customization at the two latitudes of `tree` and `node` at the same time, and `node` has a higher priority.\n\n---\n\n```vue\n<template>\n  <a-tree :data=\"treeData\" show-line>\n     <template #switcher-icon=\"node, { isLeaf }\">\n      <IconDown v-if=\"!isLeaf\" />\n      <IconStar v-if=\"isLeaf\" />\n    </template>\n  </a-tree>\n</template>\n\n<script>\n  import { h } from 'vue';\n  import { IconDriveFile, IconDown, IconStar } from '@arco-design/web-vue/es/icon';\n\n  export default {\n    components: {\n      IconDown,\n      IconStar\n    },\n    setup() {\n      return {\n        treeData,\n      };\n    },\n  };\n\n  const treeData = [\n    {\n      title: 'Trunk',\n      key: 'node1',\n      children: [\n        {\n          title: 'Leaf',\n          key: 'node2',\n        },\n      ],\n    },\n    {\n      title: 'Trunk',\n      key: 'node3',\n      children: [\n        {\n          title: 'Leaf',\n          key: 'node4',\n          switcherIcon: () => h(IconDriveFile),\n        },\n        {\n          title: 'Leaf',\n          key: 'node5',\n          switcherIcon: () => h(IconDriveFile),\n        },\n      ],\n    },\n  ];\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/tree/__demo__/load-more.md",
    "content": "```yaml\ntitle:\n  zh-CN: 动态加载\n  en-US: Dynamic Loading\n```\n\n## zh-CN\n\n动态加载节点。\n\n---\n\n## en-US\n\nLoad nodes dynamically.\n\n---\n\n```vue\n<template>\n  <a-tree :data=\"treeData\" :load-more=\"loadMore\" />\n</template>\n<script>\n  import { ref } from 'vue';\n\n  export default {\n    setup() {\n      const treeData = ref([\n        {\n          title: 'Trunk 0-0',\n          key: '0-0'\n        },\n        {\n          title: 'Trunk 0-1',\n          key: '0-1',\n          children: [\n            {\n              title: 'Branch 0-1-1',\n              key: '0-1-1'\n            }\n          ],\n        },\n      ]);\n\n      const loadMore = (nodeData) => {\n        return new Promise((resolve) => {\n          setTimeout(() => {\n            nodeData.children = [\n              { title: `leaf`, key: `${nodeData.key}-1`, isLeaf: true },\n            ];\n            resolve();\n          }, 1000);\n        });\n      };\n\n      return {\n        treeData,\n        loadMore,\n      };\n    }\n  }\n\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/tree/__demo__/multiple.md",
    "content": "```yaml\ntitle:\n  zh-CN: 多选\n  en-US: Multiple Selection\n```\n\n## zh-CN\n\n`Tree` 设置 `multiple` 属性为`true`，可以启用多选。\n\n---\n\n## en-US\n\nAdd `:multiple=\"true\"` to `Tree` to enable multiple selection.\n\n---\n\n```vue\n<template>\n  <a-checkbox\n    style=\"marginBottom: 24px;\"\n    v-model=\"multiple\"\n    @change=\"() => {\n      selectedKeys = [];\n    }\"\n  >\n    multiple\n  </a-checkbox>\n  <br/>\n  <a-typography-text>\n    Current: {{ selectedKeys?.join(' , ') }}\n  </a-typography-text>\n  <br/>\n  <a-tree\n    v-model:selected-keys=\"selectedKeys\"\n    :multiple=\"multiple\"\n    :data=\"treeData\"\n  />\n</template>\n<script>\n  import { ref } from 'vue';\n\n  export default {\n    setup() {\n      const selectedKeys = ref([]);\n      const multiple = ref(true);\n      const treeData = [\n        {\n          title: 'Trunk 0-0',\n          key: '0-0',\n          children: [\n            {\n              title: 'Leaf',\n              key: '0-0-1',\n            },\n            {\n              title: 'Branch 0-0-2',\n              key: '0-0-2',\n              children: [\n                {\n                  title: 'Leaf',\n                  key: '0-0-2-1'\n                }\n              ]\n            },\n          ],\n        },\n        {\n          title: 'Trunk 0-1',\n          key: '0-1',\n          children: [\n            {\n              title: 'Branch 0-1-1',\n              key: '0-1-1',\n              children: [\n                {\n                  title: 'Leaf',\n                  key: '0-1-1-1',\n                },\n                {\n                  title: 'Leaf',\n                  key: '0-1-1-2',\n                },\n              ]\n            },\n            {\n              title: 'Leaf',\n              key: '0-1-2',\n            },\n          ],\n        },\n      ];\n\n      return {\n        selectedKeys,\n        multiple,\n        treeData,\n      };\n    },\n  }\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/tree/__demo__/node-icon.md",
    "content": "```yaml\ntitle:\n  zh-CN: 定制节点图标\n  en-US: Node Icon\n```\n\n## zh-CN\n\n节点图标可以通过 `tree` 的 `icon` 插槽全局指定，也可以通过节点的 `icon` 属性单独指定。\n\n---\n\n## en-US\n\nThe icon of a node can be specified globally via the `icon` slot of the `tree`, or individually via the `icon` property of the node.\n\n---\n\n```vue\n<template>\n  <a-tree :data=\"treeData\">\n    <template #icon>\n      <IconStar />\n    </template>\n  </a-tree>\n</template>\n<script>\n  import { h } from 'vue';\n  import { IconStar, IconDriveFile } from '@arco-design/web-vue/es/icon';\n\n  export default {\n    components: {\n      IconStar\n    },\n    setup() {\n      return {\n        treeData,\n      };\n    },\n  };\n\n  const treeData = [\n    {\n      title: 'Trunk',\n      key: 'node1',\n      children: [\n        {\n          title: 'Leaf',\n          key: 'node2',\n        },\n      ],\n    },\n    {\n      title: 'Trunk',\n      key: 'node3',\n      children: [\n        {\n          title: 'Leaf',\n          key: 'node4',\n          icon: () => h(IconDriveFile),\n        },\n        {\n          title: 'Leaf',\n          key: 'node5',\n          icon: () => h(IconDriveFile),\n        },\n      ],\n    },\n  ];\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/tree/__demo__/render-extra.md",
    "content": "```yaml\ntitle:\n  zh-CN: 定制额外节点\n  en-US: Extra Node\n```\n\n## zh-CN\n\n`Tree` 提供了名为 `extra` 的 `Slot`, 可以在节点上定制额外的内容。\n\n---\n\n## en-US\n\n`Tree` provides `Slot` named `extra`, which can customize extra content on the node.\n\n---\n\n```vue\n<template>\n  <div style=\"width: 500px; padding: 2px; overflow: auto\">\n    <a-tree\n      :blockNode=\"true\"\n      :checkable=\"true\"\n      :data=\"treeData\"\n    >\n      <template #extra=\"nodeData\">\n        <IconPlus\n          style=\"position: absolute; right: 8px; font-size: 12px; top: 10px; color: #3370ff;\"\n          @click=\"() => onIconClick(nodeData)\"\n        />\n      </template>\n    </a-tree>\n  </div>\n</template>\n<script>\n import {ref} from 'vue';\n import { IconPlus } from '@arco-design/web-vue/es/icon';\n\n export default {\n   components: {\n     IconPlus,\n   },\n   setup() {\n     function onIconClick(nodeData) {\n      const children = nodeData.children || []\n      children.push({\n        title: 'new tree node',\n        key: nodeData.key + '-' + (children.length + 1)\n      })\n      nodeData.children = children\n\n      treeData.value = [...treeData.value];\n    }\n\n    const treeData = ref(\n      [\n        {\n          title: 'Trunk',\n          key: '0-0',\n          children: [\n            {\n              title: 'Leaf',\n              key: '0-0-1',\n            },\n            {\n              title: 'Branch',\n              key: '0-0-2',\n              children: [\n                {\n                  title: 'Leaf',\n                  key: '0-0-2-1'\n                }\n              ]\n            },\n          ],\n        },\n        {\n          title: 'Trunk',\n          key: '0-1',\n          children: [\n            {\n              title: 'Branch',\n              key: '0-1-1',\n              children: [\n                {\n                  title: 'Leaf',\n                  key: '0-1-1-1',\n                },\n                {\n                  title: 'Leaf',\n                  key: '0-1-1-2',\n                },\n              ]\n            },\n            {\n              title: 'Leaf',\n              key: '0-1-2',\n            },\n          ],\n        },\n      ]\n    );\n\n    return {\n      onIconClick,\n      treeData,\n    };\n   }\n };\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/tree/__demo__/search.md",
    "content": "```yaml\ntitle:\n  zh-CN: 搜索树\n  en-US: Searchable\n```\n\n## zh-CN\n\n展示如何实现搜索树的效果。\n\n---\n\n## en-US\n\nShow how to achieve the search tree effect.\n\n---\n\n```vue\n<template>\n  <div>\n    <a-input-search\n      style=\"margin-bottom: 8px; max-width: 240px\"\n      v-model=\"searchKey\"\n    />\n    <a-tree :data=\"treeData\">\n      <template #title=\"nodeData\">\n        <template v-if=\"index = getMatchIndex(nodeData?.title), index < 0\">{{ nodeData?.title }}</template>\n        <span v-else>\n          {{ nodeData?.title?.substr(0, index) }}\n          <span style=\"color: var(--color-primary-light-4);\">\n            {{ nodeData?.title?.substr(index, searchKey.length) }}\n          </span>{{ nodeData?.title?.substr(index + searchKey.length) }}\n        </span>\n      </template>\n    </a-tree>\n  </div>\n</template>\n<script>\n  import { ref, computed } from 'vue';\n\n  const originTreeData = [\n    {\n      title: 'Trunk 0-0',\n      key: '0-0',\n      children: [\n        {\n          title: 'Branch 0-0-1',\n          key: '0-0-1',\n          children: [\n            {\n              title: 'Leaf 0-0-1-1',\n              key: '0-0-1-1'\n            },\n            {\n              title: 'Leaf 0-0-1-2',\n              key: '0-0-1-2'\n            }\n          ]\n        },\n      ],\n    },\n    {\n      title: 'Trunk 0-1',\n      key: '0-1',\n      children: [\n        {\n          title: 'Branch 0-1-1',\n          key: '0-1-1',\n          children: [\n            {\n              title: 'Leaf 0-1-1-0',\n              key: '0-1-1-0',\n            }\n          ]\n        },\n        {\n          title: 'Branch 0-1-2',\n          key: '0-1-2',\n          children: [\n            {\n              title: 'Leaf 0-1-2-0',\n              key: '0-1-2-0',\n            }\n          ]\n        },\n      ],\n    },\n  ];\n\n  export default {\n    setup() {\n      const searchKey = ref('');\n      const treeData = computed(() => {\n        if (!searchKey.value) return originTreeData;\n        return searchData(searchKey.value);\n      })\n\n      function searchData(keyword) {\n        const loop = (data) => {\n          const result = [];\n          data.forEach(item => {\n            if (item.title.toLowerCase().indexOf(keyword.toLowerCase()) > -1) {\n              result.push({...item});\n            } else if (item.children) {\n              const filterData = loop(item.children);\n              if (filterData.length) {\n                result.push({\n                  ...item,\n                  children: filterData\n                })\n              }\n            }\n          })\n          return result;\n        }\n\n        return loop(originTreeData);\n      }\n\n      function getMatchIndex(title) {\n        if (!searchKey.value) return -1;\n        return title.toLowerCase().indexOf(searchKey.value.toLowerCase());\n      }\n\n      return {\n        searchKey,\n        treeData,\n        getMatchIndex,\n      }\n    }\n  }\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/tree/__demo__/show-line.md",
    "content": "```yaml\ntitle:\n  zh-CN: 显示连接线\n  en-US: Show Line\n```\n\n## zh-CN\n\n为 `Tree` 添加 `showLine` 属性即可使树具有连接线\n\n---\n\n## en-US\n\nAdd the `showLine` property to `Tree` to display the connecting line.\n\n---\n\n```vue\n<template>\n  <div>\n    <a-typography-text>showLine</a-typography-text>\n    <a-switch v-model=\"showLine\" style=\"margin-left: 12px\" />\n  </div>\n  <a-tree\n    :default-selected-keys=\"['0-0-1']\"\n    :data=\"treeData\"\n    :show-line=\"showLine\"\n  />\n</template>\n<script>\n  import { ref } from 'vue';\n\n  export default {\n    setup() {\n      const showLine = ref(true);\n\n      return {\n        showLine,\n        treeData,\n      };\n    },\n  };\n\n  const treeData = [\n    {\n      title: 'Trunk 1',\n      key: '0-0',\n      children: [\n        {\n          title: 'Trunk 1-0',\n          key: '0-0-0',\n          children: [\n            { title: 'leaf', key: '0-0-0-0' },\n            {\n              title: 'leaf',\n              key: '0-0-0-1',\n              children: [{ title: 'leaf', key: '0-0-0-1-0' }],\n            },\n            { title: 'leaf', key: '0-0-0-2' },\n          ],\n        },\n        {\n          title: 'Trunk 1-1',\n          key: '0-0-1',\n        },\n        {\n          title: 'Trunk 1-2',\n          key: '0-0-2',\n          children: [\n            { title: 'leaf', key: '0-0-2-0' },\n            {\n              title: 'leaf',\n              key: '0-0-2-1',\n            },\n          ],\n        },\n      ],\n    },\n    {\n      title: 'Trunk 2',\n      key: '0-1',\n    },\n    {\n      title: 'Trunk 3',\n      key: '0-2',\n      children: [\n        {\n          title: 'Trunk 3-0',\n          key: '0-2-0',\n          children: [\n            { title: 'leaf', key: '0-2-0-0' },\n            { title: 'leaf', key: '0-2-0-1' },\n          ],\n        },\n      ],\n    },\n  ];\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/tree/__demo__/size.md",
    "content": "```yaml\ntitle:\n  zh-CN: 不同尺寸\n  en-US: Size\n```\n\n## zh-CN\n\n不同尺寸的树。\n\n---\n\n## en-US\n\nTrees of different sizes.\n\n---\n\n```vue\n<template>\n  <div style=\"margin-bottom: 20px;\">\n    <a-radio-group v-model=\"size\" type='button'>\n      <a-radio value=\"mini\">mini</a-radio>\n      <a-radio value=\"small\">small</a-radio>\n      <a-radio value=\"medium\">medium</a-radio>\n      <a-radio value=\"large\">large</a-radio>\n    </a-radio-group>\n  </div>\n  <a-tree\n    style=\"margin-right: 20px;\"\n    :blockNode=\"true\"\n    :checkable=\"true\"\n    :size=\"size\"\n    :data=\"treeData\" />\n</template>\n<script>\n  import { ref } from 'vue';\n\n  export default {\n    setup() {\n      const size = ref('medium');\n\n      return {\n        size,\n        treeData,\n      };\n    },\n  };\n\n  const treeData = [\n    {\n      title: 'Trunk 0-0',\n      key: '0-0',\n      children: [\n        {\n          title: 'Branch 0-0-0',\n          key: '0-0-0',\n          children: [\n            {\n              title: 'Leaf',\n              key: '0-0-0-0',\n            },\n            {\n              title: 'Leaf',\n              key: '0-0-0-1',\n            }\n          ]\n        },\n        {\n          title: 'Branch 0-0-1',\n          key: '0-0-1',\n          children: [\n            {\n              title: 'Leaf',\n              key: '0-0-1-0',\n            },\n          ]\n        },\n      ],\n    },\n  ];\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/tree/__demo__/virtual.md",
    "content": "```yaml\ntitle:\n  zh-CN: 虚拟列表\n  en-US: Virtual List\n```\n\n## zh-CN\n\n通过指定 `virtualListProps` 来开启虚拟列表，在大量数据时获得高性能表现。\n\n---\n\n## en-US\n\nBy specifying `virtualListProps` to turn on the virtual list, high performance can be obtained when a large amount of data is used.\n\n```vue\n<template>\n  <a-button\n    type=\"primary\"\n    :style=\"{ marginBottom: '20px' }\"\n    @click=\"scrollIntoView\"\n  >\n    Scroll to 0-0-2-2, i.e. the 26th.\n  </a-button>\n  <a-tree\n    ref=\"treeRef\"\n    blockNode\n    checkable\n    :data=\"treeData\"\n    :virtualListProps=\"{\n      height: 200,\n    }\"\n  />\n</template>\n<script>\n  import { ref } from 'vue';\n  export default {\n    setup() {\n      const treeRef = ref();\n      const treeData = loop();\n      return {\n        treeRef,\n        treeData,\n        scrollIntoView() {\n          treeRef.value && treeRef.value.scrollIntoView({ key: '0-0-2-2' });\n        }\n      }\n    }\n  }\n\n  function loop(path = '0', level = 2) {\n    const list = [];\n    for (let i = 0; i < 10; i += 1) {\n      const key = `${path}-${i}`;\n      const treeNode = {\n        title: key,\n        key,\n      };\n\n      if (level > 0) {\n        treeNode.children = loop(key, level - 1);\n      }\n\n      list.push(treeNode);\n    }\n    return list;\n  }\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/tree/__test__/__snapshots__/demo.test.ts.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`<tree> demo: render [basic] correctly 1`] = `\n\"<div class=\\\\\"arco-tree arco-tree-size-medium\\\\\">\n  <div class=\\\\\"arco-tree-node arco-tree-node-is-tail\\\\\" data-level=\\\\\"0\\\\\" data-key=\\\\\"0-0\\\\\">\n    <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher\\\\\"><span class=\\\\\"arco-icon-hover arco-tree-node-icon-hover\\\\\"><span class=\\\\\"arco-tree-node-switcher-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-caret-down\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M24.938 34.829a1.2 1.2 0 0 1-1.875 0L9.56 17.949c-.628-.785-.069-1.949.937-1.949h27.007c1.006 0 1.565 1.164.937 1.95L24.937 34.829Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path></svg></span></span></span><!-- checkbox -->\n    <!--v-if-->\n    <!-- 内容 --><span class=\\\\\"arco-tree-node-title\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->Trunk 0-0<!--v-if--></span></span><!-- 额外 -->\n    <!--v-if-->\n  </div>\n  <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n</div>\"\n`;\n\nexports[`<tree> demo: render [block-node] correctly 1`] = `\n\"<div class=\\\\\"arco-tree arco-tree-size-medium\\\\\">\n  <div class=\\\\\"arco-tree-node arco-tree-node-is-tail arco-tree-node-expanded\\\\\" data-level=\\\\\"0\\\\\" data-key=\\\\\"0-0\\\\\">\n    <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher arco-tree-node-switcher-expanded\\\\\"><span class=\\\\\"arco-icon-hover arco-tree-node-icon-hover\\\\\"><span class=\\\\\"arco-tree-node-switcher-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-caret-down\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M24.938 34.829a1.2 1.2 0 0 1-1.875 0L9.56 17.949c-.628-.785-.069-1.949.937-1.949h27.007c1.006 0 1.565 1.164.937 1.95L24.937 34.829Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path></svg></span></span></span><!-- checkbox -->\n    <!--v-if-->\n    <!-- 内容 --><span class=\\\\\"arco-tree-node-title arco-tree-node-title-block\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->Trunk 0-0<!--v-if--></span></span><!-- 额外 -->\n    <!--v-if-->\n  </div>\n  <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n  <div class=\\\\\"arco-tree-node arco-tree-node-expanded\\\\\" data-level=\\\\\"1\\\\\" data-key=\\\\\"0-0-0\\\\\">\n    <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"><span class=\\\\\"arco-tree-node-indent-block arco-tree-node-indent-block-lineless\\\\\"></span></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher arco-tree-node-switcher-expanded\\\\\"><span class=\\\\\"arco-icon-hover arco-tree-node-icon-hover\\\\\"><span class=\\\\\"arco-tree-node-switcher-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-caret-down\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M24.938 34.829a1.2 1.2 0 0 1-1.875 0L9.56 17.949c-.628-.785-.069-1.949.937-1.949h27.007c1.006 0 1.565 1.164.937 1.95L24.937 34.829Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path></svg></span></span></span><!-- checkbox -->\n    <!--v-if-->\n    <!-- 内容 --><span class=\\\\\"arco-tree-node-title arco-tree-node-title-block\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->Branch 0-0-0<!--v-if--></span></span><!-- 额外 -->\n    <!--v-if-->\n  </div>\n  <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n  <div class=\\\\\"arco-tree-node arco-tree-node-is-leaf\\\\\" data-level=\\\\\"2\\\\\" data-key=\\\\\"0-0-0-0\\\\\">\n    <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"><span class=\\\\\"arco-tree-node-indent-block arco-tree-node-indent-block-lineless\\\\\"></span><span class=\\\\\"arco-tree-node-indent-block\\\\\"></span></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher\\\\\"><!----></span><!-- checkbox -->\n    <!--v-if-->\n    <!-- 内容 --><span class=\\\\\"arco-tree-node-title arco-tree-node-title-block\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->Leaf<!--v-if--></span></span><!-- 额外 -->\n    <!--v-if-->\n  </div>\n  <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n  <div class=\\\\\"arco-tree-node arco-tree-node-is-leaf arco-tree-node-is-tail\\\\\" data-level=\\\\\"2\\\\\" data-key=\\\\\"0-0-0-1\\\\\">\n    <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"><span class=\\\\\"arco-tree-node-indent-block arco-tree-node-indent-block-lineless\\\\\"></span><span class=\\\\\"arco-tree-node-indent-block\\\\\"></span></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher\\\\\"><!----></span><!-- checkbox -->\n    <!--v-if-->\n    <!-- 内容 --><span class=\\\\\"arco-tree-node-title arco-tree-node-title-block\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->Leaf<!--v-if--></span></span><!-- 额外 -->\n    <!--v-if-->\n  </div>\n  <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n  <div class=\\\\\"arco-tree-node arco-tree-node-is-tail arco-tree-node-expanded\\\\\" data-level=\\\\\"1\\\\\" data-key=\\\\\"0-0-1\\\\\">\n    <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"><span class=\\\\\"arco-tree-node-indent-block arco-tree-node-indent-block-lineless\\\\\"></span></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher arco-tree-node-switcher-expanded\\\\\"><span class=\\\\\"arco-icon-hover arco-tree-node-icon-hover\\\\\"><span class=\\\\\"arco-tree-node-switcher-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-caret-down\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M24.938 34.829a1.2 1.2 0 0 1-1.875 0L9.56 17.949c-.628-.785-.069-1.949.937-1.949h27.007c1.006 0 1.565 1.164.937 1.95L24.937 34.829Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path></svg></span></span></span><!-- checkbox -->\n    <!--v-if-->\n    <!-- 内容 --><span class=\\\\\"arco-tree-node-title arco-tree-node-title-block\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->Branch 0-0-1<!--v-if--></span></span><!-- 额外 -->\n    <!--v-if-->\n  </div>\n  <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n  <div class=\\\\\"arco-tree-node arco-tree-node-is-leaf arco-tree-node-is-tail\\\\\" data-level=\\\\\"2\\\\\" data-key=\\\\\"0-0-1-0\\\\\">\n    <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"><span class=\\\\\"arco-tree-node-indent-block arco-tree-node-indent-block-lineless\\\\\"></span><span class=\\\\\"arco-tree-node-indent-block arco-tree-node-indent-block-lineless\\\\\"></span></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher\\\\\"><!----></span><!-- checkbox -->\n    <!--v-if-->\n    <!-- 内容 --><span class=\\\\\"arco-tree-node-title arco-tree-node-title-block\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->Leaf<!--v-if--></span></span><!-- 额外 -->\n    <!--v-if-->\n  </div>\n  <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n</div>\"\n`;\n\nexports[`<tree> demo: render [checkable] correctly 1`] = `\n\"<label class=\\\\\"arco-checkbox\\\\\" style=\\\\\"margin-bottom: 24px;\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span><span class=\\\\\"arco-checkbox-label\\\\\"> checkStrictly </span></label>\n<div class=\\\\\"arco-tree arco-tree-checkable arco-tree-size-medium\\\\\">\n  <div class=\\\\\"arco-tree-node arco-tree-node-expanded\\\\\" data-level=\\\\\"0\\\\\" data-key=\\\\\"0-0\\\\\">\n    <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher arco-tree-node-switcher-expanded\\\\\"><span class=\\\\\"arco-icon-hover arco-tree-node-icon-hover\\\\\"><span class=\\\\\"arco-tree-node-switcher-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-caret-down\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M24.938 34.829a1.2 1.2 0 0 1-1.875 0L9.56 17.949c-.628-.785-.069-1.949.937-1.949h27.007c1.006 0 1.565 1.164.937 1.95L24.937 34.829Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path></svg></span></span></span><!-- checkbox --><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n      <!---->\n    </label><!-- 内容 --><span class=\\\\\"arco-tree-node-title\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->Trunk 0-0<!--v-if--></span></span><!-- 额外 -->\n    <!--v-if-->\n  </div>\n  <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n  <div class=\\\\\"arco-tree-node arco-tree-node-is-leaf\\\\\" data-level=\\\\\"1\\\\\" data-key=\\\\\"0-0-1\\\\\">\n    <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"><span class=\\\\\"arco-tree-node-indent-block\\\\\"></span></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher\\\\\"><!----></span><!-- checkbox --><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n      <!---->\n    </label><!-- 内容 --><span class=\\\\\"arco-tree-node-title\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->Leaf<!--v-if--></span></span><!-- 额外 -->\n    <!--v-if-->\n  </div>\n  <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n  <div class=\\\\\"arco-tree-node arco-tree-node-is-tail arco-tree-node-expanded arco-tree-node-disabled\\\\\" data-level=\\\\\"1\\\\\" data-key=\\\\\"0-0-2\\\\\">\n    <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"><span class=\\\\\"arco-tree-node-indent-block\\\\\"></span></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher arco-tree-node-switcher-expanded\\\\\"><span class=\\\\\"arco-icon-hover arco-tree-node-icon-hover\\\\\"><span class=\\\\\"arco-tree-node-switcher-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-caret-down\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M24.938 34.829a1.2 1.2 0 0 1-1.875 0L9.56 17.949c-.628-.785-.069-1.949.937-1.949h27.007c1.006 0 1.565 1.164.937 1.95L24.937 34.829Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path></svg></span></span></span><!-- checkbox --><label aria-disabled=\\\\\"true\\\\\" class=\\\\\"arco-checkbox arco-checkbox-disabled\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" disabled=\\\\\"\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-icon-hover-disabled arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n      <!---->\n    </label><!-- 内容 --><span class=\\\\\"arco-tree-node-title\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->Branch 0-0-2<!--v-if--></span></span><!-- 额外 -->\n    <!--v-if-->\n  </div>\n  <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n  <div class=\\\\\"arco-tree-node arco-tree-node-is-leaf\\\\\" data-level=\\\\\"2\\\\\" data-key=\\\\\"0-0-2-1\\\\\">\n    <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"><span class=\\\\\"arco-tree-node-indent-block\\\\\"></span><span class=\\\\\"arco-tree-node-indent-block arco-tree-node-indent-block-lineless\\\\\"></span></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher\\\\\"><!----></span><!-- checkbox --><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n      <!---->\n    </label><!-- 内容 --><span class=\\\\\"arco-tree-node-title\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->Leaf<!--v-if--></span></span><!-- 额外 -->\n    <!--v-if-->\n  </div>\n  <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n  <div class=\\\\\"arco-tree-node arco-tree-node-is-leaf arco-tree-node-is-tail\\\\\" data-level=\\\\\"2\\\\\" data-key=\\\\\"0-0-2-2\\\\\">\n    <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"><span class=\\\\\"arco-tree-node-indent-block\\\\\"></span><span class=\\\\\"arco-tree-node-indent-block arco-tree-node-indent-block-lineless\\\\\"></span></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher\\\\\"><!----></span><!-- checkbox --><label aria-disabled=\\\\\"true\\\\\" class=\\\\\"arco-checkbox arco-checkbox-disabled\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" disabled=\\\\\"\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-icon-hover-disabled arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n      <!---->\n    </label><!-- 内容 --><span class=\\\\\"arco-tree-node-title\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->Leaf<!--v-if--></span></span><!-- 额外 -->\n    <!--v-if-->\n  </div>\n  <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n  <div class=\\\\\"arco-tree-node arco-tree-node-is-tail arco-tree-node-expanded\\\\\" data-level=\\\\\"0\\\\\" data-key=\\\\\"0-1\\\\\">\n    <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher arco-tree-node-switcher-expanded\\\\\"><span class=\\\\\"arco-icon-hover arco-tree-node-icon-hover\\\\\"><span class=\\\\\"arco-tree-node-switcher-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-caret-down\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M24.938 34.829a1.2 1.2 0 0 1-1.875 0L9.56 17.949c-.628-.785-.069-1.949.937-1.949h27.007c1.006 0 1.565 1.164.937 1.95L24.937 34.829Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path></svg></span></span></span><!-- checkbox --><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n      <!---->\n    </label><!-- 内容 --><span class=\\\\\"arco-tree-node-title\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->Trunk 0-1<!--v-if--></span></span><!-- 额外 -->\n    <!--v-if-->\n  </div>\n  <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n  <div class=\\\\\"arco-tree-node arco-tree-node-expanded\\\\\" data-level=\\\\\"1\\\\\" data-key=\\\\\"0-1-1\\\\\">\n    <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"><span class=\\\\\"arco-tree-node-indent-block arco-tree-node-indent-block-lineless\\\\\"></span></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher arco-tree-node-switcher-expanded\\\\\"><span class=\\\\\"arco-icon-hover arco-tree-node-icon-hover\\\\\"><span class=\\\\\"arco-tree-node-switcher-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-caret-down\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M24.938 34.829a1.2 1.2 0 0 1-1.875 0L9.56 17.949c-.628-.785-.069-1.949.937-1.949h27.007c1.006 0 1.565 1.164.937 1.95L24.937 34.829Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path></svg></span></span></span><!-- checkbox --><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n      <!---->\n    </label><!-- 内容 --><span class=\\\\\"arco-tree-node-title\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->Branch 0-1-1<!--v-if--></span></span><!-- 额外 -->\n    <!--v-if-->\n  </div>\n  <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n  <div class=\\\\\"arco-tree-node arco-tree-node-is-leaf\\\\\" data-level=\\\\\"2\\\\\" data-key=\\\\\"0-1-1-1\\\\\">\n    <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"><span class=\\\\\"arco-tree-node-indent-block arco-tree-node-indent-block-lineless\\\\\"></span><span class=\\\\\"arco-tree-node-indent-block\\\\\"></span></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher\\\\\"><!----></span><!-- checkbox --><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n      <!---->\n    </label><!-- 内容 --><span class=\\\\\"arco-tree-node-title\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->Leaf <!--v-if--></span></span><!-- 额外 -->\n    <!--v-if-->\n  </div>\n  <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n  <div class=\\\\\"arco-tree-node arco-tree-node-is-leaf arco-tree-node-is-tail\\\\\" data-level=\\\\\"2\\\\\" data-key=\\\\\"0-1-1-2\\\\\">\n    <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"><span class=\\\\\"arco-tree-node-indent-block arco-tree-node-indent-block-lineless\\\\\"></span><span class=\\\\\"arco-tree-node-indent-block\\\\\"></span></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher\\\\\"><!----></span><!-- checkbox --><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n      <!---->\n    </label><!-- 内容 --><span class=\\\\\"arco-tree-node-title\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->Leaf <!--v-if--></span></span><!-- 额外 -->\n    <!--v-if-->\n  </div>\n  <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n  <div class=\\\\\"arco-tree-node arco-tree-node-is-leaf arco-tree-node-is-tail\\\\\" data-level=\\\\\"1\\\\\" data-key=\\\\\"0-1-2\\\\\">\n    <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"><span class=\\\\\"arco-tree-node-indent-block arco-tree-node-indent-block-lineless\\\\\"></span></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher\\\\\"><!----></span><!-- checkbox --><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n      <!---->\n    </label><!-- 内容 --><span class=\\\\\"arco-tree-node-title\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->Leaf<!--v-if--></span></span><!-- 额外 -->\n    <!--v-if-->\n  </div>\n  <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n</div>\"\n`;\n\nexports[`<tree> demo: render [checked-strategy] correctly 1`] = `\n\"<span class=\\\\\"arco-radio-group-button arco-radio-group-size-medium arco-radio-group-direction-horizontal\\\\\"><label class=\\\\\"arco-radio-button arco-radio-checked\\\\\"><input type=\\\\\"radio\\\\\" checked=\\\\\"\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"all\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">show all</span></label><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"parent\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">show parent</span></label><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"child\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">show child</span></label></span>\n<br>\n<span class=\\\\\"arco-typography\\\\\" style=\\\\\"margin: 24px 0px; display: inline-block;\\\\\"> Current: <!----><!--v-if--><!--v-if--><!--v-if--></span>\n<br>\n<div class=\\\\\"arco-tree arco-tree-checkable arco-tree-size-medium\\\\\">\n  <div class=\\\\\"arco-tree-node arco-tree-node-expanded\\\\\" data-level=\\\\\"0\\\\\" data-key=\\\\\"0-0\\\\\">\n    <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher arco-tree-node-switcher-expanded\\\\\"><span class=\\\\\"arco-icon-hover arco-tree-node-icon-hover\\\\\"><span class=\\\\\"arco-tree-node-switcher-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-caret-down\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M24.938 34.829a1.2 1.2 0 0 1-1.875 0L9.56 17.949c-.628-.785-.069-1.949.937-1.949h27.007c1.006 0 1.565 1.164.937 1.95L24.937 34.829Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path></svg></span></span></span><!-- checkbox --><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n      <!---->\n    </label><!-- 内容 --><span class=\\\\\"arco-tree-node-title\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->Trunk 0-0<!--v-if--></span></span><!-- 额外 -->\n    <!--v-if-->\n  </div>\n  <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n  <div class=\\\\\"arco-tree-node arco-tree-node-is-leaf\\\\\" data-level=\\\\\"1\\\\\" data-key=\\\\\"0-0-1\\\\\">\n    <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"><span class=\\\\\"arco-tree-node-indent-block\\\\\"></span></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher\\\\\"><!----></span><!-- checkbox --><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n      <!---->\n    </label><!-- 内容 --><span class=\\\\\"arco-tree-node-title\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->Leaf<!--v-if--></span></span><!-- 额外 -->\n    <!--v-if-->\n  </div>\n  <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n  <div class=\\\\\"arco-tree-node arco-tree-node-is-tail arco-tree-node-expanded\\\\\" data-level=\\\\\"1\\\\\" data-key=\\\\\"0-0-2\\\\\">\n    <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"><span class=\\\\\"arco-tree-node-indent-block\\\\\"></span></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher arco-tree-node-switcher-expanded\\\\\"><span class=\\\\\"arco-icon-hover arco-tree-node-icon-hover\\\\\"><span class=\\\\\"arco-tree-node-switcher-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-caret-down\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M24.938 34.829a1.2 1.2 0 0 1-1.875 0L9.56 17.949c-.628-.785-.069-1.949.937-1.949h27.007c1.006 0 1.565 1.164.937 1.95L24.937 34.829Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path></svg></span></span></span><!-- checkbox --><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n      <!---->\n    </label><!-- 内容 --><span class=\\\\\"arco-tree-node-title\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->Branch 0-0-2<!--v-if--></span></span><!-- 额外 -->\n    <!--v-if-->\n  </div>\n  <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n  <div class=\\\\\"arco-tree-node arco-tree-node-is-leaf arco-tree-node-is-tail\\\\\" data-level=\\\\\"2\\\\\" data-key=\\\\\"0-0-2-1\\\\\">\n    <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"><span class=\\\\\"arco-tree-node-indent-block\\\\\"></span><span class=\\\\\"arco-tree-node-indent-block arco-tree-node-indent-block-lineless\\\\\"></span></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher\\\\\"><!----></span><!-- checkbox --><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n      <!---->\n    </label><!-- 内容 --><span class=\\\\\"arco-tree-node-title\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->Leaf<!--v-if--></span></span><!-- 额外 -->\n    <!--v-if-->\n  </div>\n  <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n  <div class=\\\\\"arco-tree-node arco-tree-node-is-tail arco-tree-node-expanded\\\\\" data-level=\\\\\"0\\\\\" data-key=\\\\\"0-1\\\\\">\n    <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher arco-tree-node-switcher-expanded\\\\\"><span class=\\\\\"arco-icon-hover arco-tree-node-icon-hover\\\\\"><span class=\\\\\"arco-tree-node-switcher-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-caret-down\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M24.938 34.829a1.2 1.2 0 0 1-1.875 0L9.56 17.949c-.628-.785-.069-1.949.937-1.949h27.007c1.006 0 1.565 1.164.937 1.95L24.937 34.829Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path></svg></span></span></span><!-- checkbox --><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n      <!---->\n    </label><!-- 内容 --><span class=\\\\\"arco-tree-node-title\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->Trunk 0-1<!--v-if--></span></span><!-- 额外 -->\n    <!--v-if-->\n  </div>\n  <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n  <div class=\\\\\"arco-tree-node arco-tree-node-expanded\\\\\" data-level=\\\\\"1\\\\\" data-key=\\\\\"0-1-1\\\\\">\n    <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"><span class=\\\\\"arco-tree-node-indent-block arco-tree-node-indent-block-lineless\\\\\"></span></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher arco-tree-node-switcher-expanded\\\\\"><span class=\\\\\"arco-icon-hover arco-tree-node-icon-hover\\\\\"><span class=\\\\\"arco-tree-node-switcher-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-caret-down\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M24.938 34.829a1.2 1.2 0 0 1-1.875 0L9.56 17.949c-.628-.785-.069-1.949.937-1.949h27.007c1.006 0 1.565 1.164.937 1.95L24.937 34.829Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path></svg></span></span></span><!-- checkbox --><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n      <!---->\n    </label><!-- 内容 --><span class=\\\\\"arco-tree-node-title\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->Branch 0-1-1<!--v-if--></span></span><!-- 额外 -->\n    <!--v-if-->\n  </div>\n  <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n  <div class=\\\\\"arco-tree-node arco-tree-node-is-leaf\\\\\" data-level=\\\\\"2\\\\\" data-key=\\\\\"0-1-1-1\\\\\">\n    <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"><span class=\\\\\"arco-tree-node-indent-block arco-tree-node-indent-block-lineless\\\\\"></span><span class=\\\\\"arco-tree-node-indent-block\\\\\"></span></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher\\\\\"><!----></span><!-- checkbox --><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n      <!---->\n    </label><!-- 内容 --><span class=\\\\\"arco-tree-node-title\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->Leaf<!--v-if--></span></span><!-- 额外 -->\n    <!--v-if-->\n  </div>\n  <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n  <div class=\\\\\"arco-tree-node arco-tree-node-is-leaf arco-tree-node-is-tail\\\\\" data-level=\\\\\"2\\\\\" data-key=\\\\\"0-1-1-2\\\\\">\n    <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"><span class=\\\\\"arco-tree-node-indent-block arco-tree-node-indent-block-lineless\\\\\"></span><span class=\\\\\"arco-tree-node-indent-block\\\\\"></span></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher\\\\\"><!----></span><!-- checkbox --><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n      <!---->\n    </label><!-- 内容 --><span class=\\\\\"arco-tree-node-title\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->Leaf<!--v-if--></span></span><!-- 额外 -->\n    <!--v-if-->\n  </div>\n  <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n  <div class=\\\\\"arco-tree-node arco-tree-node-is-leaf arco-tree-node-is-tail\\\\\" data-level=\\\\\"1\\\\\" data-key=\\\\\"0-1-2\\\\\">\n    <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"><span class=\\\\\"arco-tree-node-indent-block arco-tree-node-indent-block-lineless\\\\\"></span></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher\\\\\"><!----></span><!-- checkbox --><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n      <!---->\n    </label><!-- 内容 --><span class=\\\\\"arco-tree-node-title\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->Leaf<!--v-if--></span></span><!-- 额外 -->\n    <!--v-if-->\n  </div>\n  <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n</div>\"\n`;\n\nexports[`<tree> demo: render [control] correctly 1`] = `\n\"<div class=\\\\\"arco-btn-group\\\\\" style=\\\\\"margin-bottom: 20px;\\\\\"><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n    <!--v-if-->select all\n  </button><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n    <!--v-if-->unfold\n  </button></div>\n<div class=\\\\\"arco-tree arco-tree-checkable arco-tree-size-medium\\\\\">\n  <div class=\\\\\"arco-tree-node\\\\\" data-level=\\\\\"0\\\\\" data-key=\\\\\"0-0\\\\\">\n    <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher\\\\\"><span class=\\\\\"arco-icon-hover arco-tree-node-icon-hover\\\\\"><span class=\\\\\"arco-tree-node-switcher-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-caret-down\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M24.938 34.829a1.2 1.2 0 0 1-1.875 0L9.56 17.949c-.628-.785-.069-1.949.937-1.949h27.007c1.006 0 1.565 1.164.937 1.95L24.937 34.829Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path></svg></span></span></span><!-- checkbox --><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n      <!---->\n    </label><!-- 内容 --><span class=\\\\\"arco-tree-node-title\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->Trunk 0-0<!--v-if--></span></span><!-- 额外 -->\n    <!--v-if-->\n  </div>\n  <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n  <div class=\\\\\"arco-tree-node arco-tree-node-is-tail\\\\\" data-level=\\\\\"0\\\\\" data-key=\\\\\"0-1\\\\\">\n    <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher\\\\\"><span class=\\\\\"arco-icon-hover arco-tree-node-icon-hover\\\\\"><span class=\\\\\"arco-tree-node-switcher-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-caret-down\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M24.938 34.829a1.2 1.2 0 0 1-1.875 0L9.56 17.949c-.628-.785-.069-1.949.937-1.949h27.007c1.006 0 1.565 1.164.937 1.95L24.937 34.829Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path></svg></span></span></span><!-- checkbox --><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n      <!---->\n    </label><!-- 内容 --><span class=\\\\\"arco-tree-node-title\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->Trunk 0-1<!--v-if--></span></span><!-- 额外 -->\n    <!--v-if-->\n  </div>\n  <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n</div>\"\n`;\n\nexports[`<tree> demo: render [draggable] correctly 1`] = `\n\"<label class=\\\\\"arco-checkbox\\\\\" style=\\\\\"margin-bottom: 20px;\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span><span class=\\\\\"arco-checkbox-label\\\\\"> checkable </span></label>\n<div class=\\\\\"arco-tree arco-tree-size-medium tree-demo\\\\\">\n  <div class=\\\\\"arco-tree-node arco-tree-node-expanded\\\\\" data-level=\\\\\"0\\\\\" data-key=\\\\\"0-0\\\\\">\n    <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher arco-tree-node-switcher-expanded\\\\\"><span class=\\\\\"arco-icon-hover arco-tree-node-icon-hover\\\\\"><span class=\\\\\"arco-tree-node-switcher-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-caret-down\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M24.938 34.829a1.2 1.2 0 0 1-1.875 0L9.56 17.949c-.628-.785-.069-1.949.937-1.949h27.007c1.006 0 1.565 1.164.937 1.95L24.937 34.829Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path></svg></span></span></span><!-- checkbox -->\n    <!--v-if-->\n    <!-- 内容 --><span class=\\\\\"arco-tree-node-title arco-tree-node-title-draggable arco-tree-node-title-block\\\\\" draggable=\\\\\"true\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->Trunk 0-0<span class=\\\\\"arco-tree-node-icon arco-tree-node-drag-icon\\\\\"><!-- 拖拽图标 --><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-drag-dot-vertical\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M17 8h2v2h-2V8ZM17 23h2v2h-2v-2ZM17 38h2v2h-2v-2ZM29 8h2v2h-2V8ZM29 23h2v2h-2v-2ZM29 38h2v2h-2v-2Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path><path d=\\\\\"M17 8h2v2h-2V8ZM17 23h2v2h-2v-2ZM17 38h2v2h-2v-2ZM29 8h2v2h-2V8ZM29 23h2v2h-2v-2ZM29 38h2v2h-2v-2Z\\\\\"></path></svg></span></span></span><!-- 额外 -->\n    <!--v-if-->\n  </div>\n  <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n  <div class=\\\\\"arco-tree-node arco-tree-node-is-leaf\\\\\" data-level=\\\\\"1\\\\\" data-key=\\\\\"0-0-1\\\\\">\n    <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"><span class=\\\\\"arco-tree-node-indent-block\\\\\"></span></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher\\\\\"><!----></span><!-- checkbox -->\n    <!--v-if-->\n    <!-- 内容 --><span class=\\\\\"arco-tree-node-title arco-tree-node-title-draggable arco-tree-node-title-block\\\\\" draggable=\\\\\"true\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->Leaf 0-0-1<span class=\\\\\"arco-tree-node-icon arco-tree-node-drag-icon\\\\\"><!-- 拖拽图标 --><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-drag-dot-vertical\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M17 8h2v2h-2V8ZM17 23h2v2h-2v-2ZM17 38h2v2h-2v-2ZM29 8h2v2h-2V8ZM29 23h2v2h-2v-2ZM29 38h2v2h-2v-2Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path><path d=\\\\\"M17 8h2v2h-2V8ZM17 23h2v2h-2v-2ZM17 38h2v2h-2v-2ZM29 8h2v2h-2V8ZM29 23h2v2h-2v-2ZM29 38h2v2h-2v-2Z\\\\\"></path></svg></span></span></span><!-- 额外 -->\n    <!--v-if-->\n  </div>\n  <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n  <div class=\\\\\"arco-tree-node arco-tree-node-is-tail arco-tree-node-expanded\\\\\" data-level=\\\\\"1\\\\\" data-key=\\\\\"0-0-2\\\\\">\n    <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"><span class=\\\\\"arco-tree-node-indent-block\\\\\"></span></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher arco-tree-node-switcher-expanded\\\\\"><span class=\\\\\"arco-icon-hover arco-tree-node-icon-hover\\\\\"><span class=\\\\\"arco-tree-node-switcher-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-caret-down\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M24.938 34.829a1.2 1.2 0 0 1-1.875 0L9.56 17.949c-.628-.785-.069-1.949.937-1.949h27.007c1.006 0 1.565 1.164.937 1.95L24.937 34.829Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path></svg></span></span></span><!-- checkbox -->\n    <!--v-if-->\n    <!-- 内容 --><span class=\\\\\"arco-tree-node-title arco-tree-node-title-draggable arco-tree-node-title-block\\\\\" draggable=\\\\\"true\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->Branch 0-0-2<span class=\\\\\"arco-tree-node-icon arco-tree-node-drag-icon\\\\\"><!-- 拖拽图标 --><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-drag-dot-vertical\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M17 8h2v2h-2V8ZM17 23h2v2h-2v-2ZM17 38h2v2h-2v-2ZM29 8h2v2h-2V8ZM29 23h2v2h-2v-2ZM29 38h2v2h-2v-2Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path><path d=\\\\\"M17 8h2v2h-2V8ZM17 23h2v2h-2v-2ZM17 38h2v2h-2v-2ZM29 8h2v2h-2V8ZM29 23h2v2h-2v-2ZM29 38h2v2h-2v-2Z\\\\\"></path></svg></span></span></span><!-- 额外 -->\n    <!--v-if-->\n  </div>\n  <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n  <div class=\\\\\"arco-tree-node arco-tree-node-is-leaf arco-tree-node-is-tail\\\\\" data-level=\\\\\"2\\\\\" data-key=\\\\\"0-0-2-1\\\\\">\n    <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"><span class=\\\\\"arco-tree-node-indent-block\\\\\"></span><span class=\\\\\"arco-tree-node-indent-block arco-tree-node-indent-block-lineless\\\\\"></span></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher\\\\\"><!----></span><!-- checkbox -->\n    <!--v-if-->\n    <!-- 内容 --><span class=\\\\\"arco-tree-node-title arco-tree-node-title-block\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->Leaf 0-0-2-1 (Drag disabled)<!--v-if--></span></span><!-- 额外 -->\n    <!--v-if-->\n  </div>\n  <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n  <div class=\\\\\"arco-tree-node arco-tree-node-is-tail arco-tree-node-expanded\\\\\" data-level=\\\\\"0\\\\\" data-key=\\\\\"0-1\\\\\">\n    <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher arco-tree-node-switcher-expanded\\\\\"><span class=\\\\\"arco-icon-hover arco-tree-node-icon-hover\\\\\"><span class=\\\\\"arco-tree-node-switcher-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-caret-down\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M24.938 34.829a1.2 1.2 0 0 1-1.875 0L9.56 17.949c-.628-.785-.069-1.949.937-1.949h27.007c1.006 0 1.565 1.164.937 1.95L24.937 34.829Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path></svg></span></span></span><!-- checkbox -->\n    <!--v-if-->\n    <!-- 内容 --><span class=\\\\\"arco-tree-node-title arco-tree-node-title-draggable arco-tree-node-title-block\\\\\" draggable=\\\\\"true\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->Trunk 0-1<span class=\\\\\"arco-tree-node-icon arco-tree-node-drag-icon\\\\\"><!-- 拖拽图标 --><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-drag-dot-vertical\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M17 8h2v2h-2V8ZM17 23h2v2h-2v-2ZM17 38h2v2h-2v-2ZM29 8h2v2h-2V8ZM29 23h2v2h-2v-2ZM29 38h2v2h-2v-2Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path><path d=\\\\\"M17 8h2v2h-2V8ZM17 23h2v2h-2v-2ZM17 38h2v2h-2v-2ZM29 8h2v2h-2V8ZM29 23h2v2h-2v-2ZM29 38h2v2h-2v-2Z\\\\\"></path></svg></span></span></span><!-- 额外 -->\n    <!--v-if-->\n  </div>\n  <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n  <div class=\\\\\"arco-tree-node arco-tree-node-expanded\\\\\" data-level=\\\\\"1\\\\\" data-key=\\\\\"0-1-1\\\\\">\n    <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"><span class=\\\\\"arco-tree-node-indent-block arco-tree-node-indent-block-lineless\\\\\"></span></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher arco-tree-node-switcher-expanded\\\\\"><span class=\\\\\"arco-icon-hover arco-tree-node-icon-hover\\\\\"><span class=\\\\\"arco-tree-node-switcher-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-caret-down\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M24.938 34.829a1.2 1.2 0 0 1-1.875 0L9.56 17.949c-.628-.785-.069-1.949.937-1.949h27.007c1.006 0 1.565 1.164.937 1.95L24.937 34.829Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path></svg></span></span></span><!-- checkbox -->\n    <!--v-if-->\n    <!-- 内容 --><span class=\\\\\"arco-tree-node-title arco-tree-node-title-draggable arco-tree-node-title-block\\\\\" draggable=\\\\\"true\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->Branch 0-1-1<span class=\\\\\"arco-tree-node-icon arco-tree-node-drag-icon\\\\\"><!-- 拖拽图标 --><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-drag-dot-vertical\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M17 8h2v2h-2V8ZM17 23h2v2h-2v-2ZM17 38h2v2h-2v-2ZM29 8h2v2h-2V8ZM29 23h2v2h-2v-2ZM29 38h2v2h-2v-2Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path><path d=\\\\\"M17 8h2v2h-2V8ZM17 23h2v2h-2v-2ZM17 38h2v2h-2v-2ZM29 8h2v2h-2V8ZM29 23h2v2h-2v-2ZM29 38h2v2h-2v-2Z\\\\\"></path></svg></span></span></span><!-- 额外 -->\n    <!--v-if-->\n  </div>\n  <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n  <div class=\\\\\"arco-tree-node arco-tree-node-is-leaf\\\\\" data-level=\\\\\"2\\\\\" data-key=\\\\\"0-1-1-1\\\\\">\n    <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"><span class=\\\\\"arco-tree-node-indent-block arco-tree-node-indent-block-lineless\\\\\"></span><span class=\\\\\"arco-tree-node-indent-block\\\\\"></span></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher\\\\\"><!----></span><!-- checkbox -->\n    <!--v-if-->\n    <!-- 内容 --><span class=\\\\\"arco-tree-node-title arco-tree-node-title-draggable arco-tree-node-title-block\\\\\" draggable=\\\\\"true\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->Leaf 0-1-1-1<span class=\\\\\"arco-tree-node-icon arco-tree-node-drag-icon\\\\\"><!-- 拖拽图标 --><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-drag-dot-vertical\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M17 8h2v2h-2V8ZM17 23h2v2h-2v-2ZM17 38h2v2h-2v-2ZM29 8h2v2h-2V8ZM29 23h2v2h-2v-2ZM29 38h2v2h-2v-2Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path><path d=\\\\\"M17 8h2v2h-2V8ZM17 23h2v2h-2v-2ZM17 38h2v2h-2v-2ZM29 8h2v2h-2V8ZM29 23h2v2h-2v-2ZM29 38h2v2h-2v-2Z\\\\\"></path></svg></span></span></span><!-- 额外 -->\n    <!--v-if-->\n  </div>\n  <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n  <div class=\\\\\"arco-tree-node arco-tree-node-is-leaf arco-tree-node-is-tail\\\\\" data-level=\\\\\"2\\\\\" data-key=\\\\\"0-1-1-2\\\\\">\n    <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"><span class=\\\\\"arco-tree-node-indent-block arco-tree-node-indent-block-lineless\\\\\"></span><span class=\\\\\"arco-tree-node-indent-block\\\\\"></span></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher\\\\\"><!----></span><!-- checkbox -->\n    <!--v-if-->\n    <!-- 内容 --><span class=\\\\\"arco-tree-node-title arco-tree-node-title-draggable arco-tree-node-title-block\\\\\" draggable=\\\\\"true\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->Leaf 0-1-1-2<span class=\\\\\"arco-tree-node-icon arco-tree-node-drag-icon\\\\\"><!-- 拖拽图标 --><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-drag-dot-vertical\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M17 8h2v2h-2V8ZM17 23h2v2h-2v-2ZM17 38h2v2h-2v-2ZM29 8h2v2h-2V8ZM29 23h2v2h-2v-2ZM29 38h2v2h-2v-2Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path><path d=\\\\\"M17 8h2v2h-2V8ZM17 23h2v2h-2v-2ZM17 38h2v2h-2v-2ZM29 8h2v2h-2V8ZM29 23h2v2h-2v-2ZM29 38h2v2h-2v-2Z\\\\\"></path></svg></span></span></span><!-- 额外 -->\n    <!--v-if-->\n  </div>\n  <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n  <div class=\\\\\"arco-tree-node arco-tree-node-is-leaf arco-tree-node-is-tail\\\\\" data-level=\\\\\"1\\\\\" data-key=\\\\\"0-1-2\\\\\">\n    <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"><span class=\\\\\"arco-tree-node-indent-block arco-tree-node-indent-block-lineless\\\\\"></span></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher\\\\\"><!----></span><!-- checkbox -->\n    <!--v-if-->\n    <!-- 内容 --><span class=\\\\\"arco-tree-node-title arco-tree-node-title-draggable arco-tree-node-title-block\\\\\" draggable=\\\\\"true\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->Leaf 0-1-2<span class=\\\\\"arco-tree-node-icon arco-tree-node-drag-icon\\\\\"><!-- 拖拽图标 --><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-drag-dot-vertical\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M17 8h2v2h-2V8ZM17 23h2v2h-2v-2ZM17 38h2v2h-2v-2ZM29 8h2v2h-2V8ZM29 23h2v2h-2v-2ZM29 38h2v2h-2v-2Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path><path d=\\\\\"M17 8h2v2h-2V8ZM17 23h2v2h-2v-2ZM17 38h2v2h-2v-2ZM29 8h2v2h-2V8ZM29 23h2v2h-2v-2ZM29 38h2v2h-2v-2Z\\\\\"></path></svg></span></span></span><!-- 额外 -->\n    <!--v-if-->\n  </div>\n  <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n</div>\"\n`;\n\nexports[`<tree> demo: render [field-names] correctly 1`] = `\n\"<div class=\\\\\"arco-tree arco-tree-size-medium\\\\\">\n  <div class=\\\\\"arco-tree-node arco-tree-node-expanded\\\\\" data-level=\\\\\"0\\\\\" data-key=\\\\\"0-0\\\\\">\n    <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher arco-tree-node-switcher-expanded\\\\\"><span class=\\\\\"arco-icon-hover arco-tree-node-icon-hover\\\\\"><span class=\\\\\"arco-tree-node-switcher-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-caret-down\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M24.938 34.829a1.2 1.2 0 0 1-1.875 0L9.56 17.949c-.628-.785-.069-1.949.937-1.949h27.007c1.006 0 1.565 1.164.937 1.95L24.937 34.829Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path></svg></span></span></span><!-- checkbox -->\n    <!--v-if-->\n    <!-- 内容 --><span class=\\\\\"arco-tree-node-title\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->Trunk 0-0<!--v-if--></span></span><!-- 额外 -->\n    <!--v-if-->\n  </div>\n  <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n  <div class=\\\\\"arco-tree-node arco-tree-node-is-tail arco-tree-node-expanded arco-tree-node-disabled-selectable\\\\\" data-level=\\\\\"1\\\\\" data-key=\\\\\"0-0-2\\\\\">\n    <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"><span class=\\\\\"arco-tree-node-indent-block\\\\\"></span></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher arco-tree-node-switcher-expanded\\\\\"><span class=\\\\\"arco-icon-hover arco-tree-node-icon-hover\\\\\"><span class=\\\\\"arco-tree-node-switcher-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-caret-down\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M24.938 34.829a1.2 1.2 0 0 1-1.875 0L9.56 17.949c-.628-.785-.069-1.949.937-1.949h27.007c1.006 0 1.565 1.164.937 1.95L24.937 34.829Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path></svg></span></span></span><!-- checkbox -->\n    <!--v-if-->\n    <!-- 内容 --><span class=\\\\\"arco-tree-node-title\\\\\" draggable=\\\\\"false\\\\\"><span class=\\\\\"arco-tree-node-icon arco-tree-node-custom-icon\\\\\"><!-- 节点图标 --><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-drive-file\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\" loading=\\\\\"false\\\\\" checked=\\\\\"false\\\\\" selected=\\\\\"false\\\\\" indeterminate=\\\\\"false\\\\\" expanded=\\\\\"true\\\\\" isLeaf=\\\\\"false\\\\\"><path d=\\\\\"M38.5 17H29a1 1 0 0 1-1-1V6.5m0-.5H10a1 1 0 0 0-1 1v34a1 1 0 0 0 1 1h28a1 1 0 0 0 1-1V17L28 6Z\\\\\"></path></svg></span><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->Branch 0-0-2<!--v-if--></span></span><!-- 额外 -->\n    <!--v-if-->\n  </div>\n  <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n  <div class=\\\\\"arco-tree-node arco-tree-node-is-tail arco-tree-node-expanded\\\\\" data-level=\\\\\"2\\\\\" data-key=\\\\\"0-0-2-1\\\\\">\n    <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"><span class=\\\\\"arco-tree-node-indent-block\\\\\"></span><span class=\\\\\"arco-tree-node-indent-block arco-tree-node-indent-block-lineless\\\\\"></span></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher arco-tree-node-switcher-expanded\\\\\"><span class=\\\\\"arco-icon-hover arco-tree-node-icon-hover\\\\\"><span class=\\\\\"arco-tree-node-switcher-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-caret-down\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M24.938 34.829a1.2 1.2 0 0 1-1.875 0L9.56 17.949c-.628-.785-.069-1.949.937-1.949h27.007c1.006 0 1.565 1.164.937 1.95L24.937 34.829Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path></svg></span></span></span><!-- checkbox -->\n    <!--v-if-->\n    <!-- 内容 --><span class=\\\\\"arco-tree-node-title\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->Leaf<!--v-if--></span></span><!-- 额外 -->\n    <!--v-if-->\n  </div>\n  <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n  <div class=\\\\\"arco-tree-node arco-tree-node-is-tail arco-tree-node-expanded\\\\\" data-level=\\\\\"3\\\\\" data-key=\\\\\"0-0-2-1-0\\\\\">\n    <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"><span class=\\\\\"arco-tree-node-indent-block\\\\\"></span><span class=\\\\\"arco-tree-node-indent-block arco-tree-node-indent-block-lineless\\\\\"></span><span class=\\\\\"arco-tree-node-indent-block arco-tree-node-indent-block-lineless\\\\\"></span></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher arco-tree-node-switcher-expanded\\\\\"><span class=\\\\\"arco-icon-hover arco-tree-node-icon-hover\\\\\"><span class=\\\\\"arco-tree-node-switcher-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-caret-down\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M24.938 34.829a1.2 1.2 0 0 1-1.875 0L9.56 17.949c-.628-.785-.069-1.949.937-1.949h27.007c1.006 0 1.565 1.164.937 1.95L24.937 34.829Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path></svg></span></span></span><!-- checkbox -->\n    <!--v-if-->\n    <!-- 内容 --><span class=\\\\\"arco-tree-node-title\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->Leaf 0-0-2<!--v-if--></span></span><!-- 额外 -->\n    <!--v-if-->\n  </div>\n  <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n  <div class=\\\\\"arco-tree-node arco-tree-node-is-leaf arco-tree-node-is-tail\\\\\" data-level=\\\\\"4\\\\\" data-key=\\\\\"0-0-2-1-0-0\\\\\">\n    <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"><span class=\\\\\"arco-tree-node-indent-block\\\\\"></span><span class=\\\\\"arco-tree-node-indent-block arco-tree-node-indent-block-lineless\\\\\"></span><span class=\\\\\"arco-tree-node-indent-block arco-tree-node-indent-block-lineless\\\\\"></span><span class=\\\\\"arco-tree-node-indent-block arco-tree-node-indent-block-lineless\\\\\"></span></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher\\\\\"><!----></span><!-- checkbox -->\n    <!--v-if-->\n    <!-- 内容 --><span class=\\\\\"arco-tree-node-title\\\\\" draggable=\\\\\"false\\\\\"><span class=\\\\\"arco-tree-node-icon arco-tree-node-custom-icon\\\\\"><!-- 节点图标 --><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-star\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\" loading=\\\\\"false\\\\\" checked=\\\\\"false\\\\\" selected=\\\\\"false\\\\\" indeterminate=\\\\\"false\\\\\" expanded=\\\\\"false\\\\\" isLeaf=\\\\\"true\\\\\"><path d=\\\\\"M22.552 6.908a.5.5 0 0 1 .896 0l5.02 10.17a.5.5 0 0 0 .376.274l11.224 1.631a.5.5 0 0 1 .277.853l-8.122 7.916a.5.5 0 0 0-.143.443l1.917 11.178a.5.5 0 0 1-.726.527l-10.038-5.278a.5.5 0 0 0-.466 0L12.73 39.9a.5.5 0 0 1-.726-.527l1.918-11.178a.5.5 0 0 0-.144-.443l-8.122-7.916a.5.5 0 0 1 .278-.853l11.223-1.63a.5.5 0 0 0 .376-.274l5.02-10.17Z\\\\\"></path></svg></span><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->Leaf<!--v-if--></span></span><!-- 额外 -->\n    <!--v-if-->\n  </div>\n  <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n  <div class=\\\\\"arco-tree-node arco-tree-node-is-tail arco-tree-node-expanded\\\\\" data-level=\\\\\"0\\\\\" data-key=\\\\\"0-1\\\\\">\n    <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher arco-tree-node-switcher-expanded\\\\\"><span class=\\\\\"arco-icon-hover arco-tree-node-icon-hover\\\\\"><span class=\\\\\"arco-tree-node-switcher-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-caret-down\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M24.938 34.829a1.2 1.2 0 0 1-1.875 0L9.56 17.949c-.628-.785-.069-1.949.937-1.949h27.007c1.006 0 1.565 1.164.937 1.95L24.937 34.829Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path></svg></span></span></span><!-- checkbox -->\n    <!--v-if-->\n    <!-- 内容 --><span class=\\\\\"arco-tree-node-title\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->Trunk 0-1<!--v-if--></span></span><!-- 额外 -->\n    <!--v-if-->\n  </div>\n  <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n  <div class=\\\\\"arco-tree-node arco-tree-node-is-tail arco-tree-node-expanded\\\\\" data-level=\\\\\"1\\\\\" data-key=\\\\\"0-1-1\\\\\">\n    <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"><span class=\\\\\"arco-tree-node-indent-block arco-tree-node-indent-block-lineless\\\\\"></span></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher arco-tree-node-switcher-expanded\\\\\"><span class=\\\\\"arco-icon-hover arco-tree-node-icon-hover\\\\\"><span class=\\\\\"arco-tree-node-switcher-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-caret-down\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M24.938 34.829a1.2 1.2 0 0 1-1.875 0L9.56 17.949c-.628-.785-.069-1.949.937-1.949h27.007c1.006 0 1.565 1.164.937 1.95L24.937 34.829Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path></svg></span></span></span><!-- checkbox -->\n    <!--v-if-->\n    <!-- 内容 --><span class=\\\\\"arco-tree-node-title\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->Branch 0-1-1<!--v-if--></span></span><!-- 额外 -->\n    <!--v-if-->\n  </div>\n  <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n  <div class=\\\\\"arco-tree-node arco-tree-node-is-leaf arco-tree-node-is-tail\\\\\" data-level=\\\\\"2\\\\\" data-key=\\\\\"0-1-1-0\\\\\">\n    <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"><span class=\\\\\"arco-tree-node-indent-block arco-tree-node-indent-block-lineless\\\\\"></span><span class=\\\\\"arco-tree-node-indent-block arco-tree-node-indent-block-lineless\\\\\"></span></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher\\\\\"><!----></span><!-- checkbox -->\n    <!--v-if-->\n    <!-- 内容 --><span class=\\\\\"arco-tree-node-title\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->Leaf<!--v-if--></span></span><!-- 额外 -->\n    <!--v-if-->\n  </div>\n  <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n</div>\"\n`;\n\nexports[`<tree> demo: render [icons] correctly 1`] = `\n\"<div class=\\\\\"arco-tree arco-tree-show-line arco-tree-size-medium\\\\\">\n  <div class=\\\\\"arco-tree-node arco-tree-node-expanded\\\\\" data-level=\\\\\"0\\\\\" data-key=\\\\\"node1\\\\\">\n    <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher arco-tree-node-switcher-expanded\\\\\"><span class=\\\\\"arco-tree-node-switcher-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg><!--v-if--></span></span><!-- checkbox -->\n    <!--v-if-->\n    <!-- 内容 --><span class=\\\\\"arco-tree-node-title\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->Trunk<!--v-if--></span></span><!-- 额外 -->\n    <!--v-if-->\n  </div>\n  <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n  <div class=\\\\\"arco-tree-node arco-tree-node-is-leaf arco-tree-node-is-tail\\\\\" data-level=\\\\\"1\\\\\" data-key=\\\\\"node2\\\\\">\n    <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"><span class=\\\\\"arco-tree-node-indent-block\\\\\"></span></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher\\\\\"><span class=\\\\\"arco-tree-node-switcher-icon\\\\\"><!--v-if--><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-star\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M22.552 6.908a.5.5 0 0 1 .896 0l5.02 10.17a.5.5 0 0 0 .376.274l11.224 1.631a.5.5 0 0 1 .277.853l-8.122 7.916a.5.5 0 0 0-.143.443l1.917 11.178a.5.5 0 0 1-.726.527l-10.038-5.278a.5.5 0 0 0-.466 0L12.73 39.9a.5.5 0 0 1-.726-.527l1.918-11.178a.5.5 0 0 0-.144-.443l-8.122-7.916a.5.5 0 0 1 .278-.853l11.223-1.63a.5.5 0 0 0 .376-.274l5.02-10.17Z\\\\\"></path></svg></span></span><!-- checkbox -->\n    <!--v-if-->\n    <!-- 内容 --><span class=\\\\\"arco-tree-node-title\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->Leaf<!--v-if--></span></span><!-- 额外 -->\n    <!--v-if-->\n  </div>\n  <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n  <div class=\\\\\"arco-tree-node arco-tree-node-is-tail arco-tree-node-expanded\\\\\" data-level=\\\\\"0\\\\\" data-key=\\\\\"node3\\\\\">\n    <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher arco-tree-node-switcher-expanded\\\\\"><span class=\\\\\"arco-tree-node-switcher-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg><!--v-if--></span></span><!-- checkbox -->\n    <!--v-if-->\n    <!-- 内容 --><span class=\\\\\"arco-tree-node-title\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->Trunk<!--v-if--></span></span><!-- 额外 -->\n    <!--v-if-->\n  </div>\n  <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n  <div class=\\\\\"arco-tree-node arco-tree-node-is-leaf\\\\\" data-level=\\\\\"1\\\\\" data-key=\\\\\"node4\\\\\">\n    <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"><span class=\\\\\"arco-tree-node-indent-block arco-tree-node-indent-block-lineless\\\\\"></span></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher\\\\\"><span class=\\\\\"arco-tree-node-switcher-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-drive-file\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M38.5 17H29a1 1 0 0 1-1-1V6.5m0-.5H10a1 1 0 0 0-1 1v34a1 1 0 0 0 1 1h28a1 1 0 0 0 1-1V17L28 6Z\\\\\"></path></svg></span></span><!-- checkbox -->\n    <!--v-if-->\n    <!-- 内容 --><span class=\\\\\"arco-tree-node-title\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->Leaf<!--v-if--></span></span><!-- 额外 -->\n    <!--v-if-->\n  </div>\n  <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n  <div class=\\\\\"arco-tree-node arco-tree-node-is-leaf arco-tree-node-is-tail\\\\\" data-level=\\\\\"1\\\\\" data-key=\\\\\"node5\\\\\">\n    <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"><span class=\\\\\"arco-tree-node-indent-block arco-tree-node-indent-block-lineless\\\\\"></span></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher\\\\\"><span class=\\\\\"arco-tree-node-switcher-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-drive-file\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M38.5 17H29a1 1 0 0 1-1-1V6.5m0-.5H10a1 1 0 0 0-1 1v34a1 1 0 0 0 1 1h28a1 1 0 0 0 1-1V17L28 6Z\\\\\"></path></svg></span></span><!-- checkbox -->\n    <!--v-if-->\n    <!-- 内容 --><span class=\\\\\"arco-tree-node-title\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->Leaf<!--v-if--></span></span><!-- 额外 -->\n    <!--v-if-->\n  </div>\n  <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n</div>\"\n`;\n\nexports[`<tree> demo: render [load-more] correctly 1`] = `\n\"<div class=\\\\\"arco-tree arco-tree-size-medium\\\\\">\n  <div class=\\\\\"arco-tree-node\\\\\" data-level=\\\\\"0\\\\\" data-key=\\\\\"0-0\\\\\">\n    <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher\\\\\"><span class=\\\\\"arco-icon-hover arco-tree-node-icon-hover\\\\\"><span class=\\\\\"arco-tree-node-switcher-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-caret-down\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M24.938 34.829a1.2 1.2 0 0 1-1.875 0L9.56 17.949c-.628-.785-.069-1.949.937-1.949h27.007c1.006 0 1.565 1.164.937 1.95L24.937 34.829Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path></svg></span></span></span><!-- checkbox -->\n    <!--v-if-->\n    <!-- 内容 --><span class=\\\\\"arco-tree-node-title\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->Trunk 0-0<!--v-if--></span></span><!-- 额外 -->\n    <!--v-if-->\n  </div>\n  <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n  <div class=\\\\\"arco-tree-node arco-tree-node-is-tail arco-tree-node-expanded\\\\\" data-level=\\\\\"0\\\\\" data-key=\\\\\"0-1\\\\\">\n    <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher arco-tree-node-switcher-expanded\\\\\"><span class=\\\\\"arco-icon-hover arco-tree-node-icon-hover\\\\\"><span class=\\\\\"arco-tree-node-switcher-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-caret-down\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M24.938 34.829a1.2 1.2 0 0 1-1.875 0L9.56 17.949c-.628-.785-.069-1.949.937-1.949h27.007c1.006 0 1.565 1.164.937 1.95L24.937 34.829Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path></svg></span></span></span><!-- checkbox -->\n    <!--v-if-->\n    <!-- 内容 --><span class=\\\\\"arco-tree-node-title\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->Trunk 0-1<!--v-if--></span></span><!-- 额外 -->\n    <!--v-if-->\n  </div>\n  <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n  <div class=\\\\\"arco-tree-node arco-tree-node-is-tail\\\\\" data-level=\\\\\"1\\\\\" data-key=\\\\\"0-1-1\\\\\">\n    <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"><span class=\\\\\"arco-tree-node-indent-block arco-tree-node-indent-block-lineless\\\\\"></span></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher\\\\\"><span class=\\\\\"arco-icon-hover arco-tree-node-icon-hover\\\\\"><span class=\\\\\"arco-tree-node-switcher-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-caret-down\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M24.938 34.829a1.2 1.2 0 0 1-1.875 0L9.56 17.949c-.628-.785-.069-1.949.937-1.949h27.007c1.006 0 1.565 1.164.937 1.95L24.937 34.829Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path></svg></span></span></span><!-- checkbox -->\n    <!--v-if-->\n    <!-- 内容 --><span class=\\\\\"arco-tree-node-title\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->Branch 0-1-1<!--v-if--></span></span><!-- 额外 -->\n    <!--v-if-->\n  </div>\n  <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n</div>\"\n`;\n\nexports[`<tree> demo: render [multiple] correctly 1`] = `\n\"<label aria-disabled=\\\\\"false\\\\\" class=\\\\\"arco-checkbox arco-checkbox-checked\\\\\" style=\\\\\"margin-bottom: 24px;\\\\\"><input type=\\\\\"checkbox\\\\\" checked=\\\\\"\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-icon-hover-disabled arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><svg aria-hidden=\\\\\"true\\\\\" focusable=\\\\\"false\\\\\" viewBox=\\\\\"0 0 1024 1024\\\\\" width=\\\\\"200\\\\\" height=\\\\\"200\\\\\" fill=\\\\\"currentColor\\\\\" class=\\\\\"arco-checkbox-icon-check\\\\\"><path d=\\\\\"M877.44815445 206.10060629a64.72691371 64.72691371 0 0 0-95.14856334 4.01306852L380.73381888 685.46812814 235.22771741 533.48933518a64.72691371 64.72691371 0 0 0-92.43003222-1.03563036l-45.82665557 45.82665443a64.72691371 64.72691371 0 0 0-0.90617629 90.61767965l239.61903446 250.10479331a64.72691371 64.72691371 0 0 0 71.19960405 15.14609778 64.33855261 64.33855261 0 0 0 35.08198741-21.23042702l36.24707186-42.71976334 40.5190474-40.77795556-3.36579926-3.49525333 411.40426297-486.74638962a64.72691371 64.72691371 0 0 0-3.88361443-87.64024149l-45.3088404-45.43829334z\\\\\" p-id=\\\\\"840\\\\\"></path></svg></div></span><span class=\\\\\"arco-checkbox-label\\\\\"> multiple </span></label>\n<br>\n<span class=\\\\\"arco-typography\\\\\"> Current: <!----><!--v-if--><!--v-if--><!--v-if--></span>\n<br>\n<div class=\\\\\"arco-tree arco-tree-size-medium\\\\\">\n  <div class=\\\\\"arco-tree-node arco-tree-node-expanded\\\\\" data-level=\\\\\"0\\\\\" data-key=\\\\\"0-0\\\\\">\n    <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher arco-tree-node-switcher-expanded\\\\\"><span class=\\\\\"arco-icon-hover arco-tree-node-icon-hover\\\\\"><span class=\\\\\"arco-tree-node-switcher-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-caret-down\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M24.938 34.829a1.2 1.2 0 0 1-1.875 0L9.56 17.949c-.628-.785-.069-1.949.937-1.949h27.007c1.006 0 1.565 1.164.937 1.95L24.937 34.829Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path></svg></span></span></span><!-- checkbox -->\n    <!--v-if-->\n    <!-- 内容 --><span class=\\\\\"arco-tree-node-title\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->Trunk 0-0<!--v-if--></span></span><!-- 额外 -->\n    <!--v-if-->\n  </div>\n  <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n  <div class=\\\\\"arco-tree-node arco-tree-node-is-leaf\\\\\" data-level=\\\\\"1\\\\\" data-key=\\\\\"0-0-1\\\\\">\n    <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"><span class=\\\\\"arco-tree-node-indent-block\\\\\"></span></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher\\\\\"><!----></span><!-- checkbox -->\n    <!--v-if-->\n    <!-- 内容 --><span class=\\\\\"arco-tree-node-title\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->Leaf<!--v-if--></span></span><!-- 额外 -->\n    <!--v-if-->\n  </div>\n  <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n  <div class=\\\\\"arco-tree-node arco-tree-node-is-tail arco-tree-node-expanded\\\\\" data-level=\\\\\"1\\\\\" data-key=\\\\\"0-0-2\\\\\">\n    <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"><span class=\\\\\"arco-tree-node-indent-block\\\\\"></span></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher arco-tree-node-switcher-expanded\\\\\"><span class=\\\\\"arco-icon-hover arco-tree-node-icon-hover\\\\\"><span class=\\\\\"arco-tree-node-switcher-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-caret-down\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M24.938 34.829a1.2 1.2 0 0 1-1.875 0L9.56 17.949c-.628-.785-.069-1.949.937-1.949h27.007c1.006 0 1.565 1.164.937 1.95L24.937 34.829Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path></svg></span></span></span><!-- checkbox -->\n    <!--v-if-->\n    <!-- 内容 --><span class=\\\\\"arco-tree-node-title\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->Branch 0-0-2<!--v-if--></span></span><!-- 额外 -->\n    <!--v-if-->\n  </div>\n  <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n  <div class=\\\\\"arco-tree-node arco-tree-node-is-leaf arco-tree-node-is-tail\\\\\" data-level=\\\\\"2\\\\\" data-key=\\\\\"0-0-2-1\\\\\">\n    <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"><span class=\\\\\"arco-tree-node-indent-block\\\\\"></span><span class=\\\\\"arco-tree-node-indent-block arco-tree-node-indent-block-lineless\\\\\"></span></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher\\\\\"><!----></span><!-- checkbox -->\n    <!--v-if-->\n    <!-- 内容 --><span class=\\\\\"arco-tree-node-title\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->Leaf<!--v-if--></span></span><!-- 额外 -->\n    <!--v-if-->\n  </div>\n  <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n  <div class=\\\\\"arco-tree-node arco-tree-node-is-tail arco-tree-node-expanded\\\\\" data-level=\\\\\"0\\\\\" data-key=\\\\\"0-1\\\\\">\n    <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher arco-tree-node-switcher-expanded\\\\\"><span class=\\\\\"arco-icon-hover arco-tree-node-icon-hover\\\\\"><span class=\\\\\"arco-tree-node-switcher-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-caret-down\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M24.938 34.829a1.2 1.2 0 0 1-1.875 0L9.56 17.949c-.628-.785-.069-1.949.937-1.949h27.007c1.006 0 1.565 1.164.937 1.95L24.937 34.829Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path></svg></span></span></span><!-- checkbox -->\n    <!--v-if-->\n    <!-- 内容 --><span class=\\\\\"arco-tree-node-title\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->Trunk 0-1<!--v-if--></span></span><!-- 额外 -->\n    <!--v-if-->\n  </div>\n  <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n  <div class=\\\\\"arco-tree-node arco-tree-node-expanded\\\\\" data-level=\\\\\"1\\\\\" data-key=\\\\\"0-1-1\\\\\">\n    <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"><span class=\\\\\"arco-tree-node-indent-block arco-tree-node-indent-block-lineless\\\\\"></span></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher arco-tree-node-switcher-expanded\\\\\"><span class=\\\\\"arco-icon-hover arco-tree-node-icon-hover\\\\\"><span class=\\\\\"arco-tree-node-switcher-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-caret-down\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M24.938 34.829a1.2 1.2 0 0 1-1.875 0L9.56 17.949c-.628-.785-.069-1.949.937-1.949h27.007c1.006 0 1.565 1.164.937 1.95L24.937 34.829Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path></svg></span></span></span><!-- checkbox -->\n    <!--v-if-->\n    <!-- 内容 --><span class=\\\\\"arco-tree-node-title\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->Branch 0-1-1<!--v-if--></span></span><!-- 额外 -->\n    <!--v-if-->\n  </div>\n  <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n  <div class=\\\\\"arco-tree-node arco-tree-node-is-leaf\\\\\" data-level=\\\\\"2\\\\\" data-key=\\\\\"0-1-1-1\\\\\">\n    <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"><span class=\\\\\"arco-tree-node-indent-block arco-tree-node-indent-block-lineless\\\\\"></span><span class=\\\\\"arco-tree-node-indent-block\\\\\"></span></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher\\\\\"><!----></span><!-- checkbox -->\n    <!--v-if-->\n    <!-- 内容 --><span class=\\\\\"arco-tree-node-title\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->Leaf<!--v-if--></span></span><!-- 额外 -->\n    <!--v-if-->\n  </div>\n  <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n  <div class=\\\\\"arco-tree-node arco-tree-node-is-leaf arco-tree-node-is-tail\\\\\" data-level=\\\\\"2\\\\\" data-key=\\\\\"0-1-1-2\\\\\">\n    <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"><span class=\\\\\"arco-tree-node-indent-block arco-tree-node-indent-block-lineless\\\\\"></span><span class=\\\\\"arco-tree-node-indent-block\\\\\"></span></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher\\\\\"><!----></span><!-- checkbox -->\n    <!--v-if-->\n    <!-- 内容 --><span class=\\\\\"arco-tree-node-title\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->Leaf<!--v-if--></span></span><!-- 额外 -->\n    <!--v-if-->\n  </div>\n  <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n  <div class=\\\\\"arco-tree-node arco-tree-node-is-leaf arco-tree-node-is-tail\\\\\" data-level=\\\\\"1\\\\\" data-key=\\\\\"0-1-2\\\\\">\n    <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"><span class=\\\\\"arco-tree-node-indent-block arco-tree-node-indent-block-lineless\\\\\"></span></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher\\\\\"><!----></span><!-- checkbox -->\n    <!--v-if-->\n    <!-- 内容 --><span class=\\\\\"arco-tree-node-title\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->Leaf<!--v-if--></span></span><!-- 额外 -->\n    <!--v-if-->\n  </div>\n  <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n</div>\"\n`;\n\nexports[`<tree> demo: render [node-icon] correctly 1`] = `\n\"<div class=\\\\\"arco-tree arco-tree-size-medium\\\\\">\n  <div class=\\\\\"arco-tree-node arco-tree-node-expanded\\\\\" data-level=\\\\\"0\\\\\" data-key=\\\\\"node1\\\\\">\n    <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher arco-tree-node-switcher-expanded\\\\\"><span class=\\\\\"arco-icon-hover arco-tree-node-icon-hover\\\\\"><span class=\\\\\"arco-tree-node-switcher-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-caret-down\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M24.938 34.829a1.2 1.2 0 0 1-1.875 0L9.56 17.949c-.628-.785-.069-1.949.937-1.949h27.007c1.006 0 1.565 1.164.937 1.95L24.937 34.829Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path></svg></span></span></span><!-- checkbox -->\n    <!--v-if-->\n    <!-- 内容 --><span class=\\\\\"arco-tree-node-title\\\\\" draggable=\\\\\"false\\\\\"><span class=\\\\\"arco-tree-node-icon arco-tree-node-custom-icon\\\\\"><!-- 节点图标 --><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-star\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M22.552 6.908a.5.5 0 0 1 .896 0l5.02 10.17a.5.5 0 0 0 .376.274l11.224 1.631a.5.5 0 0 1 .277.853l-8.122 7.916a.5.5 0 0 0-.143.443l1.917 11.178a.5.5 0 0 1-.726.527l-10.038-5.278a.5.5 0 0 0-.466 0L12.73 39.9a.5.5 0 0 1-.726-.527l1.918-11.178a.5.5 0 0 0-.144-.443l-8.122-7.916a.5.5 0 0 1 .278-.853l11.223-1.63a.5.5 0 0 0 .376-.274l5.02-10.17Z\\\\\"></path></svg></span><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->Trunk<!--v-if--></span></span><!-- 额外 -->\n    <!--v-if-->\n  </div>\n  <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n  <div class=\\\\\"arco-tree-node arco-tree-node-is-leaf arco-tree-node-is-tail\\\\\" data-level=\\\\\"1\\\\\" data-key=\\\\\"node2\\\\\">\n    <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"><span class=\\\\\"arco-tree-node-indent-block\\\\\"></span></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher\\\\\"><!----></span><!-- checkbox -->\n    <!--v-if-->\n    <!-- 内容 --><span class=\\\\\"arco-tree-node-title\\\\\" draggable=\\\\\"false\\\\\"><span class=\\\\\"arco-tree-node-icon arco-tree-node-custom-icon\\\\\"><!-- 节点图标 --><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-star\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M22.552 6.908a.5.5 0 0 1 .896 0l5.02 10.17a.5.5 0 0 0 .376.274l11.224 1.631a.5.5 0 0 1 .277.853l-8.122 7.916a.5.5 0 0 0-.143.443l1.917 11.178a.5.5 0 0 1-.726.527l-10.038-5.278a.5.5 0 0 0-.466 0L12.73 39.9a.5.5 0 0 1-.726-.527l1.918-11.178a.5.5 0 0 0-.144-.443l-8.122-7.916a.5.5 0 0 1 .278-.853l11.223-1.63a.5.5 0 0 0 .376-.274l5.02-10.17Z\\\\\"></path></svg></span><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->Leaf<!--v-if--></span></span><!-- 额外 -->\n    <!--v-if-->\n  </div>\n  <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n  <div class=\\\\\"arco-tree-node arco-tree-node-is-tail arco-tree-node-expanded\\\\\" data-level=\\\\\"0\\\\\" data-key=\\\\\"node3\\\\\">\n    <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher arco-tree-node-switcher-expanded\\\\\"><span class=\\\\\"arco-icon-hover arco-tree-node-icon-hover\\\\\"><span class=\\\\\"arco-tree-node-switcher-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-caret-down\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M24.938 34.829a1.2 1.2 0 0 1-1.875 0L9.56 17.949c-.628-.785-.069-1.949.937-1.949h27.007c1.006 0 1.565 1.164.937 1.95L24.937 34.829Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path></svg></span></span></span><!-- checkbox -->\n    <!--v-if-->\n    <!-- 内容 --><span class=\\\\\"arco-tree-node-title\\\\\" draggable=\\\\\"false\\\\\"><span class=\\\\\"arco-tree-node-icon arco-tree-node-custom-icon\\\\\"><!-- 节点图标 --><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-star\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M22.552 6.908a.5.5 0 0 1 .896 0l5.02 10.17a.5.5 0 0 0 .376.274l11.224 1.631a.5.5 0 0 1 .277.853l-8.122 7.916a.5.5 0 0 0-.143.443l1.917 11.178a.5.5 0 0 1-.726.527l-10.038-5.278a.5.5 0 0 0-.466 0L12.73 39.9a.5.5 0 0 1-.726-.527l1.918-11.178a.5.5 0 0 0-.144-.443l-8.122-7.916a.5.5 0 0 1 .278-.853l11.223-1.63a.5.5 0 0 0 .376-.274l5.02-10.17Z\\\\\"></path></svg></span><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->Trunk<!--v-if--></span></span><!-- 额外 -->\n    <!--v-if-->\n  </div>\n  <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n  <div class=\\\\\"arco-tree-node arco-tree-node-is-leaf\\\\\" data-level=\\\\\"1\\\\\" data-key=\\\\\"node4\\\\\">\n    <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"><span class=\\\\\"arco-tree-node-indent-block arco-tree-node-indent-block-lineless\\\\\"></span></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher\\\\\"><!----></span><!-- checkbox -->\n    <!--v-if-->\n    <!-- 内容 --><span class=\\\\\"arco-tree-node-title\\\\\" draggable=\\\\\"false\\\\\"><span class=\\\\\"arco-tree-node-icon arco-tree-node-custom-icon\\\\\"><!-- 节点图标 --><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-drive-file\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\" loading=\\\\\"false\\\\\" checked=\\\\\"false\\\\\" selected=\\\\\"false\\\\\" indeterminate=\\\\\"false\\\\\" expanded=\\\\\"false\\\\\" isLeaf=\\\\\"true\\\\\"><path d=\\\\\"M38.5 17H29a1 1 0 0 1-1-1V6.5m0-.5H10a1 1 0 0 0-1 1v34a1 1 0 0 0 1 1h28a1 1 0 0 0 1-1V17L28 6Z\\\\\"></path></svg></span><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->Leaf<!--v-if--></span></span><!-- 额外 -->\n    <!--v-if-->\n  </div>\n  <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n  <div class=\\\\\"arco-tree-node arco-tree-node-is-leaf arco-tree-node-is-tail\\\\\" data-level=\\\\\"1\\\\\" data-key=\\\\\"node5\\\\\">\n    <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"><span class=\\\\\"arco-tree-node-indent-block arco-tree-node-indent-block-lineless\\\\\"></span></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher\\\\\"><!----></span><!-- checkbox -->\n    <!--v-if-->\n    <!-- 内容 --><span class=\\\\\"arco-tree-node-title\\\\\" draggable=\\\\\"false\\\\\"><span class=\\\\\"arco-tree-node-icon arco-tree-node-custom-icon\\\\\"><!-- 节点图标 --><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-drive-file\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\" loading=\\\\\"false\\\\\" checked=\\\\\"false\\\\\" selected=\\\\\"false\\\\\" indeterminate=\\\\\"false\\\\\" expanded=\\\\\"false\\\\\" isLeaf=\\\\\"true\\\\\"><path d=\\\\\"M38.5 17H29a1 1 0 0 1-1-1V6.5m0-.5H10a1 1 0 0 0-1 1v34a1 1 0 0 0 1 1h28a1 1 0 0 0 1-1V17L28 6Z\\\\\"></path></svg></span><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->Leaf<!--v-if--></span></span><!-- 额外 -->\n    <!--v-if-->\n  </div>\n  <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n</div>\"\n`;\n\nexports[`<tree> demo: render [render-extra] correctly 1`] = `\n\"<div style=\\\\\"width: 500px; padding: 2px; overflow: auto;\\\\\">\n  <div class=\\\\\"arco-tree arco-tree-checkable arco-tree-size-medium\\\\\">\n    <div class=\\\\\"arco-tree-node arco-tree-node-expanded\\\\\" data-level=\\\\\"0\\\\\" data-key=\\\\\"0-0\\\\\">\n      <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher arco-tree-node-switcher-expanded\\\\\"><span class=\\\\\"arco-icon-hover arco-tree-node-icon-hover\\\\\"><span class=\\\\\"arco-tree-node-switcher-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-caret-down\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M24.938 34.829a1.2 1.2 0 0 1-1.875 0L9.56 17.949c-.628-.785-.069-1.949.937-1.949h27.007c1.006 0 1.565 1.164.937 1.95L24.937 34.829Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path></svg></span></span></span><!-- checkbox --><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n        <!---->\n      </label><!-- 内容 --><span class=\\\\\"arco-tree-node-title arco-tree-node-title-block\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->Trunk<!--v-if--></span></span><!-- 额外 --><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-plus\\\\\" style=\\\\\"position: absolute; right: 8px; font-size: 12px; top: 10px; color: rgb(51, 112, 255);\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n        <path d=\\\\\"M5 24h38M24 5v38\\\\\"></path>\n      </svg>\n    </div>\n    <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n    <div class=\\\\\"arco-tree-node arco-tree-node-is-leaf\\\\\" data-level=\\\\\"1\\\\\" data-key=\\\\\"0-0-1\\\\\">\n      <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"><span class=\\\\\"arco-tree-node-indent-block\\\\\"></span></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher\\\\\"><!----></span><!-- checkbox --><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n        <!---->\n      </label><!-- 内容 --><span class=\\\\\"arco-tree-node-title arco-tree-node-title-block\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->Leaf<!--v-if--></span></span><!-- 额外 --><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-plus\\\\\" style=\\\\\"position: absolute; right: 8px; font-size: 12px; top: 10px; color: rgb(51, 112, 255);\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n        <path d=\\\\\"M5 24h38M24 5v38\\\\\"></path>\n      </svg>\n    </div>\n    <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n    <div class=\\\\\"arco-tree-node arco-tree-node-is-tail arco-tree-node-expanded\\\\\" data-level=\\\\\"1\\\\\" data-key=\\\\\"0-0-2\\\\\">\n      <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"><span class=\\\\\"arco-tree-node-indent-block\\\\\"></span></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher arco-tree-node-switcher-expanded\\\\\"><span class=\\\\\"arco-icon-hover arco-tree-node-icon-hover\\\\\"><span class=\\\\\"arco-tree-node-switcher-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-caret-down\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M24.938 34.829a1.2 1.2 0 0 1-1.875 0L9.56 17.949c-.628-.785-.069-1.949.937-1.949h27.007c1.006 0 1.565 1.164.937 1.95L24.937 34.829Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path></svg></span></span></span><!-- checkbox --><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n        <!---->\n      </label><!-- 内容 --><span class=\\\\\"arco-tree-node-title arco-tree-node-title-block\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->Branch<!--v-if--></span></span><!-- 额外 --><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-plus\\\\\" style=\\\\\"position: absolute; right: 8px; font-size: 12px; top: 10px; color: rgb(51, 112, 255);\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n        <path d=\\\\\"M5 24h38M24 5v38\\\\\"></path>\n      </svg>\n    </div>\n    <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n    <div class=\\\\\"arco-tree-node arco-tree-node-is-leaf arco-tree-node-is-tail\\\\\" data-level=\\\\\"2\\\\\" data-key=\\\\\"0-0-2-1\\\\\">\n      <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"><span class=\\\\\"arco-tree-node-indent-block\\\\\"></span><span class=\\\\\"arco-tree-node-indent-block arco-tree-node-indent-block-lineless\\\\\"></span></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher\\\\\"><!----></span><!-- checkbox --><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n        <!---->\n      </label><!-- 内容 --><span class=\\\\\"arco-tree-node-title arco-tree-node-title-block\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->Leaf<!--v-if--></span></span><!-- 额外 --><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-plus\\\\\" style=\\\\\"position: absolute; right: 8px; font-size: 12px; top: 10px; color: rgb(51, 112, 255);\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n        <path d=\\\\\"M5 24h38M24 5v38\\\\\"></path>\n      </svg>\n    </div>\n    <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n    <div class=\\\\\"arco-tree-node arco-tree-node-is-tail arco-tree-node-expanded\\\\\" data-level=\\\\\"0\\\\\" data-key=\\\\\"0-1\\\\\">\n      <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher arco-tree-node-switcher-expanded\\\\\"><span class=\\\\\"arco-icon-hover arco-tree-node-icon-hover\\\\\"><span class=\\\\\"arco-tree-node-switcher-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-caret-down\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M24.938 34.829a1.2 1.2 0 0 1-1.875 0L9.56 17.949c-.628-.785-.069-1.949.937-1.949h27.007c1.006 0 1.565 1.164.937 1.95L24.937 34.829Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path></svg></span></span></span><!-- checkbox --><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n        <!---->\n      </label><!-- 内容 --><span class=\\\\\"arco-tree-node-title arco-tree-node-title-block\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->Trunk<!--v-if--></span></span><!-- 额外 --><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-plus\\\\\" style=\\\\\"position: absolute; right: 8px; font-size: 12px; top: 10px; color: rgb(51, 112, 255);\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n        <path d=\\\\\"M5 24h38M24 5v38\\\\\"></path>\n      </svg>\n    </div>\n    <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n    <div class=\\\\\"arco-tree-node arco-tree-node-expanded\\\\\" data-level=\\\\\"1\\\\\" data-key=\\\\\"0-1-1\\\\\">\n      <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"><span class=\\\\\"arco-tree-node-indent-block arco-tree-node-indent-block-lineless\\\\\"></span></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher arco-tree-node-switcher-expanded\\\\\"><span class=\\\\\"arco-icon-hover arco-tree-node-icon-hover\\\\\"><span class=\\\\\"arco-tree-node-switcher-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-caret-down\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M24.938 34.829a1.2 1.2 0 0 1-1.875 0L9.56 17.949c-.628-.785-.069-1.949.937-1.949h27.007c1.006 0 1.565 1.164.937 1.95L24.937 34.829Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path></svg></span></span></span><!-- checkbox --><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n        <!---->\n      </label><!-- 内容 --><span class=\\\\\"arco-tree-node-title arco-tree-node-title-block\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->Branch<!--v-if--></span></span><!-- 额外 --><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-plus\\\\\" style=\\\\\"position: absolute; right: 8px; font-size: 12px; top: 10px; color: rgb(51, 112, 255);\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n        <path d=\\\\\"M5 24h38M24 5v38\\\\\"></path>\n      </svg>\n    </div>\n    <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n    <div class=\\\\\"arco-tree-node arco-tree-node-is-leaf\\\\\" data-level=\\\\\"2\\\\\" data-key=\\\\\"0-1-1-1\\\\\">\n      <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"><span class=\\\\\"arco-tree-node-indent-block arco-tree-node-indent-block-lineless\\\\\"></span><span class=\\\\\"arco-tree-node-indent-block\\\\\"></span></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher\\\\\"><!----></span><!-- checkbox --><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n        <!---->\n      </label><!-- 内容 --><span class=\\\\\"arco-tree-node-title arco-tree-node-title-block\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->Leaf<!--v-if--></span></span><!-- 额外 --><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-plus\\\\\" style=\\\\\"position: absolute; right: 8px; font-size: 12px; top: 10px; color: rgb(51, 112, 255);\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n        <path d=\\\\\"M5 24h38M24 5v38\\\\\"></path>\n      </svg>\n    </div>\n    <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n    <div class=\\\\\"arco-tree-node arco-tree-node-is-leaf arco-tree-node-is-tail\\\\\" data-level=\\\\\"2\\\\\" data-key=\\\\\"0-1-1-2\\\\\">\n      <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"><span class=\\\\\"arco-tree-node-indent-block arco-tree-node-indent-block-lineless\\\\\"></span><span class=\\\\\"arco-tree-node-indent-block\\\\\"></span></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher\\\\\"><!----></span><!-- checkbox --><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n        <!---->\n      </label><!-- 内容 --><span class=\\\\\"arco-tree-node-title arco-tree-node-title-block\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->Leaf<!--v-if--></span></span><!-- 额外 --><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-plus\\\\\" style=\\\\\"position: absolute; right: 8px; font-size: 12px; top: 10px; color: rgb(51, 112, 255);\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n        <path d=\\\\\"M5 24h38M24 5v38\\\\\"></path>\n      </svg>\n    </div>\n    <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n    <div class=\\\\\"arco-tree-node arco-tree-node-is-leaf arco-tree-node-is-tail\\\\\" data-level=\\\\\"1\\\\\" data-key=\\\\\"0-1-2\\\\\">\n      <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"><span class=\\\\\"arco-tree-node-indent-block arco-tree-node-indent-block-lineless\\\\\"></span></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher\\\\\"><!----></span><!-- checkbox --><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n        <!---->\n      </label><!-- 内容 --><span class=\\\\\"arco-tree-node-title arco-tree-node-title-block\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->Leaf<!--v-if--></span></span><!-- 额外 --><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-plus\\\\\" style=\\\\\"position: absolute; right: 8px; font-size: 12px; top: 10px; color: rgb(51, 112, 255);\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\">\n        <path d=\\\\\"M5 24h38M24 5v38\\\\\"></path>\n      </svg>\n    </div>\n    <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n  </div>\n</div>\"\n`;\n\nexports[`<tree> demo: render [search] correctly 1`] = `\n\"<div><span class=\\\\\"arco-input-wrapper arco-input-search\\\\\" style=\\\\\"margin-bottom: 8px; max-width: 240px;\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" value=\\\\\"\\\\\"><!----><span class=\\\\\"arco-input-suffix\\\\\"><!----><span class=\\\\\"arco-icon-hover\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-search\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M33.072 33.071c6.248-6.248 6.248-16.379 0-22.627-6.249-6.249-16.38-6.249-22.628 0-6.248 6.248-6.248 16.379 0 22.627 6.248 6.248 16.38 6.248 22.628 0Zm0 0 8.485 8.485\\\\\"></path></svg></span>\n  <!---->\n  <!----></span></span>\n  <div class=\\\\\"arco-tree arco-tree-size-medium\\\\\">\n    <div class=\\\\\"arco-tree-node arco-tree-node-expanded\\\\\" data-level=\\\\\"0\\\\\" data-key=\\\\\"0-0\\\\\">\n      <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher arco-tree-node-switcher-expanded\\\\\"><span class=\\\\\"arco-icon-hover arco-tree-node-icon-hover\\\\\"><span class=\\\\\"arco-tree-node-switcher-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-caret-down\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M24.938 34.829a1.2 1.2 0 0 1-1.875 0L9.56 17.949c-.628-.785-.069-1.949.937-1.949h27.007c1.006 0 1.565 1.164.937 1.95L24.937 34.829Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path></svg></span></span></span><!-- checkbox -->\n      <!--v-if-->\n      <!-- 内容 --><span class=\\\\\"arco-tree-node-title\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\">Trunk 0-0<!--v-if--></span></span><!-- 额外 -->\n      <!--v-if-->\n    </div>\n    <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n    <div class=\\\\\"arco-tree-node arco-tree-node-is-tail arco-tree-node-expanded\\\\\" data-level=\\\\\"1\\\\\" data-key=\\\\\"0-0-1\\\\\">\n      <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"><span class=\\\\\"arco-tree-node-indent-block\\\\\"></span></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher arco-tree-node-switcher-expanded\\\\\"><span class=\\\\\"arco-icon-hover arco-tree-node-icon-hover\\\\\"><span class=\\\\\"arco-tree-node-switcher-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-caret-down\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M24.938 34.829a1.2 1.2 0 0 1-1.875 0L9.56 17.949c-.628-.785-.069-1.949.937-1.949h27.007c1.006 0 1.565 1.164.937 1.95L24.937 34.829Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path></svg></span></span></span><!-- checkbox -->\n      <!--v-if-->\n      <!-- 内容 --><span class=\\\\\"arco-tree-node-title\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\">Branch 0-0-1<!--v-if--></span></span><!-- 额外 -->\n      <!--v-if-->\n    </div>\n    <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n    <div class=\\\\\"arco-tree-node arco-tree-node-is-leaf\\\\\" data-level=\\\\\"2\\\\\" data-key=\\\\\"0-0-1-1\\\\\">\n      <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"><span class=\\\\\"arco-tree-node-indent-block\\\\\"></span><span class=\\\\\"arco-tree-node-indent-block arco-tree-node-indent-block-lineless\\\\\"></span></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher\\\\\"><!----></span><!-- checkbox -->\n      <!--v-if-->\n      <!-- 内容 --><span class=\\\\\"arco-tree-node-title\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\">Leaf 0-0-1-1<!--v-if--></span></span><!-- 额外 -->\n      <!--v-if-->\n    </div>\n    <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n    <div class=\\\\\"arco-tree-node arco-tree-node-is-leaf arco-tree-node-is-tail\\\\\" data-level=\\\\\"2\\\\\" data-key=\\\\\"0-0-1-2\\\\\">\n      <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"><span class=\\\\\"arco-tree-node-indent-block\\\\\"></span><span class=\\\\\"arco-tree-node-indent-block arco-tree-node-indent-block-lineless\\\\\"></span></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher\\\\\"><!----></span><!-- checkbox -->\n      <!--v-if-->\n      <!-- 内容 --><span class=\\\\\"arco-tree-node-title\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\">Leaf 0-0-1-2<!--v-if--></span></span><!-- 额外 -->\n      <!--v-if-->\n    </div>\n    <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n    <div class=\\\\\"arco-tree-node arco-tree-node-is-tail arco-tree-node-expanded\\\\\" data-level=\\\\\"0\\\\\" data-key=\\\\\"0-1\\\\\">\n      <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher arco-tree-node-switcher-expanded\\\\\"><span class=\\\\\"arco-icon-hover arco-tree-node-icon-hover\\\\\"><span class=\\\\\"arco-tree-node-switcher-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-caret-down\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M24.938 34.829a1.2 1.2 0 0 1-1.875 0L9.56 17.949c-.628-.785-.069-1.949.937-1.949h27.007c1.006 0 1.565 1.164.937 1.95L24.937 34.829Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path></svg></span></span></span><!-- checkbox -->\n      <!--v-if-->\n      <!-- 内容 --><span class=\\\\\"arco-tree-node-title\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\">Trunk 0-1<!--v-if--></span></span><!-- 额外 -->\n      <!--v-if-->\n    </div>\n    <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n    <div class=\\\\\"arco-tree-node arco-tree-node-expanded\\\\\" data-level=\\\\\"1\\\\\" data-key=\\\\\"0-1-1\\\\\">\n      <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"><span class=\\\\\"arco-tree-node-indent-block arco-tree-node-indent-block-lineless\\\\\"></span></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher arco-tree-node-switcher-expanded\\\\\"><span class=\\\\\"arco-icon-hover arco-tree-node-icon-hover\\\\\"><span class=\\\\\"arco-tree-node-switcher-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-caret-down\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M24.938 34.829a1.2 1.2 0 0 1-1.875 0L9.56 17.949c-.628-.785-.069-1.949.937-1.949h27.007c1.006 0 1.565 1.164.937 1.95L24.937 34.829Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path></svg></span></span></span><!-- checkbox -->\n      <!--v-if-->\n      <!-- 内容 --><span class=\\\\\"arco-tree-node-title\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\">Branch 0-1-1<!--v-if--></span></span><!-- 额外 -->\n      <!--v-if-->\n    </div>\n    <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n    <div class=\\\\\"arco-tree-node arco-tree-node-is-leaf arco-tree-node-is-tail\\\\\" data-level=\\\\\"2\\\\\" data-key=\\\\\"0-1-1-0\\\\\">\n      <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"><span class=\\\\\"arco-tree-node-indent-block arco-tree-node-indent-block-lineless\\\\\"></span><span class=\\\\\"arco-tree-node-indent-block\\\\\"></span></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher\\\\\"><!----></span><!-- checkbox -->\n      <!--v-if-->\n      <!-- 内容 --><span class=\\\\\"arco-tree-node-title\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\">Leaf 0-1-1-0<!--v-if--></span></span><!-- 额外 -->\n      <!--v-if-->\n    </div>\n    <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n    <div class=\\\\\"arco-tree-node arco-tree-node-is-tail arco-tree-node-expanded\\\\\" data-level=\\\\\"1\\\\\" data-key=\\\\\"0-1-2\\\\\">\n      <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"><span class=\\\\\"arco-tree-node-indent-block arco-tree-node-indent-block-lineless\\\\\"></span></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher arco-tree-node-switcher-expanded\\\\\"><span class=\\\\\"arco-icon-hover arco-tree-node-icon-hover\\\\\"><span class=\\\\\"arco-tree-node-switcher-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-caret-down\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M24.938 34.829a1.2 1.2 0 0 1-1.875 0L9.56 17.949c-.628-.785-.069-1.949.937-1.949h27.007c1.006 0 1.565 1.164.937 1.95L24.937 34.829Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path></svg></span></span></span><!-- checkbox -->\n      <!--v-if-->\n      <!-- 内容 --><span class=\\\\\"arco-tree-node-title\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\">Branch 0-1-2<!--v-if--></span></span><!-- 额外 -->\n      <!--v-if-->\n    </div>\n    <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n    <div class=\\\\\"arco-tree-node arco-tree-node-is-leaf arco-tree-node-is-tail\\\\\" data-level=\\\\\"2\\\\\" data-key=\\\\\"0-1-2-0\\\\\">\n      <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"><span class=\\\\\"arco-tree-node-indent-block arco-tree-node-indent-block-lineless\\\\\"></span><span class=\\\\\"arco-tree-node-indent-block arco-tree-node-indent-block-lineless\\\\\"></span></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher\\\\\"><!----></span><!-- checkbox -->\n      <!--v-if-->\n      <!-- 内容 --><span class=\\\\\"arco-tree-node-title\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\">Leaf 0-1-2-0<!--v-if--></span></span><!-- 额外 -->\n      <!--v-if-->\n    </div>\n    <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n  </div>\n</div>\"\n`;\n\nexports[`<tree> demo: render [show-line] correctly 1`] = `\n\"<div><span class=\\\\\"arco-typography\\\\\">showLine<!----><!--v-if--><!--v-if--><!--v-if--></span><button type=\\\\\"button\\\\\" role=\\\\\"switch\\\\\" aria-checked=\\\\\"true\\\\\" class=\\\\\"arco-switch arco-switch-type-circle arco-switch-checked\\\\\" style=\\\\\"margin-left: 12px;\\\\\"><span class=\\\\\"arco-switch-handle\\\\\"><span class=\\\\\"arco-switch-handle-icon\\\\\"></span></span><!--  prettier-ignore  -->\n    <!--v-if-->\n  </button></div>\n<div class=\\\\\"arco-tree arco-tree-show-line arco-tree-size-medium\\\\\">\n  <div class=\\\\\"arco-tree-node arco-tree-node-expanded\\\\\" data-level=\\\\\"0\\\\\" data-key=\\\\\"0-0\\\\\">\n    <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher arco-tree-node-switcher-expanded\\\\\"><span class=\\\\\"arco-tree-node-switcher-icon\\\\\"><span class=\\\\\"arco-tree-node-minus-icon\\\\\"></span></span></span><!-- checkbox -->\n    <!--v-if-->\n    <!-- 内容 --><span class=\\\\\"arco-tree-node-title\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->Trunk 1<!--v-if--></span></span><!-- 额外 -->\n    <!--v-if-->\n  </div>\n  <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n  <div class=\\\\\"arco-tree-node arco-tree-node-expanded\\\\\" data-level=\\\\\"1\\\\\" data-key=\\\\\"0-0-0\\\\\">\n    <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"><span class=\\\\\"arco-tree-node-indent-block\\\\\"></span></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher arco-tree-node-switcher-expanded\\\\\"><span class=\\\\\"arco-tree-node-switcher-icon\\\\\"><span class=\\\\\"arco-tree-node-minus-icon\\\\\"></span></span></span><!-- checkbox -->\n    <!--v-if-->\n    <!-- 内容 --><span class=\\\\\"arco-tree-node-title\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->Trunk 1-0<!--v-if--></span></span><!-- 额外 -->\n    <!--v-if-->\n  </div>\n  <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n  <div class=\\\\\"arco-tree-node arco-tree-node-is-leaf\\\\\" data-level=\\\\\"2\\\\\" data-key=\\\\\"0-0-0-0\\\\\">\n    <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"><span class=\\\\\"arco-tree-node-indent-block\\\\\"></span><span class=\\\\\"arco-tree-node-indent-block\\\\\"></span></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher\\\\\"><span class=\\\\\"arco-tree-node-switcher-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-file\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M16 21h16m-16 8h10m11 13H11a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h21l7 7v27a2 2 0 0 1-2 2Z\\\\\"></path></svg></span></span><!-- checkbox -->\n    <!--v-if-->\n    <!-- 内容 --><span class=\\\\\"arco-tree-node-title\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->leaf<!--v-if--></span></span><!-- 额外 -->\n    <!--v-if-->\n  </div>\n  <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n  <div class=\\\\\"arco-tree-node arco-tree-node-expanded\\\\\" data-level=\\\\\"2\\\\\" data-key=\\\\\"0-0-0-1\\\\\">\n    <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"><span class=\\\\\"arco-tree-node-indent-block\\\\\"></span><span class=\\\\\"arco-tree-node-indent-block\\\\\"></span></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher arco-tree-node-switcher-expanded\\\\\"><span class=\\\\\"arco-tree-node-switcher-icon\\\\\"><span class=\\\\\"arco-tree-node-minus-icon\\\\\"></span></span></span><!-- checkbox -->\n    <!--v-if-->\n    <!-- 内容 --><span class=\\\\\"arco-tree-node-title\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->leaf<!--v-if--></span></span><!-- 额外 -->\n    <!--v-if-->\n  </div>\n  <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n  <div class=\\\\\"arco-tree-node arco-tree-node-is-leaf arco-tree-node-is-tail\\\\\" data-level=\\\\\"3\\\\\" data-key=\\\\\"0-0-0-1-0\\\\\">\n    <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"><span class=\\\\\"arco-tree-node-indent-block\\\\\"></span><span class=\\\\\"arco-tree-node-indent-block\\\\\"></span><span class=\\\\\"arco-tree-node-indent-block\\\\\"></span></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher\\\\\"><span class=\\\\\"arco-tree-node-switcher-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-file\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M16 21h16m-16 8h10m11 13H11a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h21l7 7v27a2 2 0 0 1-2 2Z\\\\\"></path></svg></span></span><!-- checkbox -->\n    <!--v-if-->\n    <!-- 内容 --><span class=\\\\\"arco-tree-node-title\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->leaf<!--v-if--></span></span><!-- 额外 -->\n    <!--v-if-->\n  </div>\n  <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n  <div class=\\\\\"arco-tree-node arco-tree-node-is-leaf arco-tree-node-is-tail\\\\\" data-level=\\\\\"2\\\\\" data-key=\\\\\"0-0-0-2\\\\\">\n    <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"><span class=\\\\\"arco-tree-node-indent-block\\\\\"></span><span class=\\\\\"arco-tree-node-indent-block\\\\\"></span></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher\\\\\"><span class=\\\\\"arco-tree-node-switcher-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-file\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M16 21h16m-16 8h10m11 13H11a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h21l7 7v27a2 2 0 0 1-2 2Z\\\\\"></path></svg></span></span><!-- checkbox -->\n    <!--v-if-->\n    <!-- 内容 --><span class=\\\\\"arco-tree-node-title\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->leaf<!--v-if--></span></span><!-- 额外 -->\n    <!--v-if-->\n  </div>\n  <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n  <div class=\\\\\"arco-tree-node arco-tree-node-selected arco-tree-node-is-leaf\\\\\" data-level=\\\\\"1\\\\\" data-key=\\\\\"0-0-1\\\\\">\n    <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"><span class=\\\\\"arco-tree-node-indent-block\\\\\"></span></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher\\\\\"><span class=\\\\\"arco-tree-node-switcher-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-file\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M16 21h16m-16 8h10m11 13H11a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h21l7 7v27a2 2 0 0 1-2 2Z\\\\\"></path></svg></span></span><!-- checkbox -->\n    <!--v-if-->\n    <!-- 内容 --><span class=\\\\\"arco-tree-node-title\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->Trunk 1-1<!--v-if--></span></span><!-- 额外 -->\n    <!--v-if-->\n  </div>\n  <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n  <div class=\\\\\"arco-tree-node arco-tree-node-is-tail arco-tree-node-expanded\\\\\" data-level=\\\\\"1\\\\\" data-key=\\\\\"0-0-2\\\\\">\n    <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"><span class=\\\\\"arco-tree-node-indent-block\\\\\"></span></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher arco-tree-node-switcher-expanded\\\\\"><span class=\\\\\"arco-tree-node-switcher-icon\\\\\"><span class=\\\\\"arco-tree-node-minus-icon\\\\\"></span></span></span><!-- checkbox -->\n    <!--v-if-->\n    <!-- 内容 --><span class=\\\\\"arco-tree-node-title\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->Trunk 1-2<!--v-if--></span></span><!-- 额外 -->\n    <!--v-if-->\n  </div>\n  <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n  <div class=\\\\\"arco-tree-node arco-tree-node-is-leaf\\\\\" data-level=\\\\\"2\\\\\" data-key=\\\\\"0-0-2-0\\\\\">\n    <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"><span class=\\\\\"arco-tree-node-indent-block\\\\\"></span><span class=\\\\\"arco-tree-node-indent-block arco-tree-node-indent-block-lineless\\\\\"></span></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher\\\\\"><span class=\\\\\"arco-tree-node-switcher-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-file\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M16 21h16m-16 8h10m11 13H11a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h21l7 7v27a2 2 0 0 1-2 2Z\\\\\"></path></svg></span></span><!-- checkbox -->\n    <!--v-if-->\n    <!-- 内容 --><span class=\\\\\"arco-tree-node-title\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->leaf<!--v-if--></span></span><!-- 额外 -->\n    <!--v-if-->\n  </div>\n  <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n  <div class=\\\\\"arco-tree-node arco-tree-node-is-leaf arco-tree-node-is-tail\\\\\" data-level=\\\\\"2\\\\\" data-key=\\\\\"0-0-2-1\\\\\">\n    <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"><span class=\\\\\"arco-tree-node-indent-block\\\\\"></span><span class=\\\\\"arco-tree-node-indent-block arco-tree-node-indent-block-lineless\\\\\"></span></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher\\\\\"><span class=\\\\\"arco-tree-node-switcher-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-file\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M16 21h16m-16 8h10m11 13H11a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h21l7 7v27a2 2 0 0 1-2 2Z\\\\\"></path></svg></span></span><!-- checkbox -->\n    <!--v-if-->\n    <!-- 内容 --><span class=\\\\\"arco-tree-node-title\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->leaf<!--v-if--></span></span><!-- 额外 -->\n    <!--v-if-->\n  </div>\n  <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n  <div class=\\\\\"arco-tree-node arco-tree-node-is-leaf\\\\\" data-level=\\\\\"0\\\\\" data-key=\\\\\"0-1\\\\\">\n    <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher\\\\\"><span class=\\\\\"arco-tree-node-switcher-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-file\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M16 21h16m-16 8h10m11 13H11a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h21l7 7v27a2 2 0 0 1-2 2Z\\\\\"></path></svg></span></span><!-- checkbox -->\n    <!--v-if-->\n    <!-- 内容 --><span class=\\\\\"arco-tree-node-title\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->Trunk 2<!--v-if--></span></span><!-- 额外 -->\n    <!--v-if-->\n  </div>\n  <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n  <div class=\\\\\"arco-tree-node arco-tree-node-is-tail arco-tree-node-expanded\\\\\" data-level=\\\\\"0\\\\\" data-key=\\\\\"0-2\\\\\">\n    <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher arco-tree-node-switcher-expanded\\\\\"><span class=\\\\\"arco-tree-node-switcher-icon\\\\\"><span class=\\\\\"arco-tree-node-minus-icon\\\\\"></span></span></span><!-- checkbox -->\n    <!--v-if-->\n    <!-- 内容 --><span class=\\\\\"arco-tree-node-title\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->Trunk 3<!--v-if--></span></span><!-- 额外 -->\n    <!--v-if-->\n  </div>\n  <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n  <div class=\\\\\"arco-tree-node arco-tree-node-is-tail arco-tree-node-expanded\\\\\" data-level=\\\\\"1\\\\\" data-key=\\\\\"0-2-0\\\\\">\n    <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"><span class=\\\\\"arco-tree-node-indent-block arco-tree-node-indent-block-lineless\\\\\"></span></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher arco-tree-node-switcher-expanded\\\\\"><span class=\\\\\"arco-tree-node-switcher-icon\\\\\"><span class=\\\\\"arco-tree-node-minus-icon\\\\\"></span></span></span><!-- checkbox -->\n    <!--v-if-->\n    <!-- 内容 --><span class=\\\\\"arco-tree-node-title\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->Trunk 3-0<!--v-if--></span></span><!-- 额外 -->\n    <!--v-if-->\n  </div>\n  <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n  <div class=\\\\\"arco-tree-node arco-tree-node-is-leaf\\\\\" data-level=\\\\\"2\\\\\" data-key=\\\\\"0-2-0-0\\\\\">\n    <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"><span class=\\\\\"arco-tree-node-indent-block arco-tree-node-indent-block-lineless\\\\\"></span><span class=\\\\\"arco-tree-node-indent-block arco-tree-node-indent-block-lineless\\\\\"></span></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher\\\\\"><span class=\\\\\"arco-tree-node-switcher-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-file\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M16 21h16m-16 8h10m11 13H11a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h21l7 7v27a2 2 0 0 1-2 2Z\\\\\"></path></svg></span></span><!-- checkbox -->\n    <!--v-if-->\n    <!-- 内容 --><span class=\\\\\"arco-tree-node-title\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->leaf<!--v-if--></span></span><!-- 额外 -->\n    <!--v-if-->\n  </div>\n  <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n  <div class=\\\\\"arco-tree-node arco-tree-node-is-leaf arco-tree-node-is-tail\\\\\" data-level=\\\\\"2\\\\\" data-key=\\\\\"0-2-0-1\\\\\">\n    <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"><span class=\\\\\"arco-tree-node-indent-block arco-tree-node-indent-block-lineless\\\\\"></span><span class=\\\\\"arco-tree-node-indent-block arco-tree-node-indent-block-lineless\\\\\"></span></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher\\\\\"><span class=\\\\\"arco-tree-node-switcher-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-file\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M16 21h16m-16 8h10m11 13H11a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h21l7 7v27a2 2 0 0 1-2 2Z\\\\\"></path></svg></span></span><!-- checkbox -->\n    <!--v-if-->\n    <!-- 内容 --><span class=\\\\\"arco-tree-node-title\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->leaf<!--v-if--></span></span><!-- 额外 -->\n    <!--v-if-->\n  </div>\n  <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n</div>\"\n`;\n\nexports[`<tree> demo: render [size] correctly 1`] = `\n\"<div style=\\\\\"margin-bottom: 20px;\\\\\"><span class=\\\\\"arco-radio-group-button arco-radio-group-size-medium arco-radio-group-direction-horizontal\\\\\"><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"mini\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">mini</span></label><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"small\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">small</span></label><label class=\\\\\"arco-radio-button arco-radio-checked\\\\\"><input type=\\\\\"radio\\\\\" checked=\\\\\"\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"medium\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">medium</span></label><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"large\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">large</span></label></span></div>\n<div class=\\\\\"arco-tree arco-tree-checkable arco-tree-size-medium\\\\\" style=\\\\\"margin-right: 20px;\\\\\">\n  <div class=\\\\\"arco-tree-node arco-tree-node-is-tail arco-tree-node-expanded\\\\\" data-level=\\\\\"0\\\\\" data-key=\\\\\"0-0\\\\\">\n    <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher arco-tree-node-switcher-expanded\\\\\"><span class=\\\\\"arco-icon-hover arco-tree-node-icon-hover\\\\\"><span class=\\\\\"arco-tree-node-switcher-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-caret-down\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M24.938 34.829a1.2 1.2 0 0 1-1.875 0L9.56 17.949c-.628-.785-.069-1.949.937-1.949h27.007c1.006 0 1.565 1.164.937 1.95L24.937 34.829Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path></svg></span></span></span><!-- checkbox --><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n      <!---->\n    </label><!-- 内容 --><span class=\\\\\"arco-tree-node-title arco-tree-node-title-block\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->Trunk 0-0<!--v-if--></span></span><!-- 额外 -->\n    <!--v-if-->\n  </div>\n  <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n  <div class=\\\\\"arco-tree-node arco-tree-node-expanded\\\\\" data-level=\\\\\"1\\\\\" data-key=\\\\\"0-0-0\\\\\">\n    <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"><span class=\\\\\"arco-tree-node-indent-block arco-tree-node-indent-block-lineless\\\\\"></span></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher arco-tree-node-switcher-expanded\\\\\"><span class=\\\\\"arco-icon-hover arco-tree-node-icon-hover\\\\\"><span class=\\\\\"arco-tree-node-switcher-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-caret-down\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M24.938 34.829a1.2 1.2 0 0 1-1.875 0L9.56 17.949c-.628-.785-.069-1.949.937-1.949h27.007c1.006 0 1.565 1.164.937 1.95L24.937 34.829Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path></svg></span></span></span><!-- checkbox --><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n      <!---->\n    </label><!-- 内容 --><span class=\\\\\"arco-tree-node-title arco-tree-node-title-block\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->Branch 0-0-0<!--v-if--></span></span><!-- 额外 -->\n    <!--v-if-->\n  </div>\n  <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n  <div class=\\\\\"arco-tree-node arco-tree-node-is-leaf\\\\\" data-level=\\\\\"2\\\\\" data-key=\\\\\"0-0-0-0\\\\\">\n    <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"><span class=\\\\\"arco-tree-node-indent-block arco-tree-node-indent-block-lineless\\\\\"></span><span class=\\\\\"arco-tree-node-indent-block\\\\\"></span></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher\\\\\"><!----></span><!-- checkbox --><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n      <!---->\n    </label><!-- 内容 --><span class=\\\\\"arco-tree-node-title arco-tree-node-title-block\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->Leaf<!--v-if--></span></span><!-- 额外 -->\n    <!--v-if-->\n  </div>\n  <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n  <div class=\\\\\"arco-tree-node arco-tree-node-is-leaf arco-tree-node-is-tail\\\\\" data-level=\\\\\"2\\\\\" data-key=\\\\\"0-0-0-1\\\\\">\n    <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"><span class=\\\\\"arco-tree-node-indent-block arco-tree-node-indent-block-lineless\\\\\"></span><span class=\\\\\"arco-tree-node-indent-block\\\\\"></span></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher\\\\\"><!----></span><!-- checkbox --><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n      <!---->\n    </label><!-- 内容 --><span class=\\\\\"arco-tree-node-title arco-tree-node-title-block\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->Leaf<!--v-if--></span></span><!-- 额外 -->\n    <!--v-if-->\n  </div>\n  <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n  <div class=\\\\\"arco-tree-node arco-tree-node-is-tail arco-tree-node-expanded\\\\\" data-level=\\\\\"1\\\\\" data-key=\\\\\"0-0-1\\\\\">\n    <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"><span class=\\\\\"arco-tree-node-indent-block arco-tree-node-indent-block-lineless\\\\\"></span></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher arco-tree-node-switcher-expanded\\\\\"><span class=\\\\\"arco-icon-hover arco-tree-node-icon-hover\\\\\"><span class=\\\\\"arco-tree-node-switcher-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-caret-down\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M24.938 34.829a1.2 1.2 0 0 1-1.875 0L9.56 17.949c-.628-.785-.069-1.949.937-1.949h27.007c1.006 0 1.565 1.164.937 1.95L24.937 34.829Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path></svg></span></span></span><!-- checkbox --><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n      <!---->\n    </label><!-- 内容 --><span class=\\\\\"arco-tree-node-title arco-tree-node-title-block\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->Branch 0-0-1<!--v-if--></span></span><!-- 额外 -->\n    <!--v-if-->\n  </div>\n  <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n  <div class=\\\\\"arco-tree-node arco-tree-node-is-leaf arco-tree-node-is-tail\\\\\" data-level=\\\\\"2\\\\\" data-key=\\\\\"0-0-1-0\\\\\">\n    <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"><span class=\\\\\"arco-tree-node-indent-block arco-tree-node-indent-block-lineless\\\\\"></span><span class=\\\\\"arco-tree-node-indent-block arco-tree-node-indent-block-lineless\\\\\"></span></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher\\\\\"><!----></span><!-- checkbox --><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n      <!---->\n    </label><!-- 内容 --><span class=\\\\\"arco-tree-node-title arco-tree-node-title-block\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->Leaf<!--v-if--></span></span><!-- 额外 -->\n    <!--v-if-->\n  </div>\n  <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n</div>\"\n`;\n\nexports[`<tree> demo: render [virtual] correctly 1`] = `\n\"<button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\" style=\\\\\"margin-bottom: 20px;\\\\\">\n  <!--v-if--> Scroll to 0-0-2-2, i.e. the 26th.\n</button>\n<div class=\\\\\"arco-tree arco-tree-checkable arco-tree-size-medium\\\\\">\n  <div class=\\\\\"arco-virtual-list\\\\\" style=\\\\\"height: 200px; overflow: auto;\\\\\">\n    <div>\n      <div style=\\\\\"padding-top: 0px; padding-bottom: 32400px;\\\\\">\n        <div class=\\\\\"arco-tree-node arco-tree-node-expanded\\\\\" data-level=\\\\\"0\\\\\" data-key=\\\\\"0-0\\\\\">\n          <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher arco-tree-node-switcher-expanded\\\\\"><span class=\\\\\"arco-icon-hover arco-tree-node-icon-hover\\\\\"><span class=\\\\\"arco-tree-node-switcher-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-caret-down\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M24.938 34.829a1.2 1.2 0 0 1-1.875 0L9.56 17.949c-.628-.785-.069-1.949.937-1.949h27.007c1.006 0 1.565 1.164.937 1.95L24.937 34.829Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path></svg></span></span></span><!-- checkbox --><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n            <!---->\n          </label><!-- 内容 --><span class=\\\\\"arco-tree-node-title arco-tree-node-title-block\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->0-0<!--v-if--></span></span><!-- 额外 -->\n          <!--v-if-->\n        </div>\n        <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n        <div class=\\\\\"arco-tree-node arco-tree-node-expanded\\\\\" data-level=\\\\\"1\\\\\" data-key=\\\\\"0-0-0\\\\\">\n          <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"><span class=\\\\\"arco-tree-node-indent-block\\\\\"></span></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher arco-tree-node-switcher-expanded\\\\\"><span class=\\\\\"arco-icon-hover arco-tree-node-icon-hover\\\\\"><span class=\\\\\"arco-tree-node-switcher-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-caret-down\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M24.938 34.829a1.2 1.2 0 0 1-1.875 0L9.56 17.949c-.628-.785-.069-1.949.937-1.949h27.007c1.006 0 1.565 1.164.937 1.95L24.937 34.829Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path></svg></span></span></span><!-- checkbox --><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n            <!---->\n          </label><!-- 内容 --><span class=\\\\\"arco-tree-node-title arco-tree-node-title-block\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->0-0-0<!--v-if--></span></span><!-- 额外 -->\n          <!--v-if-->\n        </div>\n        <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n        <div class=\\\\\"arco-tree-node arco-tree-node-is-leaf\\\\\" data-level=\\\\\"2\\\\\" data-key=\\\\\"0-0-0-0\\\\\">\n          <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"><span class=\\\\\"arco-tree-node-indent-block\\\\\"></span><span class=\\\\\"arco-tree-node-indent-block\\\\\"></span></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher\\\\\"><!----></span><!-- checkbox --><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n            <!---->\n          </label><!-- 内容 --><span class=\\\\\"arco-tree-node-title arco-tree-node-title-block\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->0-0-0-0<!--v-if--></span></span><!-- 额外 -->\n          <!--v-if-->\n        </div>\n        <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n        <div class=\\\\\"arco-tree-node arco-tree-node-is-leaf\\\\\" data-level=\\\\\"2\\\\\" data-key=\\\\\"0-0-0-1\\\\\">\n          <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"><span class=\\\\\"arco-tree-node-indent-block\\\\\"></span><span class=\\\\\"arco-tree-node-indent-block\\\\\"></span></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher\\\\\"><!----></span><!-- checkbox --><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n            <!---->\n          </label><!-- 内容 --><span class=\\\\\"arco-tree-node-title arco-tree-node-title-block\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->0-0-0-1<!--v-if--></span></span><!-- 额外 -->\n          <!--v-if-->\n        </div>\n        <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n        <div class=\\\\\"arco-tree-node arco-tree-node-is-leaf\\\\\" data-level=\\\\\"2\\\\\" data-key=\\\\\"0-0-0-2\\\\\">\n          <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"><span class=\\\\\"arco-tree-node-indent-block\\\\\"></span><span class=\\\\\"arco-tree-node-indent-block\\\\\"></span></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher\\\\\"><!----></span><!-- checkbox --><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n            <!---->\n          </label><!-- 内容 --><span class=\\\\\"arco-tree-node-title arco-tree-node-title-block\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->0-0-0-2<!--v-if--></span></span><!-- 额外 -->\n          <!--v-if-->\n        </div>\n        <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n        <div class=\\\\\"arco-tree-node arco-tree-node-is-leaf\\\\\" data-level=\\\\\"2\\\\\" data-key=\\\\\"0-0-0-3\\\\\">\n          <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"><span class=\\\\\"arco-tree-node-indent-block\\\\\"></span><span class=\\\\\"arco-tree-node-indent-block\\\\\"></span></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher\\\\\"><!----></span><!-- checkbox --><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n            <!---->\n          </label><!-- 内容 --><span class=\\\\\"arco-tree-node-title arco-tree-node-title-block\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->0-0-0-3<!--v-if--></span></span><!-- 额外 -->\n          <!--v-if-->\n        </div>\n        <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n        <div class=\\\\\"arco-tree-node arco-tree-node-is-leaf\\\\\" data-level=\\\\\"2\\\\\" data-key=\\\\\"0-0-0-4\\\\\">\n          <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"><span class=\\\\\"arco-tree-node-indent-block\\\\\"></span><span class=\\\\\"arco-tree-node-indent-block\\\\\"></span></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher\\\\\"><!----></span><!-- checkbox --><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n            <!---->\n          </label><!-- 内容 --><span class=\\\\\"arco-tree-node-title arco-tree-node-title-block\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->0-0-0-4<!--v-if--></span></span><!-- 额外 -->\n          <!--v-if-->\n        </div>\n        <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n        <div class=\\\\\"arco-tree-node arco-tree-node-is-leaf\\\\\" data-level=\\\\\"2\\\\\" data-key=\\\\\"0-0-0-5\\\\\">\n          <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"><span class=\\\\\"arco-tree-node-indent-block\\\\\"></span><span class=\\\\\"arco-tree-node-indent-block\\\\\"></span></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher\\\\\"><!----></span><!-- checkbox --><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n            <!---->\n          </label><!-- 内容 --><span class=\\\\\"arco-tree-node-title arco-tree-node-title-block\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->0-0-0-5<!--v-if--></span></span><!-- 额外 -->\n          <!--v-if-->\n        </div>\n        <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n        <div class=\\\\\"arco-tree-node arco-tree-node-is-leaf\\\\\" data-level=\\\\\"2\\\\\" data-key=\\\\\"0-0-0-6\\\\\">\n          <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"><span class=\\\\\"arco-tree-node-indent-block\\\\\"></span><span class=\\\\\"arco-tree-node-indent-block\\\\\"></span></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher\\\\\"><!----></span><!-- checkbox --><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n            <!---->\n          </label><!-- 内容 --><span class=\\\\\"arco-tree-node-title arco-tree-node-title-block\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->0-0-0-6<!--v-if--></span></span><!-- 额外 -->\n          <!--v-if-->\n        </div>\n        <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n        <div class=\\\\\"arco-tree-node arco-tree-node-is-leaf\\\\\" data-level=\\\\\"2\\\\\" data-key=\\\\\"0-0-0-7\\\\\">\n          <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"><span class=\\\\\"arco-tree-node-indent-block\\\\\"></span><span class=\\\\\"arco-tree-node-indent-block\\\\\"></span></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher\\\\\"><!----></span><!-- checkbox --><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n            <!---->\n          </label><!-- 内容 --><span class=\\\\\"arco-tree-node-title arco-tree-node-title-block\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->0-0-0-7<!--v-if--></span></span><!-- 额外 -->\n          <!--v-if-->\n        </div>\n        <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n        <div class=\\\\\"arco-tree-node arco-tree-node-is-leaf\\\\\" data-level=\\\\\"2\\\\\" data-key=\\\\\"0-0-0-8\\\\\">\n          <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"><span class=\\\\\"arco-tree-node-indent-block\\\\\"></span><span class=\\\\\"arco-tree-node-indent-block\\\\\"></span></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher\\\\\"><!----></span><!-- checkbox --><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n            <!---->\n          </label><!-- 内容 --><span class=\\\\\"arco-tree-node-title arco-tree-node-title-block\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->0-0-0-8<!--v-if--></span></span><!-- 额外 -->\n          <!--v-if-->\n        </div>\n        <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n        <div class=\\\\\"arco-tree-node arco-tree-node-is-leaf arco-tree-node-is-tail\\\\\" data-level=\\\\\"2\\\\\" data-key=\\\\\"0-0-0-9\\\\\">\n          <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"><span class=\\\\\"arco-tree-node-indent-block\\\\\"></span><span class=\\\\\"arco-tree-node-indent-block\\\\\"></span></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher\\\\\"><!----></span><!-- checkbox --><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n            <!---->\n          </label><!-- 内容 --><span class=\\\\\"arco-tree-node-title arco-tree-node-title-block\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->0-0-0-9<!--v-if--></span></span><!-- 额外 -->\n          <!--v-if-->\n        </div>\n        <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n        <div class=\\\\\"arco-tree-node arco-tree-node-expanded\\\\\" data-level=\\\\\"1\\\\\" data-key=\\\\\"0-0-1\\\\\">\n          <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"><span class=\\\\\"arco-tree-node-indent-block\\\\\"></span></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher arco-tree-node-switcher-expanded\\\\\"><span class=\\\\\"arco-icon-hover arco-tree-node-icon-hover\\\\\"><span class=\\\\\"arco-tree-node-switcher-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-caret-down\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M24.938 34.829a1.2 1.2 0 0 1-1.875 0L9.56 17.949c-.628-.785-.069-1.949.937-1.949h27.007c1.006 0 1.565 1.164.937 1.95L24.937 34.829Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path></svg></span></span></span><!-- checkbox --><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n            <!---->\n          </label><!-- 内容 --><span class=\\\\\"arco-tree-node-title arco-tree-node-title-block\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->0-0-1<!--v-if--></span></span><!-- 额外 -->\n          <!--v-if-->\n        </div>\n        <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n        <div class=\\\\\"arco-tree-node arco-tree-node-is-leaf\\\\\" data-level=\\\\\"2\\\\\" data-key=\\\\\"0-0-1-0\\\\\">\n          <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"><span class=\\\\\"arco-tree-node-indent-block\\\\\"></span><span class=\\\\\"arco-tree-node-indent-block\\\\\"></span></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher\\\\\"><!----></span><!-- checkbox --><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n            <!---->\n          </label><!-- 内容 --><span class=\\\\\"arco-tree-node-title arco-tree-node-title-block\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->0-0-1-0<!--v-if--></span></span><!-- 额外 -->\n          <!--v-if-->\n        </div>\n        <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n        <div class=\\\\\"arco-tree-node arco-tree-node-is-leaf\\\\\" data-level=\\\\\"2\\\\\" data-key=\\\\\"0-0-1-1\\\\\">\n          <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"><span class=\\\\\"arco-tree-node-indent-block\\\\\"></span><span class=\\\\\"arco-tree-node-indent-block\\\\\"></span></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher\\\\\"><!----></span><!-- checkbox --><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n            <!---->\n          </label><!-- 内容 --><span class=\\\\\"arco-tree-node-title arco-tree-node-title-block\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->0-0-1-1<!--v-if--></span></span><!-- 额外 -->\n          <!--v-if-->\n        </div>\n        <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n        <div class=\\\\\"arco-tree-node arco-tree-node-is-leaf\\\\\" data-level=\\\\\"2\\\\\" data-key=\\\\\"0-0-1-2\\\\\">\n          <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"><span class=\\\\\"arco-tree-node-indent-block\\\\\"></span><span class=\\\\\"arco-tree-node-indent-block\\\\\"></span></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher\\\\\"><!----></span><!-- checkbox --><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n            <!---->\n          </label><!-- 内容 --><span class=\\\\\"arco-tree-node-title arco-tree-node-title-block\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->0-0-1-2<!--v-if--></span></span><!-- 额外 -->\n          <!--v-if-->\n        </div>\n        <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n        <div class=\\\\\"arco-tree-node arco-tree-node-is-leaf\\\\\" data-level=\\\\\"2\\\\\" data-key=\\\\\"0-0-1-3\\\\\">\n          <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"><span class=\\\\\"arco-tree-node-indent-block\\\\\"></span><span class=\\\\\"arco-tree-node-indent-block\\\\\"></span></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher\\\\\"><!----></span><!-- checkbox --><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n            <!---->\n          </label><!-- 内容 --><span class=\\\\\"arco-tree-node-title arco-tree-node-title-block\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->0-0-1-3<!--v-if--></span></span><!-- 额外 -->\n          <!--v-if-->\n        </div>\n        <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n        <div class=\\\\\"arco-tree-node arco-tree-node-is-leaf\\\\\" data-level=\\\\\"2\\\\\" data-key=\\\\\"0-0-1-4\\\\\">\n          <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"><span class=\\\\\"arco-tree-node-indent-block\\\\\"></span><span class=\\\\\"arco-tree-node-indent-block\\\\\"></span></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher\\\\\"><!----></span><!-- checkbox --><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n            <!---->\n          </label><!-- 内容 --><span class=\\\\\"arco-tree-node-title arco-tree-node-title-block\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->0-0-1-4<!--v-if--></span></span><!-- 额外 -->\n          <!--v-if-->\n        </div>\n        <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n        <div class=\\\\\"arco-tree-node arco-tree-node-is-leaf\\\\\" data-level=\\\\\"2\\\\\" data-key=\\\\\"0-0-1-5\\\\\">\n          <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"><span class=\\\\\"arco-tree-node-indent-block\\\\\"></span><span class=\\\\\"arco-tree-node-indent-block\\\\\"></span></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher\\\\\"><!----></span><!-- checkbox --><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n            <!---->\n          </label><!-- 内容 --><span class=\\\\\"arco-tree-node-title arco-tree-node-title-block\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->0-0-1-5<!--v-if--></span></span><!-- 额外 -->\n          <!--v-if-->\n        </div>\n        <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n        <div class=\\\\\"arco-tree-node arco-tree-node-is-leaf\\\\\" data-level=\\\\\"2\\\\\" data-key=\\\\\"0-0-1-6\\\\\">\n          <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"><span class=\\\\\"arco-tree-node-indent-block\\\\\"></span><span class=\\\\\"arco-tree-node-indent-block\\\\\"></span></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher\\\\\"><!----></span><!-- checkbox --><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n            <!---->\n          </label><!-- 内容 --><span class=\\\\\"arco-tree-node-title arco-tree-node-title-block\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->0-0-1-6<!--v-if--></span></span><!-- 额外 -->\n          <!--v-if-->\n        </div>\n        <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n        <div class=\\\\\"arco-tree-node arco-tree-node-is-leaf\\\\\" data-level=\\\\\"2\\\\\" data-key=\\\\\"0-0-1-7\\\\\">\n          <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"><span class=\\\\\"arco-tree-node-indent-block\\\\\"></span><span class=\\\\\"arco-tree-node-indent-block\\\\\"></span></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher\\\\\"><!----></span><!-- checkbox --><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n            <!---->\n          </label><!-- 内容 --><span class=\\\\\"arco-tree-node-title arco-tree-node-title-block\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->0-0-1-7<!--v-if--></span></span><!-- 额外 -->\n          <!--v-if-->\n        </div>\n        <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n        <div class=\\\\\"arco-tree-node arco-tree-node-is-leaf\\\\\" data-level=\\\\\"2\\\\\" data-key=\\\\\"0-0-1-8\\\\\">\n          <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"><span class=\\\\\"arco-tree-node-indent-block\\\\\"></span><span class=\\\\\"arco-tree-node-indent-block\\\\\"></span></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher\\\\\"><!----></span><!-- checkbox --><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n            <!---->\n          </label><!-- 内容 --><span class=\\\\\"arco-tree-node-title arco-tree-node-title-block\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->0-0-1-8<!--v-if--></span></span><!-- 额外 -->\n          <!--v-if-->\n        </div>\n        <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n        <div class=\\\\\"arco-tree-node arco-tree-node-is-leaf arco-tree-node-is-tail\\\\\" data-level=\\\\\"2\\\\\" data-key=\\\\\"0-0-1-9\\\\\">\n          <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"><span class=\\\\\"arco-tree-node-indent-block\\\\\"></span><span class=\\\\\"arco-tree-node-indent-block\\\\\"></span></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher\\\\\"><!----></span><!-- checkbox --><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n            <!---->\n          </label><!-- 内容 --><span class=\\\\\"arco-tree-node-title arco-tree-node-title-block\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->0-0-1-9<!--v-if--></span></span><!-- 额外 -->\n          <!--v-if-->\n        </div>\n        <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n        <div class=\\\\\"arco-tree-node arco-tree-node-expanded\\\\\" data-level=\\\\\"1\\\\\" data-key=\\\\\"0-0-2\\\\\">\n          <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"><span class=\\\\\"arco-tree-node-indent-block\\\\\"></span></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher arco-tree-node-switcher-expanded\\\\\"><span class=\\\\\"arco-icon-hover arco-tree-node-icon-hover\\\\\"><span class=\\\\\"arco-tree-node-switcher-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-caret-down\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M24.938 34.829a1.2 1.2 0 0 1-1.875 0L9.56 17.949c-.628-.785-.069-1.949.937-1.949h27.007c1.006 0 1.565 1.164.937 1.95L24.937 34.829Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path></svg></span></span></span><!-- checkbox --><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n            <!---->\n          </label><!-- 内容 --><span class=\\\\\"arco-tree-node-title arco-tree-node-title-block\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->0-0-2<!--v-if--></span></span><!-- 额外 -->\n          <!--v-if-->\n        </div>\n        <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n        <div class=\\\\\"arco-tree-node arco-tree-node-is-leaf\\\\\" data-level=\\\\\"2\\\\\" data-key=\\\\\"0-0-2-0\\\\\">\n          <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"><span class=\\\\\"arco-tree-node-indent-block\\\\\"></span><span class=\\\\\"arco-tree-node-indent-block\\\\\"></span></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher\\\\\"><!----></span><!-- checkbox --><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n            <!---->\n          </label><!-- 内容 --><span class=\\\\\"arco-tree-node-title arco-tree-node-title-block\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->0-0-2-0<!--v-if--></span></span><!-- 额外 -->\n          <!--v-if-->\n        </div>\n        <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n        <div class=\\\\\"arco-tree-node arco-tree-node-is-leaf\\\\\" data-level=\\\\\"2\\\\\" data-key=\\\\\"0-0-2-1\\\\\">\n          <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"><span class=\\\\\"arco-tree-node-indent-block\\\\\"></span><span class=\\\\\"arco-tree-node-indent-block\\\\\"></span></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher\\\\\"><!----></span><!-- checkbox --><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n            <!---->\n          </label><!-- 内容 --><span class=\\\\\"arco-tree-node-title arco-tree-node-title-block\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->0-0-2-1<!--v-if--></span></span><!-- 额外 -->\n          <!--v-if-->\n        </div>\n        <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n        <div class=\\\\\"arco-tree-node arco-tree-node-is-leaf\\\\\" data-level=\\\\\"2\\\\\" data-key=\\\\\"0-0-2-2\\\\\">\n          <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"><span class=\\\\\"arco-tree-node-indent-block\\\\\"></span><span class=\\\\\"arco-tree-node-indent-block\\\\\"></span></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher\\\\\"><!----></span><!-- checkbox --><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n            <!---->\n          </label><!-- 内容 --><span class=\\\\\"arco-tree-node-title arco-tree-node-title-block\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->0-0-2-2<!--v-if--></span></span><!-- 额外 -->\n          <!--v-if-->\n        </div>\n        <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n        <div class=\\\\\"arco-tree-node arco-tree-node-is-leaf\\\\\" data-level=\\\\\"2\\\\\" data-key=\\\\\"0-0-2-3\\\\\">\n          <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"><span class=\\\\\"arco-tree-node-indent-block\\\\\"></span><span class=\\\\\"arco-tree-node-indent-block\\\\\"></span></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher\\\\\"><!----></span><!-- checkbox --><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n            <!---->\n          </label><!-- 内容 --><span class=\\\\\"arco-tree-node-title arco-tree-node-title-block\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->0-0-2-3<!--v-if--></span></span><!-- 额外 -->\n          <!--v-if-->\n        </div>\n        <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n        <div class=\\\\\"arco-tree-node arco-tree-node-is-leaf\\\\\" data-level=\\\\\"2\\\\\" data-key=\\\\\"0-0-2-4\\\\\">\n          <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"><span class=\\\\\"arco-tree-node-indent-block\\\\\"></span><span class=\\\\\"arco-tree-node-indent-block\\\\\"></span></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher\\\\\"><!----></span><!-- checkbox --><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n            <!---->\n          </label><!-- 内容 --><span class=\\\\\"arco-tree-node-title arco-tree-node-title-block\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->0-0-2-4<!--v-if--></span></span><!-- 额外 -->\n          <!--v-if-->\n        </div>\n        <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n        <div class=\\\\\"arco-tree-node arco-tree-node-is-leaf\\\\\" data-level=\\\\\"2\\\\\" data-key=\\\\\"0-0-2-5\\\\\">\n          <!-- 缩进 --><span class=\\\\\"arco-tree-node-indent\\\\\"><span class=\\\\\"arco-tree-node-indent-block\\\\\"></span><span class=\\\\\"arco-tree-node-indent-block\\\\\"></span></span><!-- switcher --><span class=\\\\\"arco-tree-node-switcher\\\\\"><!----></span><!-- checkbox --><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span>\n            <!---->\n          </label><!-- 内容 --><span class=\\\\\"arco-tree-node-title arco-tree-node-title-block\\\\\" draggable=\\\\\"false\\\\\"><!--v-if--><span class=\\\\\"arco-tree-node-title-text\\\\\"><!-- 标题，treeTitle 优先级高于节点的 title -->0-0-2-5<!--v-if--></span></span><!-- 额外 -->\n          <!--v-if-->\n        </div>\n        <transition-stub appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\"></transition-stub>\n      </div>\n    </div>\n  </div>\n</div>\"\n`;\n"
  },
  {
    "path": "packages/web-vue/components/tree/__test__/check-utils.test.ts",
    "content": "import { Node } from '../interface';\nimport { getFlattenTreeData, getKey2TreeNode } from '../utils';\nimport {\n  getCheckedStateByCheck,\n  getCheckedStateByInitKeys,\n} from '../utils/check-utils';\nimport { generateTreeData } from '../utils/tree-data';\n\ndescribe('checkUtils', () => {\n  const data = [\n    {\n      title: 'Root',\n      key: '0-0',\n      children: [\n        {\n          title: 'Leaf',\n          key: '0-0-1',\n        },\n        {\n          title: 'Branch',\n          key: '0-0-2',\n          disableCheckbox: true,\n          children: [\n            {\n              title: 'Leaf',\n              key: '0-0-2-1',\n            },\n          ],\n        },\n      ],\n    },\n  ];\n  const treeData = generateTreeData(data, {\n    checkable: true,\n    selectable: true,\n    blockNode: false,\n    showLine: false,\n    loadMore: false,\n    draggable: false,\n  });\n  const flattenTreeData = getFlattenTreeData(treeData);\n  const key2TreeNode = getKey2TreeNode(flattenTreeData);\n  const checkedKey = data[0].key;\n  const checkedNode = key2TreeNode.get(checkedKey) as unknown as Node;\n\n  test(\"[getCheckedStateByCheck] node should not be checked when it's disable or disableCheckbox is true\", () => {\n    let [checkedResult] = getCheckedStateByCheck({\n      node: checkedNode,\n      checked: true,\n      checkedKeys: [],\n      indeterminateKeys: [],\n      checkStrictly: false,\n    });\n    expect(checkedResult.length).toBe(2);\n\n    [checkedResult] = getCheckedStateByCheck({\n      node: checkedNode,\n      checked: false,\n      checkedKeys: checkedResult,\n      indeterminateKeys: [],\n      checkStrictly: false,\n    });\n    expect(checkedResult.length).toBe(0);\n  });\n\n  test('[getCheckedStateByCheck] Only check itself when checkStrictly is true', () => {\n    let [checkedResult] = getCheckedStateByCheck({\n      node: checkedNode,\n      checked: true,\n      checkedKeys: [],\n      indeterminateKeys: [],\n      checkStrictly: true,\n    });\n    expect(checkedResult.length).toBe(1);\n\n    [checkedResult] = getCheckedStateByCheck({\n      node: checkedNode,\n      checked: false,\n      checkedKeys: ['0-0', '0-0-1'],\n      indeterminateKeys: [],\n      checkStrictly: true,\n    });\n    expect(checkedResult.length).toBe(1);\n  });\n\n  test(\"[getCheckedStateByInitKeys] node should not be checked when it's disable or disableCheckbox is true\", () => {\n    const [result] = getCheckedStateByInitKeys({\n      initCheckedKeys: ['0-0'],\n      key2TreeNode,\n    });\n    expect(result.length).toBe(2);\n  });\n\n  test('[getCheckedStateByInitKeys] Only check itself when checkStrictly is true', () => {\n    const [result] = getCheckedStateByInitKeys({\n      initCheckedKeys: ['0-0'],\n      key2TreeNode,\n      checkStrictly: true,\n    });\n    expect(result.length).toBe(1);\n  });\n\n  test('[getCheckedStateByInitKeys] Only check leaf when onlyCheckLeaf is true', () => {\n    let [result] = getCheckedStateByInitKeys({\n      initCheckedKeys: ['0-0'],\n      key2TreeNode,\n      onlyCheckLeaf: true,\n    });\n    expect(result.length).toBe(0);\n\n    [result] = getCheckedStateByInitKeys({\n      initCheckedKeys: ['0-0', '0-0-1'],\n      key2TreeNode,\n      onlyCheckLeaf: true,\n    });\n    expect(result.length).toBe(2);\n  });\n\n  test('Stop updating the parent node when the node is disabled', () => {\n    let [checkedResult, indeterminateResult] = getCheckedStateByCheck({\n      node: key2TreeNode.get('0-0-2-1') as any,\n      checked: true,\n      checkedKeys: [],\n      indeterminateKeys: [],\n      checkStrictly: false,\n    });\n    expect(checkedResult.length).toBe(1);\n    expect(indeterminateResult.length).toBe(0);\n\n    [checkedResult, indeterminateResult] = getCheckedStateByInitKeys({\n      initCheckedKeys: ['0-0-2-1'],\n      key2TreeNode,\n    });\n    expect(checkedResult.length).toBe(1);\n    expect(indeterminateResult.length).toBe(0);\n  });\n});\n"
  },
  {
    "path": "packages/web-vue/components/tree/__test__/demo.test.ts",
    "content": "import demoTest from '../../../scripts/demo-test';\n\ndemoTest('tree');\n"
  },
  {
    "path": "packages/web-vue/components/tree/__test__/tree-data.ts",
    "content": "import { getFlattenTreeData, getKey2TreeNode } from '../utils';\nimport { generateTreeData } from '../utils/tree-data';\nimport { Node } from '../interface';\n\ndescribe('tree-data', () => {\n  const data = [\n    {\n      title: 'node1',\n      key: 0,\n    },\n    {\n      title: 'node2',\n      key: '0',\n    },\n    {\n      title: 'node3',\n      key: 3,\n    },\n    {\n      title: 'node4',\n      key: 4,\n      selectable: false,\n      checkable: false,\n      draggable: true,\n    },\n    {\n      title: 'node5',\n      key: 5,\n      selectable: true,\n      checkable: true,\n      draggable: false,\n    },\n  ];\n  const treeData1 = generateTreeData(data, {\n    checkable: true,\n    selectable: true,\n    draggable: false,\n\n    blockNode: false,\n    showLine: false,\n    loadMore: false,\n  });\n  const treeData2 = generateTreeData(data, {\n    checkable: false,\n    selectable: false,\n    draggable: true,\n\n    blockNode: false,\n    showLine: false,\n    loadMore: false,\n  });\n  const key2TreeNode1 = getKey2TreeNode(getFlattenTreeData(treeData1));\n  const key2TreeNode2 = getKey2TreeNode(getFlattenTreeData(treeData2));\n\n  test('should get right result by key when the type of key is number', () => {\n    const node1 = key2TreeNode1.get(0) as unknown as Node;\n    const node2 = key2TreeNode1.get('0') as unknown as Node;\n    expect(typeof node1).toBe('[Object object]');\n    expect(typeof node2).toBe('[Object object]');\n    expect(node1.title).toBe('node1');\n    expect(node2.title).toBe('node2');\n  });\n\n  test('the value of checkable/selectable/draggable should inherit from tree when not specify', () => {\n    const node31 = key2TreeNode1.get(3) as unknown as Node;\n    const node32 = key2TreeNode2.get(3) as unknown as Node;\n    expect(node31.checkable).toBe(true);\n    expect(node31.selectable).toBe(true);\n    expect(node31.draggable).toBe(false);\n    expect(node32.checkable).toBe(false);\n    expect(node32.selectable).toBe(false);\n    expect(node32.draggable).toBe(true);\n  });\n\n  test('the value of checkable/selectable/draggable should cover the tree when specified in node', () => {\n    const node41 = key2TreeNode1.get(4) as unknown as Node;\n    const node52 = key2TreeNode2.get(5) as unknown as Node;\n    expect(node41.checkable).toBe(false);\n    expect(node41.selectable).toBe(false);\n    expect(node41.draggable).toBe(true);\n    expect(node52.checkable).toBe(true);\n    expect(node52.selectable).toBe(true);\n    expect(node52.draggable).toBe(false);\n  });\n});\n"
  },
  {
    "path": "packages/web-vue/components/tree/base-node.vue",
    "content": "<template>\n  <div :class=\"classNames\" :data-level=\"level\" :data-key=\"nodekey\">\n    <!-- 缩进 -->\n    <span :class=\"`${prefixCls}-indent`\">\n      <span\n        v-for=\"i in level\"\n        :key=\"i\"\n        :class=\"[\n          `${prefixCls}-indent-block`,\n          {\n            [`${prefixCls}-indent-block-lineless`]: lineless[i - 1],\n          },\n        ]\"\n      />\n    </span>\n    <!-- switcher -->\n    <span\n      :class=\"[\n        `${prefixCls}-switcher`,\n        {\n          [`${prefixCls}-switcher-expanded`]: expanded,\n        },\n      ]\"\n    >\n      <NodeSwitcher\n        :prefix-cls=\"prefixCls\"\n        :loading=\"loading\"\n        :show-line=\"showLine\"\n        :tree-node-data=\"treeNodeData\"\n        :icons=\"{\n          switcherIcon,\n          loadingIcon,\n        }\"\n        :node-status=\"nodeStatus\"\n        @click=\"onSwitcherClick\"\n      >\n        <template v-if=\"$slots['switcher-icon']\" #switcher-icon>\n          <!-- @slot 定制 switcher 图标，会覆盖 Tree 的配置 -->\n          <slot name=\"switcher-icon\" />\n        </template>\n        <template v-if=\"$slots['loading-icon']\" #loading-icon>\n          <!-- @slot 定制 loading 图标，会覆盖 Tree 的配置 -->\n          <slot name=\"loading-icon\" />\n        </template>\n      </NodeSwitcher>\n    </span>\n    <!-- checkbox -->\n    <Checkbox\n      v-if=\"checkable\"\n      :disabled=\"disableCheckbox || disabled\"\n      :model-value=\"checked\"\n      :indeterminate=\"indeterminate\"\n      uninject-group-context\n      @change=\"onCheckboxChange\"\n    />\n\n    <!-- 内容 -->\n    <span\n      ref=\"refTitle\"\n      :class=\"titleClassNames\"\n      :draggable=\"draggable\"\n      @dragstart=\"onDragStart\"\n      @dragend=\"onDragEnd\"\n      @dragover=\"onDragOver\"\n      @dragleave=\"onDragLeave\"\n      @drop=\"onDrop\"\n      @click=\"onTitleClick\"\n    >\n      <span\n        v-if=\"$slots.icon || icon || treeNodeIcon\"\n        :class=\"[`${prefixCls}-icon`, `${prefixCls}-custom-icon`]\"\n      >\n        <!-- 节点图标 -->\n        <slot v-if=\"$slots.icon\" name=\"icon\" v-bind=\"nodeStatus\" />\n        <RenderFunction\n          v-else-if=\"icon\"\n          :render-func=\"icon\"\n          v-bind=\"nodeStatus\"\n        />\n        <RenderFunction\n          v-else-if=\"treeNodeIcon\"\n          :render-func=\"treeNodeIcon\"\n          :node=\"treeNodeData\"\n          v-bind=\"nodeStatus\"\n        />\n      </span>\n      <span :class=\"`${prefixCls}-title-text`\">\n        <RenderFunction v-if=\"treeTitle\" :render-func=\"treeTitle\" />\n        <!-- 标题，treeTitle 优先级高于节点的 title -->\n        <slot v-else name=\"title\" :title=\"title\">{{ title }}</slot>\n\n        <span\n          v-if=\"draggable\"\n          :class=\"[`${prefixCls}-icon`, `${prefixCls}-drag-icon`]\"\n        >\n          <!-- 拖拽图标 -->\n          <slot\n            v-if=\"$slots['drag-icon']\"\n            name=\"drag-icon\"\n            v-bind=\"nodeStatus\"\n          />\n          <RenderFunction\n            v-else-if=\"dragIcon\"\n            :render-func=\"dragIcon\"\n            v-bind=\"nodeStatus\"\n          />\n          <RenderFunction\n            v-else-if=\"treeDragIcon\"\n            :render-func=\"treeDragIcon\"\n            :node=\"treeNodeData\"\n            v-bind=\"nodeStatus\"\n          />\n          <IconDragDotVertical v-else />\n        </span>\n      </span>\n    </span>\n    <!-- 额外 -->\n    <RenderFunction v-if=\"extra\" :render-func=\"extra\" />\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  PropType,\n  toRefs,\n  VNode,\n  reactive,\n  ref,\n} from 'vue';\nimport { getPrefixCls } from '../_utils/global-config';\nimport useTreeContext from './hooks/use-tree-context';\nimport NodeSwitcher from './node-switcher.vue';\nimport useNodeKey from './hooks/use-node-key';\nimport Checkbox from '../checkbox';\nimport RenderFunction from '../_components/render-function';\nimport { isFunction } from '../_utils/is';\nimport { Node } from './interface';\nimport useDraggable from './hooks/use-draggable';\nimport IconDragDotVertical from '../icon/icon-drag-dot-vertical';\nimport { toArray } from '../_utils/to-array';\n\nexport default defineComponent({\n  name: 'BaseTreeNode',\n  components: {\n    NodeSwitcher,\n    Checkbox,\n    RenderFunction,\n    IconDragDotVertical,\n  },\n  props: {\n    /** 标题 */\n    title: {\n      type: String,\n    },\n    /** 是否允许选中  */\n    selectable: {\n      type: Boolean,\n    },\n    /** 是否禁用节点 */\n    disabled: {\n      type: Boolean,\n    },\n    /** 是否禁用checkbox   */\n    disableCheckbox: {\n      type: Boolean,\n    },\n    /** 是否显示多选框   */\n    checkable: {\n      type: Boolean,\n    },\n    /** 是否可以拖拽   */\n    draggable: {\n      type: Boolean,\n    },\n    /** 是否是叶子节点。动态加载时有效 */\n    isLeaf: {\n      type: Boolean,\n    },\n    icon: {\n      type: Function as PropType<() => VNode>,\n    },\n    switcherIcon: {\n      type: Function as PropType<() => VNode>,\n    },\n    loadingIcon: {\n      type: Function as PropType<() => VNode>,\n    },\n    dragIcon: {\n      type: Function as PropType<() => VNode>,\n    },\n    isTail: {\n      type: Boolean,\n    },\n    blockNode: {\n      type: Boolean,\n    },\n    showLine: {\n      type: Boolean,\n    },\n    level: {\n      type: Number,\n      default: 0,\n    },\n    lineless: {\n      type: Array as PropType<boolean[]>,\n      default: () => [],\n    },\n  },\n  setup(props) {\n    const key = useNodeKey();\n    const prefixCls = getPrefixCls('tree-node');\n    const treeContext = useTreeContext();\n    const node = computed(\n      () => treeContext.key2TreeNode?.get(key.value) as Node\n    );\n    const treeNodeData = computed(() => node.value.treeNodeData);\n    const children = computed(() => node.value.children);\n    const actionOnNodeClick = computed(() => {\n      const action = treeContext.treeProps?.actionOnNodeClick;\n      return action ? toArray(action) : [];\n    });\n\n    const { isLeaf, isTail, selectable, disabled, disableCheckbox, draggable } =\n      toRefs(props);\n\n    const classNames = computed(() => [\n      `${prefixCls}`,\n      {\n        [`${prefixCls}-selected`]: selected.value,\n        [`${prefixCls}-is-leaf`]: isLeaf.value,\n        [`${prefixCls}-is-tail`]: isTail.value,\n        [`${prefixCls}-expanded`]: expanded.value,\n        [`${prefixCls}-disabled-selectable`]:\n          !selectable.value && !treeContext.treeProps?.disableSelectActionOnly,\n        [`${prefixCls}-disabled`]: disabled.value,\n      },\n    ]);\n\n    const refTitle = ref<HTMLElement>();\n    const { isDragOver, isDragging, isAllowDrop, dropPosition, setDragStatus } =\n      useDraggable(\n        reactive({\n          key,\n          refTitle,\n        })\n      );\n\n    const titleClassNames = computed(() => [\n      `${prefixCls}-title`,\n      {\n        [`${prefixCls}-title-draggable`]: draggable.value,\n        [`${prefixCls}-title-gap-top`]:\n          isDragOver.value && isAllowDrop.value && dropPosition.value < 0,\n        [`${prefixCls}-title-gap-bottom`]:\n          isDragOver.value && isAllowDrop.value && dropPosition.value > 0,\n        [`${prefixCls}-title-highlight`]:\n          !isDragging.value &&\n          isDragOver.value &&\n          isAllowDrop.value &&\n          dropPosition.value === 0,\n        [`${prefixCls}-title-dragging`]: isDragging.value,\n        [`${prefixCls}-title-block`]: node.value.blockNode,\n      },\n    ]);\n\n    const checked = computed(() =>\n      treeContext.checkedKeys?.includes?.(key.value)\n    );\n\n    const indeterminate = computed(() =>\n      treeContext.indeterminateKeys?.includes?.(key.value)\n    );\n\n    const selected = computed(() =>\n      treeContext.selectedKeys?.includes?.(key.value)\n    );\n\n    const expanded = computed(() =>\n      treeContext.expandedKeys?.includes?.(key.value)\n    );\n\n    const loading = computed(() =>\n      treeContext.loadingKeys?.includes?.(key.value)\n    );\n\n    const treeDragIcon = computed(() => treeContext.dragIcon);\n\n    const treeNodeIcon = computed(() => treeContext.nodeIcon);\n\n    function onSwitcherClick(e: Event) {\n      if (isLeaf.value) return;\n      if (!children.value?.length && isFunction(treeContext.onLoadMore)) {\n        treeContext.onLoadMore(key.value);\n      } else {\n        treeContext?.onExpand?.(!expanded.value, key.value, e);\n      }\n    }\n\n    const nodeStatus = reactive({\n      loading,\n      checked,\n      selected,\n      indeterminate,\n      expanded,\n      isLeaf,\n    });\n\n    const treeTitle = computed(() =>\n      treeContext.nodeTitle\n        ? () => treeContext.nodeTitle?.(treeNodeData.value, nodeStatus)\n        : undefined\n    );\n    const extra = computed(() =>\n      treeContext.nodeExtra\n        ? () => treeContext.nodeExtra?.(treeNodeData.value, nodeStatus)\n        : undefined\n    );\n\n    return {\n      nodekey: key,\n      refTitle,\n      prefixCls,\n      classNames,\n      titleClassNames,\n      indeterminate,\n      checked,\n      expanded,\n      selected,\n      treeTitle,\n      treeNodeData,\n      loading,\n      treeDragIcon,\n      treeNodeIcon,\n      extra,\n      nodeStatus,\n      onCheckboxChange(checked: boolean, e: Event) {\n        if (disableCheckbox.value || disabled.value) {\n          return;\n        }\n        treeContext.onCheck?.(checked, key.value, e);\n      },\n      onTitleClick(e: Event) {\n        if (actionOnNodeClick.value.includes('expand')) {\n          onSwitcherClick(e);\n        }\n        if (!selectable.value || disabled.value) return;\n        treeContext.onSelect?.(key.value, e);\n      },\n      onSwitcherClick,\n      onDragStart(e: DragEvent) {\n        if (!draggable.value) return;\n\n        e.stopPropagation();\n\n        setDragStatus('dragStart', e);\n\n        try {\n          // ie throw error\n          // firefox-need-it\n          e.dataTransfer?.setData('text/plain', '');\n        } catch (error) {\n          // empty\n        }\n      },\n      onDragEnd(e: DragEvent) {\n        if (!draggable.value) return;\n\n        e.stopPropagation();\n\n        setDragStatus('dragEnd', e);\n      },\n      onDragOver(e: DragEvent) {\n        if (!draggable) return;\n\n        e.stopPropagation();\n        e.preventDefault();\n\n        setDragStatus('dragOver', e);\n      },\n      onDragLeave(e: DragEvent) {\n        if (!draggable.value) return;\n\n        e.stopPropagation();\n\n        setDragStatus('dragLeave', e);\n      },\n      onDrop(e: DragEvent) {\n        if (!draggable.value || !isAllowDrop.value) return;\n\n        e.stopPropagation();\n        e.preventDefault();\n\n        setDragStatus('drop', e);\n      },\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/tree/context.ts",
    "content": "import { InjectionKey, Slot } from 'vue';\nimport type {\n  Node,\n  DropPosition,\n  TreeNodeKey,\n  TreeProps,\n  Key2TreeNode,\n  FilterTreeNode,\n} from './interface';\n\nexport const TreeInjectionKey: InjectionKey<TreeContext> =\n  Symbol('TreeInjectionKey');\n\nexport type TreeContext = Readonly<{\n  treeProps: TreeProps;\n  switcherIcon?: Slot;\n  loadingIcon?: Slot;\n  nodeIcon?: Slot;\n  dragIcon?: Slot;\n  nodeTitle?: Slot;\n  nodeExtra?: Slot;\n  treeData: Node[];\n  flattenTreeData: Node[];\n  key2TreeNode: Key2TreeNode;\n  checkedKeys: TreeNodeKey[];\n  filterTreeNode?: FilterTreeNode;\n  indeterminateKeys: TreeNodeKey[];\n  selectedKeys: TreeNodeKey[];\n  expandedKeys: TreeNodeKey[];\n  loadingKeys: TreeNodeKey[];\n  currentExpandKeys: TreeNodeKey[];\n  onLoadMore?: (key: TreeNodeKey) => void;\n  onCheck: (checked: boolean, key: TreeNodeKey, e?: Event) => void;\n  onSelect: (key: TreeNodeKey, e: Event) => void;\n  onExpand: (expanded: boolean, key: TreeNodeKey, e?: Event) => void;\n  onExpandEnd: (key: TreeNodeKey) => void;\n  onDragStart?: (key: TreeNodeKey, e: DragEvent) => void;\n  onDragEnd?: (key: TreeNodeKey, e: DragEvent) => void;\n  onDragOver?: (key: TreeNodeKey, e: DragEvent) => void;\n  onDragLeave?: (key: TreeNodeKey, e: DragEvent) => void;\n  onDrop?: (key: TreeNodeKey, dropPosition: DropPosition, e: DragEvent) => void;\n  allowDrop?: (key: TreeNodeKey, dropPosition: DropPosition) => boolean;\n}>;\n"
  },
  {
    "path": "packages/web-vue/components/tree/expand-transition.vue",
    "content": "<template>\n  <transition\n    @enter=\"onEnter\"\n    @after-enter=\"onAfterEnter\"\n    @before-leave=\"onBeforeLeave\"\n  >\n    <slot />\n  </transition>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue';\n\nexport default defineComponent({\n  name: 'ExpandTransition',\n  props: {\n    expanded: Boolean,\n  },\n  emits: ['end'],\n  setup(props, { emit }) {\n    return {\n      onEnter(el: HTMLDivElement) {\n        const endHeight = `${el.scrollHeight}px`;\n        el.style.height = props.expanded ? '0' : endHeight;\n        // eslint-disable-next-line no-unused-expressions\n        el.offsetHeight;\n        el.style.height = props.expanded ? endHeight : '0';\n      },\n      onAfterEnter(el: HTMLDivElement) {\n        el.style.height = props.expanded ? '' : '0';\n        emit('end');\n      },\n      onBeforeLeave(el: HTMLDivElement) {\n        el.style.display = 'none';\n      },\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/tree/hooks/use-checked-state.ts",
    "content": "import { toRefs, ref, watchEffect, computed } from 'vue';\nimport { TreeNodeKey, Key2TreeNode } from '../interface';\nimport { getCheckedStateByInitKeys } from '../utils/check-utils';\n\nexport default function useCheckedState(props: {\n  defaultCheckedKeys: TreeNodeKey[] | undefined;\n  checkedKeys: TreeNodeKey[] | undefined;\n  halfCheckedKeys: TreeNodeKey[] | undefined;\n  key2TreeNode: Key2TreeNode;\n  checkStrictly: boolean;\n  onlyCheckLeaf: boolean;\n}) {\n  const {\n    defaultCheckedKeys,\n    checkedKeys: propCheckedKeys,\n    key2TreeNode,\n    checkStrictly,\n    halfCheckedKeys,\n    onlyCheckLeaf,\n  } = toRefs(props);\n\n  const isInitialized = ref(false);\n  const localCheckedKeys = ref<TreeNodeKey[]>([]);\n  const localIndeterminateKeys = ref<TreeNodeKey[]>([]);\n  const computedCheckedKeys = ref<TreeNodeKey[]>();\n  const computedIndeterminateKeys = ref<TreeNodeKey[]>();\n\n  const getStateByKeys = (keys: TreeNodeKey[]) => {\n    return getCheckedStateByInitKeys({\n      initCheckedKeys: keys,\n      key2TreeNode: key2TreeNode.value,\n      checkStrictly: checkStrictly.value,\n      onlyCheckLeaf: onlyCheckLeaf.value,\n    });\n  };\n\n  const init = (keys: TreeNodeKey[]) => {\n    const initState = getStateByKeys(keys);\n    [localCheckedKeys.value, localIndeterminateKeys.value] = initState;\n  };\n\n  init(propCheckedKeys.value || defaultCheckedKeys?.value || []);\n\n  watchEffect(() => {\n    if (propCheckedKeys.value) {\n      [computedCheckedKeys.value, computedIndeterminateKeys.value] =\n        getStateByKeys(propCheckedKeys.value);\n    } else if (isInitialized.value) {\n      computedCheckedKeys.value = undefined;\n      computedIndeterminateKeys.value = undefined;\n      localCheckedKeys.value = [];\n      localIndeterminateKeys.value = [];\n    }\n    if (!isInitialized.value) {\n      isInitialized.value = true;\n    }\n  });\n\n  return {\n    checkedKeys: computed(\n      () => computedCheckedKeys.value || localCheckedKeys.value\n    ),\n    indeterminateKeys: computed(() => {\n      if (checkStrictly.value && halfCheckedKeys.value) {\n        return halfCheckedKeys.value;\n      }\n      return computedIndeterminateKeys.value || localIndeterminateKeys.value;\n    }),\n    setCheckedState(\n      newCheckedKeys: TreeNodeKey[],\n      newIndeterminateKeys: TreeNodeKey[],\n      reinitialize = false\n    ) {\n      if (reinitialize) {\n        init(newCheckedKeys);\n      } else {\n        localCheckedKeys.value = newCheckedKeys;\n        localIndeterminateKeys.value = newIndeterminateKeys;\n      }\n      return [localCheckedKeys.value, localIndeterminateKeys.value];\n    },\n  };\n}\n"
  },
  {
    "path": "packages/web-vue/components/tree/hooks/use-draggable.ts",
    "content": "import { ref, toRefs } from 'vue';\nimport { throttleByRaf } from '../../_utils/throttle-by-raf';\nimport { DropPosition, TreeNodeKey } from '../interface';\nimport useTreeContext from './use-tree-context';\n\nexport default function useDraggable(props: {\n  key: TreeNodeKey;\n  refTitle: HTMLElement | undefined;\n}) {\n  const { key, refTitle } = toRefs(props);\n  const treeContext = useTreeContext();\n\n  const isDragOver = ref(false);\n  const isDragging = ref(false);\n  const isAllowDrop = ref(false);\n  const dropPosition = ref<DropPosition>(0);\n\n  const updateDropPosition = throttleByRaf((e: DragEvent) => {\n    if (!refTitle.value) return;\n\n    const rect = refTitle.value.getBoundingClientRect();\n    const offsetY = window.pageYOffset + rect.top;\n    const { pageY } = e;\n    const gapHeight = rect.height / 4;\n    const diff = pageY - offsetY;\n\n    dropPosition.value =\n      diff < gapHeight ? -1 : diff < rect.height - gapHeight ? 0 : 1;\n    isAllowDrop.value = treeContext.allowDrop\n      ? treeContext.allowDrop(key.value, dropPosition.value)\n      : true;\n  });\n\n  return {\n    isDragOver,\n    isDragging,\n    isAllowDrop,\n    dropPosition,\n    setDragStatus(\n      status: 'dragStart' | 'dragOver' | 'dragLeave' | 'dragEnd' | 'drop',\n      e: DragEvent\n    ) {\n      switch (status) {\n        case 'dragStart':\n          isDragging.value = true;\n          dropPosition.value = 0;\n          treeContext.onDragStart && treeContext.onDragStart(key.value, e);\n          break;\n        case 'dragEnd':\n          isDragging.value = false;\n          isDragOver.value = false;\n          dropPosition.value = 0;\n          updateDropPosition.cancel();\n          treeContext.onDragEnd && treeContext.onDragEnd(key.value, e);\n          break;\n        case 'dragOver':\n          isDragOver.value = true;\n          updateDropPosition(e);\n          treeContext.onDragOver && treeContext.onDragOver(key.value, e);\n          break;\n        case 'dragLeave':\n          isDragOver.value = false;\n          dropPosition.value = 0;\n          updateDropPosition.cancel();\n          treeContext.onDragLeave && treeContext.onDragLeave(key.value, e);\n          break;\n        case 'drop':\n          treeContext.onDrop &&\n            treeContext.onDrop(key.value, dropPosition.value, e);\n          isDragOver.value = false;\n          dropPosition.value = 0;\n          updateDropPosition.cancel();\n          break;\n        default:\n          break;\n      }\n    },\n  };\n}\n"
  },
  {
    "path": "packages/web-vue/components/tree/hooks/use-node-key.ts",
    "content": "import { getCurrentInstance, ref, onUpdated, Ref } from 'vue';\nimport { generateKey } from '../utils/tree-data';\nimport { TreeNodeKey } from '../interface';\n\nexport default function useNodeKey(): Ref<TreeNodeKey> {\n  const instance = getCurrentInstance();\n\n  const getKey = () => (instance?.vnode.key ?? generateKey()) as TreeNodeKey;\n\n  const key = ref(getKey());\n\n  onUpdated(() => {\n    key.value = getKey();\n  });\n\n  return key;\n}\n"
  },
  {
    "path": "packages/web-vue/components/tree/hooks/use-tree-context.ts",
    "content": "import { inject } from 'vue';\nimport { TreeContext, TreeInjectionKey } from '../context';\n\nexport default function useTreeContext(): Partial<TreeContext> {\n  const treeContext = inject<TreeContext>(TreeInjectionKey);\n  return treeContext || {};\n}\n"
  },
  {
    "path": "packages/web-vue/components/tree/hooks/use-tree-data.ts",
    "content": "import { computed, ref, toRefs, watchEffect } from 'vue';\nimport {\n  TreeFieldNames,\n  TreeNodeData,\n  Node,\n  LoadMore,\n  CheckableType,\n  SelectableType,\n} from '../interface';\nimport { getFlattenTreeData, getKey2TreeNode } from '../utils';\nimport { generateTreeData } from '../utils/tree-data';\n\nexport default function useTreeData(props: {\n  treeData: TreeNodeData[];\n  fieldNames?: TreeFieldNames;\n  selectable?: SelectableType;\n  showLine?: boolean;\n  blockNode?: boolean;\n  checkable?: CheckableType;\n  loadMore?: LoadMore;\n  draggable?: boolean;\n}) {\n  const {\n    treeData: propTreeData,\n    fieldNames,\n    selectable,\n    showLine,\n    blockNode,\n    checkable,\n    loadMore,\n    draggable,\n  } = toRefs(props);\n\n  const treeData = ref<Node[]>([]);\n\n  watchEffect(() => {\n    treeData.value = generateTreeData(propTreeData.value || [], {\n      selectable: selectable?.value ?? false,\n      showLine: !!showLine?.value,\n      blockNode: !!blockNode?.value,\n      checkable: checkable?.value ?? false,\n      fieldNames: fieldNames?.value,\n      loadMore: !!loadMore?.value,\n      draggable: !!draggable?.value,\n    });\n  });\n\n  const flattenTreeData = computed(() => getFlattenTreeData(treeData.value));\n  const key2TreeNode = computed(() => getKey2TreeNode(flattenTreeData.value));\n\n  return { treeData, flattenTreeData, key2TreeNode };\n}\n"
  },
  {
    "path": "packages/web-vue/components/tree/index.ts",
    "content": "import { App } from 'vue';\nimport { ArcoOptions } from '../_utils/types';\nimport { getComponentPrefix, setGlobalConfig } from '../_utils/global-config';\nimport _Tree from './tree.vue';\n\nexport type { TreeNodeData, TreeFieldNames } from './interface';\n\nconst Tree = Object.assign(_Tree, {\n  install: (app: App, options?: ArcoOptions) => {\n    setGlobalConfig(app, options);\n    const componentPrefix = getComponentPrefix(options);\n\n    app.component(componentPrefix + _Tree.name, _Tree);\n  },\n});\n\nexport type TreeInstance = InstanceType<typeof _Tree>;\n\nexport default Tree;\n"
  },
  {
    "path": "packages/web-vue/components/tree/interface.ts",
    "content": "import { Slot, VNode } from 'vue';\nimport { VirtualListProps } from '../_components/virtual-list-v2/interface';\nimport { Size } from '../_utils/constant';\n\nexport type TreeNodeKey = number | string;\n\nexport interface TreeNodeData {\n  /**\n   * @zh 唯一标示\n   * @en Unique key\n   * */\n  key?: string | number;\n  /**\n   * @zh 该节点显示的标题\n   * @en The title of the node\n   * */\n  title?: string;\n  /**\n   * @zh 是否允许选中\n   * @en Whether to allow selection\n   * */\n  selectable?: boolean;\n  /**\n   * @zh 是否禁用节点\n   * @en Whether to disable the node\n   * */\n  disabled?: boolean;\n  /**\n   * @zh 是否禁用复选框\n   * @en Whether to disable the checkbox\n   * */\n  disableCheckbox?: boolean;\n  /**\n   * @zh 是否显示多选框\n   * @en Whether to show checkbox\n   * */\n  checkable?: boolean;\n  /**\n   * @zh 是否可以拖拽\n   * @en Whether it can be dragged\n   * */\n  draggable?: boolean;\n  /**\n   * @zh 是否是叶子节点。动态加载时有效\n   * @en Whether it is a leaf node. Effective when loading dynamically\n   * */\n  isLeaf?: boolean;\n  /**\n   * @zh 节点的图标\n   * @en Node icon\n   * */\n  icon?: () => VNode;\n  /**\n   * @zh 定制 switcher 图标，优先级大于 tree\n   * @en Custom switcher icon, priority is greater than tree\n   * */\n  switcherIcon?: () => VNode;\n  /**\n   * @zh 定制 loading 图标，优先级大于 tree\n   * @en Customize loading icon, priority is greater than tree\n   * */\n  loadingIcon?: () => VNode;\n  /**\n   * @zh 定制 drag 图标，优先级大于 tree\n   * @en Custom drag icon, priority is greater than tree\n   * */\n  dragIcon?: () => VNode;\n  /**\n   * @zh 子节点\n   * @en Child node\n   * */\n  children?: TreeNodeData[];\n}\n\nexport interface TreeNodeProps extends Omit<TreeNodeData, 'children'> {\n  selectable: boolean;\n  disabled: boolean;\n  disableCheckbox: boolean;\n  checkable: boolean;\n  draggable: boolean;\n  isLeaf: boolean;\n  isTail: boolean;\n  blockNode: boolean;\n  showLine: boolean;\n  level: number;\n  lineless: boolean[];\n}\n\nexport interface Node extends TreeNodeProps {\n  key: TreeNodeKey;\n  treeNodeProps: TreeNodeProps;\n  treeNodeData: TreeNodeData;\n  parent?: Node;\n  parentKey?: TreeNodeKey;\n  pathParentKeys: TreeNodeKey[];\n  children?: Node[];\n}\n\nexport type FilterTreeNode = (node: TreeNodeData) => boolean;\n\nexport interface TreeFieldNames {\n  /**\n   * @zh 指定 key 在 TreeNodeData 中的字段名\n   * @en Specify the field name of key in TreeNodeData\n   * @defaultValue key\n   */\n  key?: string;\n  /**\n   * @zh 指定 title 在 TreeNodeData 中的字段名\n   * @en Specify the field name of title in TreeNodeData\n   * @defaultValue title\n   */\n  title?: string;\n  /**\n   * @zh 指定 disabled 在 TreeNodeData 中的字段名\n   * @en Specify the field name of disabled in TreeNodeData\n   * @defaultValue disabled\n   */\n  disabled?: string;\n  /**\n   * @zh 指定 children 在 TreeNodeData 中的字段名\n   * @en Specify the field name of children in TreeNodeData\n   * @defaultValue children\n   */\n  children?: string;\n  /**\n   * @zh 指定 isLeaf 在 TreeNodeData 中的字段名\n   * @en Specify the field name of isLeaf in TreeNodeData\n   * @defaultValue isLeaf\n   */\n  isLeaf?: string;\n  /**\n   * @zh 指定 disableCheckbox 在 TreeNodeData 中的字段名\n   * @en Specify the field name of disableCheckbox in TreeNodeData\n   * @defaultValue disableCheckbox\n   */\n  disableCheckbox?: string;\n  /**\n   * @zh 指定 checkable 在 TreeNodeData 中的字段名\n   * @en Specify the field name of checkable in TreeNodeData\n   * @defaultValue checkable\n   */\n  checkable?: string;\n  /**\n   * @zh 指定 icon 在 TreeNodeData 中的字段名\n   * @en Specify the field name of icon in TreeNodeData\n   * @defaultValue checkable\n   */\n  icon?: string;\n}\n\nexport type LoadMore = (node: TreeNodeData) => Promise<void>;\nexport type DropPosition = -1 | 0 | 1;\nexport type CheckedStrategy = 'all' | 'parent' | 'child';\nexport type CheckableType =\n  | boolean\n  | ((\n      node: TreeNodeData,\n      info: {\n        level: number;\n        isLeaf: boolean;\n      }\n    ) => boolean);\nexport type SelectableType = CheckableType;\n\nexport interface TreeProps {\n  size: Size;\n  blockNode: boolean;\n  defaultExpandAll: boolean;\n  multiple: boolean;\n  checkable: CheckableType;\n  draggable: boolean;\n  allowDrop?: (options: {\n    dropNode: TreeNodeData;\n    dropPosition: DropPosition;\n  }) => boolean;\n  selectable: SelectableType;\n  checkStrictly: boolean;\n  checkedStrategy: CheckedStrategy;\n  defaultSelectedKeys?: TreeNodeKey[];\n  selectedKeys?: TreeNodeKey[];\n  defaultCheckedKeys?: TreeNodeKey[];\n  checkedKeys?: TreeNodeKey[];\n  halfCheckedKeys: TreeNodeKey[] | undefined;\n  defaultExpandedKeys?: TreeNodeKey[];\n  expandedKeys?: TreeNodeKey[];\n  data: TreeNodeData[];\n  fieldNames?: TreeFieldNames;\n  virtualListProps?: VirtualListProps;\n  showLine: boolean;\n  loadMore?: LoadMore;\n  defaultExpandSelected?: boolean;\n  defaultExpandChecked?: boolean;\n  autoExpandParent?: boolean;\n  onlyCheckLeaf: boolean;\n  animation: boolean;\n  actionOnNodeClick?: 'expand';\n  disableSelectActionOnly: boolean;\n  dragIcon?: Slot;\n  switcherIcon?: Slot;\n  loadingIcon?: Slot;\n  extra?: Slot;\n  title?: Slot;\n  onSelect?: (\n    selectedKeys: TreeNodeKey[],\n    event: {\n      selected?: boolean;\n      selectedNodes: TreeNodeData[];\n      node?: TreeNodeData;\n      e?: Event;\n    }\n  ) => void;\n  onCheck?: (\n    checkedKeys: TreeNodeKey[],\n    event: {\n      checked?: boolean;\n      checkedNodes: TreeNodeData[];\n      node?: TreeNodeData;\n      halfCheckedKeys: TreeNodeKey[];\n      halfCheckedNodes: TreeNodeData[];\n      e?: Event;\n    }\n  ) => void;\n  onExpand?: (\n    expandedKeys: TreeNodeKey[],\n    event: {\n      expanded: boolean;\n      expandedNodes: TreeNodeData[];\n      node: TreeNodeData;\n      e?: Event;\n    }\n  ) => void;\n  onDragStart?: (e: DragEvent, node: TreeNodeData) => void;\n  onDragEnd?: (e: DragEvent, node: TreeNodeData) => void;\n  onDragOver?: (e: DragEvent, node: TreeNodeData) => void;\n  onDragLeave?: (e: DragEvent, node: TreeNodeData) => void;\n  onDrop?: (event: {\n    e: DragEvent;\n    dragNode: TreeNodeData;\n    dropNode: TreeNodeData;\n    dropPosition: DropPosition;\n  }) => void;\n  filterTreeNode?: (node: TreeNodeData) => boolean;\n}\n\nexport type Key2TreeNode = Map<TreeNodeKey, Node>;\n"
  },
  {
    "path": "packages/web-vue/components/tree/node-switcher.vue",
    "content": "<script lang=\"tsx\">\nimport { defineComponent, h, PropType, toRefs, VNode } from 'vue';\nimport RenderFunction from '../_components/render-function';\nimport IconLoading from '../icon/icon-loading';\nimport IconHover from '../_components/icon-hover.vue';\nimport IconCaretDown from '../icon/icon-caret-down';\nimport IconFile from '../icon/icon-file';\nimport useTreeContext from './hooks/use-tree-context';\nimport usePickSlots from '../_hooks/use-pick-slots';\nimport { TreeNodeData } from './interface';\n\nexport default defineComponent({\n  name: 'TreeNodeSwitcher',\n  components: {\n    IconLoading,\n    RenderFunction,\n  },\n  props: {\n    prefixCls: String,\n    loading: Boolean,\n    showLine: Boolean,\n    treeNodeData: {\n      type: Object as PropType<TreeNodeData>,\n    },\n    icons: {\n      type: Object as PropType<Record<string, (() => VNode) | undefined>>,\n    },\n    nodeStatus: {\n      type: Object as PropType<{\n        loading?: boolean;\n        checked?: boolean;\n        selected?: boolean;\n        expanded?: boolean;\n        indeterminate?: boolean;\n        isLeaf?: boolean;\n      }>,\n    },\n  },\n  emits: ['click'],\n  setup(props, { slots, emit }) {\n    const { icons, nodeStatus, treeNodeData } = toRefs(props);\n    const treeContext = useTreeContext();\n\n    const nodeSwitcherIcon = usePickSlots(slots, 'switcher-icon');\n    const nodeLoadingIcon = usePickSlots(slots, 'loading-icon');\n\n    return {\n      getSwitcherIcon: () => {\n        const icon = icons?.value?.switcherIcon ?? nodeSwitcherIcon.value;\n        return icon\n          ? icon(nodeStatus.value)\n          : treeContext.switcherIcon?.(treeNodeData.value, nodeStatus.value);\n      },\n      getLoadingIcon: () => {\n        const icon = icons?.value?.loadingIcon ?? nodeLoadingIcon.value;\n        return icon\n          ? icon(nodeStatus.value)\n          : treeContext.loadingIcon?.(treeNodeData.value, nodeStatus.value);\n      },\n      onClick(e: Event) {\n        emit('click', e);\n      },\n    };\n  },\n  render() {\n    const {\n      prefixCls,\n      getSwitcherIcon,\n      getLoadingIcon,\n      onClick,\n      nodeStatus = {},\n      loading,\n      showLine,\n    } = this;\n\n    const { expanded, isLeaf } = nodeStatus;\n\n    if (loading) {\n      return getLoadingIcon() ?? h(IconLoading);\n    }\n\n    let icon = null;\n    let needIconHover = false;\n\n    if (!isLeaf) {\n      const defaultIcon = showLine\n        ? h('span', {\n            class: `${prefixCls}-${expanded ? 'minus' : 'plus'}-icon`,\n          })\n        : h(IconCaretDown);\n      icon = getSwitcherIcon() ?? defaultIcon;\n      needIconHover = !showLine;\n    } else if (showLine) {\n      icon = getSwitcherIcon() ?? h(IconFile);\n    }\n\n    if (!icon) return null;\n\n    const content = h(\n      'span',\n      { class: `${prefixCls}-switcher-icon`, onClick },\n      icon\n    );\n    return needIconHover\n      ? h(\n          IconHover,\n          {\n            class: `${prefixCls}-icon-hover`,\n          },\n          () => content\n        )\n      : content;\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/tree/node.tsx",
    "content": "import { defineComponent } from 'vue';\nimport { TreeNodeProps } from './interface';\nimport BaseTreeNode from './base-node.vue';\nimport useNodeKey from './hooks/use-node-key';\nimport TransitionNodeList from './transition-node-list.vue';\n\nexport default defineComponent({\n  name: 'TreeNode',\n  inheritAttrs: false,\n  props: {\n    ...BaseTreeNode.props,\n  },\n  setup(props, { slots, attrs }) {\n    const key = useNodeKey();\n\n    return () => {\n      return (\n        <>\n          <BaseTreeNode {...props} {...attrs} key={key.value} v-slots={slots} />\n          <TransitionNodeList key={key.value} nodeKey={key.value} />\n        </>\n      );\n    };\n  },\n});\n"
  },
  {
    "path": "packages/web-vue/components/tree/style/index.less",
    "content": "@import './token.less';\n@import '../../style/mixins/index.less';\n\n@tree-prefix-cls: ~'@{prefix}-tree';\n@tree-node-prefix-cls: ~'@{prefix}-tree-node';\n\n/******* icon ******/\n\n.icon-hover(@tree-node-prefix-cls, @tree-size-default-icon-size, @tree-size-expand-icon-bg_hover);\n\n.getLinePos(@size) {\n  top: (@size / 2) + (@tree-showline-size-switcher-icon / 2) +\n    @tree-showline-spacing-line-vertical;\n  bottom: min(\n    -((@size / 2) - (@tree-showline-size-switcher-icon / 2) -\n          @tree-showline-spacing-line-vertical),\n    0\n  );\n}\n\n.getIndentLinePos(@size) {\n  top: @tree-showline-spacing-line-vertical -\n    ((@size / 2) - (@tree-showline-size-switcher-icon / 2));\n  // 计算：距离上一节点的图标和下一节点的图标都是 @tree-showline-spacing-line-vertical\n  bottom: min(\n    -((@size / 2) - (@tree-showline-size-switcher-icon / 2) -\n          @tree-showline-spacing-line-vertical),\n    0\n  );\n}\n\n.@{tree-node-prefix-cls} {\n  &-switcher {\n    position: relative;\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    width: @tree-size-default-icon-size;\n    height: @tree-size-default-line-height;\n    margin-right: @tree-margin-switcher-icon-right;\n    color: @tree-color-switcher-icon;\n    font-size: @tree-size-default-icon-size;\n    cursor: pointer;\n    user-select: none;\n\n    &-icon {\n      position: relative;\n      margin: 0 auto;\n\n      svg {\n        position: relative;\n        transform: rotate(-90deg);\n        transition: transform @transition-duration-2\n          @transition-timing-function-standard;\n      }\n    }\n  }\n\n  &-expanded &-switcher-icon svg,\n  &-is-leaf &-switcher-icon svg {\n    transform: rotate(0);\n  }\n\n  &-drag-icon {\n    margin-left: @tree-spacing-drag-icon-text;\n    color: @tree-color-drag-icon;\n    opacity: 0;\n  }\n\n  // 自定义icon\n  &-custom-icon {\n    margin-right: @tree-margin-custom-icon-right;\n    font-size: inherit;\n    line-height: 1;\n    cursor: pointer;\n    user-select: none;\n  }\n\n  .@{prefix}-icon-loading {\n    color: @tree-color-loading-icon;\n  }\n\n  &-minus-icon,\n  &-plus-icon {\n    position: relative;\n    display: block;\n    width: @tree-showline-size-switcher-icon;\n    height: @tree-showline-size-switcher-icon;\n    background: @tree-showline-color-plus-icon-bg;\n    border-radius: @tree-showline-border-plus-icon-radius;\n    cursor: pointer;\n\n    &::after {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      display: block;\n      width: @tree-showline-size-plus-icon-width;\n      height: @tree-showline-size-plus-icon-stroke;\n      margin-top: -(@tree-showline-size-plus-icon-stroke / 2);\n      margin-left: -(@tree-showline-size-plus-icon-width / 2);\n      color: @tree-color-switcher-icon;\n      background-color: @tree-color-switcher-icon;\n      border-radius: 0.5px;\n      content: '';\n    }\n  }\n\n  &-plus-icon::before {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    display: block;\n    width: @tree-showline-size-plus-icon-stroke;\n    height: @tree-showline-size-plus-icon-width;\n    margin-top: -(@tree-showline-size-plus-icon-width / 2);\n    margin-left: -(@tree-showline-size-plus-icon-stroke / 2);\n    color: @tree-color-switcher-icon;\n    background-color: @tree-color-switcher-icon;\n    border-radius: 0.5px;\n    content: '';\n  }\n}\n\n/******* tree ***********/\n.@{tree-prefix-cls} {\n  color: @tree-color-title-text;\n\n  .@{prefix}-checkbox {\n    margin-right: @tree-margin-checkbox-right;\n    padding-left: 0;\n    line-height: @tree-size-default-line-height;\n  }\n\n  &-node {\n    position: relative;\n    display: flex;\n    flex-wrap: nowrap;\n    align-items: center;\n    padding-left: (@tree-size-expand-icon-bg_hover / 2) -\n      (@tree-size-default-icon-size / 2);\n    color: @tree-color-title-text;\n    line-height: @line-height-base;\n    cursor: pointer;\n\n    &-selected &-title,\n    &-selected &-title:hover {\n      color: @tree-color-title-text_active;\n      transition: color @transition-duration-2\n        @transition-timing-function-linear;\n    }\n\n    &-disabled-selectable,\n    &-disabled {\n      .@{tree-node-prefix-cls}-title,\n      .@{tree-node-prefix-cls}-title:hover {\n        color: @tree-color-title-text_disabled;\n        background: none;\n        cursor: not-allowed;\n      }\n    }\n\n    &-disabled&-selected &-title {\n      color: @tree-color-title-text_active_disabled;\n    }\n  }\n\n  &-node-title-block {\n    flex: 1;\n    box-sizing: content-box;\n\n    .@{tree-node-prefix-cls}-drag-icon {\n      position: absolute;\n      right: @tree-spacing-drag-icon-right;\n    }\n  }\n\n  &-node-indent {\n    position: relative;\n    flex-shrink: 0;\n    align-self: stretch;\n  }\n\n  &-node-indent-block {\n    position: relative;\n    display: inline-block;\n    width: @tree-size-default-icon-size;\n    height: 100%;\n    margin-right: @tree-margin-switcher-icon-right;\n    vertical-align: top;\n  }\n\n  &-node-draggable {\n    margin-top: @tree-draggable-size-gap-height;\n  }\n\n  &-node-title {\n    position: relative;\n    display: flex;\n    align-items: center;\n    margin-left: -@tree-padding-title-horizontal;\n    padding: (\n        round((@tree-size-default-line-height - @line-height-base * $font-size)) /\n          2\n      )\n      0;\n    padding-right: @tree-padding-title-horizontal;\n    padding-left: @tree-padding-title-horizontal;\n    font-size: @tree-size-default-font-size;\n    border-radius: @tree-node-border-radius;\n\n    // overflow: hidden;\n    &:hover {\n      color: @tree-color-title-text_hover;\n      background-color: @tree-color-title-bg_hover;\n\n      .@{tree-node-prefix-cls}-drag-icon {\n        opacity: 1;\n      }\n    }\n\n    // &-draggable {\n    //   margin-top: @tree-draggable-size-gap-height;\n    // }\n    &-draggable::before {\n      position: absolute;\n      top: -@tree-draggable-size-gap-height;\n      right: 0;\n      left: 0;\n      display: block;\n      height: @tree-draggable-size-gap-height;\n      border-radius: (@tree-draggable-size-gap-height / 2);\n      content: '';\n    }\n\n    &-gap-bottom::before {\n      top: unset;\n      bottom: -@tree-draggable-size-gap-height;\n      background-color: @tree-draggable-color-gap-bg;\n    }\n\n    &-gap-top::before {\n      background-color: @tree-draggable-color-gap-bg;\n    }\n\n    &-highlight {\n      color: @tree-color-title-text_highlight;\n      background-color: @tree-color-title-bg_highlight;\n    }\n\n    &-dragging,\n    &-dragging:hover {\n      color: @tree-color-title-text_dragging;\n      background-color: @tree-color-title-bg_dragging;\n    }\n  }\n\n  // show line\n  &-show-line {\n    padding-left: (@tree-size-expand-icon-bg_hover / 2) -\n      (@tree-showline-size-switcher-icon / 2);\n\n    .@{tree-prefix-cls}-node-switcher {\n      width: @tree-showline-size-switcher-icon;\n      text-align: center;\n\n      .@{prefix}-tree-node-icon-hover {\n        width: 100%;\n      }\n    }\n\n    .@{tree-prefix-cls}-node-indent-block {\n      width: @tree-showline-size-switcher-icon;\n    }\n\n    .@{tree-prefix-cls}-node-indent-block::before {\n      position: absolute;\n      left: 50%;\n      box-sizing: border-box;\n      width: @tree-showline-size-line-width;\n      border-left: @tree-showline-size-line-width @tree-showline-style-line\n        @tree-showline-color-line-bg;\n      transform: translateX(-50%);\n      content: '';\n\n      .getIndentLinePos(@tree-size-default-line-height);\n    }\n\n    .@{tree-prefix-cls}-node-is-leaf:not(.@{tree-prefix-cls}-node-is-tail)\n      .@{tree-prefix-cls}-node-indent::after {\n      position: absolute;\n      right: -(@tree-showline-size-switcher-icon / 2);\n      box-sizing: border-box;\n      width: @tree-showline-size-line-width;\n      border-left: @tree-showline-size-line-width @tree-showline-style-line\n        @tree-showline-color-line-bg;\n      transform: translateX(50%);\n      content: '';\n\n      .getLinePos(@tree-size-default-line-height);\n    }\n\n    .@{tree-prefix-cls}-node-indent-block-lineless:before {\n      display: none;\n    }\n  }\n}\n\n/******** size *******/\n\n.@{tree-prefix-cls}-size-mini {\n  .@{tree-prefix-cls}-node-switcher {\n    height: @tree-size-mini-line-height;\n  }\n\n  .@{prefix}-checkbox {\n    line-height: @tree-size-mini-line-height;\n  }\n\n  .@{tree-prefix-cls}-node-title {\n    padding-top: (\n      round((@tree-size-mini-line-height - $line-height * $font-size)) / 2\n    );\n    padding-bottom: $padding-top;\n    font-size: @tree-size-mini-font-size;\n    line-height: 1.667;\n  }\n\n  .@{tree-prefix-cls}-node-indent-block::after {\n    .getLinePos(@tree-size-mini-line-height);\n  }\n\n  .@{tree-prefix-cls}-node-is-leaf:not(.@{tree-prefix-cls}-node-is-tail)\n    .@{tree-prefix-cls}-node-indent::before {\n    .getIndentLinePos(@tree-size-mini-line-height);\n  }\n}\n\n.@{tree-prefix-cls}-size-small {\n  .@{tree-prefix-cls}-node-switcher {\n    height: @tree-size-small-line-height;\n  }\n\n  .@{prefix}-checkbox {\n    line-height: @tree-size-small-line-height;\n  }\n\n  .@{tree-prefix-cls}-node-title {\n    padding-top: (\n      round((@tree-size-small-line-height - @line-height-base * $font-size)) / 2\n    );\n    padding-bottom: $padding-top;\n    font-size: @tree-size-small-font-size;\n  }\n\n  .@{tree-prefix-cls}-node-indent-block::after {\n    .getLinePos(@tree-size-small-line-height);\n  }\n\n  .@{tree-prefix-cls}-node-is-leaf:not(.@{tree-prefix-cls}-node-is-tail)\n    .@{tree-prefix-cls}-node-indent::before {\n    .getIndentLinePos(@tree-size-small-line-height);\n  }\n}\n\n.@{tree-prefix-cls}-size-large {\n  .@{tree-prefix-cls}-node-switcher {\n    height: @tree-size-large-line-height;\n  }\n\n  .@{prefix}-checkbox {\n    line-height: @tree-size-large-line-height;\n  }\n\n  .@{tree-prefix-cls}-node-title {\n    padding-top: (\n      round((@tree-size-large-line-height - @line-height-base * $font-size)) / 2\n    );\n    padding-bottom: $padding-top;\n    font-size: @tree-size-large-font-size;\n  }\n\n  .@{tree-prefix-cls}-node-indent-block::after {\n    .getLinePos(@tree-size-large-line-height);\n  }\n\n  .@{tree-prefix-cls}-node-is-leaf:not(.@{tree-prefix-cls}-node-is-tail)\n    .@{tree-prefix-cls}-node-indent::before {\n    .getIndentLinePos(@tree-size-large-line-height);\n  }\n}\n\n.@{tree-prefix-cls}-node-list {\n  overflow: hidden;\n  transition: height @transition-duration-2 @transition-timing-function-standard;\n}\n"
  },
  {
    "path": "packages/web-vue/components/tree/style/index.ts",
    "content": "import '../../style/index.less';\nimport '../../checkbox/style';\nimport './index.less';\n"
  },
  {
    "path": "packages/web-vue/components/tree/style/token.less",
    "content": "@import '../../style/theme/index.less';\n\n@tree-color-title-text: var(~'@{arco-cssvars-prefix}-color-text-1');\n@tree-color-title-text_hover: var(~'@{arco-cssvars-prefix}-color-text-1');\n@tree-color-title-text_active: @color-primary-6;\n@tree-color-title-text_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');\n@tree-color-title-text_active_disabled: var(~'@{arco-cssvars-prefix}-color-primary-light-3');\n@tree-color-title-bg_hover: var(~'@{arco-cssvars-prefix}-color-fill-2');\n@tree-color-title-bg_highlight: var(~'@{arco-cssvars-prefix}-color-primary-light-1');\n@tree-color-title-text_highlight: var(~'@{arco-cssvars-prefix}-color-text-1');\n@tree-color-title-bg_dragging: var(~'@{arco-cssvars-prefix}-color-fill-1');\n@tree-color-title-text_dragging: var(~'@{arco-cssvars-prefix}-color-text-4');\n\n@tree-color-loading-icon: @color-primary-6;\n@tree-color-switcher-icon: var(~'@{arco-cssvars-prefix}-color-text-2');\n@tree-color-drag-icon: @color-primary-6;\n@tree-node-border-radius: @radius-small;\n@tree-margin-checkbox-right: @spacing-5;\n@tree-margin-switcher-icon-right: @spacing-5;\n@tree-margin-custom-icon-right: @spacing-5;\n@tree-padding-title-horizontal: @spacing-2;\n@tree-spacing-drag-icon-right: @spacing-6;\n@tree-spacing-drag-icon-text: @spacing-22;\n\n@tree-draggable-color-gap-bg: @color-primary-6;\n@tree-draggable-size-gap-height: 2px;\n@tree-showline-color-line-bg: var(~'@{arco-cssvars-prefix}-color-neutral-3');\n@tree-showline-color-plus-icon-bg: var(~'@{arco-cssvars-prefix}-color-fill-2');\n@tree-showline-size-plus-icon-stroke: 2px;\n@tree-showline-size-plus-icon-width: 6px;\n@tree-showline-size-line-width: @border-1;\n@tree-showline-style-line: @border-solid;\n@tree-showline-size-switcher-icon: 14px;\n@tree-showline-spacing-line-vertical: @spacing-2;\n@tree-showline-border-plus-icon-radius: @radius-small;\n\n@tree-size-mini-icon-size: @size-3;\n@tree-size-small-icon-size: @size-3;\n@tree-size-default-icon-size: @size-3;\n@tree-size-large-icon-size: @size-3;\n@tree-size-expand-icon-bg_hover: @size-4;\n\n@tree-size-mini-font-size: @font-size-body-1;\n@tree-size-small-font-size: @font-size-body-3;\n@tree-size-default-font-size: @font-size-body-3;\n@tree-size-large-font-size: @font-size-body-3;\n\n@tree-size-mini-line-height: @size-mini;\n@tree-size-small-line-height: @size-small;\n@tree-size-default-line-height: @size-default;\n@tree-size-large-line-height: @size-large;\n"
  },
  {
    "path": "packages/web-vue/components/tree/transition-node-list.vue",
    "content": "<template>\n  <ExpandTransition :expanded=\"expanded\" @end=\"onTransitionEnd\">\n    <div v-if=\"show\" :class=\"classNames\">\n      <BaseTreeNode\n        v-for=\"node in visibleNodeList\"\n        :key=\"node.key\"\n        v-bind=\"node.treeNodeProps\"\n      />\n    </div>\n  </ExpandTransition>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, PropType, toRefs } from 'vue';\nimport ExpandTransition from './expand-transition.vue';\nimport { getPrefixCls } from '../_utils/global-config';\nimport useTreeContext from './hooks/use-tree-context';\nimport BaseTreeNode from './base-node.vue';\nimport { TreeNodeKey } from './interface';\n\nexport default defineComponent({\n  name: 'TransitionNodeList',\n  components: {\n    ExpandTransition,\n    BaseTreeNode,\n  },\n  props: {\n    nodeKey: {\n      type: [String, Number] as PropType<TreeNodeKey>,\n      required: true,\n    },\n  },\n  setup(props) {\n    const prefixCls = getPrefixCls('tree');\n    const classNames = [`${prefixCls}-node-list`];\n\n    const treeContext = useTreeContext();\n\n    const { nodeKey } = toRefs(props);\n\n    const expanded = computed(() =>\n      treeContext.expandedKeys?.includes?.(nodeKey.value)\n    );\n\n    const visibleNodeList = computed(() => {\n      const expandedKeysSet = new Set(treeContext.expandedKeys || []);\n      const childNodeList = treeContext.flattenTreeData?.filter((node) => {\n        if (node.pathParentKeys?.includes(nodeKey.value)) {\n          return (\n            !treeContext.filterTreeNode ||\n            treeContext.filterTreeNode?.(node.treeNodeData)\n          );\n        }\n        return false;\n      });\n\n      return childNodeList?.filter((node) => {\n        if (expanded.value) {\n          // When expanding, only when each parent node is in expanded state will it be displayed by itself\n          return node.pathParentKeys?.every((_key) =>\n            expandedKeysSet.has(_key)\n          );\n        }\n        // When collapsed, only when all the parent nodes after the position corresponding to the nodeKey are in the expanded state, will they be displayed\n        const index = node.pathParentKeys.indexOf(nodeKey.value);\n        return node.pathParentKeys\n          .slice(index + 1)\n          .every((_key) => expandedKeysSet.has(_key));\n      });\n    });\n\n    const show = computed(\n      () =>\n        treeContext.currentExpandKeys?.includes(nodeKey.value) &&\n        visibleNodeList.value?.length\n    );\n\n    return {\n      classNames,\n      visibleNodeList,\n      show,\n      expanded,\n      onTransitionEnd() {\n        treeContext.onExpandEnd?.(nodeKey.value);\n      },\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/tree/tree.vue",
    "content": "<template>\n  <div :class=\"classNames\">\n    <VirtualList\n      v-if=\"virtualListProps\"\n      ref=\"virtualListRef\"\n      v-bind=\"virtualListProps\"\n      :data=\"visibleTreeNodeList\"\n    >\n      <template #item=\"{ item: node }\">\n        <TreeNode\n          :key=\"`${searchValue}-${node.key}`\"\n          v-bind=\"node.treeNodeProps\"\n        />\n      </template>\n    </VirtualList>\n    <template v-else>\n      <TreeNode\n        v-for=\"node in visibleTreeNodeList\"\n        :key=\"node.key\"\n        v-bind=\"node.treeNodeProps\"\n      />\n    </template>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport {\n  defineComponent,\n  computed,\n  provide,\n  reactive,\n  PropType,\n  toRefs,\n  ref,\n} from 'vue';\nimport { getPrefixCls } from '../_utils/global-config';\nimport { TreeInjectionKey } from './context';\nimport usePickSlots from '../_hooks/use-pick-slots';\nimport type {\n  TreeFieldNames,\n  TreeNodeData,\n  FilterTreeNode,\n  DropPosition,\n  TreeNodeKey,\n  CheckedStrategy,\n  Node,\n} from './interface';\nimport { isLeafNode, isNodeExpandable, isNodeSelectable } from './utils';\nimport { getCheckedStateByCheck, isNodeCheckable } from './utils/check-utils';\nimport TreeNode from './node';\nimport { isArray, isFunction, isUndefined } from '../_utils/is';\nimport useMergeState from '../_hooks/use-merge-state';\nimport useCheckedState from './hooks/use-checked-state';\nimport useTreeData from './hooks/use-tree-data';\nimport VirtualList from '../_components/virtual-list-v2';\nimport type {\n  VirtualListProps,\n  ScrollIntoViewOptions,\n} from '../_components/virtual-list-v2/interface';\n\nexport default defineComponent({\n  name: 'Tree',\n  components: {\n    VirtualList,\n    TreeNode,\n  },\n  props: {\n    /**\n     * @zh 尺寸\n     * @en Size\n     */\n    size: {\n      type: String as PropType<'mini' | 'small' | 'medium' | 'large'>,\n      default: 'medium',\n    },\n    /**\n     * @zh 节点是否占据一行\n     * @en Whether the node occupies a row\n     */\n    blockNode: {\n      type: Boolean,\n    },\n    /**\n     * @zh 是否默认展开父节点\n     * @en Whether to expand the parent node by default\n     */\n    defaultExpandAll: {\n      type: Boolean,\n      default: true,\n    },\n    /**\n     * @zh 是否支持多选\n     * @en Whether to support multiple selection\n     */\n    multiple: {\n      type: Boolean,\n    },\n    /**\n     * @zh 是否在节点前添加复选框，从 `2.27.0` 开始支持函数格式\n     * @en Whether to add a checkbox before the node, function format is supported since `2.27.0`\n     */\n    checkable: {\n      type: [Boolean, String, Function] as PropType<\n        | boolean\n        | ((\n            node: TreeNodeData,\n            info: {\n              level: number;\n              isLeaf: boolean;\n            }\n          ) => boolean)\n      >,\n      default: false,\n    },\n    /**\n     * @zh 是否支持选择，从 `2.27.0` 开始支持函数格式\n     * @en Whether to support selection, function format is supported since `2.27.0`\n     * */\n    selectable: {\n      type: [Boolean, Function] as PropType<\n        | boolean\n        | ((\n            node: TreeNodeData,\n            info: {\n              level: number;\n              isLeaf: boolean;\n            }\n          ) => boolean)\n      >,\n      default: true,\n    },\n    /**\n     * @zh 是否取消父子节点关联\n     * @en Whether to cancel the parent-child node association\n     * */\n    checkStrictly: {\n      type: Boolean,\n    },\n    /**\n     * @zh 定制回填方式 <br/> all: 返回所有选中的节点  <br/> parent: 父子节点都选中时只返回父节点 <br/> child: 只返回子节点\n     * @en Customized backfill method <br/> all: return all selected nodes <br/> parent: return only parent node when both parent and child nodes are selected <br/> child: return only child nodes\n     * */\n    checkedStrategy: {\n      type: String as PropType<'all' | 'parent' | 'child'>,\n      default: 'all',\n    },\n    /**\n     * @zh 默认选中的树节点\n     * @en Tree node selected by default\n     * */\n    defaultSelectedKeys: {\n      type: Array as PropType<Array<string | number>>,\n    },\n    /**\n     * @zh 选中的树节点\n     * @en Selected tree node\n     * @vModel\n     */\n    selectedKeys: {\n      type: Array as PropType<Array<string | number>>,\n    },\n    /**\n     * @zh 默认选中复选框的树节点\n     * @en Tree node with checkbox selected by default\n     * */\n    defaultCheckedKeys: {\n      type: Array as PropType<Array<string | number>>,\n    },\n    /**\n     * @zh 选中复选框的树节点\n     * @en Tree node with check box selected\n     * @vModel\n     */\n    checkedKeys: {\n      type: Array as PropType<Array<string | number>>,\n    },\n    /**\n     * @zh 默认展开的节点\n     * @en Nodes expanded by default\n     * */\n    defaultExpandedKeys: {\n      type: Array as PropType<Array<string | number>>,\n    },\n    /**\n     * @zh 展开的节点\n     * @en Expanded node\n     * @vModel\n     */\n    expandedKeys: {\n      type: Array as PropType<Array<string | number>>,\n    },\n    /**\n     * @zh 传入`data`,生成对应的树结构\n     * @en Pass in `data` to generate the corresponding tree structure\n     * */\n    data: {\n      type: Array as PropType<TreeNodeData[]>,\n      default: () => [],\n    },\n    /**\n     * @zh 指定节点数据中的字段名\n     * @en Specify the field name in the node data\n     * */\n    fieldNames: {\n      type: Object as PropType<TreeFieldNames>,\n    },\n    /**\n     * @zh 是否展示连接线\n     * @en Whether to display the connection line\n     * */\n    showLine: {\n      type: Boolean,\n    },\n    /**\n     * @zh 异步加载数据的回调，返回一个 `Promise`\n     * @en A callback for loading data asynchronously, returning a `Promise`\n     * */\n    loadMore: {\n      type: Function as PropType<(node: TreeNodeData) => Promise<void>>,\n    },\n    /**\n     * @zh 是否可以拖拽\n     * @en Whether it can be dragged\n     * */\n    draggable: {\n      type: Boolean,\n    },\n    /**\n     * @zh 拖拽时是否允许在某节点上释放\n     * @en Whether to allow release on a node when dragging\n     * */\n    allowDrop: {\n      type: Function as PropType<\n        (options: {\n          dropNode: TreeNodeData;\n          dropPosition: -1 | 0 | 1;\n        }) => boolean\n      >,\n    },\n    filterTreeNode: {\n      type: Function as PropType<FilterTreeNode>,\n    },\n    searchValue: {\n      type: String,\n      default: '',\n    },\n    /**\n     * @zh 传递虚拟列表属性，传入此参数以开启虚拟滚动，[VirtualListProps](#VirtualListProps)\n     * @en Pass virtual list properties, pass in this parameter to turn on virtual scrolling, [VirtualListProps](#VirtualListProps)\n     */\n    virtualListProps: {\n      type: Object as PropType<VirtualListProps>,\n    },\n    /**\n     * @zh 是否默认展开已选中节点的父节点\n     * @en Whether to expand the parent node of the selected node by default\n     * @version 2.9.0\n     */\n    defaultExpandSelected: {\n      type: Boolean,\n    },\n    /**\n     * @zh 是否默认展开已选中复选框节点的父节点\n     * @en Whether to expand the parent node of the checked node by default\n     * @version 2.9.0\n     */\n    defaultExpandChecked: {\n      type: Boolean,\n    },\n    /**\n     * @zh 是否自动展开已展开节点的父节点\n     * @en Whether to automatically expand the parent node of the expanded node\n     * @version 2.9.0\n     */\n    autoExpandParent: {\n      type: Boolean,\n      default: true,\n    },\n    /**\n     * @zh 半选状态的节点.仅在 checkable 且 checkStrictly 时生效\n     * @en The keys of half checked. Only valid when checkable and checkStrictly\n     * @version 2.19.0\n     * @vModel\n     */\n    halfCheckedKeys: {\n      type: Array as PropType<Array<string | number>>,\n    },\n    /**\n     * @zh 开启后 checkedKeys 只处理叶子节点，父节点状态由子节点决定（仅在 checkable 且 checkStrictly 为 false 时生效）\n     * @en When enabled, checkedKeys is only for checked leaf nodes, and the status of the parent node is determined by the child node.(Only valid when checkable and checkStrictly is false)\n     * @version 2.21.0\n     */\n    onlyCheckLeaf: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 是否开启展开时的过渡动效\n     * @en Whether to enable expand transition animation\n     * @version 2.21.0\n     */\n    animation: {\n      type: Boolean,\n      default: true,\n    },\n    /**\n     * @zh 点击节点的时候触发的动作\n     * @en The action triggered when the node is clicked\n     * @version 2.27.0\n     */\n    actionOnNodeClick: {\n      type: String as PropType<'expand'>,\n    },\n    // internal\n    disableSelectActionOnly: {\n      type: Boolean,\n      default: false,\n    },\n  },\n  emits: {\n    /**\n     * @zh 点击树节点时触发\n     * @en Triggered when the tree node is clicked\n     * @param {Array<string | number>} selectedKeys\n     * @param {{ selected?: boolean; selectedNodes: TreeNodeData[]; node?: TreeNodeData; e?: Event; }} data\n     */\n    'select': (\n      selectedKeys: (string | number)[],\n      data: {\n        selected?: boolean;\n        selectedNodes: TreeNodeData[];\n        node?: TreeNodeData;\n        e?: Event;\n      }\n    ) => true,\n    'update:selectedKeys': (selectedKeys: (string | number)[]) => true,\n    /**\n     * @zh 点击树节点复选框时触发。`halfCheckedKeys` 和 `halfCheckedNodes` 从 `2.19.0` 开始支持。\n     * @en Triggered when the tree node checkbox is clicked. `halfCheckedKeys` and `halfCheckedNodes` support from `2.19.0`.\n     * @param {Array<string | number>} checkedKeys\n     * @param {{ checked?: boolean; checkedNodes: TreeNodeData[]; node?: TreeNodeData; e?: Event; halfCheckedKeys: (string | number)[]; halfCheckedNodes: TreeNodeData[]; }} data\n     */\n    'check': (\n      checkedKeys: (string | number)[],\n      data: {\n        checked?: boolean;\n        checkedNodes: TreeNodeData[];\n        node?: TreeNodeData;\n        halfCheckedKeys: (string | number)[];\n        halfCheckedNodes: TreeNodeData[];\n        e?: Event;\n      }\n    ) => true,\n    'update:checkedKeys': (checkedKeys: (string | number)[]) => true,\n    'update:halfCheckedKeys': (halfCheckedKeys: (string | number)[]) => true,\n    /**\n     * @zh 展开/关闭\n     * @en Expand/close\n     * @param {Array<string | number>} expandKeys\n     * @param {{ expanded?: boolean; expandNodes: TreeNodeData[]; node?: TreeNodeData; e?: Event; }} data\n     */\n    'expand': (\n      expandKeys: (string | number)[],\n      data: {\n        expanded?: boolean;\n        expandedNodes: TreeNodeData[];\n        node?: TreeNodeData;\n        e?: Event;\n      }\n    ) => true,\n    'update:expandedKeys': (expandKeys: (string | number)[]) => true,\n    /**\n     * @zh 节点开始拖拽\n     * @en Node starts dragging\n     * @param {DragEvent} ev\n     * @param {TreeNodeData} node\n     */\n    'dragStart': (ev: DragEvent, node: TreeNodeData) => true,\n    /**\n     * @zh 节点结束拖拽\n     * @en Node end drag\n     * @param {DragEvent} ev\n     * @param {TreeNodeData} node\n     */\n    'dragEnd': (ev: DragEvent, node: TreeNodeData) => true,\n    /**\n     * @zh 节点被拖拽至可释放目标\n     * @en The node is dragged to the releasable target\n     * @param {DragEvent} ev\n     * @param {TreeNodeData} node\n     */\n    'dragOver': (ev: DragEvent, node: TreeNodeData) => true,\n    /**\n     * @zh 节点离开可释放目标\n     * @en Node leaves to release the target\n     * @param {DragEvent} ev\n     * @param {TreeNodeData} node\n     */\n    'dragLeave': (ev: DragEvent, node: TreeNodeData) => true,\n    /**\n     * @zh 节点在可释放目标上释放\n     * @en The node is released on a releasable target\n     * @param {{ e: DragEvent; dragNode: TreeNodeData; dropNode: TreeNodeData; dropPosition: number; }} data\n     */\n    'drop': (data: {\n      e: DragEvent;\n      dragNode: TreeNodeData;\n      dropNode: TreeNodeData;\n      dropPosition: number;\n    }) => true,\n  },\n  /**\n   * @zh 定制节点图标\n   * @en Custom node icon\n   * @slot icon\n   * @binding {TreeNodeData} node\n   * @version 2.18.0\n   */\n  /**\n   * @zh 定制 switcher 图标\n   * @en Custom switcher icon\n   * @slot switcher-icon\n   */\n  /**\n   * @zh 定制 loading 图标\n   * @en Custom loading icon\n   * @slot loading-icon\n   */\n  /**\n   * @zh 定制 drag 图标\n   * @en Custom drag icon\n   * @slot drag-icon\n   * @binding {TreeNodeData} node\n   */\n  /**\n   * @zh 渲染额外的节点内容\n   * @en Render additional node content\n   * @slot extra\n   */\n  /**\n   * @zh 标题\n   * @en Title\n   * @slot title\n   * @binding {string} title\n   */\n  setup(props, { emit, slots }) {\n    const {\n      data: propTreeData,\n      showLine,\n      multiple,\n      loadMore,\n      checkStrictly,\n      checkedKeys: propCheckedKeys,\n      defaultCheckedKeys,\n      selectedKeys: propSelectedKeys,\n      defaultSelectedKeys,\n      expandedKeys: propExpandedKeys,\n      defaultExpandedKeys,\n      checkedStrategy,\n      selectable,\n      checkable,\n      blockNode,\n      fieldNames,\n      size,\n      defaultExpandAll,\n      filterTreeNode,\n      draggable,\n      allowDrop,\n      defaultExpandSelected,\n      defaultExpandChecked,\n      autoExpandParent,\n      halfCheckedKeys,\n      onlyCheckLeaf,\n      animation,\n    } = toRefs(props);\n\n    const prefixCls = getPrefixCls('tree');\n    const classNames = computed(() => [\n      `${prefixCls}`,\n      {\n        [`${prefixCls}-checkable`]: checkable.value,\n        [`${prefixCls}-show-line`]: showLine.value,\n      },\n      `${prefixCls}-size-${size.value}`,\n    ]);\n\n    const switcherIcon = usePickSlots(slots, 'switcher-icon');\n    const loadingIcon = usePickSlots(slots, 'loading-icon');\n    const dragIcon = usePickSlots(slots, 'drag-icon');\n    const nodeIcon = usePickSlots(slots, 'icon');\n    const nodeTitle = usePickSlots(slots, 'title');\n    const nodeExtra = usePickSlots(slots, 'extra');\n\n    const { treeData, flattenTreeData, key2TreeNode } = useTreeData(\n      reactive({\n        treeData: propTreeData,\n        selectable,\n        showLine,\n        blockNode,\n        checkable,\n        fieldNames,\n        loadMore,\n        draggable,\n      })\n    );\n\n    const { checkedKeys, indeterminateKeys, setCheckedState } = useCheckedState(\n      reactive({\n        defaultCheckedKeys,\n        checkedKeys: propCheckedKeys,\n        checkStrictly,\n        key2TreeNode,\n        halfCheckedKeys,\n        onlyCheckLeaf,\n      })\n    );\n    const [selectedKeys, setSelectedState] = useMergeState<TreeNodeKey[]>(\n      defaultSelectedKeys?.value || [],\n      reactive({\n        value: propSelectedKeys,\n      })\n    );\n    const loadingKeys = ref<TreeNodeKey[]>([]);\n\n    const dragNode = ref<Node>();\n\n    function getDefaultExpandedKeys() {\n      if (defaultExpandedKeys?.value) {\n        const expandedKeysSet = new Set<TreeNodeKey>([]);\n        defaultExpandedKeys.value.forEach((_key) => {\n          if (expandedKeysSet.has(_key)) return;\n\n          const node = key2TreeNode.value.get(_key);\n          if (!node) return;\n\n          [\n            ...(autoExpandParent.value ? node.pathParentKeys : []),\n            _key,\n          ].forEach((_key) => expandedKeysSet.add(_key));\n        });\n        return [...expandedKeysSet];\n      }\n      if (defaultExpandAll.value) {\n        return flattenTreeData.value\n          .filter((node) => node.children && node.children.length)\n          .map((node) => node.key);\n      }\n      if (defaultExpandSelected.value || defaultExpandChecked.value) {\n        const expandedKeysSet = new Set<TreeNodeKey>([]);\n        const addToExpandKeysSet = (keys: TreeNodeKey[]) => {\n          keys.forEach((key) => {\n            const node = key2TreeNode.value.get(key);\n            if (!node) return;\n\n            (node.pathParentKeys || []).forEach((k) => expandedKeysSet.add(k));\n          });\n        };\n        if (defaultExpandSelected.value) {\n          addToExpandKeysSet(selectedKeys.value);\n        }\n        if (defaultExpandChecked.value) {\n          addToExpandKeysSet(checkedKeys.value);\n        }\n        return [...expandedKeysSet];\n      }\n      return [];\n    }\n\n    const [expandedKeys, setExpandState] = useMergeState<TreeNodeKey[]>(\n      getDefaultExpandedKeys(),\n      reactive({\n        value: propExpandedKeys,\n      })\n    );\n\n    const currentExpandKeys = ref<TreeNodeKey[]>([]);\n\n    const visibleTreeNodeList = computed(() => {\n      const expandedKeysSet = new Set(expandedKeys.value);\n      const currentExpandKeysSet = new Set(currentExpandKeys.value);\n\n      return flattenTreeData.value.filter((node) => {\n        const passFilter =\n          !filterTreeNode ||\n          !filterTreeNode.value ||\n          filterTreeNode?.value(node.treeNodeData);\n\n        if (!passFilter) return false;\n\n        const isRoot = isUndefined(node.parentKey);\n\n        const isVisibleNode = node.pathParentKeys?.every(\n          (_key) => expandedKeysSet.has(_key) && !currentExpandKeysSet.has(_key)\n        );\n\n        return isRoot || isVisibleNode;\n      });\n    });\n\n    function getPublicCheckedKeys(\n      rawCheckedKeys: TreeNodeKey[],\n      rawCheckedStrategy = checkedStrategy.value\n    ) {\n      let publicCheckedKeys = [...rawCheckedKeys];\n      if (rawCheckedStrategy === 'parent') {\n        publicCheckedKeys = rawCheckedKeys.filter((_key) => {\n          const item = key2TreeNode.value.get(_key);\n          return (\n            item &&\n            !(\n              !isUndefined(item.parentKey) &&\n              rawCheckedKeys.includes(item.parentKey)\n            )\n          );\n        });\n      } else if (rawCheckedStrategy === 'child') {\n        publicCheckedKeys = rawCheckedKeys.filter((_key) => {\n          return !key2TreeNode.value.get(_key)?.children?.length;\n        });\n      }\n      return publicCheckedKeys;\n    }\n\n    function getNodes(keys: TreeNodeKey[]) {\n      return keys\n        .map((key) => key2TreeNode.value.get(key)?.treeNodeData || undefined)\n        .filter(Boolean);\n    }\n\n    function emitCheckEvent(options: {\n      targetKey?: TreeNodeKey;\n      targetChecked?: boolean;\n      newCheckedKeys: TreeNodeKey[];\n      newIndeterminateKeys: TreeNodeKey[];\n      event?: Event;\n    }) {\n      const {\n        targetKey,\n        targetChecked,\n        newCheckedKeys,\n        newIndeterminateKeys,\n        event,\n      } = options;\n      const targetNode = targetKey\n        ? key2TreeNode.value.get(targetKey)\n        : undefined;\n      const publicCheckedKeys = getPublicCheckedKeys(newCheckedKeys);\n      emit('update:checkedKeys', publicCheckedKeys);\n      emit('update:halfCheckedKeys', newIndeterminateKeys);\n      emit('check', publicCheckedKeys, {\n        checked: targetChecked,\n        node: targetNode?.treeNodeData,\n        checkedNodes: getNodes(publicCheckedKeys) as TreeNodeData[],\n        halfCheckedKeys: newIndeterminateKeys,\n        halfCheckedNodes: getNodes(newIndeterminateKeys) as TreeNodeData[],\n        e: event,\n      });\n    }\n\n    function emitSelectEvent(options: {\n      targetKey?: TreeNodeKey;\n      targetSelected?: boolean;\n      newSelectedKeys: TreeNodeKey[];\n      event?: Event;\n    }) {\n      const { targetKey, targetSelected, newSelectedKeys, event } = options;\n      const targetNode = targetKey\n        ? key2TreeNode.value.get(targetKey)\n        : undefined;\n      emit('update:selectedKeys', newSelectedKeys);\n      emit('select', newSelectedKeys, {\n        selected: targetSelected,\n        node: targetNode?.treeNodeData,\n        selectedNodes: getNodes(newSelectedKeys) as TreeNodeData[],\n        e: event,\n      });\n    }\n\n    function emitExpandEvent(options: {\n      targetKey?: TreeNodeKey;\n      targetExpanded?: boolean;\n      newExpandedKeys: TreeNodeKey[];\n      event?: Event;\n    }) {\n      const { targetKey, targetExpanded, newExpandedKeys, event } = options;\n      const targetNode = targetKey\n        ? key2TreeNode.value.get(targetKey)\n        : undefined;\n      emit('expand', newExpandedKeys, {\n        expanded: targetExpanded,\n        node: targetNode?.treeNodeData,\n        expandedNodes: getNodes(newExpandedKeys) as TreeNodeData[],\n        e: event,\n      });\n      emit('update:expandedKeys', newExpandedKeys);\n    }\n\n    function setCheckedKeys(keys: TreeNodeKey[]) {\n      const [newCheckedKeys, newIndeterminateKeys] = setCheckedState(\n        keys,\n        [],\n        true\n      );\n      emitCheckEvent({ newCheckedKeys, newIndeterminateKeys });\n    }\n\n    function setSelectedKeys(keys: TreeNodeKey[]) {\n      let newSelectedKeys = keys;\n      if (!multiple.value && keys.length > 1) {\n        newSelectedKeys = [keys[0]];\n      }\n      setSelectedState(newSelectedKeys);\n      emitSelectEvent({\n        newSelectedKeys,\n      });\n    }\n\n    function setExpandedKeys(keys: TreeNodeKey[]) {\n      currentExpandKeys.value = [];\n      setExpandState(keys);\n      emitExpandEvent({ newExpandedKeys: keys });\n    }\n\n    function checkNodes(\n      keys: TreeNodeKey[],\n      checked: boolean,\n      targetKey?: TreeNodeKey\n    ) {\n      if (!keys.length) return;\n      let newCheckedKeys = [...checkedKeys.value];\n      let newIndeterminateKeys = [...indeterminateKeys.value];\n      keys.forEach((key) => {\n        const node = key2TreeNode.value.get(key);\n        if (node) {\n          [newCheckedKeys, newIndeterminateKeys] = getCheckedStateByCheck({\n            node,\n            checked,\n            checkedKeys: [...newCheckedKeys],\n            indeterminateKeys: [...newIndeterminateKeys],\n            checkStrictly: checkStrictly.value,\n          });\n        }\n      });\n      setCheckedState(newCheckedKeys, newIndeterminateKeys);\n      emitCheckEvent({\n        targetKey,\n        targetChecked: isUndefined(targetKey) ? undefined : checked,\n        newCheckedKeys,\n        newIndeterminateKeys,\n      });\n    }\n\n    function selectNodes(\n      keys: TreeNodeKey[],\n      selected: boolean,\n      targetKey?: TreeNodeKey\n    ) {\n      if (!keys.length) return;\n\n      let newSelectedKeys: TreeNodeKey[];\n\n      if (multiple.value) {\n        const selectedKeysSet = new Set(selectedKeys.value);\n        keys.forEach((key) => {\n          selected ? selectedKeysSet.add(key) : selectedKeysSet.delete(key);\n        });\n        newSelectedKeys = [...selectedKeysSet];\n      } else {\n        newSelectedKeys = selected ? [keys[0]] : [];\n      }\n\n      setSelectedState(newSelectedKeys);\n      emitSelectEvent({\n        targetKey,\n        targetSelected: isUndefined(targetKey) ? undefined : selected,\n        newSelectedKeys,\n      });\n    }\n\n    function expandNodes(\n      keys: TreeNodeKey[],\n      expanded: boolean,\n      targetKey?: TreeNodeKey\n    ) {\n      const expandedKeysSet = new Set(expandedKeys.value);\n\n      keys.forEach((key) => {\n        expanded ? expandedKeysSet.add(key) : expandedKeysSet.delete(key);\n        onExpandEnd(key);\n      });\n      const newExpandedKeys = [...expandedKeysSet];\n\n      setExpandState(newExpandedKeys);\n      emitExpandEvent({\n        targetKey,\n        targetExpanded: isUndefined(targetKey) ? undefined : expanded,\n        newExpandedKeys,\n      });\n    }\n\n    function onCheck(checked: boolean, key: TreeNodeKey, e?: Event) {\n      const node = key2TreeNode.value.get(key);\n      if (!node) return;\n\n      const [newCheckedKeys, newIndeterminateKeys] = getCheckedStateByCheck({\n        node,\n        checked,\n        checkedKeys: checkedKeys.value,\n        indeterminateKeys: indeterminateKeys.value,\n        checkStrictly: checkStrictly.value,\n      });\n\n      setCheckedState(newCheckedKeys, newIndeterminateKeys);\n      emitCheckEvent({\n        targetKey: key,\n        targetChecked: checked,\n        newCheckedKeys,\n        newIndeterminateKeys,\n        event: e,\n      });\n    }\n\n    function onSelect(key: TreeNodeKey, e: Event) {\n      const node = key2TreeNode.value.get(key);\n      if (!node) return;\n\n      let newSelectedKeys: TreeNodeKey[];\n      let selected: boolean;\n\n      if (multiple.value) {\n        const selectedKeysSet = new Set(selectedKeys.value);\n        selected = !selectedKeysSet.has(key);\n\n        selected ? selectedKeysSet.add(key) : selectedKeysSet.delete(key);\n        newSelectedKeys = [...selectedKeysSet];\n      } else {\n        selected = true;\n        newSelectedKeys = [key];\n      }\n\n      setSelectedState(newSelectedKeys);\n      emitSelectEvent({\n        targetKey: key,\n        targetSelected: selected,\n        newSelectedKeys,\n        event: e,\n      });\n    }\n\n    function onExpand(expanded: boolean, key: TreeNodeKey, e?: Event) {\n      // 如果当前 key 节点正在展开/收起，不执行操作。\n      if (currentExpandKeys.value.includes(key)) return;\n\n      const node = key2TreeNode.value.get(key);\n      if (!node) return;\n\n      const expandedKeysSet = new Set(expandedKeys.value);\n\n      expanded ? expandedKeysSet.add(key) : expandedKeysSet.delete(key);\n      const newExpandedKeys = [...expandedKeysSet];\n\n      setExpandState(newExpandedKeys);\n      if (animation.value) {\n        currentExpandKeys.value.push(key);\n      }\n\n      emitExpandEvent({\n        targetKey: key,\n        targetExpanded: expanded,\n        newExpandedKeys,\n        event: e,\n      });\n    }\n\n    function onExpandEnd(key: TreeNodeKey) {\n      const index = currentExpandKeys.value.indexOf(key);\n      currentExpandKeys.value.splice(index, 1);\n    }\n\n    const onLoadMore = computed(() =>\n      loadMore?.value\n        ? async (key: TreeNodeKey) => {\n            if (!isFunction(loadMore.value)) return;\n\n            const node = key2TreeNode.value.get(key);\n            if (!node) return;\n\n            const { treeNodeData } = node;\n\n            loadingKeys.value = [...new Set([...loadingKeys.value, key])];\n\n            try {\n              await loadMore.value(treeNodeData);\n              loadingKeys.value = loadingKeys.value.filter((v) => v !== key);\n              onExpand(true, key);\n              if (checkedKeys.value.includes(key)) {\n                onCheck(true, key);\n              }\n            } catch (err) {\n              loadingKeys.value = loadingKeys.value.filter((v) => v !== key);\n              // eslint-disable-next-line no-console\n              console.error('[tree]load data error: ', err);\n            }\n          }\n        : undefined\n    );\n\n    const treeContext = reactive({\n      treeProps: props,\n      switcherIcon,\n      loadingIcon,\n      dragIcon,\n      nodeIcon,\n      nodeTitle,\n      nodeExtra,\n      treeData,\n      flattenTreeData,\n      key2TreeNode,\n      checkedKeys,\n      indeterminateKeys,\n      selectedKeys,\n      expandedKeys,\n      loadingKeys,\n      currentExpandKeys,\n      onLoadMore,\n      filterTreeNode,\n      onCheck,\n      onSelect,\n      onExpand,\n      onExpandEnd,\n      allowDrop(key: TreeNodeKey, dropPosition: DropPosition) {\n        const node = key2TreeNode.value.get(key);\n        if (node && isFunction(allowDrop.value)) {\n          return !!allowDrop.value({\n            dropNode: node.treeNodeData,\n            dropPosition,\n          });\n        }\n        return true;\n      },\n      onDragStart(key: TreeNodeKey, e: DragEvent) {\n        const node = key2TreeNode.value.get(key);\n        dragNode.value = node;\n        if (node) {\n          emit('dragStart', e, node.treeNodeData);\n        }\n      },\n      onDragEnd(key: TreeNodeKey, e: DragEvent) {\n        const node = key2TreeNode.value.get(key);\n        dragNode.value = undefined;\n        if (node) {\n          emit('dragEnd', e, node.treeNodeData);\n        }\n      },\n      onDragOver(key: TreeNodeKey, e: DragEvent) {\n        const node = key2TreeNode.value.get(key);\n        if (node) {\n          emit('dragOver', e, node.treeNodeData);\n        }\n      },\n      onDragLeave(key: TreeNodeKey, e: DragEvent) {\n        const node = key2TreeNode.value.get(key);\n        if (node) {\n          emit('dragLeave', e, node.treeNodeData);\n        }\n      },\n      onDrop(key: TreeNodeKey, dropPosition: number, e: DragEvent) {\n        const node = key2TreeNode.value.get(key);\n        if (\n          dragNode.value &&\n          node &&\n          !(\n            node.key === dragNode.value.key ||\n            node.pathParentKeys.includes(dragNode.value.key || '')\n          )\n        ) {\n          emit('drop', {\n            e,\n            dragNode: dragNode.value.treeNodeData,\n            dropNode: node.treeNodeData,\n            dropPosition,\n          });\n        }\n      },\n    });\n\n    provide(TreeInjectionKey, treeContext);\n\n    return {\n      classNames,\n      visibleTreeNodeList,\n      treeContext,\n      virtualListRef: ref(),\n      computedSelectedKeys: selectedKeys,\n      computedExpandedKeys: expandedKeys,\n      computedCheckedKeys: checkedKeys,\n      computedIndeterminateKeys: indeterminateKeys,\n      getPublicCheckedKeys,\n      getNodes,\n      internalCheckNodes: checkNodes,\n      internalSetCheckedKeys: setCheckedKeys,\n      internalSelectNodes: selectNodes,\n      internalSetSelectedKeys: setSelectedKeys,\n      internalExpandNodes: expandNodes,\n      internalSetExpandedKeys: setExpandedKeys,\n    };\n  },\n\n  methods: {\n    toggleCheck(key: TreeNodeKey, e: Event) {\n      const { key2TreeNode, onCheck, checkedKeys } = this.treeContext;\n      const checked = !checkedKeys.includes(key);\n      const node = key2TreeNode.get(key);\n      if (node && isNodeCheckable(node)) {\n        onCheck(checked, key, e);\n      }\n    },\n    /**\n     * @zh 虚拟列表滚动某个元素\n     * @en Virtual list scroll to an element\n     * @param {{ index?: number; key?: number | string; align: 'auto' | 'top' | 'bottom'}} options\n     * @public\n     */\n    scrollIntoView(options: ScrollIntoViewOptions) {\n      this.virtualListRef && this.virtualListRef.scrollTo(options);\n    },\n    /**\n     * @zh 获取选中的节点\n     * @en Get selected nodes\n     * @returns {TreeNodeData[]}\n     * @public\n     * @version 2.19.0\n     */\n    getSelectedNodes() {\n      return this.getNodes(this.computedSelectedKeys);\n    },\n    /**\n     * @zh 获取选中复选框的节点。支持传入 `checkedStrategy`，没有传则取组件的配置。\n     * @en Get checked nodes. Supports passing in `checkedStrategy`, if not passed, the configuration of the component is taken.\n     * @param { checkedStrategy?: 'all' | 'parent' | 'child'; includeHalfChecked?: boolean; } options\n     * @returns {TreeNodeData[]}\n     * @public\n     * @version 2.19.0\n     */\n    getCheckedNodes(\n      options: {\n        checkedStrategy?: CheckedStrategy;\n        includeHalfChecked?: boolean;\n      } = {}\n    ) {\n      const { checkedStrategy, includeHalfChecked } = options;\n      const checkedKeys = this.getPublicCheckedKeys(\n        this.computedCheckedKeys,\n        checkedStrategy\n      );\n      const checkedNodes = this.getNodes(checkedKeys);\n      return [\n        ...checkedNodes,\n        ...(includeHalfChecked ? this.getHalfCheckedNodes() : []),\n      ];\n    },\n    /**\n     * @zh 获取复选框半选的节点\n     * @en Get half checked nodes\n     * @returns {TreeNodeData[]}\n     * @public\n     * @version 2.19.0\n     */\n    getHalfCheckedNodes() {\n      return this.getNodes(this.computedIndeterminateKeys);\n    },\n    /**\n     * @zh 获取展开的节点\n     * @en Get expanded nodes\n     * @returns {TreeNodeData[]}\n     * @public\n     * @version 2.19.0\n     */\n    getExpandedNodes() {\n      return this.getNodes(this.computedExpandedKeys);\n    },\n    /**\n     * @zh 设置全部节点的复选框状态\n     * @en Set the checkbox state of all nodes\n     * @param { boolean } checked\n     * @public\n     * @version 2.20.0\n     */\n    checkAll(checked = true) {\n      const { key2TreeNode } = this.treeContext;\n      const newKeys = checked\n        ? [...key2TreeNode.keys()].filter((key) => {\n            const node = key2TreeNode.get(key);\n            return node && isNodeCheckable(node);\n          })\n        : [];\n      this.internalSetCheckedKeys(newKeys);\n    },\n    /**\n     * @zh 设置指定节点的复选框状态\n     * @en Sets the checkbox state of the specified node\n     * @param { TreeNodeKey | TreeNodeKey[] } key\n     * @param { boolean } checked\n     * @param { boolean } onlyCheckLeaf\n     * @public\n     * @version 2.20.0，onlyCheckLeaf from 2.21.0\n     */\n    checkNode(\n      key: TreeNodeKey | TreeNodeKey[],\n      checked = true,\n      onlyCheckLeaf = false\n    ) {\n      const { checkStrictly, treeContext } = this;\n      const { key2TreeNode } = treeContext;\n      const isBatch = isArray(key);\n      const keys = (isBatch ? key : [key]).filter((key) => {\n        const node = key2TreeNode.get(key);\n        return (\n          node &&\n          isNodeCheckable(node) &&\n          (checkStrictly || !onlyCheckLeaf || isLeafNode(node)) // onlyCheckLeaf 仅在 checkStrictly 为 false 的时候有效\n        );\n      });\n      this.internalCheckNodes(keys, checked, isBatch ? undefined : key);\n    },\n    /**\n     * @zh 设置全部节点的选中状态\n     * @en Set the selected state of all nodes\n     * @param { boolean } selected\n     * @public\n     * @version 2.20.0\n     */\n    selectAll(selected = true) {\n      const { key2TreeNode } = this.treeContext;\n      const newKeys = selected\n        ? [...key2TreeNode.keys()].filter((key) => {\n            const node = key2TreeNode.get(key);\n            return node && isNodeSelectable(node);\n          })\n        : [];\n\n      this.internalSetSelectedKeys(newKeys);\n    },\n    /**\n     * @zh 设置指定节点的选中状态\n     * @en Sets the selected state of the specified node\n     * @param { TreeNodeKey | TreeNodeKey[] } key\n     * @param { boolean } selected\n     * @public\n     * @version 2.20.0\n     */\n    selectNode(key: TreeNodeKey | TreeNodeKey[], selected = true) {\n      const { key2TreeNode } = this.treeContext;\n      const isBatch = isArray(key);\n      const keys = (isBatch ? key : [key]).filter((key) => {\n        const node = key2TreeNode.get(key);\n        return node && isNodeSelectable(node);\n      });\n      this.internalSelectNodes(keys, selected, isBatch ? undefined : key);\n    },\n    /**\n     * @zh 设置全部节点的展开状态\n     * @en Set the expanded state of all nodes\n     * @param { boolean } expanded\n     * @public\n     * @version 2.20.0\n     */\n    expandAll(expanded = true) {\n      const { key2TreeNode } = this.treeContext;\n      const newKeys = expanded\n        ? [...key2TreeNode.keys()].filter((key) => {\n            const node = key2TreeNode.get(key);\n            return node && isNodeExpandable(node);\n          })\n        : [];\n\n      this.internalSetExpandedKeys(newKeys);\n    },\n    /**\n     * @zh 设置指定节点的展开状态\n     * @en Sets the expanded state of the specified node\n     * @param { TreeNodeKey | TreeNodeKey[] } key\n     * @param { boolean } expanded\n     * @public\n     * @version 2.20.0\n     */\n    expandNode(key: TreeNodeKey | TreeNodeKey[], expanded = true) {\n      const { key2TreeNode } = this.treeContext;\n      const isBatch = isArray(key);\n      const keys = (isBatch ? key : [key]).filter((key) => {\n        const node = key2TreeNode.get(key);\n        return node && isNodeExpandable(node);\n      });\n      this.internalExpandNodes(keys, expanded, isBatch ? undefined : key);\n    },\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/tree/utils/check-utils.ts",
    "content": "import { Key2TreeNode, Node, TreeNodeKey } from '../interface';\n\nfunction SetAdd<T>(set: Set<T>): (value: T) => Set<T> {\n  return Set.prototype.add.bind(set);\n}\n\nfunction SetDelete<T>(set: Set<T>): (value: T) => boolean {\n  return Set.prototype.delete.bind(set);\n}\n\nexport function isNodeCheckable(node: Node) {\n  if (node.disabled || node.disableCheckbox) return false;\n  return !!node.checkable;\n}\n\nfunction getChildrenKeys(node: Node) {\n  const keys: TreeNodeKey[] = [];\n  node.children?.forEach((child) => {\n    if (isNodeCheckable(child)) {\n      keys.push(child.key, ...getChildrenKeys(child));\n    }\n  });\n  return keys;\n}\n\nfunction updateParent(options: {\n  node: Node;\n  checkedKeySet: Set<TreeNodeKey>;\n  indeterminateKeySet: Set<TreeNodeKey>;\n}) {\n  const { node, checkedKeySet, indeterminateKeySet } = options;\n  let parentNode = node.parent;\n  while (parentNode) {\n    if (isNodeCheckable(parentNode)) {\n      const parentKey = parentNode.key;\n      const children = parentNode.children?.filter(isNodeCheckable) || [];\n      let checkedCount = 0;\n      const total = children.length;\n      children.some(({ key: childKey }) => {\n        if (checkedKeySet.has(childKey)) {\n          checkedCount += 1;\n        } else if (indeterminateKeySet.has(childKey)) {\n          checkedCount += 0.5;\n          return true;\n        }\n        return false;\n      });\n\n      if (checkedCount && checkedCount !== total) {\n        indeterminateKeySet.add(parentKey);\n      } else {\n        indeterminateKeySet.delete(parentKey);\n      }\n\n      if (checkedCount && checkedCount === total) {\n        checkedKeySet.add(parentKey);\n      } else {\n        checkedKeySet.delete(parentKey);\n      }\n    }\n    parentNode = parentNode.parent;\n  }\n}\n\nexport function getCheckedStateByCheck(options: {\n  node: Node;\n  checked: boolean;\n  checkedKeys: TreeNodeKey[];\n  indeterminateKeys: TreeNodeKey[];\n  checkStrictly?: boolean;\n}) {\n  const {\n    node,\n    checked,\n    checkedKeys,\n    indeterminateKeys,\n    checkStrictly = false,\n  } = options;\n\n  const { key } = node;\n  const checkedKeySet = new Set(checkedKeys);\n  const indeterminateKeySet = new Set(indeterminateKeys);\n\n  // 更新自己\n  checked ? checkedKeySet.add(key) : checkedKeySet.delete(key);\n  indeterminateKeySet.delete(key);\n\n  if (!checkStrictly) {\n    // 更新子节点\n    const childKeys = getChildrenKeys(node);\n    if (checked) {\n      childKeys.forEach(SetAdd(checkedKeySet));\n    } else {\n      childKeys.forEach(SetDelete(checkedKeySet));\n    }\n    childKeys.forEach(SetDelete(indeterminateKeySet));\n\n    // 逐级更新父节点的选中状态\n    updateParent({ node, checkedKeySet, indeterminateKeySet });\n  }\n\n  return [[...checkedKeySet], [...indeterminateKeySet]];\n}\n\nexport function getCheckedStateByInitKeys(options: {\n  initCheckedKeys: TreeNodeKey[];\n  key2TreeNode: Key2TreeNode;\n  checkStrictly?: boolean;\n  onlyCheckLeaf?: boolean;\n}) {\n  const { initCheckedKeys, key2TreeNode, checkStrictly, onlyCheckLeaf } =\n    options;\n\n  const checkedKeySet = new Set<TreeNodeKey>();\n  const childCheckedKeySet = new Set<TreeNodeKey>();\n  const indeterminateKeySet = new Set<TreeNodeKey>();\n\n  if (!checkStrictly) {\n    initCheckedKeys.forEach((key) => {\n      const node = key2TreeNode.get(key);\n      if (\n        !node ||\n        childCheckedKeySet.has(key) ||\n        (onlyCheckLeaf && node.children?.length)\n      ) {\n        return;\n      }\n      // 处理子节点\n      const childKeys = getChildrenKeys(node);\n      childKeys.forEach(SetAdd(childCheckedKeySet));\n      childKeys.forEach(SetDelete(indeterminateKeySet));\n      // 处理自身\n      checkedKeySet.add(key);\n      indeterminateKeySet.delete(key);\n      // 处理父节点\n      updateParent({ node, checkedKeySet, indeterminateKeySet });\n    });\n  } else {\n    initCheckedKeys.forEach(SetAdd(checkedKeySet));\n  }\n\n  return [[...checkedKeySet, ...childCheckedKeySet], [...indeterminateKeySet]];\n}\n"
  },
  {
    "path": "packages/web-vue/components/tree/utils/index.ts",
    "content": "import { isBoolean } from '../../_utils/is';\nimport { Key2TreeNode, Node } from '../interface';\n\nexport function getFlattenTreeData(tree: Node[]) {\n  const flattenTreeData: Node[] = [];\n\n  function preOrder(tree: Node[] | undefined) {\n    if (!tree) return;\n    tree.forEach((node) => {\n      flattenTreeData.push(node);\n      preOrder(node.children);\n    });\n  }\n\n  preOrder(tree);\n\n  return flattenTreeData;\n}\n\nexport function getKey2TreeNode(flattenTreeData: Node[]) {\n  const key2TreeNode: Key2TreeNode = new Map();\n  flattenTreeData.forEach((node) => {\n    key2TreeNode.set(node.key, node);\n  });\n  return key2TreeNode;\n}\n\nexport function isNodeSelectable(node: Node) {\n  return node.selectable && !node.disabled;\n}\n\nexport function isNodeExpandable(node: Node) {\n  return !node.isLeaf && node.children;\n}\n\nexport function isLeafNode(node: Node) {\n  if (isBoolean(node.isLeaf)) return node.isLeaf;\n  return !node.children;\n}\n"
  },
  {
    "path": "packages/web-vue/components/tree/utils/tree-data.ts",
    "content": "import { omit } from '../../_utils/omit';\nimport { isFunction, isUndefined } from '../../_utils/is';\nimport {\n  TreeNodeData,\n  Node,\n  TreeFieldNames,\n  TreeNodeKey,\n  SelectableType,\n  CheckableType,\n} from '../interface';\n\ninterface TreeProps {\n  fieldNames?: TreeFieldNames;\n  selectable: SelectableType;\n  checkable: CheckableType;\n  blockNode: boolean;\n  showLine: boolean;\n  loadMore: boolean;\n  draggable: boolean;\n}\n\ninterface NodeOptions {\n  treeNodeData: TreeNodeData;\n  treeProps: TreeProps;\n  parentNode?: Node;\n  isTail?: boolean;\n}\n\nexport const generateKey = (() => {\n  let i = 0;\n\n  return () => {\n    i += 1;\n    return `__arco_tree${i}`;\n  };\n})();\n\nfunction getBoolean(val1: boolean | undefined, val2: boolean | undefined) {\n  return !!(isUndefined(val1) ? val2 : val1);\n}\n\nfunction mapObject<K, T = any>(\n  obj: T,\n  nameMap?: Partial<Record<keyof K, string>>\n): K {\n  const _obj: Record<string, any> = { ...obj };\n\n  if (nameMap) {\n    const names = Object.keys(nameMap);\n    names.forEach((name) => {\n      const sourceName = nameMap[name as keyof typeof nameMap] as keyof T;\n\n      if (sourceName !== name) {\n        _obj[name] = obj[sourceName];\n        delete _obj[sourceName as string];\n      }\n    });\n  }\n\n  return _obj as K;\n}\n\nfunction getEnableResult({\n  subEnable,\n  superEnable,\n  isLeaf,\n  treeNodeData,\n  level,\n}: {\n  subEnable: boolean | undefined;\n  superEnable: CheckableType | undefined;\n  isLeaf: boolean;\n  level: number;\n  treeNodeData: TreeNodeData;\n}) {\n  if (!isUndefined(subEnable)) return subEnable;\n  if (isFunction(superEnable)) {\n    return superEnable(treeNodeData, { isLeaf, level });\n  }\n  return superEnable ?? false;\n}\n\nfunction generateNode(options: NodeOptions): Node {\n  const { treeNodeData, parentNode, isTail = true, treeProps } = options;\n  const { fieldNames } = treeProps || {};\n\n  const mapTreeNodeData = mapObject<TreeNodeData>(treeNodeData, fieldNames);\n  const isLeaf = treeProps.loadMore\n    ? !!mapTreeNodeData.isLeaf\n    : !mapTreeNodeData.children?.length;\n  const level = parentNode ? parentNode.level + 1 : 0;\n\n  const treeNodeProps = {\n    ...omit(mapTreeNodeData, ['children']),\n    key: mapTreeNodeData.key ?? generateKey(),\n    selectable: getEnableResult({\n      subEnable: mapTreeNodeData.selectable,\n      superEnable: treeProps?.selectable,\n      isLeaf,\n      level,\n      treeNodeData,\n    }),\n    disabled: !!mapTreeNodeData.disabled,\n    disableCheckbox: !!mapTreeNodeData.disableCheckbox,\n    checkable: getEnableResult({\n      subEnable: mapTreeNodeData.checkable,\n      superEnable: treeProps?.checkable,\n      isLeaf,\n      level,\n      treeNodeData,\n    }),\n    isLeaf,\n    isTail,\n    blockNode: !!treeProps?.blockNode,\n    showLine: !!treeProps?.showLine,\n    level,\n    // showLine 模式下是否显示缩进线。\n    // 如果父节点是其所在层级的最后一个节点，那么所有的子节点（包括孙子节点等）在父节点所在层级的缩进格都不显示缩进线。\n    lineless: parentNode ? [...parentNode.lineless, parentNode.isTail] : [],\n    draggable: getBoolean(mapTreeNodeData.draggable, treeProps?.draggable),\n  };\n\n  const node = {\n    ...treeNodeProps,\n    treeNodeProps,\n    treeNodeData,\n    parent: parentNode,\n    parentKey: parentNode?.key,\n    pathParentKeys: parentNode\n      ? [...parentNode.pathParentKeys, parentNode.key as TreeNodeKey]\n      : [],\n  };\n\n  return node;\n}\n\nexport function generateTreeData(\n  treeData: TreeNodeData[],\n  treeProps: TreeProps\n) {\n  function preOrder(tree: TreeNodeData[] | undefined, parentNode?: Node) {\n    if (!tree) return undefined;\n\n    const { fieldNames } = treeProps;\n    const nodes: Node[] = [];\n    tree.forEach((treeNodeData, index) => {\n      const node = generateNode({\n        treeNodeData,\n        treeProps,\n        parentNode,\n        isTail: index === tree.length - 1,\n      });\n\n      node.children = preOrder(\n        treeNodeData[\n          (fieldNames?.children || 'children') as keyof TreeNodeData\n        ] as TreeNodeData['children'],\n        node\n      );\n      nodes.push(node);\n    });\n\n    return nodes;\n  }\n\n  return preOrder(treeData) as Node[];\n}\n"
  },
  {
    "path": "packages/web-vue/components/tree-select/CHANGELOG.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.55.0\n\n`2024-03-15`\n\n### 🆕 Feature\n\n- Added `input-value` related properties ([#3024](https://github.com/arco-design/arco-design-vue/pull/3024))\n\n\n## 2.49.1\n\n`2023-07-24`\n\n### 🐛 BugFix\n\n- Fix the problem that the default value of the `border` attribute is wrong ([#2580](https://github.com/arco-design/arco-design-vue/pull/2580))\n\n\n## 2.49.0\n\n`2023-07-21`\n\n### 🆕 Feature\n\n- Add header and footer visibility in empty data state ([#2573](https://github.com/arco-design/arco-design-vue/pull/2573))\n\n### 🐛 BugFix\n\n- Fix the problem that the border attribute is invalid ([#2568](https://github.com/arco-design/arco-design-vue/pull/2568))\n\n\n## 2.47.1\n\n`2023-06-09`\n\n### 🐛 BugFix\n\n- Fix the problem that the search content under the virtual list cannot be selected ([#2488](https://github.com/arco-design/arco-design-vue/pull/2488))\n\n\n## 2.47.0\n\n`2023-06-02`\n\n### 🆕 Feature\n\n- Add header and footer slots ([#2417](https://github.com/arco-design/arco-design-vue/pull/2417))\n\n\n## 2.39.1\n\n`2022-11-25`\n\n### 🆎 TypeScript\n\n- update the type of trigger-props ([#1885](https://github.com/arco-design/arco-design-vue/pull/1885))\n\n\n## 2.39.0\n\n`2022-11-18`\n\n### 🆕 Feature\n\n- Replace the virtual scrollbar component and add the scrollbar property ([#1872](https://github.com/arco-design/arco-design-vue/pull/1872))\n\n\n## 2.32.1\n\n`2022-07-01`\n\n### 🐛 BugFix\n\n- Fix the problem of selected value in case of modelValue is 0 ([#1370](https://github.com/arco-design/arco-design-vue/pull/1370))\n\n\n## 2.29.1\n\n`2022-06-02`\n\n### 💎 Enhancement\n\n- When the component is out of focus in search mode, the input value will be cleared by default ([#1232](https://github.com/arco-design/arco-design-vue/pull/1232))\n\n\n## 2.29.0\n\n`2022-05-27`\n\n### 🆕 Feature\n\n- Default support to delete selected options by tag ([#1206](https://github.com/arco-design/arco-design-vue/pull/1206))\n\n### 🐛 BugFix\n\n- fixed the problem that drag and drop fails after setting fieldNames ([#1207](https://github.com/arco-design/arco-design-vue/pull/1207))\n\n\n## 2.27.0\n\n`2022-05-13`\n\n### 🆕 Feature\n\n- Added property `seletable` to support custom selectable nodes ([#1119](https://github.com/arco-design/arco-design-vue/pull/1119))\n\n\n## 2.23.0\n\n`2022-04-08`\n\n### 🐛 BugFix\n\n- When the prop label-in-value is true, the actual parameter value of the event change is wrong ([#939](https://github.com/arco-design/arco-design-vue/pull/939))\n\n\n## 2.22.0\n\n`2022-04-01`\n\n### 🆕 Feature\n\n- add property `fallback-option` ([#894](https://github.com/arco-design/arco-design-vue/pull/894))\n\n### 🐛 BugFix\n\n- Fix the problem that the null value is displayed as empty ([#916](https://github.com/arco-design/arco-design-vue/pull/916))\n\n\n## 2.21.0\n\n`2022-03-25`\n\n### 🐛 BugFix\n\n- Fix `max-tags` parameter name is wrong, it should be `max-tag-count` ([#873](https://github.com/arco-design/arco-design-vue/pull/873))\n\n\n## 2.11.0\n\n`2021-12-17`\n\n### 🐛 BugFix\n\n- fix the problem that search is invalid when rename the key field ([#405](https://github.com/arco-design/arco-design-vue/pull/405))\n\n\n## 2.5.0\n\n`2021-11-18`\n\n### 🐛 BugFix\n\n- cannot select the option with key 0 ([#185](https://github.com/arco-design/arco-design-vue/pull/185))\n\n\n## 2.1.0\n\n`2021-11-05`\n\n### 💎 Enhancement\n\n- The clickable range of options occupies the entire row by default ([#90](https://github.com/arco-design/arco-design-vue/pull/90))\n\n"
  },
  {
    "path": "packages/web-vue/components/tree-select/CHANGELOG.zh-CN.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.55.0\n\n`2024-03-15`\n\n### 🆕 新增功能\n\n- 新增 `input-value` 相关属性 ([#3024](https://github.com/arco-design/arco-design-vue/pull/3024))\n\n\n## 2.49.1\n\n`2023-07-24`\n\n### 🐛 问题修复\n\n- 修复 `border` 属性默认值错误的问题 ([#2580](https://github.com/arco-design/arco-design-vue/pull/2580))\n\n\n## 2.49.0\n\n`2023-07-21`\n\n### 🆕 新增功能\n\n- 增加空状态下 header 和 footer 的显示状态 ([#2573](https://github.com/arco-design/arco-design-vue/pull/2573))\n\n### 🐛 问题修复\n\n- 修复 border 属性失效的问题 ([#2568](https://github.com/arco-design/arco-design-vue/pull/2568))\n\n\n## 2.47.1\n\n`2023-06-09`\n\n### 🐛 问题修复\n\n- 修复在虚拟列表下搜索内容不可选择的问题 ([#2488](https://github.com/arco-design/arco-design-vue/pull/2488))\n\n\n## 2.47.0\n\n`2023-06-02`\n\n### 🆕 新增功能\n\n- 增加树选择器页头和页脚插槽 ([#2417](https://github.com/arco-design/arco-design-vue/pull/2417))\n\n\n## 2.39.1\n\n`2022-11-25`\n\n### 🆎 类型修正\n\n- 更新trigger-props的类型 ([#1885](https://github.com/arco-design/arco-design-vue/pull/1885))\n\n\n## 2.39.0\n\n`2022-11-18`\n\n### 🆕 新增功能\n\n- 替换虚拟滚动条组件，增加 scrollbar 属性 ([#1872](https://github.com/arco-design/arco-design-vue/pull/1872))\n\n\n## 2.32.1\n\n`2022-07-01`\n\n### 🐛 问题修复\n\n- 修复 `modelValue` 为 0 时, 导致状态不被选中 ([#1370](https://github.com/arco-design/arco-design-vue/pull/1370))\n\n\n## 2.29.1\n\n`2022-06-02`\n\n### 💎 功能优化\n\n- 搜索模式下组件失焦后会默认清空输入值 ([#1232](https://github.com/arco-design/arco-design-vue/pull/1232))\n\n\n## 2.29.0\n\n`2022-05-27`\n\n### 🆕 新增功能\n\n- 默认支持通过标签删除已选项 ([#1206](https://github.com/arco-design/arco-design-vue/pull/1206))\n\n### 🐛 问题修复\n\n- 修复设置了 field-names 后拖拽失效的问题 ([#1207](https://github.com/arco-design/arco-design-vue/pull/1207))\n\n\n## 2.27.0\n\n`2022-05-13`\n\n### 🆕 新增功能\n\n- 新增属性 `seletable`，支持自定义可选节点 ([#1119](https://github.com/arco-design/arco-design-vue/pull/1119))\n\n\n## 2.23.0\n\n`2022-04-08`\n\n### 🐛 问题修复\n\n- 当 label-in-value 为 true 的时候，事件 change 的入参错误 ([#939](https://github.com/arco-design/arco-design-vue/pull/939))\n\n\n## 2.22.0\n\n`2022-04-01`\n\n### 🆕 新增功能\n\n- 新增参数 `fallback-option` ([#894](https://github.com/arco-design/arco-design-vue/pull/894))\n\n### 🐛 问题修复\n\n- 修复  null 值显示为空的问题 ([#916](https://github.com/arco-design/arco-design-vue/pull/916))\n\n\n## 2.21.0\n\n`2022-03-25`\n\n### 🐛 问题修复\n\n- 修复 `max-tags` 参数名错误的问题，应为 `max-tag-count` ([#873](https://github.com/arco-design/arco-design-vue/pull/873))\n\n\n## 2.11.0\n\n`2021-12-17`\n\n### 🐛 问题修复\n\n- 修复设置 key 字段名的时候搜索失效的问题 ([#405](https://github.com/arco-design/arco-design-vue/pull/405))\n\n\n## 2.5.0\n\n`2021-11-18`\n\n### 🐛 问题修复\n\n- 无法选中 key 为 0 的选项 ([#185](https://github.com/arco-design/arco-design-vue/pull/185))\n\n\n## 2.1.0\n\n`2021-11-05`\n\n### 💎 功能优化\n\n- 选项的可点击范围默认占满一行 ([#90](https://github.com/arco-design/arco-design-vue/pull/90))\n\n"
  },
  {
    "path": "packages/web-vue/components/tree-select/README.en-US.md",
    "content": "```yaml\nmeta:\n  type: Component\n  category: Data Entry\ntitle: TreeSelect\ndescription: The tree structure data can be selected.\n```\n\n*Auto translate by google.*\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/label-in-value.md\n\n@import ./__demo__/control.md\n\n@import ./__demo__/load-more.md\n\n@import ./__demo__/search.md\n\n@import ./__demo__/search-remote.md\n\n@import ./__demo__/size.md\n\n@import ./__demo__/dropdown-slots.md\n\n@import ./__demo__/trigger-element.md\n\n@import ./__demo__/multiple.md\n\n@import ./__demo__/checkable.md\n\n@import ./__demo__/checked-strategy.md\n\n@import ./__demo__/popup-visible.md\n\n@import ./__demo__/field-names.md\n\n@import ./__demo__/virtual.md\n\n@import ./__demo__/fallback.md\n\n## API\n\n\n### `<tree-select>` Props\n\n|Attribute|Description|Type|Default|version|\n|---|---|---|:---:|:---|\n|disabled|Whether to disable|`boolean`|`false`||\n|loading|Whether it is loading state|`boolean`|`false`||\n|error|Whether it is an error state|`boolean`|`false`||\n|size|The size of the selection box.|`'mini' \\| 'small' \\| 'medium' \\| 'large'`|`'medium'`||\n|border|Whether to show the border|`boolean`|`true`||\n|allow-search|Whether to allow searching|`boolean \\| { retainInputValue?: boolean }`|`false (single) \\| true (multiple)`||\n|allow-clear|Whether to allow clear|`boolean`|`false`||\n|placeholder|Prompt copy|`string`|`-`||\n|max-tag-count|The maximum number of labels displayed, only valid in multi-select mode|`number`|`-`||\n|multiple|Whether to support multiple selection|`boolean`|`false`||\n|default-value|Default value|`string \\| number \\| Array<string \\| number> \\| LabelValue \\| LabelValue[]`|`-`||\n|model-value **(v-model)**|Value|`string \\| number \\| Array<string \\| number> \\| LabelValue \\| LabelValue[]`|`-`||\n|field-names|Specify the field name in the node data|`TreeFieldNames`|`-`||\n|data|Data|`TreeNodeData[]`|`[]`||\n|label-in-value|Set the value format. The default is string, when set to true, the value format is: {label: string, value: string}|`boolean`|`false`||\n|tree-checkable|Whether to show checkbox|`boolean`|`false`||\n|tree-check-strictly|Whether the parent and child nodes are related|`boolean`|`false`||\n|tree-checked-strategy|Customized echo method|`'all' \\| 'parent' \\| 'child'`|`'all'`||\n|tree-props|Can accept Props of all [Tree](/vue/component/tree) components|`Partial<TreeProps>`|`-`||\n|trigger-props|Can accept Props of all [Trigger](/vue/component/trigger) components|`Partial<TriggerProps>`|`-`||\n|popup-visible **(v-model)**|Whether the pop-up box is visible|`boolean`|`-`||\n|default-popup-visible|Whether the default pop-up box is visible|`boolean`|`false`||\n|dropdown-style|Drop-down box style|`CSSProperties`|`-`||\n|dropdown-class-name|Drop-down box style class|`string \\| string[]`|`-`||\n|filter-tree-node|Custom node filter function|`(searchKey: string, nodeData: TreeNodeData) => boolean`|`-`||\n|load-more|Load data dynamically|`(nodeData: TreeNodeData) => Promise<void>`|`-`||\n|disable-filter|Disable internal filtering logic|`boolean`|`false`||\n|popup-container|Mount container for pop-up box|`string \\| HTMLElement`|`-`||\n|fallback-option|Customize node data for keys that do not match options|`boolean \\| ((key: number \\| string) => TreeNodeData \\| boolean)`|`true`|2.22.0|\n|selectable|Set the nodes that can be selected, all can be selected by default|`boolean\\| 'leaf'\\| ((    node: TreeNodeData,    info: { isLeaf: boolean; level: number }  ) => boolean)`|`true`|2.27.0|\n|scrollbar|Whether to enable virtual scroll bar|`boolean \\| ScrollbarProps`|`true`|2.39.0|\n|show-header-on-empty|Whether to display the header in the empty state|`boolean`|`false`||\n|show-footer-on-empty|Whether to display the footer in the empty state|`boolean`|`false`||\n|input-value **(v-model)**|The value of the input|`string`|`-`|2.55.0|\n|default-input-value|The default value of the input (uncontrolled mode)|`string`|`''`|2.55.0|\n### `<tree-select>` Events\n\n|Event Name|Description|Parameters|version|\n|---|---|---|:---|\n|change|Trigger when the value changes|value: `string \\| number \\| LabelValue \\| Array<string \\| number> \\| LabelValue[] \\| undefined`||\n|popup-visible-change|Triggered when the status of the drop-down box changes|visible: `boolean`||\n|search|Triggered when the search value changes|searchKey: `string`||\n|clear|Triggered when clear is clicked|-||\n|input-value-change|Triggered when the value of the input changes|inputValue: `string`|2.55.0|\n### `<tree-select>` Slots\n\n|Slot Name|Description|Parameters|version|\n|---|---|---|:---|\n|trigger|Custom trigger element|-||\n|prefix|Prefix|-||\n|label|Custom Label|data: `mixed`||\n|header|The header of the drop-down box|-||\n|loader|Customizing the content displayed during loading|-||\n|empty|Custom empty data display|-||\n|footer|The footer of the drop-down box|-||\n|tree-slot-extra|Render additional node content of the tree component|-||\n|tree-slot-title|Custom the node title of the tree component|title: `string`||\n|tree-slot-icon|Custom node icon for the tree component|node: `TreeNodeData`|2.18.0|\n|tree-slot-switcher-icon|Custom switcher icon for the tree component|-||\n\n\n"
  },
  {
    "path": "packages/web-vue/components/tree-select/README.zh-CN.md",
    "content": "```yaml\nmeta:\n  type: 组件\n  category: 数据输入\ntitle: 树选择 TreeSelect\ndescription: 可以对树形结构数据进行选择。\n```\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/label-in-value.md\n\n@import ./__demo__/control.md\n\n@import ./__demo__/load-more.md\n\n@import ./__demo__/search.md\n\n@import ./__demo__/search-remote.md\n\n@import ./__demo__/size.md\n\n@import ./__demo__/dropdown-slots.md\n\n@import ./__demo__/trigger-element.md\n\n@import ./__demo__/multiple.md\n\n@import ./__demo__/checkable.md\n\n@import ./__demo__/checked-strategy.md\n\n@import ./__demo__/popup-visible.md\n\n@import ./__demo__/field-names.md\n\n@import ./__demo__/virtual.md\n\n@import ./__demo__/fallback.md\n\n## API\n\n\n### `<tree-select>` Props\n\n|参数名|描述|类型|默认值|版本|\n|---|---|---|:---:|:---|\n|disabled|是否禁用|`boolean`|`false`||\n|loading|是否为加载中状态|`boolean`|`false`||\n|error|是否为错误状态|`boolean`|`false`||\n|size|选择框的大小|`'mini' \\| 'small' \\| 'medium' \\| 'large'`|`'medium'`||\n|border|是否显示边框|`boolean`|`true`||\n|allow-search|是否允许搜索|`boolean \\| { retainInputValue?: boolean }`|`false (single) \\| true (multiple)`||\n|allow-clear|是否允许清除|`boolean`|`false`||\n|placeholder|提示文案|`string`|`-`||\n|max-tag-count|最多显示的标签数量，仅在多选模式有效|`number`|`-`||\n|multiple|是否支持多选|`boolean`|`false`||\n|default-value|默认值|`string \\| number \\| Array<string \\| number> \\| LabelValue \\| LabelValue[]`|`-`||\n|model-value **(v-model)**|绑定值|`string \\| number \\| Array<string \\| number> \\| LabelValue \\| LabelValue[]`|`-`||\n|field-names|指定节点数据中的字段名|`TreeFieldNames`|`-`||\n|data|数据|`TreeNodeData[]`|`[]`||\n|label-in-value|设置value格式。默认是string，设置为true时候，value格式为： { label: string, value: string }|`boolean`|`false`||\n|tree-checkable|是否展示复选框|`boolean`|`false`||\n|tree-check-strictly|父子节点是否关联|`boolean`|`false`||\n|tree-checked-strategy|定制回显方式|`'all' \\| 'parent' \\| 'child'`|`'all'`||\n|tree-props|可以接受所有 [Tree](/vue/component/tree) 组件的Props|`Partial<TreeProps>`|`-`||\n|trigger-props|可以接受所有 [Trigger](/vue/component/trigger) 组件的Props|`Partial<TriggerProps>`|`-`||\n|popup-visible **(v-model)**|弹出框是否可见|`boolean`|`-`||\n|default-popup-visible|默认弹出框是否可见|`boolean`|`false`||\n|dropdown-style|下拉框样式|`CSSProperties`|`-`||\n|dropdown-class-name|下拉框样式 class|`string \\| string[]`|`-`||\n|filter-tree-node|自定义节点过滤函数|`(searchKey: string, nodeData: TreeNodeData) => boolean`|`-`||\n|load-more|动态加载数据|`(nodeData: TreeNodeData) => Promise<void>`|`-`||\n|disable-filter|禁用内部过滤逻辑|`boolean`|`false`||\n|popup-container|弹出框的挂载容器|`string \\| HTMLElement`|`-`||\n|fallback-option|为 value 中找不到匹配项的 key 定义节点数据|`boolean \\| ((key: number \\| string) => TreeNodeData \\| boolean)`|`true`|2.22.0|\n|selectable|设置可选择的节点，默认全部可选|`boolean\\| 'leaf'\\| ((    node: TreeNodeData,    info: { isLeaf: boolean; level: number }  ) => boolean)`|`true`|2.27.0|\n|scrollbar|是否开启虚拟滚动条|`boolean \\| ScrollbarProps`|`true`|2.39.0|\n|show-header-on-empty|空状态时是否显示header|`boolean`|`false`||\n|show-footer-on-empty|空状态时是否显示footer|`boolean`|`false`||\n|input-value **(v-model)**|输入框的值|`string`|`-`|2.55.0|\n|default-input-value|输入框的默认值（非受控模式）|`string`|`''`|2.55.0|\n### `<tree-select>` Events\n\n|事件名|描述|参数|版本|\n|---|---|---|:---|\n|change|值改变时触发|value: `string \\| number \\| LabelValue \\| Array<string \\| number> \\| LabelValue[] \\| undefined`||\n|popup-visible-change|下拉框显示状态改变时触发|visible: `boolean`||\n|search|搜索值变化时触发|searchKey: `string`||\n|clear|点击清除时触发|-||\n|input-value-change|输入框的值发生改变时触发|inputValue: `string`|2.55.0|\n### `<tree-select>` Slots\n\n|插槽名|描述|参数|版本|\n|---|:---:|---|:---|\n|trigger|自定义触发元素|-||\n|prefix|前缀|-||\n|label|自定义选择框显示|data: `mixed`||\n|header|自定义下拉框页头|-||\n|loader|定制加载中显示的内容|-||\n|empty|定制空数据展示|-||\n|footer|自定义下拉框页脚|-||\n|tree-slot-extra|定制 tree 组件的渲染额外节点内容|-||\n|tree-slot-title|定制 tree 组件的节点标题|title: `string`||\n|tree-slot-icon|定制 tree 组件的节点图标|node: `TreeNodeData`|2.18.0|\n|tree-slot-switcher-icon|定制 tree 组件的 switcher 图标|-||\n\n\n"
  },
  {
    "path": "packages/web-vue/components/tree-select/TEMPLATE.md",
    "content": "## zh-CN\n```yaml\nmeta:\n  type: 组件\n  category: 数据输入\ntitle: 树选择 TreeSelect\ndescription: 可以对树形结构数据进行选择。\n```\n---\n## en-US\n```yaml\nmeta:\n  type: Component\n  category: Data Entry\ntitle: TreeSelect\ndescription: The tree structure data can be selected.\n```\n---\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/label-in-value.md\n\n@import ./__demo__/control.md\n\n@import ./__demo__/load-more.md\n\n@import ./__demo__/search.md\n\n@import ./__demo__/search-remote.md\n\n@import ./__demo__/size.md\n\n@import ./__demo__/dropdown-slots.md\n\n@import ./__demo__/trigger-element.md\n\n@import ./__demo__/multiple.md\n\n@import ./__demo__/checkable.md\n\n@import ./__demo__/checked-strategy.md\n\n@import ./__demo__/popup-visible.md\n\n@import ./__demo__/field-names.md\n\n@import ./__demo__/virtual.md\n\n@import ./__demo__/fallback.md\n\n## API\n\n%%API(tree-select.vue)%%\n"
  },
  {
    "path": "packages/web-vue/components/tree-select/__demo__/basic.md",
    "content": "```yaml\ntitle:\n  zh-CN: 基本用法\n  en-US: Basic\n```\n\n## zh-CN\n\n最简单的用法。\n\n---\n\n## en-US\n\nBasic usage example.\n\n---\n\n```vue\n<template>\n  <a-tree-select\n    :data=\"treeData\"\n    placeholder=\"Please select ...\"\n    style=\"width: 300px\"\n  ></a-tree-select>\n</template>\n<script>\n  import { h } from 'vue';\n  import { IconCalendar } from '@arco-design/web-vue/es/icon';\n\n  export default {\n    setup() {\n      return {\n        treeData,\n      };\n    },\n  };\n\n  const treeData = [\n    {\n      key: 'node1',\n      icon: () => h(IconCalendar),\n      title: 'Trunk',\n      disabled: true,\n      children: [\n        {\n          key: 'node2',\n          title: 'Leaf',\n        },\n      ],\n    },\n    {\n      key: 'node3',\n      title: 'Trunk2',\n      icon: () => h(IconCalendar),\n      children: [\n        {\n          key: 'node4',\n          title: 'Leaf',\n        },\n        {\n          key: 'node5',\n          title: 'Leaf',\n        },\n      ],\n    },\n  ];\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/tree-select/__demo__/checkable.md",
    "content": "```yaml\ntitle:\n  zh-CN: 复选框多选\n  en-US: Checkable\n```\n\n## zh-CN\n\n可以通过设置 `treeCheckable` 属性开启复选框勾选。\n\n---\n\n## en-US\n\nThe `treeCheckable` property can display checkbox.\n\n---\n\n```vue\n<template>\n  <div style=\"marginBottom: 24px;\">\n    <a-checkbox\n      v-model=\"treeCheckStrictly\"\n      @change=\"() => {\n        selected = [];\n      }\"\n    >\n    treeCheckStrictly\n    </a-checkbox>\n  </div>\n  <a-tree-select\n    v-model=\"selected\"\n    :allow-search=\"true\"\n    :allow-clear=\"true\"\n    :tree-checkable=\"true\"\n    :tree-check-strictly=\"treeCheckStrictly\"\n    :data=\"treeData\"\n    placeholder=\"Please select ...\"\n    style=\"width: 300px;\"\n  ></a-tree-select>\n</template>\n<script>\n  import { ref } from 'vue';\n\n  export default {\n    setup() {\n      const selected = ref([]);\n      const treeCheckStrictly = ref(false);\n\n      return {\n        selected,\n        treeCheckStrictly,\n        treeData,\n      };\n    },\n  };\n\n  const treeData = [\n    {\n      title: 'Trunk 0-0',\n      value: 'Trunk 0-0',\n      key: '0-0',\n      children: [\n        {\n          title: 'Leaf 0-0-1',\n          value: 'Leaf 0-0-1',\n          key: '0-0-1',\n        },\n        {\n          title: 'Branch 0-0-2',\n          value: 'Branch 0-0-2',\n          key: '0-0-2',\n          children: [\n            {\n              title: 'Leaf 0-0-2-1',\n              value: 'Leaf 0-0-2-1',\n              key: '0-0-2-1'\n            }\n          ]\n        },\n      ],\n    },\n    {\n      title: 'Trunk 0-1',\n      value: 'Trunk 0-1',\n      key: '0-1',\n      children: [\n        {\n          title: 'Branch 0-1-1',\n          value: 'Branch 0-1-1',\n          key: '0-1-1',\n          checkable: false,\n          children: [\n            {\n              title: 'Leaf 0-1-1-1',\n              value: 'Leaf 0-1-1-1',\n              key: '0-1-1-1',\n            },\n            {\n              title: 'Leaf 0-1-1-2',\n              value: 'Leaf 0-1-1-2',\n              key: '0-1-1-2',\n              disabled: true\n            },\n          ]\n        },\n        {\n          title: 'Leaf 0-1-2',\n          value: 'Leaf 0-1-2',\n          key: '0-1-2',\n        },\n      ],\n    },\n  ];\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/tree-select/__demo__/checked-strategy.md",
    "content": "```yaml\ntitle:\n  zh-CN: 定制回填方式\n  en-US: Check Strategy\n```\n\n## zh-CN\n\n可以通过`treeCheckStrategy`属性定制回填方式。\n\n---\n\n## en-US\n\nCustomize the return value through the `treeCheckStrategy` property.\n\n\n---\n\n```vue\n<template>\n  <div style=\"margin-bottom: 24px;\">\n    <a-radio-group\n      type='button'\n      v-model=\"treeCheckedStrategy\"\n      @change=\"(value) => {\n        selected = []\n      }\"\n    >\n      <a-radio\n        v-for=\"item in strategyOptions\"\n        :key=\"item?.value\"\n        :value=\"item?.value\"\n      >\n        {{ item?.label }}\n      </a-radio>\n    </a-radio-group>\n  </div>\n  <a-tree-select\n    v-model=\"selected\"\n    :allow-search=\"true\"\n    :allow-clear=\"true\"\n    :tree-checkable=\"true\"\n    :tree-checked-strategy=\"treeCheckedStrategy\"\n    :data=\"treeData\"\n    placeholder=\"Please select ...\"\n    style=\"width: 300px;\"\n  ></a-tree-select>\n</template>\n<script>\n  import { ref } from 'vue';\n\n  export default {\n    setup() {\n      const selected = ref([]);\n      const treeCheckedStrategy = ref('all');\n\n      return {\n        selected,\n        treeCheckedStrategy,\n        strategyOptions,\n        treeData,\n      };\n    },\n  };\n\n  const strategyOptions = [\n    {\n      value: 'all',\n      label: 'show all'\n    },\n    {\n      value: 'parent',\n      label: 'show parent'\n    },\n    {\n      value: 'child',\n      label: 'show child'\n    }\n  ];\n\n  const treeData = [\n    {\n      title: 'Trunk 0-0',\n      value: 'Trunk 0-0',\n      key: '0-0',\n      children: [\n        {\n          title: 'Leaf 0-0-1',\n          value: 'Leaf 0-0-1',\n          key: '0-0-1',\n        },\n        {\n          title: 'Branch 0-0-2',\n          value: 'Branch 0-0-2',\n          key: '0-0-2',\n          children: [\n            {\n              title: 'Leaf 0-0-2-1',\n              value: 'Leaf 0-0-2-1',\n              key: '0-0-2-1'\n            }\n          ]\n        },\n      ],\n    },\n    {\n      title: 'Trunk 0-1',\n      value: 'Trunk 0-1',\n      key: '0-1',\n      children: [\n        {\n          title: 'Branch 0-1-1',\n          value: 'Branch 0-1-1',\n          key: '0-1-1',\n          checkable: false,\n          children: [\n            {\n              title: 'Leaf 0-1-1-1',\n              value: 'Leaf 0-1-1-1',\n              key: '0-1-1-1',\n            },\n            {\n              title: 'Leaf 0-1-1-2',\n              value: 'Leaf 0-1-1-2',\n              key: '0-1-1-2',\n              disabled: true\n            },\n          ]\n        },\n        {\n          title: 'Leaf 0-1-2',\n          value: 'Leaf 0-1-2',\n          key: '0-1-2',\n        },\n      ],\n    },\n  ];\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/tree-select/__demo__/control.md",
    "content": "```yaml\ntitle:\n  zh-CN: 双向绑定\n  en-US: Two-way binding\n```\n\n## zh-CN\n\n选中值支持双向绑定。\n\n---\n\n## en-US\n\nThe selected value supports two-way binding.\n\n---\n\n```vue\n<template>\n  <a-tree-select\n    :data=\"treeData\"\n    v-model=\"selected\"\n    placeholder=\"Please select ...\"\n    style=\"width: 300px\"\n  ></a-tree-select>\n</template>\n<script>\n  import { h, ref } from 'vue';\n  import { IconCalendar } from '@arco-design/web-vue/es/icon';\n\n  export default {\n    setup() {\n      const selected = ref('node2');\n\n      return {\n        selected,\n        treeData,\n      };\n    },\n  };\n\n  const treeData = [\n    {\n      key: 'node1',\n      icon: () => h(IconCalendar),\n      title: 'Trunk',\n      disabled: true,\n      children: [\n        {\n          key: 'node2',\n          title: 'Leaf',\n        },\n      ],\n    },\n    {\n      key: 'node3',\n      title: 'Trunk2',\n      icon: () => h(IconCalendar),\n      children: [\n        {\n          key: 'node4',\n          title: 'Leaf',\n        },\n        {\n          key: 'node5',\n          title: 'Leaf',\n        },\n      ],\n    },\n  ];\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/tree-select/__demo__/dropdown-slots.md",
    "content": "```yaml\ntitle:\n  zh-CN: 下拉框的页头和页脚\n  en-US: Dropdown Header and Footer\n```\n\n## zh-CN\n\n自定义树选择下拉框的页头和页脚\n\n---\n\n## en-US\n\nCustom Tree Select the header and footer of the drop-down box.\n\n---\n\n```vue\n<template>\n  <a-form layout=\"inline\" :model=\"form\">\n   <a-form-item label=\"empty\">\n      <a-switch v-model=\"form.empty\" />\n    </a-form-item>\n    <a-form-item label=\"showHeaderOnEmpty\">\n      <a-switch v-model=\"form.showHeaderOnEmpty\" />\n    </a-form-item>\n    <a-form-item label=\"showFooterOnEmpty\">\n      <a-switch v-model=\"form.showFooterOnEmpty\" />\n    </a-form-item>\n  </a-form>\n  <a-tree-select\n    style=\"width: 300px\"\n    placeholder=\"Please select ...\"\n    :data=\"computedTreeData\"\n    :show-header-on-empty=\"form.showHeaderOnEmpty\"\n    :show-footer-on-empty=\"form.showFooterOnEmpty\"\n  >\n    <template #header>\n      <div style=\"padding: 6px 12px;\" >\n        <a-checkbox value=\"1\">All</a-checkbox>\n      </div>\n    </template>\n      <template #footer>\n      <div style=\"padding: 6px 0; text-align: center;\">\n        <a-button>Click Me</a-button>\n      </div>\n    </template>\n  </a-tree-select>\n</template>\n<script>\n  import { h, reactive, computed } from 'vue';\n  import { IconCalendar } from '@arco-design/web-vue/es/icon';\n\n  export default {\n    setup() {\n      const form = reactive({\n        empty: false,\n        showHeaderOnEmpty: false,\n        showFooterOnEmpty: false,\n      });\n\n      const treeData = [\n        {\n          key: 'node1',\n          icon: () => h(IconCalendar),\n          title: 'Trunk',\n          children: [\n            {\n              key: 'node2',\n              title: 'Leaf',\n            },\n          ],\n        },\n        {\n          key: 'node3',\n          title: 'Trunk2',\n          icon: () => h(IconCalendar),\n          children: [\n            {\n              key: 'node4',\n              title: 'Leaf',\n            },\n            {\n              key: 'node5',\n              title: 'Leaf',\n            },\n          ],\n        },\n        {\n          key: 'node6',\n          title: 'Trunk3',\n          icon: () => h(IconCalendar),\n          children: [\n            {\n              key: 'node7',\n              title: 'Leaf',\n            },\n            {\n              key: 'node8',\n              title: 'Leaf',\n            },\n          ],\n        },\n      ];\n\n      const computedTreeData = computed(() => {\n        return form.empty ? [] : treeData;\n      });\n\n      return {\n        form,\n        computedTreeData,\n      };\n    },\n  };\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/tree-select/__demo__/fallback.md",
    "content": "```yaml\ntitle:\n  zh-CN: 回退选项\n  en-US: Fallback Option\n```\n\n## zh-CN\n\n使用 `fallback-option` 自定义找不到选项的值的显示效果，默认找不到选项就展示值本身。用户可以将其设定为 `false` 来隐藏那些没有匹配到节点数据的值。\n\n---\n\n## en-US\n\nUse `fallback-option` to customize the display effect of the value of the option that is not found. By default, the value itself is displayed when the option is not found. Users can set this to `false` to hide values that do not match node data.\n\n---\n\n```vue\n\n<template>\n  <a-space direction=\"vertical\" size=\"large\">\n    <a-tree-select\n      defaultValue=\"node0\"\n      :data=\"treeData\"\n      placeholder=\"Please select ...\"\n      style=\"width: 300px\"\n    ></a-tree-select>\n    <a-tree-select\n      defaultValue=\"node0\"\n      :data=\"treeData\"\n      :fallback-option=\"false\"\n      placeholder=\"Please select ...\"\n      style=\"width: 300px\"\n    ></a-tree-select>\n    <a-tree-select\n      defaultValue=\"node0\"\n      :data=\"treeData\"\n      :fallback-option=\"fallback\"\n      placeholder=\"Please select ...\"\n      style=\"width: 300px\"\n    ></a-tree-select>\n    <a-tree-select\n      :defaultValue=\"['node0', 'node2']\"\n      :data=\"treeData\"\n      multiple\n      placeholder=\"Please select ...\"\n      style=\"width: 300px\"\n    ></a-tree-select>\n    <a-tree-select\n      :defaultValue=\"['node0', 'node2']\"\n      :data=\"treeData\"\n      :fallback-option=\"false\"\n      multiple\n      placeholder=\"Please select ...\"\n      style=\"width: 300px\"\n    ></a-tree-select>\n    <a-tree-select\n      :default-value=\"['node0', 'node2']\"\n      :data=\"treeData\"\n      :fallback-option=\"fallback\"\n      multiple\n      placeholder=\"Please select ...\"\n      style=\"width: 300px\"\n    ></a-tree-select>\n  </a-space>\n</template>\n\n<script>\nexport default {\n  setup() {\n    return {\n      treeData,\n      fallback(key) {\n        return {\n          key,\n          title: `++${key}++`\n        }\n      }\n    }\n  }\n}\n\nconst treeData = [\n    {\n      key: 'node1',\n      title: 'Trunk1',\n      children: [\n        {\n          key: 'node2',\n          title: 'Leaf1',\n        },\n      ],\n    },\n    {\n      key: 'node3',\n      title: 'Trunk2',\n      children: [\n        {\n          key: 'node4',\n          title: 'Leaf2',\n        },\n        {\n          key: 'node5',\n          title: 'Leaf3',\n        },\n      ],\n    },\n  ];\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/tree-select/__demo__/field-names.md",
    "content": "```yaml\ntitle:\n  zh-CN: 自定义 TreeData 的字段名称\n  en-US: Customize treeData\n```\n\n## zh-CN\n\n通过 `fieldNames` 字段可以自定义 TreeData 的字段名。\n\n---\n\n## en-US\n\nYou can customize `treeData` by `fieldNames`.\n\n---\n\n```vue\n<template>\n  <a-tree-select\n    default-value=\"0-0-1\"\n    :fieldNames=\"{\n      key: 'value',\n      title: 'label',\n      children: 'items'\n    }\"\n    :data=\"treeData\"\n    placeholder=\"Please select ...\"\n    style=\"width: 300px;\"\n  ></a-tree-select>\n</template>\n<script>\n  export default {\n    setup() {\n      return {\n        treeData,\n      };\n    },\n  };\n\n  const treeData = [\n    {\n      label: 'Trunk 0-0',\n      value: '0-0',\n      items: [\n        {\n          label: 'Branch 0-0-2',\n          value: '0-0-2',\n          selectable: false,\n          items: [\n            {\n              label: 'Leaf',\n              value: '0-0-2-1',\n              items: [\n                {\n                  label: 'Leaf 0-0-2',\n                  value: '0-0-2-1-0',\n                  items: [\n                    {\n                      label: 'Leaf',\n                      value: '0-0-2-1-0-0'\n                    }\n                  ]\n                },\n              ],\n            }\n          ]\n        },\n      ],\n    },\n    {\n      label: 'Trunk 0-1',\n      value: '0-1',\n      items: [\n        {\n          label: 'Branch 0-1-1',\n          value: '0-1-1',\n          items: [\n            {\n              label: 'Leaf',\n              value: '0-1-1-0',\n            }\n          ]\n        },\n      ],\n    },\n  ];\n</script>\n```\n\n"
  },
  {
    "path": "packages/web-vue/components/tree-select/__demo__/label-in-value.md",
    "content": "```yaml\ntitle:\n  zh-CN: 设置 value 格式\n  en-US: Value Format\n```\n\n## zh-CN\n\n`labelInValue` 为 `true` 时，`value` 格式为： `{ label: string, value: string }`。\n\n---\n\n## en-US\n\nWhen `labelInValue` is `true`, the format of `value` is: `{ label: string, value: string }`.\n\n---\n\n```vue\n<template>\n  <a-tree-select\n    :data=\"treeData\"\n    :label-in-value=\"true\"\n    :default-value=\"{ value: 'node2', label: 'Leaf' }\"\n    placeholder=\"Please select ...\"\n    style=\"width: 300px\"\n    @change=\"onChange\"\n  ></a-tree-select>\n</template>\n<script>\n  import { h } from 'vue';\n  import { IconCalendar } from '@arco-design/web-vue/es/icon';\n\n  export default {\n    setup() {\n      function onChange(value) {\n        console.log(value);\n      }\n\n      return {\n        onChange,\n        treeData,\n      };\n    },\n  };\n\n  const treeData = [\n    {\n      key: 'node1',\n      icon: () => h(IconCalendar),\n      title: 'Trunk',\n      disabled: true,\n      children: [\n        {\n          key: 'node2',\n          title: 'Leaf',\n        },\n      ],\n    },\n    {\n      key: 'node3',\n      title: 'Trunk2',\n      icon: () => h(IconCalendar),\n      children: [\n        {\n          key: 'node4',\n          title: 'Leaf',\n        },\n        {\n          key: 'node5',\n          title: 'Leaf',\n        },\n      ],\n    },\n  ];\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/tree-select/__demo__/load-more.md",
    "content": "```yaml\ntitle:\n  zh-CN: 动态加载\n  en-US: Dynamic Loading\n```\n\n## zh-CN\n\n可以通过 `loadMore` 进行动态加载。此时可设置 `isLeaf` 来标示叶子节点。\n\n---\n\n## en-US\n\nLoad nodes dynamically via `loadMore`. At this time, `isLeaf` can be set to indicate leaf nodes.\n\n---\n\n```vue\n<template>\n  <a-tree-select\n    :data=\"treeData\"\n    :load-more=\"loadMore\"\n    placeholder=\"Please select ...\"\n    style=\"width: 300px\"\n  ></a-tree-select>\n</template>\n<script>\n  import { ref } from 'vue';\n\n  export default {\n    setup() {\n      const treeData = ref(defaultTreeData);\n      const loadMore = (nodeData) => {\n        const { title, key } = nodeData;\n        const children = [\n          { title: `${title}-0`, value: `${title}-0`, key: `${key}-0` },\n          { title: `${title}-1`, value: `${title}-1`, key: `${key}-1` },\n        ];\n\n        return new Promise((resolve) => {\n          setTimeout(() => {\n            nodeData.children = children;\n            resolve();\n          }, 1000);\n        });\n      };\n\n      return {\n        treeData,\n        loadMore,\n      };\n    },\n  };\n\n  const defaultTreeData = [\n    {\n      key: 'node1',\n      title: 'node1',\n      disabled: true,\n      children: [\n        {\n          key: 'node2',\n          title: 'node2',\n        },\n      ],\n    },\n    {\n      key: 'node3',\n      title: 'node3',\n      children: [\n        {\n          key: 'node4',\n          title: 'node4',\n          isLeaf: true,\n        },\n        {\n          key: 'node5',\n          title: 'node5',\n          isLeaf: true,\n        },\n      ],\n    },\n  ];\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/tree-select/__demo__/multiple.md",
    "content": "```yaml\ntitle:\n  zh-CN: 多选\n  en-US: Multiple Selection\n```\n\n## zh-CN\n\n多选\n\n---\n\n## en-US\n\nMultiple Selection\n\n---\n\n```vue\n<template>\n  <a-space>\n    <a-tree-select\n      v-model=\"selected\"\n      :multiple=\"true\"\n      :allow-clear=\"true\"\n      :allow-search=\"true\"\n      :data=\"treeData\"\n      placeholder=\"Please select ...\"\n      style=\"width: 300px\"\n    ></a-tree-select>\n    <a-tree-select\n      v-model=\"selected\"\n      :multiple=\"true\"\n      :max-tag-count=\"2\"\n      :allow-clear=\"true\"\n      :allow-search=\"true\"\n      :data=\"treeData\"\n      placeholder=\"Please select ...\"\n      style=\"width: 300px\"\n    ></a-tree-select>\n  </a-space>\n</template>\n<script>\n  import { h, ref } from 'vue';\n  import { IconCalendar } from '@arco-design/web-vue/es/icon';\n\n  export default {\n    setup() {\n      const selected = ref([]);\n\n      return {\n        selected,\n        treeData,\n      };\n    },\n  };\n\n  const treeData = [\n    {\n      key: 'node1',\n      icon: () => h(IconCalendar),\n      title: 'node1',\n      children: [\n        {\n          key: 'node2',\n          title: 'node2',\n        },\n      ],\n    },\n    {\n      key: 'node3',\n      title: 'node3',\n      icon: () => h(IconCalendar),\n      children: [\n        {\n          key: 'node4',\n          title: 'node4',\n        },\n        {\n          key: 'node5',\n          title: 'node5',\n        },\n      ],\n    },\n  ];\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/tree-select/__demo__/popup-visible.md",
    "content": "```yaml\ntitle:\n  zh-CN: 控制下拉框的展开收起\n  en-US: Control Collapse\n```\n\n## zh-CN\n\n通过 `popupVisible` (支持 `v-model`) 控制下拉框的展开和收起。\n\n---\n\n## en-US\n\nThe dropdown expanded by default. Use popupVisible and onVisibleChange to control the expansion and collapse of the dropdown.\n\nFor example, in this demo, onVisibleChange is triggered when the mouse moves out of the dropdown and the popup, the parameter is false, and the dropdown box is collapsed.\n\n---\n\n```vue\n<template>\n  <div style=\"margin-bottom: 24px;\">\n    <a-button type=\"primary\" @click=\"onClick\">toggle</a-button>\n  </div>\n  <a-tree-select\n    :popupVisible=\"popupVisible\"\n    :allow-clear=\"true\"\n    :data=\"treeData\"\n    placeholder=\"Please select ...\"\n    style=\"width: 300px\"\n  ></a-tree-select>\n</template>\n<script>\n  import { ref } from 'vue';\n\n  export default {\n    setup() {\n      const popupVisible = ref(false);\n      function onClick() {\n        popupVisible.value = !popupVisible.value;\n      }\n\n      return {\n        onClick,\n        popupVisible,\n        treeData,\n      };\n    },\n  };\n\n  const treeData = [\n    {\n      key: 'node1',\n      title: 'Trunk',\n      children: [\n        {\n          key: 'node2',\n          title: 'Leaf',\n        },\n      ],\n    },\n    {\n      key: 'node3',\n      title: 'Trunk2',\n      children: [\n        {\n          key: 'node4',\n          title: 'Leaf',\n        },\n        {\n          key: 'node5',\n          title: 'Leaf',\n        },\n      ],\n    },\n  ];\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/tree-select/__demo__/search-remote.md",
    "content": "```yaml\ntitle:\n  zh-CN: 远程搜索\n  en-US: Remote search\n```\n\n## zh-CN\n\n监听 `search` 事件，在事件处理函数中获取数据并更新 `treeData`。 自定义搜索逻辑时，建议关闭内部过滤逻辑（`:disable-filter=\"true\"`），以免影响自定义结果。\n\n---\n\n## en-US\n\nListen to the `search` event, get the data in the event processing function and update the `treeData`. When customizing the search logic, it is recommended to turn off the internal filtering logic (`:disable-filter=\"true\"`) to prevent the customized results be affected.\n\n---\n\n```vue\n<template>\n  <a-tree-select\n    :allow-search=\"true\"\n    :allow-clear=\"true\"\n    :disable-filter=\"true\"\n    :data=\"treeData\"\n    :loading=\"loading\"\n    style=\"width: 300px\"\n    placeholder=\"Please select ...\"\n    @search=\"onSearch\"\n  ></a-tree-select>\n</template>\n<script>\n  import { ref } from 'vue';\n\n  export default {\n    setup() {\n      const treeData = ref(defaultTreeData);\n      const loading = ref(false);\n\n      function searchData(keyword) {\n        const loop = (data) => {\n          const result = [];\n          data.forEach(item => {\n            if (item.title.toLowerCase().indexOf(keyword.toLowerCase()) > -1) {\n              result.push({...item});\n            } else if (item.children) {\n              const filterData = loop(item.children);\n              if (filterData.length) {\n                result.push({\n                  ...item,\n                  children: filterData\n                })\n              }\n            }\n          })\n          return result;\n        }\n\n        return loop(defaultTreeData);\n      }\n\n      const onSearch = (searchKey) => {\n        loading.value = true;\n        setTimeout(() => {\n          loading.value = false;\n          treeData.value = searchData(searchKey);\n        }, 200)\n      };\n\n      return {\n        treeData,\n        loading,\n        onSearch,\n      };\n    },\n  };\n\n  const defaultTreeData = [\n    {\n      title: 'Trunk 0-0',\n      key: '0-0',\n      children: [\n        {\n          title: 'Branch 0-0-1',\n          key: '0-0-1',\n          children: [\n            {\n              title: 'Leaf 0-0-1-1',\n              key: '0-0-1-1'\n            },\n            {\n              title: 'Leaf 0-0-1-2',\n              key: '0-0-1-2'\n            }\n          ]\n        },\n      ],\n    },\n    {\n      title: 'Trunk 0-1',\n      key: '0-1',\n      children: [\n        {\n          title: 'Branch 0-1-1',\n          key: '0-1-1',\n          children: [\n            {\n              title: 'Leaf 0-1-1-0',\n              key: '0-1-1-0',\n            }\n          ]\n        },\n        {\n          title: 'Branch 0-1-2',\n          key: '0-1-2',\n          children: [\n            {\n              title: 'Leaf 0-1-2-0',\n              key: '0-1-2-0',\n            }\n          ]\n        },\n      ],\n    },\n  ];\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/tree-select/__demo__/search.md",
    "content": "```yaml\ntitle:\n  zh-CN: 搜索\n  en-US: Search\n```\n\n## zh-CN\n\n设置 `:allow-search=\"true\"` 启用搜索功能。动态加载时候只能在已加载数据中进行搜索。默认的关键字搜索是从`value`字段匹配。也可以传入 `filterTreeNode`自定义过滤方式。\n\n---\n\n## en-US\n\nSet `:allow-search=\"true\"` to enable the search function. You can only search in the loaded data during dynamic loading. The default keyword search is to match from the `value` field. You can also pass in `filterTreeNode` to customize the filtering method.\n\n---\n\n```vue\n<template>\n  <a-space>\n    <a-tree-select\n      :allow-search=\"true\"\n      :allow-clear=\"true\"\n      :data=\"treeData\"\n      placeholder=\"Please select ...\"\n      style=\"width: 300px\"\n    ></a-tree-select>\n    <a-tree-select\n      :allow-search=\"true\"\n      :allow-clear=\"true\"\n      :data=\"treeData\"\n      :filter-tree-node=\"filterTreeNode\"\n      placeholder=\"Please select ...\"\n      style=\"width: 300px\"\n    ></a-tree-select>\n  </a-space>\n</template>\n<script>\n  import { ref } from 'vue';\n\n  export default {\n    setup() {\n      function filterTreeNode(searchValue, nodeData) {\n        return nodeData.title.toLowerCase().indexOf(searchValue.toLowerCase()) > -1;\n      }\n\n      return {\n        filterTreeNode,\n        treeData,\n      };\n    },\n  };\n\n  const treeData = [\n    {\n      title: 'Trunk 0-0',\n      key: '0-0',\n      children: [\n        {\n          title: 'Branch 0-0-1',\n          key: '0-0-1',\n          children: [\n            {\n              title: 'Leaf 0-0-1-1',\n              key: '0-0-1-1'\n            },\n            {\n              title: 'Leaf 0-0-1-2',\n              key: '0-0-1-2'\n            }\n          ]\n        },\n      ],\n    },\n    {\n      title: 'Trunk 0-1',\n      key: '0-1',\n      children: [\n        {\n          title: 'Branch 0-1-1',\n          key: '0-1-1',\n          children: [\n            {\n              title: 'Leaf 0-1-1-0',\n              key: '0-1-1-0',\n            }\n          ]\n        },\n        {\n          title: 'Branch 0-1-2',\n          key: '0-1-2',\n          children: [\n            {\n              title: 'Leaf 0-1-2-0',\n              key: '0-1-2-0',\n            }\n          ]\n        },\n      ],\n    },\n  ];\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/tree-select/__demo__/size.md",
    "content": "```yaml\ntitle:\n  zh-CN: 不同尺寸\n  en-US: Size\n```\n\n## zh-CN\n\n设置 `size` 可以使用四种尺寸（small, default, large, huge）的选择器。高度分别对应 24px、28px、32px、36px。\n\n---\n\n## en-US\n\nFour sizes (small, default, large, huge) can be selected through `size`. The height corresponds to 24px, 28px, 32px, 36px.\n\n---\n\n```vue\n<template>\n  <div style=\"margin-bottom: 20px;\">\n    <a-radio-group v-model=\"size\" type='button'>\n      <a-radio value=\"mini\">mini</a-radio>\n      <a-radio value=\"small\">small</a-radio>\n      <a-radio value=\"medium\">medium</a-radio>\n      <a-radio value=\"large\">large</a-radio>\n    </a-radio-group>\n  </div>\n  <a-tree-select\n    defaultValue=\"node1\"\n    :size=\"size\"\n    :data=\"treeData\"\n    placeholder=\"Please select ...\"\n    style=\"width: 300px;\"\n  ></a-tree-select>\n</template>\n<script>\n  import { ref } from 'vue';\n\n  export default {\n    setup() {\n      const size = ref('medium');\n\n      return {\n        size,\n        treeData,\n      };\n    },\n  };\n\n  const treeData = [\n    {\n      key: 'node1',\n      title: 'node1',\n      disabled: true,\n      children: [\n        {\n          key: 'node2',\n          title: 'node2',\n        },\n      ],\n    },\n    {\n      key: 'node3',\n      title: 'node3',\n      children: [\n        {\n          key: 'node4',\n          title: 'node4',\n          isLeaf: true,\n        },\n        {\n          key: 'node5',\n          title: 'node5',\n          isLeaf: true,\n        },\n      ],\n    },\n  ];\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/tree-select/__demo__/trigger-element.md",
    "content": "```yaml\ntitle:\n  zh-CN: 自定义触发元素\n  en-US: Customize trigger element\n```\n\n## zh-CN\n\n自定义触发元素。\n\n---\n\n## en-US\n\nCustomize trigger element.\n\n\n---\n\n```vue\n<template>\n  <a-tree-select\n    :data=\"treeData\"\n    default-value=\"node1\"\n    @change=\"onChange\"\n  >\n    <template #trigger>\n      <a-typography-paragraph style=\"width: 300px\">\n        You selected: <a href='javascript: void(0)'>{{ text }}</a>\n      </a-typography-paragraph>\n    </template>\n  </a-tree-select>\n</template>\n<script>\n  import { ref } from 'vue';\n\n  export default {\n    setup() {\n      const text = ref('node1');\n\n      function onChange(selected) {\n        text.value = selected;\n      }\n\n      return {\n        treeData,\n        text,\n        onChange,\n      };\n    },\n  };\n\n  const treeData = [\n    {\n      key: 'node1',\n      title: 'node1',\n      children: [\n        {\n          key: 'node2',\n          title: 'node2',\n        },\n      ],\n    },\n    {\n      key: 'node3',\n      title: 'node3',\n      children: [\n        {\n          key: 'node4',\n          title: 'node4',\n        },\n        {\n          key: 'node5',\n          title: 'node5',\n          children: [\n            {\n              key: 'node6',\n              title: 'node6',\n            },\n            {\n              key: 'node7',\n              title: 'node7',\n            },\n          ]\n        },\n      ],\n    },\n  ];\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/tree-select/__demo__/virtual.md",
    "content": "```yaml\ntitle:\n  zh-CN: 虚拟列表\n  en-US: Virtual List\n```\n\n## zh-CN\n\n通过指定 `treeProps.virtualListProps` 来开启虚拟列表，在大量数据时获得高性能表现。\n\n---\n\n## en-US\n\nBy specifying `treeProps.virtualListProps` to turn on the virtual list, high performance can be obtained when a large\namount of data is used.\n\n```vue\n<template>\n  <a-tree-select\n    :data=\"treeData\"\n    :allow-search=\"{\n      retainInputValue: true\n    }\"\n    multiple\n    tree-checkable\n    :scrollbar=\"false\"\n    tree-checked-strategy=\"parent\"\n    :treeProps=\"{\n      virtualListProps: {\n        height: 200,\n      },\n    }\"\n  />\n</template>\n<script>\nexport default {\n  setup() {\n    const treeData = loop();\n    return {\n      treeData\n    }\n  }\n}\n\nfunction loop(path = '0', level = 2) {\n  const list = [];\n  for (let i = 0; i < 10; i += 1) {\n    const key = `${path}-${i}`;\n    const treeNode = {\n      title: key,\n      key,\n    };\n\n    if (level > 0) {\n      treeNode.children = loop(key, level - 1);\n    }\n\n    list.push(treeNode);\n  }\n  return list;\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/tree-select/__test__/__snapshots__/demo.test.ts.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`<tree-select> demo: render [basic] correctly 1`] = `\n\"<span class=\\\\\"arco-select-view-single arco-select-view arco-select-view-size-medium\\\\\" style=\\\\\"width: 300px;\\\\\" title=\\\\\"\\\\\"><!----><input class=\\\\\"arco-select-view-input\\\\\" readonly=\\\\\"\\\\\" placeholder=\\\\\"Please select ...\\\\\" value=\\\\\"\\\\\"><span class=\\\\\"arco-select-view-value arco-select-view-value-hidden\\\\\"><!----></span><span class=\\\\\"arco-select-view-suffix\\\\\"><!----><span class=\\\\\"arco-select-view-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down arco-select-view-arrow-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n<!----></span></span>\"\n`;\n\nexports[`<tree-select> demo: render [checkable] correctly 1`] = `\n\"<div style=\\\\\"margin-bottom: 24px;\\\\\"><label class=\\\\\"arco-checkbox\\\\\"><input type=\\\\\"checkbox\\\\\" class=\\\\\"arco-checkbox-target\\\\\" value=\\\\\"false\\\\\"><span class=\\\\\"arco-icon-hover arco-checkbox-icon-hover\\\\\"><div class=\\\\\"arco-checkbox-icon\\\\\"><!----></div></span><span class=\\\\\"arco-checkbox-label\\\\\"> treeCheckStrictly </span></label></div>\n<span class=\\\\\"arco-select-view arco-select-view-size-medium arco-select-view-has-suffix arco-select-view-has-placeholder arco-select-view-multiple\\\\\" style=\\\\\"width: 300px;\\\\\"><span class=\\\\\"arco-select-view-mirror\\\\\">Please select ...</span>\n<!---->\n<transition-group-stub tag=\\\\\"span\\\\\" name=\\\\\"input-tag-zoom\\\\\" appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\" class=\\\\\"arco-select-view-inner\\\\\"><input class=\\\\\"arco-select-view-input\\\\\" style=\\\\\"width: 12px;\\\\\" placeholder=\\\\\"Please select ...\\\\\"></transition-group-stub>\n<!----><span class=\\\\\"arco-select-view-suffix\\\\\"><!----><span class=\\\\\"arco-select-view-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down arco-select-view-arrow-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n<!---->\n<!----></span></span>\"\n`;\n\nexports[`<tree-select> demo: render [checked-strategy] correctly 1`] = `\n\"<div style=\\\\\"margin-bottom: 24px;\\\\\"><span class=\\\\\"arco-radio-group-button arco-radio-group-size-medium arco-radio-group-direction-horizontal\\\\\"><label class=\\\\\"arco-radio-button arco-radio-checked\\\\\"><input type=\\\\\"radio\\\\\" checked=\\\\\"\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"all\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">show all</span></label><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"parent\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">show parent</span></label><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"child\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">show child</span></label></span></div>\n<span class=\\\\\"arco-select-view arco-select-view-size-medium arco-select-view-has-suffix arco-select-view-has-placeholder arco-select-view-multiple\\\\\" style=\\\\\"width: 300px;\\\\\"><span class=\\\\\"arco-select-view-mirror\\\\\">Please select ...</span>\n<!---->\n<transition-group-stub tag=\\\\\"span\\\\\" name=\\\\\"input-tag-zoom\\\\\" appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\" class=\\\\\"arco-select-view-inner\\\\\"><input class=\\\\\"arco-select-view-input\\\\\" style=\\\\\"width: 12px;\\\\\" placeholder=\\\\\"Please select ...\\\\\"></transition-group-stub>\n<!----><span class=\\\\\"arco-select-view-suffix\\\\\"><!----><span class=\\\\\"arco-select-view-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down arco-select-view-arrow-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n<!---->\n<!----></span></span>\"\n`;\n\nexports[`<tree-select> demo: render [control] correctly 1`] = `\n\"<span class=\\\\\"arco-select-view-single arco-select-view arco-select-view-size-medium\\\\\" style=\\\\\"width: 300px;\\\\\" title=\\\\\"Leaf\\\\\"><!----><input class=\\\\\"arco-select-view-input arco-select-view-input-hidden\\\\\" readonly=\\\\\"\\\\\" placeholder=\\\\\"Please select ...\\\\\" value=\\\\\"\\\\\"><span class=\\\\\"arco-select-view-value\\\\\">Leaf</span><span class=\\\\\"arco-select-view-suffix\\\\\"><!----><span class=\\\\\"arco-select-view-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down arco-select-view-arrow-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n<!----></span></span>\"\n`;\n\nexports[`<tree-select> demo: render [dropdown-slots] correctly 1`] = `\n\"<form class=\\\\\"arco-form arco-form-layout-inline arco-form-size-medium\\\\\">\n  <div class=\\\\\"arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-inline\\\\\">\n    <div class=\\\\\"arco-form-item-label-col\\\\\"><label class=\\\\\"arco-form-item-label\\\\\">\n        <!--v-if-->empty\n        <!--v-if-->\n        <!--v-if-->\n      </label></div>\n    <div class=\\\\\"arco-form-item-wrapper-col\\\\\">\n      <div class=\\\\\"arco-form-item-content-wrapper\\\\\">\n        <div class=\\\\\"arco-form-item-content arco-form-item-content-flex\\\\\"><button type=\\\\\"button\\\\\" role=\\\\\"switch\\\\\" aria-checked=\\\\\"false\\\\\" class=\\\\\"arco-switch arco-switch-type-circle\\\\\"><span class=\\\\\"arco-switch-handle\\\\\"><span class=\\\\\"arco-switch-handle-icon\\\\\"></span></span><!--  prettier-ignore  -->\n            <!--v-if-->\n          </button></div>\n      </div>\n      <!--v-if-->\n      <!--v-if-->\n    </div>\n  </div>\n  <div class=\\\\\"arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-inline\\\\\">\n    <div class=\\\\\"arco-form-item-label-col\\\\\"><label class=\\\\\"arco-form-item-label\\\\\">\n        <!--v-if-->showHeaderOnEmpty\n        <!--v-if-->\n        <!--v-if-->\n      </label></div>\n    <div class=\\\\\"arco-form-item-wrapper-col\\\\\">\n      <div class=\\\\\"arco-form-item-content-wrapper\\\\\">\n        <div class=\\\\\"arco-form-item-content arco-form-item-content-flex\\\\\"><button type=\\\\\"button\\\\\" role=\\\\\"switch\\\\\" aria-checked=\\\\\"false\\\\\" class=\\\\\"arco-switch arco-switch-type-circle\\\\\"><span class=\\\\\"arco-switch-handle\\\\\"><span class=\\\\\"arco-switch-handle-icon\\\\\"></span></span><!--  prettier-ignore  -->\n            <!--v-if-->\n          </button></div>\n      </div>\n      <!--v-if-->\n      <!--v-if-->\n    </div>\n  </div>\n  <div class=\\\\\"arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-inline\\\\\">\n    <div class=\\\\\"arco-form-item-label-col\\\\\"><label class=\\\\\"arco-form-item-label\\\\\">\n        <!--v-if-->showFooterOnEmpty\n        <!--v-if-->\n        <!--v-if-->\n      </label></div>\n    <div class=\\\\\"arco-form-item-wrapper-col\\\\\">\n      <div class=\\\\\"arco-form-item-content-wrapper\\\\\">\n        <div class=\\\\\"arco-form-item-content arco-form-item-content-flex\\\\\"><button type=\\\\\"button\\\\\" role=\\\\\"switch\\\\\" aria-checked=\\\\\"false\\\\\" class=\\\\\"arco-switch arco-switch-type-circle\\\\\"><span class=\\\\\"arco-switch-handle\\\\\"><span class=\\\\\"arco-switch-handle-icon\\\\\"></span></span><!--  prettier-ignore  -->\n            <!--v-if-->\n          </button></div>\n      </div>\n      <!--v-if-->\n      <!--v-if-->\n    </div>\n  </div>\n</form>\n<span class=\\\\\"arco-select-view-single arco-select-view arco-select-view-size-medium\\\\\" style=\\\\\"width: 300px;\\\\\" title=\\\\\"\\\\\"><!----><input class=\\\\\"arco-select-view-input\\\\\" readonly=\\\\\"\\\\\" placeholder=\\\\\"Please select ...\\\\\" value=\\\\\"\\\\\"><span class=\\\\\"arco-select-view-value arco-select-view-value-hidden\\\\\"><!----></span><span class=\\\\\"arco-select-view-suffix\\\\\"><!----><span class=\\\\\"arco-select-view-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down arco-select-view-arrow-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n<!----></span></span>\"\n`;\n\nexports[`<tree-select> demo: render [fallback] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-vertical\\\\\" style=\\\\\"column-gap: 24px; row-gap: 24px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-select-view-single arco-select-view arco-select-view-size-medium\\\\\" style=\\\\\"width: 300px;\\\\\" title=\\\\\"node0\\\\\"><!----><input class=\\\\\"arco-select-view-input arco-select-view-input-hidden\\\\\" readonly=\\\\\"\\\\\" placeholder=\\\\\"Please select ...\\\\\" value=\\\\\"\\\\\"><span class=\\\\\"arco-select-view-value\\\\\">node0</span><span class=\\\\\"arco-select-view-suffix\\\\\"><!----><span class=\\\\\"arco-select-view-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down arco-select-view-arrow-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n    <!----></span></span>\n    <!---->\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-select-view-single arco-select-view arco-select-view-size-medium\\\\\" style=\\\\\"width: 300px;\\\\\" title=\\\\\"\\\\\"><!----><input class=\\\\\"arco-select-view-input\\\\\" readonly=\\\\\"\\\\\" placeholder=\\\\\"Please select ...\\\\\" value=\\\\\"\\\\\"><span class=\\\\\"arco-select-view-value arco-select-view-value-hidden\\\\\"><!----></span><span class=\\\\\"arco-select-view-suffix\\\\\"><!----><span class=\\\\\"arco-select-view-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down arco-select-view-arrow-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n    <!----></span></span>\n    <!---->\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-select-view-single arco-select-view arco-select-view-size-medium\\\\\" style=\\\\\"width: 300px;\\\\\" title=\\\\\"++node0++\\\\\"><!----><input class=\\\\\"arco-select-view-input arco-select-view-input-hidden\\\\\" readonly=\\\\\"\\\\\" placeholder=\\\\\"Please select ...\\\\\" value=\\\\\"\\\\\"><span class=\\\\\"arco-select-view-value\\\\\">++node0++</span><span class=\\\\\"arco-select-view-suffix\\\\\"><!----><span class=\\\\\"arco-select-view-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down arco-select-view-arrow-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n    <!----></span></span>\n    <!---->\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-select-view arco-select-view-size-medium arco-select-view-disabled-input arco-select-view-has-tag arco-select-view-has-suffix arco-select-view-multiple\\\\\" style=\\\\\"width: 300px;\\\\\"><span class=\\\\\"arco-select-view-mirror\\\\\"></span>\n    <!---->\n    <transition-group-stub tag=\\\\\"span\\\\\" name=\\\\\"input-tag-zoom\\\\\" appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\" class=\\\\\"arco-select-view-inner\\\\\"><span class=\\\\\"arco-tag arco-tag-size-medium arco-tag-checked arco-select-view-tag\\\\\"><!--v-if-->node0<span class=\\\\\"arco-icon-hover arco-tag-icon-hover arco-tag-close-btn\\\\\" role=\\\\\"button\\\\\" aria-label=\\\\\"Close\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-close\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M9.857 9.858 24 24m0 0 14.142 14.142M24 24 38.142 9.858M24 24 9.857 38.142\\\\\"></path></svg></span>\n      <!--v-if--></span><span class=\\\\\"arco-tag arco-tag-size-medium arco-tag-checked arco-select-view-tag\\\\\"><!--v-if-->Leaf1<span class=\\\\\"arco-icon-hover arco-tag-icon-hover arco-tag-close-btn\\\\\" role=\\\\\"button\\\\\" aria-label=\\\\\"Close\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-close\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M9.857 9.858 24 24m0 0 14.142 14.142M24 24 38.142 9.858M24 24 9.857 38.142\\\\\"></path></svg></span>\n      <!--v-if--></span><input class=\\\\\"arco-select-view-input\\\\\" style=\\\\\"width: 12px;\\\\\" readonly=\\\\\"\\\\\">\n    </transition-group-stub>\n    <!----><span class=\\\\\"arco-select-view-suffix\\\\\"><!----><span class=\\\\\"arco-select-view-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down arco-select-view-arrow-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n    <!---->\n    <!----></span></span>\n    <!---->\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-select-view arco-select-view-size-medium arco-select-view-disabled-input arco-select-view-has-tag arco-select-view-has-suffix arco-select-view-multiple\\\\\" style=\\\\\"width: 300px;\\\\\"><span class=\\\\\"arco-select-view-mirror\\\\\"></span>\n    <!---->\n    <transition-group-stub tag=\\\\\"span\\\\\" name=\\\\\"input-tag-zoom\\\\\" appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\" class=\\\\\"arco-select-view-inner\\\\\"><span class=\\\\\"arco-tag arco-tag-size-medium arco-tag-checked arco-select-view-tag\\\\\"><!--v-if-->Leaf1<span class=\\\\\"arco-icon-hover arco-tag-icon-hover arco-tag-close-btn\\\\\" role=\\\\\"button\\\\\" aria-label=\\\\\"Close\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-close\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M9.857 9.858 24 24m0 0 14.142 14.142M24 24 38.142 9.858M24 24 9.857 38.142\\\\\"></path></svg></span>\n      <!--v-if--></span><input class=\\\\\"arco-select-view-input\\\\\" style=\\\\\"width: 12px;\\\\\" readonly=\\\\\"\\\\\">\n    </transition-group-stub>\n    <!----><span class=\\\\\"arco-select-view-suffix\\\\\"><!----><span class=\\\\\"arco-select-view-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down arco-select-view-arrow-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n    <!---->\n    <!----></span></span>\n    <!---->\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-select-view arco-select-view-size-medium arco-select-view-disabled-input arco-select-view-has-tag arco-select-view-has-suffix arco-select-view-multiple\\\\\" style=\\\\\"width: 300px;\\\\\"><span class=\\\\\"arco-select-view-mirror\\\\\"></span>\n    <!---->\n    <transition-group-stub tag=\\\\\"span\\\\\" name=\\\\\"input-tag-zoom\\\\\" appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\" class=\\\\\"arco-select-view-inner\\\\\"><span class=\\\\\"arco-tag arco-tag-size-medium arco-tag-checked arco-select-view-tag\\\\\"><!--v-if-->++node0++<span class=\\\\\"arco-icon-hover arco-tag-icon-hover arco-tag-close-btn\\\\\" role=\\\\\"button\\\\\" aria-label=\\\\\"Close\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-close\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M9.857 9.858 24 24m0 0 14.142 14.142M24 24 38.142 9.858M24 24 9.857 38.142\\\\\"></path></svg></span>\n      <!--v-if--></span><span class=\\\\\"arco-tag arco-tag-size-medium arco-tag-checked arco-select-view-tag\\\\\"><!--v-if-->Leaf1<span class=\\\\\"arco-icon-hover arco-tag-icon-hover arco-tag-close-btn\\\\\" role=\\\\\"button\\\\\" aria-label=\\\\\"Close\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-close\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M9.857 9.858 24 24m0 0 14.142 14.142M24 24 38.142 9.858M24 24 9.857 38.142\\\\\"></path></svg></span>\n      <!--v-if--></span><input class=\\\\\"arco-select-view-input\\\\\" style=\\\\\"width: 12px;\\\\\" readonly=\\\\\"\\\\\">\n    </transition-group-stub>\n    <!----><span class=\\\\\"arco-select-view-suffix\\\\\"><!----><span class=\\\\\"arco-select-view-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down arco-select-view-arrow-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n    <!---->\n    <!----></span></span>\n    <!---->\n  </div>\n</div>\"\n`;\n\nexports[`<tree-select> demo: render [field-names] correctly 1`] = `\n\"<span class=\\\\\"arco-select-view-single arco-select-view arco-select-view-size-medium\\\\\" style=\\\\\"width: 300px;\\\\\" title=\\\\\"0-0-1\\\\\"><!----><input class=\\\\\"arco-select-view-input arco-select-view-input-hidden\\\\\" readonly=\\\\\"\\\\\" placeholder=\\\\\"Please select ...\\\\\" value=\\\\\"\\\\\"><span class=\\\\\"arco-select-view-value\\\\\">0-0-1</span><span class=\\\\\"arco-select-view-suffix\\\\\"><!----><span class=\\\\\"arco-select-view-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down arco-select-view-arrow-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n<!----></span></span>\"\n`;\n\nexports[`<tree-select> demo: render [label-in-value] correctly 1`] = `\n\"<span class=\\\\\"arco-select-view-single arco-select-view arco-select-view-size-medium\\\\\" style=\\\\\"width: 300px;\\\\\" title=\\\\\"Leaf\\\\\"><!----><input class=\\\\\"arco-select-view-input arco-select-view-input-hidden\\\\\" readonly=\\\\\"\\\\\" placeholder=\\\\\"Please select ...\\\\\" value=\\\\\"\\\\\"><span class=\\\\\"arco-select-view-value\\\\\">Leaf</span><span class=\\\\\"arco-select-view-suffix\\\\\"><!----><span class=\\\\\"arco-select-view-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down arco-select-view-arrow-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n<!----></span></span>\"\n`;\n\nexports[`<tree-select> demo: render [load-more] correctly 1`] = `\n\"<span class=\\\\\"arco-select-view-single arco-select-view arco-select-view-size-medium\\\\\" style=\\\\\"width: 300px;\\\\\" title=\\\\\"\\\\\"><!----><input class=\\\\\"arco-select-view-input\\\\\" readonly=\\\\\"\\\\\" placeholder=\\\\\"Please select ...\\\\\" value=\\\\\"\\\\\"><span class=\\\\\"arco-select-view-value arco-select-view-value-hidden\\\\\"><!----></span><span class=\\\\\"arco-select-view-suffix\\\\\"><!----><span class=\\\\\"arco-select-view-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down arco-select-view-arrow-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n<!----></span></span>\"\n`;\n\nexports[`<tree-select> demo: render [multiple] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 8px; row-gap: 8px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-select-view arco-select-view-size-medium arco-select-view-has-suffix arco-select-view-has-placeholder arco-select-view-multiple\\\\\" style=\\\\\"width: 300px;\\\\\"><span class=\\\\\"arco-select-view-mirror\\\\\">Please select ...</span>\n    <!---->\n    <transition-group-stub tag=\\\\\"span\\\\\" name=\\\\\"input-tag-zoom\\\\\" appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\" class=\\\\\"arco-select-view-inner\\\\\"><input class=\\\\\"arco-select-view-input\\\\\" style=\\\\\"width: 12px;\\\\\" placeholder=\\\\\"Please select ...\\\\\"></transition-group-stub>\n    <!----><span class=\\\\\"arco-select-view-suffix\\\\\"><!----><span class=\\\\\"arco-select-view-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down arco-select-view-arrow-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n    <!---->\n    <!----></span></span>\n    <!---->\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-select-view arco-select-view-size-medium arco-select-view-has-suffix arco-select-view-has-placeholder arco-select-view-multiple\\\\\" style=\\\\\"width: 300px;\\\\\"><span class=\\\\\"arco-select-view-mirror\\\\\">Please select ...</span>\n    <!---->\n    <transition-group-stub tag=\\\\\"span\\\\\" name=\\\\\"input-tag-zoom\\\\\" appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\" class=\\\\\"arco-select-view-inner\\\\\"><input class=\\\\\"arco-select-view-input\\\\\" style=\\\\\"width: 12px;\\\\\" placeholder=\\\\\"Please select ...\\\\\"></transition-group-stub>\n    <!----><span class=\\\\\"arco-select-view-suffix\\\\\"><!----><span class=\\\\\"arco-select-view-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down arco-select-view-arrow-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n    <!---->\n    <!----></span></span>\n    <!---->\n  </div>\n</div>\"\n`;\n\nexports[`<tree-select> demo: render [popup-visible] correctly 1`] = `\n\"<div style=\\\\\"margin-bottom: 24px;\\\\\"><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n    <!--v-if-->toggle\n  </button></div>\n<span class=\\\\\"arco-select-view-single arco-select-view arco-select-view-size-medium\\\\\" style=\\\\\"width: 300px;\\\\\" title=\\\\\"\\\\\"><!----><input class=\\\\\"arco-select-view-input\\\\\" readonly=\\\\\"\\\\\" placeholder=\\\\\"Please select ...\\\\\" value=\\\\\"\\\\\"><span class=\\\\\"arco-select-view-value arco-select-view-value-hidden\\\\\"><!----></span><span class=\\\\\"arco-select-view-suffix\\\\\"><!----><span class=\\\\\"arco-select-view-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down arco-select-view-arrow-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n<!----></span></span>\"\n`;\n\nexports[`<tree-select> demo: render [search] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 8px; row-gap: 8px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-select-view-single arco-select-view arco-select-view-size-medium arco-select-view-search\\\\\" style=\\\\\"width: 300px;\\\\\" title=\\\\\"\\\\\"><!----><input class=\\\\\"arco-select-view-input\\\\\" placeholder=\\\\\"Please select ...\\\\\" value=\\\\\"\\\\\"><span class=\\\\\"arco-select-view-value arco-select-view-value-hidden\\\\\"><!----></span><span class=\\\\\"arco-select-view-suffix\\\\\"><!----><span class=\\\\\"arco-select-view-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down arco-select-view-arrow-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n    <!----></span></span>\n    <!---->\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-select-view-single arco-select-view arco-select-view-size-medium arco-select-view-search\\\\\" style=\\\\\"width: 300px;\\\\\" title=\\\\\"\\\\\"><!----><input class=\\\\\"arco-select-view-input\\\\\" placeholder=\\\\\"Please select ...\\\\\" value=\\\\\"\\\\\"><span class=\\\\\"arco-select-view-value arco-select-view-value-hidden\\\\\"><!----></span><span class=\\\\\"arco-select-view-suffix\\\\\"><!----><span class=\\\\\"arco-select-view-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down arco-select-view-arrow-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n    <!----></span></span>\n    <!---->\n  </div>\n</div>\"\n`;\n\nexports[`<tree-select> demo: render [search-remote] correctly 1`] = `\n\"<span class=\\\\\"arco-select-view-single arco-select-view arco-select-view-size-medium arco-select-view-search\\\\\" style=\\\\\"width: 300px;\\\\\" title=\\\\\"\\\\\"><!----><input class=\\\\\"arco-select-view-input\\\\\" placeholder=\\\\\"Please select ...\\\\\" value=\\\\\"\\\\\"><span class=\\\\\"arco-select-view-value arco-select-view-value-hidden\\\\\"><!----></span><span class=\\\\\"arco-select-view-suffix\\\\\"><!----><span class=\\\\\"arco-select-view-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down arco-select-view-arrow-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n<!----></span></span>\"\n`;\n\nexports[`<tree-select> demo: render [size] correctly 1`] = `\n\"<div style=\\\\\"margin-bottom: 20px;\\\\\"><span class=\\\\\"arco-radio-group-button arco-radio-group-size-medium arco-radio-group-direction-horizontal\\\\\"><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"mini\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">mini</span></label><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"small\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">small</span></label><label class=\\\\\"arco-radio-button arco-radio-checked\\\\\"><input type=\\\\\"radio\\\\\" checked=\\\\\"\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"medium\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">medium</span></label><label class=\\\\\"arco-radio-button\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"large\\\\\"><span class=\\\\\"arco-radio-button-content\\\\\">large</span></label></span></div>\n<span class=\\\\\"arco-select-view-single arco-select-view arco-select-view-size-medium\\\\\" style=\\\\\"width: 300px;\\\\\" title=\\\\\"node1\\\\\"><!----><input class=\\\\\"arco-select-view-input arco-select-view-input-hidden\\\\\" readonly=\\\\\"\\\\\" placeholder=\\\\\"Please select ...\\\\\" value=\\\\\"\\\\\"><span class=\\\\\"arco-select-view-value\\\\\">node1</span><span class=\\\\\"arco-select-view-suffix\\\\\"><!----><span class=\\\\\"arco-select-view-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down arco-select-view-arrow-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n<!----></span></span>\"\n`;\n\nexports[`<tree-select> demo: render [trigger-element] correctly 1`] = `\n\"<div class=\\\\\"arco-typography\\\\\" style=\\\\\"width: 300px;\\\\\"> You selected: <a href=\\\\\"javascript: void(0)\\\\\">node1</a>\n  <!---->\n  <!--v-if-->\n  <!--v-if-->\n  <!--v-if-->\n</div>\"\n`;\n\nexports[`<tree-select> demo: render [virtual] correctly 1`] = `\n\"<span class=\\\\\"arco-select-view arco-select-view-size-medium arco-select-view-has-suffix arco-select-view-has-placeholder arco-select-view-multiple\\\\\"><span class=\\\\\"arco-select-view-mirror\\\\\"><!----></span>\n<!---->\n<transition-group-stub tag=\\\\\"span\\\\\" name=\\\\\"input-tag-zoom\\\\\" appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\" class=\\\\\"arco-select-view-inner\\\\\"><input class=\\\\\"arco-select-view-input\\\\\" style=\\\\\"width: 12px;\\\\\"></transition-group-stub>\n<!----><span class=\\\\\"arco-select-view-suffix\\\\\"><!----><span class=\\\\\"arco-select-view-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down arco-select-view-arrow-icon\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></span>\n<!---->\n<!----></span></span>\"\n`;\n"
  },
  {
    "path": "packages/web-vue/components/tree-select/__test__/demo.test.ts",
    "content": "import demoTest from '../../../scripts/demo-test';\n\ndemoTest('tree-select');\n"
  },
  {
    "path": "packages/web-vue/components/tree-select/hooks/use-filter-tree-node.ts",
    "content": "import { computed, toRefs, watchEffect, ref } from 'vue';\nimport { debounce } from '../../_utils/debounce';\nimport {\n  TreeFieldNames,\n  Node,\n  TreeNodeData,\n  TreeNodeKey,\n} from '../../tree/interface';\nimport { FilterTreeNode } from '../interface';\nimport { isUndefined } from '../../_utils/is';\n\nexport default function useFilterTreeNode(props: {\n  searchValue: string;\n  flattenTreeData: Node[];\n  filterMethod?: FilterTreeNode;\n  disableFilter?: boolean;\n  fieldNames: TreeFieldNames | undefined;\n}) {\n  const {\n    searchValue,\n    flattenTreeData,\n    filterMethod: propFilterMethod,\n    disableFilter,\n    fieldNames,\n  } = toRefs(props);\n\n  const keyField = computed(\n    () => (fieldNames.value?.key || 'key') as keyof TreeNodeData\n  );\n\n  const defaultFilterMethod = (keyword: string, node: TreeNodeData) => {\n    const key = node[keyField.value] as TreeNodeKey;\n    return !isUndefined(key) && String(key).indexOf(keyword) > -1;\n  };\n\n  const filterMethod = computed(\n    () => propFilterMethod?.value || defaultFilterMethod\n  );\n\n  const filteredKeysSet = ref<Set<TreeNodeKey>>();\n\n  const isFiltering = computed(() => !!searchValue.value);\n\n  const isEmptyFilterResult = computed(\n    () =>\n      !disableFilter?.value &&\n      isFiltering.value &&\n      filteredKeysSet.value &&\n      filteredKeysSet.value.size === 0\n  );\n\n  const filterTreeNode = computed(() =>\n    disableFilter?.value\n      ? undefined\n      : (node: TreeNodeData) => {\n          if (!isFiltering.value) return true;\n\n          const key = node[keyField.value] as TreeNodeKey;\n          return filteredKeysSet.value?.has(key || '') ?? false;\n        }\n  );\n\n  const updateFilteredKeysSet = debounce(\n    (treeData: Node[], keyword: string) => {\n      const hitNodes = treeData.filter((node) =>\n        filterMethod.value(keyword, node.treeNodeData)\n      );\n\n      const _keysSet = new Set<TreeNodeKey>();\n\n      hitNodes.forEach((node) => {\n        _keysSet.add(node.key);\n        node.pathParentKeys.forEach((_key) => {\n          _keysSet.add(_key);\n        });\n      });\n\n      filteredKeysSet.value = _keysSet;\n    },\n    100\n  );\n\n  watchEffect(() => {\n    if (disableFilter?.value) {\n      filteredKeysSet.value = undefined;\n    } else {\n      updateFilteredKeysSet(flattenTreeData.value, searchValue.value);\n    }\n  });\n\n  return {\n    isEmptyFilterResult,\n    filterTreeNode,\n  };\n}\n"
  },
  {
    "path": "packages/web-vue/components/tree-select/hooks/use-selected-state.ts",
    "content": "import { computed, ref, toRefs, watchEffect, watch } from 'vue';\nimport { isArray, isFunction, isObject } from '../../_utils/is';\nimport { FallbackOption, LabelValue, TreeSelectValue } from '../interface';\nimport {\n  Key2TreeNode,\n  TreeFieldNames,\n  TreeNodeData,\n  TreeNodeKey,\n} from '../../tree/interface';\n\nfunction isLabelValue(value: TreeNodeKey | LabelValue): value is LabelValue {\n  return isObject(value);\n}\n\nfunction isValidKey(key: TreeNodeKey) {\n  return key !== undefined && key !== null && key !== '';\n}\n\nfunction getKey(value: TreeNodeKey | LabelValue) {\n  return isLabelValue(value) ? value.value : value;\n}\n\nfunction getLabel(value: TreeNodeKey | LabelValue) {\n  return isLabelValue(value) ? value.label : undefined;\n}\n\nfunction isValidValue(value: TreeNodeKey | LabelValue) {\n  const key = getKey(value);\n  return isValidKey(key);\n}\n\nfunction getKeys(value: (TreeNodeKey | LabelValue)[]) {\n  return value.map(getKey).filter(isValidKey);\n}\n\nexport default function useSelectedState(props: {\n  defaultValue?: TreeSelectValue;\n  modelValue?: TreeSelectValue;\n  key2TreeNode: Key2TreeNode;\n  multiple?: boolean;\n  treeCheckable?: boolean;\n  treeCheckStrictly?: boolean;\n  fallbackOption?: FallbackOption;\n  fieldNames?: TreeFieldNames;\n}) {\n  const {\n    defaultValue,\n    modelValue,\n    key2TreeNode,\n    multiple,\n    treeCheckable,\n    fallbackOption,\n    fieldNames,\n  } = toRefs(props);\n\n  function normalizeValue(value: TreeSelectValue) {\n    const validValue = (isArray(value) ? value : [value]).filter(isValidValue);\n\n    return multiple?.value || treeCheckable?.value\n      ? validValue\n      : validValue.slice(0, 1);\n  }\n\n  function getLabelValues(\n    value: (TreeNodeKey | LabelValue)[],\n    originValue?: LabelValue[]\n  ) {\n    const res: LabelValue[] = [];\n    const validValue = value ? value.filter(isValidValue) : [];\n\n    if (validValue.length) {\n      const originValueMap = new Map<TreeNodeKey, LabelValue>();\n      originValue?.forEach((item) => {\n        originValueMap.set(item.value, item);\n      });\n\n      validValue.forEach((item) => {\n        const key = getKey(item);\n        const originValueItem = originValueMap.get(key);\n        const node = key2TreeNode.value.get(key);\n        let fallbackNodeData: TreeNodeData | null = null;\n        const nodeDataTitle = (fieldNames?.value?.title || 'title') as 'title';\n\n        if (!node) {\n          const fallbackResult = isFunction(fallbackOption?.value)\n            ? fallbackOption?.value(key)\n            : fallbackOption?.value;\n\n          if (fallbackResult === false) {\n            return;\n          }\n\n          if (isObject(fallbackResult)) {\n            fallbackNodeData = fallbackResult;\n          }\n        }\n\n        res.push({\n          ...(isLabelValue(item) ? item : {}),\n          ...(originValueItem || {}),\n          value: key,\n          label:\n            getLabel(item) ??\n            node?.title ??\n            originValueItem?.label ??\n            fallbackNodeData?.[nodeDataTitle] ??\n            key,\n        });\n      });\n    }\n\n    return res;\n  }\n\n  const computedModelValueKeys = ref<TreeNodeKey[]>();\n  const computedModelValue = ref<LabelValue[]>();\n  watchEffect(() => {\n    const isControlled = modelValue?.value !== undefined;\n    const normalizeModelValue = normalizeValue(modelValue?.value ?? []);\n    const modelValueKeys = getKeys(normalizeModelValue);\n    computedModelValue.value = isControlled\n      ? getLabelValues(modelValueKeys, getLabelValues(normalizeModelValue))\n      : undefined;\n    computedModelValueKeys.value = isControlled ? modelValueKeys : undefined;\n  });\n\n  const normalizeDefaultValue = normalizeValue(defaultValue?.value ?? []);\n  const defaultKeys = getKeys(normalizeDefaultValue);\n  const defaultLabelValues = getLabelValues(\n    defaultKeys,\n    getLabelValues(normalizeDefaultValue)\n  );\n  const localValueKeys = ref(defaultKeys || []);\n  const localValue = ref(defaultLabelValues);\n  watch(localValueKeys, () => {\n    localValue.value = getLabelValues(localValueKeys.value, defaultLabelValues);\n  });\n  watch([computedModelValueKeys, computedModelValue], ([valueKeys, value]) => {\n    localValueKeys.value = valueKeys || [];\n    localValue.value = value || [];\n  });\n\n  const selectedKeys = computed(\n    () => computedModelValueKeys.value ?? localValueKeys.value\n  );\n  const selectedValue = computed(\n    () => computedModelValue.value ?? localValue.value\n  );\n\n  return {\n    selectedKeys,\n    selectedValue,\n    setLocalSelectedKeys(keys: TreeNodeKey[]) {\n      localValueKeys.value = keys;\n    },\n    localSelectedKeys: localValueKeys,\n    localSelectedValue: localValue,\n  };\n}\n"
  },
  {
    "path": "packages/web-vue/components/tree-select/index.ts",
    "content": "import { App } from 'vue';\nimport { ArcoOptions } from '../_utils/types';\nimport { getComponentPrefix, setGlobalConfig } from '../_utils/global-config';\nimport _TreeSelect from './tree-select.vue';\n\nconst TreeSelect = Object.assign(_TreeSelect, {\n  install: (app: App, options?: ArcoOptions) => {\n    setGlobalConfig(app, options);\n    const componentPrefix = getComponentPrefix(options);\n\n    app.component(componentPrefix + _TreeSelect.name, _TreeSelect);\n  },\n});\n\nexport type TreeSelectInstance = InstanceType<typeof _TreeSelect>;\n\nexport default TreeSelect;\n"
  },
  {
    "path": "packages/web-vue/components/tree-select/interface.ts",
    "content": "import { CSSProperties } from 'vue';\nimport {\n  TreeFieldNames,\n  TreeNodeData,\n  TreeProps,\n  TreeNodeKey,\n  LoadMore,\n  CheckedStrategy,\n} from '../tree/interface';\nimport { TriggerProps } from '../trigger';\nimport { Size } from '../_utils/constant';\n\nexport interface LabelValue {\n  value: TreeNodeKey;\n  label: string | number;\n}\n\nexport type TreeSelectValue =\n  | TreeNodeKey\n  | TreeNodeKey[]\n  | LabelValue\n  | LabelValue[];\n\nexport type FilterTreeNode = (\n  searchKey: string,\n  nodeData: TreeNodeData\n) => boolean;\n\nexport type FallbackOption =\n  | boolean\n  | ((key: TreeNodeKey) => TreeNodeData | boolean);\n\nexport type ChangeHandler = (\n  selectedValue: TreeSelectValue | undefined\n) => void;\n\nexport type PopupVisibleChangeHandler = (popupVisible: boolean) => void;\n\nexport type SearchHandler = (searchKey: string) => void;\n\nexport type ClearHandler = () => void;\n\nexport interface TreeSelectProps {\n  disabled: boolean;\n  loading: boolean;\n  error: boolean;\n  size: Size;\n  border: boolean;\n  allowSearch: boolean;\n  allowClear: boolean;\n  placeholder: string | undefined;\n  retainInputValue: boolean;\n  maxTagCount: number | undefined;\n  defaultValue: TreeSelectValue | undefined;\n  modelValue: TreeSelectValue | undefined;\n  multiple: boolean;\n  fieldNames: TreeFieldNames | undefined;\n  data: TreeNodeData[];\n  labelInValue: boolean;\n  treeCheckable: boolean;\n  treeCheckStrictly: boolean;\n  treeCheckedStrategy: CheckedStrategy;\n  treeProps: Partial<TreeProps> | undefined;\n  triggerProps: Partial<TriggerProps> | undefined;\n  popupVisible: boolean | undefined;\n  defaultPopupVisible: boolean;\n  dropdownStyle: CSSProperties | undefined;\n  dropdownClassName: string | string[] | undefined;\n  filterTreeNode: FilterTreeNode | undefined;\n  loadMore: LoadMore | undefined;\n  disableFilter: boolean;\n  popupContainer?: string | HTMLElement;\n  fallbackOption: FallbackOption;\n  showHeaderOnEmpty?: boolean;\n  showFooterOnEmpty?: boolean;\n}\n"
  },
  {
    "path": "packages/web-vue/components/tree-select/panel.tsx",
    "content": "import { computed, defineComponent, PropType, ref, toRefs, Slots } from 'vue';\nimport Tree from '../tree';\nimport { TreeProps, TreeNodeKey } from '../tree/interface';\nimport { useScrollbar } from '../_hooks/use-scrollbar';\nimport { ScrollbarProps } from '../scrollbar';\nimport { Scrollbar } from '../index';\nimport { getPrefixCls } from '../_utils/global-config';\n\nexport default defineComponent({\n  name: 'TreeSelectPanel',\n  components: {\n    Tree,\n  },\n  props: {\n    treeProps: {\n      type: Object as PropType<Partial<TreeProps>>,\n      default: () => ({}),\n    },\n    selectedKeys: {\n      type: Array as PropType<TreeNodeKey[]>,\n    },\n    showCheckable: {\n      type: Boolean,\n    },\n    treeSlots: {\n      type: Object as PropType<Slots>,\n      default: () => ({}),\n    },\n    scrollbar: {\n      type: [Boolean, Object] as PropType<boolean | ScrollbarProps>,\n      default: true,\n    },\n  },\n  emits: ['change'],\n  setup(props, { emit }) {\n    const { showCheckable, selectedKeys, treeProps, scrollbar } = toRefs(props);\n    const { displayScrollbar, scrollbarProps } = useScrollbar(scrollbar);\n    const prefixCls = getPrefixCls('tree-select');\n    const refTree = ref();\n\n    const computedTreeProps = computed(() => {\n      return {\n        ...treeProps.value,\n        disableSelectActionOnly: true,\n        checkedKeys: showCheckable.value ? selectedKeys.value : [],\n        selectedKeys: showCheckable.value ? [] : selectedKeys.value,\n      };\n    });\n\n    const onSelect = (newVal: TreeNodeKey[], e: Event) => {\n      if (showCheckable.value) {\n        refTree.value?.toggleCheck?.(newVal[0], e);\n      } else {\n        emit('change', newVal);\n      }\n    };\n\n    const onCheck = (newVal: TreeNodeKey[]) => {\n      emit('change', newVal);\n    };\n\n    const renderTree = () => {\n      return (\n        <Tree\n          ref={refTree}\n          {...computedTreeProps.value}\n          // @ts-ignore\n          onSelect={onSelect}\n          onCheck={onCheck}\n          v-slots={props.treeSlots}\n        />\n      );\n    };\n\n    return () => {\n      if (displayScrollbar.value) {\n        return (\n          <Scrollbar\n            class={`${prefixCls}-tree-wrapper`}\n            {...scrollbarProps.value}\n          >\n            {renderTree()}\n          </Scrollbar>\n        );\n      }\n      return <div class={`${prefixCls}-tree-wrapper`}>{renderTree()}</div>;\n    };\n  },\n});\n"
  },
  {
    "path": "packages/web-vue/components/tree-select/style/index.less",
    "content": "@import './token.less';\n\n@tree-prefix-cls: ~'@{prefix}-tree';\n@tree-select-prefix-cls: ~'@{prefix}-tree-select';\n\n// .select-view(@tree-select-prefix-cls);\n\n.@{tree-select-prefix-cls} {\n  &-popup {\n    box-sizing: border-box;\n    padding: @tree-select-padding-popup-vertical 0;\n    background-color: var(~'@{arco-cssvars-prefix}-color-bg-popup');\n    border: 1px solid @select-popup-color-border;\n    border-radius: @select-popup-border-radius;\n    box-shadow: @select-popup-box-shadow;\n\n    .@{tree-select-prefix-cls}-tree-wrapper {\n      height: 100%;\n      max-height: @select-popup-max-height;\n      padding-right: @tree-select-padding-popup-right;\n      padding-left: @tree-select-padding-popup-left;\n      overflow: auto;\n    }\n\n    .@{tree-prefix-cls}-node {\n      padding-left: 0;\n    }\n  }\n\n  &-highlight {\n    font-weight: @font-weight-500;\n  }\n\n  &-has-header {\n    padding-top: 0;\n  }\n\n  &-header {\n    border-bottom: 1px solid @select-popup-color-border;\n  }\n\n  &-has-footer {\n    padding-bottom: 0;\n  }\n\n  &-footer {\n    border-top: 1px solid @select-popup-color-border;\n  }\n}\n"
  },
  {
    "path": "packages/web-vue/components/tree-select/style/index.ts",
    "content": "import '../../style/index.less';\nimport '../../_components/select-view/style/index.less';\nimport '../../empty/style';\nimport '../../trigger/style';\nimport '../../tree/style';\nimport './index.less';\n"
  },
  {
    "path": "packages/web-vue/components/tree-select/style/token.less",
    "content": "@import '../../style/theme/index.less';\n@import '../../_components/select-view/style/token.less';\n@import '../../select/style/token.less';\n\n@tree-select-padding-popup-left: @spacing-5;\n@tree-select-padding-popup-right: @spacing-2;\n@tree-select-padding-popup-vertical: @spacing-2;\n"
  },
  {
    "path": "packages/web-vue/components/tree-select/tree-select.vue",
    "content": "<template>\n  <Trigger\n    :class=\"`${prefixCls}-trigger`\"\n    auto-fit-popup-min-width\n    trigger=\"click\"\n    position=\"bl\"\n    :popup-offset=\"4\"\n    animation-name=\"slide-dynamic-origin\"\n    :prevent-focus=\"true\"\n    v-bind=\"triggerProps\"\n    :disabled=\"mergedDisabled\"\n    :popup-visible=\"panelVisible\"\n    :popup-container=\"popupContainer\"\n    :click-to-close=\"!allowSearch\"\n    auto-fit-transform-origin\n    @popupVisibleChange=\"onVisibleChange\"\n  >\n    <slot name=\"trigger\">\n      <SelectView\n        ref=\"refSelectView\"\n        :model-value=\"selectViewValue\"\n        :input-value=\"searchValue\"\n        :allow-search=\"Boolean(allowSearch)\"\n        :allow-clear=\"allowClear\"\n        :loading=\"loading\"\n        :size=\"size\"\n        :max-tag-count=\"maxTagCount\"\n        :disabled=\"mergedDisabled\"\n        :opened=\"panelVisible\"\n        :error=\"error\"\n        :bordered=\"border\"\n        :placeholder=\"placeholder\"\n        :multiple=\"isMultiple\"\n        v-bind=\"$attrs\"\n        @inputValueChange=\"onSearchValueChange\"\n        @clear=\"onInnerClear\"\n        @remove=\"onItemRemove\"\n        @blur=\"onBlur\"\n      >\n        <template v-if=\"$slots.prefix\" #prefix>\n          <slot name=\"prefix\" />\n        </template>\n        <template v-if=\"$slots.label\" #label=\"selectedData\">\n          <slot name=\"label\" v-bind=\"selectedData\" />\n        </template>\n      </SelectView>\n    </slot>\n    <template #content>\n      <div\n        :class=\"[\n          `${prefixCls}-popup`,\n          {\n            [`${prefixCls}-has-header`]: Boolean($slots.header),\n            [`${prefixCls}-has-footer`]: Boolean($slots.footer),\n          },\n          dropdownClassName,\n        ]\"\n        :style=\"computedDropdownStyle\"\n      >\n        <div\n          v-if=\"$slots.header && (!isEmpty || showHeaderOnEmpty)\"\n          :class=\"`${prefixCls}-header`\"\n        >\n          <slot name=\"header\" />\n        </div>\n        <slot v-if=\"loading\" name=\"loader\">\n          <Spin />\n        </slot>\n        <slot v-else-if=\"isEmpty\" name=\"empty\">\n          <component :is=\"TreeSelectEmpty ? TreeSelectEmpty : 'Empty'\" />\n        </slot>\n        <Panel\n          v-else\n          :selected-keys=\"selectedKeys\"\n          :show-checkable=\"treeCheckable\"\n          :scrollbar=\"scrollbar\"\n          :tree-props=\"{\n            actionOnNodeClick: selectable === 'leaf' ? 'expand' : undefined,\n            blockNode: true,\n            ...treeProps,\n            data,\n            checkStrictly: treeCheckStrictly,\n            checkedStrategy: treeCheckedStrategy,\n            fieldNames,\n            multiple,\n            loadMore,\n            filterTreeNode: computedFilterTreeNode,\n            size,\n            checkable: isCheckable,\n            selectable: isSelectable,\n            searchValue: searchValue,\n          }\"\n          :tree-slots=\"pickSubCompSlots($slots, 'tree')\"\n          @change=\"onSelectChange\"\n        />\n        <div\n          v-if=\"$slots.footer && (!isEmpty || showFooterOnEmpty)\"\n          :class=\"`${prefixCls}-footer`\"\n        >\n          <slot name=\"footer\" />\n        </div>\n      </div>\n    </template>\n  </Trigger>\n</template>\n<script lang=\"ts\">\nimport {\n  computed,\n  CSSProperties,\n  defineComponent,\n  nextTick,\n  PropType,\n  reactive,\n  ref,\n  toRefs,\n  StyleValue,\n  inject,\n} from 'vue';\nimport useMergeState from '../_hooks/use-merge-state';\nimport { LabelValue } from './interface';\nimport Trigger, { TriggerProps } from '../trigger';\nimport SelectView from '../_components/select-view/select-view';\nimport Panel from './panel';\nimport { getPrefixCls } from '../_utils/global-config';\nimport { configProviderInjectionKey } from '../config-provider/context';\nimport useSelectedState from './hooks/use-selected-state';\nimport useTreeData from '../tree/hooks/use-tree-data';\nimport {\n  TreeFieldNames,\n  TreeNodeData,\n  TreeProps,\n  TreeNodeKey,\n  Node,\n} from '../tree/interface';\nimport { isUndefined, isFunction, isObject } from '../_utils/is';\nimport Empty from '../empty';\nimport useFilterTreeNode from './hooks/use-filter-tree-node';\nimport Spin from '../spin';\nimport pickSubCompSlots from '../_utils/pick-sub-comp-slots';\nimport { Size } from '../_utils/constant';\nimport { useFormItem } from '../_hooks/use-form-item';\nimport {\n  getCheckedStateByCheck,\n  isNodeCheckable,\n} from '../tree/utils/check-utils';\nimport { isNodeSelectable } from '../tree/utils';\nimport { Data } from '../_utils/types';\nimport { ScrollbarProps } from '../scrollbar';\nimport { SelectViewValue } from '../_components/select-view/interface';\n\nexport default defineComponent({\n  name: 'TreeSelect',\n  components: {\n    Trigger,\n    SelectView,\n    Panel,\n    Empty,\n    Spin,\n  },\n  inheritAttrs: false,\n  props: {\n    /**\n     * @zh 是否禁用\n     * @en Whether to disable\n     * */\n    disabled: {\n      type: Boolean,\n    },\n    /**\n     * @zh 是否为加载中状态\n     * @en Whether it is loading state\n     * */\n    loading: {\n      type: Boolean,\n    },\n    /**\n     * @zh 是否为错误状态\n     * @en Whether it is an error state\n     * */\n    error: {\n      type: Boolean,\n    },\n    /**\n     * @zh 选择框的大小\n     * @en The size of the selection box.\n     * @values 'mini','small','medium','large'\n     * @defaultValue 'medium'\n     * */\n    size: {\n      type: String as PropType<Size>,\n    },\n    /**\n     * @zh 是否显示边框\n     * @en Whether to show the border\n     * */\n    border: {\n      type: Boolean,\n      default: true,\n    },\n    /**\n     * @zh 是否允许搜索\n     * @en Whether to allow searching\n     * @defaultValue false (single) \\| true (multiple)\n     * */\n    allowSearch: {\n      type: [Boolean, Object] as PropType<\n        boolean | { retainInputValue?: boolean }\n      >,\n      default: (props: Data) => Boolean(props.multiple),\n    },\n    /**\n     * @zh 是否允许清除\n     * @en Whether to allow clear\n     * */\n    allowClear: {\n      type: Boolean,\n    },\n    /**\n     * @zh 提示文案\n     * @en Prompt copy\n     * */\n    placeholder: {\n      type: String,\n    },\n    /**\n     * @zh 最多显示的标签数量，仅在多选模式有效\n     * @en The maximum number of labels displayed, only valid in multi-select mode\n     * */\n    maxTagCount: {\n      type: Number,\n    },\n    /**\n     * @zh 是否支持多选\n     * @en Whether to support multiple selection\n     * */\n    multiple: {\n      type: Boolean,\n    },\n\n    /**\n     * @zh 默认值\n     * @en Default value\n     * */\n    defaultValue: {\n      type: [String, Number, Array, Object] as PropType<\n        string | number | Array<string | number> | LabelValue | LabelValue[]\n      >,\n    },\n    /**\n     * @zh 绑定值\n     * @en Value\n     * */\n    modelValue: {\n      type: [String, Number, Array, Object] as PropType<\n        string | number | Array<string | number> | LabelValue | LabelValue[]\n      >,\n    },\n    /**\n     * @zh 指定节点数据中的字段名\n     * @en Specify the field name in the node data\n     * */\n    fieldNames: {\n      type: Object as PropType<TreeFieldNames>,\n    },\n    /**\n     * @zh 数据\n     * @en Data\n     * */\n    data: {\n      type: Array as PropType<TreeNodeData[]>,\n      default: () => [],\n    },\n    /**\n     * @zh 设置value格式。默认是string，设置为true时候，value格式为： { label: string, value: string }\n     * @en Set the value format. The default is string, when set to true, the value format is: {label: string, value: string}\n     * */\n    labelInValue: {\n      type: Boolean,\n    },\n    /**\n     * @zh 是否展示复选框\n     * @en Whether to show checkbox\n     * */\n    treeCheckable: {\n      type: Boolean,\n    },\n    /**\n     * @zh 父子节点是否关联\n     * @en Whether the parent and child nodes are related\n     * */\n    treeCheckStrictly: {\n      type: Boolean,\n    },\n    /**\n     * @zh 定制回显方式\n     * @en Customized echo method\n     * */\n    treeCheckedStrategy: {\n      type: String as PropType<'all' | 'parent' | 'child'>,\n      default: 'all',\n    },\n    /**\n     * @zh 可以接受所有 [Tree](/vue/component/tree) 组件的Props\n     * @en Can accept Props of all [Tree](/vue/component/tree) components\n     * */\n    treeProps: {\n      type: Object as PropType<Partial<TreeProps>>,\n    },\n    /**\n     * @zh 可以接受所有 [Trigger](/vue/component/trigger) 组件的Props\n     * @en Can accept Props of all [Trigger](/vue/component/trigger) components\n     * */\n    triggerProps: {\n      type: Object as PropType<Partial<TriggerProps>>,\n    },\n    /**\n     * @zh 弹出框是否可见\n     * @en Whether the pop-up box is visible\n     * @vModel\n     */\n    popupVisible: {\n      type: Boolean,\n      default: undefined,\n    },\n    /**\n     * @zh 默认弹出框是否可见\n     * @en Whether the default pop-up box is visible\n     * */\n    defaultPopupVisible: {\n      type: Boolean,\n    },\n    /**\n     * @zh 下拉框样式\n     * @en Drop-down box style\n     * */\n    dropdownStyle: {\n      type: Object as PropType<CSSProperties>,\n    },\n    /**\n     * @zh 下拉框样式 class\n     * @en Drop-down box style class\n     * */\n    dropdownClassName: {\n      type: [String, Array] as PropType<string | string[]>,\n    },\n    /**\n     * @zh 自定义节点过滤函数\n     * @en Custom node filter function\n     * */\n    filterTreeNode: {\n      type: Function as PropType<\n        (searchKey: string, nodeData: TreeNodeData) => boolean\n      >,\n    },\n    /**\n     * @zh 动态加载数据\n     * @en Load data dynamically\n     * */\n    loadMore: {\n      type: Function as PropType<(nodeData: TreeNodeData) => Promise<void>>,\n    },\n    /**\n     * @zh 禁用内部过滤逻辑\n     * @en Disable internal filtering logic\n     * */\n    disableFilter: {\n      type: Boolean,\n    },\n    /**\n     * @zh 弹出框的挂载容器\n     * @en Mount container for pop-up box\n     */\n    popupContainer: {\n      type: [String, Object] as PropType<string | HTMLElement>,\n    },\n    /**\n     * @zh 为 value 中找不到匹配项的 key 定义节点数据\n     * @en Customize node data for keys that do not match options\n     * @version 2.22.0\n     */\n    fallbackOption: {\n      type: [Boolean, Function] as PropType<\n        boolean | ((key: number | string) => TreeNodeData | boolean)\n      >,\n      default: true,\n    },\n    /**\n     * @zh 设置可选择的节点，默认全部可选\n     * @en Set the nodes that can be selected, all can be selected by default\n     * @version 2.27.0\n     */\n    selectable: {\n      type: [Boolean, String, Function] as PropType<\n        | boolean\n        | 'leaf'\n        | ((\n            node: TreeNodeData,\n            info: { isLeaf: boolean; level: number }\n          ) => boolean)\n      >,\n      default: true,\n    },\n    /**\n     * @zh 是否开启虚拟滚动条\n     * @en Whether to enable virtual scroll bar\n     * @version 2.39.0\n     */\n    scrollbar: {\n      type: [Boolean, Object] as PropType<boolean | ScrollbarProps>,\n      default: true,\n    },\n    /**\n     * @zh 空状态时是否显示header\n     * @en Whether to display the header in the empty state\n     */\n    showHeaderOnEmpty: {\n      type: Boolean as PropType<boolean>,\n      default: false,\n    },\n    /**\n     * @zh 空状态时是否显示footer\n     * @en Whether to display the footer in the empty state\n     */\n    showFooterOnEmpty: {\n      type: Boolean as PropType<boolean>,\n      default: false,\n    },\n    /**\n     * @zh 输入框的值\n     * @en The value of the input\n     * @vModel\n     * @version 2.55.0\n     */\n    inputValue: {\n      type: String,\n    },\n    /**\n     * @zh 输入框的默认值（非受控模式）\n     * @en The default value of the input (uncontrolled mode)\n     * @version 2.55.0\n     */\n    defaultInputValue: {\n      type: String,\n      default: '',\n    },\n  },\n  emits: {\n    /**\n     * @zh 值改变时触发\n     * @en Trigger when the value changes\n     * @param {string | number | LabelValue | Array<string | number> | LabelValue[] | undefined} value\n     */\n    'change': (\n      value:\n        | string\n        | number\n        | LabelValue\n        | Array<string | number>\n        | LabelValue[]\n        | undefined\n    ) => true,\n    'update:modelValue': (\n      value:\n        | string\n        | number\n        | LabelValue\n        | Array<string | number>\n        | LabelValue[]\n        | undefined\n    ) => true,\n    'update:inputValue': (inputValue: string) => true,\n    /**\n     * @zh 下拉框显示状态改变时触发\n     * @en Triggered when the status of the drop-down box changes\n     * @param {boolean} visible\n     */\n    'popup-visible-change': (visible: boolean) => true,\n    'update:popupVisible': (visible: boolean) => true,\n    /**\n     * @zh 搜索值变化时触发\n     * @en Triggered when the search value changes\n     * @param {string} searchKey\n     */\n    'search': (searchKey: string) => true,\n    /**\n     * @zh 点击清除时触发\n     * @en Triggered when clear is clicked\n     * */\n    'clear': () => true,\n    /**\n     * @zh 输入框的值发生改变时触发\n     * @en Triggered when the value of the input changes\n     * @param {string} inputValue\n     * @version 2.55.0\n     */\n    'inputValueChange': (inputValue: string) => true,\n  },\n  /**\n   * @zh 自定义触发元素\n   * @en Custom trigger element\n   * @slot trigger\n   */\n  /**\n   * @zh 前缀\n   * @en Prefix\n   * @slot prefix\n   */\n  /**\n   * @zh 自定义选择框显示\n   * @en Custom Label\n   * @slot label\n   * @binding data\n   */\n  /**\n   * @zh 定制加载中显示的内容\n   * @en Customizing the content displayed during loading\n   * @slot loader\n   */\n  /**\n   * @zh 定制空数据展示\n   * @en Custom empty data display\n   * @slot empty\n   */\n  /**\n   * @zh 定制 tree 组件的 switcher 图标\n   * @en Custom switcher icon for the tree component\n   * @slot tree-slot-switcher-icon\n   */\n  /**\n   * @zh 定制 tree 组件的节点图标\n   * @en Custom node icon for the tree component\n   * @slot tree-slot-icon\n   * @binding {TreeNodeData} node\n   * @version 2.18.0\n   */\n\n  /**\n   * @zh 定制 tree 组件的节点标题\n   * @en Custom the node title of the tree component\n   * @slot tree-slot-title\n   * @binding {string} title\n   */\n  /**\n   * @zh 定制 tree 组件的渲染额外节点内容\n   * @en Render additional node content of the tree component\n   * @slot tree-slot-extra\n   */\n  /**\n   * @zh 自定义下拉框页头\n   * @en The header of the drop-down box\n   * @slot header\n   */\n  /**\n   * @zh 自定义下拉框页脚\n   * @en The footer of the drop-down box\n   * @slot footer\n   */\n  setup(props, { emit, slots }) {\n    const {\n      defaultValue,\n      modelValue,\n      multiple,\n      popupVisible,\n      defaultPopupVisible,\n      treeCheckable,\n      treeCheckStrictly,\n      data,\n      fieldNames,\n      disabled,\n      labelInValue,\n      filterTreeNode,\n      disableFilter,\n      dropdownStyle,\n      treeProps,\n      fallbackOption,\n      selectable,\n      dropdownClassName,\n    } = toRefs(props);\n    const { mergedDisabled, eventHandlers } = useFormItem({\n      disabled,\n    });\n    const prefixCls = getPrefixCls('tree-select');\n    const configCtx = inject(configProviderInjectionKey, undefined);\n    const TreeSelectEmpty = configCtx?.slots.empty?.({\n      component: 'tree-select',\n    })?.[0];\n    const isMultiple = computed(() => multiple.value || treeCheckable.value);\n    const isSelectable = (\n      node: TreeNodeData,\n      info: { level: number; isLeaf: boolean }\n    ) => {\n      if (selectable.value === 'leaf') return info.isLeaf;\n      if (isFunction(selectable.value)) return selectable.value(node, info);\n      return selectable.value ?? false;\n    };\n    const isCheckable = computed(() =>\n      treeCheckable.value ? isSelectable : false\n    );\n    const retainInputValue = computed(\n      () =>\n        isObject(props.allowSearch) &&\n        Boolean(props.allowSearch.retainInputValue)\n    );\n    const { flattenTreeData, key2TreeNode } = useTreeData(\n      reactive({\n        treeData: data,\n        fieldNames,\n        selectable: isSelectable,\n        checkable: isCheckable,\n      })\n    );\n\n    const {\n      selectedKeys,\n      selectedValue,\n      setLocalSelectedKeys,\n      localSelectedKeys,\n      localSelectedValue,\n    } = useSelectedState(\n      reactive({\n        defaultValue,\n        modelValue,\n        key2TreeNode,\n        multiple,\n        treeCheckable,\n        treeCheckStrictly,\n        fallbackOption,\n        fieldNames,\n      })\n    );\n\n    function isNodeClosable(node: Node) {\n      return treeCheckable.value\n        ? isNodeCheckable(node)\n        : isNodeSelectable(node);\n    }\n\n    const selectViewValue = computed(() => {\n      if (isUndefined(selectedValue.value)) {\n        return [];\n      }\n      if (isMultiple.value && !mergedDisabled.value) {\n        return selectedValue.value.map((i) => {\n          const node = key2TreeNode.value.get(i.value);\n          return {\n            ...i,\n            closable: !node || isNodeClosable(node),\n          };\n        }) as SelectViewValue[];\n      }\n      return selectedValue.value as SelectViewValue[];\n    });\n\n    const setSelectedKeys = (newVal: TreeNodeKey[]) => {\n      setLocalSelectedKeys(newVal);\n\n      nextTick(() => {\n        const forEmitValue =\n          (labelInValue.value\n            ? localSelectedValue.value\n            : localSelectedKeys.value) || [];\n\n        const emitValue = isMultiple.value ? forEmitValue : forEmitValue[0];\n\n        emit('update:modelValue', emitValue);\n        emit('change', emitValue);\n        eventHandlers.value?.onChange?.();\n      });\n    };\n\n    const _inputValue = ref(props.defaultInputValue);\n    const computedInputValue = computed(\n      () => props.inputValue ?? _inputValue.value\n    );\n\n    const updateInputValue = (inputValue: string) => {\n      _inputValue.value = inputValue;\n      emit('update:inputValue', inputValue);\n      emit('inputValueChange', inputValue);\n    };\n\n    const handleInputValueChange = (inputValue: string) => {\n      if (inputValue !== computedInputValue.value) {\n        setPanelVisible(true);\n        updateInputValue(inputValue);\n        if (props.allowSearch) {\n          emit('search', inputValue);\n        }\n      }\n    };\n\n    const [panelVisible, setLocalPanelVisible] = useMergeState(\n      defaultPopupVisible.value,\n      reactive({\n        value: popupVisible,\n      })\n    );\n    const setPanelVisible = (visible: boolean) => {\n      if (visible !== panelVisible.value) {\n        setLocalPanelVisible(visible);\n        emit('popup-visible-change', visible);\n        emit('update:popupVisible', visible);\n      }\n\n      if (!visible) {\n        refSelectView.value &&\n          refSelectView.value.blur &&\n          refSelectView.value.blur();\n      }\n    };\n\n    const { isEmptyFilterResult, filterTreeNode: computedFilterTreeNode } =\n      useFilterTreeNode(\n        reactive({\n          searchValue: computedInputValue,\n          flattenTreeData,\n          filterMethod: filterTreeNode,\n          disableFilter,\n          fieldNames,\n        })\n      );\n\n    const isEmpty = computed(\n      () => !flattenTreeData.value.length || isEmptyFilterResult.value\n    );\n\n    const refSelectView = ref();\n\n    const computedDropdownStyle = computed<StyleValue[]>(() => [\n      dropdownStyle?.value || {},\n      treeProps?.value?.virtualListProps ? { 'max-height': 'unset' } : {},\n    ]);\n\n    const onBlur = () => {\n      if (!retainInputValue.value && computedInputValue.value) {\n        updateInputValue('');\n      }\n    };\n\n    return {\n      refSelectView,\n      prefixCls,\n      TreeSelectEmpty,\n      selectedValue,\n      selectedKeys,\n      mergedDisabled,\n      searchValue: computedInputValue,\n      panelVisible,\n      isEmpty,\n      computedFilterTreeNode,\n      isMultiple,\n      selectViewValue,\n      computedDropdownStyle,\n      onSearchValueChange: handleInputValueChange,\n      onSelectChange(newVal: string[]) {\n        setSelectedKeys(newVal);\n        if (!retainInputValue.value && computedInputValue.value) {\n          updateInputValue('');\n        }\n\n        if (!isMultiple.value) {\n          setPanelVisible(false);\n        }\n      },\n      onVisibleChange: setPanelVisible,\n      onInnerClear() {\n        setSelectedKeys([]);\n        emit('clear');\n      },\n      pickSubCompSlots,\n      isSelectable,\n      isCheckable,\n      onBlur,\n      onItemRemove(id: string) {\n        if (mergedDisabled.value) return;\n        const node = key2TreeNode.value.get(id);\n        if (treeCheckable.value && node) {\n          if (isNodeClosable(node)) {\n            const [newVal] = getCheckedStateByCheck({\n              node,\n              checked: false,\n              checkedKeys: selectedKeys.value,\n              indeterminateKeys: [],\n              checkStrictly: treeCheckStrictly.value,\n            });\n            setSelectedKeys(newVal);\n          }\n        } else {\n          const newVal = selectedKeys.value.filter((i) => i !== id);\n          setSelectedKeys(newVal);\n        }\n      },\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/trigger/CHANGELOG.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.55.1\n\n`2024-03-29`\n\n### 🐛 BugFix\n\n- fix animation direction for position popup ([#3045](https://github.com/arco-design/arco-design-vue/pull/3045))\n\n\n## 2.46.0\n\n`2023-05-12`\n\n### 🆕 Feature\n\n- add scrollToClose prop ([#2414](https://github.com/arco-design/arco-design-vue/pull/2414))\n\n\n## 2.44.7\n\n`2023-04-03`\n\n### 🐛 BugFix\n\n- Fix the problem of reporting errors in iframe ([#2300](https://github.com/arco-design/arco-design-vue/pull/2300))\n\n\n## 2.44.6\n\n`2023-03-31`\n\n### 💎 Enhancement\n\n- Optimize the problem that the popup position is not accurate in ShadowRoot ([#2273](https://github.com/arco-design/arco-design-vue/pull/2273))\n\n\n## 2.38.0-beta.2\n\n`2022-10-21`\n\n### 🐛 BugFix\n\n- Fix the problem of wrong arrow positioning in windows ([#1480](https://github.com/arco-design/arco-design-vue/pull/1480))\n\n\n## 2.35.1\n\n`2022-08-19`\n\n### 💎 Enhancement\n\n- Optimize the use of KeepAlive, close the pop-up layer when caching ([#1529](https://github.com/arco-design/arco-design-vue/pull/1529))\n\n\n## 2.32.0\n\n`2022-06-24`\n\n### 💎 Enhancement\n\n- Events can no longer be fired during popover animations ([#1337](https://github.com/arco-design/arco-design-vue/pull/1337))\n\n\n## 2.29.1\n\n`2022-06-02`\n\n### 💎 Enhancement\n\n- No longer blocks right-click default events by default ([#1231](https://github.com/arco-design/arco-design-vue/pull/1231))\n\n\n## 2.27.0\n\n`2022-05-13`\n\n### 💎 Enhancement\n\n- When the right button is triggered, click the trigger element to close the drop-down box ([#1111](https://github.com/arco-design/arco-design-vue/pull/1111))\n- Support pop-up component nesting ([#1111](https://github.com/arco-design/arco-design-vue/pull/1111))\n\n\n## 2.21.0\n\n`2022-03-25`\n\n### 🐛 BugFix\n\n- Fix the problem that the outermost `div` is not hidden when it is not unmounted ([#871](https://github.com/arco-design/arco-design-vue/pull/871))\n\n\n## 2.18.0-beta.2\n\n`2022-02-25`\n\n### ⚠️ Important Attention\n\n- Add a layer of `wrapper div` to the pop-up layer to provide support for tranform animation ([#732](https://github.com/arco-design/arco-design-vue/pull/732))\n\n### 🆕 Feature\n\n- Added `show` and `hide` events ([#731](https://github.com/arco-design/arco-design-vue/pull/731))\n\n\n## 2.17.0\n\n`2022-02-11`\n\n### 💎 Enhancement\n\n- Optimize the position of the arrow after auto-adjusting the position ([#655](https://github.com/arco-design/arco-design-vue/pull/655))\n\n\n## 2.14.0\n\n`2022-01-07`\n\n### 🐛 BugFix\n\n- Fix the problem that the arrow position of the popup box is wrong in some cases ([#518](https://github.com/arco-design/arco-design-vue/pull/518))\n\n\n## 2.11.0\n\n`2021-12-17`\n\n### 🐛 BugFix\n\n- Fix the problem of the wrong position of the pop-up layer caused by the change of container size ([#406](https://github.com/arco-design/arco-design-vue/pull/406))\n- Fix the problem that the pop-up layer is closed due to the hover method in nested use ([#406](https://github.com/arco-design/arco-design-vue/pull/406))\n\n\n## 2.10.1\n\n`2021-12-14`\n\n### 🐛 BugFix\n\n- Fix the problem that the pop-up layer size change will not trigger the update ([#382](https://github.com/arco-design/arco-design-vue/pull/382))\n- Fix the problem that the position and adaptation in `align-point` mode do not take effect ([#382](https://github.com/arco-design/arco-design-vue/pull/382))\n\n\n## 2.6.1\n\n`2021-11-24`\n\n### 🐛 BugFix\n\n- Fix the problem of triggering errors when nesting different types of `<trigger>` ([#244](https://github.com/arco-design/arco-design-vue/pull/244))\n\n\n## 2.6.0\n\n`2021-11-19`\n\n### 🆕 Feature\n\n- Add `prevent-focus` property ([#197](https://github.com/arco-design/arco-design-vue/pull/197))\n\n\n## 2.4.0\n\n`2021-11-17`\n\n### 🐛 BugFix\n\n- Fix the problem of `<svg>` element positioning error ([#162](https://github.com/arco-design/arco-design-vue/pull/162))\n\n\n## 2.2.0\n\n`2021-11-10`\n\n### 🐛 BugFix\n\n- Fix the problem of invalid state switching of `disabled` ([#126](https://github.com/arco-design/arco-design-vue/pull/126))\n\n\n## 2.1.0\n\n`2021-11-05`\n\n### 💎 Enhancement\n\n- Move the `outsideClickHandler` to the `document` ([#76](https://github.com/arco-design/arco-design-vue/pull/76))\n\n"
  },
  {
    "path": "packages/web-vue/components/trigger/CHANGELOG.zh-CN.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.55.1\n\n`2024-03-29`\n\n### 🐛 问题修复\n\n- 修正位置的弹出动画方向 ([#3045](https://github.com/arco-design/arco-design-vue/pull/3045))\n\n\n## 2.46.0\n\n`2023-05-12`\n\n### 🆕 新增功能\n\n- 增加 scrollToClose 属性 ([#2414](https://github.com/arco-design/arco-design-vue/pull/2414))\n\n\n## 2.44.7\n\n`2023-04-03`\n\n### 🐛 问题修复\n\n- 修复在 iframe 中报错的问题 ([#2300](https://github.com/arco-design/arco-design-vue/pull/2300))\n\n\n## 2.44.6\n\n`2023-03-31`\n\n### 💎 功能优化\n\n- 优化弹出位置在 ShadowRoot 中不准确问题 ([#2273](https://github.com/arco-design/arco-design-vue/pull/2273))\n\n\n## 2.38.0-beta.2\n\n`2022-10-21`\n\n### 🐛 问题修复\n\n- 修复在 windows 中 arrow 定位错误的问题 ([#1480](https://github.com/arco-design/arco-design-vue/pull/1480))\n\n\n## 2.35.1\n\n`2022-08-19`\n\n### 💎 功能优化\n\n- 优化在 KeepAlive 下使用的问题，缓存时关闭弹出层 ([#1529](https://github.com/arco-design/arco-design-vue/pull/1529))\n\n\n## 2.32.0\n\n`2022-06-24`\n\n### 💎 功能优化\n\n- 弹出层动画期间不再可以触发事件 ([#1337](https://github.com/arco-design/arco-design-vue/pull/1337))\n\n\n## 2.29.1\n\n`2022-06-02`\n\n### 💎 功能优化\n\n- 不再默认阻止右键默认事件 ([#1231](https://github.com/arco-design/arco-design-vue/pull/1231))\n\n\n## 2.27.0\n\n`2022-05-13`\n\n### 💎 功能优化\n\n- 在右键触发时，点击触发元素可以关闭下拉框 ([#1111](https://github.com/arco-design/arco-design-vue/pull/1111))\n- 支持弹出组件嵌套使用 ([#1111](https://github.com/arco-design/arco-design-vue/pull/1111))\n\n\n## 2.21.0\n\n`2022-03-25`\n\n### 🐛 问题修复\n\n- 修复在未卸载的情况下，最外层 `div` 没有隐藏的问题 ([#871](https://github.com/arco-design/arco-design-vue/pull/871))\n\n\n## 2.18.0-beta.2\n\n`2022-02-25`\n\n### ⚠️ 重点注意\n\n- 弹出层增加一层 `wrapper div` 用来提供对tranform动画的支持 ([#732](https://github.com/arco-design/arco-design-vue/pull/732))\n\n### 🆕 新增功能\n\n- 增加 `show` 和 `hide` 事件 ([#731](https://github.com/arco-design/arco-design-vue/pull/731))\n\n\n## 2.17.0\n\n`2022-02-11`\n\n### 💎 功能优化\n\n- 优化自动调整位置后箭头的位置 ([#655](https://github.com/arco-design/arco-design-vue/pull/655))\n\n\n## 2.14.0\n\n`2022-01-07`\n\n### 🐛 问题修复\n\n- 修复某些情况下弹出框箭头位置错误的问题 ([#518](https://github.com/arco-design/arco-design-vue/pull/518))\n\n\n## 2.11.0\n\n`2021-12-17`\n\n### 🐛 问题修复\n\n- 修复容器尺寸变化导致弹出层位置错误的问题 ([#406](https://github.com/arco-design/arco-design-vue/pull/406))\n- 修复嵌套使用中 hover 方式导致弹出层关闭的问题 ([#406](https://github.com/arco-design/arco-design-vue/pull/406))\n\n\n## 2.10.1\n\n`2021-12-14`\n\n### 🐛 问题修复\n\n- 修复弹出层尺寸变化不会触发更新的问题 ([#382](https://github.com/arco-design/arco-design-vue/pull/382))\n- 修复 `align-point` 模式下位置和自适应不生效的问题 ([#382](https://github.com/arco-design/arco-design-vue/pull/382))\n\n\n## 2.6.1\n\n`2021-11-24`\n\n### 🐛 问题修复\n\n- 修复嵌套不同类型 `<trigger>` 时触发错误的问题 ([#244](https://github.com/arco-design/arco-design-vue/pull/244))\n\n\n## 2.6.0\n\n`2021-11-19`\n\n### 🆕 新增功能\n\n- 增加 `prevent-focus` 属性 ([#197](https://github.com/arco-design/arco-design-vue/pull/197))\n\n\n## 2.4.0\n\n`2021-11-17`\n\n### 🐛 问题修复\n\n- 修复 `<svg>` 元素定位错误的问题 ([#162](https://github.com/arco-design/arco-design-vue/pull/162))\n\n\n## 2.2.0\n\n`2021-11-10`\n\n### 🐛 问题修复\n\n- 修复 `disabled` 状态切换失效的问题 ([#126](https://github.com/arco-design/arco-design-vue/pull/126))\n\n\n## 2.1.0\n\n`2021-11-05`\n\n### 💎 功能优化\n\n- 将外部关闭事件移到 `document` 上 ([#76](https://github.com/arco-design/arco-design-vue/pull/76))\n\n"
  },
  {
    "path": "packages/web-vue/components/trigger/README.en-US.md",
    "content": "```yaml\nmeta:\n  type: Component\n  category: Other\ntitle: Trigger\ndescription: Used to add hover, click, focus and other events to the element, and pop up a dropdown.\n```\n\n*Auto translate by google.*\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/nest.md\n\n@import ./__demo__/triggers.md\n\n@import ./__demo__/align-point.md\n\n@import ./__demo__/scroll.md\n\n@import ./__demo__/arrow.md\n\n@import ./__demo__/translate.md\n\n## API\n\n\n### `<trigger>` Props\n\n|Attribute|Description|Type|Default|version|\n|---|---|---|:---:|:---|\n|popup-visible **(v-model)**|Whether the popup is visible|`boolean`|`-`||\n|default-popup-visible|Whether the popup is visible by default (uncontrolled mode)|`boolean`|`false`||\n|trigger|Trigger method|`'hover' \\| 'click' \\| 'focus' \\| 'contextMenu'`|`'hover'`||\n|position|Popup position|`'top' \\| 'tl' \\| 'tr' \\| 'bottom' \\| 'bl' \\| 'br' \\| 'left' \\| 'lt' \\| 'lb' \\| 'right' \\| 'rt' \\| 'rb'`|`'bottom'`||\n|disabled|Whether the trigger is disabled|`boolean`|`false`||\n|popup-offset|The offset of the popup (the offset distance of the popup from the trigger)|`number`|`0`||\n|popup-translate|The moving distance of the popup|`TriggerPopupTranslate`|`-`||\n|show-arrow|Whether the popup shows an arrow|`boolean`|`false`||\n|align-point|Whether the popup follows the mouse|`boolean`|`false`||\n|popup-hover-stay|Whether to keep the popup displayed when the trigger is moved out and moved into the popup|`boolean`|`true`||\n|blur-to-close|Whether to close the popup when the trigger loses focus|`boolean`|`true`||\n|click-to-close|Whether to close the popup when the trigger is clicked|`boolean`|`true`||\n|click-outside-to-close|Whether to close the popup when clicking on the outer area|`boolean`|`true`||\n|unmount-on-close|Whether to uninstall the popup node when closing|`boolean`|`true`||\n|content-class|The class name of the popup content|`string\\|array\\|object`|`-`||\n|content-style|The style of the popup content|`CSSProperties`|`-`||\n|arrow-class|The class name of the popup arrow|`string\\|array\\|object`|`-`||\n|arrow-style|The style of the popup arrow|`CSSProperties`|`-`||\n|popup-style|The style of the popup|`CSSProperties`|`-`||\n|animation-name|The name of the popup animation|`string`|`'fade-in'`||\n|duration|The duration of the popup animation|`number\\| {    enter: number;    leave: number;  }`|`-`||\n|mouse-enter-delay|Delay trigger time of mouseenter event (ms)|`number`|`100`||\n|mouse-leave-delay|Delay trigger time of mouseleave event (ms)|`number`|`100`||\n|focus-delay|Delay trigger time of focus event (ms)|`number`|`0`||\n|auto-fit-popup-width|Whether to set the width of the popup to the width of the trigger|`boolean`|`false`||\n|auto-fit-popup-min-width|Whether to set the minimum width of the popup to the trigger width|`boolean`|`false`||\n|auto-fix-position|When the size of the trigger changes, whether to recalculate the position of the popup|`boolean`|`true`||\n|popup-container|Mount container for popup|`string \\| HTMLElement`|`-`||\n|auto-fit-position|Whether to automatically adjust the position of the popup to fit the window size|`boolean`|`true`||\n|render-to-body|Whether to mount under the `body` element|`boolean`|`true`||\n|prevent-focus|Whether to prevent elements in the pop-up layer from gaining focus when clicked|`boolean`|`false`||\n|scroll-to-close|Whether to close the popover when scrolling|`boolean`|`false`|2.46.0|\n|scroll-to-close-distance|Scroll threshold, trigger close when the scroll distance exceeds this value|`number`|`0`||\n### `<trigger>` Events\n\n|Event Name|Description|Parameters|version|\n|---|---|---|:---|\n|popup-visible-change|Emitted when the status of the popup changes|visible: `boolean`||\n|show|Triggered after the trigger is shown (the animation ends)|-|2.18.0|\n|hide|Triggered after the popup is hidden (the animation ends)|-|2.18.0|\n### `<trigger>` Slots\n\n|Slot Name|Description|Parameters|\n|---|---|---|\n|content|Popup content|-|\n\n\n\n## Type\n\n```ts\ntype TriggerPopupTranslate =\n  | [number, number]\n  | { [key in TriggerPosition]?: [number, number] };\n```\n\n\n## FAQ\n\n### About the mount location of the pop-up box\n\nThe popup box is mounted on the `body` element by default. If you want to modify the mounted element, you can use the `popup-container` attribute to specify it. At the same time, you need to pay attention to ensure that the location of the mounted element can be accurately located. Generally, you can Add `position: relative` style for mount elements.\n\nIn the micro-frontend project, it is necessary to ensure that the mounting position of the sub-application is accurate, you can add `position: relative` to the `body` style of the sub-application\n\n### scroll trigger container\n\nBy default, the component only listens to the scrolling event of `window`, and does not listen to the scrolling of the internal `div`, and the function similar to `scroll-to-close` will only take effect on the scrolling of `window`. You can support scroll event listening on the parent `div` element by enabling the `update-at-scroll` attribute.\n"
  },
  {
    "path": "packages/web-vue/components/trigger/README.zh-CN.md",
    "content": "```yaml\nmeta:\n  type: 组件\n  category: 其他\ntitle: 触发器 Trigger\ndescription: 用于对元素添加 hover, click, focus 等事件，并且弹出下拉框。\n```\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/nest.md\n\n@import ./__demo__/triggers.md\n\n@import ./__demo__/align-point.md\n\n@import ./__demo__/scroll.md\n\n@import ./__demo__/arrow.md\n\n@import ./__demo__/translate.md\n\n## API\n\n\n### `<trigger>` Props\n\n|参数名|描述|类型|默认值|版本|\n|---|---|---|:---:|:---|\n|popup-visible **(v-model)**|弹出框是否可见|`boolean`|`-`||\n|default-popup-visible|弹出框默认是否可见（非受控模式）|`boolean`|`false`||\n|trigger|触发方式|`'hover' \\| 'click' \\| 'focus' \\| 'contextMenu'`|`'hover'`||\n|position|弹出位置|`'top' \\| 'tl' \\| 'tr' \\| 'bottom' \\| 'bl' \\| 'br' \\| 'left' \\| 'lt' \\| 'lb' \\| 'right' \\| 'rt' \\| 'rb'`|`'bottom'`||\n|disabled|触发器是否禁用|`boolean`|`false`||\n|popup-offset|弹出框的偏移量（弹出框距离触发器的偏移距离）|`number`|`0`||\n|popup-translate|弹出框的移动距离|`TriggerPopupTranslate`|`-`||\n|show-arrow|弹出框是否显示箭头|`boolean`|`false`||\n|align-point|弹出框是否跟随鼠标|`boolean`|`false`||\n|popup-hover-stay|是否在移出触发器，并移入弹出框时保持弹出框显示|`boolean`|`true`||\n|blur-to-close|是否在触发器失去焦点时关闭弹出框|`boolean`|`true`||\n|click-to-close|是否在点击触发器时关闭弹出框|`boolean`|`true`||\n|click-outside-to-close|是否在点击外部区域时关闭弹出框|`boolean`|`true`||\n|unmount-on-close|是否在关闭时卸载弹出框节点|`boolean`|`true`||\n|content-class|弹出框内容的类名|`string\\|array\\|object`|`-`||\n|content-style|弹出框内容的样式|`CSSProperties`|`-`||\n|arrow-class|弹出框箭头的类名|`string\\|array\\|object`|`-`||\n|arrow-style|弹出框箭头的样式|`CSSProperties`|`-`||\n|popup-style|弹出框的样式|`CSSProperties`|`-`||\n|animation-name|弹出动画的name|`string`|`'fade-in'`||\n|duration|弹出动画的持续时间|`number\\| {    enter: number;    leave: number;  }`|`-`||\n|mouse-enter-delay|mouseenter事件延时触发的时间（毫秒）|`number`|`100`||\n|mouse-leave-delay|mouseleave事件延时触发的时间（毫秒）|`number`|`100`||\n|focus-delay|focus事件延时触发的时间（毫秒）|`number`|`0`||\n|auto-fit-popup-width|是否将弹出框宽度设置为触发器宽度|`boolean`|`false`||\n|auto-fit-popup-min-width|是否将弹出框的最小宽度设置为触发器宽度|`boolean`|`false`||\n|auto-fix-position|当触发器的尺寸发生变化时，是否重新计算弹出框位置|`boolean`|`true`||\n|popup-container|弹出框的挂载容器|`string \\| HTMLElement`|`-`||\n|update-at-scroll|是否在容器滚动时更新弹出框的位置|`boolean`|`false`||\n|auto-fit-position|是否自动调整弹出框位置，以适应窗口大小|`boolean`|`true`||\n|render-to-body|是否挂载在 `body` 元素下|`boolean`|`true`||\n|prevent-focus|是否阻止弹出层中的元素点击时获取焦点|`boolean`|`false`||\n|scroll-to-close|是否在滚动时关闭弹出框|`boolean`|`false`|2.46.0|\n|scroll-to-close-distance|滚动阈值，当滚动距离超过该值时触发关闭|`number`|`0`||\n### `<trigger>` Events\n\n|事件名|描述|参数|版本|\n|---|---|---|:---|\n|popup-visible-change|弹出框显示状态改变时触发|visible: `boolean`||\n|show|弹出框显示后（动画结束）触发|-|2.18.0|\n|hide|弹出框隐藏后（动画结束）触发|-|2.18.0|\n### `<trigger>` Slots\n\n|插槽名|描述|参数|\n|---|:---:|---|\n|content|弹出框内容|-|\n\n\n\n## Type\n\n```ts\ntype TriggerPopupTranslate =\n  | [number, number]\n  | { [key in TriggerPosition]?: [number, number] };\n```\n\n## FAQ\n\n### 关于弹出框的挂载位置\n\n弹出框默认是挂载到 `body` 元素上的，如果想要修改挂载元素，可以使用 `popup-container` 属性进行指定，同时需要注意保证挂载元素的位置可以被准确定位到，一般可以为挂载元素增加 `position: relative` 样式。\n\n在微前端项目中，需要保证子应用的挂载位置准确，可以将子应用的 `body` 样式添加 `position: relative`\n\n### 滚动触发容器\n\n组件默认仅监听了 `window` 的滚动事件，对于内部 `div` 的滚动没有进行监听，类似 `scroll-to-close` 功能也仅会对 `window` 滚动生效。可以通过开启 `update-at-scroll` 属性支持对父级 `div` 元素的滚动事件监听。\n\n"
  },
  {
    "path": "packages/web-vue/components/trigger/TEMPLATE.md",
    "content": "## zh-CN\n```yaml\nmeta:\n  type: 组件\n  category: 其他\ntitle: 触发器 Trigger\ndescription: 用于对元素添加 hover, click, focus 等事件，并且弹出下拉框。\n```\n---\n## en-US\n```yaml\nmeta:\n  type: Component\n  category: Other\ntitle: Trigger\ndescription: Used to add hover, click, focus and other events to the element, and pop up a dropdown.\n```\n---\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/nest.md\n\n@import ./__demo__/triggers.md\n\n@import ./__demo__/align-point.md\n\n@import ./__demo__/scroll.md\n\n@import ./__demo__/arrow.md\n\n@import ./__demo__/translate.md\n\n## API\n\n%%API(trigger.tsx)%%\n\n## Type\n\n```ts\ntype TriggerPopupTranslate =\n  | [number, number]\n  | { [key in TriggerPosition]?: [number, number] };\n```\n\n## zh-CN\n## FAQ\n\n### 关于弹出框的挂载位置\n\n弹出框默认是挂载到 `body` 元素上的，如果想要修改挂载元素，可以使用 `popup-container` 属性进行指定，同时需要注意保证挂载元素的位置可以被准确定位到，一般可以为挂载元素增加 `position: relative` 样式。\n\n在微前端项目中，需要保证子应用的挂载位置准确，可以将子应用的 `body` 样式添加 `position: relative`\n\n### 滚动触发容器\n\n组件默认仅监听了 `window` 的滚动事件，对于内部 `div` 的滚动没有进行监听，类似 `scroll-to-close` 功能也仅会对 `window` 滚动生效。可以通过开启 `update-at-scroll` 属性支持对父级 `div` 元素的滚动事件监听。\n\n---\n\n## en-US\n## FAQ\n\n### About the mount location of the pop-up box\n\nThe popup box is mounted on the `body` element by default. If you want to modify the mounted element, you can use the `popup-container` attribute to specify it. At the same time, you need to pay attention to ensure that the location of the mounted element can be accurately located. Generally, you can Add `position: relative` style for mount elements.\n\nIn the micro-frontend project, it is necessary to ensure that the mounting position of the sub-application is accurate, you can add `position: relative` to the `body` style of the sub-application\n\n### scroll trigger container\n\nBy default, the component only listens to the scrolling event of `window`, and does not listen to the scrolling of the internal `div`, and the function similar to `scroll-to-close` will only take effect on the scrolling of `window`. You can support scroll event listening on the parent `div` element by enabling the `update-at-scroll` attribute.\n\n---\n"
  },
  {
    "path": "packages/web-vue/components/trigger/__demo__/align-point.md",
    "content": "```yaml\ntitle:\n  zh-CN: 跟随鼠标显示弹出框\n  en-US: Follow mouse\n```\n\n## zh-CN\n\n设置`align-point`属性，可以使弹出层出现在鼠标位置。\n\n---\n\n## en-US\n\n---\n\n```vue\n<template>\n  <a-trigger trigger=\"click\" align-point>\n    <div class=\"demo-point-trigger\">\n      <div>Click Me</div>\n    </div>\n    <template #content>\n      <div class=\"demo-point\">\n        <a-empty />\n      </div>\n    </template>\n  </a-trigger>\n</template>\n\n<style scoped>\n.demo-point-trigger {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 300px;\n  background-color: var(--color-fill-2)\n}\n\n.demo-point {\n  padding: 10px;\n  width: 200px;\n  background-color: var(--color-bg-popup);\n  border-radius: 4px;\n  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15);\n}\n\n.demo-point-wrapper {\n  display: block;\n}\n</style>\n```\n"
  },
  {
    "path": "packages/web-vue/components/trigger/__demo__/arrow.md",
    "content": "```yaml\ntitle:\n  zh-CN: 显示箭头元素\n  en-US: Show Arrow\n```\n\n## zh-CN\n\n通过`show-arrow`属性，可以展示默认的箭头元素。也可以通过`arrow-class`或`arrow-style`进行定制。\n\n---\n\n## en-US\n\n---\n\n```vue\n<template>\n  <a-space>\n    <a-trigger trigger=\"click\">\n      <a-button>Click Me</a-button>\n      <template #content>\n        <div class=\"demo-arrow\">\n          <a-empty />\n        </div>\n      </template>\n    </a-trigger>\n    <a-trigger trigger=\"click\" show-arrow>\n      <a-button>Click Me (Arrow)</a-button>\n      <template #content>\n        <div class=\"demo-arrow\">\n          <a-empty />\n        </div>\n      </template>\n    </a-trigger>\n  </a-space>\n</template>\n\n<style scoped>\n.demo-arrow {\n  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15);\n  padding: 10px;\n  width: 200px;\n  background-color: var(--color-bg-popup);\n  border-radius: 4px;\n}\n</style>\n```\n"
  },
  {
    "path": "packages/web-vue/components/trigger/__demo__/basic.md",
    "content": "```yaml\ntitle:\n  zh-CN: 基本用法\n  en-US: Basic Usage\n```\n\n## zh-CN\n\n这个例子展示了触发器的最基础的使用。触发器默认是没有弹出框的样式的。以下示例均为官网添加的样式。\n\n---\n\n## en-US\n\n---\n\n```vue\n<template>\n  <a-space>\n    <a-trigger position=\"top\" auto-fit-position :unmount-on-close=\"false\">\n      <span>Hover Me</span>\n      <template #content>\n        <div class=\"demo-basic\">\n          <a-empty />\n        </div>\n      </template>\n    </a-trigger>\n    <a-trigger trigger=\"click\" :unmount-on-close=\"false\">\n      <a-button>Click Me</a-button>\n      <template #content>\n        <div class=\"demo-basic\">\n          <a-empty />\n        </div>\n      </template>\n    </a-trigger>\n    <a-trigger trigger=\"focus\">\n      <a-input placeholder=\"Focus on me\" />\n      <template #content>\n        <div class=\"demo-basic\">\n          <a-empty />\n        </div>\n      </template>\n    </a-trigger>\n  </a-space>\n</template>\n\n<style scoped>\n.demo-basic {\n  padding: 10px;\n  width: 200px;\n  background-color: var(--color-bg-popup);\n  border-radius: 4px;\n  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15);\n}\n</style>\n```\n"
  },
  {
    "path": "packages/web-vue/components/trigger/__demo__/nest.md",
    "content": "```yaml\ntitle:\n  zh-CN: 多层嵌套\n  en-US: Nest\n```\n\n## zh-CN\n\n弹出层可以嵌套在另一个弹出层内。\n\n---\n\n## en-US\n\n\n---\n\n```vue\n<template>\n  <a-trigger trigger=\"click\">\n    <a-button>Click Me</a-button>\n    <template #content>\n      <div class=\"trigger-demo-nest\">\n        <a-empty />\n        <a-trigger position=\"right\">\n          <a-button>Hover Me</a-button>\n          <template #content>\n            <div class=\"trigger-demo-nest\">\n              <a-empty />\n              <a-trigger trigger=\"click\" position=\"right\">\n                <a-button>Click Me</a-button>\n                <template #content>\n                  <div class=\"trigger-demo-nest\">\n                    <a-empty />\n                    <a-trigger position=\"right\">\n                      <a-button>Hover Me</a-button>\n                      <template #content>\n                        <a-empty class=\"trigger-demo-nest\" />\n                      </template>\n                    </a-trigger>\n                  </div>\n                </template>\n              </a-trigger>\n            </div>\n          </template>\n        </a-trigger>\n      </div>\n    </template>\n  </a-trigger>\n</template>\n\n<style scoped>\n.trigger-demo-nest {\n  padding: 10px;\n  width: 200px;\n  background-color: var(--color-bg-popup);\n  border-radius: 4px;\n  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15);\n}\n\n.trigger-demo-nest-popup-content {\n  text-align: right;\n}\n</style>\n```\n"
  },
  {
    "path": "packages/web-vue/components/trigger/__demo__/scroll.md",
    "content": "```yaml\ntitle:\n  zh-CN: 滚动容器\n  en-US: Scroll Container\n```\n\n## zh-CN\n\n通过设置 `update-at-scroll` 监听容器的滚动。\n\n---\n\n## en-US\n\nMonitor the scrolling of the container by setting `update-at-scroll`.\n\n---\n\n```vue\n<template>\n  <div :style=\"{height:'100px',overflowY:'scroll'}\">\n    <div :style=\"{height:'200px'}\">\n      <a-trigger trigger=\"click\" update-at-scroll>\n        <a-button :style=\"{marginTop:'80px'}\">Click Me</a-button>\n        <template #content>\n          <div class=\"demo-basic\">\n            <a-empty />\n          </div>\n        </template>\n      </a-trigger>\n    </div>\n  </div>\n</template>\n\n<style scoped>\n.demo-basic {\n  padding: 10px;\n  width: 200px;\n  background-color: var(--color-bg-popup);\n  border-radius: 4px;\n  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15);\n}\n</style>\n```\n"
  },
  {
    "path": "packages/web-vue/components/trigger/__demo__/translate.md",
    "content": "```yaml\ntitle:\n  zh-CN: 弹窗偏移量\n  en-US: Popup Translate\n```\n\n## zh-CN\n\n通过`popup-translate`属性，可以设置弹窗在原本位置的基础上进行额外的位置调整。\n\n---\n\n## en-US\n\n---\n\n```vue\n<template>\n  <a-space>\n    <a-trigger>\n      <a-button>BOTTOM</a-button>\n      <template #content>\n        <div class=\"trigger-demo-translate\">\n          <a-empty />\n        </div>\n      </template>\n    </a-trigger>\n    <a-trigger :popup-translate=\"[100, 20]\">\n      <a-button>BOTTOM OFFSET[100, 20]</a-button>\n      <template #content>\n        <div class=\"trigger-demo-translate\">\n          <a-empty />\n        </div>\n      </template>\n    </a-trigger>\n    <a-trigger :popup-translate=\"[-100, 20]\">\n      <a-button>BOTTOM OFFSET[-100, 20]</a-button>\n      <template #content>\n        <div class=\"trigger-demo-translate\">\n          <a-empty />\n        </div>\n      </template>\n    </a-trigger>\n  </a-space>\n</template>\n\n<style scoped>\n.trigger-demo-translate {\n  padding: 10px;\n  width: 200px;\n  background-color: var(--color-bg-popup);\n  border-radius: 4px;\n  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15);\n}\n</style>\n```\n"
  },
  {
    "path": "packages/web-vue/components/trigger/__demo__/triggers.md",
    "content": "```yaml\ntitle:\n  zh-CN: 多个触发方式\n  en-US: Triggers\n```\n\n## zh-CN\n\n通过`trigger`传入数组，可以设置多个触发方式。\n\n---\n\n## en-US\n\n\n---\n\n```vue\n<template>\n  <a-trigger :trigger=\"['click','hover','focus']\">\n    <a-input placeholder=\"Click/Hover/Focus on me\" />\n    <template #content>\n      <div class=\"demo-trigger\">\n        <a-empty />\n      </div>\n    </template>\n  </a-trigger>\n</template>\n\n<style scoped>\n.demo-trigger {\n  padding: 10px;\n  width: 200px;\n  background-color: var(--color-bg-popup);\n  border-radius: 4px;\n  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15);\n}\n</style>\n```\n"
  },
  {
    "path": "packages/web-vue/components/trigger/__test__/__snapshots__/demo.test.ts.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`<trigger> demo: render [align-point] correctly 1`] = `\n\"<div class=\\\\\"demo-point-trigger\\\\\">\n  <div>Click Me</div>\n</div>\"\n`;\n\nexports[`<trigger> demo: render [arrow] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 8px; row-gap: 8px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n      <!--v-if-->Click Me\n    </button>\n    <!---->\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n      <!--v-if-->Click Me (Arrow)\n    </button>\n    <!---->\n  </div>\n</div>\"\n`;\n\nexports[`<trigger> demo: render [basic] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 8px; row-gap: 8px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span>Hover Me</span>\n    <!---->\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n      <!--v-if-->Click Me\n    </button>\n    <!---->\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-input-wrapper\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" placeholder=\\\\\"Focus on me\\\\\" value=\\\\\"\\\\\"><!----><!----></span>\n    <!---->\n  </div>\n</div>\"\n`;\n\nexports[`<trigger> demo: render [nest] correctly 1`] = `\n\"<button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n  <!--v-if-->Click Me\n</button>\"\n`;\n\nexports[`<trigger> demo: render [scroll] correctly 1`] = `\n\"<div style=\\\\\"height: 100px; overflow-y: scroll;\\\\\">\n  <div style=\\\\\"height: 200px;\\\\\"><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\" style=\\\\\"margin-top: 80px;\\\\\">\n      <!--v-if-->Click Me\n    </button>\n    <!---->\n  </div>\n</div>\"\n`;\n\nexports[`<trigger> demo: render [translate] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 8px; row-gap: 8px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n      <!--v-if-->BOTTOM\n    </button>\n    <!---->\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n      <!--v-if-->BOTTOM OFFSET[100, 20]\n    </button>\n    <!---->\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\">\n      <!--v-if-->BOTTOM OFFSET[-100, 20]\n    </button>\n    <!---->\n  </div>\n</div>\"\n`;\n\nexports[`<trigger> demo: render [triggers] correctly 1`] = `\"<span class=\\\\\"arco-input-wrapper\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" placeholder=\\\\\"Click/Hover/Focus on me\\\\\" value=\\\\\"\\\\\"><!----><!----></span>\"`;\n"
  },
  {
    "path": "packages/web-vue/components/trigger/__test__/demo.test.ts",
    "content": "import demoTest from '../../../scripts/demo-test';\n\ndemoTest('trigger');\n"
  },
  {
    "path": "packages/web-vue/components/trigger/__test__/index.test.ts",
    "content": "import { mount } from '@vue/test-utils';\nimport Trigger from '../index';\n\ndescribe('Trigger', () => {\n  test('trigger correctly', async () => {\n    const wrapper = mount(Trigger, {\n      slots: {\n        default: '<button>Test</button>',\n        content: '<div id=\"popup-content\">Popup Content</div>',\n      },\n      props: {\n        trigger: 'click',\n      },\n    });\n\n    await wrapper.find('button').trigger('click');\n\n    expect(document.body.innerHTML).toContain(\n      '<div id=\"popup-content\">Popup Content</div>'\n    );\n  });\n\n  test('default visible correctly', async () => {\n    const wrapper = mount(Trigger, {\n      slots: {\n        default: '<button>Test</button>',\n        content: '<div id=\"popup-content\">Popup Content</div>',\n      },\n      props: {\n        defaultPopupVisible: true,\n      },\n    });\n\n    expect(document.body.innerHTML).toContain(\n      '<div id=\"popup-content\">Popup Content</div>'\n    );\n  });\n});\n"
  },
  {
    "path": "packages/web-vue/components/trigger/context.ts",
    "content": "import type { InjectionKey } from 'vue';\n\nexport interface TriggerContext {\n  onMouseenter: (ev: MouseEvent) => void;\n  onMouseleave: (ev: MouseEvent) => void;\n  addChildRef: (ref: any) => void;\n  removeChildRef: (ref: any) => void;\n}\n\nexport const triggerInjectionKey: InjectionKey<TriggerContext> =\n  Symbol('ArcoTrigger');\n"
  },
  {
    "path": "packages/web-vue/components/trigger/index.ts",
    "content": "import type { App } from 'vue';\nimport type { ArcoOptions } from '../_utils/types';\nimport { setGlobalConfig, getComponentPrefix } from '../_utils/global-config';\nimport _Trigger from './trigger';\n\nconst Trigger = Object.assign(_Trigger, {\n  install: (app: App, options?: ArcoOptions) => {\n    setGlobalConfig(app, options);\n    const componentPrefix = getComponentPrefix(options);\n\n    app.component(componentPrefix + _Trigger.name, _Trigger);\n  },\n});\n\nexport type TriggerInstance = InstanceType<typeof _Trigger>;\nexport type { TriggerEvent, TriggerPosition } from '../_utils/constant';\nexport type { TriggerProps, TriggerPopupTranslate } from './interface';\n\nexport default Trigger;\n"
  },
  {
    "path": "packages/web-vue/components/trigger/interface.ts",
    "content": "import { CSSProperties } from 'vue';\nimport { TriggerEvent, TriggerPosition } from '../_utils/constant';\n\nexport type TriggerPopupTranslate =\n  | [number, number]\n  | { [key in TriggerPosition]?: [number, number] };\n\nexport interface TriggerProps {\n  popupVisible?: boolean;\n  defaultPopupVisible?: boolean;\n  trigger?: TriggerEvent;\n  position?: TriggerPosition;\n  disabled?: boolean;\n  popupOffset?: number;\n  popupTranslate?: TriggerPopupTranslate;\n  showArrow?: boolean;\n  alignPoint?: boolean;\n  popupHoverStay?: boolean;\n  blurToClose?: boolean;\n  clickToClose?: boolean;\n  clickOutsideToClose?: boolean;\n  unmountOnClose?: boolean;\n  contentClass?: any;\n  contentStyle?: CSSProperties;\n  arrowClass?: any;\n  arrowStyle?: CSSProperties;\n  popupStyle?: CSSProperties;\n  animationName?: string;\n  duration?:\n    | number\n    | {\n        enter: number;\n        leave: number;\n      };\n  mouseEnterDelay?: number;\n  mouseLeaveDelay?: number;\n  focusDelay?: number;\n  autoFitPopupWidth?: boolean;\n  autoFitPopupMinWidth?: boolean;\n  autoFixPosition?: boolean;\n  popupContainer?: string | HTMLElement;\n  updateAtScroll?: boolean;\n  autoFitPosition?: boolean;\n}\n"
  },
  {
    "path": "packages/web-vue/components/trigger/style/index.less",
    "content": "@import './token.less';\n\n@trigger-prefix-cls: ~'@{prefix}-trigger';\n\n.@{trigger-prefix-cls} {\n  &-wrapper {\n    display: inline-block;\n  }\n\n  &-popup {\n    position: absolute;\n    z-index: @z-index-popup;\n  }\n\n  &-arrow {\n    position: absolute;\n    z-index: -1;\n    display: block;\n    box-sizing: border-box;\n    width: @trigger-size-arrow-width;\n    height: @trigger-size-arrow-width;\n    background-color: @trigger-color-arrow-bg;\n    content: '';\n  }\n\n  &-popup[trigger-placement='top'] &-arrow,\n  &-popup[trigger-placement='tl'] &-arrow,\n  &-popup[trigger-placement='tr'] &-arrow {\n    border-top: none;\n    border-left: none;\n    border-bottom-right-radius: @trigger-border-arrow-radius;\n  }\n\n  &-popup[trigger-placement='bottom'] &-arrow,\n  &-popup[trigger-placement='bl'] &-arrow,\n  &-popup[trigger-placement='br'] &-arrow {\n    border-right: none;\n    border-bottom: none;\n    border-top-left-radius: @trigger-border-arrow-radius;\n  }\n\n  &-popup[trigger-placement='left'] &-arrow,\n  &-popup[trigger-placement='lt'] &-arrow,\n  &-popup[trigger-placement='lb'] &-arrow {\n    border-bottom: none;\n    border-left: none;\n    border-top-right-radius: @trigger-border-arrow-radius;\n  }\n\n  &-popup[trigger-placement='right'] &-arrow,\n  &-popup[trigger-placement='rt'] &-arrow,\n  &-popup[trigger-placement='rb'] &-arrow {\n    border-top: none;\n    border-right: none;\n    border-bottom-left-radius: @trigger-border-arrow-radius;\n  }\n}\n"
  },
  {
    "path": "packages/web-vue/components/trigger/style/index.ts",
    "content": "import '../../style/index.less';\nimport './index.less';\n"
  },
  {
    "path": "packages/web-vue/components/trigger/style/token.less",
    "content": "@import '../../style/theme/index.less';\n\n@trigger-color-arrow-bg: var(~'@{arco-cssvars-prefix}-color-bg-5');\n@trigger-size-arrow-width: @size-2;\n@trigger-border-arrow-radius: @radius-small;\n"
  },
  {
    "path": "packages/web-vue/components/trigger/trigger.tsx",
    "content": "import type { PropType, CSSProperties, Ref } from 'vue';\nimport {\n  defineComponent,\n  ref,\n  reactive,\n  computed,\n  nextTick,\n  watch,\n  inject,\n  provide,\n  Teleport,\n  Transition,\n  onUpdated,\n  onMounted,\n  onBeforeUnmount,\n  toRefs,\n  onDeactivated,\n} from 'vue';\nimport { getPrefixCls } from '../_utils/global-config';\nimport type { TriggerEvent, TriggerPosition } from '../_utils/constant';\nimport {\n  getArrowStyle,\n  getPopupStyle,\n  getElementScrollRect,\n  getScrollElements,\n  getTransformOrigin,\n} from './utils';\nimport ResizeObserver from '../_components/resize-observer-v2';\nimport { off, on } from '../_utils/dom';\nimport { isEmptyChildren, mergeFirstChild } from '../_utils/vue-utils';\nimport usePickSlots from '../_hooks/use-pick-slots';\nimport { triggerInjectionKey } from './context';\nimport { throttleByRaf } from '../_utils/throttle-by-raf';\nimport usePopupManager from '../_hooks/use-popup-manager';\nimport { useResizeObserver } from '../_hooks/use-resize-observer';\nimport ClientOnly from '../_components/client-only';\nimport { useTeleportContainer } from '../_hooks/use-teleport-container';\nimport { TriggerPopupTranslate } from './interface';\nimport { configProviderInjectionKey } from '../config-provider/context';\nimport { useFirstElement } from '../_hooks/use-first-element';\nimport { omit } from '../_utils/omit';\n\nconst TRIGGER_EVENTS = [\n  'onClick',\n  'onMouseenter',\n  'onMouseleave',\n  'onFocusin',\n  'onFocusout',\n  'onContextmenu',\n];\n\nexport default defineComponent({\n  name: 'Trigger',\n  inheritAttrs: false,\n  props: {\n    /**\n     * @zh 弹出框是否可见\n     * @en Whether the popup is visible\n     * @vModel\n     */\n    popupVisible: {\n      type: Boolean,\n      default: undefined,\n    },\n    /**\n     * @zh 弹出框默认是否可见（非受控模式）\n     * @en Whether the popup is visible by default (uncontrolled mode)\n     */\n    defaultPopupVisible: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 触发方式\n     * @en Trigger method\n     * @values 'hover','click','focus','contextMenu'\n     */\n    trigger: {\n      type: [String, Array] as PropType<TriggerEvent | TriggerEvent[]>,\n      default: 'hover',\n    },\n    /**\n     * @zh 弹出位置\n     * @en Popup position\n     * @values 'top','tl','tr','bottom','bl','br','left','lt','lb','right','rt','rb'\n     */\n    position: {\n      type: String as PropType<TriggerPosition>,\n      default: 'bottom',\n    },\n    /**\n     * @zh 触发器是否禁用\n     * @en Whether the trigger is disabled\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 弹出框的偏移量（弹出框距离触发器的偏移距离）\n     * @en The offset of the popup (the offset distance of the popup from the trigger)\n     */\n    popupOffset: {\n      type: Number,\n      default: 0,\n    },\n    /**\n     * @zh 弹出框的移动距离\n     * @en The moving distance of the popup\n     */\n    popupTranslate: {\n      type: [Array, Object] as PropType<TriggerPopupTranslate>,\n    },\n    /**\n     * @zh 弹出框是否显示箭头\n     * @en Whether the popup shows an arrow\n     */\n    showArrow: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 弹出框是否跟随鼠标\n     * @en Whether the popup follows the mouse\n     */\n    alignPoint: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 是否在移出触发器，并移入弹出框时保持弹出框显示\n     * @en Whether to keep the popup displayed when the trigger is moved out and moved into the popup\n     */\n    popupHoverStay: {\n      type: Boolean,\n      default: true,\n    },\n    /**\n     * @zh 是否在触发器失去焦点时关闭弹出框\n     * @en Whether to close the popup when the trigger loses focus\n     */\n    blurToClose: {\n      type: Boolean,\n      default: true,\n    },\n    /**\n     * @zh 是否在点击触发器时关闭弹出框\n     * @en Whether to close the popup when the trigger is clicked\n     */\n    clickToClose: {\n      type: Boolean,\n      default: true,\n    },\n    /**\n     * @zh 是否在点击外部区域时关闭弹出框\n     * @en Whether to close the popup when clicking on the outer area\n     */\n    clickOutsideToClose: {\n      type: Boolean,\n      default: true,\n    },\n    /**\n     * @zh 是否在关闭时卸载弹出框节点\n     * @en Whether to uninstall the popup node when closing\n     */\n    unmountOnClose: {\n      type: Boolean,\n      default: true,\n    },\n    /**\n     * @zh 弹出框内容的类名\n     * @en The class name of the popup content\n     */\n    contentClass: {\n      type: [String, Array, Object],\n    },\n    /**\n     * @zh 弹出框内容的样式\n     * @en The style of the popup content\n     */\n    contentStyle: {\n      type: Object as PropType<CSSProperties>,\n    },\n    /**\n     * @zh 弹出框箭头的类名\n     * @en The class name of the popup arrow\n     */\n    arrowClass: {\n      type: [String, Array, Object],\n    },\n    /**\n     * @zh 弹出框箭头的样式\n     * @en The style of the popup arrow\n     */\n    arrowStyle: {\n      type: Object as PropType<CSSProperties>,\n    },\n    /**\n     * @zh 弹出框的样式\n     * @en The style of the popup\n     */\n    popupStyle: {\n      type: Object as PropType<CSSProperties>,\n    },\n    /**\n     * @zh 弹出动画的name\n     * @en The name of the popup animation\n     */\n    animationName: {\n      type: String,\n      default: 'fade-in',\n    },\n    /**\n     * @zh 弹出动画的持续时间\n     * @en The duration of the popup animation\n     */\n    duration: {\n      type: [Number, Object] as PropType<\n        | number\n        | {\n            enter: number;\n            leave: number;\n          }\n      >,\n    },\n    /**\n     * @zh mouseenter事件延时触发的时间（毫秒）\n     * @en Delay trigger time of mouseenter event (ms)\n     */\n    mouseEnterDelay: {\n      type: Number,\n      default: 100,\n    },\n    /**\n     * @zh mouseleave事件延时触发的时间（毫秒）\n     * @en Delay trigger time of mouseleave event (ms)\n     */\n    mouseLeaveDelay: {\n      type: Number,\n      default: 100,\n    },\n    /**\n     * @zh focus事件延时触发的时间（毫秒）\n     * @en Delay trigger time of focus event (ms)\n     */\n    focusDelay: {\n      type: Number,\n      default: 0,\n    },\n    /**\n     * @zh 是否将弹出框宽度设置为触发器宽度\n     * @en Whether to set the width of the popup to the width of the trigger\n     */\n    autoFitPopupWidth: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 是否将弹出框的最小宽度设置为触发器宽度\n     * @en Whether to set the minimum width of the popup to the trigger width\n     */\n    autoFitPopupMinWidth: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 当触发器的尺寸发生变化时，是否重新计算弹出框位置\n     * @en When the size of the trigger changes, whether to recalculate the position of the popup\n     */\n    autoFixPosition: {\n      type: Boolean,\n      default: true,\n    },\n    /**\n     * @zh 弹出框的挂载容器\n     * @en Mount container for popup\n     */\n    popupContainer: {\n      type: [String, Object] as PropType<string | HTMLElement>,\n    },\n    /**\n     * @zh 是否在容器滚动时更新弹出框的位置\n     * @us Whether to update the position of the popup when the container is scrolled\n     */\n    updateAtScroll: {\n      type: Boolean,\n      default: false,\n    },\n    autoFitTransformOrigin: {\n      type: Boolean,\n      default: false,\n    },\n    hideEmpty: {\n      type: Boolean,\n      default: false,\n    },\n    openedClass: {\n      type: [String, Array, Object],\n    },\n    /**\n     * @zh 是否自动调整弹出框位置，以适应窗口大小\n     * @en Whether to automatically adjust the position of the popup to fit the window size\n     */\n    autoFitPosition: {\n      type: Boolean,\n      default: true,\n    },\n    /**\n     * @zh 是否挂载在 `body` 元素下\n     * @en Whether to mount under the `body` element\n     */\n    renderToBody: {\n      type: Boolean,\n      default: true,\n    },\n    /**\n     * @zh 是否阻止弹出层中的元素点击时获取焦点\n     * @en Whether to prevent elements in the pop-up layer from gaining focus when clicked\n     */\n    preventFocus: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 是否在滚动时关闭弹出框\n     * @en Whether to close the popover when scrolling\n     * @version 2.46.0\n     */\n    scrollToClose: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 滚动阈值，当滚动距离超过该值时触发关闭\n     * @en Scroll threshold, trigger close when the scroll distance exceeds this value\n     */\n    scrollToCloseDistance: {\n      type: Number,\n      default: 0,\n    },\n  },\n  emits: {\n    'update:popupVisible': (visible: boolean) => true,\n    /**\n     * @zh 弹出框显示状态改变时触发\n     * @en Emitted when the status of the popup changes\n     * @param {boolean} visible\n     */\n    'popupVisibleChange': (visible: boolean) => true,\n    /**\n     * @zh 弹出框显示后（动画结束）触发\n     * @en Triggered after the trigger is shown (the animation ends)\n     * @version 2.18.0\n     */\n    'show': () => true,\n    /**\n     * @zh 弹出框隐藏后（动画结束）触发\n     * @en Triggered after the popup is hidden (the animation ends)\n     * @version 2.18.0\n     */\n    'hide': () => true,\n    // for internal\n    'resize': () => true,\n  },\n  /**\n   * @zh 弹出框内容\n   * @en Popup content\n   * @slot content\n   */\n  setup(props, { emit, slots, attrs }) {\n    const { popupContainer } = toRefs(props);\n    const prefixCls = getPrefixCls('trigger');\n    const popupAttrs = computed(() => omit(attrs, TRIGGER_EVENTS));\n    const configCtx = inject(configProviderInjectionKey, undefined);\n\n    const triggerMethods = computed(() =>\n      ([] as Array<TriggerEvent>).concat(props.trigger)\n    );\n    // 用于多个trigger嵌套时，保持打开状态\n    const childrenRefs = new Set<Ref<HTMLElement>>();\n    const triggerCtx = inject(triggerInjectionKey, undefined);\n    // trigger相关变量\n    const { children, firstElement } = useFirstElement();\n    // popup相关变量\n    const popupRef = ref<HTMLElement>();\n    const popupVisible = ref(props.defaultPopupVisible);\n    const popupPosition = ref(props.position);\n    const popupStyle = ref<CSSProperties>({});\n    const transformStyle = ref<CSSProperties>({});\n    const arrowStyle = ref<CSSProperties>({});\n    // 鼠标相关变量\n    const arrowRef = ref<HTMLElement>();\n    const mousePosition = ref({\n      top: 0,\n      left: 0,\n    });\n\n    let scrollPosition: [number, number] | null = null;\n    let windowScrollPosition: [number, number] | null = null;\n\n    const computedVisible = computed(\n      () => props.popupVisible ?? popupVisible.value\n    );\n\n    const { teleportContainer, containerRef } = useTeleportContainer({\n      popupContainer,\n      visible: computedVisible,\n      documentContainer: true,\n    });\n\n    const { zIndex } = usePopupManager('popup', { visible: computedVisible });\n\n    let delayTimer = 0;\n    let outsideListener = false;\n    let windowListener = false;\n\n    const cleanDelayTimer = () => {\n      if (delayTimer) {\n        window.clearTimeout(delayTimer);\n        delayTimer = 0;\n      }\n    };\n\n    const updateMousePosition = (e: MouseEvent) => {\n      if (props.alignPoint) {\n        const { pageX, pageY } = e;\n        mousePosition.value = {\n          top: pageY,\n          left: pageX,\n        };\n      }\n    };\n\n    const updatePopupStyle = () => {\n      if (!firstElement.value || !popupRef.value || !containerRef.value) {\n        return;\n      }\n      const containerRect = containerRef.value.getBoundingClientRect();\n      const triggerRect = props.alignPoint\n        ? {\n            top: mousePosition.value.top,\n            bottom: mousePosition.value.top,\n            left: mousePosition.value.left,\n            right: mousePosition.value.left,\n            scrollTop: mousePosition.value.top,\n            scrollBottom: mousePosition.value.top,\n            scrollLeft: mousePosition.value.left,\n            scrollRight: mousePosition.value.left,\n            width: 0,\n            height: 0,\n          }\n        : getElementScrollRect(firstElement.value, containerRect);\n      const getPopupRect = () =>\n        // @ts-ignore\n        getElementScrollRect(popupRef.value, containerRect);\n      const popupRect = getPopupRect();\n      const { style, position } = getPopupStyle(\n        props.position,\n        containerRect,\n        triggerRect,\n        popupRect,\n        {\n          offset: props.popupOffset,\n          translate: props.popupTranslate,\n          customStyle: props.popupStyle,\n          autoFitPosition: props.autoFitPosition,\n        }\n      );\n      if (props.autoFitTransformOrigin) {\n        transformStyle.value = {\n          transformOrigin: getTransformOrigin(position),\n        };\n      }\n      if (props.autoFitPopupMinWidth) {\n        style.minWidth = `${triggerRect.width}px`;\n      } else if (props.autoFitPopupWidth) {\n        style.width = `${triggerRect.width}px`;\n      }\n\n      if (popupPosition.value !== position) {\n        popupPosition.value = position;\n      }\n      popupStyle.value = style;\n      if (props.showArrow) {\n        nextTick(() => {\n          arrowStyle.value = getArrowStyle(\n            position,\n            triggerRect,\n            getPopupRect(),\n            {\n              customStyle: props.arrowStyle,\n            }\n          );\n        });\n      }\n    };\n\n    const changeVisible = (visible: boolean, delay?: number) => {\n      if (visible === computedVisible.value && delayTimer === 0) {\n        return;\n      }\n\n      const update = () => {\n        popupVisible.value = visible;\n        emit('update:popupVisible', visible);\n        emit('popupVisibleChange', visible);\n        if (visible) {\n          nextTick(() => {\n            updatePopupStyle();\n          });\n        }\n      };\n\n      if (!visible) {\n        scrollPosition = null;\n        windowScrollPosition = null;\n      }\n\n      if (delay) {\n        cleanDelayTimer();\n        if (visible !== computedVisible.value) {\n          delayTimer = window.setTimeout(update, delay);\n        }\n      } else {\n        update();\n      }\n    };\n\n    const handleClick = (e: MouseEvent) => {\n      (attrs as any).onClick?.(e);\n      if (props.disabled || (computedVisible.value && !props.clickToClose)) {\n        return;\n      }\n      if (triggerMethods.value.includes('click')) {\n        updateMousePosition(e);\n        changeVisible(!computedVisible.value);\n      } else if (\n        triggerMethods.value.includes('contextMenu') &&\n        computedVisible.value\n      ) {\n        changeVisible(false);\n      }\n    };\n\n    const handleMouseEnter = (e: MouseEvent) => {\n      (attrs as any).onMouseenter?.(e);\n      if (props.disabled || !triggerMethods.value.includes('hover')) {\n        return;\n      }\n      updateMousePosition(e);\n      changeVisible(true, props.mouseEnterDelay);\n    };\n\n    const handleMouseEnterWithContext = (e: MouseEvent) => {\n      triggerCtx?.onMouseenter(e);\n      handleMouseEnter(e);\n    };\n\n    const handleMouseLeave = (e: MouseEvent) => {\n      (attrs as any).onMouseleave?.(e);\n      if (props.disabled || !triggerMethods.value.includes('hover')) {\n        return;\n      }\n      changeVisible(false, props.mouseLeaveDelay);\n    };\n\n    const handleMouseLeaveWithContext = (e: MouseEvent) => {\n      triggerCtx?.onMouseleave(e);\n      handleMouseLeave(e);\n    };\n\n    const handleFocusin = (e: FocusEvent) => {\n      (attrs as any).onFocusin?.(e);\n      if (props.disabled || !triggerMethods.value.includes('focus')) {\n        return;\n      }\n      changeVisible(true, props.focusDelay);\n    };\n\n    const handleFocusout = (e: FocusEvent) => {\n      (attrs as any).onFocusout?.(e);\n      if (props.disabled || !triggerMethods.value.includes('focus')) {\n        return;\n      }\n      if (!props.blurToClose) {\n        return;\n      }\n      changeVisible(false);\n    };\n\n    const handleContextmenu = (e: MouseEvent) => {\n      (attrs as any).onContextmenu?.(e);\n      if (\n        props.disabled ||\n        !triggerMethods.value.includes('contextMenu') ||\n        (computedVisible.value && !props.clickToClose)\n      ) {\n        return;\n      }\n      updateMousePosition(e);\n      changeVisible(!computedVisible.value);\n      e.preventDefault();\n    };\n\n    const addChildRef = (ref: any) => {\n      childrenRefs.add(ref);\n      triggerCtx?.addChildRef(ref);\n    };\n    const removeChildRef = (ref: any) => {\n      childrenRefs.delete(ref);\n      triggerCtx?.removeChildRef(ref);\n    };\n\n    // 添加triggerCtx，用于嵌套时保持状态\n    provide(\n      triggerInjectionKey,\n      reactive({\n        onMouseenter: handleMouseEnterWithContext,\n        onMouseleave: handleMouseLeaveWithContext,\n        addChildRef,\n        removeChildRef,\n      })\n    );\n\n    // 外部事件\n    const removeOutsideListener = () => {\n      off(document.documentElement, 'mousedown', handleOutsideClick);\n      outsideListener = false;\n    };\n\n    const contentSlot = usePickSlots(slots, 'content');\n\n    const hidePopup = computed(() => {\n      return props.hideEmpty && isEmptyChildren(contentSlot.value?.());\n    });\n\n    const handleOutsideClick = (e: MouseEvent) => {\n      if (\n        firstElement.value?.contains(e.target as HTMLElement) ||\n        popupRef.value?.contains(e.target as HTMLElement)\n      ) {\n        return;\n      }\n\n      for (const item of childrenRefs) {\n        if (item.value?.contains(e.target as HTMLElement)) {\n          return;\n        }\n      }\n\n      removeOutsideListener();\n      changeVisible(false);\n    };\n\n    const isExceedThreshold = (\n      oldPosition: [number, number],\n      element: HTMLElement\n    ) => {\n      const [scrollTop, scrollLeft] = oldPosition;\n      const { scrollTop: newScrollTop, scrollLeft: newScrollLeft } = element;\n      return (\n        Math.abs(newScrollTop - scrollTop) >= props.scrollToCloseDistance ||\n        Math.abs(newScrollLeft - scrollLeft) >= props.scrollToCloseDistance\n      );\n    };\n\n    const handleScroll = throttleByRaf((e) => {\n      if (computedVisible.value) {\n        if (props.scrollToClose || configCtx?.scrollToClose) {\n          const element = e.target as HTMLElement;\n          if (!scrollPosition) {\n            scrollPosition = [element.scrollTop, element.scrollLeft];\n          }\n          if (isExceedThreshold(scrollPosition, element)) {\n            changeVisible(false);\n          } else {\n            updatePopupStyle();\n          }\n        } else {\n          updatePopupStyle();\n        }\n      }\n    });\n\n    const removeWindowScroll = () => {\n      off(window, 'scroll', onWindowScroll);\n      windowListener = false;\n    };\n\n    const onWindowScroll = throttleByRaf((e) => {\n      const element = e.target.documentElement;\n      if (!windowScrollPosition) {\n        windowScrollPosition = [element.scrollTop, element.scrollLeft];\n      }\n      if (isExceedThreshold(windowScrollPosition, element)) {\n        changeVisible(false);\n        removeWindowScroll();\n      }\n    });\n\n    const handleResize = () => {\n      if (computedVisible.value) {\n        updatePopupStyle();\n      }\n    };\n\n    const onTargetResize = () => {\n      handleResize();\n      emit('resize');\n    };\n\n    const handlePopupMouseDown = (e: Event) => {\n      if (props.preventFocus) {\n        e.preventDefault();\n      }\n    };\n\n    triggerCtx?.addChildRef(popupRef);\n\n    const triggerCls = computed(() => {\n      return computedVisible.value ? props.openedClass : undefined;\n    });\n\n    let scrollElements: HTMLElement[] | undefined;\n\n    // 当popup显示状态改变时，修改外部点击事件\n    watch(computedVisible, (value) => {\n      if (props.clickOutsideToClose) {\n        if (!value && outsideListener) {\n          removeOutsideListener();\n        } else if (value && !outsideListener) {\n          on(document.documentElement, 'mousedown', handleOutsideClick);\n          outsideListener = true;\n        }\n      }\n\n      if (props.scrollToClose || configCtx?.scrollToClose) {\n        on(window, 'scroll', onWindowScroll);\n        windowListener = true;\n      }\n\n      if (props.updateAtScroll || configCtx?.updateAtScroll) {\n        if (value) {\n          scrollElements = getScrollElements(firstElement.value);\n          for (const item of scrollElements) {\n            item.addEventListener('scroll', handleScroll);\n          }\n        } else if (scrollElements) {\n          for (const item of scrollElements) {\n            item.removeEventListener('scroll', handleScroll);\n          }\n          scrollElements = undefined;\n        }\n      }\n\n      if (value) {\n        mounted.value = true;\n      }\n    });\n\n    // 影响popup显示的参数变化时，更新popup样式\n    watch(\n      () => [props.autoFitPopupWidth, props.autoFitPopupMinWidth],\n      () => {\n        if (computedVisible.value) {\n          updatePopupStyle();\n        }\n      }\n    );\n\n    const { createResizeObserver, destroyResizeObserver } = useResizeObserver({\n      elementRef: containerRef,\n      onResize: handleResize,\n    });\n\n    onMounted(() => {\n      createResizeObserver();\n\n      // 默认显示时，更新popup位置\n      if (computedVisible.value) {\n        updatePopupStyle();\n        if (props.clickOutsideToClose && !outsideListener) {\n          on(document.documentElement, 'mousedown', handleOutsideClick);\n          outsideListener = true;\n        }\n        if (props.updateAtScroll || configCtx?.updateAtScroll) {\n          scrollElements = getScrollElements(firstElement.value);\n          for (const item of scrollElements) {\n            item.addEventListener('scroll', handleScroll);\n          }\n        }\n      }\n    });\n\n    onUpdated(() => {\n      if (computedVisible.value) {\n        updatePopupStyle();\n      }\n    });\n\n    onDeactivated(() => {\n      changeVisible(false);\n    });\n\n    onBeforeUnmount(() => {\n      triggerCtx?.removeChildRef(popupRef);\n      destroyResizeObserver();\n      if (outsideListener) {\n        removeOutsideListener();\n      }\n      if (windowListener) {\n        removeWindowScroll();\n      }\n      if (scrollElements) {\n        for (const item of scrollElements) {\n          item.removeEventListener('scroll', handleScroll);\n        }\n        scrollElements = undefined;\n      }\n    });\n\n    const mounted = ref(computedVisible.value);\n    const isAnimation = ref(false);\n\n    const onAnimationStart = () => {\n      isAnimation.value = true;\n    };\n\n    const handleShow = () => {\n      isAnimation.value = false;\n      if (computedVisible.value) {\n        emit('show');\n      }\n    };\n\n    const handleHide = () => {\n      isAnimation.value = false;\n      if (!computedVisible.value) {\n        mounted.value = false;\n        emit('hide');\n      }\n    };\n\n    return () => {\n      children.value = slots.default?.() ?? [];\n\n      mergeFirstChild(children.value, {\n        class: triggerCls.value,\n        onClick: handleClick,\n        onMouseenter: handleMouseEnter,\n        onMouseleave: handleMouseLeave,\n        onFocusin: handleFocusin,\n        onFocusout: handleFocusout,\n        onContextmenu: handleContextmenu,\n      });\n\n      return (\n        <>\n          {props.autoFixPosition ? (\n            <ResizeObserver onResize={onTargetResize}>\n              {children.value}\n            </ResizeObserver>\n          ) : (\n            children.value\n          )}\n          <ClientOnly>\n            <Teleport\n              to={teleportContainer.value}\n              disabled={!props.renderToBody}\n            >\n              {(!props.unmountOnClose ||\n                computedVisible.value ||\n                mounted.value) &&\n                !hidePopup.value && (\n                  <ResizeObserver onResize={handleResize}>\n                    <div\n                      ref={popupRef}\n                      class={[\n                        `${prefixCls}-popup`,\n                        `${prefixCls}-position-${popupPosition.value}`,\n                      ]}\n                      style={{\n                        ...popupStyle.value,\n                        zIndex: zIndex.value,\n                        pointerEvents: isAnimation.value ? 'none' : 'auto',\n                      }}\n                      trigger-placement={popupPosition.value}\n                      onMouseenter={handleMouseEnterWithContext}\n                      onMouseleave={handleMouseLeaveWithContext}\n                      onMousedown={handlePopupMouseDown}\n                      {...popupAttrs.value}\n                    >\n                      <Transition\n                        name={props.animationName}\n                        duration={props.duration}\n                        appear\n                        onBeforeEnter={onAnimationStart}\n                        onAfterEnter={handleShow}\n                        onBeforeLeave={onAnimationStart}\n                        onAfterLeave={handleHide}\n                      >\n                        <div\n                          class={`${prefixCls}-popup-wrapper`}\n                          style={transformStyle.value}\n                          v-show={computedVisible.value}\n                        >\n                          <div\n                            class={[`${prefixCls}-content`, props.contentClass]}\n                            style={props.contentStyle}\n                          >\n                            {slots.content?.()}\n                          </div>\n                          {props.showArrow && (\n                            <div\n                              ref={arrowRef}\n                              class={[`${prefixCls}-arrow`, props.arrowClass]}\n                              style={arrowStyle.value}\n                            />\n                          )}\n                        </div>\n                      </Transition>\n                    </div>\n                  </ResizeObserver>\n                )}\n            </Teleport>\n          </ClientOnly>\n        </>\n      );\n    };\n  },\n});\n"
  },
  {
    "path": "packages/web-vue/components/trigger/utils.ts",
    "content": "import type { CSSProperties } from 'vue';\nimport type { TriggerPosition } from '../_utils/constant';\nimport { isArray } from '../_utils/is';\nimport { getDocumentSize, Size } from '../_utils/dom';\nimport type { TriggerPopupTranslate } from './interface';\n\nconst getViewPortSize = (): Size => {\n  const { height, width } = getDocumentSize();\n\n  return {\n    width: Math.min(width, window.innerWidth),\n    height: Math.min(height, window.innerHeight),\n  };\n};\n\nexport interface ElementRect {\n  top: number;\n  bottom: number;\n  left: number;\n  right: number;\n  width: number;\n  height: number;\n}\n\ninterface ScrollRect {\n  top: number;\n  bottom: number;\n  left: number;\n  right: number;\n  scrollTop: number;\n  scrollBottom: number;\n  scrollLeft: number;\n  scrollRight: number;\n  width: number;\n  height: number;\n}\n\nexport const getElementScrollRect = (\n  element: HTMLElement,\n  containerRect: DOMRect\n) => {\n  const rect = element.getBoundingClientRect();\n\n  return {\n    top: rect.top,\n    bottom: rect.bottom,\n    left: rect.left,\n    right: rect.right,\n    scrollTop: rect.top - containerRect.top,\n    scrollBottom: rect.bottom - containerRect.top,\n    scrollLeft: rect.left - containerRect.left,\n    scrollRight: rect.right - containerRect.left,\n    width: element.offsetWidth ?? element.clientWidth,\n    height: element.offsetHeight ?? element.clientHeight,\n  };\n};\n\ntype BasePosition = 'top' | 'left' | 'bottom' | 'right';\n\ninterface PositionOffset {\n  left: number;\n  top: number;\n}\n\nconst getBoundaryPosition = (position: TriggerPosition): BasePosition => {\n  switch (position) {\n    case 'top':\n    case 'tl':\n    case 'tr':\n      return 'top';\n    case 'bottom':\n    case 'bl':\n    case 'br':\n      return 'bottom';\n    case 'left':\n    case 'lt':\n    case 'lb':\n      return 'left';\n    case 'right':\n    case 'rt':\n    case 'rb':\n      return 'right';\n    default:\n      return 'top';\n  }\n};\n\nconst changePosition = (\n  position: TriggerPosition,\n  direction: BasePosition\n): TriggerPosition => {\n  switch (direction) {\n    case 'top':\n      switch (position) {\n        case 'bottom':\n          return 'top';\n        case 'bl':\n          return 'tl';\n        case 'br':\n          return 'tr';\n        default:\n          return position;\n      }\n    case 'bottom':\n      switch (position) {\n        case 'top':\n          return 'bottom';\n        case 'tl':\n          return 'bl';\n        case 'tr':\n          return 'br';\n        default:\n          return position;\n      }\n    case 'left':\n      switch (position) {\n        case 'right':\n          return 'left';\n        case 'rt':\n          return 'lt';\n        case 'rb':\n          return 'lb';\n        default:\n          return position;\n      }\n    case 'right':\n      switch (position) {\n        case 'left':\n          return 'right';\n        case 'lt':\n          return 'rt';\n        case 'lb':\n          return 'rb';\n        default:\n          return position;\n      }\n    default:\n      return position;\n  }\n};\n\nconst getFitPosition = (\n  position: TriggerPosition,\n  popupPosition: PositionOffset,\n  {\n    containerRect,\n    triggerRect,\n    popupRect,\n    offset,\n    translate,\n  }: {\n    containerRect: DOMRect;\n    triggerRect: ScrollRect;\n    popupRect: ScrollRect;\n    offset: number;\n    translate: TriggerPopupTranslate;\n  }\n) => {\n  const direction = getBoundaryPosition(position);\n  const viewPortSize = getViewPortSize();\n\n  // Boundary value of pop-up box and window\n  const viewPortBoundary = {\n    top: containerRect.top + popupPosition.top,\n    // prettier-ignore\n    bottom: viewPortSize.height - (containerRect.top + popupPosition.top + popupRect.height),\n    left: containerRect.left + popupPosition.left,\n    // prettier-ignore\n    right: viewPortSize.width - (containerRect.left + popupPosition.left + popupRect.width),\n  };\n\n  let finalPosition = position;\n  if (direction === 'top' && viewPortBoundary.top < 0) {\n    if (triggerRect.top > popupRect.height) {\n      // Adjust the pop-up box to snap to the top of the window\n      popupPosition.top = -containerRect.top;\n    } else {\n      const fitPosition = getPopupOffset('bottom', triggerRect, popupRect, {\n        offset,\n        translate,\n      });\n      // prettier-ignore\n      if (viewPortSize.height - (containerRect.top + fitPosition.top + popupRect.height) > 0) {\n        finalPosition = changePosition(position, 'bottom');\n        popupPosition.top = fitPosition.top;\n      }\n    }\n  }\n  if (direction === 'bottom' && viewPortBoundary.bottom < 0) {\n    if (viewPortSize.height - triggerRect.bottom > popupRect.height) {\n      // Adjust the pop-up box to snap to the bottom of the window\n      // prettier-ignore\n      popupPosition.top = -containerRect.top + (viewPortSize.height - popupRect.height);\n    } else {\n      const fitPosition = getPopupOffset('top', triggerRect, popupRect, {\n        offset,\n        translate,\n      });\n      if (containerRect.top + fitPosition.top > 0) {\n        finalPosition = changePosition(position, 'top');\n        popupPosition.top = fitPosition.top;\n      }\n    }\n  }\n  if (direction === 'left' && viewPortBoundary.left < 0) {\n    if (triggerRect.left > popupRect.width) {\n      // Adjust the pop-up box to snap to the left side of the window\n      popupPosition.left = -containerRect.left;\n    } else {\n      const fitPosition = getPopupOffset('right', triggerRect, popupRect, {\n        offset,\n        translate,\n      });\n      // prettier-ignore\n      if (viewPortSize.width - (containerRect.left + fitPosition.left + popupRect.width) > 0) {\n        finalPosition = changePosition(position, 'right');\n        popupPosition.left = fitPosition.left;\n      }\n    }\n  }\n  if (direction === 'right' && viewPortBoundary.right < 0) {\n    if (viewPortSize.width - triggerRect.right > popupRect.width) {\n      // Adjust the pop-up box to snap to the right side of the window\n      // prettier-ignore\n      popupPosition.left = -containerRect.left + (viewPortSize.width - popupRect.width);\n    } else {\n      const fitPosition = getPopupOffset('left', triggerRect, popupRect, {\n        offset,\n        translate,\n      });\n      if (containerRect.left + fitPosition.left > 0) {\n        finalPosition = changePosition(position, 'left');\n        popupPosition.left = fitPosition.left;\n      }\n    }\n  }\n\n  if (direction === 'top' || direction === 'bottom') {\n    if (viewPortBoundary.left < 0) {\n      popupPosition.left = -containerRect.left;\n    } else if (viewPortBoundary.right < 0) {\n      // prettier-ignore\n      popupPosition.left = -containerRect.left + (viewPortSize.width - popupRect.width);\n    }\n  }\n  if (direction === 'left' || direction === 'right') {\n    if (viewPortBoundary.top < 0) {\n      popupPosition.top = -containerRect.top;\n    } else if (viewPortBoundary.bottom < 0) {\n      // prettier-ignore\n      popupPosition.top = -containerRect.top + (viewPortSize.height - popupRect.height);\n    }\n  }\n\n  return {\n    popupPosition,\n    position: finalPosition,\n  };\n};\n\nconst getPopupOffset = (\n  position: TriggerPosition,\n  triggerRect: ScrollRect,\n  popupRect: ScrollRect,\n  {\n    offset = 0,\n    translate = [0, 0],\n  }: {\n    offset?: number;\n    translate?: TriggerPopupTranslate;\n  } = {}\n): PositionOffset => {\n  // prettier-ignore\n  const _translate = (isArray(translate) ? translate : translate[position]) ?? [0, 0];\n\n  switch (position) {\n    case 'top':\n      return {\n        left:\n          triggerRect.scrollLeft +\n          Math.round(triggerRect.width / 2) -\n          Math.round(popupRect.width / 2) +\n          _translate[0],\n        top: triggerRect.scrollTop - popupRect.height - offset + _translate[1],\n      };\n    case 'tl':\n      return {\n        left: triggerRect.scrollLeft + _translate[0],\n        top: triggerRect.scrollTop - popupRect.height - offset + _translate[1],\n      };\n    case 'tr':\n      return {\n        left: triggerRect.scrollRight - popupRect.width + _translate[0],\n        top: triggerRect.scrollTop - popupRect.height - offset + _translate[1],\n      };\n    case 'bottom':\n      return {\n        left:\n          triggerRect.scrollLeft +\n          Math.round(triggerRect.width / 2) -\n          Math.round(popupRect.width / 2) +\n          _translate[0],\n        top: triggerRect.scrollBottom + offset + _translate[1],\n      };\n    case 'bl':\n      return {\n        left: triggerRect.scrollLeft + _translate[0],\n        top: triggerRect.scrollBottom + offset + _translate[1],\n      };\n    case 'br':\n      return {\n        left: triggerRect.scrollRight - popupRect.width + _translate[0],\n        top: triggerRect.scrollBottom + offset + _translate[1],\n      };\n    case 'left':\n      return {\n        left: triggerRect.scrollLeft - popupRect.width - offset + _translate[0],\n        top:\n          triggerRect.scrollTop +\n          Math.round(triggerRect.height / 2) -\n          Math.round(popupRect.height / 2) +\n          _translate[1],\n      };\n    case 'lt':\n      return {\n        left: triggerRect.scrollLeft - popupRect.width - offset + _translate[0],\n        top: triggerRect.scrollTop + _translate[1],\n      };\n    case 'lb':\n      return {\n        left: triggerRect.scrollLeft - popupRect.width - offset + _translate[0],\n        top: triggerRect.scrollBottom - popupRect.height + _translate[1],\n      };\n    case 'right':\n      return {\n        left: triggerRect.scrollRight + offset + _translate[0],\n        top:\n          triggerRect.scrollTop +\n          Math.round(triggerRect.height / 2) -\n          Math.round(popupRect.height / 2) +\n          _translate[1],\n      };\n    case 'rt':\n      return {\n        left: triggerRect.scrollRight + offset + _translate[0],\n        top: triggerRect.scrollTop + _translate[1],\n      };\n    case 'rb':\n      return {\n        left: triggerRect.scrollRight + offset + _translate[0],\n        top: triggerRect.scrollBottom - popupRect.height + _translate[1],\n      };\n    default:\n      return {\n        left: 0,\n        top: 0,\n      };\n  }\n};\n\nexport const getTransformOrigin = (position: TriggerPosition) => {\n  let originX = '0';\n  if (['top', 'bottom'].includes(position)) {\n    originX = '50%';\n  } else if (['left', 'lt', 'lb', 'tr', 'br'].includes(position)) {\n    originX = '100%';\n  }\n  let originY = '0';\n  if (['left', 'right'].includes(position)) {\n    originY = '50%';\n  } else if (['top', 'tl', 'tr', 'lb', 'rb'].includes(position)) {\n    originY = '100%';\n  }\n  return `${originX} ${originY}`;\n};\n\nexport const getPopupStyle = (\n  position: TriggerPosition,\n  containerRect: DOMRect,\n  triggerRect: ScrollRect,\n  popupRect: ScrollRect,\n  {\n    offset = 0,\n    translate = [0, 0],\n    customStyle = {},\n    autoFitPosition = false,\n  }: {\n    offset?: number;\n    translate?: TriggerPopupTranslate;\n    customStyle?: CSSProperties;\n    autoFitPosition?: boolean;\n  } = {}\n): { style: CSSProperties; position: TriggerPosition } => {\n  let finalPosition = position;\n  let popupPosition = getPopupOffset(position, triggerRect, popupRect, {\n    offset,\n    translate,\n  });\n\n  if (autoFitPosition) {\n    const result = getFitPosition(position, popupPosition, {\n      containerRect,\n      popupRect,\n      triggerRect,\n      offset,\n      translate,\n    });\n    popupPosition = result.popupPosition;\n    finalPosition = result.position;\n  }\n\n  const style = {\n    left: `${popupPosition.left}px`,\n    top: `${popupPosition.top}px`,\n    ...customStyle,\n  };\n\n  return {\n    style,\n    position: finalPosition,\n  };\n};\n\nexport const getArrowStyle = (\n  position: TriggerPosition,\n  triggerRect: ScrollRect,\n  popupRect: ScrollRect,\n  {\n    customStyle = {},\n  }: {\n    customStyle?: CSSProperties;\n  }\n): CSSProperties => {\n  if (['top', 'tl', 'tr', 'bottom', 'bl', 'br'].includes(position)) {\n    let offsetLeft = Math.abs(\n      triggerRect.scrollLeft + triggerRect.width / 2 - popupRect.scrollLeft\n    );\n\n    if (offsetLeft > popupRect.width - 8) {\n      if (triggerRect.width > popupRect.width) {\n        offsetLeft = popupRect.width / 2;\n      } else {\n        offsetLeft = popupRect.width - 8;\n      }\n    }\n\n    if (['top', 'tl', 'tr'].includes(position)) {\n      return {\n        left: `${offsetLeft}px`,\n        bottom: '0',\n        transform: 'translate(-50%,50%) rotate(45deg)',\n        ...customStyle,\n      };\n    }\n    return {\n      left: `${offsetLeft}px`,\n      top: '0',\n      transform: 'translate(-50%,-50%) rotate(45deg)',\n      ...customStyle,\n    };\n  }\n  let offsetTop = Math.abs(\n    triggerRect.scrollTop + triggerRect.height / 2 - popupRect.scrollTop\n  );\n\n  if (offsetTop > popupRect.height - 8) {\n    if (triggerRect.height > popupRect.height) {\n      offsetTop = popupRect.height / 2;\n    } else {\n      offsetTop = popupRect.height - 8;\n    }\n  }\n\n  if (['left', 'lt', 'lb'].includes(position)) {\n    return {\n      top: `${offsetTop}px`,\n      right: '0',\n      transform: 'translate(50%,-50%) rotate(45deg)',\n      ...customStyle,\n    };\n  }\n  return {\n    top: `${offsetTop}px`,\n    left: '0',\n    transform: 'translate(-50%,-50%) rotate(45deg)',\n    ...customStyle,\n  };\n};\n\nexport const isScrollElement = (element: HTMLElement) => {\n  return (\n    element.scrollHeight > element.offsetHeight ||\n    element.scrollWidth > element.offsetWidth\n  );\n};\n\nexport const getScrollElements = (container: HTMLElement | undefined) => {\n  const scrollElements: HTMLElement[] = [];\n  let element: HTMLElement | undefined = container;\n  while (element && element !== document.documentElement) {\n    if (isScrollElement(element)) {\n      scrollElements.push(element);\n    }\n    element = element.parentElement ?? undefined;\n  }\n  return scrollElements;\n};\n"
  },
  {
    "path": "packages/web-vue/components/typography/CHANGELOG.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.51.0\n\n`2023-09-01`\n\n### 🐛 BugFix\n\n- Fix the problem of missing related component styles when importing on demand ([#2682](https://github.com/arco-design/arco-design-vue/pull/2682))\n\n\n## 2.49.2\n\n`2023-07-28`\n\n### 🐛 BugFix\n\n- enhanced typography styles for handling long words ([#2583](https://github.com/arco-design/arco-design-vue/pull/2583))\n\n\n## 2.41.0\n\n`2022-12-30`\n\n### 🐛 BugFix\n\n- Fixed ellipsis invalidation with parent container setting `white-space: nowrap` ([#1995](https://github.com/arco-design/arco-design-vue/pull/1995))\n\n\n## 2.37.0\n\n`2022-09-16`\n\n### 🆕 Feature\n\n- Omit mode adds support for CSS mode (experimental) ([#1635](https://github.com/arco-design/arco-design-vue/pull/1635))\n\n\n## 2.33.1\n\n`2022-07-22`\n\n### 🐛 BugFix\n\n- cancel click propagation of suffix icon ([#1411](https://github.com/arco-design/arco-design-vue/pull/1411))\n\n\n## 2.32.0\n\n`2022-06-24`\n\n### 🆕 Feature\n\n- Added `tooltip-props` class property ([#1338](https://github.com/arco-design/arco-design-vue/pull/1338))\n\n\n## 2.27.0\n\n`2022-05-13`\n\n### 🐛 BugFix\n\n- fix the problem that event `edit-end` triggered twice when press enter ([#1122](https://github.com/arco-design/arco-design-vue/pull/1122))\n\n\n## 2.24.0\n\n`2022-04-15`\n\n### 🐛 BugFix\n\n- fixed the warning of `slots.default` ([#980](https://github.com/arco-design/arco-design-vue/pull/980))\n\n\n## 2.22.0\n\n`2022-04-01`\n\n### 🐛 BugFix\n\n- fix the problem that copy does not work ([#915](https://github.com/arco-design/arco-design-vue/pull/915))\n\n\n## 2.20.0\n\n`2022-03-18`\n\n### 🐛 BugFix\n\n- Fix `ellipsisText` not updating ([#833](https://github.com/arco-design/arco-design-vue/pull/833))\n\n\n## 2.16.0\n\n`2022-01-21`\n\n### 🆕 Feature\n\n- add property `copy-delay` support customize the delay time for the disappearance of copy success status ([#632](https://github.com/arco-design/arco-design-vue/pull/632))\n\n### 🐛 BugFix\n\n- Fix the problem of warning in JSX usage ([#591](https://github.com/arco-design/arco-design-vue/pull/591))\n\n\n## 2.2.0\n\n`2021-11-10`\n\n### 🐛 BugFix\n\n- Fixed the problem of unable input ([#121](https://github.com/arco-design/arco-design-vue/pull/121))\n\n"
  },
  {
    "path": "packages/web-vue/components/typography/CHANGELOG.zh-CN.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.51.0\n\n`2023-09-01`\n\n### 🐛 问题修复\n\n- 修复按需导入时缺少相关组件样式的问题 ([#2682](https://github.com/arco-design/arco-design-vue/pull/2682))\n\n\n## 2.49.2\n\n`2023-07-28`\n\n### 🐛 问题修复\n\n- 增强对连续长单词的省略支持 ([#2583](https://github.com/arco-design/arco-design-vue/pull/2583))\n\n\n## 2.41.0\n\n`2022-12-30`\n\n### 🐛 问题修复\n\n- 修复父容器设置`white-space: nowrap`时 ellipsis 失效 ([#1995](https://github.com/arco-design/arco-design-vue/pull/1995))\n\n\n## 2.37.0\n\n`2022-09-16`\n\n### 🆕 新增功能\n\n- 省略模式增加支持 CSS 方式（实验性） ([#1635](https://github.com/arco-design/arco-design-vue/pull/1635))\n\n\n## 2.33.1\n\n`2022-07-22`\n\n### 🐛 问题修复\n\n- 后缀 icon 点击事件取消冒泡 ([#1411](https://github.com/arco-design/arco-design-vue/pull/1411))\n\n\n## 2.32.0\n\n`2022-06-24`\n\n### 🆕 新增功能\n\n- 新增 `tooltip-props` 类属性 ([#1338](https://github.com/arco-design/arco-design-vue/pull/1338))\n\n\n## 2.27.0\n\n`2022-05-13`\n\n### 🐛 问题修复\n\n- 修复按下回车的时候触发两次 `editEnd` 的问题 ([#1122](https://github.com/arco-design/arco-design-vue/pull/1122))\n\n\n## 2.24.0\n\n`2022-04-15`\n\n### 🐛 问题修复\n\n- 解决 `slots.default` 报警告的问题 ([#980](https://github.com/arco-design/arco-design-vue/pull/980))\n\n\n## 2.22.0\n\n`2022-04-01`\n\n### 🐛 问题修复\n\n- 修复复制无效的问题 ([#915](https://github.com/arco-design/arco-design-vue/pull/915))\n\n\n## 2.20.0\n\n`2022-03-18`\n\n### 🐛 问题修复\n\n- 修复 `ellipsisText` 未更新的问题 ([#833](https://github.com/arco-design/arco-design-vue/pull/833))\n\n\n## 2.16.0\n\n`2022-01-21`\n\n### 🆕 新增功能\n\n- 新增属性 `copy-delay` 用于自定义复制成功状态消失的延迟时间 ([#632](https://github.com/arco-design/arco-design-vue/pull/632))\n\n### 🐛 问题修复\n\n- 修复 JSX 使用中存在警告的问题 ([#591](https://github.com/arco-design/arco-design-vue/pull/591))\n\n\n## 2.2.0\n\n`2021-11-10`\n\n### 🐛 问题修复\n\n- 修复无法输入的问题 ([#121](https://github.com/arco-design/arco-design-vue/pull/121))\n\n"
  },
  {
    "path": "packages/web-vue/components/typography/README.en-US.md",
    "content": "```yaml\nmeta:\n  type: Component\n  category: Common\ntitle: Typography\ndescription: Used to display titles, paragraphs, and text content.\n```\n\n*Auto translate by google.*\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/title.md\n\n@import ./__demo__/text.md\n\n@import ./__demo__/paragraph.md\n\n@import ./__demo__/operations.md\n\n@import ./__demo__/ellipsis.md\n\n## API\n\n\n\n\n\n\n### `Common` Props\n\n|Attribute|Description|Type|Default|version|\n|---|---|---|:---:|:---|\n|type|Text type|`'primary' \\| 'secondary' \\| 'success' \\| 'danger' \\| 'warning'`|`-`||\n|bold|Whether enable bold style|`boolean`|`false`||\n|mark|Mark style|`boolean \\| { color: string }`|`false`||\n|underline|Whether enable underline style|`boolean`|`false`||\n|delete|Whether enable delete style|`boolean`|`false`||\n|code|Whether enable code style|`boolean`|`false`||\n|disabled|Whether disabled|`boolean`|`false`||\n|editable|Whether it's editable|`boolean`|`false`||\n|editing **(v-model)**|Whether it's editing|`boolean`|`-`||\n|default-editing|Default editing state|`boolean`|`false`||\n|edit-text **(v-model)**|Edit text|`string`|`-`||\n|copyable|Whether turn on copy functionality|`boolean`|`false`||\n|copy-text|Copied text|`string`|`-`||\n|copy-delay|After the copy is successful, the delay time for the copy button to return to the clickable state, in milliseconds|`number`|`3000`|2.16.0|\n|ellipsis|Automatic overflow omission, refer to [EllipsisConfig](#EllipsisConfig) for more information.|`boolean \\| EllipsisConfig`|`false`||\n|edit-tooltip-props|Edit button question prompt configuration|`object`|`-`|2.32.0|\n|copy-tooltip-props|Copy button question prompt configuration|`object`|`-`|2.32.0|\n### `Common` Events\n\n|Event Name|Description|Parameters|\n|---|---|---|\n|edit-start|Edit start|-|\n|change|Edit content change|text: `string`|\n|edit-end|Edit end|-|\n|copy|Copy|text: `string`|\n|ellipsis|Ellipsis change|isEllipsis: `boolean`|\n|expand|Expand collapse event|expanded: `boolean`|\n### `Common` Slots\n\n|Slot Name|Description|Parameters|\n|---|---|---|\n|expand-node|Custom expand button|expanded: `boolean`|\n|copy-icon|Custom copy button icon|copied: `boolean`|\n|copy-tooltip|Customize the tooltip content of the copy button|copied: `boolean`|\n\n\n\n\n### `<typography-title>` Props\n\n|Attribute|Description|Type|Default|\n|---|---|---|:---:|\n|heading|Heading level, equivalent to `h1` `h2` `h3` `h4` `h5` `h6`|`'1' \\| '2' \\| '3' \\| '4' \\| '5' \\| '6'`|`1`|\n\n\n\n\n### `<typography-paragraph>` Props\n\n|Attribute|Description|Type|Default|\n|---|---|---|:---:|\n|blockquote|Whether enable blockquote|`boolean`|`false`|\n|spacing|The line height of the paragraph, the default line height is recommended for long text (more than 5 lines). `close` line height is recommended for short text (less than or equal to 3 lines).|`'default' \\| 'close'`|`'default'`|\n\n\n\n\n\n\n\n\n### EllipsisConfig\n\n|Name|Description|Type|Default|version|\n|---|---|---|:---:|:---|\n|rows|The number of omitted lines|`number`|`1`||\n|expandable|Whether expandable|`boolean`|`false`||\n|ellipsisStr|Ellipsis string|`string`|`'...'`||\n|suffix|Suffix|`string`|`-`||\n|showTooltip|Pop-up box when configuration is omitted|`boolean    \\| { type: 'tooltip' \\| 'popover'; props: Record<string, any> }`|`false`||\n|css|Whether to use CSS ellipsis (expansion, custom ellipsis and suffix are not supported in this mode)|`boolean`|`false`|2.37.0|\n\n\n"
  },
  {
    "path": "packages/web-vue/components/typography/README.zh-CN.md",
    "content": "```yaml\nmeta:\n  type: 组件\n  category: 通用\ntitle: 排版 Typography\ndescription: 用于展示标题、段落、文本内容。\n```\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/title.md\n\n@import ./__demo__/text.md\n\n@import ./__demo__/paragraph.md\n\n@import ./__demo__/operations.md\n\n@import ./__demo__/ellipsis.md\n\n## API\n\n\n\n\n\n\n### `Common` Props\n\n|参数名|描述|类型|默认值|版本|\n|---|---|---|:---:|:---|\n|type|文本类型|`'primary' \\| 'secondary' \\| 'success' \\| 'danger' \\| 'warning'`|`-`||\n|bold|粗体|`boolean`|`false`||\n|mark|添加标记样式|`boolean \\| { color: string }`|`false`||\n|underline|下划线样式|`boolean`|`false`||\n|delete|删除线样式|`boolean`|`false`||\n|code|代码块样式|`boolean`|`false`||\n|disabled|禁用状态|`boolean`|`false`||\n|editable|开启可编辑功能|`boolean`|`false`||\n|editing **(v-model)**|是否在编辑状态|`boolean`|`-`||\n|default-editing|默认的编辑状态|`boolean`|`false`||\n|edit-text **(v-model)**|编辑的文字|`string`|`-`||\n|copyable|开启复制功能|`boolean`|`false`||\n|copy-text|复制的文字|`string`|`-`||\n|copy-delay|复制成功后，复制按钮恢复到可点击状态的延迟时间，单位是毫秒|`number`|`3000`|2.16.0|\n|ellipsis|自动溢出省略，具体参数配置看 [EllipsisConfig](#EllipsisConfig)|`boolean \\| EllipsisConfig`|`false`||\n|edit-tooltip-props|编辑按钮问题提示配置|`object`|`-`|2.32.0|\n|copy-tooltip-props|拷贝按钮问题提示配置|`object`|`-`|2.32.0|\n### `Common` Events\n\n|事件名|描述|参数|\n|---|---|---|\n|edit-start|开始编辑|-|\n|change|编辑内容变化|text: `string`|\n|edit-end|编辑结束|-|\n|copy|复制|text: `string`|\n|ellipsis|省略变化事件|isEllipsis: `boolean`|\n|expand|展开收起事件|expanded: `boolean`|\n### `Common` Slots\n\n|插槽名|描述|参数|\n|---|:---:|---|\n|expand-node|自定义展开和折叠按钮|expanded: `boolean`|\n|copy-icon|自定义复制按钮图标|copied: `boolean`|\n|copy-tooltip|自定义复制按钮的 tooltip 内容|copied: `boolean`|\n\n\n\n\n### `<typography-title>` Props\n\n|参数名|描述|类型|默认值|\n|---|---|---|:---:|\n|heading|标题级别，相当于 `h1` `h2` `h3` `h4` `h5` `h6`|`'1' \\| '2' \\| '3' \\| '4' \\| '5' \\| '6'`|`1`|\n\n\n\n\n### `<typography-paragraph>` Props\n\n|参数名|描述|类型|默认值|\n|---|---|---|:---:|\n|blockquote|长引用|`boolean`|`false`|\n|spacing|段落的的行高，长文本(大于5行)的时候推荐使用默认行高，短文本(小于等于3行)推荐使用 `close` 紧密的行高。|`'default' \\| 'close'`|`'default'`|\n\n\n\n\n\n\n\n\n### EllipsisConfig\n\n|参数名|描述|类型|默认值|版本|\n|---|---|---|:---:|:---|\n|rows|显示省略的行数|`number`|`1`||\n|expandable|是否支持展开/折叠|`boolean`|`false`||\n|ellipsisStr|省略号|`string`|`'...'`||\n|suffix|后缀|`string`|`-`||\n|showTooltip|配置省略时的弹出框|`boolean    \\| { type: 'tooltip' \\| 'popover'; props: Record<string, any> }`|`false`||\n|css|是否使用 CSS 省略（此模式暂不支持展开、自定义省略号和后缀）|`boolean`|`false`|2.37.0|\n\n\n"
  },
  {
    "path": "packages/web-vue/components/typography/TEMPLATE.md",
    "content": "## zh-CN\n```yaml\nmeta:\n  type: 组件\n  category: 通用\ntitle: 排版 Typography\ndescription: 用于展示标题、段落、文本内容。\n```\n---\n## en-US\n```yaml\nmeta:\n  type: Component\n  category: Common\ntitle: Typography\ndescription: Used to display titles, paragraphs, and text content.\n```\n---\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/title.md\n\n@import ./__demo__/text.md\n\n@import ./__demo__/paragraph.md\n\n@import ./__demo__/operations.md\n\n@import ./__demo__/ellipsis.md\n\n## API\n\n%%API(typography.vue)%%\n\n%%API(base.tsx)%%\n\n%%API(title.tsx)%%\n\n%%API(paragraph.tsx)%%\n\n%%API(text.tsx)%%\n\n%%INTERFACE(interface.ts)%%\n"
  },
  {
    "path": "packages/web-vue/components/typography/__demo__/basic.md",
    "content": "```yaml\ntitle:\n  zh-CN: 组合使用\n  en-US: Basic\n```\n\n## zh-CN\n\n排版组件用于展示标题、段落、文本内容，这里展示了排版的组合使用。\n\n---\n\n## en-US\n\nDisplay headings, paragraphs, and text content.\n\n---\n\n```vue\n<template>\n  <a-typography :style=\"{ marginTop: '-40px' }\">\n    <a-typography-title>\n      Design system\n    </a-typography-title>\n    <a-typography-paragraph>\n      A design is a plan or specification for the construction of an object or system or for the implementation of an activity or process, or the result of that plan or specification in the form of a prototype, product or process. The verb to design expresses the process of developing a design.\n    </a-typography-paragraph>\n    <a-typography-paragraph>\n      In some cases, the direct construction of an object without an explicit prior plan (such as in craftwork, some engineering, coding, and graphic design) may also be considered <a-typography-text bold>to be a design activity.</a-typography-text>\n    </a-typography-paragraph>\n    <a-typography-title :heading=\"2\">ArcoDesign</a-typography-title>\n    <a-typography-paragraph>\n      The ArcoDesign component library defines a set of default particle variables, and a custom theme is to <a-typography-text mark>customize</a-typography-text> and <a-typography-text underline>overwrite</a-typography-text> this variable list.\n    </a-typography-paragraph>\n    <a-typography-paragraph blockquote>\n      A design is a plan or specification for the construction of an object or system or for the implementation of an activity or process, or the result of that plan or specification in the form of a <a-typography-text code>prototype</a-typography-text>, <a-typography-text code>product</a-typography-text> or <a-typography-text code>process</a-typography-text>. The verb to design expresses the process of developing a design.\n    </a-typography-paragraph>\n    <a-typography-paragraph mark underline delete>A design is a plan or specification for the construction of an object or system or for the implementation of an activity or process.</a-typography-paragraph>\n    <a-typography-paragraph>\n      <ul>\n        <li>\n          Architectural blueprints\n          <ul>\n            <li>Architectural blueprints</li>\n          </ul>\n        </li>\n        <li>Engineering drawings</li>\n        <li>Business processes</li>\n      </ul>\n    </a-typography-paragraph>\n    <a-typography-paragraph>\n      <ol>\n        <li>Architectural blueprints</li>\n        <li>Engineering drawings</li>\n        <li>Business processes</li>\n      </ol>\n    </a-typography-paragraph>\n  </a-typography>\n</template>\n```\n\n"
  },
  {
    "path": "packages/web-vue/components/typography/__demo__/ellipsis.md",
    "content": "```yaml\ntitle:\n  zh-CN: 省略\n  en-US: Ellipsis\n```\n\n## zh-CN\n\n在空间不足时省略多行文本内容。\n\n---\n\n## en-US\n\nOmit multiple lines of text when there is insufficient space.\n\n---\n\n```vue\n<template>\n  <div>\n    <a-typography-title :heading=\"4\" ellipsis>\n      A design is a plan or specification for the construction of an object or system or for the implementation of an activity or process.\n    </a-typography-title>\n    <a-typography-paragraph\n      :ellipsis=\"{\n        rows: 2,\n        showTooltip: true,\n      }\"\n    >\n      A design is a plan or specification for the construction of an object or system or for the implementation of an activity or process, or the result of that plan or specification in the form of a prototype, product or process. The verb to design expresses the process of developing a design. The verb to design expresses the process of developing a design.A design is a plan or specification for the construction of an object or system or for the implementation of an activity or process, or the result of that plan or specification in the form of a prototype, product or process. The verb to design expresses the process of developing a design. The verb to design expresses the process of developing a design.\n    </a-typography-paragraph>\n    <a-typography-paragraph\n      :ellipsis=\"{\n        rows: 2,\n        showTooltip: true,\n        css: true\n      }\"\n    >\n      A design is a plan or specification for the construction of an object or system or for the implementation of an activity or process, or the result of that plan or specification in the form of a prototype, product or process. The verb to design expresses the process of developing a design. The verb to design expresses the process of developing a design.A design is a plan or specification for the construction of an object or system or for the implementation of an activity or process, or the result of that plan or specification in the form of a prototype, product or process. The verb to design expresses the process of developing a design. The verb to design expresses the process of developing a design.\n    </a-typography-paragraph>\n    <a-typography-paragraph\n      :ellipsis=\"{\n        suffix: '--Arco Design',\n        rows: 2,\n        expandable: true,\n        showTooltip: {\n          type: 'popover',\n          props: {\n            style: { maxWidth: `500px` }\n          }\n        },\n      }\"\n    >\n      <template #expand-node=\"{expanded}\">\n        {{ expanded ? '' : 'More' }}\n      </template>\n      A design is a plan or specification for the construction of an object or system or for the implementation of an activity or process, or the result of that plan or specification in the form of a prototype, product or process. The verb to design expresses the process of developing a design. The verb to design expresses the process of developing a design.A design is a plan or specification for the construction of an object or system or for the implementation of an activity or process, or the result of that plan or specification in the form of a prototype, product or process. The verb to design expresses the process of developing a design. The verb to design expresses the process of developing a design.\n    </a-typography-paragraph>\n    <a-typography-paragraph\n      :ellipsis=\"{\n        suffix: '--Arco Design',\n        rows: 3,\n        expandable: true,\n      }\"\n    >\n      A design is a plan or specification for the construction of an object or system or for the implementation of an activity or process, or the result of that plan or specification in the form of a prototype, product or process. The verb to design expresses the process of developing a design. The verb to design expresses the process of developing a design.\n      A design is a plan or specification for the construction of an object or system or for the implementation of an activity or process, or the result of that plan or specification in the form of a prototype, product or process. The verb to design expresses the process of developing a design. The verb to design expresses the process of developing a design.\n    </a-typography-paragraph>\n  </div>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/typography/__demo__/operations.md",
    "content": "```yaml\ntitle:\n  zh-CN: 可交互\n  en-US: Interactive\n```\n\n## zh-CN\n\n提供复制、编辑文本等功能。\n\n---\n\n## en-US\n\nProvide functions such as copying and editing text.\n\n---\n\n```vue\n<template>\n  <a-typography>\n    <a-typography-paragraph copyable>\n      Click the icon to copy this text.\n    </a-typography-paragraph>\n    <a-typography-paragraph\n      editable\n      v-model:editText=\"str\"\n    >\n      {{str}}\n    </a-typography-paragraph>\n  </a-typography>\n</template>\n<script>\nimport { defineComponent, ref } from 'vue';\nexport default defineComponent({\n  setup() {\n    const str = ref('Click the icon to edit this text.');\n    return {\n      str,\n    }\n  }\n});\n</script>\n```\n\n"
  },
  {
    "path": "packages/web-vue/components/typography/__demo__/paragraph.md",
    "content": "```yaml\ntitle:\n  zh-CN: 段落\n  en-US: Paragraph\n```\n\n## zh-CN\n\n文本段落样式。\n\n---\n\n## en-US\n\nParagraph style.\n\n---\n\n```vue\n<template>\n  <a-typography>\n    <a-typography-title :heading=\"5\">Default</a-typography-title>\n    <a-typography-paragraph>\n      A design is a plan or specification for the construction of an object or system or for the implementation of an activity or process, or the result of that plan or specification in the form of a prototype, product or process. The verb to design expresses the process of developing a design. In some cases, the direct construction of an object without an explicit prior plan (such as in craftwork, some engineering, coding, and graphic design) may also be considered to be a design activity.\n    </a-typography-paragraph>\n    <a-typography-title :heading=\"5\">Secondary</a-typography-title>\n    <a-typography-paragraph type=\"secondary\">\n      A design is a plan or specification for the construction of an object or system or for the implementation of an activity or process, or the result of that plan or specification in the form of a prototype, product or process. The verb to design expresses the process of developing a design. In some cases, the direct construction of an object without an explicit prior plan (such as in craftwork, some engineering, coding, and graphic design) may also be considered to be a design activity.\n    </a-typography-paragraph>\n    <a-typography-title :heading=\"5\">Spacing default</a-typography-title>\n    <a-typography-paragraph>\n      A design is a plan or specification for the construction of an object or system or for the implementation of an activity or process, or the result of that plan or specification in the form of a prototype, product or process. The verb to design expresses the process of developing a design. In some cases, the direct construction of an object without an explicit prior plan (such as in craftwork, some engineering, coding, and graphic design) may also be considered to be a design activity.\n    </a-typography-paragraph>\n    <a-typography-title :heading=\"5\">Spacing close</a-typography-title>\n    <a-typography-paragraph type=\"secondary\" spacing=\"close\">\n      A design is a plan or specification for the construction of an object or system or for the implementation of an activity or process, or the result of that plan or specification in the form of a prototype, product or process. The verb to design expresses the process of developing a design.\n    </a-typography-paragraph>\n  </a-typography>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/typography/__demo__/text.md",
    "content": "```yaml\ntitle:\n  zh-CN: 文本\n  en-US: Text\n```\n\n## zh-CN\n\n不同样式的文本以及超链接组件。\n\n---\n\n## en-US\n\nDifferent styles of text.\n\n---\n\n```vue\n<template>\n<a-space direction=\"vertical\" :size=\"10\">\n    <a-typography-text>\n      Arco Design\n    </a-typography-text>\n    <a-typography-text type=\"secondary\">\n      Secondary\n    </a-typography-text>\n    <a-typography-text type=\"primary\">\n      Primary\n    </a-typography-text>\n    <a-typography-text type=\"success\">\n      Success\n    </a-typography-text>\n    <a-typography-text type=\"warning\">\n      Warning\n    </a-typography-text>\n    <a-typography-text type=\"danger\">\n      Danger\n    </a-typography-text>\n    <a-typography-text bold>\n      Bold\n    </a-typography-text>\n    <a-typography-text disabled>\n      Disabled\n    </a-typography-text>\n    <a-typography-text mark>\n      Mark\n    </a-typography-text>\n    <a-typography-text underline>\n      Underline\n    </a-typography-text>\n    <a-typography-text delete>\n      Line through\n    </a-typography-text>\n    <a-typography-text code>\n      Code snippet\n    </a-typography-text>\n  </a-space>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/typography/__demo__/title.md",
    "content": "```yaml\ntitle:\n  zh-CN: 标题\n  en-US: Title\n```\n\n## zh-CN\n\n展示不同级别的标题。\n\n---\n\n## en-US\n\nShow titles of different levels.\n\n---\n\n```vue\n<template>\n  <a-typography>\n    <a-typography-title>\n      H1. The Pragmatic Romanticism\n    </a-typography-title>\n    <a-typography-title :heading=\"2\">\n      H2. The Pragmatic Romanticism\n    </a-typography-title>\n    <a-typography-title :heading=\"3\">\n      H3. The Pragmatic Romanticism\n    </a-typography-title>\n    <a-typography-title :heading=\"4\">\n      H4. The Pragmatic Romanticism\n    </a-typography-title>\n    <a-typography-title :heading=\"5\">\n      H5. The Pragmatic Romanticism\n    </a-typography-title>\n    <a-typography-title :heading=\"6\">\n      H6. The Pragmatic Romanticism\n    </a-typography-title>\n  </a-typography>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/typography/__test__/__snapshots__/demo.test.ts.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`<typography> demo: render [basic] correctly 1`] = `\n\"<article class=\\\\\"arco-typography\\\\\" style=\\\\\"margin-top: -40px;\\\\\">\n  <h1 class=\\\\\"arco-typography\\\\\"> Design system\n    <!---->\n    <!--v-if-->\n    <!--v-if-->\n    <!--v-if-->\n  </h1>\n  <div class=\\\\\"arco-typography\\\\\"> A design is a plan or specification for the construction of an object or system or for the implementation of an activity or process, or the result of that plan or specification in the form of a prototype, product or process. The verb to design expresses the process of developing a design.\n    <!---->\n    <!--v-if-->\n    <!--v-if-->\n    <!--v-if-->\n  </div>\n  <div class=\\\\\"arco-typography\\\\\"> In some cases, the direct construction of an object without an explicit prior plan (such as in craftwork, some engineering, coding, and graphic design) may also be considered <span class=\\\\\"arco-typography\\\\\"><b>to be a design activity.</b><!----><!--v-if--><!--v-if--><!--v-if--></span>\n    <!---->\n    <!--v-if-->\n    <!--v-if-->\n    <!--v-if-->\n  </div>\n  <h2 class=\\\\\"arco-typography\\\\\">ArcoDesign\n    <!---->\n    <!--v-if-->\n    <!--v-if-->\n    <!--v-if-->\n  </h2>\n  <div class=\\\\\"arco-typography\\\\\"> The ArcoDesign component library defines a set of default particle variables, and a custom theme is to <span class=\\\\\"arco-typography\\\\\"><mark>customize</mark><!----><!--v-if--><!--v-if--><!--v-if--></span> and <span class=\\\\\"arco-typography\\\\\"><u>overwrite</u><!----><!--v-if--><!--v-if--><!--v-if--></span> this variable list.\n    <!---->\n    <!--v-if-->\n    <!--v-if-->\n    <!--v-if-->\n  </div>\n  <blockquote class=\\\\\"arco-typography\\\\\"> A design is a plan or specification for the construction of an object or system or for the implementation of an activity or process, or the result of that plan or specification in the form of a <span class=\\\\\"arco-typography\\\\\"><code>prototype</code><!----><!--v-if--><!--v-if--><!--v-if--></span>, <span class=\\\\\"arco-typography\\\\\"><code>product</code><!----><!--v-if--><!--v-if--><!--v-if--></span> or <span class=\\\\\"arco-typography\\\\\"><code>process</code><!----><!--v-if--><!--v-if--><!--v-if--></span>. The verb to design expresses the process of developing a design.\n    <!---->\n    <!--v-if-->\n    <!--v-if-->\n    <!--v-if-->\n  </blockquote>\n  <div class=\\\\\"arco-typography\\\\\"><mark><del><u>A design is a plan or specification for the construction of an object or system or for the implementation of an activity or process.</u></del></mark>\n    <!---->\n    <!--v-if-->\n    <!--v-if-->\n    <!--v-if-->\n  </div>\n  <div class=\\\\\"arco-typography\\\\\">\n    <ul>\n      <li> Architectural blueprints <ul>\n          <li>Architectural blueprints</li>\n        </ul>\n      </li>\n      <li>Engineering drawings</li>\n      <li>Business processes</li>\n    </ul>\n    <!---->\n    <!--v-if-->\n    <!--v-if-->\n    <!--v-if-->\n  </div>\n  <div class=\\\\\"arco-typography\\\\\">\n    <ol>\n      <li>Architectural blueprints</li>\n      <li>Engineering drawings</li>\n      <li>Business processes</li>\n    </ol>\n    <!---->\n    <!--v-if-->\n    <!--v-if-->\n    <!--v-if-->\n  </div>\n</article>\"\n`;\n\nexports[`<typography> demo: render [ellipsis] correctly 1`] = `\n\"<div>\n  <h4 class=\\\\\"arco-typography\\\\\"> A design is a plan or specification for the construction of an object or system or for the implementation of an activity or process.\n    <!---->\n    <!--v-if-->\n    <!--v-if-->\n    <!--v-if-->\n  </h4>\n  <div class=\\\\\"arco-typography\\\\\"> A design is a plan or specification for the construction of an object or system or for the implementation of an activity or process, or the result of that plan or specification in the form of a prototype, product or process. The verb to design expresses the process of developing a design. The verb to design expresses the process of developing a design.A design is a plan or specification for the construction of an object or system or for the implementation of an activity or process, or the result of that plan or specification in the form of a prototype, product or process. The verb to design expresses the process of developing a design. The verb to design expresses the process of developing a design.\n    <!---->\n    <!--v-if-->\n    <!--v-if-->\n    <!--v-if-->\n  </div>\n  <div class=\\\\\"arco-typography\\\\\" style=\\\\\"overflow: hidden; text-overflow: ellipsis; display: -webkit-box;\\\\\"><span> A design is a plan or specification for the construction of an object or system or for the implementation of an activity or process, or the result of that plan or specification in the form of a prototype, product or process. The verb to design expresses the process of developing a design. The verb to design expresses the process of developing a design.A design is a plan or specification for the construction of an object or system or for the implementation of an activity or process, or the result of that plan or specification in the form of a prototype, product or process. The verb to design expresses the process of developing a design. The verb to design expresses the process of developing a design. </span></div>\n  <div class=\\\\\"arco-typography\\\\\"> A design is a plan or specification for the construction of an object or system or for the implementation of an activity or process, or the result of that plan or specification in the form of a prototype, product or process. The verb to design expresses the process of developing a design. The verb to design expresses the process of developing a design.A design is a plan or specification for the construction of an object or system or for the implementation of an activity or process, or the result of that plan or specification in the form of a prototype, product or process. The verb to design expresses the process of developing a design. The verb to design expresses the process of developing a design.\n    <!---->--Arco Design\n    <!--v-if-->\n    <!--v-if-->\n    <!--v-if-->\n  </div>\n  <div class=\\\\\"arco-typography\\\\\"> A design is a plan or specification for the construction of an object or system or for the implementation of an activity or process, or the result of that plan or specification in the form of a prototype, product or process. The verb to design expresses the process of developing a design. The verb to design expresses the process of developing a design. A design is a plan or specification for the construction of an object or system or for the implementation of an activity or process, or the result of that plan or specification in the form of a prototype, product or process. The verb to design expresses the process of developing a design. The verb to design expresses the process of developing a design.\n    <!---->--Arco Design\n    <!--v-if-->\n    <!--v-if-->\n    <!--v-if-->\n  </div>\n</div>\"\n`;\n\nexports[`<typography> demo: render [operations] correctly 1`] = `\n\"<article class=\\\\\"arco-typography\\\\\">\n  <div class=\\\\\"arco-typography\\\\\"> Click the icon to copy this text.\n    <!---->\n    <!--v-if--><span class=\\\\\"arco-typography-operation-copy\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-copy\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M20 6h18a2 2 0 0 1 2 2v22M8 16v24c0 1.105.891 2 1.996 2h20.007A1.99 1.99 0 0 0 32 40.008V15.997A1.997 1.997 0 0 0 30 14H10a2 2 0 0 0-2 2Z\\\\\"></path></svg></span>\n    <!---->\n    <!--v-if-->\n  </div>\n  <div class=\\\\\"arco-typography\\\\\">Click the icon to edit this text.\n    <!----><span class=\\\\\"arco-typography-operation-edit\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-edit\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"m30.48 19.038 5.733-5.734a1 1 0 0 0 0-1.414l-5.586-5.586a1 1 0 0 0-1.414 0l-5.734 5.734m7 7L15.763 33.754a1 1 0 0 1-.59.286l-6.048.708a1 1 0 0 1-1.113-1.069l.477-6.31a1 1 0 0 1 .29-.631l14.7-14.7m7 7-7-7M6 42h36\\\\\"></path></svg></span>\n    <!---->\n    <!--v-if-->\n    <!--v-if-->\n  </div>\n</article>\"\n`;\n\nexports[`<typography> demo: render [paragraph] correctly 1`] = `\n\"<article class=\\\\\"arco-typography\\\\\">\n  <h5 class=\\\\\"arco-typography\\\\\">Default\n    <!---->\n    <!--v-if-->\n    <!--v-if-->\n    <!--v-if-->\n  </h5>\n  <div class=\\\\\"arco-typography\\\\\"> A design is a plan or specification for the construction of an object or system or for the implementation of an activity or process, or the result of that plan or specification in the form of a prototype, product or process. The verb to design expresses the process of developing a design. In some cases, the direct construction of an object without an explicit prior plan (such as in craftwork, some engineering, coding, and graphic design) may also be considered to be a design activity.\n    <!---->\n    <!--v-if-->\n    <!--v-if-->\n    <!--v-if-->\n  </div>\n  <h5 class=\\\\\"arco-typography\\\\\">Secondary\n    <!---->\n    <!--v-if-->\n    <!--v-if-->\n    <!--v-if-->\n  </h5>\n  <div class=\\\\\"arco-typography arco-typography-secondary\\\\\"> A design is a plan or specification for the construction of an object or system or for the implementation of an activity or process, or the result of that plan or specification in the form of a prototype, product or process. The verb to design expresses the process of developing a design. In some cases, the direct construction of an object without an explicit prior plan (such as in craftwork, some engineering, coding, and graphic design) may also be considered to be a design activity.\n    <!---->\n    <!--v-if-->\n    <!--v-if-->\n    <!--v-if-->\n  </div>\n  <h5 class=\\\\\"arco-typography\\\\\">Spacing default\n    <!---->\n    <!--v-if-->\n    <!--v-if-->\n    <!--v-if-->\n  </h5>\n  <div class=\\\\\"arco-typography\\\\\"> A design is a plan or specification for the construction of an object or system or for the implementation of an activity or process, or the result of that plan or specification in the form of a prototype, product or process. The verb to design expresses the process of developing a design. In some cases, the direct construction of an object without an explicit prior plan (such as in craftwork, some engineering, coding, and graphic design) may also be considered to be a design activity.\n    <!---->\n    <!--v-if-->\n    <!--v-if-->\n    <!--v-if-->\n  </div>\n  <h5 class=\\\\\"arco-typography\\\\\">Spacing close\n    <!---->\n    <!--v-if-->\n    <!--v-if-->\n    <!--v-if-->\n  </h5>\n  <div class=\\\\\"arco-typography arco-typography-secondary arco-typography-spacing-close\\\\\"> A design is a plan or specification for the construction of an object or system or for the implementation of an activity or process, or the result of that plan or specification in the form of a prototype, product or process. The verb to design expresses the process of developing a design.\n    <!---->\n    <!--v-if-->\n    <!--v-if-->\n    <!--v-if-->\n  </div>\n</article>\"\n`;\n\nexports[`<typography> demo: render [text] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-vertical\\\\\" style=\\\\\"column-gap: 10px; row-gap: 10px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-typography\\\\\"> Arco Design <!----><!--v-if--><!--v-if--><!--v-if--></span></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-typography arco-typography-secondary\\\\\"> Secondary <!----><!--v-if--><!--v-if--><!--v-if--></span></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-typography arco-typography-primary\\\\\"> Primary <!----><!--v-if--><!--v-if--><!--v-if--></span></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-typography arco-typography-success\\\\\"> Success <!----><!--v-if--><!--v-if--><!--v-if--></span></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-typography arco-typography-warning\\\\\"> Warning <!----><!--v-if--><!--v-if--><!--v-if--></span></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-typography arco-typography-danger\\\\\"> Danger <!----><!--v-if--><!--v-if--><!--v-if--></span></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-typography\\\\\"><b> Bold </b><!----><!--v-if--><!--v-if--><!--v-if--></span></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-typography arco-typography-disabled\\\\\"> Disabled <!----><!--v-if--><!--v-if--><!--v-if--></span></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-typography\\\\\"><mark> Mark </mark><!----><!--v-if--><!--v-if--><!--v-if--></span></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-typography\\\\\"><u> Underline </u><!----><!--v-if--><!--v-if--><!--v-if--></span></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-typography\\\\\"><del> Line through </del><!----><!--v-if--><!--v-if--><!--v-if--></span></div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-typography\\\\\"><code> Code snippet </code><!----><!--v-if--><!--v-if--><!--v-if--></span></div>\n</div>\"\n`;\n\nexports[`<typography> demo: render [title] correctly 1`] = `\n\"<article class=\\\\\"arco-typography\\\\\">\n  <h1 class=\\\\\"arco-typography\\\\\"> H1. The Pragmatic Romanticism\n    <!---->\n    <!--v-if-->\n    <!--v-if-->\n    <!--v-if-->\n  </h1>\n  <h2 class=\\\\\"arco-typography\\\\\"> H2. The Pragmatic Romanticism\n    <!---->\n    <!--v-if-->\n    <!--v-if-->\n    <!--v-if-->\n  </h2>\n  <h3 class=\\\\\"arco-typography\\\\\"> H3. The Pragmatic Romanticism\n    <!---->\n    <!--v-if-->\n    <!--v-if-->\n    <!--v-if-->\n  </h3>\n  <h4 class=\\\\\"arco-typography\\\\\"> H4. The Pragmatic Romanticism\n    <!---->\n    <!--v-if-->\n    <!--v-if-->\n    <!--v-if-->\n  </h4>\n  <h5 class=\\\\\"arco-typography\\\\\"> H5. The Pragmatic Romanticism\n    <!---->\n    <!--v-if-->\n    <!--v-if-->\n    <!--v-if-->\n  </h5>\n  <h6 class=\\\\\"arco-typography\\\\\"> H6. The Pragmatic Romanticism\n    <!---->\n    <!--v-if-->\n    <!--v-if-->\n    <!--v-if-->\n  </h6>\n</article>\"\n`;\n"
  },
  {
    "path": "packages/web-vue/components/typography/__test__/demo.test.ts",
    "content": "import demoTest from '../../../scripts/demo-test';\n\ndemoTest('typography');\n"
  },
  {
    "path": "packages/web-vue/components/typography/__test__/index.test.ts",
    "content": "import { mount } from '@vue/test-utils';\nimport Typography from '../index';\n\nconst { Paragraph } = Typography;\n\nconst LINE_STR_COUNT = 20;\nconst LINE_HEIGHT = 16;\nconst _getComputedStyle = window.getComputedStyle;\nconst _getHtmlOffsetHeight = Object.getOwnPropertyDescriptor(\n  HTMLElement.prototype,\n  'offsetHeight'\n)?.get;\nconst _getInnerText = Object.getOwnPropertyDescriptor(\n  HTMLElement.prototype,\n  'innerText'\n)?.get;\n\nconst sleep = (timeout = 0) =>\n  new Promise((resolve) => setTimeout(resolve, timeout));\n\ndescribe('Typography', () => {\n  beforeAll(() => {\n    Object.defineProperty(HTMLElement.prototype, 'offsetHeight', {\n      get() {\n        const html = this.innerHTML;\n        const text = html.replace(/<[^>]*>/g, '');\n        const lines = Math.ceil(text.length / LINE_STR_COUNT);\n        return lines * 16;\n      },\n    });\n\n    Object.defineProperty(HTMLElement.prototype, 'innerText', {\n      get() {\n        return this.textContent;\n      },\n    });\n\n    Object.defineProperty(window, 'getComputedStyle', {\n      value: (ele: HTMLElement) => {\n        const style = _getComputedStyle(ele);\n        style.lineHeight = `${LINE_HEIGHT}px`;\n        return style;\n      },\n    });\n  });\n\n  afterAll(() => {\n    Object.defineProperty(HTMLElement.prototype, 'offsetHeight', {\n      get: _getHtmlOffsetHeight,\n    });\n    Object.defineProperty(HTMLElement.prototype, 'innerText', {\n      get: _getInnerText,\n    });\n    Object.defineProperty(window, 'getComputedStyle', {\n      value: _getComputedStyle,\n    });\n  });\n\n  test('Paragraph should support copyable', async () => {\n    const wrapper = mount(Paragraph, {\n      props: {\n        copyable: true,\n      },\n      slots: {\n        default: 'my text',\n      },\n    });\n    const copyIconWrapper = wrapper.find('.arco-typography-operation-copy');\n    expect(copyIconWrapper.exists()).toBe(true);\n    await copyIconWrapper.trigger('click');\n    expect(wrapper.find('.arco-typography-operation-copied').exists()).toBe(\n      true\n    );\n  });\n\n  test('Paragraph should support editable', async () => {\n    const wrapper = mount(Paragraph, {\n      props: {\n        editable: true,\n      },\n      slots: {\n        default: 'my text',\n      },\n    });\n    const editIconWrapper = wrapper.find('.arco-typography-operation-edit');\n    expect(editIconWrapper.exists()).toBe(true);\n    await editIconWrapper.trigger('click');\n    expect(wrapper.find('.arco-typography-edit-content').exists()).toBe(true);\n  });\n\n  test('Paragraph should support ellipsis', async () => {\n    const text =\n      'A design is a plan or specification for the construction'.repeat(10);\n    const wrapper = mount(Paragraph, {\n      slots: {\n        default: text,\n      },\n    });\n    await wrapper.setProps({\n      ellipsis: {\n        rows: 2,\n        expandable: true,\n      },\n    });\n    await sleep(200);\n    const moreElement = wrapper.find('.arco-typography-operation-expand');\n    expect(moreElement.exists()).toBe(true);\n    expect(wrapper.text()).toContain('...');\n    await moreElement.trigger('click');\n    expect(wrapper.text()).not.toContain('...');\n  });\n});\n"
  },
  {
    "path": "packages/web-vue/components/typography/base.tsx",
    "content": "import {\n  defineComponent,\n  VNode,\n  PropType,\n  toRefs,\n  computed,\n  ref,\n  onUnmounted,\n  VNodeTypes,\n  watch,\n  reactive,\n  onMounted,\n  onUpdated,\n} from 'vue';\nimport { getPrefixCls } from '../_utils/global-config';\nimport { isObject } from '../_utils/is';\nimport { BaseProps, EllipsisConfig, EllipsisInternalConfig } from './interface';\nimport EditContent from './edit-content.vue';\nimport Operations from './operations.vue';\nimport ResizeObserver from '../_components/resize-observer';\nimport { omit } from '../_utils/omit';\nimport useMergeState from '../_hooks/use-merge-state';\nimport measure from './utils/measure';\nimport { clipboard } from '../_utils/clipboard';\nimport getInnerText from './utils/getInnerText';\nimport { caf, raf } from '../_utils/raf';\nimport Tooltip from '../tooltip';\nimport Popover from '../popover';\n\ninterface BaseInternalProps extends BaseProps {\n  component: keyof HTMLElementTagNameMap;\n}\n\nfunction getComponentTags<K extends keyof HTMLElementTagNameMap>(\n  props: BaseInternalProps\n): K[] {\n  const { bold, mark, underline, delete: propDelete, code } = props;\n  const componentTags = [];\n\n  if (bold) {\n    componentTags.push('b');\n  }\n  if (underline) {\n    componentTags.push('u');\n  }\n  if (propDelete) {\n    componentTags.push('del');\n  }\n  if (code) {\n    componentTags.push('code');\n  }\n  if (mark) {\n    componentTags.push('mark');\n  }\n\n  return componentTags as K[];\n}\n\nfunction Wrap(props: BaseInternalProps, children: VNodeTypes) {\n  const { mark } = props;\n  const componentTags = getComponentTags(props);\n  const markStyle =\n    isObject(mark) && mark.color ? { backgroundColor: mark.color } : {};\n\n  return componentTags.reduce((content, Tag) => {\n    const attrs = Tag === 'mark' ? { style: markStyle } : {};\n    return <Tag {...attrs}>{content}</Tag>;\n  }, children);\n}\n\nfunction normalizeEllipsisConfig(\n  config: EllipsisConfig\n): EllipsisInternalConfig {\n  const showTooltip = !!config.showTooltip;\n  const TooltipComponent =\n    isObject(config.showTooltip) && config.showTooltip.type === 'popover'\n      ? Popover\n      : Tooltip;\n  const tooltipProps =\n    (isObject(config.showTooltip) && config.showTooltip.props) || {};\n\n  return {\n    rows: 1,\n    suffix: '',\n    ellipsisStr: '...',\n    expandable: false,\n    css: false,\n    ...omit(config, ['showTooltip']),\n    showTooltip,\n    TooltipComponent,\n    tooltipProps,\n  };\n}\n\n/**\n * @displayName Common\n * @noBrackets\n */\nexport default defineComponent({\n  name: 'TypographyBase',\n  inheritAttrs: false,\n  props: {\n    component: {\n      type: String as PropType<BaseInternalProps['component']>,\n      required: true,\n    },\n    /**\n     * @zh 文本类型\n     * @en Text type\n     */\n    type: {\n      type: String as PropType<\n        'primary' | 'secondary' | 'success' | 'danger' | 'warning'\n      >,\n    },\n    /**\n     * @zh 粗体\n     * @en Whether enable bold style\n     */\n    bold: {\n      type: Boolean,\n    },\n    /**\n     * @zh 添加标记样式\n     * @en Mark style\n     */\n    mark: {\n      type: [Boolean, Object] as PropType<boolean | { color: string }>,\n      default: false,\n    },\n    /**\n     * @zh 下划线样式\n     * @en Whether enable underline style\n     */\n    underline: {\n      type: Boolean,\n    },\n    /**\n     * @zh 删除线样式\n     * @en Whether enable delete style\n     */\n    delete: {\n      type: Boolean,\n    },\n    /**\n     * @zh 代码块样式\n     * @en Whether enable code style\n     */\n    code: {\n      type: Boolean,\n    },\n    /**\n     * @zh 禁用状态\n     * @en Whether disabled\n     */\n    disabled: {\n      type: Boolean,\n    },\n    /**\n     * @zh 开启可编辑功能\n     * @en Whether it's editable\n     */\n    editable: {\n      type: Boolean,\n    },\n    /**\n     * @zh 是否在编辑状态\n     * @en Whether it's editing\n     * @vModel\n     */\n    editing: {\n      type: Boolean,\n      default: undefined,\n    },\n    /**\n     * @zh 默认的编辑状态\n     * @en Default editing state\n     */\n    defaultEditing: {\n      type: Boolean,\n    },\n    /**\n     * @zh 编辑的文字\n     * @en Edit text\n     * @vModel\n     */\n    editText: {\n      type: String,\n    },\n    /**\n     * @zh 开启复制功能\n     * @en Whether turn on copy functionality\n     */\n    copyable: {\n      type: Boolean,\n    },\n    /**\n     * @zh 复制的文字\n     * @en Copied text\n     */\n    copyText: {\n      type: String,\n    },\n    /**\n     * @zh 复制成功后，复制按钮恢复到可点击状态的延迟时间，单位是毫秒\n     * @en After the copy is successful, the delay time for the copy button to return to the clickable state, in milliseconds\n     * @version 2.16.0\n     */\n    copyDelay: {\n      type: Number,\n      default: 3000,\n    },\n    /**\n     * @zh 自动溢出省略，具体参数配置看 [EllipsisConfig](#EllipsisConfig)\n     * @en Automatic overflow omission, refer to [EllipsisConfig](#EllipsisConfig) for more information.\n     */\n    ellipsis: {\n      type: [Boolean, Object] as PropType<boolean | EllipsisConfig>,\n      default: false,\n    },\n    /**\n     * @zh 编辑按钮问题提示配置\n     * @en Edit button question prompt configuration\n     * @version 2.32.0\n     */\n    editTooltipProps: {\n      type: Object,\n    },\n    /**\n     * @zh 拷贝按钮问题提示配置\n     * @en Copy button question prompt configuration\n     * @version 2.32.0\n     */\n    copyTooltipProps: {\n      type: Object,\n    },\n  },\n  emits: {\n    /**\n     * @zh 开始编辑\n     * @en Edit start\n     */\n    'editStart': () => true,\n    /**\n     * @zh 编辑内容变化\n     * @en Edit content change\n     * @param {string} text\n     */\n    'change': (text: string) => true,\n    'update:editText': (text: string) => true,\n    /**\n     * @zh 编辑结束\n     * @en Edit end\n     */\n    'editEnd': () => true,\n    'update:editing': (editing: boolean) => true,\n    /**\n     * @zh 复制\n     * @en Copy\n     * @param {string} text\n     */\n    'copy': (text: string) => true,\n    /**\n     * @zh 省略变化事件\n     * @en Ellipsis change\n     * @param {boolean} isEllipsis\n     */\n    'ellipsis': (isEllipsis: boolean) => true,\n    /**\n     * @zh 展开收起事件\n     * @en Expand collapse event\n     * @param {boolean} expanded\n     */\n    'expand': (expanded: boolean) => true,\n  },\n  /**\n   * @zh 自定义复制按钮的 tooltip 内容\n   * @en Customize the tooltip content of the copy button\n   * @slot copy-tooltip\n   * @binding {boolean} copied\n   */\n  /**\n   * @zh 自定义复制按钮图标\n   * @en Custom copy button icon\n   * @slot copy-icon\n   * @binding {boolean} copied\n   */\n  /**\n   * @zh 自定义展开和折叠按钮\n   * @en Custom expand button\n   * @slot expand-node\n   * @binding {boolean} expanded\n   */\n  setup(props, { slots, emit, attrs }) {\n    const {\n      editing: propEditing,\n      defaultEditing,\n      ellipsis,\n      copyable,\n      editable,\n      copyText,\n      editText,\n      copyDelay,\n      component,\n    } = toRefs(props);\n\n    const prefixCls = getPrefixCls('typography');\n    const classNames = computed(() => [\n      prefixCls,\n      {\n        [`${prefixCls}-${props.type}`]: props.type,\n        [`${prefixCls}-disabled`]: props.disabled,\n      },\n    ]);\n\n    const wrapperRef = ref();\n    const fullText = ref('');\n\n    // for edit\n    const [editing, setEditing] = useMergeState(\n      defaultEditing.value,\n      reactive({\n        value: propEditing,\n      })\n    );\n    const mergeEditing = computed(() => editable.value && editing.value);\n\n    function onEditStart() {\n      emit('update:editing', true);\n      emit('editStart');\n      setEditing(true);\n    }\n\n    function onEditChange(text: string) {\n      emit('update:editText', text);\n      emit('change', text);\n    }\n\n    function onEditEnd() {\n      if (!editing.value) return;\n      emit('update:editing', false);\n      emit('editEnd');\n      setEditing(false);\n    }\n\n    // for copy\n    const isCopied = ref(false);\n    let copyTimer: NodeJS.Timeout | null = null;\n\n    function onCopyClick() {\n      const text = copyText.value ?? fullText.value;\n\n      clipboard(text || '');\n\n      isCopied.value = true;\n\n      emit('copy', text);\n\n      copyTimer = setTimeout(() => {\n        isCopied.value = false;\n      }, copyDelay.value);\n    }\n\n    onUnmounted(() => {\n      copyTimer && clearTimeout(copyTimer);\n      copyTimer = null;\n    });\n\n    // for ellipsis\n    const isEllipsis = ref(false);\n    const expanded = ref(false);\n    const ellipsisText = ref('');\n    const ellipsisConfig = computed<EllipsisInternalConfig>(() =>\n      normalizeEllipsisConfig(\n        (isObject(ellipsis.value) && ellipsis.value) || {}\n      )\n    );\n    let rafId: number = null as any;\n\n    function onExpandClick() {\n      const newVal = !expanded.value;\n      expanded.value = newVal;\n      emit('expand', newVal);\n    }\n\n    function renderOperations(forceRenderExpand = false) {\n      if (ellipsisConfig.value.css) {\n        return (\n          <Operations\n            editable={editable.value}\n            copyable={copyable.value}\n            expandable={ellipsisConfig.value.expandable}\n            isCopied={isCopied.value}\n            isEllipsis={showCSSTooltip.value}\n            expanded={expanded.value}\n            forceRenderExpand={forceRenderExpand || expanded.value}\n            editTooltipProps={props.editTooltipProps}\n            copyTooltipProps={props.copyTooltipProps}\n            onEdit={onEditStart}\n            onCopy={onCopyClick}\n            onExpand={onExpandClick}\n            v-slots={{\n              'copy-tooltip': slots['copy-tooltip'],\n              'copy-icon': slots['copy-icon'],\n              'expand-node': slots['expand-node'],\n            }}\n          />\n        );\n      }\n\n      return (\n        <Operations\n          editable={editable.value}\n          copyable={copyable.value}\n          expandable={ellipsisConfig.value.expandable}\n          isCopied={isCopied.value}\n          isEllipsis={isEllipsis.value}\n          expanded={expanded.value}\n          forceRenderExpand={forceRenderExpand}\n          editTooltipProps={props.editTooltipProps}\n          copyTooltipProps={props.copyTooltipProps}\n          onEdit={onEditStart}\n          onCopy={onCopyClick}\n          onExpand={onExpandClick}\n          v-slots={{\n            'copy-tooltip': slots['copy-tooltip'],\n            'copy-icon': slots['copy-icon'],\n            'expand-node': slots['expand-node'],\n          }}\n        />\n      );\n    }\n\n    function calEllipsis() {\n      if (!wrapperRef.value) return;\n\n      const { ellipsis, text } = measure(\n        wrapperRef.value,\n        ellipsisConfig.value,\n        renderOperations(!!ellipsisConfig.value.expandable),\n        fullText.value\n      );\n\n      if (isEllipsis.value !== ellipsis) {\n        isEllipsis.value = ellipsis;\n        if (!ellipsisConfig.value.css) {\n          emit('ellipsis', ellipsis);\n        }\n      }\n\n      if (ellipsisText.value !== text) {\n        ellipsisText.value = text || '';\n      }\n    }\n\n    function resizeOnNextFrame() {\n      const needCalEllipsis = ellipsis.value && !expanded.value;\n      if (!needCalEllipsis) return;\n\n      caf(rafId);\n      rafId = raf(() => {\n        calEllipsis();\n      });\n    }\n\n    onUnmounted(() => {\n      caf(rafId);\n    });\n\n    watch(\n      () => ellipsisConfig.value.rows,\n      () => {\n        resizeOnNextFrame();\n      }\n    );\n\n    watch(ellipsis, (newVal) => {\n      if (newVal) {\n        resizeOnNextFrame();\n      } else {\n        isEllipsis.value = false;\n      }\n    });\n\n    let children: VNode[] = [];\n\n    const updateFullText = () => {\n      if (ellipsis.value || copyable.value || editable.value) {\n        const _fullText = getInnerText(children);\n\n        if (_fullText !== fullText.value) {\n          fullText.value = _fullText;\n          resizeOnNextFrame();\n        }\n      }\n    };\n\n    onMounted(updateFullText);\n    onUpdated(updateFullText);\n\n    const contentRef = ref<HTMLElement>();\n    const showCSSTooltip = ref(false);\n\n    const calTooltip = () => {\n      if (wrapperRef.value && contentRef.value) {\n        const _show =\n          contentRef.value.offsetHeight > wrapperRef.value.offsetHeight;\n        if (_show !== showCSSTooltip.value) {\n          showCSSTooltip.value = _show;\n          emit('ellipsis', _show);\n        }\n      }\n    };\n\n    const ellipsisStyle = computed(() => {\n      if (expanded.value) {\n        return {};\n      }\n\n      return {\n        'overflow': 'hidden',\n        'text-overflow': 'ellipsis',\n        'display': '-webkit-box',\n        '-webkit-line-clamp': ellipsisConfig.value.rows,\n        '-webkit-box-orient': 'vertical',\n      };\n    });\n\n    return () => {\n      children = slots.default?.() || [];\n\n      // 编辑中\n      if (mergeEditing.value) {\n        const _editText = editText.value ?? fullText.value;\n\n        return (\n          <EditContent\n            text={_editText}\n            onChange={(text: string) => {\n              if (text !== _editText) {\n                onEditChange(text);\n              }\n            }}\n            onEnd={onEditEnd}\n          />\n        );\n      }\n\n      const {\n        suffix,\n        ellipsisStr,\n        showTooltip,\n        tooltipProps,\n        TooltipComponent,\n      } = ellipsisConfig.value;\n      const showEllipsis = isEllipsis.value && !expanded.value;\n\n      const titleAttrs =\n        showEllipsis && !showTooltip ? { title: fullText.value } : {};\n      const Component = component.value;\n\n      if (ellipsisConfig.value.css) {\n        const Content = Wrap(props, children);\n        const Outer = (\n          <Component\n            class={classNames.value}\n            ref={wrapperRef}\n            style={ellipsisStyle.value}\n            {...titleAttrs}\n            {...attrs}\n          >\n            <span ref={contentRef}>{Content}</span>\n          </Component>\n        );\n\n        if (showCSSTooltip.value) {\n          return (\n            <TooltipComponent\n              {...tooltipProps}\n              onResize={() => calTooltip()}\n              v-slots={{\n                content: () => fullText.value,\n              }}\n            >\n              {Outer}\n            </TooltipComponent>\n          );\n        }\n\n        return (\n          <ResizeObserver\n            onResize={() => {\n              calTooltip();\n            }}\n          >\n            {Outer}\n          </ResizeObserver>\n        );\n      }\n\n      const Content = Wrap(props, showEllipsis ? ellipsisText.value : children);\n\n      return (\n        <ResizeObserver onResize={() => resizeOnNextFrame()}>\n          <Component\n            class={classNames.value}\n            ref={wrapperRef}\n            {...titleAttrs}\n            {...attrs}\n          >\n            {showEllipsis && showTooltip ? (\n              <TooltipComponent\n                {...tooltipProps}\n                v-slots={{\n                  content: () => fullText.value,\n                }}\n              >\n                <span>{Content}</span>\n              </TooltipComponent>\n            ) : (\n              Content\n            )}\n            {showEllipsis ? ellipsisStr : null}\n            {suffix}\n            {renderOperations()}\n          </Component>\n        </ResizeObserver>\n      );\n    };\n  },\n});\n"
  },
  {
    "path": "packages/web-vue/components/typography/edit-content.vue",
    "content": "<template>\n  <div :class=\"classNames\">\n    <Input\n      ref=\"inputRef\"\n      auto-size\n      :model-value=\"text\"\n      @blur=\"onBlur\"\n      @input=\"onChange\"\n      @keydown.enter=\"onEnd\"\n    />\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, onMounted, ref } from 'vue';\nimport { getPrefixCls } from '../_utils/global-config';\nimport Input from '../input';\n\nexport default defineComponent({\n  name: 'TypographyEditContent',\n  components: {\n    Input,\n  },\n  props: {\n    text: {\n      type: String,\n      required: true,\n    },\n  },\n  emits: ['change', 'end', 'update:text'],\n  setup(_, { emit }) {\n    const prefixCls = getPrefixCls('typography');\n    const classNames = [`${prefixCls}-edit-content`];\n    const inputRef = ref<typeof Input>();\n\n    function onChange(value: string) {\n      emit('update:text', value);\n      emit('change', value);\n    }\n\n    function onEnd() {\n      emit('end');\n    }\n\n    onMounted(() => {\n      if (!inputRef.value || !inputRef.value.$el) return;\n\n      const inputEl = inputRef.value.$el.querySelector('input');\n      if (!inputEl) return;\n\n      inputEl.focus && inputEl.focus();\n\n      const { length } = inputEl.value;\n      inputEl.setSelectionRange(length, length);\n    });\n\n    return {\n      classNames,\n      inputRef,\n      onBlur: onEnd,\n      onChange,\n      onEnd,\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/typography/index.ts",
    "content": "import type { App } from 'vue';\nimport type { ArcoOptions } from '../_utils/types';\nimport { setGlobalConfig, getComponentPrefix } from '../_utils/global-config';\nimport _Typography from './typography.vue';\nimport _TypographyParagraph from './paragraph';\nimport _TypographyTitle from './title';\nimport _TypographyText from './text';\n\nexport type { EllipsisConfig } from './interface';\n\nconst Typography = Object.assign(_Typography, {\n  Paragraph: _TypographyParagraph,\n  Title: _TypographyTitle,\n  Text: _TypographyText,\n  install: (app: App, options?: ArcoOptions) => {\n    setGlobalConfig(app, options);\n    const componentPrefix = getComponentPrefix(options);\n\n    app.component(componentPrefix + _Typography.name, _Typography);\n    app.component(\n      componentPrefix + _TypographyParagraph.name,\n      _TypographyParagraph\n    );\n    app.component(componentPrefix + _TypographyTitle.name, _TypographyTitle);\n    app.component(componentPrefix + _TypographyText.name, _TypographyText);\n  },\n});\n\nexport type TypographyInstance = InstanceType<typeof _Typography>;\nexport type TypographyParagraphInstance = InstanceType<\n  typeof _TypographyParagraph\n>;\nexport type TypographyTitleInstance = InstanceType<typeof _TypographyTitle>;\nexport type TypographyTextInstance = InstanceType<typeof _TypographyText>;\n\nexport {\n  _TypographyParagraph as TypographyParagraph,\n  _TypographyTitle as TypographyTitle,\n  _TypographyText as TypographyText,\n};\n\nexport default Typography;\n"
  },
  {
    "path": "packages/web-vue/components/typography/interface.ts",
    "content": "import { VNode } from 'vue';\n\nexport interface EllipsisConfig {\n  /**\n   * @zh 显示省略的行数\n   * @en The number of omitted lines\n   * @defaultValue 1\n   */\n  rows?: number;\n  /**\n   * @zh 是否支持展开/折叠\n   * @en Whether expandable\n   */\n  expandable?: boolean;\n  /**\n   * @zh 省略号\n   * @en Ellipsis string\n   * @defaultValue '...'\n   */\n  ellipsisStr?: string;\n  /**\n   * @zh 后缀\n   * @en Suffix\n   */\n  suffix?: string;\n  /**\n   * @zh 配置省略时的弹出框\n   * @en Pop-up box when configuration is omitted\n   * @defaultValue false\n   * */\n  showTooltip?:\n    | boolean\n    | { type: 'tooltip' | 'popover'; props: Record<string, any> };\n  /**\n   * @zh 是否使用 CSS 省略（此模式暂不支持展开、自定义省略号和后缀）\n   * @en Whether to use CSS ellipsis (expansion, custom ellipsis and suffix are not supported in this mode)\n   * @defaultValue false\n   * @version 2.37.0\n   * */\n  css?: boolean;\n}\n\nexport interface EllipsisInternalConfig extends Required<EllipsisConfig> {\n  showTooltip: boolean;\n  TooltipComponent: any;\n  tooltipProps: { [key: string]: any };\n}\n\nexport interface EllipsisProps {\n  ellipsis: boolean | EllipsisConfig;\n}\n\nexport interface CopyProps {\n  copyable: boolean;\n  copyDelay: number;\n  copyText: string | undefined;\n}\n\nexport interface EditProps {\n  editable: boolean;\n  editing: boolean | undefined;\n  defaultEditing: boolean;\n  editText: string | undefined;\n}\n\nexport type OperationsProps = CopyProps & EditProps & EllipsisProps;\n\nexport interface BaseProps extends OperationsProps {\n  type: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | undefined;\n  bold: boolean;\n  mark: boolean | { color: string };\n  underline: boolean;\n  delete: boolean;\n  code: boolean;\n  disabled: boolean;\n}\n\nexport interface TitleProps extends BaseProps {\n  heading: 1 | 2 | 3 | 4 | 5 | 6;\n}\n\nexport interface ParagraphProps extends BaseProps {\n  blockquote: boolean;\n  spacing: 'default' | 'close';\n}\n\nexport interface TextProps extends BaseProps {\n  icon?: VNode;\n}\n"
  },
  {
    "path": "packages/web-vue/components/typography/operations.vue",
    "content": "<template>\n  <template v-if=\"editable\">\n    <Tooltip :content=\"t('typography.edit')\" v-bind=\"editTooltipProps\">\n      <span :class=\"`${prefixCls}-operation-edit`\" @click.stop=\"onEditClick\">\n        <IconEdit />\n      </span>\n    </Tooltip>\n  </template>\n  <template v-if=\"copyable\">\n    <Tooltip v-bind=\"copyTooltipProps\">\n      <template #content>\n        <slot name=\"copy-tooltip\" :copied=\"isCopied\">\n          {{ isCopied ? t('typography.copied') : t('typography.copy') }}\n        </slot>\n      </template>\n      <span\n        :class=\"{\n          [`${prefixCls}-operation-copied`]: isCopied,\n          [`${prefixCls}-operation-copy`]: !isCopied,\n        }\"\n        @click.stop=\"onCopyClick\"\n      >\n        <slot name=\"copy-icon\" :copied=\"isCopied\">\n          <IconCheckCircleFill v-if=\"isCopied\" />\n          <IconCopy v-else />\n        </slot>\n      </span>\n    </Tooltip>\n  </template>\n  <a\n    v-if=\"showExpand\"\n    :class=\"`${prefixCls}-operation-expand`\"\n    @click.stop=\"onExpandClick\"\n  >\n    <slot name=\"expand-node\" :expanded=\"expanded\">\n      {{ expanded ? t('typography.collapse') : t('typography.expand') }}\n    </slot>\n  </a>\n</template>\n<script>\nimport { defineComponent, computed } from 'vue';\nimport Tooltip from '../tooltip';\nimport IconCheckCircleFill from '../icon/icon-check-circle-fill';\nimport IconCopy from '../icon/icon-copy';\nimport IconEdit from '../icon/icon-edit';\nimport { getPrefixCls } from '../_utils/global-config';\nimport { useI18n } from '../locale';\n\nexport default defineComponent({\n  name: 'TypographyOperations',\n  components: {\n    Tooltip,\n    IconCheckCircleFill,\n    IconCopy,\n    IconEdit,\n  },\n  props: {\n    editable: Boolean,\n    copyable: Boolean,\n    expandable: Boolean,\n    isCopied: Boolean,\n    isEllipsis: Boolean,\n    expanded: Boolean,\n    forceRenderExpand: Boolean,\n    editTooltipProps: Object,\n    copyTooltipProps: Object,\n  },\n  emits: {\n    /**\n     * @zh 点击编辑时触发\n     * @en Triggered when editing is clicked\n     */\n    edit: () => true,\n    /**\n     * @zh 点击复制时触发\n     * @en Triggered when copy is clicked\n     */\n    copy: () => true,\n    /**\n     * @zh 点击展开时触发\n     * @en Triggered when click to expand\n     */\n    expand: () => true,\n  },\n  /**\n   * @zh 自定义复制按钮的 tooltip 内容\n   * @en Customize the tooltip content of the copy button\n   * @slot copy-tooltip\n   * @binding {boolean} copied\n   */\n  /**\n   * @zh 自定义复制按钮图标\n   * @en Custom copy button icon\n   * @slot copy-icon\n   * @binding {boolean} copied\n   */\n  /**\n   * @zh 自定义展开和折叠按钮\n   * @en Custom expand and collapse buttons\n   * @slot expand-node\n   * @binding {boolean} expanded\n   */\n  setup(props, { emit }) {\n    const prefixCls = getPrefixCls('typography');\n    const showExpand = computed(\n      () => props.forceRenderExpand || (props.expandable && props.isEllipsis)\n    );\n    const { t } = useI18n();\n\n    return {\n      prefixCls,\n      showExpand,\n      t,\n      onEditClick() {\n        emit('edit');\n      },\n      onCopyClick() {\n        emit('copy');\n      },\n      onExpandClick() {\n        emit('expand');\n      },\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/typography/paragraph.tsx",
    "content": "import { computed, defineComponent, PropType, toRefs } from 'vue';\nimport { getPrefixCls } from '../_utils/global-config';\nimport Base from './base';\n\nexport default defineComponent({\n  name: 'TypographyParagraph',\n  inheritAttrs: false,\n  props: {\n    /**\n     * @zh 长引用\n     * @en Whether enable blockquote\n     */\n    blockquote: {\n      type: Boolean,\n    },\n    /**\n     * @zh 段落的的行高，长文本(大于5行)的时候推荐使用默认行高，短文本(小于等于3行)推荐使用 `close` 紧密的行高。\n     * @en The line height of the paragraph, the default line height is recommended for long text (more than 5 lines). `close` line height is recommended for short text (less than or equal to 3 lines).\n     */\n    spacing: {\n      type: String as PropType<'default' | 'close'>,\n      default: 'default',\n    },\n  },\n  setup(props) {\n    const { blockquote, spacing } = toRefs(props);\n    const prefixCls = getPrefixCls('typography');\n    const component = computed(() =>\n      blockquote?.value ? 'blockquote' : 'div'\n    );\n    const classNames = computed(() => [\n      {\n        [`${prefixCls}-spacing-close`]: spacing?.value === 'close',\n      },\n    ]);\n\n    return {\n      component,\n      classNames,\n    };\n  },\n  render() {\n    const { component, classNames } = this;\n    return (\n      <Base\n        class={classNames}\n        {...this.$attrs}\n        component={component}\n        v-slots={this.$slots}\n      />\n    );\n  },\n});\n"
  },
  {
    "path": "packages/web-vue/components/typography/style/index.less",
    "content": "@import './token.less';\n@import '../../input/style/token.less';\n\n@typography-prefix-cls: ~'@{prefix}-typography';\n\n.@{typography-prefix-cls} {\n  color: @typography-color-text;\n  line-height: @typography-paragraph-line-height;\n  white-space: normal;\n  overflow-wrap: anywhere;\n\n  // Title\n  h1&,\n  h2&,\n  h3&,\n  h4&,\n  h5&,\n  h6& {\n    margin-top: @typography-heading-margin-top;\n    margin-bottom: @typography-heading-margin-bottom;\n    font-weight: @typography-heading-font-weight;\n  }\n\n  h1& {\n    font-size: @typography-font-size-h1;\n    line-height: 1.23;\n  }\n\n  h2& {\n    font-size: @typography-font-size-h2;\n    line-height: 1.25;\n  }\n\n  h3& {\n    font-size: @typography-font-size-h3;\n    line-height: 1.29;\n  }\n\n  h4& {\n    font-size: @typography-font-size-h4;\n    line-height: 1.33;\n  }\n\n  h5& {\n    font-size: @typography-font-size-h5;\n    line-height: 1.4;\n  }\n\n  h6& {\n    font-size: @typography-font-size-h6;\n    line-height: 1.5;\n  }\n\n  div&,\n  p& {\n    margin-top: 0;\n    margin-bottom: 1em;\n  }\n\n  // Text\n  &-primary {\n    color: @typography-text-color-text-primary;\n  }\n\n  &-secondary {\n    color: @typography-text-color-text-secondary;\n  }\n\n  &-success {\n    color: @typography-text-color-text-success;\n  }\n\n  &-warning {\n    color: @typography-text-color-text-warning;\n  }\n\n  &-danger {\n    color: @typography-text-color-text-error;\n  }\n\n  &-disabled {\n    color: @typography-text-color-text_disabled;\n    cursor: not-allowed;\n  }\n\n  & mark {\n    background-color: @typography-text-color-bg-mark;\n  }\n\n  & u {\n    text-decoration: underline;\n  }\n\n  & del {\n    text-decoration: line-through;\n  }\n\n  & b {\n    font-weight: @typography-text-font-weight-bold;\n  }\n\n  & code {\n    margin: 0 @typography-text-margin-code-horizontal;\n    padding: @typography-text-padding-code-vertical\n      @typography-text-padding-code-horizontal;\n    color: @typography-text-color-code;\n    font-size: 85%;\n    background-color: @typography-text-color-code-bg;\n    border: 1px solid @typography-text-color-code-border;\n    border-radius: 2px;\n  }\n\n  & blockquote {\n    margin: 0;\n    margin-bottom: 1em;\n    padding-left: 8px;\n    background-color: @typography-color-blockquote-bg;\n    border-left: @typography-color-blockquote-border-width solid\n      @typography-color-blockquote-border-left;\n  }\n\n  & ol,\n  & ul {\n    margin: 0;\n    padding: 0;\n  }\n\n  & ul li,\n  & ol li {\n    margin-left: 20px;\n  }\n\n  & ul {\n    list-style: circle;\n  }\n\n  &-spacing-close {\n    line-height: @typography-paragraph-line-height-close;\n  }\n\n  // Operations\n  &-operation-copy,\n  &-operation-copied {\n    margin-left: @typography-operation-margin-left;\n    padding: 2px;\n  }\n\n  &-operation-copy {\n    color: @typography-color-icon-copy;\n    background-color: @typography-color-bg-icon-copy;\n    border-radius: 2px;\n    cursor: pointer;\n    transition: background-color @transition-duration-1\n      @transition-timing-function-linear;\n\n    &:hover {\n      color: @typography-color-icon-copy_hover;\n      background-color: @typography-color-bg-icon-copy_hover;\n    }\n  }\n\n  &-operation-copied {\n    color: @typography-color-icon-copy_copied;\n  }\n\n  &-operation-edit {\n    margin-left: @typography-operation-margin-left;\n    padding: 2px;\n    color: @typography-color-icon-edit;\n    background-color: @typography-color-bg-icon-edit;\n    border-radius: 2px;\n    cursor: pointer;\n    transition: background-color @transition-duration-1\n      @transition-timing-function-linear;\n\n    &:hover {\n      color: @typography-color-icon-edit_hover;\n      background-color: @typography-color-bg-icon-edit_hover;\n    }\n  }\n\n  &-operation-expand {\n    margin: 0 4px;\n    color: @typography-color-expand-text;\n    cursor: pointer;\n\n    &:hover {\n      color: @typography-color-expand-text_hover;\n    }\n  }\n\n  // edit content\n  &-edit-content {\n    position: relative;\n    left: -(@textarea-padding-horizontal + @input-border-width);\n    margin-top: -(@textarea-padding-vertical + @input-border-width);\n    margin-right: -(@textarea-padding-horizontal + @input-border-width);\n    margin-bottom: calc(1em - @textarea-padding-vertical - @input-border-width);\n  }\n\n  // css\n  &-css-operation {\n    margin-top: -1em;\n    margin-bottom: 1em;\n    text-align: right;\n  }\n}\n"
  },
  {
    "path": "packages/web-vue/components/typography/style/index.ts",
    "content": "import '../../style/index.less';\nimport '../../input/style';\nimport '../../popover/style';\nimport '../../tooltip/style';\nimport './index.less';\n"
  },
  {
    "path": "packages/web-vue/components/typography/style/token.less",
    "content": "@import '../../style/theme/index.less';\n\n@typography-font-size-h1: 36px;\n@typography-font-size-h2: 32px;\n@typography-font-size-h3: 28px;\n@typography-font-size-h4: 24px;\n@typography-font-size-h5: 20px;\n@typography-font-size-h6: 16px;\n\n@typography-heading-font-weight: @font-weight-500;\n\n@typography-color-text: var(~'@{arco-cssvars-prefix}-color-text-1');\n\n@typography-text-color-text-primary: @color-primary-6;\n@typography-text-color-text-secondary: var(~'@{arco-cssvars-prefix}-color-text-2');\n@typography-text-color-text-success: @color-success-6;\n@typography-text-color-text-warning: @color-warning-6;\n@typography-text-color-text-error: @color-danger-6;\n@typography-text-color-text_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');\n\n@typography-text-color-bg-mark: rgb(var(~'@{arco-cssvars-prefix}-yellow-4'));\n@typography-text-font-weight-bold: @font-weight-500;\n\n@typography-text-color-code: var(~'@{arco-cssvars-prefix}-color-text-2');\n@typography-text-color-code-border: var(~'@{arco-cssvars-prefix}-color-neutral-3');\n@typography-text-color-code-bg: var(~'@{arco-cssvars-prefix}-color-neutral-2');\n@typography-text-padding-code-vertical: 2px;\n@typography-text-padding-code-horizontal: 8px;\n@typography-text-margin-code-horizontal: 2px;\n\n@typography-paragraph-line-height: @line-height-base;\n@typography-paragraph-line-height-close: 1.3;\n\n// Operations\n@typography-operation-margin-left: @spacing-1;\n@typography-color-icon-copy: var(~'@{arco-cssvars-prefix}-color-text-2');\n@typography-color-bg-icon-copy: @color-transparent;\n@typography-color-icon-copy_hover: var(~'@{arco-cssvars-prefix}-color-text-2');\n@typography-color-bg-icon-copy_hover: var(~'@{arco-cssvars-prefix}-color-fill-2');\n@typography-color-icon-copy_copied: @color-success-6;\n\n@typography-color-icon-edit: var(~'@{arco-cssvars-prefix}-color-text-2');\n@typography-color-bg-icon-edit: @color-transparent;\n@typography-color-icon-edit_hover: var(~'@{arco-cssvars-prefix}-color-text-2');\n@typography-color-bg-icon-edit_hover: var(~'@{arco-cssvars-prefix}-color-fill-2');\n\n@typography-color-expand-text: @color-primary-6;\n@typography-color-expand-text_hover: @color-primary-5;\n\n@typography-color-blockquote-border-width: 2px;\n@typography-color-blockquote-border-left: var(~'@{arco-cssvars-prefix}-color-neutral-6');\n@typography-color-blockquote-bg: var(~'@{arco-cssvars-prefix}-color-bg-2');\n\n@typography-heading-margin-top: 1em;\n@typography-heading-margin-bottom: 0.5em;\n"
  },
  {
    "path": "packages/web-vue/components/typography/text.tsx",
    "content": "import { computed, defineComponent, PropType, toRefs } from 'vue';\nimport { BaseProps } from './interface';\nimport Base from './base';\n\nexport default defineComponent({\n  name: 'TypographyText',\n  inheritAttrs: false,\n  props: {\n    ellipsis: {\n      type: [Boolean, Object] as PropType<BaseProps['ellipsis']>,\n      default: false,\n    },\n  },\n  setup(props) {\n    const { ellipsis } = toRefs(props);\n    const component = computed(() => (ellipsis?.value ? 'div' : 'span'));\n\n    return {\n      component,\n    };\n  },\n  render() {\n    const { ellipsis, component } = this;\n\n    return (\n      <Base\n        {...this.$attrs}\n        ellipsis={ellipsis}\n        component={component}\n        v-slots={this.$slots}\n      />\n    );\n  },\n});\n"
  },
  {
    "path": "packages/web-vue/components/typography/title.tsx",
    "content": "import { computed, defineComponent, PropType, toRefs } from 'vue';\nimport Base from './base';\n\nexport default defineComponent({\n  name: 'TypographyTitle',\n  inheritAttrs: false,\n  props: {\n    /**\n     * @zh 标题级别，相当于 `h1` `h2` `h3` `h4` `h5` `h6`\n     * @en Heading level, equivalent to `h1` `h2` `h3` `h4` `h5` `h6`\n     */\n    heading: {\n      type: Number as PropType<1 | 2 | 3 | 4 | 5 | 6>,\n      default: 1,\n    },\n  },\n  setup(props) {\n    const { heading } = toRefs(props);\n    const component = computed(\n      () => `h${heading?.value}` as keyof HTMLElementTagNameMap\n    );\n\n    return {\n      component,\n    };\n  },\n  render() {\n    const { component } = this;\n    return (\n      <Base {...this.$attrs} component={component} v-slots={this.$slots} />\n    );\n  },\n});\n"
  },
  {
    "path": "packages/web-vue/components/typography/typography.vue",
    "content": "<template>\n  <article :class=\"classNames\"><slot /></article>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue';\nimport { getPrefixCls } from '../_utils/global-config';\n\nexport default defineComponent({\n  name: 'Typography',\n  setup() {\n    const prefixCls = getPrefixCls('typography');\n\n    return {\n      classNames: [prefixCls],\n    };\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue/components/typography/utils/getInnerText.tsx",
    "content": "import { createApp, VNodeTypes } from 'vue';\n\nlet container: HTMLDivElement | null;\n\nexport default function getInnerText(\n  node: VNodeTypes | VNodeTypes[] | undefined\n): string {\n  if (!node) return '';\n\n  if (!container) {\n    container = document.createElement('div');\n    container.setAttribute('aria-hidden', 'true');\n    document.body.appendChild(container);\n  }\n\n  const vm = createApp({\n    render() {\n      return <div>{node}</div>;\n    },\n  });\n\n  vm.mount(container);\n\n  const text = container.innerText;\n  vm.unmount();\n\n  return text;\n}\n"
  },
  {
    "path": "packages/web-vue/components/typography/utils/measure.tsx",
    "content": "import { createApp, VNodeTypes } from 'vue';\nimport { EllipsisInternalConfig } from '../interface';\n\nlet ellipsisContainer: HTMLElement;\n\nfunction styleToString(style: CSSStyleDeclaration) {\n  const styleNames: string[] = Array.prototype.slice.apply(style);\n  return styleNames\n    .map((name) => `${name}: ${style.getPropertyValue(name)};`)\n    .join('');\n}\n\nfunction pxToNumber(value: string | null): number {\n  if (!value) return 0;\n\n  const match = value.match(/^\\d*(\\.\\d*)?/);\n\n  return match ? Number(match[0]) : 0;\n}\n\nexport default (\n  originElement: HTMLElement,\n  ellipsisConfig: EllipsisInternalConfig,\n  operations: VNodeTypes | VNodeTypes[],\n  fullText: string\n) => {\n  if (!ellipsisContainer) {\n    ellipsisContainer = document.createElement('div');\n    document.body.appendChild(ellipsisContainer);\n  }\n\n  const { rows, suffix, ellipsisStr } = ellipsisConfig;\n\n  const originStyle = window.getComputedStyle(originElement);\n  const styleString = styleToString(originStyle);\n  const lineHeight = pxToNumber(originStyle.lineHeight);\n  const maxHeight = Math.round(\n    lineHeight * rows +\n      pxToNumber(originStyle.paddingTop) +\n      pxToNumber(originStyle.paddingBottom)\n  );\n\n  ellipsisContainer.setAttribute('style', styleString);\n  ellipsisContainer.setAttribute('aria-hidden', 'true');\n\n  ellipsisContainer.style.height = 'auto';\n  ellipsisContainer.style.minHeight = 'auto';\n  ellipsisContainer.style.maxHeight = 'auto';\n  ellipsisContainer.style.position = 'fixed';\n  ellipsisContainer.style.left = '0';\n  ellipsisContainer.style.top = '-99999999px';\n  ellipsisContainer.style.zIndex = '-200';\n  // fix issue#1961\n  ellipsisContainer.style.whiteSpace = 'normal';\n\n  const vm = createApp({\n    render() {\n      return <span>{operations}</span>;\n    },\n  });\n\n  vm.mount(ellipsisContainer);\n\n  const operationsChildNodes = Array.prototype.slice.apply(\n    ellipsisContainer.childNodes[0].cloneNode(true).childNodes\n  );\n\n  vm.unmount();\n  ellipsisContainer.innerHTML = '';\n\n  // 省略号和后缀\n  const ellipsisTextNode = document.createTextNode(`${ellipsisStr}${suffix}`);\n  ellipsisContainer.appendChild(ellipsisTextNode);\n\n  // 操作按钮\n  operationsChildNodes.forEach((operationNode) => {\n    ellipsisContainer.appendChild(operationNode);\n  });\n\n  // 内容\n  const textNode = document.createTextNode(fullText);\n  ellipsisContainer.insertBefore(textNode, ellipsisTextNode);\n\n  function inRange() {\n    return ellipsisContainer.offsetHeight <= maxHeight;\n  }\n\n  if (inRange()) {\n    return {\n      ellipsis: false,\n      text: fullText,\n    };\n  }\n\n  // 寻找最多的文字\n  function measureText(\n    textNode: Text,\n    startLoc = 0,\n    endLoc = fullText.length,\n    lastSuccessLoc = 0\n  ) {\n    const midLoc = Math.floor((startLoc + endLoc) / 2);\n    const currentText = fullText.slice(0, midLoc);\n    textNode.textContent = currentText;\n\n    if (startLoc >= endLoc - 1) {\n      for (let step = endLoc; step >= startLoc; step -= 1) {\n        const currentStepText = fullText.slice(0, step);\n        textNode.textContent = currentStepText;\n\n        if (inRange() || !currentStepText) {\n          return;\n        }\n      }\n    }\n\n    if (inRange()) {\n      measureText(textNode, midLoc, endLoc, midLoc);\n    } else {\n      measureText(textNode, startLoc, midLoc, lastSuccessLoc);\n    }\n  }\n\n  measureText(textNode);\n\n  return {\n    text: textNode.textContent,\n    ellipsis: true,\n  };\n};\n"
  },
  {
    "path": "packages/web-vue/components/upload/CHANGELOG.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.55.2\n\n`2024-05-10`\n\n### 🐛 BugFix\n\n- import missing image styles for upload component ([#3101](https://github.com/arco-design/arco-design-vue/pull/3101))\n\n\n## 2.55.1\n\n`2024-03-29`\n\n\n## 2.44.6\n\n`2023-03-31`\n\n### 🐛 BugFix\n\n- modify parameter transferred in extra-button slot ([#2272](https://github.com/arco-design/arco-design-vue/pull/2272))\n\n\n## 2.44.2\n\n`2023-03-17`\n\n### 🆎 TypeScript\n\n- beforeUpload allows to return a boolean value ([#2204](https://github.com/arco-design/arco-design-vue/pull/2204))\n\n\n## 2.43.0\n\n`2023-02-10`\n\n### 🆕 Feature\n\n- Added file list extra button slot `#extra-button` ([#2060](https://github.com/arco-design/arco-design-vue/pull/2060))\n\n\n## 2.42.0\n\n`2023-01-13`\n\n### 🆕 Feature\n\n- Add `showPreviewButton` property ([#2049](https://github.com/arco-design/arco-design-vue/pull/2049))\n\n### 🐛 BugFix\n\n- Fixed an issue that could cause file deletion errors when uploading ([#2048](https://github.com/arco-design/arco-design-vue/pull/2048))\n\n\n## 2.41.0\n\n`2022-12-30`\n\n### 🆕 Feature\n\n- Add `upload` method ([#2010](https://github.com/arco-design/arco-design-vue/pull/2010))\n\n### 🐛 BugFix\n\n- Fix the bug that the `upload` component judged wrongly when verifying that the uploaded file conforms to the `accept` format in some scenarios. ([#2007](https://github.com/arco-design/arco-design-vue/pull/2007))\n\n\n## 2.39.1\n\n`2022-11-25`\n\n### 🆕 Feature\n\n- chang the type of utils file ([#1887](https://github.com/arco-design/arco-design-vue/pull/1887))\n\n\n## 2.39.0\n\n`2022-11-18`\n\n### 💎 Enhancement\n\n- add some common file type ([#1857](https://github.com/arco-design/arco-design-vue/pull/1857))\n\n\n## 2.34.1\n\n`2022-08-05`\n\n### 🐛 BugFix\n\n- fix the problem of `accept=*` does not work ([#1488](https://github.com/arco-design/arco-design-vue/pull/1488))\n\n\n## 2.33.0\n\n`2022-07-08`\n\n### 🐛 BugFix\n\n- Fixed usage issues in Alibaba Cloud OSS ([#1397](https://github.com/arco-design/arco-design-vue/pull/1397))\n\n### 💅 Style\n\n- Remove trailing space of upload-list-item ([#1379](https://github.com/arco-design/arco-design-vue/pull/1379))\n\n\n## 2.23.0\n\n`2022-04-08`\n\n### 🆕 Feature\n\n- Added icon related slots ([#944](https://github.com/arco-design/arco-design-vue/pull/944))\n- Added updateFile method, onBeforeUpload supports returning File ([#944](https://github.com/arco-design/arco-design-vue/pull/944))\n- Optimize initial image display logic ([#944](https://github.com/arco-design/arco-design-vue/pull/944))\n\n\n## 2.22.0\n\n`2022-04-01`\n\n### 🐛 BugFix\n\n- Fix onButtonClick property not available ([#907](https://github.com/arco-design/arco-design-vue/pull/907))\n\n\n## 2.18.1\n\n`2022-03-07`\n\n### 🐛 BugFix\n\n- Fix the problem of incorrect upload progress calculation ([#786](https://github.com/arco-design/arco-design-vue/pull/786))\n- Fix the problem that the cancel button does not work during uploading ([#786](https://github.com/arco-design/arco-design-vue/pull/786))\n\n\n## 2.18.0-beta.2\n\n`2022-02-25`\n\n### 🐛 BugFix\n\n- fix error when using slot `upload-item` ([#715](https://github.com/arco-design/arco-design-vue/pull/715))\n- Generate initial preview image only if file type is image ([#706](https://github.com/arco-design/arco-design-vue/pull/706))\n\n\n## 2.14.0\n\n`2022-01-07`\n\n### 🆕 Feature\n\n- Increase the imagePreview property, you can use the built-in image preview function ([#517](https://github.com/arco-design/arco-design-vue/pull/517))\n- When `listType` is an image class, the default accept is `image/*` ([#517](https://github.com/arco-design/arco-design-vue/pull/517))\n- Added `showOnExceedLimit` prop ([#517](https://github.com/arco-design/arco-design-vue/pull/517))\n\n\n## 2.13.0\n\n`2021-12-31`\n\n### 🆕 Feature\n\n- Add `show-link` attribute ([#483](https://github.com/arco-design/arco-design-vue/pull/483))\n\n\n## 2.12.1\n\n`2021-12-24`\n\n### 🐛 BugFix\n\n- Fix the problem of wrong photo wall mode ([#457](https://github.com/arco-design/arco-design-vue/pull/457))\n\n\n## 2.12.0\n\n`2021-12-24`\n\n### 🐛 BugFix\n\n- Fix the problem that tip is not displayed in button mode ([#446](https://github.com/arco-design/arco-design-vue/pull/446))\n- Fix the bug that the disabled style of the `upload` component does not take effect ([#430](https://github.com/arco-design/arco-design-vue/pull/430))\n\n\n## 2.11.0\n\n`2021-12-17`\n\n### 🆕 Feature\n\n- Add `download` attribute ([#418](https://github.com/arco-design/arco-design-vue/pull/418))\n- add `show-remove-buttoon` and `show-retry-button` and `show-cancel-button` property ([#396](https://github.com/arco-design/arco-design-vue/pull/396))\n- add `imageLoading` property ([#396](https://github.com/arco-design/arco-design-vue/pull/396))\n\n### 🐛 BugFix\n\n- Fix the problem of the wrong position of the icon in the upload ([#417](https://github.com/arco-design/arco-design-vue/pull/417))\n- Fix the problem that not all files are obtained by the second parameter of `beforeUpload` when uploading folders by dragging and dropping ([#417](https://github.com/arco-design/arco-design-vue/pull/417))\n- Fix the problem that the dragging style flashes when the mouse enters the internal text when dragging and uploading ([#417](https://github.com/arco-design/arco-design-vue/pull/417))\n\n\n## 2.6.0\n\n`2021-11-19`\n\n### 🐛 BugFix\n\n- Fix the problem of overflow when the picture name is too long ([#198](https://github.com/arco-design/arco-design-vue/pull/198))\n- Fix the problem that the photo wall mode cannot wrap when it exceeds the length ([#198](https://github.com/arco-design/arco-design-vue/pull/198))\n\n\n## 2.4.0\n\n`2021-11-17`\n\n### 🆕 Feature\n\n- Added `upload-button` and `upload-item` slots ([#174](https://github.com/arco-design/arco-design-vue/pull/174))\n- Added `success` and `error` events ([#174](https://github.com/arco-design/arco-design-vue/pull/174))\n- Add `on-click-button`, `custom-icon`, `directory` attributes ([#174](https://github.com/arco-design/arco-design-vue/pull/174))\n\n\n## 2.2.0\n\n`2021-11-10`\n\n### 🐛 BugFix\n\n- Fix the problem of invalid `limit` prop ([#123](https://github.com/arco-design/arco-design-vue/pull/123))\n\n"
  },
  {
    "path": "packages/web-vue/components/upload/CHANGELOG.zh-CN.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.55.2\n\n`2024-05-10`\n\n### 🐛 问题修复\n\n- 修复上传组件预览样式引入缺失 ([#3101](https://github.com/arco-design/arco-design-vue/pull/3101))\n\n\n## 2.55.1\n\n`2024-03-29`\n\n\n## 2.44.6\n\n`2023-03-31`\n\n### 🐛 问题修复\n\n- 调整 extra-button 插槽参数 ([#2272](https://github.com/arco-design/arco-design-vue/pull/2272))\n\n\n## 2.44.2\n\n`2023-03-17`\n\n### 🆎 类型修正\n\n- 允许beforeUpload返回布尔值 ([#2204](https://github.com/arco-design/arco-design-vue/pull/2204))\n\n\n## 2.43.0\n\n`2023-02-10`\n\n### 🆕 新增功能\n\n- 新增文件列表额外按钮插槽 `#extra-button` ([#2060](https://github.com/arco-design/arco-design-vue/pull/2060))\n\n\n## 2.42.0\n\n`2023-01-13`\n\n### 🆕 新增功能\n\n- 增加 `showPreviewButton` 属性 ([#2049](https://github.com/arco-design/arco-design-vue/pull/2049))\n\n### 🐛 问题修复\n\n- 修复上传时可能导致删除文件错误的问题 ([#2048](https://github.com/arco-design/arco-design-vue/pull/2048))\n\n\n## 2.41.0\n\n`2022-12-30`\n\n### 🆕 新增功能\n\n- 增加 `upload` 方法 ([#2010](https://github.com/arco-design/arco-design-vue/pull/2010))\n\n### 🐛 问题修复\n\n- 修复 `upload` 组件在部分场景下验证上传文件符合 `accept` 格式时，判断错误的 bug。 ([#2007](https://github.com/arco-design/arco-design-vue/pull/2007))\n\n\n## 2.39.1\n\n`2022-11-25`\n\n### 🆕 新增功能\n\n- 更改utils文件的类型 ([#1887](https://github.com/arco-design/arco-design-vue/pull/1887))\n\n\n## 2.39.0\n\n`2022-11-18`\n\n### 💎 功能优化\n\n- 添加一些常见的文件类型 ([#1857](https://github.com/arco-design/arco-design-vue/pull/1857))\n\n\n## 2.34.1\n\n`2022-08-05`\n\n### 🐛 问题修复\n\n- 修复设置 `accept=*` 时失效的问题 ([#1488](https://github.com/arco-design/arco-design-vue/pull/1488))\n\n\n## 2.33.0\n\n`2022-07-08`\n\n### 🐛 问题修复\n\n- 修复在阿里云OSS中的使用问题 ([#1397](https://github.com/arco-design/arco-design-vue/pull/1397))\n\n### 💅 样式更新\n\n- 移除了 upload-list-item 末尾的多余空白 ([#1379](https://github.com/arco-design/arco-design-vue/pull/1379))\n\n\n## 2.23.0\n\n`2022-04-08`\n\n### 🆕 新增功能\n\n- 增加图标相关插槽 ([#944](https://github.com/arco-design/arco-design-vue/pull/944))\n- 增加 updateFile 方法，onBeforeUpload 支持返回 File ([#944](https://github.com/arco-design/arco-design-vue/pull/944))\n- 优化初始图片显示逻辑 ([#944](https://github.com/arco-design/arco-design-vue/pull/944))\n\n\n## 2.22.0\n\n`2022-04-01`\n\n### 🐛 问题修复\n\n- 修复 onButtonClick 属性不可用的问题 ([#907](https://github.com/arco-design/arco-design-vue/pull/907))\n\n\n## 2.18.1\n\n`2022-03-07`\n\n### 🐛 问题修复\n\n- 修复上传进度计算错误的问题 ([#786](https://github.com/arco-design/arco-design-vue/pull/786))\n- 修复上传中，取消按钮失效的问题 ([#786](https://github.com/arco-design/arco-design-vue/pull/786))\n\n\n## 2.18.0-beta.2\n\n`2022-02-25`\n\n### 🐛 问题修复\n\n- 修复使用插槽 `upload-item` 报错的问题 ([#715](https://github.com/arco-design/arco-design-vue/pull/715))\n- 仅在文件类型为图片时生成初始预览图片 ([#706](https://github.com/arco-design/arco-design-vue/pull/706))\n\n\n## 2.14.0\n\n`2022-01-07`\n\n### 🆕 新增功能\n\n- 增加 imagePreview 属性，可以使用内置图片预览功能 ([#517](https://github.com/arco-design/arco-design-vue/pull/517))\n- 当 `listType` 为图片类时，默认设置 accept 为 `image/*` ([#517](https://github.com/arco-design/arco-design-vue/pull/517))\n- 增加 `showOnExceedLimit` 属性 ([#517](https://github.com/arco-design/arco-design-vue/pull/517))\n\n\n## 2.13.0\n\n`2021-12-31`\n\n### 🆕 新增功能\n\n- 增加 `show-link` 属性 ([#483](https://github.com/arco-design/arco-design-vue/pull/483))\n\n\n## 2.12.1\n\n`2021-12-24`\n\n### 🐛 问题修复\n\n- 修复照片墙模式错误的问题 ([#457](https://github.com/arco-design/arco-design-vue/pull/457))\n\n\n## 2.12.0\n\n`2021-12-24`\n\n### 🐛 问题修复\n\n- 修复按钮模式下 tip 没有显示的问题 ([#446](https://github.com/arco-design/arco-design-vue/pull/446))\n- 修复 `upload` 组件的禁用样式不生效的 bug ([#430](https://github.com/arco-design/arco-design-vue/pull/430))\n\n\n## 2.11.0\n\n`2021-12-17`\n\n### 🆕 新增功能\n\n- 增加 `download` 属性 ([#418](https://github.com/arco-design/arco-design-vue/pull/418))\n- 新增 `show-remove-buttoon` 、`show-retry-button`、`show-cancel-button` 属性 ([#396](https://github.com/arco-design/arco-design-vue/pull/396))\n- 新增 `imageLoading` 属性 ([#396](https://github.com/arco-design/arco-design-vue/pull/396))\n\n### 🐛 问题修复\n\n- 修复上传中的图标位置不对的问题 ([#417](https://github.com/arco-design/arco-design-vue/pull/417))\n- 修复拖拽上传文件夹时，`beforeUpload` 的第二个参数获取到的不是全部文件的问题 ([#417](https://github.com/arco-design/arco-design-vue/pull/417))\n- 修复拖拽上传时，鼠标进入内部文字，拖拽样式闪动的问题 ([#417](https://github.com/arco-design/arco-design-vue/pull/417))\n\n\n## 2.6.0\n\n`2021-11-19`\n\n### 🐛 问题修复\n\n- 修复图片名过长时溢出的问题 ([#198](https://github.com/arco-design/arco-design-vue/pull/198))\n- 修复照片墙模式，超出长度不能换行的问题 ([#198](https://github.com/arco-design/arco-design-vue/pull/198))\n\n\n## 2.4.0\n\n`2021-11-17`\n\n### 🆕 新增功能\n\n- 增加 `upload-button` 和 `upload-item` 插槽 ([#174](https://github.com/arco-design/arco-design-vue/pull/174))\n- 增加 `success` 和 `error` 事件 ([#174](https://github.com/arco-design/arco-design-vue/pull/174))\n- 增加 `on-click-button` 、`custom-icon`、`directory ` 属性 ([#174](https://github.com/arco-design/arco-design-vue/pull/174))\n\n\n## 2.2.0\n\n`2021-11-10`\n\n### 🐛 问题修复\n\n- 修复 `limit` 属性无效的问题 ([#123](https://github.com/arco-design/arco-design-vue/pull/123))\n\n"
  },
  {
    "path": "packages/web-vue/components/upload/README.en-US.md",
    "content": "```yaml\nmeta:\n  type: Component\n  category: Data Entry\ntitle: Upload\ndescription: Users can transfer files or submit corresponding content.\n```\n\n*Auto translate by google.*\n\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/avatar.md\n\n@import ./__demo__/upload-list.md\n\n@import ./__demo__/picture-card.md\n\n@import ./__demo__/draggable.md\n\n@import ./__demo__/picture-list.md\n\n@import ./__demo__/submit.md\n\n@import ./__demo__/before-upload.md\n\n@import ./__demo__/before-remove.md\n\n@import ./__demo__/limit.md\n\n@import ./__demo__/custom-button.md\n\n@import ./__demo__/custom-icon.md\n\n@import ./__demo__/request.md\n\n@import ./__demo__/directory.md\n\n## API\n\n\n### `<upload>` Props\n\n|Attribute|Description|Type|Default|version|\n|---|---|---|:---:|:---|\n|file-list **(v-model)**|File List|`FileItem[]`|`-`||\n|default-file-list|Default file list (uncontrolled state)|`FileItem[]`|`[]`||\n|accept|For the received upload file type, please refer to [HTML standard](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#htmlattrdefaccept \"_blank\")|`string`|`-`||\n|action|Uploaded URL|`string`|`-`||\n|disabled|Whether to disable|`boolean`|`false`||\n|multiple|Whether to support multiple file upload|`boolean`|`false`||\n|directory|Whether to support folder upload (requires browser support)|`boolean`|`false`||\n|draggable|Whether to support drag and drop upload|`boolean`|`false`||\n|tip|Prompt text|`string`|`-`||\n|headers|Additional header information for upload request|`Record<string, string>`|`-`||\n|data|Upload request additional data|`Record<string, string \\| Blob>\\| ((fileItem: FileItem) => Record<string, string \\| Blob>)`|`-`||\n|name|Uploaded file name|`string \\| ((fileItem: FileItem) => string)`|`-`||\n|with-credentials|Whether the upload request carries cookies|`boolean`|`false`||\n|custom-request|Custom upload behavior|`(option: RequestOption) => UploadRequest`|`-`||\n|limit|Limit the number of uploaded files. `0` means no limit|`number`|`0`||\n|auto-upload|Whether to upload files automatically|`boolean`|`true`||\n|show-file-list|Whether to display the file list|`boolean`|`true`||\n|show-remove-button|Whether to display the remove button|`boolean`|`true`|2.11.0|\n|show-retry-button|Whether to display the retry button|`boolean`|`true`|2.11.0|\n|show-cancel-button|Whether to display the cancel button|`boolean`|`true`|2.11.0|\n|show-upload-button|Whether to display the retry button. Added `showOnExceedLimit` support in version 2.14.0|`boolean \\| { showOnExceedLimit: boolean }`|`true`|2.11.0|\n|show-preview-button|Whether to display the preview button in picture-card|`boolean`|`true`|2.42.0|\n|download|Whether to add download attribute to `<a>` link|`boolean`|`false`|2.11.0|\n|show-link|In the list mode, if the uploaded file has a URL, the link will be displayed. If you turn off only display text and click to trigger the `preview` event.|`boolean`|`true`|2.13.0|\n|image-loading|Native HTML attributes of `<img>`, browser support is required|`'eager' \\| 'lazy'`|`-`|2.11.0|\n|list-type|Picture list type|`'text' \\| 'picture' \\| 'picture-card'`|`'text'`||\n|response-url-key|Get the key of the image URL in the Response. After opening, it will replace the pre-load image with the uploaded image|`string \\| ((fileItem: FileItem) => string)`|`-`||\n|custom-icon|Custom icon|`CustomIcon`|`-`||\n|on-before-upload|Trigger before uploading a file|`(file: File) => boolean \\| Promise<boolean \\| File>`|`-`||\n|on-before-remove|Triggered before removing the file|`(fileItem: FileItem) => Promise<boolean>`|`-`||\n|on-button-click|Click the upload button to trigger (if the Promise is returned, the default input upload will be closed)|`(event: Event) => Promise<FileList> \\| void`|`-`||\n### `<upload>` Events\n\n|Event Name|Description|Parameters|\n|---|---|---|\n|exceed-limit|Triggered when the uploaded file exceeds the limit|fileList: `FileItem[]`<br>files: `File[]`|\n|change|Triggered when the status of the uploaded file changes|fileList: `FileItem[]`<br>fileItem: `fileItem`|\n|progress|Triggered when the uploading file progress changes|fileItem: `fileItem`<br>ev: `ProgressEvent`|\n|preview|Trigger when the image preview is clicked|fileItem: `FileItem`|\n|success|Triggered when upload is successful|fileItem: `FileItem`|\n|error|Triggered when upload fails|fileItem: `FileItem`|\n### `<upload>` Methods\n\n|Method|Description|Parameters|Return|version|\n|---|---|---|:---:|:---|\n|submit|Upload file (file that has been initialized)|fileItem: `FileItem`|-||\n|abort|Abort upload|fileItem: `FileItem`|-||\n|updateFile|Update file|id: `string`<br>file: `File`|-||\n|upload|Upload file|files: `File[]`|-|2.41.0|\n### `<upload>` Slots\n\n|Slot Name|Description|Parameters|version|\n|---|---|---|:---|\n|extra-button|Extra button|fileItem: `FileItem`|2.43.0|\n|image|Image|fileItem: `FileItem`|2.23.0|\n|file-name|File name|-|2.23.0|\n|file-icon|File icon|-|2.23.0|\n|remove-icon|Remove icon|-|2.23.0|\n|preview-icon|Preview icon|-|2.23.0|\n|cancel-icon|Cancel icon|-|2.23.0|\n|start-icon|Start icon|-|2.23.0|\n|error-icon|Error icon|-|2.23.0|\n|success-icon|Success icon|-|2.23.0|\n|retry-icon|Retry icon|-|2.23.0|\n|upload-button|Upload button|-||\n|upload-item|Upload list item|fileItem: `FileItem`<br>index: `number`||\n\n\n\n\n### FileItem\n\n|Name|Description|Type|Default|\n|---|---|---|:---:|\n|uid|The unique identifier of the currently uploaded file|`string`|`-`|\n|status|The status of the currently uploaded file|`FileStatus`|`-`|\n|file|File object|`File`|`-`|\n|percent|Upload progress percentage|`number`|`-`|\n|response|The response returned by the current file upload request|`any`|`-`|\n|url|The file address|`string`|`-`|\n|name|The file name|`string`|`-`|\n\n\n\n### CustomIcon\n\n|Name|Description|Type|Default|\n|---|---|---|:---:|\n|startIcon|Start icon|`RenderFunction`|`-`|\n|cancelIcon|Cancel icon|`RenderFunction`|`-`|\n|retryIcon|Retry icon|`RenderFunction`|`-`|\n|successIcon|Success icon|`RenderFunction`|`-`|\n|errorIcon|Error icon|`RenderFunction`|`-`|\n|removeIcon|Remove icon|`RenderFunction`|`-`|\n|previewIcon|Preview icon|`RenderFunction`|`-`|\n|fileIcon|File icon|`(fileItem: FileItem) => VNode`|`-`|\n|fileName|File name|`(fileItem: FileItem) => string \\| VNode`|`-`|\n\n\n\n### RequestOption\n\n|Name|Description|Type|Default|\n|---|---|---|:---:|\n|action|Uploaded URL|`string`|`-`|\n|headers|Header information of the request message|`Record<string, string>`|`-`|\n|name|File name of the uploaded file|`string \\| ((fileItem: FileItem) => string)`|`-`|\n|fileItem|upload files|`FileItem`|`-`|\n|data|Additional requested information|`Record<string, string \\| Blob>    \\| ((fileItem: FileItem) => Record<string, string \\| Blob>)`|`-`|\n|withCredentials|Whether to carry cookie information|`boolean`|`false`|\n|onProgress|Update the upload progress of the current file. percent: current upload progress percentage|`(percent: number, event?: ProgressEvent) => void`|`-`|\n|onSuccess|After the upload is successful, call the onSuccess method, the incoming response parameter will be appended to the response field of the currently uploaded file|`(response?: any) => void`|`-`|\n|onError|After the upload fails, call the onError method, and the response parameter passed in will be appended to the response field of the currently uploaded file|`(response?: any) => void`|`-`|\n\n\n\n### UploadRequest\n\n|Name|Description|Type|Default|\n|---|---|---|:---:|\n|abort|Terminate upload|`() => void`|`-`|\n\n\n"
  },
  {
    "path": "packages/web-vue/components/upload/README.zh-CN.md",
    "content": "```yaml\nmeta:\n  type: 组件\n  category: 数据输入\ntitle: 上传 Upload\ndescription: 用户可传输文件或提交相应的内容。\n```\n\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/avatar.md\n\n@import ./__demo__/upload-list.md\n\n@import ./__demo__/picture-card.md\n\n@import ./__demo__/draggable.md\n\n@import ./__demo__/picture-list.md\n\n@import ./__demo__/submit.md\n\n@import ./__demo__/before-upload.md\n\n@import ./__demo__/before-remove.md\n\n@import ./__demo__/limit.md\n\n@import ./__demo__/custom-button.md\n\n@import ./__demo__/custom-icon.md\n\n@import ./__demo__/request.md\n\n@import ./__demo__/directory.md\n\n## API\n\n\n### `<upload>` Props\n\n|参数名|描述|类型|默认值|版本|\n|---|---|---|:---:|:---|\n|file-list **(v-model)**|文件列表|`FileItem[]`|`-`||\n|default-file-list|默认的文件列表（非受控状态）|`FileItem[]`|`[]`||\n|accept|接收的上传文件类型，具体参考 [HTML标准](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#htmlattrdefaccept \"_blank\")|`string`|`-`||\n|action|上传的URL|`string`|`-`||\n|disabled|是否禁用|`boolean`|`false`||\n|multiple|是否支持多文件上传|`boolean`|`false`||\n|directory|是否支持文件夹上传（需要浏览器支持）|`boolean`|`false`||\n|draggable|是否支持拖拽上传|`boolean`|`false`||\n|tip|提示文字|`string`|`-`||\n|headers|上传请求附加的头信息|`Record<string, string>`|`-`||\n|data|上传请求附加的数据|`Record<string, string \\| Blob>\\| ((fileItem: FileItem) => Record<string, string \\| Blob>)`|`-`||\n|name|上传的文件名|`string \\| ((fileItem: FileItem) => string)`|`-`||\n|with-credentials|上传请求是否携带 cookie|`boolean`|`false`||\n|custom-request|自定义上传行为|`(option: RequestOption) => UploadRequest`|`-`||\n|limit|限制上传文件的数量。`0`表示不限制|`number`|`0`||\n|auto-upload|是否自动上传文件|`boolean`|`true`||\n|show-file-list|是否显示文件列表|`boolean`|`true`||\n|show-remove-button|是否显示删除按钮|`boolean`|`true`|2.11.0|\n|show-retry-button|是否显示重试按钮|`boolean`|`true`|2.11.0|\n|show-cancel-button|是否显示取消按钮|`boolean`|`true`|2.11.0|\n|show-upload-button|是否显示上传按钮。2.14.0 版本新增 `showOnExceedLimit` 支持|`boolean \\| { showOnExceedLimit: boolean }`|`true`|2.11.0|\n|show-preview-button|照片墙是否显示预览按钮|`boolean`|`true`|2.42.0|\n|download|是否在 `<a>` 链接上添加 download 属性|`boolean`|`false`|2.11.0|\n|show-link|在列表模式下，如果上传的文件存在 URL 则展示链接。如果关闭仅展示文字并且点击可以触发 `preview` 事件。|`boolean`|`true`|2.13.0|\n|image-loading|`<img>` 的原生 HTML 属性，需要浏览器支持|`'eager' \\| 'lazy'`|`-`|2.11.0|\n|list-type|图片列表类型|`'text' \\| 'picture' \\| 'picture-card'`|`'text'`||\n|response-url-key|Response中获取图片URL的key，开启后会用上传的图片替换预加载的图片|`string \\| ((fileItem: FileItem) => string)`|`-`||\n|custom-icon|自定义图标|`CustomIcon`|`-`||\n|image-preview|是否使用 ImagePreview 组件进行预览|`boolean`|`false`|2.14.0|\n|on-before-upload|上传文件前触发|`(file: File) => boolean \\| Promise<boolean \\| File>`|`-`||\n|on-before-remove|移除文件前触发|`(fileItem: FileItem) => Promise<boolean>`|`-`||\n|on-button-click|点击上传按钮触发（如果返回 Promise 则会关闭默认 input 上传）|`(event: Event) => Promise<FileList> \\| void`|`-`||\n### `<upload>` Events\n\n|事件名|描述|参数|\n|---|---|---|\n|exceed-limit|上传的文件超出限制后触发|fileList: `FileItem[]`<br>files: `File[]`|\n|change|上传的文件状态发生改变时触发|fileList: `FileItem[]`<br>fileItem: `fileItem`|\n|progress|上传中的文件进度改变时触发|fileItem: `fileItem`<br>ev: `ProgressEvent`|\n|preview|点击图片预览时的触发|fileItem: `FileItem`|\n|success|上传成功时触发|fileItem: `FileItem`|\n|error|上传失败时触发|fileItem: `FileItem`|\n### `<upload>` Methods\n\n|方法名|描述|参数|返回值|版本|\n|---|---|---|---|:---|\n|submit|上传文件（已经初始化完成的文件）|fileItem: `FileItem`|-||\n|abort|中止上传|fileItem: `FileItem`|-||\n|updateFile|更新文件|id: `string`<br>file: `File`|-||\n|upload|上传文件|files: `File[]`|-|2.41.0|\n### `<upload>` Slots\n\n|插槽名|描述|参数|版本|\n|---|:---:|---|:---|\n|extra-button|上传列表额外按钮|fileItem: `FileItem`|2.43.0|\n|image|自定义图片|fileItem: `FileItem`|2.23.0|\n|file-name|文件名称|-|2.23.0|\n|file-icon|文件图标|-|2.23.0|\n|remove-icon|删除图标|-|2.23.0|\n|preview-icon|预览图标|-|2.23.0|\n|cancel-icon|取消图标|-|2.23.0|\n|start-icon|开始图标|-|2.23.0|\n|error-icon|失败图标|-|2.23.0|\n|success-icon|成功图标|-|2.23.0|\n|retry-icon|重试图标|-|2.23.0|\n|upload-button|上传按钮|-||\n|upload-item|上传列表的项目|fileItem: `FileItem`<br>index: `number`||\n\n\n\n\n### FileItem\n\n|参数名|描述|类型|默认值|\n|---|---|---|:---:|\n|uid|当前上传文件的唯一标示|`string`|`-`|\n|status|当前上传文件的状态|`FileStatus`|`-`|\n|file|文件对象|`File`|`-`|\n|percent|上传进度百分比|`number`|`-`|\n|response|当前文件上传请求返回的响应|`any`|`-`|\n|url|文件地址|`string`|`-`|\n|name|文件名|`string`|`-`|\n\n\n\n### CustomIcon\n\n|参数名|描述|类型|默认值|\n|---|---|---|:---:|\n|startIcon|开始图标|`RenderFunction`|`-`|\n|cancelIcon|取消图标|`RenderFunction`|`-`|\n|retryIcon|重试图标|`RenderFunction`|`-`|\n|successIcon|成功图标|`RenderFunction`|`-`|\n|errorIcon|失败图标|`RenderFunction`|`-`|\n|removeIcon|移除图标|`RenderFunction`|`-`|\n|previewIcon|预览图标|`RenderFunction`|`-`|\n|fileIcon|文件图标|`(fileItem: FileItem) => VNode`|`-`|\n|fileName|文件名|`(fileItem: FileItem) => string \\| VNode`|`-`|\n\n\n\n### RequestOption\n\n|参数名|描述|类型|默认值|\n|---|---|---|:---:|\n|action|上传的URL|`string`|`-`|\n|headers|请求报文的头信息|`Record<string, string>`|`-`|\n|name|上传文件的文件名|`string \\| ((fileItem: FileItem) => string)`|`-`|\n|fileItem|上传文件|`FileItem`|`-`|\n|data|附加的请求信息|`Record<string, string \\| Blob>    \\| ((fileItem: FileItem) => Record<string, string \\| Blob>)`|`-`|\n|withCredentials|是否携带cookie信息|`boolean`|`false`|\n|onProgress|更新当前文件的上传进度。percent: 当前上传进度百分比|`(percent: number, event?: ProgressEvent) => void`|`-`|\n|onSuccess|上传成功后，调用onSuccess方法，传入的response参数将会附加到当前上传文件的response字段上|`(response?: any) => void`|`-`|\n|onError|上传失败后，调用onError方法，传入的response参数将会附加到当前上传文件的response字段上|`(response?: any) => void`|`-`|\n\n\n\n### UploadRequest\n\n|参数名|描述|类型|默认值|\n|---|---|---|:---:|\n|abort|终止上传|`() => void`|`-`|\n\n\n"
  },
  {
    "path": "packages/web-vue/components/upload/TEMPLATE.md",
    "content": "## zh-CN\n```yaml\nmeta:\n  type: 组件\n  category: 数据输入\ntitle: 上传 Upload\ndescription: 用户可传输文件或提交相应的内容。\n```\n---\n## en-US\n```yaml\nmeta:\n  type: Component\n  category: Data Entry\ntitle: Upload\ndescription: Users can transfer files or submit corresponding content.\n```\n---\n\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/avatar.md\n\n@import ./__demo__/upload-list.md\n\n@import ./__demo__/picture-card.md\n\n@import ./__demo__/draggable.md\n\n@import ./__demo__/picture-list.md\n\n@import ./__demo__/submit.md\n\n@import ./__demo__/before-upload.md\n\n@import ./__demo__/before-remove.md\n\n@import ./__demo__/limit.md\n\n@import ./__demo__/custom-button.md\n\n@import ./__demo__/custom-icon.md\n\n@import ./__demo__/request.md\n\n@import ./__demo__/directory.md\n\n## API\n\n%%API(upload.tsx)%%\n\n%%INTERFACE(interfaces.ts)%%\n"
  },
  {
    "path": "packages/web-vue/components/upload/__demo__/avatar.md",
    "content": "```yaml\ntitle:\n  zh-CN: 用户头像上传\n  en-US: Avatar Upload\n```\n\n## zh-CN\n\n点击上传用户头像，可使用 beforeUpload 限制用户上传的图片格式和大小。\n\n---\n\n## en-US\n\nClick to upload user's avatar, and validate size and format of picture with beforeUpload.\n\n---\n\n```vue\n\n<template>\n  <a-space direction=\"vertical\" :style=\"{ width: '100%' }\">\n    <a-upload\n      action=\"/\"\n      :fileList=\"file ? [file] : []\"\n      :show-file-list=\"false\"\n      @change=\"onChange\"\n      @progress=\"onProgress\"\n    >\n      <template #upload-button>\n        <div\n          :class=\"`arco-upload-list-item${\n            file && file.status === 'error' ? ' arco-upload-list-item-error' : ''\n          }`\"\n        >\n          <div\n            class=\"arco-upload-list-picture custom-upload-avatar\"\n            v-if=\"file && file.url\"\n          >\n            <img :src=\"file.url\" />\n            <div class=\"arco-upload-list-picture-mask\">\n              <IconEdit />\n            </div>\n            <a-progress\n              v-if=\"file.status === 'uploading' && file.percent < 100\"\n              :percent=\"file.percent\"\n              type=\"circle\"\n              size=\"mini\"\n              :style=\"{\n                position: 'absolute',\n                left: '50%',\n                top: '50%',\n                transform: 'translateX(-50%) translateY(-50%)',\n              }\"\n            />\n          </div>\n          <div class=\"arco-upload-picture-card\" v-else>\n            <div class=\"arco-upload-picture-card-text\">\n              <IconPlus />\n              <div style=\"margin-top: 10px; font-weight: 600\">Upload</div>\n            </div>\n          </div>\n        </div>\n      </template>\n    </a-upload>\n  </a-space>\n</template>\n\n<script>\nimport { IconEdit, IconPlus } from '@arco-design/web-vue/es/icon';\nimport { ref } from 'vue';\n\nexport default {\n  components: {IconPlus, IconEdit},\n  setup() {\n    const file = ref();\n\n    const onChange = (_, currentFile) => {\n      file.value = {\n        ...currentFile,\n        // url: URL.createObjectURL(currentFile.file),\n      };\n    };\n    const onProgress = (currentFile) => {\n      file.value = currentFile;\n    };\n    return {\n      file,\n      onChange,\n      onProgress\n    }\n  },\n};\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/upload/__demo__/basic.md",
    "content": "```yaml\ntitle:\n  zh-CN: 基本使用\n  en-US: Basic Usage\n```\n\n## zh-CN\n\n上传组件的基本用法。\n\n---\n\n## en-US\n\nBasic usage of upload component.\n\n---\n\n```vue\n<template>\n  <a-space direction=\"vertical\" :style=\"{ width: '100%' }\">\n    <a-upload action=\"/\" />\n    <a-upload action=\"/\" disabled style=\"margin-top: 40px;\"/>\n  </a-space>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/upload/__demo__/before-remove.md",
    "content": "```yaml\ntitle:\n  zh-CN: 移除前校验\n  en-US: On Before Remove\n```\n\n## zh-CN\n\n`on-before-remove` 会在每一个文件移除之前执行。如果返回 `false` 或者` Promise.reject`， 那么将会取消当前文件的操作。\n\n---\n\n## en-US\n\nThe function will be executed before each file remove. Removing will be aborted when the return value is false or a Promise which resolve(false) or reject.\n\n---\n\n```vue\n<template>\n  <a-space direction=\"vertical\" :style=\"{ width: '100%' }\">\n    <a-upload\n      action=\"/\"\n      :default-file-list=\"[\n        {\n          uid: '-2',\n          name: 'light.png',\n          url: '//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a8c8cdb109cb051163646151a4a5083b.png~tplv-uwbnlip3yd-webp.webp',\n        },\n        {\n          uid: '-1',\n          name: 'ice.png',\n          url: '//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp',\n        },\n      ]\"\n      @before-remove=\"beforeRemove\"\n    />\n  </a-space>\n</template>\n\n<script>\nimport { Modal } from '@arco-design/web-vue';\n\nexport default {\n  setup() {\n    const beforeRemove = (file) => {\n      return new Promise((resolve, reject) => {\n        Modal.confirm({\n          title: 'on-before-remove',\n          content: `确认删除 ${file.name}`,\n          onOk: () => resolve(true),\n          onCancel: () => reject('cancel'),\n        });\n      });\n    };\n\n    return {\n      beforeRemove\n    }\n  },\n};\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/upload/__demo__/before-upload.md",
    "content": "```yaml\ntitle:\n  zh-CN: 上传前校验\n  en-US: On Before Upload\n```\n\n## zh-CN\n\n`beforeUpload` 会在每一个文件上传之前执行。如果返回 `false` 或者` Promise.reject`， 那么将会取消当前文件的上传。\n\n---\n\n## en-US\n\nThe function will be executed before each file upload. Uploading will be aborted when the return value is false or a Promise which resolve(false) or reject.\n\n---\n\n```vue\n<template>\n  <a-space direction=\"vertical\" :style=\"{ width: '100%' }\">\n    <a-upload action=\"/\" @before-upload=\"beforeUpload\" />\n  </a-space>\n</template>\n\n<script>\nimport { Modal } from '@arco-design/web-vue';\n\nexport default {\n  setup() {\n    const beforeUpload = (file) => {\n      return new Promise((resolve, reject) => {\n        Modal.confirm({\n          title: 'beforeUpload',\n          content: `确认上传 ${file.name}`,\n          onOk: () => resolve(true),\n          onCancel: () => reject('cancel'),\n        });\n      });\n    };\n    return {\n      beforeUpload\n    }\n  },\n};\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/upload/__demo__/custom-button.md",
    "content": "```yaml\ntitle:\n  zh-CN: 自定义上传节点\n  en-US: custom upload button\n```\n\n## zh-CN\n\n可以通过插槽 `upload-button` 传入自定义内容作为文件上传的触发节点。\n\n---\n\n## en-US\n\nYou can pass in custom content through the slot `upload-button` as the trigger node for file upload.\n\n---\n\n```vue\n<template>\n  <a-upload action=\"/\">\n    <template #upload-button>\n      <div\n        style=\"\n        background-color: var(--color-fill-2);\n        color: var(--color-text-1);\n        border: 1px dashed var(--color-fill-4);\n        height: 158px;\n        width: 380px;\n        border-radius: 2;\n        line-height: 158px;\n        text-align: center;\"\n      >\n        <div>\n          Drag the file here or\n          <span style=\"color: #3370FF\"> Click to upload</span>\n        </div>\n      </div>\n    </template>\n  </a-upload>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/upload/__demo__/custom-icon.md",
    "content": "```yaml\ntitle:\n  zh-CN: 自定义图标\n  en-US: custom icon\n```\n\n## zh-CN\n\n自定义图标\n\n---\n\n## en-US\n\ncustom icon\n\n---\n\n```vue\n\n<template>\n  <div>\n    <div style=\"margin-bottom: 20px;\">\n      <a-space>\n        <span>Type: </span>\n        <a-radio-group v-model=\"type\">\n          <a-radio value=\"text\">text</a-radio>\n          <a-radio value=\"picture\">picture</a-radio>\n          <a-radio value=\"picture-card\">picture-card</a-radio>\n        </a-radio-group>\n      </a-space>\n    </div>\n    <a-upload\n      action=\"/\"\n      :list-type=\"type\"\n      :default-file-list=\"[\n        {\n          uid: '-1',\n          name: 'ice.png',\n          url: '//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp',\n        },\n        {\n          uid: '-3',\n          name: 'light.png',\n          url: '//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a8c8cdb109cb051163646151a4a5083b.png~tplv-uwbnlip3yd-webp.webp',\n        },\n      ]\"\n      :custom-icon=\"getCustomIcon()\"\n    />\n  </div>\n</template>\n\n<script>\nimport { h, ref } from 'vue';\nimport { IconUpload, IconFileAudio, IconClose, IconFaceFrownFill } from '@arco-design/web-vue/es/icon';\n\nexport default {\n  setup() {\n    const type = ref('text');\n    const getCustomIcon = () => {\n      return {\n        retryIcon: () => h(IconUpload),\n        cancelIcon: () => h(IconClose),\n        fileIcon: () => h(IconFileAudio),\n        removeIcon: () => h(IconClose),\n        errorIcon: () => h(IconFaceFrownFill),\n        fileName: (file) => {\n          return `文件名： ${file.name}`\n        },\n      };\n    };\n\n    return {\n      type,\n      getCustomIcon\n    }\n  },\n};\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/upload/__demo__/directory.md",
    "content": "```yaml\ntitle:\n  zh-CN: 文件夹上传\n  en-US: Upload directory\n```\n\n## zh-CN\n\n可以通过 `directory` 开启文件夹上传\n\n---\n\n## en-US\n\nUpload directory\n\n---\n\n```vue\n<template>\n  <a-space direction=\"vertical\" :style=\"{ width: '100%' }\">\n    <a-upload action=\"/\" directory />\n  </a-space>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/upload/__demo__/draggable.md",
    "content": "```yaml\ntitle:\n  zh-CN: 拖拽上传\n  en-US: Draggable\n```\n\n## zh-CN\n\n通过设置 `draggable` 开启对拖拽的支持。\n\n---\n\n## en-US\n\nEnable drag and drop support by setting `draggable`.\n\n---\n\n```vue\n<template>\n  <a-upload draggable action=\"/\" />\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/upload/__demo__/limit.md",
    "content": "```yaml\ntitle:\n  zh-CN: 限制上传数量\n  en-US: Limit\n```\n\n## zh-CN\n\n通过 `limit` 限制上传的最大数量。超出后上传按钮会隐藏.\n\n---\n\n## en-US\n\nLimit the maximum number of uploaded files.\n\n---\n\n```vue\n<template>\n  <a-upload multiple action=\"/\" :limit=\"3\" />\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/upload/__demo__/picture-card.md",
    "content": "```yaml\ntitle:\n  zh-CN: 照片墙\n  en-US: Picture Card\n```\n\n## zh-CN\n\n通过设置 `list-type=\"picture-card\"` 开启照片墙模式。\n\n---\n\n## en-US\n\nEnable the photo wall mode by setting `list-type=\"picture-card\"`.\n\n---\n\n```vue\n<template>\n  <a-upload\n    list-type=\"picture-card\"\n    action=\"/\"\n    :default-file-list=\"fileList\"\n    image-preview\n  />\n</template>\n\n<script>\nexport default {\n  setup() {\n    const fileList = [\n      {\n        uid: '-2',\n        name: '20200717-103937.png',\n        url: '//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a8c8cdb109cb051163646151a4a5083b.png~tplv-uwbnlip3yd-webp.webp',\n      },\n      {\n        uid: '-1',\n        name: 'hahhahahahaha.png',\n        url: '//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/e278888093bef8910e829486fb45dd69.png~tplv-uwbnlip3yd-webp.webp',\n      },\n    ];\n\n    return {\n      fileList\n    }\n  },\n};\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/upload/__demo__/picture-list.md",
    "content": "```yaml\ntitle:\n  zh-CN: 图标列表样式\n  en-US: Picture List\n```\n\n## zh-CN\n\n通过设置 `list-type=\"picture\"` 开启图片列表样式\n\n---\n\n## en-US\n\nEnable the picture list mode by setting `list-type=\"picture\"`.\n\n---\n\n```vue\n<template>\n  <a-upload\n    list-type=\"picture\"\n    action=\"/\"\n    :default-file-list=\"fileList\"\n  />\n</template>\n\n<script>\nexport default {\n  setup() {\n    const fileList = [\n      {\n        uid: '-2',\n        name: '20200717-103937.png',\n        url: '//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a8c8cdb109cb051163646151a4a5083b.png~tplv-uwbnlip3yd-webp.webp',\n      },\n      {\n        uid: '-1',\n        name: 'hahhahahahaha.png',\n        url: '//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/e278888093bef8910e829486fb45dd69.png~tplv-uwbnlip3yd-webp.webp',\n      },\n    ];\n\n    return {\n      fileList\n    }\n  },\n};\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/upload/__demo__/request.md",
    "content": "```yaml\ntitle:\n  zh-CN: 自定义上传请求\n  en-US: Custom Upload Request\n```\n\n## zh-CN\n\n可以通过 `custom-request` 实现自定义上传请求。\n\n---\n\n## en-US\n\nCustom upload request can be realized through `custom-request`.\n\n---\n\n```vue\n<template>\n  <a-upload :custom-request=\"customRequest\" />\n</template>\n\n<script>\nexport default {\n  setup() {\n    const customRequest = (option) => {\n      const {onProgress, onError, onSuccess, fileItem, name} = option\n      const xhr = new XMLHttpRequest();\n      if (xhr.upload) {\n        xhr.upload.onprogress = function (event) {\n          let percent;\n          if (event.total > 0) {\n            // 0 ~ 1\n            percent = event.loaded / event.total;\n          }\n          onProgress(percent, event);\n        };\n      }\n      xhr.onerror = function error(e) {\n        onError(e);\n      };\n      xhr.onload = function onload() {\n        if (xhr.status < 200 || xhr.status >= 300) {\n          return onError(xhr.responseText);\n        }\n        onSuccess(xhr.response);\n      };\n\n      const formData = new FormData();\n      formData.append(name || 'file', fileItem.file);\n      xhr.open('post', '//upload-z2.qbox.me/', true);\n      xhr.send(formData);\n\n      return {\n        abort() {\n          xhr.abort()\n        }\n      }\n    };\n\n    return {\n      customRequest\n    }\n  },\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/upload/__demo__/submit.md",
    "content": "```yaml\ntitle:\n  zh-CN: 手动上传\n  en-US: manual upload\n```\n\n## zh-CN\n\n设置 `auto-upload` 为 `false` 时候，可以通过调用 `submit` 方法进行手动上传。\n\n---\n\n## en-US\n\nWhen setting `auto-upload` to `false`, you can manually upload by calling the `submit` method.\n\n---\n\n```vue\n<template>\n  <div>\n    <a-upload\n      action=\"/\"\n      :auto-upload=\"false\"\n      ref=\"uploadRef\"\n      @change=\"onChange\"\n      multiple\n    >\n      <template #upload-button>\n        <a-space>\n          <a-button> select file</a-button>\n          <a-button type=\"primary\" @click=\"submit\"> start upload</a-button>\n          <a-button type=\"primary\" @click=\"submitOne\">\n            only upload one\n          </a-button>\n        </a-space>\n      </template>\n    </a-upload>\n  </div>\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n  setup() {\n    const uploadRef = ref();\n    const files = ref([]);\n\n    const submitOne = (e) => {\n      e.stopPropagation();\n      console.log(files.value);\n      uploadRef.value.submit(files.value.find((x) => x.status === 'init'));\n    };\n\n    const submit = (e) => {\n      e.stopPropagation();\n      uploadRef.value.submit();\n    };\n\n    const onChange = (fileList) => {\n      files.value = fileList;\n    };\n\n    return {\n      uploadRef,\n      files,\n      submitOne,\n      submit,\n      onChange,\n    };\n  },\n};\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/upload/__demo__/upload-list.md",
    "content": "```yaml\ntitle:\n  zh-CN: 已上传的文件列表\n  en-US: File List\n```\n\n## zh-CN\n\n可以指定默认的已上传文件列表。\n\n---\n\n## en-US\n\nYou can specify a default list of uploaded files.\n\n---\n\n```vue\n<template>\n  <a-upload action=\"/\" :default-file-list=\"fileList\" />\n</template>\n\n<script>\nexport default {\n  setup() {\n    const fileList = [\n      {\n        uid: '-1',\n        name: 'ice.png',\n        url: '//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp',\n      },\n      {\n        status: 'error',\n        uid: '-2',\n        percent: 0,\n        response: '上传错误提示',\n        name: 'cat.png',\n        url: '//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/e278888093bef8910e829486fb45dd69.png~tplv-uwbnlip3yd-webp.webp',\n      },\n      {\n        uid: '-3',\n        name: 'light.png',\n        url: '//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a8c8cdb109cb051163646151a4a5083b.png~tplv-uwbnlip3yd-webp.webp',\n      },\n    ];\n\n    return {\n      fileList\n    }\n  },\n};\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/upload/__test__/__snapshots__/demo.test.ts.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`<upload> demo: render [avatar] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-vertical\\\\\" style=\\\\\"column-gap: 8px; row-gap: 8px; width: 100%;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-upload\\\\\"><input type=\\\\\"file\\\\\" style=\\\\\"display: none;\\\\\"><span><div class=\\\\\"arco-upload-list-item\\\\\"><div class=\\\\\"arco-upload-picture-card\\\\\"><div class=\\\\\"arco-upload-picture-card-text\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-plus\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M5 24h38M24 5v38\\\\\"></path></svg><div style=\\\\\"margin-top: 10px; font-weight: 600;\\\\\">Upload</div></div></div></div></span></span></div>\n</div>\"\n`;\n\nexports[`<upload> demo: render [basic] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-vertical\\\\\" style=\\\\\"column-gap: 8px; row-gap: 8px; width: 100%;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-upload-wrapper arco-upload-wrapper-type-text\\\\\">\n      <!----><span class=\\\\\"arco-upload\\\\\"><input type=\\\\\"file\\\\\" style=\\\\\"display: none;\\\\\"><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\"><span class=\\\\\"arco-btn-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-upload\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M14.93 17.071 24.001 8l9.071 9.071m-9.07 16.071v-25M40 35v6H8v-6\\\\\"></path></svg></span>点击上传</button></span>\n      <transition-group-stub tag=\\\\\"div\\\\\" appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\" class=\\\\\"arco-upload-list arco-upload-list-type-text\\\\\">\n        <!---->\n      </transition-group-stub>\n    </div>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-upload-wrapper arco-upload-wrapper-type-text\\\\\" style=\\\\\"margin-top: 40px;\\\\\">\n      <!----><span class=\\\\\"arco-upload arco-upload-disabled\\\\\"><input type=\\\\\"file\\\\\" style=\\\\\"display: none;\\\\\" disabled=\\\\\"\\\\\"><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal arco-btn-disabled\\\\\" type=\\\\\"button\\\\\" disabled=\\\\\"\\\\\"><span class=\\\\\"arco-btn-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-upload\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M14.93 17.071 24.001 8l9.071 9.071m-9.07 16.071v-25M40 35v6H8v-6\\\\\"></path></svg></span>点击上传</button></span>\n      <transition-group-stub tag=\\\\\"div\\\\\" appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\" class=\\\\\"arco-upload-list arco-upload-list-type-text\\\\\">\n        <!---->\n      </transition-group-stub>\n    </div>\n  </div>\n</div>\"\n`;\n\nexports[`<upload> demo: render [before-remove] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-vertical\\\\\" style=\\\\\"column-gap: 8px; row-gap: 8px; width: 100%;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-upload-wrapper arco-upload-wrapper-type-text\\\\\">\n      <!----><span class=\\\\\"arco-upload\\\\\"><input type=\\\\\"file\\\\\" style=\\\\\"display: none;\\\\\"><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\"><span class=\\\\\"arco-btn-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-upload\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M14.93 17.071 24.001 8l9.071 9.071m-9.07 16.071v-25M40 35v6H8v-6\\\\\"></path></svg></span>点击上传</button></span>\n      <transition-group-stub tag=\\\\\"div\\\\\" appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\" class=\\\\\"arco-upload-list arco-upload-list-type-text\\\\\">\n        <div class=\\\\\"arco-upload-list-item arco-upload-list-item-done\\\\\">\n          <div class=\\\\\"arco-upload-list-item-content\\\\\">\n            <!---->\n            <div class=\\\\\"arco-upload-list-item-name\\\\\"><span class=\\\\\"arco-upload-list-item-file-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-file-image\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"m26 33 5-6v6h-5Zm0 0-3-4-4 4h7Zm11 9H11a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h21l7 7v27a2 2 0 0 1-2 2ZM17 19h1v1h-1v-1Z\\\\\"></path></svg></span><a class=\\\\\"arco-upload-list-item-name-link\\\\\" target=\\\\\"_blank\\\\\" href=\\\\\"//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a8c8cdb109cb051163646151a4a5083b.png~tplv-uwbnlip3yd-webp.webp\\\\\">light.png</a>\n              <!---->\n            </div><span class=\\\\\"arco-upload-progress\\\\\"><!----><span class=\\\\\"arco-upload-icon arco-upload-icon-success\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-check\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M41.678 11.05 19.05 33.678 6.322 20.95\\\\\"></path></svg></span></span>\n          </div><span class=\\\\\"arco-upload-list-item-operation\\\\\"><span class=\\\\\"arco-icon-hover\\\\\"><span class=\\\\\"arco-upload-icon arco-upload-icon-remove\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-delete\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M5 11h5.5m0 0v29a1 1 0 0 0 1 1h25a1 1 0 0 0 1-1V11m-27 0H16m21.5 0H43m-5.5 0H32m-16 0V7h16v4m-16 0h16M20 18v15m8-15v15\\\\\"></path></svg></span></span></span>\n          <!---->\n        </div>\n        <div class=\\\\\"arco-upload-list-item arco-upload-list-item-done\\\\\">\n          <div class=\\\\\"arco-upload-list-item-content\\\\\">\n            <!---->\n            <div class=\\\\\"arco-upload-list-item-name\\\\\"><span class=\\\\\"arco-upload-list-item-file-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-file-image\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"m26 33 5-6v6h-5Zm0 0-3-4-4 4h7Zm11 9H11a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h21l7 7v27a2 2 0 0 1-2 2ZM17 19h1v1h-1v-1Z\\\\\"></path></svg></span><a class=\\\\\"arco-upload-list-item-name-link\\\\\" target=\\\\\"_blank\\\\\" href=\\\\\"//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp\\\\\">ice.png</a>\n              <!---->\n            </div><span class=\\\\\"arco-upload-progress\\\\\"><!----><span class=\\\\\"arco-upload-icon arco-upload-icon-success\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-check\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M41.678 11.05 19.05 33.678 6.322 20.95\\\\\"></path></svg></span></span>\n          </div><span class=\\\\\"arco-upload-list-item-operation\\\\\"><span class=\\\\\"arco-icon-hover\\\\\"><span class=\\\\\"arco-upload-icon arco-upload-icon-remove\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-delete\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M5 11h5.5m0 0v29a1 1 0 0 0 1 1h25a1 1 0 0 0 1-1V11m-27 0H16m21.5 0H43m-5.5 0H32m-16 0V7h16v4m-16 0h16M20 18v15m8-15v15\\\\\"></path></svg></span></span></span>\n          <!---->\n        </div>\n        <!---->\n      </transition-group-stub>\n    </div>\n  </div>\n</div>\"\n`;\n\nexports[`<upload> demo: render [before-upload] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-vertical\\\\\" style=\\\\\"column-gap: 8px; row-gap: 8px; width: 100%;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-upload-wrapper arco-upload-wrapper-type-text\\\\\">\n      <!----><span class=\\\\\"arco-upload\\\\\"><input type=\\\\\"file\\\\\" style=\\\\\"display: none;\\\\\"><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\"><span class=\\\\\"arco-btn-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-upload\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M14.93 17.071 24.001 8l9.071 9.071m-9.07 16.071v-25M40 35v6H8v-6\\\\\"></path></svg></span>点击上传</button></span>\n      <transition-group-stub tag=\\\\\"div\\\\\" appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\" class=\\\\\"arco-upload-list arco-upload-list-type-text\\\\\">\n        <!---->\n      </transition-group-stub>\n    </div>\n  </div>\n</div>\"\n`;\n\nexports[`<upload> demo: render [custom-button] correctly 1`] = `\n\"<div class=\\\\\"arco-upload-wrapper arco-upload-wrapper-type-text\\\\\">\n  <!----><span class=\\\\\"arco-upload\\\\\"><input type=\\\\\"file\\\\\" style=\\\\\"display: none;\\\\\"><span><div style=\\\\\"height: 158px; width: 380px; border-radius: 2; line-height: 158px; text-align: center;\\\\\"><div> Drag the file here or <span style=\\\\\"color: rgb(51, 112, 255);\\\\\"> Click to upload</span>\n</div>\n</div></span></span>\n<transition-group-stub tag=\\\\\"div\\\\\" appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\" class=\\\\\"arco-upload-list arco-upload-list-type-text\\\\\">\n  <!---->\n</transition-group-stub>\n</div>\"\n`;\n\nexports[`<upload> demo: render [custom-icon] correctly 1`] = `\n\"<div>\n  <div style=\\\\\"margin-bottom: 20px;\\\\\">\n    <div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 8px; row-gap: 8px;\\\\\">\n      <!---->\n      <div class=\\\\\"arco-space-item\\\\\"><span>Type: </span></div>\n      <!---->\n      <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-radio-group arco-radio-group-size-medium arco-radio-group-direction-horizontal\\\\\"><label class=\\\\\"arco-radio arco-radio-checked\\\\\"><input type=\\\\\"radio\\\\\" checked=\\\\\"\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"text\\\\\"><span class=\\\\\"arco-icon-hover arco-icon-hover-disabled arco-radio-icon-hover\\\\\"><span class=\\\\\"arco-radio-icon\\\\\"></span></span><span class=\\\\\"arco-radio-label\\\\\">text</span></label><label class=\\\\\"arco-radio\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"picture\\\\\"><span class=\\\\\"arco-icon-hover arco-radio-icon-hover\\\\\"><span class=\\\\\"arco-radio-icon\\\\\"></span></span><span class=\\\\\"arco-radio-label\\\\\">picture</span></label><label class=\\\\\"arco-radio\\\\\"><input type=\\\\\"radio\\\\\" class=\\\\\"arco-radio-target\\\\\" value=\\\\\"picture-card\\\\\"><span class=\\\\\"arco-icon-hover arco-radio-icon-hover\\\\\"><span class=\\\\\"arco-radio-icon\\\\\"></span></span><span class=\\\\\"arco-radio-label\\\\\">picture-card</span></label></span></div>\n    </div>\n  </div>\n  <div class=\\\\\"arco-upload-wrapper arco-upload-wrapper-type-text\\\\\">\n    <!----><span class=\\\\\"arco-upload\\\\\"><input type=\\\\\"file\\\\\" style=\\\\\"display: none;\\\\\"><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\"><span class=\\\\\"arco-btn-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-upload\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M14.93 17.071 24.001 8l9.071 9.071m-9.07 16.071v-25M40 35v6H8v-6\\\\\"></path></svg></span>点击上传</button></span>\n    <transition-group-stub tag=\\\\\"div\\\\\" appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\" class=\\\\\"arco-upload-list arco-upload-list-type-text\\\\\">\n      <div class=\\\\\"arco-upload-list-item arco-upload-list-item-done\\\\\">\n        <div class=\\\\\"arco-upload-list-item-content\\\\\">\n          <!---->\n          <div class=\\\\\"arco-upload-list-item-name\\\\\"><span class=\\\\\"arco-upload-list-item-file-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-file-audio\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M37 42H11a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h21l7 7v27a2 2 0 0 1-2 2Z\\\\\"></path><path d=\\\\\"M25 30a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path><path d=\\\\\"M25 30a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm0 0-.951-12.363a.5.5 0 0 1 .58-.532L30 18\\\\\"></path></svg></span><a class=\\\\\"arco-upload-list-item-name-link\\\\\" target=\\\\\"_blank\\\\\" href=\\\\\"//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp\\\\\">文件名： ice.png</a>\n            <!---->\n          </div><span class=\\\\\"arco-upload-progress\\\\\"><!----><span class=\\\\\"arco-upload-icon arco-upload-icon-success\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-check\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M41.678 11.05 19.05 33.678 6.322 20.95\\\\\"></path></svg></span></span>\n        </div><span class=\\\\\"arco-upload-list-item-operation\\\\\"><span class=\\\\\"arco-icon-hover\\\\\"><span class=\\\\\"arco-upload-icon arco-upload-icon-remove\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-close\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M9.857 9.858 24 24m0 0 14.142 14.142M24 24 38.142 9.858M24 24 9.857 38.142\\\\\"></path></svg></span></span></span>\n        <!---->\n      </div>\n      <div class=\\\\\"arco-upload-list-item arco-upload-list-item-done\\\\\">\n        <div class=\\\\\"arco-upload-list-item-content\\\\\">\n          <!---->\n          <div class=\\\\\"arco-upload-list-item-name\\\\\"><span class=\\\\\"arco-upload-list-item-file-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-file-audio\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M37 42H11a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h21l7 7v27a2 2 0 0 1-2 2Z\\\\\"></path><path d=\\\\\"M25 30a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path><path d=\\\\\"M25 30a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm0 0-.951-12.363a.5.5 0 0 1 .58-.532L30 18\\\\\"></path></svg></span><a class=\\\\\"arco-upload-list-item-name-link\\\\\" target=\\\\\"_blank\\\\\" href=\\\\\"//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a8c8cdb109cb051163646151a4a5083b.png~tplv-uwbnlip3yd-webp.webp\\\\\">文件名： light.png</a>\n            <!---->\n          </div><span class=\\\\\"arco-upload-progress\\\\\"><!----><span class=\\\\\"arco-upload-icon arco-upload-icon-success\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-check\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M41.678 11.05 19.05 33.678 6.322 20.95\\\\\"></path></svg></span></span>\n        </div><span class=\\\\\"arco-upload-list-item-operation\\\\\"><span class=\\\\\"arco-icon-hover\\\\\"><span class=\\\\\"arco-upload-icon arco-upload-icon-remove\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-close\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M9.857 9.858 24 24m0 0 14.142 14.142M24 24 38.142 9.858M24 24 9.857 38.142\\\\\"></path></svg></span></span></span>\n        <!---->\n      </div>\n      <!---->\n    </transition-group-stub>\n  </div>\n</div>\"\n`;\n\nexports[`<upload> demo: render [directory] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-vertical\\\\\" style=\\\\\"column-gap: 8px; row-gap: 8px; width: 100%;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-upload-wrapper arco-upload-wrapper-type-text\\\\\">\n      <!----><span class=\\\\\"arco-upload\\\\\"><input type=\\\\\"file\\\\\" style=\\\\\"display: none;\\\\\" webkitdirectory=\\\\\"webkitdirectory\\\\\"><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\"><span class=\\\\\"arco-btn-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-upload\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M14.93 17.071 24.001 8l9.071 9.071m-9.07 16.071v-25M40 35v6H8v-6\\\\\"></path></svg></span>点击上传</button></span>\n      <transition-group-stub tag=\\\\\"div\\\\\" appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\" class=\\\\\"arco-upload-list arco-upload-list-type-text\\\\\">\n        <!---->\n      </transition-group-stub>\n    </div>\n  </div>\n</div>\"\n`;\n\nexports[`<upload> demo: render [draggable] correctly 1`] = `\n\"<div class=\\\\\"arco-upload-wrapper arco-upload-wrapper-type-text\\\\\">\n  <!----><span class=\\\\\"arco-upload arco-upload-draggable\\\\\"><input type=\\\\\"file\\\\\" style=\\\\\"display: none;\\\\\"><div class=\\\\\"arco-upload-drag\\\\\"><div><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-plus\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M5 24h38M24 5v38\\\\\"></path></svg></div><div class=\\\\\"arco-upload-drag-text\\\\\">点击或拖拽文件到此处上传</div><!----></div></span>\n  <transition-group-stub tag=\\\\\"div\\\\\" appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\" class=\\\\\"arco-upload-list arco-upload-list-type-text\\\\\">\n    <!---->\n  </transition-group-stub>\n</div>\"\n`;\n\nexports[`<upload> demo: render [limit] correctly 1`] = `\n\"<div class=\\\\\"arco-upload-wrapper arco-upload-wrapper-type-text\\\\\">\n  <!----><span class=\\\\\"arco-upload\\\\\"><input type=\\\\\"file\\\\\" style=\\\\\"display: none;\\\\\" multiple=\\\\\"\\\\\"><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\"><span class=\\\\\"arco-btn-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-upload\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M14.93 17.071 24.001 8l9.071 9.071m-9.07 16.071v-25M40 35v6H8v-6\\\\\"></path></svg></span>点击上传</button></span>\n  <transition-group-stub tag=\\\\\"div\\\\\" appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\" class=\\\\\"arco-upload-list arco-upload-list-type-text\\\\\">\n    <!---->\n  </transition-group-stub>\n</div>\"\n`;\n\nexports[`<upload> demo: render [picture-card] correctly 1`] = `\n\"<div class=\\\\\"arco-upload-wrapper arco-upload-wrapper-type-picture-card\\\\\">\n  <!--teleport start-->\n  <!--teleport end-->\n  <!---->\n  <transition-group-stub tag=\\\\\"div\\\\\" appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\" class=\\\\\"arco-upload-list arco-upload-list-type-picture-card\\\\\"><span class=\\\\\"arco-upload-list-picture\\\\\"><img src=\\\\\"//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a8c8cdb109cb051163646151a4a5083b.png~tplv-uwbnlip3yd-webp.webp\\\\\" alt=\\\\\"20200717-103937.png\\\\\"><div class=\\\\\"arco-upload-list-picture-mask\\\\\"><!----><div class=\\\\\"arco-upload-list-picture-operation\\\\\"><span class=\\\\\"arco-upload-icon arco-upload-icon-preview\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-eye\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path clip-rule=\\\\\"evenodd\\\\\" d=\\\\\"M24 37c6.627 0 12.627-4.333 18-13-5.373-8.667-11.373-13-18-13-6.627 0-12.627 4.333-18 13 5.373 8.667 11.373 13 18 13Z\\\\\"></path><path d=\\\\\"M29 24a5 5 0 1 1-10 0 5 5 0 0 1 10 0Z\\\\\"></path></svg></span>\n    <!----><span class=\\\\\"arco-upload-icon arco-upload-icon-remove\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-delete\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M5 11h5.5m0 0v29a1 1 0 0 0 1 1h25a1 1 0 0 0 1-1V11m-27 0H16m21.5 0H43m-5.5 0H32m-16 0V7h16v4m-16 0h16M20 18v15m8-15v15\\\\\"></path></svg></span>\n    <!---->\n</div>\n</div></span><span class=\\\\\"arco-upload-list-picture\\\\\"><img src=\\\\\"//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/e278888093bef8910e829486fb45dd69.png~tplv-uwbnlip3yd-webp.webp\\\\\" alt=\\\\\"hahhahahahaha.png\\\\\"><div class=\\\\\"arco-upload-list-picture-mask\\\\\"><!----><div class=\\\\\"arco-upload-list-picture-operation\\\\\"><span class=\\\\\"arco-upload-icon arco-upload-icon-preview\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-eye\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path clip-rule=\\\\\"evenodd\\\\\" d=\\\\\"M24 37c6.627 0 12.627-4.333 18-13-5.373-8.667-11.373-13-18-13-6.627 0-12.627 4.333-18 13 5.373 8.667 11.373 13 18 13Z\\\\\"></path><path d=\\\\\"M29 24a5 5 0 1 1-10 0 5 5 0 0 1 10 0Z\\\\\"></path></svg></span>\n<!----><span class=\\\\\"arco-upload-icon arco-upload-icon-remove\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-delete\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M5 11h5.5m0 0v29a1 1 0 0 0 1 1h25a1 1 0 0 0 1-1V11m-27 0H16m21.5 0H43m-5.5 0H32m-16 0V7h16v4m-16 0h16M20 18v15m8-15v15\\\\\"></path></svg></span>\n<!---->\n</div>\n</div></span><span class=\\\\\"arco-upload arco-upload-type-picture-card\\\\\"><input type=\\\\\"file\\\\\" style=\\\\\"display: none;\\\\\" accept=\\\\\"image/*\\\\\"><div class=\\\\\"arco-upload-picture-card\\\\\"><div class=\\\\\"arco-upload-picture-card-text\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-plus\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M5 24h38M24 5v38\\\\\"></path></svg></div><!----></div></span></transition-group-stub>\n</div>\"\n`;\n\nexports[`<upload> demo: render [picture-list] correctly 1`] = `\n\"<div class=\\\\\"arco-upload-wrapper arco-upload-wrapper-type-picture\\\\\">\n  <!----><span class=\\\\\"arco-upload\\\\\"><input type=\\\\\"file\\\\\" style=\\\\\"display: none;\\\\\" accept=\\\\\"image/*\\\\\"><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\"><span class=\\\\\"arco-btn-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-upload\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M14.93 17.071 24.001 8l9.071 9.071m-9.07 16.071v-25M40 35v6H8v-6\\\\\"></path></svg></span>点击上传</button></span>\n  <transition-group-stub tag=\\\\\"div\\\\\" appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\" class=\\\\\"arco-upload-list arco-upload-list-type-picture\\\\\">\n    <div class=\\\\\"arco-upload-list-item arco-upload-list-item-done\\\\\">\n      <div class=\\\\\"arco-upload-list-item-content\\\\\"><span class=\\\\\"arco-upload-list-item-thumbnail\\\\\"><img src=\\\\\"//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a8c8cdb109cb051163646151a4a5083b.png~tplv-uwbnlip3yd-webp.webp\\\\\" alt=\\\\\"20200717-103937.png\\\\\"></span>\n        <div class=\\\\\"arco-upload-list-item-name\\\\\">\n          <!----><a class=\\\\\"arco-upload-list-item-name-link\\\\\" target=\\\\\"_blank\\\\\" href=\\\\\"//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a8c8cdb109cb051163646151a4a5083b.png~tplv-uwbnlip3yd-webp.webp\\\\\">20200717-103937.png</a>\n          <!---->\n        </div><span class=\\\\\"arco-upload-progress\\\\\"><!----><span class=\\\\\"arco-upload-icon arco-upload-icon-success\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-check\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M41.678 11.05 19.05 33.678 6.322 20.95\\\\\"></path></svg></span></span>\n      </div><span class=\\\\\"arco-upload-list-item-operation\\\\\"><span class=\\\\\"arco-icon-hover\\\\\"><span class=\\\\\"arco-upload-icon arco-upload-icon-remove\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-delete\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M5 11h5.5m0 0v29a1 1 0 0 0 1 1h25a1 1 0 0 0 1-1V11m-27 0H16m21.5 0H43m-5.5 0H32m-16 0V7h16v4m-16 0h16M20 18v15m8-15v15\\\\\"></path></svg></span></span></span>\n      <!---->\n    </div>\n    <div class=\\\\\"arco-upload-list-item arco-upload-list-item-done\\\\\">\n      <div class=\\\\\"arco-upload-list-item-content\\\\\"><span class=\\\\\"arco-upload-list-item-thumbnail\\\\\"><img src=\\\\\"//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/e278888093bef8910e829486fb45dd69.png~tplv-uwbnlip3yd-webp.webp\\\\\" alt=\\\\\"hahhahahahaha.png\\\\\"></span>\n        <div class=\\\\\"arco-upload-list-item-name\\\\\">\n          <!----><a class=\\\\\"arco-upload-list-item-name-link\\\\\" target=\\\\\"_blank\\\\\" href=\\\\\"//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/e278888093bef8910e829486fb45dd69.png~tplv-uwbnlip3yd-webp.webp\\\\\">hahhahahahaha.png</a>\n          <!---->\n        </div><span class=\\\\\"arco-upload-progress\\\\\"><!----><span class=\\\\\"arco-upload-icon arco-upload-icon-success\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-check\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M41.678 11.05 19.05 33.678 6.322 20.95\\\\\"></path></svg></span></span>\n      </div><span class=\\\\\"arco-upload-list-item-operation\\\\\"><span class=\\\\\"arco-icon-hover\\\\\"><span class=\\\\\"arco-upload-icon arco-upload-icon-remove\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-delete\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M5 11h5.5m0 0v29a1 1 0 0 0 1 1h25a1 1 0 0 0 1-1V11m-27 0H16m21.5 0H43m-5.5 0H32m-16 0V7h16v4m-16 0h16M20 18v15m8-15v15\\\\\"></path></svg></span></span></span>\n      <!---->\n    </div>\n    <!---->\n  </transition-group-stub>\n</div>\"\n`;\n\nexports[`<upload> demo: render [request] correctly 1`] = `\n\"<div class=\\\\\"arco-upload-wrapper arco-upload-wrapper-type-text\\\\\">\n  <!----><span class=\\\\\"arco-upload\\\\\"><input type=\\\\\"file\\\\\" style=\\\\\"display: none;\\\\\"><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\"><span class=\\\\\"arco-btn-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-upload\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M14.93 17.071 24.001 8l9.071 9.071m-9.07 16.071v-25M40 35v6H8v-6\\\\\"></path></svg></span>点击上传</button></span>\n  <transition-group-stub tag=\\\\\"div\\\\\" appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\" class=\\\\\"arco-upload-list arco-upload-list-type-text\\\\\">\n    <!---->\n  </transition-group-stub>\n</div>\"\n`;\n\nexports[`<upload> demo: render [submit] correctly 1`] = `\n\"<div>\n  <div class=\\\\\"arco-upload-wrapper arco-upload-wrapper-type-text\\\\\">\n    <!----><span class=\\\\\"arco-upload\\\\\"><input type=\\\\\"file\\\\\" style=\\\\\"display: none;\\\\\" multiple=\\\\\"\\\\\"><span><div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 8px; row-gap: 8px;\\\\\"><!----><div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\"><!--v-if--> select file</button></div><!----><div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\"><!--v-if--> start upload</button></div><!----><div class=\\\\\"arco-space-item\\\\\"><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\"><!--v-if--> only upload one </button></div></div></span></span>\n    <transition-group-stub tag=\\\\\"div\\\\\" appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\" class=\\\\\"arco-upload-list arco-upload-list-type-text\\\\\">\n      <!---->\n    </transition-group-stub>\n  </div>\n</div>\"\n`;\n\nexports[`<upload> demo: render [upload-list] correctly 1`] = `\n\"<div class=\\\\\"arco-upload-wrapper arco-upload-wrapper-type-text\\\\\">\n  <!----><span class=\\\\\"arco-upload\\\\\"><input type=\\\\\"file\\\\\" style=\\\\\"display: none;\\\\\"><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal\\\\\" type=\\\\\"button\\\\\"><span class=\\\\\"arco-btn-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-upload\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M14.93 17.071 24.001 8l9.071 9.071m-9.07 16.071v-25M40 35v6H8v-6\\\\\"></path></svg></span>点击上传</button></span>\n  <transition-group-stub tag=\\\\\"div\\\\\" appear=\\\\\"false\\\\\" persisted=\\\\\"false\\\\\" css=\\\\\"true\\\\\" class=\\\\\"arco-upload-list arco-upload-list-type-text\\\\\">\n    <div class=\\\\\"arco-upload-list-item arco-upload-list-item-done\\\\\">\n      <div class=\\\\\"arco-upload-list-item-content\\\\\">\n        <!---->\n        <div class=\\\\\"arco-upload-list-item-name\\\\\"><span class=\\\\\"arco-upload-list-item-file-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-file-image\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"m26 33 5-6v6h-5Zm0 0-3-4-4 4h7Zm11 9H11a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h21l7 7v27a2 2 0 0 1-2 2ZM17 19h1v1h-1v-1Z\\\\\"></path></svg></span><a class=\\\\\"arco-upload-list-item-name-link\\\\\" target=\\\\\"_blank\\\\\" href=\\\\\"//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp\\\\\">ice.png</a>\n          <!---->\n        </div><span class=\\\\\"arco-upload-progress\\\\\"><!----><span class=\\\\\"arco-upload-icon arco-upload-icon-success\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-check\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M41.678 11.05 19.05 33.678 6.322 20.95\\\\\"></path></svg></span></span>\n      </div><span class=\\\\\"arco-upload-list-item-operation\\\\\"><span class=\\\\\"arco-icon-hover\\\\\"><span class=\\\\\"arco-upload-icon arco-upload-icon-remove\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-delete\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M5 11h5.5m0 0v29a1 1 0 0 0 1 1h25a1 1 0 0 0 1-1V11m-27 0H16m21.5 0H43m-5.5 0H32m-16 0V7h16v4m-16 0h16M20 18v15m8-15v15\\\\\"></path></svg></span></span></span>\n      <!---->\n    </div>\n    <div class=\\\\\"arco-upload-list-item arco-upload-list-item-error\\\\\">\n      <div class=\\\\\"arco-upload-list-item-content\\\\\">\n        <!---->\n        <div class=\\\\\"arco-upload-list-item-name\\\\\"><span class=\\\\\"arco-upload-list-item-file-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-file-image\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"m26 33 5-6v6h-5Zm0 0-3-4-4 4h7Zm11 9H11a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h21l7 7v27a2 2 0 0 1-2 2ZM17 19h1v1h-1v-1Z\\\\\"></path></svg></span><a class=\\\\\"arco-upload-list-item-name-link\\\\\" target=\\\\\"_blank\\\\\" href=\\\\\"//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/e278888093bef8910e829486fb45dd69.png~tplv-uwbnlip3yd-webp.webp\\\\\">cat.png</a><span class=\\\\\"arco-upload-icon arco-upload-icon-error\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-exclamation-circle-fill\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path fill-rule=\\\\\"evenodd\\\\\" clip-rule=\\\\\"evenodd\\\\\" d=\\\\\"M24 44c11.046 0 20-8.954 20-20S35.046 4 24 4 4 12.954 4 24s8.954 20 20 20Zm-2-11a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1v2Zm4-18a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V15Z\\\\\" fill=\\\\\"currentColor\\\\\" stroke=\\\\\"none\\\\\"></path></svg></span>\n          <!---->\n        </div><span class=\\\\\"arco-upload-progress\\\\\"><!----><span class=\\\\\"arco-upload-icon arco-upload-icon-upload\\\\\">点击重试</span></span>\n      </div><span class=\\\\\"arco-upload-list-item-operation\\\\\"><span class=\\\\\"arco-icon-hover\\\\\"><span class=\\\\\"arco-upload-icon arco-upload-icon-remove\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-delete\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M5 11h5.5m0 0v29a1 1 0 0 0 1 1h25a1 1 0 0 0 1-1V11m-27 0H16m21.5 0H43m-5.5 0H32m-16 0V7h16v4m-16 0h16M20 18v15m8-15v15\\\\\"></path></svg></span></span></span>\n      <!---->\n    </div>\n    <div class=\\\\\"arco-upload-list-item arco-upload-list-item-done\\\\\">\n      <div class=\\\\\"arco-upload-list-item-content\\\\\">\n        <!---->\n        <div class=\\\\\"arco-upload-list-item-name\\\\\"><span class=\\\\\"arco-upload-list-item-file-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-file-image\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"m26 33 5-6v6h-5Zm0 0-3-4-4 4h7Zm11 9H11a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h21l7 7v27a2 2 0 0 1-2 2ZM17 19h1v1h-1v-1Z\\\\\"></path></svg></span><a class=\\\\\"arco-upload-list-item-name-link\\\\\" target=\\\\\"_blank\\\\\" href=\\\\\"//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a8c8cdb109cb051163646151a4a5083b.png~tplv-uwbnlip3yd-webp.webp\\\\\">light.png</a>\n          <!---->\n        </div><span class=\\\\\"arco-upload-progress\\\\\"><!----><span class=\\\\\"arco-upload-icon arco-upload-icon-success\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-check\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M41.678 11.05 19.05 33.678 6.322 20.95\\\\\"></path></svg></span></span>\n      </div><span class=\\\\\"arco-upload-list-item-operation\\\\\"><span class=\\\\\"arco-icon-hover\\\\\"><span class=\\\\\"arco-upload-icon arco-upload-icon-remove\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-delete\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M5 11h5.5m0 0v29a1 1 0 0 0 1 1h25a1 1 0 0 0 1-1V11m-27 0H16m21.5 0H43m-5.5 0H32m-16 0V7h16v4m-16 0h16M20 18v15m8-15v15\\\\\"></path></svg></span></span></span>\n      <!---->\n    </div>\n    <!---->\n  </transition-group-stub>\n</div>\"\n`;\n"
  },
  {
    "path": "packages/web-vue/components/upload/__test__/demo.test.ts",
    "content": "import demoTest from '../../../scripts/demo-test';\n\ndemoTest('upload');\n"
  },
  {
    "path": "packages/web-vue/components/upload/context.ts",
    "content": "import type { InjectionKey, Slots } from 'vue';\nimport { CustomIcon, FileItem, ListType } from './interfaces';\n\nexport interface UploadContext {\n  listType?: ListType;\n  disabled?: boolean;\n  iconCls?: string;\n  customIcon?: CustomIcon;\n  showRemoveButton?: boolean;\n  showRetryButton?: boolean;\n  showCancelButton?: boolean;\n  showPreviewButton?: boolean;\n  showLink?: boolean;\n  imageLoading?: 'eager' | 'lazy';\n  download?: boolean;\n  slots: Slots;\n  onRemove: (fileItem: FileItem) => void;\n  onAbort: (fileItem: FileItem) => void;\n  onUpload: (fileItem: FileItem) => void;\n  onPreview: (fileItem: FileItem) => void;\n}\n\nexport const uploadInjectionKey: InjectionKey<UploadContext> =\n  Symbol('ArcoUpload');\n"
  },
  {
    "path": "packages/web-vue/components/upload/index.ts",
    "content": "import type { App } from 'vue';\nimport type { ArcoOptions } from '../_utils/types';\nimport { setGlobalConfig, getComponentPrefix } from '../_utils/global-config';\nimport _Upload from './upload';\n\nconst Upload = Object.assign(_Upload, {\n  install: (app: App, options?: ArcoOptions) => {\n    setGlobalConfig(app, options);\n    const componentPrefix = getComponentPrefix(options);\n\n    app.component(componentPrefix + _Upload.name, _Upload);\n  },\n});\n\nexport type UploadInstance = InstanceType<typeof _Upload>;\n\nexport type {\n  FileStatus,\n  FileItem,\n  CustomIcon,\n  RequestOption,\n  UploadRequest,\n} from './interfaces';\n\nexport default Upload;\n"
  },
  {
    "path": "packages/web-vue/components/upload/interfaces.ts",
    "content": "import type { RenderFunction, VNode } from 'vue';\n\nexport type ListType = 'text' | 'picture' | 'picture-card';\n\nexport type FileStatus = 'init' | 'uploading' | 'done' | 'error';\n\nexport interface FileItem {\n  /**\n   * @zh 当前上传文件的唯一标示\n   * @en The unique identifier of the currently uploaded file\n   */\n  uid: string;\n  /**\n   * @zh 当前上传文件的状态\n   * @en The status of the currently uploaded file\n   */\n  status?: FileStatus;\n  /**\n   * @zh 文件对象\n   * @en File object\n   */\n  file?: File;\n  /**\n   * @zh 上传进度百分比\n   * @en Upload progress percentage\n   */\n  percent?: number;\n  /**\n   * @zh 当前文件上传请求返回的响应\n   * @en The response returned by the current file upload request\n   */\n  response?: any;\n  /**\n   * @zh 文件地址\n   * @en The file address\n   */\n  url?: string;\n  /**\n   * @zh 文件名\n   * @en The file name\n   */\n  name?: string;\n}\n\nexport interface CustomIcon {\n  /**\n   * @zh 开始图标\n   * @en Start icon\n   */\n  startIcon?: RenderFunction;\n  /**\n   * @zh 取消图标\n   * @en Cancel icon\n   */\n  cancelIcon?: RenderFunction;\n  /**\n   * @zh 重试图标\n   * @en Retry icon\n   */\n  retryIcon?: RenderFunction;\n\n  /**\n   * @zh 成功图标\n   * @en Success icon\n   */\n  successIcon?: RenderFunction;\n  /**\n   * @zh 失败图标\n   * @en Error icon\n   */\n  errorIcon?: RenderFunction;\n  /**\n   * @zh 移除图标\n   * @en Remove icon\n   */\n  removeIcon?: RenderFunction;\n  /**\n   * @zh 预览图标\n   * @en Preview icon\n   */\n  previewIcon?: RenderFunction;\n  /**\n   * @zh 文件图标\n   * @en File icon\n   * @param {FileItem} fileItem\n   */\n  fileIcon?: (fileItem: FileItem) => VNode;\n  /**\n   * @zh 文件名\n   * @en File name\n   * @param {FileItem} fileItem\n   */\n  fileName?: (fileItem: FileItem) => string | VNode;\n}\n\nexport interface RequestOption {\n  /**\n   * @zh 上传的URL\n   * @en Uploaded URL\n   * */\n  action?: string;\n  /**\n   * @zh 请求报文的头信息\n   * @en Header information of the request message\n   * */\n  headers?: Record<string, string>;\n  /**\n   * @zh 上传文件的文件名\n   * @en File name of the uploaded file\n   * */\n  name?: string | ((fileItem: FileItem) => string);\n  /**\n   * @zh 上传文件\n   * @en upload files\n   * */\n  fileItem: FileItem;\n  /**\n   * @zh 附加的请求信息\n   * @en Additional requested information\n   * */\n  data?:\n    | Record<string, string | Blob>\n    | ((fileItem: FileItem) => Record<string, string | Blob>);\n  /**\n   * @zh 是否携带cookie信息\n   * @en Whether to carry cookie information\n   * */\n  withCredentials?: boolean;\n  /**\n   * @zh 更新当前文件的上传进度。percent: 当前上传进度百分比\n   * @en Update the upload progress of the current file. percent: current upload progress percentage\n   * */\n  onProgress: (percent: number, event?: ProgressEvent) => void;\n  /**\n   * @zh 上传成功后，调用onSuccess方法，传入的response参数将会附加到当前上传文件的response字段上\n   * @en After the upload is successful, call the onSuccess method, the incoming response parameter will be appended to the response field of the currently uploaded file\n   * */\n  onSuccess: (response?: any) => void;\n  /**\n   * @zh 上传失败后，调用onError方法，传入的response参数将会附加到当前上传文件的response字段上\n   * @en After the upload fails, call the onError method, and the response parameter passed in will be appended to the response field of the currently uploaded file\n   * */\n  onError: (response?: any) => void;\n}\n\nexport interface UploadRequest extends Record<string, unknown> {\n  /**\n   * @zh 终止上传\n   * @en Terminate upload\n   * */\n  abort?: () => void;\n}\n"
  },
  {
    "path": "packages/web-vue/components/upload/style/index.less",
    "content": "@import './token.less';\n\n@upload-prefix-cls: ~'@{prefix}-upload';\n\n.@{upload-prefix-cls} {\n  display: inline-block;\n  max-width: 100%;\n  cursor: pointer;\n\n  &&-draggable {\n    width: 100%;\n  }\n\n  &-tip {\n    margin-top: @upload-tip-margin-top;\n    overflow: hidden;\n    color: @upload-tip-color-text;\n    font-size: @upload-tip-font-size;\n    line-height: 1.5;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n  }\n\n  &-picture-card {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    min-width: @upload-picture-item-width;\n    height: @upload-picture-item-width;\n    margin-bottom: 0;\n    color: @upload-picture-color-text;\n    text-align: center;\n    background: @upload-picture-color-bg;\n    border: @upload-picture-border-width @upload-picture-border-style\n      @upload-picture-color-border;\n    border-radius: @upload-picture-border-radius;\n    transition: all @transition-duration-1 @transition-timing-function-linear;\n\n    &:hover {\n      color: @upload-picture-color-text_hover;\n      background-color: @upload-picture-color-bg_hover;\n      border-color: @upload-picture-color-border_hover;\n    }\n  }\n\n  &-drag {\n    width: 100%;\n    padding: @upload-drag-padding-vertical 0;\n    color: @upload-drag-color-text;\n    text-align: center;\n    background-color: @upload-drag-color-bg;\n    border: @upload-drag-border-width @upload-drag-border-style\n      @upload-drag-color-border;\n    border-radius: @upload-drag-border-radius;\n    transition: all @transition-duration-2 ease;\n\n    .@{prefix}-icon-plus {\n      margin-bottom: @upload-drag-margin-icon-bottom;\n      color: @upload-drag-color-icon;\n      font-size: @upload-drag-size-icon;\n    }\n\n    &:hover {\n      background-color: @upload-drag-color-bg_hover;\n      border-color: @upload-drag-color-border_hover;\n\n      .@{upload-prefix-cls}-drag-text {\n        color: @upload-drag-color-text_hover;\n      }\n\n      .@{prefix}-icon-plus {\n        color: @upload-drag-color-icon_hover;\n      }\n    }\n\n    &-active {\n      color: @upload-drag-color-text_active;\n      background-color: @upload-drag-color-bg_active;\n      border-color: @upload-drag-color-border_active;\n\n      .@{upload-prefix-cls}-drag-text {\n        color: @upload-drag-color-text_active;\n      }\n\n      .@{prefix}-icon-plus {\n        color: @upload-drag-color-icon_active;\n      }\n    }\n\n    .@{upload-prefix-cls}-tip {\n      margin-top: @upload-drag-tip-margin-top;\n    }\n  }\n\n  &-drag-text {\n    color: @upload-drag-color-text;\n    font-size: @upload-drag-font-size;\n    line-height: 1.5;\n  }\n\n  &-wrapper {\n    width: 100%;\n\n    &&-type-picture-card {\n      display: flex;\n      justify-content: flex-start;\n    }\n  }\n\n  &-drag {\n    width: 100%;\n  }\n\n  &-hide {\n    display: none;\n  }\n\n  &-disabled {\n    .@{upload-prefix-cls}-picture-card,\n    .@{upload-prefix-cls}-picture-card:hover {\n      color: @upload-picture-color-text_disabled;\n      background-color: @upload-picture-color-bg_disabled;\n      border-color: @upload-picture-color-border_disabled;\n      cursor: not-allowed;\n    }\n\n    .@{upload-prefix-cls}-drag,\n    .@{upload-prefix-cls}-drag:hover {\n      background-color: @upload-drag-color-bg_disabled;\n      border-color: @upload-drag-color-border_disabled;\n      cursor: not-allowed;\n\n      .@{prefix}-icon-plus,\n      .@{upload-prefix-cls}-drag-text {\n        color: @upload-drag-color-text_disabled;\n      }\n    }\n\n    .@{upload-prefix-cls}-tip {\n      color: @upload-drag-color-text_disabled;\n    }\n  }\n}\n\n.@{upload-prefix-cls}-icon {\n  cursor: pointer;\n\n  &-error {\n    margin-left: @upload-text-item-margin-error-icon-left;\n    color: @upload-text-item-color-error-icon;\n  }\n\n  &-success {\n    color: @upload-text-item-color-success-icon;\n    font-size: @upload-text-item-size-success-icon;\n    line-height: @upload-text-item-size-success-icon;\n  }\n\n  &-remove {\n    position: relative;\n    font-size: @upload-picture-item-size-operation-icon;\n  }\n\n  &-start,\n  &-cancel {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    color: @upload-text-item-color-status-icon;\n    font-size: @upload-text-item-size-status-icon;\n    transform: translateX(-50%) translateY(-50%);\n  }\n\n  &-upload {\n    color: @upload-text-item-color-reupload-icon;\n    font-size: @upload-text-item-size-reupload-icon;\n    cursor: pointer;\n    transition: all @transition-duration-2 ease;\n\n    &:active,\n    &:hover {\n      color: @upload-text-item-color-reupload-icon_hover;\n    }\n  }\n}\n\n.@{upload-prefix-cls}-list {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n\n  &&-type-text,\n  &&-type-picture {\n    width: 100%;\n\n    .@{upload-prefix-cls}-list-item:first-of-type {\n      margin-top: @upload-list-margin-top;\n    }\n  }\n\n  /*** listtype is text ****/\n  &-item-done &-item-file-icon {\n    color: @upload-text-item-color-file-icon_success;\n  }\n\n  &-item {\n    position: relative;\n    display: flex;\n    align-items: center;\n    box-sizing: border-box;\n    margin-top: @upload-text-item-margin-top;\n\n    &-content {\n      display: flex;\n      flex: 1;\n      flex-wrap: nowrap;\n      align-items: center;\n      box-sizing: border-box;\n      width: 100%;\n      padding: @upload-text-item-padding-vertical 0;\n      padding-right: @upload-text-item-padding-right;\n      padding-left: @upload-text-item-padding-left;\n      overflow: hidden;\n      font-size: @upload-text-item-font-size;\n      background-color: @upload-text-item-color-bg;\n      border-radius: @upload-text-item-border-radius;\n      transition: background-color @transition-duration-1\n        @transition-timing-function-linear;\n    }\n\n    &-file-icon {\n      margin-right: @upload-text-item-margin-file-icon-right;\n      color: @upload-text-item-color-file-icon;\n      font-size: @upload-text-item-size-file-icon;\n      line-height: @upload-text-item-size-file-icon;\n    }\n\n    &-thumbnail {\n      flex-shrink: 0;\n      width: @upload-text-item-thumbnail-width;\n      height: @upload-text-item-thumbnail-width;\n      margin-right: @upload-text-item-margin-thumbnail-right;\n\n      img {\n        width: 100%;\n        height: 100%;\n      }\n    }\n\n    &-name {\n      display: flex;\n      flex: 1;\n      align-items: center;\n      margin-right: @upload-text-item-margin-status-left;\n      overflow: hidden;\n      color: @upload-text-item-color-text;\n      font-size: @upload-text-item-font-size;\n      line-height: 1.4286;\n      white-space: nowrap;\n      text-overflow: ellipsis;\n\n      &-link {\n        overflow: hidden;\n        color: @upload-text-item-color-link;\n        text-decoration: none;\n        text-overflow: ellipsis;\n        cursor: pointer;\n      }\n\n      &-text {\n        overflow: hidden;\n        text-overflow: ellipsis;\n        cursor: pointer;\n      }\n    }\n\n    & .@{upload-prefix-cls}-progress {\n      position: relative;\n      margin-left: auto;\n      line-height: @upload-text-item-size-status-icon;\n\n      &:hover {\n        .@{prefix}-progress-circle-bg {\n          stroke: @upload-text-item-color-progress-bg_hover;\n        }\n\n        .@{prefix}-progress-circle-bar {\n          stroke: @upload-text-item-color-progress-bg_hover_active;\n        }\n      }\n    }\n\n    &-operation {\n      margin-left: @upload-text-item-margin-remove-icon-left;\n      color: @upload-text-item-color-remove-icon;\n      font-size: @upload-text-item-size-operation-icon;\n\n      .@{upload-prefix-cls}-icon-remove {\n        font-size: inherit;\n      }\n    }\n  }\n\n  &-item-error,\n  &-item-done {\n    .@{upload-prefix-cls}-list-status {\n      display: none;\n    }\n  }\n\n  &-type-text {\n    .@{upload-prefix-cls}-list-item-error\n      .@{upload-prefix-cls}-list-item-name-link,\n    .@{upload-prefix-cls}-list-item-error .@{upload-prefix-cls}-list-item-name {\n      color: @upload-text-item-color-text_error;\n    }\n\n    .@{upload-prefix-cls}-list-item-done\n      .@{upload-prefix-cls}-list-item-name\n      when\n      not(@upload-text-item-color-text_success = unset) {\n      color: @upload-text-item-color-text_success;\n    }\n\n    .@{upload-prefix-cls}-list-item-uploading\n      .@{upload-prefix-cls}-list-item-name\n      when\n      not(@upload-text-item-color-text_uploading = unset) {\n      color: @upload-text-item-color-text_uploading;\n    }\n  }\n\n  /*** end ****/\n  &&-type-picture-card {\n    display: flex;\n    flex-wrap: wrap;\n    vertical-align: top;\n\n    .@{upload-prefix-cls}-list-status {\n      top: 50%;\n      margin-left: 0;\n      transform: translateY(-50%);\n    }\n  }\n\n  &-picture {\n    display: inline-block;\n    margin-top: 0;\n    margin-right: @upload-picture-item-margin-right;\n    margin-bottom: @upload-picture-item-margin-bottom;\n    padding-right: 0;\n    overflow: hidden;\n    vertical-align: top;\n    transition: all @transition-duration-2 @transition-timing-function-standard;\n  }\n\n  &-picture-status-error &-picture-mask {\n    opacity: 1;\n  }\n\n  &-picture {\n    position: relative;\n    box-sizing: border-box;\n    width: @upload-picture-item-size-width;\n    height: @upload-picture-item-size-width;\n    overflow: hidden;\n    line-height: @upload-picture-item-size-width;\n    text-align: center;\n    vertical-align: top;\n    border-radius: @upload-picture-item-border-radius;\n\n    img {\n      width: 100%;\n      height: 100%;\n    }\n\n    &-mask {\n      position: absolute;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n      color: @upload-picture-item-color-operation-icon;\n      font-size: @upload-picture-item-size-mask-icon;\n      line-height: @upload-picture-item-size-width;\n      text-align: center;\n      background: @upload-picture-item-color-operation_bg;\n      cursor: pointer;\n      opacity: 0;\n      transition: opacity @transition-duration-1\n        @transition-timing-function-linear;\n    }\n\n    &-operation {\n      display: none;\n      font-size: @upload-picture-item-size-operation-icon;\n\n      .@{upload-prefix-cls}-icon-retry {\n        color: @upload-picture-item-color-operation-icon;\n      }\n    }\n\n    &-error-tip {\n      .@{upload-prefix-cls}-icon-error {\n        color: @upload-picture-item-color-error-icon;\n        font-size: @upload-picture-item-size-error-icon;\n      }\n    }\n\n    &-mask:hover {\n      opacity: 1;\n    }\n\n    &-mask:hover &-operation {\n      display: flex;\n      justify-content: space-evenly;\n    }\n\n    &-mask:hover &-error-tip {\n      display: none;\n    }\n  }\n\n  // picture-list\n  &-type-picture {\n    .@{upload-prefix-cls}-list-item-content {\n      padding-top: @upload-picture-text-item-padding-vertical;\n      padding-bottom: @upload-picture-text-item-padding-vertical;\n    }\n\n    .@{upload-prefix-cls}-list-item-error\n      .@{upload-prefix-cls}-list-item-content {\n      background-color: @upload-picture-text-item-color-bg_error;\n    }\n\n    .@{upload-prefix-cls}-list-item-error\n      .@{upload-prefix-cls}-list-item-name-link,\n    .@{upload-prefix-cls}-list-item-error .@{upload-prefix-cls}-list-item-name {\n      color: @upload-picture-text-item-color-text_error;\n    }\n\n    .@{upload-prefix-cls}-list-item-done\n      .@{upload-prefix-cls}-list-item-name\n      when\n      not(@upload-picture-text-item-color-text_success = unset) {\n      color: @upload-picture-text-item-color-text_success;\n    }\n\n    .@{upload-prefix-cls}-list-item-uploading\n      .@{upload-prefix-cls}-list-item-name\n      when\n      not(@upload-picture-text-item-color-text_uploading = unset) {\n      color: @upload-picture-text-item-color-text_uploading;\n    }\n  }\n}\n\n.@{upload-prefix-cls}-hide + .@{upload-prefix-cls}-list {\n  .@{upload-prefix-cls}-list-item:first-of-type {\n    margin-top: 0;\n  }\n}\n\n.@{upload-prefix-cls}-slide-up-enter {\n  opacity: 0;\n}\n\n.@{upload-prefix-cls}-slide-up-enter-active {\n  opacity: 1;\n  transition: opacity @transition-duration-2\n    @transition-timing-function-standard;\n}\n\n.@{upload-prefix-cls}-slide-up-exit {\n  opacity: 1;\n}\n\n.@{upload-prefix-cls}-slide-up-exit-active {\n  margin: 0;\n  overflow: hidden;\n  opacity: 0;\n  transition: opacity @transition-duration-1 @transition-timing-function-linear,\n    height @transition-duration-3 @transition-timing-function-standard\n      @transition-duration-1,\n    margin @transition-duration-3 @transition-timing-function-standard\n      @transition-duration-1;\n}\n\n.@{upload-prefix-cls}-list-item {\n  &.@{upload-prefix-cls}-slide-inline-enter {\n    opacity: 0;\n  }\n\n  &.@{upload-prefix-cls}-slide-inline-enter-active {\n    opacity: 1;\n    transition: opacity @transition-duration-2\n      @transition-timing-function-linear;\n  }\n\n  &.@{upload-prefix-cls}-slide-inline-exit {\n    opacity: 1;\n  }\n\n  &.@{upload-prefix-cls}-slide-inline-exit-active {\n    margin: 0;\n    overflow: hidden;\n    opacity: 0;\n    transition: opacity @transition-duration-1\n        @transition-timing-function-linear,\n      width @transition-duration-3 @transition-timing-function-standard\n        @transition-duration-1,\n      margin @transition-duration-3 @transition-timing-function-standard\n        @transition-duration-1;\n  }\n}\n"
  },
  {
    "path": "packages/web-vue/components/upload/style/index.ts",
    "content": "import '../../style/index.less';\nimport '../../button/style';\nimport '../../trigger/style';\nimport '../../progress/style';\nimport '../../image/style';\nimport './index.less';\n"
  },
  {
    "path": "packages/web-vue/components/upload/style/token.less",
    "content": "@import '../../style/theme/index.less';\n\n@upload-tip-color-text: var(~'@{arco-cssvars-prefix}-color-text-3');\n@upload-tip-margin-top: @spacing-2;\n@upload-tip-font-size: @font-size-body-1;\n@upload-list-margin-top: @spacing-9;\n\n@upload-picture-item-width: @size-20;\n@upload-picture-color-bg: var(~'@{arco-cssvars-prefix}-color-fill-2');\n@upload-picture-border-radius: @radius-small;\n@upload-picture-border-width: @border-1;\n@upload-picture-border-style: @border-dashed;\n@upload-picture-color-border: var(~'@{arco-cssvars-prefix}-color-neutral-3');\n@upload-picture-color-border_disabled: var(~'@{arco-cssvars-prefix}-color-neutral-4');\n@upload-picture-color-border_hover: var(~'@{arco-cssvars-prefix}-color-neutral-4');\n@upload-picture-color-bg_hover: var(~'@{arco-cssvars-prefix}-color-fill-3');\n@upload-picture-color-bg_disabled: var(~'@{arco-cssvars-prefix}-color-fill-1');\n@upload-picture-color-text: var(~'@{arco-cssvars-prefix}-color-text-2');\n@upload-picture-color-text_hover: var(~'@{arco-cssvars-prefix}-color-text-2');\n@upload-picture-color-text_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');\n\n@upload-drag-font-size: @font-size-body-3;\n@upload-drag-border-radius: @radius-small;\n@upload-drag-color-text: var(~'@{arco-cssvars-prefix}-color-text-1');\n@upload-drag-tip-margin-top: 0;\n@upload-drag-border-style: @border-dashed;\n@upload-drag-border-width: @border-1;\n@upload-drag-padding-vertical: 50px;\n@upload-drag-margin-icon-bottom: 24px;\n@upload-drag-color-bg: var(~'@{arco-cssvars-prefix}-color-fill-1');\n@upload-drag-color-bg_hover: var(~'@{arco-cssvars-prefix}-color-fill-3');\n@upload-drag-color-bg_active: var(~'@{arco-cssvars-prefix}-color-primary-light-1');\n@upload-drag-color-bg_disabled: @upload-drag-color-bg;\n@upload-drag-color-border: var(~'@{arco-cssvars-prefix}-color-neutral-3');\n@upload-drag-color-border_active: @color-primary-6;\n@upload-drag-color-border_hover: var(~'@{arco-cssvars-prefix}-color-neutral-4');\n@upload-drag-color-border_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');\n@upload-drag-color-icon: var(~'@{arco-cssvars-prefix}-color-text-2');\n@upload-drag-color-icon_hover: var(~'@{arco-cssvars-prefix}-color-text-2');\n@upload-drag-color-icon_active: @color-primary-6;\n@upload-drag-color-text_hover: var(~'@{arco-cssvars-prefix}-color-text-1');\n@upload-drag-color-text_active: var(~'@{arco-cssvars-prefix}-color-text-1');\n@upload-drag-color-text_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');\n\n@upload-text-item-size-operation-icon: @size-3;\n@upload-text-item-margin-top: @spacing-6;\n@upload-text-item-font-size: @font-size-body-3;\n@upload-text-item-color-text: var(~'@{arco-cssvars-prefix}-color-text-1');\n@upload-text-item-padding-left: @spacing-6;\n@upload-text-item-padding-right: @spacing-5;\n@upload-text-item-color-bg: var(~'@{arco-cssvars-prefix}-color-fill-1');\n@upload-text-item-padding-vertical: @spacing-4;\n@upload-text-item-margin-remove-icon-left: @spacing-6;\n@upload-text-item-color-remove-icon: var(~'@{arco-cssvars-prefix}-color-text-2');\n@upload-text-item-color-status-icon: var(~'@{arco-cssvars-prefix}-color-white');\n@upload-text-item-color-file-icon_success: @color-primary-6;\n@upload-text-item-color-progress-bg_hover: rgba(var(~'@{arco-cssvars-prefix}-gray-10'), 0.2);\n@upload-text-item-color-progress-bg_hover_active: @color-primary-7;\n@upload-text-item-size-file-icon: @size-4;\n@upload-text-item-margin-file-icon-right: @spacing-6;\n@upload-text-item-color-file-icon: @color-primary-6;\n@upload-text-item-color-link: @color-link-6;\n@upload-text-item-color-reupload-icon: @color-primary-6;\n@upload-text-item-color-reupload-icon_hover: @color-primary-7;\n@upload-text-item-size-status-icon: @size-3;\n@upload-text-item-color-error-icon: @color-danger-6;\n@upload-text-item-color-success-icon: @color-success-6;\n@upload-text-item-color-text_success: unset;\n@upload-text-item-color-text_uploading: unset;\n@upload-text-item-border-radius: @radius-small;\n@upload-text-item-margin-error-icon-left: @spacing-2;\n@upload-text-item-margin-status-left: @spacing-5;\n@upload-text-item-thumbnail-width: @size-10;\n@upload-text-item-margin-thumbnail-right: @spacing-6;\n@upload-text-item-color-text_error: @color-danger-6;\n\n@upload-picture-item-margin-preview-icon-right: @spacing-8;\n@upload-picture-item-size-width: @size-20;\n@upload-picture-item-border-radius: @radius-small;\n@upload-picture-item-margin-right: @spacing-4;\n@upload-picture-item-margin-bottom: @spacing-4;\n@upload-picture-item-color-operation_bg: rgba(0, 0, 0, 0.5);\n@upload-picture-item-color-operation-icon: var(~'@{arco-cssvars-prefix}-color-white');\n@upload-picture-item-color-error-icon: var(~'@{arco-cssvars-prefix}-color-white');\n@upload-picture-text-item-color-bg_error: var(~'@{arco-cssvars-prefix}-color-danger-light-1');\n@upload-picture-text-item-color-text_error: @color-danger-6;\n@upload-picture-text-item-padding-vertical: @spacing-4;\n@upload-picture-text-item-color-text_success: unset;\n@upload-picture-text-item-color-text_uploading: unset;\n\n@upload-drag-size-icon: 14px;\n@upload-picture-item-size-mask-icon: @size-4;\n@upload-picture-item-size-error-icon: 26px;\n@upload-text-item-size-reupload-icon: 14px;\n@upload-text-item-size-success-icon: 14px;\n@upload-text-item-size-error-icon: 14px;\n@upload-picture-item-size-operation-icon: 14px;\n"
  },
  {
    "path": "packages/web-vue/components/upload/upload-button.tsx",
    "content": "import { computed, defineComponent, PropType, ref } from 'vue';\nimport { getFiles, loopDirectory } from './utils';\nimport { useI18n } from '../locale';\nimport { getPrefixCls } from '../_utils/global-config';\nimport IconPlus from '../icon/icon-plus';\nimport Button from '../button';\nimport IconUpload from '../icon/icon-upload';\nimport { isFunction, isPromise } from '../_utils/is';\n\nexport default defineComponent({\n  name: 'UploadButton',\n  props: {\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n    directory: {\n      type: Boolean,\n      default: false,\n    },\n    accept: String,\n    listType: {\n      type: String,\n    },\n    tip: String,\n    draggable: {\n      type: Boolean,\n      default: false,\n    },\n    multiple: {\n      type: Boolean,\n      default: false,\n    },\n    uploadFiles: {\n      type: Function,\n      required: true,\n    },\n    hide: Boolean,\n    onButtonClick: {\n      type: Function as PropType<(event: Event) => Promise<FileList> | void>,\n    },\n  },\n  setup(props, { slots }) {\n    const prefixCls = getPrefixCls('upload');\n    const { t } = useI18n();\n    const isDragging = ref(false);\n    const inputRef = ref<HTMLInputElement | null>(null);\n    const dropRef = ref<HTMLElement | null>(null);\n    const dragEnterCount = ref<number>(0); // the number of times ondragenter was triggered\n\n    const setDragEnterCount = (type: 'subtract' | 'add' | 'reset') => {\n      if (type === 'subtract') {\n        dragEnterCount.value -= 1;\n      } else if (type === 'add') {\n        dragEnterCount.value += 1;\n      } else if (type === 'reset') {\n        dragEnterCount.value = 0;\n      }\n    };\n\n    const handleClick = (e: Event) => {\n      if (props.disabled) return;\n      if (isFunction(props.onButtonClick)) {\n        const result = props.onButtonClick(e);\n        if (isPromise<FileList>(result)) {\n          result.then((files) => {\n            props.uploadFiles(getFiles(files));\n          });\n          return;\n        }\n      }\n      if (inputRef.value) {\n        inputRef.value.click();\n      }\n    };\n\n    const handleInputChange = (e: Event) => {\n      const target = e.target as HTMLInputElement;\n      if (target.files) {\n        props.uploadFiles(getFiles(target.files));\n      }\n\n      target.value = '';\n    };\n\n    const handleDrop = (e: DragEvent) => {\n      e.preventDefault();\n      isDragging.value = false;\n      setDragEnterCount('reset');\n      if (props.disabled) {\n        return;\n      }\n\n      if (props.directory && e.dataTransfer?.items) {\n        loopDirectory(e.dataTransfer.items, props.accept, (files) => {\n          props.uploadFiles(files);\n        });\n      } else {\n        const files = getFiles(e.dataTransfer?.files, props.accept);\n        props.uploadFiles(props.multiple ? files : files.slice(0, 1));\n      }\n    };\n\n    const handleDragLeave = (e: DragEvent) => {\n      e.preventDefault();\n      setDragEnterCount('subtract');\n      if (dragEnterCount.value === 0) {\n        isDragging.value = false;\n        setDragEnterCount('reset');\n      }\n    };\n\n    const handleDragOver = (e: DragEvent) => {\n      e.preventDefault();\n      if (!props.disabled && !isDragging.value) {\n        isDragging.value = true;\n      }\n    };\n\n    const renderButton = () => {\n      if (slots.default) {\n        return <span>{slots.default()}</span>;\n      }\n      if (props.listType === 'picture-card') {\n        return (\n          <div class={`${prefixCls}-picture-card`}>\n            <div class={`${prefixCls}-picture-card-text`}>\n              <IconPlus />\n            </div>\n            {props.tip && <div class={`${prefixCls}-tip`}>{props.tip}</div>}\n          </div>\n        );\n      }\n      if (props.draggable) {\n        return (\n          <div\n            class={[\n              `${prefixCls}-drag`,\n              {\n                [`${prefixCls}-drag-active`]: isDragging.value,\n              },\n            ]}\n          >\n            <div>\n              <IconPlus />\n            </div>\n            <div class={`${prefixCls}-drag-text`}>\n              {isDragging.value ? t('upload.dragHover') : t('upload.drag')}\n            </div>\n            {props.tip && <div class={`${prefixCls}-tip`}>{props.tip}</div>}\n          </div>\n        );\n      }\n\n      return (\n        <Button\n          type=\"primary\"\n          v-slots={{ icon: () => <IconUpload /> }}\n          disabled={props.disabled}\n        >\n          {t('upload.buttonText')}\n        </Button>\n      );\n    };\n\n    const cls = computed(() => [\n      prefixCls,\n      {\n        [`${prefixCls}-type-picture-card`]: props.listType === 'picture-card',\n        [`${prefixCls}-draggable`]: props.draggable,\n        [`${prefixCls}-disabled`]: props.disabled,\n        [`${prefixCls}-hide`]: props.hide,\n      },\n    ]);\n\n    return () => (\n      <span\n        ref={dropRef}\n        class={cls.value}\n        onClick={handleClick}\n        onDragenter={() => {\n          setDragEnterCount('add');\n        }}\n        onDrop={handleDrop}\n        onDragover={handleDragOver}\n        onDragleave={handleDragLeave}\n      >\n        <input\n          ref={inputRef}\n          type=\"file\"\n          style={{ display: 'none' }}\n          disabled={props.disabled}\n          accept={props.accept}\n          multiple={props.multiple}\n          {...(props.directory ? { webkitdirectory: 'webkitdirectory' } : {})}\n          onChange={handleInputChange}\n        />\n        {renderButton()}\n      </span>\n    );\n  },\n});\n"
  },
  {
    "path": "packages/web-vue/components/upload/upload-list-item.tsx",
    "content": "import { defineComponent, inject, PropType } from 'vue';\nimport { getPrefixCls } from '../_utils/global-config';\nimport IconHover from '../_components/icon-hover.vue';\nimport UploadProgress from './upload-progress';\nimport { FileItem, ListType } from './interfaces';\nimport Tooltip from '../tooltip';\nimport IconDelete from '../icon/icon-delete';\nimport IconFile from '../icon/icon-file';\nimport IconFilePdf from '../icon/icon-file-pdf';\nimport IconFileImage from '../icon/icon-file-image';\nimport IconFileVideo from '../icon/icon-file-video';\nimport IconFileAudio from '../icon/icon-file-audio';\nimport IconExclamationCircleFill from '../icon/icon-exclamation-circle-fill';\nimport { useI18n } from '../locale';\nimport { uploadInjectionKey } from './context';\n\nexport default defineComponent({\n  name: 'UploadListItem',\n  props: {\n    file: {\n      type: Object as PropType<FileItem>,\n      required: true,\n    },\n    listType: {\n      type: String as PropType<ListType>,\n      required: true,\n    },\n  },\n  setup(props) {\n    const prefixCls = getPrefixCls('upload-list');\n    const itemCls = `${prefixCls}-item`;\n    const { t } = useI18n();\n\n    const uploadCtx = inject(uploadInjectionKey, undefined);\n\n    const renderFileIcon = () => {\n      let type = '';\n      if (props.file.file && props.file.file.type) {\n        type = props.file.file.type;\n      } else {\n        const extension = props.file.name?.split('.')[1] ?? '';\n        if (['png', 'jpg', 'jpeg', 'bmp', 'gif', 'webp'].includes(extension)) {\n          type = 'image';\n        } else if (['mp4', 'm2v', 'mkv', 'm4v', 'mov'].includes(extension)) {\n          type = 'video';\n        } else if (\n          ['mp3', 'wav', 'wmv', 'm4a', 'acc', 'flac'].includes(extension)\n        ) {\n          type = 'audio';\n        }\n      }\n\n      if (type.includes('image')) {\n        return <IconFileImage />;\n      }\n      if (type.includes('pdf')) {\n        return <IconFilePdf />;\n      }\n      if (type.includes('audio')) {\n        return <IconFileAudio />;\n      }\n      if (type.includes('video')) {\n        return <IconFileVideo />;\n      }\n      return <IconFile />;\n    };\n\n    return () => (\n      <div class={[itemCls, `${itemCls}-${props.file.status}`]}>\n        <div class={`${itemCls}-content`}>\n          {uploadCtx?.listType === 'picture' && (\n            <span class={`${itemCls}-thumbnail`}>\n              {uploadCtx?.slots.image?.({ fileItem: props.file }) ?? (\n                <img\n                  src={props.file.url}\n                  alt={props.file.name}\n                  {...(uploadCtx?.imageLoading\n                    ? { loading: uploadCtx.imageLoading }\n                    : undefined)}\n                />\n              )}\n            </span>\n          )}\n          <div class={`${itemCls}-name`}>\n            {uploadCtx?.listType === 'text' && (\n              <span class={`${itemCls}-file-icon`}>\n                {uploadCtx?.slots['file-icon']?.({ fileItem: props.file }) ??\n                  uploadCtx?.customIcon?.fileIcon?.(props.file) ??\n                  renderFileIcon()}\n              </span>\n            )}\n            {uploadCtx?.showLink && props.file.url ? (\n              <a\n                class={`${itemCls}-name-link`}\n                target=\"_blank\"\n                href={props.file.url}\n                {...(uploadCtx?.download\n                  ? { download: props.file.name }\n                  : undefined)}\n              >\n                {uploadCtx?.slots['file-name']?.({ fileItem: props.file }) ??\n                  uploadCtx?.customIcon?.fileName?.(props.file) ??\n                  props.file.name}\n              </a>\n            ) : (\n              <span\n                class={`${itemCls}-name-text`}\n                onClick={() => uploadCtx?.onPreview(props.file)}\n              >\n                {uploadCtx?.slots['file-name']?.({ fileItem: props.file }) ??\n                  uploadCtx?.customIcon?.fileName?.(props.file) ??\n                  props.file.name}\n              </span>\n            )}\n            {props.file.status === 'error' && (\n              <Tooltip content={t('upload.error')}>\n                <span\n                  class={[uploadCtx?.iconCls, `${uploadCtx?.iconCls}-error`]}\n                >\n                  {uploadCtx?.slots['error-icon']?.() ??\n                    uploadCtx?.customIcon?.errorIcon?.() ?? (\n                      <IconExclamationCircleFill />\n                    )}\n                </span>\n              </Tooltip>\n            )}\n          </div>\n          <UploadProgress file={props.file} listType={props.listType} />\n        </div>\n        {uploadCtx?.showRemoveButton && (\n          <span class={`${itemCls}-operation`}>\n            <IconHover\n              // @ts-ignore\n              onClick={() => uploadCtx?.onRemove?.(props.file)}\n            >\n              <span\n                class={[uploadCtx?.iconCls, `${uploadCtx?.iconCls}-remove`]}\n              >\n                {uploadCtx?.slots['remove-icon']?.() ??\n                  uploadCtx?.customIcon?.removeIcon?.() ?? <IconDelete />}\n              </span>\n            </IconHover>\n          </span>\n        )}\n        {uploadCtx?.slots['extra-button']?.({ fileItem: props.file })}\n      </div>\n    );\n  },\n});\n"
  },
  {
    "path": "packages/web-vue/components/upload/upload-list.tsx",
    "content": "import { computed, defineComponent, PropType, TransitionGroup } from 'vue';\nimport { getPrefixCls } from '../_utils/global-config';\nimport UploadListItem from './upload-list-item';\nimport UploadPictureItem from './upload-picture-item';\nimport { FileItem, ListType } from './interfaces';\nimport { isFunction } from '../_utils/is';\n\nexport default defineComponent({\n  name: 'UploadList',\n  components: {\n    UploadListItem,\n    UploadPictureItem,\n  },\n  props: {\n    fileList: {\n      type: Array as PropType<FileItem[]>,\n      required: true,\n    },\n    listType: {\n      type: String as PropType<ListType>,\n      required: true,\n    },\n  },\n  setup(props, { slots }) {\n    const prefixCls = getPrefixCls('upload');\n\n    const cls = computed(() => [\n      `${prefixCls}-list`,\n      `${prefixCls}-list-type-${props.listType}`,\n    ]);\n\n    const renderItem = (fileItem: FileItem, index: number) => {\n      if (isFunction(slots['upload-item'])) {\n        return slots['upload-item']({ fileItem, index });\n      }\n\n      if (props.listType === 'picture-card') {\n        return <UploadPictureItem file={fileItem} key={`item-${index}`} />;\n      }\n      return (\n        <UploadListItem\n          file={fileItem}\n          listType={props.listType}\n          key={`item-${index}`}\n        />\n      );\n    };\n\n    return () => (\n      // @ts-ignore\n      <TransitionGroup tag=\"div\" class={cls.value}>\n        {...props.fileList.map((item, index) => renderItem(item, index))}\n        {props.listType === 'picture-card' && slots['upload-button']?.()}\n      </TransitionGroup>\n    );\n  },\n});\n"
  },
  {
    "path": "packages/web-vue/components/upload/upload-picture-item.tsx",
    "content": "import { computed, defineComponent, inject, PropType } from 'vue';\nimport { getPrefixCls } from '../_utils/global-config';\nimport UploadProgress from './upload-progress';\nimport { FileItem } from './interfaces';\nimport { uploadInjectionKey } from './context';\nimport IconImageClose from '../icon/icon-image-close';\nimport IconEye from '../icon/icon-eye';\nimport IconUpload from '../icon/icon-upload';\nimport IconDelete from '../icon/icon-delete';\n\nexport default defineComponent({\n  name: 'UploadPictureItem',\n  props: {\n    file: {\n      type: Object as PropType<FileItem>,\n      required: true,\n    },\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n  },\n  setup(props) {\n    const prefixCls = getPrefixCls('upload-list');\n    const itemCls = `${prefixCls}-picture`;\n    const cls = computed(() => [\n      itemCls,\n      {\n        [`${itemCls}-status-error`]: props.file.status === 'error',\n      },\n    ]);\n\n    const uploadCtx = inject(uploadInjectionKey, undefined);\n\n    const renderCard = () => {\n      if (props.file.status === 'uploading') {\n        return <UploadProgress file={props.file} listType=\"picture-card\" />;\n      }\n\n      return (\n        <>\n          {uploadCtx?.slots.image?.({ fileItem: props.file }) ?? (\n            <img\n              src={props.file.url}\n              alt={props.file.name}\n              {...(uploadCtx?.imageLoading\n                ? { loading: uploadCtx.imageLoading }\n                : undefined)}\n            />\n          )}\n          <div class={`${itemCls}-mask`}>\n            {props.file.status === 'error' && uploadCtx?.showCancelButton && (\n              <div class={`${itemCls}-error-tip`}>\n                <span\n                  class={[uploadCtx?.iconCls, `${uploadCtx?.iconCls}-error`]}\n                >\n                  {uploadCtx?.slots['error-icon']?.() ??\n                    uploadCtx?.customIcon?.errorIcon?.() ?? <IconImageClose />}\n                </span>\n              </div>\n            )}\n            <div class={`${itemCls}-operation`}>\n              {props.file.status !== 'error' && uploadCtx?.showPreviewButton && (\n                <span\n                  class={[uploadCtx?.iconCls, `${uploadCtx?.iconCls}-preview`]}\n                  onClick={() => uploadCtx?.onPreview(props.file)}\n                >\n                  {uploadCtx?.slots['preview-icon']?.() ??\n                    uploadCtx?.customIcon?.previewIcon?.() ?? <IconEye />}\n                </span>\n              )}\n              {['init', 'error'].includes(props.file.status as string) &&\n                uploadCtx?.showRetryButton && (\n                  <span\n                    class={[uploadCtx?.iconCls, `${uploadCtx?.iconCls}-upload`]}\n                    onClick={() => uploadCtx?.onUpload(props.file)}\n                  >\n                    {uploadCtx?.slots['retry-icon']?.() ??\n                      uploadCtx?.customIcon?.retryIcon?.() ?? <IconUpload />}\n                  </span>\n                )}\n              {!uploadCtx?.disabled && uploadCtx?.showRemoveButton && (\n                <span\n                  class={[uploadCtx?.iconCls, `${uploadCtx?.iconCls}-remove`]}\n                  onClick={() => uploadCtx?.onRemove(props.file)}\n                >\n                  {uploadCtx?.slots['remove-icon']?.() ??\n                    uploadCtx?.customIcon?.removeIcon?.() ?? <IconDelete />}\n                </span>\n              )}\n              {uploadCtx?.slots['extra-button']?.(props.file)}\n            </div>\n          </div>\n        </>\n      );\n    };\n\n    return () => <span class={cls.value}>{renderCard()}</span>;\n  },\n});\n"
  },
  {
    "path": "packages/web-vue/components/upload/upload-progress.tsx",
    "content": "import { defineComponent, inject, PropType } from 'vue';\nimport { FileItem, ListType } from './interfaces';\nimport Progress from '../progress';\nimport Tooltip from '../tooltip';\nimport IconPause from '../icon/icon-pause';\nimport IconPlayArrowFill from '../icon/icon-play-arrow-fill';\nimport IconUpload from '../icon/icon-upload';\nimport IconCheck from '../icon/icon-check';\nimport { getProgressStatus } from './utils';\nimport { getPrefixCls } from '../_utils/global-config';\nimport { useI18n } from '../locale';\nimport { uploadInjectionKey } from './context';\n\nexport default defineComponent({\n  name: 'UploadProgress',\n  props: {\n    file: {\n      type: Object as PropType<FileItem>,\n      required: true,\n    },\n    listType: {\n      type: String as PropType<ListType>,\n      required: true,\n    },\n  },\n  setup(props) {\n    const prefixCls = getPrefixCls('upload-progress');\n    const { t } = useI18n();\n\n    const uploadCtx = inject(uploadInjectionKey, undefined);\n\n    const renderIcon = () => {\n      if (props.file.status === 'error') {\n        return (\n          <span\n            class={[uploadCtx?.iconCls, `${uploadCtx?.iconCls}-upload`]}\n            onClick={() => uploadCtx?.onUpload(props.file)}\n          >\n            {(uploadCtx?.showRetryButton &&\n              (uploadCtx?.slots['retry-icon']?.() ??\n                uploadCtx?.customIcon?.retryIcon?.())) ||\n            props.listType === 'picture-card' ? (\n              <IconUpload />\n            ) : (\n              t('upload.retry')\n            )}\n          </span>\n        );\n      }\n      if (props.file.status === 'done') {\n        return (\n          <span class={[uploadCtx?.iconCls, `${uploadCtx?.iconCls}-success`]}>\n            {uploadCtx?.slots['success-icon']?.() ??\n              uploadCtx?.customIcon?.successIcon?.() ?? <IconCheck />}\n          </span>\n        );\n      }\n      if (props.file.status === 'init') {\n        return (\n          <Tooltip content={t('upload.start')}>\n            <span\n              class={[uploadCtx?.iconCls, `${uploadCtx?.iconCls}-start`]}\n              onClick={() => uploadCtx?.onUpload(props.file)}\n            >\n              {uploadCtx?.slots['start-icon']?.() ??\n                uploadCtx?.customIcon?.startIcon?.() ?? <IconPlayArrowFill />}\n            </span>\n          </Tooltip>\n        );\n      }\n      return (\n        uploadCtx?.showCancelButton && (\n          <Tooltip content={t('upload.cancel')}>\n            <span\n              class={[uploadCtx?.iconCls, `${uploadCtx?.iconCls}-cancel`]}\n              onClick={() => uploadCtx?.onAbort(props.file)}\n            >\n              {uploadCtx?.slots['cancel-icon']?.() ??\n                uploadCtx?.customIcon?.cancelIcon?.() ?? <IconPause />}\n            </span>\n          </Tooltip>\n        )\n      );\n    };\n\n    const renderProgress = () => {\n      if (['init', 'uploading'].includes(props.file.status ?? '')) {\n        const status = getProgressStatus(props.file.status);\n\n        return (\n          <Progress\n            type=\"circle\"\n            size=\"mini\"\n            showText={false}\n            status={status}\n            percent={props.file.percent}\n          />\n        );\n      }\n\n      return null;\n    };\n\n    return () => (\n      <span class={prefixCls}>\n        {renderProgress()}\n        {renderIcon()}\n      </span>\n    );\n  },\n});\n"
  },
  {
    "path": "packages/web-vue/components/upload/upload.tsx",
    "content": "import type { PropType } from 'vue';\nimport {\n  defineComponent,\n  provide,\n  reactive,\n  ref,\n  toRefs,\n  watch,\n  computed,\n} from 'vue';\nimport { getPrefixCls } from '../_utils/global-config';\nimport { isBoolean, isFunction, isObject } from '../_utils/is';\nimport type {\n  CustomIcon,\n  FileItem,\n  ListType,\n  RequestOption,\n  UploadRequest,\n} from './interfaces';\nimport { isImage, uploadRequest } from './utils';\nimport UploadButton from './upload-button';\nimport UploadList from './upload-list';\nimport { uploadInjectionKey } from './context';\nimport { ImagePreviewGroup } from '../image';\nimport { useFormItem } from '../_hooks/use-form-item';\n\nexport default defineComponent({\n  name: 'Upload',\n  props: {\n    /**\n     * @zh 文件列表\n     * @en File List\n     * @vModel\n     */\n    fileList: {\n      type: Array as PropType<FileItem[]>,\n      default: undefined,\n    },\n    /**\n     * @zh 默认的文件列表（非受控状态）\n     * @en Default file list (uncontrolled state)\n     */\n    defaultFileList: {\n      type: Array as PropType<FileItem[]>,\n      default: () => [],\n    },\n    /**\n     * @zh 接收的上传文件类型，具体参考 [HTML标准](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#htmlattrdefaccept \"_blank\")\n     * @en For the received upload file type, please refer to [HTML standard](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#htmlattrdefaccept \"_blank\")\n     */\n    accept: String,\n    /**\n     * @zh 上传的URL\n     * @en Uploaded URL\n     */\n    action: String,\n    /**\n     * @zh 是否禁用\n     * @en Whether to disable\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 是否支持多文件上传\n     * @en Whether to support multiple file upload\n     */\n    multiple: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 是否支持文件夹上传（需要浏览器支持）\n     * @en Whether to support folder upload (requires browser support)\n     */\n    directory: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 是否支持拖拽上传\n     * @en Whether to support drag and drop upload\n     */\n    draggable: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 提示文字\n     * @en Prompt text\n     */\n    tip: String,\n    /**\n     * @zh 上传请求附加的头信息\n     * @en Additional header information for upload request\n     */\n    headers: {\n      type: Object as PropType<Record<string, string>>,\n    },\n    /**\n     * @zh 上传请求附加的数据\n     * @en Upload request additional data\n     */\n    data: {\n      type: [Object, Function] as PropType<\n        | Record<string, string | Blob>\n        | ((fileItem: FileItem) => Record<string, string | Blob>)\n      >,\n    },\n    /**\n     * @zh 上传的文件名\n     * @en Uploaded file name\n     */\n    name: {\n      type: [String, Function] as PropType<\n        string | ((fileItem: FileItem) => string)\n      >,\n    },\n    /**\n     * @zh 上传请求是否携带 cookie\n     * @en Whether the upload request carries cookies\n     */\n    withCredentials: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 自定义上传行为\n     * @en Custom upload behavior\n     */\n    customRequest: {\n      type: Function as PropType<(option: RequestOption) => UploadRequest>,\n    },\n    /**\n     * @zh 限制上传文件的数量。`0`表示不限制\n     * @en Limit the number of uploaded files. `0` means no limit\n     */\n    limit: {\n      type: Number,\n      default: 0,\n    },\n    /**\n     * @zh 是否自动上传文件\n     * @en Whether to upload files automatically\n     */\n    autoUpload: {\n      type: Boolean,\n      default: true,\n    },\n    /**\n     * @zh 是否显示文件列表\n     * @en Whether to display the file list\n     */\n    showFileList: {\n      type: Boolean,\n      default: true,\n    },\n    /**\n     * @zh 是否显示删除按钮\n     * @en Whether to display the remove button\n     * @version 2.11.0\n     */\n    showRemoveButton: {\n      type: Boolean,\n      default: true,\n    },\n    /**\n     * @zh 是否显示重试按钮\n     * @en Whether to display the retry button\n     * @version 2.11.0\n     */\n    showRetryButton: {\n      type: Boolean,\n      default: true,\n    },\n    /**\n     * @zh 是否显示取消按钮\n     * @en Whether to display the cancel button\n     * @version 2.11.0\n     */\n    showCancelButton: {\n      type: Boolean,\n      default: true,\n    },\n    /**\n     * @zh 是否显示上传按钮。2.14.0 版本新增 `showOnExceedLimit` 支持\n     * @en Whether to display the retry button. Added `showOnExceedLimit` support in version 2.14.0\n     * @version 2.11.0\n     */\n    showUploadButton: {\n      type: [Boolean, Object] as PropType<\n        boolean | { showOnExceedLimit: boolean }\n      >,\n      default: true,\n    },\n    /**\n     * @zh 照片墙是否显示预览按钮\n     * @en Whether to display the preview button in picture-card\n     * @version 2.42.0\n     */\n    showPreviewButton: {\n      type: Boolean,\n      default: true,\n    },\n    /**\n     * @zh 是否在 `<a>` 链接上添加 download 属性\n     * @en Whether to add download attribute to `<a>` link\n     * @version 2.11.0\n     */\n    download: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 在列表模式下，如果上传的文件存在 URL 则展示链接。如果关闭仅展示文字并且点击可以触发 `preview` 事件。\n     * @en In the list mode, if the uploaded file has a URL, the link will be displayed. If you turn off only display text and click to trigger the `preview` event.\n     * @version 2.13.0\n     */\n    showLink: {\n      type: Boolean,\n      default: true,\n    },\n    /**\n     * @zh `<img>` 的原生 HTML 属性，需要浏览器支持\n     * @en Native HTML attributes of `<img>`, browser support is required\n     * @version 2.11.0\n     */\n    imageLoading: {\n      type: String as PropType<'eager' | 'lazy'>,\n    },\n    /**\n     * @zh 图片列表类型\n     * @en Picture list type\n     * @values 'text','picture','picture-card'\n     */\n    listType: {\n      type: String as PropType<ListType>,\n      default: 'text',\n    },\n    /**\n     * @zh Response中获取图片URL的key，开启后会用上传的图片替换预加载的图片\n     * @en Get the key of the image URL in the Response. After opening, it will replace the pre-load image with the uploaded image\n     */\n    responseUrlKey: {\n      type: [String, Function] as PropType<\n        string | ((fileItem: FileItem) => string)\n      >,\n    },\n    /**\n     * @zh 自定义图标\n     * @en Custom icon\n     */\n    customIcon: {\n      type: Object as PropType<CustomIcon>,\n    },\n    /**\n     * @zh 是否使用 ImagePreview 组件进行预览\n     * @version 2.14.0\n     */\n    imagePreview: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 上传文件前触发\n     * @en Trigger before uploading a file\n     */\n    onBeforeUpload: {\n      type: Function as PropType<\n        (file: File) => boolean | Promise<boolean | File>\n      >,\n    },\n    /**\n     * @zh 移除文件前触发\n     * @en Triggered before removing the file\n     */\n    onBeforeRemove: {\n      type: Function as PropType<(fileItem: FileItem) => Promise<boolean>>,\n    },\n    /**\n     * @zh 点击上传按钮触发（如果返回 Promise 则会关闭默认 input 上传）\n     * @en Click the upload button to trigger (if the Promise is returned, the default input upload will be closed)\n     */\n    onButtonClick: {\n      type: Function as PropType<(event: Event) => Promise<FileList> | void>,\n    },\n  },\n  emits: {\n    'update:fileList': (fileList: FileItem[]) => true,\n    /**\n     * @zh 上传的文件超出限制后触发\n     * @en Triggered when the uploaded file exceeds the limit\n     * @param {FileItem[]} fileList\n     * @param {File[]} files\n     */\n    'exceedLimit': (fileList: FileItem[], files: File[]) => true,\n    /**\n     * @zh 上传的文件状态发生改变时触发\n     * @en Triggered when the status of the uploaded file changes\n     * @param {FileItem[]} fileList\n     * @param {fileItem} fileItem\n     */\n    'change': (fileList: FileItem[], fileItem: FileItem) => true,\n    /**\n     * @zh 上传中的文件进度改变时触发\n     * @en Triggered when the uploading file progress changes\n     * @param {fileItem} fileItem\n     * @param {ProgressEvent} ev\n     */\n    'progress': (fileItem: FileItem, ev?: ProgressEvent) => true,\n    /**\n     * @zh 点击图片预览时的触发\n     * @en Trigger when the image preview is clicked\n     * @param {FileItem} fileItem\n     */\n    'preview': (fileItem: FileItem) => true,\n    /**\n     * @zh 上传成功时触发\n     * @en Triggered when upload is successful\n     * @param {FileItem} fileItem\n     */\n    'success': (fileItem: FileItem) => true,\n    /**\n     * @zh 上传失败时触发\n     * @en Triggered when upload fails\n     * @param {FileItem} fileItem\n     */\n    'error': (fileItem: FileItem) => true,\n  },\n  /**\n   * @zh 上传列表的项目\n   * @en Upload list item\n   * @slot upload-item\n   * @binding {FileItem} fileItem\n   * @binding {number} index\n   */\n  /**\n   * @zh 上传按钮\n   * @en Upload button\n   * @slot upload-button\n   */\n  /**\n   * @zh 重试图标\n   * @en Retry icon\n   * @slot retry-icon\n   * @version 2.23.0\n   */\n  /**\n   * @zh 成功图标\n   * @en Success icon\n   * @slot success-icon\n   * @version 2.23.0\n   */\n  /**\n   * @zh 失败图标\n   * @en Error icon\n   * @slot error-icon\n   * @version 2.23.0\n   */\n  /**\n   * @zh 开始图标\n   * @en Start icon\n   * @slot start-icon\n   * @version 2.23.0\n   */\n  /**\n   * @zh 取消图标\n   * @en Cancel icon\n   * @slot cancel-icon\n   * @version 2.23.0\n   */\n  /**\n   * @zh 预览图标\n   * @en Preview icon\n   * @slot preview-icon\n   * @version 2.23.0\n   */\n  /**\n   * @zh 删除图标\n   * @en Remove icon\n   * @slot remove-icon\n   * @version 2.23.0\n   */\n  /**\n   * @zh 文件图标\n   * @en File icon\n   * @slot file-icon\n   * @version 2.23.0\n   */\n  /**\n   * @zh 文件名称\n   * @en File name\n   * @slot file-name\n   * @version 2.23.0\n   */\n  /**\n   * @zh 自定义图片\n   * @en Image\n   * @slot image\n   * @binding {FileItem} fileItem\n   * @version 2.23.0\n   */\n  /**\n   * @zh 上传列表额外按钮\n   * @en Extra button\n   * @slot extra-button\n   * @binding {FileItem} fileItem\n   * @version 2.43.0\n   */\n  setup(props, { emit, slots }) {\n    const {\n      fileList,\n      disabled,\n      listType,\n      customIcon,\n      showRetryButton,\n      showCancelButton,\n      showRemoveButton,\n      showPreviewButton,\n      imageLoading,\n      download,\n      showLink,\n    } = toRefs(props);\n    const prefixCls = getPrefixCls('upload');\n    const { mergedDisabled, eventHandlers } = useFormItem({ disabled });\n\n    // Internally maintained picture list\n    const _fileList = ref<FileItem[]>([]);\n    const fileMap = new Map<string, FileItem>();\n    const requestMap = new Map<string, UploadRequest>();\n\n    const isMax = computed(() => {\n      return props.limit > 0 && _fileList.value.length >= props.limit;\n    });\n\n    const checkFileList = (fileList?: FileItem[]) => {\n      fileMap.clear();\n      const newFileList = fileList?.map((data, index) => {\n        const status = data.status ?? 'done';\n        const fileItem = reactive({\n          ...data,\n          uid: data.uid ?? `${Date.now()}${index}`,\n          status,\n          percent:\n            data.percent ?? (['error', 'init'].indexOf(status) > -1 ? 0 : 1),\n        });\n        fileMap.set(fileItem.uid, fileItem);\n        return fileItem;\n      });\n      _fileList.value = newFileList ?? [];\n    };\n\n    checkFileList(props.defaultFileList);\n    watch(\n      fileList,\n      (fileList) => {\n        if (fileList) {\n          checkFileList(fileList);\n        }\n      },\n      { immediate: true, deep: true }\n    );\n\n    const updateFileList = (file: FileItem) => {\n      emit('update:fileList', _fileList.value);\n      emit('change', _fileList.value, file);\n      eventHandlers.value?.onChange?.();\n    };\n\n    const updateFile = (id: string, file: File) => {\n      for (const item of _fileList.value) {\n        if (item.uid === id) {\n          item.file = file;\n          updateFileList(item);\n          break;\n        }\n      }\n    };\n\n    const uploadFile = (fileItem: FileItem) => {\n      const handleProgress = (percent: number, event?: ProgressEvent) => {\n        const file = fileMap.get(fileItem.uid);\n        if (file) {\n          file.status = 'uploading';\n          file.percent = percent;\n\n          emit('progress', file, event);\n          updateFileList(file);\n        }\n      };\n\n      const handleSuccess = (response: any) => {\n        const file = fileMap.get(fileItem.uid);\n        if (file) {\n          file.status = 'done';\n          file.percent = 1;\n          file.response = response;\n          if (props.responseUrlKey) {\n            if (isFunction(props.responseUrlKey)) {\n              file.url = props.responseUrlKey(file);\n            } else if (response[props.responseUrlKey]) {\n              file.url = response[props.responseUrlKey];\n            }\n          }\n\n          requestMap.delete(file.uid);\n          emit('success', file);\n          updateFileList(file);\n        }\n      };\n\n      const handleError = (response: any) => {\n        const file = fileMap.get(fileItem.uid);\n        if (file) {\n          file.status = 'error';\n          file.percent = 0;\n          file.response = response;\n\n          requestMap.delete(file.uid);\n          emit('error', file);\n          updateFileList(file);\n        }\n      };\n\n      const option: RequestOption = {\n        fileItem,\n        action: props.action,\n        name: props.name,\n        data: props.data,\n        headers: props.headers,\n        withCredentials: props.withCredentials,\n        onProgress: handleProgress,\n        onSuccess: handleSuccess,\n        onError: handleError,\n      };\n\n      fileItem.status = 'uploading';\n      fileItem.percent = 0;\n\n      // 保存请求\n      const request = isFunction(props.customRequest)\n        ? props.customRequest(option)\n        : uploadRequest(option);\n\n      requestMap.set(fileItem.uid, request);\n      updateFileList(fileItem);\n    };\n\n    const abort = (fileItem: FileItem) => {\n      const req = requestMap.get(fileItem.uid);\n      if (req) {\n        req.abort?.();\n        requestMap.delete(fileItem.uid);\n        const file = fileMap.get(fileItem.uid);\n        if (file) {\n          file.status = 'error';\n          file.percent = 0;\n\n          updateFileList(file);\n        }\n      }\n    };\n\n    const submit = (fileItem?: FileItem) => {\n      if (fileItem) {\n        const file = fileMap.get(fileItem.uid);\n        if (file) {\n          uploadFile(file);\n        }\n      } else {\n        for (const item of _fileList.value) {\n          if (item.status === 'init') {\n            uploadFile(item);\n          }\n        }\n      }\n    };\n\n    const initUpload = async (file: File, index: number) => {\n      const uid = `${Date.now()}-${index}`;\n\n      const dataURL = isImage(file) ? URL.createObjectURL(file) : undefined;\n\n      const fileItem: FileItem = reactive({\n        uid,\n        file,\n        url: dataURL,\n        name: file.name,\n        status: 'init',\n        percent: 0,\n      });\n\n      fileMap.set(uid, fileItem);\n      _fileList.value = [..._fileList.value, fileItem];\n      updateFileList(fileItem);\n\n      if (props.autoUpload) {\n        uploadFile(fileItem);\n      }\n    };\n\n    const uploadFiles = (files: File[]) => {\n      if (\n        props.limit > 0 &&\n        _fileList.value.length + files.length > props.limit\n      ) {\n        emit('exceedLimit', _fileList.value, files);\n        return;\n      }\n\n      for (let i = 0; i < files.length; i++) {\n        const file = files[i];\n        if (isFunction(props.onBeforeUpload)) {\n          Promise.resolve(props.onBeforeUpload(file))\n            .then((result: boolean | File) => {\n              if (result) {\n                initUpload(isBoolean(result) ? file : result, i);\n              }\n            })\n            .catch((err) => {\n              // eslint-disable-next-line no-console\n              console.error(err);\n            });\n        } else {\n          initUpload(file, i);\n        }\n      }\n    };\n\n    const removeFile = (fileItem: FileItem) => {\n      _fileList.value = _fileList.value.filter((item) => {\n        return item.uid !== fileItem.uid;\n      });\n      updateFileList(fileItem);\n    };\n\n    const handleRemove = (fileItem: FileItem) => {\n      if (isFunction(props.onBeforeRemove)) {\n        Promise.resolve(props.onBeforeRemove(fileItem))\n          .then((result: boolean) => {\n            if (result) {\n              removeFile(fileItem);\n            }\n          })\n          .catch((err) => {\n            // eslint-disable-next-line no-console\n            console.error(err);\n          });\n      } else {\n        removeFile(fileItem);\n      }\n    };\n\n    const handlePreview = (fileItem: FileItem) => {\n      if (props.imagePreview && fileItem.url) {\n        const current = imageList.value.indexOf(fileItem.url);\n        if (current > -1) {\n          imagePreviewCurrent.value = current;\n          imagePreviewVisible.value = true;\n        }\n      }\n\n      emit('preview', fileItem);\n    };\n\n    provide(\n      uploadInjectionKey,\n      reactive({\n        disabled: mergedDisabled,\n        listType,\n        iconCls: `${prefixCls}-icon`,\n        showRemoveButton,\n        showRetryButton,\n        showCancelButton,\n        showPreviewButton,\n        showLink,\n        imageLoading,\n        download,\n        customIcon,\n        slots,\n        onUpload: uploadFile,\n        onAbort: abort,\n        onRemove: handleRemove,\n        onPreview: handlePreview,\n      })\n    );\n\n    const mergedAccept = computed(() => {\n      if (props.accept) {\n        return props.accept;\n      }\n      if (props.listType === 'picture' || props.listType === 'picture-card') {\n        return 'image/*';\n      }\n      return undefined;\n    });\n\n    const renderButton = () => {\n      const button = (\n        <UploadButton\n          key=\"arco-upload-button\"\n          v-slots={{\n            default: slots['upload-button'],\n          }}\n          disabled={mergedDisabled.value}\n          draggable={props.draggable}\n          listType={props.listType}\n          uploadFiles={uploadFiles}\n          multiple={props.multiple}\n          directory={props.directory}\n          tip={props.tip}\n          hide={\n            !props.showUploadButton ||\n            (isMax.value &&\n              !(\n                isObject(props.showUploadButton) &&\n                props.showUploadButton.showOnExceedLimit\n              ))\n          }\n          accept={mergedAccept.value}\n          onButtonClick={props.onButtonClick}\n        />\n      );\n\n      if (props.tip && props.listType !== 'picture-card' && !props.draggable) {\n        return (\n          <span>\n            {button}\n            <div class={`${prefixCls}-tip`}>{props.tip}</div>\n          </span>\n        );\n      }\n\n      return button;\n    };\n\n    const imagePreviewVisible = ref(false);\n\n    const imagePreviewCurrent = ref(0);\n\n    const handleImagePreviewChange = (current: number) => {\n      imagePreviewCurrent.value = current;\n    };\n\n    const handleImagePreviewVisibleChange = (visible: boolean) => {\n      imagePreviewVisible.value = visible;\n    };\n\n    const imageList = computed(() =>\n      _fileList.value\n        .filter((item) => Boolean(item.url))\n        .map((item) => item.url as string)\n    );\n\n    const render = () => {\n      if (!props.showFileList) {\n        return props.showUploadButton && renderButton();\n      }\n\n      return (\n        <div\n          class={[\n            `${prefixCls}-wrapper`,\n            `${prefixCls}-wrapper-type-${props.listType}`,\n          ]}\n        >\n          {props.imagePreview && imageList.value.length > 0 && (\n            <ImagePreviewGroup\n              srcList={imageList.value}\n              visible={imagePreviewVisible.value}\n              current={imagePreviewCurrent.value}\n              onChange={handleImagePreviewChange}\n              // @ts-ignore\n              onVisibleChange={handleImagePreviewVisibleChange}\n            />\n          )}\n          {props.listType !== 'picture-card' &&\n            props.showUploadButton &&\n            renderButton()}\n          <UploadList\n            v-slots={{\n              'upload-button': renderButton,\n              'upload-item': slots['upload-item'],\n            }}\n            fileList={_fileList.value}\n            listType={props.listType}\n          />\n        </div>\n      );\n    };\n\n    return {\n      prefixCls,\n      render,\n      innerSubmit: submit,\n      innerAbort: abort,\n      innerUpdateFile: updateFile,\n      innerUpload: uploadFiles,\n    };\n  },\n  methods: {\n    /**\n     * @zh 上传文件（已经初始化完成的文件）\n     * @en Upload file (file that has been initialized)\n     * @public\n     * @param {FileItem} fileItem\n     */\n    submit(fileItem?: FileItem) {\n      return this.innerSubmit(fileItem);\n    },\n    /**\n     * @zh 中止上传\n     * @en Abort upload\n     * @public\n     * @param {FileItem} fileItem\n     */\n    abort(fileItem: FileItem) {\n      return this.innerAbort(fileItem);\n    },\n    /**\n     * @zh 更新文件\n     * @en Update file\n     * @public\n     * @param {string} id\n     * @param {File} file\n     */\n    updateFile(id: string, file: File) {\n      return this.innerUpdateFile(id, file);\n    },\n    /**\n     * @zh 上传文件\n     * @en Upload file\n     * @public\n     * @param {File[]} files\n     * @version 2.41.0\n     */\n    upload(files: File[]) {\n      return this.innerUpload(files);\n    },\n  },\n  render() {\n    return this.render();\n  },\n});\n"
  },
  {
    "path": "packages/web-vue/components/upload/utils.ts",
    "content": "import NP from 'number-precision';\nimport {\n  FileItem,\n  FileStatus,\n  RequestOption,\n  UploadRequest,\n} from './interfaces';\nimport { NOOP } from '../_utils/dom';\nimport { isArray, isFunction } from '../_utils/is';\n\nconst getResponse = (xhr: XMLHttpRequest) => {\n  const res = xhr.responseText || xhr.response;\n  if (!res) {\n    return undefined;\n  }\n\n  const contentType = xhr.getResponseHeader('Content-Type');\n  if (contentType && contentType.includes('json')) {\n    try {\n      return JSON.parse(res);\n    } catch {\n      return res;\n    }\n  }\n  return res;\n};\n\nexport const getProgressStatus = (status?: FileStatus) => {\n  switch (status) {\n    case 'done':\n      return 'success';\n    case 'error':\n      return 'danger';\n    default:\n      return 'normal';\n  }\n};\n\n/**\n * Used to process the file information entered by the user. Generate a new array object without changing the original information\n * @param fileList\n */\nexport const processFileList = (fileList?: FileItem[]): FileItem[] => {\n  if (isArray(fileList)) {\n    return fileList.map((file, index) => {\n      return {\n        // @ts-ignore\n        uid: `${Date.now()}${index}`,\n        status: 'done',\n        percent: 1,\n        ...file,\n      };\n    });\n  }\n  return [];\n};\n\nconst getValue = (obj: any, fileItem: FileItem) => {\n  if (isFunction(obj)) {\n    return obj(fileItem);\n  }\n  return obj;\n};\n\nexport const uploadRequest = ({\n  fileItem,\n  action,\n  name: originName,\n  data: originData,\n  headers = {},\n  withCredentials = false,\n  onProgress = NOOP,\n  onSuccess = NOOP,\n  onError = NOOP,\n}: RequestOption): UploadRequest => {\n  const name = getValue(originName, fileItem) || 'file';\n  const data = getValue(originData, fileItem);\n  const xhr = new XMLHttpRequest();\n  if (withCredentials) {\n    xhr.withCredentials = true;\n  }\n\n  xhr.upload.onprogress = (e: ProgressEvent) => {\n    const percent = e.total > 0 ? NP.round(e.loaded / e.total, 2) : 0;\n    onProgress(percent, e);\n  };\n  xhr.onerror = function error(e) {\n    onError(e);\n  };\n  xhr.onload = () => {\n    if (xhr.status < 200 || xhr.status >= 300) {\n      onError(getResponse(xhr));\n      return;\n    }\n\n    onSuccess(getResponse(xhr));\n  };\n\n  const formData = new FormData();\n  if (data) {\n    for (const key of Object.keys(data)) {\n      formData.append(key, data[key]);\n    }\n  }\n  if (fileItem.file) {\n    formData.append(name, fileItem.file);\n  }\n  xhr.open('post', action ?? '', true);\n\n  for (const key of Object.keys(headers)) {\n    xhr.setRequestHeader(key, headers[key]);\n  }\n\n  xhr.send(formData);\n\n  return {\n    abort() {\n      xhr.abort();\n    },\n  };\n};\n\nconst isAcceptFile = (file: File, accept?: string | string[]): boolean => {\n  if (accept && file) {\n    const accepts = isArray(accept)\n      ? accept\n      : accept\n          .split(',')\n          .map((x) => x.trim())\n          .filter((x) => x);\n    const fileExtension = (\n      file.name.indexOf('.') > -1 ? `.${file.name.split('.').pop()}` : ''\n    ).toLowerCase();\n    return accepts.some((type) => {\n      const typeText = type && type.toLowerCase();\n      const fileType = (file.type || '').toLowerCase();\n      const baseFileType = fileType.split('/')[0]; // audio/mpeg => audio;\n\n      // `${baseFileType}/${fileExtension}` === typeText\n      // filetype is audio/mpeg, but accept is audio/mp3, should return true\n      if (\n        typeText === fileType ||\n        `${baseFileType}${fileExtension.replace('.', '/')}` === typeText\n      ) {\n        // 类似excel文件这种\n        // 比如application/vnd.ms-excel和application/vnd.openxmlformats-officedocument.spreadsheetml.sheet\n        // 本身就带有.字符的，不能走下面的.jpg等文件扩展名判断处理\n        // 所以优先对比input的accept类型和文件对象的type值\n        return true;\n      }\n      // */*,*  之类的所有类型\n      if (/^\\*(\\/\\*)?$/.test(typeText)) {\n        return true;\n      }\n      if (/\\/\\*/.test(typeText)) {\n        // image/* 这种通配的形式处理\n        return fileType.replace(/\\/.*$/, '') === typeText.replace(/\\/.*$/, '');\n      }\n      if (/\\..*/.test(typeText)) {\n        // .jpg 等后缀名\n        let suffixList = [typeText];\n        // accept=\".jpg\", jpeg后缀类型同样可以上传，反之亦然\n        if (typeText === '.jpg' || typeText === '.jpeg') {\n          suffixList = ['.jpg', '.jpeg'];\n        }\n        return suffixList.indexOf(fileExtension) > -1;\n      }\n      return false;\n    });\n  }\n  return !!file;\n};\n\nexport const loopDirectory = (\n  itemList: DataTransferItemList,\n  accept: string | undefined,\n  callback: (files: File[]) => void\n) => {\n  const files: File[] = [];\n\n  let restFileCount = 0; // 剩余上传文件的数量\n  const onFinish = () => {\n    !restFileCount && callback(files);\n  };\n\n  const _loopDirectory = (item: FileSystemEntry | null) => {\n    restFileCount += 1;\n\n    if (item?.isFile) {\n      (item as FileSystemFileEntry).file((file) => {\n        restFileCount -= 1;\n        if (isAcceptFile(file, accept)) {\n          Object.defineProperty(file, 'webkitRelativePath', {\n            value: item.fullPath.replace(/^\\//, ''),\n          });\n          files.push(file);\n        }\n        onFinish();\n      });\n      return;\n    }\n    if (item?.isDirectory) {\n      // item 是个文件夹\n      const reader = (item as FileSystemDirectoryEntry).createReader();\n      let flag = false;\n      const readEntries = () => {\n        reader.readEntries((entries) => {\n          if (!flag) {\n            restFileCount -= 1;\n            flag = true;\n          }\n          if (entries.length === 0) {\n            onFinish();\n          } else {\n            readEntries(); // the maximum files read using readEntries is 100\n            entries.forEach(_loopDirectory);\n          }\n        });\n      };\n      readEntries();\n      return;\n    }\n\n    restFileCount -= 1;\n    onFinish();\n  };\n\n  [].slice\n    .call(itemList)\n    .forEach(\n      (item: DataTransferItem) =>\n        item.webkitGetAsEntry && _loopDirectory(item.webkitGetAsEntry())\n    );\n};\n\nexport const isImage = (file: File) => {\n  return file.type?.includes('image');\n};\n\nexport const getFiles = (fileList?: FileList, accept?: string): File[] => {\n  if (!fileList) {\n    return [];\n  }\n  const files = Array.from(fileList);\n  if (accept) {\n    return files.filter((file) => {\n      return isAcceptFile(file, accept);\n    });\n  }\n  return files;\n};\n"
  },
  {
    "path": "packages/web-vue/components/verification-code/CHANGELOG.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.55.2\n\n`2024-05-10`\n\n### 🐛 BugFix\n\n- fix formatter not being applied during paste ([#3110](https://github.com/arco-design/arco-design-vue/pull/3110))\n\n"
  },
  {
    "path": "packages/web-vue/components/verification-code/CHANGELOG.zh-CN.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.55.2\n\n`2024-05-10`\n\n### 🐛 问题修复\n\n- 修复粘贴时`formatter`未生效 ([#3110](https://github.com/arco-design/arco-design-vue/pull/3110))\n\n"
  },
  {
    "path": "packages/web-vue/components/verification-code/README.en-US.md",
    "content": "```yaml\nmeta:\n  type: Component\n  category: Data Entry\ntitle: VerificationCode\ndescription: Verification code input component.\n```\n\n*Auto translate by google.*\n\n@import ./__demo__/basic.md\n@import ./__demo__/status.md\n@import ./__demo__/masked.md\n@import ./__demo__/separator.md\n@import ./__demo__/form.md\n@import ./__demo__/formatter.md\n\n## API\n\n\n### `<verification-code>` Props\n\n|Attribute|Description|Type|Default|\n|---|---|---|:---:|\n|model-value **(v-model)**|Value|`string`|`-`|\n|default-value|Default value (uncontrolled state)|`string`|`''`|\n|length|The length of the verification code, rendering the corresponding number of input boxes according to the length.|`number`|`6`|\n|size|Input size|`'mini' \\| 'small' \\| 'medium' \\| 'large'`|`'medium'`|\n|disabled|Whether to disable|`boolean`|`false`|\n|masked|Password mode|`boolean`|`false`|\n|readonly|Readonly|`boolean`|`false`|\n|error|Whether it is an error state|`boolean`|`false`|\n|separator|Separator. Customizable rendering separators after input boxes with different indexes|`(index: number, character: string) => VNode`|`-`|\n|formatter|Formatter function, triggered when the user input value changes|`(inputValue: string, index: number, value: string) => string \\| boolean`|`-`|\n### `<verification-code>` Events\n\n|Event Name|Description|Parameters|\n|---|---|---|\n|change|Triggered when the value changes|value: ` string `|\n|finish|Triggered when the filling is complete|value: ` string `|\n|input|Triggered on input|inputValue: ` string `<br>index: ` number `<br>ev: `Event`|\n\n\n"
  },
  {
    "path": "packages/web-vue/components/verification-code/README.zh-CN.md",
    "content": "```yaml\nmeta:\n  type: 组件\n  category: 数据输入\ntitle: 验证码输入 VerificationCode\ndescription: 验证码输入组件\n```\n\n@import ./__demo__/basic.md\n@import ./__demo__/status.md\n@import ./__demo__/masked.md\n@import ./__demo__/separator.md\n@import ./__demo__/form.md\n@import ./__demo__/formatter.md\n\n## API\n\n\n### `<verification-code>` Props\n\n|参数名|描述|类型|默认值|\n|---|---|---|:---:|\n|model-value **(v-model)**|绑定值|`string`|`-`|\n|default-value|默认值（非受控状态）|`string`|`''`|\n|length|验证码的长度，根据长度渲染对应个数的输入框|`number`|`6`|\n|size|输入框大小|`'mini' \\| 'small' \\| 'medium' \\| 'large'`|`'medium'`|\n|disabled|是否禁用|`boolean`|`false`|\n|masked|是否密码模式|`boolean`|`false`|\n|readonly|只读|`boolean`|`false`|\n|error|是否为错误状态|`boolean`|`false`|\n|separator|分隔符。可在不同索引的输入框后自定义渲染分隔符|`(index: number, character: string) => VNode`|`-`|\n|formatter|格式化函数，当用户输入值改变时触发|`(inputValue: string, index: number, value: string) => string \\| boolean`|`-`|\n### `<verification-code>` Events\n\n|事件名|描述|参数|\n|---|---|---|\n|change|值发生改变时触发|value: ` string `|\n|finish|填充完成时触发|value: ` string `|\n|input|输入时触发|inputValue: ` string `<br>index: ` number `<br>ev: `Event`|\n\n\n"
  },
  {
    "path": "packages/web-vue/components/verification-code/TEMPLATE.md",
    "content": "## zh-CN\n```yaml\nmeta:\n  type: 组件\n  category: 数据输入\ntitle: 验证码输入 VerificationCode\ndescription: 验证码输入组件\n```\n---\n## en-US\n```yaml\nmeta:\n  type: Component\n  category: Data Entry\ntitle: VerificationCode\ndescription: Verification code input component.\n```\n---\n\n@import ./__demo__/basic.md\n@import ./__demo__/status.md\n@import ./__demo__/masked.md\n@import ./__demo__/separator.md\n@import ./__demo__/form.md\n@import ./__demo__/formatter.md\n\n## API\n\n%%API(verification-code.tsx)%%\n"
  },
  {
    "path": "packages/web-vue/components/verification-code/__demo__/basic.md",
    "content": "```yaml\ntitle:\n  zh-CN: 基本使用\n  en-US: Basic Usage\n```\n\n## zh-CN\n\n验证码输入框的基本用法。\n\n---\n\n## en-US\n\nBasic usage\n\n---\n\n```vue\n<template>\n  <a-verification-code v-model=\"value\" style=\"width: 300px\" @finish=\"onFinish\" />\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport { Message} from '@arco-design/web-vue';\n\nconst value = ref('654321');\nconst onFinish = (value) => Message.info(`Verification code: ${value}`);\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/verification-code/__demo__/form.md",
    "content": "```yaml\ntitle:\n  zh-CN: 配合表单使用\n  en-US: With Form\n```\n\n## zh-CN\n\n配合表单使用实现校验。\n\n---\n\n## en-US\n\nUse with forms to implement verification.\n\n---\n\n```vue\n<template>\n  <a-form ref=\"formRef\" :model=\"form\" style=\"width: 300px\">\n    <a-form-item\n      field=\"code\"\n      label=\"code\"\n      :rules=\"[\n        {required:true,message:'Verification code is required'},\n        {minLength:6, message:'Verification code is incomplete'},\n        { match: /^\\d+$/, message: 'Must be numeric' },\n      ]\"\n    >\n      <a-verification-code v-model=\"form.code\" style=\"width: 300px\" @finish=\"onFinish\" />\n    </a-form-item>\n    <a-form-item>\n      <a-button style=\"width: 60px\" type='primary' size='large' htmlType='submit'>Submit</a-button>\n    </a-form-item>\n  </a-form>\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport { Message} from '@arco-design/web-vue';\n\nconst value = ref('654321');\nconst formRef = ref(null);\nconst form = ref({\n  code: '',\n})\nconst onFinish = (value) => Message.info(`Verification code: ${value}`);\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/verification-code/__demo__/formatter.md",
    "content": "```yaml\ntitle:\n  zh-CN: 格式化输入\n  en-US: Formatter input\n```\n\n## zh-CN\n\n通过 `formatter` 校验输入。此外，可以返回非布尔类型来将用户输入的字符串为特定的格式。\n\n---\n\n## en-US\n\nValidate input using `formatter`. Additionally, it can return non-boolean types to format the user-entered string into a specific format.\n\n---\n\n```vue\n<template>\n  <a-space direction=\"vertical\">\n    <a-verification-code\n      defaultValue='123456'\n      style=\"width: 300px\"\n      :formatter=\"(inputValue) =>  /^\\d*$/.test(inputValue) ? inputValue : false\"\n    />\n    <a-verification-code\n      defaultValue='abcdef'\n      style=\"width: 300px\"\n      :formatter=\"(inputValue) => /^[a-zA-Z]*$/.test(inputValue) ? inputValue.toUpperCase() : ''\"\n    />\n  </a-space>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/verification-code/__demo__/masked.md",
    "content": "```yaml\ntitle:\n  zh-CN: 密码模式\n  en-US: Masked\n```\n\n## zh-CN\n\n指定 `masked = true`可开启密码模式\n\n---\n\n## en-US\n\nUse `masked = true` to turn on password mode\n\n---\n\n```vue\n<template>\n  <a-verification-code defaultValue=\"123\" style=\"width: 300px\"  masked @finish=\"onFinish\" />\n</template>\n\n<script setup>\nimport { Message} from '@arco-design/web-vue';\n\nconst onFinish = (value) => Message.info(`Verification code: ${value}`);\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/verification-code/__demo__/separator.md",
    "content": "```yaml\ntitle:\n  zh-CN: 自定义分隔符\n  en-US: Custom separator\n```\n\n## zh-CN\n\n指定 `separator` 可以自定义渲染分隔符。\n\n---\n\n## en-US\n\nSpecify `separator` to customize the rendering separator\n\n---\n\n```vue\n<template>\n  <a-verification-code\n    style=\"width: 400px\"\n    :length=\"9\"\n    :separator=\"(index) => (index + 1) % 3 || index > 7 ? null : '-'\"\n    @finish=\"(value) => Message.info(`Verification code: ${value}`)\"\n  />\n</template>\n\n<script setup>\nimport { Message} from '@arco-design/web-vue';\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/verification-code/__demo__/status.md",
    "content": "```yaml\ntitle:\n  zh-CN: 不同状态\n  en-US: Different status\n```\n\n## zh-CN\n\n禁用状态、只读状态、错误状态。\n\n---\n\n## en-US\n\nDisabled, readonly, error status.\n\n---\n\n```vue\n<template>\n  <a-space direction=\"vertical\">\n    <a-space>\n      <a-typography-text style=\"width: 80px\">Disabled:</a-typography-text>\n      <a-verification-code defaultValue=\"123456\" style=\"width: 300px\" disabled />\n    </a-space>\n    <a-space>\n      <a-typography-text  style=\"width: 80px\">Readonly:</a-typography-text>\n      <a-verification-code defaultValue=\"123456\" style=\"width: 300px\" readonly />\n    </a-space>\n    <a-space>\n      <a-typography-text style=\"width: 80px\">Error:</a-typography-text>\n      <a-verification-code defaultValue=\"123456\" style=\"width: 300px\" error />\n    </a-space>\n  </a-space>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/verification-code/__test__/__snapshots__/demo.test.ts.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`<verification-code> demo: render [basic] correctly 1`] = `\n\"<div class=\\\\\"arco-verification-code\\\\\" style=\\\\\"width: 300px;\\\\\"><span class=\\\\\"arco-input-wrapper arco-input\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" value=\\\\\"6\\\\\"><!----><!----></span>\n  <!----><span class=\\\\\"arco-input-wrapper arco-input\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" value=\\\\\"5\\\\\"><!----><!----></span>\n  <!----><span class=\\\\\"arco-input-wrapper arco-input\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" value=\\\\\"4\\\\\"><!----><!----></span>\n  <!----><span class=\\\\\"arco-input-wrapper arco-input\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" value=\\\\\"3\\\\\"><!----><!----></span>\n  <!----><span class=\\\\\"arco-input-wrapper arco-input\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" value=\\\\\"2\\\\\"><!----><!----></span>\n  <!----><span class=\\\\\"arco-input-wrapper arco-input\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" value=\\\\\"1\\\\\"><!----><!----></span>\n  <!---->\n</div>\"\n`;\n\nexports[`<verification-code> demo: render [form] correctly 1`] = `\n\"<form class=\\\\\"arco-form arco-form-layout-horizontal arco-form-size-medium\\\\\" style=\\\\\"width: 300px;\\\\\">\n  <div class=\\\\\"arco-row arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-horizontal\\\\\">\n    <div class=\\\\\"arco-col arco-col-5 arco-form-item-label-col\\\\\"><label class=\\\\\"arco-form-item-label\\\\\"><strong class=\\\\\"arco-form-item-label-required-symbol\\\\\"><svg fill=\\\\\"currentColor\\\\\" viewBox=\\\\\"0 0 1024 1024\\\\\" width=\\\\\"1em\\\\\" height=\\\\\"1em\\\\\"><path d=\\\\\"M583.338667 17.066667c18.773333 0 34.133333 15.36 34.133333 34.133333v349.013333l313.344-101.888a34.133333 34.133333 0 0 1 43.008 22.016l42.154667 129.706667a34.133333 34.133333 0 0 1-21.845334 43.178667l-315.733333 102.4 208.896 287.744a34.133333 34.133333 0 0 1-7.509333 47.786666l-110.421334 80.213334a34.133333 34.133333 0 0 1-47.786666-7.509334L505.685333 706.218667 288.426667 1005.226667a34.133333 34.133333 0 0 1-47.786667 7.509333l-110.421333-80.213333a34.133333 34.133333 0 0 1-7.509334-47.786667l214.186667-295.253333L29.013333 489.813333a34.133333 34.133333 0 0 1-22.016-43.008l42.154667-129.877333a34.133333 34.133333 0 0 1 43.008-22.016l320.512 104.106667L412.672 51.2c0-18.773333 15.36-34.133333 34.133333-34.133333h136.533334z\\\\\"></path></svg></strong>code\n        <!--v-if-->\n        <!--v-if-->\n      </label></div>\n    <div class=\\\\\"arco-col arco-col-19 arco-form-item-wrapper-col\\\\\" id=\\\\\"code\\\\\">\n      <div class=\\\\\"arco-form-item-content-wrapper\\\\\">\n        <div class=\\\\\"arco-form-item-content arco-form-item-content-flex\\\\\">\n          <div class=\\\\\"arco-verification-code\\\\\" style=\\\\\"width: 300px;\\\\\"><span class=\\\\\"arco-input-wrapper arco-input\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" value=\\\\\"\\\\\"><!----><!----></span>\n            <!----><span class=\\\\\"arco-input-wrapper arco-input\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" value=\\\\\"\\\\\"><!----><!----></span>\n            <!----><span class=\\\\\"arco-input-wrapper arco-input\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" value=\\\\\"\\\\\"><!----><!----></span>\n            <!----><span class=\\\\\"arco-input-wrapper arco-input\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" value=\\\\\"\\\\\"><!----><!----></span>\n            <!----><span class=\\\\\"arco-input-wrapper arco-input\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" value=\\\\\"\\\\\"><!----><!----></span>\n            <!----><span class=\\\\\"arco-input-wrapper arco-input\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" value=\\\\\"\\\\\"><!----><!----></span>\n            <!---->\n          </div>\n        </div>\n      </div>\n      <!--v-if-->\n      <!--v-if-->\n    </div>\n  </div>\n  <div class=\\\\\"arco-row arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-horizontal\\\\\">\n    <div class=\\\\\"arco-col arco-col-5 arco-form-item-label-col\\\\\"><label class=\\\\\"arco-form-item-label\\\\\">\n        <!--v-if-->\n        <!--v-if-->\n        <!--v-if-->\n      </label></div>\n    <div class=\\\\\"arco-col arco-col-19 arco-form-item-wrapper-col\\\\\">\n      <div class=\\\\\"arco-form-item-content-wrapper\\\\\">\n        <div class=\\\\\"arco-form-item-content arco-form-item-content-flex\\\\\"><button class=\\\\\"arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-large arco-btn-status-normal\\\\\" type=\\\\\"submit\\\\\" style=\\\\\"width: 60px;\\\\\">\n            <!--v-if-->Submit\n          </button></div>\n      </div>\n      <!--v-if-->\n      <!--v-if-->\n    </div>\n  </div>\n</form>\"\n`;\n\nexports[`<verification-code> demo: render [formatter] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-vertical\\\\\" style=\\\\\"column-gap: 8px; row-gap: 8px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-verification-code\\\\\" style=\\\\\"width: 300px;\\\\\"><span class=\\\\\"arco-input-wrapper arco-input\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" value=\\\\\"1\\\\\"><!----><!----></span>\n      <!----><span class=\\\\\"arco-input-wrapper arco-input\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" value=\\\\\"2\\\\\"><!----><!----></span>\n      <!----><span class=\\\\\"arco-input-wrapper arco-input\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" value=\\\\\"3\\\\\"><!----><!----></span>\n      <!----><span class=\\\\\"arco-input-wrapper arco-input\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" value=\\\\\"4\\\\\"><!----><!----></span>\n      <!----><span class=\\\\\"arco-input-wrapper arco-input\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" value=\\\\\"5\\\\\"><!----><!----></span>\n      <!----><span class=\\\\\"arco-input-wrapper arco-input\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" value=\\\\\"6\\\\\"><!----><!----></span>\n      <!---->\n    </div>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-verification-code\\\\\" style=\\\\\"width: 300px;\\\\\"><span class=\\\\\"arco-input-wrapper arco-input\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" value=\\\\\"a\\\\\"><!----><!----></span>\n      <!----><span class=\\\\\"arco-input-wrapper arco-input\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" value=\\\\\"b\\\\\"><!----><!----></span>\n      <!----><span class=\\\\\"arco-input-wrapper arco-input\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" value=\\\\\"c\\\\\"><!----><!----></span>\n      <!----><span class=\\\\\"arco-input-wrapper arco-input\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" value=\\\\\"d\\\\\"><!----><!----></span>\n      <!----><span class=\\\\\"arco-input-wrapper arco-input\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" value=\\\\\"e\\\\\"><!----><!----></span>\n      <!----><span class=\\\\\"arco-input-wrapper arco-input\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" value=\\\\\"f\\\\\"><!----><!----></span>\n      <!---->\n    </div>\n  </div>\n</div>\"\n`;\n\nexports[`<verification-code> demo: render [masked] correctly 1`] = `\n\"<div class=\\\\\"arco-verification-code\\\\\" style=\\\\\"width: 300px;\\\\\"><span class=\\\\\"arco-input-wrapper arco-input\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"password\\\\\" value=\\\\\"1\\\\\"><!----><!----></span>\n  <!----><span class=\\\\\"arco-input-wrapper arco-input\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"password\\\\\" value=\\\\\"2\\\\\"><!----><!----></span>\n  <!----><span class=\\\\\"arco-input-wrapper arco-input\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"password\\\\\" value=\\\\\"3\\\\\"><!----><!----></span>\n  <!----><span class=\\\\\"arco-input-wrapper arco-input\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"password\\\\\" value=\\\\\"\\\\\"><!----><!----></span>\n  <!----><span class=\\\\\"arco-input-wrapper arco-input\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"password\\\\\" value=\\\\\"\\\\\"><!----><!----></span>\n  <!----><span class=\\\\\"arco-input-wrapper arco-input\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"password\\\\\" value=\\\\\"\\\\\"><!----><!----></span>\n  <!---->\n</div>\"\n`;\n\nexports[`<verification-code> demo: render [separator] correctly 1`] = `\n\"<div class=\\\\\"arco-verification-code\\\\\" style=\\\\\"width: 400px;\\\\\"><span class=\\\\\"arco-input-wrapper arco-input\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" value=\\\\\"\\\\\"><!----><!----></span>\n  <!----><span class=\\\\\"arco-input-wrapper arco-input\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" value=\\\\\"\\\\\"><!----><!----></span>\n  <!----><span class=\\\\\"arco-input-wrapper arco-input\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" value=\\\\\"\\\\\"><!----><!----></span>-<span class=\\\\\"arco-input-wrapper arco-input\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" value=\\\\\"\\\\\"><!----><!----></span>\n  <!----><span class=\\\\\"arco-input-wrapper arco-input\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" value=\\\\\"\\\\\"><!----><!----></span>\n  <!----><span class=\\\\\"arco-input-wrapper arco-input\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" value=\\\\\"\\\\\"><!----><!----></span>-<span class=\\\\\"arco-input-wrapper arco-input\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" value=\\\\\"\\\\\"><!----><!----></span>\n  <!----><span class=\\\\\"arco-input-wrapper arco-input\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" value=\\\\\"\\\\\"><!----><!----></span>\n  <!----><span class=\\\\\"arco-input-wrapper arco-input\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" value=\\\\\"\\\\\"><!----><!----></span>\n  <!---->\n</div>\"\n`;\n\nexports[`<verification-code> demo: render [status] correctly 1`] = `\n\"<div class=\\\\\"arco-space arco-space-vertical\\\\\" style=\\\\\"column-gap: 8px; row-gap: 8px;\\\\\">\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 8px; row-gap: 8px;\\\\\">\n      <!---->\n      <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-typography\\\\\" style=\\\\\"width: 80px;\\\\\">Disabled:<!----><!--v-if--><!--v-if--><!--v-if--></span></div>\n      <!---->\n      <div class=\\\\\"arco-space-item\\\\\">\n        <div class=\\\\\"arco-verification-code\\\\\" style=\\\\\"width: 300px;\\\\\"><span class=\\\\\"arco-input-wrapper arco-input-disabled arco-input\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" disabled=\\\\\"\\\\\" value=\\\\\"1\\\\\"><!----><!----></span>\n          <!----><span class=\\\\\"arco-input-wrapper arco-input-disabled arco-input\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" disabled=\\\\\"\\\\\" value=\\\\\"2\\\\\"><!----><!----></span>\n          <!----><span class=\\\\\"arco-input-wrapper arco-input-disabled arco-input\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" disabled=\\\\\"\\\\\" value=\\\\\"3\\\\\"><!----><!----></span>\n          <!----><span class=\\\\\"arco-input-wrapper arco-input-disabled arco-input\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" disabled=\\\\\"\\\\\" value=\\\\\"4\\\\\"><!----><!----></span>\n          <!----><span class=\\\\\"arco-input-wrapper arco-input-disabled arco-input\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" disabled=\\\\\"\\\\\" value=\\\\\"5\\\\\"><!----><!----></span>\n          <!----><span class=\\\\\"arco-input-wrapper arco-input-disabled arco-input\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" disabled=\\\\\"\\\\\" value=\\\\\"6\\\\\"><!----><!----></span>\n          <!---->\n        </div>\n      </div>\n    </div>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 8px; row-gap: 8px;\\\\\">\n      <!---->\n      <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-typography\\\\\" style=\\\\\"width: 80px;\\\\\">Readonly:<!----><!--v-if--><!--v-if--><!--v-if--></span></div>\n      <!---->\n      <div class=\\\\\"arco-space-item\\\\\">\n        <div class=\\\\\"arco-verification-code\\\\\" style=\\\\\"width: 300px;\\\\\"><span class=\\\\\"arco-input-wrapper arco-input\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" readonly=\\\\\"\\\\\" value=\\\\\"1\\\\\"><!----><!----></span>\n          <!----><span class=\\\\\"arco-input-wrapper arco-input\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" readonly=\\\\\"\\\\\" value=\\\\\"2\\\\\"><!----><!----></span>\n          <!----><span class=\\\\\"arco-input-wrapper arco-input\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" readonly=\\\\\"\\\\\" value=\\\\\"3\\\\\"><!----><!----></span>\n          <!----><span class=\\\\\"arco-input-wrapper arco-input\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" readonly=\\\\\"\\\\\" value=\\\\\"4\\\\\"><!----><!----></span>\n          <!----><span class=\\\\\"arco-input-wrapper arco-input\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" readonly=\\\\\"\\\\\" value=\\\\\"5\\\\\"><!----><!----></span>\n          <!----><span class=\\\\\"arco-input-wrapper arco-input\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" readonly=\\\\\"\\\\\" value=\\\\\"6\\\\\"><!----><!----></span>\n          <!---->\n        </div>\n      </div>\n    </div>\n  </div>\n  <!---->\n  <div class=\\\\\"arco-space-item\\\\\">\n    <div class=\\\\\"arco-space arco-space-horizontal arco-space-align-center\\\\\" style=\\\\\"column-gap: 8px; row-gap: 8px;\\\\\">\n      <!---->\n      <div class=\\\\\"arco-space-item\\\\\"><span class=\\\\\"arco-typography\\\\\" style=\\\\\"width: 80px;\\\\\">Error:<!----><!--v-if--><!--v-if--><!--v-if--></span></div>\n      <!---->\n      <div class=\\\\\"arco-space-item\\\\\">\n        <div class=\\\\\"arco-verification-code\\\\\" style=\\\\\"width: 300px;\\\\\"><span class=\\\\\"arco-input-wrapper arco-input-error arco-input\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" aria-invalid=\\\\\"true\\\\\" value=\\\\\"1\\\\\"><!----><!----></span>\n          <!----><span class=\\\\\"arco-input-wrapper arco-input-error arco-input\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" aria-invalid=\\\\\"true\\\\\" value=\\\\\"2\\\\\"><!----><!----></span>\n          <!----><span class=\\\\\"arco-input-wrapper arco-input-error arco-input\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" aria-invalid=\\\\\"true\\\\\" value=\\\\\"3\\\\\"><!----><!----></span>\n          <!----><span class=\\\\\"arco-input-wrapper arco-input-error arco-input\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" aria-invalid=\\\\\"true\\\\\" value=\\\\\"4\\\\\"><!----><!----></span>\n          <!----><span class=\\\\\"arco-input-wrapper arco-input-error arco-input\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" aria-invalid=\\\\\"true\\\\\" value=\\\\\"5\\\\\"><!----><!----></span>\n          <!----><span class=\\\\\"arco-input-wrapper arco-input-error arco-input\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-medium\\\\\" type=\\\\\"text\\\\\" aria-invalid=\\\\\"true\\\\\" value=\\\\\"6\\\\\"><!----><!----></span>\n          <!---->\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\"\n`;\n"
  },
  {
    "path": "packages/web-vue/components/verification-code/__test__/demo.test.ts",
    "content": "import demoTest from '../../../scripts/demo-test';\n\ndemoTest('verification-code');\n"
  },
  {
    "path": "packages/web-vue/components/verification-code/index.ts",
    "content": "import type { App } from 'vue';\nimport type { ArcoOptions } from '../_utils/types';\nimport { setGlobalConfig, getComponentPrefix } from '../_utils/global-config';\nimport _VerificationCode from './verification-code';\n\nconst VerificationCode = Object.assign(_VerificationCode, {\n  install: (app: App, options?: ArcoOptions) => {\n    setGlobalConfig(app, options);\n    const componentPrefix = getComponentPrefix(options);\n\n    app.component(componentPrefix + _VerificationCode.name, _VerificationCode);\n  },\n});\n\nexport type VerificationCodeInstance = InstanceType<typeof _VerificationCode>;\n\nexport default VerificationCode;\n"
  },
  {
    "path": "packages/web-vue/components/verification-code/style/index.less",
    "content": "@import './token.less';\n@import '../../input/style/token.less';\n\n@verification-code-prefix-cls: ~'@{prefix}-verification-code';\n@input-prefix-cls: ~'@{prefix}-input';\n\n.@{verification-code-prefix-cls} {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  column-gap: 4px;\n\n  .@{input-prefix-cls} {\n    width: @input-size-default-height;\n    padding-right: 0;\n    padding-left: 0;\n    text-align: center;\n  }\n\n  .@{input-prefix-cls}-size-small {\n    width: @input-size-small-height;\n  }\n\n  .@{input-prefix-cls}-size-mini {\n    width: @input-size-mini-height;\n  }\n\n  .@{input-prefix-cls}-size-large {\n    width: @input-size-large-height;\n  }\n}\n"
  },
  {
    "path": "packages/web-vue/components/verification-code/style/index.ts",
    "content": "import '../../style/index.less';\nimport './index.less';\n"
  },
  {
    "path": "packages/web-vue/components/verification-code/style/token.less",
    "content": "@import '../../style/theme/index.less';\n"
  },
  {
    "path": "packages/web-vue/components/verification-code/verification-code.tsx",
    "content": "import { PropType, VNode, computed, defineComponent, ref, watch } from 'vue';\nimport { Size } from '../_utils/constant';\nimport { getPrefixCls } from '../_utils/global-config';\nimport ArcoInput from '../input';\nimport { isExist, isFunction, isString } from '../_utils/is';\nimport { Backspace, ArrowLeft, ArrowRight } from '../_utils/keycode';\n\nexport default defineComponent({\n  name: 'VerificationCode',\n  props: {\n    /**\n     * @zh 绑定值\n     * @en Value\n     */\n    modelValue: String,\n    /**\n     * @zh 默认值（非受控状态）\n     * @en Default value (uncontrolled state)\n     */\n    defaultValue: {\n      type: String,\n      default: '',\n    },\n    /**\n     * @zh 验证码的长度，根据长度渲染对应个数的输入框\n     * @en The length of the verification code, rendering the corresponding number of input boxes according to the length.\n     */\n    length: {\n      type: Number,\n      default: 6,\n    },\n    /**\n     * @zh 输入框大小\n     * @en Input size\n     * @values 'mini','small','medium','large'\n     * @defaultValue 'medium'\n     */\n    size: {\n      type: String as PropType<Size>,\n    },\n    /**\n     * @zh 是否禁用\n     * @en Whether to disable\n     */\n    disabled: Boolean,\n    /**\n     * @zh 是否密码模式\n     * @en Password mode\n     */\n    masked: Boolean,\n    /**\n     * @zh 只读\n     * @en Readonly\n     */\n    readonly: Boolean,\n    /**\n     * @zh 是否为错误状态\n     * @en Whether it is an error state\n     */\n    error: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 分隔符。可在不同索引的输入框后自定义渲染分隔符\n     * @en Separator. Customizable rendering separators after input boxes with different indexes\n     */\n    separator: {\n      type: Function as PropType<(index: number, character: string) => VNode>,\n    },\n    /**\n     * @zh 格式化函数，当用户输入值改变时触发\n     * @en Formatter function, triggered when the user input value changes\n     */\n    formatter: {\n      type: Function as PropType<\n        (inputValue: string, index: number, value: string) => string | boolean\n      >,\n    },\n  },\n  emits: {\n    'update:modelValue': (value: string) => true,\n    /**\n     * @zh 值发生改变时触发\n     * @en Triggered when the value changes\n     * @param { string } value\n     */\n    'change': (value: string) => true,\n    /**\n     * @zh 填充完成时触发\n     * @en Triggered when the filling is complete\n     * @param { string } value\n     */\n    'finish': (value: string) => true,\n    /**\n     * @zh 输入时触发\n     * @en Triggered on input\n     * @param { string } inputValue\n     * @param { number } index\n     * @param {Event} ev\n     */\n    'input': (inputValue: string, index: number, ev: Event) => true,\n  },\n  setup(props, { emit }) {\n    const prefixCls = getPrefixCls('verification-code');\n    const prefixInputCls = getPrefixCls('input');\n    const inputRefList = ref([] as HTMLElement[]);\n\n    const mergedValue = computed(() => props.modelValue ?? props.defaultValue);\n    const type = computed(() => (props.masked ? 'password' : 'text'));\n    const inputCls = computed(() => [\n      prefixInputCls,\n      {\n        [`${prefixInputCls}-size-${props.size}`]: props.size,\n      },\n    ]);\n\n    const filledValue = computed(() => {\n      const newVal = String(mergedValue.value).split('');\n      return new Array(props.length).fill('').map((_, index) => {\n        return isExist(newVal[index]) ? String(newVal[index]) : '';\n      }) as string[];\n    });\n\n    const innerValue = ref(filledValue.value);\n\n    watch(mergedValue, () => {\n      innerValue.value = filledValue.value;\n    });\n\n    const updateValue = () => {\n      const value = innerValue.value.join('').trim();\n      emit('update:modelValue', value);\n      emit('change', value);\n      if (value.length === props.length) {\n        emit('finish', value);\n      }\n      focusFirstEmptyInput();\n    };\n\n    const handleFocus = (index: number) => inputRefList?.value[index].focus();\n    const focusFirstEmptyInput = (index?: number) => {\n      if (isExist(index) && innerValue.value[index as number]) {\n        return;\n      }\n      for (let i = 0; i < innerValue.value.length; i++) {\n        if (!innerValue.value[i]) {\n          handleFocus(i);\n          break;\n        }\n      }\n    };\n\n    const handlePaste = (e: ClipboardEvent, index: number) => {\n      e.preventDefault();\n      const { clipboardData } = e;\n      const text = clipboardData?.getData('text');\n      if (!text) return;\n\n      text.split('').forEach((char, i) => {\n        if (index + i >= props.length) return;\n\n        if (isFunction(props.formatter)) {\n          const result = props.formatter(\n            char,\n            index + i,\n            innerValue.value.join('')\n          );\n          if (result === false) {\n            index -= 1;\n            return;\n          }\n          if (isString(result)) {\n            char = result.charAt(0);\n          }\n        }\n\n        innerValue.value[index + i] = char;\n      });\n      updateValue();\n    };\n\n    const handleKeydown = (index: number, e: KeyboardEvent) => {\n      const keyCode = e.code || e.key;\n\n      if (keyCode === Backspace.code && !innerValue.value[index]) {\n        e.preventDefault();\n        innerValue.value[Math.max(index - 1, 0)] = '';\n        updateValue();\n      } else if (keyCode === ArrowLeft.code && index > 0) {\n        e.preventDefault();\n        handleFocus(index - 1);\n      } else if (\n        keyCode === ArrowRight.code &&\n        innerValue.value[index] &&\n        index < props.length - 1\n      ) {\n        e.preventDefault();\n        handleFocus(index + 1);\n      }\n    };\n\n    const handleInput = (index: number, value: string, event: Event) => {\n      let char = (value || '').trim().charAt(value.length - 1);\n      emit('input', char, index, event);\n\n      if (isFunction(props.formatter)) {\n        const result = props.formatter(char, index, innerValue.value.join(''));\n        if (result === false) return;\n        if (isString(result)) {\n          char = result.charAt(0);\n        }\n      }\n\n      innerValue.value[index] = char;\n      updateValue();\n    };\n\n    return () => {\n      return (\n        <div class={prefixCls}>\n          {innerValue.value.map((c, i) => (\n            <>\n              <ArcoInput\n                key={i}\n                ref={(el: any) => (inputRefList.value[i] = el)}\n                type={type.value}\n                class={inputCls.value}\n                modelValue={c}\n                size={props.size}\n                error={props.error}\n                disabled={props.disabled}\n                readonly={props.readonly}\n                onFocus={() => focusFirstEmptyInput(i)}\n                onInput={(v, e) => handleInput(i, v, e)}\n                // @ts-ignore\n                onKeydown={(e) => handleKeydown(i, e)}\n                onPaste={(e: ClipboardEvent) => handlePaste(e, i)}\n              />\n              {props.separator?.(i, c)}\n            </>\n          ))}\n        </div>\n      );\n    };\n  },\n});\n"
  },
  {
    "path": "packages/web-vue/components/watermark/CHANGELOG.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.54.4\n\n`2024-02-02`\n\n### 🐛 BugFix\n\n- Fix font color does not take effect ([#2942](https://github.com/arco-design/arco-design-vue/pull/2942))\n\n\n## 2.54.1\n\n`2023-12-28`\n\n### 🆕 Feature\n\n- watermark font color  follows the theme ([#2790](https://github.com/arco-design/arco-design-vue/pull/2790))\n\n\n## 2.53.2\n\n`2023-11-10`\n\n### 🐛 BugFix\n\n- Fix the problem of error reporting when styles are loaded on demand ([#2787](https://github.com/arco-design/arco-design-vue/pull/2787))\n\n\n## 2.53.1\n\n`2023-11-08`\n\n### 🐛 BugFix\n\n- Fix the problem that component entrance is not exposed ([#2782](https://github.com/arco-design/arco-design-vue/pull/2782))\n\n\n## 2.53.0\n\n`2023-11-03`\n\n### 🆕 Feature\n\n- add watermark component ([#2741](https://github.com/arco-design/arco-design-vue/pull/2741))\n\n\n"
  },
  {
    "path": "packages/web-vue/components/watermark/CHANGELOG.zh-CN.md",
    "content": "```yaml\nchangelog: true\n```\n\n## 2.54.4\n\n`2024-02-02`\n\n### 🐛 问题修复\n\n- 修复字体颜色不生效问题 ([#2942](https://github.com/arco-design/arco-design-vue/pull/2942))\n\n\n## 2.54.1\n\n`2023-12-28`\n\n### 🆕 新增功能\n\n- 水印字体色跟随主题变化 ([#2790](https://github.com/arco-design/arco-design-vue/pull/2790))\n\n\n## 2.53.2\n\n`2023-11-10`\n\n### 🐛 问题修复\n\n- 修复样式按需加载报错问题 ([#2787](https://github.com/arco-design/arco-design-vue/pull/2787))\n\n\n## 2.53.1\n\n`2023-11-08`\n\n### 🐛 问题修复\n\n- 修复组件入口未暴露问题 ([#2782](https://github.com/arco-design/arco-design-vue/pull/2782))\n\n\n## 2.53.0\n\n`2023-11-03`\n\n### 🆕 新增功能\n\n- 新增水印组件 ([#2741](https://github.com/arco-design/arco-design-vue/pull/2741))\n\n\n"
  },
  {
    "path": "packages/web-vue/components/watermark/README.en-US.md",
    "content": "```yaml\nmeta:\n  type: Component\n  category: Other\ntitle: Watermark\ndescription: Used to Add a watermark to a specified area.\n```\n\n*Auto translate by google.*\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/multiline.md\n\n@import ./__demo__/image.md\n\n@import ./__demo__/custom.md\n\n## API\n\n\n### `<watermark>` Props\n\n|Attribute|Description|Type|Default|\n|---|---|---|:---:|\n|content|Watermark text content|`string \\| string[]`|`-`|\n|image|Image watermark address|`string`|`-`|\n|width|Watermark width|`number`|`-`|\n|height|Watermark height|`number`|`-`|\n|gap|Watermark spacing|`[number, number]`|`() => [90, 90]`|\n|offset|The offset from the upper left corner of the container, the default is half the watermark spacing|`[number, number]`|`[gap[0]/2, gap[1]/2]`|\n|rotate|Watermark rotation angle|`number`|`-22`|\n|font|Watermark font style, specific parameter configuration see [WatermarkFont](#WatermarkFont)|`WatermarkFont`|`-`|\n|z-index|Watermark z-index|`number`|`6`|\n|alpha|Watermark opacity|`number`|`1`|\n|anti-tamper|Watermark anti-tampering|`boolean`|`true`|\n|grayscale|Grayscale watermark|`boolean`|`false`|\n|repeat|Whether to repeat the watermark|`boolean`|`true`|\n|staggered|Whether to stagger the arrangement layout|`boolean`|`true`|\n\n\n\n\n### WatermarkFont\n\n|Name|Description|Type|Default|\n|---|---|---|:---:|\n|color|Font color|`string`|`rgba(0, 0, 0, 0.15)`|\n|fontSize|Font size|`number`|`16`|\n|fontFamily|Font family|`string`|`sans-serif`|\n|fontStyle|Font style|`'none' \\| 'normal' \\| 'italic' \\| 'oblique'`|`normal`|\n|textAlign|Font align|`'start' \\| 'end' \\| 'left' \\| 'right' \\| 'center'`|`center`|\n|fontWeight|Font weight|`'normal' \\| 'bold' \\| 'bolder' \\| 'lighter' \\| number`|`normal`|\n\n\n\n"
  },
  {
    "path": "packages/web-vue/components/watermark/README.zh-CN.md",
    "content": "```yaml\nmeta:\n  type: 组件\n  category: 其他\ntitle: 水印 Watermark\ndescription: 用于给页面的指定区域加上水印。\n```\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/multiline.md\n\n@import ./__demo__/image.md\n\n@import ./__demo__/custom.md\n\n## API\n\n\n### `<watermark>` Props\n\n|参数名|描述|类型|默认值|\n|---|---|---|:---:|\n|content|水印文字内容|`string \\| string[]`|`-`|\n|image|图片源，建议使用 2 倍或 3 倍图|`string`|`-`|\n|width|水印宽度（默认为内容宽度）|`number`|`-`|\n|height|水印高度（默认为内容高度）|`number`|`-`|\n|gap|水印间的间距|`[number, number]`|`() => [90, 90]`|\n|offset|距离容器左上角的偏移量，默认为水印间距的一半|`[number, number]`|`[gap[0]/2, gap[1]/2]`|\n|rotate|旋转角度|`number`|`-22`|\n|font|水印字体样式，具体参数配置看 [WatermarkFont](#WatermarkFont)|`WatermarkFont`|`-`|\n|z-index|水印层级|`number`|`6`|\n|alpha|透明度|`number`|`1`|\n|anti-tamper|水印防篡改|`boolean`|`true`|\n|grayscale|灰阶水印|`boolean`|`false`|\n|repeat|是否重复水印|`boolean`|`true`|\n|staggered|是否错开排列|`boolean`|`true`|\n\n\n\n\n### WatermarkFont\n\n|参数名|描述|类型|默认值|\n|---|---|---|:---:|\n|color|字体颜色|`string`|`rgba(0, 0, 0, 0.15)`|\n|fontSize|字体大小|`number`|`16`|\n|fontFamily|字体类型|`string`|`sans-serif`|\n|fontStyle|字体样式|`'none' \\| 'normal' \\| 'italic' \\| 'oblique'`|`normal`|\n|textAlign|字体对齐方式|`'start' \\| 'end' \\| 'left' \\| 'right' \\| 'center'`|`center`|\n|fontWeight|字体粗细|`'normal' \\| 'bold' \\| 'bolder' \\| 'lighter' \\| number`|`normal`|\n\n\n\n"
  },
  {
    "path": "packages/web-vue/components/watermark/TEMPLATE.md",
    "content": "## zh-CN\n```yaml\nmeta:\n  type: 组件\n  category: 其他\ntitle: 水印 Watermark\ndescription: 用于给页面的指定区域加上水印。\n```\n---\n## en-US\n```yaml\nmeta:\n  type: Component\n  category: Other\ntitle: Watermark\ndescription: Used to Add a watermark to a specified area.\n```\n---\n\n@import ./__demo__/basic.md\n\n@import ./__demo__/multiline.md\n\n@import ./__demo__/image.md\n\n@import ./__demo__/custom.md\n\n## API\n\n%%API(watermark.tsx)%%\n\n%%INTERFACE(interface.ts)%%\n\n"
  },
  {
    "path": "packages/web-vue/components/watermark/__demo__/basic.md",
    "content": "```yaml\ntitle:\n  zh-CN: 基本使用\n  en-US: Basic Usage\n```\n\n## zh-CN\n\n水印的基本用法。\n\n---\n\n## en-US\n\nBasic usage of the watermark.\n\n---\n\n```vue\n<template>\n  <a-watermark content=\"arco.design\">\n    <div style=\"width: 100%; height: 350px;\" />\n  </a-watermark>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/watermark/__demo__/custom.md",
    "content": "```yaml\ntitle:\n  zh-CN: 自定义\n  en-US: Custom\n```\n\n## zh-CN\n\n通过自定义参数以实现更多的水印效果。\n\n---\n\n## en-US\n\nCustomize the watermark.\n\n---\n\n```vue\n<template>\n  <a-form size=\"small\" :model=\"form\" auto-label-width>\n    <a-row :gutter=\"16\">\n      <a-col :span=\"24\">\n        <a-form-item field=\"rotate\" label=\"rotate\">\n          <a-slider v-model=\"form.rotate\" :min=\"-180\" :max=\"180\" />\n        </a-form-item>\n      </a-col>\n      <a-col :span=\"12\">\n        <a-form-item label=\"gap\">\n          <a-input-group>\n            <a-input-number\n              v-model=\"form.gap[0]\"\n              placeholder=\"gap[x]\"\n              :min=\"0\"\n            />\n            <a-input-number\n              v-model=\"form.gap[1]\"\n              placeholder=\"gap[y]\"\n              :min=\"0\"\n            />\n          </a-input-group>\n        </a-form-item>\n      </a-col>\n      <a-col :span=\"12\">\n        <a-form-item label=\"offset\">\n          <a-input-group>\n            <a-input-number v-model=\"form.offset[0]\" placeholder=\"offsetLeft\" />\n            <a-input-number v-model=\"form.offset[1]\" placeholder=\"offsetTop\" />\n          </a-input-group>\n        </a-form-item>\n      </a-col>\n      <a-col :span=\"12\">\n        <a-form-item label=\"fontSize\">\n          <a-input-number v-model=\"form.font.fontSize\" mode=\"button\" />\n        </a-form-item>\n      </a-col>\n      <a-col :span=\"12\">\n        <a-form-item label=\"zIndex\">\n          <a-input-number v-model=\"form.zIndex\" mode=\"button\" />\n        </a-form-item>\n      </a-col>\n      <a-col :span=\"6\">\n        <a-form-item label=\"repeat\">\n          <a-switch v-model=\"form.repeat\" />\n        </a-form-item>\n      </a-col>\n      <a-col :span=\"6\">\n        <a-form-item label=\"staggered\">\n          <a-switch v-model=\"form.staggered\" />\n        </a-form-item>\n      </a-col>\n    </a-row>\n  </a-form>\n  <a-watermark content=\"arco.design\" v-bind=\"form\">\n    <div style=\"width: 100%; border: 1px solid #e5e6eb; box-sizing: border-box\">\n      <a-typography-title :heading=\"5\"> Design system </a-typography-title>\n      <a-typography>\n        <a-typography-paragraph>\n          A design is a plan or specification for the construction of an object\n          or system or for the implementation of an activity or process, or the\n          result of that plan or specification in the form of a prototype,\n          product or process. The verb to design expresses the process of\n          developing a design.\n        </a-typography-paragraph>\n        <a-typography-paragraph>\n          A design is a plan or specification for the construction of an object\n          or system or for the implementation of an activity or process, or the\n          result of that plan or specification in the form of a prototype,\n          product or process. The verb to design expresses the process of\n          developing a design.\n        </a-typography-paragraph>\n      </a-typography>\n      <img\n        style=\"position: relative; z-index: 7\"\n        src=\"https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/24e0dd27418d2291b65db1b21aa62254.png~tplv-uwbnlip3yd-webp.webp\"\n      />\n    </div>\n  </a-watermark>\n</template>\n\n<script>\nimport { reactive } from 'vue';\n\nexport default {\n  setup() {\n    const form = reactive({\n      rotate: 0,\n      gap: [50, 50],\n      offset: [],\n      font: { fontSize: 16 },\n      zIndex: 6,\n      repeat: true,\n      staggered: true,\n    });\n    return {\n      form,\n    };\n  },\n};\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/watermark/__demo__/image.md",
    "content": "```yaml\ntitle:\n  zh-CN: 图片水印\n  en-US: Image Watermark\n```\n\n## zh-CN\n\n通过 image 设置图片水印。建议使用 2 倍或 3 倍图（支持Base64）。\n\n---\n\n## en-US\n\nSet an image watermark using the image property. It's recommended to use 2x or 3x images (supports Base64).\n\n---\n\n```vue\n<template>\n  <a-watermark content=\"acro.design\" grayscale image=\"\">\n    <div style=\"width: 100%; height: 300px;\" />\n  </a-watermark>\n</template>\n```\n"
  },
  {
    "path": "packages/web-vue/components/watermark/__demo__/multiline.md",
    "content": "```yaml\ntitle:\n  zh-CN: 多行文本\n  en-US: Multiline Text\n```\n\n## zh-CN\n\n通过 content 设置字符串数组可指定多行文字水印内容。\n\n---\n\n## en-US\n\nMulti-line text watermarks can be specified with the content set string array.\n\n---\n\n```vue\n<template>\n  <a-watermark :content=\"['arco.design',dayjs().format('YYYY-MM-DD')]\">\n    <div style=\"width: 100%; height: 300px;\" />\n  </a-watermark>\n</template>\n<script>\nimport dayjs from 'dayjs';\n\nexport default {\n  setup() {\n    return {\n      dayjs,\n    }\n  }\n}\n</script>\n```\n"
  },
  {
    "path": "packages/web-vue/components/watermark/__test__/__snapshots__/demo.test.ts.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`<watermark> demo: render [basic] correctly 1`] = `\n\"<div class=\\\\\"arco-watermark\\\\\" style=\\\\\"position: relative; overflow: hidden;\\\\\">\n  <div style=\\\\\"width: 100%; height: 350px;\\\\\"></div>\n</div>\"\n`;\n\nexports[`<watermark> demo: render [custom] correctly 1`] = `\n\"<form class=\\\\\"arco-form arco-form-layout-horizontal arco-form-size-small arco-form-auto-label-width\\\\\">\n  <div class=\\\\\"arco-row arco-row-align-start arco-row-justify-start\\\\\" style=\\\\\"margin-left: -8px; margin-right: -8px;\\\\\">\n    <div class=\\\\\"arco-col arco-col-24\\\\\" style=\\\\\"padding-left: 8px; padding-right: 8px;\\\\\">\n      <div class=\\\\\"arco-row arco-row-nowrap arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-horizontal\\\\\">\n        <div class=\\\\\"arco-col arco-col-5 arco-form-item-label-col arco-form-item-label-col-flex\\\\\"><label class=\\\\\"arco-form-item-label\\\\\">\n            <!--v-if-->rotate\n            <!--v-if-->\n            <!--v-if-->\n          </label></div>\n        <div class=\\\\\"arco-col arco-form-item-wrapper-col\\\\\" style=\\\\\"flex-basis: auto;\\\\\" id=\\\\\"rotate\\\\\">\n          <div class=\\\\\"arco-form-item-content-wrapper\\\\\">\n            <div class=\\\\\"arco-form-item-content arco-form-item-content-flex\\\\\">\n              <div class=\\\\\"arco-slider\\\\\">\n                <div class=\\\\\"arco-slider-track\\\\\">\n                  <div class=\\\\\"arco-slider-bar\\\\\" style=\\\\\"left: 0%; right: 50%;\\\\\"></div>\n                  <!--v-if-->\n                  <!--v-if-->\n                  <!--v-if-->\n                  <!--v-if-->\n                  <div style=\\\\\"left: 50%;\\\\\" tabindex=\\\\\"0\\\\\" role=\\\\\"slider\\\\\" aria-disabled=\\\\\"false\\\\\" aria-valuemax=\\\\\"180\\\\\" aria-valuemin=\\\\\"-180\\\\\" aria-valuenow=\\\\\"0\\\\\" aria-valuetext=\\\\\"0\\\\\" class=\\\\\"arco-slider-btn\\\\\"></div>\n                  <!---->\n                </div>\n                <!--v-if-->\n              </div>\n            </div>\n          </div>\n          <!--v-if-->\n          <!--v-if-->\n        </div>\n      </div>\n    </div>\n    <div class=\\\\\"arco-col arco-col-12\\\\\" style=\\\\\"padding-left: 8px; padding-right: 8px;\\\\\">\n      <div class=\\\\\"arco-row arco-row-nowrap arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-horizontal\\\\\">\n        <div class=\\\\\"arco-col arco-col-5 arco-form-item-label-col arco-form-item-label-col-flex\\\\\"><label class=\\\\\"arco-form-item-label\\\\\">\n            <!--v-if-->gap\n            <!--v-if-->\n            <!--v-if-->\n          </label></div>\n        <div class=\\\\\"arco-col arco-form-item-wrapper-col\\\\\" style=\\\\\"flex-basis: auto;\\\\\">\n          <div class=\\\\\"arco-form-item-content-wrapper\\\\\">\n            <div class=\\\\\"arco-form-item-content arco-form-item-content-flex\\\\\">\n              <div class=\\\\\"arco-input-group\\\\\"><span class=\\\\\"arco-input-wrapper arco-input-number arco-input-number-mode-embed arco-input-number-size-small\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-small\\\\\" type=\\\\\"text\\\\\" placeholder=\\\\\"gap[x]\\\\\" role=\\\\\"spinbutton\\\\\" aria-valuemax=\\\\\"Infinity\\\\\" aria-valuemin=\\\\\"0\\\\\" aria-valuenow=\\\\\"50\\\\\" value=\\\\\"50\\\\\"><!----><span class=\\\\\"arco-input-suffix\\\\\"><!----><!----><div class=\\\\\"arco-input-number-step\\\\\"><button class=\\\\\"arco-input-number-step-button\\\\\" type=\\\\\"button\\\\\" tabindex=\\\\\"-1\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-up\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 30.557 24.043 15 8.487 30.557\\\\\"></path></svg></button><button class=\\\\\"arco-input-number-step-button\\\\\" type=\\\\\"button\\\\\" tabindex=\\\\\"-1\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></button></div><!----></span></span><span class=\\\\\"arco-input-wrapper arco-input-number arco-input-number-mode-embed arco-input-number-size-small\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-small\\\\\" type=\\\\\"text\\\\\" placeholder=\\\\\"gap[y]\\\\\" role=\\\\\"spinbutton\\\\\" aria-valuemax=\\\\\"Infinity\\\\\" aria-valuemin=\\\\\"0\\\\\" aria-valuenow=\\\\\"50\\\\\" value=\\\\\"50\\\\\"><!----><span class=\\\\\"arco-input-suffix\\\\\"><!----><!----><div class=\\\\\"arco-input-number-step\\\\\"><button class=\\\\\"arco-input-number-step-button\\\\\" type=\\\\\"button\\\\\" tabindex=\\\\\"-1\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-up\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 30.557 24.043 15 8.487 30.557\\\\\"></path></svg></button><button class=\\\\\"arco-input-number-step-button\\\\\" type=\\\\\"button\\\\\" tabindex=\\\\\"-1\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></button></div><!----></span></span></div>\n            </div>\n          </div>\n          <!--v-if-->\n          <!--v-if-->\n        </div>\n      </div>\n    </div>\n    <div class=\\\\\"arco-col arco-col-12\\\\\" style=\\\\\"padding-left: 8px; padding-right: 8px;\\\\\">\n      <div class=\\\\\"arco-row arco-row-nowrap arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-horizontal\\\\\">\n        <div class=\\\\\"arco-col arco-col-5 arco-form-item-label-col arco-form-item-label-col-flex\\\\\"><label class=\\\\\"arco-form-item-label\\\\\">\n            <!--v-if-->offset\n            <!--v-if-->\n            <!--v-if-->\n          </label></div>\n        <div class=\\\\\"arco-col arco-form-item-wrapper-col\\\\\" style=\\\\\"flex-basis: auto;\\\\\">\n          <div class=\\\\\"arco-form-item-content-wrapper\\\\\">\n            <div class=\\\\\"arco-form-item-content arco-form-item-content-flex\\\\\">\n              <div class=\\\\\"arco-input-group\\\\\"><span class=\\\\\"arco-input-wrapper arco-input-number arco-input-number-mode-embed arco-input-number-size-small\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-small\\\\\" type=\\\\\"text\\\\\" placeholder=\\\\\"offsetLeft\\\\\" role=\\\\\"spinbutton\\\\\" aria-valuemax=\\\\\"Infinity\\\\\" aria-valuemin=\\\\\"-Infinity\\\\\" aria-valuenow=\\\\\"\\\\\" value=\\\\\"\\\\\"><!----><span class=\\\\\"arco-input-suffix\\\\\"><!----><!----><div class=\\\\\"arco-input-number-step\\\\\"><button class=\\\\\"arco-input-number-step-button\\\\\" type=\\\\\"button\\\\\" tabindex=\\\\\"-1\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-up\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 30.557 24.043 15 8.487 30.557\\\\\"></path></svg></button><button class=\\\\\"arco-input-number-step-button\\\\\" type=\\\\\"button\\\\\" tabindex=\\\\\"-1\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></button></div><!----></span></span><span class=\\\\\"arco-input-wrapper arco-input-number arco-input-number-mode-embed arco-input-number-size-small\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-small\\\\\" type=\\\\\"text\\\\\" placeholder=\\\\\"offsetTop\\\\\" role=\\\\\"spinbutton\\\\\" aria-valuemax=\\\\\"Infinity\\\\\" aria-valuemin=\\\\\"-Infinity\\\\\" aria-valuenow=\\\\\"\\\\\" value=\\\\\"\\\\\"><!----><span class=\\\\\"arco-input-suffix\\\\\"><!----><!----><div class=\\\\\"arco-input-number-step\\\\\"><button class=\\\\\"arco-input-number-step-button\\\\\" type=\\\\\"button\\\\\" tabindex=\\\\\"-1\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-up\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 30.557 24.043 15 8.487 30.557\\\\\"></path></svg></button><button class=\\\\\"arco-input-number-step-button\\\\\" type=\\\\\"button\\\\\" tabindex=\\\\\"-1\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-down\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M39.6 17.443 24.043 33 8.487 17.443\\\\\"></path></svg></button></div><!----></span></span></div>\n            </div>\n          </div>\n          <!--v-if-->\n          <!--v-if-->\n        </div>\n      </div>\n    </div>\n    <div class=\\\\\"arco-col arco-col-12\\\\\" style=\\\\\"padding-left: 8px; padding-right: 8px;\\\\\">\n      <div class=\\\\\"arco-row arco-row-nowrap arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-horizontal\\\\\">\n        <div class=\\\\\"arco-col arco-col-5 arco-form-item-label-col arco-form-item-label-col-flex\\\\\"><label class=\\\\\"arco-form-item-label\\\\\">\n            <!--v-if-->fontSize\n            <!--v-if-->\n            <!--v-if-->\n          </label></div>\n        <div class=\\\\\"arco-col arco-form-item-wrapper-col\\\\\" style=\\\\\"flex-basis: auto;\\\\\">\n          <div class=\\\\\"arco-form-item-content-wrapper\\\\\">\n            <div class=\\\\\"arco-form-item-content arco-form-item-content-flex\\\\\"><span class=\\\\\"arco-input-outer arco-input-outer-size-small arco-input-number arco-input-number-mode-button arco-input-number-size-small\\\\\"><span class=\\\\\"arco-input-prepend\\\\\"><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-small arco-btn-status-normal arco-btn-only-icon arco-input-number-step-button\\\\\" type=\\\\\"button\\\\\" tabindex=\\\\\"-1\\\\\"><span class=\\\\\"arco-btn-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-minus\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M5 24h38\\\\\"></path></svg></span></button></span><span class=\\\\\"arco-input-wrapper\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-small\\\\\" type=\\\\\"text\\\\\" role=\\\\\"spinbutton\\\\\" aria-valuemax=\\\\\"Infinity\\\\\" aria-valuemin=\\\\\"-Infinity\\\\\" aria-valuenow=\\\\\"16\\\\\" value=\\\\\"16\\\\\"><!----><!----></span><span class=\\\\\"arco-input-append\\\\\"><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-small arco-btn-status-normal arco-btn-only-icon arco-input-number-step-button\\\\\" type=\\\\\"button\\\\\" tabindex=\\\\\"-1\\\\\"><span class=\\\\\"arco-btn-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-plus\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M5 24h38M24 5v38\\\\\"></path></svg></span></button></span></span></div>\n          </div>\n          <!--v-if-->\n          <!--v-if-->\n        </div>\n      </div>\n    </div>\n    <div class=\\\\\"arco-col arco-col-12\\\\\" style=\\\\\"padding-left: 8px; padding-right: 8px;\\\\\">\n      <div class=\\\\\"arco-row arco-row-nowrap arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-horizontal\\\\\">\n        <div class=\\\\\"arco-col arco-col-5 arco-form-item-label-col arco-form-item-label-col-flex\\\\\"><label class=\\\\\"arco-form-item-label\\\\\">\n            <!--v-if-->zIndex\n            <!--v-if-->\n            <!--v-if-->\n          </label></div>\n        <div class=\\\\\"arco-col arco-form-item-wrapper-col\\\\\" style=\\\\\"flex-basis: auto;\\\\\">\n          <div class=\\\\\"arco-form-item-content-wrapper\\\\\">\n            <div class=\\\\\"arco-form-item-content arco-form-item-content-flex\\\\\"><span class=\\\\\"arco-input-outer arco-input-outer-size-small arco-input-number arco-input-number-mode-button arco-input-number-size-small\\\\\"><span class=\\\\\"arco-input-prepend\\\\\"><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-small arco-btn-status-normal arco-btn-only-icon arco-input-number-step-button\\\\\" type=\\\\\"button\\\\\" tabindex=\\\\\"-1\\\\\"><span class=\\\\\"arco-btn-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-minus\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M5 24h38\\\\\"></path></svg></span></button></span><span class=\\\\\"arco-input-wrapper\\\\\"><!----><input class=\\\\\"arco-input arco-input-size-small\\\\\" type=\\\\\"text\\\\\" role=\\\\\"spinbutton\\\\\" aria-valuemax=\\\\\"Infinity\\\\\" aria-valuemin=\\\\\"-Infinity\\\\\" aria-valuenow=\\\\\"6\\\\\" value=\\\\\"6\\\\\"><!----><!----></span><span class=\\\\\"arco-input-append\\\\\"><button class=\\\\\"arco-btn arco-btn-secondary arco-btn-shape-square arco-btn-size-small arco-btn-status-normal arco-btn-only-icon arco-input-number-step-button\\\\\" type=\\\\\"button\\\\\" tabindex=\\\\\"-1\\\\\"><span class=\\\\\"arco-btn-icon\\\\\"><svg viewBox=\\\\\"0 0 48 48\\\\\" fill=\\\\\"none\\\\\" xmlns=\\\\\"http://www.w3.org/2000/svg\\\\\" stroke=\\\\\"currentColor\\\\\" class=\\\\\"arco-icon arco-icon-plus\\\\\" stroke-width=\\\\\"4\\\\\" stroke-linecap=\\\\\"butt\\\\\" stroke-linejoin=\\\\\"miter\\\\\"><path d=\\\\\"M5 24h38M24 5v38\\\\\"></path></svg></span></button></span></span></div>\n          </div>\n          <!--v-if-->\n          <!--v-if-->\n        </div>\n      </div>\n    </div>\n    <div class=\\\\\"arco-col arco-col-6\\\\\" style=\\\\\"padding-left: 8px; padding-right: 8px;\\\\\">\n      <div class=\\\\\"arco-row arco-row-nowrap arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-horizontal\\\\\">\n        <div class=\\\\\"arco-col arco-col-5 arco-form-item-label-col arco-form-item-label-col-flex\\\\\"><label class=\\\\\"arco-form-item-label\\\\\">\n            <!--v-if-->repeat\n            <!--v-if-->\n            <!--v-if-->\n          </label></div>\n        <div class=\\\\\"arco-col arco-form-item-wrapper-col\\\\\" style=\\\\\"flex-basis: auto;\\\\\">\n          <div class=\\\\\"arco-form-item-content-wrapper\\\\\">\n            <div class=\\\\\"arco-form-item-content arco-form-item-content-flex\\\\\"><button type=\\\\\"button\\\\\" role=\\\\\"switch\\\\\" aria-checked=\\\\\"true\\\\\" class=\\\\\"arco-switch arco-switch-type-circle arco-switch-checked\\\\\"><span class=\\\\\"arco-switch-handle\\\\\"><span class=\\\\\"arco-switch-handle-icon\\\\\"></span></span><!--  prettier-ignore  -->\n                <!--v-if-->\n              </button></div>\n          </div>\n          <!--v-if-->\n          <!--v-if-->\n        </div>\n      </div>\n    </div>\n    <div class=\\\\\"arco-col arco-col-6\\\\\" style=\\\\\"padding-left: 8px; padding-right: 8px;\\\\\">\n      <div class=\\\\\"arco-row arco-row-nowrap arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-horizontal\\\\\">\n        <div class=\\\\\"arco-col arco-col-5 arco-form-item-label-col arco-form-item-label-col-flex\\\\\"><label class=\\\\\"arco-form-item-label\\\\\">\n            <!--v-if-->staggered\n            <!--v-if-->\n            <!--v-if-->\n          </label></div>\n        <div class=\\\\\"arco-col arco-form-item-wrapper-col\\\\\" style=\\\\\"flex-basis: auto;\\\\\">\n          <div class=\\\\\"arco-form-item-content-wrapper\\\\\">\n            <div class=\\\\\"arco-form-item-content arco-form-item-content-flex\\\\\"><button type=\\\\\"button\\\\\" role=\\\\\"switch\\\\\" aria-checked=\\\\\"true\\\\\" class=\\\\\"arco-switch arco-switch-type-circle arco-switch-checked\\\\\"><span class=\\\\\"arco-switch-handle\\\\\"><span class=\\\\\"arco-switch-handle-icon\\\\\"></span></span><!--  prettier-ignore  -->\n                <!--v-if-->\n              </button></div>\n          </div>\n          <!--v-if-->\n          <!--v-if-->\n        </div>\n      </div>\n    </div>\n  </div>\n</form>\n<div class=\\\\\"arco-watermark\\\\\" style=\\\\\"position: relative; overflow: hidden;\\\\\">\n  <div style=\\\\\"width: 100%; border: 1px solid #e5e6eb; box-sizing: border-box;\\\\\">\n    <h5 class=\\\\\"arco-typography\\\\\"> Design system\n      <!---->\n      <!--v-if-->\n      <!--v-if-->\n      <!--v-if-->\n    </h5>\n    <article class=\\\\\"arco-typography\\\\\">\n      <div class=\\\\\"arco-typography\\\\\"> A design is a plan or specification for the construction of an object or system or for the implementation of an activity or process, or the result of that plan or specification in the form of a prototype, product or process. The verb to design expresses the process of developing a design.\n        <!---->\n        <!--v-if-->\n        <!--v-if-->\n        <!--v-if-->\n      </div>\n      <div class=\\\\\"arco-typography\\\\\"> A design is a plan or specification for the construction of an object or system or for the implementation of an activity or process, or the result of that plan or specification in the form of a prototype, product or process. The verb to design expresses the process of developing a design.\n        <!---->\n        <!--v-if-->\n        <!--v-if-->\n        <!--v-if-->\n      </div>\n    </article><img style=\\\\\"position: relative; z-index: 7;\\\\\" src=\\\\\"https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/24e0dd27418d2291b65db1b21aa62254.png~tplv-uwbnlip3yd-webp.webp\\\\\">\n  </div>\n</div>\"\n`;\n\nexports[`<watermark> demo: render [image] correctly 1`] = `\n\"<div class=\\\\\"arco-watermark\\\\\" style=\\\\\"position: relative; overflow: hidden;\\\\\">\n  <div style=\\\\\"width: 100%; height: 300px;\\\\\"></div>\n</div>\"\n`;\n\nexports[`<watermark> demo: render [multiline] correctly 1`] = `\n\"<div class=\\\\\"arco-watermark\\\\\" style=\\\\\"position: relative; overflow: hidden;\\\\\">\n  <div style=\\\\\"width: 100%; height: 300px;\\\\\"></div>\n</div>\"\n`;\n"
  },
  {
    "path": "packages/web-vue/components/watermark/__test__/demo.test.ts",
    "content": "import demoTest from '../../../scripts/demo-test';\n\ndemoTest('watermark');\n"
  },
  {
    "path": "packages/web-vue/components/watermark/hooks/use-mutation-observer.ts",
    "content": "import {\n  unref,\n  watch,\n  getCurrentScope,\n  onScopeDispose,\n  Ref,\n  ComponentPublicInstance,\n} from 'vue';\n\nexport const defaultWindow = typeof window !== 'undefined' ? window : undefined;\n\nexport interface MutationObserverOptions extends MutationObserverInit {\n  window?: Window;\n}\n\nexport type MaybeRef<T> = T | Ref<T>;\nexport type MaybeElement =\n  | HTMLElement\n  | SVGElement\n  | ComponentPublicInstance\n  | undefined\n  | null;\nexport type UnRefElementReturn<T extends MaybeElement = MaybeElement> =\n  T extends ComponentPublicInstance\n    ? Exclude<MaybeElement, ComponentPublicInstance>\n    : T | undefined;\n\nexport type Fn = () => void;\n\nexport function unrefElement<T extends MaybeElement>(\n  elRef: MaybeRef<T>\n): UnRefElementReturn<T> {\n  const plain = unref(elRef);\n  return (plain as ComponentPublicInstance)?.$el ?? plain;\n}\n\nexport function tryOnScopeDispose(fn: Fn): boolean {\n  if (getCurrentScope()) {\n    onScopeDispose(fn);\n    return true;\n  }\n  return false;\n}\n\nexport function useMutationObserver(\n  target: MaybeRef<MaybeElement>,\n  callback: MutationCallback,\n  options: MutationObserverOptions = {}\n) {\n  const { window = defaultWindow, ...mutationOptions } = options;\n  const isSupported = window && 'MutationObserver' in window;\n  let observer: MutationObserver | undefined;\n\n  const cleanup = () => {\n    if (observer) {\n      observer.disconnect();\n      observer = undefined;\n    }\n  };\n\n  const stopWatch = watch(\n    () => unrefElement(target),\n    (el) => {\n      cleanup();\n\n      if (isSupported && window && el) {\n        observer = new MutationObserver(callback);\n        observer.observe(el, mutationOptions);\n      }\n    },\n    { immediate: true }\n  );\n\n  const stop = () => {\n    cleanup();\n    stopWatch();\n  };\n\n  tryOnScopeDispose(stop);\n\n  return {\n    isSupported,\n    stop,\n  };\n}\n\nexport type UseMutationObserverReturn = ReturnType<typeof useMutationObserver>;\n"
  },
  {
    "path": "packages/web-vue/components/watermark/hooks/use-theme.ts",
    "content": "import { Ref, ref } from 'vue';\nimport { useMutationObserver } from './use-mutation-observer';\n\nconst THEME_TOKEN = 'arco-theme';\nconst Theme = {\n  Dark: 'dark' as const,\n  Light: 'light' as const,\n};\n\nexport const useTheme = (callback?: () => void) => {\n  const theme: Ref<typeof Theme[keyof typeof Theme]> = ref(Theme.Light);\n\n  const setTheme = (value: typeof Theme[keyof typeof Theme]) => {\n    theme.value = value;\n  };\n\n  const getTheme = (element: HTMLElement) => {\n    return element.getAttribute(THEME_TOKEN) === Theme.Dark\n      ? Theme.Dark\n      : Theme.Light;\n  };\n\n  useMutationObserver(\n    document.body,\n    (mutations) => {\n      for (const mutation of mutations) {\n        if (\n          mutation.type === 'attributes' &&\n          mutation.attributeName === THEME_TOKEN\n        ) {\n          setTheme(getTheme(mutation.target as HTMLElement));\n          callback?.();\n          break;\n        }\n      }\n    },\n    {\n      attributes: true,\n      attributeFilter: [THEME_TOKEN],\n      subtree: false,\n      childList: false,\n      characterData: false,\n    }\n  );\n\n  setTheme(getTheme(document.body));\n\n  return {\n    theme,\n    setTheme,\n  };\n};\n"
  },
  {
    "path": "packages/web-vue/components/watermark/index.ts",
    "content": "import type { App } from 'vue';\nimport type { ArcoOptions } from '../_utils/types';\nimport { setGlobalConfig, getComponentPrefix } from '../_utils/global-config';\nimport _Watermark from './watermark';\n\nconst Watermark = Object.assign(_Watermark, {\n  install: (app: App, options?: ArcoOptions) => {\n    setGlobalConfig(app, options);\n    const componentPrefix = getComponentPrefix(options);\n\n    app.component(componentPrefix + _Watermark.name, _Watermark);\n  },\n});\n\nexport type WatermarkInstance = InstanceType<typeof _Watermark>;\n\nexport default Watermark;\n"
  },
  {
    "path": "packages/web-vue/components/watermark/interface.ts",
    "content": "export interface WatermarkFont {\n  /**\n   * @zh 字体颜色\n   * @en Font color\n   * @defaultValue rgba(0, 0, 0, 0.15)\n   */\n  color?: string;\n  /**\n   * @zh 字体大小\n   * @en Font size\n   * @defaultValue 16\n   */\n  fontSize?: number;\n  /**\n   * @zh 字体类型\n   * @en Font family\n   * @defaultValue sans-serif\n   */\n  fontFamily?: string;\n  /**\n   * @zh 字体样式\n   * @en Font style\n   * @defaultValue normal\n   */\n  fontStyle?: 'none' | 'normal' | 'italic' | 'oblique';\n  /**\n   * @zh 字体对齐方式\n   * @en Font align\n   * @defaultValue center\n   */\n  textAlign?: 'start' | 'end' | 'left' | 'right' | 'center';\n  /**\n   * @zh 字体粗细\n   * @en Font weight\n   * @defaultValue normal\n   */\n  fontWeight?: 'normal' | 'bold' | 'bolder' | 'lighter' | number;\n}\n"
  },
  {
    "path": "packages/web-vue/components/watermark/style/index.ts",
    "content": "import '../../style/index.less';\n"
  },
  {
    "path": "packages/web-vue/components/watermark/utils/index.ts",
    "content": "import { CSSProperties } from 'vue';\n\nexport function camelToKebab(camelCase: string): string {\n  return camelCase.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();\n}\n\nexport function styleToString(style: CSSProperties): string {\n  return Object.entries(style)\n    .map(([key, value]) => `${camelToKebab(key)}:${value}`)\n    .join(';');\n}\n\nexport function canvasToGray(canvas: HTMLCanvasElement): void {\n  const ctx = canvas.getContext('2d');\n  if (!ctx) return;\n  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);\n  const { data } = imageData;\n  for (let i = 0; i < data.length; i += 4) {\n    const brightness = (data[i] + data[i + 1] + data[i + 2]) / 3;\n    data[i] = brightness;\n    data[i + 1] = brightness;\n    data[i + 2] = brightness;\n  }\n  ctx.putImageData(imageData, 0, 0);\n}\n"
  },
  {
    "path": "packages/web-vue/components/watermark/watermark.tsx",
    "content": "import {\n  CSSProperties,\n  PropType,\n  computed,\n  defineComponent,\n  onMounted,\n  ref,\n  shallowRef,\n  toRefs,\n  watch,\n} from 'vue';\nimport { getPrefixCls } from '../_utils/global-config';\nimport { WatermarkFont } from './interface';\nimport { useMutationObserver } from './hooks/use-mutation-observer';\nimport { useTheme } from './hooks/use-theme';\nimport { styleToString, canvasToGray } from './utils';\nimport { isArray } from '../_utils/is';\n\nexport default defineComponent({\n  name: 'Watermark',\n  props: {\n    /**\n     * @zh 水印文字内容\n     * @en Watermark text content\n     */\n    content: {\n      type: [String, Array] as PropType<string | string[]>,\n    },\n    /**\n     * @zh 图片源，建议使用 2 倍或 3 倍图\n     * @en Image watermark address\n     */\n    image: {\n      type: String,\n    },\n    /**\n     * @zh 水印宽度（默认为内容宽度）\n     * @en Watermark width\n     */\n    width: {\n      type: Number,\n    },\n    /**\n     * @zh 水印高度（默认为内容高度）\n     * @en Watermark height\n     */\n    height: {\n      type: Number,\n    },\n    /**\n     * @zh 水印间的间距\n     * @en Watermark spacing\n     */\n    gap: {\n      type: Array as unknown as PropType<[number, number]>,\n      default: () => [90, 90],\n    },\n    /**\n     * @zh 距离容器左上角的偏移量，默认为水印间距的一半\n     * @en The offset from the upper left corner of the container, the default is half the watermark spacing\n     * @defaultValue [gap[0]/2, gap[1]/2]\n     */\n    offset: {\n      type: Array as unknown as PropType<[number, number]>,\n    },\n    /**\n     * @zh 旋转角度\n     * @en Watermark rotation angle\n     */\n    rotate: {\n      type: Number,\n      default: -22,\n    },\n    /**\n     * @zh 水印字体样式，具体参数配置看 [WatermarkFont](#WatermarkFont)\n     * @en Watermark font style, specific parameter configuration see [WatermarkFont](#WatermarkFont)\n     */\n    font: {\n      type: Object as PropType<WatermarkFont>,\n    },\n    /**\n     * @zh 水印层级\n     * @en Watermark z-index\n     */\n    zIndex: {\n      type: Number,\n      default: 6,\n    },\n    /**\n     * @zh 透明度\n     * @en Watermark opacity\n     */\n    alpha: {\n      type: Number,\n      default: 1,\n    },\n    /**\n     * @zh 水印防篡改\n     * @en Watermark anti-tampering\n     */\n    antiTamper: {\n      type: Boolean,\n      default: true,\n    },\n    /**\n     * @zh 灰阶水印\n     * @en Grayscale watermark\n     */\n    grayscale: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * @zh 是否重复水印\n     * @en Whether to repeat the watermark\n     */\n    repeat: {\n      type: Boolean,\n      default: true,\n    },\n    /**\n     * @zh 是否错开排列\n     * @en Whether to stagger the arrangement layout\n     */\n    staggered: {\n      type: Boolean,\n      default: true,\n    },\n  },\n  setup(props, { slots, attrs }) {\n    const { width, height, image, rotate, alpha, repeat, grayscale } =\n      toRefs(props);\n    const prefixCls = getPrefixCls('watermark');\n    const ratio = window.devicePixelRatio || 1;\n    const containerRef = shallowRef<HTMLDivElement>();\n    const watermarkMap = ref(new Map<HTMLDivElement, HTMLDivElement>());\n\n    // Text content and style related\n    const fontSize = computed(() => props.font?.fontSize ?? 16);\n    const fontWeight = computed(() => props.font?.fontWeight ?? 'normal');\n    const fontStyle = computed(() => props.font?.fontStyle ?? 'normal');\n    const fontFamily = computed(() => props.font?.fontFamily ?? 'sans-serif');\n    const textAlign = computed(() => props.font?.textAlign ?? 'center');\n    const contents = computed(() =>\n      isArray(props.content) ? props.content : [props.content]\n    );\n    const color = computed(\n      () =>\n        props.font?.color ??\n        (theme.value === 'dark'\n          ? 'rgba(255, 255, 255, 0.15)'\n          : 'rgba(0, 0, 0, 0.15)')\n    );\n\n    // Watermark position related\n    const gapX = computed(() => props.gap?.[0] ?? 90);\n    const gapY = computed(() => props.gap?.[1] ?? 90);\n    const gapXCenter = computed(() => gapX.value / 2);\n    const gapYCenter = computed(() => gapY.value / 2);\n    const offsetLeft = computed(() => props.offset?.[0] ?? gapXCenter.value);\n    const offsetTop = computed(() => props.offset?.[1] ?? gapYCenter.value);\n    const markStyle = computed(() => {\n      const left = offsetLeft.value - gapXCenter.value;\n      const top = offsetTop.value - gapYCenter.value;\n      return {\n        position: 'absolute',\n        left: left > 0 ? `${left}px` : 0,\n        top: top > 0 ? `${top}px` : 0,\n        width: left > 0 ? `calc(100% - ${left}px)` : '100%',\n        height: top > 0 ? `calc(100% - ${top}px)` : '100%',\n        pointerEvents: 'none',\n        backgroundRepeat: props.repeat ? 'repeat' : 'no-repeat',\n        backgroundPosition: `${left > 0 ? 0 : left}px ${top > 0 ? 0 : top}px`,\n        zIndex: props.zIndex ?? 6,\n      } as CSSProperties;\n    });\n    const isStaggered = computed(() => props.repeat && props.staggered);\n\n    const appendWatermark = (base64: string, width: number) => {\n      if (containerRef.value) {\n        const watermarkEle = watermarkMap.value.get(containerRef.value);\n\n        if (watermarkEle) {\n          if (containerRef.value.contains(watermarkEle)) {\n            containerRef.value.removeChild(watermarkEle);\n          }\n          watermarkMap.value.delete(containerRef.value);\n        }\n        const newWatermarkEle = document.createElement('div');\n        newWatermarkEle.setAttribute(\n          'style',\n          styleToString({\n            ...markStyle.value,\n            backgroundImage: `url('${base64}')`,\n            backgroundSize: `${width}px`,\n          })\n        );\n        containerRef.value?.append(newWatermarkEle);\n        watermarkMap.value.set(containerRef.value, newWatermarkEle);\n      }\n    };\n\n    const getMarkSize = (ctx: CanvasRenderingContext2D) => {\n      let defaultWidth = 120;\n      let defaultHeight = 28;\n      if (!image.value && ctx.measureText) {\n        ctx.font = `${fontSize.value}px ${fontFamily.value}`;\n        const widths = contents.value.map(\n          (item) => ctx.measureText(item!).width\n        );\n        defaultWidth = Math.ceil(Math.max(...widths));\n        defaultHeight =\n          fontSize.value * contents.value.length +\n          (contents.value.length - 1) * 3;\n      }\n      return [\n        width.value ?? defaultWidth,\n        height.value ?? defaultHeight,\n      ] as const;\n    };\n\n    const renderWatermark = () => {\n      const canvas = document.createElement('canvas');\n      const ctx = canvas.getContext('2d');\n      if (!ctx) return;\n\n      const [markWidth, markheight] = getMarkSize(ctx);\n      const realMarkWidth = markWidth * ratio;\n      const realMarkHeight = markheight * ratio;\n      const canvasWidth = (gapX.value + markWidth) * ratio;\n      const canvasHeight = (gapY.value + markheight) * ratio;\n      const drawX = (gapX.value / 2) * ratio;\n      const drawY = (gapY.value / 2) * ratio;\n      const rotateX = canvasWidth / 2;\n      const rotateY = canvasHeight / 2;\n      const baseSize = isStaggered.value ? 2 : 1;\n      const fillWidth = (gapX.value + markWidth) * baseSize;\n\n      canvas.width = canvasWidth * baseSize;\n      canvas.height = canvasHeight * baseSize;\n      ctx.globalAlpha = alpha.value;\n      ctx.save();\n      ctx.translate(rotateX, rotateY);\n      ctx.rotate((Math.PI / 180) * rotate.value);\n      ctx.translate(-rotateX, -rotateY);\n\n      const drawImage = () => {\n        ctx.restore();\n        if (isStaggered.value) {\n          ctx.drawImage(\n            canvas,\n            0,\n            0,\n            canvasWidth,\n            canvasHeight,\n            canvasWidth,\n            canvasHeight,\n            canvasWidth,\n            canvasHeight\n          );\n        }\n        grayscale.value && canvasToGray(canvas);\n        appendWatermark(canvas.toDataURL(), fillWidth);\n      };\n\n      if (image.value) {\n        const img = new Image();\n        img.onload = () => {\n          ctx.drawImage(img, drawX, drawY, realMarkWidth, realMarkHeight);\n          drawImage();\n        };\n        img.crossOrigin = 'anonymous';\n        img.referrerPolicy = 'no-referrer';\n        img.src = image.value;\n      } else {\n        const mergedFontSize = Number(fontSize.value) * ratio;\n        ctx.font = `${fontStyle.value} normal ${fontWeight.value} ${mergedFontSize}px/${markheight}px ${fontFamily.value}`;\n        ctx.fillStyle = color.value;\n        ctx.textAlign = textAlign.value;\n        ctx.textBaseline = 'top';\n        ctx.translate(realMarkWidth / 2, 0);\n        contents.value?.forEach((item, index) => {\n          ctx.fillText(\n            item ?? '',\n            drawX,\n            drawY + index * (mergedFontSize + 3 * ratio)\n          );\n        });\n        drawImage();\n      }\n    };\n\n    const isWatermarkEle = (ele: any) =>\n      Array.from(watermarkMap.value.values()).includes(ele);\n\n    const handleMutations = (mutations: MutationRecord[]) => {\n      if (!props.antiTamper) return;\n      for (const mutation of mutations) {\n        const isRemoved = Array.from(mutation.removedNodes).some((node) =>\n          isWatermarkEle(node)\n        );\n        const isModified =\n          mutation.type === 'attributes' && isWatermarkEle(mutation.target);\n\n        if (isRemoved || isModified) {\n          renderWatermark();\n          break;\n        }\n      }\n    };\n\n    const { theme } = useTheme(renderWatermark);\n\n    onMounted(() => {\n      renderWatermark();\n      useMutationObserver(containerRef.value, handleMutations, {\n        attributes: true,\n        childList: true,\n        characterData: true,\n        subtree: true,\n      });\n    });\n\n    watch(props, renderWatermark, { deep: true, flush: 'post' });\n\n    return () => {\n      return (\n        <div\n          ref={containerRef}\n          class={prefixCls}\n          style={{ position: 'relative', overflow: 'hidden' }}\n          {...attrs}\n        >\n          {slots.default?.()}\n        </div>\n      );\n    };\n  },\n});\n"
  },
  {
    "path": "packages/web-vue/global.d.ts",
    "content": "import type { NativeElements, ReservedProps, VNode } from '@vue/runtime-dom';\n\ndeclare module '*.vue' {\n  import type { DefineComponent } from 'vue';\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types\n  const component: DefineComponent<{}, {}, any>;\n  export default component;\n}\n\ndeclare global {\n  namespace JSX {\n    export type Element = VNode;\n    export interface ElementClass {\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types\n      $props: {};\n    }\n    export interface ElementAttributesProperty {\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types\n      $props: {};\n    }\n    export interface IntrinsicElements extends NativeElements {\n      [name: string]: any;\n    }\n    export type IntrinsicAttributes = ReservedProps;\n  }\n}\n\ndeclare module '*.less';\n"
  },
  {
    "path": "packages/web-vue/jest.config.js",
    "content": "// Used to manually run unit tests within the project\nmodule.exports = {\n  transform: {\n    '^.+\\\\.[jt]sx?$': 'babel-jest',\n    '^.+\\\\.vue$': 'vue-jest',\n  },\n};\n"
  },
  {
    "path": "packages/web-vue/package.json",
    "content": "{\n  \"name\": \"@arco-design/web-vue\",\n  \"version\": \"2.58.0-beta.1\",\n  \"description\": \"Arco Design Vue 2.0: A Vue.js 3 UI Library\",\n  \"keywords\": [\n    \"arco\",\n    \"vue\"\n  ],\n  \"author\": \"ArcoDesign Team\",\n  \"homepage\": \"https://arco.design/vue\",\n  \"license\": \"MIT\",\n  \"main\": \"lib/index.js\",\n  \"module\": \"es/index.js\",\n  \"types\": \"es/index.d.ts\",\n  \"unpkg\": \"dist/arco-vue.min.js\",\n  \"files\": [\n    \"es\",\n    \"lib\",\n    \"dist\",\n    \"json\"\n  ],\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/arco-design/arco-design-vue.git\"\n  },\n  \"sideEffects\": [\n    \"dist/*\",\n    \"es/**/style/*\",\n    \"lib/**/style/*\",\n    \"*.less\"\n  ],\n  \"scripts\": {\n    \"init\": \"pnpm run icongen && pnpm run lessgen && arco-vue-scripts build:component\",\n    \"start\": \"arco-vue-scripts dev:component\",\n    \"docgen\": \"arco-vue-scripts docgen\",\n    \"icongen\": \"arco-vue-scripts icongen && pnpm run dtsgen:icon\",\n    \"lessgen\": \"arco-vue-scripts lessgen\",\n    \"jsongen\": \"arco-vue-scripts jsongen\",\n    \"build\": \"pnpm run build:component && pnpm run build:style && pnpm run dtsgen && pnpm run jsongen\",\n    \"build:component\": \"arco-vue-scripts build:component -u\",\n    \"build:module\": \"arco-vue-scripts build:component\",\n    \"build:style\": \"arco-vue-scripts build:style\",\n    \"dtsgen\": \"arco-vue-scripts dtsgen 'components/**/*.{ts,tsx,vue}'\",\n    \"dtsgen:icon\": \"arco-vue-scripts dtsgen 'components/icon/**/*.{ts,tsx,vue}' -o 'components/icon/@types'\",\n    \"test\": \"arco-vue-scripts test --coverage\",\n    \"test:update\": \"arco-vue-scripts test --coverage -u\",\n    \"test:screenshot\": \"arco-vue-scripts test:screenshot -o ./__screenshots__/\",\n    \"changelog\": \"arco-vue-scripts changelog\",\n    \"lint-staged\": \"npx lint-staged\"\n  },\n  \"peerDependencies\": {\n    \"vue\": \">=3.1.0\"\n  },\n  \"lint-staged\": {\n    \"*.{js,ts,jsx,tsx,vue}\": [\n      \"eslint --fix\",\n      \"prettier --write\"\n    ],\n    \"*.{less,css}\": [\n      \"stylelint --fix\",\n      \"prettier --write\"\n    ]\n  },\n  \"devDependencies\": {\n    \"@arco-design/arco-vue-scripts\": \"workspace:*\",\n    \"@babel/core\": \"^7.26.9\",\n    \"@babel/plugin-proposal-class-properties\": \"^7.18.6\",\n    \"@babel/plugin-syntax-dynamic-import\": \"^7.8.3\",\n    \"@babel/plugin-transform-runtime\": \"^7.26.9\",\n    \"@babel/preset-env\": \"^7.26.9\",\n    \"@babel/preset-typescript\": \"^7.26.0\",\n    \"@types/jest\": \"^26.0.24\",\n    \"@typescript-eslint/eslint-plugin\": \"^4.33.0\",\n    \"@typescript-eslint/parser\": \"^4.33.0\",\n    \"@vue/babel-plugin-jsx\": \"^1.4.0\",\n    \"@vue/test-utils\": \"^2.4.6\",\n    \"eslint\": \"^7.32.0\",\n    \"eslint-config-airbnb-base\": \"^14.2.1\",\n    \"eslint-config-prettier\": \"^8.10.0\",\n    \"eslint-import-resolver-typescript\": \"^2.7.1\",\n    \"eslint-plugin-import\": \"^2.31.0\",\n    \"eslint-plugin-prettier\": \"^3.4.1\",\n    \"eslint-plugin-vue\": \"^7.20.0\",\n    \"jest\": \"^26.6.3\",\n    \"prettier\": \"^2.8.8\",\n    \"stylelint\": \"^13.13.1\",\n    \"stylelint-config-prettier\": \"^8.0.2\",\n    \"stylelint-config-rational-order\": \"^0.1.2\",\n    \"stylelint-config-standard\": \"^20.0.0\",\n    \"stylelint-order\": \"^4.1.0\",\n    \"typescript\": \"^4.9.5\",\n    \"vue-jest\": \"5.0.0-alpha.10\"\n  },\n  \"dependencies\": {\n    \"@arco-design/color\": \"^0.4.0\",\n    \"b-tween\": \"^0.3.3\",\n    \"b-validate\": \"^1.5.3\",\n    \"compute-scroll-into-view\": \"^1.0.20\",\n    \"dayjs\": \"^1.11.13\",\n    \"number-precision\": \"^1.6.0\",\n    \"resize-observer-polyfill\": \"^1.5.1\",\n    \"scroll-into-view-if-needed\": \"^2.2.31\",\n    \"vue\": \"^3.1.0\"\n  },\n  \"vetur\": {\n    \"tags\": \"json/vetur-tags.json\",\n    \"attributes\": \"json/vetur-attributes.json\"\n  },\n  \"web-types\": \"json/web-types.json\"\n}\n"
  },
  {
    "path": "packages/web-vue/scripts/demo-test.ts",
    "content": "import path from 'path';\nimport glob from 'glob';\nimport { mount, config } from '@vue/test-utils';\nimport ArcoVue from '../components';\nimport ArcoVueIcon from '../components/icon';\nimport 'core-js/stable';\nimport 'regenerator-runtime/runtime';\n\nObject.defineProperty(window, 'matchMedia', {\n  writable: true,\n  value: jest.fn().mockImplementation((query) => ({\n    matches: false,\n    media: query,\n    onchange: null,\n    addListener: jest.fn(), // deprecated\n    removeListener: jest.fn(), // deprecated\n    addEventListener: jest.fn(),\n    removeEventListener: jest.fn(),\n    dispatchEvent: jest.fn(),\n  })),\n});\n\njest.mock('resize-observer-polyfill', () => ({\n  __esModule: true,\n  default: jest.fn().mockImplementation(() => ({\n    observe: jest.fn(),\n    unobserve: jest.fn(),\n    disconnect: jest.fn(),\n  })),\n}));\n\nconfig.global.plugins = [ArcoVue, ArcoVueIcon];\n\nfunction demoTest(component: string) {\n  describe(`<${component}> demo:`, () => {\n    const files = glob.sync(`components/${component}/__demo__/*.md`);\n    const table = files.map((filename) => [\n      path.basename(filename, '.md'),\n      filename,\n    ]);\n\n    test.each(table)('render [%s] correctly', async (_, filename) => {\n      const demo = await import(`../${filename}`);\n      const wrapper = mount(demo.default);\n      expect(wrapper.html()).toMatchSnapshot();\n    });\n  });\n}\n\nexport default demoTest;\n"
  },
  {
    "path": "packages/web-vue/tsconfig.json",
    "content": "{\n  \"compilerOptions\": {\n    \"outDir\": \"es\",\n    \"target\": \"ES2015\",\n    \"module\": \"ES2020\",\n    \"moduleResolution\": \"node\",\n    \"removeComments\": true,\n    \"strict\": true,\n    \"allowJs\": true,\n    \"isolatedModules\": true,\n    \"esModuleInterop\": true,\n    \"jsx\": \"preserve\",\n    \"jsxImportSource\": \"vue\",\n    \"lib\": [\"ESNext\", \"DOM\", \"DOM.Iterable\"],\n    \"skipLibCheck\": true,\n    \"resolveJsonModule\": true,\n  },\n  \"include\": [\n    \"components/**/*\",\n    \"icon/**/*\",\n    \"*.d.ts\"\n  ],\n  \"exclude\": [\n    \"node_modules\",\n    \"dist\",\n    \"lib\",\n    \"es\",\n    \"json\",\n    \"**/__tests__/**/*\"\n  ]\n}\n"
  },
  {
    "path": "packages/web-vue-storybook/.eslintignore",
    "content": "/*.json\n/*.js\n"
  },
  {
    "path": "packages/web-vue-storybook/.eslintrc.js",
    "content": "module.exports = {\n  parser: 'vue-eslint-parser',\n  parserOptions: {\n    // Parser that checks the content of the <script> tag\n    parser: '@typescript-eslint/parser',\n    sourceType: 'module',\n    ecmaVersion: 2020,\n    ecmaFeatures: {\n      jsx: true,\n    },\n  },\n  env: {\n    browser: true,\n    node: true,\n  },\n  plugins: ['@typescript-eslint'],\n  extends: [\n    // Airbnb JavaScript Style Guide https://github.com/airbnb/javascript\n    'airbnb-base',\n    'plugin:@typescript-eslint/recommended',\n    'plugin:import/recommended',\n    'plugin:import/typescript',\n    'plugin:vue/vue3-recommended',\n    'plugin:prettier/recommended',\n  ],\n  settings: {\n    'import/resolver': {\n      typescript: {\n        project: './tsconfig.json',\n      },\n    },\n  },\n  rules: {\n    'prettier/prettier': 1,\n    // To close Vue, you must specify prop default\n    'vue/require-default-prop': 0,\n    'vue/singleline-html-element-content-newline': 0,\n    'vue/max-attributes-per-line': 0,\n    // Add void ele in prettier\n    'vue/html-self-closing': 0,\n    '@typescript-eslint/no-explicit-any': 0,\n    // TODO: Temporarily closed\n    '@typescript-eslint/explicit-module-boundary-types': 0,\n    // TODO: Temporarily closed\n    '@typescript-eslint/no-non-null-assertion': 0,\n    // Allow ts-ignore\n    '@typescript-eslint/ban-ts-comment': 0,\n    // Redefine the extension detection rules, overwrite airbnb-base\n    'import/extensions': [\n      'error',\n      'ignorePackages',\n      { js: 'never', jsx: 'never', ts: 'never', tsx: 'never' },\n    ],\n    // TODO: Temporarily closed\n    'import/no-extraneous-dependencies': 0,\n    'import/no-unresolved': [2, { caseSensitive: false }],\n    // Utils allows export\n    'import/prefer-default-export': 0,\n    'import/no-named-as-default': 0,\n    // You can use underscore variable names (private variables)\n    'no-underscore-dangle': 0,\n    // Allow ternary expression nesting\n    'no-nested-ternary': 0,\n    // Allow internal variables and external variables to have the same name\n    'no-shadow': 0,\n    'prefer-template': 1,\n    // TODO: Temporarily closed\n    'no-param-reassign': 0,\n    // Allow to add and subtract\n    'no-plusplus': 0,\n    // ESLint Problem https://stackoverflow.com/questions/63818415/react-was-used-before-it-was-defined\n    'no-use-before-define': 0,\n    // Allow for-of traversal (recommended)\n    'no-restricted-syntax': 0,\n    'no-empty': [2, { allowEmptyCatch: true }],\n    'no-bitwise': 0,\n    'no-return-assign': 0,\n    'no-unused-expressions': [\n      'error',\n      { allowShortCircuit: true, allowTernary: true },\n    ],\n    'no-continue': 0,\n    // TODO: Temporarily closed\n    '@typescript-eslint/no-unused-vars': 0,\n    '@typescript-eslint/no-empty-function': 0,\n  },\n};\n"
  },
  {
    "path": "packages/web-vue-storybook/.gitignore",
    "content": "node_modules/\n**/.DS_Store\n\ndist\n"
  },
  {
    "path": "packages/web-vue-storybook/.prettierrc.js",
    "content": "module.exports = {\n  tabWidth: 2,\n  semi: true,\n  printWidth: 80,\n  singleQuote: true,\n  quoteProps: 'consistent',\n  endOfLine: 'auto',\n  htmlWhitespaceSensitivity: 'strict',\n};\n"
  },
  {
    "path": "packages/web-vue-storybook/.storybook/babel.config.js",
    "content": "module.exports = {\n  presets: [\n    ['@babel/preset-env'],\n    [\n      '@babel/preset-typescript',\n      {\n        allExtensions: true,\n        isTSX: true,\n      },\n    ],\n  ],\n  plugins: [\n    '@babel/plugin-syntax-dynamic-import',\n    '@babel/plugin-proposal-class-properties',\n    '@vue/babel-plugin-jsx',\n  ],\n};\n"
  },
  {
    "path": "packages/web-vue-storybook/.storybook/main.js",
    "content": "const path = require('path');\n\nconst lessRegex = /\\.less$/;\nconst lessModuleRegex = /\\.module\\.less$/;\n\nfunction getLoaderForStyle(cssOptions) {\n  return [\n    {\n      loader: 'style-loader',\n    },\n    {\n      loader: 'css-loader',\n      options: cssOptions,\n    },\n    {\n      loader: 'less-loader',\n      options: {\n        lessOptions: {\n          javascriptEnabled: true,\n        },\n      },\n    },\n  ];\n}\n\nmodule.exports = {\n  stories: ['../stories/**/*.stories.@(js|jsx|ts|tsx)'],\n  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],\n  webpackFinal: (config) => {\n    config.resolve.alias['@web-vue'] = path.resolve(\n      process.cwd(),\n      '../web-vue'\n    );\n\n    // less\n    config.module.rules.push({\n      test: lessRegex,\n      exclude: lessModuleRegex,\n      use: getLoaderForStyle(),\n    });\n\n    // less css modules\n    config.module.rules.push({\n      test: lessModuleRegex,\n      use: getLoaderForStyle({ modules: true }),\n    });\n\n    return config;\n  },\n};\n"
  },
  {
    "path": "packages/web-vue-storybook/.storybook/preview.js",
    "content": "import '../../web-vue/components/index.less';\n\nexport const parameters = {\n  actions: { argTypesRegex: '^on[A-Z].*' },\n};\n"
  },
  {
    "path": "packages/web-vue-storybook/README.md",
    "content": "# `@arco-design/web-vue-storybook`\n\nThe storybook of Arco Design Vue\n\n## Usage\n\n```\nnpm run storybook\n```\n"
  },
  {
    "path": "packages/web-vue-storybook/global.d.ts",
    "content": "declare module '*.vue' {\n  import { DefineComponent } from 'vue';\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types\n  const component: DefineComponent<{}, {}, any>;\n  export default component;\n}\n\ndeclare module '*.less';\n"
  },
  {
    "path": "packages/web-vue-storybook/package.json",
    "content": "{\n  \"name\": \"@arco-design/web-vue-storybook\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"description\": \"The storybook of Arco Design Vue 2.0\",\n  \"author\": \"wangchen <wangchen.flsion@bytedance.com>\",\n  \"license\": \"MIT\",\n  \"scripts\": {\n    \"storybook\": \"start-storybook -p 6006\",\n    \"build-storybook\": \"build-storybook\"\n  },\n  \"devDependencies\": {\n    \"@storybook/addon-actions\": \"6.3.0\",\n    \"@storybook/addon-essentials\": \"6.3.0\",\n    \"@storybook/addon-links\": \"6.3.0\",\n    \"@storybook/vue3\": \"6.3.0\",\n    \"babel-loader\": \"^8.4.1\",\n    \"less\": \"^4.2.2\",\n    \"less-loader\": \"^7.3.0\",\n    \"vue-loader\": \"^16.8.3\"\n  },\n  \"installConfig\": {\n    \"hoistingLimits\": \"workspaces\"\n  }\n}\n"
  },
  {
    "path": "packages/web-vue-storybook/stories/components/button.vue",
    "content": "<template>\n  <Button type=\"primary\">Primary Button</Button>\n</template>\n\n<script>\nimport { Button } from '@web-vue/components';\n\nexport default {\n  components: { Button },\n};\n</script>\n"
  },
  {
    "path": "packages/web-vue-storybook/stories/components/custom-menu.vue",
    "content": "<template>\n  <SubMenu key=\"custom_3\">\n    <template #title>Custom Navigation 1 - 1</template>\n    <MenuItem key=\"custom_3_0\">Menu 3</MenuItem>\n  </SubMenu>\n</template>\n<script>\nimport { defineComponent } from 'vue';\nimport { Menu } from '@web-vue/components';\n\nexport default defineComponent({\n  components: {\n    MenuItem: Menu.Item,\n    SubMenu: Menu.SubMenu,\n  },\n  setup() {},\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue-storybook/stories/components/custom-sub-menu.vue",
    "content": "<template>\n  <SubMenu :key=\"parent.key\">\n    <template #title>{{ parent.title }}</template>\n    <template v-for=\"(item, key) in parent.children\" :key=\"item.key\">\n      <MenuItem v-if=\"!item.children\" :key=\"item.key\">{{\n        item.title\n      }}</MenuItem>\n      <CustomSubMenu v-else :key=\"key\" :parent=\"item\" />\n    </template>\n  </SubMenu>\n</template>\n<script lang=\"ts\">\nimport { Menu } from '@web-vue/components';\n\nexport default {\n  name: 'CustomSubMenu',\n  components: {\n    SubMenu: Menu.SubMenu,\n    MenuItem: Menu.Item,\n  },\n  props: {\n    parent: {\n      type: Object,\n      default: () => ({}),\n    },\n    index: {\n      type: Number,\n    },\n  },\n};\n</script>\n"
  },
  {
    "path": "packages/web-vue-storybook/stories/components/date-picker.vue",
    "content": "<template>\n  <div>\n    <TypographyTitle>默认</TypographyTitle>\n    <Space>\n      <DatePicker />\n      <RangePicker />\n    </Space>\n    <TypographyTitle>显示确认按钮</TypographyTitle>\n    <p>\n      <TypographyText>show-confirm-btn = true</TypographyText>\n    </p>\n    <Space>\n      <DatePicker show-confirm-btn />\n      <RangePicker show-confirm-btn />\n    </Space>\n    <p>\n      <TypographyText>showTime 始终显示确认按钮</TypographyText>\n    </p>\n    <Space>\n      <DatePicker show-time :show-confirm-btn=\"false\" />\n      <RangePicker show-time :show-confirm-btn=\"false\" />\n    </Space>\n    <p>\n      <TypographyText>disabled-time = false</TypographyText>\n    </p>\n    <Space>\n      <DatePicker :disabled-time='false' />\n      <RangePicker :disabled-time='false' />\n    </Space>\n  </div>\n</template>\n\n<script>\nimport { DatePicker, Typography, Space } from '@web-vue/components';\n\nexport default {\n  components: {\n    DatePicker,\n    RangePicker: DatePicker.RangePicker,\n    TypographyTitle: Typography.Title,\n    TypographyText: Typography.Text,\n    Space,\n  },\n};\n</script>\n"
  },
  {
    "path": "packages/web-vue-storybook/stories/components/dropdown.tsx",
    "content": "import { ref } from 'vue';\nimport { Dropdown, Dgroup, Doption, Button } from '@web-vue/components';\n\nexport default {\n  setup() {\n    const data = ref([111, 222, 3, 4]);\n\n    return () => (\n      // @ts-ignore\n      <Dropdown\n        v-slots={{\n          content: () => (\n            <Dgroup title=\"123\">\n              {data.value.map((item) => {\n                if (item === 3) {\n                  return null;\n                }\n                return <Doption value={item}>{item}</Doption>;\n              })}\n            </Dgroup>\n          ),\n        }}\n        placeholder=\"test\"\n      >\n        <Button>123</Button>\n      </Dropdown>\n    );\n  },\n};\n"
  },
  {
    "path": "packages/web-vue-storybook/stories/components/form.vue",
    "content": "<template>\n  <Form :model=\"form1\" :style=\"{ width: '600px' }\" @submit=\"handleSubmit\">\n    <FormItem field=\"name\" label=\"Username\">\n      <Input v-model=\"form1.name\" placeholder=\"please enter your username...\" />\n    </FormItem>\n    <FormItem field=\"post\" label=\"Post\">\n      <Input v-model=\"form1.post\" placeholder=\"please enter your post...\" />\n    </FormItem>\n    <FormItem field=\"isRead\">\n      <Checkbox v-model=\"form1.isRead\"> I have read the manual </Checkbox>\n    </FormItem>\n    <FormItem>\n      <Button html-type=\"submit\">Submit</Button>\n    </FormItem>\n  </Form>\n\n  <br />\n  <br />\n  <br />\n  <Button @click=\"handleClick\">Open Form Modal</Button>\n  <Modal\n    v-model:visible=\"visible\"\n    title=\"Modal Form\"\n    @cancel=\"handleCancel\"\n    @before-ok=\"handleBeforeOk\"\n  >\n    <Form :model=\"form2\">\n      <FormItem field=\"name\" label=\"Name\">\n        <Input v-model=\"form2.name\" />\n      </FormItem>\n      <FormItem field=\"post\" label=\"Post\">\n        <Select v-model=\"form2.post\">\n          <Option value=\"post1\">Post1</Option>\n          <Option value=\"post2\">Post2</Option>\n          <Option value=\"post3\">Post3</Option>\n          <Option value=\"post4\">Post4</Option>\n        </Select>\n      </FormItem>\n    </Form>\n  </Modal>\n</template>\n\n<script>\nimport { reactive, ref } from 'vue';\nimport {\n  FormItem,\n  Form,\n  Option,\n  Select,\n  Modal,\n  Button,\n  Input,\n  Checkbox,\n} from '@web-vue/components';\n\nexport default {\n  components: {\n    FormItem,\n    Form,\n    Option,\n    Select,\n    Modal,\n    Button,\n    Input,\n    Checkbox,\n  },\n  setup() {\n    const form1 = reactive({\n      name: '',\n      post: '',\n      isRead: false,\n    });\n    const handleSubmit = (data) => {\n      console.log(data);\n    };\n\n    const visible = ref(false);\n    const form2 = reactive({\n      name: '',\n      post: '',\n    });\n\n    const handleClick = () => {\n      visible.value = true;\n    };\n    const handleBeforeOk = (done) => {\n      console.log(form2);\n      window.setTimeout(() => {\n        done();\n        // prevent close\n        // done(false)\n      }, 3000);\n    };\n    const handleCancel = () => {\n      visible.value = false;\n    };\n\n    return {\n      visible,\n      form1,\n      form2,\n      handleClick,\n      handleBeforeOk,\n      handleCancel,\n      handleSubmit,\n    };\n  },\n};\n</script>\n"
  },
  {
    "path": "packages/web-vue-storybook/stories/components/json.ts",
    "content": "export  const bigData = [\n  {\n      \"key\": \"5006c1e3-e9b1-4c74-a4d6-109a351b1ddd\",\n      \"label\": \"label-0\",\n      \"height\": 507,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"1471c97b-9a2a-4374-b454-a87a820de37c\",\n      \"label\": \"label-1\",\n      \"height\": 258,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"b7334077-213a-462d-a94c-6f636b00404a\",\n      \"label\": \"label-2\",\n      \"height\": 163,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"5041ddfd-be41-40ca-9d25-dd1551ae210c\",\n      \"label\": \"label-3\",\n      \"height\": 431,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"ee179644-929c-473a-b112-12ecbb87cd9a\",\n      \"label\": \"label-4\",\n      \"height\": 410,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"fcb6133d-2c16-4649-86e5-79f6c67c0e5a\",\n      \"label\": \"label-5\",\n      \"height\": 370,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"a4b97676-42d3-43ca-9bf7-cfd6e6bcf2ae\",\n      \"label\": \"label-6\",\n      \"height\": 42,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"aabdba2d-c700-4543-a295-ed4e0292d84d\",\n      \"label\": \"label-7\",\n      \"height\": 100,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"34c7c79e-e67b-44b4-9c95-abcaca24e86f\",\n      \"label\": \"label-8\",\n      \"height\": 405,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"6f2354ff-f4db-4be9-b688-50c420b279eb\",\n      \"label\": \"label-9\",\n      \"height\": 121,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"02078b71-5c62-4a22-a09a-9292ac2c0225\",\n      \"label\": \"label-10\",\n      \"height\": 128,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"5424c0d5-1792-42f3-a5ca-864321a32042\",\n      \"label\": \"label-11\",\n      \"height\": 416,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"e8e41b43-9867-4699-ba56-04dfe12dfe69\",\n      \"label\": \"label-12\",\n      \"height\": 363,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"31ada137-7271-48a7-b656-4ddefbfd3bae\",\n      \"label\": \"label-13\",\n      \"height\": 318,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"9242132a-d66d-4b2a-931a-4eb2c749df1d\",\n      \"label\": \"label-14\",\n      \"height\": 329,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"9fb205c3-4b39-40ef-ad88-a7da95774fd6\",\n      \"label\": \"label-15\",\n      \"height\": 95,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"026395be-9705-4f1a-8f48-87486251b176\",\n      \"label\": \"label-16\",\n      \"height\": 371,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"757ed4c7-8524-4e06-ae02-747479720ff6\",\n      \"label\": \"label-17\",\n      \"height\": 170,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"2d07936b-b209-4838-9761-2ed4a46911e3\",\n      \"label\": \"label-18\",\n      \"height\": 471,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"74b4a59e-f121-4caa-a5dc-09d25b8e01e0\",\n      \"label\": \"label-19\",\n      \"height\": 310,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"1b77a6e0-7ec4-4282-a525-35c8f3548d8b\",\n      \"label\": \"label-20\",\n      \"height\": 262,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"1184d048-c844-41ec-a95c-bfc0e2bc1ee9\",\n      \"label\": \"label-21\",\n      \"height\": 444,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"8fda13ae-3e3b-45e5-bbd6-f22d0ee672f0\",\n      \"label\": \"label-22\",\n      \"height\": 420,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"4d9048ca-6fec-4adc-9e84-b27d2dee6dd7\",\n      \"label\": \"label-23\",\n      \"height\": 339,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"63f78a6d-649c-486a-87d4-3a25e0563fb9\",\n      \"label\": \"label-24\",\n      \"height\": 524,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"d8828253-f6bd-4952-b01e-fa855965ccc6\",\n      \"label\": \"label-25\",\n      \"height\": 475,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"d0416eaa-900e-4e3c-aee5-ac3d96291e9f\",\n      \"label\": \"label-26\",\n      \"height\": 376,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"f307cc33-e323-4edd-ad85-42234e85eab8\",\n      \"label\": \"label-27\",\n      \"height\": 454,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"68923947-bd36-4058-b419-f5e8ee7978f7\",\n      \"label\": \"label-28\",\n      \"height\": 209,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"d8cd76b6-e578-4fd1-b21d-ba24132ec7a3\",\n      \"label\": \"label-29\",\n      \"height\": 357,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"450c538e-8525-4fa0-b01c-dcc495cea320\",\n      \"label\": \"label-30\",\n      \"height\": 63,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"1a1a5a0a-8078-4c69-b8a3-56612480f0cf\",\n      \"label\": \"label-31\",\n      \"height\": 196,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"2f4081dc-d4b9-4eab-939e-c832a7d20ccd\",\n      \"label\": \"label-32\",\n      \"height\": 132,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"4592c615-e398-47a1-9083-ae7b5bab97a1\",\n      \"label\": \"label-33\",\n      \"height\": 151,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"1f787e34-ee4e-4b57-ae51-f267aad39e37\",\n      \"label\": \"label-34\",\n      \"height\": 463,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"2c4fa879-1575-4839-94c6-c69ed449bdf7\",\n      \"label\": \"label-35\",\n      \"height\": 44,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"a7058f0f-1f5a-4f80-9c82-bfb20095bd09\",\n      \"label\": \"label-36\",\n      \"height\": 483,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"d5966c7c-7149-4b9f-a78a-5136e344664f\",\n      \"label\": \"label-37\",\n      \"height\": 433,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"fbb01709-129c-4c58-8502-bdfe91c55f02\",\n      \"label\": \"label-38\",\n      \"height\": 70,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"2f1a5e43-9912-4716-8957-7a2146239acc\",\n      \"label\": \"label-39\",\n      \"height\": 169,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"acf6f672-36ef-49db-86ce-ce5d8ee56dde\",\n      \"label\": \"label-40\",\n      \"height\": 246,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"48cafd07-a1df-4ebb-b276-90ca66f01621\",\n      \"label\": \"label-41\",\n      \"height\": 228,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"8b2bfcb4-bf50-47c4-aac8-568b71056026\",\n      \"label\": \"label-42\",\n      \"height\": 283,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"9ebe9ccd-746e-4aea-878b-0871b8b39d3f\",\n      \"label\": \"label-43\",\n      \"height\": 445,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"d5121f57-8151-4f81-b102-639ccbbce689\",\n      \"label\": \"label-44\",\n      \"height\": 264,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"a497098c-fcfa-4e1f-8256-895a19a50a76\",\n      \"label\": \"label-45\",\n      \"height\": 135,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"7ef88755-c491-48f0-bd52-200503ae0c21\",\n      \"label\": \"label-46\",\n      \"height\": 495,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"9c2ae151-15be-41f0-a3d9-5a1ee34e26c1\",\n      \"label\": \"label-47\",\n      \"height\": 291,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"109dc76a-ad81-49aa-8816-16d288bd0277\",\n      \"label\": \"label-48\",\n      \"height\": 436,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"1c450a92-766b-4344-b754-78c3e86824da\",\n      \"label\": \"label-49\",\n      \"height\": 344,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"34ec07cd-3782-4cc5-bf85-36d3a4840cdb\",\n      \"label\": \"label-50\",\n      \"height\": 80,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"029cec27-0182-4cde-a86d-479eb3992033\",\n      \"label\": \"label-51\",\n      \"height\": 396,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"1aa9daec-8504-4c6a-a6e6-6f0c2a286dab\",\n      \"label\": \"label-52\",\n      \"height\": 264,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"5e5133b5-c82c-4a77-aa2a-b7e553d335df\",\n      \"label\": \"label-53\",\n      \"height\": 162,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"9411df55-b0c9-4988-90d6-173fc5d124bb\",\n      \"label\": \"label-54\",\n      \"height\": 220,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"286f36cc-033a-49a8-8c54-bd213c7a78bb\",\n      \"label\": \"label-55\",\n      \"height\": 504,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"adc2ce72-57b8-405a-9971-e516ed6d7d56\",\n      \"label\": \"label-56\",\n      \"height\": 479,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"e1fe1069-e3d4-414c-8609-99119bfd3dad\",\n      \"label\": \"label-57\",\n      \"height\": 274,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"7baefb15-1ffb-4b63-9fc1-6dcea31a6694\",\n      \"label\": \"label-58\",\n      \"height\": 153,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"6314dbf2-93d1-43ea-b20e-2c5bf9bde142\",\n      \"label\": \"label-59\",\n      \"height\": 45,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"d3a6391d-9dcc-446b-8f81-520a6b5af140\",\n      \"label\": \"label-60\",\n      \"height\": 75,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"59cb7357-f466-43d3-8ab8-76665f02ad95\",\n      \"label\": \"label-61\",\n      \"height\": 67,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"b80cb21a-972e-4f9e-b463-3ddf6668626e\",\n      \"label\": \"label-62\",\n      \"height\": 99,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"97836b02-73fa-489d-80aa-f36746d30d23\",\n      \"label\": \"label-63\",\n      \"height\": 463,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"ac6e5043-24dd-4981-8967-51ab7752eef8\",\n      \"label\": \"label-64\",\n      \"height\": 438,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"da38d053-13ca-4c2d-8035-9b3e15dca386\",\n      \"label\": \"label-65\",\n      \"height\": 186,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"4e258cf3-9d34-4120-8152-cdcd54a05cc3\",\n      \"label\": \"label-66\",\n      \"height\": 238,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"317e3623-7e4c-4ac2-9114-fdf0d0643fa3\",\n      \"label\": \"label-67\",\n      \"height\": 70,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"3ddce237-5200-4865-b52e-bd0335103018\",\n      \"label\": \"label-68\",\n      \"height\": 268,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"d83f3e13-c1a0-4649-8e64-f8671dec3b76\",\n      \"label\": \"label-69\",\n      \"height\": 354,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"125ebcde-1e36-4f13-b6b5-9b09f00cf5f6\",\n      \"label\": \"label-70\",\n      \"height\": 167,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"c7372ccf-a60e-4021-9db5-4e94350b229a\",\n      \"label\": \"label-71\",\n      \"height\": 275,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"fd1bab38-84bd-4dc4-889b-0791b3d767d2\",\n      \"label\": \"label-72\",\n      \"height\": 166,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"50ffaf18-37d9-4b62-afac-f67ac173977b\",\n      \"label\": \"label-73\",\n      \"height\": 122,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"6fe6561f-4391-4ca2-89d4-faa50de892f1\",\n      \"label\": \"label-74\",\n      \"height\": 270,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"c5ee800d-67b8-4add-857e-f7c6302ff1d9\",\n      \"label\": \"label-75\",\n      \"height\": 435,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"327597a0-824c-4b7b-927e-973f7b879431\",\n      \"label\": \"label-76\",\n      \"height\": 88,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"d762dbca-09f0-4630-9628-5060b6182dcc\",\n      \"label\": \"label-77\",\n      \"height\": 445,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"72ac386f-fdc0-477b-8641-7d79812ca5f7\",\n      \"label\": \"label-78\",\n      \"height\": 167,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"e3fe0ee0-fafc-4e89-9c7b-9ccb6ca3e99e\",\n      \"label\": \"label-79\",\n      \"height\": 58,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"217498c6-0baa-43c0-9a20-077738ab6b67\",\n      \"label\": \"label-80\",\n      \"height\": 362,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"bbb1b759-37a8-4341-8d1d-d24ce317cd19\",\n      \"label\": \"label-81\",\n      \"height\": 181,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"fd9d4338-dc63-456c-ab9f-00d87a9a0ef1\",\n      \"label\": \"label-82\",\n      \"height\": 510,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"b7371aba-2f9d-4953-a155-f6264500b1f3\",\n      \"label\": \"label-83\",\n      \"height\": 276,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"bb1d66ce-5164-43ee-a3b9-3a5849da9431\",\n      \"label\": \"label-84\",\n      \"height\": 447,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"62740bf3-cac7-4db3-bd26-f249f63f0f52\",\n      \"label\": \"label-85\",\n      \"height\": 218,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"8fde7540-f44f-45c7-803b-776547052818\",\n      \"label\": \"label-86\",\n      \"height\": 33,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"c935ac71-825f-4f62-9faa-7b96e44433d3\",\n      \"label\": \"label-87\",\n      \"height\": 377,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"5138df4b-2f43-4502-bf2d-7c45f93c51ee\",\n      \"label\": \"label-88\",\n      \"height\": 162,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"1605bd72-c2a1-42db-b180-4077aaafa476\",\n      \"label\": \"label-89\",\n      \"height\": 72,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"b6314360-9085-4fb0-9fb1-2f5c674405ff\",\n      \"label\": \"label-90\",\n      \"height\": 195,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"be70eb38-6ebd-4907-a44c-493b376f13b8\",\n      \"label\": \"label-91\",\n      \"height\": 162,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"3be15d2c-11d8-47f6-8fcf-e9e79a730a9e\",\n      \"label\": \"label-92\",\n      \"height\": 152,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"56fc0d3d-090d-4fcc-9cfd-740933e09807\",\n      \"label\": \"label-93\",\n      \"height\": 156,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"04f4a1ee-200d-47ff-b76b-da808126e157\",\n      \"label\": \"label-94\",\n      \"height\": 354,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"ba4b7b34-135c-4e2f-98a8-ef62d57899a1\",\n      \"label\": \"label-95\",\n      \"height\": 163,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"3ed4676d-143d-4faf-b823-c7dad09214fa\",\n      \"label\": \"label-96\",\n      \"height\": 211,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"a885ecd2-9194-4e49-bb34-8c08b99035f3\",\n      \"label\": \"label-97\",\n      \"height\": 477,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"d8137642-8310-4d65-bbc5-a405d7c0ce83\",\n      \"label\": \"label-98\",\n      \"height\": 264,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"5482aa46-44c4-499e-894a-dcfdc31190e0\",\n      \"label\": \"label-99\",\n      \"height\": 366,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"7a239253-0392-46fa-8b32-e1239960cd81\",\n      \"label\": \"label-100\",\n      \"height\": 64,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"ec418815-053b-422e-b88c-8fd1c650e901\",\n      \"label\": \"label-101\",\n      \"height\": 323,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"253a3585-4f03-4348-a13b-fa5f6a6a8db5\",\n      \"label\": \"label-102\",\n      \"height\": 223,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"5d442154-3c68-49c3-85ab-4a4814cb3250\",\n      \"label\": \"label-103\",\n      \"height\": 155,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"beaa87e4-b092-4e20-b4f2-d56cdc5aaaf7\",\n      \"label\": \"label-104\",\n      \"height\": 180,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"77869ecf-7c6f-45c4-b112-95a8d1e183ec\",\n      \"label\": \"label-105\",\n      \"height\": 453,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"590faccc-8f11-46fc-b48c-fac5f62f9eb2\",\n      \"label\": \"label-106\",\n      \"height\": 269,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"f5b1b382-6681-4f28-b6b4-57193526f212\",\n      \"label\": \"label-107\",\n      \"height\": 322,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"1384c4a1-2bed-4305-868f-c1c84a41a69b\",\n      \"label\": \"label-108\",\n      \"height\": 262,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"2e45153a-85a3-49b2-a922-b9923d1805bf\",\n      \"label\": \"label-109\",\n      \"height\": 40,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"cc161462-773c-452f-8e53-fc5cde94cc02\",\n      \"label\": \"label-110\",\n      \"height\": 424,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"4083e4f0-a2e6-494f-92df-f5a67d83d262\",\n      \"label\": \"label-111\",\n      \"height\": 43,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"1dfbd91c-4aff-49d6-b999-0a4bf2922141\",\n      \"label\": \"label-112\",\n      \"height\": 276,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"52cff71d-be51-48f1-88fa-58983f4117c1\",\n      \"label\": \"label-113\",\n      \"height\": 351,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"297e5cff-bf94-4719-8651-9954617f3573\",\n      \"label\": \"label-114\",\n      \"height\": 340,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"9e3cc0ef-2962-4a35-ae19-4a5649fe70b6\",\n      \"label\": \"label-115\",\n      \"height\": 57,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"2841e059-94c1-4826-879f-1fa90cf6946e\",\n      \"label\": \"label-116\",\n      \"height\": 201,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"c42965f1-c4f6-4fe5-9d3a-6d661d61844d\",\n      \"label\": \"label-117\",\n      \"height\": 387,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"dae63a35-111e-44dd-b96b-9a184681d3ce\",\n      \"label\": \"label-118\",\n      \"height\": 274,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"b28a90f4-3259-468d-826e-1812e299b80a\",\n      \"label\": \"label-119\",\n      \"height\": 518,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"946e1dce-7e45-4e0b-8fe6-87647f309ec0\",\n      \"label\": \"label-120\",\n      \"height\": 299,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"af7d9c1f-9496-4ffe-b1e4-7566dcd72c07\",\n      \"label\": \"label-121\",\n      \"height\": 337,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"65726c80-e6ee-4017-a954-1087f03ff693\",\n      \"label\": \"label-122\",\n      \"height\": 289,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"9562fe29-abc3-4a72-b2b4-7df509b0c597\",\n      \"label\": \"label-123\",\n      \"height\": 308,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"047da0ec-f0d2-43db-a0ee-e99404e80ff5\",\n      \"label\": \"label-124\",\n      \"height\": 312,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"d1d025eb-e5d6-4ef1-826f-37ad920a74b5\",\n      \"label\": \"label-125\",\n      \"height\": 243,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"3af5f478-371b-4cc6-88f7-cc24bb4738f7\",\n      \"label\": \"label-126\",\n      \"height\": 227,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"c49e979a-dc1a-4ec0-913d-6232c1cb2348\",\n      \"label\": \"label-127\",\n      \"height\": 337,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"ba04fba5-83fd-4aa5-b4cb-d233de260fbe\",\n      \"label\": \"label-128\",\n      \"height\": 58,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"981c89a3-bdac-49b7-83de-3bf0e79378a7\",\n      \"label\": \"label-129\",\n      \"height\": 45,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"ac75e44b-2cd1-48ff-815b-506a5022b9ba\",\n      \"label\": \"label-130\",\n      \"height\": 197,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"c035b504-5b02-4b55-881d-e4e0ca4f1d51\",\n      \"label\": \"label-131\",\n      \"height\": 57,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"402e1f71-2508-4937-ae5e-8401c7380f99\",\n      \"label\": \"label-132\",\n      \"height\": 218,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"9d4d3ee3-d4df-4fbe-a912-c5527db1f9ec\",\n      \"label\": \"label-133\",\n      \"height\": 109,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"1cab43be-8b00-4ae9-ac4c-bba9657d75c4\",\n      \"label\": \"label-134\",\n      \"height\": 523,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"f2a9b28f-cdaa-4968-9a83-bd9f80d9c183\",\n      \"label\": \"label-135\",\n      \"height\": 404,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"5e77d845-5c22-44f3-b153-6db84060cfc8\",\n      \"label\": \"label-136\",\n      \"height\": 236,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"a049c370-f2aa-4965-8bdf-90f9b1bc53d8\",\n      \"label\": \"label-137\",\n      \"height\": 308,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"c31f52f2-325e-4cb8-99e3-73d05d071137\",\n      \"label\": \"label-138\",\n      \"height\": 367,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"e85c838b-b905-4c0c-8c1c-82ad5c415a8c\",\n      \"label\": \"label-139\",\n      \"height\": 244,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"2b9a964d-8623-4df4-afd9-769ecf9c63a7\",\n      \"label\": \"label-140\",\n      \"height\": 433,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"bca73c0f-6b33-4083-93f5-164cf803301e\",\n      \"label\": \"label-141\",\n      \"height\": 474,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"7ce33346-39f3-43a2-bfd4-6993027df1a3\",\n      \"label\": \"label-142\",\n      \"height\": 371,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"5a3735b2-a0b4-4819-b2ec-a6fb724595b5\",\n      \"label\": \"label-143\",\n      \"height\": 199,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"90bd5236-d60c-4d28-9c61-4ceadfcec26f\",\n      \"label\": \"label-144\",\n      \"height\": 497,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"f3d36c88-4f8c-4b2a-8703-200fb4902ea4\",\n      \"label\": \"label-145\",\n      \"height\": 287,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"fb87f2c9-832d-4602-a117-41e1d608585f\",\n      \"label\": \"label-146\",\n      \"height\": 250,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"46d92415-b992-4887-9a1b-1968fd058fd0\",\n      \"label\": \"label-147\",\n      \"height\": 499,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"e522786f-745b-44b5-9002-db7599054aff\",\n      \"label\": \"label-148\",\n      \"height\": 407,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"42c9e457-6308-41b1-bdee-8d1cd7dfe536\",\n      \"label\": \"label-149\",\n      \"height\": 36,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"2c288ebd-416a-4c3d-b06a-ff60a4341256\",\n      \"label\": \"label-150\",\n      \"height\": 182,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"d5f5a8a5-3a9d-487b-945f-ca60e25f5c79\",\n      \"label\": \"label-151\",\n      \"height\": 402,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"f826fc24-c4c3-4cbd-a5f3-4ab33cf7f005\",\n      \"label\": \"label-152\",\n      \"height\": 319,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"5697680f-ca84-4fed-b442-831506bc36d7\",\n      \"label\": \"label-153\",\n      \"height\": 515,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"ad965740-3609-438e-bbe5-58e3633a5252\",\n      \"label\": \"label-154\",\n      \"height\": 478,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"37297930-6570-4ef9-a3f4-1cad3a8062c2\",\n      \"label\": \"label-155\",\n      \"height\": 183,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"f75f7aff-70ec-4312-8e45-6183054802d8\",\n      \"label\": \"label-156\",\n      \"height\": 346,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"741c423c-969d-4de8-890c-7dafaa5d1504\",\n      \"label\": \"label-157\",\n      \"height\": 129,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"5597fa8d-1bfb-4dfe-af27-74303509ffde\",\n      \"label\": \"label-158\",\n      \"height\": 489,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"76284eaa-6160-4765-8ef7-6fb25a579ced\",\n      \"label\": \"label-159\",\n      \"height\": 312,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"821f19ec-f1c3-438c-b34a-6f242aabed15\",\n      \"label\": \"label-160\",\n      \"height\": 83,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"d7da4f5a-01fd-4753-a1b6-9d480ae770f9\",\n      \"label\": \"label-161\",\n      \"height\": 103,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"6c2e63ae-7de5-4d9b-b68b-8520d5d8202e\",\n      \"label\": \"label-162\",\n      \"height\": 164,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"072acb22-6b6e-4b2b-8117-d721168d7f43\",\n      \"label\": \"label-163\",\n      \"height\": 475,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"b800f85a-f3f2-45bc-81df-404a4ffd0753\",\n      \"label\": \"label-164\",\n      \"height\": 522,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"84d38e65-8d0d-497b-8b62-b47a19ac5ee4\",\n      \"label\": \"label-165\",\n      \"height\": 441,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"054dea99-979f-40f9-96fe-3fb4bae0091b\",\n      \"label\": \"label-166\",\n      \"height\": 57,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"87e50010-3b52-4378-a732-0bf2a7ef06de\",\n      \"label\": \"label-167\",\n      \"height\": 388,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"18bfe68e-a2f7-405f-b02a-4a6f9c24e7ee\",\n      \"label\": \"label-168\",\n      \"height\": 45,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"5fbb98d3-8daa-4535-aeee-5c45a2a61609\",\n      \"label\": \"label-169\",\n      \"height\": 382,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"0e3b57c0-f65a-46b4-b4b4-43bad6f0ed36\",\n      \"label\": \"label-170\",\n      \"height\": 371,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"b24a0e03-26ad-41d6-bf28-7a49dd997e2f\",\n      \"label\": \"label-171\",\n      \"height\": 511,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"eced09e5-c1d1-458a-a354-f0d94a80474f\",\n      \"label\": \"label-172\",\n      \"height\": 236,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"80df5159-b127-4490-9d67-44a65eb19d9e\",\n      \"label\": \"label-173\",\n      \"height\": 119,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"f602f23e-d5a8-4892-b4e8-a5efe12676f4\",\n      \"label\": \"label-174\",\n      \"height\": 323,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"716a3ab4-66d5-4509-9d6e-f019801964c6\",\n      \"label\": \"label-175\",\n      \"height\": 104,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"ea2bba65-b448-4309-b529-97a44aad2d68\",\n      \"label\": \"label-176\",\n      \"height\": 324,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"5e0d0d7f-24da-4c09-8404-fad43af9017e\",\n      \"label\": \"label-177\",\n      \"height\": 418,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"057dc088-0bf4-48bd-ab51-d47579817959\",\n      \"label\": \"label-178\",\n      \"height\": 451,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"db2a5bb0-942f-44d9-ac64-a6b5cb7a3c83\",\n      \"label\": \"label-179\",\n      \"height\": 447,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"a9da1743-9db0-412e-9a59-a3d91c18464a\",\n      \"label\": \"label-180\",\n      \"height\": 409,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"b6ec79aa-c64d-45b6-80dc-7ccdc42b41b3\",\n      \"label\": \"label-181\",\n      \"height\": 289,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"7a9e1d47-6752-4acb-aa89-0fbecc237f10\",\n      \"label\": \"label-182\",\n      \"height\": 183,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"cc06097d-989c-48ed-9aaa-3bda20d23a59\",\n      \"label\": \"label-183\",\n      \"height\": 54,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"49f6fd74-f6e8-42a6-9abe-6c5298133a9f\",\n      \"label\": \"label-184\",\n      \"height\": 397,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"c9ecd1b0-80ca-4f15-8a53-08cea8fd2fb7\",\n      \"label\": \"label-185\",\n      \"height\": 484,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"a4979dee-c710-4f79-93b5-2dbc90b926c6\",\n      \"label\": \"label-186\",\n      \"height\": 528,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"0b21ec50-5add-4967-8db1-010d1966558a\",\n      \"label\": \"label-187\",\n      \"height\": 233,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"34482c78-3bcc-4a60-abed-d8a1117fab37\",\n      \"label\": \"label-188\",\n      \"height\": 238,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"09340f07-51ac-45dd-a9ef-9ed22853981b\",\n      \"label\": \"label-189\",\n      \"height\": 393,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"d0869ab5-6de0-489c-9aff-5007d125050d\",\n      \"label\": \"label-190\",\n      \"height\": 245,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"3a8d017a-e2df-4796-ba44-086d1667815c\",\n      \"label\": \"label-191\",\n      \"height\": 285,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"2bd34690-7d92-4b1a-a8a8-17cb07d1c75e\",\n      \"label\": \"label-192\",\n      \"height\": 338,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"384e364a-e041-47b4-9e1d-241db6840e6f\",\n      \"label\": \"label-193\",\n      \"height\": 129,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"d0cdaf13-c5bb-456e-9d89-4c0d28f357b9\",\n      \"label\": \"label-194\",\n      \"height\": 298,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"df8ee5bc-d305-4763-97e0-4f02ae743d1b\",\n      \"label\": \"label-195\",\n      \"height\": 474,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"dd341894-b06e-4049-a27a-05cb91f3da4b\",\n      \"label\": \"label-196\",\n      \"height\": 403,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"6d2006d8-0b54-41ac-8a4f-46c4ebcc97e7\",\n      \"label\": \"label-197\",\n      \"height\": 364,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"6d187b48-f865-4663-b133-35d181198fcc\",\n      \"label\": \"label-198\",\n      \"height\": 44,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"bb94780d-479d-4adc-af6b-0f7794056be3\",\n      \"label\": \"label-199\",\n      \"height\": 422,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"fa4c76d4-2f27-4215-8b51-6603c4711d70\",\n      \"label\": \"label-200\",\n      \"height\": 35,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"aa29fb5b-c746-4ada-bd90-22b2472a6905\",\n      \"label\": \"label-201\",\n      \"height\": 351,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"4c1e3330-3a3c-4ae5-90be-1766c04a9354\",\n      \"label\": \"label-202\",\n      \"height\": 394,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"cb94e342-cacc-47cd-93a6-00e16117cec9\",\n      \"label\": \"label-203\",\n      \"height\": 192,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"cac04f20-f1a4-4726-a6b6-b162b987bf98\",\n      \"label\": \"label-204\",\n      \"height\": 121,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"faf0a9f6-690f-43ab-b566-60af73203a43\",\n      \"label\": \"label-205\",\n      \"height\": 510,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"3b68d156-2aff-4d45-8eb7-8d44e4c4aaf3\",\n      \"label\": \"label-206\",\n      \"height\": 454,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"9575b39e-22e0-466a-ae59-9dab0fb47ed6\",\n      \"label\": \"label-207\",\n      \"height\": 508,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"292ae8e8-3c14-4394-90da-e53909220781\",\n      \"label\": \"label-208\",\n      \"height\": 401,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"54e7b756-03b9-4c60-8959-17bd9dc5c166\",\n      \"label\": \"label-209\",\n      \"height\": 175,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"ccd75986-4f78-4dfc-a398-944e2a637ea3\",\n      \"label\": \"label-210\",\n      \"height\": 158,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"fd1c4616-9c5f-4a24-b020-fceacff54883\",\n      \"label\": \"label-211\",\n      \"height\": 69,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"f3462e70-9e8e-4cf5-8533-9e6c588be742\",\n      \"label\": \"label-212\",\n      \"height\": 93,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"f87b25fd-99bc-4114-bf91-fd70f7384870\",\n      \"label\": \"label-213\",\n      \"height\": 491,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"f33dffd0-c3e3-4840-b7b0-1751912d6344\",\n      \"label\": \"label-214\",\n      \"height\": 320,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"233754ca-44ce-4fbf-a598-7c78b61464fd\",\n      \"label\": \"label-215\",\n      \"height\": 80,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"dc31278d-8045-4939-ae76-ee0643ca7c92\",\n      \"label\": \"label-216\",\n      \"height\": 43,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"8fb3f303-7259-41ff-b113-06b15d0e0c23\",\n      \"label\": \"label-217\",\n      \"height\": 363,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"720d3ed6-9855-4f4a-9f02-6de781235209\",\n      \"label\": \"label-218\",\n      \"height\": 214,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"39a385cf-f84b-4bec-a2b5-fd48ed3ce13f\",\n      \"label\": \"label-219\",\n      \"height\": 37,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"786b5e86-815a-4e47-8dec-178204280c98\",\n      \"label\": \"label-220\",\n      \"height\": 68,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"35804727-3d86-451b-92d5-2268e58ab0df\",\n      \"label\": \"label-221\",\n      \"height\": 375,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"f2f71d57-0a25-4447-bdae-72b293fed11f\",\n      \"label\": \"label-222\",\n      \"height\": 359,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"42174ccd-249b-405d-9365-6ea4f78941df\",\n      \"label\": \"label-223\",\n      \"height\": 178,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"63a83cd5-a06d-4f54-953a-34c9d01cc5f3\",\n      \"label\": \"label-224\",\n      \"height\": 135,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"cf6c2a85-afa4-4af3-b4f7-2465607ec44e\",\n      \"label\": \"label-225\",\n      \"height\": 91,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"a86cac5a-9092-497a-946a-b5f411af2492\",\n      \"label\": \"label-226\",\n      \"height\": 282,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"a9c8d90c-1551-4fba-aa5a-9374a1e45960\",\n      \"label\": \"label-227\",\n      \"height\": 135,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"ea9325bc-6e1a-4a6b-b890-012abd79f3e6\",\n      \"label\": \"label-228\",\n      \"height\": 139,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"cc67eeae-c168-43c0-b29b-fd480bfbc96d\",\n      \"label\": \"label-229\",\n      \"height\": 98,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"2f9f8e28-4131-424d-97ed-8cf9074c1150\",\n      \"label\": \"label-230\",\n      \"height\": 191,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"a1cf096c-a21d-4dcc-9a49-8ef7227fe3c4\",\n      \"label\": \"label-231\",\n      \"height\": 492,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"d095eb3e-a2e9-43b6-afad-5e0202cc9898\",\n      \"label\": \"label-232\",\n      \"height\": 114,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"d48a868c-f1bc-427c-ad23-ef18ee7d2ef2\",\n      \"label\": \"label-233\",\n      \"height\": 332,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"f0df4d88-ede5-4608-990e-8f1fb31604e3\",\n      \"label\": \"label-234\",\n      \"height\": 41,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"3df4fdbe-b21c-460f-bff3-602cc58fd48b\",\n      \"label\": \"label-235\",\n      \"height\": 474,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"844ff17d-95cb-40e0-8134-d2d6461711a5\",\n      \"label\": \"label-236\",\n      \"height\": 108,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"4151de58-e247-4565-8e69-5891ae543986\",\n      \"label\": \"label-237\",\n      \"height\": 371,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"4cd128ce-9300-480d-9d1c-d51022636e21\",\n      \"label\": \"label-238\",\n      \"height\": 498,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"3a211bf2-8c5a-4822-8493-53260153c795\",\n      \"label\": \"label-239\",\n      \"height\": 275,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"7b8041ee-5604-4e04-8d52-f63e6eb94d30\",\n      \"label\": \"label-240\",\n      \"height\": 390,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"f3937ea4-8a51-46c0-8b55-1db5a20cb263\",\n      \"label\": \"label-241\",\n      \"height\": 286,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"8e3ff98f-2da0-4bbe-af2c-df48a0b875c6\",\n      \"label\": \"label-242\",\n      \"height\": 98,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"3620f4f2-4887-4eb0-baf0-6e99571a8eb7\",\n      \"label\": \"label-243\",\n      \"height\": 505,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"2fc79757-92e4-4936-8ea9-2e590cff0561\",\n      \"label\": \"label-244\",\n      \"height\": 196,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"65bb84eb-7e3b-4d71-8310-f153a5646360\",\n      \"label\": \"label-245\",\n      \"height\": 46,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"0a1b350e-36d9-4c98-a832-061f7f460d1b\",\n      \"label\": \"label-246\",\n      \"height\": 268,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"7aee2bcf-190a-4d53-8645-2ac32a248bb2\",\n      \"label\": \"label-247\",\n      \"height\": 345,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"f83720ac-ffc3-4079-8c61-5948e86bb479\",\n      \"label\": \"label-248\",\n      \"height\": 481,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"80eef2d3-485e-4bac-ac6a-d647e52563bf\",\n      \"label\": \"label-249\",\n      \"height\": 189,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"fd841cdb-537f-4967-a9b8-310bbf278919\",\n      \"label\": \"label-250\",\n      \"height\": 523,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"d72f6e19-d5e8-40c5-9575-0ebbe66d0268\",\n      \"label\": \"label-251\",\n      \"height\": 384,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"5ec055d2-6fea-4b07-951e-3c6ec3ac2884\",\n      \"label\": \"label-252\",\n      \"height\": 475,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"6cb54898-b78d-4360-a436-7894adcbaee2\",\n      \"label\": \"label-253\",\n      \"height\": 514,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"45db9c1a-8034-4bfa-9620-577fb5ff7b2f\",\n      \"label\": \"label-254\",\n      \"height\": 320,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"59fd8cf0-1b77-4e96-adfd-a438cf2a4ce3\",\n      \"label\": \"label-255\",\n      \"height\": 500,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"8246a479-de79-41c3-a61a-9dcdfc235a41\",\n      \"label\": \"label-256\",\n      \"height\": 399,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"e3eda63a-0143-4253-9a9e-c8e7f20c957e\",\n      \"label\": \"label-257\",\n      \"height\": 381,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"c3b0cae4-ffb1-468a-8647-71b1ea8f54d2\",\n      \"label\": \"label-258\",\n      \"height\": 324,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"0aa1fe70-5380-4102-ad62-9c63c7507bbc\",\n      \"label\": \"label-259\",\n      \"height\": 487,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"1e093a02-2a19-41a4-a900-7b8caf41bd1c\",\n      \"label\": \"label-260\",\n      \"height\": 269,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"ca049065-aa5d-48d5-8c44-8e611c985ad2\",\n      \"label\": \"label-261\",\n      \"height\": 230,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"6e7d8f48-7ba7-457c-9e49-1d3b78bdb035\",\n      \"label\": \"label-262\",\n      \"height\": 228,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"21e790f0-638c-4035-9f23-69cc5d085c33\",\n      \"label\": \"label-263\",\n      \"height\": 32,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"77070684-6194-4c3d-a00a-6366e35044ed\",\n      \"label\": \"label-264\",\n      \"height\": 283,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"77d0bb04-23a1-4cfb-9402-004bb01d3bfa\",\n      \"label\": \"label-265\",\n      \"height\": 167,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"7c99715b-7523-4b47-8e8c-5479344ddfa9\",\n      \"label\": \"label-266\",\n      \"height\": 110,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"5d8a221c-4894-40b0-b580-f38f17a1305a\",\n      \"label\": \"label-267\",\n      \"height\": 202,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"8df88145-78a2-42bf-8f18-114f798031c1\",\n      \"label\": \"label-268\",\n      \"height\": 434,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"74add212-3e80-4e33-9cc4-1271f7a4a9a5\",\n      \"label\": \"label-269\",\n      \"height\": 315,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"edea59a2-f6b0-4800-9989-4b3ef518eeab\",\n      \"label\": \"label-270\",\n      \"height\": 214,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"9adcf291-a19f-453c-895f-ae494c8492f7\",\n      \"label\": \"label-271\",\n      \"height\": 57,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"879e2d5f-a9e5-40e3-93cc-bc269d658897\",\n      \"label\": \"label-272\",\n      \"height\": 174,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"f89ef5e0-f71c-4591-946f-ad53b76e09ca\",\n      \"label\": \"label-273\",\n      \"height\": 151,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"9f408b07-0aa5-4754-ac2b-b6a7b48e6660\",\n      \"label\": \"label-274\",\n      \"height\": 433,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"24ff8af8-2f95-41b9-961a-6c01107f72b5\",\n      \"label\": \"label-275\",\n      \"height\": 502,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"463ebd3b-4ae2-47a5-9077-409cd2f54b59\",\n      \"label\": \"label-276\",\n      \"height\": 427,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"064c9ac8-ea3b-4b9a-9f42-6a6296bfdce8\",\n      \"label\": \"label-277\",\n      \"height\": 494,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"44306fd0-4754-4f29-a212-5cc463e671a9\",\n      \"label\": \"label-278\",\n      \"height\": 257,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"16db7ceb-cf4f-42ab-89a1-55b7a6dbfd28\",\n      \"label\": \"label-279\",\n      \"height\": 203,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"31cee137-8f39-4696-be14-668f2b2bc7fc\",\n      \"label\": \"label-280\",\n      \"height\": 149,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"7ee50a27-358d-4322-ae70-e24e83ac7c72\",\n      \"label\": \"label-281\",\n      \"height\": 159,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"9269534c-1bb2-4b19-aac8-ab6586569194\",\n      \"label\": \"label-282\",\n      \"height\": 491,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"95ded2f0-fa9e-4f70-b1bc-8398ded2c05a\",\n      \"label\": \"label-283\",\n      \"height\": 274,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"db931618-4eec-4af3-a98e-8e5c94007aa3\",\n      \"label\": \"label-284\",\n      \"height\": 106,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"d6737311-c707-4cf3-b1c7-d2376c57082c\",\n      \"label\": \"label-285\",\n      \"height\": 296,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"6799b184-9b7d-4df2-8232-44a1c89a8d30\",\n      \"label\": \"label-286\",\n      \"height\": 70,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"6f6c5aa3-f3f4-42ff-bad1-947360099ce5\",\n      \"label\": \"label-287\",\n      \"height\": 314,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"59904ae6-aab2-4c45-a4f5-11baf35486cb\",\n      \"label\": \"label-288\",\n      \"height\": 463,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"66bc87b1-f10c-43e4-90a6-3f06d25fa6db\",\n      \"label\": \"label-289\",\n      \"height\": 131,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"b0f48a48-a675-465f-9952-fd16c3fd7faa\",\n      \"label\": \"label-290\",\n      \"height\": 392,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"ff18458f-dff6-4859-b62d-bf70a18ce251\",\n      \"label\": \"label-291\",\n      \"height\": 199,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"2d448232-4e21-432a-b0ae-bfc0f511fb24\",\n      \"label\": \"label-292\",\n      \"height\": 39,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"8b479d64-de53-4b1c-977e-338661305342\",\n      \"label\": \"label-293\",\n      \"height\": 468,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"2e1a0546-b8a6-45b6-9de7-e2637cdbc340\",\n      \"label\": \"label-294\",\n      \"height\": 178,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"b32df8cc-fc35-415d-bf62-780e09d6c3f8\",\n      \"label\": \"label-295\",\n      \"height\": 287,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"9139addf-d996-44dd-83c8-538a8eadafea\",\n      \"label\": \"label-296\",\n      \"height\": 89,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"899b49e7-489c-4c0b-a4f0-8ead5f0ed7d5\",\n      \"label\": \"label-297\",\n      \"height\": 511,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"81408af5-b314-4764-a80b-f836d57e8e5b\",\n      \"label\": \"label-298\",\n      \"height\": 494,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"4464c525-2470-49a1-88cd-6ba05999c0cf\",\n      \"label\": \"label-299\",\n      \"height\": 499,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"50e65a0f-2017-492e-85e6-31cd654d4c82\",\n      \"label\": \"label-300\",\n      \"height\": 265,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"a1a1bcd2-c9d3-458c-a60d-fef9692cdddd\",\n      \"label\": \"label-301\",\n      \"height\": 321,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"06685f5f-862d-46b0-9e5e-b7758d08a88e\",\n      \"label\": \"label-302\",\n      \"height\": 486,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"39d6c81c-54f0-48e8-bfd8-49c872301923\",\n      \"label\": \"label-303\",\n      \"height\": 117,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"cc911e22-f28a-40e7-b639-60e0a80e4d69\",\n      \"label\": \"label-304\",\n      \"height\": 258,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"71356fa7-bde6-47ee-b64a-edb85c0d1984\",\n      \"label\": \"label-305\",\n      \"height\": 493,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"17f385dd-c7ca-4a2b-9844-be64e2c1db23\",\n      \"label\": \"label-306\",\n      \"height\": 325,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"d6051e3e-ac1c-48fc-b50e-e021899ffa59\",\n      \"label\": \"label-307\",\n      \"height\": 188,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"1e941fa4-ca2f-43f1-b78c-6fad299aa52c\",\n      \"label\": \"label-308\",\n      \"height\": 261,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"ef3cd17a-8756-4423-9fab-fba4904fe8bb\",\n      \"label\": \"label-309\",\n      \"height\": 60,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"8e51e740-b3a9-408a-80ae-68bcd19466a2\",\n      \"label\": \"label-310\",\n      \"height\": 60,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"d50054b6-6f4f-488b-aab6-d21ed3c57eae\",\n      \"label\": \"label-311\",\n      \"height\": 212,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"134b27c5-2261-40da-8620-a940545236ec\",\n      \"label\": \"label-312\",\n      \"height\": 442,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"c4c04ca2-6855-449d-971d-35a30ebf69b9\",\n      \"label\": \"label-313\",\n      \"height\": 369,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"21b39d63-745f-433e-96c7-3095bc26f03f\",\n      \"label\": \"label-314\",\n      \"height\": 474,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"71dadd24-fe3a-4dc8-8c88-efc72a9019d1\",\n      \"label\": \"label-315\",\n      \"height\": 410,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"0a3a0692-c6f3-43bd-b118-f529ec554784\",\n      \"label\": \"label-316\",\n      \"height\": 110,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"ab85a910-8703-4ca3-b0d4-786342b56b16\",\n      \"label\": \"label-317\",\n      \"height\": 208,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"6b2779b6-cd2f-4a4c-a800-24c3bee3a7ee\",\n      \"label\": \"label-318\",\n      \"height\": 77,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"916ca9b1-ba57-4078-bbf2-7917b44327c1\",\n      \"label\": \"label-319\",\n      \"height\": 503,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"e048a682-38e3-4177-9c49-c24f39a40bab\",\n      \"label\": \"label-320\",\n      \"height\": 443,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"e4b535fc-64cd-435d-abd8-f287978bb90c\",\n      \"label\": \"label-321\",\n      \"height\": 248,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"b56d683f-439f-444b-a193-116fa9485c25\",\n      \"label\": \"label-322\",\n      \"height\": 262,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"39ad0722-94f9-40bd-bd97-25599602e959\",\n      \"label\": \"label-323\",\n      \"height\": 340,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"cd36ab3f-8058-4d5b-968c-faf44edbf002\",\n      \"label\": \"label-324\",\n      \"height\": 486,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"19b82fc1-79b9-49df-896b-a4eb83052f3e\",\n      \"label\": \"label-325\",\n      \"height\": 379,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"a4cfc5f5-ab23-479f-b8ad-e3403005e785\",\n      \"label\": \"label-326\",\n      \"height\": 198,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"6d1d5119-4615-44d4-850c-34f861d7530b\",\n      \"label\": \"label-327\",\n      \"height\": 412,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"0e13bfce-20f7-4234-9bc2-ba1706d656c6\",\n      \"label\": \"label-328\",\n      \"height\": 453,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"abc7f16b-2c4d-4699-b343-544b7bdb10d4\",\n      \"label\": \"label-329\",\n      \"height\": 306,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"f4602ad2-3cef-4a49-8bb9-22c4b820ef10\",\n      \"label\": \"label-330\",\n      \"height\": 506,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"a903562d-af2e-413f-bb4e-493624eba156\",\n      \"label\": \"label-331\",\n      \"height\": 168,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"07581a6b-a6f9-41f6-82cf-e799f1314179\",\n      \"label\": \"label-332\",\n      \"height\": 428,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"09a563d0-139b-4036-9f6f-06303f895b04\",\n      \"label\": \"label-333\",\n      \"height\": 368,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"2c1f46ec-43fd-4b9b-9032-306448c43ae1\",\n      \"label\": \"label-334\",\n      \"height\": 105,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"5997ee50-4754-4854-90dd-4994e22bd547\",\n      \"label\": \"label-335\",\n      \"height\": 171,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"6780ae3d-ff7e-475d-9ca3-298ca70b9115\",\n      \"label\": \"label-336\",\n      \"height\": 36,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"554b20d9-1136-4ad4-b60d-ed587ecae335\",\n      \"label\": \"label-337\",\n      \"height\": 218,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"1c53d19d-b111-424d-832c-d8edf155e138\",\n      \"label\": \"label-338\",\n      \"height\": 450,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"ba060dad-6c64-4915-a05e-aaa34563f510\",\n      \"label\": \"label-339\",\n      \"height\": 522,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"48a356ea-1315-4ee1-8d45-006aaf6d652c\",\n      \"label\": \"label-340\",\n      \"height\": 106,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"c5c9f388-9a95-428c-8a7d-80f28e5ccf29\",\n      \"label\": \"label-341\",\n      \"height\": 50,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"15349ff2-c8af-4979-963e-6b5bb183aeff\",\n      \"label\": \"label-342\",\n      \"height\": 340,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"1c1686f8-f9fe-4771-b774-aa55e9dcb911\",\n      \"label\": \"label-343\",\n      \"height\": 252,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"846ef6af-12c5-4138-8161-51f5af1a8a44\",\n      \"label\": \"label-344\",\n      \"height\": 109,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"47d6c3d0-cf6b-4540-beea-96825f711c76\",\n      \"label\": \"label-345\",\n      \"height\": 162,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"e9c35224-d1f9-436b-96a8-14cd20a33138\",\n      \"label\": \"label-346\",\n      \"height\": 231,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"bd58ec93-9144-4712-9f48-d3c3555b6d3b\",\n      \"label\": \"label-347\",\n      \"height\": 405,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"36324c65-a5c3-40ae-88ae-2a811902eecd\",\n      \"label\": \"label-348\",\n      \"height\": 440,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"68de9b5e-e180-426b-81e2-13192b0b6a76\",\n      \"label\": \"label-349\",\n      \"height\": 431,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"58a02f30-d97f-43ba-ac12-5a3ad33bdb2f\",\n      \"label\": \"label-350\",\n      \"height\": 504,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"28fe4eff-a4d0-43dc-9c80-b3ca9905386d\",\n      \"label\": \"label-351\",\n      \"height\": 254,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"3ad68992-dce9-4ea4-98ac-b4deb797df77\",\n      \"label\": \"label-352\",\n      \"height\": 283,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"08bafbfc-4365-4168-a6f4-aee480bd58ea\",\n      \"label\": \"label-353\",\n      \"height\": 440,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"86947385-bcbb-49a7-8476-913899c05519\",\n      \"label\": \"label-354\",\n      \"height\": 437,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"ea3696cd-5eef-413d-85c4-356bef672836\",\n      \"label\": \"label-355\",\n      \"height\": 110,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"503a3251-c5d5-4c13-a3cd-ee989dcf0faa\",\n      \"label\": \"label-356\",\n      \"height\": 73,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"df9c9e69-e784-4521-aa76-973b273f35a0\",\n      \"label\": \"label-357\",\n      \"height\": 99,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"ee5b4258-5842-44e1-a19f-5ccdeb152255\",\n      \"label\": \"label-358\",\n      \"height\": 294,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"66dfe346-163e-4a36-8f50-49a650045220\",\n      \"label\": \"label-359\",\n      \"height\": 294,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"bfd2e44a-1381-442a-ab8d-729d1a26fc7b\",\n      \"label\": \"label-360\",\n      \"height\": 527,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"3b75e959-fc93-465c-a7da-e4f275ee4b33\",\n      \"label\": \"label-361\",\n      \"height\": 501,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"44bd76ba-4471-46cb-b15a-8018447e771a\",\n      \"label\": \"label-362\",\n      \"height\": 34,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"87f43f2e-d07f-4668-9285-82f53bc82711\",\n      \"label\": \"label-363\",\n      \"height\": 335,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"b8cf7f71-7ec1-4135-9d86-a9633f9e8fb0\",\n      \"label\": \"label-364\",\n      \"height\": 319,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"50a76fd0-7c2f-4d6e-86bb-b99f353ceb34\",\n      \"label\": \"label-365\",\n      \"height\": 179,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"b28d4364-463a-4f84-b0db-0948321a045c\",\n      \"label\": \"label-366\",\n      \"height\": 109,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"dff41042-fb25-4593-967e-2bcf02a53c81\",\n      \"label\": \"label-367\",\n      \"height\": 231,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"3156f2d3-2bac-4c92-9e5e-995f38289128\",\n      \"label\": \"label-368\",\n      \"height\": 377,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"615bbb2d-636a-44ef-ab54-5b96e40999df\",\n      \"label\": \"label-369\",\n      \"height\": 374,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"d97dd533-6e1b-4bf6-a2c2-b58ad648fdc4\",\n      \"label\": \"label-370\",\n      \"height\": 428,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"f064a48f-006b-4252-8f2d-8d03af30a691\",\n      \"label\": \"label-371\",\n      \"height\": 517,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"f5ba9272-e729-4113-b425-48b57663c83a\",\n      \"label\": \"label-372\",\n      \"height\": 468,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"1ee1b36c-1295-4481-9b0f-5c3f1181e708\",\n      \"label\": \"label-373\",\n      \"height\": 268,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"753397a9-b107-4bc4-8798-f331b195c550\",\n      \"label\": \"label-374\",\n      \"height\": 233,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"8fc257e0-9943-40b9-9ab9-ca1973fb6d74\",\n      \"label\": \"label-375\",\n      \"height\": 373,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"024965f9-4b21-4a5f-bb7f-0916458670e1\",\n      \"label\": \"label-376\",\n      \"height\": 333,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"f486fe47-4198-4f5b-a8fb-c189fb3ac9dc\",\n      \"label\": \"label-377\",\n      \"height\": 36,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"0942b3e1-e4f0-4be8-a3db-a9b05243843b\",\n      \"label\": \"label-378\",\n      \"height\": 157,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"1b45a536-9bc1-4fb6-a247-44f2f63732de\",\n      \"label\": \"label-379\",\n      \"height\": 61,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"d23895ca-a494-4e6f-974e-d47feebd0706\",\n      \"label\": \"label-380\",\n      \"height\": 174,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"9009d63a-fb5a-4af4-986d-5bc9568e56ef\",\n      \"label\": \"label-381\",\n      \"height\": 357,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"2cdb959b-4835-4cd9-8b59-6bdac594d445\",\n      \"label\": \"label-382\",\n      \"height\": 48,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"11836c56-be47-4463-8bd3-cba2ec53a2fd\",\n      \"label\": \"label-383\",\n      \"height\": 64,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"751c6891-2b5c-4c36-a9e0-1193d1365527\",\n      \"label\": \"label-384\",\n      \"height\": 325,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"f1b8cd79-791e-46ca-a29d-2286f5e301f5\",\n      \"label\": \"label-385\",\n      \"height\": 61,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"ca23f55b-427f-4a7b-8fce-965a6ac7f14d\",\n      \"label\": \"label-386\",\n      \"height\": 115,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"ec79efe5-db65-4e25-8c10-cef0cc257d98\",\n      \"label\": \"label-387\",\n      \"height\": 35,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"7d9da017-388f-4481-b0e8-05125bf88f81\",\n      \"label\": \"label-388\",\n      \"height\": 422,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"cf2b5718-2b20-4198-b701-fecfbbc9ce5b\",\n      \"label\": \"label-389\",\n      \"height\": 127,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"336706f6-8e12-4c3f-ac37-85bbf11c01d9\",\n      \"label\": \"label-390\",\n      \"height\": 44,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"e1df2667-c9cd-46d3-b7ca-204e3a3a8060\",\n      \"label\": \"label-391\",\n      \"height\": 392,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"dc55e7ff-39a1-4edc-84bf-301f51df02f3\",\n      \"label\": \"label-392\",\n      \"height\": 374,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"b95aa50d-2840-4392-9d1f-3b5bde82ab4b\",\n      \"label\": \"label-393\",\n      \"height\": 493,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"d197114f-bcfd-4a85-bd5f-dbf59f17e20d\",\n      \"label\": \"label-394\",\n      \"height\": 502,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"362413d7-be08-43a7-92bb-288926fc968a\",\n      \"label\": \"label-395\",\n      \"height\": 80,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"eeb3761d-665a-423e-8398-1fb969f3f6c8\",\n      \"label\": \"label-396\",\n      \"height\": 244,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"c35f4e4f-6f42-4b07-a171-c58b850dfd42\",\n      \"label\": \"label-397\",\n      \"height\": 117,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"9b3fb54d-13c4-4587-aa93-75feef63862c\",\n      \"label\": \"label-398\",\n      \"height\": 477,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"d1155c5b-582a-429a-aaa7-4ab47939ee12\",\n      \"label\": \"label-399\",\n      \"height\": 62,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"7eb4b6b6-c826-41c2-a9dd-b3c644b54c6f\",\n      \"label\": \"label-400\",\n      \"height\": 414,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"cf154728-fa83-415b-bb12-81ed9cf92932\",\n      \"label\": \"label-401\",\n      \"height\": 307,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"bc9e1d76-fc71-48e6-b03a-057e3024dec3\",\n      \"label\": \"label-402\",\n      \"height\": 200,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"fe461683-eccd-4a4c-b0b6-559b8dfb273b\",\n      \"label\": \"label-403\",\n      \"height\": 269,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"b03add47-db8f-4967-820f-4eba449f7e24\",\n      \"label\": \"label-404\",\n      \"height\": 257,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"bd233b73-98dc-4ecc-90d2-b3eb4c82ae12\",\n      \"label\": \"label-405\",\n      \"height\": 437,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"69a50e81-4bc5-4bb5-868a-6332bb94f93d\",\n      \"label\": \"label-406\",\n      \"height\": 263,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"f9578d7d-22c1-41b8-a25a-bbcd109780a4\",\n      \"label\": \"label-407\",\n      \"height\": 509,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"aab1706a-a420-47db-bf4e-1d020b65a18c\",\n      \"label\": \"label-408\",\n      \"height\": 434,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"f36ba6c3-6dc7-40d4-b61d-8eed4d19cf20\",\n      \"label\": \"label-409\",\n      \"height\": 74,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"adc66c60-5e8f-4025-b42f-da7f2f4f2c83\",\n      \"label\": \"label-410\",\n      \"height\": 321,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"eee19cfb-17ef-41ee-a003-4c55e4ff7b59\",\n      \"label\": \"label-411\",\n      \"height\": 442,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"08f7317c-632c-4693-a0d5-a85a44475e6c\",\n      \"label\": \"label-412\",\n      \"height\": 443,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"940601b9-752d-4d7c-b15f-495303e93afe\",\n      \"label\": \"label-413\",\n      \"height\": 73,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"b7a5fede-6344-4c2a-841d-260b5a8e101a\",\n      \"label\": \"label-414\",\n      \"height\": 283,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"803e2299-0566-49b9-879f-c9842cc0bd52\",\n      \"label\": \"label-415\",\n      \"height\": 58,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"696ff001-336c-43b4-b7d2-b32205382a65\",\n      \"label\": \"label-416\",\n      \"height\": 76,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"6fbd39e9-59bd-4dd0-98c3-63dcd96d7d56\",\n      \"label\": \"label-417\",\n      \"height\": 53,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"f4025351-6bfb-4a1c-8582-41c97806b816\",\n      \"label\": \"label-418\",\n      \"height\": 481,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"285a3e73-45be-4ce2-9575-0b09e0043257\",\n      \"label\": \"label-419\",\n      \"height\": 86,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"b3b9bf7f-e999-4dd4-a79f-1ec0e36a3027\",\n      \"label\": \"label-420\",\n      \"height\": 430,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"a413f3ea-8786-4a42-96e2-5a5f9ec947f0\",\n      \"label\": \"label-421\",\n      \"height\": 235,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"e33f5790-2565-4c6a-896b-8acb422a950b\",\n      \"label\": \"label-422\",\n      \"height\": 343,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"ea25d07a-6c8d-4716-96df-b9008de2d230\",\n      \"label\": \"label-423\",\n      \"height\": 169,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"de20d5bf-4315-48e3-811e-0a10ecd09b06\",\n      \"label\": \"label-424\",\n      \"height\": 455,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"5c2aad3d-df04-4b42-8b79-df9cb7701912\",\n      \"label\": \"label-425\",\n      \"height\": 509,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"a13e8654-57fa-4168-9482-8751d050d796\",\n      \"label\": \"label-426\",\n      \"height\": 181,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"2d958657-cca2-44f5-ae4b-f6254df23fdb\",\n      \"label\": \"label-427\",\n      \"height\": 182,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"df2e706e-0d6a-46e1-9986-07a6c1981fa7\",\n      \"label\": \"label-428\",\n      \"height\": 304,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"d7d8a9dd-0ab0-4c2b-abf4-69550093e3c6\",\n      \"label\": \"label-429\",\n      \"height\": 347,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"868c9d9f-b930-4ad2-a8b4-bc5eff2b92ee\",\n      \"label\": \"label-430\",\n      \"height\": 323,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"a18a7810-ca1e-455f-a4c4-1e624da372e1\",\n      \"label\": \"label-431\",\n      \"height\": 349,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"3489974d-d99b-414f-a437-be92200b8bdd\",\n      \"label\": \"label-432\",\n      \"height\": 360,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"ab5cdb21-2e52-47cf-8e4d-070a1dcf2946\",\n      \"label\": \"label-433\",\n      \"height\": 437,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"871e9cf0-0489-4eab-b5d0-43868f392124\",\n      \"label\": \"label-434\",\n      \"height\": 132,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"3704378b-4a58-4c37-a30e-aae693ea217d\",\n      \"label\": \"label-435\",\n      \"height\": 317,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"c87efa07-3978-46a9-a481-e257077084fb\",\n      \"label\": \"label-436\",\n      \"height\": 484,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"9180e47e-ddcb-4c8d-8dc1-1a5a56117716\",\n      \"label\": \"label-437\",\n      \"height\": 228,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"7f46d6c7-11df-482c-9e7e-457360ca3891\",\n      \"label\": \"label-438\",\n      \"height\": 505,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"adcf5afd-965f-436b-acc8-9a4f4211b14c\",\n      \"label\": \"label-439\",\n      \"height\": 38,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"44c0cf4a-3bec-45aa-b129-dbcb365628b2\",\n      \"label\": \"label-440\",\n      \"height\": 285,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"b04bf21b-4721-412a-a062-83a26d953039\",\n      \"label\": \"label-441\",\n      \"height\": 505,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"b497e4bd-7ef7-45dc-9ac7-8d68afc1d172\",\n      \"label\": \"label-442\",\n      \"height\": 354,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"877eab54-600c-4acb-99f8-8475ed926f70\",\n      \"label\": \"label-443\",\n      \"height\": 172,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"8c53782a-e9d0-4c5f-ae74-44fa26dadf09\",\n      \"label\": \"label-444\",\n      \"height\": 386,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"761e4b78-d0da-4e4d-9a4f-6c8ecce5a104\",\n      \"label\": \"label-445\",\n      \"height\": 340,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"fd615a36-5634-4e6d-a811-797f90a13fe9\",\n      \"label\": \"label-446\",\n      \"height\": 83,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"62051ddd-6d9c-4327-bec2-835241dc0b91\",\n      \"label\": \"label-447\",\n      \"height\": 421,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"ec22c2ca-d638-4bc5-bfbf-4f904babcb66\",\n      \"label\": \"label-448\",\n      \"height\": 62,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"e4cdb789-74a7-4748-8e85-86cbc9758a78\",\n      \"label\": \"label-449\",\n      \"height\": 55,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"22956d83-b5f2-4d12-92ca-ee6d5a95a24b\",\n      \"label\": \"label-450\",\n      \"height\": 183,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"82c3e63e-fc20-484c-86e0-59b0ac9e2b86\",\n      \"label\": \"label-451\",\n      \"height\": 511,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"7e653cef-0842-4e5b-808d-284b7df2d84c\",\n      \"label\": \"label-452\",\n      \"height\": 389,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"44913968-2a1a-471b-9b8b-b0a174d52449\",\n      \"label\": \"label-453\",\n      \"height\": 105,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"e9bfef02-71eb-4492-a48d-a0a420ffa31f\",\n      \"label\": \"label-454\",\n      \"height\": 70,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"1fe709f4-1a3f-46f7-8752-ca75bad58d8f\",\n      \"label\": \"label-455\",\n      \"height\": 518,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"c5a69acc-75b7-4a27-9e3e-542d326dbf30\",\n      \"label\": \"label-456\",\n      \"height\": 530,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"9d4145c1-e4bf-412d-8052-fa0e2821750a\",\n      \"label\": \"label-457\",\n      \"height\": 182,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"6dd10858-3964-44b5-8249-b000b18a0787\",\n      \"label\": \"label-458\",\n      \"height\": 529,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"2de060c9-13ca-4202-9ee3-c488cbde0ad7\",\n      \"label\": \"label-459\",\n      \"height\": 216,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"7e635efb-1638-4371-8ca8-6a5b75fdb75a\",\n      \"label\": \"label-460\",\n      \"height\": 207,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"cba60e0b-ffec-446f-a8ac-6eb95115c8f2\",\n      \"label\": \"label-461\",\n      \"height\": 314,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"555b7b34-d995-487e-8d7f-3b834bf772e3\",\n      \"label\": \"label-462\",\n      \"height\": 162,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"b053b8f0-335e-4755-96f8-46a34b92910c\",\n      \"label\": \"label-463\",\n      \"height\": 414,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"0dbf9ced-9dad-458e-a53f-98c0995eca4c\",\n      \"label\": \"label-464\",\n      \"height\": 288,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"6786ac4c-b174-4c5c-a9ac-f803e34905c0\",\n      \"label\": \"label-465\",\n      \"height\": 225,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"2ed9c783-057b-4a41-9047-05c0f8de0980\",\n      \"label\": \"label-466\",\n      \"height\": 267,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"d84bc446-b70e-4c96-9090-95c755587fa1\",\n      \"label\": \"label-467\",\n      \"height\": 167,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"39ca6668-9c11-44af-9d90-5565ad0b6f5e\",\n      \"label\": \"label-468\",\n      \"height\": 199,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"2ed5ecdc-a377-4dad-af68-df87a81b5902\",\n      \"label\": \"label-469\",\n      \"height\": 92,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"cf862633-a894-4ff0-991d-0860f1a2e4e0\",\n      \"label\": \"label-470\",\n      \"height\": 127,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"2f2d0c3f-08e0-48fb-90b4-3fcf860bc998\",\n      \"label\": \"label-471\",\n      \"height\": 295,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"0e8d0c99-ed75-40f7-961a-bbb645baafd3\",\n      \"label\": \"label-472\",\n      \"height\": 46,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"477f054e-4b67-4098-ade2-3bdb89f0adbc\",\n      \"label\": \"label-473\",\n      \"height\": 381,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"1966778d-8c58-4b79-b5a1-0a81174529e4\",\n      \"label\": \"label-474\",\n      \"height\": 149,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"fc5375f3-3e2f-4c1d-a530-8eb5128b038f\",\n      \"label\": \"label-475\",\n      \"height\": 245,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"0722d776-698c-42bb-8cf4-7a8bec334bed\",\n      \"label\": \"label-476\",\n      \"height\": 262,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"277ed881-db8d-4a3d-89e9-391478219ba2\",\n      \"label\": \"label-477\",\n      \"height\": 156,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"e1be8578-2542-4ff0-8af0-e67d6ae8b6b9\",\n      \"label\": \"label-478\",\n      \"height\": 147,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"f2a86fc2-6970-44ca-bf32-62300f373679\",\n      \"label\": \"label-479\",\n      \"height\": 530,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"9ab6a92d-b6e8-4396-a2f3-734270a1d978\",\n      \"label\": \"label-480\",\n      \"height\": 111,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"4c670161-9199-41ee-92a0-dced32fd70bb\",\n      \"label\": \"label-481\",\n      \"height\": 480,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"fc5060e7-0be7-4dc2-8681-3ebfa9df381c\",\n      \"label\": \"label-482\",\n      \"height\": 464,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"2ac8f5d1-0ef2-40c1-ac6f-0f339794442d\",\n      \"label\": \"label-483\",\n      \"height\": 527,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"d65dcec8-134f-4021-9e83-9c62574177c5\",\n      \"label\": \"label-484\",\n      \"height\": 179,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"f844bd84-b774-4c6f-bf61-5aac991c6852\",\n      \"label\": \"label-485\",\n      \"height\": 96,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"238fa11d-b3c1-49d1-b4cb-d0322b70a3d9\",\n      \"label\": \"label-486\",\n      \"height\": 107,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"8a089fef-ff40-446b-9a64-de4625892320\",\n      \"label\": \"label-487\",\n      \"height\": 328,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"e4fbb319-3067-4cb5-8506-813769925d31\",\n      \"label\": \"label-488\",\n      \"height\": 410,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"9158a70d-5171-40fe-a6ac-e8a00f1680d9\",\n      \"label\": \"label-489\",\n      \"height\": 203,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"667328dc-c411-450a-948a-1572fbe23209\",\n      \"label\": \"label-490\",\n      \"height\": 370,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"70e5d593-05a2-4c17-857e-1b3c67a3064e\",\n      \"label\": \"label-491\",\n      \"height\": 503,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"cc0f7b93-8c74-4931-b3d6-e21548c89ba6\",\n      \"label\": \"label-492\",\n      \"height\": 530,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"8a7ad3ee-8058-4e90-97e8-51a43660ff8f\",\n      \"label\": \"label-493\",\n      \"height\": 40,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"774acffc-a30b-4799-aa72-8daaed321518\",\n      \"label\": \"label-494\",\n      \"height\": 114,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"5987364c-b41b-4ca1-a073-5250991170fb\",\n      \"label\": \"label-495\",\n      \"height\": 171,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"e8386fff-4202-4256-a1ce-88f0d8a45e2b\",\n      \"label\": \"label-496\",\n      \"height\": 376,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"9e4a4a14-54be-42b7-881a-0ebdc2c5e5e4\",\n      \"label\": \"label-497\",\n      \"height\": 298,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"409e3045-29d9-479e-a917-0f25cae723ff\",\n      \"label\": \"label-498\",\n      \"height\": 218,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"94b599fa-4858-475d-8506-4dc904244380\",\n      \"label\": \"label-499\",\n      \"height\": 263,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"6a60f6a7-b551-4a4b-8f2c-75525fba84b7\",\n      \"label\": \"label-500\",\n      \"height\": 298,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"7198c589-1d36-4595-beb4-ffa325f43dc7\",\n      \"label\": \"label-501\",\n      \"height\": 472,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"e4990057-8b39-4783-999d-99f0d722b176\",\n      \"label\": \"label-502\",\n      \"height\": 179,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"27583f61-a538-4c4d-9496-144bd6f4b4c2\",\n      \"label\": \"label-503\",\n      \"height\": 211,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"323f8b11-f71c-4b77-ab46-60c175fdb0af\",\n      \"label\": \"label-504\",\n      \"height\": 197,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"528cd319-86c0-4d41-b330-fa88f9a6133c\",\n      \"label\": \"label-505\",\n      \"height\": 467,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"1a2215c0-5aa7-42ba-b723-8e0883ea2030\",\n      \"label\": \"label-506\",\n      \"height\": 430,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"63405018-e344-4948-94a8-e9312b5a8d79\",\n      \"label\": \"label-507\",\n      \"height\": 334,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"1db08d67-7ff2-4fb2-a2fa-d7acc6689564\",\n      \"label\": \"label-508\",\n      \"height\": 33,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"43473a06-1160-4526-b2b0-054ccacf1fcb\",\n      \"label\": \"label-509\",\n      \"height\": 509,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"e2ae58da-5af2-498d-95c2-1c6884fae2bd\",\n      \"label\": \"label-510\",\n      \"height\": 307,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"373728ce-1831-4077-89df-3008f992787c\",\n      \"label\": \"label-511\",\n      \"height\": 192,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"8d763d9d-070d-457a-873c-62f1e3d0d4c6\",\n      \"label\": \"label-512\",\n      \"height\": 103,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"df0b1825-e93a-4a8d-9154-dd372ec7207c\",\n      \"label\": \"label-513\",\n      \"height\": 445,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"ee52b26b-5252-4113-8acd-3bb85247eb40\",\n      \"label\": \"label-514\",\n      \"height\": 446,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"673530cd-b200-4065-b9be-14bdb09016e7\",\n      \"label\": \"label-515\",\n      \"height\": 425,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"06d2c6a1-700a-4a62-a9f4-13d3fb63b9be\",\n      \"label\": \"label-516\",\n      \"height\": 196,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"167505a3-b396-4fcd-99f6-9c3b589cb8d3\",\n      \"label\": \"label-517\",\n      \"height\": 143,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"e8f7f93a-f5ad-454c-af42-7397af471ae5\",\n      \"label\": \"label-518\",\n      \"height\": 531,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"d9f0bcd5-4491-4f2e-bfce-fe1b176621a2\",\n      \"label\": \"label-519\",\n      \"height\": 298,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"3bf3a05a-4a56-4173-8284-ffaa48c86d16\",\n      \"label\": \"label-520\",\n      \"height\": 424,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"ee7e0ce4-eede-4d59-997b-aacfc29c9f39\",\n      \"label\": \"label-521\",\n      \"height\": 519,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"74252525-4795-4a21-aa74-c3f8be8111be\",\n      \"label\": \"label-522\",\n      \"height\": 371,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"794b0157-7a4d-4156-98b9-7090af198f56\",\n      \"label\": \"label-523\",\n      \"height\": 97,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"de54567b-720e-4adb-9c4f-3c43b03e1081\",\n      \"label\": \"label-524\",\n      \"height\": 457,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"6ca0bf7f-9de5-43db-9749-c5c666329120\",\n      \"label\": \"label-525\",\n      \"height\": 229,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"0e4fc174-2cb7-48a2-93f9-20740597c1ff\",\n      \"label\": \"label-526\",\n      \"height\": 290,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"5a05c420-feb8-475f-9059-a5ffa3d1bdd5\",\n      \"label\": \"label-527\",\n      \"height\": 440,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"3ca2a317-787a-4ed0-a2a4-f96430befc0f\",\n      \"label\": \"label-528\",\n      \"height\": 383,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"4e3afaf1-502d-49f8-b947-21ec83431bd5\",\n      \"label\": \"label-529\",\n      \"height\": 341,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"07acfdba-8278-4557-bc5e-c8acb3fa49c3\",\n      \"label\": \"label-530\",\n      \"height\": 509,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"db903cba-5116-4c85-9be2-febbc812addd\",\n      \"label\": \"label-531\",\n      \"height\": 319,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"7b978751-d9f5-4126-a882-c0632dffb899\",\n      \"label\": \"label-532\",\n      \"height\": 343,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"813fe4c9-b068-4877-8323-01a604b82747\",\n      \"label\": \"label-533\",\n      \"height\": 142,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"0727f7dc-fd86-4693-a471-ef8e4447f2ec\",\n      \"label\": \"label-534\",\n      \"height\": 497,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"7e3813e7-278e-455c-8133-fc5083c81125\",\n      \"label\": \"label-535\",\n      \"height\": 154,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"dcf720ba-e656-46c7-a5d1-dc1fbe08f29c\",\n      \"label\": \"label-536\",\n      \"height\": 400,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"21b8f26f-63c6-4291-bac9-27beb6625623\",\n      \"label\": \"label-537\",\n      \"height\": 277,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"d033ad75-2e42-41d7-b446-94441b2a8fb8\",\n      \"label\": \"label-538\",\n      \"height\": 209,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"33169a15-2775-4095-8171-a397df801815\",\n      \"label\": \"label-539\",\n      \"height\": 38,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"20cfc04d-a0c2-49aa-ae16-6f67a8c1ec8f\",\n      \"label\": \"label-540\",\n      \"height\": 397,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"5c272d97-4b14-4fd7-93dc-4534671cdd02\",\n      \"label\": \"label-541\",\n      \"height\": 74,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"e2a1d7fb-5f9f-4a08-ab0c-98583fa2344d\",\n      \"label\": \"label-542\",\n      \"height\": 508,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"107c8a4f-14c4-4bf7-87ac-c4966a2fd692\",\n      \"label\": \"label-543\",\n      \"height\": 158,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"362ddf35-f56c-4b8d-a5e9-5573355ebdf0\",\n      \"label\": \"label-544\",\n      \"height\": 219,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"e43415ce-2467-4495-937b-96e537ab488d\",\n      \"label\": \"label-545\",\n      \"height\": 171,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"3481d6fd-465e-429a-86f2-d6e9cae64f56\",\n      \"label\": \"label-546\",\n      \"height\": 241,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"3966bcff-84af-4c0f-bae7-4b855515430b\",\n      \"label\": \"label-547\",\n      \"height\": 248,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"31ee613b-7fd1-4242-9596-cbf5cedc9335\",\n      \"label\": \"label-548\",\n      \"height\": 215,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"ac8fc441-cfc1-4d9f-8208-9211684fa678\",\n      \"label\": \"label-549\",\n      \"height\": 56,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"00e27bab-22c1-4cb0-b971-c6491cf461f9\",\n      \"label\": \"label-550\",\n      \"height\": 240,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"dbaa42f8-310d-42d3-93ff-617ce7d2d8ce\",\n      \"label\": \"label-551\",\n      \"height\": 37,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"b7ccb858-806b-4570-bf9b-8f67c8aa9587\",\n      \"label\": \"label-552\",\n      \"height\": 493,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"325e9f3b-38f9-4675-9bb9-213c2cc679f5\",\n      \"label\": \"label-553\",\n      \"height\": 113,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"6a510b8c-1477-4e8a-b148-f772a1fc18cd\",\n      \"label\": \"label-554\",\n      \"height\": 503,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"2a3f8098-56ad-4ea9-a374-6fce77e9f0b7\",\n      \"label\": \"label-555\",\n      \"height\": 470,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"bad60d4b-65d0-42dd-a877-b8ddfd86f609\",\n      \"label\": \"label-556\",\n      \"height\": 32,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"341d568d-950b-4ada-bee4-93b336e94f63\",\n      \"label\": \"label-557\",\n      \"height\": 180,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"f7f757bb-f179-4819-9258-0aa850f1516d\",\n      \"label\": \"label-558\",\n      \"height\": 35,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"88029df7-1292-4430-837b-677a7abd7f62\",\n      \"label\": \"label-559\",\n      \"height\": 334,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"152b98db-b727-4e1f-9314-64f11899e0e1\",\n      \"label\": \"label-560\",\n      \"height\": 332,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"e23ef014-e022-4f75-981d-6bbb1664a5de\",\n      \"label\": \"label-561\",\n      \"height\": 395,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"d3f59f5d-9601-48b1-86c6-5a91ed610182\",\n      \"label\": \"label-562\",\n      \"height\": 503,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"e3354450-b1e9-40c0-b466-fbcc7b79dfdc\",\n      \"label\": \"label-563\",\n      \"height\": 485,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"c345293d-0a89-4f57-8351-72a3b22a2317\",\n      \"label\": \"label-564\",\n      \"height\": 311,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"2dcee443-255b-429e-9f9e-993cf58d1b7f\",\n      \"label\": \"label-565\",\n      \"height\": 441,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"567f11ba-82f6-4a44-bc5d-a5e01d9456cf\",\n      \"label\": \"label-566\",\n      \"height\": 135,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"7f3b4d25-5324-4a15-869d-4267ffef602c\",\n      \"label\": \"label-567\",\n      \"height\": 259,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"c6fb94dd-3185-42de-973d-bfbb217a7503\",\n      \"label\": \"label-568\",\n      \"height\": 289,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"2564c6de-ab88-4797-bc4a-274666336894\",\n      \"label\": \"label-569\",\n      \"height\": 291,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"5f10e0c1-7484-4274-893d-aba733b62490\",\n      \"label\": \"label-570\",\n      \"height\": 419,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"c34be343-06e8-4a7e-b274-fc807898f2b9\",\n      \"label\": \"label-571\",\n      \"height\": 466,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"79eb88c2-d688-4747-a401-b7ccef117189\",\n      \"label\": \"label-572\",\n      \"height\": 214,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"5674a083-06c6-45db-9b5b-e5e4546acdb9\",\n      \"label\": \"label-573\",\n      \"height\": 291,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"6bb35440-7968-4488-bd32-ccc64516cee7\",\n      \"label\": \"label-574\",\n      \"height\": 303,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"8b5117bb-90f5-4df9-9cea-60689dedf8e4\",\n      \"label\": \"label-575\",\n      \"height\": 72,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"a918eaed-3919-49ef-99e0-46d5a1d922d7\",\n      \"label\": \"label-576\",\n      \"height\": 313,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"5e97ff70-2e0c-4990-bc9d-e0454a86d286\",\n      \"label\": \"label-577\",\n      \"height\": 59,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"b31e3bbc-aeda-47a5-8474-4a6491728aea\",\n      \"label\": \"label-578\",\n      \"height\": 335,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"c66d739a-c223-4f7f-9817-465e693433d9\",\n      \"label\": \"label-579\",\n      \"height\": 413,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"fb698673-6439-4bdb-b746-656398936b86\",\n      \"label\": \"label-580\",\n      \"height\": 442,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"5517586e-9e41-497e-877b-5ad3e28104da\",\n      \"label\": \"label-581\",\n      \"height\": 182,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"e806afb8-6319-430d-a2d7-a0421d23f2c9\",\n      \"label\": \"label-582\",\n      \"height\": 351,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"10ee6786-2be8-47d4-be7e-9bfd43b2f022\",\n      \"label\": \"label-583\",\n      \"height\": 379,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"70f3d36c-f75e-4ba3-ac34-e4fb1bd06802\",\n      \"label\": \"label-584\",\n      \"height\": 118,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"8b4eff12-21b4-4c29-b260-74f7b4e89574\",\n      \"label\": \"label-585\",\n      \"height\": 287,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"9cf66907-570e-450d-b8b8-fa9ae329a288\",\n      \"label\": \"label-586\",\n      \"height\": 486,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"2ada09b0-4258-4d6e-a6c3-4461dc276a0b\",\n      \"label\": \"label-587\",\n      \"height\": 498,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"253823eb-88d2-437d-9235-3735903bf9c0\",\n      \"label\": \"label-588\",\n      \"height\": 55,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"3d20f5ea-ca84-4ee7-958a-1c65b322aab9\",\n      \"label\": \"label-589\",\n      \"height\": 134,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"e3a35ece-f010-44b5-8769-f16ac5ca1941\",\n      \"label\": \"label-590\",\n      \"height\": 91,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"3c7b2ebb-c335-48e3-8de2-7bba7f5941e3\",\n      \"label\": \"label-591\",\n      \"height\": 253,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"b84c516e-0c1f-40a3-b72b-a996d3f816c7\",\n      \"label\": \"label-592\",\n      \"height\": 393,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"559d910a-c42b-4ab2-81a0-dfa094de6618\",\n      \"label\": \"label-593\",\n      \"height\": 512,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"982feceb-ad54-4c7e-ad99-c46d6175c51f\",\n      \"label\": \"label-594\",\n      \"height\": 264,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"c7733609-29fb-43e1-b4a0-2e7a5091f00a\",\n      \"label\": \"label-595\",\n      \"height\": 183,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"5f070329-7254-4d76-88be-ba136af8033e\",\n      \"label\": \"label-596\",\n      \"height\": 183,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"71dc6e01-6862-486f-8d4c-09d4d1455270\",\n      \"label\": \"label-597\",\n      \"height\": 217,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"763645d9-55f6-41fe-b340-33c6f1ef93e7\",\n      \"label\": \"label-598\",\n      \"height\": 201,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"2c5c1746-495f-4e96-93f1-f90cfb0897da\",\n      \"label\": \"label-599\",\n      \"height\": 86,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"56402cf1-f7d2-4f94-875a-5af08d07d9b9\",\n      \"label\": \"label-600\",\n      \"height\": 201,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"f00fcd2b-9eff-4260-a119-c16ba7dd6817\",\n      \"label\": \"label-601\",\n      \"height\": 100,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"eada47ff-ed2c-491b-9dc7-43214efb364d\",\n      \"label\": \"label-602\",\n      \"height\": 334,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"724bb221-a14c-4e2e-8833-ca6f976194a2\",\n      \"label\": \"label-603\",\n      \"height\": 81,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"cfba2554-1ca2-4b90-863e-34c2ced35492\",\n      \"label\": \"label-604\",\n      \"height\": 93,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"1d098f2b-b28f-4d0a-9503-db81e5817d0e\",\n      \"label\": \"label-605\",\n      \"height\": 434,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"1758de40-1491-4719-9094-68b53389a36f\",\n      \"label\": \"label-606\",\n      \"height\": 298,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"51225a4c-30eb-4d78-9233-4f62c45446ac\",\n      \"label\": \"label-607\",\n      \"height\": 191,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"d63571a6-10f4-49a1-abdc-6aa93ddbd2b9\",\n      \"label\": \"label-608\",\n      \"height\": 465,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"9f4fcdf9-95cc-44ce-92d8-578e644e2e13\",\n      \"label\": \"label-609\",\n      \"height\": 451,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"b3315ad0-59df-47ee-87a7-08e780edabbe\",\n      \"label\": \"label-610\",\n      \"height\": 265,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"b96acf95-cc17-4cf6-b7cc-a5636f719e3d\",\n      \"label\": \"label-611\",\n      \"height\": 294,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"d2516278-c6a1-403c-9a33-db7a2c28a564\",\n      \"label\": \"label-612\",\n      \"height\": 138,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"be470691-d2d4-4ce5-a07b-338a60b36d42\",\n      \"label\": \"label-613\",\n      \"height\": 388,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"fb45ea6b-9cef-4004-b30a-4cb3101d8f63\",\n      \"label\": \"label-614\",\n      \"height\": 505,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"9da7e492-1d11-4071-bfed-440368cb29c4\",\n      \"label\": \"label-615\",\n      \"height\": 377,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"6de15d8a-baaf-4298-a1e5-3cd49a323932\",\n      \"label\": \"label-616\",\n      \"height\": 307,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"a3a00416-0efe-4e34-bea6-e6edc0df6382\",\n      \"label\": \"label-617\",\n      \"height\": 140,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"119b8e19-cce4-4d23-a1f6-591d68f3bb31\",\n      \"label\": \"label-618\",\n      \"height\": 474,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"dcdfbb32-5ae5-421a-a31d-390fc378ce1b\",\n      \"label\": \"label-619\",\n      \"height\": 111,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"3e712b01-d1ef-44c9-8df2-0c5ec5cd5741\",\n      \"label\": \"label-620\",\n      \"height\": 360,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"b26010af-adb1-42f8-8001-9fb8bd7ef82e\",\n      \"label\": \"label-621\",\n      \"height\": 521,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"da799714-cbd1-43f5-bc43-6b15580c48f0\",\n      \"label\": \"label-622\",\n      \"height\": 366,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"06385ddf-f23d-4a2c-af68-7bca8b42626e\",\n      \"label\": \"label-623\",\n      \"height\": 115,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"47df919c-3af4-4f4f-a24e-b0aac8e5a4e4\",\n      \"label\": \"label-624\",\n      \"height\": 80,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"4ce6f032-9a0a-4e9d-9c55-9ab07a211ee9\",\n      \"label\": \"label-625\",\n      \"height\": 367,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"8896d623-0751-479e-9125-ce0cd2d0b7d6\",\n      \"label\": \"label-626\",\n      \"height\": 493,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"a7d73cd0-0d09-40b5-af6b-106d4b5fdc1d\",\n      \"label\": \"label-627\",\n      \"height\": 394,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"622fca31-0a5b-4bb7-87eb-4af63b3c5b6d\",\n      \"label\": \"label-628\",\n      \"height\": 358,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"6be8a2bd-0362-4f2c-b780-45cf8e158984\",\n      \"label\": \"label-629\",\n      \"height\": 40,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"a78e87da-b6e5-4b03-92b9-7ab0a109b366\",\n      \"label\": \"label-630\",\n      \"height\": 467,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"66fac41d-2f09-470d-b258-4233a8622cd1\",\n      \"label\": \"label-631\",\n      \"height\": 253,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"9213610c-acd3-457a-8045-eea9fb30c7bf\",\n      \"label\": \"label-632\",\n      \"height\": 63,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"514bd517-fa32-4191-a75c-6f7d1c0c7dc2\",\n      \"label\": \"label-633\",\n      \"height\": 204,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"01ff32fc-b702-4389-b872-f8fae7f8ff65\",\n      \"label\": \"label-634\",\n      \"height\": 343,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"cedaeedb-b6a1-46cb-a9a5-6f09619f2912\",\n      \"label\": \"label-635\",\n      \"height\": 157,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"8b455d09-6ec9-49cc-8f86-c353d1c242da\",\n      \"label\": \"label-636\",\n      \"height\": 82,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"3ee325c6-3cac-43f4-a368-635d446bc6ef\",\n      \"label\": \"label-637\",\n      \"height\": 403,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"4c07e3aa-9bc5-4bcb-98ac-af32df8b9dc4\",\n      \"label\": \"label-638\",\n      \"height\": 204,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"9f92996c-6d39-41c8-a410-a1ab077bbc44\",\n      \"label\": \"label-639\",\n      \"height\": 486,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"0e34b2f4-eec3-49f3-99e4-c4982d1df816\",\n      \"label\": \"label-640\",\n      \"height\": 186,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"88602eb9-081b-4f80-a588-61b17aedead3\",\n      \"label\": \"label-641\",\n      \"height\": 300,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"76a81a70-cb4e-43a2-a376-0c5a79d6f701\",\n      \"label\": \"label-642\",\n      \"height\": 139,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"a5c50d04-fadf-4b1b-bf8e-d6f60a37c1e5\",\n      \"label\": \"label-643\",\n      \"height\": 195,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"4d010766-ea21-40f1-af8f-6eea6f525c5c\",\n      \"label\": \"label-644\",\n      \"height\": 397,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"c949023c-fdb9-495a-9a1c-15c4bf6a6549\",\n      \"label\": \"label-645\",\n      \"height\": 236,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"bc503999-799f-4b70-a721-88b141f0b9a6\",\n      \"label\": \"label-646\",\n      \"height\": 357,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"5bd41d7c-2d99-4691-bec9-eaa72f5f7a3b\",\n      \"label\": \"label-647\",\n      \"height\": 91,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"d336c776-3507-4482-b1a9-87baa4b8e721\",\n      \"label\": \"label-648\",\n      \"height\": 288,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"85a02aa8-119e-42d3-9bed-afd13e4405a0\",\n      \"label\": \"label-649\",\n      \"height\": 404,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"85921180-7c77-45d8-a41e-6f92e62b45dc\",\n      \"label\": \"label-650\",\n      \"height\": 478,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"e784ef71-a6e5-4e9c-8eeb-ed2fb77a7125\",\n      \"label\": \"label-651\",\n      \"height\": 453,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"5b88ddb9-ae3a-467e-ace0-dffbdad22e41\",\n      \"label\": \"label-652\",\n      \"height\": 424,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"a6b8fee9-017d-456c-abee-487486fe405b\",\n      \"label\": \"label-653\",\n      \"height\": 460,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"d1bd2451-01b7-4ae2-8b1d-4972c3e9de45\",\n      \"label\": \"label-654\",\n      \"height\": 37,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"716aabbf-dbba-404b-a7de-2a6d37ec9493\",\n      \"label\": \"label-655\",\n      \"height\": 389,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"b82c2734-de04-422c-9101-8eb38b416a2c\",\n      \"label\": \"label-656\",\n      \"height\": 150,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"a09382e9-3d06-4892-9504-644aab961ce5\",\n      \"label\": \"label-657\",\n      \"height\": 472,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"be20dbd8-7503-47e6-8117-67d172ec7831\",\n      \"label\": \"label-658\",\n      \"height\": 119,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"db28c429-decb-4ddd-b2d4-c1d473d89c8f\",\n      \"label\": \"label-659\",\n      \"height\": 122,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"68b9ccc4-505d-4891-9796-d5628817d187\",\n      \"label\": \"label-660\",\n      \"height\": 50,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"4884fdf4-1fd1-48d0-92e3-2a23d83086de\",\n      \"label\": \"label-661\",\n      \"height\": 477,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"7a70d804-4138-40f0-9aec-3f20b888b3e6\",\n      \"label\": \"label-662\",\n      \"height\": 332,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"1f74152d-159e-4476-81c3-74e74fe4720e\",\n      \"label\": \"label-663\",\n      \"height\": 448,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"d9f1a7d6-3656-484f-b94f-c94c1e51dfb0\",\n      \"label\": \"label-664\",\n      \"height\": 298,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"4a9748bf-e862-4bce-9cd3-1ffc23777d67\",\n      \"label\": \"label-665\",\n      \"height\": 478,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"ff715e40-3f54-452a-a33f-55ab6f37631f\",\n      \"label\": \"label-666\",\n      \"height\": 390,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"b634cc44-a768-4023-87a5-02320263fa5e\",\n      \"label\": \"label-667\",\n      \"height\": 273,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"69ad267a-9f45-437c-b803-29b4f6eb4ddd\",\n      \"label\": \"label-668\",\n      \"height\": 138,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"ab4cbcb0-8fec-4909-b5db-fbf4fa73617c\",\n      \"label\": \"label-669\",\n      \"height\": 431,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"04f87441-96ca-4a95-b0d5-dd0d4bf959df\",\n      \"label\": \"label-670\",\n      \"height\": 51,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"91c2e710-ab24-4fa7-ac7a-57ab02d01314\",\n      \"label\": \"label-671\",\n      \"height\": 460,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"54ddc0ce-5ee5-4d02-8847-324e9695c771\",\n      \"label\": \"label-672\",\n      \"height\": 109,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"e0ee5475-5a34-43ff-bde0-6b15b3c99ad3\",\n      \"label\": \"label-673\",\n      \"height\": 111,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"6868949b-e9ac-4290-b5b1-bd62e3058601\",\n      \"label\": \"label-674\",\n      \"height\": 152,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"2ff6474f-506c-493e-835e-0b317c226788\",\n      \"label\": \"label-675\",\n      \"height\": 144,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"4ad3492a-0340-420b-852d-7861ed02954d\",\n      \"label\": \"label-676\",\n      \"height\": 186,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"dcc0c805-22bb-4c52-b758-a2864532efe2\",\n      \"label\": \"label-677\",\n      \"height\": 209,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"e340aec6-1b20-4aec-8e58-45165ec8b5ea\",\n      \"label\": \"label-678\",\n      \"height\": 356,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"f04a28a5-96f8-40fc-a6fe-e319143c55d5\",\n      \"label\": \"label-679\",\n      \"height\": 136,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"e7c58bd6-24d3-48ab-a8ee-03003e08e246\",\n      \"label\": \"label-680\",\n      \"height\": 280,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"5ebf0200-a784-4d31-84dd-06a33fdcbaea\",\n      \"label\": \"label-681\",\n      \"height\": 532,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"e309da75-551d-4080-ad89-dfd0ef9b3b97\",\n      \"label\": \"label-682\",\n      \"height\": 423,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"97d3f7cc-105f-4f13-9ea1-4046af128035\",\n      \"label\": \"label-683\",\n      \"height\": 247,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"c486862c-64b7-4860-a335-027302b5fd4f\",\n      \"label\": \"label-684\",\n      \"height\": 127,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"fe5ac304-94cc-4bf7-9b06-1c5a968ce347\",\n      \"label\": \"label-685\",\n      \"height\": 270,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"472cbd76-c3e5-49d4-bf89-e1f8717f9193\",\n      \"label\": \"label-686\",\n      \"height\": 461,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"acd4f1a0-9b87-49ee-95e4-f69931d8bbf3\",\n      \"label\": \"label-687\",\n      \"height\": 240,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"3b166a14-5359-4e23-88d3-7f68c604ec81\",\n      \"label\": \"label-688\",\n      \"height\": 211,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"10467515-fc2a-4daa-8e46-b09114bdec96\",\n      \"label\": \"label-689\",\n      \"height\": 422,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"1fb6754d-9095-4c36-afb5-5c90eb4476dd\",\n      \"label\": \"label-690\",\n      \"height\": 298,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"a7885ea2-c299-4f45-bf55-112035fd21aa\",\n      \"label\": \"label-691\",\n      \"height\": 133,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"d559e21f-5f72-4ed6-928f-7380f7a7db52\",\n      \"label\": \"label-692\",\n      \"height\": 249,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"3e8fb006-7b78-47cc-af1f-5714c91dbc7d\",\n      \"label\": \"label-693\",\n      \"height\": 60,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"db308583-e08e-4b5c-8847-45098a7d70e9\",\n      \"label\": \"label-694\",\n      \"height\": 189,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"319aa486-ed6c-4fd8-90e6-e7fc78290569\",\n      \"label\": \"label-695\",\n      \"height\": 253,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"af236e33-1e91-4c81-9517-ffc396294b3d\",\n      \"label\": \"label-696\",\n      \"height\": 37,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"c06a6f55-9d90-418f-98ba-3b189405f509\",\n      \"label\": \"label-697\",\n      \"height\": 225,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"389ad64f-1ab2-436c-8d1a-2a2e590db28f\",\n      \"label\": \"label-698\",\n      \"height\": 287,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"457bc882-d52d-4a06-99a0-18ab33b3d49c\",\n      \"label\": \"label-699\",\n      \"height\": 60,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"3b548fb7-963e-4611-889c-a6b6035cb8a3\",\n      \"label\": \"label-700\",\n      \"height\": 152,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"43ee4f58-10df-4f0c-afaa-77a07b6a832f\",\n      \"label\": \"label-701\",\n      \"height\": 320,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"df77c898-f161-4ce1-85c5-f9cc9209ee84\",\n      \"label\": \"label-702\",\n      \"height\": 365,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"3013675b-64cc-4aaf-a8cc-4a411e5d2ee2\",\n      \"label\": \"label-703\",\n      \"height\": 173,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"d37d6c37-7d46-4aa2-b27b-f075123f01dc\",\n      \"label\": \"label-704\",\n      \"height\": 69,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"4b733db1-e058-4572-a6d3-617c33e3828b\",\n      \"label\": \"label-705\",\n      \"height\": 423,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"84cbd464-9e05-4193-a292-891bbea0172a\",\n      \"label\": \"label-706\",\n      \"height\": 473,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"22719a23-7ef3-4f78-8d97-d210b9bc7179\",\n      \"label\": \"label-707\",\n      \"height\": 415,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"aaf48d1a-bf2f-4f6d-a5c6-96d8b31d2167\",\n      \"label\": \"label-708\",\n      \"height\": 113,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"28e3589f-3b45-458a-bcbc-de54115b945f\",\n      \"label\": \"label-709\",\n      \"height\": 211,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"df1ea2aa-2a2c-49e4-ac9a-c7fa281b8f07\",\n      \"label\": \"label-710\",\n      \"height\": 288,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"00af9315-9061-40b2-9171-c3ae6e799872\",\n      \"label\": \"label-711\",\n      \"height\": 160,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"07cde661-73ba-4c1e-87b0-835d32d0eb97\",\n      \"label\": \"label-712\",\n      \"height\": 199,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"7c19ba77-dfa0-4484-b83b-a741f6bd40dc\",\n      \"label\": \"label-713\",\n      \"height\": 69,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"1a6c26bf-ab63-42f6-af4d-9ffa8e929ace\",\n      \"label\": \"label-714\",\n      \"height\": 126,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"6d8da07a-58f6-4643-91c6-141d515d8388\",\n      \"label\": \"label-715\",\n      \"height\": 419,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"e5b100e5-336d-44a8-a530-6c4688ee3def\",\n      \"label\": \"label-716\",\n      \"height\": 106,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"b60db4c0-6ca5-41d0-9c69-bbed19091d0e\",\n      \"label\": \"label-717\",\n      \"height\": 175,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"b8a0670d-abdd-4b71-b9c5-c9d0ada7db61\",\n      \"label\": \"label-718\",\n      \"height\": 392,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"2b82a233-8a4a-4fa9-b222-c1ec0de17f73\",\n      \"label\": \"label-719\",\n      \"height\": 87,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"e09271fb-4ee1-47fb-942f-425f9da59c48\",\n      \"label\": \"label-720\",\n      \"height\": 345,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"bd02b3cc-7c22-43e6-9d1d-4362456d3668\",\n      \"label\": \"label-721\",\n      \"height\": 381,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"6d9e770f-c513-4cf2-9627-4ed103e1ddc2\",\n      \"label\": \"label-722\",\n      \"height\": 370,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"b5ddc313-651a-42d0-82f6-379684ecf89f\",\n      \"label\": \"label-723\",\n      \"height\": 442,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"abfccdd2-c241-4d32-b57c-66a7191d0338\",\n      \"label\": \"label-724\",\n      \"height\": 301,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"15180438-b2a9-452c-bcc9-2941e4bf4551\",\n      \"label\": \"label-725\",\n      \"height\": 227,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"3deeff23-4266-46b0-a205-b25c86abe7f2\",\n      \"label\": \"label-726\",\n      \"height\": 272,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"7e8f9f3f-b533-4c50-a160-6299f9845ace\",\n      \"label\": \"label-727\",\n      \"height\": 42,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"44592364-80ca-43ab-b4e3-89263b261df8\",\n      \"label\": \"label-728\",\n      \"height\": 166,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"9a6b5ea9-5d13-468d-907a-a87a56638bc5\",\n      \"label\": \"label-729\",\n      \"height\": 327,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"8b3e2b0a-4a6b-4735-ac27-bcc96b65dce9\",\n      \"label\": \"label-730\",\n      \"height\": 458,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"41007579-a7df-44c3-b477-7a7d8b6dc935\",\n      \"label\": \"label-731\",\n      \"height\": 149,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"cb5fe964-c79b-4623-af51-ec3cf3d69085\",\n      \"label\": \"label-732\",\n      \"height\": 97,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"54310c57-8f15-4f29-be4a-727e5cdd9c7b\",\n      \"label\": \"label-733\",\n      \"height\": 432,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"9eccd681-4bbe-4c96-929f-e0a16831214d\",\n      \"label\": \"label-734\",\n      \"height\": 277,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"677302e8-73fc-4189-8d57-42f4ba9bdd06\",\n      \"label\": \"label-735\",\n      \"height\": 495,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"712e8f8f-b5a4-45ac-863d-3da62fe94e69\",\n      \"label\": \"label-736\",\n      \"height\": 116,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"3516d156-ec9f-4ea2-b785-9f023c6842be\",\n      \"label\": \"label-737\",\n      \"height\": 323,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"cc1de565-b028-4b58-8771-a48c8f2160d4\",\n      \"label\": \"label-738\",\n      \"height\": 529,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"f58da851-02ff-4f23-8644-c39dce22b6f6\",\n      \"label\": \"label-739\",\n      \"height\": 135,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"096c154c-790d-4e7e-886b-fbc79fe2af47\",\n      \"label\": \"label-740\",\n      \"height\": 87,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"60937419-0b94-4efb-96e4-ce013dd96a41\",\n      \"label\": \"label-741\",\n      \"height\": 485,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"01b20d69-4bf1-4faa-97a5-ae1457968364\",\n      \"label\": \"label-742\",\n      \"height\": 34,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"69643726-7105-41be-8ea7-5865a327b163\",\n      \"label\": \"label-743\",\n      \"height\": 176,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"51019609-7b0f-4025-9f47-ca0290bd763a\",\n      \"label\": \"label-744\",\n      \"height\": 55,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"93f99be6-7ca6-4344-82e5-fccfadad9d91\",\n      \"label\": \"label-745\",\n      \"height\": 336,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"ff51efd2-6354-42af-862b-35563d50791b\",\n      \"label\": \"label-746\",\n      \"height\": 159,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"27d7c005-21d3-46d6-ae7d-28753d69ee28\",\n      \"label\": \"label-747\",\n      \"height\": 80,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"fa97c216-2ba6-490a-893d-436e4a71c3f5\",\n      \"label\": \"label-748\",\n      \"height\": 399,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"c0c3499c-2d1d-4b9e-8d24-a1f4b63dfb1c\",\n      \"label\": \"label-749\",\n      \"height\": 497,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"453290d5-a73f-48fc-bbe1-3d399ca31856\",\n      \"label\": \"label-750\",\n      \"height\": 475,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"c2eac0e2-350b-440a-a038-5a3cb5d1647e\",\n      \"label\": \"label-751\",\n      \"height\": 116,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"6ff8cf29-3740-4d86-8305-9dfa5d838530\",\n      \"label\": \"label-752\",\n      \"height\": 216,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"0d303143-7103-451a-8ac8-165beee933f3\",\n      \"label\": \"label-753\",\n      \"height\": 504,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"d395e8d9-de7f-4376-a475-c56e15055712\",\n      \"label\": \"label-754\",\n      \"height\": 293,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"0b212879-b009-402a-80f0-eddc3a3195d6\",\n      \"label\": \"label-755\",\n      \"height\": 346,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"66854070-ae3d-4e3e-b737-ae268cc77e81\",\n      \"label\": \"label-756\",\n      \"height\": 425,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"3338e6bc-4016-4260-98b7-f79c87a532fd\",\n      \"label\": \"label-757\",\n      \"height\": 110,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"1efca286-7eea-45b3-a154-220602e6f1fc\",\n      \"label\": \"label-758\",\n      \"height\": 418,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"b6e6a126-d9df-40a6-8855-f5fa1e91b500\",\n      \"label\": \"label-759\",\n      \"height\": 102,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"1ba858c2-a2ec-4b30-a5e1-56f5da24e9d2\",\n      \"label\": \"label-760\",\n      \"height\": 325,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"d0bb12ab-6b8a-4fd9-8f68-8c6b5e597ebf\",\n      \"label\": \"label-761\",\n      \"height\": 419,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"c7c3f605-319e-4196-b95b-66771334c18f\",\n      \"label\": \"label-762\",\n      \"height\": 517,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"98d7d908-f16c-42e8-a7ea-69b61bea81f7\",\n      \"label\": \"label-763\",\n      \"height\": 220,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"c0e18711-820e-4a59-8194-ae66ddfac57a\",\n      \"label\": \"label-764\",\n      \"height\": 478,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"a735bb49-692f-4b0e-8828-190baafd5bef\",\n      \"label\": \"label-765\",\n      \"height\": 412,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"1de2a695-ee38-4348-8596-5feb2d2b5a97\",\n      \"label\": \"label-766\",\n      \"height\": 482,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"2ce8b788-6054-4d3f-a1f6-c56e5e3e9b9a\",\n      \"label\": \"label-767\",\n      \"height\": 207,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"bb9727d1-5c02-4540-9ad5-6e3ce393be14\",\n      \"label\": \"label-768\",\n      \"height\": 124,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"b236ca15-ac04-4d74-ad2c-7acf3934971d\",\n      \"label\": \"label-769\",\n      \"height\": 214,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"165c4046-43ba-403e-829c-8a6a6afb61f4\",\n      \"label\": \"label-770\",\n      \"height\": 374,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"a087cd27-84a9-4be9-9679-6974eb2d1142\",\n      \"label\": \"label-771\",\n      \"height\": 258,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"96e1738a-6a52-4fb8-bcd7-e9e65e47e55a\",\n      \"label\": \"label-772\",\n      \"height\": 452,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"1eb1ddee-ed00-469c-ac44-8131d204b3e8\",\n      \"label\": \"label-773\",\n      \"height\": 131,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"46be4018-7c43-42b2-a769-a9a3ae6b0208\",\n      \"label\": \"label-774\",\n      \"height\": 433,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"cd16b8d6-9af0-4afa-b428-ed7c1f2c301b\",\n      \"label\": \"label-775\",\n      \"height\": 386,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"3a6ced2e-c46a-49e5-a039-7b861ff0fd6f\",\n      \"label\": \"label-776\",\n      \"height\": 531,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"b05ee0f1-2257-4546-8d80-a059d1462edf\",\n      \"label\": \"label-777\",\n      \"height\": 365,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"34659b18-392a-46c3-ab42-bdde29c59e7d\",\n      \"label\": \"label-778\",\n      \"height\": 260,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"fac2d3bb-0b10-4afb-a681-c5de4d7a34ec\",\n      \"label\": \"label-779\",\n      \"height\": 240,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"4a25a62d-b0d1-4d98-b84e-82e50ca168ac\",\n      \"label\": \"label-780\",\n      \"height\": 148,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"87a00f28-cb2b-464e-9912-98a002c2ce00\",\n      \"label\": \"label-781\",\n      \"height\": 465,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"55501ee7-2e84-4bae-afc0-416e7cee65ec\",\n      \"label\": \"label-782\",\n      \"height\": 195,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"3ff51c82-72ae-4163-9a70-24ddc51c83c3\",\n      \"label\": \"label-783\",\n      \"height\": 301,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"3b1c3397-1e07-4e83-8528-7ae94c5c7ed4\",\n      \"label\": \"label-784\",\n      \"height\": 361,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"10589280-6e27-496c-a1bc-43f06423042d\",\n      \"label\": \"label-785\",\n      \"height\": 294,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"224f7a9e-736d-4580-84a6-8f904a0897c1\",\n      \"label\": \"label-786\",\n      \"height\": 199,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"80884e2d-840c-470a-8e61-31db4d6eff2b\",\n      \"label\": \"label-787\",\n      \"height\": 140,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"7399a22a-9a73-44d1-a7e4-81ba79c3bd6d\",\n      \"label\": \"label-788\",\n      \"height\": 96,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"d18c2ef1-6f59-411e-b4f5-ff793ec0071b\",\n      \"label\": \"label-789\",\n      \"height\": 78,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"1bb70a27-aee4-4e5c-937e-7fddaea95ebf\",\n      \"label\": \"label-790\",\n      \"height\": 33,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"46568b8a-2e34-46d2-8e21-c8aee629b9ed\",\n      \"label\": \"label-791\",\n      \"height\": 404,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"69e50f92-371d-43b2-853e-fee354d4b4c6\",\n      \"label\": \"label-792\",\n      \"height\": 289,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"3bd04f53-7c81-41d2-8ab4-f2b5c3973073\",\n      \"label\": \"label-793\",\n      \"height\": 509,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"6f985d10-1ad2-45d8-8d70-b7d3aa21ff29\",\n      \"label\": \"label-794\",\n      \"height\": 223,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"2f56eefe-1711-4bed-bf77-a0a916ce3f5c\",\n      \"label\": \"label-795\",\n      \"height\": 467,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"af3bb078-82c1-4219-a062-f96335455e00\",\n      \"label\": \"label-796\",\n      \"height\": 440,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"b9474643-14f2-498e-999e-2f390a5d360c\",\n      \"label\": \"label-797\",\n      \"height\": 211,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"abbb0f25-1221-49d7-9574-47518dbf56b7\",\n      \"label\": \"label-798\",\n      \"height\": 112,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"188eb460-0fa9-4987-a0ab-6374a1a16d9c\",\n      \"label\": \"label-799\",\n      \"height\": 238,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"6523a9e3-cb1e-4a5a-9d95-819745bed889\",\n      \"label\": \"label-800\",\n      \"height\": 358,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"f39b6aed-7236-41f3-9252-04d494ea7f6d\",\n      \"label\": \"label-801\",\n      \"height\": 243,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"ca50161c-d492-4347-bc42-d461c8185d34\",\n      \"label\": \"label-802\",\n      \"height\": 297,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"63d36b1e-adf9-437d-97f3-ed154c80d358\",\n      \"label\": \"label-803\",\n      \"height\": 155,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"9d817ca5-a832-4892-976e-6a2587ea259b\",\n      \"label\": \"label-804\",\n      \"height\": 407,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"de8027df-a755-44d0-8de0-1442afbd33d3\",\n      \"label\": \"label-805\",\n      \"height\": 313,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"109dcfa2-0c8d-408a-910e-10742ef1f3c1\",\n      \"label\": \"label-806\",\n      \"height\": 99,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"656376b7-151d-4652-97ca-7b2ea06258e0\",\n      \"label\": \"label-807\",\n      \"height\": 216,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"a5b618ae-0313-4b53-9620-69f66acaac3e\",\n      \"label\": \"label-808\",\n      \"height\": 460,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"2c1fb2df-97fb-4305-86f3-f2fa6d7c09d5\",\n      \"label\": \"label-809\",\n      \"height\": 490,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"8973fc4a-2e0e-4a7c-a82c-072f0aba6a41\",\n      \"label\": \"label-810\",\n      \"height\": 511,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"b3b5d31f-9eff-41cf-bc9b-4ba54d070f43\",\n      \"label\": \"label-811\",\n      \"height\": 515,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"a319b5c7-26c2-42ff-af86-e85233b2025f\",\n      \"label\": \"label-812\",\n      \"height\": 304,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"14cf9086-1ba1-472b-abc7-d3a294563ab6\",\n      \"label\": \"label-813\",\n      \"height\": 493,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"22a921c8-7d44-47c9-8edb-eafd31356660\",\n      \"label\": \"label-814\",\n      \"height\": 337,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"a32cce20-4dbf-4698-aa64-eda4d7b098dd\",\n      \"label\": \"label-815\",\n      \"height\": 379,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"6ac6c4a1-1e8f-47fa-a600-2d858d526c5d\",\n      \"label\": \"label-816\",\n      \"height\": 318,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"53cc1b02-ce1e-4642-8261-6307d66bdc4e\",\n      \"label\": \"label-817\",\n      \"height\": 181,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"60955673-6724-4b95-8f3a-a395a76d285b\",\n      \"label\": \"label-818\",\n      \"height\": 439,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"cd33a3b6-6541-42fa-9676-c11fa72c7f1f\",\n      \"label\": \"label-819\",\n      \"height\": 347,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"2c45a71f-c668-4ccf-8ec8-8a56e738ad4b\",\n      \"label\": \"label-820\",\n      \"height\": 58,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"ac12f85c-22f9-44b7-a6ea-67b98f056bd7\",\n      \"label\": \"label-821\",\n      \"height\": 75,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"0450ea1f-ee04-40b9-99e0-060b21710f94\",\n      \"label\": \"label-822\",\n      \"height\": 451,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"2115dcf3-d74b-4eae-9653-ae4725a0c5a6\",\n      \"label\": \"label-823\",\n      \"height\": 370,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"29cdd6b0-80a2-446b-9a98-02eea1b2aee5\",\n      \"label\": \"label-824\",\n      \"height\": 143,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"b9c58bd1-f509-4a05-a76e-068a074e4607\",\n      \"label\": \"label-825\",\n      \"height\": 104,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"45e818ac-8331-412b-93bc-9d08ffacc2b7\",\n      \"label\": \"label-826\",\n      \"height\": 362,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"e8fb429e-b0ba-4597-9003-b18d768dbe91\",\n      \"label\": \"label-827\",\n      \"height\": 173,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"d67247f4-1996-485b-91d5-4b92a20c882d\",\n      \"label\": \"label-828\",\n      \"height\": 152,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"eb6f82e3-3503-4895-8b88-ccc2d44f7b02\",\n      \"label\": \"label-829\",\n      \"height\": 183,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"3238d1bd-64a5-4bd1-9bbd-41b19b5387e2\",\n      \"label\": \"label-830\",\n      \"height\": 111,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"1247aeef-90fe-446d-915f-b381a5139b52\",\n      \"label\": \"label-831\",\n      \"height\": 147,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"1698784e-9086-4865-b7b1-da8fd0201a44\",\n      \"label\": \"label-832\",\n      \"height\": 265,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"0c207317-2629-41c8-a675-a6f4b4d37463\",\n      \"label\": \"label-833\",\n      \"height\": 183,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"932d3f9d-4c60-4dc5-b460-5ebc30a6415d\",\n      \"label\": \"label-834\",\n      \"height\": 148,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"badadd98-6c31-4fcc-a702-aca0a497c90d\",\n      \"label\": \"label-835\",\n      \"height\": 309,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"5e22800d-9e71-4f92-a7f0-22d00724398d\",\n      \"label\": \"label-836\",\n      \"height\": 520,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"7fcd9d22-7f39-4bd6-a3a5-66937d2f1d45\",\n      \"label\": \"label-837\",\n      \"height\": 466,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"32bb1840-fa17-4661-becf-d9e7a014949d\",\n      \"label\": \"label-838\",\n      \"height\": 351,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"6c217586-0795-43c7-af36-e3ef443d9368\",\n      \"label\": \"label-839\",\n      \"height\": 104,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"42e27aa9-e75e-49fb-ad54-36565ed006e6\",\n      \"label\": \"label-840\",\n      \"height\": 58,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"981b4581-4830-478c-ab8a-5a0fa6277449\",\n      \"label\": \"label-841\",\n      \"height\": 60,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"3feb4833-df1b-46cf-af51-35fb70a83d01\",\n      \"label\": \"label-842\",\n      \"height\": 66,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"94b5b384-5329-48d6-a0a2-4abf3f7993da\",\n      \"label\": \"label-843\",\n      \"height\": 469,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"2c375de8-81d3-46a8-bc89-ef491daa601c\",\n      \"label\": \"label-844\",\n      \"height\": 115,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"2bb9e200-4d87-456e-9d14-86340e55eb3c\",\n      \"label\": \"label-845\",\n      \"height\": 405,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"495b0ffa-bc26-423e-bdd3-70e5832383d7\",\n      \"label\": \"label-846\",\n      \"height\": 120,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"952aa972-0ccc-42da-86a8-7be171f1dd1d\",\n      \"label\": \"label-847\",\n      \"height\": 45,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"ed11bcb8-cda9-429b-85d0-f7d7be8fd6e5\",\n      \"label\": \"label-848\",\n      \"height\": 466,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"92c91a83-acfa-461c-a268-24be84bf62c6\",\n      \"label\": \"label-849\",\n      \"height\": 372,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"a0233637-ce20-4e40-9068-25b1d42ebb93\",\n      \"label\": \"label-850\",\n      \"height\": 487,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"355a6fac-90bc-4ada-abd1-d093f92b8e1e\",\n      \"label\": \"label-851\",\n      \"height\": 176,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"ba8f189e-05ac-4a99-9e2f-1a14715a652b\",\n      \"label\": \"label-852\",\n      \"height\": 405,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"5adc31d0-932f-4252-8fd0-3323aa8a698f\",\n      \"label\": \"label-853\",\n      \"height\": 195,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"45b094f3-fc5c-4d9a-bb64-3b8974c39e4b\",\n      \"label\": \"label-854\",\n      \"height\": 209,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"83a5f9bd-5088-407a-8964-e058065bf0a9\",\n      \"label\": \"label-855\",\n      \"height\": 346,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"400fbfee-aab6-48a1-88b0-befdfd6d79c4\",\n      \"label\": \"label-856\",\n      \"height\": 371,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"78358f78-d857-44f4-83d1-016038704a6b\",\n      \"label\": \"label-857\",\n      \"height\": 176,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"c01c537d-daf0-4cb5-81f9-ce7e4543740c\",\n      \"label\": \"label-858\",\n      \"height\": 434,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"0287a234-ccfd-4ec4-9387-e1fb73c1bcd0\",\n      \"label\": \"label-859\",\n      \"height\": 139,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"c3e01396-fae6-40e3-ba3c-86d99b84ef69\",\n      \"label\": \"label-860\",\n      \"height\": 518,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"fdf50e18-a269-49a0-87af-2df513bdee1f\",\n      \"label\": \"label-861\",\n      \"height\": 437,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"2d623612-0a45-431b-a4ce-752aadcdbc48\",\n      \"label\": \"label-862\",\n      \"height\": 375,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"5f8974cd-67cb-4ece-b241-4e943e6bd2b9\",\n      \"label\": \"label-863\",\n      \"height\": 106,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"aea74ae1-1ff2-4acc-acac-e6a7eecffc42\",\n      \"label\": \"label-864\",\n      \"height\": 198,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"c34f06ff-1daf-4682-983d-9a450aed9548\",\n      \"label\": \"label-865\",\n      \"height\": 475,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"20a8756c-45dc-440b-abe5-bcb75ce7203d\",\n      \"label\": \"label-866\",\n      \"height\": 173,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"dc7d1380-e63b-4a91-80f7-bc9f64fb6880\",\n      \"label\": \"label-867\",\n      \"height\": 333,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"35e5c56f-af1d-4681-944a-b5e592841dd3\",\n      \"label\": \"label-868\",\n      \"height\": 401,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"afccec53-22ee-41a7-b1f1-a26a44bb86ce\",\n      \"label\": \"label-869\",\n      \"height\": 343,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"a39ef7cc-4cc6-4dbc-a2c9-913f0802afaf\",\n      \"label\": \"label-870\",\n      \"height\": 386,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"57ca78d3-5a9a-4f71-86a2-1560bbb146e0\",\n      \"label\": \"label-871\",\n      \"height\": 503,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"d1354701-47e4-49e6-8702-2dd17121d0ea\",\n      \"label\": \"label-872\",\n      \"height\": 70,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"22f3ae52-d92f-4b4c-b6ee-12852f7cbf47\",\n      \"label\": \"label-873\",\n      \"height\": 373,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"12fbc9b1-9ce8-4a74-9e3c-f3f13684ff66\",\n      \"label\": \"label-874\",\n      \"height\": 181,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"c83687b9-6134-41ce-a4d1-dbbcad84d7e1\",\n      \"label\": \"label-875\",\n      \"height\": 138,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"f5127b55-b7e4-4196-9cd1-4b10a4794a3f\",\n      \"label\": \"label-876\",\n      \"height\": 222,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"a44513a9-fbc6-46d0-81f7-31e9cd4caf45\",\n      \"label\": \"label-877\",\n      \"height\": 382,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"18c7b446-1479-44fb-8940-fc547dbaced0\",\n      \"label\": \"label-878\",\n      \"height\": 450,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"a4848c4c-b412-47b4-ba48-76217cc5c0a0\",\n      \"label\": \"label-879\",\n      \"height\": 480,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"661c9628-97b9-427a-8776-033574a785f3\",\n      \"label\": \"label-880\",\n      \"height\": 411,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"05b9989c-54c4-448c-b093-d3e91ff27307\",\n      \"label\": \"label-881\",\n      \"height\": 202,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"8066d97e-2620-4cd8-a565-a7652b528f45\",\n      \"label\": \"label-882\",\n      \"height\": 57,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"32601966-ee7f-4fb6-a044-0ba3a4e68d9b\",\n      \"label\": \"label-883\",\n      \"height\": 126,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"14b1241b-7f17-41b6-b6b2-99d46c7fde43\",\n      \"label\": \"label-884\",\n      \"height\": 344,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"d84d6b2c-8c47-49ec-9d01-ccd3147ab6ff\",\n      \"label\": \"label-885\",\n      \"height\": 298,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"953e3ef1-dc39-46ed-9573-e031789e7c8f\",\n      \"label\": \"label-886\",\n      \"height\": 404,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"e258d9e9-eb46-4395-8a47-53dad341c15a\",\n      \"label\": \"label-887\",\n      \"height\": 107,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"fd805b53-ead9-45a0-ad53-ba63a57a2ff6\",\n      \"label\": \"label-888\",\n      \"height\": 117,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"72d00b9b-16f4-4af5-9ed7-a7642aa68502\",\n      \"label\": \"label-889\",\n      \"height\": 334,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"60212bc7-1195-450f-bc92-34e57ee58f13\",\n      \"label\": \"label-890\",\n      \"height\": 171,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"f1e2bb4a-1663-438a-ae9e-aa7b8d445991\",\n      \"label\": \"label-891\",\n      \"height\": 363,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"b3384aea-9ff5-4222-8e0f-56fac53ebb49\",\n      \"label\": \"label-892\",\n      \"height\": 51,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"98ac4a2b-f3dd-47c3-b2ec-4d9181e442bd\",\n      \"label\": \"label-893\",\n      \"height\": 45,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"c9b3e141-3cf3-442e-a2e1-77abd46bc716\",\n      \"label\": \"label-894\",\n      \"height\": 286,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"ea43efa9-d3b0-4495-b4b5-969d57127deb\",\n      \"label\": \"label-895\",\n      \"height\": 502,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"ac04ad5b-6012-4ddb-93d7-7989169a8e74\",\n      \"label\": \"label-896\",\n      \"height\": 54,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"9611eeec-a98c-48f3-bf30-58d06655d853\",\n      \"label\": \"label-897\",\n      \"height\": 434,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"4541dc78-5d0a-413c-8cfb-4e6341f6510f\",\n      \"label\": \"label-898\",\n      \"height\": 182,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"503083a0-c57f-4004-8df7-43a4cff4b02c\",\n      \"label\": \"label-899\",\n      \"height\": 283,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"d3cae837-d2f6-4e18-a725-d3da53ce01b6\",\n      \"label\": \"label-900\",\n      \"height\": 256,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"0903e4be-acd1-4b28-b3b7-889d64849bb5\",\n      \"label\": \"label-901\",\n      \"height\": 70,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"452581e9-fb13-4ebe-91c5-74d17d3cfdfc\",\n      \"label\": \"label-902\",\n      \"height\": 202,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"90287505-ffdf-4cfc-8eb3-b5e234fb9edb\",\n      \"label\": \"label-903\",\n      \"height\": 72,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"16c84e83-0572-49eb-a4f9-1466a198e5c2\",\n      \"label\": \"label-904\",\n      \"height\": 77,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"28a0c023-b861-45c2-8696-53b92fbcd682\",\n      \"label\": \"label-905\",\n      \"height\": 435,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"d06378e6-ccec-4546-baf2-c643c277c757\",\n      \"label\": \"label-906\",\n      \"height\": 344,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"4469a878-c061-441f-9de2-231f32bc6c91\",\n      \"label\": \"label-907\",\n      \"height\": 175,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"efedb3a8-0bee-452e-abdc-ea741f2121ad\",\n      \"label\": \"label-908\",\n      \"height\": 244,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"f395999f-6231-4744-bf1f-230abc2b985a\",\n      \"label\": \"label-909\",\n      \"height\": 508,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"282e39fd-3a30-4bd9-a2f4-4a1fa6ac73df\",\n      \"label\": \"label-910\",\n      \"height\": 138,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"b78f4504-babf-4927-8401-71bce8404eeb\",\n      \"label\": \"label-911\",\n      \"height\": 527,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"4f17c6ae-c5a0-49b2-841d-efa19ddd775b\",\n      \"label\": \"label-912\",\n      \"height\": 159,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"5382289b-efd1-4721-b40d-9d766c8cdb57\",\n      \"label\": \"label-913\",\n      \"height\": 92,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"fe485769-a7ea-435b-a1c8-bade2b462fa7\",\n      \"label\": \"label-914\",\n      \"height\": 150,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"ed4c944c-a2f9-4115-b46b-a6ba9e4a3eb1\",\n      \"label\": \"label-915\",\n      \"height\": 424,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"ad34ebe9-1733-43bd-adac-56d87bceaf29\",\n      \"label\": \"label-916\",\n      \"height\": 189,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"84922dd5-60c8-402e-bc28-88f9729cb86e\",\n      \"label\": \"label-917\",\n      \"height\": 246,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"4d229645-d57b-4aa8-8860-f7594dfac006\",\n      \"label\": \"label-918\",\n      \"height\": 145,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"94303684-35a9-4dc7-bc4c-16eba4eae1d8\",\n      \"label\": \"label-919\",\n      \"height\": 60,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"de847a92-6f0b-4a7f-97d7-5bf2f07fd324\",\n      \"label\": \"label-920\",\n      \"height\": 171,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"b1e3a90b-fe0a-4dae-a7b0-347706058814\",\n      \"label\": \"label-921\",\n      \"height\": 515,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"863b4be7-2b11-4d51-a3a6-88ea0b2f1891\",\n      \"label\": \"label-922\",\n      \"height\": 89,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"68adc516-c94b-4538-a24c-b54e23e3549a\",\n      \"label\": \"label-923\",\n      \"height\": 52,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"4eb5e1b3-cd7f-4a5e-b651-500562acf43e\",\n      \"label\": \"label-924\",\n      \"height\": 38,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"c4840065-94b4-4a55-b1e0-ca951d0706da\",\n      \"label\": \"label-925\",\n      \"height\": 95,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"f721074e-4f1d-40fa-8db8-37025489ba8d\",\n      \"label\": \"label-926\",\n      \"height\": 454,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"2aed5c77-4174-4bbb-bd27-0351c071cea7\",\n      \"label\": \"label-927\",\n      \"height\": 464,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"9dd09c9e-30de-44df-885d-f2ecc625ffdd\",\n      \"label\": \"label-928\",\n      \"height\": 451,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"149a8dfd-e2cf-4776-958a-fee87f2a2070\",\n      \"label\": \"label-929\",\n      \"height\": 525,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"b6a37303-f58a-41d9-b9b9-04b6b9ff2c46\",\n      \"label\": \"label-930\",\n      \"height\": 192,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"4b2d8d57-f78a-4594-9eba-3b182d60a9e8\",\n      \"label\": \"label-931\",\n      \"height\": 384,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"5d1908f4-80df-4035-b3ab-4cce8ce937bd\",\n      \"label\": \"label-932\",\n      \"height\": 467,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"c0534e37-7534-4347-a1dd-b90dd320b54f\",\n      \"label\": \"label-933\",\n      \"height\": 199,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"a8d11de2-20cc-40b2-b49c-ad91305119a5\",\n      \"label\": \"label-934\",\n      \"height\": 312,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"4c776760-6ae8-4857-b27c-7cc48d0471c6\",\n      \"label\": \"label-935\",\n      \"height\": 152,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"ab933151-8e35-4af8-a967-ce139f8d4c7e\",\n      \"label\": \"label-936\",\n      \"height\": 401,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"0cbb9f99-734a-4fed-9ed0-c7b19eccc4d8\",\n      \"label\": \"label-937\",\n      \"height\": 301,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"f424acb5-1a56-47af-8d03-008e77993f21\",\n      \"label\": \"label-938\",\n      \"height\": 500,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"2a2a098e-7de9-4cca-8413-e0fb8506cba6\",\n      \"label\": \"label-939\",\n      \"height\": 443,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"a49073be-f209-409a-ae9d-eeb7c65df342\",\n      \"label\": \"label-940\",\n      \"height\": 79,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"7a970635-c0c8-4e39-9701-0a4ce92b1d6d\",\n      \"label\": \"label-941\",\n      \"height\": 197,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"1d914401-6c2d-4417-a0c0-72d35f2ca10b\",\n      \"label\": \"label-942\",\n      \"height\": 328,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"38f271b0-4c28-469a-8653-892223e3020e\",\n      \"label\": \"label-943\",\n      \"height\": 399,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"8e76f9e1-d4cc-4446-9c42-f41b0dcb1293\",\n      \"label\": \"label-944\",\n      \"height\": 141,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"499bdf21-0fc7-4c10-a095-47646a5c7e1d\",\n      \"label\": \"label-945\",\n      \"height\": 479,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"d85788b9-b011-430d-82de-d6654067fc54\",\n      \"label\": \"label-946\",\n      \"height\": 39,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"5cdc329f-da73-456f-b886-42900b317122\",\n      \"label\": \"label-947\",\n      \"height\": 413,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"b3327fe4-a1b7-4a2a-91e4-abc384d37a02\",\n      \"label\": \"label-948\",\n      \"height\": 41,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"46416e52-ede1-439d-8e4e-cfeeaa73ea9d\",\n      \"label\": \"label-949\",\n      \"height\": 115,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"4f334304-4367-4d00-91c3-3955d5eb9e67\",\n      \"label\": \"label-950\",\n      \"height\": 119,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"6008edb4-3407-4e26-87e7-7a9322e805cd\",\n      \"label\": \"label-951\",\n      \"height\": 60,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"63065460-2cfc-401f-be2f-675c25ce0bd5\",\n      \"label\": \"label-952\",\n      \"height\": 276,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"622ba732-ce53-4610-aeac-df2bb4430a0e\",\n      \"label\": \"label-953\",\n      \"height\": 330,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"650c3a75-7a4a-4cc7-90a8-e43601167ddf\",\n      \"label\": \"label-954\",\n      \"height\": 493,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"3663b490-c876-49dd-9d23-7906e1d36f6c\",\n      \"label\": \"label-955\",\n      \"height\": 277,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"5d6e1dca-3c3f-4552-9670-560c70a227f3\",\n      \"label\": \"label-956\",\n      \"height\": 471,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"88d00d23-87a0-4f37-933a-425a8c554935\",\n      \"label\": \"label-957\",\n      \"height\": 410,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"e021cdfd-0ebf-41bd-a514-93faa5e236d8\",\n      \"label\": \"label-958\",\n      \"height\": 301,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"10746bbd-a29f-4bc4-abcf-656472d904ce\",\n      \"label\": \"label-959\",\n      \"height\": 129,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"cc2337ac-6f72-4436-9509-c4582c725519\",\n      \"label\": \"label-960\",\n      \"height\": 315,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"8eff0d25-cd8a-4706-8b10-dda93c670d06\",\n      \"label\": \"label-961\",\n      \"height\": 260,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"ad50ef28-48ac-4ada-9679-f3047565e092\",\n      \"label\": \"label-962\",\n      \"height\": 385,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"0067ce8b-1bcb-4c27-bb80-2ba7bb943fb2\",\n      \"label\": \"label-963\",\n      \"height\": 373,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"acbf5dda-b4f1-4b7e-8fde-018b2eac86b1\",\n      \"label\": \"label-964\",\n      \"height\": 300,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"c6bdca43-b868-41e8-b595-025200335df2\",\n      \"label\": \"label-965\",\n      \"height\": 313,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"985311eb-f914-4f85-b4c1-baf3454acfd6\",\n      \"label\": \"label-966\",\n      \"height\": 256,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"46073f87-3be6-4d4c-8aa0-f99fd29f1515\",\n      \"label\": \"label-967\",\n      \"height\": 302,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"90a89bf5-4cdf-4cad-8c5a-918593791400\",\n      \"label\": \"label-968\",\n      \"height\": 398,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"8e873848-b7ac-4e70-8a89-f922215a7b82\",\n      \"label\": \"label-969\",\n      \"height\": 448,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"e1a65545-098b-4d11-9301-71ef8108a7b4\",\n      \"label\": \"label-970\",\n      \"height\": 184,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"fbe3a27f-94f9-48fc-a97f-2a9d03f27ec9\",\n      \"label\": \"label-971\",\n      \"height\": 439,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"7151f12c-d0d1-4fd2-9181-a1a55a7af933\",\n      \"label\": \"label-972\",\n      \"height\": 170,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"67502a52-377f-4742-967a-cf32cd7bfd33\",\n      \"label\": \"label-973\",\n      \"height\": 272,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"9beea111-b684-4082-bce9-4e6d4c2c3c4c\",\n      \"label\": \"label-974\",\n      \"height\": 97,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"af8b0af9-30fc-485b-a27e-b0c91c7cf7c8\",\n      \"label\": \"label-975\",\n      \"height\": 362,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"5a2be2b6-594b-413b-b126-5c1fecf098ee\",\n      \"label\": \"label-976\",\n      \"height\": 169,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"3058470d-fbc8-4b7e-a31a-81c653dd43f4\",\n      \"label\": \"label-977\",\n      \"height\": 361,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"f8714106-fb58-41a8-96a0-c9837a4ff6a8\",\n      \"label\": \"label-978\",\n      \"height\": 316,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"2d881528-de1e-4158-bd46-17500e155073\",\n      \"label\": \"label-979\",\n      \"height\": 306,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"b6522ef1-2b51-4c06-a3bc-088b3042b813\",\n      \"label\": \"label-980\",\n      \"height\": 221,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"c9fa6218-303b-4330-aa36-8f801cdbc9b4\",\n      \"label\": \"label-981\",\n      \"height\": 120,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"f22fd51a-4e62-4f49-b322-fb4e402d637c\",\n      \"label\": \"label-982\",\n      \"height\": 496,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"a7bc453c-d130-49a2-92d9-6132334d5c05\",\n      \"label\": \"label-983\",\n      \"height\": 318,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"231b456c-167b-41db-a2a2-d630bcf5fe46\",\n      \"label\": \"label-984\",\n      \"height\": 122,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"d6eea3bd-fa4e-4f41-b143-415afe380cfc\",\n      \"label\": \"label-985\",\n      \"height\": 338,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"11f0d378-5871-4d8d-9585-9be8e04ab98b\",\n      \"label\": \"label-986\",\n      \"height\": 358,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"2f8535bb-2031-45d6-b48d-edadad09e76f\",\n      \"label\": \"label-987\",\n      \"height\": 313,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"4ec1d70b-9e9d-438a-812a-ee8e650662c2\",\n      \"label\": \"label-988\",\n      \"height\": 145,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"a4c851cf-695b-483d-9e19-99b123e02b7a\",\n      \"label\": \"label-989\",\n      \"height\": 300,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"37a6f8fe-12d4-4d36-8647-42800239d16b\",\n      \"label\": \"label-990\",\n      \"height\": 415,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"b7ac03a9-8895-48ed-99f1-9126ef96274e\",\n      \"label\": \"label-991\",\n      \"height\": 137,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"f6c954cc-eb35-494a-b611-8142e3f09a32\",\n      \"label\": \"label-992\",\n      \"height\": 354,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"e2ea82ac-e76f-4f33-b557-188045f9b136\",\n      \"label\": \"label-993\",\n      \"height\": 302,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"a6fb7537-7ab2-4729-9535-7f2259f1b8ee\",\n      \"label\": \"label-994\",\n      \"height\": 256,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"108e62bc-4415-4d7e-bbd9-6a7c0ab26fed\",\n      \"label\": \"label-995\",\n      \"height\": 515,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"c23e42f7-5701-44d3-a0e3-f8277acb5b97\",\n      \"label\": \"label-996\",\n      \"height\": 214,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"29e72c7b-5966-4af4-b01d-c6ca7477d923\",\n      \"label\": \"label-997\",\n      \"height\": 403,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"6b4cf1fd-61ee-4e92-9813-81d6b7e6a699\",\n      \"label\": \"label-998\",\n      \"height\": 407,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"43d351d8-2231-4632-b84c-6338794fe2d5\",\n      \"label\": \"label-999\",\n      \"height\": 521,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"6a04e73d-4429-43c2-8c63-a51bfced6502\",\n      \"label\": \"label-1000\",\n      \"height\": 278,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"3738e478-5321-4e66-ad3a-eed9a9ad3d3d\",\n      \"label\": \"label-1001\",\n      \"height\": 133,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"f11ad021-6d7b-478b-b06e-1f95ab1af33b\",\n      \"label\": \"label-1002\",\n      \"height\": 448,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"0830c021-dfb0-452a-b54c-7405ff75f2c6\",\n      \"label\": \"label-1003\",\n      \"height\": 34,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"74fe77f1-d565-4e4f-8573-0e738d85cf63\",\n      \"label\": \"label-1004\",\n      \"height\": 111,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"621bf4dc-7be9-4be0-8f07-8dd405f90175\",\n      \"label\": \"label-1005\",\n      \"height\": 41,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"43d5a408-a73f-416e-826b-b7fb86236ecb\",\n      \"label\": \"label-1006\",\n      \"height\": 362,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"89596576-962d-4247-8d5b-955828e775cf\",\n      \"label\": \"label-1007\",\n      \"height\": 180,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"4aa69ad1-3bbf-4b39-9e64-66e3a86c52a2\",\n      \"label\": \"label-1008\",\n      \"height\": 151,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"d0073c77-f36c-40bf-9557-56226c418b7b\",\n      \"label\": \"label-1009\",\n      \"height\": 276,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"f9636599-196c-4c19-9c86-e3a6c3c87ac6\",\n      \"label\": \"label-1010\",\n      \"height\": 191,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"0c8a380d-4f43-41e0-bd98-8a6bec69cc2f\",\n      \"label\": \"label-1011\",\n      \"height\": 253,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"2d26a50a-c170-42ee-a22c-9af6e96dfada\",\n      \"label\": \"label-1012\",\n      \"height\": 53,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"1229c1c3-48ce-4933-876e-56c6e1cbf2ea\",\n      \"label\": \"label-1013\",\n      \"height\": 128,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"a6d65976-fee9-46a0-8f3a-d6ca7891cae9\",\n      \"label\": \"label-1014\",\n      \"height\": 451,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"ceb39138-76b3-4b5e-9af7-7f4a4194e8e1\",\n      \"label\": \"label-1015\",\n      \"height\": 381,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"9bf4b0ce-c4e9-41eb-8579-433924be10bd\",\n      \"label\": \"label-1016\",\n      \"height\": 477,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"37ef2cf0-5a2e-4b8f-9a82-962e2cea7eda\",\n      \"label\": \"label-1017\",\n      \"height\": 149,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"9f55b7bb-5bfd-4881-9a6c-020e2b77af69\",\n      \"label\": \"label-1018\",\n      \"height\": 247,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"886fe658-8752-4595-a2aa-c487aa7bc6d3\",\n      \"label\": \"label-1019\",\n      \"height\": 473,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"4b62724c-dd38-419f-b8d5-d6935ba3eb0c\",\n      \"label\": \"label-1020\",\n      \"height\": 204,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"466496f0-74fc-45a6-9935-3b85ae2c9a7c\",\n      \"label\": \"label-1021\",\n      \"height\": 459,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"82ea5ea6-969c-445e-b28c-a12881846f34\",\n      \"label\": \"label-1022\",\n      \"height\": 417,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"5d7aa0f1-6d0b-483f-b0fa-2b11e3c0022c\",\n      \"label\": \"label-1023\",\n      \"height\": 154,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"67971a28-d774-42fc-9966-2ecefcf519bc\",\n      \"label\": \"label-1024\",\n      \"height\": 324,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"ef1f8a5f-fe92-4b3a-a835-5bde3fed7306\",\n      \"label\": \"label-1025\",\n      \"height\": 350,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"7355d7a0-ac9d-49da-837d-411182fec6f5\",\n      \"label\": \"label-1026\",\n      \"height\": 507,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"1f98057c-b25c-4c55-95f1-4e9bade0fd06\",\n      \"label\": \"label-1027\",\n      \"height\": 205,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"793390f5-854a-487d-8bfc-9e5b8c2149b3\",\n      \"label\": \"label-1028\",\n      \"height\": 489,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"c47ef93c-e7e9-41ac-bfd0-6cca9d859750\",\n      \"label\": \"label-1029\",\n      \"height\": 280,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"b3220a06-ff52-4b21-b922-66138f4e1560\",\n      \"label\": \"label-1030\",\n      \"height\": 440,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"d29c16f9-79d1-458a-b1c9-ccfb0d40e39a\",\n      \"label\": \"label-1031\",\n      \"height\": 35,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"3e4b0466-f6d1-4a5f-968a-6c9488552078\",\n      \"label\": \"label-1032\",\n      \"height\": 454,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"4ae87d73-d264-4f26-9444-1cab2b671e61\",\n      \"label\": \"label-1033\",\n      \"height\": 97,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"a337c943-a641-4904-9c97-7173ab0e7ded\",\n      \"label\": \"label-1034\",\n      \"height\": 232,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"c14ababb-6b69-493a-81a9-14e01cf11afe\",\n      \"label\": \"label-1035\",\n      \"height\": 55,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"70f34352-ce8f-4278-9d40-cb025da212bc\",\n      \"label\": \"label-1036\",\n      \"height\": 426,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"5ead310b-8d69-47c1-a7d0-bc2865bf8b7e\",\n      \"label\": \"label-1037\",\n      \"height\": 525,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"e4e6e1d6-dc92-4fe7-a4c1-8371e1d88021\",\n      \"label\": \"label-1038\",\n      \"height\": 164,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"75750d16-1f2b-4405-abf0-8e579833190b\",\n      \"label\": \"label-1039\",\n      \"height\": 456,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"1a4f6f9f-3d53-4ef2-8b7c-8ded8818bb46\",\n      \"label\": \"label-1040\",\n      \"height\": 393,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"555f894d-e641-41a2-b765-bd8dc67ebd29\",\n      \"label\": \"label-1041\",\n      \"height\": 38,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"e9aba871-3593-4be9-aaf5-e28a081678f2\",\n      \"label\": \"label-1042\",\n      \"height\": 352,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"39c17a7b-5e93-4b87-854a-266b3a5553d3\",\n      \"label\": \"label-1043\",\n      \"height\": 461,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"631dfd12-8d0e-4013-8f69-faf9051fac09\",\n      \"label\": \"label-1044\",\n      \"height\": 342,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"51196c10-ee19-4776-b59c-2c8b381d71f8\",\n      \"label\": \"label-1045\",\n      \"height\": 171,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"84aa3757-1c45-4865-8ad0-1436a7372d91\",\n      \"label\": \"label-1046\",\n      \"height\": 237,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"1b5d718d-7834-42fd-b54c-a159e5d7006a\",\n      \"label\": \"label-1047\",\n      \"height\": 185,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"8643c0e3-572b-4235-98d1-5ef4da0d373a\",\n      \"label\": \"label-1048\",\n      \"height\": 368,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"c381e6af-5fa4-45fb-a341-22db00badc4f\",\n      \"label\": \"label-1049\",\n      \"height\": 176,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"c64f2d4d-4021-4c49-b7f9-115c98ba7f98\",\n      \"label\": \"label-1050\",\n      \"height\": 461,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"b5d3877c-711c-4642-ac80-cd37154a61a3\",\n      \"label\": \"label-1051\",\n      \"height\": 476,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"b59be954-8ba8-4cf0-bea3-1f4a59b1bd20\",\n      \"label\": \"label-1052\",\n      \"height\": 201,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"0b7b4971-526a-4013-936f-3cf0e5a09203\",\n      \"label\": \"label-1053\",\n      \"height\": 366,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"5a3c6ca5-5fc9-4c05-a2f2-3e3f338913c6\",\n      \"label\": \"label-1054\",\n      \"height\": 142,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"68f45db5-1abc-44db-b79d-c3e0661cb105\",\n      \"label\": \"label-1055\",\n      \"height\": 60,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"77e30b8e-6a10-49ef-9516-be1279c1a8ae\",\n      \"label\": \"label-1056\",\n      \"height\": 92,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"1e8e90c9-9ec2-40de-ba7b-099063caf7cf\",\n      \"label\": \"label-1057\",\n      \"height\": 517,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"5d09a142-a0bc-400f-879d-24fd06cb668c\",\n      \"label\": \"label-1058\",\n      \"height\": 267,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"996c244a-8bf5-4216-a5a9-b1b5bea4ec5f\",\n      \"label\": \"label-1059\",\n      \"height\": 282,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"ebe931ea-08d6-4347-b90d-e0c00c229f00\",\n      \"label\": \"label-1060\",\n      \"height\": 287,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"4303641a-a48a-4df7-9aa6-2ad9df5e387d\",\n      \"label\": \"label-1061\",\n      \"height\": 131,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"36f4cf66-89b2-4c41-ab5d-a2553d323dd7\",\n      \"label\": \"label-1062\",\n      \"height\": 372,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"5efc7404-a1ac-4edd-a976-fc130f79ec61\",\n      \"label\": \"label-1063\",\n      \"height\": 184,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"cdec96e8-386b-483a-87de-9d554bb0df8f\",\n      \"label\": \"label-1064\",\n      \"height\": 259,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"3b54b431-34b9-4c8a-9ad6-8b34f898a40a\",\n      \"label\": \"label-1065\",\n      \"height\": 339,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"c3902685-1d0a-4e4a-9ff4-a04d08c2b0bb\",\n      \"label\": \"label-1066\",\n      \"height\": 414,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"65405444-31c2-4ec3-8f98-991de87089b7\",\n      \"label\": \"label-1067\",\n      \"height\": 118,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"b6197780-8947-4b4b-afdd-833c5538efc3\",\n      \"label\": \"label-1068\",\n      \"height\": 132,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"c3c2c3b7-beee-4fc0-8b8f-70888fe6cce5\",\n      \"label\": \"label-1069\",\n      \"height\": 395,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"9a68abc1-01b1-4c72-ad2c-23ec9edd30c0\",\n      \"label\": \"label-1070\",\n      \"height\": 317,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"5f9372eb-7670-4fe4-babb-dc6489e15b3a\",\n      \"label\": \"label-1071\",\n      \"height\": 473,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"45959664-e163-4d6f-8b8e-cab1da070a21\",\n      \"label\": \"label-1072\",\n      \"height\": 104,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"321b6c96-7168-4a25-8a3d-c6c74728ee51\",\n      \"label\": \"label-1073\",\n      \"height\": 91,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"2d72fffb-c3d1-4af9-92c1-30b1994cdcbf\",\n      \"label\": \"label-1074\",\n      \"height\": 462,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"8e1e1541-75b6-4512-b1bd-5741b9aed540\",\n      \"label\": \"label-1075\",\n      \"height\": 201,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"59a93588-1348-4f95-98f4-ef037288677b\",\n      \"label\": \"label-1076\",\n      \"height\": 282,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"da461cd4-0c85-40a5-a4c1-23d80e32840b\",\n      \"label\": \"label-1077\",\n      \"height\": 118,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"0f71bec1-fa1f-4f9a-b095-0f5d74605d93\",\n      \"label\": \"label-1078\",\n      \"height\": 345,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"07679638-076e-4540-bc14-f03cc6f18cb9\",\n      \"label\": \"label-1079\",\n      \"height\": 237,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"07f5644f-4cf0-477e-8c39-b87459a16690\",\n      \"label\": \"label-1080\",\n      \"height\": 128,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"a5ef7845-2446-4c0f-b884-2811c7723c4d\",\n      \"label\": \"label-1081\",\n      \"height\": 147,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"430ed410-8ccf-4de3-a864-578a32a57e12\",\n      \"label\": \"label-1082\",\n      \"height\": 499,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"6b2e3d6b-4523-454b-94a3-b1fa613aded6\",\n      \"label\": \"label-1083\",\n      \"height\": 97,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"c2447ccd-d3cd-43d4-a2cb-961771646b43\",\n      \"label\": \"label-1084\",\n      \"height\": 419,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"f372e5e4-edec-4446-9378-57216e4e1d99\",\n      \"label\": \"label-1085\",\n      \"height\": 82,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"d2fa9897-36cb-4449-8291-461d23a337d3\",\n      \"label\": \"label-1086\",\n      \"height\": 397,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"b4a2d3fb-242e-4e4a-bf6b-f21e949106ec\",\n      \"label\": \"label-1087\",\n      \"height\": 213,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"7e503e53-a001-4e32-9dae-900d7ffb4622\",\n      \"label\": \"label-1088\",\n      \"height\": 386,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"75d42545-82fb-4950-b150-6340682c49d3\",\n      \"label\": \"label-1089\",\n      \"height\": 295,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"3ff1716e-8986-4a6f-92e1-a96e5a90a089\",\n      \"label\": \"label-1090\",\n      \"height\": 216,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"792b93a2-f3c6-489b-9378-d6173472d45f\",\n      \"label\": \"label-1091\",\n      \"height\": 189,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"48491af2-1999-4bf9-8283-e1d5f52f3c74\",\n      \"label\": \"label-1092\",\n      \"height\": 296,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"154cdd2d-6bdb-4fad-8820-d129bc748c4a\",\n      \"label\": \"label-1093\",\n      \"height\": 509,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"99890611-11b4-4093-ab08-994530d6a0b0\",\n      \"label\": \"label-1094\",\n      \"height\": 142,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"d045af49-7271-497c-8761-82f436e8d3b3\",\n      \"label\": \"label-1095\",\n      \"height\": 382,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"5efe9556-92d0-4df7-8eb0-3a0a37759038\",\n      \"label\": \"label-1096\",\n      \"height\": 180,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"0edf94fa-cd5f-41cc-a176-8650c8f06718\",\n      \"label\": \"label-1097\",\n      \"height\": 53,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"8b454954-6172-494b-98f9-c742ef608da3\",\n      \"label\": \"label-1098\",\n      \"height\": 261,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"658a891b-bc64-43cf-b7c5-832b796be545\",\n      \"label\": \"label-1099\",\n      \"height\": 113,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"974fe3b5-6eaf-406a-8b10-4b388b18f581\",\n      \"label\": \"label-1100\",\n      \"height\": 79,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"8f466149-46f9-436e-b966-f0c97660f5ea\",\n      \"label\": \"label-1101\",\n      \"height\": 399,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"8b40566b-d9c4-4332-a690-13cedc749cf2\",\n      \"label\": \"label-1102\",\n      \"height\": 229,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"dfbb3814-4db8-4771-bb85-d037c33dd2a9\",\n      \"label\": \"label-1103\",\n      \"height\": 430,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"e347f5b7-e0ae-4c55-bcf5-4f38991d6316\",\n      \"label\": \"label-1104\",\n      \"height\": 405,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"7550defe-54b5-4318-907d-5925c4adabb7\",\n      \"label\": \"label-1105\",\n      \"height\": 101,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"5fc5d6ba-9607-44ae-9472-986ef98f3e50\",\n      \"label\": \"label-1106\",\n      \"height\": 311,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"828b3984-6639-452d-9a20-8cc91572c171\",\n      \"label\": \"label-1107\",\n      \"height\": 278,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"14ff1824-de4d-4cac-828e-7d443f2c93ca\",\n      \"label\": \"label-1108\",\n      \"height\": 104,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"f95204ce-eb1a-4d26-8256-c19f6967465a\",\n      \"label\": \"label-1109\",\n      \"height\": 530,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"ec2bb135-db62-4ed4-8cb3-2e264ef210e8\",\n      \"label\": \"label-1110\",\n      \"height\": 526,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"56fa6034-f6de-4ca2-be91-73686029f350\",\n      \"label\": \"label-1111\",\n      \"height\": 470,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"a3dd08a4-983d-4ecc-a9d7-8f4b156d6579\",\n      \"label\": \"label-1112\",\n      \"height\": 253,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"4583619a-bd35-483d-b5a9-943bcc3ef670\",\n      \"label\": \"label-1113\",\n      \"height\": 212,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"50b89e39-92fe-448f-83f5-3726aaea8f7e\",\n      \"label\": \"label-1114\",\n      \"height\": 371,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"2fd3a9c0-03be-4f36-886f-0c1deb03b140\",\n      \"label\": \"label-1115\",\n      \"height\": 43,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"a2223e39-ccd2-4a9e-bc45-23d7c33870f8\",\n      \"label\": \"label-1116\",\n      \"height\": 49,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"ea54c936-8c72-49e4-a14b-7ad96970d639\",\n      \"label\": \"label-1117\",\n      \"height\": 375,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"90d3d5b3-1e59-46cc-a0ee-e19c442dc833\",\n      \"label\": \"label-1118\",\n      \"height\": 509,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"271ec5a8-78bf-48bd-90d0-775416194a83\",\n      \"label\": \"label-1119\",\n      \"height\": 368,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"0e92a0ff-045b-4809-a6fb-ac9be8d60306\",\n      \"label\": \"label-1120\",\n      \"height\": 360,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"c23e21a2-68a9-424e-8dd7-1fd032e62f59\",\n      \"label\": \"label-1121\",\n      \"height\": 486,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"339dc28e-f3e6-4068-a3e2-bc1a04596cf9\",\n      \"label\": \"label-1122\",\n      \"height\": 454,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"da3f8256-3154-4ac4-85d6-36a46c4ab108\",\n      \"label\": \"label-1123\",\n      \"height\": 128,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"c7cab839-bfbf-4eee-9432-aa36f3e5f546\",\n      \"label\": \"label-1124\",\n      \"height\": 263,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"1ad5d500-02fa-4f01-b667-2860cdf7672c\",\n      \"label\": \"label-1125\",\n      \"height\": 495,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"fc559bc9-b7f7-4735-a4e5-3d5b1da52186\",\n      \"label\": \"label-1126\",\n      \"height\": 344,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"ad14d18f-85a3-4dcc-bab5-e8640678876b\",\n      \"label\": \"label-1127\",\n      \"height\": 212,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"980fff58-7470-4911-b732-b4ae3feabd28\",\n      \"label\": \"label-1128\",\n      \"height\": 121,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"e5981f58-213b-4a7d-9f18-9ea30ded8d67\",\n      \"label\": \"label-1129\",\n      \"height\": 185,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"9470436e-4939-4181-a035-2d748ca1f117\",\n      \"label\": \"label-1130\",\n      \"height\": 390,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"c4fc893c-9364-4004-8a98-06705ea784d2\",\n      \"label\": \"label-1131\",\n      \"height\": 42,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"c23f67f3-0dfd-479c-bc04-d63ae9898026\",\n      \"label\": \"label-1132\",\n      \"height\": 119,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"3bd1b79a-bbb8-4218-bc98-691588b88a00\",\n      \"label\": \"label-1133\",\n      \"height\": 348,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"959e7e97-0c84-45e2-8b2d-957239c8f21f\",\n      \"label\": \"label-1134\",\n      \"height\": 351,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"08ceac70-f3e4-44a8-a6c1-a67f39fbbe9b\",\n      \"label\": \"label-1135\",\n      \"height\": 206,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"7c4d53f6-e81d-4fd7-8db3-60428f400f45\",\n      \"label\": \"label-1136\",\n      \"height\": 225,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"9caa2e11-d9e6-4cd0-91c6-62af59244469\",\n      \"label\": \"label-1137\",\n      \"height\": 299,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"bbaa04b0-e93f-407a-8b2c-b5bfd592d0b3\",\n      \"label\": \"label-1138\",\n      \"height\": 336,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"2a2fbb02-20df-4f34-a77b-59c5407121b1\",\n      \"label\": \"label-1139\",\n      \"height\": 506,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"d62319b4-672f-44fa-98e0-f4804af735d1\",\n      \"label\": \"label-1140\",\n      \"height\": 317,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"9ee0683b-5564-490d-89ed-c5dbcc8ac371\",\n      \"label\": \"label-1141\",\n      \"height\": 445,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"9846aad8-804b-4f35-bb8a-84eb61ac4097\",\n      \"label\": \"label-1142\",\n      \"height\": 126,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"54285790-5f06-4d77-869d-7f588ccd0e9b\",\n      \"label\": \"label-1143\",\n      \"height\": 447,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"6f40f032-b76a-457b-8cd1-b9cda33dd53c\",\n      \"label\": \"label-1144\",\n      \"height\": 410,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"e40d25c9-0284-4195-bac4-ebaef6c762d6\",\n      \"label\": \"label-1145\",\n      \"height\": 178,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"648f828d-d355-4e73-8e0f-9c665e791604\",\n      \"label\": \"label-1146\",\n      \"height\": 175,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"af8b45c0-ddbc-4f15-8193-144738c51a2d\",\n      \"label\": \"label-1147\",\n      \"height\": 283,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"556684f0-d36f-4408-bb27-b7678e48ad65\",\n      \"label\": \"label-1148\",\n      \"height\": 481,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"307273c2-4eed-45c8-92f6-1f5e0aa6fdec\",\n      \"label\": \"label-1149\",\n      \"height\": 122,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"bf66a218-ef32-4d8a-9ed1-29b0977325c9\",\n      \"label\": \"label-1150\",\n      \"height\": 218,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"40c42cc2-b923-433b-93c6-496911b84a97\",\n      \"label\": \"label-1151\",\n      \"height\": 176,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"86b3889b-4cb4-41a9-830b-e99825c919eb\",\n      \"label\": \"label-1152\",\n      \"height\": 324,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"ff9c33e6-8f1d-4c50-8001-d1a3ebae2201\",\n      \"label\": \"label-1153\",\n      \"height\": 379,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"89506baf-a7c6-4db2-9845-5fe2ace8dca4\",\n      \"label\": \"label-1154\",\n      \"height\": 342,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"648f47ae-ff8f-47f8-8d67-e74881bb6625\",\n      \"label\": \"label-1155\",\n      \"height\": 80,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"3ddae6fa-62a7-4a0f-9264-e64a87c80a9f\",\n      \"label\": \"label-1156\",\n      \"height\": 482,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"96be4c0a-cd54-40f7-ab85-0977253ac211\",\n      \"label\": \"label-1157\",\n      \"height\": 240,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"44fd8966-3751-4d18-9c4c-42952d1dca80\",\n      \"label\": \"label-1158\",\n      \"height\": 420,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"e82f8837-cd68-4502-8850-21a52de55d5a\",\n      \"label\": \"label-1159\",\n      \"height\": 243,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"0c2198dc-14fb-4cc3-a67e-610995e56f03\",\n      \"label\": \"label-1160\",\n      \"height\": 505,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"249b97ef-494b-45bf-86d7-084a57f52c78\",\n      \"label\": \"label-1161\",\n      \"height\": 203,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"0fb69485-d974-4bdf-8dbe-7bc66dad9639\",\n      \"label\": \"label-1162\",\n      \"height\": 265,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"8aa7131d-efd5-407b-bf5f-729adbc5a4b6\",\n      \"label\": \"label-1163\",\n      \"height\": 444,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"ff5d9fd4-e8e3-4afa-8468-2fd355e41f47\",\n      \"label\": \"label-1164\",\n      \"height\": 142,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"31d09256-869a-4a0e-a8f9-e6ad981e252c\",\n      \"label\": \"label-1165\",\n      \"height\": 387,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"3180f5ec-971b-4b70-8937-c8a671b1c1c6\",\n      \"label\": \"label-1166\",\n      \"height\": 530,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"3977d176-1add-47f8-b40c-7fa99bd458b4\",\n      \"label\": \"label-1167\",\n      \"height\": 76,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"052c9ec8-e1c1-43c9-a1c7-3465b97e159d\",\n      \"label\": \"label-1168\",\n      \"height\": 427,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"373e9f24-5260-40ce-a4a9-197bb6d29f74\",\n      \"label\": \"label-1169\",\n      \"height\": 164,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"1f7a0de8-12dc-4e23-8f83-74e340a0e9af\",\n      \"label\": \"label-1170\",\n      \"height\": 143,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"5792c97b-21ee-44d5-9518-2c5057332ee4\",\n      \"label\": \"label-1171\",\n      \"height\": 192,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"2d5869c1-3685-489b-bb33-16c809bed68c\",\n      \"label\": \"label-1172\",\n      \"height\": 84,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"6d809fa4-e6de-45c4-831e-292c47b967e1\",\n      \"label\": \"label-1173\",\n      \"height\": 424,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"05f19f21-0feb-41b9-a14c-adf00b2099ea\",\n      \"label\": \"label-1174\",\n      \"height\": 37,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"5a34692e-2af0-4413-a8ff-82a7749be0c4\",\n      \"label\": \"label-1175\",\n      \"height\": 127,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"b5f2a2a7-42aa-4775-a7cd-c9a9ac458b11\",\n      \"label\": \"label-1176\",\n      \"height\": 429,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"d5755324-d42f-432b-bbf7-d0b8de25f029\",\n      \"label\": \"label-1177\",\n      \"height\": 284,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"b08c330a-398b-4d16-b3b7-75bf924d8bed\",\n      \"label\": \"label-1178\",\n      \"height\": 280,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"77692bde-bc33-4e00-aee1-5c0881d4630a\",\n      \"label\": \"label-1179\",\n      \"height\": 138,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"dcce6ed8-4cd8-46c6-aabf-f0c75c5c84ff\",\n      \"label\": \"label-1180\",\n      \"height\": 342,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"f6d346df-2159-4f1a-a7a8-9a029c477e3c\",\n      \"label\": \"label-1181\",\n      \"height\": 101,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"0e772b53-a1c3-4a3b-a5d5-9669b379b655\",\n      \"label\": \"label-1182\",\n      \"height\": 350,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"e5d09e37-6b05-496b-8329-dffa9acf2ce3\",\n      \"label\": \"label-1183\",\n      \"height\": 245,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"14903c86-313f-4d24-8f63-c4fbaff5c477\",\n      \"label\": \"label-1184\",\n      \"height\": 454,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"79fe0b2d-f3f0-40b5-b87d-629091349f3c\",\n      \"label\": \"label-1185\",\n      \"height\": 200,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"8d31938f-7be9-407f-bd13-e0786fd32d76\",\n      \"label\": \"label-1186\",\n      \"height\": 242,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"a039977f-454a-4898-b84a-199948f4638e\",\n      \"label\": \"label-1187\",\n      \"height\": 199,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"ab8017d6-1447-4623-b01d-0186445638c1\",\n      \"label\": \"label-1188\",\n      \"height\": 45,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"0b304ef5-cf5f-4f9f-8a3e-0fe2489124d1\",\n      \"label\": \"label-1189\",\n      \"height\": 71,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"aabd75e1-b2f4-413a-8da4-461f3a275852\",\n      \"label\": \"label-1190\",\n      \"height\": 505,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"e7eceec5-fcba-46e5-9b94-561d974b356d\",\n      \"label\": \"label-1191\",\n      \"height\": 173,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"2c08d211-f0e8-435d-a8dd-92543fff29c1\",\n      \"label\": \"label-1192\",\n      \"height\": 46,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"e6cc0ec7-ec23-46fb-aa65-ab4bdde03a4a\",\n      \"label\": \"label-1193\",\n      \"height\": 198,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"90713d1f-3024-407c-b515-83276bae575d\",\n      \"label\": \"label-1194\",\n      \"height\": 305,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"06032364-28d7-4761-8d92-79d498d9356a\",\n      \"label\": \"label-1195\",\n      \"height\": 408,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"7957307f-d98b-46fd-b06d-cbed80d69e54\",\n      \"label\": \"label-1196\",\n      \"height\": 100,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"c5256dd5-56b8-4fa0-931d-6dbaf37e26c4\",\n      \"label\": \"label-1197\",\n      \"height\": 392,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"c34e6ac8-20ce-41fb-9f91-9e8f5fc9e07a\",\n      \"label\": \"label-1198\",\n      \"height\": 117,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"376dbe37-6784-403d-9a43-e3c050264ecc\",\n      \"label\": \"label-1199\",\n      \"height\": 369,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"06a4083a-39b8-432f-b668-7f5932c81281\",\n      \"label\": \"label-1200\",\n      \"height\": 222,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"7b910892-077b-4540-bfc4-3478991c2899\",\n      \"label\": \"label-1201\",\n      \"height\": 188,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"bd48cb6e-18df-4da2-ae4e-31ede5774251\",\n      \"label\": \"label-1202\",\n      \"height\": 88,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"55557128-e8ab-452c-a3f6-80edbb8b4767\",\n      \"label\": \"label-1203\",\n      \"height\": 232,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"8bf8c8a4-1dcb-47e9-b249-30e0250c0161\",\n      \"label\": \"label-1204\",\n      \"height\": 141,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"49d9cb99-adfa-40c9-b678-6acc6f982c26\",\n      \"label\": \"label-1205\",\n      \"height\": 491,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"6ba4dd3a-4bd3-4890-bf67-3efe51605faf\",\n      \"label\": \"label-1206\",\n      \"height\": 531,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"ad11613c-c2a4-480a-94a2-51b6e928b5b6\",\n      \"label\": \"label-1207\",\n      \"height\": 486,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"8ff43ccd-a4d8-48ec-b301-a17184c25ce4\",\n      \"label\": \"label-1208\",\n      \"height\": 320,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"20cc2a03-c71c-4f16-b6f4-6a3fc327dc0e\",\n      \"label\": \"label-1209\",\n      \"height\": 34,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"3a7f0d43-cbf8-4fb3-80a2-aac3abd676b8\",\n      \"label\": \"label-1210\",\n      \"height\": 111,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"84ee5c27-25e0-4206-a55c-31e70aa8b92d\",\n      \"label\": \"label-1211\",\n      \"height\": 363,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"a0157cb1-832f-4513-8178-dac4747b834a\",\n      \"label\": \"label-1212\",\n      \"height\": 181,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"c9505cef-f9c9-41db-9785-cbcb9fc886e8\",\n      \"label\": \"label-1213\",\n      \"height\": 305,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"74650e55-5f14-4b18-84e3-94f91eb09434\",\n      \"label\": \"label-1214\",\n      \"height\": 299,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"0d1fff34-2e64-43d2-bc0d-fc69a53a86b5\",\n      \"label\": \"label-1215\",\n      \"height\": 461,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"30903609-23ce-4527-8f90-8f3fc8d51eb0\",\n      \"label\": \"label-1216\",\n      \"height\": 294,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"5a8c1b36-dd5f-403a-a050-b9482304b613\",\n      \"label\": \"label-1217\",\n      \"height\": 175,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"ecfedb15-913c-494d-a134-387c9fe72c3f\",\n      \"label\": \"label-1218\",\n      \"height\": 369,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"7fcffa44-b547-4015-b0de-ff878b7a75b2\",\n      \"label\": \"label-1219\",\n      \"height\": 438,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"ec08b7e1-1187-4c2a-8a43-c229865f7bb2\",\n      \"label\": \"label-1220\",\n      \"height\": 292,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"0ac9539a-2631-4240-9ca1-cdc6b4b59fb9\",\n      \"label\": \"label-1221\",\n      \"height\": 501,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"916f22ca-a5e0-4876-845d-9895f03ef308\",\n      \"label\": \"label-1222\",\n      \"height\": 122,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"ec299984-2550-4e64-a104-86c95edce719\",\n      \"label\": \"label-1223\",\n      \"height\": 142,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"fd0d434a-144c-4a7e-8413-d22538873516\",\n      \"label\": \"label-1224\",\n      \"height\": 132,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"c93ab7ef-fde0-4c5d-9a6e-dfb9c9539e9b\",\n      \"label\": \"label-1225\",\n      \"height\": 113,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"9cfdb58e-9470-4f69-b55d-e850d84a3120\",\n      \"label\": \"label-1226\",\n      \"height\": 151,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"42184bd1-52f2-407d-af2f-5c49bb63c582\",\n      \"label\": \"label-1227\",\n      \"height\": 176,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"f8b075f1-dd3e-49f1-9334-ba5fd4e5b975\",\n      \"label\": \"label-1228\",\n      \"height\": 95,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"b83d2e8b-a085-4e40-9d5c-44b6c9bb5e91\",\n      \"label\": \"label-1229\",\n      \"height\": 178,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"3b804e52-e33a-4095-8d82-53ab6a71d2f9\",\n      \"label\": \"label-1230\",\n      \"height\": 289,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"f8f74bca-8c2b-4dba-a4ba-014f4ac4a985\",\n      \"label\": \"label-1231\",\n      \"height\": 105,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"f3795297-a805-4a1e-a04c-a006722648c4\",\n      \"label\": \"label-1232\",\n      \"height\": 150,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"feaabc7f-1246-4a28-bc77-f3987c265bb4\",\n      \"label\": \"label-1233\",\n      \"height\": 111,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"af669a0d-0810-4e7a-83d6-ea3d0868ba47\",\n      \"label\": \"label-1234\",\n      \"height\": 139,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"74bccb5d-0cc5-4c80-bed1-2593af3a2cd3\",\n      \"label\": \"label-1235\",\n      \"height\": 323,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"a66980cf-3f19-445b-a173-a58bced4c577\",\n      \"label\": \"label-1236\",\n      \"height\": 447,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"28006c09-b259-487a-af26-8764505fd4c9\",\n      \"label\": \"label-1237\",\n      \"height\": 251,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"7412f4de-6016-482d-b8bb-b615f5e10582\",\n      \"label\": \"label-1238\",\n      \"height\": 412,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"6c6e5eb1-80d1-41bc-b862-fb72af95fa13\",\n      \"label\": \"label-1239\",\n      \"height\": 393,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"af35d3ea-ffe8-4989-b00d-aa3b17eaaf01\",\n      \"label\": \"label-1240\",\n      \"height\": 375,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"57640a38-72ef-4174-83f8-881bad98953b\",\n      \"label\": \"label-1241\",\n      \"height\": 97,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"31f75e4f-e39f-41ce-a722-2b68e1b0fd75\",\n      \"label\": \"label-1242\",\n      \"height\": 451,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"ce81c26b-9ca6-4540-83e4-965ac0daf16e\",\n      \"label\": \"label-1243\",\n      \"height\": 259,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"864ee497-11ff-4531-9875-a5c105ccccc8\",\n      \"label\": \"label-1244\",\n      \"height\": 67,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"e423482a-1996-44cf-9f11-104f0dc70df3\",\n      \"label\": \"label-1245\",\n      \"height\": 421,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"6a36afd7-456c-4fae-8160-b8fafbe17bb5\",\n      \"label\": \"label-1246\",\n      \"height\": 418,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"b917ff8f-dbd1-4601-bb98-eb0183af5e77\",\n      \"label\": \"label-1247\",\n      \"height\": 171,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"fd37db05-31c2-4e20-b1df-ae69e9c5a7ec\",\n      \"label\": \"label-1248\",\n      \"height\": 296,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"2197d87a-7266-4777-abe9-39631471f4fc\",\n      \"label\": \"label-1249\",\n      \"height\": 79,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"49a91e34-4763-4576-a939-3ff85a78aaf3\",\n      \"label\": \"label-1250\",\n      \"height\": 117,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"6a25ef2b-d90f-4a4b-bedc-e636390a1a5f\",\n      \"label\": \"label-1251\",\n      \"height\": 123,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"bfcd1ef8-063f-461b-9dd1-aa9a4d48f4c4\",\n      \"label\": \"label-1252\",\n      \"height\": 281,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"831753e3-c63b-46a7-ac9e-7c88951f50b5\",\n      \"label\": \"label-1253\",\n      \"height\": 318,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"08c6c5a7-38f5-448c-8292-61ecb727c2f2\",\n      \"label\": \"label-1254\",\n      \"height\": 461,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"e29919e5-0fba-460b-b13b-3d0f9362459f\",\n      \"label\": \"label-1255\",\n      \"height\": 189,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"3144120a-e746-4f75-90f2-0d248783563e\",\n      \"label\": \"label-1256\",\n      \"height\": 204,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"b96cc47e-8ec7-4664-8cef-2f07bbacf7ef\",\n      \"label\": \"label-1257\",\n      \"height\": 475,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"779e903d-2b5e-4489-bb90-5b9456bda4fc\",\n      \"label\": \"label-1258\",\n      \"height\": 39,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"515c6fb4-de1a-47f2-bbbb-adc91ff92c9e\",\n      \"label\": \"label-1259\",\n      \"height\": 337,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"086b475b-35c2-4303-802d-259151acdcb6\",\n      \"label\": \"label-1260\",\n      \"height\": 236,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"5353307c-543c-49f0-b397-a8818529c65c\",\n      \"label\": \"label-1261\",\n      \"height\": 424,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"38aec70d-1c8a-4329-a315-96409542eb4e\",\n      \"label\": \"label-1262\",\n      \"height\": 378,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"218f80a5-6a36-45ab-9fe3-59968ef002be\",\n      \"label\": \"label-1263\",\n      \"height\": 62,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"d3205a2f-776b-4623-8747-3b0f506f437e\",\n      \"label\": \"label-1264\",\n      \"height\": 325,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"a87a93a2-e2c5-47f6-ba7a-f829bdf5e3b1\",\n      \"label\": \"label-1265\",\n      \"height\": 342,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"831ec7d3-1c9d-435b-913e-51e3b7e84470\",\n      \"label\": \"label-1266\",\n      \"height\": 300,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"301feb5e-292b-49e4-8f7c-a2f4b0fad5b1\",\n      \"label\": \"label-1267\",\n      \"height\": 374,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"74f9eaca-9877-4d7a-9fcb-656e1121b757\",\n      \"label\": \"label-1268\",\n      \"height\": 525,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"2b4e054b-00a8-4caa-823e-08228905ff8e\",\n      \"label\": \"label-1269\",\n      \"height\": 303,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"6241806e-09ae-4f84-9509-daf147732416\",\n      \"label\": \"label-1270\",\n      \"height\": 252,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"83deb24e-df0a-42c0-becb-91980c39cda0\",\n      \"label\": \"label-1271\",\n      \"height\": 249,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"345492cb-3d38-4e96-b3e9-475a5facaf4c\",\n      \"label\": \"label-1272\",\n      \"height\": 230,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"4fad8fda-b6f3-4ca7-a33d-cbc30a3f27b0\",\n      \"label\": \"label-1273\",\n      \"height\": 383,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"72760412-0426-4fce-a8ce-69cac364411d\",\n      \"label\": \"label-1274\",\n      \"height\": 287,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"15b724d9-32d1-4026-a02f-d7818f4a0fd3\",\n      \"label\": \"label-1275\",\n      \"height\": 55,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"76bd178c-d9a0-43d7-9046-abdf28b78020\",\n      \"label\": \"label-1276\",\n      \"height\": 334,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"c27fee5f-40e6-43b0-ad99-ce0e848b3122\",\n      \"label\": \"label-1277\",\n      \"height\": 415,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"710895b1-0932-42c2-a5f0-90542f658ff5\",\n      \"label\": \"label-1278\",\n      \"height\": 36,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"c982e4d4-d9cd-4375-95ad-5580f5c93eb2\",\n      \"label\": \"label-1279\",\n      \"height\": 73,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"485c7ce5-3e77-4635-a858-1dc1b3104f84\",\n      \"label\": \"label-1280\",\n      \"height\": 489,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"5e298f02-0f79-4074-92d6-f46310ac7824\",\n      \"label\": \"label-1281\",\n      \"height\": 169,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"9d4281c2-815d-41ac-a44e-4477339e9e83\",\n      \"label\": \"label-1282\",\n      \"height\": 311,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"1502920b-0576-44de-8f70-02019d61f96b\",\n      \"label\": \"label-1283\",\n      \"height\": 393,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"3e34fa64-b695-497b-98cd-ccedc4bbd0e2\",\n      \"label\": \"label-1284\",\n      \"height\": 493,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"6e9bc959-6d46-4c8d-a733-fc7157931921\",\n      \"label\": \"label-1285\",\n      \"height\": 180,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"bce5e735-1d45-4b9f-a2e8-a3279268fd4b\",\n      \"label\": \"label-1286\",\n      \"height\": 71,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"ac8eda99-f7ab-4362-ab08-84501a25a06d\",\n      \"label\": \"label-1287\",\n      \"height\": 240,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"ca90e0d3-6e82-4a7f-9d12-4f1282546454\",\n      \"label\": \"label-1288\",\n      \"height\": 309,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"5267d086-8300-49d1-99e9-52d25b2b73a2\",\n      \"label\": \"label-1289\",\n      \"height\": 305,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"abd1c319-f38f-468c-8830-e7fc197c4048\",\n      \"label\": \"label-1290\",\n      \"height\": 458,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"2e2351b8-da89-461d-a707-b383e93d2d88\",\n      \"label\": \"label-1291\",\n      \"height\": 32,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"ecaf2617-243a-4645-a022-683b678e6d66\",\n      \"label\": \"label-1292\",\n      \"height\": 203,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"9d066819-7135-468d-8c69-495425c77d75\",\n      \"label\": \"label-1293\",\n      \"height\": 135,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"615fbb53-88dc-4bd5-a873-59f12daac271\",\n      \"label\": \"label-1294\",\n      \"height\": 313,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"742033a0-c6e0-4abb-9a81-60c21b9b5fb1\",\n      \"label\": \"label-1295\",\n      \"height\": 384,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"0161aa5c-f0e3-49b2-aec7-29bff74a1eb5\",\n      \"label\": \"label-1296\",\n      \"height\": 523,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"0ecaa35e-4a18-46cf-8f41-4537007d7622\",\n      \"label\": \"label-1297\",\n      \"height\": 206,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"baa9277f-4004-437e-a493-b2f24063a637\",\n      \"label\": \"label-1298\",\n      \"height\": 149,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"cfdc3d40-e850-4759-ba6f-255e6c7b1614\",\n      \"label\": \"label-1299\",\n      \"height\": 499,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"be391beb-2af7-4d30-8579-933c704062c9\",\n      \"label\": \"label-1300\",\n      \"height\": 304,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"bf13fa07-0f30-42b0-b1bc-a14b9fb1469b\",\n      \"label\": \"label-1301\",\n      \"height\": 132,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"22bdd6ab-043a-40f2-b1d4-78a2c126ff01\",\n      \"label\": \"label-1302\",\n      \"height\": 105,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"5fad4d16-7dd7-40d0-a12e-0400c68cfd97\",\n      \"label\": \"label-1303\",\n      \"height\": 186,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"9536a454-746f-4745-838c-0c2af1f687e2\",\n      \"label\": \"label-1304\",\n      \"height\": 56,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"03f4d48e-f345-4238-a625-c5f62f7ebb9b\",\n      \"label\": \"label-1305\",\n      \"height\": 376,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"a4dce576-dae8-4176-acdd-625024025847\",\n      \"label\": \"label-1306\",\n      \"height\": 89,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"433eac95-77c2-471b-9eb9-129dfdd30fbf\",\n      \"label\": \"label-1307\",\n      \"height\": 328,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"7461f3c2-b5fd-4f39-8989-6ed77da2121b\",\n      \"label\": \"label-1308\",\n      \"height\": 347,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"a6085064-4ab9-42da-a96c-e0be917f62b0\",\n      \"label\": \"label-1309\",\n      \"height\": 437,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"eade6f52-885a-451f-87dd-9de33b959349\",\n      \"label\": \"label-1310\",\n      \"height\": 177,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"403bef5b-2db9-4ad9-91b3-474ca3eb0231\",\n      \"label\": \"label-1311\",\n      \"height\": 326,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"a7ca4e1f-360b-4186-9ed1-f1feaa4223ad\",\n      \"label\": \"label-1312\",\n      \"height\": 91,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"964a32cb-5c03-4d32-8638-ef044af5d353\",\n      \"label\": \"label-1313\",\n      \"height\": 331,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"fed83c64-3490-4740-a03b-f4524b160c8b\",\n      \"label\": \"label-1314\",\n      \"height\": 404,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"6685b3ab-cb42-4cf2-b83c-4e9b7f77f000\",\n      \"label\": \"label-1315\",\n      \"height\": 123,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"b1d79d43-fc58-4287-b674-55db690b825b\",\n      \"label\": \"label-1316\",\n      \"height\": 285,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"254b6e53-fdfd-483a-a61e-5777cc1e6a62\",\n      \"label\": \"label-1317\",\n      \"height\": 470,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"59245dd7-2867-4aba-9178-0b0e80c16917\",\n      \"label\": \"label-1318\",\n      \"height\": 359,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"75ae4108-2b0a-43e2-b03c-0ee8ed6c20d0\",\n      \"label\": \"label-1319\",\n      \"height\": 518,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"f3b5e9e5-330d-44cc-bba9-ce0d0787c56d\",\n      \"label\": \"label-1320\",\n      \"height\": 389,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"b7a787d3-340f-4040-b388-ca938b0f7a45\",\n      \"label\": \"label-1321\",\n      \"height\": 376,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"d1c03d5f-af87-418f-aa53-17ea70fecc19\",\n      \"label\": \"label-1322\",\n      \"height\": 226,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"8310291c-5c19-4c0f-9e3f-09f95a2b2b2e\",\n      \"label\": \"label-1323\",\n      \"height\": 391,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"b52cf4e1-1605-4b81-9823-94391dbe5e1a\",\n      \"label\": \"label-1324\",\n      \"height\": 119,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"eb123e70-13b5-439a-8144-67997f8a5480\",\n      \"label\": \"label-1325\",\n      \"height\": 182,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"3937dfaf-70c7-477e-b9c5-37055af674ea\",\n      \"label\": \"label-1326\",\n      \"height\": 91,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"33349ff6-3859-4cf0-b934-ca710cce210a\",\n      \"label\": \"label-1327\",\n      \"height\": 338,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"fa1e4707-98ef-473f-adcd-ba2a1dad9dcf\",\n      \"label\": \"label-1328\",\n      \"height\": 259,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"a3c5a8ae-5080-4a78-ab52-189889c94329\",\n      \"label\": \"label-1329\",\n      \"height\": 48,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"888ac959-e29f-424b-b3ed-e37145d1b9d8\",\n      \"label\": \"label-1330\",\n      \"height\": 179,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"ee20eaad-7f39-4a17-aa99-504dd436e7ec\",\n      \"label\": \"label-1331\",\n      \"height\": 160,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"cf12bfc2-9b4e-444a-82d4-74b2f218779d\",\n      \"label\": \"label-1332\",\n      \"height\": 490,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"8270c353-8311-403f-8abc-c14f86e1625f\",\n      \"label\": \"label-1333\",\n      \"height\": 341,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"12b92f5e-2e81-45a4-bb32-d4f3568de2f2\",\n      \"label\": \"label-1334\",\n      \"height\": 59,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"575be54d-7daf-4a60-abb4-5dbbf49f9cea\",\n      \"label\": \"label-1335\",\n      \"height\": 373,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"6c069683-95b3-4141-8540-18ed279b9d10\",\n      \"label\": \"label-1336\",\n      \"height\": 69,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"c0fae55c-0c3e-49b3-8187-e7aad13a310c\",\n      \"label\": \"label-1337\",\n      \"height\": 526,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"187ab9ab-6e67-4951-86d6-82308e576cd0\",\n      \"label\": \"label-1338\",\n      \"height\": 96,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"3a0e99e9-9875-4429-aaa9-e392aa181109\",\n      \"label\": \"label-1339\",\n      \"height\": 50,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"cc374f16-e603-4d34-984e-7921ed9e5679\",\n      \"label\": \"label-1340\",\n      \"height\": 156,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"bc691d1b-bd2d-483b-ac18-32ef709aca14\",\n      \"label\": \"label-1341\",\n      \"height\": 53,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"806fa459-9a80-43dc-8d54-3439ad5131f6\",\n      \"label\": \"label-1342\",\n      \"height\": 56,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"ac421ac2-7c4b-4c5c-995c-10a6614aed88\",\n      \"label\": \"label-1343\",\n      \"height\": 150,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"0eb72bb4-faa2-45be-aa72-f7a1c29608d3\",\n      \"label\": \"label-1344\",\n      \"height\": 529,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"417b8780-60a5-4d4c-8efe-863ce57de81d\",\n      \"label\": \"label-1345\",\n      \"height\": 199,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"c10d1fb9-1fc5-46b0-957e-c9397cc250cb\",\n      \"label\": \"label-1346\",\n      \"height\": 83,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"3950b0f9-e2c6-45e3-a93e-bff93b80d9a9\",\n      \"label\": \"label-1347\",\n      \"height\": 306,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"4580e085-6b34-42b3-853c-a294d6ca8ec6\",\n      \"label\": \"label-1348\",\n      \"height\": 159,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"f9a4908f-de9a-4785-b239-bbadabe6e3e6\",\n      \"label\": \"label-1349\",\n      \"height\": 289,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"309635f6-1e41-4b9e-a2fb-1447e7b11b63\",\n      \"label\": \"label-1350\",\n      \"height\": 49,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"bd3f8d1d-648d-491d-8960-0e8e6edd5640\",\n      \"label\": \"label-1351\",\n      \"height\": 303,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"87bdaefb-8846-474a-a689-c6df0172364a\",\n      \"label\": \"label-1352\",\n      \"height\": 299,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"0879f628-66ca-429d-9ec4-897e4e40addd\",\n      \"label\": \"label-1353\",\n      \"height\": 85,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"8e39db64-72f6-45d2-b4c0-95adf4dec5f8\",\n      \"label\": \"label-1354\",\n      \"height\": 200,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"e1aa1c72-dc2b-420b-97a3-199e92074454\",\n      \"label\": \"label-1355\",\n      \"height\": 307,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"507fb939-2e1a-4aa3-a4a6-c04b29020452\",\n      \"label\": \"label-1356\",\n      \"height\": 375,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"3726c679-a3e3-4eaa-b289-473f4a90a2ee\",\n      \"label\": \"label-1357\",\n      \"height\": 196,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"f382b8a7-2cec-43db-b5bd-e432a1a58555\",\n      \"label\": \"label-1358\",\n      \"height\": 292,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"dce76472-a183-4866-8309-3e2db195c4ac\",\n      \"label\": \"label-1359\",\n      \"height\": 327,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"e77ffc9c-5df4-4232-9ecf-c1d8833e5eec\",\n      \"label\": \"label-1360\",\n      \"height\": 279,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"dccda8b7-f7ee-41d6-a9d4-781b9f3e5149\",\n      \"label\": \"label-1361\",\n      \"height\": 531,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"879c440a-d544-4fde-8da5-83b74b2bdc19\",\n      \"label\": \"label-1362\",\n      \"height\": 494,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"f9b26718-2159-4eaa-a999-db64bebdffd4\",\n      \"label\": \"label-1363\",\n      \"height\": 121,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"301d9236-5836-4aa0-9fe5-461ae26f4045\",\n      \"label\": \"label-1364\",\n      \"height\": 381,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"d4974550-94a4-4dfd-a245-14a1027201f4\",\n      \"label\": \"label-1365\",\n      \"height\": 487,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"001b9b08-b834-4ed0-b877-aef7202fc686\",\n      \"label\": \"label-1366\",\n      \"height\": 294,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"fdf6ad9f-0bad-4971-b201-ac826eb3d1fa\",\n      \"label\": \"label-1367\",\n      \"height\": 333,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"b34d80bb-1289-4ead-baa0-570870a378a2\",\n      \"label\": \"label-1368\",\n      \"height\": 310,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"69eb1f27-174b-494c-8b08-afd22d9998d1\",\n      \"label\": \"label-1369\",\n      \"height\": 288,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"fc70183c-6533-4073-8ba2-844f8e6b2ae7\",\n      \"label\": \"label-1370\",\n      \"height\": 496,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"c5bf588a-6054-4914-ad96-f6025a12d6a6\",\n      \"label\": \"label-1371\",\n      \"height\": 320,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"cbf68d1c-69f3-44dd-9f25-3b3a36b3d648\",\n      \"label\": \"label-1372\",\n      \"height\": 324,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"f1c31660-e3db-466f-b97c-024efd8651ce\",\n      \"label\": \"label-1373\",\n      \"height\": 361,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"ba7fd845-7e0d-4c8e-98da-f3efe5c11473\",\n      \"label\": \"label-1374\",\n      \"height\": 228,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"45ce724d-71b1-4875-b7f4-a3770c42338d\",\n      \"label\": \"label-1375\",\n      \"height\": 521,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"f17ba6e5-4c85-4a95-a45d-306eb1bf4054\",\n      \"label\": \"label-1376\",\n      \"height\": 425,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"ed1719c4-7ba2-4748-a2c5-1f42f5fb3584\",\n      \"label\": \"label-1377\",\n      \"height\": 139,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"438c93f6-9c63-4a16-bf0b-5399c765cd66\",\n      \"label\": \"label-1378\",\n      \"height\": 115,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"7428e839-ec8a-4e99-8bf1-47a2516af9ce\",\n      \"label\": \"label-1379\",\n      \"height\": 128,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"590400a0-2617-45e4-b704-e6e769b15357\",\n      \"label\": \"label-1380\",\n      \"height\": 283,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"6615d7e1-e2fd-475f-a59e-47e829787cf0\",\n      \"label\": \"label-1381\",\n      \"height\": 255,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"b1dd7e24-d0cd-45ec-bf4d-4817ab29591b\",\n      \"label\": \"label-1382\",\n      \"height\": 178,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"f75fb477-6933-4950-a849-b3460311c720\",\n      \"label\": \"label-1383\",\n      \"height\": 282,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"301fc32f-a613-4156-949d-930c3928d03c\",\n      \"label\": \"label-1384\",\n      \"height\": 113,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"b70a382b-e5c4-447e-8355-7d6fdf2ddc77\",\n      \"label\": \"label-1385\",\n      \"height\": 355,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"59d4797d-cf7b-452e-b437-784d3b5b5497\",\n      \"label\": \"label-1386\",\n      \"height\": 456,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"93792c67-3b61-4a7f-b5b1-aae0936f16b6\",\n      \"label\": \"label-1387\",\n      \"height\": 514,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"7e5beb26-9870-4d9f-88da-cb98f3184f0a\",\n      \"label\": \"label-1388\",\n      \"height\": 155,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"f470880b-f824-43a9-9c07-ff2f4aa33bf3\",\n      \"label\": \"label-1389\",\n      \"height\": 470,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"ae219118-2801-4033-9ac4-06915e388106\",\n      \"label\": \"label-1390\",\n      \"height\": 422,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"fc8ff09b-d795-407d-91ae-566c7ada1214\",\n      \"label\": \"label-1391\",\n      \"height\": 484,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"08e158c0-8990-4e2a-9575-e1293f8c97a9\",\n      \"label\": \"label-1392\",\n      \"height\": 182,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"b5097ffb-e722-4a52-85b9-d15e35749f3e\",\n      \"label\": \"label-1393\",\n      \"height\": 254,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"03cb9e40-5eb3-40bb-b6d4-49699526a3e4\",\n      \"label\": \"label-1394\",\n      \"height\": 34,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"ee806662-ee60-4f6e-8923-5dd72e445590\",\n      \"label\": \"label-1395\",\n      \"height\": 381,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"0df1d6d4-dcd1-4598-87f3-dd80a9c7c5ad\",\n      \"label\": \"label-1396\",\n      \"height\": 130,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"f8eb720e-694a-405a-9cca-6fd64aa608bf\",\n      \"label\": \"label-1397\",\n      \"height\": 228,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"abf5e206-ae44-4dbf-abf5-ec7e5ee85f6b\",\n      \"label\": \"label-1398\",\n      \"height\": 283,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"4b58a67b-6aeb-4579-ba66-cef7a0e175fe\",\n      \"label\": \"label-1399\",\n      \"height\": 413,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"eaf0bcdb-8312-4d08-8682-d41e75f674fa\",\n      \"label\": \"label-1400\",\n      \"height\": 345,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"47ceea48-d714-4b85-958f-6e8eb1a879a8\",\n      \"label\": \"label-1401\",\n      \"height\": 481,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"9c38db73-2746-410b-9135-7a089450a79b\",\n      \"label\": \"label-1402\",\n      \"height\": 434,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"f8325616-c301-454f-b9d0-aa5b76e095f1\",\n      \"label\": \"label-1403\",\n      \"height\": 323,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"763232aa-bb1c-4f44-867f-b1665b34a3e4\",\n      \"label\": \"label-1404\",\n      \"height\": 466,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"71548d4e-0b86-415b-9187-8dc6d5d45811\",\n      \"label\": \"label-1405\",\n      \"height\": 411,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"291addb2-e5b8-4cb2-90ce-0dd27ab07da5\",\n      \"label\": \"label-1406\",\n      \"height\": 515,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"a98e1c99-039e-4769-9050-03461ffbee73\",\n      \"label\": \"label-1407\",\n      \"height\": 258,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"9cca20b9-e934-4e79-b596-7004bdd5c547\",\n      \"label\": \"label-1408\",\n      \"height\": 231,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"b928c17e-1ca5-4155-b325-c59297dd0b5a\",\n      \"label\": \"label-1409\",\n      \"height\": 255,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"335b936c-8d89-417a-9fe2-1055c177a6b6\",\n      \"label\": \"label-1410\",\n      \"height\": 167,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"0eb3d9a0-e225-474b-95a7-10c470004386\",\n      \"label\": \"label-1411\",\n      \"height\": 52,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"234f96ef-bb75-4914-b547-7ff18b89f8ce\",\n      \"label\": \"label-1412\",\n      \"height\": 211,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"2aff842a-6db2-4b79-8fbf-b0fd955fe431\",\n      \"label\": \"label-1413\",\n      \"height\": 381,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"4ebbf349-715f-4e4b-9161-fa02d51cb383\",\n      \"label\": \"label-1414\",\n      \"height\": 295,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"d7e90364-04b4-4998-ad44-12072984ffe9\",\n      \"label\": \"label-1415\",\n      \"height\": 112,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"0b61a3af-8f54-4dd2-a757-9e2d1cd5210d\",\n      \"label\": \"label-1416\",\n      \"height\": 223,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"7e6bad73-6eb8-4331-ac8b-faf77e8e911b\",\n      \"label\": \"label-1417\",\n      \"height\": 216,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"604b40ad-086e-4d85-be83-4adbf011a477\",\n      \"label\": \"label-1418\",\n      \"height\": 523,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"55c874f4-764c-47e3-8a78-2d444fc022d5\",\n      \"label\": \"label-1419\",\n      \"height\": 469,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"e5c780d5-5205-40b1-a735-ce187b4cc6ff\",\n      \"label\": \"label-1420\",\n      \"height\": 425,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"bfe85417-8f0e-4770-a80f-9b06a37eb5b3\",\n      \"label\": \"label-1421\",\n      \"height\": 396,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"6c956727-c9c9-4073-8cfa-12e3021d4213\",\n      \"label\": \"label-1422\",\n      \"height\": 258,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"01414db3-7866-448f-824b-f89cb11cf455\",\n      \"label\": \"label-1423\",\n      \"height\": 469,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"eeb5ad1b-0cdf-4d94-97ec-e0cb4a5cd82c\",\n      \"label\": \"label-1424\",\n      \"height\": 272,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"3336d633-5f61-4868-8ef1-deb389e63b68\",\n      \"label\": \"label-1425\",\n      \"height\": 150,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"044ef4f4-fd46-4ae0-b03d-2a3a87c7f242\",\n      \"label\": \"label-1426\",\n      \"height\": 66,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"c78f5106-5deb-426f-9732-8c962d3283cc\",\n      \"label\": \"label-1427\",\n      \"height\": 405,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"15f10554-9b1a-4b88-85b6-55220010c8b3\",\n      \"label\": \"label-1428\",\n      \"height\": 173,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"440e8a60-24aa-47c0-93f6-e009e5cbb2d0\",\n      \"label\": \"label-1429\",\n      \"height\": 382,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"22519fa8-f752-40b3-b362-9a58a8b34a36\",\n      \"label\": \"label-1430\",\n      \"height\": 428,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"b1131263-67e3-43da-9017-e94475290945\",\n      \"label\": \"label-1431\",\n      \"height\": 128,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"4224c545-72a0-48de-be01-47cb69807721\",\n      \"label\": \"label-1432\",\n      \"height\": 227,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"32154b21-dfd2-44d0-9396-06872a788c01\",\n      \"label\": \"label-1433\",\n      \"height\": 515,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"624fcba6-ecac-477f-8566-99a4fd5bdf74\",\n      \"label\": \"label-1434\",\n      \"height\": 184,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"1d2a166e-7d22-477d-a495-a11572afe1d2\",\n      \"label\": \"label-1435\",\n      \"height\": 316,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"60c69a88-5c2b-45cc-990d-800349f7f988\",\n      \"label\": \"label-1436\",\n      \"height\": 481,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"d4d56a9c-58f8-4735-b4b7-7712cee787eb\",\n      \"label\": \"label-1437\",\n      \"height\": 260,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"f6bed01b-202c-4ab8-8f7f-ca7771191f61\",\n      \"label\": \"label-1438\",\n      \"height\": 39,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"5ab2f5ff-72d5-44d2-afec-abf1d16b09ec\",\n      \"label\": \"label-1439\",\n      \"height\": 381,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"a6ffa12c-61aa-4cd5-a48d-c87d5aa352e8\",\n      \"label\": \"label-1440\",\n      \"height\": 316,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"44e89245-a8fc-43d5-bd06-ae6c31d1f669\",\n      \"label\": \"label-1441\",\n      \"height\": 322,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"c88acada-80c4-492c-b3fb-2727bc292d09\",\n      \"label\": \"label-1442\",\n      \"height\": 392,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"bc4870f6-6c07-4f06-9d50-e20eff21b8a1\",\n      \"label\": \"label-1443\",\n      \"height\": 281,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"d1e469e7-8a67-4ff5-bebe-eb002fcff8a5\",\n      \"label\": \"label-1444\",\n      \"height\": 474,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"8d326db9-6a9e-482f-a26e-84cba6e5db7b\",\n      \"label\": \"label-1445\",\n      \"height\": 362,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"42d1281f-36f7-4657-9e38-a9b091bede84\",\n      \"label\": \"label-1446\",\n      \"height\": 468,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"b7e391f1-90dc-44f5-87a5-8156556b6046\",\n      \"label\": \"label-1447\",\n      \"height\": 59,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"2d533cef-d207-4547-ac88-93e9023913b4\",\n      \"label\": \"label-1448\",\n      \"height\": 494,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"b21392a3-6165-4525-80f1-d46cb8102463\",\n      \"label\": \"label-1449\",\n      \"height\": 467,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"fabde165-8aab-4cd5-96d7-95f74d8675ec\",\n      \"label\": \"label-1450\",\n      \"height\": 83,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"bb1ae71f-cef4-410b-a4b1-d272f3d1ca63\",\n      \"label\": \"label-1451\",\n      \"height\": 373,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"afed425b-03f6-4a6b-aa4b-5cbb585805db\",\n      \"label\": \"label-1452\",\n      \"height\": 422,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"3f1d16b6-2426-4c96-a04a-6b1bded05285\",\n      \"label\": \"label-1453\",\n      \"height\": 511,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"6f597bbc-58e2-40f8-92e7-186269090d75\",\n      \"label\": \"label-1454\",\n      \"height\": 339,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"9bafc2d2-8817-4c33-821d-1d31ad5a9c11\",\n      \"label\": \"label-1455\",\n      \"height\": 156,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"4d2783ec-094e-49cd-beaf-85b50019bfa5\",\n      \"label\": \"label-1456\",\n      \"height\": 334,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"da5cdc48-c5d2-4c3d-af95-00e8e78408dd\",\n      \"label\": \"label-1457\",\n      \"height\": 70,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"d5fcd0e3-e466-4626-baad-ad337eda8f19\",\n      \"label\": \"label-1458\",\n      \"height\": 147,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"96f230c4-67f5-4d86-949a-98917bd17743\",\n      \"label\": \"label-1459\",\n      \"height\": 56,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"f8247d98-01e3-42ae-bbaf-cd6f62290df4\",\n      \"label\": \"label-1460\",\n      \"height\": 39,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"f4e961c6-b72f-4a2b-98d6-39358791c672\",\n      \"label\": \"label-1461\",\n      \"height\": 452,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"16101302-0c3b-4d17-9ef7-cedf90c2f032\",\n      \"label\": \"label-1462\",\n      \"height\": 162,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"d6b09720-220e-49a0-a5e8-65df994d9568\",\n      \"label\": \"label-1463\",\n      \"height\": 261,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"bfff0e34-8f2c-4a5f-9f56-afe2fc12df5f\",\n      \"label\": \"label-1464\",\n      \"height\": 300,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"3280c2c4-46ec-4550-b76c-61cc656efbd1\",\n      \"label\": \"label-1465\",\n      \"height\": 192,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"4566b445-5298-4d24-bd32-82269a6582a9\",\n      \"label\": \"label-1466\",\n      \"height\": 281,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"8177cf46-eb4d-44cf-8ebd-1f40279d7c4e\",\n      \"label\": \"label-1467\",\n      \"height\": 335,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"e14d3f96-9be4-4e9f-9339-bea5653ec73f\",\n      \"label\": \"label-1468\",\n      \"height\": 209,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"59014533-55e8-45bf-a145-2cde0b74d8c6\",\n      \"label\": \"label-1469\",\n      \"height\": 411,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"86e13796-ce97-446d-a1b1-b240259e0a64\",\n      \"label\": \"label-1470\",\n      \"height\": 35,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"4836acb3-88bb-4fb9-9c7b-a2ab2840c79a\",\n      \"label\": \"label-1471\",\n      \"height\": 177,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"2d74adfd-5e05-4474-a9f0-528f92b8e55a\",\n      \"label\": \"label-1472\",\n      \"height\": 520,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"48e12ae1-f2e4-47d3-9cf8-83ce66b9fe47\",\n      \"label\": \"label-1473\",\n      \"height\": 42,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"3ef7fd37-7018-471c-9f51-124f557f3f45\",\n      \"label\": \"label-1474\",\n      \"height\": 161,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"224ca4b5-fa20-44fb-acdd-6064bd8c7424\",\n      \"label\": \"label-1475\",\n      \"height\": 477,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"0d7dec01-0ec0-443a-b257-141930498f0e\",\n      \"label\": \"label-1476\",\n      \"height\": 151,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"eee675ed-d766-4c41-9f8f-5b7c9fff6646\",\n      \"label\": \"label-1477\",\n      \"height\": 477,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"6933e350-21b2-4b91-92e8-297ae6645d6e\",\n      \"label\": \"label-1478\",\n      \"height\": 328,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"1c364d0b-a076-46d0-a5e9-ecd13eb91cb7\",\n      \"label\": \"label-1479\",\n      \"height\": 361,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"16380166-e490-4c72-9dc9-7f47d6fa053f\",\n      \"label\": \"label-1480\",\n      \"height\": 85,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"d1a1c500-227b-4e14-9562-921a7916a6b3\",\n      \"label\": \"label-1481\",\n      \"height\": 325,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"b6040fb3-3382-4cfb-806f-c258a581a642\",\n      \"label\": \"label-1482\",\n      \"height\": 400,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"03634450-6b9c-4946-b4d9-dabb2877698f\",\n      \"label\": \"label-1483\",\n      \"height\": 128,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"ff90abad-ba8a-4669-9df2-f0df6c812cd6\",\n      \"label\": \"label-1484\",\n      \"height\": 211,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"bec743ab-a32d-474b-9752-1598c608156b\",\n      \"label\": \"label-1485\",\n      \"height\": 308,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"6edb4708-cfa0-4f6d-9e9a-cb8478da91f7\",\n      \"label\": \"label-1486\",\n      \"height\": 505,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"b6aa7309-70f5-4023-86c2-ed310495e2c1\",\n      \"label\": \"label-1487\",\n      \"height\": 324,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"f37b5b98-a22d-47be-a2c0-5b6cd3b4e1a5\",\n      \"label\": \"label-1488\",\n      \"height\": 61,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"5f373388-3cea-4278-a67a-dcbac88a2788\",\n      \"label\": \"label-1489\",\n      \"height\": 371,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"aab09181-ff68-468c-a07a-321b1f2af558\",\n      \"label\": \"label-1490\",\n      \"height\": 457,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"8297e381-cd27-4730-899b-b10727f072f6\",\n      \"label\": \"label-1491\",\n      \"height\": 74,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"c56137bc-d899-4f7a-a1a6-4a0c26f9d98f\",\n      \"label\": \"label-1492\",\n      \"height\": 354,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"c836c2f1-9400-4935-8450-32079d6c7bc4\",\n      \"label\": \"label-1493\",\n      \"height\": 508,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"a232f720-0230-4690-9e8d-5536ebd5dc98\",\n      \"label\": \"label-1494\",\n      \"height\": 168,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"ccc28ffe-f136-46f6-b86d-3281e16c8747\",\n      \"label\": \"label-1495\",\n      \"height\": 216,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"d966e4bd-fe05-4446-89d0-903fc82bed73\",\n      \"label\": \"label-1496\",\n      \"height\": 90,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"fcf1381c-4153-4b8b-aeb2-8f3f6ebc4131\",\n      \"label\": \"label-1497\",\n      \"height\": 283,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"8549186f-5384-45a7-9098-9ab118e0c898\",\n      \"label\": \"label-1498\",\n      \"height\": 296,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"be39c38d-e4ab-4108-8811-0531d1ee2020\",\n      \"label\": \"label-1499\",\n      \"height\": 305,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"1e414c9b-dc43-469b-95c4-78797296613c\",\n      \"label\": \"label-1500\",\n      \"height\": 469,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"fba9ad5b-357c-4c65-9c8f-1efe5722d845\",\n      \"label\": \"label-1501\",\n      \"height\": 327,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"c3c6c373-7a78-4d50-8a44-69678c5d85d9\",\n      \"label\": \"label-1502\",\n      \"height\": 269,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"27f97f7f-889a-46f3-8e4c-e849e674642e\",\n      \"label\": \"label-1503\",\n      \"height\": 174,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"0d5ccc35-2d70-4c4e-ac29-2bce45f9aaec\",\n      \"label\": \"label-1504\",\n      \"height\": 228,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"6c9dcf0e-c6ee-427b-8c78-b4241b558201\",\n      \"label\": \"label-1505\",\n      \"height\": 502,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"7759ef8f-d24b-4a68-b708-6278f54e0549\",\n      \"label\": \"label-1506\",\n      \"height\": 205,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"1e263542-f801-414e-91a6-995e01a51d79\",\n      \"label\": \"label-1507\",\n      \"height\": 425,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"2d418493-810a-4e65-a3df-d9e8cc4d142b\",\n      \"label\": \"label-1508\",\n      \"height\": 125,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"adf0c65e-08b6-485b-807a-f00746a50d8a\",\n      \"label\": \"label-1509\",\n      \"height\": 191,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"80e022e5-f1c2-4b18-a837-478c0dc1b97f\",\n      \"label\": \"label-1510\",\n      \"height\": 271,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"d68fc17d-f9f2-4264-961d-600a69629786\",\n      \"label\": \"label-1511\",\n      \"height\": 519,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"00489bfe-3ce1-40a6-9670-0a2564f28236\",\n      \"label\": \"label-1512\",\n      \"height\": 229,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"19784cf9-90ad-4c37-833a-21c4821dfe28\",\n      \"label\": \"label-1513\",\n      \"height\": 463,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"686bc254-6fc7-4f57-9a19-87b168e110d8\",\n      \"label\": \"label-1514\",\n      \"height\": 205,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"4236ce82-5411-4870-8ac4-751cff2c8b9b\",\n      \"label\": \"label-1515\",\n      \"height\": 325,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"533f8a06-7195-4898-a688-7d9fe255db01\",\n      \"label\": \"label-1516\",\n      \"height\": 289,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"35980d58-8e78-4096-bcdb-83186cfa0aa6\",\n      \"label\": \"label-1517\",\n      \"height\": 179,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"0169b2a2-bacd-403d-b201-10ed46803957\",\n      \"label\": \"label-1518\",\n      \"height\": 483,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"a4835347-9b84-4ebf-b9b5-727b22be2e58\",\n      \"label\": \"label-1519\",\n      \"height\": 385,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"eb722a5b-74a4-418b-9a8d-dfcddcbbd014\",\n      \"label\": \"label-1520\",\n      \"height\": 273,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"7fdae1d9-1211-4349-9e46-13a59285e019\",\n      \"label\": \"label-1521\",\n      \"height\": 486,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"a0a6c1d8-ce62-41c7-843e-9742ae1adb04\",\n      \"label\": \"label-1522\",\n      \"height\": 140,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"b17a8df4-e855-4e9e-87af-78c3ad993373\",\n      \"label\": \"label-1523\",\n      \"height\": 57,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"6e4bbc35-61fb-4800-b0b2-c4b1abd3b884\",\n      \"label\": \"label-1524\",\n      \"height\": 37,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"265eacb7-ea36-4098-8d77-553cfb2c31ef\",\n      \"label\": \"label-1525\",\n      \"height\": 211,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"8c372e5d-4e88-4646-83f1-d61faf959ada\",\n      \"label\": \"label-1526\",\n      \"height\": 311,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"a66723c1-554b-4b53-9638-44c47fccb439\",\n      \"label\": \"label-1527\",\n      \"height\": 441,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"e8efc5dd-fdfe-4c94-8ec8-f264b5290940\",\n      \"label\": \"label-1528\",\n      \"height\": 347,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"62ddc5b4-0b00-4bdc-9582-89173bd9dd42\",\n      \"label\": \"label-1529\",\n      \"height\": 213,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"f2e31388-ceb8-4b37-b662-cba51d7ea115\",\n      \"label\": \"label-1530\",\n      \"height\": 70,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"8ca7f604-cef2-4a27-bcf0-0a831fe805eb\",\n      \"label\": \"label-1531\",\n      \"height\": 486,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"39c86087-12ed-4d43-8598-967adf3f97d7\",\n      \"label\": \"label-1532\",\n      \"height\": 389,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"f28e822f-db97-4bf9-86c5-e7de97af6ec8\",\n      \"label\": \"label-1533\",\n      \"height\": 296,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"0ec72c7d-b2e9-40c3-988a-4c7ef06bf314\",\n      \"label\": \"label-1534\",\n      \"height\": 365,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"cd1340cb-67e2-48f4-9370-752da1589b51\",\n      \"label\": \"label-1535\",\n      \"height\": 377,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"c820b89e-3434-4ceb-a721-10344329049b\",\n      \"label\": \"label-1536\",\n      \"height\": 359,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"fd2ad273-96be-4129-9ff6-b17404ad5b71\",\n      \"label\": \"label-1537\",\n      \"height\": 392,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"77f82e9a-bfa3-4d9b-a7cb-78bcb1a24401\",\n      \"label\": \"label-1538\",\n      \"height\": 504,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"d0ce3944-bca0-4818-b6c2-6197e8e0b471\",\n      \"label\": \"label-1539\",\n      \"height\": 273,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"0fa248d1-aa1a-4462-8fe6-20acfc6ce679\",\n      \"label\": \"label-1540\",\n      \"height\": 100,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"225b0568-25f1-4cf3-a2a7-bff3dd814f5a\",\n      \"label\": \"label-1541\",\n      \"height\": 273,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"8ee4f11d-ea1b-4169-8601-546b7273644e\",\n      \"label\": \"label-1542\",\n      \"height\": 355,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"54ee54d8-6861-4efb-bdb4-e6462ca20c29\",\n      \"label\": \"label-1543\",\n      \"height\": 70,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"b070dbc9-6795-4cb3-9562-e2ec88db3dd8\",\n      \"label\": \"label-1544\",\n      \"height\": 514,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"ef4bbfe0-aecd-4626-95a7-643e8b6a7f1a\",\n      \"label\": \"label-1545\",\n      \"height\": 418,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"c1522249-8e10-4ce6-b5bb-31f079a3edc9\",\n      \"label\": \"label-1546\",\n      \"height\": 34,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"da018d8b-3a60-48e1-b2d3-eb54a2f561fd\",\n      \"label\": \"label-1547\",\n      \"height\": 177,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"5d90ec33-6f9f-40ad-88e7-86248126e92d\",\n      \"label\": \"label-1548\",\n      \"height\": 208,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"3cf87ec5-af09-4bc5-9e38-db8b6cc1f89a\",\n      \"label\": \"label-1549\",\n      \"height\": 346,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"747e337d-4c7c-48aa-8389-90e87f527e55\",\n      \"label\": \"label-1550\",\n      \"height\": 411,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"635216b7-6ed5-4e87-aed0-4936aee6dc27\",\n      \"label\": \"label-1551\",\n      \"height\": 198,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"55964cd4-1998-48da-862f-d1497b5ac835\",\n      \"label\": \"label-1552\",\n      \"height\": 500,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"020684a9-4a35-42e3-960f-8eb76f9e7163\",\n      \"label\": \"label-1553\",\n      \"height\": 374,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"56476195-53a9-4935-a46e-2d1b2b2d749f\",\n      \"label\": \"label-1554\",\n      \"height\": 521,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"9e4834df-b32c-47a9-98d5-2b6b66a61e21\",\n      \"label\": \"label-1555\",\n      \"height\": 400,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"37ad6092-40f7-4310-b94c-46b4e6188321\",\n      \"label\": \"label-1556\",\n      \"height\": 211,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"d2191aca-35da-435a-b029-4ba29d25e930\",\n      \"label\": \"label-1557\",\n      \"height\": 101,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"fc2129ef-3768-4025-bbe0-9c082d89ac60\",\n      \"label\": \"label-1558\",\n      \"height\": 168,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"76cea0c6-343a-43c3-a1a5-1e2177b26337\",\n      \"label\": \"label-1559\",\n      \"height\": 105,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"af2cb0e2-db89-4faf-97f4-795c7775ae03\",\n      \"label\": \"label-1560\",\n      \"height\": 108,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"a6b60624-f91d-40f0-8d5d-a586709aadcd\",\n      \"label\": \"label-1561\",\n      \"height\": 191,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"1051ea6f-ab79-45f4-aa7e-1bf362bd8e78\",\n      \"label\": \"label-1562\",\n      \"height\": 323,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"f0118fe3-c76e-4518-abb6-6bd499e65e11\",\n      \"label\": \"label-1563\",\n      \"height\": 143,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"045eb6ce-eb0e-41a0-a6f6-9256e84ae0b8\",\n      \"label\": \"label-1564\",\n      \"height\": 254,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"b5b5efc4-8832-4e57-a27f-9383516e2a05\",\n      \"label\": \"label-1565\",\n      \"height\": 411,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"302b2701-2ec7-45b4-97e5-bd7aac13c112\",\n      \"label\": \"label-1566\",\n      \"height\": 317,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"ad0b5ed9-a210-4c0e-9f49-1e7a57098759\",\n      \"label\": \"label-1567\",\n      \"height\": 268,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"b45b83a3-7dd8-4e4b-b875-7404d5f5f62c\",\n      \"label\": \"label-1568\",\n      \"height\": 402,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"f1023673-5d69-4102-8807-47f329432703\",\n      \"label\": \"label-1569\",\n      \"height\": 284,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"f81fa199-3dbc-4021-ad80-0e1b834dc8af\",\n      \"label\": \"label-1570\",\n      \"height\": 226,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"b523e3bc-d367-49d7-8973-5646786b46e9\",\n      \"label\": \"label-1571\",\n      \"height\": 211,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"38cf958f-7be4-4568-9e0e-d9bbb08f0f15\",\n      \"label\": \"label-1572\",\n      \"height\": 378,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"84b2866e-96aa-4945-ba15-821830b6e5c3\",\n      \"label\": \"label-1573\",\n      \"height\": 132,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"25e00965-bd48-461d-9b2a-6139c2315bf1\",\n      \"label\": \"label-1574\",\n      \"height\": 94,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"23fc759b-2ad3-4e31-97dd-86abc7054949\",\n      \"label\": \"label-1575\",\n      \"height\": 484,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"760a4ab0-314a-4909-8402-afbd8463da5d\",\n      \"label\": \"label-1576\",\n      \"height\": 239,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"7d10b6cb-0868-4a13-a99b-b71a0fd8efa2\",\n      \"label\": \"label-1577\",\n      \"height\": 218,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"f4fa66a0-f36e-47b4-a47e-dd1a84f24821\",\n      \"label\": \"label-1578\",\n      \"height\": 67,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"a28f748b-21ab-428b-8c38-ea28e88c2ad5\",\n      \"label\": \"label-1579\",\n      \"height\": 436,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"8a7e44b0-07ba-425d-b8a4-f16d7758bbba\",\n      \"label\": \"label-1580\",\n      \"height\": 397,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"af036eb6-e958-4cfe-8a18-9ff712cdfcb9\",\n      \"label\": \"label-1581\",\n      \"height\": 329,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"942ee447-16d9-4440-8505-84b0d51e96bf\",\n      \"label\": \"label-1582\",\n      \"height\": 165,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"68f68938-ee96-452c-857d-87da1f154bec\",\n      \"label\": \"label-1583\",\n      \"height\": 504,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"db8ad4a4-84b7-4cc1-9d96-d4e1c453591d\",\n      \"label\": \"label-1584\",\n      \"height\": 416,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"643985ac-57f3-49b7-ac8c-d2277c5437f8\",\n      \"label\": \"label-1585\",\n      \"height\": 182,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"afc764fd-a500-4fc4-9455-60362e448613\",\n      \"label\": \"label-1586\",\n      \"height\": 390,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"b271c62d-c6cf-43f9-84bf-2ad80431a93b\",\n      \"label\": \"label-1587\",\n      \"height\": 123,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"e2b17167-7bdc-4b48-886f-bf0dba9b7dfc\",\n      \"label\": \"label-1588\",\n      \"height\": 483,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"810716aa-8778-4216-9ef1-6066c7b33e22\",\n      \"label\": \"label-1589\",\n      \"height\": 226,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"b20acd7c-1764-422f-a0fe-506e8621c867\",\n      \"label\": \"label-1590\",\n      \"height\": 202,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"7613fa0a-83ec-46b7-a726-5d061056c16b\",\n      \"label\": \"label-1591\",\n      \"height\": 120,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"017c31ee-848e-4888-9efa-b72a98464112\",\n      \"label\": \"label-1592\",\n      \"height\": 90,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"f37d75aa-dd46-4774-87d5-d3ff7dcf6060\",\n      \"label\": \"label-1593\",\n      \"height\": 460,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"99778ce3-679f-435b-ba4b-b55cf130e97c\",\n      \"label\": \"label-1594\",\n      \"height\": 320,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"a6bec095-e146-4332-bf45-8a971727307d\",\n      \"label\": \"label-1595\",\n      \"height\": 74,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"6fe0c599-b04c-403f-95d6-1fa95dd7daee\",\n      \"label\": \"label-1596\",\n      \"height\": 76,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"149d3a03-13eb-419e-9ceb-0fdbc3503d4e\",\n      \"label\": \"label-1597\",\n      \"height\": 472,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"ed15b8f4-2fe9-4e4f-b17f-d4bda80b9b37\",\n      \"label\": \"label-1598\",\n      \"height\": 316,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"27d42253-b8cf-4cb0-8e95-14853d6d4ed3\",\n      \"label\": \"label-1599\",\n      \"height\": 340,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"ed22628e-2086-486e-8590-b33ab177acb7\",\n      \"label\": \"label-1600\",\n      \"height\": 104,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"21fc1524-fd2c-4129-b967-9b9af7473cb5\",\n      \"label\": \"label-1601\",\n      \"height\": 498,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"35955f35-a2e7-482f-96ac-940d72ef01b1\",\n      \"label\": \"label-1602\",\n      \"height\": 453,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"0f983e8f-0771-40e4-b437-f07f86fd2b67\",\n      \"label\": \"label-1603\",\n      \"height\": 514,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"36d5768b-85b7-4146-8b84-202aea43ac05\",\n      \"label\": \"label-1604\",\n      \"height\": 278,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"b4d111d1-0c70-4555-bd4b-7d5eca57184a\",\n      \"label\": \"label-1605\",\n      \"height\": 220,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"8995448e-6487-4580-b651-8ea08c2f80ad\",\n      \"label\": \"label-1606\",\n      \"height\": 391,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"0af07ac1-7882-4a3c-a13e-588d31ca7ee2\",\n      \"label\": \"label-1607\",\n      \"height\": 158,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"a247d2e6-acaa-449f-a37e-987f7d0ff6ae\",\n      \"label\": \"label-1608\",\n      \"height\": 383,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"b5b57e4a-f524-4fba-bd9b-471818c5a3c4\",\n      \"label\": \"label-1609\",\n      \"height\": 65,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"3e6b162f-fa98-43c3-a1dd-326afbb8ddad\",\n      \"label\": \"label-1610\",\n      \"height\": 248,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"c3829d16-038f-4595-afdc-6d3d53be82e1\",\n      \"label\": \"label-1611\",\n      \"height\": 174,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"0be52188-5529-4898-91db-6c13a8d3a267\",\n      \"label\": \"label-1612\",\n      \"height\": 371,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"8504e48d-6f74-4a49-ad6a-3c4cd6f3cf3b\",\n      \"label\": \"label-1613\",\n      \"height\": 33,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"dba64f12-8e4d-42bd-b8d5-9101701549e5\",\n      \"label\": \"label-1614\",\n      \"height\": 289,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"d60c7117-a0dd-4b09-b7d7-22890c6fe429\",\n      \"label\": \"label-1615\",\n      \"height\": 334,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"17293529-d4b8-47cc-b0b8-151a85ccccbe\",\n      \"label\": \"label-1616\",\n      \"height\": 117,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"e1735721-bd65-4be2-89e0-2d9e8b9aaafb\",\n      \"label\": \"label-1617\",\n      \"height\": 230,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"b7684e28-8048-42d0-835f-c7974ecf7069\",\n      \"label\": \"label-1618\",\n      \"height\": 91,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"30453666-c9e1-4ca2-afe3-e17afde63b6f\",\n      \"label\": \"label-1619\",\n      \"height\": 502,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"a4335a06-1051-41ff-a74b-f7cac299e900\",\n      \"label\": \"label-1620\",\n      \"height\": 478,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"7aaba727-0683-4cf1-9b6f-80c52144c9dd\",\n      \"label\": \"label-1621\",\n      \"height\": 403,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"e788e43b-2cf6-4cb7-8a50-5a5d3d251ba5\",\n      \"label\": \"label-1622\",\n      \"height\": 453,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"49e7e23d-bb88-4e2b-9fe2-163dfcd49af8\",\n      \"label\": \"label-1623\",\n      \"height\": 255,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"90a5db4f-6f5f-4511-922b-a4cf6da75b37\",\n      \"label\": \"label-1624\",\n      \"height\": 313,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"de29b9b2-a172-4731-ac13-d92d6003f485\",\n      \"label\": \"label-1625\",\n      \"height\": 61,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"d631e415-2bff-44b9-8a44-664cb46c44da\",\n      \"label\": \"label-1626\",\n      \"height\": 440,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"6e620ced-1c82-4c57-af87-e3a210ceaf81\",\n      \"label\": \"label-1627\",\n      \"height\": 155,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"631d2402-961a-4a2e-8a09-45e2c2785c1d\",\n      \"label\": \"label-1628\",\n      \"height\": 276,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"fef545f5-114e-46bc-8793-9d0804c1777b\",\n      \"label\": \"label-1629\",\n      \"height\": 305,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"ea877326-3ef7-4d3e-aa49-c5bca65728af\",\n      \"label\": \"label-1630\",\n      \"height\": 508,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"9bb27604-5e09-4124-8e87-d1147343a972\",\n      \"label\": \"label-1631\",\n      \"height\": 181,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"821e3dce-9cf0-4cd0-be7e-ea7908887611\",\n      \"label\": \"label-1632\",\n      \"height\": 425,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"7e6e42c8-1151-4737-aca6-39eb3d483e64\",\n      \"label\": \"label-1633\",\n      \"height\": 372,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"5511e6a5-d145-47d9-ae9f-b5e23027ad77\",\n      \"label\": \"label-1634\",\n      \"height\": 470,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"98e89449-9ff4-48cc-a024-ef36c05a22b4\",\n      \"label\": \"label-1635\",\n      \"height\": 55,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"741c134a-27fb-416d-8ecc-3d408b61afbd\",\n      \"label\": \"label-1636\",\n      \"height\": 403,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"6847f1e0-b47a-4e50-82ae-2ca64b8f82c9\",\n      \"label\": \"label-1637\",\n      \"height\": 420,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"15d7744d-d49b-44a5-bb2f-67d9e0a0d04d\",\n      \"label\": \"label-1638\",\n      \"height\": 402,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"40db44f3-024f-4dda-8fa2-ac79b4fa2118\",\n      \"label\": \"label-1639\",\n      \"height\": 298,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"9f2421de-a2bf-4721-a1c6-1a6270a7e404\",\n      \"label\": \"label-1640\",\n      \"height\": 494,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"65342cd3-8f6a-4b4a-8817-d644786187d8\",\n      \"label\": \"label-1641\",\n      \"height\": 500,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"bc17ac4d-ce5e-4f96-bcf8-c6e6d33f8dda\",\n      \"label\": \"label-1642\",\n      \"height\": 452,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"902f3b3d-01dc-41e4-a3a4-f1ec65cd239d\",\n      \"label\": \"label-1643\",\n      \"height\": 290,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"d6044b09-1758-4c3a-bf0d-0716611865a1\",\n      \"label\": \"label-1644\",\n      \"height\": 135,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"c782651f-6e2b-4c14-bac1-ca3b3415624b\",\n      \"label\": \"label-1645\",\n      \"height\": 146,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"3d889f55-60a7-4118-8f73-f473235ce4f7\",\n      \"label\": \"label-1646\",\n      \"height\": 51,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"d29c17cc-6139-48c5-870d-68285b48f883\",\n      \"label\": \"label-1647\",\n      \"height\": 382,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"9e688e5e-12f7-4252-b2da-206f25a60039\",\n      \"label\": \"label-1648\",\n      \"height\": 467,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"ed3e23b7-187d-4878-b717-25c9ab28816e\",\n      \"label\": \"label-1649\",\n      \"height\": 296,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"9ec48281-faf6-45a0-b735-1d03c75ada6d\",\n      \"label\": \"label-1650\",\n      \"height\": 506,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"7644a52f-a143-4a96-9665-05b8be556170\",\n      \"label\": \"label-1651\",\n      \"height\": 265,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"cceba9f7-9207-4c77-8a66-22e0523d285e\",\n      \"label\": \"label-1652\",\n      \"height\": 256,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"0185d6f9-1c81-48d0-a320-a6c632ae2c2d\",\n      \"label\": \"label-1653\",\n      \"height\": 287,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"a2cd84c2-5ee0-4e50-9b4c-2f27ae0cc958\",\n      \"label\": \"label-1654\",\n      \"height\": 261,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"b2809e0f-4d7f-4810-96da-c1dc280bb5c3\",\n      \"label\": \"label-1655\",\n      \"height\": 89,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"5567f347-df4a-4587-865e-be091b43714a\",\n      \"label\": \"label-1656\",\n      \"height\": 480,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"03f3e4b3-54fa-4eee-9786-a8f7cdf1c623\",\n      \"label\": \"label-1657\",\n      \"height\": 142,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"a02c3a61-b32d-4a0e-81d9-0eb25a5ddc84\",\n      \"label\": \"label-1658\",\n      \"height\": 252,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"223b873d-c274-472a-a856-b6fa313e25aa\",\n      \"label\": \"label-1659\",\n      \"height\": 204,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"01454c7c-2b48-4cde-b6f8-0743f1803fe4\",\n      \"label\": \"label-1660\",\n      \"height\": 249,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"f39b5527-6fcb-4dd9-bc1b-52edaea27a9b\",\n      \"label\": \"label-1661\",\n      \"height\": 422,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"ae5e3a1c-fd8b-4943-889f-3cff9ff7a566\",\n      \"label\": \"label-1662\",\n      \"height\": 129,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"293cb5b3-8286-4648-9460-b71f2d3bb9ef\",\n      \"label\": \"label-1663\",\n      \"height\": 213,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"43bd8839-b3b7-493f-b2bd-4b47b03605f6\",\n      \"label\": \"label-1664\",\n      \"height\": 133,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"4fcedb82-bbec-489f-b037-39932745f784\",\n      \"label\": \"label-1665\",\n      \"height\": 413,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"bd00501f-baae-49f5-9f20-0959f954395b\",\n      \"label\": \"label-1666\",\n      \"height\": 89,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"e585f744-a558-4660-b638-d1f13d63e6b8\",\n      \"label\": \"label-1667\",\n      \"height\": 496,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"2c3e90a0-2c48-4dd1-8ea1-a3111df407dc\",\n      \"label\": \"label-1668\",\n      \"height\": 116,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"3d736952-6379-413f-9f77-3a74d1935125\",\n      \"label\": \"label-1669\",\n      \"height\": 393,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"6ffe8063-d332-499b-be9e-8783f4c5dbd4\",\n      \"label\": \"label-1670\",\n      \"height\": 367,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"563a7b1d-b28d-40da-82b9-f8f14767a06c\",\n      \"label\": \"label-1671\",\n      \"height\": 57,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"e4fd41bf-edfc-4c4f-ab0f-39181ba12dc2\",\n      \"label\": \"label-1672\",\n      \"height\": 448,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"36ff530a-2cdb-4800-86cf-2090b27ca2b9\",\n      \"label\": \"label-1673\",\n      \"height\": 295,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"1e7f8bca-2219-4df4-ae79-dcc04bbd61c9\",\n      \"label\": \"label-1674\",\n      \"height\": 481,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"1197a405-0f3d-4412-aa2d-080a469d5ca3\",\n      \"label\": \"label-1675\",\n      \"height\": 349,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"ec5c459d-aa19-4fe4-a0d1-194663163878\",\n      \"label\": \"label-1676\",\n      \"height\": 408,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"312e8ecf-9086-45c9-bc10-ef7113c0cbce\",\n      \"label\": \"label-1677\",\n      \"height\": 484,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"1e0f6bb6-0401-4d51-a7fd-d84e2da0ae39\",\n      \"label\": \"label-1678\",\n      \"height\": 135,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"3f2f8c1d-da0c-4b04-b840-4b68146ddc41\",\n      \"label\": \"label-1679\",\n      \"height\": 423,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"0b1dfb5d-7f0a-4151-a02c-087fac695b76\",\n      \"label\": \"label-1680\",\n      \"height\": 340,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"cea5b1b8-1027-47f3-acaa-f18f0a8a9dd8\",\n      \"label\": \"label-1681\",\n      \"height\": 159,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"2011e410-bb51-4428-bc93-808cfcb8d561\",\n      \"label\": \"label-1682\",\n      \"height\": 457,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"0268177d-0a28-44b5-8356-d6614e126a73\",\n      \"label\": \"label-1683\",\n      \"height\": 492,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"b3515abb-3a6d-4860-b4c3-adbea8ed1a9f\",\n      \"label\": \"label-1684\",\n      \"height\": 312,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"eda92571-ef5d-4197-af4b-a4cda3fcf750\",\n      \"label\": \"label-1685\",\n      \"height\": 90,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"459ce54c-a388-4777-89a1-7e6e4174966b\",\n      \"label\": \"label-1686\",\n      \"height\": 521,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"6c9289d1-1f27-4283-814e-4471e6300ff1\",\n      \"label\": \"label-1687\",\n      \"height\": 439,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"2a159cf7-bcd3-4a78-83d4-6c88de2c6bf3\",\n      \"label\": \"label-1688\",\n      \"height\": 227,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"05788e8f-b94b-42bb-b3f8-4684b6cf4ac7\",\n      \"label\": \"label-1689\",\n      \"height\": 300,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"714b6704-f715-4b5a-ab5e-40a5dda4faa7\",\n      \"label\": \"label-1690\",\n      \"height\": 109,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"bae539fc-adb4-4446-9fdb-6c08cc56ac59\",\n      \"label\": \"label-1691\",\n      \"height\": 327,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"3ec28c75-de17-40f2-a6e9-942186cdd2a3\",\n      \"label\": \"label-1692\",\n      \"height\": 459,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"36bc5ded-4623-4b09-9276-2939c047fddf\",\n      \"label\": \"label-1693\",\n      \"height\": 218,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"2bc6e7d0-cd1b-48bc-bdf5-73fbee070278\",\n      \"label\": \"label-1694\",\n      \"height\": 475,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"460911c6-e4f9-4397-b1ef-154288290a45\",\n      \"label\": \"label-1695\",\n      \"height\": 500,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"97ad74bf-44d0-4aaa-9d0a-883a17d72b1a\",\n      \"label\": \"label-1696\",\n      \"height\": 277,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"f75d646d-4ca4-479e-87c6-8e7c8ad6fcc6\",\n      \"label\": \"label-1697\",\n      \"height\": 312,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"830b8e72-b579-4146-a0df-29a76f6eb9ba\",\n      \"label\": \"label-1698\",\n      \"height\": 181,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"444f1a04-f45a-480a-bc03-b69ad1e0ef53\",\n      \"label\": \"label-1699\",\n      \"height\": 475,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"00d411c1-6669-42b2-929b-38dd390da51f\",\n      \"label\": \"label-1700\",\n      \"height\": 277,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"6d69f525-21bf-48eb-a2ce-27958932ae7e\",\n      \"label\": \"label-1701\",\n      \"height\": 330,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"68c71c53-69b0-4a28-a963-1a84f607b61b\",\n      \"label\": \"label-1702\",\n      \"height\": 486,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"bb807ce1-bbe7-452f-a22b-7e82e65d26d0\",\n      \"label\": \"label-1703\",\n      \"height\": 427,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"a4a131e4-aeef-46f8-bf80-91b7088bbacf\",\n      \"label\": \"label-1704\",\n      \"height\": 194,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"76394e9f-3b06-4604-9f66-deea37388916\",\n      \"label\": \"label-1705\",\n      \"height\": 167,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"27d74260-1bd0-4522-8f32-ebdc78f1b271\",\n      \"label\": \"label-1706\",\n      \"height\": 261,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"6c52ce56-28fe-4830-bcbb-9ae50d8a3e93\",\n      \"label\": \"label-1707\",\n      \"height\": 213,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"44ab088d-11cd-4b62-b310-cb2f0a24224f\",\n      \"label\": \"label-1708\",\n      \"height\": 382,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"3e9cbbf9-2855-4579-a6c4-7a7814135c02\",\n      \"label\": \"label-1709\",\n      \"height\": 445,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"70fbc909-261b-4ad2-9c4f-ef842e5926fc\",\n      \"label\": \"label-1710\",\n      \"height\": 290,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"7ad1d8c3-f5a7-42a2-8c07-cfb9a08095bf\",\n      \"label\": \"label-1711\",\n      \"height\": 403,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"c84131ee-ac38-4f49-ae70-1a636bedf8a2\",\n      \"label\": \"label-1712\",\n      \"height\": 77,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"abaa8104-e9ff-4b4c-9873-71dce97e7556\",\n      \"label\": \"label-1713\",\n      \"height\": 83,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"10f8916a-3d74-4915-9c8e-056b097352f5\",\n      \"label\": \"label-1714\",\n      \"height\": 386,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"44695e10-ed03-4933-b5b8-8712105ffcb8\",\n      \"label\": \"label-1715\",\n      \"height\": 245,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"1d0da4d7-66b3-480b-8057-9ca052df8513\",\n      \"label\": \"label-1716\",\n      \"height\": 272,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"63d7ff75-e8b4-459d-be1d-aa7080611d2e\",\n      \"label\": \"label-1717\",\n      \"height\": 245,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"c15efe65-8a51-4f54-bdc0-863218007e91\",\n      \"label\": \"label-1718\",\n      \"height\": 249,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"cc0966e9-5cad-4558-beb8-b25f8a6239a7\",\n      \"label\": \"label-1719\",\n      \"height\": 122,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"ae2a8d71-7740-4ab9-8ff9-dd8aa15273ff\",\n      \"label\": \"label-1720\",\n      \"height\": 83,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"384e33b3-1461-41db-bcba-66945cdf3cc6\",\n      \"label\": \"label-1721\",\n      \"height\": 495,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"f7e1f286-331f-485b-bfeb-9a7faf5ddba7\",\n      \"label\": \"label-1722\",\n      \"height\": 308,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"1edfe291-9c4d-435f-b09f-0bf8d5b7d81b\",\n      \"label\": \"label-1723\",\n      \"height\": 460,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"21c76689-3108-4dfd-a98b-a9e6161d58a8\",\n      \"label\": \"label-1724\",\n      \"height\": 72,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"a922bbcb-d454-4a84-809a-d2fb97a7c22c\",\n      \"label\": \"label-1725\",\n      \"height\": 367,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"1a62b8e3-9b93-4e07-8f73-5d8e7b1377d3\",\n      \"label\": \"label-1726\",\n      \"height\": 257,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"e903b5c1-59e1-447f-bbd0-fbed55706c7f\",\n      \"label\": \"label-1727\",\n      \"height\": 210,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"62674ff9-aefb-43ff-a3a2-82f347ac2a87\",\n      \"label\": \"label-1728\",\n      \"height\": 115,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"906ac135-3b1b-4cd8-8ecc-89cad776bb13\",\n      \"label\": \"label-1729\",\n      \"height\": 382,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"4e9b88ea-cf4b-4e45-ab0f-7e8c1c16492e\",\n      \"label\": \"label-1730\",\n      \"height\": 330,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"cf25ba00-0348-44f2-a4d5-f4ae3c80c6ea\",\n      \"label\": \"label-1731\",\n      \"height\": 43,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"f2d0ac5c-a637-4125-9b54-a1a7bdb5da9f\",\n      \"label\": \"label-1732\",\n      \"height\": 36,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"174ea637-05d3-477b-8657-b2d6e523035a\",\n      \"label\": \"label-1733\",\n      \"height\": 364,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"c6791140-5036-414b-8aa5-8006c1156a48\",\n      \"label\": \"label-1734\",\n      \"height\": 385,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"97072fbd-9954-409b-ad7e-9e79c2a529c0\",\n      \"label\": \"label-1735\",\n      \"height\": 234,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"3a305ae2-becb-4000-85a6-12abbb921ffe\",\n      \"label\": \"label-1736\",\n      \"height\": 272,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"7bc1da50-ab1c-409f-84a4-cfd98b9c24b0\",\n      \"label\": \"label-1737\",\n      \"height\": 437,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"f7c2a8d2-8a4b-4ee5-8414-1eb891f902de\",\n      \"label\": \"label-1738\",\n      \"height\": 242,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"750fd7a8-483b-408d-9b8a-2bc7b64b8868\",\n      \"label\": \"label-1739\",\n      \"height\": 519,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"3926be2f-062f-4f07-bce1-3ceb5149572b\",\n      \"label\": \"label-1740\",\n      \"height\": 36,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"fea784c7-ceea-4d47-88b9-67a1152fa3a1\",\n      \"label\": \"label-1741\",\n      \"height\": 342,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"21a835a4-a236-4aeb-a1e0-48cf5b8145c9\",\n      \"label\": \"label-1742\",\n      \"height\": 325,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"ca8fd8ce-91f6-481a-947f-98c48ddb07a4\",\n      \"label\": \"label-1743\",\n      \"height\": 260,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"ef292625-278f-40c4-a64f-ed857091f896\",\n      \"label\": \"label-1744\",\n      \"height\": 289,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"986cc63d-232e-413d-b57f-ae770d689008\",\n      \"label\": \"label-1745\",\n      \"height\": 252,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"b26ebb5e-aa45-4838-aa61-b009bd5f3711\",\n      \"label\": \"label-1746\",\n      \"height\": 244,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"30512b8a-70e0-4d88-b182-6b2445646d4a\",\n      \"label\": \"label-1747\",\n      \"height\": 254,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"c23be47f-a9d1-4c28-94d6-251b7590f024\",\n      \"label\": \"label-1748\",\n      \"height\": 488,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"74aea707-5605-472e-a20c-c745970ef08e\",\n      \"label\": \"label-1749\",\n      \"height\": 318,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"ab6cf351-3ad6-4f47-ac11-906b80f054a7\",\n      \"label\": \"label-1750\",\n      \"height\": 474,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"58f911a6-a6ad-4fc6-a962-1795a4a86524\",\n      \"label\": \"label-1751\",\n      \"height\": 290,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"e4dc23cd-e772-4074-9964-efefe27f5c99\",\n      \"label\": \"label-1752\",\n      \"height\": 51,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"f60578d4-fda8-4de2-a40b-598bfd287455\",\n      \"label\": \"label-1753\",\n      \"height\": 313,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"4209e53a-4a48-4bc1-8cf6-9919039d7717\",\n      \"label\": \"label-1754\",\n      \"height\": 91,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"65ff3a69-f425-4317-a7c5-3aa27ccc891f\",\n      \"label\": \"label-1755\",\n      \"height\": 38,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"94faf344-0c40-4f0b-86ca-bc92dce9fce4\",\n      \"label\": \"label-1756\",\n      \"height\": 254,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"ae7581f0-f5dc-4525-b60c-590e2fd86161\",\n      \"label\": \"label-1757\",\n      \"height\": 176,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"192a6171-b128-491d-9be3-33032e8b61b9\",\n      \"label\": \"label-1758\",\n      \"height\": 456,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"547eee98-d426-48f2-ac18-3870d95c8c44\",\n      \"label\": \"label-1759\",\n      \"height\": 85,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"d0300edf-0a03-410f-b4ad-2abdce7b3398\",\n      \"label\": \"label-1760\",\n      \"height\": 173,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"48dcfc00-00d4-4a20-a574-056d824c5f08\",\n      \"label\": \"label-1761\",\n      \"height\": 482,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"e07ab364-7209-458d-9978-94d42f046df8\",\n      \"label\": \"label-1762\",\n      \"height\": 345,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"f7870332-0e93-49aa-ad0a-ee1f49858ea9\",\n      \"label\": \"label-1763\",\n      \"height\": 419,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"a4b2d0e4-de2f-4b8c-ba22-6c8c8d2bce98\",\n      \"label\": \"label-1764\",\n      \"height\": 252,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"b9d37a57-4446-40de-81e5-39a4e39c2537\",\n      \"label\": \"label-1765\",\n      \"height\": 35,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"e8a0349e-a6de-4cda-9adc-1f01ee93dff8\",\n      \"label\": \"label-1766\",\n      \"height\": 415,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"3b219e18-a084-496c-9d30-2d4ccdda2f14\",\n      \"label\": \"label-1767\",\n      \"height\": 470,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"614047d2-4a77-48f0-8a9b-e7899ab46c45\",\n      \"label\": \"label-1768\",\n      \"height\": 528,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"fef994f5-d576-4148-ac6e-b4771aa0d2b8\",\n      \"label\": \"label-1769\",\n      \"height\": 235,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"73c20c8a-91fd-46ed-a6e5-4363b775eb47\",\n      \"label\": \"label-1770\",\n      \"height\": 408,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"634adfb8-6a0a-4073-aed0-548e43e15d89\",\n      \"label\": \"label-1771\",\n      \"height\": 342,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"409668ce-5e28-4012-ae40-876ec19bc249\",\n      \"label\": \"label-1772\",\n      \"height\": 216,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"d0ec73cc-424e-4fce-8395-761c08781167\",\n      \"label\": \"label-1773\",\n      \"height\": 275,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"4a144c1c-e92f-486c-bc39-1f957eaab34f\",\n      \"label\": \"label-1774\",\n      \"height\": 213,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"83abdd27-b995-4e03-8a16-53282f7c163b\",\n      \"label\": \"label-1775\",\n      \"height\": 147,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"5e89755f-1402-4eda-b0a8-d129c5c51109\",\n      \"label\": \"label-1776\",\n      \"height\": 462,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"8ac23020-6038-4941-a1c5-c99ba89df1ae\",\n      \"label\": \"label-1777\",\n      \"height\": 520,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"07842f9a-2767-4ea3-8487-52584df7cb7d\",\n      \"label\": \"label-1778\",\n      \"height\": 136,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"373d3f76-7944-4cc3-bcc6-4c62d49fe6ea\",\n      \"label\": \"label-1779\",\n      \"height\": 524,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"b47791ce-37f6-48fd-8fd9-283a6ae77439\",\n      \"label\": \"label-1780\",\n      \"height\": 65,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"5ac9dfb7-bab2-449c-befc-af847404f45d\",\n      \"label\": \"label-1781\",\n      \"height\": 346,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"24292dbe-d6ad-49ec-a1b5-578ab611ea02\",\n      \"label\": \"label-1782\",\n      \"height\": 254,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"468d5253-2600-460e-a4a4-ec5fb869be6d\",\n      \"label\": \"label-1783\",\n      \"height\": 284,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"34f912bd-b263-4937-9b09-1a8a0a2970b3\",\n      \"label\": \"label-1784\",\n      \"height\": 71,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"6ead48c2-8f2c-4a62-8462-d6711d052dcb\",\n      \"label\": \"label-1785\",\n      \"height\": 216,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"b1a808de-b11f-49ef-8d04-1aec0928f586\",\n      \"label\": \"label-1786\",\n      \"height\": 219,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"5f15b466-d079-45e6-9107-83c93b546d86\",\n      \"label\": \"label-1787\",\n      \"height\": 172,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"bc112d10-a18c-4f99-a26a-7918f919f398\",\n      \"label\": \"label-1788\",\n      \"height\": 304,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"7bbac5a8-747d-44d8-ad59-0bd4f5e41d2f\",\n      \"label\": \"label-1789\",\n      \"height\": 526,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"5dea81c3-f1d6-4bab-982a-17ef96cf5e21\",\n      \"label\": \"label-1790\",\n      \"height\": 94,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"6dd656e0-2414-4505-b276-127e6f2084d9\",\n      \"label\": \"label-1791\",\n      \"height\": 235,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"636e9205-f416-405e-b127-d3268879ce99\",\n      \"label\": \"label-1792\",\n      \"height\": 282,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"656505fd-ea7a-4662-b93b-83c613908279\",\n      \"label\": \"label-1793\",\n      \"height\": 330,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"50e937de-dfd7-4dbb-9e98-5f0eda6ebc64\",\n      \"label\": \"label-1794\",\n      \"height\": 69,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"5b7be0af-54ac-4f35-aa5d-89d4ae8b9439\",\n      \"label\": \"label-1795\",\n      \"height\": 475,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"3d15cffc-4b9c-4ca0-a2b4-fa149e7f0956\",\n      \"label\": \"label-1796\",\n      \"height\": 46,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"af610419-d235-4ff3-b030-ecffe3173581\",\n      \"label\": \"label-1797\",\n      \"height\": 177,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"d7b43fbc-1093-425a-bc35-258f9a253664\",\n      \"label\": \"label-1798\",\n      \"height\": 185,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"3465608d-f078-47f8-824a-fd2c7c45f3aa\",\n      \"label\": \"label-1799\",\n      \"height\": 407,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"041ea083-9dee-4008-95e4-ea96c59eec1f\",\n      \"label\": \"label-1800\",\n      \"height\": 373,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"8d6bf15d-d2de-4ed3-a890-c3c50e9a8016\",\n      \"label\": \"label-1801\",\n      \"height\": 42,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"31bc03a0-fe3c-470a-8625-704d1c164e62\",\n      \"label\": \"label-1802\",\n      \"height\": 480,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"3741d81c-6d6a-4f9b-89ba-80e8184cd9c9\",\n      \"label\": \"label-1803\",\n      \"height\": 87,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"b2e27cbf-6667-4d08-bbec-eae65540f0e0\",\n      \"label\": \"label-1804\",\n      \"height\": 207,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"fbe9df02-d4b1-4586-85b5-8d1b52c0c722\",\n      \"label\": \"label-1805\",\n      \"height\": 293,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"9e8775f5-fd0a-4c29-a8c5-01bbe296faa2\",\n      \"label\": \"label-1806\",\n      \"height\": 296,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"49e90c98-0372-4067-8c46-97950848a167\",\n      \"label\": \"label-1807\",\n      \"height\": 456,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"5c7d68b7-71b7-4274-9485-203628cc6346\",\n      \"label\": \"label-1808\",\n      \"height\": 235,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"4bb1d4a1-5b06-4985-9028-276edd06aa96\",\n      \"label\": \"label-1809\",\n      \"height\": 335,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"786a0b11-3883-4c05-8192-22e9a36b6046\",\n      \"label\": \"label-1810\",\n      \"height\": 486,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"31bf1a10-169a-4a5d-be23-a1cbfae14600\",\n      \"label\": \"label-1811\",\n      \"height\": 148,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"998b43d6-e8b0-4fef-ba8c-f3379a4e8729\",\n      \"label\": \"label-1812\",\n      \"height\": 371,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"9bb82f91-0522-41ed-b443-f86c3183570a\",\n      \"label\": \"label-1813\",\n      \"height\": 430,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"e445e122-d7d1-464e-a5a7-79044bc39fe7\",\n      \"label\": \"label-1814\",\n      \"height\": 456,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"826dfc7b-ba0f-4682-b560-7c39f07635e7\",\n      \"label\": \"label-1815\",\n      \"height\": 374,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"92d9eb83-50f4-4d30-8c41-484935e78692\",\n      \"label\": \"label-1816\",\n      \"height\": 336,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"d46c2ba7-b433-4b02-8cbb-c602b09c2923\",\n      \"label\": \"label-1817\",\n      \"height\": 65,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"269309de-b684-470c-859c-f481a7270553\",\n      \"label\": \"label-1818\",\n      \"height\": 175,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"6c148b14-14ce-4f1b-bfef-765d0aeeca38\",\n      \"label\": \"label-1819\",\n      \"height\": 275,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"d9ae987b-34a6-437a-8085-7d751764bead\",\n      \"label\": \"label-1820\",\n      \"height\": 530,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"7d3ddaa2-175c-4a02-b4de-dcf9fe74014e\",\n      \"label\": \"label-1821\",\n      \"height\": 301,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"078a865e-2d7f-4ee9-a911-fee8c4567c65\",\n      \"label\": \"label-1822\",\n      \"height\": 113,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"46e1c4b3-220f-45b9-8296-fedcee5b6fdf\",\n      \"label\": \"label-1823\",\n      \"height\": 263,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"8ee326f1-010c-49fc-be2d-bc998242a598\",\n      \"label\": \"label-1824\",\n      \"height\": 332,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"30c946ad-34b4-41aa-9f5b-b3fc56043a9f\",\n      \"label\": \"label-1825\",\n      \"height\": 391,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"8b8e3aa0-10cd-4946-b70d-d42a256291cb\",\n      \"label\": \"label-1826\",\n      \"height\": 340,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"5b3c8c1e-a5c2-4325-a5c7-ac1916cfbd27\",\n      \"label\": \"label-1827\",\n      \"height\": 214,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"8c2a517d-6a37-430f-b8ea-627341369f80\",\n      \"label\": \"label-1828\",\n      \"height\": 422,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"2f018c36-01f9-45a9-ab10-1caea3897156\",\n      \"label\": \"label-1829\",\n      \"height\": 373,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"35b7cf98-cf77-4fb8-b7ba-e1fde98e3e66\",\n      \"label\": \"label-1830\",\n      \"height\": 128,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"473171d7-a23a-44d1-9cfe-bf4cc72c74ed\",\n      \"label\": \"label-1831\",\n      \"height\": 420,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"d44f8d23-188d-47ff-8b30-662d03b667b0\",\n      \"label\": \"label-1832\",\n      \"height\": 102,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"ab6363b3-dd8f-4160-80cf-2e825c8fdf29\",\n      \"label\": \"label-1833\",\n      \"height\": 265,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"5cf5ba9c-3d45-4913-a5a8-ac03c1920ae2\",\n      \"label\": \"label-1834\",\n      \"height\": 119,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"92d8f8b1-ae1d-486b-84d2-85381d638cc3\",\n      \"label\": \"label-1835\",\n      \"height\": 304,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"78acb198-89d4-4e77-996b-a75e92262e8b\",\n      \"label\": \"label-1836\",\n      \"height\": 358,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"6b476919-24fe-4424-a6a0-c03d7b78f335\",\n      \"label\": \"label-1837\",\n      \"height\": 188,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"b9dfca75-f7e0-4622-8efe-7b85fe2463f4\",\n      \"label\": \"label-1838\",\n      \"height\": 166,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"26109a78-06f2-443e-8feb-804b584d6fcf\",\n      \"label\": \"label-1839\",\n      \"height\": 465,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"6ce23ad3-d419-4707-a8da-adc28ff65f67\",\n      \"label\": \"label-1840\",\n      \"height\": 406,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"303291ee-9049-4b5d-b4f3-de73073675b6\",\n      \"label\": \"label-1841\",\n      \"height\": 265,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"f7138142-9820-4230-927b-9ec00b0d7071\",\n      \"label\": \"label-1842\",\n      \"height\": 361,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"a93eb370-dcab-4fe6-8599-315566a19acd\",\n      \"label\": \"label-1843\",\n      \"height\": 394,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"ba11dbf0-19c5-48e4-afae-7809532be8a4\",\n      \"label\": \"label-1844\",\n      \"height\": 211,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"5b4c3bf3-0f9c-40e4-bc69-0c54b2fd6d4a\",\n      \"label\": \"label-1845\",\n      \"height\": 92,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"bf7595b0-1fdb-4e24-b0bf-925ea649f22e\",\n      \"label\": \"label-1846\",\n      \"height\": 254,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"d5a0879d-0f2c-4294-abbb-8ef92e32376d\",\n      \"label\": \"label-1847\",\n      \"height\": 329,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"752d90c5-e2ac-4b32-8c09-2ffb3f67c03d\",\n      \"label\": \"label-1848\",\n      \"height\": 380,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"00d1c06c-0aef-47ca-ad52-e61b1e31400d\",\n      \"label\": \"label-1849\",\n      \"height\": 444,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"7f0061e3-ab15-4b35-9193-d3cee33ff3f4\",\n      \"label\": \"label-1850\",\n      \"height\": 442,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"11d890c2-3b73-4b7f-a6f0-3242fa87559e\",\n      \"label\": \"label-1851\",\n      \"height\": 508,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"3b26c568-3b80-411d-8776-16ca80f173b6\",\n      \"label\": \"label-1852\",\n      \"height\": 164,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"026bacba-1e2d-426a-a218-5f5c39c8ed76\",\n      \"label\": \"label-1853\",\n      \"height\": 401,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"3ab117ff-b97e-499a-ae72-2e978c00706b\",\n      \"label\": \"label-1854\",\n      \"height\": 116,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"f1334fd5-6f34-4c1d-9824-767e41eee14a\",\n      \"label\": \"label-1855\",\n      \"height\": 392,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"97a54684-7d02-4682-b0f0-b9da8347d00d\",\n      \"label\": \"label-1856\",\n      \"height\": 60,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"d48de7e3-0208-441d-8160-66ac8f98efe8\",\n      \"label\": \"label-1857\",\n      \"height\": 287,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"3e101860-71e6-4a4d-8073-d307ce457ff2\",\n      \"label\": \"label-1858\",\n      \"height\": 137,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"e81e7bf8-0970-426a-a7c0-e356c8e0d3d8\",\n      \"label\": \"label-1859\",\n      \"height\": 481,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"0fc56590-24f4-4ea4-8c0d-ba787b91c4e6\",\n      \"label\": \"label-1860\",\n      \"height\": 127,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"79ca3415-b58e-4d01-af25-51b000544713\",\n      \"label\": \"label-1861\",\n      \"height\": 501,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"d3e9143b-a8d0-4c94-aff4-fd6ec81a3036\",\n      \"label\": \"label-1862\",\n      \"height\": 90,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"5e66fe80-ac58-453a-875c-f9ba0de1e29b\",\n      \"label\": \"label-1863\",\n      \"height\": 188,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"a584def6-6ca2-4f49-b0fe-f22a40354ab3\",\n      \"label\": \"label-1864\",\n      \"height\": 230,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"ef5b5b12-61ae-4c66-981f-4d17aee187a7\",\n      \"label\": \"label-1865\",\n      \"height\": 197,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"5b68363b-1348-4912-a72b-960878484bf1\",\n      \"label\": \"label-1866\",\n      \"height\": 326,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"087751e3-0035-40a3-9827-96bdc891f9fc\",\n      \"label\": \"label-1867\",\n      \"height\": 524,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"3c2b40cd-3934-4dd0-90df-b8c273fbf4da\",\n      \"label\": \"label-1868\",\n      \"height\": 455,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"19deb931-0dad-4a51-a75d-e4f80a01f9d9\",\n      \"label\": \"label-1869\",\n      \"height\": 488,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"3bab22ec-fa24-4a9b-8425-fe2da13e11d4\",\n      \"label\": \"label-1870\",\n      \"height\": 503,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"4b6fe79f-8a75-4d54-8bff-750c2ac88fb6\",\n      \"label\": \"label-1871\",\n      \"height\": 79,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"95bc171b-b91c-4213-9f12-7abc8b8776cb\",\n      \"label\": \"label-1872\",\n      \"height\": 67,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"3f99d109-0aa8-4d4d-8e96-0d5cd0109a07\",\n      \"label\": \"label-1873\",\n      \"height\": 214,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"f9df4536-fd97-4f4d-85ca-0b49d554bf75\",\n      \"label\": \"label-1874\",\n      \"height\": 368,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"0c687d1e-5bc3-4b32-a38a-674e0c028050\",\n      \"label\": \"label-1875\",\n      \"height\": 41,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"49ee8ae5-1595-4aae-9b6a-99b3773d61b0\",\n      \"label\": \"label-1876\",\n      \"height\": 181,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"b71bef98-0525-4ad8-bb72-a47b65348709\",\n      \"label\": \"label-1877\",\n      \"height\": 297,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"5ed4d0e9-3266-4081-9833-fc34795b8d9e\",\n      \"label\": \"label-1878\",\n      \"height\": 372,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"df09b95f-c50b-41ed-86bd-4988c623d085\",\n      \"label\": \"label-1879\",\n      \"height\": 192,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"6e4fd8e2-84b9-472a-80c4-8c5caa2cd319\",\n      \"label\": \"label-1880\",\n      \"height\": 42,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"f62ee370-297b-4879-a713-3e99f7e00694\",\n      \"label\": \"label-1881\",\n      \"height\": 142,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"e319420d-6568-4c1c-9dcb-9a9569594343\",\n      \"label\": \"label-1882\",\n      \"height\": 393,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"98f4c819-9025-4641-b140-f094e2206554\",\n      \"label\": \"label-1883\",\n      \"height\": 373,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"f1477edf-6a37-47ee-a272-26f666b84ac2\",\n      \"label\": \"label-1884\",\n      \"height\": 347,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"9407bb05-2803-4f9d-987e-3c9ad5740731\",\n      \"label\": \"label-1885\",\n      \"height\": 147,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"da118a41-6da2-43f9-8f69-1f1a51c566f8\",\n      \"label\": \"label-1886\",\n      \"height\": 127,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"0c724a44-2d9e-40e6-b374-d04476ec6f81\",\n      \"label\": \"label-1887\",\n      \"height\": 283,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"58d26f1c-e63f-439b-b2da-4ef58100e588\",\n      \"label\": \"label-1888\",\n      \"height\": 514,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"25350525-de53-40ef-b523-a667bdad7383\",\n      \"label\": \"label-1889\",\n      \"height\": 461,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"f10df613-d762-4b13-8221-2d71ce0b7d7c\",\n      \"label\": \"label-1890\",\n      \"height\": 142,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"95afba39-c8bd-40d3-9ee6-a1eb13ae367d\",\n      \"label\": \"label-1891\",\n      \"height\": 101,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"87417a5c-4439-40fe-a19e-3d7926e31724\",\n      \"label\": \"label-1892\",\n      \"height\": 41,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"a09779fb-5184-444c-9194-4dca1af82a07\",\n      \"label\": \"label-1893\",\n      \"height\": 217,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"6ea7cab8-95df-443b-a3ad-941d9e49b108\",\n      \"label\": \"label-1894\",\n      \"height\": 207,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"b9d2d76e-66f0-4ce0-ad50-939b597a9452\",\n      \"label\": \"label-1895\",\n      \"height\": 102,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"c7b4618f-cc1a-47be-aae3-9b628f6e758a\",\n      \"label\": \"label-1896\",\n      \"height\": 60,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"2ad9bf76-57ab-4202-a116-d9cd86b3ff80\",\n      \"label\": \"label-1897\",\n      \"height\": 456,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"4a2d14d5-8dbb-4f8a-b79c-6261d1495b80\",\n      \"label\": \"label-1898\",\n      \"height\": 487,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"9f78b120-4d5a-4e17-a741-2f9dc14ab9e3\",\n      \"label\": \"label-1899\",\n      \"height\": 357,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"ae75e01e-a70c-496b-a7b4-2d4fd447b6d8\",\n      \"label\": \"label-1900\",\n      \"height\": 334,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"0a67c049-53d6-4bc5-9c5f-ba0767c86a31\",\n      \"label\": \"label-1901\",\n      \"height\": 520,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"0cef204a-93e2-4a93-a5c5-8da839ab53cb\",\n      \"label\": \"label-1902\",\n      \"height\": 233,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"8b8b8668-b110-4208-9d89-cd5a91a81bf0\",\n      \"label\": \"label-1903\",\n      \"height\": 260,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"252dab3a-5dcc-47b8-97da-85fccd4019b4\",\n      \"label\": \"label-1904\",\n      \"height\": 154,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"5a2d8b1d-2940-4539-af3f-9caab5cbfaed\",\n      \"label\": \"label-1905\",\n      \"height\": 367,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"1206dff3-a94e-4d09-b24a-7bd007ba7b24\",\n      \"label\": \"label-1906\",\n      \"height\": 465,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"71f741bb-cde6-4c6d-b137-da2b04d95387\",\n      \"label\": \"label-1907\",\n      \"height\": 216,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"cdedcca3-0fbe-4e95-bb89-53a5dea564df\",\n      \"label\": \"label-1908\",\n      \"height\": 139,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"49bac804-6c48-43de-9a5d-e909bddbbf9b\",\n      \"label\": \"label-1909\",\n      \"height\": 310,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"d22a0431-ddea-431b-bab0-3b408e0608ac\",\n      \"label\": \"label-1910\",\n      \"height\": 197,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"4a303b5c-f37b-4a82-8267-e2d2cf30bd0f\",\n      \"label\": \"label-1911\",\n      \"height\": 318,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"b2dd66a5-d07c-42b2-a4a2-b092de63c4e8\",\n      \"label\": \"label-1912\",\n      \"height\": 365,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"17afa5a1-dc86-4e06-b93b-22899279b14d\",\n      \"label\": \"label-1913\",\n      \"height\": 102,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"6f66744e-52cf-491c-a75c-a70319d8392e\",\n      \"label\": \"label-1914\",\n      \"height\": 181,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"cc2b67e3-1f76-4f12-8971-728135bfef53\",\n      \"label\": \"label-1915\",\n      \"height\": 292,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"61412a18-8105-4e6f-83f4-18a61139a824\",\n      \"label\": \"label-1916\",\n      \"height\": 506,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"a4d10b02-faa2-4567-ad5e-3b79cd69f951\",\n      \"label\": \"label-1917\",\n      \"height\": 178,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"5564b142-35e0-4549-83c0-c991d3e6d4ee\",\n      \"label\": \"label-1918\",\n      \"height\": 210,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"5e9e3d98-a3ca-4c7c-87ed-834f6c7bbb97\",\n      \"label\": \"label-1919\",\n      \"height\": 224,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"fb213f37-2ae0-4ddf-a7b4-6bb3a997a8c3\",\n      \"label\": \"label-1920\",\n      \"height\": 127,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"fd91c1ee-14e0-4b51-a981-f01f42785da7\",\n      \"label\": \"label-1921\",\n      \"height\": 132,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"77f71b74-bb30-4399-96a4-b08455a613e1\",\n      \"label\": \"label-1922\",\n      \"height\": 509,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"b956fdd5-cb1d-4ae5-bf31-ee504f11f288\",\n      \"label\": \"label-1923\",\n      \"height\": 415,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"69c33971-8fe4-489c-93a6-080c930bbded\",\n      \"label\": \"label-1924\",\n      \"height\": 348,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"be153df7-742c-4261-b0a6-8daedc62991b\",\n      \"label\": \"label-1925\",\n      \"height\": 425,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"56756bd3-1733-47f8-bb4e-2b76b78ab36c\",\n      \"label\": \"label-1926\",\n      \"height\": 36,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"c14fb23d-6cf7-475a-8ec6-9533569c3e1d\",\n      \"label\": \"label-1927\",\n      \"height\": 331,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"7a00dea8-33ea-45e6-9987-ac0d5c2aae1a\",\n      \"label\": \"label-1928\",\n      \"height\": 365,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"6a997666-e8aa-4a76-84f2-2195d66f135e\",\n      \"label\": \"label-1929\",\n      \"height\": 484,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"4d55d2db-5720-4cd8-9e67-9b0b739b9920\",\n      \"label\": \"label-1930\",\n      \"height\": 398,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"947e53d7-db47-4a85-9f13-ca9c304b0393\",\n      \"label\": \"label-1931\",\n      \"height\": 474,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"3723b669-434b-4d20-99c8-e84b77af3324\",\n      \"label\": \"label-1932\",\n      \"height\": 220,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"04e0bfb5-7f27-4dbc-93e2-61e8157a81eb\",\n      \"label\": \"label-1933\",\n      \"height\": 397,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"85c1726b-9d25-4807-ba92-85ce1444826e\",\n      \"label\": \"label-1934\",\n      \"height\": 175,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"16f63d0a-187d-45c2-82f4-daa88a2c2798\",\n      \"label\": \"label-1935\",\n      \"height\": 192,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"e7243200-6454-4ef2-9bf4-7862cb0cd48e\",\n      \"label\": \"label-1936\",\n      \"height\": 33,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"bca2533a-adcc-43bf-abba-436e8a60d5fc\",\n      \"label\": \"label-1937\",\n      \"height\": 430,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"2906f1f3-5bf0-486f-8222-0735fa7bfff8\",\n      \"label\": \"label-1938\",\n      \"height\": 73,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"3a48c7ff-c7ab-4430-a784-e7ecfc1bf76d\",\n      \"label\": \"label-1939\",\n      \"height\": 478,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"f74b14c4-b901-42f1-85c0-7a3f4c53f966\",\n      \"label\": \"label-1940\",\n      \"height\": 196,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"53d31015-2adc-4ab5-a368-bf838aadafe4\",\n      \"label\": \"label-1941\",\n      \"height\": 337,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"c9e08142-b1ae-4d0f-ac68-6b3c7781a86a\",\n      \"label\": \"label-1942\",\n      \"height\": 296,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"07f7d850-fe79-4901-ac57-19811b6ebcaa\",\n      \"label\": \"label-1943\",\n      \"height\": 408,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"7379f747-a6e1-4ddb-9cb3-85e6c813bbfe\",\n      \"label\": \"label-1944\",\n      \"height\": 354,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"f7d03c8c-6a18-454b-a30f-3439ab4d0cd2\",\n      \"label\": \"label-1945\",\n      \"height\": 321,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"94a72d9e-ecc0-47e4-a484-1917a57df205\",\n      \"label\": \"label-1946\",\n      \"height\": 144,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"01653f9d-f239-406e-b1c8-798f3b5ffd14\",\n      \"label\": \"label-1947\",\n      \"height\": 405,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"30739a48-8892-446c-a654-b2c5e3211088\",\n      \"label\": \"label-1948\",\n      \"height\": 290,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"97a311a8-3778-4f92-980b-77df4215b81d\",\n      \"label\": \"label-1949\",\n      \"height\": 42,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"87fa4c43-323c-4ab4-ad9a-29796aa44a25\",\n      \"label\": \"label-1950\",\n      \"height\": 508,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"5005fd13-5d9f-4920-a3eb-c96843a8028e\",\n      \"label\": \"label-1951\",\n      \"height\": 333,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"9c176b7f-8592-4995-b655-bc0f5b40892c\",\n      \"label\": \"label-1952\",\n      \"height\": 321,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"83f44e3b-7047-4827-a038-97defff0877d\",\n      \"label\": \"label-1953\",\n      \"height\": 82,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"706e318c-88de-451f-a1c7-09adc64ca883\",\n      \"label\": \"label-1954\",\n      \"height\": 432,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"3ed591a3-e03d-48c9-9842-fddfd5ec73af\",\n      \"label\": \"label-1955\",\n      \"height\": 139,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"b5b774ab-294e-4ad6-9f39-4ebdcdcd63ea\",\n      \"label\": \"label-1956\",\n      \"height\": 36,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"1d16f94d-2783-4264-82ff-62900a80f3e6\",\n      \"label\": \"label-1957\",\n      \"height\": 377,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"c09d27fc-abe1-4dc2-93d7-00dcf08c4b7c\",\n      \"label\": \"label-1958\",\n      \"height\": 280,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"d30e28f9-c29c-4edb-b826-672230e3c78e\",\n      \"label\": \"label-1959\",\n      \"height\": 298,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"972f15bf-61b8-4344-a782-c845e82a3b58\",\n      \"label\": \"label-1960\",\n      \"height\": 460,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"7b7846cb-ff10-49b1-8eae-34db45dcfae1\",\n      \"label\": \"label-1961\",\n      \"height\": 437,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"3a0d257e-32ec-430d-9df9-9c3e01fe8bc2\",\n      \"label\": \"label-1962\",\n      \"height\": 235,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"e8b7d2c4-0dd6-4fba-b50a-c7569609e0ca\",\n      \"label\": \"label-1963\",\n      \"height\": 138,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"f6eba590-085c-4ee9-9e99-1660698ac682\",\n      \"label\": \"label-1964\",\n      \"height\": 133,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"0033fc3b-b226-49a7-98eb-bc088e85d0d5\",\n      \"label\": \"label-1965\",\n      \"height\": 383,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"02175b39-afe5-47a3-bf68-30a822996539\",\n      \"label\": \"label-1966\",\n      \"height\": 148,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"c6ab97da-5cde-4722-bb6c-a2c38afd304e\",\n      \"label\": \"label-1967\",\n      \"height\": 134,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"a6a1915b-5e7f-440b-83f0-b52051141333\",\n      \"label\": \"label-1968\",\n      \"height\": 476,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"9bf5d4d1-15bf-48be-a61b-5ae5341b4356\",\n      \"label\": \"label-1969\",\n      \"height\": 470,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"baea5221-4364-4cd1-9131-8c432634b2de\",\n      \"label\": \"label-1970\",\n      \"height\": 438,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"00466530-868e-4ac9-8857-3692f3c87ac2\",\n      \"label\": \"label-1971\",\n      \"height\": 499,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"ada4d4a7-3680-433d-aa10-f13f767619bf\",\n      \"label\": \"label-1972\",\n      \"height\": 189,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"399718c2-4900-4557-afe4-fe74b6ce6776\",\n      \"label\": \"label-1973\",\n      \"height\": 46,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"1cc65c2d-4a9e-4d9c-9e6e-5bec4aaf51be\",\n      \"label\": \"label-1974\",\n      \"height\": 367,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"b62dc317-060f-42d4-841d-e658e680d4bf\",\n      \"label\": \"label-1975\",\n      \"height\": 281,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"2e0912cf-f873-42f6-a5c7-a993ebdbbde4\",\n      \"label\": \"label-1976\",\n      \"height\": 304,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"98a5ca02-cde7-4716-b876-7e0121cd0f77\",\n      \"label\": \"label-1977\",\n      \"height\": 467,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"4a0b6ac2-2322-470e-babe-4611f26e1774\",\n      \"label\": \"label-1978\",\n      \"height\": 147,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"6cfd14a7-a821-4ac7-8b56-e6110b22401f\",\n      \"label\": \"label-1979\",\n      \"height\": 377,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"2f41f2c9-a9db-4475-8806-d3d0df85ee2a\",\n      \"label\": \"label-1980\",\n      \"height\": 290,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"b2d953ad-67a6-485c-bd9a-a0785f440eaa\",\n      \"label\": \"label-1981\",\n      \"height\": 202,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"a41e0d77-5fe6-4151-bbae-a38a1e8719d7\",\n      \"label\": \"label-1982\",\n      \"height\": 79,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"acda3b68-bccf-4b5c-872f-39d4a0d88ff6\",\n      \"label\": \"label-1983\",\n      \"height\": 139,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"0299fc09-cc3f-4883-832d-820394060fe0\",\n      \"label\": \"label-1984\",\n      \"height\": 178,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"5fc0c1a7-7386-4839-a05d-0f5cf3567750\",\n      \"label\": \"label-1985\",\n      \"height\": 502,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"10cb5fba-084e-40fa-a3ef-38db6ec4888c\",\n      \"label\": \"label-1986\",\n      \"height\": 234,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"33a67f4c-c53e-4305-8ada-c80a83c093d2\",\n      \"label\": \"label-1987\",\n      \"height\": 482,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"96e53bda-ba22-4d40-8cc4-5991e9ba9643\",\n      \"label\": \"label-1988\",\n      \"height\": 149,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"aa31fcb1-16d4-4846-8fc1-2ec5c921ffbf\",\n      \"label\": \"label-1989\",\n      \"height\": 222,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"e9f43342-ff84-48bc-a41f-6252a7cb9afa\",\n      \"label\": \"label-1990\",\n      \"height\": 505,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"494150f6-3f62-4b16-a195-cac9cb73f095\",\n      \"label\": \"label-1991\",\n      \"height\": 150,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"72f93542-1281-463c-9c38-028c88372142\",\n      \"label\": \"label-1992\",\n      \"height\": 117,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"4e486075-92b2-479f-b239-4d16c0c4aa9d\",\n      \"label\": \"label-1993\",\n      \"height\": 236,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"228daab5-fa2d-4bcd-b285-15e926157b7c\",\n      \"label\": \"label-1994\",\n      \"height\": 519,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"46663a1e-0fe9-428f-a2be-26ade29d0391\",\n      \"label\": \"label-1995\",\n      \"height\": 246,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"4f8e75c6-c99c-4e15-a72a-c514a6d52292\",\n      \"label\": \"label-1996\",\n      \"height\": 295,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"d21aba00-c7a7-4a3c-8bb4-97de1105003b\",\n      \"label\": \"label-1997\",\n      \"height\": 493,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"4706cb81-c010-4f6d-8d47-b234bfc30aaa\",\n      \"label\": \"label-1998\",\n      \"height\": 78,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"d30314c2-4540-4f6c-b5eb-1ed9ab75fa8f\",\n      \"label\": \"label-1999\",\n      \"height\": 64,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"e4eabddc-1c76-44c5-ad87-bfb4347b0ece\",\n      \"label\": \"label-2000\",\n      \"height\": 297,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"6be4bb41-b63f-46d9-819c-9b27130417a0\",\n      \"label\": \"label-2001\",\n      \"height\": 80,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"41fc7c18-807b-4234-ab0e-2f9c082e4f16\",\n      \"label\": \"label-2002\",\n      \"height\": 101,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"0f75b0af-d1c9-4c30-bbd8-5b06c87cd0bd\",\n      \"label\": \"label-2003\",\n      \"height\": 286,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"b5b3b96c-4017-4c4e-8cbd-47470afa546d\",\n      \"label\": \"label-2004\",\n      \"height\": 265,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"6c6d93af-ec37-417e-9738-01885f22d7fa\",\n      \"label\": \"label-2005\",\n      \"height\": 406,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"47fb746a-899f-4788-98c2-1534266cc98f\",\n      \"label\": \"label-2006\",\n      \"height\": 342,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"6c2805c5-70e1-4a34-acbd-44f86baf4090\",\n      \"label\": \"label-2007\",\n      \"height\": 517,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"a435faa0-7d3d-4b6f-9675-0ae2df10acfa\",\n      \"label\": \"label-2008\",\n      \"height\": 210,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"14f27f97-dfbd-469b-9ba3-06e959430daf\",\n      \"label\": \"label-2009\",\n      \"height\": 71,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"2f5fcacf-6b72-4f31-9a0f-a707435e9aab\",\n      \"label\": \"label-2010\",\n      \"height\": 107,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"cabdf393-3d8d-4a0c-985c-a46acc175d18\",\n      \"label\": \"label-2011\",\n      \"height\": 328,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"469983a5-b5c0-431a-b68e-a3f38060fc7d\",\n      \"label\": \"label-2012\",\n      \"height\": 447,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"7b98c019-2667-4ef6-a862-235bd4ed7089\",\n      \"label\": \"label-2013\",\n      \"height\": 532,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"f14417c3-32d3-4af6-830e-b0eed4386d3f\",\n      \"label\": \"label-2014\",\n      \"height\": 447,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"3758c440-a8c6-4d1f-a694-5cbd0278826f\",\n      \"label\": \"label-2015\",\n      \"height\": 396,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"a00d4b8c-ffd8-4849-8327-8134aff11f6d\",\n      \"label\": \"label-2016\",\n      \"height\": 257,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"f9dd7020-0029-4110-a68a-a4bd0bae719d\",\n      \"label\": \"label-2017\",\n      \"height\": 135,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"327796f1-bc69-4b22-8c1c-43cae9cf42a6\",\n      \"label\": \"label-2018\",\n      \"height\": 125,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"a342d8fc-e380-4ba5-b5e6-c7dcd844f1db\",\n      \"label\": \"label-2019\",\n      \"height\": 56,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"95d99a2c-bac4-4224-93c8-67fad1a90574\",\n      \"label\": \"label-2020\",\n      \"height\": 370,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"d64d9cab-494d-4b6f-89ee-c3f2f96ba423\",\n      \"label\": \"label-2021\",\n      \"height\": 322,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"993c55e1-a0ac-4026-b1ca-fe4846a26816\",\n      \"label\": \"label-2022\",\n      \"height\": 374,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"8f4961c8-47c9-444e-a03a-f9e4a81f02fc\",\n      \"label\": \"label-2023\",\n      \"height\": 211,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"36bd903f-8e28-4539-b378-3c1280cbdeb2\",\n      \"label\": \"label-2024\",\n      \"height\": 446,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"b43f31b0-c4ee-4d17-a521-ee2120e99c14\",\n      \"label\": \"label-2025\",\n      \"height\": 495,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"480ce06c-1cb3-4696-8dd3-6a79b4220076\",\n      \"label\": \"label-2026\",\n      \"height\": 185,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"961d8ebb-1afb-48e1-9a59-810fed084371\",\n      \"label\": \"label-2027\",\n      \"height\": 40,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"69e4e0c9-6ebd-47b3-b4b9-e180e9338df4\",\n      \"label\": \"label-2028\",\n      \"height\": 144,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"5700cac3-f7fb-45d5-872b-0caf68359fcf\",\n      \"label\": \"label-2029\",\n      \"height\": 497,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"3d492fdf-457a-4f86-959d-ba2b6b034641\",\n      \"label\": \"label-2030\",\n      \"height\": 177,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"1ce828c6-8cdd-4637-a0c9-44f4e2bd6f58\",\n      \"label\": \"label-2031\",\n      \"height\": 498,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"1fbf54e4-943d-41ff-b5bd-c61b749b063c\",\n      \"label\": \"label-2032\",\n      \"height\": 128,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"4c951448-2fed-426a-a930-39644cb3b1dc\",\n      \"label\": \"label-2033\",\n      \"height\": 324,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"f29280a7-f094-4622-8f0c-6002e8c15c7c\",\n      \"label\": \"label-2034\",\n      \"height\": 187,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"ffb42958-8756-472c-b580-be91200fc3a7\",\n      \"label\": \"label-2035\",\n      \"height\": 471,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"a0f9d648-36d6-40ab-9f8b-1a9b1a6bcda7\",\n      \"label\": \"label-2036\",\n      \"height\": 51,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"79e52468-622d-4fbc-9b7e-6abb995a4d07\",\n      \"label\": \"label-2037\",\n      \"height\": 103,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"4a86b68a-f27a-4559-b732-1671c4e9f3cb\",\n      \"label\": \"label-2038\",\n      \"height\": 238,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"16a5617f-3ec7-46fd-85b7-9c6f98a06f0d\",\n      \"label\": \"label-2039\",\n      \"height\": 144,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"6291bc33-e7a1-4820-9f03-a95189f31245\",\n      \"label\": \"label-2040\",\n      \"height\": 244,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"b8a194fb-cd85-4ec5-889d-f9b3f578a4e4\",\n      \"label\": \"label-2041\",\n      \"height\": 261,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"4aec9ac8-3270-4f6a-933c-80c8b2e0f23d\",\n      \"label\": \"label-2042\",\n      \"height\": 68,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"9e9d6349-4bc4-44b5-8f80-dbb8af93f0c9\",\n      \"label\": \"label-2043\",\n      \"height\": 158,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"e2d9ce6b-67c1-435d-b1a3-08ec6a19ebd9\",\n      \"label\": \"label-2044\",\n      \"height\": 259,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"418891b2-40a9-4621-be90-5927155d9127\",\n      \"label\": \"label-2045\",\n      \"height\": 521,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"b0273e1d-f727-498b-8995-4234644d893a\",\n      \"label\": \"label-2046\",\n      \"height\": 209,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"c4910c0d-ec8a-4056-aa59-ddcf1dc0a240\",\n      \"label\": \"label-2047\",\n      \"height\": 180,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"3df19bfa-5973-4bb0-9564-7ba956e901cd\",\n      \"label\": \"label-2048\",\n      \"height\": 316,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"89948986-f489-4e79-a7f4-8c6e42e0a4a3\",\n      \"label\": \"label-2049\",\n      \"height\": 495,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"b81069a8-6d17-4d5d-85ec-c2d91f8b26eb\",\n      \"label\": \"label-2050\",\n      \"height\": 235,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"cea8ea7c-0d18-4355-96e9-ad2f04d1ad20\",\n      \"label\": \"label-2051\",\n      \"height\": 507,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"aaaeebe5-b96d-4b26-9962-02b9be89ef7e\",\n      \"label\": \"label-2052\",\n      \"height\": 424,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"fbe6dfa9-4a90-44ce-b1ed-110dfc9b7a6a\",\n      \"label\": \"label-2053\",\n      \"height\": 414,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"645ed98f-670c-4019-9c1c-f619fb3ae8dd\",\n      \"label\": \"label-2054\",\n      \"height\": 509,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"4c22407f-5c0d-43a1-91a3-99eca8e6423e\",\n      \"label\": \"label-2055\",\n      \"height\": 175,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"dfe3509e-bf5a-4c14-a6a0-c72608133522\",\n      \"label\": \"label-2056\",\n      \"height\": 91,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"9eddf900-512e-4404-b39d-8d00a801b809\",\n      \"label\": \"label-2057\",\n      \"height\": 116,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"4a5c512b-afa1-4eaf-bc68-f75bc5e5e134\",\n      \"label\": \"label-2058\",\n      \"height\": 179,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"76893c9c-3636-4e78-ba86-71cf2d75c320\",\n      \"label\": \"label-2059\",\n      \"height\": 381,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"0ae0dd59-e40e-4fa4-8989-8fa571719000\",\n      \"label\": \"label-2060\",\n      \"height\": 271,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"d8b2f36f-5cb6-4b0f-b713-296c6673559b\",\n      \"label\": \"label-2061\",\n      \"height\": 378,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"338eb0a3-3253-45b6-88cf-33c2b4370115\",\n      \"label\": \"label-2062\",\n      \"height\": 472,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"f3dc048a-22a4-4f76-b38d-9640028d1aab\",\n      \"label\": \"label-2063\",\n      \"height\": 66,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"51141203-eed8-4db5-a6c0-33efa7eaec6c\",\n      \"label\": \"label-2064\",\n      \"height\": 296,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"0839a46c-1c7e-44c3-b6d5-8b65a642c819\",\n      \"label\": \"label-2065\",\n      \"height\": 311,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"6cc6dd25-6d91-48f5-8d9a-3da32ef078e1\",\n      \"label\": \"label-2066\",\n      \"height\": 437,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"2d0196f9-042a-4947-a9de-d84f04d79eed\",\n      \"label\": \"label-2067\",\n      \"height\": 296,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"afd54371-fffa-4f77-a612-215a8485fea0\",\n      \"label\": \"label-2068\",\n      \"height\": 400,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"ccee6225-7707-490d-ab3c-7bff156a20df\",\n      \"label\": \"label-2069\",\n      \"height\": 215,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"6bd81c12-771d-47e3-958f-d16e0d102736\",\n      \"label\": \"label-2070\",\n      \"height\": 66,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"78096dc4-0c5e-44dd-b50f-67b3040c35ce\",\n      \"label\": \"label-2071\",\n      \"height\": 180,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"b727a2f5-1c15-47e9-9733-7bc66cb2edfc\",\n      \"label\": \"label-2072\",\n      \"height\": 287,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"27d72394-7bdb-428e-a4e0-5182c33d711c\",\n      \"label\": \"label-2073\",\n      \"height\": 110,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"5f1bae87-f755-4eb1-a827-1c986246a9ce\",\n      \"label\": \"label-2074\",\n      \"height\": 125,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"4e2b9632-771e-43c3-aa47-2b85e04b548e\",\n      \"label\": \"label-2075\",\n      \"height\": 281,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"f972585b-a0b9-4d24-90cb-8f8cc3a4c395\",\n      \"label\": \"label-2076\",\n      \"height\": 437,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"34d6d3d7-2001-4e22-ac7c-65b5fec02cfb\",\n      \"label\": \"label-2077\",\n      \"height\": 200,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"877e79a4-d623-4ded-97b2-52c6715e1068\",\n      \"label\": \"label-2078\",\n      \"height\": 263,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"115ed4bd-4735-47e8-be05-37e223fcf05b\",\n      \"label\": \"label-2079\",\n      \"height\": 57,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"c67fe6c6-0fb3-4bc8-8444-c16fb3d051fd\",\n      \"label\": \"label-2080\",\n      \"height\": 501,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"6b5f5156-cf33-4030-9fd8-336b4cddb554\",\n      \"label\": \"label-2081\",\n      \"height\": 285,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"09d94b91-29a1-4d9b-ae89-87e477e6521b\",\n      \"label\": \"label-2082\",\n      \"height\": 387,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"9f055f3e-7c06-4dd0-b01a-3a79a71a6633\",\n      \"label\": \"label-2083\",\n      \"height\": 283,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"01b0f3d0-f9aa-4ce4-8b71-d5ae34089692\",\n      \"label\": \"label-2084\",\n      \"height\": 346,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"8d9c3446-a09f-4bf1-9610-f85745923d03\",\n      \"label\": \"label-2085\",\n      \"height\": 332,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"618bab1a-c67c-4210-b11a-d93a9e8be7b3\",\n      \"label\": \"label-2086\",\n      \"height\": 356,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"9d9d26dc-1910-45d3-82d1-3828bc3891a0\",\n      \"label\": \"label-2087\",\n      \"height\": 528,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"fb33c71e-f862-4b58-8201-7b305cada260\",\n      \"label\": \"label-2088\",\n      \"height\": 130,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"9307e924-5485-464e-ad99-57c38500fa40\",\n      \"label\": \"label-2089\",\n      \"height\": 260,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"5619ef22-3215-44d6-9452-a74b9789a3f7\",\n      \"label\": \"label-2090\",\n      \"height\": 62,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"595f4e96-7ce5-4e35-b96b-05708a6621b5\",\n      \"label\": \"label-2091\",\n      \"height\": 69,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"db159a7a-0a3b-4d09-9be0-3368c6749ae1\",\n      \"label\": \"label-2092\",\n      \"height\": 448,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"72f8f979-14df-47a5-94eb-2b8f7f2e4f6c\",\n      \"label\": \"label-2093\",\n      \"height\": 91,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"236aef9a-4b84-4a4a-84c3-57f109a33d3f\",\n      \"label\": \"label-2094\",\n      \"height\": 35,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"00bac130-3d38-4623-b615-047759814293\",\n      \"label\": \"label-2095\",\n      \"height\": 104,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"5bb2868e-410d-4dd0-add5-4f1c4fecc310\",\n      \"label\": \"label-2096\",\n      \"height\": 196,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"243bbb3e-8be5-4529-a882-0530d59a653b\",\n      \"label\": \"label-2097\",\n      \"height\": 301,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"4afdd700-e55f-4fdc-a6de-75cd27abd05c\",\n      \"label\": \"label-2098\",\n      \"height\": 341,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"ef19be22-08a0-4352-9dc0-10fd4b7946e3\",\n      \"label\": \"label-2099\",\n      \"height\": 105,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"ed263fac-f28e-44d4-b337-82092ae287bb\",\n      \"label\": \"label-2100\",\n      \"height\": 456,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"e195b943-a86f-4e43-acde-95c2b3f326be\",\n      \"label\": \"label-2101\",\n      \"height\": 33,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"a4aef808-4ae5-40e8-ba9c-dbcf94720f3d\",\n      \"label\": \"label-2102\",\n      \"height\": 223,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"2c7e4ed9-0d93-41d0-b9f0-0f528353ee5e\",\n      \"label\": \"label-2103\",\n      \"height\": 186,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"8ccae972-c31a-41e4-93f2-296a10e8603c\",\n      \"label\": \"label-2104\",\n      \"height\": 361,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"af75c0ec-3c55-464e-9c5e-ea79c03e54e2\",\n      \"label\": \"label-2105\",\n      \"height\": 398,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"7efddf76-a377-4b50-aa7f-619b670f9dbc\",\n      \"label\": \"label-2106\",\n      \"height\": 252,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"c94939af-cf92-4e30-a6a8-aa62e6159fda\",\n      \"label\": \"label-2107\",\n      \"height\": 214,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"364f206d-78db-4109-b2f6-e7917d03e4f5\",\n      \"label\": \"label-2108\",\n      \"height\": 398,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"c325bb9d-ded8-40fc-9430-faeb57797569\",\n      \"label\": \"label-2109\",\n      \"height\": 347,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"2c48e5f1-89f6-400d-8f07-6b16ab3fc59a\",\n      \"label\": \"label-2110\",\n      \"height\": 38,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"d1b67bc8-439f-47a3-b760-dc206264abc3\",\n      \"label\": \"label-2111\",\n      \"height\": 486,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"f259ed45-8f84-44ce-bc3e-9b527fd91e83\",\n      \"label\": \"label-2112\",\n      \"height\": 82,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"56d51d60-68ea-4e32-aa04-d3b312a010d1\",\n      \"label\": \"label-2113\",\n      \"height\": 35,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"f419137e-994b-4b68-b657-53c7ef26801f\",\n      \"label\": \"label-2114\",\n      \"height\": 196,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"e87298ac-797c-46a6-bc82-883f1d488429\",\n      \"label\": \"label-2115\",\n      \"height\": 265,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"43fa044b-997b-44f3-a430-2800118d22ca\",\n      \"label\": \"label-2116\",\n      \"height\": 231,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"8bf4f0a9-c248-4b03-a11f-0160faf3bf14\",\n      \"label\": \"label-2117\",\n      \"height\": 56,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"6e0c9902-b704-471e-931c-dbcea5ea49e9\",\n      \"label\": \"label-2118\",\n      \"height\": 220,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"8cbce23c-c2a5-4426-b332-f6ff96746d0d\",\n      \"label\": \"label-2119\",\n      \"height\": 494,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"cd9bf946-d0f2-4f56-8893-7e2cf148c036\",\n      \"label\": \"label-2120\",\n      \"height\": 388,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"0d7414fe-f138-46b3-a1dd-0e2fc0b207e6\",\n      \"label\": \"label-2121\",\n      \"height\": 138,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"bbd8f946-6a0f-4315-9d8b-d38198d52860\",\n      \"label\": \"label-2122\",\n      \"height\": 211,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"6fbfb16f-7d8c-484c-9e1d-cfae5761b174\",\n      \"label\": \"label-2123\",\n      \"height\": 391,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"9412639d-46b8-41bb-a95c-f3f06851b7e7\",\n      \"label\": \"label-2124\",\n      \"height\": 146,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"4ceb7e70-d708-497c-8b4a-a6c932da2073\",\n      \"label\": \"label-2125\",\n      \"height\": 392,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"4cd43edc-8733-490b-a113-df7470c2f2ce\",\n      \"label\": \"label-2126\",\n      \"height\": 280,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"7067dffa-6b83-47e8-a365-72a07f107ac8\",\n      \"label\": \"label-2127\",\n      \"height\": 96,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"b74bf16c-4b83-497d-bc12-30e0c2d2a865\",\n      \"label\": \"label-2128\",\n      \"height\": 426,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"076d4adc-7fb0-4b3f-95dd-3e4d30d8db47\",\n      \"label\": \"label-2129\",\n      \"height\": 225,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"daf270de-75d8-49e0-9f4f-5a265a9e6d43\",\n      \"label\": \"label-2130\",\n      \"height\": 162,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"3878b1ab-b06f-4aa6-ac9d-ad52ac1548d1\",\n      \"label\": \"label-2131\",\n      \"height\": 309,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"69a181ff-7239-4d9e-af98-ec4e72fcd7f9\",\n      \"label\": \"label-2132\",\n      \"height\": 241,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"d6f41063-d81d-4736-8045-fc023ae03c1e\",\n      \"label\": \"label-2133\",\n      \"height\": 148,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"18871f56-8312-446c-9510-09518548b201\",\n      \"label\": \"label-2134\",\n      \"height\": 456,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"7f2ea8ef-c8b0-4c48-8f5c-8815d8e1be91\",\n      \"label\": \"label-2135\",\n      \"height\": 438,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"3983a87f-3dcf-44ac-a697-c8dfb1f40964\",\n      \"label\": \"label-2136\",\n      \"height\": 477,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"8739d39f-5e5b-4dfb-982b-2b24433163a8\",\n      \"label\": \"label-2137\",\n      \"height\": 418,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"369ae2dd-e1c9-4a04-ac6c-0ee5a112d754\",\n      \"label\": \"label-2138\",\n      \"height\": 149,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"bf2b599c-4e23-4c9a-a95e-7f64fd33248e\",\n      \"label\": \"label-2139\",\n      \"height\": 447,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"0f26422d-a9df-4ff1-872e-2260e428ce6f\",\n      \"label\": \"label-2140\",\n      \"height\": 77,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"418ac87f-91b9-4f9c-89dc-facf4453d357\",\n      \"label\": \"label-2141\",\n      \"height\": 124,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"f860f846-2724-413f-83e3-8b5c6bad1a54\",\n      \"label\": \"label-2142\",\n      \"height\": 317,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"e5160beb-e151-48df-a12c-843437266237\",\n      \"label\": \"label-2143\",\n      \"height\": 227,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"82e9a7eb-59d3-445b-8057-594aefbf8282\",\n      \"label\": \"label-2144\",\n      \"height\": 93,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"91f56deb-52c2-43b0-81f7-b2893952bb68\",\n      \"label\": \"label-2145\",\n      \"height\": 180,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"a36b4c96-950d-4740-bbff-a179a2d875e5\",\n      \"label\": \"label-2146\",\n      \"height\": 91,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"4d0bbc1e-a7a3-45d4-addb-4c2358fab87f\",\n      \"label\": \"label-2147\",\n      \"height\": 156,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"b11ff2cb-7bc2-4b18-a693-01a250f304d8\",\n      \"label\": \"label-2148\",\n      \"height\": 39,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"38b2eff5-e7c6-4afc-b440-6c63c55a8ae4\",\n      \"label\": \"label-2149\",\n      \"height\": 78,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"cca90423-4773-4992-a1fb-cfc83c665258\",\n      \"label\": \"label-2150\",\n      \"height\": 287,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"114459e3-1f89-45a7-a196-6fd2eed60705\",\n      \"label\": \"label-2151\",\n      \"height\": 525,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"511c50a2-3888-4264-8597-ae169c90b92c\",\n      \"label\": \"label-2152\",\n      \"height\": 443,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"de658b2b-2d16-45f4-b783-01fd1088d748\",\n      \"label\": \"label-2153\",\n      \"height\": 337,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"b876c8a1-d048-4334-b824-33bf04f3514d\",\n      \"label\": \"label-2154\",\n      \"height\": 531,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"485e89fe-0e00-4018-9445-8584a0e9eed4\",\n      \"label\": \"label-2155\",\n      \"height\": 72,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"99a43fd6-e2da-4a60-9337-36cbe8f244ad\",\n      \"label\": \"label-2156\",\n      \"height\": 121,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"f9b1ff56-dc28-408d-ad4a-a0b61565c666\",\n      \"label\": \"label-2157\",\n      \"height\": 455,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"26541308-d91e-475c-86c6-884186b42ca2\",\n      \"label\": \"label-2158\",\n      \"height\": 461,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"2c556044-0f56-4737-9635-521cc5043b40\",\n      \"label\": \"label-2159\",\n      \"height\": 437,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"1cdc7c63-97f8-4a81-9879-26f6e007056f\",\n      \"label\": \"label-2160\",\n      \"height\": 517,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"249c51d6-c666-4af2-8435-88fdd437f2f2\",\n      \"label\": \"label-2161\",\n      \"height\": 133,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"0073934c-f705-4c35-b550-b0d338549ba6\",\n      \"label\": \"label-2162\",\n      \"height\": 332,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"025353cd-0fb2-4bdd-9298-bf03ddb07949\",\n      \"label\": \"label-2163\",\n      \"height\": 96,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"e8c570b1-d349-4696-a45f-2c8eb693d78a\",\n      \"label\": \"label-2164\",\n      \"height\": 454,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"0beda377-e612-4e90-81bb-ddd69d310cc6\",\n      \"label\": \"label-2165\",\n      \"height\": 445,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"9de298d2-6066-4e4f-b664-972dc9efe0c1\",\n      \"label\": \"label-2166\",\n      \"height\": 316,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"d873c71c-38ee-41bb-9f65-b10d6f24529a\",\n      \"label\": \"label-2167\",\n      \"height\": 251,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"f5ac6e30-7e3e-4f3d-9d6a-391461fb0a34\",\n      \"label\": \"label-2168\",\n      \"height\": 299,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"7699a606-a2c5-4b1f-b16b-56fcda576601\",\n      \"label\": \"label-2169\",\n      \"height\": 365,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"a0b40428-e46b-447e-87ff-be6aa509d4de\",\n      \"label\": \"label-2170\",\n      \"height\": 93,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"e9cb440f-540f-4429-bf62-bce7cdab836c\",\n      \"label\": \"label-2171\",\n      \"height\": 33,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"7dbf8eb0-2523-4d09-9f79-fe8e5ccf690b\",\n      \"label\": \"label-2172\",\n      \"height\": 364,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"e79e2d6a-a2a4-4ac0-adc1-b4b1dcdaf222\",\n      \"label\": \"label-2173\",\n      \"height\": 270,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"f69c2f37-07bd-4b01-9c0e-c0f438d65374\",\n      \"label\": \"label-2174\",\n      \"height\": 187,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"81c8b3da-32c9-4ab6-b566-f4253b213491\",\n      \"label\": \"label-2175\",\n      \"height\": 119,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"21558e35-ea2d-45e4-b39d-59b10150fd1e\",\n      \"label\": \"label-2176\",\n      \"height\": 233,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"846d80d7-e61e-4030-b421-32188350af76\",\n      \"label\": \"label-2177\",\n      \"height\": 447,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"95317f61-7eef-4ed4-9fc8-35144d82dade\",\n      \"label\": \"label-2178\",\n      \"height\": 491,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"78fe78a9-cc00-43f4-872f-a3a50b49224b\",\n      \"label\": \"label-2179\",\n      \"height\": 465,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"4f1d5d4e-9839-47ad-9350-9dad6a3ace77\",\n      \"label\": \"label-2180\",\n      \"height\": 473,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"39cad921-6dd2-4070-952e-e8aeb274b5e1\",\n      \"label\": \"label-2181\",\n      \"height\": 390,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"cad0769c-0f05-43cb-a3a2-eb2b2029409b\",\n      \"label\": \"label-2182\",\n      \"height\": 416,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"29f8da28-cb02-4358-8b6f-4170da717152\",\n      \"label\": \"label-2183\",\n      \"height\": 350,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"8c56f98b-74c0-4cbc-932c-e02b49266bf5\",\n      \"label\": \"label-2184\",\n      \"height\": 435,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"1d89ee88-05e5-46e3-85f2-050e9a8603a6\",\n      \"label\": \"label-2185\",\n      \"height\": 156,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"ceb1113f-edeb-4b64-95e5-efc9fb3416a2\",\n      \"label\": \"label-2186\",\n      \"height\": 417,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"13445124-1e8f-4c49-87ea-5f336c02388e\",\n      \"label\": \"label-2187\",\n      \"height\": 332,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"a6e7bb9b-cd33-46f3-ad02-c658e1821b75\",\n      \"label\": \"label-2188\",\n      \"height\": 144,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"4964ef89-fcb5-43ea-a439-af48a6272fe0\",\n      \"label\": \"label-2189\",\n      \"height\": 145,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"6309476b-e610-4803-9274-8fe81ef96747\",\n      \"label\": \"label-2190\",\n      \"height\": 395,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"d70fc04c-a681-4f28-b644-5bb9e3257fd7\",\n      \"label\": \"label-2191\",\n      \"height\": 210,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"2ec752cb-62df-4793-ad6a-5740c0d31912\",\n      \"label\": \"label-2192\",\n      \"height\": 232,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"5ee27d08-31dd-44d4-8568-6796b0bb621a\",\n      \"label\": \"label-2193\",\n      \"height\": 102,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"4b702b72-8d6e-4cc4-b827-9c2f1d29eaa7\",\n      \"label\": \"label-2194\",\n      \"height\": 211,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"c1c009bb-9dbe-4a62-9476-e4f37224772e\",\n      \"label\": \"label-2195\",\n      \"height\": 280,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"2254374d-5993-4585-b058-748451753b27\",\n      \"label\": \"label-2196\",\n      \"height\": 261,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"239028fa-a7b9-4b10-9bed-1dbc7ba79931\",\n      \"label\": \"label-2197\",\n      \"height\": 121,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"dfa1016b-b106-411a-867b-b2f8188dca92\",\n      \"label\": \"label-2198\",\n      \"height\": 270,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"2bc25548-fdb8-4790-a096-9784784a899f\",\n      \"label\": \"label-2199\",\n      \"height\": 531,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"719fe3af-1bdc-467f-a2fc-ef1374c847a9\",\n      \"label\": \"label-2200\",\n      \"height\": 530,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"f6c5d67e-5ff1-4100-a740-9df1454f7f30\",\n      \"label\": \"label-2201\",\n      \"height\": 520,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"1a926011-c962-4083-ae5c-49cd39a7bbc9\",\n      \"label\": \"label-2202\",\n      \"height\": 292,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"5ae8ef57-83b4-40c9-802c-d6921aeb256c\",\n      \"label\": \"label-2203\",\n      \"height\": 68,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"725ee1f3-63ad-4c86-b644-c5dcf137c385\",\n      \"label\": \"label-2204\",\n      \"height\": 463,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"e05ca9fa-fb18-4385-826c-e53120af3722\",\n      \"label\": \"label-2205\",\n      \"height\": 131,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"3aa1988a-aecf-4b0f-90c2-f1a930cc10d7\",\n      \"label\": \"label-2206\",\n      \"height\": 337,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"2a446f3c-3d14-4718-866a-a42959cee001\",\n      \"label\": \"label-2207\",\n      \"height\": 37,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"348d3306-9d09-4c14-95fd-e3fb63033138\",\n      \"label\": \"label-2208\",\n      \"height\": 73,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"533abfee-b11d-4333-9abc-ec44b93742b0\",\n      \"label\": \"label-2209\",\n      \"height\": 479,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"591608c9-89d9-4137-bb84-de047a3f51ea\",\n      \"label\": \"label-2210\",\n      \"height\": 365,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"f8109267-131f-4584-9122-257f81157c23\",\n      \"label\": \"label-2211\",\n      \"height\": 296,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"e389d75e-597a-4418-916c-4d8e621ae9cc\",\n      \"label\": \"label-2212\",\n      \"height\": 268,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"41227a0c-5dd5-4ba7-bc5a-5af9a75bf7ef\",\n      \"label\": \"label-2213\",\n      \"height\": 458,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"6eecd3a4-0484-4e55-b9fc-388135a6cfb6\",\n      \"label\": \"label-2214\",\n      \"height\": 347,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"0c17fe5e-c773-4e7c-9229-2b085ba7c0af\",\n      \"label\": \"label-2215\",\n      \"height\": 155,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"d23020ac-45ce-4a7f-83c5-328d4234dc0a\",\n      \"label\": \"label-2216\",\n      \"height\": 414,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"a3663170-9e43-43e9-8de3-23d2369ddb46\",\n      \"label\": \"label-2217\",\n      \"height\": 365,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"c8edba0d-718d-43fc-9358-32e1334be54d\",\n      \"label\": \"label-2218\",\n      \"height\": 265,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"8c09060b-1763-4a8f-b5bc-0c97799a24ba\",\n      \"label\": \"label-2219\",\n      \"height\": 90,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"9c7e6a3b-6c3e-4988-8f67-0ea9af7da8f8\",\n      \"label\": \"label-2220\",\n      \"height\": 93,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"d84c8bb4-4eeb-4d17-9151-9e58f53850f2\",\n      \"label\": \"label-2221\",\n      \"height\": 402,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"8b494074-7e02-4f61-82ea-a673748c63b6\",\n      \"label\": \"label-2222\",\n      \"height\": 365,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"cf1eeb97-87d6-42ad-a84b-a9dc6070224d\",\n      \"label\": \"label-2223\",\n      \"height\": 195,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"ab2df971-08ae-46f1-a4e4-e53265cba71d\",\n      \"label\": \"label-2224\",\n      \"height\": 119,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"6af96775-2aac-45e9-8e74-95dea87e2dab\",\n      \"label\": \"label-2225\",\n      \"height\": 209,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"6b2fd5f8-33f8-4c2e-ad20-4f405a321223\",\n      \"label\": \"label-2226\",\n      \"height\": 352,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"3cca2092-aa09-4158-99dc-1d3c3f88fe7a\",\n      \"label\": \"label-2227\",\n      \"height\": 442,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"5cc56672-f1e7-4a79-ab71-1ed068e1fc75\",\n      \"label\": \"label-2228\",\n      \"height\": 343,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"daff29c8-93bc-4728-bf19-d51e89961871\",\n      \"label\": \"label-2229\",\n      \"height\": 496,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"20ba88e8-984f-420a-8779-bfd62ae4cd2d\",\n      \"label\": \"label-2230\",\n      \"height\": 468,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"f03408fe-9d4f-434a-b2f2-651f256bf9ab\",\n      \"label\": \"label-2231\",\n      \"height\": 481,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"e590eea7-649e-4d7d-8a8f-ad37cd5145cc\",\n      \"label\": \"label-2232\",\n      \"height\": 53,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"8500fa33-154f-47c7-8129-4677e7688150\",\n      \"label\": \"label-2233\",\n      \"height\": 189,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"cf4422cb-eac9-48d9-9fc4-5ebed1d4a5fc\",\n      \"label\": \"label-2234\",\n      \"height\": 380,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"25577d90-4c27-43c9-b40a-736c0286bcf9\",\n      \"label\": \"label-2235\",\n      \"height\": 177,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"6b27c43a-f24b-4c79-bb4f-d96c81844eaa\",\n      \"label\": \"label-2236\",\n      \"height\": 446,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"f4837bb7-cd1d-467c-90e4-89f7721d0d79\",\n      \"label\": \"label-2237\",\n      \"height\": 269,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"8cfb77f2-3226-4606-9ba8-1321a5bde831\",\n      \"label\": \"label-2238\",\n      \"height\": 314,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"6804c350-275e-43c8-8777-9ac197266873\",\n      \"label\": \"label-2239\",\n      \"height\": 310,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"a7c4c57f-bac9-4323-8524-34194aa036ed\",\n      \"label\": \"label-2240\",\n      \"height\": 431,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"af6f9b66-069d-4631-a8e1-62d9f084cc8d\",\n      \"label\": \"label-2241\",\n      \"height\": 395,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"aa57f703-65b5-4bea-9151-e3b7be7b9310\",\n      \"label\": \"label-2242\",\n      \"height\": 160,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"cd05faa1-31b5-4147-afb3-318e97ae0cd3\",\n      \"label\": \"label-2243\",\n      \"height\": 465,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"1fb6f626-89a6-46da-9344-a09e9ee33dab\",\n      \"label\": \"label-2244\",\n      \"height\": 455,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"6c59433c-6d50-4b57-b1d6-0c3aa31c93b0\",\n      \"label\": \"label-2245\",\n      \"height\": 314,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"0b977dd1-a03a-4171-b028-af65fa8c5f9b\",\n      \"label\": \"label-2246\",\n      \"height\": 261,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"704a4c62-e4c2-4c87-80cd-b536f480e5ae\",\n      \"label\": \"label-2247\",\n      \"height\": 74,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"ce5c464b-4110-46c2-89ae-d1c8f4fb724b\",\n      \"label\": \"label-2248\",\n      \"height\": 114,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"e72ad0c5-cf99-4345-94af-fa18a2ec74e9\",\n      \"label\": \"label-2249\",\n      \"height\": 522,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"a96ecb27-55b5-4c05-ad92-38aa80b3bc28\",\n      \"label\": \"label-2250\",\n      \"height\": 127,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"21f7f4a8-cd69-4fba-b144-67642eca6369\",\n      \"label\": \"label-2251\",\n      \"height\": 307,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"5b28bfd3-9035-4734-80ed-877891f0799e\",\n      \"label\": \"label-2252\",\n      \"height\": 476,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"9d7099df-41ed-45b3-b065-462301d6f839\",\n      \"label\": \"label-2253\",\n      \"height\": 59,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"edbb1343-3392-419f-b5c6-2afba6f904e4\",\n      \"label\": \"label-2254\",\n      \"height\": 363,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"18bdc874-c4b8-4a6c-bbe7-82823f971e41\",\n      \"label\": \"label-2255\",\n      \"height\": 423,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"9b004eed-1223-4986-bbbf-68297d50cdea\",\n      \"label\": \"label-2256\",\n      \"height\": 63,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"2339c197-ccce-43cf-bc23-cff05e1f0446\",\n      \"label\": \"label-2257\",\n      \"height\": 58,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"cc95feef-af95-470d-b68f-1993768d2d79\",\n      \"label\": \"label-2258\",\n      \"height\": 484,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"24b08197-5185-4491-85b2-1e1eda2e5149\",\n      \"label\": \"label-2259\",\n      \"height\": 479,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"19222e2c-8073-4941-a8ba-3fbfdd2885ea\",\n      \"label\": \"label-2260\",\n      \"height\": 336,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"50dd85c0-fa06-42e4-9a26-9dde7c16f655\",\n      \"label\": \"label-2261\",\n      \"height\": 464,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"c4c273b8-e38e-421c-aa42-2510536c35d9\",\n      \"label\": \"label-2262\",\n      \"height\": 485,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"58a8b4fa-f3f8-4396-bfac-1e033719ff4e\",\n      \"label\": \"label-2263\",\n      \"height\": 106,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"2481ff40-967f-458a-acd3-a6022f98a0ed\",\n      \"label\": \"label-2264\",\n      \"height\": 236,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"2a9d7a1d-9c13-428b-a8da-3e1659c6788e\",\n      \"label\": \"label-2265\",\n      \"height\": 118,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"afc352f4-45bc-4567-bad6-f123814748c6\",\n      \"label\": \"label-2266\",\n      \"height\": 266,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"483b036f-e784-40d4-903d-86bd7fe727ab\",\n      \"label\": \"label-2267\",\n      \"height\": 96,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"420e7eca-37e1-4550-b0ad-74492695ce30\",\n      \"label\": \"label-2268\",\n      \"height\": 234,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"06a0fcc9-8a9c-422e-93df-745688081eb6\",\n      \"label\": \"label-2269\",\n      \"height\": 338,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"75e9d386-7b25-4191-a9fb-c0eb5453fdf7\",\n      \"label\": \"label-2270\",\n      \"height\": 83,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"80768364-4817-4a61-b1fd-07d406fe462d\",\n      \"label\": \"label-2271\",\n      \"height\": 317,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"342e79da-dd7d-453d-8c0e-b2febc24bea2\",\n      \"label\": \"label-2272\",\n      \"height\": 354,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"49ebeabf-ee63-4086-a607-25d3655334b5\",\n      \"label\": \"label-2273\",\n      \"height\": 508,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"555b2b67-4cf0-4709-96f2-a85b24536fbd\",\n      \"label\": \"label-2274\",\n      \"height\": 213,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"b5483948-1142-4ea2-8419-b7c96e98835d\",\n      \"label\": \"label-2275\",\n      \"height\": 379,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"41e83017-df1b-4269-96bc-1a01044dfed6\",\n      \"label\": \"label-2276\",\n      \"height\": 88,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"d93d1cac-75ed-4557-b260-8a6d5eb2f2ff\",\n      \"label\": \"label-2277\",\n      \"height\": 155,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"9a2ff739-06d9-4ba9-a369-c71e0046992a\",\n      \"label\": \"label-2278\",\n      \"height\": 50,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"cc9edb5b-9a95-401d-ad93-fca5a339481c\",\n      \"label\": \"label-2279\",\n      \"height\": 425,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"a1d4e80c-da48-47e4-85b6-d2d7ba083b08\",\n      \"label\": \"label-2280\",\n      \"height\": 150,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"fc858631-e540-46d5-8d56-ce7a1776a119\",\n      \"label\": \"label-2281\",\n      \"height\": 257,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"97ae19a3-439f-4fb8-a415-137dafffdde4\",\n      \"label\": \"label-2282\",\n      \"height\": 82,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"57eae3d6-29d6-49e0-86ae-1414ef6fcbca\",\n      \"label\": \"label-2283\",\n      \"height\": 295,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"b8426add-84db-4b86-b02b-33085d2b7c80\",\n      \"label\": \"label-2284\",\n      \"height\": 459,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"8406f423-091c-4837-94eb-198a58d67eec\",\n      \"label\": \"label-2285\",\n      \"height\": 123,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"b024cbd6-4c8f-41b2-b931-47641f564f36\",\n      \"label\": \"label-2286\",\n      \"height\": 498,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"76ea081e-5f55-4a80-9d2e-f8ae6dcea3cd\",\n      \"label\": \"label-2287\",\n      \"height\": 307,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"efad0a83-0e68-4e99-8963-f836cf90fb83\",\n      \"label\": \"label-2288\",\n      \"height\": 241,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"7456f0aa-bd86-4ff0-b797-685de9c42051\",\n      \"label\": \"label-2289\",\n      \"height\": 87,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"96f10813-0704-4486-a675-90f09a9ed670\",\n      \"label\": \"label-2290\",\n      \"height\": 347,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"ed98b690-1717-4043-bec2-25ecaef08760\",\n      \"label\": \"label-2291\",\n      \"height\": 419,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"5d0b34b4-26dc-4dd8-baee-30fbd6d3a66b\",\n      \"label\": \"label-2292\",\n      \"height\": 86,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"e613dbc5-aa53-4f19-8aa9-178376bf5ec6\",\n      \"label\": \"label-2293\",\n      \"height\": 309,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"f343f6ab-9eb9-4024-98c1-a6f9f6d500ff\",\n      \"label\": \"label-2294\",\n      \"height\": 111,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"47b0b647-34ed-4f14-b306-0bfe1f7d46e2\",\n      \"label\": \"label-2295\",\n      \"height\": 447,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"2c2d80e6-64f8-41a9-9f51-8adbb9d46ead\",\n      \"label\": \"label-2296\",\n      \"height\": 531,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"a60818f6-266c-49fd-a8f9-15b64283f90b\",\n      \"label\": \"label-2297\",\n      \"height\": 457,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"5386c765-8330-47ab-b31f-037eee0ecbd2\",\n      \"label\": \"label-2298\",\n      \"height\": 192,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"6ba1707b-2f9d-429a-9ca3-29b1d75a9c7d\",\n      \"label\": \"label-2299\",\n      \"height\": 191,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"56e89e3a-1823-4fd1-830e-6ada71b85802\",\n      \"label\": \"label-2300\",\n      \"height\": 205,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"67c21d69-f38d-4f09-9eba-20bc8470ca9e\",\n      \"label\": \"label-2301\",\n      \"height\": 158,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"7100db4f-4b03-4519-a77c-113f78aeda4b\",\n      \"label\": \"label-2302\",\n      \"height\": 491,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"b4f75d55-3c80-4e8c-9214-b9bfeaf98c3b\",\n      \"label\": \"label-2303\",\n      \"height\": 335,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"1fae7d14-b625-4bdb-8d3c-99c9e15e5fc8\",\n      \"label\": \"label-2304\",\n      \"height\": 438,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"6a3b309e-778c-4037-a91e-d747eb9d3d64\",\n      \"label\": \"label-2305\",\n      \"height\": 115,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"2abd8151-da22-409e-b3a7-237e285d9533\",\n      \"label\": \"label-2306\",\n      \"height\": 508,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"5e462d31-e0b0-4e46-9cfd-816ce915d10e\",\n      \"label\": \"label-2307\",\n      \"height\": 413,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"ada80472-ed87-40df-b875-573bfb9e44fa\",\n      \"label\": \"label-2308\",\n      \"height\": 462,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"2ec3cfac-6753-4c4f-a64c-04b691f9e693\",\n      \"label\": \"label-2309\",\n      \"height\": 413,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"340783b4-5f1a-42ee-82b4-01f7823f514d\",\n      \"label\": \"label-2310\",\n      \"height\": 281,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"2fecd78f-0df3-4054-80d9-27f52336a390\",\n      \"label\": \"label-2311\",\n      \"height\": 223,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"fcb312e9-73f3-4746-a4bd-01cdf665fa3b\",\n      \"label\": \"label-2312\",\n      \"height\": 205,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"c022d1bb-0dc6-4d25-a1ba-afe3fd3b1c3b\",\n      \"label\": \"label-2313\",\n      \"height\": 179,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"b9aef2a9-b19b-448c-867c-e49966db4f8c\",\n      \"label\": \"label-2314\",\n      \"height\": 257,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"b995cf84-4d52-4ec3-b8d3-fb80cba170a8\",\n      \"label\": \"label-2315\",\n      \"height\": 157,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"d570468b-e130-4f95-a5c3-63799df7697b\",\n      \"label\": \"label-2316\",\n      \"height\": 529,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"201edc34-c468-473b-9cee-a29f01dab6b6\",\n      \"label\": \"label-2317\",\n      \"height\": 201,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"697c8ffb-b866-4902-a113-c5a1afd00619\",\n      \"label\": \"label-2318\",\n      \"height\": 195,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"453f7de0-5253-43dc-9485-9e55fae2f084\",\n      \"label\": \"label-2319\",\n      \"height\": 516,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"b4d0c48f-5fae-44ad-a8a6-aa15f3188705\",\n      \"label\": \"label-2320\",\n      \"height\": 314,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"17459651-bfca-41b2-bd60-c4be43d503e9\",\n      \"label\": \"label-2321\",\n      \"height\": 493,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"4c2494f3-19f4-4529-a1ec-a9e5f05b69ff\",\n      \"label\": \"label-2322\",\n      \"height\": 269,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"fa979ab6-2d60-4a0e-bc75-e64bab340c88\",\n      \"label\": \"label-2323\",\n      \"height\": 58,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"a851cdb7-446f-4c0f-b04d-80b7bc90201b\",\n      \"label\": \"label-2324\",\n      \"height\": 515,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"c3033b5b-4952-437f-8ccf-ffa4a4818551\",\n      \"label\": \"label-2325\",\n      \"height\": 132,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"46afc9a7-811d-4201-b1e1-afb965825c40\",\n      \"label\": \"label-2326\",\n      \"height\": 205,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"8cd793bf-e0d3-46b8-876a-64a538dae918\",\n      \"label\": \"label-2327\",\n      \"height\": 106,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"5c1158bd-8330-464a-b5ac-c738ab5d651c\",\n      \"label\": \"label-2328\",\n      \"height\": 152,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"05e921bb-5ef6-4543-a52a-cf2cbc8ee6b5\",\n      \"label\": \"label-2329\",\n      \"height\": 43,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"804b15a5-a162-4771-be1a-615a676339ab\",\n      \"label\": \"label-2330\",\n      \"height\": 329,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"ccc9e00b-235c-4b02-bf21-fe994d19adbf\",\n      \"label\": \"label-2331\",\n      \"height\": 375,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"60e32e6b-39fd-4599-8413-58f30f170337\",\n      \"label\": \"label-2332\",\n      \"height\": 470,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"1b11b6f9-992e-4a6d-ab21-f39b9135b2c2\",\n      \"label\": \"label-2333\",\n      \"height\": 200,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"f9e7d59c-4d11-4b60-bc9b-e4fe67091272\",\n      \"label\": \"label-2334\",\n      \"height\": 426,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"c050bcea-2ffe-40cb-bca2-80a8c79504c9\",\n      \"label\": \"label-2335\",\n      \"height\": 414,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"35206122-c5bd-4c90-b459-c945e4966f8b\",\n      \"label\": \"label-2336\",\n      \"height\": 228,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"66f69135-4153-4edc-8649-f21b6aab1b8b\",\n      \"label\": \"label-2337\",\n      \"height\": 357,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"4e6eaccf-1c47-4b02-abb5-b252b4807547\",\n      \"label\": \"label-2338\",\n      \"height\": 494,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"d6447e24-1350-4aac-bcb0-cd412c04e846\",\n      \"label\": \"label-2339\",\n      \"height\": 376,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"6448393f-8e0d-4844-8206-9d1577343533\",\n      \"label\": \"label-2340\",\n      \"height\": 156,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"fced8719-b258-4623-8bf4-99279a3ab2c6\",\n      \"label\": \"label-2341\",\n      \"height\": 507,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"ef456d43-398d-42f9-8319-09bd9cc85b28\",\n      \"label\": \"label-2342\",\n      \"height\": 246,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"48fb7f64-af88-4666-b3d1-890fdda601b6\",\n      \"label\": \"label-2343\",\n      \"height\": 232,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"d53992b8-7b5f-40cd-bb15-4ffb9f2f50a3\",\n      \"label\": \"label-2344\",\n      \"height\": 388,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"e32352b2-166c-4a5b-92da-6454beabab47\",\n      \"label\": \"label-2345\",\n      \"height\": 408,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"6a2e1ddd-a683-485d-b6ff-1a82b3b63bcc\",\n      \"label\": \"label-2346\",\n      \"height\": 275,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"fb29c3e1-4778-4ae0-b771-e2b6b51469d2\",\n      \"label\": \"label-2347\",\n      \"height\": 202,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"cd090b19-c307-401c-bef3-0bbeb5cbd6b9\",\n      \"label\": \"label-2348\",\n      \"height\": 51,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"8a4bc62d-dcde-48fe-b71b-75ea2b31820d\",\n      \"label\": \"label-2349\",\n      \"height\": 346,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"b3d7792e-80f0-4fe1-b35a-ea6a360f706b\",\n      \"label\": \"label-2350\",\n      \"height\": 367,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"ef04fe7a-aaf7-4e16-b126-ed4120b8a60f\",\n      \"label\": \"label-2351\",\n      \"height\": 460,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"5d8f90bb-d6cc-4c21-9410-e17181e2d03c\",\n      \"label\": \"label-2352\",\n      \"height\": 236,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"74d6956f-f720-4232-9683-bdbac80d072f\",\n      \"label\": \"label-2353\",\n      \"height\": 99,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"1b407b06-e416-4065-83a1-3de45b6b273d\",\n      \"label\": \"label-2354\",\n      \"height\": 98,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"0b100867-cfbc-440f-b1d7-a9f5a825bdf4\",\n      \"label\": \"label-2355\",\n      \"height\": 467,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"d8b984ef-ba5a-4681-b881-e2af8b53e1ec\",\n      \"label\": \"label-2356\",\n      \"height\": 359,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"8e9ec9fb-c7bb-4fbd-8fd7-d9e756e8d78b\",\n      \"label\": \"label-2357\",\n      \"height\": 451,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"8b98dc55-d941-40df-b806-14f93143be05\",\n      \"label\": \"label-2358\",\n      \"height\": 35,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"597015a1-e72e-46f9-af3a-91ecbb8682bc\",\n      \"label\": \"label-2359\",\n      \"height\": 485,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"19fd0732-9595-45cc-aa9c-afacd81a549c\",\n      \"label\": \"label-2360\",\n      \"height\": 484,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"4c5cd1f9-94de-4e56-b427-71fc50f81d62\",\n      \"label\": \"label-2361\",\n      \"height\": 330,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"e32ea11e-e7bf-45ca-a71b-94dbf09dd619\",\n      \"label\": \"label-2362\",\n      \"height\": 308,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"d43b2531-dc1c-4db6-a7e4-80a9d8fb473a\",\n      \"label\": \"label-2363\",\n      \"height\": 343,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"853063fc-9b81-4a93-ae75-a879fc38d2c8\",\n      \"label\": \"label-2364\",\n      \"height\": 116,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"12a7a8ad-41c1-48f6-b4db-f811f8b74f04\",\n      \"label\": \"label-2365\",\n      \"height\": 357,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"cd5a82ae-35b6-460b-8aba-e11e8a362f89\",\n      \"label\": \"label-2366\",\n      \"height\": 411,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"76b0986f-ca02-4753-8b06-3d724b3f9518\",\n      \"label\": \"label-2367\",\n      \"height\": 382,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"c1146a66-a261-4771-bb3c-ccdc63911ee0\",\n      \"label\": \"label-2368\",\n      \"height\": 269,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"4b7343b0-d24d-4d32-90d7-514b68a2e16c\",\n      \"label\": \"label-2369\",\n      \"height\": 277,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"adf035fc-c3fa-4931-80da-13c430b74bc8\",\n      \"label\": \"label-2370\",\n      \"height\": 474,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"087c3a23-829f-4b3d-bfd2-f96947d9ffd1\",\n      \"label\": \"label-2371\",\n      \"height\": 234,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"72585719-bd65-4c94-a96e-e3101f2cac1f\",\n      \"label\": \"label-2372\",\n      \"height\": 296,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"a98eeae2-38f4-4d11-861a-cc3d5c0f1b27\",\n      \"label\": \"label-2373\",\n      \"height\": 468,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"28ff88ca-b1b9-427f-8d6e-27bc554c4ed3\",\n      \"label\": \"label-2374\",\n      \"height\": 471,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"846e5f90-f672-4edd-8e87-3e70350a4fef\",\n      \"label\": \"label-2375\",\n      \"height\": 218,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"2af7ad04-4b59-4a5c-b352-c1597377fc80\",\n      \"label\": \"label-2376\",\n      \"height\": 303,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"9bbeee40-4a81-4760-b3e5-2e7e3b0ef66f\",\n      \"label\": \"label-2377\",\n      \"height\": 127,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"83f1bbcb-d611-44f1-bedb-568b25a1c99e\",\n      \"label\": \"label-2378\",\n      \"height\": 292,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"97cbf373-fa83-4191-be51-e143f535ee86\",\n      \"label\": \"label-2379\",\n      \"height\": 250,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"e847b60a-9556-4866-ad64-c7fd3e95aa86\",\n      \"label\": \"label-2380\",\n      \"height\": 113,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"c0cdca4a-4b6a-4059-9b33-e724c2a9ca63\",\n      \"label\": \"label-2381\",\n      \"height\": 252,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"da623a01-e224-4554-aa8d-1acf47647b54\",\n      \"label\": \"label-2382\",\n      \"height\": 94,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"57fe0263-d6aa-401c-8bbf-91a44d83e6de\",\n      \"label\": \"label-2383\",\n      \"height\": 120,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"43c4c42c-ef8f-4d8e-9133-ed68652946fd\",\n      \"label\": \"label-2384\",\n      \"height\": 61,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"e54251ba-e302-4f04-8e8c-1537c815f853\",\n      \"label\": \"label-2385\",\n      \"height\": 149,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"4be4192f-d51a-47b4-9b2d-5d07e4663a81\",\n      \"label\": \"label-2386\",\n      \"height\": 322,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"e6e92a66-0d78-48c4-85c6-59ab70ca03a3\",\n      \"label\": \"label-2387\",\n      \"height\": 443,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"22e56539-8b26-43d1-8726-604f20746338\",\n      \"label\": \"label-2388\",\n      \"height\": 210,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"cfd66bba-6429-474c-a3b3-a0b98dfc57c0\",\n      \"label\": \"label-2389\",\n      \"height\": 56,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"1fbd354d-2232-4e77-ab0a-866e0e05744b\",\n      \"label\": \"label-2390\",\n      \"height\": 320,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"99b9caaf-6d23-4204-83dc-6a109db768f2\",\n      \"label\": \"label-2391\",\n      \"height\": 265,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"53a8a217-991a-48a4-97b5-8dfb8cd32168\",\n      \"label\": \"label-2392\",\n      \"height\": 179,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"337ccb86-a152-44a0-b8a5-af19c031b8b0\",\n      \"label\": \"label-2393\",\n      \"height\": 56,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"7ede314d-84e2-4ffe-98f0-fb9140a63d73\",\n      \"label\": \"label-2394\",\n      \"height\": 213,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"9d1eda73-5a54-4915-a304-ee12c06709b4\",\n      \"label\": \"label-2395\",\n      \"height\": 185,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"66dc844b-b865-48f3-8e16-dfec491fa92b\",\n      \"label\": \"label-2396\",\n      \"height\": 293,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"acd1b816-ba4c-43e7-a430-9d671dc73547\",\n      \"label\": \"label-2397\",\n      \"height\": 343,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"87ad8b76-5eb4-48cd-8ba5-7524ec49f4f6\",\n      \"label\": \"label-2398\",\n      \"height\": 194,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"8d505aa1-15b5-4af8-8054-94e370ef3eee\",\n      \"label\": \"label-2399\",\n      \"height\": 449,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"335ee125-6ea2-47dc-b326-11394f29d434\",\n      \"label\": \"label-2400\",\n      \"height\": 95,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"88cab80c-9fc5-4059-b82a-f574c1b8d83d\",\n      \"label\": \"label-2401\",\n      \"height\": 307,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"6fb1a1eb-1b79-4246-a0f3-209d3c95857e\",\n      \"label\": \"label-2402\",\n      \"height\": 349,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"fe188a52-2f8a-430a-a623-a93480d0e682\",\n      \"label\": \"label-2403\",\n      \"height\": 198,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"bba8f2b5-a835-44fb-9655-0dce00305eb4\",\n      \"label\": \"label-2404\",\n      \"height\": 274,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"09313e38-22a9-4d3d-8e74-beb1666ae980\",\n      \"label\": \"label-2405\",\n      \"height\": 422,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"7b60013b-89da-47a4-ab82-3bcfc36f57ec\",\n      \"label\": \"label-2406\",\n      \"height\": 398,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"31e6a9bb-5c38-4164-a423-bfbcfba69d70\",\n      \"label\": \"label-2407\",\n      \"height\": 418,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"0d71c193-ce29-4c58-a478-14c7b3f0e047\",\n      \"label\": \"label-2408\",\n      \"height\": 119,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"c250f8f3-0565-4b35-8fcb-07a971d164da\",\n      \"label\": \"label-2409\",\n      \"height\": 403,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"fd21965b-da0d-4320-8eb8-9c562e14b4e3\",\n      \"label\": \"label-2410\",\n      \"height\": 417,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"34498461-3ffd-44e0-a173-ee39ab69336f\",\n      \"label\": \"label-2411\",\n      \"height\": 497,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"25305144-3e98-4ef0-b805-8abd43c0b28a\",\n      \"label\": \"label-2412\",\n      \"height\": 353,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"0e50071c-d593-48cc-b68c-2b33176f1f92\",\n      \"label\": \"label-2413\",\n      \"height\": 377,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"20870729-79c6-4d31-830d-81fc6a5ed9b0\",\n      \"label\": \"label-2414\",\n      \"height\": 70,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"6d822d1b-20f9-4032-ad5e-bc93208c5597\",\n      \"label\": \"label-2415\",\n      \"height\": 198,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"db516616-4f2d-41fb-80b8-f6ab62fc6e03\",\n      \"label\": \"label-2416\",\n      \"height\": 300,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"624fc51d-0a9e-450e-a801-d084851fe238\",\n      \"label\": \"label-2417\",\n      \"height\": 191,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"2247088a-9c44-44e6-9340-0236f95895c0\",\n      \"label\": \"label-2418\",\n      \"height\": 491,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"27fa196d-6548-48eb-8291-f6f8fde2382a\",\n      \"label\": \"label-2419\",\n      \"height\": 356,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"3cb3c2a7-ceb5-4bd3-b794-1101e1ca7985\",\n      \"label\": \"label-2420\",\n      \"height\": 510,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"764528be-e9b8-467a-ba4a-f90041cd0d44\",\n      \"label\": \"label-2421\",\n      \"height\": 256,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"5c6f6112-5dff-44eb-be31-44d98609b1a5\",\n      \"label\": \"label-2422\",\n      \"height\": 311,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"c8fcf025-8f45-489a-a37e-ec93401d7dc7\",\n      \"label\": \"label-2423\",\n      \"height\": 98,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"1073f9da-d3c6-430c-9ab7-eb0558d5075d\",\n      \"label\": \"label-2424\",\n      \"height\": 73,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"21ac6891-6d24-422d-a864-175cf2b7a29c\",\n      \"label\": \"label-2425\",\n      \"height\": 498,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"0e966e61-d720-47f1-af67-6693488c55dd\",\n      \"label\": \"label-2426\",\n      \"height\": 410,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"4e8f15f6-2358-4d3a-a3eb-fe68489e56db\",\n      \"label\": \"label-2427\",\n      \"height\": 104,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"1aec5acd-6176-4260-ae2b-351173e85598\",\n      \"label\": \"label-2428\",\n      \"height\": 295,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"be4f9be5-d542-4630-b594-e8403911fa6f\",\n      \"label\": \"label-2429\",\n      \"height\": 313,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"4a3c0118-3457-4196-bc2d-8a0131efcc98\",\n      \"label\": \"label-2430\",\n      \"height\": 528,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"c4eaf6cb-1695-4c2f-b968-80fc60cca9eb\",\n      \"label\": \"label-2431\",\n      \"height\": 396,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"1c0c7323-5ac6-4e09-ba44-517a38703b9b\",\n      \"label\": \"label-2432\",\n      \"height\": 90,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"60e137f1-756a-4503-b5ee-42c3f122cecf\",\n      \"label\": \"label-2433\",\n      \"height\": 452,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"961a46f8-1ac4-4b47-a922-5061e10a3e49\",\n      \"label\": \"label-2434\",\n      \"height\": 201,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"418c8324-928c-4264-af07-d363c2572016\",\n      \"label\": \"label-2435\",\n      \"height\": 177,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"456c7a05-ba83-4707-9ff6-7e55cc36c04e\",\n      \"label\": \"label-2436\",\n      \"height\": 37,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"86649383-f06a-4b40-9770-7d620be6bf3f\",\n      \"label\": \"label-2437\",\n      \"height\": 180,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"51758e1e-e5bc-4fda-9792-05bb4859a96f\",\n      \"label\": \"label-2438\",\n      \"height\": 513,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"1f74047d-5c3e-4588-b3ec-4ef200876ee0\",\n      \"label\": \"label-2439\",\n      \"height\": 323,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"d21524c4-b60b-4b23-b8f9-28d4fb7deb0b\",\n      \"label\": \"label-2440\",\n      \"height\": 254,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"1e671535-db0a-41b2-994c-bfad1662b3dd\",\n      \"label\": \"label-2441\",\n      \"height\": 144,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"db88d0b7-c3c8-433b-9594-1c817916c032\",\n      \"label\": \"label-2442\",\n      \"height\": 130,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"da351f15-4c0b-4bf3-a897-93d9721263bb\",\n      \"label\": \"label-2443\",\n      \"height\": 212,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"6532f14e-70d0-4ee3-bdc5-e9faf9146474\",\n      \"label\": \"label-2444\",\n      \"height\": 518,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"ad727a65-df2e-4e86-b67f-290d1ca80c60\",\n      \"label\": \"label-2445\",\n      \"height\": 223,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"fcb16321-93dd-4ae7-bea0-1caaa8e646be\",\n      \"label\": \"label-2446\",\n      \"height\": 247,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"ae449b2b-e61e-4806-ba21-23e9810fc44c\",\n      \"label\": \"label-2447\",\n      \"height\": 178,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"e4326a83-5d29-4441-a239-8724f02cb4e4\",\n      \"label\": \"label-2448\",\n      \"height\": 512,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"d5da2f4f-8933-4dbd-b622-67c18f344345\",\n      \"label\": \"label-2449\",\n      \"height\": 426,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"626ee4b7-d4f8-4dc9-a847-8327d8f0544c\",\n      \"label\": \"label-2450\",\n      \"height\": 279,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"cb8327d3-2415-4f3f-aac2-815638667e09\",\n      \"label\": \"label-2451\",\n      \"height\": 275,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"bb460fb4-14e2-4618-afb2-13f27fbbdd70\",\n      \"label\": \"label-2452\",\n      \"height\": 395,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"83bc088a-0523-4b8b-a1e5-5b4e01c49b6a\",\n      \"label\": \"label-2453\",\n      \"height\": 311,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"4a2d6d45-6150-4d8c-8b35-ece4b60d20e4\",\n      \"label\": \"label-2454\",\n      \"height\": 160,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"ae62f45e-abba-44df-a19c-3b8264abde9c\",\n      \"label\": \"label-2455\",\n      \"height\": 366,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"9256d669-c23e-4dc5-bae9-b58dc2ead085\",\n      \"label\": \"label-2456\",\n      \"height\": 484,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"5314c1d5-ed71-40d6-a5e0-e5ab0b94504d\",\n      \"label\": \"label-2457\",\n      \"height\": 287,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"25a39bd7-3535-48bc-8dda-fedd9719136b\",\n      \"label\": \"label-2458\",\n      \"height\": 141,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"3a3688a7-2c4e-4b6a-9275-ac18218f7bea\",\n      \"label\": \"label-2459\",\n      \"height\": 394,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"bff65506-6f4f-4a24-b04a-e41a1e667bb9\",\n      \"label\": \"label-2460\",\n      \"height\": 54,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"bd991534-eb48-4800-8aa0-f058b2ec9b44\",\n      \"label\": \"label-2461\",\n      \"height\": 384,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"722a4f5e-1b05-4e16-be0f-7029808d0bac\",\n      \"label\": \"label-2462\",\n      \"height\": 208,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"5acd45be-d4a3-4d01-9087-fd01a3cca772\",\n      \"label\": \"label-2463\",\n      \"height\": 416,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"d030ab89-9ea5-4ee9-be8d-c6487238bbcb\",\n      \"label\": \"label-2464\",\n      \"height\": 113,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"fdcbf041-fef1-4b0b-8483-0e5e8b76f625\",\n      \"label\": \"label-2465\",\n      \"height\": 325,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"4b8f3323-37cc-4006-8577-eecc88445a51\",\n      \"label\": \"label-2466\",\n      \"height\": 143,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"b3115865-0478-4f10-938f-e22196b2fe51\",\n      \"label\": \"label-2467\",\n      \"height\": 239,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"12f54559-d427-4ea5-b4f6-b2019e8e6950\",\n      \"label\": \"label-2468\",\n      \"height\": 116,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"0d5191af-b55f-4182-a60d-76b94efe2313\",\n      \"label\": \"label-2469\",\n      \"height\": 314,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"ede70126-5d95-4397-8355-3f1e8219ddc9\",\n      \"label\": \"label-2470\",\n      \"height\": 395,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"123df80e-80bb-4dbc-872e-753fdb700286\",\n      \"label\": \"label-2471\",\n      \"height\": 285,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"d21f0f78-f268-43d9-af90-617fe85dae6d\",\n      \"label\": \"label-2472\",\n      \"height\": 112,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"f4179c17-1f5b-4892-9804-8384fb85b11c\",\n      \"label\": \"label-2473\",\n      \"height\": 350,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"b59f0f07-cdc7-4452-8596-218411c4ebf6\",\n      \"label\": \"label-2474\",\n      \"height\": 75,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"d321d70d-3301-46fc-a479-0ddfd25cc224\",\n      \"label\": \"label-2475\",\n      \"height\": 153,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"8e5768ec-f806-46a8-a1c1-0ed4028838e6\",\n      \"label\": \"label-2476\",\n      \"height\": 439,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"0fc65d2c-12e9-412a-b865-caf05f6f2f59\",\n      \"label\": \"label-2477\",\n      \"height\": 525,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"7f642767-e897-42c1-a549-b0797a7f9fe9\",\n      \"label\": \"label-2478\",\n      \"height\": 387,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"33cb4a05-e7bf-475e-84f7-bad261c2a2d9\",\n      \"label\": \"label-2479\",\n      \"height\": 525,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"ff22c16f-213f-4ecc-a606-56e66d620136\",\n      \"label\": \"label-2480\",\n      \"height\": 201,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"64c4e711-2ca1-4f61-ac0f-db352ca8db8d\",\n      \"label\": \"label-2481\",\n      \"height\": 418,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"89ebff19-2f18-45f6-ba8d-5e858b9ebff9\",\n      \"label\": \"label-2482\",\n      \"height\": 425,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"23121e75-1973-4f92-a47c-800b66acc3d5\",\n      \"label\": \"label-2483\",\n      \"height\": 309,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"331bc89c-c772-45b6-abda-3d97731c23de\",\n      \"label\": \"label-2484\",\n      \"height\": 382,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"9273f6e7-c1ef-4a45-9f2b-47417c8af69a\",\n      \"label\": \"label-2485\",\n      \"height\": 356,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"5d7043d7-6757-427a-880f-e0573daf0de0\",\n      \"label\": \"label-2486\",\n      \"height\": 406,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"4d0ea922-3ff2-48a8-a23a-f6eed5cede15\",\n      \"label\": \"label-2487\",\n      \"height\": 164,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"f9d9cecb-783c-44fc-9835-84d3a8bba600\",\n      \"label\": \"label-2488\",\n      \"height\": 474,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"312a9940-d9da-4998-b44d-6dacf1aac5d8\",\n      \"label\": \"label-2489\",\n      \"height\": 357,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"bf2f05a3-bb48-4874-b75f-fb8abefbcd99\",\n      \"label\": \"label-2490\",\n      \"height\": 42,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"318d00f9-24d8-4aea-9297-9a2c8cab84a1\",\n      \"label\": \"label-2491\",\n      \"height\": 268,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"da99e81e-a55a-4032-91ed-fe7fadf4c074\",\n      \"label\": \"label-2492\",\n      \"height\": 504,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"36400072-8f7a-4bc9-aa12-0897eb274c11\",\n      \"label\": \"label-2493\",\n      \"height\": 180,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"cdc408a6-7699-4ab3-b969-93ab619b3261\",\n      \"label\": \"label-2494\",\n      \"height\": 332,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"6b0cc93d-eaef-499f-b999-cece382c0942\",\n      \"label\": \"label-2495\",\n      \"height\": 224,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"543d6436-500e-4308-ac60-86a2ea8e58c8\",\n      \"label\": \"label-2496\",\n      \"height\": 346,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"a9bc6c4d-f33b-4d0d-b5b0-0fe058438b97\",\n      \"label\": \"label-2497\",\n      \"height\": 324,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"eb113c5b-50a5-4c64-9729-ca62f925a467\",\n      \"label\": \"label-2498\",\n      \"height\": 77,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"2ea9ea9d-9dc4-45a8-91fb-9c7e978007d9\",\n      \"label\": \"label-2499\",\n      \"height\": 428,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"70428ddf-a537-4279-af07-f2458e40ad7d\",\n      \"label\": \"label-2500\",\n      \"height\": 353,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"563a9042-3384-49d9-8dd6-fec06163dfb7\",\n      \"label\": \"label-2501\",\n      \"height\": 61,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"96b513ed-d67e-4b3d-a331-63e7fb21de35\",\n      \"label\": \"label-2502\",\n      \"height\": 492,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"3da908ab-5804-445d-98b8-c8bfe8d7fdcc\",\n      \"label\": \"label-2503\",\n      \"height\": 242,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"fc1c17f0-1690-43df-88a5-e57018ae0f9e\",\n      \"label\": \"label-2504\",\n      \"height\": 344,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"39149bc4-2bbd-461e-bd9d-b230801e3a3d\",\n      \"label\": \"label-2505\",\n      \"height\": 221,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"dbcb6dfa-f1f2-4bd1-a9d4-4acf94695b43\",\n      \"label\": \"label-2506\",\n      \"height\": 524,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"7d89e8ef-9a7c-455a-aee2-b55b6396de9d\",\n      \"label\": \"label-2507\",\n      \"height\": 175,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"0ee73aa8-52d0-425c-a80e-7314cd5fe789\",\n      \"label\": \"label-2508\",\n      \"height\": 493,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"eb1ef166-a634-42d9-ad05-e81f12fdd810\",\n      \"label\": \"label-2509\",\n      \"height\": 182,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"741837ce-3324-44b6-ba7f-cd3defcbf4ca\",\n      \"label\": \"label-2510\",\n      \"height\": 43,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"7859482a-f3f1-46ab-8068-40f2963e9dc2\",\n      \"label\": \"label-2511\",\n      \"height\": 106,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"81ecb7e8-f41d-4696-a61d-6a9123ff7d03\",\n      \"label\": \"label-2512\",\n      \"height\": 95,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"8d43855a-6ce5-4a8c-b0a7-cf2f99f9e325\",\n      \"label\": \"label-2513\",\n      \"height\": 47,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"3cf70975-411c-4338-8f5a-b02888ac3490\",\n      \"label\": \"label-2514\",\n      \"height\": 398,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"cdc786df-24c3-405a-91db-44f4fe01006e\",\n      \"label\": \"label-2515\",\n      \"height\": 343,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"8ed4dffd-2ab7-4653-8b70-4a75fa745aa2\",\n      \"label\": \"label-2516\",\n      \"height\": 361,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"26e120e6-8df2-4eac-8334-21e01b57c3c9\",\n      \"label\": \"label-2517\",\n      \"height\": 220,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"311939f4-c61a-4848-b6cb-fe0ef1a39f14\",\n      \"label\": \"label-2518\",\n      \"height\": 205,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"1bab33ff-a94c-4a67-b8d0-e76c3eb27a96\",\n      \"label\": \"label-2519\",\n      \"height\": 480,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"297f9515-4771-4bb4-a184-0bff6b46a3e6\",\n      \"label\": \"label-2520\",\n      \"height\": 39,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"3e84f246-4643-4277-9554-15c58ec9c6a9\",\n      \"label\": \"label-2521\",\n      \"height\": 94,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"71e06fea-c532-4daa-8b7e-2d80f5d9009b\",\n      \"label\": \"label-2522\",\n      \"height\": 60,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"6f95f158-a2fd-4429-8bac-5cabd11ed065\",\n      \"label\": \"label-2523\",\n      \"height\": 523,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"6e88e9fa-0cfa-4bfa-a21c-b71581a70c1b\",\n      \"label\": \"label-2524\",\n      \"height\": 55,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"7262e535-0d0a-4821-b694-2041279e4094\",\n      \"label\": \"label-2525\",\n      \"height\": 235,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"9b4f5521-5809-45f5-b870-858ee8373141\",\n      \"label\": \"label-2526\",\n      \"height\": 377,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"66862f68-0df0-47e0-9889-a4f1ac22c414\",\n      \"label\": \"label-2527\",\n      \"height\": 165,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"d1b13666-2041-4ba6-b514-45f11bd4a120\",\n      \"label\": \"label-2528\",\n      \"height\": 129,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"f0905be0-16b2-4030-bfba-dace2e874483\",\n      \"label\": \"label-2529\",\n      \"height\": 378,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"33269695-f0e5-4046-94e4-a0e4853c3ec4\",\n      \"label\": \"label-2530\",\n      \"height\": 506,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"54a3071d-a229-4343-9d0b-476c1cad5ffc\",\n      \"label\": \"label-2531\",\n      \"height\": 355,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"6679bdcd-5f58-4852-a58f-5a423cb5f16f\",\n      \"label\": \"label-2532\",\n      \"height\": 181,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"9e2cc31b-e24d-43b2-ab9e-328583d0e7a6\",\n      \"label\": \"label-2533\",\n      \"height\": 194,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"5b456233-7f39-48d4-b162-752eb59010b7\",\n      \"label\": \"label-2534\",\n      \"height\": 264,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"44577f84-0986-4cfc-8223-b6cc4a509432\",\n      \"label\": \"label-2535\",\n      \"height\": 367,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"8a5c8ed7-d35b-42ba-8dae-280af8131a5d\",\n      \"label\": \"label-2536\",\n      \"height\": 111,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"e2718e25-014e-4b29-a861-d182b6123cd1\",\n      \"label\": \"label-2537\",\n      \"height\": 356,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"e0113b12-3973-4c26-bcc1-bdb8f76317fb\",\n      \"label\": \"label-2538\",\n      \"height\": 186,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"c3c7aa1d-924b-42c4-b57c-6604dc515811\",\n      \"label\": \"label-2539\",\n      \"height\": 84,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"7c6b56ad-ade4-4b1e-8d9b-3f33753010fd\",\n      \"label\": \"label-2540\",\n      \"height\": 438,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"2473a464-fd38-4786-96b9-a1b9441fa648\",\n      \"label\": \"label-2541\",\n      \"height\": 465,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"a0ca5e15-6456-4227-932f-8499991ff089\",\n      \"label\": \"label-2542\",\n      \"height\": 78,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"9cd3965f-1ce6-4aff-b16c-0bd0b6cc4b54\",\n      \"label\": \"label-2543\",\n      \"height\": 259,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"5c5a38bc-bcd3-43d3-8258-ebb81946210e\",\n      \"label\": \"label-2544\",\n      \"height\": 495,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"003575fc-4c5e-4533-bdf2-b7a7ed41e3ac\",\n      \"label\": \"label-2545\",\n      \"height\": 110,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"542510bd-72cf-4bb9-ab77-ca3a5cf74666\",\n      \"label\": \"label-2546\",\n      \"height\": 493,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"3b6f7c8e-da1e-40d3-b7a4-3a6584a68ca7\",\n      \"label\": \"label-2547\",\n      \"height\": 478,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"ee52ec87-5ec6-4dc4-ab28-ad77b0a5d635\",\n      \"label\": \"label-2548\",\n      \"height\": 176,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"fcc96da1-2d87-4c79-bd53-f12e4b9e280c\",\n      \"label\": \"label-2549\",\n      \"height\": 342,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"7c0efc23-8211-40f8-9a0c-60efd6c42430\",\n      \"label\": \"label-2550\",\n      \"height\": 488,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"7d237702-1589-4320-8f70-81d35e2b379d\",\n      \"label\": \"label-2551\",\n      \"height\": 168,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"9035578d-8611-4467-9252-7f47be3cb2ea\",\n      \"label\": \"label-2552\",\n      \"height\": 130,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"56c637e7-957d-4af0-857d-461fd536ee04\",\n      \"label\": \"label-2553\",\n      \"height\": 171,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"86e0014c-0e86-4fe5-81a5-9e7436c98c6b\",\n      \"label\": \"label-2554\",\n      \"height\": 212,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"36cb2ca9-da05-4c53-ae56-153899e1cf9e\",\n      \"label\": \"label-2555\",\n      \"height\": 314,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"aff2a5cd-bb92-4bdf-84e7-6dfcecd81864\",\n      \"label\": \"label-2556\",\n      \"height\": 141,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"03eb42c7-a885-4288-b0b6-4674919eceb8\",\n      \"label\": \"label-2557\",\n      \"height\": 106,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"51fd1471-9f6b-4de6-99d9-d37868ef670d\",\n      \"label\": \"label-2558\",\n      \"height\": 257,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"b3de1659-b412-4142-9460-045810c1cdd5\",\n      \"label\": \"label-2559\",\n      \"height\": 525,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"9bee329d-4888-4b5e-b5b4-a13f45be507e\",\n      \"label\": \"label-2560\",\n      \"height\": 47,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"b91a943d-362b-4c4e-8328-7bff056cac2a\",\n      \"label\": \"label-2561\",\n      \"height\": 419,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"6750a641-4f07-490f-ba7f-ab80ccfef602\",\n      \"label\": \"label-2562\",\n      \"height\": 416,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"27ac0aad-0659-42ec-ae08-012103c50294\",\n      \"label\": \"label-2563\",\n      \"height\": 131,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"0d0f2e83-d617-46df-b06d-f884e2689860\",\n      \"label\": \"label-2564\",\n      \"height\": 200,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"9986418d-accd-47ab-906a-5af540e25fe8\",\n      \"label\": \"label-2565\",\n      \"height\": 285,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"98f91a6b-a2dd-446d-b7e1-b99f37599de3\",\n      \"label\": \"label-2566\",\n      \"height\": 166,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"30c87bbf-ae70-4529-9986-0240ebce309a\",\n      \"label\": \"label-2567\",\n      \"height\": 510,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"ce9ecf19-0352-4715-9fca-7996f8860964\",\n      \"label\": \"label-2568\",\n      \"height\": 486,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"76529931-d5ca-405c-8558-042515a90537\",\n      \"label\": \"label-2569\",\n      \"height\": 65,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"a745df5d-7db4-4610-a264-cd092ac5bfe5\",\n      \"label\": \"label-2570\",\n      \"height\": 72,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"6d7ef03e-07cb-4c05-b596-b62fe13566ef\",\n      \"label\": \"label-2571\",\n      \"height\": 208,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"01ecd226-c4fd-42cf-9fc0-1ad89cd22eea\",\n      \"label\": \"label-2572\",\n      \"height\": 494,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"828ddc4a-5489-4d58-9380-662ce9fddf16\",\n      \"label\": \"label-2573\",\n      \"height\": 200,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"611c3220-f0e0-4261-a524-fc9df3712a76\",\n      \"label\": \"label-2574\",\n      \"height\": 456,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"5aef0ac3-d853-4b47-ae01-4bf14477e2f4\",\n      \"label\": \"label-2575\",\n      \"height\": 378,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"fa7c916c-40bf-4ac6-b60f-ae1000b50553\",\n      \"label\": \"label-2576\",\n      \"height\": 123,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"f22e483d-8cbf-41a4-acfa-6d0b5f2c0fc7\",\n      \"label\": \"label-2577\",\n      \"height\": 439,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"f0561c2e-8748-4175-a215-b387dd3f2d59\",\n      \"label\": \"label-2578\",\n      \"height\": 521,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"db3b6906-a8de-4598-bab9-76de9229ee11\",\n      \"label\": \"label-2579\",\n      \"height\": 454,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"8755a092-accc-4da7-82dc-d8ca3e90e1bd\",\n      \"label\": \"label-2580\",\n      \"height\": 463,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"8df0d83a-07c3-4c0e-89eb-1656c0018c8e\",\n      \"label\": \"label-2581\",\n      \"height\": 71,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"ae3c7a10-fd8b-4cdd-bd8b-5189359db1d8\",\n      \"label\": \"label-2582\",\n      \"height\": 483,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"368d531d-9bb9-4c7b-ac59-8dfbb3311a50\",\n      \"label\": \"label-2583\",\n      \"height\": 41,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"c27ba395-fc3b-41f8-b9cd-86fe681b9d91\",\n      \"label\": \"label-2584\",\n      \"height\": 349,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"a0cfa0f5-cc5c-4122-b58b-fde1220e1517\",\n      \"label\": \"label-2585\",\n      \"height\": 471,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"3933e959-0ca1-43e6-8e79-af39a855d993\",\n      \"label\": \"label-2586\",\n      \"height\": 228,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"dcf6239b-a73c-494f-a9d5-2042f516739f\",\n      \"label\": \"label-2587\",\n      \"height\": 144,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"604a6bf8-66f2-4892-ab0d-8ec57622221d\",\n      \"label\": \"label-2588\",\n      \"height\": 36,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"2c1c56ef-f676-4a03-8803-f6e80c2de6b5\",\n      \"label\": \"label-2589\",\n      \"height\": 158,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"52982928-6d5b-464c-a434-aa0c2a947cb3\",\n      \"label\": \"label-2590\",\n      \"height\": 196,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"043ab67a-56a1-4466-91b4-2b44eb503d69\",\n      \"label\": \"label-2591\",\n      \"height\": 122,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"abc8afe4-541e-4163-95c4-39055d399f5e\",\n      \"label\": \"label-2592\",\n      \"height\": 520,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"910621da-e2ad-4b64-95ea-ea415c334e07\",\n      \"label\": \"label-2593\",\n      \"height\": 452,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"1cc58c89-abbd-4fa9-bc70-211efae9aa59\",\n      \"label\": \"label-2594\",\n      \"height\": 355,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"6f0332b3-fc6c-4143-a4b3-323c51477e90\",\n      \"label\": \"label-2595\",\n      \"height\": 427,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"4f6f5b77-2d37-4eae-b6cf-b48dab8f7849\",\n      \"label\": \"label-2596\",\n      \"height\": 278,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"065b3810-a933-42de-a960-6b45ef6bbb29\",\n      \"label\": \"label-2597\",\n      \"height\": 480,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"6d6addc8-afdd-46b0-97ad-283a9509d325\",\n      \"label\": \"label-2598\",\n      \"height\": 126,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"804faf71-c60b-4000-a416-409e9429b06d\",\n      \"label\": \"label-2599\",\n      \"height\": 514,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"9c0f4a24-343a-47c6-8e72-0903573dd153\",\n      \"label\": \"label-2600\",\n      \"height\": 115,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"a529b945-e8b8-4951-913e-b466af06d538\",\n      \"label\": \"label-2601\",\n      \"height\": 414,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"b471ef68-cc8f-4dc9-8761-de7d30a31cb1\",\n      \"label\": \"label-2602\",\n      \"height\": 109,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"b5ff144b-e463-4323-9ba7-1d21bce775f3\",\n      \"label\": \"label-2603\",\n      \"height\": 338,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"e5c5c068-c41f-4f0a-b257-7dce5e2c1a66\",\n      \"label\": \"label-2604\",\n      \"height\": 69,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"78ea7685-d579-4ced-b141-dcbb3fc657a5\",\n      \"label\": \"label-2605\",\n      \"height\": 445,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"21315294-0547-41f2-91d6-6dbcc69123eb\",\n      \"label\": \"label-2606\",\n      \"height\": 214,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"3a1ab794-eda2-47a4-bd8a-158e70a946d9\",\n      \"label\": \"label-2607\",\n      \"height\": 373,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"381e0792-13f0-4c75-b239-492c5953fefd\",\n      \"label\": \"label-2608\",\n      \"height\": 145,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"00bc2822-8035-46dd-83e2-535ad132fb86\",\n      \"label\": \"label-2609\",\n      \"height\": 483,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"ca7f956e-b8c4-45db-9cfb-2870f32030a5\",\n      \"label\": \"label-2610\",\n      \"height\": 45,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"dbb74d0a-a83b-4bd6-b33e-d7a5567c5ef0\",\n      \"label\": \"label-2611\",\n      \"height\": 513,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"566ffe1b-2095-41f2-b53e-e5d349d3820c\",\n      \"label\": \"label-2612\",\n      \"height\": 153,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"c0fc3748-74ca-4822-a7e1-f355aabaa543\",\n      \"label\": \"label-2613\",\n      \"height\": 365,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"5f7da5d6-b6a8-4bd0-9c7d-ed222155ea56\",\n      \"label\": \"label-2614\",\n      \"height\": 167,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"def07f06-164c-4adf-8ce5-2948c0eb396e\",\n      \"label\": \"label-2615\",\n      \"height\": 306,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"b31a0eff-ac9c-4eb0-b787-9fad84f249df\",\n      \"label\": \"label-2616\",\n      \"height\": 481,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"962cf6cc-a854-4bc6-a97d-59091b9c8406\",\n      \"label\": \"label-2617\",\n      \"height\": 148,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"24f6e45f-be5e-4f48-8221-345693d35286\",\n      \"label\": \"label-2618\",\n      \"height\": 528,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"17523c07-3dfd-4649-a10d-4f05b8ab7be9\",\n      \"label\": \"label-2619\",\n      \"height\": 84,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"9ee13bef-a67c-4bcb-8fe2-ec06c51ff5b3\",\n      \"label\": \"label-2620\",\n      \"height\": 103,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"f9bcee77-448d-426c-9e4c-3a293d92aad3\",\n      \"label\": \"label-2621\",\n      \"height\": 185,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"e883945e-b3e3-411d-9ce3-12fa87f0897c\",\n      \"label\": \"label-2622\",\n      \"height\": 223,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"7d2f6a48-0c56-4f75-91d0-460c49f74798\",\n      \"label\": \"label-2623\",\n      \"height\": 358,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"3cb72b2c-6445-48cd-b4cb-17dd9d06f4d7\",\n      \"label\": \"label-2624\",\n      \"height\": 400,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"cdfe3aa9-1030-49f0-8261-fa2ea3b3184a\",\n      \"label\": \"label-2625\",\n      \"height\": 374,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"77311c88-cd19-4371-9ce5-4b73a2cc39e4\",\n      \"label\": \"label-2626\",\n      \"height\": 264,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"39582eea-60d2-427d-b4fb-210c911f3b81\",\n      \"label\": \"label-2627\",\n      \"height\": 183,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"ecf10733-06c6-4ace-9833-0036b4be991d\",\n      \"label\": \"label-2628\",\n      \"height\": 483,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"84b390d3-8c23-4497-b218-5f9daf563c67\",\n      \"label\": \"label-2629\",\n      \"height\": 225,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"7c84b857-ae7d-4f61-ab10-1f1e51bb1b9f\",\n      \"label\": \"label-2630\",\n      \"height\": 118,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"746d40ca-ad57-465e-8c88-9f18dc70ad41\",\n      \"label\": \"label-2631\",\n      \"height\": 457,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"c747e1dc-6d2d-4df6-be5d-7d23a9b10a4f\",\n      \"label\": \"label-2632\",\n      \"height\": 54,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"020134f8-c152-455a-a769-b74d62f9fc0a\",\n      \"label\": \"label-2633\",\n      \"height\": 73,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"7df54651-b736-4a67-b3b5-a26afdf538d8\",\n      \"label\": \"label-2634\",\n      \"height\": 35,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"1ecbf3a4-15e6-4b6f-91c3-1e81e34a34c0\",\n      \"label\": \"label-2635\",\n      \"height\": 109,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"7bd60629-1dfd-4eac-bb62-84a99dbbb01b\",\n      \"label\": \"label-2636\",\n      \"height\": 360,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"d9ededb6-9286-4f45-9a89-d2a32d4a713e\",\n      \"label\": \"label-2637\",\n      \"height\": 123,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"795f27f8-9566-4b4d-b7ab-02bfd539e0bf\",\n      \"label\": \"label-2638\",\n      \"height\": 275,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"288c02d3-666d-4fcc-a29c-ee06a913666b\",\n      \"label\": \"label-2639\",\n      \"height\": 215,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"9a513b68-8e1a-4859-8719-8c3505d92424\",\n      \"label\": \"label-2640\",\n      \"height\": 194,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"dc137391-760a-4c3a-a9ea-22f3962a6e95\",\n      \"label\": \"label-2641\",\n      \"height\": 168,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"9aeb7625-7b12-422d-91a1-eb048b6c7fa6\",\n      \"label\": \"label-2642\",\n      \"height\": 305,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"a21312b2-34b5-4ce6-b749-222b96d64de0\",\n      \"label\": \"label-2643\",\n      \"height\": 267,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"bbcab03f-8de2-4ba0-94e1-b30ce0121666\",\n      \"label\": \"label-2644\",\n      \"height\": 171,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"1b4c7ddc-a260-4682-b65b-859c1235f5f2\",\n      \"label\": \"label-2645\",\n      \"height\": 90,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"b7e3deaa-88d0-4e60-ab38-c34690b12f85\",\n      \"label\": \"label-2646\",\n      \"height\": 321,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"31a25f98-f76a-495a-a811-05ec1ea0ba8b\",\n      \"label\": \"label-2647\",\n      \"height\": 77,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"a243fb38-45c5-404e-9eed-2111f8187e3f\",\n      \"label\": \"label-2648\",\n      \"height\": 237,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"45378a49-482e-4514-a1fa-5ed833d43190\",\n      \"label\": \"label-2649\",\n      \"height\": 239,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"c833ea70-8936-49b3-8e27-3a7facc754e2\",\n      \"label\": \"label-2650\",\n      \"height\": 62,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"c91e642a-208a-433a-980e-296901248a47\",\n      \"label\": \"label-2651\",\n      \"height\": 523,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"2692a97c-8860-435c-ba1a-d02015b5dc2c\",\n      \"label\": \"label-2652\",\n      \"height\": 527,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"f9943460-c939-4e99-8541-d5ed14714795\",\n      \"label\": \"label-2653\",\n      \"height\": 63,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"f52b0f5a-098e-48ec-958b-75b8e8a3775e\",\n      \"label\": \"label-2654\",\n      \"height\": 334,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"236cbe50-8cd3-4196-8aa2-4c6f4b0582ad\",\n      \"label\": \"label-2655\",\n      \"height\": 378,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"d183f9cb-e355-49c7-af40-9ffc5671fd0c\",\n      \"label\": \"label-2656\",\n      \"height\": 309,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"c8bd165f-f694-48de-b0de-16b389c8ac5f\",\n      \"label\": \"label-2657\",\n      \"height\": 210,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"8a0da852-297c-4c77-a992-40baa5d9c1ef\",\n      \"label\": \"label-2658\",\n      \"height\": 328,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"f48b3b8e-879b-4a09-8555-1cd4d5e73885\",\n      \"label\": \"label-2659\",\n      \"height\": 291,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"a6a6430e-b74a-45cb-968e-b729d9b9f1dc\",\n      \"label\": \"label-2660\",\n      \"height\": 49,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"bc370b74-2cbb-4469-bd18-1233cf2e8511\",\n      \"label\": \"label-2661\",\n      \"height\": 462,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"aa0065d2-4e9c-4a16-be58-6ed6b4f3e239\",\n      \"label\": \"label-2662\",\n      \"height\": 298,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"adb1d654-6068-4b30-81fc-cba7fa4a6122\",\n      \"label\": \"label-2663\",\n      \"height\": 147,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"49f5d60a-f5eb-4993-a138-fa08002302ec\",\n      \"label\": \"label-2664\",\n      \"height\": 277,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"d495cb1d-994a-4dd6-a7d2-15fa2485f260\",\n      \"label\": \"label-2665\",\n      \"height\": 315,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"d8fdac84-424a-4001-8225-50e6d13fc05d\",\n      \"label\": \"label-2666\",\n      \"height\": 174,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"d9f2bbe7-47f3-441a-84e9-42b62239803c\",\n      \"label\": \"label-2667\",\n      \"height\": 301,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"ffb2e593-a210-4035-be90-89cb715f6de9\",\n      \"label\": \"label-2668\",\n      \"height\": 447,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"aba738da-1907-49f7-b5a3-1e2b44682f06\",\n      \"label\": \"label-2669\",\n      \"height\": 390,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"a8732124-7e47-48d3-a128-cd83e857a6a3\",\n      \"label\": \"label-2670\",\n      \"height\": 422,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"b3097de2-083d-4370-8ee7-870c73845dc0\",\n      \"label\": \"label-2671\",\n      \"height\": 468,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"c649b1f2-2fd3-430c-a19c-96e8b804ec02\",\n      \"label\": \"label-2672\",\n      \"height\": 284,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"006cdf96-b473-4ee4-8cc2-26428756e3ba\",\n      \"label\": \"label-2673\",\n      \"height\": 352,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"56481c53-e612-41d4-b47c-fa8cc60aee36\",\n      \"label\": \"label-2674\",\n      \"height\": 100,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"700c4fba-f8d4-43e0-8fc6-25dca091f626\",\n      \"label\": \"label-2675\",\n      \"height\": 53,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"34653996-61d7-4931-b941-d4f8f14e01d7\",\n      \"label\": \"label-2676\",\n      \"height\": 187,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"052d1871-79ea-4b0e-8e7f-6757573c5599\",\n      \"label\": \"label-2677\",\n      \"height\": 211,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"0cd4ebd9-d6db-4762-8bd1-367a6663d18c\",\n      \"label\": \"label-2678\",\n      \"height\": 520,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"f2f9098d-6865-4bbe-8567-0c7efd490c53\",\n      \"label\": \"label-2679\",\n      \"height\": 405,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"34be5ae2-d3fb-4826-9e2b-a3ac2494b4e4\",\n      \"label\": \"label-2680\",\n      \"height\": 101,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"400f28b9-6bfa-4d84-b881-ed067e3c3514\",\n      \"label\": \"label-2681\",\n      \"height\": 162,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"1fe1de98-e655-40e7-91b0-9a273086902e\",\n      \"label\": \"label-2682\",\n      \"height\": 432,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"c5960994-c4d4-4411-b2e2-4cb72796af92\",\n      \"label\": \"label-2683\",\n      \"height\": 99,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"d74e3bdd-ba12-40d5-adcb-577284c03e53\",\n      \"label\": \"label-2684\",\n      \"height\": 427,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"3a0c6d1e-f309-40a1-bd1b-3e5f5d63cf6a\",\n      \"label\": \"label-2685\",\n      \"height\": 523,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"2279e41d-b008-42e0-b73f-673d1624171f\",\n      \"label\": \"label-2686\",\n      \"height\": 64,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"3874857d-427e-404a-85ee-5c8991b6ff16\",\n      \"label\": \"label-2687\",\n      \"height\": 431,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"5c0587d1-7f81-428a-bb91-5399e6adfe1d\",\n      \"label\": \"label-2688\",\n      \"height\": 231,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"aafa770c-edb5-42e9-84d1-c8e7180597aa\",\n      \"label\": \"label-2689\",\n      \"height\": 240,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"2e3591fd-2a64-475d-a651-1a2682a6328b\",\n      \"label\": \"label-2690\",\n      \"height\": 96,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"dd23de99-2db0-4b14-bc00-965f7e17e385\",\n      \"label\": \"label-2691\",\n      \"height\": 427,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"21049471-4d06-46da-a454-e3ac5c5b0b7f\",\n      \"label\": \"label-2692\",\n      \"height\": 78,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"a5933ac4-7be5-468a-bcc6-a56791b5d455\",\n      \"label\": \"label-2693\",\n      \"height\": 277,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"9a439550-0d7e-4c6c-a13e-6014eb9fad3d\",\n      \"label\": \"label-2694\",\n      \"height\": 263,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"9a123959-179a-4305-ae21-7b54703b975a\",\n      \"label\": \"label-2695\",\n      \"height\": 490,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"78724427-1125-4ad9-956a-25d295be20a6\",\n      \"label\": \"label-2696\",\n      \"height\": 419,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"a8f50372-3af9-40ba-a26f-47680f1cdb42\",\n      \"label\": \"label-2697\",\n      \"height\": 116,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"c65ba05e-6b54-49ed-b0ec-39cb99ec0832\",\n      \"label\": \"label-2698\",\n      \"height\": 347,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"170985c0-c9b5-4b07-a860-1a140eabfe2c\",\n      \"label\": \"label-2699\",\n      \"height\": 183,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"a7202e3b-94c2-4cba-b40d-79e86d3158ef\",\n      \"label\": \"label-2700\",\n      \"height\": 339,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"18680127-2e61-4468-8405-70d72f881df2\",\n      \"label\": \"label-2701\",\n      \"height\": 128,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"f5c8222e-9137-4369-b471-3d40e61822ba\",\n      \"label\": \"label-2702\",\n      \"height\": 496,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"a073eda7-d65c-4174-9e9a-28d559c7a666\",\n      \"label\": \"label-2703\",\n      \"height\": 217,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"ba9b6536-4f98-40ab-bfd5-24d333863421\",\n      \"label\": \"label-2704\",\n      \"height\": 179,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"fe01bf2c-eb68-4fb8-9cb6-d250b62f66e7\",\n      \"label\": \"label-2705\",\n      \"height\": 140,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"1f54bc37-50ec-4f73-89a8-4011244f7ffa\",\n      \"label\": \"label-2706\",\n      \"height\": 404,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"fcddbec3-aa2e-47eb-bf34-c8dc19ae09a3\",\n      \"label\": \"label-2707\",\n      \"height\": 520,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"080cd120-7ec7-4d14-a47f-fc92141276ea\",\n      \"label\": \"label-2708\",\n      \"height\": 165,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"73ae3c30-9aba-4fae-b1ea-11b76de1572a\",\n      \"label\": \"label-2709\",\n      \"height\": 380,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"e123ecd7-0e34-4b83-b648-da1882780f30\",\n      \"label\": \"label-2710\",\n      \"height\": 465,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"9a642247-839e-4eb0-b928-1f852c008f10\",\n      \"label\": \"label-2711\",\n      \"height\": 146,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"e576c88f-2be9-4552-8203-a0b24e153679\",\n      \"label\": \"label-2712\",\n      \"height\": 295,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"3893bc73-c255-41ae-9f3b-acffa23e6fe2\",\n      \"label\": \"label-2713\",\n      \"height\": 484,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"ddd6c9c3-7ac7-412e-95a8-0f7917f81d76\",\n      \"label\": \"label-2714\",\n      \"height\": 35,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"22559d25-807c-49ea-8ba1-0f2f3dc6a1a8\",\n      \"label\": \"label-2715\",\n      \"height\": 481,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"8a827ab8-d62a-4d95-ba2d-f5bd235110af\",\n      \"label\": \"label-2716\",\n      \"height\": 299,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"6f4e6e8b-07f3-47ea-baf5-e3857aaeb4ed\",\n      \"label\": \"label-2717\",\n      \"height\": 212,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"8053fac2-e8e5-43ea-b6d7-dc8902a5c338\",\n      \"label\": \"label-2718\",\n      \"height\": 268,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"1b4447aa-a3e4-444f-8690-f0339237f4c7\",\n      \"label\": \"label-2719\",\n      \"height\": 105,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"f0b47b96-47dd-43d3-b2d8-51fc0ab5c74b\",\n      \"label\": \"label-2720\",\n      \"height\": 124,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"faffb58f-d814-4f6f-b880-fd98c92b7af7\",\n      \"label\": \"label-2721\",\n      \"height\": 48,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"6994e6a0-e7e5-432f-b4f4-b46422661b16\",\n      \"label\": \"label-2722\",\n      \"height\": 241,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"3207203c-a938-4289-beab-00c91c785b87\",\n      \"label\": \"label-2723\",\n      \"height\": 529,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"97ee43fc-7eae-4617-8143-a94d33fa144f\",\n      \"label\": \"label-2724\",\n      \"height\": 462,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"0c5352ff-3666-442c-8fc0-495c3b5be898\",\n      \"label\": \"label-2725\",\n      \"height\": 61,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"4952ba1b-4a3c-4af7-8602-6301c9233aaf\",\n      \"label\": \"label-2726\",\n      \"height\": 203,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"c33cf04a-d87d-4a05-9ac0-c61914501b80\",\n      \"label\": \"label-2727\",\n      \"height\": 76,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"f21494fc-cff6-437c-b4bf-3a620c10dece\",\n      \"label\": \"label-2728\",\n      \"height\": 82,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"76d519b6-5ecc-4144-8c7a-b2cbcb83dbaf\",\n      \"label\": \"label-2729\",\n      \"height\": 342,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"dc16f067-a51b-49aa-bf0f-5c5caafee8a8\",\n      \"label\": \"label-2730\",\n      \"height\": 45,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"bf5e6b22-cf4c-4451-8c71-dcfc8c08fe10\",\n      \"label\": \"label-2731\",\n      \"height\": 503,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"4dcdd336-868a-4908-959d-ccaa7f83eb2a\",\n      \"label\": \"label-2732\",\n      \"height\": 380,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"a971dae1-993f-40f5-92ae-96d4df687ecc\",\n      \"label\": \"label-2733\",\n      \"height\": 437,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"dc5af4fd-59c7-4bcf-b750-0fa30dad89d3\",\n      \"label\": \"label-2734\",\n      \"height\": 67,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"74eec4fa-6e8a-4530-aebb-b1c55f005337\",\n      \"label\": \"label-2735\",\n      \"height\": 432,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"be5d1747-3dd4-469a-af30-8ed4a615ec3e\",\n      \"label\": \"label-2736\",\n      \"height\": 338,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"f2543705-0cb5-41b3-a789-9583e845f0cd\",\n      \"label\": \"label-2737\",\n      \"height\": 249,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"622e940e-e9df-4957-962c-8016b7865e3d\",\n      \"label\": \"label-2738\",\n      \"height\": 221,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"500c1afa-739a-4c42-a28d-18c392e794c2\",\n      \"label\": \"label-2739\",\n      \"height\": 469,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"67cb3a2d-8339-4704-9d37-257d209c64e8\",\n      \"label\": \"label-2740\",\n      \"height\": 196,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"cba6f27e-2f60-4593-9093-4b1ef5649bef\",\n      \"label\": \"label-2741\",\n      \"height\": 313,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"6bde286a-7c0f-4edc-8613-d57081247438\",\n      \"label\": \"label-2742\",\n      \"height\": 139,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"49da3e41-88a5-4729-9d4d-17191c0f03a0\",\n      \"label\": \"label-2743\",\n      \"height\": 312,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"542c235f-ab66-4737-95c4-142907e6c376\",\n      \"label\": \"label-2744\",\n      \"height\": 180,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"61229f8d-783a-4b7c-bd60-a6478305716f\",\n      \"label\": \"label-2745\",\n      \"height\": 114,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"38b62ed3-6f14-4b51-8d40-fb5bd1b71ca7\",\n      \"label\": \"label-2746\",\n      \"height\": 90,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"71421a23-82fc-4235-aea2-41e09442b4db\",\n      \"label\": \"label-2747\",\n      \"height\": 373,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"72c30bb2-d024-4f2b-b852-b6c0645ea7d3\",\n      \"label\": \"label-2748\",\n      \"height\": 418,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"7f7c8860-2832-4324-a3af-7924c95bdc28\",\n      \"label\": \"label-2749\",\n      \"height\": 475,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"b43b32a2-0c4e-4eed-b971-e98e4ad2625c\",\n      \"label\": \"label-2750\",\n      \"height\": 396,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"1359eea5-762f-4cf3-b38f-6c10d6962996\",\n      \"label\": \"label-2751\",\n      \"height\": 202,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"5e986d20-aee4-40e0-9910-943db258d79b\",\n      \"label\": \"label-2752\",\n      \"height\": 470,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"60285c02-7060-4756-b6d1-3068f29e9c50\",\n      \"label\": \"label-2753\",\n      \"height\": 508,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"116c1adc-5fb9-4951-a2b8-28abe0cbc703\",\n      \"label\": \"label-2754\",\n      \"height\": 386,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"062adf7d-4bb5-4bb5-9458-967bfe8fb5f9\",\n      \"label\": \"label-2755\",\n      \"height\": 512,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"b6bcd97a-ba73-4ff2-8dc6-e04d954a7985\",\n      \"label\": \"label-2756\",\n      \"height\": 428,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"145f4a21-6946-4140-9308-b9b5caf9d1c7\",\n      \"label\": \"label-2757\",\n      \"height\": 46,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"e7659478-7492-42b2-a949-97cf26032c46\",\n      \"label\": \"label-2758\",\n      \"height\": 375,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"fe0196c0-92a8-42d2-a963-3e7abb29b35c\",\n      \"label\": \"label-2759\",\n      \"height\": 178,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"307fd28d-21c7-4848-9791-ed9971fc0731\",\n      \"label\": \"label-2760\",\n      \"height\": 278,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"87f00ca1-e2c5-4c4f-859b-be18079c41d5\",\n      \"label\": \"label-2761\",\n      \"height\": 270,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"acb8c2ca-d3b3-49d4-93a9-f54dcd7e03f5\",\n      \"label\": \"label-2762\",\n      \"height\": 496,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"3fd0717d-5e01-41e6-9f03-06f79e81b91d\",\n      \"label\": \"label-2763\",\n      \"height\": 256,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"47a9175c-f3df-46c4-b469-b3fc805182fe\",\n      \"label\": \"label-2764\",\n      \"height\": 105,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"c05129e6-cd55-4e95-bef9-e1ef4b625945\",\n      \"label\": \"label-2765\",\n      \"height\": 362,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"97f2a385-ecac-40eb-94f6-4c5a044828c4\",\n      \"label\": \"label-2766\",\n      \"height\": 51,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"80667d87-c67f-49a7-b193-89d883fd9735\",\n      \"label\": \"label-2767\",\n      \"height\": 128,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"ffa46aef-cb5a-4ffd-8cc1-9b97123c598f\",\n      \"label\": \"label-2768\",\n      \"height\": 334,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"7af3363d-2001-46b4-a74e-e3690ac94474\",\n      \"label\": \"label-2769\",\n      \"height\": 369,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"880c121c-9ca1-4e37-b3c5-f879c8bd2b84\",\n      \"label\": \"label-2770\",\n      \"height\": 328,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"119e258e-6990-465f-ae4d-2399dd4b99dd\",\n      \"label\": \"label-2771\",\n      \"height\": 447,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"59eca751-1f82-42f8-b476-34c62c9520c2\",\n      \"label\": \"label-2772\",\n      \"height\": 333,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"cf0c6c73-e060-4c13-ad8c-ba7ab0ec8c9a\",\n      \"label\": \"label-2773\",\n      \"height\": 215,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"893976b1-34a1-4143-9cb8-2aaa804112a4\",\n      \"label\": \"label-2774\",\n      \"height\": 216,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"7f3d26b4-9838-4fb5-9241-b81fefb864b3\",\n      \"label\": \"label-2775\",\n      \"height\": 205,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"4a941719-03f6-4b75-9383-1b2c5681830c\",\n      \"label\": \"label-2776\",\n      \"height\": 191,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"ad14b62e-488f-4db5-83c2-a38e8304e78f\",\n      \"label\": \"label-2777\",\n      \"height\": 273,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"822472cf-baa2-46de-b2dc-c93364c9bd40\",\n      \"label\": \"label-2778\",\n      \"height\": 117,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"ec56a78f-6e2f-4721-9220-436e2145a3bc\",\n      \"label\": \"label-2779\",\n      \"height\": 94,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"5edf3ec3-bf71-4571-b948-71536c5c6520\",\n      \"label\": \"label-2780\",\n      \"height\": 409,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"4eb84f2e-12f6-49a7-8e0a-41a6377210cd\",\n      \"label\": \"label-2781\",\n      \"height\": 525,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"8a06c274-01ae-4623-b7b0-2a2361614c43\",\n      \"label\": \"label-2782\",\n      \"height\": 189,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"9f374c40-3a4a-45f4-ac1f-a11475f23479\",\n      \"label\": \"label-2783\",\n      \"height\": 142,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"27e79d18-b316-45bb-9f44-a3e9a5fc10ba\",\n      \"label\": \"label-2784\",\n      \"height\": 154,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"8ff14c43-37f4-4c39-8f15-74cb974f75d1\",\n      \"label\": \"label-2785\",\n      \"height\": 442,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"15643c12-ac65-4eca-b6cb-442d3b98b488\",\n      \"label\": \"label-2786\",\n      \"height\": 166,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"f122e703-2349-424f-aa1e-ea5858904422\",\n      \"label\": \"label-2787\",\n      \"height\": 84,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"fae1ada2-d9d6-4864-821e-ae9597378159\",\n      \"label\": \"label-2788\",\n      \"height\": 368,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"63cb629f-14ff-4682-813b-d272d213950c\",\n      \"label\": \"label-2789\",\n      \"height\": 197,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"c7654e05-e8f1-40d8-8081-82c75482c881\",\n      \"label\": \"label-2790\",\n      \"height\": 270,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"7e06cb56-2ddf-46b3-a989-e36eff02f3eb\",\n      \"label\": \"label-2791\",\n      \"height\": 165,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"c7ccf194-0bc2-48ac-973c-b1acfd63e3b6\",\n      \"label\": \"label-2792\",\n      \"height\": 167,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"04d95955-9662-4693-af38-bc7490230af7\",\n      \"label\": \"label-2793\",\n      \"height\": 323,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"351e8043-a31b-478d-adb0-fa2a4b0aa9b7\",\n      \"label\": \"label-2794\",\n      \"height\": 174,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"0e100120-be6b-438f-b22e-d451bbba4817\",\n      \"label\": \"label-2795\",\n      \"height\": 454,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"87b3d793-0bcb-41f0-a2ed-8cd06aef5e75\",\n      \"label\": \"label-2796\",\n      \"height\": 421,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"dc4b3aba-3a29-4e62-85c6-efa9c1e18161\",\n      \"label\": \"label-2797\",\n      \"height\": 61,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"7e04c456-2d9e-4d67-9829-31dfc19276c2\",\n      \"label\": \"label-2798\",\n      \"height\": 281,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"ea1045a7-cce4-4155-92b1-1b7373549ee9\",\n      \"label\": \"label-2799\",\n      \"height\": 169,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"680a7064-0585-4a4a-b190-8bfdc427c9b1\",\n      \"label\": \"label-2800\",\n      \"height\": 197,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"f141e998-0fe3-47be-9220-0c71c3509a29\",\n      \"label\": \"label-2801\",\n      \"height\": 509,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"ba1949d0-7cf4-4df3-9065-0fe9e189e525\",\n      \"label\": \"label-2802\",\n      \"height\": 413,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"94b9fda7-92c3-4455-9a80-126c770f0ffa\",\n      \"label\": \"label-2803\",\n      \"height\": 179,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"148ccb09-55bc-47a9-9e8b-cb998912558a\",\n      \"label\": \"label-2804\",\n      \"height\": 386,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"700b49f2-e0b4-43f4-9e6e-ee088a43f6bd\",\n      \"label\": \"label-2805\",\n      \"height\": 419,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"250052ef-b2e8-43a7-be65-86e61cdd485f\",\n      \"label\": \"label-2806\",\n      \"height\": 394,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"a0075c2e-b26c-4562-97ba-caf80ecca84c\",\n      \"label\": \"label-2807\",\n      \"height\": 293,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"470397d7-3830-44a4-8a0c-c31db5f60560\",\n      \"label\": \"label-2808\",\n      \"height\": 401,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"7f39b9c7-2f9c-4d8d-9272-2da50e225aec\",\n      \"label\": \"label-2809\",\n      \"height\": 500,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"b6d2864c-684f-4cef-ab3d-141296e29979\",\n      \"label\": \"label-2810\",\n      \"height\": 266,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"bbffd96b-6226-4ae3-ad02-75d97d23e6ee\",\n      \"label\": \"label-2811\",\n      \"height\": 247,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"22744bb2-8c44-418c-adeb-60a2088e187d\",\n      \"label\": \"label-2812\",\n      \"height\": 135,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"c80b2a82-6453-402c-8abb-5d9c93dd5eb3\",\n      \"label\": \"label-2813\",\n      \"height\": 267,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"a444b4b6-9724-4bf9-871a-b2bd58722b94\",\n      \"label\": \"label-2814\",\n      \"height\": 524,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"b9c76dd3-a67c-420a-87fa-6741b80926cc\",\n      \"label\": \"label-2815\",\n      \"height\": 469,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"b9fa04d0-8442-467a-ba3b-1d4ddd69229f\",\n      \"label\": \"label-2816\",\n      \"height\": 383,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"b0715984-1350-48b7-b6e4-3b9a9af22466\",\n      \"label\": \"label-2817\",\n      \"height\": 322,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"f1240a88-6422-4246-b362-e3efe8511e73\",\n      \"label\": \"label-2818\",\n      \"height\": 244,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"b0f43d72-0847-47aa-a2ad-9af94996bac9\",\n      \"label\": \"label-2819\",\n      \"height\": 84,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"06aed08c-0514-4eca-bb5a-709a18ddaa9b\",\n      \"label\": \"label-2820\",\n      \"height\": 349,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"59cc5f90-159a-40ac-868b-73c8e0e1048a\",\n      \"label\": \"label-2821\",\n      \"height\": 290,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"1e7f633e-8555-4e6f-9986-fa7c1ba2e448\",\n      \"label\": \"label-2822\",\n      \"height\": 229,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"a08ec056-6d4c-4d8a-8016-f41c22773f1c\",\n      \"label\": \"label-2823\",\n      \"height\": 195,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"cdc08e18-408e-48f8-96c2-2b82e38ab52b\",\n      \"label\": \"label-2824\",\n      \"height\": 488,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"0ef026a0-e76d-4cf6-89e5-85054b2e2ad4\",\n      \"label\": \"label-2825\",\n      \"height\": 182,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"7e982f22-1cd7-47e0-88e9-c2f131a2933b\",\n      \"label\": \"label-2826\",\n      \"height\": 388,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"1b59c55f-0982-4858-9c36-14c7f60033cf\",\n      \"label\": \"label-2827\",\n      \"height\": 106,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"2861ea04-64e1-4bdf-bd2b-8e5c1516a634\",\n      \"label\": \"label-2828\",\n      \"height\": 279,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"63fde62d-a86f-4ed4-8b53-97481bca2594\",\n      \"label\": \"label-2829\",\n      \"height\": 50,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"c192338b-58b3-4028-97bc-8e72afc49dcf\",\n      \"label\": \"label-2830\",\n      \"height\": 294,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"79af6aff-1f0e-49e6-90b2-dbd322b8593c\",\n      \"label\": \"label-2831\",\n      \"height\": 91,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"5688608f-1a25-434a-bdfb-214c9b6c5d3d\",\n      \"label\": \"label-2832\",\n      \"height\": 437,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"38fd5970-7f1f-43ea-8ce2-37bb24397bee\",\n      \"label\": \"label-2833\",\n      \"height\": 313,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"58e38fc0-b9ba-48ea-9f47-377801ef6656\",\n      \"label\": \"label-2834\",\n      \"height\": 452,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"60e59a9a-a7f7-4bd6-a1c7-1d1e85670b68\",\n      \"label\": \"label-2835\",\n      \"height\": 429,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"a63f3835-be8c-4c7d-b941-85de8b6d1f3c\",\n      \"label\": \"label-2836\",\n      \"height\": 119,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"040d0e49-1d47-4904-906f-0d921326b591\",\n      \"label\": \"label-2837\",\n      \"height\": 414,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"390ad74f-f826-4ff0-8cb4-8aa15acaa856\",\n      \"label\": \"label-2838\",\n      \"height\": 171,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"90b653b6-92ed-472b-9d87-c0ba03a14918\",\n      \"label\": \"label-2839\",\n      \"height\": 284,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"db9d3230-faa2-4951-a6f9-db162c485acc\",\n      \"label\": \"label-2840\",\n      \"height\": 502,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"b251be7f-fd35-43c9-81b1-89bbb3f5214a\",\n      \"label\": \"label-2841\",\n      \"height\": 62,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"3be297d2-9284-4a5d-af3f-3141ae665a14\",\n      \"label\": \"label-2842\",\n      \"height\": 166,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"9e8343ba-944a-4eda-912e-7bbd4d770c99\",\n      \"label\": \"label-2843\",\n      \"height\": 515,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"6da5acc7-56c6-4aca-a238-6358fb3b28b7\",\n      \"label\": \"label-2844\",\n      \"height\": 266,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"b77ccb01-c255-45d0-8348-60ddfba783e9\",\n      \"label\": \"label-2845\",\n      \"height\": 432,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"3fa7e2d9-d4c7-4338-aaec-b6dc16431570\",\n      \"label\": \"label-2846\",\n      \"height\": 419,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"c8564058-786d-4e03-896e-84ef09a48f86\",\n      \"label\": \"label-2847\",\n      \"height\": 406,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"a6b06a09-a6e9-477f-83c5-23f359a991dd\",\n      \"label\": \"label-2848\",\n      \"height\": 123,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"6cc94c33-7619-409b-8f31-464c6d3642b2\",\n      \"label\": \"label-2849\",\n      \"height\": 391,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"3436f168-0205-4193-9256-ab156b4b4a5e\",\n      \"label\": \"label-2850\",\n      \"height\": 259,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"0ba2cd75-f501-416d-b3ef-2d5282765b3e\",\n      \"label\": \"label-2851\",\n      \"height\": 451,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"1f17b10d-15ed-4a2b-b2d0-3d0a2a8565ca\",\n      \"label\": \"label-2852\",\n      \"height\": 297,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"ee687289-27ef-4b14-8e30-521ce7b7defc\",\n      \"label\": \"label-2853\",\n      \"height\": 433,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"acbb5b4c-0650-497e-9b3f-bb201c4fc5d5\",\n      \"label\": \"label-2854\",\n      \"height\": 345,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"142e9d4d-bed0-44e1-923e-aca31e693753\",\n      \"label\": \"label-2855\",\n      \"height\": 129,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"3b890e04-01c7-4523-9045-47c31fee4fbf\",\n      \"label\": \"label-2856\",\n      \"height\": 220,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"20955d0e-b577-4a43-ad5f-ac154a8af5df\",\n      \"label\": \"label-2857\",\n      \"height\": 448,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"dd660ac1-1a23-4fc6-a568-5d8cdd9df390\",\n      \"label\": \"label-2858\",\n      \"height\": 476,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"b8b147a6-a611-4f7c-a16c-793bbdabbc90\",\n      \"label\": \"label-2859\",\n      \"height\": 410,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"bc7e6898-2a31-4a4d-bb72-20c42032bb70\",\n      \"label\": \"label-2860\",\n      \"height\": 509,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"3218fc19-39c2-49ca-a368-3e5531b9f9b1\",\n      \"label\": \"label-2861\",\n      \"height\": 358,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"3e8740e9-1fe0-42f2-bb9c-df9b0aae1e10\",\n      \"label\": \"label-2862\",\n      \"height\": 159,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"e3686b9c-158f-4bfe-ae12-10ddb30d977c\",\n      \"label\": \"label-2863\",\n      \"height\": 419,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"6ecce991-13d4-43ef-bfbe-7ae41593f63b\",\n      \"label\": \"label-2864\",\n      \"height\": 227,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"6aabf451-2f56-4c64-be8c-ac4d51d17378\",\n      \"label\": \"label-2865\",\n      \"height\": 284,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"db9ca00d-e219-4a19-a114-494b23e45220\",\n      \"label\": \"label-2866\",\n      \"height\": 497,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"39dcca35-54a6-4158-aac8-954c1b63c985\",\n      \"label\": \"label-2867\",\n      \"height\": 503,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"e84a58e7-e82a-404c-8a5a-5506b02bbf5a\",\n      \"label\": \"label-2868\",\n      \"height\": 238,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"23540f15-a488-4519-a6be-a56a5cea323c\",\n      \"label\": \"label-2869\",\n      \"height\": 401,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"c72f4c32-2b83-4fa2-abd3-7043ba2476e7\",\n      \"label\": \"label-2870\",\n      \"height\": 123,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"69815267-8095-4d3d-97c1-55af7fe42f25\",\n      \"label\": \"label-2871\",\n      \"height\": 357,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"19dc0708-cdfa-4b0c-a0f5-09df94919398\",\n      \"label\": \"label-2872\",\n      \"height\": 90,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"14bebe1f-cef8-497a-8591-c2ecadd8d3d9\",\n      \"label\": \"label-2873\",\n      \"height\": 296,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"325370ad-6099-46d6-b7bf-c7af420956b3\",\n      \"label\": \"label-2874\",\n      \"height\": 74,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"301ed917-582c-4684-8dd1-0cc86aeb2565\",\n      \"label\": \"label-2875\",\n      \"height\": 439,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"254de0dd-db2d-4302-b3bb-3ac472fca796\",\n      \"label\": \"label-2876\",\n      \"height\": 233,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"2fc55088-a42b-44f8-82d4-90124f3a0c7b\",\n      \"label\": \"label-2877\",\n      \"height\": 325,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"65e44ff1-a373-4bb5-92fe-0f3c450b1709\",\n      \"label\": \"label-2878\",\n      \"height\": 91,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"2e7f6297-f7ef-4fe0-a568-b62b6c23b373\",\n      \"label\": \"label-2879\",\n      \"height\": 131,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"123d954d-491f-4529-a009-f6954f0102e9\",\n      \"label\": \"label-2880\",\n      \"height\": 319,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"03388e86-3722-4589-9950-d1756865cbb2\",\n      \"label\": \"label-2881\",\n      \"height\": 170,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"51975bce-41e9-4e17-9886-0974baa6b49d\",\n      \"label\": \"label-2882\",\n      \"height\": 193,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"4af60822-fa88-4960-92bb-66d501bc518a\",\n      \"label\": \"label-2883\",\n      \"height\": 385,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"04699510-772f-4c3a-98ad-2671822fb844\",\n      \"label\": \"label-2884\",\n      \"height\": 217,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"0d1163ff-8eae-47a3-9b3d-85d7f3936878\",\n      \"label\": \"label-2885\",\n      \"height\": 448,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"19279ea9-8ae7-466e-964d-75d20677c1a6\",\n      \"label\": \"label-2886\",\n      \"height\": 139,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"c01f35a7-fc02-42fb-8f9a-90888703c17f\",\n      \"label\": \"label-2887\",\n      \"height\": 399,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"eda223c2-8154-4ca3-929e-ed0e44f02458\",\n      \"label\": \"label-2888\",\n      \"height\": 493,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"36428d09-d01e-468e-9d2e-37c41e6aed8b\",\n      \"label\": \"label-2889\",\n      \"height\": 118,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"42784959-2c66-45ea-89ab-7be3b9ceec61\",\n      \"label\": \"label-2890\",\n      \"height\": 185,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"78870600-d64a-4337-8ca9-ee73cf0f3ba0\",\n      \"label\": \"label-2891\",\n      \"height\": 426,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"d616b3dd-50cf-4e4a-b3a2-4c37d4af02b3\",\n      \"label\": \"label-2892\",\n      \"height\": 80,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"b6e1f8bc-dc0b-49aa-bcc8-d84fcdad173a\",\n      \"label\": \"label-2893\",\n      \"height\": 453,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"72f9cc5f-c8ab-4d16-9568-40d4d0ead4d6\",\n      \"label\": \"label-2894\",\n      \"height\": 287,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"3bed67e4-479d-437b-9f70-52179addc841\",\n      \"label\": \"label-2895\",\n      \"height\": 67,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"5904c776-940c-4736-9602-4c49c2ada3e8\",\n      \"label\": \"label-2896\",\n      \"height\": 297,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"bc2903b1-005a-4ff4-883e-52f92c84edfd\",\n      \"label\": \"label-2897\",\n      \"height\": 415,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"aee28166-5b25-4606-a0b4-daef5c507bcf\",\n      \"label\": \"label-2898\",\n      \"height\": 88,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"e79ed0fa-f967-47af-981a-15dcd52268f6\",\n      \"label\": \"label-2899\",\n      \"height\": 480,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"45afa842-39d0-43be-a722-35490136eb1a\",\n      \"label\": \"label-2900\",\n      \"height\": 291,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"9cde6aeb-3003-41ca-a94c-9655fc6fa2b1\",\n      \"label\": \"label-2901\",\n      \"height\": 212,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"575933b0-163d-48b8-bba8-e2d3e02f511c\",\n      \"label\": \"label-2902\",\n      \"height\": 474,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"456fa29b-6229-4147-b285-4134dad4243d\",\n      \"label\": \"label-2903\",\n      \"height\": 323,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"049e9ad8-ddb1-4555-aacf-3a7808f10fde\",\n      \"label\": \"label-2904\",\n      \"height\": 222,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"b0a63800-f204-4b21-86a2-8802eba6dbc6\",\n      \"label\": \"label-2905\",\n      \"height\": 94,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"02246746-6382-4eb5-947e-6747112c5695\",\n      \"label\": \"label-2906\",\n      \"height\": 485,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"0d5109a8-c850-46b5-90dc-317e1868f963\",\n      \"label\": \"label-2907\",\n      \"height\": 323,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"99b49903-c152-4255-abf6-af9c601038f2\",\n      \"label\": \"label-2908\",\n      \"height\": 444,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"81b11070-b79d-4df7-8433-bed0556f2b9a\",\n      \"label\": \"label-2909\",\n      \"height\": 519,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"8dfe3c9b-77aa-4994-91ac-cc587c746413\",\n      \"label\": \"label-2910\",\n      \"height\": 371,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"63cbfe02-f8d5-4317-ac53-1e47464f0f3a\",\n      \"label\": \"label-2911\",\n      \"height\": 110,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"5b61652e-ee19-4fdc-b313-a102516ed634\",\n      \"label\": \"label-2912\",\n      \"height\": 97,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"ff8a18b8-eb55-4946-8ab2-fcd012dd6a59\",\n      \"label\": \"label-2913\",\n      \"height\": 518,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"cc868867-54a1-49f2-9a2d-b71d569b6127\",\n      \"label\": \"label-2914\",\n      \"height\": 314,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"7c6b4eb4-1539-4d85-a1a3-55da56e27c5d\",\n      \"label\": \"label-2915\",\n      \"height\": 188,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"8be22782-e2cd-4477-a5dc-d8e47f5210fc\",\n      \"label\": \"label-2916\",\n      \"height\": 390,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"0d7eef3b-4cb3-4717-a2c5-17ddadeb2228\",\n      \"label\": \"label-2917\",\n      \"height\": 70,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"5a6f3455-7b2b-4fcc-96d9-743d6c6ccb02\",\n      \"label\": \"label-2918\",\n      \"height\": 426,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"ff93a476-359b-491e-97cb-c5d845eed59f\",\n      \"label\": \"label-2919\",\n      \"height\": 331,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"5c43fbbf-26bb-4c35-83c6-1fedab94f1a4\",\n      \"label\": \"label-2920\",\n      \"height\": 320,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"62ce25a9-0e9a-4a06-82f5-d92bc315e029\",\n      \"label\": \"label-2921\",\n      \"height\": 318,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"c6439d43-3bb5-495c-9e26-c63ff323f714\",\n      \"label\": \"label-2922\",\n      \"height\": 365,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"22153940-089f-4256-a0b3-604d06b6bfd6\",\n      \"label\": \"label-2923\",\n      \"height\": 137,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"f3bf9a75-5d74-457c-b54b-4617495add6b\",\n      \"label\": \"label-2924\",\n      \"height\": 40,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"6ecf452a-750a-47b3-bee4-d59a470d2d59\",\n      \"label\": \"label-2925\",\n      \"height\": 408,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"79c755bc-fff6-45a9-92d1-26d17e5363ce\",\n      \"label\": \"label-2926\",\n      \"height\": 166,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"d1016b42-35c1-4dd6-9154-bcb1cd086aac\",\n      \"label\": \"label-2927\",\n      \"height\": 446,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"def61ca5-81ec-49ea-997d-87efbffb10cf\",\n      \"label\": \"label-2928\",\n      \"height\": 247,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"5e6d513f-74f3-4eb3-aebb-89acc236a35f\",\n      \"label\": \"label-2929\",\n      \"height\": 152,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"a4dcda5d-5ead-42e1-bd8d-83d120d81146\",\n      \"label\": \"label-2930\",\n      \"height\": 53,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"cb00204e-e477-4897-9113-204317d5fa46\",\n      \"label\": \"label-2931\",\n      \"height\": 45,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"3ef9c90b-c4d1-4279-bb89-47a15434555f\",\n      \"label\": \"label-2932\",\n      \"height\": 438,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"1f5f4c13-9f19-416f-be16-412acb371b30\",\n      \"label\": \"label-2933\",\n      \"height\": 137,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"ecf106c6-80bc-477f-847b-7b2ecdbd1bea\",\n      \"label\": \"label-2934\",\n      \"height\": 322,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"18ac88c6-de68-45ea-ac83-5524b7065eef\",\n      \"label\": \"label-2935\",\n      \"height\": 294,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"cf68dbdd-2f28-4950-8c14-8db2fce6496c\",\n      \"label\": \"label-2936\",\n      \"height\": 32,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"1f479c61-20ca-4fab-a2ce-fe6ab1c120e5\",\n      \"label\": \"label-2937\",\n      \"height\": 160,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"f31ac9f1-a368-49f8-8f87-7a25659dc188\",\n      \"label\": \"label-2938\",\n      \"height\": 468,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"178b0cad-834c-40f9-bd24-758f86c0c3e7\",\n      \"label\": \"label-2939\",\n      \"height\": 265,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"7b2059f6-68f0-449e-a09b-933bcc402e62\",\n      \"label\": \"label-2940\",\n      \"height\": 42,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"dd09c0ba-c9d0-40ad-bd52-64f932e25c04\",\n      \"label\": \"label-2941\",\n      \"height\": 150,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"59b257c0-a8c1-483c-8b89-0b520cefd64e\",\n      \"label\": \"label-2942\",\n      \"height\": 370,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"47d7a7c2-299d-4d0b-b2b4-bf0641b1bc4f\",\n      \"label\": \"label-2943\",\n      \"height\": 47,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"999e4051-90e5-4174-ae89-a3c6b7a716cb\",\n      \"label\": \"label-2944\",\n      \"height\": 441,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"7b868bb3-6d1a-4e00-b34d-c36bbe5c841f\",\n      \"label\": \"label-2945\",\n      \"height\": 399,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"13db22ba-7861-49c0-8095-f1ada915bc50\",\n      \"label\": \"label-2946\",\n      \"height\": 245,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"253c62a0-6013-4b34-a6f5-f429fada1b52\",\n      \"label\": \"label-2947\",\n      \"height\": 442,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"9269bdec-3164-43f6-91ac-2ddbfcb768de\",\n      \"label\": \"label-2948\",\n      \"height\": 272,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"149b25f2-4bde-4247-8e5e-51bde91c853b\",\n      \"label\": \"label-2949\",\n      \"height\": 33,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"d57093c3-0142-4b53-b242-47862ee367d4\",\n      \"label\": \"label-2950\",\n      \"height\": 426,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"203695e2-50eb-4b9a-95a7-af3a09707d0b\",\n      \"label\": \"label-2951\",\n      \"height\": 133,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"e39fb298-d667-45a5-9db5-85ed1bed0fe3\",\n      \"label\": \"label-2952\",\n      \"height\": 364,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"39326a23-741c-4052-b26b-c668081ea850\",\n      \"label\": \"label-2953\",\n      \"height\": 472,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"0f34b970-a31d-47f3-b6bc-7471c6e4c5c0\",\n      \"label\": \"label-2954\",\n      \"height\": 465,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"b2145850-7731-4496-bb42-0141787a0d14\",\n      \"label\": \"label-2955\",\n      \"height\": 428,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"421d2c6f-d11b-4e40-81f7-8728f89769de\",\n      \"label\": \"label-2956\",\n      \"height\": 215,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"4b4b6ba2-110e-488b-a575-df93d8a92288\",\n      \"label\": \"label-2957\",\n      \"height\": 284,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"eb9de83e-e6df-45d1-9b5e-9d0ed6d258da\",\n      \"label\": \"label-2958\",\n      \"height\": 453,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"dab57bb2-8827-42fe-841c-edde04bdb45d\",\n      \"label\": \"label-2959\",\n      \"height\": 205,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"0a44816e-f0a6-4e77-8c5b-bffc718b215d\",\n      \"label\": \"label-2960\",\n      \"height\": 296,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"fb81190a-9719-4a9d-a958-aee7a1950328\",\n      \"label\": \"label-2961\",\n      \"height\": 209,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"ce68b553-10e8-4025-873a-53b1c794befe\",\n      \"label\": \"label-2962\",\n      \"height\": 336,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"6abcfd80-3a31-483c-a28f-67f4a7ba0706\",\n      \"label\": \"label-2963\",\n      \"height\": 238,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"2872c868-d919-4c95-a9b7-d9d8fcf09abf\",\n      \"label\": \"label-2964\",\n      \"height\": 328,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"f76ca27e-e96c-4ca6-866c-1ecc5efbae38\",\n      \"label\": \"label-2965\",\n      \"height\": 425,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"f9352431-1463-42e0-95aa-786a5a5b2298\",\n      \"label\": \"label-2966\",\n      \"height\": 235,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"c1bc1acc-0bf8-4efd-83de-d9a49047c992\",\n      \"label\": \"label-2967\",\n      \"height\": 455,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"e88f816c-4bda-4f68-8de8-108d8b660416\",\n      \"label\": \"label-2968\",\n      \"height\": 224,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"eb840bf1-0340-468c-8efc-9b1ba21fe74b\",\n      \"label\": \"label-2969\",\n      \"height\": 154,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"a90f8e47-11f1-403a-b7de-f953af3a0330\",\n      \"label\": \"label-2970\",\n      \"height\": 116,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"5d78c586-d613-4df2-9d32-657b847c8888\",\n      \"label\": \"label-2971\",\n      \"height\": 421,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"ea8a2d34-e9c7-4e7d-912f-8950ee5eef29\",\n      \"label\": \"label-2972\",\n      \"height\": 210,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"90ce1329-7c33-4aa9-9946-db5eb1dca6d4\",\n      \"label\": \"label-2973\",\n      \"height\": 340,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"fd264658-c030-4e80-abd0-5c41a7e0afde\",\n      \"label\": \"label-2974\",\n      \"height\": 384,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"09da0120-d505-4561-9f4c-d110209cb89e\",\n      \"label\": \"label-2975\",\n      \"height\": 381,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"edff0e43-9330-41f7-92a8-974cb3e0f3b7\",\n      \"label\": \"label-2976\",\n      \"height\": 164,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"8babd3b7-6060-449a-b4b5-2584101cd919\",\n      \"label\": \"label-2977\",\n      \"height\": 353,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"0b866076-2652-4fd3-b102-fb715d2289ca\",\n      \"label\": \"label-2978\",\n      \"height\": 421,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"c5faff27-5d18-4e1f-bb85-ea05814f3b02\",\n      \"label\": \"label-2979\",\n      \"height\": 170,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"5b18e44f-3845-4eaa-8718-04a90f2009eb\",\n      \"label\": \"label-2980\",\n      \"height\": 32,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"ae2f46ec-027c-4a92-9d5d-381cdb245c75\",\n      \"label\": \"label-2981\",\n      \"height\": 470,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"b18c1c03-07be-4fa1-8c6b-d74f2de12e27\",\n      \"label\": \"label-2982\",\n      \"height\": 458,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"3ceda287-7bdd-493a-8b1c-8dc24d4e6147\",\n      \"label\": \"label-2983\",\n      \"height\": 270,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"60d4d32f-aa91-448d-9a8e-6a60f43e5756\",\n      \"label\": \"label-2984\",\n      \"height\": 296,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"df280f94-044b-4a60-acaa-3ef6a18aaef2\",\n      \"label\": \"label-2985\",\n      \"height\": 298,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"72ca13fb-e728-4b46-a7aa-8ba5e710631a\",\n      \"label\": \"label-2986\",\n      \"height\": 179,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"1ce8ba3e-fc9e-48a0-8b8e-188f8dbef288\",\n      \"label\": \"label-2987\",\n      \"height\": 52,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"0aa526c2-821b-499f-b503-1154232edfae\",\n      \"label\": \"label-2988\",\n      \"height\": 510,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"6bcedb98-8c13-4fa6-a90d-bd9e498bfcf8\",\n      \"label\": \"label-2989\",\n      \"height\": 215,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"ce608bb9-c15d-4340-a622-1522f79fbd07\",\n      \"label\": \"label-2990\",\n      \"height\": 201,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"edc64bd0-2c18-4179-91e5-683f40272856\",\n      \"label\": \"label-2991\",\n      \"height\": 395,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"7392ac09-2bdf-4947-9bf9-0c2cdab27ef8\",\n      \"label\": \"label-2992\",\n      \"height\": 532,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"dd352bfe-3826-4f15-b30f-fdb0d533136d\",\n      \"label\": \"label-2993\",\n      \"height\": 222,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"42dcbcd5-449c-4b0f-baa2-20b2230d7c27\",\n      \"label\": \"label-2994\",\n      \"height\": 191,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"163498c4-fc0a-4645-9c07-343bf2cf5a9e\",\n      \"label\": \"label-2995\",\n      \"height\": 301,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"74029e6e-e182-4daf-9b0e-a5cbf5983331\",\n      \"label\": \"label-2996\",\n      \"height\": 517,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"c7c89a11-a851-410b-96cd-7fbbfa3215fd\",\n      \"label\": \"label-2997\",\n      \"height\": 383,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"8811745c-13cb-4927-8081-91db0a5b65fa\",\n      \"label\": \"label-2998\",\n      \"height\": 494,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"62e9cec7-a466-453b-86c2-c27f71dc3a3c\",\n      \"label\": \"label-2999\",\n      \"height\": 452,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"6c5cf218-ead6-4b5d-a497-5bafe543d5d6\",\n      \"label\": \"label-3000\",\n      \"height\": 429,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"8d3068cd-04d6-4e28-acc2-2994cc02966f\",\n      \"label\": \"label-3001\",\n      \"height\": 493,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"5db10665-dc4d-4e2d-80cf-a1358e5cef03\",\n      \"label\": \"label-3002\",\n      \"height\": 355,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"9bce728d-dbbf-4c35-9b45-e22486189fe7\",\n      \"label\": \"label-3003\",\n      \"height\": 492,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"729a0d56-c339-4bde-b58b-e00167603720\",\n      \"label\": \"label-3004\",\n      \"height\": 332,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"242e15ed-a20b-4250-ad25-e7b8bbb7552d\",\n      \"label\": \"label-3005\",\n      \"height\": 379,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"64bd0dcf-ef92-4ada-91ff-ec213e251e4c\",\n      \"label\": \"label-3006\",\n      \"height\": 183,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"43eff57d-a931-424c-af26-ae87e72cb8c8\",\n      \"label\": \"label-3007\",\n      \"height\": 293,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"1bf24f8b-3dcb-4ff3-8bcd-288ec542298f\",\n      \"label\": \"label-3008\",\n      \"height\": 370,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"8456dbe3-2af9-4359-a87d-4acb1cf27ece\",\n      \"label\": \"label-3009\",\n      \"height\": 429,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"0d3da78d-636f-439d-9cff-47022d50a8ab\",\n      \"label\": \"label-3010\",\n      \"height\": 452,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"5fe79ab0-3af9-46d4-b213-ca871ce39e0b\",\n      \"label\": \"label-3011\",\n      \"height\": 180,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"11ef300b-5f7b-43a2-acbb-b1c3b2c905a4\",\n      \"label\": \"label-3012\",\n      \"height\": 172,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"7a04c2af-c036-40b4-ae3a-111c64c48f9d\",\n      \"label\": \"label-3013\",\n      \"height\": 336,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"d630a8bb-9ef7-4173-9654-a29dd8e5cd4a\",\n      \"label\": \"label-3014\",\n      \"height\": 471,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"0c47add0-68fc-443d-9a62-29914e2e99eb\",\n      \"label\": \"label-3015\",\n      \"height\": 132,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"65c7ef08-9ffc-4053-bf04-43660c7934f6\",\n      \"label\": \"label-3016\",\n      \"height\": 349,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"9694ba62-de74-40d9-9706-0391c234d2ce\",\n      \"label\": \"label-3017\",\n      \"height\": 451,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"1fb1f698-762e-4f96-8f78-097d98aa0e22\",\n      \"label\": \"label-3018\",\n      \"height\": 250,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"43140ac7-6ebd-40f9-8cc1-e31bce3b40e6\",\n      \"label\": \"label-3019\",\n      \"height\": 304,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"424f9d67-9f65-4ad6-8db1-7d3448870572\",\n      \"label\": \"label-3020\",\n      \"height\": 465,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"751f462c-8771-4276-b08d-4fbcf86f509d\",\n      \"label\": \"label-3021\",\n      \"height\": 433,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"fc7ca61f-e580-4ee0-8db8-32d2ff5d4bb9\",\n      \"label\": \"label-3022\",\n      \"height\": 105,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"a4ddbc10-4d24-4ebd-9c14-ef9883383b6a\",\n      \"label\": \"label-3023\",\n      \"height\": 108,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"658701ee-2cd2-4e82-aff0-b5d5085cfb8c\",\n      \"label\": \"label-3024\",\n      \"height\": 305,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"7ad51e92-7032-4564-af10-0097f77d8df1\",\n      \"label\": \"label-3025\",\n      \"height\": 340,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"00c43698-5f05-4bd1-9059-e0d4b2a5a454\",\n      \"label\": \"label-3026\",\n      \"height\": 257,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"60c84048-2c29-47d4-b474-53da8d734571\",\n      \"label\": \"label-3027\",\n      \"height\": 466,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"f52bf8e9-7e80-4523-afa1-839f2333a0e9\",\n      \"label\": \"label-3028\",\n      \"height\": 265,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"465c33d9-59e0-44e0-8ef7-ddc5de67ca8a\",\n      \"label\": \"label-3029\",\n      \"height\": 107,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"da69f8f3-6500-4bab-a2ac-1ddbfcff2628\",\n      \"label\": \"label-3030\",\n      \"height\": 456,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"c011d779-9f1d-492a-b212-51d5729d6f6d\",\n      \"label\": \"label-3031\",\n      \"height\": 510,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"84c6609a-00a2-44cd-a583-6e5c1a77e797\",\n      \"label\": \"label-3032\",\n      \"height\": 458,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"7fce3c7c-9385-4944-9eb6-020796a0138c\",\n      \"label\": \"label-3033\",\n      \"height\": 171,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"18e20273-8324-4e3e-af38-7e46ebfdc543\",\n      \"label\": \"label-3034\",\n      \"height\": 453,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"926e5364-4ec5-498b-9381-88f2e9ece2ee\",\n      \"label\": \"label-3035\",\n      \"height\": 328,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"5a4240d0-1b09-4110-93fb-e2643fd1a41b\",\n      \"label\": \"label-3036\",\n      \"height\": 438,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"bf647ebf-f41f-4729-8d38-7c857e9347b9\",\n      \"label\": \"label-3037\",\n      \"height\": 466,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"356d1510-f42f-47e1-8d96-562fbf55b07a\",\n      \"label\": \"label-3038\",\n      \"height\": 514,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"ced47f75-179a-45e7-bd1f-727806b5dfb3\",\n      \"label\": \"label-3039\",\n      \"height\": 474,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"8f070f15-744f-4e1f-8bea-386784bf55c4\",\n      \"label\": \"label-3040\",\n      \"height\": 530,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"b5272bf0-3d57-4383-8596-be3c6d408718\",\n      \"label\": \"label-3041\",\n      \"height\": 131,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"6f7f9d46-bda4-40e2-9ac2-e81cf89f363e\",\n      \"label\": \"label-3042\",\n      \"height\": 106,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"76013e59-980a-4a7f-b23e-2770294c2acc\",\n      \"label\": \"label-3043\",\n      \"height\": 77,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"a1eed7c4-3d2a-4ef0-a08a-8799e0a2fed6\",\n      \"label\": \"label-3044\",\n      \"height\": 522,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"db5f8b28-6d59-407c-94ee-c1652b2dd45f\",\n      \"label\": \"label-3045\",\n      \"height\": 336,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"8886c20f-dbc3-4f92-8fef-078864c71b52\",\n      \"label\": \"label-3046\",\n      \"height\": 288,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"521ec5c4-441c-4d12-9dd2-369bffdb23bc\",\n      \"label\": \"label-3047\",\n      \"height\": 349,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"fc8c680a-d20c-4244-9018-d453dcb48c2d\",\n      \"label\": \"label-3048\",\n      \"height\": 245,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"d5a9117d-9d33-4993-8a89-80c855822e8a\",\n      \"label\": \"label-3049\",\n      \"height\": 248,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"2d1d2357-0aa5-4830-a75e-f7ece16c9c78\",\n      \"label\": \"label-3050\",\n      \"height\": 282,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"72e41a70-cd86-44a1-9384-1c053c7e6d80\",\n      \"label\": \"label-3051\",\n      \"height\": 163,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"f3b879b0-19ee-41c0-b990-fb14aee72ece\",\n      \"label\": \"label-3052\",\n      \"height\": 365,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"52827b0d-afca-4bff-9d60-28cb1e742eec\",\n      \"label\": \"label-3053\",\n      \"height\": 337,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"d287e08d-5238-4f46-899f-3654ac2ec943\",\n      \"label\": \"label-3054\",\n      \"height\": 223,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"11235a62-cff1-4135-9678-510d5e22b990\",\n      \"label\": \"label-3055\",\n      \"height\": 115,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"fd771419-5fa7-4019-829f-4b3c9c7d9596\",\n      \"label\": \"label-3056\",\n      \"height\": 217,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"486bb298-fc5f-4294-9e9e-10b7fb3e5aa2\",\n      \"label\": \"label-3057\",\n      \"height\": 64,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"b0fa8454-c860-4fb3-bfc9-f5ee83e7ef7e\",\n      \"label\": \"label-3058\",\n      \"height\": 218,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"ca98aa6a-e485-4f38-8577-c5ce4376cf8b\",\n      \"label\": \"label-3059\",\n      \"height\": 469,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"76ce49f2-cb5a-44f5-a096-9378f88d5ede\",\n      \"label\": \"label-3060\",\n      \"height\": 209,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"42ace908-8be9-47ee-97d8-3aeb519c21fb\",\n      \"label\": \"label-3061\",\n      \"height\": 397,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"03139f57-ac85-4141-ba65-787a6e9350dc\",\n      \"label\": \"label-3062\",\n      \"height\": 126,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"11b719d3-f3ff-4f83-bb63-6db6ac4bc1f2\",\n      \"label\": \"label-3063\",\n      \"height\": 247,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"ee51bd98-6797-49a9-847a-7bfb7a63e6d5\",\n      \"label\": \"label-3064\",\n      \"height\": 91,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"16968a8b-0ed0-456a-99f4-6e033ce118b6\",\n      \"label\": \"label-3065\",\n      \"height\": 232,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"b602fee9-5b68-4cb7-8ae3-7e8d289d8418\",\n      \"label\": \"label-3066\",\n      \"height\": 188,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"181df5bd-bce2-4829-bec0-e52be8090ff3\",\n      \"label\": \"label-3067\",\n      \"height\": 460,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"47318f2c-0177-4d1c-afb5-3383e8468642\",\n      \"label\": \"label-3068\",\n      \"height\": 82,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"6fca4210-0e9b-4bad-9eee-9b83c9eafcc3\",\n      \"label\": \"label-3069\",\n      \"height\": 145,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"865e349e-1cf6-49d9-a709-09c20270ba2d\",\n      \"label\": \"label-3070\",\n      \"height\": 416,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"b50b3d24-97ba-4918-92eb-75963c953009\",\n      \"label\": \"label-3071\",\n      \"height\": 390,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"5f9d0243-e84f-45d4-be2e-fa5537d60779\",\n      \"label\": \"label-3072\",\n      \"height\": 155,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"b38b314b-d752-4016-8ab5-0797dc85829c\",\n      \"label\": \"label-3073\",\n      \"height\": 480,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"d7e84318-8a52-425b-b9c7-ef96c3bb6478\",\n      \"label\": \"label-3074\",\n      \"height\": 384,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"d3944797-8ed2-4cfe-b85e-b35a8024f6b0\",\n      \"label\": \"label-3075\",\n      \"height\": 186,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"ff710bda-5020-43ec-aef8-57fc981f0e35\",\n      \"label\": \"label-3076\",\n      \"height\": 361,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"373792c2-a67e-41a7-806c-c06232718e5f\",\n      \"label\": \"label-3077\",\n      \"height\": 166,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"64ac34c6-d42f-4193-a28a-a1ef445ce546\",\n      \"label\": \"label-3078\",\n      \"height\": 193,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"348a0b49-2949-4299-8c27-e07c5b042cae\",\n      \"label\": \"label-3079\",\n      \"height\": 434,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"0628393a-d4c4-4fe8-a631-0d488806219c\",\n      \"label\": \"label-3080\",\n      \"height\": 197,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"cf7cf887-d69a-40ad-a66a-ff073d086df1\",\n      \"label\": \"label-3081\",\n      \"height\": 357,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"6c745eba-09c0-4ea3-bf41-c2049c7c4ed3\",\n      \"label\": \"label-3082\",\n      \"height\": 352,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"57cadd91-8406-40b3-a9c4-5736e86d24d1\",\n      \"label\": \"label-3083\",\n      \"height\": 462,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"4b3bc53f-5dc2-46e7-887b-251e86f580d1\",\n      \"label\": \"label-3084\",\n      \"height\": 454,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"ec477269-ce05-4554-a3f8-fb1b3f8f5c1d\",\n      \"label\": \"label-3085\",\n      \"height\": 206,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"70672fee-f51d-4131-bf6e-00d6d7781fa3\",\n      \"label\": \"label-3086\",\n      \"height\": 162,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"88ae9e02-e874-4e5c-867a-048348bc7465\",\n      \"label\": \"label-3087\",\n      \"height\": 332,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"55382b01-fbe6-4f2e-8eab-666d0a9935e3\",\n      \"label\": \"label-3088\",\n      \"height\": 136,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"e1a2bde4-6af0-4f4a-9bd2-419daeabcf48\",\n      \"label\": \"label-3089\",\n      \"height\": 118,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"d480acff-8775-463b-af64-0f2a979ea8df\",\n      \"label\": \"label-3090\",\n      \"height\": 45,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"9b7e7d5a-0672-456e-943d-662748a44467\",\n      \"label\": \"label-3091\",\n      \"height\": 153,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"eede428a-ecca-47e2-8f5d-15b494100563\",\n      \"label\": \"label-3092\",\n      \"height\": 326,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"00353eea-0d68-4c0e-9859-9ab7f58700c2\",\n      \"label\": \"label-3093\",\n      \"height\": 378,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"8f421fa0-7919-4a05-9369-02cacf1febbd\",\n      \"label\": \"label-3094\",\n      \"height\": 301,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"f44156bb-aae1-4ae6-ad75-b7a03e52770a\",\n      \"label\": \"label-3095\",\n      \"height\": 192,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"93fd917c-89d9-434f-8b93-dfbab731550f\",\n      \"label\": \"label-3096\",\n      \"height\": 268,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"2c540354-bcd0-49c6-addc-0e0bb3e8866e\",\n      \"label\": \"label-3097\",\n      \"height\": 96,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"b4115f0a-e9d9-43c2-aa19-2d32cf9d3d7c\",\n      \"label\": \"label-3098\",\n      \"height\": 313,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"0b4e0f6d-ebbd-4c95-9530-dd561c626bf2\",\n      \"label\": \"label-3099\",\n      \"height\": 128,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"8dc11aa3-b102-419d-a8e6-d52cb269d996\",\n      \"label\": \"label-3100\",\n      \"height\": 72,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"2ac763f7-af98-4d01-8fe3-5cb6957cc185\",\n      \"label\": \"label-3101\",\n      \"height\": 523,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"2ca798ef-e10f-44d3-9469-5680c2a330b8\",\n      \"label\": \"label-3102\",\n      \"height\": 54,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"1c07bf7a-7a53-4b64-b021-7b2255477775\",\n      \"label\": \"label-3103\",\n      \"height\": 83,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"c2e7fa5f-ca81-40fb-8115-f15a2e28ad6c\",\n      \"label\": \"label-3104\",\n      \"height\": 148,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"c1704989-6e3d-4aac-983c-75fdfebdd4b3\",\n      \"label\": \"label-3105\",\n      \"height\": 301,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"3ac389bf-8626-401c-ab8f-3c1bd959be3e\",\n      \"label\": \"label-3106\",\n      \"height\": 358,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"85313c96-a452-445f-88c7-f157846fc018\",\n      \"label\": \"label-3107\",\n      \"height\": 138,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"8845efe3-b62e-47cf-90b1-627b36f4929d\",\n      \"label\": \"label-3108\",\n      \"height\": 60,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"6acc2817-b0b9-403a-b00d-66125afe99b9\",\n      \"label\": \"label-3109\",\n      \"height\": 212,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"405c76e8-e59e-40ca-a5a8-e74b7cc9ea0c\",\n      \"label\": \"label-3110\",\n      \"height\": 75,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"c1817875-3a0e-44ed-9530-43da65df41a6\",\n      \"label\": \"label-3111\",\n      \"height\": 338,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"2569be77-9561-42a2-8abc-50b57727df07\",\n      \"label\": \"label-3112\",\n      \"height\": 520,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"245237d8-05a6-4eb0-b9bd-dbee4af54aa8\",\n      \"label\": \"label-3113\",\n      \"height\": 70,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"e1f0be4b-9b48-437d-97c0-f87a801a1bdb\",\n      \"label\": \"label-3114\",\n      \"height\": 388,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"181ef6de-71a3-48fe-93b7-d7d9b06e6d7a\",\n      \"label\": \"label-3115\",\n      \"height\": 293,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"9a8d53de-ca77-496e-ad3f-deb9ed728947\",\n      \"label\": \"label-3116\",\n      \"height\": 476,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"22aa6dff-5a09-4ae1-a8e0-a7ac2503dd60\",\n      \"label\": \"label-3117\",\n      \"height\": 65,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"79a563fc-f06f-4808-a170-502297a7dc6a\",\n      \"label\": \"label-3118\",\n      \"height\": 145,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"75c88b46-61e4-487c-a4d2-99eba972dea8\",\n      \"label\": \"label-3119\",\n      \"height\": 177,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"11e685cc-a06d-4c26-b530-cce8c302bd2e\",\n      \"label\": \"label-3120\",\n      \"height\": 448,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"a3f56a3a-019c-4aa9-8c06-dea987085d9e\",\n      \"label\": \"label-3121\",\n      \"height\": 201,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"2267ebd7-50f7-463d-ba41-87c2ed802bfc\",\n      \"label\": \"label-3122\",\n      \"height\": 484,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"8bfe1e65-ce2d-46b6-8fe1-1f9a40de080e\",\n      \"label\": \"label-3123\",\n      \"height\": 323,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"455db1a7-a9d7-4098-99a5-a7cd5334ec43\",\n      \"label\": \"label-3124\",\n      \"height\": 52,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"9a762ef5-af1b-4ada-a594-087948d6dd32\",\n      \"label\": \"label-3125\",\n      \"height\": 114,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"d81341f2-d4ec-4880-af96-b1b7fac0c38f\",\n      \"label\": \"label-3126\",\n      \"height\": 38,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"853b0dd4-f58e-4647-8354-eb3e8c110b64\",\n      \"label\": \"label-3127\",\n      \"height\": 436,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"22c4152e-13f0-4d0b-b6ed-4f753d91df75\",\n      \"label\": \"label-3128\",\n      \"height\": 62,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"cf42ec14-4bc3-488a-bd1a-8ec4a46c7c22\",\n      \"label\": \"label-3129\",\n      \"height\": 144,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"75ee3b40-82b0-4834-a6da-a49a63981f43\",\n      \"label\": \"label-3130\",\n      \"height\": 393,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"fa9bb290-513a-4a03-ab16-630dc257f347\",\n      \"label\": \"label-3131\",\n      \"height\": 175,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"4b8d7dc0-f7e6-4d48-9629-bf489e263fd5\",\n      \"label\": \"label-3132\",\n      \"height\": 402,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"098176db-a294-4009-a27b-98535b824a71\",\n      \"label\": \"label-3133\",\n      \"height\": 402,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"05f9afab-0648-4ba9-9189-3c361669da7b\",\n      \"label\": \"label-3134\",\n      \"height\": 133,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"4142e3be-0a27-4eb1-a22c-765243047c99\",\n      \"label\": \"label-3135\",\n      \"height\": 169,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"2e7857cc-7818-4334-b168-22d9019028b6\",\n      \"label\": \"label-3136\",\n      \"height\": 258,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"49ddc052-0e55-470d-a175-8a7a4af24941\",\n      \"label\": \"label-3137\",\n      \"height\": 300,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"cda7c764-4399-4515-9189-fc00b9c9f19c\",\n      \"label\": \"label-3138\",\n      \"height\": 139,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"83edb55e-b7c9-4b37-ac54-6aa1efe23b6e\",\n      \"label\": \"label-3139\",\n      \"height\": 413,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"dae548b5-d9ae-465a-8ae1-87a8a0671f32\",\n      \"label\": \"label-3140\",\n      \"height\": 68,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"7abe9e3b-fd96-4bb4-8692-2ed0b353c542\",\n      \"label\": \"label-3141\",\n      \"height\": 405,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"2364c3c7-291b-473b-8841-269e3e0db05f\",\n      \"label\": \"label-3142\",\n      \"height\": 216,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"c0eef2ce-5a03-45ff-a4a7-06742d927d44\",\n      \"label\": \"label-3143\",\n      \"height\": 472,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"d21d8ce5-b265-433e-bb62-06a520baeaa0\",\n      \"label\": \"label-3144\",\n      \"height\": 478,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"f8587671-d71b-4a91-9f39-44c5e9863ee3\",\n      \"label\": \"label-3145\",\n      \"height\": 177,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"2f539d44-4dd0-43aa-b6d0-591b930a105f\",\n      \"label\": \"label-3146\",\n      \"height\": 410,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"932a1c35-0d78-433d-9a7e-2adac2708d1f\",\n      \"label\": \"label-3147\",\n      \"height\": 495,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"5308bda4-667b-4de4-98f0-37d3841fe334\",\n      \"label\": \"label-3148\",\n      \"height\": 398,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"303493a9-22e3-4edf-8aa3-27f8191d1cdb\",\n      \"label\": \"label-3149\",\n      \"height\": 496,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"6ab746a3-31ab-47db-af51-85ee848ded82\",\n      \"label\": \"label-3150\",\n      \"height\": 419,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"536b1508-8e2c-4989-8167-fdeb630b7633\",\n      \"label\": \"label-3151\",\n      \"height\": 449,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"a340342a-d867-49c2-9adc-0665fb587fab\",\n      \"label\": \"label-3152\",\n      \"height\": 173,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"a28ab6c3-8752-476a-bf74-2be95828f144\",\n      \"label\": \"label-3153\",\n      \"height\": 332,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"f4b419b7-94ab-4490-a589-534662c8cdb0\",\n      \"label\": \"label-3154\",\n      \"height\": 66,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"c38809e6-7abb-435f-a19f-114a87ec6cee\",\n      \"label\": \"label-3155\",\n      \"height\": 514,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"c76acfff-8925-47c8-8368-b11f9cd329f9\",\n      \"label\": \"label-3156\",\n      \"height\": 462,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"9cdfd38b-2bba-4a79-b655-95f18a2a3b2f\",\n      \"label\": \"label-3157\",\n      \"height\": 360,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"19ebeed2-4a10-41f1-9e32-80a1316c9e3b\",\n      \"label\": \"label-3158\",\n      \"height\": 221,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"025e43e0-3c05-4fa2-b6f9-e8318cb37a8a\",\n      \"label\": \"label-3159\",\n      \"height\": 214,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"663c9a19-4e31-41cc-a771-a63745b79130\",\n      \"label\": \"label-3160\",\n      \"height\": 375,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"8ea62009-00d4-43bc-a622-00c54794de76\",\n      \"label\": \"label-3161\",\n      \"height\": 528,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"03e80fe1-37ea-409f-bbbd-835f587c44a4\",\n      \"label\": \"label-3162\",\n      \"height\": 280,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"57d51f02-e67c-40d8-b30b-5450fa463857\",\n      \"label\": \"label-3163\",\n      \"height\": 476,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"c9e46aa0-b497-43fc-8acc-74fb91c384f3\",\n      \"label\": \"label-3164\",\n      \"height\": 493,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"5a26b204-f0bb-4f31-bee8-a79ef0165b9c\",\n      \"label\": \"label-3165\",\n      \"height\": 52,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"ced72d76-1a80-4727-8009-76d8f46e0ca0\",\n      \"label\": \"label-3166\",\n      \"height\": 495,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"92e94cdb-cb7c-4906-b81f-57183a07e2b6\",\n      \"label\": \"label-3167\",\n      \"height\": 339,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"feba14cd-0c2b-4566-9d12-1a4ebf655a0f\",\n      \"label\": \"label-3168\",\n      \"height\": 464,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"d24cf4db-0b2b-48bf-97dd-1b52c23d18be\",\n      \"label\": \"label-3169\",\n      \"height\": 127,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"86450688-96e1-4ed6-9af5-bcf0ef88afad\",\n      \"label\": \"label-3170\",\n      \"height\": 496,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"896524cf-c773-485f-93f9-511e0347a1b1\",\n      \"label\": \"label-3171\",\n      \"height\": 249,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"9c15bbf8-ec06-4f91-8aec-740d88097c6f\",\n      \"label\": \"label-3172\",\n      \"height\": 447,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"b61cf1ef-2213-4509-922d-b2ed7296dd69\",\n      \"label\": \"label-3173\",\n      \"height\": 90,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"d18c6ab3-d034-408a-9f2d-3bed4730d3fb\",\n      \"label\": \"label-3174\",\n      \"height\": 141,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"fb5087fc-a60e-4fec-8190-44a082748ffb\",\n      \"label\": \"label-3175\",\n      \"height\": 157,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"dfd7be90-9376-4d60-a533-38ca5226cafa\",\n      \"label\": \"label-3176\",\n      \"height\": 527,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"52adb74c-3463-4160-968f-a733b629ff3a\",\n      \"label\": \"label-3177\",\n      \"height\": 137,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"e35633a7-5709-4859-8089-745bc19380bd\",\n      \"label\": \"label-3178\",\n      \"height\": 96,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"79a3f207-6426-48eb-8adb-3e9caab16948\",\n      \"label\": \"label-3179\",\n      \"height\": 38,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"34e763a1-c3f4-423e-822f-98b713fb73cc\",\n      \"label\": \"label-3180\",\n      \"height\": 346,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"04082bc5-f0f7-43e1-859b-f801d4c28ba9\",\n      \"label\": \"label-3181\",\n      \"height\": 495,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"875f77b3-5daa-4a5b-87bc-74ea306d945a\",\n      \"label\": \"label-3182\",\n      \"height\": 522,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"0482d4db-6004-4948-8cca-a64c8857e9c5\",\n      \"label\": \"label-3183\",\n      \"height\": 75,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"4e5f367b-473b-4c4a-b848-60fcf8aa75e1\",\n      \"label\": \"label-3184\",\n      \"height\": 60,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"84a15924-66eb-486e-8aba-64776157b4be\",\n      \"label\": \"label-3185\",\n      \"height\": 362,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"811c35a7-f982-4b4d-bd76-884464301388\",\n      \"label\": \"label-3186\",\n      \"height\": 36,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"c631b65a-9309-46cf-bb5d-80b19a1e9f7f\",\n      \"label\": \"label-3187\",\n      \"height\": 310,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"2cf3acfd-c3cf-43d0-8629-bd9bbe472018\",\n      \"label\": \"label-3188\",\n      \"height\": 191,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"cf33a9ac-b0c7-4266-b410-38d45b87b988\",\n      \"label\": \"label-3189\",\n      \"height\": 527,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"753d9292-69ac-409e-b8c1-884940812b09\",\n      \"label\": \"label-3190\",\n      \"height\": 439,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"42bd0804-5a77-48a3-bd29-21a8d52447f9\",\n      \"label\": \"label-3191\",\n      \"height\": 219,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"9267d524-4c67-41a0-a87f-74abc0c3b547\",\n      \"label\": \"label-3192\",\n      \"height\": 298,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"e8e8eb23-4587-435d-a3a3-58ce8ade8c5c\",\n      \"label\": \"label-3193\",\n      \"height\": 144,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"6b433125-68d6-48a7-b24d-63e342d8f9a5\",\n      \"label\": \"label-3194\",\n      \"height\": 363,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"484ed40f-f32e-4f1d-9ef1-4245e2f89602\",\n      \"label\": \"label-3195\",\n      \"height\": 326,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"bf59e366-2c0a-4740-9e05-a8e4d9e095b9\",\n      \"label\": \"label-3196\",\n      \"height\": 488,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"57f48dbe-2544-407a-8cbd-2df4907aac9e\",\n      \"label\": \"label-3197\",\n      \"height\": 370,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"a568caeb-317d-4644-b1ba-0a1f3d106cd7\",\n      \"label\": \"label-3198\",\n      \"height\": 80,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"de5081ac-5f02-435b-9e26-a6d2411c66c1\",\n      \"label\": \"label-3199\",\n      \"height\": 61,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"6efbd365-5bca-490a-b0d9-c387e3efc75d\",\n      \"label\": \"label-3200\",\n      \"height\": 33,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"62b06a5b-30e4-4761-acf2-f9b3999733fb\",\n      \"label\": \"label-3201\",\n      \"height\": 55,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"254ef927-6de6-40e1-a9bd-fddf5b61bf4c\",\n      \"label\": \"label-3202\",\n      \"height\": 147,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"bbc6c559-8546-4673-ab8d-46cee1c204b4\",\n      \"label\": \"label-3203\",\n      \"height\": 475,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"81d5f26c-2d6c-46a6-859f-41c717c9e0be\",\n      \"label\": \"label-3204\",\n      \"height\": 81,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"5fef51c1-60d3-4c6a-994d-1db9bd624abd\",\n      \"label\": \"label-3205\",\n      \"height\": 245,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"44e65695-d66a-4c0c-95c9-ea28cdab6c1e\",\n      \"label\": \"label-3206\",\n      \"height\": 368,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"9258c5bc-ccd0-431d-afa0-9c1341ec4a4f\",\n      \"label\": \"label-3207\",\n      \"height\": 342,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"e3e802ad-5689-47e1-a935-3e4ae45122cf\",\n      \"label\": \"label-3208\",\n      \"height\": 102,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"cb075eb9-db54-40c7-a3a0-c3e1440faca2\",\n      \"label\": \"label-3209\",\n      \"height\": 208,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"feb4b7f3-41f9-4265-9ab9-b8590a095335\",\n      \"label\": \"label-3210\",\n      \"height\": 245,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"58379d31-ecee-4c87-8279-8725d70ba23b\",\n      \"label\": \"label-3211\",\n      \"height\": 92,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"54080bca-54ef-4c4d-bd80-f94a936ef9fa\",\n      \"label\": \"label-3212\",\n      \"height\": 484,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"cab5b3be-8237-49e4-aec2-e15047e0b002\",\n      \"label\": \"label-3213\",\n      \"height\": 362,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"fede79db-afda-43d0-aeaa-0a0ba23f5bff\",\n      \"label\": \"label-3214\",\n      \"height\": 126,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"222ab69a-991e-491d-b3f6-322d1549da6d\",\n      \"label\": \"label-3215\",\n      \"height\": 239,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"a9d047c2-f7fb-4edd-9ea9-b78aec9bf478\",\n      \"label\": \"label-3216\",\n      \"height\": 480,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"2b5c666d-614d-4908-a208-81d5054f26a6\",\n      \"label\": \"label-3217\",\n      \"height\": 471,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"a15241a6-f26a-4408-ac72-37e519e1b18f\",\n      \"label\": \"label-3218\",\n      \"height\": 250,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"e6d29f61-1811-43d5-8f5e-77d5535e1cdf\",\n      \"label\": \"label-3219\",\n      \"height\": 499,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"6116cd33-d452-4d43-a855-d20096bdfbd6\",\n      \"label\": \"label-3220\",\n      \"height\": 489,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"473b4ba3-8cd3-4160-9894-cf66a3955995\",\n      \"label\": \"label-3221\",\n      \"height\": 436,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"527bb8cb-a8a2-4dee-9b6a-6018c6a0daa9\",\n      \"label\": \"label-3222\",\n      \"height\": 249,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"180d4b6c-09a0-415b-9935-3cb2cebed1b9\",\n      \"label\": \"label-3223\",\n      \"height\": 104,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"6fd8fd54-c0f5-4b42-9ac2-1939d45dc32a\",\n      \"label\": \"label-3224\",\n      \"height\": 154,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"89318df0-e847-4f23-b0bc-1a78f29370ed\",\n      \"label\": \"label-3225\",\n      \"height\": 422,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"339820a8-5114-4009-9cad-25e7b221fd52\",\n      \"label\": \"label-3226\",\n      \"height\": 242,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"6258179a-3cfa-4204-87ce-39c8276e11b5\",\n      \"label\": \"label-3227\",\n      \"height\": 98,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"c8eea80b-aebf-4148-9709-ab41b919d8ab\",\n      \"label\": \"label-3228\",\n      \"height\": 208,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"90aa5620-016b-4cde-8a44-0c49c2889eb0\",\n      \"label\": \"label-3229\",\n      \"height\": 81,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"3aab8b36-6cc3-4464-95bd-9ef8e22711bf\",\n      \"label\": \"label-3230\",\n      \"height\": 408,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"e8798826-c198-4c76-ae09-20e4113d9cac\",\n      \"label\": \"label-3231\",\n      \"height\": 386,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"1b227834-d25e-4b2b-99bd-a8cb6c5e2228\",\n      \"label\": \"label-3232\",\n      \"height\": 253,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"0dbc6747-6014-4a12-be68-2f36c7770ebb\",\n      \"label\": \"label-3233\",\n      \"height\": 437,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"94389628-8cf0-4d9e-9585-7d1de3af1333\",\n      \"label\": \"label-3234\",\n      \"height\": 499,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"9a505268-e1ee-4532-a3b4-8ec36e85942e\",\n      \"label\": \"label-3235\",\n      \"height\": 396,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"21989ea8-462d-4eec-a940-513dd41cf49b\",\n      \"label\": \"label-3236\",\n      \"height\": 247,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"32dda9b2-b10b-47f5-a631-98677a840161\",\n      \"label\": \"label-3237\",\n      \"height\": 297,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"3abdac8a-bb31-48c5-8cae-ad50e66a7aa4\",\n      \"label\": \"label-3238\",\n      \"height\": 525,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"c0afc55c-b257-42ae-b895-6a464a1ff105\",\n      \"label\": \"label-3239\",\n      \"height\": 274,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"3e454f10-c3c0-4ae3-a549-30b0172441ed\",\n      \"label\": \"label-3240\",\n      \"height\": 236,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"6a4c8d2c-f2cf-48ca-84e1-494483edc264\",\n      \"label\": \"label-3241\",\n      \"height\": 422,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"cc3821c7-7d7f-41ef-8148-a585739b9811\",\n      \"label\": \"label-3242\",\n      \"height\": 529,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"8a3a5892-b723-4d4a-b418-d3f611b437d0\",\n      \"label\": \"label-3243\",\n      \"height\": 228,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"fb08066d-fbd3-410d-870b-e3811707c4d7\",\n      \"label\": \"label-3244\",\n      \"height\": 183,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"7ca127f0-dde8-438a-9ee9-03193fcbd6f6\",\n      \"label\": \"label-3245\",\n      \"height\": 459,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"ac683db2-bff8-4286-b449-7873afe43732\",\n      \"label\": \"label-3246\",\n      \"height\": 339,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"670dac38-109b-455a-94d0-9449ad13f554\",\n      \"label\": \"label-3247\",\n      \"height\": 412,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"19ae5fea-a380-4684-9e24-9c7b0ed3310a\",\n      \"label\": \"label-3248\",\n      \"height\": 413,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"9bb91142-48be-47be-8f81-41997049c12f\",\n      \"label\": \"label-3249\",\n      \"height\": 222,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"8485175c-680b-4eb3-a9ac-f975280988ef\",\n      \"label\": \"label-3250\",\n      \"height\": 113,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"55851696-46f6-4841-8dd8-15ed5a374eb3\",\n      \"label\": \"label-3251\",\n      \"height\": 525,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"83dc6c7b-388c-4062-98e4-719a4084dce7\",\n      \"label\": \"label-3252\",\n      \"height\": 477,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"0376736d-1fb7-4a0c-b19b-407ded7979c7\",\n      \"label\": \"label-3253\",\n      \"height\": 191,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"5b1011aa-cb3a-4c00-85b2-aedb573edb29\",\n      \"label\": \"label-3254\",\n      \"height\": 215,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"858fe84e-6d30-46a7-8be1-9cf7d8bc2eb7\",\n      \"label\": \"label-3255\",\n      \"height\": 349,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"1081f703-3b5f-4593-ae6b-2db6c0c9b8dd\",\n      \"label\": \"label-3256\",\n      \"height\": 69,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"cdf97657-e99a-4910-92d4-2b6c7c15df26\",\n      \"label\": \"label-3257\",\n      \"height\": 212,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"ef48e82b-c4ef-49d3-b6d7-96ffc17c1d0b\",\n      \"label\": \"label-3258\",\n      \"height\": 298,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"d2dce2e5-fe2e-4993-b831-cc1b4df45504\",\n      \"label\": \"label-3259\",\n      \"height\": 373,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"262f39bc-a5e5-40f2-b817-5ad64bd29eb1\",\n      \"label\": \"label-3260\",\n      \"height\": 69,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"13797ad7-2ad1-4160-9dba-5f8fd2d2c6e9\",\n      \"label\": \"label-3261\",\n      \"height\": 67,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"7544f4b7-79ff-4b0a-be30-dc3a7f8b5276\",\n      \"label\": \"label-3262\",\n      \"height\": 400,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"f7c7a3ca-01b9-45af-b205-bf122e821ffa\",\n      \"label\": \"label-3263\",\n      \"height\": 443,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"9c246ee6-0add-4faa-9cff-34690d3f2c22\",\n      \"label\": \"label-3264\",\n      \"height\": 350,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"bb8694bd-594b-48d8-8cd0-0b3c81f06b9a\",\n      \"label\": \"label-3265\",\n      \"height\": 413,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"9f605a6e-e86d-4f83-918b-cda4a669c418\",\n      \"label\": \"label-3266\",\n      \"height\": 426,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"ffa3b30b-719e-4a45-9e59-fec8aaf22318\",\n      \"label\": \"label-3267\",\n      \"height\": 48,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"01c1e5c0-9973-4a4b-b646-d7d766d7cb5e\",\n      \"label\": \"label-3268\",\n      \"height\": 312,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"c9922023-d86b-423c-847c-ec362124b190\",\n      \"label\": \"label-3269\",\n      \"height\": 301,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"cddd7108-7228-475b-8a51-423b0585895e\",\n      \"label\": \"label-3270\",\n      \"height\": 223,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"38bc6c2d-32dc-498f-90dc-4cdceae391e6\",\n      \"label\": \"label-3271\",\n      \"height\": 460,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"17214a10-e890-4be5-92ef-5f88d2d694cf\",\n      \"label\": \"label-3272\",\n      \"height\": 483,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"ae93e454-111c-43da-9906-6b8ffbb0e3fa\",\n      \"label\": \"label-3273\",\n      \"height\": 320,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"b45b5862-867d-4ecb-a832-b872fb380f4b\",\n      \"label\": \"label-3274\",\n      \"height\": 242,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"39dd252f-3e48-47f4-be81-36741a807305\",\n      \"label\": \"label-3275\",\n      \"height\": 95,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"d2e6c337-e75a-4cea-8a23-944115df83c2\",\n      \"label\": \"label-3276\",\n      \"height\": 467,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"69c1691f-c311-426b-9b41-1e6b1d9089d0\",\n      \"label\": \"label-3277\",\n      \"height\": 324,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"1b966332-d87a-4270-9aa7-a1b24729d15e\",\n      \"label\": \"label-3278\",\n      \"height\": 465,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"aed1534a-2238-4e22-82a1-af27c4609cf7\",\n      \"label\": \"label-3279\",\n      \"height\": 77,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"ace3053f-b960-4488-a5c3-21b8052382c4\",\n      \"label\": \"label-3280\",\n      \"height\": 421,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"eb90c0ff-3a35-4de5-813e-709ed958c6c4\",\n      \"label\": \"label-3281\",\n      \"height\": 404,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"81fbe57c-9a39-49f3-a108-1986492ddd58\",\n      \"label\": \"label-3282\",\n      \"height\": 499,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"55f2ccd3-1484-4ac5-b52d-48e64dc0ed1a\",\n      \"label\": \"label-3283\",\n      \"height\": 342,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"d99d1a7d-8ccd-4ee4-ab42-fa6780f84448\",\n      \"label\": \"label-3284\",\n      \"height\": 316,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"4bf905c9-9b75-4102-82de-245827cddbf7\",\n      \"label\": \"label-3285\",\n      \"height\": 227,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"9a4ffb7a-0c01-43d0-82bf-131a486a5f5a\",\n      \"label\": \"label-3286\",\n      \"height\": 317,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"3e3975dd-960a-4ce2-aa08-bd22df40d948\",\n      \"label\": \"label-3287\",\n      \"height\": 119,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"6c929449-a2c6-42b7-a047-d6f851322e7b\",\n      \"label\": \"label-3288\",\n      \"height\": 56,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"17a2b40a-8f51-4019-a003-f27b4e88bd90\",\n      \"label\": \"label-3289\",\n      \"height\": 154,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"0d7b14c1-a6d6-4f72-aed5-b9b9e69403a4\",\n      \"label\": \"label-3290\",\n      \"height\": 279,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"61b04569-c5e4-4884-9c57-e566573989c0\",\n      \"label\": \"label-3291\",\n      \"height\": 79,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"89f45ad2-b227-42af-877c-95a8d9f2f78d\",\n      \"label\": \"label-3292\",\n      \"height\": 356,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"f519bc8e-4ade-479c-b6d6-094123d6048c\",\n      \"label\": \"label-3293\",\n      \"height\": 311,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"d8e66d3f-9905-4dd1-a249-27362555fd04\",\n      \"label\": \"label-3294\",\n      \"height\": 122,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"8cb4d0be-a6b6-44b8-a7cc-c10edab08877\",\n      \"label\": \"label-3295\",\n      \"height\": 366,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"317f5460-0884-486b-b8c5-425918164525\",\n      \"label\": \"label-3296\",\n      \"height\": 453,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"07db4631-bcc9-4a74-a143-5601ffccb961\",\n      \"label\": \"label-3297\",\n      \"height\": 270,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"6e4d6fc3-4245-4ed4-94fe-be88faeb2ff0\",\n      \"label\": \"label-3298\",\n      \"height\": 128,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"e53dc0c7-97b4-431b-ad24-8a1c482f6f9f\",\n      \"label\": \"label-3299\",\n      \"height\": 357,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"408b9a31-8d18-4358-b55e-c1f0c07589cb\",\n      \"label\": \"label-3300\",\n      \"height\": 480,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"efc172fe-235c-4241-94c2-870e9cabb18f\",\n      \"label\": \"label-3301\",\n      \"height\": 174,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"b2f91986-b171-494c-b15a-265c2c8be0ef\",\n      \"label\": \"label-3302\",\n      \"height\": 173,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"45879ef0-f000-4e9a-864a-8c637b04fe32\",\n      \"label\": \"label-3303\",\n      \"height\": 451,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"817984f5-7cee-4ec6-bdc5-395bcdf90476\",\n      \"label\": \"label-3304\",\n      \"height\": 271,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"93cc0e62-5db1-4619-acb4-2553ec7c3d57\",\n      \"label\": \"label-3305\",\n      \"height\": 379,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"eeb4d385-1a47-44d7-9923-dcbb07e072a1\",\n      \"label\": \"label-3306\",\n      \"height\": 271,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"c81f77bc-d7df-4aff-b7eb-7a8e798e0d1b\",\n      \"label\": \"label-3307\",\n      \"height\": 517,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"3d01f9d7-9666-4905-b348-edbdfd34fcca\",\n      \"label\": \"label-3308\",\n      \"height\": 524,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"2dffee6a-fbf3-4396-a9df-b2b73d1e1e54\",\n      \"label\": \"label-3309\",\n      \"height\": 249,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"43be7666-b89a-49e5-9e12-b83cfbbb0f50\",\n      \"label\": \"label-3310\",\n      \"height\": 38,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"22a59429-3242-49fd-948b-8a3bfa669ae1\",\n      \"label\": \"label-3311\",\n      \"height\": 70,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"d37355e9-d120-469b-bbf0-1335ca770c5f\",\n      \"label\": \"label-3312\",\n      \"height\": 358,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"00fed855-fdf3-4590-bf33-4c3324704f47\",\n      \"label\": \"label-3313\",\n      \"height\": 232,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"c020f50d-fe2a-4a74-ba03-868a49e48c42\",\n      \"label\": \"label-3314\",\n      \"height\": 288,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"51524c39-1653-4105-9fc4-19331f0fba94\",\n      \"label\": \"label-3315\",\n      \"height\": 66,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"5acdd838-797e-4ca1-b15e-39a855d00643\",\n      \"label\": \"label-3316\",\n      \"height\": 48,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"770c8f8a-26d7-438d-ad7f-f16557510c7e\",\n      \"label\": \"label-3317\",\n      \"height\": 362,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"beb9c909-2a7d-4ac6-8f40-13e466c054e4\",\n      \"label\": \"label-3318\",\n      \"height\": 279,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"0194d162-d155-4777-9d78-a028ec4b80b8\",\n      \"label\": \"label-3319\",\n      \"height\": 339,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"358eeff3-9c04-41d4-8cbb-3117161a663f\",\n      \"label\": \"label-3320\",\n      \"height\": 96,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"2b81ab41-0fa1-4343-8cff-6ec5b418d17b\",\n      \"label\": \"label-3321\",\n      \"height\": 409,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"791cd30a-bbd3-41d2-a457-bea1ea3084bf\",\n      \"label\": \"label-3322\",\n      \"height\": 488,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"8532742e-4bc6-4968-bff8-643583d04503\",\n      \"label\": \"label-3323\",\n      \"height\": 279,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"c4766af5-4914-41d9-9b77-2cb38862811d\",\n      \"label\": \"label-3324\",\n      \"height\": 333,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"dcc67c91-f30b-4ae1-9c9d-883243c73350\",\n      \"label\": \"label-3325\",\n      \"height\": 225,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"8e77f732-a02d-4bc2-9697-c4daf0842365\",\n      \"label\": \"label-3326\",\n      \"height\": 71,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"ca538e88-94a4-45f1-a9f3-23727b90d1d0\",\n      \"label\": \"label-3327\",\n      \"height\": 300,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"a91c77a6-c236-4491-9617-42fbd69c8180\",\n      \"label\": \"label-3328\",\n      \"height\": 204,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"57b4bb9c-3620-4d99-b747-ccd7543c3bf9\",\n      \"label\": \"label-3329\",\n      \"height\": 190,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"8d79cb9e-94dd-4568-9062-81bc6dc39f06\",\n      \"label\": \"label-3330\",\n      \"height\": 478,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"9b3aaa3b-dab2-4ac3-941f-6e5a0d464ee6\",\n      \"label\": \"label-3331\",\n      \"height\": 57,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"20a533e1-9b6f-420e-8da2-01504f54812b\",\n      \"label\": \"label-3332\",\n      \"height\": 169,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"6c8e2698-e2ad-4fa2-89fd-71824713cc25\",\n      \"label\": \"label-3333\",\n      \"height\": 522,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"ae51882f-fe17-4a4c-9459-0d9a92a9453d\",\n      \"label\": \"label-3334\",\n      \"height\": 293,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"1a8df027-5ccb-4373-b06a-f5024a627686\",\n      \"label\": \"label-3335\",\n      \"height\": 186,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"050ea9b6-9e52-4806-93b0-467bbe931f0c\",\n      \"label\": \"label-3336\",\n      \"height\": 437,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"85d6bc2e-e2c1-41b3-b9ed-df0ceff1817b\",\n      \"label\": \"label-3337\",\n      \"height\": 111,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"1c457091-5ee0-4555-8b9a-e9d8f019f8d4\",\n      \"label\": \"label-3338\",\n      \"height\": 409,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"73cd2f1d-8a39-496f-a425-e3b156586b48\",\n      \"label\": \"label-3339\",\n      \"height\": 410,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"ad442d48-6fe6-4812-b7c4-98ce9cdd522f\",\n      \"label\": \"label-3340\",\n      \"height\": 327,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"7c11877c-ec38-4dec-ab94-6d50b9333c7e\",\n      \"label\": \"label-3341\",\n      \"height\": 347,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"6fcf5233-7825-4746-8167-b4d582bed252\",\n      \"label\": \"label-3342\",\n      \"height\": 102,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"517854a9-4ed0-4f29-9d1f-8897fab61239\",\n      \"label\": \"label-3343\",\n      \"height\": 265,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"6a275bb7-1150-4d1f-9d3e-576f8ef47486\",\n      \"label\": \"label-3344\",\n      \"height\": 422,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"8208332d-5fa4-4138-a6cc-806069f0c775\",\n      \"label\": \"label-3345\",\n      \"height\": 260,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"6bd55322-0c8e-48f9-b9c2-91767107ff60\",\n      \"label\": \"label-3346\",\n      \"height\": 466,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"698ab8ac-96a2-46c6-982b-ac1bce63a1de\",\n      \"label\": \"label-3347\",\n      \"height\": 282,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"c48d988f-9e4d-4547-b65c-bf6abd0a478d\",\n      \"label\": \"label-3348\",\n      \"height\": 92,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"9c4de0bd-dce9-49dd-92cd-311ba7bbf10d\",\n      \"label\": \"label-3349\",\n      \"height\": 122,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"f41177b9-c8a4-4d28-adb2-4eaa8601ba54\",\n      \"label\": \"label-3350\",\n      \"height\": 198,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"932f5756-9cd3-48a2-862a-2f9de6ad4e20\",\n      \"label\": \"label-3351\",\n      \"height\": 320,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"095810b4-9bd7-42d7-8ae7-819f5393ef52\",\n      \"label\": \"label-3352\",\n      \"height\": 234,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"e913c3c2-d799-4268-bb00-6532367a13bb\",\n      \"label\": \"label-3353\",\n      \"height\": 453,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"53c7aff0-a753-4d22-9727-82dfdc30c616\",\n      \"label\": \"label-3354\",\n      \"height\": 330,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"4f8e25b1-2771-460f-9b08-fc614fda4392\",\n      \"label\": \"label-3355\",\n      \"height\": 392,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"b23db512-4142-483e-aa45-a17c8cd7a76e\",\n      \"label\": \"label-3356\",\n      \"height\": 341,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"5892f0b2-eff4-4d3f-acf4-41b434ff67ac\",\n      \"label\": \"label-3357\",\n      \"height\": 274,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"f32cacfd-1748-49c3-ba21-5ee96ab6f90f\",\n      \"label\": \"label-3358\",\n      \"height\": 280,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"1528a444-e098-44a9-acee-991db466eb17\",\n      \"label\": \"label-3359\",\n      \"height\": 92,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"08d09690-f09c-4b8e-8eca-126660cef499\",\n      \"label\": \"label-3360\",\n      \"height\": 233,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"76210f3b-1cc2-4fea-8d1d-4341de110405\",\n      \"label\": \"label-3361\",\n      \"height\": 524,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"e7cfd70e-0ce9-4038-9881-c544cdee6b00\",\n      \"label\": \"label-3362\",\n      \"height\": 143,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"88b98451-537a-45da-88fc-9b015179f161\",\n      \"label\": \"label-3363\",\n      \"height\": 236,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"5906dda9-de27-4b1d-98db-79ac616c635d\",\n      \"label\": \"label-3364\",\n      \"height\": 111,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"055e4c27-458a-4faf-8b8d-4d317a4c2c5b\",\n      \"label\": \"label-3365\",\n      \"height\": 377,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"ebfeb113-35e6-4a4f-9a66-d77c83788f00\",\n      \"label\": \"label-3366\",\n      \"height\": 99,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"71a22e1e-24ba-4f7e-bd26-5ff1796d17c4\",\n      \"label\": \"label-3367\",\n      \"height\": 340,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"7d5e02da-922a-4fc4-8dd8-7a71d4e17426\",\n      \"label\": \"label-3368\",\n      \"height\": 496,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"fa4311da-fd1c-4b49-a9eb-29a32f322c1d\",\n      \"label\": \"label-3369\",\n      \"height\": 81,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"5ef2cb1d-ff0f-471d-b1b3-ddf0acc4caa8\",\n      \"label\": \"label-3370\",\n      \"height\": 186,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"68f09486-7918-4a27-b519-cae654e25f98\",\n      \"label\": \"label-3371\",\n      \"height\": 70,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"0fa88738-d1cc-4fb3-8b0f-63217711cb96\",\n      \"label\": \"label-3372\",\n      \"height\": 56,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"c4c37629-1ca3-4c0c-baee-d00baaf595c5\",\n      \"label\": \"label-3373\",\n      \"height\": 75,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"a05d6064-d250-4ba4-b39e-c8f15c535beb\",\n      \"label\": \"label-3374\",\n      \"height\": 471,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"f0f2cf5c-78a6-4467-bdfe-3a0795270f70\",\n      \"label\": \"label-3375\",\n      \"height\": 181,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"f96ed03b-a05c-43d6-bb18-026a773fa271\",\n      \"label\": \"label-3376\",\n      \"height\": 171,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"e2864127-d350-4902-bd7a-0be1cdc4cff7\",\n      \"label\": \"label-3377\",\n      \"height\": 123,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"6095ee00-d3d8-40d2-ab1f-19aa70665a5a\",\n      \"label\": \"label-3378\",\n      \"height\": 448,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"61a1f95e-338b-49d0-8d56-9306d5351f68\",\n      \"label\": \"label-3379\",\n      \"height\": 497,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"99b8b162-2db7-4e05-a60d-7ebb26b6e9ab\",\n      \"label\": \"label-3380\",\n      \"height\": 393,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"38308552-8db8-41b9-b305-4c851ab7e65e\",\n      \"label\": \"label-3381\",\n      \"height\": 278,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"aff414fe-c763-494b-80ec-611b952c7b96\",\n      \"label\": \"label-3382\",\n      \"height\": 341,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"44a785d2-9744-4bae-ba7d-06c76574d6f3\",\n      \"label\": \"label-3383\",\n      \"height\": 299,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"f8f2bace-e982-4b1b-875a-995af24c796c\",\n      \"label\": \"label-3384\",\n      \"height\": 436,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"5592e9fb-3387-4086-ab46-cdfddc0b92fc\",\n      \"label\": \"label-3385\",\n      \"height\": 471,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"f8dc0c10-b80e-4b4f-a629-d7cb7170cc00\",\n      \"label\": \"label-3386\",\n      \"height\": 427,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"d8d6ffed-b024-4f50-a5c2-936918944e91\",\n      \"label\": \"label-3387\",\n      \"height\": 32,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"3f833c7a-c9a7-4aff-ad27-8602cebf3561\",\n      \"label\": \"label-3388\",\n      \"height\": 122,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"578c6578-cc88-4560-a4a7-1fb176f5eb0e\",\n      \"label\": \"label-3389\",\n      \"height\": 112,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"ed43b265-4961-4dfc-b043-a1c5f791b71a\",\n      \"label\": \"label-3390\",\n      \"height\": 38,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"c234314d-5325-45fa-a6b5-50aed991e5c2\",\n      \"label\": \"label-3391\",\n      \"height\": 371,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"9421dc04-1eac-489d-9d46-eb5291da051c\",\n      \"label\": \"label-3392\",\n      \"height\": 368,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"554c03d5-4ca8-4648-a9bc-2aa5bf993065\",\n      \"label\": \"label-3393\",\n      \"height\": 280,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"675f68e0-7b00-4f40-bc9c-0f80749f9d5d\",\n      \"label\": \"label-3394\",\n      \"height\": 282,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"d5736c60-a5b8-424e-8c35-9da185704825\",\n      \"label\": \"label-3395\",\n      \"height\": 482,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"6e043f8a-f99b-4cbc-81da-34e4203b7dc2\",\n      \"label\": \"label-3396\",\n      \"height\": 497,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"cd56b385-4baa-4ab9-a03d-f5b0948fb3f7\",\n      \"label\": \"label-3397\",\n      \"height\": 188,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"c9f87916-18ce-4b7f-a897-55598399092f\",\n      \"label\": \"label-3398\",\n      \"height\": 504,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"8c0d4cdb-9004-4a65-8cef-3fd1e954e804\",\n      \"label\": \"label-3399\",\n      \"height\": 492,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"79364563-67f7-43a6-87c3-d5c648321db3\",\n      \"label\": \"label-3400\",\n      \"height\": 387,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"fe4e8cad-3ca9-4928-9767-7afc4aedba18\",\n      \"label\": \"label-3401\",\n      \"height\": 524,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"dd93477a-63ed-4bca-bebc-9c1dd18ce4b3\",\n      \"label\": \"label-3402\",\n      \"height\": 242,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"2aafed9f-5a57-4039-9441-a83126d8e2a1\",\n      \"label\": \"label-3403\",\n      \"height\": 431,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"0db13d5f-8484-4d9a-8c3c-2239e9545695\",\n      \"label\": \"label-3404\",\n      \"height\": 331,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"11058735-109f-43c3-ac28-22ef2fc5c41b\",\n      \"label\": \"label-3405\",\n      \"height\": 212,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"58745ae0-a9cf-4706-97bf-e9679957a7bb\",\n      \"label\": \"label-3406\",\n      \"height\": 314,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"ffbe7fef-74b3-4674-b473-9974c1576846\",\n      \"label\": \"label-3407\",\n      \"height\": 517,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"730db1b6-6b7c-4f67-b6a5-cbe6eefabe85\",\n      \"label\": \"label-3408\",\n      \"height\": 231,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"7b914114-1dfb-43e9-bd0a-29700a6069a1\",\n      \"label\": \"label-3409\",\n      \"height\": 492,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"612c9c31-d49e-4881-8965-4440b912c386\",\n      \"label\": \"label-3410\",\n      \"height\": 497,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"768ea7d8-73b5-467a-ad6a-25c1a3ea222d\",\n      \"label\": \"label-3411\",\n      \"height\": 510,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"43103ee8-84a6-456b-a278-5976fbf923d7\",\n      \"label\": \"label-3412\",\n      \"height\": 224,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"0d538cc7-9be2-4cc9-885b-d9a5d44be04b\",\n      \"label\": \"label-3413\",\n      \"height\": 257,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"20410c93-a09c-4b5a-84bf-2fa21c332cc8\",\n      \"label\": \"label-3414\",\n      \"height\": 155,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"be183f7f-54bf-4448-88aa-3789927e6867\",\n      \"label\": \"label-3415\",\n      \"height\": 285,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"31214cf8-e082-45ad-891a-6066a2ee7d09\",\n      \"label\": \"label-3416\",\n      \"height\": 427,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"05ff5200-b547-4064-bc27-883b9c91987a\",\n      \"label\": \"label-3417\",\n      \"height\": 198,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"59fd676b-cd93-42db-a9c7-008463ab49b1\",\n      \"label\": \"label-3418\",\n      \"height\": 441,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"07ec801d-dc8b-4335-b328-d910be904492\",\n      \"label\": \"label-3419\",\n      \"height\": 66,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"36a93583-9e0c-4f4a-9573-fbdefc33bfc6\",\n      \"label\": \"label-3420\",\n      \"height\": 424,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"543c1b51-c4d3-4c4b-9f8e-325a4a62bc33\",\n      \"label\": \"label-3421\",\n      \"height\": 114,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"ef08e1fa-9d0d-48eb-9abd-9f367d190132\",\n      \"label\": \"label-3422\",\n      \"height\": 504,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"240df9fe-aa31-4f59-b507-25f23e6639de\",\n      \"label\": \"label-3423\",\n      \"height\": 144,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"e1b24fc9-fe65-4c9b-bfd3-13c6cce36954\",\n      \"label\": \"label-3424\",\n      \"height\": 313,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"d53ff379-eb9a-4331-813c-f89ae55723bc\",\n      \"label\": \"label-3425\",\n      \"height\": 209,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"d6326e7b-1ffd-40c0-9475-ea620ee21ed9\",\n      \"label\": \"label-3426\",\n      \"height\": 81,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"9eb5f157-65c4-4431-9ca4-d3950d008ec4\",\n      \"label\": \"label-3427\",\n      \"height\": 144,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"97483ebe-0f1d-4eb0-adfa-c4f87e3a3000\",\n      \"label\": \"label-3428\",\n      \"height\": 176,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"bf6bb73d-ff17-429a-9132-128b0d063bd9\",\n      \"label\": \"label-3429\",\n      \"height\": 228,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"45d0b349-532e-4b9b-9bcf-81d6ca07b169\",\n      \"label\": \"label-3430\",\n      \"height\": 161,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"8ecfb28e-303d-4358-af5c-9eaea1eeb4fa\",\n      \"label\": \"label-3431\",\n      \"height\": 369,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"c2d1ba10-b834-429f-b3e6-06abfc9a31f4\",\n      \"label\": \"label-3432\",\n      \"height\": 99,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"a65c6439-5a20-43ab-a7b6-9ed13ffffcb8\",\n      \"label\": \"label-3433\",\n      \"height\": 234,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"d2cf9d5f-1282-469b-bf49-45724a289c64\",\n      \"label\": \"label-3434\",\n      \"height\": 297,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"6ff84719-6c0a-4667-af13-d556ad6ad4bb\",\n      \"label\": \"label-3435\",\n      \"height\": 88,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"c94e53c5-d4ee-4e9c-9ccf-37ae3fbb8150\",\n      \"label\": \"label-3436\",\n      \"height\": 215,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"b437dbb9-fe02-4abf-8e7c-d42ae4a43f6f\",\n      \"label\": \"label-3437\",\n      \"height\": 218,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"9be0ada2-4b3e-49d6-8f25-afa4974c9431\",\n      \"label\": \"label-3438\",\n      \"height\": 178,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"b957a782-132c-4693-b443-39b3be28fce1\",\n      \"label\": \"label-3439\",\n      \"height\": 382,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"3e65048d-2274-40fa-aca6-1f48a693b042\",\n      \"label\": \"label-3440\",\n      \"height\": 95,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"c8545492-21b7-4559-a840-901cf51486d3\",\n      \"label\": \"label-3441\",\n      \"height\": 340,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"b065b3d0-7e82-466e-8d79-2f3b1f4f45de\",\n      \"label\": \"label-3442\",\n      \"height\": 217,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"e280ecfa-21a5-4a54-a256-43c98bcdd5f5\",\n      \"label\": \"label-3443\",\n      \"height\": 446,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"3d7edd65-1236-4a2f-b1ce-0295d7785b5d\",\n      \"label\": \"label-3444\",\n      \"height\": 240,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"100c2a65-2cfa-42c9-9c3f-ab73e5938837\",\n      \"label\": \"label-3445\",\n      \"height\": 35,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"d00849b1-75f6-476a-b518-790df4cd315f\",\n      \"label\": \"label-3446\",\n      \"height\": 185,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"a2b1a74a-ca68-4f2c-9238-b8bae0ad5744\",\n      \"label\": \"label-3447\",\n      \"height\": 501,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"d38ec8d9-4ec9-4995-b5bc-254a7205a997\",\n      \"label\": \"label-3448\",\n      \"height\": 410,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"184e3b37-a15c-4d47-8c67-3d0e88e6a111\",\n      \"label\": \"label-3449\",\n      \"height\": 330,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"1952693a-7a0b-4d69-8221-5e2a09c94f98\",\n      \"label\": \"label-3450\",\n      \"height\": 427,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"288ec99e-ed35-49cd-ae4f-9b13f393316c\",\n      \"label\": \"label-3451\",\n      \"height\": 443,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"e326dfe0-3d5c-43af-b418-4e4dfb7876ff\",\n      \"label\": \"label-3452\",\n      \"height\": 374,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"459f10dd-474f-44f0-93bd-54a5abf2eb41\",\n      \"label\": \"label-3453\",\n      \"height\": 452,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"511515c8-18f3-487a-99fd-87483fbdb564\",\n      \"label\": \"label-3454\",\n      \"height\": 89,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"56c28767-6136-4d2b-87c6-7bfabb53274c\",\n      \"label\": \"label-3455\",\n      \"height\": 107,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"f7f3fb7e-f4cf-4c41-8fdd-efba841a549c\",\n      \"label\": \"label-3456\",\n      \"height\": 480,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"0464e66f-17ad-40d6-9046-8fb6f9abdc35\",\n      \"label\": \"label-3457\",\n      \"height\": 55,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"d4df0479-5ac4-457d-af4a-50af6d514b15\",\n      \"label\": \"label-3458\",\n      \"height\": 130,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"39fe930d-f2ab-4156-b5a7-7a3885dec547\",\n      \"label\": \"label-3459\",\n      \"height\": 286,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"198c7f81-75a9-4fa5-9423-5a3808be9c12\",\n      \"label\": \"label-3460\",\n      \"height\": 53,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"6a2ea655-5c71-409a-98d5-987456a6cc53\",\n      \"label\": \"label-3461\",\n      \"height\": 303,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"454a6cf3-e946-4242-a45a-3f9638f96272\",\n      \"label\": \"label-3462\",\n      \"height\": 60,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"5c44e8e8-4757-428e-a4c9-4cca0a3a2954\",\n      \"label\": \"label-3463\",\n      \"height\": 514,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"1e9a7ec5-7ce6-4436-9ece-8571435396d9\",\n      \"label\": \"label-3464\",\n      \"height\": 40,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"a8f72f28-e11e-4099-83f4-fb835f836e9e\",\n      \"label\": \"label-3465\",\n      \"height\": 48,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"06399faa-9bb0-42d6-ab42-61e9df982270\",\n      \"label\": \"label-3466\",\n      \"height\": 394,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"c50b2111-a4e3-4909-b180-ad4c4da7c715\",\n      \"label\": \"label-3467\",\n      \"height\": 326,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"fef91d62-273c-4468-9ce3-0bab0231b03c\",\n      \"label\": \"label-3468\",\n      \"height\": 502,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"8f18da97-7962-4f0c-87dd-82d17d9fdcb2\",\n      \"label\": \"label-3469\",\n      \"height\": 228,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"148722fa-eafa-46e2-8b9f-150b8153fd8e\",\n      \"label\": \"label-3470\",\n      \"height\": 137,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"86f5f8c4-389f-45c7-a10f-49c8837e01a6\",\n      \"label\": \"label-3471\",\n      \"height\": 212,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"60361f1e-a1fb-4275-b39f-532e20a49d8a\",\n      \"label\": \"label-3472\",\n      \"height\": 194,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"22a64358-f57d-4f4c-a3a1-082df1e55122\",\n      \"label\": \"label-3473\",\n      \"height\": 350,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"60ee66f5-60fa-43ae-b0ef-2e4be75823dd\",\n      \"label\": \"label-3474\",\n      \"height\": 333,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"4d897c18-b20e-48c4-8d4b-5e377ddfaaa2\",\n      \"label\": \"label-3475\",\n      \"height\": 309,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"e9641f8d-f96d-4259-a33b-b908767a6660\",\n      \"label\": \"label-3476\",\n      \"height\": 110,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"48c2490f-849d-49c4-80d8-ae45d48b2d97\",\n      \"label\": \"label-3477\",\n      \"height\": 151,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"125300cf-f577-40ce-96cd-d1deb1b87769\",\n      \"label\": \"label-3478\",\n      \"height\": 54,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"73108280-6a33-4836-a09c-7142f93a44a3\",\n      \"label\": \"label-3479\",\n      \"height\": 252,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"774be007-26cd-4b4c-9d94-af7156b238b0\",\n      \"label\": \"label-3480\",\n      \"height\": 321,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"8f555810-b81b-4259-897c-e68068b8ee1c\",\n      \"label\": \"label-3481\",\n      \"height\": 159,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"fd652044-84b9-4d04-a34b-cf96cbef14dc\",\n      \"label\": \"label-3482\",\n      \"height\": 203,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"e7e2da90-7081-4ae3-8d57-b800b3c03261\",\n      \"label\": \"label-3483\",\n      \"height\": 454,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"728dabff-5254-47ce-8371-04dda8e60bf6\",\n      \"label\": \"label-3484\",\n      \"height\": 528,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"d057e883-5242-423e-ae6d-5dc5d93b7e91\",\n      \"label\": \"label-3485\",\n      \"height\": 439,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"00c5a286-6a7f-40ab-a3aa-925f59b4334a\",\n      \"label\": \"label-3486\",\n      \"height\": 343,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"5ccc2e6e-b214-4ed9-accb-7c32e48414ec\",\n      \"label\": \"label-3487\",\n      \"height\": 72,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"22f496b3-28e3-4261-a161-00cd9ea5e13e\",\n      \"label\": \"label-3488\",\n      \"height\": 267,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"3b4183cc-5ce7-4cb2-b76d-0c39e182649e\",\n      \"label\": \"label-3489\",\n      \"height\": 519,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"898fe0a5-3652-4f4b-8178-84084232720a\",\n      \"label\": \"label-3490\",\n      \"height\": 292,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"e6b93b6c-14b0-405f-bfb9-f3b0760dd009\",\n      \"label\": \"label-3491\",\n      \"height\": 63,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"68a5e0b4-029c-40b9-a35c-194330d9c18e\",\n      \"label\": \"label-3492\",\n      \"height\": 306,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"32b82b2a-daba-40df-ac9a-4aece8bff9b5\",\n      \"label\": \"label-3493\",\n      \"height\": 329,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"76b3ecd6-fa8c-429f-90b0-4480eed6cb7f\",\n      \"label\": \"label-3494\",\n      \"height\": 503,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"18d8c361-332d-44aa-90f3-fb3473ca56f5\",\n      \"label\": \"label-3495\",\n      \"height\": 433,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"bcc7f5a9-4a77-4498-a273-504c4a274afa\",\n      \"label\": \"label-3496\",\n      \"height\": 462,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"1266a2d7-d42b-48de-8a9a-8071cc312341\",\n      \"label\": \"label-3497\",\n      \"height\": 518,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"6d0d19ae-1853-4a04-bc35-199caa3ca5fe\",\n      \"label\": \"label-3498\",\n      \"height\": 43,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"aa57137f-2b5c-4549-a497-790235453d3e\",\n      \"label\": \"label-3499\",\n      \"height\": 376,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"cf3bf148-4e75-420e-bd3d-bdf2c0ae2585\",\n      \"label\": \"label-3500\",\n      \"height\": 351,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"e3852380-53d7-4fb5-b54d-d6f796198960\",\n      \"label\": \"label-3501\",\n      \"height\": 476,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"7ff3b183-bbc4-43f9-aabd-abe59bc1d14d\",\n      \"label\": \"label-3502\",\n      \"height\": 337,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"3489c9ac-a9c2-472d-8d76-2cc14906c3cf\",\n      \"label\": \"label-3503\",\n      \"height\": 188,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"4be5d380-f522-4ee3-be7e-814344a85211\",\n      \"label\": \"label-3504\",\n      \"height\": 64,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"56216696-7476-4635-9d9a-c4ccf7e2e29e\",\n      \"label\": \"label-3505\",\n      \"height\": 327,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"55082613-17ac-4743-83e5-8626e6a85385\",\n      \"label\": \"label-3506\",\n      \"height\": 160,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"0e1ca475-71ae-4ffc-aaa4-3e53330a84b2\",\n      \"label\": \"label-3507\",\n      \"height\": 144,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"2d9cdb70-4bfe-4339-a899-d146acc0c7bd\",\n      \"label\": \"label-3508\",\n      \"height\": 527,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"ca32fa7b-1844-4878-9e52-0c5bea0fb487\",\n      \"label\": \"label-3509\",\n      \"height\": 168,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"e45b9cf0-42da-4e75-a59c-6c120795b5b7\",\n      \"label\": \"label-3510\",\n      \"height\": 82,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"cb916218-9ff3-4134-b92e-c339ab0c53d6\",\n      \"label\": \"label-3511\",\n      \"height\": 301,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"a9b8b6d5-446a-4e93-b9a1-4372f64b57c5\",\n      \"label\": \"label-3512\",\n      \"height\": 394,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"52ae8adb-46d4-4b2f-9aae-3ab4141d2a25\",\n      \"label\": \"label-3513\",\n      \"height\": 400,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"60fb259b-47c1-4985-a46b-fe355be5308e\",\n      \"label\": \"label-3514\",\n      \"height\": 467,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"07f0d1e5-448b-4502-a19e-15b3ba085899\",\n      \"label\": \"label-3515\",\n      \"height\": 233,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"0ef0e968-5a1e-4aa7-a61c-3a077438aee1\",\n      \"label\": \"label-3516\",\n      \"height\": 216,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"d4442127-9013-47d9-bd55-1d873cc49dcb\",\n      \"label\": \"label-3517\",\n      \"height\": 313,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"a91d9587-6b12-49ff-a12a-bb0e151115a1\",\n      \"label\": \"label-3518\",\n      \"height\": 491,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"26309cbc-5b80-4851-ae88-29c58cfe7642\",\n      \"label\": \"label-3519\",\n      \"height\": 62,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"765dabfa-a9fa-478f-ad44-d40c1fd1b417\",\n      \"label\": \"label-3520\",\n      \"height\": 428,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"7a41cfad-57c0-4cc5-9565-39fe2a32c33f\",\n      \"label\": \"label-3521\",\n      \"height\": 373,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"86b3074e-3af9-43f6-85c2-e12302a2ea3e\",\n      \"label\": \"label-3522\",\n      \"height\": 126,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"7e85397c-32d1-47ee-b1a0-1d047dc943fb\",\n      \"label\": \"label-3523\",\n      \"height\": 270,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"f6a0f1fe-7519-4eb0-891a-b6418a7d5fc2\",\n      \"label\": \"label-3524\",\n      \"height\": 248,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"db15523c-9aeb-4f66-9cd7-6eb6c4abbdca\",\n      \"label\": \"label-3525\",\n      \"height\": 377,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"04c09c47-44fb-473d-b6c8-c49da03de025\",\n      \"label\": \"label-3526\",\n      \"height\": 290,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"77083407-5605-412a-ab15-cd0bee38467f\",\n      \"label\": \"label-3527\",\n      \"height\": 77,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"41cc0ec1-0c26-4f2e-a5db-c24c39d7f42f\",\n      \"label\": \"label-3528\",\n      \"height\": 104,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"4bf9b332-fcf8-4930-8234-97b22ffb6d32\",\n      \"label\": \"label-3529\",\n      \"height\": 159,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"0b5c4149-08ed-40fb-9bb9-0bff1bc4bbe0\",\n      \"label\": \"label-3530\",\n      \"height\": 305,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"ecb44a2f-5ca9-46b9-b3f0-4b03e190cb97\",\n      \"label\": \"label-3531\",\n      \"height\": 131,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"733a9fb1-eb3c-49cb-a29e-c33dfd329f22\",\n      \"label\": \"label-3532\",\n      \"height\": 385,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"1aff3362-c4b8-42a8-b5f4-82b5dd12b477\",\n      \"label\": \"label-3533\",\n      \"height\": 323,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"56890ee3-9c07-47ef-817a-74d9e74d1fc3\",\n      \"label\": \"label-3534\",\n      \"height\": 120,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"fa307d3c-0dc7-4829-b2a1-b9b6b3042204\",\n      \"label\": \"label-3535\",\n      \"height\": 486,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"46928e98-9c77-434f-9c23-29bc572035a0\",\n      \"label\": \"label-3536\",\n      \"height\": 326,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"560f84a8-7d89-4590-864f-f7f3fe8f10f8\",\n      \"label\": \"label-3537\",\n      \"height\": 485,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"f2b200b4-f778-4af8-87d8-df3ec9ecb963\",\n      \"label\": \"label-3538\",\n      \"height\": 378,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"f25ea22c-beda-4b34-875b-766b8c09e54c\",\n      \"label\": \"label-3539\",\n      \"height\": 73,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"6f922f5b-09aa-4e26-b4c9-0e3192a092cd\",\n      \"label\": \"label-3540\",\n      \"height\": 394,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"f7addd9d-c142-477f-ba0b-8dee93c75213\",\n      \"label\": \"label-3541\",\n      \"height\": 191,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"c098fbec-eba3-4be4-8145-da55f7805a82\",\n      \"label\": \"label-3542\",\n      \"height\": 160,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"701058ae-71d3-4ef1-a9cd-299924cc5eb4\",\n      \"label\": \"label-3543\",\n      \"height\": 139,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"8128bb08-03d0-4607-9986-2a3cc7c523e8\",\n      \"label\": \"label-3544\",\n      \"height\": 285,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"2bbdcb30-41ca-4582-abfc-04348052f8dc\",\n      \"label\": \"label-3545\",\n      \"height\": 503,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"0845113d-8740-4125-9baa-d5e503ef1c04\",\n      \"label\": \"label-3546\",\n      \"height\": 258,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"cb7e5e5e-86ef-4375-a391-e49546ff4abd\",\n      \"label\": \"label-3547\",\n      \"height\": 220,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"1cfebc38-bea7-4aae-9d0f-81a7d1e72b57\",\n      \"label\": \"label-3548\",\n      \"height\": 195,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"f0dd241a-6bda-41ba-9d41-5250ab012c10\",\n      \"label\": \"label-3549\",\n      \"height\": 202,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"0299f3bc-0fab-481b-bf9d-fd5ffcab63d1\",\n      \"label\": \"label-3550\",\n      \"height\": 334,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"dc47d961-cb49-4eca-b398-2d5dfc9a82f0\",\n      \"label\": \"label-3551\",\n      \"height\": 487,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"17640012-62b4-414b-81ca-cb004da07828\",\n      \"label\": \"label-3552\",\n      \"height\": 55,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"6392b50e-ebd7-4899-820d-d723ae2e982a\",\n      \"label\": \"label-3553\",\n      \"height\": 285,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"e57c1eef-601d-4dd9-808c-05591223f40c\",\n      \"label\": \"label-3554\",\n      \"height\": 346,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"83c546c0-9b32-4956-8c84-8e457ed1b62e\",\n      \"label\": \"label-3555\",\n      \"height\": 442,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"42143f8a-2d63-4435-b034-d1c9051ca133\",\n      \"label\": \"label-3556\",\n      \"height\": 429,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"66cfe361-3a11-4baa-b171-a3bd254d7956\",\n      \"label\": \"label-3557\",\n      \"height\": 216,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"3afd3f5b-e6ac-4c07-84b2-e686be2a4623\",\n      \"label\": \"label-3558\",\n      \"height\": 232,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"674d167c-9801-42bd-b370-29bf3160041e\",\n      \"label\": \"label-3559\",\n      \"height\": 196,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"b33ab728-3e67-4c7f-8e55-d8431bb92e90\",\n      \"label\": \"label-3560\",\n      \"height\": 311,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"cf14b6b6-d5d2-40c2-a014-e7c923d1cf27\",\n      \"label\": \"label-3561\",\n      \"height\": 269,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"dc59ca6b-af32-4cbf-aea6-6d76fcca55c2\",\n      \"label\": \"label-3562\",\n      \"height\": 278,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"1313ef1b-01db-4710-9225-54fe0b7b3717\",\n      \"label\": \"label-3563\",\n      \"height\": 298,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"7b35fe4d-ef6f-48fa-9255-d6ec14c6ac3b\",\n      \"label\": \"label-3564\",\n      \"height\": 221,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"6ec4e0b7-a6d4-4fa4-b0ff-59e8f6b7b477\",\n      \"label\": \"label-3565\",\n      \"height\": 363,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"c7ff911e-d80e-473c-b816-6c3934dde931\",\n      \"label\": \"label-3566\",\n      \"height\": 380,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"62959dca-edcb-48b9-bfb4-1ce062825036\",\n      \"label\": \"label-3567\",\n      \"height\": 141,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"61f71ec8-ac3f-4d90-915f-e5e82cb5e73c\",\n      \"label\": \"label-3568\",\n      \"height\": 133,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"a1947e51-7f37-41b5-991c-711782793798\",\n      \"label\": \"label-3569\",\n      \"height\": 197,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"57270b69-4a27-4039-9ce0-db37acb33a53\",\n      \"label\": \"label-3570\",\n      \"height\": 370,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"d419258c-e3c7-4fe6-b97d-c47a4d787139\",\n      \"label\": \"label-3571\",\n      \"height\": 80,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"44e6a3c4-3107-4cf7-8f07-89cb2dbf4e0b\",\n      \"label\": \"label-3572\",\n      \"height\": 377,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"8d53bc3c-29a4-42d0-81fb-29c3fde5a421\",\n      \"label\": \"label-3573\",\n      \"height\": 73,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"93ebe909-79ba-42e9-b2c8-a8eb1cc001dd\",\n      \"label\": \"label-3574\",\n      \"height\": 190,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"9746adc3-628c-470d-a99b-4b0355eca43a\",\n      \"label\": \"label-3575\",\n      \"height\": 108,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"cf8b9f29-289e-4fee-8c4d-e60fb81b0f45\",\n      \"label\": \"label-3576\",\n      \"height\": 343,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"7c64ee04-bc78-43c9-b867-0fd1ef7b0600\",\n      \"label\": \"label-3577\",\n      \"height\": 149,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"e41e71c7-36da-4890-b3aa-6d486cf606a2\",\n      \"label\": \"label-3578\",\n      \"height\": 62,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"8639eb56-f16c-43cc-8a83-f545f954ef52\",\n      \"label\": \"label-3579\",\n      \"height\": 287,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"4677030f-b0da-4b4e-a642-00bb5e4d7a86\",\n      \"label\": \"label-3580\",\n      \"height\": 40,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"2807e2b9-9549-4c93-8396-8148cd5db5b2\",\n      \"label\": \"label-3581\",\n      \"height\": 270,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"b64f5f6f-5e8c-400d-9938-5afbc1642857\",\n      \"label\": \"label-3582\",\n      \"height\": 130,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"bda73781-103b-4acb-a69a-9b27d4f77fc9\",\n      \"label\": \"label-3583\",\n      \"height\": 419,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"52e76320-ee15-4df1-9db6-21e05ea25b61\",\n      \"label\": \"label-3584\",\n      \"height\": 377,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"54a59102-7959-4e70-aae9-2099607119df\",\n      \"label\": \"label-3585\",\n      \"height\": 133,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"a2fb8ce6-783a-4f48-837e-53286ab79d17\",\n      \"label\": \"label-3586\",\n      \"height\": 464,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"26f0d927-1d10-429d-9fb7-31cc061ff709\",\n      \"label\": \"label-3587\",\n      \"height\": 67,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"65ac81b8-7fa4-4777-9a3a-79ded41122fe\",\n      \"label\": \"label-3588\",\n      \"height\": 417,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"367961da-ed86-4a03-bc7a-57ea8f28354e\",\n      \"label\": \"label-3589\",\n      \"height\": 473,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"f7a73e87-471b-4526-91be-194f137b86dd\",\n      \"label\": \"label-3590\",\n      \"height\": 136,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"35bd5025-3066-4659-a98a-95c1e04d00e6\",\n      \"label\": \"label-3591\",\n      \"height\": 357,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"97811bcf-b85a-47f0-9116-ef2d7b341a91\",\n      \"label\": \"label-3592\",\n      \"height\": 242,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"a0a73d2b-ff68-4f55-8f17-11e4f1df9703\",\n      \"label\": \"label-3593\",\n      \"height\": 413,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"cf8361bd-c79e-4cbb-8fb6-55dd117d3137\",\n      \"label\": \"label-3594\",\n      \"height\": 63,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"aaf5b520-844c-43f3-ac54-9d431948e1bf\",\n      \"label\": \"label-3595\",\n      \"height\": 515,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"f28e78ce-b20b-4da6-bea6-eeda1205aa93\",\n      \"label\": \"label-3596\",\n      \"height\": 368,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"fbe04691-b207-472d-a309-77d27c8d3d69\",\n      \"label\": \"label-3597\",\n      \"height\": 159,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"8517fd36-58c2-4b72-83f2-1309200f891c\",\n      \"label\": \"label-3598\",\n      \"height\": 322,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"de6ba442-32f3-443d-a908-0203545ba720\",\n      \"label\": \"label-3599\",\n      \"height\": 308,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"9c3ea700-dc74-4d3f-8c3a-8931dcdf775b\",\n      \"label\": \"label-3600\",\n      \"height\": 446,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"df41938c-7478-42a6-830f-f9504487b404\",\n      \"label\": \"label-3601\",\n      \"height\": 526,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"34252d96-e565-4969-a11b-13e32e771f91\",\n      \"label\": \"label-3602\",\n      \"height\": 90,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"8baf00e2-7c6b-4b3a-aa66-0462d6e058fc\",\n      \"label\": \"label-3603\",\n      \"height\": 245,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"449b0997-fddd-4276-813e-e1e527cc3cb2\",\n      \"label\": \"label-3604\",\n      \"height\": 339,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"048f4d52-ec57-4545-acb7-e02d15e9fe9e\",\n      \"label\": \"label-3605\",\n      \"height\": 182,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"f382c1a3-2e6c-443f-8850-18aac449c509\",\n      \"label\": \"label-3606\",\n      \"height\": 81,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"8f8de4e4-0a37-4749-82d8-2329acae87e3\",\n      \"label\": \"label-3607\",\n      \"height\": 467,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"2790f146-6ef7-4ca8-97fc-247963622338\",\n      \"label\": \"label-3608\",\n      \"height\": 421,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"1ecbf95d-3788-4e3c-a86a-e46cc65bb085\",\n      \"label\": \"label-3609\",\n      \"height\": 250,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"9a1d7031-70a4-4faf-b155-a6094bb4e736\",\n      \"label\": \"label-3610\",\n      \"height\": 382,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"dd04fe5c-2726-425e-ad7f-2eb6921455d3\",\n      \"label\": \"label-3611\",\n      \"height\": 391,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"7be7f7d8-644f-4d17-8e75-0e3912ae0b59\",\n      \"label\": \"label-3612\",\n      \"height\": 342,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"ccb98430-6a20-4c13-aae9-19a4b7b7b9f1\",\n      \"label\": \"label-3613\",\n      \"height\": 100,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"347bdf41-b38d-4e5d-b36b-c2d805a7e106\",\n      \"label\": \"label-3614\",\n      \"height\": 142,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"50495f1a-9a75-427b-8807-b07349b1cc4f\",\n      \"label\": \"label-3615\",\n      \"height\": 44,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"7985ef40-df1b-4ac1-bf3d-c6e31d9e1be3\",\n      \"label\": \"label-3616\",\n      \"height\": 250,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"0d27b37e-bd69-4eca-a3c2-799065aec200\",\n      \"label\": \"label-3617\",\n      \"height\": 124,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"57cf9137-ba19-44f0-b10e-8aee70d7a025\",\n      \"label\": \"label-3618\",\n      \"height\": 241,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"2e8faf4c-c766-407d-97ad-34d1955c0279\",\n      \"label\": \"label-3619\",\n      \"height\": 361,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"a5c5c7af-b0d2-4727-a591-b4257866c3ce\",\n      \"label\": \"label-3620\",\n      \"height\": 162,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"50e96316-133e-4fb8-a58f-ea108585f0bb\",\n      \"label\": \"label-3621\",\n      \"height\": 116,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"fd222cbf-b301-40cc-bd2d-0e487bb3edee\",\n      \"label\": \"label-3622\",\n      \"height\": 167,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"08a0bddd-30fb-40a5-8fe3-f1438ff5c198\",\n      \"label\": \"label-3623\",\n      \"height\": 465,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"d63fa094-48df-4826-a9fb-8e7db514c346\",\n      \"label\": \"label-3624\",\n      \"height\": 523,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"9f9432ba-9c4c-4cdb-badd-0e01de916a26\",\n      \"label\": \"label-3625\",\n      \"height\": 464,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"5f13986c-3799-406c-af98-c1408b854145\",\n      \"label\": \"label-3626\",\n      \"height\": 199,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"f5cee64f-2fc8-4c5a-9633-d0fa8fd7bcc3\",\n      \"label\": \"label-3627\",\n      \"height\": 309,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"03b8925b-434a-4064-b6b0-1517f46513fe\",\n      \"label\": \"label-3628\",\n      \"height\": 464,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"f59c7661-db2d-446f-bc3d-5e4a13cf9bf0\",\n      \"label\": \"label-3629\",\n      \"height\": 416,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"c31194ba-4b14-4c9f-907b-837e96136983\",\n      \"label\": \"label-3630\",\n      \"height\": 77,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"8b431e85-f57f-46ed-bb79-ef73bdde8ff2\",\n      \"label\": \"label-3631\",\n      \"height\": 300,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"e1b91be1-e3c6-42db-8951-8c715f872664\",\n      \"label\": \"label-3632\",\n      \"height\": 190,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"3b06f5f6-e2b4-4c0e-8fe2-75a91bdd483d\",\n      \"label\": \"label-3633\",\n      \"height\": 145,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"3ed24f23-7c2a-4b81-9a2d-2d4bef4dadf4\",\n      \"label\": \"label-3634\",\n      \"height\": 355,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"4ae8952a-6ae9-4fb8-9e1b-1808979a7752\",\n      \"label\": \"label-3635\",\n      \"height\": 480,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"fff94857-57c9-4d5e-9c8f-f9b261f2418a\",\n      \"label\": \"label-3636\",\n      \"height\": 158,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"f5b5fe54-1f86-4cd2-9a6a-e922f385927d\",\n      \"label\": \"label-3637\",\n      \"height\": 155,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"f8a35df8-0568-4a8a-b28f-2fa4c8c0950a\",\n      \"label\": \"label-3638\",\n      \"height\": 92,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"0c0aff7d-3084-412e-9828-bf57d111a335\",\n      \"label\": \"label-3639\",\n      \"height\": 154,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"c7602ea2-2446-4b1b-b3fb-601b963db0ed\",\n      \"label\": \"label-3640\",\n      \"height\": 524,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"50b85f44-580c-4455-bd72-773404ee772b\",\n      \"label\": \"label-3641\",\n      \"height\": 108,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"6de8a86b-1117-4826-a9cd-4f2cdc080713\",\n      \"label\": \"label-3642\",\n      \"height\": 429,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"dac19aa2-0c9f-4d9f-98c9-2e370cfc949d\",\n      \"label\": \"label-3643\",\n      \"height\": 198,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"98d67b78-a430-4d0c-bd9e-7df53cbdb544\",\n      \"label\": \"label-3644\",\n      \"height\": 312,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"0e8e1299-ea3a-4a9c-ac14-c60a415a661b\",\n      \"label\": \"label-3645\",\n      \"height\": 100,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"385e011e-5fac-4fb4-9a7f-fdd9014a4cc9\",\n      \"label\": \"label-3646\",\n      \"height\": 273,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"618a9cc2-5a23-46d0-be6d-c7e01de839c6\",\n      \"label\": \"label-3647\",\n      \"height\": 284,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"fecdd62c-264a-4f6f-a09b-00ccf5a437b0\",\n      \"label\": \"label-3648\",\n      \"height\": 103,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"8717b74a-6c65-41c2-abb8-11d2bbb234ea\",\n      \"label\": \"label-3649\",\n      \"height\": 148,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"2f18a6bc-2ce6-4592-b2f6-5361debbb6f4\",\n      \"label\": \"label-3650\",\n      \"height\": 35,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"3b9262f6-0860-4d80-bfb0-d8288819bde1\",\n      \"label\": \"label-3651\",\n      \"height\": 431,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"9e22b068-f8e1-45b7-b4a5-6b37e4ebd2b7\",\n      \"label\": \"label-3652\",\n      \"height\": 301,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"f938933c-3ba3-4cc9-b2fb-5396c848b969\",\n      \"label\": \"label-3653\",\n      \"height\": 272,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"6a56ef88-1cc7-4425-84a9-1dbc4dd2c37d\",\n      \"label\": \"label-3654\",\n      \"height\": 295,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"720dce18-3f35-4f35-9228-f06c733394c4\",\n      \"label\": \"label-3655\",\n      \"height\": 250,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"b0b9ea96-c1e6-4a93-b1f7-cd212155a088\",\n      \"label\": \"label-3656\",\n      \"height\": 347,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"afea6b13-06d8-4617-870b-b06f9f5a51ac\",\n      \"label\": \"label-3657\",\n      \"height\": 495,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"4b4bfb4e-06b6-4fd4-ad5c-97fccd6ed50a\",\n      \"label\": \"label-3658\",\n      \"height\": 111,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"12a34300-c2a5-4d87-8758-29212b7d715c\",\n      \"label\": \"label-3659\",\n      \"height\": 199,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"0004b3b1-74bd-4ab3-94fe-4ae2d426ae59\",\n      \"label\": \"label-3660\",\n      \"height\": 140,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"728f6f15-af2f-41eb-936b-8c4b0b5ddb55\",\n      \"label\": \"label-3661\",\n      \"height\": 316,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"3104e136-cb09-4967-98e7-c0fee3f986e0\",\n      \"label\": \"label-3662\",\n      \"height\": 60,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"c2b69421-0319-4251-a3ce-43f0029eb9b4\",\n      \"label\": \"label-3663\",\n      \"height\": 341,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"a9df982a-9e25-46d8-acf5-5375df939079\",\n      \"label\": \"label-3664\",\n      \"height\": 50,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"a2219af1-2277-445b-b794-904e2d5a4444\",\n      \"label\": \"label-3665\",\n      \"height\": 458,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"4b6c9bec-e2d4-4057-b5ed-b24bf74f159b\",\n      \"label\": \"label-3666\",\n      \"height\": 209,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"cfc99281-2f82-4426-8125-8fcc40382f1a\",\n      \"label\": \"label-3667\",\n      \"height\": 137,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"f7a70bcd-3354-42f8-8ff8-35d90f44e75c\",\n      \"label\": \"label-3668\",\n      \"height\": 457,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"f9a203ce-ae71-44ef-8910-22a2aee0ecd6\",\n      \"label\": \"label-3669\",\n      \"height\": 380,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"ca351845-e235-44a1-873c-d486e2b5d461\",\n      \"label\": \"label-3670\",\n      \"height\": 495,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"60cf7ca9-88e9-48d7-8018-ad888942a28f\",\n      \"label\": \"label-3671\",\n      \"height\": 154,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"a841711a-968f-4194-ab6f-01420321472f\",\n      \"label\": \"label-3672\",\n      \"height\": 41,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"9e0d60a1-0ca5-455b-9078-527aecbedcae\",\n      \"label\": \"label-3673\",\n      \"height\": 258,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"9fbb580d-7c10-4887-9633-87f16951d35e\",\n      \"label\": \"label-3674\",\n      \"height\": 85,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"62fb4339-758a-4e0c-97c7-d358a3f2ccef\",\n      \"label\": \"label-3675\",\n      \"height\": 275,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"75af4e3f-48ba-4c31-976a-cc338cc38aa2\",\n      \"label\": \"label-3676\",\n      \"height\": 232,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"6be83560-ff76-442c-bbf0-f7045f8d03c2\",\n      \"label\": \"label-3677\",\n      \"height\": 436,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"87c7bfcc-01bb-4e96-9f98-5d15d9e9b063\",\n      \"label\": \"label-3678\",\n      \"height\": 78,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"fdab958f-2ae6-4ead-a05c-787dec4ce3ad\",\n      \"label\": \"label-3679\",\n      \"height\": 112,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"30f3155e-282d-4f67-8751-a9f64f204357\",\n      \"label\": \"label-3680\",\n      \"height\": 484,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"64b9fc80-30b9-402f-83ad-5e208eaf78c1\",\n      \"label\": \"label-3681\",\n      \"height\": 136,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"412e532b-37a7-45f5-b6e8-2c5db39a87fb\",\n      \"label\": \"label-3682\",\n      \"height\": 447,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"ef578945-c41d-417f-b2c9-f711a2ea8916\",\n      \"label\": \"label-3683\",\n      \"height\": 381,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"54497929-95c0-4a7d-b79f-b88993b74188\",\n      \"label\": \"label-3684\",\n      \"height\": 105,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"f57ea424-bc51-4a4f-b1e9-75505999ae49\",\n      \"label\": \"label-3685\",\n      \"height\": 114,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"2c56feeb-3d7b-44b4-a6be-8942ce023138\",\n      \"label\": \"label-3686\",\n      \"height\": 211,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"0df02f6b-1c40-4a7a-a77c-b6ed916c2696\",\n      \"label\": \"label-3687\",\n      \"height\": 263,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"bf01c316-df21-45b9-ae17-ddbf960d8a3a\",\n      \"label\": \"label-3688\",\n      \"height\": 323,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"d1a2ae9c-0e61-49db-8f1c-f510de310d68\",\n      \"label\": \"label-3689\",\n      \"height\": 33,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"946c563a-4432-4ae6-95d4-5401a9cf6aaf\",\n      \"label\": \"label-3690\",\n      \"height\": 313,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"524a68de-865a-41da-b3ef-46652215a236\",\n      \"label\": \"label-3691\",\n      \"height\": 516,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"5627676a-6d8b-4dfe-98d9-f3a3a7d97cb7\",\n      \"label\": \"label-3692\",\n      \"height\": 354,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"7f24afbd-330b-467e-844a-97845d992050\",\n      \"label\": \"label-3693\",\n      \"height\": 152,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"428a68d0-a262-484c-af35-9c5619fb6ae4\",\n      \"label\": \"label-3694\",\n      \"height\": 312,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"2a479167-7411-4a71-bfa1-9649419f4a36\",\n      \"label\": \"label-3695\",\n      \"height\": 45,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"16f254fe-6faf-4864-bce5-c7f73a16631e\",\n      \"label\": \"label-3696\",\n      \"height\": 170,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"f376233c-4924-461c-8239-c2429a673aed\",\n      \"label\": \"label-3697\",\n      \"height\": 119,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"bf0a14fc-5445-4691-bd4a-64df5616b1dd\",\n      \"label\": \"label-3698\",\n      \"height\": 441,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"fcf4e3d0-fbf8-4375-a20b-98efa603ed94\",\n      \"label\": \"label-3699\",\n      \"height\": 427,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"15e05d4b-f3b0-4017-91c4-64f48e6ae0a3\",\n      \"label\": \"label-3700\",\n      \"height\": 426,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"33b91e91-7763-4005-8729-a3ed19849eff\",\n      \"label\": \"label-3701\",\n      \"height\": 224,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"edd13a4c-2a9d-44ce-86c3-eedfb895d949\",\n      \"label\": \"label-3702\",\n      \"height\": 377,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"fa4cd073-c35f-461e-9ada-0b69b7e89575\",\n      \"label\": \"label-3703\",\n      \"height\": 339,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"1972704d-f269-4dfc-9ee0-6fe4b1443915\",\n      \"label\": \"label-3704\",\n      \"height\": 235,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"0d8a5542-dccb-4f25-a429-803df9854449\",\n      \"label\": \"label-3705\",\n      \"height\": 413,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"2c79bf63-bd5a-4855-96df-b6108d4a77e0\",\n      \"label\": \"label-3706\",\n      \"height\": 80,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"fe8ea213-037d-4608-81a2-578621623dc7\",\n      \"label\": \"label-3707\",\n      \"height\": 522,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"7166170d-8ea4-415f-9d5b-1fee34c6e565\",\n      \"label\": \"label-3708\",\n      \"height\": 284,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"63050a4d-2c1c-40d3-aa56-37ba3ede437f\",\n      \"label\": \"label-3709\",\n      \"height\": 332,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"47c73895-ff71-4139-86cc-8f5a2a11240d\",\n      \"label\": \"label-3710\",\n      \"height\": 321,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"ab227a9c-f9a0-4fc4-9255-d0aef3cfcc8d\",\n      \"label\": \"label-3711\",\n      \"height\": 278,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"6df294cf-3031-41bd-b1f7-4613a2d6cfea\",\n      \"label\": \"label-3712\",\n      \"height\": 453,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"49151253-d814-410e-bbd0-9f8e03ace0dc\",\n      \"label\": \"label-3713\",\n      \"height\": 224,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"215fc307-a3df-4004-99e7-6bbbaa6074bc\",\n      \"label\": \"label-3714\",\n      \"height\": 68,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"1738449a-5277-48cb-a473-bdf04dd20663\",\n      \"label\": \"label-3715\",\n      \"height\": 496,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"82f8c7a1-e6bc-4e2a-9260-a0aa677612e1\",\n      \"label\": \"label-3716\",\n      \"height\": 369,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"cfb44280-1cf2-464e-a79b-b688d70aa1b8\",\n      \"label\": \"label-3717\",\n      \"height\": 474,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"fd3007b7-772e-4139-aa1b-e57ee274c341\",\n      \"label\": \"label-3718\",\n      \"height\": 324,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"52fa2767-0e5c-4221-a160-1ba44de9263c\",\n      \"label\": \"label-3719\",\n      \"height\": 164,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"bc3fda22-4073-459a-a40a-23c0dda7c73d\",\n      \"label\": \"label-3720\",\n      \"height\": 250,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"013607c5-7bce-4082-8267-20f24832d333\",\n      \"label\": \"label-3721\",\n      \"height\": 411,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"b0dfd770-55d3-4be2-933b-6dbb643675e0\",\n      \"label\": \"label-3722\",\n      \"height\": 454,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"71fd684f-71d5-423d-8fb5-c885ebb776b1\",\n      \"label\": \"label-3723\",\n      \"height\": 512,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"997f9d64-1721-4385-b113-d1551d56051e\",\n      \"label\": \"label-3724\",\n      \"height\": 422,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"8655ad7b-fe32-457f-941a-b9faa8b0fa89\",\n      \"label\": \"label-3725\",\n      \"height\": 501,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"c22a6d2d-4898-420c-a738-476a2d7e4ce8\",\n      \"label\": \"label-3726\",\n      \"height\": 526,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"e3ece7bd-a9e9-475f-a915-9dc49ad6d2cb\",\n      \"label\": \"label-3727\",\n      \"height\": 431,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"f8c58b3b-5ae9-455c-9434-d7ee759255c9\",\n      \"label\": \"label-3728\",\n      \"height\": 434,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"cb21887c-b917-4bce-b062-974f99e00a9b\",\n      \"label\": \"label-3729\",\n      \"height\": 308,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"203d7af1-fc12-4f53-8a3c-934e9b4887fa\",\n      \"label\": \"label-3730\",\n      \"height\": 481,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"d2e1625e-3a87-4362-b607-bb9de544258a\",\n      \"label\": \"label-3731\",\n      \"height\": 187,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"eb0b3c56-d6b2-48e9-8825-e48156f3a3e0\",\n      \"label\": \"label-3732\",\n      \"height\": 42,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"8832125c-e939-4c7e-8730-403499fcd1f9\",\n      \"label\": \"label-3733\",\n      \"height\": 234,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"e93471eb-5ba5-4881-b45a-4534c2950685\",\n      \"label\": \"label-3734\",\n      \"height\": 272,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"0f596b13-5a65-4293-9084-70f894f32c7b\",\n      \"label\": \"label-3735\",\n      \"height\": 399,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"08ef630d-83b3-4203-989d-dfe9648e7f86\",\n      \"label\": \"label-3736\",\n      \"height\": 498,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"fe729463-0f61-438a-8a77-115bf267f6b1\",\n      \"label\": \"label-3737\",\n      \"height\": 310,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"0c037434-ec23-4954-94f2-4a51cbaf127b\",\n      \"label\": \"label-3738\",\n      \"height\": 385,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"43a4084e-7fc8-4fd3-9232-d051a25898f1\",\n      \"label\": \"label-3739\",\n      \"height\": 323,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"075b3fae-66d5-4c3b-8142-603d99a6eb25\",\n      \"label\": \"label-3740\",\n      \"height\": 55,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"1a400885-3eaa-42f8-b380-f9421a86a9a0\",\n      \"label\": \"label-3741\",\n      \"height\": 248,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"f6481514-7bfb-4d84-b500-0c30afd68275\",\n      \"label\": \"label-3742\",\n      \"height\": 175,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"233f08a8-7fcf-4134-a165-dbf404af6706\",\n      \"label\": \"label-3743\",\n      \"height\": 139,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"a1255a19-ab0c-4718-9551-b39952e43c09\",\n      \"label\": \"label-3744\",\n      \"height\": 418,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"80761836-e821-4723-844b-413b56f89f19\",\n      \"label\": \"label-3745\",\n      \"height\": 63,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"f103b734-26ec-4ef1-ad14-122fdbeaa48a\",\n      \"label\": \"label-3746\",\n      \"height\": 368,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"c43308d1-e7fc-40e1-9bd7-4c5153cf59de\",\n      \"label\": \"label-3747\",\n      \"height\": 137,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"5020c6b5-82b0-41d9-93e3-9bbcccee8da0\",\n      \"label\": \"label-3748\",\n      \"height\": 71,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"f30ad9cd-ec19-4ac9-96c2-8e146a622e20\",\n      \"label\": \"label-3749\",\n      \"height\": 127,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"01cc52bd-ee8d-4993-b123-096188120327\",\n      \"label\": \"label-3750\",\n      \"height\": 413,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"a1adf48d-5b63-4d97-bd41-f379c32bb7fe\",\n      \"label\": \"label-3751\",\n      \"height\": 432,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"e83d7c03-d415-4a4a-be95-009734c314c4\",\n      \"label\": \"label-3752\",\n      \"height\": 314,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"3d61e7ce-d8a8-4ea4-84c3-fd99015d1a05\",\n      \"label\": \"label-3753\",\n      \"height\": 233,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"45ddf229-cc5c-403f-9b40-3975df0e6b8b\",\n      \"label\": \"label-3754\",\n      \"height\": 425,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"63f15750-ba0c-454f-8800-3196a44efab4\",\n      \"label\": \"label-3755\",\n      \"height\": 213,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"1073e1eb-6025-493e-8a53-572709c7496e\",\n      \"label\": \"label-3756\",\n      \"height\": 372,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"ea0f59a2-e253-49c7-bf0d-9b48dc7c194e\",\n      \"label\": \"label-3757\",\n      \"height\": 350,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"c399d95f-f953-4985-b844-580a6ab21d40\",\n      \"label\": \"label-3758\",\n      \"height\": 88,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"f0c7cc17-ce79-4cf4-8906-37289b8106ff\",\n      \"label\": \"label-3759\",\n      \"height\": 509,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"1c3a97fa-c1ca-42d5-94e2-19fd8d78bd6f\",\n      \"label\": \"label-3760\",\n      \"height\": 192,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"71f738cc-c3b4-44f5-9778-9f9c0e475d14\",\n      \"label\": \"label-3761\",\n      \"height\": 184,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"6f9c954c-f160-40ec-853d-af5c50fb4d44\",\n      \"label\": \"label-3762\",\n      \"height\": 284,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"e58e1bdd-76e6-45c9-8d51-303f4fa05841\",\n      \"label\": \"label-3763\",\n      \"height\": 91,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"2ae12ad2-7701-4575-843c-9f6a80b9e96e\",\n      \"label\": \"label-3764\",\n      \"height\": 34,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"69d1b7d8-f2d3-4ae2-ba67-3745b3f7fe5e\",\n      \"label\": \"label-3765\",\n      \"height\": 83,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"0cbd23db-5b7f-47a1-9809-e566a2b07133\",\n      \"label\": \"label-3766\",\n      \"height\": 207,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"e4e64f14-cf86-4896-97a0-877030a4ddb3\",\n      \"label\": \"label-3767\",\n      \"height\": 342,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"e8aa2584-66b2-4b3f-9dd3-2e30c53c7595\",\n      \"label\": \"label-3768\",\n      \"height\": 151,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"9d6c2d13-918d-4513-9ff2-89dc4c189e48\",\n      \"label\": \"label-3769\",\n      \"height\": 163,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"3ee22c49-0f89-44c1-a2ea-02bf8313ceaa\",\n      \"label\": \"label-3770\",\n      \"height\": 170,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"7a3b06b2-e279-4682-9196-8247b1a76d3c\",\n      \"label\": \"label-3771\",\n      \"height\": 411,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"acc55e62-75c4-45fb-b935-1ac8e45172db\",\n      \"label\": \"label-3772\",\n      \"height\": 234,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"7d20aed9-702d-458e-9254-f126f186c2ed\",\n      \"label\": \"label-3773\",\n      \"height\": 531,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"fc63e8b6-72ef-4a04-a108-d165afbeef7c\",\n      \"label\": \"label-3774\",\n      \"height\": 101,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"5b188541-1151-4626-8043-8520f3067ac8\",\n      \"label\": \"label-3775\",\n      \"height\": 71,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"9073e369-0d48-4978-9532-b2138c1978b9\",\n      \"label\": \"label-3776\",\n      \"height\": 359,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"9cfc5346-3f01-4e2f-bbca-d3b799416782\",\n      \"label\": \"label-3777\",\n      \"height\": 65,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"cbd765ff-c209-4d10-8b80-7821f1bf44e7\",\n      \"label\": \"label-3778\",\n      \"height\": 355,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"ce064b1b-2777-4170-9cb2-c5275e348441\",\n      \"label\": \"label-3779\",\n      \"height\": 473,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"aed346b6-4ee6-424a-9059-d9533d9535ba\",\n      \"label\": \"label-3780\",\n      \"height\": 503,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"cc7a65bf-aa33-4dbb-9317-864d2a9e9267\",\n      \"label\": \"label-3781\",\n      \"height\": 251,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"5befd864-7b8c-40ee-bc7b-9356b0c7d5f1\",\n      \"label\": \"label-3782\",\n      \"height\": 62,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"196d6021-56ef-4bee-98f0-50f6d3ea07cb\",\n      \"label\": \"label-3783\",\n      \"height\": 238,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"bec63490-1389-41c4-a622-5f1fee785a3d\",\n      \"label\": \"label-3784\",\n      \"height\": 170,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"0a6eac17-5d54-4226-abe4-103824105310\",\n      \"label\": \"label-3785\",\n      \"height\": 296,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"34d4647f-5722-4e74-b81e-d1f3503be580\",\n      \"label\": \"label-3786\",\n      \"height\": 292,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"9a9c0ab3-e80b-49f4-a107-7d89b3edf691\",\n      \"label\": \"label-3787\",\n      \"height\": 474,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"1ba0de7e-3a73-4c58-b1f6-be098b67516c\",\n      \"label\": \"label-3788\",\n      \"height\": 372,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"1f0834d2-5c04-4d28-9d47-790a31a28995\",\n      \"label\": \"label-3789\",\n      \"height\": 107,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"4a093376-6409-4d65-a514-ce4aaf35d136\",\n      \"label\": \"label-3790\",\n      \"height\": 349,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"4859fef1-07b6-40cb-be58-7e352b60baa8\",\n      \"label\": \"label-3791\",\n      \"height\": 350,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"c05856d1-4318-41eb-8caf-c164de224c05\",\n      \"label\": \"label-3792\",\n      \"height\": 263,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"30e62c2e-6e9b-4bca-aae0-2ac839222939\",\n      \"label\": \"label-3793\",\n      \"height\": 89,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"6c0337f7-8f69-413e-b13c-22b4b26087d2\",\n      \"label\": \"label-3794\",\n      \"height\": 175,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"0da37b32-3a4a-4c25-9c6d-dd25132e7e1c\",\n      \"label\": \"label-3795\",\n      \"height\": 504,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"4a9e8256-1e27-40b8-bed2-81e29721fc04\",\n      \"label\": \"label-3796\",\n      \"height\": 327,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"bc71545c-b180-4007-8d4e-03dad5df18f2\",\n      \"label\": \"label-3797\",\n      \"height\": 314,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"dc4ccfd2-6a09-46b4-b5ae-0d649cb96ec4\",\n      \"label\": \"label-3798\",\n      \"height\": 82,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"d0dc4190-6200-4927-b32d-4ba9fea8e0e6\",\n      \"label\": \"label-3799\",\n      \"height\": 501,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"f19bf45f-229f-4968-ac29-2bc4ad012ece\",\n      \"label\": \"label-3800\",\n      \"height\": 215,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"832100ad-1a66-467d-95cf-b5d95e2450a8\",\n      \"label\": \"label-3801\",\n      \"height\": 320,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"f3b33f79-e7ba-429f-9421-f3932795e543\",\n      \"label\": \"label-3802\",\n      \"height\": 294,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"2860fbc0-dbdd-4327-940f-ec12662546d6\",\n      \"label\": \"label-3803\",\n      \"height\": 93,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"de2902c4-540b-490c-a567-059e3bac27d8\",\n      \"label\": \"label-3804\",\n      \"height\": 433,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"82708b87-cee3-401e-90ec-119e4c0a131c\",\n      \"label\": \"label-3805\",\n      \"height\": 254,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"4df390e1-fb30-4cc5-ae48-e77d13a880ea\",\n      \"label\": \"label-3806\",\n      \"height\": 439,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"9b605e5e-4628-4805-9480-6aa6882de431\",\n      \"label\": \"label-3807\",\n      \"height\": 49,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"0ca2228c-581f-4177-b92d-201abd474945\",\n      \"label\": \"label-3808\",\n      \"height\": 486,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"061b0cc8-c223-45bf-b572-af2f24ea0906\",\n      \"label\": \"label-3809\",\n      \"height\": 530,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"853618ef-9298-471a-8597-81dee2d25bb8\",\n      \"label\": \"label-3810\",\n      \"height\": 452,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"f46f8afc-ae28-48c9-a8f9-964dc9ce9e83\",\n      \"label\": \"label-3811\",\n      \"height\": 230,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"12ce964d-7097-409a-bc5e-1dc52734e61e\",\n      \"label\": \"label-3812\",\n      \"height\": 260,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"90cdfc65-2365-4a0d-8eb7-2c37d236d6df\",\n      \"label\": \"label-3813\",\n      \"height\": 395,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"d162905d-3b49-4049-a0b4-47c1ace60c93\",\n      \"label\": \"label-3814\",\n      \"height\": 111,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"9ced3bac-0677-4883-920f-562596c3ca48\",\n      \"label\": \"label-3815\",\n      \"height\": 403,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"058d7992-0073-4d3f-8284-6ccb83387e43\",\n      \"label\": \"label-3816\",\n      \"height\": 282,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"814598be-f4e4-448e-8e9c-c1eac941552c\",\n      \"label\": \"label-3817\",\n      \"height\": 35,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"f7664474-c482-4ac8-a9c7-a0e6f7a71785\",\n      \"label\": \"label-3818\",\n      \"height\": 501,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"509baa9d-e487-4491-b79e-add73dc0f6d0\",\n      \"label\": \"label-3819\",\n      \"height\": 432,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"076555c6-633d-4336-a464-e1ada7d232e1\",\n      \"label\": \"label-3820\",\n      \"height\": 358,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"c7309feb-df28-4dac-b7d7-3ff0074ce49d\",\n      \"label\": \"label-3821\",\n      \"height\": 295,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"9c476b61-bd1f-435c-b2f1-9d6a970bfd67\",\n      \"label\": \"label-3822\",\n      \"height\": 253,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"ba82cdc5-876e-43f3-b072-1929ccfb6d0e\",\n      \"label\": \"label-3823\",\n      \"height\": 166,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"ffe16d85-dbdf-4de2-bad8-8bef3a3f2da4\",\n      \"label\": \"label-3824\",\n      \"height\": 201,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"566b2f7a-bd48-4c8b-b36d-bcaa1c30cc23\",\n      \"label\": \"label-3825\",\n      \"height\": 489,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"92593993-8982-4bc8-a784-17b221cd9fc3\",\n      \"label\": \"label-3826\",\n      \"height\": 525,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"897938c6-f48a-41d5-99ae-d5f5983b841f\",\n      \"label\": \"label-3827\",\n      \"height\": 435,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"2b395efa-37ae-4825-8496-861e231b59ee\",\n      \"label\": \"label-3828\",\n      \"height\": 56,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"9bfa875f-f0ba-42ee-94db-8f3982b47ccf\",\n      \"label\": \"label-3829\",\n      \"height\": 290,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"009ca915-cc23-446d-95c1-5e1d76395932\",\n      \"label\": \"label-3830\",\n      \"height\": 72,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"68ae90ea-1bb2-43cc-aa18-46bce0b352d6\",\n      \"label\": \"label-3831\",\n      \"height\": 500,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"6236ff7b-481c-43c4-97e8-58bbf7918cbd\",\n      \"label\": \"label-3832\",\n      \"height\": 173,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"762746d2-296a-4735-bc86-9a24f17b0e18\",\n      \"label\": \"label-3833\",\n      \"height\": 78,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"466d5f0c-d2fc-45d0-9844-5612a1c10dfb\",\n      \"label\": \"label-3834\",\n      \"height\": 251,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"f02d1e53-e4cf-4238-9e66-ee1eaec2d603\",\n      \"label\": \"label-3835\",\n      \"height\": 207,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"90607e8b-b8c5-4e35-9898-dfb7b0b0bddf\",\n      \"label\": \"label-3836\",\n      \"height\": 508,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"2dbfaa66-1b7a-47a5-9e15-de8dbb5b9c22\",\n      \"label\": \"label-3837\",\n      \"height\": 204,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"13fd58e4-4f69-457d-aad4-da882156b8e8\",\n      \"label\": \"label-3838\",\n      \"height\": 129,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"8f5e49f6-fa19-4217-8a12-0a8f40e5d249\",\n      \"label\": \"label-3839\",\n      \"height\": 426,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"3006b524-146a-44b9-bdaa-4f3743f5ffec\",\n      \"label\": \"label-3840\",\n      \"height\": 184,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"ddd2ea0a-1e2a-4faf-9913-0b5990917822\",\n      \"label\": \"label-3841\",\n      \"height\": 454,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"b43ad2c8-f57b-4e63-b438-1cbcef4de363\",\n      \"label\": \"label-3842\",\n      \"height\": 505,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"c40dd3ed-4490-44a8-8a35-1d33bf41b291\",\n      \"label\": \"label-3843\",\n      \"height\": 365,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"e72f0330-53ca-49b2-971d-b60bd530dc91\",\n      \"label\": \"label-3844\",\n      \"height\": 390,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"e5a36bea-9fba-4f20-a2f1-26d133b3688b\",\n      \"label\": \"label-3845\",\n      \"height\": 379,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"5bd68aa1-a17f-440c-b0b4-e37cf3e87d51\",\n      \"label\": \"label-3846\",\n      \"height\": 466,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"05778c52-bc26-4dd8-bfdf-8b933f01c097\",\n      \"label\": \"label-3847\",\n      \"height\": 531,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"295e9d0e-276b-476f-ae0d-83135e74f8ff\",\n      \"label\": \"label-3848\",\n      \"height\": 410,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"ca8e9ce5-496b-400b-8f09-506fd05a5acc\",\n      \"label\": \"label-3849\",\n      \"height\": 456,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"fbfc88c6-5d1d-41f9-8ca9-e24d7d8a276f\",\n      \"label\": \"label-3850\",\n      \"height\": 149,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"27202d82-6e35-40df-b62b-40d3c968640f\",\n      \"label\": \"label-3851\",\n      \"height\": 127,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"4af4c1a9-99d4-4a60-9882-ec2a3499a2e7\",\n      \"label\": \"label-3852\",\n      \"height\": 202,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"3010acc5-b579-4cd7-bb04-0d70c0d9a798\",\n      \"label\": \"label-3853\",\n      \"height\": 418,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"aaeebd80-946c-452d-bd61-40801bb6c7b5\",\n      \"label\": \"label-3854\",\n      \"height\": 269,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"86ce6660-b529-4eac-9b8e-5c10374a2cdb\",\n      \"label\": \"label-3855\",\n      \"height\": 440,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"e1638c6a-2b8c-4169-89cd-db82ca15d20c\",\n      \"label\": \"label-3856\",\n      \"height\": 140,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"679e157d-8711-4767-9350-c89172c4f15f\",\n      \"label\": \"label-3857\",\n      \"height\": 366,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"bbe840ed-afd9-49e7-8f84-3b46c9158a6b\",\n      \"label\": \"label-3858\",\n      \"height\": 114,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"0f38ca9b-3e3d-4a10-80db-fcac2d22a93d\",\n      \"label\": \"label-3859\",\n      \"height\": 379,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"1607926d-cb8f-4aa9-97ea-81bc603dba22\",\n      \"label\": \"label-3860\",\n      \"height\": 185,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"9f3eebab-eac1-4b52-800c-326fae61fc9d\",\n      \"label\": \"label-3861\",\n      \"height\": 119,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"def8d695-ad25-453b-a717-27608125106f\",\n      \"label\": \"label-3862\",\n      \"height\": 245,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"948876f6-38aa-4167-ac6f-22efaa025f54\",\n      \"label\": \"label-3863\",\n      \"height\": 293,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"b915672b-af70-4486-81c8-2ab6f184d1a8\",\n      \"label\": \"label-3864\",\n      \"height\": 234,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"53813b39-134d-4192-a6b5-3b7d7e459407\",\n      \"label\": \"label-3865\",\n      \"height\": 361,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"5da0e7ea-703d-44f3-b7e3-bcedbdc68e94\",\n      \"label\": \"label-3866\",\n      \"height\": 108,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"3cd4a5ce-e298-4ccd-bb07-688a7b6aebfb\",\n      \"label\": \"label-3867\",\n      \"height\": 74,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"29985d8f-81dd-44a8-9f0f-5fe0d86002f0\",\n      \"label\": \"label-3868\",\n      \"height\": 351,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"f4acd0c7-45d2-4b14-8311-c7d609b3de5b\",\n      \"label\": \"label-3869\",\n      \"height\": 471,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"d9f74fb4-3930-4baa-a524-bb20fa950236\",\n      \"label\": \"label-3870\",\n      \"height\": 255,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"bfca78b5-3596-47c1-809e-4cb8b28ffefd\",\n      \"label\": \"label-3871\",\n      \"height\": 96,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"bb809555-6caf-4a4c-a799-303d2a775e1b\",\n      \"label\": \"label-3872\",\n      \"height\": 504,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"9cc246a4-dec1-4eac-8018-51d4f04f0b7c\",\n      \"label\": \"label-3873\",\n      \"height\": 356,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"90182cbb-fac0-4039-9106-3c426d7d69ab\",\n      \"label\": \"label-3874\",\n      \"height\": 324,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"b09bd02e-ae48-45f3-8168-a928551a97af\",\n      \"label\": \"label-3875\",\n      \"height\": 327,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"7fd00213-d525-472c-b4e6-a9e0f3fd151a\",\n      \"label\": \"label-3876\",\n      \"height\": 360,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"0475a486-3c64-4954-994e-2f9981946ca4\",\n      \"label\": \"label-3877\",\n      \"height\": 163,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"565ed8c4-871d-4afd-b967-d2133659b93a\",\n      \"label\": \"label-3878\",\n      \"height\": 90,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"459731b3-d220-44ea-b83a-32ad6009c016\",\n      \"label\": \"label-3879\",\n      \"height\": 389,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"40ff4f9b-d66a-4848-af3c-592e4620fcb7\",\n      \"label\": \"label-3880\",\n      \"height\": 93,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"e6ac578d-6022-4559-aa69-16a50b0b4af4\",\n      \"label\": \"label-3881\",\n      \"height\": 425,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"4c2f0d4d-eb22-4c76-a3a9-db3540cc7b5e\",\n      \"label\": \"label-3882\",\n      \"height\": 49,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"b714c5ce-cc65-4c08-be32-7a643a20189b\",\n      \"label\": \"label-3883\",\n      \"height\": 346,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"8f34e146-ccdc-4a44-9e86-6cd6f12edeb5\",\n      \"label\": \"label-3884\",\n      \"height\": 445,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"cc4382b0-59a8-410a-8d76-db01c257c32e\",\n      \"label\": \"label-3885\",\n      \"height\": 159,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"a3822ea3-d68a-4e41-94bb-619383cab573\",\n      \"label\": \"label-3886\",\n      \"height\": 246,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"36ad7e0c-53d2-4301-aea8-2873abefcdcc\",\n      \"label\": \"label-3887\",\n      \"height\": 343,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"216e2824-1589-4d48-8f86-32bfbb70cd04\",\n      \"label\": \"label-3888\",\n      \"height\": 401,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"2f04b7a8-d934-4d85-b5f7-feb570ba6bf4\",\n      \"label\": \"label-3889\",\n      \"height\": 447,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"e34f2f35-2035-43a5-8282-35cb91c87a36\",\n      \"label\": \"label-3890\",\n      \"height\": 96,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"2472c18d-460a-45a8-bee0-071d04133eab\",\n      \"label\": \"label-3891\",\n      \"height\": 455,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"380ef829-4660-469c-bc18-986e02dc552c\",\n      \"label\": \"label-3892\",\n      \"height\": 37,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"638ecb24-2f02-49db-bb00-22f48fc11a37\",\n      \"label\": \"label-3893\",\n      \"height\": 132,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"6fa29fa1-579f-4cbb-8205-39395f24ccbf\",\n      \"label\": \"label-3894\",\n      \"height\": 299,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"e11a9236-b20f-491d-86b5-b715beb76648\",\n      \"label\": \"label-3895\",\n      \"height\": 457,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"25259042-6053-4f93-9104-721a3eca2659\",\n      \"label\": \"label-3896\",\n      \"height\": 168,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"0d6d62d2-7bfe-4344-9b34-9e521154e9b3\",\n      \"label\": \"label-3897\",\n      \"height\": 118,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"6b5dadcf-6542-4a1e-aa8f-258c337d31cf\",\n      \"label\": \"label-3898\",\n      \"height\": 283,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"f844b03a-b0ef-4e74-82ce-a954674a298f\",\n      \"label\": \"label-3899\",\n      \"height\": 106,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"3cffb502-1924-459a-9a6b-3bbcd5f5bb19\",\n      \"label\": \"label-3900\",\n      \"height\": 360,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"6103b618-c7fa-4765-9bcb-e8228bc5eb1e\",\n      \"label\": \"label-3901\",\n      \"height\": 144,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"6b9f70e8-1223-4f07-8ec9-d4a4d8026920\",\n      \"label\": \"label-3902\",\n      \"height\": 252,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"9785f5fc-d166-42c2-aa20-be7280ce8352\",\n      \"label\": \"label-3903\",\n      \"height\": 37,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"3660775f-b171-467a-a5ab-aa2325f1ef67\",\n      \"label\": \"label-3904\",\n      \"height\": 99,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"47e3035b-c0dc-4f07-82d0-9282d994e59d\",\n      \"label\": \"label-3905\",\n      \"height\": 407,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"59edc9ca-1cd8-4cc1-b3ab-0c4072621d00\",\n      \"label\": \"label-3906\",\n      \"height\": 119,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"7d819b6f-6715-443f-8760-22debd1b49e0\",\n      \"label\": \"label-3907\",\n      \"height\": 183,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"212657d0-55d7-4f39-8361-63055b022de8\",\n      \"label\": \"label-3908\",\n      \"height\": 255,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"ebdeee67-0e80-4362-a86c-3c5a952060e5\",\n      \"label\": \"label-3909\",\n      \"height\": 486,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"14649eb6-c398-46d7-bfbc-683a21ff8b0b\",\n      \"label\": \"label-3910\",\n      \"height\": 434,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"70d577be-031a-414b-9e44-c4c1edbfc89f\",\n      \"label\": \"label-3911\",\n      \"height\": 318,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"b5e9d98c-0155-4b7c-a7f0-93de0f917586\",\n      \"label\": \"label-3912\",\n      \"height\": 254,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"82abb243-05af-465b-9264-c66745cf980c\",\n      \"label\": \"label-3913\",\n      \"height\": 320,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"a6474faf-fa77-4d98-9d64-3ada4ad71091\",\n      \"label\": \"label-3914\",\n      \"height\": 442,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"df46cc64-263a-423a-b8ef-5658a83c57b6\",\n      \"label\": \"label-3915\",\n      \"height\": 150,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"c3962cf4-08fb-4621-9e5f-9f4fe976e503\",\n      \"label\": \"label-3916\",\n      \"height\": 442,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"0288e05d-b6de-4ad7-81c0-ac407fdd1455\",\n      \"label\": \"label-3917\",\n      \"height\": 320,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"31a44408-7e8a-41b4-97f9-313232b5cd28\",\n      \"label\": \"label-3918\",\n      \"height\": 455,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"c4e8a96a-20d3-4308-b203-4dd90b4123c7\",\n      \"label\": \"label-3919\",\n      \"height\": 416,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"8fed5010-5210-4cc8-9ca6-b998ffca4c85\",\n      \"label\": \"label-3920\",\n      \"height\": 394,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"9fbee64c-9f53-4f74-8f4a-bf2ecddaabae\",\n      \"label\": \"label-3921\",\n      \"height\": 220,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"9da053e0-64da-452f-91bc-b9dbb69dc032\",\n      \"label\": \"label-3922\",\n      \"height\": 303,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"669bbbf2-d30c-4d04-a593-f2f3dc06987a\",\n      \"label\": \"label-3923\",\n      \"height\": 245,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"b2e3e0e7-63e2-4142-8ad6-e12bd9732943\",\n      \"label\": \"label-3924\",\n      \"height\": 119,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"ee3ddbfd-7fa8-4747-852e-2e106ff7fd4b\",\n      \"label\": \"label-3925\",\n      \"height\": 100,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"a33c6472-ef3e-4318-9d39-263a0fcbe0a4\",\n      \"label\": \"label-3926\",\n      \"height\": 453,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"85e90dfd-5afd-4a05-857c-379e1f316f2a\",\n      \"label\": \"label-3927\",\n      \"height\": 406,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"023032e0-00bf-4d99-8bef-3c864bb4bb6a\",\n      \"label\": \"label-3928\",\n      \"height\": 480,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"b24984cc-8e75-4da3-b9ce-c87241e81ad9\",\n      \"label\": \"label-3929\",\n      \"height\": 424,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"2a2b6031-ce50-419b-907a-75afcced97dc\",\n      \"label\": \"label-3930\",\n      \"height\": 180,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"5c5dc4b6-2f29-405d-8cee-beb411d42d65\",\n      \"label\": \"label-3931\",\n      \"height\": 45,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"6963df4a-0703-41db-a0e3-aeba54b458ed\",\n      \"label\": \"label-3932\",\n      \"height\": 317,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"1e161952-7aed-4e35-bc62-e239d8691535\",\n      \"label\": \"label-3933\",\n      \"height\": 180,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"dd9f2874-3a1a-4479-950d-992b90b9045d\",\n      \"label\": \"label-3934\",\n      \"height\": 154,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"2aafe1ce-9dc0-4ddf-8df9-7aca43448d40\",\n      \"label\": \"label-3935\",\n      \"height\": 197,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"e8123c59-68d9-445e-84f1-b5aee193fd9f\",\n      \"label\": \"label-3936\",\n      \"height\": 318,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"dd3dc50c-8347-4ab2-b0eb-4357ee962cc9\",\n      \"label\": \"label-3937\",\n      \"height\": 278,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"8b0eff19-e00d-485b-9514-fb7a96fa110e\",\n      \"label\": \"label-3938\",\n      \"height\": 496,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"88e0b0a1-ba3d-4272-b63e-95bc84637087\",\n      \"label\": \"label-3939\",\n      \"height\": 422,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"c60b6c32-c048-49cf-8929-7a8f37aa5aa7\",\n      \"label\": \"label-3940\",\n      \"height\": 255,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"0d5ba7dd-406b-4d33-9540-dbe987056975\",\n      \"label\": \"label-3941\",\n      \"height\": 223,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"877f5acd-c66d-49a1-a14d-488d56a9fba1\",\n      \"label\": \"label-3942\",\n      \"height\": 408,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"d900306c-c2fe-4bdc-b8ab-f5ed4647088b\",\n      \"label\": \"label-3943\",\n      \"height\": 518,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"0aae499c-2a34-4a03-a3b0-91d146a7a4a1\",\n      \"label\": \"label-3944\",\n      \"height\": 57,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"0a0c4bcd-94e6-4467-9115-e46953059a54\",\n      \"label\": \"label-3945\",\n      \"height\": 63,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"35e0b723-7713-450f-b59c-6c7345f7b0dc\",\n      \"label\": \"label-3946\",\n      \"height\": 399,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"6b0034ea-babc-49ea-a78b-2566a299fd34\",\n      \"label\": \"label-3947\",\n      \"height\": 134,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"edaf4da3-8448-4047-bcae-a71e2b993e61\",\n      \"label\": \"label-3948\",\n      \"height\": 319,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"bac27a93-abaa-4cde-85bc-6c90a21319d5\",\n      \"label\": \"label-3949\",\n      \"height\": 522,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"71f39c13-19a3-4b92-b6c4-8d032573c5d8\",\n      \"label\": \"label-3950\",\n      \"height\": 177,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"9b3dac11-3b17-4559-8f29-d9ad06f1aa16\",\n      \"label\": \"label-3951\",\n      \"height\": 121,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"17afc4ba-33ec-41b9-924e-b27755ef76c6\",\n      \"label\": \"label-3952\",\n      \"height\": 107,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"634a381b-aaf9-405d-aa74-33114d6aeac8\",\n      \"label\": \"label-3953\",\n      \"height\": 273,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"5166781f-db14-441d-b3f8-ea67c3ca1c2b\",\n      \"label\": \"label-3954\",\n      \"height\": 124,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"a76f9633-c8be-46fd-8dea-5fc454499ff9\",\n      \"label\": \"label-3955\",\n      \"height\": 177,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"4df099ed-0117-4198-8d65-763319311aaf\",\n      \"label\": \"label-3956\",\n      \"height\": 186,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"fbf589a7-e41e-4bb2-aeec-ae15268909b8\",\n      \"label\": \"label-3957\",\n      \"height\": 244,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"f1b9182a-3399-43fe-8089-38b1ab87276c\",\n      \"label\": \"label-3958\",\n      \"height\": 97,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"283793fe-c5e9-4d1f-90ed-ca3c000f935b\",\n      \"label\": \"label-3959\",\n      \"height\": 223,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"727e3818-af3b-46d1-86c6-d5cb01db1b27\",\n      \"label\": \"label-3960\",\n      \"height\": 259,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"f55441f7-89e5-4676-ac42-fbd4805a9841\",\n      \"label\": \"label-3961\",\n      \"height\": 400,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"ee78bb0d-1750-447f-8edb-5bf7ce78b4fb\",\n      \"label\": \"label-3962\",\n      \"height\": 110,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"95f47556-5566-49ff-b581-8d1de52e3378\",\n      \"label\": \"label-3963\",\n      \"height\": 234,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"e0840fe8-fa49-43cb-94a6-7c9f4820d004\",\n      \"label\": \"label-3964\",\n      \"height\": 446,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"cefbf08f-d0f1-4f54-91d2-9bd107fff18a\",\n      \"label\": \"label-3965\",\n      \"height\": 58,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"c9b11096-74c6-428e-acdd-640ce9afa29d\",\n      \"label\": \"label-3966\",\n      \"height\": 139,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"d5117e58-de41-41cc-9d6f-eb9594c43978\",\n      \"label\": \"label-3967\",\n      \"height\": 125,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"8904c6a5-78c3-4b04-8743-441fe32ae067\",\n      \"label\": \"label-3968\",\n      \"height\": 462,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"63c8d627-76a2-4f75-b0ed-02958966b991\",\n      \"label\": \"label-3969\",\n      \"height\": 141,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"f41f6318-9284-4c1e-8f46-35af0b7b9151\",\n      \"label\": \"label-3970\",\n      \"height\": 399,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"8547a382-2abc-4265-9378-bc39149835ab\",\n      \"label\": \"label-3971\",\n      \"height\": 76,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"27078488-5496-4fa6-a997-c0deb82f1e2c\",\n      \"label\": \"label-3972\",\n      \"height\": 80,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"c28d596a-e348-4965-a72b-3b16ca6493a3\",\n      \"label\": \"label-3973\",\n      \"height\": 80,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"459aac8a-71c8-4bfc-820c-fe2c64ac33fb\",\n      \"label\": \"label-3974\",\n      \"height\": 55,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"982facb5-bb22-4c62-89e0-23429f4f9e16\",\n      \"label\": \"label-3975\",\n      \"height\": 296,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"262a8f3b-18cc-42bf-b65a-0e6afc5fb94a\",\n      \"label\": \"label-3976\",\n      \"height\": 118,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"e3151695-d093-4f57-a6da-3f39cc2252eb\",\n      \"label\": \"label-3977\",\n      \"height\": 125,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"cd753fe8-5a85-4d58-88e5-06015aaedf77\",\n      \"label\": \"label-3978\",\n      \"height\": 352,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"3417ec9b-18db-4ed7-803a-6ba8c76124ff\",\n      \"label\": \"label-3979\",\n      \"height\": 181,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"123a6444-c87c-4dee-9ff9-40bf6a59bd0b\",\n      \"label\": \"label-3980\",\n      \"height\": 188,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"6a991886-2716-422f-90d2-511b39a3ec28\",\n      \"label\": \"label-3981\",\n      \"height\": 347,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"68dda5a1-488d-4b78-b075-7538395acff6\",\n      \"label\": \"label-3982\",\n      \"height\": 238,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"5ffbdbde-45e6-4149-b72b-9bddc819883f\",\n      \"label\": \"label-3983\",\n      \"height\": 461,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"8a393519-f02a-4708-a4ef-d88cd8b71b0e\",\n      \"label\": \"label-3984\",\n      \"height\": 127,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"f800cddf-3ad0-4c3b-811c-46d19b2c9cea\",\n      \"label\": \"label-3985\",\n      \"height\": 115,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"3cf608e4-5ee1-41b6-ba23-568a7d2ce2c6\",\n      \"label\": \"label-3986\",\n      \"height\": 359,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"3f9ed45c-48e5-440f-9b0c-2a922a74b3fc\",\n      \"label\": \"label-3987\",\n      \"height\": 445,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"082ea272-30e4-4e4e-a387-de21b373927c\",\n      \"label\": \"label-3988\",\n      \"height\": 332,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"10a16974-4985-4ca5-a16e-829e178de525\",\n      \"label\": \"label-3989\",\n      \"height\": 483,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"f27033c3-0cac-4160-8beb-93ed252ac922\",\n      \"label\": \"label-3990\",\n      \"height\": 392,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"fd6f2bf2-3626-4845-bb23-f92c3f1443b0\",\n      \"label\": \"label-3991\",\n      \"height\": 78,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"953eb1ba-27c2-47d9-b10c-30cca6cb139c\",\n      \"label\": \"label-3992\",\n      \"height\": 207,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"1c102ac6-e9cc-4b63-8180-cbf190e57bb8\",\n      \"label\": \"label-3993\",\n      \"height\": 436,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"96928ed6-a86e-4761-b6da-7fa58ec234f9\",\n      \"label\": \"label-3994\",\n      \"height\": 90,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"f698f713-08a1-4bf9-bb37-53b2667ed15a\",\n      \"label\": \"label-3995\",\n      \"height\": 56,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"a007a987-d105-44a2-b577-046ef6330e18\",\n      \"label\": \"label-3996\",\n      \"height\": 301,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"933abc72-ea64-41bb-9e36-780799344069\",\n      \"label\": \"label-3997\",\n      \"height\": 71,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"f5a985ae-cf20-420c-8a32-83b7c1c113c3\",\n      \"label\": \"label-3998\",\n      \"height\": 242,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"a2c2f554-d04c-4c7a-98d3-90332e1f9533\",\n      \"label\": \"label-3999\",\n      \"height\": 36,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"12cecd0b-d2a0-48c5-acdc-794e71eead26\",\n      \"label\": \"label-4000\",\n      \"height\": 103,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"dc0313f6-8275-4441-bc58-b7e29a6d1846\",\n      \"label\": \"label-4001\",\n      \"height\": 150,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"988b7c78-4474-40b4-b10d-36769408a847\",\n      \"label\": \"label-4002\",\n      \"height\": 76,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"fa12a900-1bd6-46f4-a75c-4c7e7db07927\",\n      \"label\": \"label-4003\",\n      \"height\": 336,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"3ac1e41d-684d-4e07-80e2-4a882a858af9\",\n      \"label\": \"label-4004\",\n      \"height\": 434,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"1f732e06-7e0a-49af-8ed7-bf16244e925b\",\n      \"label\": \"label-4005\",\n      \"height\": 463,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"44a8bb44-6bd9-408b-97b5-30ab9a0cb9bd\",\n      \"label\": \"label-4006\",\n      \"height\": 343,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"da04fdbf-0ea5-4ebc-9709-ef0a5680d760\",\n      \"label\": \"label-4007\",\n      \"height\": 57,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"b2c5f6db-d1cc-41a2-8fa2-5be60733cff1\",\n      \"label\": \"label-4008\",\n      \"height\": 112,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"943b8ff9-5852-45ac-b891-53b66c89dd41\",\n      \"label\": \"label-4009\",\n      \"height\": 64,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"5c74014b-3c54-4d8f-83c2-9f7add525f08\",\n      \"label\": \"label-4010\",\n      \"height\": 317,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"9cb6136a-d5b6-467b-a0e1-ff0518e0314e\",\n      \"label\": \"label-4011\",\n      \"height\": 220,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"6bd475c3-ad31-44d6-bf38-f22c0191414a\",\n      \"label\": \"label-4012\",\n      \"height\": 73,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"495b67b7-2fb2-4460-ba0e-175e25e142c5\",\n      \"label\": \"label-4013\",\n      \"height\": 119,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"2a5bfa26-8635-41d6-b79c-7b16b82337ab\",\n      \"label\": \"label-4014\",\n      \"height\": 36,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"4ffba6b0-d7b6-4f95-a6b7-ae9d5c78e462\",\n      \"label\": \"label-4015\",\n      \"height\": 348,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"6d0da94f-2042-4854-bed5-868ed75f9681\",\n      \"label\": \"label-4016\",\n      \"height\": 132,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"b28003f1-2d1e-4fc2-819f-7df64cf1994c\",\n      \"label\": \"label-4017\",\n      \"height\": 109,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"ef6e7e2d-8d2a-400a-b9ea-5f150818f978\",\n      \"label\": \"label-4018\",\n      \"height\": 267,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"a49ae4af-8ecb-478d-aec0-23191d5f3e30\",\n      \"label\": \"label-4019\",\n      \"height\": 74,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"af5e75e4-5ceb-4e8a-9c7b-bc8a4e23a668\",\n      \"label\": \"label-4020\",\n      \"height\": 178,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"cd1aa34f-ac5d-4035-b6f2-a0e80e3055ad\",\n      \"label\": \"label-4021\",\n      \"height\": 324,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"01f84516-fa23-44f4-a168-1e6be905b66d\",\n      \"label\": \"label-4022\",\n      \"height\": 285,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"94e8a2c9-0304-494c-a6ed-c2d23d217523\",\n      \"label\": \"label-4023\",\n      \"height\": 82,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"08bb0b78-33bd-4742-99ee-d3a51e05be49\",\n      \"label\": \"label-4024\",\n      \"height\": 253,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"d8d0b0f8-dba0-4a37-8f06-a1796000210c\",\n      \"label\": \"label-4025\",\n      \"height\": 358,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"09616b60-3850-4542-abc3-f2b361841e81\",\n      \"label\": \"label-4026\",\n      \"height\": 326,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"726befad-71fb-497b-ae76-88e9072b45d6\",\n      \"label\": \"label-4027\",\n      \"height\": 135,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"2ffa3efd-3718-4c13-b105-63164c79d962\",\n      \"label\": \"label-4028\",\n      \"height\": 417,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"bb391d9b-1103-4384-916b-a2dec1088198\",\n      \"label\": \"label-4029\",\n      \"height\": 507,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"8c2ab897-1251-4ca8-a06f-430b58f65fa9\",\n      \"label\": \"label-4030\",\n      \"height\": 485,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"78a9061c-d97f-4477-91e8-7c3fe9d12c6e\",\n      \"label\": \"label-4031\",\n      \"height\": 114,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"9995ecd8-3838-4765-8e9d-d9c5a0ffbd6d\",\n      \"label\": \"label-4032\",\n      \"height\": 115,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"fb1b4cb4-d19b-4871-baa9-195584489a0d\",\n      \"label\": \"label-4033\",\n      \"height\": 179,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"bd4c0c9e-cd21-48fd-b2eb-e5c81b1b65c4\",\n      \"label\": \"label-4034\",\n      \"height\": 265,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"0700a703-5213-4abf-93c1-f65f4fb25881\",\n      \"label\": \"label-4035\",\n      \"height\": 112,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"bd3f9036-1b46-448d-bef5-a44f8acb9dfb\",\n      \"label\": \"label-4036\",\n      \"height\": 57,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"bc9af5fd-e62e-464d-a166-ba6fff09c0ce\",\n      \"label\": \"label-4037\",\n      \"height\": 438,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"e8dc12f3-b450-4257-850e-f8486e851e0b\",\n      \"label\": \"label-4038\",\n      \"height\": 228,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"a725ecc2-cf04-42bd-bf54-5df6a8456f54\",\n      \"label\": \"label-4039\",\n      \"height\": 217,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"81868551-5a9a-4423-a8c8-472413224635\",\n      \"label\": \"label-4040\",\n      \"height\": 437,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"73f9e2f7-d8db-4e84-8ed5-ea0d8b0046f1\",\n      \"label\": \"label-4041\",\n      \"height\": 309,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"3e783038-d25f-4f84-a165-96708c5e47ad\",\n      \"label\": \"label-4042\",\n      \"height\": 502,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"6c6b724f-3ddd-4573-934b-14631e8866ca\",\n      \"label\": \"label-4043\",\n      \"height\": 249,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"7912c964-92bd-47c4-bb3d-4f14ba9a0fb4\",\n      \"label\": \"label-4044\",\n      \"height\": 312,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"8f62b462-451d-4f19-8de7-2d77f2b5d72f\",\n      \"label\": \"label-4045\",\n      \"height\": 522,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"9eeab150-0bef-49bd-b05f-ece4932ebd41\",\n      \"label\": \"label-4046\",\n      \"height\": 148,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"1de9a6ae-990b-4f91-8b8f-13a2478a71df\",\n      \"label\": \"label-4047\",\n      \"height\": 335,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"f82d9f0d-275b-4331-8f29-26bb928364de\",\n      \"label\": \"label-4048\",\n      \"height\": 229,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"4d4ad80b-55f9-47cd-9c71-35c56e716aeb\",\n      \"label\": \"label-4049\",\n      \"height\": 91,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"33802c1b-bc7e-4f67-b033-1a750ff91ec8\",\n      \"label\": \"label-4050\",\n      \"height\": 177,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"6c013ddf-3856-4354-91e3-eb8ba93d7aa5\",\n      \"label\": \"label-4051\",\n      \"height\": 263,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"0d064297-7169-4f22-8ae6-23b1a12e0fe5\",\n      \"label\": \"label-4052\",\n      \"height\": 382,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"985b2884-0216-401f-a313-4a45d72bca7d\",\n      \"label\": \"label-4053\",\n      \"height\": 165,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"f703093e-7b8e-4be0-8f57-78a5308bc304\",\n      \"label\": \"label-4054\",\n      \"height\": 326,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"68c743c4-5e90-4952-8e9f-4154bfe629ff\",\n      \"label\": \"label-4055\",\n      \"height\": 414,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"d5010433-b547-4c77-b3fd-37c7f6f4c287\",\n      \"label\": \"label-4056\",\n      \"height\": 93,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"a3d2e4ed-64ee-4654-93e8-ccf302f916be\",\n      \"label\": \"label-4057\",\n      \"height\": 39,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"1129016f-2b92-40fe-8ab2-97f8981b3be0\",\n      \"label\": \"label-4058\",\n      \"height\": 349,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"e2616ddb-43bc-49dd-adc6-090811e10093\",\n      \"label\": \"label-4059\",\n      \"height\": 473,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"fa539f4b-5bae-4fda-be37-9101cb1f2823\",\n      \"label\": \"label-4060\",\n      \"height\": 423,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"0ab2aeb1-716d-4875-b8b9-46b4f34efebc\",\n      \"label\": \"label-4061\",\n      \"height\": 452,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"bb2a7427-9bab-4e19-9652-171982daa481\",\n      \"label\": \"label-4062\",\n      \"height\": 233,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"c910930b-ef68-44df-8767-1e993a7b29e3\",\n      \"label\": \"label-4063\",\n      \"height\": 265,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"7f6b0ce5-f839-498b-ab3b-ea5d02c5c8a5\",\n      \"label\": \"label-4064\",\n      \"height\": 66,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"cbbe7b13-59c6-4418-95f7-0cf4a6b9decd\",\n      \"label\": \"label-4065\",\n      \"height\": 164,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"89e473c8-9e38-498a-975f-6bcc115da60e\",\n      \"label\": \"label-4066\",\n      \"height\": 270,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"82d634c3-00de-45bd-a030-78559adddbed\",\n      \"label\": \"label-4067\",\n      \"height\": 109,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"c8eec253-95e3-4799-91e8-c299d63443ef\",\n      \"label\": \"label-4068\",\n      \"height\": 367,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"7837b92f-4aa0-4f22-8770-57717d7bd265\",\n      \"label\": \"label-4069\",\n      \"height\": 505,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"9e592db6-3a4d-411c-849d-d58a5476d036\",\n      \"label\": \"label-4070\",\n      \"height\": 498,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"32d510e2-d270-4e47-aca7-d0d570f6f3e1\",\n      \"label\": \"label-4071\",\n      \"height\": 491,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"37df71c1-ccda-48c5-b575-943eff1c397d\",\n      \"label\": \"label-4072\",\n      \"height\": 93,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"253c111a-2c4e-4c6d-bf51-4a3da99df74e\",\n      \"label\": \"label-4073\",\n      \"height\": 241,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"b791eb31-176b-48a6-b9d5-91e68ea35842\",\n      \"label\": \"label-4074\",\n      \"height\": 145,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"45250597-13ec-4d4c-b0cf-8af384657eff\",\n      \"label\": \"label-4075\",\n      \"height\": 189,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"a5260958-e34e-41a3-94f8-1a39f3943130\",\n      \"label\": \"label-4076\",\n      \"height\": 171,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"16fc331b-4989-4dda-953e-a9b867fedefb\",\n      \"label\": \"label-4077\",\n      \"height\": 342,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"9156fb9a-89a7-4c47-8aad-457c15f2c19f\",\n      \"label\": \"label-4078\",\n      \"height\": 199,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"1ca1e415-d6e8-407d-84a2-533816a10f6c\",\n      \"label\": \"label-4079\",\n      \"height\": 90,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"504fa5a3-7bf6-45f6-847e-ef3841003a1f\",\n      \"label\": \"label-4080\",\n      \"height\": 159,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"bbcd13a3-ef79-423e-bfdb-1ca215239c9f\",\n      \"label\": \"label-4081\",\n      \"height\": 146,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"16a320cb-6442-450b-9245-c678a0d62753\",\n      \"label\": \"label-4082\",\n      \"height\": 145,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"7d97ff92-1450-4b1a-9701-75a69241c354\",\n      \"label\": \"label-4083\",\n      \"height\": 167,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"7f2b45cd-9ac7-47e9-96bc-65b0870dd55a\",\n      \"label\": \"label-4084\",\n      \"height\": 350,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"deae5cdc-c1ed-4366-9bba-3a7caee0c031\",\n      \"label\": \"label-4085\",\n      \"height\": 330,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"00ef6877-c749-41c3-9f89-8d0a4382f456\",\n      \"label\": \"label-4086\",\n      \"height\": 240,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"42b1cd3c-7f4a-45d5-ad7e-c581ad46e9b4\",\n      \"label\": \"label-4087\",\n      \"height\": 161,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"8e74273a-42fb-418c-bb41-f99c7966b3de\",\n      \"label\": \"label-4088\",\n      \"height\": 313,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"6eb614d2-09aa-4863-badd-7dc42f5b9c18\",\n      \"label\": \"label-4089\",\n      \"height\": 295,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"97e3db9d-5b00-487b-ace4-678945f1863a\",\n      \"label\": \"label-4090\",\n      \"height\": 433,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"bda2200f-13f5-4c9e-a4b0-f0f81ad7699f\",\n      \"label\": \"label-4091\",\n      \"height\": 345,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"a0bc6ef0-1754-4093-a463-14b4aeb87d4f\",\n      \"label\": \"label-4092\",\n      \"height\": 435,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"dcfbe5ce-85a6-4c2d-8174-5af3a24ddc25\",\n      \"label\": \"label-4093\",\n      \"height\": 367,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"d10f1a4e-cc43-4d3e-a2a8-eb6d1a1532d5\",\n      \"label\": \"label-4094\",\n      \"height\": 76,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"a8b0fc68-3c6b-4111-828a-b21d740daeb2\",\n      \"label\": \"label-4095\",\n      \"height\": 418,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"8a447bd3-4db7-4a7a-918d-f734c5b71c2c\",\n      \"label\": \"label-4096\",\n      \"height\": 169,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"aafc4715-c30d-413d-bb05-d005c49a2275\",\n      \"label\": \"label-4097\",\n      \"height\": 90,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"d63a54b1-afde-4f61-9002-5963269d1a81\",\n      \"label\": \"label-4098\",\n      \"height\": 302,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"16188699-a19d-468d-9ea7-fff6dac22131\",\n      \"label\": \"label-4099\",\n      \"height\": 69,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"c3291f8b-900f-4010-ab60-f03e658c4594\",\n      \"label\": \"label-4100\",\n      \"height\": 113,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"490ad9f6-45e5-4930-a975-79e4f1e050e6\",\n      \"label\": \"label-4101\",\n      \"height\": 531,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"77dcc13d-1c8e-47ec-9826-8ca608848066\",\n      \"label\": \"label-4102\",\n      \"height\": 230,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"6879f779-47bb-4622-a276-73fadc001927\",\n      \"label\": \"label-4103\",\n      \"height\": 492,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"0dffbce9-8e5c-4a0f-bc91-687fe464822e\",\n      \"label\": \"label-4104\",\n      \"height\": 100,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"066314b1-dc5a-4b16-87b9-8a679180bd8b\",\n      \"label\": \"label-4105\",\n      \"height\": 259,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"889de7df-b607-4f23-a21a-45390fef9a33\",\n      \"label\": \"label-4106\",\n      \"height\": 415,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"1f75ac5f-ca13-4112-b293-53d58a162684\",\n      \"label\": \"label-4107\",\n      \"height\": 334,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"2a4e61b1-aac9-4f7a-98f0-7c7e53cdfcc6\",\n      \"label\": \"label-4108\",\n      \"height\": 114,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"cd2eda46-0640-4c99-af93-19224842e5c5\",\n      \"label\": \"label-4109\",\n      \"height\": 395,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"576bdb9c-6bac-4016-80c2-256584266090\",\n      \"label\": \"label-4110\",\n      \"height\": 470,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"830fa5bb-068b-4b24-baff-ccc4158dc0f5\",\n      \"label\": \"label-4111\",\n      \"height\": 93,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"e1ead7e5-f2be-4548-ad12-b87808e70dae\",\n      \"label\": \"label-4112\",\n      \"height\": 393,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"00dfd95d-9c23-4e56-9cac-03eb03508b49\",\n      \"label\": \"label-4113\",\n      \"height\": 135,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"e1c756f3-9c9c-45a5-bd77-af8a10d4a560\",\n      \"label\": \"label-4114\",\n      \"height\": 393,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"3f5816d9-649a-480a-97db-6c76c245a199\",\n      \"label\": \"label-4115\",\n      \"height\": 213,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"051d2288-e0ca-4ebe-8d0d-18d2ec1869f7\",\n      \"label\": \"label-4116\",\n      \"height\": 490,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"b59a3072-7878-4656-8db9-7b8d71f58e85\",\n      \"label\": \"label-4117\",\n      \"height\": 497,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"011dd1b2-c49a-4db3-9f3d-631bac905692\",\n      \"label\": \"label-4118\",\n      \"height\": 321,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"2297a74f-694c-409a-b768-b8fabcfa6d59\",\n      \"label\": \"label-4119\",\n      \"height\": 72,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"58c10db7-0d84-431d-819e-f8140060dddc\",\n      \"label\": \"label-4120\",\n      \"height\": 85,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"59a6f4d9-e140-4627-bfb5-0c7229bd1560\",\n      \"label\": \"label-4121\",\n      \"height\": 148,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"e8dd5feb-3902-4702-bc01-f4978ad362ab\",\n      \"label\": \"label-4122\",\n      \"height\": 479,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"850a1048-82f0-4f27-a250-9712e2fce2be\",\n      \"label\": \"label-4123\",\n      \"height\": 217,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"fea8e62d-feca-42ea-9127-1cb76d7d9535\",\n      \"label\": \"label-4124\",\n      \"height\": 350,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"2cfc95c0-f34d-4a38-a5f1-f45f994321d6\",\n      \"label\": \"label-4125\",\n      \"height\": 405,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"5c1a45e7-defb-4baf-9a43-c8820eb823f9\",\n      \"label\": \"label-4126\",\n      \"height\": 185,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"245e136b-9f21-44c0-9b86-a0c80a7675a2\",\n      \"label\": \"label-4127\",\n      \"height\": 162,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"98c1f5e8-2793-4395-ad85-9f7e587bd1ad\",\n      \"label\": \"label-4128\",\n      \"height\": 164,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"cda7b6d4-ce53-4b9c-9fb3-2b77fd0197f9\",\n      \"label\": \"label-4129\",\n      \"height\": 245,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"35c11870-d8d3-4457-9a9b-2de546ad6bc1\",\n      \"label\": \"label-4130\",\n      \"height\": 134,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"a0417163-9cc1-4cc8-9d79-540c603a7c6f\",\n      \"label\": \"label-4131\",\n      \"height\": 170,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"c8b86432-ce84-461d-b5d7-21ca3306c309\",\n      \"label\": \"label-4132\",\n      \"height\": 259,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"fff0b7b5-576e-4229-8348-9c0465eb324a\",\n      \"label\": \"label-4133\",\n      \"height\": 333,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"87a97caa-1848-464e-802e-a7329c123739\",\n      \"label\": \"label-4134\",\n      \"height\": 428,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"aadf1dc8-5aa8-4bee-8c0e-5381480c7a96\",\n      \"label\": \"label-4135\",\n      \"height\": 200,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"1c3f880c-3054-4fbd-802e-e25071ff6c56\",\n      \"label\": \"label-4136\",\n      \"height\": 486,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"9d78ec4c-9058-449f-85de-2c676e2751ed\",\n      \"label\": \"label-4137\",\n      \"height\": 431,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"d12bbdf0-6160-4536-a3e2-9367df9f2fa6\",\n      \"label\": \"label-4138\",\n      \"height\": 295,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"5eca5cc3-1d36-41f7-afa1-6e1bf73e339c\",\n      \"label\": \"label-4139\",\n      \"height\": 442,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"020f1d94-ca8c-4856-b79a-b1d33424d9c9\",\n      \"label\": \"label-4140\",\n      \"height\": 205,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"6c0d6b9c-6132-4a03-8a86-213691e0d8e7\",\n      \"label\": \"label-4141\",\n      \"height\": 66,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"264bea91-bde7-45e4-b3c3-80517a8a9c0d\",\n      \"label\": \"label-4142\",\n      \"height\": 218,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"efd7cf48-5156-40b0-b584-bff42b2175ec\",\n      \"label\": \"label-4143\",\n      \"height\": 491,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"de006c53-4317-4605-94fe-9633a0554e31\",\n      \"label\": \"label-4144\",\n      \"height\": 467,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"6cc3c06e-393c-4356-b80a-cfae23c3c608\",\n      \"label\": \"label-4145\",\n      \"height\": 57,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"e7688190-ca3d-4720-9d5e-367762cc6087\",\n      \"label\": \"label-4146\",\n      \"height\": 78,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"e641f2dc-85d8-4647-bc47-e8725437e785\",\n      \"label\": \"label-4147\",\n      \"height\": 425,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"89c1cb0a-aad7-493c-9ec1-096509d74b0e\",\n      \"label\": \"label-4148\",\n      \"height\": 364,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"29f3e7ac-0d9d-4190-aa52-dfa8464293b1\",\n      \"label\": \"label-4149\",\n      \"height\": 115,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"9aa17b42-3787-4c8d-9827-556ffd0a7a49\",\n      \"label\": \"label-4150\",\n      \"height\": 452,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"69b83aa4-c59c-4775-8deb-4c5c6f0bb1b1\",\n      \"label\": \"label-4151\",\n      \"height\": 350,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"201a5ae6-71c4-4459-8d26-22b664706d29\",\n      \"label\": \"label-4152\",\n      \"height\": 423,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"48b2c02a-188d-4e38-ac21-f1c39e165fd3\",\n      \"label\": \"label-4153\",\n      \"height\": 173,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"983888ea-b2bd-43dc-97a9-0386212b3169\",\n      \"label\": \"label-4154\",\n      \"height\": 162,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"546bdf74-4b2b-4191-8c7d-08f2ed2bc77a\",\n      \"label\": \"label-4155\",\n      \"height\": 154,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"8c227a05-8581-4eb2-af49-d7d50f29491c\",\n      \"label\": \"label-4156\",\n      \"height\": 414,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"0b0f8dca-f2db-4ae1-a39e-fe48aa424e89\",\n      \"label\": \"label-4157\",\n      \"height\": 271,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"e61b63c2-46f3-4049-a194-54900b62a443\",\n      \"label\": \"label-4158\",\n      \"height\": 515,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"d4229630-45d8-4334-ad96-ebbed2119226\",\n      \"label\": \"label-4159\",\n      \"height\": 127,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"3ff73c45-aece-456d-84d1-2f90dd49e96f\",\n      \"label\": \"label-4160\",\n      \"height\": 96,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"c800bf41-c85e-4818-817a-65cc6f6fbc8f\",\n      \"label\": \"label-4161\",\n      \"height\": 120,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"9b1edf43-57f7-4c2d-bb77-f900a61eb7d7\",\n      \"label\": \"label-4162\",\n      \"height\": 34,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"76d0f2c1-a57e-429a-89c7-4e56f2a82af8\",\n      \"label\": \"label-4163\",\n      \"height\": 340,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"6ef5e990-b54f-4593-9ebc-dfe54aa886cf\",\n      \"label\": \"label-4164\",\n      \"height\": 123,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"a1ac0159-a006-43f6-865a-d29ac59e7cb5\",\n      \"label\": \"label-4165\",\n      \"height\": 222,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"01157df5-79e5-4596-94e0-59340f8915f7\",\n      \"label\": \"label-4166\",\n      \"height\": 235,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"16491361-cfeb-4e00-b092-5cc09c574663\",\n      \"label\": \"label-4167\",\n      \"height\": 76,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"117473f7-409a-4c5d-9c8d-df5cd22ce240\",\n      \"label\": \"label-4168\",\n      \"height\": 493,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"f110767a-ade4-4106-ba59-d269a8abb9e8\",\n      \"label\": \"label-4169\",\n      \"height\": 203,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"5fc6c38c-1b84-4c56-b76f-7b0147137d1e\",\n      \"label\": \"label-4170\",\n      \"height\": 322,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"7bd61246-38f7-4594-bcec-0a0e7c0be48a\",\n      \"label\": \"label-4171\",\n      \"height\": 473,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"eab65ad6-feda-4e53-8705-2211d1030f5a\",\n      \"label\": \"label-4172\",\n      \"height\": 428,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"9cfbce66-0d1b-4632-8460-420b0201bae2\",\n      \"label\": \"label-4173\",\n      \"height\": 436,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"73fe0221-7d1b-47f8-9b88-f6f56299bf64\",\n      \"label\": \"label-4174\",\n      \"height\": 411,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"b69bd3ef-c739-4f20-bb29-16ca44c81d1b\",\n      \"label\": \"label-4175\",\n      \"height\": 515,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"a2b07f22-31e1-43a8-8965-5a4b86797963\",\n      \"label\": \"label-4176\",\n      \"height\": 494,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"def6d591-36b4-45a4-92f2-64c7ed487f4a\",\n      \"label\": \"label-4177\",\n      \"height\": 246,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"7e6ecaa4-65e7-48cd-80dd-341e3f3bd3ae\",\n      \"label\": \"label-4178\",\n      \"height\": 239,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"1f3d6450-7335-497a-ba6b-8d2854638b2b\",\n      \"label\": \"label-4179\",\n      \"height\": 124,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"899a4aa0-00ce-4035-a416-4c884b466330\",\n      \"label\": \"label-4180\",\n      \"height\": 252,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"1aefdea7-6349-4eca-801d-445fa8f0a65b\",\n      \"label\": \"label-4181\",\n      \"height\": 480,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"ccb1a980-7d6e-4e09-8bdf-a8ddb65da317\",\n      \"label\": \"label-4182\",\n      \"height\": 124,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"54e35cb7-97d5-46e8-9200-4aa6a0f79ced\",\n      \"label\": \"label-4183\",\n      \"height\": 85,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"0b1bb2e1-e71a-4536-a02a-d0a8b46dc4bc\",\n      \"label\": \"label-4184\",\n      \"height\": 493,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"f1b979a2-6ab0-42c7-9f4b-028893b604b0\",\n      \"label\": \"label-4185\",\n      \"height\": 214,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"24f04092-0464-401e-90aa-b887cc16ab51\",\n      \"label\": \"label-4186\",\n      \"height\": 408,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"ef008178-db97-40f5-be3e-8c0ddf5437d5\",\n      \"label\": \"label-4187\",\n      \"height\": 334,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"dc5178d2-9609-4c5b-8d1c-bf6f63ad40f9\",\n      \"label\": \"label-4188\",\n      \"height\": 67,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"a0388ca3-fcce-4119-9e99-1e8dfe526c22\",\n      \"label\": \"label-4189\",\n      \"height\": 312,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"12bd2168-92da-401c-a9b2-baa0723be8e9\",\n      \"label\": \"label-4190\",\n      \"height\": 378,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"b3a4aecd-0846-4956-9e5a-b17e0f915c2b\",\n      \"label\": \"label-4191\",\n      \"height\": 406,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"da87a138-6805-424b-974d-c67004d054ba\",\n      \"label\": \"label-4192\",\n      \"height\": 126,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"aaf14e5a-18e5-4120-ae4c-cd5520991c87\",\n      \"label\": \"label-4193\",\n      \"height\": 462,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"c120cb21-a895-4b44-ab47-f51ed26427f0\",\n      \"label\": \"label-4194\",\n      \"height\": 171,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"50ec2488-7e00-431e-a1cb-32686077afa2\",\n      \"label\": \"label-4195\",\n      \"height\": 378,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"36a84b87-a35a-47de-ace9-36ceaffb0f24\",\n      \"label\": \"label-4196\",\n      \"height\": 343,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"b8fa7b69-d19f-470d-93bd-61a4ac46f6b3\",\n      \"label\": \"label-4197\",\n      \"height\": 294,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"0401e56a-f52b-4e24-9864-5600bacbfbba\",\n      \"label\": \"label-4198\",\n      \"height\": 295,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"21bfd899-3c88-4d0d-87b3-c6b4a1dc93d0\",\n      \"label\": \"label-4199\",\n      \"height\": 467,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"b3af9424-e494-413f-8803-f089cb92359d\",\n      \"label\": \"label-4200\",\n      \"height\": 491,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"89156e22-0b37-4340-8845-78a86c097e05\",\n      \"label\": \"label-4201\",\n      \"height\": 307,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"2f32d38b-9507-4c99-8619-193bc02fcad5\",\n      \"label\": \"label-4202\",\n      \"height\": 281,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"c8132a44-8aa0-4680-8c45-590958c11a00\",\n      \"label\": \"label-4203\",\n      \"height\": 289,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"f436e82c-b1a0-49ee-a270-15b1afc055e9\",\n      \"label\": \"label-4204\",\n      \"height\": 252,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"c88b4c6e-02ec-4c34-9aa5-ca63ea50453d\",\n      \"label\": \"label-4205\",\n      \"height\": 199,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"8c3915ec-ba49-4556-9288-1dcb6d821895\",\n      \"label\": \"label-4206\",\n      \"height\": 183,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"87de4ebd-174f-47c6-b49b-11f64dc3f839\",\n      \"label\": \"label-4207\",\n      \"height\": 126,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"ab27fa58-ba5e-4a46-b4be-5b183f0d4105\",\n      \"label\": \"label-4208\",\n      \"height\": 320,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"67e5aca5-84ba-4e39-8c9a-e527efb20a7a\",\n      \"label\": \"label-4209\",\n      \"height\": 152,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"104a4921-4116-49e8-9481-1cc24c8cbc8c\",\n      \"label\": \"label-4210\",\n      \"height\": 408,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"f8fa5092-c075-4cc1-9faf-f89d5245d8cd\",\n      \"label\": \"label-4211\",\n      \"height\": 483,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"3b846c24-ee3b-4955-9350-ef8a0522f1d5\",\n      \"label\": \"label-4212\",\n      \"height\": 320,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"232882cb-2865-4015-9804-f913bf1f5769\",\n      \"label\": \"label-4213\",\n      \"height\": 217,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"58738441-e66d-41e5-acc4-afc735dd471b\",\n      \"label\": \"label-4214\",\n      \"height\": 374,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"3da74d19-9ec3-4d80-b6b4-588158b1f77d\",\n      \"label\": \"label-4215\",\n      \"height\": 47,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"22aed194-9434-4d0a-99f6-593c11f2f390\",\n      \"label\": \"label-4216\",\n      \"height\": 52,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"b2a45d9c-24ac-4caa-b38d-8a06153a4bce\",\n      \"label\": \"label-4217\",\n      \"height\": 137,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"39c89a66-cb15-4a05-8d2f-b6f8d4239a40\",\n      \"label\": \"label-4218\",\n      \"height\": 328,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"663340f3-2118-4bc1-9912-719f4f90c088\",\n      \"label\": \"label-4219\",\n      \"height\": 177,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"6dadf757-fe30-42d6-b870-4e9235c60b61\",\n      \"label\": \"label-4220\",\n      \"height\": 449,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"94e68d9c-1108-4325-a8c1-e667448aa44d\",\n      \"label\": \"label-4221\",\n      \"height\": 106,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"dbbe3e22-6cab-44bf-b91a-a0c82a7c206b\",\n      \"label\": \"label-4222\",\n      \"height\": 48,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"e6c7048e-e428-40fa-a2a9-98050cc5eb34\",\n      \"label\": \"label-4223\",\n      \"height\": 384,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"6b64ba7a-a1a7-4460-a297-7e9f6506c69e\",\n      \"label\": \"label-4224\",\n      \"height\": 158,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"9edcac01-f2f0-46f0-8def-40c0e2e5763a\",\n      \"label\": \"label-4225\",\n      \"height\": 210,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"7de1cf23-8e80-4c91-8284-eb46b1d3f214\",\n      \"label\": \"label-4226\",\n      \"height\": 448,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"3985b063-a8a6-48dc-b27e-f829ebaf3cab\",\n      \"label\": \"label-4227\",\n      \"height\": 211,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"69131fc9-1a28-4283-864f-b59a5824396e\",\n      \"label\": \"label-4228\",\n      \"height\": 193,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"b0c8fbea-4956-4840-af3a-dcfa565dbbbc\",\n      \"label\": \"label-4229\",\n      \"height\": 514,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"ae9dcb93-88d1-45b2-bce0-a772d6850ec8\",\n      \"label\": \"label-4230\",\n      \"height\": 370,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"59945b64-0c98-45a4-85db-e6644799c8a7\",\n      \"label\": \"label-4231\",\n      \"height\": 409,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"6acacbd8-f68e-45b2-8d34-5b4c69ebb674\",\n      \"label\": \"label-4232\",\n      \"height\": 377,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"636abd43-3f9d-440e-b2e5-518d1fbb4da2\",\n      \"label\": \"label-4233\",\n      \"height\": 326,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"836092b1-0fef-4230-8cd4-ca8941d8355d\",\n      \"label\": \"label-4234\",\n      \"height\": 437,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"09f6dabc-011b-4412-88dd-0ce311bf1c67\",\n      \"label\": \"label-4235\",\n      \"height\": 478,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"ffa6b00b-d542-4071-9bd4-a8c00a386330\",\n      \"label\": \"label-4236\",\n      \"height\": 501,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"ac576fb0-689c-4c1f-823b-5fa624a3c4b0\",\n      \"label\": \"label-4237\",\n      \"height\": 365,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"2182d371-cb4e-4f55-bc0f-d2154fbbf8c1\",\n      \"label\": \"label-4238\",\n      \"height\": 377,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"54db165c-fefb-4df5-abd3-7b41408697a2\",\n      \"label\": \"label-4239\",\n      \"height\": 238,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"65959401-8c84-4a19-aa3e-9193e8afd5c4\",\n      \"label\": \"label-4240\",\n      \"height\": 330,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"4e2de701-dfab-457f-9509-9cd5bf42011d\",\n      \"label\": \"label-4241\",\n      \"height\": 213,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"2bcc1015-edba-40bc-9207-dcf64b646f68\",\n      \"label\": \"label-4242\",\n      \"height\": 117,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"cb1662ea-75d1-4709-88ae-2cebfe74aef4\",\n      \"label\": \"label-4243\",\n      \"height\": 521,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"f04488f9-fa92-45ec-bb94-fe51516e04dc\",\n      \"label\": \"label-4244\",\n      \"height\": 240,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"2e18b4e0-a9ac-4a40-add4-bc42c8d6b8c1\",\n      \"label\": \"label-4245\",\n      \"height\": 509,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"4fe8cf75-0f28-4343-9e2e-567984f02990\",\n      \"label\": \"label-4246\",\n      \"height\": 284,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"1526f3f4-eef8-42e5-ad77-7bd4ab7c673d\",\n      \"label\": \"label-4247\",\n      \"height\": 256,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"29a1b684-825d-4e37-a7de-4f1b85b9bb46\",\n      \"label\": \"label-4248\",\n      \"height\": 329,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"8097761a-ac6d-43de-b93b-6a973a6914f3\",\n      \"label\": \"label-4249\",\n      \"height\": 57,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"b89a0872-c72b-4984-b3e8-29a84d7747b5\",\n      \"label\": \"label-4250\",\n      \"height\": 455,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"112afbbc-3f3f-4407-a221-e28bb5ed4450\",\n      \"label\": \"label-4251\",\n      \"height\": 419,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"14a943ad-7e32-4136-b0c6-52f3d6041a72\",\n      \"label\": \"label-4252\",\n      \"height\": 398,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"0f85508a-a85a-44ca-b81f-2caf2e4c02f4\",\n      \"label\": \"label-4253\",\n      \"height\": 153,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"b82ca8fd-13c2-4fff-bd3c-ef0913353021\",\n      \"label\": \"label-4254\",\n      \"height\": 431,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"ceb8efb8-792e-4393-9cb4-27a1c2be3747\",\n      \"label\": \"label-4255\",\n      \"height\": 320,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"b84f7c1d-e174-4a34-b00e-a8254a51b825\",\n      \"label\": \"label-4256\",\n      \"height\": 419,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"bbca8def-ca9f-4893-b5af-ceac56b40360\",\n      \"label\": \"label-4257\",\n      \"height\": 320,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"37897232-2b65-4c9c-81f6-8a9bd0bf522b\",\n      \"label\": \"label-4258\",\n      \"height\": 37,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"45066eac-4a33-49fd-b097-bee074f23348\",\n      \"label\": \"label-4259\",\n      \"height\": 464,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"80652683-e5ee-4234-ac22-92d7fcc11b72\",\n      \"label\": \"label-4260\",\n      \"height\": 519,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"f2463a70-b9b0-4bce-9fee-b4eb617ea72d\",\n      \"label\": \"label-4261\",\n      \"height\": 508,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"01803452-a8c1-4cc4-acab-257f24de1672\",\n      \"label\": \"label-4262\",\n      \"height\": 301,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"a76eb2e5-f865-4c42-8972-7ca15db286b7\",\n      \"label\": \"label-4263\",\n      \"height\": 190,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"a4ea5b28-9de0-431a-8e89-25a5982a4ce2\",\n      \"label\": \"label-4264\",\n      \"height\": 370,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"b2ef0987-9ddd-4ae0-9447-68be2e6135b9\",\n      \"label\": \"label-4265\",\n      \"height\": 276,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"16a28621-ad21-48a9-ada3-97827d944974\",\n      \"label\": \"label-4266\",\n      \"height\": 420,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"e93a116a-9f2a-4b99-9f21-36d24ba72d43\",\n      \"label\": \"label-4267\",\n      \"height\": 478,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"27978ca3-064f-462a-a7b7-0aa6bb72f9ce\",\n      \"label\": \"label-4268\",\n      \"height\": 443,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"196553b1-c1f8-4861-bc6d-abe08d1b9088\",\n      \"label\": \"label-4269\",\n      \"height\": 135,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"e0ac35f4-ee89-417d-813e-e056a98effdd\",\n      \"label\": \"label-4270\",\n      \"height\": 148,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"e59752c6-17c9-4379-84f3-747719522703\",\n      \"label\": \"label-4271\",\n      \"height\": 88,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"3dc217b7-bbd0-4848-95b3-ce2b9741db85\",\n      \"label\": \"label-4272\",\n      \"height\": 273,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"ca5914ba-b969-4d21-b54d-db60db364ff3\",\n      \"label\": \"label-4273\",\n      \"height\": 131,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"9de468d6-4710-4ab6-b78a-7eea2bdac5a0\",\n      \"label\": \"label-4274\",\n      \"height\": 318,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"b546d558-08f5-46d5-8645-27ea55b41d2c\",\n      \"label\": \"label-4275\",\n      \"height\": 71,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"1387c902-7c6a-46f6-b754-36a1b6f8f96e\",\n      \"label\": \"label-4276\",\n      \"height\": 147,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"4b4b33c7-fa89-4df9-b237-27c259ab833a\",\n      \"label\": \"label-4277\",\n      \"height\": 114,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"c6c3e8fc-133e-41bd-a6ec-1bf6a80bff67\",\n      \"label\": \"label-4278\",\n      \"height\": 176,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"38d07165-06b0-490c-b848-58362103bbb3\",\n      \"label\": \"label-4279\",\n      \"height\": 43,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"e5024b85-28fd-4d52-90a1-ffef122682fb\",\n      \"label\": \"label-4280\",\n      \"height\": 503,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"01a5cf01-4276-44dc-9bca-a0637e63616d\",\n      \"label\": \"label-4281\",\n      \"height\": 528,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"65f35996-d750-4055-b827-aac52eca3aff\",\n      \"label\": \"label-4282\",\n      \"height\": 496,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"a13aa5b7-862f-4813-b429-72354ef4e135\",\n      \"label\": \"label-4283\",\n      \"height\": 102,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"2ab6f347-f4e4-40b5-87e3-61ad549d448b\",\n      \"label\": \"label-4284\",\n      \"height\": 273,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"1fb29bdb-64f1-4b27-8c9c-3df31b67a1a4\",\n      \"label\": \"label-4285\",\n      \"height\": 170,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"8130ece6-774b-4921-9737-740d897595b1\",\n      \"label\": \"label-4286\",\n      \"height\": 84,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"d5beb274-2033-4b3c-b2e7-85c8f42aeed3\",\n      \"label\": \"label-4287\",\n      \"height\": 98,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"a7684c52-661b-45f9-a06a-775d3444e0c3\",\n      \"label\": \"label-4288\",\n      \"height\": 362,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"ce8f618b-7d7f-4fd7-9eb5-ccffcdace4b8\",\n      \"label\": \"label-4289\",\n      \"height\": 179,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"b27b75bd-8c2e-4fff-a53f-8295e631c04a\",\n      \"label\": \"label-4290\",\n      \"height\": 510,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"12652eec-0fcb-4796-ab02-990164480e72\",\n      \"label\": \"label-4291\",\n      \"height\": 291,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"0489b362-cc28-4473-951f-b4faef0a5161\",\n      \"label\": \"label-4292\",\n      \"height\": 311,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"9b59f82e-25b8-4efd-b1dd-4ca8ce3fa69b\",\n      \"label\": \"label-4293\",\n      \"height\": 170,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"549a4ff1-45d4-47dc-b05e-cb337abac164\",\n      \"label\": \"label-4294\",\n      \"height\": 420,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"c4eaa9a1-a04b-4457-8a08-95ac7e6ff4f6\",\n      \"label\": \"label-4295\",\n      \"height\": 189,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"c0ab02f7-b0a4-4a5e-93c2-1641c864f568\",\n      \"label\": \"label-4296\",\n      \"height\": 130,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"f3a267b9-6f7a-4ee9-b4e6-ca1e8c23a52e\",\n      \"label\": \"label-4297\",\n      \"height\": 116,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"ce3a77bb-bb5a-4a79-918a-e251bfdb76bd\",\n      \"label\": \"label-4298\",\n      \"height\": 321,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"c54c705e-11c9-4901-a9d7-8561e8a926fa\",\n      \"label\": \"label-4299\",\n      \"height\": 274,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"04e8d48b-52bb-4427-8da6-592b208d573a\",\n      \"label\": \"label-4300\",\n      \"height\": 199,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"73715ab9-c733-4f2c-9edf-0e9aaad9f9a7\",\n      \"label\": \"label-4301\",\n      \"height\": 401,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"3cd361d0-e55b-42a7-8a7b-e5295cd1fc0b\",\n      \"label\": \"label-4302\",\n      \"height\": 361,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"0ebb8007-da2b-454e-ae9b-9fa241c63ce4\",\n      \"label\": \"label-4303\",\n      \"height\": 181,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"198f49a0-3f19-4ccc-88ab-3a937b6f5bc7\",\n      \"label\": \"label-4304\",\n      \"height\": 440,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"f1d24786-2a3b-4b7c-8c1a-4ce3718a753e\",\n      \"label\": \"label-4305\",\n      \"height\": 94,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"0e42b30e-5c3a-46ea-9370-6562e0c471cf\",\n      \"label\": \"label-4306\",\n      \"height\": 485,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"09c14053-3d8b-4ce9-8927-0992aac08922\",\n      \"label\": \"label-4307\",\n      \"height\": 250,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"8045682d-6a88-42b4-990c-fcfab90c5750\",\n      \"label\": \"label-4308\",\n      \"height\": 401,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"171e68e8-fdc0-4f7d-a47f-9467d0fd51bd\",\n      \"label\": \"label-4309\",\n      \"height\": 199,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"0400eb1f-5e9a-406e-b8ef-2be1cff32673\",\n      \"label\": \"label-4310\",\n      \"height\": 113,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"b40d8f8a-2e2e-4081-a835-e8beb3e83044\",\n      \"label\": \"label-4311\",\n      \"height\": 147,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"6b1f4e1d-ee05-4797-9d80-6a9e7003ea35\",\n      \"label\": \"label-4312\",\n      \"height\": 509,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"0ced9745-c3b8-4503-a2ad-a32b6b8f34e1\",\n      \"label\": \"label-4313\",\n      \"height\": 402,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"5747ba10-3d76-40ab-a1a2-35ae048491db\",\n      \"label\": \"label-4314\",\n      \"height\": 399,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"4963edfa-6233-4bec-b912-19d63f00d5f7\",\n      \"label\": \"label-4315\",\n      \"height\": 472,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"6c55feea-9148-43d7-8602-934b04528bc3\",\n      \"label\": \"label-4316\",\n      \"height\": 77,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"8ace4877-048c-42b6-a29a-d5b3971f7295\",\n      \"label\": \"label-4317\",\n      \"height\": 203,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"4e52c7d8-6f0a-4a9a-a4cf-e3eca3034aae\",\n      \"label\": \"label-4318\",\n      \"height\": 502,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"0c03851f-0f4e-464c-ac90-e48186832e31\",\n      \"label\": \"label-4319\",\n      \"height\": 129,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"458c222d-cbd1-4c3b-bb35-9f694753b71e\",\n      \"label\": \"label-4320\",\n      \"height\": 245,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"bb0346ea-4953-4eb4-ab78-3c3fe7e66095\",\n      \"label\": \"label-4321\",\n      \"height\": 383,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"e9d9b030-0ede-4394-8f9a-a29e7085935e\",\n      \"label\": \"label-4322\",\n      \"height\": 504,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"6f42fc5e-3df2-473d-9202-bbfb452b4d89\",\n      \"label\": \"label-4323\",\n      \"height\": 36,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"5672c57f-f6a7-4abe-9d34-655eb8748a5b\",\n      \"label\": \"label-4324\",\n      \"height\": 476,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"893b0df7-1fa1-4c85-baef-b8b2d43a10eb\",\n      \"label\": \"label-4325\",\n      \"height\": 34,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"102e2bb3-088a-4d24-aea8-acfc48185297\",\n      \"label\": \"label-4326\",\n      \"height\": 170,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"25d8c2c9-a52a-4904-9ef2-a138d26406cb\",\n      \"label\": \"label-4327\",\n      \"height\": 464,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"f275b6d1-6cfb-41c7-92e4-bf336d026add\",\n      \"label\": \"label-4328\",\n      \"height\": 98,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"9e215e43-6703-4906-b7d6-362f03a78d50\",\n      \"label\": \"label-4329\",\n      \"height\": 305,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"c74a221e-9754-449f-932b-ca40e2992b94\",\n      \"label\": \"label-4330\",\n      \"height\": 190,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"0dc1ccf4-78c8-48f5-a63c-d00cc2103c1d\",\n      \"label\": \"label-4331\",\n      \"height\": 368,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"dd72f7fb-e0c7-464f-b890-d1499d71d9fe\",\n      \"label\": \"label-4332\",\n      \"height\": 224,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"61f5123b-7650-436d-9111-65eaf1daff92\",\n      \"label\": \"label-4333\",\n      \"height\": 37,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"381cad7e-c498-4c27-99f0-2616714fb7cd\",\n      \"label\": \"label-4334\",\n      \"height\": 257,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"3c362a4d-3838-4887-b0a6-ecc2d9623cd7\",\n      \"label\": \"label-4335\",\n      \"height\": 294,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"6cf4b893-1efe-4800-a359-fca4de1ec35e\",\n      \"label\": \"label-4336\",\n      \"height\": 437,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"ef1fada8-b75e-4283-a0d2-1e679acc4f9f\",\n      \"label\": \"label-4337\",\n      \"height\": 504,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"4778efb6-9890-42c1-ac7c-79af4e375060\",\n      \"label\": \"label-4338\",\n      \"height\": 200,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"f4a75da0-a2f4-4cda-abdf-5ace0e48a2b3\",\n      \"label\": \"label-4339\",\n      \"height\": 381,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"d8c8767e-3b44-46bd-b41b-b383e2dfd3eb\",\n      \"label\": \"label-4340\",\n      \"height\": 338,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"9e458192-f356-418f-bea0-7ae99b8bf748\",\n      \"label\": \"label-4341\",\n      \"height\": 138,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"7279a8d0-5df1-4cec-b66a-15272f1ebb4d\",\n      \"label\": \"label-4342\",\n      \"height\": 373,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"32dc299c-6c11-4dfc-a457-fb2753879037\",\n      \"label\": \"label-4343\",\n      \"height\": 254,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"6c292f23-5139-4020-9a9f-0f48d3abba84\",\n      \"label\": \"label-4344\",\n      \"height\": 252,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"27311d50-bb3f-458a-a57d-78bfb7d5a63a\",\n      \"label\": \"label-4345\",\n      \"height\": 179,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"e34331f5-ae26-4113-af50-df702da61846\",\n      \"label\": \"label-4346\",\n      \"height\": 360,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"9526f0a2-280e-49a9-9ced-9d7d2b749205\",\n      \"label\": \"label-4347\",\n      \"height\": 381,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"4b638544-9682-4f0c-8e63-a46c610e81bb\",\n      \"label\": \"label-4348\",\n      \"height\": 375,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"ac79229c-9fe4-48cf-95d1-2af994f66115\",\n      \"label\": \"label-4349\",\n      \"height\": 203,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"4fb8e16c-d705-4d91-8b0b-f2a25f354890\",\n      \"label\": \"label-4350\",\n      \"height\": 268,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"fbc1b2c9-5e94-4afd-a8b6-79d08d270d2a\",\n      \"label\": \"label-4351\",\n      \"height\": 385,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"ff505bb6-a736-42b3-a147-0a3c379ea389\",\n      \"label\": \"label-4352\",\n      \"height\": 238,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"b0110eb2-fcbb-435c-843b-31f7fefa49ee\",\n      \"label\": \"label-4353\",\n      \"height\": 239,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"32625bb3-41a3-4ec3-9346-3f4ee7896379\",\n      \"label\": \"label-4354\",\n      \"height\": 342,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"628d124c-ea29-43e7-a60c-f964b4679df6\",\n      \"label\": \"label-4355\",\n      \"height\": 322,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"c04f1a07-6b39-4071-b149-de8b9a4e0426\",\n      \"label\": \"label-4356\",\n      \"height\": 210,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"f0d6bcce-3aaa-4792-af4e-2d5b6116e7e1\",\n      \"label\": \"label-4357\",\n      \"height\": 482,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"fc3370ff-7e1e-4c04-a5e2-3f08539d6d3f\",\n      \"label\": \"label-4358\",\n      \"height\": 73,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"6e9c3a23-922f-4747-924a-24422eab089f\",\n      \"label\": \"label-4359\",\n      \"height\": 374,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"1ab205f5-88f8-4bb2-ac26-645b46ef2ea5\",\n      \"label\": \"label-4360\",\n      \"height\": 342,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"5c381742-4041-4c33-8bb4-6f2e808e6cb8\",\n      \"label\": \"label-4361\",\n      \"height\": 181,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"da29a233-ba34-453e-8d01-9de4ca77a758\",\n      \"label\": \"label-4362\",\n      \"height\": 350,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"71db0517-c049-4d7a-9bca-215baeab4bc9\",\n      \"label\": \"label-4363\",\n      \"height\": 380,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"390ec818-87a6-45f3-9d3a-b8d9fbb0d3cf\",\n      \"label\": \"label-4364\",\n      \"height\": 346,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"02da07e1-bd03-4aa0-8e4b-a2d99922bf69\",\n      \"label\": \"label-4365\",\n      \"height\": 360,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"aef85d67-40d1-4c0a-8d3e-2224314945a2\",\n      \"label\": \"label-4366\",\n      \"height\": 360,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"3a4a240e-719f-470d-b945-ea4601c92300\",\n      \"label\": \"label-4367\",\n      \"height\": 348,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"1c7fcfac-b1de-4340-890c-249e0e95cd99\",\n      \"label\": \"label-4368\",\n      \"height\": 187,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"c9ddbb18-9174-4b70-87bb-f17160695c91\",\n      \"label\": \"label-4369\",\n      \"height\": 364,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"afb16f0d-eb29-4268-8cd6-6d73bca3fba3\",\n      \"label\": \"label-4370\",\n      \"height\": 446,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"a0bb37e0-9554-4328-bf9c-e31be050a464\",\n      \"label\": \"label-4371\",\n      \"height\": 353,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"9d791690-a362-4edc-a3e7-fbaeaad0df4d\",\n      \"label\": \"label-4372\",\n      \"height\": 229,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"bde930fd-ca23-4a68-9091-91cb017aee5a\",\n      \"label\": \"label-4373\",\n      \"height\": 345,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"e9bce460-a562-458f-b68c-6b5baa940b5d\",\n      \"label\": \"label-4374\",\n      \"height\": 291,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"37a02d37-9d95-4633-a6d8-8a0a3f6611ed\",\n      \"label\": \"label-4375\",\n      \"height\": 255,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"8f25f2aa-48af-4545-bae9-a27f1fdf49bf\",\n      \"label\": \"label-4376\",\n      \"height\": 320,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"bdfb73c9-52a8-4648-89ff-4f19748462c6\",\n      \"label\": \"label-4377\",\n      \"height\": 423,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"265db311-0e50-4ec3-b482-6d051269398d\",\n      \"label\": \"label-4378\",\n      \"height\": 227,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"9e1839e7-e46a-4f48-9af2-5af21ea82757\",\n      \"label\": \"label-4379\",\n      \"height\": 310,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"9ff09b5d-ed63-44dc-a5c7-0dab32e4a492\",\n      \"label\": \"label-4380\",\n      \"height\": 414,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"893d3cbe-83f1-45cb-af89-d52beac47554\",\n      \"label\": \"label-4381\",\n      \"height\": 194,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"506fea88-f6db-434f-90a7-70ba1f4db2cd\",\n      \"label\": \"label-4382\",\n      \"height\": 468,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"dd0d82bb-bef8-4c30-8423-80da60e9cb3a\",\n      \"label\": \"label-4383\",\n      \"height\": 429,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"fb04e394-d776-46be-9627-afafec45cc95\",\n      \"label\": \"label-4384\",\n      \"height\": 342,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"0800e075-8d0c-4365-b187-d8fed847f8b7\",\n      \"label\": \"label-4385\",\n      \"height\": 379,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"2bda2576-f94f-49d7-8e21-7434febfd94e\",\n      \"label\": \"label-4386\",\n      \"height\": 385,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"9a1111cd-b3a9-4984-b7c1-303c4dd78104\",\n      \"label\": \"label-4387\",\n      \"height\": 325,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"f6093926-e2cb-4962-b187-ffefefe8698b\",\n      \"label\": \"label-4388\",\n      \"height\": 352,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"ba4cdf9e-4110-4188-968d-876cc8dd0760\",\n      \"label\": \"label-4389\",\n      \"height\": 405,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"308e5f0d-ebc6-43c6-ac68-9c0980d8c4b3\",\n      \"label\": \"label-4390\",\n      \"height\": 143,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"722172bb-ef41-4314-a1e3-02533ba79594\",\n      \"label\": \"label-4391\",\n      \"height\": 189,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"e1101a8f-b88f-47b1-96e0-c7687677b486\",\n      \"label\": \"label-4392\",\n      \"height\": 168,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"866fd0e7-0e40-4f82-9087-7fcbfde67a8c\",\n      \"label\": \"label-4393\",\n      \"height\": 55,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"e584b3d7-8dc6-4f70-a979-64074be386ab\",\n      \"label\": \"label-4394\",\n      \"height\": 392,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"02c1e65b-a6ba-48ea-a7d9-8610e8cc0c7a\",\n      \"label\": \"label-4395\",\n      \"height\": 93,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"a2b695e1-0d6c-4bbe-9954-5fb320500e60\",\n      \"label\": \"label-4396\",\n      \"height\": 418,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"8847fa14-2152-42de-852f-82507ac0fff5\",\n      \"label\": \"label-4397\",\n      \"height\": 94,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"085e8eed-8e2f-408b-9619-e83056600844\",\n      \"label\": \"label-4398\",\n      \"height\": 491,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"4bdab24c-30e8-48df-8179-2356237b40a8\",\n      \"label\": \"label-4399\",\n      \"height\": 164,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"9170c2d3-3378-4bcd-a8e1-8ccff5f411df\",\n      \"label\": \"label-4400\",\n      \"height\": 185,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"d172f237-2f74-49ac-95fa-c5472e1e0d44\",\n      \"label\": \"label-4401\",\n      \"height\": 455,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"295aedaf-8a60-4ab1-bfeb-17620697d2e2\",\n      \"label\": \"label-4402\",\n      \"height\": 445,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"954b71a4-3079-4f69-b998-864ce71d4023\",\n      \"label\": \"label-4403\",\n      \"height\": 427,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"e866c281-28ec-49d9-86d0-0a8d02759126\",\n      \"label\": \"label-4404\",\n      \"height\": 397,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"c4f5d3db-1c99-4898-b7c7-71117f93d156\",\n      \"label\": \"label-4405\",\n      \"height\": 128,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"4a85e178-26a6-4b3b-b491-5b25f2846acf\",\n      \"label\": \"label-4406\",\n      \"height\": 426,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"81c4b58e-da2f-49fe-b95d-7dd7ea31ac3e\",\n      \"label\": \"label-4407\",\n      \"height\": 528,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"4098c0bf-bf4e-42da-9b31-55f651aa54e5\",\n      \"label\": \"label-4408\",\n      \"height\": 186,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"ccc2e6d7-6f70-4610-86ca-8f83353035fc\",\n      \"label\": \"label-4409\",\n      \"height\": 275,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"400c17ba-a708-49c9-b74d-d153fdc3fde8\",\n      \"label\": \"label-4410\",\n      \"height\": 499,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"b18d79bc-1054-476c-9797-9b5fc6eeafb2\",\n      \"label\": \"label-4411\",\n      \"height\": 250,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"b698b4de-0372-4ef4-9ac2-32a9944d3464\",\n      \"label\": \"label-4412\",\n      \"height\": 395,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"1e12d8c6-3dc5-4536-abdb-9929877ec884\",\n      \"label\": \"label-4413\",\n      \"height\": 148,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"2e6f15ad-e038-47ae-844b-c5acf8e50058\",\n      \"label\": \"label-4414\",\n      \"height\": 225,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"d42ffb17-0542-4d24-a2ef-d18b2b061689\",\n      \"label\": \"label-4415\",\n      \"height\": 510,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"aa9ea8fa-8917-4cb0-b00c-412384d2ca59\",\n      \"label\": \"label-4416\",\n      \"height\": 481,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"9f4c11da-3014-4549-a9a9-476c1e258744\",\n      \"label\": \"label-4417\",\n      \"height\": 104,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"c9e47c79-1c72-49bc-8970-18a772a0d2ce\",\n      \"label\": \"label-4418\",\n      \"height\": 34,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"139bf0b6-30bd-4909-9b68-beb42caeca8a\",\n      \"label\": \"label-4419\",\n      \"height\": 310,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"111b09c1-0d41-45e1-8b65-833ff517e100\",\n      \"label\": \"label-4420\",\n      \"height\": 434,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"e74c2408-dcfc-4246-93a6-59f9d96d6f17\",\n      \"label\": \"label-4421\",\n      \"height\": 285,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"c51c9e4e-2364-4d78-bc53-4fad92a33ab6\",\n      \"label\": \"label-4422\",\n      \"height\": 182,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"31952b23-fdad-4c81-afb0-a2c721d33369\",\n      \"label\": \"label-4423\",\n      \"height\": 522,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"34d84372-a508-405a-9264-ec73de6bca69\",\n      \"label\": \"label-4424\",\n      \"height\": 146,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"ddd84b26-694e-44f5-a162-b5d703698782\",\n      \"label\": \"label-4425\",\n      \"height\": 520,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"e7f1ce2c-d07d-4878-9089-80ba8f6159ba\",\n      \"label\": \"label-4426\",\n      \"height\": 200,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"28e7987e-3cd1-4c34-8147-6059c36da8cc\",\n      \"label\": \"label-4427\",\n      \"height\": 302,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"77d58cbe-126f-4650-bb61-9be834bb68a5\",\n      \"label\": \"label-4428\",\n      \"height\": 405,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"85a7c4d9-c966-435c-897f-73b234fa8865\",\n      \"label\": \"label-4429\",\n      \"height\": 403,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"0cca5005-91a2-43c6-b1fb-6c22658273fc\",\n      \"label\": \"label-4430\",\n      \"height\": 279,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"c160b258-ed3a-4fce-8a5f-d71aa3e2af06\",\n      \"label\": \"label-4431\",\n      \"height\": 430,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"d314613f-4c12-4720-af05-c9a472924417\",\n      \"label\": \"label-4432\",\n      \"height\": 195,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"e0fe8667-dd84-45bb-9ca0-8634199df179\",\n      \"label\": \"label-4433\",\n      \"height\": 259,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"31b8de9d-8512-4ca1-8182-116f966e67a6\",\n      \"label\": \"label-4434\",\n      \"height\": 48,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"997f22a1-7ca0-4d87-a3c6-4f9ccd3c2250\",\n      \"label\": \"label-4435\",\n      \"height\": 512,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"289ab29e-b690-4c6a-bb3e-e511ba49b5f2\",\n      \"label\": \"label-4436\",\n      \"height\": 399,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"31300b0b-3ef6-44ec-b57d-bd9164c1ad8e\",\n      \"label\": \"label-4437\",\n      \"height\": 229,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"e3c34322-2157-4e14-83df-9038e5308d65\",\n      \"label\": \"label-4438\",\n      \"height\": 305,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"4c77ff1b-48e9-43a5-a1df-536ed0b3113a\",\n      \"label\": \"label-4439\",\n      \"height\": 243,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"9e665199-f553-488e-8c28-478a501d9e21\",\n      \"label\": \"label-4440\",\n      \"height\": 60,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"7d5844b4-a48a-45ef-afd3-9929b90e4ad7\",\n      \"label\": \"label-4441\",\n      \"height\": 114,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"91037d1a-fae1-4021-a6ee-5df1a9814b2e\",\n      \"label\": \"label-4442\",\n      \"height\": 126,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"196214fc-747c-42bc-bd84-72d16cfbc1da\",\n      \"label\": \"label-4443\",\n      \"height\": 120,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"34c51292-1d35-43db-bf16-b8ece3ad78bf\",\n      \"label\": \"label-4444\",\n      \"height\": 280,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"690f5ed8-bf4c-4b98-af4c-2c26a7aa4b7b\",\n      \"label\": \"label-4445\",\n      \"height\": 445,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"207c0a33-db25-4865-862f-a0a563080ef0\",\n      \"label\": \"label-4446\",\n      \"height\": 89,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"6ec722cc-417c-47ef-ba8a-94bc65c1984d\",\n      \"label\": \"label-4447\",\n      \"height\": 357,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"68b340e5-0216-4a08-8c24-1d59c0bd76b8\",\n      \"label\": \"label-4448\",\n      \"height\": 246,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"f54d7449-cf44-4a17-ae3f-9feca77b6585\",\n      \"label\": \"label-4449\",\n      \"height\": 440,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"a32ba030-af0d-4eb6-aedf-e6e0ece75d75\",\n      \"label\": \"label-4450\",\n      \"height\": 74,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"bc5625f6-c59a-4944-b77a-a29b13dea48f\",\n      \"label\": \"label-4451\",\n      \"height\": 520,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"2ca61067-2ec8-4864-9e9b-a3e9c76f62d0\",\n      \"label\": \"label-4452\",\n      \"height\": 509,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"eb6c4660-cc12-4e92-9654-84e31752f166\",\n      \"label\": \"label-4453\",\n      \"height\": 209,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"bb22afbf-d405-48e7-9949-82a608e43c72\",\n      \"label\": \"label-4454\",\n      \"height\": 127,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"e2be9bb8-a619-4ca7-9ed0-2e04e4b6e00c\",\n      \"label\": \"label-4455\",\n      \"height\": 370,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"dcd14d92-9c92-4736-809e-75cab2a0ad34\",\n      \"label\": \"label-4456\",\n      \"height\": 40,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"dd072a4d-55bc-425b-949d-835ff7ce3cb0\",\n      \"label\": \"label-4457\",\n      \"height\": 509,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"6561207d-f5fb-4971-a5e2-b85182632d04\",\n      \"label\": \"label-4458\",\n      \"height\": 98,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"6b52fca7-aed3-4753-9d87-b62a97acce10\",\n      \"label\": \"label-4459\",\n      \"height\": 223,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"079aab17-2cc9-4bdb-a37e-d26db4dce06d\",\n      \"label\": \"label-4460\",\n      \"height\": 94,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"95b4a030-7f24-4922-a7de-3c4a39c545ac\",\n      \"label\": \"label-4461\",\n      \"height\": 526,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"acacaa9a-f42e-4417-8a65-2cf653733ac0\",\n      \"label\": \"label-4462\",\n      \"height\": 78,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"b110336b-962e-4ef9-8c7a-ab80344d87e6\",\n      \"label\": \"label-4463\",\n      \"height\": 84,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"19198240-3b93-46e0-8eb0-260e74ebda50\",\n      \"label\": \"label-4464\",\n      \"height\": 42,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"d901e79f-f299-4f23-9601-4f0f47a5e6f8\",\n      \"label\": \"label-4465\",\n      \"height\": 441,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"9bfadca6-78bd-43af-aa4c-801b284bde16\",\n      \"label\": \"label-4466\",\n      \"height\": 379,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"9d6ab94b-5c97-439f-91fd-748ff887ae5d\",\n      \"label\": \"label-4467\",\n      \"height\": 402,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"8248c26a-802f-4698-bdec-c3f96abb2f7f\",\n      \"label\": \"label-4468\",\n      \"height\": 39,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"795c6f49-e6f3-45ef-8e8e-21be354d5080\",\n      \"label\": \"label-4469\",\n      \"height\": 381,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"39b77f89-01f8-482a-83dd-fcb2ddf6454d\",\n      \"label\": \"label-4470\",\n      \"height\": 342,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"d42360c8-ebae-4745-9242-ec8c2dcc6907\",\n      \"label\": \"label-4471\",\n      \"height\": 441,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"223e3d0b-1d3e-452d-9d80-605514cb1696\",\n      \"label\": \"label-4472\",\n      \"height\": 506,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"4083d4c7-c292-4392-851d-dde3aacc472f\",\n      \"label\": \"label-4473\",\n      \"height\": 350,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"720e0d4f-630d-47ab-8619-0106277dd119\",\n      \"label\": \"label-4474\",\n      \"height\": 401,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"7796ed39-79f0-47b9-92aa-7fa9afbd2da7\",\n      \"label\": \"label-4475\",\n      \"height\": 129,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"1b3cedcd-ca7d-44c3-ab6a-6ead73c9d769\",\n      \"label\": \"label-4476\",\n      \"height\": 427,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"568fcd34-c4eb-4201-bd6e-ea8e92f2535d\",\n      \"label\": \"label-4477\",\n      \"height\": 184,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"a3bee121-6f7f-46b9-8336-0b8498c39c23\",\n      \"label\": \"label-4478\",\n      \"height\": 414,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"b609189b-8724-49a8-9e79-575972592a77\",\n      \"label\": \"label-4479\",\n      \"height\": 94,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"2132c1c7-9228-4f79-b212-eff5c2801dd7\",\n      \"label\": \"label-4480\",\n      \"height\": 253,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"c3f1608a-3bfa-4bbf-96f7-b12dadd213a9\",\n      \"label\": \"label-4481\",\n      \"height\": 218,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"2b6cc369-f9ff-49dc-ab19-2ad55acea603\",\n      \"label\": \"label-4482\",\n      \"height\": 404,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"6b4c6bb0-0a7d-423d-810e-bbe7b4310d04\",\n      \"label\": \"label-4483\",\n      \"height\": 137,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"7313466c-088d-40d1-aa80-912eb6015b34\",\n      \"label\": \"label-4484\",\n      \"height\": 72,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"ca411346-45be-453f-bbb2-949e6a079a56\",\n      \"label\": \"label-4485\",\n      \"height\": 212,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"6c3612de-e40a-49b8-aa41-4109741f2659\",\n      \"label\": \"label-4486\",\n      \"height\": 470,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"0d6ad3a2-0787-4e88-8106-96fc723f6b04\",\n      \"label\": \"label-4487\",\n      \"height\": 319,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"256a7961-53b4-4dd1-848e-eaf9916bd5c3\",\n      \"label\": \"label-4488\",\n      \"height\": 390,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"7c92cb3f-396d-4d30-bbd2-244481d42ab5\",\n      \"label\": \"label-4489\",\n      \"height\": 77,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"239fea54-cc65-4f99-8f12-ae871115bad2\",\n      \"label\": \"label-4490\",\n      \"height\": 327,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"d231f8fc-5af4-462c-b6bd-9a22c55d0a4d\",\n      \"label\": \"label-4491\",\n      \"height\": 408,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"b9e9f384-d6a7-428e-9b4a-7574642616cd\",\n      \"label\": \"label-4492\",\n      \"height\": 321,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"43bcfd28-53d0-40ff-b362-e6ab2fed7260\",\n      \"label\": \"label-4493\",\n      \"height\": 314,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"48d95922-17fc-4de9-bde0-2851c80a681b\",\n      \"label\": \"label-4494\",\n      \"height\": 383,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"eacc4bba-51d0-4173-a389-02f1debc59cc\",\n      \"label\": \"label-4495\",\n      \"height\": 519,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"b0fd15ad-cc33-4620-b4ae-285c3b3bf521\",\n      \"label\": \"label-4496\",\n      \"height\": 249,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"5bef5f24-7b39-45de-91ab-e526f77f1fbd\",\n      \"label\": \"label-4497\",\n      \"height\": 125,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"02538c23-2269-41a0-bad7-337c35580dc5\",\n      \"label\": \"label-4498\",\n      \"height\": 169,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"0da39c6a-d1df-44fc-abd8-88e1ef7553fa\",\n      \"label\": \"label-4499\",\n      \"height\": 391,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"aa4e5b39-bf0e-4427-8a9d-626198c45ca4\",\n      \"label\": \"label-4500\",\n      \"height\": 191,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"f44c1290-d31b-48b4-8da1-69d1b7be3d3f\",\n      \"label\": \"label-4501\",\n      \"height\": 419,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"943fb1dd-df8d-4d3c-aa6f-f1b89938845e\",\n      \"label\": \"label-4502\",\n      \"height\": 278,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"78734fb7-9777-4e5a-a820-c28ea1758ff4\",\n      \"label\": \"label-4503\",\n      \"height\": 357,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"c6e3853b-4026-449a-a3dd-57f0cbfb0eaf\",\n      \"label\": \"label-4504\",\n      \"height\": 83,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"ef564bde-ff45-472f-b280-ff6487e46ac5\",\n      \"label\": \"label-4505\",\n      \"height\": 225,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"e162d08d-cf05-45fa-8925-6b56950fc5d6\",\n      \"label\": \"label-4506\",\n      \"height\": 146,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"390d8b10-c8de-441c-afcc-4ddaef2b1a5f\",\n      \"label\": \"label-4507\",\n      \"height\": 90,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"e5d6781e-b6ba-4f54-b21a-ab9af9cd9a32\",\n      \"label\": \"label-4508\",\n      \"height\": 182,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"97cd8daa-6159-415b-9c14-abd5c789b4d1\",\n      \"label\": \"label-4509\",\n      \"height\": 251,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"63b0cef9-57d2-4ceb-869c-01d36e3b2cd9\",\n      \"label\": \"label-4510\",\n      \"height\": 39,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"525220a6-0330-4c23-b1e9-caf6a9a48c84\",\n      \"label\": \"label-4511\",\n      \"height\": 268,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"8a2eeabc-d6fd-4e9f-bd52-57ca45600264\",\n      \"label\": \"label-4512\",\n      \"height\": 84,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"49b6ca1c-a05f-44ac-a0e0-8d5d6307f390\",\n      \"label\": \"label-4513\",\n      \"height\": 402,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"1f6aec43-bb35-41c2-aa32-d6ce6033427b\",\n      \"label\": \"label-4514\",\n      \"height\": 119,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"16d822d6-965e-4c4a-9e53-15b8413b0228\",\n      \"label\": \"label-4515\",\n      \"height\": 351,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"d7eec8fe-197f-4ce5-a4bc-d8fd8a115566\",\n      \"label\": \"label-4516\",\n      \"height\": 520,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"6cc57f8c-a53e-4765-aa29-347c96c042f9\",\n      \"label\": \"label-4517\",\n      \"height\": 103,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"d161d156-d92c-47eb-87a1-69212b6acf5d\",\n      \"label\": \"label-4518\",\n      \"height\": 310,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"103cc59a-8012-4ed6-b71a-046e2909444f\",\n      \"label\": \"label-4519\",\n      \"height\": 222,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"a841ec2d-0485-416f-9d5e-2e695831199e\",\n      \"label\": \"label-4520\",\n      \"height\": 400,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"c4660e57-77b8-4512-93ab-53121a143dc1\",\n      \"label\": \"label-4521\",\n      \"height\": 236,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"30446eb3-fb3e-4fa3-9a39-a2249717d448\",\n      \"label\": \"label-4522\",\n      \"height\": 458,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"7f365a19-e4ea-4218-a242-23797ea00a12\",\n      \"label\": \"label-4523\",\n      \"height\": 308,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"6f8b1205-beb6-4d11-aaad-b0acf85183c6\",\n      \"label\": \"label-4524\",\n      \"height\": 529,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"6e9b7e12-b35f-43c4-ba8c-4d9aea66c0da\",\n      \"label\": \"label-4525\",\n      \"height\": 359,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"5e268cff-5000-48d2-b915-21097207193f\",\n      \"label\": \"label-4526\",\n      \"height\": 475,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"24bf4567-1275-4ef4-81c9-52f1f4ea314e\",\n      \"label\": \"label-4527\",\n      \"height\": 337,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"6b3087c6-bf1d-4918-a5bf-1b38782ca555\",\n      \"label\": \"label-4528\",\n      \"height\": 333,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"b2e66008-cd60-48b2-b1b3-9989c4be4758\",\n      \"label\": \"label-4529\",\n      \"height\": 115,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"317dbb1d-7851-420e-aa59-947302159b2e\",\n      \"label\": \"label-4530\",\n      \"height\": 498,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"9f3717b0-d7bb-476e-806e-2363823e553d\",\n      \"label\": \"label-4531\",\n      \"height\": 528,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"5c72581f-af1f-447d-82fa-6bfe23810324\",\n      \"label\": \"label-4532\",\n      \"height\": 104,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"61de3fb0-341a-4fc3-a5a7-ebde0628543d\",\n      \"label\": \"label-4533\",\n      \"height\": 272,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"17805760-e6c7-42b5-8c83-ba2f5f6e5af0\",\n      \"label\": \"label-4534\",\n      \"height\": 366,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"7f0b9712-c044-4779-ae43-cd2e65521ded\",\n      \"label\": \"label-4535\",\n      \"height\": 485,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"00606ad3-1d6d-4802-ae78-0147b033164e\",\n      \"label\": \"label-4536\",\n      \"height\": 347,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"edb11c83-2c73-4a98-8d18-8915d373762f\",\n      \"label\": \"label-4537\",\n      \"height\": 150,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"bfb41af0-6ac9-41ef-9c48-372749522beb\",\n      \"label\": \"label-4538\",\n      \"height\": 62,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"5679a1d0-70bb-4a41-981a-17023b53e505\",\n      \"label\": \"label-4539\",\n      \"height\": 414,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"c1400f28-5ce0-4a67-846f-26b29a6e4d7b\",\n      \"label\": \"label-4540\",\n      \"height\": 53,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"a7620cf0-72a2-4cb2-826b-1b8890c83fbf\",\n      \"label\": \"label-4541\",\n      \"height\": 170,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"79f4d1bf-eb5a-422a-99ae-8a8fef97bf1b\",\n      \"label\": \"label-4542\",\n      \"height\": 219,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"644fc0aa-9426-42e1-86be-5011d284bde7\",\n      \"label\": \"label-4543\",\n      \"height\": 352,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"370b8fe6-4448-43c3-b6c8-57b6b1304e1a\",\n      \"label\": \"label-4544\",\n      \"height\": 238,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"fde7a6cc-4210-4895-8ff0-b5301f62cb70\",\n      \"label\": \"label-4545\",\n      \"height\": 337,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"e63ed960-0ed6-4708-84ba-d286d7fd551c\",\n      \"label\": \"label-4546\",\n      \"height\": 220,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"94c16a30-395d-42f5-bb12-54e2870e7f65\",\n      \"label\": \"label-4547\",\n      \"height\": 489,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"02f43d38-b380-4afb-ad86-f7c9c186a66f\",\n      \"label\": \"label-4548\",\n      \"height\": 433,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"1add4787-e6be-4f3e-8b7a-56b46a8aac88\",\n      \"label\": \"label-4549\",\n      \"height\": 474,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"a593e157-224d-499b-b1e7-c315f0c7786f\",\n      \"label\": \"label-4550\",\n      \"height\": 221,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"cca1bca6-ab8a-47e5-b438-481abf7aa6a2\",\n      \"label\": \"label-4551\",\n      \"height\": 83,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"98931329-52a5-48ac-bbeb-325cc6b9d800\",\n      \"label\": \"label-4552\",\n      \"height\": 521,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"0703ec98-a6f6-4f23-b542-6323bc8f64a8\",\n      \"label\": \"label-4553\",\n      \"height\": 256,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"d31b837b-4493-46fb-9cfa-ac464efcebaf\",\n      \"label\": \"label-4554\",\n      \"height\": 202,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"7f40bbf9-56b0-493c-80ed-c0e9913e082f\",\n      \"label\": \"label-4555\",\n      \"height\": 382,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"d301449b-3c85-41d0-9b2b-47f379ef2e35\",\n      \"label\": \"label-4556\",\n      \"height\": 299,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"7691189b-4ec8-4f2b-852c-fa80087052de\",\n      \"label\": \"label-4557\",\n      \"height\": 460,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"c5636f3b-5f0d-441e-b113-3dde2f033530\",\n      \"label\": \"label-4558\",\n      \"height\": 468,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"9bf2cc1e-b79c-43df-a5cd-594fd7ae6737\",\n      \"label\": \"label-4559\",\n      \"height\": 289,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"512fb15c-d536-4130-bff8-dfd425f9ebe3\",\n      \"label\": \"label-4560\",\n      \"height\": 497,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"8bbe028b-8e53-4749-be68-0a5c303b6dfd\",\n      \"label\": \"label-4561\",\n      \"height\": 74,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"5f5a29f6-7cd5-4771-be58-d445f180673e\",\n      \"label\": \"label-4562\",\n      \"height\": 208,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"9df86681-e391-41d8-aa90-2748d64940d4\",\n      \"label\": \"label-4563\",\n      \"height\": 404,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"57e37367-a9b2-4aa1-9699-3f51a123c60c\",\n      \"label\": \"label-4564\",\n      \"height\": 191,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"86a2c14d-347a-40ba-8085-882a989e0f47\",\n      \"label\": \"label-4565\",\n      \"height\": 288,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"2638e5df-ea08-474c-8f38-c3eb64a7811a\",\n      \"label\": \"label-4566\",\n      \"height\": 440,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"e68805d4-1e3b-42b3-b9d5-23c05a40b426\",\n      \"label\": \"label-4567\",\n      \"height\": 40,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"1511700b-8f63-4987-8c7c-fdffea75a4c3\",\n      \"label\": \"label-4568\",\n      \"height\": 208,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"a264489a-2024-45b2-a2bc-b0abae749ebd\",\n      \"label\": \"label-4569\",\n      \"height\": 253,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"253d91f5-7e2c-40ae-9c27-d5ed51d13345\",\n      \"label\": \"label-4570\",\n      \"height\": 439,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"1a434c1c-f728-4de0-8b3f-caeee0b7b920\",\n      \"label\": \"label-4571\",\n      \"height\": 411,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"b2fb49d4-2215-498b-9b6c-f22e8b313e4d\",\n      \"label\": \"label-4572\",\n      \"height\": 426,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"c09f1bbd-d011-4a8b-a34c-51dabb200e28\",\n      \"label\": \"label-4573\",\n      \"height\": 108,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"74d6e71e-40b0-4891-9e1a-e7b30af0cb2f\",\n      \"label\": \"label-4574\",\n      \"height\": 216,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"87f7bb4f-dd1c-414d-849b-2f131c5e48bc\",\n      \"label\": \"label-4575\",\n      \"height\": 400,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"28ca5df7-2e5f-41c8-b764-c32327aed477\",\n      \"label\": \"label-4576\",\n      \"height\": 367,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"b02145f2-3d02-4eab-ac99-400703a70139\",\n      \"label\": \"label-4577\",\n      \"height\": 451,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"7eee5f80-8c90-4185-8c28-c5c47d787b9d\",\n      \"label\": \"label-4578\",\n      \"height\": 309,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"7c0d1528-9f76-43d7-bb4c-3c130ac36a60\",\n      \"label\": \"label-4579\",\n      \"height\": 89,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"957027ca-8ed3-4fe2-bf32-edd1b42b60f2\",\n      \"label\": \"label-4580\",\n      \"height\": 313,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"e3624ea5-a8e0-47f3-a323-379331a687ec\",\n      \"label\": \"label-4581\",\n      \"height\": 73,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"8fe5b85f-6dd9-48e8-8fc1-ca08714989e2\",\n      \"label\": \"label-4582\",\n      \"height\": 508,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"f3cb4a52-6c25-4b6b-812b-a7b4175f76c4\",\n      \"label\": \"label-4583\",\n      \"height\": 341,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"1313a41b-5e58-4957-99aa-c890e85bc3d1\",\n      \"label\": \"label-4584\",\n      \"height\": 147,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"3b9bec9b-a5e1-4a21-a39b-f90f0c84f1c1\",\n      \"label\": \"label-4585\",\n      \"height\": 284,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"6b7b2b90-0ba8-4621-b37a-58658f92702e\",\n      \"label\": \"label-4586\",\n      \"height\": 498,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"a6fa0e22-efb7-4817-b7cc-0d5671edf9ed\",\n      \"label\": \"label-4587\",\n      \"height\": 98,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"036f3bcf-cd17-4f00-92fc-32a26559fbdf\",\n      \"label\": \"label-4588\",\n      \"height\": 464,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"4cfcbc8f-5a3f-434c-b07a-ee67e7028070\",\n      \"label\": \"label-4589\",\n      \"height\": 322,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"333bbfce-6a7b-4bb2-92b9-57ee7b69e20d\",\n      \"label\": \"label-4590\",\n      \"height\": 483,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"652a1cd0-b385-4c3b-8a52-365ff2af597b\",\n      \"label\": \"label-4591\",\n      \"height\": 389,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"2c9474d8-9e84-4790-91e3-f993492d68e0\",\n      \"label\": \"label-4592\",\n      \"height\": 410,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"04f50eaf-9865-4803-85de-9bb83ce64b86\",\n      \"label\": \"label-4593\",\n      \"height\": 425,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"79387146-935b-4b2c-8d03-b60843c8b1bc\",\n      \"label\": \"label-4594\",\n      \"height\": 157,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"6fd87f3a-02f1-460a-aa05-cff8ef21ef95\",\n      \"label\": \"label-4595\",\n      \"height\": 253,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"b4ede8bf-9b75-4361-bead-ee45da553576\",\n      \"label\": \"label-4596\",\n      \"height\": 234,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"73c65a85-cb3a-45b8-8d11-f679ac92d138\",\n      \"label\": \"label-4597\",\n      \"height\": 428,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"d94b696c-5aa9-477e-9e14-1d299711195f\",\n      \"label\": \"label-4598\",\n      \"height\": 152,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"f26cf68e-a0bf-49e1-a0e6-bcce5da6cc84\",\n      \"label\": \"label-4599\",\n      \"height\": 236,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"ddcfc574-2ec9-439e-b0c4-52fe3d173d24\",\n      \"label\": \"label-4600\",\n      \"height\": 372,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"0d32f5f6-8801-4664-92c1-cb0981308edc\",\n      \"label\": \"label-4601\",\n      \"height\": 177,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"85e1f0ef-1074-4a28-a1d5-eef2704bb889\",\n      \"label\": \"label-4602\",\n      \"height\": 169,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"76fc1d6a-26f8-4401-b40b-e0ef8169de2a\",\n      \"label\": \"label-4603\",\n      \"height\": 162,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"fe31cd7d-4d99-4008-9a49-1d0e31c1f4f1\",\n      \"label\": \"label-4604\",\n      \"height\": 37,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"b10a28f9-40f1-4e5a-a326-9225c09e9b7d\",\n      \"label\": \"label-4605\",\n      \"height\": 48,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"42429383-af18-417e-891c-fc906405e729\",\n      \"label\": \"label-4606\",\n      \"height\": 117,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"b455ffd0-aa1a-4043-8cad-035a06ed69d4\",\n      \"label\": \"label-4607\",\n      \"height\": 311,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"4e80abb9-9af2-4a08-ae7c-004ac2c0e07f\",\n      \"label\": \"label-4608\",\n      \"height\": 121,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"202c6e38-815a-4802-b5dd-52466cfeb3c9\",\n      \"label\": \"label-4609\",\n      \"height\": 92,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"90a32f58-8055-46b8-a799-93a1ac92901c\",\n      \"label\": \"label-4610\",\n      \"height\": 367,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"0d1d389f-7ab2-4051-97a7-2629faf15fce\",\n      \"label\": \"label-4611\",\n      \"height\": 363,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"1b654ccb-6582-4d54-a1bc-0a7d9bd255ca\",\n      \"label\": \"label-4612\",\n      \"height\": 90,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"7c3bb67d-c2bb-4877-99a1-47ebbf0fe8e8\",\n      \"label\": \"label-4613\",\n      \"height\": 423,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"e145e7a6-58bb-4975-af56-5839c112e0df\",\n      \"label\": \"label-4614\",\n      \"height\": 397,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"a7701e7d-9553-4cfd-812b-718aecb1e5ec\",\n      \"label\": \"label-4615\",\n      \"height\": 164,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"b8bc8deb-f6a6-4f6f-b392-a1385bff3e38\",\n      \"label\": \"label-4616\",\n      \"height\": 451,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"bac23507-ffca-4749-8b3b-6a594591c781\",\n      \"label\": \"label-4617\",\n      \"height\": 49,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"279e4f85-0632-4263-8935-c144c699fc9b\",\n      \"label\": \"label-4618\",\n      \"height\": 180,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"8d6f3c88-da0b-45e7-9296-00f9c25343ef\",\n      \"label\": \"label-4619\",\n      \"height\": 115,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"19735ebd-a5fe-401e-8b0e-9749347c0e51\",\n      \"label\": \"label-4620\",\n      \"height\": 203,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"3975f81a-c44c-48db-aab7-3ebd21f186c2\",\n      \"label\": \"label-4621\",\n      \"height\": 108,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"83377f2c-3593-44aa-b48c-13a2b03bb907\",\n      \"label\": \"label-4622\",\n      \"height\": 439,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"15ac2c64-5769-4859-892f-3e3761aefaf9\",\n      \"label\": \"label-4623\",\n      \"height\": 496,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"73032bf3-f635-45b8-8534-2dcbe7d6ef07\",\n      \"label\": \"label-4624\",\n      \"height\": 397,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"7bc28b3e-e3ba-4526-b5b6-43af646e366d\",\n      \"label\": \"label-4625\",\n      \"height\": 85,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"d6406e67-9b4c-43af-8a7b-c37f26d49436\",\n      \"label\": \"label-4626\",\n      \"height\": 429,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"f93fd035-769b-4d5f-8e52-945ae63767d5\",\n      \"label\": \"label-4627\",\n      \"height\": 180,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"e624d0e5-0722-4fff-a5cb-d3efe0d65684\",\n      \"label\": \"label-4628\",\n      \"height\": 339,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"e38049cd-3f8c-449a-8bc3-137ab49268e7\",\n      \"label\": \"label-4629\",\n      \"height\": 277,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"2e2ca378-2517-4b29-b38b-00683d2dce38\",\n      \"label\": \"label-4630\",\n      \"height\": 294,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"4f49514b-91b4-41e2-9b92-b3190efe04f1\",\n      \"label\": \"label-4631\",\n      \"height\": 413,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"81b45da5-3233-4bde-bdb1-2ab6696961e6\",\n      \"label\": \"label-4632\",\n      \"height\": 528,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"5532cd39-2a31-4ed6-ade0-17e8e8bbea96\",\n      \"label\": \"label-4633\",\n      \"height\": 59,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"0b3797bb-e13c-4d2b-99eb-84d5fcdd1d60\",\n      \"label\": \"label-4634\",\n      \"height\": 388,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"5e9505a9-2524-4e08-b6e6-6b033964afb0\",\n      \"label\": \"label-4635\",\n      \"height\": 401,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"ee7d6434-4c3c-4201-9b90-eb5e0595153f\",\n      \"label\": \"label-4636\",\n      \"height\": 399,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"47148de4-a899-4517-8a45-b02089596298\",\n      \"label\": \"label-4637\",\n      \"height\": 395,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"ab9cddd7-937c-4b91-8c34-10bb013123ba\",\n      \"label\": \"label-4638\",\n      \"height\": 339,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"77a3dc6e-8545-49fd-9694-c90204ac3bb2\",\n      \"label\": \"label-4639\",\n      \"height\": 513,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"cbef50b8-f213-4360-90e1-8cfcd44bf26b\",\n      \"label\": \"label-4640\",\n      \"height\": 301,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"cf4dd15b-7ce5-4e6a-b4eb-dd5e7a009ff5\",\n      \"label\": \"label-4641\",\n      \"height\": 330,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"7b48ea09-bea8-4e71-8ca2-b4158f1bcfd7\",\n      \"label\": \"label-4642\",\n      \"height\": 399,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"09a943f9-90c0-4f3b-b15a-042ade743f5f\",\n      \"label\": \"label-4643\",\n      \"height\": 343,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"f2b7951f-fc30-45a7-b402-842b9f7a4fe7\",\n      \"label\": \"label-4644\",\n      \"height\": 416,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"5d6f5a46-f21c-4d97-8a4b-dec075c31a32\",\n      \"label\": \"label-4645\",\n      \"height\": 292,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"151052aa-ca3a-4bf0-875c-6566376b4a1b\",\n      \"label\": \"label-4646\",\n      \"height\": 448,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"5e3ed430-9088-426d-a74e-f57be5f1891f\",\n      \"label\": \"label-4647\",\n      \"height\": 59,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"1bd12050-0ec3-4f5c-bbdc-4062582e448a\",\n      \"label\": \"label-4648\",\n      \"height\": 107,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"0c4308c3-e4de-4df1-b2f5-4edac4cb390a\",\n      \"label\": \"label-4649\",\n      \"height\": 134,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"08443177-8228-442e-8fcf-f1324c95b520\",\n      \"label\": \"label-4650\",\n      \"height\": 68,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"3cd0fb7c-6220-44d4-b17f-d41068c15eb7\",\n      \"label\": \"label-4651\",\n      \"height\": 418,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"c552dc40-11aa-486f-820d-2768fb51c947\",\n      \"label\": \"label-4652\",\n      \"height\": 138,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"664c4df1-7a09-40ec-aaac-b483b184c8bf\",\n      \"label\": \"label-4653\",\n      \"height\": 302,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"320547b2-f085-45cf-a241-6de9eea7a9e3\",\n      \"label\": \"label-4654\",\n      \"height\": 391,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"14f46bb3-40d3-4f7a-a95a-dca89c452084\",\n      \"label\": \"label-4655\",\n      \"height\": 274,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"21787c8b-abc0-4dd9-99ea-a507e2ecbdcc\",\n      \"label\": \"label-4656\",\n      \"height\": 64,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"b670f7f1-e60f-4f3c-ba8e-270c391c9978\",\n      \"label\": \"label-4657\",\n      \"height\": 104,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"0fbee955-425c-4e5c-9cc4-f0b1a516e9e1\",\n      \"label\": \"label-4658\",\n      \"height\": 92,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"8b939818-8100-4cab-8d2b-322649a8be18\",\n      \"label\": \"label-4659\",\n      \"height\": 330,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"9adcdc8b-8c32-4397-958e-cb61cbd6eaae\",\n      \"label\": \"label-4660\",\n      \"height\": 147,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"ed8f3922-69d3-4c41-bd4e-83c502cd750b\",\n      \"label\": \"label-4661\",\n      \"height\": 53,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"0de4b78e-d17d-4261-864d-261a510a15b5\",\n      \"label\": \"label-4662\",\n      \"height\": 362,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"349a0c3c-0b81-4588-882e-7aa89227eebc\",\n      \"label\": \"label-4663\",\n      \"height\": 280,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"67972e0f-27d7-41f9-962e-77d888fbfa47\",\n      \"label\": \"label-4664\",\n      \"height\": 115,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"76bdd96e-0cda-48ee-978c-553f53c36a13\",\n      \"label\": \"label-4665\",\n      \"height\": 321,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"ac4e5faa-de1b-44d1-85f4-07c7ec370d51\",\n      \"label\": \"label-4666\",\n      \"height\": 88,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"4dca9942-d408-4354-ab9d-63ba129b6f23\",\n      \"label\": \"label-4667\",\n      \"height\": 157,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"c684817d-ac5c-4b86-a147-b43d2ecd462e\",\n      \"label\": \"label-4668\",\n      \"height\": 47,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"69448b53-e46b-416d-baac-f7e53d92de24\",\n      \"label\": \"label-4669\",\n      \"height\": 530,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"34b17c8a-eb64-4cb1-96d9-c4048a1c57d4\",\n      \"label\": \"label-4670\",\n      \"height\": 343,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"3f34810c-3fc9-466b-b56b-a65040401a0e\",\n      \"label\": \"label-4671\",\n      \"height\": 100,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"b73d08cc-0224-473e-9ab6-30edb7cb92b8\",\n      \"label\": \"label-4672\",\n      \"height\": 173,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"3fdf8de6-364c-46d1-93b8-4ac4bb75bef5\",\n      \"label\": \"label-4673\",\n      \"height\": 297,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"70c8fc0a-ca6b-4a8e-a0ce-524120e5de12\",\n      \"label\": \"label-4674\",\n      \"height\": 358,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"1dff6336-725e-4934-9a54-5a6fd3324684\",\n      \"label\": \"label-4675\",\n      \"height\": 467,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"665a609f-10ab-4ce0-bf79-55658fcea86a\",\n      \"label\": \"label-4676\",\n      \"height\": 245,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"b824436e-27be-4613-8bb6-d4a3172e4c92\",\n      \"label\": \"label-4677\",\n      \"height\": 462,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"b1c38b6c-4009-4298-b285-989a474ec48d\",\n      \"label\": \"label-4678\",\n      \"height\": 443,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"23c594e1-1017-4347-8892-2dfe1d11ad50\",\n      \"label\": \"label-4679\",\n      \"height\": 369,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"8681a1b5-6965-4565-ba09-68770711bfd3\",\n      \"label\": \"label-4680\",\n      \"height\": 260,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"2af42072-4eb8-48c7-a71a-b039d3ddc6fb\",\n      \"label\": \"label-4681\",\n      \"height\": 102,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"8569a89d-e890-4228-855e-8cbc31c61bee\",\n      \"label\": \"label-4682\",\n      \"height\": 334,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"6c4f0781-4188-4587-9b88-a772d06045f3\",\n      \"label\": \"label-4683\",\n      \"height\": 411,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"930f0551-08d1-4162-8aed-5a0d60ab04b6\",\n      \"label\": \"label-4684\",\n      \"height\": 317,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"e6c9fd05-eefd-4ca4-bc5c-49f92b374fc8\",\n      \"label\": \"label-4685\",\n      \"height\": 415,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"1e2f91ae-66ef-45f9-a7a5-eb9dcacc8857\",\n      \"label\": \"label-4686\",\n      \"height\": 196,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"e7168604-b30d-4616-99c5-5cfb242d2cfb\",\n      \"label\": \"label-4687\",\n      \"height\": 65,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"a10aa5d4-aee4-4f07-9f96-39f7335dd56f\",\n      \"label\": \"label-4688\",\n      \"height\": 196,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"20dd9352-de64-49cd-802f-1a88841b1bcb\",\n      \"label\": \"label-4689\",\n      \"height\": 467,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"ad6794c6-d20f-46df-8540-0efcc625d4b6\",\n      \"label\": \"label-4690\",\n      \"height\": 501,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"2a50e048-4275-48e8-aa6d-6c5c194d3213\",\n      \"label\": \"label-4691\",\n      \"height\": 237,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"ec9f3852-d7d7-4941-b250-e7f02508ba43\",\n      \"label\": \"label-4692\",\n      \"height\": 320,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"d6392648-b48d-4d52-8135-2f4d85b7ea30\",\n      \"label\": \"label-4693\",\n      \"height\": 140,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"e47f92a7-c0ba-483d-9f24-fb618cfc0952\",\n      \"label\": \"label-4694\",\n      \"height\": 222,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"9232ae4a-05e5-47d4-b177-76c582dd6951\",\n      \"label\": \"label-4695\",\n      \"height\": 509,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"ac63b5ed-55b6-4d2a-80f9-765c23885ef6\",\n      \"label\": \"label-4696\",\n      \"height\": 501,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"2deb433a-0f8d-42a5-a042-e81e18175a01\",\n      \"label\": \"label-4697\",\n      \"height\": 148,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"bf2c575e-ea8b-4ea7-9a58-e82dbcb66168\",\n      \"label\": \"label-4698\",\n      \"height\": 148,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"717d8ce8-7600-47f2-8b35-65622eb976a4\",\n      \"label\": \"label-4699\",\n      \"height\": 247,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"e9a77874-0a0f-4781-a175-11f0fe16a0a4\",\n      \"label\": \"label-4700\",\n      \"height\": 146,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"e98226b2-af22-45f4-8d1f-0313af374d15\",\n      \"label\": \"label-4701\",\n      \"height\": 205,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"20cfa6bf-6c5a-4ac1-ae46-572035ea82da\",\n      \"label\": \"label-4702\",\n      \"height\": 349,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"5ad44353-be99-4511-bdaf-39c776ba8124\",\n      \"label\": \"label-4703\",\n      \"height\": 428,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"e797e953-a7b5-4115-ac0a-2db156c23132\",\n      \"label\": \"label-4704\",\n      \"height\": 421,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"7a1fd42d-38df-4256-8fb8-d73a1619f6bc\",\n      \"label\": \"label-4705\",\n      \"height\": 235,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"a9c87b5b-1f03-4759-987a-a8bed134e7a2\",\n      \"label\": \"label-4706\",\n      \"height\": 199,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"4f6351cc-bf9b-4f20-a657-715bac85e3d9\",\n      \"label\": \"label-4707\",\n      \"height\": 459,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"365dedea-14f7-4912-bc38-6586df60248b\",\n      \"label\": \"label-4708\",\n      \"height\": 185,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"ba283e89-458b-45e2-9cdd-022fff672ae5\",\n      \"label\": \"label-4709\",\n      \"height\": 455,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"3f6d8945-a02f-4aa5-b971-142423a91a21\",\n      \"label\": \"label-4710\",\n      \"height\": 162,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"22be491a-326e-4f27-a185-b2ec91cf03f6\",\n      \"label\": \"label-4711\",\n      \"height\": 88,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"c83bfc76-24da-4540-ba9e-4e6387b9d582\",\n      \"label\": \"label-4712\",\n      \"height\": 373,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"e7fb14e1-9f34-4605-9541-42ac454d0743\",\n      \"label\": \"label-4713\",\n      \"height\": 484,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"5ad1b495-1172-4e4e-a254-e6fa7888b344\",\n      \"label\": \"label-4714\",\n      \"height\": 440,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"1b722cb9-2d3c-4378-87b8-c4e047ab9ac9\",\n      \"label\": \"label-4715\",\n      \"height\": 108,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"26b5386e-b380-428a-97ad-871d9c2fd963\",\n      \"label\": \"label-4716\",\n      \"height\": 279,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"5120a501-5a21-4d07-bdcb-4be47d7b9a5c\",\n      \"label\": \"label-4717\",\n      \"height\": 529,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"f3d107ca-a07c-45b6-b10a-6d23562278c8\",\n      \"label\": \"label-4718\",\n      \"height\": 142,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"4144944f-1fc7-413a-9d55-91b05c7103d7\",\n      \"label\": \"label-4719\",\n      \"height\": 351,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"d64267d6-ff72-40aa-987e-16eafdb8e077\",\n      \"label\": \"label-4720\",\n      \"height\": 49,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"67c77e6f-928a-4f65-ac4a-8c0efbec295b\",\n      \"label\": \"label-4721\",\n      \"height\": 166,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"163d2ecf-9df3-45d1-b7c0-c76d72a1a4d7\",\n      \"label\": \"label-4722\",\n      \"height\": 509,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"7fd30f7f-4435-4266-b7e0-928703ba7ae0\",\n      \"label\": \"label-4723\",\n      \"height\": 237,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"377eeee5-4c0f-4abc-94ad-7158bffce838\",\n      \"label\": \"label-4724\",\n      \"height\": 401,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"0f5ef2cf-97ef-446f-9ddc-cec83a7bfee2\",\n      \"label\": \"label-4725\",\n      \"height\": 285,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"8c5a261d-d993-4c81-b8a8-80237ff7b20e\",\n      \"label\": \"label-4726\",\n      \"height\": 275,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"33f93a2e-aef8-40af-ae9f-905600233b19\",\n      \"label\": \"label-4727\",\n      \"height\": 281,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"651ed81e-24c6-4a34-87bf-818cd56d17f7\",\n      \"label\": \"label-4728\",\n      \"height\": 453,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"f6dc730d-f1f3-4f51-9ee2-b09aada03e51\",\n      \"label\": \"label-4729\",\n      \"height\": 119,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"40e24d74-8d3c-4456-ae50-406cdbd173a4\",\n      \"label\": \"label-4730\",\n      \"height\": 351,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"38ef16f1-4f84-4c21-9907-ec6b099a59eb\",\n      \"label\": \"label-4731\",\n      \"height\": 115,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"24a3c516-863c-4daf-a25e-a5b1181ef80a\",\n      \"label\": \"label-4732\",\n      \"height\": 522,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"ffe49092-4677-4cb1-af54-5c4fd2370967\",\n      \"label\": \"label-4733\",\n      \"height\": 388,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"67bc63c7-d9c8-48f2-9a6c-c3bc2b725120\",\n      \"label\": \"label-4734\",\n      \"height\": 382,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"75d0e849-260e-4099-9020-425829e80001\",\n      \"label\": \"label-4735\",\n      \"height\": 33,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"394ff149-b2c2-408e-ba61-509d190af755\",\n      \"label\": \"label-4736\",\n      \"height\": 356,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"d4096ad8-5bb3-404c-9f45-b37b9503eb72\",\n      \"label\": \"label-4737\",\n      \"height\": 84,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"cda08779-164e-42f4-b5e8-9c8cc4270237\",\n      \"label\": \"label-4738\",\n      \"height\": 358,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"991b8e9f-fd03-4af3-9362-0312d212faf4\",\n      \"label\": \"label-4739\",\n      \"height\": 417,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"e7657fd2-f71b-4440-81e6-dad5464b4e26\",\n      \"label\": \"label-4740\",\n      \"height\": 74,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"a263b4d9-8e65-4007-80ab-ee5fab3fc003\",\n      \"label\": \"label-4741\",\n      \"height\": 452,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"2459c802-3aed-466b-ba84-b3c4a1e9656f\",\n      \"label\": \"label-4742\",\n      \"height\": 521,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"ef7bcfcd-7720-4878-98a6-83b0e456c000\",\n      \"label\": \"label-4743\",\n      \"height\": 113,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"706a96b8-95f1-4bc8-ac87-c3bb68d9dfe7\",\n      \"label\": \"label-4744\",\n      \"height\": 93,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"855a4634-fc8f-48e3-95e9-5854322ae50c\",\n      \"label\": \"label-4745\",\n      \"height\": 530,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"da803ace-fbb0-4e8e-81ac-a962d54cf55f\",\n      \"label\": \"label-4746\",\n      \"height\": 420,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"ded4a905-77ae-490e-aaeb-aa6f2daeb7d5\",\n      \"label\": \"label-4747\",\n      \"height\": 139,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"37452334-aa5a-4c06-9cf7-5f113e708e1e\",\n      \"label\": \"label-4748\",\n      \"height\": 449,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"228b96cb-a287-40c7-9d07-96f96493bf87\",\n      \"label\": \"label-4749\",\n      \"height\": 151,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"90b156b2-9af3-4e82-9cf4-ddfa9e0fd484\",\n      \"label\": \"label-4750\",\n      \"height\": 188,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"1c452f04-e77e-4d0d-b82a-4ad09c2423a1\",\n      \"label\": \"label-4751\",\n      \"height\": 379,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"8ab53346-cfbd-42e6-9d61-2bd1649600de\",\n      \"label\": \"label-4752\",\n      \"height\": 266,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"00a2d71e-df98-4e32-85ef-c1f7ec7283d6\",\n      \"label\": \"label-4753\",\n      \"height\": 240,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"31b650bd-2cb5-4d9c-b0c4-e7513ef46b78\",\n      \"label\": \"label-4754\",\n      \"height\": 267,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"cb02e318-6a38-45ea-b524-c575f2294eca\",\n      \"label\": \"label-4755\",\n      \"height\": 206,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"e512ee0c-859d-4cab-a209-1923ac7ee16c\",\n      \"label\": \"label-4756\",\n      \"height\": 488,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"8d48013c-66f4-4541-8b3d-28ff09a8f12e\",\n      \"label\": \"label-4757\",\n      \"height\": 329,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"70693aa6-2d94-4a59-b304-bef025903e17\",\n      \"label\": \"label-4758\",\n      \"height\": 451,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"74ff3896-0dbc-4af5-a7ba-98d90a9e7edb\",\n      \"label\": \"label-4759\",\n      \"height\": 191,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"1259a3a8-7ae3-4d53-9dd7-a05082f6acec\",\n      \"label\": \"label-4760\",\n      \"height\": 372,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"66c1eefc-ee04-4a76-b267-bd27a551257b\",\n      \"label\": \"label-4761\",\n      \"height\": 317,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"49b808be-951b-43fe-b638-4ca0e2ae1412\",\n      \"label\": \"label-4762\",\n      \"height\": 427,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"ef98d30e-97ef-4d30-bee2-e80dc296fae9\",\n      \"label\": \"label-4763\",\n      \"height\": 512,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"de84dc26-8149-4b6f-8990-cb36ce6de55c\",\n      \"label\": \"label-4764\",\n      \"height\": 66,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"58b3edb3-e708-48da-b91b-b75aff65fe3f\",\n      \"label\": \"label-4765\",\n      \"height\": 341,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"814a44ea-a348-48fb-9632-5da44db2e9c0\",\n      \"label\": \"label-4766\",\n      \"height\": 348,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"a82053c1-d94f-41d5-9f11-d33309398935\",\n      \"label\": \"label-4767\",\n      \"height\": 60,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"b8561290-a390-4570-bc4c-759289e950b0\",\n      \"label\": \"label-4768\",\n      \"height\": 74,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"55950f9f-ae9e-40b3-a1ec-b0dd98d17696\",\n      \"label\": \"label-4769\",\n      \"height\": 415,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"edc29f17-9c30-41ab-bde9-25c142a6100a\",\n      \"label\": \"label-4770\",\n      \"height\": 514,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"8ce4ec51-d5ba-404d-bf7e-82ae0b028074\",\n      \"label\": \"label-4771\",\n      \"height\": 432,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"1fbe7207-be7d-4830-8f66-ce0e9e9b089a\",\n      \"label\": \"label-4772\",\n      \"height\": 230,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"3bad0c48-ed4c-4753-b85f-4155b82915d6\",\n      \"label\": \"label-4773\",\n      \"height\": 172,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"9cca3c52-c7a5-4c93-b3f3-55eef1eeb7e1\",\n      \"label\": \"label-4774\",\n      \"height\": 437,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"8617a6cc-40aa-48d3-b6a6-1cf05b1dab2a\",\n      \"label\": \"label-4775\",\n      \"height\": 387,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"eda5b678-665d-4221-bc56-e0d3faf51d1e\",\n      \"label\": \"label-4776\",\n      \"height\": 153,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"c03fe78a-ec13-416b-ab58-eead9a93a00f\",\n      \"label\": \"label-4777\",\n      \"height\": 46,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"bccc18c7-b780-4321-9316-af0e1cc7504e\",\n      \"label\": \"label-4778\",\n      \"height\": 304,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"8a0915e7-ad29-418c-bd7a-90183dcdbfdf\",\n      \"label\": \"label-4779\",\n      \"height\": 390,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"44e29983-4564-4188-ab7a-5ce6c20a3d8b\",\n      \"label\": \"label-4780\",\n      \"height\": 233,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"eb172e77-e131-47d3-a7ab-90d09949861c\",\n      \"label\": \"label-4781\",\n      \"height\": 342,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"8d7299c8-6601-4699-881e-06e44e036511\",\n      \"label\": \"label-4782\",\n      \"height\": 61,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"448bf065-0103-4e2f-8215-d578161e1f7e\",\n      \"label\": \"label-4783\",\n      \"height\": 143,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"25ab106f-8c70-40c3-a74a-9923a3ce8cf7\",\n      \"label\": \"label-4784\",\n      \"height\": 213,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"f4fd63b4-49bf-4163-b0b7-272b1650f4ba\",\n      \"label\": \"label-4785\",\n      \"height\": 77,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"56e7ac39-9c85-463b-8d49-d6133d1c6d27\",\n      \"label\": \"label-4786\",\n      \"height\": 500,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"711cffcb-c34d-4fc6-944c-034b9ad967f7\",\n      \"label\": \"label-4787\",\n      \"height\": 315,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"17afe303-048d-402f-a8e6-628e41d1b8a2\",\n      \"label\": \"label-4788\",\n      \"height\": 469,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"2b8cb5d7-31bc-4786-8b2b-939c1ef9e1dc\",\n      \"label\": \"label-4789\",\n      \"height\": 129,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"bf949686-00e6-4324-9407-f2874da0205e\",\n      \"label\": \"label-4790\",\n      \"height\": 139,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"49cd6fa8-f1bb-4090-b799-0a9913486de7\",\n      \"label\": \"label-4791\",\n      \"height\": 234,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"3a0b015b-f91e-4d48-a361-ef5b4dacd58d\",\n      \"label\": \"label-4792\",\n      \"height\": 472,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"38bf910e-187f-4d2e-bc3c-f4a78e922c4f\",\n      \"label\": \"label-4793\",\n      \"height\": 317,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"8e66eb0d-3a13-4c60-b2c6-ffcfb564eca2\",\n      \"label\": \"label-4794\",\n      \"height\": 187,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"f64f59e4-a63f-4a58-93e6-eef9fb0a283b\",\n      \"label\": \"label-4795\",\n      \"height\": 130,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"05a10d8a-c52b-4915-9d97-9197ece7f8e4\",\n      \"label\": \"label-4796\",\n      \"height\": 128,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"63f1396a-2618-4f25-b545-d0a70824ec89\",\n      \"label\": \"label-4797\",\n      \"height\": 347,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"04f09c80-9fbe-4e1d-9656-1d1ec0064207\",\n      \"label\": \"label-4798\",\n      \"height\": 125,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"eff8a1b5-3b91-4f37-9a7a-8b63a9cfc9c5\",\n      \"label\": \"label-4799\",\n      \"height\": 383,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"7e0fe518-a01f-4982-acee-ec312626a43e\",\n      \"label\": \"label-4800\",\n      \"height\": 289,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"b5ecabbe-2568-46a3-8783-f7c6e6d18f5a\",\n      \"label\": \"label-4801\",\n      \"height\": 223,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"f5cad4d6-02f1-41b1-aeff-a2544dd87e46\",\n      \"label\": \"label-4802\",\n      \"height\": 437,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"969d1b8d-c67c-4c52-a740-3bc48d0ca273\",\n      \"label\": \"label-4803\",\n      \"height\": 372,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"d5833c01-1afb-48f6-9068-09c1d4f0429c\",\n      \"label\": \"label-4804\",\n      \"height\": 396,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"f15313ed-8ca6-44d2-8058-a298046ce3b9\",\n      \"label\": \"label-4805\",\n      \"height\": 420,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"739d1cef-1eb6-4e3c-a2c7-108ae0c51497\",\n      \"label\": \"label-4806\",\n      \"height\": 404,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"d5d3dadc-0596-4e95-bb73-96cba5140fdd\",\n      \"label\": \"label-4807\",\n      \"height\": 495,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"7eeb3d3b-9608-414c-b5a3-c34be6f1e15d\",\n      \"label\": \"label-4808\",\n      \"height\": 466,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"e8a2f5bb-d031-4deb-bfde-96e536d5fb1d\",\n      \"label\": \"label-4809\",\n      \"height\": 260,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"fd567aa8-63ab-45cf-9361-e9d04adc5bab\",\n      \"label\": \"label-4810\",\n      \"height\": 290,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"f80ba147-2e5e-4d8f-b7c0-141adebd27e3\",\n      \"label\": \"label-4811\",\n      \"height\": 129,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"e4843cab-9576-4dd2-9f23-1a67ae5518e8\",\n      \"label\": \"label-4812\",\n      \"height\": 74,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"592592e5-a2d3-471e-a2c2-daa80a412148\",\n      \"label\": \"label-4813\",\n      \"height\": 531,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"1f4db9c6-51ea-42a0-9b33-6d849524aae7\",\n      \"label\": \"label-4814\",\n      \"height\": 251,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"8f2e4562-4b5c-4e09-96c0-ca0659064858\",\n      \"label\": \"label-4815\",\n      \"height\": 183,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"3ecca6f7-51e6-4044-a98b-d7a417dc368f\",\n      \"label\": \"label-4816\",\n      \"height\": 445,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"97413e98-0c5f-4138-baeb-e5c65434b23c\",\n      \"label\": \"label-4817\",\n      \"height\": 512,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"ec4388dd-254e-4b1a-aaa1-8cf9802414bd\",\n      \"label\": \"label-4818\",\n      \"height\": 403,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"d0d6b9a6-b793-4c5a-ba2e-2c70966c1671\",\n      \"label\": \"label-4819\",\n      \"height\": 484,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"81ca1b48-ea63-4eae-b4e9-e4ae41953cda\",\n      \"label\": \"label-4820\",\n      \"height\": 83,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"e078dd45-e1ae-449d-b902-969945282df7\",\n      \"label\": \"label-4821\",\n      \"height\": 244,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"c2eefbd6-2427-48cc-acae-e0fd0d2e7d1e\",\n      \"label\": \"label-4822\",\n      \"height\": 511,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"aa8e82ba-3cb5-46bd-8fcc-eb65307f89ea\",\n      \"label\": \"label-4823\",\n      \"height\": 489,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"f63bae80-ec3c-4a12-b5b4-6433e5d4125a\",\n      \"label\": \"label-4824\",\n      \"height\": 305,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"2f5d3b91-2acf-49bc-b57b-9ef04eb739bd\",\n      \"label\": \"label-4825\",\n      \"height\": 462,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"971b1530-e973-4813-84ee-7da984695f02\",\n      \"label\": \"label-4826\",\n      \"height\": 122,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"62eb98e2-c4c3-4536-8a3e-aa3b4ca50c75\",\n      \"label\": \"label-4827\",\n      \"height\": 408,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"0599826a-f06d-468a-93c1-b8ea9ff8cb27\",\n      \"label\": \"label-4828\",\n      \"height\": 94,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"d73f17e6-6c7f-46cc-a56f-8cfc16822b82\",\n      \"label\": \"label-4829\",\n      \"height\": 84,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"72618179-e4e9-430e-adcd-49f5c922348a\",\n      \"label\": \"label-4830\",\n      \"height\": 122,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"4624a440-302b-4307-a17d-40f507a2782f\",\n      \"label\": \"label-4831\",\n      \"height\": 109,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"56c36e0b-0f9a-4c15-9bb3-2e26ce366e8d\",\n      \"label\": \"label-4832\",\n      \"height\": 419,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"25a868b5-0e4d-4231-b1c6-8abd0ed7edcf\",\n      \"label\": \"label-4833\",\n      \"height\": 122,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"7b3d6346-b21e-48ac-8d6f-bdf904be03b8\",\n      \"label\": \"label-4834\",\n      \"height\": 175,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"90825430-4afb-4e20-990f-2bd18c74ed8c\",\n      \"label\": \"label-4835\",\n      \"height\": 179,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"0faae62e-07fd-4cf2-b521-b389bef805c4\",\n      \"label\": \"label-4836\",\n      \"height\": 121,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"1c2feed9-982c-4aff-95ef-5b91d0070db6\",\n      \"label\": \"label-4837\",\n      \"height\": 451,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"15353d3f-b5fd-47bf-874f-351f5dd2f04c\",\n      \"label\": \"label-4838\",\n      \"height\": 65,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"3af13edc-0200-4bf7-b10c-0e3b1b50d891\",\n      \"label\": \"label-4839\",\n      \"height\": 444,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"cfc89bc4-e3bf-4f5b-9d3c-51dea7617a09\",\n      \"label\": \"label-4840\",\n      \"height\": 181,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"b82d823f-cce3-4446-a027-888f545372e9\",\n      \"label\": \"label-4841\",\n      \"height\": 470,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"b30419e6-30ac-4a99-a1b6-8c52e5b74c38\",\n      \"label\": \"label-4842\",\n      \"height\": 399,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"6712e82f-a703-4840-97e7-962d1c2ac370\",\n      \"label\": \"label-4843\",\n      \"height\": 491,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"d64300fd-e7d3-42ee-867a-f4cc49bd57ec\",\n      \"label\": \"label-4844\",\n      \"height\": 405,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"f0aecb7c-8e74-411e-a64d-b2792612a0d8\",\n      \"label\": \"label-4845\",\n      \"height\": 69,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"bacee7bd-4720-47cf-aba5-bb27fe81e1dd\",\n      \"label\": \"label-4846\",\n      \"height\": 128,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"5994eeab-8290-47e3-abfe-cfe8f0a7ab91\",\n      \"label\": \"label-4847\",\n      \"height\": 136,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"c39d94df-441b-48dc-a216-d77395e14445\",\n      \"label\": \"label-4848\",\n      \"height\": 63,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"732716bd-62b6-4bbb-a84e-2043003653dd\",\n      \"label\": \"label-4849\",\n      \"height\": 404,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"704605f3-4301-481c-92e5-8d88d013f4e3\",\n      \"label\": \"label-4850\",\n      \"height\": 246,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"2a88b9e6-0227-4255-8fd1-34b1a5682e5e\",\n      \"label\": \"label-4851\",\n      \"height\": 527,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"7bb8cc83-87e1-4fc0-87c6-a2e05c424bef\",\n      \"label\": \"label-4852\",\n      \"height\": 416,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"33109bac-ba04-4f21-8ed8-e50672ac60a8\",\n      \"label\": \"label-4853\",\n      \"height\": 400,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"27d44ca0-05cb-414d-9c27-0ce7332f5956\",\n      \"label\": \"label-4854\",\n      \"height\": 283,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"9495215e-a771-4b79-b2b9-490d506bbe19\",\n      \"label\": \"label-4855\",\n      \"height\": 403,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"36dff508-0777-4592-9100-260417c6a34b\",\n      \"label\": \"label-4856\",\n      \"height\": 161,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"220c4e7f-554b-451f-b33f-fc7416d90ab0\",\n      \"label\": \"label-4857\",\n      \"height\": 328,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"8dda06f3-7c9b-4800-94be-0adacdebe5ef\",\n      \"label\": \"label-4858\",\n      \"height\": 176,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"012a7365-a9a5-4ba6-9a53-7eb84043a355\",\n      \"label\": \"label-4859\",\n      \"height\": 249,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"084ab2fa-8ac8-4fb5-8965-b7aa23ac9845\",\n      \"label\": \"label-4860\",\n      \"height\": 180,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"927b9fdb-a98e-4552-bf3f-0ccee8970866\",\n      \"label\": \"label-4861\",\n      \"height\": 231,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"5897b0a0-d4bb-49dd-99b5-b0595037cbfa\",\n      \"label\": \"label-4862\",\n      \"height\": 149,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"af9c7ffb-0c25-4c48-9142-307fd300c29e\",\n      \"label\": \"label-4863\",\n      \"height\": 325,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"b4c3ee58-ae5b-4098-ad68-08c181d301a2\",\n      \"label\": \"label-4864\",\n      \"height\": 252,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"9b9dc92b-59ad-4ed4-b5f5-79436c2817f1\",\n      \"label\": \"label-4865\",\n      \"height\": 209,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"24048f20-4ea9-4158-b98c-569989409ee1\",\n      \"label\": \"label-4866\",\n      \"height\": 476,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"881c68b7-7738-4202-b7ee-28dfff905680\",\n      \"label\": \"label-4867\",\n      \"height\": 100,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"46c5abc6-1c5a-45d2-bad7-eafc9e371e3f\",\n      \"label\": \"label-4868\",\n      \"height\": 140,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"40aebb3c-93c7-44b8-a022-2a3dc628c2ae\",\n      \"label\": \"label-4869\",\n      \"height\": 271,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"36cab81b-c4ab-4eec-b732-fad4cd90e8f4\",\n      \"label\": \"label-4870\",\n      \"height\": 355,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"cfc29685-e248-4ad8-a302-8118849eb9be\",\n      \"label\": \"label-4871\",\n      \"height\": 428,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"ce1eab3f-3d2d-4e75-bafa-34115f9a2be8\",\n      \"label\": \"label-4872\",\n      \"height\": 91,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"858249ef-9319-4732-8967-095e40a3e831\",\n      \"label\": \"label-4873\",\n      \"height\": 109,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"2e0e0f65-42be-494e-a5ed-f660e3cabfdf\",\n      \"label\": \"label-4874\",\n      \"height\": 212,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"7addffba-48a8-455a-9c72-67322f42ac3d\",\n      \"label\": \"label-4875\",\n      \"height\": 301,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"4aa24f56-a418-4ed2-9370-17488ac31115\",\n      \"label\": \"label-4876\",\n      \"height\": 236,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"ac132ac4-a94b-4d7e-a678-87891da80658\",\n      \"label\": \"label-4877\",\n      \"height\": 306,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"60d11d4e-4e16-4e6e-a908-774cb9c9d61b\",\n      \"label\": \"label-4878\",\n      \"height\": 510,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"2baa1265-cef6-4d9f-94c1-c9c061a4a0c0\",\n      \"label\": \"label-4879\",\n      \"height\": 507,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"b097ca75-0914-4c67-bb03-9c9429313253\",\n      \"label\": \"label-4880\",\n      \"height\": 282,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"4fd4e0a1-d14a-43b2-938e-cf864f55399c\",\n      \"label\": \"label-4881\",\n      \"height\": 137,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"891dde12-164a-4da6-827c-59e906fd1176\",\n      \"label\": \"label-4882\",\n      \"height\": 259,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"7f64207f-63ee-42b7-b553-954d914debd3\",\n      \"label\": \"label-4883\",\n      \"height\": 290,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"049deb47-f4be-4a8d-9c5a-79a4c2746a8c\",\n      \"label\": \"label-4884\",\n      \"height\": 176,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"89fc14cd-034c-4ac5-8072-fa95664869eb\",\n      \"label\": \"label-4885\",\n      \"height\": 358,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"a9c15ba9-1175-4ec8-a8ff-4e82e6720a98\",\n      \"label\": \"label-4886\",\n      \"height\": 513,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"708a98de-28df-4ef1-895d-46b18f10138c\",\n      \"label\": \"label-4887\",\n      \"height\": 202,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"3ca152a5-6439-4d91-ac82-b1027e235400\",\n      \"label\": \"label-4888\",\n      \"height\": 117,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"de0e2032-2c84-472d-b5c8-ac2dfd4db2a4\",\n      \"label\": \"label-4889\",\n      \"height\": 130,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"d6e00478-6aae-4b3a-a76b-6a96ba030004\",\n      \"label\": \"label-4890\",\n      \"height\": 75,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"af0d1338-6ab5-4614-bb9f-082acaecaf68\",\n      \"label\": \"label-4891\",\n      \"height\": 62,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"7624c63f-f7d8-4e09-a542-4325e15c3276\",\n      \"label\": \"label-4892\",\n      \"height\": 359,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"82aaae09-2e90-40e2-ab50-6624909cfdb6\",\n      \"label\": \"label-4893\",\n      \"height\": 129,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"75773294-f4e6-4bff-bd48-8eb324a3168c\",\n      \"label\": \"label-4894\",\n      \"height\": 413,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"7b60a7f3-6bf8-4406-a4f6-480de09e4bb3\",\n      \"label\": \"label-4895\",\n      \"height\": 178,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"45b95bd7-e854-432f-a111-fec6f58d188e\",\n      \"label\": \"label-4896\",\n      \"height\": 221,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"d6804ccf-216e-4ca7-b248-7abee29a058c\",\n      \"label\": \"label-4897\",\n      \"height\": 224,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"efd0113e-6000-4b7b-9f7d-a5db4ddf31d4\",\n      \"label\": \"label-4898\",\n      \"height\": 470,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"2deb83de-d5cc-425b-9369-e770aca74e6f\",\n      \"label\": \"label-4899\",\n      \"height\": 122,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"37c320d0-4594-4fc3-aa47-1fb261af5861\",\n      \"label\": \"label-4900\",\n      \"height\": 396,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"5f36e790-62d4-40fa-b9d7-5c36cef6edb8\",\n      \"label\": \"label-4901\",\n      \"height\": 512,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"fa090aab-1fd0-4219-a191-6b553ff625d3\",\n      \"label\": \"label-4902\",\n      \"height\": 481,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"25e6cd07-7c2f-482e-b2f2-325b5004f42f\",\n      \"label\": \"label-4903\",\n      \"height\": 434,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"fbfbed9b-1e31-46f6-a34d-8b9965f79ff9\",\n      \"label\": \"label-4904\",\n      \"height\": 129,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"6022f964-cf58-40d2-a6f0-2595bbaa76d0\",\n      \"label\": \"label-4905\",\n      \"height\": 522,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"d5924dd8-a3ba-48a4-8068-9d10ca91d9d4\",\n      \"label\": \"label-4906\",\n      \"height\": 93,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"482a04b0-0b4e-432c-bd73-7e89b1e5b9d7\",\n      \"label\": \"label-4907\",\n      \"height\": 367,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"96b1a8a9-6326-4e32-b174-2f1474cbac26\",\n      \"label\": \"label-4908\",\n      \"height\": 133,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"bcba8c0d-54ad-4a0a-99e4-410020d8e636\",\n      \"label\": \"label-4909\",\n      \"height\": 449,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"86890408-eaf7-481d-9f68-beb250f8d8b3\",\n      \"label\": \"label-4910\",\n      \"height\": 251,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"21dbd841-c768-4496-b8ba-3c88b9039f99\",\n      \"label\": \"label-4911\",\n      \"height\": 225,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"5cb69cf5-c422-4391-b6b3-ef114c2aa9ba\",\n      \"label\": \"label-4912\",\n      \"height\": 60,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"e6d2fb5d-507c-4a96-8736-0ecab3ad2f23\",\n      \"label\": \"label-4913\",\n      \"height\": 482,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"44b89ce5-6e88-4028-87c0-2336018234d9\",\n      \"label\": \"label-4914\",\n      \"height\": 339,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"5fa6b385-aab4-47d7-9d63-9cc33371b9f6\",\n      \"label\": \"label-4915\",\n      \"height\": 265,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"7ce41678-b3ff-4f98-854d-1205bdfb587b\",\n      \"label\": \"label-4916\",\n      \"height\": 525,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"5e6f4dba-1733-41fa-a3d6-4dacc42b8968\",\n      \"label\": \"label-4917\",\n      \"height\": 406,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"551cd1d1-c836-4b8b-808e-936a4de3f021\",\n      \"label\": \"label-4918\",\n      \"height\": 518,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"352640a3-6264-4681-970b-05c95a00df13\",\n      \"label\": \"label-4919\",\n      \"height\": 131,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"a15156b0-6365-4ff7-8f50-4486c387c3be\",\n      \"label\": \"label-4920\",\n      \"height\": 96,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"9360be1e-061d-4a33-a05d-78014b9f5cdb\",\n      \"label\": \"label-4921\",\n      \"height\": 116,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"2e11b7c6-b0d1-4e27-99c8-ce2fab356fe4\",\n      \"label\": \"label-4922\",\n      \"height\": 498,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"ac0f4068-cece-44b2-9cb6-e66849dc73b5\",\n      \"label\": \"label-4923\",\n      \"height\": 349,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"bca15b10-70c0-4f79-b930-8cf4e4d0893d\",\n      \"label\": \"label-4924\",\n      \"height\": 148,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"6dfcd82e-4c6f-461e-9325-c6cf451106ba\",\n      \"label\": \"label-4925\",\n      \"height\": 478,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"6acf364b-4577-4934-802a-022f12c50f23\",\n      \"label\": \"label-4926\",\n      \"height\": 220,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"73c4c512-5a29-4861-89cf-743f80441978\",\n      \"label\": \"label-4927\",\n      \"height\": 275,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"5654fc21-3d75-4aee-9570-78b2af939315\",\n      \"label\": \"label-4928\",\n      \"height\": 75,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"ca479628-9640-46dc-99cf-9713f69054d6\",\n      \"label\": \"label-4929\",\n      \"height\": 77,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"9f4b3fdc-35ab-4111-aee6-071f9400df76\",\n      \"label\": \"label-4930\",\n      \"height\": 343,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"ea68236c-bbe1-421c-9805-80e7974f1e75\",\n      \"label\": \"label-4931\",\n      \"height\": 108,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"3d38134a-7d5a-4200-9814-38bffc1cba22\",\n      \"label\": \"label-4932\",\n      \"height\": 147,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"14e7ff16-2751-4d82-963b-289e023e7a95\",\n      \"label\": \"label-4933\",\n      \"height\": 396,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"86222925-ddf1-4c54-b3f1-631e563ea1d6\",\n      \"label\": \"label-4934\",\n      \"height\": 290,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"c613ac27-43a4-4fd9-99d7-efaef2c6c06a\",\n      \"label\": \"label-4935\",\n      \"height\": 458,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"b3bbd192-30d5-4791-a808-03e4b6df80e1\",\n      \"label\": \"label-4936\",\n      \"height\": 512,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"a196b194-5fbe-47f7-ad3f-7b52424e68b3\",\n      \"label\": \"label-4937\",\n      \"height\": 64,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"1976f41b-4d7a-48ae-90aa-aff1d5cc552d\",\n      \"label\": \"label-4938\",\n      \"height\": 242,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"bd6ab1e2-63a3-4e4a-ba57-892ec8ea06f1\",\n      \"label\": \"label-4939\",\n      \"height\": 100,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"40c2693d-ca86-4055-a5c0-0a48ad091289\",\n      \"label\": \"label-4940\",\n      \"height\": 208,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"623306b8-671e-4b33-9d6c-33d1499cd049\",\n      \"label\": \"label-4941\",\n      \"height\": 429,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"bd8b4709-0590-4ac6-b87c-b55e52716872\",\n      \"label\": \"label-4942\",\n      \"height\": 41,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"14b3eee7-da51-44c4-a07e-7d580f36e368\",\n      \"label\": \"label-4943\",\n      \"height\": 388,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"7551ec45-4bf7-4384-b74f-724590519042\",\n      \"label\": \"label-4944\",\n      \"height\": 525,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"94d9fabb-a84e-4f6f-b166-fa009947aad2\",\n      \"label\": \"label-4945\",\n      \"height\": 90,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"417650ab-cb93-4dc7-ad0a-4c9aafac3d30\",\n      \"label\": \"label-4946\",\n      \"height\": 367,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"bee327d5-0172-4bcb-9aa9-650852d9e692\",\n      \"label\": \"label-4947\",\n      \"height\": 331,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"95af4165-23d0-4174-9d87-411f097891e4\",\n      \"label\": \"label-4948\",\n      \"height\": 440,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"be335fc8-cfcc-453b-95cf-346589441fcd\",\n      \"label\": \"label-4949\",\n      \"height\": 237,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"2fbd4ece-4bba-49f7-83d4-a1416ad2c9ad\",\n      \"label\": \"label-4950\",\n      \"height\": 55,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"47b665be-4d0b-44e7-80d2-be3f9a356eaf\",\n      \"label\": \"label-4951\",\n      \"height\": 162,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"bf25151e-552b-4ae7-a96a-5ff27ea6640d\",\n      \"label\": \"label-4952\",\n      \"height\": 108,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"acb6689d-7498-4211-b8c1-a218c609439d\",\n      \"label\": \"label-4953\",\n      \"height\": 300,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"a95855a4-08b9-4b0f-8ec4-2736d20a950f\",\n      \"label\": \"label-4954\",\n      \"height\": 341,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"bcc4b0ae-c75a-4dd4-a54a-755222acce8a\",\n      \"label\": \"label-4955\",\n      \"height\": 356,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"dbb1008c-4e28-4399-b15e-ebe9e1020303\",\n      \"label\": \"label-4956\",\n      \"height\": 66,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"70ee3971-7205-4675-bc23-04725d77113e\",\n      \"label\": \"label-4957\",\n      \"height\": 396,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"bf231534-62a6-4854-8b06-4f551d750edc\",\n      \"label\": \"label-4958\",\n      \"height\": 260,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"ce2264cc-0f16-4ee8-8dcd-1fd8d11e4dbb\",\n      \"label\": \"label-4959\",\n      \"height\": 429,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"4c4d1f82-8a76-4f10-b6e8-569725719182\",\n      \"label\": \"label-4960\",\n      \"height\": 104,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"b413393a-8942-423e-a919-4f018ab4c112\",\n      \"label\": \"label-4961\",\n      \"height\": 213,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"ae08659d-007d-4750-b471-431473351ed5\",\n      \"label\": \"label-4962\",\n      \"height\": 58,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"656c1151-95e2-4bf2-bf9f-61a6b7bf7982\",\n      \"label\": \"label-4963\",\n      \"height\": 391,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"b09f6ceb-c393-478b-9ae6-f497b65e5f27\",\n      \"label\": \"label-4964\",\n      \"height\": 147,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"37c36db3-1d50-4bce-9fcc-2ad6f4c057c2\",\n      \"label\": \"label-4965\",\n      \"height\": 173,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"06aec897-2ffa-451f-8f41-1fb4118ad33d\",\n      \"label\": \"label-4966\",\n      \"height\": 133,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"a71ac198-4f9c-4226-a7ab-fa12f41c222e\",\n      \"label\": \"label-4967\",\n      \"height\": 78,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"970bf84c-dd4e-4cee-afff-9b857ac4dbf8\",\n      \"label\": \"label-4968\",\n      \"height\": 90,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"5102bb43-e24d-4ad8-8af3-b7c00838a732\",\n      \"label\": \"label-4969\",\n      \"height\": 279,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"3522bed7-cccf-469e-8d63-494c4baa2efd\",\n      \"label\": \"label-4970\",\n      \"height\": 37,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"d4bfb2ba-6396-4b71-9a69-fc494a1920c1\",\n      \"label\": \"label-4971\",\n      \"height\": 485,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"60acb075-6809-46c3-bf44-ceda3da2c6a0\",\n      \"label\": \"label-4972\",\n      \"height\": 373,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"f398730b-8e6a-42c2-a54c-8c3849cfc3ce\",\n      \"label\": \"label-4973\",\n      \"height\": 405,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"963bc775-6aee-4c3d-8cec-03e0c3c30a65\",\n      \"label\": \"label-4974\",\n      \"height\": 362,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"b925b20a-1b34-439b-b7e6-3d89b789ff4b\",\n      \"label\": \"label-4975\",\n      \"height\": 434,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"8aefac9b-4ffb-441b-8ade-482decb15c69\",\n      \"label\": \"label-4976\",\n      \"height\": 387,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"2279edf7-f9ee-4af5-a834-fc25e5479bd7\",\n      \"label\": \"label-4977\",\n      \"height\": 307,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"7bb6bf8e-2e5e-4a46-85a5-2c30638e4ad6\",\n      \"label\": \"label-4978\",\n      \"height\": 271,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"2666a0c0-954d-4de0-8e39-871c1727494d\",\n      \"label\": \"label-4979\",\n      \"height\": 425,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"e2c3f504-01d2-49ca-8a69-b229bb4cd82e\",\n      \"label\": \"label-4980\",\n      \"height\": 65,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"0ce0e5cf-d313-4f15-b305-dddc251734a4\",\n      \"label\": \"label-4981\",\n      \"height\": 129,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"d3e973ad-c517-4867-87f5-9eb4a67b6599\",\n      \"label\": \"label-4982\",\n      \"height\": 144,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"c878080b-ec2b-4870-81c5-f8ef2c6ff4b7\",\n      \"label\": \"label-4983\",\n      \"height\": 174,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"8eab6b98-8d1f-4a50-a7ec-f6c548d41880\",\n      \"label\": \"label-4984\",\n      \"height\": 421,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"7078a56c-a868-4482-8d90-7216f41460ed\",\n      \"label\": \"label-4985\",\n      \"height\": 380,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"a1cb395f-bb81-427b-8fe7-e9529434278e\",\n      \"label\": \"label-4986\",\n      \"height\": 131,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"34cc15a2-7209-4391-b63d-2d5af8301740\",\n      \"label\": \"label-4987\",\n      \"height\": 262,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"f2b0b07e-e6fe-4876-8249-f51beebc208d\",\n      \"label\": \"label-4988\",\n      \"height\": 139,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"26a4f54b-89d6-4ff3-a855-c7111e1a122c\",\n      \"label\": \"label-4989\",\n      \"height\": 434,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"8a905e98-d631-4948-9cdc-210a31d8049c\",\n      \"label\": \"label-4990\",\n      \"height\": 311,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"1dfc55d6-9cc9-4db0-a7f3-09118881d823\",\n      \"label\": \"label-4991\",\n      \"height\": 382,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"25edd4db-2672-4c3d-91c7-0d0a7f279294\",\n      \"label\": \"label-4992\",\n      \"height\": 143,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"2f1a86d8-9e0c-4d84-a63e-86a150c233d5\",\n      \"label\": \"label-4993\",\n      \"height\": 80,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"46805294-667a-45dc-8992-2a45f2b3fd14\",\n      \"label\": \"label-4994\",\n      \"height\": 34,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"63b66b2f-3c3e-413d-a9a7-83d46835059d\",\n      \"label\": \"label-4995\",\n      \"height\": 434,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"76bbd9b1-c398-48a6-b533-170bde40da98\",\n      \"label\": \"label-4996\",\n      \"height\": 193,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"367647d7-d9ed-4f6d-b95f-5102137c6612\",\n      \"label\": \"label-4997\",\n      \"height\": 34,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"c0758de4-c9fe-452b-929b-81701a0ddffb\",\n      \"label\": \"label-4998\",\n      \"height\": 477,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"7e8bbdfd-d747-48b1-be9a-ac3efea263d5\",\n      \"label\": \"label-4999\",\n      \"height\": 264,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"6cec6029-42fa-4bf9-bd0b-81a88c146aaf\",\n      \"label\": \"label-5000\",\n      \"height\": 479,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"edbdaf31-10b0-44e0-9d69-5eeea052dd85\",\n      \"label\": \"label-5001\",\n      \"height\": 234,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"d66117f0-823f-4816-af95-d70b98f0991d\",\n      \"label\": \"label-5002\",\n      \"height\": 61,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"a2665eee-e9e7-4c70-ab52-06fabb6cecf0\",\n      \"label\": \"label-5003\",\n      \"height\": 104,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"e3d2f058-eda9-487b-b418-5b3709352b35\",\n      \"label\": \"label-5004\",\n      \"height\": 386,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"9fdf8c5b-7bf7-423a-a847-c6ad006aefe4\",\n      \"label\": \"label-5005\",\n      \"height\": 304,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"817ae931-88e2-4c47-9668-24233c6fcba0\",\n      \"label\": \"label-5006\",\n      \"height\": 499,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"e7edd1b1-5b51-40c3-b42b-ae19e40b166e\",\n      \"label\": \"label-5007\",\n      \"height\": 105,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"968b3e3c-57e0-4469-8def-4a44e3d26b34\",\n      \"label\": \"label-5008\",\n      \"height\": 68,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"53178862-d96c-42b9-b7b7-b1e2bd78d107\",\n      \"label\": \"label-5009\",\n      \"height\": 298,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"768b1a1b-dc83-4355-9304-5e22aaa943aa\",\n      \"label\": \"label-5010\",\n      \"height\": 280,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"c89c3d86-b39d-42b9-add8-0653f6e01b04\",\n      \"label\": \"label-5011\",\n      \"height\": 305,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"4a958ef3-7ec5-46d2-bbbb-89542506cc0e\",\n      \"label\": \"label-5012\",\n      \"height\": 123,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"4e2e0a11-f0d5-4d85-9006-3219ce3ae866\",\n      \"label\": \"label-5013\",\n      \"height\": 194,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"d2d52b80-6834-43c1-b931-261692dc6b84\",\n      \"label\": \"label-5014\",\n      \"height\": 428,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"1d16a0f9-e499-417b-a493-6b1448acb24f\",\n      \"label\": \"label-5015\",\n      \"height\": 374,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"0e5390f8-cb68-41db-9ea7-81e62daade62\",\n      \"label\": \"label-5016\",\n      \"height\": 60,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"8a92d36b-bedf-4c4d-8730-ad03aaccae1d\",\n      \"label\": \"label-5017\",\n      \"height\": 228,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"dc896d73-8bd5-4552-94cd-0c1eb8e89eef\",\n      \"label\": \"label-5018\",\n      \"height\": 186,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"5847b95e-7ce3-4e54-944c-43a0f647861a\",\n      \"label\": \"label-5019\",\n      \"height\": 33,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"904ae3de-ef04-43ed-b2b3-5fdec3752549\",\n      \"label\": \"label-5020\",\n      \"height\": 55,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"caeae444-f6fe-46d3-a868-1a2c56718601\",\n      \"label\": \"label-5021\",\n      \"height\": 148,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"5701f1df-52c5-4d41-af25-e71e78330142\",\n      \"label\": \"label-5022\",\n      \"height\": 87,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"e5ece253-08de-4cfb-bfde-e4d0b9b045a4\",\n      \"label\": \"label-5023\",\n      \"height\": 368,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"8d5c26c2-256f-4787-b990-893fd8e173ed\",\n      \"label\": \"label-5024\",\n      \"height\": 275,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"22fa4427-0539-42c6-8d31-c6cb3bfc2a02\",\n      \"label\": \"label-5025\",\n      \"height\": 88,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"0171b128-73d6-4a80-9e1a-551ce3ea6c4c\",\n      \"label\": \"label-5026\",\n      \"height\": 151,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"c84c65ae-f8bc-4e52-bab0-379f9172ea5c\",\n      \"label\": \"label-5027\",\n      \"height\": 207,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"116bf3d1-fd27-424d-b660-ebff84427ea6\",\n      \"label\": \"label-5028\",\n      \"height\": 406,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"7e802fd7-8e46-4dbe-9b30-220c4f705218\",\n      \"label\": \"label-5029\",\n      \"height\": 177,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"25e2125b-2ab8-4eba-b587-f3b63ff055c0\",\n      \"label\": \"label-5030\",\n      \"height\": 350,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"b2636f2b-51d6-4b59-b636-4a948038c303\",\n      \"label\": \"label-5031\",\n      \"height\": 77,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"663009ce-d6c3-4b44-85f3-29f0781caa97\",\n      \"label\": \"label-5032\",\n      \"height\": 182,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"ead6111f-7031-4998-99d1-240c4029c804\",\n      \"label\": \"label-5033\",\n      \"height\": 61,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"cf581032-c18d-4df3-acce-b5dd09f23e80\",\n      \"label\": \"label-5034\",\n      \"height\": 191,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"9cac2d83-90ec-4d82-825e-6dec737f9c0a\",\n      \"label\": \"label-5035\",\n      \"height\": 436,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"51ef15ff-8035-4e1a-baf5-08b7940b9943\",\n      \"label\": \"label-5036\",\n      \"height\": 226,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"fea64488-29db-481f-9433-fa9d1fbbec4e\",\n      \"label\": \"label-5037\",\n      \"height\": 168,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"dfacfd14-fc61-43d1-94e1-27b1d30ca661\",\n      \"label\": \"label-5038\",\n      \"height\": 220,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"e31d06d1-d72a-4ff1-ae05-15e1551ee510\",\n      \"label\": \"label-5039\",\n      \"height\": 198,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"b1ee962b-33de-4e78-82bb-e8b965bc1a7f\",\n      \"label\": \"label-5040\",\n      \"height\": 272,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"8cd847ae-d3c5-4974-9ece-2432bec12d74\",\n      \"label\": \"label-5041\",\n      \"height\": 124,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"8ff359c8-2573-4130-a84d-85ca39fee206\",\n      \"label\": \"label-5042\",\n      \"height\": 345,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"c58c8a9c-875d-4e61-9be0-382e612e718a\",\n      \"label\": \"label-5043\",\n      \"height\": 122,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"eacc3967-5249-4ed9-bd4f-385366e7d424\",\n      \"label\": \"label-5044\",\n      \"height\": 524,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"ac5f61f9-2208-42be-bbcf-5afd124c837c\",\n      \"label\": \"label-5045\",\n      \"height\": 472,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"cd7243eb-e5c1-4095-b066-fff213f31bb2\",\n      \"label\": \"label-5046\",\n      \"height\": 378,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"946c4d60-0375-48a0-baa0-6520e143b8b8\",\n      \"label\": \"label-5047\",\n      \"height\": 462,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"9abb1fe4-cd9f-484f-beb6-a4698539aa6e\",\n      \"label\": \"label-5048\",\n      \"height\": 481,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"af2ff2a0-992c-49ee-bea2-05331127f204\",\n      \"label\": \"label-5049\",\n      \"height\": 324,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"b76540df-d935-4423-804a-26422bfaee81\",\n      \"label\": \"label-5050\",\n      \"height\": 69,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"577cc99e-cc54-4b19-876c-6eeaeabceddb\",\n      \"label\": \"label-5051\",\n      \"height\": 400,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"c9468547-a498-49dc-928b-315e5b9641ba\",\n      \"label\": \"label-5052\",\n      \"height\": 486,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"26aa5ecd-abc5-4306-86b3-d955b6640e9d\",\n      \"label\": \"label-5053\",\n      \"height\": 310,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"e6eb6371-c026-4dab-afef-1718fbe30e8f\",\n      \"label\": \"label-5054\",\n      \"height\": 267,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"85ca0245-fdd1-4f00-93eb-f5ae16237150\",\n      \"label\": \"label-5055\",\n      \"height\": 415,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"6a44d15a-81e1-4e07-a1e1-a2b1703b525d\",\n      \"label\": \"label-5056\",\n      \"height\": 157,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"7bbdc280-2428-4c3d-8a8c-b6025ed49109\",\n      \"label\": \"label-5057\",\n      \"height\": 152,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"a7fd9885-1c66-42f4-87a1-72bd29352200\",\n      \"label\": \"label-5058\",\n      \"height\": 158,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"bc52557d-4637-4292-9917-05953a3b1834\",\n      \"label\": \"label-5059\",\n      \"height\": 492,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"f0a15f5d-f665-4fe6-8c2d-e22c20bbcbf6\",\n      \"label\": \"label-5060\",\n      \"height\": 216,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"0e4f6c70-86b3-4471-8a58-ee8d0c88aa71\",\n      \"label\": \"label-5061\",\n      \"height\": 143,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"260cca9b-003c-42dd-94e9-adc06c290f94\",\n      \"label\": \"label-5062\",\n      \"height\": 38,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"615dcaac-d3b4-4eaa-b6c9-b86f5319ddcc\",\n      \"label\": \"label-5063\",\n      \"height\": 498,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"584761c9-03db-49df-8013-a7ee4a17a0cd\",\n      \"label\": \"label-5064\",\n      \"height\": 61,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"43c1c5c6-b74a-4460-b102-4bd300a209f6\",\n      \"label\": \"label-5065\",\n      \"height\": 345,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"96d3b326-d456-473a-9be8-bd0fed6caff3\",\n      \"label\": \"label-5066\",\n      \"height\": 128,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"621ea74d-bbab-4084-818e-dd23bafb85fd\",\n      \"label\": \"label-5067\",\n      \"height\": 272,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"6ecdf69d-7f78-49e9-81a3-4d71e2ff104d\",\n      \"label\": \"label-5068\",\n      \"height\": 309,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"5bd76733-7d8a-496d-a2c2-4fb2aa10e98a\",\n      \"label\": \"label-5069\",\n      \"height\": 411,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"98bc6bb1-d805-460e-a2a7-77f297cd94ac\",\n      \"label\": \"label-5070\",\n      \"height\": 508,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"3ef7bf79-ef92-4d87-9279-db6dc21a9fba\",\n      \"label\": \"label-5071\",\n      \"height\": 100,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"f59135bb-4c72-4666-891a-ce9f7427b91a\",\n      \"label\": \"label-5072\",\n      \"height\": 382,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"a8b57be6-b1be-44cb-a6d9-39cb1d55b765\",\n      \"label\": \"label-5073\",\n      \"height\": 244,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"50e0ff93-a02a-4969-bb01-8c7dfc45a5dc\",\n      \"label\": \"label-5074\",\n      \"height\": 236,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"1fadbd3e-d414-4a58-ba8e-9e565931e2b1\",\n      \"label\": \"label-5075\",\n      \"height\": 227,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"977ca5aa-362c-40a8-afbf-6895dabc5729\",\n      \"label\": \"label-5076\",\n      \"height\": 212,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"4efede7f-02c4-403d-a0bb-e8580b984fe8\",\n      \"label\": \"label-5077\",\n      \"height\": 280,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"fea85fee-39a7-4045-a373-4b23aae00b11\",\n      \"label\": \"label-5078\",\n      \"height\": 137,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"1fa8ed6e-be6d-4db3-a944-c5f57ff79c6f\",\n      \"label\": \"label-5079\",\n      \"height\": 324,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"e9d42639-3b42-4597-a0a2-3483fdeab2ea\",\n      \"label\": \"label-5080\",\n      \"height\": 272,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"3a9cf5ad-c236-4003-9c19-41a6540dd85e\",\n      \"label\": \"label-5081\",\n      \"height\": 489,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"ff8a12de-38d0-4b52-b39d-ca8a740e8f78\",\n      \"label\": \"label-5082\",\n      \"height\": 262,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"2a0f7926-4b72-41ee-925a-0242bf36fdfa\",\n      \"label\": \"label-5083\",\n      \"height\": 475,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"1d77302f-1812-4222-952a-390af57bff74\",\n      \"label\": \"label-5084\",\n      \"height\": 255,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"22a8a417-e5e2-4e9e-9193-f19409647ded\",\n      \"label\": \"label-5085\",\n      \"height\": 510,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"c5b259cc-b592-488f-a07b-7bd5d8d2e01c\",\n      \"label\": \"label-5086\",\n      \"height\": 405,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"405e8858-81da-4cad-8621-484a9452b6e3\",\n      \"label\": \"label-5087\",\n      \"height\": 468,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"5e3cb2a0-45f3-48fa-a78a-ca3644276bae\",\n      \"label\": \"label-5088\",\n      \"height\": 115,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"d40c1e7d-68e7-4d51-8f49-33c666b6f54c\",\n      \"label\": \"label-5089\",\n      \"height\": 159,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"eb35c513-35c4-4827-9ab9-b4258ad85872\",\n      \"label\": \"label-5090\",\n      \"height\": 218,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"c1e3e671-bdfb-42be-a875-651e00dbe5b6\",\n      \"label\": \"label-5091\",\n      \"height\": 366,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"9121b729-520c-4088-8fb1-2d62526b24f9\",\n      \"label\": \"label-5092\",\n      \"height\": 518,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"638d2cc1-d2d7-444b-90ba-b10bd9eefb1c\",\n      \"label\": \"label-5093\",\n      \"height\": 503,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"3cfa05e1-98f1-49a5-8890-c2fec2c21a9b\",\n      \"label\": \"label-5094\",\n      \"height\": 81,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"bf3382ad-6823-49c7-a827-a9f5d8cb8392\",\n      \"label\": \"label-5095\",\n      \"height\": 392,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"66df0bc2-8c66-445b-8520-bf164c4ade19\",\n      \"label\": \"label-5096\",\n      \"height\": 417,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"7f5499fd-8083-4768-8055-7e740f0f725b\",\n      \"label\": \"label-5097\",\n      \"height\": 512,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"43a0511e-483d-4ee4-a734-d704b56bf608\",\n      \"label\": \"label-5098\",\n      \"height\": 79,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"a0a8041a-7ea7-49c8-83e2-e306612f2edf\",\n      \"label\": \"label-5099\",\n      \"height\": 413,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"6a5a8f15-17cd-4b89-8831-9f9476015e30\",\n      \"label\": \"label-5100\",\n      \"height\": 133,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"46887cfb-aa66-40af-bb5d-628a5932a7fc\",\n      \"label\": \"label-5101\",\n      \"height\": 213,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"828bec37-2a11-4291-9ba3-475ef0056ad1\",\n      \"label\": \"label-5102\",\n      \"height\": 496,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"e491113d-96ba-4595-8c59-63602fe65451\",\n      \"label\": \"label-5103\",\n      \"height\": 259,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"75abdcd8-6a1c-4b93-a151-c8263843c619\",\n      \"label\": \"label-5104\",\n      \"height\": 503,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"33ae4499-573e-41e2-bed1-2c6fb3f73493\",\n      \"label\": \"label-5105\",\n      \"height\": 155,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"d15a0b55-eda6-4586-9382-241b3591ba39\",\n      \"label\": \"label-5106\",\n      \"height\": 149,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"188d4372-8c31-41b1-ac29-b423d54ed28d\",\n      \"label\": \"label-5107\",\n      \"height\": 319,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"d2b32575-2ea5-4571-8cab-7fe63ea847b8\",\n      \"label\": \"label-5108\",\n      \"height\": 231,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"6c0d7570-0b91-459f-aee2-13121d18cbcf\",\n      \"label\": \"label-5109\",\n      \"height\": 376,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"31853516-afa8-4c5d-94a3-88fed345e00b\",\n      \"label\": \"label-5110\",\n      \"height\": 462,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"dbab8ce3-f3dc-418e-858e-a3aeecda43c8\",\n      \"label\": \"label-5111\",\n      \"height\": 386,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"502022d6-f15e-489e-8394-22b155b1781a\",\n      \"label\": \"label-5112\",\n      \"height\": 321,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"64ef75b2-2301-485c-908a-105ca14aa696\",\n      \"label\": \"label-5113\",\n      \"height\": 519,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"ce983f72-8c3e-4237-8e4d-fd706d0b423b\",\n      \"label\": \"label-5114\",\n      \"height\": 342,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"aa88b4ca-babd-4053-b716-5aded8f22432\",\n      \"label\": \"label-5115\",\n      \"height\": 369,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"05519c7f-9e4a-466d-a9ab-721002518ebb\",\n      \"label\": \"label-5116\",\n      \"height\": 306,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"85ab78c3-dbdc-4820-a893-9bbd2fee4f87\",\n      \"label\": \"label-5117\",\n      \"height\": 124,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"71f4b3c2-5006-430d-a784-27c61464e03a\",\n      \"label\": \"label-5118\",\n      \"height\": 464,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"e7ea99de-2862-4e33-b7e7-4b2e87bd0f80\",\n      \"label\": \"label-5119\",\n      \"height\": 456,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"e8ad095d-8005-4e4b-9618-9ab2a58f536e\",\n      \"label\": \"label-5120\",\n      \"height\": 175,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"522e40af-04af-45f8-bce0-7380458b8ea7\",\n      \"label\": \"label-5121\",\n      \"height\": 60,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"1f6ff600-5cb0-422c-89c5-494b48b9b938\",\n      \"label\": \"label-5122\",\n      \"height\": 336,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"253c1885-fdb6-49b5-b34d-8fe55c0a4b8d\",\n      \"label\": \"label-5123\",\n      \"height\": 155,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"6ec93694-4458-4a5c-af75-30e95057fc12\",\n      \"label\": \"label-5124\",\n      \"height\": 108,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"1ccf7051-7733-4bd5-9198-d2978e00c083\",\n      \"label\": \"label-5125\",\n      \"height\": 40,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"33fbec8b-cfe9-4cc7-a11f-8b00495f5573\",\n      \"label\": \"label-5126\",\n      \"height\": 489,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"7aed4ace-6247-4ca7-bdde-67e4c6e314af\",\n      \"label\": \"label-5127\",\n      \"height\": 46,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"aed9f371-b61b-4a53-b6f5-a8105a36899e\",\n      \"label\": \"label-5128\",\n      \"height\": 430,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"c47d528b-5051-42ee-be2e-77f4e6440f6c\",\n      \"label\": \"label-5129\",\n      \"height\": 434,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"7dcab37c-a20e-4045-a561-fd4a3aa4a281\",\n      \"label\": \"label-5130\",\n      \"height\": 509,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"db53f559-6ac3-4b99-b2a0-3b344a29e1b6\",\n      \"label\": \"label-5131\",\n      \"height\": 84,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"764c94a5-c1c3-4ed7-9d2c-93e2d1dd720c\",\n      \"label\": \"label-5132\",\n      \"height\": 377,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"c852498d-b370-4af8-b648-4e27436197e0\",\n      \"label\": \"label-5133\",\n      \"height\": 88,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"0587f443-02d3-428d-a74e-d7e14905d165\",\n      \"label\": \"label-5134\",\n      \"height\": 479,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"8a17e9d0-e693-470f-8c8a-842870c0a36e\",\n      \"label\": \"label-5135\",\n      \"height\": 182,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"bb0291a2-4060-45ee-9d46-780aa0b14a24\",\n      \"label\": \"label-5136\",\n      \"height\": 168,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"5691acf5-ca27-4051-bdd5-09923149e60c\",\n      \"label\": \"label-5137\",\n      \"height\": 161,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"8e34d60c-aa0b-45b7-95d5-f3464fedbe85\",\n      \"label\": \"label-5138\",\n      \"height\": 32,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"1fe4e682-fe70-4625-a35f-6c86f8055a5b\",\n      \"label\": \"label-5139\",\n      \"height\": 211,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"61cc595e-b42c-472d-a8c1-1773bd94a1cf\",\n      \"label\": \"label-5140\",\n      \"height\": 373,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"d9d3f139-c378-4d32-97b0-65dc5d47791d\",\n      \"label\": \"label-5141\",\n      \"height\": 95,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"5d56d8ca-db2d-4839-8b96-8252f6f17155\",\n      \"label\": \"label-5142\",\n      \"height\": 400,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"6796a8cd-895a-497d-bd83-f693fcf47648\",\n      \"label\": \"label-5143\",\n      \"height\": 335,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"a0a8f860-9874-439a-91c5-fc883c1858c0\",\n      \"label\": \"label-5144\",\n      \"height\": 188,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"cf533bba-346e-41bf-af28-44212a658c50\",\n      \"label\": \"label-5145\",\n      \"height\": 366,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"35892f7f-2c56-4f9b-ad1e-3c8135121a50\",\n      \"label\": \"label-5146\",\n      \"height\": 425,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"d75dde28-26be-48c4-97d1-e4a3d030e4e7\",\n      \"label\": \"label-5147\",\n      \"height\": 65,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"5fe6b648-0662-422f-8ef4-2e48d9e6db29\",\n      \"label\": \"label-5148\",\n      \"height\": 257,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"ff63beda-3679-49a6-9e90-ba11a28364b4\",\n      \"label\": \"label-5149\",\n      \"height\": 427,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"d07c6bd2-0e0c-43e9-9f7e-838e824011f8\",\n      \"label\": \"label-5150\",\n      \"height\": 182,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"899fdd45-7bae-4e01-8c4f-5b85290e7c41\",\n      \"label\": \"label-5151\",\n      \"height\": 125,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"55861404-a2be-451f-b9e3-2f8d08ea641b\",\n      \"label\": \"label-5152\",\n      \"height\": 466,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"9f46f0b6-18c7-4480-9946-e6681da0196c\",\n      \"label\": \"label-5153\",\n      \"height\": 179,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"a0cd1f5d-6a12-4ab4-b661-3ab02593264a\",\n      \"label\": \"label-5154\",\n      \"height\": 202,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"e4ca197a-1b48-45cf-b6a8-2f6d2cbc18e8\",\n      \"label\": \"label-5155\",\n      \"height\": 333,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"7658e06d-c32a-412d-b919-5f537fb0d14b\",\n      \"label\": \"label-5156\",\n      \"height\": 290,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"572e00c9-a170-4095-9900-f6487ac527f6\",\n      \"label\": \"label-5157\",\n      \"height\": 476,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"d96a01b0-0f00-412f-ac22-836f5fd45497\",\n      \"label\": \"label-5158\",\n      \"height\": 466,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"43a55737-7f23-4195-9661-1faee447dd7f\",\n      \"label\": \"label-5159\",\n      \"height\": 401,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"bc01644f-24db-467d-8ed8-ac9c083b8216\",\n      \"label\": \"label-5160\",\n      \"height\": 383,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"a1ea2c70-71e7-43de-8986-24482a6ffd82\",\n      \"label\": \"label-5161\",\n      \"height\": 487,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"c936127a-5108-413b-bebd-1157b777c5ed\",\n      \"label\": \"label-5162\",\n      \"height\": 520,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"c5250ad7-f383-4fd7-b64e-1ab59fa93da2\",\n      \"label\": \"label-5163\",\n      \"height\": 56,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"6077f608-bec4-4fb0-a777-ab35c6976bb2\",\n      \"label\": \"label-5164\",\n      \"height\": 159,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"a5487bef-3901-463c-a9ca-1b460a29d8cd\",\n      \"label\": \"label-5165\",\n      \"height\": 453,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"6da872f8-3c7f-4b72-9786-290bc692ff33\",\n      \"label\": \"label-5166\",\n      \"height\": 341,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"b72cbd46-e78e-4859-be44-14d96a57375c\",\n      \"label\": \"label-5167\",\n      \"height\": 268,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"76625a1b-0d05-41fc-ad9b-d129b7589c11\",\n      \"label\": \"label-5168\",\n      \"height\": 443,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"87a515fe-8b54-4281-9179-70016f0d1b5f\",\n      \"label\": \"label-5169\",\n      \"height\": 59,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"0bdce4d3-5aa5-4fed-a0e1-cb56e3fcdeff\",\n      \"label\": \"label-5170\",\n      \"height\": 489,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"50416cf6-79fc-4b80-acd8-91dac1312a2b\",\n      \"label\": \"label-5171\",\n      \"height\": 64,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"129e6283-8b1d-4ca7-9edd-36d509253d44\",\n      \"label\": \"label-5172\",\n      \"height\": 352,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"2d0ad15d-7cea-4cff-a0a1-8e29e27e8701\",\n      \"label\": \"label-5173\",\n      \"height\": 368,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"4676e0fe-3451-4f3e-b7d8-c63beba48c28\",\n      \"label\": \"label-5174\",\n      \"height\": 123,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"bd6235f6-5971-4fb4-873a-871731d48d8c\",\n      \"label\": \"label-5175\",\n      \"height\": 110,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"2f13ab17-668f-4cff-a6d3-ef2efb1636fb\",\n      \"label\": \"label-5176\",\n      \"height\": 419,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"9e416ec1-a529-4cfd-aaff-82aa08cdff0f\",\n      \"label\": \"label-5177\",\n      \"height\": 201,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"d7ef1bac-f88e-462d-91fe-5ff961f6f4b1\",\n      \"label\": \"label-5178\",\n      \"height\": 459,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"195a4a8a-0323-470e-b539-16ba4f45c015\",\n      \"label\": \"label-5179\",\n      \"height\": 451,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"69edd9b0-e1c6-4e40-af40-5029d00e1946\",\n      \"label\": \"label-5180\",\n      \"height\": 362,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"dd41ff93-620a-4a9c-8a23-debe4eb209e1\",\n      \"label\": \"label-5181\",\n      \"height\": 95,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"07e3f2f1-129e-4fc7-91dd-1a0a1f7fadfe\",\n      \"label\": \"label-5182\",\n      \"height\": 249,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"cd6afb61-cb39-4b61-af7d-e73e9f8ea309\",\n      \"label\": \"label-5183\",\n      \"height\": 178,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"22eb08ff-afbd-4ec3-9643-73e566d6afa6\",\n      \"label\": \"label-5184\",\n      \"height\": 486,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"1b1132a6-8e69-4d3f-9adc-2ee125b10e3f\",\n      \"label\": \"label-5185\",\n      \"height\": 463,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"2e099987-bf57-4889-9eeb-ed2dbeaa76f8\",\n      \"label\": \"label-5186\",\n      \"height\": 401,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"62fc15cc-173f-41bd-a6ba-dbb3c5bc6d8c\",\n      \"label\": \"label-5187\",\n      \"height\": 389,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"790b24dc-45c6-4c98-84b9-c391993f085c\",\n      \"label\": \"label-5188\",\n      \"height\": 50,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"f687fc98-ca11-467b-88a7-c64435d29f7d\",\n      \"label\": \"label-5189\",\n      \"height\": 522,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"13d3df83-2c24-4993-bcf2-c3fdd6a49313\",\n      \"label\": \"label-5190\",\n      \"height\": 343,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"7e4b7bd0-17c7-42e8-8b44-69153685c0ec\",\n      \"label\": \"label-5191\",\n      \"height\": 80,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"f8c2df42-9284-4ab8-93aa-3e2fd2d1328f\",\n      \"label\": \"label-5192\",\n      \"height\": 457,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"50c7af05-4cfb-4c11-bceb-53cbb9808acb\",\n      \"label\": \"label-5193\",\n      \"height\": 317,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"befc76cd-a0ab-4bb5-8fd3-232a36aed1f8\",\n      \"label\": \"label-5194\",\n      \"height\": 114,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"31d5649a-dd67-4de7-b83d-86681e7e0da2\",\n      \"label\": \"label-5195\",\n      \"height\": 35,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"039e2bca-7d49-456d-a1c3-fcb6c643c5b9\",\n      \"label\": \"label-5196\",\n      \"height\": 88,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"15261228-0d57-4454-837f-951abdb6fc1c\",\n      \"label\": \"label-5197\",\n      \"height\": 421,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"71e3dcdf-8bbe-4689-bcd6-9aa5c3d12086\",\n      \"label\": \"label-5198\",\n      \"height\": 187,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"d1522a5c-ff02-4d18-ae23-dd364d28a440\",\n      \"label\": \"label-5199\",\n      \"height\": 474,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"ee689b02-4b67-4cd2-b2ac-0dc1412a6697\",\n      \"label\": \"label-5200\",\n      \"height\": 167,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"ad40d932-286a-4898-8566-a7e7640424c4\",\n      \"label\": \"label-5201\",\n      \"height\": 531,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"40acd5f3-8d98-484b-95f7-169527f0e3a3\",\n      \"label\": \"label-5202\",\n      \"height\": 177,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"d9db35d8-1224-4c0f-ae00-4de7d6fe7b3f\",\n      \"label\": \"label-5203\",\n      \"height\": 154,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"ae109dbb-7348-4744-8b7b-e5c9d19a733d\",\n      \"label\": \"label-5204\",\n      \"height\": 236,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"b7ecb647-6ce4-44fc-9663-6df9511e79b2\",\n      \"label\": \"label-5205\",\n      \"height\": 336,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"abb3d197-b54a-42fd-b705-13449ee78d69\",\n      \"label\": \"label-5206\",\n      \"height\": 336,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"a1b3b810-f394-41fd-9cb8-1339f6ac3051\",\n      \"label\": \"label-5207\",\n      \"height\": 525,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"93906b20-bae8-4507-a1d7-48a42cfa1b0d\",\n      \"label\": \"label-5208\",\n      \"height\": 516,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"ba96ef81-9121-422e-81eb-2297819bd87f\",\n      \"label\": \"label-5209\",\n      \"height\": 529,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"8ef3ac85-23f5-412c-a959-e751f957355b\",\n      \"label\": \"label-5210\",\n      \"height\": 65,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"b082c236-c28d-4500-a7f5-6b58c1e58077\",\n      \"label\": \"label-5211\",\n      \"height\": 435,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"ab560cc6-4f29-48db-b621-3c68a29e3b33\",\n      \"label\": \"label-5212\",\n      \"height\": 157,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"35f9671b-2dbe-45b0-9289-91e8b81622aa\",\n      \"label\": \"label-5213\",\n      \"height\": 236,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"00421043-2d5b-4f2a-8610-5eba2a0701ca\",\n      \"label\": \"label-5214\",\n      \"height\": 106,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"a6cf3e07-f025-425b-91a4-faded04ae61a\",\n      \"label\": \"label-5215\",\n      \"height\": 351,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"8c2dee7a-000b-44a1-9bb8-94ef883aebda\",\n      \"label\": \"label-5216\",\n      \"height\": 423,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"fd139566-f14f-42ed-9021-282bcfe18cb1\",\n      \"label\": \"label-5217\",\n      \"height\": 280,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"7b2c689a-d0b4-4f20-8ba9-9ecc008994c9\",\n      \"label\": \"label-5218\",\n      \"height\": 321,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"1d1d1082-2d27-42bc-9f93-5d5ba84f77c9\",\n      \"label\": \"label-5219\",\n      \"height\": 455,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"fd3f2aa9-d857-467c-ae0f-5031473ab2aa\",\n      \"label\": \"label-5220\",\n      \"height\": 43,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"700f5c66-a571-458c-8fb0-e572d4021e63\",\n      \"label\": \"label-5221\",\n      \"height\": 272,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"e5d00209-f896-4a55-8cb8-4cf3ae051293\",\n      \"label\": \"label-5222\",\n      \"height\": 37,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"92b2c674-dc3f-4c34-b228-6751e552d369\",\n      \"label\": \"label-5223\",\n      \"height\": 111,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"02f213be-d799-4eb0-ab7a-d04e54c2edb7\",\n      \"label\": \"label-5224\",\n      \"height\": 370,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"5514b4b9-3af4-4a41-ad44-4d35935cdb38\",\n      \"label\": \"label-5225\",\n      \"height\": 379,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"5b2ff6b2-ab3f-46cd-9287-b8bacc1a8d35\",\n      \"label\": \"label-5226\",\n      \"height\": 351,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"36eca9e4-719b-4ca5-a14c-453b69f5bfe8\",\n      \"label\": \"label-5227\",\n      \"height\": 115,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"652a4bf6-99cd-4b4c-a483-7a13fa8762a1\",\n      \"label\": \"label-5228\",\n      \"height\": 379,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"62a0f00a-8dfb-47ae-8f3a-64732c364368\",\n      \"label\": \"label-5229\",\n      \"height\": 338,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"f4276698-5250-4798-9cea-b66ef2535706\",\n      \"label\": \"label-5230\",\n      \"height\": 63,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"ad09eeab-5796-41db-9a65-94755f92a03b\",\n      \"label\": \"label-5231\",\n      \"height\": 230,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"7ff20dd8-4b93-40ff-9050-3e275f31b91c\",\n      \"label\": \"label-5232\",\n      \"height\": 448,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"ede98ba7-e774-4a1b-8fbb-1def501c6fa1\",\n      \"label\": \"label-5233\",\n      \"height\": 105,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"c674c442-8da2-41db-a017-9e3f8112160f\",\n      \"label\": \"label-5234\",\n      \"height\": 265,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"6e5464ed-78ae-4fb5-8916-b37c53ef45b2\",\n      \"label\": \"label-5235\",\n      \"height\": 399,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"1da1dee0-afb8-4ab4-96ba-db4061d0ca53\",\n      \"label\": \"label-5236\",\n      \"height\": 327,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"369437fe-d427-4a5a-bc4a-15a0491456db\",\n      \"label\": \"label-5237\",\n      \"height\": 437,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"9ee14ec8-91ee-4c46-93e4-26aa5d4db2cf\",\n      \"label\": \"label-5238\",\n      \"height\": 185,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"8b108601-134d-4265-875d-4e3fd177fe6b\",\n      \"label\": \"label-5239\",\n      \"height\": 131,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"9646e2c4-b009-402f-90c8-42be49db24fa\",\n      \"label\": \"label-5240\",\n      \"height\": 87,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"9ca5a0af-bf45-42f6-ae8c-0f648aae5875\",\n      \"label\": \"label-5241\",\n      \"height\": 235,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"7db977d2-df5d-4877-b041-76ea4f8fdd89\",\n      \"label\": \"label-5242\",\n      \"height\": 329,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"8bb5e07f-3b9d-4460-93d7-46e9eb4ed9aa\",\n      \"label\": \"label-5243\",\n      \"height\": 498,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"36e548b3-2d2d-4018-9b3f-f51571e81375\",\n      \"label\": \"label-5244\",\n      \"height\": 300,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"8cd9a64f-0f1d-490a-a62d-f52951a15636\",\n      \"label\": \"label-5245\",\n      \"height\": 157,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"dfb41b47-8207-4eec-8e4e-91b3513d8f79\",\n      \"label\": \"label-5246\",\n      \"height\": 210,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"351dff9d-32a9-4341-86ca-9949bf410edc\",\n      \"label\": \"label-5247\",\n      \"height\": 107,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"dd7a9129-939f-4beb-8d14-b47eee2721c2\",\n      \"label\": \"label-5248\",\n      \"height\": 448,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"6a5ae21b-6db7-45b0-8782-fd18928fa3b1\",\n      \"label\": \"label-5249\",\n      \"height\": 331,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"2b00b693-3ffc-44be-9a3e-f84db04c8e85\",\n      \"label\": \"label-5250\",\n      \"height\": 194,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"b5916586-223b-4196-837a-25e3797e26ef\",\n      \"label\": \"label-5251\",\n      \"height\": 250,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"56a1d4dd-1978-48eb-9c04-8c9bb369a17c\",\n      \"label\": \"label-5252\",\n      \"height\": 491,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"369be1da-b968-452a-8ebb-9307c3240599\",\n      \"label\": \"label-5253\",\n      \"height\": 480,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"c982e4c7-daf5-4f6c-891b-978b8259becf\",\n      \"label\": \"label-5254\",\n      \"height\": 273,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"4cee4f1e-f235-485b-8dee-e834e0eef803\",\n      \"label\": \"label-5255\",\n      \"height\": 188,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"d26c9bb9-5324-400c-af43-258eda798528\",\n      \"label\": \"label-5256\",\n      \"height\": 223,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"691e7724-082d-476c-a1e1-cf98dcfcc405\",\n      \"label\": \"label-5257\",\n      \"height\": 69,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"24804c53-9ba2-4e78-9b7b-2efd420c8d6b\",\n      \"label\": \"label-5258\",\n      \"height\": 54,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"237d09c1-58b8-4fb5-9df8-f8f49b79c448\",\n      \"label\": \"label-5259\",\n      \"height\": 464,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"de985cd6-efbd-43d4-a0a9-c2062bbe2c6e\",\n      \"label\": \"label-5260\",\n      \"height\": 444,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"1e1e9677-847b-4349-8eb0-c1cfd4cc0b5a\",\n      \"label\": \"label-5261\",\n      \"height\": 391,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"314ce323-b633-4afa-a281-299911225e2c\",\n      \"label\": \"label-5262\",\n      \"height\": 382,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"9b9846b7-3292-45e1-9645-804dfbf1f12f\",\n      \"label\": \"label-5263\",\n      \"height\": 378,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"5ed9c193-8932-4acb-a481-49535182b8eb\",\n      \"label\": \"label-5264\",\n      \"height\": 459,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"8139f6ac-7a32-4d04-9de4-6e82ce33c058\",\n      \"label\": \"label-5265\",\n      \"height\": 262,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"8d976e65-688a-4070-83c5-fcb5ecb97870\",\n      \"label\": \"label-5266\",\n      \"height\": 152,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"63021f11-1647-4829-be6a-ae5c211fc9fb\",\n      \"label\": \"label-5267\",\n      \"height\": 59,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"594fb5ab-c253-412f-a13f-880fa6798881\",\n      \"label\": \"label-5268\",\n      \"height\": 288,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"b06a48b4-88c0-4966-8c91-432e7aca5798\",\n      \"label\": \"label-5269\",\n      \"height\": 306,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"574883d4-f1ef-4276-9c6a-40acf6c3592f\",\n      \"label\": \"label-5270\",\n      \"height\": 304,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"3321b22a-6faa-482f-b520-4f53c08bbf74\",\n      \"label\": \"label-5271\",\n      \"height\": 529,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"912c4c4a-0643-4d3f-b902-b723fd3b63ca\",\n      \"label\": \"label-5272\",\n      \"height\": 501,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"f944594f-72a8-42f9-843e-c992c637135b\",\n      \"label\": \"label-5273\",\n      \"height\": 405,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"31e2df7c-9f36-4223-931d-c66a7975ff5f\",\n      \"label\": \"label-5274\",\n      \"height\": 462,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"94b41d3d-81a2-4a6c-9a91-1454499cf5bc\",\n      \"label\": \"label-5275\",\n      \"height\": 170,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"c2a11bfb-5fbb-4f00-961e-345e3454de4e\",\n      \"label\": \"label-5276\",\n      \"height\": 125,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"a74c3ae8-b0b0-45c4-ad5c-422e48580d69\",\n      \"label\": \"label-5277\",\n      \"height\": 100,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"a82cfced-1980-4ff7-bb71-5dfebe0eb50c\",\n      \"label\": \"label-5278\",\n      \"height\": 514,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"fbb23fe0-f53d-47c3-b171-ade5f4c75257\",\n      \"label\": \"label-5279\",\n      \"height\": 52,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"80970578-1b2d-4e93-92da-8e8cefb096eb\",\n      \"label\": \"label-5280\",\n      \"height\": 254,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"8ce85a52-bf24-4efc-a394-e63b1a153375\",\n      \"label\": \"label-5281\",\n      \"height\": 247,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"5fb05be4-9d90-4327-a4d8-f858b8deda8b\",\n      \"label\": \"label-5282\",\n      \"height\": 239,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"516cd304-b03a-4dc3-9c43-31cb0f0e2303\",\n      \"label\": \"label-5283\",\n      \"height\": 82,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"297a15d2-5ee1-46f4-b324-991e03c96c1c\",\n      \"label\": \"label-5284\",\n      \"height\": 214,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"a6f4c441-1e15-4b9c-b4e0-364c8e89d387\",\n      \"label\": \"label-5285\",\n      \"height\": 459,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"880a28d5-2361-4e66-9e54-270bbe4cf520\",\n      \"label\": \"label-5286\",\n      \"height\": 382,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"861c6fe6-e930-4e2e-9612-fe7c5a61f4f2\",\n      \"label\": \"label-5287\",\n      \"height\": 440,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"0a4544d3-f8eb-4175-92e0-b8f35fa9018d\",\n      \"label\": \"label-5288\",\n      \"height\": 237,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"bbfea698-e26d-42cc-a265-9ef1cf178d7a\",\n      \"label\": \"label-5289\",\n      \"height\": 512,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"d0a28340-5a1c-46bd-9ce2-6e5ab2be09bd\",\n      \"label\": \"label-5290\",\n      \"height\": 397,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"138283b7-35f2-4989-a758-9861eb6a69cc\",\n      \"label\": \"label-5291\",\n      \"height\": 337,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"41f56dda-fcbc-4940-b1ef-2849c718e479\",\n      \"label\": \"label-5292\",\n      \"height\": 226,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"90721132-80b7-4c90-b6b7-44e8cb41f1b9\",\n      \"label\": \"label-5293\",\n      \"height\": 444,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"63448ebd-d951-4eda-894f-8f27d0de7f62\",\n      \"label\": \"label-5294\",\n      \"height\": 134,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"18bed360-48ec-46b4-8074-1832f1f694fa\",\n      \"label\": \"label-5295\",\n      \"height\": 276,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"05b8163c-187e-4057-a633-db3234d333a4\",\n      \"label\": \"label-5296\",\n      \"height\": 530,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"809e5f84-c655-4cb9-bd59-f3b4175383e7\",\n      \"label\": \"label-5297\",\n      \"height\": 269,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"1678cc3b-36eb-4bf2-a65c-fcee5c7c1259\",\n      \"label\": \"label-5298\",\n      \"height\": 513,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"8699b2b3-20e3-4855-9c7e-24d73bf536eb\",\n      \"label\": \"label-5299\",\n      \"height\": 78,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"ade798a7-85f8-47fd-b918-6459c8163446\",\n      \"label\": \"label-5300\",\n      \"height\": 522,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"99ecdc47-c67d-4d23-a6b0-ccec2219c8ed\",\n      \"label\": \"label-5301\",\n      \"height\": 305,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"95f8e345-2e59-4e2b-b3cd-d2e0f7b599d3\",\n      \"label\": \"label-5302\",\n      \"height\": 423,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"87b93976-c903-4632-aa86-0e3b4a06c6b6\",\n      \"label\": \"label-5303\",\n      \"height\": 104,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"208fd629-1b09-49c8-affc-6a153fb9ac38\",\n      \"label\": \"label-5304\",\n      \"height\": 321,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"c6f2b509-5551-44e4-8987-9bfe7583a636\",\n      \"label\": \"label-5305\",\n      \"height\": 483,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"939b00a3-5a07-462a-99a3-16482f8f444c\",\n      \"label\": \"label-5306\",\n      \"height\": 438,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"c4a5f428-a300-4161-8e97-b7edf47bd08a\",\n      \"label\": \"label-5307\",\n      \"height\": 190,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"238eec00-dc09-4376-af69-4cabfa20b1a7\",\n      \"label\": \"label-5308\",\n      \"height\": 335,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"93b9cd37-01cd-4101-b05d-6a4fd5d2183b\",\n      \"label\": \"label-5309\",\n      \"height\": 449,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"6c440331-d768-4b3e-a7d7-9192cfe978ad\",\n      \"label\": \"label-5310\",\n      \"height\": 206,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"d43083a6-08b6-4a47-a78e-ccbc1d002a90\",\n      \"label\": \"label-5311\",\n      \"height\": 521,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"7105c7d4-c288-4d41-9fa9-29a6a8b9a189\",\n      \"label\": \"label-5312\",\n      \"height\": 506,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"0b4ce3ef-cf46-4e83-b870-90a429a986ec\",\n      \"label\": \"label-5313\",\n      \"height\": 374,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"a1832e85-5dcc-49fc-8b18-15f9a1079a55\",\n      \"label\": \"label-5314\",\n      \"height\": 506,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"26a4e13a-5ae2-4cb9-bf32-4f9065764d41\",\n      \"label\": \"label-5315\",\n      \"height\": 314,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"1a51d890-8f1c-406a-ba29-d5713b7c58fb\",\n      \"label\": \"label-5316\",\n      \"height\": 184,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"add3cd62-e9ae-4872-a166-30dcd717ffdf\",\n      \"label\": \"label-5317\",\n      \"height\": 146,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"b84c1921-764f-429f-a80a-980a5433444d\",\n      \"label\": \"label-5318\",\n      \"height\": 149,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"3f4368fb-cbf1-460e-bd0e-5189c918b211\",\n      \"label\": \"label-5319\",\n      \"height\": 477,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"8b29a66e-d512-434d-a0c1-1c435c8efe06\",\n      \"label\": \"label-5320\",\n      \"height\": 62,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"8b86bbdf-4027-48e1-baa3-9c2118cb91b9\",\n      \"label\": \"label-5321\",\n      \"height\": 408,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"87668c91-79d2-4e3b-9f45-f80e1f58fcfd\",\n      \"label\": \"label-5322\",\n      \"height\": 80,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"1e864186-30f4-4125-8203-17af778f30ac\",\n      \"label\": \"label-5323\",\n      \"height\": 225,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"dfe17ca3-0068-40f1-a023-5f293107b910\",\n      \"label\": \"label-5324\",\n      \"height\": 475,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"2a52cff0-69c6-40ef-8c4f-22147d2f3dcb\",\n      \"label\": \"label-5325\",\n      \"height\": 320,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"0a263191-9395-448d-a83e-fd4a48f9d672\",\n      \"label\": \"label-5326\",\n      \"height\": 372,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"284c2c63-404e-4c19-993f-7fcf86ba90c9\",\n      \"label\": \"label-5327\",\n      \"height\": 283,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"05313e40-372d-4215-8a2d-8a03fab5b332\",\n      \"label\": \"label-5328\",\n      \"height\": 458,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"0b300cc0-f185-4ce6-9412-228eb45ba5c0\",\n      \"label\": \"label-5329\",\n      \"height\": 371,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"12797940-3a1f-4410-a425-3cd4710d2fb5\",\n      \"label\": \"label-5330\",\n      \"height\": 376,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"8063c2e8-e51f-48ed-bdd2-c6545ddeb914\",\n      \"label\": \"label-5331\",\n      \"height\": 332,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"b5d3ed4d-7070-4ac8-9775-1675d2afd179\",\n      \"label\": \"label-5332\",\n      \"height\": 39,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"02ce8237-63b9-4b28-b5db-1f7380836a2e\",\n      \"label\": \"label-5333\",\n      \"height\": 136,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"51c4d387-9174-4dc7-9d4a-299f90403f48\",\n      \"label\": \"label-5334\",\n      \"height\": 522,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"fdf161a4-1db7-4dbf-94d7-7b39980b62a8\",\n      \"label\": \"label-5335\",\n      \"height\": 181,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"344ad2fa-c429-4abf-ad67-317684a98008\",\n      \"label\": \"label-5336\",\n      \"height\": 317,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"1fdc8784-d14f-4a1b-908c-d00496218424\",\n      \"label\": \"label-5337\",\n      \"height\": 281,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"27bedc56-ea55-4ad4-a2b6-37bd543d428b\",\n      \"label\": \"label-5338\",\n      \"height\": 439,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"9fbae5de-7b4c-40a2-9def-4cd75f7b1957\",\n      \"label\": \"label-5339\",\n      \"height\": 36,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"3d317c8c-75f1-4762-aed0-e0eaa86c6b1c\",\n      \"label\": \"label-5340\",\n      \"height\": 176,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"54a8bd4e-3313-48c7-a3df-abff5902dec4\",\n      \"label\": \"label-5341\",\n      \"height\": 526,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"d053be9e-4f21-428e-b98b-1ad7f2b0144d\",\n      \"label\": \"label-5342\",\n      \"height\": 348,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"d86c2ad7-126b-41e5-9da5-eac348dc0029\",\n      \"label\": \"label-5343\",\n      \"height\": 88,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"f4075ea1-360e-45d7-8b56-c824237d98be\",\n      \"label\": \"label-5344\",\n      \"height\": 520,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"4785a940-46fb-4aeb-af40-0657415d62a3\",\n      \"label\": \"label-5345\",\n      \"height\": 277,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"d99b912b-2f68-4126-aa30-2229163befed\",\n      \"label\": \"label-5346\",\n      \"height\": 235,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"f07e46a2-8fd2-4dbd-a4db-b43d72c5d7cd\",\n      \"label\": \"label-5347\",\n      \"height\": 222,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"a65ca9cd-3993-491f-a23a-836170859f16\",\n      \"label\": \"label-5348\",\n      \"height\": 277,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"37ce1e8b-f790-4d6d-9785-84ae9cb8518c\",\n      \"label\": \"label-5349\",\n      \"height\": 362,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"74054e1b-3314-42c4-8922-7d88294b5538\",\n      \"label\": \"label-5350\",\n      \"height\": 353,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"413d4778-401c-4554-858c-98c58b790962\",\n      \"label\": \"label-5351\",\n      \"height\": 80,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"984ffed5-0d34-4487-8fe7-d2ec590c570e\",\n      \"label\": \"label-5352\",\n      \"height\": 89,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"5c4cca9d-def0-406e-9bd8-efc4e7ee75f5\",\n      \"label\": \"label-5353\",\n      \"height\": 139,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"7fed1ce2-b633-4e8c-a1a4-7741aa02db30\",\n      \"label\": \"label-5354\",\n      \"height\": 284,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"4ae2c9a3-df30-43dd-b4de-7f4c9a5f4e11\",\n      \"label\": \"label-5355\",\n      \"height\": 222,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"13fce413-783d-4683-80d7-c1fe40c7a700\",\n      \"label\": \"label-5356\",\n      \"height\": 72,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"4ec630ef-916d-4a5d-84e4-354bc48cf7d3\",\n      \"label\": \"label-5357\",\n      \"height\": 202,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"f9244184-3e7e-426f-ad3d-fbd92d511011\",\n      \"label\": \"label-5358\",\n      \"height\": 387,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"51b07c7c-c621-4bda-9f23-cb8e267918b8\",\n      \"label\": \"label-5359\",\n      \"height\": 411,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"ead2ec1f-70e9-4417-b399-c55667a08496\",\n      \"label\": \"label-5360\",\n      \"height\": 228,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"332c0254-a7da-4c7a-bd2e-81581254ce27\",\n      \"label\": \"label-5361\",\n      \"height\": 188,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"26696d48-17fd-4265-be4d-e2cdd3422f90\",\n      \"label\": \"label-5362\",\n      \"height\": 474,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"8f200b3d-4134-4449-a40e-bb0ec1fb49e9\",\n      \"label\": \"label-5363\",\n      \"height\": 119,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"08b277ff-c524-4e88-aee0-3777d2d80c23\",\n      \"label\": \"label-5364\",\n      \"height\": 460,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"0e90562b-dd4f-4016-bb9e-0a8c5cfb3c12\",\n      \"label\": \"label-5365\",\n      \"height\": 299,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"96ba890b-8e30-499c-a28b-b8da87735406\",\n      \"label\": \"label-5366\",\n      \"height\": 40,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"704a5be8-b2d3-4fa1-b263-7272c7be4d3e\",\n      \"label\": \"label-5367\",\n      \"height\": 40,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"11a04081-8d67-4b22-b67b-7ac9acd6d8e2\",\n      \"label\": \"label-5368\",\n      \"height\": 366,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"6ac97c78-b810-4ff9-ade7-1484fe169af7\",\n      \"label\": \"label-5369\",\n      \"height\": 353,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"09e9f073-0886-401d-88c7-06fefb05e771\",\n      \"label\": \"label-5370\",\n      \"height\": 192,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"477a5ff0-bf16-46eb-a3c1-5d69d4b32340\",\n      \"label\": \"label-5371\",\n      \"height\": 257,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"fa122807-08df-4eb7-a0e3-b331aecda5e9\",\n      \"label\": \"label-5372\",\n      \"height\": 308,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"fab7b878-6c95-4101-8790-c3118b002070\",\n      \"label\": \"label-5373\",\n      \"height\": 372,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"86509bf4-256e-4cfd-8d51-ea166d98de06\",\n      \"label\": \"label-5374\",\n      \"height\": 191,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"f23fdca6-c900-4172-adc6-56a869382399\",\n      \"label\": \"label-5375\",\n      \"height\": 297,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"0ed88cb5-d62a-4f74-b89d-ef09289ed83b\",\n      \"label\": \"label-5376\",\n      \"height\": 459,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"24ee186e-b12d-4a99-9bda-0606ae7cf5b6\",\n      \"label\": \"label-5377\",\n      \"height\": 328,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"0fd7874e-d502-48c9-9f76-6223abe42808\",\n      \"label\": \"label-5378\",\n      \"height\": 477,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"1bfd7ab0-a282-4271-accc-5c3cc5404a3a\",\n      \"label\": \"label-5379\",\n      \"height\": 316,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"722296c8-124f-480e-8a83-83068d291f2a\",\n      \"label\": \"label-5380\",\n      \"height\": 84,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"d6e53066-0241-4c9c-a364-c3e4a70e59c4\",\n      \"label\": \"label-5381\",\n      \"height\": 197,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"6d07e2c7-4515-414d-80c5-cc33c725c48e\",\n      \"label\": \"label-5382\",\n      \"height\": 448,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"f327c6aa-49c5-4581-9f08-3378699d50b6\",\n      \"label\": \"label-5383\",\n      \"height\": 283,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"7d3e61ed-3b8a-4d2e-a547-87a038e61453\",\n      \"label\": \"label-5384\",\n      \"height\": 438,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"4d82573f-8d0d-4c71-8887-091aa08ea6ca\",\n      \"label\": \"label-5385\",\n      \"height\": 92,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"a05e7d3e-df9f-4c84-90b6-266d5fa1fcd8\",\n      \"label\": \"label-5386\",\n      \"height\": 84,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"cfbd3c43-9ecf-4b8e-a348-30a3b7f05ab4\",\n      \"label\": \"label-5387\",\n      \"height\": 346,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"e7218d73-9d1c-4118-9a4d-c0c9462f973b\",\n      \"label\": \"label-5388\",\n      \"height\": 173,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"3a88b3be-5f9f-48a8-909f-e157b00c49ea\",\n      \"label\": \"label-5389\",\n      \"height\": 348,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"01de0657-427d-4bb6-ad67-2e32aa501ddb\",\n      \"label\": \"label-5390\",\n      \"height\": 134,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"f4291398-b681-4624-855b-5c2259071523\",\n      \"label\": \"label-5391\",\n      \"height\": 185,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"aa72f6b0-976f-4571-9b39-04c8edf520b9\",\n      \"label\": \"label-5392\",\n      \"height\": 228,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"b1af682a-630a-4ac5-9ebe-6150270c8607\",\n      \"label\": \"label-5393\",\n      \"height\": 466,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"bc4017a6-5d8b-426b-b16c-f7cbdf521d3f\",\n      \"label\": \"label-5394\",\n      \"height\": 213,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"1d4345fe-fcde-4e47-8529-5cf473a9c523\",\n      \"label\": \"label-5395\",\n      \"height\": 174,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"c4c4ee75-f369-40ca-8e3c-33359e70e2c5\",\n      \"label\": \"label-5396\",\n      \"height\": 335,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"3c355d4f-f3c2-4ad7-9452-d54827281a6e\",\n      \"label\": \"label-5397\",\n      \"height\": 33,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"1acc2497-c87e-4b4d-85d4-9470e69da6d7\",\n      \"label\": \"label-5398\",\n      \"height\": 444,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"7b9da891-4152-4933-bcd4-d31629825ecb\",\n      \"label\": \"label-5399\",\n      \"height\": 473,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"5d9001e7-24de-4a2a-be6e-a8f7b9b7ddf8\",\n      \"label\": \"label-5400\",\n      \"height\": 70,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"4aeb954e-23df-40a3-88ec-a2990c866eee\",\n      \"label\": \"label-5401\",\n      \"height\": 196,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"359a608f-2fae-4e45-8c17-354b12554198\",\n      \"label\": \"label-5402\",\n      \"height\": 315,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"a4d743f8-273f-4a98-a90b-2dd07106ec29\",\n      \"label\": \"label-5403\",\n      \"height\": 390,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"f42c5d77-6cad-4258-9205-722cee5627dd\",\n      \"label\": \"label-5404\",\n      \"height\": 340,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"139e1538-9857-455a-a6ec-b7c4f9e61a4e\",\n      \"label\": \"label-5405\",\n      \"height\": 241,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"87a49091-f323-48bb-b92e-02ea182be512\",\n      \"label\": \"label-5406\",\n      \"height\": 378,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"8215378d-5bcd-4c80-99d0-0f5fcdb01f46\",\n      \"label\": \"label-5407\",\n      \"height\": 203,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"ca1a5852-6978-4c28-8204-dbf42b7b6170\",\n      \"label\": \"label-5408\",\n      \"height\": 158,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"42eb11f1-d872-4003-8478-11307f710b89\",\n      \"label\": \"label-5409\",\n      \"height\": 507,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"6242deef-8128-4579-8323-b80f513661c0\",\n      \"label\": \"label-5410\",\n      \"height\": 315,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"250940e5-a06b-4760-b8b0-8b5742bdf6ed\",\n      \"label\": \"label-5411\",\n      \"height\": 215,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"6ea16271-8b5a-464a-8079-fce05a350b44\",\n      \"label\": \"label-5412\",\n      \"height\": 105,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"fca13ba5-df0c-4ffd-9361-060b2531ab00\",\n      \"label\": \"label-5413\",\n      \"height\": 402,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"f73ce2c8-4829-4d2a-b972-58c25bdfb412\",\n      \"label\": \"label-5414\",\n      \"height\": 49,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"2ac84376-b8ab-401d-9149-b62ba9fbcd8b\",\n      \"label\": \"label-5415\",\n      \"height\": 485,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"ddd89255-3196-4c38-b4cc-3be8760947ab\",\n      \"label\": \"label-5416\",\n      \"height\": 143,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"9ae1bac5-9f77-4f20-bae6-186591de18f5\",\n      \"label\": \"label-5417\",\n      \"height\": 63,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"774ca122-8a6d-4277-9ffe-70ba334bef1c\",\n      \"label\": \"label-5418\",\n      \"height\": 72,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"d86e4081-b638-42c3-b39f-9b379e20ba0b\",\n      \"label\": \"label-5419\",\n      \"height\": 269,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"6f52fdfe-eb59-4b9c-a6cd-c0b4823f0ad7\",\n      \"label\": \"label-5420\",\n      \"height\": 244,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"c3c2d080-ad64-4ed7-bb8f-dd462f3b4ad5\",\n      \"label\": \"label-5421\",\n      \"height\": 195,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"2aa6aae5-11e9-479e-bad5-efb0c5013c99\",\n      \"label\": \"label-5422\",\n      \"height\": 525,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"24cef6ef-c553-4b68-ab07-9de9cb388695\",\n      \"label\": \"label-5423\",\n      \"height\": 37,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"62342c24-88f9-46a0-b721-6e06c8992f56\",\n      \"label\": \"label-5424\",\n      \"height\": 126,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"c1636af5-0f99-474b-b200-aa576889e0c4\",\n      \"label\": \"label-5425\",\n      \"height\": 377,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"9eee9833-bd50-4a9b-9681-e809a289e19b\",\n      \"label\": \"label-5426\",\n      \"height\": 387,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"9c9cbaee-9910-41b1-a479-181d8b4efe0e\",\n      \"label\": \"label-5427\",\n      \"height\": 187,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"22b0d205-47f8-42ae-8720-049526cb1538\",\n      \"label\": \"label-5428\",\n      \"height\": 365,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"18b6a30b-4ba0-4529-8978-a3ad304739e6\",\n      \"label\": \"label-5429\",\n      \"height\": 164,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"8df2b212-a22d-453e-b667-dc57cbf02676\",\n      \"label\": \"label-5430\",\n      \"height\": 173,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"cb556eb5-b170-4608-872e-68b81c35fcec\",\n      \"label\": \"label-5431\",\n      \"height\": 132,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"cd580788-c2b0-4c5a-a3a0-65c4ea7b06e0\",\n      \"label\": \"label-5432\",\n      \"height\": 310,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"2d204459-1a30-41d0-8be8-68d15e8b8178\",\n      \"label\": \"label-5433\",\n      \"height\": 362,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"667479ce-3745-43d4-918c-2d230de9d338\",\n      \"label\": \"label-5434\",\n      \"height\": 384,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"d55455bc-a9d5-49fd-b92e-636c8a8875f4\",\n      \"label\": \"label-5435\",\n      \"height\": 417,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"5980a695-cbeb-4c7d-a737-4c9b58494f3b\",\n      \"label\": \"label-5436\",\n      \"height\": 210,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"e7f065a6-edb7-4353-8d4c-6e7ea56945c0\",\n      \"label\": \"label-5437\",\n      \"height\": 516,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"40bc9881-416f-4930-ad97-e51cea1d3b4e\",\n      \"label\": \"label-5438\",\n      \"height\": 155,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"c468aad3-cbbe-4a89-87dd-616d18e14f33\",\n      \"label\": \"label-5439\",\n      \"height\": 189,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"4a872d0a-443b-4072-836e-f22064989a6e\",\n      \"label\": \"label-5440\",\n      \"height\": 233,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"16cb1ded-b4de-455f-bcab-36f8bfcf3355\",\n      \"label\": \"label-5441\",\n      \"height\": 371,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"17cc3835-c4f0-4422-936c-1f07d0d2e263\",\n      \"label\": \"label-5442\",\n      \"height\": 527,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"0212bb5a-c98f-4b8c-93bd-3a2915afb7b5\",\n      \"label\": \"label-5443\",\n      \"height\": 469,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"84ac21db-c0e4-41b2-8599-2aa6f90f1aa1\",\n      \"label\": \"label-5444\",\n      \"height\": 287,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"64624d2e-0dd4-4d51-b289-49d57acd0f35\",\n      \"label\": \"label-5445\",\n      \"height\": 378,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"50d1998d-fee8-4e68-aa12-75c174ad6227\",\n      \"label\": \"label-5446\",\n      \"height\": 457,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"2f89e395-0488-47cb-b802-430702459b6c\",\n      \"label\": \"label-5447\",\n      \"height\": 278,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"5a15580d-5d37-4281-a91c-3b19d4a114fe\",\n      \"label\": \"label-5448\",\n      \"height\": 361,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"fbd6a943-2437-476c-8ca3-0a49f0564af1\",\n      \"label\": \"label-5449\",\n      \"height\": 410,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"1979c357-94ee-4b71-8d73-4f45baf66c43\",\n      \"label\": \"label-5450\",\n      \"height\": 526,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"f3486636-d484-4df2-993c-725837a8f03b\",\n      \"label\": \"label-5451\",\n      \"height\": 283,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"29d87325-6526-4910-9864-688fa9a9cd4f\",\n      \"label\": \"label-5452\",\n      \"height\": 499,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"4745fc9d-5e2d-441d-89ad-296b7fe0cca0\",\n      \"label\": \"label-5453\",\n      \"height\": 206,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"788a6bc8-e328-4214-b72d-afa5f2f38a26\",\n      \"label\": \"label-5454\",\n      \"height\": 511,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"337ec070-b058-43fc-9495-dde24703b2d8\",\n      \"label\": \"label-5455\",\n      \"height\": 520,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"58996b06-b2d8-46fa-a018-58fe81750b42\",\n      \"label\": \"label-5456\",\n      \"height\": 206,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"f950f468-be4f-4c6e-bb52-72e6d16c2076\",\n      \"label\": \"label-5457\",\n      \"height\": 248,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"87934f8f-fca8-4c9a-9050-9cb14ad90064\",\n      \"label\": \"label-5458\",\n      \"height\": 289,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"8b992725-d8d9-4f9d-8b3b-bc150b81f818\",\n      \"label\": \"label-5459\",\n      \"height\": 356,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"343c39db-8b05-4b93-a4ef-cd283f55aba0\",\n      \"label\": \"label-5460\",\n      \"height\": 525,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"4a7456c7-b662-4345-b54f-b4c433719ede\",\n      \"label\": \"label-5461\",\n      \"height\": 61,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"3a153962-fa40-4898-9360-f329132c7670\",\n      \"label\": \"label-5462\",\n      \"height\": 74,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"b5d62857-6867-47a6-a953-af56e69bd2c3\",\n      \"label\": \"label-5463\",\n      \"height\": 222,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"c4cbacc2-f913-4530-bbb7-c88f4321fc1f\",\n      \"label\": \"label-5464\",\n      \"height\": 418,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"3709787b-9e33-4d02-8afb-696cb6c60be7\",\n      \"label\": \"label-5465\",\n      \"height\": 376,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"c566d528-7863-466c-a209-fadf0a239cab\",\n      \"label\": \"label-5466\",\n      \"height\": 489,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"3d8252d9-d3ea-4996-bc6d-63d7453ce121\",\n      \"label\": \"label-5467\",\n      \"height\": 228,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"0f62e32b-a1f5-44e9-b1d5-1dcfa4a3d0b5\",\n      \"label\": \"label-5468\",\n      \"height\": 283,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"6b1334fa-047b-4dce-8f10-e7baf8eaf269\",\n      \"label\": \"label-5469\",\n      \"height\": 410,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"530d3761-0706-4c19-9514-e2756b252395\",\n      \"label\": \"label-5470\",\n      \"height\": 297,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"637acbf9-1eb2-4853-8e21-6db942f4e8b1\",\n      \"label\": \"label-5471\",\n      \"height\": 429,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"3e9bf36b-5399-440a-b75c-3ec9c850eb77\",\n      \"label\": \"label-5472\",\n      \"height\": 312,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"c421bfca-697b-4845-8742-52b8734b229c\",\n      \"label\": \"label-5473\",\n      \"height\": 310,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"e9a09358-2980-4604-b6a4-ba2ff0ae93ae\",\n      \"label\": \"label-5474\",\n      \"height\": 459,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"ef3a5707-7c7b-430a-b2e2-67a2d23de064\",\n      \"label\": \"label-5475\",\n      \"height\": 322,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"af1aa2bb-7f35-44c7-8bc1-6c48944b5dc0\",\n      \"label\": \"label-5476\",\n      \"height\": 271,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"c0c951f8-8f0b-4448-8e95-f8b3ea150dc1\",\n      \"label\": \"label-5477\",\n      \"height\": 109,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"2729222c-9ebd-4384-b771-743fa018ada0\",\n      \"label\": \"label-5478\",\n      \"height\": 144,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"ac1ca49f-7a2d-4b4e-aee9-03111f469ff0\",\n      \"label\": \"label-5479\",\n      \"height\": 357,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"4783ef43-f54d-4913-811a-72263846b5f0\",\n      \"label\": \"label-5480\",\n      \"height\": 171,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"316b8bb5-557f-43a2-bd78-70ab98c1160a\",\n      \"label\": \"label-5481\",\n      \"height\": 168,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"25c85444-ffd6-4a97-bc1d-0a293e13e98b\",\n      \"label\": \"label-5482\",\n      \"height\": 432,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"7b8049a1-04aa-4426-95b8-eb01d9694223\",\n      \"label\": \"label-5483\",\n      \"height\": 324,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"126d44c4-2ede-4246-89ee-ac21b15d629a\",\n      \"label\": \"label-5484\",\n      \"height\": 174,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"d8d1635f-b34d-4ad2-9447-f1007b9e31e4\",\n      \"label\": \"label-5485\",\n      \"height\": 66,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"7e244762-e03b-44d3-99fa-7f85369a873d\",\n      \"label\": \"label-5486\",\n      \"height\": 419,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"593728b4-9661-40d1-95a0-b805aaadc620\",\n      \"label\": \"label-5487\",\n      \"height\": 32,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"98306eae-1140-4dcb-81e7-4936863eaabb\",\n      \"label\": \"label-5488\",\n      \"height\": 114,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"77514d7a-3fb6-4b31-a1ba-d42ea8961ff6\",\n      \"label\": \"label-5489\",\n      \"height\": 134,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"a37d5e88-39b6-437f-a72b-52e8acdf38bf\",\n      \"label\": \"label-5490\",\n      \"height\": 189,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"017e3f55-eff7-4e54-a0f9-9aaf72abaf3e\",\n      \"label\": \"label-5491\",\n      \"height\": 104,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"c2968672-4100-4c8e-b980-af3e461cf093\",\n      \"label\": \"label-5492\",\n      \"height\": 192,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"4c612fb2-397a-41c7-a5a9-b3c6b2d7ca0e\",\n      \"label\": \"label-5493\",\n      \"height\": 263,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"8648d7e4-913b-4c09-b792-b2e827d5711e\",\n      \"label\": \"label-5494\",\n      \"height\": 48,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"827b82d4-66f7-4ce8-b8c7-3653b6ffc2db\",\n      \"label\": \"label-5495\",\n      \"height\": 301,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"d5783946-0336-4fd7-afb6-357679edc9fb\",\n      \"label\": \"label-5496\",\n      \"height\": 499,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"55df7325-82d1-4dfe-93d6-d7b7ade8161a\",\n      \"label\": \"label-5497\",\n      \"height\": 120,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"0c8d569f-883f-4053-bfb2-eb2dd58a6680\",\n      \"label\": \"label-5498\",\n      \"height\": 426,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"8fd373c1-7bad-4426-8653-2604a9828292\",\n      \"label\": \"label-5499\",\n      \"height\": 129,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"2cad66e4-a1ef-456b-a490-170110ba1d65\",\n      \"label\": \"label-5500\",\n      \"height\": 241,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"30cdf330-bf3e-4280-8f3e-3c98a9716439\",\n      \"label\": \"label-5501\",\n      \"height\": 509,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"129e58a4-bee2-4050-83ce-f592be279b9c\",\n      \"label\": \"label-5502\",\n      \"height\": 419,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"151f492d-6388-44aa-a413-b5c1b56d3a7b\",\n      \"label\": \"label-5503\",\n      \"height\": 240,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"a5f77366-36dc-47d1-8f02-87fda5238481\",\n      \"label\": \"label-5504\",\n      \"height\": 49,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"e5ed4d2c-7846-4417-9f67-7cd35009e735\",\n      \"label\": \"label-5505\",\n      \"height\": 253,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"404eb67d-6b6c-4914-afd2-a96e08fcdd32\",\n      \"label\": \"label-5506\",\n      \"height\": 349,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"99d64607-5fc6-4085-98d7-7af915ab173e\",\n      \"label\": \"label-5507\",\n      \"height\": 78,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"9646a888-974b-484f-b3d7-0b47dfd7257b\",\n      \"label\": \"label-5508\",\n      \"height\": 86,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"6f08fe16-b040-4c3c-aa67-bc16c43020a6\",\n      \"label\": \"label-5509\",\n      \"height\": 263,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"7f7d299a-65ee-4574-ac31-61473767d214\",\n      \"label\": \"label-5510\",\n      \"height\": 524,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"28cbf630-b444-4b08-bda5-66911e7b2e0b\",\n      \"label\": \"label-5511\",\n      \"height\": 221,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"ac72d163-9fff-44f9-a0a9-3a0c01d38aef\",\n      \"label\": \"label-5512\",\n      \"height\": 494,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"e4252681-83a4-4e41-bb6d-4f7795095009\",\n      \"label\": \"label-5513\",\n      \"height\": 467,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"83385c12-a5d6-4075-ba4f-adee2f7932ef\",\n      \"label\": \"label-5514\",\n      \"height\": 186,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"0121b602-c247-493e-9195-cf75683b5bdd\",\n      \"label\": \"label-5515\",\n      \"height\": 43,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"8718d64f-9a5d-4f97-bfe0-6caa2f9777de\",\n      \"label\": \"label-5516\",\n      \"height\": 347,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"5ca9fe17-5d5e-4ae7-a593-776b966c6fb7\",\n      \"label\": \"label-5517\",\n      \"height\": 439,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"b4fc24a8-79e7-4b14-bee4-03af561ddb69\",\n      \"label\": \"label-5518\",\n      \"height\": 462,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"8b2b942c-80af-4e83-b9c7-100c24de461a\",\n      \"label\": \"label-5519\",\n      \"height\": 88,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"7182f7ea-fa5c-4278-861c-1430a340fbcf\",\n      \"label\": \"label-5520\",\n      \"height\": 439,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"6dc585f2-9f88-4280-8c10-faf2b1891d86\",\n      \"label\": \"label-5521\",\n      \"height\": 408,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"91d4d022-ce6f-4740-9298-0f2965fd6d7a\",\n      \"label\": \"label-5522\",\n      \"height\": 270,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"32a2cee7-3d4b-4234-afff-6b9221bd350a\",\n      \"label\": \"label-5523\",\n      \"height\": 138,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"6704f37f-5dcc-492f-b90b-c430444f2797\",\n      \"label\": \"label-5524\",\n      \"height\": 353,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"aa702dd4-0a5c-4387-ac2b-30e6967714a9\",\n      \"label\": \"label-5525\",\n      \"height\": 157,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"2160417f-5bcb-4e90-9850-6348e7b341b8\",\n      \"label\": \"label-5526\",\n      \"height\": 384,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"cb319661-95e7-4922-9c27-079b54b48a1e\",\n      \"label\": \"label-5527\",\n      \"height\": 295,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"cd8cec50-5645-4aa8-95bd-edf9d64a94f9\",\n      \"label\": \"label-5528\",\n      \"height\": 219,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"8eccc2c5-41fd-4947-960d-a0538b5292ef\",\n      \"label\": \"label-5529\",\n      \"height\": 175,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"3b816d7c-a599-4e91-9734-b61619492cef\",\n      \"label\": \"label-5530\",\n      \"height\": 473,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"87016663-3787-4c2b-bf75-efaff945a8fb\",\n      \"label\": \"label-5531\",\n      \"height\": 517,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"1e8331a0-2909-4ada-a675-11f8c78f868c\",\n      \"label\": \"label-5532\",\n      \"height\": 63,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"d9a0b674-0139-4f60-b5e5-696f436bd248\",\n      \"label\": \"label-5533\",\n      \"height\": 360,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"8cb5b3ac-d441-43dd-8eef-5a80c897e870\",\n      \"label\": \"label-5534\",\n      \"height\": 479,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"684167db-6d87-4f66-aa92-f68aa7901c16\",\n      \"label\": \"label-5535\",\n      \"height\": 90,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"9b8a2ef9-2f8d-4934-a07a-04fd638274e6\",\n      \"label\": \"label-5536\",\n      \"height\": 278,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"8ca0983d-99db-4ff9-a25f-fc3e1e9aea5d\",\n      \"label\": \"label-5537\",\n      \"height\": 264,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"e402ff94-f0ac-4e1f-bd8f-9484ff9b20e2\",\n      \"label\": \"label-5538\",\n      \"height\": 263,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"341d4453-7a45-413d-9025-aa09d2c183a0\",\n      \"label\": \"label-5539\",\n      \"height\": 415,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"7e4dee5e-cb05-4deb-9f1c-ac57f1a94b68\",\n      \"label\": \"label-5540\",\n      \"height\": 301,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"a8252752-afc3-4630-9732-e935804f8db1\",\n      \"label\": \"label-5541\",\n      \"height\": 147,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"a6c2bacc-fc81-438c-ba4a-a930ce22f30b\",\n      \"label\": \"label-5542\",\n      \"height\": 419,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"626aa759-4945-4f50-a21f-2d7711311937\",\n      \"label\": \"label-5543\",\n      \"height\": 72,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"71e99293-e732-424a-ac37-6c69d479c74b\",\n      \"label\": \"label-5544\",\n      \"height\": 341,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"7bccff69-b0ee-4c08-8504-3470afd6976a\",\n      \"label\": \"label-5545\",\n      \"height\": 86,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"d14cddd1-7825-4b85-afe8-d45cfd0e56d6\",\n      \"label\": \"label-5546\",\n      \"height\": 117,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"97482ec6-9428-4f23-8a91-731acad6cbae\",\n      \"label\": \"label-5547\",\n      \"height\": 166,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"1842750c-f19e-4678-b07f-f9ef0964f884\",\n      \"label\": \"label-5548\",\n      \"height\": 250,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"8785a35f-14d9-4866-8451-459b3a3a5bab\",\n      \"label\": \"label-5549\",\n      \"height\": 125,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"1592ce24-95d3-4312-984c-9dcfe8aa5b6c\",\n      \"label\": \"label-5550\",\n      \"height\": 232,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"e019c8f4-43aa-4d3b-911e-925caed6f780\",\n      \"label\": \"label-5551\",\n      \"height\": 241,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"e1348672-6e48-4b76-978a-ffff3c4b2657\",\n      \"label\": \"label-5552\",\n      \"height\": 190,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"e07373a3-e5d4-4262-9046-560d916e937f\",\n      \"label\": \"label-5553\",\n      \"height\": 391,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"0fff7d53-6a4d-4482-b86d-e99438abd98a\",\n      \"label\": \"label-5554\",\n      \"height\": 320,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"5b7a8925-c393-4b4c-83c0-98cbb618c495\",\n      \"label\": \"label-5555\",\n      \"height\": 165,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"7f2dace1-0e1c-4a7e-ae71-841cb9a89d1f\",\n      \"label\": \"label-5556\",\n      \"height\": 351,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"7ac7ed38-9f63-4189-b41d-a85ff6eb1c43\",\n      \"label\": \"label-5557\",\n      \"height\": 253,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"138be719-8040-4d08-b250-824623878080\",\n      \"label\": \"label-5558\",\n      \"height\": 344,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"eb8bf953-1b72-43fc-8514-2f4cd930f78c\",\n      \"label\": \"label-5559\",\n      \"height\": 136,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"a5e4ff85-bd02-4359-b9c1-a1e75bf980d4\",\n      \"label\": \"label-5560\",\n      \"height\": 50,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"a988b38f-b91c-4d10-8c88-32e15019db88\",\n      \"label\": \"label-5561\",\n      \"height\": 121,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"d238e825-fa13-4bcd-b0dc-acf0aa74b4e7\",\n      \"label\": \"label-5562\",\n      \"height\": 204,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"ba3e725c-c1a1-498a-bbfe-8e2f9a1f2762\",\n      \"label\": \"label-5563\",\n      \"height\": 173,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"d076a158-9749-49dc-913d-cd2cabe47102\",\n      \"label\": \"label-5564\",\n      \"height\": 36,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"54e0af13-5427-4c46-a1d0-607746029cf8\",\n      \"label\": \"label-5565\",\n      \"height\": 106,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"3f930d0f-99b5-4189-98d9-1bc266bfa25c\",\n      \"label\": \"label-5566\",\n      \"height\": 367,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"e898139f-651d-4410-8d81-1302cfcede73\",\n      \"label\": \"label-5567\",\n      \"height\": 376,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"ea730010-818d-4c05-85c4-bfd27206f2b1\",\n      \"label\": \"label-5568\",\n      \"height\": 116,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"023dc137-9124-4b93-bade-c9038419705a\",\n      \"label\": \"label-5569\",\n      \"height\": 453,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"b0145a18-1c08-4a0d-8a5c-9713cb24e838\",\n      \"label\": \"label-5570\",\n      \"height\": 303,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"52f78aab-4362-4f05-95ce-1b71dcc13dbb\",\n      \"label\": \"label-5571\",\n      \"height\": 185,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"13afbbc1-5d24-4071-88bd-33a801f7b359\",\n      \"label\": \"label-5572\",\n      \"height\": 290,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"2598fb68-d295-4893-8e7d-c2c0f004bc28\",\n      \"label\": \"label-5573\",\n      \"height\": 484,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"114fee97-9c04-4643-a68d-1ba50143e69d\",\n      \"label\": \"label-5574\",\n      \"height\": 66,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"0da0d036-0713-4eb5-b1c5-be2c0eeff6ee\",\n      \"label\": \"label-5575\",\n      \"height\": 113,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"afdfb326-054e-4eb0-935b-0ee153404edf\",\n      \"label\": \"label-5576\",\n      \"height\": 153,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"2f537ee7-8f59-49e7-83d6-c19bb19a4893\",\n      \"label\": \"label-5577\",\n      \"height\": 295,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"b40a2694-6345-428f-a406-891e2f5c1a79\",\n      \"label\": \"label-5578\",\n      \"height\": 386,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"7a122a7c-f3bc-4964-b325-c341f24e0dfc\",\n      \"label\": \"label-5579\",\n      \"height\": 451,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"76cc6f79-3f06-4639-834e-d745b1cf85eb\",\n      \"label\": \"label-5580\",\n      \"height\": 320,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"3d98bda4-4aff-4637-92b0-342cb002b63d\",\n      \"label\": \"label-5581\",\n      \"height\": 435,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"6b31b037-0df3-4853-a13b-8e9c6cb63486\",\n      \"label\": \"label-5582\",\n      \"height\": 367,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"77153d6a-c797-4fd1-9e36-5851525f5c1a\",\n      \"label\": \"label-5583\",\n      \"height\": 409,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"26d04ff9-448b-4684-9a78-2480711b3506\",\n      \"label\": \"label-5584\",\n      \"height\": 82,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"80ab9a55-36e2-496a-a47b-5508517e1499\",\n      \"label\": \"label-5585\",\n      \"height\": 510,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"1e258c1b-5100-4db5-a736-c13cf5679b4a\",\n      \"label\": \"label-5586\",\n      \"height\": 133,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"463eab7d-308c-4f5e-a96a-560609e4fb05\",\n      \"label\": \"label-5587\",\n      \"height\": 390,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"ddcb049a-7b56-4ffc-8c48-54c3d15e0696\",\n      \"label\": \"label-5588\",\n      \"height\": 496,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"9a007fa4-b24f-4a98-9800-c078d0fec29a\",\n      \"label\": \"label-5589\",\n      \"height\": 243,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"0b138a3a-cede-4391-8ee8-3747fe89665c\",\n      \"label\": \"label-5590\",\n      \"height\": 455,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"37afdaea-149b-4b35-814f-650f929008c3\",\n      \"label\": \"label-5591\",\n      \"height\": 318,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"fb785428-8a4c-41c2-ab96-113487fbfcdc\",\n      \"label\": \"label-5592\",\n      \"height\": 297,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"e0e30332-5dba-4abd-a6d0-4011f7edab27\",\n      \"label\": \"label-5593\",\n      \"height\": 326,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"17dc765e-ba9c-4cdc-a2b1-4972069c8e53\",\n      \"label\": \"label-5594\",\n      \"height\": 344,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"eb62a34c-f2ff-4414-8126-96311e9c98cf\",\n      \"label\": \"label-5595\",\n      \"height\": 382,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"28d5dd4f-cfdf-4b7b-bf5c-8f71d212b258\",\n      \"label\": \"label-5596\",\n      \"height\": 242,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"bf6bfa0e-ed3b-418a-ad9c-a72d7f974957\",\n      \"label\": \"label-5597\",\n      \"height\": 403,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"5190d76f-e408-4ec7-9e7f-56c88197a7ba\",\n      \"label\": \"label-5598\",\n      \"height\": 397,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"d2e12113-c758-4146-be9d-022995321ddc\",\n      \"label\": \"label-5599\",\n      \"height\": 167,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"ca06e6c6-d64d-4dc8-b1c2-6726b39da56c\",\n      \"label\": \"label-5600\",\n      \"height\": 77,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"93ee1919-4088-4de8-80be-25bc4d85e8dd\",\n      \"label\": \"label-5601\",\n      \"height\": 261,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"a626e235-5aca-47f1-96cf-241d47b88c85\",\n      \"label\": \"label-5602\",\n      \"height\": 271,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"1f799d85-5dc0-4168-b5bc-931d523785d9\",\n      \"label\": \"label-5603\",\n      \"height\": 36,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"5c11c204-3451-4113-a527-59cd8ff57bee\",\n      \"label\": \"label-5604\",\n      \"height\": 215,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"3ed19c2b-8373-4eca-bf60-ff05dff029d9\",\n      \"label\": \"label-5605\",\n      \"height\": 309,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"40db9e73-511a-439a-97be-6de7464ebe79\",\n      \"label\": \"label-5606\",\n      \"height\": 115,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"34f089fb-c820-4c02-8dae-5cc262e1f318\",\n      \"label\": \"label-5607\",\n      \"height\": 250,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"650ef72c-8c57-4df4-8a4a-d951822c3819\",\n      \"label\": \"label-5608\",\n      \"height\": 108,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"d3e33128-b7ad-4a19-a7b5-3eae874870b8\",\n      \"label\": \"label-5609\",\n      \"height\": 147,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"c7c1d0af-48ba-49c6-9345-7a44357e16c0\",\n      \"label\": \"label-5610\",\n      \"height\": 516,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"d633b986-4407-4c4b-835b-2daa41732ab1\",\n      \"label\": \"label-5611\",\n      \"height\": 154,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"14da7e98-86c2-41ab-85b0-b5d399e7097c\",\n      \"label\": \"label-5612\",\n      \"height\": 445,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"a8188ffc-a0aa-42a2-9de3-7aaccb8eb94a\",\n      \"label\": \"label-5613\",\n      \"height\": 78,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"f95cbd23-0921-4e62-8d71-8c42c52e9b3b\",\n      \"label\": \"label-5614\",\n      \"height\": 188,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"83905593-c3be-4521-9187-291080b0895b\",\n      \"label\": \"label-5615\",\n      \"height\": 499,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"090aa8f1-8ca9-49b9-aa5c-faa72f2e7ebf\",\n      \"label\": \"label-5616\",\n      \"height\": 303,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"abacbeed-919f-4802-8b65-758964b13b0c\",\n      \"label\": \"label-5617\",\n      \"height\": 356,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"f87959fb-fbc6-4695-8851-2df5f1b0082c\",\n      \"label\": \"label-5618\",\n      \"height\": 444,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"b8e97d97-dcbe-427b-bc95-4600fdc3ba67\",\n      \"label\": \"label-5619\",\n      \"height\": 461,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"01715d99-3dd0-43f5-94a4-3bd302828dc4\",\n      \"label\": \"label-5620\",\n      \"height\": 214,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"89976eaa-226d-4793-82fb-e50a38b38375\",\n      \"label\": \"label-5621\",\n      \"height\": 383,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"dabf78aa-d655-420e-beff-0b4947f4ce02\",\n      \"label\": \"label-5622\",\n      \"height\": 184,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"f1abbc29-f153-44d7-b1c6-85cd203d5199\",\n      \"label\": \"label-5623\",\n      \"height\": 37,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"8621c589-d642-4445-9db7-112fda8858c4\",\n      \"label\": \"label-5624\",\n      \"height\": 467,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"85776da3-cdad-4ebe-897b-a612b86dc822\",\n      \"label\": \"label-5625\",\n      \"height\": 112,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"5f2a2334-1f33-4b2b-bebf-44075cea729e\",\n      \"label\": \"label-5626\",\n      \"height\": 338,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"952381b5-77cb-400a-8238-36dc9f06d214\",\n      \"label\": \"label-5627\",\n      \"height\": 416,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"c6aabcc3-b961-49bf-91e6-a796e7d419f7\",\n      \"label\": \"label-5628\",\n      \"height\": 143,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"f0b5cd44-3437-435e-b525-996b8d958675\",\n      \"label\": \"label-5629\",\n      \"height\": 74,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"db453314-d5f3-47da-b8bf-1916fee6ed47\",\n      \"label\": \"label-5630\",\n      \"height\": 109,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"e282ebdb-6330-4508-b04b-5abd5b2a0083\",\n      \"label\": \"label-5631\",\n      \"height\": 428,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"eb32b970-d0d9-4d83-8ecd-14b9b4deb7e8\",\n      \"label\": \"label-5632\",\n      \"height\": 330,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"e6cd349a-bbce-4e66-8841-8e619310b65b\",\n      \"label\": \"label-5633\",\n      \"height\": 390,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"43a46d5f-b8f0-470b-a80a-fe117f8293e0\",\n      \"label\": \"label-5634\",\n      \"height\": 296,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"41dd6c60-b2e8-4b87-b932-59b67ef66cb6\",\n      \"label\": \"label-5635\",\n      \"height\": 511,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"e100211b-518c-4ea4-a6d0-9d0dde7a5dc4\",\n      \"label\": \"label-5636\",\n      \"height\": 175,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"70b8b1f2-b458-4d8e-88e0-3d3ea9e4fcb0\",\n      \"label\": \"label-5637\",\n      \"height\": 116,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"81751794-cef5-408d-8072-6b7fc3c1a00a\",\n      \"label\": \"label-5638\",\n      \"height\": 388,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"7d04f3c1-8708-47a1-8701-9256e6aea0af\",\n      \"label\": \"label-5639\",\n      \"height\": 336,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"81c5f903-17b3-4565-a849-4eab75173ee0\",\n      \"label\": \"label-5640\",\n      \"height\": 198,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"bd9e975a-f46b-4a00-a80c-7ab902d90424\",\n      \"label\": \"label-5641\",\n      \"height\": 84,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"296f6848-453f-4c63-b446-7bcd5a9ad170\",\n      \"label\": \"label-5642\",\n      \"height\": 434,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"7480e8e6-081d-455e-87de-1ef0d75010c3\",\n      \"label\": \"label-5643\",\n      \"height\": 399,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"b7141511-4d50-4451-81de-08860ebdc562\",\n      \"label\": \"label-5644\",\n      \"height\": 394,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"c97fbb88-a9f3-4d49-93a9-29ac357d2780\",\n      \"label\": \"label-5645\",\n      \"height\": 231,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"87f51fee-4e79-4f32-98df-54eedea9cc16\",\n      \"label\": \"label-5646\",\n      \"height\": 270,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"a1b82955-97f9-4b8c-9060-fef20f456c50\",\n      \"label\": \"label-5647\",\n      \"height\": 324,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"cd913ee2-a6b9-46b2-9a48-177f52958475\",\n      \"label\": \"label-5648\",\n      \"height\": 88,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"f7045f70-370a-42f6-b9ca-3a1ee0f782b4\",\n      \"label\": \"label-5649\",\n      \"height\": 173,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"ee1b38e3-92b9-48be-a49e-5d8710925496\",\n      \"label\": \"label-5650\",\n      \"height\": 350,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"2bd6e45d-ac76-49e8-8486-d0ca6c0612ab\",\n      \"label\": \"label-5651\",\n      \"height\": 178,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"bb8eca4c-f8ff-4e15-97b0-a2f2686a4871\",\n      \"label\": \"label-5652\",\n      \"height\": 218,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"758caa1c-e5e8-4271-b153-cd6d6b3f643f\",\n      \"label\": \"label-5653\",\n      \"height\": 34,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"8bab8d6b-d5cc-4e47-bbb5-4a1cb9a27307\",\n      \"label\": \"label-5654\",\n      \"height\": 359,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"c2666845-7227-41ba-b091-1bd5bb28874c\",\n      \"label\": \"label-5655\",\n      \"height\": 280,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"f4addcff-07c2-45d5-97d5-ef5a68c4320b\",\n      \"label\": \"label-5656\",\n      \"height\": 164,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"41346010-c6e9-4490-917a-57ff8da432d6\",\n      \"label\": \"label-5657\",\n      \"height\": 483,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"49dcba7a-bd05-4b0a-a471-57916ce1eba6\",\n      \"label\": \"label-5658\",\n      \"height\": 199,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"34e84611-8a74-4d63-94ea-129c2074d6d1\",\n      \"label\": \"label-5659\",\n      \"height\": 312,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"b8eb24c8-b302-4cbf-9046-66fe1778e0da\",\n      \"label\": \"label-5660\",\n      \"height\": 166,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"9f65b360-20e1-417b-b2be-68199e64a5af\",\n      \"label\": \"label-5661\",\n      \"height\": 445,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"01d1e7b6-2f19-4a80-85f0-6f099f7fc654\",\n      \"label\": \"label-5662\",\n      \"height\": 56,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"998fcb57-9baa-4f08-a6a5-56aec975749f\",\n      \"label\": \"label-5663\",\n      \"height\": 324,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"6a88a355-648a-4e02-aa6d-4252a031e079\",\n      \"label\": \"label-5664\",\n      \"height\": 502,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"34efe6c1-73df-4744-8398-8e64dc8ab530\",\n      \"label\": \"label-5665\",\n      \"height\": 383,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"ad363134-ff04-4f5c-9508-4c821afe607d\",\n      \"label\": \"label-5666\",\n      \"height\": 303,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"c0f0eb75-b7f2-4e51-8d74-7db16d75bf1c\",\n      \"label\": \"label-5667\",\n      \"height\": 383,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"f039d326-d20f-4664-b305-9947d79ac694\",\n      \"label\": \"label-5668\",\n      \"height\": 510,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"d709b6ce-1db4-444a-b919-593ab6bdc91d\",\n      \"label\": \"label-5669\",\n      \"height\": 304,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"08b22d50-5ee1-4f0b-9134-2a9b0b373807\",\n      \"label\": \"label-5670\",\n      \"height\": 382,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"eb8e75c5-54c6-44e6-b016-0708ff83c8a3\",\n      \"label\": \"label-5671\",\n      \"height\": 331,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"4f833537-bc00-487a-b00a-64df753ab239\",\n      \"label\": \"label-5672\",\n      \"height\": 144,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"1541e698-bcd7-4564-9342-8ab91460e102\",\n      \"label\": \"label-5673\",\n      \"height\": 215,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"9bf7acd5-5a4f-4d82-93ec-9f152d17c923\",\n      \"label\": \"label-5674\",\n      \"height\": 138,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"abbf6ab6-192e-4324-b5ff-a4898f35a538\",\n      \"label\": \"label-5675\",\n      \"height\": 163,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"7e4c6a57-676e-444a-b949-39ef08491201\",\n      \"label\": \"label-5676\",\n      \"height\": 505,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"60339c4a-7e9f-4a64-b911-cc5327a26dcc\",\n      \"label\": \"label-5677\",\n      \"height\": 237,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"83865651-43ff-4ef3-bb48-649d9b1e87d6\",\n      \"label\": \"label-5678\",\n      \"height\": 156,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"dac99d2a-81c6-4dd3-a04d-ec8c8d98eb2c\",\n      \"label\": \"label-5679\",\n      \"height\": 187,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"f2b57d57-cbc3-463e-a18e-2d294e295a4a\",\n      \"label\": \"label-5680\",\n      \"height\": 255,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"5808fdf6-c714-4f74-87bf-33f01bd2ba39\",\n      \"label\": \"label-5681\",\n      \"height\": 249,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"660bef24-d578-4b7c-baa3-340beaa6f95c\",\n      \"label\": \"label-5682\",\n      \"height\": 484,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"ff528847-1dde-4128-9383-dec7e3cfc513\",\n      \"label\": \"label-5683\",\n      \"height\": 168,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"f84aeff8-e18c-4e19-ab1e-82236c5dbdeb\",\n      \"label\": \"label-5684\",\n      \"height\": 366,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"8c431916-bc55-4918-a4a9-80972d3a1ca8\",\n      \"label\": \"label-5685\",\n      \"height\": 288,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"fe3d2636-6217-4460-8d44-2e6684f91f55\",\n      \"label\": \"label-5686\",\n      \"height\": 111,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"70c0eb03-c147-4dcf-ab62-7b5b8efdf3d5\",\n      \"label\": \"label-5687\",\n      \"height\": 342,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"c0db5065-5c93-444c-b6c2-33bc416e41ca\",\n      \"label\": \"label-5688\",\n      \"height\": 373,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"2e22955b-f964-48cc-83c2-b7f177ed4261\",\n      \"label\": \"label-5689\",\n      \"height\": 489,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"e94176c9-6684-4820-adb3-c585bcda011b\",\n      \"label\": \"label-5690\",\n      \"height\": 133,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"b8a14876-2a10-4c8b-af30-3144299fef1a\",\n      \"label\": \"label-5691\",\n      \"height\": 460,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"c1bb3b75-76e9-47fe-b6fc-13c54663de77\",\n      \"label\": \"label-5692\",\n      \"height\": 39,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"aa389ace-d7ca-472a-bbeb-e9b692600fde\",\n      \"label\": \"label-5693\",\n      \"height\": 207,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"5b28e55e-3e24-4e08-9cc4-537b24c2610d\",\n      \"label\": \"label-5694\",\n      \"height\": 94,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"b84b523a-2dc5-4fef-b4b4-6dd73836c052\",\n      \"label\": \"label-5695\",\n      \"height\": 59,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"bcec115e-d1c7-4397-a240-fb2ba9c0a235\",\n      \"label\": \"label-5696\",\n      \"height\": 66,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"0b919bbf-b0fb-4118-919c-a8ce1cdb20a7\",\n      \"label\": \"label-5697\",\n      \"height\": 127,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"e408756d-9cce-4088-8e0d-7fda7a2a699e\",\n      \"label\": \"label-5698\",\n      \"height\": 299,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"cc934f94-5746-4b0b-ac18-88b92ce02653\",\n      \"label\": \"label-5699\",\n      \"height\": 446,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"e4578908-5ac5-40a8-be68-ee9512ac4d00\",\n      \"label\": \"label-5700\",\n      \"height\": 393,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"2b751624-b140-4eca-866f-11eb123db3e8\",\n      \"label\": \"label-5701\",\n      \"height\": 61,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"8991ee97-8726-4310-96ee-f0b32a6bcd67\",\n      \"label\": \"label-5702\",\n      \"height\": 277,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"34378411-8b2f-4681-9804-87eb26cdf2f2\",\n      \"label\": \"label-5703\",\n      \"height\": 498,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"f0f2fba2-412c-4009-91d6-eec1cb78a039\",\n      \"label\": \"label-5704\",\n      \"height\": 468,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"693f5e4e-a11a-4039-8a65-5bbf492057bf\",\n      \"label\": \"label-5705\",\n      \"height\": 239,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"41f730c4-b65b-498b-90ae-d65a218cde96\",\n      \"label\": \"label-5706\",\n      \"height\": 150,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"785a11e9-dfd4-4e7d-85c8-225725115c0a\",\n      \"label\": \"label-5707\",\n      \"height\": 395,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"2ec90a88-4f10-41a6-b1cd-27e25df548ad\",\n      \"label\": \"label-5708\",\n      \"height\": 253,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"0c7c1d31-1071-4ca0-b711-35a25492e8b4\",\n      \"label\": \"label-5709\",\n      \"height\": 127,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"8283dc17-4e0a-47e7-8dea-a87ea6eeb3c5\",\n      \"label\": \"label-5710\",\n      \"height\": 279,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"5b8e6db5-f8a8-4ca6-a2ba-e39a1c8b3b1a\",\n      \"label\": \"label-5711\",\n      \"height\": 32,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"7d979fe7-22da-4664-86c0-603cdc9fd990\",\n      \"label\": \"label-5712\",\n      \"height\": 263,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"fbb501d3-6a02-4c0e-96dd-fd2a0d8eb177\",\n      \"label\": \"label-5713\",\n      \"height\": 57,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"4ddea8cc-02d5-475a-8b73-aeb8fc3cafef\",\n      \"label\": \"label-5714\",\n      \"height\": 180,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"8a511394-6517-4730-96d0-6dec1b084143\",\n      \"label\": \"label-5715\",\n      \"height\": 118,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"b9b55228-1cd4-4ab1-b6bf-3dbafebc749e\",\n      \"label\": \"label-5716\",\n      \"height\": 214,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"041303c1-50f2-4f4a-a594-d77e10ce4d59\",\n      \"label\": \"label-5717\",\n      \"height\": 329,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"90e0fd16-98a3-47e8-9d26-05b5ed834242\",\n      \"label\": \"label-5718\",\n      \"height\": 477,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"dc532fc7-cb41-487c-bc5c-18b97200e8b2\",\n      \"label\": \"label-5719\",\n      \"height\": 314,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"a9e1379b-be97-4cbb-b05d-1d010bdec55a\",\n      \"label\": \"label-5720\",\n      \"height\": 249,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"851af324-5538-4652-8f27-7f2dbfd2ded9\",\n      \"label\": \"label-5721\",\n      \"height\": 73,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"40a1be49-4b79-4768-a840-e7c9635c9236\",\n      \"label\": \"label-5722\",\n      \"height\": 63,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"31a1c980-5bf3-4c9f-b429-6efba24f0a4f\",\n      \"label\": \"label-5723\",\n      \"height\": 157,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"d1a54643-5ae2-4fb6-8648-313d98d05f07\",\n      \"label\": \"label-5724\",\n      \"height\": 498,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"bd4c4aa2-5eb7-41a7-bc33-a504e0f13230\",\n      \"label\": \"label-5725\",\n      \"height\": 389,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"3b4512c4-f4b6-49c0-9c0b-f953c5c1db70\",\n      \"label\": \"label-5726\",\n      \"height\": 36,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"8c1c441f-bb5a-422c-8da8-59c1217e6d1d\",\n      \"label\": \"label-5727\",\n      \"height\": 166,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"ecc6b5ad-a3e9-441f-9a8c-eeebb2832315\",\n      \"label\": \"label-5728\",\n      \"height\": 121,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"2e174519-dc13-4ce5-bc90-673800e0f098\",\n      \"label\": \"label-5729\",\n      \"height\": 365,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"321ff25b-86d1-4419-9893-79fda94eccbf\",\n      \"label\": \"label-5730\",\n      \"height\": 358,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"c39aff71-0088-4c4a-8d0d-8b1b39e95588\",\n      \"label\": \"label-5731\",\n      \"height\": 420,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"699bd828-a8d9-49f8-9bc1-62dc8aa4361d\",\n      \"label\": \"label-5732\",\n      \"height\": 242,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"2341e88a-3956-4798-93d8-3b5ca811bb34\",\n      \"label\": \"label-5733\",\n      \"height\": 475,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"9c6b48f2-0e38-4466-98ff-5cba8bb893c2\",\n      \"label\": \"label-5734\",\n      \"height\": 360,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"dea4f5e9-4196-43af-8562-69a1de97aa1e\",\n      \"label\": \"label-5735\",\n      \"height\": 474,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"9816befe-056e-40da-b69f-d46c75790a2c\",\n      \"label\": \"label-5736\",\n      \"height\": 366,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"23a1872c-3397-46b7-a599-59d1504b6932\",\n      \"label\": \"label-5737\",\n      \"height\": 74,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"a85c561c-480f-4e93-a16f-4a8df049270c\",\n      \"label\": \"label-5738\",\n      \"height\": 529,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"293781bc-8128-4a67-8601-15d75c223067\",\n      \"label\": \"label-5739\",\n      \"height\": 409,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"2a23022c-490e-477e-92d2-ee2a5b54edd2\",\n      \"label\": \"label-5740\",\n      \"height\": 517,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"0d67b569-bd94-4cab-a289-605f5d5b84a3\",\n      \"label\": \"label-5741\",\n      \"height\": 67,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"62380e48-5f14-4314-a3b0-e618974e1884\",\n      \"label\": \"label-5742\",\n      \"height\": 232,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"384534a4-0fd7-4999-b3dc-9273c6360643\",\n      \"label\": \"label-5743\",\n      \"height\": 106,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"947556dc-cec4-428c-acb9-7111618503ea\",\n      \"label\": \"label-5744\",\n      \"height\": 205,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"1e8e815e-efba-48da-87c7-06a1f621c458\",\n      \"label\": \"label-5745\",\n      \"height\": 391,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"5075a07f-9f64-4153-a3ca-f1e9a70a4f3c\",\n      \"label\": \"label-5746\",\n      \"height\": 143,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"e6ff520d-4ec4-40c3-bd92-282f01fab84a\",\n      \"label\": \"label-5747\",\n      \"height\": 109,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"e7c1f3a8-fd0f-4c69-a791-c48bcc23e4e7\",\n      \"label\": \"label-5748\",\n      \"height\": 278,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"2c9d959f-98ac-470e-b81e-74743ca38e71\",\n      \"label\": \"label-5749\",\n      \"height\": 309,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"4ffc6815-1826-4205-9ba8-1c34a6d5ed35\",\n      \"label\": \"label-5750\",\n      \"height\": 390,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"801e6801-b660-43bf-a9dd-49c5291e06aa\",\n      \"label\": \"label-5751\",\n      \"height\": 162,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"56ebc472-8dc5-4fd7-8409-e30d01b09d11\",\n      \"label\": \"label-5752\",\n      \"height\": 38,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"576a047d-0635-4fa2-bf9e-5e97f038efde\",\n      \"label\": \"label-5753\",\n      \"height\": 186,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"8c217c0d-8fa4-47f7-934e-e52549b13247\",\n      \"label\": \"label-5754\",\n      \"height\": 335,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"10b861b5-9678-4f2a-8bfb-0a91f266a49b\",\n      \"label\": \"label-5755\",\n      \"height\": 58,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"de055475-f6b8-4567-b270-d858c41d5993\",\n      \"label\": \"label-5756\",\n      \"height\": 431,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"0973b7b9-5c9a-4680-a4b9-1ca72edb4906\",\n      \"label\": \"label-5757\",\n      \"height\": 416,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"e2b174e2-522c-4bcc-a2e3-1985fe15e8f9\",\n      \"label\": \"label-5758\",\n      \"height\": 318,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"21f2d57d-6421-490b-8adc-0a4947819f35\",\n      \"label\": \"label-5759\",\n      \"height\": 357,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"67fd29b9-0034-4e27-a5bc-fc57925c94a2\",\n      \"label\": \"label-5760\",\n      \"height\": 255,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"141a376f-ec72-4376-8cd3-913133e5d957\",\n      \"label\": \"label-5761\",\n      \"height\": 203,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"77b8fdf0-e599-464a-9bab-67463da9cfb0\",\n      \"label\": \"label-5762\",\n      \"height\": 324,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"de1be9d9-7a38-4416-ba1d-9319fa9f319c\",\n      \"label\": \"label-5763\",\n      \"height\": 283,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"5733d797-4c63-4fcd-9a69-5f6c743ef0ee\",\n      \"label\": \"label-5764\",\n      \"height\": 138,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"977d3648-4ab5-497e-8543-a1ba6b1026e9\",\n      \"label\": \"label-5765\",\n      \"height\": 362,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"5bce8a09-fa49-41ed-be4e-b8a4a646bbeb\",\n      \"label\": \"label-5766\",\n      \"height\": 348,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"033e818f-bc0f-41bb-adad-c9be83c6310d\",\n      \"label\": \"label-5767\",\n      \"height\": 275,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"e9cd8f6a-c024-484b-9e93-702dacaee9cd\",\n      \"label\": \"label-5768\",\n      \"height\": 78,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"2f01e306-0765-412b-971f-7d1977dd7d55\",\n      \"label\": \"label-5769\",\n      \"height\": 221,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"5d77bfa1-d3b6-4ba0-b901-986bcd831ebb\",\n      \"label\": \"label-5770\",\n      \"height\": 166,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"271b6491-49c8-458a-92ad-b11b08c1cd4c\",\n      \"label\": \"label-5771\",\n      \"height\": 361,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"0e42d3ff-828a-4f86-93a7-1b6a87fc5ee8\",\n      \"label\": \"label-5772\",\n      \"height\": 427,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"b7f59e14-04ff-41c2-90e8-1844dfd1ea42\",\n      \"label\": \"label-5773\",\n      \"height\": 126,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"83b91db8-9cc0-48d2-af7f-2c184a91e9ec\",\n      \"label\": \"label-5774\",\n      \"height\": 389,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"4a5b7e0a-c78c-4a6b-a6b4-89c83402b078\",\n      \"label\": \"label-5775\",\n      \"height\": 452,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"012f3a5e-b71d-4706-8c63-12c46bb63bf9\",\n      \"label\": \"label-5776\",\n      \"height\": 197,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"09799c8e-ff4c-4577-9a05-22c2bdedeebc\",\n      \"label\": \"label-5777\",\n      \"height\": 474,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"5187e729-bac4-453a-b336-3d737782701d\",\n      \"label\": \"label-5778\",\n      \"height\": 447,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"fc610698-72bc-4eed-90a0-c6229d80ef30\",\n      \"label\": \"label-5779\",\n      \"height\": 452,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"ac7cd460-8184-403f-aae9-ff88dec9a723\",\n      \"label\": \"label-5780\",\n      \"height\": 186,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"9ff965eb-953f-4a4a-9f7e-956872115b2e\",\n      \"label\": \"label-5781\",\n      \"height\": 428,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"c433cae2-e3f7-4ec2-a0e7-32b06d9bc681\",\n      \"label\": \"label-5782\",\n      \"height\": 152,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"d07cfeed-3c40-41eb-9d2d-a6ac1e172c47\",\n      \"label\": \"label-5783\",\n      \"height\": 189,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"05fe81d7-3421-49e7-a0dc-15864251952f\",\n      \"label\": \"label-5784\",\n      \"height\": 307,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"782460c9-6365-4615-8cea-8881ce889f81\",\n      \"label\": \"label-5785\",\n      \"height\": 106,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"1fb48bec-170c-451f-b021-b71b1dbc5d9a\",\n      \"label\": \"label-5786\",\n      \"height\": 435,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"9186726b-5b42-4884-ad28-9e01ba201a53\",\n      \"label\": \"label-5787\",\n      \"height\": 523,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"d066af22-8921-4f90-ae50-db8bbdc7028e\",\n      \"label\": \"label-5788\",\n      \"height\": 188,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"61a2aab1-a9dc-46f4-86ff-2d22483d451a\",\n      \"label\": \"label-5789\",\n      \"height\": 432,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"3766eb5d-1e46-4851-864d-8e013509cdc8\",\n      \"label\": \"label-5790\",\n      \"height\": 444,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"f20da78b-cd64-493c-8075-1bc2a02d9a46\",\n      \"label\": \"label-5791\",\n      \"height\": 504,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"15642ae6-59df-4049-ba66-9f8beb05ebb6\",\n      \"label\": \"label-5792\",\n      \"height\": 433,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"7f98cd6d-b5f3-47e3-b9b5-46bcf51097a9\",\n      \"label\": \"label-5793\",\n      \"height\": 314,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"016115f8-6d1f-4b31-9996-a4c2ec939ea4\",\n      \"label\": \"label-5794\",\n      \"height\": 149,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"d6850d19-bc06-4bbb-b025-6e9ad7802dd9\",\n      \"label\": \"label-5795\",\n      \"height\": 384,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"f2d762f6-e9b7-4e4b-8fdd-82074096a8f2\",\n      \"label\": \"label-5796\",\n      \"height\": 384,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"6e80ed23-6502-400c-b7ea-aa2c332217d9\",\n      \"label\": \"label-5797\",\n      \"height\": 99,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"465a5443-edf5-4266-adf0-47d355d09c98\",\n      \"label\": \"label-5798\",\n      \"height\": 437,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"3dc733a1-48aa-45b0-b874-c774571d5f7d\",\n      \"label\": \"label-5799\",\n      \"height\": 89,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"b0393d81-16a3-48a0-82bd-bac1e14d176f\",\n      \"label\": \"label-5800\",\n      \"height\": 338,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"d5037c28-6993-4fd6-a714-ec6da03f21c6\",\n      \"label\": \"label-5801\",\n      \"height\": 79,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"15189589-4c19-4c3d-9c35-22342cb22fd2\",\n      \"label\": \"label-5802\",\n      \"height\": 521,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"f53a680d-1737-46dd-9297-f8be9cce0c27\",\n      \"label\": \"label-5803\",\n      \"height\": 307,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"8ab16ed5-7629-4ddb-ad7e-50f6916d83d2\",\n      \"label\": \"label-5804\",\n      \"height\": 189,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"481a6519-be23-4b50-9e88-263a7b5395c0\",\n      \"label\": \"label-5805\",\n      \"height\": 67,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"402e9b77-14f3-4307-91bc-fd28bc8f3f38\",\n      \"label\": \"label-5806\",\n      \"height\": 53,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"05667b34-46d2-43bf-b6e4-61a767644d46\",\n      \"label\": \"label-5807\",\n      \"height\": 283,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"538f224c-2ca6-46b9-be76-dab41b62e147\",\n      \"label\": \"label-5808\",\n      \"height\": 425,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"a389b10b-e9be-4568-9cc6-d27a0c680651\",\n      \"label\": \"label-5809\",\n      \"height\": 380,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"3e8dc5c1-fa9a-4ebf-a5a9-db19f387ae2f\",\n      \"label\": \"label-5810\",\n      \"height\": 459,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"f154417d-a44d-4b0d-90ab-61bd7803d4e5\",\n      \"label\": \"label-5811\",\n      \"height\": 292,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"68c735d5-f51a-4e66-a938-69acef0ea21f\",\n      \"label\": \"label-5812\",\n      \"height\": 447,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"5dad1c59-874d-48cc-9fc3-ea7be712e4f9\",\n      \"label\": \"label-5813\",\n      \"height\": 147,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"ecd27d56-f0bb-469d-931c-4c562be25348\",\n      \"label\": \"label-5814\",\n      \"height\": 424,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"cfee0991-65e3-4020-9a0d-be875767876f\",\n      \"label\": \"label-5815\",\n      \"height\": 284,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"968a2c9f-3a4d-42ae-81fe-54df5f357613\",\n      \"label\": \"label-5816\",\n      \"height\": 497,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"35316d68-9d80-4395-a9d5-3832937fe7ae\",\n      \"label\": \"label-5817\",\n      \"height\": 346,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"0f3d1df5-f0b1-4d43-a0d9-6153afc48926\",\n      \"label\": \"label-5818\",\n      \"height\": 410,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"5ef3a5bb-6f1f-47c7-9448-0afd099720e4\",\n      \"label\": \"label-5819\",\n      \"height\": 168,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"282ebf12-9f17-467f-91cd-88f91c82a6f6\",\n      \"label\": \"label-5820\",\n      \"height\": 186,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"17341a87-3acc-4d7b-afbd-1fd2cf9e1950\",\n      \"label\": \"label-5821\",\n      \"height\": 524,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"0e84207f-f05d-428a-9b24-c69b95bbe23a\",\n      \"label\": \"label-5822\",\n      \"height\": 162,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"b6ec6c94-dc23-42d5-9e6d-1b0faa95b049\",\n      \"label\": \"label-5823\",\n      \"height\": 271,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"8d22a877-ee1b-430f-ba34-80069bdb8d8f\",\n      \"label\": \"label-5824\",\n      \"height\": 525,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"39a15674-f665-4fb8-8675-2fb0648148b5\",\n      \"label\": \"label-5825\",\n      \"height\": 274,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"22520fcd-e7d1-4639-8671-409dcb35ae07\",\n      \"label\": \"label-5826\",\n      \"height\": 383,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"c048c586-8cbf-4b30-a92c-29b4a97333e9\",\n      \"label\": \"label-5827\",\n      \"height\": 359,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"926072a6-6203-43c5-bfc9-2f25d111d2cd\",\n      \"label\": \"label-5828\",\n      \"height\": 80,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"84af3ec5-5c78-4f3f-ad29-7948f1d0afd4\",\n      \"label\": \"label-5829\",\n      \"height\": 455,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"4af32951-5789-4ed7-ac24-5c4bfa54a891\",\n      \"label\": \"label-5830\",\n      \"height\": 344,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"7656539b-0505-4aaa-b2c8-29f3423a36b7\",\n      \"label\": \"label-5831\",\n      \"height\": 92,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"0dc07d91-e23a-4459-811d-acd5b93e527b\",\n      \"label\": \"label-5832\",\n      \"height\": 141,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"ad558c52-61ea-44a2-ac4a-9be4e5aff530\",\n      \"label\": \"label-5833\",\n      \"height\": 508,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"7595702a-8105-4de0-a33e-3144507a4bd0\",\n      \"label\": \"label-5834\",\n      \"height\": 365,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"67f5ee27-200b-4ba3-812c-d8870ffcc8f3\",\n      \"label\": \"label-5835\",\n      \"height\": 256,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"31a6347f-7d3d-408a-ae49-b3e45bdbbb16\",\n      \"label\": \"label-5836\",\n      \"height\": 338,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"ad05e706-d156-4651-ae74-25f8e48c8d95\",\n      \"label\": \"label-5837\",\n      \"height\": 225,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"67daae17-70a8-479a-8ee3-4ef21cdce110\",\n      \"label\": \"label-5838\",\n      \"height\": 343,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"d3fe1d5b-3545-4547-8f27-3e4cd726cffb\",\n      \"label\": \"label-5839\",\n      \"height\": 69,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"5db47675-dce5-49dc-8855-fb4102b1cf5c\",\n      \"label\": \"label-5840\",\n      \"height\": 217,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"a7cdc629-1ed1-41b6-901f-8f109590c92a\",\n      \"label\": \"label-5841\",\n      \"height\": 163,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"ef8c9971-5e41-4b82-8c48-55fb4e7e4163\",\n      \"label\": \"label-5842\",\n      \"height\": 437,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"2f62939a-7980-4733-ae66-2ee94b98f5c7\",\n      \"label\": \"label-5843\",\n      \"height\": 353,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"ee5284e2-8d13-45eb-a311-914c6d97769b\",\n      \"label\": \"label-5844\",\n      \"height\": 447,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"8f5a27ff-65af-45cf-87ef-19780a5d7d1e\",\n      \"label\": \"label-5845\",\n      \"height\": 349,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"f4506942-37b0-4fe6-8c94-f1c0e69333cd\",\n      \"label\": \"label-5846\",\n      \"height\": 288,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"ffd97e78-2e39-40df-a90c-530a40c31058\",\n      \"label\": \"label-5847\",\n      \"height\": 190,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"7ecc00b8-7a84-41d4-a12c-2861a9f57cf4\",\n      \"label\": \"label-5848\",\n      \"height\": 298,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"dcca4877-62ad-4e58-b0c9-9806fa2e1bc8\",\n      \"label\": \"label-5849\",\n      \"height\": 127,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"055f67b8-9a5d-4ac6-b7f3-748cc44bb8fa\",\n      \"label\": \"label-5850\",\n      \"height\": 92,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"6620c2e5-2110-41c3-ab0c-1ba5ec627a19\",\n      \"label\": \"label-5851\",\n      \"height\": 185,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"442d7732-9d5f-46ef-9e46-494f40ec5ccd\",\n      \"label\": \"label-5852\",\n      \"height\": 470,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"bad58433-ed45-463b-b95c-470252cbc7a6\",\n      \"label\": \"label-5853\",\n      \"height\": 340,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"161faa15-5805-4fd8-8136-e492f2e19b5b\",\n      \"label\": \"label-5854\",\n      \"height\": 512,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"87a35c87-6cc0-4e7c-83c6-fbfab8bf3d71\",\n      \"label\": \"label-5855\",\n      \"height\": 146,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"6cb42a40-39e0-4771-b067-808e3ddf8c0a\",\n      \"label\": \"label-5856\",\n      \"height\": 130,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"13268ae7-5bb3-4c3a-98d6-9b29e1020457\",\n      \"label\": \"label-5857\",\n      \"height\": 366,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"9d806fd9-8e38-40c5-99be-11e9b76b3f59\",\n      \"label\": \"label-5858\",\n      \"height\": 200,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"97d44978-074a-4c76-9d63-4125a85f5511\",\n      \"label\": \"label-5859\",\n      \"height\": 380,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"e1b8ade6-2f55-45d5-b5c3-06bbcf01360e\",\n      \"label\": \"label-5860\",\n      \"height\": 228,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"2cb3dfd3-d864-4bb0-a972-0d22c69586ea\",\n      \"label\": \"label-5861\",\n      \"height\": 429,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"f87bf825-c88a-444f-9e4e-79d8cbf74c01\",\n      \"label\": \"label-5862\",\n      \"height\": 480,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"8f6c74d2-6e1f-46c6-8b13-73db35bcdcfe\",\n      \"label\": \"label-5863\",\n      \"height\": 296,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"d84f1b76-a6b7-478c-b147-80efedc8020b\",\n      \"label\": \"label-5864\",\n      \"height\": 398,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"031757d1-c189-4336-8fa1-b6500ece9203\",\n      \"label\": \"label-5865\",\n      \"height\": 333,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"4240688b-763c-4b8c-a98c-7bfb2ef8ced3\",\n      \"label\": \"label-5866\",\n      \"height\": 521,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"17553661-c8d7-406b-8fea-2f3df0792cf9\",\n      \"label\": \"label-5867\",\n      \"height\": 165,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"c55ed958-cd38-4c1d-982a-c790f59b5018\",\n      \"label\": \"label-5868\",\n      \"height\": 355,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"e2970240-d88e-47f7-8f18-e8768bba4dc8\",\n      \"label\": \"label-5869\",\n      \"height\": 502,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"5fb26355-2e17-471d-8cf2-70aff533c9a6\",\n      \"label\": \"label-5870\",\n      \"height\": 199,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"87c6ce9e-dfb4-4a7e-acbd-7ddd66406812\",\n      \"label\": \"label-5871\",\n      \"height\": 491,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"643c23ad-e08b-4862-a2a4-bc7d98a35b2f\",\n      \"label\": \"label-5872\",\n      \"height\": 528,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"dcb2ea95-6790-4bee-975c-7377891ee735\",\n      \"label\": \"label-5873\",\n      \"height\": 317,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"6403728a-6354-423b-a041-3a7e7be19ad9\",\n      \"label\": \"label-5874\",\n      \"height\": 70,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"a27451d8-d863-44b0-8546-4ccca5f589e6\",\n      \"label\": \"label-5875\",\n      \"height\": 104,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"548a6d6d-6d77-40a0-9b66-733260f3553a\",\n      \"label\": \"label-5876\",\n      \"height\": 237,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"fced7dfb-b75b-494c-955b-26394fbe28a8\",\n      \"label\": \"label-5877\",\n      \"height\": 168,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"199024b1-577a-4d4f-b61e-2d5133cfcff0\",\n      \"label\": \"label-5878\",\n      \"height\": 137,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"45d4a744-5ec0-4d54-82df-e7d9766ed6a8\",\n      \"label\": \"label-5879\",\n      \"height\": 96,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"9ec2ea66-2070-4f2e-813f-90ed20e319aa\",\n      \"label\": \"label-5880\",\n      \"height\": 377,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"94e943d7-0b59-4f50-add8-f79a8db2a5db\",\n      \"label\": \"label-5881\",\n      \"height\": 176,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"7062a6de-ad1e-4e4b-83fa-647c5528b2e7\",\n      \"label\": \"label-5882\",\n      \"height\": 159,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"52548011-2142-429c-86cd-c9d3f7f47499\",\n      \"label\": \"label-5883\",\n      \"height\": 180,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"44e012c1-9411-4a4c-900f-91c61f27e18e\",\n      \"label\": \"label-5884\",\n      \"height\": 119,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"f7d6952a-5492-4d15-9565-008d74f42952\",\n      \"label\": \"label-5885\",\n      \"height\": 204,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"b2dc78ae-373f-4fe1-9a2e-d095f89eea21\",\n      \"label\": \"label-5886\",\n      \"height\": 57,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"02faa4df-a18d-4b24-b7e2-aa24e5448c7b\",\n      \"label\": \"label-5887\",\n      \"height\": 484,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"672c8b03-1be6-4ba4-b74c-491040eeda2e\",\n      \"label\": \"label-5888\",\n      \"height\": 261,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"509a5076-a12f-4dc9-a5ce-7f0fc8576032\",\n      \"label\": \"label-5889\",\n      \"height\": 87,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"77752818-5968-49a6-a189-235ae7b031e1\",\n      \"label\": \"label-5890\",\n      \"height\": 194,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"6f6620d0-a73b-4cd1-9177-d4988a44525e\",\n      \"label\": \"label-5891\",\n      \"height\": 522,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"9d2f5611-e944-4141-bbd1-8fe61f98bb92\",\n      \"label\": \"label-5892\",\n      \"height\": 79,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"c2c96707-4ed7-48a4-8255-9e2db9bcd457\",\n      \"label\": \"label-5893\",\n      \"height\": 522,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"7d9acca4-930a-4dd0-ae1a-38036f561c97\",\n      \"label\": \"label-5894\",\n      \"height\": 467,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"762382f2-6939-403c-89ff-f2c2a85f4057\",\n      \"label\": \"label-5895\",\n      \"height\": 133,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"3c9e5c79-e137-49c0-a7e3-b0b5bca0e286\",\n      \"label\": \"label-5896\",\n      \"height\": 84,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"412192eb-fa80-44f7-aca7-8cda3cb2a939\",\n      \"label\": \"label-5897\",\n      \"height\": 196,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"54c7d133-3c31-41b4-9d95-933a5ab7444e\",\n      \"label\": \"label-5898\",\n      \"height\": 483,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"3c3f353f-a6ee-434b-85b7-858da6f13053\",\n      \"label\": \"label-5899\",\n      \"height\": 317,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"6a10eb2b-a70a-4b08-b0d0-f154b1b6733d\",\n      \"label\": \"label-5900\",\n      \"height\": 481,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"fb210f8b-5d1f-48b6-8369-25e2806d2cf5\",\n      \"label\": \"label-5901\",\n      \"height\": 202,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"703cdee0-9c54-48f3-98ce-b2d6f7064a23\",\n      \"label\": \"label-5902\",\n      \"height\": 342,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"f22a63c5-b6e1-404b-be1a-bd2b56cd75ae\",\n      \"label\": \"label-5903\",\n      \"height\": 131,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"f1559f87-9ced-45d2-a282-0f47777ec0ae\",\n      \"label\": \"label-5904\",\n      \"height\": 110,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"d8e64e38-89ea-4b58-8391-d2862134ae25\",\n      \"label\": \"label-5905\",\n      \"height\": 288,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"d70f7d06-f501-4e07-b244-10bc6a42040a\",\n      \"label\": \"label-5906\",\n      \"height\": 386,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"e61fbaa8-a021-4acc-85e4-9aa0e5561de5\",\n      \"label\": \"label-5907\",\n      \"height\": 350,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"302ba7dd-1e46-44dd-97ec-2f5940a8f3f3\",\n      \"label\": \"label-5908\",\n      \"height\": 190,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"c0e0038d-5567-4c8c-a600-a7ec91157a8a\",\n      \"label\": \"label-5909\",\n      \"height\": 302,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"05beeeee-955a-4867-9f92-07fca7e555bf\",\n      \"label\": \"label-5910\",\n      \"height\": 294,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"54699650-ec3c-48f8-a1b1-8df2b171de52\",\n      \"label\": \"label-5911\",\n      \"height\": 196,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"25cab014-0bc7-443e-ad5a-da2351443d9f\",\n      \"label\": \"label-5912\",\n      \"height\": 205,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"6ef67f3c-cd03-49a0-a9f4-b2aaf9350abc\",\n      \"label\": \"label-5913\",\n      \"height\": 361,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"bf7cbfc2-7b0f-4e6a-a503-c036cc8f2a8c\",\n      \"label\": \"label-5914\",\n      \"height\": 140,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"1d69642c-deca-484e-98e8-3faf2c0cb094\",\n      \"label\": \"label-5915\",\n      \"height\": 523,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"6e855042-35bd-495d-86dd-6c83ab1035ee\",\n      \"label\": \"label-5916\",\n      \"height\": 172,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"8e641777-498e-475e-8923-77ef5d68ae64\",\n      \"label\": \"label-5917\",\n      \"height\": 356,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"c8544e02-8cd7-42ce-9be8-9c9b31027339\",\n      \"label\": \"label-5918\",\n      \"height\": 249,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"70197eae-0414-4598-94e9-70e3968acc44\",\n      \"label\": \"label-5919\",\n      \"height\": 326,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"43cc3a23-b268-4ef6-b8cc-d73e11be8da9\",\n      \"label\": \"label-5920\",\n      \"height\": 115,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"8538e6cf-1834-4b2c-a73a-4a169e51fa17\",\n      \"label\": \"label-5921\",\n      \"height\": 455,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"306a3ba2-14f8-4c06-ab46-fec30fd4a8f5\",\n      \"label\": \"label-5922\",\n      \"height\": 39,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"87c1a991-37ef-465f-9655-998b81049367\",\n      \"label\": \"label-5923\",\n      \"height\": 41,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"7b730676-e80d-49ef-9319-4f1c2c2277e0\",\n      \"label\": \"label-5924\",\n      \"height\": 248,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"49ab3024-8986-4976-bbcf-3244e43b3471\",\n      \"label\": \"label-5925\",\n      \"height\": 174,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"f133107e-ef7e-47d6-b0b4-a69ae3949b7b\",\n      \"label\": \"label-5926\",\n      \"height\": 145,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"bd1dbf14-9023-4b8b-9d20-64fd20334c1c\",\n      \"label\": \"label-5927\",\n      \"height\": 433,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"c4ad0699-90f7-4290-866d-7fab096754d5\",\n      \"label\": \"label-5928\",\n      \"height\": 66,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"d3559cf6-6942-439b-b9ed-f77d900efc71\",\n      \"label\": \"label-5929\",\n      \"height\": 422,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"63b40c2a-5b0f-44cc-bc6f-cae9ccd8edbd\",\n      \"label\": \"label-5930\",\n      \"height\": 129,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"1f964d47-bc4c-4016-a899-4f71692a015d\",\n      \"label\": \"label-5931\",\n      \"height\": 163,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"cc7dbb57-02d5-4de2-b31f-6b6cc3a8acfb\",\n      \"label\": \"label-5932\",\n      \"height\": 412,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"c8328dad-09e7-4315-af09-d178fc846b4a\",\n      \"label\": \"label-5933\",\n      \"height\": 466,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"1fc7a122-174a-48c1-9c61-43c5100408f1\",\n      \"label\": \"label-5934\",\n      \"height\": 143,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"3ad1a5aa-fa28-49ab-961f-fc33aeea5bf1\",\n      \"label\": \"label-5935\",\n      \"height\": 274,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"3d090e74-a2a3-4b33-a175-d938369ac72a\",\n      \"label\": \"label-5936\",\n      \"height\": 302,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"07c63b26-2d67-4965-85a4-68ba97c7d9b4\",\n      \"label\": \"label-5937\",\n      \"height\": 482,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"fb9c5aca-825c-4537-8269-eb456ff8de25\",\n      \"label\": \"label-5938\",\n      \"height\": 249,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"427bbb49-0b66-4c8a-9b61-7ac554867ff2\",\n      \"label\": \"label-5939\",\n      \"height\": 262,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"2be94d8e-f862-458e-9fa1-5e751e4d7a52\",\n      \"label\": \"label-5940\",\n      \"height\": 330,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"5b4a2a1f-b854-4208-a6a3-c25b94087843\",\n      \"label\": \"label-5941\",\n      \"height\": 474,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"8648b211-b5ce-49c1-b58e-2003dff35f0c\",\n      \"label\": \"label-5942\",\n      \"height\": 135,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"bbf8efea-eadf-49f7-b95b-d65b0e6d10d7\",\n      \"label\": \"label-5943\",\n      \"height\": 494,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"deaa34ba-4083-41ed-8c45-5f74b09bd8c6\",\n      \"label\": \"label-5944\",\n      \"height\": 332,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"0aebd34a-f34c-4b9c-88e9-7b2c18d34d9b\",\n      \"label\": \"label-5945\",\n      \"height\": 50,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"1c3aebf3-ea65-48bc-80be-f3596c893f47\",\n      \"label\": \"label-5946\",\n      \"height\": 103,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"37f1f4be-9685-438f-8c5a-69272e8ac72c\",\n      \"label\": \"label-5947\",\n      \"height\": 511,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"3ff29d5d-63d4-48f0-8138-235fc7510099\",\n      \"label\": \"label-5948\",\n      \"height\": 373,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"672f937d-22a5-4bba-b933-ef2f71ca959f\",\n      \"label\": \"label-5949\",\n      \"height\": 401,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"16b0fbe0-cd22-4cd6-bbf5-04459b7ece43\",\n      \"label\": \"label-5950\",\n      \"height\": 325,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"8ae63437-32fc-4e04-aedc-5c44b510f9d2\",\n      \"label\": \"label-5951\",\n      \"height\": 180,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"76d4ec15-4e18-47af-9954-a66884973b82\",\n      \"label\": \"label-5952\",\n      \"height\": 245,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"e88c1170-9731-4d3c-b831-7c6e14c85aa5\",\n      \"label\": \"label-5953\",\n      \"height\": 328,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"9aa6aa72-200e-4ea3-bec0-f0f8b5692860\",\n      \"label\": \"label-5954\",\n      \"height\": 362,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"2b3fc83a-5e67-4950-a3da-f0b20c280177\",\n      \"label\": \"label-5955\",\n      \"height\": 93,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"ff58a064-9246-4d47-9e86-053b37083a0b\",\n      \"label\": \"label-5956\",\n      \"height\": 232,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"e4ee31cd-d27d-4d45-9cd3-706297d03c0f\",\n      \"label\": \"label-5957\",\n      \"height\": 523,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"fb9cbcdf-05cd-409b-b357-817372e3ea63\",\n      \"label\": \"label-5958\",\n      \"height\": 442,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"cb3d1bd9-52e3-4060-b34e-33a6a93b7bcf\",\n      \"label\": \"label-5959\",\n      \"height\": 215,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"073b23b3-3a74-47ca-80cc-244669679192\",\n      \"label\": \"label-5960\",\n      \"height\": 59,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"52909899-24a0-4103-846a-4b25107e605e\",\n      \"label\": \"label-5961\",\n      \"height\": 126,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"6628d45b-1163-46a9-8f64-356d703e1947\",\n      \"label\": \"label-5962\",\n      \"height\": 452,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"83d4007f-287d-4d5e-9fdf-749449188a30\",\n      \"label\": \"label-5963\",\n      \"height\": 149,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"bd1e70a1-2440-41f6-82c5-1bad0b59a780\",\n      \"label\": \"label-5964\",\n      \"height\": 490,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"ea43180b-d81a-44be-a311-bfb05576a201\",\n      \"label\": \"label-5965\",\n      \"height\": 386,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"8492b598-d039-4b15-b411-42814225a28b\",\n      \"label\": \"label-5966\",\n      \"height\": 171,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"0389bca7-156e-4863-9d6e-411a97a3afb4\",\n      \"label\": \"label-5967\",\n      \"height\": 193,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"5bd9eb54-1baa-4e49-ba34-32bee5dde33e\",\n      \"label\": \"label-5968\",\n      \"height\": 193,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"1bc02b1c-844e-4479-a220-955c424ad28f\",\n      \"label\": \"label-5969\",\n      \"height\": 255,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"0e00a4af-16fd-49f4-bac1-f966ddb947f7\",\n      \"label\": \"label-5970\",\n      \"height\": 77,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"d66a73fd-375a-4732-b7b3-c7476ec9e8ba\",\n      \"label\": \"label-5971\",\n      \"height\": 317,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"241b7f6c-1c47-4678-8196-2aa2c11d9978\",\n      \"label\": \"label-5972\",\n      \"height\": 227,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"e459f4f0-87ca-4604-bf4c-d290baf0ed7d\",\n      \"label\": \"label-5973\",\n      \"height\": 412,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"740f6ef4-ccd7-4b6f-aa5b-078207d69e57\",\n      \"label\": \"label-5974\",\n      \"height\": 87,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"3a4a3b48-05bb-4ea4-8351-c66aded86c04\",\n      \"label\": \"label-5975\",\n      \"height\": 41,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"5d4ade36-78b9-4afd-a65e-16472613c041\",\n      \"label\": \"label-5976\",\n      \"height\": 274,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"4142b1bb-65d6-456f-a6d2-8414c082e675\",\n      \"label\": \"label-5977\",\n      \"height\": 507,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"a0a6b751-c46c-41f5-b478-3e73c814355d\",\n      \"label\": \"label-5978\",\n      \"height\": 461,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"df47dca5-b326-4033-a05d-e96f8e927c26\",\n      \"label\": \"label-5979\",\n      \"height\": 493,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"a9d1bdbf-97d1-42a4-99a7-631ab0496de6\",\n      \"label\": \"label-5980\",\n      \"height\": 129,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"a56bdf8c-3e7d-4152-81e2-b27606761be4\",\n      \"label\": \"label-5981\",\n      \"height\": 68,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"87328d65-11f6-4136-8883-ee21ae5fd559\",\n      \"label\": \"label-5982\",\n      \"height\": 131,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"d8d62c8b-d83f-4cbc-b66f-6bc19bfc057c\",\n      \"label\": \"label-5983\",\n      \"height\": 126,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"03e3d4b3-1e3b-4647-a3d5-ddcad91bb35d\",\n      \"label\": \"label-5984\",\n      \"height\": 487,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"45574747-596e-4007-9831-b0708b0985b0\",\n      \"label\": \"label-5985\",\n      \"height\": 372,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"e41e3395-af87-45a7-bc44-4fff2713e06b\",\n      \"label\": \"label-5986\",\n      \"height\": 229,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"f597b94f-6321-44e8-abea-7f26ff02273c\",\n      \"label\": \"label-5987\",\n      \"height\": 342,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"d6f7ddd2-0d4e-4a4b-acba-463d211a4126\",\n      \"label\": \"label-5988\",\n      \"height\": 469,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"a2645b4b-f24d-4da7-9563-111a00bcc882\",\n      \"label\": \"label-5989\",\n      \"height\": 371,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"4e13155a-bfed-4799-b625-f780e53d1512\",\n      \"label\": \"label-5990\",\n      \"height\": 234,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"181788bd-e267-4274-9992-f16643c2c83e\",\n      \"label\": \"label-5991\",\n      \"height\": 456,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"6ef74334-2269-448f-ad5d-479eb65c4316\",\n      \"label\": \"label-5992\",\n      \"height\": 47,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"e0ff8265-3060-43f0-b49b-b524d41c466c\",\n      \"label\": \"label-5993\",\n      \"height\": 266,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"69c1e0f6-9673-4451-bd6b-ccccf0dd08c5\",\n      \"label\": \"label-5994\",\n      \"height\": 483,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"97cdbc13-c4d0-495d-98c3-04ce4d173c56\",\n      \"label\": \"label-5995\",\n      \"height\": 391,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"dff41a8c-2dc1-4a5e-a0c3-c318c9af9cf9\",\n      \"label\": \"label-5996\",\n      \"height\": 102,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"942d2c75-34d3-42cd-b7a4-9b46fdf868cc\",\n      \"label\": \"label-5997\",\n      \"height\": 307,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"6eb31ec4-4e21-4f2d-abde-895c100a5f61\",\n      \"label\": \"label-5998\",\n      \"height\": 495,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"5bfdb78f-4a88-4863-a974-12c9e239ae79\",\n      \"label\": \"label-5999\",\n      \"height\": 522,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"b75a06c4-8b46-4692-a3c7-685e596b09ef\",\n      \"label\": \"label-6000\",\n      \"height\": 150,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"e70101ae-47ee-4138-bbde-0fe370ad3d22\",\n      \"label\": \"label-6001\",\n      \"height\": 326,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"fc7ca152-a638-4cf2-9e95-d40bda1d712c\",\n      \"label\": \"label-6002\",\n      \"height\": 312,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"86e5b038-57ea-46a5-afc8-32a0ac95d975\",\n      \"label\": \"label-6003\",\n      \"height\": 351,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"cd5499fe-86eb-43a3-9992-8da5e314b73f\",\n      \"label\": \"label-6004\",\n      \"height\": 227,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"9cedcfc3-b958-4824-8e58-f49ec09b1572\",\n      \"label\": \"label-6005\",\n      \"height\": 434,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"d70da89a-4b37-40b7-9dc9-eb5d18bc9170\",\n      \"label\": \"label-6006\",\n      \"height\": 208,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"44a9543b-624e-4530-9e82-7b7531192849\",\n      \"label\": \"label-6007\",\n      \"height\": 112,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"cbe8dc01-0cf3-48e6-8900-c99d8845b207\",\n      \"label\": \"label-6008\",\n      \"height\": 249,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"f834fdee-a199-4cf6-bda8-759cc54884c7\",\n      \"label\": \"label-6009\",\n      \"height\": 261,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"a8e421ac-ed0a-4217-b4c3-13ac4d554d31\",\n      \"label\": \"label-6010\",\n      \"height\": 338,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"ba8d4056-f104-4dc0-a8de-33f49e21feb5\",\n      \"label\": \"label-6011\",\n      \"height\": 270,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"e2b40bdb-fe40-46de-9a18-0f2c32a97a0b\",\n      \"label\": \"label-6012\",\n      \"height\": 441,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"4a3d68db-4390-4764-a130-d674dfb79392\",\n      \"label\": \"label-6013\",\n      \"height\": 204,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"011070c9-9503-4025-a0bb-8ae17890978a\",\n      \"label\": \"label-6014\",\n      \"height\": 237,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"fb90f1fe-9915-4401-9545-81ee4ded473d\",\n      \"label\": \"label-6015\",\n      \"height\": 54,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"e886d22b-1320-4c77-a823-094640381745\",\n      \"label\": \"label-6016\",\n      \"height\": 447,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"459f2f75-ca5d-4e54-9b74-264b232a1044\",\n      \"label\": \"label-6017\",\n      \"height\": 474,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"e2fa501b-f6cf-4d2e-a5a8-39c28580847a\",\n      \"label\": \"label-6018\",\n      \"height\": 58,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"36a2a881-d05b-44cc-bc5f-e1c214bd3bb4\",\n      \"label\": \"label-6019\",\n      \"height\": 283,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"abe2253e-1abb-459a-86a6-e4738d6f13f4\",\n      \"label\": \"label-6020\",\n      \"height\": 511,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"cea745c4-ea18-46bd-ae35-90ffbabaff22\",\n      \"label\": \"label-6021\",\n      \"height\": 512,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"0bee55c0-bfe6-4d1d-94ec-214ede6fb464\",\n      \"label\": \"label-6022\",\n      \"height\": 242,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"847f5ee1-8c44-4645-ac31-3483ad4eb60e\",\n      \"label\": \"label-6023\",\n      \"height\": 323,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"3b1b938f-e7bd-4b6e-8255-666e9fa16e5d\",\n      \"label\": \"label-6024\",\n      \"height\": 411,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"c08c8f8b-fc15-4748-96ea-d9da38bb1223\",\n      \"label\": \"label-6025\",\n      \"height\": 279,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"99c5c6fa-ab03-4f4d-aed7-a22a042adfa0\",\n      \"label\": \"label-6026\",\n      \"height\": 236,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"e7f79a5f-94de-405e-9021-94a8f6caa3e2\",\n      \"label\": \"label-6027\",\n      \"height\": 185,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"edfb7d7b-c5c7-4f4a-abea-83bef850c5cb\",\n      \"label\": \"label-6028\",\n      \"height\": 371,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"ee19912e-c158-4eef-9afc-349d5e2d94ae\",\n      \"label\": \"label-6029\",\n      \"height\": 429,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"08e4169c-bcfc-4e11-8190-0b76940809e2\",\n      \"label\": \"label-6030\",\n      \"height\": 387,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"b1a6be9c-b537-42e7-bae3-d742f1770f70\",\n      \"label\": \"label-6031\",\n      \"height\": 147,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"46baba91-7b6d-4783-b2ad-ef5f1c670b4c\",\n      \"label\": \"label-6032\",\n      \"height\": 260,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"39e8be15-5fe4-4de1-af75-c8e3335f573f\",\n      \"label\": \"label-6033\",\n      \"height\": 447,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"c003cbf2-0f5b-4c1b-b873-17d3fe2dbe3c\",\n      \"label\": \"label-6034\",\n      \"height\": 481,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"324b2014-b6ce-4d40-812f-6d42e4361e5e\",\n      \"label\": \"label-6035\",\n      \"height\": 210,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"0edc1407-a1c4-4263-96ba-c722133d8b11\",\n      \"label\": \"label-6036\",\n      \"height\": 269,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"977f21a7-f6fb-48c0-88bb-93319b47aa93\",\n      \"label\": \"label-6037\",\n      \"height\": 139,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"a7f0ff2a-2b56-40a8-a20d-c7faf84c12b3\",\n      \"label\": \"label-6038\",\n      \"height\": 320,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"e50d289f-53ec-4bd2-9d85-4cb92e77913c\",\n      \"label\": \"label-6039\",\n      \"height\": 93,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"1cd8434a-4adb-4a20-8e7f-079e1319a628\",\n      \"label\": \"label-6040\",\n      \"height\": 354,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"8c35e9a9-5a2a-47e9-858d-3762cb099976\",\n      \"label\": \"label-6041\",\n      \"height\": 192,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"77dae1fa-3d41-4e70-9c1a-fd0fb70ab1c6\",\n      \"label\": \"label-6042\",\n      \"height\": 456,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"bd3173f6-c23c-4c5f-a89a-3fc0be8a9634\",\n      \"label\": \"label-6043\",\n      \"height\": 310,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"083da5d8-887d-46a8-a42b-7397a7cb5979\",\n      \"label\": \"label-6044\",\n      \"height\": 137,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"ee7faa6c-d4b7-4b02-a869-68f0ad510a58\",\n      \"label\": \"label-6045\",\n      \"height\": 318,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"ee36ff28-9da1-45e7-842a-c4123f5c6c40\",\n      \"label\": \"label-6046\",\n      \"height\": 250,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"2af3537b-2538-4a05-9443-d334ceaba501\",\n      \"label\": \"label-6047\",\n      \"height\": 59,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"13a9e1c2-addb-4ffe-8cfe-960836b325d5\",\n      \"label\": \"label-6048\",\n      \"height\": 413,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"a4bfd6ef-d97d-4b0c-a53e-6a48d3726a17\",\n      \"label\": \"label-6049\",\n      \"height\": 424,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"29e3583c-71b2-46f4-911f-945b4988ba96\",\n      \"label\": \"label-6050\",\n      \"height\": 364,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"0311e67e-05d2-4a32-8dc9-2ab5b386b594\",\n      \"label\": \"label-6051\",\n      \"height\": 453,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"a0b1bc0d-95e5-491a-ba9a-bac02b76d47c\",\n      \"label\": \"label-6052\",\n      \"height\": 140,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"f80fbe37-4def-4437-ba18-16f42351a6b7\",\n      \"label\": \"label-6053\",\n      \"height\": 335,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"4fcc0567-6050-4e55-ae2b-ba3617a5bc20\",\n      \"label\": \"label-6054\",\n      \"height\": 285,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"5eab8daf-89c8-47b1-8961-b0281735f46f\",\n      \"label\": \"label-6055\",\n      \"height\": 212,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"9d1f000a-4013-4160-84a3-fc2f9b8da8c7\",\n      \"label\": \"label-6056\",\n      \"height\": 85,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"6f5e4df9-4ba1-4191-9fb6-c1b5e3e08f65\",\n      \"label\": \"label-6057\",\n      \"height\": 283,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"712cd01f-30bd-4454-af74-81cea69ac1f1\",\n      \"label\": \"label-6058\",\n      \"height\": 408,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"e24b0bc6-aa5f-4eff-8d62-28a08edf1bdd\",\n      \"label\": \"label-6059\",\n      \"height\": 102,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"c91cf609-b392-4a67-b149-23f7cbd839d7\",\n      \"label\": \"label-6060\",\n      \"height\": 38,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"b1dddcd5-4ad4-4e74-bd2f-8066738d9e8f\",\n      \"label\": \"label-6061\",\n      \"height\": 225,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"93d8e167-2269-4ae4-9241-c8771f524716\",\n      \"label\": \"label-6062\",\n      \"height\": 228,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"bdaf3ff3-9053-4c12-bcfb-ec4663c80cc5\",\n      \"label\": \"label-6063\",\n      \"height\": 211,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"d66a13d9-89a9-411c-a638-b3234d5afb82\",\n      \"label\": \"label-6064\",\n      \"height\": 259,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"bd4f7a4b-eafd-47ad-8f1c-1448811be40c\",\n      \"label\": \"label-6065\",\n      \"height\": 152,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"16ab9a96-1985-44d4-bd55-a43aa3194d6a\",\n      \"label\": \"label-6066\",\n      \"height\": 261,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"31d58d2b-7914-4877-a663-55f04bd76c36\",\n      \"label\": \"label-6067\",\n      \"height\": 452,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"d99e4ace-6d1d-42a5-80fc-f30eb66aa3af\",\n      \"label\": \"label-6068\",\n      \"height\": 298,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"1acb0706-6a75-4aa1-ba1d-97b081c055d2\",\n      \"label\": \"label-6069\",\n      \"height\": 163,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"0e6a5d93-f82b-4e8c-bd8e-b961c1c6b793\",\n      \"label\": \"label-6070\",\n      \"height\": 207,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"90371f7f-7668-4ccf-9fca-9b4c4d476c2e\",\n      \"label\": \"label-6071\",\n      \"height\": 531,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"f3660eaa-9cbf-468d-afad-779926b6ee6d\",\n      \"label\": \"label-6072\",\n      \"height\": 80,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"38bfea40-daae-4d48-9f15-7d913afcdc89\",\n      \"label\": \"label-6073\",\n      \"height\": 477,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"f303642c-bc4b-4427-927e-e03b648cb983\",\n      \"label\": \"label-6074\",\n      \"height\": 273,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"a5e0acfd-f4eb-4cbe-b4bc-4f9703d64bb1\",\n      \"label\": \"label-6075\",\n      \"height\": 517,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"449a2744-a802-4546-90ab-43a3dbe42a89\",\n      \"label\": \"label-6076\",\n      \"height\": 479,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"b893a4de-9e76-4706-99e6-6a9fb8a19fdd\",\n      \"label\": \"label-6077\",\n      \"height\": 272,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"03e50ee1-4163-4ae6-9ec2-f4db921023df\",\n      \"label\": \"label-6078\",\n      \"height\": 117,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"45ecaf73-f4bf-48d5-b791-eb77ba41eb29\",\n      \"label\": \"label-6079\",\n      \"height\": 244,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"7a0e2813-dd36-4ed1-afb1-19d5076b634d\",\n      \"label\": \"label-6080\",\n      \"height\": 33,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"02221f05-0f76-49a8-8542-f07c977f2a1f\",\n      \"label\": \"label-6081\",\n      \"height\": 36,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"dffcef29-8063-4c7b-bb15-daa6e81c406d\",\n      \"label\": \"label-6082\",\n      \"height\": 456,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"cea42dca-7f93-4456-812a-e6c40a19c0c0\",\n      \"label\": \"label-6083\",\n      \"height\": 75,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"83700f6c-6cb1-4ad4-abdb-e2c1337efcba\",\n      \"label\": \"label-6084\",\n      \"height\": 365,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"47ec41c9-2b7b-4d4c-aca3-ca387a05fb9c\",\n      \"label\": \"label-6085\",\n      \"height\": 514,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"1af3bfcd-d244-4601-9287-3744be85d4d4\",\n      \"label\": \"label-6086\",\n      \"height\": 71,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"5e90cd91-46c5-4e4e-b31f-13b94626697e\",\n      \"label\": \"label-6087\",\n      \"height\": 518,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"b3105681-e0f8-44fd-9457-5d217fcc491e\",\n      \"label\": \"label-6088\",\n      \"height\": 103,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"69497ed9-50c3-474a-b600-d7052de31522\",\n      \"label\": \"label-6089\",\n      \"height\": 464,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"b32c35bd-19a2-411e-a082-2a8434bb78f8\",\n      \"label\": \"label-6090\",\n      \"height\": 150,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"8fa36214-e354-4ec8-8c46-5f5b4862940d\",\n      \"label\": \"label-6091\",\n      \"height\": 509,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"19ab7f5c-cf61-423a-8c9d-a9b4f1b5bbfd\",\n      \"label\": \"label-6092\",\n      \"height\": 508,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"7e0938e0-32a9-45b4-9199-b23afa862da8\",\n      \"label\": \"label-6093\",\n      \"height\": 330,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"0223c922-6a18-4e55-949d-054dd12797bd\",\n      \"label\": \"label-6094\",\n      \"height\": 287,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"eb81afb4-63e5-4452-8bb8-c0ffcab403ca\",\n      \"label\": \"label-6095\",\n      \"height\": 352,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"a5112103-99e6-4e6e-bc56-68029df91933\",\n      \"label\": \"label-6096\",\n      \"height\": 183,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"5c371d64-cae2-4af8-82c2-3f8a4717158b\",\n      \"label\": \"label-6097\",\n      \"height\": 518,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"68635c6d-6333-472a-b5de-00f4249ebf94\",\n      \"label\": \"label-6098\",\n      \"height\": 83,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"65e30213-e088-4623-9a89-6249d8353f92\",\n      \"label\": \"label-6099\",\n      \"height\": 433,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"28ff1b1a-bd52-48bd-82de-0e17753a484d\",\n      \"label\": \"label-6100\",\n      \"height\": 331,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"b29d27fa-01fb-4a04-9640-f2d2670398f1\",\n      \"label\": \"label-6101\",\n      \"height\": 524,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"ea151928-f3be-416b-9c1f-15806dcb0d77\",\n      \"label\": \"label-6102\",\n      \"height\": 211,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"31bc9184-53f0-4dda-aa8a-4aa0f9440852\",\n      \"label\": \"label-6103\",\n      \"height\": 379,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"a14386df-44e1-4447-9560-652684a0380d\",\n      \"label\": \"label-6104\",\n      \"height\": 233,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"3f6a3e96-e092-4af9-aa39-c2ffeec2b8a7\",\n      \"label\": \"label-6105\",\n      \"height\": 98,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"1b681518-f075-4044-832e-fab80e70b0f4\",\n      \"label\": \"label-6106\",\n      \"height\": 482,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"810b274d-12c1-403e-b91f-804052579b9e\",\n      \"label\": \"label-6107\",\n      \"height\": 430,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"a7236ce0-d218-4793-ab5f-08981dd10669\",\n      \"label\": \"label-6108\",\n      \"height\": 55,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"76376501-b992-47d7-90e9-a3189913fa77\",\n      \"label\": \"label-6109\",\n      \"height\": 304,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"daf2161e-e9eb-4b8e-8065-56c0d5118aac\",\n      \"label\": \"label-6110\",\n      \"height\": 390,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"1d84a142-741c-4673-be8a-11cd93d480fe\",\n      \"label\": \"label-6111\",\n      \"height\": 68,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"f6310069-1575-4c97-9369-67d65f78a56f\",\n      \"label\": \"label-6112\",\n      \"height\": 245,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"a4366699-553c-4e41-9d89-53c86095d0be\",\n      \"label\": \"label-6113\",\n      \"height\": 426,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"cfabbfc0-d78b-46f2-863c-b7df4926d937\",\n      \"label\": \"label-6114\",\n      \"height\": 161,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"83c4468a-a578-4a29-8667-007ad39ec113\",\n      \"label\": \"label-6115\",\n      \"height\": 328,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"05c14f70-f7fe-488a-80ee-5e6f28a2098d\",\n      \"label\": \"label-6116\",\n      \"height\": 521,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"c3857af2-0455-457e-9992-643c2901d02a\",\n      \"label\": \"label-6117\",\n      \"height\": 486,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"12a1d80a-2610-4831-873c-f86abab19184\",\n      \"label\": \"label-6118\",\n      \"height\": 240,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"05fb4d28-8064-4a7d-a3da-8da01048aae9\",\n      \"label\": \"label-6119\",\n      \"height\": 116,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"56c1a839-c6b7-4fd9-82fe-4aada50abfb4\",\n      \"label\": \"label-6120\",\n      \"height\": 485,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"d4ef686e-7557-476a-87fa-617ce45f2a92\",\n      \"label\": \"label-6121\",\n      \"height\": 350,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"173c9a32-74d6-459c-b04b-60a05226615c\",\n      \"label\": \"label-6122\",\n      \"height\": 56,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"396f91e4-4bc4-4770-ab1d-9503d6388684\",\n      \"label\": \"label-6123\",\n      \"height\": 226,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"9a07c058-2318-4e49-9bda-ac0ca03dfb96\",\n      \"label\": \"label-6124\",\n      \"height\": 498,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"0be6b99b-8bb1-446f-9d4b-5c6e8d4d867b\",\n      \"label\": \"label-6125\",\n      \"height\": 405,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"31fcecb6-d7bb-458b-b6fc-ccc91d4d407a\",\n      \"label\": \"label-6126\",\n      \"height\": 58,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"4f4234f2-4aaf-4b7e-8600-b4350d5f9bfc\",\n      \"label\": \"label-6127\",\n      \"height\": 262,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"892f82f5-ab84-467a-8dc5-62cdd3a5b25c\",\n      \"label\": \"label-6128\",\n      \"height\": 243,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"8dfe7f7f-51b8-45bb-8ac2-a612a55adae7\",\n      \"label\": \"label-6129\",\n      \"height\": 353,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"d32d1342-1228-4515-8bf0-7e8b79f03740\",\n      \"label\": \"label-6130\",\n      \"height\": 144,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"85dcc2ac-2600-4f9c-90a1-f424151b9ead\",\n      \"label\": \"label-6131\",\n      \"height\": 57,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"7d2b5819-af94-4fe5-86dc-d219a6b11fa4\",\n      \"label\": \"label-6132\",\n      \"height\": 88,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"73bc4dcd-e7ff-4ea1-bdf8-46c9318ffbab\",\n      \"label\": \"label-6133\",\n      \"height\": 434,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"4d3c20f2-fde2-4d54-b305-7e44998395ca\",\n      \"label\": \"label-6134\",\n      \"height\": 216,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"b2672b81-2aa9-4ec0-a15b-ac43a1dd87e7\",\n      \"label\": \"label-6135\",\n      \"height\": 33,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"493ae385-d96e-4e5f-86f7-3e60716db8cc\",\n      \"label\": \"label-6136\",\n      \"height\": 79,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"2d1dcfbd-443a-4ef3-993a-3a5432cda702\",\n      \"label\": \"label-6137\",\n      \"height\": 294,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"4a345a5c-f796-444d-a3eb-fde3fc47cb8e\",\n      \"label\": \"label-6138\",\n      \"height\": 143,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"0b5bafdf-43de-4024-a117-8537a0f3b28b\",\n      \"label\": \"label-6139\",\n      \"height\": 296,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"3816a54e-25a0-4c1e-8b8d-2cf5e51a3ae3\",\n      \"label\": \"label-6140\",\n      \"height\": 379,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"cfb845fd-7fb7-4371-850d-e09ba3379a4d\",\n      \"label\": \"label-6141\",\n      \"height\": 109,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"e9694188-d256-420f-8ceb-96d0cac39add\",\n      \"label\": \"label-6142\",\n      \"height\": 272,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"e26f9a2b-59e9-4ea8-af35-ceb32b098752\",\n      \"label\": \"label-6143\",\n      \"height\": 353,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"aef15dcb-6224-4ba4-97eb-1f25bb2d8419\",\n      \"label\": \"label-6144\",\n      \"height\": 457,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"9800c4cb-9b76-47f5-bd91-b0c8c64121b3\",\n      \"label\": \"label-6145\",\n      \"height\": 319,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"e274c626-0900-4805-ad2a-a21a0bddaf76\",\n      \"label\": \"label-6146\",\n      \"height\": 388,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"bcbaffcf-7b8b-4cae-836d-b39115885356\",\n      \"label\": \"label-6147\",\n      \"height\": 101,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"deface05-3f3e-4dab-8698-27e37b4e4e72\",\n      \"label\": \"label-6148\",\n      \"height\": 323,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"ecdd22b0-a4fb-4563-b0d9-f8234210ddf9\",\n      \"label\": \"label-6149\",\n      \"height\": 121,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"8d24a5c6-5366-4068-89c0-4cc9f893fe9a\",\n      \"label\": \"label-6150\",\n      \"height\": 369,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"148e1e4b-2802-4de0-9930-a49291b8784f\",\n      \"label\": \"label-6151\",\n      \"height\": 434,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"3e776bbe-8abb-414a-b55c-91d276f67438\",\n      \"label\": \"label-6152\",\n      \"height\": 358,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"b9866a3d-3dc0-4e92-9cc8-b26b80a1c635\",\n      \"label\": \"label-6153\",\n      \"height\": 206,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"db7e2da8-dd4a-49f5-ad61-28dc43527110\",\n      \"label\": \"label-6154\",\n      \"height\": 188,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"7f4120bb-ae3a-4696-9c07-8c106d681caf\",\n      \"label\": \"label-6155\",\n      \"height\": 211,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"79503cf1-162e-4dc2-beb2-86d64a81ff59\",\n      \"label\": \"label-6156\",\n      \"height\": 437,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"60554ec7-24ab-4621-88b1-3c46b3d51dc3\",\n      \"label\": \"label-6157\",\n      \"height\": 98,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"2e06e1b2-2c10-4ca6-8fdf-5a641eeb483c\",\n      \"label\": \"label-6158\",\n      \"height\": 329,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"203ce0a3-9111-4114-b50a-a94b0b827f8d\",\n      \"label\": \"label-6159\",\n      \"height\": 409,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"afdad92d-d36d-4904-a8f2-30da34993b79\",\n      \"label\": \"label-6160\",\n      \"height\": 167,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"7edfb200-79ae-4e30-a412-3e4eb2bcdbc8\",\n      \"label\": \"label-6161\",\n      \"height\": 480,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"5d023304-78e1-4caf-962a-7198563032e4\",\n      \"label\": \"label-6162\",\n      \"height\": 273,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"975b9c81-9f45-4ab9-aaa0-4248decd4a0c\",\n      \"label\": \"label-6163\",\n      \"height\": 261,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"0f271964-4874-4d8e-9487-1a0cbf897210\",\n      \"label\": \"label-6164\",\n      \"height\": 473,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"077bbff3-4539-4943-8cec-449e176c685d\",\n      \"label\": \"label-6165\",\n      \"height\": 45,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"d9716e35-955e-478c-a0a3-43e71efb096e\",\n      \"label\": \"label-6166\",\n      \"height\": 393,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"a7074bd5-c0c8-44f1-8156-2dbe2a14d2b0\",\n      \"label\": \"label-6167\",\n      \"height\": 529,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"935fac93-174b-4353-b091-df78770d3384\",\n      \"label\": \"label-6168\",\n      \"height\": 217,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"84b434ee-3c01-484b-90a7-605a996ce77a\",\n      \"label\": \"label-6169\",\n      \"height\": 257,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"91905585-fae3-419c-895c-03e5f7787f77\",\n      \"label\": \"label-6170\",\n      \"height\": 97,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"cba60f9b-0533-484a-bc99-0673c8a04bfc\",\n      \"label\": \"label-6171\",\n      \"height\": 95,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"d38d6035-7c51-46cc-964c-3d2a9c38e254\",\n      \"label\": \"label-6172\",\n      \"height\": 441,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"baf44d6c-f0c6-437c-a701-548dbcb5d580\",\n      \"label\": \"label-6173\",\n      \"height\": 213,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"29c8364f-e50d-409c-9583-2ba0e0319acf\",\n      \"label\": \"label-6174\",\n      \"height\": 36,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"b939ce3c-f3cb-4299-8bdd-899f779c6966\",\n      \"label\": \"label-6175\",\n      \"height\": 281,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"8565fc7a-0325-46c5-a1db-6dcd3f57d500\",\n      \"label\": \"label-6176\",\n      \"height\": 375,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"685de69c-5991-4201-9a25-37b806240013\",\n      \"label\": \"label-6177\",\n      \"height\": 275,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"19d88da6-866d-4cdd-b69f-231216e75f87\",\n      \"label\": \"label-6178\",\n      \"height\": 345,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"173ebb8f-afd2-4cf9-8e09-7e3a9dd17599\",\n      \"label\": \"label-6179\",\n      \"height\": 466,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"ecc09f62-db63-4578-a92c-5c1213b219d4\",\n      \"label\": \"label-6180\",\n      \"height\": 132,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"78226d3f-a51e-41b8-a367-1c4b947dec08\",\n      \"label\": \"label-6181\",\n      \"height\": 347,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"9b78ec2e-c820-4970-8dd0-c09274584440\",\n      \"label\": \"label-6182\",\n      \"height\": 517,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"17c38c1e-97f7-4694-bb83-181dbe58e861\",\n      \"label\": \"label-6183\",\n      \"height\": 36,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"9d176db5-c1f6-43fa-b04e-456ef9079e10\",\n      \"label\": \"label-6184\",\n      \"height\": 105,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"ee9d3aea-f6d4-42fc-b4e6-8d99adb904aa\",\n      \"label\": \"label-6185\",\n      \"height\": 276,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"0a90a9ec-cfce-4b62-bc74-7fea20dff289\",\n      \"label\": \"label-6186\",\n      \"height\": 159,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"0acbd7b1-8655-40e2-a343-3f22cd52f86e\",\n      \"label\": \"label-6187\",\n      \"height\": 276,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"6860ac36-c54f-4a69-b9ef-6fbe369d481e\",\n      \"label\": \"label-6188\",\n      \"height\": 282,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"a9a06816-6f51-4a5c-aedb-ea574bba0aa5\",\n      \"label\": \"label-6189\",\n      \"height\": 154,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"60c43c24-9ccf-43d5-bed6-728e5f04b8da\",\n      \"label\": \"label-6190\",\n      \"height\": 148,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"8f708388-79e8-4fe0-9aab-4cc39076331d\",\n      \"label\": \"label-6191\",\n      \"height\": 51,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"1beec431-8f86-4a09-a1b9-fd4d5001e0d7\",\n      \"label\": \"label-6192\",\n      \"height\": 40,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"46af1779-842b-46ee-8e22-b715a0462d12\",\n      \"label\": \"label-6193\",\n      \"height\": 83,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"9001b8a7-e4c3-4847-b121-c543a2208801\",\n      \"label\": \"label-6194\",\n      \"height\": 450,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"b1846011-cc26-4205-af81-ec29e5355a92\",\n      \"label\": \"label-6195\",\n      \"height\": 516,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"becc162a-e915-4798-b24f-b15eab89a825\",\n      \"label\": \"label-6196\",\n      \"height\": 310,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"3bc2254c-afa0-4549-a26e-b60050d94fc0\",\n      \"label\": \"label-6197\",\n      \"height\": 253,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"e73d68c2-3dc7-40c4-9bfc-61ea592273b6\",\n      \"label\": \"label-6198\",\n      \"height\": 78,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"d5220ed8-132d-4f8b-8df3-ac0416816311\",\n      \"label\": \"label-6199\",\n      \"height\": 455,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"d25f9d1c-815d-4199-bbb6-f473977eb0f8\",\n      \"label\": \"label-6200\",\n      \"height\": 77,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"1fd20b66-6f59-4730-888a-95f0ff73720d\",\n      \"label\": \"label-6201\",\n      \"height\": 502,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"1bdc1923-cde4-4822-b2f2-4bbfb2d189a7\",\n      \"label\": \"label-6202\",\n      \"height\": 281,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"7ceb8b50-c575-4f65-bc6c-93cb3ff0a598\",\n      \"label\": \"label-6203\",\n      \"height\": 86,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"c2683de8-0dcf-449d-9011-f2988c4c1599\",\n      \"label\": \"label-6204\",\n      \"height\": 248,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"30e54c58-83bd-4b18-ae01-acb086f71a22\",\n      \"label\": \"label-6205\",\n      \"height\": 277,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"31496504-b104-4308-a4b0-45799019c4b8\",\n      \"label\": \"label-6206\",\n      \"height\": 136,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"7303ee97-3705-47fd-861f-c0aea1f383cc\",\n      \"label\": \"label-6207\",\n      \"height\": 240,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"c452bd27-a24a-48b0-9dde-fe05a000119d\",\n      \"label\": \"label-6208\",\n      \"height\": 432,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"d4728474-5c6d-4676-b111-bf3577baee7d\",\n      \"label\": \"label-6209\",\n      \"height\": 263,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"3c1b377a-a9bb-4bf0-8e33-a375c60dc29f\",\n      \"label\": \"label-6210\",\n      \"height\": 43,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"e4153a8e-5603-4f09-9659-e20b35419a7b\",\n      \"label\": \"label-6211\",\n      \"height\": 288,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"12aa3b46-b570-4832-b2fa-4e9f44d97efd\",\n      \"label\": \"label-6212\",\n      \"height\": 342,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"11a3bf93-9b01-43ac-a732-e3d3473f5708\",\n      \"label\": \"label-6213\",\n      \"height\": 252,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"9bfc09e9-55ce-478d-81a3-f6b33ac740bd\",\n      \"label\": \"label-6214\",\n      \"height\": 236,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"7feb8a2a-daeb-45be-a8e5-07f026a5bf30\",\n      \"label\": \"label-6215\",\n      \"height\": 236,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"b8927cc4-f26a-4f40-a543-6fe2abae3a36\",\n      \"label\": \"label-6216\",\n      \"height\": 75,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"9819633c-5006-4c83-8fa8-f49c2c0a8f20\",\n      \"label\": \"label-6217\",\n      \"height\": 154,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"bd2fd35d-8d44-4854-b7fd-d920fa79d61a\",\n      \"label\": \"label-6218\",\n      \"height\": 54,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"fef572f3-ea2c-41c9-ac3f-e428410b9db8\",\n      \"label\": \"label-6219\",\n      \"height\": 282,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"d3d49be5-24c5-4746-826e-12e142cea467\",\n      \"label\": \"label-6220\",\n      \"height\": 483,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"23eb55ca-eb20-4049-944a-3a71c5452f4f\",\n      \"label\": \"label-6221\",\n      \"height\": 49,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"4ba6b5f0-184f-4594-b10e-a24c927bdb48\",\n      \"label\": \"label-6222\",\n      \"height\": 403,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"98dff516-75c3-4f16-884c-64a1e87dbddd\",\n      \"label\": \"label-6223\",\n      \"height\": 241,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"4b3bb2c0-17e3-40d9-9282-7b9e42412f9e\",\n      \"label\": \"label-6224\",\n      \"height\": 144,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"8194ce65-bb89-466c-b50c-5ff71e25f9b7\",\n      \"label\": \"label-6225\",\n      \"height\": 437,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"3a98e63f-07cf-4d4d-a71a-ec8da043ff2b\",\n      \"label\": \"label-6226\",\n      \"height\": 281,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"aace98bc-43f4-4d54-8489-5b669da0e699\",\n      \"label\": \"label-6227\",\n      \"height\": 92,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"6cdf4310-dfed-4d56-805a-3572200044e5\",\n      \"label\": \"label-6228\",\n      \"height\": 404,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"72381fd9-f5fe-416e-b044-8f3137555483\",\n      \"label\": \"label-6229\",\n      \"height\": 111,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"b60c552e-565b-4d84-a6d6-1aec5d6ee864\",\n      \"label\": \"label-6230\",\n      \"height\": 78,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"a11f67f9-460a-429b-911b-c0dd0307e961\",\n      \"label\": \"label-6231\",\n      \"height\": 67,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"2b371169-cf65-4633-8e36-a301f8b72236\",\n      \"label\": \"label-6232\",\n      \"height\": 344,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"b6c0e4d1-06f1-4c64-b397-b2c1568577a7\",\n      \"label\": \"label-6233\",\n      \"height\": 494,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"c05f3a4a-5bf6-42b3-9adb-d1593337b887\",\n      \"label\": \"label-6234\",\n      \"height\": 134,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"f4415620-2c54-4914-abe9-c21ef3291115\",\n      \"label\": \"label-6235\",\n      \"height\": 505,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"6e68a729-4a73-4073-b7ce-bcad895ffd95\",\n      \"label\": \"label-6236\",\n      \"height\": 316,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"3f536ba5-d6de-469e-a616-c31ed56ebba8\",\n      \"label\": \"label-6237\",\n      \"height\": 255,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"45504d88-6339-4a01-8f36-9493423c3107\",\n      \"label\": \"label-6238\",\n      \"height\": 368,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"f70f24cf-4ac7-4acb-9704-4371f07cb830\",\n      \"label\": \"label-6239\",\n      \"height\": 65,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"cc203831-eee8-4454-b072-ce13ee2078fb\",\n      \"label\": \"label-6240\",\n      \"height\": 92,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"10a86c9f-0827-43cd-b54b-765945db2b88\",\n      \"label\": \"label-6241\",\n      \"height\": 477,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"56f083c0-71df-455c-9e41-31080c9e0e3e\",\n      \"label\": \"label-6242\",\n      \"height\": 225,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"107e601a-fc3f-469f-9ce2-3169d0e63111\",\n      \"label\": \"label-6243\",\n      \"height\": 127,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"aec760fb-69d8-492c-a5c4-afd6efbca1f0\",\n      \"label\": \"label-6244\",\n      \"height\": 351,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"c6ece9ba-7aeb-4cdd-850e-f165aab15a7b\",\n      \"label\": \"label-6245\",\n      \"height\": 237,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"df178984-a50d-4e9a-bed0-be401deced67\",\n      \"label\": \"label-6246\",\n      \"height\": 142,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"72dad759-a353-4e3d-abfd-ea63b7c29b83\",\n      \"label\": \"label-6247\",\n      \"height\": 524,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"4ca50346-8770-43a2-aea9-fa9a77dfff57\",\n      \"label\": \"label-6248\",\n      \"height\": 484,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"c01dfa67-156b-4aad-a3bc-41d8545f2b45\",\n      \"label\": \"label-6249\",\n      \"height\": 437,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"40bf4374-35ce-49e3-bd6b-437300f05c41\",\n      \"label\": \"label-6250\",\n      \"height\": 229,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"301da5d3-481b-4147-b093-68cd290341f3\",\n      \"label\": \"label-6251\",\n      \"height\": 258,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"ff527556-4947-4073-901c-691d829c0a6c\",\n      \"label\": \"label-6252\",\n      \"height\": 203,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"8e35c984-b5fa-4465-8bcb-addd03ec75f1\",\n      \"label\": \"label-6253\",\n      \"height\": 314,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"1ab02ac9-0bd7-4b31-a5c7-d009b5361b56\",\n      \"label\": \"label-6254\",\n      \"height\": 394,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"7836384e-97f1-422a-9db2-4ec0b1ba8b92\",\n      \"label\": \"label-6255\",\n      \"height\": 515,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"96406b37-78f1-4e9e-97fa-d55a529314c2\",\n      \"label\": \"label-6256\",\n      \"height\": 350,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"ef34bc44-1a7c-4c63-9028-f6f5817443c0\",\n      \"label\": \"label-6257\",\n      \"height\": 464,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"a0580bbf-77c6-47ae-8146-409fbf3d5b4b\",\n      \"label\": \"label-6258\",\n      \"height\": 126,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"157e40b5-d070-4b38-adc8-f818de58ed6e\",\n      \"label\": \"label-6259\",\n      \"height\": 70,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"a43e4141-e3cf-401e-ac9f-b8dd05be19cf\",\n      \"label\": \"label-6260\",\n      \"height\": 358,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"9d3e379d-3ffd-4c45-a6c5-06be5342e94e\",\n      \"label\": \"label-6261\",\n      \"height\": 218,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"54f40a7a-a448-4e29-b6d4-ea81983f5369\",\n      \"label\": \"label-6262\",\n      \"height\": 365,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"617aa811-a80e-4747-83b9-9067a5dea7dd\",\n      \"label\": \"label-6263\",\n      \"height\": 173,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"bb4741a9-b40a-4c0e-8e77-9eed9535b364\",\n      \"label\": \"label-6264\",\n      \"height\": 472,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"ce42990a-2387-4991-9ae2-907f60ff264f\",\n      \"label\": \"label-6265\",\n      \"height\": 361,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"82f1ad04-fb47-430a-82b2-e2b5bf8c2128\",\n      \"label\": \"label-6266\",\n      \"height\": 333,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"2eb9698a-8f49-4617-8155-e6508f3b5cdc\",\n      \"label\": \"label-6267\",\n      \"height\": 108,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"78c203b6-25d7-4e94-a0cf-c2546efd32ae\",\n      \"label\": \"label-6268\",\n      \"height\": 348,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"b587157b-39be-49ab-9362-16956d0ec37c\",\n      \"label\": \"label-6269\",\n      \"height\": 251,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"e7c9d8c4-deed-4b97-b7c9-b9f4d51bc2a7\",\n      \"label\": \"label-6270\",\n      \"height\": 432,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"5a853c35-2246-4f13-afbf-21b9bf6a4e4d\",\n      \"label\": \"label-6271\",\n      \"height\": 528,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"0dd478b4-5edb-4028-bb86-e6d51c8b0c55\",\n      \"label\": \"label-6272\",\n      \"height\": 227,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"b1328003-4fa5-452c-adcd-d17a9555f41d\",\n      \"label\": \"label-6273\",\n      \"height\": 435,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"3e73ad33-c137-4ab1-a76e-9983129d6a28\",\n      \"label\": \"label-6274\",\n      \"height\": 309,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"dff4bdfa-9fe9-4873-8217-5a0aa4a8701a\",\n      \"label\": \"label-6275\",\n      \"height\": 75,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"174cee82-bcdd-406b-808d-6c6868004aa7\",\n      \"label\": \"label-6276\",\n      \"height\": 529,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"147ceabe-6a74-4cd5-98fc-53b82add0241\",\n      \"label\": \"label-6277\",\n      \"height\": 499,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"2d238a95-1978-4838-b450-5a0392d73024\",\n      \"label\": \"label-6278\",\n      \"height\": 73,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"16059390-9748-4127-9c25-eb9eefc3f497\",\n      \"label\": \"label-6279\",\n      \"height\": 429,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"764aa6f5-b357-4cf8-ae62-eb59052951fd\",\n      \"label\": \"label-6280\",\n      \"height\": 98,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"1b12fc5e-3f4d-4cbf-b654-a87bae163352\",\n      \"label\": \"label-6281\",\n      \"height\": 59,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"d3acb7e7-c229-48d9-b701-613a45d740c3\",\n      \"label\": \"label-6282\",\n      \"height\": 300,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"ef16c83e-1c53-4364-ac8d-1f939fa3a1b8\",\n      \"label\": \"label-6283\",\n      \"height\": 360,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"363e4aac-537c-46e3-b8bf-27fe6bdf3ebd\",\n      \"label\": \"label-6284\",\n      \"height\": 319,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"d783ac28-1d46-4245-9735-0d0849e232e9\",\n      \"label\": \"label-6285\",\n      \"height\": 72,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"8b918259-9713-4324-b5cc-34c6b20bef46\",\n      \"label\": \"label-6286\",\n      \"height\": 70,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"f5f06191-26b5-4f5d-be45-a2a2b5766eea\",\n      \"label\": \"label-6287\",\n      \"height\": 286,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"19a928a0-6936-4a26-98a9-c9e4db554069\",\n      \"label\": \"label-6288\",\n      \"height\": 314,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"5c44236d-c306-46f4-a1e8-2583c0843226\",\n      \"label\": \"label-6289\",\n      \"height\": 269,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"745ab1bd-e351-430e-9d0f-d9be0186e803\",\n      \"label\": \"label-6290\",\n      \"height\": 408,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"1867a286-faea-4624-b680-28a6fa616328\",\n      \"label\": \"label-6291\",\n      \"height\": 374,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"0b3bd2d2-41de-44e9-8674-1b0ca2e2a0db\",\n      \"label\": \"label-6292\",\n      \"height\": 520,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"b9050ae0-5b7f-48b1-8bdf-1671d0076d59\",\n      \"label\": \"label-6293\",\n      \"height\": 254,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"c9af8a0c-0f6d-48c0-aad4-dedc39042a5f\",\n      \"label\": \"label-6294\",\n      \"height\": 298,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"6b517985-6cd6-4616-9ee7-747c80e41365\",\n      \"label\": \"label-6295\",\n      \"height\": 466,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"88a18d44-4080-4542-b926-9f68b8df804a\",\n      \"label\": \"label-6296\",\n      \"height\": 408,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"0d91d82a-dc8d-4215-a27c-df80d6ac8092\",\n      \"label\": \"label-6297\",\n      \"height\": 490,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"74ac0f23-236f-4b10-9998-9788948d52f6\",\n      \"label\": \"label-6298\",\n      \"height\": 496,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"ab306444-33e1-4685-9a33-914711f201f9\",\n      \"label\": \"label-6299\",\n      \"height\": 66,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"b6838cef-9b1f-43b2-abfa-79023d76c777\",\n      \"label\": \"label-6300\",\n      \"height\": 292,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"5bcb276c-190c-43a0-8d11-b6d4dcbbd58e\",\n      \"label\": \"label-6301\",\n      \"height\": 412,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"d6abee5e-384a-4f0c-a717-dc93f99806ba\",\n      \"label\": \"label-6302\",\n      \"height\": 468,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"bbfcb67d-8333-4a59-953f-64b857e3caad\",\n      \"label\": \"label-6303\",\n      \"height\": 433,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"8c200425-952d-4fe3-8b71-86871cf230d1\",\n      \"label\": \"label-6304\",\n      \"height\": 231,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"18f2b6c3-405f-4f1b-a391-7c7f60f08e67\",\n      \"label\": \"label-6305\",\n      \"height\": 89,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"252710b2-955c-4be7-9b87-78b84954de89\",\n      \"label\": \"label-6306\",\n      \"height\": 308,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"1d727d5e-06bc-4f93-9536-db362d363391\",\n      \"label\": \"label-6307\",\n      \"height\": 449,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"8f872aa4-610a-45fd-b726-99f1b84949d0\",\n      \"label\": \"label-6308\",\n      \"height\": 363,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"da28acb4-ba9c-4573-af60-80031a5558be\",\n      \"label\": \"label-6309\",\n      \"height\": 455,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"ae996fd7-6747-40b8-a6c2-79af302b4f66\",\n      \"label\": \"label-6310\",\n      \"height\": 135,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"1ec53f2c-a7c3-44f0-bb1b-79534c6441b8\",\n      \"label\": \"label-6311\",\n      \"height\": 74,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"36a549e3-2fee-4fac-94cf-0f40ab6dd11a\",\n      \"label\": \"label-6312\",\n      \"height\": 254,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"5ced4b97-bd34-401a-867f-7c480e67bc5a\",\n      \"label\": \"label-6313\",\n      \"height\": 250,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"0c5501b6-9f46-4ecf-ac82-707655558585\",\n      \"label\": \"label-6314\",\n      \"height\": 441,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"51d006f8-0d3a-4199-a300-8dee431b3d88\",\n      \"label\": \"label-6315\",\n      \"height\": 418,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"8b69e3b8-f507-4a4b-8db3-bb387e152a97\",\n      \"label\": \"label-6316\",\n      \"height\": 522,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"992a153d-a293-40fd-b2e9-ad1c9ae7ed12\",\n      \"label\": \"label-6317\",\n      \"height\": 92,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"db8e5608-b51b-4b55-a5eb-2397d643ee31\",\n      \"label\": \"label-6318\",\n      \"height\": 452,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"52319169-6eae-44b7-a9d1-e9d5a6f3af9e\",\n      \"label\": \"label-6319\",\n      \"height\": 200,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"3e4fbeed-d889-4fe0-ba18-854b89ea0b52\",\n      \"label\": \"label-6320\",\n      \"height\": 95,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"cd67b47d-daf0-4f57-980e-4e89f04e60e9\",\n      \"label\": \"label-6321\",\n      \"height\": 365,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"e5295d32-a510-4971-8888-85eda40efc8e\",\n      \"label\": \"label-6322\",\n      \"height\": 487,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"6bcdfc1d-8fef-49b7-94de-1c5936f718fe\",\n      \"label\": \"label-6323\",\n      \"height\": 221,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"dedd8759-37dc-4d41-a0ca-1bb19034487f\",\n      \"label\": \"label-6324\",\n      \"height\": 344,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"edb0b125-5741-45db-a38d-c923627b6fc9\",\n      \"label\": \"label-6325\",\n      \"height\": 312,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"a51990f5-4eee-449a-9a98-871d9ea5e9cb\",\n      \"label\": \"label-6326\",\n      \"height\": 444,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"2f4cc8e6-3ab1-4b1b-93a4-b5ee27501648\",\n      \"label\": \"label-6327\",\n      \"height\": 431,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"48865649-d72a-44be-b79e-f53ec9f0de21\",\n      \"label\": \"label-6328\",\n      \"height\": 290,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"8aa211ed-fca6-4759-8391-37d2ba3efceb\",\n      \"label\": \"label-6329\",\n      \"height\": 95,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"b02f7c4d-dc1e-443e-ab0c-903d6b61ca1e\",\n      \"label\": \"label-6330\",\n      \"height\": 189,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"dca54d1b-df78-49fe-9a85-dc05ff91d457\",\n      \"label\": \"label-6331\",\n      \"height\": 403,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"d1eb9cb6-e5d3-4546-a138-3087a20c9236\",\n      \"label\": \"label-6332\",\n      \"height\": 338,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"09e48154-dc07-4588-9776-b486629b769d\",\n      \"label\": \"label-6333\",\n      \"height\": 319,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"a6f6712f-facb-43ec-9554-ea687707010e\",\n      \"label\": \"label-6334\",\n      \"height\": 104,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"81d979bd-a5cd-43dd-b96a-c1feb3eb7138\",\n      \"label\": \"label-6335\",\n      \"height\": 256,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"055f2a34-014c-4c18-9c3c-af9fd71de477\",\n      \"label\": \"label-6336\",\n      \"height\": 479,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"81c0d7f1-09b6-43e2-8e2e-9f312228de6b\",\n      \"label\": \"label-6337\",\n      \"height\": 405,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"ec1ffe57-4329-445b-9cd5-a08fc0a56c62\",\n      \"label\": \"label-6338\",\n      \"height\": 159,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"4de838ff-8fcf-4715-a557-0efd45c718bd\",\n      \"label\": \"label-6339\",\n      \"height\": 370,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"f555d7cf-dc85-49f1-a203-bb796064a348\",\n      \"label\": \"label-6340\",\n      \"height\": 443,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"de07269c-a380-4776-ab33-8b234c7cb7db\",\n      \"label\": \"label-6341\",\n      \"height\": 273,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"50c0ae23-fb20-46c4-9b04-c19ce782f570\",\n      \"label\": \"label-6342\",\n      \"height\": 389,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"b429833f-7631-412d-8ec3-6450aab342f5\",\n      \"label\": \"label-6343\",\n      \"height\": 463,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"f6c91731-def4-448a-9b47-30bfe38da67f\",\n      \"label\": \"label-6344\",\n      \"height\": 397,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"742afc71-6e58-4724-8068-d575985766ac\",\n      \"label\": \"label-6345\",\n      \"height\": 277,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"276e1afd-6cb2-4a87-9d02-114a58b0cdd3\",\n      \"label\": \"label-6346\",\n      \"height\": 183,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"9d8e8c05-b3c2-4ea9-aeb9-a624afc2d1cd\",\n      \"label\": \"label-6347\",\n      \"height\": 199,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"db263aee-6618-4cdc-8daa-0903b1b6c9ba\",\n      \"label\": \"label-6348\",\n      \"height\": 364,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"696f3b2e-abd1-4997-8968-b49d3c9301bd\",\n      \"label\": \"label-6349\",\n      \"height\": 426,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"183e71ba-3498-4da2-a96f-f0fd0f2f2576\",\n      \"label\": \"label-6350\",\n      \"height\": 295,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"546e4f4d-3a2b-41ea-999c-d75b55276ce4\",\n      \"label\": \"label-6351\",\n      \"height\": 176,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"1e820bbc-5f9a-4e2d-aba1-8bcd35a7d9af\",\n      \"label\": \"label-6352\",\n      \"height\": 195,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"99116747-dd4c-4f9b-8956-d7739c6a0725\",\n      \"label\": \"label-6353\",\n      \"height\": 171,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"2eeb4993-dbb8-4cf6-aa0f-319a4c20ee82\",\n      \"label\": \"label-6354\",\n      \"height\": 508,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"caaf1a74-0b4d-4f96-bdb1-e5d6aaf68b48\",\n      \"label\": \"label-6355\",\n      \"height\": 311,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"189aec10-e46b-486e-836e-357947e0290a\",\n      \"label\": \"label-6356\",\n      \"height\": 227,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"88656266-980f-475f-a94d-ff2ac694dcb9\",\n      \"label\": \"label-6357\",\n      \"height\": 144,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"1cd33e6b-40f9-4492-b671-bde711a7b9f9\",\n      \"label\": \"label-6358\",\n      \"height\": 179,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"0e630a92-3166-4d9a-b1d1-4be1dd3f6bc5\",\n      \"label\": \"label-6359\",\n      \"height\": 416,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"d8bb3d34-e8c1-402d-83be-ea166b40a3f1\",\n      \"label\": \"label-6360\",\n      \"height\": 133,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"3285237e-0eb6-41bb-a64b-76d2c12d0c18\",\n      \"label\": \"label-6361\",\n      \"height\": 249,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"72d2fd2c-0dc9-41ca-aac0-7f189b039769\",\n      \"label\": \"label-6362\",\n      \"height\": 273,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"3c1d0fcb-6ea5-45d8-9920-293ffea20236\",\n      \"label\": \"label-6363\",\n      \"height\": 441,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"644b7a39-9df8-446b-b452-dcd2f3f80148\",\n      \"label\": \"label-6364\",\n      \"height\": 46,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"2ebfc32b-44e6-4e12-88dd-c9aa66f68858\",\n      \"label\": \"label-6365\",\n      \"height\": 457,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"f72e8825-fc04-4545-8821-c54a0bbb48e4\",\n      \"label\": \"label-6366\",\n      \"height\": 118,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"3f3de2d6-e2a8-4967-8249-da91b00ca5d5\",\n      \"label\": \"label-6367\",\n      \"height\": 382,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"415d2568-4404-49c3-9fb9-12307794e41a\",\n      \"label\": \"label-6368\",\n      \"height\": 174,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"23850903-1ae7-4871-8dbe-98e2a7f8b704\",\n      \"label\": \"label-6369\",\n      \"height\": 160,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"5c253a52-fed5-44c3-adba-259677e53561\",\n      \"label\": \"label-6370\",\n      \"height\": 149,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"5e932387-e118-456c-bf51-c97055809290\",\n      \"label\": \"label-6371\",\n      \"height\": 436,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"f74e2b8a-8969-4fc1-90f5-ce123110ee47\",\n      \"label\": \"label-6372\",\n      \"height\": 388,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"4e044169-96d1-4d87-9216-105d55764a3b\",\n      \"label\": \"label-6373\",\n      \"height\": 458,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"f56a2e88-48e4-4aa4-9d28-519872d3ae2a\",\n      \"label\": \"label-6374\",\n      \"height\": 227,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"c6f025f0-f6ba-4169-b41b-c1f37f876fc0\",\n      \"label\": \"label-6375\",\n      \"height\": 430,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"1c21f96b-f2ab-4d30-a265-57e2f60d61ca\",\n      \"label\": \"label-6376\",\n      \"height\": 526,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"9e5e9185-f41a-4584-8ad7-7602a54d9c66\",\n      \"label\": \"label-6377\",\n      \"height\": 175,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"ee184c77-3ed7-4068-9fec-5e3243768d41\",\n      \"label\": \"label-6378\",\n      \"height\": 495,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"e584a316-2eb5-4bf5-8e50-ce0254062ba7\",\n      \"label\": \"label-6379\",\n      \"height\": 486,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"27115269-e3de-433f-a8c9-9d10b3fcc953\",\n      \"label\": \"label-6380\",\n      \"height\": 339,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"29916c32-f0ac-4620-9db4-dce611987b2d\",\n      \"label\": \"label-6381\",\n      \"height\": 145,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"795d75aa-1a06-4b91-8228-6704eba478c6\",\n      \"label\": \"label-6382\",\n      \"height\": 66,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"9b71ed21-4d3b-47ff-85e1-8a1462794c01\",\n      \"label\": \"label-6383\",\n      \"height\": 290,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"4d1f668a-fc0a-4740-bfb7-176d18ca1f94\",\n      \"label\": \"label-6384\",\n      \"height\": 129,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"aa930826-908e-4087-9696-10f854c61159\",\n      \"label\": \"label-6385\",\n      \"height\": 49,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"901bdb3f-20ca-4b11-8a19-9292e0f66708\",\n      \"label\": \"label-6386\",\n      \"height\": 404,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"f52fdcbd-63e6-48c4-96b5-5d364c4e50cd\",\n      \"label\": \"label-6387\",\n      \"height\": 381,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"a91e65da-33da-4b02-81f4-d680913c5f46\",\n      \"label\": \"label-6388\",\n      \"height\": 459,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"be546450-1e02-44d8-a055-e619945f939a\",\n      \"label\": \"label-6389\",\n      \"height\": 432,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"2511cb90-8e76-4d5b-958e-7086f7d59790\",\n      \"label\": \"label-6390\",\n      \"height\": 132,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"f522dc3a-2d76-4bd8-a504-55bf4662a807\",\n      \"label\": \"label-6391\",\n      \"height\": 86,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"674b2fab-82ad-463c-9e29-0cbbc5452d86\",\n      \"label\": \"label-6392\",\n      \"height\": 257,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"251e67ee-2988-4a4e-94e3-1a68d863ddfa\",\n      \"label\": \"label-6393\",\n      \"height\": 73,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"54ad2a90-118c-4019-9e20-539e85df3ed7\",\n      \"label\": \"label-6394\",\n      \"height\": 114,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"17561042-f2e5-454b-b6f1-2645be1d1138\",\n      \"label\": \"label-6395\",\n      \"height\": 504,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"c1edf86d-000b-4221-900c-990cbf7591b2\",\n      \"label\": \"label-6396\",\n      \"height\": 242,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"008ebb82-514d-4956-8bc0-4fa1f26948dd\",\n      \"label\": \"label-6397\",\n      \"height\": 58,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"67bc01d6-5162-4494-9cfc-220a200a6132\",\n      \"label\": \"label-6398\",\n      \"height\": 289,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"93b2aad1-38e1-40db-9176-7c1a50f11ee5\",\n      \"label\": \"label-6399\",\n      \"height\": 371,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"99c7f8d9-9cae-4a8a-a377-f0b0434abce7\",\n      \"label\": \"label-6400\",\n      \"height\": 490,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"9cf1849d-fbe8-4a94-bb39-f18749b523cd\",\n      \"label\": \"label-6401\",\n      \"height\": 494,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"5a374da5-3aea-4ea8-8025-009a13afd3fa\",\n      \"label\": \"label-6402\",\n      \"height\": 356,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"4545eaec-e7e1-40b9-9f93-8c1dcdf44bb9\",\n      \"label\": \"label-6403\",\n      \"height\": 413,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"9c0acaf7-53da-4a5e-8839-2ac33cb8d922\",\n      \"label\": \"label-6404\",\n      \"height\": 324,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"8216f4f4-8b46-4d6a-a42d-10fa338add80\",\n      \"label\": \"label-6405\",\n      \"height\": 498,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"682c6663-cb1d-46c1-810c-4eb9bb5d3371\",\n      \"label\": \"label-6406\",\n      \"height\": 344,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"5b9dd1bf-83d5-46d5-8235-2d9a769c7547\",\n      \"label\": \"label-6407\",\n      \"height\": 175,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"7f64b83e-d9e6-4e4c-9bc8-b6b53f9c0324\",\n      \"label\": \"label-6408\",\n      \"height\": 110,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"b82141a4-5b36-4516-96bf-8f45fe7f5121\",\n      \"label\": \"label-6409\",\n      \"height\": 502,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"94955375-58f3-48bf-9b74-c471a6432301\",\n      \"label\": \"label-6410\",\n      \"height\": 196,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"7c4798b8-58e9-4e71-aae6-fb06448a5a24\",\n      \"label\": \"label-6411\",\n      \"height\": 190,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"63fe6125-05ff-45bf-9842-94c8878d2dc2\",\n      \"label\": \"label-6412\",\n      \"height\": 453,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"1768476c-47ff-4956-b3c9-cbe0b1488f95\",\n      \"label\": \"label-6413\",\n      \"height\": 156,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"bcc34487-1112-412c-a334-fb4517eabffd\",\n      \"label\": \"label-6414\",\n      \"height\": 421,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"e306aee3-b7e7-4c28-baf7-f1cc21850979\",\n      \"label\": \"label-6415\",\n      \"height\": 352,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"0433681a-696e-45b5-b2a5-468d04ead20a\",\n      \"label\": \"label-6416\",\n      \"height\": 264,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"fbfde299-301f-4837-a3a0-2d9535bdf447\",\n      \"label\": \"label-6417\",\n      \"height\": 495,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"ee9d5e0a-4017-4c74-a396-03993c92e928\",\n      \"label\": \"label-6418\",\n      \"height\": 224,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"018bc252-80b6-468d-b77c-e54ba22d7f8f\",\n      \"label\": \"label-6419\",\n      \"height\": 126,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"844b07fa-3519-41c4-b64f-8517d39f7ab3\",\n      \"label\": \"label-6420\",\n      \"height\": 450,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"72f51b48-db74-4e15-9396-7c3579d9d677\",\n      \"label\": \"label-6421\",\n      \"height\": 469,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"76c386cc-b8e0-4714-8e73-2a5b77733e9f\",\n      \"label\": \"label-6422\",\n      \"height\": 102,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"2b785fa4-19cc-4404-a9a9-df850c403f66\",\n      \"label\": \"label-6423\",\n      \"height\": 107,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"f6f28e48-725e-4337-9dc2-c1a114fa8fcb\",\n      \"label\": \"label-6424\",\n      \"height\": 61,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"1e6647ad-39a7-422d-995f-bd8b080a28ed\",\n      \"label\": \"label-6425\",\n      \"height\": 355,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"92a32b89-d36f-47bb-88d3-3d4aeefea9bd\",\n      \"label\": \"label-6426\",\n      \"height\": 446,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"20821045-fb39-4bef-b98b-bf72363b84e9\",\n      \"label\": \"label-6427\",\n      \"height\": 469,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"59c4f2d8-11e5-4561-b882-40c8cc3d7796\",\n      \"label\": \"label-6428\",\n      \"height\": 224,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"bce8fe79-5030-44a8-9884-64d0dc3ccfe6\",\n      \"label\": \"label-6429\",\n      \"height\": 43,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"4f7d7ac0-ccb9-40e4-930b-ee12b8a77f3b\",\n      \"label\": \"label-6430\",\n      \"height\": 306,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"3e5f75d1-e441-4958-b675-fbb68ca76dbe\",\n      \"label\": \"label-6431\",\n      \"height\": 106,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"eadd3fff-2f4f-4393-ba3e-ea71ed3feb46\",\n      \"label\": \"label-6432\",\n      \"height\": 385,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"91b01bf5-3312-43a9-8c3e-5c8b2b2966b0\",\n      \"label\": \"label-6433\",\n      \"height\": 150,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"c7c000da-33d1-4b9d-b331-eb625ef04ce8\",\n      \"label\": \"label-6434\",\n      \"height\": 438,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"86f8ba55-8f22-46dd-ba66-e6837b08d4e5\",\n      \"label\": \"label-6435\",\n      \"height\": 330,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"e92270ee-d0df-49b0-b1d2-1d374a77f2be\",\n      \"label\": \"label-6436\",\n      \"height\": 46,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"456bc8a4-23a0-4ea5-be2b-8ed182f454ee\",\n      \"label\": \"label-6437\",\n      \"height\": 161,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"184bf722-c7d2-4558-9b0d-fdee522b1c13\",\n      \"label\": \"label-6438\",\n      \"height\": 159,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"7e7dc7e1-5382-4a2c-a923-da397de30b51\",\n      \"label\": \"label-6439\",\n      \"height\": 358,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"a2c13eba-434c-41b0-b516-09bd61915a4a\",\n      \"label\": \"label-6440\",\n      \"height\": 218,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"b141af3c-cb06-4f1d-b8bf-637d5d6d3add\",\n      \"label\": \"label-6441\",\n      \"height\": 496,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"746e711e-cac3-4350-950d-18dee844cb48\",\n      \"label\": \"label-6442\",\n      \"height\": 380,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"f1084145-b4e9-48d4-ae1b-0339401d0e25\",\n      \"label\": \"label-6443\",\n      \"height\": 71,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"5af81089-ba87-4bd9-b626-c49826b42537\",\n      \"label\": \"label-6444\",\n      \"height\": 521,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"e812157a-68ae-49e1-b80d-4a72bc5a8334\",\n      \"label\": \"label-6445\",\n      \"height\": 296,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"91ce0fa2-c2e4-448b-a648-33df6bc06a05\",\n      \"label\": \"label-6446\",\n      \"height\": 100,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"699c89e4-c48d-4848-ab6c-4107d8a70553\",\n      \"label\": \"label-6447\",\n      \"height\": 174,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"a9c77068-44b0-4cde-a38e-18c698202764\",\n      \"label\": \"label-6448\",\n      \"height\": 402,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"4d33ff5c-a8e3-433c-808a-4401388eca7b\",\n      \"label\": \"label-6449\",\n      \"height\": 474,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"aec9506c-201c-4c08-a74d-a1247505fd83\",\n      \"label\": \"label-6450\",\n      \"height\": 462,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"7b35eb09-3f52-4547-9037-0cf65671db8e\",\n      \"label\": \"label-6451\",\n      \"height\": 239,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"9e41314f-5b9e-4f66-9673-6d9635c836ac\",\n      \"label\": \"label-6452\",\n      \"height\": 479,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"4e93d119-6182-47b8-a55c-4d3758a7e12e\",\n      \"label\": \"label-6453\",\n      \"height\": 232,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"2a1d7740-a25b-485e-be78-0a8b88f43ee6\",\n      \"label\": \"label-6454\",\n      \"height\": 345,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"68a65d83-ffe7-497a-bdd0-eda132e337e5\",\n      \"label\": \"label-6455\",\n      \"height\": 317,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"d98d0c73-444d-40a4-80ce-46ee4be0492e\",\n      \"label\": \"label-6456\",\n      \"height\": 103,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"21956d40-856a-4a4a-b77e-5adf7c7bfac9\",\n      \"label\": \"label-6457\",\n      \"height\": 270,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"c9a432b9-7866-4a3f-a52d-72017c9ef6a2\",\n      \"label\": \"label-6458\",\n      \"height\": 431,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"c0db67b9-9b9e-4d68-8ab9-8d7a16b8b472\",\n      \"label\": \"label-6459\",\n      \"height\": 362,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"2399bf37-2074-48a2-9e05-d49e6ba1d2af\",\n      \"label\": \"label-6460\",\n      \"height\": 124,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"3e87ddcd-dd09-4b4b-aff0-367aa3095a34\",\n      \"label\": \"label-6461\",\n      \"height\": 498,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"93b3e6a0-b4a6-4081-aaaa-b9aaec991dd0\",\n      \"label\": \"label-6462\",\n      \"height\": 175,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"bbd3908a-647a-4372-bd82-3c5225ec0934\",\n      \"label\": \"label-6463\",\n      \"height\": 393,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"bea47636-632b-4055-931c-1dfcec5a8eda\",\n      \"label\": \"label-6464\",\n      \"height\": 413,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"9420a399-8c29-48e1-9ccd-a8c0c2d32e6d\",\n      \"label\": \"label-6465\",\n      \"height\": 322,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"fd308c5a-14fa-47cd-9822-7b8a4e22e10e\",\n      \"label\": \"label-6466\",\n      \"height\": 469,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"2d25953f-fd33-4c84-90e3-74e7ef48e3c5\",\n      \"label\": \"label-6467\",\n      \"height\": 425,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"9706ca5e-d789-4f85-b018-398eddf8e71a\",\n      \"label\": \"label-6468\",\n      \"height\": 261,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"c327c5a6-e6c4-48eb-9808-434c7ed53077\",\n      \"label\": \"label-6469\",\n      \"height\": 508,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"18577faf-38a3-4ef0-8808-3589c007f925\",\n      \"label\": \"label-6470\",\n      \"height\": 420,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"91f4499d-f112-420a-aaaf-ef8e27bc9d78\",\n      \"label\": \"label-6471\",\n      \"height\": 320,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"53f5c919-7d4c-404d-b8de-dcb226e9a82f\",\n      \"label\": \"label-6472\",\n      \"height\": 390,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"6b6bf741-4450-4466-84fc-18be240a1012\",\n      \"label\": \"label-6473\",\n      \"height\": 353,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"93743f5b-9e66-4f10-8c9c-0df74bf3e2e3\",\n      \"label\": \"label-6474\",\n      \"height\": 156,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"85de3060-aad0-420b-8d17-018ea82692e2\",\n      \"label\": \"label-6475\",\n      \"height\": 426,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"db09c319-1a32-4df1-bbe0-e905a24823e5\",\n      \"label\": \"label-6476\",\n      \"height\": 156,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"68fb0ab8-2f6d-46ed-9553-816780d20420\",\n      \"label\": \"label-6477\",\n      \"height\": 396,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"1b888a40-035b-4752-842f-a8214f206de0\",\n      \"label\": \"label-6478\",\n      \"height\": 196,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"11cd2e5f-ed10-4721-8589-8af5bb8e46ba\",\n      \"label\": \"label-6479\",\n      \"height\": 357,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"972fdf07-745a-455e-8dc5-0e1dff1464a5\",\n      \"label\": \"label-6480\",\n      \"height\": 261,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"839682b4-cf27-4305-90d8-1ec76d67415c\",\n      \"label\": \"label-6481\",\n      \"height\": 275,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"114a5bb0-6349-480e-84b0-3ef86afae5db\",\n      \"label\": \"label-6482\",\n      \"height\": 41,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"cc7fe51d-94a2-4d62-b662-4201a605fd72\",\n      \"label\": \"label-6483\",\n      \"height\": 425,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"f4a51d90-99cb-4515-bf17-3b8ff9eb7a73\",\n      \"label\": \"label-6484\",\n      \"height\": 325,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"c6000357-0087-4d73-8bee-58206f8353b6\",\n      \"label\": \"label-6485\",\n      \"height\": 145,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"3c35d1b8-eb63-4d92-8ee6-92ea9c9a1309\",\n      \"label\": \"label-6486\",\n      \"height\": 320,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"44bb7c0e-929d-466f-bccb-5e6a2884ad7e\",\n      \"label\": \"label-6487\",\n      \"height\": 380,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"67c59802-4a17-48ea-9bcb-5555c305920d\",\n      \"label\": \"label-6488\",\n      \"height\": 174,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"2393c709-e17e-4fb6-97fa-929b9228650f\",\n      \"label\": \"label-6489\",\n      \"height\": 87,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"b1f512c2-2281-4841-9758-7934c6bc75a6\",\n      \"label\": \"label-6490\",\n      \"height\": 255,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"c7e3534a-96ef-425d-bdb6-1809857def33\",\n      \"label\": \"label-6491\",\n      \"height\": 351,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"ffe73362-4a7e-471a-b9d8-666ff33e491a\",\n      \"label\": \"label-6492\",\n      \"height\": 50,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"5d6ba4a9-69b3-4af8-b75f-36585bcd5d4a\",\n      \"label\": \"label-6493\",\n      \"height\": 406,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"a11fbcfb-75f0-4234-ba01-e169cbcf70ce\",\n      \"label\": \"label-6494\",\n      \"height\": 518,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"37abcee7-c724-4801-98fb-e80b6c95102d\",\n      \"label\": \"label-6495\",\n      \"height\": 185,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"cb9696dd-f5f6-4e20-974d-64d215b3263a\",\n      \"label\": \"label-6496\",\n      \"height\": 148,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"bd95abfa-b833-49fd-b3a7-c04073aff760\",\n      \"label\": \"label-6497\",\n      \"height\": 292,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"3985924d-8f59-4986-93c8-e55380c5ed4b\",\n      \"label\": \"label-6498\",\n      \"height\": 47,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"09e852bc-34a9-4824-9af6-90c0690d645d\",\n      \"label\": \"label-6499\",\n      \"height\": 103,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"0bc1dbef-a366-4173-a0d0-95aafce2a110\",\n      \"label\": \"label-6500\",\n      \"height\": 408,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"f990746e-4ce3-4b36-9eac-930502e2bf08\",\n      \"label\": \"label-6501\",\n      \"height\": 451,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"b622db10-ce91-47c0-ace8-c2a3f4f7d61e\",\n      \"label\": \"label-6502\",\n      \"height\": 239,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"0b6e0ad5-34ab-4e20-b6b9-86fb69bf6fc8\",\n      \"label\": \"label-6503\",\n      \"height\": 43,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"b2903f2d-fdb7-4bef-b208-2ff339f31b4c\",\n      \"label\": \"label-6504\",\n      \"height\": 52,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"2edf7c89-89c6-45ed-adba-71066e7441b0\",\n      \"label\": \"label-6505\",\n      \"height\": 308,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"2a82b75f-14a4-4588-9e66-de3af19a9b68\",\n      \"label\": \"label-6506\",\n      \"height\": 46,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"8b1b133f-7df0-4ede-8fc1-609737e9f3e8\",\n      \"label\": \"label-6507\",\n      \"height\": 296,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"744ef4b9-baeb-4e0b-bd17-8cc414a20aed\",\n      \"label\": \"label-6508\",\n      \"height\": 377,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"ce15a939-0fa2-4f16-b270-f7cd68838e34\",\n      \"label\": \"label-6509\",\n      \"height\": 174,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"84340a43-4002-4ad9-b211-edbd9466910f\",\n      \"label\": \"label-6510\",\n      \"height\": 325,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"099beeda-492f-43f1-a09c-bc6a89f81f43\",\n      \"label\": \"label-6511\",\n      \"height\": 57,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"fe69550f-da7f-4c27-a156-7455b81e2b6a\",\n      \"label\": \"label-6512\",\n      \"height\": 98,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"850427a4-5815-45e2-9473-e3fdff025e7e\",\n      \"label\": \"label-6513\",\n      \"height\": 363,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"aedd1230-1c0b-4ec8-8cfd-398cf8f20162\",\n      \"label\": \"label-6514\",\n      \"height\": 509,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"e317d84c-60a0-4b12-bd68-00a5285c8b8a\",\n      \"label\": \"label-6515\",\n      \"height\": 215,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"46a904e0-277d-4f06-be19-eb988a63be34\",\n      \"label\": \"label-6516\",\n      \"height\": 162,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"e5333356-e41e-4601-9602-ed2abd02e878\",\n      \"label\": \"label-6517\",\n      \"height\": 218,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"d0154f24-fe24-45f7-b4d2-efc1621e16ca\",\n      \"label\": \"label-6518\",\n      \"height\": 438,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"3a82d9ca-fc0b-4350-974e-5c005e9c2c89\",\n      \"label\": \"label-6519\",\n      \"height\": 281,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"0ad90166-8137-4ed8-9470-70f107f01e4d\",\n      \"label\": \"label-6520\",\n      \"height\": 308,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"ba8e5e97-1e42-411a-89bc-da31ff4717ae\",\n      \"label\": \"label-6521\",\n      \"height\": 94,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"0c08c4b9-f1d4-4435-b18c-31a2bbf2d6e5\",\n      \"label\": \"label-6522\",\n      \"height\": 93,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"9db1136d-0d41-4854-b0da-c5be272bd9cf\",\n      \"label\": \"label-6523\",\n      \"height\": 472,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"6b66d7ba-c85b-478b-bb6f-fd3f3ab12e61\",\n      \"label\": \"label-6524\",\n      \"height\": 212,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"b76105d7-48dd-41d8-8364-67b946322895\",\n      \"label\": \"label-6525\",\n      \"height\": 316,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"7ef751bf-ee77-4730-bbad-183eaa66cd06\",\n      \"label\": \"label-6526\",\n      \"height\": 213,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"23ddc870-0c44-419d-b427-31fbf34d7a91\",\n      \"label\": \"label-6527\",\n      \"height\": 368,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"8d112f8a-e886-46c5-bf38-6ab90c57390b\",\n      \"label\": \"label-6528\",\n      \"height\": 221,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"99857c2d-f068-4245-b5e4-303602e2fe0b\",\n      \"label\": \"label-6529\",\n      \"height\": 174,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"5c241564-0358-438c-ba1f-54b3f774d3ef\",\n      \"label\": \"label-6530\",\n      \"height\": 235,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"fae9752a-fca2-441f-96ae-b1e0340778cc\",\n      \"label\": \"label-6531\",\n      \"height\": 338,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"ecff9b93-b3d1-43a9-8634-60654493fc35\",\n      \"label\": \"label-6532\",\n      \"height\": 99,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"43eb2e35-6c9b-4882-bf0c-845ba88e510c\",\n      \"label\": \"label-6533\",\n      \"height\": 230,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"49fe1b19-f3d8-4ca6-8c83-7f117e5ab6a6\",\n      \"label\": \"label-6534\",\n      \"height\": 319,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"9509f8f5-5c20-4d47-802d-c348239af1ac\",\n      \"label\": \"label-6535\",\n      \"height\": 379,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"ce3d82a8-437c-4bef-b073-86813911b7ee\",\n      \"label\": \"label-6536\",\n      \"height\": 87,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"8d5b50be-0b1e-430b-b394-78e72895db36\",\n      \"label\": \"label-6537\",\n      \"height\": 522,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"cc071e6a-26ff-472e-9da8-4846bdc277e0\",\n      \"label\": \"label-6538\",\n      \"height\": 248,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"8559088b-0955-40f7-8694-10a8da99a388\",\n      \"label\": \"label-6539\",\n      \"height\": 108,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"765a05b5-944c-4bfe-85c7-038a4bd47764\",\n      \"label\": \"label-6540\",\n      \"height\": 278,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"c7cb1766-35af-42c4-ac1f-c6f3c5d8063a\",\n      \"label\": \"label-6541\",\n      \"height\": 152,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"9545e198-905e-4cec-9f4b-9fb189366034\",\n      \"label\": \"label-6542\",\n      \"height\": 133,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"a29ccb6a-65ac-483f-b168-0fd218fc053c\",\n      \"label\": \"label-6543\",\n      \"height\": 170,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"1d029c83-2dfa-4e97-b5ac-c68de5ac2633\",\n      \"label\": \"label-6544\",\n      \"height\": 190,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"a426b1e8-0742-4f64-afcb-813f4ef78bf4\",\n      \"label\": \"label-6545\",\n      \"height\": 524,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"cb75f231-1a3d-4737-b24c-e08ec174f986\",\n      \"label\": \"label-6546\",\n      \"height\": 487,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"b6dcee52-436e-4942-9a3d-e709826d7675\",\n      \"label\": \"label-6547\",\n      \"height\": 422,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"b257cd1a-eaf3-480a-be22-3733e77d84d7\",\n      \"label\": \"label-6548\",\n      \"height\": 42,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"fe3bdcda-db1f-433d-8d19-ba4f09daf0eb\",\n      \"label\": \"label-6549\",\n      \"height\": 256,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"f85dcaa6-ceec-4062-a17b-5b84b66591cf\",\n      \"label\": \"label-6550\",\n      \"height\": 96,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"65c63f8b-3d1d-4a56-b0f9-ccdd99e37d1b\",\n      \"label\": \"label-6551\",\n      \"height\": 57,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"3c4a861b-a783-4e00-8976-8ac892f41128\",\n      \"label\": \"label-6552\",\n      \"height\": 433,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"dac86522-57e9-4235-a437-15b51b93cb17\",\n      \"label\": \"label-6553\",\n      \"height\": 345,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"e1fb1221-4ea4-45c0-ad5d-fe229a255eb4\",\n      \"label\": \"label-6554\",\n      \"height\": 59,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"5f7c4bc4-650e-44fb-a9ec-6c74cda95ef4\",\n      \"label\": \"label-6555\",\n      \"height\": 468,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"57b69c80-5afe-4aa1-b26b-811edc4709c4\",\n      \"label\": \"label-6556\",\n      \"height\": 460,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"24befd26-b584-45ec-91ad-592aaf9913ea\",\n      \"label\": \"label-6557\",\n      \"height\": 358,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"d57c698d-74a8-4ede-a33c-4f9127d3810e\",\n      \"label\": \"label-6558\",\n      \"height\": 75,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"43903c67-2d64-4d65-8691-4c2ae3d9bf9e\",\n      \"label\": \"label-6559\",\n      \"height\": 215,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"6f08d372-5996-4d42-923d-c831a87e59c6\",\n      \"label\": \"label-6560\",\n      \"height\": 233,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"528186be-84ba-42fc-b05e-fc6fa503d2b2\",\n      \"label\": \"label-6561\",\n      \"height\": 348,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"2010af2b-1bfb-4b13-8a0e-d8dbca45779c\",\n      \"label\": \"label-6562\",\n      \"height\": 148,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"5184936b-e39d-4d26-90d8-ebb242d6b055\",\n      \"label\": \"label-6563\",\n      \"height\": 467,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"194cf587-376a-4281-94b9-ddddd28907b6\",\n      \"label\": \"label-6564\",\n      \"height\": 241,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"fdc91119-670f-499b-9324-c5b49566d837\",\n      \"label\": \"label-6565\",\n      \"height\": 312,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"2a700282-5737-4fc3-b85e-307bab767fc9\",\n      \"label\": \"label-6566\",\n      \"height\": 388,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"fd1f822e-55cf-4a59-acbe-67c8da0a2051\",\n      \"label\": \"label-6567\",\n      \"height\": 271,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"c94c61c7-9c34-40dc-9849-c2258abf6e16\",\n      \"label\": \"label-6568\",\n      \"height\": 347,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"38198fcd-b166-44dc-be5c-9e868a9eed9d\",\n      \"label\": \"label-6569\",\n      \"height\": 341,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"b506dd71-16a4-425b-aecb-b1bcb169d7f5\",\n      \"label\": \"label-6570\",\n      \"height\": 334,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"f36ccd86-011c-4767-a172-67099776977e\",\n      \"label\": \"label-6571\",\n      \"height\": 68,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"571dc926-3e67-42d3-b7a9-bbeaa90289d0\",\n      \"label\": \"label-6572\",\n      \"height\": 310,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"8974d2e4-1c32-4cc4-93ce-bbef29c75098\",\n      \"label\": \"label-6573\",\n      \"height\": 376,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"caf21c61-9699-4898-8f76-2e7501c7d4b8\",\n      \"label\": \"label-6574\",\n      \"height\": 134,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"62255224-4e7d-4094-b909-6ff876ee77b5\",\n      \"label\": \"label-6575\",\n      \"height\": 266,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"eb0e51a6-7b1e-451b-9494-08fe5ee2ed7c\",\n      \"label\": \"label-6576\",\n      \"height\": 364,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"5eeabf8b-0162-4d73-96e7-222e1e5d8966\",\n      \"label\": \"label-6577\",\n      \"height\": 410,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"4df1a4f0-452a-4717-a0d8-dfe21e5d1b8e\",\n      \"label\": \"label-6578\",\n      \"height\": 404,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"414d9883-5ae1-4d57-80bc-7398600a507e\",\n      \"label\": \"label-6579\",\n      \"height\": 474,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"78eccf3a-8f6e-408a-b96b-443bf3b7d0c8\",\n      \"label\": \"label-6580\",\n      \"height\": 496,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"30a36da1-ded0-4d6f-9601-04f0b5ff0253\",\n      \"label\": \"label-6581\",\n      \"height\": 94,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"bfd4dab9-6f81-42a9-a19e-c7439f2a1ceb\",\n      \"label\": \"label-6582\",\n      \"height\": 375,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"8e53e162-c0a9-4399-b4f0-a7ef3b02b5d8\",\n      \"label\": \"label-6583\",\n      \"height\": 266,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"28b36b8e-4632-446f-8560-54938c2e8ae9\",\n      \"label\": \"label-6584\",\n      \"height\": 337,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"8d18a325-26c3-40ce-aac3-5200c9cbb08e\",\n      \"label\": \"label-6585\",\n      \"height\": 119,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"84735fe7-d19f-4c77-94cd-34591a4a4d98\",\n      \"label\": \"label-6586\",\n      \"height\": 73,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"6c88fb72-fac0-4c7d-b3fb-9987daeeeb88\",\n      \"label\": \"label-6587\",\n      \"height\": 128,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"6404e6ec-2ddb-48d5-9168-b0f902e02c30\",\n      \"label\": \"label-6588\",\n      \"height\": 511,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"f5fa336b-9f01-4ffc-8651-dab2f828a4d7\",\n      \"label\": \"label-6589\",\n      \"height\": 530,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"767e4909-4db2-4963-b883-52aaa7606dba\",\n      \"label\": \"label-6590\",\n      \"height\": 460,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"440ba8ab-dd7a-44a2-a473-c8472802e98d\",\n      \"label\": \"label-6591\",\n      \"height\": 470,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"5c28475d-e691-4a03-8321-a7c7111607e9\",\n      \"label\": \"label-6592\",\n      \"height\": 375,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"712caaa5-cfe9-4640-b793-e874b3fa754e\",\n      \"label\": \"label-6593\",\n      \"height\": 379,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"60550969-c6e5-4c2f-a23d-6c58d35e3e4d\",\n      \"label\": \"label-6594\",\n      \"height\": 310,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"3c8d6691-b837-4885-a1d3-3a44880d0384\",\n      \"label\": \"label-6595\",\n      \"height\": 215,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"128b85d8-db12-4ef0-af56-c3fefad1cf0a\",\n      \"label\": \"label-6596\",\n      \"height\": 74,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"d5b109f0-82e5-42e7-90fa-ca3824bc1ed5\",\n      \"label\": \"label-6597\",\n      \"height\": 134,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"7bc05b54-fba1-43a4-91ba-45a044467b68\",\n      \"label\": \"label-6598\",\n      \"height\": 320,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"669f5a4a-6411-4112-b757-26721e9fcba1\",\n      \"label\": \"label-6599\",\n      \"height\": 325,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"e9d3c985-431e-44dd-976f-b0f37d122e7e\",\n      \"label\": \"label-6600\",\n      \"height\": 485,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"70e198da-ca8b-4002-ae53-4420a85fc11d\",\n      \"label\": \"label-6601\",\n      \"height\": 374,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"bc56ca4e-0703-4a73-9978-83686eaa2749\",\n      \"label\": \"label-6602\",\n      \"height\": 507,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"7d167e47-224d-4415-83f2-180d3dedf9c0\",\n      \"label\": \"label-6603\",\n      \"height\": 407,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"65e1541e-47ac-47d3-85f6-8adefdf9810a\",\n      \"label\": \"label-6604\",\n      \"height\": 285,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"1a83072d-489c-418d-9255-461dfb7afa6c\",\n      \"label\": \"label-6605\",\n      \"height\": 135,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"728a450e-417f-4fd0-a53e-ddb09cd49be0\",\n      \"label\": \"label-6606\",\n      \"height\": 418,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"501602d1-3b3d-4e58-a2dc-e42c785e6c1f\",\n      \"label\": \"label-6607\",\n      \"height\": 152,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"1474aaaf-6c2a-4292-8246-5b61f3ad2da2\",\n      \"label\": \"label-6608\",\n      \"height\": 528,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"a805c3ef-113d-485d-9dfa-5274cfd9e31e\",\n      \"label\": \"label-6609\",\n      \"height\": 113,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"1e0872b6-5448-4d8f-99d5-597731724ba9\",\n      \"label\": \"label-6610\",\n      \"height\": 133,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"614eeda9-684f-4882-acdb-c4fbcaa17250\",\n      \"label\": \"label-6611\",\n      \"height\": 472,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"85399934-6245-41e7-b6a7-fda44102801f\",\n      \"label\": \"label-6612\",\n      \"height\": 140,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"9239bdfa-c769-4b54-88e4-bccf2d66b8b9\",\n      \"label\": \"label-6613\",\n      \"height\": 394,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"7d7e667d-11c2-4b4a-ae65-fec9b76d6e1a\",\n      \"label\": \"label-6614\",\n      \"height\": 336,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"435f0899-26e4-4819-b47d-6fd5c41f3e4e\",\n      \"label\": \"label-6615\",\n      \"height\": 496,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"027fe45a-73e1-4a8f-9f24-05c55bb4915e\",\n      \"label\": \"label-6616\",\n      \"height\": 213,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"8314f691-f48b-4615-a492-edc91615aa12\",\n      \"label\": \"label-6617\",\n      \"height\": 531,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"87f54eb5-efff-4e71-bdf6-07be2b6530e7\",\n      \"label\": \"label-6618\",\n      \"height\": 88,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"d133a42a-9665-4dcf-b2c2-e212664232cb\",\n      \"label\": \"label-6619\",\n      \"height\": 398,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"265f7777-9c13-4113-b6aa-848898fbefe8\",\n      \"label\": \"label-6620\",\n      \"height\": 421,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"015f9d07-d89a-4395-b788-7fac9b1ace3d\",\n      \"label\": \"label-6621\",\n      \"height\": 509,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"0a012b18-70e7-4b6f-b24e-d71aed0abda6\",\n      \"label\": \"label-6622\",\n      \"height\": 227,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"80ec874f-0bce-4fea-a5bb-201b6438622b\",\n      \"label\": \"label-6623\",\n      \"height\": 417,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"c4fdfde9-110d-4ad9-9268-31b3a447e628\",\n      \"label\": \"label-6624\",\n      \"height\": 40,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"9ba97781-214c-492e-b274-53f30ad6f5ae\",\n      \"label\": \"label-6625\",\n      \"height\": 268,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"16ed6e9a-a267-46d1-a389-96ab4da76fd7\",\n      \"label\": \"label-6626\",\n      \"height\": 344,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"a131f0dd-e139-45b4-a7cf-da254c5b53cf\",\n      \"label\": \"label-6627\",\n      \"height\": 485,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"48913249-b067-4869-b89f-e4d03ac9b2b4\",\n      \"label\": \"label-6628\",\n      \"height\": 511,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"e02f6381-3d5c-42b9-a9af-e99c9a0753fa\",\n      \"label\": \"label-6629\",\n      \"height\": 32,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"97996857-1e3a-424d-8876-f098730f570e\",\n      \"label\": \"label-6630\",\n      \"height\": 158,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"d382375d-96d8-4b83-bc11-55c6f9acc700\",\n      \"label\": \"label-6631\",\n      \"height\": 209,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"651824ef-fb82-498d-a314-31b67cb3f9ac\",\n      \"label\": \"label-6632\",\n      \"height\": 396,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"93996116-10f9-4517-8c08-14b751c7c398\",\n      \"label\": \"label-6633\",\n      \"height\": 308,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"a5a47e71-bfd8-4433-908f-176a50839060\",\n      \"label\": \"label-6634\",\n      \"height\": 463,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"a2a7bed1-c67d-4b82-82c7-5ebb18efa9b2\",\n      \"label\": \"label-6635\",\n      \"height\": 186,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"7ec84776-b301-4072-bac9-52c916597684\",\n      \"label\": \"label-6636\",\n      \"height\": 244,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"3dae7b2a-5191-47ab-a9c3-54ca0ca405e1\",\n      \"label\": \"label-6637\",\n      \"height\": 516,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"e4398bdb-182e-4baa-81c6-a65f8b68b651\",\n      \"label\": \"label-6638\",\n      \"height\": 46,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"81a5b10d-6bf6-4aef-b38f-a39d12e31c34\",\n      \"label\": \"label-6639\",\n      \"height\": 105,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"1d5758e4-0d02-40b5-81ad-8001abc84705\",\n      \"label\": \"label-6640\",\n      \"height\": 261,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"0b87479a-2165-432b-92bb-214f7c2fd6e5\",\n      \"label\": \"label-6641\",\n      \"height\": 220,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"9342fb26-030f-4e47-b9f5-5ff2c25fd821\",\n      \"label\": \"label-6642\",\n      \"height\": 54,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"b90994de-d47b-4a18-b0ec-ae7751d0b10c\",\n      \"label\": \"label-6643\",\n      \"height\": 228,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"2469e653-0699-496f-ae2e-d3132e8a95f0\",\n      \"label\": \"label-6644\",\n      \"height\": 299,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"6569b0af-b6e1-4587-b0e9-ad8272685af9\",\n      \"label\": \"label-6645\",\n      \"height\": 447,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"4ee9ea95-9946-464d-a989-431ddbfd1b5a\",\n      \"label\": \"label-6646\",\n      \"height\": 355,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"f977670d-18d6-4b70-8659-b6b0ee969ac5\",\n      \"label\": \"label-6647\",\n      \"height\": 485,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"ddfbc3d9-0820-49ad-8d60-fdc232880090\",\n      \"label\": \"label-6648\",\n      \"height\": 141,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"d44dad10-ca43-4a8e-afef-2e223f083bd1\",\n      \"label\": \"label-6649\",\n      \"height\": 337,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"91298e2e-462f-46a9-ad6f-40891a8a00f9\",\n      \"label\": \"label-6650\",\n      \"height\": 425,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"515fb765-c608-4cbb-952b-bd6bfc5e8c6d\",\n      \"label\": \"label-6651\",\n      \"height\": 336,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"8c389445-18d4-4c38-ade3-f8dc3e55e137\",\n      \"label\": \"label-6652\",\n      \"height\": 206,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"3a939f97-73fd-4212-a418-92363edc3e36\",\n      \"label\": \"label-6653\",\n      \"height\": 530,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"acde174c-72f5-4dd9-af5a-10f5bac772a7\",\n      \"label\": \"label-6654\",\n      \"height\": 345,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"37f49453-c097-49cf-a443-a66809d3b871\",\n      \"label\": \"label-6655\",\n      \"height\": 340,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"27b312ab-e23f-4cc2-97e6-5c19da9dcd67\",\n      \"label\": \"label-6656\",\n      \"height\": 166,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"9550d620-09a8-43a3-a9e7-a5bc01361172\",\n      \"label\": \"label-6657\",\n      \"height\": 286,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"00cb0a2b-55d8-4785-8d7b-75388eed140b\",\n      \"label\": \"label-6658\",\n      \"height\": 86,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"f415da4d-cdd6-4e07-a6d7-db921c6e9e46\",\n      \"label\": \"label-6659\",\n      \"height\": 165,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"a708fb8d-9f27-45c1-a63a-1617314632d6\",\n      \"label\": \"label-6660\",\n      \"height\": 118,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"7e4932ea-970f-4ead-b5c5-d186c38833e5\",\n      \"label\": \"label-6661\",\n      \"height\": 41,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"54c7ba07-69fe-4411-a2e1-11d0f58199ac\",\n      \"label\": \"label-6662\",\n      \"height\": 524,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"a17322b9-6922-4969-aa86-f79ad1aa4195\",\n      \"label\": \"label-6663\",\n      \"height\": 100,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"210e8ded-fe8e-4caf-8ea9-2c2b13913853\",\n      \"label\": \"label-6664\",\n      \"height\": 339,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"68dc985b-3d6e-4da4-9dc3-6baf1488d587\",\n      \"label\": \"label-6665\",\n      \"height\": 316,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"854e609a-afd9-4801-b96c-2e06107a2b46\",\n      \"label\": \"label-6666\",\n      \"height\": 133,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"6195bb42-3f9b-44ed-8394-aeac93105c86\",\n      \"label\": \"label-6667\",\n      \"height\": 311,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"e113c76a-88b9-40e8-b4ec-f0c0858afbb5\",\n      \"label\": \"label-6668\",\n      \"height\": 413,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"7f7e136d-cbd2-4bed-9cdb-d150429a157a\",\n      \"label\": \"label-6669\",\n      \"height\": 245,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"0e26e520-92c1-40cb-88ff-6b1c6bab9001\",\n      \"label\": \"label-6670\",\n      \"height\": 471,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"9139d47f-1fdd-488e-a640-2612f426ff01\",\n      \"label\": \"label-6671\",\n      \"height\": 417,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"f19ccfc0-c230-4bb1-a99c-e1db413213c6\",\n      \"label\": \"label-6672\",\n      \"height\": 267,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"2c0a33f3-3584-4551-8c29-9110e0cfeabc\",\n      \"label\": \"label-6673\",\n      \"height\": 256,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"367c846f-7c9b-4845-b273-b3a50aff724d\",\n      \"label\": \"label-6674\",\n      \"height\": 481,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"1b463e6d-8f22-4852-b7ba-68208693da05\",\n      \"label\": \"label-6675\",\n      \"height\": 194,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"63951778-4247-46e8-a415-6aeaf67c799b\",\n      \"label\": \"label-6676\",\n      \"height\": 165,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"81329eb4-3a46-49f5-8c69-7d1afcc4ca71\",\n      \"label\": \"label-6677\",\n      \"height\": 150,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"c824b74b-68e1-4974-a0ca-cc09e2d8d314\",\n      \"label\": \"label-6678\",\n      \"height\": 247,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"5bc1cc2f-dc5b-41ec-a246-7e77d737e61f\",\n      \"label\": \"label-6679\",\n      \"height\": 132,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"1e9c11a1-fbfd-448e-8c0b-23bdb354afcb\",\n      \"label\": \"label-6680\",\n      \"height\": 93,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"ba1cb5c3-7387-4eb8-b022-f241881f970a\",\n      \"label\": \"label-6681\",\n      \"height\": 460,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"abbdfe83-ed01-4688-a610-b85182a370a2\",\n      \"label\": \"label-6682\",\n      \"height\": 275,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"f0062c38-e01e-4a94-9bff-8b5c37363107\",\n      \"label\": \"label-6683\",\n      \"height\": 291,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"60a3d858-dd7d-44db-8273-a3a50cbc0de2\",\n      \"label\": \"label-6684\",\n      \"height\": 245,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"a6f32931-a838-4882-a5d1-7276481e3f99\",\n      \"label\": \"label-6685\",\n      \"height\": 431,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"f13b3eda-f10c-4afa-b7f9-8320d1c2d408\",\n      \"label\": \"label-6686\",\n      \"height\": 352,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"d1493932-2200-420f-9794-c8bcc31dc2d0\",\n      \"label\": \"label-6687\",\n      \"height\": 490,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"dbf35e7b-14b1-4ca6-ad87-1f89894ed069\",\n      \"label\": \"label-6688\",\n      \"height\": 240,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"255e0348-c9e8-4bcd-ae28-48d7417dd42d\",\n      \"label\": \"label-6689\",\n      \"height\": 318,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"6732c986-b415-470d-be0f-ec5dbde7576b\",\n      \"label\": \"label-6690\",\n      \"height\": 418,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"5c9540a8-9e54-4223-b87f-b09fd3afb9c2\",\n      \"label\": \"label-6691\",\n      \"height\": 282,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"520aa91d-35ba-44c5-b7f2-86f4c3ef25cf\",\n      \"label\": \"label-6692\",\n      \"height\": 490,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"433af0ee-3f46-42f4-bee9-ee0e3027012a\",\n      \"label\": \"label-6693\",\n      \"height\": 466,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"55e6f581-9d6f-45a3-ad69-92537cadd0be\",\n      \"label\": \"label-6694\",\n      \"height\": 157,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"4b066caa-14bb-4717-b599-44a9a966594c\",\n      \"label\": \"label-6695\",\n      \"height\": 351,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"bacd3e9c-12e0-4faa-9012-4807186831e1\",\n      \"label\": \"label-6696\",\n      \"height\": 68,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"186e9a31-98e6-4d8e-823b-99702a532f9b\",\n      \"label\": \"label-6697\",\n      \"height\": 270,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"f720fb46-54d2-411f-8e4c-999cf19b47f1\",\n      \"label\": \"label-6698\",\n      \"height\": 327,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"0d4ad52b-7a76-4820-8458-ddd65ec46060\",\n      \"label\": \"label-6699\",\n      \"height\": 443,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"17992f7d-a8e6-4761-8c4c-4a17a78582c5\",\n      \"label\": \"label-6700\",\n      \"height\": 423,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"836e072a-ca5a-423a-af0b-949d16818fa5\",\n      \"label\": \"label-6701\",\n      \"height\": 485,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"e02e9bd0-32ba-486c-a17a-7fab5cdc740a\",\n      \"label\": \"label-6702\",\n      \"height\": 159,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"08a12a75-cec3-430b-a1a9-96d4439beede\",\n      \"label\": \"label-6703\",\n      \"height\": 437,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"feecad49-0d63-4f0f-9c60-83422cd6461a\",\n      \"label\": \"label-6704\",\n      \"height\": 219,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"55b4d735-a3f6-4e17-83e6-c6d20d1c335c\",\n      \"label\": \"label-6705\",\n      \"height\": 527,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"41d02c8f-0900-4e60-90d1-ae8aba722abe\",\n      \"label\": \"label-6706\",\n      \"height\": 148,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"97c2b556-23a5-4080-ae08-12ce19791925\",\n      \"label\": \"label-6707\",\n      \"height\": 480,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"c5a7aad5-f76b-4682-b8c5-5a2804e00632\",\n      \"label\": \"label-6708\",\n      \"height\": 140,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"25fe1be5-f0a8-4afd-bff5-9d6e971b0274\",\n      \"label\": \"label-6709\",\n      \"height\": 182,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"e5eb7790-9f1e-4db0-9416-7272c9ee13c4\",\n      \"label\": \"label-6710\",\n      \"height\": 271,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"3989c170-ba3b-4162-ae6f-af05e40d13f2\",\n      \"label\": \"label-6711\",\n      \"height\": 206,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"3ca8820c-8118-4103-8bcf-765a1bcfde29\",\n      \"label\": \"label-6712\",\n      \"height\": 75,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"2e1eb644-01b6-41cd-a868-470ab2a3548e\",\n      \"label\": \"label-6713\",\n      \"height\": 429,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"900b8bfa-a5be-42d0-a7c2-11aa74c7b14a\",\n      \"label\": \"label-6714\",\n      \"height\": 85,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"3a4c5dbb-b020-4476-9d2a-a6533cdab218\",\n      \"label\": \"label-6715\",\n      \"height\": 75,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"8f8e53fa-cfe5-4142-ab54-0a6d79c412f8\",\n      \"label\": \"label-6716\",\n      \"height\": 103,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"66485d48-bbd0-410b-a89f-1c921b0ec317\",\n      \"label\": \"label-6717\",\n      \"height\": 82,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"9047ced6-8800-4aa6-a2af-399da175fdf8\",\n      \"label\": \"label-6718\",\n      \"height\": 191,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"568b7df4-a5c6-42e2-ad03-facfa6429efb\",\n      \"label\": \"label-6719\",\n      \"height\": 102,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"e9cea0a7-4a89-4629-9c56-0afdd54969da\",\n      \"label\": \"label-6720\",\n      \"height\": 281,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"4a1a715a-1a07-4b9a-a180-6f754d59a638\",\n      \"label\": \"label-6721\",\n      \"height\": 411,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"5aaa2c73-8fbd-4724-ae71-5d99746cc896\",\n      \"label\": \"label-6722\",\n      \"height\": 476,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"5942cb49-ac19-4a2e-a998-dbbb0931a671\",\n      \"label\": \"label-6723\",\n      \"height\": 342,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"06b345f2-0ac8-4224-a41d-167b622dcf9a\",\n      \"label\": \"label-6724\",\n      \"height\": 209,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"d659980e-4e59-472a-90a1-8914f4386a6e\",\n      \"label\": \"label-6725\",\n      \"height\": 336,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"56b0860a-bbd0-438d-a177-650b0b6cddc8\",\n      \"label\": \"label-6726\",\n      \"height\": 301,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"e8733d66-ad13-451f-994c-93f5bc114e13\",\n      \"label\": \"label-6727\",\n      \"height\": 391,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"71bb98ec-c859-4040-bad5-ed6239d71cbd\",\n      \"label\": \"label-6728\",\n      \"height\": 127,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"cb2a4eb6-781b-44d7-bc4a-0d5e41e949e2\",\n      \"label\": \"label-6729\",\n      \"height\": 376,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"d4bc777b-a955-49da-95e4-88c51984df1d\",\n      \"label\": \"label-6730\",\n      \"height\": 182,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"c4dbf93a-4989-4199-af05-55dcf7ee8252\",\n      \"label\": \"label-6731\",\n      \"height\": 260,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"668364e4-132e-4c97-9cea-666837dc7fe1\",\n      \"label\": \"label-6732\",\n      \"height\": 112,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"f87855b8-347d-46f2-aef4-330f8c60aafd\",\n      \"label\": \"label-6733\",\n      \"height\": 512,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"b47f75ff-008e-4993-b70f-50ed9d272d61\",\n      \"label\": \"label-6734\",\n      \"height\": 366,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"2f42ebfd-6ffe-45c6-b0be-641d145cdeb2\",\n      \"label\": \"label-6735\",\n      \"height\": 275,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"a16365a8-9748-4c5e-90fa-04c0e5738828\",\n      \"label\": \"label-6736\",\n      \"height\": 64,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"0bdf5f18-491f-4ee3-b86d-db2aaa3ccc1a\",\n      \"label\": \"label-6737\",\n      \"height\": 345,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"7a90b994-e769-4114-8833-bc2cbe724f98\",\n      \"label\": \"label-6738\",\n      \"height\": 478,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"f9ec004a-f794-4acc-a70e-4de1f30915fb\",\n      \"label\": \"label-6739\",\n      \"height\": 474,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"a8b7f12a-e23e-49ae-9b74-30e87c7e3aae\",\n      \"label\": \"label-6740\",\n      \"height\": 476,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"3ca87978-e795-4d80-9910-d7506064ee4f\",\n      \"label\": \"label-6741\",\n      \"height\": 34,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"5619dc16-f244-470d-8de4-4e9a0ef2f002\",\n      \"label\": \"label-6742\",\n      \"height\": 309,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"ca0a6964-6c1c-4b21-b0c5-d2757e364185\",\n      \"label\": \"label-6743\",\n      \"height\": 323,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"72b87f12-6491-4a74-9311-1f35d2fc2ab6\",\n      \"label\": \"label-6744\",\n      \"height\": 211,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"8363520f-8b41-40a0-96b7-2d6bdf1f0aa7\",\n      \"label\": \"label-6745\",\n      \"height\": 118,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"5594a555-42b2-47a6-8b36-9efef405216a\",\n      \"label\": \"label-6746\",\n      \"height\": 175,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"c707a6fa-0785-4343-b57a-63d928421607\",\n      \"label\": \"label-6747\",\n      \"height\": 502,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"30eadbe8-99a0-465e-9ef5-5ec2dc643514\",\n      \"label\": \"label-6748\",\n      \"height\": 366,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"24cefaee-dffb-4474-bd8c-1ef28bc7598a\",\n      \"label\": \"label-6749\",\n      \"height\": 331,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"c25f96ba-3738-40db-a06e-6bf22b1ff014\",\n      \"label\": \"label-6750\",\n      \"height\": 307,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"3676a0fd-6a43-4e4f-a771-18ee242a1145\",\n      \"label\": \"label-6751\",\n      \"height\": 174,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"d486b2c3-21ed-4414-af5f-fd6b12ae73aa\",\n      \"label\": \"label-6752\",\n      \"height\": 118,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"4a2c48ff-b046-4fa4-8e74-e2fa052b62ef\",\n      \"label\": \"label-6753\",\n      \"height\": 195,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"118d908d-1948-4bba-a589-e76634cced76\",\n      \"label\": \"label-6754\",\n      \"height\": 398,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"9ab9e7c9-41f2-4f10-855c-69739b07c22b\",\n      \"label\": \"label-6755\",\n      \"height\": 397,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"f2d6d466-bd12-4998-8b72-03a21a0314d0\",\n      \"label\": \"label-6756\",\n      \"height\": 147,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"ce7f54b5-7db3-4961-9232-ac8d5e35e9f8\",\n      \"label\": \"label-6757\",\n      \"height\": 137,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"ff6f023b-4131-4369-98a1-479f6358f435\",\n      \"label\": \"label-6758\",\n      \"height\": 270,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"bbd628e0-8ef0-43f3-b5dc-0b65d1a79dd8\",\n      \"label\": \"label-6759\",\n      \"height\": 338,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"9c264e74-41a8-42c5-ab70-7bb93078f92c\",\n      \"label\": \"label-6760\",\n      \"height\": 108,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"a415b419-7f7a-4d46-b579-fb8b9ae4c30c\",\n      \"label\": \"label-6761\",\n      \"height\": 92,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"726c47b2-870e-4af6-8458-6a32b603dc93\",\n      \"label\": \"label-6762\",\n      \"height\": 527,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"a878ec26-f9f3-471d-af40-ad46dd3e4945\",\n      \"label\": \"label-6763\",\n      \"height\": 87,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"c16647e4-c49b-454a-a7aa-1c0955f8a4af\",\n      \"label\": \"label-6764\",\n      \"height\": 273,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"40b7a4e7-886e-4151-8474-6b6e5ffcb6ae\",\n      \"label\": \"label-6765\",\n      \"height\": 426,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"2666471b-4712-47b2-9ae0-0d5d3f577c12\",\n      \"label\": \"label-6766\",\n      \"height\": 42,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"ac621a0a-90f1-42af-af9e-96f48b01533d\",\n      \"label\": \"label-6767\",\n      \"height\": 404,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"ef19b557-22b8-4c0d-8bb7-56e6b294c94e\",\n      \"label\": \"label-6768\",\n      \"height\": 94,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"d1dd1fdc-b1fb-467e-baa9-34ed4ab362b6\",\n      \"label\": \"label-6769\",\n      \"height\": 450,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"9f33287a-d855-4099-8a38-52667276be06\",\n      \"label\": \"label-6770\",\n      \"height\": 261,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"d728d317-ae36-406c-9b8d-f410633e8c34\",\n      \"label\": \"label-6771\",\n      \"height\": 230,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"809f29f7-caeb-4fd3-b62e-043ea90828b5\",\n      \"label\": \"label-6772\",\n      \"height\": 194,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"d17b0183-e1dd-44d2-ad2a-64e940dd5467\",\n      \"label\": \"label-6773\",\n      \"height\": 86,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"22cea188-3756-4d55-aa1d-f9847b1297f9\",\n      \"label\": \"label-6774\",\n      \"height\": 231,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"d6e8654a-e7ca-4dd5-b987-da63c92dabdd\",\n      \"label\": \"label-6775\",\n      \"height\": 496,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"30ee2cb7-b7dc-4e7f-b4b5-a67a8740e295\",\n      \"label\": \"label-6776\",\n      \"height\": 155,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"5a663bca-55e2-42d4-8fec-cb1083822e69\",\n      \"label\": \"label-6777\",\n      \"height\": 410,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"606188a9-6d77-4361-bb65-d7f7be40be38\",\n      \"label\": \"label-6778\",\n      \"height\": 142,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"ae21d23b-f3d3-4339-bace-eb543a15ad59\",\n      \"label\": \"label-6779\",\n      \"height\": 498,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"26f0711f-6d93-46ae-acb6-8efaa8f75156\",\n      \"label\": \"label-6780\",\n      \"height\": 278,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"fed44c7c-5268-4d75-a4ff-4928f87dd8de\",\n      \"label\": \"label-6781\",\n      \"height\": 101,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"7c6a96f6-0d55-4fe5-a211-1e0e3ba76221\",\n      \"label\": \"label-6782\",\n      \"height\": 461,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"0a8053ae-d540-40c3-9432-86d5e77d1cad\",\n      \"label\": \"label-6783\",\n      \"height\": 399,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"7f682220-dedc-428e-8045-704fa684361b\",\n      \"label\": \"label-6784\",\n      \"height\": 456,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"67ef0413-5afd-4458-89a3-e4936ec31acd\",\n      \"label\": \"label-6785\",\n      \"height\": 322,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"a4f68e90-8235-448d-8c14-78975abcd039\",\n      \"label\": \"label-6786\",\n      \"height\": 298,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"04289dbb-b5c9-4fc1-9888-44511b30718b\",\n      \"label\": \"label-6787\",\n      \"height\": 306,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"4a9246bd-554b-47ca-896f-105ee8f245fc\",\n      \"label\": \"label-6788\",\n      \"height\": 283,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"c8bade63-4cc7-4bed-9b37-de64165b50e6\",\n      \"label\": \"label-6789\",\n      \"height\": 455,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"d88c2495-46cd-4240-813e-4657eb12e1c4\",\n      \"label\": \"label-6790\",\n      \"height\": 198,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"e7ff86d0-875b-4aa5-811c-3d24f33a1f99\",\n      \"label\": \"label-6791\",\n      \"height\": 368,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"e7287d97-054b-4268-815b-4861157aafb1\",\n      \"label\": \"label-6792\",\n      \"height\": 321,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"cc0ba1e5-65a9-4566-9257-49633c23adf0\",\n      \"label\": \"label-6793\",\n      \"height\": 480,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"21d95891-b8c0-496c-bd29-c25ed210750f\",\n      \"label\": \"label-6794\",\n      \"height\": 296,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"5eb81b9b-ad23-4f19-a941-ff4f0b1a441d\",\n      \"label\": \"label-6795\",\n      \"height\": 44,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"4457786f-528a-490c-af99-2c339aabbf33\",\n      \"label\": \"label-6796\",\n      \"height\": 273,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"3b46e1a4-d4dc-45ba-9bdc-68447881092f\",\n      \"label\": \"label-6797\",\n      \"height\": 386,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"fe1a3236-acd9-4360-b5da-43d3cae60aef\",\n      \"label\": \"label-6798\",\n      \"height\": 83,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"efe7b359-4150-48e1-bb48-e1632613f66f\",\n      \"label\": \"label-6799\",\n      \"height\": 373,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"f3191cea-02ee-407d-89e2-8e62a0c7b8f2\",\n      \"label\": \"label-6800\",\n      \"height\": 338,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"351b1525-7d29-4da4-88ed-e9d5068c511d\",\n      \"label\": \"label-6801\",\n      \"height\": 131,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"ebb40324-8756-496e-88a4-4e9ea9000af1\",\n      \"label\": \"label-6802\",\n      \"height\": 146,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"7b96fb52-26df-45d5-9500-0536a7e324cb\",\n      \"label\": \"label-6803\",\n      \"height\": 409,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"ccbcfad0-96d4-47a2-966a-0c445fec6030\",\n      \"label\": \"label-6804\",\n      \"height\": 507,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"ac214438-c3f7-48b6-b42b-e4eb2182b017\",\n      \"label\": \"label-6805\",\n      \"height\": 223,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"676f614e-1dfe-4564-8ff1-f4c91da483b8\",\n      \"label\": \"label-6806\",\n      \"height\": 266,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"1a37b45a-2b42-4c10-86c1-23e3e6011602\",\n      \"label\": \"label-6807\",\n      \"height\": 437,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"af6084ff-07f5-48dc-91e4-d93adb64f470\",\n      \"label\": \"label-6808\",\n      \"height\": 492,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"e9fedf50-2f73-402b-af1e-c9bf1dcb85e2\",\n      \"label\": \"label-6809\",\n      \"height\": 482,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"12e7a4b3-e130-4327-aba5-3fc9ad7de2c1\",\n      \"label\": \"label-6810\",\n      \"height\": 450,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"3688c6f4-53a6-439f-9c60-617c9d01d13e\",\n      \"label\": \"label-6811\",\n      \"height\": 364,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"cd61ea23-032d-4c4b-abb8-1a9d9abcd957\",\n      \"label\": \"label-6812\",\n      \"height\": 75,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"ba06c3b1-4f4d-47b1-ba58-b3226ee1844a\",\n      \"label\": \"label-6813\",\n      \"height\": 129,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"4b38fdf1-3a8e-4b38-b8f0-7959405f1958\",\n      \"label\": \"label-6814\",\n      \"height\": 69,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"34334037-0ac0-42a3-a573-564003b02c26\",\n      \"label\": \"label-6815\",\n      \"height\": 170,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"2692f75a-ea09-4af1-b42d-bbc6cc3e9f4b\",\n      \"label\": \"label-6816\",\n      \"height\": 478,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"252e05b4-5217-4206-a581-5abe58cc2a89\",\n      \"label\": \"label-6817\",\n      \"height\": 295,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"fed1d7cd-06f5-4427-906c-accbb42f6049\",\n      \"label\": \"label-6818\",\n      \"height\": 275,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"4b2e6749-22f1-4bd7-a614-41036871ef19\",\n      \"label\": \"label-6819\",\n      \"height\": 477,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"c29af7a7-bf42-42b5-9902-f22cf5ce665d\",\n      \"label\": \"label-6820\",\n      \"height\": 151,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"b2c86460-f56c-4cad-9fc3-1327685458af\",\n      \"label\": \"label-6821\",\n      \"height\": 184,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"784ce6e1-26f4-497c-afa5-afa776c7e662\",\n      \"label\": \"label-6822\",\n      \"height\": 136,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"88a5718d-327f-46e4-a6a4-3414c1b3d1b6\",\n      \"label\": \"label-6823\",\n      \"height\": 497,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"c2672646-f49b-4205-b076-eb13f965bd3a\",\n      \"label\": \"label-6824\",\n      \"height\": 110,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"16e96968-51c8-4f7c-abe8-166eb78c9210\",\n      \"label\": \"label-6825\",\n      \"height\": 222,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"7706998b-9fd0-4f9f-86a5-3d4a1fafb0e9\",\n      \"label\": \"label-6826\",\n      \"height\": 449,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"7c912e88-0cc5-4547-a450-27d1da7fb36a\",\n      \"label\": \"label-6827\",\n      \"height\": 337,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"c112f18c-2945-40cc-a1e9-7735eb89559e\",\n      \"label\": \"label-6828\",\n      \"height\": 337,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"b57ca98c-7dd1-41e9-9388-7351cdfb4221\",\n      \"label\": \"label-6829\",\n      \"height\": 146,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"008a19db-132f-42c5-9d03-90caa9b788e2\",\n      \"label\": \"label-6830\",\n      \"height\": 360,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"79193c9a-548f-4961-802e-fe65c269f9fb\",\n      \"label\": \"label-6831\",\n      \"height\": 240,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"af4f56b8-0a33-46d9-8159-650fe706aeb3\",\n      \"label\": \"label-6832\",\n      \"height\": 409,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"b23692c8-49d9-467d-9edd-7f53f3103ab6\",\n      \"label\": \"label-6833\",\n      \"height\": 125,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"482c5085-94b0-4a23-8bd2-862a53b92704\",\n      \"label\": \"label-6834\",\n      \"height\": 455,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"c3741052-f13a-40ab-9c92-42117b4c9051\",\n      \"label\": \"label-6835\",\n      \"height\": 483,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"998cf811-f0b7-4fcd-9908-dc4ad11cb279\",\n      \"label\": \"label-6836\",\n      \"height\": 148,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"7c150e2b-230e-4ea3-b782-ac8d56947704\",\n      \"label\": \"label-6837\",\n      \"height\": 436,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"6a81f5cb-1c5a-49eb-80a9-85621ddf923c\",\n      \"label\": \"label-6838\",\n      \"height\": 210,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"7a8d9d99-331d-4260-a6bc-fe81fcb68d72\",\n      \"label\": \"label-6839\",\n      \"height\": 57,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"fe6e69f4-2f97-45c2-89ad-21df6e27faed\",\n      \"label\": \"label-6840\",\n      \"height\": 275,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"556fd2d1-6468-4344-baa3-50fa4ae0dc45\",\n      \"label\": \"label-6841\",\n      \"height\": 499,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"4a56a72c-551e-4e66-9745-e774fefd3f75\",\n      \"label\": \"label-6842\",\n      \"height\": 525,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"397f2e33-09af-47a8-a238-2793f360863e\",\n      \"label\": \"label-6843\",\n      \"height\": 56,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"7ee448f6-c550-44f9-b34b-24640796e3ac\",\n      \"label\": \"label-6844\",\n      \"height\": 445,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"2e0e52bb-0cf5-454f-9fac-f27f9f0d950a\",\n      \"label\": \"label-6845\",\n      \"height\": 439,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"9579ef67-2902-4ff5-8e7d-06fc10f6378c\",\n      \"label\": \"label-6846\",\n      \"height\": 190,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"9e1e9f4b-b3c7-4f1b-bb1f-7a11dd37b753\",\n      \"label\": \"label-6847\",\n      \"height\": 303,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"f2805186-b3f6-42f0-a4ed-7f1d6ed7ed90\",\n      \"label\": \"label-6848\",\n      \"height\": 147,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"6ddb4e3f-9429-460c-a062-ea1197eb3044\",\n      \"label\": \"label-6849\",\n      \"height\": 210,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"cd94f5cb-d2dc-4169-9f65-4fa7cc5a8e5a\",\n      \"label\": \"label-6850\",\n      \"height\": 308,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"4052065f-f374-42f7-9b7f-60636686c2b1\",\n      \"label\": \"label-6851\",\n      \"height\": 225,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"97327a28-6613-40d8-a153-f5081fe7765d\",\n      \"label\": \"label-6852\",\n      \"height\": 461,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"e703e442-43c5-4c1a-941e-e3648b290c75\",\n      \"label\": \"label-6853\",\n      \"height\": 488,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"6d7484c1-d2e3-43ba-9bc2-d3468ff9398e\",\n      \"label\": \"label-6854\",\n      \"height\": 393,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"c2b55b15-0808-4712-a33c-2dfcdf565a34\",\n      \"label\": \"label-6855\",\n      \"height\": 239,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"7fd8c589-0f31-4004-a03c-e0a6ebd86824\",\n      \"label\": \"label-6856\",\n      \"height\": 408,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"df59b869-6659-4ff0-a1ed-df80e50b36bd\",\n      \"label\": \"label-6857\",\n      \"height\": 64,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"b49661fe-6353-4171-a7cc-ffe53419cf94\",\n      \"label\": \"label-6858\",\n      \"height\": 252,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"3cec33ca-530d-4c3b-9215-4bb98078ba4a\",\n      \"label\": \"label-6859\",\n      \"height\": 223,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"2991291a-85fc-4287-9a2a-ab73add76958\",\n      \"label\": \"label-6860\",\n      \"height\": 452,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"469f550f-d5dc-4a4e-a6e6-2f000a2f61e9\",\n      \"label\": \"label-6861\",\n      \"height\": 62,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"9e35babb-6f88-4b61-9ed1-91a6535b525f\",\n      \"label\": \"label-6862\",\n      \"height\": 166,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"6eec15f7-8f18-4993-b8e3-7594c4a72467\",\n      \"label\": \"label-6863\",\n      \"height\": 365,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"d9d84866-7449-473f-af90-1df8462912eb\",\n      \"label\": \"label-6864\",\n      \"height\": 320,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"52484ffb-a78f-44fb-986f-7b951ae669a8\",\n      \"label\": \"label-6865\",\n      \"height\": 252,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"e02d0405-822e-48d7-a1b1-9a086c60bcb1\",\n      \"label\": \"label-6866\",\n      \"height\": 99,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"d05cdaa9-7dfa-41bf-bb81-ece8ce3e36bd\",\n      \"label\": \"label-6867\",\n      \"height\": 430,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"73b25df4-91a0-4606-a465-bb0d610f7c19\",\n      \"label\": \"label-6868\",\n      \"height\": 190,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"00aef7d2-7581-4a87-ba7a-c5ab786ac149\",\n      \"label\": \"label-6869\",\n      \"height\": 444,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"b37bc69d-3b4f-4a57-be83-af6c5b2e0eae\",\n      \"label\": \"label-6870\",\n      \"height\": 229,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"7b956d6c-6824-4cac-b933-188ce57888e3\",\n      \"label\": \"label-6871\",\n      \"height\": 371,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"06fd4c85-69d8-46ff-a217-d135a0ca6e8c\",\n      \"label\": \"label-6872\",\n      \"height\": 356,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"521100f7-62ae-459d-9da3-278523675e5c\",\n      \"label\": \"label-6873\",\n      \"height\": 450,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"35fe5b8b-415f-4fb6-aceb-9a7576e06872\",\n      \"label\": \"label-6874\",\n      \"height\": 67,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"957b2159-3991-4e51-89d0-fd0581dc3c4e\",\n      \"label\": \"label-6875\",\n      \"height\": 292,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"b68647cf-3458-4696-b269-c44b51e2ce92\",\n      \"label\": \"label-6876\",\n      \"height\": 382,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"87857168-fdbf-4bbf-b07b-3c173a1ffe43\",\n      \"label\": \"label-6877\",\n      \"height\": 50,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"84fecf8d-730a-4821-80cc-e11e489f5da3\",\n      \"label\": \"label-6878\",\n      \"height\": 94,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"ebf4995c-334f-40e4-bd25-ce6cb893bee6\",\n      \"label\": \"label-6879\",\n      \"height\": 527,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"069b25a9-176d-4aa5-abd4-1ed5c0760f2e\",\n      \"label\": \"label-6880\",\n      \"height\": 429,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"97a6cd7d-9402-498a-84cb-aca69d12c865\",\n      \"label\": \"label-6881\",\n      \"height\": 157,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"2d7ae3e9-b764-49c2-8411-cca60147256d\",\n      \"label\": \"label-6882\",\n      \"height\": 423,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"ea15728e-b1cb-4212-9113-a6de02a15af3\",\n      \"label\": \"label-6883\",\n      \"height\": 261,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"3a8c02ea-6bbf-4d9d-8f40-c59da2c797f6\",\n      \"label\": \"label-6884\",\n      \"height\": 235,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"b96f5b6e-3e17-4a3a-9e3c-6f31225c9ee9\",\n      \"label\": \"label-6885\",\n      \"height\": 279,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"3d7cfa11-eaac-4bd5-9b4b-bee4c80b3369\",\n      \"label\": \"label-6886\",\n      \"height\": 347,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"2f624468-6d3e-4906-a5c2-97624e958385\",\n      \"label\": \"label-6887\",\n      \"height\": 82,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"a89ba083-4db3-4848-83f2-37960e021836\",\n      \"label\": \"label-6888\",\n      \"height\": 383,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"8704d02f-09aa-452b-af42-f04d4fdc3242\",\n      \"label\": \"label-6889\",\n      \"height\": 285,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"651657f4-cb58-4a0a-9c5b-cfa370bbcd97\",\n      \"label\": \"label-6890\",\n      \"height\": 387,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"53bb06c7-24cc-48ec-a1eb-84ba300f6c82\",\n      \"label\": \"label-6891\",\n      \"height\": 512,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"ae4f0ad6-06c9-404c-9fd3-d227c03b559a\",\n      \"label\": \"label-6892\",\n      \"height\": 44,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"a3c3600c-5358-46a3-8a33-4c135b3a7dc9\",\n      \"label\": \"label-6893\",\n      \"height\": 515,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"755fbc80-63aa-42dc-8109-6bbbecd67a8f\",\n      \"label\": \"label-6894\",\n      \"height\": 441,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"456af661-98fe-4078-9627-baf625c0e6b8\",\n      \"label\": \"label-6895\",\n      \"height\": 256,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"afcf3e8b-56bd-4f95-841b-5738d02fb0ca\",\n      \"label\": \"label-6896\",\n      \"height\": 391,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"16236ee3-3f6e-48aa-ba2e-c1e9fd2cc494\",\n      \"label\": \"label-6897\",\n      \"height\": 488,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"9e414ec0-b63a-43b8-98aa-f8c18a1b59a1\",\n      \"label\": \"label-6898\",\n      \"height\": 418,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"ee4be3cf-3738-4aab-aeae-52d321e72049\",\n      \"label\": \"label-6899\",\n      \"height\": 67,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"ea0e8025-b28c-4795-ae2b-733622eb5815\",\n      \"label\": \"label-6900\",\n      \"height\": 86,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"106ba915-9091-46ee-a915-34216a5fe854\",\n      \"label\": \"label-6901\",\n      \"height\": 104,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"956672df-2d93-4488-bade-911caca6750f\",\n      \"label\": \"label-6902\",\n      \"height\": 133,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"a0d90504-435e-4abc-82e1-79b4da7a5cdf\",\n      \"label\": \"label-6903\",\n      \"height\": 141,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"aa7ae91f-a29e-46de-86d4-adb5531ebecc\",\n      \"label\": \"label-6904\",\n      \"height\": 282,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"f1c5d27e-3965-4b65-8471-44a264890406\",\n      \"label\": \"label-6905\",\n      \"height\": 339,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"3db33044-0f65-432e-bec3-a0716310cbfb\",\n      \"label\": \"label-6906\",\n      \"height\": 311,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"a457684b-db64-494a-ba71-f3f5f64697c1\",\n      \"label\": \"label-6907\",\n      \"height\": 495,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"609be47b-5bfd-4267-8765-6a9458c351f8\",\n      \"label\": \"label-6908\",\n      \"height\": 373,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"522cc273-299f-4155-be31-3c4f8c1ab9e0\",\n      \"label\": \"label-6909\",\n      \"height\": 305,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"12f496da-c67e-44d4-b236-6b6be5231f42\",\n      \"label\": \"label-6910\",\n      \"height\": 416,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"d4803b13-7402-48fb-9b68-fb6f78c58c88\",\n      \"label\": \"label-6911\",\n      \"height\": 188,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"ecb6b94e-4fb3-4e3e-b5af-9275b03416ac\",\n      \"label\": \"label-6912\",\n      \"height\": 168,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"f2d8f855-4ea6-43f3-8670-c513ad07fbfe\",\n      \"label\": \"label-6913\",\n      \"height\": 240,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"7bc0c531-fa91-443d-b372-b54c1f52ce81\",\n      \"label\": \"label-6914\",\n      \"height\": 193,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"4adc93dd-ae6d-425b-9f1b-0a957370e55c\",\n      \"label\": \"label-6915\",\n      \"height\": 373,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"3a2c9946-9cd5-4e00-a372-7395c53acf04\",\n      \"label\": \"label-6916\",\n      \"height\": 68,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"048e9a37-c362-4f90-befb-d3b2a8e5c5b9\",\n      \"label\": \"label-6917\",\n      \"height\": 501,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"ccbe4508-407c-4cff-ad36-2e710ee067e2\",\n      \"label\": \"label-6918\",\n      \"height\": 460,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"6fbb29dc-5e23-4575-9284-5c99d77c1ba9\",\n      \"label\": \"label-6919\",\n      \"height\": 115,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"5152d196-e54e-4d6c-ba8b-1d9df046e3d2\",\n      \"label\": \"label-6920\",\n      \"height\": 287,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"e58de348-f3f3-41bd-a563-317c620dd946\",\n      \"label\": \"label-6921\",\n      \"height\": 327,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"67ffb023-02f7-40bb-8ded-99dd1792de1c\",\n      \"label\": \"label-6922\",\n      \"height\": 500,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"9f07da79-6253-4803-80db-282f267c1dbe\",\n      \"label\": \"label-6923\",\n      \"height\": 320,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"293ca623-782f-45d6-bafc-a232c81bfd35\",\n      \"label\": \"label-6924\",\n      \"height\": 278,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"d7f9dacb-3570-4ad2-af68-7bceac15f12c\",\n      \"label\": \"label-6925\",\n      \"height\": 39,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"e8bcc2ea-6f51-480f-826e-8aa4b1ba4909\",\n      \"label\": \"label-6926\",\n      \"height\": 84,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"acdc75e7-7c59-4e78-a4ba-921d4d3b3b73\",\n      \"label\": \"label-6927\",\n      \"height\": 205,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"0c78899b-77d9-4b85-a768-403cabc97447\",\n      \"label\": \"label-6928\",\n      \"height\": 67,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"a9b9348a-add6-4001-83a0-081403a1651d\",\n      \"label\": \"label-6929\",\n      \"height\": 236,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"91473f93-fe91-41e4-939e-9136f5fe048c\",\n      \"label\": \"label-6930\",\n      \"height\": 116,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"5356daaf-be01-40fb-b00c-0d61c24fedbb\",\n      \"label\": \"label-6931\",\n      \"height\": 517,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"eea5965e-f122-459e-9d15-677a670fae07\",\n      \"label\": \"label-6932\",\n      \"height\": 272,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"c7f71f03-48d4-4282-a6eb-7148010f4e27\",\n      \"label\": \"label-6933\",\n      \"height\": 79,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"e5b6d6b0-add6-460a-adac-a9043e20dbf3\",\n      \"label\": \"label-6934\",\n      \"height\": 502,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"a3345dab-4466-4085-bbe9-bee1eb411b73\",\n      \"label\": \"label-6935\",\n      \"height\": 57,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"5b886d25-18e7-4433-8b08-aef45eb13ad7\",\n      \"label\": \"label-6936\",\n      \"height\": 213,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"cbe99f61-1a1d-41e7-ac1c-13eba5dab7a8\",\n      \"label\": \"label-6937\",\n      \"height\": 300,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"fc2c1e4b-8c34-4bb4-8305-eca4a05e4412\",\n      \"label\": \"label-6938\",\n      \"height\": 130,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"311a5b57-8be0-45e9-a611-51510e3d931f\",\n      \"label\": \"label-6939\",\n      \"height\": 96,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"41f26763-52db-48b2-b0d0-bb0e1a228b33\",\n      \"label\": \"label-6940\",\n      \"height\": 71,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"b6bd719a-bb90-40fd-baa8-1baba2802947\",\n      \"label\": \"label-6941\",\n      \"height\": 455,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"f5347c2b-22c6-4281-965f-0a8016a6723b\",\n      \"label\": \"label-6942\",\n      \"height\": 288,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"61fe1f40-17a7-4cd8-835a-dadce48bfbf6\",\n      \"label\": \"label-6943\",\n      \"height\": 392,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"e0a2c3fd-9646-419e-9330-32298a8b9cdf\",\n      \"label\": \"label-6944\",\n      \"height\": 454,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"0c9398d0-5b9c-4b73-90d3-78cae4b441a4\",\n      \"label\": \"label-6945\",\n      \"height\": 113,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"d6b3d491-927b-4edf-9713-1587cbd93f6b\",\n      \"label\": \"label-6946\",\n      \"height\": 275,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"6bb13ea0-4068-41b6-b06a-5e6033779d4e\",\n      \"label\": \"label-6947\",\n      \"height\": 395,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"ae2642a9-0689-4990-bd73-3a04bd348831\",\n      \"label\": \"label-6948\",\n      \"height\": 343,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"8f1efc7a-8ed9-409d-b4b5-4537d13580f6\",\n      \"label\": \"label-6949\",\n      \"height\": 63,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"c5aaac67-acfe-44bd-aeb1-d2ae1c0a9000\",\n      \"label\": \"label-6950\",\n      \"height\": 227,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"4e842fdd-dfe1-48ca-bda0-24e696c7cd90\",\n      \"label\": \"label-6951\",\n      \"height\": 146,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"83c13dda-6065-4ae0-9b45-a76b9b61732c\",\n      \"label\": \"label-6952\",\n      \"height\": 46,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"0993e539-41be-4bbf-be4f-48e3460bddbb\",\n      \"label\": \"label-6953\",\n      \"height\": 171,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"f1d20495-6784-4c58-b04c-f077f41a81db\",\n      \"label\": \"label-6954\",\n      \"height\": 101,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"520b3923-2b17-4acc-a5d7-901202735fb7\",\n      \"label\": \"label-6955\",\n      \"height\": 414,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"663cbe09-d59b-4c0c-bff9-458d98aa361a\",\n      \"label\": \"label-6956\",\n      \"height\": 94,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"c58578fb-872c-4226-8a12-1600cf935e6b\",\n      \"label\": \"label-6957\",\n      \"height\": 251,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"7232d6e6-2caa-4693-8501-ae170848eefe\",\n      \"label\": \"label-6958\",\n      \"height\": 188,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"87ad5df2-ca9c-475d-b8b0-ab3e9f493c0d\",\n      \"label\": \"label-6959\",\n      \"height\": 138,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"4e57ed0c-8dce-4b6f-9c46-1d1a6619093c\",\n      \"label\": \"label-6960\",\n      \"height\": 279,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"e4d2cd11-bef9-4c31-9846-e91176e54dbb\",\n      \"label\": \"label-6961\",\n      \"height\": 125,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"becdbb5e-1985-4be7-bfe9-be68e40129e6\",\n      \"label\": \"label-6962\",\n      \"height\": 208,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"1abf9bbe-b772-4985-add0-76736cc9a347\",\n      \"label\": \"label-6963\",\n      \"height\": 508,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"163b8be0-f8c1-4deb-ac07-1cc3c96a1449\",\n      \"label\": \"label-6964\",\n      \"height\": 204,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"5d6f8d5b-635c-41a6-a2d1-2838a3a8b0d5\",\n      \"label\": \"label-6965\",\n      \"height\": 464,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"d23e0e5c-d5b4-4d7e-aa47-010aa0a25841\",\n      \"label\": \"label-6966\",\n      \"height\": 489,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"9a1542db-e297-4a61-9666-2bc65b3b35f7\",\n      \"label\": \"label-6967\",\n      \"height\": 194,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"002c4f46-bbcb-4f25-9578-198e371aa59d\",\n      \"label\": \"label-6968\",\n      \"height\": 416,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"a109366d-1a6b-4eec-9f6f-0b54e7f4e412\",\n      \"label\": \"label-6969\",\n      \"height\": 179,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"748985dd-3e13-408e-9641-0439937cc48d\",\n      \"label\": \"label-6970\",\n      \"height\": 272,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"662e9b66-60d1-4c59-a545-10b731ea4369\",\n      \"label\": \"label-6971\",\n      \"height\": 49,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"0f4cf413-bbe6-4ba1-8f65-6ad8c713af1a\",\n      \"label\": \"label-6972\",\n      \"height\": 115,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"2a65a631-26df-4bda-a968-3a58733732b6\",\n      \"label\": \"label-6973\",\n      \"height\": 254,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"6264583b-9af0-452c-b138-663c94f43461\",\n      \"label\": \"label-6974\",\n      \"height\": 244,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"9f895be3-b672-4e3d-a507-13fa82b30ad9\",\n      \"label\": \"label-6975\",\n      \"height\": 459,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"eb69f94c-eeb9-449a-bc04-6355ea8144eb\",\n      \"label\": \"label-6976\",\n      \"height\": 281,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"b7d5bfcc-4743-4571-bde9-6ad8189b3be7\",\n      \"label\": \"label-6977\",\n      \"height\": 166,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"6995f67a-15b6-474c-85a4-d97ea1f247d8\",\n      \"label\": \"label-6978\",\n      \"height\": 419,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"2bdaeb8e-5f5d-4677-9aef-0f11c19c1a57\",\n      \"label\": \"label-6979\",\n      \"height\": 503,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"2c80de13-b260-43dc-a2b7-516f6500e87a\",\n      \"label\": \"label-6980\",\n      \"height\": 373,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"b35d82ef-1b68-4109-a09f-a3c2695a1006\",\n      \"label\": \"label-6981\",\n      \"height\": 396,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"240a8b61-b254-4082-acec-b5b3ae56c13a\",\n      \"label\": \"label-6982\",\n      \"height\": 82,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"6bd71420-8ec6-4708-9ae4-4ecb97e39813\",\n      \"label\": \"label-6983\",\n      \"height\": 433,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"c5ded923-ba14-4ad9-9fd2-6476b17e3ace\",\n      \"label\": \"label-6984\",\n      \"height\": 323,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"925990a3-8791-4a62-bba4-817e1e51119e\",\n      \"label\": \"label-6985\",\n      \"height\": 449,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"fdb38f13-dfa9-463f-81b5-341bf65d3eaf\",\n      \"label\": \"label-6986\",\n      \"height\": 197,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"0116c070-27dd-4a8a-80b9-9b70439401a7\",\n      \"label\": \"label-6987\",\n      \"height\": 459,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"d342bf1d-67ed-4e7e-890f-fd27383dda8b\",\n      \"label\": \"label-6988\",\n      \"height\": 58,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"3a1605bf-837e-435d-8fba-08dea5f5caf6\",\n      \"label\": \"label-6989\",\n      \"height\": 457,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"cda568a8-7369-4a7c-8e9c-81c80f6d36ff\",\n      \"label\": \"label-6990\",\n      \"height\": 124,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"2ea836ed-2fa1-44c5-8398-7c2539c4d483\",\n      \"label\": \"label-6991\",\n      \"height\": 182,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"4827e3bc-5ea9-4ed3-8cb0-fcb3a1d40727\",\n      \"label\": \"label-6992\",\n      \"height\": 260,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"3b0837d1-ee0a-4c0a-999c-1ddf7c42e20e\",\n      \"label\": \"label-6993\",\n      \"height\": 498,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"02723835-1840-43fa-8c9b-c276f1265335\",\n      \"label\": \"label-6994\",\n      \"height\": 370,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"fc1eae3e-6fcc-4328-bd8e-a66ef819469a\",\n      \"label\": \"label-6995\",\n      \"height\": 467,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"74617808-0c35-4936-9df4-5c5eb6e7039e\",\n      \"label\": \"label-6996\",\n      \"height\": 481,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"34fb2c9b-3735-4edc-b856-e6e8848cec3e\",\n      \"label\": \"label-6997\",\n      \"height\": 114,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"35e1f7cb-8437-411f-a54e-8396da2aa1d0\",\n      \"label\": \"label-6998\",\n      \"height\": 39,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"5d171653-3222-460c-b11e-cd942a659d5a\",\n      \"label\": \"label-6999\",\n      \"height\": 104,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"60af1846-eb40-4d94-9445-bd4797726d17\",\n      \"label\": \"label-7000\",\n      \"height\": 428,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"04e17bca-a651-4840-b4a1-4eb45a59489a\",\n      \"label\": \"label-7001\",\n      \"height\": 247,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"7bbc4cde-e852-4347-9fe2-339f5f853f8a\",\n      \"label\": \"label-7002\",\n      \"height\": 429,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"f3e5ceff-3a46-40d5-951e-429865e27ff2\",\n      \"label\": \"label-7003\",\n      \"height\": 379,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"e51d6591-37c5-4d9d-9901-5c3091bb8c30\",\n      \"label\": \"label-7004\",\n      \"height\": 466,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"f0feef9a-560d-4f96-9b7c-3eb2162937fb\",\n      \"label\": \"label-7005\",\n      \"height\": 67,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"bd865baa-b0ca-452b-82a8-f790c56d9fb5\",\n      \"label\": \"label-7006\",\n      \"height\": 387,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"22164f5f-8768-49af-a9c6-d031e699c347\",\n      \"label\": \"label-7007\",\n      \"height\": 64,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"657c77cd-6ede-481b-aa26-5f975667138d\",\n      \"label\": \"label-7008\",\n      \"height\": 489,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"bc1d160f-776b-41ab-8b38-9f70e8654800\",\n      \"label\": \"label-7009\",\n      \"height\": 340,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"913357d1-bf2a-4de4-ac6f-472c32fee92f\",\n      \"label\": \"label-7010\",\n      \"height\": 50,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"02d7346d-6e9e-450d-b83b-f15eb6b2eceb\",\n      \"label\": \"label-7011\",\n      \"height\": 419,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"30f09cb5-9b23-4384-b66f-88ae30001bf1\",\n      \"label\": \"label-7012\",\n      \"height\": 105,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"51917df8-193b-4c0b-93b3-7686fc728140\",\n      \"label\": \"label-7013\",\n      \"height\": 195,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"48f63653-f407-47b7-874b-378e7dfc9751\",\n      \"label\": \"label-7014\",\n      \"height\": 377,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"4ad3086a-15cc-44b9-a7c1-a8253bc608f5\",\n      \"label\": \"label-7015\",\n      \"height\": 427,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"e0627702-7453-4654-a800-53e112e140e7\",\n      \"label\": \"label-7016\",\n      \"height\": 369,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"758a0e13-18fb-4af5-b2a2-b2172051bd35\",\n      \"label\": \"label-7017\",\n      \"height\": 71,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"5528172f-5ab2-442b-9525-0e3fd637268f\",\n      \"label\": \"label-7018\",\n      \"height\": 404,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"8209baab-38f5-4a13-9157-44b332857db1\",\n      \"label\": \"label-7019\",\n      \"height\": 449,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"52c98ca9-751b-4a92-807c-95b6277708d4\",\n      \"label\": \"label-7020\",\n      \"height\": 261,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"eb1c2132-ec76-4786-9aeb-0dbd7370de06\",\n      \"label\": \"label-7021\",\n      \"height\": 418,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"c51bc941-b8da-4a09-a2ca-f6c72038c176\",\n      \"label\": \"label-7022\",\n      \"height\": 142,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"9842fe96-c6c9-487f-adab-91945b4066dd\",\n      \"label\": \"label-7023\",\n      \"height\": 286,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"9062c89d-8aa1-40ae-bf63-86603c57b931\",\n      \"label\": \"label-7024\",\n      \"height\": 388,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"2b561e59-e6ad-42be-b8a7-f33317119ee3\",\n      \"label\": \"label-7025\",\n      \"height\": 187,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"578ea896-db7d-42e2-a279-17161ffb3f13\",\n      \"label\": \"label-7026\",\n      \"height\": 321,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"934f96ad-4d15-4343-a100-7d5eb0642024\",\n      \"label\": \"label-7027\",\n      \"height\": 250,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"35c67b21-5045-4ab4-a748-e6a4be74d2f0\",\n      \"label\": \"label-7028\",\n      \"height\": 268,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"fa34d6a7-95cd-4a40-84ba-59cd655337f5\",\n      \"label\": \"label-7029\",\n      \"height\": 419,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"330d263f-62f0-44a2-929a-df59118ea4ef\",\n      \"label\": \"label-7030\",\n      \"height\": 46,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"d3853bd6-371b-4909-82a8-d22c7d32beb3\",\n      \"label\": \"label-7031\",\n      \"height\": 320,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"29cfb960-e19a-4471-a6d0-9517e14cc62b\",\n      \"label\": \"label-7032\",\n      \"height\": 491,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"f5b2f0f1-f4ac-4da3-8e6c-b75a8d3fe35e\",\n      \"label\": \"label-7033\",\n      \"height\": 357,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"64841e6b-34b5-4e63-a657-101660e3a4fc\",\n      \"label\": \"label-7034\",\n      \"height\": 242,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"00ea73fd-b65a-40fb-b7aa-6f0b027ba85c\",\n      \"label\": \"label-7035\",\n      \"height\": 504,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"e2753fdf-272d-4275-8e58-d28de4f7b73c\",\n      \"label\": \"label-7036\",\n      \"height\": 418,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"5f563db3-aa9d-4c16-aa6c-ef522befd812\",\n      \"label\": \"label-7037\",\n      \"height\": 130,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"e9e5345f-5e6a-4e69-94dc-2959fc769dac\",\n      \"label\": \"label-7038\",\n      \"height\": 471,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"7c141b75-0bc6-46f6-91bc-4922fda37ab1\",\n      \"label\": \"label-7039\",\n      \"height\": 74,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"058a7682-de17-4948-975a-80146407b377\",\n      \"label\": \"label-7040\",\n      \"height\": 288,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"bd8eae43-c3c5-47f8-bd24-93d8bb9cedb6\",\n      \"label\": \"label-7041\",\n      \"height\": 44,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"89c42193-72d8-4efa-a4a3-82667620cdca\",\n      \"label\": \"label-7042\",\n      \"height\": 204,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"ee20837d-f957-4bcf-8fd3-bd2ef69a3df2\",\n      \"label\": \"label-7043\",\n      \"height\": 302,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"97d0f282-c99b-4b81-b071-fe76967076b0\",\n      \"label\": \"label-7044\",\n      \"height\": 194,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"4f5de898-f15c-44b4-90d1-af5deaeabfb9\",\n      \"label\": \"label-7045\",\n      \"height\": 401,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"4e6e8266-38ba-4bd1-911c-43710eaa2198\",\n      \"label\": \"label-7046\",\n      \"height\": 122,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"5f564154-bb6d-4ac8-93a5-61f91060f931\",\n      \"label\": \"label-7047\",\n      \"height\": 46,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"f20dfb3d-98bd-42fd-87c6-56abf2fd66b7\",\n      \"label\": \"label-7048\",\n      \"height\": 379,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"66e8b945-a456-49ef-bb69-3ad48a2bb520\",\n      \"label\": \"label-7049\",\n      \"height\": 249,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"489e4974-7572-4e9b-b05d-d4d7d14b3fb0\",\n      \"label\": \"label-7050\",\n      \"height\": 305,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"f5f7f8cc-25c2-4197-aec1-76199a08e902\",\n      \"label\": \"label-7051\",\n      \"height\": 184,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"daf68563-1488-4f79-95a8-ef2fd5557b49\",\n      \"label\": \"label-7052\",\n      \"height\": 56,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"4f46a251-3534-46e0-9d65-ab789df2e27f\",\n      \"label\": \"label-7053\",\n      \"height\": 210,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"8a12bcaa-588d-4971-94c8-feb0dd95040b\",\n      \"label\": \"label-7054\",\n      \"height\": 413,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"5b4fdbcf-6035-41f3-b3a4-4814062a1b21\",\n      \"label\": \"label-7055\",\n      \"height\": 206,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"08e6b907-bae7-4f50-b241-825815d0254f\",\n      \"label\": \"label-7056\",\n      \"height\": 411,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"6f66db8a-71e0-4dfb-b1a9-c0bca65e9af5\",\n      \"label\": \"label-7057\",\n      \"height\": 336,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"919f9538-5448-47cd-a1fd-a12f4c067240\",\n      \"label\": \"label-7058\",\n      \"height\": 488,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"3e0277c1-3d05-4ea3-9f1c-de31c3fdf8d7\",\n      \"label\": \"label-7059\",\n      \"height\": 246,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"6314bf98-94ed-48b5-b5b3-0a91708f740d\",\n      \"label\": \"label-7060\",\n      \"height\": 219,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"7842bc1f-37ff-4902-ad43-e9699e5c8b29\",\n      \"label\": \"label-7061\",\n      \"height\": 477,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"a1fefbf9-3d76-4c97-a913-f07f5b7eab55\",\n      \"label\": \"label-7062\",\n      \"height\": 239,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"d63b0ee7-dfc2-4f10-86bf-27bdc67af49e\",\n      \"label\": \"label-7063\",\n      \"height\": 47,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"5185d8b1-3122-4ba3-9fe7-92c010a9540e\",\n      \"label\": \"label-7064\",\n      \"height\": 135,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"a9613e79-3fe9-4b6a-93c5-caff430d4553\",\n      \"label\": \"label-7065\",\n      \"height\": 281,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"a1681364-1a5d-46ef-97c8-3d86f68fc805\",\n      \"label\": \"label-7066\",\n      \"height\": 165,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"817ec37c-cee4-4079-bf93-db3f49b9e30f\",\n      \"label\": \"label-7067\",\n      \"height\": 260,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"e2ef844d-3e4c-44d3-8a43-2ce639166d5c\",\n      \"label\": \"label-7068\",\n      \"height\": 177,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"3a8a22d2-4022-42f3-a515-a655dfd2f21b\",\n      \"label\": \"label-7069\",\n      \"height\": 457,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"fd20f334-f06b-4d7f-91ad-bec7cf1d20ca\",\n      \"label\": \"label-7070\",\n      \"height\": 293,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"6cbf9adc-2daf-454a-bb07-5ee1e72bb69a\",\n      \"label\": \"label-7071\",\n      \"height\": 53,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"46331e78-4cb3-4e81-b46d-29d5b807e4c0\",\n      \"label\": \"label-7072\",\n      \"height\": 387,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"037b8980-dac0-4dcf-85c9-1925e5e75645\",\n      \"label\": \"label-7073\",\n      \"height\": 70,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"090b0447-bbd4-4b29-92b9-9cd4a5e73817\",\n      \"label\": \"label-7074\",\n      \"height\": 421,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"e7c06854-05da-47e7-a67c-26efafd891ce\",\n      \"label\": \"label-7075\",\n      \"height\": 309,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"25c09bb5-9358-45c0-9419-d5a0b02ebb5d\",\n      \"label\": \"label-7076\",\n      \"height\": 133,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"1438bac9-8de0-4c1f-b286-83549357a2cb\",\n      \"label\": \"label-7077\",\n      \"height\": 136,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"33f6a63c-36f8-42dd-bcfc-bb51a93b3c7f\",\n      \"label\": \"label-7078\",\n      \"height\": 424,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"90165d12-1caa-43b0-8e82-3f06eee38241\",\n      \"label\": \"label-7079\",\n      \"height\": 309,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"8188dccd-e3e5-4915-9d23-cb044383319f\",\n      \"label\": \"label-7080\",\n      \"height\": 89,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"534a7217-fe78-463f-a27e-8809ea3d10c4\",\n      \"label\": \"label-7081\",\n      \"height\": 157,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"24ac31a4-d6f5-420d-943b-586c3361a5bb\",\n      \"label\": \"label-7082\",\n      \"height\": 189,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"d511322e-6ab9-4f24-a52e-e1acb5f814c7\",\n      \"label\": \"label-7083\",\n      \"height\": 243,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"56dcc282-0020-4c1a-ac22-0a4491a4e1c0\",\n      \"label\": \"label-7084\",\n      \"height\": 506,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"1205c02a-9837-4650-b927-d029618fdc97\",\n      \"label\": \"label-7085\",\n      \"height\": 138,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"604313c6-93b5-4478-9514-763199575499\",\n      \"label\": \"label-7086\",\n      \"height\": 526,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"7e6ab1e0-e8b6-4a0f-a66c-e5b25db330b1\",\n      \"label\": \"label-7087\",\n      \"height\": 235,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"58ca880b-9f42-4404-96ae-d6a01a1983c9\",\n      \"label\": \"label-7088\",\n      \"height\": 323,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"2b631a40-e1e4-4472-92b2-814968df6da7\",\n      \"label\": \"label-7089\",\n      \"height\": 502,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"52c6d986-bf1f-4f0b-a13d-b5d50bdb967e\",\n      \"label\": \"label-7090\",\n      \"height\": 93,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"46899f1d-9393-48e7-9401-62a38a576b9a\",\n      \"label\": \"label-7091\",\n      \"height\": 230,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"983350ad-1deb-4f2a-b816-57410b32b0ed\",\n      \"label\": \"label-7092\",\n      \"height\": 42,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"61440bbf-77cb-4a76-a49c-8efd736bba6d\",\n      \"label\": \"label-7093\",\n      \"height\": 37,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"896c48ee-acb3-4b1d-bed2-372da5449539\",\n      \"label\": \"label-7094\",\n      \"height\": 78,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"2d36ba61-3070-4ee5-b2c7-83677d75d5a4\",\n      \"label\": \"label-7095\",\n      \"height\": 324,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"15700233-f837-4972-88a5-254ddebe9602\",\n      \"label\": \"label-7096\",\n      \"height\": 75,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"461854fe-57be-4503-a42b-eb557233eda8\",\n      \"label\": \"label-7097\",\n      \"height\": 417,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"b6962e7d-cdac-490e-90c7-65be4294ef7a\",\n      \"label\": \"label-7098\",\n      \"height\": 423,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"6bbdf4c4-200b-4163-980d-23c4e8a66ce4\",\n      \"label\": \"label-7099\",\n      \"height\": 190,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"80ca94a7-054c-424b-8f3f-1186bcb33cd5\",\n      \"label\": \"label-7100\",\n      \"height\": 264,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"d5fcc3a6-b0ae-43ff-aafa-f06daeb95d2e\",\n      \"label\": \"label-7101\",\n      \"height\": 219,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"f308dd09-26b9-45ae-85e7-f84b56dd7f0b\",\n      \"label\": \"label-7102\",\n      \"height\": 399,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"c056b4d1-dc20-403d-9b84-5d4bf0698bba\",\n      \"label\": \"label-7103\",\n      \"height\": 274,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"84de6bee-9825-4844-b63f-9a2dc311f84e\",\n      \"label\": \"label-7104\",\n      \"height\": 451,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"8d608491-24d9-4131-8986-0cfa8e69d45f\",\n      \"label\": \"label-7105\",\n      \"height\": 518,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"19e8d7f7-14f9-4577-9c13-e3151f66d1c1\",\n      \"label\": \"label-7106\",\n      \"height\": 360,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"13966b50-a12f-4b38-bd95-fdb1b0c8875e\",\n      \"label\": \"label-7107\",\n      \"height\": 341,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"5d2469ea-1832-4899-bbaa-02a875a4d834\",\n      \"label\": \"label-7108\",\n      \"height\": 215,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"5767af77-0870-489d-bd84-b732d1d7a5dc\",\n      \"label\": \"label-7109\",\n      \"height\": 510,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"341bed7f-35bf-4d3c-a887-226a406cdf26\",\n      \"label\": \"label-7110\",\n      \"height\": 415,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"95ee33a4-4987-4b5e-8b62-4743d0f20f8e\",\n      \"label\": \"label-7111\",\n      \"height\": 129,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"e9ee2c9c-c9d9-4d60-870c-e5933fb70a65\",\n      \"label\": \"label-7112\",\n      \"height\": 308,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"a8cf1c27-318f-4e82-9d0a-dc689a94f269\",\n      \"label\": \"label-7113\",\n      \"height\": 286,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"a00810de-7541-45d6-84da-2bd9c7f58fc5\",\n      \"label\": \"label-7114\",\n      \"height\": 286,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"68419930-ee4e-49e4-a279-b7c69c4d0c99\",\n      \"label\": \"label-7115\",\n      \"height\": 256,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"159c3019-7e5d-4ba3-ad84-cfe98d842e38\",\n      \"label\": \"label-7116\",\n      \"height\": 151,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"5e1ba40a-87d4-4f6a-a8b6-2af4af72f018\",\n      \"label\": \"label-7117\",\n      \"height\": 254,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"22972d93-ebbd-4c25-a442-cb39dd479683\",\n      \"label\": \"label-7118\",\n      \"height\": 329,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"475c63e9-bf11-4748-b19d-21121230a687\",\n      \"label\": \"label-7119\",\n      \"height\": 317,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"43bf8ece-c1a4-45e2-a072-92aa9261d972\",\n      \"label\": \"label-7120\",\n      \"height\": 63,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"a561deb0-4c02-4e1a-b3c9-2ec87c5fcef9\",\n      \"label\": \"label-7121\",\n      \"height\": 384,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"2adeb2c2-acf6-43fd-b6e1-1cb2a6870375\",\n      \"label\": \"label-7122\",\n      \"height\": 143,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"b2d8eb7e-c38f-4494-a7ef-9466ffcbacb7\",\n      \"label\": \"label-7123\",\n      \"height\": 299,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"8e820e03-bcea-4ee8-a0bc-437c870188ff\",\n      \"label\": \"label-7124\",\n      \"height\": 129,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"ee90155f-cf53-4068-898c-5a1245cd9f67\",\n      \"label\": \"label-7125\",\n      \"height\": 420,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"5b79f619-7887-4e9c-b9e2-3c7b77866599\",\n      \"label\": \"label-7126\",\n      \"height\": 296,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"177fc7ee-4f56-48c0-8eb3-e2cb08d052d5\",\n      \"label\": \"label-7127\",\n      \"height\": 394,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"5d04a72b-3159-4af2-b2e2-7f1357e304b0\",\n      \"label\": \"label-7128\",\n      \"height\": 424,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"dc1f9c34-f4bc-40f0-adb9-93d50e91eee4\",\n      \"label\": \"label-7129\",\n      \"height\": 116,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"3af90038-e136-4441-a370-d6cbee0a7cbd\",\n      \"label\": \"label-7130\",\n      \"height\": 187,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"8fe3a99a-6297-4d68-975a-f16b517d9921\",\n      \"label\": \"label-7131\",\n      \"height\": 358,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"20fba1a9-4507-4edc-938d-8452a0195b96\",\n      \"label\": \"label-7132\",\n      \"height\": 33,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"493d4377-a5b8-43aa-a6cd-61445a723cbf\",\n      \"label\": \"label-7133\",\n      \"height\": 266,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"694ccc14-3f30-43b9-9ebd-d072c7080952\",\n      \"label\": \"label-7134\",\n      \"height\": 469,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"4d1bbf6c-dab8-49f0-860b-1045b743dedf\",\n      \"label\": \"label-7135\",\n      \"height\": 152,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"c995df79-859b-4f2b-8edf-02d68fd7ddd1\",\n      \"label\": \"label-7136\",\n      \"height\": 338,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"8f1aa67a-fda3-47fb-8f27-03bc57949e8d\",\n      \"label\": \"label-7137\",\n      \"height\": 362,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"3ec6aff5-a1a7-4854-bf25-465bac0a1e4b\",\n      \"label\": \"label-7138\",\n      \"height\": 260,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"36516b3f-e189-408f-afc7-c0bbf974853d\",\n      \"label\": \"label-7139\",\n      \"height\": 63,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"fe625760-61ef-4fb1-be08-47010577276d\",\n      \"label\": \"label-7140\",\n      \"height\": 320,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"1e481f20-11a2-47f7-af55-70dcb3746e4c\",\n      \"label\": \"label-7141\",\n      \"height\": 301,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"5da09dd7-280b-4ec7-a57e-4df8225fdb23\",\n      \"label\": \"label-7142\",\n      \"height\": 269,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"dddcf6d1-bc1c-4278-949e-c9f497ccc07b\",\n      \"label\": \"label-7143\",\n      \"height\": 215,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"799b7d84-cc65-4416-9885-97c761324ad5\",\n      \"label\": \"label-7144\",\n      \"height\": 513,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"24cdc24e-3b91-4ddc-8cc2-98f9b3defad0\",\n      \"label\": \"label-7145\",\n      \"height\": 39,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"aaf87aa8-5cd6-4d9a-ab3c-855d21fb06ab\",\n      \"label\": \"label-7146\",\n      \"height\": 334,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"6cc6da61-b8c2-451d-b2af-5e521a76ff54\",\n      \"label\": \"label-7147\",\n      \"height\": 401,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"0dfa3d33-6c03-43a8-b337-d8311dabecba\",\n      \"label\": \"label-7148\",\n      \"height\": 504,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"36c11b70-25a8-46df-b4dd-1c331405f75e\",\n      \"label\": \"label-7149\",\n      \"height\": 223,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"633ed96c-303f-4d68-94cb-f4e7a397cfc8\",\n      \"label\": \"label-7150\",\n      \"height\": 495,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"4a5b9038-41f5-4a3b-9a35-0cdf5a25ab92\",\n      \"label\": \"label-7151\",\n      \"height\": 76,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"05507737-85a7-4632-8ee2-4c11e53285c1\",\n      \"label\": \"label-7152\",\n      \"height\": 453,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"53e4e98e-3a69-4755-bd99-7fb01f9837a5\",\n      \"label\": \"label-7153\",\n      \"height\": 281,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"da77124a-f454-4ab2-94dc-9e8917320716\",\n      \"label\": \"label-7154\",\n      \"height\": 260,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"f5c810db-1d00-47b7-8c27-c3d360af2b6d\",\n      \"label\": \"label-7155\",\n      \"height\": 442,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"046191ba-cb5b-403b-987b-e8f9b09abb3e\",\n      \"label\": \"label-7156\",\n      \"height\": 527,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"e930e19b-029b-4a59-865f-b03934c249a7\",\n      \"label\": \"label-7157\",\n      \"height\": 346,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"25d02c35-c74d-4a9d-8cac-927821151192\",\n      \"label\": \"label-7158\",\n      \"height\": 37,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"bbc6d1fa-155d-4c81-adf4-c3d12729de7a\",\n      \"label\": \"label-7159\",\n      \"height\": 203,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"98234f19-a4b9-4bb9-aea1-63d46f88a6d0\",\n      \"label\": \"label-7160\",\n      \"height\": 229,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"df963e3c-c797-4dd3-a5ce-a47d1581947d\",\n      \"label\": \"label-7161\",\n      \"height\": 216,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"2b4c5e50-915a-4438-9787-3eebaa0fcd56\",\n      \"label\": \"label-7162\",\n      \"height\": 304,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"32da3810-7f13-4e0b-839d-6aed5904e7f1\",\n      \"label\": \"label-7163\",\n      \"height\": 517,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"f5e7d355-813c-423a-87a2-ea7bd33a69ac\",\n      \"label\": \"label-7164\",\n      \"height\": 234,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"ad166a52-1682-4498-aba5-2faadd52274b\",\n      \"label\": \"label-7165\",\n      \"height\": 420,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"811e6b21-48a0-424d-8e56-a79ceb01d2d0\",\n      \"label\": \"label-7166\",\n      \"height\": 352,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"b8040c08-d315-4be9-9802-d8c1dc3c1b14\",\n      \"label\": \"label-7167\",\n      \"height\": 268,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"0e72bc86-1985-4b06-907b-4259cfca3e00\",\n      \"label\": \"label-7168\",\n      \"height\": 310,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"b208f433-a4e6-4a9a-95d4-0ff14bf039de\",\n      \"label\": \"label-7169\",\n      \"height\": 371,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"c2f4560d-03aa-4beb-be36-f305fc7b26c9\",\n      \"label\": \"label-7170\",\n      \"height\": 177,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"e13df791-0605-4cec-a59c-e4980547538e\",\n      \"label\": \"label-7171\",\n      \"height\": 442,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"62f42a43-0694-4721-b16d-f9a4c961094c\",\n      \"label\": \"label-7172\",\n      \"height\": 253,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"1db8dff8-cb00-4853-ac6b-155d4a0cf28a\",\n      \"label\": \"label-7173\",\n      \"height\": 187,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"a534353a-c346-4e7d-a5dc-1570869b3d7d\",\n      \"label\": \"label-7174\",\n      \"height\": 319,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"894fb942-c5da-440c-ad82-03143c80f46f\",\n      \"label\": \"label-7175\",\n      \"height\": 258,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"f5440b1b-b013-4639-a9fb-9694e73f67e5\",\n      \"label\": \"label-7176\",\n      \"height\": 162,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"a73428cd-6d17-4aab-8fae-caad5f185ae3\",\n      \"label\": \"label-7177\",\n      \"height\": 378,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"5371b488-8a6e-46b6-b549-f704d9af2752\",\n      \"label\": \"label-7178\",\n      \"height\": 99,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"d07dad1e-ed7e-4ba9-913e-ac22b2092ceb\",\n      \"label\": \"label-7179\",\n      \"height\": 505,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"5de06a4a-1dec-4138-9d60-c92cf6e2a263\",\n      \"label\": \"label-7180\",\n      \"height\": 173,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"3f1228d8-ec6c-479f-a84b-abc95899cbe9\",\n      \"label\": \"label-7181\",\n      \"height\": 206,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"7f87da7f-33a3-4314-832a-493939b1201b\",\n      \"label\": \"label-7182\",\n      \"height\": 511,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"8b3b4aa1-cf33-4086-ac23-31e739586010\",\n      \"label\": \"label-7183\",\n      \"height\": 212,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"5b094ac3-44b2-4643-9ed8-b06536f14f53\",\n      \"label\": \"label-7184\",\n      \"height\": 333,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"37a66806-f9d3-4754-9c18-9c2c6d00119a\",\n      \"label\": \"label-7185\",\n      \"height\": 71,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"c1121f36-8d2c-4123-892b-631409b917ca\",\n      \"label\": \"label-7186\",\n      \"height\": 402,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"cd07afd4-ff36-4df6-ae6a-d8c0215441e6\",\n      \"label\": \"label-7187\",\n      \"height\": 423,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"6454d9fe-2296-4daf-94cf-0657d21b8393\",\n      \"label\": \"label-7188\",\n      \"height\": 258,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"05660100-85c9-40b3-809e-9a4b50bdadc8\",\n      \"label\": \"label-7189\",\n      \"height\": 505,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"e3ecd597-2308-419c-974e-9bed227482b4\",\n      \"label\": \"label-7190\",\n      \"height\": 187,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"7883d8cd-84db-4a12-a9f1-899173896a94\",\n      \"label\": \"label-7191\",\n      \"height\": 127,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"60994a59-b144-4cda-8420-6ece459dcefe\",\n      \"label\": \"label-7192\",\n      \"height\": 296,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"87f731a6-7f92-45eb-a526-d136a59c5a6c\",\n      \"label\": \"label-7193\",\n      \"height\": 57,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"6364ea03-1ce1-46e4-87a1-496abd61586d\",\n      \"label\": \"label-7194\",\n      \"height\": 47,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"e4814996-b3dd-4538-82a1-9f319ffed632\",\n      \"label\": \"label-7195\",\n      \"height\": 383,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"de5386aa-7d09-49dd-962f-db4cdaf145fb\",\n      \"label\": \"label-7196\",\n      \"height\": 262,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"b668797c-4618-451b-b32e-2d3c8e5635ad\",\n      \"label\": \"label-7197\",\n      \"height\": 126,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"25f3c3d3-5822-4bcd-bcf6-6cdfc09700a9\",\n      \"label\": \"label-7198\",\n      \"height\": 442,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"b7015a36-03da-4327-844e-11d18aef50a4\",\n      \"label\": \"label-7199\",\n      \"height\": 269,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"dd3c509b-3881-45bb-af38-f62a4feb3a70\",\n      \"label\": \"label-7200\",\n      \"height\": 129,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"0fe1dcc9-98e6-4c9d-90a0-03aaf57dd946\",\n      \"label\": \"label-7201\",\n      \"height\": 388,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"3f965621-f567-48d0-ba09-81acd785b6ee\",\n      \"label\": \"label-7202\",\n      \"height\": 496,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"7cd46f54-4a07-4cf9-83b8-42e54d46f990\",\n      \"label\": \"label-7203\",\n      \"height\": 462,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"cc27ecaf-0b76-481a-bd53-a7e97bd6386d\",\n      \"label\": \"label-7204\",\n      \"height\": 101,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"05a39d8e-ded2-4d66-9d30-7a2d5531b20f\",\n      \"label\": \"label-7205\",\n      \"height\": 307,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"e4de9b73-b825-4643-ad9f-22f7b21e155b\",\n      \"label\": \"label-7206\",\n      \"height\": 261,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"358e5472-1997-477d-af89-ce53318bfbde\",\n      \"label\": \"label-7207\",\n      \"height\": 486,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"91671924-ef15-4a84-bb53-15dcd9fd4e56\",\n      \"label\": \"label-7208\",\n      \"height\": 491,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"ca6862f3-a0bb-418b-ac9d-5317fcce30ab\",\n      \"label\": \"label-7209\",\n      \"height\": 210,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"91c9d4f9-9bf5-4c6b-a1d1-c9f77376e847\",\n      \"label\": \"label-7210\",\n      \"height\": 270,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"3ee64f71-cbd9-469c-a628-b87fdd38a0f2\",\n      \"label\": \"label-7211\",\n      \"height\": 389,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"2c6eafc0-8dca-44d1-b3ae-f872e3c9a117\",\n      \"label\": \"label-7212\",\n      \"height\": 41,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"ec3e63c8-440f-4a5c-8062-e72080013fab\",\n      \"label\": \"label-7213\",\n      \"height\": 314,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"845758cb-167c-4ec1-b44c-804a894d99c1\",\n      \"label\": \"label-7214\",\n      \"height\": 70,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"df675fd8-dc23-4b0a-a95f-eba2c9f41f88\",\n      \"label\": \"label-7215\",\n      \"height\": 249,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"0bbf0f88-44f6-4cef-b6c1-c22c8eabdc4b\",\n      \"label\": \"label-7216\",\n      \"height\": 376,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"42ea1cbc-a7cc-4c19-b9a1-b33b1af0917e\",\n      \"label\": \"label-7217\",\n      \"height\": 343,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"3d92287b-0728-469a-bb65-aabc638a526d\",\n      \"label\": \"label-7218\",\n      \"height\": 221,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"8038f954-889e-4ba9-b85d-4df4a3aee29d\",\n      \"label\": \"label-7219\",\n      \"height\": 385,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"1a60011f-8be4-4c42-a356-8da5fbf5cf26\",\n      \"label\": \"label-7220\",\n      \"height\": 437,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"3f7f89d8-fdeb-4945-820c-199827fe0d40\",\n      \"label\": \"label-7221\",\n      \"height\": 141,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"723cc5ac-5fa6-469d-85ae-66047219d598\",\n      \"label\": \"label-7222\",\n      \"height\": 207,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"6093b1ae-3f44-476e-880a-cc5eb3405e67\",\n      \"label\": \"label-7223\",\n      \"height\": 51,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"623a5f20-ce79-4567-9cc5-9d734d974451\",\n      \"label\": \"label-7224\",\n      \"height\": 102,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"d0c75aab-1165-4f89-b418-250fb588f3c4\",\n      \"label\": \"label-7225\",\n      \"height\": 449,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"cb70bf15-ec8c-4319-8634-26116c922cb1\",\n      \"label\": \"label-7226\",\n      \"height\": 308,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"a2c1169a-a0a7-438f-bd2d-6fe9450eeaa5\",\n      \"label\": \"label-7227\",\n      \"height\": 522,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"d669434a-6d82-461d-aee9-06897295b9e7\",\n      \"label\": \"label-7228\",\n      \"height\": 289,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"2c4fc248-c8af-4c7a-82d1-676b74dd7411\",\n      \"label\": \"label-7229\",\n      \"height\": 386,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"3555c817-845a-45a2-95ee-828fec6d470a\",\n      \"label\": \"label-7230\",\n      \"height\": 184,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"a548b142-4873-422d-937c-9c4b156266cc\",\n      \"label\": \"label-7231\",\n      \"height\": 231,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"9d856c0d-d06d-4473-8f7f-c27ee5148162\",\n      \"label\": \"label-7232\",\n      \"height\": 272,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"94f2e695-558a-40d6-a9d2-e8612cd6d132\",\n      \"label\": \"label-7233\",\n      \"height\": 335,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"bfa88437-074a-4fea-999d-be07b43d0abc\",\n      \"label\": \"label-7234\",\n      \"height\": 218,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"79b1aa40-afa4-4b8f-92be-b8b9041bc95f\",\n      \"label\": \"label-7235\",\n      \"height\": 410,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"d6d2711d-a980-438e-8c93-018cdfae4daf\",\n      \"label\": \"label-7236\",\n      \"height\": 342,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"b7cd7b40-586e-46b6-8549-fa240438b001\",\n      \"label\": \"label-7237\",\n      \"height\": 111,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"1c16473f-05aa-4d8b-8a2c-8170546e964a\",\n      \"label\": \"label-7238\",\n      \"height\": 441,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"dd71f87b-a2f1-4ed0-a3ea-0882df50a625\",\n      \"label\": \"label-7239\",\n      \"height\": 314,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"5cbfdba4-850f-4e52-8db9-3d308b55db24\",\n      \"label\": \"label-7240\",\n      \"height\": 134,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"9ccabeaa-26d7-448a-a32f-7f51a84c0685\",\n      \"label\": \"label-7241\",\n      \"height\": 297,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"8ee798fa-49d0-46fd-aaf0-12971f24bb80\",\n      \"label\": \"label-7242\",\n      \"height\": 524,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"f171c271-6d1d-420e-b9d3-76f2f4a994ce\",\n      \"label\": \"label-7243\",\n      \"height\": 262,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"bad8fb0f-1c8d-4a0f-a7a9-e81c8af98ad8\",\n      \"label\": \"label-7244\",\n      \"height\": 135,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"b22f28a9-de5b-453a-b8ec-ee70152a9c13\",\n      \"label\": \"label-7245\",\n      \"height\": 411,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"252d14d4-fb00-44ad-adcb-5b2421f21cf6\",\n      \"label\": \"label-7246\",\n      \"height\": 469,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"b741e6fb-a03c-44a7-a147-69942d5eea62\",\n      \"label\": \"label-7247\",\n      \"height\": 207,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"6e9fab5c-906e-44e7-9959-a873974dc3e0\",\n      \"label\": \"label-7248\",\n      \"height\": 109,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"b5210575-7937-495c-85fd-df088eee8069\",\n      \"label\": \"label-7249\",\n      \"height\": 39,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"e231b746-356f-4caf-9eba-77fbc0448735\",\n      \"label\": \"label-7250\",\n      \"height\": 459,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"df281993-3046-40bf-8cad-6c4ca5680508\",\n      \"label\": \"label-7251\",\n      \"height\": 380,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"87177cfe-446d-4818-8a30-c1438d6edca1\",\n      \"label\": \"label-7252\",\n      \"height\": 44,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"84522883-1c22-454a-9ff7-316f0ecc6b98\",\n      \"label\": \"label-7253\",\n      \"height\": 462,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"90df330f-1e3c-435a-86c4-8e0614ab0892\",\n      \"label\": \"label-7254\",\n      \"height\": 149,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"e1db6b10-4a36-4dba-911d-1edc7c0651ff\",\n      \"label\": \"label-7255\",\n      \"height\": 319,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"18d5e620-f13e-42c5-8aaa-6e16f2802587\",\n      \"label\": \"label-7256\",\n      \"height\": 248,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"5ba1a107-9a7f-4d06-99d4-5cbcf3dbbf86\",\n      \"label\": \"label-7257\",\n      \"height\": 526,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"d6716812-3538-4d56-8893-39cc9c023304\",\n      \"label\": \"label-7258\",\n      \"height\": 381,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"51f59f0c-0631-469d-9c05-824cb64007ce\",\n      \"label\": \"label-7259\",\n      \"height\": 518,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"03a903d0-89e6-47bb-a89e-1d6f3940717a\",\n      \"label\": \"label-7260\",\n      \"height\": 69,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"1cce7411-56cf-45cf-bb08-9a4737265fac\",\n      \"label\": \"label-7261\",\n      \"height\": 33,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"310db3a8-afc0-4fe6-85de-cabda1617698\",\n      \"label\": \"label-7262\",\n      \"height\": 221,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"355d03cc-ab7a-4f14-bf3c-1dfe43aac173\",\n      \"label\": \"label-7263\",\n      \"height\": 126,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"2f01454f-5dec-4d1a-88e8-db54bfe5cb30\",\n      \"label\": \"label-7264\",\n      \"height\": 434,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"70a95b9c-92e9-47c6-b552-c673f22610bd\",\n      \"label\": \"label-7265\",\n      \"height\": 189,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"fcbdb9ac-af92-4505-9a04-0e3b7be0fea6\",\n      \"label\": \"label-7266\",\n      \"height\": 532,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"bd2d225e-3a6b-4d29-ab4c-649224946d74\",\n      \"label\": \"label-7267\",\n      \"height\": 36,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"d46f2a1a-d41b-40ed-9d32-70631c4117c6\",\n      \"label\": \"label-7268\",\n      \"height\": 390,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"237eca3f-368f-4732-9595-3f8ead272737\",\n      \"label\": \"label-7269\",\n      \"height\": 247,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"ad52f2db-b2aa-4c6d-9a7a-e2958dc31fad\",\n      \"label\": \"label-7270\",\n      \"height\": 506,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"e5df00fb-f399-4242-9a5d-2caa613c8840\",\n      \"label\": \"label-7271\",\n      \"height\": 242,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"5499d197-129e-4ab7-8af4-928d3ff982ee\",\n      \"label\": \"label-7272\",\n      \"height\": 288,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"73575d6d-1ea9-4b7e-9790-fd38ffa48cfc\",\n      \"label\": \"label-7273\",\n      \"height\": 317,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"91e646fb-830c-49a2-aff5-ab67a6c94ff9\",\n      \"label\": \"label-7274\",\n      \"height\": 387,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"ce891ab2-5d7c-4be0-9aa2-ee36d1b77780\",\n      \"label\": \"label-7275\",\n      \"height\": 171,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"10c7c905-aca7-4f51-8207-01921f1c6c1e\",\n      \"label\": \"label-7276\",\n      \"height\": 140,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"a9be871f-b7e9-476b-ab02-0563e15b3cdb\",\n      \"label\": \"label-7277\",\n      \"height\": 193,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"b6e51903-0da4-4d2f-bd9b-3d70faab1116\",\n      \"label\": \"label-7278\",\n      \"height\": 491,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"5d0e589d-2731-4398-be34-b338a5d069fa\",\n      \"label\": \"label-7279\",\n      \"height\": 350,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"4be30b8c-4631-42cb-bba6-d9b2657c37be\",\n      \"label\": \"label-7280\",\n      \"height\": 104,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"38ca528b-b855-4573-8eef-474902bfcf30\",\n      \"label\": \"label-7281\",\n      \"height\": 91,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"d5a49e52-def4-42bf-aa1c-a67c31caa0a1\",\n      \"label\": \"label-7282\",\n      \"height\": 120,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"d1942fc3-9af5-47be-a603-f5014d43a04c\",\n      \"label\": \"label-7283\",\n      \"height\": 182,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"37be3195-767b-49f0-88ff-9816ffe3c144\",\n      \"label\": \"label-7284\",\n      \"height\": 459,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"39322035-cb40-4cd3-9886-d83a05f576f7\",\n      \"label\": \"label-7285\",\n      \"height\": 35,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"aebc6db5-e951-4f67-9dd2-40da50af4dbc\",\n      \"label\": \"label-7286\",\n      \"height\": 217,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"3879ca13-b977-43e3-9979-ccdd46aef5b1\",\n      \"label\": \"label-7287\",\n      \"height\": 116,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"84c3d540-9eaf-4e7e-bde7-7ce7aa91238f\",\n      \"label\": \"label-7288\",\n      \"height\": 232,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"dc3bec76-5f58-4a88-b484-2189b5557854\",\n      \"label\": \"label-7289\",\n      \"height\": 99,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"293524c4-0cde-4b88-9391-0f45264a2a21\",\n      \"label\": \"label-7290\",\n      \"height\": 482,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"6db61d1a-9a3f-407e-8b93-5be1782db3cb\",\n      \"label\": \"label-7291\",\n      \"height\": 137,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"b06e2cbd-0708-4b0d-b295-1dc41db7fe24\",\n      \"label\": \"label-7292\",\n      \"height\": 143,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"d5962bdc-446b-4fd2-87b9-de7cdfe84365\",\n      \"label\": \"label-7293\",\n      \"height\": 475,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"e6fb8022-9a1d-4b25-882e-626f09bf1fdb\",\n      \"label\": \"label-7294\",\n      \"height\": 396,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"e8c06259-f83c-464b-aeb0-60620e1e18f0\",\n      \"label\": \"label-7295\",\n      \"height\": 246,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"9515aa6f-4338-4abd-bd4d-315cfee03d1f\",\n      \"label\": \"label-7296\",\n      \"height\": 227,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"f63b62de-07b4-4df3-8a80-6d0b5a4bdbcb\",\n      \"label\": \"label-7297\",\n      \"height\": 228,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"eac05a2a-4fdd-4c49-ad1b-e0b2b05c05c5\",\n      \"label\": \"label-7298\",\n      \"height\": 395,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"e035c05e-7e45-4275-ae20-07b704d17b61\",\n      \"label\": \"label-7299\",\n      \"height\": 47,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"83049039-855e-4ae2-a11e-4a3107aef846\",\n      \"label\": \"label-7300\",\n      \"height\": 423,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"f0932b7a-6eea-42f4-a4ed-af354fa0e370\",\n      \"label\": \"label-7301\",\n      \"height\": 48,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"6a9cbf1e-62db-48be-8bac-29b204fed0c3\",\n      \"label\": \"label-7302\",\n      \"height\": 405,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"e3fe2267-a209-436a-9cc3-c48cbd682818\",\n      \"label\": \"label-7303\",\n      \"height\": 282,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"25768f09-aa14-457a-92ac-b3ce77a12242\",\n      \"label\": \"label-7304\",\n      \"height\": 45,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"99ecfbea-0c41-4c26-94e2-90124260494a\",\n      \"label\": \"label-7305\",\n      \"height\": 390,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"40ff0f7d-8b5e-4967-8671-d68211fb9340\",\n      \"label\": \"label-7306\",\n      \"height\": 322,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"fca14e4c-9586-4a31-8c45-c6435058691f\",\n      \"label\": \"label-7307\",\n      \"height\": 128,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"e12efbd4-831e-417b-89f5-85b1be3a5861\",\n      \"label\": \"label-7308\",\n      \"height\": 232,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"934f6fc7-1856-4567-a586-51de5372af68\",\n      \"label\": \"label-7309\",\n      \"height\": 292,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"3cbb0736-ea0d-44cf-9b9c-ca6aaf2a6ca1\",\n      \"label\": \"label-7310\",\n      \"height\": 313,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"21220108-891a-4413-a5ba-d410042465f8\",\n      \"label\": \"label-7311\",\n      \"height\": 140,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"348dfb62-4364-446d-925d-d2241773b12d\",\n      \"label\": \"label-7312\",\n      \"height\": 282,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"393c3adc-beb2-4824-b20a-e60500f4a010\",\n      \"label\": \"label-7313\",\n      \"height\": 140,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"73476e0f-59db-45a0-a72d-047dd825bb23\",\n      \"label\": \"label-7314\",\n      \"height\": 432,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"b01fb94c-f338-46ff-96fc-ee34577b4e7a\",\n      \"label\": \"label-7315\",\n      \"height\": 319,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"34eb0845-bd1e-41c8-89e1-2c5aa69d9173\",\n      \"label\": \"label-7316\",\n      \"height\": 338,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"1e98fef9-3abc-4969-9da4-a1119efb6d28\",\n      \"label\": \"label-7317\",\n      \"height\": 489,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"e47e966a-176c-464f-9882-2266f193508c\",\n      \"label\": \"label-7318\",\n      \"height\": 188,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"6c8b4495-3f47-45ab-9e6c-6a2015ed35e9\",\n      \"label\": \"label-7319\",\n      \"height\": 258,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"7070ff26-f9b8-4858-a58f-a520cc995f96\",\n      \"label\": \"label-7320\",\n      \"height\": 280,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"c763e96f-c0ec-40dc-9222-cd3776b7e7b1\",\n      \"label\": \"label-7321\",\n      \"height\": 150,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"71738222-b0eb-4733-9cbb-b214170136b0\",\n      \"label\": \"label-7322\",\n      \"height\": 236,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"b6baeff0-58e5-4235-ba08-bb67932584aa\",\n      \"label\": \"label-7323\",\n      \"height\": 283,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"2c74e4bc-5b2f-4fd7-b8e0-b796aec37488\",\n      \"label\": \"label-7324\",\n      \"height\": 207,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"bb33e0db-972e-42fd-bf9a-49c9b4b421d2\",\n      \"label\": \"label-7325\",\n      \"height\": 383,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"58a25b4d-47c8-49c0-b988-5a017c842864\",\n      \"label\": \"label-7326\",\n      \"height\": 171,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"86904a3d-8a93-4c39-b13d-50d0618fa9d2\",\n      \"label\": \"label-7327\",\n      \"height\": 295,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"f43d481f-9db6-460c-9a6d-7b0726ec9600\",\n      \"label\": \"label-7328\",\n      \"height\": 113,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"1c7675c9-60b7-4348-8442-449c7ee73c92\",\n      \"label\": \"label-7329\",\n      \"height\": 277,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"9c879e9c-de38-44c2-9e2e-d0229c184eb9\",\n      \"label\": \"label-7330\",\n      \"height\": 99,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"5adbf65f-0d3b-4aee-bd44-8bea7bdfb624\",\n      \"label\": \"label-7331\",\n      \"height\": 411,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"6a4d211d-1b46-48b5-b205-1975c0c5340e\",\n      \"label\": \"label-7332\",\n      \"height\": 495,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"426bef16-e4d2-4218-a5f6-3189be028db4\",\n      \"label\": \"label-7333\",\n      \"height\": 277,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"b7a8f2d9-cd07-46f7-825d-be612a9f4ffa\",\n      \"label\": \"label-7334\",\n      \"height\": 386,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"c1212af9-1a01-4fc2-8754-8e10bae48694\",\n      \"label\": \"label-7335\",\n      \"height\": 207,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"54673146-12d0-45a4-957f-55c6b0f9aa4c\",\n      \"label\": \"label-7336\",\n      \"height\": 157,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"6757e3bd-9b66-44dc-89b8-16e3394e6f00\",\n      \"label\": \"label-7337\",\n      \"height\": 260,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"5529fd91-daf4-4af8-8d26-6b9666b60541\",\n      \"label\": \"label-7338\",\n      \"height\": 460,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"ff90d53a-aa19-42ea-9848-5390bae34ce0\",\n      \"label\": \"label-7339\",\n      \"height\": 310,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"f4250811-e576-40b1-924a-a237d5629bb7\",\n      \"label\": \"label-7340\",\n      \"height\": 205,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"a799dc2a-860d-4844-a9e3-12c31f3d76c0\",\n      \"label\": \"label-7341\",\n      \"height\": 176,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"00fde36a-f8b0-45f4-9886-0d4eed760e3d\",\n      \"label\": \"label-7342\",\n      \"height\": 186,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"a5797dca-eb37-4088-9e4a-af0cbf2060c6\",\n      \"label\": \"label-7343\",\n      \"height\": 254,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"d102a93f-3549-4287-8418-ae99bad694da\",\n      \"label\": \"label-7344\",\n      \"height\": 234,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"4dccd6d8-c479-467d-982a-7c2c92cd76b0\",\n      \"label\": \"label-7345\",\n      \"height\": 406,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"a6db0c91-ea64-4e91-93f8-bf1ccbf539ca\",\n      \"label\": \"label-7346\",\n      \"height\": 438,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"fcdb4443-0c6d-40e9-9461-b7278b06608d\",\n      \"label\": \"label-7347\",\n      \"height\": 388,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"e809162f-21b7-4020-af74-b6ccf8a599fd\",\n      \"label\": \"label-7348\",\n      \"height\": 302,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"4aa98903-c022-4111-8873-5035fa5623b8\",\n      \"label\": \"label-7349\",\n      \"height\": 41,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"91fb193e-c7fa-46fa-b54a-dfb5268bc5ce\",\n      \"label\": \"label-7350\",\n      \"height\": 512,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"52bf69ad-8893-47ee-a9d8-5eb8e6cca1c1\",\n      \"label\": \"label-7351\",\n      \"height\": 277,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"b3cfb239-3da5-4289-a8d5-96bfea67e5c8\",\n      \"label\": \"label-7352\",\n      \"height\": 305,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"9ea1e8af-d935-4ce5-90cb-c692c804bc21\",\n      \"label\": \"label-7353\",\n      \"height\": 180,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"fc13857b-64ec-4dc9-b7d1-c8481bfe56bb\",\n      \"label\": \"label-7354\",\n      \"height\": 96,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"887b0781-a4c2-4d90-9f88-aca274275652\",\n      \"label\": \"label-7355\",\n      \"height\": 467,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"d0240dd9-a077-409c-922d-7f13125d55ec\",\n      \"label\": \"label-7356\",\n      \"height\": 348,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"aec96293-b458-4dfa-b2ea-e39beaaa4b7d\",\n      \"label\": \"label-7357\",\n      \"height\": 99,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"c9e315c1-3d53-4d2b-9d3e-b5c4d4b8c683\",\n      \"label\": \"label-7358\",\n      \"height\": 527,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"178d2f91-f03b-48e3-9a14-73b7d5161c4d\",\n      \"label\": \"label-7359\",\n      \"height\": 181,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"b471d55b-0828-4173-a403-b3db228c49f8\",\n      \"label\": \"label-7360\",\n      \"height\": 233,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"1231fbeb-2e41-40a8-b3e1-3387307b5192\",\n      \"label\": \"label-7361\",\n      \"height\": 184,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"eeb9c606-9267-4f80-b671-81cab3133159\",\n      \"label\": \"label-7362\",\n      \"height\": 318,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"9cfa1d1f-8de5-411f-bb15-74303c8761b7\",\n      \"label\": \"label-7363\",\n      \"height\": 164,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"dc1d1730-f717-4e97-a544-1ecd4b13c6ef\",\n      \"label\": \"label-7364\",\n      \"height\": 219,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"8ee7d420-2957-4cb9-865a-4811c626ca69\",\n      \"label\": \"label-7365\",\n      \"height\": 404,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"ff00c792-713c-41c1-827a-ea211a60bb5d\",\n      \"label\": \"label-7366\",\n      \"height\": 63,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"47d044f0-90bf-4469-b612-0178686b61cf\",\n      \"label\": \"label-7367\",\n      \"height\": 433,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"35510b8f-4942-45ad-be3b-8bd961a9494d\",\n      \"label\": \"label-7368\",\n      \"height\": 92,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"0623630a-1415-49b1-87a5-aea080c1115e\",\n      \"label\": \"label-7369\",\n      \"height\": 409,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"06a608d5-4f19-4aed-82d6-c22887f46178\",\n      \"label\": \"label-7370\",\n      \"height\": 103,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"420aeaa8-9b51-4fd8-bb8e-b909a98cead9\",\n      \"label\": \"label-7371\",\n      \"height\": 247,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"f30bc789-bdac-40e6-8df4-0bbf5524fdb4\",\n      \"label\": \"label-7372\",\n      \"height\": 161,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"58bd04d6-8772-40cd-be00-a69a19524969\",\n      \"label\": \"label-7373\",\n      \"height\": 105,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"e1ee2149-05c2-49fb-bae9-cc354e5648d9\",\n      \"label\": \"label-7374\",\n      \"height\": 489,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"2a434728-7f67-40cc-b536-60085e2a2558\",\n      \"label\": \"label-7375\",\n      \"height\": 248,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"01ebe760-b2b8-4bc6-b516-abc02e915191\",\n      \"label\": \"label-7376\",\n      \"height\": 211,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"d80e07c1-2514-4c9b-aba0-765b818feb66\",\n      \"label\": \"label-7377\",\n      \"height\": 310,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"8c7945a6-84c3-4f64-9f39-415fcf0ba711\",\n      \"label\": \"label-7378\",\n      \"height\": 522,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"83d5264f-88aa-4211-a5a7-a6780e4d9145\",\n      \"label\": \"label-7379\",\n      \"height\": 272,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"06d47297-6ee6-42a1-8de4-b31cdbd63bd7\",\n      \"label\": \"label-7380\",\n      \"height\": 278,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"5b9a5b06-61bd-43fb-a27f-f0068d91f90f\",\n      \"label\": \"label-7381\",\n      \"height\": 325,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"149e75f5-1fe6-486a-9416-c162adabaa1e\",\n      \"label\": \"label-7382\",\n      \"height\": 521,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"6da3872d-87ba-4a7e-8cc6-d482d6921e19\",\n      \"label\": \"label-7383\",\n      \"height\": 408,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"6e097793-fdbe-4ee5-9a52-1b3790b22c8e\",\n      \"label\": \"label-7384\",\n      \"height\": 121,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"9d723f96-6005-44db-a15f-79d46376643b\",\n      \"label\": \"label-7385\",\n      \"height\": 447,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"0a244071-9417-4d3a-9eef-1dc8c54904d3\",\n      \"label\": \"label-7386\",\n      \"height\": 455,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"9d0560bb-37ba-4911-a565-b47c2699e44d\",\n      \"label\": \"label-7387\",\n      \"height\": 101,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"d28611d6-0abc-42d5-9a73-72dff47d557c\",\n      \"label\": \"label-7388\",\n      \"height\": 152,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"09983cca-f109-470b-9169-c99f6975cbf1\",\n      \"label\": \"label-7389\",\n      \"height\": 204,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"5267dada-e44f-4fc0-a901-8d47cd029589\",\n      \"label\": \"label-7390\",\n      \"height\": 522,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"53553072-cc66-4616-8eac-bbe4ccf78c5b\",\n      \"label\": \"label-7391\",\n      \"height\": 136,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"4968f17d-665a-4954-a0a9-d0fe365227cd\",\n      \"label\": \"label-7392\",\n      \"height\": 274,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"9fb57843-1702-478a-8126-c153697aab36\",\n      \"label\": \"label-7393\",\n      \"height\": 144,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"a4e317e3-42fb-41aa-bf18-88d6115455d1\",\n      \"label\": \"label-7394\",\n      \"height\": 349,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"226673e2-df37-47ef-b7d5-d17f02d0cb72\",\n      \"label\": \"label-7395\",\n      \"height\": 459,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"e667d3d6-02e2-47d1-b77b-3ca00f2ddf99\",\n      \"label\": \"label-7396\",\n      \"height\": 356,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"4dd726ae-e453-45a8-9e03-3e8b492f6b21\",\n      \"label\": \"label-7397\",\n      \"height\": 178,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"a5f38efe-946e-4094-b123-7cf021862dd9\",\n      \"label\": \"label-7398\",\n      \"height\": 528,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"ab222221-a374-4aea-9c96-39efae1d2ca6\",\n      \"label\": \"label-7399\",\n      \"height\": 219,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"1c983381-4107-44ad-a780-4e08710287ab\",\n      \"label\": \"label-7400\",\n      \"height\": 489,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"a6d48321-55ba-4b85-945a-2eda33e4ab08\",\n      \"label\": \"label-7401\",\n      \"height\": 239,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"17b7e07d-ef81-429c-a14d-11ed202fcfc8\",\n      \"label\": \"label-7402\",\n      \"height\": 283,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"d4473827-f515-43c1-bc8c-fbde1f851624\",\n      \"label\": \"label-7403\",\n      \"height\": 306,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"b0a98bc1-0fc1-48a0-b0d1-ad7d74fafc09\",\n      \"label\": \"label-7404\",\n      \"height\": 525,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"b386484a-bad3-411d-9ef8-bed56e919db8\",\n      \"label\": \"label-7405\",\n      \"height\": 296,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"2cfa4b43-7437-412f-ae82-b5b2299f3fa0\",\n      \"label\": \"label-7406\",\n      \"height\": 203,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"c339f5b4-10c2-4a95-b3a5-47cb7bb1ff29\",\n      \"label\": \"label-7407\",\n      \"height\": 185,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"8f4fad8d-6d40-44e9-bfab-482306015b82\",\n      \"label\": \"label-7408\",\n      \"height\": 90,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"93b852c5-266a-4fde-a678-26cbbbd0d2cb\",\n      \"label\": \"label-7409\",\n      \"height\": 399,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"3f0d078c-58df-4855-acfa-fb5ce148454c\",\n      \"label\": \"label-7410\",\n      \"height\": 382,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"304daa70-3974-4db3-910d-34dfbd5c8722\",\n      \"label\": \"label-7411\",\n      \"height\": 150,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"057a7ba6-a7e6-41fb-a474-9df7fc9783ea\",\n      \"label\": \"label-7412\",\n      \"height\": 43,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"b4deb67b-5fb1-4127-bf65-725af52d0116\",\n      \"label\": \"label-7413\",\n      \"height\": 157,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"ee50bc0d-cab8-47da-9c9c-7b63dbabbbae\",\n      \"label\": \"label-7414\",\n      \"height\": 401,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"eba473ab-3eaf-486a-8420-a4ef24999ed8\",\n      \"label\": \"label-7415\",\n      \"height\": 92,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"eef44077-ad3a-4599-8c07-9fdc409cbfa3\",\n      \"label\": \"label-7416\",\n      \"height\": 289,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"fd62d1d4-f6ff-434e-a9a3-ca98d3ec8f48\",\n      \"label\": \"label-7417\",\n      \"height\": 125,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"9a49549d-46fb-4e37-a398-b50d2c0e79e8\",\n      \"label\": \"label-7418\",\n      \"height\": 512,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"f8969380-aaa8-423c-b44a-93d5173165d0\",\n      \"label\": \"label-7419\",\n      \"height\": 238,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"2a7e89e1-ed60-4a4b-8df4-ef3bcda9a0af\",\n      \"label\": \"label-7420\",\n      \"height\": 59,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"a6b5c3ad-37a6-413b-a4f8-f278dcd2aa6f\",\n      \"label\": \"label-7421\",\n      \"height\": 423,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"d3391ecb-9faa-4fd0-8310-1d83c66b3b6b\",\n      \"label\": \"label-7422\",\n      \"height\": 93,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"39a5b964-b731-4863-8a7f-c36f63875c1e\",\n      \"label\": \"label-7423\",\n      \"height\": 139,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"202de1ca-ced0-44b5-a7c8-2bac319caf73\",\n      \"label\": \"label-7424\",\n      \"height\": 278,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"32a6dbfd-aa5d-4b9a-a9b0-e20a84b976d5\",\n      \"label\": \"label-7425\",\n      \"height\": 502,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"d7f57e49-4dcb-44a3-b30e-f31fecd8fbe1\",\n      \"label\": \"label-7426\",\n      \"height\": 39,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"e098eb3f-e280-403b-ab28-f137d1d640a9\",\n      \"label\": \"label-7427\",\n      \"height\": 188,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"8e5bd0d1-f6ac-4844-a413-8c4a9f6b364d\",\n      \"label\": \"label-7428\",\n      \"height\": 182,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"4b829647-85f2-4907-a823-2051218accec\",\n      \"label\": \"label-7429\",\n      \"height\": 210,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"ce4d49b1-09fb-4532-8643-9c53c7282e06\",\n      \"label\": \"label-7430\",\n      \"height\": 478,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"163a1c1c-bd4b-478c-805b-cac91997fade\",\n      \"label\": \"label-7431\",\n      \"height\": 504,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"cb7004ca-cc10-4d77-bacc-77faf47ffe17\",\n      \"label\": \"label-7432\",\n      \"height\": 176,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"ed452250-3be5-48d2-8059-c4acc47807cf\",\n      \"label\": \"label-7433\",\n      \"height\": 489,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"1d1e1170-a235-4ad2-86a4-ced9411bbfca\",\n      \"label\": \"label-7434\",\n      \"height\": 178,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"a1cf749c-57ed-4970-bea5-63587bb20db2\",\n      \"label\": \"label-7435\",\n      \"height\": 406,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"8677ad7c-d973-4e5d-8966-45939a5a99dd\",\n      \"label\": \"label-7436\",\n      \"height\": 240,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"c6b5cd4a-8a7c-4091-a917-dc2dccf7bfcf\",\n      \"label\": \"label-7437\",\n      \"height\": 430,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"f883c7ea-1e42-4c3b-9c65-0cdba07a5d0e\",\n      \"label\": \"label-7438\",\n      \"height\": 127,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"820b1c35-3da6-48a3-a6f2-c4a77215154d\",\n      \"label\": \"label-7439\",\n      \"height\": 317,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"337f48d2-d2eb-4bb2-8b35-a415c0f46062\",\n      \"label\": \"label-7440\",\n      \"height\": 76,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"fb0901e2-04f1-40f8-a045-034f6e8f990f\",\n      \"label\": \"label-7441\",\n      \"height\": 471,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"c6c0645d-5816-4ae2-aefd-ed10ec2225f3\",\n      \"label\": \"label-7442\",\n      \"height\": 139,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"c759abf0-1b6e-4523-9121-60859c9cef73\",\n      \"label\": \"label-7443\",\n      \"height\": 49,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"3120f32a-58fb-4466-bf85-cc06c089c6b0\",\n      \"label\": \"label-7444\",\n      \"height\": 129,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"ee7e4a03-da78-4c21-8303-db39694b96f0\",\n      \"label\": \"label-7445\",\n      \"height\": 107,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"0c75cf8c-b4b6-4066-8953-6f5f02d83085\",\n      \"label\": \"label-7446\",\n      \"height\": 68,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"21bc7162-671c-402d-ba4d-8b3ee88c23c2\",\n      \"label\": \"label-7447\",\n      \"height\": 486,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"787a59bc-a980-40c1-aa5b-2b600764d102\",\n      \"label\": \"label-7448\",\n      \"height\": 518,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"7e9cd0c4-2be9-4693-8880-d9d36d5d9747\",\n      \"label\": \"label-7449\",\n      \"height\": 413,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"7448abc3-f137-4ce3-8ac0-20cc1253710a\",\n      \"label\": \"label-7450\",\n      \"height\": 477,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"b3867e66-d359-447a-b709-2f5cce78d0cb\",\n      \"label\": \"label-7451\",\n      \"height\": 472,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"55735996-f621-4fd6-befc-62ecc01b15e3\",\n      \"label\": \"label-7452\",\n      \"height\": 99,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"2bed4aea-7353-4ab9-875d-c0f00541b5d3\",\n      \"label\": \"label-7453\",\n      \"height\": 444,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"98fd6c48-4a88-4f60-bf3f-ac01de4152d1\",\n      \"label\": \"label-7454\",\n      \"height\": 144,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"ed769d45-758c-4f95-95e1-0adc83ff2591\",\n      \"label\": \"label-7455\",\n      \"height\": 236,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"fd2ee4cd-b184-40d2-bd56-9191f479335b\",\n      \"label\": \"label-7456\",\n      \"height\": 305,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"e02a75e4-6d6f-4c18-98e9-9de7394323b0\",\n      \"label\": \"label-7457\",\n      \"height\": 427,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"53343d66-ac84-4ae8-8fc5-1763501d7913\",\n      \"label\": \"label-7458\",\n      \"height\": 488,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"f7566da7-af68-4959-8ffc-70e7fbf837dd\",\n      \"label\": \"label-7459\",\n      \"height\": 289,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"4cec372f-8893-4dd2-835d-9aaf59a68cbe\",\n      \"label\": \"label-7460\",\n      \"height\": 484,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"d0a72079-b8bd-46b7-8e6a-71867e081743\",\n      \"label\": \"label-7461\",\n      \"height\": 359,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"21a45cb2-6cbe-4f5e-a5fc-fdc20e496b5d\",\n      \"label\": \"label-7462\",\n      \"height\": 519,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"eb799c75-fb14-4576-8f65-c721c0515004\",\n      \"label\": \"label-7463\",\n      \"height\": 509,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"0224c876-7f32-49a0-a93a-1ed0588453b4\",\n      \"label\": \"label-7464\",\n      \"height\": 98,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"1831996d-68b8-4e1d-9403-8039cec88479\",\n      \"label\": \"label-7465\",\n      \"height\": 367,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"5f7e4a52-8ecc-4ead-911b-09f2b33a8479\",\n      \"label\": \"label-7466\",\n      \"height\": 257,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"481fe1cd-0cde-493d-93f5-4073fd9e0355\",\n      \"label\": \"label-7467\",\n      \"height\": 401,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"f0b97626-ea0b-4768-8c36-8c67bffd9f43\",\n      \"label\": \"label-7468\",\n      \"height\": 521,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"8222a7a2-6d48-40ef-890c-a1cebfb791fa\",\n      \"label\": \"label-7469\",\n      \"height\": 338,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"446213b6-c3c2-4fe1-ad57-f8e54365e008\",\n      \"label\": \"label-7470\",\n      \"height\": 509,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"87ddba2e-f8b4-44ab-86af-45045823c739\",\n      \"label\": \"label-7471\",\n      \"height\": 292,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"76dc9ad9-d7f0-47ef-93f8-1b7df0944798\",\n      \"label\": \"label-7472\",\n      \"height\": 139,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"d9d36c1b-76d3-4a19-a11c-0fffa57875fa\",\n      \"label\": \"label-7473\",\n      \"height\": 181,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"1673ff3f-a687-4a0a-af5c-2c5e40686a9e\",\n      \"label\": \"label-7474\",\n      \"height\": 252,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"c7c057c3-a57b-4836-9d1b-5f41bd50959a\",\n      \"label\": \"label-7475\",\n      \"height\": 448,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"62a4192e-29f8-4d0d-b4b5-bcaea79f6bec\",\n      \"label\": \"label-7476\",\n      \"height\": 331,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"623f4151-6449-4c27-831d-049a82c4c765\",\n      \"label\": \"label-7477\",\n      \"height\": 346,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"aa75a359-fc97-426d-8522-4f5851010c32\",\n      \"label\": \"label-7478\",\n      \"height\": 403,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"709c75f1-4458-41df-98aa-516555e4079f\",\n      \"label\": \"label-7479\",\n      \"height\": 450,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"e25070a5-9ad6-43f0-b5b9-fdad78be573b\",\n      \"label\": \"label-7480\",\n      \"height\": 147,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"7dfabb8d-414f-4a49-9607-3f46a2ca4f33\",\n      \"label\": \"label-7481\",\n      \"height\": 231,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"d0bec709-73b4-4ad3-bb92-6f4d094b2d3d\",\n      \"label\": \"label-7482\",\n      \"height\": 44,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"93c7e166-94f5-402a-873a-86a34df8877e\",\n      \"label\": \"label-7483\",\n      \"height\": 357,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"a41a5ab1-4635-414b-ba8b-08c3b207e5f7\",\n      \"label\": \"label-7484\",\n      \"height\": 52,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"7385561f-b524-4623-b367-9b37a962569b\",\n      \"label\": \"label-7485\",\n      \"height\": 440,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"997dd01b-f9c8-4500-a554-af3f5cca8ca1\",\n      \"label\": \"label-7486\",\n      \"height\": 167,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"eafd067e-c9cd-4429-91bb-6b6efdbe686a\",\n      \"label\": \"label-7487\",\n      \"height\": 130,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"863d5342-d2ef-45e8-bd93-ec7ed20d3171\",\n      \"label\": \"label-7488\",\n      \"height\": 282,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"a8757323-4350-4858-8c39-435a5d2cebb4\",\n      \"label\": \"label-7489\",\n      \"height\": 410,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"e8af9231-3d2e-48cb-9f0d-33bb3eca399d\",\n      \"label\": \"label-7490\",\n      \"height\": 379,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"e220dbf3-faf2-4564-8f7e-37c359101647\",\n      \"label\": \"label-7491\",\n      \"height\": 37,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"0f37f658-bafb-4a50-8147-158ce6677620\",\n      \"label\": \"label-7492\",\n      \"height\": 376,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"5d2c5d12-ebb7-453a-b9d2-2fd389fdd973\",\n      \"label\": \"label-7493\",\n      \"height\": 484,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"d7a93697-50e4-4f18-b3cd-fae28b2f93a2\",\n      \"label\": \"label-7494\",\n      \"height\": 338,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"55e1df97-805b-4eba-a672-f1cc539774ce\",\n      \"label\": \"label-7495\",\n      \"height\": 345,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"52200001-038d-48de-a148-6dc56d83b98e\",\n      \"label\": \"label-7496\",\n      \"height\": 398,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"6e9e11c1-9d6f-48eb-8de7-0e3f8a9cfe00\",\n      \"label\": \"label-7497\",\n      \"height\": 458,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"a58574db-0ac8-40a1-9d16-7d88548db602\",\n      \"label\": \"label-7498\",\n      \"height\": 413,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"726f971d-4337-41e3-bbe0-d72cd7b6738d\",\n      \"label\": \"label-7499\",\n      \"height\": 496,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"0324484b-9d2f-47ee-ae60-6a289b2e3e7f\",\n      \"label\": \"label-7500\",\n      \"height\": 447,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"f22d342b-2cab-4f02-af90-1381a525fbf8\",\n      \"label\": \"label-7501\",\n      \"height\": 42,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"4760df98-8e4e-4182-b41b-5b701a7ca1a9\",\n      \"label\": \"label-7502\",\n      \"height\": 508,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"3636c8cd-8398-42ce-8ab5-9f9cf95959aa\",\n      \"label\": \"label-7503\",\n      \"height\": 311,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"c9c0551c-d5e7-4a37-89db-b010fb60bb42\",\n      \"label\": \"label-7504\",\n      \"height\": 328,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"c01500ec-003c-4d96-9da5-b54f6ccf7a4a\",\n      \"label\": \"label-7505\",\n      \"height\": 205,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"7314064b-2715-4ef8-93b3-3d0d836507b5\",\n      \"label\": \"label-7506\",\n      \"height\": 212,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"21056dd1-e948-4827-b2eb-d049e3bf1fe1\",\n      \"label\": \"label-7507\",\n      \"height\": 250,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"0a007766-b14c-4c12-b9c7-583c666538e7\",\n      \"label\": \"label-7508\",\n      \"height\": 503,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"cf15c546-d314-4e36-8a98-7b384ae8b5df\",\n      \"label\": \"label-7509\",\n      \"height\": 471,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"5c9cd3ec-b9ed-41cb-83d5-acd099607516\",\n      \"label\": \"label-7510\",\n      \"height\": 523,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"76b7b1a0-8735-4adc-bbd4-7d293043539c\",\n      \"label\": \"label-7511\",\n      \"height\": 402,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"eb6f2799-eed6-450b-9f3b-0673b8b454ae\",\n      \"label\": \"label-7512\",\n      \"height\": 300,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"e4d19810-18cb-49ec-9b35-cc5f9006bbfe\",\n      \"label\": \"label-7513\",\n      \"height\": 514,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"8e6231ba-081e-4ade-b119-c15b942fac9e\",\n      \"label\": \"label-7514\",\n      \"height\": 138,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"d3c5a1c9-a89f-40d8-bb9b-7116e5e6dec1\",\n      \"label\": \"label-7515\",\n      \"height\": 35,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"02c32af2-177f-4e1d-9eba-e45489d99a8f\",\n      \"label\": \"label-7516\",\n      \"height\": 282,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"7ffd8cfb-56c5-422d-960e-fa36b46e26f5\",\n      \"label\": \"label-7517\",\n      \"height\": 448,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"a8080878-f9c8-4d18-8949-ec2c0c08dc5c\",\n      \"label\": \"label-7518\",\n      \"height\": 93,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"aa187b9c-8e37-408a-8879-6b6aec66d602\",\n      \"label\": \"label-7519\",\n      \"height\": 212,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"678c4e8a-4c2e-4754-afe6-b75b3f24aa8b\",\n      \"label\": \"label-7520\",\n      \"height\": 106,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"817d6fe5-1efe-4800-9231-e49e89d53f95\",\n      \"label\": \"label-7521\",\n      \"height\": 93,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"72af9de0-b96a-439e-a443-7903eba1e3ac\",\n      \"label\": \"label-7522\",\n      \"height\": 149,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"0b1d94e0-f1fc-4600-bc94-a7c63c3ec9e3\",\n      \"label\": \"label-7523\",\n      \"height\": 104,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"c696597c-7b60-4ca0-94c8-dfb29df3e087\",\n      \"label\": \"label-7524\",\n      \"height\": 404,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"e5d7473b-5eae-459f-a7db-efd0ab3f7d56\",\n      \"label\": \"label-7525\",\n      \"height\": 89,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"b6028f0c-fe3a-415a-86b7-641c65494e62\",\n      \"label\": \"label-7526\",\n      \"height\": 407,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"77853ce8-b3b1-467b-b4b6-38e5ba899f0e\",\n      \"label\": \"label-7527\",\n      \"height\": 157,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"5b2c1396-e1d5-4e8a-83ec-1eeb4df03244\",\n      \"label\": \"label-7528\",\n      \"height\": 507,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"4d2c0561-4afb-4537-9cdb-f0fca359ce33\",\n      \"label\": \"label-7529\",\n      \"height\": 127,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"937b706e-946b-4217-92c2-99b0bba28192\",\n      \"label\": \"label-7530\",\n      \"height\": 169,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"5d5a9b9c-0487-4342-a0f5-89d5d57664a6\",\n      \"label\": \"label-7531\",\n      \"height\": 107,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"b463034f-3eed-4d7e-a93e-f2ce838cc7f7\",\n      \"label\": \"label-7532\",\n      \"height\": 382,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"33924785-6fef-4a7f-9cd9-a373296a9c0d\",\n      \"label\": \"label-7533\",\n      \"height\": 476,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"1275b503-7c13-4b59-9a60-3bd9df51c806\",\n      \"label\": \"label-7534\",\n      \"height\": 346,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"aac4fbd3-0520-4046-b2a6-7afdd518e063\",\n      \"label\": \"label-7535\",\n      \"height\": 136,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"1e1cc9fb-cb02-4947-85a6-e4bedfa2f8b6\",\n      \"label\": \"label-7536\",\n      \"height\": 237,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"547d335c-8166-4354-a5e4-492aa4706de4\",\n      \"label\": \"label-7537\",\n      \"height\": 67,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"727a4c54-7e1f-41c2-be59-c84eaa18e029\",\n      \"label\": \"label-7538\",\n      \"height\": 468,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"a71d005c-7fc4-4ab7-873b-6b67a9658e91\",\n      \"label\": \"label-7539\",\n      \"height\": 460,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"8c556ab7-37ad-45b7-9c03-706240d78fab\",\n      \"label\": \"label-7540\",\n      \"height\": 251,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"8519a0f8-52f3-41e3-b409-ff15519dfb73\",\n      \"label\": \"label-7541\",\n      \"height\": 297,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"6e6b098a-0dd0-4b00-86df-027553724434\",\n      \"label\": \"label-7542\",\n      \"height\": 76,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"6bcdc3c7-df3e-46ed-a40c-97bd824e58d0\",\n      \"label\": \"label-7543\",\n      \"height\": 106,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"3e0b94c5-aaac-4525-aa54-985d80e3344e\",\n      \"label\": \"label-7544\",\n      \"height\": 160,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"ef9ecb6d-ae05-401a-9361-d3ec3edd8cfa\",\n      \"label\": \"label-7545\",\n      \"height\": 164,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"968f939b-b9fd-44cf-ac1e-927513bd700d\",\n      \"label\": \"label-7546\",\n      \"height\": 432,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"22451e98-0cbd-481e-b020-1907f749e419\",\n      \"label\": \"label-7547\",\n      \"height\": 487,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"bcd1e9e0-a087-4639-89b1-ec96fcfd40c3\",\n      \"label\": \"label-7548\",\n      \"height\": 51,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"68ca3ffe-ca5f-4eac-bff8-bb73654fc7b2\",\n      \"label\": \"label-7549\",\n      \"height\": 231,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"016ad389-edd8-4ae8-a5d3-3070e0b2a11e\",\n      \"label\": \"label-7550\",\n      \"height\": 213,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"100d13a7-3e92-4f74-a584-7fde5bd936a5\",\n      \"label\": \"label-7551\",\n      \"height\": 230,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"5a74afc9-324c-4c4e-8d10-44a42ff2e1b7\",\n      \"label\": \"label-7552\",\n      \"height\": 464,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"b3590d36-1cd7-4803-92bd-c8c85a78876f\",\n      \"label\": \"label-7553\",\n      \"height\": 129,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"88b943e1-3faa-41c6-a3bb-07b8ecc35306\",\n      \"label\": \"label-7554\",\n      \"height\": 63,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"afbb7c21-18ca-41b7-bacd-6ee3e83cc4f2\",\n      \"label\": \"label-7555\",\n      \"height\": 249,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"38a71c8b-2dee-4969-bf2c-ee6c3e3083f2\",\n      \"label\": \"label-7556\",\n      \"height\": 79,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"f2c0a6c7-93e8-4ba1-893e-961ac95a1b72\",\n      \"label\": \"label-7557\",\n      \"height\": 318,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"67afef37-d59a-478a-bde1-af8bdffb3848\",\n      \"label\": \"label-7558\",\n      \"height\": 362,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"1832ef0e-5160-49a6-96fd-a446d09ba594\",\n      \"label\": \"label-7559\",\n      \"height\": 95,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"7fec84af-2214-41fc-bb97-ae26c2e37167\",\n      \"label\": \"label-7560\",\n      \"height\": 107,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"a7b84fc5-8a02-41a2-b394-d0bb858a7fd8\",\n      \"label\": \"label-7561\",\n      \"height\": 459,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"904fa2e1-2eaf-43dc-b6ff-fa79d31876d6\",\n      \"label\": \"label-7562\",\n      \"height\": 226,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"3cf4c1fb-ae0b-4c67-ac98-1d74c63e8df0\",\n      \"label\": \"label-7563\",\n      \"height\": 76,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"039689be-9339-4551-8b07-c29e173c26a0\",\n      \"label\": \"label-7564\",\n      \"height\": 434,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"0dc3da99-9e48-494e-8e0e-1b5dd59facc3\",\n      \"label\": \"label-7565\",\n      \"height\": 52,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"9072c224-96ec-45d3-bbb0-9ac6ed58c737\",\n      \"label\": \"label-7566\",\n      \"height\": 400,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"4ffcfef4-05ac-4b1b-87cf-110379e8641d\",\n      \"label\": \"label-7567\",\n      \"height\": 420,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"6f4bf024-e8da-4712-b911-92878f06db9b\",\n      \"label\": \"label-7568\",\n      \"height\": 141,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"236ff102-2ffa-4800-80f7-d1fcacaf7c70\",\n      \"label\": \"label-7569\",\n      \"height\": 184,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"43b0ff3f-a1d9-4ec7-8308-f17816675a46\",\n      \"label\": \"label-7570\",\n      \"height\": 380,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"125c929d-79bc-45d9-81dc-7d8ac4598f92\",\n      \"label\": \"label-7571\",\n      \"height\": 239,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"e9f80735-6524-40bb-9364-2202b3b6f76a\",\n      \"label\": \"label-7572\",\n      \"height\": 488,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"c45fa567-bb02-442d-bac8-56fafd180b5e\",\n      \"label\": \"label-7573\",\n      \"height\": 445,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"a1775acd-65a3-47d9-89e1-a3705e88cef1\",\n      \"label\": \"label-7574\",\n      \"height\": 432,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"6502e334-8b0e-413d-9efd-d6a1c5f9d865\",\n      \"label\": \"label-7575\",\n      \"height\": 248,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"fad59be0-1642-4189-b51a-484a96602d19\",\n      \"label\": \"label-7576\",\n      \"height\": 110,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"4548eda2-254b-4fae-877e-3f8ef7000e29\",\n      \"label\": \"label-7577\",\n      \"height\": 452,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"c38f6b96-d8e3-4946-9043-5571d8bfd482\",\n      \"label\": \"label-7578\",\n      \"height\": 259,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"b2f2c8d3-e55f-42bb-a8b9-c34f2a75d219\",\n      \"label\": \"label-7579\",\n      \"height\": 180,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"081a4dab-b012-47e6-841b-afe921f1f2cb\",\n      \"label\": \"label-7580\",\n      \"height\": 136,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"a9278901-e7db-427f-9fc2-3c589c0ee478\",\n      \"label\": \"label-7581\",\n      \"height\": 72,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"f00f813e-4f44-4773-932e-08c4cc131fa1\",\n      \"label\": \"label-7582\",\n      \"height\": 104,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"1a4e596a-e1a7-4678-b4a4-ff189fed6885\",\n      \"label\": \"label-7583\",\n      \"height\": 320,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"0fb98f2d-efb7-44cd-82b3-3081f6c57a8d\",\n      \"label\": \"label-7584\",\n      \"height\": 462,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"f87e99b6-fa88-40a5-9e6d-e6aed9f1f284\",\n      \"label\": \"label-7585\",\n      \"height\": 254,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"a6b6bde8-8477-48ed-8cfd-1dbe55931cfd\",\n      \"label\": \"label-7586\",\n      \"height\": 516,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"2a6911e9-f336-44ab-950b-259bfcedea34\",\n      \"label\": \"label-7587\",\n      \"height\": 420,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"4964d907-1c23-47f4-b464-687d5eb138c2\",\n      \"label\": \"label-7588\",\n      \"height\": 444,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"34c7f254-6371-458e-abef-0a5f8762a731\",\n      \"label\": \"label-7589\",\n      \"height\": 316,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"8741da1e-2fb5-4fb5-9009-fef2b3ced4a0\",\n      \"label\": \"label-7590\",\n      \"height\": 404,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"3a020b11-1491-4802-8648-d7c811e50065\",\n      \"label\": \"label-7591\",\n      \"height\": 128,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"f02a5ab6-84ae-4a30-8cf8-e3c305f588ff\",\n      \"label\": \"label-7592\",\n      \"height\": 469,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"97cf9950-3b03-4cc4-8fb0-079c28b56af4\",\n      \"label\": \"label-7593\",\n      \"height\": 208,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"375cc5bf-e6ff-46d0-86d8-54b24a280595\",\n      \"label\": \"label-7594\",\n      \"height\": 519,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"33653e3a-a29a-4a44-8607-216e4a7fd257\",\n      \"label\": \"label-7595\",\n      \"height\": 471,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"38207026-9536-4856-8d57-31d749b39947\",\n      \"label\": \"label-7596\",\n      \"height\": 482,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"584ffd10-a6a8-4e34-96bc-efe9cb66c4d2\",\n      \"label\": \"label-7597\",\n      \"height\": 473,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"6acfc3e0-13d9-4204-a825-0039f8af56fe\",\n      \"label\": \"label-7598\",\n      \"height\": 188,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"684cd04f-3e1c-45a5-93e8-255a8e1b0013\",\n      \"label\": \"label-7599\",\n      \"height\": 212,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"6e943125-d877-42fe-b1ff-ea9cafb0f1e6\",\n      \"label\": \"label-7600\",\n      \"height\": 482,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"2e1e97af-adb6-4551-9f3b-793c1fdab596\",\n      \"label\": \"label-7601\",\n      \"height\": 380,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"4e3ca188-2f3e-4e06-8625-4d1d1ef46740\",\n      \"label\": \"label-7602\",\n      \"height\": 267,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"6c0ea992-c5ec-494b-ac45-f8d7b132372c\",\n      \"label\": \"label-7603\",\n      \"height\": 275,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"3bd58ab7-7c6e-4855-b138-6c2a996b6268\",\n      \"label\": \"label-7604\",\n      \"height\": 420,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"39ae5a7b-08b6-4330-bb15-bd6c7fdaa3ee\",\n      \"label\": \"label-7605\",\n      \"height\": 197,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"bbfd1282-349f-4448-aa4c-07017cd9c02b\",\n      \"label\": \"label-7606\",\n      \"height\": 281,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"db554a19-29ab-4b7f-a551-e60c37363af8\",\n      \"label\": \"label-7607\",\n      \"height\": 406,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"c0239e53-bbdc-42ba-8fe9-3e99d8747b38\",\n      \"label\": \"label-7608\",\n      \"height\": 40,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"8777fdcd-d5f9-4258-9394-ea8b0f547d15\",\n      \"label\": \"label-7609\",\n      \"height\": 67,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"03ce402d-5a01-4d7f-83ef-b30c5dc9c8aa\",\n      \"label\": \"label-7610\",\n      \"height\": 353,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"d0982c60-6865-47c8-b92b-b5ca8f38442d\",\n      \"label\": \"label-7611\",\n      \"height\": 429,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"2b47b5ad-2986-49f0-bfe6-9d403f44eb45\",\n      \"label\": \"label-7612\",\n      \"height\": 448,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"fcfa184d-6a7b-4714-889a-d8cc4284e903\",\n      \"label\": \"label-7613\",\n      \"height\": 469,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"3bc88ce8-970b-4531-8a6a-0de5e641eeba\",\n      \"label\": \"label-7614\",\n      \"height\": 333,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"85e23122-162f-412e-a24f-7d7b9b32b22c\",\n      \"label\": \"label-7615\",\n      \"height\": 52,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"afcf6962-21e5-4d28-87a4-53eb97caa82d\",\n      \"label\": \"label-7616\",\n      \"height\": 377,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"72872196-c389-46f1-bdbc-d51ca510670c\",\n      \"label\": \"label-7617\",\n      \"height\": 318,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"042ef2b6-0b4d-48fb-bf1f-9d74d9ccbdf8\",\n      \"label\": \"label-7618\",\n      \"height\": 399,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"40c93d0e-c232-4d10-9919-e3f430d047b8\",\n      \"label\": \"label-7619\",\n      \"height\": 309,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"43d9d229-602a-4167-989a-7cb7b567c68f\",\n      \"label\": \"label-7620\",\n      \"height\": 265,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"6f0ba13a-0359-467c-b78f-648307a86ca1\",\n      \"label\": \"label-7621\",\n      \"height\": 471,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"dca3b754-e442-4d7e-b1a0-878c83507e99\",\n      \"label\": \"label-7622\",\n      \"height\": 382,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"b15f8466-5924-41a0-90cc-db7bb9150c71\",\n      \"label\": \"label-7623\",\n      \"height\": 433,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"8f04b8ff-b272-4aeb-a85f-3da7dcbb857c\",\n      \"label\": \"label-7624\",\n      \"height\": 51,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"5b1882d2-95a3-4ae8-8406-cb54fb16a828\",\n      \"label\": \"label-7625\",\n      \"height\": 49,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"7894ffad-0d7d-419d-aa5c-b6f7f0cee7c1\",\n      \"label\": \"label-7626\",\n      \"height\": 214,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"dc671ec1-d3c5-4ea0-8fae-4807d6cc76bb\",\n      \"label\": \"label-7627\",\n      \"height\": 126,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"05ed55b2-afb7-4dcf-8a59-3196687d3740\",\n      \"label\": \"label-7628\",\n      \"height\": 182,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"e18035ab-414b-45f7-94a9-39b8cefc8965\",\n      \"label\": \"label-7629\",\n      \"height\": 405,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"402e1c87-4d0f-4261-9841-022c579c7244\",\n      \"label\": \"label-7630\",\n      \"height\": 228,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"3c9842de-6e9c-4ff9-af48-1052b5c1eb7d\",\n      \"label\": \"label-7631\",\n      \"height\": 67,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"0209f57a-5694-45ef-b6a2-495c59b0b55f\",\n      \"label\": \"label-7632\",\n      \"height\": 97,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"d239c526-2243-4a1c-9f11-4684442d0528\",\n      \"label\": \"label-7633\",\n      \"height\": 222,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"bce8d4fb-965e-4b90-a00a-8e7573af9ac8\",\n      \"label\": \"label-7634\",\n      \"height\": 257,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"17f694e0-32f7-48b5-a926-0c63213c1392\",\n      \"label\": \"label-7635\",\n      \"height\": 166,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"ad6d7477-6171-44f1-8add-6a6adb2d8f90\",\n      \"label\": \"label-7636\",\n      \"height\": 239,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"8eb1f589-5bd0-4bfd-9415-1dac2e9fe807\",\n      \"label\": \"label-7637\",\n      \"height\": 404,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"77b0ad8a-445d-4cb5-a46f-f9046230f36e\",\n      \"label\": \"label-7638\",\n      \"height\": 438,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"87001009-c972-4168-b682-b10104c03da0\",\n      \"label\": \"label-7639\",\n      \"height\": 460,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"e787dd99-075b-48b5-9558-bfaaaee8bc6d\",\n      \"label\": \"label-7640\",\n      \"height\": 457,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"e2290865-5cad-4adb-b1ca-157e4339f4d2\",\n      \"label\": \"label-7641\",\n      \"height\": 459,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"8baed6f0-dbd2-4400-bb6f-7271106e1a44\",\n      \"label\": \"label-7642\",\n      \"height\": 432,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"f01ba461-27f8-40bf-8916-f93b4cc7db03\",\n      \"label\": \"label-7643\",\n      \"height\": 190,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"dfffbf34-3e71-4002-b55a-999b06b239cb\",\n      \"label\": \"label-7644\",\n      \"height\": 80,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"b800f39e-6989-4019-b4f3-17d243d6f441\",\n      \"label\": \"label-7645\",\n      \"height\": 311,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"e690d608-063b-4661-848b-1f6e2eb17061\",\n      \"label\": \"label-7646\",\n      \"height\": 301,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"71bdeb98-a02b-438c-9b73-c8f426788b58\",\n      \"label\": \"label-7647\",\n      \"height\": 471,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"fd521830-bf61-4daa-8d06-e1bb61a300b2\",\n      \"label\": \"label-7648\",\n      \"height\": 134,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"1b90e35a-1d77-41d6-8664-ab88789561fa\",\n      \"label\": \"label-7649\",\n      \"height\": 137,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"6993bcae-9760-4b04-8f55-65596115db29\",\n      \"label\": \"label-7650\",\n      \"height\": 474,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"c94325bc-15f1-4e56-800b-4ff90b1f0812\",\n      \"label\": \"label-7651\",\n      \"height\": 345,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"b71b2d15-3826-44a4-b376-59689e92d7fb\",\n      \"label\": \"label-7652\",\n      \"height\": 521,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"20c6bd07-5e63-4298-964b-6e3a64ce8008\",\n      \"label\": \"label-7653\",\n      \"height\": 44,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"43034745-696a-41ec-8124-f41bf6a6ee9c\",\n      \"label\": \"label-7654\",\n      \"height\": 488,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"8e5b054e-559b-4dd0-a0c7-36f05ab29260\",\n      \"label\": \"label-7655\",\n      \"height\": 136,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"73feb289-dd45-4e72-871a-df5a09697721\",\n      \"label\": \"label-7656\",\n      \"height\": 156,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"bc4504e1-d01a-4d7a-a0bc-98d993243032\",\n      \"label\": \"label-7657\",\n      \"height\": 213,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"70a95342-ba38-403a-9d17-9da98583623c\",\n      \"label\": \"label-7658\",\n      \"height\": 209,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"c153577e-9c5e-4a2f-a0d7-65da9214ead9\",\n      \"label\": \"label-7659\",\n      \"height\": 100,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"110a87fc-4622-452f-b87e-67dad96021a1\",\n      \"label\": \"label-7660\",\n      \"height\": 38,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"72f47f09-30c2-41f2-9e19-cceb0ef30ed6\",\n      \"label\": \"label-7661\",\n      \"height\": 383,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"659dcf7f-7894-4a2b-8912-dacfe3af1deb\",\n      \"label\": \"label-7662\",\n      \"height\": 38,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"4f20a2c5-1f42-4dc0-9bda-d1521566b1f6\",\n      \"label\": \"label-7663\",\n      \"height\": 140,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"dd26c823-83c5-4adf-93d5-9088237d36e6\",\n      \"label\": \"label-7664\",\n      \"height\": 291,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"ace829c6-208d-4a72-bf4d-d51b15bd0344\",\n      \"label\": \"label-7665\",\n      \"height\": 486,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"fe6681fd-57a4-4fe1-b59e-ab9fa450a856\",\n      \"label\": \"label-7666\",\n      \"height\": 391,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"37d49d60-043c-44cc-a243-43d5536141eb\",\n      \"label\": \"label-7667\",\n      \"height\": 464,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"9ab9cf32-dac5-4c29-b985-c54529d57b56\",\n      \"label\": \"label-7668\",\n      \"height\": 445,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"12b35460-e92e-4241-ad19-f66ec1c24930\",\n      \"label\": \"label-7669\",\n      \"height\": 365,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"ea7f604b-43cb-43cf-80d4-d238b82b4903\",\n      \"label\": \"label-7670\",\n      \"height\": 51,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"760f7b07-ca37-47ed-97a5-867000786436\",\n      \"label\": \"label-7671\",\n      \"height\": 469,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"c10dc239-7de6-45b5-8711-afd8c88201b9\",\n      \"label\": \"label-7672\",\n      \"height\": 340,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"160380e5-ea32-4871-8dfd-c97f61d80a2f\",\n      \"label\": \"label-7673\",\n      \"height\": 372,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"455527e8-4522-43ad-8850-5017cfd5351d\",\n      \"label\": \"label-7674\",\n      \"height\": 261,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"6062b68d-3cc8-45c3-9495-a8bf0e747cf1\",\n      \"label\": \"label-7675\",\n      \"height\": 287,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"e259109d-381d-45a2-ab0f-da68a2b1b3e9\",\n      \"label\": \"label-7676\",\n      \"height\": 500,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"dc20c955-c1b0-4e8d-9266-13f24c874bd7\",\n      \"label\": \"label-7677\",\n      \"height\": 441,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"2866074d-ce37-4a23-a987-5d3932dc11cf\",\n      \"label\": \"label-7678\",\n      \"height\": 323,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"f5aefd7f-962f-4508-91e8-659f14fdbb41\",\n      \"label\": \"label-7679\",\n      \"height\": 406,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"392ed772-c483-42d4-985a-1e1120fd23b5\",\n      \"label\": \"label-7680\",\n      \"height\": 177,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"1e037f18-55d8-4bf0-94eb-101f76a054ef\",\n      \"label\": \"label-7681\",\n      \"height\": 355,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"47d63cc9-58a3-4518-a17d-44e4375b024e\",\n      \"label\": \"label-7682\",\n      \"height\": 381,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"4adda24b-a44f-418f-a2d6-0a729e912071\",\n      \"label\": \"label-7683\",\n      \"height\": 239,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"dcb8835f-c710-4183-afd7-c4d41d312d5b\",\n      \"label\": \"label-7684\",\n      \"height\": 285,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"1e4f56bc-d0c7-4122-a39f-a91b4c2b0ed1\",\n      \"label\": \"label-7685\",\n      \"height\": 138,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"b08bb686-41e0-4447-8afb-ab2187b899b3\",\n      \"label\": \"label-7686\",\n      \"height\": 415,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"f08a7685-5117-4852-91da-c295752cc348\",\n      \"label\": \"label-7687\",\n      \"height\": 166,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"ce792f38-ea4d-4b43-b773-8e6c92a7e98a\",\n      \"label\": \"label-7688\",\n      \"height\": 435,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"10a058a9-a1dd-48af-83bc-ce55b8b528ba\",\n      \"label\": \"label-7689\",\n      \"height\": 391,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"f7e3d47b-3027-4ce7-a422-c142d0571c24\",\n      \"label\": \"label-7690\",\n      \"height\": 467,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"a01c8aee-0b79-4e19-acf3-56ca308dab18\",\n      \"label\": \"label-7691\",\n      \"height\": 387,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"91904e55-54f1-42d4-8376-5d74eb6540f5\",\n      \"label\": \"label-7692\",\n      \"height\": 271,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"dbde8895-fb0d-4754-a794-5baeb9daaeda\",\n      \"label\": \"label-7693\",\n      \"height\": 355,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"70bc433c-2576-4c63-bb4d-17ef0b235a06\",\n      \"label\": \"label-7694\",\n      \"height\": 186,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"db601cd4-df51-4abd-b7e7-f7f4d33b3dfe\",\n      \"label\": \"label-7695\",\n      \"height\": 489,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"75c268d4-5719-4869-a07f-ac599f8aaf07\",\n      \"label\": \"label-7696\",\n      \"height\": 38,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"e44663cd-12fc-4a50-bd2a-188e3b1ea615\",\n      \"label\": \"label-7697\",\n      \"height\": 287,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"3d65bd08-0c30-422f-b880-cf5e28fdf21f\",\n      \"label\": \"label-7698\",\n      \"height\": 399,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"d40d2a41-001a-437b-9765-255b1fdf302f\",\n      \"label\": \"label-7699\",\n      \"height\": 245,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"ecc078d4-a94b-48c9-9712-cb409fe27933\",\n      \"label\": \"label-7700\",\n      \"height\": 370,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"e62d617a-70b7-408b-907d-759c49c4cb29\",\n      \"label\": \"label-7701\",\n      \"height\": 373,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"c3ff761d-8a5d-4f93-a7ba-268a2be9bb34\",\n      \"label\": \"label-7702\",\n      \"height\": 399,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"3e67108a-9b8c-455b-aef4-a977c83aaf4d\",\n      \"label\": \"label-7703\",\n      \"height\": 67,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"a22d2903-e045-4cb3-af0d-4ad6556eec76\",\n      \"label\": \"label-7704\",\n      \"height\": 466,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"cdee4481-cfda-4832-b763-5351b519b865\",\n      \"label\": \"label-7705\",\n      \"height\": 423,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"e8eaacc3-4619-42be-bfb7-21620dd2572b\",\n      \"label\": \"label-7706\",\n      \"height\": 266,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"7c6691af-ac21-458d-8c27-f9e62b5766de\",\n      \"label\": \"label-7707\",\n      \"height\": 278,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"ff1800fc-57d2-4163-8405-4a995e252a95\",\n      \"label\": \"label-7708\",\n      \"height\": 311,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"c2976e89-bd50-42d0-85cd-f850c724b297\",\n      \"label\": \"label-7709\",\n      \"height\": 419,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"2dba8741-b3b9-4b0c-98ac-366536f642bb\",\n      \"label\": \"label-7710\",\n      \"height\": 439,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"6b0f39fe-e681-401c-822b-585b3a418dda\",\n      \"label\": \"label-7711\",\n      \"height\": 328,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"8e3e516a-9032-42ce-8901-512a4ce56ba5\",\n      \"label\": \"label-7712\",\n      \"height\": 488,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"e916ee13-e44a-4a9c-8737-6453f035d20f\",\n      \"label\": \"label-7713\",\n      \"height\": 367,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"cf192882-b9c0-4a24-a0f9-aa3920263289\",\n      \"label\": \"label-7714\",\n      \"height\": 406,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"ace87872-32b8-4b60-9ff4-e6cd21db68b0\",\n      \"label\": \"label-7715\",\n      \"height\": 301,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"8a7fa9c5-57c6-435b-939c-9e3bb57dac51\",\n      \"label\": \"label-7716\",\n      \"height\": 441,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"29b1517b-bbe2-4cb2-9601-bb3726de4573\",\n      \"label\": \"label-7717\",\n      \"height\": 56,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"200dbcd0-71c8-40af-ab20-9b16ce187528\",\n      \"label\": \"label-7718\",\n      \"height\": 469,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"496bda7e-bf0e-4efd-8bcf-7d2cfc84f13c\",\n      \"label\": \"label-7719\",\n      \"height\": 256,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"eb39fbb7-b2f7-4cfa-bd55-8d61ea9bcf45\",\n      \"label\": \"label-7720\",\n      \"height\": 256,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"00c2314a-815f-49d0-a874-fe1abf2d7b71\",\n      \"label\": \"label-7721\",\n      \"height\": 210,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"94a2f4c4-9f83-4d0d-863c-0c4a9c1d47c0\",\n      \"label\": \"label-7722\",\n      \"height\": 505,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"f4e491ea-b362-43ed-bcff-c68a86572201\",\n      \"label\": \"label-7723\",\n      \"height\": 96,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"5f344889-47eb-47b3-8255-50ac4d8b9afe\",\n      \"label\": \"label-7724\",\n      \"height\": 92,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"f4818506-8e17-4a6e-a25f-55a091c0c039\",\n      \"label\": \"label-7725\",\n      \"height\": 392,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"749534e2-d4da-4da1-9025-a7c4eaed5622\",\n      \"label\": \"label-7726\",\n      \"height\": 517,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"c39a7fef-4744-4d7c-bdc7-9b5e7409c6e3\",\n      \"label\": \"label-7727\",\n      \"height\": 365,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"300ffba1-93d3-4321-8725-e91b4f07097b\",\n      \"label\": \"label-7728\",\n      \"height\": 397,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"ac8615fb-2a7e-4d5c-a77f-99b8592f1077\",\n      \"label\": \"label-7729\",\n      \"height\": 137,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"67380d02-eeee-4f4d-875c-6e07c9011e53\",\n      \"label\": \"label-7730\",\n      \"height\": 519,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"18aced41-db85-469b-a8b7-e3eb59b24142\",\n      \"label\": \"label-7731\",\n      \"height\": 220,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"4363ea6b-c254-416c-b7fe-a27867d0b3ca\",\n      \"label\": \"label-7732\",\n      \"height\": 255,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"710de6bd-6b8f-430d-a6b0-41a3b968a595\",\n      \"label\": \"label-7733\",\n      \"height\": 163,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"8db2321e-d85d-4ac5-be5f-3496cdd292b4\",\n      \"label\": \"label-7734\",\n      \"height\": 491,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"1dca3eae-31dd-4c1c-b888-b06f943c0476\",\n      \"label\": \"label-7735\",\n      \"height\": 157,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"2f862922-7c60-4246-8d89-878502e908e4\",\n      \"label\": \"label-7736\",\n      \"height\": 269,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"4bdd6cc1-1b25-4b49-814d-96d7c47ada76\",\n      \"label\": \"label-7737\",\n      \"height\": 323,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"d7834338-494f-4514-801a-6e759d5fa5fc\",\n      \"label\": \"label-7738\",\n      \"height\": 343,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"81ad5129-b855-45ad-b56d-40ee32631ed5\",\n      \"label\": \"label-7739\",\n      \"height\": 409,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"4c198649-a287-4d88-bcf8-eb854d7216e4\",\n      \"label\": \"label-7740\",\n      \"height\": 308,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"baa71e04-42c8-43da-850c-42d81a569ad6\",\n      \"label\": \"label-7741\",\n      \"height\": 73,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"2180eaeb-0677-401b-b767-61ea1e8ba8ae\",\n      \"label\": \"label-7742\",\n      \"height\": 495,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"461e639a-642c-478f-83b4-dbfc54b00f5c\",\n      \"label\": \"label-7743\",\n      \"height\": 489,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"93738005-f987-4515-99d9-c9c88fffad70\",\n      \"label\": \"label-7744\",\n      \"height\": 484,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"9b59ced0-67e9-4a5f-8618-260b8c8fe4ce\",\n      \"label\": \"label-7745\",\n      \"height\": 93,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"e8feeb94-9766-4b32-96c1-15a125d7ce0e\",\n      \"label\": \"label-7746\",\n      \"height\": 43,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"f0f1e676-f750-4e1e-979a-5392b56c345c\",\n      \"label\": \"label-7747\",\n      \"height\": 410,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"62ba18f9-d2ea-4476-b20d-263a6fc5e29e\",\n      \"label\": \"label-7748\",\n      \"height\": 168,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"3004359f-756e-49a1-9127-ddf2a363df0a\",\n      \"label\": \"label-7749\",\n      \"height\": 202,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"f758c5ce-0ba4-4b1a-995f-91ac42e1bb65\",\n      \"label\": \"label-7750\",\n      \"height\": 182,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"5eb2dac0-1cf8-452d-991f-792c13cb7352\",\n      \"label\": \"label-7751\",\n      \"height\": 331,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"fad0057e-5b33-4bcf-a851-48fc03b0ff2b\",\n      \"label\": \"label-7752\",\n      \"height\": 394,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"30153426-720c-4d9c-832c-d44654ab83b2\",\n      \"label\": \"label-7753\",\n      \"height\": 159,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"966affd3-e296-449a-881e-4fb987c15259\",\n      \"label\": \"label-7754\",\n      \"height\": 118,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"636df6d7-ca69-493d-9c38-7c09fe93e096\",\n      \"label\": \"label-7755\",\n      \"height\": 272,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"646f3a71-b9b5-4675-8349-ca78a8527731\",\n      \"label\": \"label-7756\",\n      \"height\": 315,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"897cbb7f-9543-45a9-9e29-2003e5e70aaf\",\n      \"label\": \"label-7757\",\n      \"height\": 176,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"2ad12140-6376-4cce-b7b4-44beed5669e7\",\n      \"label\": \"label-7758\",\n      \"height\": 131,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"421dd439-e161-4aa9-8464-730f1199389f\",\n      \"label\": \"label-7759\",\n      \"height\": 259,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"2138b739-6b1e-4a69-9c3e-301e879de531\",\n      \"label\": \"label-7760\",\n      \"height\": 201,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"26dae438-8319-49e6-984f-7dca7927429a\",\n      \"label\": \"label-7761\",\n      \"height\": 171,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"e5fbf029-9481-4410-9e5e-b24cf159d3c6\",\n      \"label\": \"label-7762\",\n      \"height\": 335,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"99a2fc65-ae10-4a79-b7bd-2cdbb6e9698d\",\n      \"label\": \"label-7763\",\n      \"height\": 491,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"46cc1a36-a255-4b71-9b60-a83f773fee45\",\n      \"label\": \"label-7764\",\n      \"height\": 181,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"9183855f-4fc2-41d3-a33a-dfac876c4103\",\n      \"label\": \"label-7765\",\n      \"height\": 163,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"b4237731-a758-48ef-bbcd-d9429a4b8847\",\n      \"label\": \"label-7766\",\n      \"height\": 402,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"f61c5126-349e-48e7-8334-05d74f3fb18c\",\n      \"label\": \"label-7767\",\n      \"height\": 305,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"91f4ed91-2079-4cbb-a17f-3105085b6714\",\n      \"label\": \"label-7768\",\n      \"height\": 491,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"8732f1a7-fb9e-4f87-8969-4556969fed6f\",\n      \"label\": \"label-7769\",\n      \"height\": 485,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"d7ae7336-55d7-4414-af28-e7218ae41658\",\n      \"label\": \"label-7770\",\n      \"height\": 320,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"8f9fd8ac-f01c-4943-a46a-611444c13ff6\",\n      \"label\": \"label-7771\",\n      \"height\": 502,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"71548822-8d0f-4bdd-8c41-55e566894922\",\n      \"label\": \"label-7772\",\n      \"height\": 292,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"10eb7bfd-70e5-4a33-9caa-a9f6ad20b642\",\n      \"label\": \"label-7773\",\n      \"height\": 50,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"503056b0-884e-47ad-a611-a870e5f11ee4\",\n      \"label\": \"label-7774\",\n      \"height\": 493,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"85f744b6-40a1-4a36-bdd6-9c13a1b93643\",\n      \"label\": \"label-7775\",\n      \"height\": 256,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"3c2705de-5409-4b1e-9af1-67f1397fee12\",\n      \"label\": \"label-7776\",\n      \"height\": 127,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"d111f9df-ad06-429b-adc9-3e8bd555effa\",\n      \"label\": \"label-7777\",\n      \"height\": 51,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"bb14e9a4-1b5b-4c8a-be7a-06e9bfdc9510\",\n      \"label\": \"label-7778\",\n      \"height\": 195,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"99cc15c6-03af-4633-8de1-1d0f52e87c40\",\n      \"label\": \"label-7779\",\n      \"height\": 416,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"62c73d3c-09a9-405a-adf9-f077b0261760\",\n      \"label\": \"label-7780\",\n      \"height\": 143,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"047bf80d-24b2-46c3-9257-06336be02837\",\n      \"label\": \"label-7781\",\n      \"height\": 41,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"27b4cd00-a97a-4e0b-9eb8-4e11d98a7cf8\",\n      \"label\": \"label-7782\",\n      \"height\": 373,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"fb211371-f645-42ed-af26-e30ececfe5f3\",\n      \"label\": \"label-7783\",\n      \"height\": 281,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"3486d617-894e-4fae-8e5d-53667ada0a03\",\n      \"label\": \"label-7784\",\n      \"height\": 327,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"e50f620a-b644-4c51-9305-d51f72fae6eb\",\n      \"label\": \"label-7785\",\n      \"height\": 90,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"0b3f6cb2-b7e6-4397-9b78-fc0e6e8a62fd\",\n      \"label\": \"label-7786\",\n      \"height\": 307,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"2c3a88b2-2189-47a3-92aa-ad6530980eae\",\n      \"label\": \"label-7787\",\n      \"height\": 169,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"c2f3da8b-1ca0-4fff-a740-a676f55930de\",\n      \"label\": \"label-7788\",\n      \"height\": 273,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"2a26553b-937e-4567-8294-077104f10637\",\n      \"label\": \"label-7789\",\n      \"height\": 377,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"0939a36e-2c13-4edc-83f4-72e99a7f5cda\",\n      \"label\": \"label-7790\",\n      \"height\": 197,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"499bc699-e7a2-4a51-a39c-365d5befbd6c\",\n      \"label\": \"label-7791\",\n      \"height\": 483,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"3729a41e-52ce-43db-8b34-3d5a11cb4fce\",\n      \"label\": \"label-7792\",\n      \"height\": 430,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"7106c24d-f206-49ad-ae9c-67261e28e4cf\",\n      \"label\": \"label-7793\",\n      \"height\": 86,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"6f0c6ca4-7cff-4514-8b0a-ea5d4f16bd48\",\n      \"label\": \"label-7794\",\n      \"height\": 73,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"6d84aac3-3d1c-4eb5-b79c-a41166018524\",\n      \"label\": \"label-7795\",\n      \"height\": 491,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"d64cc24c-3f42-4249-9b78-8f593214f1ca\",\n      \"label\": \"label-7796\",\n      \"height\": 456,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"4ee16894-9ae6-482c-9f1c-788c7aca7f52\",\n      \"label\": \"label-7797\",\n      \"height\": 454,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"721750b0-7ee6-4def-aac8-ac62b31bdbcd\",\n      \"label\": \"label-7798\",\n      \"height\": 96,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"3eebfd04-c064-41e3-8b88-20d031d97b27\",\n      \"label\": \"label-7799\",\n      \"height\": 103,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"451818e9-7e0d-4ce6-a74a-83ce41bf2f20\",\n      \"label\": \"label-7800\",\n      \"height\": 210,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"de86a84a-4c8c-446a-9411-4430cfb1e071\",\n      \"label\": \"label-7801\",\n      \"height\": 264,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"e42a5c01-c6ca-41bd-ae93-84ab4bf3c0c4\",\n      \"label\": \"label-7802\",\n      \"height\": 82,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"56a7c6ea-ea09-4de9-a482-b2c3c7e8602f\",\n      \"label\": \"label-7803\",\n      \"height\": 180,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"0a33af30-f4d2-4e61-a396-95b3bb9a060e\",\n      \"label\": \"label-7804\",\n      \"height\": 496,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"b6a08cc6-9f10-4f62-a721-88ccff5de390\",\n      \"label\": \"label-7805\",\n      \"height\": 304,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"d741e4eb-8785-48e5-8951-bacb3e1d5609\",\n      \"label\": \"label-7806\",\n      \"height\": 508,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"6a216263-5f34-49b4-affe-326ed0af6407\",\n      \"label\": \"label-7807\",\n      \"height\": 294,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"ae809f27-c1c9-4a1a-b1b5-b9dea19cdfc7\",\n      \"label\": \"label-7808\",\n      \"height\": 461,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"71a71494-28e1-4e4d-b4b7-7fbbbbe3c02e\",\n      \"label\": \"label-7809\",\n      \"height\": 272,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"3ab47390-f42d-4e4a-a8f4-1c388aeb3482\",\n      \"label\": \"label-7810\",\n      \"height\": 529,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"28827a8c-c49b-43d2-b099-ae9228645ad9\",\n      \"label\": \"label-7811\",\n      \"height\": 457,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"d30ae386-832e-4741-bddc-38a3a2d77358\",\n      \"label\": \"label-7812\",\n      \"height\": 315,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"e69f924e-b46b-484b-b417-2bdc90be27e6\",\n      \"label\": \"label-7813\",\n      \"height\": 284,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"4f6a4375-5b08-485d-a531-f31130bab1f6\",\n      \"label\": \"label-7814\",\n      \"height\": 141,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"d3572656-a8f7-4f98-b703-77649f7ea7e3\",\n      \"label\": \"label-7815\",\n      \"height\": 479,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"d667a45b-845e-427f-87e7-28a3cee462be\",\n      \"label\": \"label-7816\",\n      \"height\": 86,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"812205b5-f087-465c-b12d-63bed8235b24\",\n      \"label\": \"label-7817\",\n      \"height\": 74,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"e989ae79-7092-492c-bdc7-925c0441168b\",\n      \"label\": \"label-7818\",\n      \"height\": 135,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"843d4526-ccfe-4cd3-9b24-5d4bd8dd0631\",\n      \"label\": \"label-7819\",\n      \"height\": 474,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"9d61d83f-4601-4d31-95c2-5ac4f4a265e4\",\n      \"label\": \"label-7820\",\n      \"height\": 270,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"2ad747ba-a6c4-4d2b-bbf9-1fdfbc86157c\",\n      \"label\": \"label-7821\",\n      \"height\": 368,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"8dd1e86a-b6c8-4866-84d1-61a38f475a3a\",\n      \"label\": \"label-7822\",\n      \"height\": 150,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"8ea58949-8a5d-42e7-beeb-f831d40bd2e5\",\n      \"label\": \"label-7823\",\n      \"height\": 265,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"3e2f5b27-a5cd-40c2-a1a5-a6c02773bb31\",\n      \"label\": \"label-7824\",\n      \"height\": 232,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"09ddc74e-5320-40d1-bc3e-89aca696c92d\",\n      \"label\": \"label-7825\",\n      \"height\": 322,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"7dc17296-0acd-4d22-ae3a-2e083c53f061\",\n      \"label\": \"label-7826\",\n      \"height\": 476,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"dd509513-a010-4de2-90e1-9d494c680969\",\n      \"label\": \"label-7827\",\n      \"height\": 292,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"5a0dca3a-e6b9-4e63-84ba-380101f34ce6\",\n      \"label\": \"label-7828\",\n      \"height\": 60,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"7e347b6c-f5a3-42c9-9d78-13f83cb4f8e3\",\n      \"label\": \"label-7829\",\n      \"height\": 480,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"697da65d-1a2a-4f2f-928b-4185c67316fa\",\n      \"label\": \"label-7830\",\n      \"height\": 352,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"250c0152-3c87-4b89-aa8d-9ec1929fe54d\",\n      \"label\": \"label-7831\",\n      \"height\": 482,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"4ab2f049-491f-4ea1-9ab5-8488ee2a20ce\",\n      \"label\": \"label-7832\",\n      \"height\": 493,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"136b31e6-b074-48da-a19b-944c4076fcb8\",\n      \"label\": \"label-7833\",\n      \"height\": 99,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"e7b1e1ef-1649-4dd2-8b65-0486a567477e\",\n      \"label\": \"label-7834\",\n      \"height\": 339,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"e8b674a1-e754-48e1-b092-1135dfb3dac2\",\n      \"label\": \"label-7835\",\n      \"height\": 34,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"c8dc1254-b55a-41e4-90eb-ad2aa61ff7ae\",\n      \"label\": \"label-7836\",\n      \"height\": 294,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"77bf2bf6-2b5f-43d0-aab1-244edb4894cc\",\n      \"label\": \"label-7837\",\n      \"height\": 420,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"4c3f3f3b-5d17-4a62-83db-5e29ce69f560\",\n      \"label\": \"label-7838\",\n      \"height\": 182,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"000f371f-d60c-4f78-822b-f5cb6d6d5baf\",\n      \"label\": \"label-7839\",\n      \"height\": 132,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"feaff638-009c-4298-b9b9-ade927775fae\",\n      \"label\": \"label-7840\",\n      \"height\": 217,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"18183745-34fc-42bd-bc9d-9e4d4fcc76a5\",\n      \"label\": \"label-7841\",\n      \"height\": 184,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"9247aa35-5934-4da5-956c-9d208d9a7961\",\n      \"label\": \"label-7842\",\n      \"height\": 319,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"db0933a6-3797-4661-8ba5-172bcf2075fa\",\n      \"label\": \"label-7843\",\n      \"height\": 481,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"6b5d5305-962a-450b-b2ea-7cb868d2b45f\",\n      \"label\": \"label-7844\",\n      \"height\": 38,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"ed47d83b-1292-4908-945b-45d9a76c37c3\",\n      \"label\": \"label-7845\",\n      \"height\": 265,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"93ca887f-668b-4153-a906-65e98cd9b9f3\",\n      \"label\": \"label-7846\",\n      \"height\": 106,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"b9285551-f327-48a7-94ac-50bf07d98777\",\n      \"label\": \"label-7847\",\n      \"height\": 503,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"0305d623-419d-4366-b193-8351bddfe4c5\",\n      \"label\": \"label-7848\",\n      \"height\": 334,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"578b0934-a3e7-4aba-9262-71aa515a1715\",\n      \"label\": \"label-7849\",\n      \"height\": 267,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"ef910e08-6a76-40af-866c-f93f574544de\",\n      \"label\": \"label-7850\",\n      \"height\": 164,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"9f75e68b-9f3f-457e-a4d8-9444a1e9051a\",\n      \"label\": \"label-7851\",\n      \"height\": 113,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"ec94f945-f4a1-4d39-ac26-3f900520dd3b\",\n      \"label\": \"label-7852\",\n      \"height\": 126,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"ecdc3636-ccd2-41d3-a257-8327d4aecc48\",\n      \"label\": \"label-7853\",\n      \"height\": 116,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"38a81598-eb1a-4e64-9c98-c0be16769c0f\",\n      \"label\": \"label-7854\",\n      \"height\": 271,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"c04a80fd-f532-423b-8f7c-5f6de0aa3586\",\n      \"label\": \"label-7855\",\n      \"height\": 231,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"7bdff896-cc34-49d2-8eaf-5ad1b7449fc6\",\n      \"label\": \"label-7856\",\n      \"height\": 409,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"53db06f4-8ab0-44f7-90cb-95d2f50c7c06\",\n      \"label\": \"label-7857\",\n      \"height\": 63,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"41b236f8-70c9-476c-b162-5fe42eeed547\",\n      \"label\": \"label-7858\",\n      \"height\": 269,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"51e3044a-ddaa-442a-a731-08f7221310c1\",\n      \"label\": \"label-7859\",\n      \"height\": 52,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"7efd86d7-20c7-4da9-bd42-12345e46b927\",\n      \"label\": \"label-7860\",\n      \"height\": 398,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"6c18edf5-2b6f-4c18-8f3f-9ab0a7f07781\",\n      \"label\": \"label-7861\",\n      \"height\": 173,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"dbebe4a8-0c04-46c8-baf9-1d804ec5a3ff\",\n      \"label\": \"label-7862\",\n      \"height\": 239,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"1740974b-a8ce-4234-9340-78a769da5595\",\n      \"label\": \"label-7863\",\n      \"height\": 376,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"720bab6b-cea0-40fa-873c-7511c23a4cf0\",\n      \"label\": \"label-7864\",\n      \"height\": 209,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"20cebd97-f9e1-4466-9a4b-a06c17bec622\",\n      \"label\": \"label-7865\",\n      \"height\": 359,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"d012c65a-7eca-43b2-af48-d0995b3828cc\",\n      \"label\": \"label-7866\",\n      \"height\": 201,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"834d5b8d-0a53-47e2-bd50-bcde6fc0d7d2\",\n      \"label\": \"label-7867\",\n      \"height\": 416,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"9c146784-17ec-4ef7-95f6-c0fbd7d5fc17\",\n      \"label\": \"label-7868\",\n      \"height\": 234,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"471a7434-0a87-4abe-bf76-31cf3a02bc82\",\n      \"label\": \"label-7869\",\n      \"height\": 474,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"dd5ee3c6-fe5a-4dfc-aea8-6105159b06a2\",\n      \"label\": \"label-7870\",\n      \"height\": 34,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"7c1649c1-fb5e-4f69-b9cf-87e990d7855a\",\n      \"label\": \"label-7871\",\n      \"height\": 312,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"49212e45-8af0-45a9-9e48-765569a8750f\",\n      \"label\": \"label-7872\",\n      \"height\": 407,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"bfc691ab-021f-4a74-a72b-7c9a6f2c26cd\",\n      \"label\": \"label-7873\",\n      \"height\": 108,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"b89a7700-81b5-4eb9-bd73-d882966909cd\",\n      \"label\": \"label-7874\",\n      \"height\": 524,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"eb395bb6-847a-443e-850b-6dc4914d31b4\",\n      \"label\": \"label-7875\",\n      \"height\": 225,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"23e38d48-4f66-447e-8522-a171138af053\",\n      \"label\": \"label-7876\",\n      \"height\": 529,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"3e25373a-6638-4f43-9d23-0679889e9fd9\",\n      \"label\": \"label-7877\",\n      \"height\": 124,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"ff695d46-37ec-4b51-b6ba-6bbf2e9bdb02\",\n      \"label\": \"label-7878\",\n      \"height\": 61,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"b4ec289f-581e-4e87-85fa-058063fe1dde\",\n      \"label\": \"label-7879\",\n      \"height\": 369,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"c10db818-b825-47f9-9ca5-4c0d56d23202\",\n      \"label\": \"label-7880\",\n      \"height\": 93,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"6cab2ade-166e-4676-ac49-827431be5abb\",\n      \"label\": \"label-7881\",\n      \"height\": 440,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"dcafe932-df65-4aec-ac01-d3dc09cc80e5\",\n      \"label\": \"label-7882\",\n      \"height\": 129,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"305acdd9-d5fc-4a37-9aeb-0725b98d1209\",\n      \"label\": \"label-7883\",\n      \"height\": 190,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"41b5f91c-0287-485a-adcc-7b51407b4be2\",\n      \"label\": \"label-7884\",\n      \"height\": 406,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"f9f9b44a-3128-4fb6-8d93-09c7d9902681\",\n      \"label\": \"label-7885\",\n      \"height\": 132,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"9fc8dbce-7ee0-416d-83d9-e6cc2382ccca\",\n      \"label\": \"label-7886\",\n      \"height\": 496,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"840d2c4a-c4e9-4cf7-b4a6-1b6ddfacd4c1\",\n      \"label\": \"label-7887\",\n      \"height\": 292,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"51edff07-14a4-4c39-a93a-f44cebb20f9c\",\n      \"label\": \"label-7888\",\n      \"height\": 45,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"f2bc3cdc-4e0a-47db-b962-5c1477695c07\",\n      \"label\": \"label-7889\",\n      \"height\": 423,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"69a29c22-8ffa-4330-81b0-ba0cb2a8d279\",\n      \"label\": \"label-7890\",\n      \"height\": 488,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"8bb44781-5e91-45a3-bca2-333fa783d5f0\",\n      \"label\": \"label-7891\",\n      \"height\": 158,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"145c7d9a-4bde-452b-94a9-f357c33a1f20\",\n      \"label\": \"label-7892\",\n      \"height\": 216,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"6fe9cb7e-2aac-4d04-9881-6fa79ef70152\",\n      \"label\": \"label-7893\",\n      \"height\": 99,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"9d0f8b06-428b-41f5-8009-b7eb3dfdc7b2\",\n      \"label\": \"label-7894\",\n      \"height\": 306,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"73649f2f-92cb-498b-8263-2ed5fbc73bbf\",\n      \"label\": \"label-7895\",\n      \"height\": 200,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"d218c328-2df1-48c7-8697-1ba1c10545a5\",\n      \"label\": \"label-7896\",\n      \"height\": 44,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"c7d88c7d-fa0e-4a4b-b34e-7496b7cb4c30\",\n      \"label\": \"label-7897\",\n      \"height\": 219,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"7e4c3dcc-e27d-4315-9441-71609f1144a8\",\n      \"label\": \"label-7898\",\n      \"height\": 401,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"b439122c-b215-496b-8ea8-d0d8d58c172b\",\n      \"label\": \"label-7899\",\n      \"height\": 144,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"d5077cb3-830e-481c-ada9-7d597097d90a\",\n      \"label\": \"label-7900\",\n      \"height\": 410,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"3c85734a-1cdd-48ca-901c-8614763651dd\",\n      \"label\": \"label-7901\",\n      \"height\": 221,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"01869394-8dd5-4955-9b71-89da45cc243a\",\n      \"label\": \"label-7902\",\n      \"height\": 373,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"ae3bf08d-5e75-4769-a544-d12c1ab7703e\",\n      \"label\": \"label-7903\",\n      \"height\": 274,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"04c7d46e-d391-4f63-a5bb-315e8260e673\",\n      \"label\": \"label-7904\",\n      \"height\": 421,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"aaa3621a-b6eb-4aa7-94d4-0f1a6b6d42dd\",\n      \"label\": \"label-7905\",\n      \"height\": 457,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"fa86f120-5bc8-4d8b-a788-a5336b840fa9\",\n      \"label\": \"label-7906\",\n      \"height\": 169,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"31c76c28-eb87-423c-a72b-7a8a6400bdc6\",\n      \"label\": \"label-7907\",\n      \"height\": 379,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"7595665d-0bfc-4bf5-945c-8fd25e86a0e0\",\n      \"label\": \"label-7908\",\n      \"height\": 408,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"fb4e200c-24ed-4550-a690-e7425f893dcd\",\n      \"label\": \"label-7909\",\n      \"height\": 337,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"08e0689d-41b8-4020-9cea-8efd132dcb30\",\n      \"label\": \"label-7910\",\n      \"height\": 146,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"7763336f-e069-472c-a0c7-2720583bbdf8\",\n      \"label\": \"label-7911\",\n      \"height\": 256,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"2628f3f3-1e36-4105-891e-aeade0405fd5\",\n      \"label\": \"label-7912\",\n      \"height\": 462,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"77304146-9672-4f89-80df-517e6fc79bcc\",\n      \"label\": \"label-7913\",\n      \"height\": 345,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"d2301ef8-d701-4ef4-8317-de763f15e9a6\",\n      \"label\": \"label-7914\",\n      \"height\": 411,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"0af1482a-a055-48f2-add4-2136690b824b\",\n      \"label\": \"label-7915\",\n      \"height\": 447,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"894fcc36-15fc-4e2d-8fbb-132ac588cb41\",\n      \"label\": \"label-7916\",\n      \"height\": 76,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"7b229f82-3356-4d10-9993-531c6679f4a2\",\n      \"label\": \"label-7917\",\n      \"height\": 356,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"c92fd026-724c-4c87-b592-d45ac92629eb\",\n      \"label\": \"label-7918\",\n      \"height\": 69,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"ca514bed-d5f8-4340-9680-f4019d2e8319\",\n      \"label\": \"label-7919\",\n      \"height\": 275,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"d8417a00-3f94-4b2d-a7f7-736d54ec6258\",\n      \"label\": \"label-7920\",\n      \"height\": 132,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"b0df4aa9-971f-4ebf-b876-6984f2b0542b\",\n      \"label\": \"label-7921\",\n      \"height\": 67,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"9f22e3ec-fbea-44d8-b557-74f8c2fbd527\",\n      \"label\": \"label-7922\",\n      \"height\": 382,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"3d3fc3cb-4982-44ef-80d2-bbbcf6e391d1\",\n      \"label\": \"label-7923\",\n      \"height\": 418,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"6e5d64c0-d83c-47da-a086-736330e13dcc\",\n      \"label\": \"label-7924\",\n      \"height\": 488,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"884aeac1-cfa2-4642-a6b7-3f85ab9b1d1d\",\n      \"label\": \"label-7925\",\n      \"height\": 38,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"5d2c9367-e968-480d-b512-de7506125b37\",\n      \"label\": \"label-7926\",\n      \"height\": 529,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"c0138f0b-78b0-4441-b3bb-bccd170ed8aa\",\n      \"label\": \"label-7927\",\n      \"height\": 140,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"c8ab25f8-32dc-4c29-a401-9d3dce30ac1e\",\n      \"label\": \"label-7928\",\n      \"height\": 273,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"b7999c11-bd2b-4639-bd42-38c12d70bdfe\",\n      \"label\": \"label-7929\",\n      \"height\": 254,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"03c1578f-103f-4e1c-9e90-fea21286f71b\",\n      \"label\": \"label-7930\",\n      \"height\": 500,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"b2e9ef8b-3ac4-41bd-8fce-12944e4d880e\",\n      \"label\": \"label-7931\",\n      \"height\": 371,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"b87320ee-06cd-4226-a2bf-6eee126179d8\",\n      \"label\": \"label-7932\",\n      \"height\": 351,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"6e675068-1b72-46b5-ae7d-1740f705aa77\",\n      \"label\": \"label-7933\",\n      \"height\": 509,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"aeb1749e-8713-4355-871d-a7c416b18093\",\n      \"label\": \"label-7934\",\n      \"height\": 271,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"c132b1c4-d9f0-4476-9839-1e690b14e438\",\n      \"label\": \"label-7935\",\n      \"height\": 302,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"38aff766-dc05-46ae-b435-685f984b9c73\",\n      \"label\": \"label-7936\",\n      \"height\": 357,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"bcb1b10e-5384-40db-98d9-b9bd32bc9cb0\",\n      \"label\": \"label-7937\",\n      \"height\": 203,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"cdaf92c1-35df-4345-bef0-7713f77e46a2\",\n      \"label\": \"label-7938\",\n      \"height\": 500,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"4b8cd447-45c7-4fa3-8ff3-d57f6a739870\",\n      \"label\": \"label-7939\",\n      \"height\": 361,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"91981886-2240-43c3-a2ff-fa50f6ff7f95\",\n      \"label\": \"label-7940\",\n      \"height\": 52,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"bf66237e-a7cb-4734-886e-f1132d6dd366\",\n      \"label\": \"label-7941\",\n      \"height\": 456,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"49898a09-ec34-4c10-bd6b-91347582b44e\",\n      \"label\": \"label-7942\",\n      \"height\": 34,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"f8cc34b8-fa22-40c4-ba64-463f5950f95d\",\n      \"label\": \"label-7943\",\n      \"height\": 289,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"e8f9e15c-b39d-4076-9e3d-2501b3a095be\",\n      \"label\": \"label-7944\",\n      \"height\": 510,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"95743a1a-4e2b-45f8-a3c1-f02b09c41a1e\",\n      \"label\": \"label-7945\",\n      \"height\": 372,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"0e6ceae8-61f3-4a3b-b0c6-c893fb886faa\",\n      \"label\": \"label-7946\",\n      \"height\": 379,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"6c2810af-de96-4d87-ba95-9e3c1dc0b575\",\n      \"label\": \"label-7947\",\n      \"height\": 215,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"d0877afc-c168-4858-a5f6-d1460a27015d\",\n      \"label\": \"label-7948\",\n      \"height\": 414,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"6e2819a9-8328-4ce8-b1b7-96222c995a75\",\n      \"label\": \"label-7949\",\n      \"height\": 488,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"b665b7f3-311a-4a7a-91c3-9cea0c9e805c\",\n      \"label\": \"label-7950\",\n      \"height\": 223,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"529a65dd-ae02-4669-b322-ee97fbaa0190\",\n      \"label\": \"label-7951\",\n      \"height\": 262,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"4bf64390-a4ff-45e9-978c-dd0353be7fd1\",\n      \"label\": \"label-7952\",\n      \"height\": 226,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"b1472b7c-70cc-45f9-ac74-a0a68db5d676\",\n      \"label\": \"label-7953\",\n      \"height\": 66,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"0ed446e7-98d9-437c-87b0-3e34bb16fbb2\",\n      \"label\": \"label-7954\",\n      \"height\": 280,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"206e3ce3-7926-4525-bfdb-6b4b8ef92126\",\n      \"label\": \"label-7955\",\n      \"height\": 239,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"b1fdfc93-3d2d-4b0c-a3ea-eaac510b6f4b\",\n      \"label\": \"label-7956\",\n      \"height\": 359,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"f905bb64-e564-4e3d-a5cf-9d182364296e\",\n      \"label\": \"label-7957\",\n      \"height\": 441,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"598c2a50-d640-4262-8f8f-69301b8357b2\",\n      \"label\": \"label-7958\",\n      \"height\": 33,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"c5966fc4-030d-4518-9e57-864f3cedc2e1\",\n      \"label\": \"label-7959\",\n      \"height\": 287,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"c2050df9-d8c3-4153-baf6-ed390289bd8c\",\n      \"label\": \"label-7960\",\n      \"height\": 445,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"544ea22a-3f05-4830-8454-b7c16ecf110f\",\n      \"label\": \"label-7961\",\n      \"height\": 399,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"8f6de18e-8717-43ed-8ced-5821ea1a6ac6\",\n      \"label\": \"label-7962\",\n      \"height\": 355,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"b97353c5-15eb-4a87-a5c6-b35f87b00ace\",\n      \"label\": \"label-7963\",\n      \"height\": 67,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"8c792d05-b06c-4b7e-abad-dac1363de9d6\",\n      \"label\": \"label-7964\",\n      \"height\": 374,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"9bafe783-3af2-4a27-9691-2277d35410ea\",\n      \"label\": \"label-7965\",\n      \"height\": 501,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"a47f7158-0506-4f56-b84e-800a83632e13\",\n      \"label\": \"label-7966\",\n      \"height\": 436,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"d43ac240-8ed9-49e6-aced-619de72ff7a3\",\n      \"label\": \"label-7967\",\n      \"height\": 232,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"a0673be0-b883-4cfd-8d1e-52ea7713f407\",\n      \"label\": \"label-7968\",\n      \"height\": 423,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"e0c04e49-79d1-4e5c-a7d1-e7258627b7a1\",\n      \"label\": \"label-7969\",\n      \"height\": 98,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"1cab49cc-997b-4394-b55d-f6574e1ffac8\",\n      \"label\": \"label-7970\",\n      \"height\": 82,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"5ffcc841-738d-4bd0-aae4-7f830a16d969\",\n      \"label\": \"label-7971\",\n      \"height\": 120,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"48b82b58-5e65-4485-b6b8-3e638f9fcbd2\",\n      \"label\": \"label-7972\",\n      \"height\": 290,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"ddac4b5c-d418-43af-bfb4-4116e96bbe7f\",\n      \"label\": \"label-7973\",\n      \"height\": 46,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"21563581-b7ea-442c-b27d-bd546c52dc1e\",\n      \"label\": \"label-7974\",\n      \"height\": 262,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"4e9a1939-2baa-43da-ace1-473fb12995b3\",\n      \"label\": \"label-7975\",\n      \"height\": 470,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"daade0d3-df77-4105-a1cb-d3418d02ff59\",\n      \"label\": \"label-7976\",\n      \"height\": 274,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"13b35236-d816-45a1-84f8-3b19f29c5402\",\n      \"label\": \"label-7977\",\n      \"height\": 213,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"9915e7c6-861b-48c8-9d9d-b8cb43c541d4\",\n      \"label\": \"label-7978\",\n      \"height\": 169,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"1cfc2127-a925-4719-a931-0ee26b207552\",\n      \"label\": \"label-7979\",\n      \"height\": 450,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"bf10c4ea-0c6c-4567-aa02-31370ba91ff0\",\n      \"label\": \"label-7980\",\n      \"height\": 483,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"3db2949c-e497-4aa0-ac9a-179405af7f14\",\n      \"label\": \"label-7981\",\n      \"height\": 377,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"ed2d098d-8417-437d-a311-1c7983fab640\",\n      \"label\": \"label-7982\",\n      \"height\": 53,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"a7ca7847-0827-4db8-a91a-e152f4793fff\",\n      \"label\": \"label-7983\",\n      \"height\": 354,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"de2c5476-21dc-4d90-94c7-9e0352e405ad\",\n      \"label\": \"label-7984\",\n      \"height\": 108,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"41a5822c-4a56-48ba-8bd8-5f1f6bcbc11f\",\n      \"label\": \"label-7985\",\n      \"height\": 409,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"ac307da1-5454-491f-8634-f426ed277885\",\n      \"label\": \"label-7986\",\n      \"height\": 136,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"4186f766-ab4e-41ea-b457-27827f976d3f\",\n      \"label\": \"label-7987\",\n      \"height\": 386,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"53cf52bf-f222-471e-96d6-75d480c11730\",\n      \"label\": \"label-7988\",\n      \"height\": 530,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"d98d28b1-01d6-48e7-b408-69f1681b4084\",\n      \"label\": \"label-7989\",\n      \"height\": 322,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"0164fc08-05f9-4ddf-a2e1-f7f2169dcbc2\",\n      \"label\": \"label-7990\",\n      \"height\": 137,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"74d6247a-aa22-4ea5-a418-7f0ed130bba7\",\n      \"label\": \"label-7991\",\n      \"height\": 421,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"50dbc8e7-4283-4c12-8f16-11bff49cf075\",\n      \"label\": \"label-7992\",\n      \"height\": 46,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"dc3e37ae-e064-4393-aa30-926354a20abb\",\n      \"label\": \"label-7993\",\n      \"height\": 360,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"3448586d-d0b9-4997-a3f7-72da9b7ae8d1\",\n      \"label\": \"label-7994\",\n      \"height\": 259,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"3c00dc41-148e-4cfe-bf00-386f33fab4c4\",\n      \"label\": \"label-7995\",\n      \"height\": 74,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"427c076c-4135-43b0-bd3e-91bc7d3fdf21\",\n      \"label\": \"label-7996\",\n      \"height\": 323,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"eb21ced5-c568-4d73-9a1e-dbaa29204995\",\n      \"label\": \"label-7997\",\n      \"height\": 399,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"b95c4f52-67a9-4fef-955d-59b97b345898\",\n      \"label\": \"label-7998\",\n      \"height\": 360,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"c0eab681-db58-4607-b12e-877d4724d5f4\",\n      \"label\": \"label-7999\",\n      \"height\": 359,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"02b2f232-b4e7-4b95-94d0-ab6a5768b41b\",\n      \"label\": \"label-8000\",\n      \"height\": 529,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"90b432cf-5d13-4624-800d-9ca0def7fb2b\",\n      \"label\": \"label-8001\",\n      \"height\": 503,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"8d859b16-434b-45c2-aa5b-4c58485f89b9\",\n      \"label\": \"label-8002\",\n      \"height\": 234,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"cac0d4de-5984-4bbb-86de-da5651e37727\",\n      \"label\": \"label-8003\",\n      \"height\": 433,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"82ee7093-3ac0-4f8c-837a-936c652e4187\",\n      \"label\": \"label-8004\",\n      \"height\": 344,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"7f860583-28f9-494d-b177-7e47640973c1\",\n      \"label\": \"label-8005\",\n      \"height\": 409,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"ef090f9b-443d-4e62-b123-bcb1c8839d8b\",\n      \"label\": \"label-8006\",\n      \"height\": 105,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"a137b5be-5f09-4b39-ae95-6d4f6672816c\",\n      \"label\": \"label-8007\",\n      \"height\": 129,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"553a4ce7-f8aa-4f16-889f-cbfdc8516ee4\",\n      \"label\": \"label-8008\",\n      \"height\": 365,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"90844dc1-5162-422c-908b-18acd3be1280\",\n      \"label\": \"label-8009\",\n      \"height\": 440,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"6f569d48-2e71-4ade-b81f-6a652e1a2f13\",\n      \"label\": \"label-8010\",\n      \"height\": 250,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"383a7ece-1867-4f9c-9f0b-58f8d0f15210\",\n      \"label\": \"label-8011\",\n      \"height\": 385,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"edbcd52c-a10a-4b1f-9757-46eefc9d60c8\",\n      \"label\": \"label-8012\",\n      \"height\": 468,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"417d11d7-553e-45b9-93e6-98251a65722e\",\n      \"label\": \"label-8013\",\n      \"height\": 527,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"0de73abc-d4a3-42a5-9920-711e19e63e3e\",\n      \"label\": \"label-8014\",\n      \"height\": 426,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"0ed9e730-6140-4b00-b2ad-1a406caf8afa\",\n      \"label\": \"label-8015\",\n      \"height\": 122,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"427be867-9191-43a7-bbbd-041cf57c643d\",\n      \"label\": \"label-8016\",\n      \"height\": 181,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"ae6c7172-30eb-4cb6-8efc-13e36d94f293\",\n      \"label\": \"label-8017\",\n      \"height\": 411,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"376aa8d6-e2ad-48a2-89b8-dfd5e8a05737\",\n      \"label\": \"label-8018\",\n      \"height\": 113,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"414349f7-fa71-44bb-b35b-2d12d8a55ad4\",\n      \"label\": \"label-8019\",\n      \"height\": 164,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"53d7bb4b-3bf6-48c2-bded-a8aea0baf89b\",\n      \"label\": \"label-8020\",\n      \"height\": 346,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"8e80f616-eeb6-466b-b12e-ebda40ff3032\",\n      \"label\": \"label-8021\",\n      \"height\": 205,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"55025779-965f-4795-a0fa-8e2ed1b78757\",\n      \"label\": \"label-8022\",\n      \"height\": 477,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"7b9f2066-0fdd-4b7c-88cf-8b551ece7972\",\n      \"label\": \"label-8023\",\n      \"height\": 235,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"cfaf63bd-321a-484f-a909-3ee336ad0334\",\n      \"label\": \"label-8024\",\n      \"height\": 526,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"e0a911f8-398b-41bc-b430-233c4bbb654c\",\n      \"label\": \"label-8025\",\n      \"height\": 522,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"47a9aab5-3405-419e-8dfd-dceb50b09247\",\n      \"label\": \"label-8026\",\n      \"height\": 501,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"d64becf9-d7ab-495f-a1f1-d53e92b07048\",\n      \"label\": \"label-8027\",\n      \"height\": 483,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"1da587b7-c597-495e-b951-710198a8a849\",\n      \"label\": \"label-8028\",\n      \"height\": 356,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"48395282-aafc-4317-839a-55b500372411\",\n      \"label\": \"label-8029\",\n      \"height\": 239,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"2a6c8876-978c-4554-998b-5068d902991d\",\n      \"label\": \"label-8030\",\n      \"height\": 502,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"43d66a42-7c0a-470b-a98c-913e0c9605f1\",\n      \"label\": \"label-8031\",\n      \"height\": 194,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"3fc1933d-69c1-48bd-9271-b51e8694ec3a\",\n      \"label\": \"label-8032\",\n      \"height\": 439,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"6daa800e-ca71-45fa-b0d8-75a9e37b13a8\",\n      \"label\": \"label-8033\",\n      \"height\": 489,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"de2928ab-52a6-4930-8535-1c5b94ebb2b8\",\n      \"label\": \"label-8034\",\n      \"height\": 302,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"5b58f376-482f-4749-b481-45ecf68172bb\",\n      \"label\": \"label-8035\",\n      \"height\": 226,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"a77fb701-5c4b-4c02-95c9-a1661d0579f4\",\n      \"label\": \"label-8036\",\n      \"height\": 261,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"7c94d604-dc7f-4319-b486-9479657d6808\",\n      \"label\": \"label-8037\",\n      \"height\": 325,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"bb71a4fb-727c-4f35-bf62-caf48fec8bbd\",\n      \"label\": \"label-8038\",\n      \"height\": 513,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"9ba30f52-d108-48b8-be2b-184ade84c936\",\n      \"label\": \"label-8039\",\n      \"height\": 126,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"6b098254-0f5b-42cb-8450-c31fc33c6f96\",\n      \"label\": \"label-8040\",\n      \"height\": 409,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"b3214168-f967-49b5-a164-ae0ebb38f010\",\n      \"label\": \"label-8041\",\n      \"height\": 341,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"cae25427-72a7-4688-9d3c-3e925bbc5f8e\",\n      \"label\": \"label-8042\",\n      \"height\": 315,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"78fc52b2-2256-4ed7-ae61-a5f0dbdd185f\",\n      \"label\": \"label-8043\",\n      \"height\": 443,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"4674a2bf-9a8c-4b3e-8663-ed57b538297d\",\n      \"label\": \"label-8044\",\n      \"height\": 331,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"01cbf7dc-ee52-4915-9062-b5659f6a847b\",\n      \"label\": \"label-8045\",\n      \"height\": 224,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"501b646f-8127-4679-be98-95a652e3b092\",\n      \"label\": \"label-8046\",\n      \"height\": 127,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"5fa5e618-bf26-4678-9e87-0116f981eac5\",\n      \"label\": \"label-8047\",\n      \"height\": 481,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"9b0e1aa7-5a8f-45d4-a1bf-274c3c06bc80\",\n      \"label\": \"label-8048\",\n      \"height\": 333,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"5659521a-21b1-479b-ac4d-96e7b2434596\",\n      \"label\": \"label-8049\",\n      \"height\": 41,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"05bf6b28-5757-4503-87f9-e5179f6d2604\",\n      \"label\": \"label-8050\",\n      \"height\": 260,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"623640a7-6032-40bc-b9a2-44cd5828fba8\",\n      \"label\": \"label-8051\",\n      \"height\": 414,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"723f46d0-1628-4265-94fa-6814b138655c\",\n      \"label\": \"label-8052\",\n      \"height\": 166,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"1b08a3a8-7a0b-446d-9a4f-d5389af00f74\",\n      \"label\": \"label-8053\",\n      \"height\": 420,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"1780ab07-4814-47dc-94ec-73e08dbbebbc\",\n      \"label\": \"label-8054\",\n      \"height\": 505,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"b68cd535-33a8-4977-bc17-9483f57f29f5\",\n      \"label\": \"label-8055\",\n      \"height\": 127,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"ad206101-b65c-4d30-b622-b86ce7533d6a\",\n      \"label\": \"label-8056\",\n      \"height\": 64,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"6862a466-d90c-4441-95a1-41f4dce4fc94\",\n      \"label\": \"label-8057\",\n      \"height\": 137,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"cf0fc260-5269-4124-9148-9fcf75787d20\",\n      \"label\": \"label-8058\",\n      \"height\": 397,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"258e3487-76a7-4cb7-9014-9ef04a6b88de\",\n      \"label\": \"label-8059\",\n      \"height\": 471,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"7cd41b9c-fb1d-44b7-9666-3c36d463dc06\",\n      \"label\": \"label-8060\",\n      \"height\": 144,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"dcf020db-515d-40eb-8b43-906aac4bc789\",\n      \"label\": \"label-8061\",\n      \"height\": 517,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"c345aaf2-1629-4d64-8e7d-1a6e42791ecd\",\n      \"label\": \"label-8062\",\n      \"height\": 158,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"a6e09500-a45c-456d-92cb-3e0bb25ff9f9\",\n      \"label\": \"label-8063\",\n      \"height\": 399,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"7ae2bcaa-591a-4494-8b49-0bc6b2287946\",\n      \"label\": \"label-8064\",\n      \"height\": 516,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"e297476c-48d4-4900-babe-19ce3285280b\",\n      \"label\": \"label-8065\",\n      \"height\": 144,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"fa748d05-db94-4fad-b6fa-d1ec9d2c0f86\",\n      \"label\": \"label-8066\",\n      \"height\": 294,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"1eaa450c-31e1-4514-a3b6-74cd991dc00c\",\n      \"label\": \"label-8067\",\n      \"height\": 287,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"eb562e12-fc0d-42b7-b433-489f929ddfa6\",\n      \"label\": \"label-8068\",\n      \"height\": 126,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"c8d6e567-01e8-48ff-8175-0532014b2c3d\",\n      \"label\": \"label-8069\",\n      \"height\": 362,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"8fbca340-9f4e-4357-a0f1-9195a11e2cb4\",\n      \"label\": \"label-8070\",\n      \"height\": 299,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"5442d2c9-571e-4a83-9ae5-4aaa97ba2859\",\n      \"label\": \"label-8071\",\n      \"height\": 478,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"0b79f951-a20e-4482-a4d9-db2a4f08bb9b\",\n      \"label\": \"label-8072\",\n      \"height\": 49,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"d1d69225-ce49-48c6-8de7-f2261f63f85d\",\n      \"label\": \"label-8073\",\n      \"height\": 474,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"24f63363-246b-4f06-8033-e5281e797bc8\",\n      \"label\": \"label-8074\",\n      \"height\": 265,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"dd39b828-18b0-462d-995c-98bd86a5911d\",\n      \"label\": \"label-8075\",\n      \"height\": 514,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"a50529e4-986b-4b12-8601-bd8c2b0895cd\",\n      \"label\": \"label-8076\",\n      \"height\": 486,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"4cd500ae-fccd-438f-9b82-cfe86706fa0c\",\n      \"label\": \"label-8077\",\n      \"height\": 117,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"9b14a21c-ca9d-4ce3-be02-b8360341fab9\",\n      \"label\": \"label-8078\",\n      \"height\": 515,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"0ec1e0b0-797f-4a3d-ac1e-3fa0753a03f2\",\n      \"label\": \"label-8079\",\n      \"height\": 84,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"e1411020-0ab1-4b38-b159-d8ed0e945094\",\n      \"label\": \"label-8080\",\n      \"height\": 41,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"29726fa4-cbec-40d4-9f3c-aa4ebdf7c1f2\",\n      \"label\": \"label-8081\",\n      \"height\": 450,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"b640f104-9923-4cff-952f-4f6b834dd043\",\n      \"label\": \"label-8082\",\n      \"height\": 170,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"4dcccadd-de7f-419d-b750-8ef654ee5a41\",\n      \"label\": \"label-8083\",\n      \"height\": 51,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"c93f3b35-400d-4857-bbfe-a6f723578e92\",\n      \"label\": \"label-8084\",\n      \"height\": 214,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"2a68f27b-df2e-4a7c-91ee-3b583711a316\",\n      \"label\": \"label-8085\",\n      \"height\": 147,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"08d0fefb-5855-4141-a729-f6515022b511\",\n      \"label\": \"label-8086\",\n      \"height\": 93,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"833bc202-2377-42e7-80c8-892873c31963\",\n      \"label\": \"label-8087\",\n      \"height\": 437,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"cdf29f63-a792-4106-94a0-f741d4d48693\",\n      \"label\": \"label-8088\",\n      \"height\": 148,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"3a68788c-8177-4a0f-9eb4-aec1bd6e17f9\",\n      \"label\": \"label-8089\",\n      \"height\": 421,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"742d42f2-2e1b-400b-a16b-9496366e6e0f\",\n      \"label\": \"label-8090\",\n      \"height\": 236,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"0b6936d1-24aa-4805-87bc-2499f09ae84f\",\n      \"label\": \"label-8091\",\n      \"height\": 203,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"55d65363-2c7a-4aa2-8368-297034d19e35\",\n      \"label\": \"label-8092\",\n      \"height\": 230,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"c50174ea-b890-498b-9574-b6a65be969bc\",\n      \"label\": \"label-8093\",\n      \"height\": 334,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"00363641-19f1-4016-b55b-7f3656e28b0a\",\n      \"label\": \"label-8094\",\n      \"height\": 350,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"8feae549-1d51-47a9-8b0d-ae531d6391e5\",\n      \"label\": \"label-8095\",\n      \"height\": 314,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"f62862eb-46ad-40ae-a5cd-b983efd295c1\",\n      \"label\": \"label-8096\",\n      \"height\": 266,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"d90131ac-d6ca-44f8-9e79-eb2ff65c7253\",\n      \"label\": \"label-8097\",\n      \"height\": 304,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"2b5dafc0-006f-4ba0-bf05-6bad3cfd3667\",\n      \"label\": \"label-8098\",\n      \"height\": 304,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"f772edfc-5d47-4dd8-936a-a052e13f31e4\",\n      \"label\": \"label-8099\",\n      \"height\": 307,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"fd8933b0-9ab6-4aa5-b872-d8310b527b99\",\n      \"label\": \"label-8100\",\n      \"height\": 204,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"8aaedb8e-d931-49bd-87a2-0fe45f81baf0\",\n      \"label\": \"label-8101\",\n      \"height\": 270,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"272d501b-388f-411b-99cb-be01a3965e19\",\n      \"label\": \"label-8102\",\n      \"height\": 337,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"753a9113-aa0d-4a18-a304-6d5119db0a8f\",\n      \"label\": \"label-8103\",\n      \"height\": 153,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"07b76042-2f30-40fa-a0ee-49ada79373cd\",\n      \"label\": \"label-8104\",\n      \"height\": 478,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"5c439d91-b54b-4442-a43e-214afb740a5a\",\n      \"label\": \"label-8105\",\n      \"height\": 392,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"13fe66f4-f2a6-4d59-93f8-665b3dc4183c\",\n      \"label\": \"label-8106\",\n      \"height\": 388,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"c94d5348-1cf9-499e-ae77-282046503056\",\n      \"label\": \"label-8107\",\n      \"height\": 132,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"e1ebadb0-be31-4fd8-b267-f18cffc1035e\",\n      \"label\": \"label-8108\",\n      \"height\": 498,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"f1c17986-643d-492a-867d-d033fccc8604\",\n      \"label\": \"label-8109\",\n      \"height\": 399,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"569ce743-1a12-4934-b809-4e7ac09155af\",\n      \"label\": \"label-8110\",\n      \"height\": 421,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"fd4a8b9a-0b0f-4767-a9e3-ea9aa916a73a\",\n      \"label\": \"label-8111\",\n      \"height\": 243,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"158d4751-d534-4e6c-a3b5-00602737db2f\",\n      \"label\": \"label-8112\",\n      \"height\": 376,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"b8daecd5-667a-4b93-bb8d-7b59b8acefc4\",\n      \"label\": \"label-8113\",\n      \"height\": 94,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"392583de-09c4-4891-87c7-cd3f8334b6e9\",\n      \"label\": \"label-8114\",\n      \"height\": 137,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"cf1ab290-8e6b-4af3-b71c-84b22b2afc1a\",\n      \"label\": \"label-8115\",\n      \"height\": 57,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"7988a99c-af00-414c-a85a-5d10d8a91623\",\n      \"label\": \"label-8116\",\n      \"height\": 294,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"bae9222e-962b-4e08-ba4a-434a82faccd1\",\n      \"label\": \"label-8117\",\n      \"height\": 53,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"83241472-70b1-47dd-a5b6-24a00b8dfa0b\",\n      \"label\": \"label-8118\",\n      \"height\": 319,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"7a74c277-0d5a-42e7-9340-d74d281e8e0a\",\n      \"label\": \"label-8119\",\n      \"height\": 248,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"46be8eb8-d41e-4937-914e-58348d038fe0\",\n      \"label\": \"label-8120\",\n      \"height\": 510,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"92dd94f2-a622-4620-ad5e-1827534f5a4c\",\n      \"label\": \"label-8121\",\n      \"height\": 63,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"59911172-e18b-43cd-a6bb-0a449dcbb03c\",\n      \"label\": \"label-8122\",\n      \"height\": 82,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"102d2afa-5f0d-4cdf-a37e-42d0d7cc0768\",\n      \"label\": \"label-8123\",\n      \"height\": 359,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"86c24d24-1db2-452b-9f99-25b52c1e96dc\",\n      \"label\": \"label-8124\",\n      \"height\": 466,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"9865f3b4-58e5-495b-b666-7f5582c118f1\",\n      \"label\": \"label-8125\",\n      \"height\": 33,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"6fc8c1bf-79f9-408e-9ea5-15c3b5a97ca4\",\n      \"label\": \"label-8126\",\n      \"height\": 478,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"e9c9fd5d-111d-4a66-8b19-933c8e88dcbb\",\n      \"label\": \"label-8127\",\n      \"height\": 208,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"b558b058-1f20-4d94-8e02-ce8aa4b9a156\",\n      \"label\": \"label-8128\",\n      \"height\": 243,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"fc5a7569-0fb0-4e2e-84eb-3e46c35b4a50\",\n      \"label\": \"label-8129\",\n      \"height\": 230,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"f2e04df5-2899-4688-b77f-a3f76c83b616\",\n      \"label\": \"label-8130\",\n      \"height\": 258,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"b6675c55-3aff-4888-88f9-1304334c46e3\",\n      \"label\": \"label-8131\",\n      \"height\": 100,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"f96a000b-b481-43e2-9ecb-e8bba27ec74c\",\n      \"label\": \"label-8132\",\n      \"height\": 290,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"2c0592e6-dac3-458a-b82f-5347b9d04d7d\",\n      \"label\": \"label-8133\",\n      \"height\": 285,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"10c90997-f1bc-43aa-957f-78373a7bd278\",\n      \"label\": \"label-8134\",\n      \"height\": 226,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"ddc4ff4f-1940-49a3-be93-c3664acfdc7e\",\n      \"label\": \"label-8135\",\n      \"height\": 304,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"9275984b-b2c6-46f0-a487-137386cb0423\",\n      \"label\": \"label-8136\",\n      \"height\": 337,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"a338f5b2-21e2-43be-91b5-a94ad86ddc6b\",\n      \"label\": \"label-8137\",\n      \"height\": 512,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"179aceeb-176c-4bf5-a6be-a226edc3a2cd\",\n      \"label\": \"label-8138\",\n      \"height\": 525,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"48208b4b-d7c0-4bf4-b583-694b78d98aff\",\n      \"label\": \"label-8139\",\n      \"height\": 224,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"d269829e-6e08-4f35-9c12-d04ec91375de\",\n      \"label\": \"label-8140\",\n      \"height\": 229,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"73a48e96-7a31-4eb1-803b-57fe51d84518\",\n      \"label\": \"label-8141\",\n      \"height\": 193,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"aa5c950a-f153-42d1-b630-f7bb959d55ab\",\n      \"label\": \"label-8142\",\n      \"height\": 237,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"1a507a52-ba31-4fd4-b295-e80a0ded67e5\",\n      \"label\": \"label-8143\",\n      \"height\": 305,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"c8191838-d23c-4566-8249-6a1a19ba7388\",\n      \"label\": \"label-8144\",\n      \"height\": 347,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"ef867d31-5adc-42eb-857c-143a48f7227a\",\n      \"label\": \"label-8145\",\n      \"height\": 520,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"26290ac6-5f1b-47dd-bf29-1d5b357d1f9a\",\n      \"label\": \"label-8146\",\n      \"height\": 64,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"8acf12a8-bd0e-4b48-af55-96018a05d883\",\n      \"label\": \"label-8147\",\n      \"height\": 459,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"6c06103f-1aae-4521-a61e-1e68ff23f585\",\n      \"label\": \"label-8148\",\n      \"height\": 165,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"30542231-56ab-4edd-9267-995d8d7df441\",\n      \"label\": \"label-8149\",\n      \"height\": 249,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"7ba514e3-f0cd-401b-ab15-bc3ac8c9420b\",\n      \"label\": \"label-8150\",\n      \"height\": 186,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"4815656f-2436-4cb1-b652-c8d981e7fb5f\",\n      \"label\": \"label-8151\",\n      \"height\": 99,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"b11c274b-3dfa-4494-9adf-a6413c73c94e\",\n      \"label\": \"label-8152\",\n      \"height\": 174,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"4b77c7ec-f812-467f-942e-53f61cf1a1cc\",\n      \"label\": \"label-8153\",\n      \"height\": 240,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"fcfaee52-a048-455b-87c7-ed865c3a0417\",\n      \"label\": \"label-8154\",\n      \"height\": 217,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"d43a1b09-9f2d-45d7-a65f-17307fc06458\",\n      \"label\": \"label-8155\",\n      \"height\": 207,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"b1b33d28-cc0e-4e19-9d7f-73794d52075e\",\n      \"label\": \"label-8156\",\n      \"height\": 85,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"a14ee500-967e-473d-a013-c456e72875bb\",\n      \"label\": \"label-8157\",\n      \"height\": 311,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"a5fa763d-5d26-4cfd-bdbc-1e528b9d30b3\",\n      \"label\": \"label-8158\",\n      \"height\": 475,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"0fe35e36-fd83-4176-8eef-8fd724febef6\",\n      \"label\": \"label-8159\",\n      \"height\": 498,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"14f4f11e-0270-42fa-95d9-4f25b281e28c\",\n      \"label\": \"label-8160\",\n      \"height\": 196,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"aec2e763-c1c3-446b-8452-71d26f07d29a\",\n      \"label\": \"label-8161\",\n      \"height\": 266,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"691f54dc-8664-4e60-a501-a0cc55202601\",\n      \"label\": \"label-8162\",\n      \"height\": 154,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"302280d9-3652-4047-862a-c4a97c545973\",\n      \"label\": \"label-8163\",\n      \"height\": 187,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"40e88552-a402-40ce-8d5f-d479e0501a75\",\n      \"label\": \"label-8164\",\n      \"height\": 375,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"5f3219c3-9d11-4f11-91f7-d4b6efb4f93d\",\n      \"label\": \"label-8165\",\n      \"height\": 36,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"bd9b8b0e-4bbf-401a-8970-9836e9552453\",\n      \"label\": \"label-8166\",\n      \"height\": 246,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"3eedcfd6-4ff0-49ee-b873-54f24f851183\",\n      \"label\": \"label-8167\",\n      \"height\": 331,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"01dd4dd9-9c53-44a2-8c18-aa14e10a6149\",\n      \"label\": \"label-8168\",\n      \"height\": 497,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"8fda1b68-f3e5-4fa8-b259-14b6d4346b00\",\n      \"label\": \"label-8169\",\n      \"height\": 176,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"e56a3d77-dbdf-4338-a854-63dd6a9bdccb\",\n      \"label\": \"label-8170\",\n      \"height\": 47,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"1301fd97-7bcc-4dd6-936e-2bcbdcc6c4f0\",\n      \"label\": \"label-8171\",\n      \"height\": 499,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"82427c09-891d-4a07-a2d0-f676071f05eb\",\n      \"label\": \"label-8172\",\n      \"height\": 291,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"e0002072-ae82-4487-9d6c-2623e08477c1\",\n      \"label\": \"label-8173\",\n      \"height\": 498,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"91a13fc9-83b1-413b-9692-c934712a6d93\",\n      \"label\": \"label-8174\",\n      \"height\": 201,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"337e2d04-ffb6-4408-912d-5260630f727e\",\n      \"label\": \"label-8175\",\n      \"height\": 298,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"5b46970f-4b43-433d-905f-1aab9302c3a8\",\n      \"label\": \"label-8176\",\n      \"height\": 506,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"e2f6970b-7c92-42fd-b3d3-d10fc34cfb19\",\n      \"label\": \"label-8177\",\n      \"height\": 137,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"64223b4e-8acb-4523-a2e3-7e6febca3ec5\",\n      \"label\": \"label-8178\",\n      \"height\": 158,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"1bfbf166-62c6-42a4-87fe-087dbed3ae31\",\n      \"label\": \"label-8179\",\n      \"height\": 323,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"9737aa41-73cc-4185-886b-9cf6519b45e5\",\n      \"label\": \"label-8180\",\n      \"height\": 93,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"8aa0867e-1d7d-442e-879d-3b8b8eb61dc6\",\n      \"label\": \"label-8181\",\n      \"height\": 324,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"a71dfa26-484a-422b-ba02-5b87789bf88a\",\n      \"label\": \"label-8182\",\n      \"height\": 334,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"7275684f-bcc8-4841-9776-4a9665f2c927\",\n      \"label\": \"label-8183\",\n      \"height\": 411,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"0a7025fd-6fb4-4fd4-aa23-0fa725b4c6b3\",\n      \"label\": \"label-8184\",\n      \"height\": 66,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"f50e6ced-f0da-4333-a049-e0ab875db851\",\n      \"label\": \"label-8185\",\n      \"height\": 164,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"84402581-e2ea-43e1-9338-1ff98c1609be\",\n      \"label\": \"label-8186\",\n      \"height\": 424,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"619a4970-ff6a-49cf-9d2c-6bb15bbf5b60\",\n      \"label\": \"label-8187\",\n      \"height\": 452,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"0a8872e2-00d2-434e-bebf-93ed17734c0d\",\n      \"label\": \"label-8188\",\n      \"height\": 410,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"5e9d7b06-b2ab-444a-807a-a9c5f3b03c12\",\n      \"label\": \"label-8189\",\n      \"height\": 214,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"2397c22c-0037-423b-b9f7-509b52b22f5b\",\n      \"label\": \"label-8190\",\n      \"height\": 36,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"f23538f4-5ffb-4810-876f-6ef99675d3b1\",\n      \"label\": \"label-8191\",\n      \"height\": 133,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"ccd8fee4-1b23-4d92-a067-116e02b10c5c\",\n      \"label\": \"label-8192\",\n      \"height\": 188,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"bb68fe8d-0869-47a2-a220-ed948b678c58\",\n      \"label\": \"label-8193\",\n      \"height\": 254,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"7732bd24-6a50-4b46-97ac-7c9eb0b142dd\",\n      \"label\": \"label-8194\",\n      \"height\": 454,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"d5e4ff97-2af6-4892-b0df-15e8901a4fb2\",\n      \"label\": \"label-8195\",\n      \"height\": 346,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"227f2152-f234-4ad6-bf05-85b21f5c038e\",\n      \"label\": \"label-8196\",\n      \"height\": 348,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"fbc1bb5b-d609-475f-a182-d5913d8c6e4f\",\n      \"label\": \"label-8197\",\n      \"height\": 348,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"5d7744d6-9c6e-4f77-9337-9f05131471c6\",\n      \"label\": \"label-8198\",\n      \"height\": 255,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"b9978498-aef0-4104-afa4-5fd218d68f47\",\n      \"label\": \"label-8199\",\n      \"height\": 158,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"8eba063b-44b7-4a22-884f-b3f6c67bf3e4\",\n      \"label\": \"label-8200\",\n      \"height\": 336,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"4bb600f4-3ca6-4c58-988c-87e3897f48e8\",\n      \"label\": \"label-8201\",\n      \"height\": 213,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"4101b63c-f1cb-42ac-b5ba-c8d81268a43a\",\n      \"label\": \"label-8202\",\n      \"height\": 509,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"c51dd961-2193-4d68-8414-44a0512888a0\",\n      \"label\": \"label-8203\",\n      \"height\": 41,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"303a1d91-e4f6-464f-a242-47b0d7d039e5\",\n      \"label\": \"label-8204\",\n      \"height\": 164,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"7b679207-d251-48f9-8834-340b26f3c302\",\n      \"label\": \"label-8205\",\n      \"height\": 480,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"dce5fabc-3d5a-4489-9d65-32fc39ab9aa7\",\n      \"label\": \"label-8206\",\n      \"height\": 39,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"99fb0496-0afc-4b5c-b9fd-45653f941dc0\",\n      \"label\": \"label-8207\",\n      \"height\": 403,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"b1bd64b5-5e12-4f53-bb3a-60b182f4c1a7\",\n      \"label\": \"label-8208\",\n      \"height\": 493,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"cb3d792c-6986-4e60-b6b4-d531ec0b8d14\",\n      \"label\": \"label-8209\",\n      \"height\": 75,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"1eebfe16-0498-4b49-b476-01ad3dd2bd35\",\n      \"label\": \"label-8210\",\n      \"height\": 224,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"77cd703c-696d-4a68-a960-f331a8f0b704\",\n      \"label\": \"label-8211\",\n      \"height\": 481,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"f30b62e2-479f-48e6-9d4e-02d1914fd734\",\n      \"label\": \"label-8212\",\n      \"height\": 279,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"7377d252-3b28-4e0b-a6bf-11c775fd8afc\",\n      \"label\": \"label-8213\",\n      \"height\": 312,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"a150a64c-a053-48db-b9b0-d687dffb2dd6\",\n      \"label\": \"label-8214\",\n      \"height\": 373,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"e40c811e-c31c-48e8-9aaa-3f29f0780f45\",\n      \"label\": \"label-8215\",\n      \"height\": 134,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"4ebdf003-07b5-4de6-89c8-616a36a4e6bb\",\n      \"label\": \"label-8216\",\n      \"height\": 469,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"b0c454dc-63c7-489b-a2ce-eb3ef2539376\",\n      \"label\": \"label-8217\",\n      \"height\": 146,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"26fb60d3-9c28-42e2-a381-f900cb710827\",\n      \"label\": \"label-8218\",\n      \"height\": 268,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"e676edd5-4bf5-451c-8535-538259bcaf9e\",\n      \"label\": \"label-8219\",\n      \"height\": 319,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"09b32ed0-4584-431a-9060-b85a222403f3\",\n      \"label\": \"label-8220\",\n      \"height\": 154,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"9a667b3a-7d59-4f6f-8757-90fbdfb19f66\",\n      \"label\": \"label-8221\",\n      \"height\": 375,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"ab32a20a-52f8-47f5-8bee-d7312b032ecf\",\n      \"label\": \"label-8222\",\n      \"height\": 71,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"dc27e94d-5809-4191-ba18-060d660ceebf\",\n      \"label\": \"label-8223\",\n      \"height\": 337,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"b2ab354e-3318-4c51-9898-147abe8d3472\",\n      \"label\": \"label-8224\",\n      \"height\": 173,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"96e460b7-c544-4b67-8e7f-f21597612cc3\",\n      \"label\": \"label-8225\",\n      \"height\": 481,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"46c95595-92df-4143-a926-e26f0097c76d\",\n      \"label\": \"label-8226\",\n      \"height\": 57,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"499e6e7e-4529-4ad2-b157-0678219f67fd\",\n      \"label\": \"label-8227\",\n      \"height\": 500,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"067de849-87be-44e8-b009-420d5b1dba33\",\n      \"label\": \"label-8228\",\n      \"height\": 175,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"68a47db5-cb73-436b-b3f8-bdfd728cd784\",\n      \"label\": \"label-8229\",\n      \"height\": 178,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"972d0043-6c42-4b42-8b68-db620e947c64\",\n      \"label\": \"label-8230\",\n      \"height\": 94,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"f0e2e526-2e60-4a7c-a027-9cf18299f94b\",\n      \"label\": \"label-8231\",\n      \"height\": 250,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"3d5387f7-765d-40bb-a6d0-c696f8e9141e\",\n      \"label\": \"label-8232\",\n      \"height\": 301,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"2f118d11-b421-4acf-bd39-337cd850c9b8\",\n      \"label\": \"label-8233\",\n      \"height\": 506,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"965dac23-239f-4d78-80db-5510e304abbd\",\n      \"label\": \"label-8234\",\n      \"height\": 122,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"6f9567b6-d515-4532-be5b-034babf73b97\",\n      \"label\": \"label-8235\",\n      \"height\": 492,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"07cdc890-e24c-4bc8-9bf1-76fe0e8a67ab\",\n      \"label\": \"label-8236\",\n      \"height\": 424,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"193d8146-4449-4261-9000-db2b238d081c\",\n      \"label\": \"label-8237\",\n      \"height\": 528,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"ecd47ee8-915a-4383-8c46-88bacab1f717\",\n      \"label\": \"label-8238\",\n      \"height\": 215,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"f2e44ba3-852c-42cd-ab38-65e20138b164\",\n      \"label\": \"label-8239\",\n      \"height\": 165,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"86716200-d60d-4ed2-a12e-3816e7fc7a13\",\n      \"label\": \"label-8240\",\n      \"height\": 171,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"0ed006e6-f332-4efb-8c72-8922699458e2\",\n      \"label\": \"label-8241\",\n      \"height\": 232,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"f2641208-cdcc-4268-960a-a26588f8ed20\",\n      \"label\": \"label-8242\",\n      \"height\": 405,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"b8baab9f-dbd6-486a-932b-9d04f8239e54\",\n      \"label\": \"label-8243\",\n      \"height\": 403,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"64702767-c09d-4d8b-b202-abfe9db3e3b6\",\n      \"label\": \"label-8244\",\n      \"height\": 453,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"3c72dd3a-f75b-48aa-a8bf-bb8811893a2a\",\n      \"label\": \"label-8245\",\n      \"height\": 440,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"51c9a13b-7d4a-4f21-b8e5-872fd8388824\",\n      \"label\": \"label-8246\",\n      \"height\": 397,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"0033327f-d0b1-4449-8145-a728ef1ef00f\",\n      \"label\": \"label-8247\",\n      \"height\": 269,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"9582c3cc-019f-4fa1-927b-0cf91b3063f5\",\n      \"label\": \"label-8248\",\n      \"height\": 109,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"13b5bc12-68bd-4f25-b485-9a6069d4fbd0\",\n      \"label\": \"label-8249\",\n      \"height\": 85,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"adff9d56-942c-454e-9d22-3cdbbb857987\",\n      \"label\": \"label-8250\",\n      \"height\": 165,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"80fcf4d3-2129-4763-8218-78a2416a5e60\",\n      \"label\": \"label-8251\",\n      \"height\": 441,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"f7268c59-ea9a-44e4-aa32-0ae2aaba67be\",\n      \"label\": \"label-8252\",\n      \"height\": 152,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"1983c6b1-4440-4b22-85a4-deb8b58e03e6\",\n      \"label\": \"label-8253\",\n      \"height\": 178,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"a62dcc3f-2c6e-4151-b176-8a628dc3ffe1\",\n      \"label\": \"label-8254\",\n      \"height\": 200,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"d5456e62-9972-485d-8891-cc7ba83cacc3\",\n      \"label\": \"label-8255\",\n      \"height\": 335,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"656eb2c8-398f-44f3-9bcc-14ee98bb10b8\",\n      \"label\": \"label-8256\",\n      \"height\": 194,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"af9ed4c7-3a6a-48a8-949e-e6d4e2936039\",\n      \"label\": \"label-8257\",\n      \"height\": 429,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"5dad7427-51ea-4b0c-a84a-d43e7d5f2d79\",\n      \"label\": \"label-8258\",\n      \"height\": 234,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"82952a3d-e5ec-4064-88f0-534f75ba5bde\",\n      \"label\": \"label-8259\",\n      \"height\": 300,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"38d24f1e-b056-4912-b244-0e10fb8dd731\",\n      \"label\": \"label-8260\",\n      \"height\": 236,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"9addaabf-408b-4f9e-8b27-ef035e22adb1\",\n      \"label\": \"label-8261\",\n      \"height\": 381,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"061506a4-9ac7-479e-b92c-7a057694e3b9\",\n      \"label\": \"label-8262\",\n      \"height\": 273,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"4de11edc-be5f-4fe4-a5c8-e477d550f8f4\",\n      \"label\": \"label-8263\",\n      \"height\": 101,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"ad496051-f707-49e5-9e6d-b03e4f9c944f\",\n      \"label\": \"label-8264\",\n      \"height\": 530,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"8ba985b8-6474-4473-9c20-d2288a099a11\",\n      \"label\": \"label-8265\",\n      \"height\": 35,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"bc8c75ae-2bb5-4d84-bab8-517bc6e192e6\",\n      \"label\": \"label-8266\",\n      \"height\": 380,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"824e1b35-98e1-4c76-bfdc-29ab3db1b850\",\n      \"label\": \"label-8267\",\n      \"height\": 313,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"2e670361-91c1-46e8-a9f6-c5f2b03b50d1\",\n      \"label\": \"label-8268\",\n      \"height\": 368,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"45f8c63d-5b5f-4266-a0df-df9505c8515f\",\n      \"label\": \"label-8269\",\n      \"height\": 155,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"eb765b2e-7237-44e2-96a4-da1eee2783d9\",\n      \"label\": \"label-8270\",\n      \"height\": 364,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"198d8bdb-8c0b-4300-9abe-5a5ad56e586f\",\n      \"label\": \"label-8271\",\n      \"height\": 512,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"872a6aa4-f5a4-43e1-84a8-399d42f28335\",\n      \"label\": \"label-8272\",\n      \"height\": 278,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"ae57a14e-504c-4d39-95e4-56dc1763610d\",\n      \"label\": \"label-8273\",\n      \"height\": 367,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"1729cb5d-74ec-4dac-a677-4c0cac975d2c\",\n      \"label\": \"label-8274\",\n      \"height\": 77,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"c004a7f6-0f73-4df7-9d88-721c3916c70a\",\n      \"label\": \"label-8275\",\n      \"height\": 417,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"7d0ff908-6243-4b88-b650-a014564a3337\",\n      \"label\": \"label-8276\",\n      \"height\": 527,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"5ca93aa5-fef8-4f36-a454-e0ffef933f1c\",\n      \"label\": \"label-8277\",\n      \"height\": 476,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"80e6576b-d407-4774-bb7f-19551e218f79\",\n      \"label\": \"label-8278\",\n      \"height\": 67,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"fd9a882a-285d-47c6-8825-183bc8de84be\",\n      \"label\": \"label-8279\",\n      \"height\": 420,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"735544d3-29bf-4dc6-98c6-f2b9a1959da9\",\n      \"label\": \"label-8280\",\n      \"height\": 117,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"2658c01e-159a-4a46-af66-ad9e776f586a\",\n      \"label\": \"label-8281\",\n      \"height\": 268,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"3d142742-b9cf-469b-bd5c-136060cb7b70\",\n      \"label\": \"label-8282\",\n      \"height\": 143,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"4818e260-f6c1-40ce-8665-7218f06ab3fd\",\n      \"label\": \"label-8283\",\n      \"height\": 409,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"61c984a8-5b73-4c68-8b09-1be2a3508c4b\",\n      \"label\": \"label-8284\",\n      \"height\": 141,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"bfa71edf-ef33-42f0-84f7-0c86555cc35d\",\n      \"label\": \"label-8285\",\n      \"height\": 88,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"27ab405a-5b45-4e21-acb5-dcd13eaf800c\",\n      \"label\": \"label-8286\",\n      \"height\": 70,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"dc78d66e-5e47-4a5b-9fe0-7a19f3476e3a\",\n      \"label\": \"label-8287\",\n      \"height\": 432,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"181b7b5e-e2ce-4600-887a-afe85d1881bd\",\n      \"label\": \"label-8288\",\n      \"height\": 190,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"13894497-872e-4eeb-829d-51b73cf889a9\",\n      \"label\": \"label-8289\",\n      \"height\": 445,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"b078a8d9-233f-4f0c-9f46-24fc593f56e5\",\n      \"label\": \"label-8290\",\n      \"height\": 455,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"7f8230f4-b213-4205-8fcd-b8d419555f7b\",\n      \"label\": \"label-8291\",\n      \"height\": 258,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"cdeb1887-c398-4089-bb8e-a196082bb077\",\n      \"label\": \"label-8292\",\n      \"height\": 261,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"ec87687c-e95e-4c79-a60a-eac1cf693c43\",\n      \"label\": \"label-8293\",\n      \"height\": 380,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"4b84bb52-655e-4977-a4e5-24780cf9d143\",\n      \"label\": \"label-8294\",\n      \"height\": 512,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"2dcb1ab9-1e5e-41b3-aff0-9e2aaf490bab\",\n      \"label\": \"label-8295\",\n      \"height\": 39,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"03353140-2e90-4a39-8385-54032e0b7570\",\n      \"label\": \"label-8296\",\n      \"height\": 430,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"1436b03c-73c9-480f-9da3-a7c560e99106\",\n      \"label\": \"label-8297\",\n      \"height\": 315,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"a467cf61-2e69-40de-921b-5dcd1ae82bac\",\n      \"label\": \"label-8298\",\n      \"height\": 152,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"d02dfac6-05ce-46ea-9149-50106cfb1bf0\",\n      \"label\": \"label-8299\",\n      \"height\": 271,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"ba95fee6-ca4d-4678-92b0-fe3973e76c0d\",\n      \"label\": \"label-8300\",\n      \"height\": 124,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"054bae24-f7a2-4feb-ab57-1ef6959337ea\",\n      \"label\": \"label-8301\",\n      \"height\": 194,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"81a2cfb5-7c6c-46fc-9369-6878fbd9738d\",\n      \"label\": \"label-8302\",\n      \"height\": 205,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"f15682b0-8b51-415d-a3ec-817214c1cf53\",\n      \"label\": \"label-8303\",\n      \"height\": 343,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"aeaa7e59-2cc1-49ff-ab55-6e51dc45b6a9\",\n      \"label\": \"label-8304\",\n      \"height\": 109,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"37d03c32-498c-4ae8-8fd6-3d7ecf6cff4e\",\n      \"label\": \"label-8305\",\n      \"height\": 426,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"46616e31-9e7d-460d-bca5-13f8abcecf10\",\n      \"label\": \"label-8306\",\n      \"height\": 398,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"b03e1046-007d-4691-83fa-26525e28874b\",\n      \"label\": \"label-8307\",\n      \"height\": 210,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"3de31294-f44b-4d39-b147-c42b70cf802f\",\n      \"label\": \"label-8308\",\n      \"height\": 191,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"d0ddb79c-b77f-4cbc-97bf-ce78b30579e6\",\n      \"label\": \"label-8309\",\n      \"height\": 363,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"d7ed9809-2c1a-43ce-804a-8c6f12f226fe\",\n      \"label\": \"label-8310\",\n      \"height\": 33,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"ae1b2b6b-9014-41d6-ae09-681392eb230d\",\n      \"label\": \"label-8311\",\n      \"height\": 70,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"96261fb1-1490-4b20-b03f-afe98bb72b35\",\n      \"label\": \"label-8312\",\n      \"height\": 167,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"a5e07ecf-f213-4ab6-9d91-3eebcb9d9ea4\",\n      \"label\": \"label-8313\",\n      \"height\": 521,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"04c7297a-a2bc-4192-8837-fbffb5b66c07\",\n      \"label\": \"label-8314\",\n      \"height\": 192,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"5c777d2d-b165-4ce9-b9e2-2d3cb8230fd8\",\n      \"label\": \"label-8315\",\n      \"height\": 262,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"82c900a9-0686-4880-8963-bce84da61cd9\",\n      \"label\": \"label-8316\",\n      \"height\": 118,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"59d78c9d-c442-48fb-8d40-6c71a5e5c2a0\",\n      \"label\": \"label-8317\",\n      \"height\": 370,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"1c70ecec-0015-495b-9d55-10a0e6412f03\",\n      \"label\": \"label-8318\",\n      \"height\": 530,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"76559426-495b-415c-b1c9-84887a1f419b\",\n      \"label\": \"label-8319\",\n      \"height\": 294,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"a80dc934-1ffa-4893-bc51-c8266857ef9e\",\n      \"label\": \"label-8320\",\n      \"height\": 258,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"7c07bd4b-8d79-47bd-8af0-7dbccdf70456\",\n      \"label\": \"label-8321\",\n      \"height\": 160,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"46f488be-58ee-4e8c-b57c-c8c2cb25eb68\",\n      \"label\": \"label-8322\",\n      \"height\": 517,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"c5698692-7dba-4a66-b41f-4a6ceaa80456\",\n      \"label\": \"label-8323\",\n      \"height\": 485,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"3e5ab31a-d777-441b-9d3c-b02caab181ed\",\n      \"label\": \"label-8324\",\n      \"height\": 170,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"175f28d6-5272-4201-a44c-4fb426b93a6a\",\n      \"label\": \"label-8325\",\n      \"height\": 80,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"aeccf805-1a52-49ee-89f5-9cc48d8464b9\",\n      \"label\": \"label-8326\",\n      \"height\": 448,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"5c7da110-f5d3-4619-bfc3-2bbb9076a3ce\",\n      \"label\": \"label-8327\",\n      \"height\": 337,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"320de35c-6035-4be3-b08f-153692f7b41c\",\n      \"label\": \"label-8328\",\n      \"height\": 476,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"81525a7c-47a7-4d26-a942-129b1ea0888d\",\n      \"label\": \"label-8329\",\n      \"height\": 95,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"5fa77502-913d-4faa-8d7a-3165a7f5e8e7\",\n      \"label\": \"label-8330\",\n      \"height\": 38,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"565171be-3765-4a0e-a274-60c498614bef\",\n      \"label\": \"label-8331\",\n      \"height\": 515,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"cf5b1f8e-b821-4837-b538-3504dccba1c5\",\n      \"label\": \"label-8332\",\n      \"height\": 415,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"3b635bf3-7d72-4029-937e-4df8425af991\",\n      \"label\": \"label-8333\",\n      \"height\": 200,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"2974e655-fcd2-4fc0-b199-3363bbb008fc\",\n      \"label\": \"label-8334\",\n      \"height\": 140,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"b2b1d4dd-8aba-4075-be82-bd14df04663a\",\n      \"label\": \"label-8335\",\n      \"height\": 326,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"a0a18e7f-67de-4d83-a9f4-1c507b19e24a\",\n      \"label\": \"label-8336\",\n      \"height\": 410,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"f071279a-207d-47e8-a07d-2ac5491d1284\",\n      \"label\": \"label-8337\",\n      \"height\": 388,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"e5ea55ce-9be3-4647-86d5-bf5189f29879\",\n      \"label\": \"label-8338\",\n      \"height\": 326,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"f9c61281-cf1b-4385-9a19-bc32fde8c29d\",\n      \"label\": \"label-8339\",\n      \"height\": 297,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"827709c4-f3c7-446a-a923-c21585dd4ce2\",\n      \"label\": \"label-8340\",\n      \"height\": 382,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"b3e26868-1798-4e7e-9348-6a2dba6c9c04\",\n      \"label\": \"label-8341\",\n      \"height\": 425,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"87448592-7fbd-4cbc-b35e-15dc3980d591\",\n      \"label\": \"label-8342\",\n      \"height\": 461,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"fca5c64e-e1cd-44aa-abce-ab77b8d23704\",\n      \"label\": \"label-8343\",\n      \"height\": 418,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"1e5bcca3-09e3-422f-bf07-1d49916ec343\",\n      \"label\": \"label-8344\",\n      \"height\": 237,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"fd9c5db9-d0f8-4c5d-a1f4-0cff3b1451a0\",\n      \"label\": \"label-8345\",\n      \"height\": 33,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"389308dd-bb69-45a5-9309-6bd77570d865\",\n      \"label\": \"label-8346\",\n      \"height\": 426,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"18b73b54-763a-47cf-bda5-da36fe849700\",\n      \"label\": \"label-8347\",\n      \"height\": 409,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"1e91d34f-8e40-4e2d-8046-010e3a8f42aa\",\n      \"label\": \"label-8348\",\n      \"height\": 443,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"c8b119d7-e635-40e3-80a4-2ef2c278c132\",\n      \"label\": \"label-8349\",\n      \"height\": 298,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"e54e6051-8e64-4387-8922-d8bc54f2834a\",\n      \"label\": \"label-8350\",\n      \"height\": 165,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"5bff392a-3f48-487a-992f-30325f0ed808\",\n      \"label\": \"label-8351\",\n      \"height\": 231,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"2196d61d-6ce7-43da-a967-f72f5455dc34\",\n      \"label\": \"label-8352\",\n      \"height\": 461,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"f72afa41-3847-493b-b34a-085108cb99fd\",\n      \"label\": \"label-8353\",\n      \"height\": 146,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"1cd2632c-73f6-4054-9dfd-eb98e3e4495e\",\n      \"label\": \"label-8354\",\n      \"height\": 428,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"590a81f6-b691-4f59-a911-aec42424afbb\",\n      \"label\": \"label-8355\",\n      \"height\": 370,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"ae013f8a-cdb6-48a9-b460-7c1f75c7af57\",\n      \"label\": \"label-8356\",\n      \"height\": 362,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"2150f8e3-b181-4b41-a1da-81b8ae1a728a\",\n      \"label\": \"label-8357\",\n      \"height\": 491,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"019bc8e9-65c5-4fd1-9f2e-416ae1af3dee\",\n      \"label\": \"label-8358\",\n      \"height\": 475,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"fdbab4cc-2ab7-46f2-8259-dcacfc004dcf\",\n      \"label\": \"label-8359\",\n      \"height\": 50,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"de1bab02-8c12-4278-bd8d-3a072d55ca94\",\n      \"label\": \"label-8360\",\n      \"height\": 288,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"c796dc19-fc93-4c02-a076-2a36d656662c\",\n      \"label\": \"label-8361\",\n      \"height\": 412,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"e7bd07fe-6a49-4990-9cb3-26735f6d2ff7\",\n      \"label\": \"label-8362\",\n      \"height\": 379,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"04817ead-22fc-48aa-afa6-b20b25816821\",\n      \"label\": \"label-8363\",\n      \"height\": 87,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"46f684f6-2eb9-4dab-9af5-96fb8f2ee073\",\n      \"label\": \"label-8364\",\n      \"height\": 55,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"f9fb188a-09fe-4177-8dd1-7c578831e101\",\n      \"label\": \"label-8365\",\n      \"height\": 69,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"37f697c5-78a2-4289-bd51-b7363a41d866\",\n      \"label\": \"label-8366\",\n      \"height\": 457,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"b816d7d8-eef1-4cba-ab9c-353bd06ee7e7\",\n      \"label\": \"label-8367\",\n      \"height\": 410,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"23b6c602-01c8-41b1-9bbd-67660c5e62da\",\n      \"label\": \"label-8368\",\n      \"height\": 220,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"b4e6dd32-6fb4-4526-b332-54ef0cc09dda\",\n      \"label\": \"label-8369\",\n      \"height\": 410,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"d0be9714-5b2e-4917-8f59-6fba9dc664f8\",\n      \"label\": \"label-8370\",\n      \"height\": 154,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"90b7e7fb-f6fd-4879-b3e9-72ac64033c4e\",\n      \"label\": \"label-8371\",\n      \"height\": 75,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"07abc0d6-6bcb-4768-bdab-57de74206f39\",\n      \"label\": \"label-8372\",\n      \"height\": 442,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"e8fcfe0f-e5b5-4e61-b8b0-98f640e1b617\",\n      \"label\": \"label-8373\",\n      \"height\": 239,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"8e58e043-7ca9-4e44-b421-32cba34fc5c8\",\n      \"label\": \"label-8374\",\n      \"height\": 320,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"0db8320b-af5c-4420-894f-7fae69321d10\",\n      \"label\": \"label-8375\",\n      \"height\": 296,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"579d5054-5031-4757-a5a1-538403c6b978\",\n      \"label\": \"label-8376\",\n      \"height\": 157,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"9df9a6ee-2720-4b53-ab9d-1e8f9578dbbc\",\n      \"label\": \"label-8377\",\n      \"height\": 380,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"78e154d8-389d-4f05-b0bf-b2f21860c9c1\",\n      \"label\": \"label-8378\",\n      \"height\": 463,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"2330279d-704a-4cdf-902b-2687b299222f\",\n      \"label\": \"label-8379\",\n      \"height\": 94,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"0f956cf7-aec4-4ecc-906e-1416d8bbad8c\",\n      \"label\": \"label-8380\",\n      \"height\": 440,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"52519852-59a4-442a-ab44-81ef10381848\",\n      \"label\": \"label-8381\",\n      \"height\": 420,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"540698b4-6970-47e7-802b-f4daf1dd2778\",\n      \"label\": \"label-8382\",\n      \"height\": 142,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"cc597511-7ee6-4989-ab36-a5c7264e3c56\",\n      \"label\": \"label-8383\",\n      \"height\": 346,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"87ee2c3a-30a4-4980-b506-9fe55cfc677d\",\n      \"label\": \"label-8384\",\n      \"height\": 38,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"43e65976-4a9a-4681-af4d-72a8861c461c\",\n      \"label\": \"label-8385\",\n      \"height\": 338,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"8b82409e-452b-4ab8-a510-36d66179b555\",\n      \"label\": \"label-8386\",\n      \"height\": 230,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"8e2aa5ce-9d1a-49ce-8c38-4fdc33a3ee61\",\n      \"label\": \"label-8387\",\n      \"height\": 209,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"e1acfcb3-34b3-4186-8949-670357aea45c\",\n      \"label\": \"label-8388\",\n      \"height\": 41,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"1281ba69-e526-4453-89b3-c1242f65e2b8\",\n      \"label\": \"label-8389\",\n      \"height\": 107,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"0092f1b7-0dda-4aed-812c-9a46852fbb16\",\n      \"label\": \"label-8390\",\n      \"height\": 338,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"a6e94e8f-e5ce-433b-98ed-0492df0d4fc5\",\n      \"label\": \"label-8391\",\n      \"height\": 448,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"7c53f2a2-a412-4d63-b94a-99597102ff4a\",\n      \"label\": \"label-8392\",\n      \"height\": 216,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"afec2bc7-0f40-4f83-8894-906bb81bddcc\",\n      \"label\": \"label-8393\",\n      \"height\": 426,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"d5606490-6dda-4f07-825f-3dcb8fc92a6d\",\n      \"label\": \"label-8394\",\n      \"height\": 409,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"de136f51-3381-4234-ba51-60c796210f09\",\n      \"label\": \"label-8395\",\n      \"height\": 290,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"4a73f1be-5362-4112-8886-434c4d1501d1\",\n      \"label\": \"label-8396\",\n      \"height\": 413,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"a42ca8ba-0a88-4b9e-93dc-ade921b6371e\",\n      \"label\": \"label-8397\",\n      \"height\": 483,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"2ccb8139-4e81-4086-9706-17d373973572\",\n      \"label\": \"label-8398\",\n      \"height\": 478,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"ac434847-6545-4238-b845-5f7dde0381ec\",\n      \"label\": \"label-8399\",\n      \"height\": 519,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"ffd30a7e-f7c3-4dbc-aaa9-f3c53d1d6b7f\",\n      \"label\": \"label-8400\",\n      \"height\": 472,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"082923cf-99f2-4b6c-840e-4178eb7caf53\",\n      \"label\": \"label-8401\",\n      \"height\": 122,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"497864cf-e739-4cf6-ab92-8b25aa75010a\",\n      \"label\": \"label-8402\",\n      \"height\": 37,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"1b759ed5-435c-4201-99f1-37aceaa20813\",\n      \"label\": \"label-8403\",\n      \"height\": 477,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"6a2dda10-6e23-4dea-990d-b8b1284f26b6\",\n      \"label\": \"label-8404\",\n      \"height\": 191,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"c3195b6a-a2cd-4467-866e-f0b49ff97cb4\",\n      \"label\": \"label-8405\",\n      \"height\": 193,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"acd1255a-64ad-424f-8d19-79c5a78336cb\",\n      \"label\": \"label-8406\",\n      \"height\": 37,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"fdb08b53-759b-463f-ac21-65d5923686e2\",\n      \"label\": \"label-8407\",\n      \"height\": 291,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"6be0d54d-729b-4482-99bc-0b3853efc52c\",\n      \"label\": \"label-8408\",\n      \"height\": 376,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"8e3e437d-3e57-4e53-b36b-1e11c8aa81ad\",\n      \"label\": \"label-8409\",\n      \"height\": 293,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"952b1180-e7fb-4b4a-9e4b-2618e860c67d\",\n      \"label\": \"label-8410\",\n      \"height\": 202,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"2b456898-3eed-4d7a-ba98-f78e179836dd\",\n      \"label\": \"label-8411\",\n      \"height\": 442,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"ca58574b-ae69-42d1-b92e-60e37e029e7a\",\n      \"label\": \"label-8412\",\n      \"height\": 403,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"b4201d5b-1edc-4680-8500-a99d6e8f71f3\",\n      \"label\": \"label-8413\",\n      \"height\": 300,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"5d626b7b-92b7-4ca0-ab2c-7b6926f1dca9\",\n      \"label\": \"label-8414\",\n      \"height\": 514,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"9d14f624-4bef-4e3e-8f85-6e3b87cb0cb3\",\n      \"label\": \"label-8415\",\n      \"height\": 136,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"de574e17-d0ea-4cde-8bfd-b3099e2aa8fa\",\n      \"label\": \"label-8416\",\n      \"height\": 79,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"dd14c033-7801-475b-9b66-a290d53244f4\",\n      \"label\": \"label-8417\",\n      \"height\": 336,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"cba7dbb9-7b6a-4639-877b-3a7da2a0b0ba\",\n      \"label\": \"label-8418\",\n      \"height\": 57,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"dcd33923-5c87-4f03-99f2-72489e5aa60d\",\n      \"label\": \"label-8419\",\n      \"height\": 259,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"de145116-a60d-4de2-b61b-35e66567ad04\",\n      \"label\": \"label-8420\",\n      \"height\": 527,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"838d9b57-4e28-41a0-bdac-89f20a668466\",\n      \"label\": \"label-8421\",\n      \"height\": 478,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"eef7082d-96d8-4832-bd8d-e2673a1a672d\",\n      \"label\": \"label-8422\",\n      \"height\": 111,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"c0d255e5-7ca8-4e18-ab44-61de0e3b581c\",\n      \"label\": \"label-8423\",\n      \"height\": 377,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"05b07640-d2f8-41e4-838f-6ff377c08fa7\",\n      \"label\": \"label-8424\",\n      \"height\": 46,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"b07ecba8-d389-4d8f-9604-3457281c190c\",\n      \"label\": \"label-8425\",\n      \"height\": 281,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"a53466dd-1679-4a41-89df-071817fdb72a\",\n      \"label\": \"label-8426\",\n      \"height\": 118,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"c8f17eaf-a27d-4aee-99de-aa64168f2172\",\n      \"label\": \"label-8427\",\n      \"height\": 102,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"a368c3ba-a8e3-4ec8-ba57-5d05b13bd562\",\n      \"label\": \"label-8428\",\n      \"height\": 423,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"bf5b737e-aab8-443c-9ba3-76c3db082ef1\",\n      \"label\": \"label-8429\",\n      \"height\": 379,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"4627636f-c74a-45ca-a1a3-f4f2fbfa3087\",\n      \"label\": \"label-8430\",\n      \"height\": 97,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"a9d35d26-967d-4e51-b981-38d6082f7e15\",\n      \"label\": \"label-8431\",\n      \"height\": 50,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"c04e53ee-b823-4cf2-8461-6426af601db3\",\n      \"label\": \"label-8432\",\n      \"height\": 518,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"68072c8a-e3de-4f8c-9df5-9f22dc81b598\",\n      \"label\": \"label-8433\",\n      \"height\": 373,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"3caaeb6f-f9d9-4546-af54-a56c0776303c\",\n      \"label\": \"label-8434\",\n      \"height\": 424,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"79a8c8e8-4b0f-4558-b2d8-477a571c234b\",\n      \"label\": \"label-8435\",\n      \"height\": 260,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"7f33bf9d-9ee4-47cd-9a1b-0e7e46bc40af\",\n      \"label\": \"label-8436\",\n      \"height\": 318,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"4c91c98a-f7d6-4c4b-8cd2-52d8c097fd47\",\n      \"label\": \"label-8437\",\n      \"height\": 504,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"a858d975-21ba-400a-8e7c-89ebaad0044b\",\n      \"label\": \"label-8438\",\n      \"height\": 376,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"b9f6f5c7-be4d-465a-b67b-5b502eb1f0db\",\n      \"label\": \"label-8439\",\n      \"height\": 439,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"f75ff869-efb0-413a-b9d0-d65363b6c388\",\n      \"label\": \"label-8440\",\n      \"height\": 320,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"0c17d458-91aa-4a03-b28e-74c4732393eb\",\n      \"label\": \"label-8441\",\n      \"height\": 277,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"def4695b-2f53-4e76-af50-45261e190201\",\n      \"label\": \"label-8442\",\n      \"height\": 466,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"086e131d-9df2-4b86-b249-4a028f6ee905\",\n      \"label\": \"label-8443\",\n      \"height\": 232,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"1270c75d-2c9b-4e82-8a16-a3b8bd632c92\",\n      \"label\": \"label-8444\",\n      \"height\": 454,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"9e1d9096-ef2a-445a-98b8-dc5d4dd3aab5\",\n      \"label\": \"label-8445\",\n      \"height\": 495,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"9ed7ebed-2993-486c-a072-dbb773cbda59\",\n      \"label\": \"label-8446\",\n      \"height\": 115,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"c0167d1b-a776-4a03-9960-7034ab85e712\",\n      \"label\": \"label-8447\",\n      \"height\": 249,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"c1f502d0-b69b-41e0-a8a9-14205c3d45c9\",\n      \"label\": \"label-8448\",\n      \"height\": 259,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"efa42348-1669-4475-8c50-af07c44d2b2b\",\n      \"label\": \"label-8449\",\n      \"height\": 159,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"89b80b99-e7da-4eb0-aa4c-0b3b10e6c23c\",\n      \"label\": \"label-8450\",\n      \"height\": 434,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"6d4ebf9d-ecc9-4303-9b54-4b7d06d5edb7\",\n      \"label\": \"label-8451\",\n      \"height\": 237,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"1f5b7514-849f-4b85-87f2-33f305a3f0e6\",\n      \"label\": \"label-8452\",\n      \"height\": 441,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"52ff4400-f6de-46d0-a5b3-5725d11434b9\",\n      \"label\": \"label-8453\",\n      \"height\": 496,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"b41f34bc-7bd2-40f0-b3d6-e48c4c2edded\",\n      \"label\": \"label-8454\",\n      \"height\": 435,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"02564ad2-6667-461a-884e-d480ae315af5\",\n      \"label\": \"label-8455\",\n      \"height\": 397,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"82ce6f84-0e53-4f41-8f70-662fe894bef7\",\n      \"label\": \"label-8456\",\n      \"height\": 100,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"27ebc797-e4b4-4353-84d0-70a1ba9ae02e\",\n      \"label\": \"label-8457\",\n      \"height\": 272,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"10866abc-e353-4257-b7ae-f67c44399fa4\",\n      \"label\": \"label-8458\",\n      \"height\": 266,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"aec40dad-0197-45d0-85a1-31a891c10299\",\n      \"label\": \"label-8459\",\n      \"height\": 200,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"c2bff126-bdbb-4761-bfca-af6ef3a6f385\",\n      \"label\": \"label-8460\",\n      \"height\": 219,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"d5899870-369f-463c-aeb5-bea84774aee3\",\n      \"label\": \"label-8461\",\n      \"height\": 154,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"6c172ae6-fe89-4094-9619-b049c175be7e\",\n      \"label\": \"label-8462\",\n      \"height\": 272,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"505d063c-0bde-464b-9ad2-93d765df0541\",\n      \"label\": \"label-8463\",\n      \"height\": 487,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"f6a66286-f930-4ddc-9888-8daf1bb655b5\",\n      \"label\": \"label-8464\",\n      \"height\": 59,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"f5aae3e6-03ad-406f-a156-c6469cfc1119\",\n      \"label\": \"label-8465\",\n      \"height\": 63,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"6740648f-87f9-4d23-9932-632d29643177\",\n      \"label\": \"label-8466\",\n      \"height\": 67,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"aab1bd43-bb9e-4492-ad16-4018f38874a6\",\n      \"label\": \"label-8467\",\n      \"height\": 156,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"84548672-bf53-4279-ae9c-61ee061d7927\",\n      \"label\": \"label-8468\",\n      \"height\": 145,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"1b917ac5-8300-4b0a-b86b-ca04440ace6e\",\n      \"label\": \"label-8469\",\n      \"height\": 57,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"d9c06c0a-2803-4d39-9112-b655ac1adf5b\",\n      \"label\": \"label-8470\",\n      \"height\": 180,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"ca09ee30-2a7a-4414-acdb-95036a85735c\",\n      \"label\": \"label-8471\",\n      \"height\": 363,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"b66948aa-2ce1-41e6-b72a-e86653072d5a\",\n      \"label\": \"label-8472\",\n      \"height\": 478,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"b91f0f86-b8d1-4d57-bd5a-15fbc5bc39af\",\n      \"label\": \"label-8473\",\n      \"height\": 40,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"0edee14f-5d95-4e04-beb4-b31e22f44f27\",\n      \"label\": \"label-8474\",\n      \"height\": 458,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"65025482-0e8d-4cd8-80a2-a5f125fbb65f\",\n      \"label\": \"label-8475\",\n      \"height\": 151,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"161c5eb8-45eb-4298-80b4-7a1b0ddf93af\",\n      \"label\": \"label-8476\",\n      \"height\": 279,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"e126fb05-8ee6-48ab-8a4c-85d81d538155\",\n      \"label\": \"label-8477\",\n      \"height\": 265,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"a10d3aaf-1f58-4181-acbb-ec7e50659e83\",\n      \"label\": \"label-8478\",\n      \"height\": 62,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"7d9847fa-48a1-4810-953e-944b5480e0ae\",\n      \"label\": \"label-8479\",\n      \"height\": 60,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"f94a6126-0b37-47ea-bb61-8e2d22437b38\",\n      \"label\": \"label-8480\",\n      \"height\": 274,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"ecad9ff4-82aa-4163-aaab-880fd7c2e355\",\n      \"label\": \"label-8481\",\n      \"height\": 246,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"e689c346-e165-45d1-a24c-b8346318bc25\",\n      \"label\": \"label-8482\",\n      \"height\": 489,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"74c0e5b3-cc77-4597-bcb0-76deef679893\",\n      \"label\": \"label-8483\",\n      \"height\": 442,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"eb78f7de-3c08-4084-8cc7-0a4029c5b573\",\n      \"label\": \"label-8484\",\n      \"height\": 300,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"f1decedb-d65e-4960-99b1-2d9589c7c7b4\",\n      \"label\": \"label-8485\",\n      \"height\": 248,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"c553967e-be7d-46e7-8387-669590a442ca\",\n      \"label\": \"label-8486\",\n      \"height\": 528,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"9e6cfbef-c6e0-404e-999c-580aa0ec0bdf\",\n      \"label\": \"label-8487\",\n      \"height\": 455,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"a64c3712-e178-4b60-85f6-af48f153c5b2\",\n      \"label\": \"label-8488\",\n      \"height\": 200,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"a0302464-312d-4320-84c9-d1c561adce5b\",\n      \"label\": \"label-8489\",\n      \"height\": 429,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"09a2a3a5-1c31-4b4d-8e54-9de6b6cf0e19\",\n      \"label\": \"label-8490\",\n      \"height\": 36,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"f17ac52d-70d4-4f94-b6e6-019cc9ea6ee3\",\n      \"label\": \"label-8491\",\n      \"height\": 514,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"be4a8415-e948-43d8-8a93-3491f6f548c5\",\n      \"label\": \"label-8492\",\n      \"height\": 62,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"9f59504a-57e9-4603-a106-3271c387b070\",\n      \"label\": \"label-8493\",\n      \"height\": 68,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"9690459c-e189-45f8-8256-e6c4edbc80ee\",\n      \"label\": \"label-8494\",\n      \"height\": 214,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"e6f6a948-da51-4bec-b77e-0342eb681730\",\n      \"label\": \"label-8495\",\n      \"height\": 240,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"2f7d55fe-3a44-42c6-a520-bf8b236b6c63\",\n      \"label\": \"label-8496\",\n      \"height\": 271,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"0337d34c-4458-4a14-a808-489ecdd2ef30\",\n      \"label\": \"label-8497\",\n      \"height\": 86,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"f305cfe6-02ed-45d8-9491-e367fe96a1a6\",\n      \"label\": \"label-8498\",\n      \"height\": 367,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"2a3a5a18-caed-45b6-a00b-6394c52934da\",\n      \"label\": \"label-8499\",\n      \"height\": 365,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"987b6cb2-7962-4a74-bd13-ba37dec47148\",\n      \"label\": \"label-8500\",\n      \"height\": 443,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"3a4dcf09-29ac-4cc1-b625-39461dc0ebc0\",\n      \"label\": \"label-8501\",\n      \"height\": 89,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"0d8a5ace-e1b8-437f-9590-e0c9143702c2\",\n      \"label\": \"label-8502\",\n      \"height\": 62,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"4c088d68-19d0-4a7f-babd-d791da23a0c6\",\n      \"label\": \"label-8503\",\n      \"height\": 311,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"5c7a93d7-b371-42d3-ae95-39cfdad2621e\",\n      \"label\": \"label-8504\",\n      \"height\": 315,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"a430aa2b-cc3f-4517-a27c-ab99bd7836f2\",\n      \"label\": \"label-8505\",\n      \"height\": 143,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"52406a9c-836e-44d4-9875-13f151feed6f\",\n      \"label\": \"label-8506\",\n      \"height\": 101,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"935b0030-1a39-45b9-a761-8300fb1cd2c7\",\n      \"label\": \"label-8507\",\n      \"height\": 518,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"ee0ea003-93bf-4ea3-83db-3b68c2fe3b89\",\n      \"label\": \"label-8508\",\n      \"height\": 45,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"1ef0339d-c910-4de8-be56-fbc9ea2d5aa7\",\n      \"label\": \"label-8509\",\n      \"height\": 420,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"699808b5-738f-4ba9-9c7f-94e002477468\",\n      \"label\": \"label-8510\",\n      \"height\": 235,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"c16309c0-4c7a-4ba1-a228-4dc9c4f4ba39\",\n      \"label\": \"label-8511\",\n      \"height\": 73,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"0940cc76-af5a-45f1-8796-a40fcbd20cca\",\n      \"label\": \"label-8512\",\n      \"height\": 251,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"808003c1-c36c-4cc4-a989-33b9352d2520\",\n      \"label\": \"label-8513\",\n      \"height\": 156,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"5e75a31f-aae2-4357-8841-7114026ef283\",\n      \"label\": \"label-8514\",\n      \"height\": 80,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"122a5928-adf0-4386-b306-d83a06898f06\",\n      \"label\": \"label-8515\",\n      \"height\": 332,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"772c2340-8809-4e22-a86d-c45ea16a0d01\",\n      \"label\": \"label-8516\",\n      \"height\": 414,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"3a448bc5-d62b-4f7c-81fc-7b6ec2b8ca0d\",\n      \"label\": \"label-8517\",\n      \"height\": 81,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"6d78880d-cfcf-48a8-8394-bc10e3142abb\",\n      \"label\": \"label-8518\",\n      \"height\": 177,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"355ff92a-3290-4f06-b47b-bf2f8c0443e4\",\n      \"label\": \"label-8519\",\n      \"height\": 462,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"5cf9098a-9a00-4108-8ba6-36291bd3d96c\",\n      \"label\": \"label-8520\",\n      \"height\": 370,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"3729e2f0-a4a7-4dc5-8558-1db0a32a7215\",\n      \"label\": \"label-8521\",\n      \"height\": 171,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"17b46779-d4f6-49b9-840f-188214b82fbb\",\n      \"label\": \"label-8522\",\n      \"height\": 250,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"08b34027-b522-4940-93a2-560be1f1b109\",\n      \"label\": \"label-8523\",\n      \"height\": 330,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"412370ee-1c52-4267-827b-d0a0209fda3d\",\n      \"label\": \"label-8524\",\n      \"height\": 522,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"92ab88b9-1936-4970-96c7-662a343586b1\",\n      \"label\": \"label-8525\",\n      \"height\": 382,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"5c77f156-eafb-4fe9-bd91-6945421a93ca\",\n      \"label\": \"label-8526\",\n      \"height\": 454,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"90e8e565-81b4-4d55-88dd-d876385eb66e\",\n      \"label\": \"label-8527\",\n      \"height\": 48,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"4bcb6fba-1e9f-45f0-b29a-61697c07a9b4\",\n      \"label\": \"label-8528\",\n      \"height\": 521,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"dc2ffac8-ae77-43d3-b345-21ad097f5674\",\n      \"label\": \"label-8529\",\n      \"height\": 409,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"e496a6c9-2ce4-4034-9b8d-61cdd00693f4\",\n      \"label\": \"label-8530\",\n      \"height\": 507,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"f26c725d-0bde-4c7e-b015-ea6641936f71\",\n      \"label\": \"label-8531\",\n      \"height\": 317,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"306c2167-f081-4e7b-b791-464bc6c4feec\",\n      \"label\": \"label-8532\",\n      \"height\": 305,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"808e258a-c81d-48df-9d62-45ea78341ef7\",\n      \"label\": \"label-8533\",\n      \"height\": 279,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"5e125761-5086-4e63-aeea-6b8ccc82dba9\",\n      \"label\": \"label-8534\",\n      \"height\": 440,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"a9109146-6ef2-4b8c-a50f-f4a84f4759be\",\n      \"label\": \"label-8535\",\n      \"height\": 496,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"ce570134-90fc-450f-9c4c-0204dea5fd3f\",\n      \"label\": \"label-8536\",\n      \"height\": 113,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"914c7d0e-56dc-49c8-bc14-61aa37a47ca6\",\n      \"label\": \"label-8537\",\n      \"height\": 230,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"d81940da-713a-4f29-9698-9553836f5abf\",\n      \"label\": \"label-8538\",\n      \"height\": 44,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"19ca0373-5818-4af3-a3cc-02741d637e81\",\n      \"label\": \"label-8539\",\n      \"height\": 499,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"4be7c0c7-3b1c-448b-91cb-577cad84a75f\",\n      \"label\": \"label-8540\",\n      \"height\": 77,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"15b72f6f-45ae-4a53-ac2e-17ec71305458\",\n      \"label\": \"label-8541\",\n      \"height\": 51,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"b165c763-f353-42ce-8991-9c2c950f622a\",\n      \"label\": \"label-8542\",\n      \"height\": 149,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"167b47ef-9add-4d87-a733-9c86dcec2d9d\",\n      \"label\": \"label-8543\",\n      \"height\": 386,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"82731c2e-4f0e-4f5d-9ca2-2cb82f8a65bd\",\n      \"label\": \"label-8544\",\n      \"height\": 85,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"4ab37f5c-c251-4ee6-9200-88730875ded6\",\n      \"label\": \"label-8545\",\n      \"height\": 255,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"b5f7e00e-0474-42bb-b05e-0be3cc80c191\",\n      \"label\": \"label-8546\",\n      \"height\": 487,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"68cc5bb1-9f5c-4bc7-9863-fc1cbae298ad\",\n      \"label\": \"label-8547\",\n      \"height\": 184,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"ec16b3b5-82de-4919-935f-76499f3af4c5\",\n      \"label\": \"label-8548\",\n      \"height\": 489,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"6d335c5d-1de8-4d92-88c5-1c9910a0e513\",\n      \"label\": \"label-8549\",\n      \"height\": 212,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"b2357343-4244-4fb4-b16c-4bef27b6b692\",\n      \"label\": \"label-8550\",\n      \"height\": 287,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"d9918a62-b768-434e-a20c-06c6cb3b3e4a\",\n      \"label\": \"label-8551\",\n      \"height\": 326,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"6643e279-43e2-4e94-9107-e1c2bce2c7f4\",\n      \"label\": \"label-8552\",\n      \"height\": 176,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"d5fe4d37-f3af-466f-abec-781c0fff27c4\",\n      \"label\": \"label-8553\",\n      \"height\": 78,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"1aea7dd6-982a-4233-a942-ee20c3520e89\",\n      \"label\": \"label-8554\",\n      \"height\": 465,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"6667af92-67ca-4fe8-a69a-f356442e16a1\",\n      \"label\": \"label-8555\",\n      \"height\": 80,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"6e288a36-e22a-479a-bc68-b1381366256f\",\n      \"label\": \"label-8556\",\n      \"height\": 214,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"aaea6d6a-c134-4904-98ec-4a34659cc105\",\n      \"label\": \"label-8557\",\n      \"height\": 444,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"dfe36541-7daf-4ffa-8bfc-a80fa748f6af\",\n      \"label\": \"label-8558\",\n      \"height\": 421,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"090564e2-a4f1-4e80-b657-e7c0cdef9a44\",\n      \"label\": \"label-8559\",\n      \"height\": 197,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"747158a3-e9ca-47a5-87aa-7bbf5ba04ecb\",\n      \"label\": \"label-8560\",\n      \"height\": 508,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"49b9ded2-63bc-4348-b99a-8ac4a733b7e3\",\n      \"label\": \"label-8561\",\n      \"height\": 291,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"9e4668ce-9d35-4f57-a9cf-11ff0f9dac5b\",\n      \"label\": \"label-8562\",\n      \"height\": 364,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"1cf3de72-915b-4306-822e-421b594efe1d\",\n      \"label\": \"label-8563\",\n      \"height\": 57,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"357b8f45-47a7-45bc-9799-7321705c7cdf\",\n      \"label\": \"label-8564\",\n      \"height\": 325,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"4b80a31f-8f11-4ea8-8e0c-bfe04a03eae7\",\n      \"label\": \"label-8565\",\n      \"height\": 171,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"9f838a4f-6fe5-4227-b336-40da86940d73\",\n      \"label\": \"label-8566\",\n      \"height\": 404,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"0c5b8e47-08c2-4350-9dda-6ca36e56877b\",\n      \"label\": \"label-8567\",\n      \"height\": 471,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"39cd7a55-0592-4ccf-bc23-adfd8506f0a1\",\n      \"label\": \"label-8568\",\n      \"height\": 307,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"7f116760-8e36-4b23-a9e6-26f9ceda9ef0\",\n      \"label\": \"label-8569\",\n      \"height\": 221,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"87282516-d43e-42da-9f46-59dd42b243c8\",\n      \"label\": \"label-8570\",\n      \"height\": 134,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"8b1f2160-dd37-463d-9e0c-add0c035ce57\",\n      \"label\": \"label-8571\",\n      \"height\": 235,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"f803c292-d36c-4aee-bc82-f7066d1f80eb\",\n      \"label\": \"label-8572\",\n      \"height\": 529,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"9adf2262-88cc-4034-ab0d-5f5d4eb06faa\",\n      \"label\": \"label-8573\",\n      \"height\": 447,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"7b1c5d24-a31d-4c71-8e08-d6e8a47f19c6\",\n      \"label\": \"label-8574\",\n      \"height\": 72,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"7964ac1d-3d28-412e-a065-d6e37c15a9a7\",\n      \"label\": \"label-8575\",\n      \"height\": 265,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"70036708-61b1-4381-a39a-ba370daefdcf\",\n      \"label\": \"label-8576\",\n      \"height\": 173,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"15d32da3-201d-410b-b35e-e3af55d40272\",\n      \"label\": \"label-8577\",\n      \"height\": 295,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"dbe874c3-4de1-4c1f-ac5a-6d53b168722c\",\n      \"label\": \"label-8578\",\n      \"height\": 67,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"f3477627-c81d-4c25-a32f-b0d859a85b9f\",\n      \"label\": \"label-8579\",\n      \"height\": 183,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"b43d8ca0-d7ad-4e1c-9ce1-36c4efcbebb4\",\n      \"label\": \"label-8580\",\n      \"height\": 183,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"fe8db70e-f230-4a95-a84d-7218a7a42198\",\n      \"label\": \"label-8581\",\n      \"height\": 62,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"17bb0bb0-2a99-4df7-868a-722b743c421c\",\n      \"label\": \"label-8582\",\n      \"height\": 425,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"a2002d4e-9d1b-4f29-a91f-a94be1462bad\",\n      \"label\": \"label-8583\",\n      \"height\": 341,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"068911bb-f691-4f59-bfdd-0a8c8c51d7c9\",\n      \"label\": \"label-8584\",\n      \"height\": 94,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"89cf1d87-ac64-44bf-b699-b7e98aca6917\",\n      \"label\": \"label-8585\",\n      \"height\": 191,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"631518d2-9b82-4662-9c7b-d47dcc2f2ac3\",\n      \"label\": \"label-8586\",\n      \"height\": 128,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"5fa1bc69-a320-468d-ad30-8ecd8e0079c6\",\n      \"label\": \"label-8587\",\n      \"height\": 324,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"5c781d5c-dc87-4fc7-ac23-64dd1b5c7848\",\n      \"label\": \"label-8588\",\n      \"height\": 502,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"7508d538-7908-4bda-ab30-d2c78efe0afc\",\n      \"label\": \"label-8589\",\n      \"height\": 285,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"f5ae57fc-0746-4f37-8a04-77d59a08deb4\",\n      \"label\": \"label-8590\",\n      \"height\": 364,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"97136d4b-3eec-414e-bac5-dddb66f65f19\",\n      \"label\": \"label-8591\",\n      \"height\": 417,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"891c48bb-0a02-4f2b-b181-35c080ab2d31\",\n      \"label\": \"label-8592\",\n      \"height\": 507,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"b6bd048c-c71c-40aa-a042-7d7510c56dfb\",\n      \"label\": \"label-8593\",\n      \"height\": 85,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"e6254a35-3604-49b7-bc8c-a25d72c1a208\",\n      \"label\": \"label-8594\",\n      \"height\": 282,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"f6751f69-f263-45dd-a326-8eb8b113b7ea\",\n      \"label\": \"label-8595\",\n      \"height\": 380,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"311d8f82-8c8b-40d2-be1b-dac363e3cc6b\",\n      \"label\": \"label-8596\",\n      \"height\": 285,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"506dbe67-b6a7-4165-ac00-907acd00ed5d\",\n      \"label\": \"label-8597\",\n      \"height\": 391,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"fce95164-e28d-4fee-b07f-9fadc0819e4c\",\n      \"label\": \"label-8598\",\n      \"height\": 313,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"eae712b6-c7d3-4a55-8a12-8bc09bbc33a4\",\n      \"label\": \"label-8599\",\n      \"height\": 376,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"8b9b9f04-2859-4772-a7fc-0b98038c92fd\",\n      \"label\": \"label-8600\",\n      \"height\": 418,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"4bf6abf7-d228-413d-82be-c1927902b0e7\",\n      \"label\": \"label-8601\",\n      \"height\": 423,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"b1afa160-d109-4da5-a855-d8e37e7cc444\",\n      \"label\": \"label-8602\",\n      \"height\": 529,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"922f3e53-6a01-44a1-aded-724503671148\",\n      \"label\": \"label-8603\",\n      \"height\": 69,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"995299ae-cd12-4b9c-b000-466a1033b894\",\n      \"label\": \"label-8604\",\n      \"height\": 387,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"555ce62a-bb9c-44a0-8f19-13ec40e24364\",\n      \"label\": \"label-8605\",\n      \"height\": 127,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"21748f73-81aa-4868-a096-99cd93f6bc3e\",\n      \"label\": \"label-8606\",\n      \"height\": 258,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"3d6b3430-09d3-492b-99d7-7473ab616ea5\",\n      \"label\": \"label-8607\",\n      \"height\": 414,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"99285027-215f-486d-bb93-91343849d38f\",\n      \"label\": \"label-8608\",\n      \"height\": 407,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"607655eb-0c66-4486-b328-7f1cab9ddc15\",\n      \"label\": \"label-8609\",\n      \"height\": 221,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"e71c3ddd-5ba0-4a3a-a4e4-e3955a2d865a\",\n      \"label\": \"label-8610\",\n      \"height\": 330,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"e9013cc1-9074-452c-b59d-5da0357d8cc6\",\n      \"label\": \"label-8611\",\n      \"height\": 336,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"f1b109b0-d1e0-4721-a5de-1f3b150e4c1f\",\n      \"label\": \"label-8612\",\n      \"height\": 60,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"d2f8dddd-b58e-4e07-95c1-0a99905173f9\",\n      \"label\": \"label-8613\",\n      \"height\": 261,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"9a6c827b-b536-47e1-9d6e-57ae2a653acf\",\n      \"label\": \"label-8614\",\n      \"height\": 185,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"409f60d5-a19d-4910-83de-8e6a69fcc3ba\",\n      \"label\": \"label-8615\",\n      \"height\": 406,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"f8e14d27-a1e7-4645-82cc-015350859048\",\n      \"label\": \"label-8616\",\n      \"height\": 66,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"5031ebc7-c565-478c-998f-fd98eb371b58\",\n      \"label\": \"label-8617\",\n      \"height\": 266,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"31f076ba-7ab1-4457-afcb-625788831d5b\",\n      \"label\": \"label-8618\",\n      \"height\": 247,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"bb7683ce-4e57-424a-835b-023eb2dab5af\",\n      \"label\": \"label-8619\",\n      \"height\": 392,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"ef61bd3b-0b4b-43f3-98e3-714a0eddbbad\",\n      \"label\": \"label-8620\",\n      \"height\": 361,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"a655c72a-dfc0-437e-ae32-1bd1468518db\",\n      \"label\": \"label-8621\",\n      \"height\": 357,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"d3253c47-4ca4-4031-ba74-22f6db829891\",\n      \"label\": \"label-8622\",\n      \"height\": 180,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"ee22234b-3ee7-4eea-b38f-8100c1ef012d\",\n      \"label\": \"label-8623\",\n      \"height\": 500,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"528d1818-b540-485c-9b2b-5de16d8e85d1\",\n      \"label\": \"label-8624\",\n      \"height\": 188,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"87d34f92-dfc4-4802-8760-74d594449e03\",\n      \"label\": \"label-8625\",\n      \"height\": 177,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"e216e3ee-9d4e-4271-b0ff-5d7f3f423d95\",\n      \"label\": \"label-8626\",\n      \"height\": 123,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"bd590894-54ed-4e30-b2f1-e5c77091f20f\",\n      \"label\": \"label-8627\",\n      \"height\": 190,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"c9215602-e77e-488c-9612-4b824d0efea3\",\n      \"label\": \"label-8628\",\n      \"height\": 219,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"e1f574bb-56a7-40f2-9b01-28604502925e\",\n      \"label\": \"label-8629\",\n      \"height\": 406,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"89f2dc8e-332c-4821-9ddf-c0ad0e463202\",\n      \"label\": \"label-8630\",\n      \"height\": 243,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"e8bbc6f4-b742-408a-8065-5fc6ebae00cc\",\n      \"label\": \"label-8631\",\n      \"height\": 103,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"908763af-dd40-4917-a6e6-508a0cadc0fa\",\n      \"label\": \"label-8632\",\n      \"height\": 338,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"ad46668d-e771-4ccf-ac5a-a0d174946422\",\n      \"label\": \"label-8633\",\n      \"height\": 405,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"6949eb5f-96a7-4639-8e32-4018cdfed422\",\n      \"label\": \"label-8634\",\n      \"height\": 52,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"3c680fc0-29b7-4c6e-97c6-026f9d6775f1\",\n      \"label\": \"label-8635\",\n      \"height\": 347,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"4c83c368-1e41-4909-b5ac-929d08ae7fca\",\n      \"label\": \"label-8636\",\n      \"height\": 39,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"dc978f26-0526-4adf-a972-09cca3a4db90\",\n      \"label\": \"label-8637\",\n      \"height\": 378,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"4c7463c0-db11-4c77-be17-2907a1a50ec3\",\n      \"label\": \"label-8638\",\n      \"height\": 419,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"08515102-c645-4868-9e52-158a3fd68291\",\n      \"label\": \"label-8639\",\n      \"height\": 394,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"2aec7585-3ace-4608-9e15-23e76eaf0c61\",\n      \"label\": \"label-8640\",\n      \"height\": 212,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"c060aa05-beed-47ee-b8b3-046592673c23\",\n      \"label\": \"label-8641\",\n      \"height\": 99,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"3f391892-f8bf-4d36-a3a7-654566fe3897\",\n      \"label\": \"label-8642\",\n      \"height\": 336,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"b7aa9a82-4249-4b13-b3e5-c9db32daa2ac\",\n      \"label\": \"label-8643\",\n      \"height\": 136,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"308522b8-3113-48e0-9c23-8c1b083801b8\",\n      \"label\": \"label-8644\",\n      \"height\": 47,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"58c8a7f2-498e-4880-aaa1-498a5a2f5f5e\",\n      \"label\": \"label-8645\",\n      \"height\": 471,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"b94a95d4-846f-4a12-ba81-90978c3ade8d\",\n      \"label\": \"label-8646\",\n      \"height\": 521,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"7abb7379-1aa9-4dfc-bc2f-2225cce53773\",\n      \"label\": \"label-8647\",\n      \"height\": 332,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"e165688f-a201-4d29-b520-b55c02d01612\",\n      \"label\": \"label-8648\",\n      \"height\": 413,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"6aaeaf37-5086-4ead-b637-d6593c93c548\",\n      \"label\": \"label-8649\",\n      \"height\": 121,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"ba1e1bd3-943a-4924-ae9d-9cc9d20cad72\",\n      \"label\": \"label-8650\",\n      \"height\": 458,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"e2955385-f46f-4cd1-b251-9b2987ebf265\",\n      \"label\": \"label-8651\",\n      \"height\": 455,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"569c7315-14ae-4e30-a58c-ad9e7eeabce2\",\n      \"label\": \"label-8652\",\n      \"height\": 225,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"daeef850-9321-4469-8fd4-12e2b7451f72\",\n      \"label\": \"label-8653\",\n      \"height\": 393,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"7dc093d0-e7fc-4fd3-a23a-c6032699979e\",\n      \"label\": \"label-8654\",\n      \"height\": 218,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"eab464f8-f8ff-4014-968a-af51f0dc51f1\",\n      \"label\": \"label-8655\",\n      \"height\": 391,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"d03ada33-2c73-4f2d-b373-621086f586cc\",\n      \"label\": \"label-8656\",\n      \"height\": 514,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"e9d22da4-f25f-442f-9e87-d8c347b7c4a2\",\n      \"label\": \"label-8657\",\n      \"height\": 33,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"344fe43f-d98d-4d3a-a7dc-fd99bba07b4a\",\n      \"label\": \"label-8658\",\n      \"height\": 57,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"e86fd47d-fbe5-4238-bc37-d3eba451e0e6\",\n      \"label\": \"label-8659\",\n      \"height\": 320,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"6805e333-dcfb-4179-8d4b-e0af7ee27f2c\",\n      \"label\": \"label-8660\",\n      \"height\": 482,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"5b60e382-6e74-4e47-922d-7bda73a58781\",\n      \"label\": \"label-8661\",\n      \"height\": 67,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"28a8c6dd-a44f-403c-8b47-0a471580c665\",\n      \"label\": \"label-8662\",\n      \"height\": 248,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"220245e8-3783-4fc0-8435-06ca220c3ed0\",\n      \"label\": \"label-8663\",\n      \"height\": 47,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"41d77c09-a1e3-443f-8a7e-7102d5c68cc9\",\n      \"label\": \"label-8664\",\n      \"height\": 176,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"3eccdfec-8684-45cc-84f3-18d622429038\",\n      \"label\": \"label-8665\",\n      \"height\": 174,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"4e615a4a-ea49-4ef5-8a02-9ed5e88b682b\",\n      \"label\": \"label-8666\",\n      \"height\": 267,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"6f39a11e-adad-4259-a782-0c4b780364bb\",\n      \"label\": \"label-8667\",\n      \"height\": 129,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"d13c4868-2437-48b7-9ac8-7b53a4b16a29\",\n      \"label\": \"label-8668\",\n      \"height\": 231,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"fc2a53f9-6074-4d57-b5bc-664ac7d604ed\",\n      \"label\": \"label-8669\",\n      \"height\": 300,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"b5a0912b-374b-40b7-ac1f-e0ad6c22d3c1\",\n      \"label\": \"label-8670\",\n      \"height\": 131,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"47e80c13-6a5f-42af-a839-4aab86788dbe\",\n      \"label\": \"label-8671\",\n      \"height\": 446,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"a8f9a257-fd29-4df5-b0f2-e4c8265ae3ce\",\n      \"label\": \"label-8672\",\n      \"height\": 452,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"3a0c0971-7893-4e09-823c-a91c7a5b15fa\",\n      \"label\": \"label-8673\",\n      \"height\": 393,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"9a852948-de75-4748-b723-7915321595f5\",\n      \"label\": \"label-8674\",\n      \"height\": 121,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"5a2bb9fc-2d63-4ade-a263-e8a17a89678d\",\n      \"label\": \"label-8675\",\n      \"height\": 144,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"f424369b-31d6-4b5a-97b5-54880c9b90d3\",\n      \"label\": \"label-8676\",\n      \"height\": 323,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"db34fcb0-6421-4134-8fd8-b58908e82dbb\",\n      \"label\": \"label-8677\",\n      \"height\": 273,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"444ff40f-09d3-4e91-a94b-817b91731228\",\n      \"label\": \"label-8678\",\n      \"height\": 491,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"bca44c8b-4891-4f05-8d4e-7ca21f60afb4\",\n      \"label\": \"label-8679\",\n      \"height\": 217,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"d963da36-d3b1-4fb1-86c7-1979d123eeda\",\n      \"label\": \"label-8680\",\n      \"height\": 38,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"b217e42c-0d2d-456a-b343-375789b58523\",\n      \"label\": \"label-8681\",\n      \"height\": 263,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"348a958b-8aa3-41f1-9da6-af5aa9f47c59\",\n      \"label\": \"label-8682\",\n      \"height\": 181,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"61d278f0-5429-43a3-8cd6-82420c670518\",\n      \"label\": \"label-8683\",\n      \"height\": 450,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"1c44470e-0e29-4b70-ab1f-db61a745b25f\",\n      \"label\": \"label-8684\",\n      \"height\": 520,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"0f3a4654-932d-41d6-a347-9f3f45d1670a\",\n      \"label\": \"label-8685\",\n      \"height\": 331,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"5abb45cd-47c3-413c-8fb2-86f940555293\",\n      \"label\": \"label-8686\",\n      \"height\": 202,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"15a78cd0-1b87-4a9f-b5d8-15f1622019be\",\n      \"label\": \"label-8687\",\n      \"height\": 92,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"5ae3af46-6da7-4e09-bb37-6c2918440878\",\n      \"label\": \"label-8688\",\n      \"height\": 393,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"1cdf9cb0-907a-4975-a245-bccf99e6313d\",\n      \"label\": \"label-8689\",\n      \"height\": 426,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"23bb2db5-b2c5-4784-9c4b-a322fb15ffc1\",\n      \"label\": \"label-8690\",\n      \"height\": 481,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"a1535711-bd44-44a8-b8e4-557d26efc2a7\",\n      \"label\": \"label-8691\",\n      \"height\": 507,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"a875288e-bdb1-4474-bc19-93b560925b30\",\n      \"label\": \"label-8692\",\n      \"height\": 521,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"80588f7a-8bf7-4c9f-92fc-59d6f58091ea\",\n      \"label\": \"label-8693\",\n      \"height\": 477,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"4e5fc27b-74f0-4e5f-bc15-b504bdeea414\",\n      \"label\": \"label-8694\",\n      \"height\": 137,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"a3cb1234-6bdb-41f2-a4f6-845612e64078\",\n      \"label\": \"label-8695\",\n      \"height\": 119,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"2dc93004-a6cf-49e1-aedc-034a5f915fa9\",\n      \"label\": \"label-8696\",\n      \"height\": 164,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"1ae10e94-e80c-498c-896f-60d3cb37c85e\",\n      \"label\": \"label-8697\",\n      \"height\": 476,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"778b4ac2-db0d-41a5-9c11-c9474e7f50e0\",\n      \"label\": \"label-8698\",\n      \"height\": 496,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"70e515a4-7ff6-4e27-a69c-a43219b7d712\",\n      \"label\": \"label-8699\",\n      \"height\": 448,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"a9f074b6-608d-48c3-8103-bc4ec44c919e\",\n      \"label\": \"label-8700\",\n      \"height\": 461,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"1afcae74-c2c6-41cb-b673-7afd7b3e9064\",\n      \"label\": \"label-8701\",\n      \"height\": 225,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"c61893b6-5a67-4d34-9323-d70de8085267\",\n      \"label\": \"label-8702\",\n      \"height\": 499,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"65650fd9-1464-4c3c-b6b0-c2ad7812190b\",\n      \"label\": \"label-8703\",\n      \"height\": 214,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"ffdf7716-79bd-4c98-9f24-f4c78f97311b\",\n      \"label\": \"label-8704\",\n      \"height\": 361,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"fbfe6ad7-566a-48ce-a536-2b3d51b2f932\",\n      \"label\": \"label-8705\",\n      \"height\": 234,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"d0516fab-e611-43e5-8485-c8b2e12850e3\",\n      \"label\": \"label-8706\",\n      \"height\": 499,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"222215c9-7d5f-41bb-9cfa-b2829c194f5c\",\n      \"label\": \"label-8707\",\n      \"height\": 285,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"0f97247f-dedf-43ad-a80d-5ded91e46df0\",\n      \"label\": \"label-8708\",\n      \"height\": 250,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"7aaf9d93-1a4b-480a-ad59-d1e03d9108ae\",\n      \"label\": \"label-8709\",\n      \"height\": 179,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"501de6e6-35d3-4771-a29d-4ef6151a0e6a\",\n      \"label\": \"label-8710\",\n      \"height\": 237,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"9dc0d2a5-2180-4af1-bf8f-44fac53d2ec2\",\n      \"label\": \"label-8711\",\n      \"height\": 349,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"8f8b81e8-27c2-4e9a-a9ba-335e878496f9\",\n      \"label\": \"label-8712\",\n      \"height\": 523,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"1e3462f0-b1eb-41fa-a2ec-f09db4e66355\",\n      \"label\": \"label-8713\",\n      \"height\": 155,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"d8a294fc-f436-4a56-996d-1db6b070c969\",\n      \"label\": \"label-8714\",\n      \"height\": 139,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"858cf8dd-2379-48cb-8421-63ac24ef01f0\",\n      \"label\": \"label-8715\",\n      \"height\": 55,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"03d734f8-9853-4d57-956c-0e22ad03e990\",\n      \"label\": \"label-8716\",\n      \"height\": 270,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"43967917-7933-423c-acfa-1f1cb12c6463\",\n      \"label\": \"label-8717\",\n      \"height\": 67,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"0917dc11-272e-404d-aaf7-3893a0214db6\",\n      \"label\": \"label-8718\",\n      \"height\": 84,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"c89a48bf-4ea0-4e2e-b39c-533570326e56\",\n      \"label\": \"label-8719\",\n      \"height\": 319,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"f78bff10-14e3-475e-8c9d-e7da4758e205\",\n      \"label\": \"label-8720\",\n      \"height\": 129,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"04677b09-7d07-4e33-bd91-afb2f1bf4093\",\n      \"label\": \"label-8721\",\n      \"height\": 191,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"59ccf5c4-3bad-4858-a0ea-8c9729f8e617\",\n      \"label\": \"label-8722\",\n      \"height\": 526,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"eed9dfa1-ce3b-449f-ab4b-4c7646aaceac\",\n      \"label\": \"label-8723\",\n      \"height\": 406,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"6640135f-83fd-46ed-ace7-489b355614d8\",\n      \"label\": \"label-8724\",\n      \"height\": 490,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"9244f086-1780-40bd-9113-ac284bd98230\",\n      \"label\": \"label-8725\",\n      \"height\": 439,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"22891c55-8861-4358-9ab7-be5ea599694d\",\n      \"label\": \"label-8726\",\n      \"height\": 86,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"1e401b43-b225-464b-8c6a-53cbc88d1656\",\n      \"label\": \"label-8727\",\n      \"height\": 251,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"1a937691-b58f-4a80-a03b-68c49a653d77\",\n      \"label\": \"label-8728\",\n      \"height\": 502,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"417bf20c-bd61-4824-86b7-473dc7efaac4\",\n      \"label\": \"label-8729\",\n      \"height\": 500,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"1bf7c7f4-c8f0-4b8c-8d9f-ff02ebb6ed20\",\n      \"label\": \"label-8730\",\n      \"height\": 488,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"0a6a6067-9b44-4f43-9091-21211850b43e\",\n      \"label\": \"label-8731\",\n      \"height\": 481,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"c1d87b2c-510b-4789-887e-bfef0d4f1ef9\",\n      \"label\": \"label-8732\",\n      \"height\": 156,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"901c942f-f895-49ee-bdd4-6478bfe2fbf3\",\n      \"label\": \"label-8733\",\n      \"height\": 268,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"e95517be-e0ae-457d-a336-7a3178cbf436\",\n      \"label\": \"label-8734\",\n      \"height\": 338,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"7468bf75-59bf-4cb3-98d5-07f3570205e4\",\n      \"label\": \"label-8735\",\n      \"height\": 516,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"894e5e63-bcf3-4ac0-b99c-f477f0968bc7\",\n      \"label\": \"label-8736\",\n      \"height\": 437,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"d0e69e0d-8860-4eb0-a347-f948e51b2700\",\n      \"label\": \"label-8737\",\n      \"height\": 457,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"630373b4-453b-4670-9965-60ee916c5c35\",\n      \"label\": \"label-8738\",\n      \"height\": 95,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"acd77f71-2fc5-424b-82e5-fc17de12bef3\",\n      \"label\": \"label-8739\",\n      \"height\": 395,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"7ced5aae-400c-49dd-8bcc-4cd541e2b132\",\n      \"label\": \"label-8740\",\n      \"height\": 340,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"ce0cb9a6-32f5-4472-a255-b1aa46874564\",\n      \"label\": \"label-8741\",\n      \"height\": 313,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"bad40fae-57f9-41e0-8495-535ebbc16597\",\n      \"label\": \"label-8742\",\n      \"height\": 148,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"d2a19d91-b6e9-44ab-b8d4-02753232ddf4\",\n      \"label\": \"label-8743\",\n      \"height\": 173,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"58155d27-97cb-4b0d-b4a0-1e1dc0316c73\",\n      \"label\": \"label-8744\",\n      \"height\": 346,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"198cba8f-3614-4bec-a0a2-48bf0417e833\",\n      \"label\": \"label-8745\",\n      \"height\": 87,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"f40eed19-7bda-47e8-9c65-f61b946012bc\",\n      \"label\": \"label-8746\",\n      \"height\": 131,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"f78c6dec-fba2-4e81-bd02-3bbc6e4b800a\",\n      \"label\": \"label-8747\",\n      \"height\": 86,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"2b007fd0-baf6-4861-a32a-6ab0cc1ef87a\",\n      \"label\": \"label-8748\",\n      \"height\": 363,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"79b00b00-fa0b-4293-8364-ca810c6d10e4\",\n      \"label\": \"label-8749\",\n      \"height\": 126,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"e16d5fdd-3cd4-4900-bc9a-ffdcb3b627df\",\n      \"label\": \"label-8750\",\n      \"height\": 337,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"e7beeaf0-f592-447a-b49e-85cc452b70b8\",\n      \"label\": \"label-8751\",\n      \"height\": 312,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"56569d9b-8388-41dd-8691-7162534e1255\",\n      \"label\": \"label-8752\",\n      \"height\": 149,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"37309fa3-6d91-49d0-8f09-61854a9b34b0\",\n      \"label\": \"label-8753\",\n      \"height\": 61,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"764910b3-f736-4bac-bfb9-d74e6d8b724c\",\n      \"label\": \"label-8754\",\n      \"height\": 217,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"ee05382e-2255-44bf-aa24-d761386351ec\",\n      \"label\": \"label-8755\",\n      \"height\": 108,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"6efbdf6e-63bb-441e-83fb-7ea51df3605b\",\n      \"label\": \"label-8756\",\n      \"height\": 268,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"3bf6b61d-c864-4357-ba9b-58b0051cf74d\",\n      \"label\": \"label-8757\",\n      \"height\": 295,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"12b0849b-998c-4e15-9d4d-a0a174b5e823\",\n      \"label\": \"label-8758\",\n      \"height\": 149,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"5866ac79-a9b6-4e07-a7eb-b624361ea4e7\",\n      \"label\": \"label-8759\",\n      \"height\": 201,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"4de7da99-eb31-449c-bb41-8c8cd07c4068\",\n      \"label\": \"label-8760\",\n      \"height\": 205,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"951d5c89-9e7c-4ca0-8e93-a16bb6509770\",\n      \"label\": \"label-8761\",\n      \"height\": 369,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"a70effb9-a479-45d8-991d-cddc9a982b73\",\n      \"label\": \"label-8762\",\n      \"height\": 119,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"bb2ef13c-e7ab-47b0-8127-bbdc18e398c2\",\n      \"label\": \"label-8763\",\n      \"height\": 312,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"7f814e4d-c0ad-4127-8bf2-7ce62cc61192\",\n      \"label\": \"label-8764\",\n      \"height\": 487,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"b5261844-b1e7-4d22-9240-8a31b7108a72\",\n      \"label\": \"label-8765\",\n      \"height\": 501,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"c81af7e5-f75b-425d-8862-cdf7c86cbf8e\",\n      \"label\": \"label-8766\",\n      \"height\": 395,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"8b3a76b8-1e70-46ea-b698-4c23be4db91c\",\n      \"label\": \"label-8767\",\n      \"height\": 343,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"25609e6a-a1c3-443e-93b8-007edaa6399b\",\n      \"label\": \"label-8768\",\n      \"height\": 297,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"191793c2-5310-49a5-82a6-7188c15546c5\",\n      \"label\": \"label-8769\",\n      \"height\": 303,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"4f572726-1c11-4f8a-bcce-ba25eb176c52\",\n      \"label\": \"label-8770\",\n      \"height\": 318,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"dfab35ea-c34c-4cec-bfe0-f0afc2bfb313\",\n      \"label\": \"label-8771\",\n      \"height\": 476,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"ec5b22e1-6796-4145-a496-91bbe8f5e1e7\",\n      \"label\": \"label-8772\",\n      \"height\": 341,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"2790f39a-c277-492a-92ab-8e4711c200f9\",\n      \"label\": \"label-8773\",\n      \"height\": 392,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"2a0e1d64-4ef9-4b6c-ac81-af0fae23632f\",\n      \"label\": \"label-8774\",\n      \"height\": 523,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"1be3c9a2-07f9-45eb-8238-a57e3a84b642\",\n      \"label\": \"label-8775\",\n      \"height\": 41,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"52a05868-d0fd-426f-b4c6-2b3bcb5cf4c0\",\n      \"label\": \"label-8776\",\n      \"height\": 181,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"e1a68523-1d7d-4860-9c64-1c1d51b94e51\",\n      \"label\": \"label-8777\",\n      \"height\": 358,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"34c2af8a-20b9-4f06-93b1-5f0d6bfae8a9\",\n      \"label\": \"label-8778\",\n      \"height\": 70,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"f37099d6-653c-4f1e-8e3a-f25f5feebe48\",\n      \"label\": \"label-8779\",\n      \"height\": 238,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"c71540f3-0b13-478b-89ec-5e51243e763e\",\n      \"label\": \"label-8780\",\n      \"height\": 452,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"2ca6310b-c594-46d2-806f-decba97ffd54\",\n      \"label\": \"label-8781\",\n      \"height\": 279,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"e302eeb8-ec00-4650-ad0f-e3fc3afa941b\",\n      \"label\": \"label-8782\",\n      \"height\": 361,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"f6b27875-491a-4dee-9388-bd965040e2ed\",\n      \"label\": \"label-8783\",\n      \"height\": 399,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"3b31ff13-b589-4e19-a454-eda3e9cdc7ce\",\n      \"label\": \"label-8784\",\n      \"height\": 282,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"3566800a-8721-45a7-93b8-cdf7bb9a2a83\",\n      \"label\": \"label-8785\",\n      \"height\": 129,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"759ff31d-eacc-4831-81bc-7ad2ef21b58e\",\n      \"label\": \"label-8786\",\n      \"height\": 314,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"e52bdb8f-4fbf-4658-b514-cf82ac7da50d\",\n      \"label\": \"label-8787\",\n      \"height\": 205,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"20fa2ef5-8c0a-43a9-898e-1e73a555823f\",\n      \"label\": \"label-8788\",\n      \"height\": 354,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"cc7eedc8-4a41-482c-81ea-db6efeb1c5c8\",\n      \"label\": \"label-8789\",\n      \"height\": 56,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"600e6d7d-8526-40da-a4c0-d8125804156b\",\n      \"label\": \"label-8790\",\n      \"height\": 286,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"69bacf29-8d57-424a-aca2-afaf40c58f86\",\n      \"label\": \"label-8791\",\n      \"height\": 99,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"31d3db9b-e0aa-47fe-8f69-41d38706baa9\",\n      \"label\": \"label-8792\",\n      \"height\": 130,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"2aea146f-27fa-43b1-9c72-3910a0772568\",\n      \"label\": \"label-8793\",\n      \"height\": 477,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"42c00cc1-fbee-42a5-8140-37c45fe29570\",\n      \"label\": \"label-8794\",\n      \"height\": 230,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"2de9c0b9-5dc6-4913-8216-9a96603dcdcc\",\n      \"label\": \"label-8795\",\n      \"height\": 114,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"c5aea23c-775c-45ea-a880-6e6ffd45d323\",\n      \"label\": \"label-8796\",\n      \"height\": 441,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"25d7795d-7af4-4885-aae5-232403054a7b\",\n      \"label\": \"label-8797\",\n      \"height\": 423,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"da47749c-4990-42b9-bf33-45e092fdf520\",\n      \"label\": \"label-8798\",\n      \"height\": 473,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"ad440211-e105-403e-a82f-663a7491653b\",\n      \"label\": \"label-8799\",\n      \"height\": 199,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"0395bcb7-73df-42c0-802d-fcadf638d3ab\",\n      \"label\": \"label-8800\",\n      \"height\": 313,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"2819d64f-7b05-4446-ac27-d3ad50f52aa4\",\n      \"label\": \"label-8801\",\n      \"height\": 223,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"65ec599b-39c9-42f8-8a1e-5921d15a581f\",\n      \"label\": \"label-8802\",\n      \"height\": 395,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"1b8459dc-c41a-413f-8eff-e9803dcb02d3\",\n      \"label\": \"label-8803\",\n      \"height\": 509,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"37bba991-2e77-4d5b-b490-4dde082d3240\",\n      \"label\": \"label-8804\",\n      \"height\": 37,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"44f9c532-8b0c-4d95-b69d-81a3616d923a\",\n      \"label\": \"label-8805\",\n      \"height\": 508,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"cdd630ce-54ea-448b-86bc-26bb6bf631f1\",\n      \"label\": \"label-8806\",\n      \"height\": 465,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"6910e17f-1b65-4705-8ffc-d4289d0a3b71\",\n      \"label\": \"label-8807\",\n      \"height\": 269,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"744ee421-e64c-478c-a546-1c3af408b301\",\n      \"label\": \"label-8808\",\n      \"height\": 454,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"3e6421f7-7b7d-4ea5-a797-a5999fd3a503\",\n      \"label\": \"label-8809\",\n      \"height\": 141,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"aa0af9c9-5a56-4d7d-a9c0-73f4234dcf64\",\n      \"label\": \"label-8810\",\n      \"height\": 317,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"dfe9e647-6d9e-455a-bb8d-b03efda23163\",\n      \"label\": \"label-8811\",\n      \"height\": 218,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"b03d9334-2a9a-49e8-8aa9-4e65e2a15a57\",\n      \"label\": \"label-8812\",\n      \"height\": 484,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"975a0587-a482-40f4-982d-d9d84f5773e0\",\n      \"label\": \"label-8813\",\n      \"height\": 294,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"bbe858a4-a40d-4eef-b6ea-d412bf4f82ed\",\n      \"label\": \"label-8814\",\n      \"height\": 40,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"04366cf3-c5d9-4cb7-b6d2-06e8b4e4b7eb\",\n      \"label\": \"label-8815\",\n      \"height\": 132,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"93e94e5f-f645-46e7-bd4b-c754ed31135f\",\n      \"label\": \"label-8816\",\n      \"height\": 128,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"59e053c4-e679-4c40-9da6-b9007c11886f\",\n      \"label\": \"label-8817\",\n      \"height\": 262,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"f9deed8c-679d-4b25-980a-905443bb1792\",\n      \"label\": \"label-8818\",\n      \"height\": 447,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"8b6b3d2a-24f6-49b7-9ed3-7bdd7d94421c\",\n      \"label\": \"label-8819\",\n      \"height\": 116,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"0baf81d7-875a-4f30-9660-1f0d5b728222\",\n      \"label\": \"label-8820\",\n      \"height\": 382,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"22320b8d-7681-428a-975c-af096a88fef7\",\n      \"label\": \"label-8821\",\n      \"height\": 307,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"7a36c100-d4d5-458d-9729-7b85e7c2a61c\",\n      \"label\": \"label-8822\",\n      \"height\": 131,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"a1d216e8-1308-461c-b77c-b06146b09058\",\n      \"label\": \"label-8823\",\n      \"height\": 131,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"22aff033-a8e0-4de4-a29d-b4851b303acf\",\n      \"label\": \"label-8824\",\n      \"height\": 311,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"0e097715-652e-4b87-800a-86ebba68ead3\",\n      \"label\": \"label-8825\",\n      \"height\": 501,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"1e696c77-baab-4f9d-9c0e-e1e8e859ceaa\",\n      \"label\": \"label-8826\",\n      \"height\": 166,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"4a62f6ab-efc3-46d9-8056-eb413bbdb48f\",\n      \"label\": \"label-8827\",\n      \"height\": 312,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"c3c3a1f7-ff2a-4fbf-b099-4de7d67ebee1\",\n      \"label\": \"label-8828\",\n      \"height\": 318,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"1d36371d-7619-49a4-a3d4-34e0742e85d2\",\n      \"label\": \"label-8829\",\n      \"height\": 381,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"5b9c45ce-dcdc-44df-b3d5-7feef6dab14d\",\n      \"label\": \"label-8830\",\n      \"height\": 82,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"0a3ba250-8438-4f53-9633-d61309dcaa48\",\n      \"label\": \"label-8831\",\n      \"height\": 306,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"0e029ffc-0c15-4032-ae15-b9e5885f3ee1\",\n      \"label\": \"label-8832\",\n      \"height\": 244,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"3c93ee17-28e6-4625-b6de-a66ee5f3f09d\",\n      \"label\": \"label-8833\",\n      \"height\": 272,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"f56d6852-4d19-4c11-aa7d-d13ae6c9be27\",\n      \"label\": \"label-8834\",\n      \"height\": 354,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"42d38998-3488-4363-8883-47ad2cea20dc\",\n      \"label\": \"label-8835\",\n      \"height\": 521,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"893c25bc-abf5-40c7-987b-30e54551ba06\",\n      \"label\": \"label-8836\",\n      \"height\": 508,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"5108943a-803d-45ba-9670-f661f6fc7229\",\n      \"label\": \"label-8837\",\n      \"height\": 374,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"f6cf0fd0-917f-43a9-9197-00a9e519f8ea\",\n      \"label\": \"label-8838\",\n      \"height\": 436,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"f61a1fe5-d0a5-468b-a854-804f1bd13561\",\n      \"label\": \"label-8839\",\n      \"height\": 52,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"a40ad355-c3ed-4efb-8a85-82c7268b2dc7\",\n      \"label\": \"label-8840\",\n      \"height\": 318,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"04ae4089-3b61-41ca-9a59-da575266b7a7\",\n      \"label\": \"label-8841\",\n      \"height\": 185,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"7c891265-320b-495f-9af5-421fb4905cd6\",\n      \"label\": \"label-8842\",\n      \"height\": 385,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"1308d884-a6d7-4c55-b107-748af37d6e05\",\n      \"label\": \"label-8843\",\n      \"height\": 340,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"545e0a8c-5608-48d4-ade1-9834dcfe7701\",\n      \"label\": \"label-8844\",\n      \"height\": 345,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"e770548a-b756-41e3-8a7d-22b9132b05de\",\n      \"label\": \"label-8845\",\n      \"height\": 52,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"fc9bb412-5e93-45c3-bcf1-06a01f9f0018\",\n      \"label\": \"label-8846\",\n      \"height\": 213,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"c1bc5c00-6cab-449e-8ae3-41e77f119818\",\n      \"label\": \"label-8847\",\n      \"height\": 78,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"2a026a6c-0075-4c61-a7bf-9cd07a28088e\",\n      \"label\": \"label-8848\",\n      \"height\": 359,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"1d2c9e9f-9326-476d-8086-b60ab9e5dc80\",\n      \"label\": \"label-8849\",\n      \"height\": 413,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"0755fbce-c128-43a2-a406-eb29ff8d3a60\",\n      \"label\": \"label-8850\",\n      \"height\": 415,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"ad415dd8-df0e-40e3-8e92-56eda6fd3146\",\n      \"label\": \"label-8851\",\n      \"height\": 442,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"f3cdff12-c764-403b-a18c-7c613844cfaf\",\n      \"label\": \"label-8852\",\n      \"height\": 318,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"de7fb3b8-0799-4842-97f4-5c139ec29908\",\n      \"label\": \"label-8853\",\n      \"height\": 316,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"09b180af-0a1f-45f5-9bd9-671a32ad6e07\",\n      \"label\": \"label-8854\",\n      \"height\": 132,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"2c77bdb9-7a1f-4ccd-ae7f-223019d085fc\",\n      \"label\": \"label-8855\",\n      \"height\": 389,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"47a27193-e8ea-483e-99a8-449b565333f3\",\n      \"label\": \"label-8856\",\n      \"height\": 121,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"e9f9f19a-37d1-45ac-913e-69222f8fc483\",\n      \"label\": \"label-8857\",\n      \"height\": 449,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"9acbebf4-8835-4703-a6d8-a7d6881823d5\",\n      \"label\": \"label-8858\",\n      \"height\": 130,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"1ec778e5-16a1-4f50-922b-f8e69ea2a2a6\",\n      \"label\": \"label-8859\",\n      \"height\": 283,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"7abb9c7d-1d4a-479a-a503-9b0826879975\",\n      \"label\": \"label-8860\",\n      \"height\": 363,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"cf6f903e-94e2-457a-8dff-9d01abd1e3c5\",\n      \"label\": \"label-8861\",\n      \"height\": 62,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"94315a40-393e-478d-b051-87c586886427\",\n      \"label\": \"label-8862\",\n      \"height\": 378,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"3edffe21-6f5f-4355-bca4-59ad6b7e5e59\",\n      \"label\": \"label-8863\",\n      \"height\": 72,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"5ea05d36-c141-461a-a695-be9e134bf913\",\n      \"label\": \"label-8864\",\n      \"height\": 403,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"58dad165-ee9f-4657-a6c4-7844934a1637\",\n      \"label\": \"label-8865\",\n      \"height\": 210,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"9b41c5f0-b34c-4fff-b743-26756fd34f7d\",\n      \"label\": \"label-8866\",\n      \"height\": 162,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"ddff74b2-5b05-4ad9-9ba1-6750ef9cb1a0\",\n      \"label\": \"label-8867\",\n      \"height\": 491,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"1c56ef35-411a-4111-ac7e-cfa2efad42f1\",\n      \"label\": \"label-8868\",\n      \"height\": 441,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"6db75821-b6d8-40bb-9f99-320bd56b419b\",\n      \"label\": \"label-8869\",\n      \"height\": 429,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"fd455cdf-e563-4c47-9312-bec0977043d4\",\n      \"label\": \"label-8870\",\n      \"height\": 412,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"63f14089-389e-4ff6-9869-dca8cafb44ac\",\n      \"label\": \"label-8871\",\n      \"height\": 139,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"e752d9c4-8498-4d34-835e-320a198725ab\",\n      \"label\": \"label-8872\",\n      \"height\": 327,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"dd4bf592-7851-41db-b120-69b57fbf5f16\",\n      \"label\": \"label-8873\",\n      \"height\": 363,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"47b0aa1f-5eee-4f90-afd4-bde492206a8c\",\n      \"label\": \"label-8874\",\n      \"height\": 424,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"209ade49-9f7d-4dca-90ff-9719489a563d\",\n      \"label\": \"label-8875\",\n      \"height\": 174,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"63ad84e5-b20c-4065-be5c-1d9e20599bb8\",\n      \"label\": \"label-8876\",\n      \"height\": 476,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"e1f7b253-dab1-4902-b786-f19409efefab\",\n      \"label\": \"label-8877\",\n      \"height\": 305,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"42f3412d-925e-4ba5-9caa-cae30cf5120f\",\n      \"label\": \"label-8878\",\n      \"height\": 524,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"70ba6c24-b0c9-4544-b111-17118d3c7a9d\",\n      \"label\": \"label-8879\",\n      \"height\": 107,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"7bcc1003-e09a-4b46-8995-38b3c730602a\",\n      \"label\": \"label-8880\",\n      \"height\": 503,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"b4813037-31c0-4687-90da-5411fe81fa9b\",\n      \"label\": \"label-8881\",\n      \"height\": 160,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"15f8a97e-7502-46e2-9340-bd24f08cfcd6\",\n      \"label\": \"label-8882\",\n      \"height\": 238,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"02b5e08b-decd-41cf-af4f-df2ceb53df8a\",\n      \"label\": \"label-8883\",\n      \"height\": 210,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"9db79140-ac0f-439b-a41f-4c6cf72fb2a2\",\n      \"label\": \"label-8884\",\n      \"height\": 200,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"9d21f380-6aa9-4843-9373-976116ed8e9a\",\n      \"label\": \"label-8885\",\n      \"height\": 433,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"79e72149-5984-457a-973a-7cb704f734fd\",\n      \"label\": \"label-8886\",\n      \"height\": 436,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"a1965f34-8a3a-43ff-88a5-90c59f3a7f87\",\n      \"label\": \"label-8887\",\n      \"height\": 348,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"bdbbbb06-da2c-440f-a874-2db6c67afb6d\",\n      \"label\": \"label-8888\",\n      \"height\": 450,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"e398adfb-455f-4ba3-8d58-5bfdfe4ff2a6\",\n      \"label\": \"label-8889\",\n      \"height\": 367,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"5da49e62-f11f-450c-8b97-d18cdd99bebe\",\n      \"label\": \"label-8890\",\n      \"height\": 146,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"7fde32ee-bf21-4f76-a627-67a20ef51549\",\n      \"label\": \"label-8891\",\n      \"height\": 350,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"a893161f-4f28-49bb-92c8-fba7fd31a0db\",\n      \"label\": \"label-8892\",\n      \"height\": 221,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"84039436-abd5-45aa-8660-6217e309a332\",\n      \"label\": \"label-8893\",\n      \"height\": 258,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"cce65c80-24fb-4374-bfcc-c0c31ea72b32\",\n      \"label\": \"label-8894\",\n      \"height\": 506,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"11196e15-4e2d-45ad-bdb3-ccf98ab31c32\",\n      \"label\": \"label-8895\",\n      \"height\": 104,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"c718206c-2901-48ef-80b0-da1b0fff8585\",\n      \"label\": \"label-8896\",\n      \"height\": 468,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"44e7687f-a725-4732-a447-12cd2f91d382\",\n      \"label\": \"label-8897\",\n      \"height\": 120,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"08146ccc-5c17-4fcf-8081-99de43e78d41\",\n      \"label\": \"label-8898\",\n      \"height\": 100,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"f8d9b0dd-ac61-433b-b087-97272f4a9d46\",\n      \"label\": \"label-8899\",\n      \"height\": 359,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"1d25c926-779f-4467-9128-cca9f30430c8\",\n      \"label\": \"label-8900\",\n      \"height\": 358,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"94580e69-bbcb-46a6-a6e6-4e3de115ca9d\",\n      \"label\": \"label-8901\",\n      \"height\": 173,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"8d634fff-f44a-4172-b804-6c8e1a2e2d12\",\n      \"label\": \"label-8902\",\n      \"height\": 62,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"7984859e-1e60-40ca-af87-2b51d4ed304f\",\n      \"label\": \"label-8903\",\n      \"height\": 474,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"3deaa041-9ed1-4561-b240-3c4e52470e6c\",\n      \"label\": \"label-8904\",\n      \"height\": 524,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"dd9a0b9b-36c0-4e0a-8e91-4a03df295879\",\n      \"label\": \"label-8905\",\n      \"height\": 385,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"b637b241-dccc-4b86-84e3-42c23693c16f\",\n      \"label\": \"label-8906\",\n      \"height\": 380,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"23391462-4900-49bb-91df-dd5a5e09be4c\",\n      \"label\": \"label-8907\",\n      \"height\": 473,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"b4bf88fd-73ab-44ac-abf1-44eacb6b6156\",\n      \"label\": \"label-8908\",\n      \"height\": 192,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"ddc26e39-9d32-489b-b08b-934604ae1937\",\n      \"label\": \"label-8909\",\n      \"height\": 493,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"534a9bd1-464d-4ec9-b16f-91253d982677\",\n      \"label\": \"label-8910\",\n      \"height\": 518,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"a7c567ab-a279-45a1-ac88-0ae69b2fd67b\",\n      \"label\": \"label-8911\",\n      \"height\": 341,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"da97b316-b0ad-40f0-94c5-8fe8115d84fb\",\n      \"label\": \"label-8912\",\n      \"height\": 278,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"90586b7a-74dc-4be8-9293-761bb72ac74a\",\n      \"label\": \"label-8913\",\n      \"height\": 340,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"7c5b6c54-3f71-4e9b-a023-30de3709ee85\",\n      \"label\": \"label-8914\",\n      \"height\": 195,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"c8e5ed7c-c845-4452-a395-746eb437a31b\",\n      \"label\": \"label-8915\",\n      \"height\": 486,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"5bea8f22-f611-486d-b3c1-9b6905148115\",\n      \"label\": \"label-8916\",\n      \"height\": 320,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"fa9e4f06-91bd-4bf3-89aa-fbcff5e2e7ef\",\n      \"label\": \"label-8917\",\n      \"height\": 248,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"d5d1c56c-3163-4bd3-8def-9e0851fd5a5b\",\n      \"label\": \"label-8918\",\n      \"height\": 179,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"b33fda69-8530-4dc4-9655-41b63a4d86cb\",\n      \"label\": \"label-8919\",\n      \"height\": 472,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"a7f024b8-2215-4c31-9ffc-ad26b0244118\",\n      \"label\": \"label-8920\",\n      \"height\": 241,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"740a9d59-2ee3-4bdc-992d-7433f649601f\",\n      \"label\": \"label-8921\",\n      \"height\": 303,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"1af60cbc-ede7-470e-b630-0b2af1d37c30\",\n      \"label\": \"label-8922\",\n      \"height\": 342,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"889d2235-b9a4-4811-8de8-babbbc3b2dcb\",\n      \"label\": \"label-8923\",\n      \"height\": 236,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"c5c679bc-8ad9-4f5c-a80d-c42ce5480d10\",\n      \"label\": \"label-8924\",\n      \"height\": 439,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"56dbf6c0-b38e-48b1-8fdf-326d8bbddc54\",\n      \"label\": \"label-8925\",\n      \"height\": 477,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"66e89318-8f85-4999-be44-1b8649a0f409\",\n      \"label\": \"label-8926\",\n      \"height\": 259,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"3472d0de-4738-42e5-a1cc-9448d7a07ba8\",\n      \"label\": \"label-8927\",\n      \"height\": 130,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"d9aa45d2-d39f-40cb-b885-10e86c1fc833\",\n      \"label\": \"label-8928\",\n      \"height\": 72,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"c241dffb-c610-496d-a780-3350cd41dcdc\",\n      \"label\": \"label-8929\",\n      \"height\": 206,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"259567d2-852b-4f12-b227-92347bcf9d2b\",\n      \"label\": \"label-8930\",\n      \"height\": 488,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"db9f55ca-3e7a-4b76-ab7a-3c7406036056\",\n      \"label\": \"label-8931\",\n      \"height\": 170,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"9f9d8f4a-72f0-452b-a555-f72607f4f619\",\n      \"label\": \"label-8932\",\n      \"height\": 529,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"220d28ae-1799-448b-8d44-e116cb0324ff\",\n      \"label\": \"label-8933\",\n      \"height\": 104,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"34bdd4b3-d727-4f53-a773-b1c63ba0bddb\",\n      \"label\": \"label-8934\",\n      \"height\": 457,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"d0702adb-4f0e-4222-99de-f5a5435e9183\",\n      \"label\": \"label-8935\",\n      \"height\": 164,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"8d4067b9-745a-49a5-b9c4-2df85d0dff7c\",\n      \"label\": \"label-8936\",\n      \"height\": 116,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"09b9aaca-73a6-4b78-a46b-99577f81da4d\",\n      \"label\": \"label-8937\",\n      \"height\": 336,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"421818f4-4cb0-464b-a289-c24831b509ef\",\n      \"label\": \"label-8938\",\n      \"height\": 215,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"09bee5f8-b714-41a5-947f-f7f67597dc74\",\n      \"label\": \"label-8939\",\n      \"height\": 56,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"cfc4fb7a-9fbc-48ab-a252-42f24bde25d5\",\n      \"label\": \"label-8940\",\n      \"height\": 454,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"e0148f48-14c9-49c2-8abb-5f43b74c1ef7\",\n      \"label\": \"label-8941\",\n      \"height\": 38,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"f3d3cd5e-353d-44cf-ac6c-168fe56f2158\",\n      \"label\": \"label-8942\",\n      \"height\": 160,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"f70e5fd9-6a69-4537-8298-2e507a91d364\",\n      \"label\": \"label-8943\",\n      \"height\": 232,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"e11360ca-e5db-4ab9-8263-af5ea5de5228\",\n      \"label\": \"label-8944\",\n      \"height\": 354,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"69eac432-c35e-4eab-9435-35ff648e308f\",\n      \"label\": \"label-8945\",\n      \"height\": 334,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"38f7be78-3271-494e-b8c1-a5d6fbdd90bf\",\n      \"label\": \"label-8946\",\n      \"height\": 472,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"2cb17b49-2b87-4c9a-8b17-be67e64f4007\",\n      \"label\": \"label-8947\",\n      \"height\": 46,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"d7a7c256-61b6-4a20-8465-333290bfbdec\",\n      \"label\": \"label-8948\",\n      \"height\": 212,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"c493b601-7233-4c35-8c77-3ef5b5377034\",\n      \"label\": \"label-8949\",\n      \"height\": 459,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"3dcc8de5-5080-4c3a-beef-3fb08db51bc1\",\n      \"label\": \"label-8950\",\n      \"height\": 116,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"d9c3f236-727e-4493-ab21-6c6cbc93b4d3\",\n      \"label\": \"label-8951\",\n      \"height\": 429,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"164cec0c-abfb-49e9-b1e1-78622c11402e\",\n      \"label\": \"label-8952\",\n      \"height\": 528,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"a7983a5a-def2-4530-96c8-0aa4cd4891b8\",\n      \"label\": \"label-8953\",\n      \"height\": 105,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"68662110-2e37-4163-b061-a9677e997135\",\n      \"label\": \"label-8954\",\n      \"height\": 276,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"45969d41-26a4-4c37-86ee-338dd9f00dfc\",\n      \"label\": \"label-8955\",\n      \"height\": 147,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"2216c0f1-ba50-4eee-8ae4-9c115094e591\",\n      \"label\": \"label-8956\",\n      \"height\": 94,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"986d3864-f503-4b5a-825b-d2d24cf18f09\",\n      \"label\": \"label-8957\",\n      \"height\": 346,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"69eca8c4-27d2-40b5-8237-92279757cdb5\",\n      \"label\": \"label-8958\",\n      \"height\": 74,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"e28d9516-7612-4d81-be47-97d0a5786b27\",\n      \"label\": \"label-8959\",\n      \"height\": 459,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"50647621-de31-4564-a05f-22e35be87727\",\n      \"label\": \"label-8960\",\n      \"height\": 429,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"3af1fc08-9f71-47a5-a26b-744432091c9d\",\n      \"label\": \"label-8961\",\n      \"height\": 86,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"f5fd7a3f-da63-4ac3-9c60-8533f4750576\",\n      \"label\": \"label-8962\",\n      \"height\": 331,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"8ef99f1b-b582-45ea-ab7e-98edf12f925d\",\n      \"label\": \"label-8963\",\n      \"height\": 245,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"20797bd1-a75c-41db-a4bb-739b6c0a7de2\",\n      \"label\": \"label-8964\",\n      \"height\": 263,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"a106909f-ddf7-4509-bdec-d0ba91ce745f\",\n      \"label\": \"label-8965\",\n      \"height\": 261,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"e3496267-80ba-49a7-b397-96c2bcbf5e93\",\n      \"label\": \"label-8966\",\n      \"height\": 136,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"ecd2839a-4499-4f7d-a01c-f0df7d0678bb\",\n      \"label\": \"label-8967\",\n      \"height\": 410,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"765b7670-9287-4796-835e-0f33c69cab8c\",\n      \"label\": \"label-8968\",\n      \"height\": 399,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"7cb57950-74ee-49e4-b6df-075ab835572f\",\n      \"label\": \"label-8969\",\n      \"height\": 315,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"af79ab8d-dd62-4c4a-905c-5b888fe2193f\",\n      \"label\": \"label-8970\",\n      \"height\": 243,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"b664b7a7-a361-4ce7-a54c-8542d75b9396\",\n      \"label\": \"label-8971\",\n      \"height\": 40,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"e5e485c7-210b-4ba7-bfaa-cc6e6b3e0286\",\n      \"label\": \"label-8972\",\n      \"height\": 463,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"9ea80bd3-839e-436a-8f30-4fdab925e5c3\",\n      \"label\": \"label-8973\",\n      \"height\": 327,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"de8258cc-cdf1-4c9c-a8b3-79dbf2b86d10\",\n      \"label\": \"label-8974\",\n      \"height\": 420,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"75fed6f0-4eb4-4b45-9006-c2140b46bc72\",\n      \"label\": \"label-8975\",\n      \"height\": 114,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"4b99c002-b46c-4fd1-a5cb-a1bda369e33c\",\n      \"label\": \"label-8976\",\n      \"height\": 73,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"866f3c3d-d045-4620-b067-a38aa974620d\",\n      \"label\": \"label-8977\",\n      \"height\": 58,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"6aa70e81-ea94-4104-9ce6-ccaf916804ec\",\n      \"label\": \"label-8978\",\n      \"height\": 421,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"db03a130-3a1c-457d-8d6e-1b8201cb4401\",\n      \"label\": \"label-8979\",\n      \"height\": 342,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"ad319728-7be4-4de3-8309-56c0228fdeb8\",\n      \"label\": \"label-8980\",\n      \"height\": 102,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"14702fff-ee6a-4e22-b571-94653d3f0d8a\",\n      \"label\": \"label-8981\",\n      \"height\": 247,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"642e4490-be71-4f21-afa2-0bb0aaa6bb26\",\n      \"label\": \"label-8982\",\n      \"height\": 471,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"cd16eac0-1cb1-4a2d-95f9-d4ef1ff330f7\",\n      \"label\": \"label-8983\",\n      \"height\": 391,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"735ab047-c76e-4c7e-ac29-9fcdd2ded401\",\n      \"label\": \"label-8984\",\n      \"height\": 387,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"478ec901-7427-4ad8-ab88-568e504bf8a2\",\n      \"label\": \"label-8985\",\n      \"height\": 165,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"da312c79-9f3f-485d-8c99-7e47dab06ff6\",\n      \"label\": \"label-8986\",\n      \"height\": 44,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"e1d89eda-4ec3-42fa-ac69-444b05433d63\",\n      \"label\": \"label-8987\",\n      \"height\": 297,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"dfd69ec5-c3ae-41f4-bc03-3a3607297450\",\n      \"label\": \"label-8988\",\n      \"height\": 410,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"07d1338d-d850-4e62-a6ce-7efe71b5caa5\",\n      \"label\": \"label-8989\",\n      \"height\": 275,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"1315d2be-d71d-4a95-bf34-875104071575\",\n      \"label\": \"label-8990\",\n      \"height\": 319,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"289088a0-4a46-4752-aa73-c2eddf0c4d1a\",\n      \"label\": \"label-8991\",\n      \"height\": 405,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"1948b410-4974-44ea-bc6b-bf0e9dc14bad\",\n      \"label\": \"label-8992\",\n      \"height\": 472,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"d7d34985-c7ee-437a-96f0-d116d8745be6\",\n      \"label\": \"label-8993\",\n      \"height\": 299,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"d13d2c43-6b01-492e-b1c3-0e3576d3dd76\",\n      \"label\": \"label-8994\",\n      \"height\": 391,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"0490fc08-72e4-4371-b796-eaad46d87bf9\",\n      \"label\": \"label-8995\",\n      \"height\": 435,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"912c0caa-46fc-4546-a3d4-f2edf754035f\",\n      \"label\": \"label-8996\",\n      \"height\": 330,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"bb6293ce-7087-48b9-92c8-d308226e1003\",\n      \"label\": \"label-8997\",\n      \"height\": 366,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"e72c4519-c690-4cb2-992b-ceff6f7b890b\",\n      \"label\": \"label-8998\",\n      \"height\": 405,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"9ec6a9f9-3dd5-4c1d-813a-2b5674bb15c5\",\n      \"label\": \"label-8999\",\n      \"height\": 371,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"69895326-f51c-4ad2-a374-4d935e42e2f9\",\n      \"label\": \"label-9000\",\n      \"height\": 103,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"753b5e4a-3a5e-4220-844b-e5d682848c27\",\n      \"label\": \"label-9001\",\n      \"height\": 326,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"11983fdd-7584-412c-ae80-892e22c3896d\",\n      \"label\": \"label-9002\",\n      \"height\": 501,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"b9c8292b-ad2a-43a4-b59a-5934ae0e793e\",\n      \"label\": \"label-9003\",\n      \"height\": 371,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"9a109916-1c7d-4bd2-8dde-8f4cd60a7af9\",\n      \"label\": \"label-9004\",\n      \"height\": 420,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"e2e33fb4-55fc-4696-bf67-68b17700ddb0\",\n      \"label\": \"label-9005\",\n      \"height\": 227,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"7ecaf537-d092-4d1e-a49a-0dd48a03d6af\",\n      \"label\": \"label-9006\",\n      \"height\": 244,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"1114dad9-60b6-4de7-b56d-c733999c4fb0\",\n      \"label\": \"label-9007\",\n      \"height\": 431,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"aad89ee1-c0fd-40bc-aa27-f47fe1d667ff\",\n      \"label\": \"label-9008\",\n      \"height\": 335,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"69610739-e139-4db5-8a6d-ebb2b3df9abf\",\n      \"label\": \"label-9009\",\n      \"height\": 88,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"1f653011-1cce-496d-8203-9c67f582670f\",\n      \"label\": \"label-9010\",\n      \"height\": 492,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"dc445f00-f4ac-4e49-8c58-e6697bbbda51\",\n      \"label\": \"label-9011\",\n      \"height\": 239,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"6867d0e0-5464-49ee-9216-11b7ac587689\",\n      \"label\": \"label-9012\",\n      \"height\": 233,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"765320da-a36f-4b51-906e-2a78652dc434\",\n      \"label\": \"label-9013\",\n      \"height\": 403,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"65686375-1728-4702-8989-51189a3d3abb\",\n      \"label\": \"label-9014\",\n      \"height\": 74,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"31dd7c81-8d46-4e44-8955-f4f2292c3773\",\n      \"label\": \"label-9015\",\n      \"height\": 370,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"ecb86253-ba0c-439d-a4be-63aad031d079\",\n      \"label\": \"label-9016\",\n      \"height\": 392,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"7e4adecf-aa34-4200-a35c-9640424649a8\",\n      \"label\": \"label-9017\",\n      \"height\": 118,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"667fb574-b46d-4aa2-b347-1e70ba3f0377\",\n      \"label\": \"label-9018\",\n      \"height\": 227,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"fbfaf908-de6b-4feb-bc49-c8d38910bdb7\",\n      \"label\": \"label-9019\",\n      \"height\": 481,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"c5876577-a883-4de2-a0dd-7fdeaf82b5bd\",\n      \"label\": \"label-9020\",\n      \"height\": 233,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"3b78f5b2-615c-4818-9e4c-ea2dd4abc72d\",\n      \"label\": \"label-9021\",\n      \"height\": 239,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"cd872d4a-1235-41f3-9a25-34824e500b89\",\n      \"label\": \"label-9022\",\n      \"height\": 185,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"e896bb70-50d9-4a53-9828-b6578d9d939d\",\n      \"label\": \"label-9023\",\n      \"height\": 70,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"37de137f-9810-438d-b01a-e7038c182360\",\n      \"label\": \"label-9024\",\n      \"height\": 58,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"5b3d553e-4a9d-4649-93ff-ed8fb9ee8e96\",\n      \"label\": \"label-9025\",\n      \"height\": 482,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"d1279e43-430a-469a-a62e-ee4c57835364\",\n      \"label\": \"label-9026\",\n      \"height\": 496,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"e0b16ee4-9695-4f7a-8e00-468ca4472199\",\n      \"label\": \"label-9027\",\n      \"height\": 296,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"20e4ef9e-5555-47a4-b3f3-f7c19524c9d2\",\n      \"label\": \"label-9028\",\n      \"height\": 250,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"f26ba519-04fe-4e69-9515-3cef20f05dd1\",\n      \"label\": \"label-9029\",\n      \"height\": 362,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"33a5eb87-f46f-40db-a9e0-e52a046f348a\",\n      \"label\": \"label-9030\",\n      \"height\": 91,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"91638b41-424a-4ec7-bb2a-2d02ae3a2973\",\n      \"label\": \"label-9031\",\n      \"height\": 318,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"7fdedb17-62e9-498f-9e46-c63d25ae253e\",\n      \"label\": \"label-9032\",\n      \"height\": 341,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"7e5b69ee-a9e8-4d94-9365-8715c8f970bb\",\n      \"label\": \"label-9033\",\n      \"height\": 454,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"92793619-5ffe-4487-aad6-1557e4db0cc6\",\n      \"label\": \"label-9034\",\n      \"height\": 409,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"b3d9ea48-09ef-4e72-a446-376867b745ca\",\n      \"label\": \"label-9035\",\n      \"height\": 243,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"d277e8fa-d661-4a63-8ebd-7f61f7f6dd68\",\n      \"label\": \"label-9036\",\n      \"height\": 242,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"af53981b-5781-49e3-8625-ec1e6b5fa40b\",\n      \"label\": \"label-9037\",\n      \"height\": 186,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"be0fad98-e738-41dc-b0ac-9f6246fe5604\",\n      \"label\": \"label-9038\",\n      \"height\": 375,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"ab77e34f-51a8-4512-a01e-c57481026947\",\n      \"label\": \"label-9039\",\n      \"height\": 195,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"a20f5032-eb7f-4f6a-94dd-bf92abb1386e\",\n      \"label\": \"label-9040\",\n      \"height\": 256,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"f590f0b4-3866-419f-84c3-c3d933642549\",\n      \"label\": \"label-9041\",\n      \"height\": 328,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"1a768a74-5529-4715-91a6-d8e81f8dbdc2\",\n      \"label\": \"label-9042\",\n      \"height\": 124,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"f6a20d38-1a01-4cc5-9a39-f047a863057f\",\n      \"label\": \"label-9043\",\n      \"height\": 531,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"ed0d2cb0-adc8-4b46-ade1-98ba1ae20eb1\",\n      \"label\": \"label-9044\",\n      \"height\": 51,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"ddfec461-b857-4acd-8389-a02f132b21a0\",\n      \"label\": \"label-9045\",\n      \"height\": 58,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"01911bf5-1a12-404e-a445-a3d49c6f4816\",\n      \"label\": \"label-9046\",\n      \"height\": 150,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"7aac13b5-4594-4dca-82f1-fd6cded1ec35\",\n      \"label\": \"label-9047\",\n      \"height\": 238,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"518b8a27-1813-4cb7-a063-1fd2d772e8f5\",\n      \"label\": \"label-9048\",\n      \"height\": 491,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"54d99903-be06-44af-8620-b6c7641da757\",\n      \"label\": \"label-9049\",\n      \"height\": 338,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"3bddcba3-4a43-4e24-9fa3-3dc52e07cdda\",\n      \"label\": \"label-9050\",\n      \"height\": 193,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"bf166f78-97c8-42da-9361-3e5ad716a545\",\n      \"label\": \"label-9051\",\n      \"height\": 78,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"69aff0b5-7642-4d08-86f9-07ff96bb06ed\",\n      \"label\": \"label-9052\",\n      \"height\": 521,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"64a5b4d2-1543-4fce-a00e-1cdcb5ca8e4c\",\n      \"label\": \"label-9053\",\n      \"height\": 362,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"c7bf25c2-3c93-4f43-92bc-84c5ef2183e2\",\n      \"label\": \"label-9054\",\n      \"height\": 248,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"a13e7d0b-4f4f-4566-aaf6-b067086f83b3\",\n      \"label\": \"label-9055\",\n      \"height\": 362,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"d5d1bd22-0ed8-452f-82cc-70cfdd6b8147\",\n      \"label\": \"label-9056\",\n      \"height\": 290,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"37bc6728-8d3a-48df-ab87-f8950fc90957\",\n      \"label\": \"label-9057\",\n      \"height\": 347,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"1c04347c-2d6b-4c4a-9e1f-93e1a0e9a9d0\",\n      \"label\": \"label-9058\",\n      \"height\": 141,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"2d42f626-fbe1-4122-89fa-6fc04b5368ed\",\n      \"label\": \"label-9059\",\n      \"height\": 432,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"1388956c-328d-4191-a90a-0db80826c0ff\",\n      \"label\": \"label-9060\",\n      \"height\": 328,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"8d0ab7a4-4379-4147-844d-086cce29b8fd\",\n      \"label\": \"label-9061\",\n      \"height\": 416,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"7d1de24d-67fa-42cd-9897-88f56773cff4\",\n      \"label\": \"label-9062\",\n      \"height\": 251,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"e4fcb6f3-035a-4b60-ae0f-bc685cd5ca65\",\n      \"label\": \"label-9063\",\n      \"height\": 143,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"6c56ad88-28f8-4767-b914-818c2dd3744a\",\n      \"label\": \"label-9064\",\n      \"height\": 298,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"06b1c56b-c39b-4139-a06a-7c9a7cd99ae6\",\n      \"label\": \"label-9065\",\n      \"height\": 191,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"068c9b2e-73d5-4b52-9bce-c2d7040221fd\",\n      \"label\": \"label-9066\",\n      \"height\": 195,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"961ac68b-a62e-49c2-ab11-67a18d2c1c6b\",\n      \"label\": \"label-9067\",\n      \"height\": 124,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"53dd2f9f-9fea-4c9e-9689-d5642d7b4424\",\n      \"label\": \"label-9068\",\n      \"height\": 233,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"56f39bc7-4af0-4266-baa1-6e26a131771d\",\n      \"label\": \"label-9069\",\n      \"height\": 256,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"c1663faa-1596-4f9e-a6a2-9c0ee8dbabbe\",\n      \"label\": \"label-9070\",\n      \"height\": 414,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"9b9c4ed4-574e-4e92-b3f3-63ff15d060bf\",\n      \"label\": \"label-9071\",\n      \"height\": 353,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"ee2d4790-77f4-4937-a2e4-3e1a9149bf98\",\n      \"label\": \"label-9072\",\n      \"height\": 263,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"4859ad52-02e7-4945-8140-28bf64975bea\",\n      \"label\": \"label-9073\",\n      \"height\": 197,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"9eeeee40-f66d-4654-9446-9c042ac7d351\",\n      \"label\": \"label-9074\",\n      \"height\": 339,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"8d99c666-6152-4474-8441-7e3dbe4825d0\",\n      \"label\": \"label-9075\",\n      \"height\": 129,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"063ba6f4-cb3e-4a85-ad31-dec5f60377ef\",\n      \"label\": \"label-9076\",\n      \"height\": 297,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"36af8fd9-6a13-4c37-84ba-e5da8a142f09\",\n      \"label\": \"label-9077\",\n      \"height\": 189,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"08f35653-75fc-4cc4-8c0a-ec2d03e07e3a\",\n      \"label\": \"label-9078\",\n      \"height\": 220,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"bef8aaf5-6ba7-4cf4-bc08-6022b65415de\",\n      \"label\": \"label-9079\",\n      \"height\": 106,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"545eacfe-e939-4dbe-897d-e60f0fa7de7f\",\n      \"label\": \"label-9080\",\n      \"height\": 41,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"e9b35c3a-4a2e-4f53-84b0-8421d455e6dc\",\n      \"label\": \"label-9081\",\n      \"height\": 485,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"e4942a2e-88d5-4257-a647-624ad6406443\",\n      \"label\": \"label-9082\",\n      \"height\": 313,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"22a1adfc-9236-49fe-ab4c-3e2b50a75ecd\",\n      \"label\": \"label-9083\",\n      \"height\": 256,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"72ae3f6c-b1b9-4a0a-8d23-3069938d9f48\",\n      \"label\": \"label-9084\",\n      \"height\": 272,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"87a6588d-2114-4523-92ff-f2ec14770277\",\n      \"label\": \"label-9085\",\n      \"height\": 298,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"bff874c9-2b02-4796-8fb6-5a48407f2c4c\",\n      \"label\": \"label-9086\",\n      \"height\": 225,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"8a58a18b-a4ae-43b4-92b8-fc8a2d3bca53\",\n      \"label\": \"label-9087\",\n      \"height\": 309,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"1ede14a1-8751-4793-949d-6816a184e547\",\n      \"label\": \"label-9088\",\n      \"height\": 466,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"54a7c31d-f6d3-44c1-b617-3afcdfc3d729\",\n      \"label\": \"label-9089\",\n      \"height\": 318,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"a9d81cd1-e9d6-4f06-951c-8013888bb22e\",\n      \"label\": \"label-9090\",\n      \"height\": 500,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"57e5225f-888d-4755-9963-8e8171509d23\",\n      \"label\": \"label-9091\",\n      \"height\": 506,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"dc638b56-48bd-4e51-baa5-ba6ddd67898e\",\n      \"label\": \"label-9092\",\n      \"height\": 384,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"64a33cdb-807a-41d2-b74f-7f8cb027ac63\",\n      \"label\": \"label-9093\",\n      \"height\": 518,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"3ca251a0-242d-4b35-a1d9-e510b62828cb\",\n      \"label\": \"label-9094\",\n      \"height\": 460,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"ee5eca46-8f8c-446d-9108-cbb444f1bc32\",\n      \"label\": \"label-9095\",\n      \"height\": 295,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"7d254098-e8ab-4c69-b627-d1c6f8aded1d\",\n      \"label\": \"label-9096\",\n      \"height\": 224,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"8e9681be-5c85-44ac-8e23-9a42bccd2602\",\n      \"label\": \"label-9097\",\n      \"height\": 101,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"240b0525-7030-42b4-8b5c-72bde9b6abc7\",\n      \"label\": \"label-9098\",\n      \"height\": 352,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"442830ae-6983-4c97-9672-b82cf289c26c\",\n      \"label\": \"label-9099\",\n      \"height\": 252,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"c2f48b0c-0359-479b-a4ae-977201ebfb10\",\n      \"label\": \"label-9100\",\n      \"height\": 513,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"82529f79-070a-4c2d-aec0-83dcb8ec425d\",\n      \"label\": \"label-9101\",\n      \"height\": 74,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"b933f936-a303-4d75-a84a-0ad36d809cff\",\n      \"label\": \"label-9102\",\n      \"height\": 474,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"154c4c7c-a8ab-4c4c-b668-d34891faa9ac\",\n      \"label\": \"label-9103\",\n      \"height\": 225,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"48f67008-8f4b-45f8-b5c2-7211fd68f990\",\n      \"label\": \"label-9104\",\n      \"height\": 416,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"cb8e6167-afaa-4a31-aef4-2e8000c5de29\",\n      \"label\": \"label-9105\",\n      \"height\": 356,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"20cef492-6edb-45ac-947b-66a24e3fe8e5\",\n      \"label\": \"label-9106\",\n      \"height\": 524,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"b192560e-136c-4eac-ad41-960764c61763\",\n      \"label\": \"label-9107\",\n      \"height\": 400,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"20d03954-05a8-4027-b109-2924205563f2\",\n      \"label\": \"label-9108\",\n      \"height\": 202,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"081cf06f-d6d9-443b-b360-1d7976037ad9\",\n      \"label\": \"label-9109\",\n      \"height\": 450,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"a4126932-ca6d-4135-8825-1451a8f4a9d1\",\n      \"label\": \"label-9110\",\n      \"height\": 90,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"75b0291e-e8bd-454d-bd8a-19240c602459\",\n      \"label\": \"label-9111\",\n      \"height\": 467,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"93fa744b-d25c-485c-8752-1640df593512\",\n      \"label\": \"label-9112\",\n      \"height\": 166,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"8ddbcaef-c51a-4c5f-b7d8-6e1e62bbeeb5\",\n      \"label\": \"label-9113\",\n      \"height\": 444,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"c166e4be-f1e9-42c9-abec-3d15669a2d54\",\n      \"label\": \"label-9114\",\n      \"height\": 98,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"b93b7350-cde4-42b1-a005-2f13b5ce79e1\",\n      \"label\": \"label-9115\",\n      \"height\": 523,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"6c621376-5daa-4323-ad46-7e317bb4b0f6\",\n      \"label\": \"label-9116\",\n      \"height\": 511,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"36b341cd-d294-4267-9075-df4008a45526\",\n      \"label\": \"label-9117\",\n      \"height\": 501,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"c49f929f-f054-4d84-b501-3aaa5c3731ae\",\n      \"label\": \"label-9118\",\n      \"height\": 209,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"5a29f334-250b-4fc8-93ff-a89a8d37cbb9\",\n      \"label\": \"label-9119\",\n      \"height\": 184,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"fffbb71c-ad50-4245-97c5-d7bf0993ac3b\",\n      \"label\": \"label-9120\",\n      \"height\": 145,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"68605e2d-a39f-4984-a2f5-c07b0812905b\",\n      \"label\": \"label-9121\",\n      \"height\": 432,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"52cbb704-b6a0-49d5-9ef8-c047ad2ca7ae\",\n      \"label\": \"label-9122\",\n      \"height\": 158,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"f0cd2b79-776d-4d9e-9506-1fcb2334ed91\",\n      \"label\": \"label-9123\",\n      \"height\": 506,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"ddecd8a9-9d47-4901-8d02-95919bd56d6a\",\n      \"label\": \"label-9124\",\n      \"height\": 76,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"661cbda7-a06f-41c8-86bc-1a07daaab721\",\n      \"label\": \"label-9125\",\n      \"height\": 380,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"2e49a827-8983-4275-bd44-fe6f69f8c4de\",\n      \"label\": \"label-9126\",\n      \"height\": 241,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"c6a2c853-efa4-4f4e-a4d1-632cfcc0b673\",\n      \"label\": \"label-9127\",\n      \"height\": 326,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"b6b8c134-d62a-4272-90a4-f265908ac8b5\",\n      \"label\": \"label-9128\",\n      \"height\": 304,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"2f183ea8-0208-4b9b-b8a8-26181217aa93\",\n      \"label\": \"label-9129\",\n      \"height\": 63,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"017f7f12-e73b-4c38-a0fa-7b570b31ba1a\",\n      \"label\": \"label-9130\",\n      \"height\": 39,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"c8c00038-be10-4cd9-8e1e-dad09091525a\",\n      \"label\": \"label-9131\",\n      \"height\": 103,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"7854b0a2-9fb1-43d9-9b69-ca0fda5459c2\",\n      \"label\": \"label-9132\",\n      \"height\": 310,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"b0d26e9b-7419-411e-b844-d673e0080dea\",\n      \"label\": \"label-9133\",\n      \"height\": 355,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"6e1dc833-3fbc-418a-aab8-03214c7d02e4\",\n      \"label\": \"label-9134\",\n      \"height\": 422,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"16d7dd76-5a04-479e-b6c7-b984405db48d\",\n      \"label\": \"label-9135\",\n      \"height\": 433,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"09658270-3104-4573-adb8-a292b4292bbd\",\n      \"label\": \"label-9136\",\n      \"height\": 83,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"11c139d5-56d2-4a95-a346-3acfd2da29b1\",\n      \"label\": \"label-9137\",\n      \"height\": 151,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"51e23c44-8859-4ed2-b1c6-9fceaae8d50b\",\n      \"label\": \"label-9138\",\n      \"height\": 426,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"f0e80496-e15d-4063-89a6-6cae183224a1\",\n      \"label\": \"label-9139\",\n      \"height\": 296,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"c7df1fd1-8912-415c-ae03-0aad3012b779\",\n      \"label\": \"label-9140\",\n      \"height\": 221,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"c35b88b6-97db-4b61-9278-0edc1e99349d\",\n      \"label\": \"label-9141\",\n      \"height\": 251,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"8ccec0a9-c741-45ae-a991-4c6580f51b38\",\n      \"label\": \"label-9142\",\n      \"height\": 325,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"b2f563f3-b341-4455-a77e-6150510ad705\",\n      \"label\": \"label-9143\",\n      \"height\": 438,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"a1cf9cdc-4f44-4c82-93e0-a36112cd220b\",\n      \"label\": \"label-9144\",\n      \"height\": 434,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"12abeb54-f4b2-4dd9-948b-ca08ebe5c0ff\",\n      \"label\": \"label-9145\",\n      \"height\": 529,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"4af51f29-c051-42e6-b532-b91eb37168c2\",\n      \"label\": \"label-9146\",\n      \"height\": 245,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"9523c828-a3b5-40ee-8794-3b4e84322d39\",\n      \"label\": \"label-9147\",\n      \"height\": 192,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"c10679e3-ebba-46c6-a89b-e6db86cbc2ac\",\n      \"label\": \"label-9148\",\n      \"height\": 152,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"1cb6b707-6bce-4cb2-94aa-6e64931913a3\",\n      \"label\": \"label-9149\",\n      \"height\": 386,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"0454bf4a-f21e-4ea6-b03f-0d133015944a\",\n      \"label\": \"label-9150\",\n      \"height\": 512,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"0b0fb5ea-3441-4b75-b5bb-82f7b84311b0\",\n      \"label\": \"label-9151\",\n      \"height\": 47,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"fa94a1ba-cf1f-4227-9339-d8d49c1e31bd\",\n      \"label\": \"label-9152\",\n      \"height\": 499,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"030e8908-6808-4b21-b029-1f4e01aad000\",\n      \"label\": \"label-9153\",\n      \"height\": 202,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"8eb70b12-5b5c-4d01-ae64-86d96f76530c\",\n      \"label\": \"label-9154\",\n      \"height\": 450,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"1f6f3a9c-6567-4fa2-85e9-f0dc41439c5a\",\n      \"label\": \"label-9155\",\n      \"height\": 522,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"f573ac92-feb0-4b42-b77b-073a6b43b268\",\n      \"label\": \"label-9156\",\n      \"height\": 487,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"3e159d12-cdac-48e4-aee7-c4a3ba275e70\",\n      \"label\": \"label-9157\",\n      \"height\": 258,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"c90ae750-d1c1-4bf1-bbad-c26f8e9902fd\",\n      \"label\": \"label-9158\",\n      \"height\": 386,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"414b29de-7446-4b8b-ba4a-c3a9712767d4\",\n      \"label\": \"label-9159\",\n      \"height\": 338,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"b3d2725c-2f95-4d0a-9dff-402648b90340\",\n      \"label\": \"label-9160\",\n      \"height\": 345,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"a341aed1-8830-4f11-aa3c-2c0f96327f3c\",\n      \"label\": \"label-9161\",\n      \"height\": 124,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"ab7e5aa7-3d01-4531-b04b-760e46ef94af\",\n      \"label\": \"label-9162\",\n      \"height\": 70,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"8d02f3c2-3ea4-4acd-9259-ea0e89a3cb01\",\n      \"label\": \"label-9163\",\n      \"height\": 503,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"16239daf-3507-4c82-bd2d-bffc1ac9b55b\",\n      \"label\": \"label-9164\",\n      \"height\": 223,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"67757e30-0840-49ec-97b7-1169631ad246\",\n      \"label\": \"label-9165\",\n      \"height\": 59,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"79b4fde4-ab9f-460d-a7d0-bff4537d0501\",\n      \"label\": \"label-9166\",\n      \"height\": 406,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"07c49804-6877-4c07-b31b-f598ca2700a9\",\n      \"label\": \"label-9167\",\n      \"height\": 397,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"02e6c3d8-b016-4f8d-b39f-d15d4e761ddf\",\n      \"label\": \"label-9168\",\n      \"height\": 443,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"d45d011a-39ab-4fa0-9cd1-1a51698f08e5\",\n      \"label\": \"label-9169\",\n      \"height\": 191,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"ac1498ef-3979-4eff-beae-575ff0984609\",\n      \"label\": \"label-9170\",\n      \"height\": 320,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"3ace9f37-8f4d-4045-9a1b-acc9a883e9b7\",\n      \"label\": \"label-9171\",\n      \"height\": 445,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"f10bafc0-1230-4c9c-ae4a-08b573c08342\",\n      \"label\": \"label-9172\",\n      \"height\": 444,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"fcfa33e7-faed-4586-beb2-6ce963b44382\",\n      \"label\": \"label-9173\",\n      \"height\": 268,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"145939ff-cf9b-4efa-a541-ade7707a16c6\",\n      \"label\": \"label-9174\",\n      \"height\": 198,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"e6389220-630f-49c1-ae97-d5d4b66744ea\",\n      \"label\": \"label-9175\",\n      \"height\": 158,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"ef0fad50-fe30-49d5-abfa-3a5d73297723\",\n      \"label\": \"label-9176\",\n      \"height\": 371,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"5f3e80cf-ac1e-40df-9096-b9ec986fe19c\",\n      \"label\": \"label-9177\",\n      \"height\": 480,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"d3335af5-b250-4348-90c4-cdd22096cf17\",\n      \"label\": \"label-9178\",\n      \"height\": 412,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"01d125e3-b521-4829-9541-326cd273bc1d\",\n      \"label\": \"label-9179\",\n      \"height\": 95,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"db341a88-60a7-49e5-b129-4cc2829cc46d\",\n      \"label\": \"label-9180\",\n      \"height\": 34,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"a3cb738f-c878-4f1b-b4f3-1b028883755d\",\n      \"label\": \"label-9181\",\n      \"height\": 89,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"a0aff04d-b7c7-45e6-953c-7a035f5ea0f1\",\n      \"label\": \"label-9182\",\n      \"height\": 320,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"cd5e969a-834f-4d8d-a8d3-d5a6adf7c86b\",\n      \"label\": \"label-9183\",\n      \"height\": 102,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"3080aa1b-4128-4843-8cac-1c7b9edf1133\",\n      \"label\": \"label-9184\",\n      \"height\": 249,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"cde889bb-b461-40c0-9839-31e7cfd1708c\",\n      \"label\": \"label-9185\",\n      \"height\": 233,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"e8cb51e9-e992-4493-ba33-7fe792e73b71\",\n      \"label\": \"label-9186\",\n      \"height\": 525,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"2f65e1dd-02a8-4fd3-ba43-15ef5e0f1386\",\n      \"label\": \"label-9187\",\n      \"height\": 246,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"b32de1b1-7616-4899-afa9-1ca9247af70c\",\n      \"label\": \"label-9188\",\n      \"height\": 515,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"88022d6c-288e-475b-9539-fa075d8bb7a6\",\n      \"label\": \"label-9189\",\n      \"height\": 240,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"df08db21-3720-4c22-aa28-d14c55fd66c3\",\n      \"label\": \"label-9190\",\n      \"height\": 471,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"45e870cf-e075-40f0-80d0-766160740f84\",\n      \"label\": \"label-9191\",\n      \"height\": 531,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"80187638-acf2-4fa5-b8b3-e3e743d5d7fd\",\n      \"label\": \"label-9192\",\n      \"height\": 456,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"7f2c198d-ba36-47e3-bae7-3a66ffad2e68\",\n      \"label\": \"label-9193\",\n      \"height\": 162,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"51936779-fcbd-49de-8db3-cd9b8a7db31e\",\n      \"label\": \"label-9194\",\n      \"height\": 192,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"a11b14d6-41bc-4c50-8a3d-fa2f0b401141\",\n      \"label\": \"label-9195\",\n      \"height\": 502,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"6c200dbc-36e5-4683-a71e-a554ad1d8461\",\n      \"label\": \"label-9196\",\n      \"height\": 496,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"7034403d-e59b-4f51-8b29-fdcec3fc2911\",\n      \"label\": \"label-9197\",\n      \"height\": 249,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"3364a6c9-2d1d-4683-97d5-fed4f0bcdd94\",\n      \"label\": \"label-9198\",\n      \"height\": 531,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"82e7e803-95d2-404b-911c-2be2f13d155a\",\n      \"label\": \"label-9199\",\n      \"height\": 238,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"6c65bdac-5dcb-492e-97da-c7af3b1bcf4c\",\n      \"label\": \"label-9200\",\n      \"height\": 387,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"2ef3a6ba-8db6-4a78-b193-56da23df179c\",\n      \"label\": \"label-9201\",\n      \"height\": 348,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"947d638c-7b4a-4e62-abc5-c81253d7eadf\",\n      \"label\": \"label-9202\",\n      \"height\": 489,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"225dcb53-252f-41af-b660-cf47fc901f16\",\n      \"label\": \"label-9203\",\n      \"height\": 288,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"fe1c490f-728f-42de-81c2-1c5e46bfa2de\",\n      \"label\": \"label-9204\",\n      \"height\": 36,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"b90fd61f-cbb7-4310-a7d0-4d9774bd8ba8\",\n      \"label\": \"label-9205\",\n      \"height\": 273,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"50dd397c-2409-438b-8d42-3fb596d8647d\",\n      \"label\": \"label-9206\",\n      \"height\": 269,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"45139c31-044b-4041-9dda-82d8846c5c22\",\n      \"label\": \"label-9207\",\n      \"height\": 222,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"4336ba1d-0e80-4c25-8c77-eb08c49618c1\",\n      \"label\": \"label-9208\",\n      \"height\": 340,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"b44fcfea-f68a-482a-8e36-81b50feed614\",\n      \"label\": \"label-9209\",\n      \"height\": 423,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"a8bf046e-d446-48ea-b67a-c35c0c6e12e0\",\n      \"label\": \"label-9210\",\n      \"height\": 71,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"2ff404b2-af62-4ef0-bc68-df964b455f6d\",\n      \"label\": \"label-9211\",\n      \"height\": 175,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"0a7ae724-594f-481f-805a-5f7b14d845c0\",\n      \"label\": \"label-9212\",\n      \"height\": 195,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"8e7affee-7ed7-4ce4-8226-3be8ef0d7cea\",\n      \"label\": \"label-9213\",\n      \"height\": 357,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"b464dde2-69cc-4656-800a-f4dbe861e52b\",\n      \"label\": \"label-9214\",\n      \"height\": 217,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"582333cb-3391-44b8-a0df-da43b3e2148c\",\n      \"label\": \"label-9215\",\n      \"height\": 262,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"24fedfb9-27b4-48ef-ac1e-33639ac7953e\",\n      \"label\": \"label-9216\",\n      \"height\": 270,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"632a3de2-8182-4365-a82b-9d740bfb1fec\",\n      \"label\": \"label-9217\",\n      \"height\": 308,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"7013e077-bc77-4715-b187-0c47e25aaeb8\",\n      \"label\": \"label-9218\",\n      \"height\": 106,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"502e86d4-1b9e-4bfa-8cba-594cc3176114\",\n      \"label\": \"label-9219\",\n      \"height\": 241,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"dfaabc86-494b-4513-ad22-b2df008130ba\",\n      \"label\": \"label-9220\",\n      \"height\": 426,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"a2143c01-02b6-4868-9c0f-8be1360aa3ff\",\n      \"label\": \"label-9221\",\n      \"height\": 51,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"fd65f656-1c60-40eb-bee5-98ddcafb3270\",\n      \"label\": \"label-9222\",\n      \"height\": 314,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"5e49d343-1fb7-4fe4-b444-24dffc079ee3\",\n      \"label\": \"label-9223\",\n      \"height\": 338,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"b35a5f57-8aa2-474b-8c9f-7c31d789be08\",\n      \"label\": \"label-9224\",\n      \"height\": 345,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"959d98ed-4846-438c-b904-6c87482f9399\",\n      \"label\": \"label-9225\",\n      \"height\": 73,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"3ea92695-71ef-4db7-addf-bd527e690867\",\n      \"label\": \"label-9226\",\n      \"height\": 261,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"a464f06e-7327-40f7-b969-66e602c11b9c\",\n      \"label\": \"label-9227\",\n      \"height\": 43,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"7c5f7496-505a-4fa5-bdc6-cf8274dac5b4\",\n      \"label\": \"label-9228\",\n      \"height\": 287,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"ae978afb-0ba6-4fc5-b0d6-6364b702aa5d\",\n      \"label\": \"label-9229\",\n      \"height\": 506,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"eed56352-0e9f-4a9a-a581-7c02248adba8\",\n      \"label\": \"label-9230\",\n      \"height\": 515,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"518395ea-3f17-4700-876a-6139dab92014\",\n      \"label\": \"label-9231\",\n      \"height\": 111,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"cb4ca160-986e-4971-be8c-ffc7e1015602\",\n      \"label\": \"label-9232\",\n      \"height\": 290,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"8ad80b8e-2936-4493-8c41-1bf86ecf726c\",\n      \"label\": \"label-9233\",\n      \"height\": 407,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"175f8781-001d-4458-831a-2d3e18dd358b\",\n      \"label\": \"label-9234\",\n      \"height\": 347,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"3797adb9-b628-44b5-b7dc-245e5673b8b7\",\n      \"label\": \"label-9235\",\n      \"height\": 477,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"0fbd7c84-5ca4-4067-8eaf-99a6f5dadfbd\",\n      \"label\": \"label-9236\",\n      \"height\": 381,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"f2de1fb5-94e5-4806-b312-9611fcb5271e\",\n      \"label\": \"label-9237\",\n      \"height\": 193,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"a970ff70-d8ea-43c0-bf41-887dfe160147\",\n      \"label\": \"label-9238\",\n      \"height\": 217,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"c83dea58-42e4-467b-aa5e-850c83dea3ca\",\n      \"label\": \"label-9239\",\n      \"height\": 104,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"9f713a5e-da92-435e-9c41-bdfcc76f1f86\",\n      \"label\": \"label-9240\",\n      \"height\": 151,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"2f2a1954-8799-4603-90c9-a51612305a16\",\n      \"label\": \"label-9241\",\n      \"height\": 524,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"71004702-3fde-41c9-ae2b-42694a43a39c\",\n      \"label\": \"label-9242\",\n      \"height\": 485,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"2546852c-903a-49dc-9c44-8010ea0e39cc\",\n      \"label\": \"label-9243\",\n      \"height\": 241,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"7d18585b-17bb-4a95-ad1a-b8e4168ddb2e\",\n      \"label\": \"label-9244\",\n      \"height\": 191,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"2ee18d6e-12c5-4e11-88b0-aa8b31f1dfde\",\n      \"label\": \"label-9245\",\n      \"height\": 377,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"c0b154de-d623-42a6-84c2-f80ddc800447\",\n      \"label\": \"label-9246\",\n      \"height\": 431,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"bb117c12-5a98-4be8-bc8e-ee4f0c18e0fc\",\n      \"label\": \"label-9247\",\n      \"height\": 225,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"c0d1906d-b58d-460d-8f95-644673be081d\",\n      \"label\": \"label-9248\",\n      \"height\": 220,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"cb5a8fa1-2e0c-4478-a7e2-2528cd9c2d0e\",\n      \"label\": \"label-9249\",\n      \"height\": 283,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"58d048ba-4920-4353-946a-b7d1e2feb4e2\",\n      \"label\": \"label-9250\",\n      \"height\": 407,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"bc131fb0-8ab7-497c-8f2e-5744ba65992e\",\n      \"label\": \"label-9251\",\n      \"height\": 213,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"3dcc8451-684c-497f-b5b2-43f1f82b0f75\",\n      \"label\": \"label-9252\",\n      \"height\": 46,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"43394686-dc28-4138-b113-0b09668f9392\",\n      \"label\": \"label-9253\",\n      \"height\": 198,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"4199803e-ec74-4955-81b3-7b049f4099fc\",\n      \"label\": \"label-9254\",\n      \"height\": 365,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"c0b1750c-068e-4a7e-ab24-3d497c658827\",\n      \"label\": \"label-9255\",\n      \"height\": 276,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"5eed7497-110e-4c0d-bacb-e9f1553316e1\",\n      \"label\": \"label-9256\",\n      \"height\": 111,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"50f66fe1-8ae2-4345-aa7e-f1e4169f4f23\",\n      \"label\": \"label-9257\",\n      \"height\": 66,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"ba92cd12-6067-413f-9401-23f5056ba4c1\",\n      \"label\": \"label-9258\",\n      \"height\": 101,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"a92ae11a-fa50-406f-8f90-169532d2987f\",\n      \"label\": \"label-9259\",\n      \"height\": 531,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"88b2aabe-acc6-47e5-a166-473bcd62e482\",\n      \"label\": \"label-9260\",\n      \"height\": 367,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"77809753-9a8d-4329-b62f-2eae30ac636a\",\n      \"label\": \"label-9261\",\n      \"height\": 461,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"a92983a7-0463-4452-a57b-da6acbabec9b\",\n      \"label\": \"label-9262\",\n      \"height\": 221,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"fdc77b7f-87e6-4b8a-9f29-fd5e196e98d3\",\n      \"label\": \"label-9263\",\n      \"height\": 89,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"55b30a8e-1dcc-4c86-849f-05a790c48ce5\",\n      \"label\": \"label-9264\",\n      \"height\": 325,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"6427c72c-678a-474c-8619-a27b1ec09e84\",\n      \"label\": \"label-9265\",\n      \"height\": 403,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"ade640e9-d0b6-4187-96ae-36bf4cb2c709\",\n      \"label\": \"label-9266\",\n      \"height\": 446,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"63bee661-8acf-4b53-87f7-219627bbdbd0\",\n      \"label\": \"label-9267\",\n      \"height\": 157,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"e1868184-43af-4294-99b7-ee27c0456107\",\n      \"label\": \"label-9268\",\n      \"height\": 102,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"096c9ce1-f01f-44f6-8c5e-ae8ea99383bc\",\n      \"label\": \"label-9269\",\n      \"height\": 74,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"106574ea-f60c-4b65-90ec-dcaf59fde685\",\n      \"label\": \"label-9270\",\n      \"height\": 356,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"fba45fd4-9909-4a17-839d-0aed921b6885\",\n      \"label\": \"label-9271\",\n      \"height\": 122,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"3f5799f2-ad9e-43be-aed3-6a5f47b360c5\",\n      \"label\": \"label-9272\",\n      \"height\": 335,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"42d99033-28a0-4883-9e55-8df6ecfe7b1d\",\n      \"label\": \"label-9273\",\n      \"height\": 410,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"fc64f9f4-e80e-4600-b712-96800f4f062f\",\n      \"label\": \"label-9274\",\n      \"height\": 368,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"8840996f-63a1-4444-a60d-1a1b0e9ccb4e\",\n      \"label\": \"label-9275\",\n      \"height\": 526,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"495788eb-a747-43f3-af98-869c070a4334\",\n      \"label\": \"label-9276\",\n      \"height\": 180,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"7b0a437a-ce65-4fbc-a84d-f267f509fbf8\",\n      \"label\": \"label-9277\",\n      \"height\": 509,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"33a383a9-b1ef-47a9-aabe-41042b64ae7d\",\n      \"label\": \"label-9278\",\n      \"height\": 269,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"82929b12-cf40-4c59-a3b1-cc70e575a420\",\n      \"label\": \"label-9279\",\n      \"height\": 81,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"6492bf3c-c757-479f-a070-a01da1c7fed7\",\n      \"label\": \"label-9280\",\n      \"height\": 199,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"2cff105b-bd40-4fc3-ade7-7c80a5fab89f\",\n      \"label\": \"label-9281\",\n      \"height\": 362,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"0049bcc9-2ccf-47be-82b0-57ba2b83a882\",\n      \"label\": \"label-9282\",\n      \"height\": 60,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"88ccafc8-84fb-4e59-92ef-471f73d7a569\",\n      \"label\": \"label-9283\",\n      \"height\": 420,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"76877d51-3740-4d92-8a0c-924fbf528aca\",\n      \"label\": \"label-9284\",\n      \"height\": 133,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"e37e8077-1647-4321-9c44-371530f9be99\",\n      \"label\": \"label-9285\",\n      \"height\": 149,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"ff7c7921-d4f9-4af8-86fd-0702cafae846\",\n      \"label\": \"label-9286\",\n      \"height\": 499,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"c0fefff8-b70b-41ad-b43f-290f84736afd\",\n      \"label\": \"label-9287\",\n      \"height\": 427,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"640a8731-4e1b-431c-86e3-ee12e9361116\",\n      \"label\": \"label-9288\",\n      \"height\": 257,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"3909c639-f537-4447-8da0-c7ba9602bbb1\",\n      \"label\": \"label-9289\",\n      \"height\": 456,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"744f59ff-4a61-4fba-8c4c-19282c8786e7\",\n      \"label\": \"label-9290\",\n      \"height\": 223,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"750263e7-58bf-4da3-8261-2bb1b6e315ae\",\n      \"label\": \"label-9291\",\n      \"height\": 248,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"ee43ce44-d15d-4edd-acd4-91973bbee581\",\n      \"label\": \"label-9292\",\n      \"height\": 64,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"d6bfa435-8155-4222-a2fb-047559f384b1\",\n      \"label\": \"label-9293\",\n      \"height\": 154,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"306823f7-2d12-4a36-900c-15bfd1c9b618\",\n      \"label\": \"label-9294\",\n      \"height\": 66,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"0c42c065-5648-426c-b03c-fffa5f87c1ee\",\n      \"label\": \"label-9295\",\n      \"height\": 407,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"fdda2814-fe59-4a68-8225-8332c2ed7684\",\n      \"label\": \"label-9296\",\n      \"height\": 445,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"34b10d67-e7ff-40ff-a0cb-8c3a096ce1ce\",\n      \"label\": \"label-9297\",\n      \"height\": 58,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"9e0006b0-3cd1-497c-9a41-2ea2d46558c6\",\n      \"label\": \"label-9298\",\n      \"height\": 211,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"c46b465d-4379-4ce7-8886-d2af563513ed\",\n      \"label\": \"label-9299\",\n      \"height\": 35,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"8ceefaad-6a75-4d44-94aa-9ca4db7affd6\",\n      \"label\": \"label-9300\",\n      \"height\": 222,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"716f5c0e-5891-4e3e-9285-c808d7c5bcd2\",\n      \"label\": \"label-9301\",\n      \"height\": 287,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"8e5d3fff-096a-464b-bd79-7cb17158f0a3\",\n      \"label\": \"label-9302\",\n      \"height\": 249,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"77a94112-6b7a-4628-869d-726b741dd8e2\",\n      \"label\": \"label-9303\",\n      \"height\": 88,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"39e5d4ee-ae3f-44df-ba3f-ef75e9b641b1\",\n      \"label\": \"label-9304\",\n      \"height\": 212,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"d17906dd-42be-47bc-a594-f111a3342343\",\n      \"label\": \"label-9305\",\n      \"height\": 371,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"d028ff90-7378-4110-a3db-b32d49979bd1\",\n      \"label\": \"label-9306\",\n      \"height\": 95,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"8fe5f406-4d07-4fc8-8322-3ea147c3d9fe\",\n      \"label\": \"label-9307\",\n      \"height\": 409,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"5c05edc7-42f1-4b99-b5b9-62eea22f8ab0\",\n      \"label\": \"label-9308\",\n      \"height\": 331,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"4c6bd43c-9825-47fd-a115-ae8f43702d64\",\n      \"label\": \"label-9309\",\n      \"height\": 205,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"096d4f56-9f3e-4ac7-82bf-bed7f18aac89\",\n      \"label\": \"label-9310\",\n      \"height\": 381,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"0465fea4-ed61-4842-884c-df7c9a556a92\",\n      \"label\": \"label-9311\",\n      \"height\": 394,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"68138f16-1793-4e6b-9be0-2c476db8ca97\",\n      \"label\": \"label-9312\",\n      \"height\": 209,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"21cb7721-9c1f-467b-b84b-65cc81e7f8fc\",\n      \"label\": \"label-9313\",\n      \"height\": 487,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"3b987234-47b2-4e49-ad4b-708b560d6f02\",\n      \"label\": \"label-9314\",\n      \"height\": 243,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"ebb79a56-6c72-4f43-905e-37b8bd99e17e\",\n      \"label\": \"label-9315\",\n      \"height\": 194,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"9b6f7d1a-0e29-4006-9ca1-64a2d3613634\",\n      \"label\": \"label-9316\",\n      \"height\": 112,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"9cb547cf-5880-4322-a089-2990db977286\",\n      \"label\": \"label-9317\",\n      \"height\": 434,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"fc63c845-1b47-48a7-a25b-7b7bab79bba0\",\n      \"label\": \"label-9318\",\n      \"height\": 506,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"466f8fa5-a8d9-4304-add8-bde778d73896\",\n      \"label\": \"label-9319\",\n      \"height\": 71,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"37ae47b8-a17b-4706-9bc6-de398314fc3d\",\n      \"label\": \"label-9320\",\n      \"height\": 228,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"75f037c9-ecb9-4302-96cf-248042e59287\",\n      \"label\": \"label-9321\",\n      \"height\": 306,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"dc210779-2615-4e88-b17f-55b0e90f768d\",\n      \"label\": \"label-9322\",\n      \"height\": 64,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"56f2155f-0483-4e30-90b1-2a62421f2a24\",\n      \"label\": \"label-9323\",\n      \"height\": 408,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"5d37f32e-4be0-4e1c-bf9c-daa71d325b3a\",\n      \"label\": \"label-9324\",\n      \"height\": 451,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"b03e15d7-5740-46dd-b449-aef19fbc8bde\",\n      \"label\": \"label-9325\",\n      \"height\": 430,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"7f9941ee-6fab-415f-8047-a858897320b1\",\n      \"label\": \"label-9326\",\n      \"height\": 322,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"294aca68-827e-4153-aeb6-9030fc43674a\",\n      \"label\": \"label-9327\",\n      \"height\": 376,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"273e05a0-5093-4c12-8bdc-8d7ba6c939f2\",\n      \"label\": \"label-9328\",\n      \"height\": 416,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"730730bb-a552-4b07-9a9d-1897ce43ba1f\",\n      \"label\": \"label-9329\",\n      \"height\": 478,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"f3790db9-8e62-4ee7-bb8c-c22fb124ef27\",\n      \"label\": \"label-9330\",\n      \"height\": 132,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"9767e7b6-925d-4275-b85f-7ce46e2054cd\",\n      \"label\": \"label-9331\",\n      \"height\": 193,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"552ed815-27a4-486d-b5cb-4b5752477aa0\",\n      \"label\": \"label-9332\",\n      \"height\": 527,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"0f4296c9-8709-478d-8cf6-3c89c95ec312\",\n      \"label\": \"label-9333\",\n      \"height\": 224,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"9a4b091e-cf11-4f69-ae4e-001c41ceaf26\",\n      \"label\": \"label-9334\",\n      \"height\": 482,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"0fdbb134-a28a-43a4-be36-60e566b43995\",\n      \"label\": \"label-9335\",\n      \"height\": 309,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"c45b874b-785d-475f-b6f3-ba2f528b2576\",\n      \"label\": \"label-9336\",\n      \"height\": 115,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"1ba5fdd4-1cd0-4860-a190-2a92ad099634\",\n      \"label\": \"label-9337\",\n      \"height\": 417,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"41c45453-6df6-444e-a6d6-98be6278c0b8\",\n      \"label\": \"label-9338\",\n      \"height\": 208,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"1dcc39bc-e1eb-4109-a54d-f0aca29d6554\",\n      \"label\": \"label-9339\",\n      \"height\": 74,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"df6f2f09-1026-4dfa-98e9-97a38e4527d1\",\n      \"label\": \"label-9340\",\n      \"height\": 191,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"dfb8e62b-c58f-40e0-b080-2442c6e1b1b8\",\n      \"label\": \"label-9341\",\n      \"height\": 505,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"7a653e29-7365-40ad-89cb-786f35820206\",\n      \"label\": \"label-9342\",\n      \"height\": 351,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"fce7f984-b290-47eb-afc4-a5f66061e443\",\n      \"label\": \"label-9343\",\n      \"height\": 337,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"b2e470f1-6da9-402a-9087-7d61ab2ea2ff\",\n      \"label\": \"label-9344\",\n      \"height\": 454,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"0bba699d-0a96-49c8-8b46-47af3d787a3e\",\n      \"label\": \"label-9345\",\n      \"height\": 388,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"6b733e8b-4ef0-4a63-a5fd-6652e76ce5b8\",\n      \"label\": \"label-9346\",\n      \"height\": 312,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"1e8b2e6b-60f6-4cc3-a98b-8ebf6de516fc\",\n      \"label\": \"label-9347\",\n      \"height\": 131,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"7bcba1b6-3f2b-49c4-87fe-3dc4e24c9716\",\n      \"label\": \"label-9348\",\n      \"height\": 165,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"42bcac1e-cef1-4577-8e29-2b75792f4db3\",\n      \"label\": \"label-9349\",\n      \"height\": 116,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"7d368453-3f72-4ec9-aae4-6e86962a1485\",\n      \"label\": \"label-9350\",\n      \"height\": 56,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"60a113ab-5a64-495f-bf53-311a4fd956cc\",\n      \"label\": \"label-9351\",\n      \"height\": 235,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"31220a5c-185a-4825-aad3-e6744d8c2458\",\n      \"label\": \"label-9352\",\n      \"height\": 505,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"3612061f-7c69-4b95-8fd1-71da68ce1d95\",\n      \"label\": \"label-9353\",\n      \"height\": 210,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"99c21117-bc68-4f8e-b470-4b0f76385cd8\",\n      \"label\": \"label-9354\",\n      \"height\": 292,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"f492003b-c1e5-4886-9e75-b949ccaf8c42\",\n      \"label\": \"label-9355\",\n      \"height\": 487,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"a9d438d5-f47b-4082-abb5-b49768b555ef\",\n      \"label\": \"label-9356\",\n      \"height\": 50,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"ab9bad56-e872-4e09-9ee3-93ce07366d19\",\n      \"label\": \"label-9357\",\n      \"height\": 68,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"18ebcb5c-a17d-4069-a073-aba9e60d3521\",\n      \"label\": \"label-9358\",\n      \"height\": 208,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"f7de1766-6e39-4f62-bd08-7a16178ce311\",\n      \"label\": \"label-9359\",\n      \"height\": 376,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"2905d064-f3d8-4814-9c64-00a040136c35\",\n      \"label\": \"label-9360\",\n      \"height\": 288,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"927843b6-5783-4934-b6a4-0ecfdf191f47\",\n      \"label\": \"label-9361\",\n      \"height\": 303,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"88d5cc1e-3539-4fff-81fb-1259d0991764\",\n      \"label\": \"label-9362\",\n      \"height\": 136,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"f6eefddd-bdab-400e-9a31-c14590a9ae4e\",\n      \"label\": \"label-9363\",\n      \"height\": 131,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"a83cc3d7-b5bc-41f9-bbd4-611696caf070\",\n      \"label\": \"label-9364\",\n      \"height\": 190,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"d8fb1b16-383c-4d4b-a5c9-e940e9a3f21e\",\n      \"label\": \"label-9365\",\n      \"height\": 255,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"5025d6bb-595e-4759-9750-0f47fab3585c\",\n      \"label\": \"label-9366\",\n      \"height\": 77,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"697e5cda-eda8-470c-849f-610164036491\",\n      \"label\": \"label-9367\",\n      \"height\": 144,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"485dd63e-dcea-476a-9ad7-969ec1c6bdf7\",\n      \"label\": \"label-9368\",\n      \"height\": 191,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"3cb940e1-8ddf-49db-b78e-5c5fe3bc45e0\",\n      \"label\": \"label-9369\",\n      \"height\": 253,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"a0d13380-32b0-4aa8-a9c5-619a15e1b930\",\n      \"label\": \"label-9370\",\n      \"height\": 94,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"66568bfa-48da-4799-9462-5cc1d2508eb6\",\n      \"label\": \"label-9371\",\n      \"height\": 159,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"e4461c35-abbd-4e8c-a7e5-f29a5f7d06dd\",\n      \"label\": \"label-9372\",\n      \"height\": 190,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"232eb84e-ce1e-4725-8947-28fda9255fff\",\n      \"label\": \"label-9373\",\n      \"height\": 512,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"a843466f-9928-442b-8dae-4acd1419f580\",\n      \"label\": \"label-9374\",\n      \"height\": 509,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"9964ad48-7462-4b06-bd1a-f735d2b1f770\",\n      \"label\": \"label-9375\",\n      \"height\": 162,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"fc617c3c-82cf-44b1-9d4d-72101064ecf4\",\n      \"label\": \"label-9376\",\n      \"height\": 475,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"c83f9b63-fe2b-4e2d-972c-e8c0df41765d\",\n      \"label\": \"label-9377\",\n      \"height\": 189,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"66676ff3-2da4-47bc-bef2-b4d4844d834b\",\n      \"label\": \"label-9378\",\n      \"height\": 361,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"9475529a-39f6-4618-9bd3-dd131e45b136\",\n      \"label\": \"label-9379\",\n      \"height\": 227,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"5a569d01-1528-491d-9748-fae4b5f89c03\",\n      \"label\": \"label-9380\",\n      \"height\": 80,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"7e6de14c-cb54-4178-b2a7-08c11b1ed6fb\",\n      \"label\": \"label-9381\",\n      \"height\": 141,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"bd1475f0-afdc-4f75-90a0-7aee2919ef6a\",\n      \"label\": \"label-9382\",\n      \"height\": 319,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"dfdfcd63-e273-4434-8e2f-f088a75c2289\",\n      \"label\": \"label-9383\",\n      \"height\": 280,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"bd839b9d-59e2-432f-9e8d-a3d306f72339\",\n      \"label\": \"label-9384\",\n      \"height\": 47,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"e08f156c-c19e-4a38-8c66-cffce816fc55\",\n      \"label\": \"label-9385\",\n      \"height\": 215,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"174303b3-b902-4eff-846e-eb3357925150\",\n      \"label\": \"label-9386\",\n      \"height\": 47,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"6d7c5c1f-becd-4537-815e-5fe931fef92a\",\n      \"label\": \"label-9387\",\n      \"height\": 250,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"253c2801-cceb-4ae1-8f0c-bf4fa7730314\",\n      \"label\": \"label-9388\",\n      \"height\": 503,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"5b16668a-9516-4c1d-9f94-39e048ea9ffd\",\n      \"label\": \"label-9389\",\n      \"height\": 121,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"9a29ee7c-1081-4c0d-8f86-b991ce4d1296\",\n      \"label\": \"label-9390\",\n      \"height\": 119,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"1553621f-b923-4639-a4cc-203e736eed49\",\n      \"label\": \"label-9391\",\n      \"height\": 432,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"6731f90a-83d7-447c-b4ba-6717b3c1b49b\",\n      \"label\": \"label-9392\",\n      \"height\": 194,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"79d6e88e-c41e-4b5d-8776-01f582231f3f\",\n      \"label\": \"label-9393\",\n      \"height\": 511,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"a0a0cd13-904c-4228-8a3a-ce68b1546d11\",\n      \"label\": \"label-9394\",\n      \"height\": 337,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"baa64d94-8583-41a0-ae1b-6f5e999d34ae\",\n      \"label\": \"label-9395\",\n      \"height\": 522,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"306ccb4d-53a1-4850-81cc-107f3a017ab9\",\n      \"label\": \"label-9396\",\n      \"height\": 234,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"88e3add3-93a6-4f57-a62d-97e2614643b3\",\n      \"label\": \"label-9397\",\n      \"height\": 513,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"3f7b3ec0-7871-4bef-abed-ecfab1344487\",\n      \"label\": \"label-9398\",\n      \"height\": 106,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"5e816d0e-057b-4197-a0de-333772c37a33\",\n      \"label\": \"label-9399\",\n      \"height\": 258,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"eaf58bde-ad67-4699-a00c-7e749ed49b6c\",\n      \"label\": \"label-9400\",\n      \"height\": 77,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"9415fd96-80b2-4688-a1cf-f7238a1fb2dd\",\n      \"label\": \"label-9401\",\n      \"height\": 334,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"b6a7e90c-d08e-4087-b238-423b3c6ce3eb\",\n      \"label\": \"label-9402\",\n      \"height\": 429,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"28129d2c-d9f2-4a4a-8ec4-f7c470e76fff\",\n      \"label\": \"label-9403\",\n      \"height\": 439,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"829397bc-f112-44ca-8722-83c3ebb2a28a\",\n      \"label\": \"label-9404\",\n      \"height\": 260,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"09b3a823-b755-4dd8-a8b8-d0a9cd9621d9\",\n      \"label\": \"label-9405\",\n      \"height\": 265,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"4e197bd9-1a9f-4be6-ac67-0c65bea0d4ad\",\n      \"label\": \"label-9406\",\n      \"height\": 471,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"eea63c86-3f03-4a5d-af72-3a97aa000dea\",\n      \"label\": \"label-9407\",\n      \"height\": 271,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"b1b601f4-af4a-45c7-8d26-fbcd6be76b63\",\n      \"label\": \"label-9408\",\n      \"height\": 384,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"d69cec1e-eb61-4294-8be7-87798276b4af\",\n      \"label\": \"label-9409\",\n      \"height\": 284,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"93e3ef25-2b2c-4b0d-bd5c-c4dc4278c4f5\",\n      \"label\": \"label-9410\",\n      \"height\": 322,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"129657b5-efe0-4b02-aab6-9b111361e7dd\",\n      \"label\": \"label-9411\",\n      \"height\": 387,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"4010e5a5-46ea-42f4-8a47-63c1ed494157\",\n      \"label\": \"label-9412\",\n      \"height\": 397,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"0200e697-3150-4315-9463-e5961477bd7a\",\n      \"label\": \"label-9413\",\n      \"height\": 348,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"800e2bfe-f827-436a-93bd-6f13ff2e1a88\",\n      \"label\": \"label-9414\",\n      \"height\": 291,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"c75c0b08-8d61-40a7-aecc-824da2a02ebb\",\n      \"label\": \"label-9415\",\n      \"height\": 153,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"7d0f04f9-0bb6-4c9d-9b85-c97e14ff4a18\",\n      \"label\": \"label-9416\",\n      \"height\": 250,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"ec544817-2aad-424f-a415-57d96d67d271\",\n      \"label\": \"label-9417\",\n      \"height\": 158,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"e1b53581-20ef-4798-89fc-e6e894327e82\",\n      \"label\": \"label-9418\",\n      \"height\": 239,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"589d1412-c528-4918-bba6-a595cddc01bc\",\n      \"label\": \"label-9419\",\n      \"height\": 162,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"846e5381-269f-4048-983d-362732fabbd7\",\n      \"label\": \"label-9420\",\n      \"height\": 257,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"deb5f787-b212-4f2c-aa10-cda5bf611245\",\n      \"label\": \"label-9421\",\n      \"height\": 232,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"e3bfe92a-ac13-404c-93fb-f1b5990694bf\",\n      \"label\": \"label-9422\",\n      \"height\": 312,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"b888b61b-efde-449d-8ff9-39b075c2f91d\",\n      \"label\": \"label-9423\",\n      \"height\": 375,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"3eb25719-e592-4be6-b443-30ebb80dca94\",\n      \"label\": \"label-9424\",\n      \"height\": 248,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"7e98398c-bee9-4cf6-ad65-d55972efee0b\",\n      \"label\": \"label-9425\",\n      \"height\": 470,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"05bb3386-4aad-43b6-98c1-6b95e4d02b7d\",\n      \"label\": \"label-9426\",\n      \"height\": 489,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"2982f0c8-b23d-40ed-b6c8-0efc84733be1\",\n      \"label\": \"label-9427\",\n      \"height\": 332,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"1b09a523-2389-4e07-be4a-c3cd9c64ec9f\",\n      \"label\": \"label-9428\",\n      \"height\": 68,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"d0305de9-039a-42a7-a8fc-acd72a5abd79\",\n      \"label\": \"label-9429\",\n      \"height\": 443,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"e7faa6e3-2a41-4f49-be7c-500c563a88e5\",\n      \"label\": \"label-9430\",\n      \"height\": 326,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"1e23aecf-54bd-4e7e-b97d-b22fb0c57761\",\n      \"label\": \"label-9431\",\n      \"height\": 476,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"57e4d81c-1b0a-4197-b60f-db0cc1f76dfc\",\n      \"label\": \"label-9432\",\n      \"height\": 220,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"040803f4-a883-41e4-a812-b64ee4a42dad\",\n      \"label\": \"label-9433\",\n      \"height\": 208,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"699e3e2a-9d58-4eaf-ac2c-37a7a868e938\",\n      \"label\": \"label-9434\",\n      \"height\": 260,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"49fe721e-8d84-4817-a776-de2a04be59d7\",\n      \"label\": \"label-9435\",\n      \"height\": 388,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"d8b95056-5854-4742-adbf-bdc00872cb1f\",\n      \"label\": \"label-9436\",\n      \"height\": 187,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"5a2b3f1b-315a-4a7d-8d1d-1544188a18df\",\n      \"label\": \"label-9437\",\n      \"height\": 186,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"19ed9cff-8033-403d-85a7-bde0266a4b2e\",\n      \"label\": \"label-9438\",\n      \"height\": 150,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"1ffc60de-c85b-4ffd-841a-8e4d95ae50bf\",\n      \"label\": \"label-9439\",\n      \"height\": 246,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"d8fc261a-7136-4739-9157-832351ea23af\",\n      \"label\": \"label-9440\",\n      \"height\": 112,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"0dea5b89-ffeb-416c-a811-21517afe0886\",\n      \"label\": \"label-9441\",\n      \"height\": 377,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"e9621a27-10d7-497a-ad0d-52dbf4953c38\",\n      \"label\": \"label-9442\",\n      \"height\": 470,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"6b16d697-4cdf-4d02-bcd7-24f3fa7d8276\",\n      \"label\": \"label-9443\",\n      \"height\": 440,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"d3c3aea5-faa7-474b-8d5d-e39bcbd2856e\",\n      \"label\": \"label-9444\",\n      \"height\": 357,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"cb68a6bc-20f9-4151-8fa7-74fc98da09ec\",\n      \"label\": \"label-9445\",\n      \"height\": 175,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"1538db4e-b53c-4316-8489-ff1e6a695a65\",\n      \"label\": \"label-9446\",\n      \"height\": 37,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"a83b8f66-1419-4079-a155-8015cce083f3\",\n      \"label\": \"label-9447\",\n      \"height\": 212,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"50268876-3d31-44b1-932f-f0f2e72cb4a3\",\n      \"label\": \"label-9448\",\n      \"height\": 458,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"2c5ef661-ef7f-47c1-bcbf-5e9edeab7f41\",\n      \"label\": \"label-9449\",\n      \"height\": 162,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"151e13c4-26d0-440a-b851-f9f8d9ca86de\",\n      \"label\": \"label-9450\",\n      \"height\": 174,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"64748f1b-2a1c-49ac-b7d7-688edc82538b\",\n      \"label\": \"label-9451\",\n      \"height\": 506,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"1eeca19f-a48c-4630-a457-9c5d6ae312bc\",\n      \"label\": \"label-9452\",\n      \"height\": 81,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"8082bb7e-70ba-40f8-a938-daf9b0bee850\",\n      \"label\": \"label-9453\",\n      \"height\": 339,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"c950407c-2916-4943-bba0-7913fbb2bfa4\",\n      \"label\": \"label-9454\",\n      \"height\": 427,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"9c46486a-c91c-49ab-a256-13872a094367\",\n      \"label\": \"label-9455\",\n      \"height\": 197,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"e6ef0661-97b6-4f53-a365-cef0145c68f9\",\n      \"label\": \"label-9456\",\n      \"height\": 230,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"282c9c14-ee25-417d-9dd4-696e68a163db\",\n      \"label\": \"label-9457\",\n      \"height\": 340,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"cec848d2-0e10-4bb2-aa88-955ef73f87a6\",\n      \"label\": \"label-9458\",\n      \"height\": 437,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"eec381d9-8854-42de-9599-7e93bd2e6189\",\n      \"label\": \"label-9459\",\n      \"height\": 377,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"c4bdfa79-09f5-4307-9678-7c8a93012320\",\n      \"label\": \"label-9460\",\n      \"height\": 133,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"e586f61e-877a-4859-8c94-5a220b0a9da0\",\n      \"label\": \"label-9461\",\n      \"height\": 447,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"3f03fb32-f4f3-4575-ab28-5f817a2e323c\",\n      \"label\": \"label-9462\",\n      \"height\": 304,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"1062c7cc-42e3-49f1-9a68-53e42a086717\",\n      \"label\": \"label-9463\",\n      \"height\": 36,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"101bcae6-1589-4d2c-a12e-4da859f1933d\",\n      \"label\": \"label-9464\",\n      \"height\": 51,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"541ca53b-7bc4-4834-b097-0c045fe4d276\",\n      \"label\": \"label-9465\",\n      \"height\": 85,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"44c1dda7-f248-4e97-81a1-7621a1d327a8\",\n      \"label\": \"label-9466\",\n      \"height\": 259,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"7d85ee0b-8866-4234-9446-b056ae1496a3\",\n      \"label\": \"label-9467\",\n      \"height\": 466,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"2269c300-1694-40d4-9835-1ba14d74ba2e\",\n      \"label\": \"label-9468\",\n      \"height\": 514,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"f8a0c757-6b9a-4dbc-ab0c-4a39ebfd2f60\",\n      \"label\": \"label-9469\",\n      \"height\": 502,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"e0c9ca2e-6166-4ac3-a413-2ccad2113272\",\n      \"label\": \"label-9470\",\n      \"height\": 262,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"c177cced-5b86-41b5-8382-39beed53440b\",\n      \"label\": \"label-9471\",\n      \"height\": 346,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"4205eafb-157d-4f6b-a761-45496f183432\",\n      \"label\": \"label-9472\",\n      \"height\": 182,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"f4a557b2-6251-4fa1-bb87-29f0082b4ad5\",\n      \"label\": \"label-9473\",\n      \"height\": 267,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"7578972b-4e30-412b-bd88-5977d3233b8c\",\n      \"label\": \"label-9474\",\n      \"height\": 88,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"40756242-cb50-47fe-93e7-1327fda16b8b\",\n      \"label\": \"label-9475\",\n      \"height\": 210,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"9b8adef0-8373-4914-bf55-68dce23773e4\",\n      \"label\": \"label-9476\",\n      \"height\": 336,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"2962ad29-f14a-4831-a9b6-2bf649a51924\",\n      \"label\": \"label-9477\",\n      \"height\": 47,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"5a735ebb-e121-487f-9416-7ddf284d696e\",\n      \"label\": \"label-9478\",\n      \"height\": 165,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"bbc9591f-a0cd-4a12-a2bf-14cc0feaccd6\",\n      \"label\": \"label-9479\",\n      \"height\": 498,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"c09589ac-bd2f-48d0-8a54-2ee45a1f6e06\",\n      \"label\": \"label-9480\",\n      \"height\": 462,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"12ec83ac-4f4a-4a03-83a4-58800a4533d0\",\n      \"label\": \"label-9481\",\n      \"height\": 404,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"036008be-35a4-478d-bcaf-d0a678f28cd3\",\n      \"label\": \"label-9482\",\n      \"height\": 356,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"d5f50fee-176c-458d-9be2-504371aa64e2\",\n      \"label\": \"label-9483\",\n      \"height\": 81,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"0a1b4a4b-8e3a-467c-8457-f2def3d8a429\",\n      \"label\": \"label-9484\",\n      \"height\": 439,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"6690a2fd-f06f-47cf-b34b-dbb5cef00f6e\",\n      \"label\": \"label-9485\",\n      \"height\": 465,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"ea8b0379-6dbf-46b5-bcab-18e87400acd5\",\n      \"label\": \"label-9486\",\n      \"height\": 233,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"a8cb7bc8-cbb9-458e-8e36-b79359b9b1ff\",\n      \"label\": \"label-9487\",\n      \"height\": 244,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"10ac7290-0314-455d-8da3-67d7553be04e\",\n      \"label\": \"label-9488\",\n      \"height\": 467,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"a5511549-51f4-432a-ab08-ef51aa064b84\",\n      \"label\": \"label-9489\",\n      \"height\": 242,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"12c1573a-681d-4f9b-923c-97b4443242e5\",\n      \"label\": \"label-9490\",\n      \"height\": 361,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"0bc88304-957a-49a3-bcc6-a24c21103725\",\n      \"label\": \"label-9491\",\n      \"height\": 328,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"2cc9d0c6-ffd3-452c-83a1-9e2d922ae39c\",\n      \"label\": \"label-9492\",\n      \"height\": 265,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"c35dc73d-4ab8-47bc-8dce-e1d0c8ac031d\",\n      \"label\": \"label-9493\",\n      \"height\": 77,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"6e8900f1-85d2-48ff-b6fa-057e57fe8df6\",\n      \"label\": \"label-9494\",\n      \"height\": 222,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"089d4590-b960-465c-950c-5428c39ff149\",\n      \"label\": \"label-9495\",\n      \"height\": 249,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"445f894e-d034-48e4-88a3-e9c58f1e1c5c\",\n      \"label\": \"label-9496\",\n      \"height\": 270,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"55259b61-ab61-405f-9472-f45485a4f7a9\",\n      \"label\": \"label-9497\",\n      \"height\": 51,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"d82d0347-3fdd-43e0-8e6d-49bdc7dbe520\",\n      \"label\": \"label-9498\",\n      \"height\": 101,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"00e27d29-0e1f-41ab-a0b4-8be0cba68584\",\n      \"label\": \"label-9499\",\n      \"height\": 255,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"b68b146e-214f-4ecd-9890-9393fa907a82\",\n      \"label\": \"label-9500\",\n      \"height\": 257,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"e1cc2218-b14a-4e79-a437-d0c4481ab241\",\n      \"label\": \"label-9501\",\n      \"height\": 202,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"d8bfccd2-61f5-44ef-a37b-9caa58ac94fd\",\n      \"label\": \"label-9502\",\n      \"height\": 270,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"47f98c2c-32ab-4eb4-8357-c2d7b7d04774\",\n      \"label\": \"label-9503\",\n      \"height\": 521,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"b1739e45-acb8-48ee-a2d3-55bcab127acb\",\n      \"label\": \"label-9504\",\n      \"height\": 268,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"bdbfbafb-5299-4999-b064-57a58445ff63\",\n      \"label\": \"label-9505\",\n      \"height\": 325,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"74bedbfc-9aab-4d93-8cdd-51de4c2bef30\",\n      \"label\": \"label-9506\",\n      \"height\": 56,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"9ab4f6f3-a19c-437e-8b29-cb312650f523\",\n      \"label\": \"label-9507\",\n      \"height\": 369,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"d6c6adc3-5536-4941-9665-56e967585fb2\",\n      \"label\": \"label-9508\",\n      \"height\": 329,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"2788e2ca-6920-41d5-9183-690efb0a1109\",\n      \"label\": \"label-9509\",\n      \"height\": 125,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"13b333cf-61bf-418d-be1e-2c495600adfd\",\n      \"label\": \"label-9510\",\n      \"height\": 168,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"90632d7e-acde-492b-a30a-c514de0ae635\",\n      \"label\": \"label-9511\",\n      \"height\": 232,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"5420a576-7415-475c-9aa9-a735176f5fa3\",\n      \"label\": \"label-9512\",\n      \"height\": 322,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"3bea3d47-7848-433d-b3f7-b02341a4bc58\",\n      \"label\": \"label-9513\",\n      \"height\": 429,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"c0fdd816-c75f-47c7-a635-2b321bc90e48\",\n      \"label\": \"label-9514\",\n      \"height\": 336,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"60415ed7-98d7-4ac1-9272-e6017ed3ebeb\",\n      \"label\": \"label-9515\",\n      \"height\": 408,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"59a63935-6c45-4ab5-86f0-03f9746222fb\",\n      \"label\": \"label-9516\",\n      \"height\": 284,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"8a3988e8-5847-49b5-ae30-f444be1850f4\",\n      \"label\": \"label-9517\",\n      \"height\": 244,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"f191db7d-6690-47a3-b723-8dcc4fcc67eb\",\n      \"label\": \"label-9518\",\n      \"height\": 321,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"574a84e6-e46f-4a8a-9c5b-6101d6b3fa27\",\n      \"label\": \"label-9519\",\n      \"height\": 207,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"3f9c6f36-8c39-4b0f-a7df-9f73c96f4f78\",\n      \"label\": \"label-9520\",\n      \"height\": 457,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"28b4ec66-97ce-43aa-9e63-6b2b31dd2bdf\",\n      \"label\": \"label-9521\",\n      \"height\": 155,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"0ca17e2a-ab93-4726-9368-e557d4fead6c\",\n      \"label\": \"label-9522\",\n      \"height\": 510,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"4f4c1c0c-a5bb-4e3d-b527-f1d595dcec1e\",\n      \"label\": \"label-9523\",\n      \"height\": 175,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"aa04b236-42e3-4df9-b33b-56ac6d24d850\",\n      \"label\": \"label-9524\",\n      \"height\": 117,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"082cded8-bf09-40d3-bbd9-c31f88a6dc9a\",\n      \"label\": \"label-9525\",\n      \"height\": 300,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"f5034f79-4203-4c0b-8ee2-dcda7af72f5a\",\n      \"label\": \"label-9526\",\n      \"height\": 228,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"5d63f621-0337-4316-9ddc-aed0f4aaee05\",\n      \"label\": \"label-9527\",\n      \"height\": 279,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"f7ff281c-da86-49ec-b346-2a1dc79030ed\",\n      \"label\": \"label-9528\",\n      \"height\": 113,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"218c3def-ca53-4f01-b854-60f0b6444165\",\n      \"label\": \"label-9529\",\n      \"height\": 159,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"9ee28513-080b-4650-815c-bb314ec08f75\",\n      \"label\": \"label-9530\",\n      \"height\": 36,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"7544b22f-5556-4cdc-ab50-6899d6e8d8fb\",\n      \"label\": \"label-9531\",\n      \"height\": 160,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"ebcc5393-8d0d-4f38-a270-e8677d46a567\",\n      \"label\": \"label-9532\",\n      \"height\": 464,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"59afbdaf-604b-4517-bfda-076d1d2e12c0\",\n      \"label\": \"label-9533\",\n      \"height\": 367,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"2c5eabe9-7b4e-4e46-a1f9-42868b473346\",\n      \"label\": \"label-9534\",\n      \"height\": 483,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"8487f203-aae2-4dfc-8fd5-e8731316e1bc\",\n      \"label\": \"label-9535\",\n      \"height\": 192,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"5e731976-73d0-41c0-a186-0f6a1a9ae491\",\n      \"label\": \"label-9536\",\n      \"height\": 483,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"75de6081-4886-4209-9bf8-86f647d17f46\",\n      \"label\": \"label-9537\",\n      \"height\": 109,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"bb21e798-4387-444a-8277-55dca3e1cc3e\",\n      \"label\": \"label-9538\",\n      \"height\": 190,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"b87c97bd-58bf-4c0b-aac1-b1a47d347529\",\n      \"label\": \"label-9539\",\n      \"height\": 88,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"956033fd-e335-4f04-82e8-2a51f2b8b7ed\",\n      \"label\": \"label-9540\",\n      \"height\": 76,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"3e810104-e747-44ce-a56c-950e61a99718\",\n      \"label\": \"label-9541\",\n      \"height\": 250,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"6dd9095c-2e42-40c5-9396-c92e7b82d3f3\",\n      \"label\": \"label-9542\",\n      \"height\": 313,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"2f632188-a148-4c52-b0fd-8200b95d524e\",\n      \"label\": \"label-9543\",\n      \"height\": 284,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"416d3944-7fd5-4b92-b563-ab8ed96279c2\",\n      \"label\": \"label-9544\",\n      \"height\": 164,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"f5c70fdd-3daf-49bd-8322-0addd15a5ed8\",\n      \"label\": \"label-9545\",\n      \"height\": 213,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"bb667347-b251-4113-bb9d-e6f0d8e1554c\",\n      \"label\": \"label-9546\",\n      \"height\": 284,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"fc0f109f-4bda-4c1d-85cb-0a38370b9643\",\n      \"label\": \"label-9547\",\n      \"height\": 488,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"c3ae61a5-b725-41a8-831c-ab35a1f6b283\",\n      \"label\": \"label-9548\",\n      \"height\": 33,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"2b7656c6-52b9-4913-8958-c3257e48cead\",\n      \"label\": \"label-9549\",\n      \"height\": 469,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"bdbbba73-4183-4e2c-906d-4257b08a5cbc\",\n      \"label\": \"label-9550\",\n      \"height\": 181,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"ab6a0899-8b06-42f3-b649-46e78cee68b2\",\n      \"label\": \"label-9551\",\n      \"height\": 324,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"563ff82e-cecd-4c8c-b76a-08ed82d5faf9\",\n      \"label\": \"label-9552\",\n      \"height\": 120,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"0e9517f7-4f3e-44c1-be05-b8c504c8f3a5\",\n      \"label\": \"label-9553\",\n      \"height\": 174,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"85ef7931-eb97-439d-b6bd-81660b904e93\",\n      \"label\": \"label-9554\",\n      \"height\": 465,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"6e88d8b2-16af-48d2-9f37-83e46ab76fec\",\n      \"label\": \"label-9555\",\n      \"height\": 71,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"b0135075-e3c9-4605-832c-ff03b2a272f2\",\n      \"label\": \"label-9556\",\n      \"height\": 264,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"4544b25f-4a43-4e4d-8d73-66d3c03179a3\",\n      \"label\": \"label-9557\",\n      \"height\": 293,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"2522681a-c223-4d53-bbb1-59fd6f5d6a66\",\n      \"label\": \"label-9558\",\n      \"height\": 183,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"a492d3cf-f7f7-42a2-b965-fec873ceb50b\",\n      \"label\": \"label-9559\",\n      \"height\": 298,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"a8d4a9d3-b827-461e-aac3-05c4ea68463b\",\n      \"label\": \"label-9560\",\n      \"height\": 257,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"a498f801-2139-41ea-8351-866f91947a47\",\n      \"label\": \"label-9561\",\n      \"height\": 237,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"3fa2e538-47a1-4d8b-8758-820f1ce651e7\",\n      \"label\": \"label-9562\",\n      \"height\": 323,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"cd4dd813-4556-4db4-bd52-cb8fdbdaeb35\",\n      \"label\": \"label-9563\",\n      \"height\": 278,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"542df852-17e4-4ad1-93e3-30b4031d7c1f\",\n      \"label\": \"label-9564\",\n      \"height\": 411,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"26edbdab-5c54-45ad-b813-cfff17146e4f\",\n      \"label\": \"label-9565\",\n      \"height\": 412,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"c86c1291-d4a1-41b1-b5d4-cf51c8134fff\",\n      \"label\": \"label-9566\",\n      \"height\": 43,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"d1194371-68e4-4972-a9de-8a2f5a3667f9\",\n      \"label\": \"label-9567\",\n      \"height\": 139,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"63c81e34-e928-44bc-914f-fcbd33b4c43b\",\n      \"label\": \"label-9568\",\n      \"height\": 113,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"9f7703b2-b410-4354-86f6-c12aa1042306\",\n      \"label\": \"label-9569\",\n      \"height\": 258,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"2cbd8aec-d2f5-4b7b-a1ec-2ee7c3f9218c\",\n      \"label\": \"label-9570\",\n      \"height\": 368,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"d3181f89-c228-4d44-b542-7482047c97eb\",\n      \"label\": \"label-9571\",\n      \"height\": 503,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"aef50be4-dc36-4df7-9b22-7ea5f28c90ac\",\n      \"label\": \"label-9572\",\n      \"height\": 366,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"6ddebb12-0df6-4859-9553-ce513a032862\",\n      \"label\": \"label-9573\",\n      \"height\": 224,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"79fc8034-8ccf-4bb1-91d1-0bc19eacb77e\",\n      \"label\": \"label-9574\",\n      \"height\": 472,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"cb40e47b-331b-4046-b6a7-dcc098154283\",\n      \"label\": \"label-9575\",\n      \"height\": 110,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"6edba408-31ba-4f47-90e6-607a0aca294e\",\n      \"label\": \"label-9576\",\n      \"height\": 143,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"cf0dcc3b-4a42-450a-8d97-67d62e26c91d\",\n      \"label\": \"label-9577\",\n      \"height\": 283,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"5ac39d64-3a47-4d19-aabb-11e428c2f6df\",\n      \"label\": \"label-9578\",\n      \"height\": 357,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"960eb8a1-79a2-4dac-9084-e4be2150194f\",\n      \"label\": \"label-9579\",\n      \"height\": 259,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"b0efbf9c-b724-4721-8906-63827a171a43\",\n      \"label\": \"label-9580\",\n      \"height\": 529,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"5f14b2b1-d1f8-4b40-b7d0-4c10387ff0ff\",\n      \"label\": \"label-9581\",\n      \"height\": 347,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"c3309242-5d09-4678-aab4-3e60dca9a303\",\n      \"label\": \"label-9582\",\n      \"height\": 456,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"acb41b55-cd4b-42a5-9d53-1ce324b26f86\",\n      \"label\": \"label-9583\",\n      \"height\": 407,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"8a29abac-37a9-4fc7-a4e5-5bc08eb26b76\",\n      \"label\": \"label-9584\",\n      \"height\": 516,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"ead69f31-6821-4036-900b-cded8e9e15d6\",\n      \"label\": \"label-9585\",\n      \"height\": 482,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"abf9f3b8-c1e2-4be1-b1a4-e5dfacb8900f\",\n      \"label\": \"label-9586\",\n      \"height\": 402,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"e0cfeb4d-f2ab-4a82-83eb-3354a4827d34\",\n      \"label\": \"label-9587\",\n      \"height\": 107,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"e257faee-8ede-4b8a-a27e-4580f56d973c\",\n      \"label\": \"label-9588\",\n      \"height\": 60,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"fcf48015-da12-4e29-93da-4fb7b5f3f098\",\n      \"label\": \"label-9589\",\n      \"height\": 465,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"52758676-7d26-4dff-868e-942b1c1f8f50\",\n      \"label\": \"label-9590\",\n      \"height\": 531,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"e3de8a9d-34af-4427-b665-b9fe44941ab0\",\n      \"label\": \"label-9591\",\n      \"height\": 435,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"be44887b-d616-49a8-ae88-799335dddaec\",\n      \"label\": \"label-9592\",\n      \"height\": 269,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"1b1eb36c-05fe-4d3b-8045-1fe909a3c219\",\n      \"label\": \"label-9593\",\n      \"height\": 485,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"abbb24f0-51cb-4f3a-8ddc-11d9ced84164\",\n      \"label\": \"label-9594\",\n      \"height\": 448,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"145870cd-d460-4e4c-8791-abfe5479c57a\",\n      \"label\": \"label-9595\",\n      \"height\": 501,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"0dfff81a-236d-40fb-8855-c85008012b6f\",\n      \"label\": \"label-9596\",\n      \"height\": 298,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"5f1f3153-a861-417a-939e-86526bb889fa\",\n      \"label\": \"label-9597\",\n      \"height\": 172,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"a81af0ab-3a63-4618-87f6-f235a4956525\",\n      \"label\": \"label-9598\",\n      \"height\": 297,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"bd05f58f-3766-48c7-bf5f-1fb15ea59d24\",\n      \"label\": \"label-9599\",\n      \"height\": 472,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"4687ae5a-bcdb-48b4-bae6-c1c180af0bfd\",\n      \"label\": \"label-9600\",\n      \"height\": 381,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"26b21cd8-c69f-460e-8f5a-3b8331f3b063\",\n      \"label\": \"label-9601\",\n      \"height\": 110,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"4fb0d3d6-1c01-4ce8-bc46-426286b99da4\",\n      \"label\": \"label-9602\",\n      \"height\": 476,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"7743a7c2-111c-46e4-9b9e-528b1ade007d\",\n      \"label\": \"label-9603\",\n      \"height\": 454,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"d26e1754-ea4e-4943-8d9c-9cbc263736a0\",\n      \"label\": \"label-9604\",\n      \"height\": 329,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"b4687b3b-f06a-4ee1-952d-146edd89faf4\",\n      \"label\": \"label-9605\",\n      \"height\": 163,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"4f88fd64-182e-4410-851f-de73103512ad\",\n      \"label\": \"label-9606\",\n      \"height\": 169,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"4851d26c-e095-49fa-ac27-93003fb2d91e\",\n      \"label\": \"label-9607\",\n      \"height\": 355,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"a44aaf41-2ae6-40a9-800b-0ab044efe4b8\",\n      \"label\": \"label-9608\",\n      \"height\": 46,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"61889092-726d-4dc0-91f1-7b57a0b3cdac\",\n      \"label\": \"label-9609\",\n      \"height\": 88,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"7d18271c-7a20-4825-8881-526321da6a5a\",\n      \"label\": \"label-9610\",\n      \"height\": 446,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"7c6efe36-60c0-4330-9712-6b126bd436f7\",\n      \"label\": \"label-9611\",\n      \"height\": 145,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"2f466bf1-ffb5-47a1-ae5f-7bcb5a0ba897\",\n      \"label\": \"label-9612\",\n      \"height\": 120,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"2c15b1ef-8234-40b2-97a0-836d27f00aeb\",\n      \"label\": \"label-9613\",\n      \"height\": 358,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"9ff376c6-8090-416b-ba7a-df2829537b2e\",\n      \"label\": \"label-9614\",\n      \"height\": 136,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"f1c280d1-f63c-4caf-94fe-23050e25b17b\",\n      \"label\": \"label-9615\",\n      \"height\": 298,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"9e3048aa-3b31-48c9-a777-656a7647a3a7\",\n      \"label\": \"label-9616\",\n      \"height\": 410,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"c84db1b8-5613-4ff3-836b-d9dfddfd4c72\",\n      \"label\": \"label-9617\",\n      \"height\": 104,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"8f9ab130-6d09-416b-a8f1-b3a6246f86be\",\n      \"label\": \"label-9618\",\n      \"height\": 165,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"5a3d6da4-f518-4622-b382-43e8e062c780\",\n      \"label\": \"label-9619\",\n      \"height\": 283,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"31ee5509-63d7-425b-8736-2d6202a38d0b\",\n      \"label\": \"label-9620\",\n      \"height\": 168,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"6fd8176e-1ca8-4678-86f8-57d8e9e12767\",\n      \"label\": \"label-9621\",\n      \"height\": 267,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"a307b8dc-3186-4b86-834e-109cd8da841b\",\n      \"label\": \"label-9622\",\n      \"height\": 67,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"45f5cd6b-53fd-4f96-bb30-6b71a66e9372\",\n      \"label\": \"label-9623\",\n      \"height\": 35,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"bf9da817-c490-45d3-9832-9e34edb2eeb4\",\n      \"label\": \"label-9624\",\n      \"height\": 481,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"62079e4c-7e82-4f60-8dfd-12f49a1951bc\",\n      \"label\": \"label-9625\",\n      \"height\": 68,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"3c04a367-8372-4dab-8398-37da28fc9818\",\n      \"label\": \"label-9626\",\n      \"height\": 197,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"b9f56080-91a8-4b9e-81fe-664f5519bac0\",\n      \"label\": \"label-9627\",\n      \"height\": 403,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"e4962ce2-cdd7-4ede-a3d5-5781752cd234\",\n      \"label\": \"label-9628\",\n      \"height\": 518,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"3bc51599-2890-4528-aed9-9f0bc2b6fbe1\",\n      \"label\": \"label-9629\",\n      \"height\": 381,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"834cd087-c22b-4479-b0fd-7a3403514a22\",\n      \"label\": \"label-9630\",\n      \"height\": 173,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"1d5eac8b-37fc-45e8-bc93-8e4fe7cbb8bd\",\n      \"label\": \"label-9631\",\n      \"height\": 383,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"123ddfdd-51c5-494b-a85f-9e315d8d5778\",\n      \"label\": \"label-9632\",\n      \"height\": 114,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"5d166bcf-af50-460a-93b6-852fa601319a\",\n      \"label\": \"label-9633\",\n      \"height\": 435,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"2e1b4b04-05d2-4f96-8222-313cfc5886f5\",\n      \"label\": \"label-9634\",\n      \"height\": 236,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"57603601-9f0a-4d6d-810c-cba8043c26d3\",\n      \"label\": \"label-9635\",\n      \"height\": 191,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"3f50f20d-84ad-4216-a789-7c998d270d04\",\n      \"label\": \"label-9636\",\n      \"height\": 57,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"f83c1593-87b2-426d-b80a-e74083188985\",\n      \"label\": \"label-9637\",\n      \"height\": 144,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"c3d0649e-ed3c-4e68-96be-a465071c51ec\",\n      \"label\": \"label-9638\",\n      \"height\": 391,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"63d78c06-ca28-476c-9f56-4fe819c40ea4\",\n      \"label\": \"label-9639\",\n      \"height\": 266,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"5aa0e14d-d51c-49e7-97a9-22b98a869601\",\n      \"label\": \"label-9640\",\n      \"height\": 115,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"032cc2cf-f7c5-4726-b5c5-6f31c83101b0\",\n      \"label\": \"label-9641\",\n      \"height\": 464,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"9db33a68-bfa2-4dcb-b170-0af46e620444\",\n      \"label\": \"label-9642\",\n      \"height\": 503,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"b567ae5f-5a54-49c6-875f-7516e2a85739\",\n      \"label\": \"label-9643\",\n      \"height\": 524,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"dd59d74b-372f-444e-95dc-7e5152c64ad7\",\n      \"label\": \"label-9644\",\n      \"height\": 153,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"e3f8ca26-e094-4371-8e0e-79c92d6f1125\",\n      \"label\": \"label-9645\",\n      \"height\": 193,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"e79b8533-498b-4486-be87-f9ceafa15a64\",\n      \"label\": \"label-9646\",\n      \"height\": 291,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"5b7b62c0-3cb9-4860-92f2-1b7012efb0a2\",\n      \"label\": \"label-9647\",\n      \"height\": 295,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"6ab990dd-d93f-4472-ad71-2f59efffabb7\",\n      \"label\": \"label-9648\",\n      \"height\": 145,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"6f88c975-7f17-4840-97e8-4f057680bc68\",\n      \"label\": \"label-9649\",\n      \"height\": 139,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"8f4da76a-5b35-47ca-bfb9-e3e03f2636ad\",\n      \"label\": \"label-9650\",\n      \"height\": 329,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"2e7a89e8-7ed9-4577-9d17-53e72162130b\",\n      \"label\": \"label-9651\",\n      \"height\": 172,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"0836e56e-0fcd-4a56-8599-5c95bd2c3774\",\n      \"label\": \"label-9652\",\n      \"height\": 460,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"9851ba67-02b4-4642-a8ca-8d3d2a5d7939\",\n      \"label\": \"label-9653\",\n      \"height\": 360,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"e66ce884-e645-4753-b8be-aebc9326f0e8\",\n      \"label\": \"label-9654\",\n      \"height\": 55,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"f0428389-e57b-470f-98cf-351fbad305bf\",\n      \"label\": \"label-9655\",\n      \"height\": 487,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"86243877-5c33-4fac-a9c7-2fee7544fed9\",\n      \"label\": \"label-9656\",\n      \"height\": 353,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"69e5a679-7fa7-41b0-8790-82191b3e839d\",\n      \"label\": \"label-9657\",\n      \"height\": 50,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"fb77bb0d-d592-4688-89dc-8e54b9f2ca51\",\n      \"label\": \"label-9658\",\n      \"height\": 504,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"b857980b-47ba-4049-b8ea-59731c9fc231\",\n      \"label\": \"label-9659\",\n      \"height\": 321,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"e8f247ba-473e-4868-ae3b-1d7e3095e208\",\n      \"label\": \"label-9660\",\n      \"height\": 198,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"0ad90f63-6ba0-4748-9d6f-254a59e08b08\",\n      \"label\": \"label-9661\",\n      \"height\": 501,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"8753b50d-aa14-4e7f-b952-ed16cc2c5083\",\n      \"label\": \"label-9662\",\n      \"height\": 279,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"eebb50e1-ac6f-46b4-bce0-c618ee173226\",\n      \"label\": \"label-9663\",\n      \"height\": 106,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"d008aefb-30d0-499e-a3ff-ee4dd4d94fc1\",\n      \"label\": \"label-9664\",\n      \"height\": 187,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"fb691eb6-aa69-4af4-8da0-1efe6a7b9f53\",\n      \"label\": \"label-9665\",\n      \"height\": 384,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"aa9d3619-3e7e-49ac-a850-e55e4562f17f\",\n      \"label\": \"label-9666\",\n      \"height\": 390,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"e13bc4cc-d7bc-4282-abac-2fe952bce7c5\",\n      \"label\": \"label-9667\",\n      \"height\": 75,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"f120ae95-f457-45f3-b2e3-208adc8aeee2\",\n      \"label\": \"label-9668\",\n      \"height\": 71,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"a53c7bb6-e5aa-4a52-9a6f-e164d415ce92\",\n      \"label\": \"label-9669\",\n      \"height\": 380,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"ff1a0249-e592-4cc0-81e0-47b071982f37\",\n      \"label\": \"label-9670\",\n      \"height\": 467,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"0f71700f-becd-405d-912c-89eaa3458d92\",\n      \"label\": \"label-9671\",\n      \"height\": 237,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"06986b09-ccd0-4933-a51c-5785b5caf380\",\n      \"label\": \"label-9672\",\n      \"height\": 57,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"300e566f-6c40-4a7a-b17c-d0c3db57bcbc\",\n      \"label\": \"label-9673\",\n      \"height\": 318,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"f765d139-f711-4f6f-96ed-3a048af01476\",\n      \"label\": \"label-9674\",\n      \"height\": 140,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"63193827-0381-4b50-9c7e-319d5592f105\",\n      \"label\": \"label-9675\",\n      \"height\": 211,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"e4ae5c15-3e24-4f10-ad4d-c3158597ab2a\",\n      \"label\": \"label-9676\",\n      \"height\": 501,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"a7879cf6-c911-4f99-a1b6-7f07de452648\",\n      \"label\": \"label-9677\",\n      \"height\": 399,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"3178f037-ca49-4d48-b12b-6618b813542b\",\n      \"label\": \"label-9678\",\n      \"height\": 511,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"e42dab02-2693-4ac2-bd38-deaee60a2dd2\",\n      \"label\": \"label-9679\",\n      \"height\": 69,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"67463e8e-b7fa-4eb3-b557-1bd99343b9ec\",\n      \"label\": \"label-9680\",\n      \"height\": 448,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"3b57f020-45e6-4afd-b696-8c40ee90eab4\",\n      \"label\": \"label-9681\",\n      \"height\": 379,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"f36ee9dd-32de-4e05-9e83-a09afd29c692\",\n      \"label\": \"label-9682\",\n      \"height\": 159,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"045b4055-b412-4ce6-91a4-5206fbe8b05f\",\n      \"label\": \"label-9683\",\n      \"height\": 71,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"f65e2370-6513-4278-b407-4d0680b09c9f\",\n      \"label\": \"label-9684\",\n      \"height\": 57,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"9b42e4fd-2e5a-4b69-8539-b7e132524a15\",\n      \"label\": \"label-9685\",\n      \"height\": 510,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"f3a5e414-a97d-4c77-8f9d-a0396dbc22d7\",\n      \"label\": \"label-9686\",\n      \"height\": 465,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"8338f312-23af-4642-94e2-90f33cfc9b3f\",\n      \"label\": \"label-9687\",\n      \"height\": 429,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"947b4498-5119-4b8b-b76e-3e5ba4ee2c5e\",\n      \"label\": \"label-9688\",\n      \"height\": 165,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"bf9df4ad-e2f2-43d4-a441-ae01920765b7\",\n      \"label\": \"label-9689\",\n      \"height\": 41,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"c958b26a-5aaf-4cc1-85f8-2ec22d403f69\",\n      \"label\": \"label-9690\",\n      \"height\": 255,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"346b736f-ec2f-4bd4-ba78-4008932dca43\",\n      \"label\": \"label-9691\",\n      \"height\": 73,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"673404c4-f5e1-4084-aa88-6db358a358f7\",\n      \"label\": \"label-9692\",\n      \"height\": 144,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"5f686c00-13e9-4c40-a53e-0498fb916ba1\",\n      \"label\": \"label-9693\",\n      \"height\": 290,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"c86d05fd-900c-42d1-8981-9caf0736024e\",\n      \"label\": \"label-9694\",\n      \"height\": 254,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"c0c1ce90-00ce-4b7a-b317-d1f842b9860c\",\n      \"label\": \"label-9695\",\n      \"height\": 337,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"172d9ae3-99ad-4d2b-bc34-525e1d907c18\",\n      \"label\": \"label-9696\",\n      \"height\": 244,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"96366255-b3d4-45f5-9b8b-163d979a05c0\",\n      \"label\": \"label-9697\",\n      \"height\": 480,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"779e7a54-ad98-4261-8676-e5b79c75f491\",\n      \"label\": \"label-9698\",\n      \"height\": 142,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"3753a722-8d77-4b11-8f32-2c7e554a879c\",\n      \"label\": \"label-9699\",\n      \"height\": 190,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"63354f57-e84c-4b57-a1af-648ff2235244\",\n      \"label\": \"label-9700\",\n      \"height\": 98,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"8f4de988-8732-4e75-9709-5ae94ab189f6\",\n      \"label\": \"label-9701\",\n      \"height\": 490,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"71f391df-6767-4e80-880f-f1032c300a1c\",\n      \"label\": \"label-9702\",\n      \"height\": 146,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"0292df73-9594-488b-8a86-109c9d451c3f\",\n      \"label\": \"label-9703\",\n      \"height\": 155,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"b5c955c8-94f4-440c-adbc-fe137f3a352a\",\n      \"label\": \"label-9704\",\n      \"height\": 379,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"831c803c-62d2-4d33-98d5-16a2885c196c\",\n      \"label\": \"label-9705\",\n      \"height\": 434,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"75c2f618-c19b-4b3c-8d3f-7b8969de2bce\",\n      \"label\": \"label-9706\",\n      \"height\": 129,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"447d12ff-5c75-49f9-a883-7079402dada1\",\n      \"label\": \"label-9707\",\n      \"height\": 193,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"e9273891-085e-4d0c-bf86-cbd1eb19c11c\",\n      \"label\": \"label-9708\",\n      \"height\": 184,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"f29c8a8f-2b5c-49c0-948e-2850367f92b3\",\n      \"label\": \"label-9709\",\n      \"height\": 43,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"fe882763-4893-4316-bc49-b3a899a495d0\",\n      \"label\": \"label-9710\",\n      \"height\": 199,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"3965f76f-7e7b-4bfe-b4e6-0ddb74b141aa\",\n      \"label\": \"label-9711\",\n      \"height\": 493,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"1dc6e20e-d506-43ef-af4b-c40fb3cf8b43\",\n      \"label\": \"label-9712\",\n      \"height\": 194,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"a1a92fe9-7315-4b60-9ec0-81f8c1b3aab4\",\n      \"label\": \"label-9713\",\n      \"height\": 420,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"e6915c36-cd9b-4cbf-8d61-b79c76f97b72\",\n      \"label\": \"label-9714\",\n      \"height\": 517,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"b3596c10-2f65-44d5-b444-10bb32b8a7f5\",\n      \"label\": \"label-9715\",\n      \"height\": 287,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"f01eb4c7-2c0c-4a05-ae85-c60dab28cdd1\",\n      \"label\": \"label-9716\",\n      \"height\": 48,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"5e481437-17b1-47e0-8787-b1c2b4986ca5\",\n      \"label\": \"label-9717\",\n      \"height\": 398,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"11bc2e13-6897-4df3-ba13-2841609276be\",\n      \"label\": \"label-9718\",\n      \"height\": 172,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"1a751433-f6f1-4e85-aed3-7cf9bb38487c\",\n      \"label\": \"label-9719\",\n      \"height\": 506,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"59ed02d6-38ef-4c32-ab39-12075504459f\",\n      \"label\": \"label-9720\",\n      \"height\": 191,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"cf11687c-9187-4286-b1cd-c649abb1ca4e\",\n      \"label\": \"label-9721\",\n      \"height\": 412,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"81a6e6be-24b4-4ee4-9597-8ab26e6d15b8\",\n      \"label\": \"label-9722\",\n      \"height\": 104,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"0b311058-9e2e-4693-a6df-57d2a3929548\",\n      \"label\": \"label-9723\",\n      \"height\": 193,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"88f6434c-8c4d-4498-bc7b-b6cda749d29e\",\n      \"label\": \"label-9724\",\n      \"height\": 293,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"613b8a70-329e-4916-a0c5-5cf7dced583a\",\n      \"label\": \"label-9725\",\n      \"height\": 515,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"613f89ff-0d48-4da1-8734-85cca4b599b5\",\n      \"label\": \"label-9726\",\n      \"height\": 355,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"d8427e9b-6776-4335-869d-4fc331092caa\",\n      \"label\": \"label-9727\",\n      \"height\": 301,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"3c63f42d-e4d9-4853-a517-2643293bf335\",\n      \"label\": \"label-9728\",\n      \"height\": 370,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"a747f5e1-d0ca-4239-9337-8a903b04b602\",\n      \"label\": \"label-9729\",\n      \"height\": 523,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"f16d37c9-be75-4d10-ac0e-40605140775c\",\n      \"label\": \"label-9730\",\n      \"height\": 303,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"9c50c705-e791-4048-b2b8-5691c5125056\",\n      \"label\": \"label-9731\",\n      \"height\": 238,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"7e01b86b-4d93-49ec-97d3-894e1d566679\",\n      \"label\": \"label-9732\",\n      \"height\": 345,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"bcae968e-a41c-467e-8e39-ccb60b888656\",\n      \"label\": \"label-9733\",\n      \"height\": 38,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"97983ce9-7323-4747-9bf4-9fb1293e2315\",\n      \"label\": \"label-9734\",\n      \"height\": 491,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"add9006a-a6d1-418b-a71b-b871e9b7dff8\",\n      \"label\": \"label-9735\",\n      \"height\": 267,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"d9850e79-cd03-4e17-8f26-43c10f1751c5\",\n      \"label\": \"label-9736\",\n      \"height\": 375,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"9f1df5dc-2bc4-46c0-836d-054fc0ee0b31\",\n      \"label\": \"label-9737\",\n      \"height\": 225,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"af276397-cff8-4b9c-8d6f-a4874249ac1d\",\n      \"label\": \"label-9738\",\n      \"height\": 260,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"ee14b500-8c32-481f-ae30-75876178e424\",\n      \"label\": \"label-9739\",\n      \"height\": 375,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"5c951322-3ce6-4ecf-8438-0efbc14716f1\",\n      \"label\": \"label-9740\",\n      \"height\": 37,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"35f68d4f-7989-4991-bdad-e5442323e3c1\",\n      \"label\": \"label-9741\",\n      \"height\": 427,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"55d7bffd-94e9-4e07-b59e-4c0befb4ad63\",\n      \"label\": \"label-9742\",\n      \"height\": 130,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"a8e1810a-c761-4ee7-9bfb-3842945041f8\",\n      \"label\": \"label-9743\",\n      \"height\": 135,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"82d4c61e-9603-48c7-918a-70dec56bd58d\",\n      \"label\": \"label-9744\",\n      \"height\": 279,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"53249cba-5243-4002-b165-dc1144beea58\",\n      \"label\": \"label-9745\",\n      \"height\": 520,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"706ca269-c04f-4d1e-b3a5-d64eea27a37d\",\n      \"label\": \"label-9746\",\n      \"height\": 303,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"915a7027-a428-4a33-990a-4e8f0557b971\",\n      \"label\": \"label-9747\",\n      \"height\": 351,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"022b25f0-3b34-4bb8-b600-81f88471996c\",\n      \"label\": \"label-9748\",\n      \"height\": 348,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"a28ec46c-9b1c-4932-99cd-1a032bb98fad\",\n      \"label\": \"label-9749\",\n      \"height\": 409,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"8618ab76-26c0-43c8-bd40-ffa4dc00f3f5\",\n      \"label\": \"label-9750\",\n      \"height\": 104,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"cdeeea24-2a80-48b4-b517-aac316c24433\",\n      \"label\": \"label-9751\",\n      \"height\": 149,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"a91585c0-530f-495d-8fa0-ed074fd3fd64\",\n      \"label\": \"label-9752\",\n      \"height\": 42,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"675f6690-23a8-42e4-be55-a0038fb4dd5d\",\n      \"label\": \"label-9753\",\n      \"height\": 132,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"4f9435b0-8ec2-40fa-b0c1-65011cad9fe3\",\n      \"label\": \"label-9754\",\n      \"height\": 99,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"1c27de37-63a5-4fb3-9269-fc01d22a7125\",\n      \"label\": \"label-9755\",\n      \"height\": 407,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"715338f7-aad0-4bb9-8c7b-d0cdbdbb005d\",\n      \"label\": \"label-9756\",\n      \"height\": 233,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"df632781-6925-4e4b-a02e-58101bcf5269\",\n      \"label\": \"label-9757\",\n      \"height\": 340,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"524edc82-c92d-48b6-b811-5a510a36e3a0\",\n      \"label\": \"label-9758\",\n      \"height\": 98,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"6ee9ab23-81a7-4e60-b01f-525243b60858\",\n      \"label\": \"label-9759\",\n      \"height\": 155,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"a22f0f3f-c681-40ca-8c98-0545ebbfc6db\",\n      \"label\": \"label-9760\",\n      \"height\": 58,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"ec89be47-f961-4ce9-bd32-49d9d949675a\",\n      \"label\": \"label-9761\",\n      \"height\": 139,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"3bb1bc8d-a8a0-44f8-b08d-934d4439bb82\",\n      \"label\": \"label-9762\",\n      \"height\": 403,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"8ceec31d-d50c-4e04-a87d-dac06828613c\",\n      \"label\": \"label-9763\",\n      \"height\": 414,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"a71dcd3a-edaa-47ca-b125-11e2886cd2d1\",\n      \"label\": \"label-9764\",\n      \"height\": 381,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"95f6f259-5669-4271-a125-de1f9055ca56\",\n      \"label\": \"label-9765\",\n      \"height\": 443,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"73f0f3e5-7914-4710-9ad3-3e68a4b4e54f\",\n      \"label\": \"label-9766\",\n      \"height\": 293,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"efd0a71d-6432-404f-b47d-681ab50d2228\",\n      \"label\": \"label-9767\",\n      \"height\": 334,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"e155c355-3f52-4ea8-b1c8-a6a057360986\",\n      \"label\": \"label-9768\",\n      \"height\": 137,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"fe458624-b329-4954-9e55-0c1a70762060\",\n      \"label\": \"label-9769\",\n      \"height\": 491,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"adaea451-1cf5-4535-987a-dd4ea88b0c96\",\n      \"label\": \"label-9770\",\n      \"height\": 428,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"b9429130-b559-4a92-ad48-91ee0942ac62\",\n      \"label\": \"label-9771\",\n      \"height\": 435,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"dfc4a189-290c-4506-ad62-10e67cc90abe\",\n      \"label\": \"label-9772\",\n      \"height\": 77,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"06954a3f-3184-48e5-8276-a2a39836588b\",\n      \"label\": \"label-9773\",\n      \"height\": 465,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"e7a818d7-eca0-49c8-8644-bc8dd731af36\",\n      \"label\": \"label-9774\",\n      \"height\": 437,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"6e9b2b9b-37f7-497c-a530-a648860d8a87\",\n      \"label\": \"label-9775\",\n      \"height\": 368,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"a3a2ea50-613f-4c8e-b7af-7bd0663e7799\",\n      \"label\": \"label-9776\",\n      \"height\": 461,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"20a91e0b-f5f7-4f40-b762-f8fa8a7a089e\",\n      \"label\": \"label-9777\",\n      \"height\": 277,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"f9af6a50-2b93-4493-a75b-2d7603bbab76\",\n      \"label\": \"label-9778\",\n      \"height\": 335,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"70524eb8-9656-4986-a0a6-56dabc557d3f\",\n      \"label\": \"label-9779\",\n      \"height\": 448,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"eba7b6bc-cf25-4d37-9b45-4f1f1db35ec4\",\n      \"label\": \"label-9780\",\n      \"height\": 405,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"2e841ec2-d6b9-4fea-a0b8-24f17bf897e3\",\n      \"label\": \"label-9781\",\n      \"height\": 418,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"e1d255cf-9dc6-42de-a65d-cca4b2a08175\",\n      \"label\": \"label-9782\",\n      \"height\": 67,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"b8c89eeb-5630-4c92-a05b-aad820712640\",\n      \"label\": \"label-9783\",\n      \"height\": 311,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"3d19b461-2eef-429a-ae60-6f0663c35319\",\n      \"label\": \"label-9784\",\n      \"height\": 341,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"65867171-5137-4b0e-b28c-c034dd37f15d\",\n      \"label\": \"label-9785\",\n      \"height\": 226,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"ef5eff34-189d-48f5-a3e2-6e8dd07abee7\",\n      \"label\": \"label-9786\",\n      \"height\": 119,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"189cf0fd-be22-4e96-8892-6fef69943c3b\",\n      \"label\": \"label-9787\",\n      \"height\": 504,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"76d90d62-59a5-4b59-a651-9b85a0916205\",\n      \"label\": \"label-9788\",\n      \"height\": 83,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"d6f2ca4e-bdc3-4909-bdd1-a4fa71286148\",\n      \"label\": \"label-9789\",\n      \"height\": 67,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"55c6ff2a-777c-4e09-8be5-468032143bdd\",\n      \"label\": \"label-9790\",\n      \"height\": 158,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"1d472412-df57-4cd5-b6e1-b02d4ee43be0\",\n      \"label\": \"label-9791\",\n      \"height\": 180,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"d02b8bbd-34ff-48cd-a877-bc8bb641f971\",\n      \"label\": \"label-9792\",\n      \"height\": 175,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"a52ab224-0b63-4db8-b184-61af26130aea\",\n      \"label\": \"label-9793\",\n      \"height\": 509,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"8903e96e-e741-4b88-9bd2-527c03244e62\",\n      \"label\": \"label-9794\",\n      \"height\": 400,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"1088b2ad-e2e9-475c-b725-9a90a3a27ee2\",\n      \"label\": \"label-9795\",\n      \"height\": 250,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"e266f386-f6cd-4005-bd6c-cf9fdeca2181\",\n      \"label\": \"label-9796\",\n      \"height\": 316,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"a72d96be-1b0a-42c2-82cc-45017b9d24ee\",\n      \"label\": \"label-9797\",\n      \"height\": 359,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"3beadedf-e615-4399-af60-2c69d2d89498\",\n      \"label\": \"label-9798\",\n      \"height\": 438,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"1db30720-332d-40ad-9411-0acf3e26c458\",\n      \"label\": \"label-9799\",\n      \"height\": 269,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"558ae2e7-2ee7-42e1-8d2c-015cc5f38dc3\",\n      \"label\": \"label-9800\",\n      \"height\": 361,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"c46c499d-5055-451d-b8d6-a835bba91fe3\",\n      \"label\": \"label-9801\",\n      \"height\": 264,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"cad85910-cb50-4e6a-8e1e-c51f4c0d9063\",\n      \"label\": \"label-9802\",\n      \"height\": 342,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"dacee20b-a58e-4ae8-b41e-6957705e5590\",\n      \"label\": \"label-9803\",\n      \"height\": 136,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"9211eb5c-892b-43e5-afef-ad0112df0c60\",\n      \"label\": \"label-9804\",\n      \"height\": 70,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"aa46d971-a2c9-46c5-becb-fa8258cada1d\",\n      \"label\": \"label-9805\",\n      \"height\": 353,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"9c238f77-224c-47ba-a71f-293a656ce200\",\n      \"label\": \"label-9806\",\n      \"height\": 253,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"5fa17e87-eb20-4e52-aa52-07c1dadb405c\",\n      \"label\": \"label-9807\",\n      \"height\": 499,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"e09ad9e2-39b4-4e0a-81b2-b91f9e0b7ddb\",\n      \"label\": \"label-9808\",\n      \"height\": 508,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"b10d7f18-3f18-45e2-bd64-c1006182f616\",\n      \"label\": \"label-9809\",\n      \"height\": 529,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"8045d72e-4fa8-4226-b713-11afe12ba788\",\n      \"label\": \"label-9810\",\n      \"height\": 241,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"84514be4-2c94-4191-9308-3c3ed8c8ea18\",\n      \"label\": \"label-9811\",\n      \"height\": 256,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"5692219d-1887-494d-a6c0-aee3648f23cd\",\n      \"label\": \"label-9812\",\n      \"height\": 358,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"22ee8655-a919-46b2-b52f-1f82c4a3220e\",\n      \"label\": \"label-9813\",\n      \"height\": 83,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"4037e7c5-060e-4ac9-b0aa-e4e75e44f4d2\",\n      \"label\": \"label-9814\",\n      \"height\": 291,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"fe61eaa3-7133-4ee3-b0a2-9be16bce4b60\",\n      \"label\": \"label-9815\",\n      \"height\": 405,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"40dfac8e-acb1-4593-aa37-497bce9995b0\",\n      \"label\": \"label-9816\",\n      \"height\": 122,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"6485a3ef-a148-490f-b52b-12d1bb330390\",\n      \"label\": \"label-9817\",\n      \"height\": 426,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"25ed0428-4d67-40a0-b107-8cdf8469a102\",\n      \"label\": \"label-9818\",\n      \"height\": 322,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"38f5f5c9-edb7-4cf6-8ba4-c32c9649bbd1\",\n      \"label\": \"label-9819\",\n      \"height\": 325,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"5b5a915f-52ee-42f2-9ca8-c9825f9bb3fe\",\n      \"label\": \"label-9820\",\n      \"height\": 211,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"b6e102d0-099e-439a-8fce-d65a712e79e1\",\n      \"label\": \"label-9821\",\n      \"height\": 129,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"e689a042-a3a1-4b5a-b8b4-44a9b9a2fe48\",\n      \"label\": \"label-9822\",\n      \"height\": 58,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"c13237b0-989e-428b-b3a4-eff25a98139a\",\n      \"label\": \"label-9823\",\n      \"height\": 121,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"5e28653f-21ea-4cd7-b43c-c962412dfaa7\",\n      \"label\": \"label-9824\",\n      \"height\": 179,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"c1d7b175-9a10-441b-ae1d-693962623fcd\",\n      \"label\": \"label-9825\",\n      \"height\": 341,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"92c96236-3765-4f83-a21a-fcd2019a6ed4\",\n      \"label\": \"label-9826\",\n      \"height\": 317,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"c70451e9-fe15-47da-9bdd-43cf6a171a54\",\n      \"label\": \"label-9827\",\n      \"height\": 326,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"ad69195d-9a94-4fc0-8060-e7bb4b7ea90f\",\n      \"label\": \"label-9828\",\n      \"height\": 527,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"6911ed83-4ce4-40a6-8871-5a221d076118\",\n      \"label\": \"label-9829\",\n      \"height\": 136,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"53406d16-e337-4030-b3bc-6eaacee5a997\",\n      \"label\": \"label-9830\",\n      \"height\": 146,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"8ea4a648-e840-4c4a-b6f3-bf7e191e0c35\",\n      \"label\": \"label-9831\",\n      \"height\": 301,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"77037e15-2fb7-49e3-a8de-90cafbff8047\",\n      \"label\": \"label-9832\",\n      \"height\": 216,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"ad620473-19a3-43ae-8bf1-5bea9a93872e\",\n      \"label\": \"label-9833\",\n      \"height\": 51,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"261faeb4-6875-44bf-a6af-b347495f6709\",\n      \"label\": \"label-9834\",\n      \"height\": 419,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"e7d48545-f98c-423c-adbf-eb06737a735a\",\n      \"label\": \"label-9835\",\n      \"height\": 219,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"7ee34abd-8327-445f-8a2d-98ff9f74773d\",\n      \"label\": \"label-9836\",\n      \"height\": 53,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"d1eda9d7-a2b5-4c7c-9e50-4ce518556602\",\n      \"label\": \"label-9837\",\n      \"height\": 169,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"6b0e92b2-252d-4d77-be70-6f783236e39e\",\n      \"label\": \"label-9838\",\n      \"height\": 162,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"939285a3-5677-41a2-a3e4-ffefa425316e\",\n      \"label\": \"label-9839\",\n      \"height\": 398,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"0837bef5-0bc4-44c1-9541-9e6ce11a7fc9\",\n      \"label\": \"label-9840\",\n      \"height\": 60,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"eb683c01-44a8-4c84-9387-5e23c41802a8\",\n      \"label\": \"label-9841\",\n      \"height\": 434,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"b0cf05f9-da16-419e-a8cc-c1b665051796\",\n      \"label\": \"label-9842\",\n      \"height\": 244,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"108da063-a2ae-4a8c-b4f2-cb30128a8784\",\n      \"label\": \"label-9843\",\n      \"height\": 73,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"afaae8eb-9b19-41da-922c-945265bf97ac\",\n      \"label\": \"label-9844\",\n      \"height\": 242,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"2e01fe02-4636-4210-b530-4aae56128452\",\n      \"label\": \"label-9845\",\n      \"height\": 225,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"2dff4101-4593-4d45-9fe3-7017ee8dc08f\",\n      \"label\": \"label-9846\",\n      \"height\": 111,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"74730ff5-717c-4c2e-9281-d3202b6f3536\",\n      \"label\": \"label-9847\",\n      \"height\": 67,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"ee3889ad-a11b-49f5-822a-e6456ab0891b\",\n      \"label\": \"label-9848\",\n      \"height\": 131,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"7d9f20ea-ac63-4b5d-8cb2-7e07544e2b0b\",\n      \"label\": \"label-9849\",\n      \"height\": 342,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"ea65baf6-7bb0-43b0-91d2-9c29226b63d9\",\n      \"label\": \"label-9850\",\n      \"height\": 377,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"553c15a9-08ea-44fd-a8cc-0fa5db25674e\",\n      \"label\": \"label-9851\",\n      \"height\": 398,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"bb5cfe1c-f665-4b2c-aace-277fd26c81db\",\n      \"label\": \"label-9852\",\n      \"height\": 450,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"6f10c097-51ab-460c-b902-fddea27bdb99\",\n      \"label\": \"label-9853\",\n      \"height\": 201,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"ce31c25c-9047-4f9e-9e32-b5e0a774a8f9\",\n      \"label\": \"label-9854\",\n      \"height\": 366,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"0661b336-79f3-4384-8f69-fc5715a13f60\",\n      \"label\": \"label-9855\",\n      \"height\": 526,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"f75b2504-57ab-436e-8094-8c77ad4f87a8\",\n      \"label\": \"label-9856\",\n      \"height\": 358,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"c2617e73-bb9f-4c16-aedf-28da4b7bfcff\",\n      \"label\": \"label-9857\",\n      \"height\": 445,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"3c105f5b-a107-4769-8ffa-9982fb754fba\",\n      \"label\": \"label-9858\",\n      \"height\": 321,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"ef627692-4406-4867-90a1-ec13b88ed445\",\n      \"label\": \"label-9859\",\n      \"height\": 128,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"11818e65-a730-491c-b98f-ed0e1356d175\",\n      \"label\": \"label-9860\",\n      \"height\": 471,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"24d9620e-4712-4980-a16e-7f1fed92a9dc\",\n      \"label\": \"label-9861\",\n      \"height\": 50,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"bbfff0a8-aea2-458a-aee0-a4927e30dd6e\",\n      \"label\": \"label-9862\",\n      \"height\": 439,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"672f48dc-36c3-4b28-b54d-b3eaabb4c35f\",\n      \"label\": \"label-9863\",\n      \"height\": 455,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"075d0930-8134-4539-a6b8-052228a4b436\",\n      \"label\": \"label-9864\",\n      \"height\": 456,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"919ad734-ac5f-46b5-a6f4-ff84dd174365\",\n      \"label\": \"label-9865\",\n      \"height\": 338,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"c2847218-cf96-43c8-a28a-9ca9e80d8ef4\",\n      \"label\": \"label-9866\",\n      \"height\": 336,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"21f7ed5b-52ab-49eb-86b9-90c620de71b3\",\n      \"label\": \"label-9867\",\n      \"height\": 455,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"a12d55b6-e4c6-4a9c-ac84-2380ec5eb1d8\",\n      \"label\": \"label-9868\",\n      \"height\": 144,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"d0a9cc38-b561-4ea3-880c-e20a1bee3d75\",\n      \"label\": \"label-9869\",\n      \"height\": 169,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"33811746-55c7-42a5-b702-83e82bfb43a6\",\n      \"label\": \"label-9870\",\n      \"height\": 305,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"3be6fb83-494c-40f1-90b5-2f47a176c43f\",\n      \"label\": \"label-9871\",\n      \"height\": 466,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"def6108e-ddd6-4efc-8c74-14e12e2f8a46\",\n      \"label\": \"label-9872\",\n      \"height\": 236,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"c43f2ce2-1ce9-44c0-a910-22964079e077\",\n      \"label\": \"label-9873\",\n      \"height\": 102,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"b1ad7744-cb57-4a01-b3cd-4c6303b5d25e\",\n      \"label\": \"label-9874\",\n      \"height\": 269,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"bf89436a-9ed5-4367-9c1f-24c1659aa348\",\n      \"label\": \"label-9875\",\n      \"height\": 140,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"0942ec74-9ce2-4942-af73-608bc72abb56\",\n      \"label\": \"label-9876\",\n      \"height\": 314,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"3671860e-bf9a-487e-871b-6685e3f43728\",\n      \"label\": \"label-9877\",\n      \"height\": 130,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"91d91d56-e5f8-4970-a612-32ce16a4ccff\",\n      \"label\": \"label-9878\",\n      \"height\": 290,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"e45c9409-97a3-409c-baef-5e2137cb097e\",\n      \"label\": \"label-9879\",\n      \"height\": 512,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"c8a687c2-e615-44cb-990c-9f367c7923b4\",\n      \"label\": \"label-9880\",\n      \"height\": 525,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"1c01aa68-ae7f-4328-ab2f-26a55902c16b\",\n      \"label\": \"label-9881\",\n      \"height\": 274,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"a2199f0c-30f9-4797-8e8a-ccb33b9b969f\",\n      \"label\": \"label-9882\",\n      \"height\": 375,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"3dc783b7-6a05-4e7b-963f-ff12552f7a0b\",\n      \"label\": \"label-9883\",\n      \"height\": 358,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"aeaf703a-506b-42de-b3ef-203101790205\",\n      \"label\": \"label-9884\",\n      \"height\": 435,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"125a936c-c750-4b96-a4b6-8e420f758894\",\n      \"label\": \"label-9885\",\n      \"height\": 474,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"d2af3ccf-75db-427d-984c-4bc8b3bd6a52\",\n      \"label\": \"label-9886\",\n      \"height\": 344,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"bb750b49-a311-41a5-a4b7-3482e2be5f06\",\n      \"label\": \"label-9887\",\n      \"height\": 254,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"1a718011-b291-43ed-80a4-18b112b58100\",\n      \"label\": \"label-9888\",\n      \"height\": 427,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"f7234949-cc6e-4da3-befb-af9d9437133d\",\n      \"label\": \"label-9889\",\n      \"height\": 248,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"140a4aba-84c6-4db7-a9e8-d9747e961779\",\n      \"label\": \"label-9890\",\n      \"height\": 455,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"385d2de2-939b-4f92-8b49-8105305911ca\",\n      \"label\": \"label-9891\",\n      \"height\": 201,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"e83ceee6-e9ff-43f5-9ca5-28b053b3f84c\",\n      \"label\": \"label-9892\",\n      \"height\": 199,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"c67df40a-7ebe-4e24-9d8e-d4e128b437a3\",\n      \"label\": \"label-9893\",\n      \"height\": 266,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"fad78d8b-902e-4be1-927b-2e38d69b03ff\",\n      \"label\": \"label-9894\",\n      \"height\": 178,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"a5693f51-eabe-42cc-b832-877e0873a994\",\n      \"label\": \"label-9895\",\n      \"height\": 202,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"354e0e41-eac6-4ec0-a956-c7a8da43897b\",\n      \"label\": \"label-9896\",\n      \"height\": 68,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"777eaeb4-b974-4737-ad7c-4509e753bc52\",\n      \"label\": \"label-9897\",\n      \"height\": 97,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"0ac697b9-00ec-4c31-a2e8-5319c0c8054b\",\n      \"label\": \"label-9898\",\n      \"height\": 246,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"bd80ea08-aa82-488b-a28f-a918a536c2c7\",\n      \"label\": \"label-9899\",\n      \"height\": 114,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"e2e1db62-299d-48ce-aed7-a096130673ed\",\n      \"label\": \"label-9900\",\n      \"height\": 522,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"c438f419-7569-4d12-aa48-ba3ffa7fbef4\",\n      \"label\": \"label-9901\",\n      \"height\": 517,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"a572f87c-0e32-4037-928d-5129abcf5089\",\n      \"label\": \"label-9902\",\n      \"height\": 127,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"b11d7d6a-c4e8-4716-9a59-c3a05c47719a\",\n      \"label\": \"label-9903\",\n      \"height\": 214,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"af63ccfb-dd08-44a3-8a1a-65b2eb2d9de4\",\n      \"label\": \"label-9904\",\n      \"height\": 122,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"51634b91-8c5c-42ba-b875-28b1478dbbbc\",\n      \"label\": \"label-9905\",\n      \"height\": 365,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"1d15326e-e928-46c7-a6b3-7bc4dcce4d35\",\n      \"label\": \"label-9906\",\n      \"height\": 44,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"19aecdbe-335a-4b30-bca6-a1aead25ab61\",\n      \"label\": \"label-9907\",\n      \"height\": 85,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"5d916698-4c6a-4c9b-9f24-0d12c2d208f8\",\n      \"label\": \"label-9908\",\n      \"height\": 328,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"da37be42-25fc-4517-bcf5-b2ccd045e422\",\n      \"label\": \"label-9909\",\n      \"height\": 181,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"168f61e8-2778-4732-865c-fdd47dc8685f\",\n      \"label\": \"label-9910\",\n      \"height\": 173,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"7d769d79-687e-4a5f-b434-e9ce174ee9ee\",\n      \"label\": \"label-9911\",\n      \"height\": 514,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"d9e63be3-7950-4adf-a280-715e511fd0fd\",\n      \"label\": \"label-9912\",\n      \"height\": 194,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"03a6cb10-b633-4df6-8a21-5baaadb47d10\",\n      \"label\": \"label-9913\",\n      \"height\": 326,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"a666bacc-dc2b-4029-a4eb-36ffef59cd9b\",\n      \"label\": \"label-9914\",\n      \"height\": 302,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"554ca88e-13e8-4db6-b8c9-96872f4267bc\",\n      \"label\": \"label-9915\",\n      \"height\": 289,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"4bcfd0bc-bb3d-445d-8125-41991025957a\",\n      \"label\": \"label-9916\",\n      \"height\": 150,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"2768f8c2-926b-4040-b423-cecef3ad125e\",\n      \"label\": \"label-9917\",\n      \"height\": 525,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"7dbaff5f-4c20-4622-8d18-2bfcf483f743\",\n      \"label\": \"label-9918\",\n      \"height\": 324,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"7e76ca37-565e-4865-96f0-a56d420df4e6\",\n      \"label\": \"label-9919\",\n      \"height\": 52,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"a22941f0-0990-4291-82c0-7ca6e1f48f1a\",\n      \"label\": \"label-9920\",\n      \"height\": 308,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"b076e6d0-8205-4994-a0d8-f7c9b93f2b75\",\n      \"label\": \"label-9921\",\n      \"height\": 292,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"46e59e73-a065-4da1-adfd-3a567609c0a2\",\n      \"label\": \"label-9922\",\n      \"height\": 264,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"71ba04db-988e-4abd-a470-5201ab474d6b\",\n      \"label\": \"label-9923\",\n      \"height\": 522,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"c1123bd4-9299-4c31-a5ee-600ef686018a\",\n      \"label\": \"label-9924\",\n      \"height\": 276,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"dca77346-bfc8-4bae-9fc8-a00a743731e0\",\n      \"label\": \"label-9925\",\n      \"height\": 425,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"d1e96107-ab8b-4d0d-a701-642c3c936194\",\n      \"label\": \"label-9926\",\n      \"height\": 310,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"96d93809-6deb-47dc-86ae-641bab83b867\",\n      \"label\": \"label-9927\",\n      \"height\": 233,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"0816e7fa-3e59-47f0-8f99-e3c9f14dba0a\",\n      \"label\": \"label-9928\",\n      \"height\": 86,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"82594e49-2cf8-4ef1-aded-f99dcce80880\",\n      \"label\": \"label-9929\",\n      \"height\": 87,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"2779ac4f-a7fd-4a73-8388-6cf9521a3171\",\n      \"label\": \"label-9930\",\n      \"height\": 71,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"5aa3e33b-bf4c-4f29-b6ec-b6beff859b58\",\n      \"label\": \"label-9931\",\n      \"height\": 470,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"57bcdb3c-9b8d-42a1-b8a0-560dc73761ad\",\n      \"label\": \"label-9932\",\n      \"height\": 423,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"14759c16-301e-4ba8-a72c-ee44ea2f22df\",\n      \"label\": \"label-9933\",\n      \"height\": 76,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"20b87955-c2ce-4c95-833f-d219701179d9\",\n      \"label\": \"label-9934\",\n      \"height\": 86,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"6e1d6a14-3703-400d-8fdf-38692869b185\",\n      \"label\": \"label-9935\",\n      \"height\": 42,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"428b2c5c-f935-44ad-a364-fcc6aacd4bc7\",\n      \"label\": \"label-9936\",\n      \"height\": 492,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"91652e66-2255-41d7-bbd3-3a98ac8dc1f7\",\n      \"label\": \"label-9937\",\n      \"height\": 269,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"b37ad9a3-17cf-423b-8381-c0d0aa89fa0d\",\n      \"label\": \"label-9938\",\n      \"height\": 74,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"a13f1cec-e88e-433b-a6a3-0d4517a34d29\",\n      \"label\": \"label-9939\",\n      \"height\": 468,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"408eceb3-50b6-45d2-ad85-69039f8600de\",\n      \"label\": \"label-9940\",\n      \"height\": 522,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"14937f3e-215a-4100-ac9a-73b3c701ac0e\",\n      \"label\": \"label-9941\",\n      \"height\": 402,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"a94d0d54-4b11-4c11-858e-9758949d923b\",\n      \"label\": \"label-9942\",\n      \"height\": 44,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"afc7a01c-b4c3-41e5-a56a-9367de3b065b\",\n      \"label\": \"label-9943\",\n      \"height\": 101,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"9f45a297-a221-493a-94e9-efaafa2968f0\",\n      \"label\": \"label-9944\",\n      \"height\": 451,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"b50dc340-bcdf-44f9-b40b-0e7c75b4ab76\",\n      \"label\": \"label-9945\",\n      \"height\": 492,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"66fcf382-347f-423f-9329-b77241a87737\",\n      \"label\": \"label-9946\",\n      \"height\": 456,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"67226a8b-b8a1-4d3e-b644-9bdf618ffb54\",\n      \"label\": \"label-9947\",\n      \"height\": 204,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"89317ec3-ef69-4cf0-b50c-e68923199c91\",\n      \"label\": \"label-9948\",\n      \"height\": 414,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"04c68a16-b633-4c3f-84f9-659b05e8d217\",\n      \"label\": \"label-9949\",\n      \"height\": 390,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"f87f00c6-7515-4614-bb3e-543df8f58d9b\",\n      \"label\": \"label-9950\",\n      \"height\": 202,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"d2da9202-0393-4972-8464-df70b96489e5\",\n      \"label\": \"label-9951\",\n      \"height\": 402,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"2e00aae3-e2e8-42fb-9805-4062c5e91a60\",\n      \"label\": \"label-9952\",\n      \"height\": 527,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"f727c827-0268-47e9-b81b-4db928e4487e\",\n      \"label\": \"label-9953\",\n      \"height\": 408,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"7803c6dd-6edb-4fd7-95a2-7f18e8ea2b45\",\n      \"label\": \"label-9954\",\n      \"height\": 404,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"aee63fbc-03d6-44c0-a403-a1fb6d007999\",\n      \"label\": \"label-9955\",\n      \"height\": 225,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"032cbe88-57cb-4546-8d58-fdee00063e37\",\n      \"label\": \"label-9956\",\n      \"height\": 240,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"51ac1a36-0b47-4229-a5f5-273677d31bfc\",\n      \"label\": \"label-9957\",\n      \"height\": 285,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"8f3a318e-c869-4382-a2de-7bb4ed3e9443\",\n      \"label\": \"label-9958\",\n      \"height\": 62,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"a29e98a9-a73a-450f-b43d-9b72056f7f0c\",\n      \"label\": \"label-9959\",\n      \"height\": 303,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"f240d350-7559-4472-a393-02e65bfe7d18\",\n      \"label\": \"label-9960\",\n      \"height\": 237,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"ca2badb4-be19-4143-9d74-1d8a4db6722a\",\n      \"label\": \"label-9961\",\n      \"height\": 116,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"7cfb3aea-189a-4eb5-a581-6eb7de29aaa1\",\n      \"label\": \"label-9962\",\n      \"height\": 307,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"d78fbd6e-9776-4559-96bd-0f3a3e954a5d\",\n      \"label\": \"label-9963\",\n      \"height\": 422,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"4f037ece-4afe-492c-a597-7080996dc045\",\n      \"label\": \"label-9964\",\n      \"height\": 256,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"796204b0-7673-45ba-91a2-11419ae1a02e\",\n      \"label\": \"label-9965\",\n      \"height\": 470,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"3a39c20f-b55f-44d7-89fc-bbee61c171e9\",\n      \"label\": \"label-9966\",\n      \"height\": 36,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"2aeac93a-80b5-4f79-acbc-2d2125ffa7b3\",\n      \"label\": \"label-9967\",\n      \"height\": 512,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"4dd891d7-ac72-4d61-aa4b-0094574d6a37\",\n      \"label\": \"label-9968\",\n      \"height\": 304,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"44019aed-7f94-4c1d-bf45-47a3e3cb0d8a\",\n      \"label\": \"label-9969\",\n      \"height\": 372,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"9f2d4fad-0584-4ad6-887d-1b4e24bf2d73\",\n      \"label\": \"label-9970\",\n      \"height\": 352,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"2902fd20-3ce1-4df9-bc9b-e534a8977252\",\n      \"label\": \"label-9971\",\n      \"height\": 454,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"98b4aaa1-32a4-4dbe-b25c-23703d39925b\",\n      \"label\": \"label-9972\",\n      \"height\": 65,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"3b538302-5709-4be5-a510-4319069e40aa\",\n      \"label\": \"label-9973\",\n      \"height\": 315,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"4d1d11ef-b5e7-42ff-b789-3c05d312ecf2\",\n      \"label\": \"label-9974\",\n      \"height\": 443,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"4e9b21cb-1cc9-4844-94da-9ecd13efedf0\",\n      \"label\": \"label-9975\",\n      \"height\": 172,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"7b2e537b-9380-4644-83c1-72e212a5ed0f\",\n      \"label\": \"label-9976\",\n      \"height\": 490,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"182ebbe8-df41-4b79-a2ba-485d298ce8b7\",\n      \"label\": \"label-9977\",\n      \"height\": 112,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"5fdfcd29-98d4-4c4a-b084-459149255daf\",\n      \"label\": \"label-9978\",\n      \"height\": 518,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"346e1b52-1599-44eb-959b-00dc83b58b84\",\n      \"label\": \"label-9979\",\n      \"height\": 184,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"614620f1-dfaf-42e9-9c2d-bc3ce90c8cef\",\n      \"label\": \"label-9980\",\n      \"height\": 314,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"c1953c82-d5d0-44c9-a757-ff7e0e524987\",\n      \"label\": \"label-9981\",\n      \"height\": 202,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"ad14e994-2387-4dfb-affa-9266810046df\",\n      \"label\": \"label-9982\",\n      \"height\": 109,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"6364a081-d095-4a63-92ae-27b0f013ad52\",\n      \"label\": \"label-9983\",\n      \"height\": 204,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"749db9d2-dd56-4e40-afa8-6b00b831ede7\",\n      \"label\": \"label-9984\",\n      \"height\": 426,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"13be70f0-58a1-4d94-ae1d-d81afdec5402\",\n      \"label\": \"label-9985\",\n      \"height\": 149,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"cb8fd5b3-0b65-41e6-a973-a58225994454\",\n      \"label\": \"label-9986\",\n      \"height\": 202,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"2cf10c31-eb72-4c17-8388-a98da60780d5\",\n      \"label\": \"label-9987\",\n      \"height\": 211,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"ae86ce0d-7349-4a6b-a38b-a7b892a3825f\",\n      \"label\": \"label-9988\",\n      \"height\": 89,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"aa2298a5-8996-4004-8d86-0e704a6a7ecc\",\n      \"label\": \"label-9989\",\n      \"height\": 192,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"d36dac09-0527-487c-bc3a-0a70f71c1940\",\n      \"label\": \"label-9990\",\n      \"height\": 371,\n      \"background\": \"red\"\n  },\n  {\n      \"key\": \"ada0775e-5334-4b06-bb13-53ecfabe92c8\",\n      \"label\": \"label-9991\",\n      \"height\": 334,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"bd4a09fa-bf4a-412b-98fb-419b15e7eee8\",\n      \"label\": \"label-9992\",\n      \"height\": 500,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"9c4f199a-ab62-4648-8ba8-61afe90b359c\",\n      \"label\": \"label-9993\",\n      \"height\": 411,\n      \"background\": \"blue\"\n  },\n  {\n      \"key\": \"efbdb272-a021-4448-982a-7c72e05e4f70\",\n      \"label\": \"label-9994\",\n      \"height\": 497,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"49b8fb55-895d-4d1e-95a7-5c6588eeb482\",\n      \"label\": \"label-9995\",\n      \"height\": 292,\n      \"background\": \"yellow\"\n  },\n  {\n      \"key\": \"63047041-ab84-4126-b32e-0b6738996b7f\",\n      \"label\": \"label-9996\",\n      \"height\": 220,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"d39d56d3-92d0-499c-8570-02cdbbf5ff30\",\n      \"label\": \"label-9997\",\n      \"height\": 67,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"b621bf88-f9d0-491b-9b76-7e55dd55cdfa\",\n      \"label\": \"label-9998\",\n      \"height\": 528,\n      \"background\": \"green\"\n  },\n  {\n      \"key\": \"17f4d643-9210-4504-8e1c-af3885181f24\",\n      \"label\": \"label-9999\",\n      \"height\": 177,\n      \"background\": \"yellow\"\n  }\n]\n"
  },
  {
    "path": "packages/web-vue-storybook/stories/components/menu.vue",
    "content": "<template>\n  <Checkbox v-model=\"isVertical\">vertical</Checkbox>\n  <Checkbox v-model=\"collapsed\">collapsed</Checkbox>\n  <Checkbox v-model=\"checked\">Menu 1</Checkbox>\n  <Checkbox v-model=\"checked1\">Menu 11</Checkbox>\n  <Menu\n    :style=\"{ width: '500px', height: '100%' }\"\n    :default-open-keys=\"['0']\"\n    :default-selected-keys=\"['0_1']\"\n    :show-collapse-button=\"false\"\n    :collapsed=\"collapsed\"\n    :mode=\"isVertical ? 'vertical' : 'horizontal'\"\n  >\n    <MenuItem key=\"00\">Menu Item 0</MenuItem>\n    <SubMenu key=\"0\">\n      <template #title><icon-apps /> Navigation 1</template>\n      <MenuItem v-if=\"checked\" key=\"0_0\">Menu 1</MenuItem>\n      <MenuItem key=\"0_1\">Menu 2</MenuItem>\n      <MenuItem key=\"0_2\" disabled>Menu 3</MenuItem>\n      <SubMenu key=\"01\" selectable>\n        <template #title><icon-apps /> Navigation 11</template>\n        <MenuItem v-if=\"checked1\" key=\"01_0\">Menu 11</MenuItem>\n        <MenuItem key=\"01_1\">Menu 21</MenuItem>\n        <MenuItem key=\"01_2\" disabled>Menu 31</MenuItem>\n      </SubMenu>\n    </SubMenu>\n    <SubMenu key=\"1\">\n      <template #title><icon-bug /> Navigation 2</template>\n      <MenuItem key=\"1_0\">Menu 1</MenuItem>\n      <MenuItem key=\"1_1\">Menu 2</MenuItem>\n      <MenuItem key=\"1_2\">Menu 3</MenuItem>\n      <CustomMenu />\n    </SubMenu>\n    <SubMenu key=\"2\">\n      <template #title><icon-bulb /> Navigation 3</template>\n      <MenuGroup title=\"Menu Group 1\">\n        <MenuItem key=\"2_0\">Menu 1</MenuItem>\n        <MenuItem key=\"2_1\">Menu 2</MenuItem>\n      </MenuGroup>\n      <MenuGroup title=\"Menu Group 2\">\n        <MenuItem key=\"2_2\">Menu 3</MenuItem>\n        <MenuItem key=\"2_3\">Menu 4</MenuItem>\n      </MenuGroup>\n    </SubMenu>\n  </Menu>\n  <div>\n    <Switch v-model=\"hide\">hide</Switch>\n    <Menu v-show=\"!hide\" mode=\"horizontal\">\n      <MenuItem v-for=\"index in 20\" :key=\"index\" @click=\"onItemClick\"\n        >Menu {{ index }}\n      </MenuItem>\n    </Menu>\n  </div>\n  <TypographyTitle :heading=\"4\">带有自己封装的 SubMenu</TypographyTitle>\n  <Menu\n    :default-open-keys=\"['0']\"\n    :default-selected-keys=\"['0_1']\"\n    :show-collapse-button=\"false\"\n    :mode=\"'horizontal'\"\n  >\n    <template v-for=\"item in menuList\" :key=\"item.key\">\n      <MenuItem v-if=\"!item.children\" :key=\"item.key\">{{\n        item.title\n      }}</MenuItem>\n      <template v-else\n        ><CustomSubMenu :key=\"`${item.key}-sub`\" :parent=\"item\"\n      /></template>\n    </template>\n  </Menu>\n</template>\n<script>\nimport { defineComponent } from 'vue';\nimport { Menu, Checkbox, Switch, Typography } from '@web-vue/components';\nimport { IconApps, IconBug, IconBulb } from '@web-vue/components/icon';\nimport CustomMenu from './custom-menu.vue';\nimport CustomSubMenu from './custom-sub-menu.vue';\n\nexport default defineComponent({\n  components: {\n    Menu,\n    MenuItem: Menu.Item,\n    SubMenu: Menu.SubMenu,\n    Checkbox,\n    IconApps,\n    MenuGroup: Menu.ItemGroup,\n    IconBug,\n    IconBulb,\n    CustomMenu,\n    Switch,\n    CustomSubMenu,\n    TypographyTitle: Typography.Title,\n  },\n  setup() {},\n  data() {\n    return {\n      checked: true,\n      checked1: true,\n      isVertical: true,\n      collapsed: true,\n      hide: false,\n      menuList: [\n        {\n          key: 1,\n          title: '菜单1',\n        },\n        {\n          key: 2,\n          title: '菜单2',\n        },\n        {\n          key: 3,\n          title: '菜单3',\n          children: [\n            {\n              key: 11,\n              title: '菜单3-1',\n            },\n            {\n              key: 12,\n              title: '菜单3-2',\n            },\n            {\n              key: 12,\n              title: '菜单3-2',\n            },\n          ],\n        },\n        {\n          key: 4,\n          title: '菜单4',\n          children: [\n            {\n              key: 41,\n              title: '菜单4-1',\n            },\n            {\n              key: 42,\n              title: '菜单4-2',\n            },\n            {\n              key: 43,\n              title: '菜单4-3',\n            },\n          ],\n        },\n        {\n          key: 5,\n          title: '菜单5',\n          children: [\n            {\n              key: 51,\n              title: '菜单5-1',\n            },\n            {\n              key: 52,\n              title: '菜单5-2',\n            },\n            {\n              key: 53,\n              title: '菜单5-3',\n            },\n          ],\n        },\n        {\n          key: 6,\n          title: '菜单6',\n          children: [\n            {\n              key: 61,\n              title: '菜单6-1',\n            },\n            {\n              key: 62,\n              title: '菜单6-2',\n            },\n            {\n              key: 63,\n              title: '菜单6-3',\n            },\n          ],\n        },\n        {\n          key: 7,\n          title: '菜单7',\n          children: [\n            {\n              key: 71,\n              title: '菜单7-1',\n            },\n            {\n              key: 72,\n              title: '菜单7-2',\n            },\n            {\n              key: 73,\n              title: '菜单7-3',\n            },\n          ],\n        },\n        {\n          key: 8,\n          title: '菜单8',\n          children: [\n            {\n              key: 81,\n              title: '菜单8-1',\n            },\n            {\n              key: 82,\n              title: '菜单8-2',\n            },\n            {\n              key: 83,\n              title: '菜单8-3',\n            },\n          ],\n        },\n      ],\n    };\n  },\n  methods: {\n    onItemClick(args) {\n      console.log('menu item click: ', args);\n    },\n  },\n});\n</script>\n"
  },
  {
    "path": "packages/web-vue-storybook/stories/components/number-input.vue",
    "content": "<template>\n  <div>\n    <Form\n      ref=\"formRef\"\n      :size=\"form.size\"\n      :model=\"form\"\n      :style=\"{ width: '600px' }\"\n      :validate-trigger=\"['change', 'input']\"\n      @submit=\"handleSubmit\"\n    >\n      <FormItem\n        field=\"name\"\n        label=\"Username\"\n        :rules=\"[\n          { required: true, message: 'name is required' },\n          { minLength: 5, message: 'must be greater than 5 characters' },\n          { validator: testValidator('text') },\n        ]\"\n        :validate-trigger=\"['change', 'input']\"\n      >\n        <Input\n          v-model=\"form.name\"\n          placeholder=\"please enter your username...\"\n        />\n      </FormItem>\n      <FormItem\n        field=\"age\"\n        label=\"Age\"\n        :validate-trigger=\"['change', 'input']\"\n        :rules=\"[\n          { required: true, message: 'age is required' },\n          { type: 'number', max: 200, message: 'age is max than 200' },\n          { validator: testValidator('number') },\n        ]\"\n      >\n        <InputNumber\n          v-model=\"form.age\"\n          placeholder=\"please enter your age...\"\n        />\n      </FormItem>\n    </Form>\n\n    <div class=\"data\">\n      <pre>{{ form }}</pre>\n    </div>\n  </div>\n</template>\n\n<script setup>\nimport { reactive } from 'vue';\nimport { InputNumber, Form, FormItem, Input } from '@web-vue/components';\n\nconst form = reactive({\n  size: 'medium',\n  name: '',\n  age: null,\n  section: '',\n  province: 'haidian',\n  options: [],\n  date: '',\n  radio: 'radio one',\n  slider: 5,\n  score: 5,\n  switch: false,\n  multiSelect: ['section one'],\n  treeSelect: '',\n});\n\nconst testValidator = (source) => {\n  return (value, cb) => {\n    console.log('🚀 ~ file: number-input.vue ~ line 69 ~ source', source);\n    console.log('🚀 ~ file: number-input.vue ~ line 54 ~ value', value);\n    cb();\n  };\n};\n\nconst handleSubmit = () => {\n  console.log(form);\n};\n</script>\n"
  },
  {
    "path": "packages/web-vue-storybook/stories/components/select.tsx",
    "content": "import { ref } from 'vue';\nimport { Select } from '@web-vue/components';\n\nexport default {\n  setup() {\n    const data = ref([111, 222, 3]);\n\n    return () => (\n      // @ts-ignore\n      <Select placeholder=\"test\">\n        {data.value.map((item) => (\n          // @ts-ignore\n          <Select.Option value={item}>{item}</Select.Option>\n        ))}\n      </Select>\n    );\n  },\n};\n"
  },
  {
    "path": "packages/web-vue-storybook/stories/components/space.vue",
    "content": "<template>\n  <Space>\n    <template v-for=\"i in 10\" :key=\"i\">\n      <template v-if=\"i === 2\">\n        <template v-for=\"k in 10\" :key=\"k\">\n          <template v-if=\"k === 2\">\n            <div v-for=\"f in 10\" :key=\"f\">22{{ f }}</div>\n          </template>\n          <template v-else\n            ><div>2{{ k }}</div></template\n          >\n        </template>\n      </template>\n      <template v-else\n        ><div>{{ i }}</div></template\n      >\n    </template>\n    {{ 222 }}\n    <template v-if=\"true\">\n      <div>template 1</div>\n      <div>template 2</div>\n    </template>\n  </Space>\n</template>\n\n<script>\nimport { Space } from '@web-vue/components';\n\nexport default {\n  components: { Space },\n};\n</script>\n"
  },
  {
    "path": "packages/web-vue-storybook/stories/components/tree-draggable.vue",
    "content": "<template>\n  <Checkbox v-model=\"checked\" style=\"margin-bottom: 20px\"> checkable </Checkbox>\n  <Tree\n    class=\"tree-demo\"\n    draggable\n    block-node\n    :checkable=\"checked\"\n    :data=\"treeData\"\n    @drop=\"onDrop\"\n  >\n    <template #drag-icon>\n      <IconStar />\n    </template>\n  </Tree>\n</template>\n<script lang=\"jsx\">\nimport { ref } from 'vue';\nimport { Tree, Checkbox } from '@web-vue/components';\nimport { IconStar } from '@web-vue/components/icon';\n\nexport default {\n  components: {\n    Tree,\n    Checkbox,\n    IconStar,\n  },\n  setup() {\n    const treeData = ref(defaultTreeData);\n    const checkedKeys = ref([]);\n    const checked = ref(false);\n\n    return {\n      treeData,\n      checkedKeys,\n      checked,\n      onDrop({ dragNode, dropNode, dropPosition }) {\n        const data = treeData.value;\n        const loop = (data, key, callback) => {\n          data.some((item, index, arr) => {\n            if (item.key === key) {\n              callback(item, index, arr);\n              return true;\n            }\n            if (item.children) {\n              return loop(item.children, key, callback);\n            }\n            return false;\n          });\n        };\n\n        loop(data, dragNode.key, (_, index, arr) => {\n          arr.splice(index, 1);\n        });\n\n        if (dropPosition === 0) {\n          loop(data, dropNode.key, (item) => {\n            item.children = item.children || [];\n            item.children.push(dragNode);\n          });\n        } else {\n          loop(data, dropNode.key, (_, index, arr) => {\n            arr.splice(dropPosition < 0 ? index : index + 1, 0, dragNode);\n          });\n        }\n      },\n    };\n  },\n};\n\nconst defaultTreeData = [\n  {\n    title: 'Trunk 0-0',\n    key: '0-0',\n    dragIcon: () => 'ss',\n    children: [\n      {\n        title: 'Leaf 0-0-1',\n        key: '0-0-1',\n      },\n      {\n        title: 'Branch 0-0-2',\n        key: '0-0-2',\n        disableCheckbox: true,\n        children: [\n          {\n            draggable: false,\n            title: 'Leaf 0-0-2-1 (Drag disabled)',\n            key: '0-0-2-1',\n          },\n        ],\n      },\n    ],\n  },\n  {\n    title: 'Trunk 0-1',\n    key: '0-1',\n    children: [\n      {\n        title: 'Branch 0-1-1',\n        key: '0-1-1',\n        checkable: false,\n        children: [\n          {\n            title: 'Leaf 0-1-1-1',\n            key: '0-1-1-1',\n          },\n          {\n            title: 'Leaf 0-1-1-2',\n            key: '0-1-1-2',\n          },\n        ],\n      },\n      {\n        title: 'Leaf 0-1-2',\n        key: '0-1-2',\n      },\n    ],\n  },\n];\n</script>\n<style scoped lang=\"less\">\n.tree-demo {\n  :deep(.tree-node-dropover) > :deep(.arco-tree-node-title) {\n    &,\n    &:hover {\n      animation: blinkBg 0.4s 2;\n    }\n  }\n}\n\n@keyframes blinkBg {\n  0% {\n    background-color: transparent;\n  }\n\n  100% {\n    background-color: var(--color-primary-light-1);\n  }\n}\n</style>\n"
  },
  {
    "path": "packages/web-vue-storybook/stories/components/tree-select.vue",
    "content": "<template>\n  <div>\n    <TypographyTitle>点击结点可收起</TypographyTitle>\n    <p><TypographyText>只能选择叶子节点的时候默认开启</TypographyText></p>\n    <TreeSelect :data=\"treeData\" selectable=\"leaf\" />\n    <p><TypographyText>自定义选中并收起</TypographyText></p>\n    <TreeSelect\n      :data=\"treeData\"\n      multiple\n      :tree-props=\"{ actionOnNodeClick: 'expand' }\"\n    />\n    <TypographyTitle>Tag 可关闭</TypographyTitle>\n    <p><TypographyText>默认</TypographyText></p>\n    <TreeSelect :data=\"treeData\" tag-closable multiple />\n    <p><TypographyText>显示复选框</TypographyText></p>\n    <TreeSelect :data=\"treeData\" tree-checkable tag-closable />\n    <p><TypographyText>显示复选框，取消父子关联</TypographyText></p>\n    <TreeSelect\n      :data=\"treeData\"\n      tree-checkable\n      tag-closable\n      tree-check-strictly\n    />\n    <p><TypographyText>仅叶子结点可选</TypographyText></p>\n    <Space fill>\n      <TreeSelect\n        :data=\"treeData\"\n        tag-closable\n        selectable=\"leaf\"\n        style=\"width: 300px\"\n      />\n      <TreeSelect\n        :data=\"treeData\"\n        tree-checkable\n        tag-closable\n        selectable=\"leaf\"\n        style=\"width: 400px\"\n      />\n    </Space>\n  </div>\n</template>\n\n<script>\n// import { ref } from 'vue';\nimport { TreeSelect, Typography, Space } from '@web-vue/components';\n\nexport default {\n  components: {\n    TreeSelect,\n    TypographyTitle: Typography.Title,\n    TypographyText: Typography.Text,\n    Space,\n  },\n  setup() {\n    return {\n      treeData,\n    };\n  },\n};\n\nconst treeData = [\n  {\n    title: 'Trunk 0-0',\n    key: '0-0',\n    children: [\n      {\n        title: 'Leaf',\n        key: '0-0-1',\n      },\n      {\n        title: 'Branch 0-0-2',\n        key: '0-0-2',\n        disabled: true,\n        children: [\n          {\n            title: 'Leaf',\n            key: '0-0-2-1',\n          },\n          {\n            title: 'Leaf',\n            key: '0-0-2-2',\n            disableCheckbox: true,\n          },\n        ],\n      },\n    ],\n  },\n  {\n    title: 'Trunk 0-1',\n    key: '0-1',\n    children: [\n      {\n        title: 'Branch 0-1-1',\n        key: '0-1-1',\n        children: [\n          {\n            title: 'Leaf ',\n            key: '0-1-1-1',\n          },\n          {\n            title: 'Leaf ',\n            key: '0-1-1-2',\n          },\n        ],\n      },\n      {\n        title: 'Leaf',\n        key: '0-1-2',\n      },\n    ],\n  },\n];\n</script>\n"
  },
  {
    "path": "packages/web-vue-storybook/stories/components/tree.vue",
    "content": "<template>\n  <Tree\n    v-model:checked-keys=\"checkedKeys\"\n    :checkable=\"true\"\n    :data=\"treeData\"\n    @check=\"onCheck\"\n  />\n</template>\n\n<script>\nimport { ref } from 'vue';\nimport { Tree } from '@web-vue/components';\n\nexport default {\n  components: { Tree },\n  setup() {\n    const checkedKeys = ref([]);\n\n    return {\n      checkedKeys,\n      treeData,\n      onCheck(...args) {\n        console.log(...args);\n      },\n    };\n  },\n};\n\nconst treeData = [\n  {\n    title: 'Trunk 0-0',\n    key: '0-0',\n    children: [\n      {\n        title: 'Leaf',\n        key: '0-0-1',\n      },\n      {\n        title: 'Branch 0-0-2',\n        key: '0-0-2',\n        disabled: true,\n        children: [\n          {\n            title: 'Leaf',\n            key: '0-0-2-1',\n          },\n          {\n            title: 'Leaf',\n            key: '0-0-2-2',\n            disableCheckbox: true,\n          },\n        ],\n      },\n    ],\n  },\n  {\n    title: 'Trunk 0-1',\n    key: '0-1',\n    children: [\n      {\n        title: 'Branch 0-1-1',\n        key: '0-1-1',\n        children: [\n          {\n            title: 'Leaf ',\n            key: '0-1-1-1',\n          },\n          {\n            title: 'Leaf ',\n            key: '0-1-1-2',\n          },\n        ],\n      },\n      {\n        title: 'Leaf',\n        key: '0-1-2',\n      },\n    ],\n  },\n];\n</script>\n"
  },
  {
    "path": "packages/web-vue-storybook/stories/components/typography.vue",
    "content": "<template>\n  <Typography>\n    <RadioGroup v-model=\"heading\">\n      <Radio :key=\"1\" :value=\"1\">h1</Radio>\n      <Radio :key=\"2\" :value=\"2\">h2</Radio>\n      <Radio :key=\"3\" :value=\"3\">h3</Radio>\n      <Radio :key=\"4\" :value=\"4\">h4</Radio>\n      <Radio :key=\"5\" :value=\"5\">h5</Radio>\n      <Radio :key=\"6\" :value=\"6\">h6</Radio>\n    </RadioGroup>\n    <br />\n    <Checkbox v-model=\"bold\">bold</Checkbox>\n    <br />\n    <Checkbox v-model=\"mark\">mark</Checkbox>\n    <br />\n\n    <TypographyTitle :heading=\"heading\" :bold=\"bold\" :mark=\"mark\">\n      Typography Title {{ heading }}\n    </TypographyTitle>\n    <TypographyParagraph :bold=\"bold\" :mark=\"mark\">\n      Typography Paragraph {{ heading }}\n    </TypographyParagraph>\n    <TypographyText :ellipsis=\"{ expandable: true }\" :bold=\"bold\" :mark=\"mark\">\n      <template #expand-node=\"{ expanded }\">\n        {{ expanded ? 'expanded' : 'collapsed' }}\n      </template>\n      {{ heading }}\n      Typography Text Typography Text Typography Text Typography Text Typography\n      Text Typography Text Typography Text Typography Text Typography Text\n      Typography Text Typography Text Typography Text Typography Text Typography\n      Text Typography Text Typography Text Typography Text Typography Text\n      Typography Text Typography Text Typography Text Typography Text Typography\n      Text Typography Text Typography Text Typography Text Typography Text\n      Typography Text Typography Text Typography Text Typography Text Typography\n      Text Typography Text Typography Text Typography Text Typography Text\n      Typography Text Typography Text Typography Text Typography Text Typography\n      Text Typography Text Typography Text Typography Text Typography Text\n      Typography Text Typography Text Typography Text Typography Text Typography\n      Text\n    </TypographyText>\n    <TypographyText :ellipsis=\"{ showTooltip: true }\" :bold=\"bold\" :mark=\"mark\">\n      Tooltip Tooltip Tooltip Tooltip Typography Text Tooltip Tooltip Tooltip\n      Tooltip Tooltip Tooltip Tooltip Tooltip Typography Text Tooltip Tooltip\n      Tooltip Tooltip Tooltip Tooltip Tooltip Tooltip Typography Text Tooltip\n      Tooltip Tooltip Tooltip Tooltip Tooltip Tooltip Tooltip Typography Text\n      Tooltip Tooltip Tooltip Tooltip Tooltip Tooltip Tooltip Tooltip Typography\n      Text Tooltip Tooltip Tooltip Tooltip Tooltip Tooltip Tooltip Tooltip\n      Typography Text\n    </TypographyText>\n    <br />\n    <TypographyText copyable>copy me</TypographyText>\n    <br />\n    <TypographyText editable>edit me</TypographyText>\n    <br />\n    <TypographyText copyable>\n      <template #copy-tooltip=\"{ copied }\">\n        {{ copied ? '我已经被复制啦' : '快来复制我吧' }}\n      </template>\n      <template #copy-icon=\"{ copied }\">\n        {{ copied ? '已复制' : '复制' }}\n      </template>\n      copy me\n    </TypographyText>\n    <br />\n    <TypographyText editable>edit me</TypographyText>\n  </Typography>\n</template>\n<script>\nimport { Typography, Radio, Checkbox } from '@web-vue/components';\n\nexport default {\n  components: {\n    Typography,\n    TypographyTitle: Typography.Title,\n    TypographyText: Typography.Text,\n    TypographyParagraph: Typography.Paragraph,\n    RadioGroup: Radio.Group,\n    Radio,\n    Checkbox,\n  },\n  data() {\n    return {\n      heading: 1,\n      bold: false,\n      mark: false,\n    };\n  },\n};\n</script>\n"
  },
  {
    "path": "packages/web-vue-storybook/stories/components/virtual-list.vue",
    "content": "<template>\n  <TypographyTitle>Basic</TypographyTitle>\n  <Space style=\"margin-bottom: 20px\">\n    <Button @click=\"toggleHeight\">change height</Button>\n    <Button @click=\"scrollTo\">scrollTo index 20</Button>\n    <Button @click=\"toggleRawData\">toggle {{ data.length > 20 ? 'raw' : 'big' }} data</Button>\n    <InputNumber v-model=\"scrollToIndex\" />\n  </Space>\n  <VirtualList\n    ref=\"basicVirtualList\"\n    :data=\"data\"\n    style=\"background: #c4c4c4\"\n    :height=\"height\"\n    :threshold=\"20\"\n  >\n    <template #item=\"{ item }\">\n      <div\n        :style=\"{ height: `${item.height}px`, background: item.background }\"\n        >{{ item.label }}</div\n      >\n    </template>\n  </VirtualList>\n\n  <TypographyTitle>AutoComplete</TypographyTitle>\n  <AutoComplete :data=\"selectData\" />\n\n  <TypographyTitle>Select</TypographyTitle>\n  <Select :options=\"selectData\" />\n\n  <TypographyTitle>List</TypographyTitle>\n  <Space style=\"margin-bottom: 20px\">\n    <Button @click=\"listScrollTo\">scrollTo index 20</Button>\n    <Button @click=\"listScrollToKey\">scrollTo key 100</Button>\n  </Space>\n  <List\n    ref=\"listVirtualList\"\n    :data=\"listData\"\n    :virtual-list-props=\"{ height: 256 }\"\n  >\n    <template #item=\"{ item }\">\n      <ListItem>{{ item.label }}</ListItem>\n    </template>\n  </List>\n\n  <TypographyTitle>Tree</TypographyTitle>\n  <Space style=\"margin-bottom: 20px\">\n    <Button @click=\"treeScrollTo\">scrollTo index 4</Button>\n    <Button @click=\"treeScrollToKey\">scrollTo key 0-1-1</Button>\n  </Space>\n  <Tree\n    ref=\"treeVirtualList\"\n    :data=\"treeData\"\n    :virtual-list-props=\"{ height: 100 }\"\n  />\n\n  <TypographyTitle>TreeSelect</TypographyTitle>\n  <TreeSelect :data=\"treeData\" />\n</template>\n\n<script>\nimport { ref, watch } from 'vue';\nimport {\n  Button,\n  Tree,\n  Typography,\n  TreeSelect,\n  AutoComplete,\n  List,\n  Select,\n  Space,\n  InputNumber,\n} from '@web-vue/components';\nimport VirtualList from '@web-vue/components/_components/virtual-list-v2';\nimport { bigData } from './json';\n\nexport default {\n  components: {\n    Button,\n    VirtualList,\n    Tree,\n    TypographyTitle: Typography.Title,\n    TreeSelect,\n    AutoComplete,\n    List,\n    ListItem: List.Item,\n    Select,\n    Space,\n    InputNumber,\n  },\n  setup() {\n    const basicVirtualList = ref();\n    const listVirtualList = ref();\n    const treeVirtualList = ref();\n    const data = ref(bigData);\n    const rawData = new Array(10).fill(null).map((_, index) => ({\n      key: index,\n      label: `label-${index}`,\n      height: Math.random() * 200 + 16,\n      background: ['red', 'blue', 'yellow', 'green'][\n        Math.floor(Math.random() * 4)\n      ],\n    }));\n    const listData = ref(\n      new Array(10000).fill(null).map((_, index) => ({\n        key: index,\n        label: `label-${index}`,\n        height: Math.random() * 200 + 16,\n        background: ['red', 'blue', 'yellow', 'green'][\n          Math.floor(Math.random() * 4)\n        ],\n      }))\n    );\n\n    const selectData = new Array(10000).fill(null).map((_, index) => ({\n      key: index,\n      value: index,\n      label: `label-${index}`,\n      height: Math.random() * 50 + 16,\n      background: ['red', 'blue', 'yellow', 'green'][\n        Math.floor(Math.random() * 4)\n      ],\n    }));\n    const treeData = defaultTreeData;\n    const height = ref(200);\n    const scrollToIndex = ref(1);\n\n    watch(scrollToIndex, () => {\n      basicVirtualList.value.scrollTo({\n        index: scrollToIndex.value,\n        align: 'top',\n      });\n    });\n\n    return {\n      scrollToIndex,\n      basicVirtualList,\n      listVirtualList,\n      treeVirtualList,\n      treeData,\n      data,\n      selectData,\n      listData,\n      height,\n      toggleHeight() {\n        height.value = height.value === 200 ? 400 : 200;\n      },\n      scrollTo() {\n        basicVirtualList.value &&\n          basicVirtualList.value.scrollTo({ index: 20 });\n      },\n      listScrollTo() {\n        listVirtualList.value &&\n          listVirtualList.value.scrollIntoView({ index: 20, align: 'top' });\n      },\n      listScrollToKey() {\n        listVirtualList.value &&\n          listVirtualList.value.scrollIntoView({ key: 100, align: 'bottom' });\n      },\n      treeScrollTo() {\n        treeVirtualList.value &&\n          treeVirtualList.value.scrollIntoView({ index: 4, align: 'top' });\n      },\n      treeScrollToKey() {\n        treeVirtualList.value &&\n          treeVirtualList.value.scrollIntoView({\n            key: '0-1-1',\n            align: 'bottom',\n          });\n      },\n      toggleRawData() {\n        if (data.value.length > 20) {\n          data.value = rawData;\n        } else {\n          data.value = bigData;\n        }\n      }\n    };\n  },\n};\n\nconst defaultTreeData = [\n  {\n    title: 'Trunk 0-0',\n    key: '0-0',\n    dragIcon: () => 'ss',\n    children: [\n      {\n        title: 'Leaf 0-0-1',\n        key: '0-0-1',\n      },\n      {\n        title: 'Branch 0-0-2',\n        key: '0-0-2',\n        disableCheckbox: true,\n        children: [\n          {\n            draggable: false,\n            title: 'Leaf 0-0-2-1 (Drag disabled)',\n            key: '0-0-2-1',\n          },\n        ],\n      },\n    ],\n  },\n  {\n    title: 'Trunk 0-1',\n    key: '0-1',\n    children: [\n      {\n        title: 'Branch 0-1-1',\n        key: '0-1-1',\n        checkable: false,\n        children: [\n          {\n            title: 'Leaf 0-1-1-1',\n            key: '0-1-1-1',\n          },\n          {\n            title: 'Leaf 0-1-1-2',\n            key: '0-1-1-2',\n          },\n        ],\n      },\n      {\n        title: 'Leaf 0-1-2',\n        key: '0-1-2',\n      },\n    ],\n  },\n  {\n    title: 'Trunk 1-1',\n    key: '1-1',\n    children: [\n      {\n        title: 'Branch 1-1-1',\n        key: '1-1-1',\n        checkable: false,\n        children: [\n          {\n            title: 'Leaf 1-1-1-1',\n            key: '1-1-1-1',\n          },\n          {\n            title: 'Leaf 1-1-1-2',\n            key: '1-1-1-2',\n          },\n        ],\n      },\n      {\n        title: 'Leaf 1-1-2',\n        key: '1-1-2',\n      },\n    ],\n  },\n];\n</script>\n"
  },
  {
    "path": "packages/web-vue-storybook/stories/index.stories.ts",
    "content": "import StoryButton from './components/button.vue';\nimport StoryDropdown from './components/dropdown';\nimport StoryTypography from './components/typography.vue';\nimport StoryTree from './components/tree.vue';\nimport StoryForm from './components/form.vue';\nimport StoryTreeDraggable from './components/tree-draggable.vue';\nimport StoryVirtual from './components/virtual-list.vue';\nimport StorySpace from './components/space.vue';\nimport StoryMenu from './components/menu.vue';\nimport StorySelect from './components/select';\nimport StoryNumberInput from './components/number-input.vue';\nimport StorTreeSelect from './components/tree-select.vue';\nimport StoryDatePicker from './components/date-picker.vue';\n\nexport default {\n  title: 'Components',\n};\n\nexport const Button = () => StoryButton;\nexport const Dropdown = () => StoryDropdown;\nexport const Typography = () => StoryTypography;\nexport const Tree = () => StoryTree;\nexport const Form = () => StoryForm;\nexport const TreeDraggable = () => StoryTreeDraggable;\nexport const Virtual = () => StoryVirtual;\nexport const Space = () => StorySpace;\nexport const Menu = () => StoryMenu;\nexport const Select = () => StorySelect;\nexport const NumberInput = () => StoryNumberInput;\nexport const TreeSelect = () => StorTreeSelect;\nexport const DatePicker = () => StoryDatePicker;\n"
  },
  {
    "path": "packages/web-vue-storybook/tsconfig.json",
    "content": "{\n  \"compilerOptions\": {\n    \"outDir\": \"es\",\n    \"target\": \"ES2015\",\n    \"module\": \"ES2020\",\n    \"moduleResolution\": \"node\",\n    \"strict\": true,\n    \"allowJs\": true,\n    \"isolatedModules\": true,\n    \"esModuleInterop\": true,\n    \"jsx\": \"preserve\",\n    \"baseUrl\": \".\",\n    \"paths\": {\n      \"@web-vue/*\": [\n        \"../web-vue/*\"\n      ]\n    }\n  }\n}\n"
  },
  {
    "path": "pnpm-workspace.yaml",
    "content": "packages:\n  - 'packages/*'\n"
  }
]